@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@600;700;800&display=swap');
  :root{
    --gold:#C89B54; --gold-dark:#B4863B; --gold-soft:#F6EEDD;
    --side:#20272F; --side-2:#2B333D; --side-ink:#EEF1F4; --side-mut:#A9B2BC;
    --ink:#1C232B; --muted:#6D7683; --bg:#EEF0F4; --card:#ffffff; --line:#E7EAEF;
    --hover:#FBF7EF; --input:#ffffff; --input-line:#DCE0E7;
    --green:#2E9E6B; --red:#E0574C; --amber:#E0A63C; --blue:#3D82E0; --purple:#7C6BD8; --pink:#E36FA8;
    --radius:18px; --radius-sm:12px; --gap:22px;
    --shadow:0 1px 2px rgba(20,25,35,.05),0 2px 6px rgba(20,25,35,.05);
    --shadow-md:0 6px 18px rgba(20,25,35,.09),0 2px 6px rgba(20,25,35,.06);
    --shadow-lg:0 18px 44px rgba(20,25,35,.16),0 6px 14px rgba(20,25,35,.08);
    --tr:.22s cubic-bezier(.22,1,.36,1);
  }
  :root[data-theme="dark"]{
    --side:#0C1014; --side-2:#19202A; --side-ink:#EEF1F4; --side-mut:#8B95A1;
    --ink:#E7ECF1; --muted:#93A0AE; --bg:#0F1318; --card:#191F27; --line:#28313C;
    --hover:#222B35; --input:#212a34; --input-line:#323d49; --gold-soft:#3a3018;
    --shadow:0 1px 3px rgba(0,0,0,.4); --shadow-md:0 8px 22px rgba(0,0,0,.5); --shadow-lg:0 20px 50px rgba(0,0,0,.6);
  }
  *{box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{margin:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
    color:var(--ink);background:var(--bg);font-size:14px;line-height:1.55;-webkit-font-smoothing:antialiased;transition:background var(--tr),color var(--tr)}
  a{color:inherit;text-decoration:none}
  h1,h2,h3{margin:0 0 .2em}
  h1{font-size:24px;letter-spacing:-.02em;font-weight:700} h2{font-size:17px;letter-spacing:-.01em}
  .app{display:flex;min-height:100vh}
  /* Sidebar */
  .side{width:250px;background:var(--side);color:var(--side-ink);display:flex;flex-direction:column;position:sticky;top:0;height:100vh;flex-shrink:0;overflow:hidden;transition:background var(--tr)}
  .brand{display:flex;align-items:center;gap:12px;padding:20px 20px 18px;flex-shrink:0}
  .logobadge{display:inline-flex;width:42px;height:42px;border-radius:13px;background:linear-gradient(150deg,#2b333d,#171d24);align-items:center;justify-content:center;padding:6px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}
  .logobadge img{width:100%;height:100%;object-fit:contain;display:block}
  .brand>div{min-width:0}
  .brand b{font-family:'Montserrat',-apple-system,sans-serif;font-weight:700;letter-spacing:.2px;font-size:15.5px;line-height:1.15;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}
  .brand span{display:block;font-size:8.5px;color:var(--side-mut);letter-spacing:1.3px;text-transform:uppercase;margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .nav{padding:10px 14px;flex:1;overflow-y:auto;min-height:0}
  .navsearch{flex-shrink:0} .side-foot{flex-shrink:0}
  .side .nav::-webkit-scrollbar{width:8px} .side .nav::-webkit-scrollbar-thumb{background:var(--side-2);border-radius:99px}
  .nav a{display:flex;align-items:center;gap:12px;padding:11px 14px;border-radius:12px;color:var(--side-mut);font-weight:500;margin-bottom:3px;transition:background var(--tr),color var(--tr),transform var(--tr)}
  .nav a .ico{width:18px;text-align:center;opacity:.95;font-size:15px}
  .nav a:hover{background:var(--side-2);color:#fff;transform:translateX(3px)}
  .nav a.active{background:linear-gradient(135deg,var(--gold),#d8ad68);color:#231C0E;font-weight:650;box-shadow:0 6px 16px rgba(200,155,84,.3)}
  .nav a .nlabel{flex:1;min-width:0}
  .navbadge,.gbadge{background:var(--red);color:#fff;font-size:10px;font-weight:700;min-width:18px;height:18px;border-radius:9px;display:inline-flex;align-items:center;justify-content:center;padding:0 5px}
  .navbadge[hidden],.gbadge[hidden]{display:none!important}
  .navgroup{margin-bottom:2px}
  .navgroup>summary{list-style:none;display:flex;align-items:center;gap:11px;padding:9px 14px;border-radius:12px;color:var(--side-mut);font-weight:700;font-size:11px;text-transform:uppercase;letter-spacing:.7px;cursor:pointer;user-select:none;transition:background var(--tr),color var(--tr)}
  .navgroup>summary::-webkit-details-marker{display:none}
  .navgroup>summary:hover{background:var(--side-2);color:#fff}
  .navgroup .gico{width:18px;text-align:center;font-size:14px}
  .navgroup .gtitle{flex:1}
  .navgroup .gchev{transition:transform .2s;font-size:15px;opacity:.7}
  .navgroup[open]>summary .gchev{transform:rotate(90deg)}
  .navgroup .ngbody{padding:2px 0 6px 6px}
  .navgroup .ngbody a{font-size:13.5px}
  .side-foot{padding:16px;border-top:1px solid rgba(255,255,255,.07);font-size:12px;color:var(--side-mut)}
  .side-foot .who{color:#fff;font-weight:600;font-size:13px}
  .side-foot .frow{display:flex;align-items:center;gap:10px;margin-bottom:10px}
  .side-foot .lrow{display:flex;align-items:center;justify-content:space-between}
  .side-foot a{color:var(--gold);font-weight:600}
  .themebtn{display:flex;align-items:center;gap:8px;width:100%;background:var(--side-2);color:var(--side-ink);border:none;padding:9px 12px;border-radius:11px;cursor:pointer;font-size:12px;font-weight:600;margin-top:12px;transition:background var(--tr)}
  .themebtn:hover{background:#39434f}
  /* Main */
  .main{flex:1;min-width:0;display:flex;flex-direction:column}
  .content{width:100%;max-width:1180px;margin:0 auto;padding:30px clamp(20px,4vw,44px) 60px;animation:fadeInUp .4s ease both}
  .muted{color:var(--muted)}
  .row{display:flex;gap:var(--gap);flex-wrap:wrap}
  .back{display:inline-flex;align-items:center;gap:6px;margin-bottom:6px;font-size:13px;color:var(--muted);transition:color var(--tr)}
  .back:hover{color:var(--gold-dark)}
  /* Buttons */
  .btn{display:inline-flex;align-items:center;gap:7px;background:linear-gradient(135deg,var(--gold),#d3a662);color:#231C0E;border:none;padding:11px 18px;border-radius:12px;font-weight:650;font-size:13px;cursor:pointer;transition:transform var(--tr),box-shadow var(--tr),filter var(--tr);box-shadow:0 4px 12px rgba(200,155,84,.25);white-space:nowrap}
  .btn:hover{filter:brightness(1.03);transform:translateY(-1px);box-shadow:0 8px 20px rgba(200,155,84,.35)}
  .btn:active{transform:translateY(0)}
  .btn.ghost{background:var(--card);color:var(--ink);border:1px solid var(--line);box-shadow:var(--shadow)}
  .btn.ghost:hover{background:var(--hover);filter:none}
  .btn.sm{padding:7px 13px;font-size:12px;border-radius:10px}
  .btn.danger{background:var(--card);color:var(--red);border:1px solid rgba(224,87,76,.35);box-shadow:none}
  .btn.danger:hover{background:rgba(224,87,76,.1)}
  /* Cards */
  .card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);transition:transform var(--tr),box-shadow var(--tr),border-color var(--tr)}
  .pad{padding:20px 24px}
  .card>.pad:not(:last-child){border-bottom:1px solid var(--line)}
  .card>table{margin:0}
  .hoverable{cursor:pointer}
  .hoverable:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);border-color:rgba(200,155,84,.45)}
  .grid{display:grid;gap:var(--gap)}
  .stats{grid-template-columns:repeat(4,1fr)}
  .stat{padding:20px 22px;display:flex;flex-direction:column;gap:2px;position:relative;overflow:hidden}
  .stat .n{font-size:30px;font-weight:750;letter-spacing:-.03em}
  .stat .l{font-size:11.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.7px;font-weight:600}
  .stat .chip{position:absolute;top:16px;right:16px;width:38px;height:38px;border-radius:11px;display:flex;align-items:center;justify-content:center;font-size:17px}
  .chip.c-gold{background:var(--gold-soft);color:var(--gold-dark)} .chip.c-red{background:rgba(224,87,76,.14);color:var(--red)}
  .chip.c-amber{background:rgba(224,166,60,.16);color:var(--amber)} .chip.c-blue{background:rgba(61,130,224,.14);color:var(--blue)}
  .stat.alert .n{color:var(--red)} .stat.warn .n{color:var(--amber)}
  .mb{margin-bottom:var(--gap)} .mt{margin-top:var(--gap)}
  .flex{display:flex;align-items:center;gap:10px} .between{display:flex;align-items:center;justify-content:space-between;gap:16px}
  .grid3{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px}
  .nowrap{white-space:nowrap}
  .pagehead{margin-bottom:24px}
  /* Table */
  table{width:100%;border-collapse:collapse;table-layout:auto}
  th,td{text-align:left;padding:14px 18px;border-bottom:1px solid var(--line);vertical-align:middle;overflow-wrap:break-word}
  th{font-size:11px;text-transform:uppercase;letter-spacing:.6px;color:var(--muted);font-weight:600;white-space:nowrap}
  tr:last-child td{border-bottom:none}
  tbody tr.clk{cursor:pointer;transition:background var(--tr),box-shadow var(--tr)}
  tbody tr.clk:hover{background:var(--hover);box-shadow:inset 3px 0 0 var(--gold)}
  /* Badges */
  .badge{display:inline-block;padding:5px 12px;border-radius:999px;font-size:11px;font-weight:650;white-space:nowrap}
  .b-docs{background:#eceff3;color:#5b6673} .b-prep{background:#e6f0fc;color:#2c5fa8} .b-review{background:#fbf0dd;color:#9a6b1c} .b-filed{background:#e5f5ec;color:#1f7a4d}
  :root[data-theme="dark"] .b-docs{background:#2a323c;color:#aeb8c4} :root[data-theme="dark"] .b-prep{background:#1e2f4a;color:#8fb4e8}
  :root[data-theme="dark"] .b-review{background:#3a2f16;color:#e0b968} :root[data-theme="dark"] .b-filed{background:#16352a;color:#66c99a}
  .cs{display:inline-flex;align-items:center;gap:7px;font-weight:650;font-size:12px}
  .cs .dot{width:9px;height:9px;border-radius:50%}
  .cs-ongoing .dot{background:var(--blue)} .cs-ongoing{color:var(--blue)}
  .cs-done .dot{background:var(--green)} .cs-done{color:var(--green)}
  .cs-onhold .dot{background:var(--muted)} .cs-onhold{color:var(--muted)}
  .pill{display:inline-block;padding:4px 10px;border-radius:8px;background:var(--hover);color:var(--muted);font-size:11px;font-weight:650;border:1px solid var(--line);white-space:nowrap}
  .due-over{color:var(--red);font-weight:650} .due-soon{color:var(--amber);font-weight:650}
  .avatar{border-radius:50%;background:var(--gold-soft);color:var(--gold-dark);object-fit:cover;display:inline-flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;flex-shrink:0;vertical-align:middle}
  .online{width:9px;height:9px;border-radius:50%;display:inline-block;background:var(--muted)}
  .online.on{background:var(--green);box-shadow:0 0 0 3px rgba(46,158,107,.2)}
  .prog{height:8px;background:var(--line);border-radius:99px;overflow:hidden;min-width:96px}
  .prog-fill{height:100%;background:linear-gradient(90deg,var(--gold),var(--green));border-radius:99px;transition:width .6s cubic-bezier(.22,1,.36,1)}
  /* Forms */
  label{display:block;font-size:12px;font-weight:650;color:var(--ink);margin:14px 0 6px}
  input,select,textarea{width:100%;padding:11px 13px;border:1px solid var(--input-line);border-radius:11px;font-size:14px;font-family:inherit;background:var(--input);color:var(--ink);transition:border-color var(--tr),box-shadow var(--tr)}
  input:focus,select:focus,textarea:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(200,155,84,.18)}
  .form-row{display:flex;gap:16px}.form-row>div{flex:1;min-width:0}
  .hint{font-size:11px;color:var(--muted);margin-top:6px}
  /* Kanban */
  .board{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;align-items:start}
  .board.pipe{grid-template-columns:repeat(6,1fr)}
  /* Board card urgency: amber as the due date nears, red when due today/overdue */
  .kcard.due-soon{border-color:rgba(224,166,60,.55);box-shadow:0 0 0 1px rgba(224,166,60,.35),var(--shadow)}
  .kcard.due-over{border-color:rgba(224,87,76,.6);box-shadow:0 0 0 1px rgba(224,87,76,.4),var(--shadow);background:rgba(224,87,76,.045)}
  .kcard.due-over .t:after{content:" ⚠";color:var(--red)}
  .col{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:14px;min-height:150px;transition:background var(--tr),box-shadow var(--tr)}
  .col h3{font-size:13px;display:flex;justify-content:space-between;align-items:center;padding:4px 6px 12px;font-weight:650}
  .col h3 .cnt{background:var(--bg);border-radius:999px;padding:2px 10px;font-size:11px;color:var(--muted)}
  .col.docs{border-top:3px solid #8a97a5} .col.prep{border-top:3px solid var(--blue)} .col.review{border-top:3px solid var(--amber)} .col.filed{border-top:3px solid var(--green)}
  .kcard{background:var(--card);border:1px solid var(--line);border-radius:13px;padding:13px 14px;margin-bottom:10px;cursor:grab;box-shadow:var(--shadow);transition:transform var(--tr),box-shadow var(--tr),border-color var(--tr);animation:pop .3s ease both}
  .kcard:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);border-color:rgba(200,155,84,.5)}
  .kcard:active{cursor:grabbing}
  .kcard.drag{opacity:.4}
  .kcard .t{font-weight:650;margin-bottom:5px}
  .kcard .meta{display:flex;justify-content:space-between;align-items:center;margin-top:10px;font-size:12px;color:var(--muted)}
  .col.dropover{outline:2px dashed var(--gold);outline-offset:-5px;background:var(--hover)}
  .ph{color:var(--muted);padding:10px;font-size:12px;text-align:center;border:1px dashed var(--line);border-radius:10px}
  .checkline{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--line)}
  .checkline:last-child{border-bottom:none} .checkline.done .cn{text-decoration:line-through;color:var(--muted)}
  .alertbox{background:rgba(224,87,76,.1);border:1px solid rgba(224,87,76,.3);color:var(--red);padding:13px 16px;border-radius:12px;font-size:13px}
  .okbox{background:rgba(46,158,107,.1);border:1px solid rgba(46,158,107,.3);color:var(--green);padding:13px 16px;border-radius:12px;font-size:13px}
  .empty{text-align:center;padding:46px;color:var(--muted)}
  hr{border:none;border-top:1px solid var(--line);margin:18px 0}
  /* Modal */
  .modal{position:fixed;inset:0;background:rgba(12,16,20,.55);backdrop-filter:blur(4px);display:none;align-items:center;justify-content:center;z-index:80;animation:fade .2s ease}
  .modal.show{display:flex}
  .modal-box{background:var(--card);border-radius:20px;padding:30px;width:370px;text-align:center;box-shadow:var(--shadow-lg);animation:pop .25s ease both}
  .modal-ic{font-size:36px;margin-bottom:8px}
  /* Slide-up drawer */
  .drawer{position:fixed;inset:0;z-index:70;pointer-events:none}
  .drawer-backdrop{position:absolute;inset:0;background:rgba(10,14,18,0);backdrop-filter:blur(0);transition:background .34s ease,backdrop-filter .34s ease}
  .drawer.open{pointer-events:auto}
  .drawer.open .drawer-backdrop{background:rgba(10,14,18,.48);backdrop-filter:blur(6px)}
  .drawer-sheet{position:absolute;left:50%;bottom:0;transform:translate(-50%,102%);width:min(960px,96vw);max-height:93vh;overflow:auto;background:var(--card);border-radius:26px 26px 0 0;box-shadow:0 -24px 70px rgba(0,0,0,.4);transition:transform .42s cubic-bezier(.22,1,.36,1);padding:14px clamp(20px,4vw,40px) 44px}
  .drawer.open .drawer-sheet{transform:translate(-50%,0)}
  .drawer-grip{width:46px;height:5px;border-radius:99px;background:var(--line);margin:6px auto 14px;cursor:pointer}
  .drawer-x{position:absolute;top:18px;right:22px;width:34px;height:34px;border-radius:50%;border:1px solid var(--line);background:var(--card);color:var(--muted);cursor:pointer;font-size:15px;display:flex;align-items:center;justify-content:center;transition:background var(--tr)}
  .drawer-x:hover{background:var(--hover);color:var(--ink)}
  /* Toasts */
  .toasts{position:fixed;right:20px;bottom:20px;z-index:90;display:flex;flex-direction:column;gap:10px}
  .toast{background:var(--card);border:1px solid var(--line);border-left:4px solid var(--gold);border-radius:12px;padding:13px 16px;box-shadow:var(--shadow-lg);min-width:240px;max-width:340px;font-size:13px;font-weight:600;animation:toastIn .3s ease both}
  .toast.ok{border-left-color:var(--green)} .toast.err{border-left-color:var(--red)}
  .toast.hide{animation:toastOut .3s ease forwards}
  @keyframes toastIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
  @keyframes toastOut{to{opacity:0;transform:translateX(24px)}}
  /* Undo toast (Gmail-style deferred action) */
  .toast.undoing{display:flex;align-items:center;gap:12px;position:relative;overflow:hidden;border-left-color:var(--red);min-width:280px}
  .toast .undo{background:transparent;border:none;color:var(--gold);font-weight:800;cursor:pointer;font-size:12px;text-transform:uppercase;letter-spacing:.6px;padding:2px 4px;flex-shrink:0}
  .toast .undo:hover{text-decoration:underline}
  .toast .ubar{position:absolute;left:0;bottom:0;height:3px;background:var(--red);opacity:.5;width:100%;transform-origin:left;animation:ubar 5.2s linear forwards}
  @keyframes ubar{to{transform:scaleX(0)}}
  /* Styled confirm modal */
  .hcm{position:fixed;inset:0;z-index:120;display:flex;align-items:center;justify-content:center;background:rgba(12,16,20,.55);backdrop-filter:blur(4px);animation:fade .18s ease}
  .hcm-box{background:var(--card);border-radius:20px;padding:26px 26px 22px;width:400px;max-width:92vw;box-shadow:var(--shadow-lg);animation:pop .22s ease both}
  /* Sidebar search */
  .navsearch{padding:2px 14px 8px}
  .navsearch input{padding:9px 12px;font-size:13px;border-radius:10px;background:var(--side-2);border:1px solid transparent;color:var(--side-ink)}
  .navsearch input::placeholder{color:var(--side-mut)}
  .navsearch input:focus{border-color:var(--gold);box-shadow:none}
  /* Mobile top bar */
  .mtop{display:none} .navback{display:none}
  .hamb{background:none;border:1px solid var(--line);border-radius:10px;width:40px;height:40px;font-size:18px;cursor:pointer;color:var(--ink)}
  /* Team chat widget */
  #chatWidget{position:fixed;right:22px;bottom:22px;z-index:78}
  #chatBtn{width:56px;height:56px;border-radius:50%;background:linear-gradient(135deg,var(--gold),#d3a662);color:#231C0E;border:none;font-size:23px;cursor:pointer;box-shadow:var(--shadow-lg);position:relative;transition:transform var(--tr)}
  #chatBtn:hover{transform:translateY(-2px)}
  .cbubble{position:absolute;top:-3px;right:-3px;background:var(--red);color:#fff;font-size:11px;font-weight:700;min-width:20px;height:20px;border-radius:10px;display:flex;align-items:center;justify-content:center;padding:0 5px}
  .chatpanel{display:none;position:absolute;right:0;bottom:70px;width:344px;height:468px;background:var(--card);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow-lg);flex-direction:column;overflow:hidden;animation:pop .2s ease both}
  .chatpanel.open{display:flex}
  .chathead{padding:14px 16px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center}
  .chatx{background:none;border:none;cursor:pointer;color:var(--muted);font-size:15px}
  .chatmsgs{flex:1;overflow-y:auto;padding:14px;display:flex;flex-direction:column;gap:9px}
  .cmsg{max-width:80%;padding:8px 12px;border-radius:13px;font-size:13px;line-height:1.4;background:var(--hover);align-self:flex-start;word-wrap:break-word}
  .cmsg.mine{background:var(--gold-soft);align-self:flex-end}
  .cmsg .who{font-size:11px;color:var(--muted);font-weight:650;margin-bottom:2px}
  .chatform{display:flex;gap:8px;padding:12px;border-top:1px solid var(--line)}
  .chatform input{flex:1}
  @media(max-width:900px){.chatpanel{width:calc(100vw - 44px)}}
  /* Timer widget */
  .timer{display:flex;align-items:center;gap:12px;flex-wrap:wrap;background:var(--hover);border:1px solid var(--line);border-radius:14px;padding:12px 16px}
  .timer .clock{font-variant-numeric:tabular-nums;font-weight:750;font-size:20px;letter-spacing:.02em;min-width:104px}
  .timer.running .clock{color:var(--green)}
  .timer .lbl{font-size:11px;text-transform:uppercase;letter-spacing:.6px;color:var(--muted);font-weight:600}
  .rec{width:9px;height:9px;border-radius:50%;background:var(--red);display:inline-block;animation:blink 1.3s ease-in-out infinite}
  @keyframes blink{50%{opacity:.25}}
  .timerrow{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid var(--line)}
  .timerrow:last-child{border-bottom:none}
  /* Client chat (portal <-> member) */
  .cchat{display:flex;flex-direction:column;height:230px;border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--hover)}
  .cchat-msgs{flex:1;overflow-y:auto;padding:14px;display:flex;flex-direction:column;gap:9px}
  .cchat-form{display:flex;gap:8px;padding:12px;border-top:1px solid var(--line)}
  .cchat-form input{flex:1}
  .cbub{max-width:82%;padding:9px 13px;border-radius:14px;font-size:13px;line-height:1.45;background:var(--hover);align-self:flex-start;word-wrap:break-word;overflow-wrap:anywhere}
  .cbub.me{background:var(--gold-soft);align-self:flex-end}
  .cbub .who{font-size:11px;color:var(--muted);font-weight:650;margin-bottom:2px}
  .cbub .at{font-size:10px;color:var(--muted);margin-top:3px;opacity:.8}
  .cchat-empty{margin:auto;color:var(--muted);font-size:13px;text-align:center}
  /* Member progress panel */
  .prog-lg{height:12px;border-radius:99px}
  .prog-wrap{display:flex;flex-direction:column;gap:6px}
  .prog-wrap .between{font-size:12px}
  /* Top bar (bell + clock) */
  .topbar{display:flex;align-items:center;gap:12px;padding:12px clamp(16px,4vw,44px);border-bottom:1px solid var(--line);background:var(--card);position:sticky;top:0;z-index:44}
  .topbar .sp{flex:1}
  .iconbtn{position:relative;width:40px;height:40px;border-radius:11px;border:1px solid var(--line);background:var(--card);color:var(--ink);cursor:pointer;font-size:17px;display:flex;align-items:center;justify-content:center;transition:background var(--tr)}
  .iconbtn:hover{background:var(--hover)}
  .clockbtn{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 15px;border-radius:11px;border:1px solid var(--line);background:var(--card);color:var(--ink);font-weight:650;font-size:13px;cursor:pointer;transition:background var(--tr);white-space:nowrap;flex-shrink:0}
  .tb-brand{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:38vw}
  .clockbtn .d{width:9px;height:9px;border-radius:50%;background:var(--muted)}
  .clockbtn.on{background:rgba(46,158,107,.12);border-color:rgba(46,158,107,.4);color:var(--green)}
  .clockbtn.on .d{background:var(--green);box-shadow:0 0 0 3px rgba(46,158,107,.2)}
  .reddot{position:absolute;top:5px;right:6px;min-width:16px;height:16px;border-radius:9px;background:var(--red);color:#fff;font-size:10px;font-weight:700;display:none;align-items:center;justify-content:center;padding:0 4px}
  .notifpanel{position:absolute;top:52px;right:0;width:340px;max-height:440px;overflow-y:auto;background:var(--card);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow-lg);display:none;z-index:60;animation:pop .18s ease both}
  .notifpanel.open{display:block}
  .nwrap{position:relative}
  .notif-item{display:block;padding:12px 16px;border-bottom:1px solid var(--line);font-size:13px}
  .notif-item:last-child{border-bottom:none}
  .notif-item.unread{background:var(--hover)}
  .notif-item .t{font-weight:600} .notif-item .a{font-size:11px;color:var(--muted);margin-top:2px}
  .notif-empty{padding:34px;text-align:center;color:var(--muted);font-size:13px}
  .notif-head{padding:12px 16px;border-bottom:1px solid var(--line);font-weight:700}
  /* DM / chat dock */
  .roster{flex:1;overflow-y:auto;padding:6px}
  .rperson{display:flex;align-items:center;gap:10px;padding:9px 11px;border-radius:11px;cursor:pointer;transition:background var(--tr)}
  .rperson:hover{background:var(--hover)}
  .rperson .nm{flex:1;min-width:0}
  .rperson .nm b{font-size:13px;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .rperson .nm span{font-size:11px;color:var(--muted)}
  .rperson .rb{background:var(--red);color:#fff;font-size:10px;font-weight:700;min-width:18px;height:18px;border-radius:9px;display:flex;align-items:center;justify-content:center;padding:0 5px}
  .rperson.unreadrow{background:var(--hover)} .rperson.unreadrow .nm b{font-weight:750}
  .reddotmini{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--red);vertical-align:middle;margin-left:2px}
  .dm-att{background:none;border:none;cursor:pointer;font-size:17px;color:var(--muted)}
  .dm-file{display:inline-flex;align-items:center;gap:6px;font-weight:650;color:var(--gold-dark)}
  .dm-img{max-width:180px;max-height:180px;border-radius:10px;display:block;margin-top:4px}
  .chatback{background:none;border:none;cursor:pointer;color:var(--muted);font-size:15px;margin-right:4px}
  /* Animations */
  @keyframes fadeInUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
  @keyframes pop{from{opacity:0;transform:scale(.97)}to{opacity:1;transform:none}}
  @keyframes fade{from{opacity:0}to{opacity:1}}
  @media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}html{scroll-behavior:auto}}
  /* Print / "Save as PDF" — strip the app chrome, show just the content */
  @media print{
    .side,.topbar,#chatWidget,.no-print,.drawer,.toasts,.pagehead .btn,.pagehead .flex{display:none!important}
    .app{display:block} .main{display:block} .content{max-width:100%;margin:0;padding:0;animation:none}
    .card{box-shadow:none;border:1px solid #ccc;break-inside:avoid}
    body{background:#fff;color:#000}
    th,td{padding:6px 8px}
  }
  .topbar .hamb{display:none} .tb-brand{display:none}
  @media(max-width:900px){
    .form-row{flex-direction:column}
    .content{padding:14px 12px 36px}
    .topbar{padding:10px 14px}
    .topbar .hamb{display:flex;align-items:center;justify-content:center} .tb-brand{display:block;font-family:'Montserrat',-apple-system,sans-serif;font-weight:700;font-size:15px}
    .side{position:fixed;left:0;top:0;height:100vh;z-index:60;transform:translateX(-100%);transition:transform .3s ease;box-shadow:var(--shadow-lg)}
    body.nav-open .side{transform:translateX(0)}
    body.nav-open .navback{display:block;position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:55}
    /* Tighter, single-column layout — removes the big empty gaps on phones */
    h1{font-size:21px}
    .row{flex-direction:column;gap:14px}
    .row>*{min-width:0!important;width:100%}
    .grid.stats,.stats{grid-template-columns:repeat(2,1fr);gap:12px}
    .pad{padding:16px 16px}
    .card.pad{padding:16px 16px}
    .stat{padding:14px 14px}.stat .n{font-size:24px}.stat .chip{width:32px;height:32px;top:12px;right:12px}
    .mb{margin-bottom:14px}.mt{margin-top:14px}
    /* Board: stack columns but don't leave tall empty blocks */
    .board,.board.pipe{grid-template-columns:1fr;gap:12px}
    .col{min-height:0}.col .dropzone{min-height:0}.col .ph{padding:8px}
    /* Chat dock + drawer go (near) full-screen on phones */
    .chatpanel{width:calc(100vw - 20px);height:min(72vh,560px);bottom:78px}
    .drawer-sheet{width:100vw;max-height:94vh;border-radius:20px 20px 0 0;padding:12px 16px 40px}
    th,td{padding:11px 12px}
    .pagehead{margin-bottom:16px}
    /* Header rows (title + buttons / pills) wrap instead of crowding or clipping */
    .between{flex-wrap:wrap;row-gap:10px}
    .pagehead .flex,.pagehead .btn{flex-wrap:wrap}
    /* Every table becomes a horizontal-scroll block on phones, so NO table can ever push the
       page wider than the screen. Works in every browser (no :has() needed). Cells stay on one
       line and you scroll the table sideways within its card. */
    .content table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%}
    .content th,.content td{white-space:nowrap}
    /* key/value tables (client Details, engagement details) are narrow — let their long
       values (emails) wrap instead of forcing a sideways scroll. */
    .content table.kv{white-space:normal}
    .content table.kv th,.content table.kv td{white-space:normal;overflow-wrap:break-word;word-break:normal}
    /* Filter bars wrap and each control stays tappable */
    .content form.flex>*{min-width:0}
    input,select,textarea{font-size:16px} /* stops iOS auto-zoom on focus */
  }
  /* Auth screens */
  .authwrap{min-height:100vh;display:flex;align-items:center;justify-content:center;background:radial-gradient(120% 120% at 50% 0%,#2c3540 0%,#1a2027 60%,#12171d 100%);padding:20px}
  .authcard{background:var(--card);border-radius:22px;padding:38px 36px;width:400px;box-shadow:0 28px 70px rgba(0,0,0,.4);animation:pop .38s ease both}
  .authcard .top{display:flex;align-items:center;gap:12px;margin-bottom:10px}
  .authcard .top b{font-family:'Montserrat',-apple-system,sans-serif;font-weight:700;font-size:18px}
  .authcard .sub{color:var(--muted);font-size:13px;margin-bottom:16px}
  .authcard .btn{width:100%;justify-content:center;margin-top:22px;padding:12px}
  .gbtn{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;margin-top:14px;padding:12px;border:1px solid var(--input-line);border-radius:12px;background:var(--card);color:var(--ink);font-weight:650;cursor:pointer;transition:background var(--tr)}
  .gbtn:hover{background:var(--hover)}
  .divider{display:flex;align-items:center;gap:12px;color:var(--muted);font-size:12px;margin:18px 0}
  .divider:before,.divider:after{content:"";flex:1;height:1px;background:var(--line)}
  .authlink{text-align:center;margin-top:18px;font-size:13px}
  .authlink a{color:var(--gold-dark);font-weight:650}
  /* Client portal */
  .portal{max-width:820px;margin:0 auto;padding:26px 20px 70px}
  .phead{display:flex;align-items:center;gap:12px;padding:14px 0 20px}
  .phead b{font-family:Georgia,serif;font-size:18px}
  .phead span{display:block;font-size:10px;letter-spacing:2px;text-transform:uppercase;color:var(--muted)}