/* ══════════════════════════════════════════════════════════════ THEMES (data-theme on ) ══════════════════════════════════════════════════════════════ */ /* 1. 暗夜紫 — default */ :root, [data-theme="dark-purple"] { --bg: #0d0d1a; --surface: #1a1a2e; --surface-2: #252540; --surface-g: rgba(26,26,46,0.82); --primary: #7c3aed; --primary-lt: #a855f7; --accent: #f59e0b; --success: #10b981; --danger: #ef4444; --text: #e2e8f0; --text-muted: #94a3b8; --border: #2d2d4e; } /* 2. 極光藍 */ [data-theme="aurora-blue"] { --bg: #050d1a; --surface: #0d1e35; --surface-2: #142844; --surface-g: rgba(13,30,53,0.82); --primary: #0ea5e9; --primary-lt: #38bdf8; --accent: #06d6a0; --success: #06d6a0; --danger: #ef4444; --text: #e0f2fe; --text-muted: #7dd3fc; --border: #1e3a5f; } /* 3. 翡翠綠 */ [data-theme="emerald"] { --bg: #080f0a; --surface: #111a13; --surface-2: #1a2b1d; --surface-g: rgba(17,26,19,0.82); --primary: #16a34a; --primary-lt: #22c55e; --accent: #fbbf24; --success: #22c55e; --danger: #ef4444; --text: #dcfce7; --text-muted: #86efac; --border: #1a3320; } /* 4. 赤焰 */ [data-theme="flame"] { --bg: #120a05; --surface: #1f1008; --surface-2: #2e1a0d; --surface-g: rgba(31,16,8,0.82); --primary: #ea580c; --primary-lt: #fb923c; --accent: #fde047; --success: #10b981; --danger: #ef4444; --text: #fef3c7; --text-muted: #fcd34d; --border: #3d1f0a; } /* 5. 霓虹粉 */ [data-theme="neon-pink"] { --bg: #12040f; --surface: #1e0a1a; --surface-2: #2b1025; --surface-g: rgba(30,10,26,0.82); --primary: #db2777; --primary-lt: #f472b6; --accent: #a855f7; --success: #10b981; --danger: #ef4444; --text: #fce7f3; --text-muted: #f9a8d4; --border: #3d1030; } /* 6. 純白光 */ [data-theme="light"] { --bg: #f1f5f9; --surface: #ffffff; --surface-2: #f8fafc; --surface-g: rgba(255,255,255,0.88); --primary: #7c3aed; --primary-lt: #a855f7; --accent: #d97706; --success: #059669; --danger: #dc2626; --text: #1e293b; --text-muted: #64748b; --border: #e2e8f0; } /* 7. 日系簡約 (Wabi) — warm parchment light */ [data-theme="wabi"] { --bg: #f5f0e8; --surface: #faf7f2; --surface-2: #ede8df; --surface-g: rgba(250,247,242,0.92); --primary: #9b2335; --primary-lt: #c0392b; --accent: #7a6a4a; --success: #2d7a4a; --danger: #9b2335; --text: #1a1510; --text-muted: #6b5a48; --border: #d4cbbf; --bg-card: #faf7f2; } /* 8. Material Design 3 Dark */ [data-theme="material"] { --bg: #1c1b1f; --surface: #2b2930; --surface-2: #36343b; --surface-g: rgba(43,41,48,0.92); --primary: #d0bcff; --primary-lt: #eaddff; --accent: #efb8c8; --success: #6fd08c; --danger: #f2b8b5; --text: #e6e1e5; --text-muted: #cac4d0; --border: #49454f; --bg-card: #2b2930; } /* 9. 賽博龐克 (Cyberpunk) — neon on near-black */ [data-theme="cyberpunk"] { --bg: #050508; --surface: #0c0c14; --surface-2: #13131f; --surface-g: rgba(12,12,20,0.92); --primary: #00ff9f; --primary-lt: #80ffd4; --accent: #ff2d78; --success: #00ff9f; --danger: #ff2d78; --text: #d0f5e8; --text-muted: #4a9070; --border: #0f3025; --bg-card: #0c0c14; } /* ══════════════════════════════════════════════════════════════ RESET & BASE ══════════════════════════════════════════════════════════════ */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } body { background-color: var(--bg); background-size: cover; background-position: center; background-attachment: fixed; color: var(--text); font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; min-height: 100vh; overflow: hidden; -webkit-tap-highlight-color: transparent; transition: background-color 0.4s; } #app { max-width: 430px; margin: 0 auto; height: 100dvh; display: flex; flex-direction: column; position: relative; overflow: hidden; } /* ── Glass effect when background image is set ── */ html.has-bg .card, html.has-bg #header, html.has-bg nav, html.has-bg .modal-box, html.has-bg .levelup-box { background: var(--surface-g) !important; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); } html.has-bg #app { background: transparent; } /* ══════════════════════════════════════════════════════════════ ACCOUNT CARD (settings) ══════════════════════════════════════════════════════════════ */ .account-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .account-info { flex: 1; min-width: 0; } .account-name { font-size: 15px; font-weight: 600; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .account-sub { font-size: 12px; color: var(--text-muted); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .account-divider { height: 1px; background: var(--border); margin: 14px 0 10px; } .btn-text-danger { background: none; border: none; color: var(--text-muted); font-size: 12px; cursor: pointer; padding: 0; text-align: left; line-height: 1.5; text-decoration: underline; text-decoration-color: transparent; transition: color 0.2s; } .btn-text-danger:hover { color: var(--danger); } /* ══════════════════════════════════════════════════════════════ AUTH / LOGIN SCREEN ══════════════════════════════════════════════════════════════ */ .auth-card { width: 100%; max-width: 360px; background: var(--card-bg); border: 1px solid var(--border); border-radius: 16px; padding: 24px; margin-bottom: 16px; } .auth-tabs { display: flex; border-radius: 8px; background: var(--bg-secondary, rgba(255,255,255,0.05)); padding: 4px; margin-bottom: 20px; } .auth-tab { flex: 1; background: transparent; border: none; color: var(--text-muted); padding: 8px; border-radius: 6px; cursor: pointer; font-size: 14px; font-weight: 600; transition: background 0.2s, color 0.2s; } .auth-tab.active { background: var(--accent); color: #fff; } .auth-error { color: #ff6b6b; font-size: 13px; margin-bottom: 12px; text-align: center; } .auth-divider { display: flex; align-items: center; gap: 12px; margin: 16px 0; color: var(--text-muted); font-size: 12px; } .auth-divider::before, .auth-divider::after { content: ''; flex: 1; height: 1px; background: var(--border); } .btn-google { width: 100%; display: flex; align-items: center; justify-content: center; gap: 10px; padding: 11px 16px; border-radius: 10px; border: 1px solid var(--border); background: transparent; color: var(--text-primary); font-size: 14px; font-weight: 600; cursor: pointer; transition: background 0.2s; } .btn-google:hover { background: rgba(255,255,255,0.07); } .btn-guest { background: none; border: none; color: var(--text-muted); font-size: 13px; cursor: pointer; text-decoration: underline; padding: 8px; } /* ══════════════════════════════════════════════════════════════ LOADING SCREEN ══════════════════════════════════════════════════════════════ */ #loading-screen { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; } .loading-spinner { width: 40px; height: 40px; border: 3px solid var(--border); border-top-color: var(--accent); border-radius: 50%; animation: spin 0.8s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } .loading-text { font-size: 14px; color: var(--text-muted); } /* ══════════════════════════════════════════════════════════════ SETUP SCREEN ══════════════════════════════════════════════════════════════ */ #setup-screen, #login-screen { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 32px 24px 48px; text-align: center; } .setup-logo { font-size: 72px; margin-bottom: 12px; } .setup-title { font-size: 28px; font-weight: 800; margin-bottom: 6px; } .setup-subtitle { font-size: 14px; color: var(--text-muted); margin-bottom: 36px; } .setup-avatar-area { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-bottom: 28px; } .setup-avatar-circle { width: 88px; height: 88px; border-radius: 50%; border: 3px solid var(--primary); background: var(--surface-2); display: flex; align-items: center; justify-content: center; font-size: 40px; overflow: hidden; cursor: pointer; } /* ══════════════════════════════════════════════════════════════ MAIN APP SHELL ══════════════════════════════════════════════════════════════ */ #main-app { flex: 1; display: flex; flex-direction: column; overflow: hidden; } /* ── Header ── */ #header { background: var(--surface); border-bottom: 1px solid var(--border); height: calc(68px + env(safe-area-inset-top)); padding: env(safe-area-inset-top) 16px 0; display: flex; align-items: center; gap: 14px; flex-shrink: 0; transition: background 0.4s; } .hdr-level-badge { background: linear-gradient(135deg, var(--primary), var(--primary-lt)); border-radius: 50%; width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; font-weight: 900; font-size: 13px; flex-shrink: 0; cursor: pointer; letter-spacing: -0.5px; } .hdr-lv-label { font-size: 9px; font-weight: 600; opacity: 0.8; } .hdr-xp-section { flex: 1; } .hdr-bars-section { flex: 1; min-width: 0; } .hdr-xp-top { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 5px; } .hdr-title { font-size: 13px; font-weight: 600; color: var(--primary-lt); } .hdr-xp-text { font-size: 11px; color: var(--text-muted); } /* ── XP bar ── */ .xp-bar-track { background: var(--surface-2); border-radius: 999px; height: 8px; overflow: hidden; } .xp-bar-fill { background: linear-gradient(90deg, var(--primary), var(--accent)); height: 100%; border-radius: 999px; transition: width 0.5s cubic-bezier(0.34, 1.56, 0.64, 1); } /* ── Main content ── */ main { flex: 1; overflow-y: auto; padding: 16px 16px calc(60px + 16px + env(safe-area-inset-bottom) + 16px); -webkit-overflow-scrolling: touch; } /* ── Bottom nav ── */ nav { background: var(--surface); border-top: 1px solid var(--border); display: flex; height: calc(60px + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom); flex-shrink: 0; transition: background 0.4s; } .nav-item { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; background: none; border: none; color: var(--text-muted); font-size: 10px; cursor: pointer; transition: color 0.2s; padding: 0; } .nav-item.active { color: var(--primary-lt); } .nav-icon { font-size: 22px; } /* ══════════════════════════════════════════════════════════════ CARDS & LAYOUT ══════════════════════════════════════════════════════════════ */ .card { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 16px; margin-bottom: 12px; transition: background 0.4s; } .card-title { font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); margin-bottom: 12px; } .section-title { font-size: 16px; font-weight: 700; margin-bottom: 12px; display: flex; align-items: center; gap: 6px; } .date-badge { background: var(--surface); border: 1px solid var(--border); border-radius: 999px; padding: 5px 14px; font-size: 12px; color: var(--text-muted); display: inline-flex; align-items: center; gap: 4px; margin-bottom: 16px; } /* ══════════════════════════════════════════════════════════════ HOME PAGE ══════════════════════════════════════════════════════════════ */ .today-xp-card { text-align: center; padding: 14px; background: linear-gradient(135deg, rgba(124,58,237,0.15), rgba(245,158,11,0.1)); border-color: rgba(124,58,237,0.3); } .today-xp-label { font-size: 11px; color: var(--text-muted); margin-bottom: 2px; } .today-xp-value { font-size: 32px; font-weight: 900; color: var(--accent); } .today-xp-sub { font-size: 12px; color: var(--text-muted); margin-top: 2px; } .goal-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-bottom: 4px; } .goal-btn { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 18px 12px 14px; display: flex; flex-direction: column; align-items: center; gap: 6px; cursor: pointer; transition: border-color 0.15s, background 0.15s, transform 0.1s; color: var(--text); position: relative; -webkit-user-select: none; user-select: none; } .goal-btn:active { transform: scale(0.95); border-color: var(--primary); background: rgba(124,58,237,0.12); } .goal-emoji { font-size: 32px; } .goal-icon-img-lg { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; border: 2px solid var(--border); } .goal-name { font-size: 13px; font-weight: 500; text-align: center; line-height: 1.3; } .goal-xp { font-size: 12px; font-weight: 700; color: var(--accent); } .count-badge { position: absolute; top: 8px; right: 8px; background: var(--primary); border-radius: 999px; min-width: 22px; height: 22px; font-size: 12px; font-weight: 700; display: flex; align-items: center; justify-content: center; padding: 0 5px; } /* ══════════════════════════════════════════════════════════════ LOG ITEMS ══════════════════════════════════════════════════════════════ */ .log-item { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--border); } .log-item:last-child { border-bottom: none; } .session-del-btn { background: none; border: none; color: var(--text-muted); font-size: 14px; cursor: pointer; flex-shrink: 0; padding: 4px 6px; border-radius: 6px; opacity: 0.5; transition: opacity 0.2s, color 0.2s; } .session-del-btn:hover { opacity: 1; color: var(--danger); } /* Mode toggle */ .mode-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .mode-info { flex: 1; } .mode-name { font-size: 14px; font-weight: 600; color: var(--text-primary); } .mode-desc { font-size: 12px; color: var(--text-muted); margin-top: 3px; } .mode-warning { font-size: 12px; color: #f59e0b; background: rgba(245,158,11,0.1); border-radius: 8px; padding: 8px 10px; margin-top: 12px; } .toggle-switch { position: relative; display: inline-block; width: 44px; height: 24px; flex-shrink: 0; } .toggle-switch input { opacity: 0; width: 0; height: 0; } .toggle-slider { position: absolute; inset: 0; background: var(--border); border-radius: 24px; cursor: pointer; transition: background 0.2s; } .toggle-slider::before { content: ''; position: absolute; width: 18px; height: 18px; left: 3px; bottom: 3px; background: white; border-radius: 50%; transition: transform 0.2s; } .toggle-switch input:checked + .toggle-slider { background: var(--accent); } .toggle-switch input:checked + .toggle-slider::before { transform: translateX(20px); } .badge-default { font-size: 10px; padding: 1px 5px; border-radius: 4px; background: rgba(255,255,255,0.08); color: var(--text-muted); vertical-align: middle; } .log-emoji { font-size: 26px; flex-shrink: 0; } .log-icon-img { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; flex-shrink: 0; border: 1px solid var(--border); } .log-info { flex: 1; min-width: 0; } .log-name { font-size: 14px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .log-time { font-size: 11px; color: var(--text-muted); margin-top: 1px; } .log-xp { font-size: 13px; font-weight: 700; color: var(--accent); flex-shrink: 0; } .date-group { margin-bottom: 16px; } .date-group-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; } .date-group-label { font-size: 15px; font-weight: 600; } .date-group-xp { font-size: 13px; font-weight: 600; color: var(--accent); } /* ══════════════════════════════════════════════════════════════ PROFILE ══════════════════════════════════════════════════════════════ */ .profile-top { display: flex; flex-direction: column; align-items: center; padding: 8px 0 20px; text-align: center; } .avatar-wrap { position: relative; display: inline-block; margin-bottom: 14px; cursor: pointer; } .avatar-circle { width: 90px; height: 90px; border-radius: 50%; border: 3px solid var(--primary); background: var(--surface-2); display: flex; align-items: center; justify-content: center; font-size: 40px; overflow: hidden; } .avatar-edit-badge { position: absolute; bottom: 2px; right: 0; background: var(--primary); border-radius: 50%; width: 26px; height: 26px; display: flex; align-items: center; justify-content: center; font-size: 13px; } .profile-name { font-size: 22px; font-weight: 700; cursor: pointer; display: flex; align-items: center; gap: 6px; } .edit-hint { font-size: 14px; color: var(--text-muted); } .profile-joined { font-size: 12px; color: var(--text-muted); margin-top: 4px; } .level-card { text-align: center; } .level-big { font-size: 72px; font-weight: 900; line-height: 1; background: linear-gradient(135deg, var(--primary), var(--accent)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .level-title-text { font-size: 20px; color: var(--text-muted); margin-bottom: 10px; } .newbie-badge { background: rgba(16,185,129,0.15); border: 1px solid rgba(16,185,129,0.3); border-radius: 999px; padding: 4px 12px; font-size: 12px; color: var(--success); display: inline-block; margin-bottom: 14px; } .xp-bar-label { display: flex; justify-content: space-between; font-size: 12px; color: var(--text-muted); margin-bottom: 6px; text-align: left; } .stats-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 10px; margin-bottom: 12px; } .stat-card { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 16px 12px; text-align: center; } .stat-value { font-size: 26px; font-weight: 800; color: var(--accent); } .stat-label { font-size: 11px; color: var(--text-muted); margin-top: 2px; } .xp-table-row { display: grid; grid-template-columns: 56px 1fr auto; gap: 8px; align-items: center; padding: 7px 0; border-bottom: 1px solid var(--border); font-size: 13px; color: var(--text-muted); } .xp-table-row:last-child { border-bottom: none; } .xp-table-lv { font-variant-numeric: tabular-nums; white-space: nowrap; } .xp-table-title { color: var(--text); font-size: 12px; } .xp-table-xp { white-space: nowrap; text-align: right; } .xp-table-row.current-level { color: var(--text); font-weight: 600; } .xp-table-row.current-level .xp-table-title { color: var(--primary-lt); } .xp-table-row.current-level .xp-table-xp { color: var(--accent); } .xp-table-note { font-size: 11px; color: var(--text-muted); margin-top: 10px; line-height: 1.5; } /* ── Title template list ── */ .title-tmpl-list { display: flex; flex-direction: column; gap: 6px; } .title-tmpl-item { display: flex; align-items: center; gap: 6px; } .title-tmpl-item .title-tmpl-btn { flex: 1; text-align: left; } .title-tmpl-edit-btn { background: none; border: 1px solid var(--border); border-radius: 8px; padding: 4px 8px; cursor: pointer; font-size: 14px; color: var(--text-muted); transition: border-color .15s; flex-shrink: 0; } .title-tmpl-edit-btn:hover { border-color: var(--primary); } /* ── Template editor modal ── */ .tier-editor-row { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; } .tier-editor-lv { font-size: 12px; color: var(--text-muted); width: 52px; flex-shrink: 0; font-variant-numeric: tabular-nums; } .tier-title-input { flex: 1; } /* ══════════════════════════════════════════════════════════════ SETTINGS — THEME PICKER ══════════════════════════════════════════════════════════════ */ .theme-section-label { font-size: 11px; font-weight: 600; letter-spacing: .06em; color: var(--text-muted); text-transform: uppercase; margin-bottom: 8px; } .theme-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; } .theme-card { border: 2px solid var(--border); border-radius: 12px; padding: 8px 6px; cursor: pointer; text-align: center; position: relative; transition: border-color 0.2s, transform 0.1s; } .theme-card:active { transform: scale(0.97); } .theme-card.active { border-color: var(--primary); } .theme-preview { margin-bottom: 6px; } .tp-bg { height: 48px; border-radius: 8px; display: flex; align-items: center; justify-content: center; padding: 6px; } .tp-surface { width: 100%; height: 100%; background: rgba(255,255,255,0.08); border-radius: 5px; display: flex; align-items: center; justify-content: center; gap: 4px; } .tp-primary, .tp-accent { width: 16px; height: 16px; border-radius: 50%; } .theme-name { font-size: 11px; font-weight: 600; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .theme-check { position: absolute; top: 5px; right: 7px; color: var(--primary-lt); font-size: 14px; font-weight: 700; } /* ══════════════════════════════════════════════════════════════ SETTINGS — BACKGROUND ══════════════════════════════════════════════════════════════ */ .bg-preview-row { display: flex; gap: 14px; align-items: center; } .bg-thumb { width: 72px; height: 72px; flex-shrink: 0; border-radius: 10px; border: 1px solid var(--border); background: var(--surface-2); display: flex; align-items: center; justify-content: center; overflow: hidden; } /* ══════════════════════════════════════════════════════════════ SETTINGS — GOAL ICON ROW ══════════════════════════════════════════════════════════════ */ .icon-row { display: flex; align-items: center; gap: 14px; } .icon-preview { width: 64px; height: 64px; flex-shrink: 0; border-radius: 50%; background: var(--surface-2); border: 2px solid var(--border); display: flex; align-items: center; justify-content: center; font-size: 32px; overflow: hidden; } /* ══════════════════════════════════════════════════════════════ SETTINGS — MISC ══════════════════════════════════════════════════════════════ */ .future-card { opacity: 0.45; pointer-events: none; } .future-list { display: flex; flex-direction: column; gap: 8px; font-size: 13px; color: var(--text-muted); } .btn-danger-sm { padding: 8px 14px; border: 1px solid rgba(239,68,68,0.3); border-radius: 12px; font-size: 13px; font-weight: 600; cursor: pointer; background: rgba(239,68,68,0.12); color: var(--danger); } /* ══════════════════════════════════════════════════════════════ BUTTONS & FORMS ══════════════════════════════════════════════════════════════ */ .btn { display: inline-flex; align-items: center; justify-content: center; padding: 13px 20px; border-radius: 12px; border: none; font-size: 15px; font-weight: 600; cursor: pointer; transition: opacity 0.15s, transform 0.1s; width: 100%; } .btn:active { opacity: 0.8; transform: scale(0.98); } .btn-primary { background: linear-gradient(135deg, var(--primary), var(--primary-lt)); color: white; } .btn-outline { background: transparent; border: 1px solid var(--border); color: var(--text); } .btn-sm { padding: 8px 14px; font-size: 13px; width: auto; } .form-group { margin-bottom: 18px; } .form-label { font-size: 13px; color: var(--text-muted); margin-bottom: 7px; display: block; } .form-input { width: 100%; background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; color: var(--text); font-size: 15px; outline: none; transition: border-color 0.2s; } .form-input:focus { border-color: var(--primary); } /* ══════════════════════════════════════════════════════════════ MODAL ══════════════════════════════════════════════════════════════ */ .modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.65); display: flex; align-items: flex-end; z-index: 50; animation: fadeIn 0.2s; } .modal-box { background: var(--surface); border-radius: 20px 20px 0 0; padding: 24px 20px calc(24px + env(safe-area-inset-bottom)); width: 100%; max-height: 88dvh; overflow-y: auto; animation: slideUp 0.28s cubic-bezier(0.34, 1.4, 0.64, 1); } .modal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; } .modal-title { font-size: 18px; font-weight: 700; } .modal-close { background: var(--surface-2); border: none; color: var(--text-muted); font-size: 18px; width: 32px; height: 32px; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; } /* ══════════════════════════════════════════════════════════════ EMOJI PICKER ══════════════════════════════════════════════════════════════ */ .emoji-picker { display: grid; grid-template-columns: repeat(8, 1fr); gap: 4px; background: var(--surface-2); border-radius: 12px; padding: 10px; max-height: 150px; overflow-y: auto; } .emoji-option { background: none; border: none; font-size: 22px; cursor: pointer; padding: 5px 0; border-radius: 6px; transition: background 0.1s; text-align: center; } .emoji-option:hover, .emoji-option.selected { background: var(--primary); border-radius: 6px; } /* ══════════════════════════════════════════════════════════════ LEVEL-UP OVERLAY ══════════════════════════════════════════════════════════════ */ #levelup-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.85); display: flex; align-items: center; justify-content: center; z-index: 100; animation: fadeIn 0.3s; } .levelup-box { background: var(--surface); border: 2px solid var(--accent); border-radius: 20px; padding: 40px 32px; text-align: center; width: min(340px, 90vw); animation: popIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); } .lu-stars { font-size: 36px; margin-bottom: 8px; } .lu-label { font-size: 13px; letter-spacing: 0.2em; color: var(--accent); text-transform: uppercase; margin-bottom: 4px; } .lu-number { font-size: 80px; font-weight: 900; line-height: 1; background: linear-gradient(135deg, var(--primary), var(--accent)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .lu-title { font-size: 20px; color: var(--text-muted); margin-top: 4px; } /* ══════════════════════════════════════════════════════════════ XP FLOAT ══════════════════════════════════════════════════════════════ */ .xp-float { position: fixed; top: calc(68px + 12px); left: 50%; transform: translateX(-50%); background: linear-gradient(135deg, var(--primary), var(--accent)); color: white; padding: 8px 22px; border-radius: 999px; font-weight: 700; font-size: 16px; z-index: 200; pointer-events: none; animation: xpFloat 1.3s forwards; white-space: nowrap; } /* ══════════════════════════════════════════════════════════════ EMPTY STATE ══════════════════════════════════════════════════════════════ */ .empty-state { text-align: center; padding: 28px 16px; color: var(--text-muted); } .empty-icon { font-size: 44px; margin-bottom: 10px; } .empty-state p { font-size: 14px; line-height: 1.6; } /* ══════════════════════════════════════════════════════════════ UTILITY ══════════════════════════════════════════════════════════════ */ .hidden { display: none !important; } /* ══════════════════════════════════════════════════════════════ ANIMATIONS ══════════════════════════════════════════════════════════════ */ @keyframes fadeIn { from { opacity:0 } to { opacity:1 } } @keyframes slideUp { from { transform:translateY(100%) } to { transform:translateY(0) } } @keyframes popIn { from { transform:scale(0.5); opacity:0 } to { transform:scale(1); opacity:1 } } @keyframes xpFloat { 0% { opacity:1; transform:translateX(-50%) translateY(0); } 70% { opacity:1; transform:translateX(-50%) translateY(-44px); } 100% { opacity:0; transform:translateX(-50%) translateY(-64px); } } /* ══════════════════════════════════════════════════════════════ NAV — 5-tab layout ══════════════════════════════════════════════════════════════ */ #nav { grid-template-columns: repeat(5, 1fr); } /* ══════════════════════════════════════════════════════════════ TOAST ══════════════════════════════════════════════════════════════ */ .toast { position: fixed; bottom: calc(72px + env(safe-area-inset-bottom) + 12px); left: 50%; transform: translateX(-50%); background: var(--surface-2); color: var(--text); border: 1px solid var(--border); padding: 10px 20px; border-radius: 999px; font-size: 14px; font-weight: 600; z-index: 200; pointer-events: none; white-space: nowrap; animation: xpFloat 2.5s forwards; } /* ══════════════════════════════════════════════════════════════ STATS BAR (home) ══════════════════════════════════════════════════════════════ */ .stats-bar { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 0 0 12px; } .stat-pill { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 10px 6px 8px; display: flex; flex-direction: column; align-items: center; gap: 2px; } .stat-pill.energy-high { border-color: #10b981; } .stat-pill.energy-mid { border-color: #f59e0b; } .stat-pill.energy-low { border-color: #ef4444; } .stat-pill-icon { font-size: 16px; } .stat-pill-val { font-size: 17px; font-weight: 700; color: var(--text); line-height: 1.1; } .stat-pill-lbl { font-size: 10px; color: var(--text-muted); } /* ══════════════════════════════════════════════════════════════ EFFECTIVE DAY ROW ══════════════════════════════════════════════════════════════ */ .effective-row { margin: 0 0 14px; text-align: center; } .streak-ok { color: #10b981; font-size: 13px; font-weight: 600; } .streak-warn { color: var(--text-muted); font-size: 12px; } /* ══════════════════════════════════════════════════════════════ TASK GRID & CARDS ══════════════════════════════════════════════════════════════ */ .task-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-bottom: 4px; } .task-card { position: relative; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 14px 12px 12px; cursor: pointer; transition: transform 0.12s, border-color 0.15s; border-left: 3px solid var(--task-accent, var(--primary)); user-select: none; } .task-card:active { transform: scale(0.97); } .task-card-focus { background: color-mix(in srgb, var(--surface) 85%, var(--primary) 15%); } .task-card-top { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 8px; } .task-emoji { font-size: 28px; line-height: 1; } .task-icon-img { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; } .task-badges { display: flex; flex-direction: column; gap: 3px; align-items: flex-end; } .task-name { font-size: 13px; font-weight: 600; color: var(--text); line-height: 1.35; margin-bottom: 8px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .task-footer { display: flex; justify-content: space-between; align-items: center; } .task-xp-label { font-size: 12px; color: var(--text-muted); font-weight: 600; } .focus-btn-label { font-size: 11px; font-weight: 700; color: var(--primary-lt); background: rgba(124,58,237,0.15); border-radius: 6px; padding: 2px 7px; } /* ══════════════════════════════════════════════════════════════ BADGES ══════════════════════════════════════════════════════════════ */ .badge { display: inline-block; font-size: 10px; font-weight: 700; padding: 2px 6px; border-radius: 5px; white-space: nowrap; } .badge-s { background: rgba(250,204,21,0.2); color: #fbbf24; } .badge-a { background: rgba(124,58,237,0.2); color: var(--primary-lt); } .badge-b { background: rgba(148,163,184,0.15); color: var(--text-muted); } .badge-d { background: rgba(139,92,246,0.1); color: #a78bfa; } .badge-nature { background: var(--surface-2); color: var(--text-muted); } /* For dist bar backgrounds in review */ .badge-s-bg { background: #fbbf24; } .badge-a-bg { background: var(--primary-lt); } .badge-b-bg { background: var(--text-muted); } /* ══════════════════════════════════════════════════════════════ LOG RESULT ICON ══════════════════════════════════════════════════════════════ */ .log-result-icon { font-size: 18px; flex-shrink: 0; width: 24px; text-align: center; } .log-xp-invalid { color: var(--text-muted) !important; opacity: 0.6; } /* ══════════════════════════════════════════════════════════════ FOCUS OVERLAY ══════════════════════════════════════════════════════════════ */ #focus-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.92); display: flex; align-items: center; justify-content: center; z-index: 80; animation: fadeIn 0.25s; } .focus-box { background: var(--surface); border-radius: 24px; padding: 36px 28px 32px; width: min(360px, 92vw); text-align: center; border: 1px solid var(--border); } .focus-task-header { display: flex; align-items: center; justify-content: center; gap: 10px; margin-bottom: 24px; } .focus-task-emoji { font-size: 28px; } .focus-task-name { font-size: 16px; font-weight: 700; color: var(--text); } .focus-timer { font-size: 64px; font-weight: 900; line-height: 1; font-variant-numeric: tabular-nums; background: linear-gradient(135deg, var(--primary), var(--accent)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; margin-bottom: 14px; } .focus-min-pending { font-size: 13px; color: var(--text-muted); margin-bottom: 20px; } .focus-min-reached { font-size: 13px; color: #10b981; font-weight: 600; margin-bottom: 20px; } .focus-end-btn { min-width: 120px; } /* focus-box 需要 relative 讓縮小按鈕能絕對定位 */ .focus-box { position: relative; } /* 縮小按鈕（右上角） */ .focus-minimize-btn { position: absolute; top: 14px; right: 16px; background: none; border: 1px solid var(--border); border-radius: 20px; padding: 4px 12px; font-size: 12px; color: var(--text-muted); cursor: pointer; } .focus-minimize-btn:hover { color: var(--text); border-color: var(--text-muted); } /* 暫停 + 結束 並排 */ .focus-controls { display: flex; gap: 10px; justify-content: center; margin-bottom: 14px; } .focus-pause-btn { min-width: 96px; } /* 略過按鈕（低調文字樣式） */ .focus-skip-btn { background: none; border: none; font-size: 13px; color: var(--text-muted); text-decoration: underline; cursor: pointer; margin-top: 4px; display: block; width: 100%; } .focus-skip-btn:hover { color: var(--text); } /* 略過確認 modal 內容 */ .skip-confirm-msg { font-size: 15px; font-weight: 600; color: var(--text); line-height: 1.55; margin-bottom: 22px; } .skip-confirm-actions { display: flex; flex-direction: column; gap: 10px; } /* 背景計時 PIP */ #focus-pip { position: fixed; bottom: 76px; left: 50%; transform: translateX(-50%); z-index: 70; display: flex; align-items: center; gap: 10px; background: var(--surface); border: 1px solid var(--border); border-radius: 100px; padding: 9px 18px; box-shadow: 0 4px 20px rgba(0,0,0,0.45); animation: fadeIn 0.2s; } #focus-pip.hidden { display: none; } .focus-pip-emoji { font-size: 20px; } .focus-pip-timer { font-size: 19px; font-weight: 800; font-variant-numeric: tabular-nums; background: linear-gradient(135deg, var(--primary), var(--accent)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .focus-pip-expand { font-size: 12px; color: var(--text-muted); background: none; border: 1px solid var(--border); border-radius: 20px; padding: 4px 12px; cursor: pointer; white-space: nowrap; } .focus-pip-expand:hover { color: var(--text); border-color: var(--text-muted); } /* ══════════════════════════════════════════════════════════════ RESULT PICKER (focus end) ══════════════════════════════════════════════════════════════ */ .result-options { display: flex; flex-direction: column; gap: 10px; } .result-btn { display: flex; align-items: center; gap: 14px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 14px; padding: 14px 16px; cursor: pointer; transition: border-color 0.15s, background 0.15s; text-align: left; width: 100%; } .result-btn:hover { border-color: var(--primary); } .result-complete:hover { border-color: #10b981; background: rgba(16,185,129,0.08); } .result-partial:hover { border-color: #f59e0b; background: rgba(245,158,11,0.08); } .result-invalid:hover { border-color: #ef4444; background: rgba(239,68,68,0.08); } .result-icon { font-size: 24px; flex-shrink: 0; } .result-label { font-size: 15px; font-weight: 700; color: var(--text); } .result-desc { font-size: 12px; color: var(--text-muted); display: block; margin-top: 2px; } /* ══════════════════════════════════════════════════════════════ MORNING MODAL ══════════════════════════════════════════════════════════════ */ .morning-options { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; } .morning-btn { display: flex; flex-direction: column; align-items: center; gap: 6px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 14px; padding: 16px 8px; cursor: pointer; transition: border-color 0.15s; } .morning-btn:hover { border-color: var(--primary); } .morning-btn span { font-size: 28px; } .morning-btn strong { font-size: 14px; color: var(--text); font-weight: 700; } .morning-btn small { font-size: 11px; color: var(--text-muted); } /* ══════════════════════════════════════════════════════════════ PROFILE — ENERGY & STREAK ══════════════════════════════════════════════════════════════ */ .energy-section { margin-bottom: 18px; } .energy-top { display: flex; justify-content: space-between; font-size: 13px; color: var(--text-muted); margin-bottom: 8px; } .energy-bar-high { background: linear-gradient(90deg, #10b981, #34d399) !important; } .energy-bar-mid { background: linear-gradient(90deg, #f59e0b, #fbbf24) !important; } .energy-bar-low { background: linear-gradient(90deg, #ef4444, #f87171) !important; } .streak-section { text-align: center; padding-top: 6px; } .streak-big { font-size: 44px; font-weight: 900; color: var(--accent); line-height: 1; } .streak-lbl { font-size: 12px; color: var(--text-muted); margin-top: 4px; } .streak-hint { font-size: 12px; color: var(--text-muted); margin-top: 6px; } /* ══════════════════════════════════════════════════════════════ REVIEW PAGE ══════════════════════════════════════════════════════════════ */ .review-summary { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 14px; } .review-stat { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 14px 8px; text-align: center; } .review-stat-val { font-size: 22px; font-weight: 800; color: var(--text); line-height: 1.1; } .review-stat-lbl { font-size: 11px; color: var(--text-muted); margin-top: 4px; } /* Bar chart */ .bar-chart { display: flex; gap: 6px; align-items: flex-end; height: 120px; padding: 0 4px; } .bar-col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px; height: 100%; } .bar-track { flex: 1; width: 100%; background: var(--surface-2); border-radius: 6px; display: flex; align-items: flex-end; overflow: hidden; } .bar-fill { width: 100%; border-radius: 6px 6px 0 0; transition: height 0.4s ease; min-height: 3px; } .bar-effective { background: linear-gradient(180deg, var(--primary-lt), var(--primary)); } .bar-partial { background: var(--surface-2); border: 1px solid var(--border); } .bar-empty { background: transparent; min-height: 0; } .bar-val { font-size: 9px; color: var(--text-muted); font-weight: 600; min-height: 12px; } .bar-label { font-size: 10px; color: var(--text-muted); } .bar-dot { width: 7px; height: 7px; border-radius: 50%; } .dot-on { background: var(--accent); } .dot-off { background: var(--surface-2); border: 1px solid var(--border); } /* Value distribution */ .dist-row { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; } .dist-label { flex-shrink: 0; width: 32px; } .dist-bar-track { flex: 1; height: 8px; background: var(--surface-2); border-radius: 999px; overflow: hidden; } .dist-bar-fill { height: 100%; border-radius: 999px; transition: width 0.4s; } .dist-pct { flex-shrink: 0; width: 34px; text-align: right; font-size: 12px; color: var(--text-muted); } /* Time distribution */ .time-dist-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; } .time-dist-item { display: flex; flex-direction: column; align-items: center; gap: 4px; background: var(--surface-2); border-radius: 12px; padding: 12px 8px; } .time-dist-icon { font-size: 20px; } .time-dist-val { font-size: 17px; font-weight: 700; color: var(--text); } .time-dist-lbl { font-size: 11px; color: var(--text-muted); } /* Top tasks */ .top-task-row { display: flex; justify-content: space-between; align-items: center; padding: 9px 0; border-bottom: 1px solid var(--border); } .top-task-row:last-child { border-bottom: none; } .top-task-name { font-size: 14px; color: var(--text); } .top-task-count { font-size: 13px; color: var(--text-muted); font-weight: 600; } /* Calibration */ .calibrate-row { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--border); } .calibrate-row:last-child { border-bottom: none; } .calibrate-emoji { font-size: 22px; flex-shrink: 0; } .calibrate-info { flex: 1; } .calibrate-name { font-size: 14px; color: var(--text); font-weight: 600; } .calibrate-sub { font-size: 12px; color: var(--text-muted); margin-top: 2px; } .calibrate-badge { flex-shrink: 0; font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: 6px; } .conf-warn { background: rgba(245,158,11,0.15); color: #f59e0b; } .conf-low { background: rgba(239,68,68,0.12); color: #ef4444; } /* ── Review toggle ── */ .review-toggle { display: flex; gap: 8px; margin-bottom: 14px; } .review-toggle-btn { flex: 1; padding: 8px 0; border-radius: 10px; font-size: 14px; font-weight: 600; border: 1px solid var(--border); background: var(--surface); color: var(--text-muted); cursor: pointer; transition: background 0.2s, color 0.2s; } .review-toggle-btn.active { background: var(--primary); color: #fff; border-color: var(--primary); } /* ── Month navigation ── */ .month-nav { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; } .month-nav-label { font-size: 16px; font-weight: 700; color: var(--text); } .month-nav-btn { background: var(--surface); border: 1px solid var(--border); color: var(--text); border-radius: 8px; width: 36px; height: 36px; font-size: 20px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 0.15s; } .month-nav-btn:disabled { opacity: 0.3; cursor: default; } .month-nav-btn:not(:disabled):hover { background: var(--surface-2); } /* ── Calendar grid ── */ .cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px 2px; } .cal-header-cell { text-align: center; font-size: 11px; font-weight: 700; color: var(--text-muted); padding: 4px 0 6px; } .cal-cell { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 5px 2px; border-radius: 8px; min-height: 52px; } .cal-cell-empty { background: none; } .cal-cell-today { background: rgba(139,92,246,0.12); } .cal-day-num { font-size: 12px; color: var(--text-muted); font-weight: 500; } .cal-today-num { color: var(--primary); font-weight: 800; } .cal-dot { width: 10px; height: 10px; border-radius: 50%; } .cal-dot-effective { background: var(--accent, #22c55e); } .cal-dot-partial { background: #f59e0b; } .cal-dot-empty { background: var(--surface-2); border: 1px solid var(--border); } .cal-dot-future { background: transparent; } .cal-xp { font-size: 9px; color: var(--text-muted); font-weight: 600; min-height: 11px; text-align: center; } /* Calendar legend */ .cal-legend { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 11px; color: var(--text-muted); margin-bottom: 10px; } .cal-legend .cal-dot { width: 8px; height: 8px; } /* ══════════════════════════════════════════════════════════════ SETTINGS — TASK MODAL EXTRAS ══════════════════════════════════════════════════════════════ */ .modal-box-tall { max-height: 94dvh; } .info-btn { background: none; border: none; color: var(--text-muted); font-size: 14px; cursor: pointer; padding: 0 4px; vertical-align: middle; opacity: 0.7; } .info-btn:hover { opacity: 1; } .field-tip { background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; font-size: 12px; color: var(--text-muted); line-height: 1.7; margin-top: 6px; } .field-tip b { color: var(--text); } .xp-preview-box { background: rgba(124,58,237,0.1); border: 1px solid rgba(124,58,237,0.3); border-radius: 10px; padding: 10px 14px; font-size: 13px; color: var(--text-muted); margin-bottom: 16px; text-align: center; } .xp-preview-box strong { color: var(--primary-lt); } /* ── Sync status banner ─────────────────────────────────────────────────────── */ #sync-banner { position: sticky; top: 0; z-index: 90; display: flex; align-items: center; justify-content: center; gap: 6px; padding: 5px 12px; font-size: 12px; font-weight: 500; transition: opacity 0.3s, max-height 0.3s; max-height: 32px; overflow: hidden; } #sync-banner.hidden { max-height: 0; padding: 0; opacity: 0; pointer-events: none; } #sync-banner.syncing { background: rgba(124,58,237,0.18); color: var(--text-muted); } #sync-banner.synced { background: rgba(16,185,129,0.15); color: #10b981; } /* count badge on task card */ .count-badge { position: absolute; top: 8px; right: 8px; background: var(--primary); color: white; font-size: 11px; font-weight: 700; width: 20px; height: 20px; border-radius: 50%; display: flex; align-items: center; justify-content: center; } /* ── Leaderboard ────────────────────────────────────────────────────────────── */ .lb-loading { text-align:center; color:var(--text-muted); padding:32px; font-size:13px; } .lb-tabs { display: flex; gap: 8px; margin-bottom: 10px; } .lb-tab { flex: 1; padding: 8px; border-radius: 10px; border: none; cursor: pointer; background: var(--card-bg); color: var(--text-muted); font-size: 13px; font-weight: 600; transition: background 0.2s, color 0.2s; } .lb-tab.active { background: var(--primary); color: #fff; } .lb-row { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--border); } .lb-row:last-child { border-bottom: none; } .lb-row-me { background: rgba(124,58,237,0.08); } .lb-rank { font-size: 18px; width: 32px; text-align: center; flex-shrink: 0; } .lb-avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--primary); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 15px; font-weight: 700; flex-shrink: 0; } .lb-info { flex: 1; min-width: 0; } .lb-name { font-size: 14px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .lb-sub { font-size: 11px; color: var(--text-muted); margin-top: 2px; } .lb-you { font-size: 10px; background: var(--primary); color: #fff; border-radius: 4px; padding: 1px 5px; margin-left: 4px; } .lb-score { text-align: right; flex-shrink: 0; } .lb-score-val { font-size: 15px; font-weight: 700; color: var(--primary-lt); } .lb-score-lbl { font-size: 10px; color: var(--text-muted); margin-top: 2px; } /* ══════════════════════════════════════════════════════════════ TODAY'S PLAN (本日計劃) ══════════════════════════════════════════════════════════════ */ .plan-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 6px; } .plan-empty { text-align: center; color: var(--text-muted); font-size: 13px; padding: 14px 0; opacity: .7; } .plan-card { display: flex; align-items: center; gap: 10px; background: var(--surface); border: 1px solid var(--border); border-left: 3px solid var(--primary); border-radius: 12px; padding: 10px 12px; cursor: pointer; transition: background .15s, opacity .15s; } .plan-card:active { opacity: .75; } .plan-card-done { border-left-color: #10b981; opacity: .7; } .plan-task-emoji { font-size: 22px; flex-shrink: 0; } .plan-icon-img { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; } .plan-task-info { flex: 1; min-width: 0; } .plan-task-name { font-size: 14px; font-weight: 600; color: var(--text); } .plan-task-xp { font-size: 11px; color: var(--text-muted); margin-top: 2px; } .plan-count-badge { background: var(--primary); color: #fff; font-size: 11px; font-weight: 700; border-radius: 999px; padding: 1px 7px; flex-shrink: 0; } .plan-remove-btn { background: none; border: none; color: var(--text-muted); font-size: 16px; cursor: pointer; padding: 2px 6px; flex-shrink: 0; border-radius: 6px; transition: background .15s; } .plan-remove-btn:hover { background: rgba(239,68,68,.15); color: var(--danger); } /* In-plan indicator on task card */ .task-card-in-plan { border-color: var(--primary); } .plan-indicator { font-size: 12px; } /* ══════════════════════════════════════════════════════════════ DRAG & DROP ══════════════════════════════════════════════════════════════ */ .drag-handle { position: absolute; top: 6px; right: 6px; color: var(--text-muted); font-size: 13px; line-height: 1; cursor: grab; opacity: .4; letter-spacing: -1px; padding: 2px 3px; border-radius: 4px; transition: opacity .15s; user-select: none; -webkit-user-select: none; touch-action: none; } .task-card:hover .drag-handle { opacity: .75; } .drag-handle:active { cursor: grabbing; opacity: 1; } .task-card { position: relative; } /* needed for drag-handle absolute positioning */ .drag-placeholder { opacity: .25 !important; } .drag-over { outline: 2px dashed var(--primary); outline-offset: 2px; transform: scale(1.02); } /* ══════════════════════════════════════════════════════════════ PROFILE — TITLE TEMPLATE PICKER ══════════════════════════════════════════════════════════════ */ .title-tmpl-row { display: flex; flex-wrap: wrap; gap: 8px; } .title-tmpl-btn { background: var(--surface-2); border: 1px solid var(--border); color: var(--text); border-radius: 20px; padding: 6px 14px; font-size: 13px; cursor: pointer; transition: background .15s, border-color .15s; } .title-tmpl-btn:hover { border-color: var(--primary); } .title-tmpl-btn.active { background: var(--primary); border-color: var(--primary); color: #fff; } /* ══════════════════════════════════════════════════════════════ HEADER — ENERGY BAR ══════════════════════════════════════════════════════════════ */ .hdr-bars-section { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; } .hdr-energy-row { display: flex; align-items: center; gap: 6px; } .hdr-energy-label { font-size: 11px; color: var(--text-muted); flex-shrink: 0; } .energy-bar-track { flex: 1; height: 5px; background: var(--surface-2); border-radius: 999px; overflow: hidden; } .energy-bar-fill { height: 100%; border-radius: 999px; background: #10b981; transition: width .4s ease, background .3s; } .energy-bar-fill.energy-mid { background: #f59e0b; } .energy-bar-fill.energy-low { background: #ef4444; } .hdr-energy-text { font-size: 11px; color: var(--text-muted); flex-shrink: 0; min-width: 24px; text-align: right; } /* ══════════════════════════════════════════════════════════════ FOCUS — EARLY END CONFIRM (motivational quote) ══════════════════════════════════════════════════════════════ */ .motivational-quote { background: var(--surface-2); border-left: 3px solid var(--primary); border-radius: 8px; padding: 12px 14px; font-size: 13px; color: var(--text-muted); font-style: italic; line-height: 1.6; text-align: left; } /* ══════════════════════════════════════════════════════════════ FOCUS — SKIP DURATION PICKER ══════════════════════════════════════════════════════════════ */ .skip-duration-section { margin: 16px 0 4px; } .skip-duration-label { font-size: 12px; color: var(--text-muted); margin-bottom: 8px; } .skip-duration-pills { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; } .skip-dur-btn { background: var(--surface-2); border: 1px solid var(--border); color: var(--text); border-radius: 20px; padding: 6px 14px; font-size: 13px; cursor: pointer; transition: background .15s, border-color .15s; } .skip-dur-btn:hover { border-color: var(--primary); } .skip-dur-btn.active { background: var(--primary); border-color: var(--primary); color: #fff; } /* ══════════════════════════════════════════════════════════════ THEME OVERRIDES — 日系簡約 (Wabi) Warm parchment, serif font, minimal rounding, ink-style borders ══════════════════════════════════════════════════════════════ */ [data-theme="wabi"] body { font-family: 'Hiragino Mincho Pro', 'Yu Mincho', 'BIZ UDPMincho', 'Noto Serif CJK TC', Georgia, serif; } [data-theme="wabi"] .card, [data-theme="wabi"] .task-card, [data-theme="wabi"] .plan-card { border-radius: 4px; box-shadow: 0 1px 4px rgba(26,21,16,0.1); border: 1px solid var(--border); } [data-theme="wabi"] #header { border-bottom: 1px solid var(--border); box-shadow: none; } [data-theme="wabi"] nav { border-top: 1px solid var(--border); box-shadow: none; } [data-theme="wabi"] .btn-primary { background: var(--primary); border-radius: 2px; } [data-theme="wabi"] .badge { border-radius: 2px; } [data-theme="wabi"] .xp-bar-fill, [data-theme="wabi"] .energy-bar-fill { background: var(--primary); } [data-theme="wabi"] .hdr-title { color: var(--primary); } /* ══════════════════════════════════════════════════════════════ THEME OVERRIDES — Material Design 3 Dark Large rounded cards, tinted surfaces, elevation shadows ══════════════════════════════════════════════════════════════ */ [data-theme="material"] body { font-family: Roboto, 'Noto Sans', system-ui, sans-serif; } [data-theme="material"] .card { border-radius: 28px; box-shadow: 0 2px 12px rgba(0,0,0,0.35); border: none; } [data-theme="material"] .task-card { border-radius: 20px; box-shadow: 0 1px 6px rgba(0,0,0,0.3); } [data-theme="material"] .plan-card { border-radius: 16px; } [data-theme="material"] .btn, [data-theme="material"] .btn-primary, [data-theme="material"] .btn-outline { border-radius: 20px; } [data-theme="material"] .badge { border-radius: 8px; } [data-theme="material"] nav { border-radius: 28px 28px 0 0; border-top: none; box-shadow: 0 -4px 20px rgba(0,0,0,0.4); } [data-theme="material"] .modal-box { border-radius: 28px; } [data-theme="material"] input, [data-theme="material"] select, [data-theme="material"] textarea { border-radius: 12px; } [data-theme="material"] .xp-bar-fill { background: var(--primary); } [data-theme="material"] .hdr-title { color: var(--primary); } /* ══════════════════════════════════════════════════════════════ THEME OVERRIDES — 賽博龐克 (Cyberpunk) Sharp edges, neon glow, monospace numerics ══════════════════════════════════════════════════════════════ */ [data-theme="cyberpunk"] .card, [data-theme="cyberpunk"] .task-card, [data-theme="cyberpunk"] .plan-card { border-radius: 0; border: 1px solid rgba(0,255,159,0.25); box-shadow: 0 0 10px rgba(0,255,159,0.08); } [data-theme="cyberpunk"] .btn-primary { border-radius: 0; box-shadow: 0 0 12px rgba(0,255,159,0.4); text-transform: uppercase; letter-spacing: .05em; } [data-theme="cyberpunk"] .btn-outline { border-radius: 0; border-color: rgba(0,255,159,0.4); } [data-theme="cyberpunk"] .badge { border-radius: 0; } [data-theme="cyberpunk"] .modal-box { border-radius: 0; border: 1px solid rgba(0,255,159,0.4); box-shadow: 0 0 30px rgba(0,255,159,0.15); } [data-theme="cyberpunk"] nav { border-top: 1px solid rgba(0,255,159,0.2); box-shadow: 0 -4px 20px rgba(0,255,159,0.08); } [data-theme="cyberpunk"] #header { border-bottom: 1px solid rgba(0,255,159,0.2); } /* Neon glow on active/primary elements */ [data-theme="cyberpunk"] .xp-bar-fill { background: var(--primary); box-shadow: 0 0 8px rgba(0,255,159,0.6); } [data-theme="cyberpunk"] .energy-bar-fill { background: var(--primary); box-shadow: 0 0 8px rgba(0,255,159,0.6); } [data-theme="cyberpunk"] .hdr-title { color: var(--primary); text-shadow: 0 0 8px rgba(0,255,159,0.5); } [data-theme="cyberpunk"] #hdr-level { color: var(--primary); text-shadow: 0 0 10px rgba(0,255,159,0.6); } /* Monospace for timer and numeric displays */ [data-theme="cyberpunk"] #focus-timer, [data-theme="cyberpunk"] .stat-pill-val, [data-theme="cyberpunk"] .hdr-xp-text, [data-theme="cyberpunk"] .hdr-energy-text { font-family: 'Courier New', Consolas, monospace; } /* Accent color on nav active */ [data-theme="cyberpunk"] .nav-item.active { color: var(--primary); text-shadow: 0 0 8px rgba(0,255,159,0.5); } /* ─── Onboarding Tour ────────────────────────────────────────────────────────── */ /* Blocks accidental page interaction during tour */ .tour-backdrop { position: fixed; inset: 0; z-index: 9000; pointer-events: all; background: transparent; } /* Extra dim for the centered (no-spotlight) step */ .tour-backdrop-center { background: rgba(0, 0, 0, 0.72); } /* Spotlight — box-shadow creates the dark overlay around the hole */ .tour-spot { position: fixed; z-index: 9001; pointer-events: none; border-radius: 10px; box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.72); outline: 2px solid var(--primary, #7c6af7); outline-offset: 1px; transition: all 0.25s ease; } /* Tooltip card */ .tour-tooltip { position: fixed; z-index: 9010; background: var(--card-bg, #1e1e3a); border: 1px solid var(--border, #2e2e5a); border-radius: 14px; padding: 16px; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.55); pointer-events: all; } /* Centered variant */ .tour-tooltip-center { position: fixed !important; left: 50% !important; top: 50% !important; transform: translate(-50%, -50%) !important; width: 288px !important; } .tour-title { font-size: 15px; font-weight: 700; color: var(--primary, #7c6af7); margin-bottom: 8px; } .tour-body { font-size: 13px; color: var(--text-secondary, #aaaacc); line-height: 1.55; margin-bottom: 14px; } .tour-footer { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .tour-counter { font-size: 12px; color: var(--text-muted, #666688); flex-shrink: 0; } .tour-actions { display: flex; gap: 8px; align-items: center; } .tour-skip { background: none; border: none; color: var(--text-muted, #666688); font-size: 13px; cursor: pointer; padding: 4px 6px; border-radius: 6px; } .tour-skip:hover { color: var(--text-secondary); } .tour-next { background: var(--primary, #7c6af7); color: #fff; border: none; border-radius: 8px; padding: 6px 14px; font-size: 13px; font-weight: 600; cursor: pointer; white-space: nowrap; } .tour-next:hover { opacity: 0.88; } /* ─── Page slide animation ────────────────────────────────────────────────────── */ @keyframes _slideFromLeft { from { transform: translateX(-32px); opacity: 0.3; } to { transform: translateX(0); opacity: 1; } } @keyframes _slideFromRight { from { transform: translateX(32px); opacity: 0.3; } to { transform: translateX(0); opacity: 1; } } main.page-slide-left { animation: _slideFromRight 0.22s cubic-bezier(0.25, 0.46, 0.45, 0.94) both; } main.page-slide-right { animation: _slideFromLeft 0.22s cubic-bezier(0.25, 0.46, 0.45, 0.94) both; } /* ─── Page dot indicator ─────────────────────────────────────────────────────── */ .page-dots { display: flex; justify-content: center; align-items: center; gap: 5px; height: 16px; flex-shrink: 0; background: var(--surface); border-top: 1px solid var(--border); } .page-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--border); cursor: pointer; transition: width 0.25s ease, border-radius 0.25s ease, background 0.25s ease; flex-shrink: 0; } .page-dot.active { width: 16px; border-radius: 3px; background: var(--primary-lt); }