/* ==========================================================================
   مرکز تعویض روغن مدرن — طراحی رابط کاربری
   ساختار: ۱) فونت  ۲) متغیرها  ۳) پس‌زمینه ثابت  ۴) پوسته  ۵) اجزا  ۶) ریسپانسیو
   ========================================================================== */

/* ---------- ۱) فونت وزیرمتن (میزبانی محلی، بدون CDN) ----------
   فقط دو فایل: Regular برای ۴۰۰ و Bold برای ۵۰۰ تا ۷۰۰ → ۵۰ کیلوبایت کمتر. */
@font-face{font-family:Vazirmatn;src:url("/assets/fonts/Vazirmatn-Regular.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:Vazirmatn;src:url("/assets/fonts/Vazirmatn-Bold.woff2") format("woff2");font-weight:500 700;font-display:swap}

/* ---------- ۲) متغیرهای طراحی ---------- */
:root{
  --fa:Vazirmatn,"Segoe UI",Tahoma,sans-serif;
  --amber:#f2a93b; --amber-d:#c97f13; --amber-l:#ffcf7a;
  --teal:#2ec4a6; --red:#ef6a5f; --blue:#5aa9f7; --violet:#a78bfa;
  --r-sm:10px; --r:16px; --r-lg:22px;
  --sh:0 10px 30px rgba(0,0,0,.28), 0 2px 6px rgba(0,0,0,.18);
  --sh-2:0 18px 50px rgba(0,0,0,.42);
  --t:.22s cubic-bezier(.2,.7,.3,1);
  --maxw:1120px;
  --dim:72%;              /* میزان تاریکی پرده پس‌زمینه (با اسلایدر تنظیم می‌شود) */
}
:root[data-theme="dark"]{
  --fg:#eef2f7; --fg-2:#c3ccd9; --muted:#93a1b3; --line:rgba(255,255,255,.10);
  --card:rgba(255,255,255,.065); --card-2:rgba(255,255,255,.10); --solid:#141a22;
  --field:rgba(9,12,17,.55); --field-line:rgba(255,255,255,.14);
  --tint:9,12,17; --scrim-max:.55;
  --bg-fallback:radial-gradient(120% 90% at 80% 0%,#2a2113 0%,#0d1116 55%,#080b0f 100%);
}
:root[data-theme="light"]{
  --fg:#131a23; --fg-2:#33404f; --muted:#5d6b7c; --line:rgba(12,20,30,.12);
  --card:rgba(255,255,255,.80); --card-2:rgba(255,255,255,.92); --solid:#fff;
  --field:rgba(255,255,255,.72); --field-line:rgba(12,20,30,.16);
  --tint:236,240,246; --scrim-max:.42;
  --sh:0 10px 28px rgba(20,30,45,.14), 0 2px 6px rgba(20,30,45,.08);
  --sh-2:0 20px 50px rgba(20,30,45,.22);
  --bg-fallback:radial-gradient(120% 90% at 80% 0%,#ffe6b8 0%,#f3f4f7 55%,#e9edf3 100%);
}

/* ---------- ۳) پس‌زمینه ثابت (content روی آن اسکرول می‌شود) ---------- */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; overflow-x:hidden; overflow-x:clip}
body{
  margin:0; min-height:100vh; min-height:100dvh;
  display:flex; flex-direction:column;
  font:16px/1.95 var(--fa); color:var(--fg);
  background:var(--bg-fallback); background-attachment:fixed;
  overflow-x:hidden;
  padding-top:env(safe-area-inset-top,0px);
}
.bg{position:fixed; inset:0; z-index:-1; overflow:hidden; background:var(--bg-fallback); transform:translateZ(0); contain:paint}
.bg__img{
  position:absolute; inset:0;
  background-image:var(--bg-img,none); background-size:cover; background-position:center;
  transform:scale(1.05) translateZ(0); filter:saturate(.92) contrast(1.04);
  transition:opacity .6s ease, background-image .4s ease;
  animation:kenburns 64s ease-in-out infinite alternate;
}
/* آی‌اواس و مرورگرهایی که پس‌زمینه ثابت را درست پشتیبانی نمی‌کنند:
   لایه ثابت باقی می‌ماند، فقط انیمیشن حذف می‌شود (سبک‌تر و بی‌لرزش). */
@supports (-webkit-touch-callout:none){
  .bg__img{animation:none; transform:scale(1.08) translateZ(0)}
  .top{backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px)}
}
@media (prefers-reduced-motion:reduce){.bg__img{animation:none}}
@media (prefers-reduced-transparency:reduce){
  :root[data-theme="dark"]{--card:rgba(16,21,28,.94);--card-2:rgba(20,26,34,.97)}
  :root[data-theme="light"]{--card:rgba(255,255,255,.96);--card-2:#fff}
  .card,.top,.foot{backdrop-filter:none; -webkit-backdrop-filter:none}
}
:root[data-theme="light"] .bg__img{filter:saturate(.78) brightness(1.12) contrast(.96)}
.bg__tint{position:absolute; inset:0; background:rgb(var(--tint)); opacity:calc(var(--dim) / 100)}
.bg__vignette{position:absolute; inset:0;
  background:
    radial-gradient(120% 80% at 50% 0%, transparent 30%, rgba(0,0,0,.35) 100%),
    linear-gradient(180deg, rgba(0,0,0,.30), transparent 22%, transparent 78%, rgba(0,0,0,.38));
  opacity:calc(var(--scrim-max) * 2)}
:root[data-theme="light"] .bg__vignette{opacity:.35}
@keyframes kenburns{from{transform:scale(1.05) translate3d(0,0,0)}to{transform:scale(1.14) translate3d(1.5%,-1.8%,0)}}
@media (prefers-reduced-motion:reduce){.bg__img{animation:none}}
/* روی مرورگرهای ضعیف: بدون بلور */
@supports not ((backdrop-filter:blur(2px)) or (-webkit-backdrop-filter:blur(2px))){
  :root[data-theme="dark"]{--card:rgba(18,23,31,.92);--card-2:rgba(22,28,38,.96)}
  :root[data-theme="light"]{--card:rgba(255,255,255,.95);--card-2:#fff}
}

.skip{position:fixed; inset-block-start:-120px; inset-inline-start:14px; z-index:99; transition:inset-block-start .15s}
.skip:focus{inset-block-start:10px; background:var(--amber); color:#12161c; padding:8px 12px; border-radius:8px}

/* اندازهٔ پیش‌فرض آیکون‌ها — بدون این، SVG تا اندازهٔ ظرف بزرگ می‌شود */
svg.ic{width:1.15em; height:1.15em; flex:none; display:inline-block; vertical-align:-.2em}
h3>.ic, h4>.ic, summary .ic{color:var(--amber); width:1.05em; height:1.05em}
.btn>.ic, .tabs .ic{width:1.05em; height:1.05em; vertical-align:-.15em}
.btn--block>.ic{vertical-align:-.2em}

/* ---------- ۴) پوسته ---------- */
.top{position:sticky; top:0; z-index:30; backdrop-filter:blur(16px) saturate(1.4); -webkit-backdrop-filter:blur(16px) saturate(1.4);
  background:linear-gradient(180deg, rgba(var(--tint),.86), rgba(var(--tint),.66)); border-bottom:1px solid var(--line)}
.top__row{max-width:var(--maxw); margin:auto; display:flex; align-items:center; gap:12px; padding:10px 16px 8px}
.brand{display:flex; align-items:center; gap:10px; background:none; border:0; padding:0; cursor:pointer; color:inherit; text-align:right}
.brand__logo{width:40px;height:40px; flex:none; display:grid; place-items:center; border-radius:13px;
  background:linear-gradient(145deg,var(--amber),var(--amber-d)); box-shadow:0 6px 18px rgba(242,169,59,.35); color:#1a1305}
.brand__logo svg{width:24px;height:24px}
.brand__txt{display:flex; flex-direction:column; line-height:1.35}
.brand__txt b{font-size:17px; font-weight:700; letter-spacing:0}
.brand__txt i{font-size:11.5px; color:var(--muted); font-style:normal}
.top__tools{display:flex; align-items:center; gap:8px; margin-inline-start:auto}
.dim{display:flex; align-items:center; gap:7px; background:var(--card); border:1px solid var(--line); border-radius:999px; padding:4px 10px}
.dim__ic{color:var(--muted); display:grid; place-items:center}
.dim__ic svg{width:16px;height:16px}
.dim input{width:78px; accent-color:var(--amber); background:none; padding:0; border:0}
@media (max-width:640px){.dim{display:none}}
.icon-btn{width:38px;height:38px; flex:none; display:grid; place-items:center; border-radius:12px; cursor:pointer;
  background:var(--card); border:1px solid var(--line); color:var(--fg); transition:var(--t)}
.icon-btn:hover{background:var(--card-2); transform:translateY(-1px)}
.icon-btn svg{width:19px;height:19px}

.tabs{max-width:var(--maxw); margin:auto; display:flex; gap:6px; padding:0 12px 10px; overflow-x:auto; scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tabs button{flex:none; display:flex; align-items:center; gap:7px; border:1px solid transparent; background:transparent; color:var(--fg-2);
  padding:8px 13px; border-radius:999px; font:inherit; font-size:14px; cursor:pointer; transition:var(--t); white-space:nowrap}
.tabs button svg{width:17px;height:17px; opacity:.85}
.tabs button:hover{background:var(--card); color:var(--fg)}
.tabs button.on{background:linear-gradient(145deg,var(--amber),var(--amber-d)); color:#181206; font-weight:700; box-shadow:0 6px 18px rgba(242,169,59,.3)}
.tabs button.on svg{opacity:1}

.view{max-width:var(--maxw); width:100%; margin:auto; padding:20px 16px 48px; display:flex; flex-direction:column; gap:16px; flex:1 0 auto}
.foot{border-top:1px solid var(--line); background:rgba(var(--tint),.55); backdrop-filter:blur(10px); margin-top:8px}
.foot__in{max-width:var(--maxw); margin:auto; padding:16px; display:flex; flex-wrap:wrap; gap:10px; align-items:center; justify-content:space-between; font-size:13px}
.foot__in span{display:block; color:var(--muted)}
.foot__links{display:flex; gap:14px; align-items:center}
.foot a{color:var(--amber)}

/* ---------- ۵) اجزا ---------- */
.card{background:var(--card); border:1px solid var(--line); border-radius:var(--r-lg); padding:18px; box-shadow:var(--sh);
  backdrop-filter:blur(12px) saturate(1.25); -webkit-backdrop-filter:blur(12px) saturate(1.25)}
.card--pad0{padding:0; overflow:hidden}
.card--solid{background:var(--card-2)}
.card__hd{display:flex; align-items:center; gap:10px; margin-bottom:10px}
.card__hd h3{margin:0; font-size:17px; font-weight:700}
.card__hd .sp{margin-inline-start:auto; display:flex; gap:8px; flex-wrap:wrap}
h3{margin:0 0 10px; font-size:17px}
h4{margin:14px 0 6px; font-size:15px; color:var(--fg-2)}
p{margin:0 0 10px}
.muted{color:var(--muted); font-size:13.5px}
.center{text-align:center}
.row{display:flex; gap:10px; flex-wrap:wrap; align-items:center}
.grid{display:grid; gap:12px; grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
.grid--2{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
hr{border:0; border-top:1px dashed var(--line); margin:14px 0}

/* دکمه‌ها */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; border:1px solid transparent; cursor:pointer;
  font:inherit; font-size:14.5px; font-weight:500; padding:10px 16px; border-radius:12px; transition:var(--t);
  background:linear-gradient(145deg,var(--amber),var(--amber-d)); color:#181206; box-shadow:0 6px 16px rgba(242,169,59,.25)}
.btn svg{width:17px;height:17px}
.btn:hover{transform:translateY(-1px); box-shadow:0 10px 22px rgba(242,169,59,.32)}
.btn:active{transform:translateY(0)}
.btn--ghost{background:var(--card); border-color:var(--line); color:var(--fg); box-shadow:none}
.btn--ghost:hover{background:var(--card-2)}
.btn--ok{background:linear-gradient(145deg,#37d0ae,#1f9d83); color:#04231c; box-shadow:0 6px 16px rgba(46,196,166,.25)}
.btn--bad{background:linear-gradient(145deg,#f4796e,#c9483d); color:#fff; box-shadow:0 6px 16px rgba(239,106,95,.25)}
.btn--blue{background:linear-gradient(145deg,#6fb8fb,#3486d6); color:#04182b; box-shadow:0 6px 16px rgba(90,169,247,.25)}
.btn--sm{padding:7px 12px; font-size:13px; border-radius:10px}
.btn--block{width:100%}
.btn[disabled]{opacity:.55; cursor:not-allowed; transform:none}

/* فرم‌ها */
label{display:block; font-size:13px; color:var(--muted); margin:10px 0 5px}
input,select,textarea{width:100%; padding:11px 12px; border:1px solid var(--field-line); border-radius:12px; background:var(--field);
  color:var(--fg); font:inherit; font-size:14.5px; transition:var(--t)}
input:focus,select:focus,textarea:focus{outline:0; border-color:var(--amber); box-shadow:0 0 0 3px rgba(242,169,59,.18)}
textarea{line-height:1.9; resize:vertical; min-height:88px}
select{appearance:none; background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);
  background-position:calc(0% + 14px) 50%,calc(0% + 19px) 50%; background-size:5px 5px,5px 5px; background-repeat:no-repeat}
[dir="ltr"]{direction:ltr}
input[dir="ltr"],textarea[dir="ltr"]{text-align:left}
.switch{display:flex; align-items:center; gap:10px; cursor:pointer; user-select:none; padding:10px 0}
.switch input{width:44px; height:24px; padding:0; appearance:none; border-radius:99px; background:var(--field);
  border:1px solid var(--field-line); position:relative; cursor:pointer; transition:var(--t); flex:none}
.switch input:checked{background:linear-gradient(145deg,var(--amber),var(--amber-d)); border-color:transparent}
.switch input::after{content:""; position:absolute; top:2px; right:2px; width:18px; height:18px; border-radius:99px; background:#fff; transition:var(--t)}
.switch input:checked::after{right:22px}
.switch b{font-weight:500; font-size:14.5px}
.switch span{color:var(--muted); font-size:12.5px}

/* پلاک */
.plate{display:inline-flex; align-items:stretch; gap:4px; direction:ltr; background:var(--solid); border:2px solid var(--field-line);
  border-radius:12px; padding:5px; box-shadow:inset 0 1px 0 rgba(255,255,255,.06)}
.plate input{width:100%; text-align:center; font-weight:700; font-size:19px; padding:8px 2px; background:transparent; border:0; border-radius:8px}
.plate input:focus{background:rgba(242,169,59,.14); box-shadow:none}
.plate .p1{max-width:58px} .plate .p2{max-width:44px} .plate .p3{max-width:74px} .plate .p4{max-width:58px}
.plate .sep{display:grid; place-items:center; color:var(--muted); font-size:11px; padding:0 2px}
.plate--lg input{font-size:24px}
.plate--bad{border-color:var(--red)}

/* نشان‌ها */
.badge{display:inline-flex; align-items:center; gap:6px; font-size:12.5px; font-weight:500; padding:4px 10px; border-radius:999px;
  background:var(--card-2); border:1px solid var(--line); color:var(--fg-2)}
.badge svg{width:14px;height:14px}
.badge--ok{background:rgba(46,196,166,.16); border-color:rgba(46,196,166,.42); color:#7ff0d8}
.badge--warn{background:rgba(242,169,59,.16); border-color:rgba(242,169,59,.45); color:var(--amber-l)}
.badge--bad{background:rgba(239,106,95,.16); border-color:rgba(239,106,95,.45); color:#ffb3ac}
.badge--info{background:rgba(90,169,247,.16); border-color:rgba(90,169,247,.42); color:#b6dbff}
:root[data-theme="light"] .badge--ok{color:#0d7d66}
:root[data-theme="light"] .badge--warn{color:#8a5a06}
:root[data-theme="light"] .badge--bad{color:#a53127}
:root[data-theme="light"] .badge--info{color:#1d5f9e}
.ok{color:var(--teal)} .bad{color:var(--red)} .warn{color:var(--amber)}

/* آمار */
.stats{display:grid; gap:12px; grid-template-columns:repeat(auto-fit,minmax(148px,1fr))}
.stat{background:var(--card); border:1px solid var(--line); border-radius:var(--r); padding:14px; display:flex; gap:12px; align-items:center}
.stat__ic{width:42px;height:42px;flex:none;display:grid;place-items:center;border-radius:13px;background:var(--card-2);color:var(--amber)}
.stat__ic svg{width:21px;height:21px}
.stat b{display:block; font-size:23px; line-height:1.3; font-weight:700}
.stat span{font-size:12.5px; color:var(--muted)}

/* جدول */
.tw{overflow-x:auto; border-radius:var(--r); border:1px solid var(--line)}
table{width:100%; border-collapse:collapse; font-size:14px; min-width:520px}
th,td{padding:10px 12px; text-align:right; border-bottom:1px solid var(--line); white-space:nowrap}
th{background:var(--card-2); font-weight:500; font-size:13px; color:var(--fg-2)}
tbody tr:last-child td{border-bottom:0}
tbody tr:hover{background:var(--card)}
td.num{font-variant-numeric:tabular-nums}

/* خط زمان */
.tl{position:relative; padding-inline-start:26px}
.tl::before{content:""; position:absolute; inset-inline-start:7px; top:6px; bottom:6px; width:2px; background:linear-gradient(var(--amber),transparent)}
.tl__i{position:relative; padding:0 0 16px}
.tl__i::before{content:""; position:absolute; inset-inline-start:-24px; top:8px; width:12px; height:12px; border-radius:99px;
  background:var(--amber); box-shadow:0 0 0 4px rgba(242,169,59,.18)}
.tl__i:last-child{padding-bottom:0}

/* سررسید */
.due{display:flex; align-items:center; gap:10px; padding:11px 13px; border:1px solid var(--line); border-radius:var(--r); background:var(--card); margin-bottom:8px}
.due__bar{width:5px; align-self:stretch; border-radius:9px; background:var(--teal)}
.due--soon .due__bar{background:var(--amber)} .due--over .due__bar{background:var(--red)}
.due b{font-weight:600}
.due .sp{margin-inline-start:auto; display:flex; gap:8px; align-items:center; flex-wrap:wrap}

/* گام‌ها (پنل پیامک) */
.steps{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:14px}
.step{display:flex; align-items:center; gap:8px; padding:8px 14px; border-radius:999px; background:var(--card); border:1px solid var(--line);
  font-size:13.5px; color:var(--muted)}
.step b{display:grid; place-items:center; width:22px;height:22px; border-radius:99px; background:var(--card-2); font-size:12px; font-weight:700}
.step.on{color:var(--fg); border-color:rgba(242,169,59,.55); background:rgba(242,169,59,.12)}
.step.on b{background:var(--amber); color:#181206}
.step.done b{background:var(--teal); color:#04231c}

/* کد و متغیر */
code,kbd{font-family:ui-monospace,Consolas,monospace; font-size:12.5px; background:var(--card-2); padding:2px 6px; border-radius:6px; border:1px solid var(--line); direction:ltr; display:inline-block}
.chips{display:flex; flex-wrap:wrap; gap:6px; margin:8px 0}
.chip{cursor:pointer; font-size:12.5px; padding:4px 9px; border-radius:999px; background:var(--card-2); border:1px solid var(--line); color:var(--fg-2); transition:var(--t)}
.chip:hover{border-color:var(--amber); color:var(--amber)}
.preview{background:var(--field); border:1px dashed var(--field-line); border-radius:var(--r); padding:12px; white-space:pre-wrap; font-size:14px; line-height:2.1; min-height:70px}

/* اعلان */
.toast{position:fixed; inset-block-end:calc(20px + env(safe-area-inset-bottom,0px)); inset-inline-start:50%; transform:translate(50%,20px);
  background:var(--solid); color:var(--fg); border:1px solid var(--line); box-shadow:var(--sh-2); padding:12px 20px; border-radius:999px;
  z-index:60; opacity:0; pointer-events:none; transition:var(--t); max-width:90vw; font-size:14px}
.toast.on{opacity:1; transform:translate(50%,0)}
.toast--bad{border-color:rgba(239,106,95,.6)}
.toast--ok{border-color:rgba(46,196,166,.6)}

/* مودال */
.modal{position:fixed; inset:0; z-index:70; display:grid; place-items:center; background:rgba(4,7,11,.62); backdrop-filter:blur(6px); padding:16px}
.modal[hidden]{display:none}
.modal__box{background:var(--solid); border:1px solid var(--line); border-radius:var(--r-lg); padding:20px; max-width:560px; width:100%;
  box-shadow:var(--sh-2); max-height:86vh; overflow:auto; animation:pop .22s ease}
@keyframes pop{from{transform:translateY(12px) scale(.98); opacity:0}to{transform:none; opacity:1}}

/* بخش قهرمان (hero) */
.hero{display:grid; gap:18px; grid-template-columns:1.15fr .85fr; align-items:center}
@media (max-width:860px){.hero{grid-template-columns:1fr}}
.hero h1{margin:0 0 8px; font-size:clamp(24px,4.4vw,40px); line-height:1.5; font-weight:700}
.hero h1 em{font-style:normal; background:linear-gradient(120deg,var(--amber),var(--amber-l)); -webkit-background-clip:text; background-clip:text; color:transparent}
.hero p{color:var(--fg-2); font-size:15.5px; margin:0 0 14px}
.hero__box{background:var(--card); border:1px solid var(--line); border-radius:var(--r-lg); padding:18px; box-shadow:var(--sh-2);
  backdrop-filter:blur(16px) saturate(1.4)}
.feat{display:flex; gap:12px; flex-wrap:wrap; margin-top:14px}
.feat span{display:flex; align-items:center; gap:7px; font-size:13px; color:var(--fg-2); background:var(--card); border:1px solid var(--line);
  padding:6px 12px; border-radius:999px}
.feat svg{width:15px;height:15px;color:var(--amber)}

/* نمودار */
.chart{display:flex; align-items:flex-end; gap:8px; height:150px; padding:8px 4px 0}
.chart__c{flex:1; display:flex; flex-direction:column; align-items:center; gap:6px; min-width:0}
.chart__b{width:100%; max-width:44px; border-radius:8px 8px 4px 4px; background:linear-gradient(180deg,var(--amber),rgba(242,169,59,.25)); transition:var(--t)}
.chart__b:hover{filter:brightness(1.15)}
.chart__l{font-size:11px; color:var(--muted); white-space:nowrap}
.bars{display:flex; flex-direction:column; gap:8px}
.bar__t{display:flex; justify-content:space-between; font-size:13px; margin-bottom:4px; color:var(--fg-2)}
.bar__w{height:8px; border-radius:99px; background:var(--card-2); overflow:hidden}
.bar__f{height:100%; border-radius:99px; background:linear-gradient(90deg,var(--amber),var(--amber-l))}

/* کارت سرویس قابل چاپ */
.recard{border:1px dashed var(--line); border-radius:var(--r); padding:14px; background:var(--field)}
.recard__hd{display:flex; justify-content:space-between; gap:10px; flex-wrap:wrap; align-items:center}
.next{display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); gap:10px; margin-top:10px}
.next div{background:var(--card); border:1px solid var(--line); border-radius:12px; padding:10px; text-align:center}
.next b{display:block; font-size:19px}
.next span{font-size:12px; color:var(--muted)}

.empty{text-align:center; color:var(--muted); padding:26px 12px}
.empty svg{width:38px;height:38px;opacity:.5;margin-bottom:8px}
.skel{height:16px; border-radius:8px; background:linear-gradient(90deg,var(--card),var(--card-2),var(--card)); background-size:200% 100%; animation:sk 1.3s linear infinite}
@keyframes sk{to{background-position:-200% 0}}
.anim{animation:up .3s ease both}
@keyframes up{from{opacity:0; transform:translateY(8px)}to{opacity:1; transform:none}}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* ---------- ۶) ریسپانسیو و چاپ ---------- */
@media (max-width:720px){
  .view{padding:14px 12px 40px}
  .card{padding:14px; border-radius:var(--r)}
  .top__row{padding:8px 12px 6px}
  .brand__txt i{display:none}
  .brand__txt b{font-size:15px}
  .btn{padding:10px 14px}
  body{font-size:15.5px}
  .feat{gap:8px}
  .feat span{flex:1 1 calc(50% - 4px); justify-content:center; font-size:12.5px; padding:6px 8px}
  .steps .step{flex:1 1 100%; justify-content:center}
  .due{flex-wrap:wrap}
  .due .sp{margin-inline-start:0; width:100%}
  .hero__box{padding:14px}
  .plate input{font-size:17px}
  .plate--lg input{font-size:20px}
}
@media print{
  .bg,.top,.foot,.toast,.no-print{display:none !important}
  body{background:#fff; color:#000}
  .card{box-shadow:none; border:1px solid #999; background:#fff; backdrop-filter:none}
  .view{padding:0}
}