/* ============================================================
   MISSION CONTROL — professional dark dashboard
   (sleek product chrome + playful pixel-art agents)
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&family=Pixelify+Sans:wght@400;500;600;700&family=VT323&display=swap');

:root{
  /* ---- MIDNIGHT (default) ---- */
  --bg:#1b2336;
  --bg-grad:radial-gradient(1200px 600px at 80% -10%, #283452 0%, transparent 60%), #1b2336;
  --sidebar:#0c1120;
  --surface:#232d44;
  --surface-2:#2a3550;
  --surface-3:#33405e;
  --border:#3a476a;
  --border-soft:#2e3957;

  --text:#e9eefb;
  --text-soft:#9aa6c4;
  --text-faint:#5d6a8a;
  --on-wood:#e9eefb;            /* text on sidebar/header */

  --accent:#7b86c4;             /* muted periwinkle — selection */
  --accent-2:#7e9bb8;           /* muted slate-blue — online/live */
  --accent-glow:rgba(123,134,196,.3);

  --hp:#6fae84;                 /* energy green (muted) */
  --hp-dk:#4f8e64;
  --xp:#cdab6a;                 /* xp / coin (muted gold) */
  --gold:#cdab6a;
  --alert:#cf7b80;              /* needs input (muted) */
  --idle:#cfa173;               /* idle amber (muted) */
  --info:#88a6c4;               /* sleeping blue (muted) */

  --radius:14px;
  --radius-sm:10px;
  --shadow:0 10px 30px rgba(0,0,0,.45);
  --shadow-sm:0 4px 14px rgba(0,0,0,.35);

  /* room (war-room) */
  --wall-a:#141d33;
  --wall-b:#0f1626;
  --floor-a:#10182a;
  --floor-b:#0c1322;
  --floor-line:#1a2540;

  --font:'Space Grotesk', system-ui, sans-serif;
  --mono:'JetBrains Mono', ui-monospace, monospace;
  /* legacy aliases used by inline styles in JSX */
  --pxbig:'Space Grotesk', sans-serif;
  --pxbody:'Space Grotesk', system-ui, sans-serif;
  --panel-border-dk:var(--border);
  --panel-edge:var(--border-soft);
  --panel:var(--surface);
  --panel-2:var(--surface-2);
  --ink:var(--text);
  --ink-soft:var(--text-soft);
  --ink-faint:var(--text-faint);
}

/* ---- AURORA: deeper, more vivid neon ---- */
.theme-aurora{
  --bg:#080612;
  --bg-grad:radial-gradient(900px 500px at 15% -10%, #2a1a4d 0%, transparent 55%),
            radial-gradient(900px 600px at 95% 10%, #0c2f3a 0%, transparent 55%), #080612;
  --sidebar:#0c0a1a;
  --surface:#130f24;
  --surface-2:#191230;
  --surface-3:#221842;
  --border:#2c2150;
  --border-soft:#211840;
  --accent:#a06bff; --accent-2:#27e0d4; --accent-glow:rgba(160,107,255,.5);
  --wall-a:#1a1136; --wall-b:#100a26; --floor-a:#120c28; --floor-b:#0c0820; --floor-line:#241946;
}

/* ---- DAYLIGHT: clean light professional ---- */
.theme-daylight{
  --bg:#eef1f7;
  --bg-grad:radial-gradient(1000px 500px at 80% -10%, #e3e9f6 0%, transparent 60%), #eef1f7;
  --sidebar:#ffffff;
  --surface:#ffffff;
  --surface-2:#f3f5fb;
  --surface-3:#e9edf7;
  --border:#dde3f0;
  --border-soft:#e8ecf5;
  --text:#16203a; --text-soft:#566182; --text-faint:#8b96b3;
  --on-wood:#16203a;
  --accent:#6b4eff; --accent-2:#0bb6cf; --accent-glow:rgba(107,78,255,.25);
  --hp:#1faf63; --hp-dk:#168a4d; --xp:#d99517; --gold:#d99517;
  --alert:#e23b4c; --idle:#d97a17; --info:#2f7fe0;
  --shadow:0 10px 28px rgba(40,52,90,.14); --shadow-sm:0 4px 12px rgba(40,52,90,.1);
  --wall-a:#eef2fa; --wall-b:#e2e8f5; --floor-a:#dde4f1; --floor-b:#d4dcec; --floor-line:#c7d1e6;
}

/* ---- GAME BOY: full DMG 4-green monochrome ---- */
.theme-gameboy{
  --bg:#aecb62;
  --bg-grad:none;
  --sidebar:#2f4f18;
  --surface:#e6f0b8;
  --surface-2:#d3e295;
  --surface-3:#bdd078;
  --border:#1c330f;
  --border-soft:#4f7a2a;
  --text:#1c330f; --text-soft:#3f6322; --text-faint:#6b8a3a;
  --on-wood:#e6f0b8;
  --accent:#1c330f; --accent-2:#3f6322; --accent-glow:rgba(28,51,15,.3);
  --hp:#3f7a22; --hp-dk:#2f4f18; --xp:#6f8a16; --gold:#6f8a16;
  --alert:#2f4f18; --idle:#5f7a2a; --info:#4f7a2a;
  --radius:7px; --radius-sm:5px;
  --shadow:3px 3px 0 #1c330f; --shadow-sm:2px 2px 0 rgba(28,51,15,.55);
  --wall-a:#8bac0f; --wall-b:#7a9a10; --floor-a:#7cbf48; --floor-b:#6cb03f; --floor-line:#4f7a2a;
  --font:'Pixelify Sans', system-ui, sans-serif;
  --mono:'VT323', monospace;
  --pxbig:'Press Start 2P', monospace;
  --pxbody:'Pixelify Sans', sans-serif;
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  font-family:var(--font);
  background:var(--bg);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
}
img,canvas{image-rendering:pixelated;}

/* ============================================================
   App shell
   ============================================================ */
.app{display:flex;min-height:100vh;background:var(--bg-grad);}

/* ---------- Sidebar ---------- */
.sidebar{
  width:252px;flex:0 0 252px;
  background:var(--sidebar);
  border-right:1px solid var(--border);
  padding:20px 16px;
  display:flex;flex-direction:column;gap:6px;
  position:sticky;top:0;height:100vh;overflow-y:auto;
}
.brand{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:16px 14px;text-align:center;margin-bottom:8px;flex:0 0 auto;
  position:relative;
}
.brand::after{content:"";position:absolute;inset:0;border-radius:var(--radius);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);pointer-events:none;}
.brand .crest{width:46px;height:46px;margin:0 auto 10px;border-radius:12px;
  background:linear-gradient(145deg,var(--accent),#5a3fd6);
  display:flex;align-items:center;justify-content:center;font-size:24px;
  box-shadow:0 6px 18px var(--accent-glow);}
.brand h1{font-size:15px;line-height:1.35;font-weight:700;letter-spacing:3px;
  color:var(--text);margin:0;}
.brand .status-line{margin-top:10px;font-size:12px;font-weight:600;letter-spacing:1.5px;
  color:var(--accent-2);text-transform:uppercase;
  display:flex;align-items:center;justify-content:center;gap:7px;}
.blink-dot{width:8px;height:8px;border-radius:50%;background:var(--accent-2);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--accent-2) 22%,transparent);
  animation:pulse 2s ease-in-out infinite;}
@keyframes pulse{50%{opacity:.4;}}

.nav{display:flex;flex-direction:column;gap:3px;margin-top:8px;}
.nav-label{font-size:11px;font-weight:600;letter-spacing:1.5px;text-transform:uppercase;
  color:var(--text-faint);padding:8px 12px 4px;}
.nav-item{
  display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:var(--radius-sm);
  font-family:var(--font);font-size:15px;font-weight:500;flex:0 0 auto;
  color:var(--text-soft);background:transparent;border:1px solid transparent;
  cursor:pointer;text-align:left;width:100%;transition:all .15s;
}
.nav-item .ni-ico{width:22px;display:flex;justify-content:center;font-size:17px;
  filter:grayscale(.2);}
.nav-item:hover{background:var(--surface);color:var(--text);}
.nav-item.active{
  background:var(--surface-2);border-color:color-mix(in srgb,var(--accent) 55%,transparent);
  color:var(--text);box-shadow:0 0 0 1px color-mix(in srgb,var(--accent) 30%,transparent),
    0 6px 18px color-mix(in srgb,var(--accent) 18%,transparent);
}
.nav-item.active .ni-ico{filter:none;}
.nav-item .badge-dot{margin-left:auto;width:8px;height:8px;border-radius:50%;background:var(--alert);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--alert) 22%,transparent);
  animation:pulse 1.4s ease-in-out infinite;}

.sidebar .foot{margin-top:auto;font-size:12.5px;color:var(--text-soft);
  background:var(--surface);padding:11px 12px;border:1px solid var(--border);
  border-radius:var(--radius-sm);display:flex;align-items:center;gap:8px;flex:0 0 auto;}

/* ---------- Main ---------- */
.main{flex:1;min-width:0;padding:28px 34px 60px;overflow-x:hidden;}
.page-head{display:flex;align-items:flex-end;justify-content:space-between;
  gap:16px;margin-bottom:24px;flex-wrap:wrap;}
.page-head h2{font-size:27px;font-weight:700;letter-spacing:-.3px;color:var(--text);
  margin:0;display:flex;align-items:center;gap:13px;}
.page-head h2 span{font-size:25px;}
.page-head .sub{font-size:15px;color:var(--text-soft);margin-top:7px;font-weight:400;}

.hud{display:flex;gap:10px;align-items:center;}
.chip{display:flex;align-items:center;gap:8px;white-space:nowrap;
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm);
  padding:9px 13px;font-size:14px;font-weight:600;color:var(--text);box-shadow:var(--shadow-sm);}
.coin-dot{width:13px;height:13px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%, #ffe08a, var(--gold));
  box-shadow:0 0 0 2px color-mix(in srgb,var(--gold) 30%,transparent);}

/* ============================================================
   Panels / cards
   ============================================================ */
.panel{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  padding:20px;box-shadow:var(--shadow);}
.panel.tight{padding:14px;}
.panel-title{font-size:12px;font-weight:600;letter-spacing:1.4px;text-transform:uppercase;
  color:var(--text-soft);margin:0 0 16px;display:flex;align-items:center;gap:9px;}
.panel-title .dot{width:7px;height:7px;border-radius:50%;background:var(--accent);
  box-shadow:0 0 8px var(--accent-glow);}

/* ============================================================
   RPG bars
   ============================================================ */
.bar{height:9px;border-radius:6px;background:var(--surface-3);
  position:relative;overflow:hidden;border:1px solid var(--border-soft);}
.bar > i{display:block;height:100%;border-radius:6px;background-color:var(--hp);
  background-image:linear-gradient(180deg, rgba(255,255,255,.35), rgba(255,255,255,0));
  box-shadow:0 0 10px color-mix(in srgb,var(--hp) 60%,transparent);transition:width .5s;}
.bar.xp > i{background-color:var(--xp);box-shadow:0 0 10px color-mix(in srgb,var(--xp) 55%,transparent);}
.bar-row{display:flex;align-items:center;gap:9px;font-size:12px;color:var(--text-soft);font-weight:600;}
.bar-row .lab{width:26px;flex:0 0 26px;font-size:11px;font-weight:700;letter-spacing:.5px;color:var(--text-faint);}

/* ============================================================
   Status pills
   ============================================================ */
.pill{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:600;
  padding:4px 10px;border-radius:999px;border:1px solid var(--border);
  background:var(--surface-2);color:var(--text);}
.pill .pdot{width:8px;height:8px;border-radius:50%;}
.pdot.active{background:var(--hp);box-shadow:0 0 8px color-mix(in srgb,var(--hp) 70%,transparent);}
.pdot.idle{background:var(--idle);box-shadow:0 0 8px color-mix(in srgb,var(--idle) 70%,transparent);}
.pdot.sleeping{background:var(--info);box-shadow:0 0 8px color-mix(in srgb,var(--info) 70%,transparent);}
.pdot.needs{background:var(--alert);box-shadow:0 0 8px color-mix(in srgb,var(--alert) 80%,transparent);
  animation:pulse 1.1s ease-in-out infinite;}

/* ============================================================
   OFFICE — war room
   ============================================================ */
.room-wrap{display:flex;justify-content:center;}
.room{position:relative;width:1080px;height:1120px;flex:0 0 auto;transform-origin:top center;
  border:4px solid #8a5a34;border-radius:18px;overflow:hidden;
  box-shadow:0 18px 44px rgba(60,38,18,.4);}
/* warm plaster wall with two soft windows + sunlight glow */
.room .wall{position:absolute;left:0;right:0;top:0;height:188px;
  background:
    /* window panes */
    linear-gradient(180deg,#cfe7f2,#bcdbec) no-repeat 132px 38px / 168px 104px,
    linear-gradient(180deg,#cfe7f2,#bcdbec) no-repeat 780px 38px / 168px 104px,
    /* warm sunlight pooling from above */
    radial-gradient(520px 200px at 50% -60px, rgba(255,239,210,.95), transparent 72%),
    linear-gradient(180deg,#f0e2cd,#e7d4b8);}
/* window frames + sills */
.room .wall::before,.room .wall::after{content:"";position:absolute;top:32px;width:176px;height:114px;
  border:5px solid #8a5a34;border-radius:5px;box-shadow:inset 0 0 0 3px #b98a5a, 0 4px 0 rgba(90,60,30,.25);
  background:linear-gradient(90deg,transparent calc(50% - 2px),#8a5a34 calc(50% - 2px) calc(50% + 2px),transparent calc(50% + 2px)),
    linear-gradient(0deg,transparent calc(50% - 2px),#8a5a34 calc(50% - 2px) calc(50% + 2px),transparent calc(50% + 2px));}
.room .wall::before{left:128px;}
.room .wall::after{left:776px;}
/* wood chair-rail / baseboard */
.room .wainscot{position:absolute;left:0;right:0;top:166px;height:24px;z-index:1;
  background:linear-gradient(180deg,#c79a68,#a87a4c 55%,#8a5a34);
  box-shadow:inset 0 2px 0 rgba(255,255,255,.28), 0 3px 0 rgba(70,44,20,.3);}
/* warm wood-plank floor */
.room .floor{position:absolute;left:0;right:0;top:188px;bottom:0;
  background:
    repeating-linear-gradient(0deg, rgba(255,250,238,.05) 0 47px, rgba(80,50,24,.4) 47px 49px),
    repeating-linear-gradient(90deg, rgba(255,250,238,.04) 0 168px, rgba(80,50,24,.16) 168px 170px),
    linear-gradient(180deg,#cda069,#bd8e52);}
.room .floor::after{content:"";position:absolute;inset:0;
  background:
    radial-gradient(620px 320px at 28% 16%, rgba(255,243,214,.3), transparent 70%),
    radial-gradient(520px 280px at 80% 66%, rgba(255,236,198,.2), transparent 70%),
    repeating-linear-gradient(90deg, rgba(120,78,38,.05) 0 3px, transparent 3px 26px);
  opacity:.85;}
.room::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(135% 95% at 50% 6%, rgba(255,250,238,.16) 0%, transparent 46%, rgba(50,30,12,.32) 100%);}

.deco{position:absolute;}
/* window = glowing monitor wall / skylight */
.win{position:absolute;top:30px;width:156px;height:104px;border-radius:8px;
  background:linear-gradient(160deg, color-mix(in srgb,var(--accent-2) 35%,var(--surface)), var(--surface));
  border:1px solid var(--border);box-shadow:inset 0 0 24px color-mix(in srgb,var(--accent-2) 30%,transparent),
    0 0 22px color-mix(in srgb,var(--accent-2) 18%,transparent);overflow:hidden;}
.win::before{content:"";position:absolute;left:14px;right:14px;top:18px;height:6px;border-radius:3px;
  background:color-mix(in srgb,var(--accent-2) 60%,transparent);
  box-shadow:0 16px 0 color-mix(in srgb,var(--accent-2) 35%,transparent),
             0 32px 0 color-mix(in srgb,var(--accent-2) 22%,transparent);}
.win .cloud{display:none;}

.banner{font-size:12px;font-weight:700;letter-spacing:3px;color:#fff;
  background:linear-gradient(145deg,var(--accent),#5a3fd6);padding:8px 16px;border-radius:999px;
  box-shadow:0 6px 18px var(--accent-glow);}
.frame-pic{width:78px;height:56px;border-radius:8px;background:var(--surface);
  border:1px solid var(--border);overflow:hidden;}
.frame-pic > i{position:absolute;inset:8px;border-radius:5px;
  background:linear-gradient(135deg, color-mix(in srgb,var(--accent) 45%,var(--surface)), var(--surface-2));}
.clock-w{width:46px;height:46px;border-radius:12px;background:var(--surface);
  border:1px solid var(--border);display:flex;align-items:center;justify-content:center;}
.clock-w b{font-size:22px;}

.rug{position:absolute;left:50%;bottom:42px;transform:translateX(-50%);
  width:440px;height:150px;border-radius:50%;
  background:radial-gradient(ellipse at center,
    color-mix(in srgb,var(--accent) 22%,transparent) 0 42%, transparent 72%);
  border:1px solid color-mix(in srgb,var(--accent) 22%,transparent);opacity:.8;}

/* live banner sits on the wall now */
.banner{position:absolute;}
.rug{bottom:150px;}

/* ---------- Office live bar ---------- */
.office-bar{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:14px;}
.ob-live{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:700;
  color:var(--text);background:var(--surface);border:1px solid var(--border);
  border-radius:999px;padding:7px 14px;box-shadow:var(--shadow-sm);}
.ob-dot{width:9px;height:9px;border-radius:50%;background:var(--hp);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--hp) 22%,transparent);animation:pulse 1.6s ease-in-out infinite;}
.ob-hint{font-size:13px;color:var(--text-soft);}

/* ---------- Furniture ---------- */
.fwhiteboard{width:240px;height:96px;border-radius:8px;background:#10182a;
  border:2px solid var(--border);box-shadow:inset 0 0 0 4px #0c1322, var(--shadow-sm);overflow:hidden;}
.fwhiteboard i{position:absolute;height:5px;border-radius:3px;background:color-mix(in srgb,var(--accent-2) 60%,transparent);}
.fwhiteboard .wb1{left:18px;top:22px;width:120px;}
.fwhiteboard .wb2{left:18px;top:42px;width:180px;background:color-mix(in srgb,var(--accent) 60%,transparent);}
.fwhiteboard .wb3{left:18px;top:62px;width:90px;background:color-mix(in srgb,var(--hp) 60%,transparent);}

/* agent desk */
.fdesk{position:absolute;width:150px;height:70px;z-index:2;}
.fdesk-top{position:absolute;top:0;left:0;right:0;height:46px;border-radius:9px;
  background:linear-gradient(180deg,var(--surface-2),var(--surface));
  border:1px solid var(--border);box-shadow:inset 0 1px 0 rgba(255,255,255,.06),var(--shadow-sm);
  border-top:3px solid var(--ac);display:flex;align-items:center;gap:9px;padding:0 12px;}
.fmon{width:34px;height:24px;border-radius:4px;background:var(--ac);
  box-shadow:0 0 12px color-mix(in srgb,var(--ac) 55%,transparent);flex:0 0 auto;}
.fname{font-size:11px;font-weight:700;letter-spacing:1px;color:var(--text-soft);text-transform:uppercase;}
.fdesk-leg{position:absolute;top:44px;width:6px;height:20px;background:var(--border);border-radius:0 0 3px 3px;}
.fdesk-leg.l{left:16px;} .fdesk-leg.r{right:16px;}

/* copier / printer */
.fcopier{position:absolute;width:62px;height:74px;border-radius:8px;z-index:2;
  background:linear-gradient(180deg,var(--surface-3),var(--surface));border:1px solid var(--border);box-shadow:var(--shadow-sm);}
.fcopier i{position:absolute;left:10px;right:10px;top:30px;height:6px;background:var(--surface);
  border:1px solid var(--border);border-radius:2px;box-shadow:0 9px 0 -1px var(--surface),0 9px 0 var(--border);}
.fcopier .led{position:absolute;right:9px;top:9px;width:7px;height:7px;border-radius:50%;
  background:var(--hp);box-shadow:0 0 8px var(--hp);animation:pulse 1.4s ease-in-out infinite;}

/* bookshelf */
.fshelf{position:absolute;width:64px;height:150px;border-radius:7px;z-index:2;padding:8px;
  background:linear-gradient(180deg,var(--surface-3),var(--surface));border:1px solid var(--border);
  display:flex;flex-direction:column;gap:8px;box-shadow:var(--shadow-sm);}
.fshelf i{display:block;height:26px;border-radius:2px;border:1px solid var(--border);
  background:repeating-linear-gradient(90deg,
    color-mix(in srgb,var(--accent) 45%,var(--surface)) 0 7px,
    color-mix(in srgb,var(--accent-2) 45%,var(--surface)) 7px 13px,
    color-mix(in srgb,var(--xp) 45%,var(--surface)) 13px 20px);}

/* server rack */
.fserver{position:absolute;width:54px;height:150px;border-radius:7px;z-index:2;padding:8px;
  background:linear-gradient(180deg,#0c1322,var(--surface));border:1px solid var(--border);
  display:flex;flex-direction:column;gap:7px;box-shadow:var(--shadow-sm);}
.fserver span{display:block;height:22px;border-radius:2px;background:var(--surface-2);
  border:1px solid var(--border);position:relative;}
.fserver span::after{content:"";position:absolute;right:6px;top:8px;width:6px;height:6px;border-radius:50%;
  background:var(--accent-2);box-shadow:0 0 7px var(--accent-2);animation:pulse 1.8s ease-in-out infinite;}
.fserver span:nth-child(2)::after{background:var(--hp);box-shadow:0 0 7px var(--hp);animation-delay:.5s;}
.fserver span:nth-child(3)::after{background:var(--xp);box-shadow:0 0 7px var(--xp);animation-delay:.9s;}

/* coffee station */
.fcoffee{position:absolute;width:74px;height:54px;border-radius:8px;z-index:2;
  background:linear-gradient(180deg,var(--surface-2),var(--surface));border:1px solid var(--border);box-shadow:var(--shadow-sm);}
.fcoffee i{position:absolute;left:14px;top:12px;width:24px;height:28px;border-radius:3px;
  background:#0c1322;border:1px solid var(--border);}
.fcoffee .led{position:absolute;right:12px;top:14px;width:7px;height:7px;border-radius:50%;
  background:var(--alert);box-shadow:0 0 8px var(--alert);animation:pulse 1.5s ease-in-out infinite;}

/* filing cabinet */
.ffiling{position:absolute;width:56px;height:72px;border-radius:7px;z-index:2;padding:7px;
  background:linear-gradient(180deg,var(--surface-2),var(--surface));border:1px solid var(--border);
  display:flex;flex-direction:column;gap:6px;box-shadow:var(--shadow-sm);}
.ffiling i{display:block;flex:1;border-radius:3px;background:var(--surface-3);border:1px solid var(--border);position:relative;}
.ffiling i::after{content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:14px;height:3px;border-radius:2px;background:var(--text-faint);}

/* phone desk */
.fphone{position:absolute;width:62px;height:42px;border-radius:8px;z-index:2;
  background:linear-gradient(180deg,var(--surface-2),var(--surface));border:1px solid var(--border);box-shadow:var(--shadow-sm);}
.fphone i{position:absolute;left:16px;top:11px;width:18px;height:18px;border-radius:50%;
  background:var(--accent);box-shadow:0 0 10px color-mix(in srgb,var(--accent) 60%,transparent);}

/* plant */
.fplant{position:absolute;width:34px;height:40px;border-radius:0 0 6px 6px;z-index:2;
  background:linear-gradient(180deg,#0c1322,var(--surface));border:1px solid var(--border);}
.fplant::before{content:"";position:absolute;left:50%;top:-16px;transform:translateX(-50%);
  width:30px;height:30px;border-radius:50% 50% 45% 45%;
  background:radial-gradient(circle at 40% 35%, var(--hp), color-mix(in srgb,var(--hp) 55%,#04210f));
  box-shadow:0 0 14px color-mix(in srgb,var(--hp) 35%,transparent);}

/* ---------- Roaming actor ---------- */
.agent-actor{position:absolute;top:0;left:0;cursor:pointer;
  transition-property:transform;transition-timing-function:cubic-bezier(.45,0,.55,1);will-change:transform;}
.actor-inner{position:absolute;left:0;top:0;transform:translate(-50%,-100%);}
.actor-shadow{position:absolute;left:50%;bottom:-4px;transform:translateX(-50%);
  width:74px;height:20px;border-radius:50%;background:rgba(0,0,0,.4);filter:blur(3px);z-index:0;}
.actor-face{position:relative;z-index:1;}
.actor-bob{position:relative;}
.actor-bob.walking{animation:walk .5s ease-in-out infinite;transform-origin:50% 100%;}
@keyframes walk{0%,100%{transform:translateY(0) scaleY(1);}
  25%{transform:translateY(-3px) scaleY(1.02);}
  50%{transform:translateY(0) scaleY(.98);}
  75%{transform:translateY(-3px) scaleY(1.02);}}
.actor-inner.sleeping .actor-bob{filter:saturate(.5) brightness(.78);animation:none;}

.actor-inner.sel .actor-shadow{background:radial-gradient(ellipse at center,
  color-mix(in srgb,var(--accent) 60%,transparent),transparent 70%);width:92px;height:26px;filter:blur(2px);}
.actor-inner.sel::after{content:"";position:absolute;left:50%;bottom:-8px;transform:translateX(-50%);
  width:96px;height:30px;border-radius:50%;border:2px solid var(--accent);
  box-shadow:0 0 16px var(--accent-glow);}

/* nameplate following each dog */
.actor-plate{position:absolute;left:50%;top:100%;transform:translateX(-50%);margin-top:8px;z-index:2;
  display:flex;align-items:center;gap:7px;white-space:nowrap;
  background:var(--surface);border:1px solid var(--border);border-top-width:2px;border-radius:999px;
  padding:4px 11px 4px 8px;box-shadow:var(--shadow-sm);}
.ap-dot{width:8px;height:8px;border-radius:50%;}
.ap-nm{font-size:12.5px;font-weight:700;color:var(--text);}
.ap-lv{font-size:10px;font-weight:700;color:var(--text-soft);background:var(--surface-2);
  border:1px solid var(--border);border-radius:999px;padding:1px 6px;}

/* activity bubble above dog */
.act-bubble{position:absolute;left:50%;bottom:100%;transform:translateX(-50%);margin-bottom:6px;z-index:7;
  background:var(--surface);border:1px solid var(--border);border-radius:999px;box-shadow:var(--shadow-sm);
  padding:5px 11px;white-space:nowrap;font-size:12px;font-weight:600;color:var(--text);
  animation:bubblein .25s ease;}
.act-bubble::after{content:"";position:absolute;bottom:-5px;left:50%;margin-left:-4px;width:8px;height:8px;
  background:var(--surface);border-right:1px solid var(--border);border-bottom:1px solid var(--border);transform:rotate(45deg);}
.act-bubble.needs{background:color-mix(in srgb,var(--alert) 22%,var(--surface));border-color:var(--alert);
  color:#ffd9dd;animation:pop 1.2s ease-in-out infinite;}
.act-bubble.needs::after{background:color-mix(in srgb,var(--alert) 22%,var(--surface));border-color:var(--alert);}
@keyframes bubblein{from{opacity:0;transform:translateX(-50%) translateY(4px);}}
@keyframes pop{50%{transform:translateX(-50%) translateY(-3px);}}
@keyframes bob{50%{transform:translateY(-4px);}}
@keyframes sleepbreath{50%{transform:translateY(-2px) scaleY(.99);}}

.room.no-bubbles .act-bubble{display:none !important;}

/* ============================================================
   GAME BOY skin for the office (Pokémon GBC overworld vibe)
   ============================================================ */
/* live bar as a dialogue box */
.office-bar.gb .ob-live{background:#f3f6dc;border:3px solid #1c330f;border-radius:8px;
  box-shadow:inset 0 0 0 2px #8fae4e, 2px 2px 0 #1c330f;color:#1c330f;
  font-family:'Press Start 2P',monospace;font-size:9px;padding:8px 12px;}
.office-bar.gb .ob-live .ob-dot{background:#3a7a2a;box-shadow:none;border-radius:2px;}
.office-bar.gb .ob-hint{font-family:'Press Start 2P',monospace;font-size:9px;line-height:1.7;}

/* the Game Boy screen frame */
.room.gb{border:0;border-radius:10px;
  box-shadow:0 0 0 6px #1c330f, 0 0 0 10px #9bbc0f, 0 18px 40px rgba(20,40,10,.45);}

/* top: forest treeline border instead of sky */
.room.gb .wall{
  background:
    radial-gradient(circle at 24px 40px, #366e28 0 21px, transparent 22px),
    radial-gradient(circle at 0 40px, #2c5d20 0 21px, transparent 22px),
    radial-gradient(circle at 24px 96px, #2c5d20 0 19px, transparent 20px),
    radial-gradient(circle at 0 96px, #366e28 0 19px, transparent 20px),
    linear-gradient(180deg,#23501b,#2c5d20);
  background-size:48px 100%,48px 100%,48px 100%,48px 100%,100% 100%;
  background-repeat:repeat-x;
  box-shadow:inset 0 -8px 0 rgba(20,40,10,.4);}
.room.gb .wainscot{display:none;}
.room.gb .deco{display:none;}

/* grass tiles (checker + tufts) */
.room.gb .floor,
.room.gb .lounge-floor{
  background-color:#7cbf48;
  background-image:
    radial-gradient(circle at 8px 22px, rgba(28,51,15,.42) 0 1.6px, transparent 2.3px),
    radial-gradient(circle at 24px 7px, rgba(28,51,15,.42) 0 1.6px, transparent 2.3px),
    conic-gradient(#7cbf48 0 25%, #6cb03f 0 50%, #7cbf48 0 75%, #6cb03f 0 100%);
  background-size:32px 32px,32px 32px,32px 32px;}
.room.gb .floor::after{content:none;}
.room.gb .lounge-floor{border-top:4px solid #1c330f;}

/* tall-grass clearings where the rugs were */
.room.gb .meeting-rug,.room.gb .lounge-rug,.room.gb .collab-rug{
  border-radius:12px;border:2px solid rgba(28,51,15,.45);
  background:repeating-linear-gradient(0deg, #4f9a32 0 4px, #5fa83c 4px 8px);
  opacity:.9;}

/* nameplates → GB window box */
.room.gb .actor-plate{background:#f3f6dc;border:2px solid #1c330f !important;border-radius:7px;
  box-shadow:inset 0 0 0 2px #8fae4e, 2px 2px 0 rgba(28,51,15,.6);
  font-family:'Press Start 2P',monospace;padding:5px 8px;gap:6px;}
.room.gb .ap-nm{font-size:8px;color:#1c330f;}
.room.gb .ap-lv{font-size:7px;color:#1c330f;background:#cfe888;border:1px solid #1c330f;border-radius:3px;padding:1px 4px;}
.room.gb .ap-dot{border-radius:1px;}

/* activity bubbles → NPC dialogue box */
.room.gb .act-bubble{background:#f3f6dc;border:2px solid #1c330f;border-radius:7px;
  box-shadow:inset 0 0 0 2px #8fae4e, 2px 2px 0 rgba(28,51,15,.5);
  font-family:'Press Start 2P',monospace;font-size:8px;color:#1c330f;padding:6px 9px;}
.room.gb .act-bubble::after{background:#f3f6dc;border-right:2px solid #1c330f;border-bottom:2px solid #1c330f;}
.room.gb .act-bubble.needs{background:#ecd34c;color:#5a3a0c;border-color:#1c330f;}
.room.gb .act-bubble.needs::after{background:#ecd34c;border-color:#1c330f;}

/* selected dog → GB cursor outline */
.room.gb .actor-inner.sel::after{border-radius:8px;border:2px solid #1c330f;box-shadow:0 0 0 2px #f3f6dc;}
.room.gb .actor-inner.sel .actor-shadow{background:radial-gradient(ellipse at center,rgba(28,51,15,.5),transparent 70%);}

/* zone signs → wooden signpost */
.room.gb .zone-sign{font-family:'Press Start 2P',monospace;font-size:8px;background:#f3f6dc;
  border:2px solid #1c330f;box-shadow:inset 0 0 0 2px #8fae4e,2px 2px 0 #1c330f;color:#1c330f;border-radius:6px;}

/* ============================================================
   LATE-90s CUBICLE skin  (.room.r90)
   ============================================================ */
.deco90{display:none;}
.room.r90 .deco90{display:block;position:absolute;z-index:1;}
.room.r90{border:4px solid #6f685c;box-shadow:0 18px 44px rgba(40,38,32,.4);}

/* back wall = beige cubicle fabric panels */
.room.r90 .wall{
  background:
    repeating-linear-gradient(90deg, rgba(0,0,0,.04) 0 178px, rgba(40,36,30,.22) 178px 183px),
    repeating-linear-gradient(0deg, rgba(255,255,255,.05) 0 2px, rgba(90,84,72,.07) 2px 4px),
    linear-gradient(180deg,#bcb4a3,#ada491);}
/* aluminium trim under the cubicle wall */
.room.r90 .wainscot{top:172px;height:16px;
  background:linear-gradient(180deg,#d3cec3,#9a9384 58%,#7c7567);
  box-shadow:inset 0 2px 0 rgba(255,255,255,.45),0 2px 0 rgba(50,46,40,.32);}
/* speckled commercial carpet */
.room.r90 .floor{
  background-color:#8f97a0;
  background-image:
    radial-gradient(circle at 6px 9px, rgba(38,42,50,.38) 0 1.3px, transparent 2px),
    radial-gradient(circle at 19px 23px, rgba(255,255,255,.2) 0 1.3px, transparent 2px),
    radial-gradient(circle at 27px 5px, rgba(38,42,50,.32) 0 1.2px, transparent 2px),
    radial-gradient(circle at 12px 29px, rgba(66,76,90,.42) 0 1.4px, transparent 2px);
  background-size:34px 34px,34px 34px,34px 34px,34px 34px;}
.room.r90 .floor::after{content:"";position:absolute;inset:0;
  background:
    repeating-linear-gradient(0deg, transparent 0 64px, rgba(38,42,50,.13) 64px 66px),
    repeating-linear-gradient(90deg, transparent 0 64px, rgba(38,42,50,.1) 64px 66px);
  opacity:.7;}
.room.r90::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(140% 100% at 50% 0%, rgba(255,255,245,.22) 0%, transparent 42%, rgba(30,30,26,.3) 100%);}

/* bottom rooms → carpet too */
.room.r90 .lounge-floor{
  background-color:#8f97a0;
  background-image:
    radial-gradient(circle at 6px 9px, rgba(38,42,50,.38) 0 1.3px, transparent 2px),
    radial-gradient(circle at 19px 23px, rgba(255,255,255,.2) 0 1.3px, transparent 2px),
    radial-gradient(circle at 27px 5px, rgba(38,42,50,.32) 0 1.2px, transparent 2px),
    radial-gradient(circle at 12px 29px, rgba(66,76,90,.42) 0 1.4px, transparent 2px);
  background-size:34px 34px,34px 34px,34px 34px,34px 34px;
  border-top:4px solid #6f685c;box-shadow:inset 0 6px 12px rgba(40,40,36,.2);}

/* --- wall decor --- */
/* motivational poster (framed sunset) */
.room.r90 .d90-poster{left:78px;top:32px;width:150px;height:114px;
  border:7px solid #16161c;border-radius:2px;
  background:linear-gradient(180deg,#1d2b54 0%,#5a2a52 48%,#c0432f 78%,#e07a3a 100%);
  box-shadow:0 7px 16px rgba(0,0,0,.34), inset 0 0 0 2px #2c2c34;}
.room.r90 .d90-poster::after{content:"FOCO";position:absolute;left:0;right:0;top:42px;
  text-align:center;font-family:var(--font);font-weight:800;font-size:26px;letter-spacing:3px;
  color:#fff;text-shadow:0 2px 4px rgba(0,0,0,.5);}
/* pinned paper memos */
.room.r90 .d90-papers{width:48px;height:60px;
  background:repeating-linear-gradient(0deg,#f5f2e9 0 7px,#dcd6c6 7px 8px);
  border:1px solid #c7bfac;
  box-shadow:6px 5px 0 -1px rgba(0,0,0,.06), 11px 9px 0 -2px rgba(0,0,0,.05), 0 4px 9px rgba(0,0,0,.16);}
.room.r90 .d90-papers::before{content:"";position:absolute;left:50%;top:-5px;width:8px;height:8px;
  margin-left:-4px;border-radius:50%;background:#d24b3a;box-shadow:0 0 0 1px #7a1f17;}
.room.r90 .d90-papers.a{left:300px;top:34px;transform:rotate(-4deg);}
.room.r90 .d90-papers.b{left:560px;top:40px;transform:rotate(3deg);}
/* wall calendar */
.room.r90 .d90-cal{left:884px;top:38px;width:104px;height:110px;background:#fbfaf5;
  border:2px solid #b3ab99;box-shadow:0 6px 14px rgba(0,0,0,.22);
  background-image:
    linear-gradient(#c0432f,#c0432f) no-repeat 0 0 / 100% 22px,
    repeating-linear-gradient(90deg, transparent 0 16px, rgba(120,116,104,.4) 16px 17px),
    repeating-linear-gradient(0deg, transparent 0 16px, rgba(120,116,104,.4) 16px 17px);
  background-position:0 0, 0 24px, 0 24px;}
.room.r90 .d90-cal::after{content:"2000";position:absolute;left:0;right:0;top:3px;text-align:center;
  font-family:var(--font);font-weight:800;font-size:12px;letter-spacing:2px;color:#fff;}
/* round wall clock */
.room.r90 .d90-clock{left:770px;top:50px;width:54px;height:54px;border-radius:50%;
  background:#fbfaf5;border:5px solid #26262b;box-shadow:0 5px 12px rgba(0,0,0,.28);}
.room.r90 .d90-clock::before,.room.r90 .d90-clock::after{content:"";position:absolute;
  left:50%;top:50%;background:#26262b;transform-origin:bottom center;}
.room.r90 .d90-clock::before{width:3px;height:15px;margin-left:-1.5px;margin-top:-15px;transform:rotate(42deg);}
.room.r90 .d90-clock::after{width:3px;height:20px;margin-left:-1.5px;margin-top:-20px;transform:rotate(-70deg);}

/* ===== Agent info panel pinned at top of the office ===== */
.agent-top{position:relative;display:grid;grid-template-columns:minmax(252px,0.95fr) 1.25fr 1fr;gap:22px;
  border:1px solid var(--border);border-left-width:4px;border-radius:var(--radius);
  padding:18px 20px;margin-bottom:16px;box-shadow:var(--shadow);
  animation:topin .28s cubic-bezier(.2,.8,.3,1);}
@keyframes topin{from{opacity:0;transform:translateY(-10px);}}
.at-close{position:absolute;top:12px;right:12px;width:30px;height:30px;border-radius:8px;
  background:var(--surface-2);border:1px solid var(--border);color:var(--text-soft);
  font-size:13px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .15s;z-index:2;}
.at-close:hover{background:var(--surface-3);color:var(--text);}
.at-id{display:flex;gap:15px;align-items:flex-start;}
.at-id .avatar-box{flex:0 0 auto;width:max-content;height:max-content;}
.at-nm{font-size:20px;font-weight:700;color:var(--text);display:flex;align-items:center;gap:9px;flex-wrap:wrap;}
.at-rl{font-size:13.5px;color:var(--text-soft);margin-top:4px;font-weight:500;}
.at-breed{font-size:12.5px;color:var(--text-faint);margin-top:3px;font-weight:600;}
.at-now{display:flex;flex-direction:column;gap:9px;border-left:1px solid var(--border);padding-left:22px;}
.at-doing{font-size:14.5px;font-weight:600;line-height:1.4;color:var(--text);}
.at-bars{display:flex;flex-direction:column;gap:8px;}
.at-skills{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px;}
.at-feed-col{border-left:1px solid var(--border);padding-left:22px;}
.at-request-col{grid-column:1 / -1;border-top:1px solid var(--border);padding-top:16px;}
.am-lv{font-size:11px;font-weight:700;padding:3px 9px;border-radius:999px;}
.am-tasks{font-size:13px;color:var(--text-soft);font-weight:700;}
.am-feed{display:flex;gap:11px;font-size:13.5px;line-height:1.4;}
.am-feed b{font-family:var(--mono);font-size:12px;flex:0 0 44px;}
.am-feed span{color:var(--text);font-weight:500;}
.agent-request-btn{align-self:flex-start;padding:8px 11px;border-radius:9px;border:1px solid color-mix(in srgb,var(--alert) 45%,transparent);
  background:color-mix(in srgb,var(--alert) 12%,var(--surface));color:#ffb0b7;
  font-size:12.5px;font-weight:700;cursor:pointer;font-family:var(--font);}
.agent-request-btn:hover{background:color-mix(in srgb,var(--alert) 20%,var(--surface));}
.agent-request{border:1px solid color-mix(in srgb,var(--agent) 42%,var(--border));
  border-left:4px solid var(--agent);border-radius:var(--radius-sm);padding:16px;
  background:linear-gradient(120deg,color-mix(in srgb,var(--agent) 12%,var(--surface-2)),var(--surface-2) 55%);
  box-shadow:var(--shadow-sm);}
.agent-request.done{opacity:.82;}
.ar-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;margin-bottom:10px;}
.ar-head h3{margin:0;font-size:18px;line-height:1.25;color:var(--text);}
.ar-summary{margin:0 0 12px;font-size:14px;line-height:1.55;color:var(--text-soft);font-weight:500;}
.ar-meta{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:13px;}
.ar-meta span{font-size:12px;color:var(--text-soft);border:1px solid var(--border);border-radius:999px;padding:4px 9px;background:var(--surface);}
.ar-meta b{color:var(--text);}
.ar-checks{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-bottom:14px;}
.ar-checks div{display:flex;gap:8px;align-items:flex-start;padding:9px;border-radius:9px;
  border:1px solid var(--border-soft);background:color-mix(in srgb,var(--surface) 70%,transparent);
  font-size:12.5px;line-height:1.35;color:var(--text-soft);font-weight:600;}
.ar-checks span{color:var(--agent);font-family:var(--mono);font-weight:800;}
.ar-field{display:block;margin-bottom:12px;}
.ar-field span{display:block;font-size:12px;font-weight:700;color:var(--text);margin-bottom:8px;}
.ar-field textarea{width:100%;min-height:78px;resize:vertical;border-radius:10px;border:1px solid var(--border);
  background:var(--surface);color:var(--text);padding:11px 12px;font-family:var(--font);font-size:14px;line-height:1.45;}
.ar-field textarea:focus{outline:none;border-color:var(--agent);}
.ar-actions{display:flex;flex-wrap:wrap;gap:8px;}
.ar-actions button{border:1px solid var(--border);border-radius:9px;background:var(--surface);
  color:var(--text-soft);padding:9px 11px;font-family:var(--font);font-size:12.5px;font-weight:700;cursor:pointer;}
.ar-actions button.on{border-color:color-mix(in srgb,var(--agent) 55%,var(--border));color:var(--text);
  background:color-mix(in srgb,var(--agent) 14%,var(--surface));}
.ar-actions button.primary{margin-left:auto;background:var(--agent);border-color:var(--agent);color:#111827;}
.ar-done{display:flex;flex-direction:column;gap:6px;padding:11px;border-radius:10px;border:1px solid color-mix(in srgb,var(--hp) 42%,var(--border));
  background:color-mix(in srgb,var(--hp) 10%,var(--surface));font-size:13px;color:var(--text-soft);}
.ar-done b{color:var(--hp);}
@media(max-width:1080px){
  .agent-top{grid-template-columns:1fr 1fr;}
  .at-feed-col{grid-column:1 / -1;border-left:none;padding-left:0;border-top:1px solid var(--border);padding-top:14px;}
  .ar-checks{grid-template-columns:1fr;}
}
@media(max-width:680px){
  .agent-top{grid-template-columns:1fr;}
  .at-now{border-left:none;padding-left:0;border-top:1px solid var(--border);padding-top:14px;}
}

/* central collaboration rug (work zone) */
.collab-rug{position:absolute;left:548px;top:476px;transform:translate(-50%,-50%);
  width:360px;height:180px;border-radius:50%;z-index:1;
  background:radial-gradient(ellipse at center,
    color-mix(in srgb,var(--accent-2) 15%,transparent) 0 46%, transparent 74%);
  border:1px solid color-mix(in srgb,var(--accent-2) 20%,transparent);}

/* ---- bottom rooms: same grass, divided by hedges/partitions ---- */
/* ---- bottom rooms: warm wood floor, divided by partitions ---- */
.lounge-floor{position:absolute;left:0;right:0;top:800px;bottom:0;z-index:0;
  background:
    repeating-linear-gradient(0deg, rgba(255,250,238,.05) 0 47px, rgba(80,50,24,.4) 47px 49px),
    repeating-linear-gradient(90deg, rgba(255,250,238,.04) 0 168px, rgba(80,50,24,.16) 168px 170px),
    linear-gradient(180deg,#c79c64,#b88a50);
  border-top:5px solid #8a5a34;
  box-shadow:inset 0 6px 12px rgba(70,44,20,.22);}
.partition{position:absolute;top:792px;height:18px;border-radius:5px;z-index:6;
  background:linear-gradient(180deg,var(--surface-3),var(--surface));
  border:1px solid var(--border);box-shadow:0 3px 0 rgba(0,0,0,.35);}
.partition.left{left:28px;width:454px;}
.partition.right{right:28px;width:454px;}
.partition.post{width:18px;height:30px;top:786px;background:var(--surface-3);
  border:1px solid var(--border);border-radius:4px;box-shadow:0 3px 0 rgba(0,0,0,.35);}

/* vertical divider splitting the bottom into meeting + leisure */
.room-split{position:absolute;left:531px;top:812px;bottom:14px;width:18px;z-index:6;border-radius:5px;
  background:linear-gradient(90deg,var(--surface-3),var(--surface));
  border:1px solid var(--border);box-shadow:3px 0 0 rgba(0,0,0,.35);}

.zone-sign{position:absolute;top:770px;transform:translateX(-50%);z-index:7;
  font-size:11px;font-weight:700;letter-spacing:2px;white-space:nowrap;
  color:var(--accent-2);background:var(--surface);border:1px solid var(--border);
  border-radius:999px;padding:4px 12px;box-shadow:var(--shadow-sm);}
.zone-sign.play{color:var(--accent);}

/* meeting-room rug (bottom-left) */
.meeting-rug{position:absolute;left:272px;top:940px;transform:translate(-50%,-50%);
  width:460px;height:270px;border-radius:18px;z-index:1;
  background:radial-gradient(ellipse at center,
    color-mix(in srgb,var(--accent-2) 16%,transparent) 0 48%, transparent 82%);
  border:1px solid color-mix(in srgb,var(--accent-2) 22%,transparent);}

/* leisure rug (bottom-right) */
.lounge-rug{position:absolute;left:806px;top:940px;transform:translate(-50%,-50%);
  width:470px;height:270px;border-radius:50%;z-index:1;
  background:radial-gradient(ellipse at center,
    color-mix(in srgb,var(--accent) 20%,transparent) 0 42%,
    color-mix(in srgb,var(--accent-2) 12%,transparent) 42% 70%, transparent 80%);
  border:2px dashed color-mix(in srgb,var(--accent) 26%,transparent);}

/* cubicle owner label */
.cubicle-name{position:absolute;left:50%;top:54px;transform:translateX(-50%);
  display:flex;align-items:center;gap:6px;white-space:nowrap;z-index:1;
  font-size:10px;font-weight:700;letter-spacing:.5px;color:var(--text-soft);
  background:var(--surface);border:1px solid var(--border);border-radius:999px;padding:2px 8px;}
.cn-dot{width:6px;height:6px;border-radius:50%;}

/* ============================================================
   Cards / grid
   ============================================================ */
.grid{display:grid;gap:18px;}
.g2{grid-template-columns:repeat(2,1fr);}
.g3{grid-template-columns:repeat(3,1fr);}
.g4{grid-template-columns:repeat(4,1fr);}

.agent-card{display:flex;gap:15px;align-items:center;}
.agent-card .meta{flex:1;min-width:0;}
.agent-card .meta .nm{font-size:17px;font-weight:700;color:var(--text);}
.agent-card .meta .rl{font-size:13px;color:var(--text-soft);margin:3px 0 9px;font-weight:500;}
.avatar-box{background:var(--surface-2);border:1px solid var(--border);border-radius:12px;padding:9px;}

.stat{display:flex;flex-direction:column;gap:5px;}
.stat .big{font-size:30px;font-weight:700;color:var(--text);letter-spacing:-1px;}
.stat .lbl{font-size:11.5px;color:var(--text-soft);font-weight:600;text-transform:uppercase;letter-spacing:1px;}

.row{display:flex;align-items:center;gap:12px;padding:12px 13px;border-radius:var(--radius-sm);
  background:var(--surface-2);border:1px solid var(--border-soft);margin-bottom:9px;transition:border-color .15s;}
.row:last-child{margin-bottom:0;}
.row[onclick]:hover,.row.clickable:hover{border-color:color-mix(in srgb,var(--accent) 45%,transparent);}
.row .check{width:20px;height:20px;flex:0 0 20px;border-radius:6px;border:1px solid var(--border);
  background:var(--surface);display:flex;align-items:center;justify-content:center;font-size:13px;color:var(--hp);}
.row.done{opacity:.55;}
.row.done .ttl{text-decoration:line-through;}
.row .ttl{flex:1;font-size:14.5px;font-weight:500;color:var(--text);}
.row .who{font-size:12px;color:var(--text-soft);font-weight:600;}
.row-action{font-family:var(--font);cursor:pointer;}
.tag{font-size:11px;font-weight:600;padding:3px 9px;border-radius:999px;border:1px solid var(--border);
  background:var(--surface);color:var(--text-soft);}
.tag.p-high{background:color-mix(in srgb,var(--alert) 16%,transparent);border-color:color-mix(in srgb,var(--alert) 45%,transparent);color:#ff9aa3;}
.tag.p-med{background:color-mix(in srgb,var(--idle) 16%,transparent);border-color:color-mix(in srgb,var(--idle) 45%,transparent);color:#f3c07e;}
.tag.p-low{background:color-mix(in srgb,var(--hp) 14%,transparent);border-color:color-mix(in srgb,var(--hp) 40%,transparent);color:#8fe3b4;}

/* ---- Kanban ---- */
.kanban{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;align-items:start;}
.kcol{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  padding:14px;box-shadow:var(--shadow);transition:border-color .15s,background .15s;}
.kcol.over{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 8%,var(--surface));}
.kcol-head{display:flex;align-items:center;gap:9px;margin-bottom:14px;font-size:13px;
  text-transform:uppercase;letter-spacing:1px;color:var(--text);}
.kcol-head b{font-weight:700;}
.kdot{width:8px;height:8px;border-radius:50%;}
.kcount{margin-left:auto;font-size:12px;font-weight:700;color:var(--text-soft);
  background:var(--surface-2);border:1px solid var(--border);border-radius:999px;padding:1px 9px;}
.kcol-body{display:flex;flex-direction:column;gap:10px;min-height:64px;}
.kcard{background:var(--surface-2);border:1px solid var(--border);border-left:3px solid var(--pc,var(--border));border-radius:var(--radius-sm);
  padding:12px 13px;cursor:grab;transition:border-color .15s,box-shadow .15s,opacity .15s;}
.kcard:hover{box-shadow:var(--shadow-sm);}
.kcard:active{cursor:grabbing;}
.kcard.dragging{opacity:.4;border-style:dashed;}
.kcard.kdone{opacity:.62;}
.kcard.kdone .kcard-title{color:var(--text-soft);}
.pri-dot{width:7px;height:7px;border-radius:50%;flex:0 0 7px;display:inline-block;}
.pri-dot.p-high{background:var(--alert);}
.pri-dot.p-med{background:var(--idle);}
.pri-dot.p-low{background:var(--hp);}
.kcard-title{display:flex;align-items:baseline;gap:8px;font-size:14px;font-weight:600;color:var(--text);line-height:1.4;}
.kcard-foot{display:flex;align-items:center;gap:8px;margin-top:11px;}
.kcard-foot .who{font-size:12px;color:var(--text-soft);font-weight:600;}
.kdue{margin-left:auto;font-size:11.5px;font-weight:500;color:var(--text-faint);}
.kchk{font-size:11px;font-weight:600;color:var(--text-soft);background:var(--surface-2);
  border:1px solid var(--border);border-radius:99px;padding:0 7px;}
.kcard-foot .kdue + .kchk{margin-left:0;}
.kcard{cursor:pointer;}

/* ============================================================
   TASK DETAIL DRAWER
   ============================================================ */
.td-scrim{position:fixed;inset:0;z-index:200;background:rgba(8,10,16,.5);
  backdrop-filter:blur(2px);display:flex;justify-content:flex-end;
  animation:tdfade .16s ease;}
@keyframes tdfade{from{opacity:0;}}
.td{width:min(440px,100%);height:100%;overflow-y:auto;background:var(--surface);
  border-left:1px solid var(--border);box-shadow:-12px 0 40px rgba(0,0,0,.3);
  padding:22px 24px 30px;animation:tdslide .22s cubic-bezier(.2,.7,.3,1);
  font-family:var(--font);}
@keyframes tdslide{from{transform:translateX(28px);opacity:.4;}}

.td-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px;}
.td-proj{font-size:11.5px;font-weight:600;color:var(--pc,var(--text-soft));
  background:color-mix(in srgb,var(--pc,var(--accent)) 12%,transparent);
  border:1px solid color-mix(in srgb,var(--pc,var(--accent)) 30%,transparent);
  border-radius:99px;padding:3px 11px;}
.td-x{width:30px;height:30px;flex:0 0 30px;border-radius:8px;border:1px solid var(--border);
  background:var(--surface-2);color:var(--text-soft);font-size:13px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;transition:background .12s,color .12s;}
.td-x:hover{background:var(--surface-3,var(--surface-2));color:var(--text);}

.td-title{margin:0 0 20px;font-size:21px;font-weight:700;color:var(--text);
  line-height:1.3;letter-spacing:-.2px;}

.td-meta{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:18px;}
.td-field{margin-bottom:18px;}
.td-lab{display:block;font-size:11px;font-weight:600;letter-spacing:.8px;text-transform:uppercase;
  color:var(--text-faint);margin-bottom:8px;}
.td-lab-row{display:flex;align-items:center;justify-content:space-between;}
.td-chkcount{font-size:11.5px;font-weight:700;color:var(--text-soft);text-transform:none;letter-spacing:0;}
.td-val{font-size:14px;font-weight:600;color:var(--text);}
.td-now{color:#e2a356;}
.td-who{display:flex;align-items:center;gap:9px;font-size:14px;font-weight:600;color:var(--text);}
.td-who canvas{border-radius:6px;background:var(--surface-2);}

/* segmented controls */
.td-seg{display:flex;gap:6px;}
.td-segbtn{flex:1;padding:9px 6px;border-radius:8px;border:1px solid var(--border);
  background:var(--surface-2);color:var(--text-soft);font-size:12.5px;font-weight:600;
  cursor:pointer;transition:all .12s;font-family:var(--font);}
.td-segbtn:hover{border-color:var(--border-soft);color:var(--text);}
.td-segbtn.on{background:color-mix(in srgb,var(--sc,var(--accent)) 16%,var(--surface));
  border-color:color-mix(in srgb,var(--sc,var(--accent)) 55%,var(--border));color:var(--text);}
.td-segbtn.pri-high.on{--sc:var(--alert);}
.td-segbtn.pri-med.on{--sc:var(--idle);}
.td-segbtn.pri-low.on{--sc:var(--hp);}

.td-desc{margin:0;font-size:14px;line-height:1.6;color:var(--text-soft);font-weight:450;}

/* checklist */
.td-prog{height:5px;border-radius:99px;background:var(--surface-2);border:1px solid var(--border);
  overflow:hidden;margin-bottom:11px;}
.td-prog i{display:block;height:100%;background:var(--hp);border-radius:99px;transition:width .25s;}
.td-checks{display:flex;flex-direction:column;gap:4px;}
.td-check{display:flex;align-items:center;gap:10px;padding:8px 9px;border-radius:8px;
  border:1px solid transparent;background:transparent;cursor:pointer;text-align:left;
  font-family:var(--font);transition:background .12s;width:100%;}
.td-check:hover{background:var(--surface-2);}
.td-box{width:19px;height:19px;flex:0 0 19px;border-radius:5px;border:1.5px solid var(--border-soft);
  display:flex;align-items:center;justify-content:center;font-size:11px;color:#fff;
  transition:all .12s;}
.td-check.on .td-box{background:var(--hp);border-color:var(--hp);}
.td-cl{font-size:13.5px;color:var(--text);font-weight:500;}
.td-check.on .td-cl{color:var(--text-faint);text-decoration:line-through;}

/* activity */
.td-log{display:flex;flex-direction:column;gap:11px;}
.td-logitem{display:flex;gap:10px;font-size:13px;line-height:1.5;color:var(--text-soft);}
.td-logitem b{color:var(--text);font-weight:600;}
.td-logdot{width:7px;height:7px;flex:0 0 7px;margin-top:6px;border-radius:50%;
  background:var(--accent-2);}
.td-logt{display:block;font-size:11px;color:var(--text-faint);margin-top:2px;}

/* actions */
.td-actions{display:flex;flex-direction:column;gap:9px;margin-top:24px;
  padding-top:20px;border-top:1px solid var(--border);}
.td-btn{padding:11px;border-radius:9px;border:1px solid var(--border);background:var(--surface-2);
  color:var(--text);font-size:14px;font-weight:600;cursor:pointer;font-family:var(--font);
  transition:all .12s;}
.td-btn:hover{border-color:var(--border-soft);background:var(--surface-3,var(--surface-2));}
.td-btn.primary{background:var(--hp);border-color:var(--hp);color:#fff;}
.td-btn.primary:hover{filter:brightness(1.06);background:var(--hp);}
.td-btn.ghost{background:transparent;border-color:transparent;color:var(--text-soft);}
.td-btn.ghost:hover{background:var(--surface-2);}

@media(max-width:520px){.td{width:100%;}.td-meta{grid-template-columns:1fr;}}

/* ---- create buttons ---- */
.wh-right{display:flex;align-items:center;gap:16px;}
.wh-add{flex:0 0 auto;display:inline-flex;align-items:center;gap:6px;
  padding:9px 15px;border-radius:9px;border:1px solid var(--accent);
  background:color-mix(in srgb,var(--accent) 16%,var(--surface));
  color:var(--text);font-size:13.5px;font-weight:600;cursor:pointer;font-family:var(--font);
  white-space:nowrap;transition:background .12s,border-color .12s;}
.wh-add:hover{background:color-mix(in srgb,var(--accent) 28%,var(--surface));border-color:var(--accent);}
.prj-add{display:flex;align-items:center;justify-content:center;gap:7px;width:100%;
  padding:11px;border-radius:var(--radius);border:1px dashed var(--border-soft);
  background:transparent;color:var(--text-soft);font-size:13px;font-weight:600;cursor:pointer;
  font-family:var(--font);transition:all .12s;margin-top:2px;}
.prj-add:hover{border-color:var(--accent);color:var(--text);background:var(--surface);}
.prj-add span{font-size:15px;line-height:1;}
.kadd{margin-left:auto;width:22px;height:22px;border-radius:6px;border:1px solid transparent;
  background:transparent;color:var(--text-faint);font-size:14px;line-height:1;cursor:pointer;
  display:flex;align-items:center;justify-content:center;transition:all .12s;font-family:var(--font);}
.kadd:hover{background:var(--surface);border-color:var(--border-soft);color:var(--text);}
.kadd-card{width:100%;padding:9px;margin-top:2px;border-radius:8px;border:1px dashed var(--border);
  background:transparent;color:var(--text-faint);font-size:12.5px;font-weight:600;cursor:pointer;
  font-family:var(--font);transition:all .12s;text-align:center;}
.kadd-card:hover{border-color:var(--accent);color:var(--text-soft);background:var(--surface);}

/* ---- create modal form ---- */
.cm-kind{--pc:var(--accent);}
.cm-field{display:block;margin-bottom:16px;}
.cm-field .td-lab{margin-bottom:7px;}
.cm-in{width:100%;padding:10px 12px;border-radius:9px;border:1px solid var(--border);
  background:var(--surface-2);color:var(--text);font-size:14px;font-family:var(--font);font-weight:500;
  transition:border-color .12s,background .12s;}
.cm-in::placeholder{color:var(--text-faint);}
.cm-in:focus{outline:none;border-color:var(--accent);background:var(--surface);}
select.cm-in{cursor:pointer;appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--text-faint) 50%),linear-gradient(135deg,var(--text-faint) 50%,transparent 50%);
  background-position:calc(100% - 16px) 17px,calc(100% - 11px) 17px;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:30px;}
.cm-area{resize:vertical;line-height:1.5;min-height:64px;}
.cm-agents{display:grid;grid-template-columns:1fr 1fr;gap:7px;}
.cm-agent{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:9px;
  border:1px solid var(--border);background:var(--surface-2);color:var(--text-soft);
  font-size:13px;font-weight:600;cursor:pointer;font-family:var(--font);transition:all .12s;text-align:left;}
.cm-agent canvas{border-radius:5px;background:var(--surface);}
.cm-agent:hover{border-color:var(--border-soft);color:var(--text);}
.cm-agent.on{border-color:var(--pc);background:color-mix(in srgb,var(--pc) 12%,var(--surface));color:var(--text);}
.cm-colorprev{display:block;height:38px;border-radius:9px;border:1px solid var(--border);}
.td-btn.primary:disabled{opacity:.45;cursor:not-allowed;filter:none;}

/* ============================================================
   TEAM cards + AGENT CONFIG modal
   ============================================================ */
.team-card{transition:border-color .14s,transform .14s;border:1px solid var(--border);}
.team-card:hover{border-color:color-mix(in srgb,var(--ac) 55%,var(--border));transform:translateY(-2px);}
.team-av{background:var(--surface-2);border:2px solid var(--border);border-radius:12px;padding:7px;}
.team-gear{margin-left:auto;align-self:flex-start;color:var(--text-faint);font-size:18px;
  transition:color .14s,transform .3s;}
.team-card:hover .team-gear{color:var(--ac);transform:rotate(60deg);}
.team-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;
  border-top:1px solid var(--border);padding-top:12px;}
.team-model{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:600;color:var(--text-soft);}
.tm-dot{width:7px;height:7px;border-radius:50%;background:var(--ac);box-shadow:0 0 7px var(--ac);}
.team-cfg{font-size:12.5px;font-weight:700;color:var(--ac);}

/* modal shell */
.cfg-scrim{align-items:center;justify-content:center;padding:24px;}
.cfg{width:min(880px,96vw);max-height:92vh;display:flex;flex-direction:column;
  background:var(--surface);border:1px solid var(--border);border-radius:16px;
  box-shadow:0 30px 80px rgba(5,8,14,.6);overflow:hidden;
  animation:cfgpop .22s cubic-bezier(.2,.9,.3,1.1);}
@keyframes cfgpop{from{opacity:0;transform:translateY(14px) scale(.98);}to{opacity:1;transform:none;}}

.cfg-head{display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:18px 20px;border-bottom:1px solid var(--border);
  background:linear-gradient(180deg,color-mix(in srgb,var(--ac) 10%,var(--surface)),var(--surface));}
.cfg-id{display:flex;align-items:center;gap:13px;}
.cfg-av{background:var(--surface-2);border:2px solid var(--border);border-radius:12px;padding:6px;}
.cfg-name{font-size:19px;font-weight:700;color:var(--text);letter-spacing:-.2px;}
.cfg-role{font-size:13px;color:var(--text-soft);font-weight:500;margin-top:3px;}
.cfg-headr{display:flex;align-items:center;gap:12px;}

.cfg-body{display:grid;grid-template-columns:184px minmax(0,1fr);min-height:0;flex:1;}
.cfg-tabs{display:flex;flex-direction:column;gap:3px;padding:14px 12px;
  border-right:1px solid var(--border);background:var(--surface-2);}
.cfg-tab{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:9px;
  border:0;background:transparent;color:var(--text-soft);font-size:14px;font-weight:600;
  cursor:pointer;font-family:var(--font);text-align:left;transition:background .12s,color .12s;}
.cfg-tab-ic{font-size:15px;width:18px;text-align:center;filter:grayscale(.3);}
.cfg-tab:hover{background:var(--surface);color:var(--text);}
.cfg-tab.on{background:color-mix(in srgb,var(--ac) 16%,var(--surface));color:var(--text);}
.cfg-tabs-foot{margin-top:auto;padding-top:10px;border-top:1px solid var(--border);}
.cfg-seelink{width:100%;padding:9px;border-radius:8px;border:1px solid var(--border);
  background:transparent;color:var(--text-soft);font-size:12.5px;font-weight:600;cursor:pointer;
  font-family:var(--font);transition:all .12s;}
.cfg-seelink:hover{border-color:var(--ac);color:var(--text);}

.cfg-content{padding:20px 22px;overflow-y:auto;min-height:0;}
.cfg-sec{margin-bottom:22px;}
.cfg-sec:last-child{margin-bottom:0;}
.cfg-sec-h{display:flex;align-items:baseline;gap:10px;margin-bottom:11px;flex-wrap:wrap;}
.cfg-sec-h b{font-size:14px;font-weight:700;color:var(--text);}
.cfg-sec-h span{font-size:12px;color:var(--text-faint);font-weight:500;}
.cfg-2col{display:grid;grid-template-columns:1fr 1fr;gap:22px;}
@media(max-width:620px){.cfg-2col{grid-template-columns:1fr;}}

/* model cards */
.model-list{display:flex;flex-direction:column;gap:9px;}
.model-card{text-align:left;padding:13px 14px;border-radius:11px;border:1px solid var(--border);
  background:var(--surface-2);cursor:pointer;font-family:var(--font);transition:border-color .12s,background .12s;}
.model-card:hover{border-color:var(--border-soft);}
.model-card.on{border-color:var(--ac);background:color-mix(in srgb,var(--ac) 9%,var(--surface));}
.mc-top{display:flex;align-items:center;gap:9px;}
.mc-top b{font-size:14.5px;color:var(--text);font-weight:700;}
.mc-tier{font-size:11px;font-weight:600;color:var(--text-soft);background:var(--surface);
  border:1px solid var(--border);border-radius:99px;padding:2px 8px;}
.mc-check{margin-left:auto;color:var(--ac);font-weight:800;font-size:15px;}
.mc-desc{font-size:12.5px;color:var(--text-soft);font-weight:500;margin:6px 0 9px;line-height:1.45;}
.mc-bars{display:flex;gap:18px;}
.mc-bar{display:flex;align-items:center;gap:5px;font-size:11px;color:var(--text-faint);font-weight:600;}
.mc-bar i{font-style:normal;margin-right:3px;}
.mc-bar b{width:14px;height:6px;border-radius:2px;background:var(--border);display:inline-block;}
.mc-bar b.on{background:var(--ac);}

/* segmented (autonomy) */
.cfg-seg{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;}
@media(max-width:620px){.cfg-seg{grid-template-columns:1fr;}}
.cfg-segbtn{display:flex;flex-direction:column;gap:3px;text-align:left;padding:11px 12px;border-radius:10px;
  border:1px solid var(--border);background:var(--surface-2);cursor:pointer;font-family:var(--font);transition:all .12s;}
.cfg-segbtn b{font-size:13.5px;color:var(--text);font-weight:700;}
.cfg-segbtn span{font-size:11.5px;color:var(--text-soft);font-weight:500;line-height:1.35;}
.cfg-segbtn:hover{border-color:var(--border-soft);}
.cfg-segbtn.on{border-color:var(--ac);background:color-mix(in srgb,var(--ac) 11%,var(--surface));}

/* range */
.cfg-range{width:100%;-webkit-appearance:none;appearance:none;height:6px;border-radius:99px;
  background:var(--surface-3,var(--surface-2));border:1px solid var(--border);outline:none;}
.cfg-range::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;border-radius:50%;
  background:var(--ac);border:2px solid var(--surface);cursor:pointer;box-shadow:0 1px 4px rgba(0,0,0,.4);}
.cfg-range::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:var(--ac);
  border:2px solid var(--surface);cursor:pointer;}
.cfg-rangeval{font-size:13px;font-weight:700;color:var(--text);margin-top:8px;}

/* toggle */
.cfg-toggle{display:inline-flex;align-items:center;gap:11px;padding:6px 14px 6px 6px;border-radius:99px;
  border:1px solid var(--border);background:var(--surface-2);cursor:pointer;font-family:var(--font);}
.cfg-toggle .ct-knob{width:38px;height:22px;border-radius:99px;background:var(--border);position:relative;transition:background .15s;}
.cfg-toggle .ct-knob::after{content:"";position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;
  background:var(--text-faint);transition:transform .15s,background .15s;}
.cfg-toggle.on .ct-knob{background:color-mix(in srgb,var(--ac) 50%,var(--surface));}
.cfg-toggle.on .ct-knob::after{transform:translateX(16px);background:var(--ac);}
.cfg-toggle .ct-lab{font-size:13px;font-weight:600;color:var(--text);}

/* files tab */
.files{display:grid;grid-template-columns:200px minmax(0,1fr);gap:16px;min-height:340px;}
@media(max-width:620px){.files{grid-template-columns:1fr;}}
.files-rail{display:flex;flex-direction:column;gap:6px;}
.file-item{display:flex;align-items:center;gap:10px;padding:10px 11px;border-radius:9px;
  border:1px solid var(--border);background:var(--surface-2);cursor:pointer;font-family:var(--font);
  text-align:left;transition:all .12s;}
.file-item:hover{border-color:var(--border-soft);}
.file-item.on{border-color:var(--ac);background:color-mix(in srgb,var(--ac) 10%,var(--surface));}
.fi-ic{font-size:16px;}
.fi-meta{display:flex;flex-direction:column;gap:2px;min-width:0;}
.fi-meta b{font-size:13px;color:var(--text);font-weight:600;font-family:var(--mono);}
.fi-meta i{font-size:11px;color:var(--text-faint);font-style:normal;font-weight:500;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.file-editor{display:flex;flex-direction:column;border:1px solid var(--border);border-radius:11px;overflow:hidden;
  background:var(--surface-2);}
.fe-head{display:flex;align-items:center;justify-content:space-between;padding:9px 13px;
  border-bottom:1px solid var(--border);background:var(--surface);}
.fe-name{font-size:13px;font-weight:600;color:var(--text);font-family:var(--mono);}
.fe-lang{font-size:10px;font-weight:700;color:var(--text-faint);letter-spacing:1px;
  border:1px solid var(--border);border-radius:5px;padding:1px 6px;}
.fe-area{flex:1;min-height:300px;resize:vertical;border:0;outline:none;padding:14px;
  background:transparent;color:var(--text);font-family:var(--mono);font-size:13.5px;line-height:1.6;}

/* tools grid */
.tool-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px;}
@media(max-width:620px){.tool-grid{grid-template-columns:1fr;}}
.tool-card{display:flex;align-items:center;gap:11px;padding:11px 13px;border-radius:10px;
  border:1px solid var(--border);background:var(--surface-2);cursor:pointer;font-family:var(--font);
  text-align:left;transition:all .12s;}
.tool-card:hover{border-color:var(--border-soft);}
.tool-card.on{border-color:color-mix(in srgb,var(--ac) 55%,var(--border));background:color-mix(in srgb,var(--ac) 8%,var(--surface));}
.tool-ic{font-size:18px;width:22px;text-align:center;}
.tool-meta{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;}
.tool-meta b{font-size:13.5px;color:var(--text);font-weight:600;}
.tool-meta i{font-size:11.5px;color:var(--text-soft);font-style:normal;font-weight:500;}
.tool-sw{width:34px;height:20px;border-radius:99px;background:var(--border);position:relative;flex:0 0 34px;transition:background .15s;}
.tool-sw span{position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:var(--text-faint);transition:transform .15s,background .15s;}
.tool-sw.on{background:color-mix(in srgb,var(--ac) 50%,var(--surface));}
.tool-sw.on span{transform:translateX(14px);background:var(--ac);}

/* advanced */
.cfg-schedule{display:flex;align-items:center;gap:10px;padding:13px 15px;border-radius:11px;
  border:1px solid var(--border);background:var(--surface-2);font-size:13.5px;font-weight:600;color:var(--text);}
.cs-ic{font-size:17px;}
.cfg-skills{display:flex;flex-wrap:wrap;gap:7px;}
.danger-row{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:13px 0;
  border-bottom:1px solid var(--border);}
.danger-row:last-child{border-bottom:0;}
.danger-row b{display:block;font-size:13.5px;color:var(--text);font-weight:600;}
.danger-row span{font-size:12px;color:var(--text-soft);font-weight:500;}
.danger-btn{flex:0 0 auto;padding:8px 16px;border-radius:8px;border:1px solid var(--border-soft);
  background:var(--surface-2);color:var(--text);font-size:12.5px;font-weight:600;cursor:pointer;font-family:var(--font);transition:all .12s;}
.danger-btn:hover{border-color:var(--idle);color:var(--idle);}
.danger-btn.red:hover{border-color:var(--alert);color:var(--alert);}

/* footer */
.cfg-foot{display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:14px 20px;border-top:1px solid var(--border);background:var(--surface-2);}
.cfg-status{font-size:12.5px;font-weight:600;color:var(--text-faint);}
.cfg-status.dirty{color:var(--idle);}
.cfg-status.ok{color:var(--hp);}
.cfg-foot-btns{display:flex;gap:10px;}
.kempty{font-size:12.5px;color:var(--text-faint);text-align:center;padding:18px 0;
  border:1px dashed var(--border);border-radius:var(--radius-sm);}
@media(max-width:680px){.kanban{grid-template-columns:1fr;}}

/* ============================================================
   WORK — unified Projects & Tasks (master/detail)
   ============================================================ */
.work{display:grid;grid-template-columns:280px minmax(0,1fr);gap:20px;align-items:start;}

/* left rail */
.work-rail{display:flex;flex-direction:column;gap:9px;position:sticky;top:18px;}
.rail-cap{font-size:11px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;
  color:var(--text-faint);padding:2px 4px 4px;}
.prj-card{display:flex;flex-direction:column;gap:9px;text-align:left;cursor:pointer;
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  padding:13px 14px;transition:border-color .14s,background .14s,transform .14s;
  font-family:var(--font);width:100%;position:relative;}
.prj-card:hover{border-color:var(--border-soft);background:var(--surface-2);}
.prj-card.sel{border-color:color-mix(in srgb,var(--pc,var(--accent)) 60%,var(--border));
  background:color-mix(in srgb,var(--pc,var(--accent)) 9%,var(--surface));}
.prj-card.sel::before{content:"";position:absolute;left:0;top:12px;bottom:12px;width:3px;
  border-radius:0 3px 3px 0;background:var(--pc,var(--accent));}
.prj-top{display:flex;align-items:center;gap:9px;}
.prj-top b{font-size:14px;font-weight:600;color:var(--text);line-height:1.25;}
.prj-allico{width:24px;height:24px;flex:0 0 24px;display:flex;align-items:center;justify-content:center;
  border-radius:6px;background:var(--surface-2);border:1px solid var(--border);
  color:var(--text-soft);font-size:13px;}
.prj-card.all{gap:8px;}
.prj-bar{height:4px;border-radius:99px;background:var(--surface-3,var(--surface-2));overflow:hidden;}
.prj-bar i{display:block;height:100%;border-radius:99px;}
.prj-counts{font-size:12px;color:var(--text-faint);font-weight:500;}

/* right detail */
.work-main{display:flex;flex-direction:column;gap:16px;min-width:0;}
.work-head{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  padding:16px 18px;box-shadow:var(--shadow);}
.wh-left{display:flex;align-items:center;gap:13px;min-width:0;}
.wh-lead{background:var(--surface-2);border:1px solid var(--border);border-radius:10px;padding:5px;}
.work-head h3{margin:0;font-size:18px;font-weight:700;color:var(--text);letter-spacing:-.2px;}
.wh-sub{font-size:13px;color:var(--text-soft);font-weight:500;margin-top:3px;}
.wh-meta{display:flex;flex-direction:column;align-items:flex-end;gap:2px;text-align:right;}
.wh-big{font-size:24px;font-weight:700;color:var(--text);line-height:1;letter-spacing:-.5px;}
.wh-cap{font-size:12px;font-weight:500;color:var(--text-faint);white-space:nowrap;}
.work-sync{width:100%;font-size:12px;color:var(--text-faint);font-weight:600;
  border-top:1px solid var(--border);padding-top:10px;}

/* card priority dot colors handled inline; due in foot is quiet */
@media(max-width:1100px){.work{grid-template-columns:minmax(0,1fr);}
  .work-rail{position:static;flex-direction:row;flex-wrap:nowrap;overflow-x:auto;gap:11px;
    padding-bottom:6px;scrollbar-width:thin;}
  .rail-cap{display:none;}
  .prj-card{flex:0 0 224px;}}

.proj{display:flex;flex-direction:column;gap:11px;}
.proj .ph{display:flex;justify-content:space-between;align-items:center;}
.proj .ph b{font-size:15px;color:var(--text);font-weight:600;}
.proj .ph .pct{font-size:13px;font-weight:700;color:var(--accent-2);}

/* ============================================================
   CRONS — scheduled / recurring agent routines
   ============================================================ */
.cron{display:grid;grid-template-columns:minmax(0,1fr) 290px;gap:20px;align-items:start;}
.cron-main{display:flex;flex-direction:column;gap:16px;min-width:0;}

.cron-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;}
.cron-head h3{margin:0;font-size:19px;font-weight:700;color:var(--text);letter-spacing:-.2px;}
.cron-sub{font-size:13px;color:var(--text-soft);font-weight:500;margin-top:4px;}

/* week strip */
.week-strip{display:grid;grid-template-columns:repeat(7,1fr);gap:8px;}
.wk-day{display:flex;flex-direction:column;gap:3px;align-items:flex-start;
  background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:10px 11px;}
.wk-day.today{border-color:var(--accent);
  background:color-mix(in srgb,var(--accent) 10%,var(--surface));}
.wk-dow{font-size:10.5px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:var(--text-faint);}
.wk-day.today .wk-dow{color:var(--accent);}
.wk-num{font-size:18px;font-weight:700;color:var(--text);line-height:1;}
.wk-count{font-size:10.5px;font-weight:600;color:var(--text-soft);margin-top:2px;}

/* cron list */
.cron-list{display:flex;flex-direction:column;gap:9px;}
.cron-card{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;gap:14px;align-items:center;
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  padding:13px 15px;position:relative;overflow:hidden;transition:border-color .14s,background .14s;}
.cron-card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--ac);opacity:.85;}
.cron-card:hover{border-color:var(--border-soft);}
.cron-card.paused{opacity:.62;}
.cron-card.flash{border-color:var(--hp);background:color-mix(in srgb,var(--hp) 9%,var(--surface));}

/* toggle */
.cron-toggle{width:42px;height:24px;border-radius:99px;border:1px solid var(--border);
  background:var(--surface-3,var(--surface-2));position:relative;cursor:pointer;flex:0 0 42px;transition:background .15s,border-color .15s;}
.cron-toggle .ct-knob{position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;
  background:var(--text-faint);transition:transform .16s,background .16s;}
.cron-toggle.on{background:color-mix(in srgb,var(--hp) 30%,var(--surface));border-color:var(--hp);}
.cron-toggle.on .ct-knob{transform:translateX(18px);background:var(--hp);}

.cron-body{min-width:0;}
.cron-name{font-size:14.5px;font-weight:600;color:var(--text);}
.cron-action{font-size:12.5px;color:var(--text-soft);font-weight:500;margin:3px 0 7px;line-height:1.35;}
.cron-tags{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.freq-badge{font-size:11px;font-weight:600;padding:2px 9px;border-radius:99px;
  background:var(--surface-2);border:1px solid var(--border);color:var(--text-soft);white-space:nowrap;}
.freq-badge.f-daily{color:#7fb8de;border-color:color-mix(in srgb,#7fb8de 40%,transparent);background:color-mix(in srgb,#7fb8de 12%,transparent);}
.freq-badge.f-weekday{color:#8fcf9f;border-color:color-mix(in srgb,#8fcf9f 40%,transparent);background:color-mix(in srgb,#8fcf9f 12%,transparent);}
.freq-badge.f-weekly{color:#c9a6e0;border-color:color-mix(in srgb,#c9a6e0 40%,transparent);background:color-mix(in srgb,#c9a6e0 12%,transparent);}
.freq-badge.f-monthly{color:#e0b07f;border-color:color-mix(in srgb,#e0b07f 40%,transparent);background:color-mix(in srgb,#e0b07f 12%,transparent);}
.cron-who{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;color:var(--text-soft);}
.who-dot{width:8px;height:8px;border-radius:50%;flex:0 0 8px;}

.cron-meta{text-align:right;display:flex;flex-direction:column;gap:5px;align-items:flex-end;min-width:108px;flex:0 0 108px;}
.cron-next{display:flex;flex-direction:column;gap:1px;}
.cn-lab{font-size:9.5px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:var(--text-faint);}
.cron-next b{font-size:14px;font-weight:700;color:var(--text);white-space:nowrap;}
.cron-next.paused b{color:var(--text-faint);font-weight:600;}
.cron-last{font-size:11px;font-weight:600;white-space:nowrap;}
.cron-last.ok{color:var(--hp);}
.cron-last.fail{color:var(--alert);}
.cron-last.never{color:var(--text-faint);}

.cron-actions{display:flex;flex-direction:column;gap:6px;}
.cron-run,.cron-del{width:28px;height:28px;border-radius:7px;border:1px solid var(--border);
  background:var(--surface-2);color:var(--text-soft);font-size:11px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;transition:all .12s;}
.cron-run:hover{border-color:var(--hp);color:var(--hp);background:color-mix(in srgb,var(--hp) 12%,var(--surface));}
.cron-del:hover{border-color:var(--alert);color:var(--alert);background:color-mix(in srgb,var(--alert) 12%,var(--surface));}
.cron-empty,.up-empty{padding:22px;text-align:center;color:var(--text-faint);font-size:13px;font-weight:500;
  border:1px dashed var(--border);border-radius:var(--radius);}

/* right rail */
.cron-rail{display:flex;flex-direction:column;gap:14px;position:sticky;top:18px;}
.cron-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;}
.cstat{background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:12px 10px;text-align:center;}
.cstat .n{display:block;font-size:21px;font-weight:700;color:var(--text);line-height:1;}
.cstat .l{display:block;font-size:10px;font-weight:600;letter-spacing:.6px;text-transform:uppercase;color:var(--text-faint);margin-top:5px;}

.up-panel{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:15px;}
.up-cap{font-size:11px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--text-faint);margin-bottom:11px;}
.up-run{display:flex;align-items:center;gap:10px;padding:9px 0;border-top:1px solid var(--border);}
.up-run:first-of-type{border-top:0;padding-top:0;}
.up-time{font-size:11.5px;font-weight:700;color:var(--text);flex:0 0 64px;}
.up-bar{width:3px;align-self:stretch;border-radius:2px;flex:0 0 3px;min-height:26px;}
.up-info{min-width:0;}
.up-name{font-size:12.5px;font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.up-who{font-size:11px;color:var(--text-soft);font-weight:500;margin-top:1px;}

@media(max-width:1040px){.cron{grid-template-columns:minmax(0,1fr);}
  .cron-rail{position:static;}
  .cron-stats{grid-template-columns:repeat(3,1fr);}}
@media(max-width:620px){.week-strip{grid-template-columns:repeat(4,1fr);}
  .cron-card{grid-template-columns:auto minmax(0,1fr);grid-template-areas:"t b" "m m" "a a";gap:10px;}
  .cron-toggle{grid-area:t;}.cron-body{grid-area:b;}.cron-meta{grid-area:m;text-align:left;align-items:flex-start;}
  .cron-actions{grid-area:a;flex-direction:row;}}

/* memory */
.memlist{display:flex;flex-direction:column;gap:9px;max-height:600px;overflow:auto;padding-right:4px;}
.memitem{background:var(--surface-2);border:1px solid var(--border-soft);border-radius:var(--radius-sm);
  padding:13px;cursor:pointer;transition:all .15s;}
.memitem:hover{border-color:color-mix(in srgb,var(--accent) 40%,transparent);}
.memitem.sel{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 10%,var(--surface-2));}
.memitem .d{font-size:14px;font-weight:700;color:var(--text);font-family:var(--mono);}
.memitem .w{font-size:12px;color:var(--accent-2);font-weight:600;margin:5px 0;}
.memitem .pv{font-size:13px;color:var(--text-soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.membody{font-family:var(--mono);font-size:14px;line-height:1.6;color:var(--text-soft);
  background:var(--surface-2);border:1px solid var(--border-soft);border-radius:var(--radius-sm);
  padding:20px;white-space:pre-wrap;max-height:600px;overflow:auto;}

/* docs */
.docs-shell{display:grid;grid-template-columns:minmax(300px,360px) minmax(0,1fr);gap:18px;align-items:start;}
.docs-library,.docs-reader{min-width:0;}
.docs-library{position:sticky;top:18px;max-height:calc(100vh - 104px);display:flex;flex-direction:column;}
.docs-lib-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:14px;}
.docs-muted{font-size:12.5px;color:var(--text-faint);font-weight:600;margin-top:2px;}
.docs-control{display:block;margin-bottom:12px;}
.docs-control span{display:block;font-size:11px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;
  color:var(--text-faint);margin-bottom:7px;}
.docs-list{display:flex;flex-direction:column;gap:8px;overflow:auto;padding-right:4px;min-height:0;}
.docs-group-title{font-size:10.5px;font-weight:800;letter-spacing:1.2px;text-transform:uppercase;
  color:var(--text-faint);padding:10px 2px 2px;}
.doc-row{display:flex;align-items:center;gap:11px;width:100%;padding:11px;border-radius:10px;
  border:1px solid var(--border-soft);background:var(--surface-2);color:var(--text);
  text-align:left;cursor:pointer;font-family:var(--font);transition:border-color .14s,background .14s;}
.doc-row:hover{border-color:color-mix(in srgb,var(--accent) 42%,var(--border));background:var(--surface);}
.doc-row.active{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 10%,var(--surface));}
.doc-ic{width:42px;height:46px;flex:0 0 42px;border-radius:9px;background:var(--surface);
  border:1px solid var(--border);display:flex;align-items:flex-end;justify-content:center;
  padding-bottom:7px;font-family:var(--mono);font-size:9px;font-weight:900;color:var(--accent-2);
  text-transform:uppercase;position:relative;overflow:hidden;}
.doc-ic::before{content:"";position:absolute;top:0;right:0;border-top:12px solid var(--surface-3);
  border-left:12px solid transparent;}
.doc-ic.local{color:var(--hp);}
.doc-row-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px;}
.doc-row-main b{font-size:13.5px;font-weight:700;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.doc-row-main span{font-size:12px;color:var(--text-soft);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}

.docs-reader{min-height:calc(100vh - 104px);display:flex;flex-direction:column;}
.docs-reader-head{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;
  padding-bottom:16px;border-bottom:1px solid var(--border);margin-bottom:14px;}
.docs-title-block{min-width:0;}
.docs-title-block h3{margin:0;font-size:20px;line-height:1.25;color:var(--text);overflow-wrap:anywhere;}
.docs-meta{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin-top:9px;}
.docs-meta span{font-size:11.5px;font-weight:700;color:var(--text-soft);border:1px solid var(--border);
  border-radius:999px;background:var(--surface-2);padding:3px 9px;}
.docs-meta .dirty{color:var(--idle);border-color:color-mix(in srgb,var(--idle) 45%,var(--border));
  background:color-mix(in srgb,var(--idle) 10%,var(--surface));}
.docs-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:flex-end;}
.docs-tabs{display:flex;gap:4px;padding:4px;border:1px solid var(--border);border-radius:10px;background:var(--surface-2);}
.docs-tabs button{border:0;border-radius:7px;background:transparent;color:var(--text-soft);
  padding:7px 10px;font-family:var(--font);font-size:12.5px;font-weight:700;cursor:pointer;}
.docs-tabs button.on{background:var(--surface);color:var(--text);box-shadow:var(--shadow-sm);}
.docs-save-msg{margin-bottom:12px;border:1px solid color-mix(in srgb,var(--hp) 40%,var(--border));
  border-radius:10px;padding:9px 11px;color:var(--hp);background:color-mix(in srgb,var(--hp) 9%,var(--surface));
  font-size:13px;font-weight:700;}
.docs-save-msg.error{border-color:color-mix(in srgb,var(--alert) 45%,var(--border));color:var(--alert);
  background:color-mix(in srgb,var(--alert) 9%,var(--surface));}
.docs-preview{flex:1;overflow:auto;max-width:920px;width:100%;margin:0 auto;padding:12px 4px 28px;
  color:var(--text);font-size:15px;line-height:1.7;}
.docs-preview h1,.docs-preview h2,.docs-preview h3{color:var(--text);line-height:1.25;margin:18px 0 10px;overflow-wrap:anywhere;}
.docs-preview h1{font-size:28px;}
.docs-preview h2{font-size:21px;border-top:1px solid var(--border);padding-top:16px;}
.docs-preview h3{font-size:17px;}
.docs-preview p{margin:0 0 10px;color:var(--text-soft);font-weight:500;overflow-wrap:anywhere;word-break:normal;}
.docs-preview .doc-break{height:10px;}
.docs-preview .doc-bullet{display:flex;gap:9px;margin-bottom:7px;}
.docs-preview .doc-bullet span{color:var(--accent);font-weight:900;flex:0 0 auto;}
.docs-preview pre{margin:0 0 5px;padding:0 0 0 12px;border-left:2px solid var(--border);
  color:var(--text-soft);font-family:var(--mono);font-size:13px;line-height:1.55;
  white-space:pre-wrap;overflow-wrap:anywhere;}
.docs-editor{flex:1;min-height:620px;width:100%;resize:vertical;border:1px solid var(--border);
  border-radius:12px;background:var(--surface-2);color:var(--text);padding:18px 20px;
  font-family:var(--mono);font-size:14px;line-height:1.65;outline:none;tab-size:2;
  white-space:pre-wrap;overflow-wrap:anywhere;}
.docs-editor:focus{border-color:var(--accent);background:var(--surface);}
.docs-empty{border:1px dashed var(--border);border-radius:12px;padding:18px;color:var(--text-soft);
  background:var(--surface-2);font-size:13px;font-weight:600;text-align:center;}
.docs-empty.big{min-height:420px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;}
.docs-empty.big b{font-size:18px;color:var(--text);}
.docs-empty.big span{max-width:360px;line-height:1.5;}

@media(max-width:1060px){
  .docs-shell{grid-template-columns:1fr;}
  .docs-library{position:static;max-height:none;}
  .docs-list{max-height:340px;}
  .docs-reader{min-height:560px;}
}
@media(max-width:680px){
  .docs-reader-head{flex-direction:column;}
  .docs-actions{width:100%;justify-content:space-between;}
  .docs-tabs{flex:1;}
  .docs-tabs button{flex:1;}
}

/* agent detail */
.drawer{margin-top:18px;}
.detail-head{display:flex;gap:18px;align-items:center;margin-bottom:18px;}
.detail-head .nm{font-size:21px;font-weight:700;color:var(--text);}
.detail-head .rl{font-size:14px;color:var(--text-soft);margin-top:5px;font-weight:500;}
.kicker{font-size:11px;font-weight:600;color:var(--text-faint);margin-bottom:9px;text-transform:uppercase;letter-spacing:1.2px;}

/* scrollbars */
*::-webkit-scrollbar{width:10px;height:10px;}
*::-webkit-scrollbar-track{background:transparent;}
*::-webkit-scrollbar-thumb{background:var(--surface-3);border-radius:6px;border:2px solid var(--surface);}

@media (max-width:1180px){.g4{grid-template-columns:repeat(2,1fr);}.g3{grid-template-columns:1fr;}}
@media (max-width:760px){.sidebar{display:none;}.g2,.g4{grid-template-columns:1fr;}}

/* ============================================================
   SIDEBAR — minimalist quiet panel
   ============================================================ */
.sidebar{
  background:var(--sidebar);
  border-right:1px solid var(--border-soft);
  box-shadow:none;
  padding:18px 14px;gap:3px;
  font-family:var(--font);
}
/* quiet wordmark, no plaque */
.sidebar .brand{
  background:transparent;border:0;border-radius:0;box-shadow:none;
  padding:6px 8px 18px;margin:0 0 10px;
  border-bottom:1px solid var(--border-soft);
  display:flex;align-items:center;gap:10px;text-align:left;}
.sidebar .brand::after{display:none;}
.sidebar .brand .crest{width:30px;height:30px;border-radius:8px;margin:0;flex:0 0 30px;
  background:var(--surface-2);border:1px solid var(--border);color:var(--text-soft);font-size:15px;
  box-shadow:none;display:flex;align-items:center;justify-content:center;}
.sidebar .brand h1{color:var(--text);letter-spacing:1.5px;font-size:12px;font-weight:600;
  font-family:var(--font);text-shadow:none;text-align:left;line-height:1.4;}
.sidebar .brand h1::after{display:none;}
.sidebar .brand .status-line{display:none;}

.sidebar .nav-label{color:var(--text-faint);font-weight:600;font-size:10px;letter-spacing:1.5px;
  padding:10px 10px 4px;text-shadow:none;text-transform:uppercase;}

/* flat quiet nav rows */
.sidebar .nav{gap:1px;}
.sidebar .nav-item{
  border-radius:8px;color:var(--text-soft);font-weight:500;font-size:14px;letter-spacing:.2px;
  background:transparent;border:0;position:relative;
  padding:10px 12px;transition:background .12s,color .12s;
  font-family:var(--font);}
.sidebar .nav-item .ni-ico{filter:grayscale(1);opacity:.5;font-size:15px;}
.sidebar .nav-item::before{display:none;}
.sidebar .nav-item:hover{background:var(--surface);color:var(--text);}
.sidebar .nav-item:hover .ni-ico{opacity:.85;}
.sidebar .nav-item.active{
  background:var(--surface-2);color:var(--text);
  border:0;box-shadow:none;}
.sidebar .nav-item.active .ni-ico{filter:none;opacity:1;}
.sidebar .nav-item .badge-dot{margin-left:auto;width:6px;height:6px;border-radius:50%;
  background:var(--alert);box-shadow:none;}

/* footer → quiet caption */
.sidebar .foot{margin-top:auto;color:var(--text-faint);font-weight:500;font-size:11px;letter-spacing:.2px;
  font-family:var(--font);
  background:transparent;border:0;border-top:1px solid var(--border-soft);border-radius:0;
  padding:12px 10px 4px;box-shadow:none;text-shadow:none;}