:root {
  --blue:#185FA5; --blue2:#378ADD; --blue-bg:rgba(24,95,165,0.09);
  --orange:#BA7517; --orange-bg:#FFF3E0;
  --green:#1D9E75;  --green-bg:rgba(29,158,117,0.1);
  --red:#E24B4A;    --red-bg:#FEF0F0;
  --gray:#7A7A8A;   --gray-bg:#F2F4F7;
  --border:#E8E8E8; --bg:#F2F4F7; --card:#FFFFFF;
  --text:#1A1A1A;   --text2:#7A7A8A; --text3:#B0B0BA;
  --r:14px; --r-sm:9px;
  --shadow:0 1px 4px rgba(0,0,0,0.07);
  --shadow-md:0 4px 20px rgba(0,0,0,0.12);
}
* { box-sizing:border-box; margin:0; padding:0; -webkit-tap-highlight-color:transparent }
html,body { height:100%; font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; background:#2c2c2e; color:var(--text) }
body { overflow:hidden; display:flex; justify-content:center }

/* ── Главная оболочка ── */
#app { display:flex; flex-direction:column; height:100%; width:100%; max-width:480px; position:relative; overflow:hidden; background:var(--bg) }
.hdr { background:var(--blue); color:#fff; padding:0 16px; height:52px; display:flex; align-items:center; justify-content:space-between; flex-shrink:0; box-shadow:0 2px 8px rgba(24,95,165,0.3) }
.hdr-title { font-size:17px; font-weight:700; display:flex; align-items:center; gap:8px }
.hdr-sub { font-size:12px; opacity:.75; font-weight:400 }

/* ── Вкладки статусов ── */
.status-tabs { display:flex; background:#fff; border-bottom:1.5px solid var(--border); flex-shrink:0; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none }
.status-tabs::-webkit-scrollbar { display:none }
.stab { flex-shrink:0; padding:11px 10px; font-size:13px; font-weight:500; color:var(--text2); border:none; background:none; cursor:pointer; border-bottom:2.5px solid transparent; margin-bottom:-1.5px; white-space:nowrap; display:flex; align-items:center; gap:6px }
.stab.on { color:var(--blue); border-bottom-color:var(--blue) }
.stab .cnt { background:var(--bg); color:var(--text2); border-radius:10px; padding:1px 7px; font-size:11px; font-weight:700 }
.stab.on .cnt { background:var(--blue-bg); color:var(--blue) }
.stab-done { color:var(--green) !important }
.stab-done.on { color:var(--green) !important; border-bottom-color:var(--green) !important }
.stab-done.on .cnt { background:var(--green-bg); color:var(--green) }

/* ── Скролл ── */
.scroll { flex:1; overflow-y:auto; -webkit-overflow-scrolling:touch; padding:12px 12px 90px }

/* ── Карточка клиента ── */
.client-card { background:var(--card); border-radius:var(--r); padding:14px 16px; margin-bottom:10px; box-shadow:var(--shadow); border:1px solid var(--border); cursor:pointer }
.client-card-done { border-color:#86efac; background:#f0fdf4 }
.btn-mark-done { background:transparent; border:1.5px solid var(--border); color:var(--text2); border-radius:20px; padding:3px 10px; font-size:12px; font-weight:500; cursor:pointer; white-space:nowrap; font-family:inherit }
.client-card:active { box-shadow:var(--shadow-md) }
.client-card-top { display:flex; align-items:flex-start; justify-content:space-between; margin-bottom:8px }
.client-name { font-size:16px; font-weight:700; flex:1; margin-right:10px }
.client-status { font-size:11px; font-weight:700; padding:3px 9px; border-radius:20px; white-space:nowrap }
.status-замер    { background:#EBF3FC; color:var(--blue) }
.status-оформлен { background:var(--green-bg); color:var(--green) }
.status-думает   { background:var(--orange-bg); color:var(--orange) }
.status-отказ    { background:var(--red-bg); color:var(--red) }
.client-addr  { font-size:13px; color:var(--text2); margin-bottom:4px }
.client-phone { font-size:14px; color:var(--blue); font-weight:500; text-decoration:none; display:inline-flex; align-items:center; gap:5px; margin-bottom:4px }
.client-note  { font-size:12px; color:var(--orange); margin-top:4px }
.client-meta  { display:flex; align-items:center; justify-content:space-between; margin-top:8px; padding-top:8px; border-top:1px solid var(--border) }

/* ── FAB ── */
.fab { position:absolute; bottom:24px; right:20px; width:56px; height:56px; border-radius:50%; background:var(--blue); color:#fff; font-size:28px; border:none; cursor:pointer; box-shadow:0 4px 16px rgba(24,95,165,0.4); display:flex; align-items:center; justify-content:center; z-index:50; transition:transform .15s }
.fab:active { transform:scale(.93) }
.fab-room { position:absolute; bottom:24px; right:20px; width:56px; height:56px; border-radius:50%; background:var(--blue); color:#fff; font-size:28px; border:none; cursor:pointer; box-shadow:0 4px 16px rgba(24,95,165,0.4); display:flex; align-items:center; justify-content:center; z-index:150; transition:transform .15s }
.fab-room:active { transform:scale(.93) }

/* ── Экраны ── */
.screen { position:absolute; inset:0; background:var(--bg); display:none; flex-direction:column; z-index:100 }
.screen.open { display:flex }

.hdr-admin-btn { font-size:12px; color:rgba(255,255,255,.9); text-decoration:none; padding:5px 10px; border:1px solid rgba(255,255,255,.4); border-radius:8px; white-space:nowrap; flex-shrink:0 }
.hdr-share-btn { background:none; border:1px solid rgba(255,255,255,.4); border-radius:8px; color:rgba(255,255,255,.9); width:34px; height:34px; display:flex; align-items:center; justify-content:center; cursor:pointer; flex-shrink:0; padding:0 }
.share-presets { display:flex; gap:8px; margin-bottom:4px }
.share-preset-btn { flex:1; padding:10px 6px; font-size:13px; font-weight:600; background:var(--blue-bg); color:var(--blue); border:none; border-radius:var(--r-sm); cursor:pointer; font-family:inherit }
.share-preset-btn:active { opacity:.75 }
.share-divider { text-align:center; font-size:12px; color:var(--text2); margin:12px 0 8px; position:relative }
.share-divider::before,.share-divider::after { content:''; position:absolute; top:50%; width:30%; height:1px; background:var(--border) }
.share-divider::before { left:0 } .share-divider::after { right:0 }
.share-check { display:flex; align-items:center; gap:10px; padding:11px 4px; border-bottom:1px solid var(--border); cursor:pointer; font-size:15px }
.share-check:last-of-type { border-bottom:none }
.share-check input[type=checkbox] { width:20px; height:20px; accent-color:var(--blue); flex-shrink:0; cursor:pointer }

/* ── Заголовок экрана ── */
.inner-hdr { background:var(--blue); color:#fff; height:52px; display:flex; align-items:center; padding:0 16px; gap:12px; flex-shrink:0; box-shadow:0 2px 8px rgba(24,95,165,0.3) }
.back-btn { font-size:22px; cursor:pointer; padding:4px; line-height:1; background:none; border:none; color:#fff }
.inner-hdr-title { flex:1; font-size:16px; font-weight:700 }

/* ── Внутренние вкладки ── */
.inner-tabs { display:flex; background:#fff; border-bottom:1.5px solid var(--border); flex-shrink:0 }
.itab { flex:1; padding:11px 4px; font-size:13px; font-weight:500; color:var(--text2); border:none; background:none; cursor:pointer; border-bottom:2.5px solid transparent; margin-bottom:-1.5px }
.itab.on { color:var(--blue); border-bottom-color:var(--blue) }
.inner-scroll { flex:1; overflow-y:auto; -webkit-overflow-scrolling:touch; padding:14px 12px 90px }

/* ── Карточки ── */
.card { background:var(--card); border-radius:var(--r); padding:16px; margin-bottom:12px; box-shadow:var(--shadow); border:1px solid var(--border) }
.card-hd { font-size:11px; font-weight:700; color:var(--text2); text-transform:uppercase; letter-spacing:.6px; margin-bottom:12px }

/* ── Выбор статуса ── */
.status-sel { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-bottom:4px }
.status-opt { padding:9px 12px; border-radius:var(--r-sm); border:1.5px solid var(--border); background:#fff; cursor:pointer; font-size:13px; font-weight:600; text-align:center; transition:all .15s }
.status-opt.on-замер    { background:#EBF3FC; border-color:var(--blue);   color:var(--blue) }
.status-opt.on-оформлен { background:var(--green-bg);  border-color:var(--green);  color:var(--green) }
.status-opt.on-думает   { background:var(--orange-bg); border-color:var(--orange); color:var(--orange) }
.status-opt.on-отказ    { background:var(--red-bg);    border-color:var(--red);    color:var(--red) }
.status-opt.on-готов    { background:var(--green-bg);  border-color:var(--green);  color:var(--green) }
.status-opt-done        { border-color:var(--green) !important }

/* ── Поля ввода ── */
.field { margin-bottom:10px }
.field label { display:block; font-size:12px; color:var(--text2); margin-bottom:5px; font-weight:500 }
.field input,.field textarea,.field select { width:100%; padding:10px 12px; border:1.5px solid var(--border); border-radius:var(--r-sm); font-size:15px; color:var(--text); background:#fff; outline:none; font-family:inherit; transition:border-color .15s }
.field input:focus,.field textarea:focus { border-color:var(--blue) }
.field textarea { resize:none; min-height:68px; overflow:hidden }
.row2 { display:grid; grid-template-columns:1fr 1fr; gap:10px }

/* ── Сводка помещений ── */
.rooms-summary { background:var(--card); border-radius:var(--r); padding:14px 16px; margin-bottom:12px; box-shadow:var(--shadow); border:1px solid var(--border); display:flex; justify-content:space-between; align-items:flex-start }
.rooms-summary-left { font-size:13px; color:var(--text2); line-height:1.8 }
.rooms-summary-left b { color:var(--text); font-size:14px }
.rooms-summary-right { text-align:right }
.sum-label { font-size:11px; color:var(--text2); text-transform:uppercase; letter-spacing:.4px }
.sum-val { font-size:20px; font-weight:700; color:var(--blue); margin-top:2px }

/* ── Список помещений ── */
.room-item { background:var(--card); border-radius:var(--r); padding:14px; margin-bottom:10px; box-shadow:var(--shadow); border:1px solid var(--border); display:flex; gap:12px; cursor:pointer }
.room-item:active { box-shadow:var(--shadow-md) }
.room-item-info { flex:1; min-width:0 }
.room-item-num { font-size:11px; font-weight:700; color:var(--text2); text-transform:uppercase; letter-spacing:.5px; margin-bottom:3px }
.room-item-name { font-size:16px; font-weight:700; margin-bottom:6px }
.room-item-mat { font-size:13px; color:var(--text2); margin-bottom:4px }
.room-item-metrics { font-size:13px; color:var(--text2); line-height:1.7 }
.room-item-sum { font-size:14px; font-weight:700; color:var(--blue); margin-top:4px }
.room-item-thumb { width:80px; height:80px; flex-shrink:0; border:1.5px solid var(--border); border-radius:8px; background:#F8F9FB; overflow:hidden }
.room-item.room-inactive { opacity:.45 }
.room-item-right { display:flex; flex-direction:column; align-items:center; gap:5px; flex-shrink:0 }
.room-active-circle { width:22px; height:22px; border-radius:50%; border:2px solid var(--border); background:#fff; color:var(--border); font-size:12px; font-weight:700; cursor:pointer; display:flex; align-items:center; justify-content:center; padding:0; font-family:inherit; flex-shrink:0; line-height:1 }
.room-active-circle.on { border-color:var(--green); color:var(--green) }
.room-item-thumb canvas { width:100%; height:100%; display:block }

/* ── Опции (фактура / окантовка) ── */
.opts { display:grid; grid-template-columns:repeat(3,1fr); gap:6px; margin-bottom:4px }
.tex-more-sel { width:100%;padding:8px 12px;border:1.5px solid var(--border);border-radius:var(--r-sm);font-size:14px;font-family:inherit;outline:none;background:#fff;color:var(--text);margin-top:6px;margin-bottom:2px }
.tex-more-sel.on { border-color:var(--blue);color:var(--blue) }
.opt { display:flex; flex-direction:column; align-items:center; justify-content:center; padding:9px 4px; text-align:center; border:1.5px solid var(--border); border-radius:var(--r-sm); cursor:pointer; background:#fff; min-height:52px }
.opt.on { border-color:var(--blue); background:var(--blue-bg) }
.opt-name { font-size:13px; font-weight:600; color:var(--text) }
.opt-price { font-size:11px; color:var(--text2); margin-top:2px }
.opt.on .opt-name { color:var(--blue) }
.opt.on .opt-price { color:var(--blue2) }

/* ── Выбор цвета ── */
.color-search-wrap { margin-bottom:4px }
.color-search-wrap input { width:100%; padding:8px 12px; border:1.5px solid var(--border); border-radius:var(--r-sm); font-size:14px; font-family:inherit; outline:none; background:#fff }
.color-search-wrap input:focus { border-color:var(--blue) }
.color-swatch { width:22px; height:22px; border-radius:5px; border:1px solid rgba(0,0,0,0.12); flex-shrink:0; background: repeating-linear-gradient(45deg,#ddd 0,#ddd 3px,#f5f5f5 3px,#f5f5f5 6px) }
.color-selected-chip { display:flex; align-items:center; gap:8px; padding:7px 10px; background:var(--blue-bg); border:1.5px solid var(--blue2); border-radius:var(--r-sm); margin-bottom:5px; cursor:pointer }
.color-chip-name { font-size:13px; font-weight:700; color:var(--blue); flex:1 }
.color-chip-code { font-size:12px; color:var(--blue2) }
.color-chip-clear { font-size:18px; line-height:1; color:var(--blue2); flex-shrink:0 }
.color-results { border-radius:var(--r-sm); overflow:hidden; background:#fff; max-height:220px; overflow-y:auto }
.color-results:not(:empty) { border:1.5px solid var(--border); margin-bottom:4px }
.color-item { display:flex; align-items:center; gap:12px; padding:9px 12px; border-bottom:1px solid var(--border); cursor:pointer; background:#fff }
.color-item:last-child { border-bottom:none }
.color-item:active { background:var(--blue-bg) }
.color-item.on { background:var(--blue-bg) }
.color-item-info { flex:1; display:flex; flex-direction:row; align-items:baseline; gap:6px; min-width:0; overflow:hidden }
.color-item-name { font-size:14px; font-weight:600; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.color-item.on .color-item-name { color:var(--blue) }
.color-item-code { font-size:12px; color:var(--text2); white-space:nowrap; flex-shrink:0 }
.color-width { font-size:11px; font-weight:600; padding:3px 8px; border-radius:10px; background:var(--gray-bg); color:var(--text2); white-space:nowrap; flex-shrink:0; margin-left:8px }
.color-width.warn   { background:#FFF3CD; color:#7A5800 }
.color-width.danger { background:var(--red-bg); color:var(--red) }
.color-empty { padding:10px 12px; font-size:13px; color:var(--text2); text-align:center }

/* ── Смета ── */
.estimate { margin-top:0 }
.est-grid { display:grid; grid-template-columns:1fr auto auto auto auto; gap:2px 6px; align-items:baseline }
.est-col-hdr { font-size:clamp(9px,1.2vw,12px); font-weight:700; color:var(--text2); text-transform:uppercase; letter-spacing:.3px; text-align:right; padding-bottom:4px; border-bottom:1.5px solid var(--border); white-space:nowrap }
.est-col-hdr:first-child { text-align:left }
.est-sec-hd { grid-column:1/-1; font-size:clamp(11px,1.4vw,14px); font-weight:700; color:var(--text2); text-transform:uppercase; letter-spacing:.4px; padding:6px 0 2px; border-bottom:1px solid var(--border) }
.est-grid .en { color:var(--text); min-width:0; word-break:break-word; line-height:1.35; font-size:clamp(11px,1.6vw,14px); padding:2px 0 }
.est-grid .eq { color:var(--text2); font-size:clamp(10px,1.3vw,13px); text-align:right; white-space:nowrap; padding:2px 0 }
.est-grid .eu { color:var(--text2); font-size:clamp(10px,1.3vw,13px); text-align:right; white-space:nowrap; padding:2px 0 }
.est-grid .ep2 { color:var(--text2); font-size:clamp(10px,1.3vw,13px); text-align:right; white-space:nowrap; padding:2px 0 }
.est-grid .ep { font-weight:700; color:var(--text); font-size:clamp(11px,1.6vw,14px); text-align:right; white-space:nowrap; padding:2px 0 }
.est-total { display:flex; justify-content:space-between; padding:8px 0 0; border-top:1.5px solid var(--blue); margin-top:4px }
.est-total-lbl { font-size:13px; font-weight:700; color:var(--blue) }
.est-total-val { font-size:16px; font-weight:700; color:var(--blue) }

/* ── Доп. услуги ── */
.extra-item { display:flex; align-items:center; gap:5px; padding:6px 0; border-bottom:1px solid var(--border) }
.extra-item:last-of-type { border-bottom:none }
.extra-name { flex:1 1 0; min-width:0; font-size:13px; line-height:1.35; word-break:break-word; color:var(--text) }
.extra-qty { width:44px; flex-shrink:0; padding:5px 4px; border:1.5px solid var(--border); border-radius:6px; font-size:13px; text-align:center; font-family:inherit; outline:none }
.extra-qty:focus { border-color:var(--blue) }
.extra-price-tag { min-width:46px; flex-shrink:0; text-align:right; font-size:12px; color:var(--text2); white-space:nowrap }
.extra-del { flex-shrink:0; color:var(--text2); font-size:20px; font-weight:300; cursor:pointer; padding:0 1px; line-height:1 }
.extra-del:active { color:var(--red) }

/* ── Кнопки ── */
.btn-primary { width:100%; padding:13px; font-size:15px; font-weight:700; background:var(--blue); color:#fff; border:none; border-radius:var(--r); cursor:pointer; font-family:inherit }
.btn-primary:active { background:#0C447C }
.btn-sm { padding:8px 14px; font-size:13px; font-weight:500; border:1.5px solid var(--border); border-radius:var(--r-sm); background:#fff; color:var(--text); cursor:pointer; font-family:inherit; display:inline-flex; align-items:center; gap:5px }
.btn-sm.blue   { border-color:var(--blue);   background:var(--blue);   color:#fff }
.btn-sm.green  { border-color:var(--green);  color:var(--green) }
.btn-sm.green.on  { background:var(--green);  color:#fff; border-color:var(--green) }
.btn-sm.orange { border-color:var(--orange); color:var(--orange) }
.btn-sm.orange.on { background:var(--orange); color:#fff }
.btn-sm.red    { border-color:var(--red);    color:var(--red);    background:transparent }
.btn-sm:active { opacity:.75 }
.btn-add-extra { display:flex; align-items:center; gap:8px; padding:10px 14px; border:1.5px dashed var(--border); border-radius:var(--r-sm); background:#fff; color:var(--text2); cursor:pointer; font-size:14px; font-family:inherit; width:100%; margin-bottom:10px }
.btn-add-extra:active { border-color:var(--blue); color:var(--blue) }

/* ── Итог ── */
.sum-room { margin-bottom:10px; padding-bottom:10px; border-bottom:1px solid var(--border) }
.sum-room:last-of-type { border-bottom:none }
.sum-room-title { font-size:15px; font-weight:700; color:var(--blue); margin-bottom:4px }
.sum-row { display:flex; justify-content:space-between; font-size:14px; padding:2px 0; color:var(--text2) }
.sum-row b { color:var(--text) }
.sum-grand { display:flex; justify-content:space-between; padding:12px 0 0; margin-top:8px; border-top:2px solid var(--blue); font-size:16px; font-weight:700; color:var(--blue) }

.adv-method-btn { padding:10px 8px; border:1.5px solid var(--border); border-radius:var(--r-sm); background:#fff; font-size:13px; font-family:inherit; cursor:pointer; text-align:center }
.adv-method-btn.on { border-color:var(--blue); background:var(--blue-bg); color:var(--blue); font-weight:600 }

/* ── Смета ── */
.est-block { background:#fff; border-radius:var(--r-sm); padding:12px 14px; margin-bottom:10px; box-shadow:0 1px 3px rgba(0,0,0,.06) }
.est-block-title { font-size:13px; font-weight:700; text-transform:uppercase; letter-spacing:.4px; color:var(--text2); margin-bottom:8px }
.est-tbl { width:100%; border-collapse:collapse; font-size:13px }
.est-tbl th { font-size:11px; color:var(--text2); text-align:right; padding:2px 4px; font-weight:600 }
.est-tbl th:first-child { text-align:left }
.est-tbl td { padding:5px 4px; border-top:1px solid var(--border); vertical-align:middle }
.est-tbl td:not(:first-child) { text-align:right; white-space:nowrap }
.est-tbl .sub { font-weight:700; color:var(--text) }
.est-block-total { display:flex; justify-content:space-between; font-weight:700; font-size:14px; padding-top:8px; margin-top:4px; border-top:2px solid var(--border) }
.est-discount-row { display:flex; justify-content:space-between; font-size:14px; color:var(--green); font-weight:600; padding:6px 14px; background:var(--green-bg); border-radius:var(--r-sm); margin-bottom:10px }
.est-grand { background:var(--blue); color:#fff; border-radius:var(--r-sm); padding:12px 14px; display:flex; justify-content:space-between; font-weight:700; font-size:16px; margin-bottom:10px }
.est-advance-row { display:flex; justify-content:space-between; font-size:14px; padding:6px 14px; background:var(--bg); border-radius:var(--r-sm); margin-bottom:6px }
.est-balance-row { display:flex; justify-content:space-between; font-size:15px; font-weight:700; padding:8px 14px; background:var(--orange-bg); color:var(--orange); border-radius:var(--r-sm) }

/* ── Оверлеи ── */
.ov { position:absolute; inset:0; background:rgba(0,0,0,0.5); align-items:center; justify-content:center; z-index:400; padding:20px }
.ov-box { background:#fff; border-radius:var(--r); padding:22px; width:100%; max-width:320px; box-shadow:var(--shadow-md) }
.ov-box h3 { font-size:17px; font-weight:700; margin-bottom:14px }
.ov-box input { width:100%; padding:12px 14px; border:2px solid var(--blue); border-radius:var(--r-sm); font-size:20px; font-weight:600; margin-bottom:14px; outline:none; font-family:inherit; text-align:center }
.ov-btns { display:flex; gap:8px }
.ov-btns button { flex:1; padding:11px; font-size:14px; font-weight:600; border:1.5px solid var(--border); border-radius:var(--r-sm); cursor:pointer; background:#fff; font-family:inherit }
.ov-btns .ok { background:var(--blue); color:#fff; border-color:var(--blue) }

/* ── Меню выбора фигуры ── */
.shape-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px }
.shape-opt { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; padding:16px 8px; border:1.5px solid var(--border); border-radius:var(--r); background:#fff; cursor:pointer; font-family:inherit; font-size:13px; font-weight:600; color:var(--text); transition:all .15s }
.shape-opt svg { color:var(--blue) }
.shape-opt:active { border-color:var(--blue); background:var(--blue-bg) }

/* ── Меню углов ── */
.corner-menu { display:flex; flex-direction:column; gap:8px }
.corner-opt { display:flex; align-items:center; gap:12px; padding:11px 14px; border:1.5px solid var(--border); border-radius:var(--r-sm); background:#fff; cursor:pointer; font-family:inherit; font-size:15px; font-weight:600; color:var(--text); text-align:left }
.corner-opt svg { color:var(--blue); flex-shrink:0 }
.corner-opt:active { border-color:var(--blue); background:var(--blue-bg) }
.corner-hint { font-size:12px; font-weight:500; color:var(--text2) }
.corner-opt-del { color:var(--red) }
.corner-opt-del svg { color:var(--red) }
.corner-opt-del:active { border-color:var(--red); background:var(--red-bg) }

/* Переключатель типа среза */
.cut-type-switch { display:flex; gap:6px; margin-bottom:14px }
.cut-type-switch button { flex:1; padding:9px 6px; border:1.5px solid var(--border); border-radius:var(--r-sm); background:#fff; cursor:pointer; font-family:inherit; font-size:13px; font-weight:600; color:var(--text2) }
.cut-type-switch button.active { border-color:var(--blue); background:var(--blue-bg); color:var(--blue) }

/* ── Дропдаун ── */
.ddrop { position:relative; margin-bottom:8px }
.ddrop-btn { width:100%; padding:10px 14px; border:1.5px solid var(--border); border-radius:var(--r-sm); background:#fff; color:var(--text2); font-size:14px; font-family:inherit; cursor:pointer; display:flex; align-items:center; justify-content:space-between; text-align:left }
.ddrop-btn.sel { color:var(--text); font-weight:600 }
.ddrop-list { display:none; position:absolute; top:calc(100% + 4px); left:0; right:0; background:#fff; border:1.5px solid var(--blue); border-radius:var(--r-sm); z-index:200; box-shadow:var(--shadow-md); overflow:hidden; max-height:260px; overflow-y:auto }
.ddrop-list.open { display:block }
.ddrop-item { padding:12px 14px; font-size:14px; color:var(--text); cursor:pointer; border-bottom:1px solid var(--border) }
.ddrop-item:last-child { border-bottom:none }
.ddrop-item:active { background:var(--blue-bg); color:var(--blue) }

/* ── Пустое состояние ── */
.empty { text-align:center; padding:48px 20px; color:var(--text2) }
.empty-icon { font-size:48px; margin-bottom:12px }
.empty-text { font-size:15px; font-weight:500; margin-bottom:6px; color:var(--text) }
.empty-sub { font-size:13px }

/* ══ ЭКРАН ЧЕРТЁЖА ══ */

.draw-hdr { background:#fff; border-bottom:1px solid var(--border); padding:8px 14px 6px; flex-shrink:0; box-shadow:var(--shadow) }
.draw-hdr-top { display:flex; align-items:center; justify-content:space-between; margin-bottom:4px }
.draw-hdr-title { font-size:14px; font-weight:700 }
.draw-info { font-size:11px; color:var(--blue); line-height:1.5; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.draw-info-diag { color:var(--orange) }

canvas#c { display:block; flex:1; touch-action:none; width:100%; min-height:0 }

/* ── Панель инструментов чертежа ── */
#controls {
  background: #fff;
  border-top: 1px solid var(--border);
  display: flex;
  align-items: stretch;
  height: 58px;
  flex-shrink: 0;
}
.draw-btn-fixed {
  width: 54px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  border: none;
  background: var(--bg);
  cursor: pointer;
  font-size: 9px;
  font-weight: 700;
  color: var(--text2);
  font-family: inherit;
  padding: 0;
}
.draw-btn-fixed:first-child { border-right: 1px solid var(--border) }
.draw-btn-fixed:last-child  { border-left:  1px solid var(--border) }
.draw-btn-del { color: var(--red) }
.draw-btn-del:active { background: var(--red-bg) }
.draw-btn-fixed:last-child:active { background: var(--blue-bg); color: var(--blue) }
.draw-carousel {
  flex: 1;
  display: flex;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.draw-carousel::-webkit-scrollbar { display: none }
.draw-btn {
  min-width: 52px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  border: none;
  border-right: 1px solid var(--border);
  background: #fff;
  cursor: pointer;
  font-size: 9px;
  font-weight: 700;
  color: var(--text2);
  font-family: inherit;
  padding: 0 4px;
}
.draw-btn:active { background: var(--bg) }
.draw-btn.on { background: var(--blue-bg); color: var(--blue) }
.draw-btn-orange.on { background: var(--orange-bg); color: var(--orange) }
.draw-btn-green.on  { background: var(--green-bg);  color: var(--green) }
.draw-btn-blue.on   { background: var(--blue-bg);   color: var(--blue) }
.draw-btn-dim { opacity: .4 }

/* Оверлей метрик на поле чертежа */
.draw-metrics {
  position: absolute;
  bottom: 66px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 14px;
  align-items: center;
  background: rgba(255,255,255,.92);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 6px 18px;
  box-shadow: 0 2px 12px rgba(0,0,0,.1);
  pointer-events: none;
  z-index: 10;
  white-space: nowrap;
  backdrop-filter: blur(4px);
}
.dm-s { font-size:15px; font-weight:800; color:var(--blue) }
.dm-p { font-size:14px; font-weight:600; color:var(--text2) }
.dm-cuts { font-size:12px; font-weight:600; color:var(--red) }
.cutout-row { display:flex; align-items:center; gap:8px; padding:8px 0; border-bottom:1px solid var(--border); font-size:13px }
.cutout-row:last-child { border-bottom:none }
.cutout-row span { flex:1; color:var(--text) }
.cutout-row button { padding:3px 8px; font-size:12px; border:1.5px solid var(--red); border-radius:var(--r-sm); background:#fff; color:var(--red); cursor:pointer; font-family:inherit }

/* Панель ввода сторон (position:fixed, перекрывает controls снизу) */
#sidesPanel {
  display: none;
  position: absolute;
  bottom: 58px; left: 0; right: 0;
  background: white;
  border-top: 2px solid var(--blue);
  padding: 12px 14px;
  box-shadow: 0 -4px 20px rgba(0,0,0,0.15);
  z-index: 350;
}
#sidesPanel .title  { font-size:14px; font-weight:700; color:var(--blue); margin-bottom:8px }
#sidesPanel .row    { display:flex; gap:8px; align-items:center }
#sidesPanel label   { font-size:15px; font-weight:700; min-width:40px }
#sidesPanel input   { flex:1; padding:10px 14px; border:2px solid var(--blue); border-radius:var(--r-sm); font-size:18px; font-weight:600; outline:none }
#sidesPanel button  { padding:10px 18px; background:var(--blue); color:#fff; border:none; border-radius:var(--r-sm); font-size:15px; font-weight:700; cursor:pointer }

/* Панель углов */
#anglePanel {
  display: none;
  position: fixed;
  bottom: 58px; left: 0; right: 0;
  background: white;
  border-top: 2px solid var(--green);
  padding: 12px 14px;
  box-shadow: 0 -4px 20px rgba(0,0,0,0.15);
  z-index: 350;
}
#anglePanel .title { font-size:13px; font-weight:600; color:var(--text2); margin-bottom:10px }
#anglePanel .types { display:flex; gap:8px }
#anglePanel .types button { padding:10px 28px; border-radius:var(--r-sm); font-size:15px; font-weight:700; cursor:pointer; border:2px solid var(--border); background:#fff; font-family:inherit }
#anglePanel .types button.active { background:var(--blue); color:#fff; border-color:var(--blue) }

/* ── Пикер каталога услуг ── */
.svc-pick-cat { display:flex; align-items:center; gap:10px; padding:13px 16px; border-bottom:1px solid var(--border); cursor:pointer; transition:background .1s }
.svc-pick-cat:active { background:var(--bg) }
.svc-pick-cat-name { flex:1; font-size:15px; font-weight:600 }
.svc-pick-cat-count { font-size:12px; color:var(--text2); white-space:nowrap }
.svc-pick-subhdr { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.5px; color:var(--text2); padding:10px 16px 4px; background:var(--bg) }
.svc-pick-item { display:flex; align-items:center; gap:10px; padding:12px 16px; border-bottom:1px solid var(--border); cursor:pointer; transition:background .1s }
.svc-pick-item:active { background:var(--blue-bg) }
.svc-pick-item-name { flex:1; font-size:14px }
.svc-pick-item-meta { font-size:12px; color:var(--text2); white-space:nowrap }

/* ── Кнопки каталога (фактура, профиль) ── */
.opts-with-more { display:grid; grid-template-columns:1fr 1fr; gap:6px; margin-bottom:4px }
.btn-catalog-opt { padding:8px 6px; border:1.5px dashed var(--border); border-radius:var(--r-sm); background:#fff; color:var(--text2); cursor:pointer; font-size:12px; font-family:inherit; display:flex; align-items:center; justify-content:center; gap:5px; min-height:52px; text-align:center; line-height:1.3 }
.btn-catalog-opt:active { background:var(--bg); border-color:var(--blue); color:var(--blue) }
.btn-catalog-more { display:block; width:100%; padding:9px 14px; border:1.5px dashed var(--border); border-radius:var(--r-sm); background:#fff; color:var(--text2); cursor:pointer; font-size:13px; font-family:inherit; text-align:left; margin-top:6px }
.btn-catalog-more.on { border-color:var(--blue); color:var(--blue); border-style:solid; font-weight:600 }
.btn-catalog-more:active { background:var(--bg) }
.svc-pick-item.on { background:var(--blue-bg) }
.svc-pick-item.on .svc-pick-item-name { color:var(--blue); font-weight:600 }

/* ── Двойные плашки (профиль/окантовка) ── */
.opt-cat-lbl { font-size:9px; font-weight:700; text-transform:uppercase; letter-spacing:.4px; color:var(--text2); margin-bottom:5px; align-self:flex-start }
.opt-sel-name { font-size:12px; font-weight:600; word-break:break-word; line-height:1.3; color:var(--text); text-align:left; align-self:flex-start }
.opt.on .opt-cat-lbl { color:var(--blue2) }
.opt.on .opt-sel-name { color:var(--blue) }