/* Layout: navy identity band, a numbered step bar for the five screens (they are the real flow, in order), then one working panel per screen. */
:root{
  --bg:#F4F5F7; --surface:#FFFFFF; --surface-2:#EDF1F6; --line:#D5DCE5; --line-strong:#B6C1CF;
  --ink:#16233A; --ink-2:#4E5B6B; --muted:#5F7084;
  --navy:#14284B; --on-navy:#F4F5F7; --on-navy-2:#B9C5D8; --navy-line:rgba(244,245,247,.26);
  --primary:#1D4E9E; --on-primary:#FFFFFF; --link:#1D4E9E; --primary-soft:#E3EBF7;
  --accent:#E26A2C; --accent-ink:#A4441A; --accent-soft:#FBEADF;
  --ok:#256B43; --on-ok:#FFFFFF; --ok-soft:#E1F0E6;
  --bad:#A83232; --on-bad:#FFFFFF; --bad-soft:#F7E3E3;
  --warn:#835507; --warn-soft:#F8ECD6;
  --star:#E26A2C; --star-off:#CBD3DD;
  --proto-bg:rgba(226,106,44,.2); --proto-ink:#F8BE9B; --proto-line:rgba(226,106,44,.5);
  --shadow:0 10px 30px rgba(20,40,75,.16);
  --f-ar:"Tajawal",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-en:"Montserrat","Tajawal",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-ur:"Noto Naskh Arabic","Tajawal",system-ui,serif;
  --f-num:"Montserrat",system-ui,sans-serif;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#0C1422; --surface:#15213A; --surface-2:#1B2A46; --line:#2A3A59; --line-strong:#3D5075;
  --ink:#E9EDF3; --ink-2:#B9C3D1; --muted:#93A2B6;
  --navy:#0A1220; --on-navy:#EEF2F7; --on-navy-2:#A3B3CA; --navy-line:rgba(238,242,247,.2);
  --primary:#3D71C7; --on-primary:#FFFFFF; --link:#8FB5F2; --primary-soft:#1E3459;
  --accent:#F08A50; --accent-ink:#F6AC7C; --accent-soft:#3A2414;
  --ok:#72CF96; --on-ok:#0C1422; --ok-soft:#163626;
  --bad:#F29292; --on-bad:#0C1422; --bad-soft:#3D1D1F;
  --warn:#F0BE6A; --warn-soft:#3A2B10;
  --star:#F08A50; --star-off:#34445F;
  --shadow:0 10px 30px rgba(0,0,0,.45);
  color-scheme:dark;
}}
:root[data-theme="dark"]{
  --bg:#0C1422; --surface:#15213A; --surface-2:#1B2A46; --line:#2A3A59; --line-strong:#3D5075;
  --ink:#E9EDF3; --ink-2:#B9C3D1; --muted:#93A2B6;
  --navy:#0A1220; --on-navy:#EEF2F7; --on-navy-2:#A3B3CA; --navy-line:rgba(238,242,247,.2);
  --primary:#3D71C7; --on-primary:#FFFFFF; --link:#8FB5F2; --primary-soft:#1E3459;
  --accent:#F08A50; --accent-ink:#F6AC7C; --accent-soft:#3A2414;
  --ok:#72CF96; --on-ok:#0C1422; --ok-soft:#163626;
  --bad:#F29292; --on-bad:#0C1422; --bad-soft:#3D1D1F;
  --warn:#F0BE6A; --warn-soft:#3A2B10;
  --star:#F08A50; --star-off:#34445F;
  --shadow:0 10px 30px rgba(0,0,0,.45);
  color-scheme:dark;
}
*{box-sizing:border-box}
body{background:var(--bg);color:var(--ink);font-family:var(--f-ar);font-size:15px;line-height:1.65;-webkit-font-smoothing:antialiased}
html[lang="en"] body{font-family:var(--f-en);font-size:14.5px}
html[lang="ur"] body{font-family:var(--f-ur);line-height:1.95}
.wrap{max-width:1140px;margin-inline:auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.min0{min-width:0}
.num{font-variant-numeric:tabular-nums}
.ltr{direction:ltr;unicode-bidi:isolate;font-family:var(--f-num);font-size:.92em}
.muted{color:var(--muted)}
h1,h2,h3,p{margin:0}
h1{font-size:clamp(22px,3.2vw,28px);line-height:1.3;font-weight:700;text-wrap:balance}
h2{font-size:17px;line-height:1.4;font-weight:700;text-wrap:balance}
h3{font-size:16px;line-height:1.4;font-weight:700}
html[lang="ur"] h1{line-height:1.6} html[lang="ur"] h2,html[lang="ur"] h3{line-height:1.7}
.lead{color:var(--ink-2);max-width:64ch;margin-top:6px}
.hint{font-size:13px;color:var(--muted)}
.lbl{font-size:13.5px;font-weight:500;color:var(--ink)}
.opt{color:var(--muted);font-weight:400}

/* header */
.band{background:var(--navy);color:var(--on-navy)}
.head{display:flex;align-items:center;justify-content:space-between;gap:14px 20px;flex-wrap:wrap;padding-block:16px}
.brand{display:flex;align-items:center;gap:12px}
.brand svg{width:42px;height:42px;color:var(--on-navy);flex:none}
.brand-name{font-size:20px;font-weight:700;line-height:1.2}
.brand-sub{font-size:13px;color:var(--on-navy-2)}
.head-tools{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.proto{font-size:12px;padding:3px 11px;border-radius:999px;background:var(--proto-bg);color:var(--proto-ink);border:1px solid var(--proto-line);white-space:nowrap}
.seg{display:inline-flex;border:1px solid var(--navy-line);border-radius:999px;padding:3px;gap:2px}
.seg button{appearance:none;border:0;background:none;color:var(--on-navy-2);font-size:13px;padding:5px 13px;border-radius:999px;cursor:pointer;line-height:1.5}
.seg button[data-l="ar"]{font-family:var(--f-ar)} .seg button[data-l="en"]{font-family:var(--f-en)} .seg button[data-l="ur"]{font-family:var(--f-ur)}
.seg button[aria-pressed="true"]{background:var(--on-navy);color:var(--navy);font-weight:500}
.seg button:focus-visible,.reset:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.reset{appearance:none;background:none;border:1px solid var(--navy-line);color:var(--on-navy-2);font:inherit;font-size:12.5px;padding:5px 12px;border-radius:999px;cursor:pointer}
.reset:hover{color:var(--on-navy)}

/* steps */
.steps-band{background:var(--surface);border-bottom:1px solid var(--line)}
.steps{display:flex;gap:4px;overflow-x:auto;padding-block:10px;scrollbar-width:thin}
.step{appearance:none;border:0;background:none;font:inherit;color:inherit;cursor:pointer;display:flex;align-items:center;gap:10px;padding:7px 14px 7px 12px;border-radius:12px;white-space:nowrap;text-align:start;flex:none}
.step:hover{background:var(--surface-2)}
.step:focus-visible{outline:2px solid var(--primary);outline-offset:1px}
.step .n{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font-family:var(--f-num);font-size:12px;font-weight:600;border:1.5px solid var(--line-strong);color:var(--ink-2);flex:none}
.step .t{display:grid;line-height:1.35}
.step .l{font-weight:500;font-size:14.5px;color:var(--ink)}
.step .a{font-size:11.5px;color:var(--muted)}
.step .cnt{font-family:var(--f-num);font-size:11px;font-weight:600;min-width:20px;height:20px;padding:0 6px;border-radius:999px;background:var(--accent);color:#fff;display:grid;place-items:center}
.step[aria-selected="true"]{background:var(--primary-soft)}
.step[aria-selected="true"] .n{background:var(--primary);border-color:var(--primary);color:var(--on-primary)}
.step-sep{align-self:center;width:14px;height:1px;background:var(--line-strong);flex:none}

/* page */
main.wrap{padding-block:26px 72px}
.ph{display:flex;align-items:flex-end;justify-content:space-between;gap:12px 20px;flex-wrap:wrap;margin-bottom:20px}
.card{background:var(--surface);border:1px solid var(--line);border-radius:14px}
.sec{padding:20px;display:grid;gap:16px;min-width:0}
.stack{display:grid;gap:14px;align-content:start;min-width:0}
.sub{display:grid;gap:8px}
.alert{padding:12px 16px;border-radius:12px;background:var(--bad-soft);color:var(--bad);font-weight:500}
.note{display:flex;gap:10px;align-items:flex-start;padding:12px 16px;border-radius:12px;background:var(--primary-soft);color:var(--ink);font-size:13.5px;margin-bottom:16px}
.note svg{flex:none;width:18px;height:18px;color:var(--link);margin-top:2px}
.empty{padding:28px 20px;text-align:center;color:var(--muted);border:1px dashed var(--line-strong);border-radius:14px}

/* forms */
.form{display:grid;gap:16px;max-width:860px}
.grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr));gap:14px 16px}
.grid2.tight{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.field{display:grid;gap:6px;min-width:0;align-content:start}
.field>label{font-size:13.5px;font-weight:500}
input[type=text],input[type=tel],input[type=email],input[type=number],input[type=date],input[type=url],select,textarea{font:inherit;font-size:14.5px;color:var(--ink);background:var(--surface);border:1px solid var(--line-strong);border-radius:10px;padding:8px 12px;min-height:42px;width:100%}
input[dir="ltr"]{font-family:var(--f-num);font-size:14px}
textarea{min-height:84px;resize:vertical;line-height:1.6}
input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--primary);outline-offset:1px;border-color:var(--primary)}
[aria-invalid="true"]{border-color:var(--bad)!important}
input[type=file]{font:inherit;font-size:13px;color:var(--ink-2);max-width:100%}
input[type=file]::file-selector-button{font:inherit;font-size:13px;margin-inline-end:10px;padding:7px 14px;border-radius:9px;border:1px solid var(--line-strong);background:var(--surface-2);color:var(--ink);cursor:pointer}
.err{font-size:12.5px;color:var(--bad)}
.err:empty{display:none}
.cats{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,178px),1fr));gap:10px}
.cat{position:relative;display:block}
.cat input,.trade input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.cat span{display:grid;gap:3px;height:100%;padding:12px 14px;border:1.5px solid var(--line);border-radius:12px;background:var(--surface)}
.cat b{font-size:14.5px}
.cat small{font-size:12.5px;color:var(--muted);line-height:1.5}
.cat:hover span{border-color:var(--line-strong)}
.cat input:checked+span{border-color:var(--primary);background:var(--primary-soft)}
.cat input:focus-visible+span,.trade input:focus-visible+span,.check input:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
.cat.w span{border-style:dashed}
.cat.w input:checked+span{border-style:solid}
.trades{display:flex;flex-wrap:wrap;gap:8px}
.trade{position:relative;display:block}
.trade span{display:block;padding:6px 14px;border:1px solid var(--line-strong);border-radius:999px;font-size:13.5px;background:var(--surface)}
.trade:hover span{border-color:var(--ink-2)}
.trade input:checked+span{background:var(--primary);border-color:var(--primary);color:var(--on-primary)}
.files{display:flex;flex-wrap:wrap;gap:6px}
.fchip{direction:ltr;unicode-bidi:isolate;font-family:var(--f-num);font-size:12px;background:var(--surface-2);border:1px solid var(--line);padding:3px 9px;border-radius:7px;color:var(--ink-2);max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.prows{display:grid;gap:12px}
.prow{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1.3fr) minmax(0,1fr) auto;gap:10px;align-items:end;padding-bottom:12px;border-bottom:1px dashed var(--line)}
.prow:last-child{border-bottom:0;padding-bottom:0}
.prow-del{min-width:64px}
@media (max-width:640px){.prow{grid-template-columns:1fr 1fr}.prow .svc{grid-column:1/-1}.prow-del{grid-column:1/-1}}
.check{display:flex;gap:10px;align-items:flex-start;cursor:pointer;font-size:14px;line-height:1.7}
.check input{width:20px;height:20px;margin-top:3px;flex:none;accent-color:var(--primary)}

/* buttons */
.btn{font:inherit;font-size:14px;font-weight:500;display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:40px;padding:7px 16px;border-radius:10px;border:1px solid var(--line-strong);background:var(--surface);color:var(--ink);cursor:pointer;text-decoration:none;white-space:nowrap;line-height:1.4}
.btn:hover{border-color:var(--ink-2)}
.btn:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
.btn-primary{background:var(--primary);border-color:var(--primary);color:var(--on-primary)}
.btn-primary:hover{border-color:var(--primary);filter:brightness(1.08)}
.btn-ok{background:var(--ok);border-color:var(--ok);color:var(--on-ok)}
.btn-ok:hover{border-color:var(--ok);filter:brightness(1.08)}
.btn-bad{color:var(--bad);border-color:var(--bad)}
.btn-bad-solid{background:var(--bad);border-color:var(--bad);color:var(--on-bad)}
.btn-sm{min-height:32px;padding:4px 12px;font-size:13px;border-radius:9px}
.btn-lg{min-height:46px;padding:10px 26px;font-size:15px}
.btn-quiet{border-color:transparent;color:var(--muted)}
.btn-quiet:hover{border-color:var(--line-strong);color:var(--ink)}
.acts{display:flex;flex-wrap:wrap;gap:8px;align-items:center}

/* chips, stars */
.chip{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:500;padding:2px 10px;border-radius:999px;background:var(--surface-2);color:var(--ink-2);white-space:nowrap;line-height:1.7}
.chip.blue{background:var(--primary-soft);color:var(--link)}
.chip.ok{background:var(--ok-soft);color:var(--ok)}
.chip.bad{background:var(--bad-soft);color:var(--bad)}
.chip.warn{background:var(--warn-soft);color:var(--warn)}
.chip.accent{background:var(--accent-soft);color:var(--accent-ink)}
.stars{position:relative;display:inline-block;white-space:nowrap;line-height:1;font-size:15px;letter-spacing:1px;font-family:"Segoe UI Symbol",Arial,sans-serif;vertical-align:-1px}
.stars .off{color:var(--star-off)}
.stars .on{position:absolute;top:0;bottom:0;inset-inline-start:0;overflow:hidden;color:var(--star);width:var(--p)}
.rate-inline{display:flex;align-items:center;flex-wrap:wrap;gap:6px 8px}
.rate-inline b{font-family:var(--f-num);font-size:13.5px}
.meta{display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center;color:var(--muted);font-size:13px;margin-top:5px}
.date{font-size:12.5px;color:var(--muted);white-space:nowrap}

/* filters */
.filters{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px;align-items:center}
.fbtn{font:inherit;font-size:13.5px;padding:5px 14px;border-radius:999px;border:1px solid var(--line-strong);background:var(--surface);color:var(--ink-2);cursor:pointer;display:inline-flex;gap:7px;align-items:center;line-height:1.6}
.fbtn:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
.fbtn .c{font-family:var(--f-num);font-size:11.5px;opacity:.85}
.fbtn[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--bg)}
.sortbox{margin-inline-start:auto;display:flex;align-items:center;gap:8px;font-size:13px;color:var(--muted)}
.sortbox select{min-height:34px;padding:4px 10px;font-size:13.5px;width:auto}
.seg2{display:inline-flex;background:var(--surface-2);border-radius:12px;padding:4px;gap:4px}
.seg2 button{appearance:none;border:0;background:none;font:inherit;font-size:14px;padding:6px 16px;border-radius:9px;color:var(--ink-2);cursor:pointer}
.seg2 button[aria-pressed="true"]{background:var(--surface);color:var(--ink);font-weight:500;box-shadow:0 1px 3px rgba(20,40,75,.12)}
.seg2 button:focus-visible{outline:2px solid var(--primary)}

/* review */
.apps{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,350px),1fr));gap:16px}
.app{padding:18px;display:grid;gap:14px;align-content:start}
.top-row{display:flex;justify-content:space-between;gap:10px 14px;align-items:flex-start;flex-wrap:wrap}
.kv{display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 14px;font-size:13.5px;margin:0}
.kv dt{color:var(--muted)} .kv dd{margin:0;min-width:0;overflow-wrap:anywhere}
.plist{display:grid;gap:6px}
.pitem{display:flex;justify-content:space-between;align-items:center;gap:12px;font-size:13.5px;padding:7px 12px;background:var(--surface-2);border-radius:9px}
.pval{font-weight:700;white-space:nowrap;font-family:var(--f-num);font-size:13px}
.pval small{font-weight:400;color:var(--muted);font-family:inherit}
.rejbox{display:grid;gap:10px;padding:14px;border-radius:12px;background:var(--bad-soft)}
.rejbox label{font-size:13.5px;font-weight:500}
.decision{display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-size:13.5px;color:var(--ink-2);padding-top:12px;border-top:1px solid var(--line)}

/* team */
.members{display:grid;gap:10px}
.member{padding:14px 18px}
.member.frozen{background:var(--surface-2)}
.m-row{display:grid;grid-template-columns:minmax(0,2.1fr) minmax(0,1.7fr) minmax(0,.8fr) minmax(0,1.2fr) auto;gap:12px 16px;align-items:center}
.m-jobs{font-size:13px;color:var(--muted)}
.m-jobs b{font-family:var(--f-num);color:var(--ink);font-size:15px}
.m-status{display:flex;flex-wrap:wrap;gap:6px}
@media (max-width:860px){.m-row{grid-template-columns:1fr auto}.m-id{grid-column:1/-1}.m-act{grid-column:2;grid-row:2}.m-rate{grid-column:1}.m-jobs,.m-status{grid-column:1/-1}}
.frozen-note{margin-top:10px;font-size:13px;color:var(--bad)}
.m-detail{border-top:1px solid var(--line);margin-top:14px;padding-top:16px;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:20px}
.hist{display:grid;gap:10px}
.hitem{display:grid;gap:6px;padding:12px 14px;border-radius:11px;background:var(--surface-2)}
.member.frozen .hitem,.member.frozen .pitem{background:var(--surface)}
.cms{display:flex;flex-wrap:wrap;gap:4px 14px;font-size:12px;color:var(--muted)}
.cms b{font-family:var(--f-num);color:var(--ink)}
.hitem p{font-size:13.5px;color:var(--ink-2)}

/* jobs */
.jobs-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.75fr);gap:20px;align-items:start}
.pv-layout{display:grid;grid-template-columns:minmax(0,1.75fr) minmax(0,1fr);gap:20px;align-items:start}
@media (max-width:920px){.jobs-layout,.pv-layout{grid-template-columns:1fr}}
.job{padding:18px;display:grid;gap:12px;min-width:0}
.facts{display:flex;flex-wrap:wrap;gap:6px 18px;font-size:13px;color:var(--muted)}
.facts b{color:var(--ink);font-weight:500}
.jnote{font-size:13.5px;color:var(--ink-2);padding:10px 12px;background:var(--surface-2);border-radius:10px}
.tbl{overflow-x:auto;border:1px solid var(--line);border-radius:11px}
table.bids{width:100%;border-collapse:collapse;font-size:13.5px;min-width:560px}
.bids th{font-weight:500;color:var(--muted);text-align:start;padding:9px 12px;border-bottom:1px solid var(--line);font-size:12.5px;background:var(--surface-2);white-space:nowrap}
.bids td{padding:10px 12px;border-bottom:1px solid var(--line);vertical-align:middle}
.bids tr:last-child td{border-bottom:0}
.bids td.p{font-family:var(--f-num);font-weight:600;white-space:nowrap}
.bids td.num{white-space:nowrap}
.bids .bn{font-weight:500}
.bids .bnote{display:block;font-size:12px;color:var(--muted);margin-top:2px}
.winner{display:grid;gap:10px;padding:14px;border-radius:12px;background:var(--surface-2)}
.deliv{display:flex;flex-wrap:wrap;gap:10px;align-items:end}
.deliv .field{width:auto;min-width:170px}
.lockline{display:flex;gap:8px;align-items:flex-start;font-size:12.5px;color:var(--muted)}
.lockline svg{width:15px;height:15px;flex:none;margin-top:3px}
.profile{padding:16px 18px;display:flex;flex-wrap:wrap;gap:12px 20px;align-items:center;justify-content:space-between;margin-bottom:16px}
.pick{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.pick select{width:auto;min-width:220px}
.bidform{display:grid;gap:10px;padding:14px;border-radius:12px;border:1px dashed var(--line-strong)}
.bidform .grid2{grid-template-columns:repeat(auto-fit,minmax(min(100%,150px),1fr))}
.h-sec{font-size:15px;color:var(--ink-2);font-weight:500;margin-block:4px 2px}

/* rating */
.rate-layout{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(0,1fr);gap:20px;align-items:start}
@media (max-width:920px){.rate-layout{grid-template-columns:1fr}}
.crits{display:grid}
.crit{display:flex;justify-content:space-between;align-items:center;gap:8px 14px;flex-wrap:wrap;padding:10px 0;border-bottom:1px dashed var(--line)}
.crit:last-child{border-bottom:0}
.star-in{display:inline-flex;gap:2px}
.st{appearance:none;border:0;background:none;cursor:pointer;font-size:27px;line-height:1;color:var(--star-off);padding:2px 3px;font-family:"Segoe UI Symbol",Arial,sans-serif;border-radius:6px}
.st.on{color:var(--star)}
.st:hover{transform:scale(1.08)}
.st:focus-visible{outline:2px solid var(--primary)}
.scale{display:grid;gap:8px}
.scale div{display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:13.5px}
.rules{display:grid;gap:8px;padding:0;margin:0;list-style:none}
.rules li{font-size:13.5px;color:var(--ink-2);padding-inline-start:16px;position:relative}
.rules li::before{content:"";position:absolute;inset-inline-start:0;top:.75em;width:7px;height:7px;border-radius:2px;background:var(--accent)}
.recent{display:grid;gap:12px}
.ritem{display:grid;gap:4px;padding-bottom:12px;border-bottom:1px solid var(--line)}
.ritem:last-child{border-bottom:0;padding-bottom:0}
.ritem p{font-size:13px;color:var(--ink-2);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* done state */
.done{padding:36px 28px;display:grid;gap:14px;justify-items:start;max-width:640px}
.done-mark{width:52px;height:52px;border-radius:50%;background:var(--ok-soft);color:var(--ok);display:grid;place-items:center}
.done-mark svg{width:26px;height:26px}

/* toasts */
#toasts{position:fixed;bottom:calc(16px + env(safe-area-inset-bottom,0px));inset-inline-end:calc(16px + max(env(safe-area-inset-left,0px),env(safe-area-inset-right,0px)));display:grid;gap:8px;z-index:30;width:max-content;max-width:min(calc(100vw - 32px),400px)}
.toast{background:var(--ink);color:var(--bg);padding:12px 16px;border-radius:12px;font-size:14px;box-shadow:var(--shadow)}
@media (prefers-reduced-motion:no-preference){.toast{animation:tin .25s ease-out}.st{transition:transform .12s}}
@keyframes tin{from{transform:translateY(8px);opacity:0}}