/* assets/css/modern.css */

/* ---------- Base ---------- */
:root{
  --bg: #0f1115;
  --bg-soft:#151923;
  --panel:#1b2030;
  --text:#e7ecf3;
  --muted:#9aa5b1;
  --brand:#6aa6ff;
  --ok:#2ecc71;
  --warn:#f1c40f;
  --danger:#ff5c5c;
  --ring: rgba(106,166,255,.35);
  --radius: 10px;
  --gap: 12px;
  --shadow: 0 8px 24px rgba(0,0,0,.25);
}

*{box-sizing:border-box}
html,body{height:100%}
html{scroll-behavior:smooth}
body{
  margin:0;
  font: 16px/1.5 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial,sans-serif;
  color:var(--text);
  background:linear-gradient(180deg,#0c0f14, #0f1115 30%, #0f1115);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

img{max-width:100%;height:auto}
a{color:var(--brand);text-decoration:none}
a:hover{text-decoration:underline}
button{font:inherit}

/* ---------- Layout ---------- */
.container{
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 16px;
}

.topbar{
  position:sticky; top:0; z-index:50;
  background:rgba(15,17,21,.7);
  backdrop-filter:saturate(1.2) blur(8px);
  border-bottom:1px solid rgba(255,255,255,.06);
}
.topbar .wrap{
  display:flex; align-items:center; justify-content:space-between;
  gap: var(--gap); height:64px;
}
.brand{display:inline-flex; align-items:center; gap:10px; color:var(--text)}
.brand img{height:28px; width:auto; display:block}

.nav{display:flex; gap:8px; align-items:center}
.nav a.btn.ghost{padding:.5rem .8rem}

.hero{padding:32px 0 10px}
.lead{color:var(--muted); margin-top:8px}

/* ---------- Cards / Panels ---------- */
.card{
  background:var(--panel);
  border:1px solid rgba(255,255,255,.06);
  border-radius:var(--radius);
  padding:16px;
  box-shadow:var(--shadow);
  margin:18px 0;
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:.6rem 1rem;
  border-radius: calc(var(--radius) - 2px);
  border:1px solid transparent;
  background:linear-gradient(180deg,#1b62ff,#3f88ff);
  color:#fff; cursor:pointer; text-decoration:none;
  transition:transform .06s ease, box-shadow .06s ease, filter .2s;
  box-shadow:0 4px 14px rgba(63,136,255,.35);
}
.btn:hover{filter:brightness(1.05)}
.btn:active{transform:translateY(1px)}
.btn.ghost{
  background:transparent; color:var(--text);
  border-color:rgba(255,255,255,.12); box-shadow:none;
}
.btn.ghost:hover{background:rgba(255,255,255,.06)}

/* ---------- Forms / Dropzone ---------- */
.drop{
  border:2px dashed rgba(255,255,255,.15);
  border-radius:var(--radius);
  padding:18p