:root{
  --bg:#FBFAF9; --white:#fff; --soft:#F3F1EE;
  --ink:#141110; --ink2:#3A3330; --mut:#5F5852; --faint:#8A827B;
  --line:#E7E2DC; --line2:#D6CFC7;
  --acc:#F04E23; --acc-dk:#C93B14; --acc-soft:#FFF0EA; --acc-line:#FFD9CB;
  --ok:#16A34A;
  --danger:#DC2626; --danger-dk:#B91C1C; --danger-soft:#FEF2F2; --danger-line:#FECACA;
  --top-bg:rgba(251,250,249,.93);
  --overlay:rgba(255,255,255,.94);
  --on-acc:#fff;
  --f:'Manrope',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --sh:0 1px 2px rgba(20,17,16,.04), 0 14px 30px -18px rgba(20,17,16,.22);
  --sh-lg:0 30px 70px -35px rgba(20,17,16,.4);
}
*{box-sizing:border-box}
/* Атрибут hidden обязан скрывать элемент, даже если ниже задан display.
   Без этого правила .editor{display:flex} перекрывает браузерное скрытие
   и редактор разворачивается поверх всей страницы. */
[hidden]{display:none !important}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--f);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
/* Полям обязательно задавать и фон, и цвет текста: без этого браузер рисует
   свой светлый фон, и в тёмной теме поля остаются белыми пятнами. */
button,input,textarea,select{font-family:inherit;font-size:inherit;color:var(--ink)}
input,textarea,select{background:var(--white)}
input::placeholder,textarea::placeholder{color:var(--faint)}
/* Автозаполнение браузера тоже красит фон по-своему - перебиваем тенью */
input:-webkit-autofill,input:-webkit-autofill:focus{
  -webkit-text-fill-color:var(--ink);
  box-shadow:0 0 0 1000px var(--white) inset;
}
a{color:inherit;text-decoration:none}
.wrap{max-width:1180px;margin:0 auto;padding:0 22px}
h1{font-size:clamp(24px,3.2vw,32px);font-weight:800;letter-spacing:-.03em;margin:0 0 8px;line-height:1.12}
h2{font-size:19px;font-weight:800;letter-spacing:-.02em;margin:0 0 8px}
.sub{color:var(--mut);margin:0 0 24px;font-size:16.5px}
.hint{color:var(--faint);font-size:14.5px;margin:10px 0 0}

/* ---------------- шапка ---------------- */
.top{border-bottom:1px solid var(--line);background:var(--top-bg);backdrop-filter:blur(10px);position:sticky;top:0;z-index:40}
.top-in{display:flex;align-items:center;gap:26px;height:70px}
.logo{display:flex;align-items:center;gap:10px;font-size:20px;font-weight:800;letter-spacing:-.03em;flex:none}
.lmk{display:flex;gap:3px;align-items:flex-end}
.lmk i{display:block;width:6px;border-radius:2px;background:var(--acc)}
.lmk i:nth-child(1){height:13px;opacity:.4}
.lmk i:nth-child(2){height:20px;opacity:.7}
.lmk i:nth-child(3){height:26px}
.top-nav{display:flex;gap:22px;flex:1}
.top-nav a{font-size:16px;font-weight:600;color:var(--mut);padding:6px 0;border-bottom:2px solid transparent}
.top-nav a:hover{color:var(--ink)}
.top-nav a.on{color:var(--ink);border-bottom-color:var(--acc)}
.top-right{display:flex;align-items:center;gap:14px;flex:none}
.balance{font-weight:700;font-size:15.5px;color:var(--acc);background:var(--acc-soft);border:1px solid var(--acc-line);border-radius:999px;padding:7px 15px;white-space:nowrap}
@media(max-width:760px){.top-nav{display:none}.top-in{gap:14px}}

/* ---------------- кнопки ---------------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;border:none;border-radius:12px;padding:14px 24px;font-weight:700;cursor:pointer;transition:background .15s,transform .15s,opacity .15s,border-color .15s}
.btn-acc{background:var(--acc);color:var(--on-acc)}
.btn-acc:hover:not(:disabled){background:var(--acc-dk);transform:translateY(-1px)}
.btn:disabled{opacity:.4;cursor:not-allowed;transform:none}
.btn-gh{background:var(--white);border:1.5px solid var(--line2)}
.btn-gh:hover:not(:disabled){border-color:var(--ink)}
.btn-sm{padding:10px 18px;font-size:15px;border-radius:10px}
.row{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px}
.row.tight{margin-top:0}

/* ---------------- панели ---------------- */
.pane{background:var(--white);border:1px solid var(--line);border-radius:18px;padding:30px;margin:26px 0;box-shadow:var(--sh)}
.pane.narrow{max-width:760px;margin-left:auto;margin-right:auto}
@media(max-width:600px){.pane{padding:20px}}
.pane-head{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:22px}
.pane-head h1{margin:0}
.crumbs{font-size:14.5px;color:var(--faint);margin-bottom:14px}
.crumbs a:hover{color:var(--acc)}
.crumbs b{color:var(--ink2);font-weight:600}
.search{border:1px solid var(--line2);border-radius:10px;padding:10px 14px;min-width:240px}
.search:focus{outline:none;box-shadow:0 0 0 2px var(--acc);border-color:transparent}

/* ---------------- список карточек ---------------- */
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:18px}
.card{border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--white);cursor:pointer;transition:transform .18s,box-shadow .18s,border-color .18s;position:relative}
.card:hover{transform:translateY(-3px);box-shadow:var(--sh);border-color:var(--line2)}
.card .ph{aspect-ratio:3/4;background:var(--soft);display:flex;align-items:center;justify-content:center;color:var(--faint);font-size:14px}
.card .ph img{width:100%;height:100%;object-fit:cover}
.card .meta{padding:13px 14px}
.card .meta b{display:block;font-size:15.5px;font-weight:700;line-height:1.3;margin-bottom:5px}
.card .meta span{font-size:13.5px;color:var(--faint)}
.card .del{position:absolute;top:9px;right:9px;width:30px;height:30px;border-radius:8px;background:var(--overlay);border:1px solid var(--line);opacity:0;transition:opacity .15s;font-size:15px;line-height:1}
.card:hover .del{opacity:1}
.card .del:hover{color:var(--danger);border-color:var(--danger-line)}
.empty{text-align:center;padding:60px 20px}
.empty h2{font-size:22px}
.empty p{color:var(--mut);max-width:44ch;margin:0 auto 22px}

/* ---------------- загрузка ---------------- */
.drop{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;border:2px dashed var(--line2);border-radius:14px;padding:44px 20px;text-align:center;cursor:pointer;transition:border-color .15s,background .15s}
.drop:hover,.drop.over{border-color:var(--acc);background:var(--acc-soft)}
.drop strong{font-size:16.5px}
.drop span{color:var(--faint);font-size:14.5px}
.thumbs{display:flex;flex-wrap:wrap;gap:12px;margin-top:18px}
.thumbs img{width:104px;height:134px;object-fit:cover;border-radius:10px;border:1px solid var(--line)}
.modes{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:24px}
@media(max-width:640px){.modes{grid-template-columns:1fr}}
.mode{text-align:left;background:var(--white);border:1.5px solid var(--line2);border-radius:14px;padding:20px;cursor:pointer;transition:border-color .15s,background .15s}
.mode:hover:not(:disabled){border-color:var(--acc);background:var(--acc-soft)}
.mode:disabled{opacity:.5;cursor:not-allowed}
.mode b{display:block;font-size:16.5px;margin-bottom:5px}
.mode span{font-size:14.5px;color:var(--mut)}

/* ---------------- поля ---------------- */
.fld{display:block;margin-bottom:18px}
.fld span{display:block;font-size:14.5px;font-weight:700;margin-bottom:6px}
.fld input,.fld textarea{width:100%;padding:12px 14px;border:1px solid var(--line2);border-radius:10px;background:var(--white);resize:vertical}
.fld input:focus,.fld textarea:focus{outline:none;border-color:transparent;box-shadow:0 0 0 2px var(--acc)}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:0 22px}
@media(max-width:700px){.grid2{grid-template-columns:1fr}}
.more{margin:8px 0 22px;border-top:1px solid var(--line);padding-top:16px}
.more summary{cursor:pointer;font-weight:700;margin-bottom:16px}
textarea.mono{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:14px;line-height:1.5}

/* переопределение товара */
.redetect{margin:0 0 22px;padding:16px 18px;background:var(--soft);border:1px solid var(--line);border-radius:12px}
.redetect summary{cursor:pointer;font-weight:700;font-size:15.5px}
.redetect .hint{margin:10px 0 12px}
.redetect-row{display:flex;gap:10px;flex-wrap:wrap}
.redetect-row input{flex:1;min-width:220px;padding:11px 13px;border:1px solid var(--line2);border-radius:10px;background:var(--white)}
.redetect-row input:focus{outline:none;border-color:transparent;box-shadow:0 0 0 2px var(--acc)}
.redetect-row .btn{flex:none}

/* уточняющие вопросы */
.questions{margin:6px 0 20px}
.q-own{margin-top:10px}
.q-own input{width:100%;padding:11px 13px;border:1px solid var(--line2);border-radius:10px;background:var(--white)}
.q-own input:focus{outline:none;border-color:transparent;box-shadow:0 0 0 2px var(--acc)}
.q{border:1px solid var(--line);border-radius:12px;padding:16px 18px;margin-bottom:12px;background:var(--soft)}
.q p{margin:0 0 10px;font-weight:600;font-size:16px}
.q-opts{display:flex;flex-wrap:wrap;gap:8px}
.q-opt{border:1px solid var(--line2);background:var(--white);border-radius:999px;padding:8px 16px;font-size:14.5px;cursor:pointer}
.q-opt:hover{border-color:var(--acc)}
.q-opt.on{background:var(--acc);border-color:var(--acc);color:#fff;font-weight:700}

/* ---------------- прогресс ---------------- */
.progress{display:flex;align-items:center;gap:14px;margin:18px 0 24px}
.progress .bar{flex:1;height:6px;background:var(--line);border-radius:99px;overflow:hidden}
.progress .bar i{display:block;height:100%;width:0;background:var(--acc);border-radius:99px;transition:width .4s}
.progress-text{font-size:14.5px;color:var(--mut);font-weight:600;white-space:nowrap}

/* ---------------- варианты стиля ---------------- */
/* ---------------- главный кадр и образцы сцен ---------------- */
.hero-pick{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:24px;align-items:start}
@media(max-width:900px){.hero-pick{grid-template-columns:1fr}}
.hero-shot{border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--soft)}
.hero-shot img{display:block;width:100%;aspect-ratio:3/4;object-fit:cover}
.hero-style{border:1px solid var(--line);border-radius:14px;padding:18px;background:var(--white)}
.hero-style .btn{width:100%;margin-top:14px}

.samples{margin-top:30px;padding-top:24px;border-top:1px solid var(--line)}
.samples h2{font-size:19px;margin:0 0 4px}
.sample-row{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
@media(max-width:700px){.sample-row{grid-template-columns:1fr}}
.sample-row figure{margin:0;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--soft)}
.sample-row img{display:block;width:100%;aspect-ratio:3/4;object-fit:cover}
.sample-row figcaption{padding:9px 12px;font-size:14.5px;color:var(--mut);background:var(--white)}

.variants{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
@media(max-width:820px){.variants{grid-template-columns:1fr}}
.variant{border:2px solid var(--line);border-radius:14px;overflow:hidden;cursor:pointer;background:var(--white);transition:border-color .15s,transform .15s;position:relative}
.variant:hover{transform:translateY(-3px)}
.variant.on{border-color:var(--acc)}
.variant .ph{aspect-ratio:3/4;background:var(--soft)}
.variant .ph img{width:100%;height:100%;object-fit:cover}
.variant .meta{padding:14px}
.variant .meta b{display:block;font-size:16px}
.variant .meta span{font-size:14px;color:var(--faint)}
.variant .pick{position:absolute;top:12px;right:12px;width:26px;height:26px;border-radius:50%;border:2px solid var(--overlay);background:rgba(20,17,16,.3)}
.variant.on .pick{background:var(--acc);border-color:var(--acc)}
.variant.on .pick::after{content:"";position:absolute;inset:0;margin:auto;width:9px;height:5px;border-left:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(-45deg) translateY(-1px)}

/* ---------------- лента кадров ---------------- */
.tabs{display:flex;gap:6px;border-bottom:1px solid var(--line);margin-bottom:22px}
.tab{background:none;border:none;padding:12px 18px;font-weight:700;color:var(--mut);cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px}
.tab.on{color:var(--acc);border-bottom-color:var(--acc)}
.tab-body{min-height:120px}
.feed{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:16px}
.slide{border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--white);cursor:pointer;transition:transform .18s,box-shadow .18s}
.slide:hover{transform:translateY(-3px);box-shadow:var(--sh)}
.slide .ph{aspect-ratio:3/4;background:var(--soft);position:relative}
.slide .ph img{width:100%;height:100%;object-fit:cover}
.slide .ph .spin{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:var(--faint);font-size:14px}
.slide .cap{padding:11px 13px;font-size:14px;display:flex;justify-content:space-between;gap:8px;align-items:center}
.slide .cap b{font-weight:700}
.slide .cap span{color:var(--faint);font-size:13px}

/* ---------------- настройки ---------------- */
.setting{padding:22px 0;border-top:1px solid var(--line)}
.setting:first-of-type{border-top:none;padding-top:0}
.ratios{display:flex;gap:10px;flex-wrap:wrap}
.ratio{display:flex;flex-direction:column;align-items:center;gap:8px;border:1.5px solid var(--line2);background:var(--white);border-radius:12px;padding:14px 20px;cursor:pointer;font-size:14px;font-weight:600}
.ratio i{display:block;border:2px solid var(--faint);border-radius:3px}
.ratio.on{border-color:var(--acc);background:var(--acc-soft)}
.ratio.on i{border-color:var(--acc)}

/* ---------------- редактор ---------------- */
/* Фон нейтрально-серый, не коричневый: тёплый оттенок искажал восприятие цвета
   товара на кадре - именно за этим сюда и приходят. */
.editor{position:fixed;inset:0;z-index:60;background:var(--bg);color:var(--ink);display:flex;flex-direction:column}
.ed-top{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 20px;border-bottom:1px solid var(--line)}
.ed-back,.ed-close{background:none;border:none;color:var(--ink2);cursor:pointer;font-weight:600;font-size:15px}
.ed-back:hover,.ed-close:hover{color:#fff}
.ed-title{font-weight:700}
.ed-body{flex:1;display:grid;grid-template-columns:120px 1fr 340px;min-height:0}
@media(max-width:1000px){.ed-body{grid-template-columns:90px 1fr 300px}}
@media(max-width:760px){.ed-body{grid-template-columns:1fr;grid-template-rows:auto 1fr auto;overflow:auto}}
.ed-strip{border-right:1px solid var(--line);overflow-y:auto;padding:12px;display:flex;flex-direction:column;gap:10px}
@media(max-width:760px){.ed-strip{flex-direction:row;border-right:none;border-bottom:1px solid var(--line);overflow-x:auto}}
.ed-strip img{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:8px;border:2px solid transparent;cursor:pointer;flex:none}
@media(max-width:760px){.ed-strip img{width:72px}}
.ed-strip img.on{border-color:var(--acc)}
/* Центральная колонка прокручивается: блок проверки и подписи не влезали в экран
   и обрезались снизу. */
.ed-stage{display:flex;flex-direction:column;align-items:center;gap:14px;padding:20px;
  min-height:0;overflow-y:auto;background:#EDEBE8}
.ed-stage img{max-height:58vh;border-radius:10px;box-shadow:var(--sh-lg)}
.ed-actions{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.ed-actions .btn-gh{background:var(--white);border-color:var(--line2);color:var(--ink)}
.ed-actions .btn-gh:hover{border-color:var(--acc);color:var(--acc)}
/* полоса режима отладки */
.debug-bar{position:sticky;top:0;z-index:50;background:#332411;border-bottom:1px solid #5C4118;
  color:#F0C078;font-size:14px;font-weight:600;text-align:center;padding:9px 16px}

/* индикатор живого обновления кадра */
.live{margin:2px 0 6px;padding:10px 13px;border-radius:10px;font-size:14px;font-weight:600;
  background:var(--soft);border:1px solid var(--line);color:var(--mut)}
.live-saving{background:var(--acc-soft);border-color:var(--acc-line);color:var(--acc-dk)}
.live-saved{background:#F0FAF3;border-color:#BFE6CD;color:#15803D}
.live-error{background:var(--danger-soft);border-color:var(--danger-line);color:var(--danger-dk)}

/* светлая полоса под текст: место под заголовок отводим сами */
.band{margin:14px 0 4px;padding:14px;border:1px solid var(--line);border-radius:12px;
  background:var(--soft)}
.band-title{display:block;font-size:14.5px;font-weight:700;margin-bottom:9px}
.band-row{display:flex;gap:8px;flex-wrap:wrap}
.chip{padding:8px 15px;border:1px solid var(--line2);border-radius:999px;background:var(--white);
  font:inherit;font-size:14px;font-weight:600;color:var(--mut);cursor:pointer}
.chip:hover{border-color:var(--acc-line)}
.chip.is-on{background:var(--acc);border-color:var(--acc);color:#fff}
/* «Свой цвет»: сама кнопка и есть палитра */
.chip-color{display:inline-flex;align-items:center;gap:8px;cursor:pointer}
.chip-color input{width:24px;height:24px;padding:0;border:none;background:none;cursor:pointer}
.band-size{display:flex;align-items:center;gap:12px;margin-top:11px;font-size:14px;
  font-weight:600;color:var(--mut)}
.band-size span{flex:0 0 140px}
.band-size input{flex:1;accent-color:var(--acc)}

/* оценка кадра */
.ed-rate{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-bottom:10px}
.rate{background:var(--white);border:1px solid var(--line2);color:var(--ink2);border-radius:999px;
  padding:9px 18px;font-size:14px;font-weight:600;cursor:pointer;transition:.15s}
.rate:hover{border-color:var(--acc);color:#fff}
.rate.on{background:var(--acc);border-color:var(--acc);color:#fff}

/* шаблоны оформления */
.tpl-save{display:flex;gap:10px;flex-wrap:wrap}
.tpl-save input{flex:1;min-width:220px;padding:12px 14px;border:1px solid var(--line2);
  border-radius:10px;background:var(--white)}
.tpl-save input:focus{outline:none;border-color:transparent;box-shadow:0 0 0 2px var(--acc)}
.tpl-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:16px;margin-top:14px}
.tpl{border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--white);box-shadow:var(--sh)}
.tpl .ph{aspect-ratio:3/4;background:var(--soft)}
.tpl .ph img{width:100%;height:100%;object-fit:cover}
.tpl .meta{padding:12px 13px 6px}
.tpl .meta b{display:block;font-size:15.5px;font-weight:700;margin-bottom:4px}
.tpl .meta span{font-size:13px;color:var(--faint)}
.tpl .acts{display:flex;gap:8px;padding:0 13px 13px}
.tpl .acts .btn{flex:1;padding:9px 10px;font-size:14px}

/* панель стиля кадра */
.style-group{margin-bottom:18px}
.style-label{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.style-label span{font-size:14.5px;font-weight:700;color:var(--ink2)}
.style-paid{font-style:normal;font-size:11.5px;font-weight:700;color:#F0C078;
  background:#332411;border:1px solid #5C4118;border-radius:999px;padding:2px 9px}
.style-opts{display:flex;flex-wrap:wrap;gap:7px}
.style-opt{background:var(--white);border:1px solid var(--line2);color:var(--ink);border-radius:999px;
  padding:8px 15px;font-size:14px;cursor:pointer;transition:.15s}
.style-opt:hover{border-color:var(--acc)}
.style-opt.on{background:var(--acc);border-color:var(--acc);color:#fff;font-weight:700}
.style-cost{margin:4px 0 14px;padding:11px 14px;border-radius:10px;font-size:13.5px;
  background:#332411;border:1px solid #5C4118;color:#F0C078}
#edStyleApply,#edStyleAll{width:100%;margin-bottom:10px}

/* редактор компоновки: перетаскивание блоков поверх кадра */
.ed-canvas{position:relative;display:inline-block;max-height:70vh}
.ed-canvas img{max-height:70vh;border-radius:10px;box-shadow:var(--sh-lg)}
.lay{position:absolute;inset:0;pointer-events:none}
/* Рамка прозрачная и обводит НАСТОЯЩУЮ надпись на кадре.
   Раньше внутри рамки дублировался тот же текст, и поверх нарисованного получалась
   вторая копия со сдвигом - выглядело как тень или буква в глубине. */
.lay-box{position:absolute;pointer-events:auto;cursor:grab;user-select:none;touch-action:none;
  background:transparent;border:1.5px dashed var(--acc);border-radius:6px}
.lay-box span{position:absolute;left:0;top:-22px;white-space:nowrap;
  background:var(--acc);color:#fff;font-size:11.5px;font-weight:700;
  padding:2px 8px;border-radius:5px}
.lay-box:active,.lay-box.dragging{cursor:grabbing;border-style:solid;
  box-shadow:0 0 0 3px rgba(240,78,35,.35)}
.lay-box.too-small{border-color:#F0C078;background:rgba(240,192,120,.18)}
/* Блок, которого на кадре нет: текст пустой, обводить нечего. Рамку оставляем -
   иначе некуда встать, когда человек соберётся его заполнить. */
.lay-box.is-empty{border-style:dotted;opacity:.55}
.lay-box.is-empty span::after{content:' — пусто'}
/* Уголок тянет в обе стороны: вниз - кегль, вбок - ширина переноса строк. */
.lay-box .grip{position:absolute;right:-10px;bottom:-10px;width:20px;height:20px;border-radius:5px;
  background:var(--acc);border:2px solid #fff;cursor:nwse-resize;display:block;
  box-shadow:0 1px 4px rgba(0,0,0,.35)}
.lay-badge{border-radius:999px}
.lay-tools{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:12px}
.lay-hint{color:var(--mut);font-size:14px}
/* Кнопки внутри редактора обязаны брать тёмное оформление. Без этого правила
   «Вернуть как было» получала светлый стиль основной страницы и терялась на фоне. */
.lay-tools .btn-gh,.ed-panel .btn-gh{background:var(--white);border-color:var(--line2);color:var(--ink)}
.lay-tools .btn-gh:hover,.ed-panel .btn-gh:hover{border-color:var(--acc);color:var(--acc)}
.lay-warn{max-width:520px;margin-top:10px;padding:11px 14px;border-radius:10px;font-size:14px;
  background:#332411;border:1px solid #5C4118;color:#F0C078}

/* результат автопроверки товара */
.check{max-width:520px;border-radius:12px;padding:14px 16px;font-size:14.5px;line-height:1.5}
.check b{display:block;font-weight:700;margin-bottom:4px}
.check ul{margin:8px 0 0;padding-left:20px}
.check li{margin-bottom:4px}
.check-ok{background:#12301E;border:1px solid #1E5235;color:#8EE0AE}
.check-warn{background:#332411;border:1px solid #5C4118;color:#F0C078}
.check-fail{background:#331616;border:1px solid #5C2222;color:#F09A9A}
.check-unknown{background:var(--white);border:1px solid var(--line2);color:var(--mut)}

.ed-panel{border-left:1px solid var(--line);overflow-y:auto;padding:18px}
.ed-tabs{display:flex;gap:6px;margin-bottom:18px;border-bottom:1px solid var(--line)}
.ed-tab{background:none;border:none;color:var(--mut);padding:10px 14px;font-weight:700;cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px}
.ed-tab.on{color:var(--acc);border-bottom-color:var(--acc)}
.ed-panel .fld span{color:var(--ink2)}
.ed-panel .fld input,.ed-panel .fld textarea{background:var(--white);border-color:var(--line2);color:var(--ink)}
.ed-panel .hint{color:#8A827B}

/* ---------------- прочее ---------------- */
.err{margin-top:14px;padding:12px 15px;background:var(--danger-soft);border:1px solid var(--danger-line);border-radius:10px;color:var(--danger-dk);font-size:15px}
.toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%);background:var(--ink);color:#fff;padding:13px 22px;border-radius:12px;font-weight:600;z-index:80;box-shadow:var(--sh-lg);max-width:90vw}

/* ---------- кадры на балансе и цена на кнопках ---------- */
/* Человек расплачивается кадрами, поэтому видит их, а не наши кредиты
   у поставщика. Цена стоит прямо на кнопке - у обоих конкурентов сделано
   так, и это снимает страх случайной траты. */
/* Кадров меньше, чем нужно на ленту: гасим, чтобы состояние читалось
   с одного взгляда, а не выглядело как обычный акцент. */
.balance.low { color: var(--mut); background: transparent; border-color: var(--line); }

.cost {
  font-weight: 500;
  opacity: .62;
  font-size: .92em;
  white-space: nowrap;
}

button.not-enough .cost { opacity: 1; text-decoration: line-through; }
button.not-enough { position: relative; }

/* ---------- кошелёк: баланс, прайс, пакеты, история ---------- */
.wal-now { display:flex; align-items:baseline; gap:14px; flex-wrap:wrap; margin-bottom:18px; }
.wal-now b { font-size:30px; font-weight:800; letter-spacing:-.03em; color:var(--acc); }
.wal-now i { font-style:normal; font-size:14px; color:var(--mut); }

.wal-prices { list-style:none; margin:0 0 26px; padding:0; }
.wal-prices li { display:flex; justify-content:space-between; gap:16px;
  padding:9px 0; border-bottom:1px solid var(--line); font-size:15px; }
.wal-prices b { font-weight:600; white-space:nowrap; }

.wal-h { font-size:17px; font-weight:700; margin:0 0 12px; }

.wal-packs { display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
  gap:12px; margin-bottom:12px; }
.wal-pack { position:relative; display:flex; flex-direction:column; gap:3px;
  text-align:left; padding:16px 16px 14px; border:1px solid var(--line);
  border-radius:14px; background:var(--white); cursor:pointer;
  transition:border-color .15s, transform .15s; }
.wal-pack:hover { border-color:var(--acc); transform:translateY(-2px); }
.wal-pack.best { border:2px solid var(--acc); }
.wal-tag { position:absolute; top:-10px; left:14px; background:var(--acc); color:#fff;
  font-size:11px; font-weight:700; padding:3px 9px; border-radius:7px; }
.wal-title { font-size:13px; color:var(--faint); font-weight:600; }
.wal-frames { font-size:15px; font-weight:600; }
.wal-price { font-size:22px; font-weight:800; letter-spacing:-.02em; color:var(--acc); }
.wal-per { font-size:12.5px; color:var(--mut); }
.wal-note { font-size:13.5px; color:var(--mut); margin:0 0 26px; }

.wal-ledger { list-style:none; margin:0; padding:0; font-size:14px; }
.wal-ledger li { display:grid; grid-template-columns:120px 1fr auto; gap:12px;
  padding:8px 0; border-bottom:1px solid var(--line); align-items:baseline; }
.wal-ledger span:first-child { color:var(--faint); font-size:12.5px; }
.wal-ledger b { font-weight:700; }
.wal-ledger b.minus { color:var(--mut); }
.wal-empty { color:var(--mut); border:0 !important; }

/* Код поддержки: моноширинный и разрежённый, чтобы диктовать по телефону
   без ошибок - буквы не сливаются. */
.wal-code { font-family:ui-monospace,Menlo,Consolas,monospace; letter-spacing:.12em;
            font-weight:700; color:var(--ink); background:var(--soft);
            border:1px solid var(--line); border-radius:7px; padding:2px 8px; }

/* ---------------- вход по телефону ---------------- */
.who { font-size:14.5px; color:var(--mut); font-weight:600; white-space:nowrap; }
.modal { position:fixed; inset:0; background:rgba(20,17,16,.5); z-index:90;
         display:flex; align-items:center; justify-content:center; padding:20px; }
.modal-in { background:var(--white); border-radius:18px; padding:30px;
            width:100%; max-width:400px; position:relative; box-shadow:var(--sh-lg); }
.modal-x { position:absolute; top:14px; right:16px; border:none; background:none;
           font-size:24px; line-height:1; color:var(--faint); cursor:pointer; }
.modal-x:hover { color:var(--ink); }
.fld { width:100%; padding:13px 15px; border:1.5px solid var(--line2);
       border-radius:12px; }
.fld:focus { outline:none; border-color:var(--acc); }
.adm-err { color:var(--danger); font-size:14.5px; margin:12px 0 0; }

/* ---------------- тёмная тема ----------------
   Работать в интерфейсе приходится часами, и светлый фон к вечеру бьёт
   по глазам. Тема переключается на <html data-theme="dark"> и по системной
   настройке, если человек ничего не выбирал.

   Фон не чёрный, а тёплый тёмно-серый, текст не белый, а приглушённый:
   максимальный контраст утомляет не меньше яркого фона. */
:root[data-theme="dark"] {
  --bg:#141210; --white:#1D1A17; --soft:#262220;
  --ink:#E9E3DB; --ink2:#D2CAC1; --mut:#A79E94; --faint:#7E766C;
  --line:#2E2925; --line2:#3C3630;
  --acc:#FF6A3D; --acc-dk:#F04E23; --acc-soft:#2B1B13; --acc-line:#4A2C1D;
  --ok:#4ADE80;
  --danger:#F87171; --danger-dk:#EF4444; --danger-soft:#2A1717; --danger-line:#4A2222;
  --top-bg:rgba(20,18,16,.93);
  --overlay:rgba(29,26,23,.94);
  --on-acc:#1A130F;
  --sh:0 1px 2px rgba(0,0,0,.3), 0 14px 30px -18px rgba(0,0,0,.6);
  --sh-lg:0 30px 70px -35px rgba(0,0,0,.75);
}

/* Пока человек не выбирал тему сам - идём за системной настройкой */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:#141210; --white:#1D1A17; --soft:#262220;
    --ink:#E9E3DB; --ink2:#D2CAC1; --mut:#A79E94; --faint:#7E766C;
    --line:#2E2925; --line2:#3C3630;
    --acc:#FF6A3D; --acc-dk:#F04E23; --acc-soft:#2B1B13; --acc-line:#4A2C1D;
    --ok:#4ADE80;
    --danger:#F87171; --danger-dk:#EF4444; --danger-soft:#2A1717; --danger-line:#4A2222;
    --top-bg:rgba(20,18,16,.93);
    --overlay:rgba(29,26,23,.94);
    --on-acc:#1A130F;
    --sh:0 1px 2px rgba(0,0,0,.3), 0 14px 30px -18px rgba(0,0,0,.6);
    --sh-lg:0 30px 70px -35px rgba(0,0,0,.75);
  }
}

/* Переключатель в шапке */
.theme-btn { background:none; border:1.5px solid var(--line2); border-radius:10px;
             width:36px; height:36px; cursor:pointer; font-size:16px; line-height:1;
             color:var(--mut); flex:none; }
.theme-btn:hover { border-color:var(--ink); color:var(--ink); }