.theme-card {
    position: relative;
    overflow: hidden;
    min-height: 216px;
    padding: 24px;
    transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}

.theme-card::after {
    content: "";
    position: absolute;
    width: 118px;
    height: 118px;
    top: -42px;
    right: -42px;
    border-radius: 50%;
    background: var(--theme-glow, rgba(242,200,75,.26));
    pointer-events: none;
}

.theme-card:nth-child(1) { --theme-accent: var(--ocean); --theme-glow: rgba(43,119,168,.16); }
.theme-card:nth-child(2) { --theme-accent: #9a6a16; --theme-glow: rgba(242,200,75,.24); }
.theme-card:nth-child(3) { --theme-accent: var(--green); --theme-glow: rgba(35,139,87,.16); }
.theme-card:nth-child(4) { --theme-accent: var(--forest); --theme-glow: rgba(11,79,58,.14); }
.theme-card:nth-child(5) { --theme-accent: var(--terracotta); --theme-glow: rgba(214,107,74,.16); }
.theme-card:nth-child(6) { --theme-accent: #27664e; --theme-glow: rgba(39,102,78,.16); }

.theme-card:hover {
    transform: translateY(-5px);
    border-color: color-mix(in srgb, var(--theme-accent) 35%, var(--line));
    box-shadow: 0 18px 42px rgba(23,51,42,.10);
}

.theme-card .theme-icon {
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;
    width: 64px;
    height: 64px;
    margin-bottom: 28px;
    border-radius: 20px;
    color: var(--theme-accent);
    background: rgba(255,255,255,.62);
    border: 1px solid rgba(255,255,255,.82);
    box-shadow: 0 10px 24px rgba(23,51,42,.07);
}

.theme-card .theme-icon svg {
    width: 38px;
    height: 38px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.4;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.theme-card strong,
.theme-card > span:last-child {
    position: relative;
    z-index: 1;
}

.theme-card strong {
    margin-top: auto;
    margin-bottom: 9px;
}

.theme-card > span:last-child {
    line-height: 1.45;
}

@media (max-width: 1050px) {
    .theme-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 640px) {
    .theme-grid { grid-template-columns: repeat(2, 1fr); }
    .theme-card { min-height: 200px; }
}

@media (max-width: 430px) {
    .theme-grid { grid-template-columns: 1fr; }
    .theme-card { min-height: 176px; }
}