:root{
    --paper:#f2f5f8; --card:#FFFFFF; --ink:#0f2a44; --ink2:#5b6b7c; --faint:#8494a4; --faint2:#a4b0bc;
    --hair:#E4E9EF; --line:#EDF1F5;
    --brand:#1467B3; --brand-dark:#0a3d6e; --sky:#8fd0ff; --gold:#ffd24d; --gold-ink:#4a3400;
    --emerald:#2fbf71; --emerald-d:#1f9d59; --emerald-tint:#e6f5ec;
    --coral:#D0402F; --coral-d:#A6332A; --coral-tint:#FAE9E6;
    --amber:#c77800; --amber-soft:#e0a24d; --amber-tint:#F5ECD8; --amber-d:#8A5C13; --red:#d22b2b;
    --sh:0 2px 8px rgba(15,42,68,.06), 0 4px 16px rgba(15,42,68,.05);
    --sh-lg:0 8px 40px rgba(15,42,68,.16);
    --safe-t:env(safe-area-inset-top); --safe-b:env(safe-area-inset-bottom);
    --serif:'Public Sans',-apple-system,system-ui,sans-serif;
    --num:'Public Sans',ui-monospace,"SF Mono",Menlo,monospace;
    --spring:cubic-bezier(.22,1,.36,1);
  }
  *{box-sizing:border-box;-webkit-tap-highlight-color:transparent;margin:0;padding:0}
  button,input,select,textarea{font-family:inherit}
  html,body{height:100%}
  body{font-family:'Public Sans',-apple-system,system-ui,"Segoe UI",Roboto,sans-serif;
    background:var(--paper);color:var(--ink);-webkit-font-smoothing:antialiased;overflow:hidden;font-size:15px;line-height:1.35}
  #app{height:100%;display:flex;flex-direction:column;overflow:hidden}

  .scroll{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:calc(var(--safe-t) + 20px) 18px calc(var(--safe-b) + 26px)}

  /* Editorial header + hero */
  .top{display:flex;justify-content:space-between;align-items:center;margin-bottom:2px}
  .brand{display:flex;align-items:center;gap:10px;font-size:19px;font-weight:800;letter-spacing:-.3px;color:var(--ink)}
  .brand-logo{height:32px;width:auto;display:block}
  .eyebrow{font-size:12px;letter-spacing:2px;text-transform:uppercase;color:var(--sky);font-weight:700}
  .who{width:38px;height:38px;border-radius:99px;background:var(--brand);color:#fff;display:grid;place-items:center;font-size:15px;font-weight:700;letter-spacing:.3px}
  .hero-card{background:linear-gradient(160deg,#0a3d6e 0%,#1467B3 70%,#1e7ed0 100%);border-radius:18px;box-shadow:var(--sh);padding:20px 22px 20px;margin-top:14px;position:relative;overflow:hidden}
  .hero-card::after{content:"";position:absolute;top:-70px;right:-70px;width:200px;height:200px;border-radius:50%;background:rgba(255,255,255,.07)}
  .hero{margin-top:8px;position:relative}
  .hero .val{font-family:var(--serif);font-size:46px;line-height:.95;letter-spacing:-1px;color:#fff;font-weight:800}
  .hero .val.multi{font-size:26px;line-height:1.1} /* multiple currencies shown as "₹X + $Y" */
  .hero .sub{margin-top:10px;font-size:14px;color:rgba(255,255,255,.8);display:flex;align-items:center;gap:10px;flex-wrap:wrap}
  .hero .sub b{color:#fff;font-weight:800}
  .pill-urgent{background:var(--gold);color:var(--gold-ink);font-size:12px;font-weight:700;padding:3px 10px;border-radius:99px}

  .review{margin-top:20px;width:100%;background:var(--ink);color:#fff;border:none;border-radius:16px;
    padding:16px 18px;font-size:16px;font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:space-between;
    box-shadow:var(--sh);transition:transform .12s var(--spring)}
  .review:active{transform:scale(.98)}
  .review .r-r{display:flex;align-items:center;gap:10px}
  .review .cnt{background:rgba(255,255,255,.16);border-radius:8px;padding:3px 9px;font-size:13px;font-family:var(--num);font-weight:600}
  .review .arw{font-size:19px}

  .search{display:flex;align-items:center;gap:9px;margin-top:14px;background:var(--card);border:1px solid var(--hair);
    border-radius:13px;padding:0 12px;box-shadow:var(--sh);transition:box-shadow .15s,border-color .15s}
  .search:focus-within{border-color:var(--brand);box-shadow:0 0 0 3px rgba(20,103,179,.12)}
  .search-ic{width:18px;height:18px;color:var(--faint);flex:none}
  .search:focus-within .search-ic{color:var(--brand)}
  .search input{flex:1;min-width:0;border:none;background:none;outline:none;font:inherit;font-size:14.5px;color:var(--ink);padding:13px 0}
  .search input::placeholder{color:var(--faint)}
  .search input::-webkit-search-cancel-button{-webkit-appearance:none}
  .search-clr{width:22px;height:22px;border-radius:99px;border:none;background:var(--hair);color:var(--ink2);
    place-items:center;font-size:11px;cursor:pointer;flex:none}

  .qhead{display:flex;justify-content:space-between;align-items:center;margin:22px 2px 10px}
  .qhead .l{font-size:11px;letter-spacing:1.2px;text-transform:uppercase;color:var(--faint);font-weight:700}
  .qhead .hint{font-size:11.5px;color:var(--faint)}
  .approve-all{display:inline-flex;align-items:center;gap:5px;background:var(--emerald);color:#fff;border:none;
    border-radius:99px;padding:7px 13px;font:inherit;font-size:12px;font-weight:800;cursor:pointer;
    box-shadow:0 3px 10px rgba(47,191,113,.32);letter-spacing:.2px}
  .approve-all:active{transform:scale(.97)}
  .approve-all .ic{font-size:11px}

  /* Swipe rows */
  .card{border-radius:15px;box-shadow:var(--sh);margin-bottom:8px;background:var(--card);animation:rise .22s ease both}
  .swipe{position:relative;overflow:hidden;border-radius:15px}
  .rev{position:absolute;inset:0;display:flex;align-items:center;font-weight:800;font-size:14px;letter-spacing:.2px;opacity:0;color:#fff;padding:0 20px}
  .rev-app{background:var(--emerald);justify-content:flex-start;border-radius:15px}
  .rev-rej{background:var(--coral);justify-content:flex-end;border-radius:15px}
  .rev.armed{filter:brightness(1.06)}
  .rev .ic{font-size:17px;margin:0 7px}
  .fg{position:relative;background:var(--card);border-radius:15px;touch-action:pan-y;z-index:1}
  .row{display:flex;align-items:center;gap:11px;padding:12px 13px 12px 15px}
  .dot{width:8px;height:8px;border-radius:99px;background:#c9d2db;flex:none}
  .card.urgent .dot{background:var(--red)} .card.soon .dot{background:var(--amber)}
  .mid{flex:1;min-width:0}
  .mid .sup{font-size:15px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:-.2px}
  .mid .meta{font-size:11.5px;color:var(--ink2);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .mid .meta .hot{color:var(--red);font-weight:700}
  .mid .meta .pname{display:inline-block;max-width:48%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:bottom;color:var(--ink2)}
  .amt{font-family:var(--num);font-weight:700;font-size:15px;letter-spacing:-.4px;text-align:right;flex:none;white-space:nowrap;font-variant-numeric:tabular-nums}
  .go{width:36px;height:36px;border-radius:99px;border:none;background:var(--emerald-tint);color:var(--emerald);
    display:grid;place-items:center;font-size:16px;font-weight:800;cursor:pointer;flex:none;transition:transform .1s}
  .go:active{transform:scale(.88)}
  .chev-w{width:14px;flex:none;text-align:center;color:#C7C9C4;font-size:11px;transition:transform .22s var(--spring)}
  .card.open .chev-w{transform:rotate(90deg)}

  .body{max-height:0;overflow:hidden;transition:max-height .34s var(--spring)}
  .card.open .body{max-height:2400px}
  .body-in{background:#e9edf2;padding:11px 12px 3px}

  /* ===== three-plate detail (deck + inline row share these) ===== */
  .plate{background:var(--card);border-radius:14px;box-shadow:0 1px 3px rgba(15,42,68,.05),0 5px 15px rgba(15,42,68,.05);margin-bottom:9px;overflow:hidden}
  .fpad{padding:0 15px}
  .phead{font-size:11px;letter-spacing:.9px;text-transform:uppercase;color:var(--faint);font-weight:800;padding:12px 15px 2px}
  .phead b{color:var(--ink)}
  /* fields plate */
  .plate .frow{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:8px 0;border-top:1px solid var(--line)}
  .plate .frow:first-child{border-top:none}
  .plate .frow .k{font-size:14px;color:var(--faint);font-weight:500}
  .plate .frow .v{font-size:14px;font-weight:800;color:var(--ink);text-align:right}
  /* items — tabular (inline row) */
  /* Items table scrolls sideways on narrow phones so the nowrap number columns
     (rate/total) can't be clipped by the plate — with a CSS-only right-edge
     shadow that shows only while there's more to reveal (Lea Verou technique). */
  .items-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;
    background:
      linear-gradient(90deg,rgba(255,255,255,0),var(--card) 75%) right center/26px 100% no-repeat,
      radial-gradient(farthest-side at right,rgba(15,42,68,.16),rgba(15,42,68,0)) right center/13px 100% no-repeat;
    background-attachment:local,scroll}
  table.items{width:100%;min-width:340px;border-collapse:collapse;font-size:12px}
  table.items th{font-size:9px;text-transform:uppercase;letter-spacing:.5px;color:var(--faint);font-weight:700;text-align:right;padding:6px 15px 5px}
  table.items th:first-child{text-align:left}
  table.items td{padding:8px 15px;border-top:1px solid var(--line);vertical-align:top}
  table.items .it{font-weight:600;line-height:1.22}
  table.items .cd{font-family:var(--num);font-size:10px;color:var(--faint);margin-top:1px}
  table.items td.n{text-align:right;font-family:var(--num);font-variant-numeric:tabular-nums;white-space:nowrap;color:#4A4E58}
  table.items td.tot{font-weight:700;color:var(--ink)}
  /* items — pills (deck) */
  .ditem{display:flex;justify-content:space-between;gap:14px;padding:12px 15px;border-top:1px solid var(--line)}
  .ditem .dl{min-width:0}
  .ditem .dn{font-size:14px;font-weight:700;line-height:1.28}
  .ditem .dc{font-family:var(--num);font-size:11px;color:var(--faint);margin-top:3px}
  .pills{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
  .pill{background:#f0f3f7;color:var(--ink2);font-size:11.5px;font-weight:600;padding:4px 10px;border-radius:99px;font-variant-numeric:tabular-nums}
  .ditem .da{font-family:var(--num);font-size:14px;font-weight:800;white-space:nowrap;font-variant-numeric:tabular-nums}
  /* taxes + navy grand-total bar (both item variants) */
  .taxrow{display:flex;justify-content:space-between;padding:11px 15px;border-top:1px solid var(--line);font-size:13px;color:var(--ink2)}
  .taxrow b{color:var(--ink);font-weight:700;font-family:var(--num);font-variant-numeric:tabular-nums}
  .gtbar{display:flex;justify-content:space-between;align-items:center;background:var(--ink);color:#fff;padding:13px 15px;font-size:15.5px;font-weight:800}
  .gtbar span:last-child{font-family:var(--num);font-variant-numeric:tabular-nums}
  .po-link{color:var(--brand);text-decoration:underline;text-underline-offset:2px}
  .po-link:active{opacity:.6}
  /* attachments plate */
  .afiles{padding:2px 0 6px}
  .afrow{display:flex;align-items:center;gap:11px;padding:10px 15px;text-decoration:none;color:var(--ink);
    border-top:1px solid var(--line)}
  .afrow:first-child{border-top:none}
  .afrow:active{background:var(--paper)}
  .afrow .aic{font-size:17px;line-height:1;flex:none}
  .afrow .afn{flex:1;min-width:0;font-size:14px;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .afrow .afs{font-size:11.5px;color:var(--faint);flex:none;font-variant-numeric:tabular-nums}
  /* comments plate */
  .plate .cmts{padding:0}
  .cmt-h{padding-bottom:8px}
  .cmt-h b{color:var(--ink)}
  .cmt{display:flex;gap:10px;padding:0 15px 13px}
  .cmts .av{width:38px;height:38px;border-radius:99px;background:var(--brand);color:#fff;display:grid;place-items:center;font-size:12.5px;font-weight:700;flex:none;letter-spacing:.3px}
  .cbody{min-width:0;flex:1}
  .chead{display:flex;align-items:baseline;gap:7px;flex-wrap:wrap}
  .cmt .cwho{font-size:13.5px;font-weight:800;color:var(--ink)}
  .cmt .when{font-size:11.5px;color:var(--faint);font-weight:500}
  .cmt .ctxt{font-size:13px;color:var(--ink2);margin-top:2px;overflow-wrap:anywhere}
  .ctxt .cmention{color:var(--brand);font-weight:600}
  .cmt-load,.cmt-empty{font-size:12.5px;color:var(--faint);padding:2px 15px 12px}
  .compose{display:flex;gap:9px;align-items:center;padding:6px 15px 14px}
  .compose .cmt-in{flex:1;min-width:0;border:none;background:#eef1f5;border-radius:99px;padding:12px 16px;font:inherit;font-size:13.5px;color:var(--ink);outline:none}
  .compose .cmt-in:focus{box-shadow:0 0 0 2px rgba(20,103,179,.25)}
  .compose .cmt-in::placeholder{color:var(--faint)}
  .compose .cmt-post{width:44px;height:44px;border-radius:99px;background:var(--brand);border:none;display:grid;place-items:center;flex:none;box-shadow:0 5px 14px rgba(20,103,179,.32);cursor:pointer;padding:0}
  .compose .cmt-post svg{width:19px;height:19px;transform:translateX(-1px)}
  .compose .cmt-post:disabled{opacity:.5}
  .compose{position:relative}
  /* fixed (not absolute): the menu is portaled to <body> so it escapes .plate{overflow:hidden}
     and the deck's transform'd .dcard, which would otherwise clip it invisible. Position is set
     inline (left/width/bottom) from the input's getBoundingClientRect() in app.js. */
  .mention-menu{position:fixed;background:var(--card);
    border:1px solid var(--line);border-radius:12px;box-shadow:0 6px 22px rgba(15,42,68,.16);
    z-index:60;max-height:180px;overflow-y:auto}
  .mention-menu[hidden]{display:none}
  .mention-item{display:flex;justify-content:space-between;gap:10px;align-items:center;padding:9px 12px;cursor:pointer}
  .mention-item .mi-name{font-weight:600;font-size:14px;color:var(--ink)}
  .mention-item .mi-em{font-size:11px;color:var(--faint);font-family:var(--num)}
  .mention-item.sel,.mention-item:hover{background:#eef4fb}
  /* reject line (inline row) — on the grey body */
  .reject-line{padding:2px 3px 12px}
  .reject-line button{width:100%;background:var(--card);border:1.5px solid var(--coral-tint);color:var(--coral);
    border-radius:12px;padding:12px;font-weight:700;font-size:14px;cursor:pointer}
  .reject-line button:active{background:var(--coral-tint)}

  /* activity timeline (collapsible .plate, below comments — the plate class
     supplies the white card + the 9px margin that keeps Reject clear) */
  .act .act-hd{display:flex;align-items:center;gap:8px;padding:14px 15px;cursor:pointer;user-select:none}
  .act .act-hd .ttl{font-size:11px;letter-spacing:.9px;text-transform:uppercase;color:var(--faint);font-weight:800}
  .act .act-hd .acnt b{color:var(--ink)}
  .act .act-hd .sp{flex:1}
  .act .act-hd .peek{font-size:12px;color:var(--faint)}
  .act.open .act-hd .peek{display:none}
  .act .act-hd .chev{color:var(--faint);font-size:19px;font-weight:700;transition:transform .28s var(--spring);line-height:1}
  .act.open .act-hd .chev{transform:rotate(90deg)}
  .act-body{max-height:0;overflow:hidden;transition:max-height .4s var(--spring)}
  .act.open .act-body{max-height:760px;overflow-y:auto}
  .timeline{padding:0 16px 14px}
  .ev{display:grid;grid-template-columns:26px 1fr;gap:11px;position:relative;padding:8px 0}
  .ev::before{content:"";position:absolute;left:12px;top:0;bottom:0;width:2px;background:var(--hair)}
  .ev:first-child::before{top:16px} .ev:last-child::before{bottom:calc(100% - 16px)}
  .ev .mk{position:relative;z-index:1;width:26px;height:26px;border-radius:99px;display:grid;place-items:center;
    background:var(--card);border:2px solid var(--line);font-size:12px;line-height:1}
  .ev.k-created .mk{border-color:var(--brand);color:var(--brand)}
  .ev.k-workflow .mk{border-color:var(--emerald);color:var(--emerald)}
  .ev.k-reject .mk{border-color:var(--coral);color:var(--coral)}
  .ev.k-edit .mk{border-color:var(--amber);color:var(--amber)}
  .ev .eb{min-width:0;padding-top:1px}
  .ev .etop{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
  .ev .awho{font-weight:700;font-size:14px}
  .ev .when{font-size:11.5px;color:var(--faint);font-variant-numeric:tabular-nums}
  .ev .what{font-size:13px;color:var(--ink2);margin-top:1px}
  .ev .diff{font-family:var(--num);font-size:12px;background:var(--paper);border:1px solid var(--line);
    border-radius:7px;padding:2px 7px;display:inline-block;margin-top:3px}
  .ev .diff .old{color:var(--faint);text-decoration:line-through}
  .ev .diff .arw{color:var(--faint);margin:0 5px}
  .ev .diff .new{color:var(--ink);font-weight:700}
  .lnk{background:none;border:none;color:var(--brand);font:inherit;font-weight:700;cursor:pointer;padding:0}

  .empty{text-align:center;padding:60px 30px;color:var(--ink2)}
  .empty .big{font-family:var(--serif);font-size:40px;color:var(--ink)}
  .empty p{font-size:14px;margin-top:6px}
  .empty button{margin-top:18px;background:var(--ink);color:#fff;border:none;border-radius:12px;padding:11px 20px;font-weight:700;cursor:pointer}

  /* Review deck */
  .deck{position:fixed;inset:0;background:#e9edf2;z-index:40;display:none;flex-direction:column;
    padding-top:var(--safe-t)}
  .deck.show{display:flex}
  .deck-top{display:flex;align-items:center;justify-content:space-between;padding:14px 18px 6px}
  .deck-top .x{width:34px;height:34px;border-radius:99px;border:none;background:rgba(0,0,0,.05);font-size:17px;color:var(--ink);cursor:pointer}
  .deck-top .prog{font-size:12px;letter-spacing:1px;text-transform:uppercase;color:var(--faint);font-weight:700}
  .stage{flex:1;position:relative;margin:6px 16px 0}
  .dcard{position:absolute;inset:0;background:#e9edf2;
    display:flex;flex-direction:column;overflow:hidden;will-change:transform;transform-origin:center bottom}
  .dcard .dhint{position:absolute;top:22px;font-size:13px;font-weight:800;letter-spacing:1.5px;text-transform:uppercase;
    padding:7px 12px;border-radius:9px;opacity:0;border:2px solid;transition:opacity .1s;z-index:3;background:rgba(233,237,242,.85)}
  .dhint.app{left:22px;color:var(--emerald);border-color:var(--emerald);transform:rotate(-9deg)}
  .dhint.rej{right:22px;color:var(--coral);border-color:var(--coral);transform:rotate(9deg)}
  .dcard-in{flex:1;overflow-y:auto;padding:8px 6px 14px}
  .dhead{padding:6px 8px 12px}
  .dcard .dsup{font-size:19px;letter-spacing:-.3px;color:var(--ink);font-weight:800}
  .dcard .dpo{font-size:12.5px;color:var(--ink2);font-weight:500;margin-top:2px}
  .dcard .dval{font-family:var(--serif);font-size:36px;line-height:.95;letter-spacing:-1px;margin:10px 0 3px}
  .dcard .dneed{font-size:12.5px;color:var(--ink2)} .dcard .dneed .hot{color:var(--red);font-weight:700}
  .deck-acts{display:flex;gap:14px;padding:14px 20px calc(var(--safe-b) + 18px);justify-content:center}
  .dbtn{width:64px;height:64px;border-radius:99px;border:none;cursor:pointer;font-size:26px;box-shadow:var(--sh);
    display:grid;place-items:center;transition:transform .12s var(--spring)}
  .dbtn:active{transform:scale(.9)}
  .dbtn.rej{background:#fff;color:var(--coral)} .dbtn.app{background:var(--emerald);color:#fff}
  .dbtn.big{width:72px;height:72px;font-size:30px}
  .deck-done{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:40px}
  .deck-done .big{font-family:var(--serif);font-size:46px;color:var(--ink)}
  .deck-done p{color:var(--ink2);margin-top:8px}
  .deck-done button{margin-top:22px;background:var(--ink);color:#fff;border:none;border-radius:13px;padding:13px 26px;font-weight:700;font-size:15px;cursor:pointer}

  .toast{position:fixed;left:50%;bottom:calc(var(--safe-b) + 22px);transform:translateX(-50%) translateY(14px);
    background:var(--ink);color:#fff;padding:11px 14px 11px 16px;border-radius:13px;font-weight:600;font-size:13.5px;
    box-shadow:var(--sh-lg);opacity:0;pointer-events:none;transition:.24s;z-index:100;display:flex;align-items:center;gap:14px;max-width:90%}
  .toast.show{opacity:1;transform:translateX(-50%) translateY(0);pointer-events:auto}
  .toast.ok{background:var(--emerald-d)} .toast.bad{background:var(--coral-d)}
  .toast .undo{font-weight:800;cursor:pointer;text-decoration:underline;white-space:nowrap}

  @keyframes rise{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}
  @media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ---- live-app additions: loading / error / pull-to-refresh ---- */
.skel{background:linear-gradient(90deg,#ECEDEF 25%,#F6F7F8 50%,#ECEDEF 75%);background-size:200% 100%;animation:shimmer 1.2s linear infinite;border-radius:9px}
@keyframes shimmer{from{background-position:200% 0}to{background-position:-200% 0}}
.skel-hero{height:52px;width:62%;margin-top:6px}
.skel-sub{height:14px;width:42%;margin-top:14px}
.skel-row{height:58px;border-radius:15px;margin-bottom:8px;box-shadow:var(--sh)}
.mini-load{padding:14px 15px;font-size:12px;color:var(--faint)}
.err{text-align:center;padding:48px 26px;color:var(--ink2)}
.err .big{font-family:var(--serif);font-size:34px;color:var(--ink)}
.err p{font-size:13.5px;margin-top:8px}
.err .err-detail{font-size:12px;color:var(--faint);margin-top:6px;font-family:var(--num);overflow-wrap:anywhere}
.err button{margin-top:16px;background:var(--ink);color:#fff;border:none;border-radius:12px;padding:11px 20px;font-weight:700;cursor:pointer}
.ptr{height:0;overflow:hidden;text-align:center;color:var(--faint);font-size:12px;line-height:34px;transition:height .18s}

/* ---- account sheet (secure sign-out) ---- */
.sheet-scrim{position:fixed;inset:0;background:rgba(20,22,30,.32);opacity:0;pointer-events:none;transition:opacity .2s;z-index:90}
.sheet-scrim.show{opacity:1;pointer-events:auto}
.sheet{position:fixed;left:0;right:0;bottom:0;z-index:91;background:var(--card);
  border-radius:22px 22px 0 0;box-shadow:var(--sh-lg);
  padding:22px 20px calc(var(--safe-b) + 22px);
  transform:translateY(110%);transition:transform .28s var(--spring)}
.sheet.show{transform:translateY(0)}
.acct-id{display:flex;align-items:center;gap:12px;margin-bottom:18px}
.acct-avatar{width:40px;height:40px;border-radius:99px;background:var(--ink);color:#fff;
  display:grid;place-items:center;font-size:14px;font-weight:700;letter-spacing:.3px;flex:none}
.acct-email{font-size:14px;color:var(--ink2);word-break:break-all}
/* neutral, per §6.1 — sign-out must not reuse coral/green/amber */
.acct-signout{width:100%;background:none;border:1.5px solid var(--hair);color:var(--ink);
  border-radius:13px;padding:14px;font-size:15px;font-weight:700;cursor:pointer}
.acct-signout:active{background:var(--line)}

/* ---- reject-reason sheet ---- */
.reason-po{font-family:var(--num);font-size:12px;color:var(--faint);margin-bottom:12px}
.reason-chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px}
.chip{background:none;border:1.5px solid var(--hair);color:var(--ink2);border-radius:99px;
  padding:7px 13px;font-size:13px;font-weight:600;cursor:pointer}
.chip.sel{border-color:var(--ink);color:var(--ink);background:var(--line)}
.reason-text{width:100%;border:1.5px solid var(--hair);border-radius:12px;padding:11px 13px;
  font-size:15px;font-family:inherit;color:var(--ink);resize:none;background:var(--paper)}
.reason-text:focus{outline:none;border-color:var(--ink2)}
.reason-count{text-align:right;font-size:11px;color:var(--faint);margin:6px 2px 14px}
/* coral = reject (§6.1): this button commits a rejection */
/* ---- approve-all sheet ---- */
.aa-sheet{padding:8px 0 calc(var(--safe-b) + 14px);display:flex;flex-direction:column;max-height:88vh}
.aa-grab{width:38px;height:4px;border-radius:99px;background:#cfd6de;margin:2px auto 10px}
.aa-title{font-size:19px;font-weight:800;letter-spacing:-.3px;padding:0 20px;color:var(--ink)}
.aa-sub{font-size:13.5px;color:var(--ink2);padding:4px 20px 0}
.aa-sub b{color:var(--ink);font-weight:800}
.aa-warn{display:flex;gap:8px;align-items:flex-start;margin:12px 20px 4px;background:#fff6e6;border:1px solid #f3e2b8;border-radius:11px;padding:10px 12px;font-size:12.5px;color:#7a5a00}
.aa-list{overflow-y:auto;padding:4px 12px;flex:1;min-height:56px}
.aa-row{display:flex;align-items:center;gap:12px;padding:11px 8px;border-bottom:1px solid var(--line);cursor:pointer;user-select:none}
.aa-row:last-child{border-bottom:none}
.aa-row input{position:absolute;opacity:0;pointer-events:none}
.aa-box{width:22px;height:22px;border-radius:6px;border:2px solid #c6cfd8;flex:none;display:grid;place-items:center;color:#fff;font-size:12px;font-weight:800;transition:.12s}
.aa-row input:checked+.aa-box{background:var(--emerald);border-color:var(--emerald)}
.aa-box .tick{opacity:0}
.aa-row input:checked+.aa-box .tick{opacity:1}
.aa-mid{flex:1;min-width:0;display:flex;flex-direction:column}
.aa-sup{font-size:14px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.aa-proj{font-size:12px;color:var(--faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.aa-amt{font-size:14px;font-weight:800;white-space:nowrap;font-variant-numeric:tabular-nums}
.aa-row.off{opacity:.42}
.aa-row.off .aa-amt{text-decoration:line-through}
.aa-acts{display:flex;gap:11px;padding:12px 20px 0}
.aa-cancel{flex:0 0 33%;background:#fff;border:1.5px solid var(--hair);color:var(--ink2);border-radius:14px;padding:15px 8px;font:inherit;font-size:15px;font-weight:800;cursor:pointer}
.aa-go{flex:1;background:var(--emerald);border:none;color:#fff;border-radius:14px;padding:15px 8px;font:inherit;font-size:15px;font-weight:800;cursor:pointer;box-shadow:0 8px 20px rgba(47,191,113,.4)}
.aa-go:disabled{background:#b9e6cc;box-shadow:none;cursor:default}

.reason-submit{width:100%;background:var(--coral);color:#fff;border:none;border-radius:13px;
  padding:14px;font-size:15px;font-weight:700;cursor:pointer}
.reason-submit:active{transform:scale(.98)}

/* ---- decision history ---- */
.acct-history{width:100%;background:none;border:1.5px solid var(--hair);color:var(--ink);
  border-radius:13px;padding:14px;font-size:15px;font-weight:700;cursor:pointer;margin-bottom:10px}
.acct-history:active{background:var(--line)}
.hist{position:fixed;inset:0;background:var(--paper);z-index:45;display:none;flex-direction:column;padding-top:var(--safe-t)}
.hist.show{display:flex}
.hist-list{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:6px 18px calc(var(--safe-b) + 26px)}
.hrow{display:flex;align-items:center;gap:11px;padding:13px 2px;border-bottom:1px solid var(--line);cursor:pointer}
.hrow:active{background:rgba(15,42,68,.03)}
.hrow .hchev{flex:none;align-self:center;color:var(--faint2);font-size:20px;font-weight:700;margin-left:2px}
.hrow.failed{opacity:.72}
.hrow .hwhy{font-size:11.5px;line-height:1.35;color:var(--coral);font-weight:600;margin-top:3px;white-space:normal;overflow-wrap:anywhere}
.hrow .hmid{flex:1;min-width:0}
.hrow .hsup{font-size:15px;font-weight:700;letter-spacing:-.2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hrow .hmeta{font-size:11.5px;color:var(--ink2);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hrow .hmeta .po{font-family:var(--num);color:var(--faint)}
.hrow .dec-app{color:var(--emerald);font-weight:700}
.hrow .dec-rej{color:var(--coral);font-weight:700}
.hrow .hfail{color:var(--faint);font-weight:700}
.hrow .hamt{font-family:var(--num);font-weight:700;font-size:15px;letter-spacing:-.4px;text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
/* read-only History detail — a second .hist overlay stacked above History */
#hist-detail{z-index:46;background:#e9edf2}
#hist-detail #hd-body{padding-top:10px}
.hd-status{display:flex;align-items:center;gap:7px;flex-wrap:wrap;font-size:12.5px;color:var(--ink2);padding:2px 4px 12px;overflow-wrap:anywhere}
.hd-status .hd-dec{font-weight:800}
.hd-status .hd-dec.ok{color:var(--emerald)}
.hd-status .hd-dec.rej,.hd-status .hd-dec.fail{color:var(--coral)}
.hist-empty{text-align:center;padding:60px 30px;color:var(--ink2)}
.hist-empty .big{font-family:var(--serif);font-size:34px;color:var(--ink)}
.hist-empty p{font-size:14px;margin-top:6px}

/* ---- notifications toggle ---- */
.acct-notify{width:100%;background:none;border:1.5px solid var(--hair);color:var(--ink);
  border-radius:13px;padding:14px;font-size:15px;font-weight:700;cursor:pointer;margin-bottom:10px}
.acct-notify:active{background:var(--line)}

/* ---- brand refresh: display text is Public Sans 800 (serif retired) ---- */
.hero .val,.dcard .dval,.empty .big,.deck-done .big,.hist-empty .big,.err .big{
  font-family:var(--serif);font-weight:800;letter-spacing:-1px;
}

/* ---- pre-login landing ---- */
.landing{position:fixed;inset:0;z-index:60;display:none;flex-direction:column;
  background:linear-gradient(165deg,#0a3d6e 0%,#1467B3 65%,#1e7ed0 100%);overflow:hidden;padding-top:var(--safe-t)}
.landing.show{display:flex}
.landing-orb{position:absolute;border-radius:50%;background:rgba(255,255,255,.06)}
.landing-orb1{top:-90px;right:-110px;width:340px;height:340px}
.landing-orb2{top:60px;right:-170px;width:340px;height:340px;background:rgba(255,255,255,.05)}
.landing-body{position:relative;flex:1;display:flex;flex-direction:column;justify-content:center;padding:0 30px;gap:28px}
.landing-brand{display:flex;align-items:center;gap:14px}
.landing-logo{height:52px;width:auto;display:block}
.landing-word{font-size:18px;font-weight:700;color:var(--sky);letter-spacing:3px;text-transform:uppercase}
.landing-h1{font-size:42px;font-weight:800;color:#fff;letter-spacing:-1.5px;line-height:1.08}
.landing-h1 .hl{color:var(--sky)}
.landing-h2{font-size:20px;font-weight:700;color:var(--gold);margin-top:10px;letter-spacing:.5px}
.landing-bullets{display:flex;flex-direction:column;gap:12px}
.lb{display:flex;align-items:center;gap:12px;font-size:15px;color:rgba(255,255,255,.85)}
.ldot{width:6px;height:6px;border-radius:50%;background:var(--sky);flex:none}
.landing-foot{position:relative;padding:0 30px calc(var(--safe-b) + 40px);display:flex;flex-direction:column;gap:14px}
.landing-btn{background:#fff;border:none;border-radius:12px;padding:16px;text-align:center;
  box-shadow:0 8px 20px rgba(5,30,55,.3);color:var(--brand);font-size:16px;font-weight:700;cursor:pointer}
.landing-btn:active{transform:scale(.99)}
.landing-ssl{text-align:center;font-size:13px;color:rgba(255,255,255,.65)}

  /* "Update available" pill — only shown when a new build is deployed and the
     app has stayed busy (mid-decision / half-typed comment) too long to reload
     silently. Tapping it reloads; see applyUpdate() in app.js. */
  .upd{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(var(--safe-b) + 18px);
    z-index:80;background:var(--ink);color:#fff;border:none;border-radius:99px;padding:11px 18px;
    font:inherit;font-size:13.5px;font-weight:700;cursor:pointer;box-shadow:var(--sh-lg);
    animation:rise .22s ease both}
  .upd:active{transform:translateX(-50%) scale(.97)}