/* PARDY HQ — the website's own colours and type (Lucas, 2026-10-24): navy #041423 / #0E2740, gold #C6A15F / #DFC08A,
   button-border gold #D2A773, off-white #F8F6F1, mist #AAB8C4 — and Raleway everywhere (the site's secondary/body font; no Cormorant here). */
:root {
  color-scheme: dark;
  --bg:#041423; --panel:#0E2740; --panel2:#143351; --line:rgba(170,184,196,.14); --line2:rgba(170,184,196,.28);
  --gold:#C6A15F; --gold-hi:#DFC08A; --gold-border:#D2A773; --gold-dim:rgba(198,161,95,.14);
  --ink:#F8F6F1; --dim:#AAB8C4; --mute:#7E8F9D; --navy-ink:#041423;
  --ok:#5fb37a; --warn:#e0a63a; --crit:#e2574a; --info:#6aa7e0;
  --r:4px; --r2:8px;
  --ease:cubic-bezier(.2,.8,.2,1);
  --nav-w:224px;
}
* { box-sizing:border-box; }
html, body { margin:0; height:100%; }
body { background: radial-gradient(1200px 500px at 50% -10%, rgba(198,161,95,.08), transparent 60%), var(--bg); color:var(--ink); font-family:'Raleway',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; font-size:14px; line-height:1.45; -webkit-font-smoothing:antialiased; overflow-x:hidden; }
a { color:var(--gold); text-decoration:none; } a:hover { color:var(--gold-hi); }
button { font-family:inherit; }
::selection { background:var(--gold); color:var(--navy-ink); }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration:.01ms !important; transition-duration:.01ms !important; } }

/* ---------- gate (sign in) ---------- */
#gate { position:fixed; inset:0; display:grid; place-items:center; padding:24px; background:var(--bg); z-index:50; }
#gate[hidden] { display:none; }
.gatecard { width:100%; max-width:380px; animation:rise .5s var(--ease) both; }
.wordmark { text-align:center; margin-bottom:28px; }
.wordmark .mark { font-size:30px; letter-spacing:.5em; font-weight:800; color:var(--ink); margin-right:-.5em; }
.wordmark .rule { width:56px; height:1px; background:var(--gold); margin:12px auto 10px; }
.wordmark .pagename { font-size:10px; letter-spacing:.4em; text-transform:uppercase; color:var(--gold); font-weight:600; }
.gatecard p { color:var(--dim); font-size:13px; text-align:center; margin:0 0 16px; }
input, select, textarea { width:100%; padding:13px 12px; border-radius:var(--r); border:1px solid var(--line2); background:var(--panel2); color:var(--ink); font-size:16px; font-family:inherit; transition:border-color .2s; }
input:focus, select:focus, textarea:focus { outline:none; border-color:var(--gold); }
textarea { min-height:120px; resize:vertical; }
.btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:13px 18px; border:1px solid var(--gold); border-radius:20px; background:var(--gold); color:var(--navy-ink); font-size:11px; font-weight:700; letter-spacing:.24em; text-transform:uppercase; cursor:pointer; transition:transform .15s var(--ease), background .2s, opacity .2s; }
.btn:hover { background:var(--gold-hi); } .btn:active { transform:scale(.97); } .btn:disabled { opacity:.4; cursor:default; }
.btn.ghost { background:transparent; border-color:var(--gold-border); color:var(--ink); } .btn.ghost:hover { background:var(--gold-dim); color:var(--gold-hi); }
.btn.sm { padding:8px 12px; font-size:10px; letter-spacing:.18em; }
.btn.danger { border-color:var(--crit); color:var(--crit); background:transparent; } .btn.danger:hover { background:rgba(226,87,74,.12); }
.btn.block { width:100%; margin-top:14px; }
.msg { min-height:20px; font-size:12px; color:var(--crit); text-align:center; margin-top:10px; }
.spin { display:inline-block; width:14px; height:14px; border:2px solid rgba(4,20,35,.25); border-top-color:var(--navy-ink); border-radius:50%; animation:spin .7s linear infinite; }
.ghost .spin, .dimspin { border-color:rgba(198,161,95,.25); border-top-color:var(--gold); }
@keyframes spin { to { transform:rotate(360deg); } }
@keyframes rise { from { opacity:0; transform:translateY(14px); } to { opacity:1; transform:none; } }
@keyframes fade { from { opacity:0; } to { opacity:1; } }
@keyframes pulse { 0%,100% { opacity:.5; } 50% { opacity:1; } }
@keyframes shimmer { from { background-position:-400px 0; } to { background-position:400px 0; } }

/* ---------- app frame ---------- */
#app { display:none; min-height:100%; }
#app.on { display:grid; grid-template-columns:var(--nav-w) 1fr; }
nav.side { position:sticky; top:0; height:100vh; border-right:1px solid var(--line); padding:22px 14px; display:flex; flex-direction:column; gap:4px; background:rgba(4,20,35,.9); backdrop-filter:blur(8px); }
nav.side .brand { padding:4px 10px 18px; }
nav.side .brand .mark { font-size:16px; letter-spacing:.42em; font-weight:800; margin-right:-.42em; }
nav.side .brand .pagename { font-size:9px; letter-spacing:.34em; color:var(--gold); text-transform:uppercase; font-weight:600; margin-top:3px; }
nav.side a.item, nav.bottom a.item { display:flex; align-items:center; gap:10px; padding:10px 10px; border-radius:var(--r); color:var(--dim); font-size:12.5px; font-weight:600; letter-spacing:.02em; position:relative; transition:background .2s, color .2s; }
nav.side a.item:hover { background:var(--panel); color:var(--ink); }
nav.side a.item.on { background:var(--gold-dim); color:var(--gold); }
nav.side a.item.on::before { content:''; position:absolute; left:0; top:8px; bottom:8px; width:2px; background:var(--gold); border-radius:2px; }
.item svg { width:16px; height:16px; stroke:currentColor; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; flex:none; }
.badge { margin-left:auto; min-width:18px; height:18px; padding:0 5px; border-radius:9px; background:var(--gold); color:var(--navy-ink); font-size:10px; font-weight:800; display:grid; place-items:center; }
.badge.crit { background:var(--crit); color:#fff; }
nav.side .foot { margin-top:auto; padding:10px; font-size:10.5px; color:var(--mute); line-height:1.6; }
nav.side .foot b { color:var(--dim); font-weight:600; }
.dot { display:inline-block; width:7px; height:7px; border-radius:50%; background:var(--mute); margin-right:6px; vertical-align:middle; }
.dot.ok { background:var(--ok); box-shadow:0 0 0 3px rgba(95,179,122,.15); } .dot.warn { background:var(--warn); } .dot.crit { background:var(--crit); animation:pulse 1.4s infinite; } .dot.busy { background:var(--gold); animation:pulse .9s infinite; }

main { padding:26px 30px 90px; max-width:1240px; width:100%; animation:fade .25s var(--ease) both; }
.topbar { display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin-bottom:22px; flex-wrap:wrap; }
.topbar h1 { font-size:22px; margin:0; letter-spacing:-.01em; font-weight:700; }
.topbar .sub { color:var(--dim); font-size:12.5px; margin-top:4px; }
.topbar .tools { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }

.grid { display:grid; gap:14px; grid-template-columns:repeat(12, 1fr); }
.c3 { grid-column:span 3; } .c4 { grid-column:span 4; } .c6 { grid-column:span 6; } .c8 { grid-column:span 8; } .c12 { grid-column:span 12; }
.card { background:var(--panel); border:1px solid var(--line); border-radius:var(--r2); padding:16px 18px; position:relative; animation:rise .45s var(--ease) both; transition:border-color .2s; }
.card:hover { border-color:var(--line2); }
.card h3 { margin:0 0 12px; font-size:10.5px; letter-spacing:.26em; text-transform:uppercase; color:var(--gold); font-weight:700; display:flex; align-items:center; gap:8px; }
.card h3 .more { margin-left:auto; font-size:10px; letter-spacing:.1em; color:var(--dim); font-weight:600; text-transform:none; }
.stat .n { font-size:30px; font-weight:800; letter-spacing:-.02em; line-height:1; margin:2px 0 6px; font-variant-numeric:tabular-nums; }
.stat .n small { font-size:14px; color:var(--dim); font-weight:600; letter-spacing:0; }
.stat .l { color:var(--dim); font-size:12px; }
.bar { height:5px; background:var(--panel2); border-radius:3px; overflow:hidden; margin-top:10px; }
.bar i { display:block; height:100%; background:linear-gradient(90deg, var(--gold), var(--gold-hi)); width:0; transition:width 1.1s var(--ease); border-radius:3px; }
.list { display:flex; flex-direction:column; }
.row { display:flex; align-items:center; gap:12px; padding:10px 0; border-top:1px solid var(--line); animation:rise .4s var(--ease) both; }
.row:first-child { border-top:0; }
.row .t { flex:1; min-width:0; } .row .t b { display:block; font-weight:600; font-size:13.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .row .t span { display:block; color:var(--dim); font-size:12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.row .when { color:var(--dim); font-size:11.5px; font-variant-numeric:tabular-nums; white-space:nowrap; }
.row.clickable { cursor:pointer; border-radius:var(--r); margin:0 -8px; padding:10px 8px; transition:background .15s; } .row.clickable:hover { background:var(--panel2); }
.chip { display:inline-flex; align-items:center; gap:5px; padding:3px 8px; border:1px solid var(--line2); border-radius:999px; font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--dim); font-weight:700; white-space:nowrap; }
.chip.gold { border-color:var(--gold); color:var(--gold); background:var(--gold-dim); }
.chip.ok { border-color:rgba(95,179,122,.5); color:var(--ok); } .chip.warn { border-color:rgba(224,166,58,.5); color:var(--warn); } .chip.crit { border-color:rgba(226,87,74,.6); color:var(--crit); background:rgba(226,87,74,.08); } .chip.info { border-color:rgba(106,167,224,.5); color:var(--info); }
.chip.sel { background:var(--gold); color:var(--navy-ink); border-color:var(--gold); }
.chips { display:flex; gap:6px; flex-wrap:wrap; }
.chips .chip { cursor:pointer; transition:all .15s; } .chips .chip:hover { border-color:var(--gold); color:var(--gold); } .chips .chip.sel:hover { color:var(--navy-ink); }
.alert { display:flex; gap:12px; align-items:flex-start; padding:12px 14px; border-radius:var(--r2); border:1px solid var(--line); background:var(--panel2); margin-bottom:8px; animation:rise .4s var(--ease) both; }
.alert.crit { border-color:rgba(226,87,74,.5); background:rgba(226,87,74,.06); } .alert.warn { border-color:rgba(224,166,58,.4); }
.alert .ic { width:8px; height:8px; border-radius:50%; margin-top:6px; flex:none; background:var(--info); } .alert.crit .ic { background:var(--crit); animation:pulse 1.4s infinite; } .alert.warn .ic { background:var(--warn); }
.alert .t { flex:1; min-width:0; } .alert .t b { display:block; font-size:13.5px; } .alert .t span { color:var(--dim); font-size:12px; }
.alert .acts { display:flex; gap:6px; flex:none; }
.x { background:none; border:0; color:var(--mute); cursor:pointer; font-size:16px; padding:2px 6px; line-height:1; border-radius:4px; } .x:hover { color:var(--ink); background:var(--panel2); }
.empty { padding:26px 10px; text-align:center; color:var(--dim); font-size:13px; }
.empty .big { font-size:28px; margin-bottom:6px; filter:grayscale(1) opacity(.6); }
.errbox { padding:16px; border:1px dashed rgba(226,87,74,.5); border-radius:var(--r2); color:var(--dim); font-size:13px; display:flex; gap:12px; align-items:center; justify-content:space-between; flex-wrap:wrap; }
.errbox b { color:var(--crit); display:block; font-size:13px; margin-bottom:2px; }
.banner { display:flex; gap:12px; align-items:center; padding:10px 14px; border:1px solid var(--gold); background:var(--gold-dim); border-radius:var(--r2); margin-bottom:18px; font-size:12.5px; animation:rise .4s var(--ease) both; }
.banner b { color:var(--gold); } .banner .btn { margin-left:auto; }
.kv { display:grid; grid-template-columns:auto 1fr; gap:6px 14px; font-size:12.5px; } .kv dt { color:var(--dim); } .kv dd { margin:0; font-weight:600; }
.mono { font-family:ui-monospace, SFMono-Regular, Menlo, monospace; font-size:12px; }
.money { font-variant-numeric:tabular-nums; font-weight:700; }
.pos { color:var(--ok); } .neg { color:var(--crit); }
table.tbl { width:100%; border-collapse:collapse; font-size:12.5px; } .tbl th { text-align:left; font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--dim); padding:8px 10px; border-bottom:1px solid var(--line2); font-weight:700; } .tbl td { padding:9px 10px; border-bottom:1px solid var(--line); vertical-align:middle; } .tbl tr:hover td { background:var(--panel2); } .tbl td.r, .tbl th.r { text-align:right; }
.scrollx { overflow-x:auto; -webkit-overflow-scrolling:touch; }

/* skeletons: exact shapes of the real thing, shimmering */
.skel { background:linear-gradient(90deg, var(--panel2) 25%, #1A3D5E 50%, var(--panel2) 75%); background-size:800px 100%; animation:shimmer 1.4s linear infinite; border-radius:4px; display:block; }
.skel.t { height:13px; width:60%; margin-bottom:8px; } .skel.s { height:10px; width:40%; } .skel.n { height:30px; width:50%; margin:4px 0 8px; } .skel.row { height:44px; margin:6px 0; border-radius:var(--r); }

/* ---------- tooltips ---------- */
[data-tip] { position:relative; }
#tip { position:fixed; z-index:200; pointer-events:none; background:#F8F6F1; color:#132430; font-size:12px; font-weight:500; padding:7px 10px; border-radius:6px; max-width:260px; line-height:1.4; opacity:0; transform:translateY(4px); transition:opacity .15s, transform .15s var(--ease); box-shadow:0 10px 30px rgba(0,0,0,.4); }
#tip.on { opacity:1; transform:none; }
#tip::after { content:''; position:absolute; left:var(--ax, 50%); bottom:-5px; width:10px; height:10px; background:#F8F6F1; transform:translateX(-50%) rotate(45deg); }
.help { display:inline-grid; place-items:center; width:15px; height:15px; border-radius:50%; border:1px solid var(--line2); color:var(--dim); font-size:9px; font-weight:800; cursor:help; margin-left:6px; vertical-align:middle; }

/* ---------- toasts / modals / palette ---------- */
#toasts { position:fixed; left:50%; bottom:24px; transform:translateX(-50%); display:flex; flex-direction:column; gap:8px; z-index:300; width:min(520px, calc(100vw - 32px)); }
.toast { background:var(--panel); border:1px solid var(--line2); border-left:3px solid var(--gold); padding:12px 14px; border-radius:var(--r2); font-size:13px; animation:rise .3s var(--ease) both; box-shadow:0 12px 40px rgba(0,0,0,.5); display:flex; gap:10px; align-items:center; }
.toast.err { border-left-color:var(--crit); } .toast.ok { border-left-color:var(--ok); } .toast .btn { margin-left:auto; }
.modal-bg { position:fixed; inset:0; background:rgba(3,16,27,.7); backdrop-filter:blur(4px); z-index:150; display:grid; place-items:center; padding:20px; animation:fade .2s both; }
.modal { width:100%; max-width:560px; max-height:90vh; overflow:auto; background:var(--panel); border:1px solid var(--line2); border-radius:12px; padding:22px; animation:rise .3s var(--ease) both; }
.modal h2 { margin:0 0 6px; font-size:17px; } .modal .sub { color:var(--dim); font-size:12.5px; margin-bottom:16px; }
.modal label { display:block; font-size:10.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--dim); margin:12px 0 6px; font-weight:700; }
.modal .acts { display:flex; gap:8px; justify-content:flex-end; margin-top:18px; flex-wrap:wrap; }
#palette .modal { max-width:620px; padding:10px; } #palette input { border:0; background:transparent; font-size:18px; padding:14px 12px; } #palette .res { max-height:50vh; overflow:auto; }
#palette .res .row { padding:10px 12px; margin:0; border-radius:6px; cursor:pointer; border-top:0; } #palette .res .row.on, #palette .res .row:hover { background:var(--gold-dim); }
kbd { font-family:inherit; font-size:10px; border:1px solid var(--line2); border-bottom-width:2px; border-radius:4px; padding:1px 6px; color:var(--dim); }

/* ---------- walkthrough ---------- */
#tour { position:fixed; inset:0; z-index:400; pointer-events:none; }
#tour .tap { position:absolute; inset:0; pointer-events:auto; }
#tour .hole { position:absolute; border-radius:10px; box-shadow:0 0 0 9999px rgba(3,16,27,.78); transition:all .45s var(--ease); pointer-events:none; outline:1px solid var(--gold); }
#tour .box { position:absolute; width:min(340px, calc(100vw - 32px)); background:var(--panel); border:1px solid var(--gold); border-radius:12px; padding:18px; pointer-events:auto; transition:all .45s var(--ease); box-shadow:0 20px 60px rgba(0,0,0,.6); }
#tour .box .step { font-size:10px; letter-spacing:.3em; color:var(--gold); text-transform:uppercase; font-weight:700; } #tour .box h4 { margin:6px 0 6px; font-size:16px; } #tour .box p { margin:0 0 14px; color:var(--dim); font-size:13px; }
#tour .box .acts { display:flex; gap:8px; justify-content:space-between; align-items:center; }

/* ---------- inbox detail / split ---------- */
.split { display:grid; grid-template-columns:minmax(300px, 1fr) 1.4fr; gap:14px; }
.thread .m { padding:12px 0; border-top:1px solid var(--line); } .thread .m:first-child { border-top:0; } .thread .m .h { display:flex; justify-content:space-between; gap:10px; font-size:12px; color:var(--dim); margin-bottom:6px; } .thread .m .h b { color:var(--ink); } .thread .m pre { white-space:pre-wrap; font-family:inherit; font-size:13px; margin:0; color:var(--ink); line-height:1.5; max-height:260px; overflow:auto; }

/* ---------- calendar grid ---------- */
.cal { display:grid; grid-template-columns:repeat(7, minmax(0, 1fr)); gap:4px; } .cal .d .cnt { display:none; } .cal .d { min-height:84px; background:var(--panel2); border:1px solid var(--line); border-radius:6px; padding:6px; font-size:11px; color:var(--dim); position:relative; transition:border-color .15s; } .cal .d:hover { border-color:var(--gold); } .cal .d.today { border-color:var(--gold); } .cal .d .n { font-weight:700; color:var(--ink); } .cal .d.off { opacity:.35; } .cal .d .ev { margin-top:4px; padding:2px 5px; border-radius:3px; background:var(--gold-dim); color:var(--gold); font-size:10px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-weight:600; } .cal .d .ev.wed { background:rgba(95,179,122,.14); color:var(--ok); } .cal .d .ev.mg { background:rgba(106,167,224,.14); color:var(--info); } .cal .d .ev.sale { background:rgba(226,87,74,.14); color:var(--crit); } .cal .hd { font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--dim); padding:4px 6px; font-weight:700; }

/* ---------- mobile ---------- */
nav.bottom { display:none; }
@media (max-width: 920px) {
  #app.on { grid-template-columns:1fr; }
  nav.side { display:none; }
  main { padding:18px 14px 92px; }
  .c4, .c6, .c8 { grid-column:span 12; } .c3 { grid-column:span 6; } .c3 .n { font-size:22px; }
  .split { grid-template-columns:1fr; }
  .cal .d { min-height:58px; } .cal .d .ev { display:none; } .cal .d .cnt { display:grid; position:absolute; right:6px; bottom:6px; min-width:16px; height:16px; border-radius:8px; background:var(--gold); color:var(--navy-ink); font-size:9px; font-weight:800; place-items:center; padding:0 4px; }
  nav.bottom { display:flex; position:fixed; left:0; right:0; bottom:0; background:rgba(4,20,35,.94); backdrop-filter:blur(10px); border-top:1px solid var(--line); padding:6px 4px calc(6px + env(safe-area-inset-bottom)); z-index:40; justify-content:space-around; }
  nav.bottom a.item { flex-direction:column; gap:3px; font-size:9px; letter-spacing:.06em; padding:6px 4px; color:var(--mute); min-width:52px; } nav.bottom a.item.on { color:var(--gold); } nav.bottom .item svg { width:20px; height:20px; } nav.bottom .badge { position:absolute; top:0; right:4px; margin:0; min-width:16px; height:16px; font-size:9px; }
  .topbar h1 { font-size:19px; }
  .stat .n { font-size:26px; }
}
@media (min-width: 921px) and (max-width: 1180px) { .c3 { grid-column:span 6; } .c4 { grid-column:span 6; } .c8 { grid-column:span 12; } }
@media print { nav, .topbar .tools, #toasts, .banner { display:none !important; } body { background:#fff; color:#000; } .card { border-color:#ccc; background:#fff; } }

/* Walkthrough on phones: a fixed sheet above the bottom nav, no computed coordinates. */
@media (max-width: 920px) {
  #tour .box { position:fixed !important; left:16px !important; right:16px !important; top:auto !important; bottom:calc(96px + env(safe-area-inset-bottom)) !important; width:auto !important; max-height:60vh; overflow:auto; }
}