/* Ostorya UI kit v1 — https://dev.ostorya.com/docs/design-system
   The look of Ostorya's own apps (Store, Ads Manager, AI Landing) as plain CSS, for Partner apps in the desktop.
   No build step and no framework: link it, put class="o-app" on <body>, then sync the desktop's theme (see the guide):
     <html data-theme="light|dark" class="reduce-glass?" style="--o-accent: <theme.accent>">
   Every class starts with o- and every variable with --o-, so it never clashes with your own CSS. */

:root {
  --o-font: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --o-accent: #627a66;
  --o-accent-soft: color-mix(in oklab, var(--o-accent) 14%, transparent);
  --o-accent-ink: var(--o-accent);
  --o-ink: #0b0b12;
  --o-muted: rgb(11 11 18 / 0.58);
  --o-line: rgb(20 20 20 / 0.07);
  --o-card-solid: #ffffff;
  --o-card-soft: rgb(20 20 20 / 0.05);
  --o-card-grad: linear-gradient(180deg, rgb(255 255 255 / 0.92) 0%, rgb(255 255 255 / 0.74) 55%, rgb(246 246 243 / 0.66) 100%);
  --o-card-border: rgb(255 255 255 / 0.5);
  --o-card-blur: 24px;
  --o-shadow-card: 0 1px 2px rgb(20 20 20 / 0.05), 0 18px 40px -22px rgb(20 20 20 / 0.35);
  --o-popover: rgb(255 255 255 / 0.95);
  --o-popover-border: rgb(0 0 0 / 0.08);
  --o-rail-active: #17171a;
  --o-on-active: #ffffff;
  --o-radius-card: 22px;
  --o-radius-field: 12px;
  --o-radius-menu: 14px;
  --o-dock-room: 92px;
  --o-tone-neutral-bg: rgb(20 20 20 / 0.06);  --o-tone-neutral-ink: #6b6f6c;
  --o-tone-good-bg: rgb(98 135 106 / 0.2);    --o-tone-good-ink: #3d5c45;
  --o-tone-info-bg: rgb(92 118 150 / 0.16);   --o-tone-info-ink: #445f7d;
  --o-tone-warn-bg: rgb(150 122 70 / 0.16);   --o-tone-warn-ink: #735d2e;
  --o-tone-bad-bg: rgb(160 90 80 / 0.15);     --o-tone-bad-ink: #864a41;   --o-tone-bad-solid: #9c5a50;
}
[data-theme="dark"] {
  --o-accent-ink: color-mix(in oklab, var(--o-accent) 50%, white);
  --o-ink: #f5f5f7;
  --o-muted: rgb(245 245 247 / 0.6);
  --o-line: rgb(255 255 255 / 0.08);
  --o-card-solid: #1b1b1e;
  --o-card-soft: rgb(255 255 255 / 0.07);
  --o-card-grad: linear-gradient(180deg, rgb(40 40 46 / 0.82) 0%, rgb(24 24 28 / 0.72) 100%);
  --o-card-border: rgb(255 255 255 / 0.1);
  --o-shadow-card: 0 1px 2px rgb(0 0 0 / 0.4), 0 18px 40px -22px rgb(0 0 0 / 0.6);
  --o-popover: rgb(30 30 34 / 0.96);
  --o-popover-border: rgb(255 255 255 / 0.1);
  --o-rail-active: #f4f4f5;
  --o-on-active: #17171a;
  --o-tone-neutral-bg: rgb(255 255 255 / 0.08); --o-tone-neutral-ink: #a3a6a4;
  --o-tone-good-bg: rgb(143 184 152 / 0.2);     --o-tone-good-ink: #b0d0b6;
  --o-tone-info-bg: rgb(146 170 200 / 0.17);    --o-tone-info-ink: #b4c6dc;
  --o-tone-warn-bg: rgb(200 172 120 / 0.16);    --o-tone-warn-ink: #d6c49b;
  --o-tone-bad-bg: rgb(214 150 140 / 0.16);     --o-tone-bad-ink: #ddaaa2;
  color-scheme: dark;
}
/* Reduce glass (the desktop setting, or the OS): solid cards, still floating. */
.reduce-glass { --o-card-grad: linear-gradient(var(--o-card-solid), var(--o-card-solid)); --o-card-blur: 0px; --o-popover: var(--o-card-solid); }
@media (prefers-reduced-transparency: reduce) {
  :root { --o-card-grad: linear-gradient(var(--o-card-solid), var(--o-card-solid)); --o-card-blur: 0px; --o-popover: var(--o-card-solid); }
}

/* ---------- Base ---------- */
html:has(> body.o-app), .o-app { background: transparent; }
.o-app { color: var(--o-ink); font-family: var(--o-font); font-size: 14px; line-height: 1.45; -webkit-font-smoothing: antialiased; }
.o-app *, .o-app *::before, .o-app *::after { box-sizing: border-box; }
.o-app :where(button, [role="button"], [role="switch"], [role="radio"], [role="tab"], [role="menuitem"], a[href], label) { cursor: pointer; }
.o-app :where(button:disabled, [aria-disabled="true"]) { cursor: not-allowed; opacity: 0.5; }
.o-muted { color: var(--o-muted); }
.o-stack { display: flex; flex-direction: column; gap: 16px; }
.o-row-gap { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.o-grid { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 768px) { .o-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .o-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .o-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.o-icon { width: 16px; height: 16px; flex-shrink: 0; }
.o-h1 { margin: 0; font-size: 22px; font-weight: 600; letter-spacing: -0.01em; }
.o-h2 { margin: 0; font-size: 18px; font-weight: 600; letter-spacing: -0.01em; }
.o-h3 { margin: 0 0 12px; font-size: 14px; font-weight: 600; }
.o-caption { font-size: 12px; color: var(--o-muted); }

/* ---------- Surfaces ---------- */
/* The frosted card: everything sits on it. Never add `filter` to it (it removes the blur). */
.o-card {
  border-radius: var(--o-radius-card); padding: 20px;
  background: var(--o-card-grad);
  -webkit-backdrop-filter: blur(var(--o-card-blur)) saturate(1.6); backdrop-filter: blur(var(--o-card-blur)) saturate(1.6);
  box-shadow: var(--o-shadow-card); border: 0.5px solid var(--o-card-border);
}
.o-card.o-flush { padding: 0; overflow: hidden; }
.o-inset { border-radius: 16px; background: var(--o-card-soft); padding: 16px; }

/* ---------- Buttons (always an icon + a word) ---------- */
.o-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 40px; padding: 0 16px;
  border: 0; border-radius: 999px; font: 500 13.5px/1 var(--o-font); color: var(--o-ink); white-space: nowrap;
  background: var(--o-card-soft); transition: filter 0.15s, background-color 0.15s, transform 0.1s;
}
.o-btn:hover:not(:disabled) { filter: brightness(1.04); }
.o-btn:active:not(:disabled) { transform: scale(0.98); }
.o-btn:focus-visible { outline: none; box-shadow: 0 0 0 4px color-mix(in srgb, var(--o-accent) 25%, transparent); }
.o-btn-primary {
  color: #fff;
  background:
    radial-gradient(120% 90% at 0% 0%, color-mix(in oklab, var(--o-accent) 55%, white) 0%, transparent 55%),
    linear-gradient(135deg, color-mix(in oklab, var(--o-accent) 88%, white) 0%, var(--o-accent) 50%, color-mix(in oklab, var(--o-accent) 72%, black) 100%);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.28), 0 10px 24px -12px color-mix(in oklab, var(--o-accent) 80%, black);
}
.o-btn-ghost { background: transparent; color: var(--o-muted); }
.o-btn-ghost:hover:not(:disabled) { background: var(--o-card-soft); color: var(--o-ink); filter: none; }
.o-btn-danger { color: #fff; background: var(--o-tone-bad-solid); }
.o-btn-sm { height: 36px; padding: 0 14px; font-size: 13px; }
.o-icon-btn { width: 36px; padding: 0; }
.o-btn-sm.o-icon-btn { width: 32px; height: 32px; }

/* ---------- Fields ---------- */
.o-label { display: block; margin-bottom: 6px; font-size: 13px; font-weight: 500; }
.o-help { margin-top: 6px; font-size: 12.5px; color: var(--o-muted); }
.o-field {
  display: block; width: 100%; height: 40px; padding: 0 12px; border: 1px solid transparent; border-radius: var(--o-radius-field);
  background: var(--o-card-soft); color: var(--o-ink); font: 14px var(--o-font); outline: none; transition: border-color 0.15s, background-color 0.15s, box-shadow 0.15s;
}
textarea.o-field { height: auto; min-height: 96px; padding: 10px 12px; line-height: 1.5; resize: vertical; }
.o-field::placeholder { color: var(--o-muted); }
.o-field:focus { border-color: var(--o-accent); background: var(--o-card-solid); box-shadow: 0 0 0 4px color-mix(in srgb, var(--o-accent) 15%, transparent); }
.o-field[aria-invalid="true"] { border-color: var(--o-tone-bad-ink); }
.o-search { position: relative; }
.o-search > .o-icon { position: absolute; inset-inline-start: 12px; top: 12px; color: var(--o-muted); pointer-events: none; }
.o-search > .o-field { padding-inline-start: 36px; }

.o-check { appearance: none; flex-shrink: 0; width: 18px; height: 18px; margin: 0; display: inline-grid; place-content: center; vertical-align: middle;
  background: var(--o-card-soft); border: 1px solid rgb(20 20 20 / 0.07); border-radius: 6px; transition: background-color 0.15s, border-color 0.15s; }
.o-check[type="radio"] { border-radius: 999px; }
.o-check:checked { background: var(--o-accent); border-color: var(--o-accent); }
.o-check[type="checkbox"]:checked::after { content: ""; width: 10px; height: 10px; background: #fff; clip-path: polygon(14% 52%, 0 66%, 38% 100%, 100% 22%, 86% 8%, 38% 72%); }
.o-check[type="radio"]:checked::after { content: ""; width: 6px; height: 6px; border-radius: 999px; background: #fff; }

/* Switch: <button role="switch" aria-checked="true" class="o-switch"></button> */
.o-switch { position: relative; flex-shrink: 0; width: 40px; height: 24px; padding: 0; border: 0; border-radius: 999px; background: rgb(0 0 0 / 0.2); transition: background-color 0.2s; }
[data-theme="dark"] .o-switch { background: rgb(255 255 255 / 0.2); }
.o-switch::after { content: ""; position: absolute; top: 2px; inset-inline-start: 2px; width: 20px; height: 20px; border-radius: 999px; background: #fff; box-shadow: 0 1px 3px rgb(0 0 0 / 0.25); transition: transform 0.2s cubic-bezier(.3,1.4,.5,1); }
.o-switch[aria-checked="true"] { background: var(--o-accent); }
.o-switch[aria-checked="true"]::after { transform: translateX(16px); }
[dir="rtl"] .o-switch[aria-checked="true"]::after { transform: translateX(-16px); }

/* Segmented control (periods, modes): <div role="radiogroup" class="o-seg"><button role="radio" aria-checked="true">… */
.o-seg { display: inline-flex; gap: 2px; max-width: 100%; padding: 4px; overflow-x: auto; scrollbar-width: none; border-radius: 999px; background: rgb(0 0 0 / 0.06); }
.o-seg::-webkit-scrollbar { display: none; }
[data-theme="dark"] .o-seg { background: rgb(255 255 255 / 0.08); }
.o-seg > button { display: inline-flex; align-items: center; gap: 6px; height: 36px; min-width: 64px; justify-content: center; padding: 0 14px; border: 0; border-radius: 999px;
  flex-shrink: 0; white-space: nowrap; background: transparent; color: var(--o-muted); font: 600 13.5px/1 var(--o-font); transition: color 0.15s; }
@media (max-width: 480px) { .o-seg > button { min-width: 0; padding: 0 12px; } }
.o-seg > button[aria-checked="true"] { color: var(--o-on-active);
  background: linear-gradient(160deg, color-mix(in oklab, var(--o-rail-active) 82%, white) 0%, var(--o-rail-active) 60%);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.18), 0 6px 14px -8px rgb(0 0 0 / 0.6); }
.o-seg.o-seg-accent > button[aria-checked="true"] { color: #fff; background: var(--o-accent); }

/* ---------- Status badges: always one of the five tones, never the accent ---------- */
.o-badge { display: inline-flex; align-items: center; gap: 4px; padding: 2px 10px; border-radius: 999px; font-size: 12px; font-weight: 500; line-height: 18px; white-space: nowrap;
  background: var(--o-tone-neutral-bg); color: var(--o-tone-neutral-ink); }
.o-badge .o-icon { width: 12px; height: 12px; }
.o-good { background: var(--o-tone-good-bg); color: var(--o-tone-good-ink); }
.o-info { background: var(--o-tone-info-bg); color: var(--o-tone-info-ink); }
.o-warn { background: var(--o-tone-warn-bg); color: var(--o-tone-warn-ink); }
.o-bad  { background: var(--o-tone-bad-bg);  color: var(--o-tone-bad-ink); }

/* ---------- KPI tile ---------- */
.o-kpi { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 18px; background: var(--o-card-soft); min-width: 0; }
.o-kpi-icon { display: grid; place-items: center; width: 32px; height: 32px; flex-shrink: 0; border-radius: 999px; background: var(--o-accent-soft); color: var(--o-accent-ink); }
.o-kpi-label { font-size: 12px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--o-muted); }
.o-kpi-value { margin-top: 2px; font-size: 20px; font-weight: 600; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------- Compact list (Orders is the model): one line per row ---------- */
.o-list { list-style: none; margin: 0; padding: 0; }
.o-list > li { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 6px 16px; border-top: 0.5px solid var(--o-line); }
.o-list > li:first-child { border-top: 0; }
.o-list > li[role="button"]:hover, .o-list > li > a:hover { background: var(--o-card-soft); }
.o-thumb { width: 36px; height: 36px; flex-shrink: 0; border-radius: 10px; object-fit: cover; background: var(--o-card-soft); }
.o-grow { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- Menus and popovers (your Select: never the native <select>) ---------- */
.o-popover { padding: 6px; border-radius: var(--o-radius-menu); background: var(--o-popover); border: 0.5px solid var(--o-popover-border); color: var(--o-ink);
  -webkit-backdrop-filter: blur(20px) saturate(1.4); backdrop-filter: blur(20px) saturate(1.4); box-shadow: 0 18px 50px -18px rgb(0 0 0 / 0.45); min-width: 200px; }
.o-menu-item { display: flex; width: 100%; align-items: center; gap: 8px; height: 36px; padding: 0 10px; border: 0; border-radius: 10px; background: transparent;
  color: inherit; font: 13.5px var(--o-font); text-align: start; }
.o-menu-item:hover, .o-menu-item[aria-selected="true"] { background: var(--o-card-soft); }
.o-menu-item[aria-selected="true"]::after { content: ""; margin-inline-start: auto; width: 14px; height: 14px; background: var(--o-accent-ink); clip-path: polygon(14% 52%, 0 66%, 38% 100%, 100% 22%, 86% 8%, 38% 72%); }
.o-menu-item.o-danger { color: var(--o-tone-bad-ink); }

/* ---------- Modals: dim the whole app, stay above the desktop dock ---------- */
.o-backdrop { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: 16px 16px var(--o-dock-room); background: rgb(0 0 0 / 0.3);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.o-modal { width: 100%; max-width: 480px; max-height: calc(100dvh - var(--o-dock-room) - 16px); overflow: auto; padding: 24px; border-radius: var(--o-radius-card);
  background: var(--o-popover); border: 0.5px solid var(--o-popover-border); box-shadow: 0 30px 80px -20px rgb(0 0 0 / 0.45); }
.o-modal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 20px; }

/* ---------- Empty state and loading ---------- */
.o-empty { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 40px 20px; }
.o-empty-icon { display: grid; place-items: center; width: 56px; height: 56px; margin-bottom: 16px; border-radius: 16px; background: var(--o-accent-soft); color: var(--o-accent-ink); }
.o-empty-icon .o-icon { width: 26px; height: 26px; }
.o-empty p { max-width: 420px; margin: 8px 0 20px; color: var(--o-muted); line-height: 1.55; }
.o-skeleton { display: block; border-radius: 8px; background: rgb(0 0 0 / 0.08); animation: o-pulse 1.6s ease-in-out infinite; }
[data-theme="dark"] .o-skeleton { background: rgb(255 255 255 / 0.08); }
@keyframes o-pulse { 50% { opacity: 0.5; } }
@media (prefers-reduced-motion: reduce) { .o-skeleton { animation: none; } .o-switch::after, .o-btn { transition: none; } }