:root{
  --page-bg:#ffffff; --panel:#ffffff; --text:#0f172a; --muted:#64748b; --border:#e5e7eb;
  --link:#0ea5e9; --btn:#0ea5e9; --btn-border:#7dd3fc;
  --shadow:0 6px 22px rgba(2,6,23,.06);
  --ok:#16a34a; --warn:#f59e0b; --err:#dc2626;
  --sidebar:#f8fafc; --drawer-w:420px;
}
*{box-sizing:border-box}
body{margin:0;font-family:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial;background:var(--page-bg);color:var(--text)}
.topbar{background:#000;color:#fff;display:flex;align-items:center;gap:12px;padding:10px 16px;border-bottom:1px solid rgba(255,255,255,.08)}
.topbar img{height:28px}
.brand{font-weight:800;letter-spacing:.4px;font-size:14px;opacity:.9;white-space:nowrap}
.spacer{flex:1}
.topbar a{color:#fff;text-decoration:none}

.layout{max-width:1220px;margin:22px auto 60px;padding:0 16px;display:grid;grid-template-columns:280px 1fr;gap:16px}
@media(max-width:900px){.layout{grid-template-columns:1fr}}

.sidebar{background:var(--sidebar);border:1px solid var(--border);border-radius:14px;box-shadow:var(--shadow);overflow:hidden}
.side-head{padding:12px 14px;border-bottom:1px solid var(--border);font-weight:800}
.side-body{max-height:70vh;overflow:auto}
.search{padding:10px 12px;border-bottom:1px solid var(--border)}
.search input{width:100%;padding:10px 12px;border:1px solid var(--border);border-radius:10px;font-size:14px}
.list{list-style:none;margin:0;padding:8px}
.list li{margin:0;padding:0}
.item{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:8px 10px;border-radius:10px;text-decoration:none;color:inherit;border:1px solid transparent}
.item:hover{background:#eef6ff}
.item small{color:var(--muted)}
.item.good{background:#f0fdf4;border-color:#bbf7d0}
.item.warn{background:#fffbeb;border-color:#fde68a}
.item.bad{background:#fef2f2;border-color:#fecaca}

.wrap{display:flex;flex-direction:column;gap:12px}
h1{margin:0;font-size:24px}
.sub{color:var(--muted);font-size:13px}
.head{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.pill{display:inline-block;padding:4px 8px;border-radius:999px;border:1px solid #cfe9ff;background:#eef7ff;color:#0b6aa7;font-size:11px;font-weight:700}
.actions{margin-left:auto;display:flex;flex-wrap:wrap;gap:8px}
.btn{font-size:13px;padding:10px 12px;border:1px solid var(--btn-border);border-radius:10px;background:var(--btn);color:#fff;cursor:pointer;font-weight:700;box-shadow:0 2px 8px rgba(14,165,233,.25)}
.btn:hover{filter:brightness(.98)}
.btn-ghost{font-size:12px;padding:8px 10px;border:1px solid var(--border);border-radius:10px;background:#fff;cursor:pointer;font-weight:700}
.btn-ghost:hover{background:#fafafa}
.btn-link{font-size:12px;padding:8px 10px;border:1px solid var(--border);border-radius:10px;background:#fff;color:#0f172a;text-decoration:none;font-weight:700}
.btn-link:hover{background:#fafafa}

.card{background:var(--panel);border:1px solid var(--border);border-radius:14px;overflow:hidden;box-shadow:var(--shadow)}
.card h2{margin:0;padding:14px 16px;border-bottom:1px solid var(--border);font-size:18px}
.card-body{padding:12px}
.grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
@media(max-width:1000px){.grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:720px){.grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.grid{grid-template-columns:1fr}}

.file{border:1px solid var(--border);border-radius:12px;padding:12px;background:#fff;display:flex;flex-direction:column;gap:10px}
.file .name{font-size:14px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.file .meta{font-size:12px;color:var(--muted)}
.file .row{display:flex;gap:8px;flex-wrap:wrap}
.file .link{font-size:12px}

#progress{position:fixed;left:0;top:0;height:3px;background:#0ea5e9;width:0;opacity:0;transition:width .4s ease,opacity .4s ease;z-index:9999}

/* Drawer (preview) */
.drawer{position:fixed; right:16px; top:64px; bottom:16px; width:var(--drawer-w); max-width:calc(100% - 32px);
  background:#fff; border:1px solid var(--border); border-radius:14px; box-shadow:0 12px 40px rgba(0,0,0,.12);
  display:none; overflow:hidden; z-index:1000}
.drawer.open{display:block;}
.drawer-head{display:flex; align-items:center; justify-content:space-between; gap:8px; padding:10px 12px; border-bottom:1px solid var(--border);}
.drawer-title{font-weight:800; font-size:14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.drawer-actions a, .drawer-actions button{ text-decoration:none; border:1px solid var(--border); padding:6px 10px; border-radius:10px; font-size:12px; background:#fff; cursor:pointer; }
.drawer-actions a.primary{border-color:var(--btn-border); background:var(--btn); color:#fff}
.drawer-body{height:100%;}
.drawer-body iframe{width:100%; height:calc(100% - 48px); border:0; display:block}

/* Toast */
#toast{position:fixed;left:50%;transform:translateX(-50%);bottom:20px;padding:10px 14px;border-radius:10px;font-size:13px;color:#fff;box-shadow:0 10px 30px rgba(0,0,0,.2);display:none;background:var(--ok);z-index:9999}

/* Uploader drawer */
.uploader{position:fixed; right:16px; top:64px; bottom:16px; width:520px; max-width:calc(100% - 32px);
  background:#fff; border:1px solid var(--border); border-radius:14px; box-shadow:0 12px 40px rgba(0,0,0,.12);
  display:none; overflow:auto; z-index:1001}
.uploader.open{display:block;}
.u-head{display:flex; align-items:center; justify-content:space-between; gap:8px; padding:12px 14px; border-bottom:1px solid var(--border)}
.u-title{font-weight:800}
.u-body{padding:14px}
.row{display:grid; grid-template-columns:1fr 1fr; gap:10px}
@media(max-width:780px){ .row{grid-template-columns:1fr} }
label{font-weight:800; display:block; margin:6px 0}
input, select, textarea{ width:100%; padding:10px 12px; border:1px solid var(--border); border-radius:10px; background:#fff; font-size:14px }
textarea{min-height:110px}
.u-actions{display:flex; gap:8px; flex-wrap:wrap; padding:12px 14px; border-top:1px solid var(--border); background:#fafafa; position:sticky; bottom:0}
.status{font-size:.95rem}
.status.ok{color:var(--ok)} .status.err{color:var(--err)} .status.loading{color:var(--muted)}
.hidden{display:none}
.chip-miss{border:1px solid #fecaca;background:#fef2f2;color:#991b1b;padding:4px 8px;border-radius:999px;font-size:12px;margin-left:8px}