/* Colors are fixed on purpose, not sourced from --tg-theme-* variables: Telegram overrides those with the user's dark-mode palette, which made this warm pink/peach design turn black for dark-mode users. We always want the same warm look regardless of the viewer's Telegram theme. */ :root { --bg: #fff6f4; --text: #4a2a3a; --hint: #a8899a; --button-text: #ffffff; --card-bg: #ffffff; --rose: #ff7a94; --rose-deep: #e8547a; --peach: #ffb199; --lavender: #c9a7f2; --gold: #ffd27f; --accent: var(--rose-deep); --accent-soft: #ffe3e9; --sunset: linear-gradient(135deg, #ffb199 0%, #ff7a94 45%, #d888e6 100%); --sunset-soft: linear-gradient(135deg, #fff0eb 0%, #ffe3e9 55%, #f3e6fb 100%); --radius: 22px; --radius-lg: 28px; } /* Calmer white/blue theme for male (partner-viewer) accounts — same structure, different palette, applied via data-theme on . */ body[data-theme="male"] { --bg: #f4f8fd; --text: #223047; --hint: #7c8aa3; --card-bg: #ffffff; --rose: #5b9dff; --rose-deep: #2f6fed; --peach: #8ec5ff; --lavender: #a7c4f2; --gold: #7fc4ff; --accent: var(--rose-deep); --accent-soft: #e4eefd; --sunset: linear-gradient(135deg, #8ec5ff 0%, #5b9dff 45%, #7a8ff0 100%); --sunset-soft: linear-gradient(135deg, #eef5ff 0%, #e4eefd 55%, #eceafd 100%); } * { box-sizing: border-box; -webkit-tap-highlight-color: transparent; } html, body { margin: 0; padding: 0; background: var(--bg); color: var(--text); font-family: Tahoma, "Segoe UI", Arial, sans-serif; } body { background-image: radial-gradient(circle at 15% 8%, rgba(255, 178, 153, 0.35), transparent 40%), radial-gradient(circle at 90% 4%, rgba(201, 167, 242, 0.3), transparent 38%); background-attachment: fixed; } #app { min-height: 100vh; display: flex; flex-direction: column; padding-bottom: 90px; } #app[hidden] { display: none; } /* ---------- Hero ---------- */ .hero { background: var(--sunset); border-radius: 0 0 var(--radius-lg) var(--radius-lg); padding: 22px 20px 30px; color: #fff; position: relative; overflow: hidden; box-shadow: 0 10px 26px rgba(232, 84, 122, 0.28); } .hero::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 85% -10%, rgba(255,255,255,0.35), transparent 55%); pointer-events: none; } .hero-top { display: flex; align-items: center; justify-content: space-between; position: relative; z-index: 1; } .hero-top h1 { font-size: 19px; margin: 0; font-weight: 700; } .hero-sub { margin: 2px 0 0; font-size: 13px; opacity: 0.9; } .chip { background: rgba(255, 255, 255, 0.28); backdrop-filter: blur(4px); color: #fff; padding: 7px 14px; border-radius: 999px; font-size: 12.5px; font-weight: 700; } .ring-wrap { position: relative; z-index: 1; display: flex; justify-content: center; margin-top: 18px; } .ring-center { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; } .ring-emoji { font-size: 30px; line-height: 1; } .ring-day { font-size: 12px; margin-top: 4px; opacity: 0.95; font-weight: 600; } .hero-countdown { text-align: center; margin-top: 14px; font-size: 13.5px; font-weight: 600; position: relative; z-index: 1; opacity: 0.97; } /* ---------- Layout ---------- */ main { padding: 18px 16px 16px; flex: 1; } .view { display: none; } .view.active { display: block; animation: fadeIn .25s ease; } @keyframes fadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } } .card { background: var(--card-bg); border-radius: var(--radius); padding: 18px; margin-bottom: 14px; box-shadow: 0 4px 18px rgba(232, 84, 122, 0.08); border: 1px solid #ffeef2; } .card h2 { font-size: 16px; margin: 0 0 12px; } .status-loading { color: var(--hint); text-align: center; padding: 20px 0; } /* ---------- Warm note / tip card ---------- */ .tip-card { background: var(--sunset-soft); border: none; position: relative; padding-right: 50px; } .tip-heart { position: absolute; top: 16px; left: 16px; font-size: 20px; } .tip-label { font-weight: 800; color: var(--rose-deep); margin-bottom: 6px; font-size: 13px; } .tip-text { line-height: 1.9; font-size: 14.5px; } .warm-note { margin-top: 10px; padding-top: 10px; border-top: 1px dashed rgba(232, 84, 122, 0.25); font-size: 13.5px; font-style: italic; color: var(--rose-deep); } /* ---------- Buttons ---------- */ .btn-row { display: flex; gap: 10px; margin-bottom: 14px; } .btn { flex: 1; border: none; border-radius: 999px; padding: 15px 10px; font-family: inherit; font-size: 15px; font-weight: 700; cursor: pointer; transition: transform .12s ease, box-shadow .12s ease; } .btn:active { transform: scale(0.96); } .btn-primary { background: var(--sunset); color: #fff; box-shadow: 0 8px 18px rgba(232, 84, 122, 0.32); } .btn-secondary { background: var(--accent-soft); color: var(--rose-deep); } .btn-undo[hidden] { display: none; } .btn-undo { display: block; width: 100%; background: none; border: none; color: var(--hint); font-family: inherit; font-size: 13px; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; padding: 4px 0 16px; cursor: pointer; } .btn-undo:active { opacity: 0.6; } /* ---------- History ---------- */ .history-list { list-style: none; margin: 0; padding: 0; } .history-list li { padding: 13px 4px; border-bottom: 1px solid #fbe6ea; display: flex; align-items: center; gap: 10px; font-size: 14px; } .history-list li:last-child { border-bottom: none; } .hist-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--sunset); flex-shrink: 0; } .hist-date { flex: 1; font-weight: 600; } .history-list .hist-len { color: var(--hint); font-size: 13px; } .hist-del { background: none; border: none; font-size: 15px; cursor: pointer; opacity: 0.6; padding: 4px; } .hist-del:active { opacity: 1; } /* ---------- Partner / invite ---------- */ .partner-linked { background: var(--sunset-soft); border-radius: var(--radius); padding: 16px; text-align: center; font-size: 14.5px; } .invite-code { font-size: 30px; font-weight: 800; letter-spacing: 6px; text-align: center; background: var(--sunset-soft); color: var(--rose-deep); border-radius: 16px; padding: 18px; margin: 12px 0; } .input { width: 100%; padding: 13px 14px; border-radius: 14px; border: 1px solid #ffe3e9; background: #fff9fa; font-family: inherit; font-size: 15px; margin-bottom: 12px; color: var(--text); } .input:focus { outline: none; border-color: var(--rose); } label { font-size: 13px; color: var(--hint); display: block; margin-bottom: 6px; font-weight: 600; } .msg { font-size: 13px; margin-top: 8px; min-height: 16px; font-weight: 600; } .msg.error { color: #d3455f; } .msg.success { color: #2a9d5c; } /* ---------- Tabbar ---------- */ .tabbar { position: fixed; bottom: 12px; left: 12px; right: 12px; display: flex; background: rgba(255, 255, 255, 0.92); backdrop-filter: blur(10px); border-radius: 999px; padding: 8px 6px; box-shadow: 0 8px 24px rgba(232, 84, 122, 0.18); } .tab[hidden] { display: none; } .tab { flex: 1; background: none; border: none; display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 18px; padding: 7px 0; border-radius: 999px; color: var(--hint); cursor: pointer; transition: background .15s ease, color .15s ease; } .tab span { font-size: 10.5px; font-weight: 600; } .tab.active { color: #fff; background: var(--sunset); } /* ---------- Gender gate ---------- */ .gender-gate { position: fixed; inset: 0; background: var(--sunset, linear-gradient(135deg, #ffb199 0%, #ff7a94 45%, #d888e6 100%)); display: flex; align-items: center; justify-content: center; padding: 24px; z-index: 50; } .gender-gate[hidden] { display: none; } .gender-card { background: #fff; border-radius: var(--radius-lg); padding: 32px 24px; text-align: center; max-width: 340px; width: 100%; box-shadow: 0 12px 30px rgba(0, 0, 0, 0.15); } .gender-emoji { font-size: 40px; margin-bottom: 8px; } .gender-card h1 { font-size: 19px; margin: 0 0 4px; } .gender-card p { color: var(--hint, #a8899a); margin: 0 0 20px; font-size: 14px; } .gender-btn { display: block; width: 100%; margin-bottom: 10px; }