:root {
  --bg:#0b0b10; --card:#14141c; --txt:#e9e9ef; --muted:#a9a9b6; --accent:#7aa2ff;
}
*{ box-sizing:border-box }
body{
  margin:0;
  background:var(--bg);
  color:var(--txt);
  font-size:16px;
  line-height:1.6;
  font-family:'Montserrat', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
}
.wrap{ max-width:1024px; margin:0 auto; padding:28px 20px 64px }
header{ display:flex; align-items:center; justify-content:space-between; gap:16px }
.brand{ display:flex; align-items:center; gap:12px; text-decoration:none; color:var(--txt) }
.logo{ width:28px; height:28px }
nav a{ color:var(--muted); text-decoration:none; margin-left:18px }
nav a:hover{ color:var(--txt) }
h1{ font-size:28px; margin:18px 0 8px }
h2{ font-size:20px; margin:18px 0 8px }
h3{ font-size:18px; margin:16px 0 8px }
p.muted, li.muted{ color:var(--muted) }
.card{ background:var(--card); border:1px solid rgba(255,255,255,.08); border-radius:14px; padding:16px; margin-top:16px }
.grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px }
.grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:14px }
@media(max-width:900px){ .grid, .grid-2{ grid-template-columns:1fr } }
.row{ display:flex; gap:12px; align-items:center; flex-wrap:wrap }
.btn{ display:inline-block; padding:10px 14px; border-radius:12px; border:1px solid rgba(255,255,255,.12);
      text-decoration:none; color:var(--txt); background:transparent; cursor:pointer }
.btn.primary{ background:var(--accent); color:#0a0a0a; border-color:transparent }
.btn:disabled{ opacity:.6; cursor:not-allowed }
.pill{ display:inline-block; background:rgba(122,162,255,.18); padding:2px 8px; border-radius:999px; font-size:12px; margin-left:8px; color:var(--txt) }
pre{ white-space:pre-wrap; background:#0f0f16; border:1px solid rgba(255,255,255,.12); border-radius:10px; padding:10px; overflow:auto }
table{ width:100%; border-collapse:collapse; margin:10px 0 }
th,td{ text-align:left; padding:10px; border-bottom:1px solid rgba(255,255,255,.08) }
.sep{ height:1px; background:rgba(255,255,255,.08); margin:16px 0 }
.drop{ background:#0f0f16; border:1px dashed rgba(255,255,255,.18); border-radius:12px; padding:14px; text-align:center; color:var(--muted) }
.hint{ position:relative; display:inline-block }
.hint .i{ display:inline-flex; align-items:center; justify-content:center; width:16px; height:16px; font-size:12px;
          border:1px solid rgba(255,255,255,.3); border-radius:50%; margin-left:6px; color:var(--muted) }
.hint .bubble{ display:none; position:absolute; z-index:10; left:0; top:22px; min-width:240px; background:var(--card); color:var(--txt);
               border:1px solid rgba(255,255,255,.12); border-radius:10px; padding:10px 12px; box-shadow:0 8px 24px rgba(0,0,0,.35) }
.hint:hover .bubble, .hint:focus-within .bubble{ display:block }
.file-ui .filename{ color:var(--muted) }
#file{ position:absolute; left:-9999px }
.card.wide{ grid-column:1 / -1 }
footer{ margin-top:36px; color:var(--muted); font-size:14px }
.hero{ display:grid; grid-template-columns:1.2fr .8fr; gap:18px; align-items:center }
.hero h1{ font-size:34px }
.hero p{ color:var(--muted) }
@media(max-width:900px){ .hero{ grid-template-columns:1fr } }