/* لوحة تراخيص الوافي — أنماط خفيفة مستضافة محلياً (بلا CDN ليعمل CSP default-src 'self') */
:root { --bg:#f4f6fa; --card:#fff; --line:#e3e7ee; --text:#1f2937; --muted:#6b7280; --primary:#2563eb; --ok:#16a34a; --warn:#d97706; --bad:#dc2626; --susp:#7c3aed; }
* { box-sizing: border-box; }
html, body { margin:0; padding:0; background:var(--bg); color:var(--text); font-family: "Segoe UI", Tahoma, Arial, sans-serif; font-size:15px; }
a { color:var(--primary); text-decoration:none; } a:hover { text-decoration:underline; }
.topbar { display:flex; align-items:center; gap:24px; background:#111827; color:#fff; padding:10px 24px; flex-wrap:wrap; }
.topbar .brand a { color:#fff; font-weight:700; font-size:18px; }
.topbar .nav { display:flex; gap:6px; flex-wrap:wrap; }
.topbar .nav a { color:#d1d5db; padding:6px 12px; border-radius:6px; }
.topbar .nav a:hover { background:#1f2937; color:#fff; text-decoration:none; }
.topbar .logout { margin-inline-start:auto; display:flex; align-items:center; gap:10px; }
.topbar .user { color:#9ca3af; }
.container { max-width:1200px; margin:20px auto; padding:0 16px; }
.footer { text-align:center; color:var(--muted); padding:20px; font-size:12px; }
.card { background:var(--card); border:1px solid var(--line); border-radius:10px; padding:18px 20px; margin-bottom:18px; }
.card h2, .card h3 { margin-top:0; }
.cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:14px; margin-bottom:18px; }
.stat { background:var(--card); border:1px solid var(--line); border-radius:10px; padding:16px; }
.stat .n { font-size:32px; font-weight:700; }
.stat .l { color:var(--muted); }
.stat.warn .n { color:var(--warn); } .stat.ok .n { color:var(--ok); } .stat.susp .n { color:var(--susp); }
table { width:100%; border-collapse:collapse; background:var(--card); }
th, td { padding:9px 10px; border-bottom:1px solid var(--line); text-align:right; vertical-align:middle; }
th { background:#f9fafb; font-weight:600; color:#374151; white-space:nowrap; }
tr:hover td { background:#f8fafc; }
.table-wrap { overflow-x:auto; border:1px solid var(--line); border-radius:10px; }
.badge { display:inline-block; padding:2px 9px; border-radius:999px; font-size:12px; background:#e5e7eb; color:#374151; }
.badge-ok { background:#dcfce7; color:#166534; } .badge-warn { background:#fef3c7; color:#92400e; }
.badge-bad { background:#fee2e2; color:#991b1b; } .badge-susp { background:#ede9fe; color:#5b21b6; }
.btn { display:inline-block; border:1px solid transparent; border-radius:7px; padding:7px 14px; cursor:pointer; font-size:14px; background:var(--primary); color:#fff; }
.btn:hover { filter:brightness(0.95); text-decoration:none; }
.btn-sm { padding:4px 10px; font-size:13px; }
.btn-light { background:#e5e7eb; color:#111827; } .btn-ok { background:var(--ok); } .btn-warn { background:var(--warn); } .btn-bad { background:var(--bad); } .btn-susp { background:var(--susp); }
.btn-outline { background:transparent; color:var(--primary); border-color:var(--primary); }
form.inline { display:inline; }
label { display:block; font-weight:600; margin:10px 0 4px; }
input[type=text], input[type=password], input[type=number], input[type=email], select, textarea { width:100%; padding:8px 10px; border:1px solid #cbd5e1; border-radius:7px; font-size:14px; font-family:inherit; background:#fff; }
textarea { min-height:70px; }
.row { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:14px; }
.actions { display:flex; gap:8px; flex-wrap:wrap; margin-top:12px; }
.alert { padding:12px 16px; border-radius:8px; margin-bottom:16px; }
.alert-success { background:#dcfce7; color:#166534; } .alert-danger { background:#fee2e2; color:#991b1b; } .alert-info { background:#dbeafe; color:#1e40af; }
.muted { color:var(--muted); } .mono { font-family:Consolas, "Courier New", monospace; direction:ltr; unicode-bidi:embed; }
.keybox { font-family:Consolas, monospace; font-size:26px; letter-spacing:2px; direction:ltr; text-align:center; background:#f1f5f9; padding:14px; border-radius:10px; border:1px dashed #94a3b8; }
.filters { display:flex; gap:10px; flex-wrap:wrap; align-items:end; margin-bottom:12px; }
.filters > div { min-width:160px; }
.pager { display:flex; gap:8px; justify-content:center; margin:14px 0; }
.pager a, .pager span { padding:6px 12px; border:1px solid var(--line); border-radius:6px; background:#fff; }
.pager span.cur { background:var(--primary); color:#fff; border-color:var(--primary); }
.tabs { display:flex; gap:6px; border-bottom:1px solid var(--line); margin-bottom:14px; }
.tabs a { padding:8px 14px; border-radius:8px 8px 0 0; }
.tabs a.active { background:#fff; border:1px solid var(--line); border-bottom-color:#fff; margin-bottom:-1px; }
.login-box { max-width:380px; margin:60px auto; }
.copy { cursor:pointer; }
details > summary { cursor:pointer; color:var(--primary); font-weight:600; margin:6px 0; }
dl.kv { display:grid; grid-template-columns:max-content 1fr; gap:6px 16px; margin:0; }
dl.kv dt { color:var(--muted); } dl.kv dd { margin:0; }
pre.xml { white-space:pre-wrap; word-break:break-all; direction:ltr; text-align:left; background:#f1f5f9; padding:10px; border-radius:8px; font-size:12px; }