:root{
  --bg:#050b07;
  --bg-2:#081109;
  --panel:#0a150d;
  --panel-2:#0d1c11;
  --line:#1d4023;
  --line-soft:#122a17;
  --accent:#39ff6a;
  --accent-dim:#1f8a3c;
  --accent-soft:rgba(57,255,106,.12);
  --accent2:#00d9e5;
  --accent2-dim:#0b7a82;
  --warn:#ffb100;
  --danger:#ff5050;
  --danger-dim:#7a2020;
  --text:#daffe6;
  --text-2:#8fd39f;
  --mute:#547a5c;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg);color:var(--text);
  font-family:'IBM Plex Mono',monospace;
  min-height:100vh;
  position:relative;
}

/* ---- CRT texture (decorative, ignored for reduced-motion/no visual impact on function) ---- */
.scanlines{
  position:fixed;inset:0;pointer-events:none;z-index:50;
  background:repeating-linear-gradient(0deg,rgba(0,0,0,.14) 0px,rgba(0,0,0,.14) 1px,transparent 1px,transparent 3px);
  mix-blend-mode:overlay;
}
.crt-vignette{
  position:fixed;inset:0;pointer-events:none;z-index:49;
  background:radial-gradient(ellipse at center,transparent 55%,rgba(0,0,0,.55) 130%);
}

/* ---- Header ---- */
.hdr{
  border-bottom:1px solid var(--line);
  background:linear-gradient(180deg,var(--panel-2),var(--bg));
  padding:26px 24px 20px;
  text-align:center;
}
.hdr-title{
  font-family:'Orbitron',sans-serif;font-weight:900;font-size:clamp(26px,4vw,38px);
  letter-spacing:.14em;color:var(--accent);
  text-shadow:0 0 12px rgba(57,255,106,.55),0 0 28px rgba(57,255,106,.25);
}
.hdr-mark{color:var(--accent2);margin-right:6px;text-shadow:0 0 10px rgba(0,217,229,.6)}
.hdr-sub{
  margin-top:6px;font-family:'IBM Plex Mono',monospace;font-size:11.5px;letter-spacing:.32em;
  color:var(--mute);text-transform:uppercase;
}

/* ---- Layout ---- */
.wrap{max-width:1360px;margin:0 auto;padding:28px 20px 60px;display:flex;flex-direction:column;gap:22px}

/* ---- Panel shell: cut top-left / bottom-right corners, HUD-style ---- */
.panel,.panel-group > details{
  position:relative;
  background:var(--panel);
  border:1px solid var(--line);
  clip-path:polygon(16px 0,100% 0,100% calc(100% - 16px),calc(100% - 16px) 100%,0 100%,0 16px);
  filter:drop-shadow(0 0 10px rgba(57,255,106,.10));
}
.panel-group{display:flex;flex-direction:column;gap:22px}
.panel-head{
  display:flex;align-items:center;gap:12px;justify-content:space-between;
  padding:16px 22px;border-bottom:1px solid var(--line);
  background:linear-gradient(90deg,var(--accent-soft),transparent 60%);
}
.panel-head h2{
  margin:0;font-family:'Orbitron',sans-serif;font-weight:700;font-size:16px;letter-spacing:.1em;
  color:var(--text);text-transform:uppercase;
}
.panel-tag{
  font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.14em;color:var(--accent2);
  border:1px solid var(--accent2-dim);padding:3px 9px;text-transform:uppercase;
}
.panel-body{padding:22px}

/* ---- Collapsible sections (Field Location / Data / Saved Checks) ---- */
.collapsible summary{
  cursor:pointer;list-style:none;
  display:flex;align-items:center;gap:10px;padding:16px 22px;
  font-family:'Orbitron',sans-serif;font-weight:700;font-size:13.5px;letter-spacing:.08em;
  color:var(--text);text-transform:uppercase;
}
.collapsible summary::-webkit-details-marker{display:none}
.collapsible summary::after{content:"▾";margin-left:auto;flex:none;color:var(--mute);font-size:14px;transition:transform .2s}
.collapsible[open] summary::after{transform:rotate(180deg)}
.collapsible-title{flex:1}
.collapsible-hint{color:var(--mute);text-transform:none;letter-spacing:0;font-size:12px;font-family:'IBM Plex Mono',monospace;font-weight:400}
.collapsible-count{
  flex:none;background:var(--accent-dim);color:#04120a;font-size:11px;font-weight:700;
  padding:2px 9px;border-radius:2px;
}
.collapsible > .panel-body{
  padding:0 22px 22px;border-top:1px dashed var(--line);
  overflow:hidden;transition:height .3s cubic-bezier(.16,1,.3,1);
}

/* ---- Inputs ---- */
.help{color:var(--text-2);font-size:14.5px;line-height:1.55;margin:0 0 14px}
.help-tight{margin-bottom:0}
.help b{color:var(--accent)}
.input-grid{display:grid;grid-template-columns:1fr 250px;gap:0}
.input-main{padding-right:22px;border-right:1px dashed var(--line)}
.term-textarea{
  display:block;width:100%;min-height:220px;resize:vertical;
  background:#020603;color:var(--accent);border:1px solid var(--line);
  font-family:'IBM Plex Mono',monospace;font-size:13.5px;line-height:1.6;padding:14px;
  transition:border-color .2s ease,box-shadow .2s ease;
}
.term-textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 14px rgba(57,255,106,.25)}
.term-textarea-small{min-height:100px;margin-top:14px}
.error-line{margin-top:14px;color:var(--danger);font-size:14px}
.input-controls{display:flex;flex-direction:column;gap:14px;padding-left:22px}
.field-label{
  font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--mute);margin-bottom:-6px;
}
.field-label-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:-6px}
.field-label-row .field-label{margin-bottom:0}
.add-link{
  background:none;border:none;padding:0;cursor:pointer;
  font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--accent2);transition:text-shadow .2s ease,color .2s ease;
}
.add-link:hover{text-shadow:0 0 8px rgba(0,217,229,.6)}
.term-select{
  width:100%;appearance:none;-webkit-appearance:none;text-align:left;
  font-family:'IBM Plex Mono',monospace;font-size:13.5px;
  color:var(--text);background:var(--bg-2);border:1px solid var(--line);padding:9px 12px;cursor:pointer;
  transition:border-color .2s ease,color .2s ease;
  clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px);
}
.term-select:hover,.term-select:focus{outline:none;border-color:var(--accent);color:var(--accent)}
.term-select option{background:var(--bg-2);color:var(--text)}

/* ---- Buttons ---- */
.btn{
  font-family:'Orbitron',sans-serif;font-weight:700;font-size:12px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--text);background:var(--bg-2);border:1px solid var(--line);padding:12px 16px;cursor:pointer;
  clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px);
  transition:border-color .2s ease,color .2s ease,box-shadow .2s ease,background .2s ease;
}
.btn-primary{border-color:var(--accent);color:var(--accent)}
.btn-primary:hover{box-shadow:0 0 12px rgba(57,255,106,.4);background:var(--accent-soft)}
.btn-good{border-color:var(--accent2);color:var(--accent2)}
.btn-good:hover{box-shadow:0 0 12px rgba(0,217,229,.35)}
.btn-good:disabled{opacity:.35;cursor:not-allowed;box-shadow:none;color:var(--mute);border-color:var(--line)}
.btn-ghost{color:var(--mute);width:auto}
.btn-ghost:hover{color:var(--accent);border-color:var(--accent-dim)}
.inline-row{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:12px}
.inline-status{font-size:12px;color:var(--mute)}
.inline-status.done{color:var(--accent)}
.inline-status.error{color:var(--danger)}

/* ---- Results panel: grows in via JS ---- */
.panel-results{height:0;overflow:hidden;opacity:0;transform:scaleY(.96);transform-origin:top}
.section-div{
  display:flex;align-items:center;gap:10px;margin:22px 0 12px;
  font-family:'Orbitron',sans-serif;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--accent2);
}
.section-div:first-child{margin-top:0}
.section-div::after{content:"";flex:1;height:1px;background:var(--line);order:1}
.section-tag{order:2;color:var(--mute);font-weight:700;letter-spacing:.1em}

.stat-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:12px}
.stat-grid-secondary{margin-top:8px;grid-template-columns:repeat(3,1fr)}
.stat-grid > div{
  border:1px solid var(--line);background:var(--bg-2);padding:12px 14px;
  border-top:2px solid var(--line);
}
.stat-grid .stat-buy{border-top-color:var(--accent)}
.stat-grid .stat-sell{border-top-color:var(--accent2)}
.stat-grid .k{font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--mute);margin-bottom:6px}
.stat-grid .v{font-size:16px;color:var(--text);font-variant-numeric:tabular-nums}
.stat-grid .v.market-hi{color:var(--accent)}
.stat-grid .sell-tile .v.market-hi,.stat-grid .stat-sell .v.market-hi{color:var(--accent2)}
.stat-grid .v.spread-neg{color:var(--danger)}
@media (max-width:760px){
  .stat-grid{grid-template-columns:repeat(2,1fr)}
  .stat-grid-secondary{grid-template-columns:repeat(1,1fr)}
}

.market-status{
  margin-top:14px;font-size:13px;color:var(--text-2);display:flex;align-items:center;gap:8px;
}
.market-status .dot{width:7px;height:7px;border-radius:50%;background:var(--accent);animation:pulse 1.4s ease-in-out infinite}
.market-status.error{color:var(--danger)}
.market-status.done .dot{animation:none;box-shadow:0 0 6px var(--accent)}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.3}}
.note{margin-top:12px;color:var(--mute);font-size:12.5px;line-height:1.6}

/* ---- Donut + legend ---- */
.donut-wrap{display:flex;align-items:center;gap:32px;flex-wrap:wrap;margin-top:6px}
.donut{flex:none}
.donut-track{fill:none;stroke:var(--bg-2)}
.donut-seg{fill:none;transition:stroke-dasharray .7s cubic-bezier(.16,1,.3,1),stroke-dashoffset .7s cubic-bezier(.16,1,.3,1)}
.donut-total{fill:var(--text);font-family:'Orbitron',sans-serif;font-weight:700;font-size:17px}
.donut-sub{fill:var(--mute);font-family:'IBM Plex Mono',monospace;font-size:8px;letter-spacing:.1em}
.legend{
  list-style:none;flex:0 1 auto;margin:0;padding:0;
  display:grid;grid-template-columns:10px auto;align-items:center;column-gap:8px;row-gap:7px;
  font-family:'IBM Plex Mono',monospace;font-size:13px;
}
.legend li{display:contents}
.legend-swatch{width:10px;height:10px}
.legend-row{display:inline-block;white-space:nowrap;vertical-align:middle}
.legend-name{display:inline-block;width:150px;vertical-align:middle;color:var(--text-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.legend-pct{display:inline-block;width:42px;vertical-align:middle;text-align:right;color:var(--accent);font-weight:700;font-variant-numeric:tabular-nums}
.legend-val{display:inline-block;width:88px;vertical-align:middle;text-align:right;color:var(--text);font-variant-numeric:tabular-nums}
@media (max-width:560px){
  .legend{width:100%}
  .legend-row{white-space:normal}
  .legend-name{width:auto;max-width:calc(100% - 130px)}
  .legend-val{display:none}
}

/* ---- Tables (shared: breakdown table + history table) ---- */
.table-wrap{overflow-x:auto}
.table-wrap table{width:100%;border-collapse:collapse;font-family:'IBM Plex Mono',monospace;font-size:14px;min-width:600px}
.table-wrap th,.table-wrap td{padding:10px 12px;text-align:left;border-bottom:1px dashed var(--line);white-space:nowrap}
.table-wrap th{color:var(--accent2);text-transform:uppercase;letter-spacing:.06em;font-size:11.5px;border-bottom:1px solid var(--line)}
.table-wrap td{color:var(--text-2)}
.table-wrap tbody tr:last-child td{border-bottom:none}
.table-wrap td.num,.table-wrap th.num{text-align:right;font-variant-numeric:tabular-nums}
.table-wrap tr.total-row td{color:var(--text);font-weight:700;border-top:2px solid var(--accent-dim);border-bottom:none}
.table-wrap th.group-start,.table-wrap td.group-start{border-left:1px solid var(--line)}
.table-wrap .cell-main{color:var(--text);font-variant-numeric:tabular-nums}
.table-wrap .cell-sub{display:block;font-size:11px;color:var(--mute);margin-top:2px}
.table-wrap tr.total-row .cell-sub{color:var(--accent2)}
.table-wrap td.market-cell.best-buy .cell-main{color:var(--accent);font-weight:700}
.table-wrap td.market-cell.best-sell .cell-sub{color:var(--accent2);font-weight:700}
.thin-flag{color:var(--danger);font-size:10px;font-weight:700;cursor:help}
.table-wrap tbody tr:hover td{background:rgba(57,255,106,.04)}

/* ---- Saved Checks history table ---- */
.history-toolbar{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;padding-top:16px}
.history-toolbar-actions{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
/* fixed, explicit column widths that sum to less than the panel's full
   width (not width:100%) — any leftover page width is left blank to the
   right of the whole table instead of getting dumped into one column, which
   is what caused the awkward gap before the action buttons. */
.history-table{margin-top:14px;table-layout:fixed}
.history-table th:nth-child(1),.history-table td:nth-child(1){width:78px}
.history-table th:nth-child(2),.history-table td:nth-child(2){width:200px}
.history-table th:nth-child(3),.history-table td:nth-child(3){width:90px}
.history-table th:nth-child(4),.history-table td:nth-child(4){width:140px;padding-right:22px}
.history-table th:nth-child(5),.history-table td:nth-child(5){width:400px;padding-left:20px}
.history-table th:nth-child(6),.history-table td:nth-child(6){width:104px}
.history-table .cell-main + .cell-sub{display:inline-block;margin-left:6px}
.history-table tbody tr.history-daygroup:hover td,
.history-table tbody tr.history-sysgroup:hover td{background:inherit}
.history-daygroup td{
  background:rgba(0,217,229,.07);color:var(--accent2);
  font-family:'Orbitron',sans-serif;font-size:11px;letter-spacing:.1em;text-transform:uppercase;font-weight:700;
  padding:10px 12px;border-bottom:1px solid var(--line);white-space:nowrap;
}
.history-sysgroup td{
  background:rgba(255,255,255,.02);color:var(--text);
  font-family:'IBM Plex Mono',monospace;font-weight:700;font-size:14px;
  padding:8px 12px;display:flex;align-items:center;justify-content:space-between;gap:12px;white-space:nowrap;
}
.history-copy{
  flex:none;font-family:'Orbitron',sans-serif;font-size:10px;letter-spacing:.08em;text-transform:uppercase;
  background:none;border:1px solid var(--line);color:var(--mute);padding:4px 10px;cursor:pointer;
  transition:color .2s ease,border-color .2s ease;
}
.history-copy:hover{color:var(--accent2);border-color:var(--accent2-dim)}
.history-empty{font-size:13px;color:var(--mute);white-space:normal;text-align:center;padding:18px 12px}
.history-breakdown-cell{overflow:hidden;text-overflow:ellipsis;color:var(--text-2)}
.history-actions{display:flex;gap:6px;justify-content:flex-end;white-space:nowrap}
.history-edit,.history-del,.history-row-copy{
  background:none;border:1px solid var(--line);color:var(--mute);
  font-size:12px;line-height:1;padding:5px 8px;cursor:pointer;transition:color .2s ease,border-color .2s ease;
}
.history-edit:hover,.history-row-copy:hover{color:var(--accent2);border-color:var(--accent2-dim)}
.history-del:hover{color:var(--danger);border-color:var(--danger-dim)}
.history-save,.history-cancel{
  font-family:'Orbitron',sans-serif;font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;
  background:none;padding:5px 10px;cursor:pointer;transition:color .2s ease,border-color .2s ease,box-shadow .2s ease;
}
.history-save{border:1px solid var(--accent);color:var(--accent)}
.history-save:hover{box-shadow:0 0 8px rgba(57,255,106,.3)}
.history-cancel{border:1px solid var(--line);color:var(--mute)}
.history-cancel:hover{color:var(--accent2);border-color:var(--accent2-dim)}
.history-edit-cell{display:flex;gap:8px;flex-wrap:wrap}
.history-edit-cell select{
  background:var(--bg-2);color:var(--text);border:1px solid var(--line);
  font-family:'IBM Plex Mono',monospace;font-size:12px;padding:5px 8px;cursor:pointer;max-width:180px;
}

@media (max-width:760px){
  .input-grid{grid-template-columns:1fr}
  .input-main{padding-right:0;border-right:none;border-bottom:1px dashed var(--line);padding-bottom:18px;margin-bottom:18px}
  .input-controls{padding-left:0}
}
@media (prefers-reduced-motion:reduce){
  .donut-seg,.market-status .dot{animation:none;transition:none}
}