@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  --bg:       #0e1117;
  --surface:  #161b22;
  --surface2: #1c2128;
  --surface3: #21262d;
  --border:   #30363d;
  --border2:  #484f58;
  --gold:     #e3a030;
  --gold-dim: #a06b18;
  --gold-bg:  rgba(227,160,48,.10);
  --gold-bg2: rgba(227,160,48,.18);
  --text:     #e6edf3;
  --text2:    #8d96a0;
  --text3:    #656d76;
  --green:    #3fb950;
  --red:      #f85149;
  --blue:     #58a6ff;
  --r-sm: 6px; --r: 10px; --r-lg: 14px; --r-xl: 20px;
  --font: 'Inter', system-ui, sans-serif;
  --mono: 'JetBrains Mono', monospace;
}

[data-contrast="high"]   { --text:#fff; --text2:#ddd; --text3:#aaa; --bg:#000; --surface:#0a0a0a; --surface2:#111; --border:#666; }

/* ── Accessibility font-size overrides — apply to ALL text elements ── */
[data-font-size="large"] body,
[data-font-size="large"] p,
[data-font-size="large"] li,
[data-font-size="large"] td,
[data-font-size="large"] th,
[data-font-size="large"] span,
[data-font-size="large"] div,
[data-font-size="large"] a,
[data-font-size="large"] button,
[data-font-size="large"] input,
[data-font-size="large"] select,
[data-font-size="large"] textarea,
[data-font-size="large"] .msg-bub,
[data-font-size="large"] .input-field,
[data-font-size="large"] .btn,
[data-font-size="large"] h1, [data-font-size="large"] h2, [data-font-size="large"] h3 { font-size: 116% !important; }

[data-font-size="xl"] body,
[data-font-size="xl"] p,
[data-font-size="xl"] li,
[data-font-size="xl"] td,
[data-font-size="xl"] th,
[data-font-size="xl"] span,
[data-font-size="xl"] div,
[data-font-size="xl"] a,
[data-font-size="xl"] button,
[data-font-size="xl"] input,
[data-font-size="xl"] select,
[data-font-size="xl"] textarea,
[data-font-size="xl"] .msg-bub,
[data-font-size="xl"] .input-field,
[data-font-size="xl"] .btn,
[data-font-size="xl"] h1, [data-font-size="xl"] h2, [data-font-size="xl"] h3 { font-size: 130% !important; }


*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; }
body { font-family:var(--font); background:var(--bg); color:var(--text); font-size:14px; line-height:1.6; -webkit-font-smoothing:antialiased; min-height:100vh; }
a { color:var(--gold); text-decoration:none; }
a:hover { text-decoration:underline; }
::-webkit-scrollbar { width:5px; height:5px; }
::-webkit-scrollbar-track { background:var(--bg); }
::-webkit-scrollbar-thumb { background:var(--border2); border-radius:10px; }
:focus-visible { outline:2px solid var(--gold); outline-offset:2px; border-radius:4px; }
.skip-link { position:absolute; top:-40px; left:16px; background:var(--gold); color:#0e1117; padding:8px 16px; border-radius:0 0 var(--r) var(--r); font-weight:600; font-size:13px; z-index:9999; transition:top .2s; }
.skip-link:focus { top:0; }

@keyframes fadein { from{opacity:0;transform:translateY(6px)} to{opacity:1;transform:translateY(0)} }
@keyframes pulse  { 0%,100%{opacity:.25;transform:scale(.7)} 50%{opacity:1;transform:scale(1)} }

/* ── Shared Header ── */
.page-header { background:var(--surface); border-bottom:1px solid var(--border); height:54px; padding:0 20px; display:flex; align-items:center; justify-content:space-between; gap:12px; position:sticky; top:0; z-index:100; }
.page-logo { display:flex; align-items:center; gap:10px; text-decoration:none; }
.page-logo:hover { text-decoration:none; }
.logo-icon { width:34px; height:34px; background:var(--gold-bg2); border:1.5px solid var(--gold); border-radius:var(--r-sm); display:flex; align-items:center; justify-content:center; font-size:16px; flex-shrink:0; }
.logo-name { font-size:15px; font-weight:700; color:var(--text); letter-spacing:-.2px; }
.logo-sub  { font-size:9px; color:var(--text3); letter-spacing:.5px; text-transform:uppercase; }
.header-nav { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }

/* ── Buttons ── */
.btn { display:inline-flex; align-items:center; gap:6px; padding:7px 14px; border-radius:var(--r); border:1px solid var(--border); background:transparent; color:var(--text2); font-family:var(--font); font-size:13px; font-weight:500; cursor:pointer; transition:all .15s; white-space:nowrap; text-decoration:none; }
.btn:hover { border-color:var(--border2); color:var(--text); background:var(--surface2); text-decoration:none; }
.btn-primary { background:var(--gold); color:#0e1117; border-color:var(--gold); font-weight:700; }
.btn-primary:hover { background:#f0ab3a; border-color:#f0ab3a; color:#0e1117; }
.btn-sm { padding:4px 10px; font-size:12px; border-radius:var(--r-xl); }
.btn-gold { border-color:rgba(227,160,48,.35); color:var(--gold-dim); }
.btn-gold:hover { background:var(--gold-bg); color:var(--gold); border-color:var(--gold-dim); }

/* ── Lang Dropdown ── */
.lang-wrap { position:relative; }
.lang-btn { background:var(--surface2); border:1px solid var(--border); color:var(--text2); padding:5px 10px; border-radius:var(--r-xl); cursor:pointer; font-size:12px; font-weight:500; display:inline-flex; align-items:center; gap:5px; transition:all .15s; font-family:var(--font); }
.lang-btn:hover { border-color:var(--border2); color:var(--text); }
.lang-menu { position:absolute; right:0; top:calc(100% + 6px); background:var(--surface2); border:1px solid var(--border); border-radius:var(--r); z-index:500; box-shadow:0 8px 32px rgba(0,0,0,.5); width:130px; max-height:300px; overflow-y:auto; display:none; }
.lang-menu.open { display:block; animation:fadein .15s ease; }
.lang-item { display:flex; align-items:center; gap:8px; width:100%; padding:8px 12px; background:transparent; border:none; border-bottom:1px solid var(--border); color:var(--text2); font-size:12px; font-weight:500; font-family:var(--font); text-align:left; cursor:pointer; transition:background .1s; white-space:nowrap; }
.lang-item:last-child { border-bottom:none; }
.lang-item:hover { background:var(--surface3); color:var(--text); }
.lang-item.active { background:var(--gold-bg); color:var(--gold); }
.rtl .lang-menu { right:auto; left:0; }

/* ── A11y ── */
.a11y-btn { background:var(--surface3); border:1px solid var(--border); color:var(--text2); padding:4px 9px; border-radius:var(--r-xl); cursor:pointer; font-size:11px; font-weight:500; font-family:var(--font); transition:all .15s; }
.a11y-btn:hover, .a11y-btn.active { background:var(--gold-bg2); border-color:rgba(227,160,48,.4); color:var(--gold); }
.a11y-panel { position:fixed; top:62px; right:12px; background:var(--surface2); border:1px solid var(--border); border-radius:var(--r); padding:14px; z-index:1000; box-shadow:0 8px 32px rgba(0,0,0,.5); min-width:180px; display:none; animation:fadein .15s ease; }
.a11y-panel.open { display:block; }
.a11y-panel-title { font-size:10px; color:var(--text3); letter-spacing:.5px; text-transform:uppercase; margin-bottom:10px; }
.a11y-row { display:flex; gap:5px; margin-bottom:8px; }

/* ── Footer ── */
.page-footer { background:var(--surface); border-top:1px solid var(--border); padding:16px 20px; }
.footer-inner { max-width:960px; margin:0 auto; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; }
.footer-brand { font-size:13px; font-weight:600; color:var(--text2); }
.footer-brand span { color:var(--gold); }
.footer-links { display:flex; gap:16px; flex-wrap:wrap; }
.footer-links a { font-size:12px; color:var(--text3); transition:color .15s; }
.footer-links a:hover { color:var(--gold); text-decoration:none; }
.footer-copy { width:100%; border-top:1px solid var(--border); padding-top:10px; margin-top:4px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:6px; font-size:11px; color:var(--text3); }

/* ── Cards & Tables ── */
.card { background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); padding:20px; }
.badge { display:inline-block; padding:2px 8px; border-radius:var(--r-xl); font-size:11px; font-weight:600; }
.badge-free   { background:var(--surface3); color:var(--text3); }
.badge-basic  { background:rgba(63,185,80,.12); color:var(--green); }
.badge-pro    { background:rgba(88,166,255,.12); color:var(--blue); }
.badge-garage { background:var(--gold-bg2); color:var(--gold); }
.badge-active { background:rgba(63,185,80,.12); color:var(--green); }
.badge-off    { background:var(--surface3); color:var(--text3); }
.badge-admin  { background:var(--gold-bg2); color:var(--gold); border:1px solid rgba(227,160,48,.3); }
table { width:100%; border-collapse:collapse; font-size:13px; }
th { text-align:left; padding:8px 10px; color:var(--text3); border-bottom:1px solid var(--border); font-size:11px; font-weight:500; text-transform:uppercase; letter-spacing:.5px; }
td { padding:9px 10px; border-bottom:1px solid var(--border); color:var(--text2); vertical-align:middle; }
tr:last-child td { border-bottom:none; }
tr:hover td { background:var(--surface2); }

/* ── Forms ── */
.form-field { background:var(--surface2); border:1px solid var(--border); color:var(--text); padding:8px 12px; border-radius:var(--r-sm); font-family:var(--font); font-size:13px; outline:none; transition:border-color .15s; width:100%; }
.form-field:focus { border-color:var(--gold-dim); }
.form-field::placeholder { color:var(--text3); }
select.form-field { cursor:pointer; }
textarea.form-field { resize:vertical; min-height:72px; }

/* ── Stats ── */
.stat-card { background:var(--surface2); border:1px solid var(--border); border-radius:var(--r); padding:14px 16px; }
.stat-val   { font-size:28px; font-weight:700; color:var(--gold); margin-bottom:4px; }
.stat-label { font-size:10px; color:var(--text3); text-transform:uppercase; letter-spacing:.5px; }

/* ── Billing toggle ── */
.billing-toggle { display:flex; align-items:center; justify-content:center; gap:12px; }
.toggle-label { font-size:12px; color:var(--text3); font-weight:500; letter-spacing:.5px; }
.toggle-track { background:var(--surface2); border:1px solid var(--border); border-radius:20px; padding:3px; cursor:pointer; position:relative; width:46px; height:24px; display:inline-block; }
.toggle-track:hover { border-color:var(--border2); }
.toggle-thumb { width:16px; height:16px; border-radius:50%; background:var(--gold); position:absolute; top:3px; left:3px; transition:transform .2s; }
.toggle-thumb.on { transform:translateX(22px); }
.save-pill { background:rgba(63,185,80,.1); border:1px solid rgba(63,185,80,.25); color:var(--green); font-size:11px; font-weight:600; padding:3px 10px; border-radius:var(--r-xl); }

/* ── Misc ── */
.msg-ok  { color:var(--green); font-size:12px; }
.msg-err { color:var(--red); font-size:12px; }
.loading-text { color:var(--text3); font-size:13px; padding:20px; text-align:center; }
.rtl { direction:rtl; }

@media(max-width:768px) { .page-header{padding:0 12px;height:50px;} .logo-sub{display:none;} .footer-inner{flex-direction:column;} }
@media(max-width:480px) { body{font-size:13px;} .btn{padding:6px 12px;font-size:12px;} }