/* Wireframe shared styles — /wireframes/_style.css */
:root{
  --ink:#0a0e1a;--sub:#475569;--mute:#94a3b8;
  --line:rgba(15,23,42,.08);--line2:rgba(15,23,42,.14);
  --accent:#0a84ff;--accent-soft:rgba(10,132,255,0.08);
  --green:#059669;--green-soft:rgba(5,150,105,0.08);--green-glow:rgba(5,150,105,.3);
  --yellow:#d97706;--yellow-soft:rgba(217,119,6,0.08);
  --red:#dc2626;--red-soft:rgba(220,38,38,0.08);
  --bg:#fff;--bg-side:#0a0e1a;--bg-main:#f8fafc;
  --mono:"SF Mono",Menlo,Consolas,monospace;
  --sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
body{font-family:var(--sans);background:#eef2f6;color:var(--ink);
     -webkit-font-smoothing:antialiased;line-height:1.5;padding:32px 20px}

.page-hero{max-width:1280px;margin:0 auto 18px}
.page-hero a.back{display:inline-block;font:500 12.5px/1 var(--mono);color:var(--accent);text-decoration:none;margin-bottom:12px}
.page-hero a.back:hover{text-decoration:underline}
.page-hero h1{font-size:24px;letter-spacing:-0.025em;margin-bottom:4px}
.page-hero p{color:var(--sub);font-size:13.5px}
.page-hero .meta{margin-top:10px;font:500 11px/1 var(--mono);color:var(--mute);letter-spacing:.05em;text-transform:uppercase}

/* Browser frame */
.bf{max-width:1280px;margin:0 auto;background:var(--bg);border:1px solid var(--line2);border-radius:14px;overflow:hidden;box-shadow:0 30px 60px -30px rgba(15,23,42,.25)}
.bf-chrome{display:flex;align-items:center;gap:6px;padding:12px 18px;background:#e2e8f0;border-bottom:1px solid var(--line2)}
.bf-dot{width:11px;height:11px;border-radius:999px;background:#cbd5e1}
.bf-dot.r{background:#ff6155}.bf-dot.y{background:#febb2c}.bf-dot.g{background:#26c940}
.bf-addr{flex:1;margin-left:14px;background:#fff;border:1px solid var(--line);border-radius:8px;padding:6px 14px;font:500 12.5px/1.3 var(--mono);color:var(--sub)}
.bf-addr b{color:var(--ink);font-weight:700}

/* Dashboard layout */
.db{display:grid;grid-template-columns:240px 1fr;min-height:720px}

/* Sidebar */
.side{background:var(--bg-side);color:#e2e8f0;padding:20px 12px;display:flex;flex-direction:column;gap:4px}
.side .brand{display:flex;align-items:center;gap:6px;padding:8px 14px 16px;font:800 19px/1 var(--sans);letter-spacing:-0.025em;color:#fff}
.side .brand .dot{width:7px;height:7px;border-radius:50%;background:var(--accent);box-shadow:0 0 8px rgba(10,132,255,.6)}
.side .group{font:700 10.5px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:#64748b;padding:12px 16px 4px}
.side a{display:flex;align-items:center;gap:10px;padding:9px 14px;border-radius:8px;color:#cbd5e1;font:500 13.5px/1 var(--sans);text-decoration:none;transition:background .12s,color .12s}
.side a:hover{background:#111827;color:#fff}
.side a.active{background:var(--accent);color:#fff;font-weight:700}
.side a .ic{width:18px;text-align:center;flex-shrink:0}
.side a .count{margin-left:auto;background:rgba(255,255,255,0.15);color:#fff;font:700 10px/1 var(--mono);padding:2px 6px;border-radius:999px}
.side a.active .count{background:rgba(255,255,255,0.25)}
.side .spacer{flex:1}
.side .account{border-top:1px solid #1e293b;margin-top:12px;padding-top:12px}
.side .credit-card{margin:8px 8px 14px;padding:12px 14px;border-radius:10px;color:#fff}
.side .credit-card.green{background:linear-gradient(135deg,#059669 0%,#10b981 100%)}
.side .credit-card.yellow{background:linear-gradient(135deg,#d97706 0%,#f59e0b 100%)}
.side .credit-card.red{background:linear-gradient(135deg,#dc2626 0%,#ef4444 100%)}
.side .credit-card.gray{background:linear-gradient(135deg,#475569 0%,#64748b 100%)}
.side .credit-card .lbl{font:700 10px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;opacity:.82}
.side .credit-card .val{font:800 22px/1 var(--sans);letter-spacing:-0.01em;margin-top:6px}
.side .credit-card .sub{font:500 11px/1.3 var(--sans);opacity:.85;margin-top:4px}

/* Top bar */
.main-col{background:var(--bg-main);display:flex;flex-direction:column;min-width:0}
.top{display:flex;align-items:center;gap:14px;padding:14px 28px;background:var(--bg);border-bottom:1px solid var(--line);flex-wrap:wrap}
.top .crumb{font:700 14px/1 var(--sans);letter-spacing:-0.01em}
.top .crumb .s{color:var(--mute);font-weight:500;padding:0 6px}
.top .spacer{flex:1}
.top .pill{display:inline-flex;align-items:center;gap:6px;padding:5px 11px;border-radius:999px;font:700 11px/1 var(--mono);letter-spacing:.04em}
.top .pill.live{background:var(--green-soft);color:var(--green)}
.top .pill.live .dot{width:6px;height:6px;border-radius:50%;background:var(--green);box-shadow:0 0 6px var(--green-glow)}
.top .pill.free{background:var(--green-soft);color:var(--green)}
.top .avatar{width:34px;height:34px;border-radius:50%;background:#e2e8f0;display:inline-flex;align-items:center;justify-content:center;font:700 13px/1 var(--sans);color:var(--ink)}
.top .email{font:500 13px/1 var(--mono);color:var(--sub)}

/* Body */
.body{padding:22px 28px 40px;display:flex;flex-direction:column;gap:16px;overflow:auto}

/* Banner */
.banner{display:flex;align-items:center;gap:14px;padding:16px 20px;border-radius:12px;flex-wrap:wrap}
.banner .coin{font-size:28px;line-height:1;flex-shrink:0}
.banner h2{font:800 18px/1.15 var(--sans);letter-spacing:-0.01em}
.banner p{font:500 12.5px/1.35 var(--sans);margin-top:3px}
.banner .cta{background:#fff;color:var(--ink);border:0;border-radius:8px;padding:10px 16px;font:700 13px/1 var(--sans);cursor:pointer;margin-left:auto;flex-shrink:0}
.banner.green{background:linear-gradient(135deg,#059669 0%,#10b981 100%);color:#fff}
.banner.green p{color:rgba(255,255,255,.88)}
.banner.yellow{background:#fff7ed;border:1px solid #fed7aa;color:#9a3412}
.banner.red{background:#fef2f2;border:1px solid #fecaca;color:#991b1b}

/* KPI */
.kpi{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.kpi .card{background:#fff;border:1px solid var(--line);border-radius:12px;padding:16px 18px;display:flex;flex-direction:column;gap:5px}
.kpi .card .k{font:700 10.5px/1 var(--mono);color:var(--mute);text-transform:uppercase;letter-spacing:.12em}
.kpi .card .v{font:800 24px/1 var(--sans);letter-spacing:-0.025em;margin-top:4px}
.kpi .card .sub{font:500 11.5px/1.3 var(--mono);color:var(--mute)}
.kpi .card.green .v{color:var(--green)}
.kpi .card.green{background:var(--green-soft);border-color:rgba(5,150,105,0.18)}
.kpi .card.yellow{background:var(--yellow-soft);border-color:rgba(217,119,6,.25)}
.kpi .card.yellow .v{color:var(--yellow)}

/* Grid & card */
.grid2{display:grid;grid-template-columns:1.15fr 1fr;gap:16px}
@media (max-width:1100px){.grid2{grid-template-columns:1fr}}
.card{background:#fff;border:1px solid var(--line);border-radius:12px;padding:18px 20px}
.card h3{font:700 15px/1.3 var(--sans);letter-spacing:-0.01em;margin-bottom:8px;display:flex;align-items:center;gap:8px}
.card h3 .tag{font:700 10px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;padding:4px 8px;border-radius:6px;background:var(--accent-soft);color:var(--accent)}
.card h3 .tag.green{background:var(--green-soft);color:var(--green)}
.card h3 .tag.yellow{background:var(--yellow-soft);color:var(--yellow)}
.card h3 .tag.red{background:var(--red-soft);color:var(--red)}
.card .subtle{color:var(--sub);font:500 13.5px/1.5 var(--sans);margin-bottom:10px}

/* Key bar */
.key-bar{display:flex;align-items:center;gap:10px;background:#f8fafc;border:1.5px solid var(--line2);border-radius:10px;padding:10px 12px;font:500 13px/1.3 var(--mono);color:var(--sub)}
.key-bar.saved{background:#ecfdf5;border-color:#a7f3d0;color:var(--green)}
.key-bar input{flex:1;border:0;background:transparent;outline:none;font:inherit;color:inherit}
.key-bar.empty input::placeholder{color:var(--mute)}

/* Terminal */
.term{background:#0b1220;color:#a7f3d0;border-radius:10px;padding:11px 14px;font:500 12.5px/1.5 var(--mono);display:flex;align-items:center;gap:10px;overflow-x:auto}
.term .prompt{color:#64748b}
.term .copy{margin-left:auto;background:var(--accent);color:#fff;border:0;border-radius:6px;padding:6px 12px;font:700 11px/1 var(--sans);flex-shrink:0}

/* Chart */
.chart{height:130px;background:linear-gradient(180deg,rgba(5,150,105,0.12),transparent);border-radius:8px;position:relative;overflow:hidden;margin-top:8px}
.chart svg{width:100%;height:100%}
.chart .x{position:absolute;bottom:6px;left:10px;right:10px;display:flex;justify-content:space-between;font:500 10px/1 var(--mono);color:var(--mute)}

/* Ref */
.ref-row{display:flex;align-items:center;gap:10px;background:#f8fafc;border:1.5px solid var(--line2);border-radius:10px;padding:9px 12px;font:500 12.5px/1.3 var(--mono);color:var(--ink)}
.ref-row .copy{margin-left:auto;background:var(--ink);color:#fff;border:0;border-radius:6px;padding:6px 12px;font:700 11px/1 var(--sans)}
.ref-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:12px}
.ref-stats .cell{background:#f8fafc;border:1px solid var(--line);border-radius:8px;padding:10px 12px}
.ref-stats .cell .k{font:600 10px/1 var(--mono);color:var(--mute);letter-spacing:.08em;text-transform:uppercase}
.ref-stats .cell .v{font:800 17px/1 var(--sans);margin-top:4px}

/* Table */
table{width:100%;border-collapse:collapse;font-size:13px}
th,td{text-align:left;padding:8px 4px;border-bottom:1px solid var(--line)}
th{font:700 10px/1 var(--mono);color:var(--mute);text-transform:uppercase;letter-spacing:.08em}
td.mono{font-family:var(--mono);color:var(--sub);font-size:12px}
td.green{color:var(--green);font-weight:700;font-family:var(--mono)}
tr:last-child td{border-bottom:none}

.empty{background:#f8fafc;border:2px dashed var(--line2);border-radius:12px;padding:28px;text-align:center;color:var(--mute);font:500 13px/1.5 var(--sans)}

.btn-pri{background:var(--ink);color:#fff;border:0;border-radius:10px;padding:12px 18px;font:700 14px/1 var(--sans);cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;gap:6px}
.btn-pri.blue{background:var(--accent)}
.btn-pri.green{background:var(--green)}
.btn-sec{background:#fff;color:var(--ink);border:1px solid var(--line2);border-radius:10px;padding:12px 18px;font:600 14px/1 var(--sans);cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;gap:6px}

/* Annotations under the wireframe */
.notes{max-width:1280px;margin:18px auto 40px;display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
@media (max-width:900px){.notes{grid-template-columns:1fr}}
.note{background:#fff;border:1px solid var(--line);border-radius:10px;padding:14px 16px}
.note .t{font:700 11.5px/1 var(--mono);color:var(--accent);letter-spacing:.08em;text-transform:uppercase;margin-bottom:6px}
.note p{font:500 13.5px/1.5 var(--sans);color:var(--sub)}
.note p b{color:var(--ink);font-weight:700}

/* Modal */
.modal-bg{background:rgba(5,10,25,0.58);padding:24px;border-radius:12px;margin-top:10px}
.modal-card{background:linear-gradient(135deg,#059669 0%,#0a84ff 100%);color:#fff;border-radius:14px;padding:24px;max-width:520px;margin:0 auto;position:relative}
.modal-card .tag{font:700 11px/1 var(--mono);text-transform:uppercase;letter-spacing:.14em;opacity:.85;margin-bottom:6px}
.modal-card h3{font:800 22px/1.18 var(--sans);letter-spacing:-0.02em;margin-bottom:8px}
.modal-card p{font:500 13.5px/1.5 var(--sans);color:rgba(255,255,255,.92);margin-bottom:16px}
.modal-card .x{position:absolute;top:14px;right:14px;width:28px;height:28px;border-radius:50%;background:rgba(255,255,255,.15);border:0;color:#fff;font:700 14px/1 var(--sans);cursor:pointer}

/* Signup form */
.signup-hero{text-align:center;padding:60px 20px 28px;max-width:500px;margin:0 auto}
.signup-hero .gift{display:inline-block;padding:6px 14px;background:linear-gradient(90deg,#059669,#10b981);color:#fff;border-radius:999px;font:800 11.5px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;margin-bottom:18px}
.signup-hero h1{font:900 36px/1.08 var(--sans);letter-spacing:-0.03em;margin-bottom:10px}
.signup-hero h1 .green{background:linear-gradient(180deg,transparent 68%,rgba(5,150,105,0.22) 68%)}
.signup-hero p{color:var(--sub);font:500 15px/1.5 var(--sans)}
.signup-hero p b{color:var(--ink);font-weight:700}
.signup-form{max-width:420px;margin:0 auto;background:#fff;border:1px solid var(--line);border-radius:14px;padding:22px;box-shadow:0 14px 36px -20px rgba(15,23,42,.15)}
.signup-form .grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.signup-form label{font:700 10px/1 var(--mono);color:var(--sub);text-transform:uppercase;letter-spacing:.1em;display:block;margin-bottom:4px}
.signup-form input{width:100%;background:#fff;border:1.5px solid var(--line2);border-radius:10px;padding:12px 14px;font:500 14px/1.3 var(--sans);color:var(--ink);margin-bottom:10px}
.signup-form input:focus{border-color:var(--accent);outline:0;box-shadow:0 0 0 3px var(--accent-soft)}
.signup-form .btn{width:100%;background:var(--ink);color:#fff;border:0;border-radius:10px;padding:13px;font:700 14px/1 var(--sans);cursor:pointer;margin-top:4px}
.signup-form .btn.blue{background:var(--accent)}
.signup-form .foot{text-align:center;margin-top:12px;font:500 12.5px/1.4 var(--mono);color:var(--mute)}

/* Annotation */
.anno{
  display:inline-block;background:#fff;border:1px solid var(--line);border-radius:8px;
  padding:5px 10px;font:500 11.5px/1.3 var(--sans);color:var(--sub);
  box-shadow:0 4px 10px -6px rgba(0,0,0,.1);margin:4px 0;
}
.anno b{color:var(--ink);font-weight:700}

/* Arrow */
.arrow-lg{text-align:center;font:800 22px/1 var(--mono);color:var(--mute);padding:20px 0}