@font-face {
    font-family: "Material Symbols Rounded";
    font-style: normal;
    font-weight: 400;
    font-display: block;
    src: url("fonts/material-symbols-rounded.woff2") format("woff2");
}

:root {
    --navy: #14233b;
    --navy-2: #1d3150;
    --ink: #172033;
    --muted: #6f7a8d;
    --line: #dfe4ec;
    --surface: #ffffff;
    --canvas: #f3f5f8;
    --blue: #2f6fed;
    --blue-soft: #eaf1ff;
    --pink: #ed2d83;
    --green: #1a9b67;
    --green-soft: #e6f7f0;
    --orange: #ee8a19;
    --red: #dd3f49;
    --shadow: 0 10px 30px rgba(20, 35, 59, .09);
    --radius: 16px;
}

* { box-sizing: border-box; }
html { color-scheme: light; }
body { margin: 0; background: var(--canvas); color: var(--ink); font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
body.recipe-modal-open, body.yarn-pricing-modal-open, body.yarn-create-modal-open, body.purchase-confirm-modal-open, body.manual-create-modal-open, body.card-modal-open { overflow: hidden; }
button, input, select, textarea { font: inherit; }
button, a, label { -webkit-tap-highlight-color: transparent; }
.material-symbols-rounded { display: inline-flex; align-items: center; justify-content: center; overflow: hidden; font-family: "Material Symbols Rounded"; font-size: 20px; font-style: normal; font-weight: 400; font-feature-settings: "liga"; -webkit-font-feature-settings: "liga"; -webkit-font-smoothing: antialiased; letter-spacing: normal; line-height: 1; text-transform: none; white-space: nowrap; word-wrap: normal; user-select: none; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; -webkit-user-drag: none; }
h1, h2, h3, p { margin-top: 0; }

.app-shell { min-height: 100vh; display: grid; grid-template-columns: 232px minmax(0, 1fr); }
.sidebar { position: sticky; top: 0; height: 100vh; z-index: 20; display: flex; flex-direction: column; padding: 22px 16px; color: #dbe5f6; background: linear-gradient(180deg, #13223a 0%, #101c30 100%); }
.logo { display: flex; align-items: center; gap: 11px; padding: 0 8px 26px; font-size: 17px; }
.logo > span { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 12px; font-size: 13px; font-weight: 900; letter-spacing: .04em; color: white; background: linear-gradient(135deg, var(--pink), #ff6d9f); box-shadow: 0 7px 16px rgba(237,45,131,.25); }
.sidebar .desktop-nav { display: grid; gap: 5px; }
.sidebar .desktop-nav a, .sidebar-bottom > a { min-height: 44px; display: flex; align-items: center; gap: 13px; padding: 0 13px; border-radius: 11px; color: #aebbd0; font-weight: 650; }
.sidebar .desktop-nav a > .nav-icon, .sidebar-bottom > a > .nav-icon { width: 20px; height: 20px; display: grid; flex: 0 0 auto; place-items: center; font-style: normal; }
.sidebar .desktop-nav a > .nav-icon .material-symbols-rounded, .sidebar-bottom > a > .nav-icon .material-symbols-rounded { font-size: 20px; }
.sidebar .desktop-nav a:hover, .sidebar .desktop-nav a.active, .sidebar-bottom > a:hover, .sidebar-bottom > a.active { color: #fff; background: rgba(255,255,255,.095); }
.sidebar .desktop-nav a em, .sidebar-bottom a em { margin-left: auto; min-width: 23px; height: 23px; padding: 0 7px; display: grid; place-items: center; border-radius: 999px; font-size: 11px; font-style: normal; color: white; background: var(--pink); }
.sidebar-bottom { margin-top: auto; display: grid; gap: 9px; }
.mobile-dock, .mobile-more-sheet { display: none !important; }
.profile-chip { display: flex; align-items: center; gap: 10px; padding: 12px 9px; border-top: 1px solid rgba(255,255,255,.1); }
.profile-chip div { min-width: 0; }
.profile-chip b, .profile-chip small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.profile-chip small { margin-top: 2px; color: #8495ae; }
.avatar { flex: 0 0 auto; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; font-weight: 800; color: white; background: linear-gradient(135deg, #5478e7, #7d55c7); }
.avatar.small { width: 26px; height: 26px; font-size: 11px; }
.avatar.large { width: 50px; height: 50px; font-size: 19px; }
.avatar-photo { object-fit: cover; background: #dfe6f0; }
.logout-btn { width: 100%; border: 0; padding: 9px; color: #8797af; background: transparent; cursor: pointer; text-align: left; }
.logout-btn:hover { color: #fff; }

.main-content { min-width: 0; padding: 0 28px 44px; transition: opacity .16s ease, transform .16s ease; }
.main-content.is-route-loading { opacity: .62; pointer-events: none; }
.main-content.is-route-entering { opacity: 0; transform: translateY(3px); }
.impersonation-banner { min-width: 0; min-height: 50px; display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; align-items: center; gap: 10px; margin-top: 14px; padding: 7px 8px 7px 9px; border: 1px solid #d9e2f3; border-radius: 13px; color: #24344d; background: linear-gradient(110deg, #f5f8ff 0%, #f8faff 58%, #fff 100%); box-shadow: 0 4px 14px rgba(20,35,59,.045); }
.impersonation-banner-icon { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 10px; color: #315fac; background: #e2ebfb; }
.impersonation-banner-icon .material-symbols-rounded { font-size: 19px; }
.impersonation-banner-copy { min-width: 0; display: grid; gap: 2px; }
.impersonation-banner-copy b, .impersonation-banner-copy small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.impersonation-banner-copy b { font-size: 11px; line-height: 1.25; }
.impersonation-banner-copy small { display: flex; align-items: center; gap: 3px; color: #76859b; font-size: 8px; font-weight: 650; line-height: 1.25; }
.impersonation-banner-copy small > .material-symbols-rounded { flex: 0 0 auto; color: #8a6a24; font-size: 11px; }
.impersonation-banner-action { flex: 0 0 auto; }
.impersonation-banner-action button { min-height: 34px; display: inline-flex; align-items: center; justify-content: center; gap: 5px; padding: 0 11px; border: 1px solid #d8e0eb; border-radius: 9px; color: #33445c; background: #fff; box-shadow: 0 2px 6px rgba(20,35,59,.05); font-size: 9px; font-weight: 800; cursor: pointer; transition: border-color .15s ease, color .15s ease, background .15s ease, transform .15s ease; }
.impersonation-banner-action button:hover { color: #2359ad; border-color: #bfcfed; background: #f8faff; transform: translateY(-1px); }
.impersonation-banner-action button:focus-visible { outline: 3px solid rgba(47,111,237,.23); outline-offset: 2px; }
.impersonation-banner-action .material-symbols-rounded { font-size: 16px; }
.topbar { min-height: 100px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.topbar-heading { min-width: 0; }
.topbar-kicker { display: flex; align-items: center; gap: 12px; }
.topbar h1 { margin: 3px 0 0; font-size: clamp(24px, 3vw, 34px); line-height: 1.05; letter-spacing: -.035em; }
.eyebrow { display: block; color: var(--blue); font-size: 11px; font-weight: 850; letter-spacing: .12em; text-transform: uppercase; }
.topbar-actions { position: relative; z-index: 45; display: flex; align-items: center; gap: 8px; }
.global-search-form label { width:min(250px,24vw); height:43px; display:flex; align-items:center; gap:7px; padding:0 11px; border:1px solid var(--line); border-radius:13px; background:#fff; box-shadow:0 4px 14px rgba(20,35,59,.04); }
.global-search-form span { color:#7a899e; font-size:19px; }
.global-search-form input { min-width:0; width:100%; padding:0; border:0; outline:0; background:transparent; font-size:12px; }
.global-search-main { display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:10px; padding:13px; border:1px solid var(--line); border-radius:15px; background:#fff; }
.global-search-main > span { color:#6c7d93; }
.global-search-main input { min-width:0; border:0; outline:0; font-size:15px; }
.search-total { color:var(--muted); }
.global-search-groups { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.global-search-groups section { min-width:0; padding:14px; border:1px solid var(--line); border-radius:15px; background:#fff; }
.global-search-groups h2 { display:flex; justify-content:space-between; margin:0 0 9px; font-size:16px; }
.global-search-groups h2 span { color:var(--muted); }
.search-result { min-width:0; display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:9px; padding:10px; border-radius:10px; color:var(--ink); text-decoration:none; }
.search-result:hover { background:#f4f7fb; }
.search-result > i { color:#5473a0; }
.search-result div { min-width:0; display:grid; gap:2px; }
.search-result b,.search-result small { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.search-result small { color:var(--muted); }
.report-kpis { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; }
.report-kpis article { display:grid; gap:4px; padding:16px; border:1px solid var(--line); border-radius:15px; background:#fff; }
.report-kpis span,.report-kpis small { color:var(--muted); }
.report-kpis strong { font-size:22px; }
.report-toolbar { display:flex; align-items:center; justify-content:space-between; gap:12px; margin:16px 0; padding:14px; border:1px solid var(--line); border-radius:15px; background:#fff; }
.report-toolbar h2 { margin:2px 0 0; }
.report-toolbar > div:last-child { display:flex; flex-wrap:wrap; gap:7px; }
.report-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.report-grid > section,.report-overdue { padding:15px; border:1px solid var(--line); border-radius:15px; background:#fff; }
.report-table { display:grid; gap:6px; }
.report-table article,.report-table > a { display:grid; grid-template-columns:minmax(0,1fr) auto auto; align-items:center; gap:12px; padding:9px 10px; border-radius:10px; color:var(--ink); background:#f6f8fb; text-decoration:none; }
.report-table article > div,.report-table > a > div { min-width:0; display:grid; }
.report-table small { color:var(--muted); }
.report-overdue { margin-top:14px; }
.report-finance-note { margin-top:14px; padding:12px 14px; border-radius:12px; color:#6c5921; background:#fff8df; }
.manual-create-open { width: 44px; height: 44px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 13px; color: white; background: var(--blue); box-shadow: 0 7px 18px rgba(47,111,237,.24); cursor: pointer; touch-action: manipulation; font-size: 24px; transition: filter .15s ease, transform .15s ease; }
.manual-create-open:hover { filter: brightness(1.05); transform: translateY(-1px); }
.manual-create-open:focus-visible { outline: 3px solid rgba(47,111,237,.28); outline-offset: 2px; }
.notification-center { position: relative; }
.bell { position: relative; width: 43px; height: 43px; display: grid; place-items: center; padding: 0; border: 1px solid var(--line); border-radius: 13px; color: #526075; background: white; box-shadow: 0 4px 14px rgba(20,35,59,.05); cursor: pointer; }
.bell:hover, .bell[aria-expanded="true"] { color: var(--blue); border-color: #cddafb; background: #f7f9ff; }
.bell:focus-visible { outline: 3px solid rgba(47,111,237,.22); outline-offset: 2px; }
.bell > .material-symbols-rounded { font-size: 23px; }
.bell .notification-count { position: absolute; top: -6px; right: -5px; min-width: 20px; height: 20px; padding: 0 5px; display: grid; place-items: center; border: 2px solid var(--canvas); border-radius: 999px; color: white; background: var(--pink); font-family: inherit; font-size: 10px; font-weight: 800; }
.notification-popover { position: absolute; top: calc(100% + 10px); right: 0; z-index: 90; width: min(390px, calc(100vw - 32px)); overflow: hidden; border: 1px solid rgba(215,222,232,.95); border-radius: 19px; background: rgba(255,255,255,.98); box-shadow: 0 24px 65px rgba(20,35,59,.22); backdrop-filter: blur(22px) saturate(135%); -webkit-backdrop-filter: blur(22px) saturate(135%); }
.notification-popover[hidden] { display: none; }
.notification-popover > header { min-height: 69px; display: flex; align-items: center; justify-content: space-between; gap: 13px; padding: 13px 14px 11px 16px; border-bottom: 1px solid #edf0f4; }
.notification-popover h2 { margin: 2px 0 0; font-size: 18px; letter-spacing: -.025em; }
.notification-popover .eyebrow { font-size: 8px; }
.notification-sound-toggle { min-height: 34px; display: inline-flex; align-items: center; gap: 6px; padding: 0 10px; border: 1px solid #dfe5ed; border-radius: 10px; color: #66758a; background: #f5f7fa; font-size: 9px; font-weight: 800; cursor: pointer; white-space: nowrap; }
.notification-sound-toggle > svg { width: 17px; height: 17px; fill: currentColor; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.notification-sound-toggle[aria-pressed="true"] { color: #176f50; border-color: #bce2d2; background: #eaf8f2; }
.notification-preview-list { max-height: min(430px, calc(100vh - 195px)); overflow-y: auto; overscroll-behavior: contain; padding: 7px; }
.notification-preview-item { position: relative; display: grid; grid-template-columns: 31px minmax(0, 1fr); gap: 9px; padding: 11px 10px; border-radius: 12px; }
.notification-preview-item + .notification-preview-item { border-top: 1px solid #edf0f4; border-radius: 0; }
.notification-preview-item.unread { background: #f4f7ff; }
.notification-preview-item.unread::after { content: ""; position: absolute; top: 16px; right: 10px; width: 7px; height: 7px; border-radius: 50%; background: var(--blue); box-shadow: 0 0 0 3px #e1eaff; }
.notification-preview-item > i { width: 31px; height: 31px; display: grid; place-items: center; border-radius: 10px; color: #42689f; background: #edf3fc; font-style: normal; }
.notification-preview-item > i .material-symbols-rounded { font-size: 17px; }
.notification-preview-item > div { min-width: 0; padding-right: 12px; }
.notification-preview-item p { margin: 0; color: #26344c; font-size: 11px; font-weight: 750; line-height: 1.35; }
.notification-preview-item small, .notification-preview-item time { display: block; margin-top: 4px; overflow: hidden; color: #8490a1; font-size: 8px; line-height: 1.3; text-overflow: ellipsis; white-space: nowrap; }
.notification-preview-empty { min-height: 125px; display: grid; place-items: center; color: #8a96a7; font-size: 11px; }
.notification-popover > footer { padding: 9px; border-top: 1px solid #edf0f4; background: #fafbfc; }
.notification-read-all { width: 100%; min-height: 38px; display: flex; align-items: center; justify-content: center; gap: 7px; padding: 0 12px; border: 0; border-radius: 11px; color: #315e9f; background: #eaf1ff; font-size: 10px; font-weight: 850; cursor: pointer; }
.notification-read-all > svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.notification-read-all:disabled { color: #99a4b3; background: #f0f2f5; cursor: default; }
.mobile-menu { display: none !important; }

.manual-create-modal { position: fixed; inset: 0; z-index: 150; display: grid; place-items: center; padding: 18px; background: rgba(9,16,29,.76); backdrop-filter: blur(12px) saturate(110%); -webkit-backdrop-filter: blur(12px) saturate(110%); }
.manual-create-modal[hidden] { display: none; }
.manual-create-dialog { width: min(1220px, 100%); max-height: min(900px, calc(100dvh - 36px)); display: grid; grid-template-rows: auto minmax(0, 1fr) auto; overflow: hidden; border: 1px solid rgba(255,255,255,.82); border-radius: 24px; background: #f5f7fb; box-shadow: 0 35px 110px rgba(4,11,23,.45); }
.manual-create-head { min-height: 88px; display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; padding: 20px 22px 17px; border-bottom: 1px solid #e0e6ef; background: rgba(255,255,255,.96); }
.manual-create-head h2 { margin: 4px 0 3px; font-size: 25px; line-height: 1.05; letter-spacing: -.035em; }
.manual-create-head p { margin: 0; color: var(--muted); font-size: 11px; }
.manual-create-head .manual-create-close { flex: 0 0 42px; width: 42px; height: 42px; border-radius: 13px; }
.manual-create-body { min-height: 0; display: grid; grid-template-columns: minmax(310px, 360px) minmax(0, 1fr); gap: 13px; padding: 13px; overflow: hidden; }
.manual-create-body section { min-width: 0; padding: 16px; border: 1px solid #dfe5ee; border-radius: 18px; background: #fff; box-shadow: 0 6px 22px rgba(20,35,59,.035); }
.manual-create-products { min-height: 0; display: flex; flex-direction: column; }
.manual-create-workspace { min-width: 0; display: grid; gap: 13px; overflow-y: auto; overscroll-behavior: contain; padding-right: 2px; }
.manual-create-section-title { display: flex; align-items: flex-start; gap: 11px; margin-bottom: 13px; }
.manual-create-section-title > span { flex: 0 0 auto; width: 31px; height: 31px; display: grid; place-items: center; border-radius: 10px; color: #fff; background: linear-gradient(135deg, #387cf3, #2862d7); box-shadow: 0 6px 14px rgba(47,111,237,.2); font-size: 12px; font-weight: 850; }
.manual-create-section-title > div { min-width: 0; }
.manual-create-section-title h3 { margin: 1px 0 2px; font-size: 16px; letter-spacing: -.02em; }
.manual-create-section-title p { margin: 0; color: var(--muted); font-size: 10px; line-height: 1.4; }
.manual-selected-count { margin-left: auto; padding: 5px 8px; border-radius: 999px; color: #2f65c8; background: #edf4ff; font-size: 9px; white-space: nowrap; }
.manual-create-search { min-height: 45px; display: flex; align-items: center; gap: 8px; margin-bottom: 10px; padding: 0 12px; border: 1px solid #ccd7e6; border-radius: 12px; color: #7a899d; background: #f9fbfd; transition: border-color .15s ease, box-shadow .15s ease, background .15s ease; }
.manual-create-search:focus-within { border-color: #82aaf2; background: #fff; box-shadow: 0 0 0 3px rgba(47,111,237,.1); }
.manual-create-search .material-symbols-rounded { font-size: 19px; }
.manual-create-search input { min-width: 0; width: 100%; height: 43px; padding: 0; border: 0; outline: 0; color: var(--ink); background: transparent; font-size: 12px; }
.manual-create-designs { min-height: 0; display: grid; align-content: start; gap: 7px; overflow-y: auto; overscroll-behavior: contain; padding: 1px 3px 1px 1px; }
.manual-design-option { display: block; cursor: pointer; touch-action: manipulation; }
.manual-design-option[hidden] { display: none; }
.manual-design-option > input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.manual-design-option > span { min-height: 64px; display: grid; grid-template-columns: 48px minmax(0, 1fr) 25px; align-items: center; gap: 10px; padding: 7px; border: 1px solid #dfe5ed; border-radius: 13px; color: #33455f; background: #fbfcfe; transition: border-color .14s ease, background .14s ease, box-shadow .14s ease, transform .14s ease; }
.manual-design-option:hover > span { border-color: #b8c9e2; background: #fff; transform: translateY(-1px); }
.manual-design-option > input:checked + span { border-color: #78a4f5; background: #edf4ff; box-shadow: 0 0 0 2px rgba(47,111,237,.1); }
.manual-design-option > input:focus-visible + span { outline: 3px solid rgba(47,111,237,.25); outline-offset: 2px; }
.manual-design-option > span > i { width: 48px; height: 48px; display: grid; place-items: center; overflow: hidden; border-radius: 11px; color: #fff; background: linear-gradient(135deg, #172a48, #315d97); font-size: 11px; font-style: normal; font-weight: 850; }
.manual-design-option img { width: 100%; height: 100%; object-fit: cover; }
.manual-design-option > span > span { min-width: 0; }
.manual-design-option b, .manual-design-option small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.manual-design-option b { font-size: 11px; }
.manual-design-option small { margin-top: 4px; color: #7c899b; font-size: 9px; }
.manual-design-check { width: 23px; height: 23px; display: grid; place-items: center; border: 1px solid #d9e1ec; border-radius: 50%; color: #75859a; background: #fff; font-size: 15px; font-style: normal; }
.manual-design-option > input:checked + span .manual-design-check { color: #fff; border-color: var(--blue); background: var(--blue); }
.manual-create-no-results { padding: 28px 12px; border: 1px dashed #ccd6e3; border-radius: 12px; color: #8491a3; text-align: center; font-size: 10px; }
.manual-selected-products { display: grid; gap: 9px; }
.manual-selected-empty { min-height: 116px; display: grid; place-items: center; align-content: center; gap: 5px; padding: 18px; border: 1px dashed #cbd7e6; border-radius: 14px; color: #7b899c; background: #fafcff; text-align: center; }
.manual-selected-empty[hidden] { display: none; }
.manual-selected-empty > span { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 12px; color: #4c75b5; background: #eaf2ff; }
.manual-selected-empty b { color: #44566f; font-size: 11px; }
.manual-selected-empty p { margin: 0; font-size: 10px; }
.manual-selected-item { overflow: hidden; border: 1px solid #d9e2ee; border-radius: 15px; background: #fbfcfe; }
.manual-selected-item > header { min-height: 61px; display: grid; grid-template-columns: 44px minmax(0,1fr) 34px; align-items: center; gap: 10px; padding: 8px 9px; border-bottom: 1px solid #e8edf3; background: #fff; }
.manual-selected-thumb { width: 44px; height: 44px; display: grid; place-items: center; overflow: hidden; border-radius: 10px; color: #fff; background: linear-gradient(135deg,#172a48,#315d97); font-size: 10px; font-style: normal; font-weight: 850; }
.manual-selected-thumb img { width: 100%; height: 100%; object-fit: cover; }
.manual-selected-item > header > div { min-width: 0; }
.manual-selected-item > header b, .manual-selected-item > header small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.manual-selected-item > header b { font-size: 11px; }
.manual-selected-item > header small { margin-top: 3px; color: #7b899b; font-size: 9px; }
.manual-item-remove { width: 34px; height: 34px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 10px; color: #8b96a7; background: #f3f5f8; cursor: pointer; font-size: 18px; }
.manual-item-remove:hover { color: #c43d48; background: #fff0f1; }
.manual-item-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; padding: 10px; }
.manual-item-fields > label { display: grid; gap: 5px; color: #647287; font-size: 10px; font-weight: 800; }
.manual-item-fields .wide { grid-column: 1 / -1; }
.manual-item-fields input:not([type="file"]), .manual-item-fields select { width: 100%; min-height: 40px; padding: 8px 9px; border: 1px solid #d4ddea; border-radius: 10px; color: var(--ink); background: #fff; font: inherit; font-size: 11px; font-weight: 650; }
.manual-quantity-control { min-height: 40px; display: grid; grid-template-columns: 38px minmax(44px,1fr) 38px; overflow: hidden; border: 1px solid #d4ddea; border-radius: 10px; background: #fff; }
.manual-quantity-control button { display: grid; place-items: center; padding: 0; border: 0; color: #526783; background: #f3f6fa; cursor: pointer; font-size: 17px; }
.manual-quantity-control input { min-width: 0; min-height: 38px !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; text-align: center; -moz-appearance: textfield; }
.manual-quantity-control input::-webkit-inner-spin-button { display: none; }
.manual-item-upload { display: grid; gap: 5px; }
.manual-item-upload-label { color: #647287; font-size: 10px; font-weight: 800; }
.manual-upload-drop { min-height: 72px; display: grid; grid-template-columns: 40px minmax(0,1fr) auto; align-items: center; gap: 10px; padding: 10px; border: 1px dashed #afc3df; border-radius: 12px; color: #49617f; background: linear-gradient(135deg,#f9fbff,#f3f7fd); cursor: pointer; transition: border-color .15s ease, background .15s ease, transform .15s ease; }
.manual-upload-drop[hidden] { display: none; }
.manual-upload-drop:hover, .manual-upload-drop.is-dragging { border-color: #5e91eb; background: #edf4ff; transform: translateY(-1px); }
.manual-upload-drop:focus-within { border-color: #5e91eb; outline: 3px solid rgba(47,111,237,.18); outline-offset: 2px; background: #f4f8ff; }
.manual-upload-drop input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.manual-upload-icon { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 11px; color: #2f6fed; background: #e4eeff; font-size: 21px; }
.manual-upload-drop > span:nth-of-type(2) { min-width: 0; }
.manual-upload-drop b, .manual-upload-drop small { display: block; }
.manual-upload-drop b { font-size: 11px; }
.manual-upload-drop small { margin-top: 3px; color: #8190a3; font-size: 9px; }
.manual-upload-drop em { padding: 7px 9px; border: 1px solid #cfdaea; border-radius: 9px; color: #47617f; background: #fff; font-size: 9px; font-style: normal; font-weight: 850; }
.manual-upload-preview { min-height: 68px; display: grid; grid-template-columns: 48px minmax(0,1fr) auto; align-items: center; gap: 10px; padding: 9px; border: 1px solid #c9d9ee; border-radius: 12px; background: #f3f8ff; }
.manual-upload-preview[hidden] { display: none; }
.manual-upload-preview > img { width: 48px; height: 48px; object-fit: cover; border-radius: 10px; }
.manual-upload-preview > span:not(.manual-upload-preview-actions) { min-width: 0; }
.manual-upload-preview b, .manual-upload-preview small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.manual-upload-preview b { font-size: 10px; }
.manual-upload-preview small { margin-top: 3px; color: #76869b; font-size: 9px; }
.manual-upload-preview-actions { display: flex; gap: 5px; }
.manual-upload-preview-actions button { width: 34px; height: 34px; display: grid; place-items: center; padding: 0; border: 1px solid #d3deeb; border-radius: 10px; color: #60748f; background: #fff; cursor: pointer; font-size: 16px; }
.manual-upload-preview-actions button:last-child:hover { color: #c43d48; border-color: #efc7ca; background: #fff1f2; }
.manual-field-group + .manual-field-group { margin-top: 15px; padding-top: 15px; border-top: 1px solid #edf0f4; }
.manual-field-group h4 { display: flex; align-items: center; gap: 7px; margin: 0 0 10px; color: #43556e; font-size: 10px; }
.manual-field-group h4 span { width: 25px; height: 25px; display: grid; place-items: center; border-radius: 8px; color: #3b69a8; background: #edf3fc; font-size: 15px; }
.manual-create-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.manual-create-fields label { min-width: 0; display: grid; gap: 5px; color: #647287; font-size: 10px; font-weight: 800; }
.manual-create-fields label[hidden] { display: none; }
.manual-create-fields label > small { color: #98a2b0; font-size: 8px; font-weight: 650; }
.manual-create-fields label > em { color: #d84450; font-style: normal; }
.manual-create-fields .wide { grid-column: 1 / -1; }
.manual-create-fields input:not([type="checkbox"]), .manual-create-fields select, .manual-create-fields textarea { width: 100%; min-height: 42px; padding: 9px 10px; border: 1px solid #d5dde8; border-radius: 10px; color: var(--ink); background: #fff; font: inherit; font-size: 11px; font-weight: 600; transition: border-color .15s ease, box-shadow .15s ease; }
.manual-create-fields textarea { min-height: 62px; resize: vertical; }
.manual-create-fields input:focus, .manual-create-fields select:focus, .manual-create-fields textarea:focus, .manual-item-fields input:focus, .manual-item-fields select:focus { border-color: #78a3ed; outline: 0; box-shadow: 0 0 0 3px rgba(47,111,237,.1); }
.manual-create-fields .check { min-height: 40px; display: flex; align-items: center; gap: 9px; padding: 9px 11px; border: 1px solid #e1e6ed; border-radius: 11px; color: #485a73; background: #fafbfc; cursor: pointer; }
.manual-create-fields .check input { width: 18px; height: 18px; margin: 0; accent-color: var(--blue); }
.manual-date-field { min-width: 0; display: grid; gap: 5px; color: #647287; font-size: 10px; font-weight: 800; }
.manual-payment-compact { grid-template-columns: minmax(110px, 1fr) minmax(110px, 1fr) 105px minmax(150px, 1.15fr); }
.manual-payment-balance { margin: -2px 0 0; padding: 7px 9px; border-radius: 9px; color: #55677f; background: #f1f5fa; font-size: 9px; font-weight: 750; }
.manual-payment-balance.is-paid { color: #087653; background: #e9f8f2; }
.manual-payment-balance.is-error { color: #ad3040; background: #fff0f2; }
.manual-create-actions { display: grid; grid-template-columns: minmax(0,1fr) auto auto; align-items: center; gap: 9px; padding: 12px 16px; border-top: 1px solid #dfe5ed; background: rgba(255,255,255,.98); }
.manual-create-actions .btn { min-width: 145px; min-height: 44px; }
.manual-create-total { min-width: 0; display: flex; align-items: baseline; gap: 7px; margin: 0; }
.manual-create-total b { font-size: 22px; }
.manual-create-total span { color: #6f7d91; font-size: 10px; font-weight: 750; }
.manual-create-total.is-over-limit b, .manual-create-total.is-over-limit span { color: #c73545; }
.manual-create-dialog[aria-busy="true"] .manual-create-body { opacity: .62; pointer-events: none; }

.flash { margin: 0 0 18px; padding: 13px 16px; border: 1px solid #bfe7d7; border-radius: 12px; color: #11734e; background: #ecfaf4; font-weight: 650; }
.flash.error { border-color: #f3c5c9; color: #9d2430; background: #fff1f2; }
.muted { color: var(--muted); }
.small-text { font-size: 12px; }

.view-switch { width: fit-content; display: flex; padding: 3px; border: 1px solid var(--line); border-radius: 10px; background: white; box-shadow: 0 3px 10px rgba(20,35,59,.04); }
.view-switch a { min-height: 28px; display: flex; align-items: center; padding: 0 12px; border-radius: 7px; color: var(--muted); font-size: 10px; font-weight: 800; }
.view-switch a.active { color: white; background: var(--navy); }
.processor-mode-switch { min-height: 34px; display: inline-flex; align-items: center; gap: 8px; padding: 0 8px 0 10px; border: 1px solid #d8e0eb; border-radius: 10px; color: #66758a; background: #fff; box-shadow: 0 3px 10px rgba(20,35,59,.04); font-size: 9px; font-weight: 800; white-space: nowrap; transition: border-color .15s ease, color .15s ease, background .15s ease; }
.processor-mode-switch > i { position: relative; width: 28px; height: 16px; flex: 0 0 auto; border-radius: 999px; background: #cfd7e3; transition: background .15s ease; }
.processor-mode-switch > i::after { content: ""; position: absolute; top: 3px; left: 3px; width: 10px; height: 10px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(20,35,59,.22); transition: transform .15s ease; }
.processor-mode-switch:hover { color: #245fc7; border-color: #bfd2f6; background: #f5f8ff; }
.processor-mode-switch.is-active { color: #245fc7; border-color: #bfd2f6; background: #eaf2ff; }
.processor-mode-switch.is-active > i { background: #2f6fed; }
.processor-mode-switch.is-active > i::after { transform: translateX(12px); }
.processor-mode-switch:focus-visible { outline: 3px solid rgba(47,111,237,.24); outline-offset: 2px; }

.mobile-board-tabs { display: none; }
.board { display: flex; gap: 16px; align-items: flex-start; overflow-x: auto; padding: 0 2px 20px; scroll-snap-type: x proximity; transition: opacity .15s ease; }
.board.is-updating { opacity: .58; pointer-events: none; }
.board-column { flex: 0 0 330px; max-height: calc(100vh - 150px); display: flex; flex-direction: column; border: 1px solid #e2e7ef; border-radius: 17px; background: #e9edf3; scroll-snap-align: start; }
.board-column.drag-over { outline: 3px solid rgba(47,111,237,.35); background: #dfe8fb; }
.column-head { min-height: 56px; display: flex; align-items: center; justify-content: space-between; padding: 0 16px; border-bottom: 1px solid rgba(20,35,59,.07); }
.column-head h2 { margin: 0; font-size: 15px; }
.column-head span { min-width: 27px; height: 27px; padding: 0 8px; display: grid; place-items: center; border-radius: 999px; background: rgba(20,35,59,.09); color: #526075; font-size: 12px; font-weight: 800; }
.column-list { min-height: 170px; overflow-y: auto; padding: 12px; }
.empty-column { min-height: 110px; display: grid; place-items: center; border: 1px dashed #c8d0db; border-radius: 12px; color: #9aa5b6; font-size: 13px; }

.work-card { position: relative; margin-bottom: 12px; overflow: hidden; border: 1px solid #dfe4eb; border-radius: 14px; background: white; box-shadow: 0 3px 10px rgba(20,35,59,.055); transition: transform .18s ease, box-shadow .18s ease; }
.work-card[draggable=true] { cursor: grab; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.work-card[draggable=true] input, .work-card[draggable=true] textarea, .work-card[draggable=true] select { user-select: text; -webkit-user-select: text; }
.work-card.dragging { opacity: .5; transform: rotate(1deg); }
.touch-drag-active { overflow: hidden; user-select: none; -webkit-user-select: none; }
.touch-drag-ghost { position: fixed; z-index: 1000; max-height: 52vh; overflow: hidden; pointer-events: none; opacity: .94; transform: rotate(1.5deg) scale(.98); box-shadow: 0 22px 55px rgba(20,35,59,.32); }
.touch-drag-source { opacity: .28 !important; }
.live-toast { position: fixed; right: 22px; top: 22px; z-index: 1200; max-width: min(390px, calc(100vw - 32px)); padding: 13px 16px; border-radius: 12px; color: white; background: #16845c; box-shadow: 0 14px 38px rgba(20,35,59,.25); font-size: 13px; font-weight: 750; opacity: 0; transform: translateY(-10px); transition: opacity .2s ease, transform .2s ease; }
.live-toast.visible { opacity: 1; transform: translateY(0); }
.live-toast.error { background: #c73743; }
.work-card:hover { box-shadow: 0 8px 20px rgba(20,35,59,.11); }
.work-card.is-priority { border-left: 4px solid var(--orange); }
.work-card.is-overdue { box-shadow: inset 4px 0 0 #e5484d, 0 3px 10px rgba(20,35,59,.055); }
.work-card.is-blocked { outline: 2px solid rgba(229,72,77,.22); }
.deadline-badge { display:inline-flex; align-items:center; gap:4px; }
.deadline-badge.state-overdue,.deadline-inline.state-overdue,.deadline-text.state-overdue { color:#b42318; background:#feeceb; }
.deadline-badge.state-today,.deadline-badge.state-soon,.deadline-inline.state-today,.deadline-inline.state-soon { color:#9a6700; background:#fff3d6; }
.blocked-badge { display:inline-flex; align-items:center; gap:4px; color:#b42318; background:#feeceb; }
.blocked-badge .material-symbols-rounded { font-size:14px; }
.deadline-text { border-radius:8px; padding:3px 7px; }
.deadline-form { display:grid; grid-template-columns:minmax(120px,.65fr) minmax(180px,1.5fr) auto; gap:8px; align-items:end; }
.deadline-form label { min-width:0; }
.deadline-form input,.order-deadline-form input[type="date"] { width:100%; }
.deadline-inline { display:inline-flex; align-items:center; gap:4px; margin-top:6px; padding:4px 7px; border-radius:8px; font-size:12px; font-weight:700; }
.deadline-inline .material-symbols-rounded { font-size:15px; }
.order-deadline-card.state-overdue { border-color:#f2a4a4; background:#fff8f7; }
.order-deadline-form { display:grid; gap:8px; margin-top:8px; }
.date-picker { position: relative; min-width: 0; }
.date-picker-native { width: 100%; min-height: 40px; padding: 8px 10px; border: 1px solid #d5dde8; border-radius: 10px; color: var(--ink); background: #fff; font: inherit; }
.date-picker.is-enhanced .date-picker-native { display: none; }
.date-picker-trigger { width: 100%; min-height: 40px; display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: 1px solid #d5dde8; border-radius: 10px; color: #68778b; background: #fff; cursor: pointer; font: inherit; font-size: 10px; font-weight: 750; text-align: left; }
.date-picker-trigger[hidden] { display: none; }
.date-picker.has-value .date-picker-trigger { color: var(--ink); }
.date-picker-trigger:hover, .date-picker-trigger:focus-visible, .date-picker.is-open .date-picker-trigger { border-color: #78a3ed; outline: 3px solid rgba(47,111,237,.12); }
.date-picker-trigger .material-symbols-rounded { color: #4c75b7; font-size: 18px; }
.date-picker-popover { position: absolute; z-index: 85; left: 0; top: calc(100% + 7px); width: min(310px, calc(100vw - 32px)); padding: 10px; border: 1px solid #dce3ec; border-radius: 14px; color: var(--ink); background: #fff; box-shadow: 0 18px 48px rgba(20,35,59,.2); }
.date-picker-popover[hidden] { display: none; }
.date-picker-head { display: grid; grid-template-columns: 34px minmax(0, 1fr) 34px; align-items: center; gap: 5px; }
.date-picker-head strong { text-align: center; font-size: 12px; text-transform: capitalize; }
.date-picker-head button { width: 34px; height: 34px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 9px; color: #64748a; background: transparent; cursor: pointer; }
.date-picker-head button:hover, .date-picker-head button:focus-visible { color: #245fc7; background: #edf4ff; outline: 2px solid rgba(47,111,237,.16); }
.date-picker-head .material-symbols-rounded { font-size: 19px; }
.date-picker-weekdays, .date-picker-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.date-picker-weekdays { margin: 8px 0 3px; }
.date-picker-weekdays span { display: grid; place-items: center; height: 24px; color: #8a96a7; font-size: 8px; font-weight: 800; text-transform: capitalize; }
.date-picker-grid button { aspect-ratio: 1; min-width: 0; display: grid; place-items: center; padding: 0; border: 0; border-radius: 9px; color: #34445c; background: transparent; cursor: pointer; font: inherit; font-size: 10px; font-weight: 700; }
.date-picker-grid button:hover, .date-picker-grid button:focus-visible { color: #1f56ae; background: #eaf2ff; outline: 2px solid rgba(47,111,237,.2); outline-offset: -1px; }
.date-picker-grid button.is-outside { color: #b2bac5; }
.date-picker-grid button.is-today { box-shadow: inset 0 0 0 1px #9bb9ed; }
.date-picker-grid button.is-selected { color: #fff; background: #172033; box-shadow: none; }
.date-picker-actions { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 7px; padding-top: 8px; border-top: 1px solid #edf0f4; }
.date-picker-actions button { min-height: 30px; padding: 0 8px; border: 0; border-radius: 8px; color: #526783; background: #f2f5f9; cursor: pointer; font: inherit; font-size: 9px; font-weight: 800; }
.date-picker-actions button:last-child { color: #245fc7; background: #eaf2ff; }
.card-art { width: 100%; height: 148px; object-fit: cover; background: #dfe6f0; }
.board-image-split { position: relative; height: 148px; display: grid; grid-template-columns: 1fr 1fr; gap: 1px; overflow: hidden; border-bottom: 1px solid var(--line); background: var(--line); }
.board-image-pane { position: relative; min-width: 0; height: 148px; display: block; overflow: hidden; padding: 0; border: 0; border-radius: 0; color: inherit; background: #e8edf4; text-align: left; }
.board-image-pane .card-art { display: block; height: 148px; }
.board-image-pane.template-preview-trigger { border-radius: 0; cursor: zoom-in; }
.board-image-pane.template-preview-trigger > span:not(.board-image-empty) { z-index: 3; }
.worker-board-card .board-image-pane.card-modal-trigger { cursor: pointer; }
.worker-board-card .board-image-pane.card-modal-trigger:focus-visible { z-index: 4; outline: 3px solid rgba(47,111,237,.5); outline-offset: -3px; }
.board-image-label { position: absolute; left: 8px; top: 8px; z-index: 3; max-width: calc(100% - 45px); padding: 5px 7px; overflow: hidden; border-radius: 7px; color: #253a58; background: rgba(255,255,255,.91); box-shadow: 0 3px 9px rgba(20,35,59,.14); font-size: 8px; font-style: normal; font-weight: 850; text-overflow: ellipsis; text-transform: uppercase; letter-spacing: .04em; white-space: nowrap; pointer-events: none; }
.board-image-empty { width: 100%; height: 148px; display: grid; place-items: center; padding: 34px 12px 12px; color: #8995a7; background: repeating-linear-gradient(135deg, #f2f4f7 0, #f2f4f7 10px, #e9edf2 10px, #e9edf2 20px); font-size: 9px; font-style: normal; font-weight: 750; text-align: center; }
.board-image-split .board-stage-photo-trigger { position: absolute; left: 50%; bottom: 8px; z-index: 5; width: auto; min-height: 29px; display: inline-flex; align-items: center; justify-content: center; padding: 0 10px; border: 1px solid rgba(255,255,255,.42); border-radius: 8px; color: white; background: rgba(25,43,70,.9); box-shadow: 0 5px 15px rgba(14,29,52,.25); cursor: zoom-in; transform: translateX(-50%); white-space: nowrap; }
.board-image-split .board-stage-photo-trigger:hover, .board-image-split .board-stage-photo-trigger:focus-visible { background: #1d3b67; outline: 3px solid rgba(47,111,237,.28); outline-offset: 1px; }
.board-image-split .board-stage-photo-trigger b { font-size: 9px; font-weight: 850; }
.art-placeholder { position: relative; display: grid; place-items: center; overflow: hidden; color: white; background: linear-gradient(135deg, #283f65, #5d7daf); }
.art-placeholder::before, .art-placeholder::after { content: ""; position: absolute; width: 150px; height: 150px; border-radius: 42% 58% 68% 32% / 45% 35% 65% 55%; background: rgba(255,255,255,.12); transform: rotate(28deg); }
.art-placeholder::before { left: -45px; top: -80px; }
.art-placeholder::after { right: -70px; bottom: -90px; }
.art-placeholder span { position: absolute; left: 13px; top: 12px; z-index: 1; padding: 5px 8px; border-radius: 7px; background: rgba(0,0,0,.22); font-size: 10px; font-weight: 850; letter-spacing: .05em; text-transform: uppercase; }
.art-placeholder strong { position: relative; z-index: 1; font-size: 42px; opacity: .82; letter-spacing: -.08em; }
.art-placeholder.type-custom { background: linear-gradient(135deg, #6944a9, #e269a9); }
.art-placeholder.type-mouse { background: linear-gradient(135deg, #ef7f2a, #f2c14c); }
.art-placeholder.type-car { background: linear-gradient(135deg, #2b2f38, #cc3b4b); }
.art-placeholder.type-floor { background: linear-gradient(135deg, #188f7c, #60c6aa); }
.card-body { padding: 13px 14px 14px; }
.card-option-chips { display: flex; flex-wrap: wrap; gap: 5px; margin: 7px 0 2px; }
.card-option-chips span { min-width: 0; display: inline-flex; align-items: center; gap: 4px; max-width: 100%; padding: 4px 7px; overflow: hidden; border-radius: 7px; color: #8b3d46; background: #fff0f1; font-size: 8px; font-weight: 850; text-overflow: ellipsis; white-space: nowrap; }
.card-option-chips .material-symbols-rounded { flex: 0 0 auto; font-size: 13px; }
.card-topline { display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; gap: 8px; }
.order-pill { min-width: 0; display: flex; align-items: center; flex-wrap: wrap; gap: 3px; color: #78859a; font-size: 11px; font-weight: 800; letter-spacing: .02em; }
.order-pill a { max-width: 145px; overflow: hidden; border-radius: 4px; color: #61728a; text-overflow: ellipsis; white-space: nowrap; transition: color .15s ease, background .15s ease; }
.order-pill a:hover, .order-pill a:focus-visible { color: #245fc7; background: #edf4ff; outline: 2px solid rgba(47,111,237,.12); outline-offset: 1px; }
.card-topline .badge-row { margin-left: auto; justify-content: flex-end; }
.badge-row { display: flex; align-items: center; flex-wrap: wrap; gap: 5px; }
.badge { display: inline-flex; align-items: center; min-height: 23px; padding: 0 8px; border-radius: 7px; font-size: 10px; font-weight: 850; white-space: nowrap; }
.type-badge { color: #225ab8; background: #e4efff; }
.size-badge { color: #425b78; background: #edf2f8; }
.type-custom { color: #85329d; background: #f5e7fa; }
.type-mouse { color: #a45e00; background: #fff0cf; }
.type-car { color: #9e2d39; background: #ffe5e8; }
.type-floor { color: #0d785f; background: #dff6ee; }
.urgent { color: #fff; background: #d92d20; }
.ready-to-ship { color: #067647; background: #dcfae6; }
.success-badge { color: #0f754e; background: #dff5ec; }
.ready-badge { color: #2458a7; background: #e2ecff; }
.supplier-badge { color: #65501e; background: #f5edd5; }
.work-card h3 { margin: 10px 0 8px; font-size: 15px; line-height: 1.32; letter-spacing: -.01em; }
.card-pinned-comment { min-width: 0; display: grid; grid-template-columns: 25px minmax(0, 1fr) 17px; align-items: center; gap: 8px; margin: 9px 0 2px; padding: 8px 9px; border: 1px solid #cfe0ff; border-radius: 10px; color: #355b98; background: #f0f6ff; box-shadow: inset 3px 0 0 #75a2f2; }
.card-pinned-comment .avatar.small { width: 25px; height: 25px; color: #315fb6; background: #dceaff; font-size: 10px; }
.card-pinned-comment p { min-width: 0; display: -webkit-box; margin: 0; overflow: hidden; font-size: 10px; font-weight: 700; line-height: 1.38; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.card-pinned-comment > .material-symbols-rounded { align-self: start; color: #2f6fed; font-size: 15px; transform: rotate(24deg); }
.card-meta { display: flex; align-items: center; gap: 14px; color: #707c8f; font-size: 12px; }
.card-meta > span { display: inline-flex; align-items: center; gap: 4px; }
.card-meta .material-symbols-rounded { font-size: 15px; }
.assignee { display: flex; align-items: center; gap: 7px; margin-top: 10px; color: #526075; font-size: 12px; font-weight: 700; }
.elapsed { margin-top: 7px; color: #7b8799; font-size: 10px; }
.quick-actions { display: flex; gap: 7px; margin-top: 12px; }
.quick-actions form { flex: 1; }
.worker-board-card .quick-actions > form:only-child { flex: 1 1 100%; }
.quick-actions .card-archive-form { flex: 0 0 auto; margin-left: auto; }
.quick-actions .btn { width: 100%; }
.icon-btn.card-archive-button { width: 37px; min-width: 37px; flex: 0 0 37px; color: #66758a; background: #f7f9fc; font-size: 18px; transition: color .15s ease, border-color .15s ease, background .15s ease, box-shadow .15s ease, transform .15s ease; }
.card-archive-button:hover, .card-archive-button:focus-visible { color: #294f85; border-color: #aebed4; background: #eaf0f7; box-shadow: 0 4px 12px rgba(20,35,59,.1); outline: none; transform: translateY(-1px); }
.icon-btn { min-width: 37px; height: 37px; border: 1px solid var(--line); border-radius: 10px; color: #59667a; background: white; cursor: pointer; }

.btn { min-height: 36px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 0 12px; border: 0; border-radius: 9px; cursor: pointer; font-size: 12px; font-weight: 800; transition: filter .15s ease, transform .15s ease; }
.btn:hover { filter: brightness(.97); }
.btn:active { transform: translateY(1px); }
.btn-primary { color: white; background: var(--blue); }
.btn-soft { color: #304562; background: #edf1f6; }
.btn-warn { color: #8e4c04; background: #fff0d5; }
.btn-camera { color: white; background: linear-gradient(135deg, #2f6fed, #4d83f2); }
.btn .material-symbols-rounded, .btn-camera .material-symbols-rounded { font-size: 18px; }
.board-stage-photo-trigger .material-symbols-rounded { font-size: 15px; }
.btn-large { min-height: 48px; font-size: 14px; }
.camera-input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

.card-details { padding: 14px; border-top: 1px solid var(--line); background: #fbfcfe; }
.priority-toggle-form { position: relative; width: max-content; }
.priority-toggle-button { position: relative; color: #9a5b0a; background: #fff4df; }
.priority-toggle-button:hover, .priority-toggle-button:focus-visible { color: #7d4300; background: #ffe7bc; outline: 3px solid rgba(230,145,24,.18); outline-offset: 2px; }
.priority-toggle-button::after { content: attr(data-tooltip); position: absolute; left: 0; bottom: calc(100% + 8px); z-index: 8; width: max-content; max-width: 210px; padding: 7px 9px; border-radius: 7px; color: white; background: #20334f; box-shadow: 0 7px 20px rgba(20,35,59,.2); font-family: inherit; font-size: 10px; font-weight: 750; line-height: 1.25; white-space: nowrap; pointer-events: none; opacity: 0; transform: translateY(4px); transition: opacity .14s ease, transform .14s ease; }
.priority-toggle-button:hover::after, .priority-toggle-button:focus-visible::after { opacity: 1; transform: translateY(0); }
.order-details-panel { margin-bottom: 13px; padding: 10px; border: 1px solid #dce4ef; border-radius: 10px; background: #f1f5fa; }
.order-details-panel summary { cursor: pointer; color: #3b5574; font-size: 11px; font-weight: 850; }
.order-details-panel dl { display: grid; gap: 6px; margin: 10px 0 0; }
.order-details-panel dl div { display: grid; grid-template-columns: 66px 1fr; gap: 8px; }
.order-details-panel dt { color: #7f8a9b; font-size: 9px; font-weight: 800; text-transform: uppercase; }
.order-details-panel dd { margin: 0; font-size: 10px; overflow-wrap: anywhere; }
.customer-comment { margin-top: 10px; padding-top: 9px; border-top: 1px solid #d8e0ea; }
.customer-comment p { margin: 0 0 8px; font-size: 10px; line-height: 1.45; }
.share-comment-form { display: grid; grid-template-columns: 1fr auto; gap: 6px; }
.visual-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.template-preview-trigger { position: relative; width: 100%; display: block; overflow: hidden; padding: 0; border: 0; border-radius: 9px; background: transparent; cursor: zoom-in; }
.template-preview-trigger img { transition: transform .18s ease, filter .18s ease; }
.template-preview-trigger:hover img { transform: scale(1.025); filter: brightness(.96); }
.template-preview-trigger > span { position: absolute; right: 7px; top: 7px; width: 25px; height: 25px; display: grid; place-items: center; border-radius: 8px; color: #263a56; background: rgba(255,255,255,.9); box-shadow: 0 3px 10px rgba(20,35,59,.18); font-size: 13px; font-weight: 900; }
.board-detail-image { min-height: 90px; }
.board-detail-image > .art-placeholder,
.board-detail-image > .empty-visual { width: 100%; }
.field-label { display: block; margin-bottom: 7px; color: #7f8a9b; font-size: 10px; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
.mini-art { height: 90px; border-radius: 9px; }
.empty-visual { height: 90px; display: grid; place-items: center; border: 1px dashed #cdd5e1; border-radius: 9px; color: #9aa5b6; font-size: 11px; text-align: center; }
.detail-section { margin-top: 14px; }
.yarn-list, .recipe-row { display: flex; flex-wrap: wrap; gap: 6px; }
.yarn-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 8px; border: 1px solid #e1e6ed; border-radius: 8px; background: white; color: #59667a; font-size: 10px; font-weight: 700; }
.yarn-chip i, .yarn-swatch { flex: 0 0 auto; width: 15px; height: 15px; border-radius: 50%; background: var(--yarn-color, #a0a0a0); box-shadow: inset 0 0 0 1px rgba(0,0,0,.14), 0 0 0 1px rgba(255,255,255,.7); }
.yarn-chip b { margin-left: 2px; color: #33465f; }
.yarn-consumption-warning { padding: 9px 10px; border-radius: 9px; color: #9b5814; background: #fff2dd; font-size: 10px; line-height: 1.45; }
select[name="yarn_id"].has-yarn-color { border-left: 12px solid var(--selected-yarn-color); padding-left: 8px; }
.inline-form { display: flex; align-items: flex-end; gap: 7px; }
.inline-form label { flex: 1; }
select, input, textarea { width: 100%; border: 1px solid #d5dce6; border-radius: 9px; padding: 9px 10px; color: var(--ink); background: white; outline: none; }
select:focus, input:focus, textarea:focus { border-color: #87aaf0; box-shadow: 0 0 0 3px rgba(47,111,237,.11); }
textarea { resize: vertical; }
.nested-details { padding: 10px; border: 1px solid #e1e6ed; border-radius: 10px; background: white; }
.nested-details summary, .earning-card summary { cursor: pointer; color: #496078; font-size: 12px; font-weight: 800; }
.compact-form { display: grid; gap: 7px; margin-top: 10px; }
.purchase-mini-form { padding-top: 10px; border-top: 1px dashed #d9e0e8; }
.check { display: flex !important; align-items: flex-start; gap: 7px; color: #667386; font-size: 11px; line-height: 1.35; }
.check input { width: 15px; height: 15px; margin: 0; flex: 0 0 auto; }
.comment { margin-top: 8px; padding: 9px; border-radius: 9px; background: white; border: 1px solid #e3e8ef; }
.comment.permanent { border-color: #f3dd9e; background: #fffaf0; }
.comment > div { display: flex; justify-content: space-between; gap: 8px; }
.comment b { font-size: 11px; }
.comment span, .comment small { color: #8b96a7; font-size: 9px; }
.comment p { margin: 6px 0 0; font-size: 11px; line-height: 1.45; }
.comment small { display: flex; align-items: center; gap: 4px; margin-top: 6px; color: #92721b; }
.comment small .material-symbols-rounded { font-size: 13px; }
.comment-form { display: grid; gap: 7px; margin-top: 10px; }
.upload-template-form { display: grid; gap: 8px; }

.summary-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 20px; }
.summary-strip > div { padding: 17px 19px; border: 1px solid var(--line); border-radius: 14px; background: white; box-shadow: 0 4px 16px rgba(20,35,59,.04); }
.summary-strip span, .summary-strip strong { display: block; }
.summary-strip span { color: var(--muted); font-size: 11px; }
.summary-strip strong { margin-top: 6px; font-size: 20px; }
.purchase-suppliers { display: grid; gap: 18px; }
.purchase-supplier { min-width: 0; }
.purchase-supplier-head { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 15px 17px; border-bottom: 1px solid var(--line); background: white; }
.purchase-supplier-head h2 { margin: 2px 0 0; font-size: 20px; }
.purchase-supplier-head > span { color: var(--muted); font-size: 12px; font-weight: 800; }
.purchase-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px; }
.purchase-tile { min-width: 0; }
.purchase-tile-open { width: 100%; min-height: 205px; display: grid; grid-template-rows: auto 1fr auto auto; gap: 11px; padding: 14px; overflow: hidden; border: 1px solid #dce3ed; border-radius: 17px; color: var(--ink); background: white; box-shadow: 0 5px 18px rgba(20,35,59,.045); cursor: pointer; font: inherit; text-align: left; transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease; }
.purchase-tile-open:hover { border-color: #b8ccec; box-shadow: 0 10px 24px rgba(31,70,125,.1); transform: translateY(-2px); }
.purchase-tile-open:focus-visible { border-color: #75a4ef; outline: 3px solid rgba(47,111,237,.18); outline-offset: 2px; }
.purchase-tile-head { display: flex; align-items: center; justify-content: space-between; gap: 9px; }
.purchase-tile-swatch { width: 49px; height: 49px; flex: 0 0 auto; border: 4px solid white; border-radius: 50%; background: var(--purchase-yarn-color, #aaa); box-shadow: 0 4px 13px rgba(20,35,59,.16), 0 0 0 1px rgba(20,35,59,.08); }
.purchase-tile-head .supplier-badge { max-width: calc(100% - 60px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.purchase-tile-name { min-width: 0; display: grid; align-content: start; gap: 3px; }
.purchase-tile-name strong { overflow: hidden; font-size: 18px; line-height: 1.15; text-overflow: ellipsis; white-space: nowrap; }
.purchase-tile-name small { overflow: hidden; color: #718096; font-size: 11px; font-weight: 750; text-overflow: ellipsis; white-space: nowrap; }
.purchase-tile-qty { display: flex; align-items: baseline; gap: 4px; padding: 9px 10px; border-radius: 11px; color: #245da9; background: #eef5ff; }
.purchase-tile-qty small { margin-right: auto; color: #6a7c95; font-size: 8px; font-weight: 850; text-transform: uppercase; letter-spacing: .04em; }
.purchase-tile-qty strong { font-size: 20px; line-height: 1; }
.purchase-tile-qty em { color: #71829a; font-size: 8px; font-style: normal; font-weight: 850; }
.purchase-tile-order { min-width: 0; display: flex; align-items: center; gap: 5px; color: #7a8799; font-size: 9px; font-weight: 750; }
.purchase-tile-order > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.purchase-tile-order > .material-symbols-rounded { flex: 0 0 auto; margin-left: auto; color: #92a0b2; font-size: 16px; }
.inventory-tabs { display: inline-flex; gap: 4px; margin-bottom: 17px; padding: 4px; border: 1px solid var(--line); border-radius: 12px; background: white; }
.inventory-tabs a { min-height: 38px; display: inline-flex; align-items: center; gap: 8px; padding: 0 14px; border-radius: 9px; color: #617087; font-size: 11px; font-weight: 850; }
.inventory-tabs a.active { color: white; background: #172a48; box-shadow: 0 4px 12px rgba(20,35,59,.16); }
.inventory-tabs em { min-width: 20px; height: 20px; display: grid; place-items: center; padding: 0 6px; border-radius: 999px; color: white; background: var(--pink); font-size: 9px; font-style: normal; }
.purchase-topbar { min-height: 82px; }
.purchase-topbar .topbar-heading { min-width: 0; display: flex; align-items: center; gap: 12px; }
.purchase-topbar .topbar-kicker { display: none; }
.purchase-topbar h1 { flex: 0 0 auto; margin: 0; white-space: nowrap; }
.purchase-top-tabs { flex: 0 1 auto; margin: 0; padding: 3px; border-radius: 10px; }
.purchase-top-tabs a { min-height: 32px; padding-inline: 11px; font-size: 9px; }
.purchase-top-total { min-height: 34px; display: inline-flex; align-items: center; gap: 5px; padding: 0 9px; border: 1px solid #d8e2f1; border-radius: 10px; color: #315d96; background: #eff5fd; white-space: nowrap; }
.purchase-top-total > .material-symbols-rounded { font-size: 17px; }
.purchase-top-total b { font-size: 11px; }
.purchase-top-total small { color: #74849a; font-size: 8px; font-weight: 800; }
.purchase-supplier-tools { display: flex; align-items: center; gap: 8px; margin-bottom: 11px; }
.purchase-supplier-switch { width: fit-content; max-width: 100%; display: flex; gap: 3px; padding: 3px; overflow-x: auto; border: 1px solid #dce3ed; border-radius: 11px; background: #e9eef5; scrollbar-width: none; }
.purchase-supplier-switch::-webkit-scrollbar { display: none; }
.purchase-supplier-switch button { min-height: 35px; display: inline-flex; align-items: center; gap: 8px; padding: 0 12px; border: 0; border-radius: 8px; color: #637289; background: transparent; cursor: pointer; font: inherit; font-size: 10px; font-weight: 850; white-space: nowrap; }
.purchase-supplier-switch button:hover { color: #284c7e; }
.purchase-supplier-switch button.active { color: #203c64; background: white; box-shadow: 0 2px 8px rgba(20,35,59,.12); }
.purchase-supplier-switch em { padding: 4px 6px; border-radius: 6px; color: #5d708a; background: rgba(255,255,255,.72); font-size: 8px; font-style: normal; font-weight: 850; }
.purchase-supplier-switch button.active em { color: white; background: #2f6fed; }
.purchase-copy-request { min-height: 41px; display: inline-flex; align-items: center; gap: 7px; padding: 0 12px; border: 1px solid #d7e1ef; border-radius: 11px; color: #315d96; background: white; box-shadow: 0 3px 11px rgba(20,35,59,.055); cursor: pointer; font: inherit; font-size: 9px; font-weight: 850; white-space: nowrap; transition: border-color .14s ease, color .14s ease, background .14s ease, transform .14s ease; }
.purchase-copy-request:hover { border-color: #a9c4eb; color: #1e59aa; background: #f7faff; transform: translateY(-1px); }
.purchase-copy-request:focus-visible { outline: 3px solid rgba(47,111,237,.18); outline-offset: 2px; }
.purchase-copy-icon { width: 17px; height: 17px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.purchase-supplier[hidden] { display: none; }
.purchase-batch-create { display:grid; grid-template-columns:minmax(220px,1fr) auto auto; gap:10px; align-items:end; margin-bottom:12px; padding:13px; border:1px solid #d9e5f5; border-radius:13px; background:#f8fbff; }
.purchase-batch-create-toggle { display:none; }
.purchase-batch-create > div { display:grid; gap:2px; }
.purchase-batch-create > div small { color:var(--muted); }
.purchase-batch-create label { display:grid; gap:4px; color:var(--muted); font-size:10px; font-weight:800; }
.purchase-batches { margin-top:22px; }
.purchase-batches-heading-actions { display:flex; align-items:center; gap:10px; }
.purchase-batches-toggle { display:none; }
.purchase-batch-list { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.purchase-batch { padding:14px; border:1px solid var(--line); border-radius:14px; background:#fff; box-shadow:0 3px 12px rgba(20,35,59,.05); }
.purchase-batch.status-partial { border-color:#efc46b; }
.purchase-batch.status-received { border-color:#8bd6ae; }
.purchase-batch header,.purchase-batch-metrics { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.purchase-batch header h3 { margin:2px 0 0; }
.purchase-batch header span:first-child { color:var(--muted); font-size:10px; font-weight:800; }
.purchase-batch-metrics { margin:12px 0; padding:9px; border-radius:10px; background:#f4f7fb; }
.purchase-batch-metrics span { display:grid; gap:2px; color:var(--muted); font-size:9px; }
.purchase-batch-metrics b { color:var(--ink); font-size:13px; }
.purchase-batch details summary { cursor:pointer; color:#315d96; font-size:11px; font-weight:800; }
.purchase-batch details textarea { width:100%; margin-top:9px; resize:vertical; }
.purchase-batch-update { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:8px; }
.purchase-batch-update label { display:grid; gap:3px; font-size:9px; font-weight:800; color:var(--muted); }
.purchase-batch-update label:nth-of-type(3),.purchase-batch-update .btn { grid-column:1/-1; }
.inventory-summary { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.inventory-summary small { display: block; margin-top: 5px; color: var(--muted); font-size: 9px; }
.inventory-summary .danger-value strong { color: #ba3340; }
.inventory-note { margin: -5px 0 14px; padding: 11px 13px; border: 1px solid #cad9f3; border-radius: 11px; color: #5d6d82; background: #f3f7ff; font-size: 10px; line-height: 1.5; }
.inventory-filters { display: grid; grid-template-columns: minmax(230px, 1fr) 180px 170px auto auto; gap: 9px; align-items: end; margin-bottom: 12px; padding: 13px; border: 1px solid var(--line); border-radius: 13px; background: white; }
.inventory-filters label { display: grid; gap: 5px; color: #667386; font-size: 9px; font-weight: 800; }
.inventory-list, .inventory-movements { display: grid; gap: 8px; }
.inventory-row { display: grid; grid-template-columns: 40px minmax(185px, .9fr) minmax(420px, 1.5fr) auto; gap: 12px; align-items: center; padding: 13px 15px; border: 1px solid var(--line); border-left: 4px solid #aeb8c6; border-radius: 13px; background: white; box-shadow: 0 3px 12px rgba(20,35,59,.035); }
.inventory-row.state-ok { border-left-color: #36aa78; }
.inventory-row.state-low { border-left-color: #f2a437; }
.inventory-row.state-shortage { border-left-color: #d84855; background: #fffafb; }
.inventory-row.state-uninitialized { border-left-color: #aeb8c6; }
.inventory-yarn > span { color: #788598; font-size: 9px; font-weight: 750; }
.inventory-yarn h3 { margin: 3px 0 2px; font-size: 13px; }
.inventory-yarn small { color: #8a95a4; font-size: 8px; }
.inventory-metrics { display: grid; grid-template-columns: repeat(5, minmax(68px, 1fr)); gap: 6px; }
.inventory-metrics > div { padding: 7px 8px; border-radius: 8px; background: #f4f6f9; }
.inventory-metrics span, .inventory-metrics strong { display: block; }
.inventory-metrics span { color: #8894a5; font-size: 8px; }
.inventory-metrics strong { margin-top: 3px; color: #34465f; font-size: 12px; font-variant-numeric: tabular-nums; }
.inventory-state { justify-self: end; padding: 6px 8px; border-radius: 8px; color: #59677a; background: #edf1f5; font-size: 9px; font-weight: 850; white-space: nowrap; }
.state-ok .inventory-state { color: #14704e; background: #e0f4ec; }
.state-low .inventory-state { color: #956015; background: #fff0d6; }
.state-shortage .inventory-state { color: #a52e3a; background: #ffe4e7; }
.inventory-count { grid-column: 2 / -1; padding-top: 9px; border-top: 1px dashed #dce2ea; }
.inventory-count summary { cursor: pointer; color: #3465ad; font-size: 10px; font-weight: 850; }
.inventory-count form { display: grid; grid-template-columns: 150px 150px minmax(220px, 1fr) auto; gap: 8px; align-items: end; margin-top: 9px; }
.inventory-count label { display: grid; gap: 4px; color: #69778a; font-size: 8px; font-weight: 800; }
.inventory-count .wide { grid-column: auto; }
.inventory-movements article { display: grid; grid-template-columns: 38px minmax(175px, .8fr) minmax(240px, 1.3fr) 110px 145px; gap: 13px; align-items: center; padding: 13px 15px; border: 1px solid var(--line); border-radius: 12px; background: white; }
.inventory-movements h3 { margin: 3px 0 0; font-size: 12px; }
.inventory-movements article > div > span, .inventory-movements small, .inventory-movements time { display: block; color: #8490a0; font-size: 8px; }
.inventory-movements article > div > b { display: block; margin-bottom: 3px; font-size: 10px; }
.inventory-movements article > strong { font-size: 12px; text-align: right; font-variant-numeric: tabular-nums; }
.inventory-movements .positive { color: #14805a; }
.inventory-movements .negative { color: #bd3744; }
.movement-author { color: #526075; font-size: 9px; text-align: right; }
.movement-author time { margin-top: 3px; }

.yarn-create-open, .yarn-pricing-open { min-height: 43px; display: inline-flex; align-items: center; gap: 9px; padding: 0 14px 0 9px; border: 0; border-radius: 13px; color: white; box-shadow: 0 6px 16px rgba(20,35,59,.16); font-size: 11px; font-weight: 850; cursor: pointer; transition: background .16s ease, transform .16s ease, box-shadow .16s ease; }
.yarn-create-open { background: var(--blue); box-shadow: 0 7px 18px rgba(47,111,237,.22); }
.yarn-pricing-open { background: var(--navy); }
.yarn-create-open i,
.yarn-pricing-open i { width: 29px; height: 29px; display: grid; place-items: center; border-radius: 9px; color: var(--navy); background: white; font-size: 15px; font-style: normal; }
.yarn-create-open i { color: var(--blue); font-size: 17px; font-weight: 900; }
.yarn-create-open i .material-symbols-rounded, .yarn-pricing-open i .material-symbols-rounded { font-size: 19px; }
.yarn-create-open:hover { background: #245fd2; transform: translateY(-1px); }
.yarn-pricing-open:hover { background: var(--navy-2); transform: translateY(-1px); }
.yarn-create-open:focus-visible, .yarn-pricing-open:focus-visible { outline: 3px solid rgba(47,111,237,.24); outline-offset: 2px; }
.yarn-pricing-open-short { display: none; }
.yarn-create-modal { position: fixed; inset: 0; z-index: 135; display: grid; place-items: center; padding: 22px; }
.yarn-create-modal[hidden] { display: none; }
.yarn-create-backdrop { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; background: rgba(8,16,29,.76); backdrop-filter: blur(8px); cursor: default; }
.yarn-create-dialog { position: relative; width: min(820px, 100%); max-height: calc(100vh - 44px); max-height: calc(100dvh - 44px); display: flex; flex-direction: column; overflow: hidden; border: 1px solid rgba(255,255,255,.72); border-radius: 23px; background: white; box-shadow: 0 35px 90px rgba(8,16,29,.35); }
.yarn-create-dialog-head { min-height: 96px; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 20px 22px; border-bottom: 1px solid #e8ecf2; }
.yarn-create-dialog-title { min-width: 0; display: flex; align-items: center; gap: 14px; }
.yarn-create-dialog-title > i { width: 52px; height: 52px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 16px; color: white; background: linear-gradient(145deg, var(--blue), #5b8ef4); box-shadow: 0 9px 22px rgba(47,111,237,.24); font-size: 27px; font-style: normal; font-weight: 800; }
.yarn-create-dialog-title h2 { margin: 3px 0 4px; font-size: 23px; letter-spacing: -.025em; }
.yarn-create-dialog-title p { margin: 0; color: var(--muted); font-size: 11px; }
.yarn-create-close { flex: 0 0 auto; font-size: 22px; }
.yarn-create-modal-body { min-height: 0; display: grid; grid-template-columns: 260px minmax(0, 1fr); overflow-y: auto; }
.yarn-create-preview { padding: 24px 20px; border-right: 1px solid #e8ecf2; background: #f6f8fb; }
.yarn-create-preview-label { display: block; margin: 0 2px 9px; color: #8492a5; font-size: 9px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.yarn-create-preview-card { overflow: hidden; border: 1px solid #dce3ed; border-radius: 16px; background: white; box-shadow: 0 9px 25px rgba(20,35,59,.09); }
.yarn-create-preview-swatch { position: relative; height: 145px; background: var(--yarn-color); }
.yarn-create-preview-swatch::after { content: ""; position: absolute; inset: 0; background: linear-gradient(145deg, rgba(255,255,255,.18), transparent 45%, rgba(8,16,29,.08)); pointer-events: none; }
.yarn-create-preview-hex { position: absolute; right: 10px; bottom: 10px; z-index: 1; padding: 5px 7px; border-radius: 7px; color: #26374e; background: rgba(255,255,255,.88); box-shadow: 0 3px 10px rgba(15,27,45,.12); font-size: 9px; font-variant-numeric: tabular-nums; }
.yarn-create-preview-copy { padding: 14px; }
.yarn-create-preview-copy > div { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.yarn-create-preview-supplier { overflow: hidden; color: #66758a; font-size: 9px; font-weight: 900; letter-spacing: .05em; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
.yarn-create-preview-code { flex: 0 0 auto; padding: 4px 7px; border-radius: 7px; color: #2b5ba0; background: #edf4ff; font-size: 9px; }
.yarn-create-preview-copy h3 { margin: 12px 0 4px; overflow-wrap: anywhere; font-size: 16px; line-height: 1.2; }
.yarn-create-preview-copy p { margin: 0; overflow: hidden; color: #7d899a; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.yarn-create-preview > small { display: block; margin: 13px 3px 0; color: #8793a4; font-size: 9px; line-height: 1.45; }
.yarn-create-form { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 12px; align-content: start; padding: 24px; }
.yarn-create-form > label { min-width: 0; display: grid; align-content: start; gap: 6px; color: #5f6e82; font-size: 10px; font-weight: 850; }
.yarn-create-form > label > span { color: #5f6e82; font-size: 10px; font-weight: 850; }
.yarn-create-form > label > small { color: #929dae; font-size: 8px; font-weight: 600; line-height: 1.35; }
.yarn-create-form .wide { grid-column: 1 / -1; }
.yarn-create-form input, .yarn-create-form select { width: 100%; min-height: 43px; border-color: #cfd8e6; border-radius: 11px; background: #fbfcfe; }
.yarn-create-form input:focus, .yarn-create-form select:focus { border-color: #7fa6f5; background: white; box-shadow: 0 0 0 3px rgba(47,111,237,.1); outline: 0; }
.yarn-create-color > div { display: flex; align-items: center; gap: 10px; }
.yarn-create-color input[type="color"] { width: 64px; height: 43px; flex: 0 0 auto; padding: 3px; cursor: pointer; }
.yarn-create-color b { color: #4f6077; font-size: 11px; font-variant-numeric: tabular-nums; }
.yarn-create-actions { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: 4px; }
.yarn-create-actions p { max-width: 235px; margin: 0; color: #7d899b; font-size: 9px; line-height: 1.45; }
.yarn-create-actions > div { display: flex; gap: 8px; }
.yarn-create-actions .btn { min-height: 42px; }
.yarn-pricing-modal { position: fixed; inset: 0; z-index: 130; display: grid; place-items: center; padding: 22px; }
.yarn-pricing-modal[hidden] { display: none; }
.yarn-pricing-backdrop { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; background: rgba(8,16,29,.76); backdrop-filter: blur(8px); cursor: default; }
.yarn-pricing-dialog { position: relative; width: min(1040px, 100%); max-height: min(850px, calc(100vh - 44px)); max-height: min(850px, calc(100dvh - 44px)); display: flex; flex-direction: column; overflow: hidden; border: 1px solid rgba(255,255,255,.7); border-radius: 23px; background: white; box-shadow: 0 35px 90px rgba(8,16,29,.35); }
.yarn-pricing-dialog-head { min-height: 98px; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 20px 22px; border-bottom: 1px solid #e8ecf2; }
.yarn-pricing-dialog-title { min-width: 0; display: flex; align-items: center; gap: 14px; }
.yarn-pricing-dialog-title > i { width: 52px; height: 52px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 16px; color: white; background: linear-gradient(145deg, var(--navy), #2f5d9f); box-shadow: 0 9px 22px rgba(20,35,59,.2); font-size: 23px; font-style: normal; }
.yarn-pricing-dialog-title > i .material-symbols-rounded { font-size: 25px; }
.yarn-pricing-dialog-title h2 { margin: 3px 0 4px; font-size: 23px; letter-spacing: -.025em; }
.yarn-pricing-dialog-title p { margin: 0; color: var(--muted); font-size: 11px; }
.yarn-pricing-dialog-actions { flex: 0 0 auto; display: flex; align-items: center; gap: 7px; }
.yarn-pricing-new-line-head { display: none; color: white; background: var(--blue); font-size: 21px; }
.yarn-pricing-close { flex: 0 0 auto; font-size: 22px; }
.yarn-pricing-close:focus-visible { outline: 3px solid rgba(47,111,237,.3); outline-offset: 2px; }
.yarn-pricing-modal-body { min-height: 0; display: grid; grid-template-columns: 330px minmax(0, 1fr); }
.yarn-pricing-line-list { min-height: 0; overflow-y: auto; padding: 14px; border-right: 1px solid #e8ecf2; background: #f6f8fb; }
.yarn-pricing-new-line { position: sticky; z-index: 2; top: 0; width: 100%; display: grid; grid-template-columns: 36px minmax(0, 1fr); align-items: center; gap: 10px; margin: 0 0 14px; padding: 10px; border: 1px dashed #9dbcf7; border-radius: 12px; color: #285eaf; background: rgba(240,246,255,.96); cursor: pointer; text-align: left; backdrop-filter: blur(8px); }
.yarn-pricing-new-line > i { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 10px; color: white; background: var(--blue); font-size: 18px; font-style: normal; font-weight: 900; }
.yarn-pricing-new-line b, .yarn-pricing-new-line small { display: block; }
.yarn-pricing-new-line b { font-size: 11px; }
.yarn-pricing-new-line small { margin-top: 3px; color: #7d91ad; font-size: 8px; }
.yarn-pricing-new-line:hover { border-style: solid; background: white; box-shadow: 0 5px 14px rgba(47,111,237,.1); }
.yarn-pricing-line-group { display: block; margin: 6px 7px 7px; color: #8190a4; font-size: 9px; font-weight: 900; letter-spacing: .09em; text-transform: uppercase; }
.yarn-pricing-line-group:not(:first-child) { margin-top: 17px; }
.yarn-pricing-line { width: 100%; min-width: 0; display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; align-items: center; gap: 10px; margin: 0 0 6px; padding: 10px; border: 1px solid transparent; border-radius: 12px; color: #40516b; background: transparent; cursor: pointer; text-align: left; transition: border-color .15s ease, background .15s ease, box-shadow .15s ease; }
.yarn-pricing-line > i { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 10px; color: #58708f; background: #e8edf4; font-size: 12px; font-style: normal; font-weight: 900; }
.yarn-pricing-line > span { min-width: 0; }
.yarn-pricing-line b, .yarn-pricing-line span small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.yarn-pricing-line b { font-size: 11px; }
.yarn-pricing-line span small { margin-top: 3px; color: #8a96a7; font-size: 8px; }
.yarn-pricing-line span em { display: inline-flex; margin-top: 5px; padding: 3px 5px; border-radius: 5px; color: #257050; background: #e3f4ec; font-size: 7px; font-style: normal; font-weight: 850; }
.yarn-pricing-line.is-hidden span em { color: #775d27; background: #f5edd8; }
.yarn-pricing-line.is-archived span em { color: #647187; background: #e9edf3; }
.yarn-pricing-line.is-deleted span em { color: #9b4c59; background: #f8e6e9; }
.yarn-pricing-line.is-archived, .yarn-pricing-line.is-deleted { opacity: .72; }
.yarn-pricing-line > strong { color: #45617f; font-size: 11px; font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.yarn-pricing-line > strong small { display: block; margin-top: 2px; color: #97a2b1; font-size: 7px; font-weight: 700; }
.yarn-pricing-line:hover { border-color: #dbe3ef; background: white; }
.yarn-pricing-line.is-active { border-color: #bad0fb; background: white; box-shadow: 0 5px 16px rgba(39,83,157,.1); }
.yarn-pricing-line.is-active > i { color: white; background: var(--blue); }
.yarn-pricing-line.is-active > strong { color: var(--blue); }
.yarn-pricing-editor-form { min-width: 0; overflow-y: auto; padding: 27px 30px 25px; }
.yarn-pricing-editor-heading { padding-bottom: 20px; border-bottom: 1px solid #edf0f4; }
.yarn-pricing-editor-supplier { display: inline-flex; padding: 5px 8px; border-radius: 7px; color: #285eaf; background: #eaf1ff; font-size: 8px; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; }
.yarn-pricing-editor-heading h3 { margin: 9px 0 5px; font-size: 24px; letter-spacing: -.03em; }
.yarn-pricing-editor-heading p { margin: 0; color: var(--muted); font-size: 11px; }
.yarn-pricing-editor-heading p b { color: #41536d; }
.yarn-line-lifecycle { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin-top: 15px; padding: 11px 12px; border: 1px solid #cfe6da; border-radius: 12px; background: #f0faf5; }
.yarn-line-lifecycle[hidden] { display: none; }
.yarn-line-lifecycle > div:first-child { min-width: 0; display: flex; align-items: center; gap: 9px; }
.yarn-line-lifecycle > div:first-child > i { width: 10px; height: 10px; flex: 0 0 auto; border-radius: 50%; background: #23a06b; box-shadow: 0 0 0 4px rgba(35,160,107,.12); }
.yarn-line-lifecycle span b, .yarn-line-lifecycle span small { display: block; }
.yarn-line-lifecycle span b { color: #285a46; font-size: 10px; }
.yarn-line-lifecycle span small { margin-top: 2px; color: #6d8479; font-size: 8px; line-height: 1.35; }
.yarn-line-lifecycle-actions { display: flex; flex: 0 0 auto; gap: 6px; }
.yarn-line-lifecycle-actions .btn { min-width: 36px; min-height: 34px; padding: 7px 10px; }
.yarn-line-lifecycle-actions [hidden] { display: none; }
.yarn-line-lifecycle.is-hidden { border-color: #eadcb7; background: #fcf8ed; }
.yarn-line-lifecycle.is-hidden > div:first-child > i { background: #c39537; box-shadow: 0 0 0 4px rgba(195,149,55,.12); }
.yarn-line-lifecycle.is-hidden span b { color: #6e5728; }
.yarn-line-lifecycle.is-hidden span small { color: #8b7a58; }
.yarn-line-lifecycle.is-archived, .yarn-line-lifecycle.is-deleted { border-color: #dfe4eb; background: #f5f7fa; }
.yarn-line-lifecycle.is-archived > div:first-child > i { background: #7d899b; box-shadow: 0 0 0 4px rgba(125,137,155,.12); }
.yarn-line-lifecycle.is-deleted > div:first-child > i { background: #b65364; box-shadow: 0 0 0 4px rgba(182,83,100,.12); }
.yarn-line-lifecycle.is-archived span b, .yarn-line-lifecycle.is-deleted span b { color: #526075; }
.yarn-line-lifecycle.is-archived span small, .yarn-line-lifecycle.is-deleted span small { color: #7d899b; }
.yarn-line-identity { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 14px; margin-top: 20px; }
.yarn-line-identity label, .yarn-line-characteristics label { min-width: 0; display: grid; gap: 7px; color: #536176; font-size: 10px; font-weight: 850; }
.yarn-line-identity input, .yarn-line-identity select { width: 100%; height: 44px; border-color: #cfd8e6; border-radius: 11px; background: #fbfcfe; font-weight: 750; }
.yarn-line-identity input:focus, .yarn-line-identity select:focus,
.yarn-line-characteristics input:focus { border-color: #7fa6f5; background: white; box-shadow: 0 0 0 3px rgba(47,111,237,.1); outline: 0; }
.yarn-line-identity small { color: #929dae; font-size: 8px; font-weight: 600; line-height: 1.35; }
.yarn-pricing-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 20px; }
.yarn-pricing-fields label { min-width: 0; display: grid; gap: 7px; color: #536176; font-size: 11px; font-weight: 850; }
.yarn-pricing-fields label > div { position: relative; }
.yarn-pricing-fields input { width: 100%; height: 50px; padding: 0 54px 0 14px; border-color: #cfd8e6; border-radius: 12px; background: #fbfcfe; font-size: 16px; font-weight: 800; font-variant-numeric: tabular-nums; }
.yarn-pricing-fields input:focus { border-color: #7fa6f5; background: white; box-shadow: 0 0 0 3px rgba(47,111,237,.1); outline: 0; }
.yarn-pricing-fields em { position: absolute; right: 13px; top: 50%; color: #8793a4; font-size: 10px; font-style: normal; font-weight: 850; transform: translateY(-50%); pointer-events: none; }
.yarn-pricing-fields label > small { color: #929dae; font-size: 8px; font-weight: 600; }
.yarn-line-characteristics { margin-top: 20px; padding: 16px; border: 1px solid #dfe6f0; border-radius: 15px; background: #f8fafc; }
.yarn-line-characteristics > header { display: flex; align-items: flex-end; justify-content: space-between; gap: 15px; margin-bottom: 13px; }
.yarn-line-characteristics > header span { color: #6d7c91; font-size: 8px; font-weight: 900; letter-spacing: .07em; text-transform: uppercase; }
.yarn-line-characteristics h4 { margin: 3px 0 0; font-size: 14px; }
.yarn-line-characteristics > header p { margin: 0; color: #8793a4; font-size: 8px; }
.yarn-line-characteristics > div { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; }
.yarn-line-characteristics .wide { grid-column: 1 / -1; }
.yarn-line-characteristics label > div { position: relative; }
.yarn-line-characteristics input { width: 100%; height: 42px; padding-right: 42px; border-color: #cfd8e6; border-radius: 10px; background: white; }
.yarn-line-characteristics label.wide input { padding-right: 11px; }
.yarn-line-characteristics em { position: absolute; right: 12px; top: 50%; color: #8793a4; font-size: 10px; font-style: normal; font-weight: 850; transform: translateY(-50%); pointer-events: none; }
.yarn-pricing-total { margin-top: 20px; padding: 18px 20px; border: 1px solid #cfe0ff; border-radius: 15px; background: linear-gradient(135deg, #f4f8ff, #edf4ff); }
.yarn-pricing-total > span { color: #647793; font-size: 9px; font-weight: 900; letter-spacing: .07em; text-transform: uppercase; }
.yarn-pricing-total > strong { display: flex; align-items: baseline; gap: 9px; margin-top: 6px; color: #1d5ec1; }
.yarn-pricing-total > strong b { font-size: 30px; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.yarn-pricing-total > strong small { font-size: 11px; }
.yarn-pricing-total p { margin: 5px 0 0; color: #7b899c; font-size: 9px; }
.yarn-pricing-editor-actions { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-top: 22px; }
.yarn-pricing-editor-actions p { max-width: 275px; margin: 0; color: #7d899b; font-size: 9px; line-height: 1.45; }
.yarn-pricing-editor-actions .btn { min-width: 210px; min-height: 44px; }
.yarn-color-field > span { display: flex; align-items: center; gap: 8px; min-height: 37px; }
.yarn-color-field input[type="color"] { width: 46px; height: 37px; flex: 0 0 auto; padding: 3px; cursor: pointer; }
.yarn-color-field b { color: #59667a; font-size: 10px; font-variant-numeric: tabular-nums; }
.yarn-search { margin-bottom: 14px; }
.yarn-search-field { min-height: 52px; display: flex; align-items: center; gap: 11px; padding: 0 16px; border: 1px solid #d9dfe8; border-radius: 14px; background: rgba(255,255,255,.92); box-shadow: 0 4px 16px rgba(20,35,59,.05); transition: border-color .16s ease, box-shadow .16s ease, background .16s ease; }
.yarn-search-field:focus-within { border-color: #8aaff8; background: white; box-shadow: 0 0 0 4px rgba(47,111,237,.1), 0 6px 20px rgba(20,35,59,.06); }
.yarn-search-field > .material-symbols-rounded { flex: 0 0 auto; color: #7c8798; font-size: 21px; }
.yarn-search-field input { width: 100%; min-width: 0; height: 50px; padding: 0; border: 0; outline: 0; color: #1d2738; background: transparent; font-size: 14px; font-weight: 550; -webkit-appearance: none; appearance: none; }
.yarn-search-field input::placeholder { color: #8b95a5; opacity: 1; }
.yarn-search-field input::-webkit-search-cancel-button { width: 18px; height: 18px; cursor: pointer; opacity: .55; }
.yarn-admin-result { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 0 2px 9px; color: #526075; font-size: 12px; }
.yarn-admin-result > div:first-child { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex: 1; }
.yarn-admin-result small { color: var(--muted); }
.yarn-view-switch { display: inline-flex; flex: 0 0 auto; gap: 2px; padding: 3px; border: 1px solid #dce3ed; border-radius: 10px; background: #e9eef5; }
.yarn-view-switch button { min-height: 30px; display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border: 0; border-radius: 7px; color: #718096; background: transparent; cursor: pointer; font: inherit; font-size: 10px; font-weight: 800; transition: color .16s ease, background .16s ease, box-shadow .16s ease; }
.yarn-view-switch button:hover { color: #294c7e; }
.yarn-view-switch button:focus-visible { outline: 2px solid rgba(47,111,237,.42); outline-offset: 1px; }
.yarn-view-switch button[aria-pressed="true"] { color: #203c64; background: white; box-shadow: 0 2px 7px rgba(20,35,59,.12); }
.yarn-view-switch .material-symbols-rounded { font-size: 16px; }
.yarn-admin-list { display: grid; gap: 8px; }
.yarn-admin-row { display: grid; grid-template-columns: 118px 125px minmax(170px, .9fr) 105px minmax(180px, 1.1fr) auto; gap: 9px; align-items: end; padding: 11px 12px; border: 1px solid var(--line); border-left: 5px solid var(--yarn-color); border-radius: 13px; background: white; box-shadow: 0 3px 12px rgba(20,35,59,.035); }
.yarn-admin-row.is-archived { opacity: .78; background: #f7f9fc; }
.yarn-admin-row.is-deleted { opacity: .58; background: #f8f1f2; }
.yarn-admin-row.is-hidden { opacity: .82; background: #faf8f1; }
.yarn-row-actions { display: flex; align-items: center; gap: 5px; }
.yarn-row-actions .btn { min-width: 0; min-height: 36px; padding-inline: 10px; }
.yarn-row-actions .yarn-lifecycle-button { width: 36px; flex: 0 0 auto; padding: 0; }
.btn-danger-soft { color: #a43f50; background: #fbecef; }
.yarn-admin-row > label { min-width: 0; }
.yarn-admin-row > label > span:first-child { display: block; margin-bottom: 4px; color: #7d8899; font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }
.yarn-admin-row input, .yarn-admin-row select { min-height: 36px; padding-block: 7px; }
.yarn-admin-row .yarn-color-field > span { margin: 0; text-transform: none; letter-spacing: normal; }
.yarn-admin-row .yarn-color-field input { min-height: 36px; padding: 3px; }
.yarn-tile-preview, .yarn-tile-cancel { display: none; }
.yarn-admin-list:is(.is-grid, .is-yarn) { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.yarn-admin-list:is(.is-grid, .is-yarn) .yarn-admin-row { min-width: 0; display: block; overflow: hidden; padding: 0; border: 1px solid var(--line); border-radius: 15px; box-shadow: 0 6px 18px rgba(20,35,59,.07); }
.yarn-admin-list:is(.is-grid, .is-yarn) .yarn-admin-row > label,
.yarn-admin-list:is(.is-grid, .is-yarn) .yarn-admin-row > .btn,
.yarn-admin-list:is(.is-grid, .is-yarn) .yarn-admin-row > .yarn-row-actions { display: none; }
.yarn-admin-list:is(.is-grid, .is-yarn) .yarn-tile-preview { height: 100%; display: flex; flex-direction: column; }
.yarn-tile-swatch { position: relative; min-height: 116px; flex: 0 0 auto; border-bottom: 1px solid rgba(20,35,59,.08); background: var(--yarn-color); }
.yarn-tile-swatch::after { content: ""; position: absolute; inset: 0; background: linear-gradient(145deg, rgba(255,255,255,.18), transparent 42%, rgba(10,22,38,.08)); pointer-events: none; }
.yarn-tile-product-media { position: absolute; inset: 7px 9px 0; z-index: 1; display: grid; place-items: center; overflow: hidden; pointer-events: none; }
.yarn-tile-product-media img { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; filter: saturate(1.08) contrast(1.03); }
.yarn-tile-placeholder { width: 62%; height: 62%; fill: rgba(255,255,255,.74); filter: drop-shadow(0 5px 10px rgba(14,29,52,.14)); }
.yarn-admin-list.is-grid .yarn-tile-product-media { display: none; }
.yarn-admin-list.is-yarn .yarn-tile-swatch { min-height: 218px; }
.yarn-admin-list.is-yarn .yarn-tile-product-media::before { content: ""; position: absolute; z-index: 0; width: 78%; height: 88%; border-radius: 50%; background: radial-gradient(ellipse at center, rgba(255,255,255,.88) 0%, rgba(255,255,255,.6) 42%, rgba(255,255,255,.24) 62%, rgba(255,255,255,0) 79%); filter: blur(10px); }
.yarn-admin-list.is-yarn .yarn-tile-product-media img { filter: drop-shadow(0 0 5px rgba(255,255,255,.96)) drop-shadow(0 0 14px rgba(255,255,255,.72)) saturate(1.08) contrast(1.03); }
.yarn-tile-swatch .yarn-tile-hex { position: absolute; right: 10px; bottom: 9px; z-index: 2; padding: 5px 7px; border: 1px solid rgba(255,255,255,.55); border-radius: 7px; color: #26374e; background: rgba(255,255,255,.86); box-shadow: 0 3px 10px rgba(15,27,45,.12); font-size: 9px; font-weight: 850; font-variant-numeric: tabular-nums; backdrop-filter: blur(6px); }
.yarn-tile-body { min-height: 153px; display: flex; flex: 1; flex-direction: column; padding: 13px; }
.yarn-tile-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 9px; }
.yarn-tile-meta span { overflow: hidden; color: #637186; font-size: 9px; font-weight: 850; letter-spacing: .04em; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
.yarn-tile-meta b { flex: 0 0 auto; padding: 4px 7px; border-radius: 7px; color: #2b5ba0; background: #edf4ff; font-size: 10px; font-weight: 850; }
.yarn-tile-body h3 { margin: 0; color: #16243a; font-size: 16px; line-height: 1.2; }
.yarn-tile-body h3 small { display: inline-flex; margin-left: 5px; padding: 3px 5px; border-radius: 5px; color: #7a5260; background: #f5e9ed; font-size: 7px; vertical-align: middle; }
.yarn-tile-body p { margin: 5px 0 13px; overflow: hidden; color: #7b8798; font-size: 10px; font-weight: 650; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }
.yarn-tile-body .btn { width: 100%; min-height: 34px; margin-top: auto; }
.yarn-admin-list:is(.is-grid, .is-yarn) .yarn-admin-row.is-tile-editing { grid-column: span 2; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; align-items: end; padding: 14px; border-top: 5px solid var(--yarn-color); }
.yarn-admin-list:is(.is-grid, .is-yarn) .yarn-admin-row.is-tile-editing .yarn-tile-preview { display: none; }
.yarn-admin-list:is(.is-grid, .is-yarn) .yarn-admin-row.is-tile-editing > label { grid-column: auto; display: grid; }
.yarn-admin-list:is(.is-grid, .is-yarn) .yarn-admin-row.is-tile-editing > .yarn-field-wide { grid-column: 1 / -1; }
.yarn-admin-list:is(.is-grid, .is-yarn) .yarn-admin-row.is-tile-editing > .btn { grid-column: auto; display: inline-flex; }
.yarn-admin-list:is(.is-grid, .is-yarn) .yarn-admin-row.is-tile-editing > .yarn-row-actions { grid-column: 1 / -1; display: flex; justify-content: flex-end; }
.yarn-admin-list:is(.is-grid, .is-yarn) .yarn-admin-row.is-tile-editing .yarn-tile-cancel { display: inline-flex; }
.yarn-admin-list:is(.is-grid, .is-yarn) .yarn-admin-row.is-tile-editing > .yarn-tile-cancel { display: inline-flex; }
.yarn-pagination { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 16px; }
.yarn-pagination a { min-width: 35px; height: 35px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 9px; color: #536176; background: white; font-size: 12px; font-weight: 800; }
.yarn-pagination a.active { border-color: var(--blue); color: white; background: var(--blue); }

.catalog-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
.catalog-card { overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: white; box-shadow: 0 5px 18px rgba(20,35,59,.05); }
.catalog-card.is-inactive { opacity: .72; }
.catalog-card-body { padding: 15px; }
.catalog-card h2 { margin: 10px 0 5px; font-size: 17px; }
.catalog-card p, .catalog-card small { color: var(--muted); font-size: 11px; }
.catalog-card .badge-row { gap: 6px; }
.catalog-card .badge-row .muted { margin-left: auto; }
.inactive-badge { color: #6d7583; background: #edf0f4; }
.catalog-summary { margin-bottom: 12px; }
.catalog-group-tabs { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 12px; padding: 4px; border: 1px solid #dce4ef; border-radius: 13px; background: #e9eef5; }
.catalog-group-tabs a { min-height: 39px; display: inline-flex; align-items: center; gap: 7px; padding: 0 13px; border-radius: 9px; color: #64748a; font-size: 10px; font-weight: 850; }
.catalog-group-tabs a span { font-size: 14px; }
.catalog-group-tabs a span .material-symbols-rounded { font-size: 17px; }
.catalog-group-tabs a em { min-width: 21px; height: 21px; display: grid; place-items: center; padding: 0 5px; border-radius: 999px; color: #2f5c9c; background: #dce8fb; font-size: 8px; font-style: normal; }
.catalog-group-tabs a.active { color: white; background: #14233b; box-shadow: 0 4px 12px rgba(20,35,59,.2); }
.catalog-group-tabs a.active em { color: #14233b; background: white; }
.custom-catalog-badge { color: #6b3ba5; background: #f0e8fb; }
.catalog-filters { display: grid; grid-template-columns: minmax(230px, 1fr) 180px 190px auto auto; gap: 10px; align-items: end; margin-bottom: 12px; padding: 14px; border: 1px solid var(--line); border-radius: 14px; background: white; }
.catalog-filters label, .catalog-edit-form label, .manual-order-form label { display: grid; gap: 5px; color: #667386; font-size: 10px; font-weight: 800; }
.catalog-sync-note { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 16px; padding: 12px 14px; border: 1px solid #cedbf1; border-radius: 12px; background: #f6f9ff; }
.catalog-sync-note b { display: block; margin-top: 4px; color: #415775; font-size: 11px; }
.catalog-sync-note code { padding: 7px 9px; border-radius: 7px; color: #294c85; background: #e5edfb; font-size: 10px; }
.catalog-images { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line); }
.catalog-images > div { position: relative; min-width: 0; background: #e8edf4; }
.catalog-images > div > span { position: absolute; left: 8px; top: 8px; z-index: 2; padding: 5px 7px; border-radius: 7px; color: #253a58; background: rgba(255,255,255,.91); box-shadow: 0 3px 9px rgba(20,35,59,.14); font-size: 8px; font-weight: 850; text-transform: uppercase; letter-spacing: .04em; }
.catalog-images .card-art { height: 150px; }
.catalog-template-empty { height: 150px; display: grid; place-items: center; padding: 20px; color: #8b96a7; background: repeating-linear-gradient(135deg, #f2f4f7 0, #f2f4f7 10px, #e9edf2 10px, #e9edf2 20px); font-size: 10px; font-weight: 750; text-align: center; }
.catalog-image-trigger { position: relative; width: 100%; display: block; overflow: hidden; padding: 0; border: 0; color: inherit; background: transparent; cursor: pointer; text-align: inherit; }
.catalog-image-trigger::after { content: ""; position: absolute; inset: 0; z-index: 1; border: 0 solid rgba(47,111,237,.78); background: rgba(14,29,52,0); transition: border-width .16s ease, background .16s ease; pointer-events: none; }
.catalog-image-trigger:hover::after, .catalog-image-trigger:focus-visible::after { border-width: 3px; background: rgba(14,29,52,.18); }
.catalog-image-trigger:focus-visible { outline: 3px solid rgba(47,111,237,.28); outline-offset: -3px; }
.catalog-image-action { position: absolute; left: 50%; bottom: 10px; z-index: 3; max-width: calc(100% - 16px); padding: 6px 9px; border-radius: 8px; color: white; background: rgba(25,43,70,.88); box-shadow: 0 5px 15px rgba(14,29,52,.25); font-size: 9px; font-weight: 850; line-height: 1.2; opacity: 0; transform: translate(-50%, 5px); transition: opacity .16s ease, transform .16s ease; white-space: nowrap; pointer-events: none; }
.catalog-image-action .material-symbols-rounded { margin-right: 3px; font-size: 14px; vertical-align: -3px; }
.catalog-image-trigger:hover .catalog-image-action, .catalog-image-trigger:focus-visible .catalog-image-action { opacity: 1; transform: translate(-50%, 0); }
.catalog-admin-actions { display: grid; gap: 9px; margin: 13px 0 15px; }
.catalog-admin-actions details { margin: 0; padding: 0 10px 10px; border: 1px solid #dfe5ed; border-radius: 10px; background: #f9fbfd; }
.catalog-admin-actions details > summary { padding: 11px 0 2px; cursor: pointer; color: #435a76; font-size: 11px; font-weight: 850; }
.catalog-manual-order-button { width: 100%; min-height: 52px; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border: 1px solid #cbdcf9; border-radius: 11px; color: #28579e; background: linear-gradient(135deg, #f5f8ff, #edf4ff); cursor: pointer; text-align: left; }
.catalog-manual-order-button:hover, .catalog-manual-order-button:focus-visible { border-color: #7fa8ec; outline: 3px solid rgba(47,111,237,.14); outline-offset: 2px; }
.catalog-manual-order-button > span, .catalog-manual-order-button b, .catalog-manual-order-button small { display: block; }
.catalog-manual-order-button b { font-size: 11px; }
.catalog-manual-order-button b .material-symbols-rounded { margin-right: 4px; font-size: 16px; vertical-align: -3px; }
.catalog-manual-order-button small { margin-top: 3px; color: #7788a2; font-size: 9px; font-weight: 650; }
.catalog-manual-order-button > em { flex: 0 0 auto; font-size: 18px; font-style: normal; }
.catalog-edit-form, .manual-order-form { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-top: 12px; }
.catalog-edit-form .wide, .manual-order-form .wide { grid-column: 1 / -1; }
.catalog-edit-form .btn, .manual-order-form .btn { min-height: 40px; }
.recipe-editor-trigger { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 3px 0 14px; padding: 11px 12px; border: 1px solid #cbdcf9; border-radius: 11px; color: #28579e; background: linear-gradient(135deg, #f5f8ff, #edf4ff); cursor: pointer; text-align: left; transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease; }
.recipe-editor-trigger:hover, .recipe-editor-trigger:focus-visible { border-color: #7fa8ec; box-shadow: 0 5px 16px rgba(47,111,237,.12); transform: translateY(-1px); outline: none; }
.recipe-editor-trigger > span { display: grid; gap: 2px; }
.recipe-editor-trigger b { font-size: 11px; }
.recipe-editor-trigger b { display: inline-flex; align-items: center; gap: 5px; }
.recipe-editor-trigger b .material-symbols-rounded { font-size: 16px; }
.recipe-editor-trigger small { color: #7788a2; font-size: 9px; font-weight: 650; }
.recipe-editor-trigger em { flex: 0 0 auto; color: #677b99; font-size: 9px; font-style: normal; font-weight: 800; }
.recipe-row span { padding: 5px 7px; border-radius: 7px; background: #eef2f7; color: #5f6d80; font-size: 10px; }
.recipe-row .missing-recipe { color: #9e3d45; background: #fff0f1; }
.materials-label { margin-top: 14px; }
.materials-mini { display: grid; gap: 4px; margin-bottom: 12px; }
.materials-mini span { display: flex; justify-content: space-between; gap: 10px; padding: 5px 7px; border-radius: 6px; color: #667386; background: #f4f6f9; font-size: 9px; }
.materials-mini b { color: #34465f; }

.shipping-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(380px, 1fr)); gap: 17px; }
.shipping-card { padding: 18px; border: 1px solid var(--line); border-radius: var(--radius); background: white; box-shadow: var(--shadow); }
.shipping-card.is-shipped { opacity: .68; }
.shipping-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.shipping-head h2 { margin: 2px 0 0; font-size: 24px; }
.shipment-items { display: grid; grid-template-columns: repeat(auto-fit, minmax(90px, 1fr)); gap: 8px; margin: 15px 0; }
.shipment-items > div { overflow: hidden; border: 1px solid var(--line); border-radius: 10px; }
.shipment-items span { display: block; padding: 7px; font-size: 9px; line-height: 1.3; }
.shipment-thumb { height: 75px; }
.shipping-proof { width: 100%; max-height: 240px; object-fit: cover; border-radius: 11px; }
.shipment-camera .btn { width: 100%; min-height: 46px; }
.shipping-head p { margin: 5px 0 0; color: var(--muted); font-size: 11px; }
.shipping-tracking { margin: 10px 0 !important; color: #425571 !important; font-weight: 800; overflow-wrap: anywhere; }

.order-summary { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.order-summary-tile { --summary-accent: #2f6fed; --summary-soft: #edf4ff; position: relative; min-width: 0; min-height: 94px; display: grid; grid-template-columns: 46px minmax(0, 1fr); align-items: center; gap: 13px; overflow: hidden; padding: 16px 17px; border: 1px solid color-mix(in srgb, var(--summary-accent) 18%, #dfe5ed); border-radius: 15px; color: var(--ink); background: linear-gradient(135deg, #fff 42%, var(--summary-soft)); box-shadow: 0 5px 18px rgba(20,35,59,.055); text-decoration: none; transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease; }
.order-summary-tile::after { content: ""; position: absolute; right: -28px; bottom: -40px; width: 92px; height: 92px; border-radius: 50%; background: var(--summary-accent); opacity: .055; pointer-events: none; }
.order-summary-icon { position: relative; z-index: 1; width: 46px; height: 46px; display: grid !important; place-items: center; border-radius: 14px; color: var(--summary-accent); background: color-mix(in srgb, var(--summary-accent) 11%, #fff); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--summary-accent) 12%, transparent); font-size: 24px; }
.order-summary-copy { position: relative; z-index: 1; min-width: 0; }
.order-summary-copy > span { min-height: 24px; display: flex; align-items: flex-end; color: #65758c; font-size: 10px; font-weight: 800; line-height: 1.2; }
.order-summary-copy > strong { margin-top: 3px; color: #172238; font-size: 24px; line-height: 1; font-variant-numeric: tabular-nums; }
.order-summary-copy > small { display: block; margin-top: 5px; overflow: hidden; color: #8996a8; font-size: 8px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.order-summary-tile:hover { border-color: color-mix(in srgb, var(--summary-accent) 46%, #dfe5ed); box-shadow: 0 10px 24px color-mix(in srgb, var(--summary-accent) 13%, transparent); transform: translateY(-2px); }
.order-summary-tile:focus-visible { outline: 3px solid color-mix(in srgb, var(--summary-accent) 25%, transparent); outline-offset: 3px; }
.order-summary-tile.is-active { border-color: color-mix(in srgb, var(--summary-accent) 65%, #dfe5ed); box-shadow: 0 0 0 2px color-mix(in srgb, var(--summary-accent) 12%, transparent), 0 10px 25px color-mix(in srgb, var(--summary-accent) 14%, transparent); }
.order-summary-tile.is-active::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 4px; background: var(--summary-accent); }
.order-summary-tile.tone-production { --summary-accent: #7656d6; --summary-soft: #f3efff; }
.order-summary-tile.tone-ready { --summary-accent: #db8b15; --summary-soft: #fff7e8; }
.order-summary-tile.tone-sent { --summary-accent: #1685c8; --summary-soft: #eaf8ff; }
.order-summary-tile.tone-delivered { --summary-accent: #159568; --summary-soft: #eaf9f3; }
.orders-view-toolbar { position: relative; z-index: 15; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; margin: 0 0 10px; }
.orders-view-toolbar > p { min-width: 72px; margin: 0; color: #6f7d91; font-size: 11px; white-space: nowrap; }
.orders-view-toolbar > p strong { color: var(--ink); font-size: 13px; font-variant-numeric: tabular-nums; }
.order-filters { min-width: 0; margin: 0; }
.order-filter-bar { min-width: 0; display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
.order-search-dock { min-width: 0; width: min(420px, 100%); display: flex; justify-content: flex-end; }
.order-search-open, .order-search-close, .order-filter-toggle { min-width: 44px; min-height: 44px; border: 1px solid #dce3ec; color: #607087; background: #fff; cursor: pointer; font: inherit; }
.order-search-open { width: 44px; height: 44px; display: none; place-items: center; padding: 0; border-radius: 50%; box-shadow: 0 4px 14px rgba(20,35,59,.055); }
.order-search-open .material-symbols-rounded { font-size: 20px; }
.order-search-expanded { min-width: 0; width: min(420px, 100%); height: 44px; display: flex; align-items: center; gap: 8px; padding: 0 5px 0 13px; border: 1px solid #dce3ec; border-radius: 999px; background: rgba(255,255,255,.96); box-shadow: 0 4px 14px rgba(20,35,59,.055); transform-origin: right center; }
.order-search-expanded > .material-symbols-rounded { flex: 0 0 auto; color: #7a899e; font-size: 19px; }
.order-search-expanded input { min-width: 0; height: 100%; flex: 1; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; font-size: 12px; }
.order-search-expanded input:focus { border: 0; box-shadow: none; }
.order-search-expanded input::-webkit-search-cancel-button { display: none; }
.order-search-close { width: 34px; min-width: 34px; min-height: 34px; height: 34px; display: grid; flex: 0 0 34px; place-items: center; padding: 0; border: 0; border-radius: 50%; background: transparent; }
.order-search-close .material-symbols-rounded { font-size: 18px; }
.order-search-spinner { width: 15px; height: 15px; display: none; flex: 0 0 15px; border: 2px solid #dbe5f5; border-top-color: var(--blue); border-radius: 50%; animation: order-filter-spin .7s linear infinite; }
.order-filters.is-enhanced .order-search-dock { width: 44px; flex: 0 0 44px; }
.order-filters.is-enhanced .order-search-open { display: grid; }
.order-filters.is-enhanced:not(.is-search-open) .order-search-expanded { display: none; }
.order-filters.is-enhanced.is-search-open .order-search-dock { width: min(420px, 100%); flex: 1 1 420px; }
.order-filters.is-enhanced.is-search-open .order-search-open { display: none; }
.order-filters.is-enhanced.is-search-open .order-search-expanded { animation: order-search-in .18s ease-out both; }
.order-filters[aria-busy="true"] .order-search-spinner { display: block; }
.order-search-open:hover, .order-search-close:hover, .order-filter-toggle:hover { color: #2f6fed; border-color: #a8c1eb; background: #f4f8ff; }
.order-search-open:focus-visible, .order-search-close:focus-visible, .order-filter-toggle:focus-visible { outline: 3px solid rgba(47,111,237,.24); outline-offset: 2px; }
.order-search-expanded:focus-within { border-color: #87aaf0; box-shadow: 0 0 0 3px rgba(47,111,237,.11), 0 5px 16px rgba(20,35,59,.06); }
.order-filter-disclosure { position: relative; flex: 0 0 auto; }
.order-filter-toggle { min-width: 112px; height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 0 11px; border-radius: 12px; box-shadow: 0 4px 14px rgba(20,35,59,.04); list-style: none; font-size: 11px; font-weight: 800; user-select: none; }
.order-filter-toggle::-webkit-details-marker { display: none; }
.order-filter-toggle > .material-symbols-rounded { font-size: 18px; }
.order-filter-toggle > b { min-width: 20px; height: 20px; display: grid; place-items: center; padding: 0 5px; border-radius: 999px; color: #fff; background: var(--blue); font-size: 9px; font-variant-numeric: tabular-nums; }
.order-filter-toggle > b[hidden] { display: none; }
.order-filter-disclosure[open] > .order-filter-toggle { color: #245fc7; border-color: #a8c1eb; background: #edf4ff; }
.order-filter-panel { position: absolute; top: calc(100% + 8px); right: 0; z-index: 60; width: 620px; max-width: calc(100vw - 300px); display: grid; grid-template-columns: repeat(3, minmax(150px, 1fr)); gap: 9px; padding: 12px; border: 1px solid #dce3ec; border-radius: 14px; background: #fff; box-shadow: 0 18px 42px rgba(20,35,59,.18); animation: order-filter-panel-in .16s ease-out both; }
.order-filter-panel label, .shipment-form label { display: grid; gap: 5px; color: #667386; font-size: 10px; font-weight: 800; }
.order-filter-panel select { min-height: 41px; font-size: 11px; font-weight: 700; }
.order-filter-actions { grid-column: 1 / -1; display: flex; justify-content: flex-end; gap: 8px; }
.order-filter-actions .btn { min-height: 40px; }
.order-filters.is-enhanced .order-filter-apply { display: none; }
.order-filter-reset[hidden] { display: none; }
.orders-list[aria-busy="true"] { opacity: .56; transition: opacity .16s ease; }
@keyframes order-search-in { from { opacity: 0; transform: scaleX(.94); } to { opacity: 1; transform: scaleX(1); } }
@keyframes order-filter-panel-in { from { opacity: 0; transform: translateY(-5px); } to { opacity: 1; transform: translateY(0); } }
@keyframes order-filter-spin { to { transform: rotate(360deg); } }
.orders-view-toggle { display: inline-flex; gap: 3px; padding: 3px; border: 1px solid #dce3ec; border-radius: 11px; background: #fff; box-shadow: 0 3px 10px rgba(20,35,59,.04); }
.orders-view-toggle button { min-height: 34px; display: inline-flex; align-items: center; justify-content: center; gap: 5px; padding: 0 10px; border: 0; border-radius: 8px; color: #6a788c; background: transparent; cursor: pointer; font: inherit; font-size: 10px; font-weight: 800; }
.orders-view-toggle button[aria-pressed="true"] { color: #fff; background: var(--navy); }
.orders-view-toggle button:focus-visible { outline: 3px solid rgba(47,111,237,.25); outline-offset: 2px; }
.orders-view-toggle .material-symbols-rounded { font-size: 17px; }
.orders-list { display: grid; gap: 9px; }
.order-row { display: grid; grid-template-columns: 128px minmax(190px, 1.2fr) minmax(125px, .72fr) minmax(135px, .74fr) minmax(180px, .9fr) 92px; gap: 14px; align-items: center; padding: 12px 16px; border: 1px solid var(--line); border-radius: 14px; background: white; box-shadow: 0 4px 15px rgba(20,35,59,.04); transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease; }
.order-row:hover { border-color: #a9c0ea; box-shadow: 0 8px 22px rgba(20,35,59,.09); transform: translateY(-1px); }
.order-row h2 { margin: 3px 0 4px; font-size: 20px; }
.order-row p { margin: 0; color: var(--muted); font-size: 11px; overflow-wrap: anywhere; }
.order-row-progress span, .order-row-progress b, .order-row-progress small, .order-row-payment > span, .order-row-payment > b, .order-row-payment > small { display: block; }
.order-row-progress span, .order-row-payment > span { color: var(--muted); font-size: 9px; font-weight: 850; letter-spacing: .06em; text-transform: uppercase; }
.order-row-progress b { margin: 5px 0 3px; font-size: 12px; }
.order-row-progress small, .order-row-payment > small { color: #7c8798; font-size: 10px; }
.order-row-payment > b { width: fit-content; margin: 5px 0 4px; padding: 4px 7px; border-radius: 999px; color: #58677c; background: #edf1f5; font-size: 9px; font-weight: 850; }
.order-row-payment > b.status-paid { color: #0f754e; background: #dff5ec; }
.order-row-payment > b.status-partial { color: #8b5b00; background: #fff1ca; }
.order-row-payment > b.status-pending { color: #285aa7; background: #e5efff; }
.order-row-payment > b.status-refunded { color: #a32e39; background: #ffe5e8; }
.order-row-delivery p { margin-top: 7px; }
.order-row-media { position: relative; height: 78px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); gap: 2px; overflow: hidden; border-radius: 11px; background: #e9edf3; }
.orders-list.is-list .order-row-media.media-count-2 { height: 44px; grid-template-rows: 1fr; }
.order-row-media.media-count-3 > figure:first-of-type { grid-column: 1; grid-row: 1 / -1; }
.order-row-media figure { position: relative; min-width: 0; min-height: 0; margin: 0; overflow: hidden; }
.order-row-media img { width: 100%; height: 100%; display: block; object-fit: cover; }
.order-row-media figcaption { position: absolute; left: 3px; bottom: 3px; max-width: calc(100% - 6px); padding: 2px 4px; overflow: hidden; border-radius: 5px; color: #263b59; background: rgba(255,255,255,.9); font-size: 6px; font-weight: 850; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
.order-row-media figure:only-of-type { grid-column: 1 / -1; grid-row: 1 / -1; }
.order-row-media-empty { grid-column: 1 / -1; grid-row: 1 / -1; display: grid; place-items: center; align-content: center; gap: 2px; color: #8794a7; background: linear-gradient(135deg,#f4f6f9,#e8edf3); }
.order-row-media-empty .material-symbols-rounded { font-size: 22px; }
.order-row-media-empty small { font-size: 8px; font-weight: 800; }
.order-row-media-more { position: absolute; right: 5px; bottom: 5px; min-width: 24px; height: 24px; display: grid; place-items: center; padding: 0 5px; border: 1px solid rgba(255,255,255,.65); border-radius: 999px; color: #fff; background: rgba(20,35,59,.78); font-size: 8px; }
.orders-list.is-grid { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 13px; }
.orders-list.is-grid .order-row-wrap { min-width: 0; }
.orders-list.is-grid .order-row { height: 100%; grid-template-columns: 1fr 1fr; grid-template-areas: "media media" "main main" "progress payment" "delivery delivery" "date date"; align-content: start; gap: 13px 11px; overflow: hidden; padding: 0 14px 14px; }
.orders-list.is-grid .order-row-media { grid-area: media; height: 170px; margin: 0 -14px; border-radius: 13px 13px 0 0; }
.orders-list.is-grid .order-row-wrap.preview-count-2 .order-row-media { height: 112px; grid-template-rows: 1fr; }
.orders-list.is-grid .order-row-wrap.preview-count-2 .order-manage-menu { top: 124px; }
.orders-list.is-grid .order-row-main { grid-area: main; }
.orders-list.is-grid .order-row-progress { grid-area: progress; }
.orders-list.is-grid .order-row-payment { grid-area: payment; }
.orders-list.is-grid .order-row-delivery { grid-area: delivery; padding-top: 11px; border-top: 1px solid #edf0f4; }
.orders-list.is-grid .order-row-date { grid-area: date; padding-top: 10px; border-top: 1px solid #edf0f4; text-align: left; }
.orders-list.is-grid .order-row-date i { margin-left: auto; }
.shipment-status { color: #526075; background: #edf1f5; }
.shipment-status.status-label_created { color: #285aa7; background: #e5efff; }
.shipment-status.status-shipped, .shipment-status.status-in_transit, .shipment-status.status-customs, .shipment-status.status-out_for_delivery { color: #2458a7; background: #e2ecff; }
.shipment-status.status-delivered { color: #0f754e; background: #dff5ec; }
.shipment-status.status-partially_delivered { color: #8a5a00; background: #fff1c7; }
.shipment-status.status-exception, .shipment-status.status-returned { color: #a32e39; background: #ffe5e8; }
.order-row-date { display: grid; grid-template-columns: 1fr auto; align-items: center; color: #536176; text-align: right; }
.order-row-date b, .order-row-date small { grid-column: 1; display: block; }
.order-row-date b { font-size: 12px; }
.order-row-date small { margin-top: 2px; color: var(--muted); font-size: 10px; }
.order-row-date i { grid-column: 2; grid-row: 1 / 3; margin-left: 12px; color: var(--blue); font-size: 21px; font-style: normal; }
.empty-state-panel { padding: 35px; border: 1px dashed #cbd4e0; border-radius: 16px; color: var(--muted); background: white; text-align: center; }
.empty-state-panel h2 { color: var(--ink); }

.order-dossier-nav { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin-bottom: 13px; }
.order-dossier-nav > a { color: var(--blue); font-size: 12px; font-weight: 850; }
.order-dossier-nav > div { display: flex; flex-wrap: wrap; gap: 7px; }
.order-dossier-nav > div a { padding: 7px 10px; border: 1px solid var(--line); border-radius: 8px; color: #536176; background: white; font-size: 10px; font-weight: 800; }
.order-dossier-head { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 22px; border-radius: 18px; color: white; background: linear-gradient(135deg, #172a48, #294d7c); box-shadow: var(--shadow); }
.order-dossier-head .eyebrow { color: #a9c5ff; }
.order-dossier-head h2 { margin: 5px 0 3px; font-size: 34px; }
.order-dossier-head p { margin: 0; color: #d5e0f1; }
.order-dossier-status { display: grid; justify-items: end; gap: 9px; text-align: right; }
.order-dossier-status strong { font-size: 13px; }
.order-quickbar { display: grid; grid-template-columns: minmax(220px, 1.3fr) repeat(2, minmax(165px, 1fr)) repeat(3, minmax(135px, .76fr)); gap: 9px; margin: 12px 0; }
.order-shipping-label-action, .order-shipping-label-action .shipping-labels { min-width: 0; display: flex; }
.order-shipping-label-action .sl-launcher { width: 100%; min-height: 64px; justify-content: center; border-radius: 13px; box-shadow: 0 3px 10px rgba(37,99,235,.15); }
.order-quick-action { min-width: 0; min-height: 64px; display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid #dce3ec; border-radius: 13px; color: #25364f; background: #fff; box-shadow: 0 3px 10px rgba(20,35,59,.035); font: inherit; text-align: left; cursor: pointer; }
.order-quick-action:not(.is-static):hover, .order-quick-action:not(.is-static):focus-visible { border-color: #8cb0ec; background: #f7faff; outline: 3px solid rgba(47,111,237,.1); transform: translateY(-1px); }
.order-quick-action.is-static { cursor: default; }
.order-quick-action > span:last-child { min-width: 0; display: grid; gap: 2px; }
.order-quick-action small, .order-quick-action b, .order-quick-action em { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.order-quick-action small { color: #758297; font-size: 8px; font-weight: 850; letter-spacing: .055em; text-transform: uppercase; }
.order-quick-action b { color: #20314b; font-size: 11px; }
.order-quick-action em { color: #8290a3; font-size: 8px; font-style: normal; }
.order-quick-icon, .order-quick-avatar { width: 34px; height: 34px; flex: 0 0 34px; display: grid; place-items: center; border-radius: 10px; color: #2765c8; background: #eaf2ff; }
.order-quick-icon .material-symbols-rounded { font-size: 19px; }
.order-quick-avatar { border-radius: 50%; color: #6b4bc5; background: #efe9ff; font-size: 13px; font-weight: 900; }
.order-quick-action.is-payment .order-quick-icon { color: #087653; background: #e7f8f0; }
.order-quick-action.is-primary { color: #fff; border-color: #2f6fed; background: #2f6fed; }
.order-quick-action.is-primary small, .order-quick-action.is-primary b { color: #fff; }
.order-quick-action.is-primary .order-quick-icon { color: #fff; background: rgba(255,255,255,.17); }
.order-quick-action.is-primary:hover, .order-quick-action.is-primary:focus-visible { border-color: #245ecf; background: #245ecf; }
.order-quick-action.state-overdue { border-color: #f1b1b1; background: #fff8f7; }
.order-quick-action.state-overdue .order-quick-icon { color: #b42318; background: #feeceb; }
.order-quick-action.state-today .order-quick-icon, .order-quick-action.state-soon .order-quick-icon { color: #966300; background: #fff3d6; }
.order-info-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 11px; margin: 0 0 20px; }
.order-info-grid article { min-width: 0; padding: 15px; border: 1px solid var(--line); border-radius: 13px; background: white; }
.order-info-grid article > span { display: block; margin-bottom: 7px; color: var(--muted); font-size: 9px; font-weight: 850; letter-spacing: .06em; text-transform: uppercase; }
.order-info-grid b { font-size: 12px; overflow-wrap: anywhere; }
.order-info-grid p { margin: 4px 0 0; color: #526075; font-size: 11px; line-height: 1.5; overflow-wrap: anywhere; }
.order-delivery-summary { margin: -7px 0 20px; }
.order-delivery-summary-head { display: flex; align-items: end; justify-content: space-between; gap: 12px; margin-bottom: 9px; }
.order-delivery-summary-head h2 { margin: 3px 0 0; font-size: 16px; }
.order-delivery-summary-head > strong { min-width: 25px; padding: 4px 7px; border-radius: 999px; color: #335f9f; background: #eaf2ff; font-size: 10px; text-align: center; }
.order-delivery-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(265px, 1fr)); gap: 9px; margin: 0; padding: 0; list-style: none; }
.order-delivery-tiles > li { min-width: 0; }
.order-delivery-tile { width: 100%; min-height: 104px; display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center; gap: 11px; padding: 12px; border: 1px solid #dce4ee; border-radius: 13px; color: #243550; background: #fff; box-shadow: 0 3px 12px rgba(20,35,59,.04); font: inherit; text-align: left; cursor: pointer; transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease; }
.order-delivery-tile:hover, .order-delivery-tile:focus-visible { border-color: #82a9eb; outline: 3px solid rgba(47,111,237,.11); box-shadow: 0 8px 20px rgba(36,73,129,.09); transform: translateY(-1px); }
.order-delivery-tile-logo { width: 44px; height: 44px; display: grid; place-items: center; overflow: hidden; border: 1px solid #e2e8f0; border-radius: 50%; color: #2e67c5; background: #f7f9fc; }
.order-delivery-tile-logo img { width: 34px; height: 34px; object-fit: contain; }
.order-delivery-tile-logo .material-symbols-rounded { font-size: 23px; }
.order-delivery-tile-main { min-width: 0; display: grid; gap: 5px; }
.order-delivery-tile-heading { min-width: 0; display: flex; align-items: baseline; gap: 7px; }
.order-delivery-tile-heading small { flex: 0 0 auto; color: #7d899b; font-size: 8px; font-weight: 850; letter-spacing: .05em; text-transform: uppercase; }
.order-delivery-tile-heading b { min-width: 0; overflow: hidden; color: #273953; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.order-delivery-tile code { min-width: 0; overflow: hidden; color: #1d4f9f; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-size: 11px; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.order-delivery-tile-related { min-width: 0; display: flex; align-items: center; gap: 4px; overflow: hidden; color: #60718a; font-size: 8px; white-space: nowrap; }
.order-delivery-tile-related .material-symbols-rounded { flex: 0 0 auto; font-size: 13px; }
.order-delivery-tile-related b { min-width: 0; overflow: hidden; color: #355b94; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-size: 9px; text-overflow: ellipsis; }
.order-delivery-tile-status { min-width: 0; display: flex; align-items: center; gap: 7px; }
.order-delivery-tile-status time { min-width: 0; overflow: hidden; color: #758297; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.order-delivery-tile-sources { min-width: 0; display: flex; align-items: center; gap: 4px; overflow: hidden; color: #596d89; font-size: 8px; font-weight: 750; text-overflow: ellipsis; white-space: nowrap; }
.order-delivery-tile-sources .material-symbols-rounded { flex: 0 0 auto; color: #4574bc; font-size: 13px; }
.order-delivery-tile-eta { min-width: 0; display: flex; align-items: center; gap: 4px; color: #315f9f; font-size: 8px; line-height: 1.3; }
.order-delivery-tile-eta .material-symbols-rounded { flex: 0 0 auto; font-size: 13px; }
.order-delivery-tile-eta b { color: #214d8d; font-size: inherit; }
.order-delivery-tile-cost { width: max-content; max-width: 100%; min-width: 0; display: flex; align-items: center; gap: 4px; padding: 3px 7px; overflow: hidden; border: 1px solid #b9ead3; border-radius: 999px; color: #168257; background: #eefbf5; font-size: 9px; font-weight: 800; line-height: 1.2; white-space: nowrap; }
.order-delivery-tile-cost .material-symbols-rounded { flex: 0 0 auto; font-size: 13px; }
.order-delivery-tile-cost b { min-width: 0; overflow: hidden; color: #0f6f4a; font-size: inherit; text-overflow: ellipsis; }
.order-delivery-tile-location { min-width: 0; display: flex; align-items: center; gap: 3px; overflow: hidden; color: #718096; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.order-delivery-tile-location .material-symbols-rounded { flex: 0 0 auto; font-size: 13px; }
.order-delivery-tile-arrow { color: #94a3b8; font-size: 20px; }
.order-shipment-dialog-body { min-height: 0; padding: 18px 21px 21px; overflow-y: auto; }
.order-shipment-dialog-summary { display: grid; grid-template-columns: 50px minmax(0, 1fr); align-items: center; gap: 12px; padding: 13px; border: 1px solid #dce6f3; border-radius: 13px; background: #f7faff; }
.order-shipment-dialog-summary .order-delivery-tile-logo { width: 50px; height: 50px; background: #fff; }
.order-shipment-dialog-summary > div { min-width: 0; display: grid; justify-items: start; gap: 5px; }
.order-shipment-dialog-summary b { color: #34465f; font-size: 11px; }
.order-shipment-dialog-summary small { display: flex; align-items: center; gap: 3px; color: #718096; font-size: 9px; }
.order-shipment-dialog-summary small .material-symbols-rounded { font-size: 14px; }
.order-shipment-dialog-summary .order-shipment-dialog-cost { color: #168257; font-weight: 750; }
.order-shipment-dialog-cost strong { color: #0f6f4a; }
.order-shipment-dialog-summary .order-shipment-dialog-related { color: #516b91; }
.order-shipment-dialog-summary .order-shipment-dialog-sources { flex-wrap: wrap; color: #536b8d; }
.order-shipment-dialog-sources strong { color: #285997; }
.order-shipment-dialog-related strong { color: #285997; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; overflow-wrap: anywhere; }
.order-shipment-related-tracking { margin-top: 3px !important; color: #526f99 !important; font-size: 10px !important; overflow-wrap: anywhere; }
.order-shipment-related-tracking b { color: #24548f; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; }
.order-shipment-parcel-info { margin-top: 12px; padding: 12px 13px; border: 1px solid #e0e7f0; border-radius: 13px; background: #fff; }
.order-shipment-parcel-info > h3 { margin: 0 0 10px; color: #2a3d58; font-size: 12px; }
.order-shipment-parcel-info dl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; margin: 0; }
.order-shipment-parcel-info dl > div { min-width: 0; display: grid; gap: 3px; padding: 9px 10px; border-radius: 9px; background: #f6f8fb; }
.order-shipment-parcel-info dt { color: #7b899c; font-size: 7px; font-weight: 850; letter-spacing: .045em; text-transform: uppercase; }
.order-shipment-parcel-info dd { margin: 0; color: #273b57; font-size: 11px; font-weight: 850; overflow-wrap: anywhere; }
.order-shipment-additional-numbers { margin-top: 10px; padding-top: 10px; border-top: 1px solid #edf1f6; }
.order-shipment-additional-numbers > small { display: block; margin-bottom: 7px; color: #738197; font-size: 8px; font-weight: 850; letter-spacing: .04em; text-transform: uppercase; }
.order-shipment-additional-numbers ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin: 0; padding: 0; list-style: none; }
.order-shipment-additional-numbers li { min-width: 0; display: grid; gap: 3px; padding: 7px 9px; border: 1px solid #e5ebf3; border-radius: 9px; background: #fafcff; }
.order-shipment-additional-numbers li span { color: #75849a; font-size: 7px; font-weight: 750; }
.order-shipment-additional-numbers code { min-width: 0; overflow: hidden; color: #275493; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-size: 9px; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.order-shipment-route-summary { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 12px; padding: 12px 13px; border: 1px solid #d9e7fb; border-radius: 13px; background: linear-gradient(135deg, #f3f8ff, #fbfdff); }
.order-shipment-route-summary > div { min-width: 0; display: grid; gap: 4px; }
.order-shipment-route-summary small { color: #7a8ba2; font-size: 8px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.order-shipment-route-summary b { overflow-wrap: anywhere; color: #2c466c; font-size: 11px; line-height: 1.4; }
.order-shipment-route-summary b span { color: #4b78bd; }
.order-shipment-route-summary .order-shipment-route-eta { flex: 0 0 auto; align-items: end; text-align: right; }
.order-shipment-route-eta strong { color: #1d5bb6; font-size: 15px; }
.order-shipment-route { margin-top: 17px; }
.order-shipment-route-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.order-shipment-route-head h3 { margin: 0; font-size: 13px; }
.order-shipment-route-head small { color: #8592a4; font-size: 8px; }
.order-shipment-route ol { margin: 0; padding: 0; list-style: none; }
.order-shipment-route li { position: relative; display: grid; grid-template-columns: 12px minmax(0, 1fr); gap: 10px; padding: 0 0 14px; }
.order-shipment-route li:not(:last-child)::before { content: ''; position: absolute; top: 10px; bottom: -1px; left: 5px; width: 2px; background: #dce7f6; }
.order-shipment-route-dot { z-index: 1; width: 10px; height: 10px; margin-top: 4px; border: 2px solid #fff; border-radius: 50%; background: #2f6fed; box-shadow: 0 0 0 2px #bdd2f5; }
.order-shipment-route li.is-future .order-shipment-route-dot { background: #fff; box-shadow: 0 0 0 2px #aab8cb; }
.order-shipment-route li.is-now .order-shipment-route-dot { background: #12a36f; box-shadow: 0 0 0 3px #c8f0e2; }
.order-shipment-route li > div { min-width: 0; display: grid; justify-items: start; gap: 3px; }
.order-shipment-route-state { padding: 2px 6px; border-radius: 999px; color: #66768b; background: #eef2f7; font-size: 7px; font-weight: 850; text-transform: uppercase; }
.order-shipment-route li.is-future .order-shipment-route-state { color: #865a10; background: #fff3d9; }
.order-shipment-route li.is-now .order-shipment-route-state { color: #087653; background: #e4f8f0; }
.order-shipment-route li b { color: #31435d; font-size: 10px; line-height: 1.4; }
.order-shipment-route li small { color: #7d8999; font-size: 8px; line-height: 1.4; }
.order-shipment-history { margin-top: 17px; }
.order-shipment-history h3 { margin: 0 0 10px; font-size: 13px; }
.order-shipment-history ol { margin: 0; padding: 0; list-style: none; }
.order-shipment-history li { position: relative; display: grid; grid-template-columns: 12px minmax(0, 1fr); gap: 10px; padding: 0 0 15px; }
.order-shipment-history li:not(:last-child)::before { content: ''; position: absolute; top: 10px; bottom: -1px; left: 5px; width: 2px; background: #dce7f6; }
.order-shipment-history-dot { z-index: 1; width: 10px; height: 10px; margin-top: 3px; border: 2px solid #fff; border-radius: 50%; background: #2f6fed; box-shadow: 0 0 0 2px #bdd2f5; }
.order-shipment-history li > div { min-width: 0; }
.order-shipment-history-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.order-shipment-history-heading > div { min-width: 0; display: flex; align-items: center; flex-wrap: wrap; gap: 5px; }
.order-shipment-history-heading b { color: #2c3f5a; font-size: 11px; }
.order-shipment-history-heading time { flex: 0 0 auto; color: #8491a3; font-size: 8px; }
.order-shipment-event-source { display: inline-flex; align-items: center; padding: 2px 6px; border-radius: 999px; color: #48617f; background: #edf2f8; font-size: 7px; font-weight: 850; line-height: 1.2; white-space: nowrap; }
.order-shipment-event-source.is-upu { color: #6b4aa3; background: #f1ebfb; }
.order-shipment-event-source.is-posta { color: #1e6096; background: #eaf4fb; }
.order-shipment-event-source.is-production { color: #526176; background: #eff2f5; }
.order-shipment-event-source.is-nova { color: #b82234; background: #fff0f2; }
.order-shipment-event-source.is-ups { color: #654500; background: #fff2bd; }
.order-shipment-event-source.is-gofo { color: #a43d00; background: #fff0e8; }
.order-shipment-event-source.is-usps { color: #184a78; background: #e8f2fb; }
.order-shipment-event-source.is-korea-post { color: #185b45; background: #e7f6f0; }
.order-shipment-history p { margin: 4px 0 0; color: #5d6c81; font-size: 10px; line-height: 1.45; overflow-wrap: anywhere; }
.order-shipment-history li small { display: flex; align-items: center; gap: 3px; margin-top: 4px; color: #7b889a; font-size: 8px; }
.order-shipment-history li small .material-symbols-rounded { font-size: 13px; }
.order-shipment-history-empty { display: grid; justify-items: center; gap: 7px; padding: 24px 16px; border: 1px dashed #cbd8e8; border-radius: 12px; color: #77869a; background: #fafcff; text-align: center; }
.order-shipment-history-empty .material-symbols-rounded { color: #4978c5; font-size: 25px; }
.order-shipment-history-empty p { margin: 0; font-size: 10px; }
.order-contact-list { display: grid; gap: 8px; }
.order-contact-list > div { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px; }
.order-contact-list > div + div { padding-top: 8px; border-top: 1px solid #edf0f4; }
.contact-action { min-width: 42px; min-height: 36px; display: inline-flex; align-items: center; justify-content: center; gap: 5px; padding: 0 9px; border: 1px solid #cddcf0; border-radius: 9px; color: #245dbb; background: #f3f7ff; font-size: 9px; font-weight: 850; }
.contact-action:hover, .contact-action:focus-visible { border-color: #75a1eb; background: #e9f1ff; outline: 3px solid rgba(47,111,237,.14); }
.contact-action.is-whatsapp { color: #087653; border-color: #bfe7d8; background: #effbf6; }
.contact-action .material-symbols-rounded { font-size: 16px; }
.order-payment-card, .order-deadline-card { grid-column: span 2; }
.order-payment-summary { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.order-payment-summary p { text-align: right; }
.order-payment-summary small { display: block; margin-top: 2px; color: #7b899b; font-size: 8px; }
.order-payment-form { display: grid; gap: 8px; margin-top: 9px; padding-top: 9px; border-top: 1px solid #edf0f4; }
.order-payment-fields { display: grid; grid-template-columns: 1fr 1fr 82px; gap: 7px; }
.order-payment-fields label, .order-payment-method label { min-width: 0; display: grid; gap: 4px; color: #718096; font-size: 8px; font-weight: 800; }
.order-payment-fields input, .order-payment-fields select, .order-payment-method input { width: 100%; min-height: 34px; padding: 6px 8px; border: 1px solid #d7dfe9; border-radius: 8px; color: var(--ink); background: #fff; font: inherit; font-size: 10px; font-weight: 700; }
.order-payment-fields input:focus, .order-payment-fields select:focus, .order-payment-method input:focus { border-color: #78a3ed; outline: 3px solid rgba(47,111,237,.12); }
.order-payment-method summary { width: fit-content; color: #60718a; cursor: pointer; font-size: 9px; font-weight: 800; }
.order-payment-method > div { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin-top: 7px; }
.order-payment-form > .btn { min-height: 34px; justify-self: end; padding-block: 6px; font-size: 9px; }
body.order-admin-dialog-open { overflow: hidden; }
.order-admin-dialog { width: min(680px, calc(100vw - 28px)); max-width: none; max-height: min(820px, calc(100dvh - 28px)); margin: auto; padding: 0; overflow: hidden; border: 1px solid rgba(255,255,255,.75); border-radius: 19px; color: var(--ink); background: #fff; box-shadow: 0 30px 90px rgba(8,20,39,.35); }
.order-admin-dialog.is-small { width: min(520px, calc(100vw - 28px)); }
.order-admin-dialog::backdrop { background: rgba(12,22,38,.62); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.order-admin-dialog-panel { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; max-height: min(820px, calc(100dvh - 28px)); margin: 0; }
.order-admin-dialog-panel > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; padding: 19px 21px 15px; border-bottom: 1px solid #e8edf3; }
.order-admin-dialog-panel > header h2 { margin: 4px 0 0; font-size: 20px; }
.order-admin-dialog-panel > header p { margin: 5px 0 0; color: #748196; font-size: 10px; line-height: 1.45; }
.order-admin-dialog-panel > header .icon-btn { flex: 0 0 35px; }
.order-shipment-tracking-number { min-width: 0; display: flex; align-items: center; gap: 5px; margin-top: 5px; color: #748196; font-size: 10px; line-height: 1.45; }
.order-shipment-tracking-number > span:first-child { flex: 0 0 auto; }
.order-shipment-tracking-number > a { min-width: 0; display: inline-flex; align-items: center; gap: 3px; color: #2b64be; font-weight: 800; text-decoration: none; }
.order-shipment-tracking-number > a code { overflow: hidden; color: inherit; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-size: inherit; text-overflow: ellipsis; white-space: nowrap; }
.order-shipment-tracking-number > a .material-symbols-rounded { flex: 0 0 auto; font-size: 13px; }
.order-shipment-tracking-number > a:hover, .order-shipment-tracking-number > a:focus-visible { color: #174c9d; text-decoration: underline; text-underline-offset: 2px; }
.order-shipment-tracking-number > a:focus-visible, .order-shipment-tracking-copy:focus-visible { border-radius: 4px; outline: 3px solid rgba(47,111,237,.14); }
.order-shipment-tracking-copy { width: 24px; min-width: 24px; height: 24px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 6px; color: #687a92; background: transparent; cursor: pointer; transition: color .18s ease, background .18s ease; }
.order-shipment-tracking-copy:hover { color: #245fbd; background: #edf4ff; }
.order-shipment-tracking-copy .material-symbols-rounded { font-size: 15px; }
.order-shipment-dialog-actions { display: flex; flex: 0 0 auto; align-items: center; gap: 8px; }
.order-admin-dialog-panel > header .order-shipment-dialog-actions .icon-btn { width: 44px; min-width: 44px; height: 44px; flex-basis: 44px; display: grid; place-items: center; transition: color .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease; }
.order-shipment-dialog-actions .icon-btn:hover, .order-shipment-dialog-actions .icon-btn:focus-visible { color: #245fbd; border-color: #8bb1ee; background: #f2f7ff; outline: 3px solid rgba(47,111,237,.13); }
.order-shipment-refresh .material-symbols-rounded { font-size: 21px; }
.order-shipment-refresh:disabled { cursor: wait; opacity: .7; }
.order-shipment-refresh.is-loading .material-symbols-rounded { animation: order-shipment-refresh-spin .8s linear infinite; }
@keyframes order-shipment-refresh-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .order-shipment-refresh.is-loading .material-symbols-rounded { animation: none; } }
.order-shipment-dialog-footer { justify-content: space-between !important; }
.order-shipment-dialog-footer.is-close-only { justify-content: flex-end !important; }
.order-shipment-delete { display: inline-flex; align-items: center; gap: 7px; border: 1px solid #f0c7ce; font-weight: 750; }
.order-shipment-delete .material-symbols-rounded { font-size: 18px; }
.order-shipment-delete[aria-busy="true"] .material-symbols-rounded { animation: order-shipment-refresh-spin .8s linear infinite; }
@media (prefers-reduced-motion: reduce) { .order-shipment-delete[aria-busy="true"] .material-symbols-rounded { animation: none; } }
.order-admin-form-grid { display: grid; grid-template-columns: 1fr 1fr; align-content: start; gap: 11px; padding: 18px 21px; overflow-y: auto; }
.order-admin-form-grid > label { min-width: 0; display: grid; align-content: start; gap: 5px; color: #65758b; font-size: 9px; font-weight: 800; }
.order-admin-form-grid > label.wide, .order-admin-form-grid > .date-picker { grid-column: 1 / -1; }
.order-admin-form-grid input:not([type="checkbox"]), .order-admin-form-grid select, .order-admin-form-grid textarea { width: 100%; min-height: 41px; padding: 9px 10px; border: 1px solid #d4deea; border-radius: 9px; color: #1f2d43; background: #fff; font: inherit; font-size: 11px; }
.order-admin-form-grid textarea { min-height: 82px; resize: vertical; line-height: 1.45; }
.order-admin-form-grid input:focus, .order-admin-form-grid select:focus, .order-admin-form-grid textarea:focus { border-color: #78a3ed; outline: 3px solid rgba(47,111,237,.12); }
.order-admin-form-grid .check { grid-template-columns: auto 1fr; align-items: center; gap: 7px; color: #526177; }
.order-admin-form-grid .check input { width: 17px; height: 17px; }
.order-admin-dialog-panel > footer { display: flex; justify-content: flex-end; gap: 8px; padding: 13px 21px 17px; border-top: 1px solid #e8edf3; background: #fbfcfe; }
.order-admin-dialog-panel > footer .btn { min-height: 39px; }
.order-admin-note { display: flex; align-items: center; gap: 7px; margin: -5px 21px 16px; padding: 9px 10px; border-radius: 9px; color: #52698d; background: #eef4ff; font-size: 9px; }
.order-admin-note .material-symbols-rounded { color: #2f6fed; font-size: 17px; }
.order-section { margin-top: 20px; scroll-margin-top: 20px; }
.order-section-head { display: flex; align-items: end; justify-content: space-between; gap: 15px; margin-bottom: 11px; }
.order-section-head h2 { margin: 4px 0 0; font-size: 21px; }
.order-section-head > strong { color: #667386; font-size: 11px; }
.order-products, .shipment-records { display: grid; gap: 12px; }
.order-product-card, .shipment-record { overflow: hidden; padding: 16px; border: 1px solid var(--line); border-radius: 15px; background: white; box-shadow: 0 4px 15px rgba(20,35,59,.035); }
.order-product-title { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.order-product-main { min-width: 0; }
.order-product-title h3 { margin: 7px 0 3px; font-size: 17px; }
.order-product-title p { margin: 0; color: var(--muted); font-size: 11px; }
.order-card-size-row { display: flex; flex-wrap: wrap; align-items: center; gap: 7px 10px; }
.order-card-dimensions { display: inline-flex; align-items: center; gap: 5px; min-height: 31px; padding: 3px 4px 3px 8px; border: 1px solid #dce4ef; border-radius: 9px; background: #f8fafc; }
.order-card-dimensions > span { color: #64748b; font-size: 8px; font-weight: 850; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; }
.order-card-dimensions input { width: 54px; min-height: 25px; padding: 3px 6px; border: 1px solid #d8e1ec; border-radius: 6px; color: #1e293b; background: white; font-size: 10px; font-weight: 750; text-align: center; }
.order-card-dimensions input:focus { border-color: #78a3ed; outline: 3px solid rgba(47,111,237,.11); }
.order-card-dimensions > i { color: #8190a4; font-size: 10px; font-style: normal; }
.order-card-dimensions output { min-width: 55px; color: #2f6fed; font-size: 9px; font-weight: 850; white-space: nowrap; text-align: right; }
.order-card-dimensions button { width: 27px; height: 27px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 6px; color: white; background: #2f6fed; cursor: pointer; font-size: 15px; }
.order-card-dimensions button:hover, .order-card-dimensions button:focus-visible { background: #245ecf; outline: 3px solid rgba(47,111,237,.15); }
.order-card-dimensions[aria-busy="true"] { opacity: .65; }
.order-product-options { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 7px; margin: 12px 0 0; }
.order-product-options > div { min-width: 0; padding: 9px 10px; border: 1px solid #e3e8ef; border-radius: 9px; background: #f8fafc; }
.order-product-options > .is-downloadable { position: relative; min-height: 58px; padding-right: 42px; cursor: pointer; transition: border-color .16s ease, background-color .16s ease, box-shadow .16s ease; }
.order-product-options > .is-downloadable:hover { border-color: #aac5f3; background: #f2f7ff; }
.order-product-options > .is-downloadable:focus-within { border-color: #78a3ed; background: #f2f7ff; box-shadow: 0 0 0 3px rgba(47,111,237,.14); }
.order-product-options dt { color: #7a8799; font-size: 8px; font-weight: 850; letter-spacing: .04em; text-transform: uppercase; }
.order-product-options dd { margin: 4px 0 0; color: #34465f; font-size: 10px; font-weight: 750; line-height: 1.4; overflow-wrap: anywhere; }
.order-option-download { display: inline; padding: 0; border: 0; color: inherit; background: none; font: inherit; text-align: inherit; text-decoration: none; cursor: pointer; }
.order-option-download::before { content: ''; position: absolute; z-index: 1; inset: 0; border-radius: inherit; }
.order-option-download:focus-visible { outline: 0; }
.order-option-download.is-downloading { cursor: progress; opacity: .68; }
.order-option-download.is-downloading::before { cursor: progress; }
.order-option-download-name { position: relative; z-index: 2; pointer-events: none; }
.order-option-download-icon { position: absolute; z-index: 2; top: 50%; right: 9px; width: 25px; height: 25px; display: grid; place-items: center; border-radius: 7px; color: #2f6fed; background: #e4edff; font-size: 16px; line-height: 1; transform: translateY(-50%); pointer-events: none; }
.order-option-download.is-downloading .order-option-download-icon { animation: order-file-download-spin .8s linear infinite; }
@keyframes order-file-download-spin { to { transform: translateY(-50%) rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .order-option-download.is-downloading .order-option-download-icon { animation: none; } }
.order-stage { padding: 7px 9px; border-radius: 8px; color: #2d5b9f; background: #eaf1ff; font-size: 10px; font-weight: 850; white-space: nowrap; }
.order-photo-gallery { display: flex; gap: 9px; margin: 14px -16px 0; padding: 13px 16px; overflow-x: auto; border-block: 1px solid #edf0f4; background: #f8fafc; }
.order-photo-gallery figure { flex: 0 0 190px; margin: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 11px; background: white; }
.order-photo-gallery img { width: 100%; height: 125px; object-fit: cover; }
.order-photo-gallery figcaption { padding: 8px; color: #44556e; font-size: 10px; font-weight: 850; }
.order-photo-gallery figcaption small { display: block; margin-top: 3px; color: var(--muted); font-size: 8px; font-weight: 650; }
.empty-order-photo { min-height: 115px; flex: 1; display: grid; place-items: center; border: 1px dashed #cbd4e0; border-radius: 10px; color: #919cad; font-size: 11px; }
.order-stage-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; margin-top: 13px; }
.order-stage-grid > div { padding: 11px; border-radius: 10px; background: #f4f6f9; }
.order-stage-grid span, .order-stage-grid b, .order-stage-grid small { display: block; }
.order-stage-grid span { color: var(--muted); font-size: 8px; font-weight: 850; letter-spacing: .06em; text-transform: uppercase; }
.order-stage-grid b { margin: 5px 0 2px; font-size: 11px; }
.order-stage-grid small { color: #7c8798; font-size: 9px; }
.order-card-pay { width: 100%; min-height: 35px; display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 5px; margin-top: 9px; padding: 6px 8px; border: 1px solid #d8e2f0; border-radius: 8px; color: #34547f; background: white; cursor: pointer; text-align: left; }
.order-card-pay span { font-size: 7px; }
.order-card-pay strong { margin: 0; font-size: 10px; }
.order-card-pay .material-symbols-rounded { font-size: 14px; }
.order-card-pay:hover, .order-card-pay:focus-visible { border-color: #78a1e8; outline: 3px solid rgba(47,111,237,.1); }
.order-recipe-summary { margin-top: 12px; padding: 10px; border: 1px solid #e0e6ee; border-radius: 10px; }
.order-recipe-summary summary { cursor: pointer; color: #455b76; font-size: 10px; font-weight: 850; }
.order-recipe-summary .yarn-list { margin-top: 10px; }
.order-removed-products { margin-top: 12px; overflow: hidden; border: 1px solid #dfe5ed; border-radius: 13px; background: #fff; }
.order-removed-products > summary { display: flex; align-items: center; gap: 7px; padding: 12px 14px; color: #65748a; cursor: pointer; font-size: 10px; font-weight: 800; list-style: none; }
.order-removed-products > summary::-webkit-details-marker { display: none; }
.order-removed-products > summary .material-symbols-rounded { font-size: 17px; }
.order-removed-products > summary b { margin-left: auto; }
.order-removed-products > div { display: grid; border-top: 1px solid #e8edf3; }
.order-removed-products article { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 10px 13px; }
.order-removed-products article + article { border-top: 1px solid #eef1f5; }
.order-removed-products article > div { min-width: 0; display: grid; gap: 2px; }
.order-removed-products article b, .order-removed-products article small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.order-removed-products article b { font-size: 11px; }
.order-removed-products article small { color: #7c899a; font-size: 9px; }
.order-removed-products .btn { min-height: 32px; padding: 5px 9px; font-size: 9px; }
.order-materials { display: grid; gap: 4px; margin-top: 9px; }
.order-materials span { display: flex; justify-content: space-between; gap: 12px; padding: 6px 8px; border-radius: 7px; color: #687588; background: #f4f6f9; font-size: 9px; }
.order-materials b { color: #34465f; }

.shipment-records { grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)); align-items: start; }
.shipment-record.new-shipment { border-style: dashed; background: #f9fbfd; }
.shipment-record-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.shipment-record-head h3 { margin: 8px 0 0; font-size: 16px; }
.shipment-record-head code { max-width: 50%; padding: 7px 9px; border-radius: 7px; color: #294c85; background: #e5edfb; font-size: 10px; overflow-wrap: anywhere; }
.shipment-record-meta { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: flex-end; gap: 8px; }
.shipment-record-meta > span { min-width: 120px; text-align: right; }
.shipment-record-meta small { display: block; color: var(--muted); font-size: 7px; font-weight: 850; letter-spacing: .05em; text-transform: uppercase; }
.shipment-record-meta strong { display: block; margin-top: 3px; font-size: 13px; }
.shipment-label-photo { width: 100%; max-height: 230px; margin-top: 13px; border-radius: 10px; object-fit: cover; }
.tracking-link { display: inline-flex; align-items: center; gap: 5px; margin-top: 10px; color: var(--blue); font-size: 11px; font-weight: 850; }
.tracking-link .material-symbols-rounded, .order-dossier-nav > a .material-symbols-rounded, .back-link .material-symbols-rounded { font-size: 16px; }
.shipment-form { margin-top: 13px; padding-top: 13px; border-top: 1px solid #edf0f4; }
.shipment-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-bottom: 10px; }
.shipment-form-grid .wide { grid-column: 1 / -1; }
.shipment-form .btn { width: 100%; }
.shipment-event-list { display: grid; gap: 0; margin-top: 14px; padding-top: 8px; border-top: 1px solid #edf0f4; }
.shipment-event-list > div { display: grid; grid-template-columns: 9px 1fr; gap: 9px; padding: 7px 0; }
.shipment-event-list i { width: 8px; height: 8px; margin-top: 4px; border-radius: 50%; background: var(--blue); }
.shipment-event-list p { margin: 0; color: #526075; font-size: 10px; }
.shipment-event-list small, .shipment-event-list time { display: block; margin-top: 3px; color: var(--muted); font-size: 8px; }
.order-timeline { max-width: none; }

@media (min-width: 681px) and (max-width: 1200px) {
    .order-quickbar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .order-quick-action.is-payment { grid-column: 1 / -1; }
}

.earnings-toolbar { display: flex; align-items: stretch; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.earnings-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 16px; }
.earnings-month-nav { width: min(430px, 100%); display: grid; grid-template-columns: 42px minmax(0, 1fr) 42px; align-items: center; gap: 8px; margin: 0 0 16px; padding: 7px; border: 1px solid var(--line); border-radius: 16px; background: white; box-shadow: 0 5px 18px rgba(20,35,59,.05); }
.earnings-toolbar .earnings-month-nav { margin-bottom: 0; }
.earnings-payable-summary { min-width: 220px; display: flex; align-items: center; gap: 11px; padding: 9px 15px; border: 1px solid #cfe6dc; border-radius: 16px; background: linear-gradient(145deg,#fff,#eefaf5); box-shadow: 0 5px 18px rgba(33,169,120,.08); }
.earnings-payable-summary > .material-symbols-rounded { width: 39px; height: 39px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 11px; color: white; background: linear-gradient(135deg,#2f6fed,#31ad81); font-size: 21px; }
.earnings-payable-summary span, .earnings-payable-summary small, .earnings-payable-summary strong, .earnings-payable-summary em { display: block; }
.earnings-payable-summary small { color: #65748a; font-size: 8px; font-weight: 800; text-transform: uppercase; }
.earnings-payable-summary strong { margin-top: 2px; color: var(--ink); font-size: 19px; letter-spacing: -.03em; }
.earnings-payable-summary em { margin-top: 1px; color: #688174; font-size: 8px; font-style: normal; font-weight: 700; }
.payroll-settings-button { min-width: 220px; display: flex; align-items: center; gap: 11px; padding: 9px 15px; border: 1px solid #cfe0fb; border-radius: 16px; color: #1f55a7; background: linear-gradient(145deg,#fff,#edf4ff); box-shadow: 0 5px 18px rgba(47,111,237,.08); cursor: pointer; text-align: left; }
.payroll-settings-button > .material-symbols-rounded { width: 39px; height: 39px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 11px; color: white; background: linear-gradient(135deg,#2f6fed,#665ee5); font-size: 21px; }
.payroll-settings-button span, .payroll-settings-button b, .payroll-settings-button small { display: block; }
.payroll-settings-button b { font-size: 11px; }
.payroll-settings-button small { margin-top: 3px; color: #7183a0; font-size: 8px; font-weight: 700; }
.payroll-settings-button:hover, .payroll-settings-button:focus-visible { border-color: #79a4ec; outline: 3px solid rgba(47,111,237,.13); outline-offset: 2px; }
.earnings-month-nav > a, .earnings-month-nav > .disabled { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 12px; color: #324561; background: #edf2f9; font-size: 25px; font-weight: 650; }
.earnings-month-nav > a:hover { color: white; background: var(--blue); }
.earnings-month-nav > .disabled { opacity: .35; }
.earnings-month-nav div { min-width: 0; text-align: center; }
.earnings-month-nav span, .earnings-month-nav strong { display: block; }
.earnings-month-nav div span { color: var(--muted); font-size: 9px; }
.earnings-month-nav strong { margin-top: 3px; font-size: 14px; }
.earning-card { padding: 20px; border: 1px solid rgba(241,245,249,.6); border-radius: 24px; background: white; box-shadow: 0 1px 2px rgba(15,23,42,.05), 0 0 0 1px rgba(15,23,42,.05); }
.earning-person { min-width: 0; display: flex; gap: 12px; align-items: center; margin-bottom: 24px; }
.earning-person > div { min-width: 0; }
.earning-person .avatar.earning-avatar { width: 40px; height: 40px; color: #4f46e5; background: #eef2ff; font-size: 14px; font-weight: 700; box-shadow: inset 0 2px 4px rgba(15,23,42,.06); }
.earning-person h2 { margin: 0; overflow: hidden; color: #0f172a; font-size: 16px; font-weight: 600; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; }
.earning-person p { margin: 2px 0 0; overflow: hidden; color: #64748b; font-size: 12px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.earning-total { margin: 0 0 24px; }
.earning-total span, .earning-total strong { display: block; }
.earning-total span { margin-bottom: 4px; color: #64748b; font-size: 14px; font-weight: 600; }
.earning-total strong { color: #10b981; font-size: 48px; font-weight: 800; line-height: 1; letter-spacing: -.055em; font-variant-numeric: tabular-nums; }
.earning-motivation { margin-bottom: 20px; padding: 16px; border: 1px solid #f1f5f9; border-radius: 16px; background: rgba(248,250,252,.8); }
.earning-motivation-copy { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 16px; color: #1e293b; }
.earning-motivation-copy > svg { width: 18px; height: 18px; flex: 0 0 18px; margin-top: 2px; color: #6366f1; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2.5; }
.earning-motivation-copy h3 { margin: 0; color: inherit; font-size: 16px; font-weight: 700; line-height: 1.5; }
.earning-motivation-copy .earning-remaining { color: #4f46e5; }
.earning-motivation-copy .earning-bonus { display: inline-block; padding: 1px 4px; border-radius: 4px; color: #10b981; background: #ecfdf5; white-space: nowrap; }
.earning-motivation.is-reached .earning-motivation-copy { align-items: center; color: #059669; }
.earning-motivation.is-reached .earning-motivation-copy > svg { width: 20px; height: 20px; flex-basis: 20px; margin-top: 0; color: #059669; }
.earning-progress-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; color: #64748b; font-size: 12px; }
.earning-progress-heading strong { font-weight: 700; }
.earning-progress-track { height: 12px; display: flex; overflow: hidden; margin-bottom: 8px; border-radius: 999px; background: #e2e8f0; box-shadow: inset 0 2px 4px rgba(15,23,42,.06); }
.earning-progress-fill { position: relative; display: block; height: 100%; overflow: hidden; border-radius: inherit; background: linear-gradient(90deg,#34d399,#10b981); transition: width .7s ease-in-out; }
.earning-progress-fill::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 80px; background: linear-gradient(90deg,transparent,rgba(255,255,255,.2),transparent); transform: skewX(-12deg); animation: earning-progress-shimmer 2s linear infinite; }
.earning-progress-status { width: fit-content; margin-left: auto; padding: 2px 8px; border-radius: 999px; color: #059669; background: #ecfdf5; font-size: 12px; font-weight: 600; }
.earning-motivation-empty { min-height: 56px; display: flex; align-items: center; color: #64748b; font-size: 13px; font-weight: 600; }
.earning-details { padding-top: 8px; border-top: 1px solid #f1f5f9; }
.earning-card > .earning-details > summary { min-height: 36px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 0; list-style: none; color: #64748b; font-size: 14px; font-weight: 500; transition: color .15s ease; }
.earning-card > .earning-details > summary::-webkit-details-marker { display: none; }
.earning-card > .earning-details > summary:hover { color: #1e293b; }
.earning-card > .earning-details > summary:focus-visible { border-radius: 8px; outline: 3px solid rgba(47,111,237,.18); outline-offset: 2px; }
.earning-card > .earning-details > summary svg { width: 18px; height: 18px; flex: 0 0 18px; color: #cbd5e1; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2; transition: color .15s ease, transform .15s ease; }
.earning-card > .earning-details > summary:hover svg { color: #64748b; }
.earning-card > .earning-details[open] > summary svg { transform: rotate(90deg); }
@keyframes earning-progress-shimmer { from { transform: translateX(-180px) skewX(-12deg); } to { transform: translateX(100px) skewX(-12deg); } }
@media (min-width: 640px) {
    .earning-card { padding: 28px; }
    .earning-total strong { font-size: 60px; }
    .earning-motivation { padding: 20px; }
    .earning-progress-track { height: 16px; }
}
@media (prefers-reduced-motion: reduce) {
    .earning-progress-fill { transition: none; }
    .earning-progress-fill::after { animation: none; }
}
.target > div:first-child { display: flex; justify-content: space-between; color: #647185; font-size: 11px; }
.progress { height: 8px; overflow: hidden; margin: 7px 0 17px; border-radius: 999px; background: #e6ebf1; }
.progress i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #2f6fed, #31ad81); }
.earning-lines { margin-top: 12px; }
.earning-lines > div { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-top: 1px solid #edf0f4; font-size: 11px; }
.earning-line > span { min-width: 0; }
.earning-lines small { display: block; margin-top: 3px; color: var(--muted); }
.earning-lines button, .employee-work-list button { padding: 0; border: 0; color: inherit; background: transparent; cursor: pointer; font: inherit; text-align: left; }
.earning-lines button:hover, .employee-work-list button:hover { color: var(--blue); }
.earning-order-link, .employee-work-list a { color: var(--blue); font-weight: 850; }
.earning-lines .earning-work-time { width: fit-content; max-width: 100%; display: inline-flex; align-items: center; gap: 5px; margin-top: 6px; padding: 4px 8px; border-radius: 999px; color: #245fc7; background: #eef5ff; font-variant-numeric: tabular-nums; line-height: 1; }
.earning-work-time > .material-symbols-rounded { flex: 0 0 auto; font-size: 14px; }
.earning-lines .earning-work-time > strong { overflow: visible; color: #1f4f9d; font-size: 10px; font-weight: 850; text-overflow: clip; white-space: nowrap; }
.earning-work-time > i { width: 3px; height: 3px; flex: 0 0 auto; border-radius: 50%; background: #9ab6e7; }
.earning-lines .earning-work-time > em { overflow: hidden; color: #607ca8; font-size: 9px; font-style: normal; font-weight: 750; text-overflow: ellipsis; white-space: nowrap; }
.earning-admin-production-value { margin: 14px 0 0; padding-top: 12px; border-top: 1px solid #edf1f5; color: #7a8799; font-size: 10px; font-weight: 650; line-height: 1.35; }
.earning-admin-production-value strong { color: #53657c; font-weight: 800; font-variant-numeric: tabular-nums; }
.earning-amount-button { min-width: 72px; min-height: 34px; display: inline-flex; align-items: center; justify-content: center; gap: 4px; align-self: center; padding: 6px 9px !important; border: 1px solid #d4deec !important; border-radius: 9px; color: #253957 !important; background: #f7f9fc !important; font-weight: 900 !important; white-space: nowrap; }
.earning-amount-button .material-symbols-rounded { font-size: 14px; }
.earning-amount-button:hover, .earning-amount-button:focus-visible { border-color: #7fa8ec !important; background: #edf4ff !important; outline: none; }

.timeline { position: relative; max-width: 850px; }
.timeline::before { content: ""; position: absolute; left: 7px; top: 7px; bottom: 7px; width: 2px; background: #dce3ec; }
.timeline article { position: relative; display: grid; grid-template-columns: 16px 1fr; gap: 15px; padding-bottom: 20px; }
.timeline-dot { position: relative; z-index: 1; width: 16px; height: 16px; border: 4px solid var(--canvas); border-radius: 50%; background: var(--blue); box-shadow: 0 0 0 1px #b9c8dc; }
.timeline article > div { padding: 13px 15px; border: 1px solid var(--line); border-radius: 12px; background: white; font-size: 12px; }
.timeline a { margin-left: 6px; color: var(--blue); font-weight: 800; }
.timeline p { margin: 5px 0 0; }
.timeline small { display: block; margin-top: 5px; color: var(--muted); }

.update-panel { max-width: 820px; padding: 24px; border: 1px solid var(--line); border-radius: 18px; background: white; box-shadow: var(--shadow); }
.update-panel + .update-panel { margin-top: 14px; }
.update-intro { display: grid; grid-template-columns: 58px 1fr; gap: 17px; align-items: flex-start; }
.update-icon { width: 58px; height: 58px; display: grid; place-items: center; border-radius: 16px; color: white; background: linear-gradient(135deg, var(--blue), #6f61db); font-size: 30px; font-weight: 850; }
.update-icon .material-symbols-rounded { font-size: 29px; }
.update-intro h2 { margin: 4px 0 8px; font-size: 23px; }
.update-intro p { max-width: 680px; margin: 0; color: var(--muted); font-size: 13px; line-height: 1.6; }
.health-check-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 8px; margin-top: 20px; }
.health-check { min-width: 0; display: flex; align-items: center; gap: 8px; padding: 10px 12px; border: 1px solid #dce4ef; border-radius: 11px; color: #41516a; background: #f7f9fc; font-size: 11px; font-weight: 750; line-height: 1.25; }
.health-check i { width: 9px; height: 9px; flex: 0 0 9px; border-radius: 50%; background: #7f8da1; box-shadow: 0 0 0 4px #e6ebf2; }
.health-check.ok { border-color: #cdeadd; color: #147650; background: #f1fbf6; }
.health-check.ok i { background: #20a46e; box-shadow: 0 0 0 4px #dff6ed; }
.health-check.warning { border-color: #f0ddb3; color: #875f17; background: #fff9eb; }
.health-check.warning i { background: #d79b30; box-shadow: 0 0 0 4px #fff0d2; }
.health-check.error { border-color: #efcfd4; color: #ad3241; background: #fff5f6; }
.health-check.error i { background: #d83c50; box-shadow: 0 0 0 4px #fde4e8; }
.maintenance-actions { display: flex; justify-content: flex-end; margin-top: 12px; }
.maintenance-actions form { margin: 0; }
.maintenance-actions .btn { min-height: 40px; }
.backup-create-form { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: center; margin-top: 20px; }
.backup-create-form input { width: 100%; min-width: 0; height: 44px; padding: 0 13px; border: 1px solid #d6deea; border-radius: 11px; color: var(--ink); background: #fbfcfe; outline: none; }
.backup-create-form input:focus { border-color: #82a8f7; background: white; box-shadow: 0 0 0 3px rgba(47,111,237,.11); }
.backup-list { display: grid; gap: 8px; margin-top: 14px; }
.backup-list article { min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 11px 12px; border: 1px solid #e0e6ef; border-radius: 11px; background: #f9fbfd; }
.backup-list article > div { min-width: 0; }
.backup-list b, .backup-list small { display: block; }
.backup-list b { overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.backup-list small { margin-top: 3px; color: var(--muted); font-size: 10px; line-height: 1.35; }
.release-actions, .sync-event-actions { min-width: 132px; display: flex; align-items: flex-end; justify-content: flex-start; flex-direction: column; gap: 8px; }
.release-actions form, .sync-event-actions form { margin: 0; }
.update-history details { max-width: 100%; margin-top: 8px; }
.update-history summary { color: #486183; cursor: pointer; font-size: 10px; font-weight: 800; }
.update-history textarea { width: min(560px, 100%); margin-top: 7px; padding: 9px; border: 1px solid #d8e0eb; border-radius: 9px; color: #44546d; background: #f7f9fc; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 10px; resize: vertical; }
.update-form { display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: end; margin-top: 24px; }
.update-drop { display: grid; gap: 7px; padding: 15px; border: 1px dashed #b7c5d8; border-radius: 13px; background: #f7f9fc; color: #41536c; font-size: 12px; font-weight: 800; }
.update-drop input { padding: 8px; background: white; }
.update-drop small { color: var(--muted); font-size: 10px; font-weight: 600; }
.opencart-settings-form { margin-top: 22px; }
.opencart-settings-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; }
.opencart-settings-grid label { min-width: 0; display: grid; gap: 7px; color: #41506a; font-size: 12px; font-weight: 800; }
.opencart-settings-grid label > span { display: block; }
.opencart-settings-grid input, .opencart-settings-grid select { width: 100%; min-width: 0; height: 46px; padding: 0 13px; border: 1px solid #d6deea; border-radius: 11px; color: var(--ink); background: #fbfcfe; outline: none; transition: border-color .15s ease, box-shadow .15s ease, background .15s ease; }
.opencart-settings-grid input:focus, .opencart-settings-grid select:focus { border-color: #82a8f7; background: white; box-shadow: 0 0 0 3px rgba(47,111,237,.11); }
.opencart-settings-grid small { min-height: 16px; color: var(--muted); font-size: 10px; font-weight: 550; line-height: 1.45; }
.opencart-settings-grid small b { color: #40516c; }
.opencart-settings-actions { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 17px; padding-top: 17px; border-top: 1px solid #edf0f4; }
.integration-state { display: inline-flex; align-items: center; gap: 8px; color: #667489; font-size: 11px; font-weight: 800; }
.integration-state i { width: 9px; height: 9px; border-radius: 50%; background: #d79b30; box-shadow: 0 0 0 4px #fff2d9; }
.integration-state.is-ready { color: #147650; }
.integration-state.is-ready i { background: #20a46e; box-shadow: 0 0 0 4px #dff6ed; }
.opencart-settings-actions .btn { min-width: 190px; }
.opencart-settings-grid .telegram-toggle { min-height: 46px; display: flex; align-items: center; gap: 10px; padding: 0 13px; border: 1px solid #d6deea; border-radius: 11px; background: #fbfcfe; }
.opencart-settings-grid .telegram-toggle input { width: 18px; min-width: 18px; height: 18px; padding: 0; accent-color: var(--blue); }
.opencart-settings-grid .telegram-toggle b { font-size: 11px; }
.telegram-settings-actions > div { display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
.telegram-settings-actions .btn { min-width: 0; }
.telegram-delivery-queue { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 14px; padding: 12px 14px; border: 1px solid #f0ddb3; border-radius: 11px; color: #765719; background: #fff9eb; }
.telegram-delivery-queue > div { min-width: 0; }
.telegram-delivery-queue b, .telegram-delivery-queue small { display: block; }
.telegram-delivery-queue b { font-size: 11px; }
.telegram-delivery-queue small { margin-top: 4px; font-size: 10px; line-height: 1.4; }
.telegram-delivery-queue form { flex: 0 0 auto; margin: 0; }
.shipment-email-health { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.shipment-email-delivery-meta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 8px; }
.shipment-email-delivery-meta > span { min-width: 0; padding: 10px 12px; border: 1px solid #dce4ef; border-radius: 11px; color: #41516a; background: #f7f9fc; }
.shipment-email-delivery-meta b, .shipment-email-delivery-meta small { display: block; }
.shipment-email-delivery-meta b { font-size: 10px; }
.shipment-email-delivery-meta small { overflow-wrap: anywhere; margin-top: 4px; color: var(--muted); font-size: 10px; line-height: 1.4; }
.shipment-email-delivery-meta > span.has-error { border-color: #efcfd4; background: #fff5f6; }
.shipment-email-delivery-meta > span.has-error b, .shipment-email-delivery-meta > span.has-error small { color: #ad3241; }
.shipment-email-events { min-width: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 17px 0 0; padding: 14px; border: 1px solid #dce4ef; border-radius: 12px; background: #f8fafc; }
.shipment-email-events legend { padding: 0 6px; color: #41506a; font-size: 11px; font-weight: 850; }
.shipment-email-events label { min-width: 0; display: flex; align-items: center; gap: 8px; padding: 9px 10px; border: 1px solid #e0e6ef; border-radius: 9px; color: #40516a; background: white; font-size: 10px; font-weight: 750; }
.shipment-email-events input[type="checkbox"] { width: 17px; min-width: 17px; height: 17px; margin: 0; accent-color: var(--blue); }
.shipment-email-test-row { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(260px, .6fr); gap: 12px; margin-top: 14px; }
.shipment-email-test-row label { display: grid; gap: 7px; color: #41506a; font-size: 12px; font-weight: 800; }
.shipment-email-test-row input, .shipment-email-test-row select { width: 100%; min-width: 0; height: 46px; padding: 0 13px; border: 1px solid #d6deea; border-radius: 11px; color: var(--ink); background: #fbfcfe; outline: none; }
.shipment-email-test-row input:focus, .shipment-email-test-row select:focus { border-color: #82a8f7; background: white; box-shadow: 0 0 0 3px rgba(47,111,237,.11); }
.shipment-email-test-row small { color: var(--muted); font-size: 10px; font-weight: 550; line-height: 1.45; }
.shipment-email-settings-actions > div { display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
.shipment-email-settings-actions .btn { min-width: 0; }
.shipment-email-current { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; margin-top: 14px; padding: 14px; border: 1px solid #d9e4f6; border-radius: 13px; background: linear-gradient(135deg, #f7faff 0%, #fbf9ff 100%); }
.shipment-email-current-icon { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; color: #2f6fed; background: #e8f0ff; }
.shipment-email-current-icon .material-symbols-rounded { font-size: 22px; }
.shipment-email-current-copy { min-width: 0; display: grid; gap: 4px; color: #263750; }
.shipment-email-current-copy > b { font-size: 12px; }
.shipment-email-current-copy small { color: #66758c; font-size: 10px; line-height: 1.5; }
.shipment-email-current-copy small strong { color: #263750; }
.shipment-email-current-copy small.has-warning { color: #9a6300; }
.shipment-email-current form { margin: 0; }
.shipment-email-current .btn { white-space: nowrap; }
.shipment-email-worker-hint { display: flex; align-items: flex-start; gap: 9px; margin-top: 14px; padding: 11px 13px; border: 1px solid #dce6f7; border-radius: 10px; color: #486183; background: #f5f8fe; font-size: 10px; line-height: 1.5; }
.shipment-email-worker-hint .material-symbols-rounded { flex: 0 0 auto; font-size: 18px; }
.opencart-endpoint { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 18px; margin-top: 18px; padding: 12px 14px; border: 1px solid #dce6f7; border-radius: 11px; background: #f5f8fe; }
.opencart-endpoint div { min-width: 220px; flex: 1 1 280px; }
.opencart-endpoint span, .opencart-endpoint code { display: block; }
.opencart-endpoint span { margin-bottom: 4px; color: #768398; font-size: 9px; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
.opencart-endpoint code { overflow: hidden; color: #304562; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 10px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.opencart-endpoint > b { flex: 0 0 auto; padding: 6px 9px; border-radius: 7px; color: #275db5; background: #e5eeff; font-size: 9px; letter-spacing: .04em; }
.update-warning { margin-top: 16px; padding: 11px 13px; border-radius: 10px; color: #80601d; background: #fff6df; font-size: 11px; line-height: 1.45; }
.update-history { max-width: 820px; margin-top: 24px; }
.update-history h2 { font-size: 17px; }
.update-history article { display: flex; justify-content: space-between; gap: 18px; padding: 13px 15px; border: 1px solid var(--line); border-radius: 11px; background: white; }
.update-history article + article { margin-top: 7px; }
.update-history p { margin: 4px 0 0; color: var(--muted); font-size: 11px; line-height: 1.4; }
.update-history time { flex: 0 0 auto; color: var(--muted); font-size: 10px; }

.notification-actions { display: flex; justify-content: flex-end; margin-bottom: 12px; }
.notifications-list { max-width: 820px; display: grid; gap: 7px; }
.notifications-list article { display: flex; gap: 12px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 13px; background: white; }
.notifications-list article.unread { border-left: 4px solid var(--blue); background: #f7faff; }
.notifications-list p { margin: 0 0 5px; font-size: 13px; font-weight: 650; }
.notifications-list small, .notifications-list time { display: block; color: var(--muted); font-size: 10px; }
.empty-state { min-height: 180px; display: grid; place-items: center; border: 1px dashed #cbd3df; border-radius: var(--radius); color: var(--muted); background: rgba(255,255,255,.55); }

.photo-modal { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 20px; background: rgba(11,20,35,.72); backdrop-filter: blur(6px); }
.photo-modal[hidden] { display: none; }
.photo-modal-open { overflow: hidden; }
.photo-dialog { width: min(760px, 100%); max-height: calc(100vh - 30px); max-height: calc(100dvh - 30px); display: flex; flex-direction: column; overflow-y: auto; padding: 18px; border-radius: 18px; background: white; box-shadow: 0 24px 70px rgba(0,0,0,.3); }
.photo-dialog-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; margin-bottom: 12px; }
.photo-dialog h2 { margin: 4px 0 0; font-size: 19px; }
.photo-crop-size { flex: 0 0 auto; padding: 6px 9px; border-radius: 8px; color: #426087; background: #edf3fc; font-size: 10px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.photo-crop-viewport { height: clamp(280px, 52vh, 520px); min-height: 240px; display: grid; place-items: center; overflow: hidden; border-radius: 13px; background: #172236; box-shadow: inset 0 0 0 1px rgba(255,255,255,.07); }
.photo-crop-surface { position: relative; width: 120px; height: 120px; flex: 0 0 auto; overflow: hidden; background: #0d1625; touch-action: none; user-select: none; -webkit-user-select: none; }
.photo-crop-surface > img { width: 100%; height: 100%; display: block; pointer-events: none; object-fit: fill; }
.photo-crop-box { position: absolute; z-index: 2; border: 2px solid white; background-image: linear-gradient(to right, transparent 33.1%, rgba(255,255,255,.58) 33.3%, rgba(255,255,255,.58) 33.7%, transparent 33.9%, transparent 66.1%, rgba(255,255,255,.58) 66.3%, rgba(255,255,255,.58) 66.7%, transparent 66.9%), linear-gradient(to bottom, transparent 33.1%, rgba(255,255,255,.58) 33.3%, rgba(255,255,255,.58) 33.7%, transparent 33.9%, transparent 66.1%, rgba(255,255,255,.58) 66.3%, rgba(255,255,255,.58) 66.7%, transparent 66.9%); box-shadow: 0 0 0 9999px rgba(4,9,17,.62), 0 0 0 1px rgba(20,35,59,.35); cursor: move; touch-action: none; }
.photo-crop-handle { position: absolute; z-index: 3; width: 25px; height: 25px; padding: 0; border: 0; background: transparent; touch-action: none; }
.photo-crop-handle::after { content: ""; position: absolute; inset: 7px; border: 2px solid #2f6fed; border-radius: 50%; background: white; box-shadow: 0 2px 7px rgba(4,9,17,.45); }
.photo-crop-handle.handle-nw { left: -13px; top: -13px; cursor: nwse-resize; }
.photo-crop-handle.handle-n { left: calc(50% - 13px); top: -13px; cursor: ns-resize; }
.photo-crop-handle.handle-ne { right: -13px; top: -13px; cursor: nesw-resize; }
.photo-crop-handle.handle-e { right: -13px; top: calc(50% - 13px); cursor: ew-resize; }
.photo-crop-handle.handle-se { right: -13px; bottom: -13px; cursor: nwse-resize; }
.photo-crop-handle.handle-s { left: calc(50% - 13px); bottom: -13px; cursor: ns-resize; }
.photo-crop-handle.handle-sw { left: -13px; bottom: -13px; cursor: nesw-resize; }
.photo-crop-handle.handle-w { left: -13px; top: calc(50% - 13px); cursor: ew-resize; }
.photo-crop-help { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 9px; color: #748196; font-size: 10px; line-height: 1.35; }
.photo-crop-reset { flex: 0 0 auto; padding: 5px 8px; border: 0; border-radius: 7px; color: #315b9a; background: #eaf2ff; cursor: pointer; font-size: 9px; font-weight: 800; }
.photo-modal.photo-crop-disabled .photo-crop-box,
.photo-modal.photo-crop-disabled .photo-crop-help,
.photo-modal.photo-crop-disabled .photo-crop-size,
.photo-modal.photo-crop-disabled .crop-photo { display: none; }
.photo-modal.photo-crop-disabled .photo-modal-actions { grid-template-columns: 1fr 1fr; }
.modal-actions { display: grid; grid-template-columns: 1fr 1fr 1.35fr; gap: 9px; margin-top: 14px; }
.modal-actions .btn { min-height: 44px; }

.template-modal { --template-blue: #2563eb; --template-ink: #18243a; --template-muted: #718096; --template-line: #dfe6ef; position: fixed; inset: 0; z-index: 110; display: grid; place-items: center; padding: 16px; background: rgba(11,20,35,.76); backdrop-filter: blur(9px); }
.template-modal[hidden] { display: none; }
.template-dialog { width: min(1180px, 100%); height: min(820px, calc(100dvh - 32px)); min-width: 0; max-width: 100%; max-height: calc(100dvh - 32px); display: grid; grid-template-rows: auto minmax(0, 1fr) auto auto; gap: 12px; padding: 18px; overflow: hidden; border: 1px solid rgba(255,255,255,.7); border-radius: 24px; background: #fff; box-shadow: 0 28px 90px rgba(5,15,35,.38); }
.template-dialog-head { min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.template-dialog-title { min-width: 0; flex: 1; }
.template-dialog-head .eyebrow { color: #3976e8; font-size: 9px; letter-spacing: .13em; }
.template-dialog-head h2 { margin: 3px 0 0; overflow: hidden; color: var(--template-ink); font-size: 21px; line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; }
.template-dialog-head .close-template { width: 44px; height: 44px; flex: 0 0 44px; border-radius: 13px; }
.template-editor-workspace { min-width: 0; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 320px); gap: 14px; }
.template-modal:not(.is-palette-visible) .template-editor-workspace { grid-template-columns: minmax(0, 1fr); }
.template-preview-panel { min-width: 0; min-height: 0; display: grid; grid-template-rows: minmax(0, 1fr) auto; gap: 10px; }
.template-canvas { position: relative; min-width: 0; min-height: 330px; display: grid; grid-template-columns: minmax(0, 1fr); place-items: safe center; padding: 18px; overflow: auto; overscroll-behavior: contain; scrollbar-gutter: stable; border: 1px solid #e4eaf2; border-radius: 18px; background: #edf1f6; touch-action: none; }
.template-canvas > * { grid-area: 1 / 1; }
.template-canvas.is-zoomed { cursor: grab; }
.template-canvas.is-panning { cursor: grabbing; user-select: none; }
.template-zoom-stage { position: relative; width: 100%; min-width: 1px; min-height: 1px; display: grid; place-items: center; justify-self: safe center; align-self: safe center; transform-origin: center; }
.template-zoom-stage > * { grid-area: 1 / 1; }
.template-canvas img { width: 100%; max-width: none; height: 100%; max-height: none; justify-self: center; align-self: center; object-fit: contain; user-select: none; -webkit-user-drag: none; }
.template-canvas img[hidden], .template-modal-empty[hidden] { display: none; }
.template-modal-empty { max-width: 420px; padding: 32px; color: #78869a; font-size: 13px; font-weight: 750; line-height: 1.5; text-align: center; }
.template-viewer-toolbar { min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px; border: 1px solid var(--template-line); border-radius: 16px; background: #f8fafc; }
.template-viewer-toolbar[hidden] { display: none; }
.template-view-controls { min-width: 0; display: inline-flex; align-items: center; gap: 4px; }
.template-view-controls[hidden] { display: none; }
.template-view-controls button { min-width: 42px; height: 42px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 0 10px; border: 1px solid transparent; border-radius: 11px; color: #52637a; background: transparent; cursor: pointer; font: inherit; font-size: 11px; font-weight: 850; transition: color .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease; }
.template-view-controls button:hover { color: #1f5fc9; background: #eaf2ff; }
.template-view-controls button:focus-visible { border-color: #8db3f2; outline: 3px solid rgba(37,99,235,.16); outline-offset: 1px; }
.template-view-controls button:disabled { opacity: .42; cursor: not-allowed; }
.template-view-controls .material-symbols-rounded { font-size: 20px; }
.template-view-controls button.material-symbols-rounded { font-family: "Material Symbols Rounded"; font-size: 20px; font-style: normal; font-weight: 400; letter-spacing: normal; line-height: 1; text-transform: none; white-space: nowrap; word-wrap: normal; direction: ltr; -webkit-font-feature-settings: "liga"; -webkit-font-smoothing: antialiased; }
.template-view-controls .template-viewer-zoom-value { min-width: 64px; color: #284261; background: #fff; border-color: #dbe4ef; font-variant-numeric: tabular-nums; }
.template-fit-button span { white-space: nowrap; }
.template-actions { min-width: 0; display: flex; align-items: center; justify-content: flex-end; gap: 7px; margin: 0; }
.template-actions[hidden], .template-actions form[hidden], .template-actions button[hidden] { display: none; }
.template-actions form { min-width: 0; margin: 0; }
.template-actions .btn { min-height: 42px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding-inline: 12px; border-radius: 11px; font-size: 10px; white-space: nowrap; }
.template-actions .btn .material-symbols-rounded { font-size: 18px; }
.template-actions .template-upload-button, .template-actions .card-photo-upload-button { color: #fff; background: var(--template-blue); box-shadow: 0 6px 16px rgba(37,99,235,.2); }
.template-actions .template-upload-button:hover, .template-actions .card-photo-upload-button:hover { background: #1d4ed8; }
.template-actions .template-upload-button > span, .template-actions .card-photo-upload-button > span { width: 100%; min-width: 0; display: inline-flex; align-items: center; justify-content: center; gap: 6px; line-height: 1.15; text-align: center; }
.card-photo-replace-form { flex: 0 1 auto; }
.template-file-input, .card-photo-file-input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.template-upload-button, .card-photo-upload-button { position: relative; overflow: hidden; cursor: pointer; }
.template-upload-button:focus-within, .card-photo-upload-button:focus-within { outline: 3px solid rgba(37,99,235,.22); outline-offset: 2px; }
.template-overflow { position: relative; flex: 0 0 auto; }
.template-overflow[hidden] { display: none; }
.template-more-toggle { width: 42px; height: 42px; border-radius: 11px; }
.template-more-toggle[hidden] { display: none; }
.template-overflow-menu { position: absolute; z-index: 30; right: 0; bottom: calc(100% + 8px); width: 210px; padding: 6px; border: 1px solid #e0e6ef; border-radius: 13px; background: #fff; box-shadow: 0 18px 44px rgba(20,35,59,.2); }
.template-overflow-menu[hidden] { display: none; }
.template-overflow-menu form { width: 100%; }
.template-modal .template-delete-button { width: 100%; min-height: 42px; display: flex; align-items: center; gap: 9px; padding: 9px 10px; border: 0; border-radius: 9px; color: #b42335; background: transparent; cursor: pointer; font: inherit; font-size: 11px; font-weight: 850; text-align: left; }
.template-modal .template-delete-button:hover, .template-modal .template-delete-button:focus-visible { color: #941d2c; background: #fff0f2; outline: none; }
.template-modal .template-delete-button .material-symbols-rounded { font-size: 19px; }
.template-palette-panel { min-width: 0; min-height: 0; display: grid; grid-template-rows: auto auto minmax(0, 1fr); gap: 10px; padding: 14px; overflow: hidden; border: 1px solid #e0e7f0; border-radius: 18px; background: #f8fafc; }
.template-palette-panel[hidden] { display: none; }
.template-palette-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.template-palette-panel-head > div { min-width: 0; display: grid; gap: 2px; }
.template-palette-panel-head > div > span { color: var(--template-ink); font-size: 15px; font-weight: 900; }
.template-palette-panel-head small { color: var(--template-muted); font-size: 10px; font-weight: 750; }
.template-palette-panel-head small b { color: #345b93; }
.template-palette-collapse { width: 40px; height: 40px; flex: 0 0 40px; border-radius: 11px; }
.template-palette-actions { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 7px; }
.template-palette-actions[hidden] { display: none; }
.template-modal .palette-edit-button, .template-modal .image-purchase-button { width: 100%; min-height: 42px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 0 10px; border-radius: 11px; font: inherit; font-size: 10px; font-weight: 850; white-space: nowrap; }
.template-modal .palette-edit-button .material-symbols-rounded, .template-modal .image-purchase-button .material-symbols-rounded { font-size: 18px; }
.template-modal .palette-edit-button[hidden], .template-modal .image-purchase-button[hidden] { display: none; }
.template-palette-content { min-width: 0; min-height: 0; display: grid; }
.template-palette-content > * { grid-area: 1 / 1; }
.template-palette-empty { min-height: 170px; display: grid; place-content: center; justify-items: center; gap: 6px; padding: 22px; border: 1px dashed #cdd9e8; border-radius: 14px; color: #718096; background: #fff; text-align: center; }
.template-palette-empty[hidden] { display: none; }
.template-palette-empty .material-symbols-rounded { color: #8aa4c8; font-size: 30px; }
.template-palette-empty b { color: #29405f; font-size: 12px; }
.template-palette-empty span { max-width: 210px; font-size: 10px; font-weight: 650; line-height: 1.45; }
.template-image-marker-legend { min-width: 0; max-width: 100%; min-height: 0; display: flex; flex-direction: column; flex-wrap: nowrap; gap: 7px; margin: 0; padding: 1px; overflow-x: hidden; overflow-y: auto; scrollbar-width: thin; }
.template-image-marker-legend[hidden] { display: none; }
.template-modal .image-yarn-legend-item { width: 100%; min-height: 52px; display: grid; grid-template-columns: 26px 20px minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 8px; border-radius: 12px; background: #fff; text-align: left; }
.template-modal .image-yarn-legend-item em { width: 26px; height: 26px; border-radius: 8px; font-size: 9px; }
.template-modal .image-marker-legend i { width: 18px; height: 18px; }
.template-modal .image-marker-legend b { overflow: hidden; font-size: 10px; line-height: 1.3; text-overflow: ellipsis; white-space: nowrap; }
.template-modal .image-yarn-quantity { grid-column: 4; padding-left: 0; font-size: 9px; }
.template-modal .image-yarn-requested { grid-column: 4; font-size: 8px; }
.template-modal .image-yarn-marker { width: 34px; height: 34px; font-size: 9px; }
.template-modal.is-site-positioning .template-canvas { min-height: 340px; place-items: start center; }
.template-modal.is-site-positioning .template-zoom-stage { height: auto !important; }
.template-modal.is-site-positioning .template-canvas img { width: 100%; height: auto; max-height: none; object-fit: initial; }
.template-modal.is-site-positioning .template-image-marker-layer { touch-action: none; }
.template-modal.is-site-positioning .template-viewer-toolbar { display: none; }
.template-modal.is-site-positioning .image-yarn-marker { cursor: grab; touch-action: none; }
.template-modal.is-site-positioning .image-yarn-marker.is-position-holding { box-shadow: 0 0 0 6px rgba(47,111,237,.18), 0 5px 14px rgba(20,35,59,.4); }
.template-modal.is-site-positioning .image-yarn-marker.is-position-dragging { z-index: 20; cursor: grabbing; transform: translate(-50%, -50%) scale(1.25); box-shadow: 0 0 0 7px rgba(47,111,237,.23), 0 8px 20px rgba(20,35,59,.5); }
@media (prefers-reduced-motion: reduce) {
    .template-modal .template-view-controls button,
    .template-modal .image-palette-toggle,
    .template-modal .image-yarn-marker,
    .template-modal .image-yarn-legend-item { transition: none; }
}
.template-position-toolbar { display: grid; grid-template-columns: minmax(210px, 1fr) auto auto auto; align-items: center; gap: 9px; padding: 10px; border: 1px solid #dbe5f2; border-radius: 13px; background: #f6f9fd; }
.template-position-toolbar[hidden] { display: none; }
.template-position-copy { min-width: 0; display: grid; gap: 2px; }
.template-position-toolbar b { color: #2c405e; font-size: 11px; }
.template-position-toolbar small { color: #75849a; font-size: 9px; line-height: 1.35; }
.template-position-zoom { display: inline-grid; grid-template-columns: 38px 62px 38px; overflow: hidden; border: 1px solid #d7e0ec; border-radius: 10px; background: white; }
.template-position-zoom button { height: 40px; padding: 0; border: 0; border-right: 1px solid #e2e7ee; color: #405877; background: transparent; cursor: pointer; font: inherit; font-size: 17px; font-weight: 850; }
.template-position-zoom button:last-child { border-right: 0; }
.template-position-zoom button:hover, .template-position-zoom button:focus-visible { color: #1f62d0; background: #edf4ff; outline: none; }
.template-position-zoom .template-position-zoom-value { font-size: 10px; }
.template-position-toolbar .btn { min-height: 40px; padding-inline: 12px; white-space: nowrap; }
.template-dialog-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 1px; }
.template-save-state { display: inline-flex; align-items: center; gap: 7px; color: #718096; font-size: 10px; font-weight: 750; }
.template-save-state > i { width: 8px; height: 8px; border-radius: 50%; background: #2ca56f; box-shadow: 0 0 0 4px rgba(44,165,111,.12); }
.template-dialog-footer .btn { min-height: 42px; min-width: 108px; border-radius: 11px; }
.template-dialog.is-action-pending .template-viewer-toolbar, .template-dialog.is-action-pending .template-palette-actions { pointer-events: none; opacity: .66; }

.catalog-image-modal { position: fixed; inset: 0; z-index: 115; display: grid; place-items: center; padding: 20px; background: rgba(11,20,35,.78); backdrop-filter: blur(7px); }
.catalog-image-modal[hidden] { display: none; }
.catalog-image-dialog { width: min(760px, 100%); max-height: calc(100vh - 40px); display: flex; flex-direction: column; padding: 18px; border-radius: 19px; background: white; box-shadow: 0 28px 80px rgba(0,0,0,.34); }
.catalog-image-dialog-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 15px; margin-bottom: 13px; }
.catalog-image-dialog-head h2 { margin: 4px 0 0; font-size: 20px; }
.image-dialog-controls { display: flex; align-items: center; gap: 8px; }
.template-delete-form { display: flex; margin: 0; }
.template-delete-form[hidden] { display: none; }
.template-delete-button { flex: 0 0 40px; width: 40px; height: 40px; border-color: #f0cbd0; border-radius: 11px; color: #bd3543; background: #fff1f3; font-size: 19px; transition: color .16s ease, border-color .16s ease, background .16s ease, box-shadow .16s ease, transform .16s ease; }
.template-delete-button:hover { border-color: #e59aa4; color: #a82332; background: #ffe5e9; box-shadow: 0 5px 14px rgba(189,53,67,.13); transform: translateY(-1px); }
.template-delete-button:focus-visible { outline: 3px solid rgba(221,63,73,.18); outline-offset: 2px; }
.image-palette-toggle { min-height: 40px; display: inline-flex; align-items: center; gap: 8px; padding: 6px 8px 6px 10px; border: 1px solid #d8e0eb; border-radius: 11px; color: #53647b; background: #f5f7fa; cursor: pointer; font-size: 10px; font-weight: 850; transition: color .16s ease, border-color .16s ease, background .16s ease, box-shadow .16s ease; }
.image-palette-toggle[hidden] { display: none; }
.image-palette-toggle:hover { border-color: #b8c8df; color: #315b98; background: #eef4fc; }
.image-palette-toggle:focus-visible { outline: 3px solid rgba(47,111,237,.18); outline-offset: 2px; }
.image-palette-toggle.is-active { border-color: #2f6fed; color: white; background: #2f6fed; box-shadow: 0 5px 14px rgba(47,111,237,.22); }
.image-palette-icon { display: flex; align-items: center; }
.image-palette-icon i { width: 11px; height: 11px; margin-left: -3px; border: 2px solid white; border-radius: 50%; background: #f2c36b; box-shadow: 0 1px 3px rgba(20,35,59,.18); }
.image-palette-icon i:first-child { margin-left: 0; background: #ee6d6d; }
.image-palette-icon i:last-child { background: #5b83da; }
.image-palette-count { min-width: 21px; height: 21px; display: grid; place-items: center; padding: 0 5px; border-radius: 7px; color: #47617f; background: white; font-size: 9px; line-height: 1; }
.image-palette-toggle.is-active .image-palette-count { color: #2f6fed; }
.palette-edit-button { flex: 0 0 40px; width: 40px; height: 40px; border-color: #cbdcf9; border-radius: 11px; color: #2f6fed; background: #edf4ff; font-size: 19px; transition: color .16s ease, border-color .16s ease, background .16s ease, box-shadow .16s ease, transform .16s ease; }
.palette-edit-button[hidden] { display: none; }
.palette-edit-button:hover { border-color: #8fb2eb; color: #174fba; background: #e2edff; box-shadow: 0 5px 14px rgba(47,111,237,.14); transform: translateY(-1px); }
.palette-edit-button:focus-visible { outline: 3px solid rgba(47,111,237,.18); outline-offset: 2px; }
.palette-edit-button.is-active { border-color: #2f6fed; color: white; background: #2f6fed; box-shadow: 0 5px 14px rgba(47,111,237,.22); }
.image-purchase-button { min-height: 40px; display: inline-flex; align-items: center; gap: 6px; padding: 0 11px; border: 1px solid #c9dfd5; border-radius: 11px; color: #267155; background: #eef8f3; cursor: pointer; font: inherit; font-size: 10px; font-weight: 850; white-space: nowrap; transition: color .16s ease, border-color .16s ease, background .16s ease, box-shadow .16s ease, transform .16s ease; }
.image-purchase-button[hidden] { display: none; }
.image-purchase-button > .material-symbols-rounded { font-size: 18px; }
.image-purchase-button:hover { border-color: #8ac5ad; color: #136545; background: #e3f5ec; box-shadow: 0 5px 14px rgba(38,113,85,.12); transform: translateY(-1px); }
.image-purchase-button:focus-visible { outline: 3px solid rgba(32,145,101,.18); outline-offset: 2px; }
.image-purchase-button.is-active { border-color: #238b64; color: white; background: #238b64; box-shadow: 0 5px 14px rgba(35,139,100,.22); }
.catalog-image-canvas { position: relative; min-height: 250px; display: grid; place-items: center; overflow: hidden; border-radius: 13px; background: #e9edf3; }
.catalog-image-canvas > * { grid-area: 1 / 1; }
.catalog-image-canvas img { width: 100%; max-height: calc(100vh - 290px); object-fit: contain; }
.catalog-image-canvas img[hidden], .catalog-image-modal-empty[hidden] { display: none; }
.catalog-image-modal-empty { padding: 30px; color: #7d899b; font-size: 12px; font-weight: 800; text-align: center; }
.image-marker-layer { position: absolute; z-index: 4; pointer-events: none; }
.image-marker-layer[hidden], .image-marker-legend[hidden] { display: none; }
.image-yarn-marker { position: absolute; width: 29px; height: 29px; display: grid; place-items: center; padding: 0; border: 3px solid white; border-radius: 50%; color: white; background: var(--marker-color, #a0a0a0); box-shadow: 0 3px 9px rgba(20,35,59,.42); transform: translate(-50%, -50%); cursor: pointer; pointer-events: auto; font-size: 8px; font-weight: 900; line-height: 1; text-shadow: 0 1px 2px rgba(0,0,0,.55); transition: opacity .15s ease, transform .15s ease, box-shadow .15s ease; }
.image-yarn-marker:focus-visible { outline: 3px solid rgba(47,111,237,.34); outline-offset: 3px; }
.image-yarn-marker.is-active, .image-yarn-marker:hover, .image-yarn-marker:focus-visible { z-index: 8; transform: translate(-50%, -50%) scale(1.2); box-shadow: 0 0 0 5px rgba(47,111,237,.22), 0 5px 14px rgba(20,35,59,.46); }
.image-marker-layer.has-yarn-selection .image-yarn-marker:not(.is-active) { opacity: .52; }
.image-marker-callout { position: absolute; z-index: 12; top: calc(100% + 10px); left: 50%; min-width: 145px; max-width: 220px; display: grid; gap: 2px; padding: 8px 10px; border-radius: 9px; color: white; background: #14233b; box-shadow: 0 8px 22px rgba(13,25,45,.3); opacity: 0; visibility: hidden; transform: translate(-50%, -4px) scale(.84); transform-origin: top center; pointer-events: none; text-align: left; text-shadow: none; white-space: nowrap; transition: opacity .14s ease, transform .14s ease, visibility .14s ease; }
.image-marker-callout::before { content: ""; position: absolute; top: -5px; left: calc(50% - 5px); width: 10px; height: 10px; background: #14233b; transform: rotate(45deg); }
.image-marker-callout small { color: #a9bad2; font-size: 7px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.image-marker-callout b { overflow: hidden; text-overflow: ellipsis; font-size: 9px; line-height: 1.25; }
.image-yarn-marker.is-active .image-marker-callout, .image-yarn-marker:hover .image-marker-callout, .image-yarn-marker:focus-visible .image-marker-callout { opacity: 1; visibility: visible; transform: translate(-50%, 0) scale(.84); }
.image-yarn-marker.is-callout-above .image-marker-callout { top: auto; bottom: calc(100% + 10px); transform-origin: bottom center; }
.image-yarn-marker.is-callout-above .image-marker-callout::before { top: auto; bottom: -5px; }
.image-yarn-marker.is-callout-left .image-marker-callout { left: -4px; transform: translate(0, -4px) scale(.84); transform-origin: top left; }
.image-yarn-marker.is-callout-left.is-active .image-marker-callout, .image-yarn-marker.is-callout-left:hover .image-marker-callout, .image-yarn-marker.is-callout-left:focus-visible .image-marker-callout { transform: translate(0, 0) scale(.84); }
.image-yarn-marker.is-callout-left .image-marker-callout::before { left: 12px; }
.image-yarn-marker.is-callout-right .image-marker-callout { right: -4px; left: auto; transform: translate(0, -4px) scale(.84); transform-origin: top right; }
.image-yarn-marker.is-callout-right.is-active .image-marker-callout, .image-yarn-marker.is-callout-right:hover .image-marker-callout, .image-yarn-marker.is-callout-right:focus-visible .image-marker-callout { transform: translate(0, 0) scale(.84); }
.image-yarn-marker.is-callout-right .image-marker-callout::before { right: 12px; left: auto; }
.image-marker-legend { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.image-yarn-legend-item { min-height: 31px; display: inline-flex; align-items: center; gap: 6px; padding: 5px 7px; border: 1px solid #dfe5ed; border-radius: 8px; color: #4d5e76; background: #f7f9fc; cursor: pointer; font-size: 9px; transition: opacity .15s ease, color .15s ease, border-color .15s ease, background .15s ease, box-shadow .15s ease, transform .15s ease; }
.image-yarn-legend-item:hover, .image-yarn-legend-item:focus-visible, .image-yarn-legend-item.is-active { border-color: #2f6fed; color: #245fc7; background: #eef5ff; box-shadow: 0 3px 10px rgba(47,111,237,.14); transform: translateY(-1px); }
.image-yarn-legend-item:focus-visible { outline: 3px solid rgba(47,111,237,.15); outline-offset: 2px; }
.image-marker-legend.has-yarn-selection .image-yarn-legend-item:not(.is-active) { opacity: .58; }
.image-yarn-legend-item em { width: 18px; height: 18px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 6px; color: #738096; background: #e8ecf2; font-size: 8px; font-style: normal; font-weight: 900; }
.image-yarn-legend-item.is-active em { color: white; background: #2f6fed; }
.image-marker-legend i { width: 14px; height: 14px; flex: 0 0 auto; border: 1px solid rgba(25,43,70,.15); border-radius: 50%; background: var(--marker-color, #a0a0a0); }
.image-marker-legend b { font-size: 9px; }
.image-yarn-quantity { padding-left: 4px; color: #8190a4; font-size: 8px; font-weight: 800; white-space: nowrap; }
.image-yarn-requested { min-width: 24px; padding: 3px 5px; border-radius: 6px; color: #168653; background: #dff7eb; font-size: 8px; font-weight: 900; white-space: nowrap; }
.catalog-image-help { margin: 11px 0 0; padding: 9px 11px; border-radius: 9px; color: #718097; background: #f6f8fb; font-size: 9px; line-height: 1.45; }
.catalog-image-modal-actions { display: grid; grid-template-columns: minmax(170px, 1.15fr) minmax(170px, 1fr); gap: 9px; margin-top: 10px; }
.catalog-image-modal-actions.has-mirror { grid-template-columns: minmax(170px, 1.15fr) minmax(130px, .85fr) minmax(170px, 1fr); }
.catalog-image-modal-actions form { margin: 0; }
.catalog-image-modal-actions form, .catalog-image-modal-actions .btn { width: 100%; }
.catalog-image-modal-actions .btn { min-height: 42px; padding-inline: 12px; }
.catalog-image-file-input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.catalog-image-upload-button { position: relative; cursor: pointer; }
.template-dialog.is-action-pending, .catalog-image-dialog.is-action-pending { cursor: progress; }
.template-dialog.is-action-pending .template-canvas, .catalog-image-dialog.is-action-pending .catalog-image-canvas { opacity: .68; transition: opacity .16s ease; }
.template-dialog.is-action-pending .template-actions, .catalog-image-dialog.is-action-pending .catalog-image-modal-actions { pointer-events: none; opacity: .72; }

.yarn-quick-modal { position: fixed; inset: 0; z-index: 140; display: grid; place-items: center; padding: 16px; background: rgba(11,20,35,.7); backdrop-filter: blur(7px); }
.yarn-quick-modal[hidden] { display: none; }
.yarn-quick-dialog { position: relative; width: min(430px, 100%); display: flex; align-items: center; flex-direction: column; padding: 30px 24px 22px; overflow: visible; border-radius: 21px; background: white; box-shadow: 0 28px 80px rgba(0,0,0,.34); text-align: center; }
.yarn-quick-dialog > .icon-btn { position: absolute; top: 14px; right: 14px; }
.yarn-quick-swatch { width: 70px; height: 70px; margin: -3px 0 17px; border: 5px solid white; border-radius: 50%; background: var(--yarn-quick-color, #a0a0a0); box-shadow: 0 5px 18px rgba(20,35,59,.22), 0 0 0 1px rgba(20,35,59,.08); }
.yarn-quick-kind { padding: 6px 9px; border-radius: 8px; color: #567093; background: #eef3fa; font-size: 8px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.yarn-quick-dialog h2 { margin: 12px 0 4px; color: #18243a; font-size: 23px; line-height: 1.2; }
.yarn-quick-line { min-height: 16px; margin: 0; color: #76849a; font-size: 10px; font-weight: 750; }
.yarn-quick-counter { display: grid; grid-template-columns: 66px 112px 66px; align-items: center; justify-content: center; gap: 13px; margin-top: 25px; }
.yarn-quick-counter > button { width: 66px; height: 66px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; color: #758399; background: #f3f5f8; cursor: pointer; font-size: 31px; font-weight: 500; transition: transform .14s ease, color .14s ease, background .14s ease, box-shadow .14s ease; }
.yarn-quick-counter > button:hover, .yarn-quick-counter > button:focus-visible { color: #314c72; background: #e9eef5; transform: scale(1.04); }
.yarn-quick-counter > button.is-plus { color: #1f66df; background: #dfecff; }
.yarn-quick-counter > button.is-plus:hover, .yarn-quick-counter > button.is-plus:focus-visible { background: #cfe2ff; box-shadow: 0 5px 16px rgba(47,111,237,.16); }
.yarn-quick-counter > button:focus-visible { outline: 3px solid rgba(47,111,237,.17); outline-offset: 3px; }
.yarn-quick-counter label { display: grid; justify-items: center; gap: 2px; }
.yarn-quick-counter input { width: 112px; height: 58px; padding: 0; border: 0; color: #101b2e; background: transparent; font-size: 38px; font-weight: 900; text-align: center; -moz-appearance: textfield; }
.yarn-quick-counter input::-webkit-inner-spin-button, .yarn-quick-counter input::-webkit-outer-spin-button { margin: 0; -webkit-appearance: none; }
.yarn-quick-counter input:focus { outline: 0; }
.yarn-quick-counter label span { color: #8895a7; font-size: 9px; font-weight: 800; }
.yarn-quick-help { max-width: 330px; min-height: 29px; margin: 18px 0 0; color: #7f8ba0; font-size: 9px; line-height: 1.45; }
.yarn-quick-actions { width: calc(100% + 48px); display: grid; grid-template-columns: .78fr 1.22fr; gap: 9px; margin: 21px -24px -22px; padding: 14px 24px 18px; border-top: 1px solid #e5e9ef; border-radius: 0 0 21px 21px; background: #f8fafc; }
.yarn-quick-actions .btn { width: 100%; min-height: 48px; }

.purchase-confirm-modal { position: fixed; inset: 0; z-index: 145; display: grid; place-items: center; padding: 16px; background: rgba(11,20,35,.7); backdrop-filter: blur(7px); }
.purchase-confirm-modal[hidden] { display: none; }
.purchase-confirm-dialog { position: relative; width: min(430px, 100%); display: flex; align-items: center; flex-direction: column; padding: 30px 24px 22px; overflow: visible; border-radius: 21px; background: white; box-shadow: 0 28px 80px rgba(0,0,0,.34); text-align: center; }
.purchase-confirm-dialog > .icon-btn { position: absolute; top: 14px; right: 14px; }
.purchase-confirm-swatch { width: 70px; height: 70px; margin: -3px 0 17px; border: 5px solid white; border-radius: 50%; background: var(--purchase-confirm-color, #a0a0a0); box-shadow: 0 5px 18px rgba(20,35,59,.22), 0 0 0 1px rgba(20,35,59,.08); }
.purchase-confirm-kind { padding: 6px 9px; border-radius: 8px; color: #567093; background: #eef3fa; font-size: 8px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.purchase-confirm-dialog h2 { margin: 12px 0 4px; color: #18243a; font-size: 23px; line-height: 1.2; }
.purchase-confirm-line { min-height: 16px; margin: 0; color: #76849a; font-size: 10px; font-weight: 750; }
.purchase-confirm-order { max-width: 350px; margin: 8px 0 0; overflow: hidden; color: #98a2b0; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.purchase-confirm-counter { display: grid; grid-template-columns: 66px 112px 66px; align-items: center; justify-content: center; gap: 13px; margin-top: 23px; }
.purchase-confirm-counter > button { width: 66px; height: 66px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; color: #758399; background: #f3f5f8; cursor: pointer; font-size: 31px; transition: transform .14s ease, color .14s ease, background .14s ease, box-shadow .14s ease; }
.purchase-confirm-counter > button:hover, .purchase-confirm-counter > button:focus-visible { color: #314c72; background: #e9eef5; transform: scale(1.04); }
.purchase-confirm-counter > button.is-plus { color: #1f66df; background: #dfecff; }
.purchase-confirm-counter > button.is-plus:hover, .purchase-confirm-counter > button.is-plus:focus-visible { background: #cfe2ff; box-shadow: 0 5px 16px rgba(47,111,237,.16); }
.purchase-confirm-counter > button:disabled { opacity: .34; cursor: default; transform: none; }
.purchase-confirm-counter > button:focus-visible { outline: 3px solid rgba(47,111,237,.17); outline-offset: 3px; }
.purchase-confirm-counter label { display: grid; justify-items: center; gap: 2px; }
.purchase-confirm-counter input { width: 112px; height: 58px; padding: 0; border: 0; color: #101b2e; background: transparent; font-size: 38px; font-weight: 900; text-align: center; -moz-appearance: textfield; }
.purchase-confirm-counter input::-webkit-inner-spin-button, .purchase-confirm-counter input::-webkit-outer-spin-button { margin: 0; -webkit-appearance: none; }
.purchase-confirm-counter input:focus { outline: 0; }
.purchase-confirm-counter label span { color: #8895a7; font-size: 9px; font-weight: 800; }
.purchase-confirm-help { max-width: 330px; min-height: 29px; margin: 18px 0 0; color: #7f8ba0; font-size: 9px; line-height: 1.45; }
.purchase-request-cancel-trigger { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; margin: 3px 0 -8px; padding: 0 12px; border: 0; color: #c44355; background: transparent; cursor: pointer; font: inherit; font-size: 10px; font-weight: 850; }
.purchase-request-cancel-trigger:hover, .purchase-request-cancel-trigger:focus-visible { color: #a92f42; }
.purchase-request-cancel-trigger .material-symbols-rounded { font-size: 18px; }
.purchase-request-cancel-confirm { width: 100%; display: grid; justify-items: center; gap: 7px; margin: 22px 0 3px; padding: 17px; border: 1px solid #ffd7dc; border-radius: 16px; color: #812f3c; background: #fff6f7; }
.purchase-request-cancel-confirm[hidden] { display: none; }
.purchase-request-cancel-confirm > .material-symbols-rounded { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 50%; color: #c33d50; background: #ffe1e5; font-size: 23px; }
.purchase-request-cancel-confirm > strong { font-size: 15px; }
.purchase-request-cancel-confirm > p { max-width: 300px; margin: 0; color: #8d5d65; font-size: 9px; line-height: 1.45; }
.purchase-request-cancel-confirm > div { width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 5px; }
.purchase-request-cancel-confirm .btn { min-height: 46px; }
.purchase-request-cancel-confirm .btn-danger { border-color: #d8485b; color: white; background: #d8485b; }
.purchase-request-cancel-confirm .btn-danger:hover, .purchase-request-cancel-confirm .btn-danger:focus-visible { background: #bd3548; }
.purchase-confirm-dialog.is-cancel-pending .purchase-confirm-counter,
.purchase-confirm-dialog.is-cancel-pending .purchase-confirm-help,
.purchase-confirm-dialog.is-cancel-pending .purchase-request-cancel-trigger,
.purchase-confirm-dialog.is-cancel-pending .purchase-confirm-actions { display: none; }
.purchase-confirm-actions { width: calc(100% + 48px); display: grid; grid-template-columns: .78fr 1.22fr; gap: 9px; margin: 21px -24px -22px; padding: 14px 24px 18px; border-top: 1px solid #e5e9ef; border-radius: 0 0 21px 21px; background: #f8fafc; }
.purchase-confirm-actions .btn { width: 100%; min-height: 48px; }

.recipe-editor-modal { position: fixed; inset: 0; z-index: 120; display: grid; place-items: center; padding: 16px; background: rgba(8,16,29,.82); backdrop-filter: blur(8px); }
.recipe-editor-modal[hidden] { display: none; }
.recipe-editor-dialog { width: min(1180px, 100%); height: min(860px, calc(100vh - 32px)); display: grid; grid-template-rows: auto minmax(0, 1fr) auto; overflow: hidden; border-radius: 21px; background: #f5f7fa; box-shadow: 0 30px 90px rgba(0,0,0,.38); }
.recipe-editor-head { display: grid; grid-template-columns: 62px minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 15px 18px; border-bottom: 1px solid #dfe5ed; background: white; }
.recipe-product-preview { width: 62px; height: 62px; display: grid; place-items: center; overflow: hidden; border: 1px solid #dfe5ed; border-radius: 13px; color: #567093; background: #eef2f7; font-size: 17px; font-weight: 900; }
.recipe-product-preview > * { grid-area: 1 / 1; }
.recipe-product-preview img { width: 100%; height: 100%; object-fit: cover; }
.recipe-product-preview img[hidden], .recipe-product-placeholder[hidden] { display: none; }
.recipe-editor-head h2 { margin: 4px 0 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 21px; }
.recipe-product-subtitle { margin: 0; color: var(--muted); font-size: 10px; font-weight: 650; }
.recipe-editor-content { min-height: 0; display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(370px, .88fr); gap: 13px; overflow: auto; padding: 13px; }
.recipe-editor-section { min-width: 0; padding: 15px; border: 1px solid #dfe5ed; border-radius: 16px; background: white; box-shadow: 0 4px 16px rgba(20,35,59,.04); }
.recipe-section-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin-bottom: 13px; }
.recipe-section-head > div { display: flex; align-items: flex-start; gap: 10px; }
.recipe-section-head h3 { margin: 1px 0 3px; font-size: 16px; }
.recipe-section-head p { margin: 0; color: var(--muted); font-size: 9px; line-height: 1.4; }
.recipe-step { width: 28px; height: 28px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 9px; color: white; background: var(--blue); font-size: 11px; font-weight: 900; }
.recipe-section-count { flex: 0 0 auto; padding: 6px 8px; border-radius: 8px; color: #52709d; background: #edf3fc; font-size: 9px; font-weight: 800; }
.recipe-map-editor { grid-column: 1 / -1; }
.recipe-map-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.recipe-active-yarn { min-width: 0; display: flex; align-items: center; gap: 9px; padding: 8px 10px; border: 1px solid #dde4ee; border-radius: 10px; color: #69778b; background: #f7f9fc; }
.recipe-active-yarn > i { width: 25px; height: 25px; flex: 0 0 auto; border: 1px solid rgba(25,43,70,.15); border-radius: 50%; background: var(--recipe-yarn-color, #a0a0a0); box-shadow: inset 0 0 0 2px rgba(255,255,255,.45); }
.recipe-active-yarn > span { min-width: 0; display: grid; gap: 2px; }
.recipe-active-yarn small { font-size: 8px; font-weight: 750; }
.recipe-active-yarn b { overflow: hidden; color: #43536a; text-overflow: ellipsis; white-space: nowrap; font-size: 10px; }
.recipe-active-yarn.has-yarn { border-color: #9dbbea; color: #426596; background: #f0f6ff; box-shadow: 0 0 0 3px rgba(47,111,237,.07); }
.recipe-zoom-controls { display: flex; align-items: center; gap: 6px; }
.recipe-zoom-controls .icon-btn { min-width: 34px; width: 34px; height: 34px; }
.recipe-zoom-value { min-width: 58px; height: 34px; padding: 0 8px; border: 1px solid #d9e1ec; border-radius: 9px; color: #4a5e7a; background: white; cursor: pointer; font-size: 10px; font-weight: 850; }
.recipe-zoom-fit { min-height: 34px; }
.recipe-map-viewport { position: relative; height: 330px; overflow: hidden; border: 1px solid #d6deea; border-radius: 13px; background-color: #e8edf4; background-image: linear-gradient(45deg, rgba(255,255,255,.45) 25%, transparent 25%), linear-gradient(-45deg, rgba(255,255,255,.45) 25%, transparent 25%), linear-gradient(45deg, transparent 75%, rgba(255,255,255,.45) 75%), linear-gradient(-45deg, transparent 75%, rgba(255,255,255,.45) 75%); background-position: 0 0, 0 9px, 9px -9px, -9px 0; background-size: 18px 18px; cursor: crosshair; touch-action: none; }
.recipe-map-viewport:focus-visible { outline: 3px solid rgba(47,111,237,.22); outline-offset: 2px; }
.recipe-map-viewport.is-zoomed { cursor: grab; }
.recipe-map-viewport.is-zoomed.is-marking { cursor: crosshair; }
.recipe-map-viewport.is-panning { cursor: grabbing; }
.recipe-map-stage { position: absolute; left: 50%; top: 50%; overflow: visible; transform: translate(-50%, -50%); transform-origin: center center; will-change: transform; }
.recipe-map-stage[hidden] { display: none; }
.recipe-map-stage > img { width: 100%; height: 100%; display: block; object-fit: fill; border-radius: 4px; box-shadow: 0 8px 30px rgba(20,35,59,.17); user-select: none; -webkit-user-drag: none; pointer-events: none; }
.recipe-map-stage > img[hidden], .recipe-map-empty[hidden] { display: none; }
.recipe-map-markers { position: absolute; inset: 0; pointer-events: none; }
.recipe-yarn-marker { position: absolute; z-index: 2; display: flex; align-items: flex-start; transform: translate(-50%, -50%) scale(var(--marker-inverse-scale, 1)); transform-origin: center; pointer-events: auto; filter: drop-shadow(0 3px 6px rgba(20,35,59,.3)); }
.recipe-marker-pin { width: 31px; height: 31px; display: grid; place-items: center; padding: 0; border: 3px solid white; border-radius: 50%; color: white; background: var(--recipe-yarn-color, #a0a0a0); cursor: pointer; font-size: 9px; font-weight: 900; text-shadow: 0 1px 2px rgba(0,0,0,.55); }
.recipe-marker-pin { line-height: 1; }
.recipe-marker-remove { width: 18px; height: 18px; display: grid; place-items: center; margin: -7px 0 0 -5px; padding: 0; border: 2px solid white; border-radius: 50%; color: white; background: #bd4655; cursor: pointer; font-size: 11px; font-weight: 900; line-height: 1; }
.recipe-pending-marker { position: absolute; z-index: 3; width: 35px; height: 35px; display: grid; place-items: center; border: 3px solid white; border-radius: 50%; color: white; background: #2f6fed; box-shadow: 0 0 0 6px rgba(47,111,237,.2), 0 5px 15px rgba(20,35,59,.28); transform: translate(-50%, -50%) scale(var(--marker-inverse-scale, 1)); transform-origin: center; animation: recipe-pending-pulse 1.15s ease-in-out infinite; }
.recipe-pending-marker .material-symbols-rounded { font-size: 17px; }
@keyframes recipe-pending-pulse { 50% { box-shadow: 0 0 0 10px rgba(47,111,237,.08), 0 5px 15px rgba(20,35,59,.28); } }
.recipe-map-empty { position: absolute; inset: 0; display: grid; place-items: center; padding: 30px; color: #77869a; font-size: 11px; font-weight: 800; text-align: center; pointer-events: none; }
.recipe-map-help { display: flex; flex-wrap: wrap; gap: 7px 15px; margin-top: 9px; color: #7c899b; font-size: 8px; font-weight: 700; }
.recipe-yarn-picker { position: relative; margin-bottom: 11px; }
.recipe-yarn-picker input { min-height: 42px; }
.recipe-yarn-search-wrap { position: relative; min-width: 0; }
.recipe-yarn-search-icon { position: absolute; z-index: 1; left: 12px; top: 50%; color: #8190a5; font-size: 20px; pointer-events: none; transform: translateY(-50%); }
.recipe-yarn-search { width: 100%; padding-left: 39px; }
.recipe-yarn-suggestions { position: absolute; left: 0; right: 0; top: calc(100% + 5px); z-index: 8; max-height: 330px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-content: start; gap: 6px; overflow-y: auto; padding: 7px; border: 1px solid #cbd6e5; border-radius: 13px; background: white; box-shadow: 0 18px 45px rgba(20,35,59,.2); }
.recipe-yarn-suggestions[hidden] { display: none; }
.recipe-yarn-suggestion { width: 100%; min-width: 0; display: grid; grid-template-columns: 30px minmax(0, 1fr); align-items: center; gap: 9px; padding: 9px; border: 1px solid #e2e8f0; border-radius: 10px; color: #33455f; background: #fbfcfe; cursor: pointer; text-align: left; }
.recipe-yarn-suggestion:hover, .recipe-yarn-suggestion:focus-visible { border-color: #91b0e4; background: #eef4ff; box-shadow: 0 4px 12px rgba(47,111,237,.09); outline: none; }
.recipe-yarn-suggestion.is-added { border-color: #b9cdef; background: #f4f8ff; }
.recipe-yarn-suggestion i, .recipe-yarn-swatch { width: 27px; height: 27px; display: block; border: 1px solid rgba(25,43,70,.16); border-radius: 50%; background: var(--recipe-yarn-color, #a0a0a0); box-shadow: inset 0 0 0 2px rgba(255,255,255,.42); }
.recipe-yarn-suggestion span { min-width: 0; display: grid; gap: 2px; }
.recipe-yarn-suggestion b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 10px; }
.recipe-yarn-suggestion small { overflow: hidden; color: var(--muted); text-overflow: ellipsis; white-space: nowrap; font-size: 8px; }
.recipe-yarn-suggestion em { grid-column: 2; width: fit-content; margin-top: 2px; padding: 3px 6px; border-radius: 6px; color: #43658f; background: #edf3fb; font-size: 8px; font-style: normal; font-weight: 850; }
.recipe-yarn-suggestion.is-added em { color: #2463c4; background: #e4efff; }
.recipe-yarn-no-results { grid-column: 1 / -1; padding: 18px; color: var(--muted); font-size: 10px; text-align: center; }
.recipe-yarn-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.recipe-yarn-row { min-width: 0; }
.recipe-yarn-tile { width: 100%; min-height: 88px; display: grid; grid-template-columns: 34px minmax(0, 1fr) auto 18px; align-items: center; gap: 9px; padding: 11px; border: 1px solid #dfe6ef; border-radius: 13px; color: #33455f; background: #fbfcfe; cursor: pointer; text-align: left; transition: border-color .14s ease, background .14s ease, box-shadow .14s ease, transform .14s ease; }
.recipe-yarn-tile:hover, .recipe-yarn-tile:focus-visible { border-color: #92afe0; background: #f4f8ff; box-shadow: 0 5px 15px rgba(47,111,237,.09); outline: none; transform: translateY(-1px); }
.recipe-yarn-row.is-marker-active .recipe-yarn-tile { border-color: #75a2ea; background: #edf4ff; box-shadow: inset 3px 0 #2f6fed, 0 4px 14px rgba(47,111,237,.09); }
.recipe-yarn-tile .recipe-yarn-swatch { width: 33px; height: 33px; }
.recipe-yarn-info { min-width: 0; display: grid; gap: 2px; }
.recipe-yarn-info b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #32455e; font-size: 10px; }
.recipe-yarn-info > span { overflow: hidden; color: #5f6e82; text-overflow: ellipsis; white-space: nowrap; font-size: 9px; }
.recipe-yarn-info small { overflow: hidden; color: #8a95a5; text-overflow: ellipsis; white-space: nowrap; font-size: 8px; }
.recipe-yarn-tile-values { min-width: 73px; display: grid; justify-items: end; gap: 5px; }
.recipe-yarn-amount { display: flex; align-items: baseline; gap: 3px; color: #2c5ea8; }
.recipe-yarn-amount b { font-size: 14px; }
.recipe-yarn-amount small { font-size: 8px; font-weight: 800; }
.recipe-yarn-cost { display: grid; justify-items: end; gap: 2px; color: #7e8999; font-size: 7px; }
.recipe-yarn-cost b { color: #52667f; font-size: 9px; }
.recipe-yarn-chevron { color: #8391a4; font-size: 18px; }
.recipe-yarn-empty { padding: 24px 15px; border: 1px dashed #ccd6e4; border-radius: 11px; color: #7f8a9b; background: #f8fafc; font-size: 10px; text-align: center; }
.recipe-yarn-empty[hidden] { display: none; }
.recipe-point-picker { position: fixed; inset: 0; z-index: 6; display: grid; place-items: center; padding: 20px; }
.recipe-point-picker[hidden] { display: none; }
.recipe-point-picker-backdrop { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; background: rgba(12,22,38,.3); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); cursor: default; }
.recipe-point-picker-dialog { position: relative; width: min(540px, 100%); max-height: min(650px, calc(100vh - 40px)); display: grid; grid-template-rows: auto auto auto auto minmax(0, 1fr); overflow: hidden; padding: 17px; border: 1px solid rgba(255,255,255,.82); border-radius: 19px; background: rgba(255,255,255,.97); box-shadow: 0 28px 80px rgba(8,16,29,.34), inset 0 1px 0 white; animation: recipe-point-picker-in .17s ease-out; }
@keyframes recipe-point-picker-in { from { opacity: 0; transform: translateY(8px) scale(.975); } }
.recipe-point-picker-dialog > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 13px; }
.recipe-point-picker-dialog h3 { margin: 4px 0 3px; font-size: 20px; letter-spacing: -.02em; }
.recipe-point-picker-dialog header p { margin: 0; color: #75849a; font-size: 10px; }
.recipe-point-picker-search { min-height: 46px; display: flex; align-items: center; gap: 9px; padding: 0 12px; border: 1px solid #cbd7e8; border-radius: 12px; color: #6d7e95; background: white; box-shadow: 0 3px 12px rgba(20,35,59,.05); }
.recipe-point-picker-search:focus-within { border-color: #75a0e8; box-shadow: 0 0 0 3px rgba(47,111,237,.12); }
.recipe-point-picker-search > .material-symbols-rounded { flex: 0 0 auto; font-size: 21px; }
.recipe-point-picker-search input { min-width: 0; width: 100%; height: 44px; padding: 0; border: 0; outline: 0; color: #263a56; background: transparent; font-size: 13px; }
.recipe-point-color-context { min-width: 0; display: grid; grid-template-columns: 34px minmax(0, 1fr); align-items: center; gap: 9px; margin-top: 9px; padding: 8px 9px; border: 1px solid #dce5f0; border-radius: 11px; background: #f6f9fd; }
.recipe-point-color-context[hidden] { display: none; }
.recipe-point-color-context > i { width: 32px; height: 32px; border: 2px solid white; border-radius: 50%; background: var(--recipe-point-color, #a0a0a0); box-shadow: 0 0 0 1px rgba(25,43,70,.17), 0 3px 9px rgba(20,35,59,.12); }
.recipe-point-color-context > span { min-width: 0; display: grid; gap: 2px; }
.recipe-point-color-context small { color: #7c899b; font-size: 8px; font-weight: 750; }
.recipe-point-color-context b { overflow: hidden; color: #314963; text-overflow: ellipsis; white-space: nowrap; font-size: 10px; }
.recipe-point-picker-summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 2px 7px; color: #77869a; font-size: 9px; font-weight: 800; }
.recipe-point-picker-summary b { min-width: 23px; height: 21px; display: grid; place-items: center; padding: 0 6px; border-radius: 7px; color: #315f9e; background: #eaf2ff; }
.recipe-point-picker-results { min-height: 120px; max-height: min(430px, 52vh); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-content: start; gap: 6px; overflow-y: auto; padding: 2px; overscroll-behavior: contain; }
.recipe-point-yarn-option { min-width: 0; display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center; gap: 9px; padding: 9px; border: 1px solid #e0e6ef; border-radius: 11px; color: #334760; background: #fbfcfe; cursor: pointer; text-align: left; transition: border-color .14s ease, background .14s ease, box-shadow .14s ease, transform .14s ease; }
.recipe-point-yarn-option:hover, .recipe-point-yarn-option:focus-visible { border-color: #8eb0e8; background: #f0f6ff; box-shadow: 0 4px 13px rgba(47,111,237,.1); outline: none; transform: translateY(-1px); }
.recipe-point-yarn-option > i { width: 32px; height: 32px; border: 1px solid rgba(25,43,70,.15); border-radius: 50%; background: var(--recipe-yarn-color, #a0a0a0); box-shadow: inset 0 0 0 2px rgba(255,255,255,.43); }
.recipe-point-yarn-option > span { min-width: 0; display: grid; gap: 3px; }
.recipe-point-yarn-option b, .recipe-point-yarn-option small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.recipe-point-yarn-option b { font-size: 10px; }
.recipe-point-yarn-option small { color: #7b899d; font-size: 8px; }
.recipe-point-yarn-option em { padding: 4px 6px; border-radius: 7px; color: #2463c4; background: #e8f1ff; font-size: 8px; font-style: normal; font-weight: 850; }
.recipe-point-yarn-option.is-in-palette { border-color: #bfd2ef; background: #f6f9ff; }
.recipe-point-picker-empty { grid-column: 1 / -1; display: grid; place-items: center; min-height: 130px; padding: 24px; border: 1px dashed #ccd7e6; border-radius: 12px; color: #77869a; background: #f8fafc; font-size: 11px; text-align: center; }
.recipe-quantity-modal { position: fixed; inset: 0; z-index: 7; display: grid; place-items: center; padding: 20px; }
.recipe-quantity-modal[hidden] { display: none; }
.recipe-quantity-backdrop { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; background: rgba(12,22,38,.32); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.recipe-quantity-dialog { position: relative; width: min(410px, 100%); overflow: hidden; padding: 18px; border: 1px solid rgba(255,255,255,.82); border-radius: 20px; background: rgba(255,255,255,.98); box-shadow: 0 28px 80px rgba(8,16,29,.36), inset 0 1px 0 white; animation: recipe-point-picker-in .17s ease-out; }
.recipe-quantity-dialog > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.recipe-quantity-identity { min-width: 0; display: flex; align-items: center; gap: 11px; }
.recipe-quantity-identity > i { width: 47px; height: 47px; flex: 0 0 auto; border: 3px solid white; border-radius: 50%; background: var(--recipe-yarn-color, #a0a0a0); box-shadow: 0 0 0 1px rgba(25,43,70,.15), 0 5px 14px rgba(20,35,59,.13); }
.recipe-quantity-identity > span { min-width: 0; }
.recipe-quantity-identity small { color: #2f6fed; font-size: 9px; font-weight: 850; letter-spacing: .09em; text-transform: uppercase; }
.recipe-quantity-identity h3 { margin: 3px 0 2px; overflow: hidden; color: #223550; text-overflow: ellipsis; white-space: nowrap; font-size: 18px; }
.recipe-quantity-identity p { margin: 0; overflow: hidden; color: #7b899c; text-overflow: ellipsis; white-space: nowrap; font-size: 9px; font-weight: 700; }
.recipe-quantity-counter { display: grid; grid-template-columns: 62px minmax(90px, 1fr) 62px; align-items: center; justify-content: center; gap: 13px; margin: 27px auto 8px; }
.recipe-quantity-counter > button { width: 62px; height: 62px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; color: #2b65bc; background: #e7f0ff; cursor: pointer; font-size: 27px; }
.recipe-quantity-counter > button:first-child { color: #66758a; background: #f0f3f7; }
.recipe-quantity-counter > button:hover, .recipe-quantity-counter > button:focus-visible { box-shadow: 0 0 0 4px rgba(47,111,237,.12); outline: none; }
.recipe-quantity-counter > button:disabled { opacity: .38; cursor: default; box-shadow: none; }
.recipe-quantity-counter output { min-width: 0; display: grid; justify-items: center; gap: 2px; }
.recipe-quantity-counter output b { color: #172b48; font-size: 35px; line-height: 1; letter-spacing: -.04em; }
.recipe-quantity-counter output small { color: #7e8999; font-size: 8px; font-weight: 850; text-transform: uppercase; }
.recipe-quantity-hint { margin: 0 0 18px; color: #8794a5; font-size: 9px; font-weight: 650; text-align: center; }
.recipe-quantity-cost { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; padding: 11px 12px; border-radius: 11px; color: #6f7d91; background: #f3f6fa; font-size: 9px; font-weight: 750; }
.recipe-quantity-cost b { color: #2f4a6c; font-size: 13px; }
.recipe-quantity-dialog > footer { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.recipe-quantity-dialog > footer .btn { min-height: 43px; }
.recipe-quantity-remove { color: #a13f4e; }
.recipe-quantity-remove .material-symbols-rounded { font-size: 17px; }
.recipe-material-list { display: grid; gap: 7px; }
.recipe-material-row { display: grid; grid-template-columns: 31px minmax(0, 1fr) 116px 62px; align-items: center; gap: 9px; padding: 9px; border: 1px solid #e0e6ee; border-radius: 11px; background: #fbfcfe; cursor: text; }
.recipe-material-row.is-used { border-color: #b9cfef; background: #f5f9ff; box-shadow: inset 3px 0 #4d7fd4; }
.recipe-material-icon { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 9px; color: #47658d; background: #e8eff9; font-size: 11px; font-weight: 900; }
.recipe-material-name { min-width: 0; display: grid; gap: 3px; }
.recipe-material-name b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #344760; font-size: 9px; }
.recipe-material-name small { color: #8994a4; font-size: 8px; }
.recipe-material-quantity { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 5px; }
.recipe-material-quantity input { width: 100%; min-height: 35px; padding: 7px 8px; }
.recipe-material-quantity em { color: #718096; font-size: 8px; font-style: normal; font-weight: 750; }
.recipe-material-cost { color: #4b617e; font-size: 9px; font-weight: 850; text-align: right; }
.recipe-editor-footer { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 13px 17px; border-top: 1px solid #dfe5ed; background: white; box-shadow: 0 -6px 20px rgba(20,35,59,.04); }
.recipe-card-footer-summary { display: none; }
.recipe-totals { display: flex; align-items: stretch; gap: 7px; }
.recipe-totals > span { min-width: 125px; display: grid; gap: 3px; padding: 8px 10px; border-radius: 10px; color: #62728a; background: #f1f4f8; }
.recipe-totals small { font-size: 8px; font-weight: 750; }
.recipe-totals b { color: #30455f; font-size: 10px; }
.recipe-totals em { font-style: normal; }
.recipe-totals .recipe-total-main { color: white; background: #244f91; }
.recipe-totals .recipe-total-main small, .recipe-totals .recipe-total-main b { color: white; }
.recipe-footer-actions { display: flex; gap: 8px; }
.recipe-footer-actions .btn { min-height: 43px; }

.employee-toolbar { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; margin-bottom: 20px; }
.employee-toolbar h2 { margin: 4px 0 5px; font-size: 24px; }
.employee-toolbar p { margin: 0; color: var(--muted); font-size: 12px; }
.employee-create { position: relative; z-index: 5; }
.employee-create > summary { list-style: none; min-height: 43px; }
.employee-create > summary::-webkit-details-marker { display: none; }
.employee-create[open] > summary { color: #294360; background: #e8edf4; }
.employee-create-form { position: absolute; top: 51px; right: 0; width: min(570px, calc(100vw - 330px)); max-height: calc(100vh - 140px); overflow-y: auto; padding: 20px; border: 1px solid var(--line); border-radius: 16px; background: white; box-shadow: 0 24px 70px rgba(20,35,59,.22); }
.employee-create-form h3 { margin: 0 0 14px; }
.employee-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; }
.employee-card { display: block; padding: 18px; border: 1px solid var(--line); border-radius: 17px; background: white; box-shadow: 0 5px 18px rgba(20,35,59,.05); transition: transform .18s ease, box-shadow .18s ease; }
.employee-card:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(20,35,59,.1); }
.employee-card.is-inactive { opacity: .62; }
.employee-card-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; }
.employee-avatar { width: 56px; height: 56px; font-size: 20px; }
.employee-card-head h2 { margin: 0 0 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 17px; }
.employee-card-head p { margin: 0; overflow: hidden; color: var(--muted); text-overflow: ellipsis; white-space: nowrap; font-size: 11px; }
.employee-oauth-badges { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 11px; }
.employee-oauth-badge { display: inline-flex; align-items: center; min-height: 24px; padding: 0 8px; border: 1px solid #dde3eb; border-radius: 999px; color: #8792a3; background: #f7f9fc; font-size: 8px; font-weight: 800; white-space: nowrap; }
.employee-oauth-badge.is-connected { border-color: #b9dfce; color: #137551; background: #e8f7f0; }
.employee-status { display: inline-flex; align-items: center; min-height: 25px; padding: 0 8px; border-radius: 999px; color: #8b4350; background: #fbe9ec; font-size: 9px; font-weight: 850; white-space: nowrap; }
.employee-status.active { color: #137551; background: #e1f6ed; }
.employee-card-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 17px; }
.employee-card-meta span, .employee-card-stats span { min-width: 0; }
.employee-card-meta small, .employee-card-meta b, .employee-card-stats small, .employee-card-stats strong { display: block; }
.employee-card-meta small, .employee-card-stats small { color: var(--muted); font-size: 9px; }
.employee-card-meta b { margin-top: 3px; font-size: 11px; }
.employee-card-stats { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 8px; margin-top: 13px; padding: 13px; border-radius: 11px; background: #f3f6fa; }
.employee-card-stats strong { margin-top: 4px; font-size: 16px; }
.employee-open { display: block; margin-top: 13px; color: var(--blue); font-size: 10px; font-weight: 800; text-align: right; }
.employee-detail-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 12px; }
.back-link { color: #4e6380; font-size: 12px; font-weight: 800; }
.employee-profile-hero { display: grid; grid-template-columns: auto minmax(220px, 1fr) auto; align-items: center; gap: 18px; padding: 21px; margin-bottom: 18px; border: 1px solid var(--line); border-radius: 18px; background: linear-gradient(120deg, white, #f6f9ff); box-shadow: 0 5px 18px rgba(20,35,59,.05); }
.employee-avatar-hero { width: 82px; height: 82px; font-size: 30px; }
.employee-profile-hero h2 { margin: 4px 0 3px; font-size: 26px; }
.employee-profile-hero p { margin: 0 0 7px; color: #506078; font-weight: 700; }
.employee-profile-hero small { color: var(--muted); font-size: 10px; }
.employee-profile-auth { display: grid; gap: 2px; margin-top: 11px; }
.employee-profile-auth > span { display: inline-flex; align-items: center; gap: 5px; color: #52647d; font-size: 10px; font-weight: 750; }
.employee-profile-auth > span .material-symbols-rounded { font-size: 15px; }
.employee-profile-auth .employee-oauth-badges { margin-top: 5px; }
.oauth-connect-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 7px; }
.oauth-connect-actions a, .oauth-connect-actions > span { min-height: 30px; display: inline-flex; align-items: center; justify-content: center; padding: 0 10px; border: 1px solid #cbd9eb; border-radius: 9px; color: #315d99; background: #f2f7ff; font-size: 9px; font-weight: 850; }
.oauth-connect-actions a:hover, .oauth-connect-actions a:focus-visible { border-color: #8fb4e7; background: #e8f1ff; outline: none; }
.oauth-connect-actions > span { opacity: .52; cursor: not-allowed; }
.employee-hero-stats { display: grid; grid-template-columns: repeat(3, minmax(110px, 1fr)); gap: 9px; }
.employee-hero-stats span { padding: 12px; border: 1px solid #e1e7ef; border-radius: 11px; background: white; }
.employee-hero-stats small, .employee-hero-stats strong { display: block; }
.employee-hero-stats small { color: var(--muted); font-size: 9px; }
.employee-hero-stats strong { margin-top: 4px; font-size: 19px; }
.employee-detail-layout { display: grid; grid-template-columns: minmax(260px, 330px) minmax(0, 1fr); gap: 18px; align-items: start; }
.employee-editor, .employee-section { border: 1px solid var(--line); border-radius: 16px; background: white; box-shadow: 0 4px 16px rgba(20,35,59,.04); }
.employee-editor { position: sticky; top: 16px; padding: 18px; }
.employee-editor h2 { margin: 0 0 15px; font-size: 17px; }
.employee-form { display: grid; gap: 12px; }
.employee-form label { display: grid; gap: 6px; color: #5f6d80; font-size: 10px; font-weight: 800; }
.employee-form label small { color: #8b96a7; font-size: 8px; font-weight: 600; line-height: 1.4; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.employee-records { display: grid; gap: 16px; }
.employee-section { overflow: hidden; padding: 18px; }
.section-heading { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin-bottom: 13px; }
.section-heading h2 { margin: 3px 0 0; font-size: 18px; }
.section-heading > strong { font-size: 20px; }
.section-count { color: var(--muted); font-size: 10px; font-weight: 750; }
.monthly-earnings { display: grid; gap: 7px; }
.monthly-earnings article { display: grid; grid-template-columns: 90px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 11px 12px; border-radius: 10px; background: #f3f6fa; }
.monthly-earnings b, .monthly-earnings small { display: block; }
.monthly-earnings small, .monthly-earnings span { color: var(--muted); font-size: 9px; }
.monthly-earnings strong { font-size: 15px; }
.subsection-title { margin: 2px 0 9px; color: #596a80; font-size: 11px; }
.employee-details-block { margin-top: 10px; border-top: 1px solid #e7ebf0; }
.employee-details-block > summary { padding: 13px 0 4px; cursor: pointer; color: #435a76; font-size: 11px; font-weight: 850; }
.employee-work-list, .employee-request-list, .employee-log-list { display: grid; gap: 7px; margin-top: 9px; }
.employee-work-list article { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; align-items: center; gap: 11px; overflow: hidden; border: 1px solid #e4e9f0; border-radius: 10px; }
.employee-work-thumb { width: 64px; height: 58px; object-fit: cover; border-radius: 0; }
.employee-work-list b, .employee-work-list small { display: block; }
.employee-work-list b { font-size: 10px; }
.employee-work-list small { margin-top: 4px; color: var(--muted); font-size: 8px; }
.employee-work-list > article > strong { padding-right: 12px; font-size: 12px; }
.employee-request-list article { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto auto; align-items: center; gap: 10px; padding: 10px 11px; border: 1px solid #e4e9f0; border-radius: 10px; }
.employee-request-list .yarn-swatch { width: 27px; height: 27px; }
.employee-request-list b, .employee-request-list small { display: block; }
.employee-request-list b { font-size: 10px; }
.employee-request-list small { margin-top: 3px; color: var(--muted); font-size: 8px; }
.employee-request-list > article > strong { font-size: 11px; white-space: nowrap; }
.employee-request-status { padding: 5px 7px; border-radius: 999px; color: #a45e00; background: #fff0cf; font-size: 8px; font-weight: 850; }
.employee-request-status.purchased { color: #137551; background: #e1f6ed; }
.employee-request-status.cancelled { color: #a43f50; background: #fbecef; }
.employee-log-list article { position: relative; display: grid; grid-template-columns: 12px 1fr; gap: 9px; padding: 5px 0 9px; }
.employee-log-list .timeline-dot { width: 8px; height: 8px; margin-top: 4px; border-radius: 50%; background: var(--blue); }
.employee-log-list b, .employee-log-list small, .employee-log-list time { display: block; }
.employee-log-list b { font-size: 10px; }
.employee-log-list small, .employee-log-list time { margin-top: 3px; color: var(--muted); font-size: 8px; }
.empty-inline { padding: 14px; border: 1px dashed #d4dae3; border-radius: 10px; color: #8b96a7; font-size: 10px; text-align: center; }

.sr-only { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0,0,0,0) !important; white-space: nowrap !important; border: 0 !important; }
.login-body { min-height: 100vh; display: grid; place-items: center; padding: 28px; color: #0c1018; background: #fff; }
.login-shell { width: calc(100vw - 56px); max-width: 440px; }
.login-card { padding: 37px 36px 32px; border: 1px solid #cfe3fb; border-radius: 30px; background: linear-gradient(180deg, rgba(239,248,255,.82) 0%, rgba(255,255,255,.98) 66%); box-shadow: 0 25px 50px -12px rgba(15,23,42,.22), 0 7px 18px rgba(54,102,163,.08); }
.login-mark { width: 60px; height: 60px; display: grid; place-items: center; margin: 0 auto 25px; border: 1px solid #f5f7fa; border-radius: 18px; color: #05070a; background: #fff; box-shadow: 0 10px 22px rgba(15,23,42,.13); }
.login-mark svg { width: 29px; height: 29px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.login-heading { text-align: center; }
.login-heading h1 { margin: 0; font-size: 28px; line-height: 1.15; letter-spacing: -.035em; }
.login-heading p { max-width: 320px; margin: 10px auto 0; color: #737d8d; font-size: 14px; line-height: 1.55; }
.login-card .flash { margin: 20px 0 0; }
.login-form { display: grid; gap: 12px; margin-top: 27px; }
.login-field { display: block; }
.login-input { min-height: 49px; display: grid; grid-template-columns: 22px minmax(0,1fr); align-items: center; gap: 8px; padding: 0 14px; border: 1px solid #dce2e9; border-radius: 13px; color: #a1abb9; background: #f8fafc; transition: border-color .15s ease, box-shadow .15s ease, background .15s ease; }
.login-input:focus-within { border-color: #9ec8fb; background: #fff; box-shadow: 0 0 0 3px rgba(96,165,250,.18); }
.login-input > svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.login-input input { min-width: 0; width: 100%; height: 47px; padding: 0; border: 0; outline: 0; color: #111827; background: transparent; font-size: 14px; }
.login-input input::placeholder { color: #a4adba; }
.login-remember { position: relative; min-height: 43px; display: grid; grid-template-columns: 20px minmax(0,1fr); align-items: center; gap: 9px; padding: 2px 1px; color: #39475b; cursor: pointer; }
.login-remember > input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.login-remember-box { width: 19px; height: 19px; display: grid; place-items: center; border: 1px solid #cfd7e2; border-radius: 6px; color: transparent; background: #fff; font-size: 14px; transition: border-color .15s ease, background .15s ease, color .15s ease; }
.login-remember > input:checked + .login-remember-box { color: #fff; border-color: #1f2937; background: #1f2937; }
.login-remember > input:focus-visible + .login-remember-box { outline: 3px solid rgba(96,165,250,.3); outline-offset: 2px; }
.login-remember b, .login-remember small { display: block; }
.login-remember b { font-size: 11px; }
.login-remember small { margin-top: 2px; color: #8994a4; font-size: 9px; font-weight: 600; }
.login-submit { width: 100%; min-height: 50px; margin-top: 2px; padding: 0 18px; border: 0; border-radius: 13px; color: #fff; background: linear-gradient(180deg,#374151,#111827); box-shadow: 0 7px 15px rgba(15,23,42,.2); cursor: pointer; font: inherit; font-size: 14px; font-weight: 700; transition: filter .15s ease, transform .15s ease, box-shadow .15s ease; }
.login-submit:hover { filter: brightness(1.08); box-shadow: 0 10px 20px rgba(15,23,42,.24); }
.login-submit:active { transform: translateY(1px); }
.login-submit:focus-visible, .login-social:focus-visible { outline: 3px solid rgba(59,130,246,.32); outline-offset: 3px; }
.login-divider { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; margin: 23px 0 18px; color: #a0a9b8; font-size: 12px; }
.login-divider::before, .login-divider::after { content: ""; border-top: 1px dashed #dfe4eb; }
.login-socials { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 13px; }
.login-social { min-height: 55px; display: grid; place-items: center; padding: 0; border: 1px solid #dce2e9; border-radius: 13px; color: #05070a; background: #fff; cursor: pointer; transition: border-color .15s ease, background .15s ease, transform .15s ease; }
.login-social:hover { border-color: #c9d3df; background: #f8fafc; transform: translateY(-1px); }
.login-social:disabled { opacity: .42; cursor: not-allowed; transform: none; }
.login-social svg { width: 25px; height: 25px; }
.login-security { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 21px 0 0; color: #929cab; font-size: 9px; font-weight: 700; }
.login-security svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

@media (min-width: 681px) and (max-width: 920px) {
    .app-shell { grid-template-columns: 78px minmax(0, 1fr); }
    .sidebar { padding-inline: 11px; }
    .logo { justify-content: center; padding-inline: 0; }
    .logo strong, .sidebar .desktop-nav a > span, .sidebar-bottom > a > span, .profile-chip div, .logout-btn { display: none; }
    .sidebar .desktop-nav a, .sidebar-bottom > a { justify-content: center; padding: 0; font-size: 19px; }
    .sidebar .desktop-nav a em, .sidebar-bottom a em { position: absolute; margin: -27px -36px 0 0; min-width: 18px; height: 18px; padding: 0 4px; font-size: 8px; }
    .profile-chip { justify-content: center; padding-inline: 0; }
    .summary-strip { grid-template-columns: 1fr; }
    .order-summary { grid-template-columns: repeat(2, 1fr); }
    .order-summary-tile:last-child { grid-column: 1 / -1; }
    .order-filter-panel { width: min(540px, calc(100vw - 126px)); max-width: none; }
    .orders-list.is-list .order-row { grid-template-columns: 110px minmax(0, 1fr) minmax(0, 1fr); }
    .orders-list.is-list .order-row-media { grid-row: 1 / span 2; }
    .orders-list.is-list .order-row-main { grid-column: 2 / -1; }
    .orders-list.is-list .order-row-progress { grid-column: 2; }
    .orders-list.is-list .order-row-payment { grid-column: 3; }
    .orders-list.is-list .order-row-delivery { grid-column: 2 / -1; }
    .order-row-date { grid-column: 1 / -1; display: flex; justify-content: flex-end; gap: 5px; }
    .order-row-date b, .order-row-date small { display: inline; }
    .order-info-grid { grid-template-columns: repeat(2, 1fr); }
    .order-quickbar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .order-quick-action.is-payment { grid-column: 1 / -1; }
    .manual-payment-compact { grid-template-columns: 1fr 1fr; }
    .purchase-list { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
    .inventory-filters { grid-template-columns: 1fr 1fr; }
    .inventory-row { grid-template-columns: 36px minmax(170px, .8fr) minmax(350px, 1.4fr); }
    .inventory-state { grid-column: 2; justify-self: start; }
    .inventory-count { grid-column: 2 / -1; }
    .inventory-count form { grid-template-columns: 1fr 1fr; }
    .inventory-count form .wide { grid-column: 1 / -1; }
    .inventory-movements article { grid-template-columns: 34px minmax(150px, .8fr) minmax(210px, 1fr) 95px; }
    .movement-author { grid-column: 2 / -1; display: flex; justify-content: flex-end; gap: 7px; }
    .yarn-pricing-modal-body { grid-template-columns: 270px minmax(0, 1fr); }
    .yarn-pricing-editor-form { padding: 23px 20px; }
    .yarn-pricing-fields { grid-template-columns: 1fr; }
    .yarn-pricing-editor-actions { align-items: stretch; flex-direction: column; }
    .yarn-pricing-editor-actions p { max-width: none; }
    .yarn-pricing-editor-actions .btn { width: 100%; }
    .yarn-create-modal-body { grid-template-columns: 220px minmax(0, 1fr); }
    .yarn-create-preview { padding-inline: 16px; }
    .yarn-create-form { padding-inline: 20px; }
    .yarn-admin-row { grid-template-columns: 115px minmax(135px, .7fr) minmax(180px, 1fr) 100px; }
    .yarn-admin-row > .btn { grid-column: -2 / -1; }
    .yarn-admin-row > .yarn-row-actions { grid-column: -2 / -1; }
    .catalog-filters { grid-template-columns: 1fr 1fr; }
    .catalog-filters label:first-of-type { grid-column: 1 / -1; }
    .employee-profile-hero { grid-template-columns: auto 1fr; }
    .employee-hero-stats { grid-column: 1 / -1; }
    .employee-detail-layout { grid-template-columns: 1fr; }
    .employee-editor { position: static; }
    .recipe-editor-content { grid-template-columns: 1fr; }
    .manual-create-body { grid-template-columns: minmax(270px, .8fr) minmax(0, 1.2fr); }
    .global-search-form label { width: 150px; }
    .report-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .report-grid, .purchase-batch-list { grid-template-columns: 1fr; }
}

@media (max-width: 680px) {
    .deadline-form { grid-template-columns: 1fr; }
    .deadline-form .btn { width: 100%; }
    .purchase-batch-create { grid-template-columns: 1fr; }
    .purchase-batch-list { grid-template-columns: 1fr; }
    .global-search-form { display: none; }
    .global-search-main { grid-template-columns: auto minmax(0, 1fr); }
    .global-search-main .btn { grid-column: 1 / -1; width: 100%; }
    .global-search-groups, .report-kpis, .report-grid { grid-template-columns: 1fr; }
    .report-toolbar { align-items: stretch; flex-direction: column; }
    .report-toolbar > div:last-child { display: grid; grid-template-columns: 1fr 1fr; }
    .report-table article, .report-table > a { grid-template-columns: minmax(0, 1fr) auto; }
    .report-table article > span:last-child { grid-column: 1 / -1; }
    body.mobile-more-open { overflow: hidden; }
    .app-shell { display: block; padding-bottom: calc(94px + env(safe-area-inset-bottom)); }
    .impersonation-banner { min-height: 48px; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 8px; margin-top: 10px; padding: 7px; border-radius: 12px; }
    .impersonation-banner-icon { width: 30px; height: 30px; border-radius: 9px; }
    .impersonation-banner-copy small > span:last-child { display: none; }
    .impersonation-banner-action button { width: 34px; min-height: 34px; padding: 0; }
    .impersonation-banner-action button > span:last-child { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
    .sidebar { position: fixed; inset: auto 0 0 0; z-index: 50; width: 100%; height: calc(88px + env(safe-area-inset-bottom)); display: block; padding: 0 12px calc(10px + env(safe-area-inset-bottom)); border: 0; background: transparent; box-shadow: none; pointer-events: none; }
    .logo, .desktop-nav, .sidebar-bottom { display: none !important; }
    .mobile-dock { position: relative; isolation: isolate; width: min(520px, 100%); height: 66px; display: grid !important; grid-template-columns: repeat(var(--mobile-dock-count, 4), minmax(0, 1fr)); gap: 3px; margin: 0 auto; padding: 4px; overflow: visible; border: 1px solid rgba(255,255,255,.24); border-radius: 27px; background: rgba(15,28,47,.82); box-shadow: 0 12px 36px rgba(8,18,33,.3), inset 0 1px 0 rgba(255,255,255,.12); backdrop-filter: blur(24px) saturate(155%); -webkit-backdrop-filter: blur(24px) saturate(155%); pointer-events: auto; touch-action: none; user-select: none; -webkit-user-select: none; }
    .mobile-dock-liquid { position: absolute; z-index: -1; top: 4px; bottom: 4px; left: 0; width: 0; border: 1px solid rgba(255,255,255,.2); border-radius: 23px; background: linear-gradient(145deg, rgba(255,255,255,.2), rgba(255,255,255,.08)); box-shadow: inset 0 1px 0 rgba(255,255,255,.16), 0 7px 18px rgba(3,11,24,.22); opacity: 0; transform: translateX(0); transition: transform .3s cubic-bezier(.2,.78,.22,1), width .3s cubic-bezier(.2,.78,.22,1), opacity .18s ease; will-change: transform; }
    .mobile-dock-liquid.is-ready { opacity: 1; }
    .mobile-dock.is-tracking .mobile-dock-liquid { transition: opacity .12s ease; }
    .mobile-dock > a, .mobile-dock > button { position: relative; z-index: 1; min-width: 0; min-height: 58px; display: grid; grid-template-rows: 31px 15px; place-items: center; gap: 0; padding: 5px 2px 3px; border: 0; border-radius: 22px; color: #aab8cc; background: transparent; cursor: pointer; -webkit-tap-highlight-color: transparent; }
    .mobile-dock > a:hover, .mobile-dock > a.active, .mobile-dock > button.active, .mobile-dock > .is-drag-preview { color: white; background: transparent; }
    .mobile-dock.is-tracking > a.active:not(.is-drag-preview), .mobile-dock.is-tracking > button.active:not(.is-drag-preview) { color: #aab8cc; }
    .sidebar .mobile-dock > a > i, .sidebar .mobile-dock > button > i { display: grid; place-items: center; color: inherit; font-size: 0; font-style: normal; line-height: 1; }
    .mobile-dock i .material-symbols-rounded { width: 22px; height: 22px; font-size: 22px; }
    .sidebar .mobile-dock > a > span, .sidebar .mobile-dock > button > span { width: 100%; display: block; overflow: hidden; color: inherit; text-overflow: ellipsis; white-space: nowrap; font-size: 8px; font-weight: 750; line-height: 13px; text-align: center; }
    .sidebar .mobile-dock > a > em, .sidebar .mobile-dock > button > em { position: absolute; top: -5px; left: calc(50% + 7px); min-width: 19px; height: 19px; display: grid; place-items: center; margin: 0; padding: 0 5px; border: 2px solid #14233b; border-radius: 999px; color: white; background: var(--pink); box-shadow: 0 3px 9px rgba(238,49,120,.32); font-size: 8px; font-style: normal; font-weight: 850; }
    @supports not ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) {
        .mobile-dock { background: #182942; }
    }
    .mobile-more-sheet { position: fixed; inset: 0; z-index: 80; display: block !important; }
    .mobile-more-sheet[hidden] { display: none !important; }
    .mobile-more-backdrop { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; opacity: 0; background: rgba(7,14,25,.5); backdrop-filter: blur(3px); transition: opacity .2s ease; }
    .mobile-more-panel { position: absolute; left: 8px; right: 8px; bottom: calc(8px + env(safe-area-inset-bottom)); max-height: min(82vh, 720px); display: flex; flex-direction: column; padding: 7px 14px 14px; overflow: hidden; border: 1px solid rgba(255,255,255,.8); border-radius: 25px; background: rgba(248,249,252,.96); box-shadow: 0 -8px 60px rgba(6,15,28,.3); backdrop-filter: blur(24px) saturate(130%); -webkit-backdrop-filter: blur(24px) saturate(130%); transform: translateY(calc(102% + 20px)); transition: transform .24s cubic-bezier(.2,.75,.25,1); }
    .mobile-more-sheet.is-open .mobile-more-backdrop { opacity: 1; }
    .mobile-more-sheet.is-open .mobile-more-panel { transform: translateY(0); }
    .mobile-more-handle { width: 38px; height: 4px; flex: 0 0 auto; margin: 0 auto 9px; border-radius: 999px; background: #c7ced8; }
    .mobile-more-main, .mobile-profile-settings { min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
    .mobile-more-main[hidden], .mobile-profile-settings[hidden] { display: none; }
    .mobile-profile { min-height: 66px; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 6px 4px 13px; border-bottom: 1px solid #e1e5eb; }
    .mobile-profile-open { min-width: 0; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 0; border: 0; color: inherit; background: transparent; text-align: left; cursor: pointer; }
    .mobile-profile-open > span { min-width: 0; }
    .mobile-profile-open > strong { color: #9aa5b3; font-size: 24px; font-weight: 500; }
    .mobile-profile small, .mobile-profile b, .mobile-profile em { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .mobile-profile small { margin-bottom: 2px; color: var(--blue); font-size: 8px; font-weight: 850; letter-spacing: .1em; text-transform: uppercase; }
    .mobile-profile b { font-size: 16px; }
    .mobile-profile em { margin-top: 3px; color: #7b8798; font-size: 10px; font-style: normal; }
    .mobile-more-close { width: 36px; height: 36px; display: grid; place-items: center; padding: 0; border: 1px solid #dfe4eb; border-radius: 50%; color: #66758a; background: white; font-size: 23px; line-height: 1; }
    .mobile-more-links { display: grid; gap: 4px; margin: 10px -3px 8px; padding: 0 3px; overflow-y: auto; overscroll-behavior: contain; }
    .mobile-more-links a { min-height: 56px; display: grid; grid-template-columns: 37px minmax(0, 1fr) auto auto; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 13px; color: #233149; background: transparent; }
    .mobile-more-links a:hover, .mobile-more-links a.active { color: #233149; background: #e9eff9; }
    .mobile-more-links a > i { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 11px; color: #315e9f; background: #e3ecfa; font-size: 18px; font-style: normal; }
    .mobile-more-links a > i .material-symbols-rounded { font-size: 20px; }
    .mobile-more-links a > span { min-width: 0; }
    .mobile-more-links a b, .mobile-more-links a small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .mobile-more-links a b { color: #27364e; font-size: 12px; }
    .mobile-more-links a small { margin-top: 3px; color: #8490a1; font-size: 8px; }
    .mobile-more-links a > em { min-width: 23px; height: 23px; display: grid; place-items: center; padding: 0 7px; border-radius: 999px; color: white; background: var(--pink); font-size: 9px; font-style: normal; font-weight: 850; }
    .mobile-more-links a > strong { color: #9aa5b3; font-size: 22px; font-weight: 500; }
    .mobile-more-links a > strong .material-symbols-rounded, .mobile-profile-open > strong .material-symbols-rounded { font-size: 22px; }
    .mobile-logout-form { flex: 0 0 auto; padding-top: 9px; border-top: 1px solid #e1e5eb; }
    .mobile-logout-form button { width: 100%; min-height: 47px; border: 0; border-radius: 13px; color: #b12e3f; background: #feecef; font-size: 12px; font-weight: 850; cursor: pointer; }
    .mobile-profile-settings-head { min-height: 64px; display: grid; grid-template-columns: 38px minmax(0, 1fr) 38px; align-items: center; gap: 9px; padding: 5px 2px 12px; border-bottom: 1px solid #e1e5eb; }
    .mobile-profile-settings-head small, .mobile-profile-settings-head b { display: block; }
    .mobile-profile-settings-head small { color: var(--blue); font-size: 8px; font-weight: 850; letter-spacing: .1em; text-transform: uppercase; }
    .mobile-profile-settings-head b { margin-top: 3px; font-size: 15px; }
    .mobile-profile-back { width: 36px; height: 36px; display: grid; place-items: center; padding: 0; border: 1px solid #dfe4eb; border-radius: 50%; color: #66758a; background: white; font-size: 27px; line-height: 1; cursor: pointer; }
    .mobile-profile-form { display: grid; gap: 13px; padding: 14px 2px 1px; overflow-y: auto; }
    .mobile-profile-photo { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 12px; padding: 11px; border: 1px solid #e1e6ed; border-radius: 14px; background: white; cursor: pointer; }
    .mobile-profile-photo-copy, .mobile-profile-photo b, .mobile-profile-photo small { display: block; }
    .mobile-profile-photo small { margin-top: 4px; color: var(--muted); font-size: 9px; }
    .mobile-profile-photo input { grid-column: 1 / -1; width: 100%; min-height: 39px; padding: 7px; font-size: 10px; }
    .mobile-profile-auth { display: grid; gap: 8px; padding: 11px; border: 1px solid #e1e6ed; border-radius: 14px; background: #f8fafc; }
    .mobile-profile-auth > span small, .mobile-profile-auth > span b { display: block; }
    .mobile-profile-auth > span small { color: #7d899b; font-size: 8px; font-weight: 800; text-transform: uppercase; }
    .mobile-profile-auth > span b { margin-top: 3px; overflow-wrap: anywhere; color: #293a52; font-size: 11px; }
    .mobile-profile-auth .employee-oauth-badges { margin-top: 0; }
    .mobile-profile-auth .oauth-connect-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 0; }
    .mobile-profile-auth .oauth-connect-actions a, .mobile-profile-auth .oauth-connect-actions > span { min-height: 44px; }
    .mobile-profile-passwords { display: grid; gap: 10px; }
    .mobile-profile-passwords label { display: grid; gap: 5px; color: #5d6c80; font-size: 10px; font-weight: 750; }
    .mobile-profile-passwords input { min-height: 43px; padding: 9px 11px; border: 1px solid #d9e0e9; border-radius: 11px; background: white; }
    .mobile-profile-form > p { margin: -3px 0 0; color: var(--muted); font-size: 9px; line-height: 1.45; }
    .mobile-profile-form > .btn { width: 100%; min-height: 46px; }
    .topbar .bell { display: grid; }
    .notification-popover { position: fixed; top: max(72px, calc(env(safe-area-inset-top) + 58px)); left: 12px; right: 12px; width: auto; max-height: calc(100dvh - 170px); border-radius: 18px; }
    .notification-preview-list { max-height: calc(100dvh - 305px); }
    .notification-sound-toggle span { display: none; }
    .notification-sound-toggle { width: 36px; justify-content: center; padding: 0; }
    .earnings-toolbar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; margin-bottom: 12px; }
    .earnings-month-nav { width: 100%; margin-bottom: 0; grid-column: 1 / -1; }
    .earnings-payable-summary, .payroll-settings-button { width: 100%; min-width: 0; min-height: 52px; gap: 8px; padding: 8px 9px; }
    .earnings-payable-summary:last-child { grid-column: 1 / -1; }
    .earnings-payable-summary > .material-symbols-rounded, .payroll-settings-button > .material-symbols-rounded { width: 36px; height: 36px; font-size: 19px; }
    .earnings-payable-summary small, .earnings-payable-summary em, .payroll-settings-button small { font-size: 7px; }
    .payroll-settings-button b { font-size: 10px; line-height: 1.2; }
    .earning-amount-button { min-width: 64px; min-height: 44px; }
    .order-card-pay { min-height: 44px; }
    .order-card-dimensions { width: 100%; min-height: 44px; padding: 5px 6px 5px 10px; }
    .order-card-dimensions input { width: 62px; min-height: 34px; font-size: 16px; }
    .order-card-dimensions output { margin-left: auto; }
    .order-card-dimensions button { width: 34px; height: 34px; }
    .main-content { padding: 0 12px 28px; }
    .topbar { min-height: 82px; }
    .topbar h1 { font-size: 24px; }
    .topbar-kicker { gap: 7px; }
    .board-topbar .topbar-kicker { flex-wrap: wrap; row-gap: 5px; }
    .topbar-kicker .eyebrow { font-size: 9px; }
    .view-switch a { min-height: 26px; padding-inline: 9px; font-size: 9px; }
    .processor-mode-switch { min-height: 32px; padding-left: 8px; font-size: 8px; }
    .purchase-topbar { min-height: 72px; }
    .purchase-topbar .topbar-heading { width: auto; min-width: 0; flex: 1 1 auto; gap: 6px; }
    .purchase-topbar h1 { font-size: 19px; }
    .purchase-top-tabs { position: static; z-index: auto; width: auto; flex: 1 1 auto; display: flex; grid-template-columns: none; margin: 0; padding: 3px; }
    .purchase-top-tabs a { min-width: 0; min-height: 30px; flex: 1 1 auto; justify-content: center; padding: 0 5px; font-size: 8px; white-space: nowrap; }
    .purchase-top-total { display: none; }
    .purchase-supplier-tools { display: grid; grid-template-columns: minmax(0, 1fr) 41px; gap: 7px; }
    .purchase-supplier-switch { width: 100%; }
    .purchase-supplier-switch button { flex: 1 0 auto; justify-content: center; }
    .purchase-copy-request { width: 41px; min-height: 41px; justify-content: center; padding: 0; }
    .purchase-copy-request span:not(.material-symbols-rounded) { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
    .purchase-batch-create-toggle { width: 100%; min-height: 46px; display: flex; align-items: center; justify-content: center; gap: 7px; margin-bottom: 10px; padding: 0 14px; border: 1px solid #cfe0f8; border-radius: 13px; color: #285c9f; background: #f2f7ff; cursor: pointer; font: inherit; font-size: 10px; font-weight: 850; }
    .purchase-batch-create-toggle .material-symbols-rounded { font-size: 20px; }
    .purchase-batch-create-shell.is-mobile-collapsed .purchase-batch-create { display: none; }
    .purchase-batches { margin-top: 16px; }
    .purchase-batches .section-heading { margin-bottom: 0; padding: 12px 13px; border: 1px solid var(--line); border-radius: 14px; background: white; box-shadow: 0 3px 12px rgba(20,35,59,.05); }
    .purchase-batches .section-heading h2 { font-size: 17px; }
    .purchase-batches-heading-actions > small { display: none; }
    .purchase-batches-toggle { min-height: 40px; display: inline-flex; align-items: center; gap: 5px; padding: 0 10px; border: 0; border-radius: 11px; color: #315d96; background: #eef5ff; cursor: pointer; font: inherit; font-size: 9px; font-weight: 850; }
    .purchase-batches-toggle .material-symbols-rounded { font-size: 19px; transition: transform .16s ease; }
    .purchase-batches:not(.is-mobile-collapsed) .purchase-batches-toggle .material-symbols-rounded { transform: rotate(180deg); }
    .purchase-batches.is-mobile-collapsed .purchase-batch-list { display: none; }
    .purchase-batches:not(.is-mobile-collapsed) .purchase-batch-list { margin-top: 10px; }
    .mobile-menu { display: none !important; }
    .manual-create-open { width: 44px; height: 44px; border-radius: 12px; font-size: 23px; }
    .manual-create-modal { place-items: stretch; padding: 0; }
    .manual-create-dialog { width: 100%; height: 100dvh; max-height: 100dvh; border: 0; border-radius: 0; }
    .manual-create-head { min-height: 78px; padding: calc(13px + env(safe-area-inset-top)) 14px 13px; }
    .manual-create-head h2 { font-size: 21px; }
    .manual-create-head p { font-size: 10px; }
    .manual-create-body { display: block; padding: 9px; overflow-y: auto; overscroll-behavior: contain; }
    .manual-create-body section { padding: 12px; }
    .manual-create-workspace { display: block; overflow: visible; padding: 0; }
    .manual-create-workspace > section { margin-top: 9px; }
    .manual-create-designs { max-height: 42dvh; overflow-y: auto; }
    .manual-create-fields { grid-template-columns: 1fr; }
    .manual-create-fields .wide { grid-column: auto; }
    .manual-create-search input, .manual-create-fields input:not([type="checkbox"]), .manual-create-fields select, .manual-create-fields textarea, .manual-item-fields input:not([type="file"]), .manual-item-fields select { font-size: 16px; }
    .manual-create-section-title p { font-size: 10px; }
    .manual-design-option > span { min-height: 68px; }
    .manual-design-option b { font-size: 12px; }
    .manual-design-option small { font-size: 10px; }
    .manual-item-fields > label, .manual-item-upload-label, .manual-create-fields label { font-size: 11px; }
    .manual-upload-drop { grid-template-columns: 40px minmax(0,1fr); }
    .manual-upload-drop em { display: none; }
    .manual-selected-item > header { grid-template-columns: 44px minmax(0,1fr) 44px; }
    .manual-item-remove { width: 44px; height: 44px; }
    .manual-quantity-control { min-height: 46px; grid-template-columns: 44px minmax(44px,1fr) 44px; }
    .manual-quantity-control button, .manual-quantity-control input { min-height: 44px !important; }
    .manual-upload-preview { grid-template-columns: 46px minmax(0,1fr) auto; }
    .manual-upload-preview-actions button { width: 44px; height: 44px; }
    .manual-create-actions { grid-template-columns: 1fr 1fr; padding: 9px 10px calc(9px + env(safe-area-inset-bottom)); }
    .manual-create-total { grid-column: 1 / -1; min-height: 24px; }
    .manual-create-actions .btn { min-width: 0; width: 100%; }
    .mobile-board-tabs { position: sticky; top: 0; z-index: 18; display: flex; gap: 8px; margin: 0 -12px 10px; padding: 7px 12px 10px; overflow-x: auto; background: linear-gradient(180deg, rgba(243,245,248,.98) 72%, rgba(243,245,248,0)); scrollbar-width: none; scroll-padding-inline: 12px; }
    .mobile-board-tabs::-webkit-scrollbar { display: none; }
    .mobile-board-tab { flex: 0 0 auto; min-height: 39px; display: inline-flex; align-items: center; gap: 8px; padding: 0 11px 0 14px; border: 1px solid #dfe4ec; border-radius: 999px; color: #66748a; background: rgba(255,255,255,.92); box-shadow: 0 3px 10px rgba(20,35,59,.045); font-size: 12px; font-weight: 800; cursor: pointer; white-space: nowrap; }
    .mobile-board-tab small { min-width: 23px; height: 23px; display: grid; place-items: center; padding: 0 6px; border-radius: 999px; color: #68758a; background: #e9edf3; font-size: 10px; font-weight: 850; }
    .mobile-board-tab[aria-selected="true"] { border-color: var(--navy); color: white; background: var(--navy); box-shadow: 0 6px 16px rgba(20,35,59,.18); }
    .mobile-board-tab[aria-selected="true"] small { color: var(--navy); background: white; }
    .mobile-board-tab:focus-visible { outline: 3px solid rgba(47,111,237,.3); outline-offset: 2px; }
    .board { display: block; margin: 0; padding: 0 0 20px; overflow: visible; scroll-snap-type: none; touch-action: pan-y; overscroll-behavior-x: contain; }
    .board-column { width: 100%; max-height: none; display: none; flex-basis: auto; }
    .board-column.is-mobile-active, .board-column.is-mobile-swipe-target { min-height: max(226px, calc(100dvh - 242px - env(safe-area-inset-bottom))); }
    .board-column.is-mobile-active { display: flex; }
    .board.is-mobile-swipe-visual { position: relative; overflow-x: clip; clip-path: inset(0); }
    .board.is-mobile-swipe-visual > .board-column.is-mobile-active { position: relative; z-index: 2; transform: translate3d(var(--mobile-swipe-x, 0px), 0, 0); will-change: transform; }
    .board.is-mobile-swipe-visual > .board-column.is-mobile-swipe-target { position: absolute; inset: 0 0 auto; z-index: 1; width: 100%; display: flex; pointer-events: none; transform: translate3d(calc(var(--mobile-swipe-target-start) + var(--mobile-swipe-x, 0px)), 0, 0); will-change: transform; }
    .board.is-mobile-swipe-settling > .board-column.is-mobile-active, .board.is-mobile-swipe-settling > .board-column.is-mobile-swipe-target { transition: transform .22s cubic-bezier(.2,.75,.25,1); }
    .column-list { overflow-y: visible; }
    .work-card { border-radius: 13px; }
    .work-card[draggable=true] { touch-action: pan-x pan-y; }
    .card-art, .board-image-split, .board-image-pane, .board-image-pane .card-art, .board-image-empty { height: clamp(138px, 42vw, 190px); }
    .quick-actions .btn { min-height: 42px; }
    @media (prefers-reduced-motion: reduce) {
        .board.is-mobile-swipe-settling > .board-column.is-mobile-active, .board.is-mobile-swipe-settling > .board-column.is-mobile-swipe-target { transition: none; }
    }
    .shipping-grid, .earnings-grid, .catalog-grid { grid-template-columns: 1fr; }
    .order-summary { grid-template-columns: 1fr 1fr; }
    .order-summary-tile { min-height: 86px; grid-template-columns: 40px minmax(0, 1fr); gap: 10px; padding: 13px; }
    .order-summary-tile:last-child { grid-column: 1 / -1; }
    .order-summary-icon { width: 40px; height: 40px; border-radius: 12px; font-size: 21px; }
    .order-summary-copy > strong { font-size: 22px; }
    .orders-view-toolbar { grid-template-columns: auto minmax(0, 1fr) auto; gap: 8px; }
    .orders-view-toolbar > p { min-width: 0; }
    .orders-view-toolbar.is-search-open { grid-template-columns: minmax(0, 1fr); }
    .orders-view-toolbar.is-search-open > p, .orders-view-toolbar.is-search-open > .orders-view-toggle, .orders-view-toolbar.is-search-open .order-filter-disclosure { display: none; }
    .orders-view-toolbar.is-search-open .order-filter-bar, .orders-view-toolbar.is-search-open .order-search-dock, .orders-view-toolbar.is-search-open .order-search-expanded { width: 100%; max-width: none; }
    .orders-view-toolbar.is-search-open .order-search-dock { flex-basis: 100%; }
    .order-filter-bar { gap: 6px; }
    .order-search-expanded { height: 48px; }
    .order-search-expanded input { font-size: 16px; }
    .order-filter-toggle { min-width: 44px; width: 44px; padding: 0; }
    .order-filter-toggle > span:not(.material-symbols-rounded) { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
    .order-filter-toggle > b { position: absolute; top: -5px; right: -5px; min-width: 18px; height: 18px; padding: 0 4px; border: 2px solid var(--canvas); font-size: 8px; }
    .order-filter-panel { position: fixed; left: 12px; right: 12px; top: auto; bottom: calc(92px + env(safe-area-inset-bottom)); width: auto; max-width: none; max-height: calc(100dvh - 132px - env(safe-area-inset-bottom)); grid-template-columns: 1fr; overflow-y: auto; padding: 14px; border-radius: 16px; }
    .order-filter-panel select { min-height: 46px; font-size: 16px; }
    .order-filter-actions { grid-column: auto; display: grid; grid-template-columns: 1fr; }
    .order-filter-actions .btn { width: 100%; min-height: 44px; }
    .order-row { grid-template-columns: 1fr; gap: 13px; padding: 14px; }
    .orders-view-toggle button { width: 44px; min-height: 44px; padding: 0; }
    .orders-view-toggle button span:not(.material-symbols-rounded) { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
    .orders-list.is-list .order-row-media { height: 168px; }
    .orders-list.is-list .order-row-media.media-count-2 { height: clamp(84px, 24vw, 96px); }
    .order-row-progress, .order-row-payment, .order-row-delivery { padding-top: 11px; border-top: 1px solid #edf0f4; }
    .order-row-date { grid-column: auto; justify-content: flex-start; text-align: left; }
    .order-row-date i { margin-left: auto; }
    .order-dossier-nav { align-items: flex-start; flex-direction: column; }
    .order-dossier-head { align-items: flex-start; flex-direction: column; padding: 18px; }
    .order-dossier-status { justify-items: start; text-align: left; }
    .order-quickbar { grid-template-columns: 1fr 1fr; gap: 8px; }
    .order-quick-action { min-height: 62px; padding: 9px 10px; }
    .order-quick-action.is-payment { grid-column: 1 / -1; }
    .order-quick-action.is-compact { min-height: 54px; }
    .order-quick-action small { font-size: 7px; }
    .order-quick-action b { font-size: 10px; }
    .order-quick-action em { display: none; }
    .order-info-grid { grid-template-columns: 1fr; }
    .order-delivery-summary { margin-top: -8px; }
    .order-delivery-tiles { grid-template-columns: 1fr; }
    .order-delivery-tile { min-height: 100px; padding: 11px; }
    .order-shipment-dialog-body { padding: 15px 14px 18px; }
    .order-shipment-parcel-info dl { grid-template-columns: 1fr 1fr; }
    .order-shipment-parcel-info dl > div:last-child:nth-child(odd) { grid-column: 1 / -1; }
    .order-shipment-additional-numbers ul { grid-template-columns: 1fr; }
    .order-shipment-route-summary { align-items: flex-start; flex-direction: column; }
    .order-shipment-route-summary .order-shipment-route-eta { align-items: start; text-align: left; }
    .order-shipment-route-head { align-items: flex-start; flex-direction: column; gap: 3px; }
    .order-shipment-history-heading { align-items: flex-start; flex-direction: column; gap: 3px; }
    .order-payment-card, .order-deadline-card { grid-column: auto; }
    .contact-action { min-width: 44px; min-height: 44px; }
    .order-payment-summary { align-items: flex-start; flex-direction: column; }
    .order-payment-summary p { text-align: left; }
    .order-payment-fields { grid-template-columns: 1fr 1fr; }
    .order-payment-fields label:last-child { grid-column: 1 / -1; }
    .order-payment-method > div { grid-template-columns: 1fr; }
    .order-payment-form > .btn { width: 100%; min-height: 42px; }
    .date-picker-trigger { min-height: 44px; font-size: 12px; }
    .date-picker-popover { left: 50%; transform: translateX(-50%); }
    .date-picker-head { grid-template-columns: 44px minmax(0, 1fr) 44px; }
    .date-picker-head button { width: 44px; height: 44px; }
    .date-picker-actions button { min-height: 44px; padding-inline: 12px; }
    .order-product-title { display: block; }
    .order-product-tools { justify-content: space-between; margin-top: 9px; }
    .order-admin-dialog, .order-admin-dialog.is-small { width: 100%; height: 100dvh; max-height: none; border: 0; border-radius: 0; }
    .order-admin-dialog-panel { min-height: 100dvh; max-height: 100dvh; }
    .order-admin-dialog-panel > header { padding: calc(15px + env(safe-area-inset-top)) 14px 13px; }
    .order-admin-dialog-panel > header h2 { font-size: 18px; }
    .order-admin-form-grid { grid-template-columns: 1fr; gap: 12px; padding: 15px 14px; }
    .order-admin-form-grid > label.wide, .order-admin-form-grid > .date-picker { grid-column: auto; }
    .order-admin-form-grid input:not([type="checkbox"]), .order-admin-form-grid select, .order-admin-form-grid textarea { min-height: 46px; font-size: 16px; }
    .order-admin-dialog-panel > footer { padding: 11px 14px calc(11px + env(safe-area-inset-bottom)); }
    .order-admin-dialog-panel > footer .btn { min-height: 44px; }
    .order-admin-note { margin-inline: 14px; font-size: 10px; }
    .order-removed-products article { grid-template-columns: minmax(0, 1fr) auto; }
    .order-removed-products article > .badge { display: none; }
    .order-stage { display: inline-flex; margin-top: 9px; }
    .order-stage-grid { grid-template-columns: 1fr; }
    .order-photo-gallery figure { flex-basis: 155px; }
    .order-photo-gallery img { height: 110px; }
    .shipment-records { grid-template-columns: 1fr; }
    .shipment-record { padding: 14px; }
    .shipment-form-grid { grid-template-columns: 1fr; }
    .shipment-form-grid .wide { grid-column: auto; }
    .catalog-filters, .catalog-edit-form, .manual-order-form { grid-template-columns: 1fr; }
    .catalog-filters label:first-of-type, .catalog-edit-form .wide, .manual-order-form .wide { grid-column: auto; }
    .catalog-filters .btn { width: 100%; }
    .catalog-sync-note { display: block; }
    .catalog-sync-note code { display: block; margin-top: 9px; overflow-wrap: anywhere; }
    .shipping-card { padding: 14px; }
    .purchase-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
    .purchase-tile-open { min-height: 184px; gap: 9px; padding: 11px; border-radius: 14px; }
    .purchase-tile-swatch { width: 42px; height: 42px; }
    .purchase-tile-name strong { font-size: 15px; }
    .purchase-tile-name small { font-size: 9px; }
    .purchase-tile-qty { padding: 8px; }
    .purchase-tile-qty small { font-size: 7px; }
    .purchase-tile-qty strong { font-size: 17px; }
    .purchase-confirm-modal { place-items: center; padding: 18px; }
    .purchase-confirm-dialog { width: min(430px, 100%); max-height: calc(100dvh - 36px); padding: 25px 18px 18px; overflow-y: auto; border-radius: 24px; }
    .purchase-confirm-dialog h2 { font-size: 21px; }
    .purchase-confirm-counter { grid-template-columns: 68px 105px 68px; gap: 11px; margin-top: 22px; }
    .purchase-confirm-counter > button { width: 68px; height: 68px; }
    .purchase-confirm-counter input { width: 105px; }
    .purchase-confirm-actions { width: calc(100% + 36px); margin: 19px -18px -18px; padding: 12px 18px 14px; border-radius: 0 0 24px 24px; }
    .inventory-tabs { position: sticky; z-index: 12; top: 0; width: 100%; display: grid; grid-template-columns: repeat(3, 1fr); padding: 4px; background: rgba(255,255,255,.94); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
    .inventory-tabs a { justify-content: center; padding: 0 7px; font-size: 9px; }
    .purchase-top-tabs { position: static; z-index: auto; top: auto; width: auto; display: flex; grid-template-columns: none; padding: 3px; background: white; backdrop-filter: none; -webkit-backdrop-filter: none; }
    .purchase-top-tabs a { min-width: 0; min-height: 30px; flex: 1 1 auto; padding: 0 5px; font-size: 8px; white-space: nowrap; }
    .inventory-filters { grid-template-columns: 1fr; }
    .inventory-filters .btn { width: 100%; }
    .inventory-row { grid-template-columns: 32px 1fr; padding: 12px 10px; }
    .inventory-yarn { min-width: 0; }
    .inventory-metrics { grid-column: 1 / -1; grid-template-columns: repeat(3, 1fr); }
    .inventory-state { grid-column: 1 / -1; justify-self: start; }
    .inventory-count { grid-column: 1 / -1; }
    .inventory-count form { grid-template-columns: 1fr; }
    .inventory-count form .wide { grid-column: auto; }
    .inventory-movements article { grid-template-columns: 32px 1fr auto; padding: 12px 10px; }
    .inventory-movements article > div:nth-of-type(2) { grid-column: 2 / -1; }
    .movement-author { grid-column: 2 / -1; justify-content: flex-start; text-align: left; }
    .yarn-create-open, .yarn-pricing-open { width: 43px; justify-content: center; padding: 0; }
    .yarn-create-open i,
    .yarn-pricing-open i { width: 29px; }
    .yarn-create-open span { display: none; }
    .yarn-pricing-open-full, .yarn-pricing-open-short { display: none; }
    .yarn-create-modal { place-items: end center; padding: 18px 0 0; }
    .yarn-create-dialog { width: 100%; max-height: calc(100vh - 18px); max-height: calc(100dvh - 18px); border-width: 1px 0 0; border-radius: 24px 24px 0 0; }
    .yarn-create-dialog-head { min-height: 82px; padding: 14px; }
    .yarn-create-dialog-title { gap: 10px; }
    .yarn-create-dialog-title > i { width: 43px; height: 43px; border-radius: 13px; font-size: 22px; }
    .yarn-create-dialog-title h2 { margin-bottom: 0; font-size: 19px; }
    .yarn-create-dialog-title p { display: none; }
    .yarn-create-modal-body { display: block; overflow-y: auto; }
    .yarn-create-preview { padding: 14px; border-right: 0; border-bottom: 1px solid #e8ecf2; }
    .yarn-create-preview-label, .yarn-create-preview > small { display: none; }
    .yarn-create-preview-card { display: grid; grid-template-columns: 118px minmax(0, 1fr); border-radius: 14px; }
    .yarn-create-preview-swatch { height: 112px; }
    .yarn-create-preview-copy { min-width: 0; display: flex; flex-direction: column; justify-content: center; padding: 12px; }
    .yarn-create-preview-copy h3 { margin-top: 10px; font-size: 15px; }
    .yarn-create-form { grid-template-columns: 1fr; gap: 12px; padding: 17px 14px calc(24px + env(safe-area-inset-bottom)); }
    .yarn-create-form .wide { grid-column: auto; }
    .yarn-create-form > label > small { display: none; }
    .yarn-create-actions { align-items: stretch; flex-direction: column; }
    .yarn-create-actions p { max-width: none; }
    .yarn-create-actions > div { display: grid; grid-template-columns: .8fr 1.2fr; }
    .yarn-create-actions .btn { width: 100%; }
    .yarn-pricing-modal { padding: 0; }
    .yarn-pricing-dialog { width: 100%; height: 100vh; height: 100dvh; max-height: none; border: 0; border-radius: 0; }
    .yarn-pricing-dialog-head { min-height: 82px; padding: 14px; }
    .yarn-pricing-dialog-title { gap: 10px; }
    .yarn-pricing-dialog-title > i { width: 43px; height: 43px; border-radius: 13px; font-size: 19px; }
    .yarn-pricing-dialog-title h2 { margin-bottom: 0; font-size: 19px; }
    .yarn-pricing-dialog-title p { display: none; }
    .yarn-pricing-new-line-head { display: grid; }
    .yarn-pricing-modal-body { display: block; overflow-y: auto; }
    .yarn-pricing-line-list { display: flex; gap: 8px; padding: 11px 14px 13px; overflow-x: auto; overflow-y: hidden; border-right: 0; border-bottom: 1px solid #e8ecf2; scrollbar-width: none; }
    .yarn-pricing-line-list::-webkit-scrollbar { display: none; }
    .yarn-pricing-new-line { position: static; flex: 0 0 190px; margin: 0; }
    .yarn-pricing-line-group { display: none; }
    .yarn-pricing-line { flex: 0 0 220px; margin: 0; background: white; }
    .yarn-pricing-editor-form { overflow: visible; padding: 20px 14px 25px; }
    .yarn-pricing-editor-heading { padding-bottom: 16px; }
    .yarn-pricing-editor-heading h3 { font-size: 21px; }
    .yarn-line-identity { grid-template-columns: 1fr; gap: 10px; margin-top: 16px; }
    .yarn-line-identity small { display: none; }
    .yarn-pricing-fields { grid-template-columns: 1fr 1fr; gap: 9px; margin-top: 16px; }
    .yarn-pricing-fields input { height: 47px; padding-left: 11px; font-size: 14px; }
    .yarn-pricing-fields label > small { display: none; }
    .yarn-line-characteristics { margin-top: 16px; padding: 13px; }
    .yarn-line-characteristics > header p { display: none; }
    .yarn-line-characteristics > div { gap: 9px; }
    .yarn-pricing-total { margin-top: 16px; padding: 16px; }
    .yarn-pricing-editor-actions { align-items: stretch; flex-direction: column; gap: 12px; margin-top: 17px; }
    .yarn-pricing-editor-actions p { max-width: none; }
    .yarn-pricing-editor-actions .btn { width: 100%; min-width: 0; }
    .yarn-search-field { min-height: 48px; padding-inline: 14px; border-radius: 13px; }
    .yarn-search-field input { height: 46px; font-size: 16px; }
    .yarn-admin-result { align-items: flex-end; line-height: 1.5; }
    .yarn-admin-result > div:first-child { display: block; min-width: 0; }
    .yarn-admin-result small { display: block; margin-top: 2px; }
    .yarn-view-switch button { width: 34px; justify-content: center; padding-inline: 0; }
    .yarn-view-switch button > span { display: none; }
    .yarn-admin-row { grid-template-columns: 1fr 1fr; padding: 12px 10px; }
    .yarn-admin-row > .btn { grid-column: 1 / -1; width: 100%; }
    .yarn-admin-row > .yarn-row-actions { grid-column: 1 / -1; justify-content: stretch; }
    .yarn-row-actions .btn:first-child { flex: 1; }
    .yarn-admin-list:is(.is-grid, .is-yarn) { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
    .yarn-admin-list:is(.is-grid, .is-yarn) .yarn-admin-row.is-tile-editing { grid-column: 1 / -1; }
    .yarn-tile-swatch { min-height: 96px; }
    .yarn-admin-list.is-yarn .yarn-tile-swatch { min-height: 168px; }
    .yarn-line-lifecycle { align-items: stretch; flex-direction: column; }
    .yarn-line-lifecycle-actions { display: grid; grid-template-columns: 1fr auto auto; }
    .yarn-line-lifecycle-actions .btn:first-child:not([hidden]),
    .yarn-line-lifecycle-actions .btn:nth-child(2):not([hidden]),
    .yarn-line-lifecycle-actions .btn:last-child:not([hidden]) { width: 100%; }
    .yarn-tile-body { min-height: 145px; padding: 11px; }
    .yarn-tile-body h3 { font-size: 14px; }
    .yarn-tile-meta { margin-bottom: 8px; }
    .yarn-tile-body .btn { min-height: 33px; padding-inline: 8px; font-size: 10px; }
    .yarn-pagination { justify-content: center; }
    .login-body { padding: 20px 14px; align-items: center; }
    .login-shell { width: calc(100vw - 28px); min-height: 0; }
    .login-card { padding: 30px 21px 26px; border-radius: 22px; }
    .login-mark { width: 56px; height: 56px; margin-bottom: 20px; border-radius: 16px; }
    .login-heading h1 { font-size: 26px; }
    .login-input input { font-size: 16px; }
    .live-toast { top: 12px; right: 12px; }
    .update-panel { padding: 18px; }
    .update-intro { grid-template-columns: 46px 1fr; gap: 12px; }
    .update-icon { width: 46px; height: 46px; border-radius: 13px; font-size: 24px; }
    .update-form { grid-template-columns: 1fr; }
    .health-check-grid { grid-template-columns: 1fr; margin-top: 16px; }
    .maintenance-actions { justify-content: stretch; }
    .maintenance-actions form, .maintenance-actions .btn { width: 100%; }
    .backup-create-form { grid-template-columns: 1fr; margin-top: 16px; }
    .backup-create-form .btn { width: 100%; }
    .backup-list article { align-items: flex-start; }
    .opencart-settings-grid { grid-template-columns: 1fr; }
    .opencart-settings-grid input { font-size: 16px; }
    .opencart-settings-actions { align-items: stretch; flex-direction: column; }
    .opencart-settings-actions .btn { width: 100%; min-width: 0; }
    .telegram-settings-actions > div { width: 100%; flex-direction: column; }
    .telegram-settings-actions .btn, .telegram-delivery-queue .btn { min-height: 44px; }
    .telegram-delivery-queue { align-items: stretch; flex-direction: column; }
    .telegram-delivery-queue form, .telegram-delivery-queue .btn { width: 100%; }
    .shipment-email-health, .shipment-email-delivery-meta { grid-template-columns: 1fr; }
    .shipment-email-events { grid-template-columns: 1fr 1fr; padding: 11px; }
    .shipment-email-test-row { grid-template-columns: 1fr; }
    .shipment-email-test-row input, .shipment-email-test-row select { font-size: 16px; }
    .shipment-email-settings-actions > div { width: 100%; flex-direction: column; }
    .shipment-email-settings-actions .btn { width: 100%; min-height: 44px; }
    .shipment-email-current { grid-template-columns: auto minmax(0, 1fr); align-items: start; }
    .shipment-email-current form { grid-column: 1 / -1; width: 100%; }
    .shipment-email-current .btn { width: 100%; min-height: 44px; }
    .opencart-endpoint { align-items: flex-start; }
    .opencart-endpoint code { white-space: normal; overflow-wrap: anywhere; }
    .update-history article { display: block; }
    .update-history time { display: block; margin-top: 7px; }
    .release-actions, .sync-event-actions { min-width: 0; align-items: flex-start; margin-top: 9px; }
    .photo-modal { padding: 7px; }
    .photo-dialog { width: 100%; max-height: calc(100vh - 14px); max-height: calc(100dvh - 14px); padding: 12px; border-radius: 14px; }
    .photo-dialog-head { align-items: flex-start; margin-bottom: 9px; }
    .photo-dialog h2 { font-size: 16px; }
    .photo-crop-viewport { height: min(48vh, 430px); height: min(48dvh, 430px); min-height: 220px; }
    .photo-crop-help { align-items: flex-start; }
    .photo-crop-help span { max-width: 62%; }
    .photo-modal-actions { grid-template-columns: 1fr 1fr; }
    .photo-modal-actions .crop-photo { grid-column: 1 / -1; }
    .template-modal { place-items: stretch; padding: 0; background: #fff; backdrop-filter: none; }
    .template-dialog { width: 100%; height: 100dvh; max-height: 100dvh; grid-template-rows: auto minmax(0, 1fr) auto; gap: 0; padding: 0; border: 0; border-radius: 0; box-shadow: none; }
    .template-dialog-head { min-height: 64px; gap: 8px; padding: max(9px, env(safe-area-inset-top)) 11px 9px; border-bottom: 1px solid #e5eaf1; background: rgba(255,255,255,.96); }
    .template-dialog-head h2 { margin-top: 2px; font-size: 17px; }
    .template-dialog-head .eyebrow { font-size: 8px; }
    .template-dialog-head .image-dialog-controls { gap: 6px; }
    .template-dialog-head .close-template { width: 44px; height: 44px; }
    .template-editor-workspace { min-height: 0; grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; gap: 0; overflow: hidden; }
    .template-preview-panel { min-height: 0; grid-template-rows: minmax(0, 1fr) auto; gap: 0; overflow: hidden; }
    .template-canvas { min-height: 0; padding: 12px; border: 0; border-radius: 0; scrollbar-gutter: auto; }
    .template-viewer-toolbar { display: grid; grid-template-columns: minmax(0, 1fr); gap: 7px; padding: 8px 10px 10px; border-right: 0; border-bottom: 0; border-left: 0; border-radius: 0; background: rgba(255,255,255,.98); box-shadow: 0 -8px 24px rgba(20,35,59,.05); }
    .template-viewer-toolbar[hidden] { display: none; }
    .template-view-controls { display: grid; grid-template-columns: 46px 70px 46px minmax(0, 1fr); gap: 5px; }
    .template-view-controls button { min-width: 0; width: 100%; height: 44px; padding: 0 7px; border: 1px solid #dfe6ef; background: #f7f9fc; }
    .template-view-controls .template-viewer-zoom-value { min-width: 0; }
    .template-actions { width: 100%; display: flex; justify-content: stretch; gap: 6px; }
    .template-actions form { flex: 1 1 0; }
    .template-actions .template-replace-form, .template-actions .card-photo-replace-form { flex-grow: 1.25; }
    .template-actions .btn, .template-actions form .btn { width: 100%; min-height: 48px; padding: 0 8px; font-size: 10px; }
    .template-actions > .template-download-button { flex: 1 1 0; }
    .template-actions .template-overflow { flex: 0 0 48px; }
    .template-more-toggle { width: 48px; height: 48px; }
    .template-overflow-menu { position: fixed; right: 10px; bottom: calc(122px + env(safe-area-inset-bottom)); width: min(250px, calc(100vw - 20px)); }
    .template-palette-panel { min-height: 220px; max-height: min(42dvh, 390px); grid-template-rows: auto auto minmax(0, 1fr); gap: 9px; margin: 0 8px 8px; padding: 13px; border-radius: 20px; box-shadow: 0 -12px 32px rgba(20,35,59,.12); }
    .template-palette-panel-head > div > span { font-size: 16px; }
    .template-palette-collapse { width: 44px; height: 44px; flex-basis: 44px; }
    .template-palette-actions { grid-template-columns: 1fr 1fr; }
    .template-modal .palette-edit-button, .template-modal .image-purchase-button { min-height: 46px; font-size: 11px; }
    .template-modal .image-yarn-legend-item { min-height: 56px; grid-template-columns: 28px 22px minmax(0, 1fr) auto; padding: 9px; }
    .template-modal .image-yarn-marker { width: 44px; height: 44px; font-size: 10px; }
    .template-modal.is-site-positioning .template-canvas { min-height: 0; }
    .template-position-toolbar { grid-template-columns: 1fr 1fr; gap: 7px; margin: 0 8px 8px; }
    .template-position-copy { grid-column: 1 / -1; }
    .template-position-zoom { grid-column: 1 / -1; justify-self: end; }
    .template-position-toolbar .btn { width: 100%; min-height: 44px; padding-inline: 8px; font-size: 10px; }
    .template-dialog-footer { display: none; }
    .catalog-image-modal { padding: 9px; }
    .catalog-image-dialog { max-height: calc(100vh - 18px); padding: 13px; border-radius: 15px; }
    .catalog-image-dialog-head { align-items: center; }
    .image-palette-toggle { min-height: 44px; padding: 6px 8px 6px 10px; }
    .catalog-image-canvas { min-height: 210px; }
    .catalog-image-help { display: none; }
    .catalog-image-modal-actions,
    .catalog-image-modal-actions.has-mirror { grid-template-columns: 1fr 1fr; }
    .catalog-image-upload-form { grid-column: 1 / -1; }
    .catalog-image-modal-actions form, .catalog-image-modal-actions .btn { width: 100%; }
    .image-yarn-marker { width: 34px; height: 34px; }
    .image-marker-callout { min-width: 132px; max-width: 180px; }
    .catalog-image-modal .image-marker-legend { flex-wrap: nowrap; padding: 2px 1px 5px; overflow-x: auto; scrollbar-width: none; }
    .catalog-image-modal .image-marker-legend::-webkit-scrollbar { display: none; }
    .catalog-image-modal .image-yarn-legend-item { flex: 0 0 auto; }
    .yarn-quick-modal { place-items: center; padding: 18px 14px; }
    .yarn-quick-dialog { width: min(430px, 100%); max-height: calc(100vh - 36px); max-height: calc(100dvh - 36px); padding: 25px 18px 18px; overflow-y: auto; border-radius: 24px; }
    .yarn-quick-dialog h2 { font-size: 21px; }
    .yarn-quick-counter { grid-template-columns: 68px 105px 68px; gap: 11px; margin-top: 22px; }
    .yarn-quick-counter > button { width: 68px; height: 68px; }
    .yarn-quick-counter input { width: 105px; }
    .yarn-quick-actions { width: calc(100% + 36px); margin: 19px -18px -18px; padding: 12px 18px 14px; border-radius: 0 0 24px 24px; }
    .recipe-editor-modal { padding: 0; }
    .recipe-editor-dialog { width: 100%; height: 100vh; border-radius: 0; }
    .recipe-editor-head { grid-template-columns: 48px minmax(0, 1fr) auto; padding: 11px 12px; }
    .recipe-product-preview { width: 48px; height: 48px; border-radius: 10px; }
    .recipe-editor-head h2 { font-size: 17px; }
    .recipe-editor-content { display: block; padding: 9px; }
    .recipe-editor-section + .recipe-editor-section { margin-top: 9px; }
    .recipe-map-toolbar { align-items: stretch; flex-direction: column; }
    .recipe-zoom-controls { justify-content: flex-end; }
    .recipe-map-viewport { height: 300px; }
    .recipe-map-help { display: grid; grid-template-columns: 1fr 1fr; }
    .recipe-yarn-suggestions { grid-template-columns: 1fr; max-height: 360px; }
    .recipe-yarn-list { grid-template-columns: 1fr; }
    .recipe-yarn-tile { min-height: 80px; grid-template-columns: 33px minmax(0, 1fr) auto 18px; padding: 10px; }
    .recipe-yarn-cost { display: grid; }
    .recipe-material-row { grid-template-columns: 30px minmax(0, 1fr) 105px; }
    .recipe-material-cost { grid-column: 2 / -1; text-align: left; }
    .recipe-editor-footer { display: block; padding: 9px; }
    .recipe-totals { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 5px; }
    .recipe-totals > span { min-width: 0; padding: 7px; }
    .recipe-footer-actions { margin-top: 8px; }
    .recipe-footer-actions .btn { flex: 1; }
    .recipe-point-picker { align-items: end; padding: 9px; }
    .recipe-point-picker-dialog { width: 100%; max-height: min(720px, calc(100dvh - 18px)); padding: 14px; border-radius: 18px; }
    .recipe-point-picker-dialog h3 { font-size: 18px; }
    .recipe-point-picker-results { grid-template-columns: 1fr; max-height: min(470px, 55dvh); }
    .recipe-quantity-modal { align-items: end; padding: 9px; }
    .recipe-quantity-dialog { width: 100%; padding: 16px; border-radius: 20px; }
    .recipe-quantity-counter { grid-template-columns: 60px minmax(80px, 1fr) 60px; }
    .recipe-quantity-counter > button { width: 60px; height: 60px; }
    .recipe-editor-trigger { align-items: flex-start; }
    .recipe-editor-trigger em { max-width: 95px; white-space: normal; text-align: right; }
    .employee-toolbar { display: block; }
    .employee-create { margin-top: 13px; }
    .employee-create-form { position: static; width: 100%; max-height: none; margin-top: 8px; padding: 15px; box-shadow: 0 8px 25px rgba(20,35,59,.12); }
    .employee-grid { grid-template-columns: 1fr; }
    .employee-card { padding: 15px; }
    .employee-card-head { grid-template-columns: auto minmax(0, 1fr); }
    .employee-card-head .employee-status { grid-column: 1 / -1; width: fit-content; }
    .employee-profile-hero { grid-template-columns: auto 1fr; padding: 15px; }
    .employee-avatar-hero { width: 66px; height: 66px; }
    .employee-profile-hero h2 { font-size: 21px; }
    .employee-hero-stats { grid-column: 1 / -1; grid-template-columns: 1fr; }
    .employee-hero-stats span { display: flex; align-items: center; justify-content: space-between; }
    .employee-hero-stats strong { margin: 0; }
    .employee-detail-layout { grid-template-columns: minmax(0, 1fr); }
    .employee-editor { position: static; min-width: 0; }
    .employee-records { min-width: 0; }
    .form-grid { grid-template-columns: 1fr; }
    .employee-section { padding: 14px; }
    .monthly-earnings article { grid-template-columns: 68px 1fr auto; gap: 7px; }
    .employee-request-list article { grid-template-columns: 27px minmax(0, 1fr) auto; }
    .employee-request-status { grid-column: 2 / -1; width: fit-content; }
}

@media (hover: none) {
    .catalog-image-action { opacity: .92; transform: translate(-50%, 0); }
}

@media (prefers-reduced-motion: reduce) {
    .main-content { transition: none; }
    .order-search-expanded, .order-filter-panel { animation: none !important; }
    .orders-list[aria-busy="true"] { transition: none; }
}

@media (max-width: 760px) {
    input:not([type]),
    input[type="text"],
    input[type="search"],
    input[type="email"],
    input[type="password"],
    input[type="tel"],
    input[type="url"],
    input[type="number"],
    input[type="date"],
    input[type="time"],
    input[type="datetime-local"],
    input[type="month"],
    input[type="week"],
    select,
    textarea,
    [contenteditable="true"] { font-size: 16px !important; }
}

/* Card palette, design history and reversible record management */
.card-tool-button { flex: 0 0 42px; color: #5f718b; background: #fff; }
.card-tool-button:hover, .card-tool-button:focus-visible { color: #2f6fed; border-color: #9cbcf4; background: #f3f7ff; }
.card-detail-toolbar { display: flex; flex-wrap: wrap; gap: 7px; margin: -2px 0 12px; padding-bottom: 11px; border-bottom: 1px solid #e3e9f1; }
.card-detail-action { min-height: 36px; display: inline-flex; align-items: center; gap: 7px; padding: 7px 10px; border: 1px solid #dce4ef; border-radius: 10px; color: #536681; background: #fff; cursor: pointer; font: inherit; text-align: left; }
.card-detail-action:hover, .card-detail-action:focus-visible { color: #245fc7; border-color: #a8c2ee; background: #f2f7ff; outline: none; }
.card-detail-action span { width: 19px; height: 19px; display: grid; place-items: center; border-radius: 6px; color: #3c68a9; background: #eaf2ff; font-size: 10px; }
.card-detail-action span .material-symbols-rounded { font-size: 14px; }
.card-detail-action b { font-size: 10px; font-weight: 800; }
.catalog-history-button { margin-left: auto; padding: 5px 8px; border: 1px solid #dce4ef; border-radius: 8px; color: #6d7d93; background: #f8fafc; font: inherit; font-size: 10px; font-weight: 800; cursor: pointer; }
.catalog-history-button { display: inline-flex; align-items: center; gap: 4px; }
.catalog-history-button .material-symbols-rounded { font-size: 15px; }
.catalog-history-button:hover, .catalog-history-button:focus-visible { color: #2f6fed; border-color: #9cbcf4; outline: none; }

.entity-manage-menu { position: relative; flex: 0 0 auto; }
.entity-manage-menu > summary { display: grid; place-items: center; list-style: none; cursor: pointer; }
.entity-manage-menu > summary::-webkit-details-marker { display: none; }
.entity-manage-menu[open] > summary { color: #2f6fed; border-color: #9cbcf4; background: #f3f7ff; }
.entity-manage-menu > div { position: absolute; z-index: 45; right: 0; bottom: calc(100% + 7px); width: 160px; overflow: hidden; padding: 5px; border: 1px solid #dce4ef; border-radius: 11px; background: #fff; box-shadow: 0 14px 38px rgba(20,35,59,.2); }
.entity-manage-menu form { margin: 0; }
.entity-manage-menu button { width: 100%; padding: 9px 10px; border: 0; border-radius: 8px; color: #2f405b; background: transparent; font: inherit; font-size: 11px; font-weight: 750; text-align: left; cursor: pointer; }
.entity-manage-menu button:hover { background: #eef3fa; }
.entity-manage-menu button:disabled { color: #9aa5b4; background: transparent; cursor: not-allowed; }
.entity-manage-menu button.danger { color: #ba3348; }
.entity-manage-menu button.danger:hover { background: #fff0f2; }
.card-admin-menu > summary { width: 27px; height: 27px; min-height: 27px; border-radius: 8px; font-size: 14px; }
.card-admin-menu > div { top: calc(100% + 7px); bottom: auto; }
.order-dossier-manage > div { top: calc(100% + 7px); bottom: auto; }
.order-product-tools { display: flex; align-items: center; gap: 8px; }
.order-product-tools .entity-manage-menu > div { top: calc(100% + 7px); bottom: auto; }
.order-row-wrap { position: relative; }
.order-row-wrap .order-row { padding-right: 58px; }
.order-manage-menu { position: absolute; z-index: 4; right: 12px; top: 50%; transform: translateY(-50%); }
.orders-list.is-grid .order-row-wrap .order-row { padding-right: 14px; }
.orders-list.is-grid .order-manage-menu { top: 182px; transform: none; }
.orders-list.is-grid .order-row-main { padding-right: 36px; }
.orders-list.is-grid .empty-state-panel { grid-column: 1 / -1; }
.order-manage-menu > div { top: calc(100% + 7px); bottom: auto; }
.order-row-wrap.is-archived, .order-product-card.is-archived { opacity: .82; }
.order-row-wrap.is-trash, .order-product-card.is-trash { opacity: .68; }
.record-state-badge { display: inline-flex; margin-top: 5px; padding: 3px 7px; border-radius: 999px; color: #667791; background: #e9eef5; font-size: 9px; font-weight: 850; text-transform: uppercase; letter-spacing: .05em; }
.record-state-badge.danger { color: #aa3044; background: #ffe9ed; }

.recipe-editor-modal.is-card-scope .recipe-material-editor { display: none; }
.recipe-editor-modal.is-card-scope .recipe-editor-dialog { width: min(1120px, 100%); height: min(760px, calc(100dvh - 32px)); background: #fff; }
.recipe-editor-modal.is-card-scope .recipe-editor-head { min-height: 68px; grid-template-columns: 46px minmax(0, 1fr) auto; gap: 11px; padding: 10px 14px; }
.recipe-editor-modal.is-card-scope .recipe-product-preview { width: 46px; height: 46px; border-radius: 11px; }
.recipe-editor-modal.is-card-scope .recipe-editor-eyebrow { display: none; }
.recipe-editor-modal.is-card-scope .recipe-editor-head h2 { margin: 0 0 3px; font-size: 19px; }
.recipe-editor-modal.is-card-scope .recipe-product-subtitle { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.recipe-editor-modal.is-card-scope .recipe-editor-content { min-height: 0; display: grid; grid-template-columns: minmax(0, 1.48fr) minmax(320px, .72fr); grid-template-rows: minmax(0, 1fr); gap: 0; overflow: hidden; padding: 0; background: #fff; }
.recipe-editor-modal.is-card-scope .recipe-editor-section { min-height: 0; padding: 14px; border: 0; border-radius: 0; box-shadow: none; }
.recipe-editor-modal.is-card-scope .recipe-map-editor { grid-column: 1; grid-row: 1; display: grid; grid-template-rows: auto auto minmax(0, 1fr); border-right: 1px solid #e3e8ef; }
.recipe-editor-modal.is-card-scope .recipe-yarn-editor { grid-column: 2; grid-row: 1; display: flex; flex-direction: column; overflow: hidden; background: #f8fafc; }
.recipe-editor-modal.is-card-scope .recipe-section-head { align-items: center; margin-bottom: 10px; }
.recipe-editor-modal.is-card-scope .recipe-section-head > div { align-items: center; }
.recipe-editor-modal.is-card-scope .recipe-step,
.recipe-editor-modal.is-card-scope .recipe-section-head p,
.recipe-editor-modal.is-card-scope .recipe-map-help { display: none; }
.recipe-editor-modal.is-card-scope .recipe-section-head h3 { margin: 0; font-size: 15px; }
.recipe-editor-modal.is-card-scope .recipe-section-count { padding: 5px 7px; border-radius: 7px; background: #edf3fc; }
.recipe-editor-modal.is-card-scope .recipe-map-toolbar { min-width: 0; margin-bottom: 9px; }
.recipe-editor-modal.is-card-scope .recipe-active-yarn { min-height: 38px; max-width: min(430px, 58%); padding: 6px 9px; border-color: #dbe3ed; background: #f8fafc; }
.recipe-editor-modal.is-card-scope .recipe-active-yarn > i { width: 23px; height: 23px; }
.recipe-editor-modal.is-card-scope .recipe-active-yarn small { display: none; }
.recipe-editor-modal.is-card-scope .recipe-active-yarn b { font-size: 9px; }
.recipe-editor-modal.is-card-scope .recipe-map-viewport { height: auto; min-height: 0; border-radius: 14px; }
.recipe-editor-modal.is-card-scope .recipe-yarn-picker { margin-bottom: 9px; }
.recipe-editor-modal.is-card-scope .recipe-yarn-picker input { min-height: 44px; border-radius: 12px; background: #fff; }
.recipe-editor-modal.is-card-scope .recipe-yarn-suggestions { grid-template-columns: 1fr; max-height: 430px; }
.recipe-editor-modal.is-card-scope .recipe-yarn-list { min-height: 0; display: grid; grid-template-columns: 1fr; align-content: start; gap: 6px; overflow-y: auto; overscroll-behavior: contain; padding-right: 2px; }
.recipe-editor-modal.is-card-scope .recipe-yarn-tile { min-height: 62px; grid-template-columns: 32px minmax(0, 1fr) auto 17px; gap: 8px; padding: 8px 9px; border-radius: 11px; background: #fff; }
.recipe-editor-modal.is-card-scope .recipe-yarn-tile .recipe-yarn-swatch { width: 31px; height: 31px; }
.recipe-editor-modal.is-card-scope .recipe-yarn-info small,
.recipe-editor-modal.is-card-scope .recipe-yarn-cost { display: none; }
.recipe-editor-modal.is-card-scope .recipe-yarn-tile-values { min-width: 48px; gap: 0; }
.recipe-editor-modal.is-card-scope .recipe-yarn-empty { padding: 22px 12px; background: #fff; }
.recipe-editor-modal.is-card-scope .recipe-editor-footer { min-height: 68px; gap: 12px; padding: 10px 14px; }
.recipe-editor-modal.is-card-scope .recipe-totals { display: none; }
.recipe-editor-modal.is-card-scope .recipe-card-footer-summary { min-width: 0; display: grid; gap: 2px; }
.recipe-editor-modal.is-card-scope .recipe-card-footer-summary small { color: #7b899d; font-size: 8px; font-weight: 750; }
.recipe-editor-modal.is-card-scope .recipe-card-footer-summary b { color: #2c415e; font-size: 12px; }
.recipe-editor-modal.is-card-scope .recipe-card-footer-summary em { color: #245fc7; font-style: normal; }
.recipe-editor-modal.is-card-scope .recipe-footer-actions { margin-left: auto; }
.recipe-editor-modal.is-card-scope .recipe-footer-actions .close-recipe-editor { display: none; }
.recipe-editor-modal.is-card-scope .save-recipe-button { min-width: 190px; min-height: 44px; }

/* Full card workspace */
.work-card.has-open-modal,
.work-card:has(.card-modal:not([hidden])) { overflow: visible; z-index: 60; }
.card-modal { position: fixed; z-index: 90; inset: 0; display: grid; place-items: center; padding: 16px; cursor: default; user-select: text; -webkit-user-select: text; }
.card-modal[hidden] { display: none; }
.card-modal-backdrop { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; background: rgba(12,22,38,.66); cursor: default; backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px); }
.card-modal-dialog { position: relative; z-index: 1; width: min(1240px, calc(100vw - 32px)); height: min(880px, calc(100dvh - 32px)); max-height: calc(100vh - 32px); display: grid; grid-template-rows: auto minmax(0, 1fr); overflow: hidden; border: 1px solid rgba(255,255,255,.7); border-radius: 22px; color: var(--ink); background: #fff; box-shadow: 0 34px 100px rgba(3,12,26,.38); }
.card-modal-header { min-height: 72px; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 14px 22px; border-bottom: 1px solid #e7ebf1; background: rgba(255,255,255,.97); }
.card-modal-order { min-width: 0; display: flex; align-items: center; flex-wrap: wrap; gap: 10px; color: #6f7c90; font-size: 15px; font-weight: 800; }
.card-modal-order > a { max-width: min(300px, 42vw); overflow: hidden; border-radius: 6px; color: #26364d; text-overflow: ellipsis; white-space: nowrap; }
.card-modal-order > a:first-child { color: #8793a5; }
.card-modal-order > a:hover, .card-modal-order > a:focus-visible { color: #245fc7; background: #edf4ff; outline: 3px solid #edf4ff; }
.card-modal-order > span[aria-hidden] { width: 1px; height: 24px; background: #d8dee7; }
.card-modal-order .badge-row { margin-left: 4px; }
.card-modal-header > .icon-btn { flex: 0 0 40px; width: 40px; height: 40px; border-color: transparent; color: #8290a4; background: transparent; font-size: 23px; }
.card-modal-header > .icon-btn:hover, .card-modal-header > .icon-btn:focus-visible { color: #293d5a; border-color: #d9e1eb; background: #f1f4f8; outline: none; }
.card-modal-layout { min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 365px); }
.card-modal-main, .card-modal-sidebar { min-width: 0; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable; }
.card-modal-main { padding: 30px 34px 42px; background: #fff; }
.card-modal-sidebar { padding: 25px 23px 34px; border-left: 1px solid #e7ebf1; background: #fafbfd; }
.card-modal-intro h2 { margin: 0; font-size: clamp(25px, 3vw, 34px); line-height: 1.12; letter-spacing: -.035em; }
.card-modal-dates { display: flex; align-items: center; flex-wrap: wrap; gap: 9px 19px; margin-top: 13px; color: #748196; font-size: 13px; }
.card-modal-dates span { display: inline-flex; align-items: center; gap: 6px; }
.card-modal-dates .material-symbols-rounded { font-size: 18px; }
.card-modal-dates .is-active { color: #208a5e; }
.card-modal-media { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 27px; }
.card-modal-media-item { position: relative; min-width: 0; aspect-ratio: 16 / 10; display: grid; place-items: center; overflow: hidden; padding: 0; border: 1px solid #e3e7ed; border-radius: 15px; color: #8995a7; background: #f1f3f6; text-align: center; }
.card-modal-media-item.template-preview-trigger { border: 1px solid #e3e7ed; border-radius: 15px; background: #f1f3f6; }
.card-modal-media-item img { width: 100%; height: 100%; object-fit: contain; background: #f1f3f6; }
.card-modal-media-item em { position: absolute; z-index: 2; left: 12px; top: 12px; max-width: calc(100% - 52px); padding: 7px 10px; overflow: hidden; border-radius: 8px; color: #334158; background: rgba(255,255,255,.94); box-shadow: 0 4px 13px rgba(20,35,59,.13); font-size: 9px; font-style: normal; font-weight: 850; letter-spacing: .06em; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
.card-modal-media-item > .material-symbols-rounded { position: absolute; z-index: 2; right: 12px; top: 12px; width: 31px; height: 31px; display: grid; place-items: center; border-radius: 9px; color: #2e62bb; background: rgba(255,255,255,.94); box-shadow: 0 4px 13px rgba(20,35,59,.13); font-size: 18px; }
.card-modal-media-item.is-stage { grid-column: 1 / -1; aspect-ratio: 16 / 6; }
.card-modal-media-item.is-empty span { padding: 30px 15px 10px; font-size: 12px; font-weight: 700; }
.card-modal-media-item:hover img, .card-modal-media-item:focus-visible img { transform: scale(1.018); }
.card-modal-media-item:focus-visible { border-color: #82a8ef; outline: 3px solid rgba(47,111,237,.18); outline-offset: 2px; }
.card-modal-description, .card-modal-comments { margin-top: 28px; padding-top: 26px; border-top: 1px solid #e9edf2; }
.card-modal-description > h3, .card-modal-comments > h3, .card-modal-sidebar h3 { margin: 0 0 14px; color: #182238; font-size: 12px; font-weight: 900; letter-spacing: .075em; text-transform: uppercase; }
.card-modal-description > div { padding: 15px 17px; border: 1px solid #e4e8ee; border-radius: 13px; background: #f8f9fb; }
.card-modal-description p { margin: 0; color: #3d4b60; font-size: 13px; line-height: 1.55; }
.card-modal-description p + dl { margin-top: 13px; padding-top: 13px; border-top: 1px solid #e2e7ee; }
.card-modal-description dl { display: grid; gap: 8px; margin: 0; }
.card-modal-description dl > div { display: grid; grid-template-columns: minmax(100px, .34fr) minmax(0, 1fr); gap: 12px; }
.card-modal-description dt { color: #7f8b9d; font-size: 10px; font-weight: 800; }
.card-modal-description dd { min-width: 0; margin: 0; color: #34445a; font-size: 12px; overflow-wrap: anywhere; }
.card-modal-comments > h3 { display: flex; align-items: center; gap: 7px; }
.card-modal-comments > h3 .material-symbols-rounded { color: #536883; font-size: 18px; }
.card-modal-comment-form { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 8px 11px; margin: 0; }
.card-modal-comment-form > .avatar { width: 36px; height: 36px; color: #315fb6; background: #dceaff; font-size: 13px; }
.card-modal-comment-form > div { position: relative; min-width: 0; }
.card-modal-comment-form textarea { min-height: 70px; padding: 12px 48px 12px 13px; border-color: #dce3ed; border-radius: 13px; background: #fbfcfe; font-size: 13px; line-height: 1.45; }
.card-modal-comment-form > div > button { position: absolute; right: 8px; bottom: 8px; width: 34px; height: 34px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 10px; color: #fff; background: #6794ec; cursor: pointer; font-size: 18px; }
.card-modal-comment-form > div > button:hover, .card-modal-comment-form > div > button:focus-visible { background: #2f6fed; outline: 3px solid rgba(47,111,237,.18); outline-offset: 2px; }
.card-modal-comment-form > select, .card-modal-comment-form > .check { grid-column: 2; }
.card-modal-comment-form > select { min-height: 36px; padding-block: 7px; font-size: 11px; }
.card-modal-comment-form > .check { margin-top: -2px; }
.card-modal-comment-list { display: grid; gap: 10px; margin-top: 19px; }
.card-modal-comment-list .comment { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 11px; margin: 0; padding: 12px; border-color: #e2e7ee; border-radius: 13px; background: #fff; }
.card-modal-comment-list .comment.pinned { border-color: #bcd3fb; background: #f4f8ff; box-shadow: inset 3px 0 0 #6695ef; }
.card-modal-comment-list .comment.permanent { border-color: #eedb9e; background: #fffaf0; }
.card-modal-comment-list .comment.pinned.permanent { border-color: #bcd3fb; background: linear-gradient(90deg, #f4f8ff, #fffaf0); }
.card-modal-comment-list .comment > .avatar { width: 36px; height: 36px; color: #315fb6; background: #dceaff; font-size: 13px; }
.card-modal-comment-list .comment > div { min-width: 0; display: block; }
.card-modal-comment-list .comment header { display: flex; align-items: center; flex-wrap: wrap; gap: 5px 9px; }
.card-modal-comment-list .comment header b { color: #25344a; font-size: 12px; }
.card-modal-comment-list .comment header time { color: #8a96a7; font-size: 10px; }
.card-modal-comment-list .comment p { margin: 7px 0 0; color: #35445a; font-size: 12px; line-height: 1.5; overflow-wrap: anywhere; }
.card-modal-comment-list .comment small { font-size: 9px; }
.comment-pin-form { margin: 0 0 0 auto; }
.comment-pin-form button { width: 29px; height: 29px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 8px; color: #8a96a8; background: #f0f3f7; cursor: pointer; font-size: 16px; transform: rotate(24deg); }
.comment.pinned .comment-pin-form button { color: #fff; background: #2f6fed; }
.comment-pin-form button:hover, .comment-pin-form button:focus-visible { color: #245fc7; background: #e5efff; outline: 3px solid rgba(47,111,237,.15); }
.comment.pinned .comment-pin-form button:hover, .comment.pinned .comment-pin-form button:focus-visible { color: #fff; background: #245fc7; }
.card-modal-assignment > header { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.card-modal-assignment > header h3 { margin-bottom: 0; }
.card-modal-assignment > header span { max-width: 58%; overflow: hidden; color: #536176; font-size: 12px; font-weight: 750; text-overflow: ellipsis; white-space: nowrap; }
.assignment-avatar-list { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 12px; padding: 10px; border: 1px solid #e0e5ec; border-radius: 13px; background: #fff; box-shadow: 0 4px 14px rgba(20,35,59,.045); }
.assignment-avatar-form { display: flex; margin: 0; }
.assignment-avatar { position: relative; width: 44px; height: 44px; display: grid; place-items: center; padding: 0; border: 2px solid transparent; border-radius: 50%; color: #718096; background: #f0f2f5; cursor: pointer; font: inherit; font-weight: 900; }
.assignment-avatar > .avatar { width: 100%; height: 100%; font-size: 13px; }
.assignment-avatar > img.avatar { display: block; }
.assignment-avatar-core { width: 100%; height: 100%; display: grid; place-items: center; border-radius: 50%; color: #627188; background: #edf1f6; }
.assignment-avatar-core .material-symbols-rounded { font-size: 20px; }
.assignment-queue-avatar { background: #f7f9fc; }
.assignment-avatar:hover:not(:disabled), .assignment-avatar:focus-visible:not(:disabled) { color: #245fc7; border-color: #8fb1ee; background: #edf4ff; outline: none; }
.assignment-avatar.is-selected { color: #245fc7; border-color: #5e94ef; background: #e9f2ff; box-shadow: 0 0 0 3px rgba(47,111,237,.18); }
.assignment-avatar:disabled { cursor: default; opacity: .76; }
.assignment-avatar.is-selected:disabled { opacity: 1; }
.assignment-avatar.is-selected .assignment-avatar-core { color: #245fc7; background: #e8f1ff; }
.assignment-avatar > .material-symbols-rounded { position: absolute; right: -3px; bottom: -2px; width: 18px; height: 18px; border: 2px solid #fff; border-radius: 50%; color: #fff; background: #2f6fed; font-size: 12px; }
.card-modal-quick-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px; margin-top: 27px; }
.card-modal-quick-actions form { min-width: 0; margin: 0; }
.card-modal-quick-actions button { width: 100%; min-height: 112px; display: grid; grid-template-rows: 30px auto; place-items: center; align-content: center; gap: 8px; padding: 14px 10px; border: 1px solid #dfe4eb; border-radius: 15px; color: #46556b; background: #fff; box-shadow: 0 3px 11px rgba(20,35,59,.04); cursor: pointer; font: inherit; font-size: 12px; font-weight: 850; line-height: 1.2; text-align: center; }
.card-modal-quick-actions button .material-symbols-rounded { color: #2f6fed; font-size: 28px; }
.card-modal-quick-actions button:hover, .card-modal-quick-actions button:focus-visible { color: #245fc7; border-color: #8fb1ee; background: #f7faff; outline: 3px solid rgba(47,111,237,.12); outline-offset: 1px; }
.card-modal-quick-actions .priority-toggle-form button .material-symbols-rounded { color: #ee7612; }
.card-modal-quick-actions .priority-toggle-form button.is-active { color: #a64b08; border-color: #f5c68d; background: #fff7ed; }
.card-modal-facts { margin-top: 27px; }
.card-modal-facts dl { overflow: hidden; margin: 0; border: 1px solid #e0e5ec; border-radius: 14px; background: #fff; box-shadow: 0 4px 14px rgba(20,35,59,.04); }
.card-modal-facts dl > div { min-width: 0; display: grid; grid-template-columns: 95px minmax(0, 1fr); gap: 12px; padding: 13px 15px; }
.card-modal-facts dl > div + div { border-top: 1px solid #e8ecf1; }
.card-modal-facts dt { color: #7c8899; font-size: 11px; }
.card-modal-facts dd { min-width: 0; margin: 0; color: #27364c; font-size: 12px; font-weight: 750; overflow-wrap: anywhere; }
.card-modal-facts dd.state-overdue { color: #b42318; }
.card-modal-facts dd.state-today, .card-modal-facts dd.state-soon { color: #9a6700; }
.card-modal-admin-details { margin-top: 18px; padding: 12px; border: 1px solid #e0e5ec; border-radius: 13px; background: #fff; }
.card-modal-admin-details > summary { cursor: pointer; color: #52647d; font-size: 11px; font-weight: 850; }
.card-modal-admin-details > dl { display: grid; gap: 7px; margin: 13px 0; }
.card-modal-admin-details > dl > div { display: grid; grid-template-columns: 58px minmax(0, 1fr); gap: 8px; }
.card-modal-admin-details dt { color: #8a96a7; font-size: 9px; font-weight: 800; text-transform: uppercase; }
.card-modal-admin-details dd { min-width: 0; margin: 0; color: #3a4b62; font-size: 10px; overflow-wrap: anywhere; }
.card-modal-admin-details .deadline-form { grid-template-columns: 1fr; margin-top: 12px; }
.card-modal-admin-details .share-comment-form { grid-template-columns: minmax(0, 1fr) auto; }
.card-modal-admin-details .card-detail-action { width: 100%; margin-top: 12px; }
.card-modal-sidebar > .yarn-consumption-warning { margin: 18px 0 0; }
.card-modal-camera { margin-top: 18px; }
.card-modal-camera .btn { width: 100%; min-height: 44px; }

/* Past work side sheet */
.design-history-modal { position: fixed; z-index: 145; inset: 0; display: flex; align-items: stretch; justify-content: flex-end; padding: 16px; background: rgba(8,16,29,.58); backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px); }
.design-history-modal[hidden] { display: none; }
.design-history-dialog { width: min(430px, 100%); height: 100%; max-height: calc(100vh - 32px); display: grid; grid-template-rows: auto auto minmax(0, 1fr); overflow: hidden; border: 1px solid rgba(255,255,255,.72); border-radius: 19px; background: #f6f8fb; box-shadow: -18px 24px 70px rgba(0,0,0,.3); }
.design-history-dialog > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 19px 18px 16px; border-bottom: 1px solid #e2e7ee; background: #fff; }
.design-history-dialog h2 { margin: 4px 0 2px; font-size: 21px; letter-spacing: -.025em; }
.design-history-subtitle { margin: 0; color: #7a899d; font-size: 11px; }
.design-history-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; padding: 8px 12px; border-bottom: 1px solid #dfe5ed; background: #fff; }
.design-history-tabs button { padding: 8px 11px; border: 0; border-radius: 9px; color: #667791; background: transparent; font: inherit; font-size: 11px; font-weight: 800; cursor: pointer; }
.design-history-tabs button b { display: inline-grid; min-width: 19px; height: 19px; place-items: center; margin-left: 4px; padding: 0 5px; border-radius: 999px; background: #e8eef6; font-size: 9px; }
.design-history-tabs button.active { color: #1f56ae; background: #eaf2ff; }
.design-history-content { position: relative; min-height: 240px; overflow: auto; padding: 13px 14px 20px; overscroll-behavior: contain; scrollbar-gutter: stable; }
.design-history-loading { position: absolute; z-index: 2; inset: 13px; display: grid; place-items: center; border-radius: 14px; color: #687a92; background: rgba(245,247,250,.92); font-size: 12px; font-weight: 750; }
.design-history-loading[hidden] { display: none; }
.design-history-panel { display: none; }
.design-history-panel.active { display: block; }
.design-photo-timeline { display: grid; grid-template-columns: 1fr; gap: 14px; }
.design-photo-timeline article { min-width: 0; overflow: hidden; border: 1px solid #dfe5ed; border-radius: 15px; background: #fff; box-shadow: 0 5px 16px rgba(20,35,59,.055); }
.design-photo-timeline article > a { display: block; aspect-ratio: 16 / 10; overflow: hidden; background: #e9edf3; }
.design-photo-timeline img { width: 100%; height: 100%; display: block; object-fit: cover; transition: transform .18s ease; }
.design-photo-timeline a:hover img { transform: scale(1.025); }
.design-photo-timeline article > div { padding: 12px 13px 13px; }
.design-photo-timeline h3 { margin: 7px 0 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; }
.design-photo-timeline p, .design-photo-timeline small { display: block; margin: 0; color: #718198; font-size: 10px; line-height: 1.5; }
.history-role { display: inline-flex; padding: 3px 6px; border-radius: 999px; color: #275cae; background: #e9f2ff; font-size: 8px; font-weight: 850; text-transform: uppercase; letter-spacing: .04em; }
.history-role.role-tufter { color: #6847ba; background: #f0eaff; }
.history-role.role-processor { color: #08775c; background: #e1f8f0; }
.design-log-timeline { display: grid; gap: 8px; }
.design-log-timeline article { display: grid; grid-template-columns: 12px minmax(0, 1fr); gap: 10px; padding: 11px 13px; border: 1px solid #dfe5ed; border-radius: 12px; background: #fff; }
.design-log-timeline article > i { width: 9px; height: 9px; margin-top: 3px; border: 3px solid #cfe0ff; border-radius: 50%; background: #2f6fed; box-sizing: border-box; }
.design-log-timeline b { font-size: 11px; }
.design-log-timeline p { margin: 3px 0; color: #33465f; font-size: 11px; }
.design-log-timeline small { color: #7b8a9f; font-size: 9px; }
.design-history-empty { grid-column: 1 / -1; padding: 45px 20px; border: 1px dashed #ccd7e5; border-radius: 14px; color: #7a899d; background: #fff; text-align: center; font-size: 12px; }
.design-history-empty.is-error { color: #aa3044; border-color: #f0bdc6; background: #fff6f7; }

@media (max-width: 980px) {
    .card-modal-layout { grid-template-columns: minmax(0, 1fr) 300px; }
    .card-modal-main { padding-inline: 25px; }
    .card-modal-sidebar { padding-inline: 18px; }
    .card-modal-quick-actions button { min-height: 102px; padding-inline: 7px; font-size: 11px; }
}

@media (max-width: 760px) {
    .card-tool-button { flex-basis: 40px; width: 40px; }
    .quick-actions { gap: 5px; }
    .card-detail-toolbar { display: grid; grid-template-columns: 1fr 1fr; }
    .card-detail-action { width: 100%; }
    .entity-manage-menu > div { position: fixed; z-index: 150; right: 12px; bottom: calc(92px + env(safe-area-inset-bottom)); top: auto; width: min(220px, calc(100vw - 24px)); }
    .order-manage-menu { right: 8px; }
    .order-row-wrap .order-row { padding-right: 50px; }
    .recipe-editor-modal.is-card-scope .recipe-editor-dialog { height: 100dvh; max-height: none; }
    .recipe-editor-modal.is-card-scope .recipe-editor-head { min-height: 61px; grid-template-columns: minmax(0, 1fr) 44px; gap: 8px; padding: 8px 10px 8px 13px; }
    .recipe-editor-modal.is-card-scope .recipe-product-preview { display: none; }
    .recipe-editor-modal.is-card-scope .recipe-editor-head h2 { margin-bottom: 2px; font-size: 16px; }
    .recipe-editor-modal.is-card-scope .recipe-product-subtitle { font-size: 8px; }
    .recipe-editor-modal.is-card-scope .recipe-editor-content { display: block; overflow-y: auto; overscroll-behavior: contain; background: #fff; }
    .recipe-editor-modal.is-card-scope .recipe-editor-section { padding: 12px; }
    .recipe-editor-modal.is-card-scope .recipe-editor-section + .recipe-editor-section { margin-top: 0; }
    .recipe-editor-modal.is-card-scope .recipe-map-editor { display: grid; grid-template-rows: auto auto auto; border-right: 0; border-bottom: 1px solid #e3e8ef; }
    .recipe-editor-modal.is-card-scope .recipe-map-toolbar { align-items: center; flex-direction: row; gap: 7px; }
    .recipe-editor-modal.is-card-scope .recipe-active-yarn { min-width: 0; max-width: none; flex: 1 1 auto; }
    .recipe-editor-modal.is-card-scope .recipe-active-yarn b { font-size: 8px; }
    .recipe-editor-modal.is-card-scope .recipe-zoom-controls { flex: 0 0 auto; gap: 4px; }
    .recipe-editor-modal.is-card-scope .recipe-zoom-controls .icon-btn { width: 40px; height: 40px; }
    .recipe-editor-modal.is-card-scope .recipe-zoom-value { min-width: 53px; height: 40px; }
    .recipe-editor-modal.is-card-scope .recipe-zoom-fit { display: none; }
    .recipe-editor-modal.is-card-scope .recipe-map-viewport { height: clamp(250px, 38dvh, 330px); }
    .recipe-editor-modal.is-card-scope .recipe-yarn-editor { display: flex; overflow: visible; background: #f8fafc; }
    .recipe-editor-modal.is-card-scope .recipe-yarn-list { overflow: visible; }
    .recipe-editor-modal.is-card-scope .recipe-editor-footer { min-height: 72px; display: grid; grid-template-columns: minmax(0, .8fr) minmax(160px, 1.2fr); gap: 9px; padding: 9px 10px calc(9px + env(safe-area-inset-bottom)); }
    .recipe-editor-modal.is-card-scope .recipe-footer-actions { width: 100%; margin: 0; }
    .recipe-editor-modal.is-card-scope .save-recipe-button { width: 100%; min-width: 0; min-height: 48px; }
    .card-modal { padding: 0; }
    .card-modal-dialog { width: 100%; height: 100dvh; max-height: none; border: 0; border-radius: 0; }
    .card-modal-header { min-height: 62px; padding: 10px 12px 10px 15px; }
    .card-modal-order { gap: 7px; font-size: 12px; }
    .card-modal-order > a { max-width: min(175px, 54vw); }
    .card-modal-order > span[aria-hidden] { height: 19px; }
    .card-modal-order .badge-row { width: 100%; margin: 0; }
    .card-modal-header > .icon-btn { width: 38px; height: 38px; flex-basis: 38px; }
    .card-modal-layout { display: block; overflow-y: auto; overscroll-behavior: contain; }
    .card-modal-main, .card-modal-sidebar { min-height: auto; overflow: visible; scrollbar-gutter: auto; }
    .card-modal-main { padding: 21px 15px 29px; }
    .card-modal-sidebar { padding: 23px 15px calc(34px + env(safe-area-inset-bottom)); border-top: 1px solid #e4e9f0; border-left: 0; }
    .card-modal-intro h2 { font-size: 25px; }
    .card-modal-dates { gap: 7px 13px; margin-top: 10px; font-size: 11px; }
    .card-modal-media { gap: 9px; margin-top: 21px; }
    .card-modal-media-item, .card-modal-media-item.template-preview-trigger { border-radius: 12px; }
    .card-modal-media-item em { left: 8px; top: 8px; max-width: calc(100% - 42px); padding: 5px 7px; font-size: 7px; }
    .card-modal-media-item > .material-symbols-rounded { right: 8px; top: 8px; width: 27px; height: 27px; font-size: 16px; }
    .card-modal-description, .card-modal-comments { margin-top: 23px; padding-top: 21px; }
    .card-modal-description > h3, .card-modal-comments > h3, .card-modal-sidebar h3 { margin-bottom: 12px; }
    .card-modal-description > div { padding: 13px; }
    .card-modal-comment-list .comment { grid-template-columns: 32px minmax(0, 1fr); padding: 10px; }
    .card-modal-comment-list .comment > .avatar { width: 32px; height: 32px; }
    .card-modal-quick-actions { margin-top: 23px; }
    .card-modal-quick-actions button { min-height: 96px; }
    .card-modal-facts { margin-top: 23px; }
    .design-history-modal { padding: 0; }
    .design-history-dialog { width: 100%; height: 100dvh; max-height: none; border-radius: 0; }
    .design-history-dialog > header { padding: 13px 12px 11px; }
    .design-history-dialog h2 { font-size: 18px; }
    .design-history-content { padding: 9px; }
    .design-photo-timeline { grid-template-columns: 1fr; gap: 10px; }
    .design-photo-timeline article > div { padding: 8px; }
    .design-photo-timeline h3 { font-size: 11px; }
}

@media (max-width: 520px) {
    .card-modal-order > a { max-width: 62vw; }
    .card-modal-order > span[aria-hidden] { display: none; }
    .card-modal-media { grid-template-columns: 1fr; }
    .card-modal-media-item.is-stage { grid-column: auto; aspect-ratio: 16 / 10; }
    .card-modal-description dl > div { grid-template-columns: 1fr; gap: 2px; }
    .card-modal-comment-form { grid-template-columns: 32px minmax(0, 1fr); gap-inline: 8px; }
    .card-modal-comment-form > .avatar { width: 32px; height: 32px; }
    .card-modal-facts dl > div { grid-template-columns: 82px minmax(0, 1fr); }
}

@media (max-width: 420px) {
    .manual-create-section-title { gap: 8px; }
    .manual-selected-count { display: none; }
    .manual-item-fields { grid-template-columns: 1fr; }
    .manual-item-fields .wide { grid-column: auto; }
    .manual-create-actions { gap: 7px; }
    .manual-create-actions .btn { padding-inline: 10px; font-size: 11px; }
    .design-photo-timeline { grid-template-columns: 1fr; }
    .design-photo-timeline article { display: grid; grid-template-columns: 118px minmax(0, 1fr); }
    .design-photo-timeline article > a { aspect-ratio: 1; }
}

@media (hover: none) and (pointer: coarse) {
    .login-input input, .manual-create-search input,
    .manual-create-fields input:not([type="checkbox"]), .manual-create-fields select, .manual-create-fields textarea,
    .manual-item-fields input:not([type="file"]), .manual-item-fields select,
    .card-modal input:not([type="checkbox"]):not([type="file"]), .card-modal select, .card-modal textarea { font-size: 16px; }
}

/* Processor workspace: intentionally scoped so the admin and tufter card layouts stay unchanged. */
.worker-card-timer-summary {
    min-width: 0;
    min-height: 32px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin: 8px 0 7px;
    padding: 6px 9px;
    border: 1px solid #e0e6ef;
    border-radius: 10px;
    color: #66758a;
    background: #f8fafc;
    font-size: 10px;
    font-weight: 750;
}
.worker-card-timer-summary > span { min-width: 0; display: inline-flex; align-items: center; gap: 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.worker-card-timer-summary > span > i { width: 7px; height: 7px; flex: 0 0 7px; border-radius: 50%; background: #8c99aa; box-shadow: 0 0 0 3px #eef1f5; }
.worker-card-timer-summary > strong { flex: 0 0 auto; color: #24344d; font-size: 12px; font-variant-numeric: tabular-nums; letter-spacing: .015em; }
.worker-card-timer-summary.is-active { color: #137052; border-color: #c5e8d9; background: #eefaf5; }
.worker-card-timer-summary.is-active > span > i { background: #1a9b67; box-shadow: 0 0 0 3px #d6f2e7; }
.worker-card-timer-summary.is-active > strong { color: #0f674b; }

.worker-processing-layout {
    min-width: 0;
    min-height: 0;
    display: block;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    background: #f4f6fb;
    scrollbar-gutter: stable;
}
.card-modal-dialog:has(> .worker-processing-layout) { min-width: 0; grid-template-columns: minmax(0, 1fr); }
.card-modal-dialog:has(> .worker-processing-layout) > .card-modal-header { min-width: 0; width: 100%; min-height: 56px; gap: 10px; padding: 6px 10px 6px 14px; }
.card-modal-dialog:has(> .worker-processing-layout) > .card-modal-header > .icon-btn { width: 44px; height: 44px; flex-basis: 44px; }
.worker-card-modal-order { min-width: 0; flex: 1 1 auto; flex-wrap: nowrap; gap: 7px; overflow: hidden; font-size: 11px; }
.worker-card-modal-order > span { flex: 0 0 auto; color: #7e8a9c; }
.worker-card-modal-order > strong { min-width: 0; overflow: hidden; color: #26364d; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.worker-processing-main {
    min-width: 0;
    width: min(760px, 100%);
    min-height: 0;
    margin: 0 auto;
    padding: 10px max(12px, env(safe-area-inset-right)) max(18px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
    overflow: visible;
}

.worker-workbar {
    min-width: 0;
    display: grid;
    gap: 8px;
    margin-bottom: 12px;
    padding: 9px 10px 10px;
    border: 1px solid #dce4ef;
    border-radius: 15px;
    background: rgba(255,255,255,.98);
    box-shadow: 0 5px 18px rgba(20,35,59,.055);
}
.worker-workbar-state,
.worker-workbar-meta {
    min-width: 0;
    min-height: 28px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 0;
    color: #6d7a8e;
    font-size: 10px;
    font-weight: 750;
}
.worker-workbar-meta.has-no-timer { grid-template-columns: minmax(0, 1fr) auto; }
.worker-workbar-state > *,
.worker-workbar-meta > * { min-width: 0; display: inline-flex; align-items: center; gap: 5px; padding: 0 10px; }
.worker-workbar-state > :first-child,
.worker-workbar-meta > :first-child { padding-left: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.worker-workbar-state > :not(:first-child),
.worker-workbar-meta > :not(:first-child) { justify-content: center; border-left: 1px solid #e3e8ef; white-space: nowrap; }
.worker-workbar-state > :last-child,
.worker-workbar-meta > :last-child { padding-right: 0; }
.worker-workbar-state strong,
.worker-workbar-meta strong,
.worker-workbar-timer { color: #1f2c43; font-size: 15px; font-variant-numeric: tabular-nums; letter-spacing: .015em; }
.worker-workbar-status,
.worker-work-state { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.worker-workbar-status::before,
.worker-work-state > i { content: ""; width: 7px; height: 7px; flex: 0 0 7px; border-radius: 50%; background: #8d99aa; box-shadow: 0 0 0 3px #eff2f6; }
.worker-workbar.is-active .worker-workbar-status,
.worker-workbar.is-active .worker-work-state { color: #137052; }
.worker-workbar.is-active .worker-workbar-status::before,
.worker-workbar.is-active .worker-work-state > i { background: #1a9b67; box-shadow: 0 0 0 3px #d9f3e9; }
.worker-workbar-actions {
    min-width: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 7px;
}
.worker-workbar-actions > form { min-width: 0; margin: 0; }
.worker-workbar > form,
.worker-start-form { width: 100%; margin: 0; }
.worker-workbar > form > button,
.worker-start-form > button,
.worker-start-form > .btn { width: 100%; min-height: 48px; }
.worker-workbar-actions button,
.worker-workbar-actions .btn,
.worker-workbar-actions label {
    width: 100%;
    min-height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    border-radius: 11px;
    text-align: center;
    touch-action: manipulation;
}
.worker-workbar-actions .material-symbols-rounded { flex: 0 0 auto; font-size: 20px; }
.worker-workbar-note,
.worker-workbar > small { grid-column: 1 / -1; margin: -1px 1px 0; color: #79869a; font-size: 9px; font-weight: 650; line-height: 1.4; }

.worker-materials { min-width: 0; display: grid; gap: 9px; }
.worker-materials > header,
.worker-materials-heading { min-width: 0; display: flex; align-items: end; justify-content: space-between; gap: 10px; }
.worker-materials > header h2,
.worker-materials > header h3,
.worker-materials-heading h2,
.worker-materials-heading h3 { margin: 0; color: #202d45; font-size: 14px; line-height: 1.25; }
.worker-materials > header p,
.worker-materials > header small,
.worker-materials-heading p,
.worker-materials-heading small { margin: 0; color: #2f6fed; font-size: 10px; font-weight: 750; line-height: 1.35; text-align: right; }
.worker-material-tabs {
    min-width: 0;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 4px;
    padding: 4px;
    overflow: hidden;
    border-radius: 13px;
    background: #eef2f7;
}
.worker-material-tab {
    min-width: 0;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 5px 4px;
    overflow: hidden;
    border: 0;
    border-radius: 10px;
    color: #718096;
    background: transparent;
    cursor: pointer;
    font-size: 10px;
    font-weight: 850;
    line-height: 1.15;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
    touch-action: manipulation;
}
.worker-material-tab:hover { color: #245fc7; background: rgba(255,255,255,.65); }
.worker-material-tab:focus-visible { outline: 3px solid rgba(47,111,237,.24); outline-offset: -1px; }
.worker-material-tab.is-active,
.worker-material-tab.active,
.worker-material-tab[aria-selected="true"] { color: #245fc7; background: #fff; box-shadow: 0 2px 8px rgba(20,35,59,.07); }
.worker-material-pane { min-width: 0; }
.worker-material-pane[hidden] { display: none; }

.worker-material-card,
.worker-example-card {
    min-width: 0;
    overflow: hidden;
    border: 1px solid #e1e7f0;
    border-radius: 15px;
    background: #fff;
    box-shadow: 0 4px 15px rgba(20,35,59,.04);
}
.worker-material-image,
.worker-example-photo {
    position: relative;
    width: 100%;
    min-width: 0;
    aspect-ratio: 16 / 10;
    display: grid;
    place-items: center;
    margin: 0;
    padding: 0;
    overflow: hidden;
    border: 0;
    border-radius: 0;
    color: inherit;
    background: #e9edf3;
    cursor: zoom-in;
    touch-action: manipulation;
}
img.worker-material-image,
.worker-material-image img,
.worker-example-photo img {
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    display: block;
    object-fit: contain;
    transform-origin: center;
    transition: transform .18s ease;
}
.worker-material-image > img,
.worker-example-photo > img { grid-area: 1 / 1; }
.worker-material-pane[data-worker-material-pane="template"] .worker-material-image,
.worker-material-pane[data-worker-material-pane="site"] .worker-material-image,
.worker-material-pane[data-worker-material-pane="tufting"] .worker-material-image,
.worker-material-pane[data-worker-material-pane="examples"] .worker-example-photo {
    --worker-reference-image-gap: clamp(12px, 2.5vw, 18px);
    place-items: center;
    background: #f3f6fa;
}
.worker-material-pane[data-worker-material-pane="template"] .worker-material-image img,
.worker-material-pane[data-worker-material-pane="site"] .worker-material-image img,
.worker-material-pane[data-worker-material-pane="tufting"] .worker-material-image img,
.worker-material-pane[data-worker-material-pane="examples"] .worker-example-photo img {
    width: calc(100% - var(--worker-reference-image-gap) - var(--worker-reference-image-gap));
    height: calc(100% - var(--worker-reference-image-gap) - var(--worker-reference-image-gap));
    min-width: 0;
    min-height: 0;
    max-width: none;
    max-height: none;
    object-fit: contain;
    object-position: center center;
    border-radius: 10px;
}
.worker-material-image > span {
    position: absolute;
    z-index: 2;
    top: 9px;
    right: 9px;
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255,255,255,.78);
    border-radius: 50%;
    color: #25344a;
    background: rgba(255,255,255,.9);
    box-shadow: 0 5px 16px rgba(20,35,59,.13);
    pointer-events: none;
    backdrop-filter: blur(7px);
    -webkit-backdrop-filter: blur(7px);
}
.worker-material-image > span .material-symbols-rounded { font-size: 20px; }
.worker-material-image:hover img,
.worker-example-photo:hover img { transform: scale(1.015); }
.worker-material-card.is-worker-flipped .worker-material-image img,
.worker-material-image.is-worker-flipped img,
.worker-material-image img.is-worker-flipped,
img.worker-material-image.is-worker-flipped { transform: scaleX(-1); }
.worker-material-card.is-worker-flipped .worker-material-image:hover img,
.worker-material-image.is-worker-flipped:hover img { transform: scaleX(-1) scale(1.015); }

.worker-material-copy,
.worker-example-copy { min-width: 0; display: grid; gap: 5px; padding: 11px 12px 12px; }
.worker-material-copy h3,
.worker-material-copy strong,
.worker-example-copy h3,
.worker-example-copy strong { margin: 0; color: #202d45; font-size: 13px; font-weight: 850; line-height: 1.35; }
.worker-material-copy p,
.worker-example-copy p { margin: 0; color: #6f7d92; font-size: 11px; font-weight: 600; line-height: 1.45; }
.worker-material-copy small,
.worker-example-copy small { display: block; color: #8793a4; font-size: 9px; font-weight: 700; line-height: 1.4; }
.worker-material-copy > small { margin-top: 2px; padding-top: 7px; border-top: 1px solid #dce9fb; color: #315fb6; }
.worker-material-reminder {
    min-width: 0;
    display: flex;
    align-items: flex-start;
    gap: 7px;
    margin-top: 3px;
    padding: 9px 10px;
    border: 1px solid #f0d8a8;
    border-radius: 10px;
    color: #725318;
    background: #fff9ea;
    font-size: 10px;
    font-weight: 750;
    line-height: 1.45;
}
.worker-material-reminder .material-symbols-rounded { flex: 0 0 auto; margin-top: 1px; color: #b7791f; font-size: 17px; }

.worker-examples-list { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 11px; }
.worker-examples-list[hidden] { display: none; }
.worker-examples-list > .worker-example-card { width: 100%; }
.worker-material-empty,
.worker-examples-loading,
.worker-examples-empty,
.worker-material-pane [data-worker-examples-status] { margin: 0; padding: 18px 12px; border: 1px dashed #ccd7e5; border-radius: 13px; color: #76859a; background: #fff; font-size: 10px; font-weight: 700; line-height: 1.45; text-align: center; }

.worker-comments { min-width: 0; margin-top: 15px; padding-top: 15px; border-top: 1px solid #e3e9f1; }
.worker-comments-head { min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 11px; }
.worker-comments-title { min-width: 0; display: flex; align-items: center; gap: 8px; }
.worker-comments-title > .material-symbols-rounded { width: 30px; height: 30px; display: grid; flex: 0 0 auto; place-items: center; border-radius: 10px; color: #2f6fed; background: #eaf2ff; font-size: 17px; }
.worker-comments-title > h2,
.worker-comments-title > h3 { margin: 0; color: #1c2940; font-size: 15px; font-weight: 850; letter-spacing: -.015em; text-transform: none; }
.worker-comments-count { min-width: 24px; height: 24px; display: inline-grid; flex: 0 0 auto; place-items: center; padding: 0 7px; border-radius: 999px; color: #5f6f84; background: #eef2f7; font-size: 10px; font-weight: 850; line-height: 1; }
.worker-comments .card-modal-comment-form { grid-template-columns: 38px minmax(0, 1fr); align-items: center; gap: 9px; }
.worker-comments .card-modal-comment-form > .avatar,
.worker-comments .worker-comment-avatar { width: 38px; height: 38px; align-self: center; color: #315fb6; background: #dceaff; font-size: 13px; object-fit: cover; }
.worker-comments .worker-comment-composer { position: relative; min-width: 0; }
.worker-comments .card-modal-comment-form textarea { width: 100%; min-height: 52px; max-height: 126px; display: block; overflow-y: auto; padding: 14px 55px 13px 15px; resize: none; border: 1px solid #dce4ee; border-radius: 18px; color: #25344a; background: #f7f9fc; box-shadow: inset 0 1px 0 rgba(255,255,255,.8); font-size: 14px; line-height: 1.45; field-sizing: content; transition: border-color .18s ease, background .18s ease, box-shadow .18s ease; }
.worker-comments .card-modal-comment-form textarea::placeholder { color: #929dad; }
.worker-comments .card-modal-comment-form textarea:focus { border-color: #82a8ef; outline: 0; background: #fff; box-shadow: 0 0 0 4px rgba(47,111,237,.12); }
.worker-comments .card-modal-comment-form > div > button { right: 4px; bottom: 4px; width: 44px; height: 44px; min-height: 44px; border-radius: 14px; background: #2f6fed; box-shadow: 0 6px 15px rgba(47,111,237,.24); font-size: 20px; touch-action: manipulation; }
.worker-comments .card-modal-comment-form > div > button:hover,
.worker-comments .card-modal-comment-form > div > button:focus-visible { background: #245dcc; box-shadow: 0 6px 17px rgba(47,111,237,.3); }
.worker-comments .card-modal-comment-list { gap: 7px; margin-top: 10px; }
.worker-comments-empty { min-width: 0; display: flex; align-items: center; gap: 8px; margin-left: 47px; padding: 9px 11px; border-radius: 12px; color: #7d899a; background: #f7f9fc; font-size: 11px; font-weight: 650; line-height: 1.35; }
.worker-comments-empty .material-symbols-rounded { flex: 0 0 auto; color: #9ba7b7; font-size: 17px; }
.worker-comments .card-modal-comment-list .comment { grid-template-columns: 32px minmax(0, 1fr); gap: 9px; padding: 10px 11px; border-radius: 15px; background: #f7f9fc; box-shadow: none; }
.worker-comments .card-modal-comment-list .comment.is-own:not(.pinned):not(.permanent) { border-color: #d6e4fb; background: #eef5ff; }
.worker-comments .card-modal-comment-list .comment.pinned { background: #f4f8ff; box-shadow: inset 3px 0 0 #6695ef; }
.worker-comments .card-modal-comment-list .comment.permanent { background: #fffaf0; }
.worker-comments .card-modal-comment-list .comment.pinned.permanent { background: linear-gradient(90deg, #f4f8ff, #fffaf0); }
.worker-comments .card-modal-comment-list .comment > .avatar,
.worker-comments .card-modal-comment-list .worker-comment-avatar { width: 32px; height: 32px; font-size: 11px; object-fit: cover; }
.worker-comments .card-modal-comment-list .comment header { gap: 3px 7px; }
.worker-comments .card-modal-comment-list .comment header b { font-size: 11px; }
.worker-comments .card-modal-comment-list .comment header time { margin-left: auto; font-size: 9px; }
.worker-comments .card-modal-comment-list .comment p { margin-top: 4px; font-size: 11px; line-height: 1.45; }

.worker-assignment { min-width: 0; margin-top: 13px; padding-top: 13px; border-top: 1px solid #e0e6ef; }
.worker-assignment > header { min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 9px; }
.worker-assignment > header h2,
.worker-assignment > header h3 { margin: 0; font-size: 14px; }
.worker-assignment > header > span { min-width: 0; overflow: hidden; color: #617087; font-size: 10px; font-weight: 750; text-overflow: ellipsis; white-space: nowrap; }
.worker-assignment .assignment-avatar-list { min-width: 0; display: flex; align-items: center; gap: 9px; padding: 7px 2px 3px; overflow-x: auto; overscroll-behavior-inline: contain; scroll-snap-type: x proximity; scrollbar-width: none; }
.worker-assignment .assignment-avatar-list::-webkit-scrollbar { display: none; }
.worker-assignment .assignment-avatar-form { flex: 0 0 auto; scroll-snap-align: start; }
.worker-assignment .assignment-avatar { width: 48px; height: 48px; min-width: 48px; min-height: 48px; touch-action: manipulation; }
.worker-assignment-note { margin: -2px 0 4px; color: #7a6742; font-size: 9px; font-weight: 700; line-height: 1.4; }

.work-time-summary { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
.work-time-summary > * { min-width: 0; display: grid; gap: 3px; padding: 11px; border: 1px solid #e0e6ef; border-radius: 13px; background: #fff; }
.work-time-total { grid-template-columns: 36px minmax(0, 1fr); align-items: center; column-gap: 9px; }
.work-time-total > .material-symbols-rounded { width: 36px; height: 36px; grid-row: 1 / span 2; display: grid; place-items: center; border-radius: 11px; color: #245fc7; background: #eaf2ff; font-size: 20px; }
.work-time-total > span { min-width: 0; display: grid; gap: 2px; }
.work-time-total > em { grid-column: 2; color: #7a8799; font-size: 9px; font-style: normal; font-weight: 700; line-height: 1.35; }
.work-time-summary > details { padding: 0; overflow: hidden; }
.work-time-summary > details > summary { min-height: 44px; display: flex; align-items: center; padding: 9px 11px; color: #30425c; cursor: pointer; font-size: 10px; font-weight: 800; touch-action: manipulation; }
.work-time-summary > details[open] > summary { border-bottom: 1px solid #e6eaf0; background: #f8fafc; }
.work-time-summary > details .work-time-lines { margin: 0; padding: 7px; }
.work-time-summary span,
.work-time-summary small { color: #718096; font-size: 9px; font-weight: 700; line-height: 1.35; }
.work-time-summary strong { overflow: hidden; color: #1f2d44; font-size: 18px; font-variant-numeric: tabular-nums; text-overflow: ellipsis; white-space: nowrap; }
.work-time-lines { min-width: 0; display: grid; gap: 6px; margin-top: 10px; }
.work-time-lines > * { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 10px; background: #f6f8fb; }
.work-time-lines > * > :first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.work-time-lines strong,
.work-time-lines time { color: #25344a; font-size: 11px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.work-time-lines small { display: block; margin-top: 2px; color: #7a8799; font-size: 9px; }

.employee-presence {
    width: 100%;
    min-height: 48px;
    display: grid;
    grid-template-columns: 9px minmax(0, 1fr);
    align-items: center;
    gap: 9px;
    padding: 8px 10px;
    border: 1px solid #dfe4eb;
    border-radius: 11px;
    color: #758296;
    background: #f6f8fa;
    font-size: 9px;
    font-weight: 800;
    line-height: 1.25;
}
.employee-presence::before { display: none; }
.employee-presence > i { width: 8px; height: 8px; border-radius: 50%; background: #9aa5b4; }
.employee-presence > span { min-width: 0; display: grid; gap: 2px; }
.employee-presence b,
.employee-presence small,
.employee-presence [data-presence-title],
.employee-presence [data-presence-meta] { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.employee-presence b,
.employee-presence [data-presence-title] { color: #405068; font-size: 10px; }
.employee-presence small,
.employee-presence [data-presence-meta] { color: #7f8b9c; font-size: 8px; }
.employee-presence.online,
.employee-presence.is-online,
.employee-presence[data-presence-state="online"] { color: #126c4f; border-color: #c7e7da; background: #edf9f4; }
.employee-presence.online::before,
.employee-presence.is-online::before,
.employee-presence[data-presence-state="online"]::before { background: #1a9b67; box-shadow: 0 0 0 3px #d8f1e7; }
.employee-presence.online > i,
.employee-presence.is-online > i,
.employee-presence[data-presence-state="online"] > i { background: #1a9b67; box-shadow: 0 0 0 3px #d8f1e7; }
.employee-presence.working,
.employee-presence.is-working,
.employee-presence[data-presence-state="working"],
.employee-presence[data-presence-state^="working-"] { color: #245fc7; border-color: #c9d9fa; background: #edf4ff; }
.employee-presence.working::before,
.employee-presence.is-working::before,
.employee-presence[data-presence-state="working"]::before,
.employee-presence[data-presence-state^="working-"]::before { background: #2f6fed; box-shadow: 0 0 0 3px #dbe7ff; }
.employee-presence.working > i,
.employee-presence.is-working > i,
.employee-presence[data-presence-state="working"] > i,
.employee-presence[data-presence-state^="working-"] > i { background: #2f6fed; box-shadow: 0 0 0 3px #dbe7ff; }
.employee-presence.working b,
.employee-presence.is-working b,
.employee-presence[data-presence-state="working"] [data-presence-title],
.employee-presence[data-presence-state^="working-"] [data-presence-title] { color: #245fc7; }

.template-modal.is-client-flipped .template-canvas img { transform: scaleX(-1); }
.template-client-flip-button { min-width: 44px !important; min-height: 44px !important; touch-action: manipulation; }
.template-client-flip-button[aria-pressed="true"] { color: #245fc7; border-color: #bfd2f6; background: #eaf2ff; box-shadow: inset 0 0 0 1px rgba(47,111,237,.08); }
.template-client-flip-button:focus-visible { outline: 3px solid rgba(47,111,237,.24); outline-offset: 2px; }

@media (min-width: 720px) {
    .worker-processing-main { padding-top: 14px; padding-bottom: max(24px, env(safe-area-inset-bottom)); }
    .worker-workbar { grid-template-columns: minmax(260px, .85fr) minmax(300px, 1.15fr); align-items: center; padding: 10px 11px; }
    .worker-workbar-actions { align-self: stretch; }
    .worker-material-tab { font-size: 11px; }
    .work-time-summary { grid-template-columns: minmax(0, 1fr); align-items: start; }
}

@media (min-width: 761px) {
    .card-modal-dialog:has(> .worker-processing-layout) { width: min(760px, calc(100vw - 32px)); }
}

@media (max-width: 420px) {
    .worker-processing-main { padding-top: 8px; }
    .worker-workbar-state > *,
    .worker-workbar-meta > * { padding-inline: 7px; }
    .worker-workbar-state > :first-child,
    .worker-workbar-meta > :first-child { padding-left: 0; }
    .worker-workbar-state > :last-child,
    .worker-workbar-meta > :last-child { padding-right: 0; }
    .worker-material-tab { font-size: 9px; }
    .worker-material-copy,
    .worker-example-copy { padding: 10px; }
}

@media (max-width: 760px) {
    .worker-processing-layout { background: #f4f6f9; }
    .worker-processing-main {
        padding-right: max(12px, env(safe-area-inset-right));
        padding-bottom: max(22px, env(safe-area-inset-bottom));
        padding-left: max(12px, env(safe-area-inset-left));
    }
    .worker-card-modal-order { font-size: 12px; }
    .worker-card-modal-order > strong { font-size: 15px; }

    .worker-workbar {
        gap: 10px;
        margin-bottom: 16px;
        padding: 12px;
        border-color: #e1e7ef;
        border-radius: 18px;
        background: #fff;
        box-shadow: 0 2px 8px rgba(20,35,59,.055);
    }
    .worker-workbar-state,
    .worker-workbar-meta {
        min-height: 34px;
        color: #68778c;
        font-size: 12px;
    }
    .worker-workbar-state > *,
    .worker-workbar-meta > * { padding-inline: 8px; }
    .worker-workbar-state strong,
    .worker-workbar-meta strong,
    .worker-workbar-timer { font-size: 22px; font-weight: 850; letter-spacing: -.01em; }
    .worker-workbar-meta > span:last-child { font-size: 12px; }
    .worker-workbar > form > button,
    .worker-start-form > button,
    .worker-start-form > .btn,
    .worker-workbar-actions button,
    .worker-workbar-actions .btn,
    .worker-workbar-actions label {
        min-height: 54px;
        border-radius: 14px;
        font-size: 16px;
        font-weight: 800;
    }
    .worker-workbar-note,
    .worker-workbar > small { margin-top: 0; font-size: 12px; }

    .worker-materials { gap: 12px; }
    .worker-materials > header h2,
    .worker-materials > header h3,
    .worker-materials-heading h2,
    .worker-materials-heading h3 { font-size: 18px; }
    .worker-materials > header p,
    .worker-materials > header small,
    .worker-materials-heading p,
    .worker-materials-heading small { font-size: 11px; }
    .worker-material-tabs {
        gap: 3px;
        padding: 4px;
        border-radius: 16px;
        background: #e9eef5;
    }
    .worker-material-tab {
        min-height: 48px;
        border-radius: 12px;
        font-size: 14px;
    }
    .worker-material-card,
    .worker-example-card {
        border-color: #e1e7ef;
        border-radius: 18px;
        box-shadow: 0 2px 8px rgba(20,35,59,.04);
    }
    .worker-material-copy,
    .worker-example-copy { gap: 6px; padding: 14px 16px 15px; }
    .worker-material-copy h3,
    .worker-material-copy strong,
    .worker-example-copy h3,
    .worker-example-copy strong { font-size: 16px; }
    .worker-material-copy p,
    .worker-example-copy p { font-size: 13px; }
    .worker-material-copy small,
    .worker-example-copy small { font-size: 12px; }
    .worker-material-copy > small { margin-top: 3px; padding-top: 9px; }
    .worker-material-empty,
    .worker-examples-loading,
    .worker-examples-empty,
    .worker-material-pane [data-worker-examples-status] { font-size: 12px; }

    .worker-comments {
        margin-top: 16px;
        padding: 14px;
        border: 1px solid #e1e7ef;
        border-radius: 18px;
        background: #fff;
        box-shadow: 0 2px 8px rgba(20,35,59,.04);
    }
    .worker-comments-title > h2,
    .worker-comments-title > h3 { font-size: 18px; }
    .worker-comments-count { font-size: 12px; }
    .worker-comments-empty { font-size: 12px; }
    .worker-comments .card-modal-comment-list .comment header b,
    .worker-comments .card-modal-comment-list .comment p { font-size: 12px; }
    .worker-comments .card-modal-comment-list .comment header time { font-size: 10px; }

    .worker-assignment {
        margin-top: 14px;
        padding: 14px;
        border: 1px solid #e1e7ef;
        border-radius: 18px;
        background: #fff;
        box-shadow: 0 2px 8px rgba(20,35,59,.04);
    }
    .worker-assignment > header h2,
    .worker-assignment > header h3 { font-size: 16px; }
    .worker-assignment > header > span { font-size: 12px; }
    .worker-assignment-note { font-size: 12px; }
}

@media (orientation: landscape) and (max-height: 560px) {
    .worker-processing-main {
        width: min(920px, 100%);
        padding-top: 7px;
        padding-right: max(10px, env(safe-area-inset-right));
        padding-bottom: max(10px, env(safe-area-inset-bottom));
        padding-left: max(10px, env(safe-area-inset-left));
    }
    .worker-workbar { grid-template-columns: minmax(245px, .85fr) minmax(300px, 1.15fr); gap: 8px; margin-bottom: 8px; padding-block: 7px; }
    .worker-materials { gap: 7px; }
    .worker-material-image,
    .worker-example-photo { max-height: calc(100dvh - 170px); aspect-ratio: 16 / 7; }
    .worker-material-image img,
    .worker-example-photo img { object-fit: contain; }
    .worker-comments,
    .worker-assignment { margin-top: 9px; padding-top: 9px; }
    .template-modal:has(.template-client-flip-button:not([hidden])) {
        place-items: stretch;
        padding: max(4px, env(safe-area-inset-top)) max(6px, env(safe-area-inset-right)) max(4px, env(safe-area-inset-bottom)) max(6px, env(safe-area-inset-left));
        background: #fff;
        backdrop-filter: none;
    }
    .template-modal:has(.template-client-flip-button:not([hidden])) .template-dialog {
        width: 100%;
        height: 100%;
        max-height: 100dvh;
        grid-template-rows: auto minmax(0, 1fr);
        gap: 5px;
        padding: 6px;
        border: 0;
        border-radius: 13px;
        box-shadow: none;
    }
    .template-modal:has(.template-client-flip-button:not([hidden])) .template-dialog-head { min-height: 44px; gap: 8px; }
    .template-modal:has(.template-client-flip-button:not([hidden])) .template-dialog-head h2 { margin-top: 1px; font-size: 16px; }
    .template-modal:has(.template-client-flip-button:not([hidden])) .template-dialog-head .eyebrow { font-size: 7px; }
    .template-modal:has(.template-client-flip-button:not([hidden])) .template-dialog-head .close-template { width: 44px; height: 44px; flex-basis: 44px; }
    .template-modal:has(.template-client-flip-button:not([hidden])) .template-editor-workspace { min-height: 0; grid-template-columns: minmax(0, 1fr); gap: 0; overflow: hidden; }
    .template-modal:has(.template-client-flip-button:not([hidden])) .template-preview-panel { min-height: 0; grid-template-rows: minmax(0, 1fr) auto; gap: 5px; overflow: hidden; }
    .template-modal:has(.template-client-flip-button:not([hidden])) .template-canvas { min-height: 0; padding: 6px; border-radius: 11px; scrollbar-gutter: auto; }
    .template-modal:has(.template-client-flip-button:not([hidden])) .template-viewer-toolbar { min-height: 50px; gap: 5px; padding: 3px 5px; border-radius: 11px; }
    .template-modal:has(.template-client-flip-button:not([hidden])) .template-view-controls button { height: 44px; }
    .template-modal:has(.template-client-flip-button:not([hidden])) .template-actions .btn { min-height: 44px; }
    .template-modal:has(.template-client-flip-button:not([hidden])) .template-dialog-footer { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .worker-material-image img,
    .worker-example-photo img { transition: none; }
}