/* FOAN client portal: same navy and gold HUD look as the website. */
:root{ --bg:#070f1d; --card:rgba(13,29,53,.86); --ok:#3ddc97; --bad:#ff6b6b; --tab-h:64px; }
*{ box-sizing:border-box; }
html,body{ margin:0; background:var(--bg); color:#fff; font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif; -webkit-font-smoothing:antialiased; -webkit-tap-highlight-color:transparent; }
body{ min-height:100dvh; overflow-x:hidden; }
a{ color:var(--gold-light); } button{ font:inherit; cursor:pointer; }
[hidden]{ display:none !important; }
.ic{ width:18px; height:18px; flex:none; vertical-align:-3px; }
.spin{ animation:spin 1s linear infinite; } @keyframes spin{ to{ transform:rotate(360deg); } }
.muted{ color:var(--mute); font-size:.92rem; line-height:1.55; } .small{ font-size:.8rem; }

/* ---------- splash + auth ---------- */
#splash{ position:fixed; inset:0; display:grid; place-items:center; background:var(--bg); z-index:80; }
.auth-wrap{ position:relative; isolation:isolate; min-height:100dvh; display:grid; place-items:center; padding:1.5rem 1rem 3rem; overflow:hidden; }
.auth-wrap .hud-grid{ z-index:-1; }
.auth-card{ width:100%; max-width:430px; border:1px solid var(--line-strong); border-radius:24px; padding:2rem 1.5rem 1.6rem; background:linear-gradient(160deg,rgba(18,40,74,.9),rgba(10,22,40,.95)); box-shadow:0 30px 80px rgba(0,0,0,.5), 0 0 60px rgba(212,175,55,.12); }
.auth-card .logo-core{ display:flex; justify-content:center; margin:.4rem 0 1.6rem; }
.auth-card h1{ font-family:var(--serif); font-size:2rem; line-height:1.1; text-align:center; margin:0 0 .4rem; }
.auth-card .sub{ text-align:center; color:var(--mute); margin:0 0 1.2rem; font-size:.95rem; }
label{ display:block; margin-bottom:.9rem; font-size:.8rem; font-weight:600; letter-spacing:.03em; color:#cbd3e4; }
label small{ font-weight:400; color:var(--mute); }
input,select,textarea{ display:block; width:100%; margin-top:.35rem; padding:.85rem 1rem; border-radius:12px; border:1px solid rgba(212,175,55,.28); background:rgba(7,15,29,.8); color:#fff; font:inherit; font-size:1rem; }
input:disabled{ opacity:.6; }
input:focus,select:focus,textarea:focus{ outline:none; border-color:var(--gold); box-shadow:0 0 0 3px rgba(212,175,55,.2); }
select option,select optgroup{ background:#0d1d35; color:#fff; }
.pw{ position:relative; display:block; } .pw input{ padding-right:3rem; } .pw-t{ position:absolute; right:.35rem; top:50%; transform:translateY(-35%); background:none; border:0; color:var(--mute); padding:.55rem; }
.wide{ width:100%; justify-content:center; margin-top:.4rem; } button.btn-gold,button.btn-ghost{ border:0; } button.btn-ghost{ border:1.5px solid var(--line-strong); background:transparent; }
.btn-gold[disabled],.btn-ghost[disabled]{ opacity:.6; pointer-events:none; } .busy{ opacity:.7; }
.gbtn .g{ width:18px; height:18px; }
.or{ display:flex; align-items:center; gap:.8rem; color:var(--mute); font-size:.8rem; margin:1rem 0 .6rem; } .or::before,.or::after{ content:""; flex:1; height:1px; background:var(--line); }
.links{ display:flex; justify-content:space-between; gap:1rem; margin-top:1rem; font-size:.88rem; } .links a{ text-decoration:none; }
.legal{ margin:1.2rem 0 0; font-size:.74rem; color:var(--mute); text-align:center; line-height:1.5; } .back{ text-align:center; margin:.8rem 0 0; font-size:.84rem; } .back a{ text-decoration:none; color:var(--mute); }
.note{ display:flex; gap:.6rem; align-items:flex-start; padding:.75rem .9rem; border-radius:12px; font-size:.88rem; margin-bottom:1rem; line-height:1.45; }
.note.err{ background:rgba(255,107,107,.12); border:1px solid rgba(255,107,107,.4); color:#ffc2c2; } .note.ok{ background:rgba(61,220,151,.1); border:1px solid rgba(61,220,151,.4); color:#b6f3d8; }

/* ---------- app frame ---------- */
#app{ display:grid; grid-template-columns:1fr; min-height:100dvh; }
.rail{ display:none; }
.main{ min-width:0; padding:0 1rem calc(var(--tab-h) + 2rem + env(safe-area-inset-bottom)); max-width:980px; width:100%; margin:0 auto; }
.topbar{ position:sticky; top:0; z-index:30; display:flex; align-items:center; gap:.7rem; padding:calc(.8rem + env(safe-area-inset-top)) 0 .8rem; background:linear-gradient(var(--bg) 70%, transparent); }
.tb-title{ flex:1; font-family:var(--serif); font-size:1.5rem; font-weight:700; }
.tb-bell{ position:relative; width:40px; height:40px; display:grid; place-items:center; border-radius:50%; border:1px solid var(--line); color:var(--gold-light); } .tb-bell .badge{ position:absolute; top:-4px; right:-4px; }
.avatar{ width:40px; height:40px; display:grid; place-items:center; border-radius:50%; background:linear-gradient(135deg,var(--gold),var(--gold-dark)); color:var(--navy); font-weight:700; text-decoration:none; font-size:.9rem; }
.badge{ display:inline-grid; place-items:center; min-width:18px; height:18px; padding:0 5px; border-radius:99px; background:var(--gold); color:var(--navy); font-size:.68rem; font-weight:800; font-style:normal; } .badge.s{ margin-left:.3rem; }
.tabbar{ position:fixed; left:0; right:0; bottom:0; z-index:40; display:flex; padding-bottom:env(safe-area-inset-bottom); background:rgba(10,22,40,.96); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); border-top:1px solid var(--line); }
.tabbar a{ position:relative; flex:1; height:var(--tab-h); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; color:var(--mute); text-decoration:none; font-size:.68rem; font-weight:600; }
.tabbar a .ic{ width:22px; height:22px; } .tabbar a.on{ color:var(--gold-light); } .tabbar a.on::before{ content:""; position:absolute; top:0; width:34px; height:3px; border-radius:0 0 4px 4px; background:var(--gold); box-shadow:0 0 12px var(--gold); }
.tabbar .badge{ position:absolute; top:8px; left:calc(50% + 6px); }
@media (min-width:900px){
  #app{ grid-template-columns:250px 1fr; } .tabbar{ display:none; } .main{ padding-bottom:3rem; padding-left:2rem; padding-right:2rem; }
  .rail{ display:flex; flex-direction:column; position:sticky; top:0; height:100dvh; padding:1.4rem 1rem; border-right:1px solid var(--line); background:rgba(10,22,40,.6); }
  .rail-brand{ display:flex; align-items:center; gap:.7rem; text-decoration:none; color:#fff; margin-bottom:1.6rem; } .rail-brand img{ border-radius:10px; border:2px solid rgba(212,175,55,.45); }
  .rail-brand b{ display:block; font-family:var(--serif); font-size:1.4rem; letter-spacing:.1em; line-height:1; } .rail-brand small{ font-family:var(--mono); font-size:.58rem; letter-spacing:.2em; color:var(--gold); text-transform:uppercase; }
  .rail nav{ display:flex; flex-direction:column; gap:.2rem; }
  .rail a,.rail button{ display:flex; align-items:center; gap:.7rem; padding:.7rem .85rem; border-radius:12px; color:#cbd3e4; text-decoration:none; font-size:.92rem; font-weight:500; background:none; border:0; width:100%; text-align:left; position:relative; }
  .rail a:hover,.rail button:hover{ background:rgba(212,175,55,.08); color:#fff; } .rail nav a.on{ background:rgba(212,175,55,.14); color:var(--gold-light); box-shadow:inset 3px 0 0 var(--gold); }
  .rail .badge{ margin-left:auto; } .rail-foot{ margin-top:auto; display:flex; flex-direction:column; gap:.1rem; border-top:1px solid var(--line); padding-top:.8rem; }
}
.view-in{ animation:viewIn .35s ease both; } @keyframes viewIn{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:none; } }

/* ---------- cards ---------- */
.glow-card{ position:relative; overflow:hidden; } .glow-card::after{ content:""; position:absolute; inset:0; pointer-events:none; opacity:0; transition:opacity .3s; background:radial-gradient(260px circle at var(--mx,50%) var(--my,50%), rgba(232,201,110,.14), transparent 70%); } .glow-card:hover::after{ opacity:1; }
.card{ position:relative; border:1px solid var(--line); border-radius:20px; background:var(--card); padding:1.25rem; margin-bottom:1rem; }
.card h2{ font-family:var(--serif); font-size:1.35rem; margin:0 0 .9rem; display:flex; align-items:center; gap:.5rem; } .card h2 .ic{ color:var(--gold); }
.hero-card{ position:relative; isolation:isolate; border:1px solid var(--line-strong); border-radius:24px; padding:1.5rem 1.3rem; margin-bottom:1.1rem; background:linear-gradient(140deg,#14305a,#0a1628 70%); } .hero-card .hud-grid{ z-index:-1; }
.eyebrow-s{ font-family:var(--mono); font-size:.7rem; letter-spacing:.18em; text-transform:uppercase; color:var(--gold-light); margin:0 0 .3rem; }
.hero-card h1{ font-family:var(--serif); font-size:2.3rem; line-height:1.05; margin:0; } .hero-card .sub{ color:#cbd3e4; margin:.5rem 0 0; }
.tiles{ display:grid; grid-template-columns:1fr 1fr; gap:.7rem; margin-top:1.2rem; } .tile{ display:block; text-decoration:none; color:#fff; padding:.9rem 1rem; border-radius:14px; border:1px solid var(--line); background:rgba(7,15,29,.55); }
.tile b{ display:block; font-family:var(--serif); font-size:1.9rem; line-height:1; color:var(--gold-light); } .tile b.t-small{ font-size:1.05rem; line-height:1.25; } .tile span{ display:block; margin-top:.3rem; font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; color:var(--mute); font-family:var(--mono); } .tile.wide{ grid-column:1/-1; margin:0; width:auto; }
.sec-h{ display:flex; align-items:center; justify-content:space-between; gap:1rem; margin:1.6rem 0 .8rem; } .sec-h h2{ font-family:var(--serif); font-size:1.55rem; margin:0; } .sec-h a{ text-decoration:none; font-size:.85rem; display:inline-flex; gap:.3rem; align-items:center; }
.btn-mini{ display:inline-flex; align-items:center; gap:.35rem; padding:.45rem .85rem; border-radius:99px; border:0; background:var(--gold); color:var(--navy) !important; font-size:.78rem; font-weight:700; text-decoration:none; } .btn-mini.ghost{ background:transparent; border:1px solid var(--line-strong); color:var(--gold-light) !important; } .btn-mini .ic{ width:14px; height:14px; }
.plist{ display:grid; gap:.8rem; } @media (min-width:700px){ .plist{ grid-template-columns:1fr 1fr; } }
.pcard{ display:flex; align-items:center; gap:1rem; padding:1rem 1.1rem; border-radius:20px; border:1px solid var(--line); background:var(--card); text-decoration:none; color:#fff; transition:border-color .2s, transform .2s; } .pcard:hover{ border-color:var(--gold); transform:translateY(-2px); }
.pc-body{ flex:1; min-width:0; } .pc-body h3{ margin:0; font-family:var(--serif); font-size:1.3rem; line-height:1.1; overflow-wrap:anywhere; } .pc-body p{ margin:.2rem 0 .5rem; color:var(--mute); font-size:.85rem; }
.pc-meta{ display:flex; flex-wrap:wrap; align-items:center; gap:.5rem; margin-top:.5rem; } .next{ font-size:.78rem; color:#cbd3e4; display:inline-flex; gap:.3rem; align-items:center; } .go{ color:var(--gold); }
.ring .rg-bg{ fill:none; stroke:rgba(212,175,55,.16); stroke-width:6; } .ring .rg-fg{ fill:none; stroke:var(--gold); stroke-width:6; stroke-linecap:round; filter:drop-shadow(0 0 5px rgba(212,175,55,.6)); transition:stroke-dashoffset .8s ease; } .ring text{ fill:#fff; font-size:.8rem; font-weight:700; }
.pill{ display:inline-block; padding:.18rem .65rem; border-radius:99px; font-size:.7rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase; border:1px solid var(--line-strong); color:var(--gold-light); background:rgba(212,175,55,.1); }
.pill.s-completed,.pill.s-complete,.pill.s-approved,.pill.s-done{ color:var(--ok); border-color:rgba(61,220,151,.5); background:rgba(61,220,151,.1); } .pill.s-declined{ color:var(--bad); border-color:rgba(255,107,107,.5); background:rgba(255,107,107,.1); } .pill.s-pending,.pill.s-new{ color:#9db4ff; border-color:rgba(157,180,255,.45); background:rgba(157,180,255,.1); }
.qa{ display:grid; grid-template-columns:1fr 1fr; gap:.8rem; } @media (min-width:700px){ .qa{ grid-template-columns:repeat(4,1fr); } }
.qa a{ display:flex; flex-direction:column; gap:.2rem; padding:1rem; border-radius:18px; border:1px solid var(--line); background:var(--card); text-decoration:none; color:#fff; } .qa a .ic{ width:24px; height:24px; color:var(--gold); margin-bottom:.4rem; } .qa b{ font-size:.95rem; } .qa span{ font-size:.78rem; color:var(--mute); }
.empty{ text-align:center; padding:2.5rem 1rem; border:1px dashed var(--line); border-radius:20px; color:var(--mute); } .empty .ic{ width:34px; height:34px; color:var(--gold); } .empty h3{ font-family:var(--serif); color:#fff; font-size:1.4rem; margin:.7rem 0 .3rem; } .empty p{ margin:0 0 1rem; } .empty a{ margin-top:.3rem; }
.card.install,.card.errc{ display:flex; gap:.9rem; align-items:center; } .card.install>.ic,.card.errc>.ic{ width:28px; height:28px; color:var(--gold); } .card.install p,.card.errc p{ margin:.2rem 0 0; color:var(--mute); font-size:.85rem; } .card.install div,.card.errc div{ flex:1; } .card.errc{ border-color:rgba(255,107,107,.4); } .card.errc>.ic{ color:var(--bad); }
a.back{ display:inline-flex; align-items:center; gap:.4rem; margin:.4rem 0 .6rem; color:var(--mute); text-decoration:none; font-size:.88rem; text-align:left; }
.proj-h{ display:flex; gap:1.1rem; align-items:center; } .proj-h h1{ font-size:1.9rem; overflow-wrap:anywhere; } .desc{ color:#cbd3e4; line-height:1.6; margin:0 0 1rem; }

/* timeline */
.tl{ list-style:none; margin:0; padding:0; position:relative; } .tl li{ position:relative; display:flex; gap:1rem; padding-bottom:1.3rem; } .tl li:last-child{ padding-bottom:0; }
.tl li:not(:last-child)::before{ content:""; position:absolute; left:15px; top:32px; bottom:0; width:2px; background:rgba(212,175,55,.2); } .tl li.st-done:not(:last-child)::before{ background:linear-gradient(var(--ok),rgba(61,220,151,.25)); }
.node{ flex:none; width:32px; height:32px; border-radius:50%; display:grid; place-items:center; border:2px solid rgba(212,175,55,.35); background:var(--bg); font-size:.78rem; color:var(--mute); } .node em{ font-style:normal; }
.st-done .node{ background:var(--ok); border-color:var(--ok); color:#06281a; box-shadow:0 0 14px rgba(61,220,151,.5); } .st-active .node{ border-color:var(--gold); box-shadow:0 0 16px rgba(212,175,55,.6); } .pulse{ width:12px; height:12px; border-radius:50%; background:var(--gold); animation:pulse 1.6s ease-in-out infinite; } @keyframes pulse{ 50%{ transform:scale(1.5); opacity:.5; } }
.tl h4{ margin:.2rem 0 .15rem; font-size:1rem; } .tl p{ margin:0; font-size:.86rem; color:var(--mute); line-height:1.5; } .tl small{ display:block; margin-top:.25rem; font-size:.74rem; color:#8793ad; font-family:var(--mono); } .now{ color:var(--gold-light); } .st-pending h4{ color:#b3bdd2; font-weight:500; }
.stnote{ display:flex !important; gap:.4rem; margin-top:.4rem !important; padding:.5rem .7rem; border-radius:10px; background:rgba(212,175,55,.08); color:#e8d9a8 !important; }
.facts{ display:grid; grid-template-columns:1fr 1fr; gap:.8rem 1rem; margin:0 0 1rem; } .facts dt{ font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; color:var(--mute); font-family:var(--mono); } .facts dd{ margin:.15rem 0 0; font-weight:700; font-size:1.05rem; } .mini{ font-size:.78rem; letter-spacing:.1em; text-transform:uppercase; color:var(--mute); font-family:var(--mono); margin:1rem 0 .4rem; font-weight:500; }
.rows{ list-style:none; margin:.4rem 0 0; padding:0; } .rows li{ display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:.7rem 0; border-top:1px solid rgba(212,175,55,.12); font-size:.92rem; } .rows li:first-child{ border-top:0; } .rows b{ color:var(--gold-light); } .rows small{ color:var(--mute); }
.card .btn-gold,.card .btn-ghost{ margin-bottom:.6rem; }
.pdfready{ display:flex; flex-wrap:wrap; gap:.6rem; align-items:center; padding:.8rem; border-radius:14px; background:rgba(61,220,151,.08); border:1px solid rgba(61,220,151,.35); margin-bottom:.6rem; } .pdfready>span{ flex:1; min-width:120px; } .pdfready .btn-gold,.pdfready .btn-ghost{ margin:0; padding:.6rem 1.1rem; }

/* alerts */
.alist{ list-style:none; margin:0; padding:0; display:grid; gap:.6rem; } .alert{ width:100%; text-align:left; display:flex; gap:.8rem; padding:.95rem 1rem; border-radius:16px; border:1px solid var(--line); background:var(--card); color:#fff; } .alert .dot{ flex:none; width:10px; height:10px; margin-top:.4rem; border-radius:50%; background:transparent; border:1px solid var(--line-strong); }
.alert.new{ border-color:var(--gold); } .alert.new .dot{ background:var(--gold); box-shadow:0 0 10px var(--gold); } .alert h4{ margin:0 0 .15rem; font-size:.98rem; } .alert p{ margin:0; color:var(--mute); font-size:.87rem; } .alert small{ display:block; margin-top:.3rem; color:#8793ad; font-size:.72rem; font-family:var(--mono); }
.seg{ display:flex; gap:.4rem; padding:.3rem; border-radius:99px; border:1px solid var(--line); margin-bottom:1rem; } .seg button{ flex:1; padding:.6rem; border-radius:99px; border:0; background:none; color:var(--mute); font-weight:600; } .seg button.on{ background:var(--gold); color:var(--navy); } .seg .badge{ background:var(--navy); color:var(--gold-light); }
.rlist{ list-style:none; padding:0; margin:0 0 1rem; display:grid; gap:.7rem; } .req{ display:flex; flex-wrap:wrap; gap:.8rem; justify-content:space-between; padding:1rem; border-radius:16px; border:1px solid var(--line); background:var(--card); } .req h4{ margin:0 0 .2rem; font-size:.98rem; } .req p{ margin:0; font-size:.86rem; color:var(--mute); } .req small{ color:#8793ad; font-size:.72rem; } .ra{ display:flex; flex-wrap:wrap; gap:.4rem; align-items:center; }
.danger{ color:#ffb3b3; border-color:rgba(255,107,107,.4); } .danger:hover{ background:rgba(255,107,107,.12) !important; color:#fff; }

/* dialog + toast */
dialog{ border:1px solid var(--line-strong); border-radius:22px; background:#0d1d35; color:#fff; padding:1.5rem 1.3rem; width:min(440px,calc(100% - 2rem)); } dialog::backdrop{ background:rgba(3,8,18,.7); backdrop-filter:blur(4px); }
dialog h2{ font-family:var(--serif); margin:0 0 .2rem; font-size:1.6rem; } dialog .x{ position:absolute; right:.7rem; top:.7rem; background:none; border:0; color:var(--mute); padding:.5rem; }
#toasts{ position:fixed; left:0; right:0; bottom:calc(var(--tab-h) + 1rem + env(safe-area-inset-bottom)); display:flex; flex-direction:column; align-items:center; gap:.5rem; z-index:90; pointer-events:none; padding:0 1rem; } @media (min-width:900px){ #toasts{ bottom:1.5rem; } }
.toast{ display:flex; gap:.6rem; align-items:center; padding:.75rem 1.1rem; border-radius:14px; background:#12284a; border:1px solid var(--line-strong); box-shadow:0 12px 40px rgba(0,0,0,.5); font-size:.9rem; animation:toastIn .3s ease both; max-width:440px; } .toast.ok{ border-color:rgba(61,220,151,.5); } .toast.ok .ic{ color:var(--ok); } .toast.error{ border-color:rgba(255,107,107,.5); } .toast.error .ic{ color:var(--bad); } .toast .ic{ color:var(--gold); } .toast.out{ opacity:0; transform:translateY(8px); transition:.4s; }
@keyframes toastIn{ from{ opacity:0; transform:translateY(12px); } }
@media (prefers-reduced-motion:reduce){ .view-in,.toast,.pulse,.spin{ animation:none !important; } .ring .rg-fg{ transition:none; } }

/* ---- phase 3b: avatars, profile, staff screens ---- */
.tb-av{ text-decoration:none; display:inline-flex; } .avatar{ overflow:hidden; } .avatar img{ width:100%; height:100%; object-fit:cover; display:block; }
.avatar.xl{ width:84px; height:84px; font-size:1.8rem; flex:none; border:2px solid rgba(212,175,55,.55); box-shadow:0 0 0 4px rgba(212,175,55,.12); }
.prof-h,.cl-h{ display:flex; flex-wrap:wrap; align-items:center; gap:1.1rem; overflow:hidden; } .prof-h>*,.cl-h>*{ position:relative; z-index:1; }
.prof-h h1,.cl-h h1{ font-family:var(--serif); font-size:1.7rem; margin:0; } .prof-h p,.cl-h p.sub{ margin:.15rem 0 .5rem; color:var(--mute); word-break:break-all; }
.ph-av{ position:relative; } .cam{ position:absolute; right:-4px; bottom:-4px; width:34px; height:34px; border-radius:50%; border:2px solid #0d1d35; background:var(--gold); color:var(--navy); display:grid; place-items:center; padding:0; } .cam .ic{ width:16px; height:16px; }
.ph-a{ display:flex; flex-wrap:wrap; gap:.5rem; width:100%; }
.sw{ display:flex; align-items:center; justify-content:space-between; gap:1rem; margin:0; padding:.8rem 0; border-top:1px solid rgba(212,175,55,.12); cursor:pointer; } .sw span b{ display:block; color:#fff; font-size:.92rem; letter-spacing:0; } .sw span small{ display:block; margin-top:.15rem; color:var(--mute); font-size:.78rem; font-weight:400; }
.sw input{ appearance:none; -webkit-appearance:none; width:46px; height:26px; margin:0; padding:0; flex:none; border-radius:99px; border:1px solid var(--line-strong); background:rgba(7,15,29,.9); position:relative; cursor:pointer; transition:background .2s; }
.sw input::after{ content:''; position:absolute; top:2px; left:2px; width:20px; height:20px; border-radius:50%; background:var(--mute); transition:transform .2s, background .2s; } .sw input:checked{ background:rgba(212,175,55,.25); border-color:var(--gold); } .sw input:checked::after{ transform:translateX(20px); background:var(--gold); }
h3.mini{ margin:1.2rem 0 .3rem; }
.search{ position:relative; display:block; margin-bottom:.8rem; } .search .ic{ position:absolute; left:1rem; top:50%; transform:translateY(-50%); width:18px; height:18px; color:var(--mute); } .search input{ padding-left:2.8rem; margin:0; }
.crow{ display:flex; align-items:center; gap:.9rem; padding:.9rem 1rem; border-radius:18px; border:1px solid var(--line); background:var(--card); text-decoration:none; color:#fff; position:relative; }
.crow .avatar{ flex:none; } .crow .pc-body{ flex:1; min-width:0; } .crow h3{ margin:0; font-size:1rem; font-family:var(--sans); } .crow p{ margin:.1rem 0 0; color:var(--mute); font-size:.82rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cr-r{ display:grid; gap:.3rem; justify-items:end; flex:none; } .cr-r small{ color:var(--mute); font-size:.72rem; }
.sa{ display:flex; flex-wrap:wrap; gap:.4rem; margin-top:.6rem; }
button.glow-card{ text-align:left; font:inherit; color:#fff; cursor:pointer; }
dialog{ max-height:calc(100dvh - 2rem); overflow:auto; }
.qa button{ display:flex; flex-direction:column; gap:.2rem; padding:1rem; border-radius:18px; border:1px solid var(--line); background:var(--card); } .qa button .ic{ width:24px; height:24px; color:var(--gold); margin-bottom:.4rem; } .qa button b{ font-size:.95rem; } .qa button span{ font-size:.78rem; color:var(--mute); }

/* service type-ahead + welcome state */
.combo{ position:relative; display:block; } .combo input{ margin-top:.35rem; }
.sug{ position:absolute; z-index:5; left:0; right:0; top:calc(100% + 2px); margin:0; padding:.3rem; list-style:none; max-height:260px; overflow:auto; border-radius:14px; border:1px solid var(--line-strong); background:#0d1d35; box-shadow:0 18px 40px rgba(0,0,0,.55); }
.sug li{ display:flex; flex-direction:column; gap:.1rem; padding:.6rem .75rem; border-radius:10px; cursor:pointer; } .sug li b{ font-size:.92rem; color:#fff; font-weight:600; letter-spacing:0; } .sug li small{ color:var(--mute); font-size:.74rem; font-weight:400; }
.sug li.on,.sug li:hover{ background:rgba(212,175,55,.14); } .sug li.free b{ color:var(--gold-light); }
.empty.welcome{ padding:2rem 1.2rem; } .empty.welcome .ic{ width:34px; height:34px; color:var(--gold); } .empty-cta{ display:flex; flex-wrap:wrap; gap:.6rem; justify-content:center; margin-top:1.1rem; }

/* ---- Phase 4a: staff operations ---- */
.tog{ position:relative; width:46px; height:26px; border-radius:99px; border:1px solid var(--line-strong); background:rgba(7,15,29,.7); padding:0; flex:none; transition:background .2s; }
.tog i{ position:absolute; top:2px; left:2px; width:20px; height:20px; border-radius:50%; background:var(--mute); transition:transform .2s, background .2s; }
.tog.on{ background:rgba(212,175,55,.3); border-color:var(--gold); } .tog.on i{ transform:translateX(20px); background:var(--gold); }
.tog:focus-visible{ outline:2px solid var(--gold); outline-offset:2px; }
.chips{ display:flex; flex-wrap:wrap; gap:.45rem; margin-top:.4rem; }
.chip{ display:inline-flex; align-items:center; gap:.3rem; padding:.3rem .7rem; border-radius:99px; border:1px solid var(--line-strong); background:rgba(212,175,55,.1); color:var(--gold-light); font-size:.78rem; font-weight:600; }
.chip .ic{ width:12px; height:12px; } .chip.add{ background:transparent; border-style:dashed; }
.mrow{ display:block !important; }
.mf{ display:grid; grid-template-columns:1fr 1fr; gap:.6rem; align-items:end; margin-top:.7rem; }
.mf label{ margin:0; font-size:.74rem; } .mf input{ padding:.55rem .7rem; }
.mf .mg{ font-family:var(--serif); font-size:1.15rem; color:var(--gold-light); align-self:center; }
.mf .btn-mini{ justify-self:end; }
.two{ display:grid; grid-template-columns:1fr 1fr; gap:.7rem; }
.stages{ display:flex; gap:.4rem; overflow-x:auto; padding:.2rem 0 .8rem; scrollbar-width:none; } .stages::-webkit-scrollbar{ display:none; }
.stages button{ flex:none; display:inline-flex; gap:.35rem; align-items:center; padding:.4rem .8rem; border-radius:99px; border:1px solid var(--line); background:transparent; color:var(--mute); font-size:.78rem; font-weight:600; }
.stages button b{ font-size:.7rem; color:var(--gold-light); } .stages button.on{ background:rgba(212,175,55,.16); border-color:var(--gold); color:#fff; }
.notes{ list-style:none; margin:1rem 0 0; padding:0; display:grid; gap:.6rem; }
.notes li{ padding:.8rem .9rem; border-radius:14px; border:1px solid var(--line); background:rgba(7,15,29,.5); }
.notes p{ margin:0 0 .3rem; white-space:pre-wrap; overflow-wrap:anywhere; font-size:.92rem; } .notes small{ color:var(--mute); }
.acts{ list-style:none; margin:0 0 1rem; padding:1rem 1.2rem; display:grid; gap:.9rem; }
.acts li{ display:flex; gap:.8rem; align-items:flex-start; } .acts .dot{ flex:none; width:9px; height:9px; margin-top:.4rem; border-radius:50%; background:var(--gold); box-shadow:0 0 8px var(--gold); }
.acts p{ margin:0; font-size:.92rem; overflow-wrap:anywhere; } .acts small{ color:var(--mute); font-size:.76rem; }
.team .tm{ display:flex; gap:.8rem; align-items:center; min-width:0; } .team .tm h4{ margin:0; } .team .tm h4 a{ color:#fff; text-decoration:none; }
.team .fin{ display:flex; align-items:center; gap:.6rem; font-size:.78rem; color:var(--mute); }
.own{ display:flex; align-items:center; gap:.3rem; font-size:.78rem !important; color:var(--gold-light) !important; } .own .ic{ width:13px; height:13px; } .own .free{ color:var(--mute); }
a.rl{ flex:1; color:#fff; text-decoration:none; min-width:0; } a.rl small{ color:var(--mute); }
.rows .ra{ display:flex; gap:.4rem; flex-wrap:wrap; justify-content:flex-end; }
.qa button{ display:flex; flex-direction:column; gap:.2rem; padding:1rem; border-radius:18px; border:1px solid var(--line); background:var(--card); text-align:left; color:#fff; }
@media (max-width:420px){ .mf{ grid-template-columns:1fr 1fr; } .two{ grid-template-columns:1fr; } }

/* ---- Build 1: step cards, step editor, WhatsApp gate, share dialog ---- */
.sc-track{ display:flex; gap:5px; margin:.2rem 0 1rem; } .sc-track i{ flex:1; height:6px; border-radius:99px; background:rgba(212,175,55,.14); }
.sc-track i.done{ background:linear-gradient(90deg,var(--gold-dark),var(--gold-light)); box-shadow:0 0 8px rgba(212,175,55,.5); } .sc-track i.active{ background:var(--gold); animation:scPulse 1.8s ease-in-out infinite; }
.sc-list{ list-style:none; margin:0; padding:0; display:grid; gap:.7rem; position:relative; }
.sc{ position:relative; display:flex; gap:.9rem; padding:.95rem 1rem; border-radius:18px; border:1px solid var(--line); background:rgba(7,15,29,.55); transition:border-color .25s, box-shadow .25s, transform .25s; }
.sc:not(:last-child)::after{ content:""; position:absolute; left:calc(1rem + 18px); bottom:-.7rem; height:.7rem; width:2px; background:var(--line); }
.sc.done:not(:last-child)::after{ background:var(--gold); box-shadow:0 0 6px var(--gold); }
.sc-node{ flex:none; width:38px; height:38px; border-radius:50%; display:grid; place-items:center; border:1.5px solid var(--line-strong); color:var(--mute); font-weight:700; font-style:normal; background:rgba(7,15,29,.8); }
.sc-node em{ font-style:normal; font-size:.9rem; } .sc-node .ic{ width:18px; height:18px; }
.sc-body{ flex:1; min-width:0; } .sc-top{ display:flex; align-items:center; justify-content:space-between; gap:.6rem; flex-wrap:wrap; }
.sc h4{ margin:0; font-family:var(--serif); font-size:1.2rem; line-height:1.15; overflow-wrap:anywhere; }
.sc-tag{ font-family:var(--mono); font-size:.62rem; letter-spacing:.14em; text-transform:uppercase; padding:.18rem .55rem; border-radius:99px; border:1px solid var(--line-strong); color:var(--mute); }
.sc p{ margin:.35rem 0 0; color:#cbd3e4; font-size:.88rem; } .sc small{ display:block; margin-top:.3rem; color:var(--mute); font-size:.76rem; }
.sc .sa{ display:flex; flex-wrap:wrap; gap:.5rem; margin-top:.8rem; }
.sc.done{ border-color:rgba(212,175,55,.6); background:linear-gradient(135deg,rgba(212,175,55,.16),rgba(7,15,29,.6)); }
.sc.done .sc-node{ background:linear-gradient(135deg,var(--gold-light),var(--gold-dark)); color:var(--navy); border-color:var(--gold); box-shadow:0 0 14px rgba(212,175,55,.55); }
.sc.done .sc-tag{ color:var(--gold-light); border-color:var(--gold); background:rgba(212,175,55,.12); }
.sc.active{ border-color:var(--gold); box-shadow:0 0 0 1px var(--gold), 0 0 26px rgba(212,175,55,.35); background:linear-gradient(135deg,rgba(212,175,55,.1),rgba(14,29,53,.85)); animation:scGlow 2.4s ease-in-out infinite; }
.sc.active .sc-node{ border-color:var(--gold); } .sc.active .sc-node .pulse{ width:12px; height:12px; border-radius:50%; background:var(--gold); box-shadow:0 0 0 0 rgba(212,175,55,.7); animation:scPing 1.6s infinite; display:block; }
.sc.active .sc-tag{ color:var(--navy); background:var(--gold); border-color:var(--gold); font-weight:700; }
.sc.next{ border-color:var(--line-strong); border-style:dashed; } .sc.next .sc-node{ border-color:var(--gold); color:var(--gold-light); } .sc.next .sc-tag{ color:var(--gold-light); }
.sc.locked{ opacity:.5; } .sc.locked h4{ font-size:1.05rem; }
.sc.just{ animation:scBurst .9s ease-out; }
@keyframes scGlow{ 0%,100%{ box-shadow:0 0 0 1px var(--gold), 0 0 18px rgba(212,175,55,.25); } 50%{ box-shadow:0 0 0 1px var(--gold), 0 0 34px rgba(212,175,55,.5); } }
@keyframes scPing{ 70%{ box-shadow:0 0 0 12px rgba(212,175,55,0); } 100%{ box-shadow:0 0 0 0 rgba(212,175,55,0); } }
@keyframes scPulse{ 50%{ opacity:.45; } }
@keyframes scBurst{ 0%{ transform:scale(.97); box-shadow:0 0 0 0 rgba(212,175,55,.9); } 60%{ transform:scale(1.015); box-shadow:0 0 0 18px rgba(212,175,55,0); } 100%{ transform:none; } }
@media (prefers-reduced-motion:reduce){ .sc,.sc *,.sc-track i{ animation:none !important; transition:none !important; } }
/* step editor in the new-project dialog */
.lbl{ font-weight:600; font-size:.9rem; margin:.9rem 0 .4rem; } .lbl small{ font-weight:400; color:var(--mute); }
.sed{ display:grid; gap:.6rem; margin-bottom:.8rem; } .sed-list{ display:grid; gap:.6rem; counter-reset:sed; }
.sed-row{ counter-increment:sed; position:relative; display:grid; gap:.45rem; padding:.7rem .7rem .7rem 2.5rem; border:1px solid var(--line); border-radius:14px; background:rgba(7,15,29,.5); }
.sed-row::before{ content:counter(sed); position:absolute; left:.7rem; top:.8rem; width:22px; height:22px; border-radius:50%; display:grid; place-items:center; background:var(--gold); color:var(--navy); font-size:.72rem; font-weight:800; }
.sed-b{ display:flex; flex-wrap:wrap; align-items:center; gap:.6rem 1rem; } .sed-b label{ display:flex; align-items:center; gap:.4rem; margin:0; font-size:.8rem; color:var(--mute); }
.sed-b input[type=number]{ width:4.2rem; padding:.4rem .5rem; } .sed-b input[type=checkbox]{ width:auto; }
.sed-a{ margin-left:auto; display:flex; gap:.3rem; } .sed-a button{ width:34px; height:34px; display:grid; place-items:center; border-radius:10px; border:1px solid var(--line-strong); background:transparent; color:var(--gold-light); padding:0; } .sed-a .ic{ width:16px; height:16px; }
/* WhatsApp number gate */
#gate{ position:fixed; inset:0; z-index:95; display:grid; place-items:center; padding:1rem; background:var(--bg); overflow:auto; }
.gate-card{ position:relative; isolation:isolate; width:100%; max-width:430px; border:1px solid var(--line-strong); border-radius:24px; padding:2rem 1.5rem 1.4rem; background:linear-gradient(160deg,rgba(18,40,74,.9),rgba(10,22,40,.95)); box-shadow:0 30px 80px rgba(0,0,0,.5), 0 0 60px rgba(212,175,55,.12); }
.gate-card h1{ font-family:var(--serif); font-size:1.8rem; text-align:center; margin:.4rem 0; } .gate-card .sub{ text-align:center; color:var(--mute); margin:0 0 1rem; } .gate-card .btn-ghost{ margin-top:.6rem; }
/* share dialog */
.shbox{ display:grid; gap:.6rem; margin-top:.8rem; } .shbox textarea{ min-height:9rem; }
.shst{ display:flex; align-items:center; gap:.5rem; font-size:.85rem; color:var(--mute); } .shst .ic{ width:16px; height:16px; color:var(--gold); }
.shgo{ display:grid; grid-template-columns:1fr 1fr; gap:.6rem; } .shgo .btn-gold,.shgo .btn-ghost{ justify-content:center; margin:0; } .shgo .full{ grid-column:1/-1; }

.shbox textarea{font-weight:400;font-size:.92rem;line-height:1.45;min-height:210px}

/* 2a quotes, prices, company */
.qlist{display:grid;gap:.6rem;margin-bottom:1rem}
.qrow{display:flex;justify-content:space-between;gap:1rem;align-items:center;padding:.85rem 1rem;border:1px solid var(--line,rgba(212,175,55,.25));border-radius:14px;background:rgba(15,30,54,.7);text-decoration:none;color:inherit}
.qrow span{display:block;font-size:.82rem;opacity:.7;margin-top:.15rem}
.qr-r{display:flex;flex-direction:column;align-items:flex-end;gap:.3rem;white-space:nowrap}
.pill.s-q-sent{background:rgba(212,175,55,.18);color:#e8c96e}.pill.s-q-accepted{background:rgba(70,200,130,.18);color:#6fe0a8}
.pill.s-q-declined,.pill.s-q-withdrawn{background:rgba(160,170,190,.16);color:#aab4c8}.pill.s-q-expired{background:rgba(230,120,100,.16);color:#f0a090}
.qalert{display:flex;align-items:center;gap:.9rem;text-decoration:none;color:inherit;border-color:rgba(212,175,55,.6)}.qalert p{margin:.15rem 0 0;opacity:.8;font-size:.9rem}.qalert>.ic:first-child{color:#e8c96e;width:28px;height:28px}
.helpcard{display:flex;align-items:center;gap:.9rem;text-decoration:none;color:inherit;border-color:rgba(212,175,55,.6)}.helpcard p{margin:.15rem 0 0;opacity:.8;font-size:.9rem}.helpcard>.ic:first-child{color:#e8c96e;width:28px;height:28px}
.rows li.tot{border-top:1px solid rgba(212,175,55,.35);padding-top:.7rem;margin-top:.3rem;font-size:1.05rem}
.rows.tight li{padding:.35rem 0}
.qlines{display:grid;gap:.6rem;margin:.4rem 0}
.ql-row{display:grid;grid-template-columns:1fr 64px 96px 36px;gap:.4rem;align-items:center;padding:.5rem;border:1px solid rgba(212,175,55,.2);border-radius:12px}
.ql-row select{grid-column:1/-1}.ql-row input[data-f=desc]{min-width:0}.ql-row .x2{background:none;border:0;color:inherit;cursor:pointer;opacity:.7}
.qtot{text-align:right;font-size:1.05rem;margin:.6rem 0}.qtot b{color:#e8c96e}
.chk{display:flex;gap:.6rem;align-items:flex-start;margin:.8rem 0}.chk input{width:auto;margin-top:.2rem}
.prc{display:grid;grid-template-columns:1fr 1fr 1fr auto;gap:.5rem;align-items:end;padding:.8rem 0;border-top:1px solid rgba(255,255,255,.07)}
.prc>b{grid-column:1/-1}.prc[hidden]{display:none}.prc label{margin:0}
@media (max-width:640px){.prc{grid-template-columns:1fr 1fr}.prc button{grid-column:1/-1}}
.search{width:100%;margin:.5rem 0 1rem}

.agr{border:1px solid var(--line,#26364f);border-radius:12px;margin:.5rem 0;padding:.5rem .8rem;background:rgba(255,255,255,.03)}.agr summary{cursor:pointer;font-weight:600}.agr h4{margin:.9rem 0 .2rem;color:var(--gold,#d4af37);font-size:.9rem}.agr p{margin:.2rem 0;font-size:.85rem;line-height:1.5}
.howto{margin-top:1rem;padding-top:.8rem;border-top:1px solid rgba(212,175,55,.25)}.howto .facts dd{display:flex;align-items:center;gap:.4rem;justify-content:flex-end}
.cp{background:transparent;border:1px solid rgba(212,175,55,.5);color:var(--gold,#d4af37);border-radius:8px;padding:.15rem .35rem;cursor:pointer;line-height:0}.cp svg{width:14px;height:14px}
.steps-s{margin:.6rem 0 .2rem 1.1rem;padding:0;font-size:.88rem;line-height:1.5}.steps-s li{margin:.2rem 0}
.rows .rt{display:flex;align-items:center;gap:.5rem;white-space:nowrap}
li:has(>.rl+.btn-mini){display:flex;align-items:center;gap:.6rem}li:has(>.rl+.btn-mini)>.rl{flex:1}
.card>.ph-a{margin-top:.9rem}

/* ---- FOAN credit (Build 6) */
.gem{flex:none;filter:drop-shadow(0 2px 6px rgba(0,0,0,.35))}
.wal-h .wal-top{display:flex;align-items:center;gap:1rem}.wal-h h1 small{font-size:.8rem;color:var(--gold-light);font-weight:600;margin-left:.3rem;letter-spacing:.06em;text-transform:uppercase}
.wal-bal{margin:1rem 0 .4rem;display:flex;flex-direction:column;gap:.15rem}.wal-bal span{font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--mute);font-family:var(--mono)}.wal-bal b{font-size:2rem;color:var(--gold-light)}.wal-bal small{color:var(--mute)}
.lvl-bar{height:8px;border-radius:99px;background:rgba(255,255,255,.1);overflow:hidden;margin:.6rem 0 .35rem}.lvl-bar i{display:block;height:100%;background:linear-gradient(90deg,var(--gold),var(--gold-light));border-radius:99px}.lvl small{color:var(--mute)}
.wal-home{display:flex;align-items:center;gap:.9rem;text-decoration:none;color:inherit}.wal-home p{margin:.15rem 0 0;color:var(--mute);font-size:.9rem}.wal-home>.ic{margin-left:auto}
.wal-s{display:flex;align-items:center;gap:.8rem;margin:.3rem 0 .6rem}.wal-s .ra{margin-left:auto;text-align:right}.wal-s .big{font-size:1.3rem;color:var(--gold-light)}
.ledger .pos{color:var(--ok)}.ledger .neg{color:#f0a090}
.earn li{display:flex;gap:.7rem;align-items:flex-start}.earn .ei{flex:none;width:34px;height:34px;border-radius:10px;background:rgba(212,175,55,.12);display:grid;place-items:center;color:var(--gold-light)}
.refcode{font-family:var(--mono);font-size:1.5rem;letter-spacing:.14em;text-align:center;margin:.8rem 0;color:var(--gold-light)}
.inline{display:flex;gap:.5rem}.inline input{flex:1}
.tgrid{display:grid;grid-template-columns:1.2fr 1fr 1fr 1fr;gap:.5rem .6rem;align-items:center;margin:.6rem 0 1rem}.tgrid b{font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;color:var(--mute);font-family:var(--mono)}.tgrid span{display:flex;align-items:center;gap:.35rem}.tgrid input,.rgrid input{width:100%;min-width:0}
.rgrid{display:grid;grid-template-columns:1fr 1fr;gap:.7rem 1rem;margin:.6rem 0 1rem}.rgrid label{font-size:.8rem}h2.gap{margin-top:1.4rem}
.gl{display:flex;align-items:center;gap:.6rem}
@media (max-width:620px){.rgrid{grid-template-columns:1fr}.tgrid{grid-template-columns:1fr 1fr}.tgrid b:first-child{display:none}.tgrid>span{grid-column:1/-1;margin-top:.4rem}}
/* Build 7 */
.msgs{list-style:none;margin:.4rem 0 .8rem;padding:0;display:flex;flex-direction:column;gap:.5rem}
.msgs li{max-width:88%;padding:.55rem .8rem;border-radius:14px;border:1px solid rgba(212,175,55,.2);background:rgba(255,255,255,.03)}
.msgs li p{margin:0;white-space:pre-wrap;overflow-wrap:anywhere} .msgs li small{color:var(--mute)}
.msgs .m-s{align-self:flex-start} .msgs .m-c{align-self:flex-end;background:rgba(212,175,55,.1)}
.slots{display:flex;flex-wrap:wrap;gap:.45rem;margin-top:.7rem}
.chk7{display:inline-flex;align-items:center;gap:.3rem;cursor:pointer}
.due-overdue{color:#ff8a80;font-weight:600} .due-soon{color:var(--gold-light);font-weight:600}
.rl7 li.req{align-items:flex-start}
.chk7 input{width:auto;display:inline-block;margin:0;padding:0} .chip.on{background:var(--gold);color:#07101e}
button.chip{cursor:pointer}
/* Build 8 */
.bulkbar{display:flex;flex-wrap:wrap;gap:.45rem;align-items:center;margin:.6rem 0;position:sticky;top:.4rem;z-index:5}
.crow.selectable{cursor:pointer} .crow.selectable.picked{border-color:var(--gold);box-shadow:0 0 0 2px rgba(212,175,55,.35)}
.crow.selectable::after{content:'';width:18px;height:18px;border-radius:6px;border:2px solid var(--line-strong);flex:none;order:-1}
.crow.selectable.picked::after{background:var(--gold);border-color:var(--gold)}