:root{
  /* тёмная тема: фон — сталь */
  --graphite:#24252a; --panel:rgba(30,31,36,.9); --panel2:#373840; --steel:#c9cdd3; --gold:#cfa967;
  --text:#f0f1f3; --muted:#b0b3ba; --line:rgba(255,255,255,.12); --danger:#e08a7a;
  --field:rgba(24,25,29,.75); --bar:rgba(14,15,18,.96); --veil:rgba(12,13,15,.74); --bgimg:url(/app/bg_steel.jpg);
}
:root[data-theme="light"]{
  /* светлая тема: фон — золото, текст графит, плашки светлые */
  --graphite:#f7f5f0; --panel:rgba(255,255,255,.84); --panel2:#ffffff; --steel:#2e2f35; --gold:#9b7740;
  --text:#24252a; --muted:#585b63; --line:rgba(36,37,42,.14); --danger:#b4452f;
  --field:rgba(255,255,255,.92); --bar:rgba(250,248,243,.95); --veil:rgba(255,251,242,.45); --bgimg:url(/app/bg_gold.jpg);
}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--graphite);position:relative;color:var(--text);font:16px/1.5 Manrope,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
     -webkit-font-smoothing:antialiased;padding-bottom:84px;min-height:100vh}
img{display:block;max-width:100%}
body::before{content:"";position:fixed;inset:0;z-index:-1;background:linear-gradient(var(--veil),var(--veil)),var(--bgimg) center/cover no-repeat}
button,input,select{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:2px solid var(--gold);outline-offset:2px;border-radius:8px}
[hidden]{display:none!important}

.bar{display:flex;align-items:center;justify-content:space-between;gap:12px;max-width:980px;margin:0 auto;padding:14px 16px}
.brand{display:flex;align-items:center;gap:8px;text-decoration:none}
.brand img{width:34px;height:34px;border-radius:9px}
.brand span{font:italic 600 24px/1 Cormorant,serif;background:linear-gradient(180deg,#f3dba8,var(--gold) 55%,#9b7740);
            -webkit-background-clip:text;background-clip:text;color:transparent}
.who{display:flex;align-items:center;gap:12px}
.balance{background:var(--panel);border:1px solid var(--line);border-radius:999px;padding:6px 14px;font-size:14px}
.link{background:none;border:0;color:var(--muted);font-size:14px;padding:4px}
.link:hover{color:var(--text)}

main{max-width:980px;margin:0 auto;padding:4px 16px 24px}
h1{font:italic 600 clamp(32px,6vw,44px)/1.1 Cormorant,serif;margin:8px 0 10px}
h2{font-size:18px;margin:26px 0 10px}
.muted{color:var(--muted)}
.small{font-size:14px}

.tabs{position:fixed;left:0;right:0;bottom:0;display:flex;justify-content:center;gap:4px;background:var(--bar);border-top:1px solid var(--line);
      padding:8px 8px calc(8px + env(safe-area-inset-bottom))}
.tabs button{flex:0 1 200px;background:none;border:0;color:var(--muted);padding:6px 6px 8px;border-radius:12px;font-weight:500;
      display:flex;flex-direction:column;align-items:center;gap:3px;font-size:13px;white-space:nowrap}
.tabs button svg,.tabs button img{width:26px;height:26px;display:block}
.tabs button img{border-radius:6px}
.tabs button[aria-current="page"]{color:var(--text);background:var(--panel)}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:14px;padding:12px 20px;font-weight:700;border:0;
     background:var(--text);color:var(--graphite);text-decoration:none}
.btn:hover{background:#fff}
.btn:disabled{opacity:.5;cursor:default}
.btn.ghost{background:transparent;color:var(--text);border:1px solid var(--line);font-weight:500}
.btn.ghost:hover{border-color:var(--steel)}
.btn.wide{width:100%}
.btn.danger{background:transparent;color:var(--danger);border:1px solid #6a3d36;font-weight:500}

.card{background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:18px}
.login{max-width:420px;margin:24px auto}
.field{display:block;margin:14px 0}
.field span{display:block;font-size:14px;color:var(--muted);margin-bottom:6px}
input[type=email],input[type=text],input[inputmode=numeric],select{width:100%;background:var(--field);border:1px solid var(--line);border-radius:12px;padding:12px 14px}
input:focus,select:focus{border-color:var(--steel);outline:none}
.err{color:var(--danger);font-size:14px;margin:8px 0 0}

/* чипы */
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{background:transparent;border:1px solid var(--line);color:var(--muted);border-radius:999px;padding:7px 14px;font-size:14px}
.chip[aria-pressed="true"]{background:var(--steel);border-color:var(--steel);color:var(--graphite)}

/* гардероб */
.cat-head{display:flex;align-items:baseline;justify-content:space-between;margin:24px 0 10px}
.cat-head h2{margin:0}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:10px}
.tile{position:relative;background:var(--panel);border:1px solid var(--line);border-radius:14px;overflow:hidden;padding:0;text-align:left}
.tile img{aspect-ratio:1;object-fit:cover;width:100%}
.tile .cap{display:block;font-size:13px;padding:6px 8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tile .dot{position:absolute;top:8px;right:8px;width:14px;height:14px;border-radius:50%;border:2px solid #fff6}
.add{display:grid;place-items:center;aspect-ratio:1;border:1.5px dashed var(--line);border-radius:14px;color:var(--muted);background:none;font-size:14px}
.add:hover{border-color:var(--steel);color:var(--text)}
.toolbar{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px}

/* редактор вещи */
.sheet{position:fixed;inset:0;background:#000a;display:grid;place-items:end center;z-index:20}
.sheet .card{width:min(560px,100%);max-height:92vh;overflow:auto;border-radius:22px 22px 0 0;padding:20px 18px calc(20px + env(safe-area-inset-bottom))}
@media (min-width:700px){.sheet{place-items:center}.sheet .card{border-radius:22px}}
.edit-photo{width:160px;border-radius:14px;margin:0 auto 6px}
.swatches{display:flex;flex-wrap:wrap;gap:8px}
.sw{width:32px;height:32px;border-radius:50%;border:2px solid #0000;box-shadow:inset 0 0 0 1px #fff3;padding:0}
.sw[aria-pressed="true"]{border-color:var(--gold)}
details.more{margin-top:12px;border-top:1px solid var(--line);padding-top:10px}
details.more summary{cursor:pointer;color:var(--muted);font-size:14px}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.row > *{flex:1}
.check{display:flex;align-items:center;gap:8px;font-size:15px;margin:10px 0}
.actions{display:flex;gap:10px;margin-top:20px}
.actions .btn{flex:1}

/* создать образ */
.pickers{display:grid;gap:10px}
.strip{display:flex;gap:10px;overflow-x:auto;padding-bottom:6px;scroll-snap-type:x proximity}
.pick{flex:0 0 auto;width:86px;background:none;border:2px solid transparent;border-radius:12px;padding:0;color:var(--muted);font-size:12px;text-align:center;scroll-snap-align:start}
.pick img{width:100%;aspect-ratio:2/3;object-fit:cover;border-radius:10px;background:var(--panel)}
.pick .studio{width:100%;aspect-ratio:2/3;border-radius:10px;background:url(/app/studio.jpg) center/cover}
.pick[aria-pressed="true"]{border-color:var(--gold);color:var(--text)}
.pick span{display:block;padding:4px 2px;line-height:1.2}

.outfits{display:grid;gap:12px}
.outfit{display:flex;align-items:center;gap:12px}
.outfit .items{display:flex;gap:6px;flex:1;min-width:0;overflow-x:auto}
.outfit .items img{width:64px;height:64px;object-fit:cover;border-radius:10px;flex:0 0 auto}
.slots{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:10px}
.slot{background:var(--panel);border:1.5px dashed var(--line);border-radius:14px;padding:0;overflow:hidden;color:var(--muted);font-size:13px}
.slot img{aspect-ratio:1;object-fit:cover;width:100%}
.slot .empty{aspect-ratio:1;display:grid;place-items:center;font-size:26px}
.slot span{display:block;padding:6px 8px;text-align:left}
.slot.filled{border-style:solid}

/* примерка */
.tryon .card{text-align:center}
.tryon img.result{max-height:70vh;width:auto;margin:0 auto;border-radius:14px}
.spinner{width:42px;height:42px;border-radius:50%;border:3px solid var(--line);border-top-color:var(--gold);margin:18px auto;animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.spinner{animation-duration:3s}}

/* мои образы */
.looks{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.looks button{padding:0;border:0;background:none;border-radius:12px;overflow:hidden}
.looks img{aspect-ratio:2/3;object-fit:cover;width:100%}
.viewer{position:fixed;inset:0;background:#000e;z-index:30;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:16px}
.viewer img{max-height:78vh;max-width:100%;border-radius:12px}

.empty-state{text-align:center;padding:40px 16px}
.empty-state p{max-width:28em;margin:8px auto 18px}
.notice{background:var(--panel);border:1px solid var(--line);border-left:3px solid var(--gold);border-radius:12px;padding:12px 14px;font-size:14px;color:var(--muted)}
.notice a{color:var(--text)}

.toast{position:fixed;left:50%;bottom:96px;transform:translateX(-50%);background:var(--text);color:var(--graphite);padding:10px 16px;border-radius:12px;
       font-size:14px;z-index:40;max-width:calc(100% - 32px)}

.theme{background:var(--panel);border:1px solid var(--line);border-radius:999px;width:36px;height:36px;padding:0;font-size:16px;line-height:1}
.gender{margin-bottom:10px}
h1{text-shadow:0 1px 12px var(--veil)}
.bar .theme{margin-left:auto}
:root[data-theme="light"] .chip:not([aria-pressed="true"]){background:var(--panel);color:var(--text)}
:root[data-theme="light"] .pick span{color:var(--text)}
:root[data-theme="light"] .btn:hover{background:#3a3b42}
.webnote{max-width:980px;margin:0 auto;padding:8px 16px 0;text-align:right;font-size:12px;color:var(--muted)}
.webnote a{display:inline-block;margin-left:6px;padding:3px 10px;border-radius:999px;background:var(--panel);border:1px solid var(--line);color:var(--text);text-decoration:none;font-weight:500}
.strip{align-items:flex-start}
.pick{display:flex;flex-direction:column;justify-content:flex-start}
@media (min-width:700px){.pick{width:146px}}
.strip{scrollbar-width:thin;scrollbar-color:var(--line) transparent}
.swap{flex:0 0 auto;padding:0;border:0;background:none;border-radius:10px;position:relative}
.swap:hover img{outline:2px solid var(--gold);outline-offset:-2px}
.add-outer{width:64px;height:64px;border:1.5px dashed var(--line);color:var(--muted);font-size:24px}
.add-outer:hover{border-color:var(--gold);color:var(--text)}
/* ПК: весь интерфейс крупнее на 25% (как масштаб 125% в браузере) */
@media (min-width:1100px) and (hover:hover){html{zoom:1.25}}

/* подсказки «Как это работает» */
.tour{position:fixed;inset:0;z-index:50}
.tour-hole{position:fixed;border-radius:14px;box-shadow:0 0 0 9999px rgba(0,0,0,.62);outline:2px solid var(--gold);transition:all .25s;pointer-events:none}
.tour-tip{position:fixed;background:var(--panel2);color:var(--text);border:1px solid var(--line);border-radius:16px;padding:14px 16px;box-shadow:0 10px 30px rgba(0,0,0,.4)}
.tour-tip h3{margin:4px 0 6px;font-size:18px}
.tour-tip p{margin:0 0 12px;font-size:15px;color:var(--muted)}
.tour-tip .row{justify-content:space-between}
.tour-tip .row > *{flex:0 0 auto}
@media (prefers-reduced-motion:reduce){.tour-hole{transition:none}}
/* при масштабе 125% на ПК vh тоже увеличиваются — делим, чтобы окна не обрезались снизу */
@media (min-width:1100px) and (hover:hover){
  .sheet .card{max-height:calc(92vh / 1.25)}
  .tryon img.result{max-height:calc(70vh / 1.25)}
  .viewer img{max-height:calc(78vh / 1.25)}
  body{min-height:calc(100vh / 1.25)}
}
.cat-head .cnt{font-weight:500}
@media (hover:hover){.strip{cursor:grab}.strip .pick{cursor:inherit}}
.strip.dragging{cursor:grabbing;scroll-snap-type:none;user-select:none}
.strip img{-webkit-user-drag:none;user-select:none}
.seg{margin-bottom:6px}
.sgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;max-width:520px}

/* стилист */
.stylist-cta{display:flex;align-items:center;gap:12px;margin:6px 0 18px}
.stylist-cta>div{flex:1}.stylist-cta p{margin:4px 0 0}
.sheet.chat .card{display:flex;flex-direction:column;height:min(88vh,760px)}
@media (min-width:1100px) and (hover:hover){.sheet.chat .card{height:min(calc(88vh / 1.25),760px)}}
.chat-head{display:flex;justify-content:space-between;align-items:center}
.chat-log{flex:1;overflow:auto;display:flex;flex-direction:column;gap:10px;padding:12px 2px;margin-top:8px}
.msg{max-width:85%;padding:10px 14px;border-radius:16px;font-size:15px;line-height:1.45}
.msg.me{align-self:flex-end;background:var(--steel);color:var(--graphite);border-bottom-right-radius:6px}
.msg.bot{align-self:flex-start;background:var(--panel2);border:1px solid var(--line);border-bottom-left-radius:6px}
.msg .look{display:flex;gap:6px;margin-top:10px;flex-wrap:wrap}
.msg .look img{width:56px;height:56px;object-fit:cover;border-radius:8px}
.msg .chat-try{margin-top:10px;padding:8px 16px}
.chat-form{display:flex;gap:8px;margin-top:8px}.chat-form input{flex:1}.chat-form .btn{padding:12px 16px}
.chat-foot{text-align:center;margin-top:6px}
.sheet.chat .card{background:var(--panel2)}
.chat-form{align-items:flex-end}
.chat-form textarea{flex:1;resize:none;background:var(--field);border:1px solid var(--line);border-radius:12px;padding:12px 14px;font:inherit;color:inherit;line-height:1.4;max-height:130px;overflow-y:auto}
.chat-form textarea:focus{border-color:var(--steel);outline:none}

/* телефон: шапка в одну строку, карточка стилиста столбиком */
@media (max-width:520px){
  .bar{gap:8px;padding:10px 12px}
  .brand span{display:none}
  .who{gap:8px}
  .theme{width:32px;height:32px;font-size:14px}
  .balance{white-space:nowrap;font-size:13px;padding:6px 10px}
  .link{font-size:13px}
  .stylist-cta{flex-direction:column;align-items:stretch}
  .stylist-cta .btn{width:100%}
}
/* стрелки наверх/вниз */
.scrollbtns{position:fixed;right:16px;bottom:96px;display:flex;flex-direction:column;gap:8px;z-index:15}
.scrollbtns button{width:44px;height:44px;border-radius:50%;background:var(--panel);border:1px solid var(--line);color:var(--text);font-size:20px;line-height:1;box-shadow:0 4px 14px rgba(0,0,0,.3)}
.scrollbtns button:hover{border-color:var(--gold)}

/* телефон: логотип слева на две строки шапки, под ним название; справа — плашка «веб-версия» и кнопки */
@media (max-width:520px){
  .topwrap{display:grid;grid-template-columns:auto auto 1fr;column-gap:10px;row-gap:6px;padding:8px 12px 4px;align-items:center}
  .topwrap .webnote{grid-column:2/4;grid-row:1;padding:0;max-width:none;margin:0}
  .topwrap .bar{display:contents}
  .topwrap .brand{grid-column:1;grid-row:1/3;flex-direction:column;gap:4px;align-self:start}
  .topwrap .brand span{display:block;font-size:17px;line-height:1;text-align:center;max-width:56px}
  .topwrap .theme#themeBtn{grid-column:2;grid-row:2;margin:0}
  .topwrap .who{grid-column:3;grid-row:2;justify-self:end}
}
@media (max-width:520px){.topwrap .brand img{width:31px;height:31px;border-radius:8px}}