:root { --bg:#f5f6f8; --card:#fff; --ink:#1d2330; --muted:#6b7280; --line:#e3e6eb; --brand:#1f4fd1; --bad:#c62828; --ok:#2e7d32; }
* { box-sizing: border-box; }
body { margin:0; font:15px/1.6 system-ui, "Segoe UI", Tahoma, sans-serif; background:var(--bg); color:var(--ink); }
main { max-width: 1000px; margin: 0 auto; padding: 20px; }
h1 { font-size: 22px; display:flex; gap:12px; align-items:center; }
h2 { font-size: 17px; margin: 0 0 8px; display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
a { color: var(--brand); }

.top { display:flex; align-items:center; gap:24px; padding:10px 20px; background:var(--ink); color:#fff; }
.top nav { display:flex; gap:16px; flex:1; }
.top nav a { color:#cbd2e0; text-decoration:none; }
.top nav a.on { color:#fff; font-weight:600; }
.logout { display:flex; gap:10px; align-items:center; margin:0; }
button.link { background:none; border:0; color:#cbd2e0; padding:0; cursor:pointer; font:inherit; text-decoration:underline; }

.card { background:var(--card); border:1px solid var(--line); border-radius:10px; padding:16px 18px; margin:0 0 16px; }
fieldset.card { display:grid; grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)); gap:12px 18px; }
legend { font-weight:700; padding:0 6px; }

label { display:flex; flex-direction:column; gap:4px; font-size:14px; }
label.wide { grid-column: 1 / -1; }
label.bad input, label.bad select, label.bad textarea { border-color:var(--bad); }
label em, form em { color:var(--bad); font-style:normal; font-size:13px; }
input, select, textarea { font:inherit; padding:7px 9px; border:1px solid var(--line); border-radius:7px; background:#fff; width:100%; }
input[type=checkbox] { width:auto; align-self:flex-start; transform:scale(1.2); }
textarea { resize:vertical; }
input.num { width:90px; }

button, .btn { font:inherit; background:var(--brand); color:#fff; border:0; border-radius:7px; padding:8px 18px; cursor:pointer; text-decoration:none; display:inline-block; }
.secondary, .btn.secondary { background:#e8ecf5; color:var(--ink); }
.btn.small { padding:4px 12px; font-size:14px; }
.actions { display:flex; gap:10px; align-items:center; margin-top:12px; }
.actions form { margin:0; }

table.grid { border-collapse:collapse; margin:6px 0; }
.grid th, .grid td { border:1px solid var(--line); padding:6px 12px; text-align:center; }
.grid th { background:#f0f2f6; font-weight:600; }

.flash { padding:10px 14px; border-radius:8px; margin:0 0 16px; }
.flash.ok { background:#e8f5e9; color:var(--ok); }
.flash.err { background:#fdecea; color:var(--bad); }
.hint, .meta { color:var(--muted); font-size:13px; margin:4px 0; }
.tag { font-size:12px; font-weight:400; background:#e8ecf5; border-radius:20px; padding:1px 10px; }
.tag.off { background:#fdecea; color:var(--bad); }

.login { max-width:360px; margin:10vh auto; display:flex; flex-direction:column; gap:12px; }
.login h1 { justify-content:center; }
.tag.var { background:#fff4e0; color:#a15c00; }

/* الخطوة 2 */
.badge { background:#e53935; color:#fff; border-radius:20px; padding:0 7px; font-size:12px; }
.search { display:flex; gap:8px; margin:0 0 16px; }
.search input { max-width:360px; }
table.list { width:100%; border-collapse:collapse; background:var(--card); }
.list th, .list td { border-bottom:1px solid var(--line); padding:7px 10px; text-align:right; font-size:14px; }
.list th { background:#f0f2f6; font-weight:600; }
.list tr.muted td { color:var(--muted); }
.list .neg { color:var(--bad); } .list .pos { color:var(--ok); }
.pager { display:flex; gap:6px; flex-wrap:wrap; } .pager a { padding:2px 9px; border:1px solid var(--line); border-radius:6px; text-decoration:none; } .pager a.on { background:var(--brand); color:#fff; }
.kv { display:grid; grid-template-columns:max-content 1fr; gap:6px 18px; } .kv span { color:var(--muted); } .kv .big { font-size:20px; }
.cols { display:grid; grid-template-columns:repeat(auto-fit, minmax(300px, 1fr)); gap:16px; }
.cols .card { display:flex; flex-direction:column; gap:10px; }
button.danger, .danger { background:var(--bad); color:#fff; }
.tabs { display:flex; gap:8px; margin:0 0 16px; } .tabs a { padding:6px 14px; border-radius:8px; text-decoration:none; background:#e8ecf5; color:var(--ink); } .tabs a.on { background:var(--brand); color:#fff; }
.topup { display:flex; gap:16px; align-items:flex-start; }
.topup img { width:140px; max-height:200px; object-fit:cover; border-radius:8px; border:1px solid var(--line); }
.topup .actions form { display:flex; gap:6px; }

/* الخطوة 3 */
.noimg { width:140px; height:140px; display:flex; align-items:center; justify-content:center; background:#f0f2f6; border-radius:8px; color:var(--muted); font-size:13px; flex-shrink:0; }
.prompt { font-size:12px; color:var(--muted); background:#f7f8fa; padding:6px 8px; border-radius:6px; margin:6px 0 10px; }
img.thumb { width:120px; border-radius:8px; border:1px solid var(--line); }
form.card { display:flex; flex-direction:column; gap:12px; }

/* الخطوة 4 */
.stats { display:grid; grid-template-columns:repeat(auto-fit, minmax(420px, 1fr)); gap:16px; }
.tiles { display:grid; grid-template-columns:repeat(auto-fit, minmax(120px, 1fr)); gap:10px; }
.tiles.summary { margin:0 0 6px; }
.tile { background:#f7f8fa; border:1px solid var(--line); border-radius:8px; padding:10px 12px; display:flex; flex-direction:column; gap:2px; }
.tile span { color:var(--muted); font-size:13px; } .tile b { font-size:18px; } .tile small { color:var(--muted); font-size:12px; }
.tile.pos b, td.pos, .list td.pos { color:var(--ok); } .tile.neg b, td.neg, small.neg { color:var(--bad); }
progress.meter { width:100%; height:14px; appearance:none; border:0; border-radius:8px; background:#e8ecf5; overflow:hidden; }
progress.meter::-webkit-progress-bar { background:#e8ecf5; border-radius:8px; }
progress.meter::-webkit-progress-value { background:var(--ok); border-radius:8px; } progress.meter::-moz-progress-bar { background:var(--ok); }
progress.meter.warn::-webkit-progress-value { background:#f9a825; } progress.meter.warn::-moz-progress-bar { background:#f9a825; }
progress.meter.full::-webkit-progress-value { background:var(--bad); } progress.meter.full::-moz-progress-bar { background:var(--bad); }
.meter-text { margin:6px 0 0; font-size:14px; }
.filters { display:flex; flex-wrap:wrap; gap:10px; align-items:flex-end; margin:0 0 14px; }
.filters label { flex:0 1 auto; } .filters input[name=q] { min-width:240px; }
.scroll { overflow-x:auto; }
table.gens td { vertical-align:top; } table.gens small { color:var(--muted); }
.thumbs { white-space:nowrap; } .thumbs img { width:56px; height:56px; object-fit:cover; border-radius:6px; border:1px solid var(--line); margin-left:4px; }
.st { font-size:12px; border-radius:20px; padding:1px 9px; background:#e8ecf5; white-space:nowrap; }
.st-done { background:#e8f5e9; color:var(--ok); } .st-failed { background:#fdecea; color:var(--bad); } .st-partial { background:#fff4e0; color:#a15c00; } .st-running, .st-queued { background:#e3f2fd; color:#1565c0; }
tr.err-row td { background:#fffafa; padding-top:0; } tr.err-row pre { white-space:pre-wrap; font-size:12px; margin:4px 0; color:var(--bad); }