/* AstonBundle design tokens + UI kit (shared by every artboard) */
:root{
  --purple:#5F0066; --purple-700:#7A1F85; --purple-50:#F6EAF8; --navy:#2B1236; --navy-900:#1E0A27; --navy-700:#4A1A57; --navy-50:#F3E8F5;
  --coral:#FF6B4A; --coral-ink:#C8432A; --coral-50:#FFE9E3; --coral-on-navy:#FF8A6E;
  --teal:#2A8C80; --teal-ink:#1F6E65; --teal-50:#E3F3F0;
  --amber:#E8A317; --amber-ink:#8A5A00; --amber-50:#FCF1D6; --star:#B7791F;
  --red:#C62828; --red-50:#FDECEC;
  --cream:#FBF7F0; --cream-2:#F5EFE4; --white:#FFFFFF;
  --g100:#F0ECE4; --g200:#E2DCD0; --g300:#C9C2B4; --g400:#8A8478; --g600:#5B6270;
  --disp:"Bricolage Grotesque", "Avenir Next", "Segoe UI", system-ui, sans-serif;
  --body:"Atkinson Hyperlegible", Verdana, "Segoe UI", system-ui, sans-serif;
  --r-card:16px; --r-btn:12px; --r-inp:10px;
  --sh-1:0 1px 2px rgba(43,18,54,.06),0 2px 8px rgba(43,18,54,.06);
  --sh-2:0 4px 16px rgba(43,18,54,.10);
  --sh-3:0 16px 40px rgba(43,18,54,.16);
}
*{box-sizing:border-box}
.board{background:#E6E0D4;padding:48px;display:flex;gap:64px;align-items:flex-start;font-family:var(--body);color:var(--navy)}
.bd-col{display:flex;flex-direction:column;gap:16px}
.bd-label{font:700 15px/1.3 var(--body);color:var(--g600);display:flex;gap:10px;align-items:center}
.bd-label b{color:var(--navy)}
.frame{background:var(--cream);color:var(--navy);font:400 17px/1.5 var(--body);box-shadow:var(--sh-3);overflow:hidden;border-radius:10px;position:relative}
.frame.d{width:1440px}
.frame.m{width:390px;border-radius:28px;font-size:16px}
.frame h1,.frame h2,.frame h3,.frame h4,.frame h5{font-family:var(--disp);margin:0;line-height:1.15;letter-spacing:-0.02em;text-wrap:balance;color:inherit}
.frame h1{font-size:48px;font-weight:800}.frame h2{font-size:36px;font-weight:800}.frame h3{font-size:24px;font-weight:700}.frame h4{font-size:20px;font-weight:700}.frame h5{font-size:17px;font-weight:700;letter-spacing:-0.01em}
.m h1{font-size:34px}.m h2{font-size:28px}.m h3{font-size:21px}.m h4{font-size:18px}
.frame p{margin:0;max-width:70ch;text-wrap:pretty}
.small{font-size:14px}.cap{font-size:13px}.muted{color:var(--g600)}
.num{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}
.eyebrow{font:700 14px/1.2 var(--body);color:var(--coral-ink);letter-spacing:.04em;text-transform:uppercase}
.wrap{max-width:1280px;margin:0 auto;padding:0 40px;width:100%}
.m .wrap{padding:0 16px}
.stack{display:flex;flex-direction:column}
.row{display:flex;align-items:center}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
a{color:var(--coral-ink);text-underline-offset:3px}
a:hover{color:#9E3320}
.lnk{color:var(--coral-ink);font-weight:700;text-decoration:underline;text-underline-offset:3px}
hr.div{border:0;border-top:1px solid var(--g200);margin:0;width:100%}

/* focus: 3px coral ring, 2px offset, navy halo keeps 3:1 on cream & white */
:focus-visible,.is-focus{outline:3px solid var(--coral)!important;outline-offset:2px;box-shadow:0 0 0 6px var(--navy)}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* skip link */
.skip{position:absolute;left:16px;top:8px;z-index:5;background:var(--navy);color:var(--cream);padding:10px 16px;border-radius:10px;font-weight:700;text-decoration:none}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 20px;border-radius:var(--r-btn);font:700 16px/1 var(--body);border:2px solid transparent;cursor:pointer;text-decoration:none;white-space:nowrap;transition:background .15s,color .15s,border-color .15s}
.btn-p{background:var(--purple);color:#fff}.btn-p:hover,.btn-p.is-hover{background:var(--purple-700);color:#fff}
.btn-c{background:var(--coral);color:var(--navy)}.btn-c:hover,.btn-c.is-hover{background:#FF8466;color:var(--navy)}
.btn-s{background:var(--white);color:var(--purple);border-color:var(--purple)}.btn-s:hover,.btn-s.is-hover{background:var(--navy-50);color:var(--navy)}
.btn-g{background:transparent;color:var(--navy)}.btn-g:hover,.btn-g.is-hover{background:var(--g100);color:var(--navy)}
.btn-d{background:var(--red);color:#fff}.btn-d:hover,.btn-d.is-hover{background:#A32020;color:#fff}
.btn-ds{background:var(--white);color:var(--red);border-color:var(--red)}
.btn[disabled],.btn.is-dis{background:var(--g200);color:var(--g600);border-color:transparent;cursor:not-allowed}
.btn-sm{min-height:44px;padding:0 14px;font-size:15px}
.btn-lg{min-height:56px;padding:0 28px;font-size:17px}
.btn-blk{width:100%}
.ibtn{width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;border-radius:12px;border:0;background:transparent;color:var(--navy);cursor:pointer;position:relative;text-decoration:none}
.ibtn:hover{background:var(--g100)}
.ibtn.bd{border:1.5px solid var(--g300);background:var(--white)}
.count{position:absolute;top:2px;right:0;min-width:20px;height:20px;padding:0 5px;border-radius:10px;background:var(--coral);color:var(--navy);font:700 12px/20px var(--body);text-align:center}
.spin{animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}

/* forms */
.field{display:flex;flex-direction:column;gap:6px;min-width:0}
.lbl{font:700 15px/1.3 var(--body);color:var(--navy)}
.lbl .opt{font-weight:400;color:var(--g600)}
.hint{font-size:14px;color:var(--g600);line-height:1.4}
.inp{min-height:48px;width:100%;border:1.5px solid var(--g400);border-radius:var(--r-inp);padding:0 14px;font:400 16px/1.4 var(--body);background:var(--white);color:var(--navy)}
.inp::placeholder{color:#6E7480}
textarea.inp{padding:12px 14px;min-height:132px;resize:vertical}
.inp.err{border:2px solid var(--red);background:#FFFBFB}
.inp.ok{border:2px solid var(--teal-ink)}
.inp[disabled]{background:var(--g100);color:var(--g600)}
.msg{display:flex;gap:6px;align-items:flex-start;font:700 14px/1.4 var(--body)}
.msg.err{color:var(--red)}.msg.ok{color:var(--teal-ink)}
.msg .i{width:18px;height:18px;margin-top:1px}
.selw{position:relative}
.selw select{appearance:none;-webkit-appearance:none;padding-right:44px}
.selw .i{position:absolute;right:14px;top:14px;pointer-events:none}
.inpw{position:relative}.inpw .inp{padding-left:44px}.inpw>.i{position:absolute;left:14px;top:14px;color:var(--g600)}
.chk{display:flex;gap:12px;align-items:flex-start;min-height:44px;padding-top:10px;font-size:16px;line-height:1.4;cursor:pointer}
.chk input{width:22px;height:22px;accent-color:var(--navy);margin:0;flex:none}
.tgl{width:56px;height:32px;border-radius:16px;border:0;background:var(--g400);position:relative;cursor:pointer;flex:none}
.tgl::after{content:"";position:absolute;left:4px;top:4px;width:24px;height:24px;border-radius:50%;background:#fff;transition:left .15s}
.tgl.on{background:var(--teal-ink)}.tgl.on::after{left:28px}
.tglrow{display:flex;justify-content:space-between;align-items:center;gap:16px;min-height:48px}
.otp{display:flex;gap:10px}
.otp input{width:56px;height:64px;text-align:center;font:800 28px var(--disp);border:1.5px solid var(--g400);border-radius:var(--r-inp);background:#fff;color:var(--navy)}
.m .otp{gap:8px}.m .otp input{width:46px;height:58px;font-size:24px}
.otp input.fill{border-color:var(--navy);border-width:2px}
.stepper{display:inline-flex;align-items:center;border:1.5px solid var(--g400);border-radius:12px;background:#fff;height:48px}
.stepper button{width:44px;height:44px;border:0;background:transparent;color:var(--navy);display:grid;place-items:center;cursor:pointer;border-radius:10px}
.stepper input{width:44px;border:0;text-align:center;font:700 17px var(--body);color:var(--navy);background:transparent}
.rng{position:relative;height:44px}
.rng .tr{position:absolute;left:0;right:0;top:20px;height:6px;border-radius:3px;background:var(--g200)}
.rng .fl{position:absolute;top:20px;height:6px;border-radius:3px;background:var(--navy)}
.rng .th{position:absolute;top:11px;width:24px;height:24px;border-radius:50%;background:#fff;border:3px solid var(--navy);box-shadow:var(--sh-1)}
.pw{display:flex;gap:6px}.pw span{flex:1;height:6px;border-radius:3px;background:var(--g200)}
.pw span.on{background:var(--teal-ink)}.pw span.mid{background:var(--amber)}

/* icons (outline, Lucide-style; masks so they take currentColor) */
.i{display:inline-block;width:20px;height:20px;flex:none;background-color:currentColor;-webkit-mask:var(--ic) center/contain no-repeat;mask:var(--ic) center/contain no-repeat;vertical-align:middle}
.i.s16{width:16px;height:16px}.i.s24{width:24px;height:24px}.i.s28{width:28px;height:28px}.i.s32{width:32px;height:32px}.i.s40{width:40px;height:40px}.i.s48{width:48px;height:48px}.i.s64{width:64px;height:64px}.i.s88{width:88px;height:88px}
.i-search{--ic:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='8'/><path d='m21 21-4.3-4.3'/></svg>")}
.i-user{--ic:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='8' r='5'/><path d='M20 21a8 8 0 0 0-16 0'/></svg>")}
.i-bag{--ic:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 2 3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4Z'/><path d='M3 6h18'/><path d='M16 10a4 4 0 0 1-8 0'/></svg>")}
.i-menu{--ic:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M4 6h16M4 12h16M4 18h16'/></svg>")}
.i-x{--ic:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M18 6 6 18M6 6l12 12'/></svg>")}
.i-cr{--ic:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m9 18 6-6-6-6'/></svg>")}
.i-cl{--ic:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m15 18-6-6 6-6'/></svg>")}
.i-cd{--ic:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>")}
.i-check{--ic:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='M20 6 9 17l-5-5'/></svg>")}
.i-okc{--ic:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><path d='m9 12 2 2 4-4'/></svg>")}
.i-warn{--ic:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3Z'/><path d='M12 9v4M12 17h.01'/></svg>")}
.i-alert{--ic:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><path d='M12 8v4M12 16h.01'/></svg>")}
.i-info{--ic:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><path d='M12 16v-4M12 8h.01'/></svg>")}
.i-xc{--ic:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><path d='m15 9-6 6M9 9l6 6'/></svg>")}
.i-plus{--ic:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12h14M12 5v14'/></svg>")}
.i-minus{--ic:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12h14'/></svg>")}
.i-star{--ic:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'><path d='M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z'/></svg>")}
.i-starf{--ic:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black' stroke='black' stroke-width='2' stroke-linejoin='round'><path d='M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z'/></svg>")}
.i-truck{--ic:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M14 18V6a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2v11a1 1 0 0 0 1 1h2M15 18H9M19 18h2a1 1 0 0 0 1-1v-3.65a1 1 0 0 0-.22-.62L18.3 9.38A1 1 0 0 0 17.52 9H14'/><circle cx='17' cy='18' r='2'/><circle cx='7' cy='18' r='2'/></svg>")}
.i-return{--ic:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8'/><path d='M3 3v5h5'/></svg>")}
.i-shield{--ic:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z'/><path d='m9 12 2 2 4-4'/></svg>")}
.i-grad{--ic:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M22 10 12 5 2 10l10 5 10-5Z'/><path d='M6 12v5c3 3 9 3 12 0v-5M22 10v6'/></svg>")}
.i-cal{--ic:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='4' width='18' height='18' rx='2'/><path d='M16 2v4M8 2v4M3 10h18'/></svg>")}
.i-mail{--ic:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='2' y='4' width='20' height='16' rx='2'/><path d='m22 7-10 6L2 7'/></svg>")}
.i-lock{--ic:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='11' width='18' height='11' rx='2'/><path d='M7 11V7a5 5 0 0 1 10 0v4'/></svg>")}
.i-eye{--ic:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7S2 12 2 12Z'/><circle cx='12' cy='12' r='3'/></svg>")}
.i-eyeoff{--ic:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m3 3 18 18M10.6 10.6a2 2 0 0 0 2.8 2.8M9.4 5.2A10.4 10.4 0 0 1 12 5c6.5 0 10 7 10 7a17.6 17.6 0 0 1-3.1 4.1M6.6 6.6C3.9 8.4 2 12 2 12s3.5 7 10 7a10 10 0 0 0 5.4-1.6'/></svg>")}
.i-trash{--ic:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M3 6h18M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2M10 11v6M14 11v6'/></svg>")}
.i-edit{--ic:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M17 3a2.85 2.85 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5Z'/></svg>")}
.i-sliders{--ic:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M4 21v-7M4 10V3M12 21v-9M12 8V3M20 21v-5M20 12V3M1 14h6M9 8h6M17 16h6'/></svg>")}
.i-ar{--ic:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12h14M12 5l7 7-7 7'/></svg>")}
.i-al{--ic:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M19 12H5M12 19l-7-7 7-7'/></svg>")}
.i-pkg{--ic:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M16.5 9.4 7.5 4.2M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z'/><path d='M3.3 7 12 12l8.7-5M12 22V12'/></svg>")}
.i-pin{--ic:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z'/><circle cx='12' cy='10' r='3'/></svg>")}
.i-logout{--ic:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4M16 17l5-5-5-5M21 12H9'/></svg>")}
.i-dash{--ic:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='3' width='7' height='9' rx='1'/><rect x='14' y='3' width='7' height='5' rx='1'/><rect x='14' y='12' width='7' height='9' rx='1'/><rect x='3' y='16' width='7' height='5' rx='1'/></svg>")}
.i-box{--ic:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='2' y='3' width='20' height='5' rx='1'/><path d='M4 8v11a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8M10 12h4'/></svg>")}
.i-users{--ic:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'/><circle cx='9' cy='7' r='4'/><path d='M22 21v-2a4 4 0 0 0-3-3.87M16 3.13a4 4 0 0 1 0 7.75'/></svg>")}
.i-inbox{--ic:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M22 12h-6l-2 3h-4l-2-3H2'/><path d='M5.45 5.11 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z'/></svg>")}
.i-clip{--ic:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='8' y='2' width='8' height='4' rx='1'/><path d='M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2M12 11h4M12 16h4M8 11h.01M8 16h.01'/></svg>")}
.i-spark{--ic:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M11 3l1.9 5.8L19 11l-6.1 2.2L11 19l-1.9-5.8L3 11l6.1-2.2Z'/><path d='M19 2v4M17 4h4'/></svg>")}
.i-upload{--ic:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4M17 8l-5-5-5 5M12 3v12'/></svg>")}
.i-loader{--ic:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='M21 12a9 9 0 1 1-6.22-8.56'/></svg>")}
.i-globe{--ic:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><path d='M2 12h20M12 2a15.3 15.3 0 0 1 0 20 15.3 15.3 0 0 1 0-20'/></svg>")}
.i-cookie{--ic:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M12 2a10 10 0 1 0 10 10 4 4 0 0 1-5-5 4 4 0 0 1-5-5'/><path d='M8.5 8.5h.01M16 15.5h.01M12 12h.01M11 17h.01M7 14h.01'/></svg>")}
.i-clock{--ic:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><path d='M12 6v6l4 2'/></svg>")}
.i-msg{--ic:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z'/></svg>")}
.i-gear{--ic:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='3'/><path d='M12 1v3M12 20v3M4.2 4.2l2.1 2.1M17.7 17.7l2.1 2.1M1 12h3M20 12h3M4.2 19.8l2.1-2.1M17.7 6.3l2.1-2.1'/></svg>")}
.i-ext{--ic:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M15 3h6v6M10 14 21 3M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'/></svg>")}
.i-sun{--ic:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='4'/><path d='M12 2v2M12 20v2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M2 12h2M20 12h2M6.3 17.7l-1.4 1.4M19.1 4.9l-1.4 1.4'/></svg>")}
.i-moon{--ic:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z'/></svg>")}
.i-gift{--ic:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='8' width='18' height='4' rx='1'/><path d='M12 8v13M19 12v7a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2v-7M7.5 8a2.5 2.5 0 0 1 0-5C10 3 12 8 12 8s2-5 4.5-5a2.5 2.5 0 0 1 0 5'/></svg>")}
.i-tag{--ic:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M12.6 2.6A2 2 0 0 0 11.2 2H4a2 2 0 0 0-2 2v7.2a2 2 0 0 0 .6 1.4l8.7 8.7a2.4 2.4 0 0 0 3.4 0l6.6-6.6a2.4 2.4 0 0 0 0-3.4z'/><circle cx='7.5' cy='7.5' r='1'/></svg>")}
.i-send{--ic:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m22 2-7 20-4-9-9-4Z'/><path d='M22 2 11 13'/></svg>")}
.i-dots{--ic:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'><circle cx='12' cy='12' r='2'/><circle cx='19' cy='12' r='2'/><circle cx='5' cy='12' r='2'/></svg>")}
.i-img{--ic:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='3' width='18' height='18' rx='2'/><circle cx='9' cy='9' r='2'/><path d='m21 15-3-3-9 9'/></svg>")}
.i-trend{--ic:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m22 7-8.5 8.5-5-5L2 17'/><path d='M16 7h6v6'/></svg>")}
.i-home{--ic:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M3 10 12 3l9 7v10a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2Z'/><path d='M9 22V12h6v10'/></svg>")}
.i-heart{--ic:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z'/></svg>")}
.i-map{--ic:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m3 6 6-3 6 3 6-3v15l-6 3-6-3-6 3Z'/><path d='M9 3v15M15 6v15'/></svg>")}
.i-card{--ic:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='2' y='5' width='20' height='14' rx='2'/><path d='M2 10h20'/></svg>")}
.i-flask{--ic:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M10 2v7.5L4.5 19a2 2 0 0 0 1.7 3h11.6a2 2 0 0 0 1.7-3L14 9.5V2M8.5 2h7M7 16h10'/></svg>")}
/* product icons */
.i-bed{--ic:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M2 4v16M2 8h18a2 2 0 0 1 2 2v10M2 17h20M6 8v9'/></svg>")}
.i-pillow{--ic:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M4 7c3-2 13-2 16 0 1.5 3 1.5 7 0 10-3 2-13 2-16 0-1.5-3-1.5-7 0-10Z'/><path d='M8 10c2 1 6 1 8 0'/></svg>")}
.i-towel{--ic:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M4 4h16v4H4zM6 8v12h12V8M6 15h12M9 18h6'/></svg>")}
.i-hanger{--ic:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M10 5a2 2 0 1 1 2 2v1l9 7a1 1 0 0 1-.6 1.8H3.6A1 1 0 0 1 3 15l9-7'/></svg>")}
.i-lamp{--ic:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M8 2h8l4 10H4L8 2Z'/><path d='M12 12v6M8 22v-2a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2Z'/></svg>")}
.i-cutlery{--ic:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M3 2v7c0 1.1.9 2 2 2h4a2 2 0 0 0 2-2V2M7 2v20M21 15V2a5 5 0 0 0-5 5v6c0 1.1.9 2 2 2h3Zm0 0v7'/></svg>")}
.i-pot{--ic:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M2 12h20M20 12v8a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2v-8M4 8l16-4M8.86 6.78l-.45-1.81a2 2 0 0 1 1.45-2.43l1.94-.48a2 2 0 0 1 2.43 1.46l.45 1.8'/></svg>")}
.i-plate{--ic:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6'><circle cx='12' cy='12' r='9'/><circle cx='12' cy='12' r='5'/></svg>")}
.i-kettle{--ic:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M5 9h12l1 10a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2Z'/><path d='M17 11h2a2 2 0 0 1 2 2v1a3 3 0 0 1-3 3M5 9 3 6M8 9V5a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v4'/></svg>")}
.i-tub{--ic:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='9' width='18' height='12' rx='2'/><path d='M2 9h20l-1.5-4h-17Z'/></svg>")}
.i-plug{--ic:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M12 22v-5M9 8V2M15 8V2M18 8v5a4 4 0 0 1-4 4h-4a4 4 0 0 1-4-4V8Z'/></svg>")}
.i-zap{--ic:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M13 2 3 14h9l-1 8 10-12h-9l1-8z'/></svg>")}
.i-phone{--ic:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><rect x='5' y='2' width='14' height='20' rx='2'/><path d='M12 18h.01'/></svg>")}
.i-laptop{--ic:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M20 16V7a2 2 0 0 0-2-2H6a2 2 0 0 0-2 2v9m16 0H4m16 0 1.28 2.55a1 1 0 0 1-.9 1.45H3.62a1 1 0 0 1-.9-1.45L4 16'/></svg>")}
.i-headph{--ic:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M3 14h3a2 2 0 0 1 2 2v3a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-7a9 9 0 0 1 18 0v7a2 2 0 0 1-2 2h-1a2 2 0 0 1-2-2v-3a2 2 0 0 1 2-2h3'/></svg>")}
.i-calc{--ic:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><rect x='4' y='2' width='16' height='20' rx='2'/><path d='M8 6h8M16 14v4M16 10h.01M12 10h.01M8 10h.01M12 14h.01M8 14h.01M12 18h.01M8 18h.01'/></svg>")}
.i-book{--ic:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2zM22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z'/></svg>")}
.i-backpack{--ic:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M4 10a4 4 0 0 1 4-4h8a4 4 0 0 1 4 4v10a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2Z'/><path d='M9 6V4a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2v2M8 21v-5a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v5M8 10h8'/></svg>")}
.i-usb{--ic:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><rect x='7' y='9' width='10' height='13' rx='2'/><path d='M9 9V3h6v6M11 5.5h.01M13 5.5h.01'/></svg>")}
.i-umbrella{--ic:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M22 12a10 10 0 0 0-20 0Z'/><path d='M12 12v8a2 2 0 0 0 4 0M12 2v0'/></svg>")}
.i-shirt{--ic:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M20.38 3.46 16 2a4 4 0 0 1-8 0L3.62 3.46a2 2 0 0 0-1.34 2.23l.58 3.47a1 1 0 0 0 .99.84H6v10c0 1.1.9 2 2 2h8a2 2 0 0 0 2-2V10h2.15a1 1 0 0 0 .99-.84l.58-3.47a2 2 0 0 0-1.34-2.23z'/></svg>")}
.i-snow{--ic:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M2 12h20M12 2v20M20 16l-4-4 4-4M4 8l4 4-4 4M16 4l-4 4-4-4M8 20l4-4 4 4'/></svg>")}
.i-rain{--ic:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M4 14.9A7 7 0 1 1 15.7 8h1.8a4.5 4.5 0 0 1 2.5 8.2M16 14v6M8 14v6M12 16v6'/></svg>")}

/* surfaces */
.card{background:var(--white);border-radius:var(--r-card);box-shadow:var(--sh-1);border:1px solid var(--g100)}
.pad{padding:24px}.pad-l{padding:32px}
.tint{background:var(--cream-2)}
.ph{background:var(--cream-2);border-radius:12px;display:grid;place-items:center;position:relative;overflow:hidden;color:var(--navy)}
.ph::before{content:"";position:absolute;width:62%;aspect-ratio:1;border-radius:50%;background:var(--coral-50)}
.ph .i{position:relative}
.ph.t::before{background:var(--teal-50)}.ph.n::before{background:var(--navy-50)}.ph.a::before{background:var(--amber-50)}

/* product card */
.pc{display:flex;flex-direction:column;gap:12px;padding:12px 12px 16px;position:relative}
.pc .ph{aspect-ratio:1/1}
.pc .nm{font:700 16px/1.35 var(--body);color:var(--navy);text-decoration:none}
.pc .pr{font:700 19px/1 var(--body);font-variant-numeric:tabular-nums}
.pc .was{font-size:14px;color:var(--g600);text-decoration:line-through}
.pc .top{position:absolute;top:22px;left:22px;z-index:1}
.rate{display:inline-flex;align-items:center;gap:6px;font-size:14px;color:var(--g600)}
.stars{display:inline-flex;gap:1px;color:var(--star)}
.stars .i{width:16px;height:16px}
.stars.lg .i{width:24px;height:24px}

/* badges & chips: always icon + text */
.bdg{display:inline-flex;align-items:center;gap:6px;min-height:28px;padding:3px 10px 3px 8px;border-radius:999px;font:700 13px/1.2 var(--body);white-space:nowrap}
.bdg .i{width:16px;height:16px}
.b-ok{background:var(--teal-50);color:var(--teal-ink)}
.b-low{background:var(--amber);color:var(--navy)}
.b-out{background:var(--red-50);color:var(--red)}
.b-bundle{background:var(--coral);color:var(--navy)}
.b-ai{background:var(--navy-50);color:var(--navy)}
.b-new{background:var(--purple);color:var(--cream)}
.chip{display:inline-flex;align-items:center;gap:6px;min-height:30px;padding:4px 12px 4px 9px;border-radius:999px;font:700 13px/1.2 var(--body);white-space:nowrap;border:1.5px solid transparent}
.chip .i{width:16px;height:16px}
.c-placed{background:var(--navy-50);color:var(--navy)}
.c-proc{background:var(--amber-50);color:#6B4600;border-color:#E8C877}
.c-disp{background:#E4EEFA;color:#1D4E89}
.c-deliv{background:var(--teal-50);color:var(--teal-ink)}
.c-rreq{background:var(--coral-50);color:var(--coral-ink)}
.c-ret{background:var(--g100);color:var(--g600);border-color:var(--g300)}
.c-canc{background:var(--red-50);color:var(--red)}
.c-unread{background:var(--coral);color:var(--navy)}

/* alerts, toasts, modal */
.alert{display:flex;gap:12px;align-items:flex-start;padding:14px 16px;border-radius:12px;border:1.5px solid;font-size:16px;line-height:1.45;color:var(--navy)}
.alert .i{width:22px;height:22px;margin-top:1px}
.alert b{display:block}
.a-info{background:var(--navy-50);border-color:#B48DBD}.a-info .i{color:var(--navy)}
.a-ok{background:var(--teal-50);border-color:var(--teal)}.a-ok .i{color:var(--teal-ink)}
.a-warn{background:var(--amber-50);border-color:var(--amber)}.a-warn .i{color:var(--amber-ink)}
.a-err{background:var(--red-50);border-color:var(--red)}.a-err .i{color:var(--red)}
.a-test{background:#FFF4D6;border:2px dashed var(--amber-ink)}
.toast{display:flex;gap:12px;align-items:center;background:var(--navy);color:var(--cream);border-radius:12px;padding:12px 12px 12px 16px;box-shadow:var(--sh-3);font-size:16px}
.toast .i-okc{color:#7FD6C9}
.toast a{color:var(--coral-on-navy);font-weight:700}
.scrim{background:rgba(30,10,39,.55);display:grid;place-items:center}
.modal{background:#fff;border-radius:16px;box-shadow:var(--sh-3);padding:32px;display:flex;flex-direction:column;gap:20px}

/* skeleton */
.sk{background:linear-gradient(90deg,#ECE6DA 0%,#F6F1E8 50%,#ECE6DA 100%);background-size:200% 100%;border-radius:8px;animation:sh 1.4s ease-in-out infinite}
@keyframes sh{to{background-position:-200% 0}}

/* nav bits */
.bc{display:flex;gap:8px;align-items:center;font-size:14px;color:var(--g600);flex-wrap:wrap}
.bc a{color:var(--coral-ink);font-weight:700}
.bc .i{width:14px;height:14px;color:var(--g400)}
.pg{display:flex;gap:8px;align-items:center}
.pg a,.pg span{min-width:44px;height:44px;border-radius:10px;display:grid;place-items:center;border:1.5px solid var(--g200);background:#fff;color:var(--navy);text-decoration:none;font-weight:700;font-variant-numeric:tabular-nums}
.pg a.on{background:var(--purple);color:#fff;border-color:var(--purple)}
.pg span{border:0;background:transparent}
.tabs{display:flex;gap:4px;border-bottom:2px solid var(--g200)}
.tab{min-height:48px;padding:0 16px;display:inline-flex;align-items:center;gap:8px;font:700 16px var(--body);color:var(--g600);border:0;background:transparent;border-bottom:3px solid transparent;margin-bottom:-2px;cursor:pointer;text-decoration:none}
.tab.on{color:var(--navy);border-bottom-color:var(--coral)}
.steps{display:flex;gap:0;align-items:center}
.st{display:flex;align-items:center;gap:10px;font-weight:700;color:var(--g600)}
.st .n{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;border:2px solid var(--g400);font-size:15px;background:#fff}
.st.done .n{background:var(--teal-ink);border-color:var(--teal-ink);color:#fff}
.st.cur{color:var(--navy)}.st.cur .n{background:var(--purple);border-color:var(--purple);color:#fff}
.st-line{flex:1;height:2px;background:var(--g300);margin:0 16px;min-width:24px}
.st-line.done{background:var(--teal-ink)}

/* tables */
.tbl{width:100%;border-collapse:collapse;font-size:15px}
.tbl th{text-align:left;font:700 13px/1.2 var(--body);color:var(--g600);padding:12px 14px;background:#F7F3EC;border-bottom:1px solid var(--g200);white-space:nowrap}
.tbl td{padding:12px 14px;border-bottom:1px solid var(--g100);vertical-align:middle}
.tbl tr.sel td{background:#FFF6F2}
.tbl .r{text-align:right}
.tbox{overflow-x:auto;border-radius:12px;border:1px solid var(--g200);background:#fff}
.thumb{width:44px;height:44px;border-radius:8px;flex:none}
.thumb .i{width:24px;height:24px}
.thumb::before{width:80%}
.kpi{display:flex;flex-direction:column;gap:6px;padding:18px 20px}
.kpi .v{font:800 32px/1.1 var(--disp);font-variant-numeric:tabular-nums;letter-spacing:-0.02em}
.kpi .k{font:700 14px var(--body);color:var(--g600);display:flex;gap:8px;align-items:center}
.mask{font-family:ui-monospace,Menlo,monospace;letter-spacing:.02em}

/* header / footer */
.ann{background:var(--purple);color:var(--cream);font-size:14px;min-height:40px;display:flex;align-items:center;justify-content:center;gap:12px;padding:0 8px 0 16px}
.ann a{color:var(--coral-on-navy);font-weight:700}
.ann .ibtn{color:var(--cream);width:40px;height:40px}
.ann .ibtn:hover{background:var(--purple-700)}
.hdr{background:#fff;border-bottom:1px solid var(--g200)}
.nav a{color:var(--navy);text-decoration:none;font-weight:700;font-size:15px;min-height:44px;display:inline-flex;align-items:center;gap:4px;padding:0 10px;border-radius:10px}
.nav a:hover{background:var(--g100)}
.nav a.on{background:var(--purple-50)}
.srch{display:flex;align-items:center;gap:8px;height:48px;border:1.5px solid var(--g400);border-radius:12px;padding:0 4px 0 14px;background:var(--cream);color:var(--g600)}
.srch input{flex:1;border:0;background:transparent;font:400 16px var(--body);color:var(--navy);min-width:0;height:44px}
.srch .go{width:40px;height:40px;border-radius:9px;background:var(--purple);color:var(--cream);display:grid;place-items:center;border:0}
.ftr{background:var(--navy);color:#E6D9EA}
.ftr a{color:#F3EEE6;text-decoration:none;font-size:15px;min-height:32px;display:inline-flex;align-items:center}
.ftr a:hover{text-decoration:underline;color:#fff}
.ftr h5{font:700 15px var(--body);color:var(--coral-on-navy);margin:0}

/* admin */
.adm{display:flex;font-size:15px;background:#F6F3EE}
.side{width:248px;flex:none;background:var(--navy);color:#E6D9EA;display:flex;flex-direction:column;gap:4px;padding:20px 12px}
.side a{display:flex;align-items:center;gap:12px;min-height:44px;padding:0 12px;border-radius:10px;color:#E6D9EA;text-decoration:none;font:700 15px var(--body)}
.side a:hover{background:var(--navy-700);color:#fff}
.side a.on{background:var(--navy-700);color:#fff}
.side a.on .i{color:var(--coral)}
.side .cnt{margin-left:auto;background:var(--coral);color:var(--navy);border-radius:10px;padding:0 7px;font-size:12px;line-height:20px}
.side .grp{font:700 12px var(--body);letter-spacing:.06em;text-transform:uppercase;color:#B99FC1;padding:16px 12px 6px}
.atop{display:flex;align-items:center;gap:16px;padding:14px 28px;background:#fff;border-bottom:1px solid var(--g200)}
.amain{flex:1;min-width:0;display:flex;flex-direction:column}
.acont{padding:24px 28px;display:flex;flex-direction:column;gap:20px}
.adm .card{border-radius:12px}
.adm .tbl td{padding:10px 12px}.adm .tbl th{padding:10px 12px}

/* dark tokens preview */
.dk{--bg:#170A1D;--sf:#22112A;--sf2:#321A3C;--tx:#F3EEE6;--tx2:#CDB8D3;--bd:#4A2A55;--cr:#FF8A6E;--tl:#4FC2B3;--am:#F2B93B;--rd:#FF7A73;background:var(--bg);color:var(--tx)}