/* ============================================================
   DOMU · Дизайн-система · ВАРИАНТ «МИНИМАЛИЗМ»  ·  domu-ui-minimal.css
   Те же компоненты и классы, что в domu-ui.css, но минималистичный стиль:
   максимум воздуха, волосяные линии, почти без теней, жёлтый — точечный акцент.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

:root{
  /* Бренд-цвета (брендбук DOMU) */
  --c-yellow:#F2DE00; --c-yellow-600:#e3d000; --c-yellow-soft:#fffceb;
  --c-ink:#1c1c1e;          /* почти чёрный — основной текст/кнопки */
  --c-steel:#4682B4; --c-steel-soft:#f1f6fb;
  --c-red:#D82924; --c-red-soft:#fdf2f1;
  --c-green:#2e9e5b; --c-green-soft:#f1f9f4;

  /* Семантика */
  --bg:#ffffff;
  --surface:#ffffff;
  --surface-2:#fafafa;
  --border:#ececec;
  --hairline:#f0f0f0;
  --text:#1c1c1e;
  --muted:#9a9a9e;
  --accent:var(--c-yellow);
  --link:#1c1c1e;

  /* Типографика */
  --font-display:"Inter",-apple-system,"Segoe UI",Arial,sans-serif;
  --font-text:"Inter",-apple-system,"Segoe UI",Arial,sans-serif;
  --fs-h1:32px; --fs-h2:24px; --fs-h3:18px; --fs-h4:15px;
  --fs-body:15px; --fs-sm:13px; --fs-xs:11px;

  /* Форма — минимализм: тонкие линии, малые радиусы, минимум тени */
  --r-sm:7px; --r:10px; --r-lg:14px; --r-pill:999px;
  --sp:18px;
  --shadow-sm:none;
  --shadow:0 1px 3px rgba(0,0,0,.05);
  --shadow-lg:0 8px 30px rgba(0,0,0,.08);
  --ring:0 0 0 3px rgba(28,28,30,.10);
  --t:.18s ease;
}

.domu-dark{
  --bg:#0f0f10; --surface:#161617; --surface-2:#1d1d1f;
  --border:#262628; --hairline:#222; --text:#f3f3f3; --muted:#8a8a8e;
  background:var(--bg); color:var(--text);
}

/* ===================== БАЗА ===================== */
*{box-sizing:border-box}
body.domu{margin:0;background:var(--bg);color:var(--text);font-family:var(--font-text);
  font-size:var(--fs-body);line-height:1.6;-webkit-font-smoothing:antialiased;letter-spacing:.1px}
.domu h1,.domu h2,.domu h3,.domu h4{font-family:var(--font-display);margin:0 0 .5em;line-height:1.2;letter-spacing:-.4px}
.domu h1{font-size:var(--fs-h1);font-weight:600} .domu h2{font-size:var(--fs-h2);font-weight:600}
.domu h3{font-size:var(--fs-h3);font-weight:600} .domu h4{font-size:var(--fs-h4);font-weight:600}
.domu p{margin:0 0 1em}
.domu a{color:var(--link);text-decoration:none;border-bottom:1px solid var(--c-yellow);padding-bottom:1px}
.domu a:hover{border-bottom-color:var(--c-ink)}
.text-muted{color:var(--muted)}
.mono{font-family:"SF Mono",Consolas,monospace;font-size:.92em;color:var(--muted)}

/* ===================== ЛОГОТИП ===================== */
.domu-logo{display:inline-flex;align-items:center;gap:10px;font-family:var(--font-display);
  font-weight:600;font-size:22px;letter-spacing:1px;color:var(--text)}
.domu-logo .accent{color:var(--c-ink)}
.domu-logo svg{width:30px;height:30px;display:block}

/* ===================== КНОПКИ ===================== */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--font-text);font-weight:500;font-size:var(--fs-sm);
  padding:11px 20px;border-radius:var(--r-pill);border:1px solid transparent;
  cursor:pointer;transition:var(--t);white-space:nowrap;text-decoration:none;line-height:1}
.btn:focus-visible{outline:none;box-shadow:var(--ring)}
.btn-primary{background:var(--c-ink);color:#fff}
.btn-primary:hover{opacity:.85}
.btn-dark{background:var(--c-ink);color:#fff}
.btn-dark:hover{opacity:.85}
.btn-ghost{background:transparent;border-color:var(--border);color:var(--text)}
.btn-ghost:hover{border-color:var(--c-ink)}
.btn-danger{background:transparent;border-color:var(--c-red);color:var(--c-red)}
.btn-danger:hover{background:var(--c-red);color:#fff}
.btn-link{background:transparent;color:var(--text);padding:6px 2px;border-bottom:1px solid var(--c-yellow);border-radius:0}
.btn-sm{padding:8px 14px;font-size:var(--fs-xs)}
.btn-lg{padding:14px 28px;font-size:var(--fs-body)}
.btn:disabled,.btn.is-disabled{opacity:.4;cursor:not-allowed}
.btn-block{display:flex;width:100%}
/* акцентная кнопка — единственное яркое пятно, для главного действия */
.btn-accent{background:var(--c-yellow);color:var(--c-ink)}
.btn-accent:hover{background:var(--c-yellow-600);opacity:1}

/* ===================== БЕЙДЖИ / ТЕГИ ===================== */
.badge{display:inline-flex;align-items:center;gap:6px;font-size:var(--fs-xs);font-weight:500;
  padding:3px 10px;border-radius:var(--r-pill);background:var(--surface-2);color:var(--muted);border:1px solid var(--border)}
.badge-yellow{background:transparent;color:#8a7d00;border-color:#ece1a0}
.badge-steel{background:transparent;color:var(--c-steel);border-color:#cfe0ee}
.badge-red{background:transparent;color:var(--c-red);border-color:#f3c9c7}
.badge-green{background:transparent;color:var(--c-green);border-color:#c5e6d3}
.badge-dot{border:0;background:none;padding-left:0;color:var(--text)}
.badge-dot::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.badge-green.badge-dot{color:var(--c-green)} .badge-red.badge-dot{color:var(--c-red)}

/* ===================== КАРТОЧКИ ===================== */
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);
  box-shadow:var(--shadow-sm);padding:22px}
.card-pad-lg{padding:30px}
.card-hover{transition:var(--t)}
.card-hover:hover{border-color:#dcdcdc;box-shadow:var(--shadow)}
.card-accent{border-top:1px solid var(--border);position:relative}
.card-accent::before{content:"";position:absolute;top:-1px;left:22px;width:34px;height:2px;background:var(--c-yellow)}
.card-title{font-family:var(--font-display);font-weight:600;font-size:var(--fs-h4);margin:0 0 4px}
.card-sub{color:var(--muted);font-size:var(--fs-sm);margin-bottom:12px}

.tile{border-radius:var(--r);padding:26px;min-height:150px;color:var(--text);display:flex;
  flex-direction:column;justify-content:space-between;cursor:pointer;background:var(--surface-2);border:1px solid var(--border);transition:var(--t)}
.tile:hover{border-color:#dcdcdc}
.tile .tile-ic{font-size:30px;opacity:.9}
.tile h4{margin:0}.tile span{font-size:var(--fs-sm);color:var(--muted)}

.product{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);
  overflow:hidden;transition:var(--t);position:relative}
.product:hover{border-color:#dcdcdc;box-shadow:var(--shadow)}
.product .ph{height:160px;background:var(--surface-2);display:flex;align-items:center;justify-content:center;font-size:44px}
.product .pinfo{padding:16px}
.product .pbrand{font-size:var(--fs-xs);color:var(--muted);text-transform:uppercase;letter-spacing:1px}
.product .pname{font-size:var(--fs-sm);font-weight:500;margin:4px 0 10px;line-height:1.4}
.product .pprice{font-size:18px;font-weight:600}

/* ===================== ФОРМЫ ===================== */
.field{margin-bottom:18px}
.field>label{display:block;font-size:var(--fs-sm);font-weight:500;color:var(--muted);margin-bottom:7px}
.input,.select,.textarea{width:100%;padding:12px 14px;border:1px solid var(--border);border-radius:var(--r-sm);
  background:var(--surface);color:var(--text);font-family:var(--font-text);font-size:var(--fs-body);
  transition:var(--t);outline:none}
.input:focus,.select:focus,.textarea:focus{border-color:var(--c-ink)}
.input::placeholder{color:#c2c2c6}
.textarea{min-height:96px;resize:vertical}
.input-error{border-color:var(--c-red)}
.hint{font-size:var(--fs-xs);color:var(--muted);margin-top:6px}
.hint-error{color:var(--c-red)}

.check{display:inline-flex;gap:10px;align-items:flex-start;font-size:var(--fs-sm);cursor:pointer;color:var(--text)}
.check input{width:17px;height:17px;accent-color:var(--c-ink);margin-top:1px}

.switch{position:relative;display:inline-block;width:42px;height:24px}
.switch input{display:none}
.switch .track{position:absolute;inset:0;background:#e4e4e6;border-radius:var(--r-pill);transition:var(--t)}
.switch .track::before{content:"";position:absolute;width:18px;height:18px;border-radius:50%;background:#fff;top:3px;left:3px;transition:var(--t);box-shadow:0 1px 3px rgba(0,0,0,.2)}
.switch input:checked+.track{background:var(--c-ink)}
.switch input:checked+.track::before{transform:translateX(18px)}

.dropzone{display:block;width:100%;text-align:center;cursor:pointer;
  border:1px solid var(--border);border-radius:var(--r);padding:40px 20px;
  background:var(--surface);transition:var(--t)}
.dropzone:hover,.dropzone.is-over{border-color:var(--c-ink);background:var(--surface-2)}
.dropzone .dz-title{font-family:var(--font-display);font-weight:500;color:var(--text);font-size:var(--fs-h4)}
.dropzone .dz-sub{display:block;color:var(--muted);font-size:var(--fs-sm);margin-top:6px}
.dropzone input[type=file]{display:none}

/* ===================== ТАБЫ ===================== */
.tabs{display:flex;gap:22px;border-bottom:1px solid var(--border)}
.tabs .tab{padding:12px 2px;cursor:pointer;font-weight:500;font-size:var(--fs-sm);
  color:var(--muted);border:0;background:none;border-bottom:2px solid transparent;margin-bottom:-1px}
.tabs .tab:hover{color:var(--text)}
.tabs .tab.is-active{color:var(--text);border-bottom-color:var(--c-ink)}

.pills{display:flex;gap:8px;flex-wrap:wrap}
.pill{padding:8px 16px;border-radius:var(--r-pill);border:1px solid var(--border);
  background:var(--surface);font-size:var(--fs-sm);font-weight:500;cursor:pointer;color:var(--muted)}
.pill:hover{color:var(--text)}
.pill.is-active{background:var(--c-ink);border-color:var(--c-ink);color:#fff}

/* ===================== ТАБЛИЦЫ ===================== */
.table{width:100%;border-collapse:collapse;font-size:var(--fs-sm);background:var(--surface)}
.table th{text-align:left;padding:14px;color:var(--muted);font-weight:500;
  font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:1px;border-bottom:1px solid var(--border)}
.table td{padding:14px;border-bottom:1px solid var(--hairline)}
.table tr:hover td{background:var(--surface-2)}

/* ===================== АЛЕРТЫ ===================== */
.alert{display:flex;gap:10px;padding:14px 16px;border-radius:var(--r-sm);font-size:var(--fs-sm);
  border:1px solid var(--border);background:var(--surface)}
.alert-info{border-left:2px solid var(--c-steel)}
.alert-success{border-left:2px solid var(--c-green)}
.alert-warning{border-left:2px solid var(--c-yellow)}
.alert-danger{border-left:2px solid var(--c-red)}

/* ===================== МОДАЛКА ===================== */
.modal-backdrop{position:fixed;inset:0;background:rgba(20,20,22,.35);backdrop-filter:blur(2px);
  display:flex;align-items:center;justify-content:center;padding:20px;z-index:100}
.modal{background:var(--surface);border-radius:var(--r-lg);max-width:480px;width:100%;
  box-shadow:var(--shadow-lg);overflow:hidden;max-height:90vh;display:flex;flex-direction:column}
/* широкая модалка для форм с большим числом настроек */
.modal-wide{max-width:1000px;width:min(90vw,1000px)}
.modal .modal-head{display:flex;align-items:center;justify-content:space-between;flex-shrink:0;
  padding:20px 24px;border-bottom:1px solid var(--hairline)}
.modal .modal-head h3{margin:0}
.modal .modal-x{cursor:pointer;font-size:22px;color:var(--muted);line-height:1;background:none;border:0}
.modal .modal-body{padding:24px;overflow-y:auto}

/* ===================== ТУЛТИП ===================== */
.tip{position:relative;border-bottom:1px dotted var(--muted);color:var(--text);cursor:help}
.tip .tip-box{visibility:hidden;opacity:0;position:absolute;bottom:135%;left:0;width:240px;
  background:var(--c-ink);color:#fff;padding:11px 13px;border-radius:var(--r-sm);font-size:var(--fs-xs);
  box-shadow:var(--shadow-lg);transition:var(--t);z-index:10;line-height:1.5}
.tip:hover .tip-box{visibility:visible;opacity:1}
.tip .tip-box b{color:var(--c-yellow)}

/* ===================== КРОШКИ / ПАГИНАЦИЯ ===================== */
.crumbs{display:flex;gap:10px;align-items:center;font-size:var(--fs-sm);color:var(--muted)}
.crumbs a{color:var(--muted);border:0} .crumbs a:hover{color:var(--text)}
.crumbs .sep{opacity:.5} .crumbs .current{color:var(--text)}
.pagination{display:flex;gap:4px}
.pagination .pg{min-width:36px;height:36px;display:inline-flex;align-items:center;justify-content:center;
  border:1px solid transparent;border-radius:var(--r-sm);background:none;cursor:pointer;font-size:var(--fs-sm);color:var(--muted)}
.pagination .pg:hover{color:var(--text)}
.pagination .pg.is-active{border-color:var(--border);color:var(--text)}

/* ===================== ЗАГРУЗЧИК ===================== */
.spinner{width:22px;height:22px;border:2px solid var(--border);border-top-color:var(--c-ink);
  border-radius:50%;animation:domu-spin .8s linear infinite;display:inline-block}
@keyframes domu-spin{to{transform:rotate(360deg)}}

/* ===================== СЕТКА ===================== */
.stack{display:flex;flex-direction:column;gap:var(--sp)}
.row{display:flex;gap:var(--sp);flex-wrap:wrap;align-items:center}
.grid{display:grid;gap:var(--sp)}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}
@media(max-width:820px){.grid-2,.grid-3,.grid-4{grid-template-columns:1fr}}

/* ===================== УТИЛИТЫ (чтобы не было inline-стилей) ===================== */
/* контейнеры и центрирование */
.container{max-width:1080px;margin:0 auto;padding:0 24px}
.container-sm{max-width:720px;margin:0 auto;padding:0 24px}
.page-center{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px}
.narrow{max-width:560px;width:100%}
.measure{max-width:680px}

/* flex / выравнивание */
.flex{display:flex}
.flex-col{display:flex;flex-direction:column}
.items-center{align-items:center}
.items-end{align-items:flex-end}
.justify-between{justify-content:space-between}
.justify-center{justify-content:center}
.wrap{flex-wrap:wrap}
.gap-xs{gap:6px}.gap-sm{gap:10px}.gap{gap:16px}.gap-lg{gap:24px}
.grow{flex:1}
.full{width:100%}

/* отступы */
.m-0{margin:0}.mt-0{margin-top:0}.mb-0{margin-bottom:0}
.mt-1{margin-top:6px}.mt-2{margin-top:12px}.mt-3{margin-top:18px}.mt-4{margin-top:26px}.mt-5{margin-top:38px}
.mb-1{margin-bottom:6px}.mb-2{margin-bottom:12px}.mb-3{margin-bottom:18px}.mb-4{margin-bottom:26px}.mb-5{margin-bottom:38px}

/* текст */
.text-center{text-align:center}
.text-right{text-align:right}
.text-sm{font-size:var(--fs-sm)}
.text-xs{font-size:var(--fs-xs)}
.fw-500{font-weight:500}.fw-600{font-weight:600}.fw-700{font-weight:700}
.lead{font-size:18px;color:var(--muted);line-height:1.6}

/* прочее */
.hidden{display:none}
.rounded{border-radius:var(--r)}
.pad-0{padding:0}
.overflow-hidden{overflow:hidden}

/* ===================== ЛОГОТИП (картинки из хранилища DOMU) ===================== */
/* .brand сам показывает цветной логотип на светлом фоне и белый — внутри .domu-dark */
:root{
  --logo-color:url("https://s3.domu.shop/media/domu-logo-znak-color-45e575.webp");
  --logo-white:url("https://s3.domu.shop/media/domu-logo-znak-wht-8fcc95.webp");
}
.brand{display:inline-block;width:44px;height:44px;flex-shrink:0;
  background:var(--logo-color) center/contain no-repeat}
.brand-sm{width:32px;height:32px}
.brand-lg{width:72px;height:72px}
.brand-xl{width:120px;height:120px}
.domu-dark .brand{background-image:var(--logo-white)}