/* ==========================================================================
   loco-ui.css — THE Loco design system.

   This file IS the Lumenia client portal's stylesheet, copied from
   F:\Loco\client-portal\public\index.html. It is not a reinterpretation of it.

   That distinction cost a rebuild: the first version of this file kept the
   portal's TOKENS but invented its own components — .navbtn instead of
   .nav-item, .pill instead of .badge, its own heading scale, --slate where the
   portal uses #9aa6ae, and .btn with copper/copper6 the wrong way round. The
   tokens matched and the result still did not look like the portal, because a
   design system is its components, not its colour variables.

   RULE: to change a shared component, change it in the PORTAL and re-copy.
   Surface-specific work belongs in a layer file (hq-layer / chat-layer /
   hub-layer), never here.

   Only edits made on copy — both are portal-auth plumbing that would break any
   other page:
     .app{display:none}      -> display:flex   (portal reveals it via body.authed)
     body.authed .app / .login rules removed
   The login-screen styles are kept deliberately: they are dead weight on the HQ
   but they are what the next client portal starts from, and dropping them is how
   drift begins.
   ========================================================================== */


  :root{
    --ink:#0E1C28;--copper:#C25E38;--copper6:#A8492A;--copper4:#DB7849;--copper1:#F4E4DC;
    --paper:#F4F6F7;--slate:#51616E;--muted:#9aa6ae;--white:#fff;--line:#E7EBED;--line2:#EEF1F3;
    --green:#2F7D5B;--green-bg:#E7F2EC;--amber:#9A6714;--amber-bg:#FBF0DA;--blue:#3C5A7A;--blue-bg:#EAF0F6;--red:#B23C3C;--red-bg:#FBEBEB;
    --font-d:'Schibsted Grotesk',system-ui,sans-serif;--font-b:'Hanken Grotesk',system-ui,sans-serif;--font-m:'JetBrains Mono',ui-monospace,monospace;
    --r:16px;--r-sm:11px;--sh:0 1px 2px rgba(14,28,40,.04),0 10px 30px -16px rgba(14,28,40,.14);--sh-lg:0 30px 70px -30px rgba(14,28,40,.35);
  }
  *{box-sizing:border-box;margin:0;padding:0}html,body{height:100%}
  body{font-family:var(--font-b);color:var(--ink);background:var(--paper);display:flex;-webkit-font-smoothing:antialiased;line-height:1.5}
  ::selection{background:var(--copper1)}a{color:inherit;text-decoration:none}button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
  input,select,textarea{font-family:inherit}.mono{font-family:var(--font-m)}.hide{display:none!important}

  /* ---------- LOGIN (light, dot-grid motif) ---------- */
  .login{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;padding:24px;background:var(--paper);overflow:hidden}
  .login::before{content:'';position:absolute;inset:-60px;background-image:radial-gradient(circle,rgba(14,28,40,.08) 1.4px,transparent 1.4px);background-size:24px 24px;-webkit-mask-image:radial-gradient(130% 105% at 50% -8%,#000 52%,transparent 100%);mask-image:radial-gradient(130% 105% at 50% -8%,#000 52%,transparent 100%);animation:drift 34s linear infinite}
  .login::after{content:'';position:absolute;top:-170px;right:-130px;width:540px;height:540px;background:radial-gradient(circle,rgba(219,120,73,.15),transparent 62%);pointer-events:none}
  @keyframes drift{to{background-position:240px 96px}}
  .login-card{position:relative;width:100%;max-width:412px;background:#fff;border:1px solid var(--line);border-radius:22px;box-shadow:0 30px 80px -34px rgba(14,28,40,.42);padding:40px 38px 34px;animation:rise .6s cubic-bezier(.22,1,.36,1) both}
  @keyframes rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
  .login-logo{display:flex;justify-content:center;margin-bottom:28px;animation:fadein .8s .25s both}
  .login-logo img{width:150px;height:auto;transform:translateX(-9px)}
  @keyframes fadein{from{opacity:0}to{opacity:1}}
  .login-card h1{font-family:var(--font-d);font-weight:600;font-size:22px;letter-spacing:-.01em;text-align:center}
  .login-card .sub{color:var(--slate);font-size:13.5px;margin:6px 0 26px;text-align:center}
  .lg-err{color:var(--red);font-size:12.5px;margin:-6px 0 14px;min-height:16px}
  .lg-row{display:flex;align-items:center;justify-content:space-between;margin:-4px 0 18px}
  .lg-row a{color:var(--copper6);font-size:12.5px;font-weight:600}.lg-row a:hover{text-decoration:underline}
  .check{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;color:var(--slate);cursor:pointer;user-select:none}
  .check input{appearance:none;width:16px;height:16px;border:1.6px solid #c9d1d6;border-radius:5px;position:relative;cursor:pointer}
  .check input:checked{background:var(--copper);border-color:var(--copper)}
  .check input:checked::after{content:'';position:absolute;left:4px;top:1px;width:4px;height:8px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
  .code-in{display:flex;justify-content:center;margin:6px 0 8px}
  .code-in input{width:100%;text-align:center;font-family:var(--font-m);font-size:26px;font-weight:600;letter-spacing:.5em;padding:14px 10px 14px 22px;border:1px solid var(--line);border-radius:12px}
  .code-in input:focus{outline:none;border-color:var(--copper4);box-shadow:0 0 0 3px var(--copper1)}
  .setup-hint{background:var(--amber-bg);color:var(--amber);font-size:12px;border-radius:9px;padding:9px 12px;margin:6px 0 14px;text-align:center}
  .setup-hint b{font-family:var(--font-m);letter-spacing:.1em}
  .login-foot{margin-top:22px;padding-top:18px;border-top:1px solid var(--line2);font-family:var(--font-m);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:#9aa6ae;display:flex;align-items:center;gap:8px;justify-content:center}
  .lg-back{text-align:center;margin-top:14px}.lg-back a{color:var(--slate);font-size:12.5px;font-weight:600}

  .app{display:flex;width:100%}   /* portal: display:none until body.authed *//* fields */
  .fld{margin-bottom:16px}.fld label{display:block;font-size:12.5px;font-weight:600;margin-bottom:7px}
  .fld input,.fld select,.fld textarea{width:100%;font-size:14px;color:var(--ink);border:1px solid var(--line);border-radius:10px;padding:11px 13px;background:#fff;transition:border .15s,box-shadow .15s}
  .fld input:focus,.fld select:focus,.fld textarea:focus{outline:none;border-color:var(--copper4);box-shadow:0 0 0 3px var(--copper1)}
  .fld textarea{resize:vertical;min-height:90px}

  /* buttons */
  .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-weight:600;font-size:13.5px;padding:10px 16px;border-radius:var(--r-sm);background:var(--copper);color:#fff;transition:background .15s,transform .05s}
  .btn:hover{background:var(--copper6)}.btn:active{transform:translateY(1px)}.btn svg{width:16px;height:16px;stroke-width:2}
  .btn-ghost{background:#fff;color:var(--ink);border:1px solid var(--line)}.btn-ghost:hover{background:var(--paper)}
  .btn-sm{padding:7px 12px;font-size:12.5px}.btn-block{width:100%}
  .link-more{display:inline-flex;align-items:center;gap:6px;color:var(--copper6);font-weight:600;font-size:13.5px}.link-more:hover{gap:9px}.link-more svg{width:15px;height:15px;stroke-width:2}

  /* ---------- SIDEBAR ---------- */
  .sidebar{width:252px;flex:0 0 252px;height:100vh;background:#fff;border-right:1px solid var(--line);display:flex;flex-direction:column;padding:26px 18px 18px;position:sticky;top:0}
  .brand{padding:0 8px 4px;margin-bottom:26px}.brand img{width:132px;transform:translateX(-8px)}
  .nav-label{font-family:var(--font-m);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:#9aa6ae;padding:0 10px;margin:6px 0 8px}
  .nav{display:flex;flex-direction:column;gap:3px}
  .nav-item{display:flex;align-items:center;gap:12px;padding:11px 12px;border-radius:var(--r-sm);color:var(--slate);font-weight:500;font-size:14.5px;position:relative;transition:.15s}
  .nav-item svg{width:19px;height:19px;flex:0 0 19px;stroke-width:1.7}.nav-item:hover{background:var(--paper);color:var(--ink)}
  .nav-item.active{background:var(--copper1);color:var(--copper6);font-weight:600}
  .nav-item.active::before{content:'';position:absolute;left:-18px;top:8px;bottom:8px;width:3px;border-radius:0 3px 3px 0;background:var(--copper)}
  .nav-item .badge-n{margin-left:auto;font-family:var(--font-m);font-size:11px;font-weight:600;background:var(--copper);color:#fff;min-width:19px;height:19px;border-radius:20px;display:flex;align-items:center;justify-content:center;padding:0 5px}
  .side-foot{margin-top:auto;border-top:1px solid var(--line2);padding-top:14px}
  .client-chip{display:flex;align-items:center;gap:11px;padding:8px 10px}
  .client-logo{width:34px;height:34px;border-radius:9px;background:var(--ink);color:#fff;display:flex;align-items:center;justify-content:center;font-family:var(--font-d);font-weight:700;font-size:15px;flex:0 0 34px}
  .client-chip b{font-size:13.5px;font-weight:600;display:block;line-height:1.25}.client-chip span{font-family:var(--font-m);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:#9aa6ae}

  /* ---------- MAIN ---------- */
  .main{flex:1;min-width:0;height:100vh;overflow:hidden;display:flex;flex-direction:column;position:relative}
  /* topbar sits OUTSIDE the scroll area so a scrollbar never narrows it (identical on every page) */
  .scroll-area{flex:1;min-height:0;overflow-y:auto}
  .topbar{flex:0 0 auto;z-index:30;background:#fff;border-bottom:1px solid var(--line);padding:0 44px;height:74px;display:flex;align-items:center;justify-content:space-between;gap:24px}
  .topbar .tt{font-family:var(--font-d);font-weight:600;font-size:19px;letter-spacing:-.01em;white-space:nowrap}
  .topbar-r{display:flex;align-items:center;gap:22px;flex:0 0 auto}
  .tb-actions{display:flex;align-items:center;gap:14px}
  .tb-sep{width:1px;height:32px;background:var(--line);flex:0 0 1px}
  .role-pill{font-family:var(--font-m);font-size:11px;font-weight:600;letter-spacing:.04em;padding:5px 11px;border-radius:20px;white-space:nowrap}
  .role-pill.admin{color:var(--copper6);background:var(--copper1)}.role-pill.client{color:var(--blue);background:var(--blue-bg)}
  .bell{position:relative;width:40px;height:40px;border-radius:11px;color:var(--slate);display:flex;align-items:center;justify-content:center;border:1px solid var(--line);background:#fff;transition:.15s}
  .bell:hover{background:var(--paper);color:var(--ink);border-color:#d9e0e4}.bell svg{width:19px;height:19px;stroke-width:1.7}
  .bell .dot{position:absolute;top:-6px;right:-6px;min-width:18px;height:18px;padding:0 5px;border-radius:20px;background:var(--copper);color:#fff;font-family:var(--font-m);font-size:10px;font-weight:700;line-height:1;display:flex;align-items:center;justify-content:center;border:2px solid #fff;box-shadow:0 1px 3px rgba(194,94,56,.4);animation:badgein .28s cubic-bezier(.22,1,.36,1)}
  @keyframes badgein{from{transform:scale(0)}to{transform:scale(1)}}
  .user{display:flex;align-items:center;gap:11px;max-width:230px}
  .avatar{width:36px;height:36px;border-radius:50%;background:var(--copper1);color:var(--copper6);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:13px;flex:0 0 36px}
  .user .who{min-width:0}
  .user b{font-size:13.5px;font-weight:600;display:block;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.user span{font-size:12px;color:var(--slate);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}
  .logout{width:38px;height:38px;border-radius:10px;color:var(--slate);display:flex;align-items:center;justify-content:center;border:1px solid var(--line);background:#fff;flex:0 0 38px;transition:.15s}.logout:hover{background:var(--paper);color:var(--ink)}.logout svg{width:17px;height:17px;stroke-width:1.8}
  @media(max-width:560px){.user .who{display:none}.topbar-r{gap:12px}.tb-sep{display:none}}

  /* notification panel */
  .noti-panel{position:absolute;top:62px;right:40px;width:380px;max-width:calc(100vw - 30px);background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:var(--sh-lg);z-index:40;overflow:hidden;display:none}
  .noti-panel.on{display:block;animation:pop .2s cubic-bezier(.22,1,.36,1)}
  .noti-h{display:flex;align-items:center;justify-content:space-between;padding:16px 18px;border-bottom:1px solid var(--line2)}
  .noti-h b{font-family:var(--font-d);font-size:15px}.noti-h button{color:var(--copper6);font-size:12px;font-weight:600}
  .noti-list{max-height:400px;overflow-y:auto}
  .noti{display:flex;gap:12px;padding:14px 18px;border-bottom:1px solid var(--line2);cursor:pointer;transition:.12s}.noti:hover{background:#fcfcfb}.noti:last-child{border-bottom:none}
  .noti.unread{background:#fdf7f3}.noti.unread:hover{background:#fbf1ea}
  .noti .ni{width:32px;height:32px;flex:0 0 32px;border-radius:9px;background:var(--copper1);color:var(--copper6);display:flex;align-items:center;justify-content:center}.noti .ni svg{width:16px;height:16px;stroke-width:1.8}
  .noti b{font-size:13.5px;font-weight:600;display:block}.noti p{font-size:12.5px;color:var(--slate);margin-top:2px;line-height:1.4}.noti time{font-family:var(--font-m);font-size:10.5px;color:#9aa6ae;margin-top:4px;display:block}
  .noti .udot{width:8px;height:8px;border-radius:50%;background:var(--copper);flex:0 0 8px;margin-top:6px;margin-left:auto}
  .noti-empty{padding:40px 20px;text-align:center;color:var(--slate);font-size:13px}

  .content{padding:38px 40px 60px;max-width:1180px;width:100%}
  .view{display:none}.view.on{display:block;animation:fade .35s ease}@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
  @keyframes pop{from{opacity:0;transform:scale(.97) translateY(8px)}to{opacity:1;transform:none}}
  .eyebrow{font-family:var(--font-m);font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--copper6)}
  .page-head{margin-bottom:28px}.page-head h1{font-family:var(--font-d);font-weight:600;font-size:30px;letter-spacing:-.02em;margin-top:9px}.page-head p{color:var(--slate);font-size:15px;margin-top:7px;max-width:66ch}
  .sec-label{display:flex;align-items:center;gap:12px;margin:32px 0 16px}.sec-label h2{font-family:var(--font-d);font-weight:600;font-size:16px}.sec-label .rule{flex:1;height:1px;background:var(--line)}
  .card{background:#fff;border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh)}
  .grid{display:grid;gap:20px}.g-2{grid-template-columns:1.6fr 1fr}.g-3{grid-template-columns:repeat(3,1fr)}

  .badge{display:inline-flex;align-items:center;gap:7px;font-family:var(--font-m);font-size:11.5px;font-weight:600;letter-spacing:.02em;padding:5px 11px;border-radius:20px;white-space:nowrap}
  .badge .dot{width:7px;height:7px;border-radius:50%;background:currentColor}
  .badge.live,.badge.complete,.badge.resolved,.badge.paid{color:var(--green);background:var(--green-bg)}
  .badge.in-progress{color:var(--copper6);background:var(--copper1)}
  .badge.waiting,.badge.outstanding{color:var(--amber);background:var(--amber-bg)}
  .badge.new,.badge.closed,.badge.draft{color:var(--blue);background:var(--blue-bg)}
  .pri{font-family:var(--font-m);font-size:10.5px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;padding:3px 8px;border-radius:6px}
  .pri.low{color:var(--slate);background:var(--paper)}.pri.normal{color:var(--blue);background:var(--blue-bg)}.pri.high{color:var(--amber);background:var(--amber-bg)}.pri.urgent{color:var(--red);background:var(--red-bg)}
  .bill-tag{font-family:var(--font-m);font-size:10.5px;font-weight:600;padding:3px 8px;border-radius:6px}
  .bill-tag.included{color:var(--green);background:var(--green-bg)}.bill-tag.chargeable{color:var(--copper6);background:var(--copper1)}.bill-tag.tbd{color:var(--slate);background:var(--paper)}

  /* project + overview (compact reuse) */
  .proj{padding:26px}.proj-top{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}
  .proj h3{font-family:var(--font-d);font-weight:600;font-size:20px}.proj .sub{color:var(--slate);font-size:13.5px;margin-top:4px}
  .proj-meta{display:flex;gap:26px;margin-top:22px;flex-wrap:wrap}.proj-meta .k{font-family:var(--font-m);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:#9aa6ae}.proj-meta .v{font-weight:600;font-size:14.5px;margin-top:3px}.proj-meta .v.cop{color:var(--copper6)}
  .stepper{display:flex;margin:26px 0 4px}.step{flex:1;position:relative;padding-top:26px;text-align:center}
  .step .node{position:absolute;top:0;left:50%;transform:translateX(-50%);width:20px;height:20px;border-radius:50%;background:#fff;border:2px solid var(--line);z-index:2;display:flex;align-items:center;justify-content:center}.step .node svg{width:11px;height:11px;color:#fff;stroke-width:3}
  .step .bar{position:absolute;top:9px;height:2px;background:var(--line);left:-50%;right:50%;z-index:1}.step:first-child .bar{display:none}
  .step .lbl{font-size:12.5px;font-weight:600;color:var(--slate)}.step .ph{font-family:var(--font-m);font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:#9aa6ae;margin-top:2px;display:block}
  .step.done .node{background:var(--green);border-color:var(--green)}.step.done .bar{background:var(--green)}.step.done .lbl{color:var(--ink)}
  .step.current .node{background:var(--copper);border-color:var(--copper);box-shadow:0 0 0 5px var(--copper1)}.step.current .lbl{color:var(--copper6)}.step.current .bar{background:linear-gradient(90deg,var(--green),var(--copper))}
  .step.current .node::after{content:'';position:absolute;inset:0;border-radius:50%;box-shadow:0 0 0 0 rgba(194,94,56,.5);animation:nodepulse 2.2s cubic-bezier(.66,0,0,1) infinite}
  @keyframes nodepulse{0%{box-shadow:0 0 0 0 rgba(194,94,56,.5)}70%{box-shadow:0 0 0 13px rgba(194,94,56,0)}100%{box-shadow:0 0 0 0 rgba(194,94,56,0)}}
  .proj-foot{display:flex;gap:10px;margin-top:24px;padding-top:20px;border-top:1px solid var(--line2);flex-wrap:wrap}
  .live-glyph{width:44px;height:44px;border-radius:12px;background:var(--green-bg);color:var(--green);display:flex;align-items:center;justify-content:center}.live-glyph svg{width:22px;height:22px}
  .mini{padding:20px 22px}.mini .ic{width:38px;height:38px;border-radius:10px;background:var(--copper1);color:var(--copper6);display:flex;align-items:center;justify-content:center;margin-bottom:12px}.mini .ic svg{width:19px;height:19px;stroke-width:1.7}
  .mini .k{font-family:var(--font-m);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:#9aa6ae}.mini .v{font-family:var(--font-d);font-weight:600;font-size:17px;margin-top:3px}.mini .x{font-size:13px;color:var(--slate);margin-top:4px}
  .qlist{display:flex;flex-direction:column}.qrow{display:flex;align-items:center;gap:13px;padding:13px 4px;border-bottom:1px solid var(--line2)}.qrow:last-child{border-bottom:none}
  .qrow .qic{width:34px;height:34px;border-radius:9px;background:var(--paper);color:var(--slate);display:flex;align-items:center;justify-content:center;flex:0 0 34px}.qrow .qic svg{width:17px;height:17px;stroke-width:1.7}
  .qrow b{font-size:13.5px;font-weight:600}.qrow small{color:var(--slate);font-size:12px}.qrow .qgo{margin-left:auto;color:#b7c0c6}.qrow:hover .qgo{color:var(--copper)}
  .team-row{display:flex;align-items:center;gap:13px;padding:12px 0}.team-row .avatar{background:var(--ink);color:#fff}

  /* callout */
  .callout{display:flex;gap:16px;align-items:flex-start;padding:20px 22px;border-radius:var(--r);background:linear-gradient(180deg,#fff,#fffdfb);border:1px solid var(--copper1);box-shadow:var(--sh)}
  .callout .ic{width:40px;height:40px;flex:0 0 40px;border-radius:11px;background:var(--copper);color:#fff;display:flex;align-items:center;justify-content:center}.callout .ic svg{width:20px;height:20px}
  .callout h3{font-family:var(--font-d);font-weight:600;font-size:15.5px}.callout p{color:var(--slate);font-size:13.5px;margin-top:4px;max-width:80ch}
  .callout+.callout{margin-top:16px}
  .bar-row{display:flex;align-items:center;gap:16px;margin:24px 0 16px}.bar-row .stats{display:flex;gap:22px}.bar-row .stats .s{font-size:13px;color:var(--slate)}.bar-row .stats .s b{font-family:var(--font-d);font-size:17px;color:var(--ink);font-weight:600}.bar-row .btn{margin-left:auto}

  /* tickets (feedback + support share) */
  .tk{margin-bottom:14px;overflow:hidden}.tk-head{display:flex;align-items:center;gap:15px;padding:18px 22px;cursor:pointer;transition:.15s}.tk-head:hover{background:#fcfcfb}
  .tk-ref{font-family:var(--font-m);font-size:11px;font-weight:600;letter-spacing:.04em;color:var(--copper6);background:var(--copper1);padding:4px 9px;border-radius:7px;flex:0 0 auto}
  .tk-main{min-width:0}.tk-main b{font-size:15px;font-weight:600;display:block}.tk-main .meta{font-size:12.5px;color:var(--slate);margin-top:3px;display:flex;gap:12px;flex-wrap:wrap;align-items:center}
  .tk-right{margin-left:auto;display:flex;align-items:center;gap:12px;flex:0 0 auto}.tk-count{font-family:var(--font-m);font-size:12px;color:var(--slate)}
  .chev{color:#b7c0c6;transition:transform .2s;width:18px;height:18px}.tk.open .chev{transform:rotate(90deg)}
  .tk-body{display:none;padding:2px 22px 22px;border-top:1px solid var(--line2)}.tk.open .tk-body{display:block}
  .grp-h{font-family:var(--font-m);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:#9aa6ae;margin:18px 0 8px}
  .desc{font-size:14px;color:var(--ink);line-height:1.6;white-space:pre-wrap}
  .chk{display:flex;align-items:flex-start;gap:11px;padding:8px 0}
  .chk input{appearance:none;width:18px;height:18px;border:2px solid #cdd5d9;border-radius:6px;flex:0 0 18px;margin-top:1px;position:relative;cursor:pointer;transition:.15s}
  .chk input:checked{background:var(--green);border-color:var(--green)}.chk input:checked::after{content:'';position:absolute;left:4.5px;top:1px;width:5px;height:9px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
  .chk input:disabled{cursor:default}.chk label{font-size:13.5px;line-height:1.5;cursor:pointer}.chk input:disabled+label{cursor:default}.chk input:checked+label{color:#9aa6ae;text-decoration:line-through}
  .q-item{font-size:13.5px;padding:7px 0 7px 26px;position:relative}.q-item::before{content:'?';position:absolute;left:2px;top:6px;width:17px;height:17px;border-radius:50%;background:var(--blue-bg);color:var(--blue);font-family:var(--font-m);font-size:10px;font-weight:700;display:flex;align-items:center;justify-content:center}

  /* AI-formatted (markdown) ticket body */
  .md-body{font-size:14px;color:var(--ink);line-height:1.6}
  .md-body p{margin:0 0 10px}.md-body>*:last-child{margin-bottom:0}
  .md-body .md-h{font-family:var(--font-d);font-weight:600;margin:16px 0 8px;font-size:15px}.md-body h2.md-h{font-size:16.5px}.md-body h4.md-h{font-size:14px}
  .md-body .md-ul,.md-body .md-ol{margin:4px 0 12px;padding-left:22px}.md-body .md-ul li,.md-body .md-ol li{margin:3px 0}
  .md-body .md-hr{border:none;border-top:1px solid var(--line2);margin:14px 0}
  .md-body code{font-family:var(--font-m);font-size:12.5px;background:var(--paper);padding:1px 5px;border-radius:5px}
  .md-body a{color:var(--copper6);font-weight:600;text-decoration:underline}
  .md-tasks{list-style:none;margin:6px 0 12px;padding:0}
  .md-task{display:flex;align-items:flex-start;gap:11px;padding:5px 0}
  .md-task>span{font-size:13.5px;line-height:1.5}.md-task.done>span{color:#9aa6ae;text-decoration:line-through}
  .md-tick{appearance:none;width:18px;height:18px;border:2px solid #cdd5d9;border-radius:6px;flex:0 0 18px;margin-top:1px;position:relative;cursor:pointer;transition:.15s}
  .md-tick:checked{background:var(--green);border-color:var(--green)}.md-tick:checked::after{content:'';position:absolute;left:4.5px;top:1px;width:5px;height:9px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
  .md-box{width:18px;height:18px;border:2px solid #cdd5d9;border-radius:6px;flex:0 0 18px;margin-top:1px;position:relative}
  .md-box.on{background:var(--green);border-color:var(--green)}.md-box.on::after{content:'';position:absolute;left:4.5px;top:1px;width:5px;height:9px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
  .fmt-pending{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;color:var(--copper6);background:var(--copper1);padding:6px 11px;border-radius:8px;margin-bottom:12px}
  .orig-email{margin-top:16px;border-top:1px solid var(--line2);padding-top:12px}
  .orig-email summary{font-family:var(--font-m);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:#9aa6ae;cursor:pointer;list-style:none}.orig-email summary::-webkit-details-marker{display:none}
  .orig-email summary::before{content:'▸ ';color:#b7c0c6}.orig-email[open] summary::before{content:'▾ '}
  .orig-email pre{white-space:pre-wrap;font-family:var(--font-m);font-size:12px;color:var(--slate);background:var(--paper);border-radius:9px;padding:12px 14px;margin-top:10px;overflow-x:auto}

  /* comment thread */
  .cmt{display:flex;gap:12px;padding:12px 0}.cmt .av{width:32px;height:32px;flex:0 0 32px;border-radius:50%;background:var(--copper1);color:var(--copper6);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:12px}
  .cmt.admin .av{background:var(--ink);color:#fff}.cmt-b{flex:1;min-width:0}.cmt-b .hd{display:flex;align-items:center;gap:9px;margin-bottom:3px}.cmt-b .hd b{font-size:13px;font-weight:600}.cmt-b .hd time{font-family:var(--font-m);font-size:10.5px;color:#9aa6ae}
  .cmt-b .bx{font-size:13.5px;color:var(--ink);line-height:1.55;background:var(--paper);border-radius:10px;padding:10px 13px}.cmt.internal .bx{background:#FFF7E8;border:1px solid #F3E2BE}
  .int-tag{font-family:var(--font-m);font-size:9.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--amber);background:var(--amber-bg);padding:2px 6px;border-radius:5px}
  .cmt-form{margin-top:14px}.cmt-form textarea{width:100%;font-size:13.5px;border:1px solid var(--line);border-radius:10px;padding:11px 13px;resize:vertical;min-height:64px}.cmt-form textarea:focus{outline:none;border-color:var(--copper4);box-shadow:0 0 0 3px var(--copper1)}
  .cmt-actions{display:flex;align-items:center;gap:12px;margin-top:10px;flex-wrap:wrap}
  .attach-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
  .att{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;color:var(--copper6);font-weight:600;background:var(--copper1);padding:6px 11px;border-radius:8px}.att svg{width:14px;height:14px}
  .tk-actions{display:flex;align-items:center;gap:12px;margin-top:20px;padding-top:18px;border-top:1px solid var(--line2);flex-wrap:wrap}.tk-actions .lab{font-size:12.5px;color:var(--slate)}
  .seg{display:inline-flex;background:var(--paper);border:1px solid var(--line);border-radius:9px;padding:3px;flex-wrap:wrap}
  .seg button{font-size:12px;font-weight:600;color:var(--slate);padding:6px 11px;border-radius:6px}.seg button.on{background:#fff;box-shadow:0 1px 2px rgba(14,28,40,.08);color:var(--ink)}
  .ro-note{font-size:12.5px;color:var(--slate);font-style:italic}
  .adminbox{background:#fbfaf9;border:1px solid var(--line);border-radius:12px;padding:14px 16px;margin-top:16px}
  .adminbox .ah{font-family:var(--font-m);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--copper6);margin-bottom:10px}
  .ctrl-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:10px}.ctrl-row .cl{font-size:12.5px;color:var(--slate);width:74px}
  .num-in{width:70px;font-size:13px;border:1px solid var(--line);border-radius:8px;padding:6px 9px}

  /* billing table */
  .tbl{width:100%;border-collapse:collapse}.tbl th{font-family:var(--font-m);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:#9aa6ae;text-align:left;padding:12px 14px;border-bottom:1px solid var(--line)}
  .tbl td{padding:15px 14px;border-bottom:1px solid var(--line2);font-size:14px}.tbl tr:last-child td{border-bottom:none}
  .tbl .num{font-family:var(--font-m);font-weight:600}.tbl .amt{font-weight:600}.tbl .age{font-size:12px;color:var(--amber);font-weight:600}
  .empty{text-align:center;color:var(--slate);padding:46px 20px;font-size:14px}

  /* documents */
  .drive-card{display:flex;align-items:center;gap:18px;padding:22px 24px;border-radius:var(--r);background:linear-gradient(120deg,var(--ink),#132635);color:#fff;box-shadow:var(--sh)}
  .drive-card .g{width:48px;height:48px;flex:0 0 48px;border-radius:12px;background:rgba(255,255,255,.1);display:flex;align-items:center;justify-content:center}.drive-card .g svg{width:26px;height:26px}
  .drive-card h3{font-family:var(--font-d);font-weight:600;font-size:17px}.drive-card p{color:rgba(255,255,255,.72);font-size:13px;margin-top:2px}.drive-card .btn{margin-left:auto;background:#fff;color:var(--ink)}.drive-card .btn:hover{background:var(--copper1)}
  .doc-row{display:flex;align-items:center;gap:15px;padding:15px 6px;border-bottom:1px solid var(--line2)}.doc-row:last-child{border-bottom:none}
  .doc-ic{width:42px;height:42px;flex:0 0 42px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-family:var(--font-m);font-size:10px;font-weight:600}.doc-ic.pdf{background:#fdecea;color:#c0392b}.doc-ic.doc{background:#eaf0f8;color:#2a5db0}
  .doc-row .dn b{font-size:14px;font-weight:600;display:block}.doc-row .dn small{color:var(--slate);font-size:12.5px}
  .doc-dl{margin-left:auto;display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:600;color:var(--copper6);padding:8px 13px;border-radius:9px;border:1px solid var(--line)}.doc-dl:hover{background:var(--copper1);border-color:var(--copper1)}.doc-dl svg{width:15px;height:15px;stroke-width:2}

  /* modal */
  .overlay{position:fixed;inset:0;background:rgba(14,28,40,.42);backdrop-filter:blur(3px);display:none;align-items:center;justify-content:center;z-index:100;padding:24px}.overlay.on{display:flex;animation:fade .2s}
  .modal{background:#fff;border-radius:20px;box-shadow:var(--sh-lg);width:100%;max-width:560px;max-height:90vh;overflow:auto;animation:pop .3s cubic-bezier(.22,1,.36,1)}
  .modal-h{padding:22px 26px;border-bottom:1px solid var(--line2);display:flex;align-items:center}.modal-h h3{font-family:var(--font-d);font-weight:600;font-size:18px}.modal-h .x{margin-left:auto;color:#9aa6ae;width:32px;height:32px;border-radius:9px;display:flex;align-items:center;justify-content:center}.modal-h .x:hover{background:var(--paper);color:var(--ink)}
  .modal-b{padding:24px 26px}.modal-f{display:flex;gap:10px;justify-content:flex-end;padding:18px 26px;border-top:1px solid var(--line2);background:var(--paper)}
  .drop{border:1.5px dashed #cfd6da;border-radius:11px;padding:18px;text-align:center;color:var(--slate);font-size:13px;cursor:pointer}.drop:hover{border-color:var(--copper4);background:#fffdfb}.drop svg{width:22px;height:22px;color:var(--copper);margin-bottom:6px;stroke-width:1.6}.drop b{color:var(--copper6)}
  .nudge{display:flex;gap:10px;align-items:flex-start;background:var(--copper1);border-radius:10px;padding:12px 14px;font-size:12.5px;color:var(--copper6);margin-bottom:18px}.nudge svg{width:16px;height:16px;flex:0 0 16px;margin-top:1px}
  .grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px}

  /* toasts (live in-portal notifications) */
  .toasts{position:fixed;top:16px;right:16px;z-index:300;display:flex;flex-direction:column;gap:10px;width:340px;max-width:calc(100vw - 32px)}
  .toast{display:flex;gap:12px;align-items:flex-start;background:#fff;border:1px solid var(--line);border-radius:13px;box-shadow:var(--sh-lg);padding:13px 15px;cursor:pointer;animation:toastin .32s cubic-bezier(.22,1,.36,1)}
  .toast .ti{width:32px;height:32px;flex:0 0 32px;border-radius:9px;background:var(--copper1);color:var(--copper6);display:flex;align-items:center;justify-content:center}.toast .ti svg{width:16px;height:16px;stroke-width:1.8}
  .toast .tb{min-width:0;flex:1}.toast b{font-size:13.5px;font-weight:600;display:block}.toast p{font-size:12.5px;color:var(--slate);margin-top:2px;line-height:1.4;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
  .toast .tx{color:#b7c0c6;flex:0 0 auto;width:18px;height:18px}.toast .tx:hover{color:var(--slate)}
  @keyframes toastin{from{opacity:0;transform:translateX(20px)}to{opacity:1;transform:none}}
  .toast.out{animation:toastout .3s forwards}@keyframes toastout{to{opacity:0;transform:translateX(20px)}}
  /* notification panel actions + browser-notification toggle */
  .noti-h .acts{display:flex;align-items:center;gap:14px}
  .bn-toggle{display:inline-flex;align-items:center;gap:6px;color:var(--slate);font-size:12px;font-weight:600}.bn-toggle:hover{color:var(--copper6)}.bn-toggle svg{width:15px;height:15px;stroke-width:1.8}.bn-toggle.on{color:var(--green)}
  /* email-created source tag */
  .src-tag{font-family:var(--font-m);font-size:10px;font-weight:600;letter-spacing:.02em;color:var(--blue);background:var(--blue-bg);padding:3px 8px;border-radius:6px;display:inline-flex;align-items:center;gap:5px}.src-tag svg{width:11px;height:11px;stroke-width:2}
  /* awaiting-decision quote card */
  .quote-row{display:flex;align-items:center;gap:20px;flex-wrap:wrap}.quote-row .qr-amt{margin-left:auto;text-align:right}
  .qr-amt .big{font-family:var(--font-d);font-weight:600;font-size:20px}.qr-amt small{color:#9aa6ae;font-size:12px}
  .notify-row{display:flex;align-items:center;gap:8px;margin-top:4px}
  .tk.arch{opacity:.72}.tk.arch .tk-ref{background:var(--paper);color:var(--slate)}
  .arch-tag{font-family:var(--font-m);font-size:10px;font-weight:600;letter-spacing:.04em;color:var(--slate);background:var(--paper);padding:3px 8px;border-radius:6px;border:1px solid var(--line)}
  .arch-toggle{font-size:12.5px;font-weight:600;color:var(--slate);padding:8px 13px;border-radius:9px;border:1px solid var(--line);background:#fff;margin-left:auto}.arch-toggle:hover{background:var(--paper);color:var(--ink)}
  .arch-toggle+.btn{margin-left:12px}

  @media(max-width:1000px){.g-2,.g-3{grid-template-columns:1fr}.sidebar{display:none}}
  @media(max-width:640px){.content,.topbar{padding-left:20px;padding-right:20px}.stepper{overflow-x:auto}.noti-panel{right:12px}.toasts{top:12px;right:12px}}
  @media (prefers-reduced-motion: reduce){.step.current .node::after{animation:none}.login::before{animation:none}.toast{animation:none}.bell .dot{animation:none}}