/* ==========================================================================
   Void Pixel Studios — admin.css  (studio control room)
   ========================================================================== */
:root {
  --void-900:#07070E; --void-850:#090917; --void-800:#0B0B1A; --void-750:#0F0F22; --void-700:#12122A;
  --hairline:255 255 255;
  --violet:#7C3AED; --violet-lite:#A78BFA; --rose:#F43F5E; --cyan:#22D3EE; --green:#34D399; --amber:#FB923C;
  --text:#E7E9F4; --text-soft:#C2C6DC; --text-muted:#969BB6; --text-faint:#6A6F8C;
  --font-display:"Russo One",sans-serif; --font-hud:"Chakra Petch",monospace; --font-body:"Space Grotesk",system-ui,sans-serif;
  --r-sm:10px; --r-md:14px; --r-lg:20px; --r-pill:999px;
  --ease:cubic-bezier(.22,.61,.36,1); --spring:cubic-bezier(.34,1.56,.64,1); --t:200ms;
}
*,*::before,*::after{box-sizing:border-box}*{margin:0}
html{-webkit-text-size-adjust:100%}
body{font-family:var(--font-body);color:var(--text);background:
  radial-gradient(1100px 700px at 85% -10%, rgba(124,58,237,.16), transparent 60%),
  radial-gradient(900px 700px at 0% 10%, rgba(34,211,238,.08), transparent 55%), var(--void-900);
  min-height:100vh;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;cursor:pointer;background:none;border:none}
input,textarea,select{font:inherit;color:inherit}
::selection{background:rgba(124,58,237,.45);color:#fff}
:focus-visible{outline:2px solid var(--violet-lite);outline-offset:2px;border-radius:4px}
code{font-family:var(--font-hud);background:rgb(var(--hairline)/.07);padding:1px 6px;border-radius:6px;color:var(--violet-lite)}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border-radius:var(--r-pill);font-family:var(--font-hud);font-weight:600;font-size:.84rem;letter-spacing:.02em;transition:transform var(--t) var(--spring),background var(--t),border-color var(--t),box-shadow var(--t),color var(--t)}
.btn:active{transform:scale(.96)}
.btn--primary{background:var(--rose);color:#fff;box-shadow:0 10px 26px -12px rgba(244,63,94,.7)}
.btn--primary:hover{box-shadow:0 16px 36px -12px rgba(244,63,94,.85)}
.btn--ghost{background:rgb(var(--hairline)/.05);border:1px solid rgb(var(--hairline)/.14);color:var(--text)}
.btn--ghost:hover{background:rgb(var(--hairline)/.1);border-color:rgba(167,139,250,.5)}
.btn--danger{background:rgb(var(--hairline)/.04);border:1px solid rgba(244,63,94,.35);color:#ff9aab}
.btn--danger:hover{background:rgba(244,63,94,.16);color:#fff}
.btn--sm{padding:7px 11px;font-size:.76rem}

/* login */
.login{position:fixed;inset:0;display:grid;place-items:center;padding:24px;z-index:50}
.login__card{width:min(420px,100%);display:grid;gap:14px;padding:30px;border-radius:var(--r-lg);background:linear-gradient(180deg,rgba(18,18,42,.9),rgba(10,10,24,.95));border:1px solid rgb(var(--hairline)/.1);box-shadow:0 40px 90px -40px #000}
.login__brand{display:flex;align-items:center;gap:10px}
.login__word,.abar__word{font-family:var(--font-display);font-size:1.05rem;letter-spacing:.04em}
.login__word b,.abar__word b{color:var(--violet-lite);font-weight:400}
.login__sub{color:var(--text-muted);font-size:.92rem;margin-bottom:4px}
.login__label{font-family:var(--font-hud);font-size:.74rem;letter-spacing:.08em;text-transform:uppercase;color:var(--text-muted)}
.login__input{padding:13px 15px;border-radius:var(--r-md);background:rgba(7,7,16,.7);border:1px solid rgb(var(--hairline)/.12);color:#fff}
.login__input:focus{outline:none;border-color:var(--violet);box-shadow:0 0 0 3px rgba(124,58,237,.22)}
.login__err{color:var(--rose);font-family:var(--font-hud);font-size:.8rem;min-height:1em}
.login__hint{color:var(--text-faint);font-size:.78rem}
.login__mark{display:grid;place-items:center;filter:drop-shadow(0 0 10px rgba(124,58,237,.5))}

/* app shell */
.app[hidden]{display:none}
.abar{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:16px;flex-wrap:wrap;padding:12px 20px;background:rgba(9,9,20,.86);backdrop-filter:blur(14px);border-bottom:1px solid rgb(var(--hairline)/.08)}
.abar__brand{display:flex;align-items:center;gap:10px}
.abar__status{font-family:var(--font-hud);font-size:.76rem;color:var(--green);margin-left:6px}
.abar__status.dirty{color:var(--amber)}
.abar__actions{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap}
.alayout{display:grid;grid-template-columns:230px 1fr;gap:24px;max-width:1180px;margin:0 auto;padding:24px 20px 80px}
.atabs{position:sticky;top:78px;align-self:start;display:grid;gap:6px}
.atabs button{display:flex;align-items:center;gap:10px;padding:12px 14px;border-radius:var(--r-md);font-family:var(--font-hud);font-weight:600;font-size:.86rem;color:var(--text-soft);text-align:left;transition:background var(--t),color var(--t)}
.atabs button:hover{background:rgb(var(--hairline)/.05);color:#fff}
.atabs button.is-active{background:rgba(124,58,237,.18);color:#fff;box-shadow:inset 0 0 0 1px rgba(124,58,237,.4)}
.atabs span.num{margin-left:auto;font-size:.7rem;color:var(--text-faint)}

/* panels */
.apanel{min-width:0;display:grid;gap:20px}
.apanel h1{font-family:var(--font-body);font-weight:700;font-size:1.5rem;letter-spacing:-.01em}
.apanel .lead{color:var(--text-muted);font-size:.92rem;margin-top:-10px}
.card{border-radius:var(--r-lg);background:linear-gradient(180deg,rgba(16,16,38,.6),rgba(10,10,24,.8));border:1px solid rgb(var(--hairline)/.08);padding:20px}
.card>h2{font-family:var(--font-hud);font-weight:700;font-size:.82rem;letter-spacing:.1em;text-transform:uppercase;color:var(--violet-lite);margin-bottom:16px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}

/* fields */
.fld{display:grid;gap:6px;min-width:0}
.fld>label{font-family:var(--font-hud);font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:var(--text-muted)}
.fld input[type=text],.fld input[type=email],.fld input[type=url],.fld input[type=number],.fld textarea,.fld select{width:100%;padding:11px 13px;border-radius:var(--r-md);background:rgba(7,7,16,.6);border:1px solid rgb(var(--hairline)/.12);color:#fff;transition:border-color var(--t),box-shadow var(--t)}
.fld textarea{resize:vertical;min-height:70px;line-height:1.5}
.fld input:focus,.fld textarea:focus,.fld select:focus{outline:none;border-color:var(--violet);box-shadow:0 0 0 3px rgba(124,58,237,.2)}
.fld .hint{font-size:.74rem;color:var(--text-faint)}
.fld--row{display:flex;align-items:center;gap:10px}
.swatch{width:38px;height:38px;border-radius:10px;border:1px solid rgb(var(--hairline)/.18);padding:0;cursor:pointer;background:none}
input[type=color]{-webkit-appearance:none;appearance:none}
input[type=color]::-webkit-color-swatch-wrapper{padding:0}
input[type=color]::-webkit-color-swatch{border:none;border-radius:8px}

/* list editor */
.list{display:grid;gap:14px}
.row{border-radius:var(--r-md);border:1px solid rgb(var(--hairline)/.1);background:rgb(var(--hairline)/.02);padding:16px}
.row__head{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.row__title{font-family:var(--font-hud);font-weight:700;color:#fff}
.row__tools{margin-left:auto;display:flex;gap:6px}
.iconbtn{width:32px;height:32px;border-radius:9px;display:grid;place-items:center;color:var(--text-soft);border:1px solid rgb(var(--hairline)/.12);background:rgb(var(--hairline)/.03);transition:all var(--t)}
.iconbtn:hover{color:#fff;border-color:rgba(167,139,250,.5);background:rgb(var(--hairline)/.08)}
.iconbtn--danger:hover{color:#fff;border-color:rgba(244,63,94,.5);background:rgba(244,63,94,.16)}
.iconbtn:disabled{opacity:.3;cursor:not-allowed}
.add-row{justify-self:start}

/* media uploader */
.media{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.media__thumb{width:96px;height:64px;border-radius:10px;object-fit:cover;background:var(--void-700) center/cover no-repeat;border:1px solid rgb(var(--hairline)/.12);display:grid;place-items:center;color:var(--text-faint);font-family:var(--font-hud);font-size:.62rem;text-transform:uppercase}
.media__thumb--av{width:64px;height:64px;border-radius:12px}
.media__btns{display:flex;flex-direction:column;gap:6px}
.chips-edit{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.chip-x{display:inline-flex;align-items:center;gap:7px;padding:6px 8px 6px 12px;border-radius:var(--r-pill);background:rgb(var(--hairline)/.05);border:1px solid rgb(var(--hairline)/.1);font-family:var(--font-hud);font-size:.78rem}
.chip-x button{width:18px;height:18px;border-radius:50%;display:grid;place-items:center;color:var(--text-muted);background:rgb(var(--hairline)/.08)}
.chip-x button:hover{color:#fff;background:var(--rose)}
.chip-add{width:120px}

/* preview pill */
.preview-acc{width:16px;height:16px;border-radius:5px;flex:0 0 auto}
.export-pre{font-family:var(--font-hud);font-size:.78rem;color:var(--text-soft);background:rgba(7,7,16,.7);border:1px solid rgb(var(--hairline)/.1);border-radius:var(--r-md);padding:14px;max-height:280px;overflow:auto;white-space:pre-wrap;word-break:break-word}
.note{font-size:.84rem;color:var(--text-muted);line-height:1.6}
.note b{color:var(--text)}

/* toast */
.toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%) translateY(12px);z-index:60;background:var(--void-700);border:1px solid rgba(52,211,153,.4);color:#fff;font-family:var(--font-hud);font-size:.84rem;padding:11px 18px;border-radius:var(--r-pill);box-shadow:0 20px 50px -20px #000;opacity:0;transition:opacity var(--t),transform var(--t)}
.toast[hidden]{display:none}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.toast.err{border-color:rgba(244,63,94,.5)}

@media(max-width:820px){
  .alayout{grid-template-columns:1fr}
  .atabs{position:static;grid-auto-flow:column;overflow:auto;gap:8px}
  .atabs button{white-space:nowrap}
  .grid2,.grid3{grid-template-columns:1fr}
}