/* ============ SANCHO Aurora Glass ============ Токены и компоненты перенесены из дизайна «SANCHO Aurora Glass.dc.html» (Claude Design handoff). Светлая/тёмная темы переключаются data-theme на . */ :root { --acc1: #8a6bff; --acc2: #6a46f2; --acc: #7a5cfa; /* аврора · светлая */ --au-a: rgba(151, 110, 255, 0.6); --au-b: rgba(96, 150, 255, 0.46); --au-c: rgba(255, 138, 214, 0.32); --au-d: rgba(120, 224, 255, 0.3); --bg-grad-top: #f4f1fe; --bg-grad-bottom: #eae6fb; --text: #171235; --text-2: #6c6690; --muted: #8b87ac; --muted-2: #9a96bc; --mono-strong: #3a3466; --glass-bg: rgba(255, 255, 255, 0.6); --glass-border: rgba(255, 255, 255, 0.85); --glass-shadow: 0 16px 36px -18px rgba(76, 54, 145, 0.36), inset 0 1px 0 rgba(255, 255, 255, 0.9); --glass-blur: 22px; --glass-sat: 180%; --divider: rgba(23, 18, 53, 0.07); --chip-fg: #5b4bd6; --chip-bg: rgba(122, 92, 250, 0.1); --chip-border: rgba(122, 92, 250, 0.18); --pill-bg: rgba(122, 92, 250, 0.06); --pill-border: rgba(122, 92, 250, 0.18); --mono-fg: #3a3466; --btn2-bg: rgba(255, 255, 255, 0.5); --btn2-border: rgba(122, 92, 250, 0.28); --btn2-fg: #5b4bd6; --radio-off: rgba(122, 92, 250, 0.35); --plan-bg: rgba(255, 255, 255, 0.5); --plan-border: rgba(255, 255, 255, 0.8); --plan-sel-bg: rgba(255, 255, 255, 0.75); --icon-tile-bg: rgba(255, 255, 255, 0.5); --icon-tile-border: rgba(255, 255, 255, 0.75); --ok-fg: #0d7a48; --ok-bg: rgba(18, 160, 95, 0.1); --ok-border: rgba(18, 160, 95, 0.25); --ok-dot: #12a05f; --wait-fg: #9a6a00; --wait-bg: rgba(255, 190, 90, 0.24); --wait-border: rgba(240, 175, 80, 0.5); --wait-dot: #e79600; --part-fg: #b4520c; --part-bg: rgba(255, 150, 80, 0.24); --part-border: rgba(240, 130, 60, 0.5); --part-dot: #e5680f; --dead-fg: #6a6690; --dead-bg: rgba(23, 18, 53, 0.06); --dead-border: rgba(23, 18, 53, 0.1); --dead-dot: #9a96bc; --amber-strong: #5a3d05; --amber-mid: #8a6b25; --amber-note: #8a5a1a; --amber-deep: #5c320a; --green-permo: #12a05f; --sheet-bg: rgba(255, 255, 255, 0.92); --sheet-border: rgba(255, 255, 255, 0.9); --grabber: rgba(23, 18, 53, 0.16); --tab-bg: rgba(255, 255, 255, 0.62); --tab-border: rgba(255, 255, 255, 0.75); --tab-shadow: 0 -8px 22px -14px rgba(76, 54, 145, 0.3); --tab-inactive: #9a96bc; --qr-shadow: 0 10px 24px -10px rgba(76, 54, 145, 0.42), inset 0 0 0 1px rgba(23, 18, 53, 0.05); --banner-order-bg: linear-gradient(135deg, rgba(255, 212, 145, 0.55), rgba(255, 186, 116, 0.36)); --banner-order-border: rgba(240, 175, 95, 0.6); --banner-order-shadow: 0 12px 26px -16px rgba(190, 120, 20, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.75); --banner-part-bg: linear-gradient(140deg, rgba(255, 185, 120, 0.44), rgba(255, 150, 95, 0.32)); --banner-part-border: rgba(240, 150, 75, 0.6); --info-bg: rgba(122, 92, 250, 0.07); --info-border: rgba(122, 92, 250, 0.16); --info-icon-bg: rgba(122, 92, 250, 0.16); --info-icon-fg: #6a46f2; --info-text: #5f5a82; } :root[data-theme="dark"] { --au-a: rgba(140, 94, 255, 0.55); --au-b: rgba(54, 106, 255, 0.44); --au-c: rgba(216, 60, 168, 0.34); --au-d: rgba(38, 170, 226, 0.3); --bg-grad-top: #0c0a1a; --bg-grad-bottom: #07060e; --text: #f3f1ff; --text-2: #b4b0ce; --muted: #807ba6; --muted-2: #807ba6; --mono-strong: #dcd8f7; --glass-bg: rgba(255, 255, 255, 0.055); --glass-border: rgba(255, 255, 255, 0.12); --glass-shadow: 0 18px 40px -20px rgba(0, 0, 0, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.08); --glass-sat: 160%; --divider: rgba(255, 255, 255, 0.08); --chip-fg: #c3b3ff; --chip-bg: rgba(138, 107, 255, 0.16); --chip-border: rgba(138, 107, 255, 0.3); --pill-bg: rgba(138, 107, 255, 0.12); --pill-border: rgba(138, 107, 255, 0.28); --mono-fg: #dcd8f7; --btn2-bg: rgba(255, 255, 255, 0.05); --btn2-border: rgba(138, 107, 255, 0.32); --btn2-fg: #c3b3ff; --radio-off: rgba(138, 107, 255, 0.45); --plan-bg: rgba(255, 255, 255, 0.05); --plan-border: rgba(255, 255, 255, 0.12); --plan-sel-bg: rgba(138, 107, 255, 0.14); --icon-tile-bg: rgba(255, 255, 255, 0.06); --icon-tile-border: rgba(255, 255, 255, 0.1); --ok-fg: #6ee0a8; --ok-bg: rgba(18, 160, 95, 0.16); --ok-border: rgba(40, 200, 131, 0.34); --ok-dot: #28c883; --wait-fg: #f0c07a; --wait-bg: rgba(255, 180, 90, 0.16); --wait-border: rgba(240, 170, 90, 0.32); --wait-dot: #f0a63d; --part-fg: #f0a366; --part-bg: rgba(255, 150, 80, 0.16); --part-border: rgba(240, 130, 60, 0.34); --part-dot: #f07a2e; --dead-fg: #b4b0ce; --dead-bg: rgba(255, 255, 255, 0.06); --dead-border: rgba(255, 255, 255, 0.12); --dead-dot: #807ba6; --amber-strong: #ffd9a8; --amber-mid: #e0af74; --amber-note: #e0af74; --amber-deep: #ffd0a8; --green-permo: #6ee0a8; --sheet-bg: rgba(22, 19, 42, 0.92); --sheet-border: rgba(255, 255, 255, 0.1); --grabber: rgba(255, 255, 255, 0.2); --tab-bg: rgba(255, 255, 255, 0.05); --tab-border: rgba(255, 255, 255, 0.1); --tab-shadow: 0 -8px 22px -14px rgba(0, 0, 0, 0.6); --tab-inactive: #8b87b0; --qr-shadow: 0 12px 28px -10px rgba(0, 0, 0, 0.6); --banner-order-bg: linear-gradient(135deg, rgba(255, 182, 110, 0.2), rgba(255, 150, 90, 0.12)); --banner-order-border: rgba(240, 170, 90, 0.32); --banner-order-shadow: 0 12px 26px -18px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.08); --banner-part-bg: linear-gradient(140deg, rgba(255, 170, 100, 0.22), rgba(255, 130, 80, 0.12)); --banner-part-border: rgba(240, 140, 70, 0.38); --info-bg: rgba(138, 107, 255, 0.12); --info-border: rgba(138, 107, 255, 0.24); --info-icon-bg: rgba(138, 107, 255, 0.25); --info-icon-fg: #c3b3ff; --info-text: #b4b0ce; } * { box-sizing: border-box; margin: 0; } html { height: 100%; } body { min-height: 100%; } :root { /* системные отступы: берём больший из iOS safe-area и переменной Telegram */ --safe-b: max(env(safe-area-inset-bottom, 0px), var(--tg-safe-area-inset-bottom, 0px)); --safe-t: max(env(safe-area-inset-top, 0px), var(--tg-content-safe-area-inset-top, 0px)); --tabbar-h: calc(64px + var(--safe-b)); --header-h: 52px; } body { font-family: -apple-system, 'SF Pro Display', 'SF Pro Text', system-ui, 'Segoe UI', Roboto, sans-serif; -webkit-font-smoothing: antialiased; color: var(--text); /* контент не прячется под фикс-хедером сверху и таббаром снизу */ padding-top: calc(var(--header-h) + var(--safe-t)); padding-bottom: calc(var(--tabbar-h) + 28px); background: var(--bg-grad-bottom); } /* верхний хедер: логотип SANCHO + контекстный заголовок экрана + «назад» */ #tgheader { position: fixed; top: 0; left: 0; right: 0; z-index: 15; max-width: 480px; margin: 0 auto; height: calc(var(--header-h) + var(--safe-t)); padding: var(--safe-t) 14px 0; display: flex; align-items: center; justify-content: space-between; background: var(--tab-bg); -webkit-backdrop-filter: blur(20px) saturate(var(--glass-sat)); backdrop-filter: blur(20px) saturate(var(--glass-sat)); border-bottom: 1px solid var(--divider); } #tgheader .lead { display: flex; align-items: center; gap: 8px; min-width: 64px; z-index: 2; } #tgheader .back { font-size: 26px; line-height: 1; color: var(--text-2); font-weight: 300; margin-top: -3px; cursor: pointer; background: none; border: 0; padding: 0; font-family: inherit; } #tgheader .logo { width: 34px; height: 34px; flex: 0 0 auto; border-radius: 11px; background: linear-gradient(140deg, #8a6bff, #6a46f2); display: flex; align-items: center; justify-content: center; color: #fff; box-shadow: 0 5px 12px -3px rgba(122, 92, 250, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.4); } #tgheader .ttl { position: absolute; left: 50%; transform: translateX(-50%); text-align: center; padding-top: var(--safe-t); } #tgheader .ttl .t { font-size: 15px; font-weight: 700; color: var(--text); letter-spacing: -0.01em; white-space: nowrap; } #tgheader .ttl .s { font-size: 10.5px; color: var(--muted); margin-top: 1px; } #tgheader .actions { display: flex; align-items: center; gap: 8px; z-index: 2; } #tgheader .actions button { width: 30px; height: 30px; flex: 0 0 auto; border-radius: 50%; background: var(--btn2-bg); border: 1px solid var(--tab-border); display: flex; align-items: center; justify-content: center; color: var(--text-2); font-size: 15px; line-height: 1; cursor: pointer; font-family: inherit; padding: 0; } /* аврора-фон */ #aurora { position: fixed; inset: 0; z-index: -1; background: radial-gradient(90% 58% at 4% -10%, var(--au-a), transparent 55%), radial-gradient(86% 58% at 108% -2%, var(--au-b), transparent 55%), radial-gradient(94% 70% at 104% 106%, var(--au-c), transparent 60%), radial-gradient(96% 72% at -8% 108%, var(--au-d), transparent 60%), linear-gradient(180deg, var(--bg-grad-top), var(--bg-grad-bottom)); } a { color: var(--acc); text-decoration: none; } #screen { padding: 14px 16px 20px; max-width: 480px; margin: 0 auto; display: flex; flex-direction: column; gap: 13px; } .h-hero { font-size: 26px; font-weight: 850; letter-spacing: -0.025em; } .h-sub { font-size: 13.5px; color: var(--text-2); margin-top: 4px; } .sec-label { font-size: 11.5px; font-weight: 750; color: var(--muted-2); text-transform: uppercase; letter-spacing: 0.06em; padding: 2px 2px 0; } .glass { padding: 15px; border-radius: 24px; background: var(--glass-bg); -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat)); backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat)); border: 1px solid var(--glass-border); box-shadow: var(--glass-shadow); } .divider { height: 1px; background: var(--divider); } .chip { display: inline-flex; align-items: center; white-space: nowrap; font-size: 11px; font-weight: 650; line-height: 1; color: var(--chip-fg); background: var(--chip-bg); border: 1px solid var(--chip-border); padding: 5px 10px; border-radius: 999px; } .icon-tile { flex: 0 0 auto; border-radius: 17px; background: var(--icon-tile-bg); border: 1px solid var(--icon-tile-border); display: flex; align-items: center; justify-content: center; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5); } .icon-tile img { object-fit: contain; filter: drop-shadow(0 6px 11px rgba(122, 92, 250, 0.45)); } .btn { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; height: 56px; border: 0; border-radius: 16px; font-size: 15.5px; font-weight: 750; font-family: inherit; cursor: pointer; background: linear-gradient(135deg, var(--acc1), var(--acc2)); color: #fff; box-shadow: 0 16px 30px -10px rgba(122, 92, 250, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.35); } .btn:disabled { opacity: 0.62; cursor: default; } .btn.secondary { background: var(--btn2-bg); border: 1px solid var(--btn2-border); color: var(--btn2-fg); box-shadow: none; height: 56px; font-weight: 700; font-size: 15px; } .btn.ghost { background: transparent; color: var(--text-2); box-shadow: none; height: 52px; font-weight: 700; font-size: 14.5px; } .btn.small { height: 44px; border-radius: 14px; font-size: 14px; } .badge-status { display: inline-flex; align-items: center; gap: 7px; width: fit-content; font-size: 12.5px; font-weight: 700; padding: 6px 12px; border-radius: 999px; } .badge-status .dot { width: 7px; height: 7px; border-radius: 50%; } .b-wait { color: var(--wait-fg); background: var(--wait-bg); border: 1px solid var(--wait-border); } .b-wait .dot { background: var(--wait-dot); box-shadow: 0 0 0 3px rgba(231, 150, 0, 0.2); } .b-part { color: var(--part-fg); background: var(--part-bg); border: 1px solid var(--part-border); } .b-part .dot { background: var(--part-dot); box-shadow: 0 0 0 3px rgba(229, 104, 15, 0.2); } .b-ok { color: var(--ok-fg); background: var(--ok-bg); border: 1px solid var(--ok-border); } .b-ok .dot { background: var(--ok-dot); } .b-dead { color: var(--dead-fg); background: var(--dead-bg); border: 1px solid var(--dead-border); } .b-dead .dot { background: var(--dead-dot); } .badge-mini { font-size: 11px; font-weight: 700; padding: 4px 9px; border-radius: 999px; flex: 0 0 auto; } /* карточка-баннер активной заявки */ .order-banner { display: flex; align-items: center; gap: 12px; padding: 12px 13px; border-radius: 20px; background: var(--banner-order-bg); border: 1px solid var(--banner-order-border); box-shadow: var(--banner-order-shadow); cursor: pointer; } .order-banner .ico { width: 42px; height: 42px; flex: 0 0 auto; border-radius: 13px; background: rgba(255, 255, 255, 0.35); display: flex; align-items: center; justify-content: center; font-size: 20px; } .order-banner b.title { display: block; font-size: 13.5px; font-weight: 750; color: var(--amber-strong); } .order-banner .meta { font-size: 11.5px; color: var(--amber-mid); margin-top: 2px; } .order-banner .chev { color: var(--amber-mid); font-size: 24px; font-weight: 300; } /* планы */ .plan { display: flex; align-items: center; gap: 13px; padding: 14px; border-radius: 20px; background: var(--plan-bg); border: 1.5px solid var(--plan-border); cursor: pointer; position: relative; } .plan.selected { background: var(--plan-sel-bg); border: 2px solid var(--acc1); box-shadow: 0 14px 28px -14px rgba(122, 92, 250, 0.5); } .plan .radio { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--radio-off); flex: 0 0 auto; display: flex; align-items: center; justify-content: center; } .plan.selected .radio { border-color: var(--acc1); } .plan.selected .radio::after { content: ""; width: 11px; height: 11px; border-radius: 50%; background: var(--acc1); box-shadow: 0 0 8px rgba(138, 107, 255, 0.7); } .plan .p-title { font-size: 15px; font-weight: 750; } .plan .p-sub { font-size: 11.5px; color: var(--muted); margin-top: 1px; } .plan .p-price { font-size: 17px; font-weight: 850; text-align: right; } .plan .p-permo { font-size: 11px; color: var(--green-permo); font-weight: 700; margin-top: 1px; text-align: right; } .save-badge { position: absolute; top: -9px; right: 16px; font-size: 10px; font-weight: 750; color: #fff; background: linear-gradient(135deg, var(--acc1), var(--acc2)); padding: 3px 9px; border-radius: 999px; box-shadow: 0 6px 12px -4px rgba(122, 92, 250, 0.7); } /* фичи «что вы получаете» */ .feature { display: flex; gap: 11px; align-items: flex-start; } .feature .check { width: 26px; height: 26px; flex: 0 0 auto; border-radius: 9px; margin-top: 1px; background: var(--chip-bg); display: flex; align-items: center; justify-content: center; color: var(--acc); font-weight: 800; } .feature b { display: block; font-size: 13.5px; font-weight: 700; } .feature span { font-size: 12px; color: var(--text-2); line-height: 1.35; margin-top: 1px; display: block; } /* оплата */ .timer-card { text-align: center; padding: 17px; } .timer-card .cap { font-size: 11px; font-weight: 750; letter-spacing: 0.07em; text-transform: uppercase; color: var(--muted-2); } .timer-card .time { font-size: 42px; font-weight: 850; letter-spacing: 0.01em; font-variant-numeric: tabular-nums; margin-top: 3px; line-height: 1; } .progress { height: 6px; border-radius: 3px; background: var(--chip-bg); margin-top: 14px; overflow: hidden; } .progress > div { height: 100%; border-radius: 3px; background: linear-gradient(90deg, var(--acc1), var(--acc2)); } .copy-pill { display: flex; align-items: center; gap: 10px; padding: 12px; border-radius: 14px; background: var(--pill-bg); border: 1px solid var(--pill-border); cursor: pointer; } .copy-pill .val { flex: 1; min-width: 0; font-family: 'SF Mono', ui-monospace, 'Roboto Mono', Menlo, monospace; font-size: 12.5px; font-weight: 600; color: var(--mono-fg); word-break: break-all; line-height: 1.45; } .copy-pill .cico { flex: 0 0 auto; color: var(--acc); display: flex; flex-direction: column; align-items: center; gap: 2px; } .copy-pill .cico span { font-size: 9px; font-weight: 700; } .kv-label { flex: 0 0 auto; font-size: 10.5px; font-weight: 700; color: var(--muted); width: 52px; } .qr-box { display: flex; justify-content: center; padding: 4px 0 0; } .qr-box > div { padding: 12px; border-radius: 18px; background: #fff; box-shadow: var(--qr-shadow); } .qr-box img { width: 148px; height: 148px; display: block; } .memo-warn { display: flex; flex-direction: column; gap: 8px; padding: 12px; border-radius: 14px; background: var(--part-bg); border: 1px solid var(--part-border); } .info-banner { display: flex; gap: 10px; padding: 12px 13px; border-radius: 16px; background: var(--info-bg); border: 1px solid var(--info-border); } .info-banner .i { flex: 0 0 auto; width: 20px; height: 20px; border-radius: 50%; background: var(--info-icon-bg); color: var(--info-icon-fg); font-size: 12px; font-weight: 800; display: flex; align-items: center; justify-content: center; } .info-banner p { font-size: 11.5px; line-height: 1.42; color: var(--info-text); } /* частичная оплата: стеклянная карточка в общем стиле, янтарь — только акцент (метка/процент/прогресс), суммы — обычным цветом текста, не «жжёным» */ .partial-banner { padding: 15px 16px; border-radius: 22px; background: var(--glass-bg); -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat)); backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat)); border: 1px solid var(--part-border); box-shadow: var(--glass-shadow); } .partial-banner .cap { display: flex; align-items: center; gap: 7px; font-size: 11.5px; font-weight: 750; color: var(--part-fg); text-transform: uppercase; letter-spacing: 0.05em; } .partial-banner .cap::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--part-dot); box-shadow: 0 0 8px var(--part-dot); } .partial-banner .pct { font-size: 12.5px; font-weight: 800; color: var(--part-fg); font-variant-numeric: tabular-nums; } .partial-banner .got { font-size: 30px; font-weight: 850; color: var(--text); letter-spacing: -0.015em; line-height: 1; font-variant-numeric: tabular-nums; } .partial-banner .of { font-size: 14.5px; font-weight: 700; color: var(--text-2); } /* width/max-width сбрасываем явно: глобальный .bar чарта админки задаёт max-width 18px */ .partial-banner .bar { width: 100%; max-width: none; height: 7px; border-radius: 4px; background: var(--part-bg); margin-top: 12px; overflow: hidden; } .partial-banner .bar > div { min-height: 0; } .partial-banner .bar > div { height: 100%; border-radius: 4px; background: linear-gradient(90deg, #f2a93b, #f07a2e); box-shadow: 0 0 10px rgba(240, 130, 50, 0.45); } .partial-banner .note { font-size: 12.5px; color: var(--text-2); margin-top: 11px; line-height: 1.45; } .partial-banner .note b { color: var(--part-fg); } .amber-note-banner { display: flex; gap: 11px; padding: 14px; border-radius: 20px; background: var(--wait-bg); border: 1px solid var(--wait-border); } .amber-note-banner .i { flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%; background: rgba(229, 150, 0, 0.2); color: var(--wait-fg); font-size: 13px; font-weight: 800; display: flex; align-items: center; justify-content: center; } .amber-note-banner p { font-size: 12px; line-height: 1.45; color: var(--amber-note); } .amber-note-banner b { color: var(--amber-deep); } /* успех */ .success-circle { width: 82px; height: 82px; margin: 0 auto; border-radius: 50%; background: linear-gradient(140deg, #28c883, #0f9d58); display: flex; align-items: center; justify-content: center; box-shadow: 0 20px 42px -12px rgba(18, 160, 95, 0.65), inset 0 2px 0 rgba(255, 255, 255, 0.45); color: #fff; font-size: 40px; } /* сеть · bottom sheet */ #sheet-overlay { position: fixed; inset: 0; background: rgba(12, 10, 26, 0.45); z-index: 20; } /* модал-подтверждение — в стиле мини-аппа (не нативный диалог Telegram) */ #confirm-overlay { position: fixed; inset: 0; background: rgba(12, 10, 26, 0.5); z-index: 40; animation: cm-fade .16s ease; } #confirm-modal { position: fixed; left: 22px; right: 22px; top: 50%; transform: translateY(-50%); max-width: 360px; margin: 0 auto; z-index: 41; /* почти непрозрачный фон: читаемость не зависит от backdrop-filter (в вебвью он слабоват); blur добавляет «мороза» там, где поддерживается */ border-radius: 24px; background: rgba(255, 255, 255, 0.985); -webkit-backdrop-filter: blur(30px) saturate(var(--glass-sat)); backdrop-filter: blur(30px) saturate(var(--glass-sat)); border: 1px solid var(--sheet-border); box-shadow: 0 26px 64px -20px rgba(30, 20, 70, 0.55); padding: 24px 20px 18px; display: flex; flex-direction: column; gap: 18px; animation: cm-pop .2s cubic-bezier(.2, .9, .3, 1.05); } :root[data-theme="dark"] #confirm-modal { background: rgba(26, 22, 50, 0.985); } #confirm-modal .cm-text { font-size: 15px; line-height: 1.45; color: var(--text); font-weight: 600; text-align: center; } #confirm-modal .cm-actions { display: flex; gap: 10px; } #confirm-modal .cm-actions .btn { flex: 1; height: 50px; border-radius: 15px; font-size: 15px; } @keyframes cm-fade { from { opacity: 0 } to { opacity: 1 } } @keyframes cm-pop { from { opacity: 0; transform: translateY(-50%) scale(.93) } to { opacity: 1; transform: translateY(-50%) scale(1) } } #sheet { position: fixed; left: 0; right: 0; bottom: 0; z-index: 21; max-width: 480px; margin: 0 auto; border-radius: 30px 30px 0 0; background: var(--sheet-bg); -webkit-backdrop-filter: blur(30px) saturate(var(--glass-sat)); backdrop-filter: blur(30px) saturate(var(--glass-sat)); border-top: 1px solid var(--sheet-border); box-shadow: 0 -22px 54px -22px rgba(30, 20, 70, 0.5); padding: 10px 16px calc(20px + var(--safe-b)); display: flex; flex-direction: column; gap: 10px; max-height: 86vh; overflow: hidden; } /* заголовок и низ (баннер + кнопка) не сжимаются и остаются на месте — скроллится только список сетей */ #sheet > * { flex-shrink: 0; } /* список сетей — единственная скроллящаяся зона; кнопка «Подтвердить» всегда видна снизу */ #sheet .net-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; display: flex; flex-direction: column; gap: 10px; margin: 0 -4px; padding: 0 4px; } #sheet .sheet-foot { display: flex; flex-direction: column; gap: 10px; padding-top: 2px; } #sheet .grabber { width: 38px; height: 5px; border-radius: 3px; background: var(--grabber); margin: 2px auto 4px; flex: 0 0 auto; } #sheet h3 { font-size: 18px; font-weight: 850; letter-spacing: -0.015em; } #sheet .close { width: 30px; height: 30px; border-radius: 50%; background: var(--dead-bg); display: flex; align-items: center; justify-content: center; color: var(--text-2); font-size: 15px; cursor: pointer; } .net-row { display: flex; align-items: center; gap: 12px; padding: 12px 13px; border-radius: 16px; background: var(--plan-bg); border: 1.5px solid var(--plan-border); cursor: pointer; } .net-row.selected { background: var(--chip-bg); border: 1.5px solid var(--acc1); box-shadow: 0 10px 22px -14px rgba(122, 92, 250, 0.5); } .net-row .n-ico { width: 34px; height: 34px; flex: 0 0 auto; border-radius: 50%; object-fit: contain; background: #fff; } .net-row .n-ico.n-ico-eth { padding: 4px; } .net-row .n-title { font-size: 14px; font-weight: 750; } .net-row .n-sub { font-size: 11px; color: var(--muted); margin-top: 1px; } .net-row .radio { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--radio-off); flex: 0 0 auto; display: flex; align-items: center; justify-content: center; } .net-row.selected .radio { border-color: var(--acc1); } .net-row.selected .radio::after { content: ""; width: 11px; height: 11px; border-radius: 50%; background: var(--acc1); box-shadow: 0 0 8px rgba(138, 107, 255, 0.7); } /* профиль: сводка + аккордеон подписок */ .subs-count { display: flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 700; color: var(--chip-fg); background: var(--chip-bg); border: 1px solid var(--chip-border); padding: 3px 10px; border-radius: 999px; } .subs-list { display: flex; flex-direction: column; border-radius: 22px; overflow: hidden; background: var(--glass-bg); -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat)); backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat)); border: 1px solid var(--glass-border); box-shadow: var(--glass-shadow); } .sub-item + .sub-item { border-top: 1px solid var(--divider); } .sub-head { display: flex; align-items: center; gap: 12px; padding: 13px 15px; cursor: pointer; } .sub-head img { width: 38px; height: 38px; flex: 0 0 auto; object-fit: contain; filter: drop-shadow(0 4px 8px rgba(122,92,250,0.35)); } .sub-head img.pending { opacity: 0.7; } .sub-head .s-title { font-size: 14px; font-weight: 750; letter-spacing: -0.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sub-head .s-sub { font-size: 11.5px; color: var(--muted); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sub-head .chev { flex: 0 0 auto; color: var(--muted-2); display: flex; transition: transform .2s; } .sub-item.open .sub-head .chev { transform: rotate(180deg); } .sub-body { display: none; padding: 0 15px 14px; flex-direction: column; gap: 8px; } .sub-item.open .sub-body { display: flex; } .sub-body .divider { margin-bottom: 2px; } .sub-body .copy-pill { padding: 9px 11px; border-radius: 12px; } .sub-body .copy-pill .val { font-size: 12.5px; } .sub-actions { display: flex; gap: 8px; margin-top: 2px; } .sub-actions .btn { height: 42px; border-radius: 13px; font-size: 13.5px; white-space: nowrap; min-width: 0; } /* история */ .hist-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 0; border-bottom: 1px solid var(--divider); } .hist-row:last-child { border-bottom: 0; } .hist-row .t { font-size: 13.5px; font-weight: 700; } .hist-row .d { font-size: 11px; color: var(--muted-2); margin-top: 2px; } /* faq */ .faq-card { border-radius: 18px; background: var(--glass-bg); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); border: 1px solid var(--glass-border); overflow: hidden; } .faq-q { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 15px; cursor: pointer; font-size: 13.5px; font-weight: 700; } .faq-q > span { flex: 1; min-width: 0; } .faq-q .pm { flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%; background: var(--chip-bg); display: flex; align-items: center; justify-content: center; color: var(--acc); font-size: 12px; font-weight: 800; } .faq-a { padding: 0 15px 15px; font-size: 12.5px; line-height: 1.5; color: var(--text-2); } .res-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .res-item { display: flex; align-items: center; gap: 10px; padding: 13px; border-radius: 16px; background: var(--glass-bg); border: 1px solid var(--glass-border); font-size: 13px; font-weight: 700; color: var(--text); } .res-item .r-ico { width: 34px; height: 34px; flex: 0 0 auto; border-radius: 11px; display: flex; align-items: center; justify-content: center; } /* таббар */ #tabbar { position: fixed; bottom: 0; left: 0; right: 0; z-index: 10; display: flex; align-items: flex-start; justify-content: space-around; height: var(--tabbar-h); padding: 8px 14px calc(4px + var(--safe-b)); background: var(--tab-bg); -webkit-backdrop-filter: blur(20px) saturate(var(--glass-sat)); backdrop-filter: blur(20px) saturate(var(--glass-sat)); border-top: 1px solid var(--tab-border); box-shadow: var(--tab-shadow); } .tab { display: flex; flex-direction: column; align-items: center; gap: 4px; border: 0; background: none; cursor: pointer; font-family: inherit; color: var(--tab-inactive); font-size: 10px; font-weight: 600; letter-spacing: 0.01em; flex: 1; } .tab.active { color: var(--acc); } .tab svg { display: block; } #toast[hidden] { display: none; } #toast { position: fixed; left: 50%; bottom: calc(var(--tabbar-h) + 18px); transform: translateX(-50%); z-index: 30; background: rgba(18, 14, 40, 0.92); color: #fff; padding: 11px 20px; border-radius: 14px; font-size: 14px; font-weight: 650; box-shadow: 0 18px 44px -12px rgba(0, 0, 0, 0.5); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); display: flex; align-items: center; gap: 8px; max-width: 88vw; text-align: center; } /* админка */ .admin-tabs { display: flex; gap: 6px; background: var(--plan-bg); border: 1px solid var(--plan-border); border-radius: 14px; padding: 4px; } .admin-tabs button { flex: 1; border: 0; border-radius: 11px; padding: 9px 0; cursor: pointer; font-family: inherit; font-size: 12.5px; font-weight: 700; color: var(--text-2); background: transparent; } .admin-tabs button.on { color: #fff; background: linear-gradient(135deg, var(--acc1), var(--acc2)); box-shadow: 0 8px 18px -8px rgba(122, 92, 250, 0.6); } .adm-input { flex: 1; min-width: 0; padding: 11px 12px; border-radius: 12px; border: 1.5px solid var(--plan-border); background: var(--plan-bg); color: var(--text); font-size: 14px; font-family: inherit; } .adm-input:focus { outline: none; border-color: var(--acc1); } select.adm-input { -webkit-appearance: none; appearance: none; padding-right: 38px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%239a96bc' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; } .switch { width: 48px; height: 28px; border-radius: 999px; background: var(--plan-border); border: 1px solid var(--divider); position: relative; cursor: pointer; flex: 0 0 auto; padding: 0; transition: background .2s; } .switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.35); transition: transform .2s; } .switch.on { background: linear-gradient(135deg, var(--acc1), var(--acc2)); border-color: transparent; } .switch.on::after { transform: translateX(20px); } .chip-btn { border: 1px solid var(--plan-border); background: var(--plan-bg); color: var(--text-2); border-radius: 999px; padding: 6px 12px; font-size: 12px; font-weight: 700; cursor: pointer; font-family: inherit; } .chip-btn.on { color: #fff; background: linear-gradient(135deg, var(--acc1), var(--acc2)); border-color: transparent; } .chart { display: flex; align-items: flex-end; gap: 4px; height: 110px; } .bar-col { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 4px; } .bar { width: 100%; max-width: 18px; border-radius: 4px 4px 0 0; background: linear-gradient(180deg, var(--acc1), var(--acc2)); min-height: 2px; } .bar-lbl { font-size: 9px; color: var(--muted); } /* сегмент выбора темы */ .theme-seg { display: flex; gap: 6px; background: var(--plan-bg); border: 1px solid var(--plan-border); border-radius: 14px; padding: 4px; } .theme-seg button { flex: 1; border: 0; border-radius: 11px; padding: 9px 0; cursor: pointer; font-family: inherit; font-size: 13px; font-weight: 700; color: var(--text-2); background: transparent; } .theme-seg button.on { color: #fff; background: linear-gradient(135deg, var(--acc1), var(--acc2)); box-shadow: 0 8px 18px -8px rgba(122, 92, 250, 0.6); } /* анимированные эмодзи (Lottie/WebM вместо статичных символов) */ .tg-anim { display: inline-block; width: 1.25em; height: 1.25em; vertical-align: -0.25em; overflow: hidden; } .tg-anim svg, .tg-anim video, .tg-anim img { width: 100%; height: 100%; display: block; } /* именованные эмодзи (waiting, медали тарифов) — контейнер с fallback-символом */ .named-emoji { display: inline-flex; align-items: center; line-height: 1; } .named-emoji .tg-anim { width: 1.15em; height: 1.15em; vertical-align: middle; } .order-banner .ico .named-emoji .tg-anim { width: 1.3em; height: 1.3em; } .badge-status .named-emoji { margin-right: -1px; } .row { display: flex; justify-content: space-between; align-items: center; gap: 10px; } .muted { color: var(--muted); font-size: 11.5px; } .center { text-align: center; }