/* Shared visual system. Module styles only specialize their own workspaces. */
:root {
  --bg: #f5f6f8;
  --surface: #ffffff;
  --surface-raised: #ffffff;
  --surface-soft: #f7f8fa;
  --surface-muted: #eff1f4;
  --text: #222b32;
  --muted: #68737d;
  --border: #e1e5e9;
  --line: #edf0f2;
  --green-950: #113c30;
  --green-900: #154d3b;
  --green-800: #1b614b;
  --green-700: #217255;
  --green-600: #238562;
  --green-500: #39a87c;
  --green-100: #e7f3ec;
  --green-50: #f2f8f5;
  --blue: #3f71bf;
  --blue-soft: #edf3fc;
  --amber: #ab731b;
  --amber-soft: #fcf4e4;
  --red: #bf4a47;
  --red-soft: #fbeeee;
  --action-bg: #217255;
  --shadow: 0 18px 60px #17202a24;
  --shadow-soft: none;
  --shadow-inset: none;
  --radius: 8px;
  --radius-sm: 6px;
  --sidebar: 258px;
  font-family: 'Segoe UI Variable Text', 'Segoe UI', -apple-system, BlinkMacSystemFont, Arial, sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
  font-variant-numeric: tabular-nums;
}
.theme-dark {
  --bg: #171b1e;
  --surface: #20262a;
  --surface-raised: #252d32;
  --surface-soft: #272e33;
  --surface-muted: #2e383e;
  --text: #e7ecef;
  --muted: #a6b0b8;
  --border: #39434a;
  --line: #30393f;
  --green-900: #afdfc6;
  --green-800: #9ed9bb;
  --green-700: #8cd1af;
  --green-600: #6cc69b;
  --green-500: #51ad82;
  --green-100: #293e34;
  --green-50: #24322b;
  --blue: #8eb4f0;
  --blue-soft: #293747;
  --amber: #e3b76c;
  --amber-soft: #403729;
  --red: #f49a96;
  --red-soft: #423034;
  --action-bg: #276e53;
  --shadow-soft: none;
  --shadow-inset: none;
}
body { background: var(--bg); }
button, input, select, textarea { letter-spacing: 0; }
h1, h2, h3, h4, strong, b { font-weight: 600; letter-spacing: 0; }
.app-shell :is(h1, h2, h3, h4, strong, b) { font-weight: 600; }
a, button, input, select, textarea, summary { -webkit-tap-highlight-color: transparent; }
:is(a, button, input, select, textarea, summary):focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }
::selection { background: var(--green-100); color: var(--text); }
.app-shell { align-items: start; }
.app-shell .sidebar { height: 100dvh; background: var(--surface); color: var(--text); border-right: 1px solid var(--border); box-shadow: none; z-index: 35; }
.app-shell .brand-block { flex: 0 0 auto; min-height: 94px; padding: 20px 20px 17px; gap: 12px; background: var(--surface); }
.app-shell .brand-block img { width: 44px; height: 44px; flex: 0 0 44px; border: 0; border-radius: 8px; object-fit: contain; box-shadow: none; }
.app-shell .brand-block strong { font-size: 17px; color: var(--text); line-height: 1.35; font-weight: 650; }
.app-shell .brand-block span { display: block; font-size: 12px; color: var(--muted); line-height: 1.6; }
.app-shell .sidebar-nav { display: block; flex: 1 1 auto; padding: 0 12px 20px; scrollbar-gutter: stable; scrollbar-color: var(--border) transparent; }
.nav-group { padding: 8px 0; }
.nav-group-label { margin: 4px 11px 7px; color: var(--muted); font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0; }
.app-shell .nav-link { gap: 11px; min-height: 40px; margin: 2px 0; padding: 9px 11px; font-size: 13px; font-weight: 500; color: var(--muted); border-radius: 6px; box-shadow: none; transform: none; transition: background-color 120ms, color 120ms; }
.app-shell .nav-link:hover { color: var(--text); background: var(--surface-soft); transform: none; }
.app-shell .nav-link.active, .app-shell .nav-link[aria-current='page'] { color: var(--green-800); background: var(--green-100); font-weight: 650; box-shadow: none; }
.app-shell .nav-link > span { white-space: normal; overflow: visible; line-height: 1.35; }
.app-shell .nav-link .icon { width: 18px; height: 18px; opacity: 1; }
.app-shell .nav-badge { min-width: 22px; height: 20px; font-size: 10px; border-radius: 5px; font-weight: 600; background: var(--surface-muted); color: var(--text); }
.app-shell .nav-link.active .nav-badge { background: var(--surface); color: var(--green-800); }
.app-shell .sidebar-footer { display: flex; align-items: center; justify-content: space-between; margin: 0; padding: 12px 20px; border: 0; border-top: 1px solid var(--border); border-radius: 0; background: var(--surface); }
.app-shell .sidebar-footer .role-chip { padding: 4px 0; font-size: 12px; font-weight: 600; color: var(--muted); background: transparent; }
.sidebar-scrim { display: none; }
.app-shell .topbar { display: grid; grid-template-columns: minmax(140px, 1fr) minmax(180px, 270px) 36px 36px 36px auto; gap: 10px; min-height: 76px; padding: 12px 28px; border-bottom: 1px solid var(--border); background: var(--surface); box-shadow: none; backdrop-filter: none; }
.app-shell .topbar-title { min-width: 0; }
.app-shell .topbar-title h1 { margin: 2px 0 0; font-size: 18px; font-weight: 600; line-height: 1.35; white-space: normal; }
.app-shell .topbar-title span { font-size: 11px; font-weight: 400; color: var(--muted); }
.app-shell .topbar > .icon-btn { width: 36px; height: 36px; min-height: 36px; border-color: transparent; background: transparent; }
.app-shell .topbar > .icon-btn:hover { background: var(--surface-muted); }
.app-shell .topbar > .mobile-menu { display: none; }
.app-shell .global-search { grid-column: auto; min-height: 38px; width: auto; background: var(--surface-soft); border: 1px solid var(--border); box-shadow: none; border-radius: 6px; }
.app-shell .global-search input { font-size: 12px; }
.app-shell .global-search .icon { width: 16px; height: 16px; color: var(--muted); }
.app-shell .user-menu { display: flex; text-align: left; grid-column: auto; justify-self: auto; align-items: center; gap: 9px; padding: 0 0 0 14px; margin-left: 3px; min-height: 36px; border: 0; border-left: 1px solid var(--border); border-radius: 0; background: transparent; box-shadow: none; }
.app-shell .avatar { width: 34px; height: 34px; flex: 0 0 34px; border-radius: 50%; background: var(--green-100); color: var(--green-800); font-weight: 650; }
.app-shell .user-info { max-width: 138px; }
.app-shell .user-info strong { font-size: 12px; font-weight: 600; color: var(--text); }
.app-shell .user-info span { display: block; font-size: 10px; color: var(--muted); }
.app-shell .badge-btn span { top: -3px; right: -3px; min-width: 17px; height: 17px; font-size: 9px; border-color: var(--surface); }
.app-shell .view { min-width: 0; gap: 22px; padding: 26px 28px 40px; max-width: 1840px; margin-inline: auto; }
.view > *, .section-header > div, .panel-title > *, .content-grid > * { min-width: 0; }
.section-header { flex-wrap: wrap; gap: 14px; align-items: center; }
.section-header h2 { font-size: 24px; line-height: 1.3; font-weight: 600; overflow-wrap: anywhere; }
.section-header p { font-size: 12px; line-height: 1.6; color: var(--muted); font-weight: 400; max-width: 760px; }
.section-actions { gap: 8px; align-items: center; }
.panel { padding: 20px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); box-shadow: none; }
.app-shell .view .panel { border-inline: 0; border-radius: 0; }
.panel .panel { padding: 14px 0; border: 0; border-top: 1px solid var(--border); border-radius: 0; box-shadow: none; }
.panel :is(.section-header h2, .panel-title h3) { font-size: 16px; font-weight: 600; }
.panel-title { gap: 12px; flex-wrap: wrap; }
.panel-title span, .muted-text, .table-count { font-size: 12px; font-weight: 400; }
.btn { min-height: 38px; padding: 8px 13px; gap: 7px; border-radius: 6px; border: 1px solid var(--border); background: var(--surface); color: var(--text); font-size: 13px; font-weight: 600; line-height: 1.4; box-shadow: none; transform: none; transition: background-color 120ms, border-color 120ms; }
.btn:hover, .icon-btn:hover { transform: none; box-shadow: none; background: var(--surface-soft); }
.btn.primary { background: var(--action-bg); border-color: var(--action-bg); color: #fff; box-shadow: none; }
.btn.primary:hover { background: #195f46; border-color: #195f46; transform: none; }
.btn.primary-soft { background: var(--green-100); color: var(--green-800); border-color: transparent; }
.btn.danger { background: var(--red-soft); color: var(--red); border-color: transparent; }
.btn.ghost { background: transparent; border-color: transparent; color: var(--muted); }
.btn.mini { min-height: 32px; padding: 5px 9px; font-size: 12px; }
.icon-btn { width: 38px; height: 38px; min-height: 38px; border-radius: 6px; border: 1px solid var(--border); color: var(--muted); background: var(--surface); box-shadow: none; }
.btn .icon { width: 16px; height: 16px; }
.row-actions { gap: 6px; align-items: center; min-width: 140px; }
.filter-panel { gap: 12px; border: 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); border-radius: 0; padding: 16px 0; background: transparent; box-shadow: none; }
.filter-group { min-width: 0; }
.filter-toggle { display: none; }
.filter-panel label > span, .form-field > span, .inline-filter label { color: var(--muted); font-size: 12px; font-weight: 500; }
.filter-panel :is(input, select), .form-field :is(input, select, textarea), .form-grid label > :is(input, select, textarea), .inline-filter select { min-width: 0; max-width: 100%; min-height: 40px; padding: 9px 11px; border: 1px solid var(--border); border-radius: 6px; background: var(--surface); color: var(--text); font-size: 13px; font-weight: 400; box-shadow: none; }
.form-grid label { min-width: 0; }
.form-grid label > :is(input, select, textarea) { width: 100%; }
.form-field input[readonly] { background: var(--surface-soft); color: var(--muted); }
.form-field textarea { min-height: 104px; line-height: 1.6; resize: vertical; }
.form-grid { gap: 18px; }
.form-field { gap: 7px; }
.process-filter-panel, .finance-workflow-tabs { border: 0; border-bottom: 1px solid var(--border); border-radius: 0; padding: 0 0 15px; background: transparent; box-shadow: none; }
.process-filter-tabs { display: flex; flex-wrap: wrap; gap: 7px; }
.process-filter-panel .process-filter-tab, .finance-workflow-tabs .process-filter-tab { min-height: 40px; flex: 0 1 auto; gap: 12px; border: 1px solid var(--border); border-radius: 6px; padding: 8px 12px; background: var(--surface); color: var(--muted); box-shadow: none; transform: none; }
.process-filter-panel .process-filter-tab strong { font-size: 12px; line-height: 1.4; font-weight: 500; white-space: normal; overflow: visible; }
.process-filter-panel .process-filter-tab span { display: grid; place-items: center; min-width: 21px; height: 21px; padding: 0 5px; font-size: 11px; border-radius: 4px; background: var(--surface-muted); color: var(--muted); }
.process-filter-panel .process-filter-tab.active, .process-filter-panel .process-filter-tab[aria-pressed='true'] { border-color: var(--green-700); color: var(--green-800); background: var(--green-50); box-shadow: inset 0 -2px var(--green-700); }
.process-filter-panel .process-filter-tab.active span { background: var(--green-100); color: var(--green-800); }
.table-toolbar { gap: 12px; padding: 0 0 14px; flex-wrap: wrap; }
.table-toolbar .search-field { border: 1px solid var(--border); border-radius: 6px; background: var(--surface); min-height: 36px; font-size: 12px; box-shadow: none; }
.table-wrap { border: 1px solid var(--border); border-radius: 6px; max-width: 100%; scrollbar-width: thin; }
.data-table { table-layout: auto; min-width: 700px; font-size: 13px; }
.data-table th { padding: 11px 14px; background: var(--surface-soft); color: var(--muted); font-size: 11px; font-weight: 600; }
.data-table th button { color: inherit; font: inherit; text-align: left; gap: 8px; }
.table-sort-icon { width: 12px; height: 12px; flex: 0 0 12px; }
.table-sort-icon.asc { transform: rotate(-90deg); }
.table-sort-icon.desc { transform: rotate(90deg); }
.data-table td { padding: 14px; max-width: 320px; min-width: 100px; vertical-align: middle; color: var(--text); line-height: 1.55; overflow-wrap: anywhere; word-break: normal; }
.data-table td strong { font-size: 13px; font-weight: 600; }
.data-table td small { display: block; margin-top: 3px; color: var(--muted); font-size: 11px; font-weight: 400; line-height: 1.5; }
.data-table tbody tr:hover { background: var(--surface-soft); }
.data-table tbody tr:last-child td { border-bottom: 0; }
.status-pill { min-height: 23px; max-width: 100%; padding: 3px 8px; gap: 5px; border: 0; border-radius: 5px; font-size: 11px; font-weight: 600; line-height: 1.5; white-space: normal; box-shadow: none; }
.pagination { display: flex; justify-content: flex-end; gap: 12px; padding: 14px 0 0; font-size: 12px; color: var(--muted); }
.pagination .icon-btn { width: 32px; height: 32px; min-height: 32px; }
.metric-grid, .dashboard-grid { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 14px; }
.metric-card { display: flex; align-items: flex-start; flex-direction: row; gap: 14px; min-height: 115px; padding: 18px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); box-shadow: none; overflow: visible; }
.metric-card::before, .metric-card::after { display: none; }
.metric-card:not(:has(.metric-icon)) { flex-direction: column; gap: 8px; }
.metric-card:not(:has(.metric-icon)) strong { font-size: 24px; }
.metric-card > div:not(.metric-icon) { display: flex; min-width: 0; flex: 1; flex-direction: column; gap: 6px; }
.metric-card span { font-size: 12px; font-weight: 500; color: var(--muted); line-height: 1.4; }
.metric-card strong { font-size: 27px; font-weight: 650; line-height: 1.15; color: var(--text); white-space: normal; overflow-wrap: anywhere; }
.metric-card small { font-size: 11px; font-weight: 400; line-height: 1.5; color: var(--muted); }
.metric-icon { width: 36px; height: 36px; min-width: 36px; border-radius: 7px; color: var(--green-700); background: var(--green-100); }
.tone-blue .metric-icon, .overview-queue-icon.tone-blue { color: var(--blue); background: var(--blue-soft); }
.tone-amber .metric-icon, .overview-queue-icon.tone-amber { color: var(--amber); background: var(--amber-soft); }
.tone-red .metric-icon { color: var(--red); background: var(--red-soft); }
.progress { position: relative; min-width: 105px; height: 6px; margin: 10px 42px 10px 0; border-radius: 4px; background: var(--surface-muted); overflow: visible; box-shadow: none; }
.progress > span { display: block; height: 100%; border-radius: inherit; background: var(--green-600); }
.progress > b { position: absolute; inset: auto -40px auto auto; top: -6px; color: var(--muted); background: none; font-size: 11px; font-weight: 500; }
.empty-state { min-height: 170px; padding: 28px 16px; border: 0; background: transparent; box-shadow: none; }
.empty-state strong, .empty-state h3 { font-size: 15px; font-weight: 500; }
.empty-state p { font-size: 12px; font-weight: 400; max-width: 300px; margin-inline: auto; }
.modal-backdrop { background: #111c2e66; backdrop-filter: none; padding: 24px; }
.modal { width: min(100%, 660px); max-height: calc(100dvh - 48px); border: 1px solid var(--border); border-radius: 8px; background: var(--surface); box-shadow: var(--shadow); }
.modal.lg { width: min(100%, 1000px); }
.modal-header { padding: 20px 24px; border-bottom: 1px solid var(--border); background: var(--surface); }
.modal-header h2 { margin: 0; font-size: 19px; line-height: 1.35; font-weight: 600; overflow-wrap: anywhere; }
.modal-body { padding: 24px; }
.modal-footer { padding: 16px 24px; background: var(--surface-soft); }
.modal-body > form > .form-actions:last-child { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--border); }
.detail-grid { gap: 16px; padding: 16px 0; background: transparent; border-radius: 0; }
.detail-grid > div { min-width: 0; border-bottom: 1px solid var(--line); padding-bottom: 12px; }
.detail-grid span { font-weight: 400; font-size: 12px; }
.detail-grid strong { font-weight: 600; font-size: 14px; overflow-wrap: anywhere; }
.toast { border-radius: 8px; background: var(--surface); color: var(--text); box-shadow: var(--shadow); font-size: 13px; }
.toast strong { font-size: 13px; }
.signature-pad canvas { border-color: var(--border); }
.app-shell :is(.finance-command-hero, .finance-control-panel, .finance-table-panel, .finance-journal-hero, .owner-hero, .worker-hero) { background: var(--surface); color: var(--text); box-shadow: none; border: 1px solid var(--border); border-radius: 8px; padding: 22px; }
.app-shell :is(.finance-command-hero, .finance-journal-hero, .owner-hero, .worker-hero) :is(h2, h3) { color: var(--text); font-size: 25px; font-weight: 600; }
.app-shell :is(.finance-command-hero, .finance-journal-hero, .owner-hero, .worker-hero) :is(p, small) { color: var(--muted); font-weight: 400; }
.app-shell :is(.finance-hero-stats, .owner-hero-stats, .worker-hero-stats) article { background: var(--surface-soft); border: 0; border-radius: 6px; box-shadow: none; }
.app-shell :is(.finance-kpi-card, .finance-report-card, .finance-report-nav-card, .owner-kpi-card, .owner-alert-card, .worker-task-card, .worker-step-option) { border-radius: 8px; box-shadow: none; }
.app-shell .worker-step-option { min-height: 80px; background: var(--surface); border-color: var(--border); }
.app-shell .worker-step-option strong { font-size: 22px; font-weight: 600; }
.app-shell .worker-main-btn { min-height: 64px; font-size: 18px; }
.app-shell .worker-hero span { color: var(--muted); font-weight: 500; }
.app-shell .worker-hero-stats strong { color: var(--text); }
.app-shell .worker-choice-hero { display: none; }
.app-shell .worker-step-picker { padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.app-shell .worker-step-option { padding: 18px; }
.app-shell .finance-flow-card { border: 0; border-top: 1px solid var(--border); border-radius: 0; background: transparent; }
.app-shell .finance-hero-copy h2 { font-size: 26px; }
.app-shell .finance-kpi-card strong, .app-shell .finance-hero-stats strong { font-size: 24px; font-weight: 600; }
.chat-shell, .chat-message, .chat-contact, .chat-compose { box-shadow: none; border-color: var(--border); }
.chat-shell { border-radius: 8px; gap: 0; border: 1px solid var(--border); overflow: hidden; background: var(--surface); }
.chat-shell .chat-sidebar, .chat-shell .chat-room { border: 0; border-radius: 0; box-shadow: none; min-width: 0; }
.chat-shell .chat-sidebar { border-right: 1px solid var(--border); }
.chat-shell .chat-room { display: flex; flex-direction: column; height: min(760px, calc(100dvh - 180px)); min-height: 450px; }
.chat-shell .chat-thread { flex: 1; min-height: 100px; border: 0; border-radius: 0; background: var(--surface-soft); }
.chat-shell .chat-message > div { border-radius: 8px; box-shadow: none; }
.chat-shell .chat-message.mine > div { background: var(--green-700); }
.chat-shell .chat-message p { font-size: 14px; line-height: 1.65; }
.chat-shell .chat-contact:hover { transform: none; }
.chat-shell .chat-avatar { border-radius: 50%; box-shadow: none; background: var(--green-700); flex-shrink: 0; }
.chat-shell .chat-call-panel { background: var(--surface-soft); box-shadow: none; }
.chat-popup-setting { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); font-size: 13px; cursor: pointer; }
.chat-popup-setting input { width: 18px; height: 18px; accent-color: var(--green-700); }
#chat-popup-stack { position: fixed; right: 20px; bottom: 20px; z-index: 120; display: grid; gap: 10px; width: min(340px, calc(100vw - 24px)); max-height: 75dvh; overflow-y: auto; }
.chat-popup { position: relative; padding: 16px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--text); box-shadow: 0 8px 28px #0002; overflow-wrap: anywhere; }
.chat-popup.incoming-call { border-top: 3px solid var(--green-700); }
.chat-popup > small, .chat-popup > strong { display: block; margin-bottom: 8px; }
.chat-popup > small { color: var(--muted); }
.chat-popup-message { display: grid; gap: 6px; background: none; border: 0; padding: 0 22px 0 0; text-align: left; color: inherit; width: 100%; cursor: pointer; }
.chat-popup-message span { font-size: 13px; line-height: 1.5; color: var(--muted); }
.chat-popup-dismiss { position: absolute; right: 4px; top: 4px; width: 32px; height: 32px; background: none; border: 0; color: var(--muted); cursor: pointer; font-size: 22px; }
@media (max-width: 760px) {
  .chat-shell { grid-template-columns: minmax(0, 1fr); }
  .chat-shell .chat-sidebar { border-right: 0; border-bottom: 1px solid var(--border); }
  .chat-shell .chat-contact-list { max-height: 160px; }
  .chat-shell .chat-room { height: auto; min-height: 420px; padding: 12px; }
  .chat-shell .chat-thread { flex: none; min-height: 180px; max-height: 45dvh; }
  .chat-shell .chat-room-header { flex-wrap: wrap; }
  .chat-shell .chat-message > div { max-width: 90%; }
  .chat-shell .chat-room-user { max-width: 100%; }
  .chat-shell .chat-room-user > div { min-width: 0; }
  #chat-popup-stack { right: 12px; bottom: 12px; }
}
.notification-item, .notification-item.chat { background: var(--surface); box-shadow: none; }
.notification-item strong { font-weight: 600; }
.section-header p:empty { display: none; }
.workspace-section-nav { display: flex; flex-wrap: wrap; gap: 6px; padding-bottom: 14px; border-bottom: 1px solid var(--border); }
.workspace-section-nav button { display: inline-flex; align-items: center; gap: 8px; min-height: 38px; padding: 8px 12px; color: var(--muted); background: transparent; border: 0; border-radius: 5px; font-size: 13px; font-weight: 500; }
.workspace-section-nav button:hover { background: var(--green-100); color: var(--green-800); }
.workspace-section-nav .icon { width: 16px; height: 16px; }
.app-shell .finance-summary-band { background: var(--surface); border-block: 1px solid var(--border); padding: 20px 8px; }
.app-shell .finance-hero-stats { grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(210px, 1.5fr); gap: 0; }
.app-shell .finance-hero-stats article { padding: 2px 20px; border: 0; border-right: 1px solid var(--border); background: transparent; border-radius: 0; gap: 10px; min-height: 64px; }
.app-shell .finance-hero-stats article:last-child { border: 0; }
.app-shell .finance-hero-stats span { color: var(--muted); font-size: 12px; font-weight: 500; }
.app-shell .finance-hero-stats strong { color: var(--text); font-size: 24px; line-height: 1.3; white-space: normal; overflow-wrap: anywhere; }
.app-shell .finance-control-panel { border: 0; padding: 6px 0; background: transparent; border-radius: 0; }
.app-shell .finance-journal-hero { border: 0; border-top: 1px solid var(--border); border-radius: 0; }
.app-shell .finance-journal-copy h2 { font-size: 22px; line-height: 1.35; }
.app-shell .finance-journal-copy > span { font-weight: 500; font-size: 11px; }
.app-shell .finance-journal-overview { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.app-shell .finance-journal-overview article { border-radius: 6px; background: var(--surface); border-color: var(--border); box-shadow: none; }
.app-shell .finance-journal-overview span, .app-shell .finance-journal-overview small { font-weight: 400; }
.app-shell .finance-journal-overview strong { font-size: 24px; white-space: normal; overflow-wrap: anywhere; }
.app-shell :is(.finance-journal-panel, .finance-report-hub, .finance-ledger-filter-shell) { background: var(--surface); border-color: var(--border); border-radius: 0; box-shadow: none; }
.app-shell .finance-journal-type-strip article { border: 0; border-left: 2px solid var(--border); border-radius: 0; background: transparent; }
.app-shell .finance-journal-type-strip span, .app-shell .finance-journal-type-strip small { font-weight: 400; }
.app-shell .finance-journal-type-strip strong { color: var(--text); font-size: 21px; }
.app-shell .finance-report-hub { border: 0; padding: 12px 0; }
.app-shell .finance-report-card { border: 1px solid var(--border); padding: 18px; background: var(--surface); transform: none; }
.app-shell .finance-report-card::before { display: none; }
.app-shell .finance-report-card:hover { background: var(--surface-soft); transform: none; }
.app-shell .finance-report-card-head { color: var(--text) !important; }
.app-shell .finance-report-card-head i { border-radius: 4px; box-shadow: none; }
.app-shell .finance-report-card.report-income .finance-report-card-head i { background: var(--green-100); }
.app-shell .finance-report-card.report-balance .finance-report-card-head i { background: var(--blue-soft); }
.app-shell .finance-report-card.report-equity .finance-report-card-head i { background: var(--amber-soft); }
.app-shell .finance-report-card.report-cash .finance-report-card-head i { background: var(--green-100); }
.app-shell .finance-report-card strong { font-size: 23px; white-space: normal; overflow-wrap: anywhere; }
.app-shell .finance-report-card small { font-weight: 400; }
.finance-page article { scroll-margin-top: 96px; }
.app-shell .owner-executive-hero { display: block; padding: 20px 0; background: var(--surface); border: 0; border-block: 1px solid var(--border); border-radius: 0; box-shadow: none; }
.app-shell .owner-hero-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; }
.app-shell .owner-hero-stats article { padding: 0 22px; gap: 8px; background: transparent; border: 0; border-right: 1px solid var(--border); border-radius: 0; }
.app-shell .owner-hero-stats article:last-child { border: 0; }
.app-shell .owner-hero-stats strong { color: var(--text); font-size: 22px; white-space: normal; overflow-wrap: anywhere; }
.app-shell .owner-hero-stats span, .app-shell .owner-hero-stats small { color: var(--muted); font-weight: 400; }
.app-shell .owner-priority-panel { padding: 20px 0; background: transparent; border: 0; border-radius: 0; }
.app-shell .owner-alert-card { background: var(--surface); border: 0; border-top: 2px solid var(--border); border-radius: 0; }
.app-shell .owner-alert-card.danger { border-top-color: var(--red); }
.app-shell .owner-alert-card.warning { border-top-color: var(--amber); }
.app-shell .owner-alert-card.info { border-top-color: var(--blue); }
.app-shell .owner-kpi-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.app-shell .owner-funnel-line article { border-radius: 6px; background: var(--surface-soft); }
.app-shell .data-table .btn { max-width: 100%; }
.app-shell .finance-table-panel .table-wrap { border-radius: 6px; }
.finance-table-panel .data-table td { min-width: 136px; }
.finance-table-panel .data-table td:has(.row-actions) { min-width: 260px; }
.overview-page { display: grid; gap: 24px; min-width: 0; }
.overview-heading { display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.overview-heading h2 { margin: 0; font-size: 27px; line-height: 1.3; font-weight: 600; }
.overview-eyebrow { margin: 0 0 5px; color: var(--muted); font-size: 12px; }
.overview-date { display: inline-flex; align-items: center; gap: 9px; color: var(--muted); font-size: 12px; white-space: nowrap; }
.overview-date .icon { width: 15px; height: 15px; }
.overview-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.overview-metrics .metric-card { flex-direction: row-reverse; min-height: 139px; padding: 22px; }
.overview-metrics .metric-card strong { font-size: 34px; }
.overview-metrics .metric-card > div:not(.metric-icon) { gap: 10px; }
.overview-charts, .overview-work { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(310px, 1fr); gap: 24px; }
.overview-bottom { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; }
.overview-section { min-width: 0; padding: 22px; background: var(--surface); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.overview-section-title { display: flex; gap: 12px; align-items: center; justify-content: space-between; margin-bottom: 20px; }
.overview-section-title h3 { margin: 0; font-size: 15px; font-weight: 600; }
.overview-link { display: inline-flex; align-items: center; gap: 3px; color: var(--green-700); font-size: 11px; font-weight: 600; text-decoration: none; white-space: nowrap; }
.overview-link:hover { text-decoration: underline; }
.overview-link .icon { width: 14px; height: 14px; }
.overview-chart-total { display: flex; align-items: baseline; gap: 10px; margin-bottom: 14px; }
.overview-chart-total strong { font-size: 30px; font-weight: 600; }
.overview-chart-total span { font-size: 12px; color: var(--muted); }
.bar-chart { display: flex; align-items: end; justify-content: space-around; gap: 12px; min-height: 184px; height: 184px; padding-top: 8px; }
.bar-item { flex: 1; display: flex; min-width: 0; flex-direction: column; align-items: center; gap: 6px; }
.bar-track { display: flex; align-items: end; height: 116px; width: min(100%, 40px); background: var(--surface-soft); border: 0; border-radius: 5px 5px 0 0; overflow: hidden; }
.bar-track span { width: 100%; min-height: 0; border-radius: 5px 5px 0 0; background: var(--green-600); }
.bar-item strong { font-size: 11px; color: var(--text); font-weight: 500; }
.bar-item small { font-size: 10px; color: var(--muted); text-align: center; white-space: normal; }
.donut-chart { display: flex; flex-direction: column; gap: 20px; align-items: center; padding: 2px 0; }
.donut-ring { width: 148px; height: 148px; flex: 0 0 148px; border: 0; background: conic-gradient(var(--donut-gradient)); box-shadow: none; }
.donut-ring::after { inset: 19px; border: 0; box-shadow: none; }
.donut-center { inset: auto; background: transparent; box-shadow: none; }
.donut-center strong { font-size: 28px; font-weight: 600; }
.donut-center span { font-size: 10px; color: var(--muted); }
.donut-legend { width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 9px 18px; }
.donut-legend article { display: grid; grid-template-columns: 8px minmax(0, 1fr) auto; align-items: center; gap: 7px; padding: 0; border: 0; background: transparent; }
.donut-legend i { width: 7px; height: 7px; border-radius: 2px; }
.donut-legend span { font-size: 11px; font-weight: 400; color: var(--muted); }
.donut-legend strong { font-size: 11px; font-weight: 600; }
.overview-batches .data-table { min-width: 550px; }
.overview-batches .table-toolbar { padding: 0; margin-top: -5px; margin-bottom: 10px; }
.overview-batches .table-wrap { border: 0; border-radius: 0; }
.overview-batches .data-table td { padding: 15px 10px; }
.overview-batches .data-table th { padding: 10px; }
.overview-queue { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto auto; align-items: center; gap: 10px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.overview-queue:first-child { padding-top: 0; }
.overview-queue-icon, .overview-stock-symbol { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 6px; background: var(--green-100); color: var(--green-700); }
.overview-queue-icon .icon { width: 16px; height: 16px; }
.overview-queue strong { font-size: 12px; font-weight: 600; }
.overview-queue small { display: block; font-size: 10px; color: var(--muted); margin-top: 2px; }
.overview-queue b { font-size: 16px; font-weight: 600; }
.overview-attention { margin-top: 20px; padding: 16px 0 0; border-top: 1px solid var(--border); font-size: 12px; }
.overview-attention > div { display: flex; gap: 8px; align-items: center; color: var(--amber); }
.overview-attention .icon { width: 16px; height: 16px; }
.overview-attention p { margin: 8px 0; color: var(--muted); }
.overview-stock-list > div { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto auto; align-items: center; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.overview-stock-list > .empty-state { display: grid; grid-template-columns: 1fr; }
.overview-stock-symbol { color: var(--muted); background: var(--surface-soft); }
.overview-stock-list strong { font-size: 12px; font-weight: 600; }
.overview-stock-list small { display: block; font-size: 11px; color: var(--muted); }
.overview-stock-quantity { text-align: right; }
.overview-activity article { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; gap: 10px; padding: 12px 0; border-bottom: 1px solid var(--line); align-items: start; }
.overview-activity article > span { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--surface-soft); color: var(--muted); }
.overview-activity .icon { width: 13px; height: 13px; }
.overview-activity strong { display: block; font-size: 12px; font-weight: 500; overflow-wrap: anywhere; }
.overview-activity small, .overview-activity time { font-size: 10px; color: var(--muted); }
.overview-activity time { white-space: nowrap; }
body.auth-page { background: var(--bg); }
.auth-page .auth-shell { display: block; width: min(100%, 440px); background: transparent; border: 0; box-shadow: none; }
.auth-page .auth-panel { padding: 36px; border: 1px solid var(--border); border-radius: 8px; box-shadow: none; backdrop-filter: none; background: var(--surface); }
.auth-page .auth-logo { width: 64px; height: 64px; border-radius: 8px; box-shadow: none; }
.auth-page .auth-brand-simple h1 { max-width: 300px; font-size: 25px; font-weight: 600; line-height: 1.35; }
.auth-tabs { background: var(--surface-soft); border-radius: 6px; padding: 4px; }
.auth-tabs button { font-size: 12px; font-weight: 500; border-radius: 4px; }
.auth-tabs button.active { background: var(--surface); color: var(--green-700); box-shadow: 0 1px 4px #18212812; }
.auth-actions-inline { gap: 12px; flex-wrap: wrap; }
.auth-link { font-size: 12px; font-weight: 500; }
.auth-submit { min-height: 44px; }
@media (min-width: 1600px) {
  .overview-charts, .overview-work { grid-template-columns: minmax(0, 1.8fr) minmax(360px, 1fr); }
  .overview-distribution .donut-chart { flex-direction: row; min-height: 232px; }
  .overview-distribution .donut-legend { grid-template-columns: 1fr; }
}
@media (max-width: 1280px) {
  :root { --sidebar: 242px; }
  .app-shell .topbar { padding-inline: 22px; grid-template-columns: minmax(140px, 1fr) minmax(150px, 210px) 36px 36px 36px auto; gap: 8px; }
  .app-shell .user-info { display: none; }
  .app-shell .view { padding: 22px; }
  .overview-metrics { gap: 12px; }
  .overview-metrics .metric-card { padding: 18px; gap: 8px; }
  .overview-charts, .overview-work { grid-template-columns: minmax(0, 1.4fr) minmax(290px, 1fr); gap: 18px; }
  .overview-bottom { gap: 18px; }
  .overview-stock-list > div { grid-template-columns: 28px minmax(0, 1fr) auto; }
  .overview-stock-list .status-pill { grid-column: 2 / -1; justify-self: start; }
}
@media (max-width: 1100px) {
  .app-shell { grid-template-columns: 1fr; }
  .app-shell .sidebar { position: fixed; top: 0; left: 0; width: min(86vw, 286px); transform: translateX(-100%); transition: transform 160ms ease; }
  .app-shell .sidebar.open { transform: translateX(0); }
  .app-shell .sidebar.open ~ .sidebar-scrim { display: block; position: fixed; inset: 0; z-index: 30; border: 0; background: #15202a70; }
  .app-shell .topbar { grid-template-columns: 38px minmax(100px, 1fr) minmax(150px, 240px) 36px 36px 36px auto; }
  .app-shell .topbar > .mobile-menu { display: grid; }
  .app-shell .nav-link { min-height: 44px; }
  .overview-charts, .overview-work { grid-template-columns: minmax(0, 1.5fr) minmax(300px, 1fr); }
}
@media (max-width: 760px) {
  .app-shell .topbar { grid-template-columns: 36px minmax(0, 1fr) repeat(4, 36px); padding: 12px 16px; gap: 7px; }
  .app-shell .topbar-title { grid-column: 2; }
  .app-shell .topbar-title h1 { font-size: 16px; }
  .app-shell .topbar-title span { font-size: 10px; }
  .app-shell .global-search { grid-column: 1 / -1; grid-row: 2; min-height: 38px; margin-top: 5px; }
  .app-shell .topbar-report-btn { grid-column: 3; grid-row: 1; }
  .app-shell .topbar [data-notification-button] { grid-column: 4; grid-row: 1; }
  .app-shell .topbar [data-theme-toggle] { grid-column: 5; grid-row: 1; }
  .app-shell .user-menu { grid-column: 6; grid-row: 1; min-height: 36px; border: 0; padding: 0; margin: 0; }
  .app-shell .view { padding: 20px 16px 28px; gap: 18px; }
  .workspace-section-nav { gap: 4px; }
  .workspace-section-nav button { flex: 1 1 130px; min-height: 44px; }
  .app-shell .finance-hero-stats, .app-shell .owner-kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 0; }
  .app-shell .finance-hero-stats article { padding-inline: 12px; }
  .app-shell .finance-hero-stats article:nth-child(even) { border-right: 0; }
  .app-shell .finance-hero-stats strong { font-size: 21px; }
  .app-shell .finance-journal-hero, .app-shell .finance-journal-overview { grid-template-columns: 1fr; }
  .app-shell .finance-journal-type-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .app-shell .owner-hero-stats { grid-template-columns: 1fr; gap: 20px; }
  .app-shell .owner-hero-stats article { border: 0; }
  .app-shell .owner-kpi-grid { gap: 12px; }
  .app-shell .owner-kpi-grid .metric-card strong { font-size: 21px; }
  .finance-page article { scroll-margin-top: 134px; }
  .overview-heading { align-items: flex-start; flex-direction: column; gap: 10px; }
  .overview-heading h2 { font-size: 25px; }
  .overview-page { gap: 18px; }
  .overview-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .overview-metrics .metric-card { min-height: 126px; }
  .overview-metrics .metric-card strong { font-size: 30px; }
  .overview-metrics .metric-icon { width: 28px; min-width: 28px; height: 28px; }
  .overview-metrics .metric-icon .icon { width: 15px; height: 15px; }
  .overview-charts, .overview-work, .overview-bottom { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .overview-section { padding: 18px; }
  .overview-distribution .donut-chart { flex-direction: row; justify-content: center; gap: 26px; }
  .overview-distribution .donut-legend { grid-template-columns: 1fr; max-width: 240px; }
  .section-header h2 { font-size: 22px; }
  .section-actions { width: 100%; }
  .section-actions .btn { flex: 1 1 auto; }
  .btn { min-height: 42px; }
  .btn.mini { min-height: 36px; }
  .panel { padding: 16px; }
  .filter-panel { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .filter-toggle { display: flex; align-items: center; gap: 9px; width: 100%; min-height: 44px; padding: 10px 0; border: 0; border-block: 1px solid var(--border); border-radius: 0; background: transparent; color: var(--text); font-size: 13px; text-align: left; }
  .filter-toggle-chevron { margin-left: auto; transform: rotate(90deg); }
  .filter-group.is-expanded .filter-toggle-chevron { transform: rotate(-90deg); }
  .filter-group:not(.is-expanded) .filter-panel { display: none; }
  .filter-group .filter-panel { padding-top: 18px; }
  .process-filter-panel .process-filter-tab { flex: 1 1 140px; min-height: 44px; }
  .app-shell .finance-workflow-tabs .process-filter-tabs { display: flex; }
  .form-grid { grid-template-columns: 1fr; gap: 16px; }
  .filter-panel :is(input, select), .form-field :is(input, select, textarea) { font-size: 16px; min-height: 44px; }
  .modal-backdrop { padding: 12px; }
  .modal, .modal.lg { width: 100%; max-height: calc(100dvh - 24px); border-radius: 8px; }
  .modal-header, .modal-body, .modal-footer { padding: 18px; }
  .modal-header h2 { font-size: 18px; }
  .modal-body > form > .form-actions:last-child .btn { flex: 1; }
  .app-shell :is(.finance-command-hero, .finance-control-panel, .finance-table-panel, .finance-journal-hero, .owner-hero, .worker-hero) { padding: 18px; }
  .auth-page .auth-panel { padding: 26px; }
}
@media (max-width: 380px) {
  .app-shell .topbar { grid-template-columns: 36px minmax(0, 1fr) 36px 36px 36px; }
  .app-shell .topbar-title { grid-column: 2 / 4; }
  .app-shell .global-search { grid-column: 1 / 4; }
  .app-shell .topbar-report-btn { grid-column: 4; grid-row: 2; }
  .app-shell .topbar [data-theme-toggle] { grid-column: 5; grid-row: 2; }
  .app-shell .user-menu { grid-column: 5; }
  .app-shell .view { padding-inline: 12px; }
  .overview-metrics .metric-card { padding: 14px; }
  .overview-metrics .metric-icon { display: none; }
  .overview-distribution .donut-chart { flex-direction: column; }
  .overview-distribution .donut-legend { max-width: none; grid-template-columns: 1fr 1fr; }
}
@media (max-width: 360px) {
  .overview-metrics, .app-shell .owner-kpi-grid, .filter-group .filter-panel { grid-template-columns: 1fr; }
}
@media print {
  .sidebar-scrim { display: none !important; }
  .app-shell .view { padding: 0; max-width: none; }
  .overview-section { break-inside: avoid; }
}
/* Connection state stays in the document flow, including on small phones. */
.sync-notice { padding: 8px 20px; font-size: 12px; background: #e9f5ef; color: #176344; border-bottom: 1px solid #c9e4d5; }
.sync-notice[data-state="warning"] { background: #fff3d5; color: #755008; border-color: #ecd89e; }
.sync-notice[hidden] { display: none; }
[data-theme="dark"] .sync-notice { background: #17382c; color: #c0ecd5; border-color: #2e5b45; }
[data-theme="dark"] .sync-notice[data-state="warning"] { background: #423619; color: #ffe2a0; border-color: #635022; }
/* Production, PPIC and quality workspaces share compact operational spacing. */
#view:is([data-module="produksi"],[data-module="ppic"],[data-module="qc"],[data-module="reject-rework"]) .panel-title { align-items:center; gap:16px; flex-wrap:wrap; }
#view:is([data-module="produksi"],[data-module="ppic"],[data-module="qc"]) .data-table th { font-size:12px; white-space:normal; line-height:1.5; }
#view:is([data-module="produksi"],[data-module="ppic"],[data-module="qc"]) .row-actions { gap:8px; }
#view:is([data-module="produksi"],[data-module="ppic"],[data-module="qc"]) .row-actions .btn { min-height:38px; }
.ppic-step-target-fields { padding:18px 0; border-bottom:1px solid var(--border); gap:16px; }
.production-step-option { min-height:54px; padding:14px; border-radius:6px; }
.worker-task-list .btn { min-height:52px; font-size:16px; }
.worker-task-meta { gap:16px; }
.production-summary-info { color:var(--text); }
.process-catalog-grid article { background:var(--surface); }
@media(max-width:640px) {
  .worker-hero { padding:20px 16px; }
  .worker-hero h2 { font-size:24px; }
  .worker-modal-actions { display:grid; grid-template-columns:1fr; gap:12px; }
  .ppic-step-target-fields { grid-template-columns:minmax(0,1fr); }
  .production-summary { padding:16px 0; }
  .process-catalog-grid { grid-template-columns:minmax(0,1fr); }
}
/* Expandable batch stages keep supporting rework records out of the overview. */
.batch-stage-link { border:0; background:transparent; color:inherit; font:inherit; font-weight:600; cursor:pointer; padding:8px; min-height:44px; white-space:normal; }
.batch-stage-link:hover { text-decoration:underline; }
.batch-stage-detail, .batch-rework-entry { border-bottom:1px solid var(--border, #dde5e0); min-width:0; }
.batch-stage-detail > summary, .batch-rework-entry > summary { cursor:pointer; padding:16px 4px; min-height:48px; overflow-wrap:anywhere; }
.batch-stage-detail > summary > *, .batch-rework-entry > summary > * { margin-right:12px; }
.batch-stage-body { padding:12px 4px 20px; display:grid; gap:12px; min-width:0; }
.batch-stage-body > span, .batch-stage-body p { overflow-wrap:anywhere; white-space:pre-wrap; }
.batch-rework-records { padding-left:16px; border-left:3px solid var(--border, #dde5e0); min-width:0; }
.batch-rework-entry > summary { font-size:14px; }
.process-tutorial { display:grid; gap:12px; min-width:0; }
.process-tutorial-text { white-space:pre-wrap; overflow-wrap:anywhere; line-height:1.65; }
.process-tutorial-video { display:block; width:100%; aspect-ratio:16/9; height:auto; border:0; background:#111; }
.process-tutorial-image { display:block; width:100%; max-height:540px; object-fit:contain; }
.process-tutorial a { justify-self:start; max-width:100%; }
.app-shell header.topbar { grid-template-columns:minmax(120px,1fr) minmax(150px,240px) repeat(4,36px) auto; }
@media (min-width:761px) and (max-width:1100px) { .app-shell header.topbar { grid-template-columns:38px minmax(100px,1fr) minmax(130px,200px) repeat(4,36px) auto; } }
@media (max-width:760px) {
  .app-shell header.topbar { grid-template-columns:36px minmax(0,1fr) repeat(4,36px); }
  .app-shell header.topbar .topbar-work-report-btn { grid-column:6; grid-row:2; }
  .app-shell header.topbar .global-search { grid-column:1 / 6; }
}
@media (max-width:380px) {
  .app-shell header.topbar { grid-template-columns:36px minmax(0,1fr) repeat(3,36px); }
  .app-shell header.topbar .topbar-work-report-btn { grid-column:3; grid-row:2; }
  .app-shell header.topbar .global-search { grid-column:1 / 3; }
}

/* Shared workspace accents stay distinct from success, warning and reject states. */
:root {
  --bg: #f1f5f6;
  --surface-soft: #f5f8fa;
  --surface-muted: #eaf0f3;
  --text: #23343c;
  --muted: #607680;
  --border: #d9e4e9;
  --line: #eaf0f3;
  --green-700: #13795b;
  --green-800: #105d47;
  --green-100: #e1f3e9;
  --green-50: #f0faf5;
  --action-bg: #13795b;
  --blue: #356cc4;
  --blue-soft: #eaf1fc;
  --amber: #926116;
  --amber-soft: #fff3d9;
  --red: #bc4853;
  --red-soft: #fff0f1;
  --teal: #167b91;
  --teal-soft: #e4f4f7;
  --rose: #b64462;
  --rose-soft: #fcedf2;
  --violet: #725bad;
  --violet-soft: #f0ecf8;
  --module-accent: var(--green-700);
  --module-soft: var(--green-100);
  --sidebar: 248px;
  --sidebar-bg: #152e2c;
  --panel: var(--surface);
  font-family: 'Segoe UI Variable Text', 'Segoe UI', Arial, sans-serif;
}
.theme-dark {
  --bg: #171d20;
  --surface: #20282c;
  --panel: var(--surface);
  --surface-soft: #263035;
  --surface-muted: #303b40;
  --border: #3b484e;
  --line: #303c41;
  --text: #eef2f4;
  --muted: #acb9c0;
  --green-700: #90d7b5;
  --green-800: #abe3c7;
  --green-100: #2b4338;
  --green-50: #253a30;
  --action-bg: #187455;
  --amber: #edc476;
  --amber-soft: #423a28;
  --blue: #a4c5fc;
  --blue-soft: #273b53;
  --teal: #92d7e5;
  --teal-soft: #263e44;
  --rose: #f1a5ba;
  --rose-soft: #44313c;
  --violet: #c7b4f3;
  --violet-soft: #383247;
  --red: #f3a4ac;
  --red-soft: #443137;
}
.app-shell[data-tone='blue'] { --module-accent: var(--blue); --module-soft: var(--blue-soft); }
.app-shell[data-tone='teal'] { --module-accent: var(--teal); --module-soft: var(--teal-soft); }
.app-shell[data-tone='amber'] { --module-accent: var(--amber); --module-soft: var(--amber-soft); }
.app-shell[data-tone='rose'] { --module-accent: var(--rose); --module-soft: var(--rose-soft); }
.app-shell[data-tone='violet'] { --module-accent: var(--violet); --module-soft: var(--violet-soft); }
.app-shell .main-area { min-width: 0; background: var(--bg); }
.app-shell .sidebar { background: var(--sidebar-bg); border: 0; color: #f3f7f8; }
.app-shell .brand-block { min-height: 94px; padding: 22px 18px; background: none; border-bottom: 1px solid #ffffff12; }
.app-shell .brand-block img { width: 46px; height: 46px; flex-basis: 46px; border-radius: 8px; border: 1px solid #ffffff24; }
.app-shell .brand-block strong { color: #fff; font-size: 17px; }
.app-shell .brand-block span { color: #a4b7bc; font-size: 12px; }
.app-shell .sidebar-nav { padding: 14px 12px; scrollbar-color: #53646b transparent; }
.app-shell .nav-group { --nav-accent: #91d9b5; padding: 6px 0 14px; }
.app-shell .nav-group[data-tone='blue'] { --nav-accent: #a5c7ff; }
.app-shell .nav-group[data-tone='teal'] { --nav-accent: #8cd9e3; }
.app-shell .nav-group[data-tone='amber'] { --nav-accent: #f3ce86; }
.app-shell .nav-group[data-tone='rose'] { --nav-accent: #f2b5c7; }
.app-shell .nav-group[data-tone='violet'] { --nav-accent: #cabbef; }
.app-shell .nav-group-label { color: #91a5ac; font-size: 10px; margin-bottom: 8px; }
.app-shell .nav-link { min-height: 44px; gap: 10px; padding: 8px 10px; color: #cdddda; }
.app-shell .nav-link:hover { color: #fff; background: #ffffff0a; }
.app-shell .nav-link.active, .app-shell .nav-link[aria-current='page'] { background: #ffffff14; color: #fff; box-shadow: inset 3px 0 var(--nav-accent); }
.app-shell .nav-link .icon { color: var(--nav-accent); width: 30px; height: 30px; flex: 0 0 30px; padding: 6px; background: #ffffff09; border-radius: 6px; }
.app-shell .nav-link.active .icon { background: #ffffff12; }
.app-shell .nav-badge { background: #ffffff12; color: #e4eef1; border: 0; }
.app-shell .nav-link.active .nav-badge { background: #ffffff26; color: #fff; }
.app-shell .sidebar-footer { padding: 14px 22px; background: none; border-color: #ffffff12; }
.app-shell .sidebar-footer .role-chip { color: #c5d1d6; }
.app-shell .sidebar-footer .icon-btn { background: #ffffff08; color: #c5d1d6; border-color: #ffffff16; }
.app-shell header.topbar { grid-template-columns: minmax(190px,1fr) minmax(300px,430px) auto; gap: 20px; min-height: 86px; padding: 18px 28px; }
.app-shell .topbar-title { display: flex; align-items: center; gap: 12px; }
.app-shell .topbar-title > div { min-width: 0; }
.app-shell .topbar-title .topbar-module-icon { display: grid; place-items: center; width: 42px; height: 42px; flex: 0 0 42px; border: 1px solid var(--module-soft); border-radius: 8px; background: var(--module-soft); color: var(--module-accent); }
.app-shell .topbar-module-icon .icon { width: 22px; height: 22px; }
.app-shell .topbar-title h1 { font-size: 17px; }
.app-shell .topbar-title #view-kicker { font-size: 10px; font-weight: 550; }
.app-shell .topbar-utility { display: flex; align-items: center; gap: 12px; min-width: 0; }
.app-shell .topbar-tools { display: flex; gap: 4px; flex: 0 0 auto; padding: 3px; border: 1px solid var(--border); background: var(--surface-soft); border-radius: 8px; }
.app-shell .topbar-tools .icon-btn { width: 34px; height: 34px; min-height: 34px; border: 0; border-radius: 5px; background: transparent; color: var(--muted); }
.app-shell .topbar-tools .icon-btn:hover { background: var(--surface); color: var(--module-accent); }
.app-shell .topbar-tools [data-report-work] { color: var(--teal); }
.app-shell .topbar-tools [data-report-issue] { color: var(--amber); }
.app-shell .topbar-tools [data-notification-button].has-count { color: var(--blue); background: var(--blue-soft); }
.app-shell .topbar > .icon-btn { width: 38px; height: 38px; min-height: 38px; }
.app-shell .global-search { order: 0; flex: 1 1 0; min-width: 0; min-height: 42px; background: var(--surface-soft); border-color: var(--border); }
.app-shell .topbar-tools { order: 1; }
.app-shell .global-search:focus-within { border-color: var(--green-600); }
.app-shell .global-search input { width: 100%; min-width: 0; }
.app-shell .user-menu { max-width: 190px; }
.app-shell .user-info { min-width: 0; }
.app-shell .user-info :is(strong,span) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.app-shell .view { width: 100%; grid-template-columns: minmax(0,1fr); padding: 28px 30px 48px; gap: 24px; max-width: 1800px; }
.app-shell .section-header { margin: 0; padding-bottom: 20px; border-bottom: 1px solid var(--border); gap: 16px; text-align: left; flex-direction: row; align-items: center; justify-content: space-between; }
.app-shell .section-header h2 { font-size: 22px; font-weight: 650; line-height: 1.35; }
.app-shell .section-header p { margin-bottom: 0; font-size: 12px; }
.app-shell :is(.panel-title h3,.overview-section-title h3) { font-size: 16px; line-height: 1.4; }
.app-shell .panel-title { padding-bottom: 8px; }
.app-shell .section-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.app-shell .view > .panel { padding: 20px 0; background: transparent; border: 0; border-radius: 0; }
.app-shell .btn { min-height: 40px; font-size: 13px; border-radius: 6px; padding: 9px 14px; }
.app-shell .btn.primary { color: #fff; background: var(--action-bg); border-color: var(--action-bg); }
.app-shell .btn.primary-soft { color: var(--green-800); background: var(--green-100); border-color: transparent; }
.app-shell .btn.danger-soft { color: var(--red); background: var(--red-soft); border-color: transparent; }
.app-shell .btn.ghost { color: var(--muted); }
.app-shell .btn.mini { min-height: 34px; padding: 7px 11px; font-size: 12px; }
.app-shell .btn:hover:not(:disabled) { border-color: var(--green-600); }
.app-shell .btn.primary:hover:not(:disabled) { background: #0f6147; color: white; }
.app-shell .btn:disabled { opacity: .48; cursor: not-allowed; }
.app-shell .row-actions { align-items: center; gap: 7px; }
.app-shell .process-filter-panel { min-width: 0; padding: 0; gap: 10px; background: transparent; border: 0; border-radius: 0; box-shadow: none; }
.app-shell .process-filter-panel > .panel-title { padding: 0; }
.app-shell .process-filter-panel > .panel-title h3 { font-size: 13px; color: var(--muted); }
.workflow-nav-panel > .panel-title > span { display: none; }
.app-shell #view .process-filter-tabs.workflow-status-nav { display: grid; grid-template-columns: repeat(auto-fit,minmax(160px,1fr)); gap: 8px; min-width: 0; max-width: 100%; overflow: visible; padding: 0; border: 0; }
.app-shell #view .workflow-status-nav .process-filter-tab { --workflow-color: var(--blue); --workflow-soft: var(--blue-soft); display: grid; grid-template-columns: 28px minmax(0,1fr) auto; align-items: center; gap: 9px; min-width: 0; max-width: none; min-height: 64px; padding: 11px 12px; border: 1px solid var(--border); border-bottom: 3px solid transparent; border-radius: 6px; color: var(--text); background: var(--surface); box-shadow: none; transform: none; text-align: left; }
.app-shell #view .workflow-status-nav [data-workflow-tone='danger'] { --workflow-color: var(--red); --workflow-soft: var(--red-soft); }
.app-shell #view .workflow-status-nav [data-workflow-tone='success'] { --workflow-color: var(--green-700); --workflow-soft: var(--green-100); }
.app-shell #view .workflow-status-nav [data-workflow-tone='waiting'] { --workflow-color: var(--amber); --workflow-soft: var(--amber-soft); }
.app-shell #view .workflow-status-nav [data-workflow-tone='progress'] { --workflow-color: var(--teal); --workflow-soft: var(--teal-soft); }
.app-shell #view .workflow-status-nav [data-workflow-tone='history'] { --workflow-color: var(--muted); --workflow-soft: var(--surface-muted); }
.app-shell #view .workflow-status-nav .workflow-tab-icon { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 5px; background: var(--workflow-soft); color: var(--workflow-color); }
.app-shell #view .workflow-status-nav .workflow-tab-icon .icon { width: 17px; height: 17px; }
.app-shell #view .workflow-status-nav strong { font-weight: 600; font-size: 13px; line-height: 1.4; white-space: normal; min-width: 0; overflow-wrap: break-word; }
.app-shell #view .workflow-status-nav .workflow-tab-count { position: static; display: grid; place-items: center; grid-column: 3; grid-row: 1; min-width: 24px; height: 26px; padding: 0 5px; border-radius: 4px; background: var(--surface-muted); color: var(--muted); font-size: 12px; font-weight: 650; font-variant-numeric: tabular-nums; }
.app-shell #view .workflow-status-nav small { display: none; }
.app-shell #view .workflow-status-nav .process-filter-tab:hover { transform: none; border-color: var(--workflow-color); background: var(--workflow-soft); }
.app-shell #view .workflow-status-nav .process-filter-tab.active, .app-shell #view .workflow-status-nav [aria-pressed='true'] { background: var(--workflow-soft); border-color: transparent; border-bottom-color: var(--workflow-color); color: var(--workflow-color); box-shadow: none; }
.app-shell #view .workflow-status-nav .active .workflow-tab-icon { background: var(--surface); }
.app-shell #view .workflow-status-nav .active .workflow-tab-count { background: var(--workflow-color); color: var(--surface); }
.app-shell #view .workflow-status-nav .process-filter-tab:focus-visible { outline: 2px solid var(--workflow-color); outline-offset: 2px; }
@media (max-width:760px) {
  .app-shell #view .process-filter-tabs.workflow-status-nav { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 6px; }
  .app-shell #view .workflow-status-nav .process-filter-tab { grid-template-columns: 24px minmax(0,1fr) auto; min-height: 64px; gap: 6px; padding: 9px 8px; }
  .app-shell #view .workflow-status-nav .workflow-tab-icon { width: 24px; height: 26px; }
  .app-shell #view .workflow-status-nav strong { font-size: 12px; }
  .app-shell #view .workflow-status-nav .workflow-tab-count { min-width: 21px; padding: 0 4px; }
}
.app-shell .warehouse-area-nav { gap: 6px; }
.catalog-area-nav { display: flex; flex-wrap: wrap; gap: 4px; padding: 4px; background: var(--surface-muted); width: fit-content; max-width: 100%; border-radius: 8px; }
.catalog-area-nav button { display: flex; gap: 12px; align-items: center; min-height: 44px; padding: 9px 14px; background: transparent; border: 1px solid transparent; border-radius: 5px; color: var(--muted); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.catalog-area-nav button.active { color: var(--module-accent); border-color: var(--border); background: var(--surface); }
.catalog-area-nav button span { font-size: 12px; font-variant-numeric: tabular-nums; }
.catalog-area-nav button:focus-visible { outline: 2px solid var(--module-accent); }
.catalog-content { min-width: 0; }
.catalog-content > .panel { padding: 0; background: transparent; border: 0; box-shadow: none; }
.catalog-content [hidden] { display: none; }
.app-shell :is(.finance-studio-nav,.warehouse-area-nav) button.active { background: var(--module-soft); border-color: var(--module-accent); color: var(--module-accent); }
.app-shell .finance-studio-nav { padding-top: 4px; }
.app-shell .finance-studio-nav button { border-radius: 6px; min-height: 46px; }
.app-shell .warehouse-area-nav { padding: 0 0 16px; }
.app-shell .warehouse-area-nav button { min-height: 44px; background: var(--surface); border-color: var(--border); }
.app-shell :is(.operations-filters,.operations-catalog,.filter-toggle) { background: var(--surface); border: 1px solid var(--border); border-radius: 6px; padding: 10px 14px; }
.filter-toggle { display: flex; align-items: center; gap: 10px; min-height: 44px; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; color: var(--module-accent); }
.filter-toggle > .icon { width: 18px; height: 18px; }
.filter-toggle-chevron { margin-left: auto; transform: rotate(90deg); }
.filter-group.is-expanded .filter-toggle-chevron { transform: rotate(-90deg); }
.filter-group:not(.is-expanded) .filter-panel { display: none; }
.app-shell .filter-toggle { background: var(--module-soft); border-color: transparent; width: 100%; }
.app-shell .filter-panel { background: transparent; border: 0; padding: 16px 0 0; }
.filter-panel label > span { color: var(--muted); font-size: 12px; font-weight: 600; }
.filter-panel :is(input, select), .inline-filter :is(input, select), .form-field :is(input:not([type='checkbox']):not([type='radio']), select, textarea) { border-radius: 6px; border: 1px solid var(--border); background: var(--surface); color: var(--text); min-height: 44px; padding: 10px 12px; font-weight: 450; }
:is(.filter-panel,.form-field,.inline-filter) :is(input,select,textarea):focus-visible { outline: 2px solid var(--module-accent); outline-offset: 2px; box-shadow: none; }
.app-shell .filter-panel [data-reset-filters] { min-height: 44px; background: var(--surface); border: 1px solid var(--border); }
.app-shell .filter-panel label:focus-within > span { color: var(--module-accent); }
.app-shell .table-toolbar { padding-bottom: 14px; }
.app-shell .table-toolbar .search-field { min-height: 44px; width: min(100%, 340px); background: var(--surface); border: 1px solid var(--border); }
.app-shell .table-toolbar .search-field > .icon { color: var(--module-accent); }
.app-shell .table-toolbar .search-field input { min-width: 0; width: 100%; font-size: 13px; }
.app-shell :is(.table-toolbar .search-field,.global-search):focus-within { outline: 2px solid var(--module-accent); outline-offset: 2px; border-color: transparent; }
.app-shell .table-count { min-height: 28px; padding: 5px 9px; border-radius: 4px; background: var(--surface-muted); font-size: 12px; font-weight: 550; font-variant-numeric: tabular-nums; color: var(--muted); }
.app-shell .pagination .icon-btn { width: 38px; height: 38px; min-height: 38px; border-color: var(--border); }
.app-shell .table-wrap { width: 100%; border: 1px solid var(--border); border-radius: 6px; background: var(--surface); }
.app-shell .data-table th { padding: 13px 16px; background: var(--surface-soft); color: var(--text); font-size: 12px; }
.app-shell .data-table th[aria-sort='ascending'], .app-shell .data-table th[aria-sort='descending'] { color: var(--module-accent); }
.app-shell .data-table th button { min-height: 24px; }
.app-shell .data-table td { padding: 15px 16px; line-height: 1.55; vertical-align: middle; }
.app-shell .data-table td:has(.row-actions) { min-width: 200px; }
.app-shell .data-table td small { font-size: 11px; line-height: 1.5; }
.app-shell .data-table tbody tr:hover { background: var(--surface-soft); }
.app-shell .data-table .btn { white-space: nowrap; }
@media (min-width:1101px) {
  .app-shell .data-table [data-action-column] { position: sticky; right: 0; background: var(--surface); box-shadow: -1px 0 var(--border); z-index: 1; }
  .app-shell .data-table th[data-action-column] { background: var(--surface-soft); z-index: 2; }
  .app-shell .data-table tbody tr:hover [data-action-column] { background: var(--surface-soft); }
}
.app-shell .status-pill { font-size: 11px; padding: 4px 9px; border-radius: 4px; font-weight: 600; }
.app-shell .status-pill.success { color: var(--green-800); background: var(--green-100); }
.app-shell .status-pill.warning { color: var(--amber); background: var(--amber-soft); }
.app-shell .status-pill.info { color: var(--blue); background: var(--blue-soft); }
.app-shell .status-pill.danger { color: var(--red); background: var(--red-soft); }
.app-shell .pagination { padding-top: 12px; gap: 14px; }
.app-shell .metric-card { --metric-accent: var(--green-700); --metric-soft: var(--green-100); min-width: 0; border-color: var(--border); background: var(--surface); }
.app-shell .metric-card.tone-blue { --metric-accent: var(--blue); --metric-soft: var(--blue-soft); }
.app-shell .metric-card.tone-amber { --metric-accent: var(--amber); --metric-soft: var(--amber-soft); }
.app-shell .metric-card.tone-red { --metric-accent: var(--red); --metric-soft: var(--red-soft); }
.app-shell .metric-icon { background: var(--metric-soft); color: var(--metric-accent); }
.app-shell .operations-workspace .dashboard-grid.compact { padding: 16px 0; background: var(--surface); border-block: 1px solid var(--border); border-radius: 0; }
.app-shell .operations-workspace .metric-card { padding-inline: 18px; }
.app-shell .operations-emblem { background: var(--module-soft); color: var(--module-accent); width: 44px; height: 44px; flex-basis: 44px; }
.app-shell .overview-page { gap: 24px; }
.app-shell .overview-heading { padding-bottom: 0; border: 0; }
.app-shell .overview-heading h2 { font-size: 26px; font-weight: 650; }
.app-shell .overview-eyebrow { color: var(--green-700); font-size: 12px; }
.app-shell .overview-metrics { gap: 12px; }
.app-shell .overview-metrics .metric-card { min-height: 128px; padding: 18px 20px; background: var(--metric-soft); border: 1px solid transparent; border-radius: 8px; position: relative; flex-direction: row; }
.app-shell .overview-metrics .metric-icon { order: 2; background: var(--surface); margin-left: auto; }
.app-shell .overview-metrics .metric-card > div:not(.metric-icon) { order: 1; }
.app-shell .overview-metrics .metric-card span { color: var(--metric-accent); }
.app-shell .overview-metrics .metric-card strong { font-size: 32px; }
.app-shell .overview-section { padding: 20px 0; background: transparent; border: 0; border-top: 1px solid var(--border); }
.app-shell :is(.overview-charts,.overview-work) { gap: 28px; grid-template-columns: minmax(0,1.8fr) minmax(280px,1fr); }
.app-shell .overview-page .overview-queues { padding: 20px 0 20px 24px; border-left: 1px solid var(--border); border-radius: 0; background: transparent; }
.app-shell .overview-batches .table-wrap { border: 1px solid var(--border); border-radius: 6px; }
.app-shell .overview-batches .data-table { min-width: 480px; }
.app-shell .overview-section-title { margin-bottom: 16px; }
.app-shell .overview-section-title h3 { display: flex; align-items: center; gap: 10px; }
.app-shell .overview-section-icon { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 6px; background: var(--blue-soft); color: var(--blue); }
.app-shell .overview-section-icon .icon { width: 17px; height: 17px; }
.app-shell .overview-queue { min-height: 64px; }
.app-shell .overview-attention { padding: 16px; background: var(--amber-soft); border: 0; border-left: 3px solid var(--amber); border-radius: 0; }
.app-shell .overview-distribution .donut-chart { flex-direction: row; gap: 20px; min-height: 210px; }
.app-shell .overview-distribution .donut-legend { grid-template-columns: minmax(0,1fr); }
.app-shell .overview-distribution .donut-ring { width: 140px; height: 140px; flex-basis: 140px; }
.app-shell .overview-chart-total strong { font-size: 26px; }
.app-shell .bar-track { background: var(--surface-soft); border-radius: 4px 4px 0 0; }
.entity-form, .entity-form label { min-width: 0; max-width: 100%; }
.entity-form label { display: grid; gap: 7px; }
.entity-form :is(input,select,textarea) { width: 100%; min-width: 0; max-width: 100%; min-height: 42px; border: 1px solid var(--border); border-radius: 6px; padding: 9px 11px; font: inherit; color: var(--text); background: var(--surface); }
.entity-form p { overflow-wrap: anywhere; }
.entity-form .btn { white-space: normal; max-width: 100%; }
.modal :is(.form-grid,.entity-form) { min-width: 0; }
.modal .form-grid > * { min-width: 0; }
.modal :is(input,textarea,select) { font-size: 14px; }
.modal .modal-body { line-height: 1.6; }
.modal .modal-header h2 { font-size: 19px; }
.modal .modal-header .icon-btn { border: 0; background: var(--surface-soft); }
.modal .form-actions { flex-wrap: wrap; }
@media (max-width:1280px) {
  .app-shell .view { padding-inline: 24px; }
  .app-shell header.topbar { grid-template-columns: minmax(160px,1fr) minmax(260px,360px) auto; padding-inline: 24px; gap: 12px; }
  .app-shell .topbar-title .topbar-module-icon { width: 36px; height: 36px; flex-basis: 36px; }
  .app-shell .user-info { display: none; }
  .app-shell .overview-distribution .donut-chart { flex-direction: column; }
  .app-shell .overview-distribution .donut-legend { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (min-width:761px) and (max-width:1100px) {
  .app-shell header.topbar { grid-template-columns: 40px minmax(150px,1fr) minmax(280px,360px) auto; }
  .app-shell header.topbar .mobile-menu { grid-column: 1; grid-row: 1; }
  .app-shell header.topbar .topbar-title { grid-column: 2; grid-row: 1; }
  .app-shell header.topbar .topbar-utility { grid-column: 3; grid-row: 1; }
  .app-shell header.topbar .user-menu { grid-column: 4; grid-row: 1; }
}
@media (max-width:900px) {
  .app-shell :is(.overview-charts,.overview-work,.overview-bottom) { grid-template-columns: minmax(0,1fr); gap: 16px; }
  .app-shell .overview-page .overview-queues { padding-left: 0; border-left: 0; }
  .app-shell .overview-distribution .donut-chart { flex-direction: row; justify-content: flex-start; min-height: 170px; }
  .app-shell .overview-distribution .donut-legend { max-width: 300px; grid-template-columns: minmax(0,1fr); }
}
@media (max-width:760px) {
  .app-shell header.topbar { grid-template-columns: 40px minmax(0,1fr) 40px; grid-template-rows: auto auto; padding: 12px 16px; gap: 10px; }
  .app-shell .topbar > .icon-btn { width: 40px; height: 40px; min-height: 40px; }
  .app-shell header.topbar .mobile-menu { grid-column: 1; grid-row: 1; }
  .app-shell header.topbar .topbar-title { grid-column: 2; grid-row: 1; }
  .app-shell header.topbar .topbar-title #view-kicker { display: none; }
  .app-shell header.topbar .topbar-title .topbar-module-icon { display: none; }
  .app-shell header.topbar .topbar-title h1 { font-size: 16px; overflow-wrap: anywhere; }
  .app-shell header.topbar .user-menu { grid-column: 3; grid-row: 1; padding: 0; margin: 0; border: 0; justify-self: center; }
  .app-shell header.topbar .topbar-utility { grid-column: 1 / -1; grid-row: 2; gap: 8px; }
  .app-shell header.topbar .global-search { grid-column: auto; grid-row: auto; margin: 0; min-height: 40px; padding-inline: 9px; }
  .app-shell .topbar-tools { gap: 2px; padding: 2px; }
  .app-shell .topbar-tools .icon-btn { width: 32px; height: 32px; min-height: 32px; }
  .app-shell .topbar-utility [data-global-search] { font-size: 12px; }
  .app-shell .view { padding: 22px 16px 32px; gap: 20px; }
  .app-shell .section-header h2 { font-size: 21px; }
  .app-shell .section-header { align-items: flex-start; }
  .app-shell .section-actions { width: 100%; }
  .app-shell .section-actions .btn { min-height: 44px; }
  .app-shell .finance-studio .finance-hero-stats strong { font-size: 17px; line-height: 1.45; }
  .app-shell .overview-metrics { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
  .app-shell .overview-metrics .metric-card { min-height: 116px; padding: 16px; }
  .app-shell .overview-metrics .metric-card strong { font-size: 29px; }
  .app-shell .overview-heading h2 { font-size: 24px; }
  .app-shell .overview-section { padding-block: 18px; }
  .app-shell .btn.mini { min-height: 44px; }
  .app-shell .operations-workspace .dashboard-grid.compact { grid-template-columns: repeat(3,minmax(0,1fr)); padding: 14px 0; }
  .app-shell .operations-workspace .metric-card { padding-inline: 12px; }
  .app-shell .operations-workspace .metric-card strong { font-size: 23px; }
  .app-shell .filter-panel { gap: 12px; }
  .modal-backdrop { padding: 10px; }
  .modal { max-height: calc(100dvh - 20px); }
  .modal :is(.modal-header,.modal-body,.modal-footer) { padding: 18px; }
  .modal :is(input,select,textarea) { font-size: 16px; }
  .modal .form-actions .btn { min-height: 44px; }
}
@media (max-width:360px) {
  .app-shell header.topbar { padding-inline: 10px; gap: 6px; }
  .app-shell .view { padding-inline: 12px; }
  .app-shell .overview-metrics { grid-template-columns: minmax(0,1fr); }
  .app-shell .overview-distribution .donut-chart { flex-direction: column; }
}
@media (prefers-reduced-motion:reduce) {
  .app-shell *, .modal *, .toast { scroll-behavior: auto; transition-duration: 0s !important; animation-duration: 0s !important; }
}
@media print {
  .app-shell { --surface: #fff; --surface-soft: #f6f8f8; --text: #202c32; --muted: #64747c; --border: #dfe6e6; --green-800: #115e46; --green-700: #147355; grid-template-columns: minmax(0,1fr); }
  .app-shell :is(.sidebar,.topbar) { display: none; }
  .app-shell .main-area { background: #fff; }
  .app-shell .overview-section { break-inside: avoid; }
}