/* =====================================================================================================
   Youze Africa — staff UI, "Leaflet Night Market" (spec 6, owner-approved artboards AdminDashboard,
   AdminOrders, AdminPricing, AdminLeaflets). Loaded after styles.css on every staff page: styles.css stays
   the base, this file re-points its tokens and adds the navy shell, the price sticker and the motion.
   ===================================================================================================== */

:root {
  --yz-navy: #06112d; --yz-navy-2: #0b1838; --yz-navy-3: #1d2c58;
  --yz-paper: #fbf7f0; --yz-card: #ffffff; --yz-line: #e7e1d6; --yz-line-2: #efe9de; --yz-sunk: #f4efe6; --yz-sunk-2: #f1ece2;
  --yz-hover: #fdfaf5; --yz-border-strong: #9a9183;
  --yz-text: #141821; --yz-muted: #5b6070;
  --yz-on-navy: #f4f1ea; --yz-muted-navy: #a9b0c4;
  --yz-red: #e3263a; --yz-red-dk: #b31b2c; --yz-orange: #fd7c37;
  /* text-safe reds (4.5:1 on paper, cards and sunk panels in both themes); --yz-red stays the fill/brand red */
  --yz-link: #c81f33; --yz-link-hover: #b31b2c; --yz-red-ink: #b31b2c;
  --yz-ok: #127a4a; --yz-ok-bg: #e5f3ec; --yz-warn: #b5560c; --yz-warn-fg: #9a4708; --yz-warn-bg: #fdf1e6;
  --yz-info: #2f5bd3; --yz-info-bg: #eaf0fd; --yz-red-bg: #fde8ea; --yz-hub-bg: #e9ecf4; --yz-hub-fg: #0b1838;
  --yz-neutral-bg: #efebe3; --yz-live: #2bb673;
  --yz-shadow: 0 10px 30px rgba(6, 17, 45, .06); --yz-shadow-md: 0 10px 30px rgba(6, 17, 45, .10);
  --yz-shadow-lg: 0 18px 40px rgba(6, 17, 45, .16); --yz-shadow-navy: 0 10px 30px rgba(6, 17, 45, .18);
  --yz-display: 'Bricolage Grotesque', 'Nunito', system-ui, sans-serif;
  --yz-body: 'Nunito', system-ui, -apple-system, 'Segoe UI', sans-serif;
  /* styles.css tokens, re-pointed so every older staff page wears the new palette */
  --bg: var(--yz-paper); --card: var(--yz-card); --ink: var(--yz-text); --muted: var(--yz-muted); --line: var(--yz-line);
  --heading: var(--yz-text); --hover: var(--yz-hover); --orange: var(--yz-red); --orange-soft: var(--yz-red-bg);
  --ok: var(--yz-ok); --warn: var(--yz-warn);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --yz-paper: #0a1330; --yz-card: #111c3d; --yz-line: #263361; --yz-line-2: #1f2b55; --yz-sunk: #17234c; --yz-sunk-2: #1a2650;
    --yz-hover: #15204a; --yz-border-strong: #5b6894; --yz-text: #eef0f7; --yz-muted: #b0b7cc;
    --yz-ok: #5fd39a; --yz-ok-bg: rgba(43, 182, 115, .16); --yz-warn: #f3a564; --yz-warn-fg: #f6b781; --yz-warn-bg: rgba(253, 124, 55, .14);
    --yz-info: #9db3f7; --yz-info-bg: rgba(47, 91, 211, .22); --yz-red-bg: rgba(227, 38, 58, .2); --yz-hub-bg: rgba(169, 176, 196, .16); --yz-hub-fg: #dfe4f2;
    --yz-neutral-bg: rgba(169, 176, 196, .14); --yz-link: #ff7a87; --yz-link-hover: #ff9aa4; --yz-red-ink: #ff8f9a;
    --yz-shadow: 0 10px 30px rgba(0, 0, 0, .25); --yz-shadow-md: 0 10px 30px rgba(0, 0, 0, .3); --yz-shadow-lg: 0 18px 40px rgba(0, 0, 0, .4);
  }
}
:root[data-theme="dark"] {
  --yz-paper: #0a1330; --yz-card: #111c3d; --yz-line: #263361; --yz-line-2: #1f2b55; --yz-sunk: #17234c; --yz-sunk-2: #1a2650;
  --yz-hover: #15204a; --yz-border-strong: #5b6894; --yz-text: #eef0f7; --yz-muted: #b0b7cc;
  --yz-ok: #5fd39a; --yz-ok-bg: rgba(43, 182, 115, .16); --yz-warn: #f3a564; --yz-warn-fg: #f6b781; --yz-warn-bg: rgba(253, 124, 55, .14);
  --yz-info: #9db3f7; --yz-info-bg: rgba(47, 91, 211, .22); --yz-red-bg: rgba(227, 38, 58, .2); --yz-hub-bg: rgba(169, 176, 196, .16); --yz-hub-fg: #dfe4f2;
  --yz-neutral-bg: rgba(169, 176, 196, .14); --yz-link: #ff7a87; --yz-link-hover: #ff9aa4; --yz-red-ink: #ff8f9a;
  --yz-shadow: 0 10px 30px rgba(0, 0, 0, .25); --yz-shadow-md: 0 10px 30px rgba(0, 0, 0, .3); --yz-shadow-lg: 0 18px 40px rgba(0, 0, 0, .4);
}

/* ---------- motion (DESIGN-BRIEF keyframes, verbatim, plus the artboards' extras) ---------- */
@keyframes yzRise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes yzPop{0%{opacity:0;transform:scale(.6) rotate(-8deg)}70%{transform:scale(1.06) rotate(2deg)}100%{opacity:1;transform:scale(1) rotate(-2deg)}}
@keyframes yzFloat{0%,100%{transform:translateY(0) rotate(var(--r,0deg))}50%{transform:translateY(-10px) rotate(var(--r,0deg))}}
@keyframes yzMarquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes yzPulse{0%{box-shadow:0 0 0 0 rgba(18,122,74,.5)}100%{box-shadow:0 0 0 12px rgba(18,122,74,0)}}
@keyframes yzRoute{to{stroke-dashoffset:0}}
@keyframes yzBar{from{width:0}}
@keyframes yzFade{from{opacity:0}to{opacity:1}}
@keyframes yzRing{0%{box-shadow:0 0 0 0 rgba(227,38,58,.55)}100%{box-shadow:0 0 0 10px rgba(227,38,58,0)}}
@keyframes yzBlue{0%{box-shadow:0 0 0 0 rgba(47,91,211,.6)}100%{box-shadow:0 0 0 8px rgba(47,91,211,0)}}
@keyframes yzPulseO{0%{box-shadow:0 0 0 0 rgba(253,124,55,.6)}100%{box-shadow:0 0 0 12px rgba(253,124,55,0)}}
@keyframes yzGrowX{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes yzGrowY{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes yzSlide{from{opacity:0;transform:translateX(56px)}to{opacity:1;transform:none}}
@keyframes yzStripe{to{background-position:28px 0}}
@keyframes yzScan{0%{top:-14%}100%{top:100%}}
@keyframes yzSpin{to{transform:rotate(360deg)}}
@keyframes yzTick{from{transform:scale(0)}to{transform:scale(1)}}
.yz-rise{animation:yzRise .7s cubic-bezier(.2,.7,.2,1) both}
.yz-pop{animation:yzPop .6s cubic-bezier(.2,.9,.3,1.3) both}
.yz-float{animation:yzFloat 6s ease-in-out infinite}
.yz-lift{transition:transform .25s ease, box-shadow .25s ease}
.yz-lift:hover{transform:translateY(-4px);box-shadow:var(--yz-shadow-lg)}
.yz-pulse{animation:yzPulse 1.8s ease-out infinite}
.yz-pulse-o{animation:yzPulseO 1.8s ease-out infinite}
.yz-ring{animation:yzRing 1.6s ease-out infinite}
.yz-blue{animation:yzBlue 1.6s ease-out infinite}
.yz-bar{animation:yzBar 1.1s cubic-bezier(.2,.7,.2,1) both}
.yz-grow-x{transform-origin:left center;animation:yzGrowX .9s cubic-bezier(.45,0,.2,1) both}
.yz-grow-y{transform-origin:top center;animation:yzGrowY 1.3s cubic-bezier(.2,.7,.2,1) .35s both}
.yz-draw{stroke-dasharray:100;stroke-dashoffset:100;animation:yzRoute 1.4s cubic-bezier(.2,.7,.2,1) .35s forwards}
.yz-fade{animation:yzFade .8s ease 1.1s both}
.yz-slide{animation:yzSlide .5s cubic-bezier(.2,.7,.2,1) both}
.yz-spin{animation:yzSpin .9s linear infinite}
.yz-scan{animation:yzScan 1.9s cubic-bezier(.45,0,.55,1) infinite}
.yz-stripe{background-image:repeating-linear-gradient(135deg,#fd7c37 0 7px,rgba(253,124,55,.45) 7px 14px);background-size:28px 28px;animation:yzStripe .9s linear infinite}
.yz-tick{animation:yzTick .3s cubic-bezier(.2,.9,.3,1.3) both}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .yz-draw { stroke-dashoffset: 0 !important; }
}

/* ---------- base ---------- */
.yz-admin { font-family: var(--yz-body); background: var(--yz-paper); color: var(--yz-text); font-size: 14px; line-height: 1.5;
  -webkit-font-smoothing: antialiased; }
.yz-admin *, .yz-admin *::before, .yz-admin *::after { box-sizing: border-box; }
.yz-admin a { color: var(--yz-link); }
.yz-admin a:hover { color: var(--yz-link-hover); }
.yz-admin :focus-visible { outline: 3px solid var(--yz-orange); outline-offset: 2px; }
.yz-admin input::placeholder, .yz-admin textarea::placeholder { color: var(--yz-muted); opacity: 1; }
.yz-sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.yz-skip { position: absolute; left: 12px; top: -60px; z-index: 100; padding: 10px 16px; border-radius: 999px; background: var(--yz-navy);
  color: #fff !important; font-weight: 800; text-decoration: none; }
.yz-skip:focus { top: 12px; }
.yz-ico { display: inline-block; flex: none; vertical-align: middle; }
.yz-num { font-variant-numeric: tabular-nums; }

/* ---------- shell ---------- */
.yz-shell { min-height: 100vh; display: grid; grid-template-columns: 248px minmax(0, 1fr); }
.yz-side { background: var(--yz-navy); color: var(--yz-on-navy); }
.yz-side__in { position: sticky; top: 0; max-height: 100vh; overflow-y: auto; padding: 24px 16px; display: flex; flex-direction: column; gap: 28px;
  scrollbar-width: thin; scrollbar-color: rgba(169, 176, 196, .3) transparent; }
.yz-brand { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 4px 8px 0; }
.yz-brand a { display: inline-flex; }
.yz-brand img { display: block; height: 40px; width: auto; }
.yz-badge-admin { font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--yz-muted-navy);
  border: 1px solid rgba(169, 176, 196, .35); border-radius: 999px; padding: 3px 9px; }
.yz-side__close { display: none; }
.yz-nav { display: flex; flex-direction: column; gap: 20px; }
.yz-nav__label { margin: 0 0 6px; padding: 0 12px; font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--yz-muted-navy); }
.yz-nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.yz-admin .yz-nav__link { position: relative; width: 100%; min-height: 44px; display: flex; align-items: center; gap: 12px; padding: 0 12px;
  border-radius: 12px; font-size: 14px; font-weight: 700; text-decoration: none; color: var(--yz-muted-navy); background: transparent;
  transition: background-color .2s ease, color .2s ease; }
.yz-admin .yz-nav__link:hover { background: rgba(244, 241, 234, .07); color: #ffffff; }
.yz-admin .yz-nav__link[aria-current="page"] { background: rgba(244, 241, 234, .10); color: #ffffff; }
.yz-nav__bar { position: absolute; left: 0; top: 11px; bottom: 11px; width: 3px; border-radius: 3px; background: transparent; }
.yz-nav__link[aria-current="page"] .yz-nav__bar { background: var(--yz-red); }
.yz-nav__text { flex: 1; }
.yz-nav__count { min-width: 24px; height: 22px; padding: 0 7px; border-radius: 999px; background: rgba(244, 241, 234, .12); color: var(--yz-on-navy);
  font-size: 12px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; }
.yz-nav__count--hot { background: var(--yz-red); color: #ffffff; }
.yz-rules { background: var(--yz-navy-2); border: 1px solid rgba(169, 176, 196, .16); border-radius: 18px; padding: 16px; }
.yz-rules h2 { margin: 0 0 12px; display: flex; align-items: center; gap: 8px; font-family: var(--yz-body); font-size: 12px; font-weight: 800;
  letter-spacing: .1em; text-transform: uppercase; color: var(--yz-muted-navy); }
.yz-dot { display: inline-block; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--yz-live); }
.yz-dot--warn { background: var(--yz-orange); }
.yz-dot--red { background: var(--yz-red); }
.yz-rules dl { margin: 0; display: grid; gap: 10px; }
.yz-rules dt { font-size: 12px; color: var(--yz-muted-navy); }
.yz-rules dd { margin: 0; font-size: 14px; font-weight: 700; color: var(--yz-on-navy); }
.yz-admin .yz-rules__edit { margin-top: 14px; width: 100%; min-height: 44px; display: flex; align-items: center; justify-content: center;
  border: 1px solid rgba(169, 176, 196, .3); border-radius: 999px; color: var(--yz-on-navy); font-size: 14px; font-weight: 800; text-decoration: none;
  transition: background-color .2s ease; }
.yz-admin .yz-rules__edit:hover { background: rgba(244, 241, 234, .14); color: #fff; }
.yz-side__foot { margin-top: auto; padding: 16px 8px 0; border-top: 1px solid rgba(169, 176, 196, .16); }
.yz-side__foot p { margin: 0; }
.yz-side__foot .k { font-size: 12px; color: var(--yz-muted-navy); }
.yz-side__foot .v { margin-top: 2px; font-size: 14px; font-weight: 700; line-height: 1.35; }
.yz-side__foot .n { margin-top: 4px; font-size: 12px; color: var(--yz-muted-navy); }
.yz-admin .yz-side__foot a { margin-top: 8px; min-height: 44px; display: inline-flex; align-items: center; gap: 6px; color: var(--yz-on-navy);
  font-size: 14px; font-weight: 800; }

.yz-col { min-width: 0; display: flex; flex-direction: column; }
.yz-top { position: sticky; top: 0; z-index: 20; background: rgba(251, 247, 240, .92); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--yz-line); }
:root[data-theme="dark"] .yz-top { background: rgba(10, 19, 48, .92); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .yz-top { background: rgba(10, 19, 48, .92); } }
.yz-top__in { max-width: 1240px; margin: 0 auto; padding: 12px 32px; display: flex; align-items: center; gap: 16px; }
.yz-menu-btn { display: none; }
.yz-search { position: relative; flex: 1 1 240px; max-width: 340px; min-width: 160px; margin: 0; }
.yz-search .yz-ico { position: absolute; left: 14px; top: 13px; color: var(--yz-muted); pointer-events: none; }
.yz-admin .yz-search input { width: 100%; height: 44px; padding: 0 14px 0 42px; border: 1px solid var(--yz-line); border-radius: 12px; background: var(--yz-card);
  font: inherit; font-size: 14px; color: var(--yz-text); }
.yz-admin .yz-search input:focus { outline: none; border-color: var(--yz-navy); box-shadow: 0 0 0 3px rgba(253, 124, 55, .35); }
.yz-top__right { margin-left: auto; display: flex; align-items: center; gap: 12px; min-width: 0; flex: none; }
.yz-fx { display: flex; align-items: center; gap: 12px; padding: 5px 5px 5px 18px; min-height: 54px; border-radius: 999px; background: var(--yz-navy);
  color: var(--yz-on-navy); box-shadow: var(--yz-shadow-navy); }
.yz-fx--plain { padding-right: 18px; }
.yz-fx__dot { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--yz-live); }
.yz-fx__dot--held { background: var(--yz-orange); }
.yz-fx__dot--manual { background: #7f9cf0; }
.yz-fx__kv { display: flex; flex-direction: column; line-height: 1.15; }
.yz-fx__k { font-size: 12px; font-weight: 700; color: var(--yz-muted-navy); white-space: nowrap; }
.yz-fx__m { font-size: 16px; font-weight: 700; color: var(--yz-muted-navy); font-variant-numeric: tabular-nums; }
.yz-fx__q { font-family: var(--yz-display); font-size: 20px; font-weight: 800; letter-spacing: -.02em; color: #ffffff; font-variant-numeric: tabular-nums; line-height: 1.05; }
.yz-fx__off { padding: 3px 9px; border-radius: 999px; background: rgba(253, 124, 55, .16); color: var(--yz-orange); font-size: 12px; font-weight: 800;
  font-variant-numeric: tabular-nums; white-space: nowrap; }
.yz-fx__sep { width: 1px; height: 28px; background: rgba(169, 176, 196, .28); }
.yz-fx__when { display: flex; flex-direction: column; line-height: 1.25; font-size: 12px; white-space: nowrap; }
.yz-fx__when b { font-weight: 700; color: var(--yz-on-navy); }
.yz-fx__when span { color: var(--yz-muted-navy); }
.yz-admin .yz-fx__held { color: var(--yz-orange); font-weight: 800; }
.yz-fx form { margin: 0; display: flex; }
.yz-fx__btn { min-height: 44px; display: inline-flex; align-items: center; gap: 7px; padding: 0 16px; border: 0; border-radius: 999px; background: var(--yz-on-navy);
  color: var(--yz-navy); font: inherit; font-size: 14px; font-weight: 800; cursor: pointer; transition: background-color .2s ease; }
.yz-fx__btn:hover { background: #ffffff; }
.yz-iconbtn { position: relative; width: 44px; height: 44px; flex: none; display: grid; place-items: center; border: 1px solid var(--yz-line); border-radius: 50%;
  background: var(--yz-card); color: var(--yz-text); cursor: pointer; text-decoration: none; transition: border-color .2s ease; }
.yz-admin a.yz-iconbtn { color: var(--yz-text); }
.yz-iconbtn:hover { border-color: var(--yz-text); }
.yz-iconbtn__dot { position: absolute; top: 9px; right: 10px; width: 8px; height: 8px; border-radius: 50%; background: var(--yz-red); border: 2px solid var(--yz-card); }
.yz-theme .yz-ico--sun { display: none; }
:root[data-theme="dark"] .yz-theme .yz-ico--sun { display: inline-block; }
:root[data-theme="dark"] .yz-theme .yz-ico--moon { display: none; }
.yz-who { display: flex; align-items: center; gap: 10px; min-width: 0; flex: none; }
.yz-avatar { flex: none; width: 40px; height: 40px; border-radius: 50%; background: var(--yz-navy-2); color: var(--yz-on-navy); display: grid; place-items: center;
  box-shadow: 0 0 0 2px var(--yz-paper), 0 0 0 4px var(--yz-orange); font-weight: 800; font-size: 14px; }
.yz-who__txt { line-height: 1.25; min-width: 0; }
.yz-who__txt p { margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 160px; }
.yz-who__name { font-size: 14px; font-weight: 800; }
.yz-who__role { font-size: 12px; color: var(--yz-muted); }
.yz-who form { margin: 0; }
.yz-logout:hover { border-color: var(--yz-red); color: var(--yz-red-ink); }

.yz-page { width: 100%; max-width: 1240px; margin: 0 auto; padding: 32px 32px 56px; flex: 1; }
.yz-stack { display: flex; flex-direction: column; gap: 28px; }
.yz-foot { text-align: center; color: var(--yz-muted); font-size: 12px; padding: 0 0 28px; }
.yz-scrim { display: none; }

/* ---------- typography ---------- */
.yz-eyebrow { margin: 0 0 6px; font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--yz-muted); }
.yz-eyebrow--red { color: var(--yz-red-ink); }
:root[data-theme="dark"] .yz-eyebrow--red { color: #ff8f9a; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .yz-eyebrow--red { color: #ff8f9a; } }
.yz-admin .yz-h1 { margin: 0; font-family: var(--yz-display); font-size: 40px; font-weight: 800; line-height: 1.1; letter-spacing: -.02em; color: var(--yz-text); }
.yz-admin .yz-h2 { margin: 0; font-family: var(--yz-display); font-size: 28px; font-weight: 800; line-height: 1.1; letter-spacing: -.02em; color: var(--yz-text); }
.yz-admin .yz-h3 { margin: 0; font-family: var(--yz-display); font-size: 20px; font-weight: 800; line-height: 1.2; letter-spacing: -.02em; color: var(--yz-text); }
.yz-admin .yz-h4 { margin: 0; font-family: var(--yz-body); font-size: 16px; font-weight: 800; line-height: 1.25; color: var(--yz-text); }
.yz-lede { margin: 8px 0 0; font-size: 16px; color: var(--yz-muted); max-width: 680px; }
.yz-sub { margin: 2px 0 0; font-size: 14px; color: var(--yz-muted); }
.yz-small { font-size: 12px; color: var(--yz-muted); }
.yz-strong { font-weight: 800; color: var(--yz-text); }
.yz-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.yz-head > div { min-width: 0; }
.yz-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.yz-display { font-family: var(--yz-display); font-weight: 800; letter-spacing: -.02em; }

/* ---------- cards ---------- */
.yz-card { background: var(--yz-card); border: 1px solid var(--yz-line); border-radius: 18px; box-shadow: var(--yz-shadow); min-width: 0; }
.yz-card--pad { padding: 20px; }
.yz-card--pad-lg { padding: 24px; }
.yz-card--clip { overflow: hidden; }
.yz-card--navy { background: var(--yz-navy); color: var(--yz-on-navy); border-color: var(--yz-navy); box-shadow: var(--yz-shadow-navy); position: relative; overflow: hidden; }
.yz-card--navy .yz-sub, .yz-card--navy .yz-small, .yz-card--navy .yz-eyebrow { color: var(--yz-muted-navy); }
.yz-admin .yz-card--navy .yz-h1, .yz-admin .yz-card--navy .yz-h2, .yz-admin .yz-card--navy .yz-h3, .yz-admin .yz-card--navy .yz-h4 { color: var(--yz-on-navy); }
.yz-card--navy a:not(.yz-btn) { color: var(--yz-on-navy); }
.yz-card--sunk { background: var(--yz-paper); border: 1px solid var(--yz-line); border-radius: 14px; box-shadow: none; }
.yz-card__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.yz-card__head > div { min-width: 0; }
.yz-card__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 20px; border-top: 1px solid var(--yz-line); flex-wrap: wrap; }
.yz-inset { border-radius: 14px; background: var(--yz-navy-2); border: 1px solid rgba(169, 176, 196, .16); padding: 14px 16px; color: var(--yz-on-navy); }
.yz-note { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 14px; background: var(--yz-paper); border: 1px solid var(--yz-line);
  font-size: 14px; color: var(--yz-muted); }
.yz-note .yz-ico { margin-top: 2px; color: var(--yz-info); }
.yz-empty { padding: 18px 12px; border: 1px dashed #cfc6b6; border-radius: 14px; text-align: center; font-size: 14px; color: var(--yz-muted); }
:root[data-theme="dark"] .yz-empty { border-color: var(--yz-line); }

/* ---------- buttons ---------- */
.yz-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; min-width: 44px; padding: 0 18px; border: 1px solid transparent;
  border-radius: 999px; font: inherit; font-size: 14px; font-weight: 800; line-height: 1.2; text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background-color .2s ease, border-color .2s ease, box-shadow .2s ease, transform .2s ease; }
.yz-btn:disabled, .yz-btn[aria-disabled="true"] { cursor: not-allowed; opacity: .55; }
.yz-btn--sm { min-height: 44px; padding: 0 12px; font-size: 13px; }
.yz-btn--lg { min-height: 52px; padding: 0 24px; font-size: 16px; }
.yz-btn--block { width: 100%; }
.yz-admin .yz-btn--ink { background: var(--yz-navy); color: var(--yz-on-navy); border-color: var(--yz-navy); }
.yz-admin .yz-btn--ink:hover { background: var(--yz-navy-3); color: #fff; }
:root[data-theme="dark"] .yz-admin .yz-btn--ink { background: var(--yz-on-navy); color: var(--yz-navy); }
.yz-admin .yz-btn--red { background: var(--yz-red); color: #ffffff; border-color: var(--yz-red); box-shadow: 0 10px 24px rgba(227, 38, 58, .22); }
.yz-admin .yz-btn--red:hover { background: var(--yz-red-dk); border-color: var(--yz-red-dk); color: #fff; transform: translateY(-1px); }
.yz-admin .yz-btn--ok { background: var(--yz-ok); color: #ffffff; border-color: var(--yz-ok); }
:root[data-theme="dark"] .yz-admin .yz-btn--ok { background: #127a4a; border-color: #127a4a; }
.yz-admin .yz-btn--ok:hover { background: #0e6a3f; border-color: #0e6a3f; color: #fff; }
.yz-admin .yz-btn--ghost { background: var(--yz-card); color: var(--yz-text); border-color: var(--yz-line); }
.yz-admin .yz-btn--ghost:hover { border-color: var(--yz-text); background: var(--yz-card); color: var(--yz-text); }
.yz-admin .yz-btn--quiet { background: transparent; color: var(--yz-muted); border-color: transparent; font-weight: 700; }
.yz-admin .yz-btn--quiet:hover { color: var(--yz-red-ink); }
.yz-admin .yz-btn--light { background: var(--yz-on-navy); color: var(--yz-navy); }
.yz-admin .yz-btn--light:hover { background: #ffffff; color: var(--yz-navy); }
.yz-admin .yz-btn--ghost-dark { background: transparent; color: var(--yz-on-navy); border-color: rgba(169, 176, 196, .35); }
.yz-admin .yz-btn--ghost-dark:hover { background: rgba(244, 241, 234, .12); color: #fff; }
.yz-admin .yz-btn--danger { background: transparent; color: var(--yz-red-ink); border-color: transparent; }
.yz-admin .yz-btn--danger:hover { background: var(--yz-red-bg); color: var(--yz-red-ink); }
:root[data-theme="dark"] .yz-admin .yz-btn--danger { color: #ff8f9a; }
.yz-btn .yz-ico { transition: transform .2s ease; }
.yz-btn--go:hover .yz-ico:last-child { transform: translateX(3px); }

/* ---------- chips & pills ---------- */
.yz-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 26px; padding: 2px 10px; border-radius: 999px; font-size: 12px; font-weight: 800;
  white-space: nowrap; background: var(--yz-neutral-bg); color: var(--yz-muted); line-height: 1.3; }
.yz-chip__dot { flex: none; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.yz-chip--await { background: var(--yz-sunk); color: var(--yz-muted); }
.yz-chip--await .yz-chip__dot { background: var(--yz-muted-navy); }
.yz-chip--sent { background: var(--yz-warn-bg); color: var(--yz-warn-fg); }
.yz-chip--sent .yz-chip__dot { background: var(--yz-orange); }
.yz-chip--paid, .yz-chip--info { background: var(--yz-info-bg); color: var(--yz-info); }
.yz-chip--bought, .yz-chip--way, .yz-chip--hub { background: var(--yz-hub-bg); color: var(--yz-hub-fg); }
.yz-chip--arrived, .yz-chip--ready, .yz-chip--out, .yz-chip--ok { background: var(--yz-ok-bg); color: var(--yz-ok); }
.yz-chip--done { background: var(--yz-neutral-bg); color: var(--yz-muted); }
.yz-chip--expired, .yz-chip--red { background: var(--yz-red-bg); color: var(--yz-red-ink); }
:root[data-theme="dark"] .yz-chip--expired, :root[data-theme="dark"] .yz-chip--red { color: #ff8f9a; }
.yz-chip--expired .yz-chip__dot { background: var(--yz-red); }
.yz-chip--warn { background: var(--yz-warn-bg); color: var(--yz-warn-fg); }
.yz-chip--navy { background: var(--yz-navy); color: var(--yz-on-navy); }
.yz-chip--line { background: var(--yz-card); color: var(--yz-text); border: 1px solid var(--yz-line); }
.yz-chip--wa { background: #f0f8f3; color: #127a4a; border: 1px solid #cfe6da; }
:root[data-theme="dark"] .yz-chip--wa { background: var(--yz-ok-bg); color: var(--yz-ok); border-color: transparent; }
.yz-chip--live { background: rgba(43, 182, 115, .14); color: var(--yz-on-navy); }
.yz-chip--lg { min-height: 30px; padding: 4px 12px; }

/* ---------- the leaflet price sticker (the brand) ---------- */
.yz-sticker { display: inline-flex; flex-direction: column; border-radius: 14px; overflow: hidden; text-align: center; box-shadow: 0 10px 24px rgba(6, 17, 45, .24);
  transform: rotate(-2deg); vertical-align: middle; flex: none; }
.yz-sticker__strip { display: block; background: var(--yz-navy); color: var(--yz-on-navy); font-family: var(--yz-body); font-size: 12px; font-weight: 800;
  letter-spacing: .06em; line-height: 1; text-transform: uppercase; padding: 5px 10px; white-space: nowrap; }
.yz-sticker__body { display: block; background: var(--yz-red); color: #ffffff; padding: 5px 12px 7px; }
.yz-sticker__now { display: block; font-family: var(--yz-body); font-size: 12px; font-weight: 800; letter-spacing: .14em; line-height: 1.2; }
.yz-sticker__price { display: flex; justify-content: center; align-items: flex-start; font-family: var(--yz-display); font-weight: 800; font-size: 26px;
  line-height: .95; letter-spacing: -.03em; white-space: nowrap; }
.yz-sticker__r { font-size: .36em; line-height: 1; margin: .16em .06em 0 0; letter-spacing: 0; }
.yz-sticker__price sup { font-size: .42em; line-height: 1; margin: .12em 0 0 .04em; letter-spacing: 0; vertical-align: baseline; position: static; }
.yz-sticker__unit { display: block; font-family: var(--yz-body); font-size: 12px; font-weight: 700; line-height: 1.3; margin-top: 2px; }
.yz-sticker--sm .yz-sticker__price { font-size: 20px; }
.yz-sticker--lg .yz-sticker__price { font-size: 34px; }
.yz-sticker--xl .yz-sticker__price { font-size: 56px; }
.yz-sticker--edge { border: 2px solid var(--yz-on-navy); }
.yz-tagmini { display: inline-flex; align-items: baseline; gap: 4px; padding: 2px 7px 3px; border-radius: 8px; background: var(--yz-red); color: #ffffff;
  line-height: 1; transform: rotate(-2deg); flex: none; }
.yz-tagmini__now { font-size: 12px; font-weight: 800; letter-spacing: .1em; }
.yz-tagmini__v { font-family: var(--yz-display); font-size: 16px; font-weight: 800; letter-spacing: -.02em; }
.yz-tagmini__v small { font-size: .6em; margin-right: 1px; }
.yz-tagmini sup { font-size: .45em; vertical-align: top; position: relative; top: .15em; margin-left: 1px; line-height: 1; }
.yz-landed { display: inline-flex; align-items: baseline; gap: 6px; padding: 7px 12px; border-radius: 999px; background: var(--yz-navy); color: var(--yz-on-navy);
  white-space: nowrap; }
.yz-landed b { font-family: var(--yz-display); font-weight: 800; font-size: 18px; letter-spacing: -.02em; line-height: 1.1; }
.yz-landed span { font-size: 12px; font-weight: 700; color: var(--yz-muted-navy); }

/* ---------- forms ---------- */
.yz-admin .yz-label { display: block; margin-bottom: 6px; font-size: 14px; font-weight: 800; color: var(--yz-text); }
.yz-card--navy .yz-label, .yz-on-navy .yz-label { color: var(--yz-on-navy); }
.yz-admin .yz-input, .yz-admin .yz-select, .yz-admin .yz-textarea { width: 100%; min-height: 44px; padding: 0 12px; border: 1.5px solid var(--yz-line);
  border-radius: 12px; background: var(--yz-card); font: inherit; font-size: 14px; font-weight: 700; color: var(--yz-text); }
.yz-admin .yz-textarea { padding: 10px 12px; min-height: 96px; font-weight: 600; line-height: 1.45; resize: vertical; }
.yz-admin .yz-input:focus, .yz-admin .yz-select:focus, .yz-admin .yz-textarea:focus { outline: none; border-color: var(--yz-navy); box-shadow: 0 0 0 3px rgba(253, 124, 55, .35); }
:root[data-theme="dark"] .yz-admin .yz-input:focus, :root[data-theme="dark"] .yz-admin .yz-select:focus { border-color: var(--yz-orange); }
.yz-admin .yz-input:disabled, .yz-admin .yz-select:disabled, .yz-admin .yz-textarea:disabled { opacity: .65; cursor: not-allowed; }
.yz-field { display: flex; align-items: center; min-height: 44px; border: 1.5px solid var(--yz-border-strong); border-radius: 12px; background: var(--yz-card); overflow: hidden;
  transition: border-color .2s ease, box-shadow .2s ease; }
.yz-field:focus-within { border-color: var(--yz-navy); box-shadow: 0 0 0 3px rgba(253, 124, 55, .35); }
.yz-field__affix { padding: 0 2px 0 14px; font-weight: 800; color: var(--yz-muted); flex: none; }
.yz-field__affix--end { padding: 0 14px 0 2px; }
.yz-admin .yz-field input { flex: 1; min-width: 0; height: 44px; border: 0; background: transparent; padding: 0 12px 0 6px; font: inherit; font-family: var(--yz-display);
  font-size: 20px; font-weight: 800; color: var(--yz-text); font-variant-numeric: tabular-nums; border-radius: 0; }
.yz-admin .yz-field input:focus { outline: none; box-shadow: none; }
.yz-field--dark { border-color: rgba(169, 176, 196, .5); background: rgba(244, 241, 234, .06); }
.yz-field--dark:focus-within { border-color: var(--yz-orange); box-shadow: 0 0 0 3px rgba(253, 124, 55, .25); }
.yz-field--dark .yz-field__affix { color: var(--yz-muted-navy); }
.yz-admin .yz-field--dark input { color: var(--yz-on-navy); }
.yz-admin .yz-field--dark input::placeholder { color: var(--yz-muted-navy); }
.yz-field--sm input { font-family: var(--yz-body); font-size: 15px; height: 40px; }
.yz-field--sm { min-height: 40px; }
.yz-help { margin: 6px 0 0; font-size: 12px; color: var(--yz-muted); }
.yz-card--navy .yz-help { color: var(--yz-muted-navy); }
.yz-switch { display: inline-flex; flex-direction: row; align-items: center; gap: 12px; min-height: 44px; cursor: pointer; font-size: 14px; font-weight: 800; color: inherit; position: relative; }
.yz-switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.yz-switch__track { position: relative; flex: none; width: 52px; height: 30px; border-radius: 999px; background: rgba(169, 176, 196, .45); transition: background-color .25s ease; }
.yz-switch__knob { position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: #ffffff; box-shadow: 0 2px 6px rgba(6, 17, 45, .3);
  transition: transform .25s cubic-bezier(.2, .9, .3, 1.3); }
.yz-switch input:checked + .yz-switch__track { background: var(--yz-orange); }
.yz-switch input:checked + .yz-switch__track .yz-switch__knob { transform: translateX(22px); }
.yz-switch input:focus-visible + .yz-switch__track { outline: 3px solid var(--yz-orange); outline-offset: 2px; }
.yz-switch input:disabled + .yz-switch__track { opacity: .5; }
.yz-check { display: inline-flex; flex-direction: row; align-items: flex-start; gap: 10px; min-height: 44px; padding: 10px 0; font-size: 14px; font-weight: 700; color: var(--yz-text); cursor: pointer; }
.yz-admin .yz-check input { width: 20px; height: 20px; margin: 1px 0 0; flex: none; accent-color: var(--yz-red); }
.yz-formgrid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }

/* segmented controls (links or buttons) */
.yz-seg { display: inline-flex; align-items: center; gap: 2px; padding: 3px; border-radius: 999px; background: var(--yz-paper); border: 1px solid var(--yz-line); flex-wrap: wrap; }
.yz-seg__label { padding: 0 8px 0 12px; font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--yz-muted); }
.yz-admin .yz-seg__btn { display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border: 0; border-radius: 999px; background: transparent; color: var(--yz-text);
  font: inherit; font-size: 14px; font-weight: 800; cursor: pointer; white-space: nowrap; text-decoration: none; transition: background-color .2s ease, color .2s ease; }
.yz-admin .yz-seg__btn:hover { background: var(--yz-sunk); color: var(--yz-text); }
.yz-admin .yz-seg__btn[aria-pressed="true"], .yz-admin .yz-seg__btn[aria-current="true"], .yz-admin .yz-seg__btn[aria-current="page"] { background: var(--yz-navy); color: var(--yz-on-navy); }
:root[data-theme="dark"] .yz-admin .yz-seg__btn[aria-pressed="true"], :root[data-theme="dark"] .yz-admin .yz-seg__btn[aria-current="true"],
:root[data-theme="dark"] .yz-admin .yz-seg__btn[aria-current="page"] { background: var(--yz-on-navy); color: var(--yz-navy); }

/* progress bars */
.yz-progress { height: 8px; border-radius: 999px; background: var(--yz-line-2); overflow: hidden; }
.yz-progress > span { display: block; height: 100%; border-radius: 999px; background: var(--yz-navy); }
:root[data-theme="dark"] .yz-progress > span { background: var(--yz-on-navy); }
.yz-progress--navy { background: rgba(244, 241, 234, .14); }
.yz-progress--navy > span { background: var(--yz-orange); }
:root[data-theme="dark"] .yz-progress--navy > span { background: var(--yz-orange); }
.yz-progress--ok > span { background: var(--yz-ok); }

/* tables */
.yz-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.yz-table th { text-align: left; padding: 9px 12px; background: var(--yz-paper); border-top: 1px solid var(--yz-line); border-bottom: 1px solid var(--yz-line);
  font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--yz-muted); white-space: nowrap; }
.yz-table td { padding: 10px 12px; border-bottom: 1px solid var(--yz-sunk-2); vertical-align: middle; }
.yz-table tbody tr { transition: background-color .2s ease; }
.yz-table tbody tr:hover { background: var(--yz-hover); }
.yz-table .r { text-align: right; }
.yz-table--flush th:first-child, .yz-table--flush td:first-child { padding-left: 20px; }
.yz-table--flush th:last-child, .yz-table--flush td:last-child { padding-right: 20px; }
.yz-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; position: relative; }
/* visually-hidden text inside a horizontal scroller must stay inside it (else it widens the phone page) */
.yz-admin .scroll-x, .yz-admin .card { position: relative; }

/* flash */
.yz-admin .yz-flash { display: flex; align-items: flex-start; gap: 10px; padding: 12px 16px; margin: 0 0 20px; border-radius: 14px; font-weight: 700; font-size: 14px;
  background: var(--yz-card); border: 1px solid var(--yz-line); color: var(--yz-text); box-shadow: var(--yz-shadow); }
.yz-admin .yz-flash.flash-ok { background: var(--yz-ok-bg); border-color: transparent; color: var(--yz-ok); }
.yz-admin .yz-flash.flash-error { background: var(--yz-red-bg); border-color: transparent; color: var(--yz-red-ink); }
:root[data-theme="dark"] .yz-admin .yz-flash.flash-error { color: #ff9aa4; }
.yz-flash .yz-ico { margin-top: 2px; }

/* KPI tiles + sparklines */
.yz-kpi { padding: 16px 18px; display: flex; flex-direction: column; gap: 4px; }
.yz-kpi__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.yz-kpi__label { margin: 0; font-size: 14px; font-weight: 800; color: var(--yz-muted); }
.yz-kpi__value { margin: 2px 0 0; font-family: var(--yz-display); font-size: 40px; font-weight: 800; line-height: 1.05; letter-spacing: -.02em; font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere; }
.yz-kpi__value--md { font-size: 28px; }
.yz-kpi__cap { margin: 0; font-size: 14px; color: var(--yz-muted); }
.yz-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.yz-spark { display: block; width: 100%; height: 40px; margin-top: auto; overflow: visible; }
.yz-count { flex: none; width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; font-family: var(--yz-display); font-size: 28px; font-weight: 800;
  line-height: 1; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.yz-count--ok { background: var(--yz-ok-bg); color: var(--yz-ok); }
.yz-count--warn { background: var(--yz-warn-bg); color: var(--yz-warn-fg); }
.yz-count--info { background: var(--yz-info-bg); color: var(--yz-info); }
.yz-count--red { background: var(--yz-red-bg); color: var(--yz-red-ink); }
:root[data-theme="dark"] .yz-count--red { color: #ff8f9a; }

/* grids */
.yz-grid { display: grid; gap: 16px; }
.yz-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.yz-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.yz-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.yz-grid--2-1 { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 24px; align-items: stretch; }
.yz-grid--7-5 { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 24px; }
.yz-grid--5-7 { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 24px; }
.yz-grid--8-4 { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: 24px; }
.yz-grid--start { align-items: start; }
.yz-gap-sm { gap: 12px; }

/* ================= Dashboard ================= */
.yz-need-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 54px; height: 50px; padding: 0 14px; border-radius: 14px; background: var(--yz-red);
  color: #ffffff; font-size: 28px; box-shadow: 0 10px 24px rgba(227, 38, 58, .28); vertical-align: middle; }
.yz-h1--badge { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.yz-auto { min-width: 280px; background: var(--yz-card); border: 1px solid var(--yz-line); border-radius: 14px; padding: 12px 16px; }
.yz-auto ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-size: 14px; font-weight: 700; }
.yz-auto li { display: flex; align-items: center; gap: 8px; }
.yz-auto .yz-ico { color: var(--yz-ok); }
.yz-queue { padding: 16px 18px; display: flex; flex-direction: column; gap: 10px; }
.yz-queue__head { display: flex; align-items: center; gap: 12px; }
.yz-queue__meta { margin: 2px 0 0; display: flex; align-items: center; gap: 5px; font-size: 12px; color: var(--yz-muted); }
.yz-queue ul { list-style: none; margin: 0; padding: 0; }
.yz-queue li { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-top: 1px solid var(--yz-line-2); }
.yz-queue__body { flex: 1; min-width: 0; }
.yz-queue__ref { margin: 0; font-size: 12px; font-weight: 700; color: var(--yz-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.yz-queue__ref a { color: inherit; }
.yz-queue__title { margin: 1px 0; font-size: 14px; font-weight: 800; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.yz-queue__sub { margin: 0; font-size: 12px; color: var(--yz-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.yz-queue__foot { margin: auto 0 0; padding-top: 10px; border-top: 1px solid var(--yz-line-2); font-size: 12px; font-weight: 700; color: var(--yz-muted); }
.yz-queue__empty { padding: 10px 0; border-top: 1px solid var(--yz-line-2); font-size: 14px; color: var(--yz-muted); }
.yz-queue form { margin: 0; flex: none; }
.yz-funnel { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; flex: 1; justify-content: space-between; }
.yz-admin .yz-funnel a { width: 100%; min-height: 44px; display: grid; grid-template-columns: 170px minmax(0, 1fr) 28px 84px; align-items: center; gap: 12px; padding: 6px 10px;
  border: 1px solid transparent; border-radius: 12px; color: var(--yz-text); text-decoration: none; transition: background-color .2s ease; }
.yz-admin .yz-funnel a:hover { background: var(--yz-hover); border-color: var(--yz-line); }
.yz-funnel__label { font-size: 14px; font-weight: 700; }
.yz-funnel__track { display: block; height: 10px; border-radius: 999px; background: var(--yz-sunk-2); overflow: hidden; }
.yz-funnel__fill { display: block; height: 100%; border-radius: 999px; }
.yz-funnel__n { font-family: var(--yz-display); font-size: 20px; font-weight: 800; line-height: 1; text-align: right; font-variant-numeric: tabular-nums; }
.yz-funnel__v { font-size: 14px; color: var(--yz-muted); text-align: right; font-variant-numeric: tabular-nums; }
.yz-src-tabs { display: inline-flex; gap: 2px; padding: 2px; border: 1px solid var(--yz-line); border-radius: 999px; background: var(--yz-paper); }
.yz-recent { table-layout: fixed; min-width: 640px; }
.yz-recent col.c-no { width: 132px; } .yz-recent col.c-goods { width: 108px; } .yz-recent col.c-src { width: 124px; } .yz-recent col.c-st { width: 188px; }
.yz-recent td { overflow: hidden; }
.yz-recent td .yz-small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.yz-recent .yz-chip { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.yz-recent tbody tr[hidden] { display: none; }
.yz-recent__no { margin: 0; font-size: 14px; font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
.yz-recent__no a { color: var(--yz-text); text-decoration: none; }
.yz-recent__no a:hover { color: var(--yz-link-hover); text-decoration: underline; }
.yz-recent__cust { margin: 0; font-size: 14px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.yz-recent__items { margin: 0; font-size: 12px; color: var(--yz-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.yz-leaflet { padding: 20px; display: flex; flex-direction: column; gap: 14px; }
.yz-leaflet__top { display: grid; grid-template-columns: minmax(0, 1fr) 128px; gap: 12px; align-items: center; }
.yz-leaflet__art { position: relative; height: 136px; }
.yz-leaflet__page { position: absolute; padding: 5px; border-radius: 10px; background: #ffffff; box-shadow: 0 12px 24px rgba(0, 0, 0, .35); overflow: hidden; }
.yz-leaflet__page img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 6px; background: #fff; }
.yz-leaflet__page--a { right: 2px; top: 0; width: 76px; height: 96px; --r: 7deg; transform: rotate(7deg); }
.yz-leaflet__page--b { left: 0; top: 16px; width: 90px; height: 106px; --r: -5deg; transform: rotate(-5deg); }
.yz-leaflet__page--blank { display: grid; place-items: center; background: #fbf7f0; color: var(--yz-navy); font-family: var(--yz-display); font-weight: 800; font-size: 13px;
  text-align: center; line-height: 1.1; padding: 8px; }
.yz-leaflet__art .yz-sticker { position: absolute; right: -8px; bottom: 0; }
.yz-leaflet__top-items { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.yz-leaflet__top-items li { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 6px 0; }
.yz-leaflet__top-items li + li { border-top: 1px solid rgba(169, 176, 196, .16); }
.yz-thumb { display: block; width: 40px; height: 40px; overflow: hidden; border-radius: 10px; background: #ffffff; }
.yz-thumb img { display: block; width: 100%; height: 100%; object-fit: contain; }
.yz-thumb--blank { display: grid; place-items: center; color: var(--yz-navy); }
.yz-ellipsis { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.yz-other-cats { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.yz-other-cats li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border-radius: 14px; background: var(--yz-navy-2);
  border: 1px solid rgba(169, 176, 196, .16); }
.yz-more { margin-top: 8px; }
.yz-more > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 18px; border-radius: 999px;
  border: 1px solid var(--yz-line); background: var(--yz-card); font-weight: 800; color: var(--yz-text); }
.yz-more > summary::-webkit-details-marker { display: none; }
.yz-more > summary:hover { border-color: var(--yz-text); }
.yz-more[open] > summary .yz-ico { transform: rotate(180deg); }
.yz-more__body { margin-top: 20px; display: flex; flex-direction: column; gap: 20px; }

/* ================= Orders pipeline ================= */
.yz-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.yz-tile { display: flex; flex-direction: column; gap: 8px; padding: 16px 18px; border-radius: 18px; background: var(--yz-card); border: 1px solid var(--yz-line);
  box-shadow: var(--yz-shadow); color: var(--yz-text); text-decoration: none; min-width: 0; }
.yz-admin a.yz-tile { color: var(--yz-text); }
.yz-tile__k { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  color: var(--yz-muted); }
.yz-tile__row { display: flex; align-items: center; gap: 12px; width: 100%; }
.yz-tile__n { font-family: var(--yz-display); font-weight: 800; font-size: 40px; line-height: 1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.yz-tile__sub { min-width: 0; flex: 1; font-size: 14px; line-height: 1.35; color: var(--yz-muted); }
.yz-tile--navy { background: var(--yz-navy); color: var(--yz-on-navy); border-color: var(--yz-navy); box-shadow: var(--yz-shadow-navy); transition: background-color .2s ease; }
.yz-admin a.yz-tile--navy { color: var(--yz-on-navy); }
.yz-admin a.yz-tile--navy:hover { background: var(--yz-navy-2); color: var(--yz-on-navy); }
.yz-tile--navy .yz-tile__k { color: var(--yz-muted-navy); }
.yz-tile--navy .yz-tile__sub { color: var(--yz-on-navy); }
.yz-tile__go { flex: none; width: 36px; height: 36px; border-radius: 999px; background: var(--yz-red); color: #ffffff; display: grid; place-items: center; }
.yz-tile__go .yz-ico { transition: transform .2s ease; }
a.yz-tile:hover .yz-tile__go .yz-ico { transform: translateX(3px); }
.yz-tile--split { flex-direction: row; align-items: center; gap: 12px; }
.yz-auto-chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px; background: rgba(18, 122, 74, .10); color: var(--yz-ok);
  font-size: 12px; font-weight: 800; letter-spacing: 0; text-transform: none; }
.yz-filterbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 10px; border-radius: 18px; background: var(--yz-card); border: 1px solid var(--yz-line);
  box-shadow: var(--yz-shadow); }
.yz-filterbar__end { margin-left: auto; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding-right: 8px; font-size: 14px; color: var(--yz-muted); }
.yz-filterbar__end a { font-weight: 800; white-space: nowrap; }
.yz-board-wrap { overflow-x: auto; padding-bottom: 6px; -webkit-overflow-scrolling: touch; position: relative; }
.yz-board-groups, .yz-board { display: grid; grid-template-columns: repeat(6, minmax(172px, 1fr)); gap: 10px; min-width: 1080px; }
.yz-board-groups { margin-bottom: 12px; font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--yz-muted); }
.yz-board-groups span { padding-bottom: 6px; border-bottom: 1px solid var(--yz-line); }
.yz-board { align-items: stretch; }
.yz-colm { display: flex; flex-direction: column; min-width: 0; }
.yz-colm__head { padding: 0 2px 8px; }
.yz-colm__rail { position: relative; height: 24px; margin-bottom: 8px; }
.yz-colm__line { position: absolute; left: 24px; right: -10px; top: 11px; height: 0; border-top: 2px dashed #d6cdbd; }
:root[data-theme="dark"] .yz-colm__line { border-top-color: var(--yz-line); }
.yz-colm__line-fill { position: absolute; left: 24px; right: -10px; top: 11px; height: 2px; border-radius: 2px; background: var(--yz-orange); }
.yz-colm__node { position: absolute; left: 0; top: 0; width: 24px; height: 24px; border-radius: 999px; display: grid; place-items: center; font-size: 12px; font-weight: 800;
  box-shadow: 0 0 0 4px var(--yz-paper); }
.yz-colm__title { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; min-height: 39px; }
.yz-admin .yz-colm__title h2 { margin: 0; font-family: var(--yz-display); font-weight: 700; font-size: 16px; line-height: 1.2; letter-spacing: -.01em; color: var(--yz-text); }
.yz-colm__count { flex: none; min-width: 26px; height: 24px; padding: 0 8px; border-radius: 999px; background: var(--yz-navy); color: var(--yz-on-navy); font-size: 12px;
  font-weight: 800; display: grid; place-items: center; }
:root[data-theme="dark"] .yz-colm__count { background: var(--yz-on-navy); color: var(--yz-navy); }
.yz-colm__sub { font-size: 12px; font-weight: 700; color: var(--yz-muted); }
.yz-colm__cards { flex: 1; display: flex; flex-direction: column; gap: 8px; padding: 5px; border-radius: 18px; background: rgba(6, 17, 45, .045); list-style: none; margin: 0; }
:root[data-theme="dark"] .yz-colm__cards { background: rgba(0, 0, 0, .2); }
.yz-ocard { display: flex; flex-direction: column; gap: 8px; width: 100%; padding: 10px 9px; border-radius: 14px; background: var(--yz-card); border: 1px solid var(--yz-line);
  box-shadow: 0 4px 14px rgba(6, 17, 45, .06); color: var(--yz-text); text-decoration: none; transition: transform .25s ease, box-shadow .25s ease, border-color .2s ease; }
.yz-admin a.yz-ocard { color: var(--yz-text); }
.yz-admin a.yz-ocard:hover { transform: translateY(-4px); box-shadow: var(--yz-shadow-lg); border-color: var(--yz-red); color: var(--yz-text); }
.yz-ocard__top { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.yz-ocard__no { min-width: 0; font-family: var(--yz-display); font-weight: 700; font-size: 13px; line-height: 1.3; letter-spacing: -.02em; color: var(--yz-muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.yz-ocard__icons { display: flex; gap: 2px; flex: none; }
.yz-ocard__icon { width: 20px; height: 20px; border-radius: 999px; display: grid; place-items: center; }
.yz-ocard__icon--wa { background: rgba(18, 122, 74, .12); color: var(--yz-ok); }
.yz-ocard__icon--web { background: rgba(47, 91, 211, .12); color: var(--yz-info); }
.yz-ocard__icon--staff { background: var(--yz-sunk); color: var(--yz-muted); }
.yz-ocard__icon--collect { background: #f3ede2; color: var(--yz-navy); }
.yz-ocard__icon--deliver { background: var(--yz-navy); color: var(--yz-orange); }
:root[data-theme="dark"] .yz-ocard__icon--collect { background: var(--yz-sunk); color: var(--yz-text); }
.yz-ocard__cust { display: block; margin-top: -6px; font-weight: 800; font-size: 14px; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.yz-ocard__mid { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.yz-ocard__thumbs { display: flex; align-items: center; min-height: 30px; }
.yz-ocard__thumbs img, .yz-ocard__thumbs .yz-ocard__ph { width: 30px; height: 30px; border-radius: 999px; object-fit: contain; background: #ffffff; border: 2px solid #ffffff;
  box-shadow: 0 0 0 1px var(--yz-line); position: relative; }
.yz-ocard__thumbs > * + * { margin-left: -10px; }
.yz-ocard__ph { display: grid; place-items: center; font-size: 11px; font-weight: 800; color: var(--yz-navy); background: var(--yz-sunk) !important; }
.yz-ocard__total { font-family: var(--yz-display); font-weight: 800; font-size: 16px; line-height: 1; letter-spacing: -.02em; white-space: nowrap; }
.yz-ocard__state { display: flex; flex-direction: column; gap: 6px; padding: 6px 7px; border-radius: 10px; }
.yz-ocard__chip { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 800; line-height: 1.3; }
.yz-ocard__chip .yz-chip__dot { width: 7px; height: 7px; }
.yz-state--due { background: rgba(181, 86, 12, .08); color: var(--yz-warn-fg); }
.yz-state--confirm { background: rgba(47, 91, 211, .09); color: var(--yz-info); }
.yz-state--paid { background: rgba(18, 122, 74, .09); color: var(--yz-ok); }
.yz-state--bal { background: var(--yz-sunk); color: var(--yz-text); }
.yz-cd { display: flex; flex-direction: column; gap: 5px; margin: 0 -4px -2px; padding: 5px 6px 6px; border-radius: 8px; background: var(--yz-card); color: var(--yz-text); }
.yz-cd__t { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 800; line-height: 1.2; }
.yz-cd__track { display: block; height: 3px; border-radius: 999px; background: var(--yz-line-2); overflow: hidden; }
.yz-cd__bar { display: block; height: 100%; border-radius: 999px; background: var(--yz-orange); }
.yz-cd__bar--ok { background: var(--yz-ok); }
.yz-cd--red { background: var(--yz-red); color: #ffffff; }
.yz-cd--red .yz-cd__track { background: rgba(255, 255, 255, .35); }
.yz-cd--red .yz-cd__bar { background: #ffffff; }
.yz-cd--ended { background: var(--yz-red-bg); color: var(--yz-red-ink); }
.yz-log ol { list-style: none; margin: 8px 0 0; padding: 0; }
.yz-log li { display: grid; grid-template-columns: 96px 104px minmax(0, 1fr); gap: 12px; align-items: center; padding: 9px 0; border-top: 1px solid var(--yz-line-2); }
.yz-log__t { font-family: var(--yz-display); font-weight: 700; font-size: 14px; white-space: nowrap; }
.yz-log__who { justify-self: start; display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 999px; font-size: 12px; font-weight: 800; white-space: nowrap; }
.yz-log__who--auto { background: rgba(18, 122, 74, .10); color: var(--yz-ok); }
.yz-log__who--cust { background: rgba(47, 91, 211, .10); color: var(--yz-info); }
.yz-log__who--you { background: var(--yz-navy); color: var(--yz-on-navy); }
.yz-log__who--staff { background: var(--yz-sunk); color: var(--yz-text); }
.yz-log__txt { font-size: 14px; line-height: 1.4; overflow-wrap: anywhere; }

/* ================= Order page (the AdminOrders drawer, full page) ================= */
.yz-ohero { position: relative; overflow: hidden; background: var(--yz-navy); color: var(--yz-on-navy); border-radius: 18px; padding: 22px 24px 18px; box-shadow: var(--yz-shadow-navy); }
.yz-ohero__route { position: absolute; right: 56px; top: -4px; width: 240px; height: 120px; pointer-events: none; }
.yz-ohero__row { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.yz-ohero__row > div { min-width: 0; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.yz-admin .yz-ohero h1 { margin: 0; font-family: var(--yz-display); font-weight: 800; font-size: 32px; line-height: 1.1; letter-spacing: -.02em; color: var(--yz-on-navy); }
.yz-ohero__pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; background: var(--yz-navy-2); border: 1px solid rgba(244, 241, 234, .16);
  color: var(--yz-on-navy); font-size: 12px; font-weight: 800; white-space: nowrap; }
.yz-ohero__who { position: relative; display: flex; align-items: center; gap: 12px; margin-top: 12px; flex-wrap: wrap; }
.yz-ohero__ini { flex: none; width: 40px; height: 40px; border-radius: 999px; background: var(--yz-orange); color: var(--yz-navy); display: grid; place-items: center; font-weight: 800; font-size: 14px; }
.yz-ohero__name { display: block; font-size: 16px; font-weight: 800; line-height: 1.3; }
.yz-ohero__meta { display: block; font-size: 14px; color: var(--yz-muted-navy); line-height: 1.3; }
.yz-ohero__stage { flex: none; display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; font-size: 12px; font-weight: 800; white-space: nowrap; }
.yz-steps { position: relative; margin-top: 14px; }
.yz-steps__track { height: 6px; border-radius: 999px; background: rgba(244, 241, 234, .12); overflow: hidden; }
.yz-steps__fill { height: 100%; border-radius: 999px; background: var(--yz-orange); }
.yz-steps ol { list-style: none; margin: 8px 0 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 4px; }
.yz-steps li { font-size: 12px; line-height: 1.25; font-weight: 600; color: var(--yz-muted-navy); }
.yz-steps li.is-done { color: var(--yz-on-navy); }
.yz-steps li[aria-current="step"] { font-weight: 800; color: var(--yz-orange); }
.yz-oline { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto 96px; gap: 14px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--yz-line-2); }
.yz-oline__img { width: 52px; height: 52px; object-fit: contain; border-radius: 12px; background: #ffffff; border: 1px solid var(--yz-line-2); display: grid; place-items: center;
  color: var(--yz-navy); }
.yz-oline__name { font-weight: 800; font-size: 14px; line-height: 1.3; }
.yz-oline__calc { font-size: 12px; color: var(--yz-muted); margin-top: 2px; font-variant-numeric: tabular-nums; }
.yz-oline__total { text-align: right; }
.yz-oline__total b { display: block; font-family: var(--yz-display); font-weight: 800; font-size: 16px; line-height: 1.1; }
.yz-sum { margin: 0; padding: 12px 0 0; display: flex; flex-direction: column; gap: 8px; font-size: 14px; }
.yz-sum > div { display: flex; justify-content: space-between; gap: 12px; }
.yz-sum dt { color: var(--yz-muted); min-width: 0; }
.yz-sum dd { margin: 0; font-weight: 800; text-align: right; }
.yz-sum__total { align-items: baseline; padding-top: 10px; border-top: 1px dashed #d6cdbd; }
:root[data-theme="dark"] .yz-sum__total { border-top-color: var(--yz-line); }
.yz-sum__total dt { font-weight: 800; color: var(--yz-text); }
.yz-sum__total dd { font-family: var(--yz-display); font-size: 20px; }
.yz-declared { margin-top: 12px; border-radius: 14px; border: 1px solid rgba(47, 91, 211, .32); background: rgba(47, 91, 211, .05); padding: 14px; }
.yz-declared__k { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--yz-info); }
.yz-declared__amt { font-family: var(--yz-display); font-weight: 800; font-size: 28px; line-height: 1; letter-spacing: -.02em; }
.yz-paylist { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.yz-paylist li { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; background: var(--yz-paper); border: 1px solid var(--yz-line-2); flex-wrap: wrap; }
.yz-paylist__ic { flex: none; width: 32px; height: 32px; border-radius: 999px; display: grid; place-items: center; background: rgba(18, 122, 74, .12); color: var(--yz-ok); }
.yz-paylist__ic--pending { background: rgba(47, 91, 211, .12); color: var(--yz-info); }
.yz-paylist__ic--refund { background: var(--yz-red-bg); color: var(--yz-red-ink); }
.yz-wa { border-radius: 18px; overflow: hidden; }
.yz-wa__head { display: flex; align-items: center; gap: 12px; padding: 12px 16px; }
.yz-wa__body { background: #efe7da; padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 10px; }
:root[data-theme="dark"] .yz-wa__body { background: #0b1534; }
:root[data-theme="dark"] .yz-wa__when { background: rgba(244, 241, 234, .1); color: var(--yz-muted); }
.yz-wa__when { align-self: center; text-align: center; font-size: 12px; font-weight: 800; color: #5b6070; background: rgba(255, 255, 255, .7); padding: 3px 10px; border-radius: 999px; }
.yz-wa__bubble { max-width: 100%; align-self: flex-start; background: #ffffff; color: #141821; border-radius: 4px 16px 16px 16px; padding: 10px 12px 8px;
  box-shadow: 0 1px 2px rgba(6, 17, 45, .14); font-size: 14px; line-height: 1.45; }
.yz-wa__from { font-size: 12px; font-weight: 800; color: #b31b2c; margin-bottom: 2px; }
.yz-admin .yz-wa textarea { width: 100%; border: 0; background: transparent; resize: vertical; font: inherit; font-size: 14px; line-height: 1.45; color: #141821; padding: 0; min-height: 180px; }
.yz-nextbar { display: flex; align-items: center; gap: 14px; padding: 14px 16px 14px 24px; background: var(--yz-card); border: 1px solid var(--yz-line); border-radius: 18px;
  box-shadow: var(--yz-shadow-md); flex-wrap: wrap; }
.yz-nextbar__txt { min-width: 0; flex: 1; }
.yz-nextbar form { margin: 0; }
.yz-items-table input, .yz-items-table select { min-height: 40px; border: 1.5px solid var(--yz-line); border-radius: 10px; padding: 0 10px; font: inherit; font-size: 14px;
  background: var(--yz-card); color: var(--yz-text); }
.yz-items-table input.narrow { width: 92px; }
.yz-items-table td { vertical-align: top; }
.yz-items-table .yz-desc { width: 100%; min-width: 200px; font-weight: 700; }
.yz-details { border-top: 1px solid var(--yz-line-2); margin-top: 12px; padding-top: 4px; }
.yz-details > summary { cursor: pointer; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-weight: 800; color: var(--yz-link); list-style: none; }
.yz-details > summary::-webkit-details-marker { display: none; }
.yz-details[open] > summary .yz-ico { transform: rotate(45deg); }
.yz-details .yz-ico { transition: transform .2s ease; }
.yz-dl { list-style: none; margin: 0; padding: 0; }
.yz-dl li { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--yz-line-2); font-size: 14px; }
.yz-dl li:last-child { border-bottom: 0; }
.yz-dl span { color: var(--yz-muted); }
.yz-dl b { text-align: right; overflow-wrap: anywhere; }
.yz-dl .is-warn b { color: var(--yz-warn); }
.yz-banner { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: 14px; font-size: 14px; font-weight: 700; }
.yz-banner--warn { background: var(--yz-warn-bg); color: var(--yz-warn-fg); }
.yz-banner--red { background: var(--yz-red-bg); color: var(--yz-red-ink); }
:root[data-theme="dark"] .yz-banner--red { color: #ff9aa4; }
.yz-banner--ok { background: var(--yz-ok-bg); color: var(--yz-ok); }
.yz-banner--info { background: var(--yz-info-bg); color: var(--yz-info); }
.yz-banner a { color: inherit; font-weight: 800; }
.yz-banner .yz-ico { margin-top: 1px; }

/* ================= Pricing & delivery ================= */
.yz-jumps { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.yz-admin .yz-jump { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; min-height: 44px; padding: 12px 16px; border-radius: 14px; background: var(--yz-card);
  border: 1px solid var(--yz-line); color: var(--yz-text); text-decoration: none; transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.yz-admin .yz-jump:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(6, 17, 45, .12); border-color: #d6cdbd; color: var(--yz-text); }
.yz-admin .yz-jump[aria-current="page"] { border-color: var(--yz-navy); box-shadow: inset 0 -3px 0 var(--yz-red); }
.yz-jump__k { font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--yz-muted); }
.yz-jump__v { font-family: var(--yz-display); font-size: 20px; font-weight: 800; letter-spacing: -.02em; line-height: 1.2; font-variant-numeric: tabular-nums; }
.yz-jump__s { font-size: 12px; color: var(--yz-muted); }
.yz-section { display: flex; flex-direction: column; gap: 20px; scroll-margin-top: 96px; }
.yz-ratecard { padding: 28px; display: flex; flex-direction: column; gap: 22px; }
.yz-ratecard__rings::before, .yz-ratecard__rings::after { content: ''; position: absolute; border-radius: 50%; pointer-events: none; }
.yz-ratecard__rings::before { right: -90px; top: -90px; width: 280px; height: 280px; border: 1px solid rgba(169, 176, 196, .14); }
.yz-ratecard__rings::after { right: -150px; top: -150px; width: 400px; height: 400px; border: 1px solid rgba(169, 176, 196, .08); }
.yz-ratecard > * { position: relative; }
.yz-ratesticker { width: 204px; flex: none; border-radius: 14px; overflow: hidden; border: 2px solid var(--yz-on-navy); background: var(--yz-red); color: #ffffff; text-align: center;
  box-shadow: 0 18px 40px rgba(227, 38, 58, .32); transform: rotate(-2deg); }
.yz-ratesticker__strip { background: var(--yz-navy); color: var(--yz-on-navy); font-size: 12px; font-weight: 800; letter-spacing: .06em; line-height: 1; text-transform: uppercase;
  padding: 6px 10px; border-bottom: 1px solid rgba(244, 241, 234, .12); font-variant-numeric: tabular-nums; }
.yz-ratesticker__k { font-size: 12px; font-weight: 800; letter-spacing: .14em; }
.yz-ratesticker__v { font-family: var(--yz-display); font-size: 84px; font-weight: 800; line-height: .95; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.yz-ratesticker__v sup { font-size: .42em; vertical-align: top; position: relative; top: .2em; margin-left: 2px; letter-spacing: 0; line-height: 1; }
.yz-ratechart { display: block; width: 100%; height: auto; overflow: visible; }
.yz-catchips { display: flex; flex-wrap: wrap; gap: 8px; }
.yz-catchip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 5px 4px 12px; border: 1.5px solid var(--yz-line); border-radius: 999px; background: var(--yz-card);
  font-size: 14px; font-weight: 700; }
.yz-catchip--own { border-color: var(--yz-red); }
.yz-catchips--grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 8px; }
.yz-catchips--grid .yz-catchip { justify-content: space-between; }
.yz-catchips--grid .yz-catchip > span:first-of-type { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.yz-catchip--off { opacity: .55; }
.yz-catchip__fee { height: 26px; padding: 0 8px; border-radius: 999px; display: inline-flex; align-items: center; background: var(--yz-sunk); color: var(--yz-text); font-size: 12px;
  font-weight: 800; font-variant-numeric: tabular-nums; }
.yz-catchip--own .yz-catchip__fee { background: var(--yz-red); color: #ffffff; }
.yz-ladder { position: relative; list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.yz-ladder__spine { position: absolute; left: 21px; top: 30px; bottom: 40px; width: 2px; background: var(--yz-line); }
.yz-ladder__spine--fill { background: var(--yz-red); }
.yz-rung { position: relative; display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 16px; align-items: start; }
.yz-rung__node { width: 44px; height: 44px; margin-top: 18px; border-radius: 50%; display: grid; place-items: center; background: var(--yz-navy); color: #ffffff;
  font-family: var(--yz-display); font-size: 20px; font-weight: 800; box-shadow: 0 0 0 5px var(--yz-paper); position: relative; z-index: 1; }
.yz-rung__node--ok { background: var(--yz-ok); }
.yz-rung__node--red { background: var(--yz-red); }
.yz-rung__card { padding: 18px 20px; display: flex; flex-direction: column; gap: 14px; }
.yz-rung__pct { font-family: var(--yz-display); font-size: 40px; font-weight: 800; line-height: 1; letter-spacing: -.03em; }
.yz-band { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 14px; border: 1.5px solid var(--yz-line); background: var(--yz-card); flex-wrap: wrap; }
.yz-band__k { font-size: 14px; font-weight: 700; color: var(--yz-muted); }
.yz-band .yz-field { width: 112px; }
.yz-band .yz-field:nth-of-type(2) { width: 136px; }
.yz-band .yz-field--pct { width: 92px; }
.yz-zones { table-layout: fixed; }
.yz-zones td, .yz-zones th { vertical-align: middle; padding-left: 6px; padding-right: 6px; }
.yz-zones td:first-child, .yz-zones th:first-child { padding-left: 0; }
.yz-zones input { width: 100%; min-height: 44px; padding: 0 12px; border: 1.5px solid var(--yz-line); border-radius: 12px; background: var(--yz-card); font: inherit; font-size: 14px;
  font-weight: 700; color: var(--yz-text); }
.yz-zones input:focus { outline: none; border-color: var(--yz-navy); box-shadow: 0 0 0 3px rgba(253, 124, 55, .35); }
.yz-zones .yz-zone--off { opacity: .6; }
.yz-map { position: relative; height: 128px; background: var(--yz-navy); overflow: hidden; }
.yz-map__pin { position: absolute; left: 50%; top: 50%; width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: 50%; background: var(--yz-orange); border: 3px solid #ffffff; }
.yz-map__tag { position: absolute; left: 0; right: 0; top: 16px; display: flex; justify-content: center; }
.yz-map__tag span { padding: 4px 10px; border-radius: 999px; background: var(--yz-on-navy); color: var(--yz-navy); font-size: 12px; font-weight: 800; white-space: nowrap; }
.yz-free { flex: none; padding: 6px 12px; border-radius: 12px; background: var(--yz-ok); color: #ffffff; font-family: var(--yz-display); font-size: 20px; font-weight: 800;
  letter-spacing: -.01em; box-shadow: 0 8px 18px rgba(18, 122, 74, .28); }
:root[data-theme="dark"] .yz-free { background: #127a4a; }
.yz-stepper { display: inline-flex; align-items: center; gap: 4px; padding: 4px; border-radius: 999px; background: var(--yz-paper); border: 1px solid var(--yz-line); }
.yz-stepper button { width: 44px; height: 44px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; background: var(--yz-card); color: var(--yz-text);
  cursor: pointer; }
.yz-admin .yz-stepper input { width: 84px; min-height: 44px; border: 0; background: transparent; text-align: center; font-family: var(--yz-display); font-size: 28px; font-weight: 800;
  letter-spacing: -.02em; color: var(--yz-text); font-variant-numeric: tabular-nums; padding: 0; -moz-appearance: textfield; }
.yz-stepper input::-webkit-outer-spin-button, .yz-stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.yz-timeline { position: relative; height: 12px; margin: 12px 12px 0 0; border-radius: 999px; background: var(--yz-line-2); }
.yz-timeline__bar { height: 100%; width: 100%; border-radius: 999px; background: var(--yz-navy); }
:root[data-theme="dark"] .yz-timeline__bar { background: var(--yz-muted-navy); }
.yz-timeline__tick { position: absolute; top: -4px; width: 3px; height: 20px; margin-left: -1px; border-radius: 2px; background: var(--yz-orange); }
.yz-timeline__end { position: absolute; right: -12px; top: -6px; width: 24px; height: 24px; border-radius: 50%; background: var(--yz-red); border: 3px solid #ffffff; }
.yz-timeline__labels { position: relative; height: 20px; margin: 6px 12px 0 0; font-size: 12px; font-weight: 700; color: var(--yz-muted); }
.yz-timeline__labels span { position: absolute; transform: translateX(-50%); white-space: nowrap; }
.yz-infocard { padding: 14px 16px; border-radius: 14px; background: var(--yz-paper); border: 1px solid var(--yz-line); }
.yz-infocard p { margin: 0; font-size: 14px; color: var(--yz-muted); }
.yz-infocard .t { margin: 0 0 4px; display: flex; align-items: center; gap: 8px; font-weight: 800; color: var(--yz-text); }
.yz-basket li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 0; border-top: 1px solid rgba(169, 176, 196, .16); }
.yz-teamlist { list-style: none; margin: 0; padding: 0; }
.yz-teamlist li { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--yz-line-2); flex-wrap: wrap; }
.yz-teamlist li.is-off { opacity: .55; }
.yz-inline-form { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; margin: 0; }
.yz-inline-form > label { flex: 1 1 160px; }

/* ================= Catalogues & leaflets ================= */
.yz-statbar { display: flex; background: var(--yz-card); border: 1px solid var(--yz-line); border-radius: 18px; box-shadow: var(--yz-shadow-md); padding: 16px 0; flex-wrap: wrap; row-gap: 12px; }
.yz-statbar > div { padding: 0 20px; }
.yz-statbar > div + div { border-left: 1px solid var(--yz-line); }
.yz-statbar__v { font-family: var(--yz-display); font-weight: 800; font-size: 28px; letter-spacing: -.02em; line-height: 1.1; margin-top: 2px; display: flex; align-items: center; gap: 8px; }
.yz-catgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 20px; }
.yz-cat { display: flex; flex-direction: column; overflow: hidden; }
.yz-cat__top { display: flex; gap: 22px; padding: 22px 22px 0; align-items: flex-start; }
.yz-cat__cover { position: relative; width: 112px; height: 148px; flex: none; margin: 4px 8px 0 4px; }
.yz-cat__sheet { position: absolute; inset: 0; background: #ffffff; border: 1px solid var(--yz-line); border-radius: 12px; box-shadow: var(--yz-shadow-md); }
.yz-cat__sheet--a { transform: rotate(-8deg) translate(-8px, 6px); }
.yz-cat__sheet--b { background: #fbf7f0; transform: rotate(5deg) translate(6px, 2px); }
.yz-cat__face { position: absolute; inset: 0; background: #ffffff; border: 1px solid var(--yz-line); border-radius: 12px; overflow: hidden; box-shadow: 0 14px 34px rgba(6, 17, 45, .16);
  --r: -1.5deg; }
.yz-cat__face img { display: block; width: 100%; height: 100%; object-fit: cover; }
.yz-cat__face-band { background: var(--yz-red); color: #ffffff; font-family: var(--yz-display); font-weight: 800; font-size: 12px; letter-spacing: .04em; text-transform: uppercase;
  line-height: 1.15; padding: 8px 10px; overflow-wrap: anywhere; }
.yz-cat__face-lines { padding: 10px; display: flex; flex-direction: column; gap: 5px; }
.yz-cat__face-lines span { height: 5px; border-radius: 4px; background: #e7e1d6; }
.yz-cat--ended .yz-cat__cover { opacity: .55; filter: grayscale(1); }
.yz-cat__body { flex: 1; min-width: 0; }
.yz-cat__store { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.yz-cat__store-name { font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--yz-muted); }
.yz-admin .yz-cat h3 { margin: 8px 0 0; font-family: var(--yz-display); font-weight: 800; font-size: 24px; line-height: 1.1; letter-spacing: -.02em; color: var(--yz-text); overflow-wrap: anywhere; }
.yz-cat__counts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
.yz-cat__counts div { padding: 8px 10px; border-radius: 12px; background: var(--yz-paper); border: 1px solid var(--yz-line-2); }
.yz-cat__counts b { display: block; font-family: var(--yz-display); font-size: 20px; font-weight: 800; letter-spacing: -.02em; line-height: 1.1; }
.yz-cat__counts span { font-size: 12px; color: var(--yz-muted); }
.yz-cat__section { padding: 16px 22px 0; }
.yz-cat__dep { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; border: 1px solid var(--yz-line); border-radius: 14px; background: var(--yz-paper);
  flex-wrap: wrap; }
.yz-cat__actions { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding: 16px 22px 20px; margin-top: auto; }
.yz-cat__actions form { margin: 0; }
.yz-cat__edit { margin: 0 22px 18px; }
.yz-cat__edit > summary { list-style: none; }
.yz-cat__edit > summary::-webkit-details-marker { display: none; }
.yz-cat__edit-body { margin-top: 12px; padding: 16px; border-radius: 14px; background: var(--yz-paper); border: 1px solid var(--yz-line); }
.yz-reader { padding: 28px; }
.yz-reader__grid { display: grid; grid-template-columns: 260px minmax(0, 1fr) 232px; gap: 24px; align-items: stretch; }
.yz-drop { position: relative; display: flex; flex-direction: row; align-items: center; gap: 20px; padding: 20px 24px; border: 2px dashed rgba(244, 241, 234, .3); border-radius: 18px;
  background: rgba(244, 241, 234, .04); min-height: 140px; cursor: pointer; transition: border-color .2s ease, background-color .2s ease; color: var(--yz-on-navy); font-weight: 600; }
.yz-drop:hover, .yz-drop.is-over { border-color: var(--yz-orange); background: rgba(253, 124, 55, .08); }
.yz-drop:focus-within { outline: 3px solid var(--yz-orange); outline-offset: 3px; }
.yz-drop__pdf { flex: none; width: 72px; height: 88px; border-radius: 10px; background: #fbf7f0; box-shadow: 0 12px 26px rgba(0, 0, 0, .3); display: flex; flex-direction: column;
  overflow: hidden; --r: -4deg; }
.yz-drop__pdf i { height: 8px; background: var(--yz-red); }
.yz-drop__pdf b { flex: 1; display: grid; place-items: center; color: var(--yz-navy); }
.yz-drop__pdf small { font-size: 10px; font-weight: 800; color: var(--yz-navy); text-align: center; padding-bottom: 6px; letter-spacing: .08em; }
.yz-drop input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; }
.yz-steps3 { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; font-size: 14px; color: var(--yz-muted-navy); }
.yz-steps3 li { display: flex; align-items: center; gap: 10px; }
.yz-steps3 span { flex: none; width: 22px; height: 22px; border-radius: 999px; border: 1px solid rgba(244, 241, 234, .3); display: grid; place-items: center; font-size: 12px;
  font-weight: 800; color: var(--yz-on-navy); }
.yz-admin .yz-select--dark { background: var(--yz-navy-2); border-color: rgba(244, 241, 234, .22); color: var(--yz-on-navy); }
.yz-admin .yz-input--dark { background: var(--yz-navy-2); border-color: rgba(244, 241, 234, .22); color: var(--yz-on-navy); }
.yz-admin .yz-select--dark option { color: #141821; background: #ffffff; }
.yz-pagetiles { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 14px 10px; }
.yz-ptile__sheet { position: relative; aspect-ratio: 4 / 5; border-radius: 10px; overflow: hidden; background: #fbf7f0; }
.yz-ptile__sheet i { display: block; height: 6px; background: var(--yz-red); }
.yz-ptile__sheet u { display: block; margin: 8px 6px 0; height: 9px; width: 60%; border-radius: 3px; background: rgba(227, 38, 58, .6); text-decoration: none; }
.yz-ptile__sheet s { display: block; margin: 6px 6px 0; height: 4px; width: 80%; border-radius: 3px; background: #e7e1d6; text-decoration: none; }
.yz-ptile--queued .yz-ptile__sheet { opacity: .4; }
.yz-ptile--running .yz-ptile__sheet { box-shadow: 0 0 0 2px var(--yz-orange); }
.yz-ptile--failed .yz-ptile__sheet { box-shadow: 0 0 0 2px var(--yz-red); }
.yz-ptile__ok { position: absolute; top: 10px; right: 6px; width: 20px; height: 20px; border-radius: 999px; background: var(--yz-ok); display: grid; place-items: center;
  box-shadow: 0 0 0 2px #fbf7f0; color: #fff; }
:root[data-theme="dark"] .yz-ptile__ok { background: #127a4a; }
.yz-ptile__scan { position: absolute; left: 0; right: 0; height: 16%; background: rgba(253, 124, 55, .28); border-bottom: 2px solid var(--yz-orange); }
.yz-ptile__meta { display: flex; align-items: center; justify-content: space-between; gap: 4px; margin-top: 8px; font-size: 12px; }
.yz-ptile__meta b { color: var(--yz-on-navy); }
.yz-readbar { margin-top: 10px; height: 12px; border-radius: 999px; background: rgba(244, 241, 234, .1); overflow: hidden; display: flex; }
.yz-readbar__done { height: 100%; background: var(--yz-orange); }
.yz-readbar__now { height: 100%; }
.yz-review-table { min-width: 1080px; }
.yz-review-table td { vertical-align: top; padding: 10px 8px; }
.yz-review-table th { padding: 10px 8px; }
.yz-review-table tr.lf-low td { background: rgba(227, 38, 58, .05); }
.yz-review-table tr.lf-off td { opacity: .55; }
.yz-review-table tr.lf-off td:first-child { opacity: 1; }
.yz-review-table tr.imp-error td { background: rgba(179, 38, 30, .08); }
.yz-admin .yz-review-table input:not([type="checkbox"]) { min-height: 40px; border: 1.5px solid var(--yz-line); border-radius: 10px; padding: 0 10px; font: inherit; font-size: 14px;
  background: var(--yz-card); color: var(--yz-text); width: 100%; }
.yz-admin .yz-review-table input[type="checkbox"] { width: 20px; height: 20px; accent-color: var(--yz-red); }
.yz-review-table .lf-name { min-width: 220px; }
.yz-review-table .lf-unit { width: 92px; min-width: 84px; }
.yz-review-table td:nth-child(4) { min-width: 140px; }
.yz-review-table td:nth-child(5) { min-width: 104px; }
.yz-review-table .lf-cat { min-width: 120px; }
.yz-review-table .lf-thumb { width: 56px; height: 56px; object-fit: contain; border-radius: 10px; background: #fff; border: 1px solid var(--yz-line); display: block; }
.yz-pricetag { display: flex; flex-direction: row; align-items: center; gap: 6px; height: 44px; padding: 0 10px; border-radius: 12px; background: var(--yz-red); color: #ffffff;
  box-shadow: 0 6px 14px rgba(227, 38, 58, .22); transform: rotate(-1deg); min-width: 116px; }
.yz-pricetag:focus-within { outline: 3px solid var(--yz-orange); outline-offset: 2px; }
.yz-pricetag__k { display: flex; flex-direction: column; font-size: 10px; font-weight: 800; letter-spacing: .1em; line-height: 1.1; }
.yz-admin .yz-review-table .yz-pricetag input { flex: 1; min-width: 0; width: 100%; border: 0; background: transparent; color: #ffffff; font-family: var(--yz-display); font-weight: 800;
  font-size: 18px; letter-spacing: -.02em; padding: 0; min-height: 0; box-shadow: none; outline: none; }
.yz-decision { background: var(--yz-navy); color: var(--yz-on-navy); padding: 22px 28px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px; align-items: center; }
.yz-admin .yz-decision .yz-seg__btn, .yz-admin .yz-card--navy .yz-seg__btn { color: var(--yz-on-navy); }
.yz-admin .yz-decision .yz-seg__btn:hover, .yz-admin .yz-card--navy .yz-seg__btn:hover { background: rgba(244, 241, 234, .12); color: #fff; }
.yz-admin .yz-decision .yz-seg__btn[aria-pressed="true"], .yz-admin .yz-card--navy .yz-seg__btn[aria-pressed="true"] { background: var(--yz-on-navy); color: var(--yz-navy); }
.yz-decision .yz-small, .yz-decision .yz-help, .yz-decision .yz-sub { color: var(--yz-muted-navy); }
.yz-review-table td:first-child input[type="checkbox"], .yz-review-table th:first-child input[type="checkbox"] { margin: 11px; }
.yz-signoff { display: flex; flex-direction: row; align-items: flex-start; gap: 14px; padding: 14px 16px; border: 1px solid rgba(244, 241, 234, .22); border-radius: 14px; background: rgba(244, 241, 234, .04);
  cursor: pointer; color: var(--yz-on-navy); font-weight: 600; }
.yz-admin .yz-signoff input { width: 22px; height: 22px; margin: 1px 0 0; flex: none; accent-color: var(--yz-orange); }
.yz-signoff:has(input:checked) { border-color: var(--yz-orange); background: rgba(253, 124, 55, .1); }
.yz-legacy-cards .catalog-admin-grid { margin-top: 0; }
.yz-product-card { padding: 18px; display: flex; flex-direction: column; gap: 10px; }
.yz-product-card h3 { margin: 0; font-size: 16px; font-weight: 800; line-height: 1.3; }
.yz-admin .yz-product-card label:not(.yz-check) { display: flex; flex-direction: column; gap: 4px; font-size: 12px; font-weight: 700; color: var(--yz-muted); }
.yz-admin .yz-product-card label.inline-check { flex-direction: row; align-items: center; gap: 8px; min-height: 44px; font-size: 13px; color: var(--yz-text); }
.yz-admin .yz-product-card label.inline-check input { width: 20px; height: 20px; margin: 0; flex: none; }
.yz-admin .yz-product-card input:not([type="checkbox"]), .yz-admin .yz-product-card select { min-height: 44px; border: 1.5px solid var(--yz-line); border-radius: 10px; padding: 0 10px;
  font: inherit; font-size: 14px; background: var(--yz-card); color: var(--yz-text); }
.yz-switches-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
.yz-switches-list li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 14px; border-radius: 14px; background: var(--yz-paper);
  border: 1px solid var(--yz-line); }

/* ================= legacy staff pages: same palette, type and shapes ================= */
/* :where() keeps these at element specificity, so every component rule above still wins */
:where(.yz-admin .yz-page) h1:where(:not([class])) { font-family: var(--yz-display); font-size: 32px; font-weight: 800; letter-spacing: -.02em; line-height: 1.1; margin: 4px 0 16px; color: var(--yz-text); }
:where(.yz-admin .yz-page .card-head) h1 { margin: 0; }
:where(.yz-admin .yz-page) h2:where(:not([class])) { font-family: var(--yz-display); font-size: 18px; font-weight: 800; letter-spacing: -.01em; color: var(--yz-text); }
.yz-admin .card { background: var(--yz-card); border: 1px solid var(--yz-line); border-radius: 18px; padding: 18px 20px; box-shadow: var(--yz-shadow); margin-bottom: 20px; }
.yz-admin .card-head { margin-bottom: 14px; }
/* a wide legacy table scrolls inside its card at every width: the sidebar leaves less room than the old full-width layout */
.yz-admin .yz-page .card:has(> .tbl, > table) { overflow-x: auto; }
.yz-admin .grid-2, .yz-admin .grid-3 { gap: 20px; }
.yz-admin .btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; min-width: 44px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--yz-line);
  background: var(--yz-card); color: var(--yz-text); font-family: var(--yz-body); font-weight: 800; font-size: 14px; text-decoration: none; cursor: pointer; vertical-align: middle; }
.yz-admin .btn:hover { border-color: var(--yz-text); color: var(--yz-text); }
.yz-admin .btn-primary { background: var(--yz-red); border-color: var(--yz-red); color: #ffffff; }
.yz-admin .btn-primary:hover { background: var(--yz-red-dk); border-color: var(--yz-red-dk); color: #ffffff; }
.yz-admin .btn-ghost { border-color: transparent; background: transparent; color: var(--yz-muted); min-height: 44px; padding: 0 10px; }
.yz-admin .btn-ghost:hover { color: var(--yz-red-ink); border-color: transparent; }
.yz-admin .btn:disabled { opacity: .55; cursor: not-allowed; }
.yz-admin .pill { background: var(--yz-red-bg); color: var(--yz-red-ink); border-radius: 999px; font-size: 12px; font-weight: 800; padding: 3px 10px; }
:root[data-theme="dark"] .yz-admin .pill { color: #ff9aa4; }
.yz-admin .pill-ok { background: var(--yz-ok-bg); color: var(--yz-ok); }
.yz-admin .pill-warn { background: var(--yz-warn-bg); color: var(--yz-warn-fg); }
.yz-admin .chip { border-radius: 999px; min-height: 44px; display: inline-flex; align-items: center; padding: 0 14px; font-weight: 700; font-size: 13px; border: 1px solid var(--yz-line); }
.yz-admin .chip-on { background: var(--yz-navy); border-color: var(--yz-navy); color: var(--yz-on-navy); }
.yz-admin .tbl th { font-size: 12px; font-weight: 800; letter-spacing: .06em; color: var(--yz-muted); border-bottom: 1px solid var(--yz-line); background: var(--yz-paper); padding: 9px 10px; }
.yz-admin .tbl td { border-bottom: 1px solid var(--yz-sunk-2); padding: 9px 10px; }
.yz-admin .tbl tbody tr:hover { background: var(--yz-hover); }
.yz-admin .total-row td { border-top: 2px solid var(--yz-text); }
.yz-admin .kpi { border-radius: 14px; border: 1px solid var(--yz-line); border-left: 4px solid var(--yz-red); background: var(--yz-card); }
.yz-admin .kpi-num { font-family: var(--yz-display); font-weight: 800; letter-spacing: -.02em; }
.yz-admin .kpi-warn { border-left-color: var(--yz-warn); }
.yz-admin .flash { border-radius: 14px; font-weight: 700; background: var(--yz-sunk); color: var(--yz-text); }
.yz-admin .flash-error { background: var(--yz-red-bg); color: var(--yz-red-ink); }
:root[data-theme="dark"] .yz-admin .flash-error { color: #ff9aa4; }
.yz-admin .flash-ok { background: var(--yz-ok-bg); color: var(--yz-ok); }
.yz-admin .muted { color: var(--yz-muted); }
:where(.yz-admin) label { color: var(--yz-muted); font-weight: 700; }
:where(.yz-admin) :where(input, select, textarea) { font-family: var(--yz-body); border-radius: 10px; border-color: var(--yz-line); background: var(--yz-card); color: var(--yz-text); }
:where(.yz-admin) :where(input:not([type="checkbox"], [type="radio"], [type="file"], [type="range"], [type="hidden"]), select) { min-height: 44px; }
:where(.yz-admin) :is(input, select, textarea):focus { outline: none; border-color: var(--yz-navy); box-shadow: 0 0 0 3px rgba(253, 124, 55, .35); }
:where(.yz-admin) :where(input[type="checkbox"], input[type="radio"]) { accent-color: var(--yz-red); }
.yz-admin .metric { border-radius: 18px; border: 1px solid var(--yz-line); box-shadow: var(--yz-shadow); }
.yz-admin .metric::before { display: none; }
.yz-admin .metric-value { font-family: var(--yz-display); font-weight: 800; letter-spacing: -.02em; font-size: 26px; }
.yz-admin .metric-hero .metric-value { font-size: 34px; }
.yz-admin .metric-label { color: var(--yz-muted); }
.yz-admin .queue { border-radius: 14px; background: var(--yz-paper); }
.yz-admin .queue-hot { border-color: var(--yz-red); box-shadow: none; }
.yz-admin .queue-n { border-radius: 10px; background: var(--yz-red); }
.yz-admin .mono-badge { background: var(--yz-red-bg); color: var(--yz-red-ink); }
.yz-admin .health li span { color: var(--yz-muted); }
.yz-admin .digest-text { border-radius: 14px; background: var(--yz-paper); }
.yz-admin .wa-msg { border-radius: 14px; }
.yz-admin .wa-msg.wa-out { background: var(--yz-warn-bg); }
.yz-admin .nav-badge { background: var(--yz-red); }
.yz-admin code, .yz-admin .access-code { background: var(--yz-red-bg); color: var(--yz-red-ink); }
.yz-admin .add-block summary { color: var(--yz-link); min-height: 44px; display: inline-flex; align-items: center; }
.yz-admin .inline-check { font-weight: 700; color: var(--yz-text); }
.yz-admin .rb-fill { background: var(--yz-red); }
.yz-admin .fn-fill { background: var(--yz-navy); }
:root[data-theme="dark"] .yz-admin .fn-fill { background: var(--yz-muted-navy); }

/* logged out (login, errors before sign-in) */
.yz-bare { min-height: 100vh; }
.yz-bare .container { max-width: 1240px; margin: 0 auto; padding: 32px; }
.yz-admin .login-wrap { padding-top: 10vh; }
.yz-admin .login-card { border-radius: 18px; box-shadow: var(--yz-shadow-navy); background: var(--yz-navy); }
.yz-admin .login-card label { color: var(--yz-muted-navy); }
.yz-admin .login-card input { min-height: 44px; border-radius: 12px; }
.yz-admin .login-card .btn-primary { min-height: 48px; width: 100%; }
.yz-theme-float { position: fixed; top: 14px; right: 16px; z-index: 40; }

/* ================= responsive ================= */
/* The top bar never overflows: the logout button keeps its place (.yz-who does not shrink) and the extras step out
   as the room goes (staff name width, then the "updated" time, then the name, then the market reading). */
@media (max-width: 1500px) {
  .yz-who__txt p { max-width: 120px; }
}
@media (max-width: 1400px) {
  .yz-fx__when, .yz-fx__sep { display: none; }
}
@media (max-width: 1280px) {
  .yz-fx__when, .yz-fx__sep { display: none; }
  .yz-who__txt { display: none; }
}
@media (max-width: 1180px) {
  /* sidebar + top bar on a small laptop: the quote rate stays, the market reading moves to Pricing */
  .yz-fx__m-wrap, .yz-fx__arrow { display: none; }
  .yz-search { min-width: 140px; }
  .yz-grid--4, .yz-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .yz-grid--2, .yz-grid--2-1, .yz-grid--7-5, .yz-grid--5-7, .yz-grid--8-4 { grid-template-columns: minmax(0, 1fr); }
  .yz-jumps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .yz-reader__grid { grid-template-columns: minmax(0, 1fr); }
  .yz-decision { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 1023px) {
  .yz-shell { grid-template-columns: minmax(0, 1fr); }
  .yz-side { position: fixed; inset: 0 auto 0 0; z-index: 60; width: 280px; max-width: 86vw; transform: translateX(-102%); visibility: hidden;
    transition: transform .25s ease, visibility 0s linear .25s; box-shadow: 0 30px 80px rgba(6, 17, 45, .4); }
  .yz-side__in { position: static; height: 100%; max-height: none; }
  .yz-nav-open .yz-side { transform: none; visibility: visible; transition: transform .25s ease; }
  .yz-side__close { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(169, 176, 196, .35); background: transparent;
    color: var(--yz-on-navy); cursor: pointer; }
  .yz-scrim { position: fixed; inset: 0; z-index: 55; background: rgba(6, 17, 45, .5); }
  .yz-nav-open .yz-scrim { display: block; }
  .yz-menu-btn { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px; border: 1px solid var(--yz-line); border-radius: 999px;
    background: var(--yz-card); color: var(--yz-text); font: inherit; font-weight: 800; cursor: pointer; flex: none; }
  .yz-top__in { padding: 10px 20px; gap: 10px; }
  .yz-page { padding: 24px 20px 48px; }
  .yz-fx__m-wrap, .yz-fx__arrow { display: none; }
}
@media (max-width: 900px) {
  .yz-top__in { flex-wrap: wrap; }
  .yz-search { order: 5; flex: 1 1 100%; max-width: none; }
}
@media (max-width: 760px) {
  .yz-top { position: static; }
  .yz-btn { white-space: normal; text-align: center; }
  .yz-chip--lg { white-space: normal; }
  .yz-rung__card { min-width: 0; }
  .yz-nextbar { padding: 14px 16px; }
  .yz-nextbar > form, .yz-nextbar > button { flex: 1 1 100%; }
  .yz-nextbar .yz-btn { width: 100%; }
  .yz-band { gap: 6px; }
  .yz-kpis { grid-template-columns: minmax(0, 1fr); }
  .yz-top__in { flex-wrap: wrap; }
  .yz-search { order: 5; flex: 1 1 100%; max-width: none; }
  .yz-top__right { gap: 8px; }
  .yz-fx { padding: 4px 4px 4px 12px; gap: 8px; min-height: 48px; }
  .yz-fx__off { display: none; }
  .yz-fx__btn { padding: 0 12px; min-width: 44px; justify-content: center; }
  .yz-fx__btn-txt { display: none; }
  .yz-admin .yz-h1 { font-size: 30px; }
  .yz-admin .yz-h2 { font-size: 24px; }
  .yz-grid--4, .yz-grid--3, .yz-tiles, .yz-jumps { grid-template-columns: minmax(0, 1fr); }
  .yz-admin .yz-funnel a { grid-template-columns: minmax(0, 1fr) 70px 28px; }
  .yz-funnel__v { display: none; }
  .yz-log li { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .yz-statbar > div { padding: 0 16px; }
  .yz-catgrid { grid-template-columns: minmax(0, 1fr); }
  .yz-cat__top { flex-direction: column; }
  .yz-oline { grid-template-columns: 44px minmax(0, 1fr); }
  .yz-oline .yz-sticker, .yz-oline__total { grid-column: 2; justify-self: start; }
  .yz-ohero__route { display: none; }
  .yz-steps ol { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .yz-leaflet__top { grid-template-columns: minmax(0, 1fr) 104px; }
  .yz-ratecard { padding: 20px; }
  .yz-ratesticker { width: 160px; }
  .yz-ratesticker__v { font-size: 64px; }
  .yz-page { padding: 20px 16px 40px; }
  .yz-top__in { padding: 10px 16px; }
}
@media (max-width: 480px) {
  .yz-theme { display: none; }
  .yz-avatar { display: none; }
  .yz-menu-btn { width: 44px; padding: 0; justify-content: center; }
  .yz-menu-txt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
  .yz-top__right { gap: 6px; }
}

/* products list filtered to one catalogue ("Edit N items"): the hidden cards stay out of the grid */
.yz-admin [data-catalogue][hidden], .yz-admin .yz-note[hidden] { display: none !important; }

/* Quotes lane (orders board): requests the team prices before the customer can pay */
.yz-quotes { display: flex; flex-direction: column; gap: 12px; padding: 16px; border-radius: 18px; background: var(--yz-card); border: 1px solid var(--yz-line);
  box-shadow: var(--yz-shadow); }
.yz-quotes__head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px 16px; flex-wrap: wrap; }
.yz-quotes__cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px; list-style: none; margin: 0; padding: 0; }