:root{
  --bg:#a9b8b8;
  --card:#111827;
  --text:#e5e7eb;
  --muted:#9ca3af;
  --accent:#38bdf8;
  --accent-2:#22c55e;
  --danger:#ef4444;
  --border:#1f2937;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font:16px/1.5 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,Helvetica,Arial,sans-serif;
  color:var(--text);
  background:linear-gradient(180deg,#a9b8b8,#a9b8b8 60%,#0f172a);
}

.container{max-width:1100px;margin:24px auto;padding:0 16px}
.container.narrow{max-width:540px}
h1,h2{margin:0 0 12px}
h1{font-size:32px}
h2{font-size:20px}

.topbar{
  display:flex;justify-content:space-between;align-items:center;
  background:rgba(17,24,39,.6);backdrop-filter:blur(6px);
  border-bottom:1px solid var(--border);
  padding:12px 16px; position:sticky; top:0; z-index:10;
}
.brand{font-weight:700;letter-spacing:.3px}
.user{margin-right:12px}
.btn{
  display:inline-block; background:var(--accent); color:#a9b8b8;
  padding:10px 14px; border-radius:10px; text-decoration:none; border:0; cursor:pointer;
  transition:transform .05s ease;
}
.btn:hover{transform:translateY(-1px)}
.btn.outline{background:transparent; color:var(--text); border:1px solid var(--border)}

.card{
  background:rgba(96, 122, 144, 0.7);
  border:1px solid var(--border);
  border-radius:16px; padding:18px; margin:16px 0;
  box-shadow:0 10px 30px rgba(0,0,0,.25);
}

label{display:block;margin:12px 0}
input[type=text], input[type=password], input[type=file]{
  width:100%; padding:10px 12px; border-radius:10px; border:1px solid var(--border);
  background:#0b1022; color:var(--text)
}
.hint{color:var(--muted); font-size:14px}
.muted{color:var(--muted)}

.alert{padding:10px 12px; border-radius:10px; margin:12px 0}
.alert.error{background:rgba(239,68,68,.12); border:1px solid #7f1d1d}

.grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:16px}

.dropzone{
  border:2px dashed var(--border); border-radius:12px;
  padding:24px; text-align:center; margin:12px 0; cursor:pointer;
  transition: background .2s ease, border-color .2s ease;
}
.dropzone.dragover{
  background:rgba(56,189,248,.08);
  border-color: var(--accent);
}

ul{margin:0 0 0 18px}
li{margin:6px 0}
code{background:#a9b8b8;border:1px solid var(--border);padding:2px 6px;border-radius:6px}