:root { --ink: #173d36; --deep: #102c27; --canvas: #f6f7f2; --paper: #fff; --line: #dce4de; --muted: #65736d; --accent: #dce7e2; --danger: #a53a32; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: var(--ink); background: var(--canvas); }
* { box-sizing: border-box; } [hidden] { display: none !important; } body { margin: 0; min-width: 320px; } button, input { font: inherit; } button { cursor: pointer; } button:focus-visible, input:focus-visible { outline: 3px solid #91b1a5; outline-offset: 3px; }
.shell { max-width: 1180px; margin: 0 auto; min-height: 100svh; padding: 24px 28px 48px; }.topbar { display: flex; justify-content: space-between; align-items: center; gap: 18px; }.brand, .logout, .back-link, .admin-link { border: 0; background: none; color: var(--ink); }.brand { display: inline-flex; align-items: center; gap: 10px; font-size: 14px; letter-spacing: .11em; font-weight: 800; }.brand-mark { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 9px; color: var(--deep); background: var(--accent); font-weight: 900; letter-spacing: 0; }.profile { display: flex; align-items: center; gap: 14px; font-size: 14px; }.logout, .admin-link { text-decoration: underline; text-underline-offset: 4px; }.admin-link { font-weight: 700; }.page-head { margin: clamp(54px, 10vw, 110px) 0 34px; max-width: 760px; }.eyebrow { margin: 0 0 10px; color: #578274; text-transform: uppercase; letter-spacing: .11em; font-size: 12px; font-weight: 800; }.page-head h1, .login-card h1 { margin: 0; line-height: 1.06; font-size: clamp(34px, 5.4vw, 64px); letter-spacing: -.052em; }.choices { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }.choice-card { position: relative; display: flex; min-height: 190px; padding: 21px; overflow: hidden; text-align: left; flex-direction: column; justify-content: space-between; color: var(--ink); background: var(--paper); border: 1px solid var(--line); border-radius: 18px; transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease; }.choice-card:hover { transform: translateY(-3px); border-color: #aac0b5; box-shadow: 0 12px 30px rgba(23,61,54,.09); }.kitchen-card { grid-column: span 2; color: #fbfff9; border-color: var(--deep); background: var(--deep); }.card-number { color: #7d9a90; font-size: 13px; font-weight: 700; }.kitchen-card .card-number { color: #a8c1b7; }.card-title { max-width: 230px; font-size: clamp(22px, 2.3vw, 30px); font-weight: 720; letter-spacing: -.04em; }.card-arrow { position: absolute; top: 20px; right: 21px; font-size: 25px; }.card-hint { color: var(--muted); font-size: 13px; }.kitchen-card .card-hint { color: #bbd0c8; }.action-panel, .placeholder, .calculation-card, .quick-note, .result-card { background: var(--paper); border: 1px solid var(--line); border-radius: 20px; padding: clamp(24px, 5vw, 48px); }.panel-note { margin: 0 0 24px; color: var(--muted); }.action-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 16px; }.action-card { min-height: 174px; padding: 24px; text-align: left; border: 1px solid var(--line); border-radius: 14px; color: var(--ink); background: #eef3f0; }.action-card.main-mode { color: #fff; background: var(--ink); border-color: var(--ink); }.action-card span { display: block; font-size: 25px; font-weight: 750; letter-spacing: -.04em; }.action-card small { display: block; margin-top: 12px; opacity: .72; }.back-row { margin-top: 24px; }.back-link { padding: 8px 0; font-weight: 700; }.placeholder { text-align: center; padding-block: 72px; }.placeholder-icon { display: inline-grid; place-items: center; width: 46px; height: 46px; margin-bottom: 18px; border-radius: 50%; background: #e6eee9; font-size: 28px; }.placeholder h2, .calculation-card h2, .quick-note h2, .result-card h2 { margin: 0 0 8px; font-size: 28px; letter-spacing: -.04em; }.placeholder p, .muted { color: var(--muted); }.login-layout { display: grid; min-height: 100svh; grid-template-columns: minmax(280px, 1.1fr) minmax(360px, .9fr); }.login-intro { display: flex; padding: clamp(30px, 8vw, 110px); color: #f8fff8; flex-direction: column; justify-content: space-between; background: var(--deep); }.brand-lockup { display: flex; align-items: center; gap: 10px; font-size: 14px; letter-spacing: .11em; font-weight: 800; }.login-intro p { max-width: 390px; margin: 0; color: #c8dad2; font-size: clamp(24px, 3.1vw, 42px); line-height: 1.12; letter-spacing: -.045em; }.login-card { align-self: center; max-width: 500px; margin: 36px auto; padding: clamp(30px, 5vw, 58px); }.login-card .muted { margin: 18px 0 32px; line-height: 1.5; } form { display: grid; gap: 20px; } label { display: grid; gap: 8px; color: #304b43; font-size: 14px; font-weight: 700; } input, select { width: 100%; padding: 14px 15px; border: 1px solid #b7c8c0; border-radius: 10px; color: var(--ink); background: #fff; }.primary { border: 0; border-radius: 10px; padding: 15px 20px; color: var(--deep); background: var(--accent); font-weight: 800; }.primary:disabled { cursor: wait; opacity: .65; }.wide { width: 100%; }.form-error, .field-error { margin: -6px 0 0; color: var(--danger); font-size: 14px; }.field-error { min-height: 18px; margin: 0; }.quick-layout, .admin-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(260px, .8fr); gap: 18px; align-items: start; }.quick-note { background: var(--deep); color: #f8fff8; }.quick-note .eyebrow { color: #a8c1b7; }.quick-note p { color: #c8dad2; line-height: 1.55; }.field-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }.radio-row { display: flex; gap: 18px; margin: 0; padding: 0; border: 0; }.radio-row label, .switch-label { display: flex; align-items: center; gap: 8px; }.radio-row input, .switch-label input { width: auto; }.result-card { margin-top: 20px; }.result-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 24px 0; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }.result-grid div { padding: 15px; border-right: 1px solid var(--line); }.result-grid div:last-child { border-right: 0; }.result-grid span, .money-table span { display: block; color: var(--muted); font-size: 13px; }.result-grid strong, .money-table strong { display: block; margin-top: 5px; font-size: 17px; }.completion-list { display: grid; gap: 6px; padding-left: 20px; }.money-table { display: grid; margin: 24px 0; border-top: 1px solid var(--line); }.money-table div { display: flex; justify-content: space-between; gap: 20px; padding: 12px 0; border-bottom: 1px solid var(--line); }.money-featured strong, .money-total strong { font-size: 20px; }.money-total { font-weight: 800; }.breakdown-list { display: grid; gap: 8px; padding: 12px 0 0; list-style: none; }.breakdown-list li { display: flex; justify-content: space-between; gap: 18px; }.admin-grid { grid-template-columns: minmax(0, 1.4fr) minmax(280px, .8fr); }.admin-grid > :last-child { grid-column: 2; }.table-wrap { overflow-x: auto; } table { width: 100%; border-collapse: collapse; } th, td { padding: 12px 8px; text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; } th { color: var(--muted); font-size: 12px; } td .switch-label { margin-bottom: 8px; font-size: 13px; }.text-button { margin-right: 10px; padding: 0; border: 0; background: none; color: var(--ink); text-decoration: underline; }.danger { color: var(--danger); }
.network-status { padding: 5px 8px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); font-size: 12px; white-space: nowrap; }
.radio-stack { display: grid; gap: 10px; margin: 0; padding: 0; border: 0; }.radio-stack label { display: flex; align-items: center; gap: 8px; }.radio-stack input { width: auto; }
.door-controls h2 { margin-top: 4px; }.door-card-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }.door-card { padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: #f7faf8; }
.main-kitchen-layout { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(290px, .85fr); gap: 18px; align-items: start; }.main-kitchen-form { gap: 18px; }.main-section { border: 1px solid var(--line); border-radius: 14px; background: #f7faf8; }.main-section + .main-section { margin-top: 12px; }.main-section summary { padding: 16px 18px; cursor: pointer; }.main-section summary::marker { color: var(--muted); }.main-section summary .switch-label { display: inline-flex; }.module-fields { padding: 2px 18px 18px; }.module-fields > .switch-label { margin-top: 16px; }.additional-items { display: grid; gap: 12px; }.additional-item { padding: 16px; border: 1px solid var(--line); border-radius: 12px; background: #f7faf8; }.additional-item-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }.main-estimate { position: sticky; top: 18px; background: var(--paper); border: 1px solid var(--line); border-radius: 20px; padding: clamp(24px, 4vw, 32px); }.main-estimate h2 { margin: 0 0 8px; font-size: 28px; letter-spacing: -.04em; }.main-estimate p { color: var(--muted); line-height: 1.55; }.breakdown-details summary { cursor: pointer; font-weight: 750; }.breakdown-list li { align-items: flex-start; padding: 8px 0; border-bottom: 1px solid var(--line); }.breakdown-list li:last-child { border-bottom: 0; }.breakdown-list small { display: block; margin-top: 3px; color: var(--muted); }.breakdown-list > li > strong { white-space: nowrap; }.main-kitchen-form .field-invalid input, .main-kitchen-form .field-invalid select { border-color: var(--danger); background: #fff8f7; box-shadow: 0 0 0 2px rgba(165,58,50,.12); }.main-kitchen-form .form-error:not([hidden]) { margin: 0; padding: 12px 14px; border: 1px solid rgba(165,58,50,.35); border-radius: 10px; background: #fff8f7; }
.commercial-option, .vat-option { padding: 14px; border: 1px solid var(--line); border-radius: 12px; background: #f7faf8; }.commercial-option > div, .vat-option > label + label { margin-top: 12px; }.composition-dishwasher { margin: 0 0 14px; }.archive-head, .archive-detail-actions { display: flex; align-items: center; justify-content: space-between; gap: 16px; }.archive-actions { min-width: 190px; }.archive-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; margin-bottom: 18px; padding: 0; overflow: hidden; background: var(--line); }.archive-summary > div { padding: 18px; background: var(--paper); }.archive-summary span { display: block; color: var(--muted); font-size: 13px; }.archive-summary strong { display: block; margin-top: 6px; }.archive-detail-actions { justify-content: flex-start; margin: 18px 0; }.secondary { padding: 14px 20px; border: 1px solid #afc1b8; border-radius: 10px; color: var(--ink); background: var(--paper); font-weight: 800; }.archive-number { padding: 9px 12px; border-radius: 10px; background: #f1f5f3; }.document-button { margin: 6px 0 20px; }
.document-dialog { width: min(560px, calc(100vw - 28px)); max-height: calc(100vh - 28px); padding: 0; border: 1px solid var(--line); border-radius: 20px; color: var(--ink); background: var(--paper); box-shadow: 0 24px 80px rgba(16,44,39,.24); }.document-dialog::backdrop { background: rgba(16,44,39,.45); backdrop-filter: blur(3px); }.document-dialog form { padding: 26px; }.dialog-head, .dialog-actions { display: flex; align-items: center; justify-content: space-between; gap: 14px; }.dialog-head h2 { margin: 0; font-size: 28px; }.dialog-close { align-self: flex-start; padding: 2px 10px; border: 0; color: var(--muted); background: none; font-size: 28px; }.dialog-actions { justify-content: flex-end; }.document-dialog legend { margin-bottom: 10px; color: #304b43; font-size: 14px; font-weight: 700; }.document-downloads { display: grid; gap: 8px; margin: 18px 0; padding: 16px; border: 1px solid var(--line); border-radius: 12px; background: #f7faf8; }.document-downloads[hidden] { display: none; }.document-downloads p { margin: 0 0 4px; font-weight: 800; }
@media (max-width: 740px) { .shell { padding: 18px 18px 36px; }.profile { gap: 8px; }.profile span { display: none; }.page-head { margin: 60px 0 28px; }.choices, .quick-layout, .admin-grid, .main-kitchen-layout { grid-template-columns: 1fr; }.kitchen-card { grid-column: auto; }.choice-card { min-height: 142px; }.action-grid, .field-grid, .door-card-grid, .archive-summary { grid-template-columns: 1fr; }.action-card { min-height: 130px; }.login-layout { display: block; }.login-intro { min-height: 260px; padding: 25px; }.login-card { margin: 0; padding: 38px 25px; }.result-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }.result-grid div:nth-child(2) { border-right: 0; }.result-grid div:nth-child(-n+2) { border-bottom: 1px solid var(--line); }.admin-grid > :last-child { grid-column: auto; }.main-estimate { position: static; }.archive-head, .archive-detail-actions { align-items: stretch; flex-direction: column; }.archive-detail-actions button { width: 100%; }.archive-card { padding: 24px; }.archive-table thead { display: none; }.archive-table, .archive-table tbody, .archive-table tr, .archive-table td { display: block; width: 100%; }.archive-table tr { padding: 16px 0; border-bottom: 1px solid var(--line); }.archive-table td { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 10px; padding: 5px 0; border: 0; overflow-wrap: anywhere; }.archive-table td::before { color: var(--muted); font-size: 12px; font-weight: 700; }.archive-table td:nth-child(1)::before { content: 'Номер'; }.archive-table td:nth-child(2)::before { content: 'Дата'; }.archive-table td:nth-child(3)::before { content: 'Режим'; }.archive-table td:nth-child(4)::before { content: 'Направление'; }.archive-table td:nth-child(5)::before { content: 'Название'; }.archive-table td:nth-child(6)::before { content: 'Итого'; }.archive-table td:nth-child(7)::before { content: 'Действия'; }.archive-actions { min-width: 0; } }