:root {
      --ink: #231c18;
      --muted: #73665c;
      --card: #ffffff;
      --line: rgba(32, 28, 24, 0.14);
      --accent: #be5a2e;
      --accent-dark: #884122;
      --ok: #1f7a53;
      --danger: #b33f25;
      --panel: #ffffff;
      --surface: #f7f7f8;
      --surface-strong: #ffffff;
      --app-bg: #ffffff;
      --accent-soft: rgba(190, 90, 46, 0.10);
      --ok-soft: rgba(31, 122, 83, 0.10);
      --shadow: 0 14px 34px rgba(28, 24, 20, 0.08);
      --shadow-hover: 0 20px 46px rgba(28, 24, 20, 0.12);
      --radius: 26px;
      --app-max-width: 1560px;
      --section-gap: 18px;
      --card-padding: 20px;
      --body-font-size: 16px;
      --section-title-size: 24px;
      --detail-grid-columns: 2;
      --popup-detail-columns: 3;
      --modal-max-width: 1120px;
      --font-body: "Sarabun", "Noto Sans Thai", "Leelawadee UI", sans-serif;
      --font-heading: "Sarabun", "Noto Sans Thai", "Leelawadee UI", sans-serif;
      --hero-title-size: clamp(30px, 3.6vw, 52px);
    }
    * { box-sizing: border-box; }
    body {
      margin: 0;
      min-height: 100vh;
      font-family: var(--font-body);
      font-size: var(--body-font-size);
      color: var(--ink);
      background: var(--app-bg);
    }
    .shell { width: min(var(--app-max-width), calc(100vw - 36px)); margin: 18px auto 30px; display: grid; grid-template-columns:230px minmax(0,1fr); gap: var(--section-gap); align-items:start; }
    .shell.mrp-mode { width: min(var(--app-max-width), calc(100vw - 28px)); }
    .hero { display:none !important; }
    .content { grid-column:2; }
    #workflow-overview { display:none !important; }
    .hero, .panel, .result, .history { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); backdrop-filter: blur(10px); }
    .hero {
      overflow: hidden;
      position: relative;
      display: grid;
      grid-template-columns: minmax(0, 1.05fr) minmax(440px, .95fr);
      gap: 22px 26px;
      align-items: end;
      padding: 24px;
    }
    .hero::before { content:""; position:absolute; inset:0; background:linear-gradient(120deg, rgba(255,255,255,.55), rgba(255,255,255,.16)); pointer-events:none; }
    .hero::after { content:""; position:absolute; inset:auto -60px -86px auto; width:280px; height:280px; background:radial-gradient(circle, rgba(190,90,46,.16), transparent 66%); pointer-events:none; }
    .hero > * { position:relative; z-index:1; }
    .hero > .eyebrow { justify-self:start; }
    .eyebrow { display:inline-flex; align-items:center; gap:8px; padding:7px 13px; border-radius:999px; font-size:11px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--accent-dark); background:var(--accent-soft); }
    .hero h1 { margin:14px 0 10px; font-family: var(--font-heading); font-size: var(--hero-title-size); line-height:1.02; letter-spacing:-.04em; max-width:760px; }
    .hero p { margin:0; max-width:700px; font-size:15px; line-height:1.65; color:var(--muted); }
    .hero-grid { margin-top:0; display:grid; gap:12px; grid-template-columns: repeat(2, minmax(0,1fr)); }
    .app-tabs { grid-column:1 / -1; display:flex; flex-wrap:wrap; gap:10px; margin-top:0; padding-top:4px; }
    .app-tab { appearance:none; border:1px solid rgba(64,49,37,.10); border-radius:999px; padding:11px 20px; background:rgba(255,255,255,.86); color:var(--ink); font:inherit; font-weight:800; cursor:pointer; box-shadow:0 7px 18px rgba(52,37,28,.045); }
    .app-tab.active { color:white; background:linear-gradient(135deg, var(--accent), var(--accent-dark)); box-shadow:0 10px 22px rgba(190,90,46,.18); border-color:transparent; }
    .side-nav {
      display:flex;
      flex-direction:column;
      gap:10px;
      grid-column:1;
      grid-row:1 / span 2;
      position:sticky;
      top:18px;
      min-height:calc(100vh - 36px);
      padding:16px;
      border-radius:28px;
      border:1px solid rgba(32,28,24,.14);
      background:#ffffff;
      box-shadow:var(--shadow);
      backdrop-filter:blur(14px);
    }
    .side-nav-button {
      appearance:none;
      width:100%;
      border:0;
      border-radius:16px;
      padding:14px 14px;
      background:transparent;
      color:var(--muted);
      font:inherit;
      font-weight:800;
      text-align:left;
      cursor:pointer;
      display:flex;
      align-items:center;
      gap:12px;
      transition:background .16s ease, color .16s ease, transform .16s ease;
    }
    .side-nav-button:hover { background:rgba(190,90,46,.07); color:var(--ink); transform:translateX(2px); }
    .side-nav-button.active { color:var(--accent-dark); background:linear-gradient(135deg, rgba(190,90,46,.14), rgba(255,255,255,.86)); }
    .side-nav-icon { width:22px; text-align:center; font-size:17px; opacity:.9; }
    .side-nav-status {
      margin-top:auto;
      padding:14px;
      border-radius:18px;
      border:1px solid rgba(64,49,37,.08);
      background:#f8f8f9;
      display:grid;
      gap:6px;
      color:var(--muted);
      font-size:13px;
    }
    .side-nav-status strong { color:var(--ok); font-size:13px; }
    .side-nav-dot { display:inline-block; width:10px; height:10px; border-radius:999px; background:#35b56b; margin-right:8px; }
    .metric { padding:15px 17px; border-radius:20px; border:1px solid rgba(32,28,24,.12); background:#ffffff; box-shadow:0 10px 24px rgba(28,24,20,.055); }
    .metric strong { display:block; margin-bottom:8px; font-size:12px; color:var(--muted); letter-spacing:.05em; text-transform:uppercase; }
    .metric span { display:block; font-size:16px; font-weight:800; line-height:1.38; }
    .workflow-shell { display:grid; gap:14px; }
    .workflow-board { display:grid; gap:14px; grid-template-columns: repeat(4, minmax(0,1fr)); }
    .workflow-card { position:relative; overflow:hidden; padding:20px; min-height:134px; border-radius:22px; border:1px solid rgba(32,28,24,.12); background:var(--surface-strong); display:grid; align-content:space-between; gap:9px; box-shadow:0 12px 30px rgba(28,24,20,.055); }
    .workflow-card::after { content:""; position:absolute; inset:auto 16px 14px auto; width:52px; height:52px; border-radius:999px; background:rgba(190,90,46,.08); pointer-events:none; }
    .workflow-card[data-workflow-action] { cursor:pointer; transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease; }
    .workflow-card[data-workflow-action]:hover { transform:translateY(-2px); box-shadow:0 16px 34px rgba(52,37,28,.10); border-color:rgba(190,90,46,.22); }
    .workflow-card strong { font-size:12px; color:var(--muted); letter-spacing:.08em; text-transform:uppercase; }
    .workflow-card b { font-size:32px; font-family: var(--font-heading); line-height:1; letter-spacing:-.03em; }
    .workflow-card span { font-size:13px; color:var(--muted); line-height:1.55; max-width:86%; }
    .workflow-card.active { border-color:rgba(190,90,46,.26); box-shadow:0 16px 34px rgba(190,90,46,.10); }
    .dashboard-strip { display:grid; gap:12px; grid-template-columns: repeat(4, minmax(0,1fr)); margin-bottom:16px; }
    .dashboard-card { padding:var(--card-padding); border-radius:var(--radius); border:1px solid var(--line); background:var(--surface); display:grid; gap:7px; box-shadow:0 10px 24px rgba(28,24,20,.055); }
    .dashboard-card[data-stock-location] { cursor:pointer; transition:transform .16s ease, border-color .16s ease, box-shadow .16s ease; }
    .dashboard-card[data-stock-location]:hover { transform:translateY(-2px); border-color:rgba(190,90,46,.24); box-shadow:0 16px 34px rgba(52,37,28,.08); }
    .dashboard-card[data-stock-location].active { border-color:rgba(190,90,46,.38); box-shadow:0 18px 38px rgba(190,90,46,.11); }
    .dashboard-card[data-stock-tone="finished"] { background:linear-gradient(135deg,#eff6ff,#ffffff); border-color:#bfdbfe; }
    .dashboard-card[data-stock-tone="qc"] { background:linear-gradient(135deg,#ecfdf5,#ffffff); border-color:#bbf7d0; }
    .dashboard-card[data-stock-tone="repair"] { background:linear-gradient(135deg,#fff7ed,#ffffff); border-color:#fed7aa; }
    .dashboard-card[data-stock-tone="total"] { background:linear-gradient(135deg,#f5f3ff,#ffffff); border-color:#ddd6fe; }
    .dashboard-card[data-stock-tone="finished"].active { border-color:#3b82f6; box-shadow:0 18px 38px rgba(59,130,246,.14); }
    .dashboard-card[data-stock-tone="qc"].active { border-color:#22c55e; box-shadow:0 18px 38px rgba(34,197,94,.14); }
    .dashboard-card[data-stock-tone="repair"].active { border-color:#f97316; box-shadow:0 18px 38px rgba(249,115,22,.14); }
    .dashboard-card[data-stock-tone="total"].active { border-color:#8b5cf6; box-shadow:0 18px 38px rgba(139,92,246,.14); }
    .dashboard-card strong { font-size:12px; color:var(--muted); letter-spacing:.08em; text-transform:uppercase; }
    .dashboard-card b { font-size:24px; font-family: var(--font-heading); line-height:1; }
    .dashboard-card span { font-size:13px; color:var(--muted); line-height:1.5; }
    .dashboard-card.action { border-color:rgba(198,93,46,.24); background:#fffaf6; }
    .dashboard-card[data-stock-location] { cursor:pointer; }
    .dashboard-card.empty { opacity:.8; }
    .ops-shell { display:grid; gap:var(--section-gap); }
    .ops-topbar { display:flex; align-items:flex-start; justify-content:space-between; gap:18px; flex-wrap:wrap; margin-bottom:2px; }
    .ops-topbar p { margin:6px 0 0; color:var(--muted); font-size:14px; line-height:1.6; max-width:820px; }
    .ops-toolbar { display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
    .ops-filter { min-width:260px; max-width:340px; }
    .ops-summary-grid { display:grid; gap:14px; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); }
    .ops-summary-card { position:relative; overflow:hidden; padding:20px; min-height:128px; border-radius:24px; border:1px solid rgba(32,28,24,.12); background:var(--surface-strong); display:grid; align-content:space-between; gap:8px; box-shadow:0 12px 30px rgba(28,24,20,.055); cursor:pointer; }
    .ops-summary-card::after { content:""; position:absolute; right:18px; bottom:18px; width:54px; height:54px; border-radius:999px; background:rgba(190,90,46,.08); }
    .ops-summary-card strong { color:rgba(255,255,255,.74); font-size:12px; letter-spacing:.08em; text-transform:uppercase; }
    .ops-summary-card b { color:#ffffff; font-family:var(--font-heading); font-size:34px; line-height:1; letter-spacing:-.03em; }
    .ops-summary-card span { color:rgba(255,255,255,.78); font-size:13px; line-height:1.45; max-width:82%; }
    .ops-summary-card[data-summary-tone="production"] { background:linear-gradient(135deg,#0f4c9e,#173b74); border-color:rgba(59,130,246,.42); box-shadow:0 18px 42px rgba(23,59,116,.22); }
    .ops-summary-card[data-summary-tone="qc"] { background:linear-gradient(135deg,#047857,#065f46); border-color:rgba(16,185,129,.40); box-shadow:0 18px 42px rgba(6,95,70,.20); }
    .ops-summary-card[data-summary-tone="repair"] { background:linear-gradient(135deg,#9a3412,#7c2d12); border-color:rgba(249,115,22,.42); box-shadow:0 18px 42px rgba(124,45,18,.20); }
    .ops-summary-card[data-summary-tone="done"] { background:linear-gradient(135deg,#5b21b6,#3b0764); border-color:rgba(139,92,246,.42); box-shadow:0 18px 42px rgba(59,7,100,.20); }
    .ops-summary-card[data-summary-tone="production"]::after { background:rgba(147,197,253,.18); }
    .ops-summary-card[data-summary-tone="qc"]::after { background:rgba(167,243,208,.18); }
    .ops-summary-card[data-summary-tone="repair"]::after { background:rgba(253,186,116,.18); }
    .ops-summary-card[data-summary-tone="done"]::after { background:rgba(196,181,253,.18); }
    .ops-summary-card.active { border-color:rgba(255,255,255,.62); box-shadow:0 20px 46px rgba(15,23,42,.26), inset 0 0 0 1px rgba(255,255,255,.18); }
    .ops-summary-card.active::after { background:rgba(255,255,255,.18); }
    .ops-global-filter { display:grid; gap:14px; padding:18px; border-radius:24px; border:1px solid rgba(190,90,46,.18); background:#ffffff; box-shadow:0 14px 34px rgba(28,24,20,.06); }
    .ops-global-filter-head { display:flex; justify-content:space-between; align-items:flex-start; gap:14px; flex-wrap:wrap; }
    .ops-global-filter-head h3 { margin:0; font-family:var(--font-heading); font-size:22px; letter-spacing:-.02em; }
    .ops-global-filter-head p { margin:4px 0 0; color:var(--muted); font-size:13px; line-height:1.45; }
    .ops-global-filter-grid { display:grid; grid-template-columns:minmax(220px,1.35fr) minmax(150px,.75fr) minmax(150px,.75fr) minmax(220px,1fr); gap:10px; align-items:start; }
    .ops-global-filter-field { display:grid; gap:6px; min-width:0; }
    .ops-global-filter-field label { font-size:12px; font-weight:800; color:var(--muted); letter-spacing:.03em; }
    .ops-global-filter input, .ops-global-filter select { width:100%; min-width:0; padding:12px 13px; border-radius:14px; font-size:14px; border:1px solid var(--line); background:rgba(255,255,255,.86); color:var(--ink); }
    .ops-global-filter-summary { display:flex; gap:8px; flex-wrap:wrap; align-items:center; color:var(--muted); font-size:12px; }
    .ops-filter-pill { display:inline-flex; align-items:center; gap:6px; padding:7px 10px; border-radius:999px; background:rgba(198,93,46,.09); color:var(--accent-dark); font-weight:800; }
    .ops-filter-pill.is-muted { background:rgba(64,49,37,.06); color:var(--muted); }
    .ops-grid { display:grid; gap:var(--section-gap); grid-template-columns: 1fr; align-items:start; }
    .ops-column { display:grid; gap:var(--section-gap); }
    .ops-column[data-ops-column="left"] { grid-template-columns:minmax(0, .95fr) minmax(360px, .75fr); align-items:stretch; }
    .ops-column[data-ops-column="right"] { grid-template-columns:repeat(3,minmax(0,1fr)); align-items:start; }
    .ops-column.ops-single-queue { grid-template-columns:1fr; }
    .ops-section { padding:var(--card-padding); border-radius:var(--radius); border:1px solid var(--line); background:var(--panel); display:grid; gap:16px; box-shadow:0 14px 34px rgba(28,24,20,.06); }
    .ops-section[data-draggable="true"] { cursor:grab; }
    .ops-section[data-draggable="true"] .ops-section-head h3,
    .ops-section[data-draggable="true"] .ops-next-action strong { position:relative; padding-left:18px; }
    .ops-section[data-draggable="true"] .ops-section-head h3::before,
    .ops-section[data-draggable="true"] .ops-next-action strong::before {
      content:"⋮⋮";
      position:absolute;
      left:0;
      top:0;
      color:rgba(136,65,34,.45);
      font-size:11px;
      letter-spacing:-2px;
    }
    .ops-section.is-dragging { opacity:.55; transform:scale(.985); box-shadow:0 12px 30px rgba(52,37,28,.10); }
    .ops-section.is-drop-target { border-color:rgba(190,90,46,.34); box-shadow:0 16px 34px rgba(190,90,46,.12); }
    .ops-column.is-drop-target { outline:2px dashed rgba(190,90,46,.28); outline-offset:6px; border-radius:20px; }
    .ops-builder-bar { display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
    .builder-pill { padding:8px 10px; border-radius:999px; font-size:11px; font-weight:700; letter-spacing:.04em; color:var(--accent-dark); background:rgba(190,90,46,.10); }
    .builder-pill.active { color:white; background:linear-gradient(135deg, var(--accent), var(--accent-dark)); }
    .ops-shell.builder-mode .ops-column { padding:6px; border-radius:22px; background:rgba(255,255,255,.32); }
    .ops-section-head { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; flex-wrap:wrap; }
    .ops-section-head h3 { margin:0; font-size:var(--section-title-size); font-family: var(--font-heading); letter-spacing:-.02em; }
    .ops-section-head p { margin:4px 0 0; color:var(--muted); font-size:13px; line-height:1.5; }
    .ops-queue { display:grid; gap:12px; }
    .ops-queue-search { width:100%; min-width:0; padding:12px 13px; border-radius:14px; font-size:14px; }
    .ops-mini-card { padding:15px 16px; border-radius:20px; border:1px solid rgba(32,28,24,.12); background:#ffffff; display:grid; gap:10px; transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease; overflow:visible; }
    .ops-mini-card:has(.ops-mini-media) { grid-template-columns:minmax(0,1fr) minmax(160px,220px); column-gap:18px; align-items:start; }
    .ops-mini-card[data-ops-detail-type] { cursor:pointer; }
    .ops-mini-card:hover { transform:translateY(-1px); box-shadow:0 12px 26px rgba(52,37,28,.075); border-color:rgba(190,90,46,.18); }
    .ops-mini-card.active { border-color:rgba(198,93,46,.45); box-shadow:0 16px 32px rgba(198,93,46,.12); }
    .ops-mini-media { grid-column:2; grid-row:1 / span 3; justify-self:end; width:100%; aspect-ratio:4/3; border-radius:16px; overflow:visible; border:1px solid rgba(64,49,37,.08); background:rgba(64,49,37,.04); position:relative; z-index:1; }
    .ops-mini-media img { width:100%; height:100%; object-fit:contain; display:block; background:#fff; border-radius:16px; transition:transform .32s cubic-bezier(.2,.8,.2,1), box-shadow .32s ease; cursor:zoom-in; }
    .ops-mini-media:hover { z-index:20; }
    .ops-mini-media:hover img { transform:scale(1.18); box-shadow:0 24px 52px rgba(16,24,40,.20); }
    .ops-mini-card:has(.ops-mini-media) .ops-mini-top,
    .ops-mini-card:has(.ops-mini-media) .ops-mini-meta,
    .ops-mini-card:has(.ops-mini-media) .ops-mini-actions { grid-column:1; }
    .ops-mini-top { display:flex; align-items:flex-start; justify-content:space-between; gap:10px; flex-wrap:wrap; }
    .ops-mini-top strong { font-size:19px; font-family: var(--font-heading); letter-spacing:-.02em; }
    .ops-mini-top span { padding:5px 9px; border-radius:999px; background:rgba(64,49,37,.06); color:var(--muted); font-size:12px; font-weight:800; }
    .ops-mini-meta { display:grid; gap:5px; color:var(--muted); font-size:13px; line-height:1.45; }
    .ops-mini-actions { display:flex; gap:8px; flex-wrap:wrap; }
    .ops-pagination { display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; padding-top:2px; color:var(--muted); font-size:12px; }
    .ops-page-buttons { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
    .ops-page-button { border:1px solid var(--line); background:rgba(255,255,255,.74); color:var(--ink); border-radius:999px; padding:8px 11px; font-weight:800; cursor:pointer; }
    .ops-page-button:hover:not(:disabled) { border-color:rgba(190,90,46,.28); color:var(--accent-dark); }
    .ops-page-button:disabled { opacity:.45; cursor:not-allowed; }
    .ops-page-indicator { font-weight:900; color:var(--accent-dark); }
    .stock-table { display:grid; gap:10px; }
    .stock-row { display:grid; grid-template-columns:1.05fr 1.5fr repeat(4,.72fr); gap:10px; align-items:center; padding:13px 14px; border-radius:18px; border:1px solid rgba(32,28,24,.12); background:#ffffff; }
    .stock-row.header { background:#fff4ed; color:var(--accent-dark); font-weight:900; font-size:12px; letter-spacing:.04em; text-transform:uppercase; }
    .stock-sort-button { width:100%; display:inline-flex; align-items:center; justify-content:flex-start; gap:6px; padding:0; border:0; background:transparent; color:inherit; font:inherit; font-weight:900; letter-spacing:.04em; text-transform:uppercase; cursor:pointer; }
    .stock-sort-button:hover { color:#1f7aec; }
    .stock-sort-icon { min-width:14px; color:#1f7aec; font-size:11px; }
    .stock-row strong { font-size:14px; }
    .stock-row span { color:var(--muted); font-size:13px; line-height:1.35; }
    .stock-number { font-weight:900; color:var(--ink); font-variant-numeric:tabular-nums; }
    .stock-loading { opacity:.72; pointer-events:none; }
    .packaging-grid { display:grid; gap:14px; grid-template-columns:1.1fr .8fr; align-items:start; }
    .packaging-picker-list, .packaging-history-list { display:grid; gap:10px; max-height:340px; overflow:auto; }
    .packaging-option { width:100%; text-align:left; border:1px solid rgba(32,28,24,.12); background:#fff; border-radius:16px; padding:12px 14px; display:grid; gap:5px; }
    .packaging-option.active { border-color:rgba(190,90,46,.45); background:#fff8f3; }
    .packaging-result-table { display:grid; gap:10px; }
    .packaging-result-row { display:grid; grid-template-columns:1.2fr .55fr .8fr .7fr .7fr .7fr .7fr .55fr; gap:10px; align-items:center; padding:12px; border:1px solid rgba(32,28,24,.12); border-radius:16px; background:#fff; }
    .packaging-result-row.header { background:#fff4ed; color:var(--accent-dark); font-size:12px; font-weight:900; text-transform:uppercase; letter-spacing:.04em; }
    .packaging-badge { display:inline-flex; align-items:center; justify-content:center; width:max-content; padding:5px 9px; border-radius:999px; background:rgba(190,90,46,.10); color:var(--accent-dark); font-weight:900; font-size:12px; }
    .carton-label-grid { display:grid; grid-template-columns:1fr .78fr; gap:16px; align-items:start; }
    .carton-picker-list, .carton-history-list { display:grid; gap:10px; max-height:320px; overflow:auto; }
    .carton-option { width:100%; text-align:left; border:1px solid rgba(32,28,24,.12); background:#fff; border-radius:16px; padding:12px 14px; display:grid; gap:5px; }
    .carton-option:hover { border-color:rgba(190,90,46,.42); background:#fff8f3; }
    .carton-product-option { grid-template-columns:72px minmax(0,1fr); align-items:center; column-gap:12px; }
    .carton-product-thumb { width:72px; height:72px; border-radius:10px; border:1px solid var(--line); background:#f6f7f9; object-fit:cover; }
    .carton-product-thumb.is-empty { display:flex; align-items:center; justify-content:center; color:var(--muted); font-size:11px; font-weight:800; }
    .carton-product-copy { display:grid; gap:5px; min-width:0; }
    .carton-selected-product { display:flex; align-items:center; gap:12px; margin-top:10px; padding:10px; border:1px solid rgba(32,28,24,.10); border-radius:14px; background:#fff; }
    .carton-selected-product.hidden { display:none; }
    .carton-selected-product img { width:72px; height:72px; border-radius:12px; object-fit:cover; border:1px solid var(--line); background:#f6f7f9; }
    .carton-selected-product strong { display:block; font-size:14px; line-height:1.25; }
    .carton-selected-product span { color:var(--muted); font-size:12px; }
    .carton-preview-table { display:grid; gap:8px; }
    .carton-preview-row { display:grid; grid-template-columns:.72fr .8fr .8fr 1.5fr auto; gap:12px; align-items:center; padding:12px 14px; border:1px solid rgba(32,28,24,.12); border-radius:14px; background:#fff; }
    .carton-preview-row.header { background:#fff4ed; color:var(--accent-dark); font-size:12px; font-weight:900; text-transform:uppercase; letter-spacing:.04em; }
    .carton-qty-input { max-width:120px; padding:10px 12px; font-weight:850; font-variant-numeric:tabular-nums; }
    .carton-total-invalid .carton-qty-input { border-color:#e04444; background:#fff5f5; }
    .carton-manual-tools { display:flex; gap:10px; align-items:center; justify-content:space-between; flex-wrap:wrap; padding:12px 14px; border:1px solid rgba(31,122,236,.22); border-radius:12px; background:#eef7ff; color:#174a7a; font-size:13px; font-weight:800; }
    .carton-manual-actions { display:flex; gap:8px; flex-wrap:wrap; }
    .carton-row-remove { min-width:38px; min-height:38px; border:1px solid rgba(179,63,37,.22); border-radius:10px; background:#fff8f6; color:var(--danger); font-weight:900; cursor:pointer; }
    .carton-validation-panel { padding:12px 14px; border-radius:14px; border:1px solid rgba(31,122,83,.22); background:rgba(31,122,83,.08); color:#176044; font-weight:800; }
    .carton-validation-panel.warning { border-color:rgba(179,63,37,.22); background:rgba(179,63,37,.08); color:var(--danger); }
    .carton-validation-panel ul { margin:6px 0 0 20px; padding:0; }
    .craftsman-grid { display:grid; grid-template-columns:minmax(280px,.82fr) 1.18fr; gap:16px; align-items:start; }
    .craftsman-list { display:grid; gap:10px; }
    .craftsman-card { display:flex; justify-content:space-between; gap:12px; align-items:center; padding:14px 16px; border:1px solid rgba(32,28,24,.10); border-radius:16px; background:#fff; box-shadow:0 10px 24px rgba(15,23,42,.06); }
    .craftsman-card strong { display:block; font-size:17px; color:var(--ink); }
    .craftsman-card span { display:block; margin-top:3px; color:var(--muted); font-size:12px; }
    .craftsman-card.inactive { opacity:.58; }
    .craftsman-actions { display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-end; }
    .craftsman-manage-modal-card { width:min(1240px, calc(100vw - 32px)); max-height:min(900px, calc(100vh - 32px)); overflow:hidden; background:#ffffff; color:#111827; border:1px solid #d9e3f0; box-shadow:0 32px 80px rgba(15,23,42,.18); }
    .craftsman-manage-modal-card .modal-head, .craftsman-manage-modal-card .modal-actions { background:#ffffff; border-color:#d9e3f0; }
    .craftsman-manage-modal-card .modal-body { background:#f8fbff; padding:24px; overflow:auto; overflow-x:hidden; color:#111827; }
    .craftsman-manage-modal-card .modal-actions { justify-content:flex-end; padding:18px 24px; }
    .craftsman-manage-modal-card .modal-muted { color:#475569; }
    .craftsman-manage-modal-card .close-x { color:var(--ink); }
    .craftsman-manage-grid { display:grid; grid-template-columns:minmax(0,.82fr) minmax(0,1.28fr); gap:20px; align-items:stretch; min-width:0; width:100%; }
    .craftsman-manage-panel { min-width:0; padding:22px; border-radius:18px; border:1px solid #d9e3f0; background:#ffffff; box-shadow:0 14px 36px rgba(15,23,42,.06); display:grid; gap:18px; align-content:start; }
    .craftsman-manage-panel h3 { margin:0; font-family:var(--font-heading); font-size:22px; letter-spacing:-.02em; color:#111827; }
    .craftsman-manage-panel p { margin:5px 0 0; color:#475569; font-size:13px; line-height:1.5; }
    .craftsman-manage-icon { width:44px; height:44px; border-radius:14px; display:grid; place-items:center; background:#eaf3ff; color:#1f7aec; font-size:22px; font-weight:900; }
    .craftsman-manage-title { display:flex; gap:12px; align-items:center; }
    .craftsman-manage-tip { display:inline-flex; align-items:center; gap:8px; padding:8px 12px; border-radius:10px; background:#eaf3ff; color:#2563eb; font-size:12px; font-weight:900; }
    .craftsman-manage-modal-card .modal-head h3,
    .craftsman-manage-modal-card label,
    .craftsman-manage-modal-card .checkline span { color:#111827 !important; }
    .craftsman-manage-modal-card input,
    .craftsman-manage-modal-card textarea { color:#111827; }
    .craftsman-manage-modal-card input::placeholder { color:#64748b; }
    .craftsman-search-row { display:grid; grid-template-columns:1fr auto; gap:10px; align-items:center; }
    .craftsman-card { border-color:#dfe7f1; border-radius:16px; box-shadow:0 10px 24px rgba(15,23,42,.045); }
    .craftsman-manage-panel, .craftsman-manage-panel * { box-sizing:border-box; }
    .craftsman-manage-panel { overflow:hidden; }
    .craftsman-manage-panel .ops-section-head { min-width:0; }
    .craftsman-manage-panel .ops-section-head > div { min-width:0; }
    .craftsman-card { min-width:0; }
    .craftsman-actions { flex:0 0 auto; }
    .craftsman-card-main { display:flex; gap:12px; align-items:center; min-width:0; }
    .craftsman-card-main > div:last-child { min-width:0; }
    .craftsman-card-main strong { display:block; overflow:hidden; text-overflow:ellipsis; }
    .craftsman-manage-panel .craftsman-card { display:grid; grid-template-columns:minmax(0,1fr); gap:14px; align-items:start; padding:18px; }
    .craftsman-manage-panel .craftsman-card-main { min-width:0; display:grid; grid-template-columns:56px minmax(0,1fr); gap:14px; align-items:center; }
    .craftsman-manage-panel .craftsman-card-main strong { white-space:normal; overflow:visible; text-overflow:clip; word-break:normal; overflow-wrap:normal; line-height:1.32; color:#111827; }
    .craftsman-manage-panel .craftsman-card-main span { color:#475569; line-height:1.35; }
    .craftsman-manage-panel .craftsman-status-pill { justify-self:start; white-space:nowrap; }
    .craftsman-manage-panel .craftsman-actions { justify-content:flex-start; gap:10px; }
    .craftsman-manage-panel .craftsman-actions .btn { min-width:96px; }
    .craftsman-avatar { width:48px; height:48px; border-radius:999px; display:grid; place-items:center; background:#dbeafe; color:#1d4ed8; font-size:17px; font-weight:900; flex:0 0 auto; }
    .craftsman-status-pill { display:inline-flex; align-items:center; gap:6px; padding:7px 10px; border-radius:999px; background:#dcfce7; color:#15803d; font-size:12px; font-weight:900; }
    .craftsman-status-pill::before { content:""; width:8px; height:8px; border-radius:999px; background:currentColor; }
    .craftsman-card.inactive .craftsman-status-pill { background:#f1f5f9; color:#64748b; }
    .craftsman-card.inactive .craftsman-status-pill::before { background:#94a3b8; }
    .dispatch-craftsman-select { position:relative; display:flex; align-items:center; }
    .dispatch-craftsman-select input { padding-right:96px; }
    .dispatch-craftsman-clear { position:absolute; right:38px; top:50%; transform:translateY(-50%); border:0; background:transparent; color:#1f7aec; font-weight:900; cursor:pointer; padding:6px; }
    .dispatch-craftsman-arrow { position:absolute; right:13px; top:50%; transform:translateY(-50%); color:#1f7aec; font-weight:900; pointer-events:none; }
    .carton-print-area { display:none; }
    .carton-layout-modal-card { width:min(1120px, calc(100vw - 28px)); }
    .carton-layout-modal-body { grid-template-columns:minmax(0,.95fr) minmax(360px,.8fr); align-items:start; }
    .carton-layout-open-row { display:flex; flex-wrap:wrap; gap:10px; align-items:center; }
    .carton-print-tools { padding:14px; border:1px solid var(--line); border-radius:18px; background:#f8fafc; display:grid; gap:12px; color:var(--ink); }
    .carton-print-tools h4 { margin:0; font-size:15px; }
    .carton-print-tools-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
    .carton-print-tools label { display:grid; gap:6px; font-size:12px; font-weight:850; color:var(--muted); }
    .carton-print-tools input { width:100%; min-width:0; padding:9px 10px; border-radius:10px; border:1px solid var(--line); background:#fff; font:inherit; }
    .carton-print-tools input[type="color"] { min-height:40px; padding:4px; }
    .carton-print-tools-actions { display:flex; gap:8px; flex-wrap:wrap; }
    .carton-align-field { display:grid; gap:8px; }
    .carton-align-field span { font-size:12px; font-weight:850; color:var(--muted); }
    .carton-align-buttons { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
    .carton-align-button { min-height:46px; border:1px solid var(--line); border-radius:10px; background:#fff; color:var(--ink); font-weight:900; cursor:pointer; display:grid; place-items:center; }
    .carton-align-button.active { border-color:#1f7aec; box-shadow:0 0 0 2px rgba(31,122,236,.16); color:#1f7aec; }
    .carton-align-icon { width:28px; height:24px; display:grid; gap:4px; align-content:center; }
    .carton-align-icon i { display:block; height:3px; border-radius:999px; background:currentColor; }
    .carton-align-icon.left i:nth-child(1), .carton-align-icon.left i:nth-child(3) { width:70%; }
    .carton-align-icon.left i:nth-child(2) { width:100%; }
    .carton-align-icon.center i { margin-inline:auto; }
    .carton-align-icon.center i:nth-child(1), .carton-align-icon.center i:nth-child(3) { width:70%; }
    .carton-align-icon.center i:nth-child(2) { width:100%; }
    .carton-align-icon.right i { margin-left:auto; }
    .carton-align-icon.right i:nth-child(1), .carton-align-icon.right i:nth-child(3) { width:70%; }
    .carton-align-icon.right i:nth-child(2) { width:100%; }
    .carton-layout-sample { border:1px solid var(--line); border-radius:18px; background:#fff; padding:14px; color:#000; overflow:auto; }
    .carton-layout-sample-title { margin:0 0 10px; color:var(--muted); font-size:13px; font-weight:900; }
    .carton-layout-sample-page { width:100%; aspect-ratio:210 / 148; padding:12px; border:1px solid rgba(0,0,0,.12); background:#fff; transform-origin:top left; overflow:hidden; }
    .carton-layout-sample table { width:100%; border-collapse:collapse; table-layout:fixed; }
    .carton-layout-sample td { padding:5px 7px; line-height:1.15; vertical-align:middle; }
    .carton-layout-sample .sample-label { font-weight:900; white-space:nowrap; }
    .carton-layout-sample .sample-strong { font-weight:900; }
    .carton-layout-sample .sample-value.align-left { text-align:left; }
    .carton-layout-sample .sample-value.align-center { text-align:center; }
    .carton-layout-sample .sample-value.align-right { text-align:right; }
    .carton-print-page {
      --carton-page-pad-y:3mm;
      --carton-page-pad-x:1mm;
      --carton-table-width:208mm;
      --carton-left-col:52mm;
      --carton-cell-pad-y:2.1mm;
      --carton-cell-pad-x:2.5mm;
      --carton-label-font:20pt;
      --carton-strong-font:25pt;
      --carton-value-font:20pt;
      --carton-border-width:0mm;
      --carton-border-color:#000000;
      --carton-text-color:#000000;
      width:209mm; height:147mm; min-height:0; box-sizing:border-box; overflow:hidden; padding:var(--carton-page-pad-y) var(--carton-page-pad-x); background:#fff; color:var(--carton-text-color); font-family:"Noto Sans Thai", "Leelawadee UI", "Segoe UI", Tahoma, Arial, sans-serif; page-break-inside:avoid; break-inside:avoid; display:flex; align-items:center; justify-content:center;
    }
    .carton-print-page:not(:last-child) { page-break-after:always; break-after:page; }
    .carton-print-table { width:var(--carton-table-width); max-width:100%; margin:0 auto; border-collapse:collapse; table-layout:fixed; }
    .carton-print-table col:first-child { width:var(--carton-left-col); }
    .carton-print-table td { border:var(--carton-border-width) solid var(--carton-border-color); padding:var(--carton-cell-pad-y) var(--carton-cell-pad-x); vertical-align:middle; line-height:1.2; }
    .carton-print-table td:first-child { padding-left:0; text-align:left !important; }
    .carton-print-table tr { page-break-inside:avoid; break-inside:avoid; }
    .carton-print-table tr.address-row td { padding-top:min(2.4mm, calc(var(--carton-cell-pad-y) + .3mm)); padding-bottom:min(2.4mm, calc(var(--carton-cell-pad-y) + .3mm)); }
    .carton-print-label { font-weight:900; font-size:var(--carton-label-font); white-space:nowrap; letter-spacing:0; text-align:left !important; }
    .carton-print-label.strong { font-size:var(--carton-strong-font); }
    .carton-print-value { font-size:var(--carton-value-font); font-weight:500; overflow-wrap:anywhere; }
    .carton-print-value.strong { font-size:var(--carton-strong-font); font-weight:500; }
    .carton-print-value.center { text-align:center; }
    .carton-print-value.align-left { text-align:left; }
    .carton-print-value.align-center { text-align:center; }
    .carton-print-value.align-right { text-align:right; }
    @page { size:A5 landscape; margin:0; }
    @media print {
      html, body.carton-print-mode { width:210mm; min-height:148mm; margin:0 !important; padding:0 !important; background:#fff !important; overflow:visible !important; }
      body.carton-print-mode > :not(#carton-label-print-area) { display:none !important; }
      body.carton-print-mode #carton-label-print-area { display:block !important; position:static !important; width:210mm; margin:0 !important; padding:0 !important; background:#fff; }
      body.carton-print-mode .carton-print-page { box-shadow:none; border:0; margin:0; }
      body.carton-print-mode .carton-print-page:last-child { page-break-after:auto; break-after:auto; }
    }
    .ops-next-action { position:relative; overflow:hidden; min-height:190px; border-color:rgba(198,93,46,.24); background:#fffaf6; }
    .ops-next-action::after { content:""; position:absolute; right:-70px; bottom:-84px; width:220px; height:220px; border-radius:50%; background:radial-gradient(circle, rgba(190,90,46,.16), transparent 64%); pointer-events:none; }
    .ops-next-action > * { position:relative; z-index:1; }
    .ops-next-action strong { font-size:13px; text-transform:uppercase; letter-spacing:.08em; color:var(--accent-dark); }
    .ops-next-action b { font-size:34px; font-family: var(--font-heading); line-height:1.08; letter-spacing:-.035em; }
    .ops-next-action span { color:var(--muted); line-height:1.55; }
    .ops-current-grid { display:grid; gap:12px; grid-template-columns:repeat(3,minmax(0,1fr)); }
    .ops-current-card { padding:17px; border-radius:20px; border:1px solid rgba(32,28,24,.12); background:#ffffff; display:grid; gap:9px; }
    .ops-current-card strong { font-size:12px; color:var(--muted); letter-spacing:.08em; text-transform:uppercase; }
    .ops-current-card b { font-size:18px; }
    .ops-current-card span { font-size:13px; color:var(--muted); line-height:1.5; }
    .ops-empty { padding:18px; border-radius:20px; border:1px dashed rgba(32,28,24,.20); color:var(--muted); background:#fbfbfc; font-size:14px; line-height:1.6; }
    .ops-detail-panel { padding:20px; border-radius:26px; border:1px solid rgba(190,90,46,.20); background:#ffffff; box-shadow:0 16px 34px rgba(190,90,46,.08); display:grid; gap:14px; }
    .ops-detail-head { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; flex-wrap:wrap; }
    .ops-detail-head h3 { margin:0; font-family:var(--font-heading); font-size:28px; letter-spacing:-.025em; }
    .ops-detail-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; }
    .ops-detail-image { width:min(50%, 520px); max-height:180px; border-radius:20px; overflow:hidden; border:1px solid rgba(64,49,37,.08); background:rgba(64,49,37,.04); }
    .ops-detail-grid .ops-detail-image { width:100%; min-height:132px; max-height:none; display:grid; place-items:center; background:#fff; }
    .ops-detail-image img { width:100%; height:100%; max-height:180px; object-fit:contain; display:block; }
    .ops-detail-grid .ops-detail-image img { max-height:190px; padding:8px; }
    .ops-detail-item { padding:13px; border-radius:16px; border:1px solid rgba(32,28,24,.12); background:#f8f8f9; display:grid; gap:5px; }
    .ops-detail-item strong { color:var(--muted); font-size:11px; letter-spacing:.08em; text-transform:uppercase; }
    .ops-detail-item span { font-weight:800; line-height:1.35; }
    .ops-count-pill { display:inline-flex; align-items:center; justify-content:center; min-width:34px; padding:7px 10px; border-radius:999px; background:rgba(190,90,46,.10); color:var(--accent-dark); font-size:12px; font-weight:900; }
    .ops-detail-modal-content { display:grid; gap:16px; }
    .ops-detail-modal-content .ops-detail-grid { grid-template-columns:repeat(var(--popup-detail-columns),minmax(0,1fr)); }
    .ops-detail-modal-content.layout-compact .ops-detail-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .ops-detail-modal-content.layout-wide .ops-detail-grid { grid-template-columns:repeat(4,minmax(0,1fr)); }
    .ops-detail-drawer-content { display:grid; gap:18px; min-height:100%; }
    .ops-detail-hero { position:relative; overflow:hidden; display:grid; gap:18px; padding:20px; border-radius:26px; border:1px solid rgba(17,24,39,.08); background:linear-gradient(145deg,#ffffff 0%,#f7fbff 56%,#eef6ff 100%); box-shadow:0 18px 45px rgba(15,23,42,.07); }
    .ops-detail-hero::after { content:""; position:absolute; right:-80px; top:-80px; width:230px; height:230px; border-radius:999px; background:radial-gradient(circle, rgba(37,99,235,.14), transparent 68%); pointer-events:none; }
    .ops-detail-hero > * { position:relative; z-index:1; }
    .ops-detail-hero-top { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; }
    .ops-detail-kicker { color:#64748b; font-size:12px; font-weight:900; letter-spacing:.08em; text-transform:uppercase; }
    .ops-detail-hero-title { margin:6px 0 0; font-family:var(--font-heading); font-size:clamp(26px,3.4vw,38px); line-height:1.05; letter-spacing:-.035em; color:#111827; }
    .ops-detail-status-chip { display:inline-flex; align-items:center; justify-content:center; min-width:86px; padding:9px 13px; border-radius:999px; background:#eef6ff; color:#1d4ed8; font-size:12px; font-weight:900; white-space:nowrap; }
    .ops-detail-hero-main { display:grid; grid-template-columns:minmax(0,1fr) minmax(180px,260px); gap:18px; align-items:stretch; }
    .ops-detail-hero-copy { display:grid; align-content:end; gap:10px; min-height:170px; }
    .ops-detail-primary-value { font-size:18px; font-weight:900; color:#111827; line-height:1.45; }
    .ops-detail-subvalue { color:#64748b; font-size:14px; line-height:1.55; }
    .ops-detail-hero-media { min-height:190px; border-radius:24px; border:1px solid rgba(15,23,42,.08); background:rgba(255,255,255,.72); display:grid; place-items:center; overflow:hidden; }
    .ops-detail-hero-media img { width:100%; height:100%; max-height:260px; object-fit:contain; padding:12px; display:block; }
    .ops-detail-hero-media.empty { color:#94a3b8; font-size:13px; font-weight:800; }
    .ops-detail-summary-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
    .ops-detail-summary-card { padding:16px; border-radius:22px; border:1px solid rgba(15,23,42,.08); background:#ffffff; box-shadow:0 10px 28px rgba(15,23,42,.045); display:grid; gap:7px; min-height:96px; }
    .ops-detail-summary-card strong { color:#64748b; font-size:12px; font-weight:900; letter-spacing:.08em; text-transform:uppercase; }
    .ops-detail-summary-card span { color:#111827; font-weight:900; line-height:1.38; word-break:break-word; }
    .ops-detail-list { display:grid; gap:10px; padding:14px; border-radius:24px; border:1px solid rgba(15,23,42,.07); background:#f8fafc; }
    .ops-detail-row { display:grid; grid-template-columns:150px minmax(0,1fr); gap:14px; align-items:center; padding:12px 13px; border-radius:16px; background:#ffffff; border:1px solid rgba(15,23,42,.055); }
    .ops-detail-row strong { color:#64748b; font-size:12px; font-weight:900; letter-spacing:.06em; text-transform:uppercase; }
    .ops-detail-row span { color:#111827; font-weight:800; line-height:1.45; word-break:break-word; }
    .ops-detail-actions { position:sticky; bottom:-22px; margin:0 -22px -22px; padding:16px 22px 22px; border-top:1px solid rgba(15,23,42,.08); background:rgba(255,255,255,.88); backdrop-filter:blur(18px); display:flex; flex-wrap:wrap; gap:12px; z-index:3; }
    .image-modal-card { width:min(1320px, calc(100vw - 36px)); background:rgba(255,252,247,.98); color:var(--ink); border:1px solid rgba(64,49,37,.10); box-shadow:0 32px 80px rgba(34,24,18,.20); }
    .image-modal-card .modal-head { border-color:rgba(64,49,37,.08); }
    .image-modal-card .close-x { color:var(--ink); }
    .mrp-image-full { display:block; width:100%; max-height:calc(100vh - 180px); object-fit:contain; border-radius:18px; background:#fff; border:1px solid rgba(64,49,37,.08); }
    .ops-flow { display:grid; gap:18px; }
    .ops-flow-track { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; align-items:start; }
    .ops-flow-step { position:relative; display:grid; justify-items:center; gap:8px; color:var(--muted); text-align:center; font-size:13px; font-weight:800; }
    .ops-flow-step:not(:last-child)::after { content:""; position:absolute; top:19px; left:calc(50% + 24px); width:calc(100% - 48px); height:2px; background:rgba(64,49,37,.12); }
    .ops-flow-dot { position:relative; z-index:1; width:38px; height:38px; border-radius:999px; display:grid; place-items:center; color:white; background:rgba(64,49,37,.18); box-shadow:0 10px 22px rgba(52,37,28,.08); }
    .ops-flow-step.done .ops-flow-dot { background:#63b57c; }
    .ops-flow-step.active .ops-flow-dot { background:var(--accent); }
    .ops-flow-step.wait .ops-flow-dot { background:#9fa4a8; }
    .ops-flow-step.finish .ops-flow-dot { background:#7f8b94; }
    .ops-dashboard-queues { display:grid; gap:18px; grid-template-columns:repeat(3,minmax(0,1fr)); }
    .ops-dashboard-queues .ops-section { min-height:320px; }
    .content { display:grid; grid-template-columns: minmax(0,1.32fr) minmax(320px,.92fr); gap:18px; align-items:start; }
    .shell.mrp-mode .content { grid-template-columns: 1fr; }
    .shell.dashboard-mode { width: min(var(--app-max-width), calc(100vw - 28px)); }
    .shell.dashboard-mode .content { grid-template-columns: 1fr; }
    .shell.dashboard-mode .result { position:static; }
    .stack { display:grid; gap:18px; }
    .panel, .result, .history { padding:22px; }
    .section-title { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:18px; }
    .section-title h2 { margin:0; font-size:28px; font-family: var(--font-heading); letter-spacing:-.025em; }
    .section-title p { margin:6px 0 0; color:var(--muted); font-size:13px; line-height:1.6; }
    .status-pill { padding:7px 12px; border-radius:999px; font-size:11px; font-weight:800; color:var(--accent-dark); background:var(--accent-soft); white-space:nowrap; }
    form { display:grid; gap:16px; }
    .grid-2 { display:grid; gap:16px; grid-template-columns: repeat(2, minmax(0,1fr)); }
    .grid-3 { display:grid; gap:16px; grid-template-columns: repeat(3, minmax(0,1fr)); }
    .field { display:grid; gap:8px; }
    .field-head { display:flex; align-items:center; justify-content:space-between; gap:12px; }
    .field label { font-size:14px; font-weight:700; }
    .hint { font-size:12px; color:var(--muted); margin-top:-4px; }
    input, textarea, select { width:100%; border:1px solid rgba(64,49,37,.12); border-radius:16px; padding:14px 15px; font:inherit; color:var(--ink); background:rgba(255,255,255,.93); outline:none; transition:border-color .15s ease, box-shadow .15s ease, transform .15s ease; }
    input:focus, textarea:focus, select:focus { border-color:rgba(198,93,46,.55); box-shadow:0 0 0 4px rgba(198,93,46,.12); transform:translateY(-1px); }
    textarea { min-height:140px; resize:vertical; }
    .picker { position:relative; }
    .picker-menu { position:absolute; z-index:15; top:calc(100% + 8px); left:0; right:0; display:none; max-height:240px; overflow:auto; padding:8px; border-radius:18px; border:1px solid rgba(64,49,37,.12); background:rgba(255,251,246,.98); box-shadow:0 22px 44px rgba(45,29,20,.18); }
    .picker.open .picker-menu { display:block; }
    .picker-menu button { width:100%; padding:11px 12px; border:0; border-radius:12px; background:transparent; font:inherit; text-align:left; color:var(--ink); cursor:pointer; }
    .picker-menu button:hover, .picker-menu button:focus { background:rgba(198,93,46,.10); outline:none; }
    .picker-menu .meta { display:block; margin-top:4px; font-size:12px; color:var(--muted); }
    .selection-chip { display:none; align-items:center; justify-content:space-between; gap:10px; margin-top:8px; padding:11px 12px; border-radius:14px; border:1px solid rgba(198,93,46,.16); background:rgba(198,93,46,.08); }
    .selection-chip.active { display:flex; }
    .selection-chip button, .mini-chip button { border:0; background:transparent; color:var(--accent-dark); font-weight:700; cursor:pointer; padding:0; }
    .chip-list { display:flex; flex-wrap:wrap; gap:8px; margin-top:8px; }
    .mini-chip { display:inline-flex; align-items:center; gap:8px; padding:9px 12px; border-radius:999px; border:1px solid rgba(198,93,46,.16); background:rgba(198,93,46,.08); font-size:13px; }
    .mini-action, .link-action { appearance:none; border:0; background:transparent; color:var(--accent-dark); font:inherit; font-size:13px; font-weight:var(--editor-text-weight, 700); cursor:pointer; padding:0; }
    .mini-action:disabled, .link-action:disabled { opacity:.45; cursor:not-allowed; }
    .upload-box { display:grid; gap:10px; padding:14px; border:1px dashed rgba(64,49,37,.18); border-radius:18px; background:rgba(255,255,255,.52); }
    .upload-meta { font-size:13px; color:var(--muted); }
    .upload-preview { display:none; max-width:100%; max-height:220px; border-radius:16px; border:1px solid rgba(64,49,37,.10); object-fit:cover; background:rgba(255,255,255,.74); }
    .upload-preview.show { display:block; }
    .actions, .history-actions { display:flex; flex-wrap:wrap; gap:12px; }
    .btn { appearance:none; border:0; border-radius:16px; padding:13px 18px; font:inherit; font-weight:var(--editor-text-weight, 800); cursor:pointer; transition:transform .16s ease, box-shadow .16s ease, opacity .16s ease; }
    .btn:hover { transform:translateY(-1px); }
    .btn:disabled { opacity:.55; cursor:not-allowed; transform:none; }
    .btn-primary { color:white; background:linear-gradient(135deg, var(--accent), var(--accent-dark)); box-shadow:0 12px 24px rgba(190,90,46,.18); }
    .btn-secondary { color:var(--ink); background:rgba(64,49,37,.07); }
    .btn-secondary:hover { box-shadow:0 10px 22px rgba(52,37,28,.08); }
    .btn-danger { color:#fff; background:linear-gradient(135deg, #c84b36, #8e2f24); box-shadow:0 12px 24px rgba(179,63,37,.18); }
    .result { position:sticky; top:18px; }
    .result-card { margin-top:14px; padding:18px; border-radius:18px; border:1px solid rgba(32,28,24,.12); background:#f8f8f9; }
    .result-label { margin:0 0 6px; font-size:12px; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); }
    .result-number { margin:0; font-family: var(--font-heading); font-size: clamp(28px, 4vw, 42px); line-height:1.05; letter-spacing:-.03em; }
    .result-list { display:grid; gap:14px; margin-top:18px; }
    .result-item { padding-bottom:14px; border-bottom:1px solid rgba(64,49,37,.08); }
    .result-item:last-child { border-bottom:0; padding-bottom:0; }
    .result-item strong { display:block; margin-bottom:4px; font-size:12px; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); }
    .result-item span { display:block; line-height:1.5; word-break:break-word; }
    .history-toolbar { display:grid; gap:12px; margin-bottom:16px; }
    .history-list { display:grid; gap:12px; }
    .history-card { padding:17px; border-radius:20px; border:1px solid rgba(32,28,24,.12); background:#ffffff; }
    .queue-card { padding:17px; border-radius:20px; border:1px solid rgba(32,28,24,.12); background:#ffffff; display:grid; gap:11px; transition:transform .16s ease, box-shadow .16s ease; }
    .queue-card:hover { transform:translateY(-1px); box-shadow:0 12px 26px rgba(52,37,28,.075); }
    .queue-card.active { border-color:rgba(198,93,46,.45); box-shadow:0 16px 32px rgba(198,93,46,.12); }
    .queue-card-top { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; flex-wrap:wrap; }
    .queue-card strong { font-size:18px; font-family: var(--font-heading); }
    .queue-meta { display:grid; gap:6px; color:var(--muted); font-size:13px; }
    .queue-summary { margin:0 0 14px; padding:14px 16px; border-radius:18px; border:1px solid rgba(32,28,24,.12); background:#f8f8f9; }
    .queue-summary strong { display:block; margin-bottom:6px; }
    .queue-summary span { display:block; margin-top:4px; color:var(--muted); }
    .sub-grid { display:grid; gap:18px; grid-template-columns: minmax(380px, 560px) minmax(0,1fr); align-items:start; }
    .shell.mrp-mode .sub-grid { grid-template-columns: minmax(760px, 1.55fr) minmax(420px, .95fr); }
    .mrp-topbar { display:flex; flex-wrap:wrap; gap:12px; align-items:center; justify-content:space-between; margin-bottom:14px; }
    .mrp-actions { display:flex; flex-wrap:wrap; gap:10px; }
    .mrp-statusline { display:flex; flex-wrap:wrap; gap:12px; align-items:center; color:var(--muted); font-size:13px; }
    .app-production-card { display:grid; gap:12px; padding:16px; border:1px solid rgba(31,122,83,.20); border-radius:18px; background:linear-gradient(180deg, rgba(31,122,83,.08), rgba(255,255,255,.95)); }
    .app-production-head { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; flex-wrap:wrap; }
    .app-production-title { display:grid; gap:4px; }
    .app-production-title strong { font-size:17px; }
    .app-production-title span, .app-production-meta { color:var(--muted); font-size:13px; line-height:1.45; }
    .app-production-stat-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
    .app-production-stat { padding:12px; border-radius:12px; border:1px solid rgba(32,28,24,.10); background:rgba(255,255,255,.78); }
    .app-production-stat strong { display:block; font-size:20px; }
    .app-production-stat span { display:block; color:var(--muted); font-size:12px; }
    #dispatch-modal .modal-card { width:min(1380px, calc(100vw - 28px)); background:#ffffff; color:var(--ink); border:1px solid rgba(32,28,24,.12); box-shadow:0 32px 80px rgba(34,24,18,.18); }
    #dispatch-modal .modal-head, #dispatch-modal .modal-actions { border-color:rgba(64,49,37,.08); background:#ffffff; }
    #dispatch-modal .modal-muted { color:var(--muted); }
    #dispatch-modal .close-x { color:var(--ink); }
    #dispatch-modal .app-production-manage { background:linear-gradient(135deg,#f8fbff,#ffffff); border-color:#d9e7fb; }
    #dispatch-modal .app-production-stat { background:#ffffff; border-color:#dfe7f1; box-shadow:0 10px 24px rgba(31,122,236,.06); }
    #dispatch-modal .app-production-stat strong { color:#1f2937; font-size:28px; }
    .dispatch-assignment-panel { display:grid; gap:12px; padding:14px; border-radius:16px; border:1px solid #dfe7f1; background:#f8fafc; }
    .dispatch-assignment-head { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
    .dispatch-assignment-head strong { font-family:var(--font-heading); font-size:18px; }
    .dispatch-line-list { display:grid; gap:12px; }
    .dispatch-line-row { display:grid; grid-template-columns:minmax(260px,1.35fr) minmax(190px,.85fr) minmax(160px,.72fr) minmax(170px,.78fr) minmax(170px,.78fr) 68px; gap:12px; align-items:end; padding:16px; border-radius:18px; border:1px solid #dfe7f1; background:#ffffff; box-shadow:0 10px 26px rgba(15,23,42,.045); }
    .dispatch-line-row.is-error { border-color:#fca5a5; background:#fff7f7; box-shadow:0 0 0 3px rgba(239,68,68,.08); }
    .dispatch-line-row .field { margin:0; min-width:0; }
    .dispatch-line-row label { min-height:42px; display:flex; align-items:flex-end; gap:5px; flex-wrap:wrap; line-height:1.35; }
    .dispatch-line-qty-control { display:grid; grid-template-columns:minmax(96px,1fr) auto; gap:8px; align-items:center; }
    .dispatch-line-qty-control input { width:100%; min-width:0; }
    .dispatch-line-status { color:var(--muted); font-size:12px; line-height:1.5; }
    .dispatch-line-status.is-error { color:#dc2626; font-weight:800; }
    .dispatch-line-label-note { color:var(--muted); font-size:12px; font-weight:700; }
    .dispatch-line-row input.is-error { border-color:#ef4444 !important; box-shadow:0 0 0 4px rgba(239,68,68,.12) !important; background:#fffafa; }
    .dispatch-line-remove { align-self:end; min-width:64px; height:48px; }
    .work-stock-titlebar { align-items:flex-start; }
    .work-stock-toolbar { display:flex; gap:10px; align-items:center; flex-wrap:wrap; justify-content:flex-end; }
    .work-stock-sync-meta { margin-top:6px; color:var(--muted); font-size:13px; font-weight:800; }
    .stock-admin-sync-button[disabled] { opacity:.68; }
    .dispatch-qc-history { display:grid; gap:10px; padding:14px; border-radius:16px; border:1px solid #dfe7f1; background:#ffffff; }
    .dispatch-qc-history-head { display:flex; justify-content:space-between; gap:12px; align-items:flex-start; flex-wrap:wrap; }
    .dispatch-qc-history-head strong { font-family:var(--font-heading); font-size:18px; }
    .dispatch-qc-history-head span, .dispatch-qc-history-empty { color:var(--muted); font-size:13px; line-height:1.5; }
    .dispatch-qc-history-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
    .dispatch-qc-history-card { border:1px solid #e5edf6; border-radius:14px; padding:12px; background:#f8fafc; display:grid; gap:4px; min-width:0; }
    .dispatch-qc-history-card strong { font-size:14px; }
    .dispatch-qc-history-card span { color:var(--muted); font-size:12px; line-height:1.45; }
    .dispatch-total-row { display:flex; gap:8px; flex-wrap:wrap; align-items:center; color:var(--muted); font-size:13px; }
    .dispatch-total-row b { color:var(--ink); }
    .dispatch-total-row.is-error, .dispatch-total-row.is-error b { color:#dc2626; font-weight:900; }
    .line-status-pill { display:inline-flex; align-items:center; justify-content:center; padding:5px 8px; border-radius:999px; font-size:11px; font-weight:900; background:#eef2ff; color:#2563eb; }
    .line-status-pill[data-line-status="sent"] { background:#dcfce7; color:#15803d; }
    .line-status-pill[data-line-status="failed"] { background:#fee2e2; color:#b91c1c; }
    .line-status-pill[data-line-status="not_configured"] { background:#f1f5f9; color:#64748b; }
    .app-production-actions { display:flex; flex-wrap:wrap; gap:10px; }
    .app-production-list { display:grid; gap:6px; color:var(--muted); font-size:13px; }
    .app-production-manage { display:grid; gap:12px; padding:14px; border-radius:16px; border:1px solid rgba(31,122,83,.18); background:rgba(31,122,83,.055); }
    .app-production-manage-head { display:flex; justify-content:space-between; align-items:flex-start; gap:12px; flex-wrap:wrap; }
    .app-production-manage-head strong { display:block; font-size:16px; }
    .app-production-manage-head span { display:block; margin-top:3px; color:var(--muted); font-size:12px; line-height:1.45; }
    .app-production-result { padding:12px 14px; border-radius:14px; background:#fff; border:1px solid rgba(32,28,24,.10); color:var(--muted); font-size:13px; line-height:1.45; }
    .app-production-receipt-list { display:grid; gap:8px; }
    .app-production-receipt-row { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:10px; align-items:center; padding:12px; border-radius:14px; border:1px solid rgba(32,28,24,.10); background:#fff; }
    .app-production-receipt-main { display:grid; gap:4px; min-width:0; }
    .app-production-receipt-main strong { font-size:15px; }
    .app-production-receipt-main span { color:var(--muted); font-size:12px; line-height:1.45; }
    .app-production-row-actions { display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-end; }
    .has-tooltip { position:relative; }
    .has-tooltip[data-tooltip]:hover::after, .has-tooltip[data-tooltip]:focus-visible::after {
      content:attr(data-tooltip); position:absolute; z-index:60; left:50%; bottom:calc(100% + 10px); transform:translateX(-50%);
      width:max-content; min-width:160px; max-width:min(260px, 70vw); padding:9px 11px; border-radius:8px; background:#1f2937; color:#fff;
      font-size:12px; line-height:1.35; font-weight:700; text-align:center; white-space:normal; box-shadow:0 12px 28px rgba(15,23,42,.22); pointer-events:none;
    }
    .has-tooltip[data-tooltip]:hover::before, .has-tooltip[data-tooltip]:focus-visible::before {
      content:""; position:absolute; z-index:61; left:50%; bottom:calc(100% + 4px); transform:translateX(-50%);
      border:6px solid transparent; border-top-color:#1f2937; pointer-events:none;
    }
    .mrp-lookup-card, .mrp-edit-card { padding:18px; border-radius:20px; border:1px solid rgba(32,28,24,.12); background:#ffffff; }
    .mrp-lookup-card { display:grid; gap:14px; }
    .mrp-edit-card { display:grid; gap:14px; }
    .shell.mrp-mode #mrp-edit-form .grid-2 { grid-template-columns: minmax(220px, 280px) minmax(280px, 1fr); align-items:end; }
    .shell.mrp-mode #mrp-edit-form .actions { justify-content:flex-start; }
    .detail-layout-row { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; padding:12px 14px; border-radius:18px; border:1px solid rgba(32,28,24,.12); background:#f8f8f9; }
    .detail-layout-row strong { display:block; font-size:13px; color:var(--ink); }
    .detail-layout-row span { display:block; margin-top:2px; color:var(--muted); font-size:12px; line-height:1.45; }
    .layout-switch { display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
    .layout-switch-button { appearance:none; border:1px solid rgba(64,49,37,.10); border-radius:999px; padding:8px 12px; background:rgba(255,255,255,.82); color:var(--muted); font:inherit; font-size:12px; font-weight:800; cursor:pointer; }
    .layout-switch-button.active { border-color:transparent; background:linear-gradient(135deg, var(--accent), var(--accent-dark)); color:white; box-shadow:0 8px 18px rgba(190,90,46,.16); }
    .detail-grid { display:grid; gap:12px; grid-template-columns: repeat(var(--detail-grid-columns), minmax(0,1fr)); }
    .mrp-detail-layout-compact .detail-grid { grid-template-columns:1fr; }
    .mrp-detail-layout-wide .detail-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
    .detail-item { padding:14px 15px; border-radius:16px; border:1px solid rgba(32,28,24,.12); background:#f8f8f9; }
    .detail-item strong { display:block; margin-bottom:4px; font-size:12px; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); }
    .detail-item span { display:block; font-size:15px; line-height:1.5; word-break:break-word; }
    .mrp-media { margin-top:14px; padding:14px; border-radius:18px; border:1px solid rgba(32,28,24,.12); background:#f8f8f9; }
    .mrp-media-head { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:10px; }
    .mrp-media strong { display:block; font-size:12px; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); }
    .mrp-media .hint { margin:0; color:var(--muted); font-size:12px; }
    .mrp-media img { display:none; width:100%; max-height:520px; object-fit:contain; border-radius:16px; border:1px solid rgba(64,49,37,.08); background:#fff; cursor:zoom-in; image-rendering:auto; }
    .mrp-media img.show { display:block; }
    .mrp-media .empty { color:var(--muted); font-size:14px; }
    .placeholder-table { display:grid; gap:12px; }
    .placeholder-row { display:grid; grid-template-columns: minmax(180px, 1.2fr) minmax(130px,.9fr) minmax(130px,.9fr) minmax(110px,.8fr) minmax(130px,.9fr) minmax(160px,1fr); gap:12px; align-items:center; padding:14px 16px; border-radius:16px; border:1px solid rgba(32,28,24,.12); background:#ffffff; }
    .placeholder-row.header { background:#fff4ed; color:var(--accent-dark); font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; }
    .placeholder-row .main { display:grid; gap:4px; }
    .placeholder-row .main strong { font-size:16px; font-family: Georgia, "Times New Roman", serif; }
    .placeholder-row .main span, .placeholder-row .cell-meta { font-size:13px; color:var(--muted); }
    .placeholder-cell { display:grid; gap:4px; }
    .placeholder-actions { display:flex; flex-wrap:wrap; gap:8px; }
    .btn-xs { padding:9px 12px; border-radius:12px; font-size:13px; }
    .repair-placeholder-card { padding:18px; border-radius:20px; border:1px dashed rgba(32,28,24,.20); background:#fbfbfc; color:var(--muted); }
    .repair-placeholder-card strong { display:block; margin-bottom:8px; color:var(--ink); font-size:18px; font-family: Georgia, "Times New Roman", serif; }
    .history-card-top { display:flex; align-items:baseline; justify-content:space-between; gap:10px; margin-bottom:10px; flex-wrap:wrap; }
    .history-card-top strong { font-size:18px; font-family: var(--font-heading); }
    .history-badges { display:grid; gap:6px; }
    .history-badges span { display:block; font-size:13px; color:var(--muted); }
    .history-note { margin-top:10px; font-size:14px; line-height:1.55; color:var(--ink); white-space:pre-wrap; }
    .message { margin-top:14px; border-radius:16px; padding:13px 14px; font-size:14px; display:none; }
    .message.show { display:block; }
    .message.success { color:var(--ok); background:rgba(31,122,83,.10); border:1px solid rgba(31,122,83,.16); }
    .message.warning { color:#9a5a18; background:rgba(193,124,38,.12); border:1px solid rgba(193,124,38,.22); }
    .message.error { color:var(--danger); background:rgba(179,63,37,.10); border:1px solid rgba(179,63,37,.16); }
    .side-note { margin-top:14px; font-size:13px; line-height:1.6; color:var(--muted); }
    .hidden { display:none !important; }
    .view-hidden { display:none !important; }
    .overlay { position:fixed; inset:0; z-index:100; display:flex; align-items:center; justify-content:center; padding:18px; background:rgba(35,22,16,.42); backdrop-filter:blur(12px); }
    .login-card { width:min(460px,100%); padding:24px; border-radius:28px; border:1px solid rgba(32,28,24,.12); background:#ffffff; box-shadow:0 30px 80px rgba(26,15,10,.22); }
    .login-card h2 { margin:0 0 8px; font-family: var(--font-heading); font-size:32px; }
    .visual-editable { position: relative; transition: box-shadow .16s ease, border-color .16s ease; }
    .visual-editor-mode .visual-editable { cursor: pointer; }
    .visual-editor-mode .visual-editable::after {
      content: "Edit";
      position: absolute;
      top: 10px;
      right: 10px;
      padding: 4px 8px;
      border-radius: 999px;
      font-size: 10px;
      font-weight: 700;
      letter-spacing: .08em;
      text-transform: uppercase;
      color: var(--accent-dark);
      background: rgba(255,255,255,.86);
      border: 1px solid rgba(190,90,46,.18);
      opacity: .0;
      pointer-events: none;
    }
    .visual-editor-mode .visual-editable:hover::after,
    .visual-editable.is-selected::after { opacity: 1; }
    .visual-editable.is-selected { box-shadow: 0 0 0 3px rgba(190,90,46,.18), var(--shadow); border-color: rgba(190,90,46,.34); }
    .visual-editor-drawer {
      position: fixed;
      top: 24px;
      right: 24px;
      width: min(360px, calc(100vw - 32px));
      max-height: calc(100vh - 48px);
      overflow: auto;
      z-index: 130;
      padding: 18px;
      border-radius: 26px;
      border: 1px solid rgba(64,49,37,.12);
      background: #ffffff;
      box-shadow: 0 28px 70px rgba(34,24,18,.16);
      backdrop-filter: blur(16px);
      display: grid;
      gap: 14px;
    }
    .visual-editor-drawer.view-hidden { display: none !important; }
    .visual-editor-head { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
    .visual-editor-head h3 { margin:0; font-size:22px; font-family: var(--font-heading); }
    .visual-editor-head p { margin:6px 0 0; color:var(--muted); font-size:13px; line-height:1.55; }
    .visual-editor-drawer .close-x { color:var(--ink); }
    .visual-editor-grid { display:grid; gap:12px; }
    .visual-editor-group { display:grid; gap:10px; padding:14px; border-radius:18px; border:1px solid rgba(32,28,24,.12); background:#f8f8f9; }
    .visual-editor-group strong { font-size:12px; color:var(--muted); letter-spacing:.08em; text-transform:uppercase; }
    .visual-editor-actions { display:flex; flex-wrap:wrap; gap:10px; }
    .visual-editor-note { color:var(--muted); font-size:12px; line-height:1.55; }
    .editor-order-list { display:grid; gap:8px; }
    .editor-order-row { display:grid; grid-template-columns:minmax(0,1fr) auto auto; gap:8px; align-items:center; padding:10px; border-radius:14px; border:1px solid rgba(32,28,24,.12); background:#ffffff; }
    .editor-order-row span { font-size:13px; font-weight:800; color:var(--ink); }
    .editor-order-row button { min-width:34px; border-radius:10px; padding:7px 9px; }
    .editor-order-row.is-disabled { opacity:.55; }
    .input-inline-color { padding:4px; height:46px; }
    .login-card p { margin:0 0 18px; color:var(--muted); line-height:1.6; }
    .login-meta { margin-top:12px; font-size:12px; color:var(--muted); }
    .modal-overlay { position:fixed; inset:0; z-index:120; display:flex; align-items:center; justify-content:center; padding:18px; background:rgba(20,17,15,.58); backdrop-filter:blur(10px); }
    .modal-card { width:min(720px,100%); max-height:calc(100vh - 36px); border-radius:24px; border:1px solid rgba(255,255,255,.12); background:rgba(37,31,42,.98); color:#f7f4ef; box-shadow:0 32px 80px rgba(0,0,0,.28); overflow:hidden; display:flex; flex-direction:column; }
    .qc-modal-card { width:min(var(--modal-max-width), calc(100vw - 36px)); background:#ffffff; color:var(--ink); border:1px solid rgba(32,28,24,.14); box-shadow:0 32px 80px rgba(34,24,18,.18); }
    .qc-modal-card .modal-head, .qc-modal-card .modal-actions { border-color:rgba(64,49,37,.08); }
    .qc-modal-card .close-x { color:var(--ink); }
    .qc-modal-card .modal-muted, .image-modal-card .modal-muted { color:var(--muted); }
    .qc-modal-card .modal-body { max-height:none; overflow:auto; }
    #ops-detail-modal { justify-content:flex-end; align-items:stretch; padding:16px; background:rgba(16,24,40,.38); backdrop-filter:blur(12px); }
    #ops-detail-modal .modal-card { width:min(780px, calc(100vw - 28px)); height:calc(100vh - 32px); border-radius:28px; display:flex; flex-direction:column; transform:translateX(34px); opacity:.4; animation:opsDrawerIn .42s cubic-bezier(.22,1,.36,1) forwards; }
    #ops-detail-modal.hidden .modal-card { animation:none; transform:translateX(34px); opacity:0; }
    #ops-detail-modal .modal-body { flex:1; max-height:none; }
    #ops-detail-modal .modal-head { flex:0 0 auto; }
    @keyframes opsDrawerIn {
      to { transform:translateX(0); opacity:1; }
    }
    .qc-launchpad { margin:0 0 16px; padding:16px 18px; border-radius:18px; border:1px solid rgba(32,28,24,.12); background:#f8f8f9; display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
    .qc-launchpad strong { display:block; font-size:16px; font-family:var(--font-heading); }
    .qc-launchpad span { display:block; color:var(--muted); font-size:13px; line-height:1.55; }
    .modal-head { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:20px 22px; border-bottom:1px solid rgba(255,255,255,.08); flex:0 0 auto; position:sticky; top:0; z-index:2; background:inherit; }
    .modal-head h3 { margin:0; font-size:20px; }
    .modal-body { padding:22px; display:grid; gap:16px; overflow:auto; min-height:0; flex:1 1 auto; }
    .modal-actions { display:flex; flex-wrap:wrap; gap:12px; padding:18px 22px 22px; border-top:1px solid rgba(255,255,255,.08); flex:0 0 auto; position:sticky; bottom:0; z-index:2; background:inherit; }
    .close-x { appearance:none; border:0; background:transparent; color:#f7f4ef; font-size:28px; line-height:1; cursor:pointer; }
    .quantity-display { font-size:32px; font-weight:700; color:#fff; }
    .modal-muted { color:rgba(247,244,239,.72); font-size:14px; line-height:1.6; }
    @media (max-width: 920px) {
      .shell { width: min(100% - 20px, 1560px); margin:10px auto 18px; }
      .shell { width: min(100% - 10px, 1560px); grid-template-columns:170px minmax(0,1fr); gap:10px; }
      .content { grid-column:2; }
      .side-nav { position:sticky; top:10px; min-height:calc(100vh - 20px); grid-column:1; grid-row:1 / span 2; flex-direction:column; overflow:visible; padding:10px; border-radius:20px; }
      .side-nav-button { width:100%; white-space:normal; padding:12px 10px; gap:8px; font-size:13px; }
      .side-nav-icon { width:18px; font-size:14px; }
      .side-nav-status { display:grid; padding:10px; font-size:12px; }
      .hero { grid-template-columns:1fr; padding:20px; gap:16px; }
      .hero h1 { max-width:100%; }
      .content { grid-template-columns:1fr; }
      .result { position:static; }
      .hero-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
      .grid-2, .grid-3 { grid-template-columns:1fr; }
      .workflow-board { grid-template-columns:repeat(2,minmax(0,1fr)); }
      .dashboard-strip { grid-template-columns:1fr; }
      .ops-grid, .ops-current-grid, .ops-column[data-ops-column="left"], .ops-column[data-ops-column="right"], .ops-summary-grid, .ops-detail-grid, .ops-global-filter-grid, .stock-row { grid-template-columns:1fr; }
      .ops-mini-card:has(.ops-mini-media) { grid-template-columns:1fr; }
      .ops-mini-media { grid-column:auto; grid-row:auto; justify-self:stretch; max-width:220px; }
      .ops-detail-hero-main, .ops-detail-summary-grid, .ops-detail-row { grid-template-columns:1fr; }
      .ops-detail-hero-copy { min-height:auto; }
      .detail-grid { grid-template-columns:1fr; }
      .sub-grid, .shell.mrp-mode .sub-grid { grid-template-columns: 1fr; }
      .placeholder-row { grid-template-columns:1fr; }
    }
    @media (max-width: 620px) {
      .workflow-board { grid-template-columns:1fr; }
      .shell { grid-template-columns:145px minmax(0,1fr); }
      .hero { padding:16px; border-radius:22px; }
      .hero h1 { margin:10px 0 8px; font-size:30px; line-height:1.08; letter-spacing:-.035em; }
      .hero p { font-size:13px; line-height:1.55; }
      .hero-grid { display:none; }
      .app-tabs { gap:8px; }
      .app-tab { padding:9px 13px; font-size:13px; }
      .eyebrow { padding:6px 10px; font-size:10px; }
      .ops-section { padding:16px; border-radius:22px; }
      .workflow-card { min-height:112px; padding:16px; }
      .workflow-card b { font-size:28px; }
      .ops-toolbar, .ops-builder-bar { width:100%; }
      .ops-filter { max-width:none; min-width:0; }
      .ops-topbar { display:grid; }
      .ops-topbar h2 { font-size:24px; line-height:1.1; }
      .ops-topbar p { font-size:12px; }
    }

    /* Clean dashboard theme: white sidebar, cool gray workspace, blue actions. */
    :root {
      --ink: #2d333c;
      --muted: #8a93a2;
      --card: #ffffff;
      --line: #e6e9ef;
      --accent: #2383ff;
      --accent-dark: #1266d6;
      --ok: #21a66f;
      --danger: #e04444;
      --panel: #ffffff;
      --surface: #f6f7f9;
      --surface-strong: #ffffff;
      --app-bg: #f4f6f8;
      --accent-soft: #eaf3ff;
      --ok-soft: #e7f8ef;
      --shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 14px 32px rgba(16, 24, 40, 0.06);
      --shadow-hover: 0 16px 38px rgba(16, 24, 40, 0.10);
      --radius: 10px;
      --section-gap: 16px;
      --card-padding: 18px;
      --font-body: "Sarabun", "Noto Sans Thai", "Leelawadee UI", sans-serif;
      --font-heading: "Sarabun", "Noto Sans Thai", "Leelawadee UI", sans-serif;
    }
    body { background:var(--app-bg); color:var(--ink); }
    .shell {
      width:100%;
      max-width:none;
      min-height:100vh;
      margin:0;
      grid-template-columns:276px minmax(0,1fr);
      gap:0;
      align-items:stretch;
      background:var(--app-bg);
    }
    .shell.mrp-mode, .shell.dashboard-mode { width:100%; max-width:none; }
    .content {
      min-width:0;
      padding:28px 32px 36px;
      background:var(--app-bg);
    }
    .side-nav {
      position:sticky;
      top:0;
      min-height:100vh;
      border:0;
      border-right:1px solid var(--line);
      border-radius:0;
      box-shadow:none;
      padding:22px 18px;
      background:#ffffff;
      gap:8px;
      backdrop-filter:none;
    }
    .side-nav::before { display:none; }
    .side-brand {
      display:flex;
      align-items:center;
      gap:12px;
      margin:6px 4px 36px;
      color:#0f172a;
      font-size:26px;
      font-weight:900;
      letter-spacing:-.04em;
    }
    .side-brand-mark {
      width:38px;
      height:38px;
      border-radius:12px;
      display:grid;
      place-items:center;
      color:#fff;
      background:linear-gradient(135deg,#2d8cff,#0f6bea);
      box-shadow:0 12px 24px rgba(31,122,236,.18);
      font-size:18px;
    }
    .side-nav-button {
      min-height:48px;
      border-radius:10px;
      padding:12px 14px;
      color:#8c96a5;
      font-weight:750;
      gap:13px;
      transform:none !important;
    }
    .side-nav-button:hover { background:#f3f6fb; color:var(--ink); }
    .side-nav-button.active {
      color:var(--accent);
      background:#eef6ff;
      box-shadow:none;
    }
    .side-nav-icon {
      width:22px;
      height:22px;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      color:inherit;
      opacity:1;
      font-size:16px;
    }
    .side-nav-status {
      border-color:var(--line);
      border-radius:12px;
      background:#ffffff;
      box-shadow:0 8px 24px rgba(16,24,40,.05);
    }
    .app-topbar {
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:18px;
      margin-bottom:24px;
    }
    .app-topbar-title {
      display:grid;
      gap:8px;
      min-width:0;
    }
    .app-topbar-title h1 {
      margin:0;
      font-size:34px;
      line-height:1.1;
      letter-spacing:-.04em;
      color:#1f2937;
    }
    .app-topbar-title p {
      margin:0;
      color:#7c8798;
      font-size:14px;
      line-height:1.55;
    }
    .app-topbar-actions {
      display:flex;
      align-items:center;
      gap:12px;
      flex-wrap:wrap;
      justify-content:flex-end;
    }
    .top-icon-button {
      position:relative;
      width:42px;
      height:42px;
      border:1px solid var(--line);
      border-radius:12px;
      background:#fff;
      color:#657386;
      font:inherit;
      font-weight:900;
      cursor:pointer;
      box-shadow:var(--shadow);
    }
    .top-icon-button b {
      position:absolute;
      top:-7px;
      right:-6px;
      min-width:19px;
      height:19px;
      padding:0 5px;
      border-radius:999px;
      display:grid;
      place-items:center;
      color:#fff;
      background:#1f7aec;
      font-size:11px;
      line-height:1;
    }
    .user-chip {
      display:flex;
      align-items:center;
      gap:10px;
      min-height:50px;
      padding:7px 12px 7px 7px;
      border:1px solid var(--line);
      border-radius:16px;
      background:#fff;
      box-shadow:var(--shadow);
    }
    .user-avatar {
      width:36px;
      height:36px;
      border-radius:12px;
      display:grid;
      place-items:center;
      color:#1f7aec;
      background:#eaf3ff;
      font-weight:900;
    }
    .user-chip strong { display:block; font-size:14px; color:#111827; }
    .user-chip span { display:block; margin-top:1px; font-size:12px; color:var(--muted); }
    .hero, .panel, .result, .history,
    .ops-section, .ops-global-filter, .workflow-card, .dashboard-card,
    .ops-summary-card, .ops-mini-card, .ops-current-card, .ops-detail-panel,
    .history-card, .queue-card, .mrp-lookup-card, .mrp-edit-card,
    .detail-layout-row, .detail-item, .mrp-media, .result-card,
    .qc-launchpad, .login-card, .visual-editor-drawer, .visual-editor-group,
    .stock-row, .packaging-option, .packaging-result-row, .carton-option,
    .carton-preview-row, .repair-placeholder-card, .placeholder-row {
      border-color:var(--line);
      border-radius:10px;
      background:#ffffff;
      box-shadow:var(--shadow);
    }
    .ops-summary-card::after, .workflow-card::after, .ops-next-action::after { display:none; }
    .workflow-card, .dashboard-card, .ops-summary-card { min-height:118px; }
    .workflow-card:hover, .dashboard-card[data-stock-location]:hover,
    .ops-summary-card:hover, .ops-mini-card:hover, .queue-card:hover {
      transform:translateY(-1px);
      border-color:#d7dde6;
      box-shadow:var(--shadow-hover);
    }
    .workflow-card.active, .dashboard-card.active, .ops-mini-card.active,
    .queue-card.active, .visual-editable.is-selected {
      border-color:#99c8ff !important;
      box-shadow:0 0 0 3px rgba(35,131,255,.12), var(--shadow) !important;
    }
    .ops-topbar h2, .section-title h2, .ops-section-head h3,
    .ops-global-filter-head h3, .workflow-card b, .dashboard-card b,
    .ops-summary-card b, .queue-card strong, .history-card-top strong,
    .result-number, .login-card h2, .visual-editor-head h3 {
      font-family:var(--font-heading);
      letter-spacing:-.035em;
    }
    .ops-topbar h2 { margin:0; font-size:32px; line-height:1.12; }
    .section-title { margin-bottom:16px; }
    .section-title h2 { font-size:30px; line-height:1.12; }
    .ops-section-head h3 { font-size:24px; }
    .ops-mini-top strong { font-family:var(--font-heading); letter-spacing:-.035em; }
    .eyebrow, .status-pill, .builder-pill, .ops-filter-pill, .packaging-badge,
    .ops-count-pill, .ops-mini-top span {
      border-radius:8px;
      color:var(--accent);
      background:var(--accent-soft);
      box-shadow:none;
    }
    .builder-pill.active, .app-tab.active, .layout-switch-button.active {
      background:var(--accent);
      color:#ffffff;
      box-shadow:none;
    }
    input, textarea, select,
    .ops-global-filter input, .ops-global-filter select,
    .ops-queue-search {
      border-color:#dfe4eb;
      border-radius:8px;
      background:#f8fafc;
      box-shadow:none;
    }
    input:focus, textarea:focus, select:focus {
      border-color:#90c2ff;
      box-shadow:0 0 0 4px rgba(35,131,255,.12);
      transform:none;
    }
    .btn {
      border-radius:8px;
      box-shadow:none;
      transform:none !important;
      font-weight:800;
    }
    .btn-primary {
      background:var(--accent);
      color:#ffffff;
      box-shadow:none;
    }
    .btn-primary:hover { background:var(--accent-dark); }
    .btn-secondary {
      background:#f1f3f6;
      color:var(--ink);
      border:1px solid transparent;
      box-shadow:none;
    }
    .btn-secondary:hover {
      background:#e8edf4;
      box-shadow:none;
    }
    .ops-shell { gap:22px; }
    .ops-topbar {
      display:flex;
      align-items:flex-start;
      justify-content:space-between;
      gap:18px;
      margin-bottom:0;
    }
    .ops-topbar .eyebrow {
      background:#eaf3ff;
      color:#1f7aec;
      border-radius:10px;
      text-transform:none;
      letter-spacing:0;
      font-size:13px;
      padding:9px 14px;
    }
    .ops-topbar h2 {
      margin:18px 0 0;
      font-size:36px;
      line-height:1.08;
      color:#1f2937;
    }
    .ops-topbar p {
      max-width:760px;
      color:#7c8798;
      font-size:15px;
    }
    .ops-summary-grid { gap:14px; grid-template-columns:repeat(auto-fit,minmax(178px,1fr)); }
    .ops-summary-card {
      min-height:124px;
      border:0;
      border-radius:16px;
      padding:16px;
      overflow:hidden;
      box-shadow:0 12px 28px rgba(15,23,42,.11);
    }
    .ops-summary-card::after {
      display:block;
      content:"";
      position:absolute;
      left:16px;
      right:16px;
      bottom:12px;
      height:28px;
      border-radius:10px;
      background:rgba(255,255,255,.10);
    }
    .ops-summary-card .ops-summary-icon {
      width:44px;
      height:44px;
      border-radius:14px;
      display:grid;
      place-items:center;
      color:#fff;
      background:rgba(255,255,255,.92);
      box-shadow:0 12px 26px rgba(15,23,42,.12);
      font-size:20px;
    }
    .ops-summary-card[data-summary-tone="production"] .ops-summary-icon { color:#1f7aec; }
    .ops-summary-card[data-summary-tone="dispatch"] .ops-summary-icon { color:#0ea5e9; }
    .ops-summary-card[data-summary-tone="qc"] .ops-summary-icon { color:#1aa66f; }
    .ops-summary-card[data-summary-tone="repair"] .ops-summary-icon { color:#fb8a2e; }
    .ops-summary-card[data-summary-tone="done"] .ops-summary-icon { color:#8b5cf6; }
    .ops-summary-card strong {
      color:#fff;
      font-size:13px;
      text-transform:none;
      letter-spacing:0;
    }
    .ops-summary-card b {
      color:#fff;
      font-size:30px;
      letter-spacing:-.04em;
    }
    .ops-summary-card span {
      color:rgba(255,255,255,.90);
      font-size:12px;
      max-width:none;
    }
    .ops-summary-card .ops-summary-arrow {
      position:absolute;
      left:18px;
      bottom:17px;
      z-index:1;
      width:24px;
      height:24px;
      border-radius:999px;
      display:grid;
      place-items:center;
      color:#fff;
      background:rgba(255,255,255,.22);
      font-weight:900;
    }
    .ops-summary-card[data-summary-tone="production"] { background:linear-gradient(135deg,#2f8bff,#0865e8); }
    .ops-summary-card[data-summary-tone="dispatch"] { background:linear-gradient(135deg,#38bdf8,#0284c7); }
    .ops-summary-card[data-summary-tone="qc"] { background:linear-gradient(135deg,#43cf8e,#049b61); }
    .ops-summary-card[data-summary-tone="repair"] { background:linear-gradient(135deg,#ffb15b,#ff7f24); }
    .ops-summary-card[data-summary-tone="done"] { background:linear-gradient(135deg,#b276ff,#7d3ff1); }
    .ops-global-filter {
      padding:22px;
      border-radius:18px;
      border-color:#e3e8f0;
      box-shadow:0 18px 42px rgba(15,23,42,.08);
    }
    .ops-global-filter-head h3 {
      font-size:24px;
      color:#1f2937;
    }
    .ops-global-filter-grid { gap:16px; }
    .ops-filter-pill {
      border-radius:12px;
      color:#1f7aec;
      background:#edf5ff;
    }
    .ops-section {
      border-radius:18px;
      padding:22px;
      box-shadow:0 18px 42px rgba(15,23,42,.08);
    }
    .ops-mini-card {
      border-radius:16px;
      padding:18px 20px;
      box-shadow:none;
    }
    .ops-mini-card:has(.ops-mini-media) { grid-template-columns:minmax(0,1fr) minmax(180px,260px); }
    .ops-mini-top strong { font-size:20px; color:#111827; }
    .ops-mini-top span { border-radius:12px; }
    .app-tab, .layout-switch-button, .ops-page-button {
      border-color:var(--line);
      border-radius:8px;
      background:#ffffff;
      box-shadow:none;
    }
    .message { border-radius:8px; }
    .message.success { color:#127a4e; background:#e8f7ef; border-color:#bde8d1; }
    .message.warning { color:#9a5a18; background:#fff7e6; border-color:#f1d59a; }
    .message.error { color:#c73535; background:#fff0f0; border-color:#f0c4c4; }
    .stock-row.header, .placeholder-row.header, .packaging-result-row.header,
    .carton-preview-row.header {
      background:#f1f5fb;
      color:#536070;
    }
    .dashboard-card.action, .packaging-option.active, .carton-option:hover {
      border-color:#b8d8ff;
      background:#f4f9ff;
    }
    .selection-chip, .mini-chip {
      border-color:#cfe4ff;
      background:#f1f7ff;
      border-radius:8px;
    }
    .selection-chip button, .mini-chip button { color:var(--accent-dark); }
    .modal-card, .qc-modal-card, .image-modal-card {
      border-radius:14px;
      box-shadow:0 24px 70px rgba(16,24,40,.20);
    }
    .modal-overlay, .overlay { background:rgba(16,24,40,.44); backdrop-filter:blur(8px); }
    @media (max-width: 920px) {
      .shell { grid-template-columns:190px minmax(0,1fr); width:100%; margin:0; gap:0; }
      .content { padding:18px 14px 26px; }
      .side-nav { top:0; min-height:100vh; border-radius:0; padding:16px 10px; }
      .side-brand { margin:2px 8px 24px; font-size:22px; }
      .app-topbar { display:grid; }
      .ops-summary-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
    }
    @media (max-width: 620px) {
      .shell { grid-template-columns:78px minmax(0,1fr); }
      .side-nav { padding:12px 8px; }
      .side-brand { justify-content:center; margin:2px 4px 18px; font-size:0; }
      .side-brand-mark { width:38px; height:38px; }
      .side-nav-button { justify-content:center; padding:11px 8px; }
      .side-nav-button span:not(.side-nav-icon), .side-nav-status { display:none; }
      .content { padding:14px 10px 22px; }
      .app-topbar-title h1 { font-size:24px; }
      .ops-summary-grid { grid-template-columns:1fr; }
      .ops-mini-card:has(.ops-mini-media) { grid-template-columns:1fr; }
      .ops-mini-media { grid-column:1; grid-row:auto; }
    }