:root {
  color-scheme: light;
  --blue: #073d68;
  --blue-2: #0b5a92;
  --teal: #0f6f7d;
  --yellow: #f5bb19;
  --ink: #15293a;
  --muted: #617382;
  --line: #d5e0e6;
  --paper: #ffffff;
  --background: #eef4f7;
  --soft-blue: #e7f2f9;
  --soft-yellow: #fff7dd;
  --danger: #b2343c;
  --success: #177356;
  --sidebar: #062f53;
  --sidebar-deep: #041f37;
  --sidebar-text: #dfeaf1;
  --workspace: #f2f6f9;
  --surface: #ffffff;
  --shadow: 0 12px 30px rgba(4, 32, 54, .10);
  font-family: "Segoe UI", Roboto, Arial, sans-serif;
}

* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; color: var(--ink); background: var(--background); }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid #64b5e8; outline-offset: 2px; }
[hidden] { display: none !important; }

.auth-view { min-height: 100vh; display: grid; place-items: center; padding: 28px; background: linear-gradient(135deg, #073d68 0%, #0f668d 52%, #f5bb19 52%, #f5bb19 54%, #eef4f7 54%); }
.auth-card { width: min(100%, 470px); padding: 34px; border-radius: 18px; background: #fff; box-shadow: 0 24px 75px rgba(4, 42, 66, .28); }
.auth-card h1 { margin: 0 0 6px; font-size: 1.75rem; color: var(--blue); }
.auth-card p { line-height: 1.5; color: var(--muted); }
.auth-brand { display: flex; gap: 12px; align-items: center; margin-bottom: 26px; }
.auth-brand .brand-mark { width: 52px; height: 52px; font-size: 1.5rem; }
.auth-form { display: grid; gap: 15px; margin-top: 23px; }
.auth-form label, .form-field { display: grid; gap: 6px; font-weight: 650; font-size: .9rem; }
.auth-form small { color: var(--muted); font-weight: 400; }
.auth-password-field { display: grid; gap: 6px; font-weight: 650; font-size: .9rem; }
.password-control { position: relative; }
.password-control input { padding-right: 49px; }
.password-toggle { position: absolute; top: 1px; right: 1px; bottom: 1px; display: grid; width: 44px; place-items: center; border: 0; border-radius: 0 5px 5px 0; color: #315165; background: transparent; }
.password-toggle:hover, .password-toggle.is-active { color: var(--teal); background: var(--soft-blue); }
.password-toggle svg { width: 20px; height: 20px; }
.auth-link { justify-self: start; padding: 1px 0; border: 0; color: var(--blue-2); background: transparent; font-weight: 700; text-decoration: underline; }
.auth-link:hover { color: var(--teal); }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.recovery-dialog { width: min(100%, 560px); }
.recovery-code-value { display: block; margin: 17px 0; padding: 14px; overflow-wrap: anywhere; border: 1px dashed #79a4bb; border-radius: 7px; color: var(--blue); background: var(--soft-blue); font-size: clamp(1rem, 3vw, 1.22rem); font-weight: 800; letter-spacing: .08em; text-align: center; }

.app-shell { min-height: 100vh; display: grid; grid-template-columns: 276px minmax(0, 1fr); grid-template-rows: 72px minmax(0, 1fr) auto; background: var(--workspace); }
.app-sidebar { grid-row: 1 / -1; display: flex; flex-direction: column; min-height: 100vh; overflow-y: auto; color: var(--sidebar-text); background: linear-gradient(165deg, var(--sidebar) 0%, var(--sidebar-deep) 100%); box-shadow: 5px 0 24px rgba(4, 30, 50, .13); }
.brand { display: flex; align-items: center; gap: 11px; padding: 21px 22px 22px; border: 0; color: inherit; background: transparent; text-align: left; }
.brand strong { display: block; letter-spacing: .01em; font-size: 1.12rem; }
.brand small { display: block; margin-top: 3px; color: #c6d8e4; font-size: .72rem; line-height: 1.3; }
.brand-mark { display: grid; width: 43px; height: 43px; place-items: center; flex: 0 0 auto; border: 2px solid var(--yellow); border-radius: 12px; color: var(--yellow); background: rgba(255,255,255,.07); font-size: 1.25rem; font-weight: 800; }
.connection { display: inline-flex; align-items: center; gap: 7px; color: #dceaf2; font-size: .79rem; white-space: nowrap; }
.connection-dot { width: 8px; height: 8px; border-radius: 50%; background: #55d48e; box-shadow: 0 0 0 3px rgba(85,212,142,.16); }
.connection.offline .connection-dot { background: #d93a40; box-shadow: 0 0 0 3px rgba(217,58,64,.16); }
.main-nav { display: grid; gap: 17px; padding: 3px 13px 20px; }
.nav-group { display: grid; gap: 3px; }
.nav-group-label { padding: 0 11px 5px; color: #9eb5c5; font-size: .66rem; font-weight: 800; letter-spacing: .11em; text-transform: uppercase; }
.main-nav button { display: flex; align-items: center; gap: 11px; width: 100%; min-height: 39px; padding: 9px 11px; border: 0; border-left: 3px solid transparent; border-radius: 7px; color: var(--sidebar-text); background: transparent; font-weight: 650; font-size: .88rem; text-align: left; }
.main-nav button:hover { color: #fff; background: rgba(255,255,255,.10); }
.main-nav button.active { border-left-color: var(--yellow); color: #132e43; background: linear-gradient(110deg, #ffb821, #f5a816); box-shadow: 0 6px 16px rgba(2, 23, 42, .22); }
.nav-icon { display: inline-grid; width: 19px; place-items: center; color: currentColor; font-size: 1.12rem; font-weight: 800; }
.sidebar-footer { margin-top: auto; padding: 18px 25px; border-top: 1px solid rgba(255,255,255,.13); }

.topbar { position: sticky; top: 0; z-index: 10; grid-column: 2; min-height: 72px; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 10px clamp(18px, 3vw, 42px); color: var(--blue); background: rgba(255,255,255,.96); border-bottom: 1px solid var(--line); box-shadow: 0 2px 12px rgba(9, 45, 67, .04); backdrop-filter: blur(10px); }
.topbar-context { display: grid; gap: 2px; }
.topbar-context strong { color: var(--blue); font-size: 1.08rem; }
.topbar-eyebrow, .page-eyebrow, .section-eyebrow { color: #658195; font-size: .67rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
.topbar-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
.quiet-button, .account-button { display: inline-flex; align-items: center; gap: 8px; min-height: 37px; border: 1px solid #c8d7df; border-radius: 8px; padding: 8px 11px; color: #294b60; background: #fff; font-size: .82rem; font-weight: 700; }
.quiet-button:hover, .account-button:hover { border-color: #83b6d0; background: var(--soft-blue); }
.account-initial { display: grid; width: 24px; height: 24px; place-items: center; border-radius: 50%; color: #fff; background: linear-gradient(135deg, #55a1ce, #2e6d9b); font-size: .78rem; }

.app-content { grid-column: 2; width: min(100%, 1640px); margin: 0 auto; padding: clamp(18px, 2.5vw, 34px); }
.page-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 19px; }
.page-heading h1 { margin: 0; color: var(--blue); font-size: clamp(1.45rem, 2.3vw, 2rem); }
.page-heading p { max-width: 800px; margin: 6px 0 0; color: var(--muted); line-height: 1.45; }
.heading-actions, .action-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }

.card, .section-card { border: 1px solid var(--line); border-radius: 10px; background: var(--paper); box-shadow: 0 1px 1px rgba(10, 44, 65, .035); }
.card { padding: clamp(15px, 2vw, 22px); }
.section-card { overflow: hidden; }
.section-card > header { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 48px; padding: 11px 16px; border-bottom: 1px solid var(--line); color: var(--blue); background: linear-gradient(90deg, #f8fbfc, #fff); }
.section-card > header h2, .section-card > header h3 { margin: 0; font-size: 1rem; }
.section-content { padding: 15px; }
.layout-two { display: grid; grid-template-columns: minmax(230px, .75fr) minmax(0, 2.25fr); gap: 18px; align-items: start; }
.split-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.dashboard-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 16px; }
.metric { display: flex; align-items: center; gap: 13px; width: 100%; padding: 18px; border: 1px solid var(--line); border-left: 5px solid var(--teal); color: inherit; background: var(--surface); text-align: left; transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease; }
.metric:hover { transform: translateY(-2px); border-color: #a7c6d6; box-shadow: 0 9px 22px rgba(4, 43, 66, .08); }
.metric strong { display: block; color: var(--blue); font-size: 1.65rem; }
.metric > span:not(.metric-icon) { color: var(--muted); font-size: .85rem; }
.metric small { display: block; margin-top: 2px; color: var(--muted); font-size: .8rem; line-height: 1.3; }
.metric i { margin-left: auto; color: #5f7b8d; font-size: 1.4rem; font-style: normal; }
.metric .metric-icon { display: grid; width: 47px; height: 47px; place-items: center; flex: 0 0 auto; border-radius: 50%; color: #14759a; background: #e4f3fb; font-size: 1.35rem; font-weight: 800; }
.metric-green { border-left-color: #28a66f; }
.metric-green .metric-icon { color: #158355; background: #e0f7ea; }
.metric-orange { border-left-color: #ed9222; }
.metric-orange .metric-icon { color: #ce7311; background: #fff0dc; }
.metric-violet { border-left-color: #7659d8; }
.metric-violet .metric-icon { color: #6749ca; background: #eeeaff; }

.workspace-crumb { display: flex; align-items: center; gap: 7px; margin: -2px 0 11px; color: #617d8f; font-size: .79rem; font-weight: 700; }
.workspace-crumb span:first-child { color: var(--blue); font-size: 1rem; }
.dashboard-hero { position: relative; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(250px, .85fr); min-height: 211px; overflow: hidden; margin-bottom: 16px; border: 1px solid #d6e2e8; border-radius: 14px; color: #fff; background: linear-gradient(118deg, #063e67 0%, #0a6990 58%, #dcecf3 58%, #f5f9fb 100%); box-shadow: var(--shadow); }
.dashboard-hero::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, rgba(255,255,255,.09), transparent 54%); }
.dashboard-hero-copy { position: relative; z-index: 1; align-self: center; padding: clamp(24px, 4vw, 43px); }
.dashboard-hero-copy h1 { max-width: 650px; margin: 4px 0 6px; color: #fff; font-size: clamp(1.75rem, 3vw, 2.55rem); letter-spacing: -.03em; }
.dashboard-hero-copy p { max-width: 610px; margin: 0 0 19px; color: #d8edf7; font-size: 1rem; line-height: 1.5; }
.dashboard-eyebrow { color: #ffce59; font-size: .72rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.dashboard-hero .secondary-button { border-color: rgba(255,255,255,.63); color: #fff; background: rgba(255,255,255,.08); }
.dashboard-hero .secondary-button:hover { background: rgba(255,255,255,.18); }
.dashboard-hero-art { position: relative; min-height: 190px; overflow: hidden; }
.hero-truck { position: absolute; right: clamp(25px, 7vw, 105px); bottom: 36px; z-index: 2; width: 142px; height: 72px; padding: 8px 21px; border-radius: 9px 20px 10px 10px; color: #eb8d0c; background: linear-gradient(135deg, #fff, #dce8ee); box-shadow: 0 17px 28px rgba(3, 42, 61, .18); font-size: 4rem; line-height: .85; text-align: center; transform: skewX(-3deg); }
.hero-truck::after { content: ""; position: absolute; right: -28px; bottom: 0; width: 36px; height: 48px; border-radius: 0 12px 7px 0; background: #fff; }
.hero-box { position: absolute; z-index: 3; display: block; width: 30px; height: 30px; border: 2px solid rgba(171,107,20,.38); background: linear-gradient(135deg, #f9c15b, #e49a1c); box-shadow: 0 7px 12px rgba(64, 69, 52, .16); }
.hero-box-one { right: 54px; bottom: 43px; }
.hero-box-two { right: 86px; bottom: 43px; transform: scale(.74) translateY(-29px); }
.hero-road { position: absolute; right: -45px; bottom: 0; width: 110%; height: 53px; transform: skewX(-23deg); background: linear-gradient(180deg, transparent 0 47%, rgba(12, 72, 97, .16) 48% 100%); }
.dashboard-columns { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(360px, .85fr); gap: 16px; align-items: start; }
.dashboard-side-stack { display: grid; gap: 16px; }
.section-card > header > div { display: grid; gap: 2px; }
.dashboard-schedule .section-content { min-height: 255px; }
.dashboard-schedule-list { display: grid; }
.schedule-row { display: grid; grid-template-columns: 103px minmax(0, 1fr) auto; align-items: center; gap: 14px; width: 100%; min-height: 58px; padding: 8px 1px; border: 0; border-bottom: 1px solid var(--line); color: var(--ink); background: transparent; text-align: left; }
.schedule-row:last-child { border-bottom: 0; }
.schedule-row:hover strong { color: var(--teal); }
.schedule-row time { display: grid; gap: 2px; color: #31566b; font-size: .8rem; font-weight: 800; }
.schedule-row time small, .schedule-row span small { color: var(--muted); font-size: .76rem; font-weight: 500; }
.schedule-row span:not(.tag) { display: grid; gap: 2px; min-width: 0; }
.schedule-row strong { overflow: hidden; color: var(--blue); text-overflow: ellipsis; white-space: nowrap; }
.quick-action-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.quick-action-grid button { display: grid; justify-items: start; gap: 8px; min-height: 93px; padding: 13px; border: 1px solid #d9e4ea; border-radius: 9px; color: #2a4b60; background: #fff; font-weight: 700; text-align: left; }
.quick-action-grid button:hover { border-color: #88b6cd; color: var(--blue); background: #f5fbfe; }
.quick-action-grid span { display: grid; width: 29px; height: 29px; place-items: center; border-radius: 8px; color: #227aa5; background: #e4f3fb; font-size: 1.1rem; }
.quick-action-grid button:nth-child(2) span { color: #ce7614; background: #fff0dc; }
.quick-action-grid button:nth-child(3) span { color: #2d7e9f; background: #e6f5f9; }
.quick-action-grid button:nth-child(4) span { color: #6545c4; background: #eeeaff; }
.recent-work .section-content { padding-top: 4px; }
.recent-work .summary-table th { display: none; }
.recent-work .summary-table td { padding: 7px 2px; }
.recent-work .summary-table th:nth-child(3), .recent-work .summary-table th:nth-child(4), .recent-work .summary-table th:nth-child(5), .recent-work .summary-table td:nth-child(3), .recent-work .summary-table td:nth-child(4), .recent-work .summary-table td:nth-child(5) { display: none; }

.primary-button, .secondary-button, .danger-button, .small-button { min-height: 37px; padding: 8px 13px; border: 1px solid transparent; border-radius: 6px; font-weight: 700; font-size: .86rem; }
.primary-button { color: #fff; background: var(--teal); border-color: var(--teal); }
.primary-button:hover { background: #0a5d69; }
.secondary-button { color: #1f455e; background: #fff; border-color: #b8cad5; }
.secondary-button:hover { background: #f0f6f9; }
.danger-button { color: #a1262f; background: #fff; border-color: #e7b9bd; }
.danger-button:hover { color: #fff; background: var(--danger); }
.small-button { min-height: 32px; padding: 5px 9px; color: #1f455e; background: #f7fbfc; border-color: #c8d8e0; }
.small-button:hover { background: var(--soft-blue); }
.preview-entry { border-width: 2px; }
.user-account-list { display: grid; gap: 8px; }
.user-account-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 11px; border: 1px solid var(--line); border-radius: 7px; background: #fbfdfe; }
.user-account-row strong { margin-right: 8px; }
.user-edit-form { margin-top: 15px; padding-top: 15px; border-top: 1px solid var(--line); }
.mail-settings-form { display: grid; gap: 14px; margin-top: 15px; }
.mail-settings-form .auth-password-field { align-content: start; }
.mail-settings-form .password-control input { width: 100%; min-height: 39px; padding: 8px 49px 8px 10px; border: 1px solid #b9cbd5; border-radius: 6px; color: var(--ink); background: #fff; font-weight: 400; }
.mail-test-panel { display: grid; grid-template-columns: minmax(0, 1fr) minmax(270px, .72fr); gap: 18px; align-items: end; }
.mail-test-panel h3 { margin: 0 0 5px; color: var(--blue); font-size: .98rem; }
.mail-test-panel p { margin: 0; color: var(--muted); line-height: 1.4; }
.mail-test-form { display: grid; gap: 9px; }
.email-send-dialog { width: min(100%, 720px); }

.offer-list { display: grid; gap: 8px; max-height: calc(100vh - 230px); overflow: auto; padding-right: 3px; }
.offer-list button { width: 100%; padding: 12px; border: 1px solid var(--line); border-radius: 8px; color: var(--ink); background: #fff; text-align: left; }
.offer-list button:hover, .offer-list button.active { border-color: #6ca9c9; background: var(--soft-blue); }
.offer-list strong, .offer-list small { display: block; }
.offer-list small { margin-top: 3px; color: var(--muted); }
.offer-search { display: grid; gap: 5px; margin-top: 12px; color: var(--muted); font-size: .78rem; font-weight: 700; }
.offer-search input { width: 100%; min-height: 36px; padding: 7px 9px; border: 1px solid #b9cbd5; border-radius: 6px; color: var(--ink); background: #fff; }
.offer-workspace-layout { display: grid; grid-template-columns: minmax(245px, .7fr) minmax(0, 2.3fr); gap: 18px; align-items: start; }
.offer-workspace-list { position: sticky; top: 88px; max-height: calc(100vh - 110px); overflow: hidden; padding: 15px; box-shadow: 0 3px 12px rgba(7, 45, 68, .05); }
.offer-workspace-list .offer-list { max-height: calc(100vh - 390px); min-height: 120px; }
.offer-list-header { display: grid; gap: 4px; color: var(--blue); }
.offer-list-header strong { font-size: .92rem; }
.offer-create-note { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; align-items: center; gap: 9px; margin-top: 13px; padding: 10px; border: 1px solid #d7e7ef; border-radius: 8px; color: #31566b; background: #f2f9fc; }
.offer-create-note > span { display: grid; width: 28px; height: 28px; place-items: center; border-radius: 7px; color: #fff; background: var(--teal); font-weight: 800; }
.offer-create-note div { display: grid; gap: 2px; }
.offer-create-note strong { font-size: .81rem; }
.offer-create-note small { color: var(--muted); font-size: .72rem; line-height: 1.25; }
.offer-list-kind { display: inline-block; margin-bottom: 4px; color: #5c7990; font-size: .67rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.offer-editor-pane { min-width: 0; }
.offer-step-index { display: flex; flex-wrap: wrap; gap: 7px; margin: 12px 0 -2px; padding: 9px 2px 1px; }
.offer-step-index a { padding: 6px 9px; border: 1px solid #d2e0e7; border-radius: 999px; color: #3e6277; background: #fff; font-size: .75rem; font-weight: 700; text-decoration: none; }
.offer-step-index a:hover { border-color: #85b6cf; color: var(--teal); background: var(--soft-blue); }
.editor-stack [id] { scroll-margin-top: 142px; }
.empty-note { padding: 18px; border: 1px dashed #afc2ce; border-radius: 8px; color: var(--muted); background: #fbfdfe; line-height: 1.45; }

.editor-toolbar { position: sticky; top: 88px; z-index: 4; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px; border: 1px solid var(--line); border-radius: 9px; background: rgba(255,255,255,.96); box-shadow: 0 3px 11px rgba(12,53,77,.09); backdrop-filter: blur(7px); }
.editor-toolbar .offer-number { margin-right: auto; color: var(--blue); font-weight: 800; }
.editor-stack { display: grid; gap: 15px; margin-top: 14px; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 15px; }
.form-grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.span-all { grid-column: 1 / -1; }
.form-field input, .form-field select, .form-field textarea, .auth-form input { width: 100%; min-height: 39px; padding: 8px 10px; border: 1px solid #b9cbd5; border-radius: 6px; color: var(--ink); background: #fff; font-weight: 400; }
.form-field textarea { min-height: 84px; resize: vertical; line-height: 1.4; }
.form-field.checkbox { display: flex; align-items: center; gap: 9px; padding-top: 23px; }
.form-field.checkbox input { width: 18px; height: 18px; min-height: 0; }
.form-field .help { color: var(--muted); font-size: .78rem; font-weight: 400; }
.divider { height: 1px; margin: 14px 0; background: var(--line); }

.service-card { border: 1px solid var(--line); border-radius: 9px; background: #fff; overflow: hidden; }
.service-card > header { display: flex; align-items: center; gap: 12px; min-height: 53px; padding: 10px 14px; border-bottom: 1px solid var(--line); background: #f9fcfd; }
.service-card h2 { margin: 0; min-width: 98px; color: var(--blue); font-size: 1rem; }
.service-card .catalog-select { width: min(100%, 300px); min-height: 35px; padding: 6px; border: 1px solid #b7cbd6; border-radius: 5px; }
.service-actions { display: flex; flex-wrap: wrap; gap: 7px; }
.line-table-wrap { overflow-x: auto; }
.line-table { width: 100%; min-width: 900px; border-collapse: collapse; }
.line-table th { padding: 9px 8px; color: #34566d; background: #eaf2f5; text-align: left; font-size: .78rem; white-space: nowrap; }
.line-table td { min-height: 46px; padding: 6px 7px; border-top: 1px solid #dce6eb; vertical-align: top; }
.line-table input, .line-table select { min-width: 0; width: 100%; min-height: 33px; padding: 5px 6px; border: 1px solid #becfd8; border-radius: 4px; }
.line-table .total-cell { padding-top: 14px; font-variant-numeric: tabular-nums; font-weight: 750; white-space: nowrap; }
.line-table .delete-cell { width: 52px; }
.line-table .details { min-width: 165px; }
.line-empty td { padding: 17px; color: var(--muted); text-align: center; }

.agreement-layout { display: grid; grid-template-columns: minmax(200px, 320px) 1fr; gap: 12px; align-items: end; }
.compact-card { max-width: 920px; }
.expense-grid { display: grid; grid-template-columns: repeat(4, minmax(130px, 1fr)); gap: 11px 13px; }
.totals-card { border-color: #9cc6d7; background: linear-gradient(130deg, #edf9fc, #fff); }
.total-grid { display: grid; grid-template-columns: repeat(4, minmax(120px, 1fr)); gap: 13px; }
.total-grid span { color: #587281; font-size: .8rem; }
.total-grid strong { display: block; margin-top: 3px; color: var(--blue); font-size: 1.12rem; }
.total-grid .grand strong { color: var(--teal); font-size: 1.32rem; }

.catalog-list { display: grid; gap: 3px; max-height: 500px; overflow: auto; }
.catalog-list button { display: flex; justify-content: space-between; gap: 10px; padding: 8px 9px; border: 1px solid transparent; border-radius: 5px; color: #28485d; background: #fff; text-align: left; }
.catalog-list button:hover { border-color: #95bfd3; background: var(--soft-blue); }
.catalog-list code { color: #5c7382; font-size: .74rem; }
.summary-table { width: 100%; border-collapse: collapse; }
.summary-table th, .summary-table td { padding: 10px; border-bottom: 1px solid var(--line); text-align: left; }
.summary-table th { color: #557181; font-size: .78rem; text-transform: uppercase; letter-spacing: .02em; }
.summary-table td:last-child, .summary-table th:last-child { text-align: right; }
.tag { display: inline-block; padding: 3px 7px; border-radius: 999px; color: #22516b; background: #e5f0f5; font-size: .76rem; font-weight: 700; }
.tag.confirmed { color: #0c694c; background: #daf3e6; }
.tag.draft { color: #745507; background: #fff1c7; }
.note { margin: 0; padding: 11px 13px; border-left: 4px solid #58a3cb; color: #355a70; background: #eff8fc; line-height: 1.45; }
.warning { border-left-color: #de9b22; background: var(--soft-yellow); color: #6b5214; }
.document-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(218px, 1fr)); gap: 13px; }
.document-card { min-height: 182px; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 18px; border: 1px solid var(--line); border-radius: 11px; background: #fff; box-shadow: 0 2px 8px rgba(11, 48, 67, .035); }
.document-card:hover { border-color: #99c1d5; box-shadow: 0 9px 21px rgba(5, 43, 64, .075); }
.document-card-primary { border-color: #9cc8db; background: linear-gradient(145deg, #edf9fd, #fff 68%); }
.document-icon { display: grid; width: 39px; height: 39px; place-items: center; border-radius: 10px; color: #17789f; background: #e0f3fb; font-size: 1.14rem; font-weight: 800; }
.document-card:nth-child(3) .document-icon { color: #198154; background: #e1f7e9; }
.document-card:nth-child(4) .document-icon { color: #b55e12; background: #fff0dc; }
.document-card:nth-child(n+5) .document-icon { color: #664ac3; background: #eeeaff; }
.document-card h3 { margin: 0; color: var(--blue); font-size: 1rem; }
.document-card p { flex: 1; margin: 0; color: var(--muted); font-size: .88rem; line-height: 1.42; }
.cover-preview { max-width: 330px; margin: 18px auto 0; }
.cover-preview img { display: block; width: 100%; height: auto; border: 1px solid var(--line); border-radius: 7px; }
.cover-preview figcaption { margin-top: 7px; color: var(--muted); font-size: .77rem; line-height: 1.35; }

.preview-modal { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: clamp(10px, 3vw, 34px); background: rgba(6, 27, 41, .68); }
.preview-dialog { width: min(100%, 960px); max-height: min(900px, calc(100vh - 20px)); overflow: auto; border-radius: 12px; background: #edf2f4; box-shadow: 0 24px 70px rgba(0, 0, 0, .36); }
.preview-dialog > header { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 13px 18px; border-bottom: 1px solid var(--line); background: #fff; }
.preview-dialog h2 { margin: 2px 0 0; color: var(--blue); font-size: 1.05rem; }
.preview-eyebrow { color: var(--muted); font-size: .75rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.inquiry-import-dialog { width: min(100%, 780px); }
.import-preview-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 14px; margin: 17px 0; }
.import-preview-grid > div { min-width: 0; padding: 10px 12px; border: 1px solid var(--line); border-radius: 7px; background: #fff; }
.import-preview-grid dt { margin-bottom: 4px; color: #587585; font-size: .72rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.import-preview-grid dd { margin: 0; overflow-wrap: anywhere; color: var(--ink); line-height: 1.4; }
.import-preview-notes { margin: 16px 0; padding: 12px 13px; border: 1px solid #d7e5eb; border-radius: 7px; background: #fff; }
.import-preview-notes strong { color: var(--blue); }
.import-preview-notes p { margin: 7px 0 0; color: #35576a; line-height: 1.45; }
.import-preview-source { margin: 0 0 16px; color: var(--muted); font-size: .81rem; }
.offer-document { width: min(100%, 820px); min-height: 900px; margin: 22px auto; padding: clamp(26px, 6vw, 60px); color: #172936; background: #fff; box-shadow: 0 1px 5px rgba(10, 44, 65, .14); font-family: Arial, sans-serif; line-height: 1.45; }
.offer-document h1 { margin: 0 0 30px; padding-bottom: 12px; border-bottom: 4px solid var(--yellow); color: var(--blue); font-size: clamp(1.7rem, 4vw, 2.45rem); }
.offer-document h2 { margin-top: 28px; color: var(--blue); }
.offer-document table { width: 100%; margin: 22px 0; border-collapse: collapse; }
.offer-document th, .offer-document td { padding: 9px; border: 1px solid #9db1bd; text-align: left; }
.offer-document th { color: #23485f; background: #edf4f7; }
.offer-document-addresses { display: grid; grid-template-columns: 1fr 1fr; gap: 42px; margin-bottom: 27px; }
.offer-document-total { width: 250px; margin-left: auto; padding: 12px 0 0; border-top: 2px solid #193f58; text-align: right; }
.offer-cover { position: relative; margin: -10px -10px 24px; overflow: hidden; border: 1px solid var(--line); background: #fff; }
.offer-cover img { display: block; width: 100%; height: auto; }
.offer-cover-meta { position: absolute; right: 5%; bottom: 3%; display: grid; gap: 3px; min-width: 230px; padding: 10px 14px; border-radius: 8px; color: #073d68; background: rgba(255,255,255,.90); box-shadow: 0 2px 9px rgba(5, 38, 60, .16); }
.offer-cover-meta strong { font-size: 1rem; }
.offer-cover-meta span { font-size: .84rem; }
.offer-document-page { min-height: 760px; padding-bottom: 25px; break-after: page; }
.offer-document-page:last-child { break-after: auto; }
.signature-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: 80px; }
.signature-grid div { display: grid; gap: 7px; }
.signature-grid span { display: block; min-height: 1px; border-bottom: 1px solid #203843; }
.signature-grid small { color: var(--muted); }

.statusbar { grid-column: 2; display: flex; justify-content: space-between; gap: 12px; padding: 8px clamp(18px, 3vw, 42px); border-top: 1px solid var(--line); color: #5d7481; background: #fff; font-size: .78rem; }
.toast { position: fixed; right: 18px; bottom: 22px; z-index: 20; max-width: min(450px, calc(100vw - 36px)); padding: 13px 16px; border-radius: 8px; color: #fff; background: #173f57; box-shadow: 0 12px 34px rgba(0,0,0,.23); line-height: 1.4; }
.toast.error { background: #9e2831; }
.toast.success { background: #156d52; }

@media (max-width: 1240px) {
  .app-shell { grid-template-columns: 244px minmax(0, 1fr); }
  .brand { padding-right: 16px; padding-left: 17px; }
  .dashboard-columns { grid-template-columns: 1fr; }
  .dashboard-side-stack { grid-template-columns: minmax(270px, .75fr) minmax(0, 1.25fr); }
  .offer-workspace-layout { grid-template-columns: minmax(230px, .75fr) minmax(0, 2fr); }
}
@media (max-width: 1030px) {
  .layout-two { grid-template-columns: 1fr; }
  .offer-list { max-height: 250px; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }
  .dashboard-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .expense-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dashboard-hero { grid-template-columns: minmax(0, 1fr) 260px; }
  .offer-workspace-layout { grid-template-columns: 1fr; }
  .offer-workspace-list { position: static; max-height: none; }
  .offer-workspace-list .offer-list { max-height: 250px; }
}
@media (max-width: 700px) {
  .auth-view { padding: 17px; background: linear-gradient(155deg, #073d68 0%, #0f668d 41%, #f5bb19 41%, #f5bb19 43%, #eef4f7 43%); }
  .auth-card { padding: 25px 21px; }
  .app-shell { display: block; }
  .app-sidebar { display: block; min-height: 0; overflow: visible; box-shadow: none; }
  .brand { padding: 13px 15px 10px; }
  .brand small, .connection span:last-child { display: none; }
  .brand-mark { width: 36px; height: 36px; border-radius: 10px; }
  .main-nav { display: flex; gap: 5px; overflow-x: auto; padding: 8px 10px 12px; }
  .nav-group { display: contents; }
  .nav-group-label, .sidebar-footer { display: none; }
  .main-nav button { flex: 0 0 auto; width: auto; min-height: 34px; padding: 7px 9px; border: 1px solid rgba(255,255,255,.15); border-radius: 7px; font-size: .78rem; }
  .main-nav button.active { border-color: var(--yellow); }
  .nav-icon { width: auto; font-size: .95rem; }
  .topbar { position: static; min-height: 53px; gap: 9px; padding: 8px 13px; }
  .topbar-context { display: none; }
  .topbar-actions { width: 100%; }
  .quiet-button, .account-button { min-height: 34px; padding: 6px 9px; }
  #refresh-button { margin-right: auto; }
  .account-button { max-width: 155px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .app-content { width: 100%; padding: 15px 12px 22px; }
  .page-heading { display: block; }
  .page-heading .heading-actions { margin-top: 12px; }
  .split-grid, .form-grid, .form-grid.three, .agreement-layout, .total-grid, .import-preview-grid, .mail-test-panel { grid-template-columns: 1fr; }
  .dashboard-grid { grid-template-columns: 1fr 1fr; }
  .dashboard-hero { grid-template-columns: 1fr; min-height: 0; background: linear-gradient(136deg, #063e67 0%, #0a7095 100%); }
  .dashboard-hero-art { display: none; }
  .dashboard-hero-copy { padding: 24px 20px; }
  .dashboard-hero-copy h1 { font-size: 1.7rem; }
  .dashboard-hero-copy p { font-size: .92rem; }
  .dashboard-side-stack { grid-template-columns: 1fr; }
  .schedule-row { grid-template-columns: 84px minmax(0, 1fr); gap: 9px; }
  .schedule-row .tag { display: none; }
  .quick-action-grid { grid-template-columns: 1fr 1fr; }
  .offer-create-note { grid-template-columns: 28px minmax(0, 1fr); }
  .offer-create-note button { grid-column: 2; justify-self: start; }
  .offer-step-index { overflow-x: auto; flex-wrap: nowrap; padding-bottom: 5px; }
  .offer-step-index a { flex: 0 0 auto; }
  .editor-toolbar { top: -1px; }
  .editor-toolbar .offer-number { flex-basis: 100%; }
  .service-card > header { align-items: flex-start; flex-direction: column; }
  .service-card .catalog-select { width: 100%; }
  .expense-grid { grid-template-columns: 1fr; }
  .preview-dialog > header { align-items: flex-start; flex-direction: column; }
  .offer-document { min-height: 0; margin: 0; padding: 26px 19px; }
  .offer-document-addresses { grid-template-columns: 1fr; gap: 18px; }
  .offer-cover { margin: -10px -10px 20px; }
  .offer-cover-meta { right: 4%; bottom: 3%; min-width: 0; padding: 7px 9px; }
  .offer-document-page { min-height: 0; }
  .signature-grid { grid-template-columns: 1fr; gap: 22px; margin-top: 42px; }
  .statusbar { display: flex; padding: 8px 12px; font-size: .72rem; }
}

@media print {
  body { background: #fff; }
  .app-sidebar, .topbar, .main-nav, .statusbar, .editor-toolbar, .no-print { display: none !important; }
  .app-content { width: 100%; margin: 0; padding: 0; }
  .card, .section-card, .service-card { box-shadow: none; break-inside: avoid; }
}