/* ============================================================ 卡片日語 · Design Tokens + Styles 纸质书气质 · 暖纸色底 · 墨色分级 · 朱印强调 ============================================================ */ :root { /* ---- Paper / Surface ---- */ --paper: #f5f2ec; --paper-deep: #edeae4; --paper-warm: #faf7f1; --card: #ffffff; --card-tint: #fbf9f4; /* ---- Ink（墨色 5 档）---- */ --ink-0: #1a1815; --ink-1: #2a2a2a; --ink-2: #5a5752; --ink-3: #8a867f; --ink-4: #b8b3a9; --ink-line: rgba(26,24,21,0.08); --ink-rule: rgba(26,24,21,0.15); /* ---- Accent（朱印）---- */ --vermilion: #c8423a; --vermilion-soft: #e8a19a; --vermilion-ink: #9a2e27; --seal-bg: rgba(200,66,58,0.08); /* ---- Semantic ---- */ --save: #3a8a5c; --skip: #aaa5a0; --danger: #b05640; --gold: #b88b4a; /* ---- Typography ---- */ --font-serif: "Source Han Serif SC", "Noto Serif SC", "Songti SC", "STSong", serif; --font-serif-jp: "Hiragino Mincho ProN", "Yu Mincho", "Source Han Serif JP", "Noto Serif JP", serif; --font-sans: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans", "Noto Sans JP", "Noto Sans SC", system-ui, sans-serif; --font-body: var(--font-serif); --font-ui: var(--font-sans); --fs-xs: 12px; --fs-sm: 13px; --fs-base: 17px; --fs-md: 17px; --fs-lg: 20px; --fs-xl: 24px; --fs-2xl: 32px; --lh-body: 2.1; --lh-ui: 1.5; /* ---- Space ---- */ --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px; --s-7: 32px; --s-8: 40px; /* ---- Radius ---- */ --r-sm: 4px; --r: 14px; --r-lg: 20px; --r-pill: 999px; /* ---- Shadow ---- */ --shadow-sm: 0 1px 2px rgba(26,24,21,0.05); --shadow: 0 1px 3px rgba(26,24,21,0.06), 0 4px 14px rgba(26,24,21,0.04); --shadow-lg: 0 4px 16px rgba(26,24,21,0.08), 0 24px 48px rgba(26,24,21,0.10); /* ---- Layout ---- */ --app-max: 500px; --safe-b: env(safe-area-inset-bottom); /* ---- Motion ---- */ --ease: cubic-bezier(.2,.7,.3,1); --dur-quick: .15s; --dur-base: .25s; } @media (prefers-color-scheme: dark) { :root { --paper: #1a1a1c; --paper-deep: #141416; --paper-warm: #222224; --card: #2c2c2e; --card-tint: #26262a; --ink-0: #f5f3ee; --ink-1: #e5e5e7; --ink-2: #b5b2ac; --ink-3: #888580; --ink-4: #555551; --ink-line: rgba(245,243,238,0.10); --ink-rule: rgba(245,243,238,0.18); --vermilion: #e56b62; --vermilion-soft: #7a3a35; --vermilion-ink: #f08a82; --seal-bg: rgba(229,107,98,0.12); --save: #4da672; --gold: #d4a968; --shadow-sm: 0 1px 2px rgba(0,0,0,0.35); --shadow: 0 2px 6px rgba(0,0,0,0.35); --shadow-lg: 0 8px 32px rgba(0,0,0,0.5); } } /* Manual theme overrides via [data-theme] on */ [data-theme="dark"] { --paper: #1a1a1c; --paper-deep: #141416; --paper-warm: #222224; --card: #2c2c2e; --card-tint: #26262a; --ink-0: #f5f3ee; --ink-1: #e5e5e7; --ink-2: #b5b2ac; --ink-3: #888580; --ink-4: #555551; --ink-line: rgba(245,243,238,0.10); --ink-rule: rgba(245,243,238,0.18); --vermilion: #e56b62; --vermilion-soft: #7a3a35; --vermilion-ink: #f08a82; --seal-bg: rgba(229,107,98,0.12); --save: #4da672; --gold: #d4a968; --shadow-sm: 0 1px 2px rgba(0,0,0,0.35); --shadow: 0 2px 6px rgba(0,0,0,0.35); --shadow-lg: 0 8px 32px rgba(0,0,0,0.5); } [data-theme="light"] { --paper: #f5f2ec; --paper-deep: #edeae4; --paper-warm: #faf7f1; --card: #ffffff; --card-tint: #fbf9f4; --ink-0: #1a1815; --ink-1: #2a2a2a; --ink-2: #5a5752; --ink-3: #8a867f; --ink-4: #b8b3a9; --ink-line: rgba(26,24,21,0.08); --ink-rule: rgba(26,24,21,0.15); --vermilion: #c8423a; --vermilion-soft: #e8a19a; --vermilion-ink: #9a2e27; --seal-bg: rgba(200,66,58,0.08); --save: #3a8a5c; --gold: #b88b4a; --shadow-sm: 0 1px 2px rgba(26,24,21,0.05); --shadow: 0 1px 3px rgba(26,24,21,0.06), 0 4px 14px rgba(26,24,21,0.04); --shadow-lg: 0 4px 16px rgba(26,24,21,0.08), 0 24px 48px rgba(26,24,21,0.10); } /* ============================================================ Reset + Base ============================================================ */ * { margin: 0; padding: 0; box-sizing: border-box; } html, body { height: 100%; overflow: hidden; font-family: var(--font-body); background: var(--paper); color: var(--ink-1); -webkit-user-select: none; user-select: none; } #app { display: flex; flex-direction: column; height: 100dvh; max-width: var(--app-max); margin: 0 auto; position: relative; } /* ============================================================ Shared Components ============================================================ */ /* 朱印 tag */ .seal-tag { display: inline-block; font-family: var(--font-serif); font-size: 11px; color: var(--vermilion); border: 1px solid var(--vermilion); background: var(--seal-bg); padding: 2px 8px; letter-spacing: 0.1em; border-radius: 2px; line-height: 1.4; } /* 页码 */ .folio { font-family: var(--font-serif); font-variant-numeric: oldstyle-nums; font-size: 10px; color: var(--ink-3); letter-spacing: 0.12em; } /* Ruby annotations — dual spans inside single , CSS toggles visibility */ ruby rt { font-size: 0.55em; color: var(--ink-1); font-weight: 400; } /* Default: show romaji, hide kana */ .rt-kana { display: none; } .rt-romaji { display: inline; } [data-ruby="kana"] .rt-kana { display: inline; } [data-ruby="kana"] .rt-romaji { display: none; } [data-ruby="romaji"] .rt-kana { display: none; } [data-ruby="romaji"] .rt-romaji { display: inline; } [data-ruby="off"] rt { display: none; } /* Scrollbar */ ::-webkit-scrollbar { width: 2px; } ::-webkit-scrollbar-thumb { background: var(--ink-line); border-radius: 2px; } /* ============================================================ Views: only one visible at a time ============================================================ */ .view { display: none; flex-direction: column; flex: 1; min-height: 0; } .view.active { display: flex; } /* ============================================================ Landing Page (01) ============================================================ */ #v-landing { background: var(--paper); } #v-landing .topnav { display: flex; justify-content: flex-end; align-items: center; padding: 6px var(--s-5) var(--s-3); } #v-landing .topnav a { font-family: var(--font-ui); font-size: var(--fs-xs); color: var(--ink-2); letter-spacing: 0.1em; text-decoration: none; } #v-landing .landing-body { padding: var(--s-3) 28px 0; flex: 1; overflow-y: auto; min-height: 0; } #v-landing .hero { display: flex; align-items: flex-start; gap: var(--s-4); margin-bottom: var(--s-5); } #v-landing .hero-title { writing-mode: vertical-rl; text-orientation: mixed; font-family: var(--font-serif); font-size: 36px; font-weight: 600; color: var(--ink-0); letter-spacing: 0.18em; line-height: 1.1; } #v-landing .hero-sub { flex: 1; padding-top: var(--s-1); font-family: var(--font-serif); font-size: var(--fs-sm); color: var(--ink-2); line-height: 1.9; letter-spacing: 0.02em; } #v-landing .hero-card { background: var(--card); border-radius: var(--r); padding: var(--s-5) var(--s-5) 18px; box-shadow: var(--shadow); margin-bottom: 18px; position: relative; z-index: 10; cursor: grab; will-change: transform; touch-action: pan-y; } #v-landing .hero-card:active { cursor: grabbing; } #v-landing .hero-card .card-meta { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--s-3); } #v-landing .hero-card .card-body { font-family: var(--font-body); font-size: var(--fs-sm); line-height: 2.0; color: var(--ink-1); min-height: 80px; } #v-landing .hero-card .card-body:empty::after { content: ''; display: block; width: 20px; height: 20px; border: 2px solid var(--ink-line); border-top-color: var(--ink-3); border-radius: 50%; animation: spin .5s linear infinite; margin: 20px auto; } #v-landing .hero-card .swipe-hint { color: var(--ink-3); font-size: 11px; margin-top: var(--s-2); font-family: var(--font-ui); } #v-landing .pitch-list { display: flex; flex-direction: column; gap: var(--s-3); margin-bottom: 22px; } #v-landing .pitch-item { display: flex; gap: var(--s-3); align-items: baseline; } #v-landing .pitch-num { font-family: var(--font-serif); font-weight: 600; color: var(--vermilion); flex-shrink: 0; width: 16px; font-size: 16px; } #v-landing .pitch-title { font-size: 14px; font-weight: 600; color: var(--ink-0); font-family: var(--font-serif); } #v-landing .pitch-desc { font-size: var(--fs-xs); color: var(--ink-2); margin-top: 2px; } #v-landing .cta-bar { padding: var(--s-3) var(--s-5) var(--s-4); border-top: 1px solid var(--ink-line); background: var(--paper); flex-shrink: 0; } .btn-primary { width: 100%; padding: 14px; background: var(--vermilion); color: #fff; border: none; border-radius: var(--r-sm); font-family: var(--font-serif); font-size: 15px; font-weight: 600; letter-spacing: 0.1em; cursor: pointer; } .btn-primary:active { background: var(--vermilion-ink); } /* ============================================================ Tab Bar ============================================================ */ #tabbar { display: flex; border-top: 1px solid var(--ink-line); background: var(--paper); padding-bottom: max(8px, var(--safe-b)); flex-shrink: 0; } #tabbar .tab { flex: 1; text-align: center; padding: 10px 0 8px; font-family: var(--font-ui); font-size: 11px; font-weight: 500; color: var(--ink-3); letter-spacing: 0.08em; cursor: pointer; transition: color var(--dur-quick); } #tabbar .tab.active { color: var(--vermilion); font-weight: 600; } #tabbar .tab .dot { width: 4px; height: 4px; border-radius: 2px; margin: 0 auto 4px; background: transparent; transition: background var(--dur-quick); } #tabbar .tab.active .dot { background: var(--vermilion); } /* ============================================================ App Shell (wraps tabs + tab bar) ============================================================ */ #app-shell { flex: 1; min-height: 0; flex-direction: column; } #app-shell .panel { display: none; flex-direction: column; flex: 1; min-height: 0; } #app-shell .panel.active { display: flex; } /* ============================================================ Cards View (02) ============================================================ */ #card-area { flex: 1 1 0; min-height: 0; position: relative; padding: var(--s-2) 18px 0; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; } #card { width: 100%; background: var(--card); border-radius: var(--r); padding: 22px 22px 18px; cursor: grab; will-change: transform; position: relative; z-index: 10; touch-action: pan-y; box-shadow: var(--shadow); } #card:active { cursor: grabbing; } #card .card-meta { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--s-3); } #content { font-family: var(--font-body); font-size: var(--fs-base); line-height: var(--lh-body); letter-spacing: 0.01em; word-break: break-word; color: var(--ink-1); } #content p { margin-bottom: 0.6em; } #content p:last-child { margin-bottom: 0; } #content strong { color: var(--ink-0); font-weight: 700; } .hint { position: absolute; top: 50%; transform: translateY(-50%); font-size: 14px; font-weight: 600; padding: 6px 16px; border-radius: var(--r-lg); opacity: 0; z-index: 1; pointer-events: none; transition: opacity .1s; font-family: var(--font-ui); } .hint.L { left: 28px; background: var(--skip); color: #fff; } .hint.R { right: 28px; background: var(--save); color: #fff; } /* Loading spinner */ #card.loading #content, #card.loading .card-meta { display: none; } #card.loading { display: flex; align-items: center; justify-content: center; min-height: 180px; } #card.loading::after { content: ''; width: 24px; height: 24px; border: 2px solid var(--ink-line); border-top-color: var(--ink-1); border-radius: 50%; animation: spin .5s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } /* Chat input bar (bottom of cards panel) */ #form { display: flex; gap: var(--s-2); align-items: center; padding: 10px var(--s-4); padding-bottom: max(10px, var(--safe-b)); flex-shrink: 0; } #form input { flex: 1; padding: 10px var(--s-4); border: 1px solid var(--ink-line); border-radius: var(--r-pill); font-size: var(--fs-sm); font-family: var(--font-ui); background: var(--card); color: var(--ink-1); box-shadow: var(--shadow-sm); outline: none; -webkit-user-select: text; user-select: text; } #form input::placeholder { color: var(--ink-4); } #form input:focus { border-color: var(--ink-3); } #form button { width: 38px; height: 38px; border-radius: 50%; border: none; background: var(--ink-1); color: var(--paper); font-size: 17px; cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0; box-shadow: var(--shadow-sm); } #form button:active { opacity: .7; } /* Chat messages (inline below card) */ #msgs { padding: var(--s-3) 0 var(--s-2); display: flex; flex-direction: column; gap: var(--s-2); } #msgs:empty { display: none; } .bubble { max-width: 84%; padding: 9px 13px; border-radius: var(--r); font-size: 12.5px; line-height: 1.75; word-break: break-word; white-space: normal; font-family: var(--font-body); } .bubble p { margin-bottom: 0.4em; } .bubble p:last-child { margin-bottom: 0; } .bubble.user { align-self: flex-end; background: var(--ink-1); color: var(--paper); border-bottom-right-radius: var(--r-sm); } .bubble.ai { align-self: flex-start; background: var(--card); border-bottom-left-radius: var(--r-sm); box-shadow: var(--shadow-sm); } .bubble.typing::after { content: ' ...'; animation: blink .8s infinite; } @keyframes blink { 0%,100%{opacity:.2} 50%{opacity:1} } /* ============================================================ Favorites (03) ============================================================ */ #v-favs .favs-header { padding: 6px var(--s-5) var(--s-3); flex-shrink: 0; } #v-favs .favs-header h1 { font-family: var(--font-serif); font-size: var(--fs-xl); font-weight: 600; color: var(--ink-0); letter-spacing: 0.05em; display: inline; } #v-favs .favs-header .count { font-family: var(--font-ui); font-size: var(--fs-xs); color: var(--ink-3); margin-left: 10px; } #v-favs .favs-list { flex: 1; overflow-y: auto; padding: 0 var(--s-4); } #v-favs .fav-item { padding: var(--s-3) var(--s-2); border-bottom: 1px solid var(--ink-line); display: flex; gap: var(--s-3); align-items: flex-start; cursor: pointer; } #v-favs .fav-bar { width: 3px; align-self: stretch; background: var(--vermilion); opacity: 0.7; margin-top: 2px; margin-bottom: 2px; flex-shrink: 0; } #v-favs .fav-body { flex: 1; min-width: 0; } #v-favs .fav-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 5px; } #v-favs .fav-head .date { font-family: var(--font-ui); font-size: 10px; color: var(--ink-3); } #v-favs .fav-preview { font-family: var(--font-body); font-size: 12.5px; line-height: 1.75; color: var(--ink-1); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } #v-favs .empty-state { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: var(--s-8); color: var(--ink-4); font-family: var(--font-body); font-size: var(--fs-sm); text-align: center; line-height: 1.8; } /* ============================================================ Chat History List (04a) ============================================================ */ #v-chatlist .chatlist-header { padding: 6px var(--s-5) var(--s-3); display: flex; justify-content: space-between; align-items: baseline; flex-shrink: 0; } #v-chatlist .chatlist-header h1 { font-family: var(--font-serif); font-size: var(--fs-xl); font-weight: 600; color: var(--ink-0); letter-spacing: 0.05em; } #v-chatlist .chatlist-header .search-icon { color: var(--ink-2); cursor: pointer; } #v-chatlist .chatlist-feed { flex: 1; overflow-y: auto; } #v-chatlist .chatlist-item { padding: var(--s-3) var(--s-5); border-bottom: 1px solid var(--ink-line); cursor: pointer; } #v-chatlist .chatlist-item:active { background: var(--card-tint); } #v-chatlist .chatlist-meta { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; } #v-chatlist .chatlist-meta .time { font-family: var(--font-ui); font-size: 10px; color: var(--ink-3); } #v-chatlist .chatlist-title { font-family: var(--font-serif); font-size: 14px; font-weight: 600; color: var(--ink-0); margin-bottom: var(--s-1); } #v-chatlist .chatlist-last { display: flex; align-items: center; gap: var(--s-2); font-family: var(--font-body); font-size: var(--fs-xs); color: var(--ink-2); overflow: hidden; } #v-chatlist .chatlist-last .msg-count { flex-shrink: 0; font-family: var(--font-ui); font-size: 10px; padding: 1px 6px; border-radius: 8px; background: var(--card-tint); color: var(--ink-3); border: 1px solid var(--ink-line); } #v-chatlist .chatlist-last .msg-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; } #v-chatlist .empty-state { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: var(--s-8); color: var(--ink-4); font-family: var(--font-body); font-size: var(--fs-sm); text-align: center; line-height: 1.8; } /* ============================================================ Account (07) ============================================================ */ #v-account .account-header { padding: 6px var(--s-5) 10px; flex-shrink: 0; } #v-account .account-header h1 { font-family: var(--font-serif); font-size: var(--fs-xl); font-weight: 600; color: var(--ink-0); letter-spacing: 0.05em; } #v-account .account-body { flex: 1; overflow-y: auto; padding: 0 var(--s-5); } /* Profile row */ #v-account .profile { display: flex; gap: var(--s-3); align-items: center; padding: var(--s-3) 0 var(--s-4); border-bottom: 1px solid var(--ink-line); } #v-account .avatar { width: 52px; height: 52px; border-radius: 26px; background: var(--card-tint); border: 1px solid var(--ink-line); display: flex; align-items: center; justify-content: center; font-family: var(--font-serif); font-size: var(--fs-lg); font-weight: 600; color: var(--ink-1); flex-shrink: 0; } #v-account .profile-info { flex: 1; } #v-account .profile-name { font-family: var(--font-serif); font-size: 15px; font-weight: 600; color: var(--ink-0); } #v-account .profile-plan { font-family: var(--font-ui); font-size: 11px; color: var(--ink-2); margin-top: 3px; } #v-account .profile-plan .plan-badge { color: var(--vermilion); font-weight: 600; } .btn-sm { font-family: var(--font-ui); font-size: 11px; padding: 6px 12px; background: var(--vermilion); color: #fff; border: none; border-radius: var(--r-sm); font-weight: 600; cursor: pointer; } .btn-sm:active { background: var(--vermilion-ink); } /* Streak */ #v-account .streak { padding: var(--s-3) 0; border-bottom: 1px solid var(--ink-line); } #v-account .streak-top { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px; } #v-account .streak-num { font-family: var(--font-serif); font-size: 22px; font-weight: 600; color: var(--vermilion); } #v-account .streak-label { font-family: var(--font-body); font-size: var(--fs-sm); color: var(--ink-2); margin-left: 6px; } #v-account .streak-week { font-family: var(--font-ui); font-size: 10px; color: var(--ink-3); } #v-account .streak-dots { display: flex; gap: var(--s-2); align-items: center; } #v-account .streak-day { flex: 1; text-align: center; } #v-account .streak-day .dot { width: 20px; height: 20px; border-radius: 10px; margin: 0 auto 4px; display: flex; align-items: center; justify-content: center; font-size: 10px; font-family: var(--font-serif); font-weight: 600; } #v-account .streak-day .dot.done { background: var(--vermilion); color: #fff; } #v-account .streak-day .dot.empty { border: 1px dashed var(--ink-rule); } #v-account .streak-day .day-label { font-family: var(--font-ui); font-size: 9px; color: var(--ink-3); } /* Stats */ #v-account .stats { display: flex; padding: var(--s-3) 0; border-bottom: 1px solid var(--ink-line); } #v-account .stat { flex: 1; text-align: center; } #v-account .stat + .stat { border-left: 1px solid var(--ink-line); } #v-account .stat-num { font-family: var(--font-serif); font-size: var(--fs-lg); font-weight: 600; color: var(--ink-0); } #v-account .stat-label { font-family: var(--font-ui); font-size: 10px; color: var(--ink-3); letter-spacing: 0.08em; margin-top: 2px; } /* Preferences */ #v-account .prefs { padding: var(--s-4) 0 var(--s-2); } #v-account .prefs-title { font-family: var(--font-ui); font-size: 10px; font-weight: 600; color: var(--ink-3); letter-spacing: 0.15em; margin-bottom: 10px; } #v-account .pref-row { display: flex; justify-content: space-between; align-items: center; padding: 9px 0; } #v-account .pref-label { font-family: var(--font-body); font-size: var(--fs-sm); color: var(--ink-1); } .seg-ctrl { display: flex; background: var(--card-tint); border: 1px solid var(--ink-line); border-radius: var(--r-sm); padding: 2px; } .seg-ctrl span { padding: 4px 10px; font-family: var(--font-ui); font-size: 11px; color: var(--ink-3); font-weight: 500; border-radius: 3px; cursor: pointer; transition: all var(--dur-quick); } .seg-ctrl span.active { color: var(--ink-0); background: var(--card); font-weight: 600; box-shadow: var(--shadow-sm); } /* Action rows */ #v-account .actions { padding: var(--s-2) 0 var(--s-6); } #v-account .action-row { padding: 13px 0; border-bottom: 1px solid var(--ink-line); display: flex; justify-content: space-between; align-items: center; font-family: var(--font-body); font-size: 13.5px; color: var(--ink-1); cursor: pointer; } #v-account .action-row:last-child { border-bottom: none; } #v-account .action-row.danger { color: var(--danger); } #v-account .action-row .chevron { color: var(--ink-4); font-size: 14px; } #v-account .contact-panel { padding: 14px 0; display: flex; align-items: center; justify-content: space-between; } #v-account .contact-email { font-family: var(--font-ui); font-size: 14px; color: var(--ink-1); letter-spacing: 0.01em; } #v-account .version { text-align: center; padding: var(--s-2) 0 var(--s-3); font-family: var(--font-ui); font-size: 9px; color: var(--ink-4); } /* ============================================================ Login Overlay (05) ============================================================ */ #o-login { position: fixed; inset: 0; max-width: var(--app-max); margin: 0 auto; background: var(--paper); display: none; flex-direction: column; z-index: 200; } #o-login.active { display: flex; } #o-login .login-close { position: absolute; top: 14px; right: 18px; background: none; border: none; cursor: pointer; font-size: 20px; color: var(--ink-3); font-family: var(--font-ui); } #o-login .login-body { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 0 32px; } #o-login .login-title { font-family: var(--font-serif); font-size: 28px; font-weight: 600; color: var(--ink-0); letter-spacing: 0.12em; margin-bottom: var(--s-2); } #o-login .login-rule { width: 40px; height: 2px; background: var(--vermilion); margin-bottom: 18px; opacity: 0.8; } #o-login .login-sub { font-family: var(--font-body); font-size: var(--fs-sm); color: var(--ink-2); margin-bottom: 36px; text-align: center; line-height: 1.7; } #o-login .login-context { display: none; font-family: var(--font-ui); font-size: 15px; color: var(--vermilion); text-align: center; margin-bottom: 36px; letter-spacing: 0.02em; } #o-login .login-context.show { display: block; } #o-login.from-chat .login-sub { display: none; } #o-login .login-form { width: 100%; display: flex; flex-direction: column; gap: 12px; } #o-login .login-step { display: flex; flex-direction: column; gap: 12px; } #o-login .login-form input { width: 100%; padding: 12px 14px; border: 1px solid var(--ink-line); border-radius: var(--r-sm); font-family: var(--font-ui); font-size: 14px; background: var(--card); color: var(--ink-0); outline: none; box-sizing: border-box; } #o-login .login-form input:focus { border-color: var(--vermilion-soft); } #o-login .login-code-hint { font-family: var(--font-ui); font-size: 13px; color: var(--ink-2); text-align: center; } #o-login #login-code { font-size: 22px; letter-spacing: 8px; text-align: center; font-weight: 600; } #o-login .login-error, #o-login #login-error-code { font-family: var(--font-ui); font-size: 12px; color: var(--danger); min-height: 16px; } #o-login .login-resend { background: none; border: none; cursor: pointer; font-family: var(--font-ui); font-size: 13px; color: var(--ink-3); padding: 4px 0; } #o-login .login-resend:disabled { opacity: 0.5; cursor: default; } #o-login .login-divider { width: 100%; text-align: center; margin: 18px 0; position: relative; } #o-login .login-divider::before { content: ''; position: absolute; left: 0; right: 0; top: 50%; border-top: 1px solid var(--ink-line); } #o-login .login-divider span { position: relative; background: var(--paper); padding: 0 14px; font-family: var(--font-ui); font-size: 12px; color: var(--ink-3); } #g-signin-btn { min-height: 44px; } #o-login .login-footer { padding: var(--s-3) 28px var(--s-5); text-align: center; font-family: var(--font-ui); font-size: 10px; color: var(--ink-3); line-height: 1.8; flex-shrink: 0; } #o-login .login-footer a { color: var(--ink-2); text-decoration: underline; } /* ============================================================ Paywall Overlay (06) ============================================================ */ #o-paywall { position: absolute; inset: 0; display: none; flex-direction: column; z-index: 50; } #o-paywall.active { display: flex; } #o-paywall .pw-backdrop { flex: 1; position: relative; padding: var(--s-2) 18px; } #o-paywall .pw-dimmed-card { background: var(--card); border-radius: var(--r); padding: 22px; height: 100%; opacity: 0.28; filter: blur(1px); font-family: var(--font-body); font-size: var(--fs-sm); line-height: 2; color: var(--ink-1); } #o-paywall .pw-panel { position: absolute; left: 18px; right: 18px; top: 20px; bottom: 20px; overflow-y: auto; background: var(--paper-warm); border-radius: var(--r); box-shadow: var(--shadow-lg); padding: var(--s-6) 22px var(--s-5); border: 1px solid var(--ink-line); } #o-paywall .pw-title { font-family: var(--font-serif); font-size: 22px; font-weight: 600; color: var(--ink-0); text-align: center; letter-spacing: 0.05em; margin-bottom: var(--s-5); } #o-paywall .pw-plans { display: flex; gap: 10px; margin-bottom: var(--s-4); } #o-paywall .pw-plan { flex: 1; padding: 14px 10px; border-radius: var(--r-sm); text-align: center; border: 1px solid var(--ink-line); background: var(--card-tint); cursor: pointer; transition: border-color .15s, background .15s; } #o-paywall .pw-plan.selected { border: 1.5px solid var(--vermilion); background: var(--seal-bg); } #o-paywall .pw-plan-name { font-family: var(--font-ui); font-size: 12px; font-weight: 700; letter-spacing: 0.06em; color: var(--ink-2); margin-bottom: var(--s-1); text-transform: uppercase; } #o-paywall .pw-plan.selected .pw-plan-name { color: var(--vermilion); } #o-paywall .pw-plan-amount { font-family: var(--font-serif); font-size: 18px; font-weight: 600; color: var(--ink-0); } #o-paywall .pw-plan-period { font-family: var(--font-ui); font-size: 10px; color: var(--ink-2); margin-top: 2px; } #o-paywall .pw-compare { width: 100%; margin-bottom: 18px; border-collapse: collapse; font-family: var(--font-ui); font-size: 12px; } #o-paywall .pw-compare th { font-weight: 600; letter-spacing: 0.04em; color: var(--ink-2); padding: 8px 6px; text-align: center; font-size: 11px; border-bottom: 1px solid var(--ink-line); } #o-paywall .pw-compare th:first-child { text-align: left; } #o-paywall .pw-compare td { padding: 8px 6px; text-align: center; color: var(--ink-1); border-bottom: 1px solid var(--ink-line); } #o-paywall .pw-compare td:first-child { text-align: left; color: var(--ink-2); font-weight: 500; } #o-paywall .pw-compare tbody tr:last-child td { border-bottom: none; } #o-paywall .pw-dismiss { width: 100%; padding: 10px; background: transparent; color: var(--ink-3); border: none; font-family: var(--font-ui); font-size: var(--fs-xs); cursor: pointer; } #o-paywall .pw-dismiss:active { color: var(--ink-2); }