/* ============================================================
   فایل: panel/style.css — ظاهر ساده‌ی راست‌به‌چپ (بدون فونت یا منبع بیرونی)
   ============================================================ */
:root { --bg:#f4f6f4; --card:#fff; --ink:#14203a; --muted:#566580; --line:#d0d9d0; --accent:#1f3a8a; --danger:#b3261e; --ok:#1b7f3b; --warn:#a15c00; }
@media (prefers-color-scheme: dark) { :root { --bg:#0f1526; --card:#182039; --ink:#e8ecf7; --muted:#9aa6c4; --line:#2a3557; --accent:#8fa6ff; --danger:#ff8a80; --ok:#6fdc8c; --warn:#ffb74d; } }
* { box-sizing: border-box; }
body { margin:0; background:var(--bg); color:var(--ink); font:15px/1.7 Tahoma, "Segoe UI", system-ui, sans-serif; }
header { display:flex; gap:12px; align-items:center; padding:10px 16px; background:var(--card); border-bottom:1px solid var(--line); position:sticky; top:0; z-index:5; flex-wrap:wrap; }
nav { display:flex; gap:6px; flex:1; flex-wrap:wrap; }
nav a { padding:4px 12px; border-radius:8px; color:var(--ink); text-decoration:none; }
nav a.on { background:var(--accent); color:#fff; }
main { max-width:980px; margin:16px auto; padding:0 12px; display:grid; gap:12px; }
.card { background:var(--card); border:1px solid var(--line); border-radius:12px; padding:14px; display:grid; gap:8px; }
.grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(150px, 1fr)); gap:10px; }
.stat b { display:block; font-size:24px; }
.muted { color:var(--muted); font-size:13px; }
table { width:100%; border-collapse:collapse; display:block; overflow-x:auto; }
th, td { text-align:start; padding:6px 8px; border-bottom:1px solid var(--line); white-space:nowrap; }
input, select, textarea, button { font:inherit; padding:7px 10px; border-radius:8px; border:1px solid var(--line); background:var(--card); color:var(--ink); }
input, select, textarea { width:100%; }
.ltr { direction:ltr; text-align:left; unicode-bidi:plaintext; }
button { cursor:pointer; background:var(--accent); color:#fff; border-color:var(--accent); }
button.ghost { background:transparent; color:var(--ink); border-color:var(--line); }
button.danger { background:var(--danger); border-color:var(--danger); }
.row { display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.row > * { flex:1 1 140px; }
.row > button { flex:0 0 auto; }
.tag { display:inline-block; padding:0 8px; border-radius:99px; border:1px solid var(--line); font-size:12px; }
.ok { color:var(--ok); } .bad { color:var(--danger); } .warn { color:var(--warn); }
#modal { position:fixed; inset:0; background:rgba(0,0,0,.45); display:grid; place-items:center; z-index:20; }
#modal[hidden], #toast[hidden], header[hidden] { display:none; }
#modal .box { background:var(--card); padding:18px; border-radius:14px; width:min(92vw, 380px); display:grid; gap:10px; }
#toast { position:fixed; bottom:16px; inset-inline:16px; background:var(--ink); color:var(--bg); padding:10px 14px; border-radius:10px; z-index:30; text-align:center; }