/* Site Manager — self-contained. No CDN, no framework. */

:root{
  --bg:#0f1117; --bg-2:#151823; --bg-3:#1c2030; --line:#262c3d;
  --fg:#e6e9f2; --fg-dim:#98a0b8; --fg-mute:#6b7391;
  --accent:#4f8cff; --accent-2:#8b5cf6;
  --ok:#22c55e; --warn:#f59e0b; --danger:#ef4444;
  --radius:10px; --radius-sm:7px;
  --font:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}

/* MUST come before any component rule that sets `display`.
   Author styles beat the UA stylesheet's [hidden]{display:none}, so a rule
   like .modal{display:grid} would make a hidden element permanently visible. */
[hidden]{display:none !important}
body{
  background:var(--bg); color:var(--fg); font-family:var(--font);
  font-size:14.5px; line-height:1.5; -webkit-font-smoothing:antialiased;
}
a{color:var(--accent); text-decoration:none}
a:hover{text-decoration:underline}

/* ---------- login ---------- */
.login-body{display:grid; place-items:center; min-height:100vh;
  background:radial-gradient(1200px 600px at 50% -10%,#1b2036 0%,var(--bg) 60%)}
.login-card{width:100%; max-width:390px; background:var(--bg-2);
  border:1px solid var(--line); border-radius:14px; padding:32px 30px 24px;
  box-shadow:0 24px 60px rgba(0,0,0,.45)}
.login-brand{display:flex; align-items:center; gap:12px; margin-bottom:26px}
.brand-name{font-weight:700; letter-spacing:.08em; font-size:14px}
.brand-sub{color:var(--fg-dim); font-size:12.5px}
.login-card h1{font-size:20px; margin:0 0 4px}
.login-note{color:var(--fg-dim); margin:0 0 20px; font-size:13.5px}
.login-card label{display:block; font-size:12.5px; color:var(--fg-dim);
  margin:14px 0 6px; font-weight:500}
.login-card input{width:100%; padding:11px 12px; background:var(--bg-3);
  border:1px solid var(--line); border-radius:var(--radius-sm); color:var(--fg);
  font-size:14.5px; font-family:inherit}
.login-card input:focus{outline:none; border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(79,140,255,.18)}
.btn-block{width:100%; margin-top:22px; padding:11px}
.login-foot{text-align:center; color:var(--fg-mute); font-size:12px; margin:22px 0 0}

/* ---------- chrome ---------- */
.topbar{display:flex; align-items:center; justify-content:space-between;
  gap:16px; padding:0 20px; height:56px; background:var(--bg-2);
  border-bottom:1px solid var(--line); position:sticky; top:0; z-index:20; flex-wrap:wrap}
.topbar-left{display:flex; align-items:center; gap:9px}
.brand-divider{color:var(--fg-mute)}
.topbar-right{display:flex; align-items:center; gap:2px}
.tab{padding:7px 12px; border-radius:var(--radius-sm); color:var(--fg-dim);
  font-size:13.5px; white-space:nowrap}
.tab:hover{background:var(--bg-3); color:var(--fg); text-decoration:none}
.tab.is-active{background:var(--bg-3); color:var(--fg); font-weight:600}
.tab-muted{color:var(--fg-mute)}

.live-banner{background:linear-gradient(90deg,rgba(245,158,11,.14),rgba(245,158,11,.05));
  border-bottom:1px solid rgba(245,158,11,.28); color:#f3d9a6;
  padding:9px 20px; font-size:13px}
.live-banner strong{color:#ffd88a}
.live-banner em{color:#ffd88a; font-style:normal; font-weight:600}

.wrap{max-width:1180px; margin:0 auto; padding:22px 20px 80px}

/* ---------- toolbar ---------- */
.toolbar{display:flex; align-items:center; justify-content:space-between;
  gap:14px; margin-bottom:16px; flex-wrap:wrap}
.crumbs{display:flex; align-items:center; gap:7px; font-size:15px; flex-wrap:wrap}
.crumbs a{color:var(--fg)}
.crumbs a:last-child{color:var(--fg-dim)}
.crumb-sep{color:var(--fg-mute)}
.toolbar-actions{display:flex; gap:8px; flex-wrap:wrap}
.view-title{font-size:17px; margin:0}

.btn{background:var(--bg-3); color:var(--fg); border:1px solid var(--line);
  border-radius:var(--radius-sm); padding:8px 13px; font-size:13.5px;
  font-family:inherit; cursor:pointer; transition:.12s}
.btn:hover{border-color:#39405a; background:#232839}
.btn-primary{background:linear-gradient(135deg,var(--accent),var(--accent-2));
  border-color:transparent; color:#fff; font-weight:600}
.btn-primary:hover{filter:brightness(1.08)}
.btn-danger{background:rgba(239,68,68,.14); border-color:rgba(239,68,68,.35); color:#fca5a5}
.btn-danger:hover{background:rgba(239,68,68,.22)}
.btn-ghost{background:transparent}
.btn-sm{padding:5px 10px; font-size:12.5px}
.icon-btn{background:none; border:none; color:var(--fg-dim); font-size:22px;
  cursor:pointer; line-height:1; padding:0 4px}
.icon-btn:hover{color:var(--fg)}
.link-btn{background:none; border:none; color:var(--accent); cursor:pointer;
  font-family:inherit; font-size:13px; padding:0 6px}
.link-btn:hover{text-decoration:underline}
.link-btn.danger{color:#fca5a5}

/* ---------- select bar ---------- */
.selectbar{display:flex; align-items:center; gap:10px; padding:9px 14px;
  background:rgba(79,140,255,.1); border:1px solid rgba(79,140,255,.3);
  border-radius:var(--radius); margin-bottom:14px; font-size:13.5px}

/* ---------- table ---------- */
.filetable{width:100%; border-collapse:collapse; background:var(--bg-2);
  border:1px solid var(--line); border-radius:var(--radius); overflow:hidden}
.filetable th{ text-align:left; font-size:11.5px; text-transform:uppercase;
  letter-spacing:.07em; color:var(--fg-mute); font-weight:600;
  padding:11px 12px; border-bottom:1px solid var(--line); background:#12151f}
.filetable td{padding:9px 12px; border-bottom:1px solid var(--line); vertical-align:middle}
.filetable tr:last-child td{border-bottom:none}
.filetable tbody tr:hover{background:#191d29}
.col-check{width:36px}
.col-size{width:96px}
.col-date{width:150px}
.col-act{width:210px; text-align:right; white-space:nowrap}
.col-name{min-width:220px}
.muted{color:var(--fg-dim); font-size:13px}
.empty{text-align:center; color:var(--fg-mute); padding:36px 0}
.row-up a{color:var(--fg-dim)}

.itemlink{display:inline-flex; align-items:center; gap:9px; color:var(--fg);
  font-size:14px; text-align:left}
button.itemlink{background:none;border:none;font-family:inherit;cursor:pointer;padding:0}
button.itemlink:hover{color:var(--accent)}

.ico{display:inline-grid; place-items:center; width:26px; height:26px;
  border-radius:6px; font-size:8.5px; font-weight:700; letter-spacing:.02em;
  background:var(--bg-3); color:var(--fg-mute); flex:none}
.ico-dir{background:linear-gradient(135deg,#3b5bdb,#5f3dc4)}
.ico-dir::after{content:""; width:12px; height:9px; border-radius:2px; background:#fff; opacity:.9}
.thumb{width:26px; height:26px; object-fit:cover; border-radius:6px;
  background:var(--bg-3); flex:none}

/* ---------- dropzone ---------- */
.dropzone{display:none; border:2px dashed rgba(79,140,255,.5);
  border-radius:var(--radius); background:rgba(79,140,255,.07); margin-bottom:14px}
.dropzone.is-visible{display:block}
.dropzone-inner{padding:26px; text-align:center; color:var(--accent); font-size:14px}

/* ---------- history ---------- */
.hint{color:var(--fg-dim); font-size:13.5px; margin:0 0 16px}
.snaplist{display:flex; flex-direction:column; gap:9px}
.snap{background:var(--bg-2); border:1px solid var(--line);
  border-radius:var(--radius); padding:13px 15px}
.snap-head{display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap}
.snap-when{font-weight:600}
.snap-sub{color:var(--fg-dim); font-size:12.5px; margin-top:2px}
.snap-actions{display:flex; gap:7px}
.snap-files{margin-top:11px; padding-top:11px; border-top:1px solid var(--line);
  font-family:var(--mono); font-size:12.5px}
.snap-files div{padding:3px 0; display:flex; gap:9px; align-items:center}
.tag{font-size:10px; padding:1px 6px; border-radius:4px; font-weight:700}
.tag-M{background:rgba(245,158,11,.2); color:#fbbf24}
.tag-A{background:rgba(34,197,94,.2); color:#4ade80}
.tag-D{background:rgba(239,68,68,.2); color:#f87171}

/* ---------- modal ---------- */
.modal{position:fixed; inset:0; background:rgba(5,7,12,.72);
  display:grid; place-items:center; z-index:60; padding:20px}
.modal-box{background:var(--bg-2); border:1px solid var(--line);
  border-radius:13px; width:100%; max-width:780px; max-height:88vh;
  display:flex; flex-direction:column; box-shadow:0 30px 70px rgba(0,0,0,.55)}
.modal-head{display:flex; align-items:center; justify-content:space-between;
  padding:15px 18px; border-bottom:1px solid var(--line)}
.modal-head h3{margin:0; font-size:15.5px}
.modal-body{padding:18px; overflow:auto}
.modal-foot{padding:13px 18px; border-top:1px solid var(--line);
  display:flex; justify-content:flex-end; gap:9px}
.modal-body input[type=text]{width:100%; padding:10px 12px; background:var(--bg-3);
  border:1px solid var(--line); border-radius:var(--radius-sm); color:var(--fg);
  font-size:14.5px; font-family:inherit}
.modal-body input:focus,.modal-body textarea:focus{outline:none;
  border-color:var(--accent); box-shadow:0 0 0 3px rgba(79,140,255,.18)}
.editor{width:100%; min-height:52vh; background:#0c0e15; color:#dbe3f4;
  border:1px solid var(--line); border-radius:var(--radius-sm);
  font-family:var(--mono); font-size:13px; line-height:1.6; padding:13px;
  resize:vertical; tab-size:2; white-space:pre; overflow-wrap:normal; overflow-x:auto}
.preview-img{max-width:100%; max-height:64vh; display:block; margin:0 auto;
  border-radius:var(--radius-sm); background:#0c0e15}

/* ---------- alerts / toasts ---------- */
.alert{padding:10px 13px; border-radius:var(--radius-sm); font-size:13.5px; margin-bottom:14px}
.alert-error{background:rgba(239,68,68,.14); border:1px solid rgba(239,68,68,.34); color:#fca5a5}
.warnbox{background:rgba(239,68,68,.1); border:1px solid rgba(239,68,68,.3);
  color:#fca5a5; padding:11px 13px; border-radius:var(--radius-sm);
  font-size:13.5px; margin-bottom:14px}

.toasts{position:fixed; right:18px; bottom:18px; display:flex;
  flex-direction:column; gap:9px; z-index:80}
.toast{background:var(--bg-3); border:1px solid var(--line); color:var(--fg);
  padding:11px 15px; border-radius:var(--radius); font-size:13.5px;
  min-width:230px; max-width:390px; box-shadow:0 12px 30px rgba(0,0,0,.45);
  animation:slidein .16s ease-out}
.toast.ok{border-left:3px solid var(--ok)}
.toast.err{border-left:3px solid var(--danger)}
@keyframes slidein{from{opacity:0; transform:translateY(8px)}to{opacity:1;transform:none}}

.uploading{position:fixed; left:50%; bottom:22px; transform:translateX(-50%);
  background:var(--bg-3); border:1px solid var(--line); border-radius:var(--radius);
  padding:13px 18px; min-width:270px; z-index:80; box-shadow:0 12px 30px rgba(0,0,0,.45)}
.uploading-bar{height:5px; background:var(--bg); border-radius:3px; overflow:hidden; margin-bottom:8px}
.uploading-bar>div{height:100%; width:0;
  background:linear-gradient(90deg,var(--accent),var(--accent-2)); transition:width .2s}
#uploading-text{font-size:12.5px; color:var(--fg-dim)}

@media (max-width:820px){
  .col-date,.col-size{display:none}
  .col-act{width:auto}
  .topbar{height:auto; padding:9px 14px}
  .wrap{padding:16px 13px 70px}
}