:root{
  --ink:#0B1110;
  --paper:#F4F1E8;
  --vault:#1C3D33;
  --vault-2:#2E5C4D;
  --signal:#FF6A39;
  --signal-dim:#C44E27;
  --gold:#C9A24B;
  --line:#D8D2C2;
  --mono: 'Spline Sans Mono','JetBrains Mono',ui-monospace,monospace;
  --display:'Fraunces','Georgia',serif;
  --body:'Inter','Helvetica Neue',sans-serif;
  --radius:2px;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{background:var(--ink);color:var(--paper);font-family:var(--body);}
body{min-height:100vh;}

@font-face{
  font-family:'Fraunces';
  src:local('Fraunces'), url('https://fonts.gstatic.com/s/fraunces/v31/6NUh8FyLNQOQZAnv9ZwNjucMHVn85Ni7emBmUKa-YjDI.woff2') format('woff2');
  font-weight:400 600;
  font-display:swap;
}

/* ===== Layout shell ===== */
.app{display:grid;grid-template-columns:280px 1fr;min-height:100vh;}
@media (max-width:980px){.app{grid-template-columns:1fr;}}

/* ===== Sidebar (ledger spine) ===== */
.spine{
  background:#070B0A;
  border-right:1px solid #1F2A26;
  padding:28px 20px;
  position:sticky;top:0;height:100vh;overflow-y:auto;
}
@media (max-width:980px){.spine{position:relative;height:auto;border-right:none;border-bottom:1px solid #1F2A26;}}

.brand{display:flex;flex-direction:column;gap:4px;margin-bottom:34px;}
.brand .mark{
  font-family:var(--display);font-size:30px;letter-spacing:0.01em;color:var(--paper);
  display:flex;align-items:baseline;gap:8px;
}
.brand .mark .dot{color:var(--signal);font-size:30px;line-height:1;}
.brand .tag{font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:#7E8C86;}

.nav-group{margin-bottom:28px;}
.nav-group h4{
  font-family:var(--mono);font-size:10px;letter-spacing:.22em;text-transform:uppercase;
  color:#6C7A75;margin-bottom:10px;font-weight:500;
}
.nav-item{
  display:flex;align-items:center;gap:10px;
  font-family:var(--mono);font-size:12.5px;
  color:#A9B6B0;padding:8px 10px;border-radius:var(--radius);
  cursor:pointer;border:1px solid transparent;
  transition:.15s ease;
}
.nav-item .num{color:#4F5C57;font-size:11px;width:18px;flex-shrink:0;}
.nav-item:hover{background:#101A17;color:var(--paper);}
.nav-item.active{
  background:var(--vault);color:var(--paper);border-color:var(--vault-2);
}
.nav-item.active .num{color:var(--signal);}

.net-pill{
  margin-top:6px;
  font-family:var(--mono);font-size:10.5px;color:#7E8C86;
  border:1px solid #1F2A26;border-radius:var(--radius);padding:10px 12px;
  display:flex;flex-direction:column;gap:6px;
}
.net-pill b{color:var(--gold);font-weight:600;letter-spacing:.02em;}
.net-pill .row{display:flex;justify-content:space-between;gap:8px;}

/* ===== Main ===== */
main{padding:36px 44px 80px;max-width:1180px;}
@media (max-width:700px){main{padding:24px 18px 60px;}}

.page-head{
  display:flex;justify-content:space-between;align-items:flex-end;gap:24px;
  border-bottom:1px solid #24322D;padding-bottom:22px;margin-bottom:30px;flex-wrap:wrap;
}
.page-head .eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:.22em;color:var(--signal);text-transform:uppercase;margin-bottom:8px;}
.page-head h1{font-family:var(--display);font-size:clamp(28px,4vw,46px);font-weight:600;line-height:1.05;letter-spacing:-0.01em;}
.page-head p{color:#92A199;font-size:14px;max-width:46ch;margin-top:10px;line-height:1.55;}
.head-meta{font-family:var(--mono);font-size:11px;color:#6C7A75;text-align:right;line-height:1.8;}
.head-meta b{color:var(--paper);}

/* ===== Network bar ===== */
.netbar{
  display:flex;gap:10px;flex-wrap:wrap;margin-bottom:30px;
}
.netbtn{
  font-family:var(--mono);font-size:11.5px;letter-spacing:.04em;
  padding:9px 14px;border:1px solid #2A3A34;border-radius:var(--radius);
  background:#0E1715;color:#9FAEA8;cursor:pointer;transition:.15s;
  display:flex;align-items:center;gap:8px;
}
.netbtn .chip{width:7px;height:7px;border-radius:50%;background:#4F5C57;}
.netbtn.active{background:var(--vault);border-color:var(--vault-2);color:var(--paper);}
.netbtn.active .chip{background:var(--signal);}
.netbtn:hover{border-color:var(--vault-2);}

/* ===== Cards / grid ===== */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:16px;margin-bottom:36px;}
.tcard{
  background:#0E1715;border:1px solid #24322D;border-radius:var(--radius);
  padding:22px;cursor:pointer;transition:.18s ease;position:relative;overflow:hidden;
}
.tcard:hover{border-color:var(--vault-2);transform:translateY(-2px);}
.tcard.selected{border-color:var(--signal);background:#11201B;}
.tcard .idx{font-family:var(--mono);font-size:10px;letter-spacing:.2em;color:#5C6B65;text-transform:uppercase;margin-bottom:14px;}
.tcard h3{font-family:var(--display);font-size:20px;font-weight:600;margin-bottom:8px;letter-spacing:-0.01em;}
.tcard p{font-size:12.5px;color:#8E9D96;line-height:1.5;}
.tcard .tagrow{display:flex;gap:6px;flex-wrap:wrap;margin-top:14px;}
.tcard .tag{font-family:var(--mono);font-size:9.5px;text-transform:uppercase;letter-spacing:.12em;color:#6C7A75;border:1px solid #24322D;padding:3px 7px;border-radius:var(--radius);}
.tcard.selected .tag{border-color:var(--vault-2);color:var(--gold);}
.tcard .corner{position:absolute;top:0;right:0;width:0;height:0;border-style:solid;border-width:0 26px 26px 0;border-color:transparent #1C3D33 transparent transparent;opacity:0;transition:.18s;}
.tcard.selected .corner{opacity:1;}

/* ===== Section dividers ===== */
.section{margin-bottom:42px;}
.section-head{display:flex;align-items:baseline;gap:14px;margin-bottom:18px;}
.section-head .n{font-family:var(--display);font-size:13px;color:var(--signal);font-weight:600;}
.section-head h2{font-family:var(--display);font-size:24px;font-weight:600;letter-spacing:-0.01em;}
.section-head .rule{flex:1;height:1px;background:#24322D;}

/* ===== Form ===== */
.form-panel{
  background:#0E1715;border:1px solid #24322D;border-radius:var(--radius);padding:28px;
}
.field-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:18px;}
.field{display:flex;flex-direction:column;gap:7px;}
.field label{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:#7E8C86;}
.field input,.field select,.field textarea{
  background:#070B0A;border:1px solid #2A3A34;border-radius:var(--radius);
  color:var(--paper);padding:11px 12px;font-family:var(--mono);font-size:13px;
  outline:none;transition:.15s;
}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--signal);}
.field .hint{font-size:11px;color:#5C6B65;line-height:1.4;}
.field.full{grid-column:1/-1;}
.field textarea{resize:vertical;min-height:90px;font-size:12px;}

.row-list{display:flex;flex-direction:column;gap:10px;margin-top:6px;}
.row-list .item{
  display:grid;grid-template-columns:1fr 140px 32px;gap:8px;align-items:center;
}
@media (max-width:600px){.row-list .item{grid-template-columns:1fr 100px 32px;}}
.row-list .item input{width:100%;}
.iconbtn{
  width:32px;height:36px;display:flex;align-items:center;justify-content:center;
  background:#101A17;border:1px solid #2A3A34;border-radius:var(--radius);
  color:#8E9D96;cursor:pointer;font-size:16px;transition:.15s;
}
.iconbtn:hover{border-color:var(--signal);color:var(--signal);}

.btnrow{display:flex;gap:12px;margin-top:22px;flex-wrap:wrap;}
.btn{
  font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;
  padding:13px 22px;border-radius:var(--radius);cursor:pointer;border:1px solid transparent;
  transition:.15s;display:inline-flex;align-items:center;gap:8px;
}
.btn-primary{background:var(--signal);color:var(--ink);font-weight:600;}
.btn-primary:hover{background:#FF7E55;}
.btn-ghost{background:transparent;border:1px solid #2A3A34;color:var(--paper);}
.btn-ghost:hover{border-color:var(--gold);color:var(--gold);}
.btn:disabled{opacity:.4;cursor:not-allowed;}

/* ===== Output / code panel ===== */
.codepanel{
  background:#070B0A;border:1px solid #24322D;border-radius:var(--radius);
  margin-top:24px;overflow:hidden;
}
.codepanel .codehead{
  display:flex;justify-content:space-between;align-items:center;
  padding:12px 18px;border-bottom:1px solid #24322D;background:#0E1715;
}
.codepanel .codehead .filename{font-family:var(--mono);font-size:12px;color:var(--gold);}
.codepanel pre{
  padding:20px;overflow-x:auto;font-family:var(--mono);font-size:11.5px;line-height:1.65;
  color:#C7D3CC;max-height:560px;
}
.codepanel pre .kw{color:var(--signal);}
.codepanel pre .com{color:#5C6B65;}
.codepanel pre .str{color:var(--gold);}

/* ===== Status / log ===== */
.console{
  background:#070B0A;border:1px solid #24322D;border-radius:var(--radius);
  padding:16px 18px;margin-top:18px;font-family:var(--mono);font-size:11.5px;
  color:#9FAEA8;max-height:240px;overflow-y:auto;
}
.console .line{padding:3px 0;display:flex;gap:10px;border-bottom:1px dashed #1A2420;}
.console .line:last-child{border-bottom:none;}
.console .line .t{color:#4F5C57;flex-shrink:0;}
.console .line.ok .msg{color:#8FBF9F;}
.console .line.err .msg{color:#E08A6B;}
.console .line.warn .msg{color:var(--gold);}

/* ===== Wallet bar ===== */
.walletbar{
  display:flex;justify-content:space-between;align-items:center;gap:16px;
  background:#0E1715;border:1px solid #24322D;border-radius:var(--radius);
  padding:14px 20px;margin-bottom:30px;flex-wrap:wrap;
}
.walletbar .status{font-family:var(--mono);font-size:12px;color:#8E9D96;display:flex;align-items:center;gap:10px;}
.walletbar .status .dot{width:8px;height:8px;border-radius:50%;background:#4F5C57;}
.walletbar .status.connected .dot{background:#5FB37D;}
.walletbar .status.connected{color:var(--paper);}

/* ===== footer note ===== */
.foot-note{
  font-family:var(--mono);font-size:10.5px;color:#5C6B65;line-height:1.8;
  border-top:1px solid #24322D;padding-top:22px;margin-top:48px;
}
.foot-note b{color:#8E9D96;}

/* contract param signature element */
.ledger-mark{
  font-family:var(--display);font-size:120px;line-height:1;color:#162420;
  position:absolute;right:-10px;bottom:-30px;font-weight:600;pointer-events:none;
  user-select:none;
}

a{color:var(--gold);text-decoration:none;border-bottom:1px solid transparent;}
a:hover{border-bottom-color:var(--gold);}

.toggle-wrap{display:flex;gap:8px;flex-wrap:wrap;}
.toggle{
  font-family:var(--mono);font-size:11px;padding:8px 12px;border:1px solid #2A3A34;
  border-radius:var(--radius);color:#8E9D96;cursor:pointer;transition:.15s;
}
.toggle.active{background:var(--vault);border-color:var(--vault-2);color:var(--paper);}

/* ===== New feature styles ===== */
.audit-score{
  display:flex;align-items:center;gap:18px;
  background:#070B0A;border:1px solid #24322D;border-radius:var(--radius);
  padding:18px 22px;margin-bottom:18px;
}
.audit-score .score-ring{
  width:72px;height:72px;flex-shrink:0;position:relative;
}
.audit-score .score-ring svg{transform:rotate(-90deg);}
.audit-score .score-num{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  font-family:var(--display);font-size:22px;font-weight:600;color:var(--paper);
}
.audit-finding{
  background:#0E1715;border:1px solid #24322D;border-radius:var(--radius);
  padding:14px 16px;margin-bottom:10px;border-left:3px solid #4F5C57;
}
.audit-finding.critical{border-left-color:#E57373;}
.audit-finding.high{border-left-color:#FFB74D;}
.audit-finding.medium{border-left-color:var(--gold);}
.audit-finding.low{border-left-color:#81C784;}
.audit-finding.info{border-left-color:#64B5F6;}
.audit-finding .sev{
  font-family:var(--mono);font-size:9px;letter-spacing:.2em;text-transform:uppercase;
  padding:2px 7px;border-radius:var(--radius);margin-right:8px;
}
.audit-finding.critical .sev{background:#3A1212;color:#E57373;}
.audit-finding.high .sev{background:#2A1F0A;color:#FFB74D;}
.audit-finding.medium .sev{background:#2A2208;color:var(--gold);}
.audit-finding.low .sev{background:#0A1F0E;color:#81C784;}
.audit-finding.info .sev{background:#0A1824;color:#64B5F6;}
.audit-finding h4{font-family:var(--mono);font-size:12.5px;font-weight:600;display:inline;}
.audit-finding p{font-size:12px;color:#92A199;margin-top:8px;line-height:1.55;}
.audit-finding .line-ref{font-family:var(--mono);font-size:10.5px;color:#5C6B65;margin-top:6px;}

.fn-card{
  background:#0E1715;border:1px solid #24322D;border-radius:var(--radius);
  padding:16px;margin-bottom:10px;
}
.fn-card h4{font-family:var(--mono);font-size:12px;font-weight:600;color:var(--gold);margin-bottom:10px;}
.fn-card .fn-inputs{display:flex;flex-direction:column;gap:8px;}
.fn-card .fn-row{display:flex;gap:8px;align-items:center;}
.fn-card .fn-row label{font-family:var(--mono);font-size:10px;color:#7E8C86;width:90px;flex-shrink:0;}
.fn-card .fn-row input{flex:1;background:#070B0A;border:1px solid #2A3A34;border-radius:var(--radius);color:var(--paper);padding:7px 10px;font-family:var(--mono);font-size:12px;}
.fn-card .fn-result{
  margin-top:10px;background:#070B0A;border:1px solid #1A2A24;border-radius:var(--radius);
  padding:10px 12px;font-family:var(--mono);font-size:11.5px;color:#8FBF9F;min-height:32px;
  word-break:break-all;
}
.fn-card .fn-result.err{color:#E08A6B;}
.fn-type-read{border-left:3px solid #64B5F6;}
.fn-type-write{border-left:3px solid var(--signal);}
.fn-type-event{border-left:3px solid var(--gold);}

.hist-row{
  display:flex;align-items:center;gap:12px;
  background:#0E1715;border:1px solid #24322D;border-radius:var(--radius);
  padding:12px 16px;margin-bottom:8px;flex-wrap:wrap;
}
.hist-row .hnet{font-family:var(--mono);font-size:10px;letter-spacing:.12em;color:#7E8C86;min-width:90px;}
.hist-row .hname{font-family:var(--display);font-size:14px;font-weight:600;flex:1;}
.hist-row .haddr{font-family:var(--mono);font-size:11px;color:var(--gold);}
.hist-row .htime{font-family:var(--mono);font-size:10px;color:#5C6B65;margin-left:auto;}
.hist-row .hbtns{display:flex;gap:6px;}
.hist-row .hbtn{font-family:var(--mono);font-size:10px;padding:5px 10px;border:1px solid #2A3A34;border-radius:var(--radius);background:transparent;color:#8E9D96;cursor:pointer;transition:.15s;}
.hist-row .hbtn:hover{border-color:var(--gold);color:var(--gold);}

.gas-meter{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:14px;
  margin-bottom:22px;
}
.gas-card{
  background:#0E1715;border:1px solid #24322D;border-radius:var(--radius);padding:16px;
}
.gas-card .gval{font-family:var(--display);font-size:26px;font-weight:600;color:var(--paper);}
.gas-card .glabel{font-family:var(--mono);font-size:10px;letter-spacing:.15em;text-transform:uppercase;color:#7E8C86;margin-top:4px;}
.gas-card .gsub{font-family:var(--mono);font-size:11px;color:var(--gold);margin-top:6px;}

.share-box{
  background:#0E1715;border:1px solid #24322D;border-radius:var(--radius);
  padding:16px 18px;margin-bottom:14px;
}
.share-box input{
  width:100%;background:#070B0A;border:1px solid #2A3A34;border-radius:var(--radius);
  color:var(--gold);padding:10px 12px;font-family:var(--mono);font-size:11px;
  margin-top:8px;
}

.streaming-cursor::after{content:'â–‹';animation:blink .7s step-end infinite;}
@keyframes blink{0%,100%{opacity:1}50%{opacity:0}}

.pill-row{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px;}
.pill{font-family:var(--mono);font-size:10px;letter-spacing:.1em;padding:5px 12px;border:1px solid #2A3A34;border-radius:20px;color:#8E9D96;cursor:pointer;transition:.15s;}
.pill:hover,.pill.active{background:var(--vault);border-color:var(--vault-2);color:var(--paper);}

.badge{
  font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;
  padding:3px 8px;border-radius:var(--radius);border:1px solid var(--vault-2);color:var(--gold);
}
/* ===== Tier / Pricing System ===== */
.tier-widget{
  margin-top:14px;
  background:linear-gradient(135deg,#0D1F1A 0%,#0A1510 100%);
  border:1px solid #2E5C4D;border-radius:var(--radius);
  padding:14px 16px;
}
.tier-widget .tier-label{
  font-family:var(--mono);font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;
  color:#7E8C86;margin-bottom:8px;
}
.tier-badge{
  display:inline-flex;align-items:center;gap:6px;
  font-family:var(--mono);font-size:12px;font-weight:600;
  padding:5px 12px;border-radius:var(--radius);border:1px solid;
  margin-bottom:10px;
}
.tier-badge.free{color:#8E9D96;border-color:#2A3A34;background:#0E1715;}
.tier-badge.pro{color:var(--gold);border-color:#3A2E0A;background:#1A1608;}
.tier-badge.enterprise{color:#81C784;border-color:#0A2E14;background:#081408;}
.tier-badge .dot{width:7px;height:7px;border-radius:50%;}
.tier-badge.free .dot{background:#4F5C57;}
.tier-badge.pro .dot{background:var(--gold);}
.tier-badge.enterprise .dot{background:#81C784;}
.tier-widget .tier-btn{
  width:100%;font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;
  padding:9px;border-radius:var(--radius);cursor:pointer;border:1px solid var(--vault-2);
  background:var(--vault);color:var(--paper);transition:.15s;margin-top:4px;
}
.tier-widget .tier-btn:hover{background:var(--vault-2);}

/* Pricing modal */
.modal-overlay{
  position:fixed;inset:0;background:rgba(0,0,0,.75);backdrop-filter:blur(4px);
  z-index:1000;display:flex;align-items:center;justify-content:center;padding:20px;
}
.modal-box{
  background:#0E1715;border:1px solid #2E5C4D;border-radius:4px;
  width:100%;max-width:820px;max-height:90vh;overflow-y:auto;
  padding:32px;position:relative;
}
.modal-box h2{font-family:var(--display);font-size:32px;font-weight:600;margin-bottom:6px;}
.modal-box .sub{font-size:13px;color:#92A199;margin-bottom:28px;}
.pricing-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;margin-bottom:28px;}
.pricing-card{
  background:#070B0A;border:1px solid #24322D;border-radius:var(--radius);padding:24px;
  display:flex;flex-direction:column;gap:0;position:relative;overflow:hidden;
  transition:.15s;
}
.pricing-card.featured{border-color:var(--gold);box-shadow:0 0 0 1px var(--gold);}
.pricing-card .pop-tag{
  position:absolute;top:12px;right:-20px;background:var(--gold);color:var(--ink);
  font-family:var(--mono);font-size:9px;letter-spacing:.15em;text-transform:uppercase;
  padding:3px 28px;transform:rotate(45deg);transform-origin:top right;
}
.pricing-card .tier-name{font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:#7E8C86;margin-bottom:10px;}
.pricing-card .tier-price{font-family:var(--display);font-size:38px;font-weight:600;color:var(--paper);line-height:1;}
.pricing-card .tier-currency{font-family:var(--mono);font-size:12px;color:#7E8C86;margin-bottom:16px;margin-top:4px;}
.pricing-card .tier-features{list-style:none;display:flex;flex-direction:column;gap:8px;margin-bottom:22px;flex:1;}
.pricing-card .tier-features li{font-size:12.5px;color:#A9B6B0;display:flex;gap:8px;align-items:flex-start;line-height:1.4;}
.pricing-card .tier-features li::before{content:'✓';color:#5FB37D;flex-shrink:0;font-weight:700;}
.pricing-card .tier-features li.no::before{content:'✕';color:#5C6B65;}
.pricing-card .pay-btn{
  font-family:var(--mono);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;
  padding:12px;border-radius:var(--radius);cursor:pointer;border:1px solid;
  background:transparent;transition:.15s;width:100%;
}
.pricing-card .pay-btn.free{color:#8E9D96;border-color:#2A3A34;}
.pricing-card .pay-btn.free:hover{border-color:var(--paper);color:var(--paper);}
.pricing-card .pay-btn.pro{color:var(--gold);border-color:var(--gold);}
.pricing-card .pay-btn.pro:hover{background:var(--gold);color:var(--ink);}
.pricing-card .pay-btn.ent{color:#81C784;border-color:#81C784;}
.pricing-card .pay-btn.ent:hover{background:#81C784;color:var(--ink);}
.modal-close{
  position:absolute;top:16px;right:16px;background:transparent;border:1px solid #2A3A34;
  border-radius:var(--radius);color:#8E9D96;cursor:pointer;padding:6px 10px;
  font-family:var(--mono);font-size:12px;transition:.15s;
}
.modal-close:hover{border-color:var(--paper);color:var(--paper);}
.pay-log{
  background:#070B0A;border:1px solid #24322D;border-radius:var(--radius);
  padding:12px;font-family:var(--mono);font-size:11px;color:#9FAEA8;
  max-height:120px;overflow-y:auto;margin-top:16px;
}

/* Locked overlay on gated sections */
.gated-overlay{
  position:relative;
}
.gated-overlay::after{
  content:'';position:absolute;inset:0;background:rgba(7,11,10,.85);
  backdrop-filter:blur(2px);border-radius:var(--radius);z-index:10;
  pointer-events:none;
}
.gated-msg{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  z-index:11;text-align:center;pointer-events:all;
}
.gated-msg h3{font-family:var(--display);font-size:22px;font-weight:600;margin-bottom:8px;}
.gated-msg p{font-size:12.5px;color:#92A199;margin-bottom:16px;}

.tier-pill-inline{
  font-family:var(--mono);font-size:9px;letter-spacing:.15em;text-transform:uppercase;
  padding:2px 8px;border-radius:10px;margin-left:8px;
}
.tier-pill-inline.pro{background:#2A2208;color:var(--gold);border:1px solid #3A2E0A;}
.tier-pill-inline.ent{background:#081408;color:#81C784;border:1px solid #0A2E14;}
/* ===== v1.0 features ===== */

/* Dark/light mode toggle */
:root { color-scheme: dark; }
.light { color-scheme: light; background:#F4F1E8!important; color:#0B1110!important; }
.light .spine{background:#E8E4D9!important;border-color:#D0C9B8!important;}
.light .nav-item{color:#4A5550!important;}
.light .nav-item.active{background:#2E5C4D!important;color:#fff!important;}
.light .net-pill{border-color:#D0C9B8!important;background:#EDE9DF!important;}
.light .walletbar,.light .form-panel,.light .tcard,.light .fn-card,.light .hist-row,.light .gas-card,.light .share-box{background:#F8F5EC!important;border-color:#D0C9B8!important;}
.light .field input,.light .field select,.light .field textarea{background:#EDE9DF!important;border-color:#C5BFB0!important;color:#0B1110!important;}
.light .codepanel{background:#EDE9DF!important;border-color:#D0C9B8!important;}
.light .codepanel pre{color:#2A3830!important;}
.light .console,.light .pay-log{background:#EDE9DF!important;color:#4A5550!important;}

.theme-btn{
  background:transparent;border:1px solid #2A3A34;border-radius:var(--radius);
  color:#8E9D96;cursor:pointer;padding:7px 10px;font-family:var(--mono);
  font-size:11px;transition:.15s;margin-bottom:10px;width:100%;
}
.theme-btn:hover{border-color:var(--gold);color:var(--gold);}

/* Wizard stepper */
.wizard-steps{display:flex;gap:0;margin-bottom:28px;position:relative;}
.wizard-steps::before{content:'';position:absolute;top:18px;left:18px;right:18px;height:1px;background:#2A3A34;z-index:0;}
.wstep{
  display:flex;flex-direction:column;align-items:center;gap:6px;flex:1;
  position:relative;z-index:1;cursor:pointer;
}
.wstep .dot{
  width:36px;height:36px;border-radius:50%;background:#0E1715;border:1px solid #2A3A34;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--mono);font-size:12px;color:#5C6B65;transition:.2s;
}
.wstep.active .dot{background:var(--vault);border-color:var(--vault-2);color:var(--paper);}
.wstep.done .dot{background:var(--signal);border-color:var(--signal);color:var(--ink);font-weight:700;}
.wstep .label{font-family:var(--mono);font-size:10px;color:#5C6B65;text-align:center;max-width:72px;}
.wstep.active .label{color:var(--paper);}
.wizard-panel{display:none;}
.wizard-panel.active{display:block;}
.wizard-nav{display:flex;gap:12px;margin-top:22px;justify-content:space-between;}

/* NL → Solidity */
.nl-editor{
  background:#070B0A;border:1px solid #2A3A34;border-radius:var(--radius);
  padding:16px;font-family:var(--mono);font-size:12.5px;color:var(--paper);
  min-height:120px;resize:vertical;width:100%;outline:none;
  transition:.15s;line-height:1.65;
}
.nl-editor:focus{border-color:var(--signal);}
.nl-preview{
  background:#070B0A;border:1px solid #24322D;border-radius:var(--radius);
  padding:18px;font-family:var(--mono);font-size:11.5px;color:#C7D3CC;
  max-height:480px;overflow-y:auto;line-height:1.65;margin-top:14px;
  white-space:pre-wrap;
}
.nl-preview .streaming{color:var(--gold);}

/* Analytics */
.analytics-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px;margin-bottom:22px;}
.an-card{background:#0E1715;border:1px solid #24322D;border-radius:var(--radius);padding:18px;}
.an-card .anv{font-family:var(--display);font-size:32px;font-weight:600;color:var(--paper);line-height:1;}
.an-card .anl{font-family:var(--mono);font-size:10px;letter-spacing:.15em;text-transform:uppercase;color:#7E8C86;margin-top:5px;}
.an-card .ans{font-size:11.5px;color:#5FB37D;margin-top:6px;font-family:var(--mono);}
.an-card .ans.down{color:#E08A6B;}
.chart-wrap{background:#0E1715;border:1px solid #24322D;border-radius:var(--radius);padding:16px;margin-bottom:14px;}
.chart-wrap h4{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:#7E8C86;margin-bottom:14px;}
.bar-chart{display:flex;align-items:flex-end;gap:6px;height:80px;}
.bar{flex:1;background:var(--vault);border-radius:2px 2px 0 0;transition:height .4s ease;min-width:8px;}
.bar:hover{background:var(--vault-2);}
.bar-labels{display:flex;gap:6px;margin-top:4px;}
.bar-labels span{flex:1;font-family:var(--mono);font-size:9px;color:#5C6B65;text-align:center;}

/* Test generator */
.test-card{background:#0E1715;border:1px solid #24322D;border-radius:var(--radius);padding:16px;margin-bottom:10px;}
.test-card h4{font-family:var(--mono);font-size:12px;color:var(--gold);margin-bottom:8px;display:flex;align-items:center;gap:8px;}
.test-card .tc{font-family:var(--mono);font-size:11px;color:#92A199;line-height:1.6;}
.test-result{background:#070B0A;border:1px solid #24322D;border-radius:var(--radius);padding:14px;font-family:var(--mono);font-size:11px;color:#C7D3CC;max-height:400px;overflow-y:auto;white-space:pre-wrap;margin-top:14px;}

/* WalletConnect banner */
.wc-banner{
  background:#0E1715;border:1px solid #24322D;border-radius:var(--radius);
  padding:14px 18px;margin-bottom:16px;
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
}
.wc-banner .wc-icon{width:32px;height:32px;border-radius:50%;background:#3B99FC;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:16px;}
.wc-banner .wc-text{flex:1;}
.wc-banner .wc-text b{font-family:var(--mono);font-size:12.5px;color:var(--paper);}
.wc-banner .wc-text p{font-size:11.5px;color:#7E8C86;margin-top:2px;}

/* Simple templates extra cards */
.tcard .new-badge{
  position:absolute;top:10px;right:10px;
  font-family:var(--mono);font-size:8px;letter-spacing:.15em;text-transform:uppercase;
  background:var(--signal);color:var(--ink);padding:2px 6px;border-radius:2px;font-weight:700;
}
.netbtn.mainnet-active{ background:#2A1408; border-color:#C9A24B !important; }
.netbtn.mainnet-active .chip{ background:#C9A24B !important; }

/* Mainnet warning pulsing border on active mainnet */
@keyframes mainnetPulse{
  0%,100%{ box-shadow: 0 0 0 0 rgba(201,162,75,0); }
  50%{ box-shadow: 0 0 0 3px rgba(201,162,75,.18); }
}
.mainnet-mode .walletbar{ animation: mainnetPulse 3s ease infinite; border-color:#3A2A0A !important; }
.mainnet-mode .page-head h1{ color: #C9A24B; }