*{box-sizing:border-box}
:root{--bg:#f7f8fb;--card:#fff;--text:#0f172a;--muted:#64748b;--border:#e5e7eb;
--grad:linear-gradient(90deg,#0a7cff,#22c55e,#facc15,#f97316)}
body{direction:rtl;background:var(--bg);font-family:Tahoma,'IRANSans',sans-serif;margin:0;color:var(--text)}
.container{max-width:1100px;margin:0 auto;padding:16px}
.header .bar{height:8px;background:var(--grad);border-radius:10px;margin:8px 0 14px}
.header h1{margin:0;background:#111827;color:#fff;display:inline-block;padding:10px 14px;border-radius:12px;font-size:20px}
.card{background:var(--card);border:1px solid var(--border);border-radius:16px;box-shadow:0 10px 30px rgba(2,6,23,.05);padding:16px}
.tabs{display:flex;gap:8px;margin-bottom:12px}
.tab{padding:10px 14px;border-radius:10px;background:#e5e7eb;text-decoration:none;color:#111827;font-weight:700}
.tab.active{background:#111827;color:#fff}
.toolbar{display:flex;gap:8px;margin-bottom:12px}
.toolbar input[type=text]{flex:1;padding:10px;border:1px solid var(--border);border-radius:10px}
.toolbar button,.button{padding:10px 14px;border:0;border-radius:10px;background:var(--grad);color:#fff;font-weight:700;cursor:pointer}
.button.ghost{background:#e5e7eb;color:#111827;text-decoration:none}
table{width:100%;border-collapse:collapse;font-size:14px}
thead th{background:#f1f5f9;text-align:right;padding:10px;border-bottom:1px solid var(--border)}
tbody td{padding:10px;border-bottom:1px solid var(--border)}
code{background:#f1f5f9;padding:3px 6px;border-radius:6px}