:root{--bg: #0f0f13;--surface: #1a1a24;--surface-hover: #24243a;--accent: #6c5ce7;--accent-glow: rgba(108, 92, 231, .3);--text: #e8e8f0;--text-dim: #8888a0;--success: #00cec9;--warning: #fdcb6e;--danger: #ff6b6b;--radius: 12px;--input-border: #333}[data-theme=light]{--bg: #f5f5f7;--surface: #ffffff;--surface-hover: #e8e8ec;--accent: #6c5ce7;--accent-glow: rgba(108, 92, 231, .2);--text: #1a1a24;--text-dim: #666670;--success: #00b894;--warning: #f39c12;--danger: #e74c3c;--input-border: #ccc}*{margin:0;padding:0;box-sizing:border-box}html,body,#root{height:100%;width:100%}body{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;background:var(--bg);color:var(--text);overflow-x:hidden;transition:background .2s,color .2s}#root{display:flex;flex-direction:column;align-items:center;min-height:100vh;padding:20px}.app-header{width:100%;max-width:500px;display:flex;align-items:center;justify-content:center;gap:16px;margin-bottom:20px;position:relative}h1{font-size:1.5rem;font-weight:700;letter-spacing:-.02em;color:var(--text);margin:0}.top-controls{position:static;display:flex;gap:8px}.app-main{display:flex;flex-direction:column;align-items:center;width:100%}.settings-panel{width:100%;max-width:500px;display:flex;flex-direction:column;gap:12px;margin-bottom:24px}.setting-group{background:var(--surface);border-radius:var(--radius);padding:12px 16px;display:flex;flex-direction:column;gap:8px;transition:background .2s}.setting-group-header{display:flex;align-items:center;justify-content:space-between;gap:12px}.setting-group-title{font-size:.85rem;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--text)}.setting-row.compact{padding-left:8px;min-height:32px}.setting-row{display:flex;align-items:center;justify-content:space-between;gap:12px}.setting-label{font-size:.95rem;font-weight:500;flex-shrink:0}.toggle-group{display:flex;gap:6px;flex-wrap:wrap}.toggle-btn{padding:8px 16px;border:none;border-radius:8px;background:transparent;color:var(--text-dim);font-size:.85rem;font-weight:600;cursor:pointer;transition:all .15s ease}.toggle-btn:hover{background:var(--surface-hover);color:var(--text)}.toggle-btn.active{background:var(--accent);color:#fff;box-shadow:0 2px 12px var(--accent-glow)}.switch{position:relative;width:48px;height:28px;flex-shrink:0}.switch input{opacity:0;width:0;height:0}.switch-slider{position:absolute;cursor:pointer;inset:0;background-color:#333;border-radius:28px;transition:.2s}[data-theme=light] .switch-slider{background-color:#ccc}.switch-slider:before{content:"";position:absolute;height:22px;width:22px;left:3px;bottom:3px;background-color:#fff;border-radius:50%;transition:.2s}.switch input:checked+.switch-slider{background-color:var(--accent)}.switch input:checked+.switch-slider:before{transform:translate(20px)}.num-input{width:70px;padding:6px 10px;border:2px solid var(--input-border);border-radius:8px;background:var(--bg);color:var(--text);font-size:.9rem;font-weight:600;text-align:center;outline:none;transition:border-color .15s}.num-input:focus{border-color:var(--accent)}.num-input.goal-input{width:60px;padding:4px 8px;font-size:.85rem}.timer-section{display:flex;flex-direction:column;align-items:center}.timer-container{position:relative;width:320px;height:320px;margin:10px 0 20px;cursor:pointer;-webkit-tap-highlight-color:transparent}.timer-container>svg.timer-ring{width:100%;height:100%;transform:rotate(-90deg)}.lang-picker{position:relative;z-index:50}.lang-btn,.theme-btn,.coffee-btn{width:40px;height:40px;border-radius:50%;border:2px solid var(--input-border);background:var(--surface);color:var(--text-dim);font-size:1.1rem;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .15s;text-decoration:none}.lang-btn:hover,.theme-btn:hover,.coffee-btn:hover{border-color:var(--accent);color:var(--text)}.lang-dropdown{position:absolute;top:48px;right:0;background:var(--surface);border:1px solid var(--input-border);border-radius:var(--radius);overflow:hidden;min-width:140px;box-shadow:0 8px 24px #0006;z-index:100}.lang-option{display:flex;align-items:center;gap:10px;padding:10px 16px;border:none;background:transparent;color:var(--text);font-size:.9rem;cursor:pointer;width:100%;text-align:left;transition:background .1s}.lang-option:hover{background:var(--surface-hover)}.lang-option.active{color:var(--accent);font-weight:600}.timer-bg-circle{fill:none;stroke:var(--surface);stroke-width:8}.timer-progress-circle{fill:none;stroke:var(--accent);stroke-width:8;stroke-linecap:round;transition:stroke-dashoffset .1s linear;filter:drop-shadow(0 0 8px var(--accent-glow))}.timer-center{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:8px;pointer-events:none}.timer-time{font-size:3rem;font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:-.02em;line-height:1}.timer-play-icon{width:72px;height:72px;opacity:.5;transition:opacity .15s}.timer-container:hover .timer-play-icon{opacity:.8}.summary{text-align:center;margin-bottom:20px;display:flex;flex-direction:column;gap:4px}.summary-line{font-size:.85rem;color:var(--text-dim);white-space:pre}.summary-example{font-size:.78rem;color:var(--text-dim);opacity:.7;font-style:italic}.reset-btn{padding:10px 32px;border:2px solid var(--input-border);border-radius:10px;background:transparent;color:var(--text-dim);font-size:.9rem;font-weight:600;cursor:pointer;transition:all .15s}.reset-btn:hover{border-color:var(--danger);color:var(--danger)}.keyboard-hint{margin-top:24px;color:var(--text-dim);font-size:.85rem;opacity:.7;display:flex;align-items:center;gap:8px}@media(hover:none)and (pointer:coarse){.keyboard-hint{display:none}}.keyboard-hint kbd{display:inline-block;padding:4px 10px;border:1px solid var(--input-border);border-radius:6px;font-family:inherit;font-size:.8rem;background:var(--surface)}.voice-select{padding:8px 12px;border:2px solid var(--input-border);border-radius:8px;background:var(--bg);color:var(--text);font-size:.85rem;outline:none;max-width:180px;cursor:pointer}.voice-select:focus{border-color:var(--accent)}@media(max-width:640px){#root{padding:16px}.app-header{justify-content:space-between;max-width:100%;margin-bottom:16px}h1{font-size:1.3rem}.timer-container{width:280px;height:280px}.timer-time{font-size:2.6rem}.setting-row{flex-wrap:wrap}.toggle-group{justify-content:flex-end}}@media(min-width:900px)and (max-height:700px){#root{padding:16px}.app-header{max-width:800px;margin-bottom:16px}.app-main{flex-direction:row;align-items:flex-start;justify-content:center;gap:40px;max-width:900px}.settings-panel{max-width:380px;margin-bottom:0;flex-shrink:0}.timer-section{flex-shrink:0}.timer-container{width:280px;height:280px;margin:0 0 16px}.timer-time{font-size:2.6rem}.keyboard-hint{margin-top:16px}}@media(max-width:420px){#root{padding:12px}.timer-container{width:260px;height:260px}.timer-time{font-size:2.4rem}}
