/* The app: the desk with its tabs. Scope left, strips and gates right; forms on manila-edged panels. */
body.app { background: linear-gradient(#0A0E10, #080B0D); min-height: 100vh; }
.bar { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 10px; padding: 10px var(--gutter); background: #0a0e10ee; backdrop-filter: blur(6px); border-bottom: 1px solid var(--line); }
.bar .brand { font-weight: 700; font-size: 15px; letter-spacing: .14em; text-decoration: none; margin-right: 8px; }
.bar .grow { flex: 1; }
.bar .key { min-height: 34px; padding: 0 12px; }
.tabs { display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; }
.tabs a { padding: 8px 10px; border-radius: 3px; color: var(--dim); text-decoration: none; font: 700 11.5px var(--mono); letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
.tabs a:hover { color: var(--ink); }
.tabs a[aria-current="page"] { color: #04140F; background: var(--phos); }
.tabs a .lk { margin-left: 4px; opacity: .6; }
@media (max-width: 900px) {
  .bar { flex-wrap: wrap; }
  .tabs { order: 5; width: 100%; }
}

main { padding: 18px var(--gutter) 48px; max-width: 1440px; margin: 0 auto; }
h2 { margin: 0 0 8px; font: 700 20px var(--mono); }
h2 small { color: var(--dim); font-size: 12px; font-weight: 400; margin-left: 8px; }
.h { margin: 18px 0 8px; font: 700 11px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--dim); display: flex; justify-content: space-between; }
.h small { letter-spacing: .02em; text-transform: none; }
.sub { color: var(--dim); font-size: 14px; max-width: 70ch; margin: 0 0 16px; }
.small { font-size: 12px; color: var(--dim); }
.err { color: #ffb4a6; font: 400 13px var(--mono); min-height: 1em; margin: 8px 0 0; }

.lock { margin: 0 0 18px; padding: 12px 14px; border: 1px solid #f0a63a55; border-left: 4px solid var(--hold); border-radius: 4px; background: #f0a63a0d; color: #f3d3a0; font: 400 13px/1.5 var(--mono); }
.lock b { color: var(--hold); }
.pane.locked > :not(.lock) { opacity: .35; pointer-events: none; filter: saturate(.4); }

/* ---------------------------------------------------------------- watch view */
.watch-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(320px, 1fr); gap: clamp(16px, 2.5vw, 36px); align-items: start; }
.scope-box { position: sticky; top: 70px; }
#scope { width: 100%; aspect-ratio: 1 / 1; cursor: crosshair; }
.readout { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px 18px; color: var(--dim); font-size: 12px; }
.readout span:first-child { color: var(--phos); }
.cardrow { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.stat { padding: 10px 12px; border: 1px solid var(--line); border-radius: 4px; background: #0d1416; }
.stat span { display: block; color: var(--dim); font: 400 10.5px var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.stat b { font-size: 17px; }
.up { color: var(--clear); } .dn { color: var(--off-dn); }
.gates { display: grid; gap: 6px; }
.gate { display: grid; grid-template-columns: 28px 1fr auto; gap: 10px; align-items: center; padding: 8px 10px; border: 1px solid var(--line); border-radius: 4px; font: 400 12.5px var(--mono); }
.gate .g { display: grid; place-items: center; width: 24px; height: 24px; border: 1px solid #355d55; border-radius: 3px; color: #4a7a70; font-weight: 700; }
.gate.on { border-color: #3fc07f66; } .gate.on .g { background: var(--clear); color: #03140c; border-color: var(--clear); }
.gate .empty { color: var(--faint); }
.strips { display: grid; gap: 6px; }
.links { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 14px; }
.links a:not(.key) { color: var(--dim); font: 400 12px var(--mono); }
@media (max-width: 980px) { .watch-grid { grid-template-columns: 1fr; } .scope-box { position: relative; top: 0; max-width: 620px; margin: 0 auto; width: 100%; } }
@media (max-width: 520px) { .cardrow { grid-template-columns: repeat(2, 1fr); } }

/* ---------------------------------------------------------------- forms */
.cols { display: grid; grid-template-columns: minmax(300px, 460px) 1fr; gap: clamp(16px, 3vw, 40px); align-items: start; }
@media (max-width: 900px) { .cols { grid-template-columns: 1fr; } }
.form { padding: 18px; border: 1px solid var(--line); border-radius: 6px; background: #0d1416; }
.form h2 { margin-bottom: 6px; }
fieldset { border: 0; padding: 0; margin: 0 0 14px; }
legend, label { display: block; margin-bottom: 6px; color: var(--dim); font: 700 11px var(--mono); letter-spacing: .1em; text-transform: uppercase; }
label { margin-bottom: 12px; }
input, select { display: block; width: 100%; margin-top: 6px; padding: 10px 11px; border: 1px solid var(--line-2); border-radius: 3px; background: #091012; color: var(--ink); font: 400 14px var(--mono); text-transform: none; letter-spacing: 0; }
input:focus { outline: none; border-color: var(--phos-dim); box-shadow: 0 0 0 3px #7ff0c61a; }
input:invalid:not(:placeholder-shown) { border-color: #e5573f88; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }
.seg { display: flex; flex-wrap: wrap; gap: 6px; }
.seg button { min-height: 36px; padding: 0 12px; border: 1px solid var(--line-2); border-radius: 3px; background: #0f181b; color: var(--dim); font: 700 12px var(--mono); cursor: pointer; }
.seg button[aria-pressed="true"] { color: #04140F; background: var(--phos); border-color: var(--phos); }
.seg button:disabled { opacity: .4; cursor: not-allowed; }
.custom { margin: 0 0 14px; border-top: 1px dashed var(--line-2); padding-top: 12px; }
.custom summary { cursor: pointer; font: 700 12px var(--mono); color: var(--ink); margin-bottom: 10px; }
.price { margin: 12px 0; font-size: 14px; color: var(--strip); }

/* the order: printed like a strip */
.order { position: relative; padding: 18px 18px 18px 26px; background: linear-gradient(var(--strip), var(--strip-2)); color: var(--strip-ink); border-radius: 3px; box-shadow: 0 20px 50px -24px #000; }
.order::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 8px; background: var(--hold); border-radius: 3px 0 0 3px; }
.order.paid::before { background: var(--clear); }
.order h3 { margin: 0 0 4px; font: 700 13px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--strip-dim); }
.order .amt { margin: 6px 0; font: 700 clamp(26px, 3.4vw, 38px) var(--mono); }
.order dl { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; margin: 12px 0; font-size: 13px; }
.order dt { color: var(--strip-dim); } .order dd { margin: 0; font-family: var(--mono); word-break: break-all; }
.order .row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.order .key { background: #1c1a14; color: var(--strip); border-color: #1c1a14; }
.order .key.lead { background: #17703F; border-color: #17703F; color: #fff; box-shadow: none; }
.order .state { margin-top: 12px; font: 400 13px var(--mono); }
.order .warn { margin-top: 10px; font-size: 12.5px; color: #6b3f05; }

/* ---------------------------------------------------------------- results and lists */
.result { min-width: 0; }
.result .big { font: 700 44px var(--mono); margin: 4px 0; }
.kv { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; margin: 12px 0 18px; }
.kv div { padding: 10px 12px; border: 1px solid var(--line); border-radius: 4px; }
.kv span { display: block; color: var(--dim); font: 400 10.5px var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.kv b { font: 700 15px var(--mono); }
.compare { font: 400 13px var(--mono); color: var(--dim); }
.list { display: grid; gap: 6px; margin-top: 14px; }
.row-item { display: grid; grid-template-columns: 90px 1fr auto; gap: 12px; align-items: center; padding: 10px 12px; border: 1px solid var(--line); border-radius: 4px; font: 400 13px var(--mono); }
.row-item a { color: var(--phos); }
.row-item .r { text-align: right; }
.empty-note { padding: 18px; border: 1px dashed var(--line-2); border-radius: 4px; color: var(--dim); font: 400 13px var(--mono); }
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 4px; }
.lt { width: 100%; border-collapse: collapse; font: 400 13px var(--mono); min-width: 640px; }
.lt th, .lt td { padding: 10px 12px; text-align: left; border-bottom: 1px solid var(--line); }
.lt th { color: var(--dim); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; background: #0d1416; }
.lt .r { text-align: right; }