/* Admin console — built on the public site's CSS variables so theme previews are exact. */
body.admin{padding-bottom:0;min-height:100vh}
.muted{color:var(--muted)}
small{color:var(--muted);font-weight:400}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;border:1px solid var(--line);background:var(--surface-2);color:var(--text);border-radius:8px;padding:9px 14px;font-weight:600;font-size:14px;cursor:pointer;transition:.15s;white-space:nowrap}
.btn:hover{border-color:var(--primary)}
.btn.primary{background:var(--primary);border-color:var(--primary);color:#fff}
.btn.primary:hover{filter:brightness(1.1)}
.btn.danger{background:transparent;color:var(--danger);border-color:color-mix(in srgb,var(--danger) 45%,transparent)}
.btn.danger:hover{background:var(--danger);color:#fff}
.btn.ghost{background:transparent}
.btn.sm{padding:6px 10px;font-size:12px}
.btn:disabled{opacity:.55;cursor:wait}
.link{background:none;border:0;color:var(--primary-2);cursor:pointer;font-size:13px;padding:0}
input,select,textarea{width:100%;padding:9px 11px;border-radius:8px;border:1px solid var(--line);background:var(--bg);color:var(--text);outline:none}
input:focus,select:focus,textarea:focus{border-color:var(--primary);box-shadow:0 0 0 3px color-mix(in srgb,var(--primary) 25%,transparent)}
input[type=color]{padding:2px;height:38px;cursor:pointer}
input[type=checkbox]{width:auto}
label{display:flex;flex-direction:column;gap:5px;font-size:13px;font-weight:600}
label.check{flex-direction:row;align-items:center;gap:8px;align-self:end;padding-bottom:10px}

/* Auth */
.auth{min-height:100vh;display:grid;place-items:center;padding:24px;background:radial-gradient(circle at 20% 10%,color-mix(in srgb,var(--primary) 22%,transparent),transparent 45%),var(--bg)}
.auth-card{width:min(420px,100%);background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:28px;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:20px}
.auth-form{display:flex;flex-direction:column;gap:14px}
.auth-form h1{font-size:1.4rem}
.auth-links{display:flex;justify-content:space-between}
.oauth{display:flex;flex-direction:column;gap:8px}
.oauth:empty{display:none}
.auth-msg{font-size:13px;padding:10px 12px;border-radius:8px;background:var(--surface-2)}
.auth-msg.err{color:var(--danger)}

/* Shell */
.console{display:grid;grid-template-columns:250px 1fr;min-height:100vh}
.side{background:var(--bg-2);border-right:1px solid var(--line);padding:20px 14px;display:flex;flex-direction:column;gap:24px;position:sticky;top:0;height:100vh}
.side-nav{display:flex;flex-direction:column;gap:4px}
.side-nav button{display:flex;align-items:center;gap:10px;text-align:left;background:transparent;border:0;color:var(--muted);padding:10px 12px;border-radius:8px;font-weight:600;cursor:pointer;font-size:14px}
.side-nav button:hover{background:var(--surface);color:var(--text)}
.side-nav button.on{background:var(--surface-2);color:var(--text);box-shadow:inset 3px 0 0 var(--primary)}
.side-foot{margin-top:auto;display:flex;flex-direction:column;gap:12px}
.who{display:flex;flex-direction:column;gap:4px;font-size:12px;color:var(--muted);word-break:break-all}
.who .link{align-self:flex-start}
.panel{padding:28px clamp(16px,3vw,40px) 60px;min-width:0}
.view-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;margin-bottom:20px;flex-wrap:wrap}
.view-head h1{font-size:1.6rem;margin-bottom:4px}
.head-actions{display:flex;gap:8px}

/* Title list */
.toolbar{display:flex;gap:12px;align-items:center;margin-bottom:16px;flex-wrap:wrap}
.toolbar input{max-width:280px}
.chips{display:flex;gap:6px;flex-wrap:wrap}
.chips button{border:1px solid var(--line);background:var(--surface);color:var(--muted);padding:6px 12px;border-radius:999px;cursor:pointer;font-size:13px;font-weight:600}
.chips button.on{background:var(--primary);border-color:var(--primary);color:#fff}
.title-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px}
.t-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;cursor:pointer;text-align:left;color:inherit;padding:0;display:flex;flex-direction:column;transition:.15s}
.t-card:hover{transform:translateY(-2px);box-shadow:var(--shadow);border-color:var(--primary)}
.t-art{height:110px;background:linear-gradient(145deg,var(--c1),var(--c2));background-size:cover;background-position:center;position:relative;display:grid;place-items:center;font-weight:800;color:#fff}
.t-art.has-poster{background-image:var(--poster)}
.t-star{position:absolute;top:8px;right:8px;background:rgba(0,0,0,.55);color:var(--gold);font-size:11px;padding:3px 7px;border-radius:6px;font-weight:700}
.t-body{padding:12px 14px;display:flex;flex-direction:column;gap:6px}
.t-body h3{font-size:.95rem;line-height:1.3}
.t-body .meta{font-size:12px;color:var(--muted)}

/* Drawer */
.drawer{position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:60;display:flex;justify-content:flex-end}
.drawer[hidden]{display:none}
.drawer-card{width:min(720px,100%);height:100%;background:var(--surface);border-left:1px solid var(--line);display:flex;flex-direction:column;animation:slide .2s ease-out}
@keyframes slide{from{transform:translateX(30px);opacity:0}}
.drawer-head{display:flex;justify-content:space-between;align-items:flex-start;padding:20px 24px 12px}
.drawer-head h2{font-size:1.25rem}
.x{width:36px;height:36px;border-radius:50%;border:1px solid var(--line);background:var(--surface-2);color:var(--text);font-size:20px;cursor:pointer}
.tabs-seg{margin:0 24px}
.drawer-body{padding:20px 24px;overflow-y:auto;flex:1}
.drawer-foot{display:flex;justify-content:space-between;gap:10px;padding-top:8px;border-top:1px solid var(--line);margin-top:6px;padding-top:16px}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;align-content:start}
.span-2{grid-column:span 2}
.art-row{display:grid;grid-template-columns:110px 110px 1fr;gap:14px;align-items:end}
.poster-box{display:flex;gap:12px;align-items:center}
.poster-preview{width:120px;height:72px;border-radius:8px;border:1px dashed var(--line);background:var(--bg) center/cover no-repeat;display:grid;place-items:center;font-size:11px;color:var(--muted);flex-shrink:0}
.poster-preview.set span{display:none}
.poster-actions{display:flex;flex-direction:column;gap:6px}
.poster-actions label.btn{flex-direction:row;font-weight:600}

/* Segmented control */
.seg{display:inline-flex;background:var(--bg);border:1px solid var(--line);border-radius:9px;padding:3px;gap:2px;width:max-content}
.seg button{border:0;background:transparent;color:var(--muted);padding:7px 14px;border-radius:7px;cursor:pointer;font-weight:600;font-size:13px}
.seg button.on{background:var(--surface-2);color:var(--text);box-shadow:0 1px 2px rgba(0,0,0,.2)}

/* Folder manager */
.fm-root{border:1px solid var(--line);border-radius:10px;margin-bottom:12px;background:var(--bg)}
.fm-folder>.fm-row{display:flex;align-items:center;gap:8px;padding:10px 12px;border-bottom:1px solid var(--line)}
.fm-folder>.fm-row strong{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fm-children{padding:4px 0 4px 18px}
.fm-children .fm-folder{border-left:1px dashed var(--line);margin-left:4px}
.fm-file{display:flex;align-items:center;gap:8px;padding:7px 12px;font-size:13px}
.fm-file .name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fm-file .size{color:var(--muted);font-size:12px}
.fm-file .kind{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;padding:2px 6px;border-radius:4px;background:var(--surface-2);color:var(--muted)}
.icon-act{background:transparent;border:1px solid transparent;color:var(--muted);border-radius:6px;cursor:pointer;padding:4px 7px;font-size:12px}
.icon-act:hover{border-color:var(--line);color:var(--text);background:var(--surface)}
.icon-act.del:hover{color:var(--danger)}
.fm-empty{padding:8px 12px;color:var(--muted);font-size:12px;font-style:italic}
.dropzone{border:2px dashed var(--line);border-radius:10px;padding:14px;text-align:center;color:var(--muted);font-size:13px;margin:8px 12px 10px;transition:.15s}
.dropzone.over{border-color:var(--primary);background:color-mix(in srgb,var(--primary) 10%,transparent);color:var(--text)}
.fm-toolbar{display:flex;gap:8px;margin-bottom:14px;flex-wrap:wrap}
.upload-status{font-size:12px;color:var(--muted);padding:0 12px 8px}

/* Theme */
.theme-layout{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:24px;align-items:start}
.theme-editor{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:18px;display:flex;flex-direction:column;gap:18px}
.field-row{display:flex;gap:16px;flex-wrap:wrap}
.field-row label{flex:1;min-width:180px}
.presets{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:13px}
.presets>div{display:flex;gap:8px;flex-wrap:wrap}
.preset{display:flex;align-items:center;gap:6px;border:1px solid var(--line);background:var(--bg);color:var(--text);padding:5px 10px 5px 6px;border-radius:999px;cursor:pointer;font-size:12px;font-weight:600}
.preset i{width:16px;height:16px;border-radius:50%;display:block}
.palette{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:10px}
.swatch{display:flex;align-items:center;gap:10px;padding:8px 10px;border:1px solid var(--line);border-radius:10px;background:var(--bg)}
.swatch input[type=color]{width:38px;height:38px;flex-shrink:0;border-radius:8px}
.swatch div{display:flex;flex-direction:column;min-width:0}
.swatch b{font-size:13px}
.swatch code{font-size:11px;color:var(--muted)}
.theme-preview{position:sticky;top:20px;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:var(--bg);box-shadow:var(--shadow)}
.pv-top{display:flex;gap:10px;align-items:center;background:#08090c;color:#c9d0dc;font-size:12px;padding:8px 12px}
.pv-nav{display:flex;gap:16px;background:var(--nav);color:rgba(255,255,255,.72);font-size:13px;padding:10px 12px}
.pv-nav b{color:var(--primary-2)}
.pv-body{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:14px}
.pv-badges{display:flex;gap:6px;margin-bottom:10px}
.pv-body .live-pill{margin-top:10px;font-size:12px}

dialog{border:1px solid var(--line);border-radius:14px;background:var(--surface);color:var(--text);padding:20px;width:min(420px,92vw)}
dialog::backdrop{background:rgba(0,0,0,.55)}
dialog form{display:flex;flex-direction:column;gap:12px}
dialog menu{display:flex;justify-content:flex-end;gap:8px;padding:0}

@media(max-width:900px){
  .console{grid-template-columns:1fr}
  .side{position:static;height:auto;flex-direction:row;flex-wrap:wrap;align-items:center;gap:12px}
  .side-nav{flex-direction:row;flex-wrap:wrap}
  .side-foot{margin-top:0;margin-left:auto;flex-direction:row;align-items:center}
  .theme-layout{grid-template-columns:1fr}
  .theme-preview{position:static}
}
@media(max-width:560px){
  .form-grid{grid-template-columns:1fr}
  .span-2{grid-column:auto}
  .art-row{grid-template-columns:1fr 1fr}
  .poster-box{grid-column:span 2}
  .pv-body{grid-template-columns:1fr}
}