/* =====================================================================
   смеТТо · DESIGN LAYER  (Mediterraneo editorial)
   Загружается ПОСЛЕ app.css — переопределяет визуальный язык,
   не трогая разметку/логику. Мотив: портик (архитрав + колонны),
   палитра espresso/terracotta/avorio, типографика Manrope + Playfair.
   ===================================================================== */

:root{
  --ink:#17120d;          /* эспрессо — основной текст/тёмные поверхности */
  --ink-soft:#5b4f41;     /* приглушённый текст */
  --ink-faint:#9a8c79;    /* подписи */
  --terra:#cf5b34;        /* терракота — главный акцент */
  --terra-d:#b14a28;
  --terra-l:#e0855c;
  --cream:#f4eee4;        /* avorio — фон страницы */
  --card:#fffdf9;         /* поверхность карточки */
  --line:#e9dfcd;         /* тёплая волосяная линия */
  --line-2:#f0e8da;
  --olive:#7d8454;
  --gold:#c79a44;
  --font-display:"Space Grotesk","Manrope",sans-serif;  /* дисплейный шрифт — меняется ?font= */
  --ok:#6f8f3f;           /* «выбрано/хорошо» — натуральная зелень вместо tech-green */
  --ok-bg:#eef2e3;
  --radius:18px;
  --radius-sm:11px;
  --shadow:0 1px 2px rgba(36,24,12,.05), 0 14px 32px -18px rgba(36,24,12,.22);
  --shadow-sm:0 1px 2px rgba(36,24,12,.05), 0 6px 16px -10px rgba(36,24,12,.18);
}

/* ---------- база ---------- */
html,body{
  font-family:"Manrope","Segoe UI",system-ui,Arial,sans-serif;
  color:var(--ink);
  background:
    radial-gradient(1200px 500px at 80% -10%, #faf5ec 0%, rgba(250,245,236,0) 60%),
    var(--cream);
}
::selection{ background:rgba(207,91,52,.18); }

/* акцентные элементы форм в палитру */
input[type=checkbox], input[type=radio]{ accent-color:var(--terra); }
:focus-visible{ outline:2px solid var(--terra); outline-offset:2px; border-radius:4px; }

/* тонкие тёплые скроллбары */
*{ scrollbar-color:#d8cbb4 transparent; }
::-webkit-scrollbar{ width:9px; height:9px; }
::-webkit-scrollbar-thumb{ background:#dac9ae; border-radius:9px; border:2px solid transparent; background-clip:padding-box; }

/* ---------- топбар ---------- */
.topbar{
  background:linear-gradient(180deg,#1d160e 0%, #17120d 100%);
  border-bottom:1px solid #000;
  box-shadow:0 1px 0 rgba(207,91,52,.9), 0 6px 20px -10px rgba(0,0,0,.5);
  /* контент шапки на тех же линиях, что и сетка 1280 (бар при этом во всю ширину) */
  padding:13px max(22px, calc(50% - 640px + 22px));
}
.dash .btn-ghost, .topbar .btn-ghost{
  background:rgba(255,255,255,.04); color:#d9cdb9;
  border:1px solid rgba(255,255,255,.14); border-radius:9px;
  font-weight:600; letter-spacing:.01em; transition:background .15s,border-color .15s,color .15s;
}
.topbar .btn-ghost:hover{ background:rgba(207,91,52,.16); border-color:var(--terra); color:#fff; }
.btn-header-bom{
  border-radius:10px; padding:9px 18px; letter-spacing:.01em;
  box-shadow:0 6px 16px -8px rgba(207,91,52,.8); font-weight:700;
}

/* ---------- слой дашборда ---------- */
.dash{ padding:30px 22px 56px; }
.dash-grid{ gap:24px; }

/* ---------- карточки-поверхности ---------- */
.config-panel, .house-view{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:22px;
}
.house-view{ padding:20px 22px 22px; overflow:hidden; }

/* ---------- редакторская типографика заголовков ---------- */
.config-panel h2, .house-view-head h2, .wcat-title{
  font-family:var(--font-display);
  font-weight:800; font-size:25px; letter-spacing:-.015em; color:var(--ink);
  line-height:1.05;
}
/* редакторский кикер над заголовком панели настроек (как в brand.html) */
.config-panel #configPanelMain > h2::before{
  content:"конфигурация"; display:block;
  font:700 11px/1 "Manrope",sans-serif; letter-spacing:.22em; text-transform:uppercase;
  color:var(--terra); margin-bottom:8px;
}
.config-hint, .config-panel .config-hint{ color:var(--ink-faint); font-size:12.5px; }

/* ---------- строки настроек ---------- */
.config-row{
  background:#fcf8f1;
  border:1px solid var(--line-2);
  border-radius:var(--radius-sm);
  padding:13px 15px;
}
.config-row:hover{
  border-color:var(--terra-l);
  background:#fbf1e6;
  box-shadow:inset 3px 0 0 var(--terra);
  transform:none;
}
.config-row .config-label{ color:var(--ink-faint); letter-spacing:.06em; font-weight:600; }
.config-row .config-value{ color:var(--ink); }
.config-row .config-edit{ color:var(--terra); }
/* убираем «блюр соседей» — выглядел как баг, не как дизайн */
.config-list:hover .config-row{ filter:none; opacity:1; }
.config-list:hover .config-row:hover{ filter:none; opacity:1; }

/* ---------- COST CARD — «чек» как герой ---------- */
.cost-card{
  background:linear-gradient(165deg,#251c12 0%, #17120d 70%);
  border:1px solid #000;
  border-radius:14px; padding:18px 18px 16px;
  color:var(--cream);
  box-shadow:var(--shadow);
  position:relative; overflow:hidden;
}
.cost-card::before{
  content:""; position:absolute; inset:0 0 auto 0; height:3px;
  background:linear-gradient(90deg,var(--terra),var(--gold));
}
.cost-row span{ color:#bcab94; }
.cost-row b{ color:#f2ead9; }
.cost-row.total{ border-top:1px solid rgba(255,255,255,.12); margin-top:10px; padding-top:13px; }
.cost-row.total span{ color:#e7dcc8; }
.cost-row.total b{
  color:var(--terra-l); font-size:25px;
  font-family:"Manrope",sans-serif; font-weight:800; letter-spacing:-.01em;
}
.cost-card .btn-primary{ box-shadow:0 8px 18px -8px rgba(207,91,52,.9); }

/* ---------- кнопки ---------- */
.btn-primary{
  background:linear-gradient(180deg,#d4633c,#cf5b34);
  border-radius:11px; font-weight:700; letter-spacing:.01em;
  padding:12px 22px;
  box-shadow:0 8px 18px -9px rgba(207,91,52,.85);
  transition:transform .12s, box-shadow .15s, background .15s;
}
.btn-primary:hover{ background:linear-gradient(180deg,#c8542f,#b14a28); box-shadow:0 10px 22px -9px rgba(177,74,40,.9); transform:translateY(-1px); }
.btn-primary:active{ transform:translateY(0); }
.dash .btn-ghost{ /* светлые ghost на белом фоне дашборда */
  background:#fff; color:var(--ink-soft); border:1px solid var(--line);
  border-radius:9px; font-weight:600;
}
.dash .btn-ghost:hover{ background:#fbf1e6; color:var(--terra-d); border-color:var(--terra-l); }

/* ---------- панель будущего дома ---------- */
.house-view-head{ align-items:center; margin-bottom:14px; }
.rotate-label{ background:#fbf1e6; color:var(--terra-d); }
.rotate-btn:hover{ background:#fbf1e6; border-color:var(--terra-l); color:var(--terra-d); }

/* тулбар сцены — чипы единого стиля */
.scene-tool{
  background:#fff !important; color:var(--ink-soft) !important;
  border:1px solid var(--line) !important; border-radius:10px;
  font-weight:600; padding:7px 12px; box-shadow:var(--shadow-sm);
  transition:background .12s,border-color .12s,color .12s,transform .1s;
}
.scene-tool:hover{ background:#fbf1e6 !important; border-color:var(--terra-l) !important; color:var(--terra-d) !important; transform:translateY(-1px); }
/* особые: фотореал = золото, пройтись = олива */
#btnPhotoreal{ background:#faf1de !important; border-color:#e3c785 !important; color:#8a6d1f !important; }
#btnPhotoreal:hover{ background:#f4e6c4 !important; border-color:var(--gold) !important; }
#btnWalkMode{ background:#eef2e3 !important; border-color:#bcca96 !important; color:#566b30 !important; }
#btnWalkMode:hover{ background:#e4ebd1 !important; border-color:var(--olive) !important; }

.scene-help{
  background:rgba(23,18,13,.82); color:#e7dcc8; backdrop-filter:blur(3px);
  border-radius:9px; border:1px solid rgba(255,255,255,.08);
}
.scene-help b{ color:var(--terra-l); }

/* overlay «видимость» — тёплое стекло */
.house-vis-toggles, .framing-vis-panel{
  background:rgba(255,253,249,.94) !important; border:1px solid var(--line) !important;
  border-radius:12px !important; box-shadow:var(--shadow) !important;
}
.overlay-toggle{ color:var(--ink); font-weight:700; }

/* ---------- секции материалов как редакторские разделители ---------- */
.quick-bar-wrap{ margin-top:14px; }
.qbw-toggle{
  background:var(--card); border:1px solid var(--line); border-radius:12px;
  padding:13px 16px; box-shadow:var(--shadow-sm);
  font-weight:700; color:var(--ink); letter-spacing:.005em;
  transition:border-color .12s, background .12s;
}
.qbw-toggle:hover{ background:#fbf1e6; border-color:var(--terra-l); }
.qbw-title{ font-family:var(--font-display); font-weight:700; font-size:16px; }
.qbw-current{ color:var(--ink-faint); font-style:italic; }
.qbw-arrow{ color:var(--terra); }

/* контейнеры свотчей */
.wall-quick-bar, .roof-quick-bar, .roof-shape-quick-bar, .fd-quick-bar{
  background:#fbf6ee; border:1px solid var(--line-2); border-radius:13px;
  box-shadow:none; padding:11px;
}
/* карточки-свотчи */
.wall-quick-card, .roof-quick-card, .roof-shape-quick-card, .fd-quick-card{
  background:var(--card); border:1.5px solid var(--line);
  border-radius:11px; padding:8px 6px 9px;
}
.wall-quick-card:hover, .roof-quick-card:hover, .roof-shape-quick-card:hover, .fd-quick-card:hover{
  border-color:var(--terra-l); transform:translateY(-2px); box-shadow:var(--shadow-sm);
}
.wall-quick-card.selected, .roof-quick-card.selected, .roof-shape-quick-card.selected, .fd-quick-card.selected{
  border-color:var(--ok); background:var(--ok-bg);
  box-shadow:0 0 0 3px rgba(111,143,63,.18);
}
.wall-quick-card .wq-title, .roof-quick-card .wq-title, .roof-shape-quick-card .wq-title, .fd-quick-card .wq-title{
  font-size:11.5px; color:var(--ink);
}
/* цена — эспрессо на тёплой плашке, без тревожно-красного */
.wall-quick-card .wq-price, .roof-quick-card .wq-price, .fd-quick-card .wq-price{
  color:var(--ink); background:#f3e7d6; border-radius:6px; font-weight:700;
}
.wall-quick-card .wq-price small, .roof-quick-card .wq-price small, .fd-quick-card .wq-price small{ color:var(--terra-d); }
.wall-quick-card .wq-price-best, .roof-quick-card .wq-price-best, .fd-quick-card .wq-price-best{
  background:var(--ok-bg); color:#4f6a28;
}
.fdq-star{ background:var(--terra); }
.fd-pie-btn{ background:#fbf1e6; color:var(--terra-d); border-color:var(--line); border-radius:10px; }
.fd-pie-btn:hover{ background:#f6e6d4; border-color:var(--terra); }

/* ---------- этажность / pill-кнопки «выбрано» в олив-зелень ---------- */
.drill-floors-row .hf-pill.on, .drill-floors-row .hf-check[data-on="1"]{
  background:var(--ok); border-color:var(--ok);
}
.drill-floors-row .hf-pill:hover, .drill-floors-row .hf-check:hover{ border-color:var(--ok); color:#4f6a28; }
.drill-floors-row .hf-pill.on:hover, .drill-floors-row .hf-check[data-on="1"]:hover{ background:#5e7a34; color:#fff; }

/* drill-секции в дизайн-палитру */
.drill-section-header:hover, .drill-section-active .drill-section-header{ background:#fbf1e6; }
.wcat-tab.on{ color:var(--terra-d); }

/* футер */
footer, .app-footer{ color:var(--ink-faint); }

/* мобайл: кикер не ломает узкий заголовок */
@media (max-width:600px){
  .config-panel h2, .house-view-head h2{ font-size:19px; }
  .config-panel #configPanelMain > h2{ padding-top:14px; }
}

/* =====================================================================
   ЛОГОТИП-ЛОКАП · ГЕРОЙ · ФУТЕР  (редизайн «как brand.html»)
   ===================================================================== */

/* ---------- логотип: бейдж + вордмарк ---------- */
.topbar .brand{ display:flex; align-items:center; gap:13px; text-decoration:none; }
.brand-badge{
  flex:none; width:42px; height:42px; border-radius:12px; overflow:hidden;
  box-shadow:0 6px 16px -6px rgba(0,0,0,.6), inset 0 0 0 1px rgba(255,255,255,.06);
  transition:transform .15s;
}
.topbar .brand:hover .brand-badge{ transform:translateY(-1px) rotate(-2deg); }
.brand-badge svg{ width:100%; height:100%; display:block; }
.brand-text{ display:flex; flex-direction:column; gap:2px; line-height:1; }
.brand-word{
  display:inline-block; white-space:nowrap;
  font-family:"Manrope",sans-serif; font-weight:800; font-size:23px;
  letter-spacing:-.02em; color:#f6efe3;
}
.brand-word .ttmark{ display:inline-block; height:.92em; width:.74em; vertical-align:-.13em; margin:0 .01em; }
.brand-slogan{
  font-family:var(--font-display); font-style:italic; font-weight:600;
  font-size:12px; color:#b9a88f; border:none; padding:0; white-space:nowrap;
}
@media (max-width:760px){ .brand-slogan{ display:none; } .brand-word{ font-size:20px; } }

/* ---------- редакторский герой ---------- */
.smetto-hero{
  width:100%; max-width:1280px; margin:0 auto; padding:32px 22px 24px;
  display:flex; align-items:flex-end; justify-content:space-between; gap:32px;
  border-bottom:1px solid var(--line);
}
.hero-main{ min-width:0; }
.hero-kicker{
  display:block; font:700 12px/1 "Manrope",sans-serif; letter-spacing:.30em;
  text-transform:uppercase; color:var(--terra); margin-bottom:14px;
}
.hero-title{
  margin:0; font-family:var(--font-display); font-weight:800;
  font-size:clamp(30px,4.4vw,50px); line-height:.98; letter-spacing:-.02em; color:var(--ink);
}
.hero-title em{ font-style:normal; font-weight:700; color:var(--terra); }
.hero-sub{ margin:14px 0 0; max-width:520px; color:var(--ink-soft); font-size:15px; line-height:1.55; }
.hero-aside{ display:flex; flex-direction:column; align-items:flex-end; gap:14px; flex:none; padding-bottom:4px; }
.hero-quote{ font-family:var(--font-display); font-style:italic; font-size:21px; color:var(--ink); }
.hero-portico{ width:80px; height:46px; opacity:.92; }
.hero-portico svg{ width:100%; height:100%; display:block; }
@media (max-width:760px){
  .smetto-hero{ flex-direction:column; align-items:flex-start; gap:14px; padding:20px 18px 16px; }
  .hero-aside{ align-items:flex-start; flex-direction:row; }
}
/* герой есть — у дашборда снимаем верхний отступ, чтобы не было двойного воздуха */
.smetto-hero + .dash{ padding-top:22px; }

/* ---------- футер editorial ---------- */
.smetto-foot{
  background:var(--ink); color:#bcab94;
  border-top:3px solid var(--terra);
  display:flex; align-items:center; gap:16px; flex-wrap:wrap;
  padding:18px max(24px, calc(50% - 640px + 22px)); font-size:13px;
}
.smetto-foot .foot-brand{
  font-family:"Manrope",sans-serif; font-weight:800; font-size:18px; color:#f6efe3; letter-spacing:-.01em;
}
.smetto-foot .foot-brand .tt{ color:var(--terra); }
.smetto-foot .foot-tag{ font-family:var(--font-display); font-style:italic; color:#9a8c79; }
.smetto-foot .foot-spacer{ flex:1; }
.smetto-foot .api-status{ color:#9a8c79; }
.smetto-foot .admin-link{ color:#bcab94; text-decoration:none; border-bottom:1px dotted #6b5d4a; }
.smetto-foot .admin-link:hover{ color:var(--terra-l); }
.smetto-foot .foot-meta{ color:#7a6c58; font-size:12px; }

/* ---------- переключатель шрифтов (только на превью) ---------- */
.font-indicator{
  position:fixed; left:50%; bottom:16px; transform:translateX(-50%); z-index:9998;
  background:rgba(23,18,13,.94); color:#e7dcc8;
  border:1px solid rgba(255,255,255,.1); border-radius:999px;
  padding:9px 18px; font:600 12.5px/1 "Manrope",sans-serif;
  box-shadow:0 10px 30px -10px rgba(0,0,0,.6); backdrop-filter:blur(6px);
  display:flex; align-items:center; gap:4px; flex-wrap:wrap; max-width:94vw;
}
.font-indicator b{ color:var(--terra-l); font-weight:800; margin-right:4px; }
.font-indicator a{ color:#cdbfa9; text-decoration:none; padding:3px 9px; border-radius:999px; transition:background .12s,color .12s; }
.font-indicator a:hover{ background:rgba(207,91,52,.18); color:#fff; }
.font-indicator a.cur{ background:var(--terra); color:#fff; }

/* ---------- кнопка «сообщить об ошибке» в строке сметы ---------- */
.bom-row{ grid-template-columns: 1fr 64px 92px 96px 96px 110px 26px; }
.bom-row .bom-report{
  justify-self:end; align-self:center;
  width:22px; height:22px; padding:0; border-radius:50%;
  border:1px solid var(--line); background:#fff; color:#c0392b; cursor:pointer;
  font-size:12px; line-height:1; display:inline-flex; align-items:center; justify-content:center;
  opacity:.32; transition:opacity .12s,background .12s,color .12s,border-color .12s,transform .1s;
}
.bom-row:hover .bom-report{ opacity:.9; }
.bom-row .bom-report:hover{ opacity:1; background:#fbe9e4; border-color:var(--terra-l); color:var(--terra-d); transform:scale(1.08); }
.bom-row .bom-report.sent{ opacity:1; color:#fff; background:var(--ok); border-color:var(--ok); cursor:default; }
.bom-row.bom-colhead .bom-report,
.bom-row.bom-subhead .bom-report{ display:none; }