/* Wine Not — веб-версия. Основа — согласованный прототип design/wine-not-prototype.html. */
@font-face{font-family:"Manrope";src:url(fonts/manrope.woff2) format("woff2");font-weight:200 800;font-display:swap}
@font-face{font-family:"Playfair Display";src:url(fonts/playfair.woff2) format("woff2");font-weight:400 900;font-display:swap}
@font-face{font-family:"Playfair Display";src:url(fonts/playfair-italic.woff2) format("woff2");font-weight:400 900;font-style:italic;font-display:swap}
*{box-sizing:border-box;margin:0;padding:0}
html,body{background:#0e0b10;color:#eee;font-family:"Manrope",system-ui,sans-serif}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}

/* ===== app tokens ===== */
.app{--bg:#141016;--surf:#1f1a22;--surf2:#2a2330;--line:#3a3040;--txt:#f4ede4;--mut:#a397a6;--wine:#e2475c;--wine2:#8f2236;--aqua:#5cd69a;--aqua2:#1f7a55;--lv1:#f2c94c;--lv2:#f2994a;--lv3:#e2475c;--gold:#e8b86a;--ink:#141016;--shadow:rgba(0,0,0,.5);
 position:relative;width:390px;height:844px;border-radius:52px;overflow:hidden;background:var(--bg);color:var(--txt);font-size:15px}
.app.light{--bg:#f5efe6;--surf:#fffbf5;--surf2:#ede4d8;--line:#e0d3c2;--txt:#2a1e24;--mut:#85767c;--wine:#c0303f;--wine2:#7d1d2a;--aqua:#17935c;--aqua2:#0f6340;--lv1:#d4a00f;--lv2:#e07b1f;--lv3:#c0303f;--gold:#b07a26;--ink:#fffbf5;--shadow:rgba(60,30,20,.1)}
.serif{font-family:"Playfair Display",Georgia,serif}
.sc{font-size:11px;letter-spacing:1.6px;text-transform:uppercase;font-weight:700;color:var(--mut)}
.status{position:absolute;top:0;left:0;right:0;height:54px;display:flex;justify-content:space-between;align-items:center;padding:6px 34px 0 40px;font-weight:700;font-size:16px;z-index:40;pointer-events:none}
.status .r{display:flex;gap:6px;align-items:center;font-size:12px}
.status .bat{border:1.5px solid currentColor;border-radius:5px;padding:0 4px;font-weight:700;font-size:11px}
.sbg{position:absolute;top:0;left:0;right:0;height:50px;background:var(--bg);z-index:39}
.scroll{position:absolute;inset:0;overflow-y:auto;overflow-x:hidden;scrollbar-width:none}
.scroll::-webkit-scrollbar{display:none}
.pad{padding:0 24px}
.mut{color:var(--mut)}
h1{font-family:"Playfair Display",Georgia,serif;font-size:34px;font-weight:700;line-height:1.1;letter-spacing:-.3px}
h1 i,h2 i{font-weight:600;color:var(--gold)}
h2{font-family:"Playfair Display",Georgia,serif;font-size:25px;font-weight:700;line-height:1.15}
.sub{color:var(--mut);font-size:14.5px;line-height:1.5;margin-top:10px}

/* CTA */
.footer{position:absolute;left:0;right:0;bottom:0;padding:16px 24px 34px;background:linear-gradient(to top,var(--bg) 72%,transparent);z-index:20}
.cta{width:100%;height:58px;border-radius:18px;background:var(--txt);color:var(--bg);font-weight:800;font-size:16.5px;display:flex;align-items:center;justify-content:center;gap:10px;letter-spacing:.2px}
.cta:disabled{opacity:.35}
.cta .arr{font-size:20px;line-height:1}
.link{display:block;width:100%;text-align:center;color:var(--mut);font-size:14px;font-weight:600;margin-top:12px;padding:6px}
.apple{width:100%;height:56px;border-radius:16px;background:var(--txt);color:var(--bg);font-weight:700;font-size:16.5px;display:flex;align-items:center;justify-content:center;gap:8px}
.apple svg{width:17px;height:21px;fill:currentColor}

/* onboarding */
.ob-top{display:flex;justify-content:space-between;align-items:center;padding:62px 24px 26px}
.stepno{font-family:"Playfair Display",serif;font-style:italic;font-size:17px;color:var(--mut)}
.stepno b{color:var(--txt);font-style:normal;font-weight:700}
.prog{flex:1;height:2px;background:var(--line);margin:0 16px;position:relative;border-radius:2px}
.prog i{position:absolute;left:0;top:0;bottom:0;background:var(--gold);border-radius:2px}
.back{width:36px;height:36px;display:flex;align-items:center;justify-content:center;border-radius:12px;border:1px solid var(--line)}
.back svg{width:16px;height:16px}
.langbtn{display:flex;align-items:center;gap:6px;border:1px solid var(--line);border-radius:12px;padding:8px 12px;font-size:13.5px;font-weight:700}
.welcome{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;padding:0 28px 170px}
.emblem{width:150px;height:150px;margin-bottom:34px}
.word{font-family:"Playfair Display",serif;font-size:68px;font-weight:800;line-height:.92;letter-spacing:-1.5px}
.word i{font-weight:600;color:var(--aqua);display:block}
.word .w{color:var(--wine)}
.pun{margin-top:14px}
.tag{margin-top:22px;font-size:18px;font-weight:600;line-height:1.5}
.tag .w{color:var(--wine)}.tag .a{color:var(--aqua)}
.field{margin-top:14px;background:var(--surf);border:1px solid var(--line);border-radius:18px;padding:11px 16px 9px}
.field:focus-within{border-color:var(--gold)}
.field label{display:block;font-size:11px;letter-spacing:1.4px;text-transform:uppercase;font-weight:700;color:var(--mut)}
.field input,.field textarea{width:100%;background:none;border:0;outline:none;font-size:19px;font-weight:700;padding-top:4px}
.field textarea{font-size:15.5px;font-weight:500;line-height:1.45;resize:none;height:76px}
.row3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.row3 .field input{font-family:"Playfair Display",serif;font-size:24px}
.sexrow{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px}
.sexrow button{height:52px;border-radius:16px;border:1px solid var(--line);font-weight:700;color:var(--mut)}
.sexrow button.on{border-color:var(--txt);color:var(--txt);background:var(--surf)}
.ruler{margin-top:20px;padding:18px 18px 14px;border-radius:20px;border:1px dashed var(--line)}
.ruler .top{display:flex;justify-content:space-between;align-items:flex-end}
.ruler .top b{font-family:"Playfair Display",serif;font-size:44px;line-height:1}
.ruler .top span{font-weight:700;font-size:14px}
.ticks{position:relative;height:34px;margin-top:16px}
.ticks .zone{position:absolute;top:12px;height:4px;border-radius:2px}
.ticks i{position:absolute;top:6px;width:1px;height:16px;background:var(--line)}
.ticks em{position:absolute;top:-2px;width:3px;height:30px;border-radius:2px;background:var(--txt);transform:translateX(-50%)}
.ticks small{position:absolute;top:24px;font-size:10.5px;color:var(--mut);transform:translateX(-50%)}
.optc{display:block;width:100%;text-align:left;border:1px solid var(--line);border-radius:22px;padding:18px 18px 18px 20px;margin-top:12px;position:relative;background:transparent}
.optc.on{background:var(--surf);border-color:var(--gold)}
.optc .t{font-family:"Playfair Display",serif;font-size:21px;font-weight:700;padding-right:36px}
.optc .d{color:var(--mut);font-size:13.5px;line-height:1.45;margin-top:5px;padding-right:30px}
.optc .rb{position:absolute;right:18px;top:20px;width:22px;height:22px;border-radius:50%;border:2px solid var(--line)}
.optc.on .rb{border-color:var(--gold);box-shadow:inset 0 0 0 4px var(--surf),inset 0 0 0 12px var(--gold)}
.lim{margin-top:16px;border-top:1px solid var(--line);padding-top:12px}
.stp{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:6px 0;font-size:13.5px;color:var(--mut);font-weight:600}
.stp .ctl{display:flex;align-items:center;gap:2px;border:1px solid var(--line);border-radius:12px;color:var(--txt)}
.stp .ctl button{width:36px;height:34px;font-size:18px;font-weight:600}
.stp .ctl b{min-width:22px;text-align:center;font-family:"Playfair Display",serif;font-size:19px}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}
.chip{border-radius:12px;border:1px solid var(--line);padding:10px 14px;font-size:14.5px;font-weight:600;color:var(--mut)}
.chip.on{border-color:var(--gold);color:var(--txt);background:var(--surf)}
.chip.on::before{content:"✓ ";color:var(--gold)}
/* wine label card */
.label{position:relative;border-radius:6px;padding:22px 20px 20px;background:var(--surf);margin-top:16px;outline:1px solid var(--gold);outline-offset:-7px;box-shadow:inset 0 0 0 1px var(--line)}
.label .sc{color:var(--gold);text-align:center}
.label q{display:block;font-family:"Playfair Display",serif;font-style:italic;font-weight:600;font-size:21px;line-height:1.35;text-align:center;margin-top:10px;quotes:"«" "»"}
.label .tags{text-align:center;margin-top:12px;font-size:12.5px;font-weight:700;color:var(--mut);letter-spacing:.4px}
.label .orn{display:block;text-align:center;color:var(--gold);font-size:12px;margin-top:10px;letter-spacing:6px}
.store{display:block;width:100%;text-align:left;border:1px solid var(--line);border-radius:22px;padding:18px 20px;margin-top:14px;position:relative}
.store.on{border-color:var(--gold);background:var(--surf)}
.store .t{font-family:"Playfair Display",serif;font-size:20px;font-weight:700;display:flex;gap:10px;align-items:center}
.store .d{color:var(--mut);font-size:13.5px;line-height:1.45;margin-top:6px}
.okline{margin-top:12px;font-size:13.5px;font-weight:700;color:var(--aqua)}

/* main header */
.mhead{position:sticky;top:0;z-index:10;background:var(--bg);padding:58px 20px 0}
.mrow{display:flex;align-items:center;justify-content:space-between}
.brand{font-family:"Playfair Display",serif;font-size:24px;font-weight:800;letter-spacing:-.3px}
.brand .w{color:var(--wine)}.brand i{color:var(--aqua);font-weight:600}
.me{width:38px;height:38px;border-radius:50%;background:var(--surf2);font-family:"Playfair Display",serif;font-weight:700;font-size:17px;display:flex;align-items:center;justify-content:center;border:1px solid var(--line)}
.vt{display:flex;gap:18px;margin-top:14px;border-bottom:1px solid var(--line)}
.vt button{padding:6px 0 10px;font-weight:700;font-size:14px;color:var(--mut);border-bottom:2px solid transparent;margin-bottom:-1px}
.vt button.on{color:var(--txt);border-color:var(--txt)}
.vt .sp{flex:1}
.vt .legend{display:flex;gap:9px;align-items:center;font-size:11.5px;color:var(--mut);font-weight:600;padding-bottom:8px}
.vt .legend>span{display:flex;align-items:center;gap:3px}
.wk{display:grid;grid-template-columns:repeat(7,1fr);padding:10px 0 8px;font-size:11px;letter-spacing:1px;text-transform:uppercase;color:var(--mut);text-align:center;font-weight:700}
.hero{padding:6px 20px 0}
.streak{display:flex;align-items:flex-end;gap:14px;margin-top:10px}
.streak b{font-family:"Playfair Display",serif;font-size:76px;line-height:.85;font-weight:800;color:var(--aqua)}
.streak span{font-size:14px;font-weight:600;line-height:1.35;padding-bottom:4px}
.streak span em{display:block;font-style:normal;color:var(--mut);font-weight:500;font-size:13px}
.glabel{display:block;width:100%;text-align:left;margin-top:18px}
.glabel .label{margin-top:0;padding:18px 18px 16px}
.glabel .label q{font-size:17.5px;margin-top:6px}
.gline{display:flex;justify-content:space-between;align-items:center;margin-top:12px;font-size:12.5px;font-weight:700;color:var(--mut)}
.slots{display:flex;gap:5px}
.slots i{width:16px;height:6px;border-radius:3px;background:var(--line)}
.slots i.u{background:var(--wine)}
.month{padding:22px 12px 4px}
.month h3{font-family:"Playfair Display",serif;font-size:22px;font-weight:700;padding:0 8px 10px;display:flex;justify-content:space-between;align-items:baseline}
.month h3 small{font-family:"Manrope",sans-serif;font-size:12px;font-weight:600;color:var(--mut)}
.grid7{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));row-gap:4px}
.day{position:relative;height:62px;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:3px;padding-top:4px;font-size:15px;font-weight:700}
.day .n{height:26px;display:flex;align-items:center;justify-content:center}
.day.none .n{color:var(--mut);font-weight:500}
.day.fut .n{color:var(--mut);opacity:.45;font-weight:500}
.day.today{background:var(--surf);box-shadow:inset 0 0 0 1.5px var(--txt);border-radius:14px;margin:0 3px}
.day.today .n{color:var(--txt);font-weight:800}
.year{padding:16px 16px 10px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 16px}
.ym{text-align:left}
.ym h4{font-family:"Playfair Display",serif;font-size:16px;font-weight:700;margin-bottom:8px;display:flex;justify-content:space-between;align-items:baseline}
.ym h4 small{font-family:"Manrope";font-size:11px;color:var(--wine);font-weight:700}
.ym .g{display:grid;grid-template-columns:repeat(7,1fr);gap:3px}
.ym .g i{aspect-ratio:1;border-radius:3px;background:var(--surf2)}
.ym .g i.s{background:var(--aqua);opacity:.5}.ym .g i.d1{background:var(--lv1)}.ym .g i.d2{background:var(--lv2)}.ym .g i.d3{background:var(--lv3)}.ym .g i.e{background:transparent}.ym .g i.f{opacity:.35}

/* floating tab bar */
.tabs{position:absolute;left:50%;transform:translateX(-50%);bottom:26px;display:flex;gap:4px;padding:6px;border-radius:22px;background:var(--surf2);border:1px solid var(--line);z-index:30;box-shadow:0 12px 30px var(--shadow)}
.tabs button{display:flex;align-items:center;gap:7px;height:46px;padding:0 16px;border-radius:17px;font-size:13.5px;font-weight:700;color:var(--mut)}
.tabs button.on{background:var(--txt);color:var(--bg)}
.tabs svg{width:20px;height:20px}
.tabs button:not(.on) span{display:none}
.tabspace{height:110px}

/* stats */
.st-head{padding:60px 20px 0;display:flex;justify-content:space-between;align-items:center}
.periods{display:flex;gap:18px;padding:14px 20px 0;border-bottom:1px solid var(--line);margin:0 20px;padding-left:0;padding-right:0;overflow-x:auto;scrollbar-width:none;position:sticky;top:50px;background:var(--bg);z-index:5}
.periods::-webkit-scrollbar{display:none}
.periods button{flex:0 0 auto;padding:6px 0 10px;font-weight:700;font-size:14px;color:var(--mut);border-bottom:2px solid transparent;margin-bottom:-1px}
.periods button.on{color:var(--txt);border-color:var(--gold)}
.donut{display:flex;align-items:center;gap:20px;padding:24px 20px 4px}
.donut .lg2{flex:1;display:flex;flex-direction:column;gap:9px;min-width:0}
.donut .lg2 div{display:flex;align-items:center;gap:8px;font-size:13.5px;font-weight:600}
.donut .lg2 span{flex:1;color:var(--mut)}
.donut .lg2 b{font-family:"Playfair Display",serif;font-size:21px}
.donut .lg2 .tot span{font-size:12px;color:var(--mut);padding-top:4px;border-top:1px solid var(--line)}
.donut .lg{display:flex;flex-direction:column;gap:14px}
.donut .lg div{font-size:13px;color:var(--mut);font-weight:600;line-height:1.3}
.donut .lg b{display:block;font-family:"Playfair Display",serif;font-size:28px;color:var(--txt);line-height:1.05}
.donut .lg i{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:6px}
.blk{margin:22px 20px 0;padding-top:20px;border-top:1px solid var(--line)}
.blk h3{font-family:"Playfair Display",serif;font-size:21px;font-weight:700;line-height:1.25}
.blk h3 i{color:var(--wine)}
.bal{position:relative;margin:34px 0 8px;height:10px;display:grid;grid-template-columns:repeat(5,1fr);gap:4px}
.bal span{border-radius:5px}
.bal .mk{position:absolute;top:50%;transform:translate(-50%,-50%)}
.bal .gmk{width:4px;height:28px;border-radius:2px;background:var(--gold)}
.bal .gmk::after{content:attr(data-l);position:absolute;bottom:32px;left:50%;transform:translateX(-50%);font-size:11px;font-weight:800;color:var(--gold);white-space:nowrap;letter-spacing:.6px;text-transform:uppercase}
.bal .amk{width:22px;height:22px;border-radius:50%;background:var(--txt);border:4px solid var(--bg)}
.bal .amk::after{content:attr(data-l);position:absolute;top:24px;left:50%;transform:translateX(-50%);font-size:11px;font-weight:800;color:var(--txt);white-space:nowrap;letter-spacing:.6px;text-transform:uppercase}
.balx{display:grid;grid-template-columns:repeat(5,1fr);gap:4px;margin-top:30px;font-size:11px;color:var(--mut);font-weight:600;text-align:center;line-height:1.25}
.kpis{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 14px;margin-top:16px}
.kpi b{display:block;font-family:"Playfair Display",serif;font-size:34px;font-weight:700;line-height:1}
.kpi span{display:block;font-size:12.5px;color:var(--mut);margin-top:6px;line-height:1.3;font-weight:600}
.wdots{display:grid;grid-template-columns:repeat(7,1fr);margin-top:18px;align-items:center;justify-items:center;height:64px}
.wdots i{display:block;border-radius:50%;background:var(--wine);opacity:.35}
.wdots i.top{opacity:1}
.wlbl{display:grid;grid-template-columns:repeat(7,1fr);text-align:center;font-size:11px;letter-spacing:.8px;text-transform:uppercase;font-weight:700;color:var(--mut)}
.mrows{margin-top:14px;display:flex;flex-direction:column;gap:9px}
.mr{display:grid;grid-template-columns:62px 1fr 26px;align-items:center;gap:10px;font-size:12.5px;font-weight:700;color:var(--mut)}
.mr .tr{height:8px;border-radius:4px;background:var(--surf2);position:relative;overflow:hidden;display:flex;gap:2px}
.mr .tr i{display:block;height:100%;border-radius:4px}
.mr b{text-align:right;color:var(--txt)}
.recs{margin-top:8px}
.recr{display:flex;align-items:center;gap:16px;padding:12px 0;border-bottom:1px solid var(--line)}
.recr:last-child{border-bottom:0}
.recr b{font-family:"Playfair Display",serif;font-size:46px;font-weight:800;line-height:1;min-width:76px}
.recr span{font-size:14px;font-weight:600;line-height:1.35}
.recr span em{display:block;font-style:normal;font-size:12px;color:var(--mut);font-weight:500;margin-top:2px}
.miles{position:relative;margin:26px 6px 10px;height:60px}
.miles .ln{position:absolute;left:0;right:0;top:14px;height:3px;border-radius:2px;background:var(--surf2)}
.miles .ln i{position:absolute;left:0;top:0;bottom:0;background:var(--aqua);border-radius:2px}
.miles .nd{position:absolute;top:4px;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:8px;font-size:11.5px;font-weight:800;color:var(--mut)}
.miles .nd s{display:block;width:22px;height:22px;border-radius:50%;background:var(--bg);border:3px solid var(--surf2);text-decoration:none}
.miles .nd.ok{color:var(--txt)}
.miles .nd.ok s{background:var(--aqua);border-color:var(--aqua)}

/* sommelier */
.as-head{position:sticky;top:0;z-index:5;background:var(--bg);padding:56px 20px 14px;display:flex;align-items:center;gap:12px;border-bottom:1px solid var(--line)}
.mono{width:46px;height:46px;border-radius:50%;flex:0 0 auto;display:flex;align-items:center;justify-content:center;background:conic-gradient(from 225deg,var(--wine) 0 50%,var(--aqua) 50% 100%);font-family:"Playfair Display",serif;font-weight:800;font-size:17px;color:#fff}
.mono span{width:38px;height:38px;border-radius:50%;background:var(--bg);display:flex;align-items:center;justify-content:center;color:var(--txt)}
.as-head .nm{flex:1}
.as-head .nm b{display:block;font-family:"Playfair Display",serif;font-size:22px}
.as-head .nm span{font-size:12.5px;color:var(--mut);font-weight:600}
.msgs{padding:16px 18px 20px;display:flex;flex-direction:column;gap:12px}
.msg{border-left:3px solid var(--wine);padding:4px 0 4px 14px;max-width:92%;font-size:15px;line-height:1.55}
.msg.mine{align-self:flex-end;border:0;background:var(--surf2);border-radius:18px 18px 4px 18px;padding:11px 15px;font-weight:600}
.datesep{text-align:center;font-size:11px;letter-spacing:1.4px;text-transform:uppercase;color:var(--mut);font-weight:700;margin:10px 0 2px}
.quick{position:absolute;left:0;right:0;bottom:146px;display:flex;gap:8px;overflow-x:auto;padding:12px 16px;background:linear-gradient(to top,var(--bg) 65%,transparent);scrollbar-width:none;z-index:6}
.quick::-webkit-scrollbar{display:none}
.quick button{flex:0 0 auto;border:1px solid var(--line);background:var(--bg);border-radius:12px;padding:9px 13px;font-size:13.5px;font-weight:700}

.compose{position:absolute;left:14px;right:14px;bottom:96px;display:flex;gap:8px;align-items:center;z-index:7}
.compose .clip{width:44px;height:44px;border-radius:14px;border:1px solid var(--gold);background:var(--surf);display:flex;align-items:center;justify-content:center;color:var(--gold);flex:0 0 auto}
.compose .clip svg{width:20px;height:20px}
.compose .cin{flex:1;height:44px;border-radius:14px;border:1px solid var(--line);background:var(--surf);display:flex;align-items:center;padding:0 14px;color:var(--mut);font-size:14px;font-weight:500}
.att{align-self:flex-end;display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end;max-width:86%}
.att img{width:58px;height:112px;object-fit:cover;border-radius:10px;border:1px solid var(--line)}
.typing{animation:pulse .8s infinite alternate;color:var(--mut)}
@keyframes pulse{to{opacity:.35}}
.msg .qb{display:block;width:100%;margin-top:10px;background:var(--txt);color:var(--bg);border-radius:12px;padding:11px;font-weight:800;text-align:center;font-size:14px}
.msg .qb.alt{background:transparent;color:var(--txt);border:1px solid var(--line)}
.msg .qb:disabled{background:transparent;color:var(--aqua);border:1px solid var(--aqua)}
.imp{margin-top:10px;background:var(--surf);border-radius:16px;padding:14px;border:1px solid var(--line)}
.imp .sc{color:var(--gold)}
.impm{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:10px}
.impm div{font-size:10.5px;color:var(--mut);font-weight:600;line-height:1.3}
.impm b{display:block;font-family:"Playfair Display",serif;font-size:14px;color:var(--txt);margin-bottom:5px}
.impm .g{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;margin-bottom:5px}
.impm .g i{aspect-ratio:1;border-radius:2px;background:var(--surf2)}
.impm .g i.s{background:var(--aqua);opacity:.55}.impm .g i.d1{background:var(--lv1)}.impm .g i.d2{background:var(--lv2)}.impm .g i.d3{background:var(--lv3)}.impm .g i.u{background:transparent;box-shadow:inset 0 0 0 1px var(--gold)}.impm .g i.e{background:transparent}.impm .g i.o{opacity:.25}
.imp ul{list-style:none;margin-top:12px;display:flex;flex-direction:column;gap:5px;font-size:13px;font-weight:600}
.imp ul li span{color:var(--mut);font-weight:500}
.yh{font-family:"Playfair Display",serif;font-size:30px;font-weight:800;padding:20px 20px 0}
.dv{display:flex;gap:16px;align-items:center;margin-top:16px;padding:16px 18px;border-radius:20px;background:var(--surf)}
.dv b{display:block;font-family:"Playfair Display",serif;font-size:27px;line-height:1.1}
.dv span{display:block;font-size:13px;color:var(--mut);font-weight:600;margin-top:4px;line-height:1.35}
.drink .qty{font-family:"Playfair Display",serif;font-size:20px;font-weight:700}
.facts{margin-top:14px;border-radius:18px;background:var(--surf);overflow:hidden}
.facts div{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:13px 16px;border-bottom:1px solid var(--line);font-size:13.5px;font-weight:600}
.facts div:last-child{border-bottom:0}
.facts span{color:var(--mut)}
.facts b{font-family:"Playfair Display",serif;font-size:19px;white-space:nowrap}
.mini{display:flex;gap:14px;align-items:stretch;width:100%;text-align:left;margin-top:8px;padding:12px 14px;border-radius:18px;background:var(--surf);border:1px solid var(--line);border-left:3px solid var(--gold)}
.ms{display:flex;flex-direction:column;align-items:center;justify-content:center;padding-right:14px;border-right:1px solid var(--line);min-width:64px}
.ms b{font-family:"Playfair Display",serif;font-size:38px;line-height:1;font-weight:800;color:var(--aqua)}
.ms span{font-size:10.5px;color:var(--mut);font-weight:700;text-align:center;line-height:1.2;margin-top:4px}
.mw{min-width:0;flex:1}
.mw .sc{color:var(--gold);font-size:10px}
.mw q{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-family:"Playfair Display",serif;font-style:italic;font-weight:600;font-size:14.5px;line-height:1.3;margin-top:3px;quotes:"«" "»"}
.mw .gl{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-top:6px;font-size:11px;font-weight:700;color:var(--mut)}
.mw .gl>span:first-child{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.wchips{display:flex;flex-wrap:wrap;gap:7px;margin-top:10px}
.wc{border:1px solid var(--line);border-radius:12px;padding:8px 11px;font-size:13.5px;font-weight:700;color:var(--mut)}
.wc.on{border-color:var(--gold);color:var(--txt);background:var(--surf)}
.optl{font-size:10px;letter-spacing:1px;color:var(--mut);opacity:.8;margin-left:6px}
.pinbtn{display:flex;align-items:center;gap:12px;width:100%;text-align:left;margin-top:10px;padding:13px 14px;border-radius:16px;border:1px dashed var(--gold);font-weight:700;font-size:14.5px}
.pinbtn small{display:block;font-size:12px;color:var(--mut);font-weight:600;margin-top:2px}
.pinbtn .pi{width:34px;height:34px;border-radius:50%;background:var(--surf2);display:flex;align-items:center;justify-content:center;flex:0 0 auto;color:var(--gold)}
.plc{display:flex;align-items:center;gap:12px;margin-top:10px;padding:12px 14px;border-radius:16px;background:var(--surf)}
.plc .pn{flex:1;min-width:0}
.plc .pn b{display:block;font-size:14.5px}
.plc .pn span{font-size:12px;color:var(--mut);font-weight:600}
.heart{width:38px;height:38px;border-radius:12px;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;font-size:17px;color:var(--mut);flex:0 0 auto}
.heart.on{border-color:var(--wine);color:var(--wine)}
.map{display:block;width:100%;height:auto;border-radius:20px;margin-top:14px;cursor:crosshair}
.seg2{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:14px;padding:4px;border-radius:14px;background:var(--surf)}
.seg2 button{height:40px;border-radius:11px;font-weight:700;font-size:13.5px;color:var(--mut)}
.seg2 button.on{background:var(--txt);color:var(--bg)}
.geo{display:flex;gap:8px;align-items:flex-start;margin-top:10px;font-size:12px;color:var(--mut);font-weight:600;line-height:1.4}
.plist2{margin-top:12px;border-radius:18px;background:var(--surf);overflow:hidden}
.prow2{display:flex;align-items:center;gap:12px;width:100%;text-align:left;padding:12px 14px;border-bottom:1px solid var(--line)}
.prow2:last-child{border-bottom:0}
.prow2 .em{font-size:18px;width:26px;text-align:center}
.prow2 .pn{flex:1;min-width:0}
.prow2 .pn b{display:block;font-size:14.5px}
.prow2 .pn span{font-size:12px;color:var(--mut);font-weight:600}
.prow2 .ds{font-size:12px;color:var(--mut);font-weight:700;white-space:nowrap}
.prow2.sel{background:var(--surf2)}
.prow2.sel b{color:var(--gold)}
.searchf{display:flex;align-items:center;gap:8px;margin-top:12px;height:44px;border-radius:14px;border:1px solid var(--line);padding:0 14px;color:var(--mut);font-size:14px;font-weight:500}
.wbars2{margin-top:14px;display:flex;flex-direction:column;gap:9px}
.wb{display:grid;grid-template-columns:130px 1fr 30px;align-items:center;gap:10px;font-size:13px;font-weight:700}
.wb .tr{height:8px;border-radius:4px;background:var(--surf2);overflow:hidden}
.wb .tr i{display:block;height:100%;border-radius:4px;background:var(--gold)}
.wb b{text-align:right}
.nums{margin-top:14px;border-radius:18px;background:var(--surf);border:1px solid var(--line);overflow:hidden}
.nrow{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 10px 9px 16px;border-bottom:1px solid var(--line)}
.nrow:last-child{border-bottom:0}
.nrow label{font-size:11px;letter-spacing:1.4px;text-transform:uppercase;font-weight:700;color:var(--mut)}
.nctl{display:flex;align-items:center;gap:6px}
.nctl button{width:46px;height:46px;border-radius:14px;background:var(--surf2);font-size:24px;font-weight:500;display:flex;align-items:center;justify-content:center;user-select:none;-webkit-user-select:none;touch-action:manipulation;transition:background .12s,transform .12s}
.nctl button:active{background:var(--gold);color:var(--ink);transform:scale(.94)}
.nctl input{width:70px;text-align:center;background:none;border:0;outline:none;font-family:"Playfair Display",serif;font-size:28px;font-weight:700;color:var(--txt)}
.wp{position:absolute;inset:0;--txt:#f4ede4;--mut:#d3c7cd;--bg:#141016;--wine:#ff5d72;--aqua:#6ce0a8;color:var(--txt)}
.wphoto{position:absolute;inset:0;background:#0b0809 url('img/splash.jpg') center 20%/cover no-repeat}
.wshade{position:absolute;inset:0;background:linear-gradient(to bottom,rgba(10,6,10,.45) 0%,rgba(10,6,10,0) 18%,rgba(10,6,10,0) 38%,rgba(14,10,16,.78) 58%,rgba(20,16,22,.97) 76%,#141016 100%)}
.app.onphoto .status{color:#f4ede4}
.wp .word{text-shadow:0 2px 24px rgba(0,0,0,.5)}
.icgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:10px}
.icgrid.off{opacity:.38}
.icauto{display:block;width:100%;text-align:left;margin-top:14px;padding:14px;border-radius:22px;border:1.5px solid var(--line)}
.icauto.on{border-color:var(--gold);background:var(--surf)}
.icauto .row{display:flex;gap:14px;align-items:center}
.icauto .row svg{border-radius:16px;flex:0 0 auto}
.icauto b{display:block;font-family:"Playfair Display",serif;font-size:19px}
.icauto span{display:block;font-size:12.5px;color:var(--mut);font-weight:600;line-height:1.4;margin-top:3px}
.icauto .steps{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-top:12px;text-align:center}
.icauto .steps div{display:flex;flex-direction:column;align-items:center;gap:5px;opacity:.55}
.icauto .steps div.now{opacity:1}
.icauto .steps svg{border-radius:10px}
.icauto .steps small{font-size:10.5px;font-weight:700;color:var(--mut);line-height:1.2}
.icauto .steps .now small{color:var(--gold)}
.icopt{display:flex;flex-direction:column;align-items:center;gap:8px;padding:12px 6px 10px;font-size:13px;border-radius:22px;border:1.5px solid var(--line);font-weight:700;font-size:14px}
.icopt svg{border-radius:22px;filter:drop-shadow(0 6px 14px rgba(0,0,0,.35))}
.icopt.on{border-color:var(--gold);background:var(--surf)}
.icopt.on span::before{content:"✓ ";color:var(--gold)}
/* sheets */
.ov{position:absolute;inset:0;background:rgba(10,6,10,.6);z-index:60;animation:fade .2s}
.sheet{position:absolute;left:0;right:0;bottom:0;max-height:93%;background:var(--bg);border-radius:30px 30px 0 0;z-index:61;overflow-y:auto;scrollbar-width:none;padding:14px 24px 38px;animation:up .28s cubic-bezier(.2,.8,.2,1);border-top:1px solid var(--line)}
.sheet::-webkit-scrollbar{display:none}
.sheet.full{top:0;max-height:none;border-radius:52px;padding-top:62px;border:0}
.grab{width:40px;height:4px;border-radius:2px;background:var(--line);margin:0 auto 12px}
.x{position:absolute;right:20px;top:16px;width:36px;height:36px;border-radius:12px;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;z-index:2}
.sheet.full .x{top:58px}
.x svg{width:14px;height:14px}
@keyframes up{from{transform:translateY(100%)}to{transform:none}}
@keyframes fade{from{opacity:0}to{opacity:1}}
.split{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:18px}
.split .gi{position:absolute;right:14px;top:14px}
.split button{position:relative;border-radius:22px;padding:18px 16px;text-align:left;border:1.5px solid var(--line);display:flex;flex-direction:column;gap:6px;min-height:118px;justify-content:space-between}
.split .bn{font-family:"Playfair Display",serif;font-size:30px;font-weight:800;line-height:1}
.split .bn i{font-weight:600}
.split small{font-size:12.5px;font-weight:600;line-height:1.35;color:var(--mut)}
.split .not{border-color:var(--aqua)}.split .not .bn{color:var(--aqua)}
.split .wn{border-color:var(--wine)}.split .wn .bn{color:var(--wine)}
.split .not.sel{background:var(--aqua);color:var(--ink)}.split .not.sel .bn,.split .not.sel small{color:var(--ink)}
.split .wn.sel{background:var(--wine);color:#fff}.split .wn.sel .bn,.split .wn.sel small{color:#fff}
.split.big button{min-height:150px}
.drinks{margin-top:10px}
.drink{display:flex;align-items:center;gap:14px;padding:11px 0;border-bottom:1px solid var(--line)}
.drink:last-child{border-bottom:0}
.drink .di{width:38px;height:38px;display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.drink .dn{flex:1;min-width:0}
.drink .dn b{display:block;font-size:15.5px}
.drink .dn span{font-size:12px;color:var(--mut);font-weight:600}
.drink .ctl{display:flex;align-items:center;border:1px solid var(--line);border-radius:12px}
.drink .ctl button{width:38px;height:36px;font-size:19px;font-weight:600}
.drink .ctl b{min-width:22px;text-align:center;font-family:"Playfair Display",serif;font-size:19px}
.drink.has .ctl{border-color:var(--wine)}
.total{margin-top:14px;padding:14px 16px;border-radius:18px;background:var(--surf)}
.total .tt{display:flex;align-items:center;gap:12px}
.total .tt b{display:block;font-family:"Playfair Display",serif;font-size:26px;line-height:1.05}
.total .tt em{display:block;font-style:normal;font-size:12.5px;font-weight:800;margin-top:2px}
.total .chip2{margin-left:auto;font-size:11.5px;font-weight:800;padding:6px 10px;border-radius:10px;border:1px solid;white-space:nowrap}
.total .tsub{margin-top:8px;font-size:12.5px;color:var(--mut);font-weight:600}
.plist{margin-top:22px;border-radius:20px;background:var(--surf);overflow:hidden}
.prow{display:flex;align-items:center;gap:12px;width:100%;text-align:left;padding:16px 18px;border-bottom:1px solid var(--line);font-size:15.5px;font-weight:600}
.prow:last-child{border-bottom:0}
.prow .v{margin-left:auto;color:var(--mut);font-size:13.5px;font-weight:600;white-space:nowrap}
.prow .ch{color:var(--mut);font-size:18px}
.prow.danger{color:var(--wine)}
.prow svg{flex:0 0 auto}
.sw{width:52px;height:30px;border-radius:999px;background:var(--line);position:relative;transition:.2s;margin-left:auto;flex:0 0 auto}
.sw::after{content:"";position:absolute;top:3px;left:3px;width:24px;height:24px;border-radius:50%;background:#fff;transition:.2s}
.sw.on{background:var(--aqua)}.sw.on::after{left:25px}
.phead{display:flex;align-items:center;gap:16px;margin-top:8px}
.phead .av{width:64px;height:64px;border-radius:50%;background:var(--surf2);font-family:"Playfair Display",serif;font-size:30px;font-weight:700;display:flex;align-items:center;justify-content:center;border:1px solid var(--gold)}
.langs{margin-top:16px;border-radius:20px;background:var(--surf);overflow:hidden}
.langs button{display:flex;justify-content:space-between;align-items:center;width:100%;padding:15px 18px;border-bottom:1px solid var(--line);font-size:16px;font-weight:600;text-align:left}
.langs button:last-child{border-bottom:0}
.langs button span{font-size:12px;color:var(--mut);font-weight:600}
.toast{position:absolute;top:58px;left:16px;right:16px;background:var(--txt);color:var(--bg);border-radius:16px;padding:13px 16px;font-size:14px;font-weight:700;z-index:90;box-shadow:0 10px 30px rgba(0,0,0,.35);animation:fade .2s;display:flex;gap:10px;align-items:center}
.remq{font-family:"Playfair Display",serif;font-size:27px;font-weight:700;line-height:1.2;margin-top:26px}
.remq i{color:var(--aqua)}
.rdate{margin-top:4px}


/* ===== веб: во весь экран вместо рамки телефона ===== */
:root{--st:max(env(safe-area-inset-top),10px);--sb:env(safe-area-inset-bottom,0px)}
html,body{height:100%;overscroll-behavior:none}
body{background:#0e0b10;-webkit-tap-highlight-color:transparent;-webkit-text-size-adjust:100%}
body.light{background:#e9e1d6}
.app{width:100%;max-width:520px;height:100vh;height:100dvh;margin:0 auto;border-radius:0}
.status{display:none}
.ob-top{padding-top:calc(var(--st) + 14px)}
.mhead{padding-top:calc(var(--st) + 8px)}
.st-head{padding-top:calc(var(--st) + 10px)}
.as-head{padding-top:calc(var(--st) + 8px)}
.sbg{height:calc(var(--st) + 2px)}
.sheet.full{padding-top:calc(var(--st) + 14px);border-radius:0}
.sheet.full .x{top:calc(var(--st) + 10px)}
.toast{top:calc(var(--st) + 8px)}
.footer{padding-bottom:calc(22px + var(--sb))}
.tabs{bottom:calc(16px + var(--sb))}
.tabspace{height:calc(110px + var(--sb))}
.compose{bottom:calc(86px + var(--sb))}
.quick{bottom:calc(136px + var(--sb))}
.sheet{padding-bottom:calc(28px + var(--sb))}
input,textarea{font-size:16px}
@media (min-width:640px){
 .app{height:min(100dvh - 48px,940px);margin-top:24px;border-radius:36px;box-shadow:0 30px 90px rgba(0,0,0,.55)}
 .sheet.full{border-radius:36px}
}
@media (hover:hover){.prow:hover,.prow2:hover{filter:brightness(1.08)}}
:focus-visible{outline:2px solid var(--gold);outline-offset:2px}

/* ===== веб: вход ===== */
.auth{position:absolute;inset:0;display:flex;flex-direction:column}
.auth .welcome{padding-bottom:12px}
.auth .box{position:relative;z-index:3;padding:0 24px calc(26px + var(--sb));display:flex;flex-direction:column;gap:10px}
.auth .idp{height:54px;border-radius:16px;font-weight:800;font-size:16px;display:flex;align-items:center;justify-content:center;gap:10px}
.auth .idp svg{width:18px;height:20px;fill:currentColor}
.auth .idp.apple{background:#fff;color:#000}
.auth .idp.google{background:#1f1a22;color:#f4ede4;border:1px solid rgba(255,255,255,.22)}
.auth .idp.email{background:var(--gold);color:#141016}
.auth .or{display:flex;align-items:center;gap:10px;color:#cbbfc6;font-size:12.5px;margin:4px 0}
.auth .or::before,.auth .or::after{content:"";flex:1;height:1px;background:rgba(255,255,255,.2)}
.auth .fine{font-size:12px;line-height:1.5;color:#cbbfc6;text-align:center;margin-top:4px}
.auth .fine a{color:#f4ede4}
.auth .err{background:rgba(226,71,92,.18);border:1px solid #e2475c;color:#ffd5db;border-radius:14px;padding:10px 14px;font-size:13.5px;font-weight:600}
.auth .link2{color:#f4ede4;font-weight:700;font-size:14px;text-align:center;padding:6px;text-decoration:underline;text-underline-offset:3px}
.boot{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.boot .emblem{width:96px;height:96px;animation:wnpulse 1.4s ease-in-out infinite}
@keyframes wnpulse{50%{opacity:.55;transform:scale(.96)}}
.offline{position:absolute;left:50%;transform:translateX(-50%);top:calc(var(--st) + 4px);z-index:70;background:var(--surf2);border:1px solid var(--line);border-radius:12px;padding:6px 12px;font-size:12px;font-weight:700;color:var(--mut)}
.accmail{margin-top:10px;font-weight:700;color:var(--txt);word-break:break-all}
.dangerbox{margin-top:18px;padding:14px;border-radius:18px;border:1px solid var(--wine);background:rgba(226,71,92,.08);font-size:14px;line-height:1.5}
.cta.danger{background:var(--wine);color:#fff}
.install{margin-top:12px;font-size:13.5px;line-height:1.5;color:var(--mut)}