/* ─────────────────────────────────────────────────────
   Variables — light playground theme
   ───────────────────────────────────────────────────── */
:root {
    --bg:          #f0f4ff;
    --bg-card:     #ffffff;
    --text:        #1e293b;
    --muted:       #64748b;
    --subtle:      #94a3b8;
    --border:      #e2e8f0;
    --border-hi:   #cbd5e1;
    --blue:        #2563eb;
    --blue-lt:     #3b82f6;
    --blue-soft:   rgba(37,99,235,0.08);
    --blue-glow:   rgba(37,99,235,0.22);
    --purple:      #7c3aed;
    --purple-soft: rgba(124,58,237,0.08);
    --purple-glow: rgba(124,58,237,0.22);
    --green:       #059669;
    --green-soft:  rgba(5,150,105,0.08);
    --amber:       #d97706;
    --amber-soft:  rgba(217,119,6,0.08);
    --danger:      #dc2626;
    --r:           14px;
    --r-sm:        9px;
    --r-full:      999px;
    --ease-out:    cubic-bezier(.22,1,.36,1);
    --ease-spring: cubic-bezier(.34,1.56,.64,1);
    --sh:    0 1px 4px rgba(0,0,0,.06);
    --sh-md: 0 4px 16px rgba(0,0,0,.08);
    --sh-lg: 0 16px 48px rgba(0,0,0,.12);
    --font-sans: 'Plus Jakarta Sans', ui-sans-serif, system-ui, sans-serif;
    --font-mono: 'JetBrains Mono', ui-monospace, 'Cascadia Code', monospace;
}

/* ─────────────────────────────────────────────────────
   Dark theme
   ───────────────────────────────────────────────────── */
[data-theme="dark"] {
    --bg:          #0d1117;
    --bg-card:     #161b27;
    --text:        #e2e8f0;
    --muted:       #94a3b8;
    --subtle:      #4b5775;
    --border:      #1e2740;
    --border-hi:   #2d3f60;
    --blue:        #3b82f6;
    --blue-lt:     #60a5fa;
    --blue-soft:   rgba(59,130,246,0.14);
    --blue-glow:   rgba(59,130,246,0.32);
    --purple:      #a855f7;
    --purple-soft: rgba(168,85,247,0.14);
    --purple-glow: rgba(168,85,247,0.32);
    --green:       #10b981;
    --green-soft:  rgba(16,185,129,0.14);
    --amber:       #f59e0b;
    --amber-soft:  rgba(245,158,11,0.14);
    --sh:    0 1px 4px rgba(0,0,0,.3);
    --sh-md: 0 4px 16px rgba(0,0,0,.4);
    --sh-lg: 0 16px 48px rgba(0,0,0,.5);
}

/* ─────────────────────────────────────────────────────
   Reset
   ───────────────────────────────────────────────────── */
*,*::before,*::after { box-sizing:border-box; }
body {
    margin:0; min-height:100vh;
    font-family:var(--font-sans);
    font-size:15px; line-height:1.5;
    color:var(--text); background:var(--bg);
    -webkit-font-smoothing:antialiased;
    transition:background .25s, color .25s;
}
a   { color:inherit; }
img { display:block; }
button,input { font:inherit; }

/* ═════════════════════════════════════════════════════
   SHARED: animated background layer
   ═════════════════════════════════════════════════════ */
.login-bg, .dir-bg {
    position:fixed; inset:0; overflow:hidden; pointer-events:none;
}

/* ── Blurred colour blobs ──────────────────────────── */
.blob {
    position:absolute; border-radius:50%;
    filter:blur(72px); will-change:transform;
    animation:blobFloat var(--dur,12s) ease-in-out infinite alternate;
    animation-delay:var(--delay,0s);
}
.b1 { width:520px; height:520px; background:rgba(37,99,235,.11);  top:-14%; left:-10%;    --dur:14s; }
.b2 { width:420px; height:420px; background:rgba(124,58,237,.09); bottom:-12%; right:-8%; --dur:11s; --delay:-5s; }
.b3 { width:340px; height:340px; background:rgba(5,150,105,.07);  top:38%; right:4%;      --dur:13s; --delay:-8s; }
.b4 { width:290px; height:290px; background:rgba(245,158,11,.06); bottom:16%; left:22%;   --dur:9s;  --delay:-3s; }
[data-theme="dark"] .b1 { background:rgba(59,130,246,.18); }
[data-theme="dark"] .b2 { background:rgba(168,85,247,.15); }
[data-theme="dark"] .b3 { background:rgba(16,185,129,.11); }
[data-theme="dark"] .b4 { background:rgba(245,158,11,.09); }
@keyframes blobFloat {
    from { transform:translate(0,0)       scale(1);    }
    to   { transform:translate(28px,22px) scale(1.09); }
}

/* ── Floating rings ────────────────────────────────── */
.shape-ring {
    position:absolute; border-radius:50%; border:2px solid;
    animation:shapeDrift var(--dur,8s) ease-in-out infinite;
    animation-delay:var(--delay,0s);
}
.sr1 { width:84px;  height:84px;  border-color:rgba(37,99,235,.22);  top:11%; left:6%;    --dur:7s; }
.sr2 { width:54px;  height:54px;  border-color:rgba(124,58,237,.2);  bottom:22%; right:9%; --dur:9s;  --delay:-4s; }
.sr3 { width:124px; height:124px; border-color:rgba(5,150,105,.14);  top:58%; left:2%;    --dur:12s; --delay:-7s; }
.sr4 { width:40px;  height:40px;  border-color:rgba(245,158,11,.2);  top:80%; right:18%;  --dur:8s;  --delay:-2s; }

/* ── Floating dots ─────────────────────────────────── */
.shape-dot {
    position:absolute; border-radius:50%;
    animation:shapeDrift var(--dur,6s) ease-in-out infinite;
    animation-delay:var(--delay,0s);
}
.sd1 { width:13px; height:13px; background:rgba(37,99,235,.35);  top:27%;    right:17%;  --dur:5s; }
.sd2 { width:9px;  height:9px;  background:rgba(124,58,237,.32); top:73%;    left:14%;   --dur:6s;  --delay:-2s; }
.sd3 { width:17px; height:17px; background:rgba(245,158,11,.25); bottom:36%; left:40%;   --dur:8s;  --delay:-3s; }
.sd4 { width:11px; height:11px; background:rgba(5,150,105,.3);   top:48%;    right:11%;  --dur:7s;  --delay:-5s; }
.sd5 { width:8px;  height:8px;  background:rgba(220,38,38,.2);   bottom:28%; right:38%;  --dur:6s;  --delay:-1s; }

/* ── Floating squares ──────────────────────────────── */
.shape-sq {
    position:absolute; border-radius:6px;
    animation:squareDrift var(--dur,9s) ease-in-out infinite;
    animation-delay:var(--delay,0s);
}
.ss1 { width:30px; height:30px; border:2px solid rgba(37,99,235,.2);  top:42%; right:7%;    --dur:8s;  --delay:-1s; }
.ss2 { width:19px; height:19px; background:rgba(5,150,105,.18);       bottom:50%; right:24%;--dur:10s; --delay:-6s; }
.ss3 { width:25px; height:25px; border:2px solid rgba(124,58,237,.18);top:82%; right:36%;  --dur:7s;  --delay:-3s; }
.ss4 { width:14px; height:14px; background:rgba(245,158,11,.22);      bottom:44%; left:8%; --dur:11s; --delay:-4s; }

/* ── Extra dir-bg elements ─────────────────────────── */
.b5  { width:360px; height:360px; background:rgba(59,130,246,.07);  top:55%; right:-5%;  --dur:16s; --delay:-10s; }
[data-theme="dark"] .b5 { background:rgba(59,130,246,.13); }
.sr5 { width:70px;  height:70px;  border-color:rgba(37,99,235,.18); top:30%; right:3%;   --dur:10s; --delay:-5s; }
.sr6 { width:44px;  height:44px;  border-color:rgba(168,85,247,.15);bottom:35%; left:32%;--dur:8s;  --delay:-3s; }
.sd6 { width:7px;  height:7px;  background:rgba(37,99,235,.32);   top:14%;    left:55%;  --dur:4s;  --delay:-1s; }
.sd7 { width:11px; height:11px; background:rgba(124,58,237,.25);  bottom:13%; left:67%;  --dur:7s;  --delay:-4s; }
.ss5 { width:22px; height:22px; border:2px solid rgba(5,150,105,.16); top:67%; left:56%; --dur:9s;  --delay:-2s; }
.ss6 { width:15px; height:15px; background:rgba(168,85,247,.14);  top:22%;  right:42%;   --dur:12s; --delay:-8s; }

/* ── Sparkling dots (login only) ───────────────────── */
.spark {
    position:absolute; border-radius:50%;
    animation:sparkPulse var(--dur,2.5s) ease-in-out infinite;
    animation-delay:var(--delay,0s);
}
.sp1 { width:5px; height:5px; background:rgba(37,99,235,.9);   top:18%; left:28%;    --dur:2.2s; }
.sp2 { width:4px; height:4px; background:rgba(124,58,237,.9);  top:62%; left:72%;    --dur:3.1s; --delay:-1.1s; }
.sp3 { width:6px; height:6px; background:rgba(5,150,105,.8);   top:35%; right:15%;   --dur:2.7s; --delay:-0.6s; }
.sp4 { width:4px; height:4px; background:rgba(245,158,11,.9);  bottom:25%; left:18%; --dur:3.4s; --delay:-2s; }
.sp5 { width:5px; height:5px; background:rgba(59,130,246,.85); bottom:38%; right:28%;--dur:2.9s; --delay:-0.3s; }
.sp6 { width:3px; height:3px; background:rgba(168,85,247,.9);  top:75%; left:45%;    --dur:2.4s; --delay:-1.7s; }
@keyframes sparkPulse {
    0%,100% { opacity:0; transform:scale(0); }
    45%     { opacity:1; transform:scale(1); box-shadow:0 0 10px 2px currentColor; }
    55%     { opacity:.9; }
}

/* ── Diagonal streaks (login only) ────────────────── */
.streak {
    position:absolute; height:1.5px; border-radius:2px;
    background:linear-gradient(90deg,transparent,rgba(37,99,235,.45),rgba(124,58,237,.3),transparent);
    animation:streakMove var(--dur,7s) linear infinite;
    animation-delay:var(--delay,0s);
}
.stk1 { width:200px; top:18%; left:-220px; --dur:7s;  --rot:-11deg; }
.stk2 { width:140px; top:52%; left:-160px; --dur:9s;  --rot:-8deg;  --delay:-3.5s; }
.stk3 { width:260px; top:76%; left:-280px; --dur:11s; --rot:-14deg; --delay:-7s; }
@keyframes streakMove {
    from { transform:rotate(var(--rot,-11deg)) translateX(0);       opacity:0; }
    6%   {                                                            opacity:1; }
    88%  {                                                            opacity:.5; }
    to   { transform:rotate(var(--rot,-11deg)) translateX(130vw);   opacity:0; }
}

/* ── Shape keyframes ───────────────────────────────── */
@keyframes shapeDrift {
    0%,100% { transform:translateY(0)     rotate(0deg);  }
    33%     { transform:translateY(-14px) rotate(6deg);  }
    66%     { transform:translateY(-7px)  rotate(-4deg); }
}
@keyframes squareDrift {
    0%   { transform:translateY(0)     rotate(0deg);  }
    25%  { transform:translateY(-12px) rotate(9deg);  }
    50%  { transform:translateY(-20px) rotate(0deg);  }
    75%  { transform:translateY(-8px)  rotate(-7deg); }
    100% { transform:translateY(0)     rotate(0deg);  }
}
@keyframes orbitSpin {
    from { transform:rotate(0deg);   }
    to   { transform:rotate(360deg); }
}

/* ═════════════════════════════════════════════════════
   LOGIN PAGE
   ═════════════════════════════════════════════════════ */
body.page-login {
    background:linear-gradient(140deg,#eef2ff 0%,#f8faff 55%,#f0fdf4 100%);
}
[data-theme="dark"] body.page-login {
    background:linear-gradient(140deg,#080b14 0%,#0d1117 55%,#080e0c 100%);
}
.login-bg { z-index:0; }

/* Floating theme toggle */
.theme-toggle-wrap { position:fixed; top:16px; right:16px; z-index:200; }

.login-outer {
    position:relative; z-index:1;
    min-height:100vh;
    display:flex; flex-direction:column;
    align-items:center; justify-content:center;
    padding:32px 20px; gap:20px;
}

/* Glassmorphism card */
.login-panel {
    position:relative;
    width:100%; max-width:410px;
    padding:38px 36px 34px;
    border-radius:24px;
    background:rgba(255,255,255,.86);
    backdrop-filter:blur(24px) saturate(180%);
    -webkit-backdrop-filter:blur(24px) saturate(180%);
    border:1px solid rgba(255,255,255,.92);
    box-shadow:0 8px 40px rgba(37,99,235,.1),0 2px 8px rgba(0,0,0,.06),inset 0 1px 0 #fff;
    display:flex; flex-direction:column; align-items:center; gap:6px;
    overflow:hidden;
    animation:panelIn .7s var(--ease-out) both;
}
[data-theme="dark"] .login-panel {
    background:rgba(22,27,39,.88);
    border-color:rgba(255,255,255,.07);
    box-shadow:0 8px 48px rgba(0,0,0,.6),0 2px 8px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.06);
}
.login-panel::before {
    content:''; position:absolute; inset:0; pointer-events:none; z-index:0;
    background:linear-gradient(160deg,rgba(37,99,235,.05) 0%,transparent 50%);
}
/* Rainbow top stripe + animated */
.login-panel::after {
    content:''; position:absolute; top:0; left:0; right:0; height:3px;
    background:linear-gradient(90deg,var(--blue),var(--purple),var(--green),var(--amber),var(--blue));
    background-size:200% auto;
    border-radius:24px 24px 0 0;
    animation:rainbowShift 3.5s linear infinite;
}

/* Icon + orbits — top margin keeps orbit-ring-2 clear of rainbow stripe; bottom accounts for inset:-42px overflow */
.login-icon-area { position:relative; z-index:1; margin-top:20px; margin-bottom:54px; }
.login-icon-wrap { position:relative; width:80px; height:80px; }
.icon-ring {
    position:absolute; border-radius:50%;
    border:2px solid rgba(37,99,235,.2);
    animation:ringPulse 3s ease-in-out infinite;
}
.ir1 { inset:0;     animation-delay:0s; }
.ir2 { inset:-16px; border-color:rgba(37,99,235,.09); animation-delay:.7s; }
.login-icon {
    position:relative; z-index:2;
    width:80px; height:80px; object-fit:contain;
    filter:drop-shadow(0 8px 24px rgba(37,99,235,.28)) drop-shadow(0 0 12px rgba(124,58,237,.18));
    animation:iconFloat 6s ease-in-out infinite;
}
/* Orbiting ring 1 */
.orbit-ring {
    position:absolute; inset:-26px; border-radius:50%;
    border:1px dashed rgba(37,99,235,.28);
    animation:orbitSpin 9s linear infinite;
    z-index:0;
}
.orbit-dot {
    position:absolute; top:-5px; left:50%; margin-left:-5px;
    width:10px; height:10px; border-radius:50%;
    background:var(--blue);
    box-shadow:0 0 12px var(--blue-glow),0 0 4px var(--blue);
}
/* Orbiting ring 2 */
.orbit-ring-2 {
    position:absolute; inset:-42px; border-radius:50%;
    border:1px dashed rgba(124,58,237,.2);
    animation:orbitSpin 15s linear infinite reverse;
    z-index:0;
}
.orbit-dot-2 {
    position:absolute; bottom:-4px; left:calc(50% - 4px);
    width:8px; height:8px; border-radius:50%;
    background:var(--purple);
    box-shadow:0 0 10px var(--purple-glow),0 0 3px var(--purple);
}

/* Worklife wordmark */
.panel-logo {
    position:relative; z-index:1;
    height:30px; width:auto; margin-top:10px;
}

/* Typewriter tagline */
.login-tagline {
    position:relative; z-index:1;
    margin:4px 0 18px;
    font-size:13.5px; color:var(--muted); min-height:1.5em;
    text-align:center; letter-spacing:.01em;
}
.lp-cursor {
    display:inline-block; margin-left:1px;
    color:var(--blue); animation:blink 1s step-end infinite;
}

/* Error alert */
.alert {
    position:relative; z-index:1;
    width:100%; margin-bottom:14px; padding:10px 14px;
    border-radius:var(--r-sm);
    background:rgba(220,38,38,.06); border:1px solid rgba(220,38,38,.18);
    color:#b91c1c; font-size:13px; font-weight:500; text-align:center;
}
[data-theme="dark"] .alert { background:rgba(220,38,38,.14); color:#f87171; }

/* Form */
.login-form { position:relative; z-index:1; width:100%; }
.field { display:flex; flex-direction:column; gap:6px; margin-bottom:14px; }
.field label {
    font-size:11px; font-weight:700; letter-spacing:.07em;
    text-transform:uppercase; color:var(--muted);
    font-family:var(--font-mono);
}
.field input {
    width:100%; height:44px; padding:0 14px;
    border:1.5px solid var(--border);
    border-radius:var(--r-sm);
    background:#fff; color:var(--text); font-size:15px;
    font-family:var(--font-sans);
    box-shadow:var(--sh);
    transition:border-color .15s, box-shadow .15s, background .25s;
}
[data-theme="dark"] .field input {
    background:#0a0d14; border-color:var(--border-hi);
}
.field input::placeholder { color:var(--subtle); }
.field input:focus {
    outline:none;
    border-color:var(--blue);
    box-shadow:0 0 0 3px rgba(37,99,235,.14),var(--sh);
}

/* Primary button */
.primary-button {
    display:inline-flex; align-items:center; justify-content:center;
    width:100%; min-height:46px; margin-top:6px;
    border:0; border-radius:var(--r-sm); cursor:pointer;
    background:linear-gradient(135deg,#1d4ed8 0%,var(--blue-lt) 100%);
    color:#fff; font-size:14.5px; font-weight:700; letter-spacing:.02em;
    font-family:var(--font-sans);
    box-shadow:0 4px 18px rgba(37,99,235,.38);
    transition:transform .15s, box-shadow .15s, filter .15s;
}
.primary-button:hover {
    transform:translateY(-2px);
    box-shadow:0 8px 28px rgba(37,99,235,.48);
    filter:brightness(1.06);
}
.primary-button:active { transform:translateY(0); }
.btn-arr { display:inline-block; transition:transform .2s ease; margin-left:3px; }
.primary-button:hover .btn-arr,
.card-link:hover .btn-arr { transform:translateX(4px); }

/* Login footer */
.login-foot {
    font-size:11px; color:var(--subtle); letter-spacing:.02em;
    font-family:var(--font-mono);
}

/* ═════════════════════════════════════════════════════
   DIRECTORY PAGE
   ═════════════════════════════════════════════════════ */
body.page-directory { background:var(--bg); transition:background .25s; }
.dir-bg { z-index:0; }

body.page-directory::after {
    content:''; position:fixed; inset:0; z-index:0; pointer-events:none;
    background-image:radial-gradient(circle,rgba(37,99,235,.055) 1px,transparent 1px);
    background-size:30px 30px;
    transition:opacity .3s;
}
[data-theme="dark"] body.page-directory::after {
    background-image:radial-gradient(circle,rgba(59,130,246,.065) 1px,transparent 1px);
}

/* ── Page shell ──────────────────────────────────────── */
.page-shell {
    position:relative; z-index:1;
    width:min(1280px,100% - 40px);
    margin:0 auto; padding:28px 0 60px;
}

/* ── Topbar — full viewport width (element lives outside .page-shell) ── */
.topbar {
    position:sticky; top:0; z-index:100;
    background:rgba(248,250,255,.72);
    backdrop-filter:blur(22px) saturate(200%);
    -webkit-backdrop-filter:blur(22px) saturate(200%);
    border-bottom:1px solid rgba(203,213,225,.4);
    transition:background .25s, border-color .25s;
}
[data-theme="dark"] .topbar {
    background:rgba(13,17,23,.76);
    border-bottom-color:rgba(255,255,255,.07);
}
/* Content row — same width constraint as .page-shell */
.topbar-inner {
    width:min(1280px, 100% - 40px);
    margin:0 auto;
    display:flex; align-items:center; justify-content:space-between;
    gap:16px; padding:13px 0;
    min-width:0;
}

.brand { display:inline-flex; align-items:center; gap:10px; text-decoration:none; min-width:0; }
.brand-wordmark { height:24px; width:auto; }
.brand-sep { width:1px; height:16px; background:var(--border-hi); flex-shrink:0; }
.brand-lab-tag {
    display:inline-flex; align-items:center; gap:6px;
    padding:4px 12px 4px 9px; border-radius:var(--r-full);
    background:var(--blue-soft); border:1px solid rgba(37,99,235,.18);
    font-size:11px; font-weight:700; letter-spacing:.05em;
    color:var(--blue); line-height:1;
    transition:background .2s, box-shadow .2s;
}
.brand:hover .brand-lab-tag {
    background:rgba(37,99,235,.13);
    box-shadow:0 0 14px var(--blue-glow);
}
.brand-lab-dot {
    width:6px; height:6px; border-radius:50%;
    background:var(--blue); box-shadow:0 0 6px var(--blue-glow);
    animation:dotPulse 2s ease-in-out infinite;
}

.topbar-right { display:flex; align-items:center; gap:10px; }
.topbar-user {
    font-size:12px; font-family:var(--font-mono); color:var(--subtle);
}

/* ── Theme toggle ────────────────────────────────────── */
.theme-toggle {
    width:36px; height:36px; border-radius:var(--r-sm);
    border:1.5px solid var(--border-hi);
    background:var(--bg-card); color:var(--muted);
    cursor:pointer; display:flex; align-items:center; justify-content:center;
    flex-shrink:0; box-shadow:var(--sh);
    transition:border-color .15s, background .25s, color .15s, transform .2s;
}
.theme-toggle:hover { border-color:var(--blue); color:var(--blue); transform:rotate(18deg); }
.theme-toggle svg { display:block; pointer-events:none; }
.theme-toggle .icon-moon { display:none; }
[data-theme="dark"] .theme-toggle .icon-sun  { display:none; }
[data-theme="dark"] .theme-toggle .icon-moon { display:block; }

/* Logout */
.logout-form button {
    padding:6px 14px; border:1.5px solid var(--border-hi);
    border-radius:var(--r-sm); background:var(--bg-card); color:var(--muted);
    font-size:13px; font-weight:500; cursor:pointer; box-shadow:var(--sh);
    transition:background .15s, border-color .15s, color .15s;
}
.logout-form button:hover { background:var(--bg); border-color:var(--blue); color:var(--blue); }

/* ── Directory hero ──────────────────────────────────── */
.dir-hero {
    position:relative; overflow:hidden;
    display:flex; align-items:center; justify-content:space-between;
    gap:20px; padding:32px 36px; margin-bottom:28px;
    background:var(--bg-card); border:1px solid var(--border); border-radius:var(--r);
    box-shadow:var(--sh-md);
    animation:fadeUp .5s var(--ease-out) both;
    transition:background .25s, border-color .25s;
}
.dir-hero::before {
    content:''; position:absolute; top:0; right:0; width:55%; height:100%;
    background-image:radial-gradient(circle,rgba(37,99,235,.08) 1px,transparent 1px);
    background-size:22px 22px; pointer-events:none;
}
.dir-hero::after {
    content:''; position:absolute; top:0; right:0; width:65%; height:100%;
    background:linear-gradient(90deg,var(--bg-card) 0%,transparent 100%);
    pointer-events:none; transition:background .25s;
}
.dir-hero-left, .dir-hero-right { position:relative; z-index:1; }
.dir-eyebrow {
    margin:0 0 6px;
    font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
    color:var(--blue); font-family:var(--font-mono);
}
.dir-hero-left h1 {
    margin:0 0 14px; font-size:28px; font-weight:800;
    letter-spacing:-.03em; color:var(--text);
}
.dir-name {
    background:linear-gradient(90deg,var(--blue),var(--purple));
    -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}
.dir-rainbow-bar {
    width:160px; height:4px; border-radius:var(--r-full);
    background:linear-gradient(90deg,var(--blue),var(--purple),var(--green),var(--amber),var(--blue));
    background-size:200% auto;
    animation:rainbowShift 3.5s linear infinite;
}
.dir-hero-right { text-align:center; flex-shrink:0; }
.dir-count {
    display:block; font-size:58px; font-weight:800; line-height:1;
    letter-spacing:-.06em; color:var(--blue);
    font-variant-numeric:tabular-nums; font-family:var(--font-mono);
}
.dir-count-label {
    display:block; font-size:11px; font-weight:600;
    letter-spacing:.09em; text-transform:uppercase;
    color:var(--subtle); margin-top:4px;
}

/* ── App grid ────────────────────────────────────────── */
.app-grid {
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:16px;
}

/* ── App card ────────────────────────────────────────── */
.app-card {
    position:relative;
    display:flex; flex-direction:column;
    background:var(--bg-card);
    border:1px solid var(--border);
    border-left:4px solid var(--blue);
    border-radius:var(--r);
    box-shadow:var(--sh);
    overflow:hidden; will-change:transform;
    transform-style:preserve-3d;
    transition:transform .3s var(--ease-out), box-shadow .3s,
               border-left-color .3s, background .25s, border-color .25s;
    animation:cardIn .55s var(--ease-out) both;
}
.app-card[data-status="preview"]     { border-left-color:var(--blue); }
.app-card[data-status="planned"]     { border-left-color:var(--purple); }
.app-card[data-status="maintenance"],
.app-card[data-status="paused"]      { border-left-color:var(--amber); }

.app-card:hover { transform:translateY(-5px); }
.app-card[data-status="preview"]:hover     { box-shadow:0 14px 40px rgba(37,99,235,.14), -3px 0 18px rgba(37,99,235,.1); }
.app-card[data-status="planned"]:hover     { box-shadow:0 14px 40px rgba(124,58,237,.12),-3px 0 18px rgba(124,58,237,.1); }
.app-card[data-status="maintenance"]:hover,
.app-card[data-status="paused"]:hover      { box-shadow:0 14px 40px rgba(217,119,6,.12), -3px 0 18px rgba(217,119,6,.1); }

.app-card:nth-child(1)  { animation-delay: 40ms; }
.app-card:nth-child(2)  { animation-delay: 80ms; }
.app-card:nth-child(3)  { animation-delay:120ms; }
.app-card:nth-child(4)  { animation-delay:160ms; }
.app-card:nth-child(5)  { animation-delay:200ms; }
.app-card:nth-child(6)  { animation-delay:240ms; }
.app-card:nth-child(7)  { animation-delay:280ms; }
.app-card:nth-child(8)  { animation-delay:320ms; }
.app-card:nth-child(9)  { animation-delay:360ms; }
.app-card:nth-child(10) { animation-delay:400ms; }
.app-card:nth-child(11) { animation-delay:440ms; }
.app-card:nth-child(12) { animation-delay:480ms; }

/* Status badge — absolute top-right */
.card-badge {
    position:absolute; top:14px; right:14px; z-index:2;
}

/* Card top row: icon + title (right-padded to avoid badge overlap) */
.card-top {
    display:flex; align-items:center; gap:14px;
    padding:20px 120px 0 20px; /* right reserve for badge */
}

/* Icon wrapper */
.card-icon-wrap {
    width:48px; height:48px; flex-shrink:0;
    border-radius:13px; overflow:hidden; position:relative;
    box-shadow:0 4px 12px rgba(0,0,0,.14);
    background:var(--border);
    transition:transform .3s var(--ease-spring), box-shadow .3s;
}
.app-card:hover .card-icon-wrap {
    transform:scale(1.1) rotate(-3deg);
    box-shadow:0 8px 22px rgba(0,0,0,.2);
}
.card-icon-img {
    width:100%; height:100%; object-fit:contain;
    padding:8px; display:block;
}
.card-icon-fb {
    position:absolute; inset:0;
    display:flex; align-items:center; justify-content:center;
    font-size:14px; font-weight:700; color:#fff; letter-spacing:.03em;
    font-family:var(--font-mono);
}
.app-card[data-status="preview"]     .card-icon-fb { background:linear-gradient(135deg,#1d4ed8,var(--blue-lt)); }
.app-card[data-status="planned"]     .card-icon-fb { background:linear-gradient(135deg,#5b21b6,var(--purple)); }
.app-card[data-status="maintenance"] .card-icon-fb,
.app-card[data-status="paused"]      .card-icon-fb { background:linear-gradient(135deg,#92400e,var(--amber)); }

.card-title {
    flex:1; min-width:0; margin:0;
    font-size:17px; font-weight:700; letter-spacing:-.02em;
    color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

/* Description */
.card-content {
    flex:1;
}
.card-content > p {
    margin:14px 20px 14px;
    font-size:13.5px; color:var(--muted); line-height:1.7;
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}

/* Card footer */
.card-footer {
    display:flex; align-items:center; justify-content:space-between;
    gap:10px; padding:12px 20px 16px; margin-top:auto;
    position:relative;
}
/* Gradient divider — fades at edges */
.card-footer::before {
    content:''; position:absolute;
    top:0; left:16px; right:16px; height:1px;
    background:linear-gradient(90deg, transparent, var(--border-hi) 30%, var(--border-hi) 70%, transparent);
    transition:background .25s;
}
.card-meta {
    display:flex; flex-wrap:wrap; align-items:center; gap:4px;
    min-width:0; flex:1;
}
/* Meta pills */
.meta-pill {
    display:inline-flex; align-items:center;
    padding:2px 8px; border-radius:var(--r-full);
    background:var(--border); border:1px solid transparent;
    font-size:10.5px; font-weight:500; color:var(--muted);
    font-family:var(--font-mono); letter-spacing:.01em; line-height:1.6;
    white-space:nowrap;
    transition:background .15s, color .15s;
}

/* ── Status badge ────────────────────────────────────── */
.status {
    display:inline-flex; align-items:center; gap:4px;
    padding:3px 9px; border-radius:var(--r-full);
    font-size:10px; font-weight:700; letter-spacing:.07em; text-transform:uppercase;
    white-space:nowrap; flex-shrink:0;
}
.status::before {
    content:''; width:5px; height:5px; border-radius:50%;
    background:currentColor; flex-shrink:0;
}
.status.preview      { background:var(--blue-soft);   color:var(--blue);   border:1px solid rgba(37,99,235,.18); }
.status.preview::before { animation:dotPulse 2.2s ease-in-out infinite; }
.status.planned      { background:var(--purple-soft); color:var(--purple); border:1px solid rgba(124,58,237,.18); }
.status.maintenance,
.status.paused       { background:var(--amber-soft);  color:var(--amber);  border:1px solid rgba(217,119,6,.18); }

/* Launch link */
.card-link {
    display:inline-flex; align-items:center; gap:4px;
    padding:6px 14px; border:1.5px solid var(--blue);
    border-radius:var(--r-full);
    background:var(--blue-soft); color:var(--blue);
    font-size:12px; font-weight:700; letter-spacing:.04em;
    text-decoration:none; white-space:nowrap; flex-shrink:0;
    font-family:var(--font-sans);
    transition:background .18s, color .18s, box-shadow .18s, transform .18s;
}
.card-link:hover {
    background:var(--blue); color:#fff;
    box-shadow:0 4px 14px rgba(37,99,235,.38);
    transform:translateY(-1px);
}
.card-link:active { transform:translateY(0); }
.btn-arr { display:inline-block; transition:transform .2s ease; }

/* ── Empty & notices ─────────────────────────────────── */
.empty-state {
    grid-column:1/-1; padding:52px 24px; text-align:center;
    background:var(--bg-card); border:1px dashed var(--border-hi);
    border-radius:var(--r); color:var(--muted); font-size:14px;
    transition:background .25s, border-color .25s;
}
.notice-panel {
    width:min(520px,100%); margin:80px auto; padding:32px;
    background:var(--bg-card); border:1px solid var(--border);
    border-radius:var(--r); box-shadow:var(--sh-md);
    animation:fadeUp .5s var(--ease-out) both;
    transition:background .25s, border-color .25s;
}
.notice-panel h1 { margin:0 0 10px; font-size:21px; font-weight:700; color:var(--text); }
.notice-panel p  { margin:0; font-size:14px; color:var(--muted); line-height:1.65; }
.eyebrow {
    margin:0 0 10px; font-size:11px; font-weight:700;
    letter-spacing:.1em; text-transform:uppercase;
    color:var(--blue); font-family:var(--font-mono);
}
.eyebrow.danger { color:var(--danger); }
code {
    padding:2px 6px; border-radius:4px;
    background:rgba(37,99,235,.07); font-size:.88em;
    color:var(--blue); font-family:var(--font-mono);
}

/* ── Footer ──────────────────────────────────────────── */
.footer {
    margin-top:48px; padding-top:16px;
    border-top:1px solid var(--border);
    font-size:11.5px; color:var(--subtle);
    font-family:var(--font-mono); letter-spacing:.02em;
    transition:border-color .25s;
}

/* ═════════════════════════════════════════════════════
   Keyframes
   ═════════════════════════════════════════════════════ */
@keyframes panelIn {
    from { opacity:0; transform:translateY(24px) scale(.97); }
    to   { opacity:1; transform:translateY(0)    scale(1);   }
}
@keyframes iconFloat {
    0%,100% { transform:translateY(0)     rotate(0deg);  }
    33%     { transform:translateY(-10px) rotate(-2deg); }
    66%     { transform:translateY(-5px)  rotate(2deg);  }
}
@keyframes ringPulse {
    0%,100% { transform:scale(1);    opacity:.8;  }
    50%     { transform:scale(1.18); opacity:.15; }
}
@keyframes blink {
    0%,100% { opacity:1; }
    50%     { opacity:0; }
}
@keyframes dotPulse {
    0%,100% { opacity:1;  transform:scale(1);  }
    50%     { opacity:.3; transform:scale(.6); }
}
@keyframes fadeIn {
    from { opacity:0; }
    to   { opacity:1; }
}
@keyframes fadeUp {
    from { opacity:0; transform:translateY(14px); }
    to   { opacity:1; transform:translateY(0);    }
}
@keyframes cardIn {
    from { opacity:0; transform:translateY(20px) scale(.982); }
    to   { opacity:1; transform:translateY(0)    scale(1);    }
}
@keyframes rainbowShift {
    0%   { background-position:0%   center; }
    100% { background-position:200% center; }
}

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

/* ═════════════════════════════════════════════════════
   Responsive
   ═════════════════════════════════════════════════════ */
@media (max-width:1060px) {
    .app-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:740px) {
    .page-shell { width:calc(100% - 28px); }
    .dir-hero   { flex-direction:column; align-items:flex-start; gap:16px; }
    .dir-hero-right { display:flex; align-items:baseline; gap:8px; }
    .dir-count  { font-size:42px; }
}
@media (max-width:540px) {
    .page-shell    { width:calc(100% - 22px); }
    .topbar-user   { display:none; }
    .app-grid      { grid-template-columns:1fr; gap:12px; }
    .login-panel   { padding:28px 22px 24px; }
    .dir-hero      { padding:22px 20px; }
    .card-top      { padding-right:96px; }
    .dir-hero-left h1 { font-size:22px; }
    .dir-eyebrow   { margin-bottom:4px; }
}
@media (max-width:420px) {
    /* Hide "Exploratory Lab" tag + separator so the sign-out button stays on one row */
    .brand-sep,
    .brand-lab-tag { display:none; }
    .topbar-inner  { gap:8px; }
    .logout-form button { padding:6px 10px; font-size:12px; }
}