/* app/static/css/admin.css */

/* ===== Common ===== */
*{box-sizing:border-box}
body{margin:0;background:#f1f5f9;font-family:system-ui,color-sans-serif;color:#0f172a}
a{color:inherit;text-decoration:none}
.gap-8{height:8px}

/* ===== Login ===== */
form.card.login{background:#fff;border-radius:18px;box-shadow:0 16px 40px rgba(2,6,23,.18);width:96%;max-width:440px;padding:22px;margin:40px auto}
body:has(form.card.login){min-height:100vh;display:flex;align-items:center;justify-content:center;background:#eef2ff}
.brand{display:flex;gap:10px;align-items:center}
.brand img{height:40px}
h1{margin:0 0 4px 0;font-size:20px}
.field{margin:10px 0}
.field label{display:block;margin-bottom:6px;font-size:14px;color:#475569}
input[type="text"], input[type="password"], input[type="number"], input[type="file"], textarea{
  width:100%;padding:12px;border:1px solid #c7d2fe;border-radius:12px;background:#fff
}
form.card.login button{width:100%;padding:12px;border:none;border-radius:12px;background:#1d4ed8;color:#fff;font-weight:800;cursor:pointer;margin-top:10px}
.err{color:#dc2626;margin-top:10px}
.small{color:#64748b;font-size:12px;margin-top:8px}

/* ===== Admin Topbar ===== */
:root{--primary:#1d4ed8;--ok:#16a34a;--warn:#dc2626;--muted:#64748b}
.topbar{background:#fff;border-bottom:1px solid #e5e7eb;position:sticky;top:0;z-index:5}
.topbar .inner{max-width:1220px;margin:0 auto;display:flex;gap:12px;align-items:center;justify-content:space-between;padding:10px 14px}
.brand h1{font-size:18px;margin:0}
.btn{background:linear-gradient(180deg,#2563eb,#1d4ed8);color:#fff;border:none;border-radius:10px;padding:10px 14px;font-weight:800;cursor:pointer;box-shadow:0 6px 14px rgba(29,78,216,.25)}
.btn.gray{background:linear-gradient(180deg,#64748b,#475569)}
.btn.red{background:linear-gradient(180deg,#ef4444,#dc2626)}
.btn.green{background:linear-gradient(180deg,#22c55e,#16a34a)}

/* ===== Admin Body ===== */
.wrap{max-width:1220px;margin:18px auto;padding:0 12px}
.status{margin:10px 0;color:var(--ok);font-weight:700}
.warn{color:var(--warn);font-weight:700}
.card{background:#fff;border:1px solid #e5e7eb;border-radius:14px;padding:12px;margin-bottom:12px}
.qheader{display:flex;align-items:center;gap:8px;justify-content:space-between}
.qheader .left{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.badge{background:#eef2ff;color:#1e3a8a;padding:4px 8px;border-radius:8px;font-size:12px;font-weight:700}
.inline{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.smallbtn{padding:8px 10px;border-radius:8px;background:#0ea5e9;color:#fff;border:none;cursor:pointer;font-weight:800;box-shadow:0 4px 10px rgba(14,165,233,.25)}
.smallbtn.red{background:#dc2626}
.smallbtn.gray{background:#64748b}
.hr{height:1px;background:#e5e7eb;margin:8px 0}

.grid{display:grid;grid-template-columns:1fr;gap:12px}
@media(min-width:900px){ .grid{grid-template-columns: 1fr 1fr} }
.row{display:grid;grid-template-columns: 1fr 1fr; gap:8px}
.optgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:8px}
.opt{border:2px dashed #e2e8f0;border-radius:10px;padding:8px}
.preimg{display:block;max-width:100%;max-height:220px;border-radius:8px;border:1px solid #e5e7eb}
.muted{color:var(--muted)}

/* ===== Stage ===== */
.stage{position:relative;width:100%;background:#f8fafc;border:1px solid #e5e7eb;border-radius:12px;overflow:hidden}
.canvas{position:relative;width:100%;height:0;background:center/cover no-repeat}
.box{position:absolute;border:2px dashed #0ea5e9;background:rgba(255,255,255,.85);border-radius:8px}
.box .handle{position:absolute;right:-8px;bottom:-8px;width:16px;height:16px;background:#0ea5e9;border-radius:50%;cursor:nwse-resize}
.dot{position:absolute;border-radius:50%;transform:translate(-50%,-50%);color:#fff;font-size:11px;display:flex;align-items:center;justify-content:center;cursor:move;user-select:none}

/* ===== Pairs ===== */
.pairtag{display:inline-flex;gap:6px;background:#f1f5f9;border:1px solid #e2e8f0;border-radius:999px;padding:4px 8px;margin:3px;font-weight:700}

/* ===== Scoring ===== */
.scorebox{background:#f8fafc;border:1px dashed #cbd5e1;border-radius:12px;padding:10px;margin-top:8px}
.scorebox .hint{font-size:12px;color:#64748b}

/* ===== Click-box ===== */
.cb-item{border:2px dashed #e2e8f0;border-radius:10px;padding:6px 10px;font-weight:700;background:#fff}