html,body{height:100%}
body{display:flex}

/* ── Hacker layers ── */
#dbMatrix{position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:0;opacity:.07}
[data-theme="light"] #dbMatrix{opacity:.035}
#dbNet{position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:0}

/* ── Boot overlay ── */
#dbBoot{position:fixed;inset:0;z-index:9999;background:#010a05;display:flex;flex-direction:column;align-items:center;justify-content:center;font-family:'JetBrains Mono',monospace;gap:0;transition:opacity .5s ease}
#dbBoot.out{opacity:0;pointer-events:none}
.boot-row{font-size:12px;color:rgba(34,197,94,.7);line-height:2;opacity:0;animation:boot-in .2s ease forwards}
.boot-row .ok{color:#4ade80}.boot-row .run{color:#fbbf24}
.boot-logo{font-size:28px;font-weight:900;color:#22c55e;letter-spacing:.15em;margin-bottom:20px;text-shadow:0 0 30px rgba(34,197,94,.5)}

/* ── Dashboard glitch ── */
.dash-glitch{position:relative;display:inline-block}
.dash-glitch::before,.dash-glitch::after{
  content:attr(data-text);position:absolute;top:0;left:0;width:100%;
  background:transparent;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
.dash-glitch::before{
  background:linear-gradient(135deg,#4ade80,#22c55e);-webkit-background-clip:text;background-clip:text;
  animation:glitch-1 7s infinite;clip-path:polygon(0 0,100% 0,100% 45%,0 45%);
}
.dash-glitch::after{
  background:linear-gradient(135deg,#4ade80,#22c55e);-webkit-background-clip:text;background-clip:text;
  animation:glitch-2 7s infinite;clip-path:polygon(0 55%,100% 55%,100% 100%,0 100%);
}

@keyframes glitch-1 {
  0%,90%,100% { transform:translate(0); opacity:0; }
  91% { transform:translate(-3px,1px); opacity:.8; }
  93% { transform:translate(3px,-1px); opacity:.6; }
  95% { transform:translate(-2px,0); opacity:.7; }
  97% { transform:translate(2px,1px); opacity:.5; }
  99% { transform:translate(0); opacity:0; }
}
@keyframes glitch-2 {
  0%,90%,100% { transform:translate(0); opacity:0; }
  91% { transform:translate(3px,-1px); opacity:.7; }
  93% { transform:translate(-3px,1px); opacity:.5; }
  95% { transform:translate(2px,0); opacity:.6; }
  97% { transform:translate(-2px,-1px); opacity:.4; }
  99% { transform:translate(0); opacity:0; }
}

/* ── Dashboard scan line ── */
.db-scan{position:absolute;left:0;right:0;height:2px;
  background:linear-gradient(90deg,transparent,rgba(34,197,94,.3),transparent);
  animation:scan 8s linear infinite;pointer-events:none;z-index:2}

@keyframes scan {
  0%   { top:-2px; opacity:0; }
  5%   { opacity:1; }
  95%  { opacity:.6; }
  100% { top:100%; opacity:0; }
}

/* ── Terminal accent on sidebar ── */
#sidebar{position:relative}
.sidebar-scanline{position:absolute;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(34,197,94,.25),transparent);
  animation:scan 10s linear infinite;pointer-events:none;top:0}
.term-stat{font-family:'JetBrains Mono',monospace;font-size:10px;color:rgba(34,197,94,.35);
  animation:hex-fade 4s ease-in-out infinite}

/* ── Hex accent labels ── */
.stat-hex{font-family:'JetBrains Mono',monospace;font-size:9px;color:rgba(34,197,94,.4);
  position:absolute;top:6px;right:8px;animation:hex-fade 3s ease-in-out infinite}
@keyframes hex-fade{0%,100%{opacity:.2}50%{opacity:.6}}

/* ── Sidebar ── */
#sidebar{width:260px;flex-shrink:0;background:var(--sidebar);border-right:1px solid var(--border);display:flex;flex-direction:column;height:100vh;position:sticky;top:0;transition:background .3s}
.nav-item{
  display:flex;align-items:center;gap:10px;padding:9px 14px;border-radius:3px;cursor:pointer;
  transition:all .2s;color:var(--text2);font-size:13px;font-weight:500;border:1px solid transparent;
  background:transparent;width:100%;text-align:left;font-family:'JetBrains Mono',monospace;
}
.nav-item:hover{background:rgba(34,197,94,0.07);color:#22c55e;border-color:rgba(34,197,94,0.15)}
.nav-item.active{
  background:rgba(34,197,94,0.1);color:#22c55e;font-weight:700;
  border-color:rgba(34,197,94,0.3);box-shadow:0 0 10px rgba(34,197,94,0.1);
}
.nav-item svg{flex-shrink:0}

/* ── Main ── */
#main{flex:1;overflow-y:auto;min-height:100vh}
.page{display:none}.page.active{display:block}

/* ── Cards ── */
.card{
  background:var(--card);border:1px solid var(--border);border-radius:6px;
  box-shadow:var(--shadow);position:relative;
}
.card::before,.card::after{
  content:'';position:absolute;width:9px;height:9px;border-style:solid;
  border-color:rgba(34,197,94,0.3);pointer-events:none;z-index:1;transition:border-color .2s;
}
.card::before{top:2px;left:2px;border-width:1.5px 0 0 1.5px}
.card::after {bottom:2px;right:2px;border-width:0 1.5px 1.5px 0}
.card-hover{transition:border-color .2s,transform .15s}
.card-hover:hover{border-color:rgba(34,197,94,0.28)}
.card-hover:hover::before,.card-hover:hover::after{border-color:rgba(34,197,94,0.55)}
.stat-card{
  background:linear-gradient(135deg,rgba(34,197,94,0.06),rgba(22,163,74,0.02));
  border:1px solid rgba(34,197,94,0.2);border-radius:6px;position:relative;
}
.stat-card::before{
  content:'';position:absolute;top:2px;left:2px;
  width:8px;height:8px;border-top:1.5px solid rgba(34,197,94,0.4);border-left:1.5px solid rgba(34,197,94,0.4);
  pointer-events:none;
}

/* ── Buttons ── */
.btn-p{
  background:rgba(34,197,94,0.09);color:#4ade80;
  font-family:'JetBrains Mono',monospace;font-weight:700;
  cursor:pointer;transition:all .2s;
  border:1px solid rgba(34,197,94,0.5);
  text-transform:uppercase;letter-spacing:.04em;
  clip-path:polygon(6px 0,100% 0,100% calc(100% - 6px),calc(100% - 6px) 100%,0 100%,0 6px);
}
.btn-p:hover{
  background:rgba(34,197,94,0.17);transform:translateY(-1px);
  box-shadow:0 0 18px rgba(34,197,94,0.38);color:#86efac;
  filter:none;
}
.btn-g{
  border:1px solid rgba(34,197,94,0.25);color:rgba(34,197,94,0.7);
  background:transparent;cursor:pointer;transition:all .2s;
  font-family:'JetBrains Mono',monospace;font-weight:600;
  text-transform:uppercase;letter-spacing:.04em;
  clip-path:polygon(5px 0,100% 0,100% calc(100% - 5px),calc(100% - 5px) 100%,0 100%,0 5px);
}
.btn-g:hover{border-color:rgba(34,197,94,0.6);color:#22c55e;background:rgba(34,197,94,0.06);box-shadow:0 0 10px rgba(34,197,94,0.15)}
.btn-red{
  border:1px solid rgba(239,68,68,0.35);color:#f87171;background:transparent;
  cursor:pointer;transition:all .2s;font-family:'JetBrains Mono',monospace;
  font-weight:600;text-transform:uppercase;letter-spacing:.04em;
  clip-path:polygon(5px 0,100% 0,100% calc(100% - 5px),calc(100% - 5px) 100%,0 100%,0 5px);
}
.btn-red:hover{border-color:#f87171;background:rgba(239,68,68,0.08);box-shadow:0 0 10px rgba(239,68,68,0.2)}
.btn-red:disabled{opacity:.4;cursor:not-allowed}

/* ── Toggle ── */
.t-toggle{width:44px;height:24px;border-radius:999px;border:1px solid var(--border2);background:var(--card2);position:relative;cursor:pointer;transition:all .3s;flex-shrink:0}
.t-toggle::after{content:'';position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:linear-gradient(135deg,#22c55e,#16a34a);transition:transform .3s}
[data-theme="light"] .t-toggle::after{transform:translateX(20px)}

/* ── Status badges ── */
.sb{border-radius:2px;padding:2px 8px;font-size:10.5px;font-weight:700;font-family:'JetBrains Mono',monospace;letter-spacing:.04em;text-transform:uppercase}
.sb-pending   {background:rgba(234,179,8,0.08);   border:1px solid rgba(234,179,8,0.3);   color:#ca8a04}
.sb-processing{background:rgba(59,130,246,0.08);  border:1px solid rgba(59,130,246,0.3);  color:#2563eb}
.sb-solved    {background:rgba(34,197,94,0.08);   border:1px solid rgba(34,197,94,0.3);   color:#16a34a}
.sb-failed    {background:rgba(239,68,68,0.08);   border:1px solid rgba(239,68,68,0.3);   color:#dc2626}
.sb-timeout   {background:rgba(249,115,22,0.08);  border:1px solid rgba(249,115,22,0.3);  color:#ea580c}
[data-theme="dark"] .sb-pending{color:#eab308}[data-theme="dark"] .sb-processing{color:#60a5fa}
[data-theme="dark"] .sb-solved{color:#4ade80}  [data-theme="dark"] .sb-failed{color:#f87171}  [data-theme="dark"] .sb-timeout{color:#fb923c}

/* ── Input ── */
.inp{
  width:100%;border-radius:4px;padding:10px 14px;font-size:13px;outline:none;
  transition:border-color .2s,box-shadow .2s;
  background:var(--bg2);border:1px solid var(--border2);color:var(--text);
  font-family:'JetBrains Mono',monospace;
  clip-path:polygon(6px 0,100% 0,100% calc(100% - 6px),calc(100% - 6px) 100%,0 100%,0 6px);
}
.inp:focus{border-color:#22c55e;box-shadow:0 0 12px rgba(34,197,94,0.18)}

/* ── Code ── */
.code-block{background:var(--code);border:1px solid rgba(34,197,94,0.18);border-radius:12px;overflow:hidden}
.code-tab{padding:5px 14px;border-radius:8px;font-size:11.5px;cursor:pointer;transition:all .2s;color:var(--text3);font-family:'JetBrains Mono',monospace;background:transparent;border:none}
.code-tab.on{background:rgba(34,197,94,0.14);color:#22c55e;box-shadow:inset 0 -2px 0 #22c55e}
pre.code{padding:18px;font-size:12px;line-height:1.75;overflow-x:auto;color:#e2f0e8}
.c-kw{color:#4ade80}.c-str{color:#86efac}.c-fn{color:#fbbf24}.c-num{color:#fb923c}.c-cmt{color:#3d6b4d}.c-key{color:#22d3ee}

/* ── Param table ── */
.param-table{width:100%;border-collapse:collapse;font-size:13px}
.param-table th{text-align:left;padding:8px 12px;font-weight:600;font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--text3);border-bottom:1px solid var(--border)}
.param-table td{padding:10px 12px;border-bottom:1px solid var(--border);vertical-align:top;color:var(--text2)}
.param-table td:first-child{font-family:'JetBrains Mono',monospace;font-size:12px;color:#22c55e;white-space:nowrap}
.required{background:rgba(239,68,68,0.1);color:#f87171;border:1px solid rgba(239,68,68,0.2);border-radius:4px;padding:1px 6px;font-size:10px;font-weight:700}
.optional{background:rgba(234,179,8,0.1);color:#eab308;border:1px solid rgba(234,179,8,0.2);border-radius:4px;padding:1px 6px;font-size:10px;font-weight:700}
[data-theme="light"] .required{color:#dc2626}[data-theme="light"] .optional{color:#ca8a04}

/* ── Toast ── */
#toast{position:fixed;bottom:24px;right:24px;z-index:999;transform:translateY(80px);opacity:0;transition:all .3s}
#toast.show{transform:translateY(0);opacity:1}

/* ── Mobile bottom nav ── */
#mobileNav{display:none;position:fixed;bottom:0;left:0;right:0;z-index:40;background:var(--sidebar);border-top:1px solid var(--border);padding:8px 0 max(8px,env(safe-area-inset-bottom))}
@media(max-width:1023px){
  #sidebar{display:none}
  #mobileNav{display:flex}
  #main{padding-bottom:76px}
}
@media(max-width:639px){
  .card{border-radius:12px}
  pre.code{font-size:11px;padding:14px}
  .param-table td,.param-table th{padding:8px 10px;font-size:12px}
}

/* ── Hacker: page h1 titles — // prefix ── */
.page > div > h1:not(.dash-glitch) {
  position: relative;
  padding-left: 1.5em;
  text-shadow: 0 0 25px rgba(34,197,94,.22);
}
[data-theme="light"] .page > div > h1:not(.dash-glitch) { text-shadow: none; }
.page > div > h1:not(.dash-glitch)::before {
  content: '//';
  position: absolute;
  left: 0;
  font-family: 'JetBrains Mono', monospace;
  font-weight: 400;
  font-size: .55em;
  color: rgba(34,197,94,.5);
  top: .28em;
  letter-spacing: .04em;
}
[data-theme="light"] .page > div > h1:not(.dash-glitch)::before { color: rgba(22,163,74,.55); }

/* ── Hacker: card h2 headings — > prefix ── */
.card h2 {
  position: relative;
  padding-left: 1.15em;
}
.card h2::before {
  content: '>';
  position: absolute;
  left: 0;
  font-family: 'JetBrains Mono', monospace;
  font-weight: 700;
  font-size: .9em;
  color: rgba(34,197,94,.5);
  top: .04em;
}
[data-theme="light"] .card h2::before { color: rgba(22,163,74,.58); }

/* ── Hacker: card h3 headings — > prefix ── */
.card h3 {
  position: relative;
  padding-left: 1.15em;
}
.card h3::before {
  content: '>';
  position: absolute;
  left: 0;
  font-family: 'JetBrains Mono', monospace;
  font-weight: 700;
  font-size: .88em;
  color: rgba(34,197,94,.5);
  top: .04em;
}
[data-theme="light"] .card h3::before { color: rgba(22,163,74,.58); }

/* ── Hacker: strong / bold text ── */
strong {
  font-family: 'JetBrains Mono', monospace;
  font-weight: 700;
  color: #4ade80;
}
[data-theme="light"] strong { color: #15803d; }

/* ── Hacker: btn-p shimmer sweep on hover ── */
.btn-p { position: relative; overflow: hidden; }
.btn-p::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 28%, rgba(74,222,128,.09) 50%, transparent 72%);
  transform: translateX(-150%) skewX(-15deg);
  pointer-events: none;
}
.btn-p:hover::after {
  transform: translateX(150%) skewX(-15deg);
  transition: transform .55s ease;
}

@keyframes boot-in {
  from { opacity:0; transform:translateX(-8px); }
  to   { opacity:1; transform:translateX(0); }
}

/* ── Light mode: tone down neon greens ── */
[data-theme="light"] .btn-p{color:#166534;border-color:rgba(22,163,74,0.5)}
[data-theme="light"] .btn-p:hover{color:#14532d;background:rgba(22,163,74,0.12);box-shadow:0 0 14px rgba(22,163,74,0.18)}
[data-theme="light"] .btn-g{color:rgba(21,128,61,0.8);border-color:rgba(22,163,74,0.28)}
[data-theme="light"] .btn-g:hover{color:#15803d;background:rgba(22,163,74,0.07);border-color:rgba(22,163,74,0.5)}
[data-theme="light"] .nav-item:hover{color:#15803d;background:rgba(22,163,74,0.07)}
[data-theme="light"] .nav-item.active{color:#15803d;background:rgba(22,163,74,0.1);border-color:rgba(22,163,74,0.28);box-shadow:none}
[data-theme="light"] .mob-btn[style*="color:#22c55e"]{color:#15803d!important}
[data-theme="light"] .inp:focus{border-color:#16a34a;box-shadow:0 0 8px rgba(22,163,74,0.14)}
[data-theme="light"] .param-table td:first-child{color:#15803d}
[data-theme="light"] .code-tab.on{color:#15803d;box-shadow:inset 0 -2px 0 #16a34a}
[data-theme="light"] .sidebar-scanline{opacity:0.4}
/* deposit success modal text */
[data-theme="light"] #depositSuccessModal .card{border-color:rgba(22,163,74,0.4) !important;box-shadow:0 0 24px rgba(22,163,74,0.08) !important}
[data-theme="light"] #depositSuccessModal [style*="color:#22c55e"]{color:#15803d !important}
[data-theme="light"] #depositSuccessModal [style*="color:#4ade80"]{color:#166534 !important}
[data-theme="light"] #depositSuccessModal [style*="background:#22c55e"]{background:#16a34a !important;box-shadow:none !important}
/* task detail modal hardcoded greens */
[data-theme="light"] #taskDetailModal [style*="color:#22c55e"]{color:#15803d !important}

/* ── Clickable task rows ── */
.row-click {
  cursor: pointer;
  transition: background .15s;
}
.row-click:hover {
  background: rgba(34,197,94,0.05);
}
.row-click:hover td { border-bottom-color: rgba(34,197,94,0.18); }