/* ============ SANCHO Aurora Glass ============ Токены и компоненты перенесены из дизайна «SANCHO Aurora Glass.dc.html» (Claude Design handoff). Светлая/тёмная темы переключаются data-theme на . */ :root { --acc1: #58e8b6; --acc2: #31d6ae; --acc: #12a389; /* аврора · светлая */ --au-a: rgba(110, 231, 183, 0.5); --au-b: rgba(94, 234, 212, 0.4); --au-c: rgba(190, 242, 100, 0.24); --au-d: rgba(125, 211, 252, 0.28); --bg-grad-top: #f2faf6; --bg-grad-bottom: #e6f3ed; --text: #132321; --text-2: #566b67; --muted: #7b8f8a; --muted-2: #8da09b; --mono-strong: #28433c; --glass-bg: rgba(255, 255, 255, 0.6); --glass-border: rgba(255, 255, 255, 0.85); --glass-shadow: 0 16px 36px -18px rgba(23, 84, 68, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.9); --glass-blur: 22px; --glass-sat: 180%; --divider: rgba(16, 44, 37, 0.08); --chip-fg: #0b7f66; --chip-bg: rgba(20, 163, 137, 0.09); --chip-border: rgba(20, 163, 137, 0.18); --pill-bg: rgba(20, 163, 137, 0.06); --pill-border: rgba(20, 163, 137, 0.18); --mono-fg: #28433c; --btn2-bg: rgba(255, 255, 255, 0.5); --btn2-border: rgba(18, 163, 137, 0.32); --btn2-fg: #0b7f66; --radio-off: rgba(18, 163, 137, 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: #6b7f7a; --dead-bg: rgba(16, 44, 37, 0.06); --dead-border: rgba(16, 44, 37, 0.1); --dead-dot: #93a8a2; --amber-strong: #5a3d05; --amber-mid: #8a6b25; --amber-note: #8a5a1a; --amber-deep: #5c320a; --green-permo: #12a05f; --red: #cf3f4e; /* опасные действия/ошибки; без неё кнопка «Закрыть подписку» была белой */ --sheet-bg: rgba(255, 255, 255, 0.92); --sheet-border: rgba(255, 255, 255, 0.9); --grabber: rgba(16, 44, 37, 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(23, 84, 68, 0.26); --tab-inactive: #8da09b; --qr-shadow: 0 10px 24px -10px rgba(23, 84, 68, 0.34), inset 0 0 0 1px rgba(16, 44, 37, 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(20, 163, 137, 0.07); --info-border: rgba(20, 163, 137, 0.16); --info-icon-bg: rgba(20, 163, 137, 0.16); --info-icon-fg: #0f9a80; --info-text: #566b67; } :root[data-theme="dark"] { --acc1: #48e2ab; --acc2: #1cc4ad; --acc: #34d399; --au-a: rgba(52, 211, 153, 0.26); --au-b: rgba(16, 185, 129, 0.18); --au-c: rgba(13, 148, 136, 0.13); --au-d: rgba(4, 120, 87, 0.16); --bg-grad-top: #0b1120; --bg-grad-bottom: #080d1a; --text: #f4f7fb; --text-2: rgba(226, 232, 240, 0.85); --muted: rgba(148, 163, 184, 0.75); --muted-2: rgba(148, 163, 184, 0.75); --mono-strong: #e2e8f0; --glass-bg: rgba(148, 163, 184, 0.07); --glass-border: rgba(148, 163, 184, 0.16); --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(148, 163, 184, 0.12); --chip-fg: #7fe9c3; --chip-bg: rgba(148, 163, 184, 0.10); --chip-border: rgba(148, 163, 184, 0.22); --pill-bg: rgba(148, 163, 184, 0.08); --pill-border: rgba(148, 163, 184, 0.18); --mono-fg: #e2e8f0; --btn2-bg: rgba(52, 211, 153, 0.08); --btn2-border: rgba(52, 211, 153, 0.42); --btn2-fg: #34d399; --radio-off: rgba(148, 163, 184, 0.4); --plan-bg: rgba(148, 163, 184, 0.06); --plan-border: rgba(148, 163, 184, 0.14); --plan-sel-bg: rgba(52, 211, 153, 0.10); --icon-tile-bg: rgba(148, 163, 184, 0.09); --icon-tile-border: rgba(148, 163, 184, 0.14); --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: #b6c2d1; --dead-bg: rgba(148, 163, 184, 0.08); --dead-border: rgba(148, 163, 184, 0.14); --dead-dot: #7c8ba1; --amber-strong: #ffd9a8; --amber-mid: #e0af74; --amber-note: #e0af74; --amber-deep: #ffd0a8; --green-permo: #6ee0a8; --red: #ef5f6b; /* опасные действия/ошибки (тёмная тема) */ --sheet-bg: rgba(11, 17, 32, 0.92); --sheet-border: rgba(148, 163, 184, 0.14); --grabber: rgba(255, 255, 255, 0.2); --tab-bg: rgba(11, 17, 32, 0.72); --tab-border: rgba(148, 163, 184, 0.14); --tab-shadow: 0 -8px 22px -14px rgba(0, 0, 0, 0.6); --tab-inactive: #64748b; --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(148, 163, 184, 0.08); --info-border: rgba(148, 163, 184, 0.16); --info-icon-bg: rgba(52, 211, 153, 0.18); --info-icon-fg: #7fe9c3; --info-text: rgba(203, 213, 225, 0.8); } * { 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 { /* 14.08, решение владельца: системный шрифт (SF на iPhone, Roboto на Android) — как было до ребрендинга 04.08, клиентам он нравился больше. Manrope удалён совсем, вместе с файлами; на сайте он остаётся, там это фирменный шрифт. */ 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(180deg, var(--acc1), var(--acc2)); display: flex; align-items: center; justify-content: center; color: #fff; box-shadow: 0 5px 12px -3px rgba(20, 184, 166, 0.55), 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: 20px; font-weight: 850; letter-spacing: -0.025em; } .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(20, 166, 140, 0.4)); } .btn { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; height: 48px; border: 0; border-radius: 16px; font-size: 14.5px; font-weight: 750; font-family: inherit; cursor: pointer; /* текст на мятном градиенте тёмно-зелёный, как на сайте: белый на мяте не читается. Светящийся градиент (правка владельца 04.08) живёт в --acc1/--acc2 и ЕДИН для всех акцентных заливок: кнопки, активные чипы, вкладки админки, бейджи, графики */ /* 180° вместо 135°: на широкой низкой кнопке диагональ клала светлое пятно в угол, а верх-середина темнела (замечание владельца 04.08). Вертикальный градиент светлым краем вверх одинаков на кнопке ЛЮБОЙ ширины — «Выбрать» и «Написать менеджеру» больше не выглядят разноцветными */ background: linear-gradient(180deg, var(--acc1), var(--acc2)); color: #062b1f; box-shadow: 0 16px 30px -10px rgba(20, 184, 166, 0.5), 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: 48px; font-weight: 700; font-size: 14.5px; } .btn.ghost { background: transparent; color: var(--text-2); box-shadow: none; height: 48px; font-weight: 700; font-size: 14.5px; } .btn.small { height: 42px; border-radius: 13px; 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(20, 184, 166, 0.45); } .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(52, 211, 153, 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: #062b1f; background: linear-gradient(135deg, var(--acc1), var(--acc2)); padding: 3px 9px; border-radius: 999px; box-shadow: 0 6px 12px -4px rgba(20, 184, 166, 0.6); } /* фичи «что вы получаете» */ .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: 34px; 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; } .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: 25px; 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: 76px; height: 76px; 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(11, 17, 32, 0.985); } #confirm-modal .cm-title { font-size: 15px; font-weight: 800; letter-spacing: -0.01em; color: var(--text); text-align: center; } /* заголовок и пояснение — ОДИН блок: иначе к ним применялся ещё и gap:18px самого модала, и между строками зияла дыра в 24px (замечание владельца 11.08) */ #confirm-modal .cm-head { display: flex; flex-direction: column; gap: 5px; } #confirm-modal .cm-title + .cm-text { color: var(--text-2); font-weight: 500; } #confirm-modal .cm-text { font-size: 13.5px; 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: 48px; border-radius: 15px; font-size: 14.5px; } @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) } } /* ---------- Календарь (кастомный date-picker админки) ---------- */ .cal-overlay { position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(12, 10, 26, 0.5); opacity: 0; transition: opacity .16s ease; /* КРИТИЧНО: прозрачность НЕ отключает нажатия. Без этой строки оверлей, не успевший получить .show (Telegram сворачивает вебвью — requestAnimationFrame замирает), остаётся невидимым, но накрывает весь экран и глушит таббар. Ловили 31.07. */ pointer-events: none; } .cal-overlay.show { opacity: 1; pointer-events: auto; } .cal-card { width: 100%; max-width: 340px; border-radius: 24px; padding: 16px 16px 14px; 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); transform: scale(.94); transition: transform .18s cubic-bezier(.2, .9, .3, 1.05); } .cal-overlay.show .cal-card { transform: scale(1); } :root[data-theme="dark"] .cal-card { background: rgba(11, 17, 32, 0.985); } .cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; } .cal-title { font-size: 15.5px; font-weight: 800; color: var(--text); letter-spacing: -0.01em; } .cal-nav { width: 34px; height: 34px; border-radius: 11px; border: 0; cursor: pointer; background: var(--pill-bg); color: var(--acc1); font-size: 20px; line-height: 1; display: flex; align-items: center; justify-content: center; } .cal-nav:active { transform: scale(.92); } .cal-wd { display: grid; grid-template-columns: repeat(7, 1fr); margin-bottom: 4px; } .cal-wd span { text-align: center; font-size: 10.5px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; } .cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; } .cal-day { aspect-ratio: 1; border: 0; border-radius: 11px; cursor: pointer; background: transparent; color: var(--text); font-size: 14px; font-weight: 650; font-variant-numeric: tabular-nums; display: flex; align-items: center; justify-content: center; transition: background .12s; } .cal-day:active { transform: scale(.9); } .cal-day:hover { background: var(--pill-bg); } .cal-dim { color: var(--muted-2, var(--muted)); opacity: .45; } .cal-today { box-shadow: inset 0 0 0 1.5px var(--acc1); color: var(--acc1); } .cal-sel, .cal-sel:hover { background: linear-gradient(180deg, var(--acc1), var(--acc2)); color: #062b1f; box-shadow: none; } .cal-actions { display: flex; gap: 8px; margin-top: 12px; } /* Кастомный дропдаун (замена нативного