:root, [data-theme="light"] {
      --bg: #f4f6fb;
      --surface: #ffffff;
      --surface-2: #eef3fb;
      --surface-3: #e2eaf7;
      --border: #ccd7ea;
      --text: #18202b;
      --muted: #5f6d82;
      --faint: #8d98ab;
      --primary: #1f5da8;
      --primary-2: #2e6ec0;
      --primary-soft: #dbe9fb;
      --success: #2f7d4b;
      --warning: #9a6b1e;
      --danger: #a13f61;
      --inverse: #ffffff;
      --radius-sm: .45rem;
      --radius-md: .8rem;
      --radius-lg: 1rem;
      --shadow-sm: 0 1px 2px rgba(22,35,60,.06);
      --shadow-md: 0 12px 34px rgba(22,35,60,.08);
      --space-1: .25rem;
      --space-2: .5rem;
      --space-3: .75rem;
      --space-4: 1rem;
      --space-5: 1.25rem;
      --space-6: 1.5rem;
    }
    [data-theme="dark"] {
      --bg: #0f1621;
      --surface: #141d2a;
      --surface-2: #1a2637;
      --surface-3: #223249;
      --border: #2f4059;
      --text: #d9e2f1;
      --muted: #9fb0c7;
      --faint: #71839e;
      --primary: #6aa4ea;
      --primary-2: #82b5f0;
      --primary-soft: #213756;
      --success: #6ab07f;
      --warning: #d2a660;
      --danger: #d77d9c;
      --inverse: #0f1621;
      --shadow-sm: 0 1px 2px rgba(0,0,0,.25);
      --shadow-md: 0 12px 34px rgba(0,0,0,.34);
    }
    * { box-sizing: border-box; }
    html, body { margin: 0; min-height: 100%; background: var(--bg); color: var(--text); font-family: Arial, Helvetica, sans-serif; }
    body { font-size: 16px; line-height: 1.45; }
    button, input, select, textarea { font: inherit; }
    button { cursor: pointer; border: 0; background: none; color: inherit; }
    :focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: 6px; }

    .app-shell { display: grid; grid-template-columns: 240px minmax(0,1fr); min-height: 100vh; }
    .sidebar { background: var(--surface); border-right: 1px solid var(--border); padding: 1rem; position: sticky; top: 0; height: 100vh; overflow-y: auto; }
    .brand { display: grid; gap: .5rem; margin-bottom: 1rem; }
    .brand-top { display:flex; gap:.7rem; align-items:center; }
    .logo { width:40px; height:40px; border-radius:12px; display:grid; place-items:center; background:var(--primary-soft); color:var(--primary); border:1px solid color-mix(in srgb, var(--primary) 18%, var(--border)); }
    .brand strong { display:block; font-size:1rem; }
    .brand span { color:var(--muted); font-size:.82rem; }
    .nav-title { font-size:.72rem; color:var(--faint); text-transform:uppercase; letter-spacing:.08em; margin:1rem 0 .5rem; }
    .nav { display:grid; gap:.35rem; }
    .nav button { width:100%; min-height:40px; border-radius:.8rem; display:flex; align-items:center; justify-content:space-between; padding:0 .8rem; color:var(--muted); border:1px solid transparent; }
    .nav button.active, .nav button:hover { background:var(--primary-soft); color:var(--primary); border-color:color-mix(in srgb, var(--primary) 12%, var(--border)); }
    .sidebar-note { margin-top:1rem; padding:.85rem; border:1px solid var(--border); border-radius:1rem; background:var(--surface-2); }
    .sidebar-note strong { display:block; margin-bottom:.25rem; }
    .sidebar-note p { margin:0; color:var(--muted); font-size:.83rem; }

    .content { display:grid; grid-template-rows:auto auto auto 1fr; min-width:0; }
    .topbar { position:sticky; top:0; z-index:10; background:var(--surface); border-bottom:1px solid var(--border); padding:.9rem 1rem; display:flex; justify-content:space-between; gap:1rem; align-items:flex-start; }
    .topbar-title h1 { margin:0; font-family:'Times New Roman', Times, serif; color:var(--primary); font-size:2rem; line-height:1.02; letter-spacing:-.02em; }
    .topbar-title p { margin:.18rem 0 0; font-family:'Times New Roman', Times, serif; color:var(--primary-2); font-size:1.04rem; }
    .topbar-actions { display:flex; gap:.45rem; flex-wrap:wrap; }

    .btn { min-height:36px; padding:0 .85rem; border-radius:999px; border:1px solid var(--border); background:var(--surface); box-shadow:var(--shadow-sm); display:inline-flex; align-items:center; justify-content:center; gap:.4rem; }
    .btn.primary { background:var(--primary); color:var(--inverse); border-color:var(--primary); }
    .btn.success { background:var(--success); color:var(--inverse); border-color:var(--success); }
    .btn.danger { background:var(--danger); color:var(--inverse); border-color:var(--danger); }
    .tiny-btn { min-height:32px; padding:0 .75rem; border-radius:999px; border:1px solid var(--border); background:var(--surface); }
    .tiny-btn.primary { background:var(--primary); color:var(--inverse); border-color:var(--primary); }

    .session-bar, .status-strip, .workspace { padding: 0 1rem; }
    .session-card { margin-top:1rem; padding:.85rem 1rem; background:var(--surface); border:1px solid var(--border); border-radius:1rem; box-shadow:var(--shadow-sm); display:flex; justify-content:space-between; gap:1rem; align-items:flex-start; }
    .session-card h3 { margin:0; font-size:1rem; }
    .session-card p { margin:.18rem 0 0; color:var(--muted); font-size:.84rem; }

    .status-strip { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:.75rem; margin-top:1rem; }
    .status-box { background:var(--surface); border:1px solid var(--border); border-radius:1rem; padding:.85rem; box-shadow:var(--shadow-sm); }
    .status-box span { display:block; font-size:.77rem; color:var(--muted); margin-bottom:.22rem; }
    .status-box strong { font-size:1.35rem; }

    .workspace { display:grid; gap:1rem; padding-top:1rem; padding-bottom:1rem; align-content:start; }
    .view { display:none; }
    .view.active { display:grid; gap:1rem; }
    .layout-main { display:grid; grid-template-columns:minmax(0,1.3fr) minmax(320px,.92fr); gap:1rem; align-items:start; }
    .layout-split { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:1rem; align-items:start; }
    .cards-2 { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem; }
    .cards-3 { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.8rem; }

    .panel { background:var(--surface); border:1px solid var(--border); border-radius:1rem; box-shadow:var(--shadow-sm); }
    .panel-pad { padding:1rem; }
    .panel-head { display:flex; justify-content:space-between; gap:.8rem; align-items:flex-start; margin-bottom:.8rem; }
    .panel-head h2, .panel-head h3 { margin:0; font-size:1.02rem; }
    .panel-head p { margin:.18rem 0 0; color:var(--muted); font-size:.84rem; }

    .eyebrow { display:inline-flex; min-height:28px; align-items:center; padding:0 .65rem; border-radius:999px; background:var(--primary-soft); color:var(--primary); font-size:.74rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em; }
    .hero h2 { margin:.7rem 0 .45rem; font-size:1.52rem; line-height:1.06; letter-spacing:-.03em; max-width:16ch; }
    .hero p { margin:0; color:var(--muted); max-width:60ch; }

    .list { display:grid; gap:.7rem; }
    .row, .task-card, .member-card, .agent-card, .doc-card, .thread-card, .assignment-card, .phase-card { background:var(--surface-2); border:1px solid var(--border); border-radius:.95rem; padding:.85rem; }
    .row { display:flex; justify-content:space-between; gap:.75rem; align-items:flex-start; }
    .row strong, .task-card h4, .member-card strong, .agent-card h3, .thread-card strong, .doc-card strong { display:block; margin:0 0 .2rem; }
    .row p, .task-card p, .member-card p, .agent-card p, .thread-card p, .doc-card p, .muted { margin:0; color:var(--muted); font-size:.84rem; }

    .pill { display:inline-flex; align-items:center; min-height:24px; padding:0 .58rem; border-radius:999px; font-size:.72rem; font-weight:700; }
    .pill.info { background:var(--primary-soft); color:var(--primary); }
    .pill.success { background:color-mix(in srgb, var(--success) 14%, transparent); color:var(--success); }
    .pill.warning { background:color-mix(in srgb, var(--warning) 14%, transparent); color:var(--warning); }
    .pill.danger { background:color-mix(in srgb, var(--danger) 14%, transparent); color:var(--danger); }

    .task-head, .member-head { display:flex; justify-content:space-between; gap:.7rem; align-items:flex-start; margin-bottom:.5rem; }
    .task-actions { display:flex; gap:.45rem; flex-wrap:wrap; margin-top:.65rem; }
    .assignment-list { display:grid; gap:.55rem; margin-top:.7rem; }
    .assignment-card { background:var(--surface); }
    .phase-grid { display:grid; gap:.75rem; }
    .phase-card.locked { opacity:.55; }
    .click-card { cursor:pointer; transition:transform .16s ease, border-color .16s ease, box-shadow .16s ease; }
    .click-card:hover { transform:translateY(-1px); border-color:color-mix(in srgb, var(--primary) 18%, var(--border)); box-shadow:var(--shadow-md); }

    .chat-box { min-height:240px; display:grid; gap:.65rem; padding:.9rem; border:1px solid var(--border); border-radius:1rem; background:var(--surface-2); }
    .bubble { max-width:78%; padding:.8rem .92rem; border-radius:16px; font-size:.85rem; }
    .bubble.mine { margin-left:auto; background:var(--primary); color:var(--inverse); }
    .bubble.theirs { background:var(--surface); border:1px solid var(--border); }
    .composer { display:flex; gap:.55rem; margin-top:.75rem; }
    .composer input, .field input, .field select, .field textarea { width:100%; border:1px solid var(--border); background:var(--surface); color:var(--text); }
    .composer input { min-height:40px; border-radius:999px; padding:0 .9rem; }

    .form-grid { display:grid; gap:.8rem; }
    .field { display:grid; gap:.28rem; }
    .field label { color:var(--faint); font-size:.76rem; text-transform:uppercase; letter-spacing:.05em; }
    .field input, .field select, .field textarea { min-height:40px; border-radius:.82rem; padding:.72rem .9rem; }
    .field textarea { min-height:92px; resize:vertical; }

    .login-screen { min-height:100vh; display:grid; place-items:center; padding:1rem; background:var(--bg); }
    .hidden { display:none !important; }

    @media (max-width: 1020px) {
      .app-shell { grid-template-columns: 86px minmax(0,1fr); }
      .brand strong, .brand span, .nav-title, .nav .label, .nav .count, .sidebar-note { display:none; }
      .nav button { justify-content:center; padding:0; }
    }
    @media (max-width: 920px) {
      .app-shell { grid-template-columns:1fr; }
      .sidebar { position:relative; height:auto; border-right:0; border-bottom:1px solid var(--border); }
      .brand strong, .brand span, .nav-title, .nav .label, .nav .count, .sidebar-note { display:block; }
      .nav button { justify-content:space-between; padding:0 .8rem; }
      .layout-main, .layout-split, .cards-2, .cards-3, .status-strip { grid-template-columns:1fr; }
      .topbar { position:relative; }
    }
    @media (max-width: 680px) {
      .topbar, .session-card, .row, .panel-head, .task-head, .member-head, .composer { flex-direction:column; align-items:stretch; }
      .bubble { max-width:100%; }
      .btn, .tiny-btn { width:100%; }
      .topbar-title h1 { font-size:1.6rem; }
    }