/* ==========================================================================
   GoldDesk Engine — the assay bench.
   Gold is assayed for purity. A strategy is assayed for edge. The interface
   is built as an instrument panel: quiet housing, one bright readout.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700&family=Inter+Tight:wght@400;500;600&family=JetBrains+Mono:wght@400;500;700&display=swap');

:root{
  --ink:#0A0D13;        /* deepest housing */
  --slab:#11151E;       /* panel face */
  --raise:#171C27;      /* raised control */
  --line:#232A38;       /* hairline */
  --line-soft:#1A202B;
  --bone:#E8E5DC;       /* warm off-white — never pure white */
  --mute:#7E879B;
  --dim:#5A6376;
  --brass:#C8A44D;      /* antique gold, the single bright readout */
  --brass-dim:#8A7233;
  --jade:#46B08A;
  --rust:#D2664E;
  --azure:#5B9BD5;
  --violet:#8B7BC8;

  --r-sm:3px; --r:5px; --r-lg:8px;
  --shadow:0 1px 0 rgba(255,255,255,.03) inset, 0 12px 32px -18px rgba(0,0,0,.9);

  --display:'Archivo',system-ui,sans-serif;
  --body:'Inter Tight',system-ui,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,monospace;

  --ease:cubic-bezier(.22,.68,.32,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--ink); color:var(--bone);
  font-family:var(--body); font-size:14px; line-height:1.55;
  -webkit-font-smoothing:antialiased;
  background-image:
    radial-gradient(1100px 500px at 78% -12%, rgba(200,164,77,.055), transparent 62%),
    radial-gradient(800px 420px at 4% 105%, rgba(91,155,213,.035), transparent 60%);
  background-attachment:fixed;
}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
::selection{background:rgba(200,164,77,.25)}

/* --- typographic scale ---------------------------------------------------- */
.eyebrow{
  font-family:var(--display); font-size:10px; font-weight:600;
  letter-spacing:.20em; text-transform:uppercase; color:var(--dim);
}
h1,h2,h3{font-family:var(--display); margin:0; font-weight:600; letter-spacing:-.012em}
h1{font-size:23px; font-stretch:110%}
h2{font-size:15px; letter-spacing:.02em}
h3{font-size:12.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--mute)}
.num{font-family:var(--mono); font-variant-numeric:tabular-nums; letter-spacing:-.02em}
.muted{color:var(--mute)}
.dim{color:var(--dim)}
.tiny{font-size:11.5px}

/* --- shell ---------------------------------------------------------------- */
.shell{display:grid; grid-template-columns:212px 1fr; min-height:100vh}

.rail{
  border-right:1px solid var(--line-soft); background:rgba(9,12,17,.75);
  backdrop-filter:blur(8px); position:sticky; top:0; height:100vh;
  display:flex; flex-direction:column; padding:20px 0;
}
.brand{padding:0 20px 22px; display:flex; align-items:center; gap:10px}
.brand-mark{
  width:26px; height:26px; border-radius:var(--r-sm); flex:none;
  background:linear-gradient(150deg,var(--brass),#7A6228);
  display:grid; place-items:center;
  font-family:var(--display); font-weight:700; font-size:13px; color:#0B0E13;
}
.brand-name{font-family:var(--display); font-weight:600; font-size:13.5px; letter-spacing:.02em}
.brand-sub{font-size:10px; color:var(--dim); letter-spacing:.13em; text-transform:uppercase}

.nav{display:flex; flex-direction:column; gap:1px; padding:0 10px}
.nav a{
  display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:var(--r);
  color:var(--mute); font-size:13px; transition:background .16s var(--ease),color .16s var(--ease);
  position:relative;
}
.nav a svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.6;flex:none}
.nav a:hover{background:var(--raise); color:var(--bone)}
.nav a.on{color:var(--bone); background:var(--raise)}
.nav a.on::before{
  content:''; position:absolute; left:-10px; top:9px; bottom:9px; width:2px;
  background:var(--brass); border-radius:0 2px 2px 0;
}
.rail-foot{margin-top:auto; padding:16px 20px 0; border-top:1px solid var(--line-soft)}

.main{padding:26px 30px 70px; max-width:1420px}
.head{display:flex; align-items:flex-end; justify-content:space-between; gap:20px; margin-bottom:22px}
.head p{margin:5px 0 0; color:var(--mute); font-size:13px; max-width:62ch}

/* --- panels --------------------------------------------------------------- */
.panel{
  background:var(--slab); border:1px solid var(--line-soft); border-radius:var(--r-lg);
  box-shadow:var(--shadow);
}
.panel-hd{
  padding:13px 17px; border-bottom:1px solid var(--line-soft);
  display:flex; align-items:center; justify-content:space-between; gap:14px;
}
.panel-bd{padding:17px}
.grid{display:grid; gap:14px}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
.split{display:grid; grid-template-columns:minmax(0,1.55fr) minmax(0,1fr); gap:14px}

/* --- stat readouts -------------------------------------------------------- */
.stats{display:grid; gap:1px; background:var(--line-soft); border-radius:var(--r-lg); overflow:hidden}
.stat{background:var(--slab); padding:14px 16px}
.stat .k{font-family:var(--display); font-size:9.5px; letter-spacing:.17em;
  text-transform:uppercase; color:var(--dim); display:block; margin-bottom:6px}
.stat .v{font-family:var(--mono); font-size:20px; font-weight:500; letter-spacing:-.03em;
  font-variant-numeric:tabular-nums; display:block}
.stat .sub{font-size:11px; color:var(--dim); margin-top:3px; display:block}
.pos{color:var(--jade)} .neg{color:var(--rust)} .gold{color:var(--brass)} .info{color:var(--azure)}

/* --- controls ------------------------------------------------------------- */
label.f{display:block; margin-bottom:12px}
label.f > span{
  display:block; font-family:var(--display); font-size:9.5px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--dim); margin-bottom:5px;
}
input[type=text],input[type=password],input[type=number],input[type=date],select,textarea{
  width:100%; background:var(--ink); border:1px solid var(--line);
  border-radius:var(--r); padding:8px 10px; font-size:13px; color:var(--bone);
  transition:border-color .15s var(--ease), box-shadow .15s var(--ease);
}
input:focus,select:focus,textarea:focus{
  outline:none; border-color:var(--brass-dim);
  box-shadow:0 0 0 3px rgba(200,164,77,.10);
}
input.num-in{font-family:var(--mono)}
select{appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--mute) 50%),linear-gradient(135deg,var(--mute) 50%,transparent 50%);
  background-position:calc(100% - 15px) 50%,calc(100% - 10px) 50%;
  background-size:5px 5px,5px 5px; background-repeat:no-repeat; padding-right:30px}

.btn{
  display:inline-flex; align-items:center; gap:7px; padding:8px 14px;
  background:var(--raise); border:1px solid var(--line); border-radius:var(--r);
  font-family:var(--display); font-size:12px; font-weight:500; letter-spacing:.02em;
  cursor:pointer; transition:all .15s var(--ease);
}
.btn:hover{border-color:var(--dim); background:#1D2330}
.btn:active{transform:translateY(1px)}
.btn:disabled{opacity:.42; cursor:not-allowed; transform:none}
.btn svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:1.7}
.btn-primary{background:var(--brass); border-color:var(--brass); color:#0B0E13; font-weight:600}
.btn-primary:hover{background:#D6B25A; border-color:#D6B25A}
.btn-ghost{background:transparent}
.btn-danger:hover{border-color:var(--rust); color:var(--rust)}
.btn-sm{padding:5px 10px; font-size:11px}
.btn-row{display:flex; gap:8px; flex-wrap:wrap; align-items:center}

.chip{
  display:inline-flex; align-items:center; gap:5px; padding:2.5px 8px; border-radius:100px;
  font-family:var(--mono); font-size:10.5px; letter-spacing:.02em;
  border:1px solid var(--line); color:var(--mute); background:var(--ink);
}
.chip.ok{color:var(--jade); border-color:rgba(70,176,138,.32)}
.chip.bad{color:var(--rust); border-color:rgba(210,102,78,.32)}
.chip.warn{color:var(--brass); border-color:rgba(200,164,77,.32)}
.chip.run{color:var(--azure); border-color:rgba(91,155,213,.32)}
.dot{width:5px;height:5px;border-radius:50%;background:currentColor;flex:none}
.dot.pulse{animation:pulse 1.4s var(--ease) infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.22}}

/* --- tables --------------------------------------------------------------- */
table{width:100%; border-collapse:collapse; font-size:12.5px}
thead th{
  text-align:left; padding:8px 11px; font-family:var(--display); font-size:9.5px;
  letter-spacing:.15em; text-transform:uppercase; color:var(--dim); font-weight:600;
  border-bottom:1px solid var(--line); white-space:nowrap; position:sticky; top:0;
  background:var(--slab); z-index:1;
}
tbody td{padding:8px 11px; border-bottom:1px solid var(--line-soft)}
tbody tr:last-child td{border-bottom:0}
tbody tr{transition:background .12s var(--ease)}
tbody tr:hover{background:rgba(255,255,255,.022)}
td.n,th.n{text-align:right; font-family:var(--mono); font-variant-numeric:tabular-nums}
.scroll{overflow:auto; max-height:440px}
.scroll::-webkit-scrollbar{width:9px;height:9px}
.scroll::-webkit-scrollbar-thumb{background:var(--line); border-radius:5px}
.scroll::-webkit-scrollbar-track{background:transparent}

/* --- THE SIGNATURE: assay strip ------------------------------------------- */
/* One thin bar per trade, jade above the line, rust below, height scaled to R.
   It reads like a spectrometer trace of the strategy's whole life.            */
.assay{
  position:relative; height:78px; background:var(--ink); border:1px solid var(--line-soft);
  border-radius:var(--r); overflow:hidden;
}
.assay::after{
  content:''; position:absolute; left:0; right:0; top:50%; height:1px;
  background:var(--line); pointer-events:none;
}
.assay svg{display:block; width:100%; height:100%}
.assay .bar{transform-origin:center; }
.assay-legend{
  display:flex; justify-content:space-between; margin-top:7px;
  font-family:var(--mono); font-size:10px; color:var(--dim);
}

/* --- charts --------------------------------------------------------------- */
.chart{width:100%; display:block}
.chart .axis{stroke:var(--line-soft); stroke-width:1}
.chart .glab{font-family:var(--mono); font-size:9.5px; fill:var(--dim)}
.eq-path{fill:none; stroke:var(--brass); stroke-width:1.6; stroke-linejoin:round}
.eq-area{fill:url(#eqfill)}
.dd-path{fill:rgba(210,102,78,.14); stroke:var(--rust); stroke-width:1}
.mc-path{fill:none; stroke:rgba(126,135,155,.20); stroke-width:.8}
.mc-median{fill:none; stroke:var(--brass); stroke-width:1.8}

/* --- monthly matrix ------------------------------------------------------- */
.matrix{display:grid; grid-template-columns:repeat(auto-fill,minmax(94px,1fr)); gap:6px}
.mcell{
  border:1px solid var(--line-soft); border-radius:var(--r); padding:9px 10px;
  background:var(--ink); position:relative; overflow:hidden;
}
.mcell .m{font-family:var(--mono); font-size:10px; color:var(--dim); letter-spacing:.04em}
.mcell .p{font-family:var(--mono); font-size:14px; font-weight:500; margin-top:3px; letter-spacing:-.02em}
.mcell .w{font-size:10.5px; color:var(--mute); margin-top:2px}
.mcell::before{content:''; position:absolute; inset:0; opacity:.11; pointer-events:none}
.mcell.up::before{background:var(--jade)}
.mcell.down::before{background:var(--rust)}
.mcell.flat::before{background:var(--dim)}

/* --- validation ledger ---------------------------------------------------- */
.case{
  display:grid; grid-template-columns:22px 1fr auto; gap:13px; align-items:start;
  padding:13px 0; border-bottom:1px solid var(--line-soft);
}
.case:last-child{border-bottom:0}
.case .mark{
  width:20px;height:20px;border-radius:50%;display:grid;place-items:center;
  border:1px solid var(--line); margin-top:1px; flex:none;
}
.case.pass .mark{border-color:rgba(70,176,138,.4); color:var(--jade)}
.case.fail .mark{border-color:rgba(210,102,78,.4); color:var(--rust)}
.case .mark svg{width:11px;height:11px;stroke:currentColor;fill:none;stroke-width:2.4}
.case .t{font-family:var(--display); font-size:13px; font-weight:500}
.case .w{color:var(--mute); font-size:12px; margin-top:2px; max-width:78ch}
.case .d{font-family:var(--mono); font-size:10.5px; color:var(--dim); margin-top:4px}

/* --- code editor ---------------------------------------------------------- */
.CodeMirror{
  height:auto; min-height:430px; background:var(--ink)!important; color:var(--bone)!important;
  font-family:var(--mono)!important; font-size:12.5px!important; line-height:1.65!important;
  border:1px solid var(--line); border-radius:var(--r);
}
.CodeMirror-gutters{background:var(--slab)!important; border-right:1px solid var(--line-soft)!important}
.CodeMirror-linenumber{color:var(--dim)!important}
.CodeMirror-cursor{border-left:1.5px solid var(--brass)!important}
.CodeMirror-selected{background:rgba(200,164,77,.14)!important}
.cm-s-default .cm-keyword{color:var(--violet)!important}
.cm-s-default .cm-def,.cm-s-default .cm-variable-2{color:var(--azure)!important}
.cm-s-default .cm-string{color:var(--jade)!important}
.cm-s-default .cm-number{color:var(--brass)!important}
.cm-s-default .cm-comment{color:var(--dim)!important; font-style:italic}
.cm-s-default .cm-operator{color:var(--mute)!important}

/* --- upload dropzone ------------------------------------------------------ */
.drop{
  border:1.5px dashed var(--line); border-radius:var(--r-lg); padding:34px 20px;
  text-align:center; transition:all .2s var(--ease); cursor:pointer; background:var(--ink);
}
.drop:hover,.drop.over{border-color:var(--brass-dim); background:rgba(200,164,77,.035)}
.drop svg{width:26px;height:26px;stroke:var(--dim);fill:none;stroke-width:1.4; margin-bottom:10px}
.drop.over svg{stroke:var(--brass)}

/* --- quality meter -------------------------------------------------------- */
.meter{height:3px; background:var(--line-soft); border-radius:3px; overflow:hidden; margin-top:7px}
.meter i{display:block; height:100%; border-radius:3px; transition:width .8s var(--ease)}

/* --- auth screens --------------------------------------------------------- */
.auth-wrap{min-height:100vh; display:grid; place-items:center; padding:26px}
.auth{width:100%; max-width:388px}
.auth .panel-bd{padding:26px}
.auth-brand{text-align:center; margin-bottom:22px}
.auth-brand .brand-mark{width:38px;height:38px;font-size:17px;margin:0 auto 12px}
.qr{background:#fff; padding:10px; border-radius:var(--r); width:fit-content; margin:0 auto 14px}
.qr img{display:block; width:170px; height:170px}
.secret{
  font-family:var(--mono); font-size:12px; letter-spacing:.09em; text-align:center;
  background:var(--ink); border:1px solid var(--line); border-radius:var(--r);
  padding:9px; word-break:break-all; color:var(--brass);
}
.codes{display:grid; grid-template-columns:1fr 1fr; gap:7px; margin:14px 0}
.codes span{
  font-family:var(--mono); font-size:12px; padding:7px 9px; background:var(--ink);
  border:1px solid var(--line); border-radius:var(--r); text-align:center; letter-spacing:.05em;
}
.otp{
  font-family:var(--mono)!important; font-size:22px!important; text-align:center;
  letter-spacing:.34em!important; padding:11px!important;
}

/* --- notices -------------------------------------------------------------- */
.note{
  padding:10px 13px; border-radius:var(--r); font-size:12.5px; margin-bottom:14px;
  border:1px solid var(--line); background:var(--ink); display:flex; gap:9px; align-items:flex-start;
}
.note.err{border-color:rgba(210,102,78,.34); color:#EFA694}
.note.ok{border-color:rgba(70,176,138,.34); color:#8FD4BA}
.note.warn{border-color:rgba(200,164,77,.30); color:#DCC display}
.note.warn{color:#DEC98A}
.note b{font-weight:600}

.empty{padding:46px 20px; text-align:center; color:var(--mute)}
.empty h3{margin-bottom:6px; color:var(--bone); text-transform:none; letter-spacing:0; font-size:14px}

/* --- toast ---------------------------------------------------------------- */
#toasts{position:fixed; right:18px; bottom:18px; display:flex; flex-direction:column;
  gap:8px; z-index:90; max-width:340px}
.toast{
  background:var(--raise); border:1px solid var(--line); border-left:2px solid var(--brass);
  border-radius:var(--r); padding:10px 13px; font-size:12.5px; box-shadow:var(--shadow);
  animation:toast-in .3s var(--ease);
}
.toast.err{border-left-color:var(--rust)}
.toast.ok{border-left-color:var(--jade)}
@keyframes toast-in{from{opacity:0; transform:translateX(16px)}to{opacity:1;transform:none}}

/* --- motion --------------------------------------------------------------- */
.rise{opacity:0; animation:rise .5s var(--ease) forwards}
@keyframes rise{from{opacity:0; transform:translateY(9px)}to{opacity:1;transform:none}}
.rise:nth-child(1){animation-delay:.02s} .rise:nth-child(2){animation-delay:.07s}
.rise:nth-child(3){animation-delay:.12s} .rise:nth-child(4){animation-delay:.17s}
.rise:nth-child(5){animation-delay:.22s} .rise:nth-child(6){animation-delay:.27s}
.rise:nth-child(7){animation-delay:.32s} .rise:nth-child(8){animation-delay:.37s}

.spin{animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001s!important; transition-duration:.001s!important}
}

/* --- responsive ----------------------------------------------------------- */
@media(max-width:1080px){
  .split{grid-template-columns:1fr} .g4{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:820px){
  .shell{grid-template-columns:1fr}
  .rail{position:static; height:auto; flex-direction:row; align-items:center;
        overflow-x:auto; padding:11px 13px; border-right:0; border-bottom:1px solid var(--line-soft)}
  .brand{padding:0 16px 0 0} .brand-sub{display:none}
  .nav{flex-direction:row; padding:0} .nav a span{display:none}
  .nav a.on::before{display:none} .rail-foot{display:none}
  .main{padding:18px 15px 60px}
  .g2,.g3,.g4{grid-template-columns:1fr}
  .head{flex-direction:column; align-items:flex-start}
}
:focus-visible{outline:2px solid var(--brass); outline-offset:2px; border-radius:2px}