/* Шрифты лежат на нашем сервере (variable, 400-700) */
@font-face{font-family:'Inter';font-weight:400 700;font-display:swap;src:url(/fonts/inter-cyrillic.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Inter';font-weight:400 700;font-display:swap;src:url(/fonts/inter-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Geist Mono';font-weight:400 700;font-display:swap;src:url(/fonts/geistmono-cyrillic.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Geist Mono';font-weight:400 700;font-display:swap;src:url(/fonts/geistmono-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Geist Mono';font-weight:400 700;font-display:swap;src:url(/fonts/geistmono-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{--ink:#3A3D42;--acc:#EDBB8E;--acc-d:#BE8450;--soft:#FFE4C9;--teal:#437572}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;background:#fff;color:var(--ink);font-family:'Inter',system-ui,sans-serif;-webkit-text-size-adjust:100%}
button{font-family:inherit;border:0;cursor:pointer;color:var(--ink);background:none;padding:0}
a{color:var(--ink);text-decoration:none}
input{font-family:inherit;color:var(--ink)}
input::placeholder{color:var(--ink);opacity:.72}
h1,h2,h3,p{margin:0}
svg{display:block;flex:none}
.mono{font-family:'Geist Mono',ui-monospace,monospace}

/* неоморфизм из макета */
.up{background:#fff;box-shadow:6px 6px 18px rgba(58,61,66,.11),-4px -4px 12px #fff,0 0 0 1px rgba(58,61,66,.04)}
.up-s{background:#fff;box-shadow:3px 3px 10px rgba(58,61,66,.13),-3px -3px 8px #fff,0 0 0 1px rgba(58,61,66,.04)}
.in{background:var(--soft);box-shadow:inset 3px 3px 8px rgba(58,61,66,.10),inset -3px -3px 8px rgba(255,255,255,.9)}
.dark{background:var(--acc);color:var(--ink);box-shadow:4px 6px 14px rgba(196,132,80,.35)}
button:active,a.up:active,a.up-s:active{transform:scale(.985)}
button:disabled{opacity:.45;cursor:default;transform:none}
:focus-visible{outline:2px solid var(--acc-d);outline-offset:2px}

.page{max-width:480px;margin:0 auto;min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;gap:20px;
  padding:24px 20px calc(20px + env(safe-area-inset-bottom))}
.hdr{display:flex;align-items:center;justify-content:space-between;gap:12px}
.brand{display:flex;align-items:center;gap:10px}
.logo{width:44px;height:44px;border-radius:15px;display:flex;align-items:center;justify-content:center;background:var(--acc)}
.brand b{font-size:17px;letter-spacing:-.5px}
.hr{display:flex;align-items:center;gap:10px}
.circ{width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center}
.chip{display:flex;align-items:center;gap:8px;padding:5px 14px 5px 5px;border-radius:999px;min-width:0}
.ava{width:34px;height:34px;border-radius:50%;background:var(--acc);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:14px;flex:none}
.chip span.t{display:flex;flex-direction:column;line-height:1.25;min-width:0}
.chip .u{font-size:13px;font-weight:600;max-width:110px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chip .d{font-size:12px;font-weight:700;white-space:nowrap}
h1.t{font-size:28px;line-height:1.15;font-weight:700}
.hl{background:linear-gradient(transparent 58%,var(--acc) 58%)}
.sub{font-size:14px;line-height:1.4}
.col{display:flex;flex-direction:column}
.g6{gap:6px}.g8{gap:8px}.g10{gap:10px}.g12{gap:12px}.g16{gap:16px}

.card{border-radius:28px;padding:20px;display:flex;flex-direction:column;gap:16px}
.spread{display:flex;align-items:center;justify-content:space-between;gap:10px}
.pill{display:flex;align-items:center;gap:8px;padding:6px 12px;border-radius:999px;background:var(--acc);font-size:12px;font-weight:600}
.pill i{width:7px;height:7px;border-radius:50%;background:var(--teal)}
.pill.off{background:rgba(58,61,66,.08)}.pill.off i{background:var(--acc-d)}
.big{display:flex;align-items:baseline;gap:10px}
.big b{font-size:52px;letter-spacing:-2px;line-height:1}
.big span{font-size:18px;font-weight:600}
.bar{height:10px;border-radius:999px;overflow:hidden}
.bar i{display:block;height:100%;border-radius:999px;background:var(--acc-d);transition:width .4s}
.small{font-size:12px;line-height:1.4}
.s13{font-size:13px}
.field{flex:1;min-width:0;height:48px;border-radius:16px;display:flex;align-items:center;padding:0 14px}
.field input{width:100%;background:transparent;border:0;outline:0;font-size:14px;height:100%}
.btn{height:48px;padding:0 20px;border-radius:999px;font-size:14px;font-weight:600;display:flex;align-items:center;justify-content:center;gap:8px;flex:none}
.btn.lg{height:54px;font-size:15px;width:100%}
.btn.s{font-weight:500}

.set{border-radius:22px;padding:14px 16px;display:flex;align-items:center;gap:14px;min-height:68px}
.ico{width:44px;height:44px;border-radius:14px;display:flex;align-items:center;justify-content:center;flex:none}
.sw{width:56px;height:32px;border-radius:999px;display:flex;align-items:center;padding:4px;background:rgba(58,61,66,.1);justify-content:flex-start;box-shadow:inset 2px 2px 5px rgba(58,61,66,.22);flex:none}
.sw[aria-pressed=true]{background:var(--acc);justify-content:flex-end}
.sw i{width:24px;height:24px;border-radius:50%;background:#fff;box-shadow:2px 2px 5px rgba(58,61,66,.25)}
.stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.tile{border-radius:24px;padding:16px;display:flex;flex-direction:column;gap:4px}
.tile b{font-size:30px;letter-spacing:-1px}
.tile b small{font-size:18px;font-weight:700}

.tabbar{margin-top:auto;position:sticky;bottom:calc(12px + env(safe-area-inset-bottom));border-radius:30px;padding:10px 12px;display:flex;justify-content:space-between;gap:6px}
.tab{flex:1;height:58px;border-radius:22px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;font-size:12px;font-weight:500}
.tab.on{font-weight:600}

.seg{display:flex;padding:5px;border-radius:999px;gap:4px}
.seg a{flex:1;height:46px;border-radius:999px;display:flex;align-items:center;justify-content:center;gap:8px;font-size:14px;font-weight:500}
.seg a.on{font-weight:700}
.seg a.on:before{content:"";width:8px;height:8px;border-radius:50%;background:var(--acc)}
.rowlink{display:flex;align-items:center;gap:14px;padding:12px 14px 12px 12px;border-radius:24px;min-height:72px}
.rowlink .ico{width:48px;height:48px;border-radius:16px}
.rowlink .tx{flex:1;display:flex;flex-direction:column;gap:2px;min-width:0}
.rowlink .tx b{font-size:15px;font-weight:600;line-height:1.25}
.badge{min-width:28px;height:28px;padding:0 10px;border-radius:999px;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;background:rgba(58,61,66,.08)}
.badge.on{background:var(--acc)}
.line{padding:10px 14px 10px 18px;min-height:62px;border-radius:22px;display:flex;align-items:center;gap:12px}
.line b{flex:1;font-size:15px;font-weight:600;line-height:1.25}
.title{display:flex;align-items:center;gap:14px}
.title .circ{width:46px;height:46px}
.title h1{font-size:22px;font-weight:700}
.counter{border-radius:18px;padding:12px 16px;display:flex;align-items:center;justify-content:space-between;gap:12px}
.model{display:flex;align-items:center;gap:14px;padding:8px 16px 8px 10px;border-radius:20px;text-align:left;min-height:56px;width:100%}
.model .dot{width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex:none;background:#fff;border:2px solid rgba(58,61,66,.35)}
.model.on .dot{background:var(--acc);border-color:var(--acc)}
.model .dot svg{opacity:0}.model.on .dot svg{opacity:1}
.model span.n{flex:1;font-size:15px;font-weight:500}.model.on span.n{font-weight:700}
.model span.st{font-size:12px;font-weight:600}
.mon{display:flex;align-items:center;gap:12px;padding:8px 8px 8px 18px;border-radius:22px;min-height:62px}
.mon .tx{flex:1;display:flex;flex-direction:column;gap:2px;min-width:0}
.pager{display:flex;align-items:center;justify-content:space-between;gap:12px}
.empty{border-radius:24px;padding:24px 20px;text-align:center;display:flex;flex-direction:column;gap:14px;align-items:center}

.urlrow{display:flex;align-items:center;gap:10px;padding:0 8px 0 16px;height:56px;border-radius:18px}
.urlrow input{flex:1;min-width:0;background:transparent;border:0;outline:0;font-size:14px;height:100%}
.tag{padding:4px 10px;border-radius:999px;font-size:12px;font-weight:600;flex:none}
.track{border-radius:26px;padding:16px;display:flex;flex-direction:column;gap:12px}
.track h3{font-size:16px;font-weight:600;line-height:1.3;overflow-wrap:anywhere}
.url{border-radius:12px;padding:8px 12px;overflow:hidden;font-size:12px;white-space:nowrap;text-overflow:ellipsis}
.price{font-size:22px;font-weight:700;letter-spacing:-.5px}
.cheap{display:flex;flex-direction:column;gap:2px;padding:10px 12px;border-radius:14px;background:rgba(58,61,66,.05)}
.st{padding:5px 12px;border-radius:999px;font-size:12px;font-weight:600;background:#fff;border:1px solid rgba(58,61,66,.3)}
.st.warn{background:rgba(58,61,66,.08);border-color:rgba(58,61,66,.08)}

details.up{border-radius:22px}
summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:12px;padding:14px 16px;min-height:58px}
summary::-webkit-details-marker{display:none}
summary b{flex:1;font-size:15px;font-weight:600;line-height:1.3}
.chev{width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex:none;transition:transform .2s}
details[open] .chev{transform:rotate(180deg)}
details .a{padding:0 16px 16px;font-size:14px;line-height:1.5}

.center{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;text-align:center;padding:24px;max-width:360px;margin:0 auto}
.spin{width:34px;height:34px;border-radius:50%;border:3px solid var(--soft);border-top-color:var(--acc-d);animation:r .8s linear infinite}
@keyframes r{to{transform:rotate(360deg)}}
#toast{position:fixed;left:50%;bottom:calc(96px + env(safe-area-inset-bottom));transform:translate(-50%,20px);max-width:calc(100% - 40px);
  background:var(--ink);color:#fff;padding:12px 18px;border-radius:16px;font-size:14px;line-height:1.35;opacity:0;pointer-events:none;transition:.25s;z-index:50;text-align:center}
#toast.show{opacity:1;transform:translate(-50%,0)}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}