/* =========================================
   1. APPLE THEME VARIABLES
   ========================================= */
:root {
    --bg-color: #e5e5ea;
    --blob-1: #ff2a5f;
    --blob-2: #007aff;
    --blob-3: #ff9500;
    --blob-opacity: 0.62;

    --glass-bg: rgba(255, 255, 255, 0.15);
    --glass-border: rgba(255, 255, 255, 0.4);
    --glass-shadow: rgba(0, 0, 0, 0.1);
    --glass-highlight: rgba(255, 255, 255, 0.8);
    --glass-caustic: rgba(255, 255, 255, 0.4);
    --reflection-start: rgba(255, 255, 255, 0.6);
    --reflection-end: rgba(255, 255, 255, 0.0);
    --glare-color: rgba(255, 255, 255, 0.5);

    --pill-bg: rgba(255, 255, 255, 0.7);
    --pill-shadow: 0 4px 12px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.05), inset 0 1px 1px rgba(255,255,255,0.8);
    --icon-color: rgba(0, 0, 0, 0.55);
    --icon-active: rgba(0, 0, 0, 0.95);
    --divider: rgba(0, 0, 0, 0.15);

    --text-main: #1c1c1e;
    --text-soft: rgba(0, 0, 0, 0.55);
    --card-bg: rgba(255, 255, 255, 0.35);
    --card-border: rgba(255, 255, 255, 0.55);
}

[data-theme="dark"] {
    --bg-color: #000000;
    --blob-1: #bf5af2;
    --blob-2: #0a84ff;
    --blob-3: #ff375f;
    --blob-opacity: 0.44;

    --glass-bg: rgba(30, 30, 35, 0.45);
    --glass-border: rgba(255, 255, 255, 0.15);
    --glass-shadow: rgba(0, 0, 0, 0.8);
    --glass-highlight: rgba(255, 255, 255, 0.25);
    --glass-caustic: rgba(255, 255, 255, 0.05);
    --reflection-start: rgba(255, 255, 255, 0.15);
    --reflection-end: rgba(255, 255, 255, 0.0);
    --glare-color: rgba(255, 255, 255, 0.15);

    --pill-bg: rgba(60, 60, 65, 0.8);
    --pill-shadow: 0 4px 12px rgba(0,0,0,0.4), 0 1px 2px rgba(0,0,0,0.2), inset 0 1px 1px rgba(255,255,255,0.2);
    --icon-color: rgba(255, 255, 255, 0.55);
    --icon-active: #ffffff;
    --divider: rgba(255, 255, 255, 0.15);

    --text-main: #f5f5f7;
    --text-soft: rgba(255, 255, 255, 0.55);
    --card-bg: rgba(40, 40, 45, 0.45);
    --card-border: rgba(255, 255, 255, 0.12);
}
/* =========================================
   2. GLOBAL SETUP
   ========================================= */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html, body {
    min-height: 100%;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    background: var(--bg-color);
    color: var(--text-main);
    -webkit-font-smoothing: antialiased;
    overflow-x: clip;
    transition: background 0.8s ease, color 0.5s ease;
}

/* =========================================
   3. BACKGROUND MESH
   ========================================= */
.bg-mesh {
    position: fixed;
    inset: 0;
    z-index: -1;
    background: var(--bg-color);
    transition: background 0.8s ease;
    overflow: hidden;
    pointer-events: none;
}

.blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(90px);
    opacity: var(--blob-opacity);
    animation: float 20s infinite alternate cubic-bezier(0.45, 0.05, 0.55, 0.95);
    will-change: transform;
    transition: background 0.8s ease, opacity 0.8s ease;
}

.blob-1 { width: 50vw; height: 50vw; top: -10%; left: -10%; background: var(--blob-1); animation-delay: 0s; }
.blob-2 { width: 45vw; height: 45vw; bottom: -10%; right: -10%; background: var(--blob-2); animation-delay: -5s; }
.blob-3 { width: 35vw; height: 35vw; top: 30%; left: 40%; background: var(--blob-3); animation-delay: -10s; }

@keyframes float {
    0%   { transform: translate(0, 0) scale(1) rotate(0deg); }
    33%  { transform: translate(5%, 10%) scale(1.05) rotate(5deg); }
    66%  { transform: translate(-5%, 5%) scale(0.95) rotate(-5deg); }
    100% { transform: translate(0, -10%) scale(1.1) rotate(0deg); }
}
/* =========================================
   3.b RESPONSIVE BLOB TWEAKS (PC screens)
   ========================================= */

/* Tablets සහ ඊට වැඩි screens වලදී colors අඩු කරනවා */
@media (min-width: 768px) {
    .blob {
        filter: blur(100px);
        opacity: calc(var(--blob-opacity) * 0.7);
    }
}

/* Desktop / PC screens වලදී තවත් අඩු කරනවා */
@media (min-width: 1024px) {
    .blob {
        filter: blur(110px);
        opacity: calc(var(--blob-opacity) * 0.5);
    }

    /* blob sizes ටිකක් පොඩි කරනවා PC එකේදී */
    .blob-1 { width: 42vw; height: 42vw; }
    .blob-2 { width: 38vw; height: 38vw; }
    .blob-3 { width: 30vw; height: 30vw; }
}

/* ලොකු desktop screens වලදී තව ටිකක් අඩු කරනවා */
@media (min-width: 1440px) {
    .blob {
        opacity: calc(var(--blob-opacity) * 0.4);
    }
}
/* =========================================
   4. TOP NAV (LIQUID GLASS)
   ========================================= */
.topbar-wrap {
    position: sticky;
    top: 16px;
    z-index: 100;
    display: flex;
    justify-content: center;
    padding: 0 16px;
}

.liquid-nav {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 10px 8px 18px;
    width: 100%;
    max-width: 1180px;
    border-radius: 99px;

    background: var(--glass-bg);
    backdrop-filter: blur(50px) saturate(200%);
    -webkit-backdrop-filter: blur(50px) saturate(200%);

    box-shadow:
        0 40px 80px -20px var(--glass-shadow),
        0 10px 30px -10px var(--glass-shadow),
        inset 0 2px 3px -1px var(--glass-highlight),
        inset 0 -2px 4px -1px var(--glass-caustic),
        inset 0 0 0 1px var(--glass-border);

    transition: all 0.5s ease;
}

.liquid-nav::before {
    content: '';
    position: absolute;
    top: 1px; left: 1px; right: 1px; height: 46%;
    border-radius: 99px 99px 24px 24px / 99px 99px 12px 12px;
    background: linear-gradient(180deg, var(--reflection-start) 0%, var(--reflection-end) 100%);
    pointer-events: none;
    z-index: 6;
    transition: background 0.5s ease;
}

.liquid-glare-container {
    position: absolute;
    inset: 0;
    border-radius: 99px;
    overflow: hidden;
    pointer-events: none;
    z-index: 5;
}

.liquid-glare {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 0.3s ease;
    background: radial-gradient(circle 90px at var(--x, 50%) var(--y, 50%), var(--glare-color) 0%, transparent 100%);
    mix-blend-mode: overlay;
}

.liquid-nav:hover .liquid-glare {
    opacity: 1;
}

/* ---- Brand ---- */
.brand {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    color: var(--text-main);
    font-weight: 700;
    font-size: 16px;
    letter-spacing: -0.3px;
    z-index: 8;
    flex-shrink: 0;
}

.brand-mark {
    position: relative;
    display: block;
    width: 30px;
    height: 30px;
    flex-shrink: 0;
    line-height: 0;
    overflow: hidden;
    border-radius: 8px;
}

.brand-mark img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    pointer-events: none;
    user-select: none;
    -webkit-user-drag: none;
    transition: opacity 0.4s ease;
}

.brand-mark .logo-black { opacity: 1; }
.brand-mark .logo-white { opacity: 0; }

[data-theme="dark"] .brand-mark .logo-black { opacity: 0; }
[data-theme="dark"] .brand-mark .logo-white { opacity: 1; }

/* ---- Center Menu ---- */
.nav-items {
    position: relative;
    display: flex;
    gap: 4px;
    z-index: 3;
    flex: 1;
    justify-content: center;
}

.active-pill {
    position: absolute;
    top: 0; left: 0;
    height: 44px;
    background: var(--pill-bg);
    border-radius: 99px;
    box-shadow: var(--pill-shadow);
    transition: transform 0.5s cubic-bezier(0.34, 1.2, 0.64, 1),
                width 0.5s cubic-bezier(0.34, 1.2, 0.64, 1),
                background 0.5s ease, box-shadow 0.5s ease;
    z-index: 1;
    pointer-events: none;
}

.nav-btn {
    position: relative;
    background: transparent;
    border: none;
    padding: 0 16px;
    height: 44px;
    border-radius: 99px;
    font-family: inherit;
    font-size: 14.5px;
    font-weight: 600;
    color: var(--icon-color);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: color 0.3s ease;
    outline: none;
    z-index: 2;
    white-space: nowrap;
}

.btn-content {
    display: flex;
    align-items: center;
    gap: 8px;
    pointer-events: none;
    transition: transform 0.2s cubic-bezier(0.32, 0.72, 0, 1);
}

.nav-btn:active .btn-content {
    transform: scale(0.92);
}

.nav-btn.active {
    color: var(--icon-active);
}

/* ---- More Dropdown ---- */
.more-wrap {
    position: relative;
}

.more-panel {
    position: absolute;
    top: calc(100% + 18px);
    left: 50%;
    transform: translateX(-50%) translateY(-8px) scale(0.94);
    transform-origin: top center;
    min-width: 240px;
    padding: 10px;
    border-radius: 22px;

    background: var(--pill-bg);
    backdrop-filter: blur(40px) saturate(200%);
    -webkit-backdrop-filter: blur(40px) saturate(200%);
    box-shadow:
        0 30px 60px -15px var(--glass-shadow),
        0 10px 25px -10px var(--glass-shadow),
        inset 0 1px 2px -1px var(--glass-highlight),
        inset 0 0 0 1px var(--glass-border);

    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, transform 0.4s cubic-bezier(0.34, 1.2, 0.64, 1), visibility 0.3s;
    z-index: 50;
}

.more-wrap.open .more-panel {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0) scale(1);
}

.more-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 14px;
    text-decoration: none;
    color: var(--text-main);
    font-size: 14.5px;
    font-weight: 500;
    transition: background 0.25s ease, transform 0.25s ease;
}

.more-item:hover {
    background: rgba(255, 255, 255, 0.18);
    transform: translateX(4px);
}

[data-theme="dark"] .more-item:hover {
    background: rgba(255, 255, 255, 0.08);
}

.more-ic {
    display: grid;
    place-items: center;
    width: 32px; height: 32px;
    border-radius: 10px;
    background: color-mix(in srgb, var(--c) 22%, transparent);
    color: var(--c);
    flex-shrink: 0;
    transition: transform 0.3s cubic-bezier(0.34, 1.4, 0.64, 1);
}

.more-item:hover .more-ic {
    transform: scale(1.08);
}

.more-ic svg { display: block; }

/* ---- Right Controls ---- */
.nav-right {
    display: flex;
    align-items: center;
    gap: 4px;
    z-index: 8;
    flex-shrink: 0;
}

.divider {
    width: 1px;
    height: 24px;
    background: var(--divider);
    margin: 0 4px;
    transition: background 0.5s ease;
}

.theme-btn,
.user-btn {
    position: relative;
    background: transparent;
    border: none;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    color: var(--icon-color);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    z-index: 3;
    outline: none;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.3s ease, background 0.3s ease;
}

.theme-btn:hover,
.user-btn:hover {
    color: var(--icon-active);
    background: rgba(255, 255, 255, 0.15);
}

[data-theme="dark"] .theme-btn:hover,
[data-theme="dark"] .user-btn:hover {
    background: rgba(255, 255, 255, 0.08);
}

/* Sun / Moon */
.theme-icon-wrapper {
    position: relative;
    width: 20px;
    height: 20px;
    pointer-events: none;
    transition: transform 0.2s cubic-bezier(0.32, 0.72, 0, 1);
}

.theme-btn:active .theme-icon-wrapper {
    transform: scale(0.8);
}

.theme-icon-wrapper svg {
    position: absolute;
    top: 0; left: 0;
    transition: transform 0.5s cubic-bezier(0.34, 1.2, 0.64, 1), opacity 0.4s ease;
    stroke-width: 2.2;
}

.sun  { opacity: 1; transform: rotate(0deg) scale(1); }
.moon { opacity: 0; transform: rotate(-90deg) scale(0); }

[data-theme="dark"] .sun  { opacity: 0; transform: rotate(90deg) scale(0); }
[data-theme="dark"] .moon { opacity: 1; transform: rotate(0deg) scale(1); }

/* ---- User + Login Pop ---- */
.user-wrap {
    position: relative;
    display: flex;
    align-items: center;
}

.login-pop {
    position: absolute;
    top: calc(100% + 14px);
    right: 0;
    padding: 8px 18px;
    border-radius: 99px;
    font-size: 13.5px;
    font-weight: 600;
    text-decoration: none;
    color: var(--text-main);

    background: var(--glass-bg);
    backdrop-filter: blur(30px) saturate(200%);
    -webkit-backdrop-filter: blur(30px) saturate(200%);
    box-shadow:
        0 20px 40px -12px var(--glass-shadow),
        inset 0 1px 2px -1px var(--glass-highlight),
        inset 0 0 0 1px var(--glass-border);

    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px) scale(0.85);
    transform-origin: top right;
    transition: opacity 0.3s ease, transform 0.4s cubic-bezier(0.34, 1.2, 0.64, 1), visibility 0.3s;
    white-space: nowrap;
}

.user-wrap.open .login-pop {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
}

.login-pop:hover {
    color: var(--icon-active);
}

/* =========================================
   5. PAGE
   ========================================= */
.page {
    max-width: 1180px;
    margin: 0 auto;
    padding: 40px 24px 60px;
}

/* ---- HERO ---- */
.hero {
    text-align: center;
    padding-top: 20px;
}

.hero-stage {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 40px;
    min-height: 220px;
    margin-bottom: 30px;
}

/* ---- CHIPS ---- */
.chips {
    display: flex;
    flex-direction: column;
    gap: 10px;
    transition: opacity 0.4s ease, transform 0.55s cubic-bezier(0.34, 1.2, 0.64, 1);
}

.chips-left {
    align-items: flex-end;
    opacity: 0.4;
    transform: translateX(-12px);
}

.chips-right {
    align-items: flex-start;
    opacity: 0.4;
    transform: translateX(12px);
}

.hero-stage:has(.face.look-left) .chips-left,
.hero-stage:has(.face.look-right) .chips-right {
    opacity: 1;
    transform: translateX(0);
}

.chips.swapping {
    opacity: 0 !important;
    transform: translateY(-10px) scale(0.96) !important;
}

.chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: 99px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-main);
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    box-shadow: 0 6px 18px -8px rgba(0,0,0,0.25);
    white-space: nowrap;
    animation: chipFloat 4s ease-in-out infinite;
    animation-delay: var(--d, 0s);
}

.chip:nth-child(1) { --d: 0s; }
.chip:nth-child(2) { --d: 0.6s; }
.chip:nth-child(3) { --d: 1.2s; }

.chip svg {
    opacity: 0.75;
    flex-shrink: 0;
}

@keyframes chipFloat {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-6px); }
}

/* =========================================
   ★★★ 3D FACE (Kimi-style glossy sphere) ★★★
   ========================================= */
.face {
    position: relative;
    width: 150px;
    height: 150px;
    border-radius: 50%;
    cursor: pointer;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    isolation: isolate;

    background:
        radial-gradient(circle at 30% 24%,
            rgba(255,255,255,0.95) 0%,
            rgba(255,255,255,0.35) 14%,
            transparent 42%),
        radial-gradient(circle at 72% 82%,
            color-mix(in srgb, var(--blob-2) 35%, transparent) 0%,
            transparent 58%),
        radial-gradient(circle at 50% 50%,
            color-mix(in srgb, var(--blob-1) 12%, var(--glass-bg)) 0%,
            var(--glass-bg) 100%);

    backdrop-filter: blur(40px) saturate(200%);
    -webkit-backdrop-filter: blur(40px) saturate(200%);

    box-shadow:
        0 44px 70px -22px var(--glass-shadow),
        0 16px 32px -14px var(--glass-shadow),
        inset -14px -20px 34px -12px rgba(0,0,0,0.24),
        inset 14px 16px 30px -12px rgba(255,255,255,0.6),
        inset 0 0 0 1px var(--glass-border),
        inset 0 6px 10px -3px var(--glass-highlight);

    transition: transform 0.4s cubic-bezier(0.34, 1.4, 0.64, 1),
                box-shadow 0.4s ease;
    animation: faceDrop 1.4s cubic-bezier(0.34, 1.4, 0.64, 1);
    transform-style: preserve-3d;
}

@keyframes faceDrop {
    0%   { transform: translateY(-140px) scale(0.7); opacity: 0; }
    60%  { transform: translateY(8px) scale(1.04); opacity: 1; }
    100% { transform: translateY(0) scale(1); }
}

.face:hover { transform: scale(1.06); }
.face:active { transform: scale(0.95); }

.face-inner {
    position: relative;
    width: 100%; height: 100%;
    transition: transform 0.5s cubic-bezier(0.34, 1.2, 0.64, 1);
    z-index: 2;
}

.face.look-left  .face-inner { transform: translateX(-14px) rotate(-5deg); }
.face.look-right .face-inner { transform: translateX(14px) rotate(5deg); }

.face-shine {
    position: absolute;
    top: 10%;
    left: 18%;
    width: 34%;
    height: 24%;
    border-radius: 50%;
    background: radial-gradient(ellipse at center,
        rgba(255,255,255,0.9) 0%,
        rgba(255,255,255,0) 70%);
    filter: blur(4px);
    pointer-events: none;
    z-index: 3;
}

.face-blush {
    position: absolute;
    top: 78px;
    width: 22px;
    height: 14px;
    border-radius: 50%;
    background: radial-gradient(ellipse at center,
        rgba(255, 90, 130, 0.55) 0%,
        rgba(255, 90, 130, 0) 75%);
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
    z-index: 2;
}
.blush-l { left: 18px; }
.blush-r { right: 18px; }

.face.smile .face-blush,
.face.angry .face-blush { opacity: 1; }

.eye {
    position: absolute;
    top: 48px;
    width: 17px; height: 17px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #555 0%, var(--text-main) 62%);
    box-shadow: inset -2px -2px 3px rgba(0,0,0,0.3);
    transition: all 0.4s cubic-bezier(0.34, 1.2, 0.64, 1);
    transform-origin: center;
    z-index: 4;
}

.eye::after {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: rgba(255,255,255,0.9);
    filter: blur(0.4px);
}

.eye-l { left: 38px; }
.eye-r { right: 38px; }

.face.blink .eye {
    transform: scaleY(0.1);
    border-radius: 8px;
}
.face.blink .eye::after { opacity: 0; }

.face.look-left  .eye-l { left: 32px; }
.face.look-left  .eye-r { right: 44px; }
.face.look-right .eye-l { left: 44px; }
.face.look-right .eye-r { right: 32px; }

.eyebrow {
    position: absolute;
    top: 34px;
    width: 20px;
    height: 3px;
    border-radius: 3px;
    background: var(--text-main);
    opacity: 0;
    transition: all 0.35s cubic-bezier(0.34, 1.4, 0.64, 1);
    transform-origin: center;
    z-index: 4;
}
.eyebrow-l { left: 34px; transform: rotate(0deg) translateY(-8px); }
.eyebrow-r { right: 34px; transform: rotate(0deg) translateY(-8px); }

.face.angry .eyebrow { opacity: 0.9; }
.face.angry .eyebrow-l { transform: rotate(22deg) translateY(0); }
.face.angry .eyebrow-r { transform: rotate(-22deg) translateY(0); }

.mouth {
    position: absolute;
    bottom: 38px;
    left: 50%;
    transform: translateX(-50%);
    width: 34px; height: 16px;
    border-bottom-left-radius: 40px;
    border-bottom-right-radius: 40px;
    border: 3px solid var(--text-main);
    border-top: none;
    transition: all 0.5s cubic-bezier(0.34, 1.4, 0.64, 1);
    z-index: 4;
}

.face.smile .mouth {
    width: 54px;
    height: 28px;
    bottom: 30px;
    border-bottom-left-radius: 60px;
    border-bottom-right-radius: 60px;
    border-width: 4px;
}

.face.angry .mouth {
    width: 42px;
    height: 12px;
    bottom: 42px;
    border: none;
    border-top: 3px solid var(--text-main);
    border-top-left-radius: 60px;
    border-top-right-radius: 60px;
    border-bottom: none;
}

.face.shake {
    animation: angryShake 0.55s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
}

@keyframes angryShake {
    0%, 100% { transform: translateX(0) rotate(0deg); }
    15%      { transform: translateX(-5px) rotate(-3deg); }
    30%      { transform: translateX(5px)  rotate(3deg); }
    45%      { transform: translateX(-4px) rotate(-2deg); }
    60%      { transform: translateX(4px)  rotate(2deg); }
    75%      { transform: translateX(-2px) rotate(-1deg); }
}

/* ---- HERO TEXT ---- */
.hero-title {
    font-size: clamp(28px, 5vw, 48px);
    font-weight: 800;
    letter-spacing: -1.2px;
    line-height: 1.1;
    margin-bottom: 14px;
    animation: fadeUp 0.8s 0.3s both cubic-bezier(0.34, 1.2, 0.64, 1);
}

.grad {
    background: linear-gradient(135deg, #ff2a5f, #007aff, #bf5af2);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.hero-sub {
    font-size: clamp(14px, 2vw, 17px);
    color: var(--text-soft);
    max-width: 560px;
    margin: 0 auto;
    line-height: 1.6;
    animation: fadeUp 0.8s 0.45s both cubic-bezier(0.34, 1.2, 0.64, 1);
}

@keyframes fadeUp {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ---- CARDS ---- */
.cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 20px;
    margin-top: 60px;
}
.cards a {
    text-decoration: none;
    color: inherit;
    display: block;
}
.card {
    position: relative;
    padding: 26px 24px 30px;
    border-radius: 26px;
    overflow: hidden;

    background: var(--card-bg);
    border: 1px solid var(--card-border);
    backdrop-filter: blur(30px) saturate(180%);
    -webkit-backdrop-filter: blur(30px) saturate(180%);
    box-shadow:
        0 20px 40px -20px var(--glass-shadow),
        inset 0 1px 2px -1px var(--glass-highlight);

    transition: transform 0.45s cubic-bezier(0.34, 1.4, 0.64, 1), box-shadow 0.4s ease;
    animation: cardDrop 0.9s var(--delay, 0s) both cubic-bezier(0.34, 1.4, 0.64, 1);
    cursor: pointer;
}

@keyframes cardDrop {
    0%   { opacity: 0; transform: translateY(40px) scale(0.95); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}

.card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--accent) 25%, transparent), transparent 60%);
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
}

.card:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow:
        0 40px 70px -25px var(--glass-shadow),
        0 0 0 1px color-mix(in srgb, var(--accent) 40%, transparent),
        inset 0 1px 2px -1px var(--glass-highlight);
}

.card:hover::before { opacity: 1; }

.card-icon {
    width: 46px; height: 46px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    margin-bottom: 16px;
    color: var(--accent);
    background: color-mix(in srgb, var(--accent) 18%, transparent);
    transition: transform 0.4s cubic-bezier(0.34, 1.4, 0.64, 1);
}

.card:hover .card-icon { transform: scale(1.1) rotate(-6deg); }

.card h3 {
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -0.3px;
    margin-bottom: 8px;
    color: var(--text-soft);
}

.card p {
    font-size: 14px;
    line-height: 1.55;
    color: var(--text-soft);
}

.card-arrow {
    position: absolute;
    bottom: 22px;
    right: 24px;
    font-size: 18px;
    color: var(--accent);
    opacity: 0;
    transform: translateX(-8px);
    transition: opacity 0.3s ease, transform 0.4s cubic-bezier(0.34, 1.4, 0.64, 1);
}

.card:hover .card-arrow {
    opacity: 1;
    transform: translateX(0);
}

/* Select Your Grade ඇතුළු Content එක වටා ඇති Main Container එකට (උදා: main හෝ .container) */
main {
    /* 100vh වලින් Header සහ Footer වල උස අඩු කර ඉතිරි උස ලබා දෙයි */
    min-height: calc(100vh - 120px); 
}

/* Footer එක වෙනස් කිරීමට අවශ්‍ය නැත */
.site-footer {
    text-align: center;
    padding: 30px 20px 40px;
    font-size: 13px;
    color: var(--text-soft);
    letter-spacing: 0.2px;
    width: 100%;
}


/* =========================================
   7. RESPONSIVE
   ========================================= */
@media (max-width: 900px) {
    .topbar-wrap { top: 10px; padding: 0 10px; }

    .liquid-nav {
        flex-wrap: wrap;
        border-radius: 30px;
        padding: 10px 12px;
        gap: 6px;
    }

    .brand { order: 1; }
    .nav-right { order: 2; margin-left: auto; }

    .nav-items {
        order: 3;
        flex-basis: 100%;
        flex-wrap: wrap;
        justify-content: center;
        padding-bottom: 2px;
        overflow: visible;
    }

    .nav-btn { padding: 0 13px; font-size: 13.5px; }
    .label { display: none; }
    .nav-btn.active .label { display: inline; }

    .more-panel {
        left: auto;
        right: 0;
        transform: translateY(-8px) scale(0.94);
        transform-origin: top right;
        min-width: 220px;
        width: max-content;
        max-width: calc(100vw - 24px);
    }
    .more-wrap.open .more-panel {
        transform: translateY(0) scale(1);
    }

    .hero-stage { gap: 16px; min-height: 180px; }
    .face { width: 110px; height: 110px; }
    .eye { top: 34px; width: 13px; height: 13px; }
    .eye::after { width: 4px; height: 4px; top: 2px; left: 2px; }
    .eye-l { left: 28px; }
    .eye-r { right: 28px; }
    .mouth { bottom: 26px; width: 28px; height: 13px; }
    .eyebrow { top: 24px; width: 16px; }
    .eyebrow-l { left: 24px; }
    .eyebrow-r { right: 24px; }
    .face-blush { top: 58px; width: 16px; height: 10px; }
    .blush-l { left: 12px; }
    .blush-r { right: 12px; }

    .chips { gap: 6px; }
    .chip { font-size: 11px; padding: 6px 10px; }
}

@media (max-width: 520px) {
    .page { padding: 24px 16px 40px; }
    .hero-stage { flex-direction: column; gap: 20px; }
    .chips {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
    }
    .chips-left, .chips-right {
        align-items: center;
        transform: none;
    }
    .cards { margin-top: 40px; gap: 14px; }
    .card { padding: 20px 18px 26px; border-radius: 22px; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* =========================================
   ★ 8. ABOUT SECTION
   ========================================= */
.about {
    margin-top: 90px;
    scroll-margin-top: 120px;
}

.about-head {
    text-align: center;
    margin-bottom: 42px;
}

.about-badge {
    display: inline-block;
    padding: 6px 16px;
    border-radius: 99px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .8px;
    text-transform: uppercase;
    color: var(--text-main);
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    margin-bottom: 16px;
}

.about-head h2 {
    font-size: clamp(26px, 4.4vw, 40px);
    font-weight: 800;
    letter-spacing: -1px;
    line-height: 1.15;
    margin-bottom: 12px;
}

.about-head p {
    font-size: clamp(14px, 2vw, 16px);
    color: var(--text-soft);
    max-width: 620px;
    margin: 0 auto;
    line-height: 1.65;
}

.about-grid {
    display: grid;
    grid-template-columns: 1fr 1.15fr;
    gap: 22px;
}

.about-card {
    position: relative;
    padding: 28px 26px;
    border-radius: 26px;
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    backdrop-filter: blur(30px) saturate(180%);
    -webkit-backdrop-filter: blur(30px) saturate(180%);
    box-shadow:
        0 20px 40px -20px var(--glass-shadow),
        inset 0 1px 2px -1px var(--glass-highlight);
    overflow: hidden;
    animation: cardDrop 0.9s both cubic-bezier(0.34, 1.4, 0.64, 1);
}

/* ---------- Profile Card ---------- */
.profile-card {
    text-align: center;
}

.profile-card::before {
    content: '';
    position: absolute;
    inset: -40% -40% auto -40%;
    height: 60%;
    background: radial-gradient(circle at 50% 0%,
        color-mix(in srgb, var(--blob-1) 30%, transparent), transparent 70%);
    pointer-events: none;
}

.avatar {
    position: relative;
    width: 96px;
    height: 96px;
    margin: 0 auto 18px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 34px;
    font-weight: 800;
    color: #fff;
    letter-spacing: -1px;
    background: linear-gradient(135deg, #ff2a5f, #007aff 55%, #bf5af2);
    box-shadow:
        0 18px 40px -12px rgba(0,122,255,.5),
        inset 0 2px 6px rgba(255,255,255,.35);
    z-index: 1;
}

.avatar::after {
    content: '';
    position: absolute;
    inset: -5px;
    border-radius: 50%;
    border: 1.5px solid color-mix(in srgb, #007aff 45%, transparent);
    animation: pulseRing 2.6s ease-in-out infinite;
}

@keyframes pulseRing {
    0%, 100% { transform: scale(1);    opacity: .6; }
    50%      { transform: scale(1.08); opacity: .15; }
}

.profile-card h3 {
    position: relative;
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -.5px;
    color: var(--text-main);
    margin-bottom: 4px;
}

.profile-card .role {
    position: relative;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-soft);
    letter-spacing: .3px;
    margin-bottom: 16px;
}

.profile-card .bio {
    position: relative;
    font-size: 14.5px;
    line-height: 1.65;
    color: var(--text-soft);
    margin-bottom: 22px;
}

.profile-card .bio strong {
    color: var(--text-main);
    font-weight: 700;
}

.contact-list {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.contact-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 16px;
    text-decoration: none;
    color: var(--text-main);
    font-size: 14px;
    font-weight: 600;
    background: color-mix(in srgb, var(--card-bg) 85%, transparent);
    border: 1px solid var(--card-border);
    transition:
        transform .35s cubic-bezier(.34,1.4,.64,1),
        background .3s ease,
        box-shadow .3s ease;
}

.contact-item:hover {
    transform: translateY(-3px);
    background: color-mix(in srgb, var(--c) 14%, var(--card-bg));
    box-shadow: 0 12px 26px -14px color-mix(in srgb, var(--c) 70%, transparent);
}

.contact-ic {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    color: #fff;
    background: var(--c);
    flex-shrink: 0;
    box-shadow: 0 8px 18px -8px var(--c);
}

.contact-meta {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1px;
    min-width: 0;
    flex: 1;
}

.contact-meta .lbl {
    font-size: 10.5px;
    font-weight: 700;
    color: var(--text-soft);
    letter-spacing: .6px;
    text-transform: uppercase;
}

.contact-meta .val {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-main);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}

/* ---------- Feedback Card ---------- */
.feedback-card h3 {
    font-size: 20px;
    font-weight: 800;
    letter-spacing: -.4px;
    color: var(--text-main);
    margin-bottom: 6px;
}

.feedback-card .sub {
    font-size: 13.5px;
    color: var(--text-soft);
    margin-bottom: 20px;
    line-height: 1.6;
}

.field {
    margin-bottom: 14px;
}

.field label {
    display: block;
    font-size: 11.5px;
    font-weight: 700;
    color: var(--text-soft);
    letter-spacing: .6px;
    text-transform: uppercase;
    margin-bottom: 7px;
}

.field input,
.field textarea {
    width: 100%;
    padding: 13px 15px;
    font-family: inherit;
    font-size: 14.5px;
    color: var(--text-main);
    background: color-mix(in srgb, var(--card-bg) 90%, transparent);
    border: 1px solid var(--card-border);
    border-radius: 14px;
    outline: none;
    transition: border-color .3s ease, box-shadow .3s ease, background .3s ease;
    resize: vertical;
}

.field textarea {
    min-height: 108px;
    line-height: 1.55;
}

.field input::placeholder,
.field textarea::placeholder {
    color: var(--text-soft);
    opacity: .7;
}

.field input:focus,
.field textarea:focus {
    border-color: color-mix(in srgb, #007aff 60%, transparent);
    box-shadow: 0 0 0 4px color-mix(in srgb, #007aff 18%, transparent);
}

.submit-btn {
    width: 100%;
    padding: 14px 20px;
    margin-top: 4px;
    border: none;
    border-radius: 14px;
    font-family: inherit;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .2px;
    color: #fff;
    cursor: pointer;
    background: linear-gradient(135deg, #25D366, #128C7E);
    box-shadow: 0 14px 30px -12px rgba(37,211,102,.7);
    transition:
        transform .25s cubic-bezier(.34,1.4,.64,1),
        box-shadow .3s ease,
        filter .3s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
}

.submit-btn:hover {
    transform: translateY(-2px);
    filter: brightness(1.05);
    box-shadow: 0 18px 38px -14px rgba(37,211,102,.85);
}

.submit-btn:active {
    transform: scale(.97);
}

/* ---------- Toast ---------- */
.toast {
    position: fixed;
    left: 50%;
    bottom: 30px;
    transform: translate(-50%, 20px);
    padding: 13px 22px;
    border-radius: 99px;
    font-size: 14px;
    font-weight: 600;
    color: #fff;
    background: linear-gradient(135deg, #30d158, #128C7E);
    box-shadow: 0 20px 40px -12px rgba(0,0,0,.4);
    opacity: 0;
    visibility: hidden;
    transition:
        opacity .35s ease,
        transform .45s cubic-bezier(.34,1.4,.64,1),
        visibility .35s;
    z-index: 999;
    display: flex;
    align-items: center;
    gap: 9px;
    pointer-events: none;
}

.toast.show {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0);
}

/* ---------- About responsive ---------- */
@media (max-width: 780px) {
    .about { margin-top: 70px; }
    .about-grid { grid-template-columns: 1fr; gap: 16px; }
    .about-card { padding: 24px 20px; border-radius: 22px; }
    .avatar { width: 82px; height: 82px; font-size: 28px; }
    .profile-card h3 { font-size: 20px; }
}

/* =========================================
   ★ <a> tag එකට button style
   ========================================= */
a.nav-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: var(--icon-color);
    -webkit-tap-highlight-color: transparent;
}
a.nav-btn.active { color: var(--icon-active); }
a.nav-btn:hover  { color: var(--icon-active); }

/* =========================================
   ★ 12. GET STARTED BUTTON
   ========================================= */
.get-started-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    margin-top: 34px;
    animation: fadeUp 0.8s 0.6s both cubic-bezier(0.34, 1.2, 0.64, 1);
}

.get-started-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 14px;
    padding: 14px 26px 14px 18px;
    border-radius: 20px;
    text-decoration: none;
    color: #fff;
    overflow: hidden;
    isolation: isolate;

    background: linear-gradient(135deg, #ff2a5f 0%, #bf5af2 50%, #007aff 100%);
    background-size: 200% 200%;

    box-shadow:
        0 20px 40px -14px rgba(191, 90, 242, 0.55),
        0 8px 20px -8px rgba(0, 122, 255, 0.4),
        inset 0 1px 2px rgba(255, 255, 255, 0.4),
        inset 0 -1px 2px rgba(0, 0, 0, 0.15);

    transition:
        transform 0.4s cubic-bezier(0.34, 1.4, 0.64, 1),
        box-shadow 0.4s ease,
        background-position 0.8s ease;
}

.get-started-btn::before {
    content: '';
    position: absolute;
    inset: -6px;
    border-radius: 24px;
    background: linear-gradient(135deg, #ff2a5f, #bf5af2, #007aff);
    filter: blur(18px);
    opacity: 0.45;
    z-index: -1;
    transition: opacity 0.4s ease;
}

.get-started-btn:hover {
    transform: translateY(-3px) scale(1.02);
    background-position: 100% 50%;
    box-shadow:
        0 26px 50px -16px rgba(191, 90, 242, 0.7),
        0 10px 24px -10px rgba(0, 122, 255, 0.55),
        inset 0 1px 2px rgba(255, 255, 255, 0.5),
        inset 0 -1px 2px rgba(0, 0, 0, 0.15);
}

.get-started-btn:hover::before { opacity: 0.75; }
.get-started-btn:active { transform: translateY(-1px) scale(0.98); }

.gs-icon {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.22);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow:
        inset 0 1px 2px rgba(255, 255, 255, 0.4),
        0 4px 10px -4px rgba(0, 0, 0, 0.3);
    flex-shrink: 0;
    transition: transform 0.4s cubic-bezier(0.34, 1.5, 0.64, 1);
}

.get-started-btn:hover .gs-icon {
    transform: translateX(4px) scale(1.08);
}

.gs-icon svg {
    transition: transform 0.4s cubic-bezier(0.34, 1.5, 0.64, 1);
}

.get-started-btn:hover .gs-icon svg {
    transform: translateX(2px);
}

.gs-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
    text-align: left;
}

.gs-title {
    font-size: 16px;
    font-weight: 800;
    letter-spacing: -0.2px;
    line-height: 1.1;
    color: #fff;
}

.gs-desc {
    font-size: 11.5px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.85);
    letter-spacing: 0.1px;
    line-height: 1.2;
}

.gs-shine {
    position: absolute;
    top: 0;
    left: -100%;
    width: 60%;
    height: 100%;
    background: linear-gradient(
        100deg,
        transparent 0%,
        rgba(255, 255, 255, 0.45) 50%,
        transparent 100%
    );
    transform: skewX(-20deg);
    pointer-events: none;
    z-index: 2;
}

.get-started-btn:hover .gs-shine {
    animation: gsShine 0.9s ease;
}

@keyframes gsShine {
    0%   { left: -100%; }
    100% { left: 200%; }
}

.get-started-hint {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    color: var(--text-soft);
    letter-spacing: 0.1px;
    margin: 0;
    opacity: 0.85;
}

.get-started-hint svg {
    opacity: 0.7;
    flex-shrink: 0;
}

@media (max-width: 520px) {
    .get-started-wrap {
        margin-top: 26px;
        gap: 12px;
    }
    .get-started-btn {
        padding: 12px 20px 12px 14px;
        gap: 11px;
        border-radius: 18px;
    }
    .gs-icon {
        width: 36px;
        height: 36px;
        border-radius: 10px;
    }
    .gs-title { font-size: 15px; }
    .gs-desc  { font-size: 10.5px; }
    .get-started-hint {
        font-size: 11.5px;
        text-align: center;
        padding: 0 10px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .get-started-btn:hover .gs-shine { animation: none; }
    .get-started-btn:hover .gs-icon,
    .get-started-btn:hover .gs-icon svg { transform: none; }
}

/* =========================================
   ★ 15. SFX SECTION GUIDE
   ========================================= */
.sfx-sections {
    margin-top: 50px;
    animation: fadeUp 0.9s 0.3s both cubic-bezier(0.34, 1.2, 0.64, 1);
}

.sfx-sections-title {
    text-align: center;
    font-size: clamp(20px, 3vw, 26px);
    font-weight: 800;
    letter-spacing: -0.6px;
    color: var(--text-main);
    margin-bottom: 26px;
}

.sfx-sections-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 14px;
}

.sfx-section-card {
    position: relative;
    padding: 22px 20px 20px;
    border-radius: 20px;
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    backdrop-filter: blur(24px) saturate(180%);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    box-shadow:
        0 14px 30px -18px var(--glass-shadow),
        inset 0 1px 2px -1px var(--glass-highlight);
    overflow: hidden;
    transition: transform 0.4s cubic-bezier(0.34, 1.4, 0.64, 1),
                box-shadow 0.4s ease,
                border-color 0.3s ease;
}

.sfx-section-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 100% 0%,
        color-mix(in srgb, var(--c) 22%, transparent), transparent 60%);
    opacity: 0.55;
    transition: opacity 0.4s ease;
    pointer-events: none;
}

.sfx-section-card::after {
    content: '';
    position: absolute;
    left: 20px;
    right: 20px;
    bottom: 0;
    height: 2px;
    background: linear-gradient(90deg,
        transparent,
        var(--c),
        transparent);
    opacity: 0.35;
    transition: opacity 0.4s ease, transform 0.4s ease;
}

.sfx-section-card:hover {
    transform: translateY(-5px);
    border-color: color-mix(in srgb, var(--c) 45%, transparent);
    box-shadow:
        0 22px 40px -20px var(--glass-shadow),
        0 0 0 1px color-mix(in srgb, var(--c) 35%, transparent),
        inset 0 1px 2px -1px var(--glass-highlight);
}

.sfx-section-card:hover::before { opacity: 0.9; }
.sfx-section-card:hover::after  { opacity: 0.8; }

.sfx-section-icon {
    position: relative;
    width: 44px;
    height: 44px;
    border-radius: 13px;
    display: grid;
    place-items: center;
    margin-bottom: 14px;
    color: var(--c);
    background: color-mix(in srgb, var(--c) 16%, transparent);
    box-shadow: inset 0 1px 2px rgba(255,255,255,0.15);
    transition: transform 0.4s cubic-bezier(0.34, 1.4, 0.64, 1);
    z-index: 1;
}

.sfx-section-card:hover .sfx-section-icon {
    transform: scale(1.08) rotate(-5deg);
}

.sfx-section-card h4 {
    position: relative;
    font-size: 15.5px;
    font-weight: 800;
    letter-spacing: -0.3px;
    color: var(--text-main);
    margin-bottom: 7px;
    z-index: 1;
}

.sfx-section-card p {
    position: relative;
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--text-soft);
    z-index: 1;
}

@media (max-width: 780px) {
    .sfx-sections { margin-top: 40px; }
    .sfx-sections-title { margin-bottom: 22px; }
    .sfx-sections-grid {
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: 12px;
    }
    .sfx-section-card { padding: 18px 16px 16px; border-radius: 18px; }
    .sfx-section-icon { width: 40px; height: 40px; border-radius: 12px; margin-bottom: 12px; }
    .sfx-section-card h4 { font-size: 14.5px; }
    .sfx-section-card p  { font-size: 13px; }
}

@media (max-width: 460px) {
    .sfx-sections-grid { grid-template-columns: 1fr; gap: 10px; }
    .sfx-section-card { padding: 16px 14px; }
    .sfx-section-card h4 { font-size: 14px; }
    .sfx-section-card p  { font-size: 12.5px; line-height: 1.5; }
}

@media (prefers-reduced-motion: reduce) {
    .sfx-section-card:hover { transform: none; }
    .sfx-section-card:hover .sfx-section-icon { transform: none; }
}

/* =========================================
   ★ 16. LOADING SCREEN — Smiling Listener 🎧
   (homepage face එකේ eyes + mouth + colors)
   ========================================= */
.loading {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 26px;
    background: var(--bg-color);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.45s ease, visibility 0.45s ease;
    pointer-events: none;
    overflow: hidden;
}

.loading.show {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

/* Soft ambient glow behind the face */
.loading::before {
    content: '';
    position: absolute;
    width: 60vmin;
    height: 60vmin;
    border-radius: 50%;
    background: radial-gradient(circle,
        color-mix(in srgb, var(--blob-1) 30%, transparent) 0%,
        color-mix(in srgb, var(--blob-2) 18%, transparent) 45%,
        transparent 70%);
    filter: blur(70px);
    animation: loadGlow 2.2s ease-in-out infinite;
    pointer-events: none;
}

@keyframes loadGlow {
    0%, 100% { transform: scale(1);    opacity: 0.7; }
    50%      { transform: scale(1.15); opacity: 1;   }
}

/* Person : gentle rocking */
.loading-person {
    position: relative;
    z-index: 2;
    animation: personGroove 1.6s ease-in-out infinite;
    transform-origin: center bottom;
    will-change: transform;
}

@keyframes personGroove {
    0%, 100% { transform: rotate(-4deg) translateY(0);   }
    50%      { transform: rotate(4deg)  translateY(-3px); }
}

/* ============ HEAD — හරියටම homepage හිනා මූන ============ */
.lp-head {
    position: relative;
    width: 130px;
    height: 130px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    isolation: isolate;

    background:
        radial-gradient(circle at 30% 24%,
            rgba(255,255,255,0.95) 0%,
            rgba(255,255,255,0.35) 14%,
            transparent 42%),
        radial-gradient(circle at 72% 82%,
            color-mix(in srgb, var(--blob-2) 35%, transparent) 0%,
            transparent 58%),
        radial-gradient(circle at 50% 50%,
            color-mix(in srgb, var(--blob-1) 12%, var(--glass-bg)) 0%,
            var(--glass-bg) 100%);

    backdrop-filter: blur(40px) saturate(200%);
    -webkit-backdrop-filter: blur(40px) saturate(200%);

    box-shadow:
        0 44px 70px -22px var(--glass-shadow),
        0 16px 32px -14px var(--glass-shadow),
        inset -14px -20px 34px -12px rgba(0,0,0,0.24),
        inset 14px 16px 30px -12px rgba(255,255,255,0.6),
        inset 0 0 0 1px var(--glass-border),
        inset 0 6px 10px -3px var(--glass-highlight);
}

/* Shine spot (homepage face එකේ වගේම) */
.lp-shine {
    position: absolute;
    top: 12%;
    left: 18%;
    width: 34%;
    height: 24%;
    border-radius: 50%;
    background: radial-gradient(ellipse at center,
        rgba(255,255,255,0.9) 0%,
        rgba(255,255,255,0) 70%);
    filter: blur(4px);
    pointer-events: none;
    z-index: 3;
}

/* ============ EYES — හරියටම homepage ඇස් (round, open) ============ */
.lp-eye {
    position: absolute;
    top: 42px;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #555 0%, var(--text-main) 62%);
    box-shadow: inset -2px -2px 3px rgba(0,0,0,0.3);
    transition: all 0.4s cubic-bezier(0.34, 1.2, 0.64, 1);
    transform-origin: center;
    z-index: 5;
    animation: eyeGroove 1.6s ease-in-out infinite;
}

/* White highlight dot inside each eye */
.lp-eye::after {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    width: 4.5px;
    height: 4.5px;
    border-radius: 50%;
    background: rgba(255,255,255,0.9);
    filter: blur(0.4px);
}

.lp-eye-l { left: 33px; }
.lp-eye-r { right: 33px; }

/* Gentle blink-groove (still looks open, just pulses) */
@keyframes eyeGroove {
    0%, 100% { transform: scaleY(1);    }
    50%      { transform: scaleY(0.7);  }
}

/* ============ MOUTH — හරියටම homepage mouth (curved smile) ============ */
.lp-smile {
    position: absolute;
    bottom: 32px;
    left: 50%;
    transform: translateX(-50%);
    width: 34px;
    height: 16px;
    border-bottom-left-radius: 40px;
    border-bottom-right-radius: 40px;
    border: 3px solid var(--text-main);
    border-top: none;
    z-index: 5;
    animation: smileGroove 1.6s ease-in-out infinite;
    transform-origin: center top;
}

@keyframes smileGroove {
    0%, 100% { transform: translateX(-50%) scale(1);    }
    50%      { transform: translateX(-50%) scale(1.08); }
}

/* ============ HEADPHONES ============ */
.lp-band {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    width: 148px;
    height: 90px;
    border: 7px solid #1c1c1e;
    border-bottom: none;
    border-radius: 74px 74px 0 0;
    z-index: 1;
    transition: border-color 0.4s ease;
}
[data-theme="dark"] .lp-band { border-color: #f5f5f7; }

.lp-cup {
    position: absolute;
    top: 42px;
    width: 30px;
    height: 52px;
    border-radius: 15px;
    background: #1c1c1e;
    box-shadow:
        inset 0 3px 4px rgba(255,255,255,0.22),
        inset 0 -4px 8px rgba(0,0,0,0.45),
        0 6px 16px rgba(0,0,0,0.3);
    z-index: 6;
    transition: background 0.4s ease, box-shadow 0.4s ease;
}
[data-theme="dark"] .lp-cup {
    background: #f5f5f7;
    box-shadow:
        inset 0 3px 4px rgba(0,0,0,0.1),
        inset 0 -4px 8px rgba(0,0,0,0.15),
        0 6px 16px rgba(0,0,0,0.6);
}
.lp-cup-l { left: -16px; }
.lp-cup-r { right: -16px; }

/* ============ LOADING TEXT ============ */
.loading-text {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: var(--text-soft);
    z-index: 2;
    margin: 0;
    display: inline-flex;
    align-items: baseline;
}
.loading-text .dot { animation: dotBounce 1.4s ease-in-out infinite; }
.loading-text .dot:nth-child(2) { animation-delay: 0.15s; }
.loading-text .dot:nth-child(3) { animation-delay: 0.3s;  }

@keyframes dotBounce {
    0%, 60%, 100% { opacity: 0.3; transform: translateY(0);    }
    30%           { opacity: 1;   transform: translateY(-3px); }
}

/* ============ PROGRESS BAR ============ */
.loading-bar {
    width: 180px;
    height: 3px;
    border-radius: 3px;
    background: color-mix(in srgb, var(--text-soft) 20%, transparent);
    overflow: hidden;
    z-index: 2;
    position: relative;
}
.loading-bar-fill {
    position: absolute;
    top: 0; left: 0;
    height: 100%;
    width: 0%;
    border-radius: 3px;
    background: linear-gradient(90deg, var(--blob-1), var(--blob-2), var(--blob-3));
    box-shadow: 0 0 12px color-mix(in srgb, var(--blob-2) 70%, transparent);
}
.loading.show .loading-bar-fill {
    animation: loadingFill 2.2s cubic-bezier(0.4, 0, 0.6, 1) forwards;
}

@keyframes loadingFill {
    0%   { width: 0%;   }
    30%  { width: 42%;  }
    60%  { width: 70%;  }
    90%  { width: 94%;  }
    100% { width: 100%; }
}

/* ============ MOBILE ============ */
@media (max-width: 520px) {
    .lp-head { width: 110px; height: 110px; }
    .lp-eye  { width: 13px; height: 13px; top: 36px; }
    .lp-eye::after { width: 3.5px; height: 3.5px; top: 2.5px; left: 2.5px; }
    .lp-eye-l { left: 28px; }
    .lp-eye-r { right: 28px; }
    .lp-smile { width: 28px; height: 13px; bottom: 27px; border-width: 2.5px; }
    .lp-band { width: 126px; height: 78px; top: -10px; border-width: 6px; }
    .lp-cup  { width: 26px; height: 44px; top: 36px; border-radius: 13px; }
    .lp-cup-l { left: -14px; }
    .lp-cup-r { right: -14px; }
    .loading-text { font-size: 12px; letter-spacing: 2px; }
    .loading-bar { width: 140px; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .loading-person,
    .lp-eye,
    .lp-smile,
    .loading::before { animation: none; }
}
/* =========================================
   SkillForgeX — Loading Screen 🎧
   Standalone — no conflicts with other CSS
   ========================================= */

/* =========================================
   1. ROOT — LIGHT THEME
   ========================================= */
:root {
    /* Background (matches style.css) */
    --ld-bg: #e5e5ea;

    /* Blobs — same as login */
    --ld-blob-1: #ff2a5f;
    --ld-blob-2: #007aff;
    --ld-blob-3: #ff9500;
    --ld-blob-4: #bf5af2;
    --ld-blob-opacity: 0.85;

    /* Text */
    --ld-text: #1c1c1e;
    --ld-text-soft: rgba(28, 28, 30, 0.65);

    /* Face glass */
    --ld-face-bg: rgba(255, 255, 255, 0.45);
    --ld-face-border: rgba(255, 255, 255, 0.75);
    --ld-face-highlight: rgba(255, 255, 255, 0.95);
    --ld-face-shadow: rgba(31, 38, 135, 0.18);

    /* Headphones */
    --ld-hp-color: #1c1c1e;
    --ld-hp-highlight: rgba(255, 255, 255, 0.22);
    --ld-hp-shadow: rgba(0, 0, 0, 0.45);

    /* Eyes & mouth */
    --ld-ink: #1c1c1e;
    --ld-ink-soft: #555;

    /* Progress bar */
    --ld-bar-bg: rgba(28, 28, 30, 0.12);
    --ld-bar-1: #ff2a5f;
    --ld-bar-2: #007aff;
    --ld-bar-3: #ff9500;
}

/* =========================================
   2. ROOT — DARK THEME
   ========================================= */
[data-theme="dark"] {
    --ld-bg: #000000;

    --ld-blob-1: #bf5af2;
    --ld-blob-2: #0a84ff;
    --ld-blob-3: #ff375f;
    --ld-blob-4: #ff9500;
    --ld-blob-opacity: 0.6;

    --ld-text: #f5f5f7;
    --ld-text-soft: rgba(245, 245, 247, 0.65);

    --ld-face-bg: rgba(30, 30, 35, 0.5);
    --ld-face-border: rgba(255, 255, 255, 0.15);
    --ld-face-highlight: rgba(255, 255, 255, 0.3);
    --ld-face-shadow: rgba(0, 0, 0, 0.8);

    --ld-hp-color: #f5f5f7;
    --ld-hp-highlight: rgba(255, 255, 255, 0.35);
    --ld-hp-shadow: rgba(0, 0, 0, 0.5);

    --ld-ink: #f5f5f7;
    --ld-ink-soft: #aaaaaa;

    --ld-bar-bg: rgba(255, 255, 255, 0.15);
    --ld-bar-1: #bf5af2;
    --ld-bar-2: #0a84ff;
    --ld-bar-3: #ff375f;
}

/* =========================================
   3. LOADING OVERLAY
   ========================================= */
.loading {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 26px;
    background: var(--ld-bg);
    color: var(--ld-text);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.45s ease,
                visibility 0.45s ease,
                background 0.6s ease,
                color 0.4s ease;
    pointer-events: none;
    overflow: hidden;
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display",
                 "Segoe UI", Roboto, "Poppins", sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.loading.show {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

/* Soft ambient glow */
.loading::before {
    content: '';
    position: absolute;
    width: 60vmin;
    height: 60vmin;
    border-radius: 50%;
    background: radial-gradient(circle,
        color-mix(in srgb, var(--ld-blob-1) 32%, transparent) 0%,
        color-mix(in srgb, var(--ld-blob-2) 20%, transparent) 45%,
        transparent 70%);
    filter: blur(70px);
    opacity: var(--ld-blob-opacity);
    animation: ldGlow 2.2s ease-in-out infinite;
    pointer-events: none;
}

@keyframes ldGlow {
    0%, 100% { transform: scale(1);    opacity: 0.5; }
    50%      { transform: scale(1.15); opacity: 0.9; }
}

/* =========================================
   4. PERSON — gentle rocking
   ========================================= */
.loading-person {
    position: relative;
    z-index: 2;
    animation: ldPersonGroove 1.6s ease-in-out infinite;
    transform-origin: center bottom;
    will-change: transform;
}

@keyframes ldPersonGroove {
    0%, 100% { transform: rotate(-4deg) translateY(0);    }
    50%      { transform: rotate(4deg)  translateY(-3px); }
}

/* =========================================
   5. HEAD — glossy 3D sphere
   ========================================= */
.lp-head {
    position: relative;
    width: 130px;
    height: 130px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    isolation: isolate;

    background:
        radial-gradient(circle at 30% 24%,
            rgba(255, 255, 255, 0.95) 0%,
            rgba(255, 255, 255, 0.35) 14%,
            transparent 42%),
        radial-gradient(circle at 72% 82%,
            color-mix(in srgb, var(--ld-blob-2) 35%, transparent) 0%,
            transparent 58%),
        radial-gradient(circle at 50% 50%,
            color-mix(in srgb, var(--ld-blob-1) 12%, var(--ld-face-bg)) 0%,
            var(--ld-face-bg) 100%);

    backdrop-filter: blur(40px) saturate(200%);
    -webkit-backdrop-filter: blur(40px) saturate(200%);

    box-shadow:
        0 44px 70px -22px var(--ld-face-shadow),
        0 16px 32px -14px var(--ld-face-shadow),
        inset -14px -20px 34px -12px rgba(0, 0, 0, 0.24),
        inset 14px 16px 30px -12px rgba(255, 255, 255, 0.6),
        inset 0 0 0 2px var(--ld-face-border),
        inset 0 6px 10px -3px var(--ld-face-highlight);

    transition: background 0.6s ease, box-shadow 0.6s ease;
}

/* Top shine spot */
.lp-shine {
    position: absolute;
    top: 12%;
    left: 18%;
    width: 34%;
    height: 24%;
    border-radius: 50%;
    background: radial-gradient(ellipse at center,
        rgba(255, 255, 255, 0.9) 0%,
        rgba(255, 255, 255, 0) 70%);
    filter: blur(4px);
    pointer-events: none;
    z-index: 3;
}

/* =========================================
   6. EYES — round & open (homepage match)
   ========================================= */
.lp-eye {
    position: absolute;
    top: 42px;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, var(--ld-ink-soft) 0%, var(--ld-ink) 62%);
    box-shadow: inset -2px -2px 3px rgba(0, 0, 0, 0.3);
    transition: background 0.5s ease;
    transform-origin: center;
    z-index: 5;
    animation: ldEyeGroove 1.6s ease-in-out infinite;
}

.lp-eye::after {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    width: 4.5px;
    height: 4.5px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.9);
    filter: blur(0.4px);
}

.lp-eye-l { left: 33px; }
.lp-eye-r { right: 33px; }

@keyframes ldEyeGroove {
    0%, 100% { transform: scaleY(1);   }
    50%      { transform: scaleY(0.7); }
}

/* =========================================
   7. MOUTH — curved smile
   ========================================= */
.lp-smile {
    position: absolute;
    bottom: 32px;
    left: 50%;
    transform: translateX(-50%);
    width: 34px;
    height: 16px;
    border-bottom-left-radius: 40px;
    border-bottom-right-radius: 40px;
    border: 3px solid var(--ld-ink);
    border-top: none;
    z-index: 5;
    transition: border-color 0.5s ease;
    animation: ldSmileGroove 1.6s ease-in-out infinite;
    transform-origin: center top;
}

@keyframes ldSmileGroove {
    0%, 100% { transform: translateX(-50%) scale(1);    }
    50%      { transform: translateX(-50%) scale(1.08); }
}

/* =========================================
   8. HEADPHONES
   ========================================= */
.lp-band {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    width: 148px;
    height: 90px;
    border: 7px solid var(--ld-hp-color);
    border-bottom: none;
    border-radius: 74px 74px 0 0;
    z-index: 1;
    transition: border-color 0.5s ease;
}

.lp-cup {
    position: absolute;
    top: 42px;
    width: 30px;
    height: 52px;
    border-radius: 15px;
    background: var(--ld-hp-color);
    box-shadow:
        inset 0 3px 4px var(--ld-hp-highlight),
        inset 0 -4px 8px var(--ld-hp-shadow),
        0 6px 16px rgba(0, 0, 0, 0.3);
    z-index: 6;
    transition: background 0.5s ease, box-shadow 0.5s ease;
}

.lp-cup-l { left: -16px; }
.lp-cup-r { right: -16px; }

/* =========================================
   9. LOADING TEXT
   ========================================= */
.loading-text {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: var(--ld-text-soft);
    z-index: 2;
    margin: 0;
    display: inline-flex;
    align-items: baseline;
    transition: color 0.5s ease;
}

.loading-text .dot {
    animation: ldDotBounce 1.4s ease-in-out infinite;
}
.loading-text .dot:nth-child(2) { animation-delay: 0.15s; }
.loading-text .dot:nth-child(3) { animation-delay: 0.3s;  }

@keyframes ldDotBounce {
    0%, 60%, 100% { opacity: 0.3; transform: translateY(0);    }
    30%           { opacity: 1;   transform: translateY(-3px); }
}

/* =========================================
   10. PROGRESS BAR
   ========================================= */
.loading-bar {
    width: 180px;
    height: 3px;
    border-radius: 3px;
    background: var(--ld-bar-bg);
    overflow: hidden;
    z-index: 2;
    position: relative;
    transition: background 0.5s ease;
}

.loading-bar-fill {
    position: absolute;
    top: 0; left: 0;
    height: 100%;
    width: 0%;
    border-radius: 3px;
    background: linear-gradient(90deg, var(--ld-bar-1), var(--ld-bar-2), var(--ld-bar-3));
    box-shadow: 0 0 12px color-mix(in srgb, var(--ld-bar-2) 70%, transparent);
    transition: background 0.5s ease;
}

.loading.show .loading-bar-fill {
    animation: ldLoadingFill 2.2s cubic-bezier(0.4, 0, 0.6, 1) forwards;
}

@keyframes ldLoadingFill {
    0%   { width: 0%;   }
    30%  { width: 42%;  }
    60%  { width: 70%;  }
    90%  { width: 94%;  }
    100% { width: 100%; }
}

/* =========================================
   11. MOBILE
   ========================================= */
@media (max-width: 520px) {
    .lp-head { width: 110px; height: 110px; }
    .lp-eye  { width: 13px; height: 13px; top: 36px; }
    .lp-eye::after { width: 3.5px; height: 3.5px; top: 2.5px; left: 2.5px; }
    .lp-eye-l { left: 28px; }
    .lp-eye-r { right: 28px; }
    .lp-smile {
        width: 28px;
        height: 13px;
        bottom: 27px;
        border-width: 2.5px;
    }
    .lp-band {
        width: 126px;
        height: 78px;
        top: -10px;
        border-width: 6px;
    }
    .lp-cup {
        width: 26px;
        height: 44px;
        top: 36px;
        border-radius: 13px;
    }
    .lp-cup-l { left: -14px; }
    .lp-cup-r { right: -14px; }
    .loading-text { font-size: 12px; letter-spacing: 2px; }
    .loading-bar { width: 140px; }
}

/* =========================================
   12. REDUCED MOTION
   ========================================= */
@media (prefers-reduced-motion: reduce) {
    .loading-person,
    .lp-eye,
    .lp-smile,
    .loading::before,
    .loading-text .dot { animation: none; }
}
/* =========================================
   ★ LOGIN — Brand + Register additions
   (uses style.css root variables)
   ========================================= */

/* ============ BRAND (mini logo + name) ============ */
.brand-mini {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0 auto 18px;
    text-decoration: none;
    color: var(--text-main);
    font-weight: 800;
    font-size: 17px;
    letter-spacing: -0.3px;
    z-index: 2;
    position: relative;
    transition: opacity 0.25s ease, transform 0.25s ease;
}

.content form { display: flex; flex-direction: column; }

/* Center the brand inside the card */
.content {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.brand-mini:hover {
    transform: translateY(-1px);
    opacity: 0.9;
}

.brand-mini-mark {
    position: relative;
    display: block;
    width: 30px;
    height: 30px;
    flex-shrink: 0;
    line-height: 0;
    overflow: hidden;
    border-radius: 8px;
}

.brand-mini-mark img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    pointer-events: none;
    user-select: none;
    -webkit-user-drag: none;
    transition: opacity 0.4s ease;
}

/* Light theme → black logo */
.brand-mini-mark .logo-black { opacity: 1; }
.brand-mini-mark .logo-white { opacity: 0; }

/* Dark theme → white logo */
[data-theme="dark"] .brand-mini-mark .logo-black { opacity: 0; }
[data-theme="dark"] .brand-mini-mark .logo-white { opacity: 1; }

.brand-mini-text {
    background: linear-gradient(135deg, #ff2a5f, #007aff, #bf5af2);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* ============ REGISTER LINK ============ */
.register-link {
    margin-top: 6px;
    margin-bottom: 4px;
    text-align: center;
    font-size: 14px;
    color: var(--text-soft);
    letter-spacing: 0.1px;
    font-weight: 500;
}

.register-link a {
    color: var(--text-main);
    font-weight: 700;
    margin-left: 4px;
    position: relative;
    transition: color 0.25s ease;
}

.register-link a::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -2px;
    height: 1.5px;
    border-radius: 2px;
    background: linear-gradient(90deg, #ff2a5f, #007aff, #bf5af2);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.3s cubic-bezier(0.34, 1.4, 0.64, 1);
}

.register-link a:hover {
    color: #007aff;
}

.register-link a:hover::after {
    transform: scaleX(1);
}

/* ============ MOBILE TWEAKS ============ */
@media (max-width: 480px) {
    .brand-mini { font-size: 16px; margin-bottom: 16px; }
    .brand-mini-mark { width: 26px; height: 26px; border-radius: 7px; }
    .register-link { font-size: 13px; margin-top: 4px; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .brand-mini:hover,
    .register-link a::after { transition: none; }
}
/* =========================================
   School Subjects Page — single-page flow
   Uses style.css variables only
   ========================================= */

.ss-wrap {
    max-width: 1180px;
    margin: 0 auto;
    padding: 30px 0 60px;
}

/* ---------- Screen switching ---------- */
.ss-screen { display: none; animation: ssIn .5s cubic-bezier(.34,1.2,.64,1); }
.ss-screen.is-active { display: block; }

@keyframes ssIn {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ---------- Top header ---------- */
.ss-top {
    text-align: center;
    margin-bottom: 34px;
    position: relative;
}

.ss-badge {
    display: inline-block;
    padding: 6px 14px;
    border-radius: 99px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .8px;
    text-transform: uppercase;
    color: var(--text-main);
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    margin-bottom: 14px;
}

.ss-head {
    font-size: clamp(26px, 4.6vw, 42px);
    font-weight: 800;
    letter-spacing: -1px;
    line-height: 1.15;
    margin-bottom: 10px;
    color: var(--text-main);
}

.ss-sub {
    font-size: clamp(13.5px, 2vw, 16px);
    color: var(--text-soft);
    max-width: 560px;
    margin: 0 auto;
    line-height: 1.6;
}

/* ---------- Back button ---------- */
.ss-back {
    position: absolute;
    top: 0;
    left: 0;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 16px;
    border-radius: 99px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    color: var(--text-main);
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    cursor: pointer;
    transition: transform .3s cubic-bezier(.34,1.4,.64,1), box-shadow .3s;
}

.ss-back:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 24px -12px var(--glass-shadow);
}

.ss-back:active { transform: scale(.96); }

@media (max-width: 640px) {
    .ss-back {
        position: static;
        margin-bottom: 14px;
    }
}

/* =========================================
   GRADE GRID  (Step 1)
   ========================================= */
.ss-grade-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 16px;
    max-width: 960px;
    margin: 0 auto;
}

.ss-grade-btn {
    position: relative;
    padding: 26px 18px;
    border-radius: 24px;
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    backdrop-filter: blur(28px) saturate(180%);
    -webkit-backdrop-filter: blur(28px) saturate(180%);
    color: var(--text-main);
    font-family: inherit;
    font-weight: 800;
    font-size: 17px;
    letter-spacing: -.3px;
    cursor: pointer;
    overflow: hidden;
    isolation: isolate;
    transition:
        transform .45s cubic-bezier(.34,1.4,.64,1),
        box-shadow .35s ease,
        border-color .35s ease;
    box-shadow:
        0 18px 34px -22px var(--glass-shadow),
        inset 0 1px 2px -1px var(--glass-highlight);
}

.ss-grade-btn::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg,
        color-mix(in srgb, #ff2a5f 22%, transparent),
        color-mix(in srgb, #007aff 22%, transparent) 50%,
        color-mix(in srgb, #bf5af2 22%, transparent));
    opacity: 0;
    transition: opacity .4s ease;
    z-index: -1;
}

.ss-grade-btn:hover {
    transform: translateY(-6px) scale(1.025);
    border-color: color-mix(in srgb, #007aff 45%, transparent);
    box-shadow:
        0 30px 50px -25px var(--glass-shadow),
        0 0 0 1px color-mix(in srgb, #007aff 30%, transparent),
        inset 0 1px 2px -1px var(--glass-highlight);
}

.ss-grade-btn:hover::before { opacity: 1; }

.ss-grade-btn:active { transform: translateY(-2px) scale(.98); }

.ss-grade-name {
    position: relative;
    z-index: 1;
    display: block;
}

.ss-grade-arrow {
    position: absolute;
    right: 18px;
    bottom: 16px;
    font-size: 16px;
    opacity: 0;
    transform: translateX(-6px);
    transition: opacity .3s ease, transform .4s cubic-bezier(.34,1.4,.64,1);
    color: #007aff;
}

.ss-grade-btn:hover .ss-grade-arrow {
    opacity: 1;
    transform: translateX(0);
}

/* ---- Star burst on grade button (from your animation snippet) ---- */
.ss-grade-btn .ss-stars {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 2;
    overflow: visible;
}

.ss-grade-btn .ss-star {
    position: absolute;
    filter: drop-shadow(0 0 0 #fffdef);
    transition: all 1s cubic-bezier(.05,.83,.43,.96);
    opacity: 0;
    width: 18px;
}

.ss-grade-btn:hover .ss-star {
    opacity: 1;
    filter: drop-shadow(0 0 10px #fffdef);
}

.ss-grade-btn .ss-star:nth-child(1) { top: 20%; left: 20%; width: 22px; transition-duration: 1s; }
.ss-grade-btn .ss-star:nth-child(2) { top: 45%; left: 45%; width: 12px; transition-duration: 1s; }
.ss-grade-btn .ss-star:nth-child(3) { top: 40%; left: 40%; width: 6px;  transition-duration: 1s; }
.ss-grade-btn .ss-star:nth-child(4) { top: 20%; left: 40%; width: 8px;  transition-duration: .8s; }
.ss-grade-btn .ss-star:nth-child(5) { top: 25%; left: 45%; width: 12px; transition-duration: .6s; }
.ss-grade-btn .ss-star:nth-child(6) { top: 5%;  left: 50%; width: 6px;  transition-duration: .8s; }

.ss-grade-btn:hover .ss-star:nth-child(1) { top: -60%; left: -20%; }
.ss-grade-btn:hover .ss-star:nth-child(2) { top: -20%; left: 15%;  }
.ss-grade-btn:hover .ss-star:nth-child(3) { top: 70%;  left: 30%;  }
.ss-grade-btn:hover .ss-star:nth-child(4) { top: 40%;  left: 88%;  }
.ss-grade-btn:hover .ss-star:nth-child(5) { top: 20%;  left: 110%; }
.ss-grade-btn:hover .ss-star:nth-child(6) { top: -10%; left: 60%;  }

/* =========================================
   SUBJECT GRID  (Step 2)
   ========================================= */
.ss-subject-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 12px;
}

.ss-subject-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 15px 18px;
    border-radius: 18px;
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    backdrop-filter: blur(24px) saturate(180%);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    color: var(--text-main);
    font-family: inherit;
    font-size: 14.5px;
    font-weight: 600;
    cursor: pointer;
    text-align: left;
    box-shadow:
        0 12px 24px -18px var(--glass-shadow),
        inset 0 1px 1px -1px var(--glass-highlight);
    transition:
        transform .35s cubic-bezier(.34,1.4,.64,1),
        box-shadow .3s ease,
        border-color .3s ease,
        background .3s ease;
}

.ss-subject-btn .ss-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: linear-gradient(135deg, #ff2a5f, #007aff);
    flex-shrink: 0;
    transition: transform .35s cubic-bezier(.34,1.6,.64,1);
}

.ss-subject-btn:hover {
    transform: translateY(-3px);
    border-color: color-mix(in srgb, #007aff 45%, transparent);
    box-shadow:
        0 20px 34px -20px var(--glass-shadow),
        0 0 0 1px color-mix(in srgb, #007aff 30%, transparent);
}

.ss-subject-btn:hover .ss-dot { transform: scale(1.4); }

.ss-subject-btn:active { transform: translateY(-1px) scale(.97); }

.ss-subject-btn .ss-go {
    margin-left: auto;
    opacity: 0;
    transform: translateX(-4px);
    transition: opacity .3s, transform .35s cubic-bezier(.34,1.4,.64,1);
    color: #007aff;
}

.ss-subject-btn:hover .ss-go {
    opacity: 1;
    transform: translateX(0);
}

/* =========================================
   TABS (Step 3)
   ========================================= */
.ss-tabs {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin-top: 22px;
}

.ss-tab {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 20px;
    border-radius: 99px;
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 700;
    color: var(--icon-color);
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    cursor: pointer;
    transition:
        transform .3s cubic-bezier(.34,1.4,.64,1),
        color .3s ease,
        background .3s ease,
        border-color .3s ease,
        box-shadow .3s ease;
}

.ss-tab:hover {
    color: var(--icon-active);
    transform: translateY(-2px);
}

.ss-tab.is-active {
    color: #fff;
    background: linear-gradient(135deg, #ff2a5f, #bf5af2 55%, #007aff);
    border-color: transparent;
    box-shadow: 0 14px 28px -14px rgba(191,90,242,.7);
}

.ss-tab:active { transform: scale(.97); }

/* =========================================
   TAB BODY
   ========================================= */
.ss-tab-body { margin-top: 30px; }

/* Empty state */
.ss-empty {
    text-align: center;
    padding: 60px 24px;
    border-radius: 26px;
    background: var(--card-bg);
    border: 1px dashed var(--card-border);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

.ss-empty-ic {
    width: 68px;
    height: 68px;
    border-radius: 20px;
    display: grid;
    place-items: center;
    margin: 0 auto 16px;
    color: var(--text-soft);
    background: color-mix(in srgb, var(--text-soft) 12%, transparent);
}

.ss-empty h3 {
    font-size: 19px;
    font-weight: 800;
    letter-spacing: -.3px;
    color: var(--text-main);
    margin-bottom: 6px;
}

.ss-empty p {
    font-size: 14px;
    color: var(--text-soft);
    margin: 0;
}

/* =========================================
   VIDEOS TAB
   ========================================= */
.ss-video-grid {
    display: grid;
    grid-template-columns: 1.6fr 1fr;
    gap: 18px;
    align-items: start;
}

.ss-video-main {
    padding: 14px;
    border-radius: 22px;
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    backdrop-filter: blur(30px) saturate(180%);
    -webkit-backdrop-filter: blur(30px) saturate(180%);
    box-shadow: 0 20px 40px -22px var(--glass-shadow);
}

.ss-video-frame {
    position: relative;
    width: 100%;
    aspect-ratio: 16/9;
    border-radius: 14px;
    overflow: hidden;
    background: #000;
}

.ss-video-frame iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.ss-video-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 6px 4px;
}

.ss-video-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--text-main);
    letter-spacing: -.2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
    min-width: 0;
}

.ss-fs-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 15px;
    border-radius: 12px;
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 700;
    color: #fff;
    background: linear-gradient(135deg, #ff2a5f, #007aff);
    border: none;
    cursor: pointer;
    flex-shrink: 0;
    box-shadow: 0 10px 22px -12px rgba(0,122,255,.75);
    transition: transform .3s cubic-bezier(.34,1.4,.64,1), box-shadow .3s;
}

.ss-fs-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 26px -12px rgba(0,122,255,.9);
}

.ss-fs-btn:active { transform: scale(.96); }

/* Side list (small) */
.ss-video-side {
    padding: 16px;
    border-radius: 22px;
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    backdrop-filter: blur(30px) saturate(180%);
    -webkit-backdrop-filter: blur(30px) saturate(180%);
    box-shadow: 0 20px 40px -22px var(--glass-shadow);
}

.ss-video-side-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .7px;
    text-transform: uppercase;
    color: var(--text-soft);
    margin-bottom: 12px;
}

.ss-video-item {
    display: flex;
    gap: 10px;
    padding: 8px;
    border-radius: 12px;
    cursor: pointer;
    transition: background .25s ease, transform .3s cubic-bezier(.34,1.4,.64,1);
}

.ss-video-item:hover {
    background: color-mix(in srgb, #007aff 12%, transparent);
    transform: translateX(3px);
}

.ss-video-item.is-active {
    background: color-mix(in srgb, #007aff 20%, transparent);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, #007aff 45%, transparent);
}

.ss-video-thumb {
    position: relative;
    width: 84px;
    height: 50px;
    border-radius: 8px;
    overflow: hidden;
    flex-shrink: 0;
    background: #000;
}

.ss-video-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.ss-video-thumb::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 50%, rgba(0,0,0,.4));
}

.ss-video-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 3px;
}

.ss-video-info .t {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-main);
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.ss-video-info .s {
    font-size: 11px;
    color: var(--text-soft);
}

@media (max-width: 860px) {
    .ss-video-grid { grid-template-columns: 1fr; }
    .ss-video-side { order: 2; }
}

/* =========================================
   DOCUMENTS TAB
   ========================================= */
.ss-doc-group { margin-bottom: 26px; }

.ss-doc-group-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}

.ss-doc-group-ic {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    color: #fff;
    flex-shrink: 0;
    box-shadow: 0 10px 20px -10px var(--c);
    background: var(--c);
}

.ss-doc-group-head h3 {
    font-size: 16px;
    font-weight: 800;
    letter-spacing: -.3px;
    color: var(--text-main);
    margin: 0;
}

.ss-doc-group-head .ss-doc-count {
    margin-left: auto;
    font-size: 11.5px;
    font-weight: 700;
    color: var(--text-soft);
    letter-spacing: .5px;
    text-transform: uppercase;
}

.ss-doc-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 10px;
}

.ss-doc-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 13px 15px;
    border-radius: 16px;
    background: color-mix(in srgb, var(--card-bg) 88%, transparent);
    border: 1px solid var(--card-border);
    text-decoration: none;
    color: var(--text-main);
    font-size: 14px;
    font-weight: 600;
    transition:
        transform .3s cubic-bezier(.34,1.4,.64,1),
        box-shadow .3s ease,
        border-color .3s ease,
        background .3s ease;
}

.ss-doc-item:hover {
    transform: translateY(-3px);
    border-color: color-mix(in srgb, var(--c) 45%, transparent);
    background: color-mix(in srgb, var(--c) 10%, var(--card-bg));
    box-shadow: 0 12px 26px -14px color-mix(in srgb, var(--c) 70%, transparent);
}

.ss-doc-item .ss-doc-ic {
    width: 36px;
    height: 36px;
    border-radius: 11px;
    display: grid;
    place-items: center;
    color: var(--c);
    background: color-mix(in srgb, var(--c) 16%, transparent);
    flex-shrink: 0;
}

.ss-doc-item .ss-doc-txt {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ss-doc-item .ss-doc-go {
    opacity: .5;
    transition: transform .3s cubic-bezier(.34,1.4,.64,1), opacity .25s;
    flex-shrink: 0;
}

.ss-doc-item:hover .ss-doc-go {
    opacity: 1;
    transform: translateX(3px);
}

/* =========================================
   FULLSCREEN VIDEO OVERLAY
   ========================================= */
.ss-fs {
    position: fixed;
    inset: 0;
    z-index: 9000;
    background: rgba(0,0,0,.85);
    backdrop-filter: blur(24px) saturate(160%);
    -webkit-backdrop-filter: blur(24px) saturate(160%);
    opacity: 0;
    visibility: hidden;
    transition: opacity .4s ease, visibility .4s ease;
    padding: 20px;
    overflow: auto;
}

.ss-fs.is-open {
    opacity: 1;
    visibility: visible;
}

.ss-fs-inner {
    max-width: 1400px;
    margin: 0 auto;
    padding: 6px 0 40px;
}

.ss-fs-close {
    position: fixed;
    top: 18px;
    right: 18px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    border: none;
    background: rgba(255,255,255,.15);
    color: #fff;
    cursor: pointer;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    z-index: 10;
    transition: background .3s ease, transform .3s cubic-bezier(.34,1.4,.64,1);
}

.ss-fs-close:hover {
    background: rgba(255,255,255,.3);
    transform: scale(1.08) rotate(90deg);
}

.ss-fs-layout {
    display: grid;
    grid-template-columns: 1.65fr 1fr;
    gap: 22px;
    align-items: start;
}

.ss-fs-main { min-width: 0; }

.ss-fs-frame {
    position: relative;
    width: 100%;
    aspect-ratio: 16/9;
    border-radius: 18px;
    overflow: hidden;
    background: #000;
    box-shadow: 0 40px 80px -30px rgba(0,0,0,.9);
}

.ss-fs-frame iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.ss-fs-now {
    color: rgba(255,255,255,.85);
    font-size: 15px;
    font-weight: 600;
    letter-spacing: -.2px;
    margin-top: 14px;
    line-height: 1.5;
}

.ss-fs-side {
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 18px;
    padding: 16px;
    backdrop-filter: blur(30px);
    -webkit-backdrop-filter: blur(30px);
    max-height: calc(100vh - 60px);
    display: flex;
    flex-direction: column;
}

.ss-fs-side-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #fff;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .7px;
    text-transform: uppercase;
    margin-bottom: 12px;
}

.ss-fs-count {
    color: rgba(255,255,255,.55);
    font-weight: 600;
    letter-spacing: .3px;
    text-transform: none;
    font-size: 12px;
}

.ss-fs-list {
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-right: 4px;
}

.ss-fs-list::-webkit-scrollbar { width: 6px; }
.ss-fs-list::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,.2);
    border-radius: 6px;
}

.ss-fs-item {
    display: flex;
    gap: 10px;
    padding: 8px;
    border-radius: 12px;
    cursor: pointer;
    transition: background .25s ease;
}

.ss-fs-item:hover { background: rgba(255,255,255,.08); }

.ss-fs-item.is-active {
    background: rgba(0,122,255,.3);
    box-shadow: inset 0 0 0 1px rgba(0,122,255,.6);
}

.ss-fs-item .ss-fs-thumb {
    width: 96px;
    height: 56px;
    border-radius: 8px;
    overflow: hidden;
    flex-shrink: 0;
    background: #000;
    position: relative;
}

.ss-fs-item .ss-fs-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.ss-fs-item .ss-fs-tinfo {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 3px;
}

.ss-fs-item .ss-fs-ttitle {
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.ss-fs-item .ss-fs-tsub {
    color: rgba(255,255,255,.55);
    font-size: 11px;
    font-weight: 500;
}

@media (max-width: 900px) {
    .ss-fs { padding: 12px; }
    .ss-fs-layout { grid-template-columns: 1fr; gap: 16px; }
    .ss-fs-side { max-height: none; }
    .ss-fs-close { top: 12px; right: 12px; width: 40px; height: 40px; }
}

/* =========================================
   RESPONSIVE TWEAKS
   ========================================= */
@media (max-width: 640px) {
    .ss-wrap { padding: 20px 0 40px; }
    .ss-grade-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
    .ss-grade-btn { padding: 20px 14px; font-size: 15px; border-radius: 20px; }
    .ss-subject-grid { grid-template-columns: repeat(2, 1fr); gap: 9px; }
    .ss-subject-btn { padding: 13px 14px; font-size: 13.5px; border-radius: 15px; }
    .ss-tab { padding: 10px 15px; font-size: 12.5px; }
    .ss-tab svg { width: 14px; height: 14px; }
    .ss-doc-list { grid-template-columns: 1fr; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .ss-screen, .ss-grade-btn, .ss-subject-btn, .ss-tab,
    .ss-fs, .ss-fs-close, .ss-grade-btn .ss-star {
        animation: none !important;
        transition-duration: .01ms !important;
    }
}
/* =========================================
   ★ DOCUMENTS TAB — Accordion groups
   ========================================= */

.ss-doc-acc {
    border-radius: 22px;
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    backdrop-filter: blur(30px) saturate(180%);
    -webkit-backdrop-filter: blur(30px) saturate(180%);
    box-shadow:
        0 20px 40px -22px var(--glass-shadow),
        inset 0 1px 2px -1px var(--glass-highlight);
    overflow: hidden;
    margin-bottom: 14px;
    transition: border-color .3s ease, box-shadow .3s ease;
}

.ss-doc-acc.is-open {
    border-color: color-mix(in srgb, var(--c) 40%, var(--card-border));
    box-shadow:
        0 24px 44px -22px var(--glass-shadow),
        0 0 0 1px color-mix(in srgb, var(--c) 30%, transparent),
        inset 0 1px 2px -1px var(--glass-highlight);
}

.ss-doc-acc-head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
    width: 100%;
    border: none;
    background: transparent;
    text-align: left;
    font-family: inherit;
    color: var(--text-main);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background .25s ease;
}

.ss-doc-acc-head:hover {
    background: color-mix(in srgb, var(--text-soft) 7%, transparent);
}

.ss-doc-acc-ic {
    width: 42px;
    height: 42px;
    border-radius: 13px;
    display: grid;
    place-items: center;
    color: #fff;
    background: var(--c);
    flex-shrink: 0;
    box-shadow: 0 10px 22px -10px var(--c);
    transition: transform .4s cubic-bezier(.34,1.4,.64,1);
}

.ss-doc-acc.is-open .ss-doc-acc-ic {
    transform: scale(1.06) rotate(-5deg);
}

.ss-doc-acc-head h3 {
    flex: 1;
    font-size: 16px;
    font-weight: 800;
    letter-spacing: -.3px;
    margin: 0;
    color: var(--text-main);
    min-width: 0;
}

.ss-doc-acc-count {
    font-size: 11px;
    font-weight: 700;
    color: var(--text-soft);
    letter-spacing: .6px;
    text-transform: uppercase;
    margin-right: 4px;
    flex-shrink: 0;
}

.ss-doc-acc-arrow {
    color: var(--text-soft);
    flex-shrink: 0;
    transition: transform .4s cubic-bezier(.34,1.4,.64,1), color .3s ease;
}

.ss-doc-acc.is-open .ss-doc-acc-arrow {
    transform: rotate(180deg);
    color: var(--c);
}

.ss-doc-acc-body {
    max-height: 0;
    overflow: hidden;
    transition: max-height .55s cubic-bezier(.34,1.2,.64,1);
}

.ss-doc-acc.is-open .ss-doc-acc-body {
    max-height: 4000px;
}

.ss-doc-acc-inner {
    padding: 4px 18px 18px;
}

/* ---- Inner (nested) sub-accordion ---- */
.ss-sub-acc {
    border-radius: 16px;
    background: color-mix(in srgb, var(--card-bg) 65%, transparent);
    border: 1px solid var(--card-border);
    overflow: hidden;
    margin-bottom: 10px;
    transition: border-color .3s ease, background .3s ease;
}

.ss-sub-acc:last-child { margin-bottom: 0; }

.ss-sub-acc.is-open {
    border-color: color-mix(in srgb, var(--c) 35%, var(--card-border));
    background: color-mix(in srgb, var(--c) 6%, var(--card-bg));
}

.ss-sub-acc-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 13px 16px;
    width: 100%;
    border: none;
    background: transparent;
    text-align: left;
    font-family: inherit;
    font-size: 14px;
    font-weight: 700;
    color: var(--text-main);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background .25s ease;
}

.ss-sub-acc-head:hover {
    background: color-mix(in srgb, var(--text-soft) 6%, transparent);
}

.ss-sub-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--c);
    flex-shrink: 0;
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--c) 20%, transparent);
    transition: transform .4s cubic-bezier(.34,1.4,.64,1);
}

.ss-sub-acc.is-open .ss-sub-dot {
    transform: scale(1.25);
}

.ss-sub-acc-head > span:nth-child(2) {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ss-sub-count {
    font-size: 11px;
    font-weight: 700;
    color: var(--text-soft);
    padding: 3px 9px;
    border-radius: 99px;
    background: color-mix(in srgb, var(--text-soft) 12%, transparent);
    flex-shrink: 0;
}

.ss-sub-arrow {
    color: var(--text-soft);
    flex-shrink: 0;
    transition: transform .4s cubic-bezier(.34,1.4,.64,1), color .3s ease;
}

.ss-sub-acc.is-open .ss-sub-arrow {
    transform: rotate(180deg);
    color: var(--c);
}

.ss-sub-acc-body {
    max-height: 0;
    overflow: hidden;
    transition: max-height .5s cubic-bezier(.34,1.2,.64,1);
}

.ss-sub-acc.is-open .ss-sub-acc-body {
    max-height: 2500px;
}

.ss-sub-acc-inner {
    padding: 4px 14px 14px;
}

.ss-sub-acc-inner .ss-doc-list {
    grid-template-columns: 1fr;
    gap: 8px;
}

/* Mobile tweaks */
@media (max-width: 640px) {
    .ss-doc-acc-head { padding: 14px 16px; gap: 10px; }
    .ss-doc-acc-ic { width: 38px; height: 38px; border-radius: 11px; }
    .ss-doc-acc-head h3 { font-size: 15px; }
    .ss-doc-acc-count { display: none; }
    .ss-doc-acc-inner { padding: 2px 12px 12px; }
    .ss-sub-acc-head { padding: 12px 14px; font-size: 13.5px; }
    .ss-sub-acc-inner { padding: 2px 10px 10px; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .ss-doc-acc-body,
    .ss-sub-acc-body,
    .ss-doc-acc-arrow,
    .ss-sub-arrow,
    .ss-doc-acc-ic { transition: none; }
}
/* =========================================
   ★ MOBILE — VIDEO SECTION RESPONSIVE
   Screen එකට හරියට fit වෙන්න padding + layout fix
   Style එක වෙනස් නෑ — size + spacing විතරයි
   ========================================= */

/* ---------- Tablet (≤ 860px) ---------- */
@media (max-width: 860px) {
    .ss-video-grid {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .ss-video-main {
        padding: 10px;
        border-radius: 18px;
    }

    .ss-video-frame {
        border-radius: 12px;
    }

    .ss-video-side {
        padding: 14px;
        border-radius: 18px;
    }
}

/* ---------- Phone (≤ 640px) ---------- */
@media (max-width: 640px) {
    /* Wrap පිටත padding අඩු කරලා video එකට ඉඩ දෙනවා */
    .ss-wrap {
        padding: 16px 0 40px;
    }

    .page {
        padding-left: 12px;
        padding-right: 12px;
    }

    /* Video card padding අඩු කරනවා → screen එකට edge-to-edge වගේ */
    .ss-video-main {
        padding: 8px;
        border-radius: 16px;
    }

    .ss-video-frame {
        border-radius: 10px;
    }

    /* ★ Meta section: title උඩ, button යට (full width) */
    .ss-video-meta {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
        padding: 12px 4px 2px;
    }

    /* Title: 2 lines වරෙකට පෙන්නනවා (ellipsis නෑ) */
    .ss-video-title {
        font-size: 14px;
        font-weight: 700;
        line-height: 1.4;
        white-space: normal;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: unset;
        text-align: center;
    }

    /* Full Screen button: full-width + centered */
    .ss-fs-btn {
        width: 100%;
        justify-content: center;
        padding: 11px 16px;
        font-size: 13px;
        border-radius: 12px;
    }

    /* Playlist: compact + side padding අඩු */
    .ss-video-side {
        padding: 12px;
        border-radius: 16px;
    }

    .ss-video-side-head {
        font-size: 11px;
        margin-bottom: 10px;
    }

    .ss-video-item {
        gap: 8px;
        padding: 6px;
        border-radius: 10px;
    }

    .ss-video-thumb {
        width: 78px;
        height: 46px;
        border-radius: 7px;
    }

    .ss-video-info .t {
        font-size: 12.5px;
        line-height: 1.3;
        -webkit-line-clamp: 2;
        line-clamp: 2;
    }

    .ss-video-info .s {
        font-size: 10.5px;
    }
}

/* ---------- Small phones (≤ 400px) ---------- */
@media (max-width: 400px) {
    .page {
        padding-left: 8px;
        padding-right: 8px;
    }

    .ss-video-main {
        padding: 6px;
        border-radius: 14px;
    }

    .ss-video-frame {
        border-radius: 9px;
    }

    .ss-video-meta {
        padding: 10px 2px 0;
        gap: 8px;
    }

    .ss-video-title {
        font-size: 13px;
    }

    .ss-fs-btn {
        padding: 10px 14px;
        font-size: 12px;
    }

    .ss-video-thumb {
        width: 68px;
        height: 40px;
    }

    .ss-video-info .t {
        font-size: 12px;
    }
}
/* =========================================
   ★ MYSELF / PROFILE PAGE — All-in-one
   (uses existing root variables)
   ========================================= */
.profile-page { max-width: 1180px; margin: 0 auto; padding: 20px 24px 60px; }

.hero-profile { margin-top: 20px; margin-bottom: 40px; }
.hero-stage-profile { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 200px; }

.glass-card {
    background: var(--card-bg); border: 1px solid var(--card-border);
    backdrop-filter: blur(30px) saturate(180%); -webkit-backdrop-filter: blur(30px) saturate(180%);
    box-shadow: 0 20px 40px -20px var(--glass-shadow), inset 0 1px 2px -1px var(--glass-highlight);
    border-radius: 24px; padding: 24px;
    transition: transform .4s cubic-bezier(.34,1.4,.64,1), box-shadow .4s ease;
}
.glass-card:hover { transform: translateY(-3px); box-shadow: 0 30px 50px -25px var(--glass-shadow), inset 0 1px 2px -1px var(--glass-highlight); }

.clock-panel { flex: 1; max-width: 220px; text-align: center; animation: fadeUp .8s .2s both cubic-bezier(.34,1.2,.64,1); }
.clock-time { font-size: 26px; font-weight: 800; color: var(--text-main); letter-spacing: -.5px; margin-bottom: 4px; }
.clock-date { font-size: 13px; font-weight: 600; color: var(--text-soft); text-transform: uppercase; letter-spacing: .5px; }

.greeting-panel { flex: 1; max-width: 280px; text-align: left; animation: fadeUp .8s .4s both cubic-bezier(.34,1.2,.64,1); }
.greeting-text { font-size: 24px; font-weight: 800; color: var(--text-main); letter-spacing: -.5px; margin-bottom: 6px; min-height: 30px; }
#typing-text { background: linear-gradient(135deg, #ff2a5f, #007aff, #bf5af2); -webkit-background-clip: text; background-clip: text; color: transparent; }
.cursor { display: inline-block; width: 3px; background-color: var(--text-main); animation: blinkCursor 1s step-end infinite; margin-left: 2px; color: transparent; }
@keyframes blinkCursor { 0%,100% { opacity: 1; } 50% { opacity: 0; } }
.greeting-sub { font-size: 14px; color: var(--text-soft); line-height: 1.5; margin: 0; }
.face-wrap { position: relative; display: flex; align-items: center; justify-content: center; z-index: 10; }

.hand-3d { position: absolute; width: 80px; height: 80px; right: -70px; bottom: -10px; opacity: 0; transform-origin: bottom center; z-index: 20; pointer-events: none; filter: drop-shadow(0 10px 15px rgba(0,0,0,.3)); }
.hand-3d img { width: 100%; height: 100%; object-fit: contain; }
@keyframes wave3D {
    0% { opacity: 0; transform: translateX(30px) rotate(30deg) scale(.5); }
    20% { opacity: 1; transform: translateX(0) rotate(0deg) scale(1.1); }
    40% { transform: rotate(-20deg) scale(1); }
    60% { transform: rotate(20deg) scale(1); }
    80% { transform: rotate(-10deg) scale(1.05); }
    100% { opacity: 0; transform: translateX(30px) rotate(30deg) scale(.5); }
}
.hand-3d.wave { animation: wave3D 2.5s cubic-bezier(.34,1.4,.64,1) forwards; }
.face.blush .face-blush { opacity: 1; background: radial-gradient(ellipse at center, rgba(255,50,100,.8) 0%, rgba(255,90,130,0) 75%); }

@media (max-width: 860px) {
    .hero-stage-profile { flex-direction: column; gap: 30px; }
    .clock-panel, .greeting-panel { max-width: 100%; width: 100%; text-align: center; }
    .hand-3d { right: -50px; bottom: -20px; width: 60px; height: 60px; }
}

.profile-content { animation: fadeUp .8s .6s both cubic-bezier(.34,1.2,.64,1); }
.profile-grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: 20px; }

.profile-info-card { display: flex; flex-direction: column; gap: 20px; }
.profile-header { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }

/* Profile-specific avatar (avoids conflict with .avatar in About section) */
.profile-info-card .avatar,
.profile-avatar {
    position: relative; width: 70px; height: 70px; margin: 0;
    border-radius: 50%; display: grid; place-items: center;
    font-size: 28px; font-weight: 800; color: #fff;
    background: linear-gradient(135deg, #ff2a5f, #007aff 55%, #bf5af2);
    box-shadow: 0 10px 25px -10px rgba(0,122,255,.6);
    flex-shrink: 0;
}
.profile-info-card .avatar::after,
.profile-avatar::after { content: none; }

.profile-names { flex: 1; min-width: 150px; }
.profile-names h2 { font-size: 22px; font-weight: 800; letter-spacing: -.5px; color: var(--text-main); margin: 0 0 4px 0; }
.badge-grade { display: inline-block; padding: 4px 12px; border-radius: 99px; font-size: 12px; font-weight: 700; color: var(--text-main); background: color-mix(in srgb, var(--text-main) 10%, transparent); border: 1px solid var(--card-border); }

.profile-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-left: auto; }

.edit-btn {
    display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border-radius: 14px;
    font-family: inherit; font-size: 13.5px; font-weight: 700; color: #fff;
    background: linear-gradient(135deg, #007aff, #bf5af2); border: none; cursor: pointer;
    box-shadow: 0 10px 22px -12px rgba(0,122,255,.75);
    transition: transform .3s cubic-bezier(.34,1.4,.64,1), box-shadow .3s;
}
.edit-btn:hover { transform: translateY(-2px); box-shadow: 0 14px 26px -12px rgba(0,122,255,.9); }
.edit-btn:active { transform: scale(.96); }

.logout-btn {
    display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 14px;
    font-family: inherit; font-size: 13.5px; font-weight: 700; color: #ff3b30;
    background: color-mix(in srgb, #ff3b30 12%, transparent);
    border: 1px solid color-mix(in srgb, #ff3b30 32%, transparent);
    cursor: pointer;
    transition: all .3s cubic-bezier(.34,1.4,.64,1);
}
.logout-btn:hover { background: #ff3b30; color: #fff; transform: translateY(-2px); box-shadow: 0 10px 22px -10px rgba(255,59,48,.7); }
.logout-btn:active { transform: scale(.96); }

.info-list { display: flex; flex-direction: column; gap: 12px; }
.info-item { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; border-radius: 14px; background: color-mix(in srgb, var(--card-bg) 80%, transparent); border: 1px solid var(--card-border); }
.info-label { font-size: 13px; font-weight: 700; color: var(--text-soft); text-transform: uppercase; letter-spacing: .5px; }
.info-value { font-size: 14.5px; font-weight: 600; color: var(--text-main); text-align: right; word-break: break-all; }

.plan-card { display: flex; flex-direction: column; gap: 20px; }
.plan-header { display: flex; justify-content: space-between; align-items: center; }
.plan-header h3 { font-size: 18px; font-weight: 800; color: var(--text-main); margin: 0; }
.plan-badge { padding: 5px 14px; border-radius: 99px; font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .5px; }
.plan-badge.free { background: rgba(0,122,255,.15); color: #007aff; border: 1px solid rgba(0,122,255,.3); }
.plan-badge.pro { background: linear-gradient(135deg,#ff9500,#ff2a5f); color: #fff; border: none; }

.ai-usage-box { background: color-mix(in srgb, var(--card-bg) 80%, transparent); border: 1px solid var(--card-border); border-radius: 16px; padding: 16px; }
.ai-usage-header { display: flex; justify-content: space-between; font-size: 13px; font-weight: 700; color: var(--text-main); margin-bottom: 10px; }
.ai-progress-bg { width: 100%; height: 8px; border-radius: 99px; background: color-mix(in srgb, var(--text-soft) 20%, transparent); overflow: hidden; margin-bottom: 10px; }
.ai-progress-fill { height: 100%; border-radius: 99px; background: linear-gradient(90deg,#30d158,#007aff); transition: width .5s ease, background .5s ease; }
.ai-progress-fill.low { background: linear-gradient(90deg,#ff9500,#ff2a5f); }
.ai-usage-desc { font-size: 12.5px; color: var(--text-soft); margin: 0; line-height: 1.5; }

.pro-btn {
    position: relative; display: flex; align-items: center; justify-content: center; gap: 10px;
    padding: 15px 20px; border-radius: 16px; text-decoration: none; color: #fff; font-weight: 800; font-size: 15px;
    overflow: hidden; isolation: isolate;
    background: linear-gradient(135deg,#ff2a5f 0%,#bf5af2 100%); background-size: 200% 200%;
    box-shadow: 0 15px 30px -10px rgba(191,90,242,.6);
    transition: transform .3s cubic-bezier(.34,1.4,.64,1), box-shadow .3s ease, background-position .6s ease;
    animation: pulsePro 2s infinite alternate;
}
@keyframes pulsePro {
    0% { box-shadow: 0 15px 30px -10px rgba(191,90,242,.6); }
    100% { box-shadow: 0 20px 40px -10px rgba(255,42,95,.8); }
}
.pro-btn:hover { transform: translateY(-3px) scale(1.02); background-position: 100% 50%; box-shadow: 0 25px 50px -15px rgba(255,42,95,.9); }
.pro-btn:active { transform: translateY(-1px) scale(.98); }
.pro-btn-shine { position: absolute; top: 0; left: -100%; width: 50%; height: 100%; background: linear-gradient(100deg, transparent, rgba(255,255,255,.4), transparent); transform: skewX(-20deg); z-index: 1; }
.pro-btn:hover .pro-btn-shine { animation: shine .8s ease; }
@keyframes shine { 0% { left: -100%; } 100% { left: 200%; } }
.pro-btn-icon, .pro-btn-text, .pro-btn-arrow { z-index: 2; }
.pro-btn-arrow { transition: transform .3s ease; }
.pro-btn:hover .pro-btn-arrow { transform: translateX(4px); }

/* ===== SHARE LINK CARD ===== */
.share-card { margin-top: 20px; }
.share-card h3 { font-size: 16px; font-weight: 800; color: var(--text-main); margin: 0 0 4px; letter-spacing: -.3px; }
.share-card .sub { font-size: 13px; color: var(--text-soft); margin: 0 0 14px; line-height: 1.5; }
.share-link-box { display: flex; align-items: center; gap: 10px; padding: 10px 12px 10px 16px; border-radius: 14px; background: color-mix(in srgb, var(--card-bg) 80%, transparent); border: 1px solid var(--card-border); }
.share-link-box input { flex: 1; border: none; background: transparent; color: var(--text-main); font-family: inherit; font-size: 13.5px; font-weight: 600; outline: none; min-width: 0; text-overflow: ellipsis; }
.copy-btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 10px; font-family: inherit; font-size: 12.5px; font-weight: 700; color: #fff; background: linear-gradient(135deg,#007aff,#bf5af2); border: none; cursor: pointer; transition: all .3s cubic-bezier(.34,1.4,.64,1); flex-shrink: 0; }
.copy-btn:hover { transform: translateY(-2px); box-shadow: 0 10px 20px -8px rgba(0,122,255,.7); }
.copy-btn:active { transform: scale(.95); }
.copy-btn.copied { background: linear-gradient(135deg,#30d158,#128C7E); }

/* ===== CHART CARD ===== */
.chart-card { margin-top: 20px; }
.chart-card h3 { font-size: 16px; font-weight: 800; color: var(--text-main); margin: 0 0 4px; letter-spacing: -.3px; }
.chart-card .sub { font-size: 13px; color: var(--text-soft); margin: 0 0 8px; line-height: 1.5; }
.chart-wrap { position: relative; width: 100%; height: 240px; margin-top: 8px; }

/* ===== QUICK LINKS ===== */
.quick-links { margin-top: 44px; }
.quick-links-title { font-size: 20px; font-weight: 800; letter-spacing: -.4px; color: var(--text-main); margin: 0 0 16px; text-align: center; }
.quick-links-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 14px; }
.quick-link-card {
    position: relative; display: flex; flex-direction: column; gap: 10px;
    padding: 18px; border-radius: 20px;
    background: var(--card-bg); border: 1px solid var(--card-border);
    backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
    text-decoration: none; color: var(--text-main);
    transition: transform .4s cubic-bezier(.34,1.4,.64,1), box-shadow .35s ease, border-color .35s ease;
    box-shadow: 0 14px 28px -18px var(--glass-shadow);
    overflow: hidden;
}
.quick-link-card::before {
    content: ''; position: absolute; inset: 0;
    background: radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--c) 20%, transparent), transparent 60%);
    opacity: 0; transition: opacity .4s ease; pointer-events: none;
}
.quick-link-card:hover { transform: translateY(-5px); border-color: color-mix(in srgb, var(--c) 45%, var(--card-border)); box-shadow: 0 22px 40px -20px var(--glass-shadow), 0 0 0 1px color-mix(in srgb, var(--c) 30%, transparent); }
.quick-link-card:hover::before { opacity: 1; }
.quick-link-ic { position: relative; width: 42px; height: 42px; border-radius: 13px; display: grid; place-items: center; color: var(--c); background: color-mix(in srgb, var(--c) 18%, transparent); transition: transform .4s cubic-bezier(.34,1.4,.64,1); }
.quick-link-card:hover .quick-link-ic { transform: scale(1.1) rotate(-6deg); }
.quick-link-card h4 { position: relative; font-size: 14.5px; font-weight: 800; letter-spacing: -.2px; margin: 0; color: var(--text-main); }
.quick-link-card p { position: relative; font-size: 12px; color: var(--text-soft); margin: 0; line-height: 1.4; }

/* ===== MODALS ===== */
.modal-overlay { position: fixed; inset: 0; z-index: 9999; background: rgba(0,0,0,.4); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); display: flex; align-items: center; justify-content: center; padding: 20px; opacity: 0; visibility: hidden; transition: opacity .3s ease, visibility .3s ease; }
.modal-overlay.show { opacity: 1; visibility: visible; }
.modal-content { position: relative; width: 100%; max-width: 420px; padding: 30px 28px; border-radius: 28px; transform: translateY(20px) scale(.95); transition: transform .4s cubic-bezier(.34,1.2,.64,1); background: var(--glass-bg); }
.modal-overlay.show .modal-content { transform: translateY(0) scale(1); }
.modal-close { position: absolute; top: 18px; right: 18px; width: 32px; height: 32px; border-radius: 50%; border: none; background: color-mix(in srgb, var(--text-main) 10%, transparent); color: var(--text-main); cursor: pointer; display: grid; place-items: center; transition: background .3s, transform .3s; }
.modal-close:hover { background: color-mix(in srgb, var(--text-main) 20%, transparent); transform: rotate(90deg); }
.modal-content h3 { font-size: 22px; font-weight: 800; color: var(--text-main); margin-bottom: 6px; letter-spacing: -.5px; }
.modal-sub { font-size: 14px; color: var(--text-soft); margin-bottom: 22px; line-height: 1.5; }
.form-group { margin-bottom: 16px; text-align: left; }
.form-group label { display: block; font-size: 12px; font-weight: 700; color: var(--text-soft); text-transform: uppercase; letter-spacing: .6px; margin-bottom: 6px; }
.form-group input, .form-group select { width: 100%; padding: 13px 16px; font-family: inherit; font-size: 14.5px; color: var(--text-main); background: color-mix(in srgb, var(--card-bg) 90%, transparent); border: 1px solid var(--card-border); border-radius: 14px; outline: none; transition: border-color .3s, box-shadow .3s; }
.form-group input:focus, .form-group select:focus { border-color: color-mix(in srgb, #007aff 60%, transparent); box-shadow: 0 0 0 4px color-mix(in srgb, #007aff 18%, transparent); }
.save-btn { width: 100%; padding: 14px 20px; margin-top: 8px; border: none; border-radius: 14px; font-family: inherit; font-size: 15px; font-weight: 700; color: #fff; cursor: pointer; background: linear-gradient(135deg,#25D366,#128C7E); box-shadow: 0 14px 30px -12px rgba(37,211,102,.7); transition: transform .25s, box-shadow .3s, filter .3s; }
.save-btn:hover { transform: translateY(-2px); filter: brightness(1.05); box-shadow: 0 18px 38px -14px rgba(37,211,102,.85); }
.save-btn:active { transform: scale(.97); }

@media (max-width: 780px) {
    .profile-grid { grid-template-columns: 1fr; }
    .profile-header { flex-direction: column; text-align: center; }
    .profile-actions { margin-left: 0; width: 100%; justify-content: center; }
    .edit-btn, .logout-btn { flex: 1; justify-content: center; }
    .info-item { flex-direction: column; align-items: flex-start; gap: 4px; }
    .info-value { text-align: left; }
}
@media (max-width: 520px) {
    .quick-links-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .quick-link-card { padding: 14px; border-radius: 16px; }
    .quick-link-ic { width: 36px; height: 36px; border-radius: 11px; }
    .quick-link-card h4 { font-size: 13.5px; }
    .quick-link-card p { font-size: 11px; }
}

@keyframes fadeUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
[data-theme="dark"] select option { background: #1c1c1e; color: #fff; }
/* =========================================
   ★ ASK AI — Floating Liquid Glass FAB
   ========================================= */
.ask-ai-fab {
    position: fixed;
    bottom: 26px;
    right: 26px;
    z-index: 999;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 56px;
    padding: 0 22px 0 10px;
    border-radius: 99px;

    text-decoration: none;
    color: var(--text-main);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;

    /* ---- LIQUID GLASS ---- */
    background: var(--glass-bg);
    backdrop-filter: blur(50px) saturate(200%);
    -webkit-backdrop-filter: blur(50px) saturate(200%);

    box-shadow:
        0 24px 44px -14px var(--glass-shadow),
        0 10px 22px -10px var(--glass-shadow),
        inset 0 2px 3px -1px var(--glass-highlight),
        inset 0 -2px 4px -1px var(--glass-caustic),
        inset 0 0 0 1px var(--glass-border);

    transform-origin: bottom right;
    transform: scale(0.2) translateY(40px);
    opacity: 0;
    pointer-events: none;

    transition:
        transform 0.75s cubic-bezier(0.34, 1.4, 0.64, 1),
        opacity 0.5s ease,
        padding 0.6s cubic-bezier(0.34, 1.4, 0.64, 1),
        width 0.6s cubic-bezier(0.34, 1.4, 0.64, 1),
        background 0.4s ease,
        box-shadow 0.4s ease;

    overflow: hidden;
    white-space: nowrap;
    isolation: isolate;
}

/* ---- Top reflection shine ---- */
.ask-ai-fab::before {
    content: '';
    position: absolute;
    top: 1px; left: 1px; right: 1px;
    height: 46%;
    border-radius: 99px;
    background: linear-gradient(180deg,
        var(--reflection-start) 0%,
        var(--reflection-end) 100%);
    pointer-events: none;
    z-index: 2;
    transition: background 0.4s ease;
}

/* ---- Pulse ring ---- */
.ask-ai-fab::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 99px;
    border: 1.5px solid color-mix(in srgb, #bf5af2 55%, transparent);
    opacity: 0;
    pointer-events: none;
    z-index: 0;
}

/* ============ STATE : SHOW ============ */
.ask-ai-fab.show {
    transform: scale(1) translateY(0);
    opacity: 1;
    pointer-events: auto;
}

/* ============ STATE : SHRUNK → perfect circle ============ */
.ask-ai-fab.shrunk {
    padding: 0;
    width: 56px;
    height: 56px;
}

.ask-ai-fab.shrunk .ask-ai-label {
    opacity: 0;
    max-width: 0;
    margin-left: -9px;   /* gap එක නැති කරනවා */
}

/* ============ HOVER → Expand back to "Ask AI" ============ */
.ask-ai-fab.shrunk:hover,
.ask-ai-fab.shrunk:focus-visible {
    width: auto;
    height: 56px;
    padding: 0 22px 0 10px;
}

.ask-ai-fab.shrunk:hover .ask-ai-label,
.ask-ai-fab.shrunk:focus-visible .ask-ai-label {
    opacity: 1;
    max-width: 100px;
    margin-left: 0;
}

/* ============ STATE : DIM ============ */
.ask-ai-fab.dim {
    opacity: 0.5;
}

.ask-ai-fab.dim::after {
    animation: askAiPulse 2.4s ease-out infinite;
}

@keyframes askAiPulse {
    0%   { opacity: 0.75; transform: scale(1);    }
    100% { opacity: 0;    transform: scale(1.35); }
}

/* ============ HOVER (general lift + glow) ============ */
.ask-ai-fab:hover {
    opacity: 1;
    transform: scale(1.06) translateY(-3px);
    box-shadow:
        0 32px 54px -14px var(--glass-shadow),
        0 14px 28px -10px var(--glass-shadow),
        inset 0 2px 3px -1px var(--glass-highlight),
        inset 0 -2px 4px -1px var(--glass-caustic),
        inset 0 0 0 1px var(--glass-border);
}

.ask-ai-fab:active {
    transform: scale(0.95);
}

/* ---- Inner (centered) ---- */
.ask-ai-inner {
    position: relative;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
}

.ask-ai-icon {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    color: #fff;
    flex-shrink: 0;

    background: linear-gradient(135deg, #ff2a5f 0%, #bf5af2 55%, #007aff 100%);
    box-shadow:
        0 8px 18px -6px rgba(191, 90, 242, 0.7),
        inset 0 1px 2px rgba(255, 255, 255, 0.4);

    transition: transform 0.5s cubic-bezier(0.34, 1.5, 0.64, 1);
}

/* SVG එක center කරන්න */
.ask-ai-icon svg {
    display: block;
    transform: translateY(0.5px); /* pixel-perfect centering */
}

.ask-ai-fab:hover .ask-ai-icon {
    transform: rotate(-12deg) scale(1.08);
}

.ask-ai-label {
    font-size: 14.5px;
    font-weight: 700;
    letter-spacing: -0.2px;
    color: var(--text-main);
    opacity: 1;
    max-width: 100px;
    overflow: hidden;
    white-space: nowrap;
    transition:
        opacity 0.35s ease,
        max-width 0.5s cubic-bezier(0.34, 1.2, 0.64, 1),
        margin-left 0.5s cubic-bezier(0.34, 1.2, 0.64, 1);
}

/* ============ MOBILE ============ */
@media (max-width: 520px) {
    .ask-ai-fab {
        bottom: 18px;
        right: 16px;
        height: 52px;
        padding: 0 18px 0 8px;
    }
    .ask-ai-fab.shrunk {
        width: 52px;
        height: 52px;
        padding: 0;
    }
    .ask-ai-icon {
        width: 32px;
        height: 32px;
    }
    .ask-ai-label {
        font-size: 13.5px;
        max-width: 80px;
    }
}

/* ============ MOBILE HOVER EXPAND ============ */
@media (max-width: 520px) {
    .ask-ai-fab.shrunk:hover,
    .ask-ai-fab.shrunk:focus-visible {
        width: auto;
        height: 52px;
        padding: 0 18px 0 8px;
    }
}

/* ============ REDUCED MOTION ============ */
@media (prefers-reduced-motion: reduce) {
    .ask-ai-fab,
    .ask-ai-icon,
    .ask-ai-label {
        transition-duration: 0.01ms !important;
    }
    .ask-ai-fab.dim::after { animation: none; }
}
/* =========================================
   ★ PRICING PAGE
   ========================================= */
.pricing-page {
    max-width: 1180px;
    margin: 0 auto;
    padding: 30px 24px 80px;
}

/* ---------- BACK TO HOME (inside navbar) ---------- */
.back-home-nav {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 16px;
    height: 44px;
    border-radius: 99px;
    text-decoration: none;
    font-family: inherit;
    font-size: 14.5px;
    font-weight: 700;
    color: #007aff;
    z-index: 4;
    white-space: nowrap;
    -webkit-tap-highlight-color: transparent;
    transition: color .3s ease, background .3s ease;
}
.back-home-nav svg {
    transition: transform .35s cubic-bezier(.34,1.4,.64,1);
    flex-shrink: 0;
}
.back-home-nav:hover {
    color: #bf5af2;
    background: color-mix(in srgb, #007aff 12%, transparent);
}
.back-home-nav:hover svg { transform: translateX(-3px); }
.back-home-nav:active { transform: scale(.96); }

/* ---------- HERO ---------- */
.pricing-hero {
    text-align: center;
    margin-top: 20px;
    margin-bottom: 36px;
    animation: fadeUp .8s .15s both cubic-bezier(.34,1.2,.64,1);
}
.pricing-hero h1 {
    font-size: clamp(28px, 5vw, 46px);
    font-weight: 800;
    letter-spacing: -1.2px;
    line-height: 1.1;
    margin: 14px 0 12px;
    color: var(--text-main);
}
.pricing-hero p {
    font-size: clamp(14px, 2vw, 16px);
    color: var(--text-soft);
    max-width: 580px;
    margin: 0 auto;
    line-height: 1.65;
}

/* ---------- BILLING TOGGLE ---------- */
.billing-toggle {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 5px;
    margin: 26px auto 0;
    border-radius: 99px;
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    backdrop-filter: blur(30px) saturate(180%);
    -webkit-backdrop-filter: blur(30px) saturate(180%);
    box-shadow:
        0 12px 26px -16px var(--glass-shadow),
        inset 0 1px 2px -1px var(--glass-highlight);
}

.bt-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 22px;
    border-radius: 99px;
    border: none;
    background: transparent;
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 700;
    color: var(--text-soft);
    cursor: pointer;
    transition:
        color .3s ease,
        background .35s ease,
        box-shadow .35s ease,
        transform .3s cubic-bezier(.34,1.4,.64,1);
}
.bt-btn:hover { color: var(--text-main); }

.bt-btn.active {
    color: #fff;
    background: linear-gradient(135deg, #ff2a5f, #bf5af2 55%, #007aff);
    box-shadow: 0 10px 22px -12px rgba(191,90,242,.75);
}
.bt-btn:active { transform: scale(.96); }

.bt-save {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 99px;
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: .4px;
    text-transform: uppercase;
    color: #fff;
    background: linear-gradient(135deg, #30d158, #128C7E);
    box-shadow: 0 6px 12px -6px rgba(48,209,88,.7);
    transition: background .3s ease, box-shadow .3s ease;
}
.bt-btn.active .bt-save {
    background: rgba(255,255,255,.25);
    box-shadow: none;
}

/* ---------- PRICING CARDS ---------- */
.pricing-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
    gap: 24px;
    max-width: 780px;
    margin: 0 auto;
}

.pricing-card {
    position: relative;
    padding: 36px 30px 34px;
    border-radius: 28px;
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    backdrop-filter: blur(30px) saturate(180%);
    -webkit-backdrop-filter: blur(30px) saturate(180%);
    box-shadow:
        0 30px 50px -28px var(--glass-shadow),
        inset 0 1px 2px -1px var(--glass-highlight);

    transform: perspective(1000px)
        rotateX(var(--rx, 0deg))
        rotateY(var(--ry, 0deg))
        scale(var(--pop, 1));
    transition:
        transform .55s cubic-bezier(.2, .9, .3, 1.1),
        box-shadow .5s ease,
        border-color .35s ease;
    overflow: visible;
    isolation: isolate;

    animation: cardDrop .9s var(--delay, 0s) both cubic-bezier(.34,1.4,.64,1);
}
.pricing-card:nth-child(1) { --delay: .1s; }
.pricing-card:nth-child(2) { --delay: .25s; }

.pricing-card.is-live {
    transition: transform .08s linear, box-shadow .3s ease, border-color .3s ease;
}

.pricing-card::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 28px;
    background: radial-gradient(circle at 100% 0%,
        color-mix(in srgb, var(--c, #007aff) 24%, transparent),
        transparent 60%);
    opacity: 0;
    transition: opacity .4s ease;
    pointer-events: none;
    z-index: -1;
}
.pricing-card:hover::before { opacity: 1; }

.pricing-card:hover {
    border-color: color-mix(in srgb, var(--c, #007aff) 45%, transparent);
    box-shadow:
        0 40px 70px -30px var(--glass-shadow),
        0 0 0 1px color-mix(in srgb, var(--c, #007aff) 30%, transparent),
        inset 0 1px 2px -1px var(--glass-highlight);
}

.pricing-card:not(.featured) { --c: #007aff; }

.pricing-card.featured {
    --c: #bf5af2;
    border-color: color-mix(in srgb, #bf5af2 55%, transparent);
    box-shadow:
        0 40px 70px -30px color-mix(in srgb, #bf5af2 55%, transparent),
        0 0 0 1px color-mix(in srgb, #bf5af2 35%, transparent),
        inset 0 1px 2px -1px var(--glass-highlight);
}
.pricing-card.featured.is-live { --pop: 1.035; }

.pricing-card:focus-visible {
    outline: 3px solid var(--c, #007aff);
    outline-offset: 4px;
}

/* ---------- BADGE ---------- */
.pc-badge {
    position: absolute;
    top: -13px;
    left: 50%;
    transform: translateX(-50%);
    padding: 7px 16px;
    border-radius: 99px;
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #fff;
    background: linear-gradient(135deg, #ff2a5f, #bf5af2 55%, #007aff);
    box-shadow: 0 12px 26px -10px rgba(191,90,242,.75);
    white-space: nowrap;
    z-index: 2;
}

/* ---------- HEAD ---------- */
.pc-head { margin-bottom: 20px; }
.pc-name {
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -.5px;
    color: var(--text-main);
    margin: 0 0 6px;
}
.pc-sub {
    font-size: 13px;
    color: var(--text-soft);
    margin: 0;
    line-height: 1.5;
}

/* ---------- PRICE ---------- */
.pc-price {
    display: flex;
    align-items: baseline;
    gap: 3px;
    margin-bottom: 4px;
    color: var(--text-main);
    min-height: 52px;
}
.pc-currency {
    font-size: 20px;
    font-weight: 700;
    color: var(--text-soft);
    transition: color .3s ease;
}
.pc-amount {
    font-size: 46px;
    font-weight: 800;
    letter-spacing: -2px;
    line-height: 1;
    background: linear-gradient(135deg, #ff2a5f, #007aff 55%, #bf5af2);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    display: inline-block;
}
.pc-amount.flip {
    animation: pcFlip .45s cubic-bezier(.34,1.4,.64,1);
}
@keyframes pcFlip {
    0%   { opacity: 0; transform: translateY(-8px) scale(.96); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}
.pc-period {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-soft);
    margin-left: 2px;
}

.pc-old {
    min-height: 22px;
    margin: 6px 0 0;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-soft);
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    transition: opacity .3s ease;
}
.pc-old s {
    opacity: .8;
}
.pc-old .pc-save-tag {
    display: inline-block;
    padding: 3px 9px;
    border-radius: 99px;
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: .4px;
    text-transform: uppercase;
    color: #fff;
    background: linear-gradient(135deg, #30d158, #128C7E);
    box-shadow: 0 6px 12px -6px rgba(48,209,88,.65);
}

/* ---------- FEATURES ---------- */
.pc-feats {
    list-style: none;
    margin: 22px 0 24px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 11px;
}
.pc-feats li {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    font-size: 14px;
    font-weight: 500;
    color: var(--text-main);
    line-height: 1.5;
}
.pc-feats li strong { color: var(--text-main); font-weight: 800; }
.pc-feats li .pc-check {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    color: #fff;
    background: linear-gradient(135deg, #30d158, #128C7E);
    box-shadow: 0 4px 10px -4px rgba(48,209,88,.7);
    margin-top: 1px;
}
.pc-feats li .pc-check svg { width: 11px; height: 11px; }

.pc-feats li.unlimited .pc-check {
    background: linear-gradient(135deg, #bf5af2, #007aff);
    box-shadow: 0 4px 10px -4px rgba(191,90,242,.7);
}

/* ---------- CTA ---------- */
.pc-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 14px 22px;
    border-radius: 16px;
    border: 1px solid var(--card-border);
    background: color-mix(in srgb, var(--card-bg) 85%, transparent);
    color: var(--text-main);
    font-family: inherit;
    font-size: 14.5px;
    font-weight: 700;
    cursor: pointer;
    transition:
        transform .3s cubic-bezier(.34,1.4,.64,1),
        background .3s ease,
        box-shadow .3s ease,
        border-color .3s ease;
}
.pc-cta:hover {
    transform: translateY(-2px);
    background: color-mix(in srgb, var(--text-main) 8%, transparent);
    border-color: color-mix(in srgb, var(--text-main) 22%, transparent);
}
.pc-cta:active { transform: scale(.97); }

.pc-cta.solid {
    color: #fff;
    border: none;
    background: linear-gradient(135deg, #ff2a5f 0%, #bf5af2 50%, #007aff 100%);
    background-size: 200% 200%;
    box-shadow:
        0 18px 34px -14px rgba(191,90,242,.65),
        inset 0 1px 2px rgba(255,255,255,.35);
}
.pc-cta.solid:hover {
    background-position: 100% 50%;
    box-shadow:
        0 24px 44px -16px rgba(191,90,242,.85),
        inset 0 1px 2px rgba(255,255,255,.45);
}

/* ---------- NOTE ---------- */
.pricing-note {
    text-align: center;
    margin-top: 38px;
    font-size: 13px;
    color: var(--text-soft);
    line-height: 1.7;
}
.pricing-note strong { color: var(--text-main); font-weight: 700; }

/* ---------- RESPONSIVE ---------- */
@media (max-width: 900px) {
    .back-home-nav { padding: 0 13px; font-size: 13.5px; }
    .back-home-nav .label { display: none; }
}

@media (max-width: 640px) {
    .pricing-page { padding: 22px 16px 60px; }
    .pricing-hero { margin-top: 10px; margin-bottom: 28px; }
    .billing-toggle { padding: 4px; margin-top: 22px; }
    .bt-btn { padding: 9px 16px; font-size: 12.5px; gap: 6px; }
    .bt-save { padding: 2px 6px; font-size: 9.5px; }

    .pricing-cards { gap: 18px; }
    .pricing-card { padding: 30px 24px 28px; border-radius: 24px; }
    .pc-name { font-size: 20px; }
    .pc-amount { font-size: 40px; }
    .pc-currency { font-size: 18px; }
    .pc-feats li { font-size: 13.5px; }
    .pricing-note { margin-top: 30px; font-size: 12.5px; }
}

@media (max-width: 380px) {
    .bt-btn { padding: 8px 13px; font-size: 12px; }
    .pc-amount { font-size: 36px; }
}

/* ---------- REDUCED MOTION ---------- */
@media (prefers-reduced-motion: reduce) {
    .pricing-card,
    .pricing-card.is-live,
    .pc-amount.flip,
    .bt-btn:active {
        animation: none !important;
        transition-duration: .01ms !important;
    }
}
/* =========================================================
   SkillForgeX — Code with me
   Complete CSS with Projects List + IDE
   ========================================================= */

body.cwm-page {
    min-height: 100vh;
    overflow-x: hidden;
}

/* ============ AUTH LOADING ============ */
.cwm-auth-load {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 18px;
    background: var(--bg-color);
    color: var(--text-soft);
    font-size: 14px;
    font-weight: 600;
}
.cwm-auth-load[hidden] { display: none; }

.cwm-spinner {
    width: 42px; height: 42px;
    border-radius: 50%;
    border: 3px solid color-mix(in srgb, var(--text-soft) 25%, transparent);
    border-top-color: #007aff;
    animation: cwmSpin .8s linear infinite;
}
@keyframes cwmSpin { to { transform: rotate(360deg); } }

/* ============ APP SHELL ============ */
.cwm-app {
    max-width: 1180px;
    margin: 0 auto;
    padding: 30px 24px 80px;
    position: relative;
    z-index: 2;
}
.cwm-app[hidden] { display: none; }

.cwm-screen { display: none; }
.cwm-screen.is-active {
    display: block;
    animation: cwmIn .5s cubic-bezier(.34,1.2,.64,1);
}
@keyframes cwmIn {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ============ TRACK PICKER ============ */
.cwm-track-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 18px;
    max-width: 860px;
    margin: 0 auto;
}

.cwm-track {
    position: relative;
    padding: 30px 26px 28px;
    border-radius: 26px;
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    backdrop-filter: blur(28px) saturate(180%);
    -webkit-backdrop-filter: blur(28px) saturate(180%);
    text-align: left;
    font-family: inherit;
    color: var(--text-main);
    cursor: pointer;
    overflow: hidden;
    isolation: isolate;
    box-shadow:
        0 18px 34px -22px var(--glass-shadow),
        inset 0 1px 2px -1px var(--glass-highlight);
    transition:
        transform .45s cubic-bezier(.34,1.4,.64,1),
        box-shadow .35s ease,
        border-color .35s ease;
    animation: cwmIn .7s both cubic-bezier(.34,1.2,.64,1);
}
.cwm-track:nth-child(1) { animation-delay: .05s; }
.cwm-track:nth-child(2) { animation-delay: .18s; }

.cwm-track::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--c) 22%, transparent),
        transparent 60%);
    opacity: 0;
    transition: opacity .4s ease;
    z-index: -1;
    pointer-events: none;
}
.cwm-track:hover {
    transform: translateY(-6px) scale(1.02);
    border-color: color-mix(in srgb, var(--c) 45%, transparent);
    box-shadow:
        0 30px 50px -25px var(--glass-shadow),
        0 0 0 1px color-mix(in srgb, var(--c) 30%, transparent),
        inset 0 1px 2px -1px var(--glass-highlight);
}
.cwm-track:hover::before { opacity: 1; }
.cwm-track:active { transform: translateY(-2px) scale(.98); }

.cwm-track-ic {
    width: 54px;
    height: 54px;
    border-radius: 17px;
    display: grid;
    place-items: center;
    margin-bottom: 18px;
    color: var(--c);
    background: color-mix(in srgb, var(--c) 16%, transparent);
    transition: transform .4s cubic-bezier(.34,1.4,.64,1);
}
.cwm-track:hover .cwm-track-ic { transform: scale(1.1) rotate(-6deg); }

.cwm-track h3 {
    font-size: 19px;
    font-weight: 800;
    letter-spacing: -.4px;
    margin: 0 0 8px;
    color: var(--text-main);
}
.cwm-track p {
    font-size: 14px;
    line-height: 1.55;
    color: var(--text-soft);
    margin: 0;
}
.cwm-track-arrow {
    position: absolute;
    right: 26px;
    bottom: 26px;
    font-size: 18px;
    color: var(--c);
    opacity: 0;
    transform: translateX(-8px);
    transition: opacity .3s ease, transform .4s cubic-bezier(.34,1.4,.64,1);
}
.cwm-track:hover .cwm-track-arrow { opacity: 1; transform: translateX(0); }

/* ============ PANELS ============ */
.cwm-panel { display: none; }
.cwm-panel.is-active {
    display: block;
    animation: cwmIn .4s cubic-bezier(.34,1.2,.64,1);
}

/* ============ NOTES ============ */
.cwm-note-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 22px;
    justify-content: center;
}
.cwm-note-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 20px;
    border-radius: 99px;
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 700;
    color: var(--icon-color);
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    cursor: pointer;
    transition:
        transform .3s cubic-bezier(.34,1.4,.64,1),
        color .3s ease, background .3s ease,
        border-color .3s ease, box-shadow .3s ease;
}
.cwm-note-btn:hover {
    color: var(--icon-active);
    transform: translateY(-2px);
}
.cwm-note-btn.is-active {
    color: var(--text-main);
    border-color: color-mix(in srgb, var(--c, #007aff) 45%, transparent);
    background: color-mix(in srgb, var(--c, #007aff) 12%, var(--card-bg));
    box-shadow: 0 14px 28px -16px var(--glass-shadow);
}
.cwm-note-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--c, #007aff);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--c, #007aff) 25%, transparent);
    flex-shrink: 0;
}

.cwm-note { display: none; }
.cwm-note.is-active {
    display: block;
    animation: cwmIn .4s cubic-bezier(.34,1.2,.64,1);
}

.cwm-notes-wrap {
    max-width: 820px;
    margin: 0 auto;
    padding: 32px 30px;
    border-radius: 26px;
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    backdrop-filter: blur(30px) saturate(180%);
    -webkit-backdrop-filter: blur(30px) saturate(180%);
    box-shadow:
        0 20px 40px -22px var(--glass-shadow),
        inset 0 1px 2px -1px var(--glass-highlight);
}
@media (max-width: 640px) {
    .cwm-notes-wrap { padding: 24px 18px; border-radius: 22px; }
}

.cwm-note-badge {
    display: inline-block;
    padding: 5px 13px;
    border-radius: 99px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .7px;
    text-transform: uppercase;
    color: var(--text-main);
    background: color-mix(in srgb, var(--text-main) 8%, transparent);
    border: 1px solid var(--card-border);
    margin-bottom: 14px;
}
.cwm-note h2 {
    font-size: clamp(20px, 3vw, 26px);
    font-weight: 800;
    letter-spacing: -.5px;
    color: var(--text-main);
    margin: 0 0 12px;
    line-height: 1.2;
}
.cwm-note h3 {
    font-size: 16px;
    font-weight: 800;
    letter-spacing: -.2px;
    color: var(--text-main);
    margin: 24px 0 10px;
}
.cwm-note p {
    font-size: 14.5px;
    line-height: 1.7;
    color: var(--text-soft);
    margin: 0 0 12px;
}
.cwm-note p strong { color: var(--text-main); font-weight: 700; }
.cwm-note code {
    font-family: "SF Mono", ui-monospace, Menlo, Consolas, monospace;
    font-size: 12.5px;
    padding: 2px 7px;
    border-radius: 6px;
    background: color-mix(in srgb, var(--text-main) 8%, transparent);
    color: var(--text-main);
    border: 1px solid color-mix(in srgb, var(--text-main) 10%, transparent);
}
.cwm-note pre {
    margin: 12px 0 18px;
    padding: 16px 18px;
    border-radius: 14px;
    overflow-x: auto;
    background: #1c1c1e;
    border: 1px solid rgba(255,255,255,.08);
    box-shadow: 0 12px 24px -16px rgba(0,0,0,.5);
}
.cwm-note pre code {
    font-family: "SF Mono", ui-monospace, Menlo, Consolas, monospace;
    font-size: 12.5px;
    line-height: 1.7;
    padding: 0;
    background: transparent;
    border: none;
    color: #f5f5f7;
    white-space: pre;
}
.cwm-note-tip {
    margin-top: 20px;
    padding: 14px 18px;
    border-radius: 14px;
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--text-main);
    background: color-mix(in srgb, #ff9500 12%, transparent);
    border: 1px solid color-mix(in srgb, #ff9500 30%, transparent);
}

/* =========================================================
   ★★★ PROJECTS VIEW (Code and Preview tab) ★★★
   ========================================================= */
.cwm-projects-view {
    max-width: 960px;
    margin: 0 auto;
}

.cwm-projects-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 22px;
    flex-wrap: wrap;
}
.cwm-projects-head h3 {
    font-size: clamp(20px, 3vw, 24px);
    font-weight: 800;
    letter-spacing: -.5px;
    color: var(--text-main);
    margin: 0 0 4px;
}
.cwm-projects-sub {
    font-size: 13.5px;
    color: var(--text-soft);
    margin: 0;
    line-height: 1.5;
}
.cwm-new-project-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 20px;
    border-radius: 14px;
    border: none;
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 800;
    letter-spacing: -.1px;
    color: #fff;
    cursor: pointer;
    background: linear-gradient(135deg, #ff2a5f 0%, #bf5af2 55%, #007aff 100%);
    box-shadow:
        0 14px 28px -12px rgba(191,90,242,.7),
        inset 0 1px 2px rgba(255,255,255,.35);
    transition:
        transform .3s cubic-bezier(.34,1.4,.64,1),
        box-shadow .3s ease;
    white-space: nowrap;
}
.cwm-new-project-btn:hover {
    transform: translateY(-2px);
    box-shadow:
        0 20px 34px -14px rgba(191,90,242,.85),
        inset 0 1px 2px rgba(255,255,255,.45);
}
.cwm-new-project-btn:active { transform: scale(.96); }

.cwm-projects-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 14px;
}

.cwm-project-card {
    position: relative;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 20px 20px;
    border-radius: 20px;
    border: 1px solid var(--card-border);
    background: var(--card-bg);
    backdrop-filter: blur(24px) saturate(180%);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    text-align: left;
    font-family: inherit;
    color: var(--text-main);
    cursor: pointer;
    overflow: hidden;
    box-shadow:
        0 14px 28px -20px var(--glass-shadow),
        inset 0 1px 2px -1px var(--glass-highlight);
    transition:
        transform .35s cubic-bezier(.34,1.4,.64,1),
        box-shadow .3s ease,
        border-color .3s ease;
}
.cwm-project-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 100% 0%,
        color-mix(in srgb, #007aff 22%, transparent),
        transparent 60%);
    opacity: 0;
    transition: opacity .35s ease;
    pointer-events: none;
}
.cwm-project-card:hover {
    transform: translateY(-4px);
    border-color: color-mix(in srgb, #007aff 45%, transparent);
    box-shadow:
        0 24px 40px -22px var(--glass-shadow),
        0 0 0 1px color-mix(in srgb, #007aff 30%, transparent),
        inset 0 1px 2px -1px var(--glass-highlight);
}
.cwm-project-card:hover::before { opacity: 1; }
.cwm-project-card:active { transform: translateY(-1px) scale(.98); }

.cwm-pc-icon {
    position: relative;
    width: 46px;
    height: 46px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    color: var(--c, #007aff);
    background: color-mix(in srgb, var(--c, #007aff) 16%, transparent);
    flex-shrink: 0;
    transition: transform .35s cubic-bezier(.34,1.4,.64,1);
}
.cwm-project-card:hover .cwm-pc-icon { transform: scale(1.08) rotate(-6deg); }

.cwm-pc-body {
    flex: 1;
    min-width: 0;
}
.cwm-pc-name {
    font-size: 15px;
    font-weight: 800;
    letter-spacing: -.3px;
    color: var(--text-main);
    margin-bottom: 4px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.cwm-pc-meta {
    font-size: 11.5px;
    font-weight: 600;
    color: var(--text-soft);
    letter-spacing: .2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cwm-pc-arrow {
    font-size: 18px;
    font-weight: 800;
    color: #007aff;
    opacity: 0;
    transform: translateX(-6px);
    transition: opacity .3s ease, transform .35s cubic-bezier(.34,1.4,.64,1);
    flex-shrink: 0;
}
.cwm-project-card:hover .cwm-pc-arrow {
    opacity: 1;
    transform: translateX(0);
}

/* New project card (dashed style) */
.cwm-project-card-new {
    border-style: dashed;
    border-color: color-mix(in srgb, var(--text-soft) 35%, transparent);
    background: color-mix(in srgb, var(--card-bg) 70%, transparent);
}
.cwm-project-card-new .cwm-pc-icon-new {
    color: #007aff;
    background: color-mix(in srgb, #007aff 14%, transparent);
}
.cwm-project-card-new .cwm-pc-name { color: #007aff; }
.cwm-project-card-new:hover {
    border-color: color-mix(in srgb, #007aff 55%, transparent);
    border-style: dashed;
}

/* Empty state */
.cwm-projects-empty {
    grid-column: 1 / -1;
    text-align: center;
    padding: 48px 24px;
    border-radius: 22px;
    background: color-mix(in srgb, var(--card-bg) 70%, transparent);
    border: 1px dashed var(--card-border);
    color: var(--text-soft);
    font-size: 14px;
}
.cwm-projects-empty p { margin: 4px 0; }

/* Mobile */
@media (max-width: 640px) {
    .cwm-projects-head {
        flex-direction: column;
        align-items: stretch;
    }
    .cwm-new-project-btn { justify-content: center; width: 100%; }
    .cwm-projects-grid {
        grid-template-columns: 1fr;
        gap: 10px;
    }
    .cwm-project-card { padding: 16px 18px; border-radius: 18px; }
    .cwm-pc-icon { width: 42px; height: 42px; border-radius: 12px; }
    .cwm-pc-name { font-size: 14.5px; }
}

/* =========================================================
   IDE — FULLSCREEN OVERLAY
   ========================================================= */
.ide {
    position: fixed;
    inset: 0;
    z-index: 500;
    display: flex;
    flex-direction: column;
    background: var(--bg-color);
    opacity: 0;
    pointer-events: none;
    transform: translateY(14px);
    transition: opacity .35s ease, transform .45s cubic-bezier(.34,1.2,.64,1);
    width: 100vw;
    height: 100vh;
    height: 100dvh;
}
body.ide-open .ide {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}
body.ide-open { overflow: hidden; }

/* ---------- TOPBAR ---------- */
.ide-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 16px;
    padding-top: max(10px, env(safe-area-inset-top));
    background: color-mix(in srgb, var(--glass-bg) 90%, transparent);
    backdrop-filter: blur(40px) saturate(200%);
    -webkit-backdrop-filter: blur(40px) saturate(200%);
    border-bottom: 1px solid var(--card-border);
    flex-shrink: 0;
    z-index: 20;
    position: relative;
}
.ide-top-left,
.ide-top-right {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}
.ide-top-center {
    flex: 1;
    display: flex;
    justify-content: center;
    min-width: 0;
    align-items: center;
}

.ide-clock {
    display: flex;
    flex-direction: column;
    line-height: 1.1;
    padding-left: 10px;
    border-left: 1px solid var(--divider);
}
.ide-clock span {
    font-size: 15px;
    font-weight: 800;
    letter-spacing: -.3px;
    color: var(--text-main);
    font-variant-numeric: tabular-nums;
}
.ide-clock small {
    font-size: 10px;
    font-weight: 600;
    color: var(--text-soft);
    text-transform: uppercase;
    letter-spacing: .5px;
}

/* Project name label (no dropdown) */
.ide-project-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 14px;
    max-width: 280px;
    border-radius: 99px;
    background: color-mix(in srgb, var(--text-main) 6%, transparent);
    border: 1px solid var(--card-border);
    font-size: 13px;
    font-weight: 700;
    color: var(--text-main);
    pointer-events: none;
}
.ide-project-label svg {
    color: #007aff;
    flex-shrink: 0;
}
.ide-project-label span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

.ide-iconbtn {
    width: 38px;
    height: 38px;
    border-radius: 11px;
    border: 1px solid var(--card-border);
    background: var(--card-bg);
    color: var(--text-main);
    display: grid;
    place-items: center;
    cursor: pointer;
    flex-shrink: 0;
    transition:
        transform .25s cubic-bezier(.34,1.4,.64,1),
        background .25s, color .25s, border-color .25s;
    -webkit-tap-highlight-color: transparent;
    padding: 0;
}
.ide-iconbtn:hover {
    color: #007aff;
    border-color: color-mix(in srgb, #007aff 45%, transparent);
    background: color-mix(in srgb, #007aff 10%, var(--card-bg));
    transform: translateY(-1px);
}
.ide-iconbtn:active { transform: scale(.94); }
.ide-iconbtn.small { width: 30px; height: 30px; border-radius: 9px; }

.ide-status {
    font-size: 11.5px;
    font-weight: 700;
    color: var(--text-soft);
    letter-spacing: .3px;
    min-width: 0;
    max-width: 130px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    transition: color .3s ease;
}
.ide-status.ok  { color: #30d158; }
.ide-status.err { color: #ff3b30; }

.ide-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 15px;
    border-radius: 11px;
    border: 1px solid var(--card-border);
    background: var(--card-bg);
    color: var(--text-main);
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    transition:
        transform .25s cubic-bezier(.34,1.4,.64,1),
        background .25s, border-color .25s, color .25s;
}
.ide-btn:hover {
    transform: translateY(-1px);
    border-color: color-mix(in srgb, #007aff 45%, transparent);
    background: color-mix(in srgb, #007aff 10%, var(--card-bg));
    color: #007aff;
}
.ide-btn:active { transform: scale(.95); }
.ide-btn.primary {
    color: #fff;
    border: none;
    background: linear-gradient(135deg, #ff2a5f 0%, #bf5af2 55%, #007aff 100%);
    box-shadow: 0 10px 22px -12px rgba(191,90,242,.75);
}
.ide-btn.primary:hover {
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 14px 26px -12px rgba(191,90,242,.9);
}
.ide-btn.primary svg { color: #fff; }

/* ---------- BODY grid (desktop) ---------- */
.ide-body {
    flex: 1;
    display: grid;
    grid-template-columns: 220px 1fr 420px;
    grid-template-areas: "explorer main preview";
    min-height: 0;
    overflow: hidden;
}

/* ---------- EXPLORER ---------- */
.ide-explorer {
    grid-area: explorer;
    background: color-mix(in srgb, var(--glass-bg) 80%, transparent);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-right: 1px solid var(--card-border);
    display: flex;
    flex-direction: column;
    min-height: 0;
    position: relative;
    z-index: 10;
}
.ide-explorer-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 12px 8px;
    position: relative;
}
.ide-explorer-title {
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 1.2px;
    color: var(--text-soft);
}
.ide-explorer-actions { display: flex; gap: 4px; }
.ide-explorer-project {
    padding: 4px 14px 10px;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: -.2px;
    color: var(--text-main);
    border-bottom: 1px solid var(--divider);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-transform: uppercase;
}
.ide-files {
    flex: 1;
    list-style: none;
    padding: 8px 6px;
    margin: 0;
    overflow-y: auto;
    min-height: 0;
}
.ide-files::-webkit-scrollbar { width: 5px; }
.ide-files::-webkit-scrollbar-thumb {
    background: color-mix(in srgb, var(--text-soft) 25%, transparent);
    border-radius: 5px;
}
.ide-file {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-soft);
    cursor: pointer;
    transition: background .2s, color .2s;
    position: relative;
    user-select: none;
}
.ide-file:hover {
    background: color-mix(in srgb, #007aff 10%, transparent);
    color: var(--text-main);
}
.ide-file.is-active {
    background: color-mix(in srgb, #007aff 18%, transparent);
    color: var(--text-main);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, #007aff 40%, transparent);
}
.ide-file .fi {
    flex-shrink: 0;
    width: 15px;
    height: 15px;
    display: grid;
    place-items: center;
}
.ide-file .fi-html { color: #ff9500; }
.ide-file .fi-css  { color: #007aff; }
.ide-file .fi-js   { color: #ffcc00; }
.ide-file .fi-py   { color: #30d158; }
.ide-file .fi-name {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ide-file .fi-del {
    background: transparent;
    border: none;
    color: var(--text-soft);
    cursor: pointer;
    padding: 4px;
    border-radius: 5px;
    opacity: 0;
    transition: opacity .2s, color .2s, background .2s;
    display: grid;
    place-items: center;
}
.ide-file:hover .fi-del { opacity: 1; }
.ide-file .fi-del:hover {
    color: #ff3b30;
    background: color-mix(in srgb, #ff3b30 15%, transparent);
}

@media (hover: none) and (pointer: coarse) {
    .ide-file .fi-del { opacity: 0.75 !important; }
}

.ide-explorer-foot {
    padding: 10px 14px;
    padding-bottom: max(10px, env(safe-area-inset-bottom));
    border-top: 1px solid var(--divider);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .5px;
    color: var(--text-soft);
    text-transform: uppercase;
}

/* Side menus */
.ide-menu {
    position: absolute;
    top: calc(100% + 4px);
    right: 8px;
    min-width: 190px;
    padding: 6px;
    border-radius: 14px;
    background: var(--pill-bg);
    backdrop-filter: blur(30px) saturate(200%);
    -webkit-backdrop-filter: blur(30px) saturate(200%);
    box-shadow:
        0 20px 40px -12px var(--glass-shadow),
        inset 0 1px 2px -1px var(--glass-highlight),
        inset 0 0 0 1px var(--glass-border);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px) scale(.96);
    transform-origin: top right;
    transition:
        opacity .2s,
        transform .3s cubic-bezier(.34,1.4,.64,1),
        visibility .2s;
    z-index: 30;
}
.ide-menu.open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
}
.ide-menu button {
    display: flex;
    align-items: center;
    gap: 9px;
    width: 100%;
    padding: 10px 12px;
    border-radius: 9px;
    border: none;
    background: transparent;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-main);
    text-align: left;
    cursor: pointer;
    transition: background .2s;
}
.ide-menu button:hover {
    background: color-mix(in srgb, #007aff 12%, transparent);
    color: #007aff;
}
.ide-menu button.danger:hover {
    background: color-mix(in srgb, #ff3b30 14%, transparent);
    color: #ff3b30;
}
.ide-menu .mi-tag {
    margin-left: auto;
    font-size: 10px;
    font-weight: 700;
    color: var(--text-soft);
    padding: 2px 6px;
    border-radius: 4px;
    background: color-mix(in srgb, var(--text-main) 6%, transparent);
}

/* ---------- MAIN (tabs + editor) ---------- */
.ide-main {
    grid-area: main;
    display: flex;
    flex-direction: column;
    min-height: 0;
    min-width: 0;
    background: #1c1c1e;
    position: relative;
}
.ide-tabs {
    display: flex;
    overflow-x: auto;
    background: #161618;
    border-bottom: 1px solid rgba(255,255,255,.06);
    scrollbar-width: none;
    flex-shrink: 0;
}
.ide-tabs::-webkit-scrollbar { display: none; }
.ide-tab {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 16px;
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 600;
    color: rgba(255,255,255,.5);
    background: transparent;
    border: none;
    border-right: 1px solid rgba(255,255,255,.06);
    cursor: pointer;
    white-space: nowrap;
    transition: color .2s, background .2s;
    position: relative;
}
.ide-tab:hover { color: rgba(255,255,255,.85); background: rgba(255,255,255,.04); }
.ide-tab.is-active { color: #fff; background: #1c1c1e; }
.ide-tab.is-active::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg, #ff2a5f, #bf5af2, #007aff);
}

.ide-editor-wrap {
    flex: 1 1 auto;
    min-height: 200px;
    position: relative;
    overflow: hidden;
}
.ide-editor-wrap .CodeMirror {
    position: absolute !important;
    inset: 0;
    height: 100% !important;
    font-family: "SF Mono", ui-monospace, Menlo, Consolas, monospace;
    font-size: 13.5px;
    line-height: 1.6;
    background: #1c1c1e;
}
.ide-editor-wrap .CodeMirror-scroll { min-height: 100%; }
.ide-editor-wrap .CodeMirror-gutters {
    background: #161618;
    border-right: 1px solid rgba(255,255,255,.05);
}
.ide-editor-wrap .CodeMirror-linenumber { color: rgba(255,255,255,.28); }
.ide-editor-wrap .CodeMirror-activeline-background { background: rgba(255,255,255,.035); }
.ide-editor-wrap .CodeMirror-cursor { border-left: 2px solid #fff; }
.ide-editor-wrap .CodeMirror-selected { background: rgba(0,122,255,.35) !important; }

/* ---------- PREVIEW ---------- */
.ide-preview {
    grid-area: preview;
    display: flex;
    flex-direction: column;
    min-height: 0;
    min-width: 0;
    border-left: 1px solid var(--card-border);
    background: var(--bg-color);
}
.ide-preview-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    border-bottom: 1px solid var(--card-border);
    background: color-mix(in srgb, var(--glass-bg) 70%, transparent);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    flex-shrink: 0;
    gap: 8px;
}
.ide-preview-tabs {
    display: inline-flex;
    gap: 2px;
    padding: 3px;
    border-radius: 99px;
    background: color-mix(in srgb, var(--text-main) 7%, transparent);
}
.ide-preview-tabs button {
    padding: 6px 14px;
    border-radius: 99px;
    border: none;
    background: transparent;
    font-family: inherit;
    font-size: 12px;
    font-weight: 700;
    color: var(--text-soft);
    cursor: pointer;
    transition: color .2s, background .25s;
}
.ide-preview-tabs button:hover { color: var(--text-main); }
.ide-preview-tabs button.is-active {
    color: #fff;
    background: linear-gradient(135deg, #ff2a5f, #bf5af2);
}
.ide-preview-actions { display: flex; gap: 6px; }
.ide-preview-body {
    flex: 1;
    min-height: 0;
    position: relative;
}
.ide-preview-panel {
    position: absolute;
    inset: 0;
    display: none;
}
.ide-preview-panel.is-active { display: block; }
.ide-preview-panel iframe {
    width: 100%;
    height: 100%;
    border: 0;
    background: #fff;
}
[data-theme="dark"] .ide-preview-panel iframe { background: #111; }

.ide-console {
    width: 100%;
    height: 100%;
    overflow-y: auto;
    padding: 14px 16px;
    font-family: "SF Mono", ui-monospace, Menlo, Consolas, monospace;
    font-size: 12.5px;
    line-height: 1.55;
    background: #1c1c1e;
    color: #f5f5f7;
}
.ide-console::-webkit-scrollbar { width: 6px; }
.ide-console::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,.15);
    border-radius: 6px;
}
.console-line {
    padding: 3px 0;
    border-bottom: 1px solid rgba(255,255,255,.04);
    white-space: pre-wrap;
    word-break: break-word;
}
.console-line.log   { color: #f5f5f7; }
.console-line.info  { color: #8ecae6; }
.console-line.warn  { color: #ffd166; }
.console-line.error { color: #ff6b6b; }
.console-line.sys   { color: rgba(255,255,255,.45); font-style: italic; }
.console-line::before {
    content: '› ';
    opacity: .35;
    margin-right: 2px;
}
.console-empty {
    color: rgba(255,255,255,.35);
    font-style: italic;
    font-size: 12px;
}

/* ---------- Backdrop ---------- */
.ide-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,.45);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    opacity: 0;
    visibility: hidden;
    transition: opacity .3s, visibility .3s;
    z-index: 40;
}
body.ide-drawer-open .ide-backdrop,
body.ide-menu-open .ide-backdrop { opacity: 1; visibility: visible; }
.ide-drawer-toggle { display: none; }

/* =========================================================
   RESPONSIVE IDE
   ========================================================= */
@media (max-width: 1100px) {
    .ide-body {
        grid-template-columns: 200px 1fr;
        grid-template-areas:
            "explorer main"
            "explorer preview";
        grid-template-rows: 1.2fr 1fr;
    }
    .ide-preview {
        border-left: none;
        border-top: 1px solid var(--card-border);
    }
}

@media (max-width: 760px) {
    body.ide-open {
        position: fixed;
        inset: 0;
        width: 100vw;
        height: 100dvh;
        overflow: hidden;
        overscroll-behavior: none;
    }
    .ide { height: 100dvh; }

    .ide-top {
        padding: 8px 10px;
        gap: 6px;
        flex-wrap: nowrap;
    }
    .ide-top-left { gap: 6px; }
    .ide-top-right { gap: 6px; }
    .ide-clock { padding-left: 6px; }
    .ide-clock span { font-size: 13px; }
    .ide-clock small { display: none; }
    .ide-iconbtn { width: 34px; height: 34px; border-radius: 10px; }
    .ide-iconbtn.small { width: 28px; height: 28px; }
    .ide-btn { padding: 7px 10px; font-size: 11.5px; }
    .ide-btn-label { display: none; }
    .ide-status { display: none; }
    .ide-project-label { padding: 6px 12px; font-size: 12px; max-width: 130px; }

    .ide-body {
        display: flex;
        flex-direction: column;
        height: 100%;
        min-height: 0;
        overflow: hidden;
    }
    .ide-main {
        flex: 1 1 60%;
        min-height: 0;
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }
    .ide-preview {
        flex: 1 1 40%;
        min-height: 0;
        display: flex;
        flex-direction: column;
        border-left: none;
        border-top: 1px solid var(--card-border);
        overflow: hidden;
    }
    .ide-editor-wrap {
        flex: 1 1 auto;
        min-height: 0;
        position: relative;
        overflow: hidden;
    }
    .ide-tabs { flex-shrink: 0; }
    .ide-tab { padding: 9px 12px; font-size: 11.5px; }
    .ide-preview-head { padding: 6px 10px; flex-shrink: 0; }
    .ide-preview-tabs button { padding: 5px 12px; font-size: 11px; }

    .ide-explorer {
        position: absolute;
        top: 0; left: 0; bottom: 0;
        width: 260px;
        max-width: 82vw;
        transform: translateX(-105%);
        transition: transform .35s cubic-bezier(.34,1.2,.64,1);
        z-index: 45;
        box-shadow: 8px 0 30px -10px rgba(0,0,0,.4);
    }
    body.ide-drawer-open .ide-explorer { transform: translateX(0); }

    .ide-drawer-toggle {
        display: grid;
        place-items: center;
        position: absolute;
        left: 12px;
        bottom: max(12px, env(safe-area-inset-bottom));
        width: 46px;
        height: 46px;
        border-radius: 14px;
        border: 1px solid var(--card-border);
        background: var(--glass-bg);
        backdrop-filter: blur(30px);
        -webkit-backdrop-filter: blur(30px);
        color: var(--text-main);
        cursor: pointer;
        z-index: 42;
        box-shadow: 0 14px 30px -14px var(--glass-shadow);
    }
    .ide-drawer-toggle:active { transform: scale(.92); }

    .ide-backdrop { position: fixed; inset: 0; }

    .toast {
        bottom: max(16px, env(safe-area-inset-bottom));
        font-size: 13px;
        padding: 11px 18px;
    }

    .cwm-modal { padding: 22px 20px 18px; border-radius: 20px; }
    .cwm-modal-icon { width: 48px; height: 48px; border-radius: 15px; font-size: 20px; }
    .cwm-modal-title { font-size: 17px; }
    .cwm-modal-msg { font-size: 13px; }
}

@media (max-width: 480px) {
    .ide-top { padding: 6px 8px; gap: 5px; }
    .ide-iconbtn { width: 32px; height: 32px; }
    .ide-btn { padding: 6px 9px; font-size: 11px; }
    .ide-clock span { font-size: 12px; }
    .ide-project-label { padding: 5px 10px; font-size: 11.5px; max-width: 110px; }
}

/* =========================================================
   FULLSCREEN PREVIEW
   ========================================================= */
.ide-fs {
    position: fixed;
    inset: 0;
    z-index: 9000;
    display: flex;
    flex-direction: column;
    background: #000;
    opacity: 0;
    visibility: hidden;
    transition: opacity .35s, visibility .35s;
}
.ide-fs.open { opacity: 1; visibility: visible; }
.ide-fs-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    padding-top: max(10px, env(safe-area-inset-top));
    background: rgba(20,20,22,.9);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(255,255,255,.08);
    color: #f5f5f7;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: -.2px;
    flex-shrink: 0;
}
.ide-fs-bar .ide-iconbtn {
    background: rgba(255,255,255,.1);
    border-color: rgba(255,255,255,.15);
    color: #fff;
}
.ide-fs-bar .ide-iconbtn:hover {
    background: rgba(255,255,255,.2);
    color: #fff;
    border-color: rgba(255,255,255,.3);
}
.ide-fs iframe {
    flex: 1;
    width: 100%;
    border: 0;
    background: #fff;
}

/* =========================================================
   TOAST
   ========================================================= */
.toast {
    position: fixed;
    left: 50%;
    bottom: max(30px, calc(20px + env(safe-area-inset-bottom)));
    transform: translate(-50%, 20px);
    padding: 13px 22px;
    border-radius: 99px;
    font-size: 14px;
    font-weight: 600;
    color: #fff;
    background: linear-gradient(135deg, #30d158, #128C7E);
    box-shadow: 0 20px 40px -12px rgba(0,0,0,.4);
    opacity: 0;
    visibility: hidden;
    transition:
        opacity .3s ease,
        transform .4s cubic-bezier(.34,1.4,.64,1),
        visibility .3s;
    z-index: 99999;
    display: flex;
    align-items: center;
    gap: 9px;
    pointer-events: none;
    max-width: calc(100vw - 32px);
}
.toast.show {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0);
}
.toast.err { background: linear-gradient(135deg, #ff3b30, #b00020); }

/* =========================================================
   PYTHON loading overlay
   ========================================================= */
.py-loading {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    background: rgba(20,20,22,.9);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    z-index: 20;
    gap: 12px;
    text-align: center;
    padding: 20px;
}
.py-loading .cwm-spinner {
    border-color: rgba(255,255,255,.2);
    border-top-color: #30d158;
    margin: 0 auto 12px;
}

/* =========================================================
   CUSTOM MODAL
   ========================================================= */
.cwm-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 99998;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(0,0,0,.5);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    opacity: 0;
    visibility: hidden;
    transition: opacity .3s ease, visibility .3s ease;
}
.cwm-modal-overlay.show {
    opacity: 1;
    visibility: visible;
}
.cwm-modal {
    width: 100%;
    max-width: 400px;
    padding: 26px 24px 20px;
    border-radius: 24px;
    background: var(--pill-bg);
    backdrop-filter: blur(40px) saturate(200%);
    -webkit-backdrop-filter: blur(40px) saturate(200%);
    box-shadow:
        0 30px 60px -15px var(--glass-shadow),
        inset 0 1px 2px -1px var(--glass-highlight),
        inset 0 0 0 1px var(--glass-border);
    transform: translateY(20px) scale(.95);
    transition: transform .35s cubic-bezier(.34,1.4,.64,1);
    text-align: center;
    color: var(--text-main);
}
.cwm-modal-overlay.show .cwm-modal {
    transform: translateY(0) scale(1);
}
.cwm-modal-icon {
    width: 56px;
    height: 56px;
    border-radius: 18px;
    display: grid;
    place-items: center;
    margin: 0 auto 14px;
    color: #fff;
    background: linear-gradient(135deg, #ff2a5f, #bf5af2);
    box-shadow: 0 14px 30px -12px rgba(191,90,242,.7);
    font-size: 24px;
}
.cwm-modal-icon.warn {
    background: linear-gradient(135deg, #ff9500, #ff3b30);
    box-shadow: 0 14px 30px -12px rgba(255,59,48,.7);
}
.cwm-modal-title {
    font-size: 19px;
    font-weight: 800;
    letter-spacing: -.3px;
    margin: 0 0 6px;
    color: var(--text-main);
}
.cwm-modal-msg {
    font-size: 14px;
    line-height: 1.55;
    color: var(--text-soft);
    margin: 0 0 18px;
}
.cwm-modal-input {
    width: 100%;
    padding: 13px 16px;
    margin-bottom: 18px;
    font-family: inherit;
    font-size: 14.5px;
    color: var(--text-main);
    background: color-mix(in srgb, var(--card-bg) 90%, transparent);
    border: 1px solid var(--card-border);
    border-radius: 14px;
    outline: none;
    transition: border-color .3s, box-shadow .3s;
    text-align: left;
}
.cwm-modal-input:focus {
    border-color: color-mix(in srgb, #007aff 60%, transparent);
    box-shadow: 0 0 0 4px color-mix(in srgb, #007aff 18%, transparent);
}
.cwm-modal-actions { display: flex; gap: 10px; }
.cwm-modal-btn {
    flex: 1;
    padding: 12px 18px;
    border-radius: 14px;
    border: none;
    font-family: inherit;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: transform .25s cubic-bezier(.34,1.4,.64,1), filter .25s;
}
.cwm-modal-btn.ghost {
    color: var(--text-main);
    background: color-mix(in srgb, var(--text-main) 8%, transparent);
    border: 1px solid var(--card-border);
}
.cwm-modal-btn.ghost:hover { background: color-mix(in srgb, var(--text-main) 14%, transparent); }
.cwm-modal-btn.primary {
    color: #fff;
    background: linear-gradient(135deg, #007aff, #bf5af2);
    box-shadow: 0 10px 22px -12px rgba(0,122,255,.75);
}
.cwm-modal-btn.primary.danger {
    background: linear-gradient(135deg, #ff3b30, #b00020);
    box-shadow: 0 10px 22px -12px rgba(255,59,48,.75);
}
.cwm-modal-btn:hover { transform: translateY(-1px); filter: brightness(1.05); }
.cwm-modal-btn:active { transform: scale(.96); }

/* =========================================================
   RESPONSIVE — track + notes
   ========================================================= */
@media (max-width: 640px) {
    .cwm-app { padding: 20px 16px 40px; }
    .cwm-track-grid { grid-template-columns: 1fr; gap: 14px; }
    .cwm-track { padding: 24px 20px 24px; border-radius: 22px; }
    .cwm-track-ic { width: 46px; height: 46px; border-radius: 14px; margin-bottom: 14px; }
    .cwm-track h3 { font-size: 17px; }
    .cwm-track p { font-size: 13px; }
    .cwm-note-nav { gap: 6px; }
    .cwm-note-btn { padding: 9px 15px; font-size: 12.5px; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .cwm-screen, .cwm-track, .cwm-track-ic,
    .cwm-note-btn, .cwm-project-card,
    .ide, .ide-tab, .ide-file, .ide-menu,
    .toast, .cwm-modal {
        animation: none !important;
        transition-duration: .01ms !important;
    }
}
/* =========================================================
   SKILLFORGEX AI PAGE — FINAL CLEAN
   Face animation EXACTLY matches home page (JS-driven)
   No auto animations — blink/look/smile/angry all via JS
   ========================================================= */

/* ---------- BASE ---------- */
html:has(body.ai-page) {
    height: 100%;
    overflow: hidden;
}
body.ai-page {
    background: var(--bg-color);
    color: var(--text-main);
    height: 100dvh;
    margin: 0;
    padding: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, sans-serif;
    -webkit-font-smoothing: antialiased;
    -webkit-tap-highlight-color: transparent;
    overscroll-behavior: none;
}
body.ai-page .bg-mesh {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}

/* ---------- APP ---------- */
.ai-app-container {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    flex: 1;
    width: 100%;
    height: 100%;
    min-height: 0;
    background: transparent;
}

/* ---------- TOPBAR ---------- */
.ai-topbar {
    position: relative;
    z-index: 90;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
    padding-top: max(14px, env(safe-area-inset-top));
    flex-shrink: 0;
    background: transparent;
    border: none;
    box-shadow: none;
    width: 100%;
    box-sizing: border-box;
}

.ai-user-pill {
    position: relative;
    z-index: 95;
    min-width: 0;
    flex-shrink: 1;
}
.ai-user-pill .user-profile {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 6px 14px 6px 6px;
    border-radius: 99px;
    cursor: pointer;
    background: var(--glass-bg);
    backdrop-filter: blur(30px) saturate(200%);
    -webkit-backdrop-filter: blur(30px) saturate(200%);
    box-shadow:
        0 12px 26px -12px var(--glass-shadow),
        inset 0 1px 2px -1px var(--glass-highlight),
        inset 0 0 0 1px var(--glass-border);
    transition: transform .25s cubic-bezier(.34,1.4,.64,1);
    max-width: 100%;
}
.ai-user-pill .user-profile:hover { transform: translateY(-1px); }

.ai-user-pill .user-profile .avatar {
    width: 38px; height: 38px;
    min-width: 38px; min-height: 38px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0; margin: 0;
    font-weight: 800;
    font-size: 16px;
    line-height: 1;
    color: #fff;
    flex-shrink: 0;
    background: linear-gradient(135deg, #ff2a5f, #007aff 55%, #bf5af2);
    box-shadow: 0 6px 16px -6px rgba(0,122,255,.6);
}
.ai-user-pill .user-profile .avatar::after { content: none; }

.ai-user-pill .user-info {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
    min-width: 0;
}
.ai-user-pill .user-name {
    font-size: 13.5px;
    font-weight: 700;
    color: var(--text-main);
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ai-user-pill .user-sub {
    display: block;
    font-size: 10.5px;
    font-weight: 500;
    color: var(--text-soft);
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-top: 1px;
    letter-spacing: 0.1px;
}
.ai-user-pill .chevron {
    font-size: 12px;
    color: var(--text-soft);
    margin-left: 2px;
    flex-shrink: 0;
}

.ai-home-btn {
    flex-shrink: 0;
    width: 46px; height: 46px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    text-decoration: none;
    color: var(--text-main);
    background: var(--glass-bg);
    backdrop-filter: blur(30px) saturate(200%);
    -webkit-backdrop-filter: blur(30px) saturate(200%);
    box-shadow:
        0 12px 26px -12px var(--glass-shadow),
        inset 0 1px 2px -1px var(--glass-highlight),
        inset 0 0 0 1px var(--glass-border);
    transition: transform .3s cubic-bezier(.34,1.4,.64,1), color .3s ease;
}
.ai-home-btn:hover { transform: scale(1.06); color: #007aff; }
.ai-home-btn i { font-size: 18px; }

/* ---------- CHAT VIEWPORT ---------- */
.ai-chat-viewport {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    padding: 8px 16px 4px;
    box-sizing: border-box;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    scrollbar-width: thin;
}
.ai-chat-viewport::-webkit-scrollbar { width: 6px; }
.ai-chat-viewport::-webkit-scrollbar-thumb {
    background: color-mix(in srgb, var(--text-soft) 25%, transparent);
    border-radius: 6px;
}

/* ---------- HERO ---------- */
.ai-hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    flex: 1;
    min-height: 0;
    padding: 16px 10px 30px;
    --face-size: clamp(100px, 22vw, 150px);
}
.ai-hero.hidden { display: none; }

.ai-hero-title {
    font-size: clamp(24px, 5.5vw, 42px);
    font-weight: 800;
    letter-spacing: -1.2px;
    line-height: 1.1;
    margin-bottom: 8px;
    color: var(--text-main);
}
.ai-hero-title .sfx-brand {
    background: linear-gradient(135deg, #ff2a5f, #007aff, #bf5af2);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.ai-hero-title .ai-tag {
    display: inline-block;
    margin-left: 8px;
    padding: 2px 14px;
    border-radius: 99px;
    font-size: .55em;
    font-weight: 800;
    letter-spacing: 1px;
    vertical-align: middle;
    color: #fff;
    background: linear-gradient(135deg, #bf5af2, #007aff);
    box-shadow: 0 8px 20px -8px rgba(191,90,242,.7);
}
.ai-hero-sub {
    font-size: clamp(13px, 2vw, 15px);
    color: var(--text-soft);
    max-width: 460px;
    line-height: 1.55;
    margin: 0 auto 24px;
}

/* =========================================================
   ★★★ FACE — EXACT MATCH WITH HOME PAGE ★★★
   No auto animations. Everything driven by JS classes:
   .blink / .look-left / .look-right / .smile / .angry / .shake
   ========================================================= */
.ai-hero .face {
    position: relative;
    width: var(--face-size);
    height: var(--face-size);
    border-radius: 50%;
    cursor: pointer;
    flex-shrink: 0;
    margin: 0 auto;
    isolation: isolate;

    background:
        radial-gradient(circle at 30% 24%,
            rgba(255,255,255,0.95) 0%, rgba(255,255,255,0.35) 14%, transparent 42%),
        radial-gradient(circle at 72% 82%,
            color-mix(in srgb, var(--blob-2) 35%, transparent) 0%, transparent 58%),
        radial-gradient(circle at 50% 50%,
            color-mix(in srgb, var(--blob-1) 12%, var(--glass-bg)) 0%,
            var(--glass-bg) 100%);

    backdrop-filter: blur(40px) saturate(200%);
    -webkit-backdrop-filter: blur(40px) saturate(200%);

    box-shadow:
        0 44px 70px -22px var(--glass-shadow),
        0 16px 32px -14px var(--glass-shadow),
        inset -14px -20px 34px -12px rgba(0,0,0,0.24),
        inset 14px 16px 30px -12px rgba(255,255,255,0.6),
        inset 0 0 0 1px var(--glass-border),
        inset 0 6px 10px -3px var(--glass-highlight);

    transition: transform .4s cubic-bezier(.34,1.4,.64,1), box-shadow .4s ease;
    animation: faceDrop 1.4s cubic-bezier(.34,1.4,.64,1);
}
@keyframes faceDrop {
    0%   { transform: translateY(-140px) scale(.7); opacity: 0; }
    60%  { transform: translateY(8px) scale(1.04); opacity: 1; }
    100% { transform: translateY(0) scale(1); }
}

.ai-hero .face:hover  { transform: scale(1.06); }
.ai-hero .face:active { transform: scale(0.95); }

.ai-hero .face-inner {
    position: relative;
    width: 100%;
    height: 100%;
    transition: transform .5s cubic-bezier(.34,1.2,.64,1);
    z-index: 2;
}
.ai-hero .face.look-left  .face-inner { transform: translateX(-14px) rotate(-5deg); }
.ai-hero .face.look-right .face-inner { transform: translateX(14px) rotate(5deg); }

.ai-hero .face-shine {
    position: absolute;
    top: 10%; left: 18%;
    width: 34%; height: 24%;
    border-radius: 50%;
    background: radial-gradient(ellipse at center,
        rgba(255,255,255,0.9) 0%, rgba(255,255,255,0) 70%);
    filter: blur(4px);
    pointer-events: none;
    z-index: 3;
}

/* ---- Blush ---- */
.ai-hero .face-blush {
    position: absolute;
    top: calc(var(--face-size) * 0.52);
    width: calc(var(--face-size) * 0.147);
    height: calc(var(--face-size) * 0.093);
    border-radius: 50%;
    background: radial-gradient(ellipse at center,
        rgba(255,90,130,0.55) 0%, rgba(255,90,130,0) 75%);
    opacity: 0;
    transition: opacity .4s ease;
    pointer-events: none;
    z-index: 2;
}
.ai-hero .blush-l { left: calc(var(--face-size) * 0.12); }
.ai-hero .blush-r { right: calc(var(--face-size) * 0.12); }

.ai-hero .face.smile .face-blush,
.ai-hero .face.angry .face-blush,
.ai-hero .face.blush .face-blush { opacity: 1; }

/* ---- Eyes (exact home page behavior) ---- */
.ai-hero .eye {
    position: absolute;
    top: calc(var(--face-size) * 0.32);
    width: calc(var(--face-size) * 0.113);
    height: calc(var(--face-size) * 0.113);
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #555 0%, var(--text-main) 62%);
    box-shadow: inset -2px -2px 3px rgba(0,0,0,0.3);
    transition: all .4s cubic-bezier(.34,1.2,.64,1);
    transform-origin: center;
    z-index: 4;
}
.ai-hero .eye::after {
    content: '';
    position: absolute;
    top: calc(var(--face-size) * 0.02);
    left: calc(var(--face-size) * 0.02);
    width: calc(var(--face-size) * 0.033);
    height: calc(var(--face-size) * 0.033);
    border-radius: 50%;
    background: rgba(255,255,255,.9);
    filter: blur(.4px);
}
.ai-hero .eye-l { left: calc(var(--face-size) * 0.253); }
.ai-hero .eye-r { right: calc(var(--face-size) * 0.253); }

/* Blink — JS toggles .blink on face */
.ai-hero .face.blink .eye {
    transform: scaleY(0.1);
    border-radius: 8px;
}
.ai-hero .face.blink .eye::after { opacity: 0; }

/* Look left/right — JS toggles .look-left / .look-right */
.ai-hero .face.look-left  .eye-l { left: calc(var(--face-size) * 0.213); }
.ai-hero .face.look-left  .eye-r { right: calc(var(--face-size) * 0.293); }
.ai-hero .face.look-right .eye-l { left: calc(var(--face-size) * 0.293); }
.ai-hero .face.look-right .eye-r { right: calc(var(--face-size) * 0.213); }

/* ---- Eyebrows (angry only) ---- */
.ai-hero .eyebrow {
    position: absolute;
    top: calc(var(--face-size) * 0.227);
    width: calc(var(--face-size) * 0.133);
    height: calc(var(--face-size) * 0.02);
    border-radius: 3px;
    background: var(--text-main);
    opacity: 0;
    transition: all .35s cubic-bezier(.34,1.4,.64,1);
    transform-origin: center;
    z-index: 4;
}
.ai-hero .eyebrow-l { left: calc(var(--face-size) * 0.227); transform: rotate(0deg) translateY(-8px); }
.ai-hero .eyebrow-r { right: calc(var(--face-size) * 0.227); transform: rotate(0deg) translateY(-8px); }

.ai-hero .face.angry .eyebrow { opacity: 0.9; }
.ai-hero .face.angry .eyebrow-l { transform: rotate(22deg) translateY(0); }
.ai-hero .face.angry .eyebrow-r { transform: rotate(-22deg) translateY(0); }

/* ---- Mouth (normal / smile / angry) ---- */
.ai-hero .mouth {
    position: absolute;
    bottom: calc(var(--face-size) * 0.253);
    left: 50%;
    transform: translateX(-50%);
    width: calc(var(--face-size) * 0.227);
    height: calc(var(--face-size) * 0.107);
    border-bottom-left-radius: 40px;
    border-bottom-right-radius: 40px;
    border: calc(var(--face-size) * 0.02) solid var(--text-main);
    border-top: none;
    transition: all .5s cubic-bezier(.34,1.4,.64,1);
    z-index: 4;
}

/* Smile — JS toggles .smile */
.ai-hero .face.smile .mouth {
    width: calc(var(--face-size) * 0.36);
    height: calc(var(--face-size) * 0.187);
    bottom: calc(var(--face-size) * 0.2);
    border-bottom-left-radius: 60px;
    border-bottom-right-radius: 60px;
    border-width: calc(var(--face-size) * 0.027);
}

/* Angry — JS toggles .angry */
.ai-hero .face.angry .mouth {
    width: calc(var(--face-size) * 0.28);
    height: calc(var(--face-size) * 0.08);
    bottom: calc(var(--face-size) * 0.28);
    border: none;
    border-top: calc(var(--face-size) * 0.02) solid var(--text-main);
    border-top-left-radius: 60px;
    border-top-right-radius: 60px;
    border-bottom: none;
}

/* ---- Shake — JS toggles .shake on triple-tap ---- */
.ai-hero .face.shake {
    animation: angryShake 0.55s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
}
@keyframes angryShake {
    0%, 100% { transform: translateX(0) rotate(0deg); }
    15%      { transform: translateX(-5px) rotate(-3deg); }
    30%      { transform: translateX(5px)  rotate(3deg); }
    45%      { transform: translateX(-4px) rotate(-2deg); }
    60%      { transform: translateX(4px)  rotate(2deg); }
    75%      { transform: translateX(-2px) rotate(-1deg); }
}

/* ---------- MESSAGES ---------- */
.ai-chat-messages {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
    padding-bottom: 6px;
}
.chat-msg {
    max-width: 88%;
    padding: 12px 18px;
    border-radius: 20px;
    font-size: 14.5px;
    line-height: 1.6;
    word-break: break-word;
    overflow-wrap: anywhere;
    box-sizing: border-box;
    overflow-x: hidden;
    animation: msgIn .35s cubic-bezier(.34,1.2,.64,1);
    backdrop-filter: blur(30px) saturate(180%);
    -webkit-backdrop-filter: blur(30px) saturate(180%);
}
@keyframes msgIn {
    from { opacity: 0; transform: translateY(8px) scale(.98); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
.chat-msg.user {
    align-self: flex-end;
    color: #fff;
    border-bottom-right-radius: 6px;
    background: linear-gradient(135deg, #ff2a5f, #bf5af2 55%, #007aff);
    box-shadow: 0 14px 28px -14px rgba(191,90,242,.6), inset 0 1px 2px rgba(255,255,255,.3);
}
.chat-msg.bot {
    align-self: flex-start;
    color: var(--text-main);
    border-bottom-left-radius: 6px;
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    box-shadow: 0 14px 28px -20px var(--glass-shadow), inset 0 1px 2px -1px var(--glass-highlight);
}
.chat-msg.error-msg {
    color: #ff3b30;
    background: color-mix(in srgb, #ff3b30 10%, var(--card-bg));
    border-color: color-mix(in srgb, #ff3b30 35%, transparent);
}
.chat-msg.bot .msg-content .typing-cursor {
    display: inline-block;
    width: 2px; height: 1em;
    background: currentColor;
    margin-left: 2px;
    vertical-align: text-bottom;
    animation: blinkCursor .9s step-end infinite;
    border-radius: 2px;
}
@keyframes blinkCursor { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }

/* thinking face */
.chat-msg.thinking-msg {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px 10px 12px;
}
.thinking-face {
    position: relative;
    width: 46px; height: 46px;
    border-radius: 50%;
    flex-shrink: 0;
    isolation: isolate;
    background:
        radial-gradient(circle at 30% 24%, rgba(255,255,255,.95) 0%, rgba(255,255,255,.35) 14%, transparent 42%),
        radial-gradient(circle at 72% 82%, color-mix(in srgb, var(--blob-2) 35%, transparent) 0%, transparent 58%),
        radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--blob-1) 12%, var(--glass-bg)) 0%, var(--glass-bg) 100%);
    box-shadow:
        inset -6px -8px 12px -6px rgba(0,0,0,.22),
        inset 6px 6px 12px -6px rgba(255,255,255,.6),
        inset 0 0 0 1px var(--glass-border),
        inset 0 3px 5px -2px var(--glass-highlight);
    animation: thinkWobble 1.6s ease-in-out infinite;
    transform-origin: center bottom;
}
@keyframes thinkWobble {
    0%, 100% { transform: rotate(-6deg) translateY(0); }
    50%      { transform: rotate(6deg) translateY(-2px); }
}
.thinking-face .tf-eye {
    position: absolute;
    top: 17px; width: 6px; height: 6px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #555 0%, var(--text-main) 62%);
    animation: thinkBlink 1.6s ease-in-out infinite;
}
.thinking-face .tf-eye-l { left: 13px; }
.thinking-face .tf-eye-r { right: 13px; }
@keyframes thinkBlink { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(.5); } }
.thinking-face .tf-mouth {
    position: absolute;
    bottom: 12px; left: 50%;
    transform: translateX(-50%);
    width: 12px; height: 6px;
    border-bottom-left-radius: 40px;
    border-bottom-right-radius: 40px;
    border: 2px solid var(--text-main);
    border-top: none;
}
.thinking-face .tf-shine {
    position: absolute;
    top: 12%; left: 18%;
    width: 30%; height: 22%;
    border-radius: 50%;
    background: radial-gradient(ellipse at center, rgba(255,255,255,.9) 0%, rgba(255,255,255,0) 70%);
    filter: blur(2px);
    pointer-events: none;
}
.thinking-text {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--text-soft);
    display: inline-flex;
    align-items: baseline;
    gap: 1px;
}
.thinking-text .dot { animation: dotBounce 1.3s ease-in-out infinite; }
.thinking-text .dot:nth-child(2) { animation-delay: .15s; }
.thinking-text .dot:nth-child(3) { animation-delay: .3s; }
@keyframes dotBounce {
    0%, 60%, 100% { opacity: .25; transform: translateY(0); }
    30%           { opacity: 1;   transform: translateY(-3px); }
}

/* ---------- BOTTOM CONTROLS ---------- */
.ai-bottom-controls {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 8px 14px max(12px, env(safe-area-inset-bottom));
    width: 100%;
    max-width: 820px;
    margin: 0 auto;
    box-sizing: border-box;
    z-index: 5;
    background: transparent;
}

.quick-chips {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding: 2px 0;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
}
.quick-chips::-webkit-scrollbar { display: none; }
.quick-chips .chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: 99px;
    font-size: 12.5px;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    color: var(--text-main);
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    box-shadow: 0 6px 14px -10px var(--glass-shadow);
    transition: all .25s cubic-bezier(.34,1.4,.64,1);
    flex-shrink: 0;
    scroll-snap-align: start;
}
.quick-chips .chip:hover {
    transform: translateY(-2px);
    border-color: color-mix(in srgb, #007aff 45%, transparent);
    background: color-mix(in srgb, #007aff 10%, var(--card-bg));
}
.quick-chips .chip:active { transform: scale(.96); }

.ai-input-box {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 5px 5px 18px;
    border-radius: 99px;
    background: var(--glass-bg);
    backdrop-filter: blur(40px) saturate(200%);
    -webkit-backdrop-filter: blur(40px) saturate(200%);
    box-shadow:
        0 20px 40px -18px var(--glass-shadow),
        inset 0 1px 2px -1px var(--glass-highlight),
        inset 0 -1px 3px -1px var(--glass-caustic),
        inset 0 0 0 1px var(--glass-border);
    transition: box-shadow .3s ease;
    box-sizing: border-box;
    width: 100%;
}
.ai-input-box:focus-within {
    box-shadow:
        0 24px 44px -18px var(--glass-shadow),
        inset 0 1px 2px -1px var(--glass-highlight),
        inset 0 0 0 1px color-mix(in srgb, #007aff 45%, transparent);
}
.ai-input-box input {
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    color: var(--text-main);
    font-family: inherit;
    font-size: 15px;
    font-weight: 500;
    padding: 10px 0;
    min-width: 0;
}
.ai-input-box input::placeholder {
    color: var(--text-soft);
    opacity: .7;
}
.ai-send-btn {
    width: 40px; height: 40px;
    border-radius: 50%;
    border: none;
    display: grid;
    place-items: center;
    color: #fff;
    cursor: pointer;
    flex-shrink: 0;
    background: linear-gradient(135deg, #ff2a5f, #bf5af2 55%, #007aff);
    box-shadow: 0 8px 20px -8px rgba(191,90,242,.7);
    transition: transform .3s cubic-bezier(.34,1.4,.64,1), box-shadow .3s ease;
}
.ai-send-btn:hover {
    transform: scale(1.06);
    box-shadow: 0 12px 26px -8px rgba(191,90,242,.9);
}
.ai-send-btn:active { transform: scale(.94); }
.ai-send-btn:disabled { opacity: .45; cursor: not-allowed; transform: none; }
.ai-send-btn i { font-size: 14px; }

.ai-maintenance {
    display: none;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 10px 16px;
    border-radius: 14px;
    font-size: 13px;
    font-weight: 600;
    color: #ff3b30;
    background: color-mix(in srgb, #ff3b30 10%, var(--card-bg));
    border: 1px solid color-mix(in srgb, #ff3b30 35%, transparent);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    text-align: center;
}
.ai-maintenance.show { display: flex; }

/* ---------- MEDIA ---------- */
.video-container {
    width: 100%;
    aspect-ratio: 16/9;
    margin: 12px 0;
    border-radius: 14px;
    overflow: hidden;
    background: #000;
    box-shadow: 0 10px 30px -12px rgba(0,0,0,.4);
}
.video-container iframe { width: 100%; height: 100%; border: 0; display: block; }

.pdf-container {
    margin: 12px 0;
    border-radius: 14px;
    overflow: hidden;
    background: color-mix(in srgb, var(--card-bg) 90%, transparent);
    border: 1px solid var(--card-border);
}
.pdf-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 14px;
    font-size: 13px;
    font-weight: 700;
    color: var(--text-main);
    background: color-mix(in srgb, var(--text-main) 4%, transparent);
    border-bottom: 1px solid var(--card-border);
}
.pdf-header .pdf-title-text {
    display: flex;
    align-items: center;
    gap: 8px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}
.pdf-header .pdf-icon { color: #ff3b30; flex-shrink: 0; }
.pdf-download-btn {
    padding: 6px 12px;
    border-radius: 8px;
    font-size: 11.5px;
    font-weight: 700;
    color: #fff;
    text-decoration: none;
    background: linear-gradient(135deg, #ff2a5f, #007aff);
    white-space: nowrap;
    flex-shrink: 0;
}
.pdf-preview-iframe { width: 100%; height: 320px; border: 0; display: block; }

.chat-media-img {
    max-width: 100%;
    max-height: 400px;
    border-radius: 12px;
    margin: 8px 0;
    display: block;
    border: 1px solid var(--card-border);
    cursor: pointer;
    transition: transform .25s ease, opacity .25s ease;
    object-fit: contain;
}
.chat-media-img:hover { transform: scale(1.02); opacity: .92; }

.image-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(0,0,0,.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    align-items: center;
    justify-content: center;
    padding: 24px;
    opacity: 0;
    transition: opacity .3s ease;
}
.image-modal.active { display: flex; opacity: 1; }
.image-modal-wrap {
    position: relative;
    max-width: 90%;
    max-height: 88vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}
.image-modal-wrap img {
    max-width: 100%;
    max-height: 75vh;
    border-radius: 14px;
    box-shadow: 0 30px 60px -20px rgba(0,0,0,.8);
    object-fit: contain;
}
.image-modal-close {
    position: absolute;
    top: -42px; right: 0;
    width: 36px; height: 36px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    color: #fff;
    background: rgba(255,255,255,.15);
    border: 1px solid rgba(255,255,255,.2);
    cursor: pointer;
    font-size: 18px;
    transition: background .25s ease;
}
.image-modal-close:hover { background: rgba(255,255,255,.3); }
.image-modal-download {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 22px;
    border-radius: 99px;
    font-size: 13px;
    font-weight: 700;
    color: #fff;
    text-decoration: none;
    background: linear-gradient(135deg, #ff2a5f, #bf5af2 55%, #007aff);
    box-shadow: 0 12px 26px -10px rgba(191,90,242,.7);
}

/* ---------- DROPDOWN ---------- */
.ai-user-dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    width: 300px;
    max-width: calc(100vw - 32px);
    padding: 14px;
    border-radius: 22px;
    flex-direction: column;
    gap: 12px;
    background: var(--pill-bg);
    backdrop-filter: blur(40px) saturate(200%);
    -webkit-backdrop-filter: blur(40px) saturate(200%);
    box-shadow:
        0 30px 60px -15px var(--glass-shadow),
        inset 0 1px 2px -1px var(--glass-highlight),
        inset 0 0 0 1px var(--glass-border);
    z-index: 999;
    box-sizing: border-box;
}
.ai-user-dropdown.active { display: flex; }
.ai-dp-header { padding-bottom: 10px; border-bottom: 1px solid var(--divider); }
.ai-dp-header .dp-name {
    font-size: 13.5px;
    font-weight: 700;
    color: var(--text-main);
    margin-bottom: 2px;
}
.ai-dp-header .dp-email {
    font-size: 11.5px;
    color: var(--text-soft);
    word-break: break-all;
}
.ai-dp-section-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .5px;
    text-transform: uppercase;
    color: var(--text-soft);
}
.ai-dp-section-title .new-chat-btn {
    padding: 4px 10px;
    border-radius: 8px;
    font-size: 10.5px;
    font-weight: 700;
    text-transform: none;
    letter-spacing: 0;
    cursor: pointer;
    color: #007aff;
    background: color-mix(in srgb, #007aff 12%, transparent);
    border: 1px solid color-mix(in srgb, #007aff 35%, transparent);
    font-family: inherit;
    transition: background .25s ease;
}
.ai-dp-section-title .new-chat-btn:hover {
    background: color-mix(in srgb, #007aff 22%, transparent);
}
.chat-history-list {
    max-height: 190px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.chat-history-list::-webkit-scrollbar { width: 4px; }
.chat-history-list::-webkit-scrollbar-thumb {
    background: color-mix(in srgb, var(--text-soft) 30%, transparent);
    border-radius: 4px;
}
.history-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 10px;
    border-radius: 10px;
    cursor: pointer;
    background: color-mix(in srgb, var(--text-main) 4%, transparent);
    border: 1px solid transparent;
    transition: all .25s ease;
}
.history-item:hover,
.history-item.active-chat {
    background: color-mix(in srgb, #007aff 12%, transparent);
    border-color: color-mix(in srgb, #007aff 30%, transparent);
}
.history-item-title {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-main);
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.history-actions { display: flex; gap: 4px; flex-shrink: 0; }
.history-action-btn {
    background: transparent;
    border: none;
    color: var(--text-soft);
    font-size: 10px;
    cursor: pointer;
    padding: 3px 5px;
    border-radius: 5px;
    transition: color .2s ease, background .2s ease;
}
.history-action-btn:hover {
    color: #007aff;
    background: color-mix(in srgb, #007aff 12%, transparent);
}
.history-action-btn.delete:hover { color: #ff3b30; }
.ai-dp-footer { padding-top: 10px; border-top: 1px solid var(--divider); }
.ai-logout-btn {
    width: 100%;
    padding: 10px;
    border-radius: 10px;
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 700;
    cursor: pointer;
    color: #ff3b30;
    background: color-mix(in srgb, #ff3b30 10%, transparent);
    border: 1px solid color-mix(in srgb, #ff3b30 30%, transparent);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all .25s ease;
}
.ai-logout-btn:hover { background: #ff3b30; color: #fff; }

/* =========================================================
   ★ DESKTOP (≥ 780px)
   ========================================================= */
@media (min-width: 780px) {
    .ai-bottom-controls {
        padding: 16px 20px max(22px, env(safe-area-inset-bottom));
        gap: 12px;
        max-width: 860px;
    }
    .ai-input-box {
        padding: 9px 9px 9px 26px;
        box-shadow:
            0 28px 55px -22px var(--glass-shadow),
            inset 0 1px 2px -1px var(--glass-highlight),
            inset 0 -1px 3px -1px var(--glass-caustic),
            inset 0 0 0 1px var(--glass-border);
    }
    .ai-input-box input {
        font-size: 16px;
        padding: 14px 0;
    }
    .ai-input-box input::placeholder { font-size: 16px; }
    .ai-send-btn { width: 48px; height: 48px; }
    .ai-send-btn i { font-size: 16px; }
    .quick-chips .chip { padding: 10px 18px; font-size: 13.5px; }
}

/* ---------- RESPONSIVE ---------- */
@media (max-width: 640px) {
    .ai-topbar { padding: 12px 14px 10px; padding-top: max(12px, env(safe-area-inset-top)); gap: 10px; }
    .ai-user-pill .user-profile { padding: 5px 12px 5px 5px; gap: 9px; }
    .ai-user-pill .user-profile .avatar {
        width: 34px; height: 34px;
        min-width: 34px; min-height: 34px;
        font-size: 15px;
    }
    .ai-user-pill .user-name { font-size: 13px; max-width: 130px; }
    .ai-user-pill .user-sub { font-size: 10px; max-width: 130px; }
    .ai-home-btn { width: 42px; height: 42px; }
    .ai-home-btn i { font-size: 16px; }

    .ai-chat-viewport { padding: 6px 12px 4px; }
    .ai-hero { padding: 14px 10px 24px; }
    .ai-hero-sub { margin-bottom: 18px; }
    .chat-msg { max-width: 92%; padding: 11px 15px; font-size: 14px; border-radius: 18px; }

    .ai-bottom-controls {
        padding: 8px 12px calc(12px + env(safe-area-inset-bottom, 0px));
        gap: 8px;
    }
    .ai-input-box { padding: 5px 5px 5px 15px; }
    .ai-input-box input { font-size: 14px; padding: 9px 0; }
    .ai-send-btn { width: 38px; height: 38px; }
    .ai-send-btn i { font-size: 13px; }

    .ai-user-dropdown {
        width: calc(100vw - 24px);
        max-width: calc(100vw - 24px);
        left: 0;
    }
}

@media (max-width: 380px) {
    .ai-topbar { padding: 10px 12px 8px; padding-top: max(10px, env(safe-area-inset-top)); gap: 8px; }
    .ai-user-pill .user-profile .avatar {
        width: 30px; height: 30px;
        min-width: 30px; min-height: 30px;
        font-size: 13px;
    }
    .ai-user-pill .user-name { font-size: 12px; max-width: 100px; }
    .ai-user-pill .user-sub { font-size: 9.5px; max-width: 100px; }
    .ai-home-btn { width: 38px; height: 38px; }
    .ai-home-btn i { font-size: 15px; }
    .quick-chips .chip { font-size: 11px; padding: 6px 11px; }
    .ai-input-box { padding: 4px 4px 4px 14px; }
    .ai-input-box input { font-size: 13.5px; padding: 8px 0; }
    .ai-send-btn { width: 36px; height: 36px; }
}

/* Short height */
@media (max-height: 640px) {
    .ai-hero { justify-content: flex-start; padding: 10px 8px 16px; }
    .ai-hero-sub { margin-bottom: 12px; }
    .ai-bottom-controls { padding-top: 6px; gap: 6px; }
}

/* Landscape */
@media (orientation: landscape) and (max-height: 500px) {
    .ai-topbar { padding: 6px 12px; padding-top: max(6px, env(safe-area-inset-top)); }
    .ai-hero { padding: 6px 8px 8px; }
    .ai-chat-viewport { padding: 4px 12px 4px; }
    .ai-bottom-controls { padding: 4px 12px max(6px, env(safe-area-inset-bottom)); gap: 4px; }
    .quick-chips .chip { padding: 5px 10px; font-size: 11px; }
    .ai-input-box { padding: 3px 3px 3px 14px; }
    .ai-input-box input { padding: 6px 0; font-size: 13.5px; }
    .ai-send-btn { width: 34px; height: 34px; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .ai-hero .face,
    .ai-hero .face.shake,
    .thinking-face,
    .chat-msg {
        animation: none !important;
        transition-duration: .01ms !important;
    }
}
/* =========================================================
   ★ NEWS SYSTEM (Home preview + Full page + Detail)
   Uses style.css root variables
   ========================================================= */

/* ============ HOME — NEWS PREVIEW SECTION ============ */
.news-home {
    margin-top: 90px;
    scroll-margin-top: 120px;
    animation: fadeUp .9s .2s both cubic-bezier(.34,1.2,.64,1);
}

.news-home-head {
    text-align: center;
    margin-bottom: 42px;
}

/* ★ CHANGED — Horizontal scroll (flex) */
.news-home-grid {
    display: flex;
    gap: 18px;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 4px 0 22px;
    margin-bottom: 24px;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: color-mix(in srgb, var(--text-soft) 30%, transparent) transparent;
}

.news-home-grid::-webkit-scrollbar {
    height: 6px;
}

.news-home-grid::-webkit-scrollbar-track {
    background: color-mix(in srgb, var(--text-soft) 10%, transparent);
    border-radius: 99px;
}

.news-home-grid::-webkit-scrollbar-thumb {
    background: color-mix(in srgb, var(--text-soft) 30%, transparent);
    border-radius: 99px;
    transition: background .3s ease;
}

.news-home-grid::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(90deg, #ff2a5f, #bf5af2, #007aff);
}

/* ★ CHANGED — Card size inside horizontal scroll */
.news-home-grid > .news-card,
.news-home-grid > .news-skel {
    flex: 0 0 340px;
    min-width: 340px;
    max-width: 340px;
    scroll-snap-align: start;
}

/* ★ CHANGED — Empty message takes full width */
.news-home-grid > .news-empty {
    flex: 1 0 100%;
    min-width: 100%;
}

/* ============ NEWS CARD (shared home + full page) ============ */
.news-card {
    position: relative;
    display: flex;
    flex-direction: column;
    border-radius: 24px;
    overflow: hidden;
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    backdrop-filter: blur(30px) saturate(180%);
    -webkit-backdrop-filter: blur(30px) saturate(180%);
    box-shadow:
        0 20px 40px -22px var(--glass-shadow),
        inset 0 1px 2px -1px var(--glass-highlight);
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    isolation: isolate;
    transition:
        transform .5s cubic-bezier(.34,1.4,.64,1),
        box-shadow .4s ease,
        border-color .4s ease;
    animation: newsCardDrop .8s var(--delay, 0s) both cubic-bezier(.34,1.4,.64,1);
}

@keyframes newsCardDrop {
    0%   { opacity: 0; transform: translateY(30px) scale(.96); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}

.news-card::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 24px;
    background: radial-gradient(circle at 100% 0%,
        color-mix(in srgb, var(--accent, #007aff) 22%, transparent),
        transparent 60%);
    opacity: 0;
    transition: opacity .4s ease;
    pointer-events: none;
}

.news-card:hover {
    transform: translateY(-8px) scale(1.015);
    border-color: color-mix(in srgb, var(--accent, #007aff) 45%, var(--card-border));
    box-shadow:
        0 40px 70px -25px var(--glass-shadow),
        0 0 0 1px color-mix(in srgb, var(--accent, #007aff) 30%, transparent),
        inset 0 1px 2px -1px var(--glass-highlight);
}
.news-card:hover::after { opacity: 1; }

.news-card-img {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 10;
    background: linear-gradient(135deg, #3b82f6, #8b5cf6);
    overflow: hidden;
}

.news-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 1s cubic-bezier(.34,1.2,.64,1);
}

.news-card:hover .news-card-img img {
    transform: scale(1.08);
}

.news-card-cat {
    position: absolute;
    top: 14px;
    left: 14px;
    padding: 6px 12px;
    border-radius: 99px;
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: .6px;
    text-transform: uppercase;
    color: #fff;
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--accent, #007aff) 90%, transparent),
        color-mix(in srgb, var(--accent, #007aff) 60%, transparent));
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    box-shadow: 0 8px 18px -8px rgba(0,0,0,.4);
    z-index: 2;
}

.news-card-body {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 20px 20px 22px;
    flex: 1;
    z-index: 1;
}

.news-card-title {
    font-size: 16.5px;
    font-weight: 800;
    letter-spacing: -.3px;
    line-height: 1.35;
    color: var(--text-main);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.news-card-desc {
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--text-soft);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.news-card-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: auto;
    padding-top: 12px;
    border-top: 1px dashed color-mix(in srgb, var(--text-soft) 25%, transparent);
    font-size: 12px;
    color: var(--text-soft);
    font-weight: 600;
}

.news-card-read {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    font-weight: 800;
    color: var(--accent, #007aff);
    transition: gap .3s cubic-bezier(.34,1.4,.64,1);
}
.news-card:hover .news-card-read { gap: 10px; }

.news-card-read svg {
    transition: transform .35s cubic-bezier(.34,1.4,.64,1);
}
.news-card:hover .news-card-read svg { transform: translateX(3px); }

/* ============ VIEW ALL CTA ============ */
.news-home-cta {
    display: flex;
    justify-content: center;
    margin-top: 10px;
}

.news-view-all-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 13px 24px;
    border-radius: 99px;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: -.2px;
    text-decoration: none;
    color: #fff;
    background: linear-gradient(135deg, #ff2a5f 0%, #bf5af2 55%, #007aff 100%);
    background-size: 200% 200%;
    box-shadow:
        0 18px 34px -14px rgba(191,90,242,.65),
        inset 0 1px 2px rgba(255,255,255,.35);
    transition:
        transform .4s cubic-bezier(.34,1.4,.64,1),
        box-shadow .4s ease,
        background-position .6s ease;
}
.news-view-all-btn:hover {
    transform: translateY(-3px);
    background-position: 100% 50%;
    box-shadow:
        0 24px 44px -16px rgba(191,90,242,.85),
        inset 0 1px 2px rgba(255,255,255,.45);
}
.news-view-all-btn:active { transform: translateY(-1px) scale(.98); }
.news-view-all-btn svg { transition: transform .4s cubic-bezier(.34,1.4,.64,1); }
.news-view-all-btn:hover svg { transform: translateX(4px); }

/* ============ EMPTY (home) ============ */
.news-empty {
    grid-column: 1 / -1;
    text-align: center;
    padding: 50px 24px;
    border-radius: 24px;
    background: var(--card-bg);
    border: 1px dashed var(--card-border);
    color: var(--text-soft);
    font-size: 14px;
}
.news-empty svg {
    color: var(--text-soft);
    opacity: .5;
    margin-bottom: 12px;
}
.news-empty p { margin: 4px 0; }

/* ============ SKELETON LOADER ============ */
.news-skel {
    border-radius: 24px;
    overflow: hidden;
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    position: relative;
}
.news-skel-img {
    aspect-ratio: 16 / 10;
    background: linear-gradient(90deg,
        color-mix(in srgb, var(--text-soft) 12%, transparent) 25%,
        color-mix(in srgb, var(--text-soft) 20%, transparent) 50%,
        color-mix(in srgb, var(--text-soft) 12%, transparent) 75%);
    background-size: 200% 100%;
    animation: newsShimmer 1.4s infinite;
}
.news-skel-body { padding: 20px; display: flex; flex-direction: column; gap: 12px; }
.news-skel-line {
    height: 12px;
    border-radius: 6px;
    background: linear-gradient(90deg,
        color-mix(in srgb, var(--text-soft) 12%, transparent) 25%,
        color-mix(in srgb, var(--text-soft) 20%, transparent) 50%,
        color-mix(in srgb, var(--text-soft) 12%, transparent) 75%);
    background-size: 200% 100%;
    animation: newsShimmer 1.4s infinite;
}
.news-skel-line.tall { height: 18px; width: 85%; }
.news-skel-line.short { width: 55%; }

@keyframes newsShimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ============ NEWS PAGE — FULL FEED ============ */
.news-page {
    max-width: 1180px;
    margin: 0 auto;
    padding: 40px 24px 80px;
}

.news-page-hero {
    text-align: center;
    padding-top: 20px;
    margin-bottom: 40px;
    animation: fadeUp .8s both cubic-bezier(.34,1.2,.64,1);
}
.news-page-hero h1 {
    font-size: clamp(28px, 5vw, 48px);
    font-weight: 800;
    letter-spacing: -1.2px;
    line-height: 1.1;
    margin: 14px 0 12px;
    color: var(--text-main);
}
.news-page-hero p {
    font-size: clamp(14px, 2vw, 17px);
    color: var(--text-soft);
    max-width: 560px;
    margin: 0 auto;
    line-height: 1.6;
}

/* ============ CATEGORY FILTER CHIPS ============ */
.news-filters {
    display: flex;
    gap: 8px;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 32px;
    animation: fadeUp .8s .15s both cubic-bezier(.34,1.2,.64,1);
}

.news-filter {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border-radius: 99px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    color: var(--icon-color);
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    cursor: pointer;
    transition:
        transform .3s cubic-bezier(.34,1.4,.64,1),
        color .3s ease,
        background .3s ease,
        border-color .3s ease,
        box-shadow .3s ease;
}
.news-filter:hover {
    color: var(--icon-active);
    transform: translateY(-2px);
}
.news-filter.is-active {
    color: #fff;
    background: linear-gradient(135deg, #ff2a5f, #bf5af2 55%, #007aff);
    border-color: transparent;
    box-shadow: 0 14px 28px -14px rgba(191,90,242,.7);
}
.news-filter:active { transform: scale(.97); }

.news-filter-count {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 99px;
    font-size: 10.5px;
    font-weight: 800;
    background: color-mix(in srgb, currentColor 18%, transparent);
}
.news-filter.is-active .news-filter-count {
    background: rgba(255,255,255,.25);
}

/* ============ FEED GRID ============ */
.news-feed-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 20px;
}

/* ============ NEWS DETAIL — Full view ============ */
.news-detail {
    max-width: 860px;
    margin: 0 auto;
    padding: 30px 24px 80px;
}

.news-back-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border-radius: 99px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    color: var(--text-main);
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    margin-bottom: 26px;
    transition:
        transform .3s cubic-bezier(.34,1.4,.64,1),
        box-shadow .3s ease;
    animation: fadeUp .6s both cubic-bezier(.34,1.2,.64,1);
}
.news-back-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 24px -12px var(--glass-shadow);
}
.news-back-btn svg { transition: transform .35s cubic-bezier(.34,1.4,.64,1); }
.news-back-btn:hover svg { transform: translateX(-3px); }

/* Hero */
.news-detail-hero {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: 28px;
    overflow: hidden;
    margin-bottom: 30px;
    background: linear-gradient(135deg, #3b82f6, #8b5cf6);
    box-shadow:
        0 40px 70px -30px var(--glass-shadow),
        inset 0 0 0 1px var(--card-border);
    animation: newsHeroIn .9s cubic-bezier(.34,1.2,.64,1) both;
}

@keyframes newsHeroIn {
    0%   { opacity: 0; transform: scale(.96) translateY(20px); }
    100% { opacity: 1; transform: scale(1) translateY(0); }
}

.news-detail-hero img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.news-detail-hero::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 50%, rgba(0,0,0,.5) 100%);
    pointer-events: none;
}

.news-detail-cat {
    position: absolute;
    top: 20px;
    left: 20px;
    padding: 8px 16px;
    border-radius: 99px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .8px;
    text-transform: uppercase;
    color: #fff;
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--accent, #007aff) 90%, transparent),
        color-mix(in srgb, var(--accent, #007aff) 60%, transparent));
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    box-shadow: 0 12px 24px -10px rgba(0,0,0,.5);
    z-index: 2;
}

/* Header */
.news-detail-head {
    animation: fadeUp .8s .2s both cubic-bezier(.34,1.2,.64,1);
    margin-bottom: 30px;
}

.news-detail-title {
    font-size: clamp(24px, 4vw, 38px);
    font-weight: 800;
    letter-spacing: -.8px;
    line-height: 1.15;
    margin-bottom: 14px;
    color: var(--text-main);
}

.news-detail-meta {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    font-size: 13px;
    color: var(--text-soft);
    font-weight: 600;
    padding-bottom: 22px;
    border-bottom: 1px solid var(--divider);
}

.news-detail-meta-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.news-detail-meta-item svg { opacity: .7; }

/* Description */
.news-detail-desc {
    font-size: 16.5px;
    line-height: 1.75;
    color: var(--text-soft);
    margin-bottom: 34px;
    padding: 20px 24px;
    border-radius: 20px;
    background: color-mix(in srgb, var(--card-bg) 80%, transparent);
    border-left: 4px solid var(--accent, #007aff);
    animation: fadeUp .8s .3s both cubic-bezier(.34,1.2,.64,1);
}

/* Sections (image + text pairs) */
.news-detail-sections {
    display: flex;
    flex-direction: column;
    gap: 34px;
    margin-bottom: 40px;
}

.news-section {
    display: flex;
    flex-direction: column;
    gap: 20px;
    animation: fadeUp .8s .4s both cubic-bezier(.34,1.2,.64,1);
}

.news-section-img {
    width: 100%;
    border-radius: 22px;
    overflow: hidden;
    background: linear-gradient(135deg, #3b82f6, #8b5cf6);
    box-shadow:
        0 30px 50px -25px var(--glass-shadow),
        inset 0 0 0 1px var(--card-border);
}
.news-section-img img {
    width: 100%;
    height: auto;
    display: block;
}

.news-section-text {
    font-size: 16px;
    line-height: 1.85;
    color: var(--text-main);
    white-space: pre-wrap;
    word-wrap: break-word;
    padding: 0 4px;
}
.news-section-text:empty { display: none; }

/* Actions */
.news-detail-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    padding-top: 26px;
    border-top: 1px solid var(--divider);
    animation: fadeUp .8s .5s both cubic-bezier(.34,1.2,.64,1);
}

.news-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 24px;
    border-radius: 16px;
    font-family: inherit;
    font-size: 14.5px;
    font-weight: 800;
    letter-spacing: -.2px;
    text-decoration: none;
    cursor: pointer;
    transition:
        transform .3s cubic-bezier(.34,1.4,.64,1),
        box-shadow .35s ease,
        background-position .5s ease;
}

.news-action-btn.primary {
    flex: 1;
    min-width: 220px;
    justify-content: center;
    color: #fff;
    background: linear-gradient(135deg, #ff2a5f 0%, #bf5af2 55%, #007aff 100%);
    background-size: 200% 200%;
    box-shadow:
        0 18px 34px -14px rgba(191,90,242,.65),
        inset 0 1px 2px rgba(255,255,255,.35);
    border: none;
}
.news-action-btn.primary:hover {
    transform: translateY(-3px);
    background-position: 100% 50%;
    box-shadow:
        0 24px 44px -16px rgba(191,90,242,.85),
        inset 0 1px 2px rgba(255,255,255,.45);
}

.news-action-btn.ghost {
    color: var(--text-main);
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}
.news-action-btn.ghost:hover {
    transform: translateY(-3px);
    background: color-mix(in srgb, var(--text-main) 8%, var(--card-bg));
    box-shadow: 0 14px 28px -16px var(--glass-shadow);
}
.news-action-btn:active { transform: translateY(-1px) scale(.98); }

/* Detail: loading / not-found */
.news-detail-state {
    text-align: center;
    padding: 80px 24px;
    color: var(--text-soft);
}
.news-detail-state svg {
    opacity: .35;
    margin-bottom: 18px;
    animation: newsSpinSlow 2s linear infinite;
}
.news-detail-state h2 {
    font-size: 22px;
    font-weight: 800;
    color: var(--text-main);
    margin-bottom: 8px;
}
.news-detail-state p { font-size: 14px; margin-bottom: 20px; }

@keyframes newsSpinSlow { to { transform: rotate(360deg); } }

/* ============ RESPONSIVE ============ */
@media (max-width: 780px) {
    .news-home { margin-top: 70px; }
    .news-home-head { margin-bottom: 30px; }

    /* ★ CHANGED — Mobile card sizes for horizontal scroll */
    .news-home-grid { gap: 14px; padding: 4px 0 18px; margin-bottom: 18px; }
    .news-home-grid > .news-card,
    .news-home-grid > .news-skel {
        flex: 0 0 260px;
        min-width: 260px;
        max-width: 260px;
    }

    .news-page { padding: 26px 16px 60px; }
    .news-page-hero { margin-bottom: 30px; }
    .news-filters { gap: 6px; }
    .news-filter { padding: 8px 14px; font-size: 12px; }

    .news-feed-grid { grid-template-columns: 1fr; gap: 14px; }

    .news-detail { padding: 22px 16px 60px; }
    .news-detail-hero { border-radius: 22px; margin-bottom: 24px; }
    .news-detail-desc { font-size: 15px; padding: 16px 18px; border-radius: 16px; }
    .news-section-img { border-radius: 18px; }
    .news-section-text { font-size: 15px; line-height: 1.75; }
    .news-detail-actions { flex-direction: column; }
    .news-action-btn { width: 100%; justify-content: center; }
    .news-action-btn.primary { min-width: 0; }
}

@media (max-width: 460px) {
    .news-filters {
        justify-content: flex-start;
        overflow-x: auto;
        flex-wrap: nowrap;
        padding-bottom: 6px;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }
    .news-filters::-webkit-scrollbar { display: none; }
    .news-filter { flex-shrink: 0; }

    .news-detail-title { font-size: 22px; }
    .news-detail-meta { gap: 10px; font-size: 12px; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .news-card,
    .news-home,
    .news-page-hero,
    .news-filters,
    .news-back-btn,
    .news-detail-hero,
    .news-detail-head,
    .news-detail-desc,
    .news-section,
    .news-detail-actions,
    .news-view-all-btn,
    .news-card-img img {
        animation: none !important;
        transition-duration: .01ms !important;
    }
}

/* ★ Bold variant for emphasized titles */
.news-bold {
    font-weight: 900 !important;
    letter-spacing: -0.5px;
    display: inline-block;
}

/* Gradient span inside the bold title */
.news-bold .grad {
    font-weight: 900;
}
/* =========================================================
   ★ NEWS COUNTDOWN — Home badge + Detail view
   (uses style.css root variables)
   ========================================================= */

/* ============ HOME CARD — Small countdown badge ============ */
.news-card-cd {
    position: absolute;
    top: 14px;
    right: 14px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 10px;
    border-radius: 99px;
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: .3px;
    color: #fff;
    background: linear-gradient(135deg,
        var(--blob-3),
        var(--blob-1));
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    box-shadow: 0 8px 18px -8px color-mix(in srgb, var(--blob-3) 60%, transparent);
    z-index: 3;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    animation: cdPulse 2s ease-in-out infinite;
}

@keyframes cdPulse {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 8px 18px -8px color-mix(in srgb, var(--blob-3) 60%, transparent);
    }
    50% {
        transform: scale(1.03);
        box-shadow: 0 10px 22px -8px color-mix(in srgb, var(--blob-1) 80%, transparent);
    }
}

.news-card-cd svg {
    width: 11px;
    height: 11px;
    flex-shrink: 0;
}

/* Urgent — keep hardcoded red (semantic, not in root) */
.news-card-cd.urgent {
    background: linear-gradient(135deg, #ff3b30, #b00020);
    box-shadow: 0 8px 18px -8px rgba(255, 59, 48, .7);
    animation: cdUrgent 1s ease-in-out infinite;
}

@keyframes cdUrgent {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.05); }
}

/* ============ FULL NEWS — Big countdown box ============ */
.news-countdown {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 18px 22px;
    border-radius: 20px;
    margin-bottom: 26px;
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--blob-3) 14%, transparent),
        color-mix(in srgb, var(--blob-1) 14%, transparent));
    border: 1px solid color-mix(in srgb, var(--blob-3) 40%, transparent);
    box-shadow:
        0 20px 40px -22px var(--glass-shadow),
        inset 0 1px 2px -1px var(--glass-highlight);
    animation: fadeUp .8s .25s both cubic-bezier(.34, 1.2, .64, 1);
    position: relative;
    overflow: hidden;
}

.news-countdown::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 100% 0%,
        color-mix(in srgb, var(--blob-3) 30%, transparent), transparent 60%);
    pointer-events: none;
}

.news-countdown .nc-icon {
    width: 48px;
    height: 48px;
    border-radius: 15px;
    display: grid;
    place-items: center;
    color: #fff;
    background: linear-gradient(135deg, var(--blob-3), var(--blob-1));
    flex-shrink: 0;
    box-shadow: 0 12px 24px -10px color-mix(in srgb, var(--blob-3) 80%, transparent);
    position: relative;
    z-index: 1;
    animation: cdIconSpin 4s linear infinite;
}

@keyframes cdIconSpin {
    0%   { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.news-countdown .nc-icon svg {
    width: 22px;
    height: 22px;
    animation: cdIconCounter 4s linear infinite;
}

@keyframes cdIconCounter {
    0%   { transform: rotate(0deg); }
    100% { transform: rotate(-360deg); }
}

.news-countdown .nc-body {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    flex: 1;
    position: relative;
    z-index: 1;
}

.news-countdown .nc-label {
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--text-soft);
}

.news-countdown .nc-time {
    font-size: 24px;
    font-weight: 800;
    letter-spacing: -0.5px;
    color: var(--text-main);
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
}

.news-countdown .nc-time .nc-unit {
    font-size: 12px;
    font-weight: 700;
    color: var(--text-soft);
    margin-left: 3px;
    letter-spacing: 0;
}

.news-countdown .nc-end {
    font-size: 12px;
    font-weight: 700;
    color: var(--text-soft);
    letter-spacing: 0.2px;
    margin-top: 2px;
}

/* Urgent — hardcoded red (semantic) */
.news-countdown.urgent {
    background: linear-gradient(135deg,
        rgba(255, 59, 48, 0.15),
        rgba(255, 42, 95, 0.18));
    border-color: rgba(255, 59, 48, 0.55);
    animation: cdUrgentBox 1.6s ease-in-out infinite;
}

@keyframes cdUrgentBox {
    0%, 100% { box-shadow: 0 20px 40px -22px var(--glass-shadow), inset 0 1px 2px -1px var(--glass-highlight); }
    50%      { box-shadow: 0 20px 40px -22px rgba(255, 59, 48, .5), inset 0 1px 2px -1px var(--glass-highlight); }
}

.news-countdown.urgent .nc-icon {
    background: linear-gradient(135deg, #ff3b30, #b00020);
    box-shadow: 0 12px 24px -10px rgba(255, 59, 48, .9);
}

.news-countdown.urgent .nc-time { color: #ff3b30; }

/* Expired — gray (not in root) */
.news-countdown.expired {
    background: color-mix(in srgb, var(--card-bg) 80%, transparent);
    border-color: var(--card-border);
    opacity: 0.7;
}

.news-countdown.expired .nc-icon {
    background: linear-gradient(135deg, #6b7280, #4b5563);
    animation: none;
}
.news-countdown.expired .nc-icon svg { animation: none; }
.news-countdown.expired .nc-time { color: var(--text-soft); }

/* =========================================================
   ★ YOUTUBE VIDEO SECTION
   ========================================================= */
.news-section-video {
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: 22px;
    overflow: hidden;
    background: #000;
    box-shadow:
        0 30px 50px -25px var(--glass-shadow),
        inset 0 0 0 1px var(--card-border);
}

.news-section-video iframe {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}

/* =========================================================
   ★ PDF SECTION — red (semantic, not in root)
   ========================================================= */
.news-section-pdf {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 20px;
    border-radius: 18px;
    background: color-mix(in srgb, #ef4444 10%, var(--card-bg));
    border: 1px solid color-mix(in srgb, #ef4444 35%, var(--card-border));
    box-shadow:
        0 14px 30px -20px var(--glass-shadow),
        inset 0 1px 2px -1px var(--glass-highlight);
}

.news-section-pdf .ns-pdf-ic {
    width: 46px;
    height: 46px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    color: #fff;
    background: linear-gradient(135deg, #ef4444, #b00020);
    flex-shrink: 0;
    box-shadow: 0 10px 22px -10px rgba(239, 68, 68, .8);
}

.news-section-pdf .ns-pdf-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.news-section-pdf .ns-pdf-label {
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: .8px;
    text-transform: uppercase;
    color: #ef4444;
}

.news-section-pdf .ns-pdf-name {
    font-size: 14.5px;
    font-weight: 700;
    color: var(--text-main);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.news-section-pdf .ns-pdf-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 16px;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 800;
    color: #fff;
    text-decoration: none;
    background: linear-gradient(135deg, #ef4444, #b00020);
    box-shadow: 0 10px 22px -12px rgba(239, 68, 68, .8);
    flex-shrink: 0;
    transition: transform .25s cubic-bezier(.34,1.4,.64,1);
}

.news-section-pdf .ns-pdf-btn:hover {
    transform: translateY(-2px);
}

.news-section-pdf .ns-pdf-btn:active {
    transform: scale(.96);
}

/* =========================================================
   📱 MOBILE — Countdown + sections
   ========================================================= */
@media (max-width: 640px) {
    .news-card-cd {
        padding: 4px 9px;
        font-size: 9.5px;
        gap: 4px;
        top: 12px;
        right: 12px;
    }
    .news-card-cd svg { width: 10px; height: 10px; }

    .news-countdown {
        padding: 14px 16px;
        gap: 12px;
        border-radius: 16px;
        margin-bottom: 22px;
    }
    .news-countdown .nc-icon {
        width: 42px;
        height: 42px;
        border-radius: 13px;
    }
    .news-countdown .nc-icon svg { width: 18px; height: 18px; }
    .news-countdown .nc-time { font-size: 19px; }
    .news-countdown .nc-time .nc-unit { font-size: 11px; }
    .news-countdown .nc-label { font-size: 9.5px; letter-spacing: .8px; }
    .news-countdown .nc-end { font-size: 11px; }

    .news-section-video { border-radius: 18px; }

    .news-section-pdf {
        padding: 12px 14px;
        gap: 10px;
        border-radius: 16px;
    }
    .news-section-pdf .ns-pdf-ic {
        width: 40px;
        height: 40px;
        border-radius: 12px;
    }
    .news-section-pdf .ns-pdf-ic svg { width: 18px; height: 18px; }
    .news-section-pdf .ns-pdf-name { font-size: 13px; }
    .news-section-pdf .ns-pdf-btn {
        padding: 8px 12px;
        font-size: 12px;
        gap: 4px;
    }
    .news-section-pdf .ns-pdf-btn svg { width: 12px; height: 12px; }
}

/* =========================================================
   🎬 REDUCED MOTION
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
    .news-card-cd,
    .news-countdown,
    .news-countdown .nc-icon,
    .news-countdown .nc-icon svg {
        animation: none !important;
    }
}
/* =========================================================
   ★ VIEWS + LIKES — Home card + Detail view (FULL FIX)
   ========================================================= */

/* ---------------------------------------------------------
   1. HOME CARD FOOTER (Views + Date)
   --------------------------------------------------------- */
.news-card-foot {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
    width: 100% !important;
    margin-top: auto !important;
    padding-top: 12px !important;
    border-top: 1px dashed color-mix(in srgb, var(--text-soft) 25%, transparent) !important;
    font-size: 12px !important;
    color: var(--text-soft) !important;
    font-weight: 600 !important;
}

.news-card-foot .ncf-left {
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
    flex-wrap: wrap !important;
}

.news-card-foot .ncf-date {
    font-size: 12px !important;
    color: var(--text-soft) !important;
    white-space: nowrap !important;
}

.news-card-foot .ncf-views {
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    padding: 4px 10px !important;
    border-radius: 99px !important;
    font-size: 11.5px !important;
    font-weight: 700 !important;
    color: var(--text-soft) !important;
    background: color-mix(in srgb, var(--text-main) 8%, transparent) !important;
    transition: all 0.3s ease !important;
    font-variant-numeric: tabular-nums !important;
    white-space: nowrap !important;
}

.news-card-foot .ncf-views svg {
    width: 13px !important;
    height: 13px !important;
    opacity: 0.8 !important;
    stroke: currentColor !important;
}

.news-card:hover .ncf-views {
    color: var(--text-main) !important;
    background: color-mix(in srgb, var(--text-main) 14%, transparent) !important;
}

/* ---------------------------------------------------------
   2. DETAIL VIEW META (Views + Like Right Side)
   --------------------------------------------------------- */
.news-detail-meta {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: wrap !important;
    gap: 16px !important;
    padding-bottom: 22px !important;
    border-bottom: 1px solid var(--divider) !important;
}

.news-detail-meta .ndm-left {
    display: inline-flex !important;
    align-items: center !important;
    gap: 16px !important;
    flex-wrap: wrap !important;
}

.news-detail-meta .ndm-right {
    display: inline-flex !important;
    align-items: center !important;
    gap: 12px !important;
    flex-shrink: 0 !important;
}

/* --- Detail Views Pill --- */
.ndm-views {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 8px 14px !important;
    border-radius: 99px !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    color: var(--text-soft) !important;
    background: color-mix(in srgb, var(--text-main) 6%, transparent) !important;
    border: 1px solid var(--card-border) !important;
    font-variant-numeric: tabular-nums !important;
    transition: all 0.3s ease !important;
}

.ndm-views svg {
    width: 15px !important;
    height: 15px !important;
    opacity: 0.8 !important;
}

.ndm-views:hover {
    color: var(--text-main) !important;
    background: color-mix(in srgb, var(--text-main) 12%, transparent) !important;
}

/* ---------------------------------------------------------
   3. DETAIL LIKE BUTTON
   --------------------------------------------------------- */
.ndm-like {
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 8px 16px 8px 12px !important;
    border-radius: 99px !important;
    border: 1px solid var(--card-border) !important;
    background: color-mix(in srgb, var(--text-main) 6%, transparent) !important;
    color: var(--text-soft) !important;
    font-family: inherit !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    cursor: pointer !important;
    overflow: visible !important;
    transition: all 0.3s cubic-bezier(0.34, 1.4, 0.64, 1) !important;
    font-variant-numeric: tabular-nums !important;
    white-space: nowrap !important;
    outline: none !important;
}

.ndm-like:hover {
    color: #ff2a5f !important;
    border-color: color-mix(in srgb, #ff2a5f 45%, transparent) !important;
    background: color-mix(in srgb, #ff2a5f 10%, transparent) !important;
}

.ndm-like:active {
    transform: scale(0.94) !important;
}

/* --- Heart Icon --- */
.ndm-like .ndm-heart {
    position: relative !important;
    display: inline-grid !important;
    place-items: center !important;
    width: 20px !important;
    height: 20px !important;
    flex-shrink: 0 !important;
}

.ndm-like .ndm-heart > svg {
    width: 20px !important;
    height: 20px !important;
    display: block !important;
    transition: transform 0.35s cubic-bezier(0.34, 1.6, 0.64, 1), fill 0.3s ease !important;
    fill: transparent !important;
    stroke: currentColor !important;
    stroke-width: 2.2 !important;
}

/* --- Liked State --- */
.ndm-like.liked {
    color: #fff !important;
    border-color: transparent !important;
    background: linear-gradient(135deg, #ff2a5f, #bf5af2) !important;
    box-shadow: 0 12px 24px -10px rgba(255, 42, 95, 0.65), inset 0 1px 2px rgba(255, 255, 255, 0.35) !important;
}

.ndm-like.liked .ndm-heart > svg {
    fill: #fff !important;
    stroke: #fff !important;
    animation: heartPop 0.55s cubic-bezier(0.34, 1.6, 0.64, 1) !important;
}

@keyframes heartPop {
    0% { transform: scale(1); }
    35% { transform: scale(1.55) rotate(-12deg); }
    60% { transform: scale(0.9) rotate(6deg); }
    100% { transform: scale(1) rotate(0deg); }
}

/* --- Particle Burst Animation --- */
.ndm-like .ndm-heart .ndm-particle {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) scale(0) !important;
    font-size: 12px !important;
    line-height: 1 !important;
    color: var(--c, #ff2a5f) !important;
    pointer-events: none !important;
    user-select: none !important;
    animation: particleBurst var(--dur, 0.9s) cubic-bezier(0.2, 0.7, 0.3, 1) var(--delay, 0s) forwards !important;
    z-index: 5 !important;
}

@keyframes particleBurst {
    0% { opacity: 1; transform: translate(-50%, -50%) scale(0.6) rotate(0); }
    60% { opacity: 1; transform: translate(calc(-50% + var(--tx) * 1.15), calc(-50% + var(--ty) * 1.15)) scale(1.15) rotate(var(--rot)); }
    100% { opacity: 0; transform: translate(calc(-50% + var(--tx)), calc(-50% + var(--ty))) scale(0.3) rotate(var(--rot)); }
}

/* --- Like Pulse Ring --- */
.ndm-like.liked::after {
    content: '' !important;
    position: absolute !important;
    inset: -2px !important;
    border-radius: 99px !important;
    border: 2px solid #ff2a5f !important;
    opacity: 0 !important;
    pointer-events: none !important;
    animation: likePulse 0.8s cubic-bezier(0.34, 1.4, 0.64, 1) !important;
}

@keyframes likePulse {
    0% { opacity: 0.9; transform: scale(1); }
    100% { opacity: 0; transform: scale(1.4); }
}

/* ---------------------------------------------------------
   4. RESPONSIVE (Mobile Fixes)
   --------------------------------------------------------- */
@media (max-width: 640px) {
    .news-detail-meta {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 12px !important;
    }
    
    .news-detail-meta .ndm-left {
        justify-content: flex-start !important;
    }
    
    .news-detail-meta .ndm-right {
        width: 100% !important;
        justify-content: space-between !important;
        padding-top: 12px !important;
        border-top: 1px dashed var(--divider) !important;
    }
    
    .ndm-views {
        font-size: 12px !important;
        padding: 6px 12px !important;
    }
    
    .ndm-like {
        font-size: 12px !important;
        padding: 6px 14px 6px 12px !important;
    }
    
    .ndm-like .ndm-heart,
    .ndm-like .ndm-heart > svg {
        width: 18px !important;
        height: 18px !important;
    }
}