*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}:root{--bg: #0a0a0a;--surface: #1a1a1a;--primary: #00d4aa;--primary-dim: rgba(0, 212, 170, .15);--accent: #ff6b6b;--text: #ffffff;--text-dim: #888888;--danger: #ff4757}html,body{height:100%;overflow:hidden}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;background:var(--bg);color:var(--text);display:flex;justify-content:center;align-items:center;min-height:100vh;min-height:100dvh;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}#app-container{width:100%;max-width:480px;height:100%;display:flex;flex-direction:column;position:relative}.header{padding:16px 20px;display:flex;justify-content:center;align-items:center;gap:12px;position:relative}.version-badge{position:absolute;left:16px;font-size:11px;color:var(--text-dim);font-weight:500;letter-spacing:.5px}.sync-indicator{position:absolute;right:16px;background:var(--surface);padding:4px 8px;border-radius:10px;font-size:11px;color:var(--text-dim)}.sync-indicator.syncing{animation:pulse 1.5s infinite}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}.mode-btn{background:var(--surface);border:none;border-radius:20px;padding:8px 16px;color:var(--text-dim);font-size:14px;cursor:pointer;display:flex;align-items:center;gap:6px;transition:all .15s;box-shadow:0 2px 8px #0000004d}.mode-btn:active{background:#2a2a2a;box-shadow:0 1px 4px #0000004d,inset 0 1px 3px #0003}.mode-icon{font-size:12px}.mode-text{max-width:140px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.main{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding:12px 20px;gap:16px;overflow-y:auto;-webkit-overflow-scrolling:touch}.breath-container{position:relative;width:260px;height:260px;display:flex;flex-direction:column;align-items:center;justify-content:center;flex-shrink:0}@media (min-height: 700px){.breath-container{width:300px;height:300px}}.progress-ring{position:absolute;width:100%;height:100%;transform:rotate(-90deg);pointer-events:none}.progress-ring-bg{fill:none;stroke:var(--primary-dim);stroke-width:4;opacity:.3}.progress-ring-fill{fill:none;stroke:var(--primary);stroke-width:4;stroke-linecap:round;stroke-dasharray:848.2;stroke-dashoffset:0;transition:stroke-dashoffset .3s ease-out,stroke .3s,opacity .3s}.progress-ring-fill.warning{stroke:var(--accent)}.progress-ring-fill.paused{opacity:.5}.pause-indicator{position:absolute;width:60px;height:60px;background:#000000b3;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);border-radius:50%;display:none;align-items:center;justify-content:center;font-size:24px;color:var(--primary);animation:pause-pulse 1.5s ease-in-out infinite}.pause-indicator.show{display:flex}@keyframes pause-pulse{0%,to{transform:scale(1);opacity:.8}50%{transform:scale(1.1);opacity:1}}.breath-ring{position:absolute;width:100%;height:100%;border:3px solid var(--primary-dim);border-radius:50%;will-change:transform,opacity,box-shadow}.breath-ring.inhale{border-color:var(--primary);box-shadow:0 0 30px #00d4aa66,inset 0 0 20px #00d4aa1a}.breath-ring.exhale{border-color:var(--primary-dim);box-shadow:none}.timer-display{font-size:72px;font-weight:200;font-variant-numeric:tabular-nums;letter-spacing:-2px;transition:color .3s}.timer-display.warning{color:var(--accent)}.timer-display.running{color:var(--primary)}.breath-text{font-size:14px;color:var(--text-dim);margin-top:8px;height:20px}.controls{display:flex;gap:16px}.btn{min-width:120px;min-height:56px;border:none;border-radius:28px;font-size:18px;font-weight:600;cursor:pointer;transition:all .15s;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 12px #0000004d}.btn:active{transform:scale(.96);box-shadow:0 2px 6px #0000004d,inset 0 1px 3px #0003}.btn-primary{background:var(--primary);color:var(--bg);min-width:160px}.btn-secondary{background:var(--surface);color:var(--text);min-width:56px;font-size:24px}.presets{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}.preset{background:var(--surface);border:2px solid transparent;border-radius:20px;padding:10px 16px;color:var(--text-dim);font-size:14px;cursor:pointer;transition:all .15s;box-shadow:0 2px 8px #0003}.preset:active{transform:scale(.96);box-shadow:0 1px 4px #0003,inset 0 1px 3px #0003}.preset.active{border-color:var(--primary);color:var(--primary);background:var(--primary-dim)}.stats{display:flex;gap:32px;padding:16px 24px;background:var(--surface);border-radius:16px}.stat-item{display:flex;flex-direction:column;align-items:center;gap:4px}.stat-value{font-size:24px;font-weight:600;color:var(--primary)}.stat-label{font-size:12px;color:var(--text-dim)}.mode-selector{position:absolute;top:70px;left:50%;transform:translate(-50%) translateY(-10px);background:var(--surface);border-radius:16px;padding:8px;opacity:0;visibility:hidden;transition:opacity .2s ease-out,transform .25s cubic-bezier(.34,1.56,.64,1),visibility .2s;z-index:100;min-width:200px;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}.mode-selector.show{opacity:1;visibility:visible;transform:translate(-50%) translateY(0)}.mode-option{display:flex;align-items:center;gap:12px;padding:12px 16px;border-radius:12px;cursor:pointer;transition:background .15s}.mode-option:active{background:#2a2a2a}.mode-option.selected{background:var(--primary-dim)}.mode-emoji{font-size:20px}.custom-time-modal{position:absolute;top:0;right:0;bottom:0;left:0;background:#0009;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;opacity:0;visibility:hidden;transition:all .25s cubic-bezier(.34,1.56,.64,1);z-index:200}.custom-time-modal.show{opacity:1;visibility:visible}.modal-content{background:var(--surface);border-radius:20px;padding:24px;width:280px;text-align:center}.modal-content h3{font-size:18px;font-weight:600;margin-bottom:20px}.custom-input-group{display:flex;align-items:center;justify-content:center;gap:8px;margin-bottom:24px}.custom-input-group input{width:100px;background:var(--bg);border:none;border-radius:12px;padding:12px;font-size:24px;color:var(--text);text-align:center;-moz-appearance:textfield}.custom-input-group input::-webkit-outer-spin-button,.custom-input-group input::-webkit-inner-spin-button{-webkit-appearance:none}.modal-buttons{display:flex;gap:12px;justify-content:center}.modal-buttons .btn{min-width:100px;min-height:48px;font-size:16px}.completion-overlay{position:absolute;top:0;right:0;bottom:0;left:0;background:#0a0a0ad9;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);display:flex;align-items:center;justify-content:center;opacity:0;visibility:hidden;transition:all .3s cubic-bezier(.34,1.56,.64,1);z-index:300}.completion-overlay.show{opacity:1;visibility:visible}.completion-content{text-align:center;position:relative}.completion-icon{font-size:80px;margin-bottom:16px}.completion-time{font-size:48px;font-weight:200;color:var(--primary);margin-bottom:4px}.completion-stats{font-size:14px;color:var(--text-dim);margin-bottom:8px}.completion-stats.perfect{color:var(--primary)}.completion-message{font-size:18px;color:var(--text-dim);margin-bottom:32px}.confetti{position:absolute;top:50%;left:50%;width:4px;height:4px;pointer-events:none}.confetti-particle{position:absolute;width:8px;height:8px;border-radius:50%;animation:confetti-fall 1.5s ease-out forwards}@keyframes confetti-fall{0%{transform:translate(-50%,-50%) scale(1);opacity:1}to{transform:translate(var(--tx),var(--ty)) scale(0);opacity:0}}.checkpoint{position:absolute;bottom:30%;font-size:14px;color:var(--accent);opacity:0;transition:opacity .3s;text-align:center;width:100%}.checkpoint.show{animation:checkpoint-pulse 2s ease-out}@keyframes checkpoint-pulse{0%,to{opacity:0}20%,80%{opacity:1}}@keyframes shake{0%,to{transform:translate(-50%) translate(0)}25%{transform:translate(-50%) translate(-5px)}75%{transform:translate(-50%) translate(5px)}}.guide-card{position:absolute;bottom:-60px;left:50%;transform:translate(-50%) translateY(10px);background:linear-gradient(135deg,var(--primary-dim),var(--surface));border:1px solid var(--primary);border-radius:20px;padding:12px 20px;max-width:300px;opacity:0;visibility:hidden;transition:opacity .4s ease-out,transform .4s ease-out,visibility .4s;box-shadow:0 4px 20px #00d4aa33;text-align:center;font-size:14px;color:var(--text);line-height:1.5}.guide-card.show{opacity:1;visibility:visible;transform:translate(-50%) translateY(0)}body{user-select:none;-webkit-user-select:none}button,.action-btn,.preset,.mode-btn,.mode-option,.btn,.history-tab,.leaderboard-type-btn,.lang-btn,.settings-action-btn{touch-action:manipulation;-webkit-tap-highlight-color:transparent;cursor:pointer}.mode-selector,.custom-time-modal,.completion-overlay,.history-overlay,.leaderboard-overlay,.login-modal,.settings-overlay{touch-action:manipulation}.history-overlay{position:absolute;top:0;right:0;bottom:0;left:0;background:#000000b3;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);display:flex;align-items:flex-end;justify-content:center;opacity:0;visibility:hidden;transition:all .3s cubic-bezier(.34,1.56,.64,1);z-index:400}.history-overlay.show{opacity:1;visibility:visible}.history-content{width:100%;max-width:480px;max-height:70vh;background:var(--surface);border-radius:24px 24px 0 0;padding:20px;display:flex;flex-direction:column}.history-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.history-header h3{font-size:18px;font-weight:600}.history-close{background:none;border:none;color:var(--text-dim);font-size:28px;cursor:pointer;padding:0;line-height:1}.history-list{overflow-y:auto;flex:1}.history-item{display:flex;justify-content:space-between;align-items:center;padding:12px 0;border-bottom:1px solid #2a2a2a}.history-item:last-child{border-bottom:none}.history-item-left{display:flex;flex-direction:column;gap:4px}.history-item-date{font-size:14px;color:var(--text)}.history-item-mode{font-size:12px;color:var(--text-dim)}.history-item-right{text-align:right}.history-item-duration{font-size:18px;font-weight:600;color:var(--primary)}.history-item-pause{font-size:12px;color:var(--text-dim)}.history-empty{text-align:center;color:var(--text-dim);padding:40px 0;font-size:14px}.history-tabs{display:flex;gap:8px}.history-tab{background:none;border:none;color:var(--text-dim);font-size:14px;padding:8px 12px;cursor:pointer;border-radius:8px;transition:all .15s}.history-tab:active{background:#ffffff1a}.history-tab.active{background:var(--primary-dim);color:var(--primary)}.leaderboard-type-selector{display:flex;gap:8px;margin-bottom:16px;overflow-x:auto;padding-bottom:4px}.leaderboard-type-btn{background:var(--bg);border:none;color:var(--text-dim);font-size:12px;padding:8px 12px;border-radius:16px;cursor:pointer;white-space:nowrap;transition:all .15s}.leaderboard-type-btn:active{background:#ffffff1a}.leaderboard-type-btn.active{background:var(--primary);color:var(--bg)}.leaderboard-item{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid #2a2a2a}.leaderboard-item:last-child{border-bottom:none}.leaderboard-rank{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:600;background:var(--surface)}.leaderboard-rank.top-1{background:linear-gradient(135deg,gold,#fa0);color:#000}.leaderboard-rank.top-2{background:linear-gradient(135deg,silver,#a0a0a0);color:#000}.leaderboard-rank.top-3{background:linear-gradient(135deg,#cd7f32,sienna);color:#fff}.leaderboard-info{flex:1}.leaderboard-nickname{font-size:14px;color:var(--text)}.leaderboard-value{font-size:18px;font-weight:600;color:var(--primary)}.leaderboard-empty{text-align:center;color:var(--text-dim);padding:40px 0;font-size:14px}.leaderboard-list{overflow-y:auto;flex:1}.trend-panel{padding:16px 0}.trend-panel canvas{max-height:300px}.trend-empty{text-align:center;color:var(--text-dim);padding:40px 0;font-size:14px}.leaderboard-overlay{position:absolute;top:0;right:0;bottom:0;left:0;background:#000000b3;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);display:flex;align-items:flex-end;justify-content:center;opacity:0;visibility:hidden;transition:all .3s cubic-bezier(.34,1.56,.64,1);z-index:400}.leaderboard-overlay.show{opacity:1;visibility:visible}.leaderboard-content{width:100%;max-width:480px;max-height:70vh;background:var(--surface);border-radius:24px 24px 0 0;padding:20px;display:flex;flex-direction:column}.action-buttons{display:flex;gap:12px;width:100%;margin-top:16px}.action-btn{flex:1;display:flex;align-items:center;justify-content:center;gap:8px;padding:14px 20px;background:var(--surface);border:none;border-radius:16px;color:var(--text);font-size:15px;font-weight:500;cursor:pointer;transition:all .15s;box-shadow:0 2px 8px #0003}.action-btn:active{transform:scale(.96);background:#2a2a2a}.action-icon{font-size:18px}.login-modal{position:absolute;top:0;right:0;bottom:0;left:0;background:#000000b3;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;opacity:0;visibility:hidden;transition:all .25s cubic-bezier(.34,1.56,.64,1);z-index:500}.login-modal.show{opacity:1;visibility:visible}.login-content{background:var(--surface);border-radius:20px;padding:24px;width:300px}.login-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}.login-header h3{font-size:18px;font-weight:600}.login-close{background:none;border:none;color:var(--text-dim);font-size:28px;cursor:pointer;padding:0;line-height:1}.login-form{display:flex;flex-direction:column;gap:12px}.login-input-group input{width:100%;background:var(--bg);border:none;border-radius:12px;padding:14px 16px;font-size:15px;color:var(--text);outline:none;transition:box-shadow .15s}.login-input-group input::placeholder{color:var(--text-dim)}.login-input-group input:focus{box-shadow:0 0 0 2px var(--primary)}.login-error{color:var(--accent);font-size:13px;text-align:center;padding:8px;background:#ff6b6b1a;border-radius:8px}.login-buttons{display:flex;gap:12px;margin-top:8px}.login-buttons .btn{flex:1;min-width:auto;min-height:48px;font-size:15px}.settings-btn{background:var(--surface);border:none;border-radius:50%;width:40px;height:40px;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:18px;transition:all .15s;box-shadow:0 2px 8px #0000004d}.settings-btn:active{transform:scale(.95)}.settings-icon{font-size:18px}.settings-overlay{position:absolute;top:0;right:0;bottom:0;left:0;background:#000000b3;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);display:flex;align-items:flex-end;justify-content:center;opacity:0;visibility:hidden;transition:all .3s cubic-bezier(.34,1.56,.64,1);z-index:450}.settings-overlay.show{opacity:1;visibility:visible}.settings-content{width:100%;max-width:480px;max-height:85vh;background:var(--surface);border-radius:24px 24px 0 0;display:flex;flex-direction:column}.settings-header{display:flex;justify-content:space-between;align-items:center;padding:20px 20px 16px;border-bottom:1px solid #2a2a2a}.settings-header h3{font-size:18px;font-weight:600;color:var(--text)}.settings-close{background:none;border:none;color:var(--text-dim);font-size:28px;cursor:pointer;padding:0;line-height:1}.settings-scroll{flex:1;overflow-y:auto;padding:20px}.profile-header{display:flex;flex-direction:column;align-items:center;gap:16px;margin-bottom:24px}.profile-avatar-wrapper{position:relative}.profile-avatar{width:80px;height:80px;border-radius:50%;background:var(--primary-dim);display:flex;align-items:center;justify-content:center;font-size:40px}.profile-nickname{width:100%;background:var(--bg);border:none;border-radius:12px;padding:14px 16px;font-size:16px;color:var(--text);text-align:center;outline:none}.profile-nickname:focus{box-shadow:0 0 0 2px var(--primary)}.profile-nickname::placeholder{color:var(--text-dim)}.profile-stats{display:flex;justify-content:center;gap:48px;margin-bottom:16px}.profile-stat{display:flex;flex-direction:column;align-items:center;gap:4px}.profile-stat .stat-num{font-size:28px;font-weight:600;color:var(--primary)}.profile-stat .stat-label{font-size:12px;color:var(--text-dim)}.profile-email{text-align:center;font-size:13px;color:var(--text-dim);padding:12px;background:var(--bg);border-radius:12px}.settings-group{margin-bottom:28px}.settings-group:last-child{margin-bottom:0}.settings-group-title{font-size:12px;color:var(--text-dim);text-transform:uppercase;letter-spacing:1px;margin-bottom:12px}.settings-row{display:flex;justify-content:space-between;align-items:center;padding:14px 0;border-bottom:1px solid #2a2a2a}.settings-row:last-child{border-bottom:none}.settings-row span{font-size:15px;color:var(--text)}.toggle{position:relative;width:48px;height:28px}.toggle input{opacity:0;width:0;height:0}.toggle-slider{position:absolute;cursor:pointer;top:0;right:0;bottom:0;left:0;background:var(--bg);border-radius:28px;transition:.3s}.toggle-slider:before{content:"";position:absolute;width:22px;height:22px;left:3px;bottom:3px;background:var(--text-dim);border-radius:50%;transition:.3s}.toggle input:checked+.toggle-slider{background:var(--primary)}.toggle input:checked+.toggle-slider:before{transform:translate(20px);background:#fff}.language-selector{display:flex;gap:8px}.lang-btn{flex:1;padding:14px 8px;background:var(--bg);border:2px solid transparent;border-radius:12px;color:var(--text);font-size:14px;cursor:pointer;transition:all .15s}.lang-btn:active{transform:scale(.98)}.lang-btn.active{border-color:var(--primary);background:var(--primary-dim);color:var(--primary)}.settings-select{background:var(--bg);border:none;border-radius:8px;padding:10px 14px;color:var(--text);font-size:14px;cursor:pointer;outline:none}.settings-select:focus{box-shadow:0 0 0 2px var(--primary)}.settings-action-btn{width:100%;padding:14px;background:var(--surface);border:1px solid #2a2a2a;border-radius:12px;color:var(--text);font-size:15px;cursor:pointer;transition:all .15s}.settings-action-btn:active{transform:scale(.98);background:#2a2a2a}.settings-action-btn.danger{color:var(--danger);border-color:var(--danger);background:#ff47571a}.settings-action-btn.danger:active{background:#ff475733}