/* =====================================================================
   OrderSprinter UI · Design-System v1.0
   ---------------------------------------------------------------------
   Plain CSS, keine Abhängigkeiten, kein Build. Alle Klassen mit Präfix
   "os-", damit nichts mit jQuery Mobile (ui-*) kollidiert.

   Theme:   data-theme="light" | "dark" auf <html> oder einem Container.
            Ohne Attribut gilt Hell.
   Layout:  .os-app ist ein Container (container-type: inline-size).
            Breakpoints: 560px (große Phones), 760px (Tablet: Bestellung
            + Warenkorb nebeneinander), 1100px (Desktop-Kasse 3-spaltig).
   Zustände (per JS als Klasse setzen):
            .is-active  gewählter Chip / Tab / Schnelltaste
            .is-open    Tisch mit offener Bestellung
            .is-disabled / [disabled]  nicht bedienbar (z. B. ausverkauft)
            .is-loading Button wartet auf Server
            .is-flash-a / .is-flash-b  Tap-Feedback (abwechselnd setzen,
                        damit die Animation bei jedem Tap neu startet)
   Datenfarben: Raum-, Kategorie- und Produktfarben kommen weiter aus der
            OrderSprinter-Datenbank. Kachel-/Zeilentönung inline setzen:
            background-color: color-mix(in oklab, <farbe> var(--os-tint-row), var(--os-surface))
   ===================================================================== */

/* ---------- 1. Tokens: Farben ---------- */
:root,
[data-theme="light"] {
  --os-bg: #f2f3ef;            /* Seitenhintergrund */
  --os-surface: #ffffff;       /* Karten, Sheets, Zeilen */
  --os-surface-2: #e9ebe6;     /* vertieft: Segmente, leere Leisten */
  --os-bar: #121518;           /* Kopfzeile, Warenkorb-Leiste */
  --os-bar-2: #2a3036;         /* Buttons in der Kopfzeile */
  --os-on-bar: #ffffff;
  --os-on-bar-2: #b9c1c9;
  --os-text: #111417;
  --os-text-2: #454d56;
  --os-text-3: #5f6872;
  --os-border: #d6dad3;
  --os-border-strong: #8f978f;
  --os-primary: #0b5e55;       /* Hauptaktion: Senden, Bezahlen */
  --os-primary-hover: #084b44;
  --os-on-primary: #ffffff;
  --os-primary-soft: #d9eee9;
  --os-primary-ink: #07443e;
  --os-danger: #b42318;
  --os-on-danger: #ffffff;
  --os-danger-soft: #fde6e3;
  --os-danger-ink: #8a1a12;
  --os-success: #146c43;
  --os-on-success: #ffffff;
  --os-success-soft: #dbf2e5;
  --os-success-ink: #0f5434;
  --os-send: #a8e283;          /* Senden: hellgrün */
  --os-send-hover: #96d86e;
  --os-on-send: #0f2a07;
  --os-kasse: #146c43;         /* Kasse: dunkelgrün */
  --os-kasse-hover: #0f5434;
  --os-on-kasse: #ffffff;
  --os-warning: #b45309;       /* "offen" / unbezahlt */
  --os-warning-soft: #fdebd3;
  --os-warning-ink: #7f3a05;
  --os-focus: #1d6fe0;
  /* OrderSprinter-Akzente – Fallback, wenn ein Datensatz keine Farbe hat */
  --os-accent-room: #bdee7a;
  --os-accent-cat: #aeeaea;
  --os-accent-prod: #fff066;
  /* Stärke der Daten-Tönung */
  --os-tint-tile: 46%;
  --os-tint-row: 32%;
  --os-shadow-1: 0 1px 2px rgba(17, 20, 23, .06), 0 1px 1px rgba(17, 20, 23, .04);
  --os-shadow-2: 0 12px 32px rgba(17, 20, 23, .2);
  --os-scrim: rgba(10, 12, 14, .52);
  color-scheme: light;
}

[data-theme="dark"] {
  --os-bg: #0d0f11;
  --os-surface: #171a1d;
  --os-surface-2: #23272b;
  --os-bar: #181b1f;
  --os-bar-2: #2a3036;
  --os-on-bar: #f3f5f6;
  --os-on-bar-2: #a9b1b9;
  --os-text: #f3f5f6;
  --os-text-2: #bcc3ca;
  --os-text-3: #9aa2ab;
  --os-border: #2e3338;
  --os-border-strong: #5b636c;
  --os-primary: #3ccbb4;
  --os-primary-hover: #5ad8c3;
  --os-on-primary: #04201b;
  --os-primary-soft: #113430;
  --os-primary-ink: #8fe6d6;
  --os-danger: #ff7b6b;
  --os-on-danger: #2a0905;
  --os-danger-soft: #3a1612;
  --os-danger-ink: #ffb4aa;
  --os-success: #4fd08b;
  --os-on-success: #05210f;
  --os-success-soft: #10301f;
  --os-success-ink: #9be8bd;
  --os-send: #8fd66a;
  --os-send-hover: #a3e080;
  --os-on-send: #0c2006;
  --os-kasse: #1d7a4c;
  --os-kasse-hover: #238e59;
  --os-on-kasse: #ffffff;
  --os-warning: #f5a54a;
  --os-warning-soft: #3a2611;
  --os-warning-ink: #ffcb8f;
  --os-focus: #7fb2ff;
  --os-tint-tile: 20%;
  --os-tint-row: 13%;
  --os-shadow-1: 0 1px 2px rgba(0, 0, 0, .45);
  --os-shadow-2: 0 14px 36px rgba(0, 0, 0, .6);
  --os-scrim: rgba(0, 0, 0, .62);
  color-scheme: dark;
}

/* ---------- 2. Tokens: Typografie, Abstände, Radius, Touch ---------- */
:root {
  --os-font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --os-font-mono: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --os-fs-xs: 12px;   /* Fußzeile, Meta */
  --os-fs-sm: 14px;   /* Hilfetext, Untertitel */
  --os-fs-md: 16px;   /* Standard */
  --os-fs-lg: 17px;   /* Produktname, Preis */
  --os-fs-xl: 20px;   /* Titel Kopfzeile, Sheet */
  --os-fs-2xl: 26px;  /* Kachel-Name */
  --os-fs-3xl: 40px;  /* Bon-Summe */
  --os-sp-1: 4px;
  --os-sp-2: 8px;
  --os-sp-3: 12px;
  --os-sp-4: 16px;
  --os-sp-5: 20px;
  --os-sp-6: 24px;
  --os-sp-8: 32px;
  --os-r-sm: 8px;
  --os-r-md: 12px;
  --os-r-lg: 16px;
  --os-r-xl: 22px;
  --os-r-pill: 999px;
  --os-hit: 48px;     /* Mindestgröße jeder Touch-Fläche */
  --os-hit-lg: 56px;  /* Hauptaktionen */
  --os-bar-h: 64px;
}

/* ---------- 3. App-Rahmen ---------- */
.os-app {
  container: osapp / inline-size;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: var(--os-bg);
  color: var(--os-text);
  font-family: var(--os-font);
  font-size: var(--os-fs-md);
  line-height: 1.35;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}
.os-app *, .os-ds * { box-sizing: border-box; }
.os-app button, .os-ds button, .os-app input, .os-app textarea { font: inherit; color: inherit; }
.os-app button, .os-ds button { cursor: pointer; }
.os-app :focus-visible, .os-ds :focus-visible { outline: 3px solid var(--os-focus); outline-offset: 2px; }
.os-vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.os-ic { width: 22px; height: 22px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.os-ic--sm { width: 18px; height: 18px; }
.os-ic--lg { width: 26px; height: 26px; }
.num, .os-num { font-variant-numeric: tabular-nums; }

.os-screen { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.os-scroll {
  flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  padding: var(--os-sp-4); display: flex; flex-direction: column; gap: var(--os-sp-4);
}
.os-scroll--nav { padding-top: 0; }
.os-scroll--nav > :first-child { margin-top: var(--os-sp-4); }

/* ---------- 4. Kopfzeile ---------- */
.os-topbar {
  display: flex; align-items: center; gap: var(--os-sp-2);
  min-height: var(--os-bar-h); padding: var(--os-sp-2) var(--os-sp-3);
  background: var(--os-bar); color: var(--os-on-bar); flex: none;
}
.os-topbar__title { flex: 1; min-width: 0; display: flex; flex-direction: column; padding: 0 var(--os-sp-1); }
.os-topbar__h { margin: 0; font-size: var(--os-fs-xl); font-weight: 800; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.os-topbar__sub { margin: 0; font-size: 13px; color: var(--os-on-bar-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.os-barbtn {
  min-width: var(--os-hit); height: var(--os-hit); padding: 0 var(--os-sp-3);
  display: inline-flex; align-items: center; justify-content: center; gap: var(--os-sp-2);
  border: 0; border-radius: var(--os-r-md); background: var(--os-bar-2); color: var(--os-on-bar); font-weight: 700;
}
.os-barbtn:active { transform: scale(.96); }
.os-net {
  height: 36px; padding: 0 10px; display: inline-flex; align-items: center; gap: 6px;
  border-radius: var(--os-r-pill); font-size: 13px; font-weight: 700; color: var(--os-on-bar);
  background: rgba(255, 255, 255, .08);
}
.os-net .os-ic { width: 18px; height: 18px; }
.os-net--ok .os-ic { color: #5fdc9c; }
.os-net--weak .os-ic { color: #f8bf5b; }
.os-net--off { background: #b42318; color: #fff; }
.os-net__text { display: none; }
@container osapp (min-width: 560px) { .os-net__text { display: inline; } }

/* ---------- 5. Banner (Netz-Status) ---------- */
.os-banner {
  display: flex; align-items: flex-start; gap: var(--os-sp-3); flex: none;
  padding: var(--os-sp-3) var(--os-sp-4); font-size: var(--os-fs-sm); line-height: 1.4;
}
.os-banner--error { background: var(--os-danger-soft); color: var(--os-danger-ink); }
.os-banner--warn { background: var(--os-warning-soft); color: var(--os-warning-ink); }

/* ---------- 6. Überschriften, Leerzustände, Fußzeile ---------- */
.os-h2 { margin: 0; font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: .07em; color: var(--os-text-2); }
.os-hint { margin: -8px 0 0; font-size: var(--os-fs-sm); color: var(--os-text-3); }
.os-empty {
  margin: 0; padding: var(--os-sp-5) var(--os-sp-4); text-align: center;
  color: var(--os-text-3); font-size: var(--os-fs-sm);
  border: 1.5px dashed var(--os-border); border-radius: var(--os-r-md);
}
.os-footer {
  margin-top: auto; padding-top: var(--os-sp-3);
  display: flex; justify-content: space-between; gap: var(--os-sp-3);
  font-size: var(--os-fs-xs); color: var(--os-text-3);
}

/* ---------- 7. Kachel (Raum, Tisch, Kategorie) ---------- */
.os-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--os-sp-3); }
.os-grid--tables { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@container osapp (min-width: 560px) {
  .os-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .os-grid--tables { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@container osapp (min-width: 900px) {
  .os-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .os-grid--tables { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}
@container osapp (min-width: 1100px) {
  .os-grid--rooms { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
.os-tile {
  position: relative; overflow: hidden; min-height: 104px; width: 100%;
  display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-end; gap: 2px;
  padding: var(--os-sp-4) var(--os-sp-3) var(--os-sp-3) var(--os-sp-4); text-align: left;
  background: var(--os-surface); border: 1px solid var(--os-border); border-radius: var(--os-r-lg);
  box-shadow: var(--os-shadow-1); transition: transform .08s ease;
}
.os-tile:active { transform: scale(.97); }
.os-tile__bar { position: absolute; top: 0; left: 0; right: 0; height: 6px; }
.os-tile__name { font-size: var(--os-fs-2xl); font-weight: 800; letter-spacing: -.02em; line-height: 1.1; overflow-wrap: anywhere; }
.os-tile__meta { font-size: 13px; font-weight: 600; color: var(--os-text-2); }
.os-tile__open { margin-top: 4px; font-size: 13px; font-weight: 800; color: var(--os-warning-ink); }
.os-tile__chev { position: absolute; top: 14px; right: 12px; color: var(--os-text-2); }
/* Kategorie-Kachel: niedriger, Name kleiner */
.os-tile--cat { min-height: 76px; padding-right: 36px; }
.os-tile--cat .os-tile__name { font-size: var(--os-fs-lg); letter-spacing: 0; }
/* Tisch-Kachel */
.os-tile--table { min-height: 92px; padding: var(--os-sp-3); }
.os-tile--table .os-tile__name { font-size: 24px; }
.os-tile__status { font-size: 13px; font-weight: 600; color: var(--os-text-3); }
.os-tile__amount { font-size: var(--os-fs-lg); font-weight: 800; color: var(--os-warning-ink); font-variant-numeric: tabular-nums; }
.os-tile.is-open { background: var(--os-warning-soft); border: 2px solid var(--os-warning); }
.os-tile.is-open .os-tile__status { color: var(--os-warning-ink); }
.os-tile.is-current { outline: 3px solid var(--os-text); outline-offset: -3px; opacity: .45; }

/* Legende über den Tischen */
.os-legend { display: flex; flex-wrap: wrap; align-items: center; gap: var(--os-sp-2) var(--os-sp-4); font-size: 13px; color: var(--os-text-2); }
.os-legend__item { display: inline-flex; align-items: center; gap: 6px; }
.os-legend__dot { width: 14px; height: 14px; border-radius: 4px; background: var(--os-surface); border: 1px solid var(--os-border-strong); }
.os-legend__dot--open { background: var(--os-warning-soft); border: 2px solid var(--os-warning); }
.os-legend__sum { margin-left: auto; font-weight: 800; color: var(--os-text); }

/* ---------- 8. Tabs / Segmente / Chips / Breadcrumb ---------- */
.os-tabs { display: flex; align-items: center; gap: var(--os-sp-2); padding: var(--os-sp-3) var(--os-sp-4) 0; flex: none; }
.os-seg { flex: 1; display: flex; gap: 4px; padding: 4px; background: var(--os-surface-2); border-radius: var(--os-r-md); min-width: 0; }
.os-seg__btn {
  flex: 1; min-height: 44px; border: 0; border-radius: 9px; background: transparent;
  font-size: 15px; font-weight: 700; color: var(--os-text-2);
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; white-space: nowrap;
}
.os-seg__btn.is-active { background: var(--os-surface); color: var(--os-text); box-shadow: var(--os-shadow-1); }
.os-seg__badge {
  padding: 2px 7px; border-radius: var(--os-r-pill); font-size: 12px; font-weight: 800;
  background: var(--os-warning-soft); color: var(--os-warning-ink); font-variant-numeric: tabular-nums;
}
.os-catnav {
  position: sticky; top: 0; z-index: 5; display: flex; flex-direction: column; gap: var(--os-sp-2);
  margin: 0 calc(-1 * var(--os-sp-4)); padding: var(--os-sp-2) var(--os-sp-4);
  background: var(--os-bg); border-bottom: 1px solid var(--os-border);
}
.os-chips { display: flex; gap: var(--os-sp-2); overflow-x: auto; scrollbar-width: none; margin: 0 calc(-1 * var(--os-sp-4)); padding: 0 var(--os-sp-4); }
.os-chips::-webkit-scrollbar { display: none; }
.os-chip {
  flex: none; min-height: var(--os-hit); padding: 0 var(--os-sp-4);
  display: inline-flex; align-items: center; gap: var(--os-sp-2);
  border: 1px solid var(--os-border); border-radius: var(--os-r-pill); background: var(--os-surface);
  font-size: 15px; font-weight: 700; white-space: nowrap;
}
.os-chip__dot { width: 10px; height: 10px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .18); }
.os-chip.is-active { background: var(--os-text); color: var(--os-bg); border-color: var(--os-text); }
.os-chips--sub .os-chip { min-height: 44px; font-size: 14px; background: transparent; }
.os-chips--sub .os-chip.is-active { background: var(--os-primary-soft); color: var(--os-primary-ink); border-color: var(--os-primary); }
.os-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; font-size: var(--os-fs-sm); }
.os-crumbs__btn { min-height: 40px; padding: 0 8px; border: 0; background: none; font-weight: 700; color: var(--os-primary-ink); border-radius: var(--os-r-sm); }
.os-crumbs__sep { color: var(--os-text-3); }

/* ---------- 9. Suche ---------- */
.os-search { position: relative; }
.os-search__ic { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--os-text-3); pointer-events: none; }
.os-search__input {
  width: 100%; height: 52px; padding: 0 52px 0 46px;
  border: 1.5px solid var(--os-border-strong); border-radius: var(--os-r-md);
  background: var(--os-surface); font-size: var(--os-fs-md);
}
.os-search__input::placeholder { color: var(--os-text-3); }
.os-search__clear { position: absolute; right: 2px; top: 2px; width: 48px; height: 48px; border: 0; background: none; color: var(--os-text-2); display: inline-flex; align-items: center; justify-content: center; }

/* ---------- 10. Produktzeile & Abschnitts-Trenner ---------- */
.os-list { display: flex; flex-direction: column; gap: 6px; }
.os-prod {
  position: relative; width: 100%; min-height: 60px;
  display: flex; align-items: center; gap: var(--os-sp-3);
  padding: 10px var(--os-sp-4); text-align: left;
  background: var(--os-surface); border: 1px solid var(--os-border); border-radius: var(--os-r-md);
  transition: transform .08s ease;
}
.os-prod:active:not(:disabled) { transform: scale(.985); }
.os-prod__main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.os-prod__name { font-size: var(--os-fs-lg); font-weight: 650; line-height: 1.25; overflow-wrap: anywhere; }
.os-prod__path { font-size: 12px; color: var(--os-text-2); }
.os-prod__stock { font-size: 13px; font-weight: 800; color: var(--os-danger-ink); }
.os-prod__price { font-size: var(--os-fs-lg); font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
.os-prod__qty {
  min-width: 40px; height: 32px; padding: 0 8px; border-radius: var(--os-r-pill);
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--os-text); color: var(--os-bg); font-size: 15px; font-weight: 800; font-variant-numeric: tabular-nums;
}
.os-prod.has-qty { border: 2px solid var(--os-text); padding: 9px 15px; }
.os-prod:disabled, .os-prod.is-disabled { cursor: not-allowed; }
.os-prod:disabled .os-prod__name, .os-prod:disabled .os-prod__price { opacity: .55; text-decoration: line-through; text-decoration-thickness: 1.5px; }
.os-sep {
  display: flex; align-items: center; gap: var(--os-sp-3);
  margin: var(--os-sp-3) 0 2px; padding: 0 2px;
  font-size: 13px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--os-text-2);
}
.os-sep::after { content: ""; flex: 1; height: 1.5px; background: var(--os-border); }
.os-list > .os-sep:first-child { margin-top: 0; }

@keyframes os-flash-a { 0% { box-shadow: 0 0 0 0 var(--os-primary); transform: scale(.98); } 45% { box-shadow: 0 0 0 5px color-mix(in oklab, var(--os-primary) 40%, transparent); } 100% { box-shadow: 0 0 0 0 transparent; transform: none; } }
@keyframes os-flash-b { 0% { box-shadow: 0 0 0 0 var(--os-primary); transform: scale(.98); } 45% { box-shadow: 0 0 0 5px color-mix(in oklab, var(--os-primary) 40%, transparent); } 100% { box-shadow: 0 0 0 0 transparent; transform: none; } }
@keyframes os-bump-a { 0% { transform: scale(1.35); } 100% { transform: scale(1); } }
@keyframes os-bump-b { 0% { transform: scale(1.35); } 100% { transform: scale(1); } }
.os-prod.is-flash-a { animation: os-flash-a .45s ease-out; }
.os-prod.is-flash-b { animation: os-flash-b .45s ease-out; }
.os-prod.is-flash-a .os-prod__qty { animation: os-bump-a .3s ease-out; }
.os-prod.is-flash-b .os-prod__qty { animation: os-bump-b .3s ease-out; }

/* ---------- 11. Karten & aufklappbare Bereiche ---------- */
.os-card { background: var(--os-surface); border: 1px solid var(--os-border); border-radius: var(--os-r-lg); overflow: hidden; }
.os-card__head {
  width: 100%; min-height: 56px; display: flex; align-items: center; gap: var(--os-sp-3);
  padding: 0 var(--os-sp-4); border: 0; background: none; text-align: left;
}
.os-card__title { margin: 0; flex: 1; font-size: var(--os-fs-md); font-weight: 800; }
.os-card__sum { font-weight: 800; font-variant-numeric: tabular-nums; }
.os-card__count { min-width: 26px; height: 24px; padding: 0 7px; border-radius: var(--os-r-pill); background: var(--os-surface-2); font-size: 12px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; }
.os-card__body { padding: 0 var(--os-sp-4) var(--os-sp-4); display: flex; flex-direction: column; gap: 6px; }
.os-chev { transition: transform .15s ease; color: var(--os-text-2); }
.os-chev.is-up { transform: rotate(180deg); }
.os-row { display: flex; align-items: center; gap: var(--os-sp-3); min-height: 48px; border-top: 1px solid var(--os-border); }
.os-row:first-child { border-top: 0; }
.os-row__qty { min-width: 36px; font-weight: 800; font-variant-numeric: tabular-nums; }
.os-row__name { flex: 1; min-width: 0; font-weight: 600; }
.os-row__note { display: block; font-size: 13px; font-weight: 500; color: var(--os-text-2); }
.os-row__price { font-weight: 700; font-variant-numeric: tabular-nums; }
.os-pill { padding: 2px 8px; border-radius: var(--os-r-pill); font-size: 12px; font-weight: 800; white-space: nowrap; }
.os-pill--warn { background: var(--os-warning-soft); color: var(--os-warning-ink); }
.os-log { display: grid; grid-template-columns: 48px 1fr; gap: 2px var(--os-sp-3); padding: 10px 0; border-top: 1px solid var(--os-border); font-size: var(--os-fs-sm); }
.os-log:first-child { border-top: 0; }
.os-log__time { font-weight: 800; font-variant-numeric: tabular-nums; }
.os-log__user { grid-column: 2; font-size: 12px; color: var(--os-text-3); }
.os-actions { display: grid; grid-template-columns: 1fr 1fr; gap: var(--os-sp-3); }

/* ---------- 12. Buttons ---------- */
.os-btn {
  min-height: var(--os-hit); padding: 0 var(--os-sp-5);
  display: inline-flex; align-items: center; justify-content: center; gap: var(--os-sp-2);
  border: 1.5px solid transparent; border-radius: var(--os-r-md);
  font-size: var(--os-fs-md); font-weight: 750; line-height: 1.1; text-align: center;
  transition: transform .08s ease, background-color .12s ease;
}
.os-btn:active:not(:disabled) { transform: scale(.97); }
.os-btn--primary { background: var(--os-primary); color: var(--os-on-primary); }
.os-btn--primary:hover:not(:disabled) { background: var(--os-primary-hover); }
.os-btn--secondary { background: var(--os-surface); color: var(--os-text); border-color: var(--os-border-strong); }
.os-btn--soft { background: var(--os-primary-soft); color: var(--os-primary-ink); }
.os-btn--danger { background: var(--os-danger); color: var(--os-on-danger); }
.os-btn--send { background: var(--os-send); color: var(--os-on-send); font-weight: 800; }
.os-btn--send:hover:not(:disabled) { background: var(--os-send-hover); }
.os-btn--kasse { background: var(--os-kasse); color: var(--os-on-kasse); font-weight: 800; }
.os-btn--kasse:hover:not(:disabled) { background: var(--os-kasse-hover); }
.os-btn--ghost { background: transparent; color: var(--os-text); }
.os-btn--lg { min-height: var(--os-hit-lg); font-size: var(--os-fs-lg); border-radius: 14px; }
.os-btn--sm { min-height: 40px; padding: 0 var(--os-sp-4); font-size: 15px; }
.os-btn--block { width: 100%; }
.os-btn:disabled, .os-btn.is-disabled { opacity: .42; cursor: not-allowed; }
.os-btn.is-loading { cursor: progress; opacity: .85; }
.os-spin { width: 18px; height: 18px; border-radius: 50%; border: 2.5px solid currentColor; border-right-color: transparent; animation: os-spin .7s linear infinite; flex: none; }
@keyframes os-spin { to { transform: rotate(360deg); } }
.os-iconbtn {
  width: var(--os-hit); height: var(--os-hit); flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--os-border); border-radius: var(--os-r-md); background: var(--os-surface); color: var(--os-text);
}
.os-iconbtn--plain { border-color: transparent; background: transparent; }
.os-iconbtn--danger { color: var(--os-danger-ink); }
.os-iconbtn.is-active { background: var(--os-primary-soft); color: var(--os-primary-ink); border-color: var(--os-primary); }
.os-round {
  width: var(--os-hit); height: var(--os-hit); flex: none; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; background: var(--os-primary); color: var(--os-on-primary);
}
.os-round--minus { background: var(--os-surface); color: var(--os-text); border: 1.5px solid var(--os-border-strong); }
.os-round:active { transform: scale(.92); }

/* ---------- 13. Warenkorb-Leiste (Neue Order) ---------- */
.os-dock { flex: none; display: flex; flex-direction: column; gap: var(--os-sp-2); padding: var(--os-sp-2) var(--os-sp-3) var(--os-sp-3); background: var(--os-bg); border-top: 1px solid var(--os-border); }
.os-dock__tools { display: flex; align-items: center; gap: var(--os-sp-2); min-height: var(--os-hit); }
.os-dock__tools .os-last { align-self: center; flex: 0 1 auto; min-width: 0; }
.os-dock__search { flex: 1; min-width: 0; }
.os-dock__search .os-search__input { height: var(--os-hit); }
.os-dock__search .os-search__clear { top: 0; }
.os-dock__kasse { margin-left: auto; flex: none; }
.os-tablesec { display: flex; flex-direction: column; gap: var(--os-sp-3); margin-top: var(--os-sp-2); padding-top: var(--os-sp-4); border-top: 1px solid var(--os-border); }
.os-last {
  align-self: flex-start; max-width: 100%; min-height: 44px; padding: 0 6px 0 14px;
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid var(--os-border-strong); border-radius: var(--os-r-pill); background: var(--os-surface);
  font-size: 15px;
}
.os-last__label { color: var(--os-text-2); font-weight: 600; }
.os-last__name { font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.os-last__plus { width: 34px; height: 34px; border-radius: 50%; background: var(--os-text); color: var(--os-bg); display: inline-flex; align-items: center; justify-content: center; flex: none; }
.os-cartbar {
  display: flex; align-items: stretch; gap: 4px; min-height: 64px; padding: 4px;
  border-radius: var(--os-r-lg); background: var(--os-bar); color: var(--os-on-bar); box-shadow: var(--os-shadow-2);
}
.os-cartbar__open {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: var(--os-sp-3);
  padding: 0 var(--os-sp-3); border: 0; background: none; color: inherit; text-align: left; border-radius: var(--os-r-md);
}
.os-cartbar__icon { position: relative; display: inline-flex; }
.os-cartbar__badge { position: absolute; top: -8px; right: -10px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px; background: var(--os-accent-prod); color: #111; font-size: 12px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; }
.os-cartbar__text { display: flex; flex-direction: column; min-width: 0; }
.os-cartbar__k { font-size: 12px; font-weight: 700; color: var(--os-on-bar-2); text-transform: uppercase; letter-spacing: .06em; }
.os-cartbar__v { font-size: var(--os-fs-lg); font-weight: 800; white-space: nowrap; font-variant-numeric: tabular-nums; }
.os-cartbar__send { flex: none; min-width: 96px; padding: 0 var(--os-sp-3); border-radius: var(--os-r-md); }
/* Kasse sendet eine offene Order automatisch mit (Verhalten wie im Original) */
.os-cartbar__kasse { flex: none; min-width: 120px; padding: 0 var(--os-sp-4); border-radius: var(--os-r-md); }
.os-cartbar--empty { background: var(--os-surface-2); color: var(--os-text-2); box-shadow: none; align-items: center; padding: 4px 4px 4px var(--os-sp-4); gap: var(--os-sp-3); font-weight: 700; }
.os-cartbar--empty .os-cartbar__kasse { min-height: 56px; }
.os-dock__send { flex: none; margin-left: auto; padding: 0 var(--os-sp-4); }
@container osapp (min-width: 760px) { .os-dock__send { display: none; } }
.os-cartbar__hint { flex: 1; min-width: 0; }

/* Warenkorb-Zeile (Sheet und Seitenpanel) */
.os-line { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: var(--os-sp-2) var(--os-sp-3); padding: var(--os-sp-3) 0; border-bottom: 1px solid var(--os-border); }
.os-line__info { display: flex; flex-direction: column; min-width: 0; }
.os-line__name { font-size: var(--os-fs-lg); font-weight: 750; }
.os-line__unit { font-size: 13px; color: var(--os-text-2); }
.os-line__note { margin-top: 4px; display: inline-flex; align-items: center; gap: 6px; font-size: var(--os-fs-sm); font-weight: 600; color: var(--os-primary-ink); }
.os-line__total { font-size: var(--os-fs-lg); font-weight: 800; font-variant-numeric: tabular-nums; }
.os-line__ctrl { grid-column: 1 / -1; display: flex; align-items: center; gap: var(--os-sp-2); }
.os-line__ctrl .os-stepper { margin-right: auto; }
.os-stepper { display: inline-flex; align-items: center; border: 1.5px solid var(--os-border-strong); border-radius: var(--os-r-pill); background: var(--os-surface); }
.os-stepper button { width: var(--os-hit); height: var(--os-hit); border: 0; background: none; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; }
.os-stepper button:disabled { opacity: .35; cursor: not-allowed; }
.os-stepper__val { min-width: 32px; text-align: center; font-size: var(--os-fs-lg); font-weight: 800; font-variant-numeric: tabular-nums; }
.os-sumrow { display: flex; justify-content: space-between; align-items: baseline; font-size: var(--os-fs-md); color: var(--os-text-2); }
.os-sumrow strong { font-size: 24px; color: var(--os-text); font-variant-numeric: tabular-nums; }

/* ---------- 14. Bestell-Layout (Phone: gestapelt · ab 760px: Warenkorb rechts) ---------- */
.os-order { flex: 1; min-height: 0; display: flex; }
.os-order__main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.os-cartpanel { display: none; }
@container osapp (min-width: 760px) {
  .os-dock__cart { display: none; }
  .os-cartpanel {
    display: flex; flex-direction: column; width: 360px; flex: none;
    background: var(--os-surface); border-left: 1px solid var(--os-border);
  }
  .os-cartpanel__head { display: flex; align-items: center; gap: var(--os-sp-3); padding: var(--os-sp-4); border-bottom: 1px solid var(--os-border); }
  .os-cartpanel__title { margin: 0; flex: 1; font-size: var(--os-fs-xl); font-weight: 800; }
  .os-cartpanel__body { flex: 1; min-height: 0; overflow-y: auto; padding: 0 var(--os-sp-4) var(--os-sp-4); display: flex; flex-direction: column; }
  .os-cartpanel__body .os-last { margin-top: var(--os-sp-3); }
  .os-cartpanel__body .os-empty { margin-top: var(--os-sp-4); }
  .os-cartpanel__foot { padding: var(--os-sp-4); border-top: 1px solid var(--os-border); display: flex; flex-direction: column; gap: var(--os-sp-3); }
}
@container osapp (min-width: 1100px) { .os-cartpanel { width: 420px; } }

/* ---------- 15. Kasse ---------- */
.os-pay { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--os-sp-4); align-items: start; }
@container osapp (min-width: 760px) {
  .os-pay { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .os-pay__receipt { grid-column: 1 / -1; }
}
@container osapp (min-width: 1100px) {
  .os-pay { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 380px; }
  .os-pay__receipt { grid-column: auto; }
}
.os-payrow { display: flex; align-items: center; gap: var(--os-sp-3); min-height: 64px; padding: 6px 6px 6px var(--os-sp-3); border: 1px solid var(--os-border); border-radius: var(--os-r-md); background: var(--os-surface); }
.os-payrow__qty { min-width: 36px; font-size: var(--os-fs-lg); font-weight: 800; font-variant-numeric: tabular-nums; }
.os-payrow__info { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.os-payrow__name { font-weight: 750; overflow-wrap: anywhere; }
.os-payrow__meta { font-size: 13px; color: var(--os-text-2); }
.os-payrow__total { font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
.os-card--bon { border: 2px solid var(--os-text); }
.os-bontotal { padding: 0 var(--os-sp-4) var(--os-sp-3); font-size: var(--os-fs-3xl); font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; line-height: 1; }
.os-paybar { flex: none; display: grid; grid-template-columns: 1fr 1fr; gap: var(--os-sp-2) var(--os-sp-3); padding: var(--os-sp-3); background: var(--os-surface); border-top: 1px solid var(--os-border); }
.os-paybar__sum { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: baseline; font-size: var(--os-fs-sm); color: var(--os-text-2); font-weight: 700; }
.os-paybar__sum strong { font-size: var(--os-fs-xl); color: var(--os-text); font-variant-numeric: tabular-nums; }
@container osapp (min-width: 760px) {
  .os-paybar { grid-template-columns: 1fr auto auto; align-items: center; padding: var(--os-sp-3) var(--os-sp-4); }
  .os-paybar__sum { grid-column: auto; justify-content: flex-start; gap: var(--os-sp-3); }
  .os-paybar .os-btn { min-width: 200px; }
}

/* Bon-Vorschau: wirkt wie Papier, bleibt auch im Dunkelmodus hell */
.os-receipt {
  background: #fdfdfb; color: #16181a; border-radius: var(--os-r-md);
  padding: var(--os-sp-5) var(--os-sp-4); font-family: var(--os-font-mono); font-size: 13px; line-height: 1.5;
  box-shadow: var(--os-shadow-1); border: 1px solid #d9dbd6;
}
.os-receipt__row { display: flex; justify-content: space-between; gap: var(--os-sp-3); }
.os-receipt__grid { display: grid; grid-template-columns: 3ch minmax(0, 1fr) 7ch 8ch; gap: 0 var(--os-sp-2); margin-top: var(--os-sp-3); }
.os-receipt__grid--tax { grid-template-columns: 7ch 1fr 1fr 1fr; }
.os-receipt__th { font-weight: 700; border-bottom: 1px dashed #8a8f88; padding-bottom: 2px; margin-bottom: 2px; }
.os-receipt .r { text-align: right; font-variant-numeric: tabular-nums; }
.os-receipt__sum { display: flex; justify-content: space-between; margin-top: var(--os-sp-3); padding-top: var(--os-sp-2); border-top: 1px dashed #8a8f88; font-size: 16px; font-weight: 800; }
.os-receipt__foot { margin-top: var(--os-sp-4); text-align: center; color: #50555b; }
.os-receipt__empty { grid-column: 1 / -1; color: #6b7076; font-style: italic; padding: 4px 0; }

/* ---------- 16. Bottom-Sheet (ab 760px: zentrierter Dialog) ---------- */
.os-scrim { position: absolute; inset: 0; z-index: 40; display: flex; align-items: flex-end; justify-content: center; background: var(--os-scrim); animation: os-fade .15s ease-out; }
.os-scrim__close { position: absolute; inset: 0; border: 0; background: transparent; cursor: default; }
.os-sheet {
  position: relative; width: 100%; max-height: 88%; display: flex; flex-direction: column;
  background: var(--os-surface); color: var(--os-text); border-radius: var(--os-r-xl) var(--os-r-xl) 0 0;
  box-shadow: var(--os-shadow-2); animation: os-up .22s cubic-bezier(.2, .8, .2, 1);
}
.os-sheet__grab { width: 44px; height: 5px; border-radius: 3px; background: var(--os-border-strong); margin: 8px auto 0; flex: none; }
.os-sheet__head { display: flex; align-items: center; gap: var(--os-sp-3); padding: var(--os-sp-2) var(--os-sp-2) var(--os-sp-2) var(--os-sp-5); flex: none; }
.os-sheet__titles { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.os-sheet__title { margin: 0; font-size: var(--os-fs-xl); font-weight: 800; }
.os-sheet__sub { font-size: var(--os-fs-sm); color: var(--os-text-2); }
.os-sheet__body { flex: 1; min-height: 0; overflow-y: auto; padding: 0 var(--os-sp-5) var(--os-sp-4); display: flex; flex-direction: column; gap: var(--os-sp-3); }
.os-sheet__foot { flex: none; display: flex; gap: var(--os-sp-3); padding: var(--os-sp-3) var(--os-sp-5) var(--os-sp-5); border-top: 1px solid var(--os-border); }
.os-sheet__foot > .os-btn { flex: 1; }
.os-sheet__foot--stack { flex-direction: column; }
.os-sheet--static { animation: none; border-radius: var(--os-r-xl); }
@container osapp (min-width: 760px) {
  .os-scrim { align-items: center; }
  .os-sheet { max-width: 540px; max-height: 84%; border-radius: var(--os-r-xl); }
  .os-sheet__grab { display: none; }
  .os-sheet__head { padding-top: var(--os-sp-3); }
}
@keyframes os-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes os-up { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }

/* Sheet-Inhalte */
.os-field-label { font-size: var(--os-fs-sm); font-weight: 800; color: var(--os-text-2); }
.os-textarea { width: 100%; min-height: 104px; padding: var(--os-sp-3); border: 1.5px solid var(--os-border-strong); border-radius: var(--os-r-md); background: var(--os-surface); font-size: var(--os-fs-lg); resize: vertical; }
.os-menu { display: flex; flex-direction: column; }
.os-menu__item { min-height: 56px; display: flex; align-items: center; gap: var(--os-sp-3); padding: 0 var(--os-sp-2); border: 0; border-bottom: 1px solid var(--os-border); background: none; text-align: left; font-size: var(--os-fs-lg); font-weight: 650; }
.os-menu__item:disabled { opacity: .4; }
.os-menu__item span { flex: 1; }

/* Zahlung */
.os-paysum { display: flex; flex-direction: column; align-items: center; padding: var(--os-sp-3) 0 var(--os-sp-2); }
.os-paysum__label { font-size: var(--os-fs-sm); font-weight: 700; color: var(--os-text-2); }
.os-paysum__val { font-size: 52px; font-weight: 800; letter-spacing: -.03em; line-height: 1.05; font-variant-numeric: tabular-nums; }
.os-method { width: 100%; min-height: 60px; display: flex; align-items: center; gap: var(--os-sp-3); padding: 0 var(--os-sp-4); border-radius: var(--os-r-md); border: 1.5px solid var(--os-border-strong); background: var(--os-surface); font-size: var(--os-fs-lg); font-weight: 750; text-align: left; }
.os-method span { flex: 1; }
.os-method.is-active { border: 2px solid var(--os-primary); background: var(--os-primary-soft); color: var(--os-primary-ink); }
.os-given { position: relative; }
.os-given__input { width: 100%; height: 60px; padding: 0 48px 0 var(--os-sp-4); border: 1.5px solid var(--os-border-strong); border-radius: var(--os-r-md); background: var(--os-surface); font-size: 26px; font-weight: 800; font-variant-numeric: tabular-nums; }
.os-given__unit { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); font-size: 22px; font-weight: 800; color: var(--os-text-2); }
.os-quick { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--os-sp-2); }
.os-quick__btn { min-height: var(--os-hit); border-radius: var(--os-r-md); border: 1.5px solid var(--os-border-strong); background: var(--os-surface); font-weight: 800; font-size: 16px; padding: 0 4px; }
.os-quick__btn.is-active { background: var(--os-text); color: var(--os-bg); border-color: var(--os-text); }
.os-quick__btn:disabled { opacity: .35; cursor: not-allowed; }
.os-change { display: flex; justify-content: space-between; align-items: center; min-height: 60px; padding: 0 var(--os-sp-4); border-radius: var(--os-r-md); background: var(--os-success-soft); color: var(--os-success-ink); font-weight: 750; }
.os-change strong { font-size: 28px; font-variant-numeric: tabular-nums; }
.os-change--short { background: var(--os-danger-soft); color: var(--os-danger-ink); }

/* ---------- 17. Toast (Erfolg / Fehler) ---------- */
.os-toast {
  position: absolute; z-index: 60; left: var(--os-sp-3); right: var(--os-sp-3); top: 72px;
  display: flex; align-items: center; gap: var(--os-sp-3); min-height: 56px; padding: 8px 8px 8px var(--os-sp-4);
  border-radius: var(--os-r-lg); box-shadow: var(--os-shadow-2); font-weight: 750; line-height: 1.3;
  animation: os-drop .25s cubic-bezier(.2, .8, .2, 1);
}
.os-toast__text { flex: 1; min-width: 0; }
.os-toast--success { background: var(--os-success); color: var(--os-on-success); }
.os-toast--error { background: var(--os-danger); color: var(--os-on-danger); }
.os-toast--info { background: var(--os-bar); color: var(--os-on-bar); }
.os-toast__btn { min-height: 40px; padding: 0 12px; border-radius: 10px; border: 1.5px solid currentColor; background: transparent; color: inherit; font-weight: 800; white-space: nowrap; }
.os-toast__x { width: 40px; height: 40px; border: 0; background: transparent; color: inherit; display: inline-flex; align-items: center; justify-content: center; border-radius: 10px; flex: none; }
.os-toast--static { position: static; animation: none; }
@container osapp (min-width: 760px) { .os-toast { left: 50%; right: auto; width: 480px; transform: translateX(-50%); animation: none; } }
@keyframes os-drop { from { transform: translateY(-16px); opacity: 0; } to { transform: none; opacity: 1; } }

/* ---------- 18. Anmeldung ---------- */
.os-login { align-items: center; }
.os-login .os-footer { align-self: stretch; }
.os-login__card {
  width: 100%; max-width: 420px; display: flex; flex-direction: column; gap: var(--os-sp-4);
  padding: var(--os-sp-5); background: var(--os-surface); border: 1px solid var(--os-border);
  border-radius: var(--os-r-xl); box-shadow: var(--os-shadow-1);
}
.os-login__brand { display: flex; align-items: center; gap: var(--os-sp-3); }
.os-login__logo { width: 52px; height: 52px; flex: none; border-radius: 14px; display: inline-flex; align-items: center; justify-content: center; background: var(--os-primary); color: var(--os-on-primary); }
.os-login__title { margin: 0; font-size: var(--os-fs-2xl); font-weight: 800; letter-spacing: -.02em; }
.os-login__sub { margin: 0; font-size: var(--os-fs-sm); color: var(--os-text-2); }
.os-field { display: flex; flex-direction: column; gap: 6px; }
.os-picker {
  width: 100%; min-height: var(--os-hit-lg); display: flex; align-items: center; gap: var(--os-sp-3);
  padding: 0 var(--os-sp-4); border: 1.5px solid var(--os-border-strong); border-radius: var(--os-r-md);
  background: var(--os-surface); font-size: var(--os-fs-lg); font-weight: 750; text-align: left;
}
.os-picker__val { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.os-pw { position: relative; }
.os-pw__input {
  width: 100%; height: var(--os-hit-lg); padding: 0 56px 0 var(--os-sp-4);
  border: 1.5px solid var(--os-border-strong); border-radius: var(--os-r-md); background: var(--os-surface);
  font-size: 24px; font-weight: 800; letter-spacing: .25em;
}
.os-pw__del { position: absolute; right: 4px; top: 4px; width: 48px; height: 48px; border: 0; border-radius: var(--os-r-sm); background: none; color: var(--os-text-2); display: inline-flex; align-items: center; justify-content: center; }
.os-keypad { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--os-sp-2); }
.os-key {
  min-height: 60px; border: 1.5px solid var(--os-border-strong); border-radius: var(--os-r-md);
  background: var(--os-surface-2); font-size: 24px; font-weight: 700; font-variant-numeric: tabular-nums;
  transition: transform .06s ease;
}
.os-key:active { transform: scale(.95); background: var(--os-border); }
.os-key--alt { color: var(--os-danger-ink); font-weight: 800; }
.os-login__error { margin: 0; display: flex; align-items: center; gap: var(--os-sp-2); padding: var(--os-sp-3); border-radius: var(--os-r-md); background: var(--os-danger-soft); color: var(--os-danger-ink); font-size: var(--os-fs-sm); font-weight: 700; }
.os-menu__item.is-active { color: var(--os-primary-ink); font-weight: 800; }

/* Leerzustand ganze Seite */
.os-blank { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--os-sp-3); padding: var(--os-sp-8) var(--os-sp-4); }
.os-blank__icon { width: 64px; height: 64px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--os-success-soft); color: var(--os-success-ink); }
.os-blank__title { margin: 0; font-size: var(--os-fs-xl); font-weight: 800; }
.os-blank__text { margin: 0; color: var(--os-text-2); }

@media (prefers-reduced-motion: reduce) {
  .os-app *, .os-ds * { animation: none !important; transition: none !important; }
}

/* =====================================================================
   Nur für den Prototyp (nicht übernehmen): Demo-Steuerung & Geräterahmen
   ===================================================================== */
.proto { min-height: 100vh; display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 16px; background: #dfe2dc; font-family: "Inter", system-ui, sans-serif; box-sizing: border-box; }
.proto * { box-sizing: border-box; }
.proto-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 14px; padding: 8px 12px; background: #fff; border-radius: 14px; box-shadow: 0 1px 3px rgba(0,0,0,.12); max-width: 100%; color: #1b1f23; }
.proto-label { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: #555d66; }
.proto-group { display: inline-flex; align-items: center; gap: 6px; }
.proto-seg { display: inline-flex; background: #eceee9; border-radius: 10px; padding: 3px; gap: 2px; }
.proto-seg button { min-height: 36px; padding: 0 12px; border: 0; border-radius: 8px; background: transparent; font: inherit; font-size: 13px; font-weight: 700; color: #3d444b; cursor: pointer; }
.proto-seg button.is-on { background: #121518; color: #fff; }
.proto-reset { min-height: 36px; padding: 0 12px; border: 1px solid #b8beb7; border-radius: 8px; background: #fff; font: inherit; font-size: 13px; font-weight: 700; color: #1b1f23; cursor: pointer; }
.os-app--phone { width: min(100%, 390px); height: 800px; border-radius: 26px; box-shadow: 0 0 0 8px #15181b, 0 24px 60px rgba(0,0,0,.28); }
.os-app--tablet { width: min(100%, 1024px); height: 760px; border-radius: 18px; box-shadow: 0 0 0 8px #15181b, 0 24px 60px rgba(0,0,0,.24); }
.os-app--desktop { width: 100%; max-width: 1440px; height: calc(100vh - 100px); min-height: 640px; border-radius: 12px; box-shadow: 0 10px 40px rgba(0,0,0,.18); }