/* Lifted verbatim from the prototype HTML <style> block. Fonts + design tokens + global CSS. */
@import url('https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700&family=Geist+Mono:wght@400;500&family=Baloo+2:wght@500;600;700;800&display=swap');

  :root {
    --sipo-admin-font-scale: 1;
    --sipo-admin-viewport-height: 100vh;
    --bg: #f6f5f1;
    --surface: #ffffff;
    --surface-2: #fafaf7;
    --surface-sunk: #f0eee8;
    --border: oklch(0.92 0.005 80);
    --border-strong: oklch(0.86 0.008 80);
    --text: oklch(0.22 0.01 60);
    --text-muted: oklch(0.5 0.01 60);
    --text-faint: oklch(0.65 0.008 60);
    --accent: oklch(0.62 0.17 40);
    --accent-soft: oklch(0.95 0.04 50);
    --accent-ink: oklch(0.4 0.13 40);
    --success: oklch(0.6 0.12 145);
    --success-soft: oklch(0.95 0.04 145);
    --danger: oklch(0.58 0.18 25);
    --warn-soft: oklch(0.96 0.05 85);
    --warn-ink: oklch(0.45 0.1 60);
    --radius: 8px;
    --radius-lg: 12px;
    --shadow-sm: 0 1px 0 rgba(20, 18, 14, 0.04), 0 1px 2px rgba(20, 18, 14, 0.04);
    --shadow-md: 0 2px 8px -2px rgba(20, 18, 14, 0.06), 0 8px 24px -8px rgba(20, 18, 14, 0.08);
    --shadow-pop: 0 8px 32px -8px rgba(20, 18, 14, 0.18), 0 2px 6px -2px rgba(20, 18, 14, 0.06);
  }
  html, body {
    margin: 0; padding: 0;
    background: var(--bg);
    color: var(--text);
    font-family: 'Geist', system-ui, sans-serif;
    font-size: 14px;
    line-height: 1.45;
    -webkit-font-smoothing: antialiased;
    text-rendering: geometricPrecision;
    font-feature-settings: 'ss01', 'cv11';
  }
  /* The Admin uses fixed pixel typography throughout the vendored SPA. Root zoom is the one narrow,
     consistent scaling boundary that reaches every page, modal and mobile surface. The value is set
     before React mounts by glue/font-settings.jsx and defaults safely to 1. */
  #root { zoom: var(--sipo-admin-font-scale); }
  /* CJK fallbacks — <html lang> is set by glue/i18n.jsx. Geist has no Han glyphs, so the next
     family in the stack decides which regional variant renders; pin it per language. */
  html[lang="zh-Hans"] body { font-family: 'Geist', 'PingFang SC', 'Microsoft YaHei', 'Noto Sans SC', system-ui, sans-serif; }
  html[lang="zh-Hant"] body { font-family: 'Geist', 'PingFang TC', 'Microsoft JhengHei', 'Noto Sans TC', system-ui, sans-serif; }
  *, *::before, *::after { box-sizing: border-box; }
  /* color: inherit — iOS Safari paints button text in its link blue by default (desktop
     browsers use near-black buttontext, which hid the problem everywhere but iPhones). */
  button { font-family: inherit; cursor: pointer; color: inherit; }
  input, select, textarea { font-family: inherit; font-size: inherit; color: inherit; }
  ::selection { background: var(--accent-soft); color: var(--accent-ink); }

  /* Scrollbars */
  .scroll::-webkit-scrollbar { width: 10px; height: 10px; }
  .scroll::-webkit-scrollbar-thumb { background: transparent; border-radius: 10px; }
  .scroll:hover::-webkit-scrollbar-thumb { background: oklch(0.85 0.008 60 / 0.6); }
  .scroll::-webkit-scrollbar-track { background: transparent; }
  /* Mobile one-line filter rows (primitives.jsx MobileFilterRow): children never shrink or wrap,
     the row itself swipes horizontally with no visible scrollbar. */
  .mfr > * { flex: 0 0 auto; }
  .mfr::-webkit-scrollbar { display: none; }

  /* Body-level tooltips stay outside clipped/scrolled panels. Coordinates are viewport pixels;
     scale typography and spacing here because this layer sits outside the zoomed #root. */
  [data-tip] { position: relative; }
  .sipo-tooltip {
    position: fixed;
    top: 0; left: 0;
    width: max-content;
    max-width: min(calc(320px * var(--sipo-admin-font-scale)), calc(100vw - 16px));
    background: oklch(0.22 0.01 60);
    color: white;
    font-size: calc(11px * var(--sipo-admin-font-scale));
    padding: calc(4px * var(--sipo-admin-font-scale)) calc(8px * var(--sipo-admin-font-scale));
    border-radius: 6px;
    white-space: normal;
    overflow-wrap: anywhere;
    line-height: 1.45;
    text-align: center;
    pointer-events: none;
    z-index: 99999;
  }

  /* Global modal/sheet animations (used by sheetOverlay/sheetCard helpers) */
  @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
  @keyframes popIn { from { opacity: 0; transform: scale(0.96); } to { opacity: 1; transform: scale(1); } }
  @keyframes sheetUp { from { transform: translateY(100%); } to { transform: translateY(0); } }
  @keyframes sipo-spin { to { transform: rotate(360deg); } }

  /* ============================================================
     Communication → warehouse (wh2) look. Scoped "island": wrapping the
     Communication page root in `.wh2-comm-scope` re-maps the design tokens its
     inline styles already consume to the warm wh2 palette and flattens shadows,
     with NO markup or wiring changes. Baloo 2 on the pane headings. Only the
     Communication page opts in — the rest of admin keeps the SipoAdmin theme.
     ============================================================ */
  .wh2-comm-scope {
    --bg: #F6F2EE;
    --surface: #FFFFFF;
    --surface-2: #FAF7F3;
    --surface-sunk: #F3ECE4;
    --border: #ECE6DF;
    --border-strong: #E2DAD1;
    --text: #241C17;
    --text-muted: #52483F;
    --text-faint: #8B7E73;
    --accent: #E9631A;
    --accent-soft: #FBF3EC;
    --accent-ink: #BC4D08;
    --warn-soft: #FCF1DC;
    --warn-ink: #6E4605;
    --danger: #C92F23;
    --shadow-sm: none;
  }
  .wh2-comm-scope h1, .wh2-comm-scope h2 { font-family: 'Baloo 2', 'Outfit', sans-serif; letter-spacing: -.01em; }

/* Grid Maker mirrors POS ModernFlatTile: 14px corners, 12px padding, 10px gaps. */
.gm-page { flex:1; min-height:0; min-width:0; display:flex; flex-direction:column; background:var(--surface-2); }
.gm-page button, .gm-form button, .gm-form-actions button { font:inherit; cursor:pointer; border:1px solid var(--border-strong); background:var(--surface); color:var(--text); border-radius:8px; padding:8px 12px; display:inline-flex; align-items:center; justify-content:center; gap:6px; }
.gm-page button:disabled, .gm-form button:disabled { cursor:default; opacity:.45; }
.gm-page button:focus-visible, .gm-form :is(button,input,select):focus-visible { outline:3px solid #f08a1d; outline-offset:2px; }
.gm-heading { display:flex; align-items:center; gap:12px; padding:20px 24px 14px; flex-shrink:0; }
.gm-heading h1 { font-size:22px; margin:0; letter-spacing:-.03em; }
.gm-heading p { margin:5px 0 0; color:var(--text-muted); font-size:12px; }
.gm-heading-actions { margin-left:auto; display:flex; align-items:center; gap:8px; font-size:12px; }
.gm-workspace { overflow:auto; flex:1; min-height:0; padding:0 24px 16px; }
.gm-settings { display:flex; flex-wrap:wrap; gap:14px; align-items:end; border:1px solid var(--border); background:var(--surface); border-radius:12px; padding:16px; margin-bottom:14px; }
.gm-settings .gm-field { flex:0 1 130px; }
.gm-settings p { flex-basis:100%; margin:0; font-size:12px; color:var(--text-muted); }
.gm-check { display:flex; align-items:center; gap:6px; padding-bottom:9px; font-size:12px; }
.gm-dark { --gm-bg:#0f1216; --gm-card:#1f2530; --gm-ink:#f2f4f8; --gm-muted:#a9b1be; --gm-border:#2a313d; }
.gm-light { --gm-bg:#f2f3f6; --gm-card:#fff; --gm-ink:#191d24; --gm-muted:#5d6470; --gm-border:#e6e8ec; }
.gm-pos { display:flex; flex-direction:column; height:clamp(430px, calc(100dvh - 152px), 920px); border:1px solid var(--gm-border); border-radius:16px; overflow:hidden; background:var(--gm-bg); color:var(--gm-ink); }
.gm-pos button { color:var(--gm-ink); background:var(--gm-card); border-color:var(--gm-border); }
.gm-rail { flex-shrink:0; display:flex; align-items:center; gap:10px; padding:14px 16px; border-bottom:1px solid var(--gm-border); }
.gm-rail nav { flex:1; min-width:0; display:flex; align-items:center; gap:7px; overflow-x:auto; }
.gm-rail nav button { white-space:nowrap; font-size:12px; max-width:220px; }
.gm-rail nav button.gm-active { border-color:#f08a1d; }
.gm-rail > div { display:flex; flex-shrink:0; gap:8px; }
.gm-guidance { flex-shrink:0; padding:12px 16px 0; font-size:11px; color:var(--gm-muted); display:flex; align-items:center; justify-content:space-between; gap:10px; min-height:30px; }
.gm-grid-scroll { flex:1; overflow:auto; min-height:120px; }
.gm-grid { display:grid; gap:10px; padding:16px; }
.gm-slot { min-width:0; position:relative; border-radius:14px; }
.gm-slot.gm-drop { outline:3px solid #f08a1d; outline-offset:2px; }
.gm-slot.gm-moving { opacity:.65; }
.gm-tile-wrap { position:relative; height:100%; }
.gm-tile { position:relative; border:1px solid; border-radius:14px; padding:12px; box-sizing:border-box; overflow:hidden; display:flex; flex-direction:column; }
.gm-tile-name { font-size:15px; font-weight:600; line-height:1.3; overflow:hidden; overflow-wrap:anywhere; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; text-align:left; }
.gm-editing .gm-tile-name { padding-right:52px; }
.gm-tile-footer { margin-top:auto; padding-top:8px; display:flex; justify-content:flex-end; align-items:center; gap:5px; font-size:12px; opacity:.75; }
.gm-tile-hit { position:absolute; inset:0; width:100%; height:100%; border:0!important; background:transparent!important; border-radius:14px!important; }
.gm-tile-hit:disabled { opacity:1!important; }
.gm-tile-tools { position:absolute; top:6px; right:6px; display:flex; gap:3px; }
.gm-tile-tools button { border:0; padding:3px; width:26px; height:26px; border-radius:50%; color:inherit; background:rgba(128,128,128,.2); }
.gm-tile-tools button:first-child { cursor:grab; }
.gm-tile-tools button:first-child:active { cursor:grabbing; }
.gm-tile .gm-open { position:absolute; bottom:8px; left:8px; padding:4px 6px; color:inherit; background:rgba(128,128,128,.15); font-size:10px; border:0; }
.gm-tile .gm-unavailable { position:absolute; bottom:10px; left:10px; }
.gm-empty { width:100%; height:100%; border:1px dashed var(--gm-border)!important; background:transparent!important; display:flex; flex-direction:column; border-radius:14px!important; color:var(--gm-muted)!important; font-size:11px!important; }
.gm-empty:hover { border-color:#f08a1d!important; background:rgba(240,138,29,.06)!important; }
.gm-pagination { flex-shrink:0; display:flex; align-items:center; gap:10px; border-top:1px solid var(--gm-border); padding:12px 16px; font-size:11px; color:var(--gm-muted); }
.gm-pagination > span:first-child { margin-right:auto; }
.gm-pagination > button { padding:8px; }
.gm-pages { display:flex; gap:6px; margin-right:6px; }
.gm-pages button { padding:0; width:7px; height:7px; border:0; border-radius:6px; background:var(--gm-muted); opacity:.35; }
.gm-pages button[aria-current=page] { width:22px; opacity:1; background:#f08a1d; }
.gm-sync-note { display:flex; align-items:center; gap:7px; font-size:11px; color:var(--text-muted); margin:12px 2px 0; }
.gm-field { display:flex; flex-direction:column; gap:7px; min-width:0; font-size:12px; font-weight:500; }
.gm-field :is(input,select), .gm-picker > input { width:100%; min-width:0; box-sizing:border-box; font:inherit; color:var(--text); background:var(--surface); border:1px solid var(--border-strong); border-radius:8px; padding:9px 10px; }
.gm-form-columns { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:16px; }
.gm-picker { border:1px solid var(--border); background:var(--surface-2); padding:12px; border-radius:10px; margin-bottom:16px; }
.gm-picker-heading { display:flex; align-items:center; justify-content:space-between; gap:8px; font-size:12px; margin:2px 0 10px; }
.gm-picker-heading:last-of-type { margin:10px 0 0; }
.gm-catalogue { max-height:220px; overflow:auto; margin-top:8px; }
.gm-choice { display:flex; align-items:center; gap:9px; padding:10px 4px; border-bottom:1px solid var(--border); font-size:12px; cursor:pointer; }
.gm-choice > span:first-of-type { flex:1; min-width:0; overflow-wrap:anywhere; }
.gm-choice small { display:block; font-size:10px; opacity:.5; margin-top:2px; }
.gm-choice input { accent-color:var(--accent); }
.gm-colour { display:flex; align-items:center; gap:8px; }
.gm-colour input[type=color] { width:42px; height:36px; padding:3px; }
.gm-dialog-preview { width:200px; margin:16px auto; }
.gm-selected { margin-top:8px; font-size:11px; color:var(--text-muted); max-height:50px; overflow:auto; }
.gm-muted { color:var(--text-muted); font-size:12px; }
.gm-error { background:var(--danger-soft,#fff1f0); color:var(--danger,#b42318); padding:12px; border-radius:8px; font-size:12px; margin-bottom:12px; }
.gm-form-actions { display:flex; justify-content:flex-end; gap:8px; margin-top:18px; }
.gm-page .gm-primary, .gm-form .gm-primary { color:#1a1005; background:#f08a1d; border-color:#f08a1d; font-weight:600; }
.gm-page .gm-danger { color:#fff; background:#c23934; border-color:#c23934; }
@media (max-width:767px) {
  .gm-heading { padding:12px; gap:7px; }
  .gm-heading h1 { font-size:17px; }
  .gm-heading-actions { gap:5px; }
  .gm-heading-actions > button { padding:8px; }
  .gm-workspace { padding:0 10px 14px; }
  .gm-rail { padding:10px; }
  .gm-rail nav { flex-basis:auto; }
  .gm-rail > div { margin-left:auto; }
  .gm-pagination { gap:6px; padding:10px; }
  .gm-pages { display:none; }
  .gm-form-columns { grid-template-columns:1fr; gap:12px; }
  .gm-guidance { flex-shrink:0; padding:10px 12px 0; }
}

/* Compact Classic-style root selector; child grids retain their existing tile layout. */
.gm-root-dock { flex-shrink:0; min-width:0; border-top:1px solid var(--gm-border); background:var(--gm-bg); }
.gm-root-strip { display:flex; align-items:stretch; gap:8px; overflow-x:auto; padding:10px 16px; overscroll-behavior-x:contain; }
.gm-root-slot { position:relative; flex:0 0 148px; height:58px; border:1px solid var(--gm-border); border-radius:10px; overflow:hidden; }
.gm-root-slot.gm-root-editing { height:86px; }
.gm-root-slot.gm-root-active { border-color:#f08a1d; box-shadow:inset 0 0 0 1px #f08a1d; }
.gm-root-slot.gm-drop { outline:3px solid #f08a1d; outline-offset:1px; }
.gm-root-slot.gm-moving { opacity:.65; }
.gm-root-slot .gm-root-button { width:100%; height:100%; justify-content:flex-start; text-align:left; padding:10px; border:0; border-radius:0; background:transparent; color:inherit; font-size:12px; font-weight:600; }
.gm-root-editing .gm-root-button { height:52px; }
.gm-root-button > svg { flex-shrink:0; }
.gm-root-button > span { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; overflow-wrap:anywhere; }
.gm-root-tools { position:absolute; bottom:5px; right:6px; display:flex; gap:5px; }
.gm-root-tools button { width:24px; height:24px; padding:4px; border:0; color:inherit; background:rgba(128,128,128,.18); }
.gm-root-tools button:first-child { cursor:grab; }
.gm-root-add { border-style:dashed; }
.gm-root-add > button { display:flex; flex-direction:column; width:100%; height:100%; border:0; background:transparent; font-size:12px; }
.gm-root-none { padding:14px 0; font-size:12px; color:var(--gm-muted); }
.gm-root-empty { height:100%; min-height:160px; padding:24px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; text-align:center; color:var(--gm-muted); font-size:13px; }
.gm-edit-layout { display:grid; grid-template-columns:minmax(0,1fr); gap:16px; }
.gm-edit-layout-active { grid-template-columns:minmax(0,1fr) 280px; }
.gm-edit-layout-active .gm-pos { min-width:0; }
.gm-edit-layout-active .gm-grid { gap:10px; padding:12px; }
.gm-edit-layout-active .gm-tile { padding:9px; }
.gm-edit-layout-active .gm-tile-name { padding-right:0; padding-top:24px; font-size:12px; -webkit-line-clamp:2; }
.gm-edit-layout-active .gm-tile-footer { font-size:10px; padding-top:4px; }
.gm-edit-layout-active .gm-tile[data-gm-type=grid] .gm-tile-footer { visibility:hidden; }
.gm-edit-layout-active .gm-tile-tools { top:4px; right:4px; }
.gm-edit-layout-active .gm-tile-tools button { width:22px; height:22px; }
.gm-edit-layout-active .gm-rail { flex-wrap:wrap; padding:12px; }
.gm-edit-layout-active .gm-rail nav { flex-basis:180px; }
.gm-edit-layout-active .gm-guidance { height:54px; padding:8px 16px; }
.gm-edit-layout-active .gm-guidance > span { min-width:0; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.gm-edit-layout-active .gm-pagination > span:first-child { max-width:120px; }
.gm-library { display:flex; flex-direction:column; min-width:0; min-height:0; height:clamp(430px, calc(100dvh - 152px), 920px); box-sizing:border-box; border:1px solid var(--border); border-radius:16px; overflow:hidden; background:var(--surface); }
.gm-library header { padding:18px 16px 0; }
.gm-library-title { display:flex; align-items:center; gap:8px; }
.gm-library-title > svg { color:var(--accent); }
.gm-library h2 { margin:0; font-size:15px; }
.gm-library header p { margin:8px 0 0; font-size:12px; line-height:1.5; color:var(--text-muted); }
.gm-library-filters { padding:16px; display:flex; flex-direction:column; gap:12px; border-bottom:1px solid var(--border); }
.gm-library-search { display:flex; align-items:center; gap:8px; border:1px solid var(--border-strong); border-radius:8px; padding:0 10px; }
.gm-library-search > svg { flex-shrink:0; color:var(--text-muted); }
.gm-library-search input { width:100%; min-width:0; border:0; background:transparent; padding:10px 0; color:var(--text); font:inherit; font-size:12px; }
.gm-library-search:focus-within { outline:2px solid var(--accent); outline-offset:1px; }
.gm-library-search input:focus { outline:0; }
.gm-library-list { flex:1; min-height:100px; overflow:auto; padding:10px; overscroll-behavior:contain; }
.gm-library-list > p { padding:6px; }
.gm-library-item { display:flex; align-items:center; gap:2px; border:1px solid var(--border); border-radius:10px; margin-bottom:8px; background:var(--surface); }
.gm-library-item:hover, .gm-library-selected { border-color:#f08a1d; background:var(--surface-2); }
.gm-library-item .gm-library-pick { flex:1; min-width:0; text-align:left; justify-content:flex-start; gap:10px; padding:12px 4px 12px 10px; border:0; background:transparent; }
.gm-library-icon { flex-shrink:0; width:30px; height:34px; display:flex; align-items:center; justify-content:center; border-radius:8px; background:var(--surface-2); color:var(--text-muted); }
.gm-library-name { min-width:0; display:flex; flex-direction:column; gap:5px; }
.gm-library-name strong { font-size:12px; line-height:1.35; overflow-wrap:anywhere; }
.gm-library-name small { color:var(--text-muted); font-size:10px; line-height:1.4; }
.gm-library-item .gm-library-handle { flex-shrink:0; width:30px; padding:12px 5px; margin-right:3px; border:0; background:transparent; color:var(--text-muted); cursor:grab; touch-action:none; }
.gm-library-item .gm-library-handle:active { cursor:grabbing; }
.gm-library-pagination { display:flex; align-items:center; justify-content:space-between; padding:10px 16px; border-top:1px solid var(--border); font-size:11px; color:var(--text-muted); }
.gm-library-pagination button { padding:6px; }
.gm-library-note { display:flex; align-items:center; gap:7px; padding:12px 16px; border-top:1px solid var(--border); font-size:11px; color:var(--text-muted); line-height:1.4; }
.gm-library-note svg { flex-shrink:0; }
.gm-category-note { display:flex; gap:8px; align-items:center; padding:12px; background:var(--surface-2); border-radius:8px; font-size:12px; }
.gm-drag-ghost { position:fixed; z-index:100000; pointer-events:none; user-select:none; width:240px; padding:13px 15px; border:2px solid var(--gm-feedback,#737c89); border-radius:12px; background:var(--surface); color:var(--text); box-shadow:0 12px 36px rgba(0,0,0,.25); font-size:12px; }
.gm-drag-item { display:flex; align-items:center; gap:8px; padding-bottom:9px; margin-bottom:9px; border-bottom:1px solid var(--border); }
.gm-drag-item svg { flex-shrink:0; color:var(--text-muted); }
.gm-drag-item strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.gm-drag-action { display:flex; align-items:center; gap:7px; color:var(--gm-feedback,#586474); }
.gm-drag-ghost p { margin:5px 0 0; font-size:11px; line-height:1.4; }
.gm-drag-ghost small { display:block; margin-top:5px; color:var(--text-muted); overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.gm-drag-ready { --gm-feedback:#18754c; }
.gm-drag-blocked { --gm-feedback:#b42318; }
.gm-slot.gm-target-ready, .gm-root-slot.gm-target-ready { outline:3px solid #39c887; outline-offset:2px; box-shadow:0 0 0 6px rgba(57,200,135,.12); }
.gm-slot.gm-target-blocked, .gm-root-slot.gm-target-blocked { outline:3px solid #ef6962; outline-offset:2px; }
.gm-drop-label { position:absolute; z-index:4; inset:0; display:flex; align-items:center; justify-content:center; flex-direction:column; gap:6px; padding:8px; border-radius:inherit; pointer-events:none; text-align:center; font-size:12px; font-weight:600; backdrop-filter:blur(2px); }
.gm-drop-label-ready { background:rgba(12,73,45,.92); color:#fff; }
.gm-drop-label-blocked { background:rgba(104,27,26,.92); color:#fff; }
.gm-guidance-ready { color:var(--gm-ink); }
.gm-guidance-blocked { color:#ef9690; }
.gm-light .gm-guidance-blocked { color:#b42318; }
@media (max-width:900px) and (min-width:768px) {
  .gm-edit-layout-active { grid-template-columns:minmax(0,1fr) 240px; gap:12px; }
}
@media (max-width:767px) {
  .gm-edit-layout-active { grid-template-columns:minmax(0,1fr); gap:12px; }
  .gm-edit-layout-active .gm-pos { height:480px; }
  .gm-library { height:420px; }
}

/* Assembly and Maintenance: scoped surfaces using the host application's design tokens. */
.ops-page, .ops-admin-page {
  --ops-ink: var(--w-ink, var(--ink, #29241f));
  --ops-muted: var(--w-ink-3, var(--ink-3, #756e67));
  --ops-line: var(--w-line, var(--line, #e7e2dc));
  --ops-border: var(--w-line-2, var(--line-strong, #d8d1c8));
  --ops-panel: var(--w-panel, var(--paper, #fff));
  --ops-soft: var(--w-panel-2, var(--bg, #faf8f5));
  --ops-accent: var(--w-orange, var(--sipo-orange-600, #da5a20));
  color: var(--ops-ink); font-family: var(--ui, system-ui, sans-serif); font-size: 13px; line-height: 1.5; min-width: 0;
}
.ops-page { width: 100%; }
.ops-page *, .ops-admin-page * { box-sizing: border-box; }
.ops-admin-page { padding: 20px 24px; }
.ops-mobile-menu { margin-bottom: 14px; }
.ops-pagehead { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; }
.ops-pagehead > div:first-child { flex: 1; min-width: 220px; }
.ops-page .ops-title { margin: 0; font-family: var(--w-round, var(--display, var(--ui))); font-size: 22px; font-weight: 600; line-height: 1.3; letter-spacing: -.025em; }
.ops-page .ops-subtitle { margin: 5px 0 0; color: var(--ops-muted); font-size: 12px; max-width: 780px; }
.ops-page .ops-section-title { margin: 0; font: 600 14px/1.4 var(--w-round, var(--ui, system-ui, sans-serif)); color: var(--ops-ink); }
.ops-muted { margin: 4px 0 0; color: var(--ops-muted); font-size: 12px; line-height: 1.5; }
.ops-icon { display: inline-block; flex-shrink: 0; vertical-align: middle; }
.ops-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ops-stack { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.ops-card { min-width: 0; border: 1px solid var(--ops-line); border-radius: 12px; background: var(--ops-panel); box-shadow: var(--w-shadow, 0 1px 2px rgba(30,25,20,.04)); }
.ops-page > .ops-card { margin-bottom: 18px; }
.ops-card-head { padding: 16px 18px; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 14px; border-bottom: 1px solid var(--ops-line); }
.ops-card-head > div:first-child { min-width: 0; }
.ops-card-body { padding: 18px; }
.ops-card-foot { padding: 14px 18px; display: flex; justify-content: flex-end; align-items: center; gap: 8px; flex-wrap: wrap; border-top: 1px solid var(--ops-line); }
.ops-btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 36px; padding: 7px 12px; border: 1px solid var(--ops-border); border-radius: 8px; background: var(--ops-panel); color: var(--ops-ink); font: 500 13px/1.4 var(--ui, system-ui, sans-serif); cursor: pointer; text-decoration: none; transition: background .15s, border-color .15s; max-width: 100%; }
.ops-btn:hover:not(:disabled) { background: var(--ops-soft); }
.ops-btn-primary { background: var(--ops-accent); color: #fff; border-color: var(--ops-accent); box-shadow: 0 1px 2px rgba(30,25,20,.08); }
.ops-btn-primary:hover:not(:disabled) { background: var(--ops-accent); filter: brightness(.96); }
.ops-btn-danger { color: #b52d24; border-color: #ecd3d0; }
.ops-btn-danger:hover:not(:disabled) { background: #fff1ef; }
.ops-btn:disabled { opacity: .5; cursor: not-allowed; box-shadow: none; }
.ops-btn:focus-visible, .ops-tab:focus-visible, .ops-run-summary:focus-visible, .ops-history summary:focus-visible { outline: 2px solid var(--ops-accent); outline-offset: 3px; }
.ops-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; margin: 0; }
.ops-label { font-size: 12px; font-weight: 500; color: var(--ops-ink); }
.ops-hint { color: var(--ops-muted); font-size: 11.5px; line-height: 1.5; }
.ops-input { min-width: 0; width: 100%; height: 36px; border: 1px solid var(--ops-border); border-radius: 8px; padding: 7px 10px; color: var(--ops-ink); background: var(--ops-panel); font: 400 13px/1.5 var(--ui, system-ui, sans-serif); outline: none; }
.ops-input:focus { border-color: var(--ops-accent); box-shadow: 0 0 0 3px rgba(224,100,31,.13); }
.ops-input:disabled { background: var(--ops-soft); color: var(--ops-muted); cursor: not-allowed; }
.ops-input::placeholder { color: var(--w-ink-4, #a29a92); }
select.ops-input { appearance: none; padding-right: 32px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23756e67' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; }
textarea.ops-input { height: auto; min-height: 78px; resize: vertical; }
.ops-grid, .ops-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 16px; }
.ops-span-full { grid-column: 1 / -1; }
.ops-ingredient-row { display: grid; grid-template-columns: minmax(0,1fr) minmax(150px,240px) auto; align-items: start; gap: 12px; margin: 12px 0; }
.ops-ingredient-row > .ops-btn { margin-top: 24px; }
.ops-card-foot > .ops-check { margin-right: auto; }
.ops-check { display: flex; align-items: center; gap: 8px; font-size: 12px; }
.ops-check input { accent-color: var(--ops-accent); width: 16px; height: 16px; margin: 0; }
.ops-note { border: 1px solid var(--ops-line); background: var(--ops-soft); border-radius: 8px; padding: 12px 14px; color: var(--ops-muted); font-size: 12px; }
.ops-alert { display: flex; align-items: flex-start; gap: 8px; padding: 12px 14px; margin: 0 0 16px; background: var(--ops-soft); border: 1px solid var(--ops-line); border-radius: 8px; font-size: 12px; white-space: pre-wrap; overflow-wrap: anywhere; }
.ops-alert-error { background: #fff2ef; border-color: #f0d3cd; color: #a42c20; }
.ops-alert-success { background: #edf7ef; border-color: #d4e8d7; color: #26733c; }
.ops-empty { display: flex; flex-direction: column; align-items: center; gap: 9px; padding: 48px 20px; text-align: center; color: var(--ops-muted); }
.ops-empty-icon { width: 46px; height: 46px; display: grid; place-items: center; background: var(--ops-soft); border: 1px solid var(--ops-line); border-radius: 12px; color: var(--ops-muted); margin-bottom: 4px; }
.ops-empty > strong { font-size: 14px; font-weight: 500; color: var(--ops-ink); }
.ops-empty-copy { max-width: 430px; font-size: 12px; }
.ops-empty-copy p { margin: 0; }
.ops-badge { display: inline-flex; align-items: center; gap: 5px; padding: 3px 8px; border-radius: 6px; background: var(--ops-soft); color: var(--ops-muted); font-size: 11px; font-weight: 500; white-space: nowrap; }
.ops-badge[data-tone="orange"] { background: #fff0e3; color: #a95117; }
.ops-badge[data-tone="green"], .ops-badge[data-tone="success"] { background: #e8f4ec; color: #287441; }
.ops-badge[data-tone="amber"] { background: #fdf2da; color: #93650d; }
.ops-badge[data-tone="blue"] { background: #eaf0fb; color: #355eaa; }
.ops-tabs { display: flex; gap: 22px; border-bottom: 1px solid var(--ops-line); margin: 0 0 18px; overflow-x: auto; }
.ops-tab { display: inline-flex; align-items: center; justify-content: center; gap: 7px; flex-shrink: 0; font: 500 13px/1.5 var(--ui, system-ui, sans-serif); padding: 9px 2px 11px; background: none; color: var(--ops-muted); border: 0; border-bottom: 2px solid transparent; cursor: pointer; }
.ops-tab:hover { color: var(--ops-ink); }
.ops-tab.is-active { color: var(--ops-accent); border-bottom-color: var(--ops-accent); }
.ops-toolbar-controls { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.ops-filter { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--ops-muted); }
.ops-status-filter { width: 150px; }
.ops-file-input { display: block; width: 100%; min-width: 0; padding: 10px; background: var(--ops-soft); border: 1px dashed var(--ops-border); border-radius: 8px; font: 12px/1.5 var(--ui, system-ui, sans-serif); color: var(--ops-muted); }
.ops-file-input::file-selector-button { border: 1px solid var(--ops-border); border-radius: 6px; padding: 6px 9px; margin-right: 10px; background: var(--ops-panel); color: var(--ops-ink); font: inherit; cursor: pointer; }
.ops-request { padding: 18px; border-bottom: 1px solid var(--ops-line); }
.ops-request:last-child { border-bottom: 0; }
.ops-request-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.ops-request-head > div { min-width: 0; overflow-wrap: anywhere; }
.ops-request-head strong { font-weight: 600; }
.ops-description { white-space: pre-wrap; overflow-wrap: anywhere; margin: 14px 0; }
.ops-history { margin-top: 16px; font-size: 12px; }
.ops-history summary { cursor: pointer; font-weight: 500; color: var(--ops-muted); }
.ops-history ol { padding-left: 20px; color: var(--ops-muted); }
.ops-history li { padding: 5px 0; }
.ops-review { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 14px; align-items: end; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--ops-line); }
.ops-pagination { display: flex; align-items: center; justify-content: flex-end; gap: 12px; padding: 14px 18px; border-top: 1px solid var(--ops-line); font-size: 12px; color: var(--ops-muted); }
.ops-location-note { display: flex; align-items: flex-start; gap: 10px; padding: 12px 18px; color: var(--ops-muted); background: var(--ops-soft); border-bottom: 1px solid var(--ops-line); font-size: 12px; }
.ops-location-note p { margin: 0; }
.ops-location-access { margin: 14px 18px; }
.ops-table-scroll { overflow-x: auto; border-radius: 0 0 12px 12px; }
.ops-table { width: 100%; border-collapse: collapse; text-align: left; font-size: 13px; }
.ops-table th, .ops-table td { padding: 13px 18px; border-bottom: 1px solid var(--ops-line); }
.ops-table thead th { font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .055em; color: var(--ops-muted); background: var(--ops-soft); }
.ops-table tbody th { font-weight: 500; min-width: 170px; }
.ops-table tr:last-child > * { border-bottom: 0; }
.ops-table tbody tr:hover { background: var(--ops-soft); }
.ops-switch { position: relative; display: inline-flex; align-items: center; gap: 8px; cursor: pointer; white-space: nowrap; font-size: 12px; color: var(--ops-muted); }
.ops-switch input { left: 0; top: 50%; transform: translateY(-50%); appearance: none; position: absolute; width: 34px; height: 20px; margin: 0; opacity: 0; }
.ops-switch-track { width: 34px; height: 20px; background: var(--ops-border); border-radius: 20px; padding: 3px; flex-shrink: 0; transition: background .15s; }
.ops-switch-track::after { content: ''; display: block; width: 14px; height: 14px; background: #fff; border-radius: 50%; box-shadow: 0 1px 2px rgba(0,0,0,.12); transition: transform .15s; }
.ops-switch input:checked + .ops-switch-track { background: var(--ops-accent); }
.ops-switch input:checked + .ops-switch-track::after { transform: translateX(14px); }
.ops-switch input:disabled ~ span { opacity: .5; cursor: not-allowed; }
.ops-switch input:focus-visible + .ops-switch-track { outline: 2px solid var(--ops-accent); outline-offset: 3px; }
.ops-list-row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 14px; padding: 16px 18px; border-bottom: 1px solid var(--ops-line); }
.ops-list-row:last-child { border-bottom: 0; }
.ops-list-row > div { min-width: 0; }
.ops-run { border-bottom: 1px solid var(--ops-line); }
.ops-run:last-child { border-bottom: 0; }
.ops-run-summary { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 16px 18px; cursor: pointer; font-size: 12px; list-style: none; }
.ops-run-summary::-webkit-details-marker { display: none; }
.ops-run-summary > div:first-child { flex: 1; min-width: 180px; }
.ops-run-summary > .ops-icon:last-child { transition: transform .15s; }
.ops-run[open] > .ops-run-summary > .ops-icon:last-child { transform: rotate(90deg); }
.ops-run-detail { padding: 0 18px 18px; font-size: 12px; color: var(--ops-muted); }
.ops-run-detail ul { padding-left: 20px; }
.ops-run-detail p { margin: 8px 0; }
@media (max-width: 700px) {
  .ops-pagehead { gap: 12px; margin-bottom: 16px; }
  .ops-pagehead > div:first-child { min-width: 0; flex-basis: 100%; }
  .ops-grid, .ops-form-grid { grid-template-columns: minmax(0,1fr); }
  .ops-ingredient-row { grid-template-columns: minmax(0,1fr) auto; }
  .ops-ingredient-row > :first-child { grid-column: 1 / -1; }
  .ops-card-head, .ops-card-body, .ops-request, .ops-list-row, .ops-run-summary { padding: 14px; }
  .ops-card-foot, .ops-pagination { padding: 12px 14px; }
  .ops-btn, .ops-input { min-height: 40px; }
  .ops-toolbar-controls { width: 100%; }
  .ops-filter { flex: 1; min-width: 0; }
  .ops-status-filter { flex: 1; width: 100%; }
  .ops-review { grid-template-columns: minmax(0,1fr); }
  .ops-review .ops-btn { justify-self: start; }
  .ops-tabs { gap: 14px; }
  .ops-tab { font-size: 12px; }
  .ops-empty { padding: 36px 16px; }
  .ops-admin-page { padding: 16px; }
}
