/* ==========================================================================
   ReloadX — Centralized Theme (shadcn-style tokens + utilities) · DARK ONLY
   Core colors (fixed):  primary #7CCF00 · card #171717 · primary-text #35530E
   Everything below is built to match that reference. Tokens are space-separated
   RGB channels so you can do rgb(var(--x)) and rgb(var(--x) / .5) for opacity.
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Roboto:wght@500;700;900&display=swap');

:root{
  /* ---- surfaces ---- */
  --background:        10 10 10;     /* #0A0A0A app background        */
  --foreground:        250 250 250;  /* #FAFAFA primary text          */
  --card:              23 23 23;     /* #171717 card surface (given)  */
  --card-foreground:   245 245 245;  /* text on cards                 */
  --popover:           28 28 28;     /* #1C1C1C menus/dropdowns        */
  --popover-foreground:245 245 245;
  --elevated:          32 32 32;     /* #202020 inset/nested surface  */

  /* ---- brand ---- */
  --primary:           124 207 0;    /* #7CCF00 lime (given)          */
  --primary-foreground:53 83 14;     /* #35530E text on lime (given)  */
  --primary-hover:     139 224 12;   /* slightly brighter lime        */

  /* ---- neutral roles ---- */
  --secondary:         38 38 38;     /* #262626                        */
  --secondary-foreground:245 245 245;
  --muted:             38 38 38;     /* #262626                        */
  --muted-foreground:  161 161 161;  /* #A1A1A1 secondary text         */
  --accent:            32 44 15;     /* #202C0F dark-lime tint (hover) */
  --accent-foreground: 124 207 0;

  /* ---- feedback ---- */
  --success:           124 207 0;    /* reuse lime                     */
  --warning:           245 176 43;   /* #F5B02B amber (pending)        */
  --destructive:       239 68 68;    /* #EF4444 red                    */
  --destructive-foreground:250 250 250;

  /* ---- lines & fields ---- */
  --border:            38 38 38;     /* #262626 subtle border          */
  --border-strong:     55 55 55;
  --input:             34 34 34;     /* field background               */
  --ring:              124 207 0;    /* focus ring = lime              */

  /* ---- charts (reference offers indigo etc.) ---- */
  --chart-1:           124 207 0;    /* lime   */
  --chart-2:           99 102 241;   /* indigo #6366F1 */
  --chart-3:           245 176 43;   /* amber  */
  --chart-4:           34 211 238;   /* cyan   */
  --chart-5:           244 63 94;    /* rose   */

  /* ---- shape & type ---- */
  --radius: 14px;
  --radius-sm: 9px;
  --radius-lg: 20px;
  --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --font-head: 'Inter', var(--font-sans);
  --shadow-sm: 0 1px 2px rgb(0 0 0 / .4);
  --shadow: 0 8px 30px rgb(0 0 0 / .45);
  --shadow-lg: 0 24px 60px rgb(0 0 0 / .55);
}

/* ---------- reset / base ---------- */
*{box-sizing:border-box}
.rx, .rx *{margin:0}
.rx{
  font-family:var(--font-sans);
  background:rgb(var(--background));
  color:rgb(var(--foreground));
  -webkit-font-smoothing:antialiased;
  line-height:1.5;
}
.rx a{color:inherit;text-decoration:none}

/* ==========================================================================
   UTILITY CLASSES  (shadcn-flavored, vanilla)
   ========================================================================== */

/* --- color: background --- */
.bg-background{background:rgb(var(--background))}
.bg-card{background:rgb(var(--card))}
.bg-popover{background:rgb(var(--popover))}
.bg-elevated{background:rgb(var(--elevated))}
.bg-primary{background:rgb(var(--primary))}
.bg-secondary{background:rgb(var(--secondary))}
.bg-muted{background:rgb(var(--muted))}
.bg-accent{background:rgb(var(--accent))}
.bg-destructive{background:rgb(var(--destructive))}

/* --- color: text --- */
.text-foreground{color:rgb(var(--foreground))}
.text-muted{color:rgb(var(--muted-foreground))}
.text-primary{color:rgb(var(--primary))}
.text-primary-fg{color:rgb(var(--primary-foreground))}
.text-destructive{color:rgb(var(--destructive))}
.text-warning{color:rgb(var(--warning))}
.text-success{color:rgb(var(--success))}

/* --- borders / radius --- */
.border{border:1px solid rgb(var(--border))}
.border-strong{border:1px solid rgb(var(--border-strong))}
.rounded{border-radius:var(--radius)}
.rounded-sm{border-radius:var(--radius-sm)}
.rounded-lg{border-radius:var(--radius-lg)}
.rounded-full{border-radius:999px}

/* --- typography scale --- */
.h1{font-family:var(--font-head);font-weight:800;font-size:clamp(28px,4vw,42px);line-height:1.1;letter-spacing:-.02em}
.h2{font-family:var(--font-head);font-weight:700;font-size:clamp(22px,3vw,30px);line-height:1.15;letter-spacing:-.01em}
.h3{font-family:var(--font-head);font-weight:600;font-size:20px;line-height:1.25}
.h4{font-family:var(--font-head);font-weight:600;font-size:16px}
.stat{font-family:var(--font-head);font-weight:800;font-size:clamp(30px,4vw,46px);letter-spacing:-.02em;line-height:1}
.lead{font-size:16px;color:rgb(var(--muted-foreground))}
.text-sm{font-size:13px}
.text-xs{font-size:11.5px}
.muted{color:rgb(var(--muted-foreground))}
.label{display:block;font-size:13px;font-weight:500;color:rgb(var(--muted-foreground));margin-bottom:7px}
.eyebrow{font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:rgb(var(--muted-foreground))}

/* --- card --- */
.card{background:rgb(var(--card));border:1px solid rgb(var(--border));border-radius:var(--radius-lg);padding:22px}
.card-hover{transition:.2s}
.card-hover:hover{border-color:rgb(var(--border-strong));transform:translateY(-3px);box-shadow:var(--shadow)}
.card-title{font-family:var(--font-head);font-weight:600;font-size:18px}
.card-desc{color:rgb(var(--muted-foreground));font-size:13.5px;margin-top:3px}

/* --- buttons --- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;cursor:pointer;border:none;
  font-family:var(--font-sans);font-weight:600;font-size:14px;padding:11px 18px;border-radius:10px;transition:.18s;white-space:nowrap}
.btn:disabled{opacity:.5;cursor:not-allowed}
.btn-primary{background:rgb(var(--primary));color:rgb(var(--primary-foreground))}
.btn-primary:hover:not(:disabled){background:rgb(var(--primary-hover));box-shadow:0 8px 22px rgb(var(--primary) / .28)}
.btn-secondary{background:rgb(var(--secondary));color:rgb(var(--secondary-foreground))}
.btn-secondary:hover:not(:disabled){background:rgb(var(--elevated))}
.btn-outline{background:transparent;color:rgb(var(--foreground));border:1px solid rgb(var(--border-strong))}
.btn-outline:hover:not(:disabled){background:rgb(var(--accent));border-color:rgb(var(--primary) / .5)}
.btn-ghost{background:transparent;color:rgb(var(--muted-foreground))}
.btn-ghost:hover:not(:disabled){background:rgb(var(--secondary));color:rgb(var(--foreground))}
.btn-destructive{background:rgb(var(--destructive));color:rgb(var(--destructive-foreground))}
.btn-block{width:100%}
.btn-lg{padding:14px 26px;font-size:15px}
.btn-sm{padding:8px 13px;font-size:13px}
.btn-pill{border-radius:999px}

/* --- inputs --- */
.input,.textarea,.select{width:100%;background:rgb(var(--input));border:1px solid rgb(var(--border));
  border-radius:10px;padding:11px 13px;color:rgb(var(--foreground));font-family:var(--font-sans);font-size:14px;outline:none;transition:.15s}
.input::placeholder,.textarea::placeholder{color:rgb(var(--muted-foreground) / .8)}
.input:focus,.textarea:focus,.select:focus{border-color:rgb(var(--ring));box-shadow:0 0 0 3px rgb(var(--ring) / .18)}
.textarea{resize:vertical;min-height:96px}
.select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,rgb(var(--muted-foreground)) 50%),linear-gradient(135deg,rgb(var(--muted-foreground)) 50%,transparent 50%);
  background-position:calc(100% - 18px) center,calc(100% - 13px) center;background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:38px}

/* --- badge / chip --- */
.badge{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:600;padding:4px 10px;border-radius:999px;letter-spacing:.02em}
.badge-primary{background:rgb(var(--primary) / .16);color:rgb(var(--primary))}
.badge-muted{background:rgb(var(--secondary));color:rgb(var(--muted-foreground))}
.badge-warning{background:rgb(var(--warning) / .16);color:rgb(var(--warning))}
.badge-success{background:rgb(var(--success) / .16);color:rgb(var(--success))}
.badge-destructive{background:rgb(var(--destructive) / .16);color:rgb(var(--destructive))}
.badge-dot::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}

/* --- progress --- */
.progress{height:8px;border-radius:999px;background:rgb(var(--secondary));overflow:hidden}
.progress > span{display:block;height:100%;border-radius:999px;background:rgb(var(--primary))}

/* --- range slider --- */
.slider{-webkit-appearance:none;width:100%;height:6px;border-radius:999px;background:rgb(var(--secondary));outline:none}
.slider::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;border-radius:50%;background:#fff;cursor:pointer;box-shadow:0 0 0 4px rgb(var(--primary) / .35)}
.slider::-moz-range-thumb{width:18px;height:18px;border:none;border-radius:50%;background:#fff;cursor:pointer}

/* --- switch --- */
.switch{position:relative;width:42px;height:24px;border-radius:999px;background:rgb(var(--secondary));cursor:pointer;transition:.2s;display:inline-block}
.switch::after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#fff;transition:.2s}
.switch[aria-checked="true"]{background:rgb(var(--primary))}
.switch[aria-checked="true"]::after{transform:translateX(18px)}

/* --- separator / misc --- */
.separator{height:1px;background:rgb(var(--border));border:none}
.link{color:rgb(var(--primary));font-weight:500}
.link:hover{text-decoration:underline}
.icon-box{width:40px;height:40px;border-radius:11px;display:grid;place-items:center;background:rgb(var(--secondary));color:rgb(var(--muted-foreground));flex:none}

/* --- layout helpers --- */
.container{max-width:1240px;margin:0 auto;padding:0 22px}
.stack{display:flex;flex-direction:column}
.row{display:flex;align-items:center}
.between{display:flex;align-items:center;justify-content:space-between}
.grid{display:grid}
.gap-2{gap:8px}.gap-3{gap:12px}.gap-4{gap:16px}.gap-6{gap:24px}
.mt-2{margin-top:8px}.mt-3{margin-top:12px}.mt-4{margin-top:16px}.mt-6{margin-top:24px}
.focus-ring:focus-visible{outline:none;box-shadow:0 0 0 3px rgb(var(--ring) / .4)}

/* ===== SHARED HEADER (dashboard-common.js buildHeader) — global ===== */
/* the header element only positions; the visual "bar" is .rx-barwrap so the
   floating nav pill below it sits on the page background, clearly separate */
.rx-header{position:sticky;top:0;z-index:50;background:transparent}
/* barwrap must stack above the nav pill: its backdrop-filter traps the user
   menu's z-index inside it, and the pill (later in the DOM) would paint on top */
.rx-barwrap{background:rgb(var(--card) / .88);backdrop-filter:blur(12px);border-bottom:1px solid rgb(var(--border));position:relative;z-index:2}
.rx-bar{max-width:1240px;margin:0 auto;padding:0 22px;height:62px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.rx-logo{display:flex;align-items:center;gap:9px;font-family:var(--font-head);font-weight:800;font-size:20px;letter-spacing:-.01em;color:rgb(var(--foreground))}
.rx-logo .mark{width:34px;height:34px;border-radius:9px;display:grid;place-items:center;background:rgb(var(--primary) / .15);border:1px solid rgb(var(--primary) / .35)}
.rx-logo .mark svg{width:20px;height:20px}
.rx-logo b{color:rgb(var(--primary))}
.rx-right{display:flex;align-items:center;gap:12px}
.rx-balance{display:flex;align-items:center;gap:8px;padding:8px 13px;border:1px solid rgb(var(--border));border-radius:10px;background:rgb(var(--background));font-weight:700;font-size:14px;color:rgb(var(--foreground))}
.rx-balance .tok{width:21px;height:21px;border-radius:50%;background:rgb(var(--primary));color:rgb(var(--primary-foreground));display:grid;place-items:center;font-size:12px;font-weight:800}
.rx-userpill{position:relative}
.rx-avatar{width:42px;height:42px;border-radius:10px;border:1px solid rgb(var(--border));background:rgb(var(--secondary));color:rgb(var(--muted-foreground));display:grid;place-items:center;cursor:pointer;font-size:17px;overflow:hidden;padding:0}
.rx-avatar img{width:100%;height:100%;object-fit:cover}
.rx-avatar:hover{border-color:rgb(var(--primary));color:rgb(var(--foreground))}
.rx-menu{position:absolute;right:0;top:52px;min-width:206px;background:rgb(var(--popover));border:1px solid rgb(var(--border));border-radius:12px;padding:6px;display:none;box-shadow:var(--shadow-lg);z-index:60}
.rx-menu.show{display:block}
.rx-menu a{display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:8px;font-size:14px;color:rgb(var(--foreground))}
.rx-menu a svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none;opacity:.75}
.rx-menu a:hover svg{opacity:1}
.rx-menu a.danger svg{opacity:.9}
/* password show/hide toggle icon */
.toggle-pass svg{width:18px;height:18px;stroke:rgb(var(--muted-foreground));fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;display:block;transition:stroke .15s}
.toggle-pass:hover svg{stroke:rgb(var(--foreground))}
.rx-menu a:hover{background:rgb(var(--secondary))}
.rx-menu a.danger{color:rgb(var(--destructive))}
.rx-menu .mdiv{height:1px;background:rgb(var(--border));margin:6px 4px}
.rx-dev{margin-left:auto;font-size:9px;font-weight:700;background:rgb(var(--secondary));color:rgb(var(--muted-foreground));padding:2px 7px;border-radius:6px;letter-spacing:.4px}
/* floating centered nav pill, visually detached from the top bar (the sticky
   .rx-header wrapper carries both, so they scroll together).
   margin:auto on the pill (not justify-content:center) so that when items
   overflow on small screens the row scrolls instead of clipping the start. */
.rx-navrow{background:transparent;border-bottom:0;overflow-x:auto;display:flex;
  padding:14px 14px 4px}
.rx-nav{margin:0 auto;padding:6px;display:inline-flex;gap:4px;min-height:0;align-items:center;flex-wrap:nowrap;
  background:rgb(var(--card) / .92);backdrop-filter:blur(12px);border:1px solid rgb(var(--border));
  border-radius:999px;box-shadow:0 12px 32px rgb(0 0 0 / .38)}
.rx-nav .rx-navi{border-radius:999px}
.rx-navi{display:flex;align-items:center;gap:8px;padding:9px 15px;border-radius:9px;color:rgb(var(--muted-foreground));font-size:14px;font-weight:500;white-space:nowrap;cursor:pointer;transition:.15s}
.rx-navi svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.rx-navi:hover{color:rgb(var(--foreground));background:rgb(var(--secondary))}
.rx-navi.active{color:rgb(var(--primary-foreground));background:rgb(var(--primary));font-weight:600}
.rx-logo-img{height:46px;width:auto;display:block}

/* make the page a full-height column so the footer sits at the bottom
   even when the content is short (no big empty gap above it) */
body.rx{min-height:100vh;display:flex;flex-direction:column;padding-bottom:0}
/* the main content wrapper grows to push the footer to the bottom; width:100%
   so the flex column fills to its max-width (1240) and centers — without it the
   wrapper's auto side margins collapse it to content width, leaving big gaps */
body.rx > .container,
body.rx > .w-wrap{flex:1 0 auto;width:100%;padding-bottom:40px}

/* shared footer — injected by dashboard-common.js on every logged-in page */
.rx-footer{flex-shrink:0;margin-top:auto;border-top:1px solid rgb(var(--border));padding:18px 0;color:rgb(var(--muted-foreground));font-size:13px}
.rx-footer .rx-footer-in{max-width:1240px;margin:0 auto;padding:0 20px;display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;align-items:center}
.rx-footer a{margin-right:16px;color:inherit}
.rx-footer a:last-child{margin-right:0}
.rx-footer a:hover{color:rgb(var(--primary))}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

/* Never let a stray wide child (table, long token) scroll the whole page.
   `clip`, not `hidden`: hidden would make <body> a scroll container and break the
   position:sticky header on every logged-in page. Older browsers ignore clip and
   just behave as they do today. */
html,body.rx{max-width:100%;overflow-x:clip}
img,video,svg{max-width:100%}

/* wrap any table in <div class="table-scroll"> so it scrolls itself instead of
   pushing the page sideways on a phone */
.table-scroll{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
.table-scroll > table{min-width:560px}

/* the horizontally-scrolling nav pill: hide the scrollbar, keep the swipe */
.rx-navrow{scrollbar-width:none;-ms-overflow-style:none}
.rx-navrow::-webkit-scrollbar{display:none}
/* fade the trailing edge only while there is more nav to scroll to (class set in
   dashboard-common.js) — a static fade would dim the last item even at the end */
.rx-navrow.can-scroll{-webkit-mask-image:linear-gradient(90deg,#000 86%,transparent);
  mask-image:linear-gradient(90deg,#000 86%,transparent)}

/* iOS Safari zooms the whole page when you focus a field whose text is under 16px,
   and never zooms back out. 16px is the exact threshold, so fields are bumped to it
   on touch-sized screens. This is the accessible fix — putting maximum-scale=1 in the
   viewport meta would also stop the zoom but would block pinch-zoom entirely.
   !important because several pages set 14px from their own inline <style>, which
   would otherwise win on source order at equal specificity. */
@media(max-width:900px){
  body.rx input:not([type="checkbox"]):not([type="radio"]),
  body.rx select,body.rx textarea{font-size:16px !important}
}

/* ---- auth pages (login / signup / verify / reset / forgot-password) ----
   Scoped as body.rx .auth-* so these beat the pages' own inline <style> rules,
   which are otherwise later in the cascade at equal specificity. */
/* 100dvh, not 100vh: iOS Safari reports the *expanded* viewport for vh, which made
   these pages ~90px taller than the screen and always scroll */
body.rx .auth-wrap{min-height:100dvh}
@media(max-width:640px){
  body.rx .auth-wrap{padding:16px}
  body.rx .auth-card{padding:22px 18px}   /* was 24 + 32 = 56px of gutter on a 375px screen */
}
@media(max-width:380px){
  body.rx .auth-wrap{padding:12px}
  body.rx .auth-card{padding:20px 15px}
}

/* tablets */
@media(max-width:900px){
  .container{padding:0 18px}
  .h1{font-size:clamp(26px,5vw,34px)}
}

/* small screens: tighter topbar, smaller balance pill, comfy scrollable nav */
@media(max-width:640px){
  .rx-bar{padding:0 14px;height:56px;gap:10px}
  .rx-logo-img{height:38px}
  .rx-balance{padding:6px 10px;font-size:13px}
  .rx-avatar{width:36px;height:36px}
  .rx-navrow{padding:8px 10px}
  .rx-nav{padding:5px}
  .rx-navi{padding:8px 11px;font-size:13px}

  /* reclaim the 22px gutters — on a 375px phone that was 12% of the screen */
  .container,body.rx > .w-wrap{padding-left:16px;padding-right:16px}
  .card{padding:18px}
  .btn-lg{padding:12px 20px;font-size:14.5px}
  .btn{padding:10px 16px}
  /* the user dropdown is ~370px tall — cap it so "Logout" is never off-screen */
  .rx-menu{max-height:calc(100dvh - 120px);overflow-y:auto;min-width:190px}
  .rx-footer{padding:16px 0}
  .rx-footer .rx-footer-in{padding:0 16px;justify-content:center;text-align:center;gap:8px}
  .table-scroll > table{min-width:520px}
}

/* very small phones (iPhone SE, 320–380px) */
@media(max-width:380px){
  .container,body.rx > .w-wrap{padding-left:13px;padding-right:13px}
  .card{padding:15px}
  .rx-bar{padding:0 11px;gap:8px}
  .rx-logo-img{height:34px}
  .rx-balance{padding:5px 9px;font-size:12.5px}
  .rx-navi{padding:7px 10px;font-size:12.5px}
}

/* ---- Catalog dropdown in the nav ---------------------------------------- */
/* Anchors the panel to the Catalog button. The nav row scrolls horizontally on
   phones, so the panel is positioned relative to the button rather than the row. */
.rx-catwrap{position:relative;display:inline-flex}
/* The sibling nav items are <a>, and `.rx a{color:inherit}` (specificity 0,1,1) beats
   `.rx-navi`'s muted colour (0,1,0) — so they render at full --foreground. A <button>
   isn't matched by that rule and would stay muted, reading as greyed-out next to them.
   Inherit here too so Catalog sits at the same weight as Wallet, Home and the rest. */
/* Only neutralise the button defaults — size, weight and padding stay with `.rx-navi`
   so the responsive rules below still shrink it in step with its siblings. */
.rx-catwrap .rx-navi{border:0;background:transparent;font-family:inherit;color:inherit;
  -webkit-font-smoothing:inherit}
/* Re-assert the active pill: the `background:transparent` above sits at the same
   specificity as `.rx-navi.active` but later in the file, so it would strip the green
   pill and leave dark --primary-foreground text on the dark page. */
.rx-catwrap .rx-navi.active{background:rgb(var(--primary));color:rgb(var(--primary-foreground));font-weight:600}
.rx-catwrap .rx-navi:hover:not(.active){background:rgb(var(--secondary))}
.rx-caret{width:15px!important;height:15px!important;opacity:.7;margin-left:-2px}
.rx-catmenu{left:0;right:auto;top:46px;min-width:232px}
.rx-catmenu a.on{background:rgb(var(--secondary));font-weight:600}
/* The panel is moved onto <body> by buildHeader and positioned from JS. It has to leave
   the nav: .rx-nav uses backdrop-filter, which makes it the containing block for
   position:fixed children, so a panel inside it sized against the nav's scroll width
   (wider than the screen) rather than the viewport. The nav row also clips overflow. */
.rx-catmenu{position:fixed;top:0;left:0;right:auto;z-index:70;
  min-width:232px;max-width:calc(100vw - 20px)}
@media (max-width:640px){
  /* near-full-width sheet; scrolls internally if the list outgrows the screen */
  .rx-catmenu{min-width:0;width:calc(100vw - 20px);
    max-height:calc(100dvh - 150px);overflow-y:auto;-webkit-overflow-scrolling:touch}
}

/* game/gift cover images render as lazy <img> overlaying the tile's text placeholder */
.gcard .cover{position:relative;overflow:hidden}
.gcard .cover .gcover{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}

/* centred brand mark (local logo assets), as opposed to full-bleed .gcover art */
.gcard .cover .glogo{position:absolute;inset:0;margin:auto;max-width:64%;max-height:64%;object-fit:contain;
  filter:drop-shadow(0 3px 8px rgba(0,0,0,.45))}

/* ==========================================================================
   TOASTS + ORDER DIALOG  (replace window.alert across the app)
   ========================================================================== */
.rx-toasts{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);z-index:200;
  display:flex;flex-direction:column;gap:10px;width:min(420px,calc(100vw - 24px));pointer-events:none}
.rx-toast{display:flex;align-items:flex-start;gap:11px;padding:13px 15px;border-radius:13px;
  background:rgb(var(--popover));border:1px solid rgb(var(--border-strong));box-shadow:var(--shadow-lg);
  font-size:14px;line-height:1.45;color:rgb(var(--foreground));pointer-events:auto;
  opacity:0;transform:translateY(10px);transition:opacity .22s,transform .22s}
.rx-toast.in{opacity:1;transform:translateY(0)}
.rx-toast .ic{flex:none;width:20px;height:20px;border-radius:50%;display:grid;place-items:center;
  font-size:12px;font-weight:800;margin-top:1px}
.rx-toast.ok    .ic{background:rgb(var(--primary));color:rgb(var(--primary-foreground))}
.rx-toast.warn  .ic{background:rgb(var(--warning));color:#3a2600}
.rx-toast.error .ic{background:rgb(var(--destructive));color:#fff}
.rx-toast.info  .ic{background:rgb(var(--secondary));color:rgb(var(--foreground))}
.rx-toast b{display:block;font-weight:600;margin-bottom:2px}
.rx-toast small{color:rgb(var(--muted-foreground));font-size:12.5px;display:block}
.rx-toast .x{margin-left:auto;background:none;border:0;color:rgb(var(--muted-foreground));
  cursor:pointer;font-size:16px;line-height:1;padding:0 2px}

/* ---- order progress dialog ---- */
.rx-ov{position:fixed;inset:0;z-index:210;background:rgb(0 0 0 / .62);backdrop-filter:blur(3px);
  display:grid;place-items:center;padding:18px;opacity:0;transition:opacity .2s}
.rx-ov.in{opacity:1}
.rx-dlg{width:min(430px,100%);background:rgb(var(--card));border:1px solid rgb(var(--border-strong));
  border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);padding:22px;
  transform:translateY(12px) scale(.985);transition:transform .22s}
.rx-ov.in .rx-dlg{transform:none}
.rx-dlg h4{font-family:var(--font-head);font-weight:700;font-size:17px;margin-bottom:3px}
.rx-dlg .sub{color:rgb(var(--muted-foreground));font-size:13px}
.rx-dlg .bar{height:7px;border-radius:999px;background:rgb(var(--secondary));overflow:hidden;margin:17px 0 10px}
.rx-dlg .bar i{display:block;height:100%;width:12%;border-radius:999px;background:rgb(var(--primary));
  transition:width .45s ease}
/* indeterminate sweep while we wait on the supplier */
.rx-dlg .bar.wait i{width:38%;animation:rxsweep 1.15s ease-in-out infinite}
@keyframes rxsweep{0%{margin-left:-40%}100%{margin-left:100%}}
.rx-dlg .stage{font-size:13.5px;color:rgb(var(--muted-foreground));display:flex;align-items:center;gap:8px}
.rx-dlg .stage b{color:rgb(var(--foreground));font-weight:600}
.rx-dlg .codes{margin-top:14px;background:rgb(var(--elevated));border:1px solid rgb(var(--border));
  border-radius:10px;padding:11px 13px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:13px;word-break:break-all;display:flex;flex-direction:column;gap:6px}
.rx-dlg .codes button{align-self:flex-start;font-size:11.5px}
.rx-dlg .acts{display:flex;gap:9px;margin-top:18px}
.rx-dlg .acts .btn{flex:1}
.rx-dlg.done   .bar i{width:100%}
.rx-dlg.failed .bar i{width:100%;background:rgb(var(--destructive))}
@media(max-width:640px){
  .rx-dlg{padding:18px;border-radius:16px}
  .rx-toasts{bottom:14px}
}

/* percentage readout beside the delivery stage line */
.rx-dlg .stage .pct{margin-left:auto;font-variant-numeric:tabular-nums;font-weight:600;
  color:rgb(var(--muted-foreground))}
.rx-dlg.done .stage .pct{color:rgb(var(--primary))}

/* On a terminal state the note is a sentence, not a short status — let it use the full
   width instead of being squeezed beside the heading. */
.rx-dlg.failed .stage, .rx-dlg.done .stage{display:block}
.rx-dlg.failed .stage b, .rx-dlg.done .stage b{display:block;margin-bottom:4px}
.rx-dlg.failed .stage .s-note, .rx-dlg.done .stage .s-note{display:block;line-height:1.55}
.rx-dlg.failed .stage .pct, .rx-dlg.done .stage .pct{display:none}