/* OptKlass — общие стили. Проект: OptKlass, отдельный от ZVUMO. */
:root{
  --ink:#15171c; --ink-2:#4a4f5a; --muted:#8b8f99;
  --paper:#fbfaf7; --card:#ffffff; --line:#e7e4dc;
  --brand:#16624f; --brand-2:#1d7f67; --brand-soft:#e8f2ee;
  --accent:#e8a33d; --danger:#b4342a;
  --r:16px; --shadow:0 1px 2px rgba(20,23,28,.06),0 8px 24px rgba(20,23,28,.06);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font:16px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}
img{max-width:100%; display:block}
a{color:var(--brand); text-decoration:none}
a:hover{text-decoration:underline}
h1{font-size:32px; line-height:1.15; margin:24px 0 12px; letter-spacing:-.02em}
h2{font-size:20px; margin:28px 0 12px; letter-spacing:-.01em}
h3{font-size:17px; margin:0 0 12px}
.wrap{max-width:1160px; margin:0 auto; padding:0 20px}
.muted{color:var(--muted)}
.small{font-size:13px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.err{color:var(--danger)}
.skip{position:absolute;left:-9999px}
.skip:focus{left:8px;top:8px;background:#fff;padding:8px;border-radius:8px;z-index:100}

/* ---------- шапка ---------- */
.topbar{background:#fff; border-bottom:1px solid var(--line); position:sticky; top:0; z-index:30}
.topbar-in{display:flex; align-items:center; gap:18px; height:66px}
.logo{display:flex; align-items:center; gap:9px; font-size:20px; font-weight:800; color:var(--ink); text-decoration:none}
.logo em{color:var(--brand); font-style:normal}
.logo-mark{width:32px;height:32px;border-radius:9px;background:var(--brand);color:#fff;display:grid;place-items:center;font-size:18px;font-weight:800}
.search{flex:1; display:flex; max-width:560px; background:var(--paper); border:1px solid var(--line); border-radius:12px; overflow:hidden}
.search input{flex:1; border:0; background:transparent; padding:11px 14px; font-size:15px; outline:none}
.search button{border:0; background:var(--brand); color:#fff; padding:0 18px; font-size:14px; font-weight:600; cursor:pointer}
.topnav{display:flex; align-items:center; gap:16px; font-size:14px}
.topnav a{color:var(--ink-2)}
.cats-strip{border-top:1px solid var(--line); background:#fff}
.cats-in{display:flex; gap:18px; overflow-x:auto; padding:9px 20px; font-size:14px; white-space:nowrap; scrollbar-width:none}
.cats-in::-webkit-scrollbar{display:none}
.cats-in a{color:var(--ink-2)}
.btn-sm{background:var(--brand); color:#fff !important; padding:8px 14px; border-radius:10px; font-weight:600; text-decoration:none !important}
.btn-sm:hover{background:var(--brand-2)}

/* ---------- кнопки ---------- */
.btn{display:inline-block; background:var(--brand); color:#fff; border:0; border-radius:12px;
  padding:12px 22px; font-size:15px; font-weight:600; cursor:pointer; text-decoration:none !important}
.btn:hover{background:var(--brand-2)}
.btn-ghost{display:inline-block; background:#fff; color:var(--ink); border:1px solid var(--line);
  border-radius:12px; padding:11px 20px; font-size:15px; font-weight:600; cursor:pointer; text-decoration:none !important}
.btn-ghost:hover{border-color:var(--brand)}
.link-danger{background:none;border:0;color:var(--danger);cursor:pointer;padding:0;font-size:14px}

/* ---------- герой ---------- */
.hero{padding:44px 0 8px; max-width:760px}
.hero h1{margin-top:0; font-size:40px}
.lead{font-size:17px; color:var(--ink-2); margin:0 0 20px}
.hero-actions{display:flex; gap:12px; flex-wrap:wrap}

/* ---------- категории ---------- */
.cats{display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:12px}
.cat-tile{background:var(--card); border:1px solid var(--line); border-radius:var(--r); padding:18px;
  display:flex; flex-direction:column; gap:4px; color:var(--ink); text-decoration:none; transition:.15s}
.cat-tile:hover{border-color:var(--brand); transform:translateY(-2px); text-decoration:none}
.cat-ico{font-size:26px}
.cat-name{font-weight:600}
.cat-cnt{font-size:13px; color:var(--muted)}

/* ---------- сетка товаров ---------- */
.row-head{display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap; margin:28px 0 12px}
.row-head h1,.row-head h2{margin:0}
.grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:16px}
.card{background:var(--card); border:1px solid var(--line); border-radius:var(--r); overflow:hidden;
  display:flex; flex-direction:column; text-decoration:none; color:var(--ink); transition:.15s}
.card:hover{border-color:var(--brand); transform:translateY(-2px); text-decoration:none}
.card-img{aspect-ratio:4/3; background:#f1efe9; display:grid; place-items:center; overflow:hidden}
.card-img img{width:100%; height:100%; object-fit:cover}
.ph{color:#b6b2a8; font-size:13px; text-transform:uppercase; letter-spacing:.08em}
.ph.big{font-size:15px}
.card-body{padding:12px 14px 14px; display:flex; flex-direction:column; gap:4px; flex:1}
.card-name{font-weight:600; font-size:15px; line-height:1.3; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
.card-shop{font-size:13px; color:var(--muted)}
.card-price{font-weight:700; font-size:17px; margin-top:auto}
.card-price .unit{font-size:13px; font-weight:400; color:var(--muted)}
.card-row{display:flex; align-items:center; justify-content:space-between; margin-top:auto}
.add{width:36px;height:36px;border-radius:10px;border:0;background:var(--brand);color:#fff;font-size:20px;line-height:1;cursor:pointer}
.add:hover{background:var(--brand-2)}
.empty{background:#fff;border:1px dashed var(--line);border-radius:var(--r);padding:34px;text-align:center;color:var(--muted)}

/* ---------- магазины ---------- */
.shop-strip{display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:12px}
.shop-chip{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:14px;display:flex;flex-direction:column;gap:2px;color:var(--ink)}
.shop-chip:hover{border-color:var(--brand);text-decoration:none}

/* ---------- витрина магазина ---------- */
.shop-head{display:flex; gap:18px; align-items:center; background:#fff; border:1px solid var(--line);
  border-radius:var(--r); padding:24px; margin-top:18px}
.shop-logo{width:72px;height:72px;border-radius:18px;background:var(--brand-soft);color:var(--brand);
  display:grid;place-items:center;font-size:30px;font-weight:800;flex:none}
.shop-meta h1{margin:0 0 4px}
.shop-facts{display:flex; gap:16px; flex-wrap:wrap; font-size:14px; color:var(--ink-2)}
.shop-desc{max-width:820px; color:var(--ink-2)}
.filters{display:flex; gap:8px; flex-wrap:wrap; margin:18px 0}
.chip{background:#fff;border:1px solid var(--line);border-radius:999px;padding:7px 14px;font-size:14px;color:var(--ink-2);cursor:pointer;text-decoration:none !important}
.chip.on{background:var(--brand);border-color:var(--brand);color:#fff}

/* ---------- товар ---------- */
.crumbs{display:flex; gap:8px; font-size:14px; color:var(--muted); margin-top:18px; flex-wrap:wrap}
.product{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:32px; margin:20px 0 8px;
  background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:24px}
.product-media{aspect-ratio:1/1; background:#f1efe9; border-radius:12px; display:grid; place-items:center; overflow:hidden}
.product-media img{width:100%;height:100%;object-fit:cover}
.product-info h1{margin-top:0; font-size:28px}
.price-big{font-size:34px; font-weight:800; letter-spacing:-.02em}
.price-big .unit{font-size:15px; font-weight:400; color:var(--muted)}
.stock{color:var(--ink-2); margin:6px 0 18px}
.btn-buy{width:100%; padding:15px; font-size:16px}
.seller-box{margin-top:22px; padding:16px; border:1px solid var(--line); border-radius:12px; background:var(--paper)}
.seller-name{font-weight:700; font-size:16px; display:inline-block; margin-bottom:4px}
.product-desc{max-width:820px}
.related{margin-top:30px}

/* ---------- формы ---------- */
.form{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:24px;display:flex;flex-direction:column;gap:14px;max-width:560px}
.form-wide{max-width:760px}
.form h2{margin:8px 0 0; font-size:17px; color:var(--brand)}
.form label{display:flex; flex-direction:column; gap:6px; font-size:14px; font-weight:600; color:var(--ink-2)}
.form input,.form select,.form textarea{font:inherit; padding:11px 12px; border:1px solid var(--line);
  border-radius:10px; background:#fff; color:var(--ink); outline:none; width:100%}
.form input:focus,.form select:focus,.form textarea:focus{border-color:var(--brand); box-shadow:0 0 0 3px var(--brand-soft)}
.form textarea{resize:vertical}
.two{display:grid; grid-template-columns:1fr 1fr; gap:14px}
.form-actions{display:flex; gap:12px; justify-content:flex-end; margin-top:8px}
.check-line{flex-direction:row !important; align-items:center; gap:8px; font-weight:400}
.check-line input{width:auto}
.seo-fields{border:1px solid var(--line); border-radius:12px; padding:14px; display:flex; flex-direction:column; gap:12px}
.seo-fields legend{font-size:13px; font-weight:700; color:var(--muted); padding:0 6px}
.slug-line{display:flex; align-items:center; gap:6px}
.slug-line span{font-weight:400}
.thumb{width:90px; height:90px; object-fit:cover; border-radius:10px; margin-top:8px}
.alert{padding:12px 16px; border-radius:12px; margin:14px 0; font-size:14px}
.alert.ok{background:var(--brand-soft); color:var(--brand)}
.alert.err{background:#fdeceb; color:var(--danger)}

/* ---------- кабинет ---------- */
.cab{display:grid; grid-template-columns:220px minmax(0,1fr); gap:28px; margin:24px 0 60px; align-items:start}
.cab-nav{display:flex; flex-direction:column; gap:2px; background:#fff; border:1px solid var(--line);
  border-radius:var(--r); padding:12px; position:sticky; top:86px}
.cab-nav a{padding:9px 12px; border-radius:9px; color:var(--ink-2); font-size:14px}
.cab-nav a:hover{background:var(--paper); text-decoration:none}
.cab-shop{display:flex; flex-direction:column; padding:6px 12px 12px; border-bottom:1px solid var(--line); margin-bottom:8px}
.cab-nav .out{margin-top:8px; color:var(--danger)}
.cab-main h1{margin-top:0}
.stats{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:12px; margin-bottom:8px}
.stat{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:16px;display:flex;flex-direction:column;gap:2px}
.stat.hot{border-color:var(--accent); background:#fffaf0}
.stat-n{font-size:26px; font-weight:800; letter-spacing:-.02em}
.stat-l{font-size:13px; color:var(--muted)}
.panel{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:20px;margin-top:16px}
.panel.accent{border-color:var(--brand); background:var(--brand-soft)}
.check{list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:8px; font-size:14px}
.check li{padding-left:24px; position:relative}
.check li.good::before{content:"✓"; position:absolute; left:0; color:var(--brand); font-weight:800}
.check li.bad::before{content:"!"; position:absolute; left:0; color:var(--accent); font-weight:800}
.tbl{width:100%; border-collapse:collapse; font-size:14px; background:#fff}
.tbl th{text-align:left; font-size:12px; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); padding:8px 10px; border-bottom:1px solid var(--line)}
.tbl td{padding:10px; border-bottom:1px solid var(--line); vertical-align:top}
.tbl.wide{background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.actions{display:flex; gap:10px; align-items:center; white-space:nowrap}
.actions form{display:inline}
.badge{display:inline-block; font-size:12px; padding:3px 9px; border-radius:999px; background:var(--paper); color:var(--ink-2)}
.badge.new{background:#fff2d9; color:#8a5b00}
.badge.work{background:#e4efff; color:#1b4f9c}
.badge.done{background:var(--brand-soft); color:var(--brand)}
.badge.cancel{background:#f3f1ec; color:var(--muted)}
.order{background:#fff;border:1px solid var(--line);border-radius:var(--r);margin-bottom:14px;overflow:hidden}
.order-head{display:flex;justify-content:space-between;align-items:center;padding:14px 18px;border-bottom:1px solid var(--line)}
.order-body{display:grid;grid-template-columns:260px minmax(0,1fr);gap:18px;padding:16px 18px}
.order-buyer a{font-weight:600}
.order-actions{display:flex;gap:8px;margin-top:8px}
.order-actions .btn-sm{padding:6px 12px;font-size:13px}
.order-item{display:flex;justify-content:space-between;gap:12px;padding:5px 0;border-bottom:1px dashed var(--line);font-size:14px}
.order-total{margin-top:10px;text-align:right}
.order-foot{padding:10px 18px;background:var(--paper);border-top:1px solid var(--line)}
.inline{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:0}
.pay input{padding:6px 8px;border:1px solid var(--line);border-radius:8px;font:inherit;font-size:13px}

/* ---------- темы витрины ---------- */
.themes{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.theme-card{background:#fff;border:1px solid var(--line);border-radius:12px;padding:10px;display:flex;flex-direction:column;gap:8px;cursor:pointer;font-size:13px}
.theme-card.on{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-soft)}
.theme-card input{position:absolute;opacity:0;pointer-events:none}
.theme-preview{height:64px;border-radius:8px;border:1px solid var(--line);display:block}
.theme-preview.light{background:linear-gradient(#fff 40%,#f3efe6)}
.theme-preview.dark{background:linear-gradient(#16181d 40%,#2a2e36)}
.theme-preview.dense{background:linear-gradient(#fff 30%,#e6e3da 30%,#e6e3da 60%,#fff 60%)}

body.theme-dark{--paper:#15171c; --card:#1d2026; --ink:#eef0f4; --ink-2:#b9bec8; --line:#2c3039; --brand-soft:#1e3a33; --muted:#8b93a1}
body.theme-dark .topbar,body.theme-dark .cats-strip{background:#1a1d23; border-color:var(--line)}
body.theme-dark .search{background:#23262d;border-color:var(--line)}
body.theme-dark .search input{color:var(--ink)}
body.theme-dark .card-img,body.theme-dark .product-media{background:#262a32}
body.theme-dark .tbl{background:var(--card)}
body.theme-dark .chip{background:#23262d}
body.theme-dark .seller-box,body.theme-dark .order-foot{background:#191c22}
body.theme-dense .grid{grid-template-columns:repeat(auto-fill,minmax(168px,1fr)); gap:10px}
body.theme-dense .card-body{padding:9px 10px 11px}
body.theme-dense .card-name{font-size:13.5px}
body.theme-dense .card-price{font-size:15px}
body.theme-dense .card-img{aspect-ratio:1/1}

/* ---------- корзина ---------- */
.cart-bar{position:fixed;left:0;right:0;bottom:0;background:var(--brand);color:#fff;z-index:40;box-shadow:0 -6px 20px rgba(0,0,0,.12)}
.cart-bar-in{display:flex;align-items:center;justify-content:space-between;padding:12px 20px;gap:16px}
.cart-bar .btn{background:#fff;color:var(--brand)}
.cart-bar .btn:hover{background:#eef6f3}
.dialog{border:0;border-radius:18px;padding:0;max-width:520px;width:calc(100% - 32px);box-shadow:0 20px 60px rgba(0,0,0,.25)}
.dialog::backdrop{background:rgba(15,18,22,.45)}
.dialog form{padding:22px;display:flex;flex-direction:column;gap:12px}
.dialog label{display:flex;flex-direction:column;gap:6px;font-size:14px;font-weight:600;color:var(--ink-2)}
.dialog input,.dialog textarea{font:inherit;padding:11px 12px;border:1px solid var(--line);border-radius:10px;width:100%}
.cart-items{display:flex;flex-direction:column;gap:6px;max-height:220px;overflow:auto}
.cart-item{display:flex;justify-content:space-between;gap:10px;font-size:14px;padding:6px 0;border-bottom:1px dashed var(--line)}
.dialog-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:4px}

/* ---------- прочее ---------- */
.seo-text{max-width:820px; color:var(--ink-2); margin-top:40px}
.auth{max-width:460px; margin:40px auto}
.auth h1{font-size:26px}
.notfound{max-width:520px; margin:60px auto; text-align:center}
.foot{margin-top:60px; border-top:1px solid var(--line); background:#fff; padding:28px 0 40px; font-size:14px; color:var(--ink-2)}
.foot-in{display:flex; flex-direction:column; gap:14px}
.foot-links{display:flex; gap:16px; flex-wrap:wrap}
.foot-links a{color:var(--ink-2)}

@media (max-width:900px){
  .cab{grid-template-columns:1fr}
  .cab-nav{position:static; flex-direction:row; overflow-x:auto}
  .cab-shop{display:none}
  .product{grid-template-columns:1fr}
  .order-body{grid-template-columns:1fr}
  .hero h1{font-size:30px}
  .topbar-in{flex-wrap:wrap; height:auto; padding:10px 0; gap:10px}
  .search{order:3; width:100%; max-width:none; flex-basis:100%}
  .themes{grid-template-columns:1fr 1fr}
}

/* ---------- фиксы оформления ---------- */
.card-name{color:inherit}
a.card-name:hover{color:var(--brand); text-decoration:none}
.filters a.chip{color:var(--ink-2)}
.filters a.chip.on{color:#fff}
.ph-img{width:64px; height:64px; opacity:.45}
.ph-img.big{width:96px; height:96px}
body.theme-dark .shop-head,
body.theme-dark .shop-chip,
body.theme-dark .card,
body.theme-dark .empty{background:var(--card); border-color:var(--line)}
body.theme-dark .shop-desc,
body.theme-dark .shop-facts{color:var(--ink-2)}
body.theme-dark .product{background:var(--card); border-color:var(--line)}
body.theme-dark .crumbs a{color:var(--brand-2)}
.card-img img.ph-img, .product-media img.ph-img{width:64px; height:64px; object-fit:contain; opacity:.45}
.product-media img.ph-img.big{width:96px; height:96px}
.badge{white-space:nowrap}
.tbl td:nth-child(3),.tbl th:nth-child(3){white-space:nowrap}

/* ---------- подписка ---------- */
.sub-head{display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;align-items:center}
.sub-plan{font-size:22px;font-weight:800}
.sub-status{text-align:right}
.sub-status.good b{color:var(--brand);font-size:26px}
.sub-status.bad b{color:var(--danger);font-size:20px}
.plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:16px}
.plan-card{border:1px solid var(--line);border-radius:12px;padding:14px;display:flex;flex-direction:column;gap:4px;cursor:pointer;position:relative}
.plan-card.on{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-soft)}
.plan-card input{position:absolute;opacity:0;pointer-events:none}
.plan-name{font-weight:700}
.plan-price{font-size:22px;font-weight:800}
.plan-period{grid-column:1/-1;display:flex;gap:12px;align-items:flex-end;justify-content:flex-end;flex-wrap:wrap}
.plan-period label{display:flex;flex-direction:column;gap:6px;font-size:14px;font-weight:600;color:var(--ink-2)}
.plan-period select{padding:10px 12px;border:1px solid var(--line);border-radius:10px;font:inherit;background:#fff}

/* ---------- документы ---------- */
.doc{max-width:840px}
.doc h2{margin-top:30px}
.doc p,.doc li{color:var(--ink-2)}
.doc ul{padding-left:20px; margin:8px 0}
.doc-links{padding-left:18px}
.tbl.req{background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.tbl.req th{width:190px;text-align:left;text-transform:none;letter-spacing:0;font-size:14px;color:var(--muted);font-weight:600}
.three{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px}
@media (max-width:700px){.three{grid-template-columns:1fr}}
.panel .form{max-width:none}