/* DroboAI app UI (templates/drobo/app/*): a Magic UI / shadcn style frame with light and dark themes.
   Theme: <html data-theme="light|dark"> is set before first paint (drobo/base.html) and by the toggle (js/drobo-ui.js).
   Magic UI pieces rebuilt in plain CSS: dot pattern, shiny text, border beam, shimmer button, magic card, blur fade.
   Never write `font: … inherit` shorthands: browsers drop the whole declaration. */

/* The page's scrollbar always has its place, so going from a page that scrolls to one that doesn't never shifts it
   sideways (owner, 2026-10-03). Phones' overlay scrollbars take no room either way. */
html { scrollbar-gutter: stable; }

/* ── Tokens ──────────────────────────────────────────────────────────────── */
body.ui-app {
  --ui-bg: #f7f7f8;
  --ui-panel: #ffffff;
  --ui-card: #ffffff;
  --ui-subtle: #fafafa;
  --ui-fg: #09090b;
  --ui-fg-2: #27272a;
  --ui-muted: #71717a;
  --ui-faint: #a1a1aa;
  --ui-border: #e7e7ea;
  --ui-border-strong: #d4d4d8;
  --ui-hover: rgba(9, 9, 11, .045);
  --ui-active: rgba(9, 9, 11, .07);
  --ui-primary: #2563eb;
  --ui-primary-hover: #1d4ed8;
  --ui-primary-fg: #ffffff;
  --ui-primary-soft: rgba(37, 99, 235, .09);
  --ui-violet: #7c3aed;
  --ui-ring: rgba(37, 99, 235, .12);        /* focus halo: faint */
  --ui-focus: rgba(37, 99, 235, .55);       /* focus border / outline: a hairline, never a thick ring */
  --ui-shadow-sm: 0 1px 2px rgba(16, 24, 40, .05);
  --ui-shadow: 0 1px 3px rgba(16, 24, 40, .07), 0 1px 2px rgba(16, 24, 40, .04);
  --ui-shadow-lg: 0 16px 40px -16px rgba(16, 24, 40, .22), 0 2px 6px rgba(16, 24, 40, .05);
  --ui-dot: rgba(9, 9, 11, .13);
  --ui-spot: rgba(37, 99, 235, .07);
  --ui-ok: #16a34a;
  --ui-warn: #d97706;
  --ui-bad: #dc2626;
  --ui-radius: 12px;            /* cards */
  --ui-radius-lg: 14px;         /* panels and dialogs (the inset panel) */
  --ui-radius-md: 10px;         /* rows and tiles inside a card */
  --ui-radius-control: 9px;     /* buttons, inputs, selects */
  --ui-radius-sm: 8px;          /* small chips and icon tiles */
  /* Control sizes: the only three heights a button, field, picker or segmented choice may have (owner, 2026-09-29:
     "consistency on all sizing"). Controls in one row share one height. Never a height of its own: use these. */
  --ui-h-field: 3rem;           /* form fields: text inputs, pickers and selects, choices in a form; a button in their row */
  --ui-h: 2.5rem;               /* buttons, and toolbar controls (search, filters, tabs, sort) */
  --ui-h-sm: 2rem;              /* compact: actions inside a table row or list item, pagination, a card header's toggle */
  --ui-pad-field: .875rem;      /* their side padding, in the same order */
  --ui-pad: 1rem;
  --ui-pad-sm: .75rem;
  --ui-sidebar-w: 16rem;
  --ui-ease: cubic-bezier(.2, .7, .2, 1);
  color-scheme: light;
}
html[data-theme="dark"] body.ui-app {
  --ui-bg: #09090b;
  --ui-panel: #0c0c0e;
  --ui-card: #111113;
  --ui-subtle: #141416;
  --ui-fg: #fafafa;
  --ui-fg-2: #e4e4e7;
  --ui-muted: #a1a1aa;
  --ui-faint: #71717a;
  --ui-border: #202024;
  --ui-border-strong: #2e2e34;
  --ui-hover: rgba(255, 255, 255, .05);
  --ui-active: rgba(255, 255, 255, .08);
  --ui-primary: #3b82f6;
  --ui-primary-hover: #60a5fa;
  --ui-primary-soft: rgba(59, 130, 246, .14);
  --ui-violet: #8b5cf6;
  --ui-ring: rgba(96, 165, 250, .14);
  --ui-focus: rgba(96, 165, 250, .6);
  --ui-shadow-sm: none;
  --ui-shadow: 0 0 0 1px rgba(255, 255, 255, .02);
  --ui-shadow-lg: 0 20px 50px -20px rgba(0, 0, 0, .8);
  --ui-dot: rgba(255, 255, 255, .1);
  --ui-spot: rgba(99, 102, 241, .13);
  --ui-glow: 18%;
  --ui-ok: #22c55e;
  --ui-warn: #f59e0b;
  --ui-bad: #f87171;
  color-scheme: dark;
}

/* ── Base (overrides the marketing site's dark globals on app pages) ────── */
body.ui-app {
  margin: 0;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ui-fg);
  background: var(--ui-bg);
  -webkit-font-smoothing: antialiased;
}
body.ui-app main { padding: 0 !important; margin: 0; min-height: 100vh; }
body.ui-app ::selection { background: var(--ui-primary-soft); color: var(--ui-fg); }
/* One focus style for the whole new theme: a hairline outline, and on fields a thin border plus a faint halo. */
body.ui-app :focus-visible { outline: 1.5px solid var(--ui-focus); outline-offset: 2px; }
body.ui-app .ui-input:focus, body.ui-app .ui-input:focus-visible { outline: none; border-color: var(--ui-focus) !important; box-shadow: 0 0 0 3px var(--ui-ring) !important; }
body.ui-app a { color: inherit; }
body.ui-app [hidden] { display: none !important; }
.ui-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
html:not([data-theme="dark"]) .ui-only-dark, html[data-theme="dark"] .ui-only-light { display: none !important; }

/* ── Frame ───────────────────────────────────────────────────────────────── */
.ui-shell { display: grid; grid-template-columns: var(--ui-sidebar-w) minmax(0, 1fr); min-height: 100vh; transition: grid-template-columns .25s var(--ui-ease); }
.ui-shell[data-collapsed] { --ui-sidebar-w: 3.75rem; }
.ui-inset {
  display: flex; flex-direction: column; min-width: 0; min-height: calc(100vh - 1rem);
  margin: .5rem .5rem .5rem 0; background: var(--ui-panel);
  border: 1px solid var(--ui-border); border-radius: 14px; box-shadow: var(--ui-shadow);
}
.ui-main { width: 100%; max-width: 76rem; margin: 0 auto; padding: 1.75rem 2rem 4rem; box-sizing: border-box; }

/* ── Sidebar ─────────────────────────────────────────────────────────────── */
.ui-sidebar {
  position: sticky; top: 0; z-index: 40; display: flex; flex-direction: column;
  height: 100vh; padding: .5rem .75rem .75rem; box-sizing: border-box; overflow: hidden; background: var(--ui-bg);
}
/* Same height as the top bar, so the logo and the page title row share one line; logo edge = icon edge. */
.ui-sidebar__head { display: flex; align-items: center; justify-content: space-between; height: 3.5rem; flex: 0 0 auto; padding: 0 .35rem 0 .6rem; margin-bottom: .5rem; }
.ui-brand { display: flex; flex: 0 0 auto; align-items: center; gap: .55rem; text-decoration: none; }
/* The logo files cropped to the artwork (images/logo_svg/*_tight.svg), so the height is the logo's own. */
body.ui-app .ui-brand__logo { width: auto; max-width: none; height: 1.9rem; }
body.ui-app .ui-brand__mark { display: none; width: auto; height: 1.75rem; max-width: none; flex: 0 0 auto; }
.ui-sidebar .ui-sidebar__close { display: none; }

.ui-nav { display: flex; flex: 1 1 auto; flex-direction: column; gap: 2px; min-height: 0; overflow-y: auto; scrollbar-width: none; padding: 0 0 .5rem; }
.ui-nav::-webkit-scrollbar { display: none; }
.ui-nav__label-group { margin: 1.35rem .6rem .45rem; font-size: .6875rem; font-weight: 600; letter-spacing: .02em; line-height: 1; color: var(--ui-faint); white-space: nowrap; }
.ui-nav__label-group:first-child { margin-top: .25rem; }
.ui-nav__item {
  position: relative; display: flex; align-items: center; gap: .7rem; min-height: 2.25rem; padding: 0 .6rem;
  font-size: .8125rem; font-weight: 500; color: var(--ui-fg-2); text-decoration: none; white-space: nowrap;
  border-radius: 8px; cursor: pointer; list-style: none; transition: background .15s, color .15s;
}
.ui-nav__item::-webkit-details-marker { display: none; }
.ui-nav__item > .ti:first-child { flex: 0 0 auto; width: 1.1rem; font-size: 1.1rem; color: var(--ui-muted); text-align: center; transition: color .15s; }
.ui-nav__item:hover { background: var(--ui-hover); color: var(--ui-fg); }
.ui-nav__item:hover > .ti:first-child { color: var(--ui-fg); }
.ui-nav__item.is-active { background: var(--ui-card); color: var(--ui-fg); font-weight: 600; box-shadow: var(--ui-shadow-sm), inset 0 0 0 1px var(--ui-border); }
.ui-nav__item.is-active > .ti:first-child, .ui-nav__item.is-current > .ti:first-child { color: var(--ui-primary); }
.ui-nav__item.is-current { color: var(--ui-fg); }
.ui-nav__item.is-muted { cursor: default; color: var(--ui-faint); }
.ui-nav__item.is-muted:hover { background: transparent; color: var(--ui-faint); }
/* Locked until the account pays (Cloud, Software): greyed like AI Agent, still a link to the plans. */
.ui-nav__item[data-locked] { color: var(--ui-faint); }
.ui-nav__item[data-locked]:hover { color: var(--ui-muted); }
.ui-nav__label { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.ui-nav__chev { font-size: .9rem; color: var(--ui-faint); transition: transform .2s var(--ui-ease); }
.ui-nav__group[open] > summary .ui-nav__chev { transform: rotate(90deg); }
.ui-nav__lock { font-size: .85rem; color: var(--ui-faint); }
/* A count beside a row (Support: answers waiting, js/drobo-ui-support.js); a dot on the icon rail. */
.ui-nav__count { display: inline-grid; place-items: center; flex: 0 0 auto; min-width: 1.15rem; height: 1.15rem; padding: 0 .3rem; box-sizing: border-box; font-size: .6875rem; font-weight: 700; line-height: 1; color: #fff; background: var(--ui-primary); border-radius: 999px; font-variant-numeric: tabular-nums; }
.ui-shell[data-collapsed] .ui-nav__count { position: absolute; top: .2rem; right: .2rem; min-width: .55rem; width: .55rem; height: .55rem; padding: 0; font-size: 0; }
.ui-nav__sub { position: relative; display: grid; gap: 2px; margin: 2px 0 .4rem 1.15rem; padding-left: .7rem; border-left: 1px solid var(--ui-border); }
.ui-nav__subitem {
  display: flex; align-items: center; min-height: 2rem; padding: 0 .6rem; font-size: .8125rem; color: var(--ui-muted);
  text-decoration: none; white-space: nowrap; border-radius: 7px; transition: background .15s, color .15s;
}
.ui-nav__subitem:hover { color: var(--ui-fg); background: var(--ui-hover); }
.ui-nav__subitem.is-active { color: var(--ui-fg); font-weight: 600; background: var(--ui-hover); }
.ui-nav__subitem.is-active::before { content: ""; position: absolute; left: -1px; width: 2px; height: 1.1rem; background: var(--ui-primary); border-radius: 2px; }
.ui-badge {
  display: inline-flex; align-items: center; padding: .05rem .4rem; font-size: .625rem; font-style: normal; font-weight: 600;
  letter-spacing: .04em; text-transform: uppercase; color: var(--ui-muted); border: 1px solid var(--ui-border-strong); border-radius: 999px;
}

.ui-sidebar__foot { padding: .25rem .1rem 0; }
.ui-plan { position: relative; display: grid; gap: .4rem; padding: .85rem; background: var(--ui-card); border: 1px solid var(--ui-border); border-radius: var(--ui-radius); box-shadow: var(--ui-shadow-sm); }
.ui-plan__title { margin: 0; font-size: .8125rem; font-weight: 600; color: var(--ui-fg); }
.ui-plan__text { margin: 0 0 .25rem; font-size: .75rem; line-height: 1.5; color: var(--ui-muted); }
.ui-plan--link { grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: .65rem; text-decoration: none; }
.ui-plan--link strong { display: block; font-size: .8125rem; font-weight: 600; }
.ui-plan--link small { display: block; font-size: .75rem; color: var(--ui-muted); }
.ui-plan--link:hover { border-color: var(--ui-border-strong); }
.ui-plan__icon { display: grid; place-items: center; width: 2rem; height: 2rem; font-size: 1.05rem; color: var(--ui-primary); background: var(--ui-primary-soft); border-radius: 9px; }

/* Collapsed: an icon rail. */
.ui-shell[data-collapsed] .ui-brand__logo,
.ui-shell[data-collapsed] .ui-nav__label-group,
.ui-shell[data-collapsed] .ui-nav__label,
.ui-shell[data-collapsed] .ui-nav__chev,
.ui-shell[data-collapsed] .ui-nav__lock,
.ui-shell[data-collapsed] .ui-badge,
.ui-shell[data-collapsed] .ui-nav__sub,
.ui-shell[data-collapsed] .ui-sidebar__foot { display: none; }
html:not([data-theme="dark"]) .ui-shell[data-collapsed] .ui-brand__mark.ui-only-light,
html[data-theme="dark"] .ui-shell[data-collapsed] .ui-brand__mark.ui-only-dark { display: block; }
.ui-shell[data-collapsed] .ui-nav__item { justify-content: center; padding: 0; }
.ui-shell[data-collapsed] .ui-sidebar__head { justify-content: center; padding: 0; }
.ui-shell[data-collapsed] .ui-sidebar { padding-left: .5rem; padding-right: .5rem; }

/* ── Top bar ─────────────────────────────────────────────────────────────── */
.ui-topbar {
  position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: .6rem; height: 3.5rem; padding: 0 .9rem 0 .75rem;
  /* Frosted glass: the page shows through, blurred, as it scrolls under the bar. */
  background: color-mix(in srgb, var(--ui-panel) 58%, transparent); backdrop-filter: blur(18px) saturate(170%); -webkit-backdrop-filter: blur(18px) saturate(170%);
  border-bottom: 1px solid var(--ui-border); border-radius: 14px 14px 0 0;
}
/* ── Announcement (drobo/app/announcement.html): the site's banner, set in Admin ── */
/* Label and text sit in the middle of the bar; the close button keeps the right edge (the same room is left free on
   the left, so the middle of the bar is the middle of the words). */
.ui-announce {
  position: relative; display: flex; align-items: center; justify-content: center; gap: .75rem; padding: .6rem 3rem;
  background: linear-gradient(90deg, color-mix(in srgb, var(--ui-primary) 12%, var(--ui-panel)), color-mix(in srgb, var(--ui-violet, var(--ui-primary)) 10%, var(--ui-panel)));
  border-bottom: 1px solid color-mix(in srgb, var(--ui-primary) 28%, var(--ui-border));
}
.ui-announce__label {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: .35rem; height: 1.5rem; padding: 0 .6rem;
  font-size: .6875rem; font-weight: 650; letter-spacing: .03em; text-transform: uppercase; white-space: nowrap;
  color: var(--ui-primary); background: color-mix(in srgb, var(--ui-primary) 12%, var(--ui-card));
  border: 1px solid color-mix(in srgb, var(--ui-primary) 30%, transparent); border-radius: 999px;
}
.ui-announce__label .ti { font-size: .875rem; }
.ui-announce__text { flex: 0 1 auto; min-width: 0; margin: 0; font-size: .875rem; font-weight: 500; line-height: 1.45; color: var(--ui-fg); white-space: pre-line; overflow-wrap: anywhere; }
body.ui-app .ui-announce__close { position: absolute; top: 50%; right: .6rem; margin-top: calc(var(--ui-h-sm) / -2); color: var(--ui-muted); }
@media (max-width: 640px) {
  .ui-announce { flex-direction: column; gap: .4rem; padding: .65rem 2.75rem; text-align: center; }
  .ui-announce__text { font-size: .8125rem; }
  body.ui-app .ui-announce__close { top: .4rem; right: .4rem; margin-top: 0; }
}

/* A browser without backdrop blur gets the bar nearly solid, so text under it never shows through sharp. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .ui-topbar { background: color-mix(in srgb, var(--ui-panel) 94%, transparent); }
}
.ui-topbar__rule { width: 1px; height: 1.1rem; background: var(--ui-border-strong); }
/* The crumbs give way to the top bar's buttons on a narrow screen: the page's own crumb shortens with "…", never the bar
   running past the screen edge (a 375px phone with "Start for $1" and "Cloud / Fulfillment" did). */
.ui-crumbs { flex: 0 1 auto; min-width: 0; overflow: hidden; }
.ui-crumbs ol { display: flex; align-items: center; gap: .45rem; min-width: 0; margin: 0; padding: 0; list-style: none; font-size: .8125rem; }
.ui-crumbs li { display: flex; align-items: center; gap: .45rem; color: var(--ui-muted); white-space: nowrap; }
.ui-crumbs li:last-child { flex: 0 1 auto; min-width: 0; }
.ui-crumbs li:last-child > * { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 480px) { .ui-crumbs li:not(:last-child) { display: none; } }   /* a phone shows just the page's name */
.ui-crumbs li + li::before { content: "/"; color: var(--ui-faint); }
.ui-crumbs a { color: var(--ui-muted); text-decoration: none; }
.ui-crumbs a:hover { color: var(--ui-fg); }
.ui-crumbs [aria-current="page"] { font-weight: 500; color: var(--ui-fg); }
.ui-topbar__end { display: flex; align-items: center; gap: .4rem; margin-left: auto; }

/* ── Buttons ─────────────────────────────────────────────────────────────── */
/* A bare icon button (top bar, row menus, close): square at the compact height, like the small buttons beside it. */
.ui-icon-btn {
  display: inline-grid; place-items: center; flex: 0 0 auto; width: var(--ui-h-sm); height: var(--ui-h-sm); padding: 0;
  font-size: 1.1rem; color: var(--ui-muted); background: transparent; border: 0; border-radius: var(--ui-radius-sm); cursor: pointer; transition: background .15s, color .15s;
}
.ui-icon-btn:hover, .ui-icon-btn[aria-expanded="true"] { color: var(--ui-fg); background: var(--ui-hover); }
.ui-btn {
  position: relative; isolation: isolate; display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
  height: var(--ui-h); padding: 0 var(--ui-pad); font-family: inherit; font-size: .8125rem; font-weight: 550; line-height: 1; white-space: nowrap;
  color: var(--ui-primary-fg); text-decoration: none; background: var(--ui-primary); border: 1px solid transparent; border-radius: 9px;
  cursor: pointer; transition: background .15s, border-color .15s, color .15s, box-shadow .15s, transform .15s;
}
body.ui-app .ui-btn { color: var(--ui-primary-fg); }
.ui-btn:hover { background: var(--ui-primary-hover); }
.ui-btn:active { transform: translateY(.5px); }
.ui-btn:disabled { opacity: .5; cursor: default; transform: none; }
.ui-btn .ti { font-size: 1rem; }
.ui-btn--sm { height: var(--ui-h-sm); padding: 0 var(--ui-pad-sm); font-size: .8125rem; border-radius: 8px; }
.ui-btn--field { height: var(--ui-h-field); padding: 0 var(--ui-pad); font-size: .875rem; }      /* beside form fields, as tall as they are */
.ui-btn--block { width: 100%; }
/* Outline: the same box as a filled button, and seen as one. Its ground and edge stand clear of the page in both
   themes, so beside a filled button it reads as the same size (owner, 2026-09-27: it looked smaller). */
body.ui-app .ui-btn--outline { color: var(--ui-fg); background: var(--ui-card); border-color: var(--ui-border-strong); box-shadow: var(--ui-shadow-sm); }
.ui-btn--outline:hover { background: var(--ui-subtle); border-color: color-mix(in srgb, var(--ui-fg) 28%, transparent); }
html[data-theme="dark"] body.ui-app .ui-btn--outline { background: color-mix(in srgb, var(--ui-fg) 7%, var(--ui-card)); border-color: color-mix(in srgb, var(--ui-fg) 17%, transparent); }
html[data-theme="dark"] body.ui-app .ui-btn--outline:hover { background: color-mix(in srgb, var(--ui-fg) 11%, var(--ui-card)); border-color: color-mix(in srgb, var(--ui-fg) 26%, transparent); }
/* Buttons side by side are one size: a small one directly beside a regular one takes the regular size. */
body.ui-app .ui-btn--sm:has(+ .ui-btn:not(.ui-btn--sm)), body.ui-app .ui-btn:not(.ui-btn--sm) + .ui-btn--sm { height: var(--ui-h); padding: 0 var(--ui-pad); border-radius: 9px; }
body.ui-app .ui-btn--ghost { color: var(--ui-fg-2); background: transparent; }
.ui-btn--ghost:hover { background: var(--ui-hover); }

@keyframes ui-spin { to { transform: rotate(360deg); } }

/* ── Menus (theme switch; the account menu is restyled below) ────────────── */
.ui-theme { position: relative; }
.ui-menu {
  position: absolute; z-index: 60; top: calc(100% + .4rem); right: 0; display: grid; gap: 1px; min-width: 9.5rem; padding: .3rem;
  background: var(--ui-card); border: 1px solid var(--ui-border); border-radius: 10px; box-shadow: var(--ui-shadow-lg);
  animation: ui-pop .16s var(--ui-ease);
}
.ui-menu button {   /* menu rows: the compact height (--ui-h-sm), as the account menu's (css/drobo-ui-menu.css) */
  display: flex; align-items: center; gap: .55rem; width: 100%; min-height: var(--ui-h-sm); padding: .35rem .55rem; font-family: inherit; font-size: .8125rem;
  color: var(--ui-fg-2); text-align: left; background: transparent; border: 0; border-radius: 6px; cursor: pointer;
}
.ui-menu button:hover { background: var(--ui-hover); color: var(--ui-fg); }
.ui-menu button[aria-checked="true"] { color: var(--ui-fg); font-weight: 600; }
.ui-menu button[aria-checked="true"]::after { content: "✓"; margin-left: auto; font-size: .75rem; color: var(--ui-primary); }
.ui-menu .ti { font-size: 1rem; color: var(--ui-muted); }
@keyframes ui-pop { from { opacity: 0; transform: translateY(-4px) scale(.98); } }

body.ui-app .nav-user-menu { position: relative; }
body.ui-app .nav-user-trigger.nav-pill {
  display: inline-flex; align-items: center; gap: .45rem; height: var(--ui-h-sm); padding: 0 .3rem 0 .25rem; margin: 0;
  color: var(--ui-fg-2); background: transparent; border: 0; border-radius: 999px; box-shadow: none;
}
body.ui-app .nav-user-trigger.nav-pill:hover, body.ui-app .nav-user-trigger.nav-pill[aria-expanded="true"] { background: var(--ui-hover); color: var(--ui-fg); }
body.ui-app .nav-user-avatar { width: 1.65rem; height: 1.65rem; border-radius: 50%; box-shadow: 0 0 0 1px var(--ui-border); }
body.ui-app .nav-user-avatar--initial, body.ui-app .nav-user-panel-avatar--initial {
  display: grid; place-items: center; font-size: .75rem; font-weight: 600; color: #fff; background: linear-gradient(135deg, #3b82f6, #8b5cf6);
}
body.ui-app .nav-user-name { max-width: 8rem; overflow: hidden; font-size: .8125rem; font-weight: 500; text-overflow: ellipsis; color: inherit; }
body.ui-app .nav-user-chevron { font-size: .85rem; color: var(--ui-faint); }
body.ui-app .nav-user-panel {
  top: calc(100% + .45rem); min-width: 16rem; color: var(--ui-fg); background: var(--ui-card);
  border: 1px solid var(--ui-border); border-radius: 12px; box-shadow: var(--ui-shadow-lg); backdrop-filter: none; -webkit-backdrop-filter: none;
}
body.ui-app .nav-user-panel-head { border-bottom: 1px solid var(--ui-border); }
body.ui-app .nav-user-panel-name { color: var(--ui-fg); }
body.ui-app .nav-user-panel-handle, body.ui-app .nav-user-panel-email { color: var(--ui-muted); }
body.ui-app .nav-user-section-label { color: var(--ui-faint); }
body.ui-app .nav-user-group + .nav-user-group, body.ui-app .nav-user-panel-foot { border-color: var(--ui-border); }
body.ui-app .nav-user-item { color: var(--ui-fg-2); }
body.ui-app .nav-user-item .ti { color: var(--ui-muted); }
body.ui-app .nav-user-item:hover, body.ui-app .nav-user-item.is-active { color: var(--ui-fg); background: var(--ui-hover); }
body.ui-app .nav-user-item--logout:hover { color: var(--ui-bad); }
body.ui-app.nav-user-open::before { top: 0; background: rgba(0, 0, 0, .35); }

/* Text fields, shared by every new-design page: a form field's height (a toolbar's search or filter field takes
   --ui-h on its page, as its buttons are). */
body.ui-app .ui-input {
  box-sizing: border-box; width: 100%; font: inherit; font-size: .875rem; font-weight: 500; color: var(--ui-fg);
  background: var(--ui-card) !important; border: 1px solid color-mix(in srgb, var(--ui-fg) 16%, transparent) !important; border-radius: var(--ui-radius-control) !important;
  box-shadow: var(--ui-shadow-sm) !important; outline: none; transition: border-color .15s, box-shadow .15s;
}
body.ui-app .ui-input:hover { border-color: color-mix(in srgb, var(--ui-fg) 26%, transparent) !important; }
body.ui-app .ui-input::placeholder { color: var(--ui-muted); opacity: .8; }
/* Inputs and selects: the form-field height (:where() keeps the weight this rule always had; a textarea is left out). */
body.ui-app .ui-input:where(:not(textarea)) { height: var(--ui-h-field); padding: 0 var(--ui-pad-field); }
/* A textarea's box at a low weight (one class and an element), so a page's own rule for its box wins over it. */
:where(body.ui-app) textarea.ui-input { height: auto; min-height: 6rem; padding: .75rem var(--ui-pad-field); line-height: 1.5; }
body.ui-app select.ui-input { appearance: none; padding-right: 2rem; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--ui-muted) 50%), linear-gradient(135deg, var(--ui-muted) 50%, transparent 50%) !important;
  background-position: calc(100% - 1rem) 55%, calc(100% - .7rem) 55% !important; background-size: .3rem .3rem !important; background-repeat: no-repeat !important; background-color: var(--ui-card) !important; }
body.ui-app .ui-input[type=number] { -moz-appearance: textfield; }
body.ui-app .ui-input[type=number]::-webkit-inner-spin-button, body.ui-app .ui-input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }

/* Terminal (Magic UI): typed lines with a mark, a time and a caret (the New store pop-up, Upload's live view). */
.ui-term { overflow: hidden; font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace; color: #e4e4e7; background: #0a0a0f; border: 1px solid #1f1f27; border-radius: var(--ui-radius); box-shadow: 0 20px 40px -24px rgba(0, 0, 0, .8); }
.ui-term__bar { display: flex; align-items: center; gap: .4rem; padding: .6rem .75rem; background: #121218; border-bottom: 1px solid #1f1f27; }
.ui-term__bar i { width: .65rem; height: .65rem; border-radius: 50%; background: #ef4444; } .ui-term__bar i:nth-child(2) { background: #f59e0b; } .ui-term__bar i:nth-child(3) { background: #22c55e; }
.ui-term__bar span { margin-left: .5rem; font-size: .6875rem; color: #71717a; }
.ui-term__body { display: grid; align-content: start; gap: .35rem; min-height: 13.5rem; padding: .85rem .9rem 1rem; font-size: .75rem; line-height: 1.5; }
.ui-term__line { display: flex; gap: .55rem; animation: ui-term-in .35s var(--ui-ease) both; }
@keyframes ui-term-in { from { opacity: 0; transform: translateY(-4px); } }
.ui-term__mark { flex: 0 0 1ch; }
.ui-term__line[data-state="cmd"] .ui-term__mark { color: #a78bfa; }
.ui-term__line[data-state="done"] .ui-term__mark { color: #22c55e; }
.ui-term__line[data-state="run"] .ui-term__mark, .ui-term__line[data-state="wait"] .ui-term__mark { color: #60a5fa; }
.ui-term__line[data-state="warn"] .ui-term__mark { color: #f59e0b; }
.ui-term__line[data-state="fail"] .ui-term__mark { color: #ef4444; }
.ui-term__text { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.ui-term__line[data-state="cmd"] .ui-term__text { color: #fafafa; }
.ui-term__line[data-state="wait"] .ui-term__text { background: linear-gradient(90deg, #a1a1aa 40%, #fafafa 50%, #a1a1aa 60%); background-size: 250% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: ui-shine 2s linear infinite; }
.ui-term__time { flex: 0 0 auto; color: #52525b; }
.ui-term__caret { display: inline-block; width: .5em; height: 1.05em; margin-left: 1px; vertical-align: -.15em; background: #a1a1aa; animation: ui-caret 1s steps(1) infinite; }
@keyframes ui-caret { 50% { opacity: 0; } }

/* Switch (on/off), shared: the leaderboard's name toggle, Manage's "Keep it running". */
.ui-switch { position: relative; display: inline-block; flex: 0 0 auto; width: 2.5rem; height: 1.45rem; }
.ui-switch input { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.ui-switch i { position: absolute; inset: 0; background: color-mix(in srgb, var(--ui-fg) 16%, transparent); border-radius: 999px; transition: background .2s; }
.ui-switch i::after { content: ""; position: absolute; top: 2px; left: 2px; width: calc(1.45rem - 4px); height: calc(1.45rem - 4px); background: #fff; border-radius: 50%; box-shadow: 0 1px 3px rgba(0, 0, 0, .25); transition: transform .22s var(--ui-ease); }
.ui-switch input:checked + i { background: var(--ui-primary); }
.ui-switch input:checked + i::after { transform: translateX(1.05rem); }
.ui-switch input:focus-visible + i { outline: 1.5px solid var(--ui-focus); outline-offset: 2px; }
.ui-switch input:disabled { cursor: progress; }
.ui-switch input:disabled + i { opacity: .6; }

/* ── Magic UI pieces ─────────────────────────────────────────────────────── */
/* Dot pattern, fading out from one corner. */
.ui-dots {
  position: absolute; z-index: 0; inset: 0; pointer-events: none;
  background-image: radial-gradient(var(--ui-dot) 1px, transparent 1.4px); background-size: 18px 18px;
  -webkit-mask-image: radial-gradient(ellipse 70% 90% at 0% 0%, #000 20%, transparent 70%);
  mask-image: radial-gradient(ellipse 70% 90% at 0% 0%, #000 20%, transparent 70%);
}
/* Animated shiny text. */
.ui-shiny {
  background: linear-gradient(110deg, var(--ui-muted) 30%, var(--ui-fg) 50%, var(--ui-muted) 70%); background-size: 240% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent; animation: ui-shine 4s linear infinite;
}
@keyframes ui-shine { from { background-position: 120% 0; } to { background-position: -120% 0; } }
/* Border beam: a short light travelling round the border. Kept for moments that mean something (the store's
   browser while it waits for the eBay sign-in, the top-10 Leaderboard tile); every other card has a still border. */
@property --ui-beam { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
.ui-beam::after {
  content: ""; position: absolute; inset: -1px; z-index: 1; padding: 1px; border-radius: inherit; pointer-events: none;
  background: conic-gradient(from var(--ui-beam), transparent 0 72%, var(--ui-primary) 84%, var(--ui-violet) 92%, transparent 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  animation: ui-beam 7s linear infinite;
}
@keyframes ui-beam { to { --ui-beam: 360deg; } }
/* Magic card: a soft spotlight that follows the pointer (js sets --mx/--my). */
.ui-magic { position: relative; isolation: isolate; }
.ui-magic::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .3s;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), var(--ui-spot), transparent 55%);
}
.ui-magic:hover::before { opacity: 1; }
/* Blur fade: content arrives softly, in order (--i). */
.ui-fade { animation: ui-blur-in .7s var(--ui-ease) both; animation-delay: calc(var(--i, 0) * 70ms); }
@keyframes ui-blur-in { from { opacity: 0; filter: blur(6px); transform: translateY(8px); } }
/* With JS: sections wait below the fold and blur in as they arrive (js adds .is-in; --d = order in the batch). */
.ui-js .ui-fade { animation: none; opacity: 0; filter: blur(6px); transform: translateY(14px); }
.ui-js .ui-fade.is-in { opacity: 1; filter: none; transform: none;
  transition: opacity .7s var(--ui-ease), filter .7s var(--ui-ease), transform .7s var(--ui-ease); transition-delay: calc(var(--d, 0) * 80ms); }

/* Greeting: words blur in one by one (js wraps them). */
.ui-word { display: inline-block; white-space: pre; animation: ui-word-in .6s var(--ui-ease) both; animation-delay: calc(var(--w, 0) * 90ms + 120ms); }
@keyframes ui-word-in { from { opacity: 0; filter: blur(8px); transform: translateY(6px); } }

/* Magic card border: a soft light on the edge follows the pointer too. */
.ui-magic:not(.ui-beam)::after {
  content: ""; position: absolute; inset: -1px; z-index: 1; padding: 1px; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .3s;
  background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%), color-mix(in srgb, var(--ui-primary) 70%, transparent), transparent 60%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
.ui-magic:hover::after { opacity: 1; }
.ui-stat, .ui-shortcuts a, .ui-feature { transition: transform .25s var(--ui-ease), box-shadow .25s var(--ui-ease), border-color .2s; }
.ui-stat:hover, .ui-feature:hover { transform: translateY(-2px); box-shadow: var(--ui-shadow-lg); }

/* Buttons: a light sheen sweeps across on hover. */
.ui-btn:not(.ui-btn--shimmer)::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0;
  background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .28) 50%, transparent 65%); background-size: 250% 100%; background-position: 120% 0;
}
.ui-btn:not(.ui-btn--shimmer):hover::after { opacity: 1; background-position: -120% 0; transition: background-position .7s var(--ui-ease), opacity .1s; }
.ui-btn--outline::after, .ui-btn--ghost::after { background-image: linear-gradient(105deg, transparent 35%, color-mix(in srgb, var(--ui-primary) 14%, transparent) 50%, transparent 65%) !important; }

/* Lists arrive one after another (Magic UI "animated list"). */
.ui-js .is-in .ui-activity__list li, .ui-js .is-in .ui-todo-list li, .ui-js .is-in .ui-sellers__list li, .ui-js .is-in .ui-stores__list li {
  animation: ui-drop-in .55s cubic-bezier(.2, .9, .3, 1.15) both; animation-delay: calc(var(--n, 0) * 70ms + 150ms);
}
.ui-js .ui-fade:not(.is-in) .ui-activity__list li, .ui-js .ui-fade:not(.is-in) .ui-todo-list li { opacity: 0; }
@keyframes ui-drop-in { from { opacity: 0; transform: translateY(-10px) scale(.97); } }
.ui-todo-list li[data-tone="ok"] .ui-todo-list__icon, .ui-todo-list__done .ui-todo-list__icon { animation: ui-pop-in .5s cubic-bezier(.2, .9, .3, 1.4) both; animation-delay: calc(var(--n, 0) * 70ms + 350ms); }

/* Wide screens: the whole app one step larger, text and layout together (every size is in rem), so nothing on a big
   monitor reads small and every alignment holds. drobo-ui.css is only on app pages, so the site's other pages keep theirs. */
@media (min-width: 1800px) { html { font-size: 106.25%; } }

/* Sidebar groups open and close smoothly (browsers without ::details-content just snap). */
body.ui-app { interpolate-size: allow-keywords; }
.ui-nav__group::details-content { height: 0; overflow: clip; transition: height .28s var(--ui-ease), content-visibility .28s allow-discrete; }
.ui-nav__group[open]::details-content { height: auto; }
/* While a page loads, the groups take the viewer's saved state without animating (drobo/app/sidebar.html). */
.ui-nav-still .ui-nav__group::details-content, .ui-nav-still .ui-nav__chev { transition: none !important; }
.ui-nav__item:hover > .ti:first-child { transform: translateX(1px) scale(1.06); }
.ui-nav__item > .ti:first-child { transition: color .15s, transform .2s var(--ui-ease); }

/* Chart tooltip glides between days. */
.ui-chart__tip { transition: left .12s ease-out, top .12s ease-out; }

/* Theme switch: the new theme spreads out in a circle from the toggle (View Transitions; js/drobo-ui.js marks <html>
   with data-ui-theme-switching while it runs, so page changes below don't get the circle). */
::view-transition-old(root), ::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
html[data-ui-theme-switching]::view-transition-new(root) { animation: ui-theme-reveal .55s var(--ui-ease, ease) both; }

/* Moving between pages (cross-document View Transitions, Chrome): the sidebar stays exactly as it is, never redrawn or
   flashed, and the page area crossfades quickly. Browsers without it just load the page. */
@view-transition { navigation: auto; }
html:not([data-ui-theme-switching]) .ui-app .ui-sidebar { view-transition-name: ui-sidebar; }
::view-transition-group(ui-sidebar), ::view-transition-new(ui-sidebar) { animation: none; }
::view-transition-old(ui-sidebar) { display: none; }
html:not([data-ui-theme-switching])::view-transition-old(root) { animation: ui-nav-out .12s ease-out both; }
html:not([data-ui-theme-switching])::view-transition-new(root) { animation: ui-nav-in .16s ease-out both; }
@keyframes ui-nav-out { to { opacity: 0; } }
@keyframes ui-nav-in { from { opacity: 0; } }
@keyframes ui-theme-reveal { from { clip-path: circle(0 at var(--tx, 100%) var(--ty, 0)); } to { clip-path: circle(var(--tr, 150vmax) at var(--tx, 100%) var(--ty, 0)); } }

/* ── Page header ─────────────────────────────────────────────────────────── */
/* Full width of the panel (dots, glow and rule edge to edge); the text lines up with the page below. */
.ui-hero { position: relative; border-bottom: 1px solid var(--ui-border); }
.ui-hero__inner {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1.25rem 2rem;
  max-width: 76rem; margin: 0 auto; padding: 2.5rem 2rem 1.75rem; box-sizing: border-box;
}
.ui-hero::before {  /* a faint colour glow, top right */
  /* Drawn inside the hero's right half and clipped to it, so the hero itself needn't clip: menus opened from the hero
     (store pickers) drop over the page. The gradients are sized and placed as if on a 55% × 170% box set 40% above and
     5% right of the hero, so the glow looks as it always did. */
  content: ""; position: absolute; z-index: 0; top: 0; right: 0; width: 50%; height: 100%; pointer-events: none;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--ui-primary) var(--ui-glow, 10%), transparent), transparent 70%),
              radial-gradient(closest-side at 70% 40%, color-mix(in srgb, var(--ui-violet) var(--ui-glow, 10%), transparent), transparent 70%);
  background-size: 110% 170%; background-position: 0 57.1429%; background-repeat: no-repeat;
  filter: blur(20px); opacity: .9; clip-path: inset(0);
}
.ui-hero { overflow: visible; z-index: 8; }   /* above the page below it, so a menu opened from the hero (the store picker)
                                               is drawn over the cards that follow, not under them (they animate in with
                                               transforms, each its own layer); the sticky top bar (30) stays above it */
.ui-hero > .ui-dots, .ui-hero > .ui-particles { overflow: hidden; }
.ui-hero > :not(.ui-dots) { position: relative; z-index: 1; }
.ui-hero__text { display: grid; gap: .55rem; min-width: 0; }
.ui-pill {
  display: inline-flex; align-items: center; gap: .4rem; justify-self: start; height: 1.75rem; padding: 0 .7rem 0 .55rem;
  font-size: .75rem; font-weight: 500; text-decoration: none; background: var(--ui-card); border: 1px solid var(--ui-border); border-radius: 999px;
  box-shadow: var(--ui-shadow-sm); transition: border-color .15s;
}
.ui-pill:hover { border-color: var(--ui-border-strong); }
.ui-pill .ti { font-size: .85rem; color: var(--ui-muted); }
.ui-pill__spark { color: var(--ui-primary) !important; }
.ui-h1 { margin: 0; font-size: clamp(1.6rem, 2.6vw, 2rem); font-weight: 650; letter-spacing: -.03em; line-height: 1.15; color: var(--ui-fg); }
.ui-lead { margin: 0; max-width: 60ch; font-size: .875rem; color: var(--ui-muted); }
.ui-lead strong { font-weight: 600; color: var(--ui-fg-2); }
.ui-hero__meta { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.ui-chip {
  display: inline-flex; align-items: center; gap: .45rem; height: var(--ui-h-sm); box-sizing: border-box; padding: 0 var(--ui-pad-sm); font-size: .75rem; color: var(--ui-muted);
  background: var(--ui-subtle); border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); white-space: nowrap;
}
.ui-chip strong { font-weight: 600; color: var(--ui-fg-2); }
.ui-dot { width: .45rem; height: .45rem; border-radius: 50%; background: var(--ui-faint); }
.ui-dot[data-tone="ok"] { background: var(--ui-ok); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ui-ok) 20%, transparent); }

/* ── Cards and dashboard sections ───────────────────────────────────────── */
.ui-card {
  position: relative; min-width: 0; padding: 1.25rem; background: var(--ui-card);
  border: 1px solid var(--ui-border); border-radius: var(--ui-radius); box-shadow: var(--ui-shadow-sm);
}
.ui-card__head { display: flex; align-items: flex-start; justify-content: space-between; gap: .75rem 1rem; margin-bottom: 1rem; }
.ui-card__title { display: flex; align-items: center; gap: .5rem; margin: 0; font-size: .9375rem; font-weight: 600; letter-spacing: -.01em; color: var(--ui-fg); }
.ui-card__sub { margin: .2rem 0 0; font-size: .8125rem; color: var(--ui-muted); font-variant-numeric: tabular-nums; }
.ui-card__sub b { font-weight: 600; color: var(--ui-fg); }
.ui-section-title { margin: 2rem 0 .85rem; font-size: .9375rem; font-weight: 600; letter-spacing: -.01em; color: var(--ui-fg); }
.ui-icon-chip {
  display: inline-grid; place-items: center; flex: 0 0 auto; width: 2.1rem; height: 2.1rem; font-size: 1.05rem; color: var(--ui-fg-2);
  background: var(--ui-subtle); border: 1px solid var(--ui-border); border-radius: 9px;
}
.ui-icon-chip--lg { width: 2.75rem; height: 2.75rem; font-size: 1.3rem; border-radius: 12px; }
.ui-link { display: inline-flex; align-items: center; gap: .2rem; font-weight: 550; color: var(--ui-primary) !important; text-decoration: none; }
.ui-link:hover { text-decoration: underline; }
.ui-link .ti { font-size: .85rem; }
.ui-kicker { display: inline-flex; align-items: center; gap: .35rem; font-size: .75rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ui-primary); }
.ui-gradient-text { background: linear-gradient(90deg, var(--ui-primary), var(--ui-violet)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ui-empty { display: grid; justify-items: center; align-content: center; gap: .6rem; min-height: 12rem; padding: 1.5rem; text-align: center; }
.ui-empty p { max-width: 36ch; margin: 0; font-size: .8125rem; line-height: 1.55; color: var(--ui-muted); }

/* Stat tiles */
.ui-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; margin-bottom: 1rem; }
.ui-stat { display: grid; align-content: start; gap: .3rem; padding: 1.1rem 1.2rem 1.15rem; overflow: hidden; }
.ui-stat header { display: flex; align-items: center; justify-content: space-between; min-height: 1.5rem; font-size: .8125rem; font-weight: 500; color: var(--ui-muted); }
.ui-stat header > .ti { font-size: 1.05rem; color: var(--ui-faint); }
.ui-stat strong { display: block; margin-top: .15rem; font-size: 1.85rem; font-weight: 650; letter-spacing: -.04em; line-height: 1.15; color: var(--ui-fg); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ui-stat p { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; margin: 0; font-size: .8125rem; color: var(--ui-muted); }
.ui-trend { display: inline-flex; align-items: center; gap: .15rem; padding: .1rem .45rem; font-size: .75rem; font-style: normal; font-weight: 600;
  color: var(--ui-ok); background: color-mix(in srgb, var(--ui-ok) 12%, transparent); border-radius: 999px; }
.ui-trend.is-down { color: var(--ui-bad); background: color-mix(in srgb, var(--ui-bad) 12%, transparent); }
.ui-trend .ti { font-size: .85rem; }
.ui-spark { display: block; width: 100%; height: 2.5rem; margin-top: .6rem; color: var(--ui-primary); }
.ui-stat__rank { display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
.ui-stat__rank strong { margin: 0; }
.ui-gauge--sm { width: 3.6rem; height: 3.6rem; }
.ui-gauge--sm circle { stroke-width: 10; }
.ui-gauge--sm .ui-gauge__value b { font-size: .8rem; }
.ui-gauge--sm .ui-gauge__value small { display: none; }
.ui-stat--gold header > .ti { color: #eab308; }
.ui-stat.ui-beam { overflow: visible; }   /* the beam runs on the border, outside the clip */
/* In the top 10: a calm gold beam, slower and softer than the default. */
.ui-stat--gold.ui-beam::after { background: conic-gradient(from var(--ui-beam), transparent 0 78%, rgba(245, 158, 11, .55) 89%, rgba(253, 224, 71, .7) 95%, transparent 100%); animation-duration: 13s; }
.ui-dot[data-tone="warn"] { background: var(--ui-warn); }

/* Bento rows */
.ui-bento { display: grid; grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr); gap: 1rem; margin-bottom: 1rem; }
.ui-bento--even { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }

/* Revenue chart */
.ui-chart-card { display: flex; flex-direction: column; }
/* Segmented choices: a toolbar's by default (--ui-h), --sm in a card's header, --field among form fields. The buttons
   fill the height inside a .25rem inset. The size is a minimum, and each button holds its own height (--seg-h less the
   inset and the edge), so a bar that wraps onto two lines on a phone (flex-wrap or a grid) keeps full-size buttons.
   A page sizes one through --seg-h / --seg-pad, never a height of its own. */
.ui-seg { --seg-h: var(--ui-h); --seg-pad: .25rem; box-sizing: border-box; display: inline-flex; flex: 0 0 auto; min-height: var(--seg-h); padding: var(--seg-pad); background: var(--ui-subtle); border: 1px solid var(--ui-border); border-radius: var(--ui-radius-control); }
.ui-seg button { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; min-height: calc(var(--seg-h) - 2 * var(--seg-pad) - 2px); padding: 0 .75rem; font-family: inherit; font-size: .8125rem; font-weight: 600; white-space: nowrap; color: var(--ui-muted); background: transparent; border: 0; border-radius: 6px; cursor: pointer; transition: color .15s, background .15s; }
.ui-seg--sm { --seg-h: var(--ui-h-sm); --seg-pad: .2rem; }
.ui-seg--sm button { padding: 0 .6rem; font-size: .75rem; border-radius: 5px; }
.ui-seg--field { --seg-h: var(--ui-h-field); }
.ui-seg--field button { padding: 0 var(--ui-pad-field); border-radius: 7px; }
.ui-seg button:hover { color: var(--ui-fg); }
.ui-seg button[aria-pressed="true"] { color: var(--ui-fg); background: var(--ui-card); box-shadow: var(--ui-shadow-sm), 0 0 0 1px var(--ui-border); }
/* Animated tabs (Magic UI): js/drobo-ui.js adds a thumb that slides to the pressed button; without JS the pressed button
   keeps its own background (above). */
.ui-seg.is-animated { position: relative; isolation: isolate; }
.ui-seg.is-animated button { position: relative; z-index: 1; }
.ui-seg.is-animated button[aria-pressed="true"] { background: transparent; box-shadow: none; }
.ui-seg__thumb { position: absolute; top: 0; left: 0; z-index: 0; background: var(--ui-card); border-radius: 6px; box-shadow: var(--ui-shadow-sm), 0 0 0 1px var(--ui-border); pointer-events: none; }
.ui-seg.is-ready .ui-seg__thumb { transition: transform .32s var(--ui-ease), width .32s var(--ui-ease), height .32s var(--ui-ease); }
html[data-theme="dark"] .ui-seg__thumb, html[data-theme="dark"] .ui-seg button[aria-pressed="true"]:not(.is-animated *) { background: #2a2a31; box-shadow: 0 1px 3px rgba(0, 0, 0, .55), inset 0 0 0 1px rgba(255, 255, 255, .09); }
@media (prefers-reduced-motion: reduce) { .ui-seg.is-ready .ui-seg__thumb { transition: none; } }
/* Pages of a table or list (Orders, Listings, Upload): the range on the left, the page buttons on the right, each the
   compact height (--ui-h-sm), square at least. */
.ui-pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1rem; padding: .6rem 1rem .6rem 1.25rem; font-size: .75rem; color: var(--ui-muted); border-top: 1px solid var(--ui-border); }
.ui-pager[hidden] { display: none; }
.ui-pager__range { font-variant-numeric: tabular-nums; white-space: nowrap; }
.ui-pager__range b { font-weight: 650; color: var(--ui-fg); }
.ui-pager__nav, .ui-pager__pages { display: flex; align-items: center; gap: .2rem; }
.ui-pager__step, .ui-pager__num { display: inline-grid; place-items: center; box-sizing: border-box; min-width: var(--ui-h-sm); height: var(--ui-h-sm); padding: 0 .4rem; font-family: inherit; font-size: .8125rem; font-weight: 600;
  color: var(--ui-fg-2); font-variant-numeric: tabular-nums; background: transparent; border: 1px solid transparent; border-radius: var(--ui-radius-sm); cursor: pointer; transition: background .15s, color .15s, border-color .15s; }
.ui-pager__step { font-size: 1rem; color: var(--ui-muted); }
.ui-pager__step:hover:not(:disabled), .ui-pager__num:hover:not([aria-current]) { color: var(--ui-fg); background: var(--ui-hover); }
.ui-pager__step:disabled { opacity: .35; cursor: default; }
.ui-pager__num[aria-current="page"] { color: var(--ui-primary); background: var(--ui-primary-soft); border-color: color-mix(in srgb, var(--ui-primary) 30%, var(--ui-border)); cursor: default; }
.ui-pager__gap { display: inline-grid; place-items: center; width: 1.1rem; height: var(--ui-h-sm); color: var(--ui-faint); }
@media (max-width: 560px) { .ui-pager { padding: .6rem .75rem .6rem 1rem; } }
.ui-chart { position: relative; flex: 1 1 auto; min-height: 16rem; color: var(--ui-primary); }
.ui-chart svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.ui-chart .grid line { stroke: var(--ui-border); stroke-dasharray: 3 4; }
.ui-chart .axis text { font-size: 11px; fill: var(--ui-faint); font-variant-numeric: tabular-nums; }
.ui-chart .line { fill: none; stroke: currentColor; stroke-width: 2.25; stroke-linejoin: round; stroke-linecap: round;
  stroke-dasharray: 100; stroke-dashoffset: 100; animation: ui-draw 1.1s var(--ui-ease) .1s forwards; }
.ui-chart .area { animation: ui-fade-in .9s ease .35s both; }
.ui-chart .dot { fill: var(--ui-card); stroke: currentColor; stroke-width: 2; animation: ui-fade-in .4s ease .9s both; }
.ui-chart .cross { stroke: var(--ui-border-strong); stroke-width: 1; stroke-dasharray: 3 3; }
.ui-chart .point { fill: currentColor; stroke: var(--ui-card); stroke-width: 2.5; }
@keyframes ui-draw { to { stroke-dashoffset: 0; } }
@keyframes ui-fade-in { from { opacity: 0; } }
.ui-chart__tip {
  position: absolute; z-index: 2; top: 0; padding: .5rem .65rem; font-size: .75rem; line-height: 1.45; white-space: nowrap; pointer-events: none;
  color: var(--ui-fg-2); background: var(--ui-card); border: 1px solid var(--ui-border); border-radius: 9px; box-shadow: var(--ui-shadow-lg); transform: translateX(-50%);
}
.ui-chart__tip b { display: block; font-size: .8125rem; color: var(--ui-fg); }

/* Best sellers */
.ui-sellers__list { display: grid; gap: .35rem; margin: 0; padding: 0; list-style: none; }
.ui-sellers__list li {
  position: relative; isolation: isolate; display: flex; align-items: center; gap: .75rem; min-height: 3.4rem; padding: .45rem .75rem .45rem .6rem;
  border-radius: 9px; overflow: hidden;
}
.ui-sellers__list li::before {  /* share of the top seller's revenue, as a faint fill */
  content: ""; position: absolute; z-index: -1; inset: 0 auto 0 0; width: var(--share, 0%);
  background: linear-gradient(90deg, var(--ui-primary-soft), color-mix(in srgb, var(--ui-primary) 4%, transparent));
  border-radius: inherit; transform-origin: left; animation: ui-grow .9s var(--ui-ease) .15s both;
}
.ui-sellers__rank { flex: 0 0 1rem; font-size: .8125rem; font-weight: 600; color: var(--ui-faint); text-align: center; font-variant-numeric: tabular-nums; }
.ui-sellers__thumb {
  display: grid; place-items: center; flex: 0 0 auto; width: 2.4rem; height: 2.4rem; overflow: hidden;
  font-size: 1rem; color: var(--ui-faint); background: var(--ui-subtle); border: 1px solid var(--ui-border); border-radius: 8px;
}
.ui-sellers__thumb img { width: 100%; height: 100%; object-fit: contain; background: #fff; animation: ui-blur-in .4s var(--ui-ease) both; }
.ui-sellers__body { display: grid; flex: 1 1 auto; min-width: 0; gap: .1rem; }
.ui-sellers__name { overflow: hidden; font-size: .8125rem; font-weight: 500; color: var(--ui-fg); text-overflow: ellipsis; white-space: nowrap; }
.ui-sellers__meta { font-size: .75rem; color: var(--ui-muted); font-variant-numeric: tabular-nums; }
.ui-sellers__amount { flex: 0 0 auto; font-size: .8125rem; font-weight: 600; color: var(--ui-fg); font-variant-numeric: tabular-nums; white-space: nowrap; }
@keyframes ui-grow { from { transform: scaleX(0); } }

/* Cloud stores */
.ui-status { display: inline-flex; align-items: center; gap: .4rem; flex: 0 0 auto; padding: .2rem .55rem; font-size: .75rem; font-weight: 600; color: var(--ui-muted); background: var(--ui-card); border: 1px solid var(--ui-border); border-radius: 999px; }
.ui-status[data-tone="ok"] { color: var(--ui-ok); }
.ui-status[data-tone="warn"] { color: var(--ui-warn); }
.ui-status[data-tone="bad"] { color: var(--ui-bad); }
.ui-status[data-tone="rest"] { color: color-mix(in srgb, var(--ui-ok) 70%, var(--ui-muted)); }   /* signed in, browser resting to save data */
.ui-status .ui-dot { background: currentColor; }
.ui-status[data-tone="ok"] .ui-dot { animation: ui-pulse 2.4s ease-in-out infinite; }
@keyframes ui-pulse { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, currentColor 40%, transparent); } 50% { box-shadow: 0 0 0 4px transparent; } }

/* Shortcuts */
.ui-links { display: grid; align-content: start; gap: .15rem; }
.ui-links .ui-card__head { margin-bottom: .35rem; }
.ui-links a { display: flex; align-items: center; gap: .75rem; padding: .55rem .5rem; margin: 0 -.5rem; text-decoration: none; border-radius: 9px; transition: background .15s; }
.ui-links a:hover { background: var(--ui-hover); }
.ui-links a > span:nth-child(2) { display: grid; flex: 1 1 auto; min-width: 0; line-height: 1.35; }
.ui-links strong { font-size: .8125rem; font-weight: 600; color: var(--ui-fg); }
.ui-links small { overflow: hidden; font-size: .75rem; color: var(--ui-muted); text-overflow: ellipsis; white-space: nowrap; }
.ui-links a > .ti { font-size: .95rem; color: var(--ui-faint); transition: color .15s, transform .15s; }
.ui-links a:hover > .ti { color: var(--ui-fg); transform: translate(1px, -1px); }

/* Waiting for the first report */
.ui-waiting { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.25rem; padding: 1.4rem; margin-bottom: 1rem; }
.ui-waiting > div { flex: 1 1 22rem; }
.ui-waiting h2 { margin: 0 0 .25rem; font-size: .9375rem; font-weight: 600; }
.ui-waiting p { margin: 0; font-size: .8125rem; line-height: 1.55; color: var(--ui-muted); }

/* Credits (older plans) */
.ui-credits__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.ui-meter { display: grid; gap: .45rem; padding: .9rem 1rem; background: var(--ui-subtle); border: 1px solid var(--ui-border); border-radius: 10px; }
.ui-meter__head { display: flex; align-items: center; justify-content: space-between; font-size: .8125rem; color: var(--ui-muted); }
.ui-meter__head span { display: inline-flex; align-items: center; gap: .4rem; }
.ui-meter__head strong { font-size: 1rem; font-weight: 650; color: var(--ui-fg); font-variant-numeric: tabular-nums; }
.ui-meter__bar { display: block; height: 6px; overflow: hidden; background: var(--ui-border); border-radius: 999px; }
.ui-meter__bar::after { content: ""; display: block; width: var(--pct, 0%); height: 100%; background: linear-gradient(90deg, var(--ui-primary), var(--ui-violet)); border-radius: inherit; }
.ui-meter.is-low .ui-meter__bar::after { background: var(--ui-warn); }
.ui-meter.is-out .ui-meter__bar::after { background: var(--ui-bad); }
.ui-meter small { font-size: .75rem; color: var(--ui-muted); }

/* No plan yet */
.ui-offer { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); align-items: center; gap: 1.5rem; padding: 0; overflow: hidden; }
.ui-offer__copy { display: grid; justify-items: start; gap: .75rem; padding: 2rem 0 2rem 2rem; }
.ui-offer h2 { margin: 0; font-size: clamp(1.5rem, 2.4vw, 2rem); font-weight: 650; letter-spacing: -.03em; line-height: 1.15; }
.ui-offer p { margin: 0; max-width: 44ch; font-size: .875rem; line-height: 1.6; color: var(--ui-muted); }
.ui-offer__actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .35rem; }
.ui-offer .ui-offer__terms { font-size: .75rem; color: var(--ui-faint); }
.ui-offer__art { display: block; width: 100%; height: 100%; min-height: 15rem; object-fit: cover; object-position: left center; }
.ui-features { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
.ui-feature { display: grid; align-content: start; gap: .5rem; }
.ui-feature h3 { margin: .35rem 0 0; font-size: .875rem; font-weight: 600; }
.ui-feature p { margin: 0; font-size: .8125rem; line-height: 1.55; color: var(--ui-muted); }
.ui-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin: 0; padding: 0; list-style: none; }
.ui-steps li { display: flex; gap: .8rem; padding: 1.25rem; }
.ui-steps li + li { border-left: 1px solid var(--ui-border); }
.ui-steps span { display: grid; place-items: center; flex: 0 0 auto; width: 1.75rem; height: 1.75rem; font-size: .8125rem; font-weight: 700; color: #fff; background: linear-gradient(135deg, var(--ui-primary), var(--ui-violet)); border-radius: 50%; }
.ui-steps strong { display: block; margin-bottom: .2rem; font-size: .875rem; font-weight: 600; }
.ui-steps p { margin: 0; font-size: .8125rem; line-height: 1.5; color: var(--ui-muted); }

/* Colour-coded icon chips (stats, shortcuts) */
.ui-stat__icon { display: inline-grid; place-items: center; flex: 0 0 auto; width: 1.9rem; height: 1.9rem; font-size: 1rem; border-radius: 8px; color: var(--tone); background: color-mix(in srgb, var(--tone) 13%, transparent); }
[data-tone="green"] { --tone: #16a34a; } [data-tone="blue"] { --tone: #2563eb; } [data-tone="violet"] { --tone: #7c3aed; } [data-tone="amber"] { --tone: #d97706; }
html[data-theme="dark"] [data-tone="green"] { --tone: #4ade80; } html[data-theme="dark"] [data-tone="blue"] { --tone: #60a5fa; }
html[data-theme="dark"] [data-tone="violet"] { --tone: #a78bfa; } html[data-theme="dark"] [data-tone="amber"] { --tone: #fbbf24; }
.ui-stat header .ui-stat__icon .ti { color: inherit; }

/* Your automation: Magic UI animated beam, Amazon → DroboAI → eBay */
.ui-flow { display: flex; flex-direction: column; }
.ui-flow__stage { position: relative; display: flex; align-items: center; justify-content: space-between; flex: 0 0 auto; min-height: 7rem; padding: 0 2rem .25rem; }
.ui-flow__beams { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.ui-flow__beams .base { fill: none; stroke: var(--ui-border-strong); stroke-width: 2; }
.ui-flow__beams .beam { fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 22 78; stroke-dashoffset: 100; opacity: 0; }
.ui-flow[data-live="true"] .ui-flow__beams .beam { opacity: 1; animation: ui-beam-run 2.6s linear infinite; }
.ui-flow[data-live="true"] .ui-flow__beams .beam + .beam { animation-delay: 1.3s; }
@keyframes ui-beam-run { to { stroke-dashoffset: 0; } }
.ui-flow__node { position: relative; z-index: 1; display: grid; justify-items: center; gap: .45rem; }
.ui-flow__node small { font-size: .75rem; font-weight: 500; color: var(--ui-muted); }
.ui-flow__icon {
  display: grid; place-items: center; width: 3.25rem; height: 3.25rem; font-size: 1.6rem; color: var(--ui-fg);
  background: var(--ui-card); border: 1px solid var(--ui-border); border-radius: 50%; box-shadow: var(--ui-shadow);
}
.ui-flow__icon--amazon { color: #ff9900; }
.ui-flow__icon--ebay { display: flex; align-items: center; justify-content: center; font-size: .9rem; font-weight: 800; letter-spacing: -.07em; font-family: Inter, sans-serif; }
.ui-flow__icon--ebay b:nth-child(1) { color: #e53238; } .ui-flow__icon--ebay b:nth-child(2) { color: #0064d2; }
.ui-flow__icon--ebay b:nth-child(3) { color: #f5af02; } .ui-flow__icon--ebay b:nth-child(4) { color: #86b817; }
.ui-flow__icon--hub { position: relative; width: 4.25rem; height: 4.25rem; }
.ui-flow__icon--hub img { width: auto; height: 1.9rem; }
.ui-flow[data-live="true"] .ui-flow__icon--hub::before, .ui-flow[data-live="true"] .ui-flow__icon--hub::after {  /* ripple */
  content: ""; position: absolute; inset: -1px; border-radius: 50%; border: 1px solid color-mix(in srgb, var(--ui-primary) 45%, transparent);
  animation: ui-ripple 2.8s ease-out infinite;
}
.ui-flow[data-live="true"] .ui-flow__icon--hub::after { animation-delay: 1.4s; }
@keyframes ui-ripple { from { transform: scale(1); opacity: .9; } to { transform: scale(1.65); opacity: 0; } }
.ui-status[data-tone="busy"] { color: var(--ui-primary); }

/* Needs attention */
.ui-todo-list, .ui-activity__list { display: grid; gap: .5rem; margin: 0; padding: 0; list-style: none; }
.ui-todo-list li { display: flex; align-items: center; gap: .75rem; padding: .7rem .75rem; background: var(--ui-subtle); border: 1px solid var(--ui-border); border-radius: 10px; }
.ui-todo-list li > div { display: grid; flex: 1 1 auto; gap: .1rem; min-width: 0; line-height: 1.35; }
.ui-todo-list strong { font-size: .8125rem; font-weight: 600; color: var(--ui-fg); }
.ui-todo-list small { font-size: .75rem; color: var(--ui-muted); }
.ui-todo-list__icon { display: grid; place-items: center; flex: 0 0 auto; width: 2rem; height: 2rem; font-size: 1rem; border-radius: 8px; color: var(--ui-primary); background: var(--ui-primary-soft); }
.ui-todo-list li[data-tone="warn"] .ui-todo-list__icon { color: var(--ui-warn); background: color-mix(in srgb, var(--ui-warn) 14%, transparent); }
.ui-todo-list li[data-tone="bad"] .ui-todo-list__icon { color: var(--ui-bad); background: color-mix(in srgb, var(--ui-bad) 14%, transparent); }
.ui-todo-list__done { border-style: dashed !important; background: transparent !important; }
.ui-todo-list__done .ui-todo-list__icon { color: var(--ui-ok); background: color-mix(in srgb, var(--ui-ok) 14%, transparent); animation: ui-pop-in .5s cubic-bezier(.2, .9, .3, 1.4) both; }
@keyframes ui-pop-in { from { transform: scale(.4); opacity: 0; } }

/* Recent activity */
.ui-activity__list li { display: flex; align-items: center; gap: .75rem; padding: .35rem 0; animation: ui-blur-in .5s var(--ui-ease) both; }
.ui-activity__list li > div { display: grid; flex: 1 1 auto; gap: .05rem; min-width: 0; line-height: 1.35; }
.ui-activity__list strong { overflow: hidden; font-size: .8125rem; font-weight: 600; color: var(--ui-fg); text-overflow: ellipsis; white-space: nowrap; }
.ui-activity__list small { font-size: .75rem; color: var(--ui-muted); }
.ui-activity__list time { flex: 0 0 auto; font-size: .75rem; color: var(--ui-faint); font-variant-numeric: tabular-nums; }
.ui-activity__icon { position: relative; display: grid; place-items: center; flex: 0 0 auto; width: 2rem; height: 2rem; font-size: 1rem; color: var(--ui-muted); background: var(--ui-subtle); border: 1px solid var(--ui-border); border-radius: 50%; }
.ui-activity__icon::after { content: ""; position: absolute; right: -1px; bottom: -1px; width: .55rem; height: .55rem; border: 2px solid var(--ui-card); border-radius: 50%; background: var(--ui-faint); }
.ui-activity__list li[data-tone="ok"] .ui-activity__icon::after { background: var(--ui-ok); }
.ui-activity__list li[data-tone="busy"] .ui-activity__icon::after { background: var(--ui-primary); }
.ui-activity__list li[data-tone="warn"] .ui-activity__icon::after { background: var(--ui-warn); }
.ui-activity__list li[data-tone="bad"] .ui-activity__icon::after { background: var(--ui-bad); }
.ui-activity__empty .ui-activity__icon::after { display: none; }

/* Cloud store quick actions (Upload / Orders / Listings) */
.ui-cloud__actions { display: flex; gap: .15rem; }
.ui-cloud__actions a { display: grid; place-items: center; width: var(--ui-h-sm); height: var(--ui-h-sm); font-size: .95rem; color: var(--ui-muted); border-radius: var(--ui-radius-sm); }
.ui-cloud__actions a:hover { color: var(--ui-fg); background: var(--ui-hover); }

.ui-todo-list li[data-tone="ok"] .ui-todo-list__icon { color: var(--ui-ok); background: color-mix(in srgb, var(--ui-ok) 14%, transparent); }
.ui-todo-list li[data-tone="ok"] { background: transparent; }

/* A bento column holding more than one card (Health check + shortcuts) */
.ui-col { display: flex; flex-direction: column; gap: 1rem; min-width: 0; }
.ui-col > .ui-card { flex: 0 0 auto; }
.ui-col > .ui-todo-card { flex: 1 1 auto; }

/* Shortcut tiles */
.ui-shortcuts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; margin-bottom: 1rem; }
.ui-shortcuts--grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; margin: 0; }
.ui-shortcuts--grid a { padding: .8rem .85rem; }
.ui-shortcuts a { display: flex; align-items: center; gap: .75rem; padding: .85rem 1rem; text-decoration: none; transition: border-color .15s, transform .15s; }
.ui-shortcuts a:hover { border-color: var(--ui-border-strong); transform: translateY(-1px); }
.ui-shortcuts a > span:last-child { display: grid; min-width: 0; line-height: 1.35; }
.ui-shortcuts strong { font-size: .8125rem; font-weight: 600; color: var(--ui-fg); }
.ui-shortcuts small { overflow: hidden; font-size: .75rem; color: var(--ui-muted); text-overflow: ellipsis; white-space: nowrap; }

/* ── Your stores ─────────────────────────────────────────────────────────── */
.ui-stores { z-index: 5; margin-bottom: 1rem; padding-bottom: 0; }   /* its row menus open over the sections below */
.ui-stores .ui-card__head { margin-bottom: 1rem; }
.ui-card__actions { display: flex; flex: 0 0 auto; gap: .5rem; }
.ui-count { display: inline-grid; place-items: center; min-width: 1.35rem; height: 1.35rem; padding: 0 .4rem; font-size: .75rem; font-weight: 600; color: var(--ui-muted); background: var(--ui-subtle); border: 1px solid var(--ui-border); border-radius: 999px; font-variant-numeric: tabular-nums; }
.ui-stores__list { display: grid; margin: 0 -1.25rem; padding: 0; list-style: none; border-top: 1px solid var(--ui-border); }
/* Fixed status and action columns, so every row lines up whatever its buttons are. */
.ui-stores__list > li { display: grid; grid-template-columns: minmax(0, 1.4fr) 10.5rem minmax(0, 1.3fr) 10.5rem; align-items: center; gap: 1rem; min-height: 4.625rem; padding: .75rem 1.25rem; transition: background .15s; }   /* one height with or without a line under the status */
.ui-stores__list > li:last-child { border-radius: 0 0 var(--ui-radius) var(--ui-radius); }
.ui-stores__actions { display: flex; align-items: center; justify-content: flex-end; gap: .4rem; min-width: 0; }
/* Row menu: "⋯" opens the store's options (the same menu look as the theme switch). */
.ui-rowmenu { position: relative; display: inline-flex; }
/* Rows are separate layers (their entrance animation), so the row whose menu is open is lifted above the rest. */
.ui-stores__list > li { position: relative; }
.ui-stores__list > li:has(.ui-rowmenu .ui-menu:not([hidden])) { z-index: 10; }
.ui-rowmenu .ui-menu { background: var(--ui-card); box-shadow: 0 16px 40px -12px rgba(15, 23, 42, .35), 0 0 0 1px rgba(0, 0, 0, .02); }
html[data-theme="dark"] .ui-rowmenu .ui-menu { box-shadow: 0 18px 44px -10px rgba(0, 0, 0, .85); }
.ui-rowmenu > .ui-icon-btn[aria-expanded="true"] { color: var(--ui-fg); background: var(--ui-hover); }
.ui-rowmenu .ui-menu { min-width: 12.5rem; }
.ui-menu a { display: flex; align-items: center; gap: .55rem; width: 100%; min-height: var(--ui-h-sm); box-sizing: border-box; padding: .35rem .55rem; font-size: .8125rem; color: var(--ui-fg-2); text-decoration: none; border-radius: var(--ui-radius-sm); }
.ui-menu a:hover, .ui-menu a:focus-visible, .ui-menu button:focus-visible { color: var(--ui-fg); background: var(--ui-hover); outline: none; }
.ui-menu hr { height: 1px; margin: .25rem .2rem; background: var(--ui-border); border: 0; }
.ui-menu .is-danger, .ui-menu .is-danger .ti { color: var(--ui-bad) !important; }
.ui-menu .is-danger:hover { background: color-mix(in srgb, var(--ui-bad) 10%, transparent); }
.ui-stores__list > li + li { border-top: 1px solid var(--ui-border); }
.ui-stores__list > li:hover { background: var(--ui-hover); }
.ui-stores__main { display: flex; align-items: center; gap: .85rem; min-width: 0; color: inherit; text-decoration: none; }
.ui-stores__name { display: grid; min-width: 0; line-height: 1.35; }
.ui-stores__name strong, .ui-stores__name small, .ui-stores__work span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui-stores__name strong { font-size: .875rem; font-weight: 600; color: var(--ui-fg); }
.ui-stores__main:hover strong { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--ui-border-strong); }
.ui-stores__name small { font-size: .75rem; color: var(--ui-muted); }
.ui-stores__state { display: grid; justify-items: center; gap: .3rem; min-width: 0; text-align: center; }
.ui-stores__state small { max-width: 100%; overflow: hidden; font-size: .75rem; color: var(--ui-faint); font-variant-numeric: tabular-nums; white-space: nowrap; text-overflow: ellipsis; }
.ui-stores__state small:empty { display: none; }       /* one short line under the status, or none (owner, 2026-09-28) */
.ui-stores__work { display: flex; align-items: center; gap: .5rem; min-width: 0; font-size: .8125rem; color: var(--ui-muted); }
.ui-stores__work .ti { flex: 0 0 auto; font-size: 1rem; color: var(--ui-faint); }
.ui-stores__work.is-busy { color: var(--ui-fg); }
.ui-stores__work.is-busy .ti { color: var(--ui-primary); animation: ui-spin 1s linear infinite; }
.ui-stores__empty { display: flex !important; flex-wrap: wrap; align-items: center; gap: 1rem !important; }
.ui-stores__empty > div { display: grid; flex: 1 1 18rem; gap: .15rem; }
.ui-stores__empty strong { font-size: .875rem; font-weight: 600; }
.ui-stores__empty small, .ui-stores__note { font-size: .8125rem; color: var(--ui-muted); }
.ui-stores__note { display: block !important; min-height: 0 !important; }
/* Loading placeholder */
.ui-stores__skeleton { display: flex !important; }
.ui-stores__skeleton i, .ui-stores__skeleton b { display: block; background: linear-gradient(90deg, var(--ui-subtle) 25%, var(--ui-hover) 50%, var(--ui-subtle) 75%); background-size: 200% 100%; animation: ui-shimmer 1.2s linear infinite; }
.ui-stores__skeleton i { width: 2.5rem; height: 2.5rem; border-radius: 50%; }
.ui-stores__skeleton span { display: grid; gap: .45rem; }
.ui-stores__skeleton b { width: 9rem; height: .7rem; border-radius: 4px; }
.ui-stores__skeleton b + b { width: 6rem; }
@keyframes ui-shimmer { to { background-position: -200% 0; } }

/* Store avatar: the seller's eBay profile photo, or their initial on a colour of their own; country in the corner. */
.ui-avatar {
  position: relative; display: inline-grid; place-items: center; flex: 0 0 auto; width: 2.5rem; height: 2.5rem; font-size: .9375rem; font-weight: 650; color: #fff;
  background: linear-gradient(135deg, var(--a1, #3b82f6), var(--a2, #8b5cf6)); border-radius: 50%; box-shadow: 0 0 0 1px var(--ui-border);
}
.ui-avatar img { width: 100%; height: 100%; object-fit: cover; background: #fff; border-radius: inherit; }
.ui-avatar__cc { position: absolute; right: -.4rem; bottom: -.25rem; padding: 0 .22rem; font-size: .5625rem; font-weight: 700; letter-spacing: .03em; line-height: .95rem; color: var(--ui-fg-2); background: var(--ui-card); border: 1px solid var(--ui-border); border-radius: 5px; }
.ui-avatar--xs { width: 1.3rem; height: 1.3rem; font-size: .625rem; }
.ui-avatar--xs img { background: #fff; }

/* Cloud teaser (no Cloud on the plan): one slim row */
.ui-cloud-teaser { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.25rem; margin-bottom: 1rem; }
.ui-cloud-teaser > div { flex: 1 1 20rem; }

/* Section heading between groups of cards (Performance) */
.ui-section-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: .6rem 1rem; margin: 1.75rem 0 .9rem; }
.ui-section-head h2 { margin: 0; font-size: 1.0625rem; font-weight: 650; letter-spacing: -.02em; color: var(--ui-fg); }
.ui-section-head p { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin: .3rem 0 0; font-size: .8125rem; color: var(--ui-muted); }
.ui-section-head p strong { font-weight: 600; color: var(--ui-fg); }

/* Automation: what is running now, then the last few finished */
.ui-tasks { display: grid; gap: .1rem; margin-top: .5rem; padding-top: .9rem; border-top: 1px solid var(--ui-border); }
.ui-tasks__label { margin: .2rem 0 .1rem; font-size: .6875rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--ui-faint); }
.ui-tasks__label + .ui-tasks__list { margin-bottom: .6rem; }
.ui-tasks__list { gap: .35rem !important; }
.ui-tasks__list[hidden], .ui-tasks__label[hidden] { display: none; }
.ui-tasks__list li { padding: .4rem .5rem !important; margin: 0 -.5rem; border-radius: 9px; }
.ui-tasks__list li[data-tone="busy"] { background: var(--ui-primary-soft); }
/* Up next: scheduled, not started: a calm row whose time counts down. */
.ui-tasks__list li[data-tone="next"] { background: color-mix(in srgb, var(--ui-fg) 3%, transparent); }
.ui-tasks__list li[data-tone="next"] .ui-activity__icon { color: var(--ui-primary); }
.ui-tasks__list li[data-tone="next"] .ui-activity__icon::after { display: none; }
.ui-tasks__list li[data-tone="next"] time { color: var(--ui-primary); font-weight: 600; }
.ui-tasks__list li[data-tone="busy"] .ui-activity__icon { color: var(--ui-primary); border-color: transparent; background: var(--ui-card); }
.ui-tasks__list li[data-tone="busy"] .ui-activity__icon::after { display: none; }
.ui-tasks__list li[data-tone="busy"] .ui-activity__icon::before {  /* spinner ring */
  content: ""; position: absolute; inset: -2px; border: 2px solid transparent; border-top-color: var(--ui-primary); border-right-color: var(--ui-primary); border-radius: 50%; animation: ui-spin .9s linear infinite;
}
.ui-tasks__list li[data-state="queued"] .ui-activity__icon::before { animation-duration: 2.4s; opacity: .45; }
.ui-tasks__idle strong { font-weight: 500 !important; color: var(--ui-muted) !important; }
.ui-tasks__idle .ui-activity__icon::after { display: none; }
.ui-times { margin-left: .3rem; padding: 0 .35rem; font-size: .6875rem; font-weight: 600; color: var(--ui-muted); background: var(--ui-subtle); border: 1px solid var(--ui-border); border-radius: 999px; vertical-align: 1px; }
.ui-tasks__list li[data-tone="busy"] strong { background: linear-gradient(110deg, var(--ui-fg) 40%, var(--ui-primary) 50%, var(--ui-fg) 60%); background-size: 250% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent; animation: ui-shine 2.2s linear infinite; }

/* Narrow screens: the store and its menu on the first line; its status, then what it's doing, left-aligned under the
   name (avatar width + gap), each on one line. On phones a "Connect eBay" button takes its own line below. */
@media (max-width: 900px) {
  .ui-stores__list > li { grid-template-columns: minmax(0, 1fr) auto; row-gap: .45rem; }
  .ui-stores__state { grid-column: 1 / -1; order: 2; display: flex; align-items: center; gap: .6rem; padding-left: 3.35rem; text-align: left; }
  .ui-stores__work { grid-column: 1 / -1; order: 3; padding-left: 3.35rem; }
  .ui-stores__actions { grid-column: 2; grid-row: 1; }
}
@media (max-width: 520px) {
  .ui-card__actions .ui-btn--ghost { display: none; }
  .ui-stores__actions { display: contents; }
  .ui-stores__actions .ui-rowmenu { grid-column: 2; grid-row: 1; }
  .ui-stores__setup { grid-column: 1 / -1; order: 4; justify-self: start; margin-left: 3.35rem; }
}

/* ── Shared Magic UI pieces (dashboard, leaderboard, pop-ups) ───────────────
   Particles (canvas, js/drobo-ui.js [data-ui-particles]) · Animated Gradient Text · Avatar Circles ·
   avatar glow ring · medal colours · Animated Circular Progress Bar (.ui-gauge). */
.ui-hero__meta--stack { flex-direction: column; align-items: flex-end; gap: .7rem; }
.ui-hero__chips { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .5rem; }
.ui-hero .ui-chip .ti { font-size: .95rem; }
a.ui-chip { text-decoration: none; transition: border-color .15s, transform .15s; }
a.ui-chip:hover { border-color: var(--ui-border-strong); transform: translateY(-1px); }
.ui-chip[data-medal] { color: var(--medal); border-color: color-mix(in srgb, var(--medal-lo) 45%, var(--ui-border)); background: color-mix(in srgb, var(--medal-lo) 10%, var(--ui-card)); }
.ui-chip[data-medal] strong { color: inherit; }
.ui-hero > .ui-particles { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; pointer-events: none; color: rgba(24, 24, 27, .55); }
html[data-theme="dark"] .ui-hero > .ui-particles { color: rgba(255, 255, 255, .8); }
.ui-gradient-anim {
  background: linear-gradient(90deg, #ffaa40, #9c40ff, #ffaa40); background-size: 300% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent; animation: ui-gradient-x 8s linear infinite;
}
@keyframes ui-gradient-x { to { background-position: 300% 0; } }
.ui-circles { display: flex; align-items: center; gap: .65rem; }
.ui-circles__stack { display: flex; align-items: center; }
.ui-circles__stack > * { margin-left: -.6rem; transition: transform .2s var(--ui-ease); }
.ui-circles__stack > :first-child { margin-left: 0; }
.ui-circles__stack > :hover { z-index: 1; transform: translateY(-2px) scale(1.08); }
.ui-circles__more { display: grid; place-items: center; width: 2.25rem; height: 2.25rem; font-size: .6875rem; font-weight: 700; color: var(--ui-fg); background: var(--ui-subtle); border-radius: 50%; box-shadow: 0 0 0 2.5px var(--ui-panel); }
.ui-circles__text { font-size: .8125rem; color: var(--ui-muted); white-space: nowrap; }
.ui-circles__text b { font-weight: 650; color: var(--ui-fg); }
.ui-circles .ui-avatar { width: 2.25rem; height: 2.25rem; font-size: .8rem; box-shadow: 0 0 0 2.5px var(--ui-panel); }
/* Avatar glow ring: a slowly turning conic ring with a soft glow behind (the leaderboard's photos use the same). */
.ui-avatar--ring { isolation: isolate; box-shadow: 0 0 0 2.5px var(--ui-card); }
.ui-avatar--ring::before { content: ""; position: absolute; inset: -4px; z-index: -1; border-radius: 50%; background: conic-gradient(from 0deg, var(--ring-a, var(--ui-primary)), var(--ring-b, var(--ui-violet)), var(--ring-a, var(--ui-primary)), var(--ring-b, var(--ui-violet)), var(--ring-a, var(--ui-primary))); animation: ui-spin 7s linear infinite; }
.ui-avatar--ring::after { content: ""; position: absolute; inset: -10px; z-index: -2; border-radius: 50%; pointer-events: none; background: radial-gradient(circle, color-mix(in srgb, var(--ring-a, var(--ui-primary)) 55%, transparent) 30%, transparent 70%); filter: blur(9px); opacity: .6; }
.ui-avatar--ring[data-medal] { --ring-a: var(--medal-lo); --ring-b: var(--medal-hi); }
.ui-medal-text, .ui-stat strong.ui-medal-text { background: linear-gradient(160deg, var(--medal-lo) 10%, var(--medal) 90%); -webkit-background-clip: text; background-clip: text; color: transparent; }
/* Medal colours: gold, silver, bronze (leaderboard podium, dashboard rank) */
[data-medal="1"] { --medal: #b45309; --medal-hi: #fde68a; --medal-lo: #f59e0b; --medal-ink: #713f12; }
[data-medal="2"] { --medal: #475569; --medal-hi: #f1f5f9; --medal-lo: #94a3b8; --medal-ink: #1e293b; }
[data-medal="3"] { --medal: #9a3412; --medal-hi: #fed7aa; --medal-lo: #c9773f; --medal-ink: #431407; }
html[data-theme="dark"] [data-medal="1"] { --medal: #fbbf24; }
html[data-theme="dark"] [data-medal="2"] { --medal: #cbd5e1; }
html[data-theme="dark"] [data-medal="3"] { --medal: #fdba74; }
.ui-gauge { position: relative; flex: 0 0 auto; width: 6.75rem; height: 6.75rem; }
.ui-gauge svg { display: block; width: 100%; height: 100%; overflow: visible; transform: rotate(-90deg); }
.ui-gauge circle { fill: none; stroke-width: 9; stroke-linecap: round; }
.ui-gauge__track { stroke: color-mix(in srgb, var(--ui-fg) 9%, transparent); stroke-dasharray: var(--t) 100; stroke-dashoffset: var(--o); transition: opacity .5s ease .9s; }
.ui-gauge__arc { stroke: url(#ui-gauge-blue); stroke-dasharray: var(--p) 100; transition: stroke-dasharray 1.5s var(--ui-ease) .35s; filter: drop-shadow(0 0 5px rgba(124, 58, 237, .35)); }
.ui-gauge.is-lead .ui-gauge__arc { stroke: url(#ui-gauge-gold); filter: drop-shadow(0 0 6px rgba(245, 158, 11, .45)); }
.ui-js .ui-fade:not(.is-in) .ui-gauge__arc { stroke-dasharray: 0 100; }
.ui-js .ui-fade:not(.is-in) .ui-gauge__track { opacity: 0; }
.ui-gauge__value { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; line-height: 1.1; }
.ui-gauge__value b { font-size: 1.35rem; font-weight: 700; letter-spacing: -.03em; color: var(--ui-fg); font-variant-numeric: tabular-nums; }
.ui-gauge__value small { font-size: .6875rem; color: var(--ui-muted); }

@media (max-width: 1180px) {
  .ui-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ui-features, .ui-shortcuts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .ui-bento, .ui-bento--even, .ui-offer { grid-template-columns: minmax(0, 1fr); }
  .ui-offer__copy { padding: 1.5rem 1.5rem 0; }
  .ui-offer__art { min-height: 10rem; }
  .ui-steps { grid-template-columns: minmax(0, 1fr); }
  .ui-steps li + li { border-left: 0; border-top: 1px solid var(--ui-border); }
  .ui-credits__grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 520px) {
  .ui-stats, .ui-features, .ui-shortcuts { grid-template-columns: minmax(0, 1fr); }
  .ui-flow__stage { padding: .5rem .25rem; }
}

/* Placeholders for sections still being built (section-by-section review). */
.ui-todo { display: grid; place-items: center; min-height: 9rem; margin-bottom: 1rem; font-size: .8125rem; color: var(--ui-faint);
  background: repeating-linear-gradient(135deg, transparent 0 10px, var(--ui-hover) 10px 11px); border: 1px dashed var(--ui-border-strong); border-radius: var(--ui-radius); }

/* ── Phones and tablets: the sidebar slides in ───────────────────────────── */
@media (max-width: 1023px) {
  .ui-shell { grid-template-columns: minmax(0, 1fr); }
  .ui-sidebar {
    position: fixed; top: 0; bottom: 0; left: 0; width: 17rem; height: auto; box-shadow: var(--ui-shadow-lg);
    transform: translateX(-102%); transition: transform .25s var(--ui-ease); border-right: 1px solid var(--ui-border);
  }
  .ui-shell[data-open] .ui-sidebar { transform: none; }
  .ui-sidebar .ui-sidebar__close { display: inline-grid; }
  .ui-scrim { position: fixed; inset: 0; z-index: 35; background: rgba(0, 0, 0, .4); backdrop-filter: blur(2px); }
  .ui-inset { margin: .5rem; }
  .ui-shell[data-collapsed] { --ui-sidebar-w: 16rem; }
}
@media (max-width: 640px) {
  .ui-hero__meta--stack { align-items: flex-start; }      /* under the greeting on phones: from the left, not floating */
  .ui-hero__chips { justify-content: flex-start; }
  .ui-main { padding: 1.25rem 1rem 3rem; }
  .ui-hero__inner { padding: 1.75rem 1rem 1.25rem; }
  .ui-inset { margin: 0; border-radius: 0; border-width: 0; }
  .ui-topbar { border-radius: 0; }
  .ui-topbar__download span, body.ui-app .nav-user-name, body.ui-app .nav-user-chevron { display: none; }
  .ui-topbar__download { width: var(--ui-h-sm); padding: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .ui-app *, .ui-app *::before, .ui-app *::after { animation: none !important; transition: none !important; }
  .ui-js .ui-fade, .ui-js .ui-fade li { opacity: 1 !important; filter: none !important; transform: none !important; }
  ::view-transition-new(root) { animation: none; }
  @view-transition { navigation: none; }
}

/* ── Compartments (shared: Orders "Last 90 days", Listings "Price refresh"): one card split into equal parts, each
   built the same: a label with its icon, the number, one note, and a picture strip of one height, so every row lines
   up across them. Four across only where each has room for its words, else two by two, one on phones. ── */
.ui-parts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--ui-border); }
.ui-part { display: flex; flex-direction: column; min-width: 0; padding: 1.1rem 1.25rem 1.25rem; }
.ui-part + .ui-part { border-left: 1px solid var(--ui-border); }
.ui-part__top { display: flex; align-items: center; justify-content: space-between; gap: .75rem; min-height: 1.9rem; }
.ui-part__label { overflow: hidden; font-size: .8125rem; font-weight: 550; color: var(--ui-muted); white-space: nowrap; text-overflow: ellipsis; }
.ui-part > strong { margin-top: .6rem; font-size: 1.75rem; font-weight: 700; line-height: 1.1; letter-spacing: -.03em; color: var(--ui-fg); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ui-part > small { margin-top: .3rem; overflow: hidden; font-size: .75rem; line-height: 1.4; color: var(--ui-muted); white-space: nowrap; text-overflow: ellipsis; }
.ui-part__viz { display: flex; align-items: flex-end; height: 2.6rem; margin-top: 1rem; }
.ui-part__viz > * { width: 100%; }
.ui-part .ui-stat__icon { transition: color .3s, background .3s; }
.ui-part .ui-stat__icon[data-tone=""] { color: var(--ui-faint); background: var(--ui-subtle); }
@media (max-width: 1459px) {
  .ui-parts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ui-part:nth-child(3) { border-left: 0; }
  .ui-part:nth-child(n+3) { border-top: 1px solid var(--ui-border); }
}
@media (max-width: 640px) {
  .ui-parts { grid-template-columns: minmax(0, 1fr); }
  .ui-part + .ui-part { border-left: 0; border-top: 1px solid var(--ui-border); }
  .ui-part { padding: 1rem; }
}
/* Progress line (shared, the compartments' strip; not the dashboard's boxed .ui-meter): the words on one line, a thin bar under them. data-tone ok / bad colours the bar. */
.ui-progress { display: grid; gap: .45rem; }
.ui-progress__text { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; font-size: .75rem; color: var(--ui-muted); }
.ui-progress__text b { font-weight: 650; color: var(--ui-fg); font-variant-numeric: tabular-nums; }
.ui-progress__track { display: block; height: .45rem; overflow: hidden; border-radius: 999px; background: color-mix(in srgb, var(--ui-fg) 8%, transparent); }
.ui-progress__track i { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--ui-primary), var(--ui-violet)); transition: width .9s var(--ui-ease); }
.ui-progress[data-tone="ok"] .ui-progress__track i { background: var(--ui-ok); }
.ui-progress[data-tone="bad"] .ui-progress__track i { background: var(--ui-bad); }
.ui-progress[data-tone="warn"] .ui-progress__track i { background: var(--ui-warn); }

/* FAQ accordions animated by js/drobo-ui.js (.ui-acc-js): the script eases the height, so the page's own CSS height
   transition steps aside, and the answer is clipped while it moves. */
.ui-acc-js details { overflow: hidden; }
.ui-acc-js details::details-content { transition: none !important; }
.ui-acc-js details[open]::details-content { height: auto !important; }

/* ── Plan compare: every feature, two groups side by side, a check or an X per plan (includes/plan_compare.html) ── */
.ui-compare.ui-card { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; padding: 0; overflow: hidden; border-radius: 18px; }
.ui-compare__group { padding: 1.25rem 1.5rem 1rem; }
.ui-compare__group + .ui-compare__group { border-left: 1px solid var(--ui-border); }
.ui-compare__head, .ui-compare li { display: grid; grid-template-columns: minmax(0, 1fr) 4.5rem 4.5rem; align-items: center; }
.ui-compare__head { padding-bottom: .7rem; border-bottom: 1px solid var(--ui-border); }
.ui-compare__head h3 { display: flex; align-items: center; gap: .45rem; margin: 0; font-size: .9375rem; font-weight: 650; color: var(--ui-fg); }
.ui-compare__head h3 .ti { color: var(--ui-muted); }
.ui-compare__head > span { font-size: .75rem; font-weight: 600; text-align: center; color: var(--ui-muted); }
.ui-compare__head > span.is-pick { color: var(--ui-fg); }
.ui-compare ul { margin: 0; padding: 0; list-style: none; }
.ui-compare li { min-height: 2.4rem; border-bottom: 1px solid color-mix(in oklab, var(--ui-border) 60%, transparent); }
.ui-compare li:last-child { border-bottom: 0; }
.ui-compare__what { padding: .45rem .5rem .45rem 0; font-size: .875rem; line-height: 1.3; color: var(--ui-fg-2); }
.ui-compare__mark { display: grid; place-items: center; }
.ui-compare__mark .ti { font-size: 1rem; }
.ui-compare__mark.is-yes .ti { color: var(--ui-ok); }
.ui-compare__mark.is-no .ti { color: var(--ui-muted); opacity: .55; }
@media (max-width: 860px) {
  .ui-compare.ui-card { grid-template-columns: 1fr; }
  .ui-compare__group + .ui-compare__group { border-left: 0; border-top: 1px solid var(--ui-border); }
}
@media (max-width: 420px) { .ui-compare__head, .ui-compare li { grid-template-columns: minmax(0, 1fr) 3.4rem 3.4rem; } .ui-compare__group { padding: 1rem; } }

/* ── Cloud's first-store deal on its plan card (includes/cloud_deal.html): a lit box, not small print ── */
.ui-deal { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .8rem; align-items: start; margin: .9rem 0 .2rem; padding: .9rem 1rem;
  border-radius: 14px; background: linear-gradient(135deg, color-mix(in oklab, #22c55e 16%, transparent), color-mix(in oklab, #8b5cf6 14%, transparent));
  border: 1px solid color-mix(in oklab, #22c55e 45%, transparent); box-shadow: 0 0 0 4px color-mix(in oklab, #22c55e 8%, transparent), 0 8px 28px -12px color-mix(in oklab, #22c55e 45%, transparent); }
.ui-deal__icon { display: grid; place-items: center; width: 2.4rem; height: 2.4rem; font-size: 1.3rem; color: #fff; border-radius: 11px;
  background: linear-gradient(135deg, #22c55e, #8b5cf6); box-shadow: 0 6px 16px -6px color-mix(in oklab, #22c55e 70%, transparent); }
.ui-deal__text { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem .55rem; margin: 0; }
.ui-deal__text strong { font-size: 1.15rem; font-weight: 750; letter-spacing: -.01em; color: var(--ui-fg); }
.ui-deal__tag { padding: .12rem .55rem; font-size: .75rem; font-weight: 650; color: color-mix(in oklab, #22c55e 80%, var(--ui-fg)); background: color-mix(in oklab, #22c55e 14%, transparent); border-radius: 999px; }
.ui-deal__text small { flex-basis: 100%; font-size: .8125rem; line-height: 1.4; color: var(--ui-fg-2); }
@media (prefers-reduced-motion: no-preference) {
  .ui-deal::after { content: ""; position: absolute; inset: -1px; border-radius: inherit; pointer-events: none; padding: 1px;
    background: linear-gradient(110deg, transparent 30%, color-mix(in oklab, #22c55e 90%, #fff) 50%, transparent 70%) 0 0 / 250% 100%;
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: ui-deal-sheen 4s linear infinite; }
  @keyframes ui-deal-sheen { to { background-position: -250% 0; } }
}

/* ── Streamer mode (Settings → Streamer mode; owner, 2026-10-13: "blur usersnames etc ... any personal stuff ... but you
   can still showcase/use"). The account's choice marks <html data-streamer> before the page paints (routes/app_pages.py
   _streamer_mode); every personal detail below is blurred and the page keeps working (clicks, menus, typing). Mark new
   personal text with data-private; these selectors cover what the pages already render. ── */
html[data-streamer] :is(
  [data-private],
  /* the account menu: your name, username, email and photo */
  .nav-user-avatar, .nav-user-avatar--initial, .nav-user-name, .nav-user-panel-avatar, .nav-user-panel-name,
  .nav-user-panel-handle, .nav-user-panel-email,
  /* every avatar: eBay store photos, buyers' and stores' initials */
  .ui-avatar, .ord-face, .pf-avatar,
  /* store names and eBay usernames */
  [data-ord-store-name], [data-msg-store-name], [data-ful-store-name], [data-lst-store-name], [data-up-store-name],
  [data-tax-store-name], [data-ful-store-label], [data-msg-set-sub], [data-lst-auto-sub], [data-up-bands-store],
  [data-tax-print-title], [data-tax-pl-sub], [data-pr-store], [data-sd-store], [data-ns-pay-sum="store"],
  [data-ns-store-name], [data-del-name], [data-ful-unlock-store], [data-mg-browser-title], [data-mg-browser-sub],
  [data-mg-panel-name], [data-mg-panel-user], .mg-name, .ui-stores__name, .ui-todo-list small, .ui-activity__list small,
  [data-lst-apply-sub] b, [data-lst-end-sub] b,
  :is([data-ord-store-menu], [data-msg-store-menu], [data-ful-store-menu], [data-lst-store-menu], [data-up-store-menu],
      [data-tax-store-menu]) :is(span, strong),
  /* buyers: names, usernames, addresses, phone; order, Amazon order and tracking numbers */
  .ord-buyer .ord-lines, .ord-state small, [data-ord-panel-ebay], .ord-address, .ord-tracking small, .ord-buy__facts a,
  .ord-buy__track, .ord-confirm small, [data-ord-tracking],
  /* buyer messages and drafts (buyers write their names and addresses) */
  .msg-row__top strong, .msg-row__last, [data-msg-head-name], [data-msg-head-sub], .msg-bubble p, .msg-draft__text,
  [data-msg-text], .msg-alert__says small,
  /* Amazon accounts and cards */
  .ful-acct-row__says strong, .ord-cardline, .ful-cardline, [data-ful-link-sub], [data-ful-acct-title], [data-pick-name],
  [data-pick-sub], [data-ful-card-number], [data-ful-card-name], [data-ful-card-exp], [data-ful-unlock-card],
  [data-ful-check-list] a, .ful-feed__says small, .ui-ns-method__text,
  /* postal codes, your profile, checkout, leaderboard and referral link */
  .sd-chip, #settings-username, #settings-bio, #settings-first-name, #settings-last-name, #checkout-name, #checkout-email,
  [data-lb-you-name], [data-lb-self], #affiliate-link
) {
  filter: blur(6px) !important;
}
/* The live store browser shows real eBay and Amazon pages: blurred harder (turn streamer mode off to sign in). */
html[data-streamer] :is(.cx-view [data-cx-image], [data-cx-url]) { filter: blur(14px) !important; }