/* TWIX Chain Trading Tools — shared production skin
   Matches the current twixchain.com mainnet information architecture:
   dark hardened-network presentation, cyan/blue execution accents,
   monospace network labels, restrained panels, and shared site navigation. */
:root{
  --twix-bg:#05060b;
  --twix-bg-2:#080b14;
  --twix-panel:#0b1020;
  --twix-panel-2:#0e1527;
  --twix-panel-3:#121b31;
  --twix-line:rgba(147,177,235,.16);
  --twix-line-strong:rgba(112,230,255,.24);
  --twix-text:#f4f8ff;
  --twix-muted:#9aa9c0;
  --twix-dim:#66748d;
  --twix-cyan:#70e6ff;
  --twix-blue:#7495ff;
  --twix-violet:#a876ff;
  --twix-green:#75f3b4;
  --twix-warn:#ffd783;
  --twix-red:#ff9ea8;
  --twix-shadow:0 22px 70px rgba(0,0,0,.38);
  --twix-radius:12px;
  --twix-radius-sm:8px;
  --twix-font:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --twix-mono:"SFMono-Regular",Consolas,"Liberation Mono",monospace;

  /* Map legacy page tokens into one TWIX visual system. */
  --bg-void:var(--twix-bg);
  --bg-panel:var(--twix-panel);
  --bg-panel-raised:var(--twix-panel-2);
  --grid-line:var(--twix-line);
  --grid-line-soft:#111b28;
  --text-primary:var(--twix-text);
  --text-muted:var(--twix-muted);
  --text-dim:var(--twix-dim);
  --long:var(--twix-cyan);
  --long-dim:#153e50;
  --short:var(--twix-red);
  --short-dim:#512632;
  --flat:var(--twix-muted);
  --warn:var(--twix-warn);

  --navy:var(--twix-bg);
  --navy-deep:#03060a;
  --navy-2:var(--twix-panel);
  --navy-3:var(--twix-panel-2);
  --navy-panel:var(--twix-panel);
  --navy-line:var(--twix-line);
  --line:var(--twix-line);
  --line-strong:var(--twix-line-strong);
  --brass:var(--twix-cyan);
  --brass-bright:#a8eaff;
  --brass-soft:#31687c;
  --brass-dim:rgba(112,230,255,.28);
  --teal:var(--twix-green);
  --cream:var(--twix-text);
  --cream-dim:var(--twix-muted);
  --danger:var(--twix-red);

  --bg:var(--twix-bg);
  --bg-2:var(--twix-bg-2);
  --surface:var(--twix-panel);
  --surface-2:var(--twix-panel-2);
  --panel:var(--twix-panel);
  --panel-raised:var(--twix-panel-2);
  --steel:var(--twix-line-strong);
  --hairline:var(--twix-line);
  --ink:var(--twix-text);
  --ink-dim:var(--twix-muted);
  --ink-faint:var(--twix-dim);
  --amber:var(--twix-cyan);
  --amber-dim:#25546a;
  --cyan:var(--twix-cyan);
  --green:var(--twix-green);
  --red:var(--twix-red);
}

html{color-scheme:dark;background:var(--twix-bg);scroll-behavior:smooth;}
body{
  background:
    radial-gradient(900px 540px at 76% -8%, rgba(116,149,255,.12), transparent 66%),
    radial-gradient(760px 520px at 8% 0%, rgba(112,230,255,.08), transparent 68%),
    linear-gradient(180deg,var(--twix-bg),#050910 68%,#04070b) !important;
  color:var(--twix-text) !important;
  font-family:var(--twix-font) !important;
  min-height:100vh;
}
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:-1;opacity:.24;
  background-image:linear-gradient(rgba(112,230,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(112,230,255,.035) 1px,transparent 1px);
  background-size:48px 48px;
  mask-image:linear-gradient(to bottom,black,transparent 70%);
}
::selection{background:rgba(112,230,255,.25);color:#fff;}

/* ---- canonical site shell ---- */
.twix-skip{position:absolute;left:-9999px;top:8px;z-index:9999;background:#fff;color:#000;padding:8px 12px;border-radius:6px;}
.twix-skip:focus{left:10px;}
.twix-site-shell{position:sticky;top:0;z-index:100;border-bottom:1px solid var(--twix-line);background:rgba(5,7,13,.88);backdrop-filter:blur(18px);}
.twix-network-strip{border-bottom:1px solid rgba(112,230,255,.12);color:var(--twix-muted);font:600 10px/1 var(--twix-mono);letter-spacing:.13em;text-transform:uppercase;}
.twix-network-strip-inner{max-width:1460px;margin:0 auto;padding:9px 22px;display:flex;gap:9px;align-items:center;}
.twix-live-dot{width:7px;height:7px;border-radius:50%;background:var(--twix-green);box-shadow:0 0 14px rgba(117,243,180,.75);}
.twix-site-nav{max-width:1460px;margin:0 auto;padding:14px 22px;display:flex;align-items:center;gap:14px;}
.twix-site-brand{display:flex;align-items:center;gap:11px;min-width:198px;text-decoration:none;color:var(--twix-text);}
.twix-site-brand img{width:43px;height:43px;filter:drop-shadow(0 0 22px rgba(112,230,255,.22))}.twix-site-brand>span{display:block}.twix-site-brand strong{display:block;font:800 13px/1.1 var(--twix-font);letter-spacing:.1em;}
.twix-site-brand small{display:block;margin-top:3px;color:var(--twix-dim);font:800 8px/1.1 var(--twix-mono);letter-spacing:.07em;text-transform:uppercase;white-space:nowrap;}
.twix-site-links{margin-left:auto;display:flex;align-items:center;gap:3px;}
.twix-site-links a{color:var(--twix-muted);text-decoration:none;font-size:11px;font-weight:650;padding:9px 7px;border-radius:7px;transition:.16s ease;white-space:nowrap;}
.twix-site-links a:hover,.twix-site-links a[aria-current="page"]{color:var(--twix-text);background:rgba(112,230,255,.07);}
.twix-site-links a[aria-current="page"]{box-shadow:inset 0 0 0 1px rgba(112,230,255,.16);}
.twix-site-actions{display:flex;align-items:center;gap:8px;}
.twix-site-action{display:inline-flex;align-items:center;justify-content:center;text-decoration:none;border:1px solid var(--twix-line-strong);border-radius:8px;padding:9px 12px;color:var(--twix-text);font:650 11px/1 var(--twix-font);background:rgba(15,25,38,.78);}
.twix-site-action.primary{border-color:rgba(112,230,255,.4);background:linear-gradient(135deg,rgba(112,230,255,.18),rgba(116,149,255,.15));}
.twix-menu-btn{display:none;border:1px solid var(--twix-line);background:var(--twix-panel);color:var(--twix-text);border-radius:8px;padding:8px 10px;font-size:16px;cursor:pointer;}

.twix-site-footer{border-top:1px solid var(--twix-line);margin-top:48px;background:rgba(3,6,10,.62);}
.twix-site-footer-inner{max-width:1460px;margin:0 auto;padding:30px 22px 34px;display:grid;grid-template-columns:1fr auto;gap:18px;align-items:end;}
.twix-footer-brand strong{display:block;font-size:13px;letter-spacing:.1em;}
.twix-footer-brand span{display:block;margin-top:7px;color:var(--twix-muted);font:500 10px/1.5 var(--twix-mono);}
.twix-footer-links{display:flex;gap:14px;flex-wrap:wrap;justify-content:flex-end;}
.twix-footer-links a{color:var(--twix-muted);font-size:11px;text-decoration:none;}
.twix-footer-links a:hover{color:var(--twix-cyan);}

/* ---- shared tool presentation ---- */
body > header,
.shell-header,
header.top,
.plate,
.topbar{
  border-color:var(--twix-line) !important;
}
body > header{background:linear-gradient(180deg,rgba(15,25,38,.72),rgba(5,8,13,.1)) !important;}
.shell-header{background:rgba(8,13,20,.62);}
.plate{background:linear-gradient(180deg,var(--twix-panel-2),var(--twix-panel)) !important;box-shadow:var(--twix-shadow);}

.panel,.card,.tt-card,.tool-card,.result-card,.readout,.bt-panel,.info-panel{
  border-color:var(--twix-line) !important;
  box-shadow:0 12px 36px rgba(0,0,0,.14);
}
.panel,.card,.tt-card,.tool-card,.readout,.bt-panel,.info-panel{background:linear-gradient(180deg,rgba(15,25,38,.94),rgba(9,16,25,.97)) !important;}
.tool-card:hover{border-color:rgba(112,230,255,.38) !important;background:linear-gradient(180deg,rgba(18,31,48,.98),rgba(9,16,25,.98)) !important;transform:translateY(-2px);}

input,select,textarea,.tt-input,.tt-select{
  background:#050a11 !important;color:var(--twix-text) !important;border-color:var(--twix-line-strong) !important;
}
input:focus,select:focus,textarea:focus,.tt-input:focus,.tt-select:focus{outline:2px solid rgba(112,230,255,.35) !important;outline-offset:1px;border-color:rgba(112,230,255,.55) !important;}
button{transition:transform .12s ease,border-color .12s ease,background .12s ease,color .12s ease;}
button:not(:disabled):active{transform:translateY(1px);}
.btn-primary,.fire-btn,#runBtn,.primary{
  background:linear-gradient(135deg,#66dbff,#6f9aff) !important;color:#03101a !important;border-color:transparent !important;font-weight:800 !important;box-shadow:0 10px 28px rgba(116,149,255,.18);
}
.btn-primary:hover,.fire-btn:hover,#runBtn:hover{filter:brightness(1.06);}
.btn-secondary,.btn,.info-btn,.back-link,.mode-tabs button,.side-toggle button,.segmented button,.toggle-pair button{
  border-color:var(--twix-line-strong) !important;
}
.status-pill,.badge,.tag,.panel-title,.panel-label,.card-eyebrow,.brand,.shell-brand,.rivet-line,.data-source{
  font-family:var(--twix-mono) !important;
}
.status-pill,.badge,.tag,.panel-title,.panel-label,.card-eyebrow{letter-spacing:.09em !important;text-transform:uppercase;}
.pos,.positive,.hi,.brand span,.shell-brand b,.tagline em{color:var(--twix-cyan) !important;}
.neg,.negative{color:var(--twix-red) !important;}

/* Home hub becomes the canonical toolkit landing page. */
#app{max-width:1180px !important;}
#app .topbar{padding-top:24px;}
#app .hero{text-align:left;max-width:820px;padding-top:46px;}
#app .hero h1{font-family:var(--twix-font) !important;font-style:normal;font-weight:780;letter-spacing:-.035em;font-size:clamp(38px,7vw,68px);line-height:.98;}
#app .hero .tagline{font-family:var(--twix-font) !important;font-style:normal;color:var(--twix-cyan) !important;font-size:15px;font-weight:650;}
#app .hero .sub{margin:0;max-width:670px;color:var(--twix-muted);font-size:15px;}
#app .route-svg{margin-left:0;opacity:.68;}
#app .tools-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
@media(min-width:980px){#app .tools-grid{grid-template-columns:repeat(3,minmax(0,1fr));}}
.tool-card .icon{color:var(--twix-cyan) !important;}
.tool-card h3{font-family:var(--twix-font) !important;font-weight:720 !important;}
.tool-card .open-btn{color:var(--twix-cyan) !important;}

/* Standalone page content alignment */
.wrap{max-width:1180px !important;}
body > header{padding-left:max(20px,calc((100vw - 1180px)/2 + 20px)) !important;padding-right:max(20px,calc((100vw - 1180px)/2 + 20px)) !important;}
.shell-header{padding-left:max(20px,calc((100vw - 1180px)/2 + 20px)) !important;padding-right:max(20px,calc((100vw - 1180px)/2 + 20px)) !important;}

.twix-tool-context{max-width:1180px;margin:22px auto -8px;padding:0 20px;display:flex;align-items:center;justify-content:space-between;gap:12px;color:var(--twix-muted);font:600 10px/1.3 var(--twix-mono);letter-spacing:.1em;text-transform:uppercase;}
.twix-tool-context a{color:var(--twix-cyan);text-decoration:none;}


@media(max-width:1260px){
  .twix-site-brand small{display:none;}
  .twix-site-actions .twix-site-action:not(.primary){display:none;}
  .twix-site-nav{gap:10px;}
  .twix-site-links a{font-size:10px;padding-left:6px;padding-right:6px;}
}
@media(max-width:1040px){
  .twix-site-nav{flex-wrap:wrap;gap:12px;}
  .twix-menu-btn{display:block;margin-left:auto;}
  .twix-site-actions{display:none;}
  .twix-site-links{display:none;flex-basis:100%;order:5;margin:0;padding-top:8px;border-top:1px solid var(--twix-line);flex-direction:column;align-items:stretch;}
  .twix-site-shell.open .twix-site-links{display:flex;}
  .twix-site-links a{padding:11px 8px;}
  .twix-site-footer-inner{grid-template-columns:1fr;}
  .twix-footer-links{justify-content:flex-start;}
}
@media(max-width:680px){
  .twix-network-strip-inner,.twix-site-nav{padding-left:16px;padding-right:16px;}
  .twix-site-brand span{display:none;}
  #app .tools-grid{grid-template-columns:1fr;}
  .twix-site-footer-inner{padding-left:16px;padding-right:16px;}
  .twix-tool-context{padding-left:16px;padding-right:16px;}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto !important;animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;}}
.twix-site-action{cursor:pointer}.twix-tool-toast{position:fixed;z-index:1000;right:18px;bottom:18px;max-width:min(390px,calc(100vw - 36px));padding:13px 15px;border:1px solid var(--twix-line-strong);border-radius:12px;background:#0a1020;box-shadow:var(--twix-shadow);color:var(--twix-text);font-size:12px;opacity:0;transform:translateY(8px);transition:.2s;pointer-events:none}.twix-tool-toast.show{opacity:1;transform:none}