:root{
  --bg:#0b0f14;
  --card:#111827;
  --muted:#9ca3af;
  --text:#e5e7eb;
  --line:#1f2937;
  --primary:#60a5fa;
  --danger:#f87171;
  --ok:#34d399;
  --shadow: 0 10px 30px rgba(0,0,0,.35);
  --radius:14px;
  --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono","Courier New", monospace;
  --sans: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
}
*{box-sizing:border-box}
body{
  margin:0; font-family:var(--sans);
  background: radial-gradient(1200px 500px at 20% -10%, rgba(96,165,250,.22), transparent 60%),
              radial-gradient(900px 450px at 80% 0%, rgba(52,211,153,.14), transparent 60%),
              var(--bg);
  color:var(--text);
}
.wrap{max-width:1100px; margin:28px auto; padding:0 16px;}
.header{display:flex; justify-content:space-between; align-items:flex-start; gap:14px; margin-bottom:18px;}
h1{margin:0; font-size:22px;}
.sub{margin:6px 0 0; color:var(--muted); font-size:13px;}
.card{
  background: rgba(17,24,39,.92);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow: var(--shadow);
  padding:16px;
}
.grid{display:grid; grid-template-columns:1.2fr .8fr; gap:14px; margin-top:14px;}
@media (max-width: 900px){ .grid{grid-template-columns:1fr;} }

h2{margin:0 0 10px; font-size:16px;}
.form{display:grid; gap:10px;}
label{display:grid; gap:6px; font-size:13px; color:var(--muted);}
input{
  padding:10px 12px;
  border-radius:12px;
  border:1px solid var(--line);
  background:#0f172a;
  color:var(--text);
  outline:none;
}
input:focus{border-color: rgba(96,165,250,.7); box-shadow:0 0 0 3px rgba(96,165,250,.15);}
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:10px 12px; border-radius:12px;
  border:1px solid var(--line);
  background:#0f172a; color:var(--text);
  text-decoration:none; cursor:pointer;
}
.btn.primary{background: rgba(96,165,250,.16); border-color: rgba(96,165,250,.35);}
.btn.danger{background: rgba(248,113,113,.12); border-color: rgba(248,113,113,.28);}
.actions{display:flex; gap:10px; flex-wrap:wrap;}
.hint{margin:8px 0 0; color:var(--muted); font-size:12px;}
.muted{color:var(--muted);}
.small{font-size:12px;}
.mono{font-family:var(--mono);}
.right{text-align:right;}

.toast{margin:10px 0; padding:10px 12px; border-radius:12px; border:1px solid var(--line);}
.toast.ok{border-color: rgba(52,211,153,.35); background: rgba(52,211,153,.08);}
.toast.err{border-color: rgba(248,113,113,.35); background: rgba(248,113,113,.08);}

.table{width:100%; border-collapse:collapse; font-size:13px;}
.table th,.table td{padding:10px 8px; border-bottom:1px solid var(--line); vertical-align:top;}
.table th{color:var(--muted); font-weight:600; text-align:left;}

.list{list-style:none; padding:0; margin:0; display:grid; gap:10px;}
.item{padding:12px; border:1px solid var(--line); border-radius:12px; background:#0f172a;}
.item .top{display:flex; align-items:center; justify-content:space-between; gap:10px;}
.title{font-weight:600;}
.tag{font-size:12px; color:#0b0f14; background: var(--ok); padding:4px 8px; border-radius:999px;}
.link{color:var(--primary); word-break:break-all;}
.meta{margin-top:6px;}