/* آروان خودرو — shared tokens + components (site + panel).
   Dark-first: a showroom at night. Light = the same showroom by day: warm paper, bronze for interaction.
   .tone-dark pins the night palette on a subtree (hero stage, photo overlays) in either theme. */
:root,.tone-dark{
  color-scheme:dark;
  --bg:#0B0B0C; --surface:#131315; --raised:#1D1D20; --sunk:#08080A;
  --line:rgba(238,233,224,.11); --line-2:rgba(238,233,224,.24);
  --fg:#EEE9E0; --fg-2:#D3CEC5; --mute:#A7A198;
  --accent:#D9C29A; --accent-hi:#EAD8B6; --accent-ink:#D9C29A; --on-accent:#17130C;
  --accent-soft:rgba(217,194,154,.12);
  --glass:rgba(11,11,12,.86); --scrim:rgba(5,5,6,.78); --veil:rgba(11,11,12,.55);
  --ok:#8FC5A0; --warn:#E3A857; --bad:#E2715F; --info:#9DB7E0;
  --ok-soft:rgba(143,197,160,.13); --warn-soft:rgba(227,168,87,.14); --bad-soft:rgba(226,113,95,.14); --info-soft:rgba(157,183,224,.14);
  --panel-fabric:rgba(238,233,224,.14);
  --shadow:0 30px 60px -30px rgba(0,0,0,.85);
  --shadow-s:0 10px 30px -12px rgba(0,0,0,.7);
}
@media (prefers-color-scheme:light){
  :root:not([data-theme="dark"]){
    color-scheme:light;
    --bg:#F4F1EB; --surface:#FFFDF9; --raised:#ECE7DE; --sunk:#E6E0D5;
    --line:rgba(36,30,20,.12); --line-2:rgba(36,30,20,.26);
    --fg:#17150F; --fg-2:#3A352C; --mute:#655E52;
    --accent:#B8975B; --accent-hi:#A88649; --accent-ink:#7A5A20; --on-accent:#17130C;
    --accent-soft:rgba(184,151,91,.16);
    --glass:rgba(250,248,243,.88); --scrim:rgba(30,26,20,.5); --veil:rgba(255,253,249,.7);
    --ok:#2E7A4A; --warn:#A35F0F; --bad:#B23E2A; --info:#2E5C9E;
    --ok-soft:rgba(46,122,74,.11); --warn-soft:rgba(163,95,15,.11); --bad-soft:rgba(178,62,42,.1); --info-soft:rgba(46,92,158,.1);
    --panel-fabric:rgba(36,30,20,.1);
    --shadow:0 30px 60px -34px rgba(60,45,20,.35);
    --shadow-s:0 10px 30px -14px rgba(60,45,20,.3);
  }
}
:root[data-theme="light"]{
  color-scheme:light;
  --bg:#F4F1EB; --surface:#FFFDF9; --raised:#ECE7DE; --sunk:#E6E0D5;
  --line:rgba(36,30,20,.12); --line-2:rgba(36,30,20,.26);
  --fg:#17150F; --fg-2:#3A352C; --mute:#655E52;
  --accent:#B8975B; --accent-hi:#A88649; --accent-ink:#7A5A20; --on-accent:#17130C;
  --accent-soft:rgba(184,151,91,.16);
  --glass:rgba(250,248,243,.88); --scrim:rgba(30,26,20,.5); --veil:rgba(255,253,249,.7);
  --ok:#2E7A4A; --warn:#A35F0F; --bad:#B23E2A; --info:#2E5C9E;
  --ok-soft:rgba(46,122,74,.11); --warn-soft:rgba(163,95,15,.11); --bad-soft:rgba(178,62,42,.1); --info-soft:rgba(46,92,158,.1);
  --panel-fabric:rgba(36,30,20,.1);
  --shadow:0 30px 60px -34px rgba(60,45,20,.35);
  --shadow-s:0 10px 30px -14px rgba(60,45,20,.3);
}
/* the dark stage must win over a light root inside its subtree */
:root[data-theme="light"] .tone-dark,:root:not([data-theme="dark"]) .tone-dark{
  color-scheme:dark;
  --bg:#0B0B0C; --surface:#131315; --raised:#1D1D20; --sunk:#08080A;
  --line:rgba(238,233,224,.11); --line-2:rgba(238,233,224,.24);
  --fg:#EEE9E0; --fg-2:#D3CEC5; --mute:#A7A198;
  --accent:#D9C29A; --accent-hi:#EAD8B6; --accent-ink:#D9C29A; --on-accent:#17130C; --accent-soft:rgba(217,194,154,.12);
  --glass:rgba(11,11,12,.86); --veil:rgba(11,11,12,.55); --panel-fabric:rgba(238,233,224,.14);
  --ok:#8FC5A0; --warn:#E3A857; --bad:#E2715F;
}
:root{
  --f-display:"Reem Kufi","Vazirmatn",system-ui,sans-serif;
  --f-body:"Vazirmatn",system-ui,-apple-system,"Segoe UI",Tahoma,sans-serif;
  --f-badge:"Michroma","Vazirmatn",system-ui,sans-serif;
  --r-s:6px; --r-m:12px; --r-l:20px;
  --gut:max(16px, env(safe-area-inset-left, 0px));
  --gut-r:max(16px, env(safe-area-inset-right, 0px));
  --wrap:1280px;
  --ease:cubic-bezier(.2,.7,.2,1);
  --z-head:50; --z-bar:45; --z-tray:40; --z-toast:90;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;background:var(--bg)}
body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--f-body);font-size:16px;line-height:1.75;overflow-x:hidden;transition:background-color .35s var(--ease),color .35s var(--ease)}
:where(button,input,select,textarea){font-family:inherit;font-size:inherit;color:inherit}
img{max-width:100%;display:block}
a{color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}
.wrap{max-width:var(--wrap);margin-inline:auto;padding-left:var(--gut);padding-right:var(--gut-r)}
.latin{font-family:var(--f-badge);direction:ltr;unicode-bidi:isolate;letter-spacing:.14em;text-transform:uppercase}
h1,h2,h3,h4{font-family:var(--f-display);font-weight:600;line-height:1.25;margin:0;text-wrap:balance}
p{margin:0}
.flip{transform:scaleX(-1)}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.eyebrow{display:flex;align-items:center;gap:10px;color:var(--accent-ink);font-size:.875rem;font-weight:500}
.eyebrow::before{content:"";width:28px;height:1px;background:currentColor}
.mute{color:var(--mute)}
.fine{font-size:.8125rem;color:var(--mute)}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:0 22px;border-radius:999px;border:1px solid transparent;font-weight:500;cursor:pointer;text-decoration:none;transition:background .2s var(--ease),color .2s,border-color .2s,transform .2s var(--ease),opacity .2s;white-space:nowrap;background:none;color:var(--fg)}
.btn svg{width:18px;height:18px;flex:none}
.btn-gold{background:var(--accent);color:var(--on-accent)}
.btn-gold:hover{background:var(--accent-hi)}
.btn-ghost{border-color:var(--line-2);color:var(--fg);background:var(--veil);backdrop-filter:blur(8px)}
.btn-ghost:hover{border-color:var(--accent);color:var(--accent-ink)}
.btn-plain{color:var(--mute)}
.btn-plain:hover{color:var(--fg)}
.btn-danger{border-color:var(--bad);color:var(--bad)}
.btn-danger:hover{background:var(--bad-soft)}
.btn:active{transform:translateY(1px)}
.btn:disabled,.btn[aria-busy="true"]{opacity:.55;cursor:not-allowed}
.btn[aria-busy="true"]::after{content:"";width:14px;height:14px;border-radius:50%;border:2px solid currentColor;border-top-color:transparent;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.btn-sm{min-height:40px;padding:0 16px;font-size:.9375rem}
.btn-xs{min-height:34px;padding:0 12px;font-size:.8125rem;gap:6px}
.btn-xs svg{width:15px;height:15px}
.icon-btn{display:inline-grid;place-items:center;width:44px;height:44px;border-radius:999px;border:1px solid var(--line);background:var(--veil);color:var(--fg);cursor:pointer;transition:border-color .2s,color .2s,background .2s;flex:none;padding:0}
.icon-btn svg{width:19px;height:19px}
.icon-btn:hover{border-color:var(--accent);color:var(--accent-ink)}
.icon-btn[aria-pressed="true"]{color:var(--accent-ink);border-color:var(--accent)}
.icon-btn[aria-pressed="true"] .fill-on{fill:currentColor}
.icon-btn.sm{width:36px;height:36px}
.icon-btn.sm svg{width:16px;height:16px}

/* theme switch: sun in dark, moon in light */
.theme-btn .moon{display:none}
:root[data-theme="light"] .theme-btn .moon{display:block}
:root[data-theme="light"] .theme-btn .sun{display:none}
@media (prefers-color-scheme:light){:root:not([data-theme="dark"]) .theme-btn .moon{display:block}:root:not([data-theme="dark"]) .theme-btn .sun{display:none}}

/* chips + segmented */
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chip{min-height:40px;padding:0 16px;border-radius:999px;border:1px solid var(--line);background:transparent;color:var(--mute);cursor:pointer;transition:all .2s;font-size:.9375rem;display:inline-flex;align-items:center;gap:6px}
.chip:hover{color:var(--fg);border-color:var(--line-2)}
.chip[aria-pressed="true"]{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.chip small{opacity:.65}
.seg{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:6px;padding:4px;background:var(--raised);border-radius:999px}
.seg button{min-height:40px;border:0;border-radius:999px;background:transparent;color:var(--mute);cursor:pointer;transition:all .2s;padding:0 10px}
.seg button[aria-pressed="true"]{background:var(--fg);color:var(--bg);font-weight:500}

/* forms */
.form{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.form .full{grid-column:1/-1}
@media (max-width:520px){.form{grid-template-columns:1fr}}
.input{display:flex;flex-direction:column;gap:6px;min-width:0}
.input>label,.input>.lbl{font-size:.875rem;color:var(--mute)}
.input input,.input select,.input textarea{background:var(--raised);border:1px solid var(--line);border-radius:var(--r-m);min-height:50px;padding:12px 14px;outline:none;transition:border-color .2s,background .2s;width:100%}
.input textarea{min-height:96px;resize:vertical;line-height:1.7}
.input input:focus,.input select:focus,.input textarea:focus{border-color:var(--accent)}
.input [aria-invalid="true"]{border-color:var(--bad)!important}
.input .err{font-size:.8125rem;color:var(--bad)}
.input .err:empty{display:none}
.input .hint{font-size:.75rem;color:var(--mute)}
select option{background:var(--surface);color:var(--fg)}
.check-row{display:flex;align-items:center;gap:10px;cursor:pointer;font-size:.9375rem}
.check-row input{width:20px;height:20px;accent-color:var(--accent);margin:0}
.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-l);padding:clamp(20px,3vw,32px)}
.success{display:flex;flex-direction:column;gap:14px;align-items:flex-start}
.success .check{width:52px;height:52px;border-radius:50%;display:grid;place-items:center;background:var(--ok-soft);color:var(--ok)}
.success .check svg{width:26px;height:26px}
.code{direction:ltr;unicode-bidi:isolate;font-family:var(--f-badge);letter-spacing:.12em;background:var(--raised);border:1px solid var(--line);padding:6px 12px;border-radius:var(--r-s);font-size:.875rem;white-space:nowrap}
.alert{padding:12px 14px;border-radius:var(--r-m);font-size:.9rem;background:var(--bad-soft);color:var(--bad)}
.alert:empty{display:none}

/* status pills */
.pill{display:inline-flex;align-items:center;gap:6px;font-size:.75rem;font-weight:500;padding:3px 10px;border-radius:999px;white-space:nowrap;background:var(--raised);color:var(--mute);line-height:1.6}
.pill::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.pill.ok{background:var(--ok-soft);color:var(--ok)}
.pill.warn{background:var(--warn-soft);color:var(--warn)}
.pill.bad{background:var(--bad-soft);color:var(--bad)}
.pill.info{background:var(--info-soft);color:var(--info)}
.pill.gold{background:var(--accent-soft);color:var(--accent-ink)}

/* Iranian plate (always laid out LTR like the real plate) */
.plate{direction:ltr;display:inline-flex;align-items:stretch;height:30px;border-radius:4px;background:#F4F2EC;color:#111;border:1.5px solid #111;overflow:hidden;font-family:var(--f-body);font-weight:700;font-size:.9375rem;line-height:1;flex:none;position:relative;z-index:2}
.plate .ir{width:14px;background:#1F4AA8;display:flex;flex-direction:column;justify-content:space-between;padding:3px 0 2px}
.plate .ir i{display:block;height:3px;margin:0 3px;background:#239f40}
.plate .ir i:nth-child(2){background:#fff}
.plate .ir i:nth-child(3){background:#da0000}
.plate .num{display:flex;align-items:center;gap:5px;padding:0 7px}
.plate .prov{display:flex;flex-direction:column;align-items:center;justify-content:center;border-left:1.5px solid #111;padding:0 6px;font-size:.8125rem}
.plate .prov small{font-size:.4375rem;font-weight:500}
.fz{direction:rtl;display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 10px;border:1px solid var(--line-2);border-radius:4px;font-size:.75rem;color:var(--mute);position:relative;z-index:2;flex:none;white-space:nowrap}
.fz svg{width:14px;height:14px}

/* dialogs */
dialog{padding:0;border:0;background:transparent;color:var(--fg);max-width:100vw;max-height:100dvh}
dialog::backdrop{background:var(--scrim);backdrop-filter:blur(6px)}
dialog[open]{animation:dlg .35s var(--ease)}
@keyframes dlg{from{transform:translateY(16px);opacity:.4}}
.sheet{width:min(1180px,calc(100vw - 32px));max-height:calc(100dvh - 32px);overflow:auto;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-l);position:relative;overscroll-behavior:contain;box-shadow:var(--shadow)}
.sheet.narrow{width:min(620px,calc(100vw - 32px))}
.sheet.mid{width:min(860px,calc(100vw - 32px))}
.sheet-close{position:sticky;top:12px;float:left;margin:12px;z-index:5}
@media (max-width:640px){
  .sheet,.sheet.narrow,.sheet.mid{width:100vw;max-height:100dvh;height:100dvh;border-radius:0;border:0;padding-bottom:env(safe-area-inset-bottom,0px)}
  dialog{margin:0}
}
.dlg-pad{padding:28px clamp(20px,4vw,40px) 32px;display:flex;flex-direction:column;gap:20px}
.dlg-pad h2{font-size:1.6rem}

.toast{position:fixed;z-index:var(--z-toast);inset-inline:0;bottom:calc(96px + env(safe-area-inset-bottom,0px));display:flex;justify-content:center;pointer-events:none;padding-inline:16px}
.toast div{background:var(--fg);color:var(--bg);padding:10px 18px;border-radius:999px;font-size:.9375rem;font-weight:500;opacity:0;transform:translateY(8px);transition:all .3s var(--ease);box-shadow:var(--shadow-s);text-align:center}
.toast.on div{opacity:1;transform:none}
.toast.bad div{background:var(--bad);color:#fff}

.skel{background:linear-gradient(90deg,var(--raised) 0,var(--surface) 50%,var(--raised) 100%);background-size:200% 100%;animation:skel 1.4s infinite linear;border-radius:var(--r-m)}
@keyframes skel{to{background-position:-200% 0}}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}