/* Shared operator layout. Same rules as The Mix Yard operator page; only the :root colors are Airnza's. */
:root { color-scheme:light; --heading:#1c2430; --ink:#1c2430; --muted:#3e4c5e; --paper:#f3f0e8; --wash:#e6ebf2; --line:#c5ced8; --surface:#fff; --field-line:#7b8796; --head-bg:#1e3a5f; --head-line:#16304f; --shadow:0 8px 18px rgba(28,36,48,.06); --action:#0d6b2c; --action-hover:#0b5a25; --action-ink:#fff; --on-dark:#fff; --danger:#9f1239; --danger-bg:#fdecef; --danger-line:#f0a8b8; --ok:#1f5a24; --ok-bg:#e9f5ea; --ok-line:#a9cfac; --soon:#5c4120; --soon-bg:#fff4e0; --soon-line:#e8c46a; --sans:"Segoe UI",system-ui,sans-serif; }
:root[data-theme="dark"] { color-scheme:dark; --heading:#e7eef6; --ink:#e7eef6; --muted:#b7c3d4; --paper:#10161d; --wash:#243044; --line:#314056; --surface:#1a2330; --field-line:#6b7a8f; --head-bg:#0b1118; --head-line:#243044; --shadow:0 8px 18px rgba(0,0,0,.35); --action:#2fa35a; --action-hover:#3bb868; --action-ink:#06140b; --danger:#ff9fb1; --danger-bg:#3a1520; --danger-line:#7a2e40; --ok:#9fe0a6; --ok-bg:#16301a; --ok-line:#3d6b42; --soon:#ffe3b8; --soon-bg:#3b2a14; --soon-line:#7a5d1e; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme:dark; --heading:#e7eef6; --ink:#e7eef6; --muted:#b7c3d4; --paper:#10161d; --wash:#243044; --line:#314056; --surface:#1a2330; --field-line:#6b7a8f; --head-bg:#0b1118; --head-line:#243044; --shadow:0 8px 18px rgba(0,0,0,.35); --action:#2fa35a; --action-hover:#3bb868; --action-ink:#06140b; --danger:#ff9fb1; --danger-bg:#3a1520; --danger-line:#7a2e40; --ok:#9fe0a6; --ok-bg:#16301a; --ok-line:#3d6b42; --soon:#ffe3b8; --soon-bg:#3b2a14; --soon-line:#7a5d1e; } }
* { box-sizing:border-box; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:var(--sans); font-variant-numeric:tabular-nums; font-size:15px; line-height:1.5; }
main { max-width:76rem; margin:0 auto; padding:20px 16px 48px; }
.site-head { background:var(--head-bg); border-bottom:1px solid var(--head-line); }
.head-row { max-width:76rem; margin:0 auto; padding:10px 16px; display:flex; align-items:center; gap:14px; color:var(--on-dark); }
.brand-mark { display:grid; place-items:center; width:48px; height:48px; border-radius:50%; background:#fff; color:#1e3a5f; font-weight:800; font-size:24px; }
.head-row > span:not(.brand-mark) { font-weight:700; font-size:1.25rem; text-transform:uppercase; letter-spacing:.04em; }
.theme { display:flex; align-items:center; gap:8px; margin-left:auto; }
.theme label { color:var(--on-dark); margin:0; }
.theme select { width:auto; min-height:40px; background:var(--head-bg); color:var(--on-dark); border-color:var(--field-line); }
.head-btn { min-height:40px; }
.page-title { margin:0; font-weight:800; text-transform:uppercase; color:var(--heading); font-size:clamp(1.8rem,4.5vw,2.5rem); line-height:1.05; }
.section-title { margin:0 0 10px; font-size:1.2rem; text-transform:uppercase; font-weight:800; color:var(--heading); }
.lede { margin:6px 0 16px; color:var(--muted); }
.card { background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:16px; box-shadow:var(--shadow); }
.signin { max-width:28rem; } .signin form > div { margin-bottom:10px; }
.summary { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; margin-bottom:14px; }
.stat { background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:12px 14px; box-shadow:var(--shadow); }
.stat b { display:block; font-size:30px; color:var(--heading); line-height:1.1; }
.stat span { font-size:12px; color:var(--muted); }
.tools { display:flex; flex-wrap:wrap; gap:8px; align-items:end; margin-bottom:12px; }
.tools .field { flex:1 1 220px; } .tools .narrow { flex:0 1 220px; }
label { display:block; font-size:12px; font-weight:700; color:var(--heading); margin-bottom:4px; }
input, select { width:100%; min-height:36px; padding:6px 8px; border:1px solid var(--field-line); border-radius:8px; font:inherit; color:var(--ink); background:var(--surface); }
input:focus-visible, select:focus-visible, .btn:focus-visible, summary:focus-visible { outline:3px solid var(--action); outline-offset:2px; }
.btn { min-height:44px; display:inline-flex; align-items:center; justify-content:center; gap:6px; border-radius:8px; padding:0 12px; font:inherit; font-weight:700; font-size:13px; cursor:pointer; border:1px solid transparent; }
.btn-p { background:var(--action); color:var(--action-ink); } .btn-p:hover { background:var(--action-hover); }
.btn-g { background:var(--surface); color:var(--heading); border-color:var(--field-line); } .btn-g:hover { background:var(--wash); }
.btn-d { background:var(--surface); color:var(--danger); border-color:var(--danger); } .btn-d:hover { background:var(--danger-bg); }
.company { margin-bottom:12px; padding:0; overflow:hidden; }
.company-head { display:flex; flex-wrap:wrap; justify-content:space-between; gap:6px; padding:10px 14px; background:var(--wash); border-bottom:1px solid var(--line); }
.company-head h3 { margin:0; font-size:1.2rem; text-transform:uppercase; line-height:1.15; color:var(--heading); }
.company-head span { font-size:12px; color:var(--muted); }
table { width:100%; border-collapse:collapse; }
th, td { text-align:left; padding:10px 14px; border-bottom:1px solid var(--line); vertical-align:middle; }
th { font-size:12px; color:var(--muted); font-weight:700; }
tr:last-child td { border-bottom:0; }
code { font-size:12px; word-break:break-all; }
.badge { display:inline-block; padding:2px 8px; border-radius:10px; font-size:12px; font-weight:700; border:1px solid; }
.b-active { background:var(--ok-bg); color:var(--ok); border-color:var(--ok-line); }
.b-soon { background:var(--soon-bg); color:var(--soon); border-color:var(--soon-line); }
.b-ended { background:var(--danger-bg); color:var(--danger); border-color:var(--danger-line); }
.b-revoked { background:var(--wash); color:var(--muted); border-color:var(--line); }
.badge.b-restore { font-size:14px; font-weight:700; line-height:1.35; letter-spacing:0; text-transform:none; white-space:normal; max-width:100%; }
.meter { min-width:110px; } .meter small { display:block; color:var(--muted); font-size:12px; }
.bar { height:6px; border-radius:3px; background:var(--wash); overflow:hidden; margin-top:3px; }
.bar i { display:block; height:100%; background:var(--action); }
.bar i.hot { background:var(--danger); }
.actions { display:flex; gap:6px; justify-content:flex-end; flex-wrap:wrap; }
.history { padding:10px 14px; border-top:1px solid var(--line); }
.history h4 { margin:4px 0 8px; font-size:13px; text-transform:uppercase; color:var(--muted); }
.err { color:var(--danger); font-weight:600; min-height:1em; }
.empty { padding:18px; text-align:center; color:var(--muted); }
details.card { margin-top:14px; }
details summary { cursor:pointer; font-weight:700; color:var(--heading); }
.audit { margin-top:10px; }
.sr { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }
.w0{width:0%}
.security { margin-top:14px; }
.security-meta { display:flex; flex-wrap:wrap; gap:8px 18px; align-items:center; margin:0 0 12px; }
.security-meta p { margin:0; }
.security h3 { margin:14px 0 6px; font-size:1rem; text-transform:uppercase; color:var(--heading); }
.security a { color:var(--ink); font-weight:700; }
.security a:focus-visible { outline:3px solid var(--action); outline-offset:2px; }
.security-upload { display:flex; flex-wrap:wrap; gap:8px; align-items:end; margin-top:14px; }
.security-upload .grow { flex:1 1 240px; }
.open-items { margin:0; padding-left:1.2rem; }
.open-items li { margin:6px 0; }
@media (max-width:640px) {
  .summary { grid-template-columns:repeat(2,minmax(0,1fr)); }
  thead { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }
  tr { display:block; padding:10px 14px; border-bottom:1px solid var(--line); }
  td { display:flex; justify-content:space-between; gap:10px; padding:4px 0; border:0; }
  td::before { content:attr(data-label); font-size:12px; font-weight:700; color:var(--muted); }
  .actions { justify-content:stretch; padding-top:8px; } .actions .btn { flex:1; }
  td.actions::before { content:none; }
}

/* Platform costs extras. Brand charcoal/amber for Thetradesplatform. */
:root { --head-bg:#1d2024; --head-line:#121416; --action:#b8861a; --action-hover:#9a7014; --action-ink:#fff; }
.brand-mark { color:#1d2024; }
.brand-nza { color: var(--action); }
.site-sections { display:flex; flex-direction:column; gap:14px; }
.site-block { margin:0; padding:0; overflow:hidden; border-left:4px solid var(--action); }
.site-block-head { padding:12px 14px; background:var(--wash); border-bottom:1px solid var(--line); }
.site-block-head h3 { margin:0; font-size:1.15rem; text-transform:uppercase; color:var(--heading); }
.site-totals { display:flex; flex-wrap:wrap; gap:6px 16px; margin:6px 0 0; font-weight:800; color:var(--heading); }
.site-block .sub { margin:4px 0 0; font-size:12px; color:var(--muted); font-weight:600; }
.costs td, .costs th { font-size:13px; }
.badge.b-priced { background:var(--ok-bg); color:var(--ok); border-color:var(--ok-line); }
.badge.b-manual { background:var(--soon-bg); color:var(--soon); border-color:var(--soon-line); }
.badge.b-unknown { background:var(--danger-bg); color:var(--danger); border-color:var(--danger-line); }
.manual-form { display:flex; flex-wrap:wrap; gap:10px; align-items:end; }
.manual-form > div { flex:0 1 160px; }
.manual-form > div.grow { flex:1 1 220px; }
.money-unknown { color:var(--danger); font-weight:700; }
#sources { margin:10px 0 0; padding-left:18px; color:var(--muted); }
#sources a { color:var(--action); }
#notices { margin-top:14px; }
#notices textarea { width:100%; min-height:88px; padding:6px 8px; border:1px solid var(--field-line); border-radius:8px; font:inherit; color:var(--ink); background:var(--surface); }
#notices .sub { font-weight:600; color:var(--muted); }
.notice-apps { border:1px solid var(--line); border-radius:8px; margin:12px 0; padding:8px 12px; }
.notice-apps legend { font-size:12px; font-weight:700; color:var(--heading); padding:0 4px; }
.notice-apps label, .notice-mail { display:flex; align-items:center; gap:8px; min-height:44px; font-size:14px; font-weight:600; color:var(--ink); }
.notice-apps input, .notice-mail input { width:44px; height:44px; min-width:44px; }
.notice-actions { display:flex; flex-wrap:wrap; gap:8px; margin:8px 0 12px; }
.email-preview { white-space:pre-wrap; background:var(--wash); color:var(--ink); border:1px solid var(--line); border-radius:8px; padding:12px; font-family:ui-monospace, "Cascadia Code", monospace; font-size:13px; margin:0 0 12px; }
.notice-list { margin-top:8px; }
#n-when { max-width:280px; }
.admin-nav { display:flex; flex-wrap:wrap; gap:8px; margin:0 0 16px; }
.admin-nav button { min-height:44px; padding:0 14px; border-radius:3px; border:1px solid var(--field-line); background:var(--surface); color:var(--heading); font:inherit; font-weight:700; letter-spacing:.04em; text-transform:uppercase; cursor:pointer; }
.admin-nav button[aria-current="page"] { background:var(--head-bg); color:var(--on-dark); border-color:var(--head-bg); }
.capacity-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:12px; }
.capacity-card .bar { height:8px; }
.capacity-card h3 { margin:0; font-size:1.15rem; text-transform:uppercase; color:var(--heading); }
.metric { margin-top:12px; }
.metric-top { display:flex; justify-content:space-between; gap:8px; font-size:13px; }
.metric-top span:last-child { color:var(--muted); text-align:right; }
.bar i.ok { background:var(--ok); }
.bar i.warn { background:var(--soon-line); }
.bar i.hot { background:var(--danger); }
.metric-note { margin:4px 0 0; font-size:13px; }
.metric-note.warn { color:var(--soon); }
.metric-note.hot { color:var(--danger); }
.metric-note a { color:inherit; font-weight:700; }
.demo-banner { background:var(--soon-bg); color:var(--soon); border:1px solid var(--soon-line); border-radius:8px; padding:10px 12px; font-weight:700; }
#capacity-limits { margin-top:14px; }
.limit-grid { display:grid; gap:12px; margin-top:12px; }
.limit-plan { border:1px solid var(--line); border-radius:8px; padding:10px; }
.limit-plan h3 { margin:0 0 8px; font-size:14px; text-transform:uppercase; color:var(--heading); }
.limit-fields { display:flex; flex-wrap:wrap; gap:8px; }
.limit-fields label { flex:1 1 140px; font-size:12px; }
.limit-note { margin:8px 0 0; color:var(--muted); font-size:12px; }