/* invertor.trade — фірмовий стиль: зелений #11cf50 + чорний, Outfit / Manrope */
:root{
  --bg:#f5f6f7;
  --surface:#ffffff;
  --surface-2:#eef0f2;
  --ink:#0a0c0b;
  --ink-soft:#4a5250;
  --ink-faint:#7b8380;
  --accent:#11cf50;
  --accent-deep:#0a9c3a;
  --accent-ink:#06120a;
  --accent-soft:rgba(17,207,80,.14);
  --accent-line:rgba(17,207,80,.55);
  --teal:#0a9c3a;
  --danger:#d4432f;
  --ok:#0a9c3a;
  --black:#0a0c0b;
  --line:rgba(10,12,11,0.10);
  --line-strong:rgba(10,12,11,0.20);
  --radius:16px;
  --radius-sm:12px;
  --shadow:0 1px 2px rgba(10,12,11,0.05), 0 10px 28px -14px rgba(10,12,11,0.22);
  --font-head:"Outfit","Manrope",ui-sans-serif,system-ui,sans-serif;
  --font-body:"Manrope",ui-sans-serif,system-ui,sans-serif;
  --font-mono:"IBM Plex Mono",ui-monospace,monospace;
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#0c0e0d; --surface:#151817; --surface-2:#1d211f;
    --ink:#eef0ef; --ink-soft:#aab1ae; --ink-faint:#7e8683;
    --accent:#11cf50; --accent-deep:#3ee07a; --accent-ink:#06120a;
    --accent-soft:rgba(17,207,80,.16); --accent-line:rgba(17,207,80,.6);
    --teal:#3ee07a; --danger:#ef6f5d; --ok:#3ee07a;
    --line:rgba(238,240,239,0.10); --line-strong:rgba(238,240,239,0.22);
    --shadow:0 1px 2px rgba(0,0,0,0.35), 0 14px 32px -16px rgba(0,0,0,0.7);
  }
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--font-body); font-size:15px; line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{ font-family:var(--font-head); font-weight:700; margin:0; letter-spacing:-0.015em; text-wrap:balance; line-height:1.15;}
p{margin:0;}
a{color:inherit;}
img{max-width:100%;}
.mono{font-family:var(--font-mono);}
.wrap{max-width:1120px; margin:0 auto; padding:0 24px;}
.eyebrow{
  font-family:var(--font-mono); font-size:12.5px; letter-spacing:0.12em;
  text-transform:uppercase; color:var(--accent-deep); display:inline-flex; align-items:center; gap:8px; font-weight:500;
}
.eyebrow::before{content:""; width:8px; height:8px; border-radius:2px; background:var(--accent); display:inline-block;}

/* ---------- шапка ---------- */
header.site{ position:sticky; top:0; z-index:20; background:var(--surface); border-bottom:1px solid var(--line);}
.nav{display:flex; align-items:center; justify-content:space-between; padding:14px 24px; gap:16px;}
.brand{display:inline-flex; align-items:center; gap:10px; text-decoration:none; line-height:0;}
.brand img{display:block; height:26px; width:auto;}
.brand img.word{height:15px;}
.brand .dot{color:var(--accent-deep);}
.brand.text{font-family:var(--font-head); font-weight:700; font-size:20px; line-height:1; letter-spacing:-0.02em; gap:2px; align-items:baseline;}
.navlinks{display:flex; gap:22px; list-style:none; margin:0; padding:0; font-size:14.5px; font-weight:500; align-items:center;}
.navlinks a{text-decoration:none; color:var(--ink-soft); transition:color .15s;}
.navlinks a:hover, .navlinks a.active{color:var(--ink);}
.cart-pill{
  display:inline-flex; align-items:center; gap:6px; background:var(--ink); color:var(--bg) !important;
  border-radius:999px; padding:7px 14px; font-size:13.5px; text-decoration:none; font-weight:600;
}
.cart-pill b{font-family:var(--font-mono); font-weight:500; background:var(--accent); color:var(--accent-ink); border-radius:999px; padding:0 7px; line-height:18px; font-size:12px;}

/* ---------- кнопки ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:12px 22px;
  border-radius:var(--radius-sm); font-size:14.5px; font-weight:700; text-decoration:none; border:1.5px solid transparent;
  cursor:pointer; white-space:nowrap; transition:transform .15s ease, background .15s ease, border-color .15s ease, color .15s ease;
  font-family:var(--font-body); letter-spacing:-0.005em;
}
.btn:hover{transform:translateY(-1px);}
.btn-primary{background:var(--accent); color:var(--accent-ink);}
.btn-primary:hover{background:#0fbd49;}
.btn-dark{background:var(--black); color:#fff;}
.btn-dark:hover{background:#1d2220;}
.btn-ghost{background:transparent; color:var(--ink); border-color:var(--line-strong);}
.btn-ghost:hover{border-color:var(--ink);}
.btn-ghost-dark{background:transparent; color:var(--accent-ink); border-color:rgba(6,18,10,.45);}
.btn-ghost-dark:hover{border-color:var(--accent-ink); background:rgba(6,18,10,.06);}
.btn-danger{background:transparent; color:var(--danger); border-color:var(--danger);}
.btn-block{width:100%;}
.btn:disabled{opacity:.5; cursor:not-allowed; transform:none;}

main{padding:40px 0 64px;}
.page-head{margin-bottom:28px;}
.page-head h1{font-size:clamp(26px,3.2vw,36px); margin-top:8px;}
.page-head p{color:var(--ink-soft); font-size:15.5px; margin-top:10px; max-width:58ch;}

/* ---------- hero головної ---------- */
.hero{
  position:relative; overflow:hidden; background:var(--accent); color:var(--accent-ink);
  border-radius:24px; padding:52px 48px; margin-bottom:36px; isolation:isolate;
}
.hero h1{font-size:clamp(30px,4.6vw,52px); max-width:16ch; letter-spacing:-0.025em;}
.hero p{font-size:clamp(15px,1.6vw,18px); max-width:48ch; margin-top:16px; line-height:1.5; color:rgba(6,18,10,.82); font-weight:500;}
.hero .hero-actions{display:flex; gap:12px; flex-wrap:wrap; margin-top:28px;}
.hero .hero-mark{
  position:absolute; right:-40px; bottom:-60px; width:min(46%,420px); height:auto; opacity:.14; z-index:-1;
  pointer-events:none; user-select:none;
}
.hero-facts{display:flex; gap:28px; flex-wrap:wrap; margin-top:34px; padding-top:22px; border-top:1.5px solid rgba(6,18,10,.18);}
.hero-facts div{display:flex; flex-direction:column; gap:2px; font-size:13.5px; color:rgba(6,18,10,.75); font-weight:500;}
.hero-facts b{font-family:var(--font-head); font-size:20px; color:var(--accent-ink); font-weight:700; letter-spacing:-0.02em;}

.section-head{display:flex; align-items:end; justify-content:space-between; gap:16px; flex-wrap:wrap; margin:8px 0 18px;}
.section-head h2{font-size:clamp(22px,2.6vw,28px);}

.cat-filter{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:24px;}
.cat-filter a{
  font-size:13.5px; font-weight:600; padding:8px 15px; border-radius:999px; border:1.5px solid var(--line-strong);
  text-decoration:none; color:var(--ink-soft); background:var(--surface); transition:all .15s;
}
.cat-filter a:hover{border-color:var(--ink); color:var(--ink);}
.cat-filter a.active{background:var(--ink); color:var(--bg); border-color:var(--ink);}

.grid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px;}
.card{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  padding:20px; display:flex; flex-direction:column; gap:10px; transition:border-color .15s, box-shadow .15s, transform .15s;
  text-decoration:none; color:inherit;
}
.card:hover{border-color:var(--accent-line); box-shadow:var(--shadow); transform:translateY(-2px);}
.card--kit{background:var(--accent-soft); border-color:var(--accent-line); position:relative;}
.card--kit:hover{border-color:var(--accent);}
.kit-badge{
  align-self:flex-start; background:var(--accent); color:var(--accent-ink, #06120a); font-family:var(--font-mono);
  font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; padding:5px 10px; border-radius:999px;
}
.card .icon{width:36px; height:36px; color:var(--accent-deep);}
.card .card-photo{
  width:100%; height:130px; object-fit:contain; background:#fff; border-radius:12px; padding:8px;
}
.card h3{font-size:16px; font-weight:600;}
.card .cat-tag{font-size:11.5px; color:var(--accent-deep); font-family:var(--font-mono); text-transform:uppercase; letter-spacing:.08em; font-weight:500;}
.card p.desc{font-size:13.5px; color:var(--ink-soft); line-height:1.5; flex:1;}
.card .price-row{display:flex; align-items:center; justify-content:space-between; margin-top:6px;}
.card .price{font-family:var(--font-head); font-weight:700; font-size:18px; letter-spacing:-0.01em;}
.card .details{font-size:13.5px; font-weight:600; text-decoration:none; color:var(--accent-deep);}
.card:hover .details{text-decoration:underline;}

/* ---------- готові комплекти на головній ---------- */
.kits-showcase{margin:44px 0 40px;}
.kit-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:18px;}
.kit-feature-card{
  display:flex; flex-direction:column; background:var(--surface); border:1.5px solid var(--accent-line);
  border-radius:var(--radius); overflow:hidden; text-decoration:none; color:inherit;
  transition:border-color .15s, box-shadow .15s, transform .15s;
}
.kit-feature-card:hover{border-color:var(--accent); box-shadow:var(--shadow); transform:translateY(-2px);}
.kit-feature-visual{
  background:var(--accent-soft); padding:18px 20px 10px; display:flex; align-items:center; justify-content:center;
}
.kit-feature-visual .kit-schematic{width:100%; max-width:280px; height:auto; color:var(--accent-deep);}
.kit-feature-body{padding:18px 20px 20px; display:flex; flex-direction:column; gap:10px;}
.kit-feature-body h3{font-size:18px;}
.kit-for-whom{font-size:13.5px; color:var(--ink-soft); line-height:1.5;}
.kit-powers{display:flex; flex-wrap:wrap; gap:6px; align-items:center;}
.kit-powers-label{font-family:var(--font-mono); font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-faint); margin-right:2px;}
.kit-chip{
  background:var(--surface-2); border:1px solid var(--line); border-radius:999px; padding:4px 10px;
  font-size:12px; font-weight:600; color:var(--ink-soft);
}
.kit-stats{display:flex; flex-wrap:wrap; gap:18px; padding:10px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line);}
.kit-stats div{display:flex; flex-direction:column; gap:1px;}
.kit-stats b{font-family:var(--font-head); font-size:16px; color:var(--accent-deep); font-weight:700;}
.kit-stats span{font-size:11.5px; color:var(--ink-faint);}
.kit-feature-body .price-row{margin-top:2px;}

/* ---------- "або зберіть самі" ---------- */
.assemble-teaser{margin-bottom:40px;}
.cat-teaser-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:14px;}
.cat-teaser-tile{
  display:flex; flex-direction:column; align-items:flex-start; gap:10px; padding:18px;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-sm);
  text-decoration:none; color:inherit; font-weight:600; font-size:14px; transition:border-color .15s, transform .15s;
}
.cat-teaser-tile:hover{border-color:var(--accent-line); transform:translateY(-2px);}
.cat-teaser-tile .icon{width:26px; height:26px; color:var(--accent-deep);}

@media (max-width:720px){
  .kit-grid{grid-template-columns:1fr;}
  .cat-teaser-grid{grid-template-columns:repeat(2,1fr);}
}

.product-view{display:grid; grid-template-columns:1fr 1.2fr; gap:36px; align-items:start;}
.product-visual{
  background:var(--surface); border:1px solid var(--line); border-radius:20px; aspect-ratio:1/1;
  display:flex; align-items:center; justify-content:center;
  position:sticky; top:88px;
}
.product-visual svg{width:96px; height:96px; color:var(--accent-deep);}
.product-visual img{width:80%; height:80%; object-fit:contain; background:#fff; border-radius:16px; padding:16px;}
.product-visual--kit{aspect-ratio:auto; padding:32px; background:var(--accent-soft); border-color:var(--accent-line);}
.product-visual--kit svg.kit-schematic{width:100%; height:auto; max-width:360px; color:var(--accent-deep);}
.delivery-badge{
  display:flex; align-items:center; gap:10px; font-size:13px; font-weight:600; color:var(--ink-soft);
  background:var(--surface-2); border-radius:var(--radius-sm); padding:10px 14px; margin:14px 0;
}
.delivery-badge svg{width:20px; height:20px; flex:none; color:var(--accent-deep);}
.product-info h1{font-size:clamp(24px,3vw,32px); margin:10px 0 14px;}
.product-info .cat-tag{font-size:12px; color:var(--accent-deep); text-transform:uppercase; letter-spacing:.08em; font-weight:500;}
.product-price{font-family:var(--font-head); font-weight:700; font-size:30px; margin:16px 0 18px; letter-spacing:-0.02em;}
.qty-form{display:flex; gap:10px; align-items:center; margin-bottom:18px;}
.qty-form input[type=number]{
  width:76px; padding:11px; border-radius:var(--radius-sm); border:1.5px solid var(--line-strong); background:var(--surface);
  color:var(--ink); font-size:15px; font-family:var(--font-mono); text-align:center;
}

table.simple{width:100%; border-collapse:collapse; font-size:14px;}
table.simple th{text-align:left; font-size:12px; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-faint); padding:0 10px 10px; font-weight:600;}
table.simple td{padding:14px 10px; border-top:1px solid var(--line); vertical-align:middle;}
table.simple tr:first-child td{border-top:none;}
.cart-table-wrap{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:8px 12px; overflow-x:auto;}
.qty-inline{display:flex; align-items:center; gap:8px;}
.qty-inline input{width:56px; padding:7px; border-radius:8px; border:1.5px solid var(--line-strong); background:var(--surface); color:var(--ink); font-family:var(--font-mono); text-align:center;}
.icon-btn{background:none; border:none; color:var(--ink-faint); cursor:pointer; font-size:16px; line-height:1;}
.icon-btn:hover{color:var(--danger);}

.cart-summary{
  display:flex; justify-content:space-between; align-items:center; padding:18px 22px; margin-top:16px;
  background:var(--surface); border-radius:var(--radius); border:1px solid var(--line);
}
.cart-summary .total{font-family:var(--font-head); font-weight:700; font-size:24px; letter-spacing:-0.02em;}

.form-grid{display:grid; gap:14px; max-width:480px;}
.form-grid label{font-size:13.5px; color:var(--ink-soft); font-weight:600; display:flex; flex-direction:column; gap:6px;}
.form-grid input, .form-grid textarea, .form-grid select{
  padding:12px 14px; border-radius:var(--radius-sm); border:1.5px solid var(--line-strong); background:var(--surface);
  color:var(--ink); font-size:15px; font-family:inherit; font-weight:500; transition:border-color .15s, box-shadow .15s;
}
.form-grid input:focus, .form-grid textarea:focus, .form-grid select:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft);}
.form-grid textarea{resize:vertical; min-height:70px;}
.radio-row{display:flex; gap:10px; flex-wrap:wrap;}
.radio-opt{
  display:flex !important; flex-direction:row !important; align-items:center; gap:7px; font-weight:600; font-size:14.5px; color:var(--ink);
  padding:10px 14px; border-radius:var(--radius-sm); border:1.5px solid var(--line-strong); background:var(--surface); cursor:pointer; flex:none;
}
.radio-opt:has(input:checked){border-color:var(--accent); background:var(--accent-soft);}
.radio-opt input{accent-color:var(--accent); width:15px; height:15px;}
.form-consent{font-size:12.5px; color:var(--ink-faint); line-height:1.5; font-weight:400;}
.form-consent a{color:var(--ink); text-decoration:underline;}

.checkout-grid{display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:start;}
.order-box{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:20px;}
.order-box .row{display:flex; justify-content:space-between; font-size:14px; padding:9px 0; border-bottom:1px solid var(--line); gap:12px;}
.order-box .row:last-child{border-bottom:none;}
.order-box .row a{color:var(--accent-ink, var(--ink)); font-weight:700; text-decoration:none; border-bottom:1px solid var(--accent);}
.order-box .row a:hover{color:var(--accent);}

.pay-box{
  background:var(--surface); border:1px solid var(--line); border-radius:20px; padding:28px;
  display:flex; flex-direction:column; align-items:center; text-align:center; gap:16px;
}
.qr-holder{background:#fff; padding:14px; border-radius:14px; border:1.5px solid var(--accent-line);}
.pay-details{background:var(--surface-2); border-radius:12px; padding:14px 18px; font-size:13.5px; text-align:left; width:100%;}
.pay-details .row{display:flex; justify-content:space-between; padding:6px 0; gap:10px;}
.pay-details b{font-family:var(--font-mono); font-weight:500; text-align:right; word-break:break-all;}
.pay-note{font-size:12.5px; color:var(--ink-faint); max-width:46ch;}
.success-head{background:var(--accent); color:var(--accent-ink); border-radius:24px; padding:36px 40px; margin-bottom:32px;}
.success-head .eyebrow{color:rgba(6,18,10,.7);}
.success-head .eyebrow::before{background:var(--accent-ink);}
.success-head h1{font-size:clamp(26px,3.4vw,38px); margin-top:8px;}
.success-head p{margin-top:10px; font-size:15.5px; color:rgba(6,18,10,.82); max-width:60ch; font-weight:500;}

.status-pill{
  display:inline-flex; align-items:center; gap:6px; font-size:12px; padding:4px 10px; border-radius:999px;
  font-family:var(--font-mono); text-transform:uppercase; letter-spacing:.04em;
}
.status-new{background:var(--accent-soft); color:var(--accent-deep);}
.status-paid{background:rgba(10,156,58,.16); color:var(--ok);}
.status-shipped{background:rgba(10,12,11,.08); color:var(--ink);}
.status-done{background:var(--surface-2); color:var(--ink-soft);}
.status-cancelled{background:rgba(212,67,47,.14); color:var(--danger);}

.empty-state{
  text-align:center; padding:60px 20px; color:var(--ink-soft); background:var(--surface);
  border:1.5px dashed var(--line-strong); border-radius:var(--radius);
}

/* ---------- підвал ---------- */
footer{background:var(--black); color:#c9cfcc; margin-top:40px; padding:44px 0 28px;}
.foot-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1.2fr; gap:32px; padding-bottom:28px; border-bottom:1px solid rgba(255,255,255,.12);}
.foot-brand{display:flex; flex-direction:column; gap:14px;}
.foot-brand .brand img{height:24px;}
.foot-brand .brand img.word{height:14px;}
.foot-brand p{font-size:13.5px; line-height:1.55; color:#9aa19e; max-width:34ch;}
.foot-col h4{font-family:var(--font-head); font-size:13px; text-transform:uppercase; letter-spacing:.1em; color:#fff; margin:0 0 12px; font-weight:600;}
.foot-col ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; font-size:14px;}
.foot-col a{color:#c9cfcc; text-decoration:none; transition:color .15s;}
.foot-col a:hover{color:var(--accent);}
.foot-col .mono{font-size:13.5px;}
.foot-row{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px; font-size:12.5px; color:#7e8683; padding-top:20px;}
.foot-row .mono{color:#7e8683;}

.alert{padding:12px 16px; border-radius:var(--radius-sm); font-size:13.5px; margin-bottom:16px; font-weight:500;}
.alert-error{background:rgba(212,67,47,.1); color:var(--danger); border:1px solid rgba(212,67,47,.25);}
.alert-ok{background:var(--accent-soft); color:var(--accent-deep); border:1px solid var(--accent-line);}

/* ---------- контакти ---------- */
.contact-block{background:var(--surface); border:1px solid var(--line); border-radius:24px; padding:36px 40px; margin-top:48px; display:grid; grid-template-columns:1.2fr 1fr; gap:32px; align-items:center;}
.contact-block h2{font-size:clamp(22px,2.8vw,30px); margin:10px 0 12px;}
.contact-block p{color:var(--ink-soft); font-size:15px; max-width:44ch;}
.contact-list{display:flex; flex-direction:column; gap:10px;}
.contact-list a{display:flex; align-items:center; gap:12px; padding:14px 18px; border-radius:var(--radius-sm); background:var(--surface-2); text-decoration:none; font-weight:600; font-size:15px; transition:background .15s;}
.contact-list a:hover{background:var(--accent-soft);}
.contact-list a span{font-family:var(--font-mono); font-weight:500;}
.contact-list a small{color:var(--ink-faint); font-weight:500; font-size:12.5px; font-family:var(--font-body);}
.contact-list svg{width:20px; height:20px; color:var(--accent-deep); flex:none;}

/* ---------- текстові сторінки (оферта, політика тощо) ---------- */
.doc{max-width:760px;}
.doc .page-head p{max-width:none;}
.doc-body{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:32px 36px; font-size:15px; line-height:1.65; color:var(--ink);}
.doc-body h2{font-size:18px; margin:26px 0 10px; font-weight:700;}
.doc-body h2:first-child{margin-top:0;}
.doc-body p{margin:0 0 10px;}
.doc-body ul{margin:6px 0 12px; padding-left:20px;}
.doc-body li{margin-bottom:6px;}
.doc-body .requisites{margin-top:24px; padding:16px 18px; border-radius:var(--radius-sm); background:var(--surface-2); font-size:14px; line-height:1.6;}
.doc-body a{color:var(--accent-deep);}
.doc-nav{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:22px;}
.doc-nav a{font-size:13px; font-weight:600; padding:7px 13px; border-radius:999px; border:1.5px solid var(--line-strong); text-decoration:none; color:var(--ink-soft); background:var(--surface);}
.doc-nav a.active{background:var(--ink); color:var(--bg); border-color:var(--ink);}
.about-hero{background:var(--accent); color:var(--accent-ink); border-radius:24px; padding:44px 48px; margin-bottom:28px; position:relative; overflow:hidden; isolation:isolate;}
.about-hero h1{font-size:clamp(28px,4vw,44px); max-width:18ch;}
.about-hero .hero-mark{position:absolute; right:-30px; bottom:-50px; width:min(40%,340px); opacity:.14; z-index:-1;}
.about-text{font-size:clamp(16px,1.8vw,19px); line-height:1.6; max-width:62ch; color:var(--ink);}
.about-text p{margin-bottom:14px;}
.about-text .lead{font-family:var(--font-head); font-weight:600; font-size:clamp(19px,2.2vw,24px); letter-spacing:-0.01em;}

/* ---------- адмінка ---------- */
.admin-shell{display:flex; min-height:100vh;}
.admin-side{width:230px; flex:none; background:var(--black); color:#c9cfcc; padding:22px 14px;}
.admin-side .brand{padding:0 10px; margin-bottom:22px;}
.admin-side .brand img{height:22px;}
.admin-side .brand img.word{height:13px;}
.admin-side a{display:block; padding:10px 12px; border-radius:10px; text-decoration:none; color:#aab1ae; font-size:14px; margin-bottom:4px; font-weight:500;}
.admin-side a.active{background:var(--accent); color:var(--accent-ink); font-weight:700;}
.admin-side a:hover:not(.active){background:rgba(255,255,255,.08); color:#fff;}
.admin-main{flex:1; padding:28px 32px;}
.admin-login-wrap{min-height:100vh; display:flex; align-items:center; justify-content:center; padding:24px; background:var(--black);}
.admin-login-box{background:var(--surface); border:1px solid var(--line); border-radius:20px; padding:32px; width:100%; max-width:380px;}
.admin-login-box .brand{margin-bottom:22px;}

@media (max-width:900px){
  .grid{grid-template-columns:repeat(2,1fr);}
  .product-view{grid-template-columns:1fr;}
  .product-visual{position:static;}
  .checkout-grid{grid-template-columns:1fr;}
  .foot-grid{grid-template-columns:1fr 1fr;}
  .contact-block{grid-template-columns:1fr; padding:28px;}
  .hero{padding:40px 28px;}
  .admin-shell{flex-direction:column;}
  .admin-side{width:100%; display:flex; gap:4px; overflow-x:auto; align-items:center; padding:12px 14px;}
  .admin-side .brand{margin:0 12px 0 0;}
  .admin-side a{white-space:nowrap; margin:0;}
}
@media (max-width:600px){
  .grid{grid-template-columns:1fr;}
  .navlinks{gap:12px; font-size:13.5px;}
  .navlinks .hide-sm{display:none;}
  .brand img.word{display:none;}
  .foot-grid{grid-template-columns:1fr;}
  .hero{padding:32px 22px; border-radius:18px;}
  .hero .hero-mark{display:none;}
  .doc-body{padding:22px;}
  .about-hero{padding:32px 24px;}
}

/* ===== Конфігуратор ===== */
.cfg{max-width:740px;}
.cfg [hidden]{display:none !important;}
.cfg h3{font-size:19px; margin-bottom:12px;}
.cfg h4{font-size:15.5px; margin:0 0 8px;}
.cfg h5{font-size:12.5px; margin:14px 0 6px; color:var(--ink-faint); text-transform:uppercase; letter-spacing:.08em; font-family:var(--font-mono); font-weight:500;}
.cfg-hint{font-size:13.5px; color:var(--ink-faint); line-height:1.55; margin:0 0 12px;}
.cfg-hint a{color:var(--ink); text-decoration:underline;}
.cfg-progress{display:flex; gap:6px; flex-wrap:wrap; margin-bottom:22px;}
.cfg-progress button{
  font-family:var(--font-mono); font-size:12px; letter-spacing:.04em; padding:7px 13px; border-radius:999px;
  border:1.5px solid var(--line-strong); background:var(--surface); color:var(--ink-soft); cursor:pointer;
}
.cfg-progress button.active{background:var(--accent); color:var(--accent-ink); border-color:var(--accent); font-weight:600;}
.cfg-progress button:disabled{opacity:.4; cursor:default;}
.choice-grid{display:flex; gap:10px; flex-wrap:wrap;}
.choice-btn{
  padding:13px 20px; border-radius:var(--radius-sm); border:1.5px solid var(--line-strong); background:var(--surface);
  color:var(--ink); font-size:14.5px; font-weight:600; cursor:pointer; font-family:inherit; transition:all .15s;
}
.choice-btn:hover{border-color:var(--accent);}
.choice-btn.selected{border-color:var(--accent); background:var(--accent-soft);}
.cfg-nav{display:flex; gap:10px; flex-wrap:wrap; margin-top:20px;}

.cfg-search{position:relative; margin-bottom:14px;}
.cfg-search input{
  width:100%; padding:14px 16px; border-radius:var(--radius-sm); border:1.5px solid var(--line-strong); background:var(--surface);
  color:var(--ink); font-size:15px; font-family:inherit; font-weight:500;
}
.cfg-search input:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft);}
.cfg-search-results{
  position:absolute; left:0; right:0; top:calc(100% + 4px); z-index:10; background:var(--surface); border:1px solid var(--line-strong);
  border-radius:var(--radius-sm); box-shadow:var(--shadow); overflow:hidden; max-height:360px; overflow-y:auto;
}
.cfg-search-item{display:flex; flex-direction:column; gap:2px; width:100%; text-align:left; padding:10px 14px; border:none; border-bottom:1px solid var(--line); background:none; color:var(--ink); font:inherit; cursor:pointer;}
.cfg-search-item:hover{background:var(--surface-2);}
.cfg-search-item small{color:var(--ink-faint); font-size:12px;}
.cfg-search-empty{padding:12px 14px; font-size:13.5px; color:var(--ink-soft);}
.cfg-search-empty a{color:var(--ink); text-decoration:underline;}

.cfg-tiles{display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:8px; margin-bottom:14px;}
.cfg-tile{
  display:flex; flex-direction:column; align-items:flex-start; gap:2px; padding:12px 13px; border-radius:var(--radius-sm); text-align:left;
  border:1.5px solid var(--line-strong); background:var(--surface); color:var(--ink); font:inherit; font-size:13.5px; font-weight:600; cursor:pointer; line-height:1.3; transition:all .15s;
}
.cfg-tile:hover{border-color:var(--accent);}
.cfg-tile.selected{border-color:var(--accent); background:var(--accent-soft);}
.cfg-tile.selected span::before{content:"✓ "; color:var(--accent-deep);}
.cfg-tile em{font-style:normal; font-size:11px; color:var(--ink-faint); font-weight:500;}
.cfg-indiv{font-style:normal; font-size:11.5px; color:var(--accent-deep); font-family:var(--font-mono);}

.cfg-all{margin-bottom:18px;}
.cfg-all summary{cursor:pointer; font-size:13.5px; color:var(--ink-soft); text-decoration:underline; list-style:none; font-weight:600;}
.cfg-all summary::-webkit-details-marker{display:none;}
.cfg-all[open] summary{margin-bottom:10px;}
.cfg-cat{font-family:var(--font-mono); font-size:11.5px; text-transform:uppercase; letter-spacing:.08em; color:var(--ink-faint); margin:14px 0 6px;}
.check-row{display:flex; align-items:center; gap:10px; padding:9px 12px; border:1px solid var(--line); border-radius:10px; background:var(--surface); font-size:13.5px; cursor:pointer; margin-bottom:6px;}
.check-row input{width:16px; height:16px; accent-color:var(--accent-deep);}

.cfg-selected{background:var(--surface-2); border:1px solid var(--line); border-radius:var(--radius); padding:16px; margin-bottom:12px;}
.cfg-sel-row{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-sm); padding:10px 12px; margin-bottom:8px; display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px;}
.cfg-sel-row.indiv{border-color:var(--accent-line);}
.cfg-sel-main{flex:1; min-width:180px; display:flex; flex-direction:column; gap:2px; font-size:14px; font-weight:600;}
.cfg-sel-ctrl{display:flex; align-items:center; gap:10px;}
.cfg-qty{display:inline-flex; align-items:center; border:1.5px solid var(--line-strong); border-radius:999px; overflow:hidden;}
.cfg-qty button{width:30px; height:28px; border:none; background:transparent; color:var(--ink); font-size:16px; cursor:pointer;}
.cfg-qty span{min-width:22px; text-align:center; font-size:13.5px; font-family:var(--font-mono);}
.cfg-questions{width:100%; display:flex; flex-wrap:wrap; gap:8px 16px; padding-top:6px; border-top:1px dashed var(--line);}
.cfg-questions label{font-size:12.5px; color:var(--ink-soft); display:flex; flex-direction:column; gap:4px; min-width:200px; font-weight:500;}
.cfg-questions select{padding:7px 10px; border-radius:8px; border:1.5px solid var(--line-strong); background:var(--surface); color:var(--ink); font:inherit; font-size:13px;}

.cfg-loading{padding:40px; text-align:center; color:var(--ink-faint);}
.alert-note{background:var(--accent-soft); color:var(--accent-deep); border:1px solid var(--accent-line);}
.result-card{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:22px; margin-bottom:14px;}
.cfg-sys{display:flex; flex-direction:column; gap:10px; margin:14px 0;}
.cfg-sys-row{display:flex; align-items:center; gap:14px; padding:10px; border:1px solid var(--line); border-radius:var(--radius-sm); text-decoration:none; color:inherit; transition:border-color .15s, background .15s;}
.cfg-sys-row:hover{border-color:var(--accent-line); background:var(--accent-soft);}
.cfg-sys-row img, .cfg-sys-noimg{width:64px; height:64px; object-fit:contain; background:#fff; border-radius:10px; padding:4px; flex:none;}
.cfg-sys-noimg{background:var(--surface-2);}
.cfg-sys-info{flex:1; display:flex; flex-direction:column; gap:2px; font-size:14px; min-width:0; font-weight:600;}
.cfg-sys-info small{color:var(--ink-faint); font-size:12.5px; font-weight:500;}
.cfg-sys-price{font-size:15px; white-space:nowrap; font-family:var(--font-head); font-weight:700;}
.cfg-comp summary{cursor:pointer; font-size:13.5px; color:var(--ink-soft); list-style:none;}
.cfg-comp summary::-webkit-details-marker{display:none;}
.cfg-comp summary::before{content:"▸ ";}
.cfg-comp[open] summary::before{content:"▾ ";}
.cfg-comp .row, .cfg-block .row, .cfg-calc .row{display:flex; justify-content:space-between; gap:12px; font-size:13.5px; padding:7px 0; border-bottom:1px solid var(--line);}
.cfg-calc .row.small{font-size:12.5px; color:var(--ink-soft);}
.cfg-block .row:last-child, .cfg-calc .row:last-child{border-bottom:none;}
.cfg-total{display:flex; justify-content:space-between; align-items:center; padding:14px 0 4px; margin-top:8px; border-top:1.5px solid var(--line-strong); font-size:15px; font-weight:600;}
.cfg-total .price{font-size:26px; font-family:var(--font-head); font-weight:700; letter-spacing:-0.02em;}
.cfg-actions{display:flex; gap:10px; flex-wrap:wrap; margin-top:14px;}
.cfg-block{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:16px 18px; margin-bottom:12px;}
.cfg-block > summary{cursor:pointer; font-size:14px; font-weight:600; list-style:none;}
.cfg-block > summary::-webkit-details-marker{display:none;}
.cfg-block > summary::before{content:"▸ "; color:var(--ink-faint);}
.cfg-block[open] > summary::before{content:"▾ ";}
.cfg-block[open] > summary{margin-bottom:8px;}
.cfg-lead{border-color:var(--accent-line);}
.cfg-saving{color:var(--ok);}
.link-btn{background:none; border:none; padding:0; color:var(--ink-soft); text-decoration:underline; cursor:pointer; font:inherit; font-size:12.5px; white-space:nowrap;}
.link-btn:hover{color:var(--ink);}

.cfg-modal{position:fixed; inset:0; background:rgba(10,12,11,.55); z-index:50; display:flex; align-items:center; justify-content:center; padding:20px;}
.cfg-modal-box{background:var(--surface); border-radius:20px; padding:26px; width:100%; max-width:440px; box-shadow:var(--shadow);}
.cfg-modal-box h3{margin-bottom:8px;}
.cfg-modal-box .form-grid{margin-top:12px;}
.cfg-summary{background:var(--accent-soft); border:1px solid var(--accent-line); border-radius:var(--radius); padding:14px 18px; margin-bottom:16px; font-size:13.5px; color:var(--ink-soft);}
@media (max-width:600px){
  .cfg-sys-row{flex-wrap:wrap;}
  .cfg-sys-price{width:100%; text-align:right;}
}

.cfg-field-hint{font-size:12px; color:var(--ink-faint); line-height:1.45; font-weight:400;}
.cfg-modal-wide{max-width:640px;}
.cfg-phase-grid{display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:12px;}
.cfg-phase-card{display:flex; flex-direction:column; align-items:center; gap:4px; padding:10px; border-radius:var(--radius-sm); border:1.5px solid var(--line-strong); background:var(--surface); color:var(--ink); font:inherit; cursor:pointer; text-align:center; transition:all .15s;}
.cfg-phase-card:hover{border-color:var(--accent); background:var(--accent-soft);}
.cfg-phase-card svg{width:100%; height:auto;}
.cfg-phase-card b{font-size:15px; margin-top:4px;}
.cfg-phase-card small{font-size:12px; color:var(--ink-faint);}
.cfg-comp{margin-top:6px;}
.cfg-comp-head{font-family:var(--font-mono); font-size:11.5px; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-faint); margin:10px 0 6px;}
.cfg-comp-row{display:flex; align-items:center; gap:12px; padding:7px 4px; border-bottom:1px solid var(--line); font-size:13.5px; text-decoration:none; color:inherit; border-radius:8px; transition:background .15s;}
.cfg-comp-row:hover{background:var(--accent-soft);}
.cfg-comp-row:last-child{border-bottom:none;}
.cfg-comp-row img, .cfg-comp-noimg{width:40px; height:40px; object-fit:contain; background:#fff; border-radius:8px; padding:3px; flex:none; border:1px solid var(--line);}
.cfg-comp-noimg{display:flex; align-items:center; justify-content:center; color:var(--ink-faint); background:var(--surface-2);}
.cfg-comp-noimg svg{width:20px; height:20px;}
.cfg-comp-name{flex:1;}
@media (max-width:520px){ .cfg-phase-grid{grid-template-columns:1fr;} }