:root{--bg:#f4f6f8;--card:#fff;--text:#16202a;--muted:#667685;--line:#dfe5ea;--primary:#1d8f8a;--primary-text:#fff;--soft:#e3f3f2;--danger:#c0392b;--danger-soft:#fbe9e7;--warn:#a86400;--warn-soft:#fdf1dc;--ok:#1c7c45;--ok-soft:#e2f4e9}
@media (prefers-color-scheme:dark){:root{--bg:#0d1115;--card:#171c22;--text:#eef2f5;--muted:#93a1ae;--line:#28313a;--primary:#2aa7a1;--primary-text:#06201f;--soft:#12302f;--danger:#ef7a6d;--danger-soft:#3a1c19;--warn:#f0b354;--warn-soft:#3a2a10;--ok:#5ccf8d;--ok-soft:#14301f}}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text);font:15px/1.6 system-ui,"Noto Sans Arabic","Segoe UI",sans-serif}
header{display:flex;align-items:center;gap:12px;padding:14px 20px;background:var(--card);border-bottom:1px solid var(--line)}
header h1{font-size:18px;margin:0;flex:1}
main{max-width:1180px;margin:0 auto;padding:20px 16px 60px}
h2{font-size:16px;margin:28px 0 10px}
.card{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:16px}
.login{max-width:380px;margin:60px auto}
.two-step{max-width:440px}
.two-step p{line-height:1.7}
.qr{display:block;margin:12px auto;width:216px;height:216px;image-rendering:pixelated;background:#fff;border-radius:8px}
.secret{direction:ltr;text-align:center;font-family:ui-monospace,Menlo,monospace;font-size:15px;letter-spacing:1px;word-break:break-all;user-select:all;padding:8px;border-radius:8px;background:var(--soft);color:var(--text)}
.codes{direction:ltr;font-family:ui-monospace,Menlo,monospace;font-size:18px;line-height:2;columns:2;text-align:center;user-select:all;margin:12px 0}
label{display:block;font-size:13px;color:var(--muted);margin:10px 0 4px}
input,select{width:100%;padding:9px 10px;border:1px solid var(--line);border-radius:8px;background:var(--bg);color:var(--text);font:inherit}
input[type=checkbox]{width:auto}
button{padding:9px 14px;border:0;border-radius:8px;background:var(--primary);color:var(--primary-text);font:inherit;font-weight:600;cursor:pointer}
button.ghost{background:transparent;color:var(--primary);border:1px solid var(--line)}
button.danger{background:var(--danger-soft);color:var(--danger)}
button:disabled{opacity:.5;cursor:default}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}
.stat .n{font-size:24px;font-weight:700}
.stat .l{font-size:13px;color:var(--muted)}
.scroll{overflow-x:auto}
table{width:100%;border-collapse:collapse}
th,td{text-align:start;padding:10px 8px;border-bottom:1px solid var(--line);vertical-align:top;white-space:nowrap}
th{font-size:12px;color:var(--muted);font-weight:600}
td.wrap{white-space:normal;min-width:160px}
.muted{color:var(--muted);font-size:13px}
.badge{display:inline-block;padding:2px 9px;border-radius:999px;font-size:12px;font-weight:700}
.b-PAID{background:var(--ok-soft);color:var(--ok)}
.b-TRIAL{background:var(--soft);color:var(--primary)}
.b-PENDING{background:var(--warn-soft);color:var(--warn);outline:1px dashed var(--warn)}
.b-EXPIRED{background:var(--warn-soft);color:var(--warn)}
.b-SUSPENDED{background:var(--danger-soft);color:var(--danger)}
.row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.edit{background:var(--bg)}
.edit .grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px;align-items:end;white-space:normal}
.msg{margin:12px 0;padding:10px 12px;border-radius:8px;background:var(--danger-soft);color:var(--danger)}
.msg.ok{background:var(--ok-soft);color:var(--ok)}
.ltr{direction:ltr;unicode-bidi:isolate;display:inline-block}
.small{width:120px}
.flush{margin-top:0}
.grid.bc{display:grid;grid-template-columns:110px minmax(140px,1fr) minmax(200px,2fr);gap:10px;align-items:center;margin-bottom:10px}
@media (max-width:640px){.grid.bc{grid-template-columns:1fr}}
.gap-top{margin-top:16px}
.gap-bottom{margin-bottom:10px}
label.inline{margin:0;display:inline}
.strong{font-weight:600}
input.search{max-width:340px}
select{appearance:none;-webkit-appearance:none;padding-inline-end:38px;background-repeat:no-repeat;background-size:6px 6px;background-position:left 16px top 55%,left 22px top 55%;background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%)}
.narrow{max-width:760px}
.code{font-size:30px;font-weight:700;letter-spacing:2px}
.choices{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:10px}
.choice{display:block;margin:0;padding:12px;border:1px solid var(--line);border-radius:10px;background:var(--bg);color:var(--text);font-size:15px;cursor:pointer}
.choice.on{border-color:var(--primary);background:var(--soft)}
.choice.off{opacity:.5;cursor:default}
.choice input{margin-inline-end:8px}
.choice .sub{display:block;color:var(--muted);font-size:13px;margin-top:2px}
.save{color:var(--ok);font-weight:700}
img.qr{display:block;width:220px;max-width:100%;height:auto;border-radius:10px;border:1px solid var(--line);background:#fff;margin-top:10px}
img.qr.thumb{width:64px;margin:0}
.total{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-top:16px}
.total .n{font-size:26px;font-weight:700}
.note{margin:12px 0;padding:10px 12px;border-radius:8px;background:var(--warn-soft);color:var(--warn)}
.pending{border-color:var(--warn)}
.grow{flex:1}
input[type=radio]{width:auto}
.choice{display:flex;flex-wrap:wrap;align-items:center;gap:2px 8px}
.choice input{margin:0}
.choice .sub{flex-basis:100%}
.narrow th,.narrow td{white-space:normal;padding:8px 5px}
.narrow td:first-child{white-space:nowrap}
.stack{margin:6px 0 0;padding:8px;max-height:220px;overflow:auto;white-space:pre-wrap;word-break:break-word;font-size:12px;text-align:left;background:var(--danger-soft);border-radius:8px}
details summary{cursor:pointer}
h2>button.fold{all:unset;cursor:pointer;display:inline-flex;align-items:center;gap:8px;font:inherit;color:inherit;padding:4px 0}
h2>button.fold:focus-visible{outline:2px solid currentColor;border-radius:4px}
.fold-arrow{display:inline-block;width:1em;text-align:center}
.mt6{margin-top:6px}