/* Ballast app surfaces. Inherits tokens.css + base.css (the Clippyprom system). */

.app-wrap{max-width:1180px;margin-inline:auto;padding:96px clamp(18px,4vw,36px) 80px;position:relative;z-index:2}

/* top bar */
.appbar{position:fixed;top:0;left:0;right:0;z-index:40;height:66px;display:flex;align-items:center;
  background:rgba(10,10,12,.72);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  border-bottom:1px solid var(--line)}
.appbar-in{width:100%;max-width:1180px;margin-inline:auto;padding-inline:clamp(18px,4vw,36px);
  display:flex;align-items:center;justify-content:space-between}
.appbar .nav-links{gap:1.4rem}
.mode-tag{font-family:var(--f-mono);font-size:var(--t-xs);letter-spacing:.1em;text-transform:uppercase;
  padding:.3em .7em;border-radius:var(--r-pill);border:1px solid}
.mode-tag.paper{color:var(--i-blue);border-color:rgba(91,140,255,.4);background:rgba(91,140,255,.1)}
.mode-tag.live{color:var(--st-paid);border-color:rgba(87,227,154,.4);background:rgba(87,227,154,.1)}

/* logo mark */
.mk{width:28px;height:28px;flex:none}
.brand{font-weight:700;font-size:1.08rem;letter-spacing:-.01em;display:flex;align-items:center;gap:.55rem}

/* page head */
.page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:1rem;margin-bottom:var(--s-4);flex-wrap:wrap}

/* stat row */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px;margin-bottom:var(--s-3)}
.stat-cell{background:var(--coal);border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--s-3);position:relative;overflow:hidden}
.stat-cell::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:radial-gradient(120% 60% at 50% -20%,rgba(255,255,255,.05),transparent 60%)}
.stat-cell .stat-l{margin-bottom:.5rem}

/* generic card */
.card{background:var(--coal);border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--s-3);margin-bottom:14px}
.card h3{margin-bottom:.2rem}

/* table */
.tbl{width:100%;border-collapse:separate;border-spacing:0;font-size:var(--t-sm)}
.tbl th,.tbl td{padding:.75rem .8rem;text-align:left;border-bottom:1px solid var(--line);vertical-align:middle}
.tbl thead th{font-family:var(--f-mono);font-size:var(--t-xs);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);font-weight:500}
.tbl tr:last-child td{border-bottom:0}
.tbl .num{font-family:var(--f-mono)}
.tbl-wrap{overflow-x:auto}
@media(max-width:640px){.tbl{min-width:560px}}

/* health dot */
.hdot{display:inline-flex;align-items:center;gap:.45em;font-size:var(--t-xs);color:var(--muted)}
.hdot i{width:8px;height:8px;border-radius:50%;display:inline-block}
.hdot.ok i{background:var(--st-paid);box-shadow:0 0 8px var(--st-paid)}
.hdot.bad i{background:var(--st-rejected);box-shadow:0 0 8px var(--st-rejected)}
.hdot.off i{background:var(--st-locked)}

/* forms */
.form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:.9rem;align-items:end}
label.fld{display:flex;flex-direction:column;gap:.35rem;font-size:var(--t-xs);color:var(--muted)}
label.fld input,label.fld select{background:var(--ink);border:1px solid var(--line-2);border-radius:var(--r-sm);
  color:var(--text);font-family:var(--f-body);font-size:var(--t-sm);padding:.6em .75em;outline:none;transition:border-color .25s}
label.fld input:focus,label.fld select:focus{border-color:var(--mint)}
.row-check{display:flex;align-items:center;gap:.5rem;font-size:var(--t-sm);color:var(--text)}

.sparkbar{display:flex;align-items:flex-end;gap:2px;height:44px}
.sparkbar i{flex:1;background:var(--irid-lin);border-radius:2px 2px 0 0;min-height:2px;opacity:.85}

.subtle{color:var(--faint);font-size:var(--t-xs)}
.mb0{margin-bottom:0}
.flex{display:flex;gap:.6rem;align-items:center;flex-wrap:wrap}
.pill.buy{color:var(--st-paid);border-color:rgba(87,227,154,.35);background:rgba(87,227,154,.08)}
.pill.sell{color:var(--st-rejected);border-color:rgba(255,107,138,.35);background:rgba(255,107,138,.08)}