*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg:       #0d1117;
  --bg2:      #161b22;
  --bg3:      #1c2128;
  --border:   #30363d;
  --green:    #00c853;
  --green-dim:#00c85322;
  --red:      #f85149;
  --text:     #e6edf3;
  --muted:    #8b949e;
}

body { background: var(--bg); color: var(--text); font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; min-height: 100vh; }

/* NAV */
.navbar { display:flex; align-items:center; justify-content:space-between; padding:0 32px; height:60px; background:var(--bg2); border-bottom:1px solid var(--border); position:sticky; top:0; z-index:100; }
.brand { font-size:1.2rem; font-weight:700; }
.brand strong { color:var(--green); }
.nav-links { display:flex; gap:24px; }
.nav-links a { color:var(--muted); text-decoration:none; font-size:.9rem; transition:color .15s; }
.nav-links a:hover, .nav-links a.active { color:var(--green); }

/* HERO */
.hero { background:linear-gradient(180deg,#0d1f12 0%,var(--bg) 100%); padding:40px 32px 32px; border-bottom:1px solid var(--border); }
.hero-stats { display:flex; gap:48px; max-width:1100px; margin:0 auto; }
.stat { display:flex; flex-direction:column; gap:4px; }
.stat-label { font-size:.75rem; color:var(--muted); text-transform:uppercase; letter-spacing:.08em; }
.stat-value { font-size:1.5rem; font-weight:700; color:var(--green); }

/* CONTAINER */
.container { max-width:1100px; margin:0 auto; padding:32px 20px; }

/* SECTION HEADER */
.section-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; }
.section-header h2 { font-size:1.1rem; font-weight:600; }
.refresh-badge { font-size:.8rem; color:var(--muted); }

/* TABLE */
.market-table { width:100%; border-collapse:collapse; font-size:.9rem; }
.market-table th { text-align:left; padding:10px 14px; font-size:.75rem; color:var(--muted); text-transform:uppercase; letter-spacing:.06em; border-bottom:1px solid var(--border); font-weight:600; }
.market-table td { padding:12px 14px; border-bottom:1px solid var(--border); }
.market-table tr:hover td { background:var(--bg3); }
.market-table .rank { color:var(--muted); width:40px; }
.market-table .company-name { font-weight:600; }
.market-table .price { color:var(--green); font-weight:600; font-family:monospace; }
.market-table .value { color:var(--muted); font-family:monospace; }

.green { color:var(--green); }
.red   { color:var(--red); }

/* CARD */
.card { background:var(--bg2); border:1px solid var(--border); border-radius:10px; padding:28px; }

/* STATS ROW */
.stats-row { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.stat-card { background:var(--bg2); border:1px solid var(--border); border-radius:8px; padding:18px; }
.stat-card .stat-label { font-size:.75rem; color:var(--muted); margin-bottom:6px; }
.stat-card .stat-value { font-size:1.4rem; font-weight:700; color:var(--green); }
.stat-card .stat-value.red { color:var(--red); }

/* FORM */
.form-label { display:block; font-size:.85rem; color:var(--muted); margin-bottom:8px; }
.input-row { display:flex; gap:10px; }
.form-input { flex:1; background:var(--bg); border:1px solid var(--border); color:var(--text); padding:10px 14px; border-radius:6px; font-size:.95rem; outline:none; transition:border-color .15s; }
.form-input:focus { border-color:var(--green); }

/* BUTTONS */
.btn-primary { background:var(--green); color:#000; font-weight:700; padding:10px 20px; border:none; border-radius:6px; cursor:pointer; font-size:.9rem; transition:opacity .15s; white-space:nowrap; }
.btn-primary:hover { opacity:.85; }
.btn-secondary { background:var(--bg3); color:var(--text); font-weight:600; padding:10px 18px; border:1px solid var(--border); border-radius:6px; cursor:pointer; font-size:.9rem; width:100%; margin-top:12px; transition:border-color .15s; }
.btn-secondary:hover { border-color:var(--green); }
.btn-ghost { background:transparent; color:var(--muted); padding:8px 0; border:none; cursor:pointer; font-size:.85rem; display:block; width:100%; text-align:center; }
.btn-ghost:hover { color:var(--text); }
.btn-copy { background:transparent; color:var(--green); border:1px solid var(--green); padding:6px 12px; border-radius:4px; cursor:pointer; font-size:.8rem; margin-top:8px; }

/* CODE BOX */
.code-box { text-align:center; background:var(--bg); border:1px solid var(--green); border-radius:8px; padding:24px; margin-bottom:20px; }
.code-label { font-size:.75rem; color:var(--muted); text-transform:uppercase; letter-spacing:.1em; margin-bottom:8px; }
.code-value { font-size:2.5rem; font-weight:900; color:var(--green); letter-spacing:.2em; font-family:monospace; }
.instruction-box { background:var(--bg3); border-radius:8px; padding:16px; margin-bottom:16px; text-align:center; }
.instruction-box p { color:var(--muted); font-size:.85rem; margin-bottom:8px; }
.instruction-box code { font-size:1rem; color:var(--text); background:var(--bg); padding:6px 14px; border-radius:4px; display:inline-block; font-family:monospace; }
.status-msg { padding:12px 16px; border-radius:6px; font-size:.9rem; margin-bottom:12px; }
.status-msg.success { background:var(--green-dim); color:var(--green); border:1px solid var(--green); }
.status-msg.pending { background:#1c1a00; color:#e3b341; border:1px solid #e3b341; }

/* LOADING */
.loading-msg { color:var(--muted); text-align:center; padding:60px 0; font-size:.95rem; }

/* FOOTER */
.footer { text-align:center; padding:32px; color:var(--muted); font-size:.8rem; border-top:1px solid var(--border); margin-top:40px; }

@media(max-width:700px) {
  .hero-stats { flex-wrap:wrap; gap:20px; }
  .stats-row { grid-template-columns:1fr 1fr; }
  .navbar { padding:0 16px; }
  .nav-links { gap:14px; }
}