/* Мини-приложение Telegram (bigpapa.top/app/). Поверх site.css: те же шрифты и канон (без градиентов, без скруглений). Две темы токенами: тема ставится data-theme на . Раскладка 30.08 — ритм образца: 390×844 = несколько крупных блоков, поля 16, зазор 12. */ :root{--bg:#EDEAE4;--fg:#111;--surface:#E4E0D8;--muted:#655F55;--line:#111;--muted-inv:#A8A196} :root[data-theme="dark"]{--bg:#111;--fg:#EDEAE4;--surface:#1B1B1B;--muted:#A8A196;--line:#EDEAE4;--muted-inv:#655F55} html, body { background: var(--bg); color: var(--fg); } body { min-height: 100vh; font-family: var(--font-text); font-size: 15px; line-height: 1.4; } a { color: var(--fg); } ::selection { background: var(--fg); color: var(--bg); } :focus-visible { outline: 2px solid var(--fg); outline-offset: 2px; } .sprite { position: absolute; width: 0; height: 0; overflow: hidden; } [hidden] { display: none !important; } .screen, #app > section { width: 100%; max-width: 560px; margin: 0 auto; padding: 12px 16px 84px; } .screen { padding: 20px 16px 32px; } .screen-title { font-size: 28px; margin: 16px 0 12px; } p { margin: 0 0 10px; } p.last, .last { margin-bottom: 0; } .muted { color: var(--muted); font-size: 14px; } .notice { font-size: 14px; margin: 8px 0 0; } .notice:empty { display: none; } #app > section > .notice { margin: -4px 0 12px; } /* Иконки */ .ic { width: 22px; height: 22px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; } .ic-sm { width: 14px; height: 14px; } /* Логотип: чёрная плашка со срезанным углом + VPN. Тёмная тема — инверсия токенами. */ .plaque { display: inline-block; flex: 0 0 auto; background: var(--fg); color: var(--bg); clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 0 100%); padding: 8px 16px 8px 12px; font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: .08em; line-height: 1.5; } .plaque span { display: block; } .plaque-sm { clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 0 100%); padding: 4px 9px 4px 7px; font-size: 8px; line-height: 1.45; } .brand { display: inline-flex; align-items: center; gap: 10px; } .brand-vpn { font-family: var(--font-display); font-weight: 700; font-size: 44px; line-height: .9; letter-spacing: .02em; color: var(--fg); } .screen .brand { margin-bottom: 20px; } /* Заголовок вкладки: компактная плашка слева, чип справа */ .tab-head { display: flex; align-items: center; gap: 10px; min-height: 44px; margin: 0 0 12px; } .tab-title { flex: 1 1 auto; min-width: 0; font-family: var(--font-display); font-weight: 700; font-size: 20px; line-height: 1; text-transform: uppercase; letter-spacing: .01em; margin: 0; } /* Карточки */ .card { display: block; width: 100%; background: var(--surface); color: var(--fg); border: 1px solid var(--line); padding: 14px 16px; margin: 0 0 12px; min-width: 0; } .kicker { font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); margin: 0 0 8px; } #app > section > .kicker { margin: 4px 0 8px; } #app > section > .section-kicker { margin: 26px 0 8px; } #app > section > .tab-head + .section-kicker { margin-top: 4px; } /* Чипы-теги (статус, ID) */ .tag { display: inline-flex; align-items: center; gap: 7px; flex: 0 0 auto; border: 1px solid var(--line); background: var(--bg); color: var(--fg); padding: 6px 10px; font-size: 13px; font-weight: 600; line-height: 1.2; white-space: nowrap; } .tag-mono { font-family: var(--font-mono); font-weight: 400; letter-spacing: .04em; } .tag-btn { cursor: pointer; font: inherit; font-family: var(--font-mono); font-size: 13px; letter-spacing: .04em; } .tag-btn:hover { background: var(--fg); color: var(--bg); } .dot { width: 6px; height: 6px; background: var(--fg); flex: 0 0 auto; } .tags { display: flex; flex-wrap: wrap; gap: 8px; } /* Квадрат под иконку */ .sq { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 44px; height: 44px; } .sq-line { border: 1px solid var(--line); } .sq-inv { background: var(--bg); color: var(--fg); } .sq-fill { background: var(--bg); color: var(--fg); } /* Строка-кнопка: иконка · заголовок + подзаголовок · шеврон */ .row-btn { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 72px; background: var(--surface); color: var(--fg); border: 1px solid var(--line); padding: 12px 14px; margin: 0 0 12px; font: inherit; text-align: left; cursor: pointer; min-width: 0; } .row-btn.card { padding: 12px 14px; } .row-btn-ink { background: var(--fg); color: var(--bg); border-color: var(--fg); } .row-btn-ink .row-sub { color: var(--muted-inv); } .row-btn-center { justify-content: center; min-height: 64px; gap: 10px; } .row-btn-center .row-title { font-size: 18px; } .row-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .row-title { display: block; font-family: var(--font-display); font-weight: 700; font-size: 20px; line-height: 1.05; text-transform: uppercase; letter-spacing: .01em; overflow-wrap: anywhere; } .row-sub { display: block; font-size: 13px; color: var(--muted); line-height: 1.3; } .row-chevron { color: var(--fg); } /* Главная: шапка */ .head-card { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 72px; padding: 11px 16px; } /* Главная: подписка */ .sub-card { min-height: 176px; padding: 14px 16px 12px; display: flex; flex-direction: column; } .sub-top { flex: 1 1 auto; display: flex; align-items: center; justify-content: space-between; gap: 12px; } .sub-left { align-self: stretch; display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; gap: 8px; min-width: 0; } .sub-days { display: flex; align-items: baseline; gap: 6px; margin: 0; flex: 0 0 auto; } .sub-days-number { font-family: var(--font-display); font-weight: 700; font-size: 64px; line-height: 1; letter-spacing: -.01em; } .sub-days-word { font-size: 18px; color: var(--muted); } .sub-bottom { margin-top: 12px; } .progress { height: 6px; background: var(--bg); } .progress-fill { height: 100%; width: 0; background: var(--fg); } .sub-meta { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-top: 8px; font-size: 13px; font-weight: 600; min-height: 18px; } .sub-meta-used { flex: 1 1 auto; text-align: center; font-family: var(--font-mono); font-weight: 400; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); } .sub-meta-until { margin-left: auto; } /* Главная: плитки */ .tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 0 0 12px; } .tile { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 0; min-height: 156px; background: var(--surface); color: var(--fg); border: 1px solid var(--line); padding: 14px; font: inherit; text-align: left; cursor: pointer; min-width: 0; } .tile .sq { margin-bottom: auto; } .tile-big { display: block; font-family: var(--font-display); font-weight: 700; font-size: 36px; line-height: 1; text-transform: uppercase; letter-spacing: .01em; margin-top: 14px; } .tile-big-text { font-size: 24px; letter-spacing: 0; } .tile-of { font-size: 20px; color: var(--muted); text-transform: none; } .tile-label { display: block; font-size: 14px; color: var(--muted); margin-top: 4px; } .tile-chevron { position: absolute; right: 12px; bottom: 12px; } /* Главная: промокод */ .promo-card { padding: 10px 12px; } .promo-row { display: flex; align-items: center; gap: 10px; } input[type="text"].promo-input { flex: 1 1 auto; width: auto; min-width: 0; background: transparent; color: var(--fg); border: 0; border-radius: 0; padding: 10px 4px; font: inherit; font-size: 16px; } .promo-input::placeholder { color: var(--muted); opacity: 1; } .promo-card .notice { margin: 4px 0 2px 54px; } /* Кнопки: чёрная плита из site.css, в тёмной теме инверсия через токены */ .bp-btn { background: var(--fg); color: var(--bg); border-color: var(--fg); padding: 12px 16px; font-size: 13px; white-space: nowrap; } .bp-btn:hover { background: var(--bg); color: var(--fg); border-color: var(--fg); } .bp-btn.wide { display: block; width: 100%; text-align: center; margin: 0; white-space: normal; } .bp-btn.small { padding: 9px 12px; font-size: 12px; } .bp-btn:disabled { opacity: .4; pointer-events: none; } /* Поля */ .field { display: block; margin: 0 0 12px; } .field-row { display: flex; gap: 8px; align-items: center; min-width: 0; } .field-row > input, .field-row > span { flex: 1 1 auto; min-width: 0; } .field-row > .bp-btn { flex: 0 0 auto; } input[type="text"] { width: 100%; min-width: 0; background: var(--bg); color: var(--fg); border: 1px solid var(--line); border-radius: 0; padding: 10px 12px; font: inherit; font-family: var(--font-mono); font-size: 13px; } input[readonly] { text-overflow: ellipsis; } /* Тарифы */ .plans { display: flex; flex-direction: column; gap: 8px; margin: 0 0 12px; } .plan { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 8px; background: var(--bg); color: var(--fg); border: 1px solid var(--line); padding: 10px 14px; font: inherit; text-align: left; cursor: pointer; } .plan[aria-pressed="true"] { background: var(--fg); color: var(--bg); } .plan[aria-pressed="true"] .muted { color: var(--muted-inv); } .plan-name { font-weight: 600; display: block; } .plan-price { font-family: var(--font-display); font-weight: 700; font-size: 22px; white-space: nowrap; } .plan-save { display: block; font-size: 13px; } /* Установка: одностраничное подключение */ #connect { --install-rule: color-mix(in srgb, var(--fg) 18%, var(--bg)); --go: #1B8555; --go-hover: #17774C; } #connect .title-row { margin-top: 12px; } #connect h1 { margin: 0; font: 700 clamp(32px, 9.6vw, 40px)/1 var(--font-display); letter-spacing: .005em; text-transform: uppercase; } #connect .status { display: flex; align-items: baseline; gap: 9px; margin: 12px 0 0; color: var(--muted); font-size: 13px; line-height: 1.4; } #connect .status::before { content: ''; flex: none; width: 6px; height: 6px; background: var(--go); transform: translateY(-1px); } #connect .panel { background: var(--surface); border: 1px solid var(--install-rule); } #connect .row { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 58px; padding: 0 12px; } #connect .row + .row, #connect .panel-note { border-top: 1px solid var(--install-rule); } #connect .label { font: 400 11px/1 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); } #connect .value { display: inline-flex; align-items: center; gap: 9px; font-weight: 600; font-size: 15px; } #connect .value svg { width: 10px; height: 6px; flex: none; } #connect .row select { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; font-size: 16px; cursor: pointer; } #connect .row:focus-within { outline: 2px solid var(--fg); outline-offset: -2px; } #connect .chips { display: flex; gap: 6px; flex: none; } #connect .chip { color: inherit; font-family: inherit; display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 8px 0 6px; border: 1px solid var(--fg); border-radius: 0; background: transparent; font-weight: 600; font-size: 14px; cursor: pointer; transition: background-color .18s cubic-bezier(.2, .8, .2, 1), color .18s cubic-bezier(.2, .8, .2, 1); } #connect .chip img { display: block; width: 26px; height: 26px; flex: none; } #connect .chip[aria-selected="true"] { background: var(--fg); color: var(--bg); } #connect .panel-note { margin: 0; padding: 12px 16px 13px; color: var(--muted); font-size: 13px; line-height: 1.45; } #connect .setup { margin-top: 22px; } #connect .cta { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; height: 60px; padding: 0 20px; border: 0; border-radius: 0; background: var(--go); color: #FFFFFF; text-decoration: none; cursor: pointer; font: 700 18px/1 var(--font-display); letter-spacing: .045em; text-transform: uppercase; transition: transform .12s cubic-bezier(.2, .8, .2, 1), background-color .18s cubic-bezier(.2, .8, .2, 1); } #connect .cta svg { width: 20px; height: 12px; flex: none; transition: transform .22s cubic-bezier(.2, .8, .2, 1); } #connect .cta:active { transform: scale(.985); } @media (hover: hover) { #connect .cta:hover { background: var(--go-hover); } #connect .cta:hover svg { transform: translateX(4px); } } #connect .cta-top { margin-top: 12px; } #connect .cta-note { margin: 10px 0 0; color: var(--muted); font-size: 13px; line-height: 1.45; } #connect .guide { margin-top: 32px; } #connect .guide-head { display: flex; align-items: center; min-height: 44px; padding: 0 16px; border-bottom: 1px solid var(--install-rule); } #connect .steps { margin: 0; padding: 0; list-style: none; } #connect .step { display: grid; grid-template-columns: 36px minmax(0, 1fr); padding: 16px 14px 18px 16px; } #connect .step + .step { border-top: 1px solid var(--install-rule); } #connect .n { font: 700 30px/1 var(--font-display); } #connect .step[data-go] .n { color: var(--go); } #connect .step h2 { margin: 0; padding-top: 5px; font: 700 18px/1.15 var(--font-display); letter-spacing: .02em; text-transform: uppercase; text-wrap: balance; } #connect #store-note { margin-top: 10px; font-size: 13px; } #connect .step p { margin: 6px 0 0; color: var(--muted); font-size: 14px; line-height: 1.45; text-wrap: pretty; } #connect .stores { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; } #connect .store { cursor: pointer; font-family: inherit; color: inherit; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 7px 13px; line-height: 1.25; border: 1px solid var(--fg); border-radius: 0; background: var(--bg); text-decoration: none; font-weight: 600; font-size: 14px; transition: background-color .18s cubic-bezier(.2, .8, .2, 1), color .18s cubic-bezier(.2, .8, .2, 1); } #connect .store.has-icon { padding-left: 9px; } #connect .store img { display: block; width: 24px; height: 24px; flex: none; } #connect .store svg { width: 10px; height: 10px; flex: none; margin-left: 2px; } #connect .store:active { background: var(--fg); color: var(--bg); } @media (hover: hover) { #connect .store:hover { background: var(--fg); color: var(--bg); } } #connect summary { list-style: none; cursor: pointer; } #connect summary::-webkit-details-marker { display: none; } #connect .chev { width: 9px; height: 6px; flex: none; transition: transform .2s cubic-bezier(.2, .8, .2, 1); } #connect details[open] > summary .chev { transform: rotate(180deg); } #connect details.more { margin-top: 10px; } #connect details.more summary { display: inline-flex; align-items: center; gap: 8px; min-height: 32px; color: var(--muted); font-size: 13px; } #connect .alt { margin-top: 20px; } #connect .alt summary { display: inline-flex; align-items: center; gap: 9px; min-height: 44px; font-weight: 600; font-size: 14px; } #connect .alt-body { padding: 14px 16px 16px; background: var(--surface); border: 1px solid var(--install-rule); } #connect .alt input { display: block; font: 400 12px/1.5 var(--font-mono); overflow-wrap: anywhere; } #connect .ghost { color: inherit; font-family: inherit; display: inline-flex; align-items: center; height: 44px; margin-top: 12px; padding: 0 15px; border: 1px solid var(--fg); border-radius: 0; background: var(--bg); font-weight: 600; font-size: 14px; cursor: pointer; } #connect .tv h3 { margin: 12px 0 6px; font-weight: 600; font-size: 14px; line-height: 1.4; } #connect .tv ol { margin: 0; padding: 0; list-style: none; counter-reset: tv; color: var(--muted); font-size: 14px; line-height: 1.45; } #connect .tv li { position: relative; padding: 2px 0 2px 22px; counter-increment: tv; } #connect .tv li::before { content: counter(tv); position: absolute; left: 0; top: 5px; font: 400 11px/1.4 var(--font-mono); color: var(--fg); } #connect .cta:disabled, #connect .ghost:disabled { opacity: .4; pointer-events: none; } @media (max-width: 359px) { #connect .row { padding: 0 10px; } #connect .chip { gap: 6px; padding-right: 6px; } } /* Друг */ .hero-card { padding: 24px 16px 22px; } .hero-number { font-family: var(--font-display); font-weight: 700; font-size: 64px; line-height: 1; text-transform: uppercase; letter-spacing: -.01em; margin: 2px 0 10px; } .counters { display: grid; grid-template-columns: 1fr 1fr; padding: 0; } .counter { padding: 24px 12px 22px; text-align: center; min-width: 0; } .counter + .counter { border-left: 1px solid var(--line); } .counter-number { display: block; font-family: var(--font-display); font-weight: 700; font-size: 44px; line-height: 1; } .counter-label { display: block; font-size: 13px; color: var(--muted); margin-top: 4px; } /* Профиль */ .profile-name { font-family: var(--font-display); font-weight: 700; font-size: 28px; line-height: 1; text-transform: none; margin: 0 0 10px; overflow-wrap: anywhere; } .stats { display: grid; grid-template-columns: repeat(3, 1fr); padding: 0; } .stat { padding: 14px 6px 12px; text-align: center; min-width: 0; } .stat + .stat { border-left: 1px solid var(--line); } .stat-number { display: block; font-family: var(--font-display); font-weight: 700; font-size: 30px; line-height: 1; overflow-wrap: anywhere; } .stat-label { display: block; font-size: 12px; color: var(--muted); margin-top: 4px; } .list-card { padding: 0; } .acc { display: block; } .acc-row { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 56px; padding: 10px 14px; background: transparent; color: var(--fg); border: 0; border-radius: 0; font: inherit; text-align: left; cursor: pointer; list-style: none; min-width: 0; } .acc-row::-webkit-details-marker { display: none; } .acc-row .row-title { font-size: 17px; } .acc-row .row-sub { font-size: 12px; } .acc + .acc, .acc + .acc-row, .acc-row + .acc { border-top: 1px solid var(--line); } .acc[open] > .acc-row .row-chevron { transform: rotate(180deg); } .acc-body { padding: 0 14px 12px; } .list { display: flex; flex-direction: column; gap: 8px; } .list-row { display: flex; justify-content: space-between; align-items: center; gap: 8px; border: 1px solid var(--line); background: var(--bg); padding: 10px 12px; min-width: 0; } .list-row > div { min-width: 0; overflow-wrap: anywhere; } .list-title { font-weight: 600; } .list-row .tag { font-size: 11px; padding: 4px 8px; } /* Нижняя навигация: 64 px, иконка + подпись */ .tabbar { position: fixed; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: repeat(4, 1fr); background: var(--bg); border-top: 1px solid var(--line); padding-bottom: env(safe-area-inset-bottom); z-index: 10; } .tabbar button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; height: 64px; background: var(--bg); color: var(--muted); border: 0; border-radius: 0; padding: 0 4px; font: inherit; font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: .06em; cursor: pointer; min-width: 0; } .tabbar button span { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .tabbar button.is-active { background: var(--fg); color: var(--bg); } @media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } } /* ===== Чёрная тема BigPapa (23.09.2026, утверждена владельцем по макету) ===== Слой поверх прежних правил: только вид. Разметка, id и логика app.js не меняются. Обе темы Telegram получают одну тёмную палитру — бренд чёрный. */ :root,:root[data-theme="dark"]{--bg:#060606;--fg:#EDEAE4;--surface:#0D0D0E;--muted:#8E887E;--line:rgba(237,234,228,.14);--muted-inv:#4B4740;--r:18px} html,body{background:var(--bg);color:var(--fg)} .card,.sub-card,.hero-card,.head-card,.list-card,.promo-card,.row-btn,.tile,.stats,.counters,.acc,.plan, #connect .panel,#connect .guide,#connect .setup,#connect .alt,#connect details.more{ border-radius:var(--r);border-color:var(--line);overflow:hidden} .card,.sub-card,.hero-card,.head-card,.list-card,.promo-card,.row-btn,.tile,.stats,.counters,.acc,#connect .panel,#connect .guide{background:var(--surface)} .plan{border-radius:14px} .plan[aria-pressed="true"]{background:var(--fg);color:var(--bg)} .bp-btn,.tag-btn,#connect .cta,#connect .ghost,#connect .store,#connect .chip,.field-row > .bp-btn{border-radius:999px} input[type="text"],.field-row > input,.promo-input,#connect .row select,input[readonly]{border-radius:999px} .row-btn-ink{background:var(--fg);color:var(--bg)} .sq,.sq-fill,.sq-inv,.sq-line{border-radius:12px} .progress{border-radius:4px;overflow:hidden} .progress-fill{border-radius:4px} .tag,.tag-mono{border-radius:999px} .tabbar{left:12px;right:12px;bottom:calc(10px + env(safe-area-inset-bottom, 0px));width:auto;margin:0 auto;max-width:536px; padding:5px;border:1px solid var(--line);border-radius:999px;background:rgba(13,13,14,.92); -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)} .tabbar button{border-radius:999px} .tabbar button.is-active{background:var(--fg);color:var(--bg)} /* Логотип BIG PAPA [VPN] в кривых вместо плашки */ .bp-logo{display:block;height:24px;width:auto;aspect-ratio:6185/756;color:var(--fg);--cut:var(--bg)} .bp-logo-sm{height:16px} /* ===== Главная и установка по утверждённому макету (23.09.2026) ===== */ .hero-status{position:relative;min-height:212px;padding:16px 16px 26px;display:block;background:radial-gradient(90% 70% at 85% 100%,rgba(237,234,228,.07),transparent 70%),var(--surface)} .hero-status::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(90deg,var(--surface) 30%,rgba(13,13,14,.4) 55%,transparent 72%)} .hero-globe{position:absolute;right:-110px;top:92px;width:300px;height:auto;opacity:.95;pointer-events:none} .hero-papa{position:absolute;right:-6px;bottom:0;height:188px;width:auto;max-width:none;z-index:1;pointer-events:none; -webkit-mask-image:linear-gradient(to bottom,#000 72%,transparent);mask-image:linear-gradient(to bottom,#000 72%,transparent)} .hero-in{position:relative;z-index:2;display:flex;flex-direction:column;align-items:flex-start;gap:10px;max-width:none} .hero-hello{margin:0;font-size:15px;font-weight:600} .hero-status .tag-status{border-radius:999px;border:1px solid var(--line);background:rgba(6,6,6,.7)} .hero-status .sub-days{display:flex;align-items:flex-end;gap:8px;margin:18px 0 0} .hero-status .sub-days-number{font-family:var(--font-display);font-weight:700;font-size:64px;line-height:.8} .hero-status .sub-days-word{font-family:var(--font-mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--bone-dim,#C8C3B9);padding-bottom:3px;line-height:1.35} .hero-status .sub-days-word::after{content:"осталось";display:block} .hero-status .tag-status{font-family:var(--font-mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;padding:6px 12px} .plan-was{display:block;font-size:12px} .hero-meta{margin:0;font-size:13px;color:var(--muted)} .hero-meta .sub-meta-until[hidden] + .hero-sep{display:none} .hero-status .progress{position:absolute;left:16px;right:16px;bottom:12px;z-index:2;height:3px;margin:0} .hero-status .sub-meta-start,.hero-status .sub-meta-used{display:none!important} #renew-toggle{justify-content:center;min-height:52px;border-radius:999px;background:var(--fg);color:var(--bg);padding:0 20px} #renew-toggle .sq,#renew-toggle .row-sub{display:none} #renew-toggle .row-text{align-items:center} #renew-toggle .row-title{font-family:var(--font-mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase} .dev-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px} .dev-info{display:flex;flex-direction:column;align-items:flex-start;gap:3px;background:none;border:0;padding:0;color:var(--fg);text-align:left;cursor:pointer;font:inherit} .dev-row .row-title{font-family:var(--font-text);font-weight:500;font-size:15px;text-transform:none;letter-spacing:0} .dev-row .row-sub{font-size:13px;color:var(--muted)} .pill-line{background:transparent;color:var(--fg);border:1px solid var(--line);border-radius:999px;height:36px;padding:0 14px;font-family:var(--font-mono);font-size:10.5px;letter-spacing:.12em} .promo-in{margin:12px 0} .promo-in .promo-row{display:flex;gap:8px;align-items:center} #connect label.row{display:none} #connect .row-chips{flex-direction:column;align-items:flex-start;gap:10px} #connect .row-chips .chips,#connect .row .chips{flex-wrap:wrap} #device-chips .chip{background:transparent;color:var(--muted);border:1px solid var(--line)} #device-chips .chip[aria-selected="true"]{background:transparent;border-color:var(--fg);color:var(--fg)} /* Друг, профиль, нижняя панель — ближе к макету 23.09 */ section[data-tab="friend"] > .tab-head,section[data-tab="profile"] > .tab-head,#connect .title-row h1{display:none} #connect .title-row{margin:0 0 10px} section[data-tab="profile"] > .kicker{display:none} .row-title,.acc-row .row-title,.list-title{font-family:var(--font-text);font-weight:500;font-size:15px;text-transform:none;letter-spacing:0} .row-sub{font-size:12.5px;color:var(--muted)} .hero-card{text-align:center;padding:22px 16px} .hero-card .kicker{display:block} .hero-number{justify-content:center} #ref-bot-copy,#ref-site-copy{height:34px;padding:0 12px;font-size:9.5px;letter-spacing:.1em;background:transparent;color:var(--fg);border:1px solid var(--line)} #ref-share{justify-content:center;border-radius:999px;min-height:48px} #ref-share .row-title{font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase} #revoke-all{border-radius:999px;justify-content:center} #revoke-all .sq,#revoke-all .row-sub{display:none} #revoke-all .row-title{font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)} .tabbar button .ic{display:none} .tabbar button{min-height:40px} .tabbar button span{font-family:var(--font-text);font-size:12px;letter-spacing:0;text-transform:none} .hero-status .tag-status .dot{width:6px;height:6px;border-radius:50%;background:var(--fg)} .tabbar{padding:4px;gap:2px} .tabbar button{height:44px;min-height:0;padding:0 4px;border-radius:999px;background:transparent} .tabbar button.is-active{background:var(--fg);color:var(--bg)} /* Масштаб главной — как на утверждённом снимке (макет рисовался в телефоне 285 px) */ .hero-status{min-height:240px;padding:20px 20px 30px} .hero-hello{font-size:19px} .hero-status .tag-status{font-size:11px;padding:8px 14px} .hero-status .sub-days{margin-top:40px} .hero-status .sub-days-number{font-size:78px} .hero-status .sub-days-word{font-size:11.5px} .hero-meta{font-size:15px} .hero-status .progress{left:20px;right:20px;bottom:16px;height:4px} .hero-globe{right:-120px;top:110px;width:320px} #renew-toggle{min-height:62px} #renew-toggle .row-title{font-size:14px;letter-spacing:.16em} .dev-row{padding:20px} .dev-row .row-title{font-size:18px} .dev-row .row-sub{font-size:16px;margin-top:2px} #home-friend .row-title{font-size:18px} #home-friend .row-sub{font-size:16px} #home-friend{padding:20px} .pill-line{height:46px;padding:0 18px;font-size:12px;letter-spacing:.14em} .tabbar button{height:50px} .tabbar button span{font-size:15px} /* Установка: подписи над кнопками, выбранное — обводкой (одинаково для устройства и приложения) */ #connect .row-chips{flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:12px;padding:16px 14px} #connect .row-chips .chips{flex-wrap:wrap;gap:8px} #connect .chip,#device-chips .chip{background:transparent;color:var(--muted);border:1px solid var(--line);height:42px;padding:0 14px} #connect #app-chips .chip{padding:0 14px 0 6px} #connect .chip[aria-selected="true"],#device-chips .chip[aria-selected="true"]{background:transparent;color:var(--fg);border-color:var(--fg)} .hero-globe{aspect-ratio:1} .hero-status{overflow:clip} #app > section{padding-bottom:calc(96px + env(safe-area-inset-bottom, 0px))} #connect .setup{overflow:visible;border-radius:0} /* Иконки приложений одного вида: у INCY скругление и поля внутри картинки (56 из 64 px), иконка Happ залита до краёв квадратом — уменьшаем до того же размера и скругляем так же. */ #app-chips [data-app="happ"] img,#connect .store[data-app="happ"] img{transform:scale(.875);border-radius:22%} /* Выбор пути к подписке (Яндекс CDN / прямой) дольше 0,3 с: вместо стрелки — кольцо, кнопка не бледнеет. */ #connect .cta.is-busy, #connect .ghost.is-busy { opacity: 1; } #connect .cta.is-busy svg { display: none; } #connect .cta.is-busy::after, #connect .ghost.is-busy::after { content: ""; width: 18px; height: 18px; flex: none; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: bp-spin .7s linear infinite; } @keyframes bp-spin { to { transform: rotate(360deg); } } @keyframes bp-pulse { 50% { opacity: .35; } } @media (prefers-reduced-motion: reduce) { #connect .cta.is-busy::after, #connect .ghost.is-busy::after { animation: bp-pulse 1.2s ease-in-out infinite; } } /* Нет подписки (замечание владельца 24.09): вместо числа дней — «Нет»; гигантским шрифтом числа это громоздко. Слово и карточка компактнее; у активной подписки ничего не меняется. */ .hero-status.is-inactive{min-height:0;padding-bottom:20px} .hero-status.is-inactive .sub-days{margin-top:18px} .hero-status.is-inactive .sub-days-number{font-size:40px;line-height:1} .hero-status.is-inactive .hero-globe{top:28px;width:230px;right:-90px}