:root{
  --bg:#070A12;--panel:rgba(255,255,255,.07);--stroke:rgba(255,255,255,.12);
  --text:rgba(255,255,255,.92);--muted:rgba(255,255,255,.65);--r:18px;
  --shadow:0 18px 55px rgba(0,0,0,.55);--ease:cubic-bezier(.2,.8,.2,1);
}
*{box-sizing:border-box} html,body{height:100%}
body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial;color:var(--text);background:var(--bg);overflow-x:hidden}
.bg{position:fixed;inset:0;z-index:-1;overflow:hidden}
.bg__blob{position:absolute;width:62vmax;height:62vmax;filter:blur(50px);opacity:.7;animation:floaty 14s var(--ease) infinite alternate}
.bg__blob--a{left:-20vmax;top:-22vmax;background:radial-gradient(circle at 30% 30%,#7c3aed,transparent 60%),radial-gradient(circle at 70% 60%,#22c55e,transparent 62%)}
.bg__blob--b{right:-26vmax;bottom:-24vmax;background:radial-gradient(circle at 30% 30%,#06b6d4,transparent 60%),radial-gradient(circle at 60% 70%,#f97316,transparent 62%);animation-duration:18s}
.bg__grid{position:absolute;inset:0;background-image:linear-gradient(to right,rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(to bottom,rgba(255,255,255,.05) 1px,transparent 1px);background-size:64px 64px;opacity:.25}
@keyframes floaty{from{transform:translate(-2%,-1%) scale(1)}to{transform:translate(2%,3%) scale(1.05)}}
.shell{width:min(760px,calc(100% - 28px));margin:32px auto 56px;display:grid;gap:16px}
.card{padding:18px;border-radius:var(--r);background:linear-gradient(180deg,rgba(255,255,255,.09),rgba(255,255,255,.04));border:1px solid var(--stroke);box-shadow:0 14px 32px rgba(0,0,0,.35);backdrop-filter:blur(10px)}
.hero{display:flex;gap:14px;align-items:center}
.avatar{width:58px;height:58px;border-radius:16px;display:flex;align-items:center;justify-content:center;font-weight:800;background:linear-gradient(135deg,rgba(124,58,237,.55),rgba(6,182,212,.35));border:1px solid rgba(255,255,255,.18)}
h1,h2{margin:0} .muted{color:var(--muted)}
.chip,.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:10px 12px;border-radius:999px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.06);color:var(--text);text-decoration:none;cursor:pointer;transition:transform .18s var(--ease),background .18s var(--ease),border-color .18s var(--ease)}
.chip:hover,.btn:hover{transform:translateY(-1px);background:rgba(255,255,255,.10);border-color:rgba(255,255,255,.20)}
.btn--ghost{background:transparent}
.btn--danger{background:rgba(248,113,113,.14);border-color:rgba(248,113,113,.28)}
.links{display:grid;gap:12px}
.linkbtn{display:flex;gap:12px;align-items:center;padding:14px;border-radius:16px;text-decoration:none;color:var(--text);
  background:linear-gradient(135deg,rgba(255,255,255,.10),rgba(255,255,255,.06));border:1px solid rgba(255,255,255,.12);
  transition:transform .18s var(--ease),box-shadow .18s var(--ease),border-color .18s var(--ease)}
.linkbtn:hover{transform:translateY(-2px);border-color:rgba(255,255,255,.18);box-shadow:0 18px 40px rgba(0,0,0,.45)}
.icon{width:42px;height:42px;border-radius:14px;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12)}
.icon svg{width:22px;height:22px}
.footer{text-align:center;color:var(--muted);font-size:12px}
.grid2{display:grid;gap:14px;grid-template-columns:1fr}
@media(min-width:720px){.grid2{grid-template-columns:1fr 1fr}}
.field{display:grid;gap:8px} label{font-size:13px;color:rgba(255,255,255,.82)}
input,select,textarea{width:100%;padding:12px;border-radius:14px;background:rgba(0,0,0,.18);color:var(--text);
  border:1px solid rgba(255,255,255,.14);outline:none}
textarea{min-height:110px;resize:vertical}
.table{border-radius:16px;overflow:hidden;border:1px solid rgba(255,255,255,.12);background:rgba(0,0,0,.15)}
.table__head,.table__row{display:grid;grid-template-columns:60px 70px 1.1fr 1.4fr 120px 170px;gap:10px;padding:10px 12px;align-items:center}
.table__head{background:rgba(255,255,255,.06);color:rgba(255,255,255,.72);font-size:12px;text-transform:uppercase;letter-spacing:.08em}
.table__row{border-top:1px solid rgba(255,255,255,.08)}
.drag{cursor:grab;display:inline-flex;align-items:center;justify-content:center;width:38px;height:36px;border-radius:12px;border:1px dashed rgba(255,255,255,.18);background:rgba(255,255,255,.05)}
.badge{display:inline-flex;justify-content:center;align-items:center;border-radius:999px;padding:6px 10px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.06);font-size:12px}
.badge--off{border-color:rgba(251,191,36,.22);background:rgba(251,191,36,.08);color:rgba(251,191,36,.95)}
.actions{display:flex;gap:8px;justify-content:flex-end}
.small{padding:9px 10px;border-radius:12px;font-size:13px}
.modal{position:fixed;inset:0;display:none}
.modal[aria-hidden="false"]{display:block}
.modal__backdrop{position:absolute;inset:0;background:rgba(0,0,0,.55);backdrop-filter:blur(6px)}
.modal__panel{position:relative;width:min(560px,calc(100% - 28px));margin:9vh auto 0;padding:14px;border-radius:18px;border:1px solid rgba(255,255,255,.14);
  background:linear-gradient(180deg,rgba(255,255,255,.10),rgba(255,255,255,.05));box-shadow:var(--shadow)}
.toast{position:fixed;left:50%;bottom:18px;transform:translateX(-50%);padding:10px 12px;border-radius:999px;border:1px solid rgba(255,255,255,.14);background:rgba(0,0,0,.55);opacity:0;pointer-events:none;transition:opacity .18s var(--ease),transform .18s var(--ease)}
.toast--show{opacity:1;transform:translateX(-50%) translateY(-4px)}
body[data-button-style="outline"] .linkbtn{background:transparent;border:1px solid rgba(255,255,255,.20)}
body[data-button-style="solid"] .linkbtn{background:rgba(255,255,255,.10)}
body[data-button-style="neon"] .linkbtn{border-color:rgba(124,58,237,.35);box-shadow:0 0 0 1px rgba(124,58,237,.22),0 16px 36px rgba(0,0,0,.45)}