:root {
    --ink: #101827;
    --muted: #6f7b8f;
    --line: #e6eaf0;
    --paper: #f5f7fa;
    --navy: #0b1220;
    --navy-2: #111d31;
    --blue: #2367e8;
    --cyan: #31c8d8;
    --gold: #c8a46a;
    --shadow: 0 12px 34px rgba(16, 24, 39, .07);
}

* { box-sizing: border-box; }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: "Manrope", sans-serif; font-size: 15px; }
a { color: inherit; text-decoration: none; }
.eyebrow { display: block; margin-bottom: 8px; color: #3377e5; font-size: 11px; font-weight: 800; letter-spacing: .16em; }
.app-shell { min-height: 100vh; display: flex; }
.sidebar { position: fixed; z-index: 1040; inset: 0 auto 0 0; width: 248px; display: flex; flex-direction: column; padding: 24px 16px; color: #c9d2e0; background: linear-gradient(180deg, #0b1220 0%, #0d1728 100%); }
.brand { height: 50px; display: flex; align-items: center; gap: 12px; padding: 0 10px; color: #fff; }
.brand-mark, .install-logo span, .login-brand span, .mobile-brand span { width: 44px; height: 44px; display: grid; place-items: center; color: #fff; background: linear-gradient(145deg, #2e78f5, #20b7ce); border-radius: 11px; box-shadow: 0 8px 24px rgba(32, 132, 235, .3); }
.brand-logo { width:44px; height:44px; display:grid; place-items:center; flex:0 0 44px; object-fit:contain; padding:3px; background:#fff; border-radius:10px; }
.brand-logo.brand-logo-fallback { color:#fff; background:linear-gradient(145deg,#2e78f5,#20b7ce); }.brand-logo.brand-logo-fallback svg { width:22px; }
.brand-mark svg { width: 21px; }
.brand > span:last-child { display: flex; flex-direction: column; line-height: 1; }
.brand strong { font-size: 19px; letter-spacing: .12em; }
.brand small { margin-top: 7px; color: #78869c; font-size: 8px; letter-spacing: .25em; }
.sidebar-caption { margin: 28px 12px 10px; color: #65738a; font-size: 10px; font-weight: 800; letter-spacing: .18em; }
.sidebar-nav { display: flex; flex-direction: column; gap: 4px; overflow-y: auto; }
.sidebar-nav a { min-height: 46px; display: flex; align-items: center; gap: 12px; padding: 0 12px; border-radius: 9px; color: #8491a5; font-size: 13px; font-weight: 600; transition: .2s ease; }
.sidebar-nav a svg { width: 17px; }
.sidebar-nav a:hover, .sidebar-nav a.active { color: #fff; background: rgba(58, 120, 221, .14); }
.sidebar-nav a.active { box-shadow: inset 3px 0 #3d86fa; }
.sidebar-nav a small { margin-left: auto; color: #506078; font-size: 8px; text-transform: uppercase; }
.sidebar-footer { margin-top: auto; padding-top: 18px; }
.sidebar-help { display: flex; gap: 10px; padding: 14px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.05); border-radius: 11px; }
.sidebar-help svg { width: 16px; color: #4ea3ff; }
.sidebar-help div { display: flex; flex-direction: column; }
.sidebar-help strong { color: #dce4ef; font-size: 12px; }
.sidebar-help span { margin-top: 4px; color: #7d8da5; font-size: 10px; line-height: 1.5; }
.main-area { width: calc(100% - 248px); margin-left: 248px; }
.topbar { height: 74px; display: flex; align-items: center; justify-content: space-between; padding: 0 32px; background: rgba(255,255,255,.92); border-bottom: 1px solid var(--line); backdrop-filter: blur(14px); }
.topbar-title { display: flex; flex-direction: column; }
.topbar-title span { color: #9aa3b2; font-size: 11px; font-weight: 700; letter-spacing: .13em; }
.topbar-title strong { margin-top: 4px; font-size: 15px; }
.topbar-actions, .user-menu { display: flex; align-items: center; }
.topbar-actions { gap: 14px; }
.icon-button { position: relative; width: 38px; height: 38px; display: grid; place-items: center; padding: 0; color: #708097; background: #fff; border: 1px solid var(--line); border-radius: 10px; }
.icon-button svg { width: 17px; }
.notification-dot { position: absolute; top: 8px; right: 8px; width: 5px; height: 5px; background: #ef5555; border: 1px solid #fff; border-radius: 50%; }
.user-menu { gap: 9px; padding-left: 14px; border-left: 1px solid var(--line); }
.user-menu .avatar { width: 34px; height: 34px; display: grid; place-items: center; color: #fff; background: linear-gradient(145deg,#192a45,#2d5289); border-radius: 9px; font-weight: 800; }
.user-menu div { min-width: 105px; display: flex; flex-direction: column; }
.user-menu strong { font-size: 13px; }
.user-menu small { margin-top: 2px; color: #9aa4b2; font-size: 11px; }
.user-menu a { color: #9aa4b2; }
.user-menu a svg { width: 16px; }
.menu-toggle { display: none; }
.content { max-width: 1600px; margin: 0 auto; padding: 32px; }
.page-intro { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 26px; }
.page-intro h1 { margin: 0; font-size: 27px; font-weight: 800; letter-spacing: -.04em; }
.page-intro p { margin: 6px 0 0; color: var(--muted); font-size: 14px; }
.page-intro.compact { align-items: center; }
.intro-actions { display: flex; align-items: center; gap: 10px; }
.today { height: 41px; display: flex; align-items: center; gap: 8px; padding: 0 14px; color: #69758a; background: #fff; border: 1px solid var(--line); border-radius: 9px; font-size: 11px; font-weight: 600; }
.today svg, .btn-premium svg { width: 15px; }
.btn-premium { min-height: 43px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 0 18px; color: #fff; background: linear-gradient(135deg, #2469eb, #1854c7); border: 0; border-radius: 9px; box-shadow: 0 8px 18px rgba(32, 101, 226, .22); font-size: 13px; font-weight: 700; }
.btn-premium:disabled { opacity: .5; }
.btn-measure { min-height: 47px; display:inline-flex; align-items:center; gap:10px; padding:0 17px; color:#fff; background:linear-gradient(135deg,#0fa993,#087d91); border-radius:10px; box-shadow:0 10px 22px rgba(10,151,139,.25); transition:.2s ease; }
.btn-measure:hover { color:#fff; transform:translateY(-1px); box-shadow:0 13px 26px rgba(10,151,139,.32); }
.btn-measure>svg { width:20px; }
.btn-measure>span { display:flex; flex-direction:column; font-size:13px; font-weight:800; line-height:1.15; }
.btn-measure small { margin-bottom:3px; color:#bff8ec; font-size:7px; font-weight:800; letter-spacing:.12em; }
.metric-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.metric-card { position:relative; min-height: 128px; display: flex; align-items: center; gap: 17px; padding: 22px; color:inherit; background: #fff; border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 5px 18px rgba(20,31,51,.025); transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease; }
.metric-card:hover { color:inherit; border-color:#cbd9ed; box-shadow:0 10px 25px rgba(25,53,91,.08); transform:translateY(-2px); }
.metric-card:focus-visible { outline:3px solid rgba(35,103,232,.2); outline-offset:2px; }
.metric-arrow { position:absolute; top:14px; right:14px; width:14px; color:#a1adbd; opacity:0; transition:.2s ease; }
.metric-card:hover .metric-arrow,.metric-card:focus-visible .metric-arrow { color:#3977dc; opacity:1; }
.metric-icon { width: 43px; height: 43px; display: grid; flex: 0 0 auto; place-items: center; border-radius: 11px; }
.metric-icon svg { width: 19px; }
.metric-icon.blue { color: #2874ec; background: #edf4ff; }
.metric-icon.amber { color: #d99222; background: #fff6e8; }
.metric-icon.violet { color: #825add; background: #f3efff; }
.metric-icon.green { color: #1ba77c; background: #eafaf5; }
.metric-card > div:last-of-type { display: flex; flex-direction: column; }
.metric-card span { color: #798599; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.metric-card strong { margin: 4px 0 5px; font-size: 25px; letter-spacing: -.04em; }
.metric-card small { color: #8994a5; font-size: 11px; }
.metric-card small b { color: #22a17b; }
.finance-strip { min-height: 98px; display: flex; align-items: center; gap: 26px; margin: 15px 0; padding: 20px 24px; color: #fff; background: linear-gradient(115deg,#101b2f,#172943); border-radius: 12px; box-shadow: var(--shadow); }
.finance-strip > div:not(.finance-divider):not(.finance-note) { min-width: 230px; display: flex; align-items: center; gap: 14px; }
.finance-icon { width: 39px; height: 39px; display: grid; place-items: center; color: #55d7e1; background: rgba(62,208,220,.1); border-radius: 10px; }
.finance-icon.warm { color: #e7bd7d; background: rgba(231,189,125,.1); }
.finance-icon svg { width: 18px; }
.finance-strip div div { display: flex; flex-direction: column; }
.finance-strip small { color: #8494aa; font-size: 11px; font-weight: 800; letter-spacing: .1em; }
.finance-strip strong { margin-top: 5px; font-size: 20px; }
.finance-divider { width: 1px; height: 45px; background: rgba(255,255,255,.08); }
.finance-note { margin-left: auto; display: flex; align-items: center; gap: 8px; color: #8798ae; font-size: 11px; }
.finance-note svg { width: 16px; color: #36b990; }
.dashboard-grid { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(290px, .8fr); gap: 15px; }
.panel-card { background: #fff; border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 5px 20px rgba(20,31,51,.025); overflow: hidden; }
.panel-heading { height: 76px; display: flex; align-items: center; justify-content: space-between; padding: 0 22px; border-bottom: 1px solid var(--line); }
.panel-heading h2 { margin: 0; font-size: 17px; font-weight: 800; }
.panel-heading a { display: flex; align-items: center; gap: 5px; color: #3476df; font-size: 12px; font-weight: 700; }
.panel-heading a svg { width: 13px; }
.premium-table { width: 100%; border-collapse: collapse; }
.premium-table th { padding: 13px 18px; color: #7f8a9b; background: #fafbfc; border-bottom: 1px solid var(--line); font-size: 10px; letter-spacing: .08em; white-space: nowrap; }
.premium-table td { padding: 16px 18px; color: #556175; border-bottom: 1px solid #edf0f4; font-size: 12px; white-space: nowrap; }
.premium-table tr:last-child td { border-bottom: 0; }
.premium-table td > strong, .premium-table td > small { display: block; }
.premium-table td strong { color: #293448; font-size: 12px; }
.premium-table td small { margin-top: 4px; color: #8e98a7; font-size: 10px; }
.premium-table .job-no { color: #3072df; }
.status { display: inline-flex; align-items: center; padding: 6px 9px; border-radius: 20px; font-size: 10px; font-weight: 700; }
.status-primary { color: #2f6ede; background: #edf4ff; }
.status-success { color: #178b68; background: #e9f8f2; }
.status-warning { color: #bc7d1b; background: #fff5e6; }
.status-danger { color: #cc5252; background: #fff0f0; }
.status-info { color: #327e91; background: #e8f7fa; }
.period-pill { padding: 5px 9px; color: #718097; background: #f5f7fa; border-radius: 6px; font-size: 9px; }
.donut-wrap { display: grid; place-items: center; padding: 22px 0 16px; }
.donut { width: 126px; height: 126px; display: grid; place-items: center; background: conic-gradient(#3478ea var(--value), #eaf0f7 0); border-radius: 50%; }
.donut::before { content: ""; grid-area: 1/1; width: 92px; height: 92px; background: #fff; border-radius: 50%; }
.donut div { z-index: 1; grid-area: 1/1; display: flex; flex-direction: column; align-items: center; }
.donut strong { font-size: 25px; }
.donut small { color: #95a0af; font-size: 9px; }
.status-bars { padding: 0 23px 22px; }
.status-bars > div { margin-top: 10px; }
.status-bars span { display: flex; justify-content: space-between; margin-bottom: 5px; font-size: 8px; }
.status-bars b { color: #596579; }
.status-bars small { color: #a0a9b5; }
.bar { height: 4px; overflow: hidden; background: #edf1f5; border-radius: 5px; }
.bar i { height: 100%; display: block; background: linear-gradient(90deg,#3778e8,#42c3d8); border-radius: inherit; }
.empty-state { padding: 30px !important; color: #9aa4b2 !important; text-align: center; }
.list-toolbar { min-height: 67px; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 13px 18px; border-bottom: 1px solid var(--line); }
.search-box { height: 38px; display: flex; align-items: center; min-width: 330px; padding-left: 12px; background: #f8f9fb; border: 1px solid var(--line); border-radius: 8px; }
.search-box svg { width: 15px; color: #94a0b1; }
.search-box input { height: 100%; flex: 1; padding: 0 10px; background: transparent; border: 0; outline: 0; font-size: 12px; }
.search-box button { height: 100%; padding: 0 13px; color: #4777c7; background: transparent; border: 0; font-size: 11px; font-weight: 700; }
.record-count { color: #788598; font-size: 12px; }
.advanced-filters { padding:18px; background:#fafbfd; border-bottom:1px solid var(--line); }
.filter-search { position:relative; margin-bottom:13px; }.filter-search svg { position:absolute; z-index:2; top:50%; left:14px; width:16px; color:#8492a5; transform:translateY(-50%); }.filter-search input { padding-left:42px; }
.filter-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; }.filter-grid label { display:block; margin-bottom:5px; color:#657287; font-size:9px; font-weight:700; }.filter-grid .form-control,.filter-grid .form-select { min-height:39px; font-size:11px; }
.filter-actions { display:flex; align-items:center; justify-content:space-between; margin-top:12px; }.filter-actions span { color:#8090a5; font-size:10px; }.filter-actions .btn { font-size:10px; }.filter-actions svg { width:13px; }
.import-help { margin-top:12px; padding:11px; color:#67758a; background:#f5f8fb; border-radius:8px; font-size:10px; line-height:1.7; }.import-help code { color:#285fae; white-space:normal; }
.backup-info { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }.backup-info article { display:flex; align-items:center; gap:14px; padding:20px; background:#fff; border:1px solid var(--line); border-radius:11px; }.backup-info article>svg { width:24px; color:#2f72db; }.backup-info article div { display:flex; flex-direction:column; }.backup-info span { color:#7d899b; font-size:10px; }.backup-info strong { margin-top:5px; font-size:13px; }.backup-type { padding:5px 8px; border-radius:6px; font-size:9px; font-weight:800; }.backup-type.sql { color:#82631d; background:#fff5d9; }.backup-type.xlsx { color:#16785a; background:#e8f8f1; }
.settings-grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(420px,.85fr); gap:15px; }.settings-form { padding:22px; }.settings-submit { display:flex; justify-content:flex-end; margin-top:20px; }
.logo-setting { display:flex; align-items:center; gap:18px; margin-bottom:22px; padding:17px; background:#f7f9fb; border-radius:10px; }.logo-setting label { display:flex; flex:1; flex-direction:column; }.logo-setting strong { font-size:12px; }.logo-setting small { margin:4px 0 9px; color:#8390a2; font-size:9px; }
.logo-preview { width:92px; height:92px; display:grid; place-items:center; flex:0 0 92px; overflow:hidden; background:#fff; border:1px solid var(--line); border-radius:12px; }.settings-logo { width:80px; height:80px; display:grid; place-items:center; object-fit:contain; }.settings-logo.brand-logo-fallback { color:#fff; background:linear-gradient(145deg,#2e78f5,#20b7ce); border-radius:11px; }.settings-logo svg { width:34px; }
.user-cards { padding:10px 20px 20px; }.user-cards article { display:flex; align-items:center; gap:12px; padding:14px 2px; border-bottom:1px solid var(--line); }.user-cards article>.avatar { width:38px; height:38px; display:grid; place-items:center; color:#fff; background:#244873; border-radius:9px; font-weight:800; }.user-cards article>div { display:flex; flex:1; flex-direction:column; }.user-cards strong { font-size:12px; }.user-cards small { margin-top:3px; color:#8a96a7; font-size:9px; }.user-cards em { width:fit-content; margin-top:5px; padding:3px 6px; color:#316bc1; background:#edf4ff; border-radius:5px; font-size:8px; font-style:normal; font-weight:700; }
.customer-cell { display: flex; align-items: center; gap: 10px; }
.customer-cell > span { width: 31px; height: 31px; display: grid; place-items: center; color: #306fcf; background: #edf4ff; border-radius: 8px; font-size: 11px; font-weight: 800; }
.customer-cell div { display: flex; flex-direction: column; }
.table-action { width: 30px; height: 30px; display: inline-grid; place-items: center; margin-left: 3px; color: #6f7e93; background: #f6f8fa; border-radius: 7px; }
.table-action svg { width: 13px; }
.table-action.whatsapp { color: #15966d; }
.filter-pills { display: flex; gap: 5px; overflow-x: auto; }
.filter-pills a { padding: 8px 12px; color: #788599; background: #f7f8fa; border-radius: 7px; font-size: 11px; font-weight: 600; white-space: nowrap; }
.filter-pills a.active { color: #fff; background: #2869d7; }
.premium-modal { border: 0; border-radius: 14px; box-shadow: 0 30px 80px rgba(13,24,41,.2); }
.premium-modal .modal-header, .premium-modal .modal-footer { padding: 20px 24px; border-color: var(--line); }
.premium-modal .modal-header h2 { margin: 0; font-size: 19px; font-weight: 800; }
.premium-modal .modal-body { padding: 24px; }
.form-label { margin-bottom: 7px; color: #4c586b; font-size: 12px; font-weight: 700; }
.form-control, .form-select { min-height: 45px; color: #263246; border-color: #dfe4eb; border-radius: 8px; font-size: 13px; }
.form-control:focus, .form-select:focus { border-color: #6d9eeb; box-shadow: 0 0 0 3px rgba(51,119,229,.1); }
textarea.form-control { padding-top: 12px; }
.measurement-intro { padding:20px 22px; color:#fff; background:linear-gradient(115deg,#0d2134,#123d4a); border-radius:14px; box-shadow:var(--shadow); }
.measurement-intro p { color:#a9c3cc; }
.measurement-intro .eyebrow { color:#55ddca; }
.field-ready { display:inline-flex; align-items:center; gap:8px; padding:10px 13px; color:#c9fff6; background:rgba(42,207,182,.1); border:1px solid rgba(88,226,205,.18); border-radius:9px; font-size:10px; font-weight:700; }
.field-ready svg { width:16px; }
.measurement-layout { display:grid; grid-template-columns:minmax(0,1fr) 330px; align-items:start; gap:16px; }
.measurement-form { overflow:visible; }
.measurement-section { display:grid; grid-template-columns:42px 1fr; gap:15px; padding:24px; border-bottom:1px solid var(--line); }
.section-number { width:34px; height:34px; display:grid; place-items:center; color:#fff; background:linear-gradient(145deg,#246fe6,#19a8b3); border-radius:10px; box-shadow:0 7px 16px rgba(34,111,220,.18); font-size:12px; font-weight:800; }
.section-content { min-width:0; }
.measurement-heading { display:flex; align-items:center; justify-content:space-between; gap:15px; margin-bottom:18px; }
.measurement-heading h2 { margin:0; font-size:17px; font-weight:800; }
.customer-mode { display:grid; grid-template-columns:repeat(2,1fr); gap:9px; margin-bottom:16px; }
.customer-mode input { position:absolute; opacity:0; }
.customer-mode span { min-height:48px; display:flex; align-items:center; justify-content:center; gap:8px; color:#647389; background:#f7f9fb; border:1px solid var(--line); border-radius:9px; cursor:pointer; font-size:11px; font-weight:700; }
.customer-mode span svg { width:16px; }
.customer-mode input:checked+span { color:#1769c9; background:#edf5ff; border-color:#7eacec; box-shadow:0 0 0 3px rgba(45,113,222,.07); }
.location-button { min-height:38px; display:inline-flex; align-items:center; gap:7px; padding:0 12px; color:#15816f; background:#eaf9f5; border:1px solid #bce9de; border-radius:8px; font-size:10px; font-weight:800; }
.location-button svg { width:14px; }
.location-status { display:flex; align-items:center; gap:8px; padding:10px 12px; color:#7c899b; background:#f7f9fb; border-radius:8px; font-size:10px; }
.location-status svg { width:14px; }
.location-status.success { color:#147d62; background:#eaf8f3; }
.location-status.error { color:#b24c55; background:#fff0f1; }
.live-area { min-width:150px; padding:10px 13px; color:#fff; background:linear-gradient(135deg,#13243d,#1d4360); border-radius:9px; text-align:right; }
.live-area small { display:block; color:#8fa9bb; font-size:7px; font-weight:800; letter-spacing:.1em; }
.live-area strong { display:block; margin-top:3px; color:#52dddc; font-size:16px; }
.measurement-inputs { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; }
.measurement-inputs>label>span { display:block; margin-bottom:6px; color:#536176; font-size:10px; font-weight:700; }
.measurement-inputs>label>div { position:relative; }
.measurement-inputs input { padding-right:42px; font-weight:700; }
.measurement-inputs b { position:absolute; top:50%; right:12px; color:#8390a1; font-size:9px; transform:translateY(-50%); }
.field-photo-upload { min-height:145px; display:flex; align-items:center; justify-content:center; flex-direction:column; padding:20px; color:#53657b; background:linear-gradient(145deg,#f7fbff,#f1fbf9); border:1px dashed #7eb9c5; border-radius:12px; cursor:pointer; text-align:center; }
.field-photo-upload input { position:absolute; width:1px; height:1px; opacity:0; }
.field-camera { width:45px; height:45px; display:grid; place-items:center; margin-bottom:10px; color:#fff; background:linear-gradient(145deg,#2674e5,#12a799); border-radius:12px; box-shadow:0 8px 20px rgba(26,137,178,.23); }
.field-camera svg { width:21px; }
.field-photo-upload strong { font-size:12px; }
.field-photo-upload small { max-width:430px; margin-top:5px; color:#8795a7; font-size:9px; line-height:1.5; }
.photo-preview-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin-top:10px; }
.photo-preview-grid:empty { display:none; }
.photo-preview-grid div { position:relative; overflow:hidden; aspect-ratio:4/3; background:#eef2f6; border-radius:8px; }
.photo-preview-grid img { width:100%; height:100%; object-fit:cover; }
.photo-preview-grid span { position:absolute; inset:auto 0 0; overflow:hidden; padding:5px 7px; color:#fff; background:linear-gradient(transparent,rgba(7,17,31,.8)); font-size:7px; text-overflow:ellipsis; white-space:nowrap; }
.measurement-submit { display:flex; align-items:center; justify-content:space-between; gap:18px; padding:20px 24px; background:#f8fafc; border-radius:0 0 12px 12px; }
.measurement-submit>div { display:flex; align-items:center; gap:8px; color:#718095; font-size:9px; }
.measurement-submit>div svg { width:16px; color:#1a9b7d; }
.field-save { min-height:48px; }
.recent-measurements { position:sticky; top:90px; }
.recent-measurements article { display:flex; align-items:center; gap:10px; padding:15px 17px; border-bottom:1px solid var(--line); }
.recent-measurements article:last-child { border-bottom:0; }
.measurement-record-icon { width:35px; height:35px; display:grid; flex:0 0 35px; place-items:center; color:#2673dc; background:#edf4ff; border-radius:9px; }
.measurement-record-icon svg { width:16px; }
.recent-measurements article>div { min-width:0; display:flex; flex:1; flex-direction:column; }
.recent-measurements article strong { overflow:hidden; font-size:11px; text-overflow:ellipsis; white-space:nowrap; }
.recent-measurements article small { overflow:hidden; margin-top:3px; color:#8a96a7; font-size:8px; text-overflow:ellipsis; white-space:nowrap; }
.recent-measurements article em { margin-top:5px; color:#168a78; font-size:8px; font-style:normal; font-weight:700; }
.recent-measurements article>a { color:#6e7d91; }
.recent-measurements article>a svg { width:14px; }
.drawing-layout { display: grid; grid-template-columns: minmax(330px,.72fr) minmax(520px,1.28fr); gap: 16px; }
.drawing-form-body { padding: 22px; }
.drawing-form-body hr { margin: 22px 0; border-color: var(--line); opacity: 1; }
.shape-picker { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; margin-bottom: 20px; }
.shape-picker input { position: absolute; opacity: 0; }
.shape-picker span { min-height: 70px; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 7px; padding: 8px; color: #718096; background: #f7f9fc; border: 1px solid var(--line); border-radius: 9px; cursor: pointer; font-size: 11px; font-weight: 700; text-align: center; }
.shape-picker span svg { width: 20px; }
.shape-picker input:checked + span { color: #2165d4; background: #edf4ff; border-color: #77a7ee; box-shadow: 0 0 0 3px rgba(45,113,222,.08); }
.segment-inputs { margin-bottom: 18px; }
.segment-row { display: grid; grid-template-columns: 1fr 115px 20px; align-items: center; gap: 8px; margin-bottom: 8px; }
.segment-row span { color: #556378; font-size: 12px; font-weight: 600; }
.segment-row small { color: #8b97a8; font-size: 11px; }
.canvas-wrap { padding: 18px; background: #eef3f8; }
#balconyCanvas { width: 100%; height: auto; display: block; background: #f7f9fc; border: 1px solid #dce4ee; border-radius: 10px; }
.preview-switcher { min-height:58px; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:9px 18px; background:#f8fafc; border-bottom:1px solid var(--line); }
.preview-tabs { display:flex; gap:6px; }
.preview-tabs button { min-height:36px; display:inline-flex; align-items:center; gap:6px; padding:0 12px; color:#6d7b8e; background:#fff; border:1px solid #dce3ec; border-radius:8px; font-size:10px; font-weight:800; }
.preview-tabs button svg { width:14px; }
.preview-tabs button small { padding:3px 5px; color:#0b7c68; background:#dff8f1; border-radius:4px; font-size:6px; letter-spacing:.08em; }
.preview-tabs button.active { color:#fff; background:#1d63d6; border-color:#1d63d6; box-shadow:0 5px 12px rgba(29,99,214,.18); }
.preview-tabs button.active small { color:#d5fff8; background:rgba(255,255,255,.14); }
.three-controls { display:flex; align-items:center; gap:7px; }
.three-controls label { display:flex; align-items:center; gap:6px; color:#718095; font-size:8px; font-weight:800; text-transform:uppercase; }
.three-controls .form-select { min-width:98px; min-height:34px; padding-top:4px; padding-bottom:4px; font-size:9px; text-transform:none; }
.three-controls>button { width:34px; height:34px; display:grid; place-items:center; color:#64748a; background:#fff; border:1px solid #dce3ec; border-radius:8px; }
.three-controls>button svg { width:14px; }
.three-controls .place-photo-button { width:auto; padding:0 10px; gap:6px; color:#087b6c; background:#e8f8f4; border-color:#b9e7dc; font-size:8px; font-weight:800; }
.three-controls .place-photo-button span { white-space:nowrap; }
.three-wrap { position:relative; overflow:hidden; min-height:360px; background:#eef3f7; }
#balcony3d { width:100%; min-height:360px; cursor:grab; touch-action:none; }
#balcony3d:active { cursor:grabbing; }
#balcony3d canvas { width:100%; display:block; }
.three-hint { position:absolute; left:50%; bottom:14px; display:flex; align-items:center; gap:7px; padding:8px 11px; color:#64758a; background:rgba(255,255,255,.88); border:1px solid rgba(207,217,227,.9); border-radius:20px; backdrop-filter:blur(8px); font-size:8px; transform:translateX(-50%); white-space:nowrap; }
.three-hint svg { width:13px; color:#2770d8; }
.three-loading { position:absolute; z-index:2; inset:0; display:flex; align-items:center; justify-content:center; flex-direction:column; gap:10px; color:#68788c; background:#eef3f7; transition:.25s ease; }
.three-loading.hidden { visibility:hidden; opacity:0; }
.three-loading span { width:28px; height:28px; border:3px solid #d5e0e9; border-top-color:#2670db; border-radius:50%; animation:three-spin .8s linear infinite; }
.three-loading b { font-size:9px; }
.three-model-summary { position:absolute; top:13px; left:13px; display:flex; gap:5px; flex-wrap:wrap; max-width:75%; }
.three-model-summary span { padding:6px 8px; color:#657489; background:rgba(255,255,255,.88); border:1px solid rgba(207,218,228,.9); border-radius:7px; backdrop-filter:blur(8px); font-size:7px; }
.three-model-summary b { color:#1f3854; }
.photo-placement { position:relative; min-height:420px; padding:14px; background:#e9eff4; }
.placement-toolbar { display:flex; align-items:center; gap:8px; margin-bottom:10px; padding:11px 12px; background:#fff; border-radius:9px; }
.placement-toolbar>div { display:flex; flex:1; flex-direction:column; }
.placement-toolbar strong { font-size:10px; }
.placement-toolbar small { margin-top:3px; color:#8391a3; font-size:8px; }
.placement-toolbar>span { padding:6px 9px; color:#176d63; background:#e8f8f4; border-radius:6px; font-size:8px; font-weight:800; white-space:nowrap; }
.placement-toolbar button { min-height:32px; display:inline-flex; align-items:center; gap:5px; padding:0 9px; color:#617085; background:#f7f9fb; border:1px solid var(--line); border-radius:7px; font-size:8px; font-weight:700; }
.placement-toolbar button svg { width:12px; }
#placementCanvas { width:100%; height:auto; display:block; background:#e6edf2; border:1px solid #d2dce5; border-radius:10px; cursor:crosshair; touch-action:none; }
.placement-empty { position:absolute; inset:80px 14px 14px; display:flex; align-items:center; justify-content:center; flex-direction:column; gap:7px; color:#7a899c; background:rgba(233,239,244,.94); border-radius:10px; text-align:center; pointer-events:none; }
.placement-empty svg { width:30px; color:#3778df; }
.placement-empty strong { font-size:12px; }
.placement-empty span { font-size:9px; }
@keyframes three-spin { to { transform:rotate(360deg); } }
.calculation-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 1px; background: var(--line); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.calculation-grid > div { display: flex; flex-direction: column; padding: 17px 19px; background: #fff; }
.calculation-grid span { color: #7a8799; font-size: 11px; font-weight: 600; }
.calculation-grid strong { margin-top: 5px; color: #1e2b3f; font-size: 16px; }
.offer-total { display: flex; align-items: center; justify-content: space-between; padding: 20px 22px; color: #fff; background: linear-gradient(115deg,#101b2f,#1a3152); }
.offer-total div { display: flex; flex-direction: column; }
.offer-total span { color: #82a3cb; font-size: 11px; font-weight: 800; letter-spacing: .08em; }
.offer-total small { margin-top: 4px; color: #6d819b; font-size: 10px; }
.offer-total strong { color: #65d2df; font-size: 25px; }
.drawing-actions { display: flex; justify-content: flex-end; gap: 9px; padding: 17px 22px; }
.drawing-actions .btn { min-height: 43px; font-size: 12px; font-weight: 700; }
.drawing-mode-picker { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 20px; }
.drawing-mode-picker input { position: absolute; opacity: 0; }
.drawing-mode-picker span { min-height: 48px; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 8px; color: #6e7c90; background: #f7f9fc; border: 1px solid var(--line); border-radius: 9px; cursor: pointer; font-size: 11px; font-weight: 700; }
.drawing-mode-picker span svg { width: 17px; }
.drawing-mode-picker input:checked + span { color: #2165d4; background: #edf4ff; border-color: #77a7ee; box-shadow: 0 0 0 3px rgba(45,113,222,.08); }
.photo-upload { min-height: 82px; display: flex; align-items: center; gap: 13px; padding: 15px; color: #5f6e82; background: #f7faff; border: 1px dashed #91b5ea; border-radius: 10px; cursor: pointer; }
.photo-upload input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.photo-upload > svg { width: 25px; color: #2d70de; }
.photo-upload > span { display: flex; flex-direction: column; }
.photo-upload strong { color: #263750; font-size: 12px; }
.photo-upload small { margin-top: 4px; color: #8895a7; font-size: 9px; line-height: 1.5; }
.photo-select-button { width: fit-content; min-height: 34px; display: inline-flex; align-items: center; gap: 7px; margin-top: 11px; padding: 0 12px; color: #fff; background: #2469df; border-radius: 7px; font-size: 10px; font-style: normal; }
.photo-select-button svg { width: 13px; }
.photo-upload em { max-width: 280px; margin-top: 7px; overflow: hidden; color: #66758a; font-size: 9px; font-style: normal; text-overflow: ellipsis; white-space: nowrap; }
.photo-workflow { display: grid; gap: 7px; margin: 13px 0 18px; }
.photo-workflow div { display: flex; align-items: center; gap: 9px; color: #748196; font-size: 10px; }
.photo-workflow b { width: 22px; height: 22px; display: grid; place-items: center; color: #2d70de; background: #edf4ff; border-radius: 50%; font-size: 9px; }
.photo-segment-list { margin-bottom: 18px; }
.photo-empty { padding: 14px; color: #8b97a8; background: #f8f9fb; border-radius: 8px; font-size: 10px; text-align: center; }
.photo-segment-row { display: grid; grid-template-columns: 28px 62px 1fr 28px; align-items: center; gap: 7px; margin-bottom: 7px; }
.photo-segment-row > b { width: 25px; height: 25px; display: grid; place-items: center; color: #fff; background: var(--segment-color); border-radius: 7px; font-size: 10px; }
.photo-segment-row > span { color: #46566d; font-size: 10px; font-weight: 700; }
.photo-segment-row .form-select { min-height: 36px; padding-top: 6px; padding-bottom: 6px; font-size: 10px; }
.photo-segment-row button { width: 27px; height: 27px; color: #c34f59; background: #fff1f2; border: 0; border-radius: 7px; font-size: 17px; }
.photo-toolbar { min-height: 52px; display: flex; align-items: center; gap: 7px; padding: 8px 18px; background: #f8fafc; border-bottom: 1px solid var(--line); }
.photo-toolbar button { min-height: 34px; display: inline-flex; align-items: center; gap: 6px; padding: 0 10px; color: #68778c; background: #fff; border: 1px solid #dce3ec; border-radius: 7px; font-size: 10px; font-weight: 700; }
.photo-toolbar button.active { color: #fff; background: #2569d9; border-color: #2569d9; }
.photo-toolbar button:disabled { opacity: .45; }
.photo-toolbar button svg { width: 13px; }
.photo-toolbar > span { margin-left: auto; color: #7f8c9e; font-size: 10px; }
#balconyCanvas { touch-action: none; cursor: crosshair; }
.drawing-thumb { width: 54px; height: 42px; display: inline-grid; place-items: center; object-fit: cover; background: #edf2f7; border: 1px solid #dfe5ed; border-radius: 7px; }
.drawing-thumb.placeholder { color: #8090a5; }
.drawing-thumb.placeholder svg { width: 17px; }
.pricing-summary { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; }
.package-card { position: relative; overflow: hidden; display: flex; flex-direction: column; padding: 22px; background: #fff; border: 1px solid var(--line); border-radius: 12px; }
.package-card::after { content:""; position:absolute; inset:0 auto 0 0; width:4px; background:#7e8da3; }
.package-card.economic::after { background:#25a27d; }.package-card.standard::after { background:#d99a37; }.package-card.premium::after { background:#3977df; }
.package-card span { color:#728096; font-size:11px; font-weight:800; text-transform:uppercase; }.package-card strong { margin-top:6px; font-size:20px; }.package-card small { margin-top:6px; color:#919baa; font-size:10px; }
.recipe-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; padding:18px; }
.recipe-card { padding:18px; border:1px solid var(--line); border-radius:10px; }
.recipe-card header { display:flex; align-items:center; justify-content:space-between; }.recipe-card header a { color:#7b899c; }.recipe-card header svg { width:16px; }
.recipe-card h3 { margin:14px 0 6px; font-size:15px; }.recipe-card p { min-height:34px; color:#7c899b; font-size:10px; line-height:1.6; }
.recipe-card dl { margin:14px 0 0; }.recipe-card dl div { display:flex; justify-content:space-between; gap:12px; padding:8px 0; border-top:1px solid var(--line); font-size:10px; }.recipe-card dt { color:#8793a4; font-weight:500; }.recipe-card dd { margin:0; color:#344156; font-weight:700; text-align:right; }
.pricing-block-title { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:12px; }.pricing-block-title > div { display:flex; flex-direction:column; }.pricing-block-title strong { font-size:12px; }.pricing-block-title small { margin-top:3px; color:#8b97a7; font-size:9px; }.pricing-block-title a { display:flex; align-items:center; gap:5px; color:#2d70da; font-size:10px; font-weight:700; }.pricing-block-title a svg { width:13px; }
.package-picker { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }.package-picker input { position:absolute; opacity:0; }.package-picker span { min-height:130px; display:flex; flex-direction:column; padding:12px; background:#f8fafc; border:1px solid var(--line); border-radius:9px; cursor:pointer; }.package-picker input:checked+span { background:#edf4ff; border-color:#6d9feb; box-shadow:0 0 0 3px rgba(40,108,218,.08); }.package-picker b { color:#2c6dd4; font-size:9px; text-transform:uppercase; }.package-picker strong { margin-top:7px; font-size:11px; }.package-picker small { margin-top:5px; color:#8591a2; font-size:8px; line-height:1.5; }.package-picker em { margin-top:auto; padding-top:9px; color:#17345e; border-top:1px solid #dfe6ef; font-size:12px; font-style:normal; font-weight:800; }
.selected-recipe-detail { display:grid; gap:5px; margin-top:10px; padding:11px; background:#f7f9fb; border-radius:8px; }.selected-recipe-detail span { color:#657389; font-size:9px; }.selected-recipe-detail b { display:inline-block; min-width:55px; color:#34445b; }
.cost-breakdown { display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border-bottom:1px solid var(--line); }.cost-breakdown>div { display:flex; flex-direction:column; padding:12px 16px; background:#fafbfd; }.cost-breakdown span { color:#8190a3; font-size:9px; }.cost-breakdown strong { margin-top:4px; font-size:11px; }.cost-breakdown p { grid-column:1/-1; margin:0; padding:10px 16px; font-size:10px; font-weight:700; }.cost-breakdown p.healthy { color:#177c60; background:#eaf8f3; }.cost-breakdown p.danger { color:#b34949; background:#fff0f0; }
.kanban-board { display: flex; gap: 13px; padding-bottom: 16px; overflow-x: auto; }
.kanban-column { width: 275px; min-width: 275px; background: #eef2f6; border: 1px solid #e0e5ec; border-radius: 11px; }
.kanban-column > header { height: 52px; display: flex; align-items: center; justify-content: space-between; padding: 0 14px; color: #48576c; font-size: 12px; font-weight: 800; }
.kanban-column > header b { min-width: 25px; padding: 4px 7px; color: #64748a; background: #fff; border-radius: 12px; font-size: 10px; text-align: center; }
.kanban-dropzone { min-height: 500px; padding: 0 9px 10px; transition: background .2s; }
.kanban-dropzone.over { background: #dfe9f7; }
.kanban-card { margin-bottom: 9px; padding: 15px; background: #fff; border: 1px solid #e0e5eb; border-radius: 9px; box-shadow: 0 4px 13px rgba(25,40,64,.04); cursor: grab; }
.kanban-card.dragging { opacity: .45; }
.kanban-card > small { color: #3572d4; font-size: 10px; font-weight: 800; }
.kanban-card h3 { margin: 8px 0 4px; font-size: 13px; font-weight: 800; }
.kanban-card p { margin: 0; color: #758195; font-size: 11px; }
.kanban-card footer { display: flex; justify-content: space-between; margin-top: 14px; padding-top: 11px; border-top: 1px solid #edf0f4; }
.kanban-card footer strong { font-size: 11px; }
.kanban-card footer span { color: #909baa; font-size: 10px; }
.offer-sheet { max-width: 1000px; margin-inline: auto; padding: 42px; background: #fff; border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); }
.offer-sheet > header { display: flex; align-items: center; justify-content: space-between; padding-bottom: 28px; border-bottom: 2px solid #172943; }
.offer-sheet > header > div { display: flex; align-items: center; gap: 12px; }
.offer-sheet > header h2 { margin: 0; letter-spacing: .15em; }
.offer-sheet > header > div:last-child { align-items: flex-end; flex-direction: column; }
.offer-sheet > header small, .offer-sheet section small { color: #8a96a7; font-size: 10px; font-weight: 800; letter-spacing: .12em; }
.offer-sheet > section { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; padding: 28px 0; }
.offer-sheet > section > div { display: flex; flex-direction: column; gap: 5px; }
.offer-sheet > section span { color: #69768a; font-size: 12px; }
.offer-sheet table { width: 100%; border-collapse: collapse; }
.offer-sheet th, .offer-sheet td { padding: 13px; border-bottom: 1px solid var(--line); font-size: 12px; text-align: left; }
.offer-sheet th { color: #758195; background: #f7f9fb; font-size: 10px; }
.offer-sheet > footer { display: flex; justify-content: flex-end; padding: 24px 0; }
.offer-sheet > footer > div { min-width: 320px; display: grid; grid-template-columns: 1fr auto; gap: 10px 20px; }
.offer-sheet > footer span { color: #6e7a8e; font-size: 12px; }
.offer-sheet > footer b, .offer-sheet > footer em { padding-top: 11px; border-top: 1px solid var(--line); font-style: normal; }
.offer-sheet > footer em { color: #2367e8; font-size: 19px; font-weight: 800; }
.offer-company-info { padding:12px 0; color:#7b8798; border-top:1px solid var(--line); font-size:10px; text-align:center; }
.sheet-actions, .sheet-actions form { display: flex; align-items: center; justify-content: flex-end; gap: 9px; }
.sheet-actions .form-select { width: 145px; }
.module-split { display: grid; grid-template-columns: 310px minmax(0,1fr); gap: 15px; }
.module-list > a { display: flex; flex-direction: column; gap: 3px; padding: 15px 18px; border-bottom: 1px solid var(--line); }
.module-list > a:hover, .module-list > a.active { background: #edf4ff; }
.module-list > a strong { color: #2568d3; font-size: 12px; }
.module-list > a span { margin-top: 3px; font-size: 12px; font-weight: 700; }
.module-list > a small { color: #8b96a5; font-size: 10px; }
.production-list { padding: 10px 20px 20px; }
.production-step button { width: 100%; display: flex; align-items: center; gap: 14px; padding: 14px 5px; color: inherit; background: transparent; border: 0; border-bottom: 1px solid var(--line); text-align: left; }
.production-step button > span { width: 34px; height: 34px; display: grid; place-items: center; flex: 0 0 auto; color: #6f7e92; background: #f0f3f7; border-radius: 50%; font-size: 11px; font-weight: 800; }
.production-step.done button > span { color: #fff; background: #22a77c; }
.production-step button > span svg, .production-step button > svg { width: 15px; }
.production-step button > div { display: flex; flex: 1; flex-direction: column; }
.production-step strong { font-size: 13px; }
.production-step small { margin-top: 4px; color: #929dac; font-size: 10px; }
.production-step.done strong { color: #8793a3; text-decoration: line-through; }
.calendar-months { display: grid; gap: 15px; }
.calendar-events { display: grid; grid-template-columns: repeat(2,1fr); gap: 1px; background: var(--line); }
.calendar-events article { display: flex; gap: 18px; padding: 22px; background: #fff; }
.calendar-events time { width: 62px; display: flex; align-items: center; flex-direction: column; padding: 9px; color: #fff; background: #172943; border-radius: 9px; }
.calendar-events time strong { font-size: 22px; }
.calendar-events time span, .calendar-events time small { font-size: 9px; }
.calendar-events article > div { min-width: 0; }
.calendar-events h3 { margin: 9px 0; font-size: 13px; }
.calendar-events p { display: flex; align-items: center; gap: 6px; margin: 5px 0; color: #758195; font-size: 11px; }
.calendar-events p svg { width: 13px; flex: 0 0 auto; }
.stock-metrics { grid-template-columns: repeat(3,1fr); }
.report-grid { display: grid; grid-template-columns: 1.2fr .8fr; gap: 15px; }
.monthly-chart { height: 250px; display: flex; align-items: flex-end; justify-content: space-around; gap: 10px; padding: 35px 22px 20px; }
.monthly-chart > div { height: 100%; display: flex; align-items: center; justify-content: flex-end; flex: 1; flex-direction: column; gap: 6px; }
.monthly-chart > div > span { width: min(35px,80%); display: block; background: linear-gradient(180deg,#3480ef,#5acbd8); border-radius: 6px 6px 2px 2px; }
.monthly-chart b { font-size: 10px; }
.monthly-chart small { color: #8f9aaa; font-size: 9px; }
.report-list { padding: 8px 20px 18px; }
.report-list > div { display: flex; align-items: center; justify-content: space-between; padding: 13px 2px; border-bottom: 1px solid var(--line); }
.report-list > div:last-child { border-bottom: 0; }
.report-list span { display: flex; flex-direction: column; }
.report-list strong, .report-list b { font-size: 12px; }
.report-list small { margin-top: 4px; color: #8e99a8; font-size: 10px; }

/* Installer and login */
.install-body, .login-body { min-height: 100vh; background: #0c1422; }
.install-shell, .login-wrap { min-height: 100vh; display: grid; grid-template-columns: minmax(370px, .9fr) minmax(610px, 1.1fr); }
.install-showcase, .login-panel { position: relative; overflow: hidden; display: flex; flex-direction: column; padding: 46px 7vw; color: #fff; background: radial-gradient(circle at 20% 75%, rgba(40,112,208,.22), transparent 32%), linear-gradient(145deg,#09111f,#122139); }
.install-showcase::after, .login-panel::after { content: ""; position: absolute; width: 460px; height: 460px; right: -260px; bottom: -230px; border: 1px solid rgba(87,141,214,.13); border-radius: 50%; box-shadow: 0 0 0 70px rgba(87,141,214,.025), 0 0 0 140px rgba(87,141,214,.02); }
.install-logo, .login-brand, .mobile-brand { display: flex; align-items: center; gap: 11px; }
.install-logo strong, .login-brand strong, .mobile-brand strong { font-size: 18px; letter-spacing: .14em; }
.showcase-copy { position: relative; z-index: 1; margin: auto 0; }
.showcase-copy .eyebrow, .login-heading .eyebrow { color: #49bacd; }
.showcase-copy h1, .login-heading h1 { margin: 0; font-size: clamp(35px, 4vw, 57px); line-height: 1.08; letter-spacing: -.055em; }
.showcase-copy h1 em { color: #64cee0; font-style: normal; }
.showcase-copy > p, .login-heading > p { max-width: 480px; margin: 20px 0 30px; color: #899ab2; font-size: 13px; line-height: 1.8; }
.feature-grid { max-width: 530px; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.feature-grid > div { display: flex; align-items: center; gap: 12px; padding: 14px; background: rgba(255,255,255,.035); border: 1px solid rgba(255,255,255,.055); border-radius: 10px; }
.feature-grid svg { width: 18px; color: #4fc6d8; }
.feature-grid span { display: flex; flex-direction: column; }
.feature-grid strong { color: #dce5f0; font-size: 10px; }
.feature-grid small { margin-top: 4px; color: #63748c; font-size: 8px; }
.showcase-footer { position: relative; z-index: 1; display: flex; align-items: center; gap: 11px; color: #53647b; font-size: 8px; letter-spacing: .14em; }
.showcase-footer span { width: 24px; height: 1px; background: #405169; }
.install-form-side, .login-form-section { display: grid; place-items: center; padding: 45px; background: #f7f8fa; }
.install-card { width: min(100%, 670px); padding: 40px; background: #fff; border: 1px solid #e4e8ee; border-radius: 16px; box-shadow: 0 20px 55px rgba(16,27,44,.08); }
.step-indicator { display: flex; align-items: center; gap: 5px; margin-bottom: 25px; }
.step-indicator span { width: 28px; height: 3px; background: #e3e7ed; border-radius: 3px; }
.step-indicator span.active { background: #2870e4; }
.step-indicator small { margin-left: 7px; color: #939dac; font-size: 8px; font-weight: 800; letter-spacing: .15em; }
.install-card h2, .login-card h2 { margin: 0; font-size: 24px; font-weight: 800; letter-spacing: -.035em; }
.form-lead, .login-card > p { margin: 7px 0 26px; color: #818c9e; font-size: 10px; line-height: 1.7; }
.form-section-title { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.form-section-title > span { width: 29px; height: 29px; display: grid; place-items: center; color: #3373de; background: #edf4ff; border-radius: 8px; font-size: 9px; font-weight: 800; }
.form-section-title div { display: flex; flex-direction: column; }
.form-section-title strong { font-size: 11px; }
.form-section-title small { margin-top: 3px; color: #a1a9b5; font-size: 8px; }
.input-icon { position: relative; }
.input-icon svg { position: absolute; z-index: 2; top: 50%; left: 13px; width: 15px; color: #93a0b2; transform: translateY(-50%); }
.input-icon .form-control { padding-left: 39px; }
.form-text { color: #9ca5b2; font-size: 8px; }
.btn-install { width: 100%; min-height: 49px; display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 26px; color: #fff; background: linear-gradient(135deg,#246de8,#164fbf); border: 0; border-radius: 9px; box-shadow: 0 10px 25px rgba(30,95,210,.25); font-size: 11px; font-weight: 800; }
.btn-install svg { width: 16px; }
.secure-note { display: flex; align-items: center; justify-content: center; gap: 7px; margin-top: 15px; color: #9aa4b2; font-size: 8px; text-align: center; }
.secure-note svg { width: 13px; color: #64a58e; }
.login-wrap { grid-template-columns: .9fr 1.1fr; }
.login-panel { justify-content: space-between; }
.login-brand small { color: #5b6c84; font-size: 8px; letter-spacing: .2em; }
.login-heading { position: relative; z-index: 1; margin: auto 0; }
.login-heading h1 { font-size: clamp(34px, 3.5vw, 52px); }
.login-quote { position: relative; z-index: 1; max-width: 370px; display: flex; gap: 12px; color: #71839c; font-size: 10px; line-height: 1.7; }
.login-quote svg { width: 19px; flex: 0 0 auto; color: #43b8ca; }
.login-card { width: min(100%, 410px); padding: 40px; background: #fff; border: 1px solid var(--line); border-radius: 15px; box-shadow: var(--shadow); }
.mobile-brand { display: none; margin-bottom: 28px; }
.muted-link { color: #91a0b3; font-size: 9px; }

@media (max-width: 1100px) {
    .metric-grid { grid-template-columns: repeat(2,1fr); }
    .dashboard-grid { grid-template-columns: 1fr; }
    .install-shell { grid-template-columns: .75fr 1.25fr; }
    .feature-grid { grid-template-columns: 1fr; }
    .drawing-layout { grid-template-columns: 1fr; }
    .report-grid { grid-template-columns: 1fr; }
    .filter-grid { grid-template-columns:repeat(2,1fr); }
    .measurement-layout { grid-template-columns:1fr; }
    .recent-measurements { position:static; }
}
@media (max-width: 800px) {
    .sidebar { transform: translateX(-100%); transition: transform .25s ease; }
    .sidebar.open { transform: translateX(0); }
    .sidebar-backdrop { position: fixed; z-index: 1030; inset: 0; display: none; background: rgba(7,13,24,.5); }
    .sidebar-backdrop.show { display: block; }
    .main-area { width: 100%; margin-left: 0; }
    .menu-toggle { display: grid; }
    .topbar { padding: 0 18px; }
    .topbar-title { display: none; }
    .content { padding: 22px 16px; }
    .page-intro { align-items: flex-start; flex-direction: column; }
    .page-intro.compact { align-items: stretch; }
    .metric-grid { grid-template-columns: 1fr 1fr; }
    .finance-strip { align-items: flex-start; flex-wrap: wrap; }
    .finance-note { width: 100%; margin-left: 0; }
    .install-shell, .login-wrap { grid-template-columns: 1fr; }
    .install-showcase { min-height: 460px; padding: 32px; }
    .install-form-side { padding: 25px 15px; }
    .login-panel { display: none; }
    .login-form-section { min-height: 100vh; padding: 20px; }
    .mobile-brand { display: flex; }
    .module-split { grid-template-columns: 1fr; }
    .module-list { max-height: 310px; overflow-y: auto; }
    .calendar-events { grid-template-columns: 1fr; }
    .stock-metrics { grid-template-columns: 1fr; }
    .recipe-grid { grid-template-columns:1fr 1fr; }
    .package-picker { grid-template-columns:1fr; }
    .cost-breakdown { grid-template-columns:1fr 1fr; }
    .backup-info { grid-template-columns:1fr; }
    .settings-grid { grid-template-columns:1fr; }
    .measurement-inputs { grid-template-columns:repeat(2,1fr); }
    .preview-switcher { align-items:stretch; flex-direction:column; }
    .preview-tabs,.three-controls { width:100%; }
    .preview-tabs button { flex:1; justify-content:center; }
    .three-controls { flex-wrap:wrap; }
    .three-controls label { flex:1; }
    .three-controls .form-select { flex:1; }
    .placement-toolbar { align-items:stretch; flex-wrap:wrap; }
    .placement-toolbar>div { width:100%; flex-basis:100%; }
}
@media (max-width: 540px) {
    .user-menu div { display: none; }
    .metric-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap:10px; }
    .metric-card { min-width:0; min-height:132px; align-items:flex-start; flex-direction:column; gap:9px; padding:15px 13px; }
    .metric-icon { width:36px; height:36px; border-radius:9px; }
    .metric-icon svg { width:17px; }
    .metric-card>div:last-of-type { min-width:0; }
    .metric-card span { font-size:9px; line-height:1.25; }
    .metric-card strong { margin:3px 0; font-size:22px; }
    .metric-card small { overflow:hidden; max-width:100%; font-size:8px; line-height:1.35; text-overflow:ellipsis; white-space:nowrap; }
    .metric-arrow { top:14px; right:12px; display:block; width:13px; opacity:1; }
    .intro-actions { width: 100%; }
    .intro-actions .today { display: none; }
    .intro-actions .btn-premium { width: 100%; }
    .intro-actions { align-items:stretch; flex-direction:column; }
    .intro-actions .btn-measure { width:100%; justify-content:center; }
    .finance-strip > div:not(.finance-divider):not(.finance-note) { min-width: 100%; }
    .finance-divider { display: none; }
    .list-toolbar { align-items: stretch; flex-direction: column; }
    .search-box { min-width: 100%; }
    .install-showcase { min-height: 520px; }
    .feature-grid { grid-template-columns: 1fr; }
    .install-card, .login-card { padding: 28px 20px; }
    .calculation-grid { grid-template-columns: repeat(2,1fr); }
    .offer-total { align-items: flex-start; flex-direction: column; gap: 12px; }
    .drawing-actions { flex-direction: column; }
    .shape-picker { grid-template-columns: 1fr; }
    .drawing-mode-picker { grid-template-columns: 1fr; }
    .photo-toolbar { align-items: stretch; flex-wrap: wrap; }
    .photo-toolbar > span { width: 100%; margin: 3px 0 0; }
    .three-wrap,#balcony3d { min-height:310px; }
    .three-hint { bottom:9px; max-width:90%; overflow:hidden; text-overflow:ellipsis; }
    .three-controls .place-photo-button { width:100%; justify-content:center; }
    .placement-toolbar button { flex:1; justify-content:center; }
    .placement-toolbar>span { display:grid; place-items:center; }
    .offer-sheet { padding: 24px 16px; }
    .offer-sheet > section { grid-template-columns: 1fr; }
    .sheet-actions, .sheet-actions form { align-items: stretch; flex-direction: column; }
    .sheet-actions .form-select { width: 100%; }
    .pricing-summary,.recipe-grid { grid-template-columns:1fr; }
    .filter-grid { grid-template-columns:1fr; }
    .measurement-intro { padding:18px; }
    .field-ready { width:100%; justify-content:center; }
    .measurement-section { grid-template-columns:1fr; padding:19px 16px; }
    .section-number { width:28px; height:28px; border-radius:8px; }
    .measurement-heading { align-items:flex-start; flex-direction:column; }
    .measurement-heading .location-button,.measurement-heading .live-area { width:100%; }
    .live-area { text-align:left; }
    .customer-mode,.measurement-inputs { grid-template-columns:1fr; }
    .photo-preview-grid { grid-template-columns:repeat(2,1fr); }
    .measurement-submit { align-items:stretch; flex-direction:column; padding:17px 16px; }
    .measurement-submit .field-save { width:100%; }
}

@media print {
    .sidebar,.topbar,.page-intro,.sheet-actions,.sidebar-backdrop { display:none!important; }
    .main-area { width:100%; margin:0; }
    .content { max-width:none; padding:0; }
    body { background:#fff; }
    .offer-sheet { border:0; box-shadow:none; }
}