:root {
--hue:200; --bg:oklch(.985 .004 var(--hue)); --surface:oklch(.995 .003 var(--hue)); --surface-2:oklch(.965 .006 var(--hue));
--border:oklch(.90 .008 var(--hue)); --border-strong:oklch(.82 .010 var(--hue)); --text:oklch(.24 .015 var(--hue)); --text-muted:oklch(.48 .012 var(--hue));
--accent:oklch(.46 .09 205); --accent-hover:oklch(.40 .09 205); --accent-soft:oklch(.95 .025 205); --on-accent:oklch(.99 .005 205);
--success:oklch(.52 .12 150); --success-soft:oklch(.95 .04 150); --warning:oklch(.62 .13 75); --warning-soft:oklch(.96 .05 85); --danger:oklch(.52 .17 25); --danger-soft:oklch(.96 .03 25);
--info:var(--accent); --info-soft:var(--accent-soft); --focus-ring:0 0 0 3px oklch(.46 .09 205 / .35);
--s1:4px; --s2:8px; --s3:12px; --s4:16px; --s6:24px; --s8:32px; --s12:48px;
}
* { box-sizing:border-box; }
[hidden] { display:none !important; }
body { margin:0; background:var(--bg); color:var(--text); font:400 1rem/1.5 "Segoe UI",system-ui,-apple-system,"Noto Sans Arabic","Noto Sans",Tahoma,sans-serif; }
[dir=rtl] body { line-height:1.7; }
h1,h2,h3 { font-weight:600; line-height:1.25; margin-block:0 var(--s4); }
h1 { font-size:1.44rem; } h2 { font-size:1.2rem; } h3 { font-size:1rem; margin-block-start:var(--s6); }
p { max-inline-size:70ch; margin-block:0 var(--s4); }
a { color:var(--accent); text-underline-offset:3px; } a:hover { color:var(--accent-hover); }
a:not(.button):not(.nav-link):not(.skip-link) { display:inline-flex; align-items:center; min-block-size:32px; }
button,input,select,textarea { font:inherit; }
button,a,input,select,summary { transition:background-color 180ms ease-out,color 180ms ease-out,border-color 180ms ease-out; }
:focus-visible { outline:2px solid var(--accent); outline-offset:2px; box-shadow:var(--focus-ring); }
code,pre { font-family:ui-monospace,"Cascadia Mono",Consolas,monospace; }
time,td,code,pre,bdi { font-variant-numeric:tabular-nums; }
.muted,small,dt { color:var(--text-muted); } small { font-size:.8125rem; }
.sr-only { position:absolute; inline-size:1px; block-size:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.skip-link { position:fixed; inset-block-start:var(--s2); inset-inline-start:var(--s2); transform:translateY(-200%); z-index:5; background:var(--surface); padding:var(--s3); }
.skip-link:focus { transform:none; }
.app { display:grid; grid-template-columns:208px minmax(0,1fr); grid-template-rows:auto 1fr; min-block-size:100vh; }
.topbar { grid-column:1 / -1; display:flex; align-items:center; justify-content:space-between; gap:var(--s4); padding:var(--s3) var(--s6); background:var(--surface); border-block-end:1px solid var(--border); }
.product-name { text-decoration:none; font-weight:600; color:var(--text); }
.topbar-actions,.actions { display:flex; align-items:center; flex-wrap:wrap; gap:var(--s3); }
.account-menu { position:relative; } summary { cursor:pointer; min-block-size:36px; padding-block:var(--s2); } summary:hover { color:var(--accent); }
.account-menu summary { display:flex; align-items:center; gap:var(--s1); list-style:none; } .account-menu summary::-webkit-details-marker { display:none; }
.account-menu summary .icon { transition:transform 180ms ease-out; } .account-menu[open] summary .icon { transform:rotate(90deg); }
[dir=rtl] .account-menu[open] summary .icon.icon-dir { transform:scaleX(-1) rotate(-90deg); }
.menu-content { position:absolute; inset-inline-end:0; z-index:2; background:var(--surface); border:1px solid var(--border-strong); border-radius:6px; padding:var(--s4); min-inline-size:160px; display:grid; gap:var(--s4); }
.sidenav { background:var(--surface-2); border-inline-end:1px solid var(--border); padding:var(--s6) var(--s3); }
.nav-link { display:flex; align-items:center; gap:var(--s3); padding:var(--s3); min-block-size:44px; color:var(--text); text-decoration:none; border-radius:6px; font-size:.875rem; }
.nav-link:hover { background:var(--border); } .nav-link.selected { color:var(--accent); background:var(--accent-soft); font-weight:600; }
.icon { flex:0 0 auto; } [dir=rtl] .icon-dir { transform:scaleX(-1); }
main { inline-size:100%; max-inline-size:1200px; margin-inline:auto; padding:var(--s8); background:var(--surface); }
.anonymous main { max-inline-size:480px; margin-block:var(--s12); border:1px solid var(--border); border-radius:8px; }
.page-header { display:flex; align-items:start; justify-content:space-between; gap:var(--s6); margin-block-end:var(--s8); } .page-header p { margin:0; }
.button { display:inline-flex; align-items:center; justify-content:center; gap:var(--s2); min-block-size:36px; padding:var(--s2) var(--s4); border:1px solid var(--border-strong); border-radius:6px; font-size:.875rem; font-weight:600; cursor:pointer; text-decoration:none; background:var(--surface); color:var(--text); line-height:1.25; }
.button.primary { background:var(--accent); border-color:var(--accent); color:var(--on-accent); } .button.primary:hover { background:var(--accent-hover); }
.button.secondary:hover { background:var(--surface-2); }
.button.danger { color:var(--danger); border-color:var(--danger); } .button.danger:hover { background:var(--danger-soft); }
.button.danger.filled { background:var(--danger); color:var(--on-accent); }
.button:active { filter:brightness(.94); } .button:disabled { opacity:.55; cursor:not-allowed; }
.button[aria-busy=true]::before { content:""; inline-size:12px; block-size:12px; border:2px solid currentColor; border-inline-end-color:transparent; border-radius:50%; animation:spin 800ms linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }
.table-scroll { overflow:auto; border:1px solid var(--border); border-radius:8px; }
table { border-collapse:collapse; inline-size:100%; font-size:.875rem; } th { background:var(--surface-2); font-weight:600; text-align:start; }
th,td { padding:var(--s3) var(--s4); border-block-end:1px solid var(--border); min-block-size:44px; vertical-align:top; }
tbody tr:last-child td { border-block-end:0; } tbody tr:hover { background:var(--surface-2); } .numeric { text-align:end; }
.badge { display:inline-flex; align-items:center; gap:6px; border-radius:999px; padding:var(--s1) var(--s2); font-size:.8125rem; white-space:nowrap; color:var(--text-muted); background:var(--surface-2); margin-block-end:var(--s1); }
.badge::before { content:""; inline-size:6px; block-size:6px; border-radius:50%; background:currentColor; }
.badge.success { color:oklch(.38 .09 150); background:var(--success-soft); } .badge.warning { color:oklch(.40 .09 75); background:var(--warning-soft); } .badge.danger { color:var(--danger); background:var(--danger-soft); }
.notice { display:flex; align-items:start; gap:var(--s3); padding:var(--s4); margin-block:var(--s4); border:1px solid var(--border-strong); border-radius:6px; }
.notice p { margin:0; } .notice.warning { background:var(--warning-soft); border-color:var(--warning); } .notice.danger { background:var(--danger-soft); border-color:var(--danger); color:var(--danger); } .notice.info { background:var(--info-soft); border-color:var(--info); }
.form-stack { display:grid; gap:var(--s6); max-inline-size:540px; margin-block:var(--s6); } .form-stack > .button { justify-self:start; }
.field { display:grid; gap:var(--s2); } label,legend { font-size:.875rem; font-weight:600; }
input:not([type=checkbox]),select,textarea { inline-size:100%; min-block-size:36px; border:1px solid var(--border-strong); border-radius:6px; padding:var(--s2) var(--s3); background:var(--surface); color:var(--text); }
input:not([type=checkbox]),select,textarea,.button.secondary { border-color:var(--text-muted); }
input:hover,select:hover { border-color:var(--accent); } input:disabled { background:var(--surface-2); }
input[type=checkbox] { inline-size:18px; block-size:18px; accent-color:var(--accent); }
.checkbox { display:flex; gap:var(--s3); align-items:center; min-block-size:36px; cursor:pointer; }
fieldset { border:1px solid var(--border-strong); border-radius:6px; padding:var(--s4); }
.copy-field { display:flex; align-items:start; gap:var(--s3); background:var(--surface-2); border:1px solid var(--border-strong); border-radius:6px; padding:var(--s3); margin-block:var(--s4); }
.copy-field pre { flex:1; min-inline-size:0; white-space:pre-wrap; overflow-wrap:anywhere; font-size:.875rem; margin:0; }
.uri { white-space:pre-wrap; overflow-wrap:anywhere; font-size:.875rem; }
.section { margin-block-start:var(--s8); padding-block-start:var(--s6); border-block-start:1px solid var(--border); }
.store-strip { padding-block-end:var(--s6); border-block-end:1px solid var(--border); }
.store-facts { display:flex; flex-wrap:wrap; gap:var(--s6); margin-block:var(--s6); } .store-facts dt { font-size:.8125rem; } .store-facts dd { margin:0; }
.destructive { margin-block-start:var(--s6); } .empty-state { padding-block:var(--s12); }
.toolbar { display:flex; align-items:center; flex-wrap:wrap; gap:var(--s4); margin-block-end:var(--s6); }
.pagination { display:flex; gap:var(--s4); align-items:center; margin-block-start:var(--s6); font-size:.875rem; }
.steps { display:flex; flex-wrap:wrap; gap:var(--s6); padding-inline-start:var(--s6); color:var(--text-muted); font-size:.875rem; margin-block:var(--s6); } .steps [aria-current=step] { color:var(--accent); font-weight:600; }
dialog { background:var(--surface); color:var(--text); border:1px solid var(--border-strong); border-radius:8px; padding:var(--s8); max-inline-size:min(560px,calc(100% - 32px)); box-shadow:0 12px 48px oklch(.24 .015 200 / .18); }
dialog::backdrop { background:oklch(.24 .015 200 / .35); } dialog .actions { margin-block-start:var(--s6); justify-content:end; }
.licence-list { display:grid; gap:var(--s6); margin-block:var(--s6); }
.licence-row p { margin:0; margin-inline-start:52px; }
.switch-row { display:flex; align-items:center; gap:var(--s3); cursor:pointer; margin-block-end:var(--s2); }
.switch-row input[type=checkbox][role=switch] { appearance:none; inline-size:40px; block-size:22px; border-radius:999px; background:var(--border-strong); position:relative; flex:0 0 auto; margin:0; cursor:pointer; }
.switch-row input[type=checkbox][role=switch]::before { content:""; position:absolute; inset-inline-start:2px; inset-block-start:2px; inline-size:18px; block-size:18px; border-radius:50%; background:var(--surface); transition:inset-inline-start 180ms ease-out; }
.switch-row input[type=checkbox][role=switch]:checked { background:var(--accent); }
.switch-row input[type=checkbox][role=switch]:checked::before { inset-inline-start:20px; }
.switch-row input:disabled { opacity:.6; cursor:not-allowed; }
.switch-name { font-weight:600; } .switch-state { color:var(--text-muted); font-size:.875rem; }
.settings-form fieldset { margin-block-end:var(--s6); display:grid; gap:var(--s6); }
.secret-field { display:flex; align-items:center; gap:var(--s3); flex-wrap:wrap; }
.field-error { display:flex; align-items:center; gap:var(--s2); color:var(--danger); }
.usage-card dd { font-variant-numeric:tabular-nums; }
.sparkline { color:var(--accent); display:block; margin-block-start:var(--s3); }
.ticket-open-count { margin-inline-start:auto; margin-block-end:0; }
.unread-dot { display:inline-block; inline-size:8px; block-size:8px; border-radius:50%; background:var(--accent); }
.ticket-message { padding:var(--s4); margin-block:var(--s4); border:1px solid var(--border-strong); border-radius:8px; }
.ticket-message header { display:flex; flex-wrap:wrap; align-items:center; gap:var(--s3); margin-block-end:var(--s3); font-size:.875rem; }
.store-message { background:var(--surface-2); }
.vendor-message { background:var(--accent-soft); }
.thread-body { white-space:pre-wrap; overflow-wrap:anywhere; margin-block-end:0; }
.ticket-screenshot { display:block; max-inline-size:100%; block-size:auto; margin-block-start:var(--s4); border:1px solid var(--border); border-radius:8px; }
.ticket-context td { overflow-wrap:anywhere; }
@media (max-width:900px) { .app { display:block; } .sidenav { display:flex; flex-wrap:wrap; gap:var(--s1); padding:var(--s2); border-inline-end:0; border-block-end:1px solid var(--border); } main { padding:var(--s6) var(--s4); } .nav-link { padding:var(--s2) var(--s3); } .page-header { flex-wrap:wrap; } }
@media (max-width:480px) { .topbar { padding:var(--s3); flex-wrap:wrap; } .anonymous main { margin-block:var(--s6); border:0; } .copy-field { flex-direction:column; } .store-facts { gap:var(--s4); } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { transition:none !important; animation:none !important; } }