:root {
      --bb-black:#050505;
      --bb-orange:#F67E0F;
      --bb-orange-dark:#C75F08;
      --bb-cream:#FFF7ED;
      --bb-card:#FFFFFF;
      --bb-line:#E8DDD0;
      --bb-muted:#6B625A;
      --bb-soft:#F5EBDD;
      --bb-text:#111111;
      --bb-red:#B42318;
      --bb-green:#0A6B45;
      --bb-blue:#175CD3;
      --bb-purple:#6E3BC4;
      --bb-brown:#7A3E00;
      --shadow:0 18px 45px rgba(49,31,14,.08);
      --shadow-sm:0 8px 22px rgba(49,31,14,.08);
    }
    *{box-sizing:border-box;margin:0;padding:0}
    html,body,#app{min-height:100%;height:100%}
    body{background:var(--bb-cream);font-family:var(--font-body);color:var(--bb-text);-webkit-tap-highlight-color:transparent}
    button,input,select,textarea{font:inherit}
    button{border:0;cursor:pointer}
    a{color:inherit}
    .shell{min-height:100vh;display:flex;background:var(--bb-cream)}
    .sidebar{width:230px;background:var(--surface-dark);color:var(--text-inverse);position:fixed;inset:0 auto 0 0;padding:20px 12px;display:flex;flex-direction:column;gap:18px;z-index:50}
    .sidebar .brand{display:flex;align-items:center;gap:10px;padding:4px;margin-bottom:18px;background:transparent;color:var(--text-inverse);text-align:left;width:100%;border:0;border-radius:0;text-decoration:none}
    .sidebar .brand:hover{background:transparent;transform:none;box-shadow:none}
    .sidebar .brand:focus,.sidebar .brand:focus-visible{outline:0;box-shadow:none}
    .sidebar .brand *{text-decoration:none}
    .sidebar .mark{width:36px;height:36px;border-radius:0;background:transparent;display:grid;place-items:center;overflow:hidden;flex:0 0 auto}
    .sidebar .mark img{width:100%;height:100%;object-fit:contain;padding:0}
    .sidebar .brand-title{font-size:1rem;font-weight:800;line-height:.95;letter-spacing:.01em;white-space:nowrap;color:var(--text-inverse)}
    .sidebar .brand-sub{font-size:11px;color:rgba(255,247,237,.55);margin-top:2px;font-weight:500}
    .sidebar .nav-label{font-size:12px;text-transform:none;letter-spacing:.03em;color:rgba(255,247,237,.55);font-weight:650;padding:0 8px 4px}
    .sidebar .nav{display:flex;flex-direction:column;gap:4px;flex:1}
    .sidebar .nav-btn{display:grid;grid-template-columns:20px minmax(0,1fr);align-items:center;gap:10px;text-align:left;width:100%;background:transparent;color:rgba(255,247,237,.72);border-radius:var(--shape-corner-pill);padding:6px 12px;min-height:36px;font-size:var(--fs-body);font-weight:650;transition:background .14s ease,color .14s ease}
    .sidebar .nav-btn:hover{background:rgba(255,255,255,.06);color:var(--text-inverse)}
    .sidebar .nav-btn.active{background:var(--color-primary);color:var(--color-on-primary);box-shadow:none}
    .sidebar .nav-ico{width:20px;height:20px;display:grid;place-items:center;flex:0 0 20px}
    .sidebar .nav-ico svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2.15;stroke-linecap:round;stroke-linejoin:round}
    .sidebar .hub-group{margin-top:auto;display:flex;flex-direction:column;gap:4px}.sidebar .hub{text-decoration:none;background:transparent;color:rgba(255,247,237,.72);border-radius:var(--shape-corner-pill);padding:6px 12px;min-height:36px;font-size:var(--fs-body);font-weight:650;display:grid;grid-template-columns:20px minmax(0,1fr);align-items:center;gap:10px;text-align:left;border:1px solid rgba(255,247,237,.12);transition:background .14s ease,color .14s ease}
    .sidebar .hub:hover{background:rgba(255,255,255,.06);color:var(--text-inverse);transform:none;box-shadow:none}
    .sidebar .hub:focus-visible{outline:3px solid var(--focus-ring);outline-offset:2px}
    .sidebar .hub-ico{width:20px;height:20px;display:grid;place-items:center;flex:0 0 auto}
    .sidebar .hub-ico svg{display:block}
    .main{margin-left:230px;width:calc(100% - 230px);height:100vh;display:flex;flex-direction:column;overflow:hidden}
    .topbar{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);width:100%;max-width:1180px;margin:0 auto var(--space-5);padding:var(--space-5) 28px var(--space-4);border-bottom:1px solid var(--border-soft);background:transparent}
    .header-context{display:flex;align-items:center;gap:var(--space-3);min-width:0;flex:1}
    .header-text-group{display:flex;flex-direction:column;justify-content:center;min-width:0;flex:1}
    .header-title{margin:0;color:var(--text-strong);font-size:var(--fs-page-title);font-weight:var(--fw-heading);line-height:var(--lh-display);letter-spacing:-.03em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
    .header-actions,.header-action-cluster{display:flex;align-items:center;gap:var(--space-2)}
    .header-actions{flex-shrink:0}
    .header-profile-btn{height:var(--control-height);padding:0 14px;display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1px solid var(--border-soft);border-radius:var(--shape-corner-md);background:transparent;color:var(--text-strong);font-size:var(--fs-subheadline);font-weight:var(--fw-heading);white-space:nowrap;max-width:220px;overflow:hidden;text-overflow:ellipsis}
    .header-profile-btn:hover{transform:none;box-shadow:none}
    .header-profile-btn:focus-visible{outline:3px solid var(--focus-ring);outline-offset:2px}
    .content{flex:1;overflow:auto;min-height:0}
    .wrap{width:100%;max-width:1260px;margin:0 auto;padding:22px 24px 52px}
    .mobile-header{display:none;background:#000;color:#fff;padding:14px 16px;align-items:center;justify-content:space-between;flex:0 0 auto}
    .mobile-title{font-size:14px;font-weight:950;letter-spacing:-.03em}
    .mobile-bottom-nav{display:none;position:fixed;left:0;right:0;bottom:0;z-index:var(--z-nav);min-height:var(--mobile-nav-height);overflow:hidden;padding:8px 10px calc(8px + env(safe-area-inset-bottom));background:var(--bottom-nav-surface);color:var(--bottom-nav-text);box-shadow:0 -10px 30px rgba(17,23,33,.18)}
    .mobile-nav-inner{display:grid;grid-template-columns:repeat(var(--nav-count),minmax(0,1fr));gap:6px;width:100%;min-width:0;margin:0;padding:0}
    .mobile-nav-button{position:relative;z-index:0;width:100%;min-width:0;min-height:48px;padding:6px 4px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;border-radius:var(--shape-corner-lg);background:transparent;color:var(--bottom-nav-text);font-size:var(--fs-label);font-weight:800;line-height:1.05;letter-spacing:.03em;text-align:center;white-space:nowrap;transition:color 140ms ease}
    .mobile-nav-button.active{background:var(--bottom-nav-active);color:var(--bottom-nav-active-text)}
    .mobile-nav-button svg{width:20px;height:20px;flex:0 0 20px;stroke:currentColor;fill:none;stroke-width:2.15;stroke-linecap:round;stroke-linejoin:round}
    .mobile-nav-button span{display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
    .mobile-nav-button.nav-feedback{animation:mobile-nav-select-feedback 360ms var(--motion-easing-decelerate) both;transform-origin:center}
    .mobile-nav-button:focus-visible{outline:3px solid var(--focus-ring);outline-offset:-3px}
    @keyframes mobile-nav-select-feedback{from{transform:scale(.94)}to{transform:scale(1)}}
    .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;transition:.16s ease}.btn.syncing svg{animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.btn.block{width:100%}
    .grid-kpi{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;margin-bottom:18px}
    .kpi{background:#fff;border:1px solid var(--bb-line);border-radius:22px;padding:17px 16px;box-shadow:var(--shadow-sm);min-height:122px;display:flex;flex-direction:column;justify-content:space-between}
    .kpi-label{font-size:10px;text-transform:uppercase;letter-spacing:.1em;color:#776B5F;font-weight:950}
    .kpi-value{font-size:30px;font-weight:950;letter-spacing:-.055em;margin-top:8px}
    .panel{background:#fff;border:1px solid var(--bb-line);border-radius:24px;box-shadow:var(--shadow);overflow:hidden}
    .toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:14px}
    .filter-line{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
    .input,.select,.textarea{width:100%;border:1.5px solid var(--bb-line);background:#fff;color:#111;border-radius:14px;padding:11px 12px;font-size:13px;font-weight:650;outline:none;min-height:42px}
    .textarea{min-height:92px;resize:vertical;line-height:1.45}
    .input:focus,.select:focus,.textarea:focus{border-color:var(--bb-orange);box-shadow:0 0 0 4px rgba(246,126,15,.11)}
    .search{min-width:260px}
    .badge{display:inline-flex;align-items:center;gap:5px;border-radius:999px;padding:5px 8px;font-size:10px;font-weight:950;letter-spacing:.02em;white-space:nowrap}
    .b-red{background:#FEE4E2;color:#B42318} .b-orange{background:#FFF1DC;color:#9A4B00} .b-green{background:#DCFCE7;color:#0A6B45} .b-blue{background:#E1EAFF;color:#175CD3} .b-purple{background:#EEE5FF;color:#6E3BC4} .b-brown{background:#F7E7CC;color:#7A3E00} .b-gray{background:#F2F0EC;color:#5D5550}
    .card-list{display:flex;flex-direction:column;gap:10px}
    .order-card{background:#fff;border:1px solid var(--bb-line);border-radius:20px;padding:14px;box-shadow:0 9px 22px rgba(49,31,14,.045);transition:.16s ease}
    .order-card:hover{box-shadow:none;transform:none}
    .order-top{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
    .order-name{font-size:14px;font-weight:950;letter-spacing:-.02em;line-height:1.2}
    .mono{font-family:var(--font-body);font-size:var(--fs-label);color:var(--color-text-soft);font-weight:var(--fw-medium)}
    .meta{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:7px}
    .order-items{font-size:12px;color:#4D4239;line-height:1.45;margin-top:11px}
    .order-items b{font-weight:var(--fw-heading);color:var(--text-strong)}
    .order-actions{display:flex;gap:7px;align-items:center;flex-wrap:wrap;margin-top:12px}
    .today-work-list{display:flex;flex-direction:column;gap:12px}
    .today-progress-card{background:#fff;border:1px solid #E8D6C2;border-radius:24px;padding:17px 18px;box-shadow:0 10px 30px rgba(49,31,14,.04)}
    .today-progress-top{display:flex;align-items:flex-start;gap:13px}
    .today-rank{color:#A34F00;font-size:var(--fs-page-title);font-weight:950;line-height:var(--lh-display);flex:0 0 auto}
    .today-main{min-width:0;flex:1}
    .today-title-line{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
    .today-title{font-size:15px;font-weight:950;color:#000;line-height:1.2}
    .today-meta-line{display:flex;gap:18px;align-items:center;flex-wrap:wrap;margin-top:8px;font-size:12px;color:#5F5147;font-weight:800}
    .today-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-left:auto}
    .today-actions .btn{background:transparent}
    .today-progress-wrap{margin:18px 0 2px;padding-left:58px;padding-right:4px}
    .workflow-progress{position:relative;padding-top:7px}
    .workflow-line{position:absolute;left:5.5%;right:5.5%;top:18px;height:4px;background:#E8DED2;border-radius:999px;overflow:hidden}
    .workflow-line-fill{height:100%;background:#F67E0F;border-radius:999px;transition:width .18s ease}
    .workflow-steps{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));position:relative;z-index:1}
    .workflow-step{display:flex;flex-direction:column;align-items:center;gap:6px;min-width:0}
    .workflow-dot{width:28px;height:28px;border-radius:50%;background:#F1E4D4;border:2px solid #D8C6B2;display:grid;place-items:center;color:#8A7A69;font-size:12px;font-weight:950}
    .workflow-step.done .workflow-dot{background:#F67E0F;border-color:#F67E0F;color:#fff}
    .workflow-step.active .workflow-dot{background:#fff;border-color:#F67E0F;color:#F67E0F;box-shadow:0 0 0 5px rgba(246,126,15,.10)}
    .workflow-step-label{font-size:10px;font-weight:950;color:#7C5B3B;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:92px}
    .workflow-step.pending .workflow-step-label{color:#9A8B7B}
    .today-readonly-note{font-size:11px;color:#756B61;font-weight:800;margin-top:10px;padding-left:58px}
    .priority-strip{background:#FFF1F0;border:1px solid #F2CCC6;border-left:8px solid #C94D3F;border-radius:24px;padding:16px 18px;box-shadow:0 14px 32px rgba(154,47,35,.07)}
    .priority-strip-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px;flex-wrap:wrap}
    .priority-strip-title{font-size:15px;font-weight:950;color:#9A2F23;letter-spacing:-.02em;display:flex;align-items:center;gap:8px}
    .priority-strip-title::before{content:'!';width:24px;height:24px;border-radius:999px;background:#C94D3F;color:#fff;display:grid;place-items:center;font-weight:950;font-size:14px}
    .priority-strip-sub{font-size:12px;color:#7D504B;font-weight:800;margin-top:3px}
    .priority-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px}
    .priority-item{background:#fff;border:1px solid #F0C7C0;border-radius:17px;padding:12px;display:flex;justify-content:space-between;gap:10px;align-items:flex-start}
    .priority-item-title{font-size:13px;font-weight:950;color:#241F1B;line-height:1.25}
    .priority-item-meta{font-size:11px;color:#7D504B;font-weight:800;margin-top:4px;line-height:1.35}
    .priority-item .badge{white-space:nowrap}
    @media(max-width:820px){.today-progress-top{flex-wrap:wrap}.today-progress-wrap{padding-left:0}.today-readonly-note{padding-left:0}.today-actions{margin-left:53px}.workflow-step-label{font-size:8.5px;max-width:42px}.workflow-dot{width:24px;height:24px}}
    .due-line{font-size:11px;color:#6B625A;font-weight:700;display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
    .detail-row{display:grid;grid-template-columns:120px 1fr;gap:12px;padding:8px 0;border-bottom:1px solid #F0E7DC;font-size:12px}
    .detail-row:last-child{border-bottom:0}
    .label{font-size:10px;text-transform:uppercase;letter-spacing:.09em;color:#756B61;font-weight:950;margin-bottom:6px;display:block}
    .empty{padding:40px 18px;text-align:center;color:#84786C;font-size:13px}
    /* UI Doctrine v2.5.1 — Kanban / Production Status Board */
    .kanban{display:grid;grid-template-columns:repeat(5,minmax(220px,1fr));grid-auto-flow:column;gap:var(--space-3);overflow-x:auto;padding-bottom:2px}
    .column{min-width:220px;display:flex;flex-direction:column;padding:var(--space-3);background:var(--surface-card);border:1px solid var(--border-subtle);border-radius:var(--shape-corner-xl)}
    .col-head{padding:0 0 10px;border-bottom:1px solid var(--border-subtle)}
    .col-title{margin:0;color:var(--text-strong);font-size:var(--fs-body);font-weight:650;line-height:var(--lh-body);letter-spacing:0}
    .col-count-inline{font-size:var(--fs-label);font-weight:var(--fw-label);color:inherit;opacity:.8}
    .col-body{display:flex;flex-direction:column;gap:var(--space-2)}
    .col-body .empty{margin-top:var(--space-4)}

    /* Swimlane color coding — full swimlane card tints (semantic tokens) */
    .column.col-order-in{background:var(--neutral-bg);border-color:var(--neutral-border)}
    .column.col-order-in .col-head{border-bottom-color:var(--neutral-border)}
    .column.col-order-in .col-title{color:var(--neutral-text)}
    .column.col-scheduled{background:var(--warning-bg);border-color:var(--warning-border)}
    .column.col-scheduled .col-head{border-bottom-color:var(--warning-border)}
    .column.col-scheduled .col-title{color:var(--warning-text)}
    .column.col-roasting{background:var(--color-primary-soft);border-color:var(--selection-fill)}
    .column.col-roasting .col-head{border-bottom-color:var(--selection-fill)}
    .column.col-roasting .col-title{color:var(--bb-primary-900)}
    .column.col-packing{background:var(--info-bg);border-color:var(--info-border)}
    .column.col-packing .col-head{border-bottom-color:var(--info-border)}
    .column.col-packing .col-title{color:var(--info-text)}
    .column.col-ready{background:var(--success-bg);border-color:var(--success-border)}
    .column.col-ready .col-head{border-bottom-color:var(--success-border)}
    .column.col-ready .col-title{color:var(--success-text)}

    /* Preserve stage identity with doctrine-style status chips on each record. */
    .mini-stage-chip{min-height:24px;display:inline-flex;align-items:center;justify-content:center;width:max-content;padding:4px 9px;border:1px solid var(--border-chip);border-radius:var(--shape-corner-md);font-size:var(--fs-label);font-weight:var(--fw-label);line-height:1;white-space:nowrap}
    .stage-order-in{background:var(--neutral-bg);border-color:var(--neutral-border);color:var(--neutral-text)}
    .stage-scheduled{background:var(--warning-bg);border-color:var(--warning-border);color:var(--warning-text)}
    .stage-roasting{background:var(--color-primary-soft);border-color:var(--selection-fill);color:var(--bb-primary-900)}
    .stage-packing{background:var(--info-bg);border-color:var(--info-border);color:var(--info-text)}
    .stage-ready{background:var(--success-bg);border-color:var(--success-border);color:var(--success-text)}

    /* Kanban records are divided content, not nested cards. */
    .mini-card,.status-mini-card{display:grid;gap:var(--space-2);padding:12px 0;background:transparent;border:0;border-radius:0}
    .mini-card+.mini-card{border-top:1px solid var(--border-subtle)}
    .status-mini-card{background:color-mix(in srgb,var(--surface-tonal) 55%,white);border:1px solid var(--border-soft);border-radius:var(--shape-corner-xl);box-shadow:none;padding:var(--space-3)}
    .status-mini-card.mini-order-in{background:color-mix(in srgb,var(--neutral-bg) 55%,white)}
    .status-mini-card.mini-scheduled{background:color-mix(in srgb,var(--warning-bg) 55%,white)}
    .status-mini-card.mini-roasting{background:color-mix(in srgb,var(--color-primary-soft) 55%,white)}
    .status-mini-card.mini-packing{background:color-mix(in srgb,var(--info-bg) 55%,white)}
    .status-mini-card.mini-ready{background:color-mix(in srgb,var(--success-bg) 55%,white)}
    .status-mini-card+.status-mini-card{border-top:1px solid var(--border-soft)}
    .status-mini-card:first-child{margin-top:var(--space-4)}
    .mini-title{margin:0;color:var(--text-strong);font-size:var(--fs-body);font-weight:var(--fw-label);line-height:var(--lh-heading);letter-spacing:-.01em}
    .mini-lines,.mini-subline,.mini-schedule-line{font-size:var(--fs-subheadline);font-weight:var(--fw-regular);line-height:var(--lh-body);color:var(--text-muted)}
    .mini-item-line{margin:0;color:var(--text);font-size:var(--fs-body);font-weight:var(--fw-regular);line-height:var(--lh-body)}
    .mini-actions{display:flex;flex-wrap:wrap;gap:var(--space-2);align-items:center;margin-top:var(--space-1)}
    .mini-actions .btn.primary{flex:1 1 auto}
    .mini-actions .mini-view-btn{flex:1 1 100%;margin-left:0}
    .mini-actions > :only-child{flex:1 1 100%;margin-left:0}
    .page-lead{margin:0 0 var(--space-3);color:var(--text-muted);font-size:var(--fs-lead);font-weight:var(--fw-regular);line-height:1.45}
    .table{width:100%;border-collapse:collapse;font-size:12px}
    .table th{text-align:left;font-size:10px;text-transform:uppercase;letter-spacing:.08em;color:#7A7067;border-bottom:1px solid var(--bb-line);padding:10px 8px}
    .table td{border-bottom:1px solid #F1E8DD;padding:11px 8px;vertical-align:top}
    .table tr:last-child td{border-bottom:0}
    .calendar{background:#fff;border:1px solid var(--bb-line);border-radius:22px;overflow:hidden}
    .cal-grid{display:grid;grid-template-columns:repeat(7,1fr);background:var(--bb-line);gap:1px}
    .cal-day-name{background:#F5EBDD;text-align:center;padding:9px 4px;font-size:10px;font-weight:950;color:#756B61;letter-spacing:.07em}
    .cal-cell{background:#fff;min-height:112px;padding:8px;position:relative}
    .cal-cell.muted{background:#F7F7F7}
    .cal-cell.muted .cal-date{color:#B8BDC6}
    .cal-date{font-size:11px;font-weight:950;margin-bottom:5px;color:#241F1B}
    .cal-date.today{color:var(--bb-orange)}
    .cal-pill{display:block;width:100%;border-radius:8px;padding:4px 6px;margin:3px 0;font-size:10px;font-weight:850;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:left}
    .cal-pill.cal-roast{background:#FFF1DC;color:#9A4B00;border:1px solid #F0DFC0}
    .cal-pill.cal-pickup{background:#E1EAFF;color:#175CD3;border:1px solid #C9D8F7}
    /* UI Doctrine v2.5.1 — Modals */
    .modal-backdrop{position:fixed;inset:0;z-index:var(--z-modal);display:none;align-items:center;justify-content:center;padding:18px;background:var(--scrim)}
    .modal-backdrop.show{display:flex;animation:backdrop-fade-in 200ms ease both}
    .modal-backdrop.closing{animation:backdrop-fade-out 200ms ease both}
    .modal-backdrop:has(.modal.confirm){align-items:center;justify-content:center}
    .modal{width:min(100%,560px);max-height:min(88dvh,820px);display:flex;flex-direction:column;overflow:hidden;border:0;border-radius:var(--shape-corner-2xl);background:var(--surface-page);color:var(--text);box-shadow:var(--elevation-modal);animation:modal-in 170ms ease both}
    .modal.confirm{max-width:460px;animation:confirm-in 180ms var(--motion-easing-decelerate) both}
    .modal.confirm .modal-close-btn .btn{background:transparent;border-color:transparent;color:var(--text-muted)}
    .modal.confirm .modal-close-btn .btn:hover{background:var(--surface-tonal);color:var(--text-strong);border-color:transparent}
    .modal.wide{width:min(100%,760px)}
    .modal.sheet.closing,.modal.closing{animation:modal-out 150ms ease both}
    .modal-head{position:relative;flex-shrink:0;padding:var(--space-4) var(--space-5) var(--space-2);border:0}
    .modal-title{margin:0;color:var(--text-strong);font-size:var(--fs-section-head);font-weight:var(--fw-heading);line-height:var(--lh-heading);letter-spacing:-.02em}
    .modal-body{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:var(--space-2) var(--space-5) var(--space-4)}
    .modal-actions{display:flex;flex-shrink:0;justify-content:flex-end;gap:var(--space-2);padding:var(--space-2) var(--space-5) var(--space-5)}
    .modal-actions .modal-archive{margin-right:auto}
    .modal-close-x{position:absolute;top:var(--space-4);right:var(--space-5);width:36px;height:36px;display:none;align-items:center;justify-content:center;border:0;border-radius:var(--shape-corner-pill);background:transparent;color:var(--text-muted);cursor:pointer;transition:background 140ms ease,color 140ms ease}
    .modal-close-x:hover{background:var(--surface-tonal);color:var(--text-strong)}
    .modal-close-x:active{background:var(--selection-bg);color:var(--text-strong);transform:scale(.94)}
    .modal-close-x svg{width:18px;height:18px;pointer-events:none}
    @media(min-width:920px){.modal:not(.confirm) .modal-head{padding-right:calc(var(--space-5) + 36px + var(--space-1))}.modal:not(.confirm) .modal-close-x{display:flex}.modal:not(.confirm) .modal-close-btn{display:none}}
    @media(max-width:919px){.modal-backdrop{align-items:flex-end;padding:0}.modal{width:100%;max-height:86dvh;border-radius:var(--shape-corner-2xl) var(--shape-corner-2xl) 0 0}.modal.sheet{animation:modal-slide-up var(--motion-duration-enter) var(--motion-easing-decelerate) both}.modal.confirm{max-width:380px;border-radius:var(--shape-corner-2xl)}.modal.sheet.closing{animation:modal-slide-down var(--motion-duration-exit) var(--motion-easing-accelerate) both}}
    @keyframes modal-in{from{opacity:0;transform:scale(.97)}to{opacity:1;transform:scale(1)}}@keyframes confirm-in{from{opacity:0;transform:scale(1.2)}to{opacity:1;transform:scale(1)}}@keyframes modal-out{from{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.97)}}@keyframes modal-slide-up{from{opacity:1;transform:translateY(100%)}to{opacity:1;transform:translateY(0)}}@keyframes modal-slide-down{from{opacity:1;transform:translateY(0)}to{opacity:1;transform:translateY(100%)}}@keyframes backdrop-fade-in{from{opacity:0}to{opacity:1}}@keyframes backdrop-fade-out{from{opacity:1}to{opacity:0}}
    @keyframes pageIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
    @keyframes access-item-in{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
    .wrap.app-page.active{animation:pageIn var(--motion-duration-page) var(--motion-easing-decelerate) both}
    @media (prefers-reduced-motion: reduce){*,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}}
    .form-grid{display:grid;grid-template-columns:1fr 1fr;gap:13px}
    .form-full{grid-column:1/-1}
    .form-section{grid-column:1/-1;background:#FFF9F1;border:1px solid #F1DFCB;border-radius:18px;padding:13px;margin-top:4px}
    .form-section-title{font-size:12px;font-weight:950;text-transform:uppercase;letter-spacing:.08em;color:#7A3E00;margin-bottom:12px}
    .product-line{display:grid;grid-template-columns:1.1fr .55fr .75fr 34px;gap:8px;align-items:center;margin-bottom:8px}
    .product-line-remove{display:grid;place-items:center;width:20px;height:20px;padding:0;border:0;background:transparent;color:var(--color-danger);font-size:20px;line-height:1;cursor:pointer;border-radius:var(--shape-corner-sm);transition:color .14s ease,background .14s ease}
    .product-line-remove:hover{color:var(--color-danger-hover);background:var(--color-danger-bg)}
    .toast{position:fixed;right:20px;bottom:20px;background:#000;color:#fff;border-radius:16px;padding:12px 14px;font-size:13px;font-weight:850;box-shadow:0 20px 50px rgba(0,0,0,.28);z-index:120;display:none}
    .toast.show{display:block;animation:toast 2.2s ease forwards}
    @keyframes toast{0%{opacity:0;transform:translateY(10px)}12%,88%{opacity:1;transform:translateY(0)}100%{opacity:0;transform:translateY(-8px)}}
    .split-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
    .stat-box{background:#FFF9F1;border:1px solid #F0E1CF;border-radius:19px;padding:14px}
    .stat-num{font-size:22px;font-weight:950;letter-spacing:-.045em}
    .stat-lbl{font-size:10px;text-transform:uppercase;letter-spacing:.08em;color:#766B60;font-weight:950;margin-top:4px}
    .hidden{display:none!important}
    @media(max-width:1100px){.grid-kpi{grid-template-columns:repeat(3,1fr)}}
  
    /* 5-stage workflow progress + board colors */
    .workflow-step.c-order-in .workflow-dot{border-color:#6B7280}
    .workflow-step.c-order-in.done .workflow-dot,.workflow-step.c-order-in.active .workflow-dot{background:#6B7280;border-color:#6B7280;color:#fff}
    .workflow-step.c-scheduled .workflow-dot{border-color:#B87400}
    .workflow-step.c-scheduled.done .workflow-dot,.workflow-step.c-scheduled.active .workflow-dot{background:#B87400;border-color:#B87400;color:#fff}
    .workflow-step.c-roasting .workflow-dot{border-color:#F67E0F}
    .workflow-step.c-roasting.done .workflow-dot,.workflow-step.c-roasting.active .workflow-dot{background:#F67E0F;border-color:#F67E0F;color:#fff}
    .workflow-step.c-packing .workflow-dot{border-color:#2563EB}
    .workflow-step.c-packing.done .workflow-dot,.workflow-step.c-packing.active .workflow-dot{background:#2563EB;border-color:#2563EB;color:#fff}
    .workflow-step.c-ready .workflow-dot{border-color:#2E9859}
    .workflow-step.c-ready.done .workflow-dot,.workflow-step.c-ready.active .workflow-dot{background:#2E9859;border-color:#2E9859;color:#fff}
    .workflow-step.c-dispatched .workflow-dot{border-color:#7D57B8}
    .workflow-step.c-dispatched.done .workflow-dot,.workflow-step.c-dispatched.active .workflow-dot{background:#7D57B8;border-color:#7D57B8;color:#fff}
    .workflow-segment{height:100%;border-radius:999px;transition:opacity .18s ease}
    .seg-order-in{background:#6B7280}.seg-scheduled{background:#B87400}.seg-roasting{background:#F67E0F}.seg-packing{background:#2563EB}.seg-ready{background:#2E9859}
    .workflow-step-label{max-width:110px!important}

  
    /* Dashboard workflow bar */
    .today-progress-wrap{padding-left:40px!important;padding-right:40px!important}
    .today-progress-wrap .workflow-progress{position:relative!important;width:100%!important;padding-top:7px!important}
    .today-progress-wrap .workflow-line{position:absolute!important;left:calc(100% / 12)!important;right:calc(100% / 12)!important;top:17px!important;height:3px!important;background:#E8DED2!important;border-radius:999px!important;overflow:hidden!important;display:flex!important}
    .today-progress-wrap .workflow-steps{display:grid!important;grid-template-columns:repeat(6,minmax(0,1fr))!important;position:relative!important;z-index:1!important;align-items:start!important}
    .today-progress-wrap .workflow-step{display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:flex-start!important;gap:5px!important;min-width:0!important;text-align:center!important}
    .today-progress-wrap .workflow-dot{width:26px!important;height:26px!important;min-width:26px!important;min-height:26px!important;border-radius:50%!important;font-size:10px!important}
    .today-progress-wrap .workflow-step-label{display:block!important;width:100%!important;max-width:64px!important;min-height:12px!important;font-size:9px!important;line-height:1!important;text-align:center!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}
    @media(max-width:820px){
      .today-progress-wrap{padding-left:0!important;padding-right:0!important}
      .today-progress-wrap .workflow-line{top:16px!important;height:3px!important}
      .today-progress-wrap .workflow-dot{width:24px!important;height:24px!important;min-width:24px!important;min-height:24px!important;font-size:9px!important}
      .today-progress-wrap .workflow-step-label{font-size:7.8px!important;max-width:44px!important}
    }

  
    /* Payment receipt requirement before Done */
    .receipt-status{display:inline-flex;align-items:center;gap:6px;border-radius:999px;padding:5px 9px;font-size:10px;font-weight:950}
    .receipt-ok{background:#E7F7EC;color:#1C7A46}
    .receipt-missing{background:#FFF1F0;color:#9A2F23}
    .receipt-box{background:#FFF9F1;border:1px solid #F0E1CF;border-radius:16px;padding:12px;margin-top:10px}
    .receipt-preview{display:flex;align-items:center;justify-content:space-between;gap:10px;border:1px solid #E7D8C6;background:#fff;border-radius:13px;padding:9px 10px;font-size:12px;font-weight:800;color:#4D4239}
    .receipt-preview a{text-decoration:none}
    .receipt-help{font-size:11px;color:#756B61;font-weight:750;line-height:1.4;margin-top:6px}

  

    .dashboard-kpi-grid{grid-template-columns:repeat(4,minmax(0,1fr))!important}
    @media(max-width:820px){.dashboard-kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}}

  
    .orders-filter-row{display:grid!important;grid-template-columns:minmax(260px,1fr) minmax(150px,190px) minmax(170px,210px)!important;gap:10px!important;width:100%!important}
    .orders-filter-row .search{width:100%!important;min-width:0!important}
    .quick-filter-row{margin-top:10px}
    .toolbar .quick-filter-row{width:100%}
    .quick-filter-row .export-csv-btn{margin-left:auto}
    .search-field{position:relative;display:flex;align-items:center;min-width:0;width:100%}
    .search-field .input{padding-right:38px}
    .search-clear{position:absolute;right:6px;top:50%;transform:translateY(-50%);width:24px;height:24px;display:inline-flex;align-items:center;justify-content:center;border:0;border-radius:50%;background:transparent;color:var(--text-muted);padding:0;cursor:pointer;z-index:1}
    .search-clear:hover{background:var(--surface-tonal);color:var(--text-strong)}
    .search-clear:focus-visible{outline:2px solid var(--focus-ring);outline-offset:1px}
    .search-clear svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
    .search-clear[hidden]{display:none}
    @media(max-width:820px){.orders-filter-row{grid-template-columns:1fr!important}.quick-filter-row{margin-top:8px}}

  
    .kpi.kpi-ready{background:transparent!important;border-color:transparent!important}
    .product-line{grid-template-columns:1.15fr .45fr .42fr .75fr 38px!important}
    @media(max-width:820px){
      .product-line{grid-template-columns:minmax(0,1fr) minmax(72px,.55fr) minmax(82px,.55fr) 38px!important}
      .product-line .p_unit{min-width:82px}
      .product-line .grind{grid-column:1/4}
    }

  
    .roaster-control-note{background:#FFF9F1;border:1px solid #F0E1CF;border-radius:18px;padding:13px 14px;margin-bottom:13px;font-size:12px;color:#5F5147;font-weight:750;line-height:1.45}
    .roaster-control-note b{color:#111}

  
    .roasting-status-note{background:#FFF9F1;border:1px solid #F0E1CF;border-radius:18px;padding:13px 14px;margin-bottom:13px;font-size:12px;color:#5F5147;font-weight:750;line-height:1.45}
    .roasting-status-note b{color:#111}

  
    /* Invoice upload record */
    .invoice-box{background:#F7FBFF;border:1px solid #D8E6F7;border-radius:16px;padding:12px;margin-top:10px}
    .invoice-preview{display:flex;align-items:center;justify-content:space-between;gap:10px;border:1px solid #D5E3F3;background:#fff;border-radius:13px;padding:9px 10px;font-size:12px;font-weight:800;color:#35495E}
    .invoice-preview a{text-decoration:none}
    .invoice-help{font-size:11px;color:#5F6F82;font-weight:750;line-height:1.4;margin-top:6px}
    .invoice-status{display:inline-flex;align-items:center;gap:6px;border-radius:999px;padding:5px 9px;font-size:10px;font-weight:950;background:#EEF5FF;color:#2059A8}

  
    .sync-pill{display:inline-flex;flex-direction:column;align-items:flex-end;gap:1px;border-radius:var(--radius-pill);padding:6px 12px;font-size:12px;font-weight:900;color:#5D5147;box-shadow:none;text-align:right}
    .sync-pill .sync-label{display:block;font-size:10px;font-weight:var(--fw-label);letter-spacing:.04em;text-transform:uppercase;color:var(--text-soft);line-height:1.2}
    .sync-pill .sync-time{display:block;font-size:var(--fs-subheadline);font-weight:var(--fw-heading);color:var(--text-muted);line-height:1.2}
    .user-pill{display:inline-flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--bb-line);border-radius:14px;padding:8px 11px;min-height:40px;color:#2B221B;font-size:12px;font-weight:900;max-width:190px;box-shadow:none;transition:.16s ease}
    .user-pill:hover{transform:translateY(-1px);box-shadow:var(--shadow-sm);border-color:#E0C8AF}
    .user-pill:focus-visible{outline:3px solid rgba(246,126,15,.22);outline-offset:2px}
    .user-avatar{width:22px;height:22px;border-radius:999px;background:#000;color:#fff;display:grid;place-items:center;font-size:10px;font-weight:950;flex:0 0 auto}
    .user-pill-text{min-width:0;text-align:left;line-height:1.1}
    .user-pill-name{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:130px}
    .user-pill-role{display:block;font-size:10px;color:#786C61;font-weight:850;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:130px}
    .mobile-user-pill{display:inline-flex;align-items:center;gap:7px;background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.18);border-radius:13px;color:#fff;padding:7px 9px;font-size:11px;font-weight:900;max-width:150px;transition:.16s ease}
    .mobile-user-pill:hover{background:rgba(255,255,255,.18);transform:translateY(-1px)}
    .mobile-user-pill .user-avatar{background:#F67E0F;color:#000;width:21px;height:21px}
    .mobile-user-pill span:last-child{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:92px;text-align:left}
    .btn.logout{background:#B42318;border-color:#B42318;color:#fff}
    .owner-only-note{background:#FFF9F1;border:1px solid #F0E1CF;border-radius:16px;padding:12px;font-size:12px;color:#5F5147;font-weight:750;line-height:1.45}

  
    /* PIN login gate */

  

    /* =========================================================
       Bean Block UI System v2.2.5 Controlled Refactor Layer
       Scope: visual/UI-only. Business logic and API payloads unchanged.
       Mode: Operational Light Surface for OMS workflows; Premium Dark Shell for PIN/login. Structure and logic preserved.
       ========================================================= */
    :root{
      /* Official Bean Block Brand Colors */
      --bb-primary:#F67E0F;
      --bb-coffee:#784C1D;
      --bb-cream:#FFE5CD;
      --bb-off-white:#FFF7ED;

      /* Visual identity expansion */
      --bb-ink:#111721;
      --bb-ink-soft:#181E29;
      --bb-espresso:#3A1F12;
      --bb-copper:#A35C31;
      --bb-orange-deep:#C96A1D;
      --bb-cream-text:#F7E6D6;

      /* Orange scale */
      --bb-primary-900:#662C00;
      --bb-primary-800:#8A3D00;
      --bb-primary-700:#B95604;
      --bb-primary-600:#DB6908;
      --bb-primary-500:#F67E0F;
      --bb-primary-400:#FF9A38;
      --bb-primary-300:#FFB36B;
      --bb-primary-200:#FFD1A3;
      --bb-primary-100:#FFE7CF;
      --bb-primary-50:#FFF3E8;

      /* Coffee scale */
      --bb-coffee-950:#2C1607;
      --bb-coffee-900:#3F210C;
      --bb-coffee-800:#573415;
      --bb-coffee-700:#784C1D;
      --bb-coffee-600:#936229;
      --bb-coffee-500:#AF7C3A;
      --bb-coffee-400:#C99B61;
      --bb-coffee-300:#DEBC8C;
      --bb-coffee-200:#EED7B8;
      --bb-coffee-100:#F8ECDD;
      --bb-coffee-50:#FCF5EE;

      /* Warm surfaces */
      --bb-cream-500:#FFE5CD;
      --bb-cream-300:#FFF0DF;
      --bb-cream-200:#FFF4E8;
      --bb-cream-100:#FFF7ED;
      --bb-cream-50:#FFFBF7;

      --color-bg:#FFF7ED;
      --color-bg-soft:#FFF4E8;
      --color-surface:#FFFBF7;
      --color-surface-container:#FFF0DF;
      --color-surface-container-high:#FFE7CF;
      --color-surface-strong:#FFE5CD;
      --color-bg-dark:#111721;
      --color-bg-dark-soft:#181E29;
      --color-surface-dark:#151C27;
      --color-on-dark:#F7E6D6;
      --color-on-dark-muted:#EED7B8;

      /* Action, navigation, text */
      --color-primary:#F67E0F;
      --color-primary-hover:#DB6908;
      --color-primary-pressed:#B95604;
      --color-primary-soft:#FFE7CF;
      --color-on-primary:#FFFFFF;
      --color-nav:#784C1D;
      --color-nav-dark:#3F210C;
      --color-nav-premium:#111721;
      --color-nav-hover:#936229;
      --color-on-nav:#FFF7ED;
      --color-on-nav-muted:#F8ECDD;
      --color-text:#2C1607;
      --color-text-strong:#1F0F04;
      --color-text-muted:#7A5A3A;
      --color-text-soft:#9A7A5A;
      --color-text-inverse:#FFF7ED;
      --color-border:#EED7B8;
      --color-border-strong:#DEBC8C;
      --color-divider:rgba(120,76,29,.16);
      --color-focus:#F67E0F;
      --color-focus-ring:rgba(246,126,15,.28);

      /* Status */
      --color-success:#1F7A4D;
      --color-success-hover:#16613C;
      --color-success-bg:#E7F5EC;
      --color-success-border:#B7DEC6;
      --color-on-success-bg:#0E3D25;
      --color-warning:#B7791F;
      --color-warning-hover:#945F16;
      --color-warning-bg:#FFF3D6;
      --color-warning-border:#F3D28A;
      --color-on-warning-bg:#5F3B00;
      --color-danger:#B42318;
      --color-danger-hover:#921B13;
      --color-danger-bg:#FDE8E5;
      --color-danger-border:#F5B8B1;
      --color-on-danger-bg:#65120C;
      --color-info:#2563EB;
      --color-info-hover:#1D4ED8;
      --color-info-bg:#E7EFFF;
      --color-info-border:#B8CCFF;
      --color-on-info-bg:#153E96;
      --color-neutral:#6B5B50;
      --color-neutral-bg:#EFE5DA;
      --color-neutral-border:#D8C7B7;
      --color-on-neutral-bg:#3A2A20;

      /* UI Doctrine v2.5.2 — default Bean Block color and surface roles */
      --color-ink:#111721;--color-ink-soft:#181E29;--color-coffee:#784C1D;--color-coffee-dark:#3F210C;--color-cream:#FFE5CD;
      --surface-page:#FFFAF4;--surface-main:#FFFFFF;--surface-card:#FFF1E4;--surface-tonal:#FADEBC;--surface-nested:#F0E0CE;--surface-list:#FFFFFF;--surface-input:#FFFFFF;--surface-dark:#111721;
      --text-strong:#1F0F04;--text:#2C1607;--text-muted:#7A5A3A;--text-soft:#86684A;--text-inverse:#FFF7ED;--text-tonal:#662C00;
      --border-strong:#9A7A5A;--border:#EED7B8;--border-soft:rgba(120,76,29,.50);--border-chip:rgba(120,76,29,.10);--border-subtle:rgba(120,76,29,.11);--divider:rgba(120,76,29,.13);--focus-ring:rgba(246,126,15,.28);--state-layer-inverse-hover:rgba(255,255,255,.06);
      --success-bg:#E7F5EC;--success-border:#B7DEC6;--success-text:#0E3D25;
      --warning-bg:#FFF3D6;--warning-border:#F3D28A;--warning-text:#5F3B00;
      --danger-bg:#FDE8E5;--danger-border:#F5B8B1;--danger-text:#65120C;
      --info-bg:#E7EFFF;--info-border:#B8CCFF;--info-text:#153E96;
      --neutral-bg:#EFE5DA;--neutral-border:#D8C7B7;--neutral-text:#3A2A20;
      --selection-bg:#FAECDD;--selection-fill:#FECC85;--selection-text:#3F210C;
      /* Legacy component aliases map to doctrine roles. */
      --color-bg:var(--surface-page);--color-bg-soft:var(--surface-tonal);--color-surface:var(--surface-card);--color-surface-container:var(--surface-tonal);--color-surface-container-high:var(--surface-nested);--color-surface-strong:var(--color-cream);--color-bg-dark:var(--surface-dark);--color-bg-dark-soft:var(--color-ink-soft);--color-surface-dark:var(--surface-dark);
      --color-on-dark:var(--text-inverse);--color-on-dark-muted:var(--border);--color-text:var(--text);--color-text-strong:var(--text-strong);--color-text-muted:var(--text-muted);--color-text-soft:var(--text-soft);--color-text-inverse:var(--text-inverse);
      --color-border:var(--border);--color-border-strong:var(--border-strong);--color-divider:var(--divider);--color-focus-ring:var(--focus-ring);
      --color-success-bg:var(--success-bg);--color-success-border:var(--success-border);--color-on-success-bg:var(--success-text);--color-warning-bg:var(--warning-bg);--color-warning-border:var(--warning-border);--color-on-warning-bg:var(--warning-text);--color-danger-bg:var(--danger-bg);--color-danger-border:var(--danger-border);--color-on-danger-bg:var(--danger-text);--color-info-bg:var(--info-bg);--color-info-border:var(--info-border);--color-on-info-bg:var(--info-text);--color-neutral-bg:var(--neutral-bg);--color-neutral-border:var(--neutral-border);--color-on-neutral-bg:var(--neutral-text);

      /* Spacing, shape, elevation, typography */
      --bb-density:-1;
      --space-1:4px;--space-2:calc(8px + var(--bb-density) * 2px);--space-3:calc(12px + var(--bb-density) * 2px);--space-4:calc(16px + var(--bb-density) * 4px);--space-5:calc(24px + var(--bb-density) * 4px);--space-6:calc(24px + var(--bb-density) * 4px);--space-8:36px;
      --shape-corner-sm:4px;--shape-corner-md:6px;--shape-corner-lg:8px;--shape-corner-xl:16px;--shape-corner-2xl:16px;--shape-corner-pill:999px;
      --radius-sm:var(--shape-corner-sm);--radius-md:var(--shape-corner-md);--radius-lg:var(--shape-corner-lg);--radius-xl:var(--shape-corner-xl);--radius-xxl:var(--shape-corner-2xl);--radius-pill:var(--shape-corner-pill);
      --radius-nested:max(4px,calc(var(--shape-corner-xl) - 6px));--radius-nested-deep:max(4px,calc(var(--radius-nested) - 6px));
      --elevation-main:0 10px 28px rgba(120,76,29,.10);--elevation-card:0px 1px 2px rgba(0,0,0,.3),0px 2px 6px 2px rgba(0,0,0,.15);--elevation-shell:0 14px 36px rgba(17,23,33,.16);--elevation-modal:0 26px 70px rgba(17,23,33,.28);--elevation-access:0 28px 80px rgba(0,0,0,.30);--motion-easing-decelerate:cubic-bezier(.05,.7,.1,1);--motion-duration-page:300ms;--motion-duration-enter:400ms;--motion-duration-exit:220ms;--touch-target-min:48px;--z-nav:9200;--z-modal:10000;--scrim:rgba(17,23,33,.62);
      --shadow-sm:var(--elevation-card);--shadow-md:var(--elevation-main);--shadow-lg:var(--elevation-modal);
      /* UI Doctrine v2.5.1 — system type, scale, rhythm, and hierarchy */
      --font-body:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
      --font-brand:var(--font-body);
      --font-heading:var(--font-body);
      --fw-regular:400;--fw-medium:500;--fw-label:650;--fw-heading:700;--fw-display:800;
      --lh-display:1.1;--lh-heading:1.25;--lh-section:1.2;--lh-body:1.5;--lh-control:1.4;
      --fs-display:2.5rem;--fs-stat:2.5rem;--fs-page-title:2rem;--fs-lead:1.125rem;
      --fs-section-head:1.5rem;--fs-card-title:1.25rem;--fs-body:.9375rem;--fs-subheadline:.875rem;--fs-label:.75rem;--fs-btn:var(--fs-body);
      /* Legacy aliases retained for existing selectors. */
      --fs-section-title:var(--fs-section-head);--fs-helper:var(--fs-subheadline);--fs-chip:var(--fs-label);--fs-metric:var(--fs-stat);--fs-input:1rem;

      /* v2.2.5 density and strict mobile bottom-nav tokens */
      --control-height:calc(40px + var(--bb-density) * 4px);
      --control-height-desktop:var(--control-height);
      --control-height-mobile:48px;
      --filter-chip-visual-height:calc(32px + var(--bb-density) * 4px);
      --card-padding-desktop:18px;
      --card-padding-desktop:18px;
      --card-padding-mobile:14px;
      --page-padding-desktop:24px;
      --page-padding-mobile:14px;
      --section-gap-desktop:16px;
      --section-gap-mobile:14px;
      --mobile-nav-height:64px;
      --tablet-nav-height:64px;
      --mobile-header-height:62px;
      --mobile-nav-clearance:calc(var(--mobile-nav-height) + env(safe-area-inset-bottom) + 72px);
      --tablet-nav-clearance:calc(var(--tablet-nav-height) + env(safe-area-inset-bottom) + 72px);
      --bottom-nav-surface:var(--surface-dark);
      --bottom-nav-active:var(--color-primary);
      --bottom-nav-text:rgba(255,247,237,.72);
      --bottom-nav-active-text:#FFFFFF;

      /* Compatibility aliases used by legacy v6 code */
      --bb-black:var(--bb-ink);
      --bb-orange:var(--color-primary);
      --bb-orange-dark:var(--color-primary-hover);
      --bb-card:var(--color-surface);
      --bb-line:var(--color-border);
      --bb-muted:var(--color-text-muted);
      --bb-soft:var(--color-bg-soft);
      --bb-text:var(--color-text);
      --bb-red:var(--color-danger);
      --bb-green:var(--color-success);
      --bb-blue:var(--color-info);
      --bb-brown:var(--bb-coffee-700);
      --shadow:var(--shadow-md);
    }

    [data-density="compact"]{--bb-density:-1}
    [data-density="spacious"]{--bb-density:1}

    @media(max-width:919px){
      :root{--shape-corner-sm:8px;--shape-corner-md:10px;--shape-corner-lg:14px;--shape-corner-xl:20px;--shape-corner-2xl:28px;--radius-nested:max(4px,calc(var(--shape-corner-xl) - 6px));--radius-nested-deep:max(4px,calc(var(--radius-nested) - 6px))}
    }

    html{font-size:100%}
    html,body,#app{background:var(--color-bg);color:var(--color-text);font-family:var(--font-body)}
    body{font-size:var(--fs-body);font-weight:var(--fw-regular);line-height:var(--lh-body);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}
    body.overlay-locked{position:fixed;width:100%;left:0;right:0;overflow:hidden;overscroll-behavior:none;touch-action:none}
    body,input,select,textarea,button{font-family:var(--font-body)}
    :focus-visible{outline:3px solid var(--color-focus-ring);outline-offset:2px}

    /* UI Doctrine v2.5.1 — OMS access shell */
    html.bb-auth-active,body.bb-auth-active,html.bb-auth-active #app,body.bb-auth-active #app{min-height:100%;background:var(--surface-dark)!important}
    body.bb-auth-active{margin:0;overflow-x:hidden}
    .access-shell{position:relative;isolation:isolate;display:grid;min-height:100dvh;overflow:hidden;background:var(--surface-dark);color:var(--text-inverse)}
    .access-wave{position:absolute;inset-inline:0;z-index:-1;width:100%;pointer-events:none;user-select:none}
    .access-wave--top{top:0;height:clamp(116px,14vw,204px)}.access-wave--bottom{bottom:0;height:clamp(176px,22vw,296px)}.access-wave svg{width:100%;height:100%}.access-wave path{stroke:none}.access-wave-primary{fill:var(--color-primary)}.access-wave-secondary{fill:var(--color-coffee)}
    .access-main{display:grid;place-items:center;min-height:100%;padding:max(32px,env(safe-area-inset-top)) 24px max(32px,env(safe-area-inset-bottom))}
    .access-stack{--access-stack-offset:clamp(-24px,-2vh,-8px);width:min(100%,344px);display:grid;justify-items:center;text-align:center;transform:translateY(var(--access-stack-offset))}
    .access-stack-in>*{animation:access-item-in var(--motion-duration-page) var(--motion-easing-decelerate) both}
    .access-logo-img{width:40px;height:48px;margin-bottom:var(--space-3)}.access-brand{margin:0;color:var(--color-primary);font-size:var(--fs-card-title);font-weight:800;line-height:1;letter-spacing:-.04em}.access-title{max-width:10ch;margin:7px 0 0;color:var(--text-inverse);font-size:clamp(2.25rem,7.2vw,var(--fs-display));font-weight:800;line-height:.9;letter-spacing:-.055em}
    .access-form{width:min(100%,320px);display:grid;gap:8px;margin-top:var(--space-4)}
    .access-message{min-height:20px;margin:0;color:var(--danger-border);font-size:var(--fs-subheadline);font-weight:650;line-height:1.4}.access-message:empty{display:none}
    .access-status{min-height:20px;display:flex;align-items:center;justify-content:center;gap:8px;color:var(--text-inverse);font-size:var(--fs-subheadline);font-weight:650;line-height:1.4}.access-spinner{width:16px;height:16px;border:2px solid currentColor;border-top-color:transparent;border-radius:50%;animation:spin 700ms linear infinite}
    .access-submit{width:320px;max-width:100%;min-height:56px;border:0;border-radius:var(--shape-corner-pill);background:var(--color-primary);color:var(--color-ink);padding:0 14px;font-size:1rem;font-weight:800;letter-spacing:-.015em;cursor:pointer;transition:transform 140ms var(--motion-easing-decelerate),background 140ms var(--motion-easing-decelerate),opacity 140ms var(--motion-easing-decelerate)}.access-submit:hover:not(:disabled){background:var(--color-primary-hover)}.access-submit:active:not(:disabled){transform:translateY(1px)}.access-submit:disabled{opacity:.48;cursor:not-allowed}.access-submit-content{display:inline-flex;align-items:center;justify-content:center;gap:8px;white-space:nowrap}
    .access-back{justify-self:center;min-height:var(--touch-target-min,48px);border:0;border-radius:var(--shape-corner-pill);background:transparent;color:var(--text-inverse);padding:0 13px;font-size:var(--fs-subheadline);font-weight:700;cursor:pointer;transition:color 140ms var(--motion-easing-decelerate),background 140ms var(--motion-easing-decelerate)}.access-back:hover{color:var(--color-on-primary);background:var(--state-layer-inverse-hover)}
    .access-version{position:absolute;z-index:1;left:max(20px,env(safe-area-inset-left));bottom:max(18px,env(safe-area-inset-bottom));margin:0;color:var(--surface-dark);font-size:var(--fs-label);font-weight:800;letter-spacing:.02em;pointer-events:none;user-select:none}
    .access-toast{position:absolute;z-index:2;top:max(16px,env(safe-area-inset-top));left:50%;width:min(calc(100% - 32px),400px);display:grid;grid-template-columns:24px minmax(0,1fr);align-items:center;gap:10px;padding:12px 14px;border:1px solid rgba(255,255,255,.14);border-radius:var(--shape-corner-lg);background:var(--color-ink-soft);color:var(--text-inverse);box-shadow:var(--elevation-access);opacity:0;pointer-events:none;transform:translate(-50%,calc(-100% - 12px));transition:opacity 180ms var(--motion-easing-decelerate),transform 220ms var(--motion-easing-decelerate)}.access-toast.is-visible{opacity:1;pointer-events:auto;transform:translate(-50%,0)}.access-toast-icon{width:24px;height:24px;display:grid;place-items:center;border-radius:50%;background:rgba(245,184,177,.20);color:var(--danger-border);font-size:var(--fs-subheadline);font-weight:800}.access-toast.is-success .access-toast-icon{background:rgba(246,126,15,.22);color:var(--color-primary)}.access-toast-message{font-size:var(--fs-subheadline);font-weight:650;line-height:1.35}
    @media(max-width:919px){.access-main{padding-inline:16px}.access-stack{--access-stack-offset:-13px}.access-logo-img{width:40px;height:48px}.access-title{font-size:clamp(2.25rem,12vw,var(--fs-display))}.access-form{width:min(100%,320px)}.access-version{left:max(16px,env(safe-area-inset-left));bottom:max(14px,env(safe-area-inset-bottom))}.access-toast{top:max(12px,env(safe-area-inset-top));width:min(calc(100% - 24px),400px)}}

        /* Operational light surface shell */
    .shell{background:var(--color-bg)}
    .sidebar{width:230px;background:var(--surface-dark);color:var(--text-inverse);padding:20px 12px;gap:18px}
    .sidebar .brand{min-height:auto;padding:4px;margin-bottom:18px;border-bottom:none;color:var(--text-inverse)}
    .sidebar .mark{width:36px;height:36px;background:transparent;border:0;border-radius:0}
    .sidebar .mark img{padding:0}
    .sidebar .brand-title{font-family:var(--font-heading);font-weight:800;font-size:1rem;letter-spacing:.01em;color:var(--text-inverse);line-height:.95}
    .sidebar .brand-sub{font-size:11px;color:rgba(255,247,237,.55);opacity:1;font-weight:500}
    .sidebar .nav-label{font-size:12px;text-transform:none;letter-spacing:.03em;color:rgba(255,247,237,.55);font-weight:650}
    .sidebar .nav{gap:4px}
    .sidebar .nav-btn{display:grid;grid-template-columns:20px minmax(0,1fr);min-height:36px;border-radius:var(--shape-corner-pill);padding:6px 12px;gap:10px;color:rgba(255,247,237,.72);font-size:var(--fs-body);font-weight:650}
    .sidebar .nav-btn:hover{background:rgba(255,255,255,.06);color:var(--text-inverse)}
    .sidebar .nav-btn.active{background:var(--color-primary);color:var(--color-on-primary);box-shadow:none}
    .sidebar .nav-ico{width:20px;flex:0 0 20px}
    .sidebar .nav-ico svg{stroke-width:2.15}
    .sidebar .hub{min-height:36px;border-radius:var(--shape-corner-pill);background:transparent;color:rgba(255,247,237,.72);border:1px solid rgba(255,247,237,.12);font-weight:650;font-size:var(--fs-body);padding:6px 12px;display:grid;grid-template-columns:20px minmax(0,1fr);align-items:center;gap:10px;text-align:left}
    .sidebar .hub:hover{background:rgba(255,255,255,.06);box-shadow:none;transform:none;color:var(--text-inverse)}
    .sidebar .hub-ico{width:20px;height:20px;display:grid;place-items:center;flex:0 0 auto}
    .sidebar .hub-ico svg{display:block}
    .main{margin-left:230px;width:calc(100% - 230px);background:var(--color-bg)}
    .title{font-family:var(--font-heading);font-size:var(--fs-page-title);font-weight:800;color:var(--color-text);letter-spacing:-.025em}
    .subtitle{font-size:14px;color:var(--color-text-muted)}
    .wrap{max-width:1180px;padding:0 28px 56px}
    .content{background:var(--color-bg)}

    /* Cards, panels, and record surfaces */
    .panel,.kpi,.order-card,.today-progress-card,.stat-box,.calendar,.account-card,.priority-item{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-xl);box-shadow:var(--shadow-sm);color:var(--color-text)}
    .panel{overflow:hidden}
    .kpi{min-height:118px;padding:20px}
    .kpi-label{font-size:12px;color:var(--color-text-muted);font-weight:800;letter-spacing:.04em}
    .kpi-value,.stat-num{font-family:var(--font-body);font-size:clamp(30px,4vw,40px);font-weight:900;color:var(--color-text);letter-spacing:-.03em}
    .stat-lbl{color:var(--color-text-muted)}
    .order-card:hover{transform:none;box-shadow:none}
    .order-name,.today-title{color:var(--color-text);font-weight:850}
    .order-items,.mini-lines,.due-line,.today-meta-line,.today-readonly-note{color:var(--color-text-muted)}
    .mono{color:var(--color-text-soft)}

    /* Forms and inputs */
    label,.label{display:block;margin-bottom:6px;color:var(--color-text);font-size:13px;font-weight:750;text-transform:none;letter-spacing:0}
    .input,.select,.textarea,input[type='text'],input[type='email'],input[type='number'],input[type='date'],input[type='time'],input[type='tel'],select,textarea{min-height:var(--control-height);border:1px solid var(--color-border);border-radius:var(--radius-md);background:#fff;color:var(--color-text);padding:10px 12px;font:400 1rem/var(--lh-control) var(--font-body);box-sizing:border-box}
    .textarea,textarea{min-height:120px;resize:vertical}
    .input:focus,.select:focus,.textarea:focus,input:focus,select:focus,textarea:focus{border-color:var(--color-focus);box-shadow:0 0 0 3px var(--color-focus-ring);outline:none}
    .form-section,.receipt-box,.invoice-box,.roaster-control-note,.roasting-status-note{background:var(--color-surface-container);border:1px solid var(--color-border);border-radius:var(--radius-lg);color:var(--color-text)}
    .form-section-title{font-size:12px;color:var(--bb-coffee-700);font-weight:850;letter-spacing:.07em}
    .receipt-help,.invoice-help,.helper-text{color:var(--color-text-muted);font-size:12px;line-height:1.45}
    .receipt-preview,.invoice-preview{background:var(--color-surface);border-color:var(--color-border);border-radius:var(--radius-md);color:var(--color-text)}

    /* Chips, badges, and statuses: text + semantic color */
    .badge,.receipt-status,.invoice-status{display:inline-flex;align-items:center;gap:6px;border-radius:var(--radius-pill);font-size:12px;font-weight:800;border:1px solid var(--color-border);white-space:nowrap}
    .badge,.receipt-status,.invoice-status{padding:5px 10px}
    .b-green,.receipt-ok{background:var(--color-success-bg);color:var(--color-on-success-bg);border-color:var(--color-success-border)}
    .b-orange,.b-brown,.receipt-missing{background:var(--color-warning-bg);color:var(--color-on-warning-bg);border-color:var(--color-warning-border)}
    .b-red{background:var(--color-danger-bg);color:var(--color-on-danger-bg);border-color:var(--color-danger-border)}
    .b-blue,.invoice-status{background:var(--color-info-bg);color:var(--color-on-info-bg);border-color:var(--color-info-border)}
    .b-purple,.b-gray{background:var(--color-neutral-bg);color:var(--color-on-neutral-bg);border-color:var(--color-neutral-border)}
    .sync-pill{color:var(--text-muted);font-size:var(--fs-subheadline);font-weight:var(--fw-heading);line-height:var(--lh-control)}

    /* Kanban / status board */
    .mini-actions,.order-actions,.card-actions{display:flex;flex-wrap:wrap;gap:8px}.order-actions .btn,.card-actions .btn{flex:1 1 auto;min-width:120px;white-space:normal}

    /* Workflow progress */
    .workflow-line{background:var(--color-border)!important}.workflow-line-fill{background:var(--color-primary)!important}.workflow-dot{background:var(--color-surface-container);border-color:var(--color-border-strong);color:var(--color-text-muted)}
    .workflow-step.done .workflow-dot{background:var(--color-primary);border-color:var(--color-primary);color:var(--color-on-primary)}
    .workflow-step.active .workflow-dot{background:#fff;border-color:var(--color-primary);color:var(--color-primary);box-shadow:0 0 0 5px rgba(246,126,15,.14)}
    .seg-order-in{background:var(--color-neutral)}.seg-scheduled{background:var(--color-warning)}.seg-roasting{background:var(--color-primary)}.seg-packing{background:var(--color-info)}.seg-ready{background:var(--color-success)}

    /* Tables and calendar */
    .table th{color:var(--color-text-muted);border-bottom:1px solid var(--color-border)}
    .table td{border-bottom:1px solid var(--color-divider);color:var(--color-text)}
    .cal-grid{background:var(--color-border)}
    .cal-day-name{background:var(--color-surface-container);color:var(--color-text-muted)}
    .cal-cell{background:var(--color-surface)}
    .cal-cell.muted{background:var(--surface-page)}
    .cal-cell.muted .cal-date{color:var(--color-text-soft)}
    .cal-date{color:var(--color-text)}
    .cal-date.today{display:inline-grid;place-items:center;min-width:26px;height:26px;border-radius:50%;background:var(--color-primary);color:var(--color-on-primary);font-weight:800}
    .cal-pill.cal-roast{background:var(--color-warning-bg);color:var(--color-on-warning-bg);border:1px solid var(--color-warning-border)}
    .cal-pill.cal-pickup{background:var(--color-info-bg);color:var(--color-on-info-bg);border:1px solid var(--color-info-border)}

    .settings-stack{display:grid;gap:var(--space-4)}
    .settings-hero{display:grid;gap:var(--space-1)}
    .settings-title{font-size:var(--fs-display);font-weight:var(--fw-display);line-height:var(--lh-display);letter-spacing:-.04em;color:var(--text-strong)}
    .settings-sub{margin:0;font-size:var(--fs-subheadline);font-weight:var(--fw-regular);line-height:var(--lh-body);color:var(--text-muted)}
    .settings-actions{display:flex;flex-wrap:wrap;gap:var(--space-2)}
    .settings-actions svg{flex:0 0 auto}
    .settings-section{display:grid;gap:var(--space-2)}
    .settings-section-title{margin:0;font-size:var(--fs-label);font-weight:var(--fw-heading);letter-spacing:.1em;text-transform:uppercase;color:var(--text-muted)}
    .settings-row-btn{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);width:100%;min-height:56px;padding:10px 14px;border:1px solid var(--border-soft);border-radius:var(--shape-corner-lg);background:var(--surface-card);color:var(--text-strong);text-align:left;cursor:pointer;transition:background 140ms ease,border-color 140ms ease}
    .settings-row-btn:hover{background:var(--surface-tonal)}
    .settings-row-btn:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}
    .settings-row-text{display:grid;gap:2px;min-width:0}
    .settings-row-text b{font-size:var(--fs-body)}
    .settings-row-text small{font-size:var(--fs-label);color:var(--text-muted)}
    .settings-row-arrow{width:18px;height:18px;flex:0 0 auto;color:var(--text-muted)}
    .dropdowns-page{display:grid;gap:var(--space-4);max-width:880px;margin:0 auto}
    .dropdowns-heading{display:grid;gap:var(--space-1)}
    .dropdowns-back{justify-self:start;display:inline-flex;align-items:center;gap:var(--space-2);padding:6px 10px;margin-left:-10px;border:0;border-radius:var(--shape-corner-pill);background:transparent;color:var(--text-muted);font-size:var(--fs-btn);font-weight:var(--fw-heading);cursor:pointer}
    .dropdowns-back:hover{background:var(--surface-tonal);color:var(--text-strong)}
    .dropdowns-back:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}
    .dropdowns-back svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
    .dropdowns-sub{margin:0;font-size:var(--fs-body);font-weight:var(--fw-regular);line-height:var(--lh-body);color:var(--text-muted)}
    .dropdowns-toolbar{display:flex;align-items:center;justify-content:space-between;gap:var(--space-2);flex-wrap:wrap}
    .dropdowns-hint{margin:0;font-size:var(--fs-label);font-weight:var(--fw-regular);color:var(--text-muted)}
    .dropdowns-error{margin:0;padding:10px 12px;border:1px solid var(--danger-border);border-radius:var(--shape-corner-lg);background:var(--danger-bg);color:var(--danger-text);font-size:var(--fs-subheadline);font-weight:var(--fw-regular)}
    .dropdowns-table .dropdown-actions{display:flex;justify-content:flex-end;gap:var(--space-2);flex-wrap:wrap}
    .dropdowns-table .dropdown-name-input{min-width:240px}
    .dropdowns-table .dropdown-cat-input{min-width:160px}
    .dropdowns-table .dropdown-category{color:var(--text-muted)}
    .dropdowns-table .dropdown-sort{display:flex;align-items:center;gap:var(--space-2)}
    .dropdowns-table .dropdown-sort-cell{white-space:nowrap}
    .dropdown-drag-handle{width:32px;height:32px;display:grid;place-items:center;border:1px solid transparent;border-radius:var(--shape-corner-sm);color:var(--text-muted);cursor:grab;touch-action:none;transition:background 140ms ease,color 140ms ease,border-color 140ms ease}
    .dropdown-drag-handle:hover{background:var(--surface-tonal);color:var(--text-strong);border-color:var(--border-soft)}
    .dropdown-drag-handle:active{cursor:grabbing}
    .dropdown-drag-handle svg{width:18px;height:18px}

    /* Tools page — tab selector and blank workspace panels */
    .tools-page{display:grid;gap:var(--space-4)}
    .tools-tabs{display:flex;gap:var(--space-2);overflow-x:auto;border-bottom:1px solid var(--divider)}
    .tools-tab{flex:0 0 auto;padding:10px 14px;border:0;border-bottom:2px solid transparent;border-radius:var(--shape-corner-sm) var(--shape-corner-sm) 0 0;background:transparent;color:var(--text-muted);font-size:var(--fs-btn);font-weight:var(--fw-heading);cursor:pointer;transition:color 140ms ease,border-color 140ms ease,background 140ms ease}
    .tools-tab:hover{color:var(--text-strong);background:var(--surface-tonal)}
    .tools-tab:focus-visible{outline:2px solid var(--focus-ring);outline-offset:-2px}
    .tools-tab[aria-selected="true"]{color:var(--color-primary);border-bottom-color:var(--color-primary)}
    .tools-tab-panel{min-height:320px;border:1px solid var(--border-soft);border-radius:var(--shape-corner-lg);background:var(--surface-card)}
    .tools-sticker-panel,.tools-client-form-panel{min-height:0;border:0;border-radius:0;background:transparent}
    .tools-sticker-host,.tools-client-form-host{display:block;min-height:1px}
    .tools-tab-panel[hidden]{display:none}
    .tools-tab-panel-anim{animation:pageIn var(--motion-duration-page) var(--motion-easing-decelerate) both}
    .dropdown-sort-pos{min-width:20px;color:var(--text-muted);font-size:var(--fs-label);font-weight:var(--fw-heading);text-align:center}
    .dropdown-row.dragging{opacity:.46}
    .dropdown-row.drop-before td{border-top:2px solid var(--accent)}
    .dropdown-row.drop-after td{border-bottom:2px solid var(--accent)}
    .dropdowns-sort-head,.dropdowns-actions-head{width:1%;white-space:nowrap}
    @media(max-width:600px){.dropdowns-table .dropdown-name-input{min-width:0}.dropdowns-table .dropdown-cat-input{min-width:0}}

    /* Priority/status panels */
    .priority-strip{background:var(--color-danger-bg);border-color:var(--color-danger-border)}
    .priority-strip-title{color:var(--color-on-danger-bg)}.panel.theme-ready .panel-title{color:var(--color-on-success-bg)}.panel.theme-payment .panel-title{color:var(--color-on-warning-bg)}.panel.theme-tomorrow .panel-title{color:var(--color-on-info-bg)}

    /* Toasts */
    .toast{background:var(--color-bg-dark);color:var(--color-on-dark);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);font-weight:800}



    /* v1.0.5 — scoped overlay/nav repair */
    @media(min-width:821px){
      body.overlay-locked{position:static!important;width:100%!important;left:auto!important;right:auto!important;top:auto!important;overflow:hidden!important;touch-action:auto!important;overscroll-behavior:auto!important}
    }
    @media(max-width:820px){
      body.overlay-locked{position:fixed!important;width:100%!important;left:0!important;right:0!important;overflow:hidden!important;overscroll-behavior:none!important;touch-action:none!important}
    }



    /* v1.0.7 — mobile FAB, PIN, logo, item unit polish */
    .mobile-header-left{display:flex;align-items:center;gap:10px;min-width:0;flex:1 1 auto}
    .mobile-logo{width:32px;height:38px;display:block;flex:0 0 auto;overflow:visible}
    .mobile-logo img{width:100%;height:100%;object-fit:contain;object-position:center;display:block}
    .mobile-title-stack{min-width:0;display:grid;gap:2px}
    .mobile-fab{display:none}

    /* v2.2.5 mobile layout: native page scroll + strict fixed bottom nav */
    @media(max-width:1100px){.grid-kpi{grid-template-columns:repeat(3,1fr)}}
    @media(max-width:820px){
      html,body,#app{height:auto!important;min-height:100%;overflow-x:hidden!important;overflow-y:auto!important;background:var(--color-bg)}
      body{position:static!important;width:100%!important;overscroll-behavior-y:auto}
      .shell{min-height:100dvh!important;display:block!important;background:var(--color-bg);overflow:visible!important}
      .sidebar,.topbar{display:none!important}
      .main{margin-left:0!important;width:100%!important;height:auto!important;min-height:100dvh!important;display:block!important;background:var(--color-bg);overflow:visible!important;padding-bottom:0!important}
      .mobile-header{display:flex;position:fixed;left:0;right:0;top:0;z-index:55;min-height:var(--mobile-header-height);background:var(--color-bg-dark);color:var(--color-on-dark);padding:9px 14px 8px;border-bottom:1px solid rgba(255,247,237,.10);align-items:center;justify-content:space-between;gap:10px}
      .mobile-header-left{min-width:0}
      .mobile-header-actions{display:flex;align-items:center;justify-content:flex-end;gap:8px;flex:0 0 auto}
      .mobile-fab{display:grid;place-items:center;position:fixed;right:16px;bottom:calc(var(--mobile-nav-height) + env(safe-area-inset-bottom) + 16px);z-index:59;width:56px;height:56px;min-width:56px;min-height:56px;border-radius:18px;background:var(--color-primary);color:var(--color-on-primary);box-shadow:0 14px 36px rgba(17,23,33,.22);font-size:32px;font-weight:650;line-height:0;border:0;padding:0;text-align:center}
      .mobile-fab:active{transform:translateY(1px)}
      .mobile-header>div:first-child{min-width:0}
      .mobile-title{font-family:var(--font-heading);font-weight:800;color:var(--color-on-dark);font-size:18px;letter-spacing:-.025em;line-height:1.05;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
      .mobile-subtitle{font-size:11px;color:rgba(255,255,255,.68);font-weight:700;line-height:1.2;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
      .content{height:auto!important;min-height:0!important;overflow:visible!important;background:var(--color-bg);padding-top:var(--mobile-header-height)!important;padding-bottom:0!important;scroll-padding-bottom:var(--mobile-nav-clearance)!important}
      .content::after{content:none!important;display:none!important;height:0!important}
      .wrap{padding:20px 14px var(--mobile-nav-clearance)!important;max-width:none!important;width:100%!important}
      .mobile-bottom-nav{display:block}
      .input,.select,.textarea,input,select,textarea{min-height:48px;font-size:16px!important}
      .grid-kpi{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
      .dashboard-kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
      .kpi{border-radius:var(--radius-lg);padding:16px;min-height:110px}.kpi-value{font-size:30px}
      .panel{border-radius:var(--radius-lg)}
      .toolbar{align-items:stretch}.filter-line{width:100%}.search{min-width:0;width:100%}
      .order-top{flex-direction:column;align-items:flex-start}.order-actions .btn{flex:1 1 auto;min-width:120px;white-space:normal}
      .kanban{grid-template-columns:repeat(5,78vw);gap:12px}
      .form-grid{grid-template-columns:1fr}.form-section{border-radius:var(--radius-lg);padding:14px}
      .product-line{grid-template-columns:minmax(0,1fr) minmax(72px,.55fr) minmax(82px,.55fr) 44px!important}.product-line .p_unit{min-width:82px}.product-line .grind{grid-column:1/4}
      .cal-cell{min-height:78px;padding:5px}.cal-pill{font-size:8.5px;padding:3px 4px}
      .table-wrap{overflow-x:auto}.table{min-width:720px}.split-3{grid-template-columns:1fr}
      .toast{left:14px;right:14px;bottom:calc(var(--mobile-nav-height) + env(safe-area-inset-bottom) + var(--space-3));max-width:none}
      .today-progress-top{flex-wrap:wrap}.today-progress-wrap{padding-left:0!important;padding-right:0!important}.today-readonly-note{padding-left:0}.today-actions{margin-left:53px}.workflow-step-label{font-size:8px!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}.workflow-dot{width:24px!important;height:24px!important;min-width:24px!important;min-height:24px!important}
    }


    /* v1.0.8 — Dashboard and Orders content hierarchy refinement */
    .dashboard-summary-wrap{display:grid;gap:var(--space-3)}
    .dashboard-section{background:var(--surface-main);border:0;border-radius:var(--shape-corner-xl);box-shadow:none;padding:var(--space-4)}
    .dashboard-section-header{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:var(--space-3)}
    .dashboard-section-title{font-size:var(--fs-card-title);font-weight:var(--fw-heading);line-height:var(--lh-heading);color:var(--text-strong);margin:0}
    .dashboard-section-sub{margin:4px 0 0;color:var(--text-muted);font-size:var(--fs-subheadline)}
    .dashboard-section-body{display:grid;gap:var(--space-2)}
    .dashboard-record{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:center;background:var(--surface-nested);border:0;border-radius:var(--radius-nested);padding:var(--space-3)}
    .dashboard-record-title{font-size:var(--fs-body);font-weight:var(--fw-heading);line-height:var(--lh-heading);color:var(--text-strong)}
    .dashboard-record-meta{font-size:var(--fs-subheadline);font-weight:var(--fw-regular);line-height:var(--lh-body);color:var(--text-muted);margin-top:3px;display:flex;flex-wrap:wrap;gap:7px}
    .dashboard-record-body{font-size:var(--fs-body);font-weight:var(--fw-regular);line-height:var(--lh-body);color:var(--text);margin-top:6px}
    .dashboard-record .badge-row{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
    .order-card-refined{display:grid;gap:var(--space-3)}
    .order-card-refined .order-top{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:14px;align-items:start}
    .order-top-actions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:var(--space-2);align-items:center}
    .order-identity{min-width:0}
    .order-title-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
    .order-card-refined .order-name{font-size:var(--fs-card-title);font-weight:var(--fw-heading);line-height:var(--lh-heading);letter-spacing:-.01em;color:var(--text-strong)}
    .order-id-line{font-size:var(--fs-subheadline);font-weight:var(--fw-regular);line-height:var(--lh-body);color:var(--text-muted);margin-top:var(--space-1)}
    .order-badge-row{display:flex;flex-wrap:wrap;gap:7px;margin-top:var(--space-2)}
    .order-record-details{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;margin-top:var(--space-3);padding-top:var(--space-2);border-top:1px solid var(--divider)}
    .order-record-detail{min-width:0;padding:2px 12px 0;border-right:1px solid var(--divider)}
    .order-record-detail:first-child{padding-left:0}
    .order-record-detail:last-child{border-right:0;padding-right:0}
    .order-record-detail-label{color:var(--text-muted);font-size:var(--fs-label);font-weight:var(--fw-label);line-height:var(--lh-display);letter-spacing:.08em;text-transform:uppercase}
    .order-record-detail-value{margin-top:3px;color:var(--text-strong);font-size:var(--fs-body);font-weight:var(--fw-heading);line-height:var(--lh-body);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
    .order-items-box{border-top:1px solid var(--divider);padding-top:var(--space-2);display:grid;gap:var(--space-1)}
    .order-item-row{display:flex;align-items:baseline;gap:8px;min-width:0;padding:var(--space-1) 0;border-bottom:1px solid var(--border-subtle)}
    .order-item-row:last-child{border-bottom:0;padding-bottom:0}
    .order-item-quantity{flex:0 0 auto;color:var(--text-strong);font-size:var(--fs-body);font-weight:var(--fw-heading);line-height:var(--lh-body)}
    .order-item-product{min-width:0;color:var(--text);font-size:var(--fs-body);font-weight:var(--fw-regular);line-height:var(--lh-body);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
    .order-item-grind{margin-left:auto;flex:0 0 auto;color:var(--text-muted);font-size:var(--fs-subheadline);font-weight:var(--fw-regular);line-height:var(--lh-body)}
    .order-note-box{font-size:12px;font-weight:800;line-height:1.4;color:var(--color-text-muted);background:var(--color-bg);border:1px solid var(--color-border);border-radius:var(--radius-md);padding:9px 10px}
    .order-card-refined .order-actions{padding-top:var(--space-2);margin-top:0;justify-content:flex-end;gap:var(--space-2)}
    .order-card-refined .order-actions .btn{flex:0 0 auto;min-width:0}
    @media(max-width:820px){
      .order-card-refined .order-top{grid-template-columns:1fr;gap:10px}
      .order-top-actions{justify-content:flex-start}
      .order-record-details{grid-template-columns:1fr}
      .order-record-detail{border-right:0;padding:var(--space-2) 0 0}
      .order-record-detail+.order-record-detail{border-top:1px solid var(--divider)}
      .order-card-refined .order-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}
      .order-card-refined .order-actions .btn,.order-card-refined .order-actions .badge{width:100%;min-width:0}
    }


    /* v1.0.9 — Dashboard attention chip and modal refinement */
    .attention-banner{width:100%;display:flex;align-items:center;justify-content:space-between;gap:16px;text-align:left;background:var(--danger-bg);border:1.5px solid var(--danger-border);color:var(--danger-text);border-radius:var(--shape-corner-xl);padding:15px 18px;box-shadow:none;cursor:pointer}
    .attention-banner svg{width:20px;height:20px;flex:0 0 auto;color:var(--danger-text)}
    .attention-banner:hover{filter:brightness(.99);transform:translateY(-1px)}
    .attention-banner-main{display:grid;gap:8px;min-width:0}
    .attention-banner-text{font-size:var(--fs-body);font-weight:650;line-height:1.35;color:var(--color-text-strong)}
    .attention-list{display:grid;gap:0}
    .attention-item{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;align-items:center;padding:12px 0;border-bottom:1px solid var(--divider)}
    .attention-item:last-child{border-bottom:0}
    .attention-item .btn{background:transparent}
    .attention-item-title{font-size:15px;font-weight:950;color:var(--color-text-strong);line-height:1.18;letter-spacing:-.02em}
    .attention-item-meta{display:flex;flex-wrap:wrap;gap:8px;margin-top:5px;font-size:12px;font-weight:800;color:var(--color-text-muted);line-height:1.3}
    .attention-reasons{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
    .dashboard-section-sub:empty{display:none}
    .attention-banner{margin-bottom:14px}
    @media(max-width:820px){
      .attention-banner{padding:14px;border-radius:var(--radius-lg);margin-bottom:14px}
      .attention-item{grid-template-columns:1fr}
      .attention-item .btn{width:100%}
      .today-progress-card{padding:14px;border-radius:var(--radius-lg)}
      .today-progress-top{display:grid!important;grid-template-columns:minmax(0,1fr) auto!important;gap:10px!important;align-items:start!important;flex-wrap:nowrap!important}
      .today-rank{display:none!important}
      .today-main{min-width:0!important}
      .today-title-line{display:flex!important;align-items:flex-start!important;gap:6px!important;flex-wrap:wrap!important;line-height:1.15!important}
      .today-title{flex:1 0 100%!important;font-size:17px!important;line-height:1.1!important;margin-bottom:1px!important}
      .today-title-line .mono{font-size:11px!important;line-height:1.1!important;color:var(--color-text-muted)!important}
      .today-title-line .badge{font-size:10.5px!important;min-height:24px!important;padding:5px 8px!important;line-height:1!important}
      .today-actions{margin-left:0!important;align-self:start!important}
      .today-actions .btn{min-width:74px}
      .today-meta-line{display:flex!important;flex-wrap:wrap!important;gap:5px 9px!important;margin-top:8px!important;font-size:12px!important;line-height:1.25!important}
      .today-meta-line span{display:inline!important;color:var(--color-text-muted)!important;font-weight:800!important}
      .today-meta-line span:first-child{color:var(--color-text-strong)!important;font-weight:950!important}
      .today-meta-line .today-note-preview{flex-basis:100%!important;display:-webkit-box!important;-webkit-line-clamp:1!important;-webkit-box-orient:vertical!important;overflow:hidden!important;color:var(--color-text-muted)!important;font-weight:750!important}
      .today-progress-card .order-items{margin-top:8px!important;font-size:13px!important;line-height:1.3!important;color:var(--color-text-muted)!important}
      .today-progress-wrap{margin:12px 0 0!important;padding-left:0!important;padding-right:0!important}
      .today-progress-wrap .workflow-dot{width:24px!important;height:24px!important;min-width:24px!important;min-height:24px!important;font-size:9px!important}
      .today-progress-wrap .workflow-line{top:16px!important;height:3px!important}
      .today-progress-wrap .workflow-step{gap:4px!important}
      .today-progress-wrap .workflow-step-label{font-size:7.8px!important;line-height:1!important;min-height:10px!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}
    }


    /* v1.0.11 — mobile Calendar nav/access and agenda refinement */

    /* v1.0.13 — Standard PIN Login Component */
    .calendar-page{display:grid;gap:14px}
    .calendar-toolbar-row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:0}
    .calendar-month-title{margin:0;font-size:var(--fs-page-title);font-weight:var(--fw-heading);letter-spacing:-.02em;color:var(--color-text-strong);line-height:var(--lh-display)}
    .calendar-nav-actions{display:flex;align-items:center;justify-content:flex-end;gap:8px;flex:0 0 auto}
    .calendar-nav-actions .btn{min-width:42px}
    .calendar-icon-btn{width:42px;min-width:42px;padding:0;border-radius:var(--radius-pill)}
    .calendar-icon-btn svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
    .calendar-agenda-summary{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
    .calendar-agenda-group{border:0;border-radius:var(--shape-corner-xl);background:var(--surface-main);overflow:hidden;box-shadow:none;min-width:0}
    .calendar-agenda-title{padding:var(--space-3) var(--space-4);border-bottom:1px solid var(--border-subtle);font-weight:var(--fw-heading);color:var(--text-strong)}
    .calendar-agenda-list{display:grid;padding:var(--space-2) var(--space-4) var(--space-3)}
    .calendar-agenda-item{width:100%;display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 8px;align-items:center;text-align:left;background:transparent;border:0;border-radius:0;padding:var(--space-2) 0;color:var(--text)}
    .calendar-agenda-item+.calendar-agenda-item{border-top:1px solid var(--border-subtle)}
    .calendar-agenda-item:hover{background:var(--surface-tonal);box-shadow:none}
    .calendar-agenda-main{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--fs-body);font-weight:var(--fw-heading);line-height:var(--lh-body);color:var(--text-strong)}
    .calendar-agenda-sub{grid-column:1 / -1;color:var(--text-muted);line-height:var(--lh-body)}
    .calendar-month-card{background:var(--surface-main);border:0;border-radius:var(--shape-corner-xl);box-shadow:none;padding:14px;overflow:hidden}
    .calendar-legend{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:10px}
    .calendar .cal-grid{grid-template-columns:repeat(7,minmax(0,1fr))}
    .cal-cell{min-width:0;overflow:hidden}
    .cal-pill{display:grid;gap:1px;width:100%;min-width:0;border-radius:8px;padding:5px 6px;margin:3px 0;text-align:left;line-height:1.05;overflow:hidden}
    .cal-pill-kind,.cal-pill-customer{display:block;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
    .cal-pill-kind{font-size:9.5px;font-weight:950;text-transform:uppercase;letter-spacing:.04em}
    .cal-pill-customer{font-size:10px;font-weight:850}
    @media(max-width:820px){
      .calendar-page{gap:12px}
      .calendar-toolbar-row{align-items:center}
      .calendar-month-title{font-size:22px}
      .calendar-nav-actions{gap:6px}
      .calendar-nav-actions .btn{min-width:0}
      .calendar-icon-btn{width:40px;min-width:40px;padding:0}
      .calendar-agenda-summary{grid-template-columns:1fr;gap:12px}
      .calendar-month-card{padding:10px;border-radius:var(--radius-lg)}
      .calendar-legend{margin-bottom:8px}
      .cal-day-name{font-size:9px;padding:8px 2px}
      .cal-cell{min-height:98px;padding:6px 4px}
      .cal-date{font-size:10px;margin-bottom:4px}
      .cal-pill{padding:4px 4px;margin:2px 0;border-radius:7px}
      .cal-pill-kind{font-size:8.5px;letter-spacing:.03em}
      .cal-pill-customer{font-size:9px}
    }


    /* v1.0.15 — Clients page search, sort, and CRM records */
    .client-toolbar{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--space-3);margin-bottom:var(--space-4);flex-wrap:wrap}
    .client-search{flex:1 1 280px;min-width:220px}
    .client-sort{flex:0 0 220px;min-width:190px}
    .client-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-3)}
    .client-card{background:var(--surface-card);border:0;border-radius:var(--shape-corner-xl);box-shadow:none;padding:var(--space-4);display:grid;gap:var(--space-3);min-width:0}
    .client-card-top{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--space-3);min-width:0}
    .client-name-wrap{min-width:0;flex:1}
    .client-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
    .client-meta{margin-top:var(--space-1);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
    .client-facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-3);padding:var(--space-3) 0;border-top:1px solid var(--divider);border-bottom:1px solid var(--divider)}
    .client-fact{min-width:0}
    .client-fact+.client-fact{border-left:1px solid var(--divider);padding-left:var(--space-3)}
    .client-fact span{display:block;font-size:var(--fs-label);font-weight:var(--fw-label);line-height:var(--lh-display);letter-spacing:.06em;color:var(--text-muted);text-transform:uppercase;margin-bottom:var(--space-1)}
    .client-fact b{display:block;font-size:var(--fs-card-title);font-weight:var(--fw-heading);line-height:var(--lh-heading);color:var(--text-strong);font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
    .client-detail{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--space-3);min-width:0}
    .client-top{min-width:0;display:grid;gap:var(--space-1)}
    .client-top span{font-size:var(--fs-label);font-weight:var(--fw-label);line-height:var(--lh-display);letter-spacing:.06em;color:var(--text-muted);text-transform:uppercase}
    .client-top-item{font-size:var(--fs-body);font-weight:var(--fw-regular);line-height:var(--lh-body);color:var(--text);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
    .client-detail .btn{flex:0 0 auto}
    .client-empty{padding:var(--space-5) var(--space-4);text-align:center;color:var(--text-muted);font-weight:var(--fw-heading)}
    @media(max-width:820px){
      .client-toolbar{display:grid;grid-template-columns:1fr;align-items:stretch;gap:var(--space-3);margin-bottom:var(--space-3)}
      .client-search,.client-sort{min-width:0;flex:auto;width:100%}
      .client-grid{grid-template-columns:1fr;gap:var(--space-3)}
      .client-card{padding:var(--space-4);border-radius:var(--radius-lg)}
      .client-card-top{align-items:flex-start}
      .client-name{white-space:normal;overflow:visible;text-overflow:clip}
      .client-meta{white-space:normal;overflow:visible;text-overflow:clip}
      .client-facts{gap:var(--space-2);padding:var(--space-2) 0}
      .client-fact+.client-fact{padding-left:var(--space-2)}
      .client-fact b{white-space:normal;overflow:visible}
      .client-detail{align-items:flex-start}
      .client-top-item{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
      .client-detail .btn{min-height:var(--control-height-mobile)}
    }


    /* UI Doctrine v2.5.1 — Board activity section + custom date-range picker */
    .board-activity-section{margin-top:var(--space-8);display:grid;gap:var(--space-4)}
    .board-activity-head{display:grid;gap:var(--space-1)}
    .board-activity-title{margin:0;font-size:var(--fs-section-head);font-weight:var(--fw-heading);line-height:1.2;color:var(--text-strong)}
    .board-activity-sub{margin:0;font-size:var(--fs-subheadline);font-weight:var(--fw-regular);line-height:var(--lh-body);color:var(--text-muted)}
    .activity-filter-row{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-3)}
    .activity-filter-row .quick-filter-row{margin-top:0}

    .date-picker-wrap{position:relative;display:inline-flex}
    .date-picker-trigger{display:flex;align-items:center;gap:var(--space-2);padding:6px 10px;border:1px solid var(--border-soft);border-radius:var(--shape-corner-md);background:var(--surface-card);cursor:pointer;font-size:var(--fs-btn);color:var(--text-strong);min-width:200px;transition:border-color 140ms ease}
    .date-picker-trigger:hover{border-color:var(--border-strong)}
    .date-picker-panel{background:var(--surface-card);border:1px solid var(--border-soft);border-radius:var(--shape-corner-xl);box-shadow:var(--elevation-modal);padding:var(--space-4);min-width:500px;max-width:min(95vw,640px)}
    .date-picker-months{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-5)}
    .date-picker-month{min-width:0}
    .date-picker-header{display:flex;align-items:center;gap:var(--space-1);margin-bottom:var(--space-1)}
    .date-picker-month-label{flex:1;text-align:center;font-size:var(--fs-card-title);font-weight:800;color:var(--text-strong);min-width:140px}
    .date-picker-nav-btn{width:32px;height:32px;display:inline-flex;align-items:center;justify-content:center;border:0;border-radius:var(--shape-corner-md);background:transparent;cursor:pointer;color:var(--text-strong);font-size:var(--fs-btn);transition:background 140ms ease}
    .date-picker-nav-btn:hover{background:var(--surface-tonal)}
    .date-picker-nav-btn.placeholder{visibility:hidden}
    .date-picker-days{display:grid;grid-template-columns:repeat(7,1fr);gap:1px;text-align:center}
    .date-picker-weekday{padding:4px 0;color:var(--text-muted);font-size:var(--fs-label);font-weight:650;text-transform:uppercase}
    .date-picker-day{height:36px;display:flex;align-items:center;justify-content:center;border:0;border-radius:var(--shape-corner-md);background:transparent;cursor:pointer;font-size:var(--fs-btn);color:var(--text-strong);transition:background 80ms ease;position:relative}
    .date-picker-day:hover{background:var(--surface-tonal)}
    .date-picker-day.is-today{font-weight:800}
    .date-picker-day.is-today::after{content:'';position:absolute;bottom:4px;width:4px;height:4px;border-radius:50%;background:var(--color-primary)}
    .date-picker-day.is-start,.date-picker-day.is-end{background:var(--selection-fill);color:var(--selection-text);font-weight:800}
    .date-picker-day.is-in-range{background:var(--selection-bg);border-radius:0}
    .date-picker-day.is-start.is-in-range{border-radius:var(--shape-corner-md) 0 0 var(--shape-corner-md)}
    .date-picker-day.is-end.is-in-range{border-radius:0 var(--shape-corner-md) var(--shape-corner-md) 0}
    .date-picker-actions{display:flex;justify-content:flex-end;gap:var(--space-2);margin-top:var(--space-3);padding-top:var(--space-3);border-top:1px solid var(--divider)}
    .date-picker-actions .btn-text{background:transparent;border-color:transparent;color:var(--text-muted)}
    .date-picker-actions .btn-text:hover{background:var(--surface-tonal);color:var(--text-strong);border-color:transparent}
    .modal-backdrop[data-picker]{background:transparent;padding:0}
    @media(min-width:600px){
      .modal-backdrop[data-picker]{align-items:flex-start;justify-content:flex-start}
      .modal-backdrop[data-picker] .date-picker-panel{position:absolute;margin:0}
    }
    @media(max-width:599px){
      .modal-backdrop[data-picker]{align-items:flex-end;background:var(--scrim)}
      .modal-backdrop[data-picker] .date-picker-panel{width:100%;min-width:0;max-width:none;border-radius:var(--shape-corner-2xl) var(--shape-corner-2xl) 0 0;max-height:86dvh;overflow-y:auto;animation:modal-slide-up var(--motion-duration-enter) var(--motion-easing-decelerate) both}
      .modal-backdrop[data-picker] .date-picker-months{grid-template-columns:1fr}
      .date-picker-day{height:44px;font-size:var(--fs-body)}
      .date-picker-trigger{width:100%;min-width:0}
    }


    /* v1.0.16 — Activity Log timeline refinement */
    .activity-timeline{display:grid}
    .activity-day-group{display:grid;gap:var(--space-2);margin-top:var(--space-5)}
    .activity-day-title{font-size:var(--fs-label);font-weight:var(--fw-label);text-transform:uppercase;letter-spacing:.08em;color:var(--text-muted)}
    .activity-day{display:grid;gap:var(--space-2);background:var(--surface-main);border:0;border-radius:var(--shape-corner-xl);box-shadow:none;padding:var(--space-3) var(--space-4)}
    .activity-list{display:grid}
    .activity-row{position:relative;display:grid;grid-template-columns:88px minmax(0,1fr);gap:12px;align-items:start;padding:var(--space-3) 0;background:transparent;border:0;border-radius:0;box-shadow:none}
    .activity-row+.activity-row::before{content:'';position:absolute;top:0;left:var(--space-4);right:var(--space-4);border-top:1px solid var(--divider)}
    .activity-time{font-size:12px;font-weight:900;color:var(--color-text-muted);line-height:1.25;white-space:nowrap;padding-top:2px}
    .activity-main{min-width:0;display:grid;gap:7px}
    .activity-head{display:flex;align-items:center;justify-content:space-between;gap:10px;min-width:0}
    .activity-title{font-size:14px;font-weight:900;color:var(--color-text);line-height:1.25;min-width:0;overflow:hidden;text-overflow:ellipsis}
    .activity-meta{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
    .activity-detail{font-size:13px;font-weight:750;color:var(--color-text);line-height:1.4;min-width:0}
    .activity-sub{font-size:12px;font-weight:750;color:var(--color-text-muted);line-height:1.35;display:flex;gap:8px;flex-wrap:wrap}
    .activity-move{display:inline-flex;align-items:center;gap:6px;font-weight:850;color:var(--color-text-strong)}
    .activity-arrow{color:var(--color-text-muted);font-weight:900}
    .activity-notes{font-size:12px;color:var(--color-text-muted);line-height:1.35;border-top:1px solid var(--color-divider);padding-top:7px}
    @media(max-width:820px){
      .activity-timeline{gap:0}
      .activity-row{grid-template-columns:1fr;gap:6px;padding:var(--space-2) 0}
      .activity-row+.activity-row::before{left:var(--space-3);right:var(--space-3)}
      .activity-time{font-size:11px;padding-top:0}
      .activity-head{align-items:flex-start;gap:8px}
      .activity-title{font-size:13px;white-space:normal}
      .activity-detail{font-size:12.5px}
      .activity-sub{font-size:11.5px;gap:6px}
      .activity-meta{justify-content:flex-start}
    }



    /* v1.0.17 — Order Details / Edit Order modal hierarchy refinement */
    .order-detail-header{display:flex;align-items:flex-start;justify-content:space-between;gap:14px}
    .order-detail-customer{font-size:20px;font-weight:950;letter-spacing:-.035em;line-height:1.05;color:var(--color-text-strong)}
    .order-detail-id{font-size:12px;font-weight:850;color:var(--color-text-muted);margin-top:5px}
    .order-detail-chips{display:flex;gap:7px;align-items:center;justify-content:flex-end;flex-wrap:wrap;flex:0 0 auto}
    .order-detail-facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;margin:var(--space-4) 0 0;padding:var(--space-2) 0;border-top:1px solid var(--divider);border-bottom:1px solid var(--divider)}
    .order-detail-fact{min-width:0;padding:0 var(--space-3)}
    .order-detail-fact+.order-detail-fact{border-left:1px solid var(--divider)}
    .order-detail-fact span{display:block;text-transform:uppercase;margin-bottom:4px}
    .order-detail-fact b{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
    .order-detail-card{background:var(--surface-card);border:0;border-radius:var(--shape-corner-xl);box-shadow:none;padding:var(--space-4)}
    .order-edit-section{border:1px solid var(--color-border);border-radius:var(--radius-xl);background:var(--color-surface);padding:14px;box-shadow:var(--shadow-sm)}
    .order-edit-section-block{display:grid;gap:var(--space-2)}
    .order-edit-section-block+.order-edit-section-block{margin-top:12px}
    .order-detail-section-title,.order-edit-section-title{font-size:12px;font-weight:950;letter-spacing:.08em;text-transform:uppercase;color:var(--bb-coffee-700)}
    .order-detail-section-title{margin:var(--space-4) 0 var(--space-2)}
    .order-edit-section-title{margin:0}
    .order-detail-list{display:grid}
    .order-detail-row{display:grid;grid-template-columns:150px minmax(0,1fr);gap:8px 14px;padding:var(--space-2) 0;border-bottom:1px solid var(--border-subtle)}
    .order-detail-row:last-child{border-bottom:0}
    .order-detail-notes{font-size:13px;line-height:1.5;color:var(--color-text);white-space:pre-wrap}
    .order-edit-grid{display:grid;grid-template-columns:1fr 1fr;gap:13px}
    .order-edit-footer{display:flex;gap:9px;justify-content:space-between;align-items:center;margin-top:16px;flex-wrap:wrap;padding:var(--space-2) var(--space-5) var(--space-5)}
    .order-edit-footer-right{display:flex;gap:9px;flex-wrap:wrap;justify-content:flex-end}
    .order-edit-danger-slot{display:flex;justify-content:flex-start;flex:1 1 auto}
    @media (max-width:820px){
      .order-detail-header{display:grid;gap:10px}
      .order-detail-customer{font-size:18px}
      .order-detail-chips{justify-content:flex-start}
      .order-detail-facts{grid-template-columns:1fr;padding:var(--space-1) 0}
      .order-detail-fact{padding:var(--space-2) 0}
      .order-detail-fact+.order-detail-fact{border-left:0;border-top:1px solid var(--divider)}
      .order-detail-row{grid-template-columns:1fr;gap:4px}
      .order-detail-row b{margin-top:5px}
      .order-detail-card{padding:var(--space-3)}
      .order-edit-grid{grid-template-columns:1fr}
      .order-edit-section{padding:14px}
      .order-edit-footer{display:grid;grid-template-columns:1fr;gap:10px}
      .order-edit-danger-slot{order:2;width:100%}
      .order-edit-danger-slot .btn{width:100%}
      .order-edit-footer-right{order:1;display:grid;grid-template-columns:1fr;width:100%}
      .order-edit-footer-right .btn{width:100%}
    }


    /* v1.2.0 — Contextual New Order page */
    .new-order-page{display:grid;gap:var(--space-4);max-width:880px;margin:0 auto}
    .new-order-heading{display:grid;gap:var(--space-1)}
    .new-order-back{justify-self:start;display:inline-flex;align-items:center;gap:var(--space-2);padding:6px 10px;margin-left:-10px;border:0;border-radius:var(--shape-corner-pill);background:transparent;color:var(--text-muted);font-size:var(--fs-btn);font-weight:var(--fw-heading);cursor:pointer}
    .new-order-back:hover{background:var(--surface-tonal);color:var(--text-strong)}
    .new-order-back:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}
    .new-order-back svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
    .new-order-sub{margin:0;font-size:var(--fs-body);font-weight:var(--fw-regular);line-height:var(--lh-body);color:var(--text-muted)}
    .new-order-form{display:grid;gap:var(--space-4)}
    .upload-btn{display:inline-flex;align-items:center;gap:var(--space-2);min-height:var(--control-height);padding:0 16px;border:1px solid var(--border-strong);border-radius:var(--shape-corner-pill);background:var(--surface-card);color:var(--text-strong);font-size:var(--fs-btn);font-weight:var(--fw-label);cursor:pointer}
    .upload-btn:hover{background:var(--surface-tonal)}
    .upload-btn:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}
    .upload-btn svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
    .upload-input{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
    .new-order-sticky-actions{display:flex;align-items:center;justify-content:flex-end;gap:var(--space-2);margin-top:var(--space-4)}
    .new-order-sticky-actions .btn-text{background:transparent;border-color:transparent;color:var(--text-muted)}
    .new-order-sticky-actions .btn-text:hover{background:var(--surface-tonal);color:var(--text-strong);border-color:transparent}
    @media(max-width:820px){
      .new-order-page{max-width:none}
      .new-order-sticky-actions .btn{flex:1 1 auto}
    }


    /* UI Doctrine v2.5.1 — Kanban record card children */
    .mini-head{display:flex;align-items:flex-start;justify-content:space-between;gap:8px;min-width:0}
    .mini-main{min-width:0;display:grid;gap:3px}
    .mini-schedule-line{display:flex;gap:var(--space-2);flex-wrap:wrap}
    .mini-alert-row{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
    @media(max-width:820px){
      .order-edit-section{overflow:hidden}
      .order-edit-section .order-edit-grid,.order-edit-section .order-edit-grid>div{min-width:0;max-width:100%;width:100%}
      .order-edit-section input[type='date'].input{width:100%!important;min-width:0!important;max-width:100%!important;box-sizing:border-box!important;font-size:16px!important;line-height:1.2!important;text-align:left!important;padding-left:12px!important;padding-right:12px!important}
    }


    /* v1.0.20 — Orders quick filters + mobile schedule date containment fix */
    @media(max-width:820px){
      .order-schedule-section{width:100%;max-width:100%;overflow:hidden;box-sizing:border-box}
      .order-schedule-section .order-edit-grid{display:grid!important;grid-template-columns:minmax(0,1fr)!important;width:100%!important;max-width:100%!important;min-width:0!important;gap:12px!important;overflow:hidden!important;box-sizing:border-box!important}
      .order-schedule-section .order-edit-grid>div{width:100%!important;max-width:100%!important;min-width:0!important;overflow:hidden!important;box-sizing:border-box!important}
      .order-schedule-section input[type='date'],
      .order-schedule-section input[type='date'].input{display:block!important;width:100%!important;max-width:100%!important;min-width:0!important;height:48px!important;min-height:48px!important;box-sizing:border-box!important;appearance:none!important;-webkit-appearance:none!important;text-align:left!important;font-size:16px!important;line-height:1.2!important;padding:10px 12px!important;margin:0!important;overflow:hidden!important}
      .order-schedule-section input[type='date']::-webkit-date-and-time-value{text-align:left!important;display:block!important;max-width:100%!important;overflow:hidden!important;text-overflow:ellipsis!important}
      .order-schedule-section input[type='date']::-webkit-calendar-picker-indicator{margin-left:auto!important;flex:0 0 auto!important}
    }


    /* UIX v0.1.1 Pass A — v2.3.1 surface, typography, shape, and affordance refinement only.
       Scope: operational surfaces/cards/forms/buttons/chips/records. Shell behavior, auth, modal mechanics, routing, and backend logic untouched. */
    :root{
      --uix-surface-page:var(--surface-page);
      --uix-surface-main:var(--surface-main);
      --uix-surface-card:var(--surface-card);
      --uix-surface-tonal:var(--surface-tonal);
      --uix-surface-soft:var(--surface-tonal);
      --uix-surface-nested:var(--surface-nested);
      --uix-surface-input:var(--surface-input);
      --uix-text-strong:#1F0F04;
      --uix-text:#2C1607;
      --uix-text-muted:#7A5A3A;
      --uix-text-soft:#9A7A5A;
      --uix-border-strong:#DEBC8C;
      --uix-border:#EED7B8;
      --uix-border-soft:rgba(120,76,29,.18);
      --uix-border-subtle:rgba(120,76,29,.11);
      --uix-divider:rgba(120,76,29,.13);
      --uix-shadow-main:0 10px 28px rgba(120,76,29,.10);
      --uix-shadow-card:0 5px 16px rgba(120,76,29,.07);
      --uix-radius-sm:10px;
      --uix-radius-md:14px;
      --uix-radius-lg:22px;
      --uix-radius-xl:32px;
      --uix-radius-2xl:40px;
      --uix-radius-pill:999px;
      --uix-font-body:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
    }

    body:not(.bb-auth-active),
    body:not(.bb-auth-active) input,
    body:not(.bb-auth-active) select,
    body:not(.bb-auth-active) textarea,
    body:not(.bb-auth-active) button{
      font-family:var(--uix-font-body);
    }

    body:not(.bb-auth-active){
      background:var(--uix-surface-page);
      color:var(--uix-text);
    }

    .content,
    .wrap{
      background:var(--uix-surface-page);
    }

    .panel-sub,
    .sub,
    .muted,
    .meta,
    .mono,
    .order-id-line,
    .activity-sub,
    .activity-time,
    .calendar-agenda-sub,
    .stat-lbl,
    .kpi-label,
    .label,
    label.label{
      color:var(--uix-text-muted);
    }

    .panel{
      background:var(--uix-surface-main);
      border:1px solid var(--uix-border-subtle);
      border-radius:var(--uix-radius-xl);
      box-shadow:var(--uix-shadow-main);
    }

    .kpi,
    .order-card,
    .today-progress-card,
    .calendar-agenda-group,
    .calendar-month-card,
    .calendar,
    .metric-card{
      background:var(--surface-card);
      border:0;
      border-radius:var(--shape-corner-xl);
      box-shadow:none;
    }

    .order-card,
    .today-progress-card{
      padding:var(--card-padding-desktop);
    }

    .order-card:hover{
      box-shadow:none;
      transform:none;
    }

    .order-name{
      font-weight:820;
      color:var(--uix-text-strong);
    }

    .order-items,
    .activity-detail{
      color:var(--uix-text);
    }

    .stat-box,
    .detail-cell,
    .invoice-box,
    .receipt-box,
    .form-section,
    .order-edit-section,
    .order-note-box,
    .order-note-box,
    .order-note-box{
      background:var(--uix-surface-soft);
      border:1px solid var(--uix-border-subtle);
      border-radius:var(--uix-radius-lg);
      box-shadow:none;
    }

    .stat-num,
    .kpi-value,
    .detail-value{
      font-family:var(--uix-font-body)!important;
      color:var(--uix-text-strong);
      font-weight:850;
      letter-spacing:-.025em;
    }

    .kpi-value,
    .stat-num{
      font-size:clamp(28px,3vw,38px);
      line-height:1;
    }

    .btn,
    .bb-popover-hub,
    .bb-popover-switch,
    .bb-settings-gear{
      border-radius:var(--uix-radius-pill);
      font-family:var(--uix-font-body)!important;
      letter-spacing:0;
      box-shadow:none;
    }

    .badge{
      min-height:24px;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:6px;
      padding:4px 9px;
      border-radius:var(--uix-radius-pill);
      border:1px solid rgba(120,76,29,.10);
      font-size:11px;
      font-weight:750;
      line-height:1;
      cursor:default;
      box-shadow:none;
      transform:none;
    }

    .badge::before{
      content:"";
      width:6px;
      height:6px;
      flex:0 0 6px;
      border-radius:999px;
      background:currentColor;
      opacity:.72;
    }

    .badge:hover{
      transform:none;
      box-shadow:none;
    }

    .input,
    .select,
    .textarea,
    input[type='text'],
    input[type='email'],
    input[type='number'],
    input[type='date'],
    input[type='time'],
    input[type='tel'],
    input[type='file'],
    select,
    textarea{
      background-color:var(--uix-surface-input);
      border:1.5px solid var(--uix-border-strong);
      border-radius:var(--uix-radius-md);
      color:var(--uix-text);
      font-family:var(--uix-font-body)!important;
      font-size:16px;
      font-weight:600;
      min-height:48px;
    }

    .input:focus,
    .select:focus,
    .textarea:focus,
    input:focus,
    select:focus,
    textarea:focus{
      border-color:var(--bb-orange);
      box-shadow:0 0 0 4px rgba(246,126,15,.24);
    }

    .form-section-title,
    .order-detail-section-title,
    .order-edit-section-title,
    .activity-day-title{
      font-family:var(--uix-font-body)!important;
      color:var(--bb-brown);
      font-size:11px;
      font-weight:850;
      letter-spacing:.095em;
      text-transform:uppercase;
    }

    .toolbar,
    .filter-line,
    .calendar-controls,
    .calendar-agenda-summary{
      gap:10px;
    }

    .empty{
      background:transparent;
      border:1px dashed var(--uix-border-strong);
      border-radius:var(--shape-corner-xl);
      color:var(--uix-text-muted);
    }

    @media(max-width:820px){
      .title{font-size:28px;line-height:1.08}
      .panel{border-radius:var(--uix-radius-xl)}
      .kpi,
      .order-card,
      .today-progress-card,
      .input,
      .select,
      .textarea,
      input:not(.access-pin),
      select,
      textarea{min-height:48px;font-size:16px}
      .badge{min-height:24px}
    }

    /* UI Doctrine v2.5.1 — color, surfaces, card treatments, and concentric radii */
    .shell,.main,.content{background:var(--surface-page)}
    .surface-main{background:var(--surface-main);border-radius:var(--shape-corner-2xl);box-shadow:var(--elevation-main)}
    .surface-card,.card{background:var(--surface-card);border:0;border-radius:var(--shape-corner-xl);box-shadow:none;color:var(--text)}
    .card-action{box-shadow:var(--elevation-card);cursor:pointer}
    .card-signal{background:var(--surface-tonal);border:0;border-radius:var(--shape-corner-xl);box-shadow:none}
    .card-signal.brand{background:var(--color-primary-soft);color:var(--text-tonal)}
    .card-signal.success{background:var(--success-bg);color:var(--success-text)}
    .card-signal.warning{background:var(--warning-bg);color:var(--warning-text)}
    .card-signal.danger{background:var(--danger-bg);color:var(--danger-text)}
    .card-signal.info{background:var(--info-bg);color:var(--info-text)}
    .card-framed{background:var(--surface-card);border:1px solid var(--border-soft);border-radius:var(--shape-corner-xl);box-shadow:none}
    .surface-tonal{background:var(--surface-tonal);border:0;border-radius:var(--shape-corner-xl);box-shadow:none}
    .surface-nested{background:var(--surface-nested);border:0;border-radius:var(--radius-nested)}
    .panel,.account-card,.calendar-month-card,.calendar-agenda-group{background:var(--surface-main);border:0;border-radius:var(--shape-corner-xl);box-shadow:none}
    .calendar{border:1px solid var(--border-soft)}
    .panel{display:grid;gap:var(--space-2);padding:var(--space-4)}
    .order-card,.priority-item{background:var(--surface-card);border:0;border-radius:var(--shape-corner-xl);box-shadow:none}
    .today-progress-card{background:var(--surface-card);border:0;border-radius:var(--shape-corner-xl);box-shadow:none}
    .calendar-agenda-item{background:transparent;border:0;border-radius:0;box-shadow:none}
    .calendar-agenda-item:hover{box-shadow:none}
    .kpi{background:transparent;border:0;border-radius:0;box-shadow:none;padding:0 var(--space-3);min-height:0}
    .kpi .kpi-label{margin-top:var(--space-1)}
    .dashboard-kpi-grid{gap:0;padding:var(--space-3) 0}
    .dashboard-kpi-grid .kpi:not(:last-child){border-right:1px solid var(--divider)}
    @media(max-width:820px){
      .dashboard-kpi-grid .kpi:nth-child(odd){border-right:1px solid var(--divider)}
      .dashboard-kpi-grid .kpi:nth-child(even){border-right:0}
    }
    .priority-strip{background:var(--danger-bg);border-color:var(--danger-border);border-radius:var(--shape-corner-xl)}
    .form-section,.receipt-box,.invoice-box,.order-edit-section,.stat-box{background:var(--surface-card);border:1px solid var(--border-soft);border-radius:var(--radius-nested);box-shadow:none}
    .order-edit-section{border:0}
    .roaster-control-note,.roasting-status-note,.owner-only-note{background:var(--surface-tonal);border:0;border-radius:var(--radius-nested)}
    .receipt-preview,.invoice-preview,.order-note-box{background:var(--surface-nested);border:0;border-radius:var(--radius-nested-deep);box-shadow:none}
    .table th{border-bottom-color:var(--divider)}
    .table td,.detail-row{border-bottom-color:var(--divider)}
    @media(max-width:919px){:root{--shape-corner-sm:8px;--shape-corner-md:10px;--shape-corner-lg:14px;--shape-corner-xl:20px;--shape-corner-2xl:28px;--radius-nested:max(4px,calc(var(--shape-corner-xl) - 6px));--radius-nested-deep:max(4px,calc(var(--radius-nested) - 6px))}}

    /* UI Doctrine v2.5.1 — active OMS typography roles */
    .brand-title{font-family:var(--font-brand);font-size:var(--fs-card-title);font-weight:var(--fw-heading);line-height:var(--lh-heading);color:var(--color-on-dark)}
    .subtitle,.panel-sub,.order-items,.due-line,.today-meta-line,.today-readonly-note,.receipt-help,.invoice-help,.helper-text,.client-meta,.calendar-agenda-sub{font-size:var(--fs-subheadline);font-weight:var(--fw-regular);line-height:var(--lh-body);color:var(--color-text-muted)}
    .title{font-family:var(--font-brand);font-size:var(--fs-page-title);font-weight:var(--fw-heading);line-height:var(--lh-display);letter-spacing:-.025em;color:var(--color-text-strong)}
    .calendar-month-title{font-size:var(--fs-page-title);font-weight:var(--fw-heading);line-height:var(--lh-display);letter-spacing:-.02em;color:var(--color-text-strong)}
    .panel-title,.order-name,.today-title,.client-name,.calendar-agenda-title{font-size:var(--fs-card-title);font-weight:var(--fw-heading);line-height:var(--lh-heading);letter-spacing:-.02em;color:var(--color-text-strong)}
    .kpi-value,.stat-num{font-size:var(--fs-stat);font-weight:var(--fw-heading);line-height:var(--lh-display);letter-spacing:-.03em;color:var(--color-text-strong);font-variant-numeric:tabular-nums}
    .kpi-label,.stat-lbl,.nav-label,.label,label,.form-section-title,.table th,.cal-day-name{font-size:var(--fs-label);font-weight:var(--fw-label);line-height:var(--lh-display);letter-spacing:.06em;color:var(--color-text-muted)}
    .hub,.nav-btn,.mobile-user-pill,.user-pill{font-size:var(--fs-btn);font-weight:var(--fw-heading);line-height:var(--lh-control)}
    .badge,.chip,.receipt-status,.invoice-status,.user-avatar,.cal-pill,.cal-date,.cal-pill-customer{font-size:var(--fs-label);font-weight:var(--fw-label);line-height:var(--lh-display)}
    .input,.select,.textarea,input[type='text'],input[type='email'],input[type='number'],input[type='date'],input[type='time'],input[type='tel'],select,textarea{font:var(--fw-regular) 1rem/var(--lh-control) var(--font-body);color:var(--color-text)}
    .table{font-size:var(--fs-body);line-height:var(--lh-body);color:var(--color-text)}
    .table td,.detail-row,.receipt-preview,.invoice-preview,.roaster-control-note,.roasting-status-note,.owner-only-note{font-size:var(--fs-body);font-weight:var(--fw-regular);line-height:var(--lh-body);color:var(--color-text)}
    .user-pill-role,.workflow-step-label,.mono{font-size:var(--fs-label);font-weight:var(--fw-label);line-height:var(--lh-display);color:var(--color-text-soft)}
    .mono{font-family:var(--font-body);font-variant-numeric:tabular-nums;letter-spacing:0}
    .attention-item-title,.order-detail-fact b{font-size:var(--fs-card-title);font-weight:var(--fw-heading);line-height:var(--lh-heading);color:var(--color-text-strong)}
    .order-card-refined .order-name,.order-detail-customer{font-size:var(--fs-card-title);font-weight:var(--fw-heading);line-height:var(--lh-heading);letter-spacing:-.02em;color:var(--color-text-strong)}
    .order-id-line,.order-note-box,.attention-item-meta{font-size:var(--fs-subheadline);font-weight:var(--fw-regular);line-height:var(--lh-body);color:var(--color-text-muted)}
    .order-detail-fact span,.order-detail-section-title,.order-edit-section-title,.activity-day-title,.activity-time,.cal-pill-kind{font-size:var(--fs-label);font-weight:var(--fw-label);line-height:var(--lh-display);letter-spacing:.06em;color:var(--color-text-muted)}
    .activity-title,.activity-move,.priority-strip-title,.priority-item-title{font-size:var(--fs-subheadline);font-weight:var(--fw-heading);line-height:var(--lh-heading);color:var(--color-text-strong)}
    .activity-detail,.order-detail-list,.order-detail-notes,.client-empty,.empty{font-size:var(--fs-body);font-weight:var(--fw-regular);line-height:var(--lh-body);color:var(--color-text)}
    .order-detail-row b,.order-detail-id{font-size:var(--fs-label);font-weight:var(--fw-label);line-height:var(--lh-display);color:var(--color-text-muted)}
    .priority-strip-sub,.priority-item-meta,.activity-sub,.activity-notes,.empty-small,.item-grind{font-size:var(--fs-subheadline);font-weight:var(--fw-regular);line-height:var(--lh-body);color:var(--color-text-muted)}
    .kpi-tone-danger .kpi-value{color:var(--color-danger)}
    .kpi-tone-success .kpi-value{color:var(--warning-text)}
    .mobile-title{font-family:var(--font-brand);font-size:var(--fs-card-title);font-weight:var(--fw-heading);line-height:var(--lh-heading);color:var(--color-on-dark)}
    .mobile-subtitle{font-size:var(--fs-label);font-weight:var(--fw-regular);line-height:var(--lh-display);color:var(--color-on-dark-muted)}
    .brand .brand-text-stack{min-width:0;flex:1}
    .brand-sub{font-size:var(--fs-label);max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--color-text-muted)}
    .mobile-fab{font-size:var(--fs-section-head);font-weight:var(--fw-label);line-height:1;color:var(--color-on-primary)}
    .toast{font-size:var(--fs-subheadline);font-weight:var(--fw-heading);line-height:var(--lh-control)}
    .priority-strip-title::before,.workflow-dot{font-size:var(--fs-label);font-weight:var(--fw-label);line-height:var(--lh-display)}
    .btn.small,.calendar-nav-actions .btn,.client-detail .btn{font-weight:var(--fw-heading);line-height:var(--lh-control)}
    @media(max-width:919px){
      .input,.select,.textarea,input[type='text'],input[type='email'],input[type='number'],input[type='date'],input[type='time'],input[type='tel'],select,textarea{font-size:1rem!important;line-height:var(--lh-control)!important;min-height:48px!important}
      .kpi-value,.stat-num{font-size:var(--fs-stat)!important}
      .workflow-step-label,.cal-day-name,.cal-date,.cal-pill,.cal-pill-kind,.cal-pill-customer,.badge,.mono{font-size:var(--fs-label)!important;line-height:var(--lh-display)!important}
      .today-title,.client-name{font-size:var(--fs-card-title)!important;line-height:var(--lh-heading)!important}
      .today-meta-line,.today-progress-card .order-items,.activity-detail,.activity-sub{font-size:var(--fs-body)!important;line-height:var(--lh-body)!important}
      .today-actions .btn,.calendar-nav-actions .btn,.client-detail .btn{font-size:1rem!important;line-height:var(--lh-control)!important;min-height:44px!important}
    }
    @media(max-width:919px){
      .title{font-size:clamp(1.25rem,6vw,1.75rem)}
      .btn,.hub,.nav-btn{font-size:1rem}
    }

    /* UI Doctrine v2.5.1 — action, filter, status, and badge affordances */
    .btn{min-width:56px;min-height:var(--control-height);padding:0 18px;border:1px solid var(--border-strong);border-radius:var(--shape-corner-pill);background:var(--surface-card);color:var(--text-strong);font-size:var(--fs-subheadline);font-weight:var(--fw-label);line-height:var(--lh-control);box-shadow:none;text-decoration:none;transition:background-color .14s ease,border-color .14s ease,color .14s ease,transform .14s ease}
    .btn-text{background:transparent;border-color:transparent;color:var(--text-muted)}
    .btn-text:hover{background:var(--surface-tonal);color:var(--text-strong);border-color:transparent}
    .btn.tonal{background:var(--surface-tonal);border-color:transparent;color:var(--text-tonal)}
    .btn.tonal:hover{background:var(--surface-nested)}
    .btn.outline{background:transparent;border-color:var(--border-strong);color:var(--text-strong)}
    .btn.outline:hover{background:var(--surface-tonal)}
    .status-mini-card .mini-view-btn{background:transparent;border-color:transparent}
    .status-mini-card.mini-order-in .mini-view-btn{color:var(--neutral-text);background:var(--neutral-border)}
    .status-mini-card.mini-scheduled .mini-view-btn{color:var(--warning-text);background:var(--warning-border)}
    .status-mini-card.mini-roasting .mini-view-btn{color:var(--bb-primary-900);background:var(--selection-fill)}
    .status-mini-card.mini-packing .mini-view-btn{color:var(--info-text);background:var(--info-border)}
    .status-mini-card.mini-ready .mini-view-btn{color:var(--success-text);background:var(--success-border)}
    .btn:hover{background:var(--surface-tonal);border-color:var(--border-strong);box-shadow:none;transform:none}
    .btn:active{transform:scale(.99)}
    .btn.primary{background:var(--color-primary);border-color:var(--color-primary);color:var(--color-on-primary)}
    .btn.primary:hover{background:var(--color-primary-hover);border-color:var(--color-primary-hover);color:var(--color-on-primary)}
    .btn.dark{background:var(--color-ink);border-color:var(--color-ink);color:var(--text-inverse)}
    .btn.dark:hover{background:var(--color-ink-soft);border-color:var(--color-ink-soft);color:var(--text-inverse)}
    .btn.danger,.btn.logout{background:var(--color-danger);border-color:var(--color-danger);color:var(--color-on-primary)}
    .btn.danger:hover,.btn.logout:hover{background:var(--color-danger-hover);border-color:var(--color-danger-hover);color:var(--color-on-primary)}
    .btn.success{background:var(--color-success);border-color:var(--color-success);color:var(--color-on-primary)}
    .btn.success:hover{background:var(--color-success-hover);border-color:var(--color-success-hover);color:var(--color-on-primary)}
    .btn.small{min-width:44px;min-height:var(--control-height);padding:0 16px;border-radius:var(--shape-corner-pill);font-size:var(--fs-subheadline);font-weight:var(--fw-label)}
    .btn.small.calendar-icon-btn{padding:0}
    .calendar-icon-btn svg{flex:0 0 20px}
    .btn:disabled,.btn[disabled]{opacity:.5;cursor:not-allowed;transform:none!important;box-shadow:none!important}

    .chip.filter-chip{min-height:var(--touch-target-min);display:inline-flex;align-items:center;justify-content:center;padding:0;border:0;background:transparent;cursor:pointer}
    .filter-chip-visual{min-height:var(--filter-chip-visual-height);display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:0 12px;border:1px solid var(--border-strong);border-radius:var(--shape-corner-pill);background:transparent;color:var(--text-strong);font-size:var(--fs-label);font-weight:var(--fw-label);line-height:1;white-space:nowrap;position:relative;isolation:isolate;transition:background-color .14s ease,border-color .14s ease,box-shadow .14s ease}
    .filter-chip-visual::after{content:'';position:absolute;inset:0;border-radius:inherit;background:currentColor;opacity:0;pointer-events:none;transition:opacity .14s ease}
    .chip.filter-chip:hover .filter-chip-visual::after{opacity:.08}
    .chip.filter-chip:hover .filter-chip-visual{border-color:var(--border-strong)}
    .chip.filter-chip.active .filter-chip-visual{background:var(--selection-fill);border-color:transparent;color:var(--selection-text)}

    .badge,.receipt-status,.invoice-status{display:inline-flex;align-items:center;justify-content:center;min-height:22px;padding:3px 8px;border:1px solid var(--border-chip);border-radius:var(--shape-corner-md);font-size:var(--fs-label);font-weight:var(--fw-label);line-height:var(--lh-display);letter-spacing:0;cursor:default;box-shadow:none;transform:none}
    .receipt-status,.invoice-status{min-height:24px;padding:4px 9px}
    .badge::before{content:none}
    .badge:hover,.receipt-status:hover,.invoice-status:hover{box-shadow:none;transform:none}
    .b-green,.receipt-ok{background:var(--success-bg);border-color:var(--success-border);color:var(--success-text)}
    .b-orange,.receipt-missing{background:var(--warning-bg);border-color:var(--warning-border);color:var(--warning-text)}
    .b-red{background:var(--danger-bg);border-color:var(--danger-border);color:var(--danger-text)}
    .b-blue,.invoice-status{background:var(--info-bg);border-color:var(--info-border);color:var(--info-text)}
    .b-purple,.b-brown,.b-gray{background:var(--neutral-bg);border-color:var(--neutral-border);color:var(--neutral-text)}

    @media(max-width:919px){
      .btn{min-height:48px;padding:0 18px;font-size:1rem;min-width:68px}
      .btn.small{min-height:var(--control-height-mobile);font-size:1rem}
      .modal-actions .btn{padding:12px 24px}
      .input,.select,.textarea,input,select,textarea{min-width:68px}
      .filter-chip-visual{font-size:var(--fs-subheadline)}
      .badge,.receipt-status,.invoice-status{font-size:var(--fs-label)}
    }

    /* UI Doctrine v2.5.1 — field surface, border, shape, padding, chevron */
    .input,.select,.textarea,input[type='text'],input[type='email'],input[type='number'],input[type='date'],input[type='time'],input[type='tel'],input[type='file'],select,textarea{background-color:var(--surface-input);border:1.5px solid var(--border-strong);border-radius:var(--shape-corner-lg);padding:6px 12px;min-height:var(--control-height);appearance:none;-webkit-appearance:none;box-sizing:border-box}
    .select,select{padding-right:40px;appearance:none;-webkit-appearance:none;background:var(--surface-input) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none' stroke='%237A5A3A' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E") no-repeat right 12px center/16px 16px}
    .input.search,.client-search .input{padding-left:40px;background:var(--surface-input) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%237A5A3A' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E") no-repeat left 12px center/16px 16px}
    .input:focus,.select:focus,.textarea:focus,input:focus,select:focus,textarea:focus{border-color:var(--color-primary);box-shadow:0 0 0 4px var(--focus-ring);outline:none}
    textarea,.textarea{min-height:96px;resize:vertical}
    input:disabled,select:disabled,textarea:disabled{background-color:var(--surface-tonal);color:var(--text-muted);cursor:not-allowed}

    /* Access PIN: restore doctrine treatment (generic input[type=password] overrode it) */
    input.access-pin{width:320px;max-width:100%;min-height:56px;border:2px solid color-mix(in srgb,var(--color-cream) 42%,transparent);border-radius:var(--shape-corner-lg);background:var(--surface-input);padding:0 14px;font-size:1.65rem;font-weight:800;letter-spacing:.36em;text-align:center;box-shadow:0 0 0 1px rgba(255,255,255,.16),inset 0 0 0 1px rgba(17,23,33,.08);cursor:text;appearance:none;-webkit-appearance:none;box-sizing:border-box}
    input.access-pin::placeholder{color:var(--text-soft);opacity:1;letter-spacing:.26em}
    input.access-pin:focus{border-color:var(--color-primary);box-shadow:0 0 0 4px var(--focus-ring),inset 0 0 0 1px rgba(17,23,33,.08)}
    input.access-pin[aria-invalid="true"]{border-color:var(--danger-border);background:var(--danger-bg);box-shadow:0 0 0 4px rgba(245,184,177,.28),inset 0 0 0 1px rgba(17,23,33,.08)}
    input.access-pin:disabled{opacity:.78;cursor:wait}