:root {
    --bg: #f3f6f8;
    --surface: #ffffff;
    --surface-soft: #f8fafb;
    --ink: #17212b;
    --muted: #647180;
    --muted-2: #8894a0;
    --line: #dce3e8;
    --line-soft: #e9eef1;
    --primary: #155e75;
    --primary-dark: #104b5d;
    --primary-soft: #e8f3f6;
    --accent: #c46a3a;
    --accent-soft: #fbefe8;
    --success: #16815d;
    --success-soft: #e9f7f1;
    --warning: #ad6500;
    --warning-soft: #fff5df;
    --danger: #be3f3f;
    --danger-soft: #fff0f0;
    --shadow-sm: 0 1px 2px rgba(23, 33, 43, .04), 0 6px 18px rgba(23, 33, 43, .04);
    --shadow-md: 0 18px 50px rgba(23, 33, 43, .14);
    --radius: 14px;
    --radius-sm: 9px;
    --sidebar: 238px;
    --topbar: 72px;
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    color: var(--ink);
    background: var(--bg);
    font-synthesis: none;
}

* { box-sizing: border-box; }
html { min-height: 100%; scroll-behavior: smooth; }
body { min-width: 320px; min-height: 100vh; margin: 0; background: var(--bg); color: var(--ink); font-size: 14px; line-height: 1.5; }
button, input, select, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; text-decoration: none; }
button { color: inherit; }
img { display: block; max-width: 100%; }
h1, h2, h3, h4, p { margin-top: 0; }
h1, h2, h3, h4 { line-height: 1.18; letter-spacing: -.025em; }
h1 { font-size: clamp(28px, 3vw, 42px); }
h2 { font-size: 26px; }
h3 { font-size: 18px; }
.is-hidden { display: none !important; }
.muted { color: var(--muted); }
.muted-2 { color: var(--muted-2); }
.eyebrow { display: inline-flex; align-items: center; gap: 8px; color: #a8d6e0; font-size: 11px; font-weight: 800; letter-spacing: .16em; }
.eyebrow::before { content: ""; width: 22px; height: 2px; background: currentColor; }
.eyebrow--dark { color: var(--primary); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }

:focus-visible { outline: 3px solid rgba(21, 94, 117, .24); outline-offset: 2px; }

.boot-screen { position: fixed; inset: 0; z-index: 1000; display: grid; place-content: center; justify-items: center; gap: 18px; background: #f7f9fa; color: var(--muted); font-weight: 650; }
.boot-screen::after { content: ""; width: 128px; height: 3px; border-radius: 9px; background: linear-gradient(90deg, transparent, var(--primary), transparent); background-size: 200% 100%; animation: loadline 1.15s linear infinite; }
@keyframes loadline { to { background-position: -200% 0; } }

.brand { display: inline-flex; align-items: center; gap: 11px; min-width: 0; }
.brand strong { display: block; font-size: 15px; letter-spacing: .14em; line-height: 1.1; }
.brand span { display: block; color: var(--muted); font-size: 10px; letter-spacing: .04em; white-space: nowrap; }
.brand--light span { color: rgba(255,255,255,.64); }
.brand-mark { display: flex; align-items: flex-end; gap: 3px; width: 30px; height: 34px; padding: 5px; border-radius: 8px; background: var(--primary); transform: skewX(-5deg); box-shadow: inset 0 0 0 1px rgba(255,255,255,.15); }
.brand-mark i { display: block; width: 4px; border-radius: 2px 2px 0 0; background: #fff; opacity: .92; }
.brand-mark i:nth-child(1) { height: 58%; }
.brand-mark i:nth-child(2) { height: 100%; }
.brand-mark i:nth-child(3) { height: 76%; }
.brand-mark i:nth-child(4) { height: 44%; background: #e29a70; }
.brand-mark--large { width: 48px; height: 52px; gap: 4px; padding: 8px; border-radius: 12px; }
.brand-mark--large i { width: 6px; }

.login-screen { min-height: 100vh; display: grid; grid-template-columns: minmax(420px, 1.08fr) minmax(420px, .92fr); background: var(--surface); }
.login-visual { position: relative; overflow: hidden; display: grid; align-items: stretch; min-height: 100vh; color: #fff; background: linear-gradient(145deg, #0e4859, #123b49 52%, #172f39); }
.login-visual::before { content: ""; position: absolute; inset: 0; opacity: .16; background: repeating-linear-gradient(112deg, transparent 0 58px, rgba(255,255,255,.18) 59px, transparent 60px 118px); }
.login-visual::after { content: ""; position: absolute; width: 520px; height: 520px; right: -180px; top: -180px; border: 1px solid rgba(255,255,255,.13); border-radius: 50%; box-shadow: 0 0 0 70px rgba(255,255,255,.025), 0 0 0 150px rgba(255,255,255,.02); }
.login-visual__content { position: relative; z-index: 1; display: flex; flex-direction: column; padding: 52px clamp(42px, 6vw, 94px); }
.login-copy { width: min(600px, 90%); margin: auto 0; }
.login-copy h1 { margin: 24px 0 18px; font-size: clamp(40px, 5vw, 68px); font-weight: 640; letter-spacing: -.055em; }
.login-copy p { width: min(520px, 100%); color: rgba(255,255,255,.7); font-size: 17px; line-height: 1.7; }
.slat-composition { position: absolute; right: -28px; bottom: -68px; display: flex; align-items: flex-end; gap: 13px; opacity: .72; transform: skewY(-7deg); }
.slat-composition b { display: block; width: 58px; height: 260px; border-radius: 5px 5px 0 0; background: linear-gradient(90deg, rgba(255,255,255,.08), rgba(255,255,255,.21), rgba(0,0,0,.07)); box-shadow: inset 1px 0 rgba(255,255,255,.15); }
.slat-composition b:nth-child(2) { height: 320px; }.slat-composition b:nth-child(3) { height: 292px; }.slat-composition b:nth-child(4) { height: 355px; }.slat-composition b:nth-child(5) { height: 300px; }.slat-composition b:nth-child(6) { height: 380px; }
.login-panel { display: grid; place-items: center; padding: 54px; }
.login-card { width: min(420px, 100%); }
.login-card h2 { margin: 14px 0 8px; font-size: 34px; }
.login-card > .muted { margin-bottom: 34px; }
.login-mobile-brand { display: none; }
.login-help { margin: 20px 0 0; color: var(--muted); font-size: 12px; text-align: center; }

.form-field { display: grid; gap: 7px; margin-bottom: 17px; }
.form-field > label, .field-label { color: #35424e; font-size: 12px; font-weight: 720; }
input, select, textarea { width: 100%; min-height: 42px; padding: 9px 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); outline: none; color: var(--ink); background: var(--surface); transition: border-color .16s, box-shadow .16s, background .16s; }
input:hover, select:hover, textarea:hover { border-color: #b9c5cd; }
input:focus, select:focus, textarea:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(21,94,117,.11); }
input:disabled, select:disabled, textarea:disabled { color: var(--muted); background: #f1f4f6; cursor: not-allowed; }
textarea { min-height: 100px; resize: vertical; }
.password-field { position: relative; }
.password-field input { padding-right: 62px; }
.password-field .text-button { position: absolute; top: 50%; right: 10px; transform: translateY(-50%); }
.text-button { padding: 5px; border: 0; color: var(--primary); background: transparent; font-size: 12px; font-weight: 750; cursor: pointer; }
.form-error { margin: 12px 0; padding: 10px 12px; border: 1px solid #efc4c4; border-radius: 8px; color: var(--danger); background: var(--danger-soft); font-size: 13px; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; }
.form-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.form-grid .span-2 { grid-column: span 2; }
.form-grid .span-3 { grid-column: span 3; }
.field-help { color: var(--muted); font-size: 11px; }
.required::after { content: " *"; color: var(--danger); }
.input-suffix { position: relative; }
.input-suffix input { padding-right: 48px; }
.input-suffix > span { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); color: var(--muted); font-size: 12px; pointer-events: none; }
.check-row { display: flex; align-items: flex-start; gap: 9px; min-height: 42px; padding: 9px 0; }
.check-row input { flex: 0 0 auto; width: 18px; min-height: 18px; margin: 1px 0 0; accent-color: var(--primary); }
.check-row label { line-height: 1.35; cursor: pointer; }
.check-row small { display: block; margin-top: 3px; color: var(--muted); }

.button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px; padding: 9px 15px; border: 1px solid var(--line); border-radius: 9px; color: #34434f; background: var(--surface); font-size: 13px; font-weight: 730; cursor: pointer; transition: transform .15s, background .15s, border-color .15s, box-shadow .15s; }
.button:hover { border-color: #b8c5cc; background: #fafcfd; box-shadow: 0 2px 8px rgba(23,33,43,.06); }
.button:active { transform: translateY(1px); }
.button:disabled { opacity: .5; cursor: wait; }
.button--primary { border-color: var(--primary); color: #fff; background: var(--primary); box-shadow: 0 5px 13px rgba(21,94,117,.18); }
.button--primary:hover { border-color: var(--primary-dark); color: #fff; background: var(--primary-dark); }
.button--danger { border-color: #f0cccc; color: var(--danger); background: var(--danger-soft); }
.button--soft { border-color: transparent; color: var(--primary); background: var(--primary-soft); }
.button--production { border-color: #b85c27; color: #fff; background: linear-gradient(135deg, #c76832, #a94b22); box-shadow: 0 5px 13px rgba(169,75,34,.2); }
.button--production:hover { border-color: #93401d; color: #fff; background: #93401d; }
.button--success { border-color: var(--success); color: #fff; background: var(--success); box-shadow: 0 5px 13px rgba(22,129,93,.18); }
.button--success:hover { border-color: #106c4d; color: #fff; background: #106c4d; }
.button--wide { width: 100%; min-height: 46px; }
.button--small { min-height: 32px; padding: 6px 10px; font-size: 12px; }
.icon-button { display: inline-grid; place-items: center; width: 38px; height: 38px; padding: 0; border: 1px solid var(--line); border-radius: 9px; background: var(--surface); cursor: pointer; }
.icon-button:hover { background: var(--surface-soft); }
.action-group { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }

.app-shell { min-height: 100vh; }
.sidebar { position: fixed; inset: 0 auto 0 0; z-index: 40; display: flex; flex-direction: column; width: var(--sidebar); border-right: 1px solid var(--line); background: #fbfcfd; transition: width .2s ease, transform .2s ease; }
.sidebar__head { display: flex; align-items: center; justify-content: space-between; min-height: var(--topbar); padding: 0 15px 0 18px; border-bottom: 1px solid var(--line-soft); }
.sidebar-toggle { width: 28px; height: 28px; color: var(--muted); }
.main-nav { flex: 1; overflow: auto; padding: 20px 11px; }
.nav-label { display: block; margin: 20px 10px 8px; color: #9aa5ae; font-size: 9px; font-weight: 800; letter-spacing: .14em; white-space: nowrap; }
.nav-label:first-child { margin-top: 0; }
.main-nav a { position: relative; display: flex; align-items: center; gap: 11px; min-height: 43px; margin-bottom: 3px; padding: 8px 10px; border-radius: 9px; color: #4c5b67; font-weight: 650; white-space: nowrap; transition: color .15s, background .15s; }
.main-nav a:hover { color: var(--ink); background: #f0f4f6; }
.main-nav a.is-active { color: var(--primary); background: var(--primary-soft); }
.main-nav a.is-active::before { content: ""; position: absolute; left: -11px; width: 3px; height: 22px; border-radius: 0 5px 5px 0; background: var(--primary); }
.nav-icon { display: grid; place-items: center; flex: 0 0 27px; width: 27px; height: 27px; border: 1px solid #d6e0e5; border-radius: 7px; color: #6d7a84; background: rgba(255,255,255,.7); font-size: 10px; font-weight: 850; }
.is-active .nav-icon { border-color: #b9d8e1; color: var(--primary); background: #fff; }
.main-nav a em { margin-left: auto; min-width: 20px; padding: 1px 6px; border-radius: 9px; color: var(--primary); background: #d6eaf0; font-size: 10px; font-style: normal; text-align: center; }
.main-nav a em:empty { display: none; }
.sidebar__footer { padding: 11px; border-top: 1px solid var(--line-soft); }
.user-chip { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px; border: 0; border-radius: 10px; background: transparent; text-align: left; cursor: pointer; }
.user-chip:hover { background: #f0f4f6; }
.avatar, .topbar-avatar { display: grid; place-items: center; flex: 0 0 34px; width: 34px; height: 34px; border: 0; border-radius: 10px; color: #fff; background: linear-gradient(145deg, var(--primary), #277e94); font-size: 12px; font-weight: 820; }
.user-chip__copy { flex: 1; min-width: 0; }
.user-chip__copy strong, .user-chip__copy small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-chip__copy strong { font-size: 12px; }.user-chip__copy small { color: var(--muted); font-size: 10px; }
.workspace { min-height: 100vh; margin-left: var(--sidebar); transition: margin-left .2s ease; }
.topbar { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 16px; min-height: var(--topbar); padding: 10px 26px; border-bottom: 1px solid var(--line); background: rgba(255,255,255,.94); backdrop-filter: blur(12px); }
.topbar__title { display: grid; min-width: 210px; }
.topbar__title span { color: var(--muted); font-size: 10px; }.topbar__title strong { font-size: 16px; }
.global-search { display: flex; align-items: center; gap: 8px; width: min(440px, 34vw); margin-right: auto; padding: 0 11px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface-soft); color: var(--muted); }
.global-search input { min-height: 38px; padding: 6px 0; border: 0; background: transparent; box-shadow: none; }
.global-search kbd { padding: 2px 5px; border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 4px; color: var(--muted-2); background: #fff; font: 9px inherit; white-space: nowrap; }
.mobile-menu, .topbar-avatar { display: none; }
.main-content { width: 100%; max-width: 1640px; margin: 0 auto; padding: 26px; outline: 0; }
.sidebar-scrim { display: none; }
body.sidebar-compact { --sidebar: 76px; }
body.sidebar-compact .brand-copy, body.sidebar-compact .nav-label, body.sidebar-compact .main-nav a > span:not(.nav-icon), body.sidebar-compact .main-nav a em, body.sidebar-compact .user-chip__copy, body.sidebar-compact .user-chip > span:last-child { display: none; }
body.sidebar-compact .sidebar__head { justify-content: center; padding: 0; }
body.sidebar-compact .main-nav a { justify-content: center; padding-inline: 0; }
body.sidebar-compact .user-chip { justify-content: center; padding-inline: 0; }
body.sidebar-compact .sidebar-toggle { display: inline-grid; }

.page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; margin-bottom: 22px; }
.page-head h1 { margin: 0 0 5px; font-size: 25px; }
.page-head p { margin: 0; color: var(--muted); }
.section-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
.section-head h2, .section-head h3 { margin: 0 0 4px; }
.section-head p { margin: 0; color: var(--muted); font-size: 12px; }

.card { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow-sm); }
.card__head { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 16px 18px; border-bottom: 1px solid var(--line-soft); }
.card__head h3 { margin: 0; font-size: 15px; }
.card__body { padding: 18px; }
.card--flat { box-shadow: none; }
.kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; margin-bottom: 18px; }
.kpi-card { position: relative; overflow: hidden; min-height: 122px; padding: 18px; }
.kpi-card::after { content: ""; position: absolute; right: -20px; bottom: -40px; width: 100px; height: 100px; border: 16px solid var(--primary-soft); border-radius: 50%; opacity: .65; }
.kpi-card__top { display: flex; align-items: center; justify-content: space-between; color: var(--muted); font-size: 12px; font-weight: 650; }
.kpi-card__icon { display: grid; place-items: center; width: 29px; height: 29px; border-radius: 8px; color: var(--primary); background: var(--primary-soft); font-size: 11px; font-weight: 850; }
.kpi-card strong { position: relative; z-index: 1; display: block; margin-top: 22px; font-size: 28px; letter-spacing: -.04em; }
.dashboard-grid { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(280px, .7fr); gap: 18px; }
.quick-card { display: flex; flex-direction: column; justify-content: space-between; min-height: 270px; padding: 24px; color: #fff; background: linear-gradient(145deg, var(--primary), #104858); }
.quick-card p { color: rgba(255,255,255,.72); }
.quick-card .button { align-self: flex-start; border-color: rgba(255,255,255,.24); color: var(--ink); background: #fff; }
.mini-bars { display: flex; align-items: end; gap: 5px; height: 60px; opacity: .28; }
.mini-bars i { width: 12px; border-radius: 3px 3px 0 0; background: #fff; }
.mini-bars i:nth-child(1) { height: 28px; }.mini-bars i:nth-child(2) { height: 50px; }.mini-bars i:nth-child(3) { height: 37px; }.mini-bars i:nth-child(4) { height: 60px; }.mini-bars i:nth-child(5) { height: 43px; }

.table-wrap { overflow-x: auto; }
.data-table { width: 100%; border-collapse: collapse; }
.data-table th { padding: 10px 12px; border-bottom: 1px solid var(--line); color: var(--muted); background: #fafcfd; font-size: 10px; font-weight: 790; letter-spacing: .06em; text-align: left; text-transform: uppercase; white-space: nowrap; }
.data-table td { padding: 12px; border-bottom: 1px solid var(--line-soft); vertical-align: middle; }
.data-table tbody tr:last-child td { border-bottom: 0; }
.data-table tbody tr:hover { background: #fbfcfd; }
.cell-title { display: block; font-weight: 720; }.cell-subtitle { display: block; margin-top: 2px; color: var(--muted); font-size: 11px; }
.numeric { font-variant-numeric: tabular-nums; white-space: nowrap; }
.text-right { text-align: right !important; }
.row-actions { display: flex; justify-content: flex-end; gap: 5px; }
.row-actions .icon-button { width: 31px; height: 31px; border-color: transparent; color: var(--muted); background: transparent; font-size: 11px; font-weight: 750; }
.row-actions .icon-button:hover { color: var(--primary); background: var(--primary-soft); }
.row-actions .danger:hover { color: var(--danger); background: var(--danger-soft); }
.status { display: inline-flex; align-items: center; gap: 6px; min-height: 24px; padding: 3px 8px; border-radius: 99px; color: var(--muted); background: #eef2f4; font-size: 10px; font-weight: 760; white-space: nowrap; }
.status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.status--draft { color: #687680; background: #edf1f3; }
.status--completed, .status--final { color: var(--primary); background: var(--primary-soft); }
.status--sent { color: #536db2; background: #eef1ff; }
.status--won, .status--accepted { color: var(--success); background: var(--success-soft); }
.status--lost, .status--rejected { color: var(--danger); background: var(--danger-soft); }
.status--sent_production { color: #a34e1d; background: #fff0e7; }
.status--in_production { color: #6b4ca5; background: #f2ecff; }
.status--production_completed { color: #087858; background: #e4f8f0; }
.status--expired { color: var(--warning); background: var(--warning-soft); }
.badge { display: inline-flex; align-items: center; min-height: 23px; padding: 3px 8px; border-radius: 6px; color: var(--primary); background: var(--primary-soft); font-size: 10px; font-weight: 760; }
.badge--warm { color: var(--accent); background: var(--accent-soft); }
.badge--neutral { color: var(--muted); background: #eef2f4; }
.badge--production { color: #6b4ca5; background: #f2ecff; }

.toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 15px; }
.toolbar .search-box { flex: 1 1 280px; }
.search-box { position: relative; }
.search-box > span { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--muted); }
.search-box input { padding-left: 34px; background: var(--surface); }
.filter-select { width: auto; min-width: 160px; }
.segmented { display: inline-flex; gap: 3px; padding: 3px; border: 1px solid var(--line); border-radius: 10px; background: #eef2f4; }
.segmented button { min-height: 33px; padding: 6px 11px; border: 0; border-radius: 7px; color: var(--muted); background: transparent; font-size: 12px; font-weight: 680; cursor: pointer; }
.segmented button.is-active { color: var(--ink); background: #fff; box-shadow: 0 1px 5px rgba(23,33,43,.1); }

.empty-state { display: grid; place-items: center; min-height: 260px; padding: 36px; text-align: center; }
.empty-state__mark { display: flex; align-items: end; gap: 5px; height: 62px; margin-bottom: 20px; }
.empty-state__mark i { display: block; width: 13px; border-radius: 3px; background: #d8e7ec; }.empty-state__mark i:nth-child(1) { height: 34px; }.empty-state__mark i:nth-child(2) { height: 58px; background: #b8d4dc; }.empty-state__mark i:nth-child(3) { height: 44px; }.empty-state__mark i:nth-child(4) { height: 28px; background: #ecd4c6; }
.empty-state h3 { margin: 0 0 8px; }.empty-state p { max-width: 420px; margin: 0 0 18px; color: var(--muted); }

.quote-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 340px); align-items: start; gap: 18px; min-width: 0; }
.quote-workspace { display: grid; grid-template-columns: minmax(0, 1fr); gap: 15px; min-width: 0; }
.quote-card, .quote-card .card__body, .quote-card .table-wrap, .quote-summary { min-width: 0; max-width: 100%; }
.quote-card .card__head { padding: 14px 17px; }
.step-title { display: flex; align-items: center; gap: 10px; }
.step-number { display: grid; place-items: center; width: 25px; height: 25px; border-radius: 8px; color: var(--primary); background: var(--primary-soft); font-size: 11px; font-weight: 850; }
.client-picker { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 9px; }
.client-combobox { position: relative; min-width: 0; }
.client-combobox .search-box { display: block; }
.client-combobox__results { position: absolute; z-index: 22; left: 0; right: 0; top: calc(100% + 5px); overflow-y: auto; max-height: 285px; padding: 5px; border: 1px solid var(--line); border-radius: 11px; background: #fff; box-shadow: 0 14px 34px rgba(23,33,43,.15); }
.client-combobox__results > button { display: grid; grid-template-columns: 34px minmax(0,1fr); align-items: center; gap: 9px; width: 100%; padding: 9px; border: 0; border-radius: 8px; background: transparent; text-align: left; cursor: pointer; }
.client-combobox__results > button:hover, .client-combobox__results > button:focus { background: var(--primary-soft); outline: none; }
.client-combobox__results > button strong, .client-combobox__results > button small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.client-combobox__results > button small { margin-top: 2px; color: var(--muted); font-size: 11px; }
.client-combobox__results > p { margin: 0; padding: 12px; color: var(--muted); font-size: 12px; text-align: center; }
.selection-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.selection-preview { display: grid; grid-template-columns: 88px 1fr auto; align-items: center; gap: 13px; margin-top: 15px; padding: 12px; border: 1px solid var(--line-soft); border-radius: 11px; background: var(--surface-soft); }
.model-thumb { position: relative; overflow: hidden; display: grid; place-items: center; width: 88px; height: 62px; border-radius: 8px; background: linear-gradient(145deg, #e4eaed, #cbd5da); }
.model-thumb img { width: 100%; height: 100%; object-fit: cover; }
.model-thumb__bars { display: flex; align-items: end; gap: 4px; height: 40px; transform: skewX(-5deg); }
.model-thumb__bars i { width: 8px; height: 34px; border-radius: 2px; background: #788892; box-shadow: inset 1px 0 rgba(255,255,255,.35); }.model-thumb__bars i:nth-child(2), .model-thumb__bars i:nth-child(4) { height: 40px; background: #657680; }
.selection-preview h4 { margin: 0 0 4px; font-size: 14px; }.selection-preview p { margin: 0; color: var(--muted); font-size: 11px; }
.quote-client-preview > .button { justify-self: end; }
.color-dot { display: inline-block; width: 10px; height: 10px; margin-right: 5px; border: 1px solid rgba(0,0,0,.14); border-radius: 50%; vertical-align: -1px; }
.rule-strip { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.rule-chip { padding: 6px 9px; border: 1px solid var(--line); border-radius: 7px; color: var(--muted); background: #fff; font-size: 11px; }
.rule-chip strong { color: var(--ink); }
.quote-mode-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.calculation-settings { margin-top: 14px; padding: 14px; border: 1px dashed #cbd6dc; border-radius: 10px; background: #fbfcfd; }
.calculation-settings summary { color: var(--primary); font-size: 12px; font-weight: 750; cursor: pointer; }
.calculation-settings .form-grid { margin-top: 14px; }
.dimension-note { color: var(--muted); font-size: 10px; }
.segment-table input, .segment-table select { min-width: 84px; min-height: 36px; padding-block: 6px; }
.segment-table .segment-label { min-width: 120px; }
.calculated-cell strong { display: block; }.calculated-cell small { color: var(--muted); }
.manual-section { margin-top: 15px; padding-top: 15px; border-top: 1px solid var(--line-soft); }
.manual-section:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.manual-section__title { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.manual-section__title h4 { margin: 0; font-size: 13px; }

.quote-summary { position: sticky; top: calc(var(--topbar) + 18px); overflow: hidden; }
.quote-summary__hero { padding: 19px; color: #fff; background: linear-gradient(145deg, #144f61, #123e4b); }
.quote-summary__hero span { color: rgba(255,255,255,.65); font-size: 11px; }.quote-summary__hero h3 { margin: 5px 0 0; font-size: 18px; }.quote-summary__hero small { color: rgba(255,255,255,.7); }
.summary-metrics { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 1px; border-bottom: 1px solid var(--line-soft); background: var(--line-soft); }
.summary-metric { padding: 12px 15px; background: #fff; }
.summary-metric--material { grid-column: span 2; color: var(--primary); background: #f2f9fb; }
.summary-metric span { display: block; color: var(--muted); font-size: 10px; }.summary-metric strong { display: block; margin-top: 3px; font-size: 15px; }
.summary-lines { max-height: 250px; overflow: auto; padding: 8px 16px; border-bottom: 1px solid var(--line-soft); }
.summary-line { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px dashed var(--line-soft); font-size: 11px; }.summary-line:last-child { border-bottom: 0; }.summary-line span { color: var(--muted); }.summary-line strong { text-align: right; }
.summary-totals { padding: 14px 17px; }
.total-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; color: var(--muted); font-size: 12px; }.total-row strong { color: var(--ink); }.total-row--grand { margin: 13px -17px -14px; padding: 15px 17px; border-top: 1px solid var(--line); color: var(--ink); background: #fafcfd; font-size: 14px; }.total-row--grand strong { color: var(--primary); font-size: 22px; }
.summary-alerts { display: grid; gap: 7px; padding: 0 17px 14px; }
.summary-alert { padding: 8px 10px; border-radius: 8px; color: var(--warning); background: var(--warning-soft); font-size: 10px; }.summary-alert.error { color: var(--danger); background: var(--danger-soft); }
.summary-actions { display: grid; grid-template-columns: 1fr; gap: 8px; padding: 14px 17px 17px; border-top: 1px solid var(--line-soft); }
.price-pulse { animation: pricePulse .45s ease; }
@keyframes pricePulse { 50% { color: var(--accent); transform: scale(1.025); } }

.catalog-tabs { display: flex; gap: 4px; overflow-x: auto; margin-bottom: 16px; padding: 4px; border: 1px solid var(--line); border-radius: 11px; background: #eaf0f3; }
.catalog-tabs button { flex: 0 0 auto; min-height: 36px; padding: 7px 13px; border: 0; border-radius: 8px; color: var(--muted); background: transparent; font-size: 12px; font-weight: 700; cursor: pointer; }.catalog-tabs button.is-active { color: var(--ink); background: #fff; box-shadow: 0 1px 6px rgba(23,33,43,.09); }
.model-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.model-card { overflow: hidden; }
.model-card__visual { position: relative; height: 150px; background: linear-gradient(145deg, #e8edef, #cbd5d9); }
.model-card__visual img { width: 100%; height: 100%; object-fit: cover; }
.model-card__visual .model-thumb__bars { position: absolute; left: 50%; top: 50%; height: 70px; transform: translate(-50%,-50%) skewX(-5deg) scale(1.4); }
.model-card__body { padding: 15px; }.model-card__body h3 { margin: 0 0 4px; font-size: 16px; }.model-card__body p { min-height: 35px; margin: 8px 0 14px; color: var(--muted); font-size: 11px; }.model-meta { display: flex; flex-wrap: wrap; gap: 6px; }.model-card__footer { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 11px 15px; border-top: 1px solid var(--line-soft); background: #fafcfd; }
.spec-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 14px; }
.spec-list { display: grid; gap: 7px; }
.spec-item { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 10px; border: 1px solid var(--line-soft); border-radius: 8px; background: #fff; }.spec-item.is-inactive { opacity: .5; }.spec-item__title { display: flex; align-items: center; gap: 8px; min-width: 0; }.spec-item__title strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
.dependency-block { margin-top: 14px; padding: 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-soft); }
.dependency-finish { margin-top: 10px; padding: 10px; border: 1px solid var(--line-soft); border-radius: 8px; background: #fff; }
.checkbox-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 6px 12px; margin-top: 8px; }.checkbox-grid .check-row { min-height: 28px; padding: 3px 0; font-size: 11px; }
.price-editor-head { display: grid; grid-template-columns: 170px minmax(180px,1fr); gap: 12px; margin-bottom: 14px; }

.company-lookup-field { display: grid; grid-template-columns: minmax(150px,1fr) auto; gap: 7px; }
.company-lookup-field .button { white-space: nowrap; }

.production-tabs { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; margin-bottom: 17px; padding: 5px; border: 1px solid var(--line); border-radius: 13px; background: #e8edf0; }
.production-tabs button { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 9px 13px; border: 0; border-radius: 9px; color: var(--muted); background: transparent; font-size: 11px; font-weight: 780; cursor: pointer; }
.production-tabs button strong { display: grid; place-items: center; min-width: 24px; height: 24px; padding: 0 6px; border-radius: 12px; color: #6d7a84; background: rgba(255,255,255,.72); font-size: 11px; }
.production-tabs button.is-active { color: var(--primary); background: #fff; box-shadow: 0 2px 8px rgba(23,33,43,.09); }
.production-tabs button.is-active strong { color: #fff; background: var(--primary); }
.production-list { display: grid; gap: 10px; }
.production-card { display: grid; grid-template-columns: 140px minmax(170px,.9fr) minmax(200px,1.25fr) minmax(180px,.8fr) auto; align-items: center; gap: 15px; padding: 15px 17px; }
.production-card__identity { display: grid; }
.production-card__identity .eyebrow { color: var(--primary); font-size: 8px; }
.production-card__identity .eyebrow::before { width: 12px; }
.production-card__identity a { margin: 4px 0 2px; color: var(--primary); font-size: 16px; font-weight: 820; }
.production-card__identity small, .production-card__client span, .production-card__spec span { overflow: hidden; color: var(--muted); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.production-card__client, .production-card__spec { display: grid; min-width: 0; }
.production-card__client strong, .production-card__spec strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.production-card__metrics { display: flex; flex-wrap: wrap; gap: 6px; }
.production-card__metrics span { padding: 5px 7px; border-radius: 7px; color: var(--muted); background: var(--surface-soft); font-size: 10px; white-space: nowrap; }
.production-card__metrics strong { color: var(--ink); font-size: 12px; }
.production-card__action { display: grid; justify-items: end; gap: 7px; }
.production-detail-head { align-items: flex-end; }
.production-detail-head h1 { margin: 12px 0 4px; }
.production-hero { display: grid; grid-template-columns: minmax(220px,.8fr) minmax(480px,1.4fr); align-items: center; gap: 28px; margin-bottom: 16px; padding: 24px; color: #fff; background: linear-gradient(135deg,#123e4b,#155e75); }
.production-hero h2 { margin: 9px 0 4px; font-size: 28px; }
.production-hero p { margin: 0; color: rgba(255,255,255,.68); }
.production-spec-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 1px; overflow: hidden; border: 1px solid rgba(255,255,255,.14); border-radius: 11px; background: rgba(255,255,255,.14); }
.production-spec-grid span { padding: 12px; color: rgba(255,255,255,.6); background: rgba(6,38,48,.45); font-size: 9px; font-weight: 760; letter-spacing: .06em; text-transform: uppercase; }
.production-spec-grid strong { display: block; margin-top: 5px; color: #fff; font-size: 13px; letter-spacing: 0; text-transform: none; }
.production-detail-grid { display: grid; grid-template-columns: minmax(0,1.65fr) minmax(260px,.65fr); align-items: start; gap: 15px; }
.production-sheet { min-width: 0; overflow: hidden; }
.production-sheet--wide { grid-column: 1; }
.production-sheet--full { grid-column: 1 / -1; }
.production-total { color: var(--primary); font-size: 19px; font-weight: 820; }
.production-table td { padding-block: 14px; }
.production-dimension { color: var(--primary); font-size: 16px; }
.production-quantity { font-size: 15px; }
.production-empty { margin: 0; padding: 24px; text-align: center; }
.production-contact { display: grid; gap: 8px; }
.production-contact strong { font-size: 16px; }
.production-contact span { color: var(--muted); }
.production-contact small { margin-top: 8px; padding-top: 10px; border-top: 1px solid var(--line-soft); color: var(--muted); }
.production-screw { display: grid; gap: 5px; }
.production-screw strong { font-size: 15px; }
.production-screw span { color: var(--muted); }
.production-screw b { margin-top: 8px; padding: 11px; border-radius: 8px; color: var(--primary); background: var(--primary-soft); text-align: center; }
.production-notes { display: grid; grid-template-columns: repeat(auto-fit,minmax(260px,1fr)); gap: 14px; }
.production-notes > div { padding: 12px; border-left: 3px solid var(--accent); border-radius: 0 8px 8px 0; background: var(--accent-soft); }
.production-notes strong { color: #8e4825; font-size: 12px; }
.production-notes p { margin: 5px 0 0; white-space: pre-wrap; }
.reinforcement-plans { display: grid; grid-template-columns: repeat(auto-fill,minmax(230px,1fr)); gap: 8px; padding: 15px; }
.reinforcement-plans > div { display: grid; gap: 3px; padding: 11px; border: 1px solid var(--line-soft); border-radius: 9px; background: var(--surface-soft); }
.reinforcement-plans > div strong { color: var(--primary); }
.reinforcement-plans > div span { font-size: 12px; }
.reinforcement-plans > div small { color: var(--muted); }

.modal-layer { position: fixed; inset: 0; z-index: 100; pointer-events: none; }
.modal-layer.is-open { pointer-events: auto; }
.modal-backdrop { position: absolute; inset: 0; background: rgba(14,27,34,.54); backdrop-filter: blur(3px); animation: fadeIn .16s ease; }
.modal { position: absolute; left: 50%; top: 50%; display: flex; flex-direction: column; width: min(680px, calc(100vw - 32px)); max-height: min(860px, calc(100vh - 34px)); overflow: hidden; border-radius: 16px; background: #fff; box-shadow: var(--shadow-md); transform: translate(-50%,-50%); animation: modalIn .2s ease; }
.modal--wide { width: min(940px, calc(100vw - 32px)); }.modal--narrow { width: min(480px, calc(100vw - 32px)); }
.modal > form { display: flex; flex: 1 1 auto; flex-direction: column; min-height: 0; }
.modal__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 17px 20px; border-bottom: 1px solid var(--line); }.modal__head h2 { margin: 0; font-size: 19px; }.modal__close { border-color: transparent; color: var(--muted); }
.modal__head, .modal__footer { flex: 0 0 auto; }
.modal__body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 20px; }.modal__footer { display: flex; justify-content: flex-end; gap: 8px; padding: 13px 20px; border-top: 1px solid var(--line); background: #fafcfd; }
body.modal-open { overflow: hidden; }
@keyframes fadeIn { from { opacity: 0; } } @keyframes modalIn { from { opacity: 0; transform: translate(-50%,-48%) scale(.985); } }
.confirm-copy { padding: 4px 0 8px; color: var(--muted); }.confirm-copy strong { color: var(--ink); }

.toast-stack { position: fixed; z-index: 150; right: 20px; bottom: 20px; display: grid; gap: 8px; width: min(360px, calc(100vw - 40px)); pointer-events: none; }
.toast { display: grid; grid-template-columns: 26px 1fr auto; align-items: center; gap: 10px; padding: 12px 13px; border: 1px solid #d8e5e0; border-radius: 11px; color: #285445; background: #f7fffb; box-shadow: 0 14px 34px rgba(23,33,43,.14); animation: toastIn .25s ease; pointer-events: auto; }.toast--error { border-color: #f0cccc; color: var(--danger); background: #fff8f8; }.toast__icon { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; color: #fff; background: var(--success); font-size: 11px; font-weight: 800; }.toast--error .toast__icon { background: var(--danger); }.toast button { border: 0; color: inherit; background: transparent; cursor: pointer; }
@keyframes toastIn { from { opacity: 0; transform: translateY(10px); } }
.loading-panel { display: grid; place-items: center; min-height: 320px; color: var(--muted); }.spinner { width: 30px; height: 30px; margin-bottom: 12px; border: 3px solid #dce6ea; border-top-color: var(--primary); border-radius: 50%; animation: spin .8s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } }

.settings-grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(320px,.58fr); align-items: start; gap: 18px; }
.note-card { padding: 18px; border: 1px solid #d7e8ed; border-radius: 12px; color: #3e5f6a; background: #f2f9fb; }.note-card h3 { margin-bottom: 7px; color: var(--primary); }.note-card p:last-child { margin-bottom: 0; }
.danger-zone { margin-top: 18px; padding: 16px; border: 1px solid #efd2d2; border-radius: 12px; background: #fff9f9; }
.client-type-switch { margin-bottom: 16px; }
.image-upload-row { display: grid; grid-template-columns: 1fr auto; gap: 8px; }.image-upload-row input[type=file] { padding: 7px; }

@media (max-width: 1280px) and (min-width: 941px) {
    body:not(.sidebar-compact) .quote-layout { display: block; }
    body:not(.sidebar-compact) .quote-summary { position: static; margin-top: 16px; }
}

@media (max-width: 1180px) {
    .topbar__title { min-width: 170px; }
    .selection-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
    .quote-layout { grid-template-columns: minmax(0,1fr) 310px; }
    .model-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .production-card { grid-template-columns: 120px minmax(150px,1fr) minmax(180px,1.2fr) auto; }
    .production-card__metrics { grid-column: 2 / 4; }
    .production-card__action { grid-column: 4; grid-row: 1 / span 2; }
    .production-hero { grid-template-columns: 1fr; gap: 18px; }
}

@media (max-width: 940px) {
    :root { --sidebar: 238px; }
    body.sidebar-compact { --sidebar: 238px; }
    .sidebar { transform: translateX(-100%); box-shadow: var(--shadow-md); }
    body.mobile-nav-open .sidebar { transform: translateX(0); }
    .brand-copy, .nav-label, .main-nav a > span:not(.nav-icon), .main-nav a em, .user-chip__copy, .user-chip > span:last-child { display: block; }
    .sidebar-toggle { display: none; }.sidebar__head, .main-nav a, .user-chip { justify-content: initial; padding-inline: 10px; }
    body.sidebar-compact .brand-copy, body.sidebar-compact .nav-label, body.sidebar-compact .main-nav a > span:not(.nav-icon), body.sidebar-compact .main-nav a em, body.sidebar-compact .user-chip__copy, body.sidebar-compact .user-chip > span:last-child { display: block; }
    body.sidebar-compact .sidebar-toggle { display: none; }
    body.sidebar-compact .sidebar__head, body.sidebar-compact .main-nav a, body.sidebar-compact .user-chip { justify-content: initial; padding-inline: 10px; }
    .workspace { margin-left: 0; }.mobile-menu, .topbar-avatar { display: grid; }.topbar-avatar { cursor: pointer; }
    body.mobile-nav-open .sidebar-scrim { position: fixed; inset: 0; z-index: 35; display: block; border: 0; background: rgba(16,30,37,.45); }
    .topbar { padding-inline: 18px; }.topbar__title { min-width: 0; margin-right: auto; }.global-search { display: none; }
    .quote-layout { display: block; }.quote-summary { position: static; margin-top: 16px; }
    .kpi-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }.dashboard-grid { grid-template-columns: 1fr; }
    .settings-grid { grid-template-columns: 1fr; }
    .production-detail-grid { grid-template-columns: 1fr; }
    .production-sheet--wide, .production-sheet--full { grid-column: 1; }
}

@media (max-width: 720px) {
    body { font-size: 13px; }
    .login-screen { display: block; min-height: 100vh; }.login-visual { display: none; }.login-panel { min-height: 100vh; padding: 28px 22px; }.login-mobile-brand { display: flex; align-items: center; gap: 10px; margin-bottom: 54px; }.login-mobile-brand strong { letter-spacing: .15em; }
    .topbar { min-height: 62px; padding: 8px 12px; }.topbar__title span { display: none; }.topbar-new { width: 40px; padding: 0; }.topbar-new span:last-child { display: none; }
    .main-content { padding: 17px 12px 28px; }.page-head { align-items: center; }.page-head h1 { font-size: 21px; }.page-head p { display: none; }
    .kpi-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 9px; }.kpi-card { min-height: 106px; padding: 14px; }.kpi-card strong { margin-top: 16px; font-size: 23px; }
    .form-grid, .form-grid--3 { grid-template-columns: 1fr; gap: 0; }.form-grid .span-2, .form-grid .span-3 { grid-column: auto; }
    .selection-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }.selection-preview { grid-template-columns: 68px 1fr; }.selection-preview > .badge { display: none; }.quote-client-preview > .button { grid-column: 2; justify-self: start; }.model-thumb { width: 68px; }
    .card__body { padding: 14px; }.card__head { padding: 13px 14px; }
    .data-table--responsive thead { display: none; }.data-table--responsive, .data-table--responsive tbody, .data-table--responsive tr, .data-table--responsive td { display: block; width: 100%; }.data-table--responsive tr { position: relative; margin-bottom: 10px; padding: 12px; border: 1px solid var(--line); border-radius: 11px; background: #fff; }.data-table--responsive td { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 5px 0; border: 0; }.data-table--responsive td::before { content: attr(data-label); color: var(--muted); font-size: 10px; font-weight: 700; text-transform: uppercase; }.data-table--responsive .row-actions { justify-content: flex-end; width: 100%; padding-top: 8px; border-top: 1px solid var(--line-soft); }
    .segment-table thead { display: none; }.segment-table, .segment-table tbody, .segment-table tr, .segment-table td { display: block; width: 100%; }.segment-table tr { margin-bottom: 10px; padding: 12px; border: 1px solid var(--line); border-radius: 11px; }.segment-table td { display: grid; grid-template-columns: 105px 1fr; align-items: center; gap: 8px; padding: 6px 0; border: 0; }.segment-table td::before { content: attr(data-label); color: var(--muted); font-size: 10px; font-weight: 700; text-transform: uppercase; }.segment-table td:last-child { display: block; padding-top: 10px; }.segment-table .row-actions { justify-content: flex-end; }
    .model-grid, .spec-grid { grid-template-columns: 1fr; }.model-card__visual { height: 130px; }
    .checkbox-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }.price-editor-head { grid-template-columns: 1fr; }
    .modal { width: calc(100vw - 18px); max-height: calc(100vh - 18px); }.modal__body { padding: 16px; }.modal__head, .modal__footer { padding-inline: 16px; }
    .quote-mode-bar { align-items: stretch; }.quote-mode-bar > .segmented { width: 100%; }.quote-mode-bar > .segmented button { flex: 1; }
    .summary-lines { max-height: none; }
    .toolbar .filter-select { flex: 1; min-width: 130px; }
    .quote-top-actions { justify-content: flex-end; }
    .production-tabs { display: flex; overflow-x: auto; }
    .production-tabs button { flex: 0 0 205px; }
    .production-card { grid-template-columns: minmax(0,1fr) auto; gap: 10px; }
    .production-card__identity { grid-column: 1; grid-row: 1; }
    .production-card__client, .production-card__spec, .production-card__metrics { grid-column: 1 / -1; }
    .production-card__action { grid-column: 2; grid-row: 1 / span 2; }
    .production-spec-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .production-hero { padding: 18px; }
    .production-hero h2 { font-size: 23px; }
    .production-detail-head { align-items: flex-start; }
}

@media (max-width: 420px) {
    .kpi-grid { grid-template-columns: 1fr 1fr; }.kpi-card__top span:first-child { max-width: 80px; }.selection-grid { grid-template-columns: 1fr; }.client-picker { grid-template-columns: 1fr; }.checkbox-grid { grid-template-columns: 1fr; }
    .company-lookup-field { grid-template-columns: 1fr; }
    .production-card__action .status { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}