@import"https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&display=swap";:root{--notion-black: #191919;--notion-white: #ffffff;--notion-gray-1: #f7f6f3;--notion-gray-2: #eae9e4;--notion-gray-3: #d3d1cb;--notion-gray-4: #a19f99;--notion-gray-5: #787774;--notion-gray-6: #55534e;--bg-primary: #ffffff;--bg-secondary: #f7f6f3;--bg-tertiary: #eae9e4;--bg-hover: rgba(55, 53, 47, .06);--bg-active: rgba(55, 53, 47, .1);--text-primary: #37352f;--text-secondary: #787774;--text-tertiary: #a19f99;--text-on-accent: #ffffff;--border-light: rgba(55, 53, 47, .09);--border-default: rgba(55, 53, 47, .16);--accent: #2eaadc;--accent-hover: #2496c4;--accent-subtle: rgba(46, 170, 220, .12);--phase-work-color: #e16259;--phase-work-bg: rgba(225, 98, 89, .08);--phase-work-ring: #e16259;--phase-work-shadow: rgba(225, 98, 89, .25);--phase-break-color: #0f7b6c;--phase-break-bg: rgba(15, 123, 108, .08);--phase-break-ring: #0f7b6c;--phase-break-shadow: rgba(15, 123, 108, .22);--phase-long-color: #6940a5;--phase-long-bg: rgba(105, 64, 165, .08);--phase-long-ring: #6940a5;--phase-long-shadow: rgba(105, 64, 165, .22);--phase-idle-color: #2eaadc;--phase-idle-bg: rgba(46, 170, 220, .08);--phase-idle-ring: #2eaadc;--phase-idle-shadow: rgba(46, 170, 220, .2);--phase-color: var(--phase-idle-color);--phase-bg: var(--phase-idle-bg);--phase-ring: var(--phase-idle-ring);--phase-shadow: var(--phase-idle-shadow);--card-bg: rgba(255, 255, 255, .72);--card-border: rgba(55, 53, 47, .12);--card-shadow: 0 1px 3px rgba(55, 53, 47, .1), 0 4px 16px rgba(55, 53, 47, .06);--input-bg: rgba(55, 53, 47, .04);--input-border: rgba(55, 53, 47, .14);--toggle-off: rgba(55, 53, 47, .18);--toggle-on: var(--accent);--ring-track: rgba(55, 53, 47, .1);--font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;--ring-size: min(260px, 60vw);--border-radius-sm: 6px;--border-radius-md: 10px;--border-radius-lg: 16px;--transition-fast: .15s ease;--transition-base: .25s ease;--transition-slow: .4s ease}[data-theme=dark]{--bg-primary: #191919;--bg-secondary: #202020;--bg-tertiary: #2f2f2f;--bg-hover: rgba(255, 255, 255, .055);--bg-active: rgba(255, 255, 255, .1);--text-primary: rgba(255, 255, 255, .81);--text-secondary: #9b9a97;--text-tertiary: #6b6b69;--text-on-accent: #ffffff;--border-light: rgba(255, 255, 255, .055);--border-default: rgba(255, 255, 255, .1);--accent: #529cca;--accent-hover: #6bb8de;--accent-subtle: rgba(82, 156, 202, .15);--phase-work-color: #c4554d;--phase-work-bg: rgba(196, 85, 77, .12);--phase-work-ring: #c4554d;--phase-work-shadow: rgba(196, 85, 77, .3);--phase-break-color: #4dab9a;--phase-break-bg: rgba(77, 171, 154, .12);--phase-break-ring: #4dab9a;--phase-break-shadow: rgba(77, 171, 154, .25);--phase-long-color: #9065c0;--phase-long-bg: rgba(144, 101, 192, .12);--phase-long-ring: #9065c0;--phase-long-shadow: rgba(144, 101, 192, .25);--phase-idle-color: #529cca;--phase-idle-bg: rgba(82, 156, 202, .12);--phase-idle-ring: #529cca;--phase-idle-shadow: rgba(82, 156, 202, .22);--card-bg: rgba(32, 32, 32, .85);--card-border: rgba(255, 255, 255, .08);--card-shadow: 0 1px 3px rgba(0, 0, 0, .3), 0 4px 20px rgba(0, 0, 0, .25);--input-bg: rgba(255, 255, 255, .04);--input-border: rgba(255, 255, 255, .1);--toggle-off: rgba(255, 255, 255, .2);--ring-track: rgba(255, 255, 255, .1)}[data-phase=work]{--phase-color: var(--phase-work-color);--phase-bg: var(--phase-work-bg);--phase-ring: var(--phase-work-ring);--phase-shadow: var(--phase-work-shadow)}[data-phase=shortBreak]{--phase-color: var(--phase-break-color);--phase-bg: var(--phase-break-bg);--phase-ring: var(--phase-break-ring);--phase-shadow: var(--phase-break-shadow)}[data-phase=longBreak]{--phase-color: var(--phase-long-color);--phase-bg: var(--phase-long-bg);--phase-ring: var(--phase-long-ring);--phase-shadow: var(--phase-long-shadow)}[data-phase=idle]{--phase-color: var(--phase-idle-color);--phase-bg: var(--phase-idle-bg);--phase-ring: var(--phase-idle-ring);--phase-shadow: var(--phase-idle-shadow)}*,*:before,*:after{margin:0;padding:0;box-sizing:border-box}html{height:100%;color-scheme:light dark}body{height:100%;font-family:var(--font-family);font-size:15px;line-height:1.5;color:var(--text-primary);background-color:var(--bg-primary);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;transition:background-color var(--transition-slow),color var(--transition-base);overflow:hidden}#app{width:100%;height:100%;position:relative;display:flex;flex-direction:column}.screen{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;opacity:0;pointer-events:none;transform:translate(24px);transition:opacity var(--transition-base),transform var(--transition-base)}.screen.active{opacity:1;pointer-events:all;transform:translate(0)}#timer-screen.slide-out{transform:translate(-24px);opacity:0}.header{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;min-height:52px;flex-shrink:0;border-bottom:1px solid var(--border-light);background:var(--bg-primary);transition:background-color var(--transition-slow),border-color var(--transition-slow)}.header-title{font-size:14px;font-weight:500;color:var(--text-secondary);letter-spacing:.01em}.header-left,.header-right{width:40px;display:flex;align-items:center}.header-right{justify-content:flex-end}.icon-btn{display:flex;align-items:center;justify-content:center;width:32px;height:32px;border:none;background:transparent;color:var(--text-secondary);border-radius:var(--border-radius-sm);cursor:pointer;transition:background var(--transition-fast),color var(--transition-fast)}.icon-btn:hover{background:var(--bg-hover);color:var(--text-primary)}.icon-btn:active{background:var(--bg-active);transform:scale(.94)}.timer-main{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:32px;padding:24px 24px 48px;background:var(--bg-primary);transition:background-color var(--transition-slow)}.task-input-wrapper{width:100%;max-width:300px}.task-input{width:100%;padding:9px 14px;background:var(--input-bg);border:1px solid var(--input-border);border-radius:var(--border-radius-md);color:var(--text-primary);font-family:var(--font-family);font-size:14px;font-weight:400;text-align:center;outline:none;transition:background var(--transition-fast),border-color var(--transition-fast),box-shadow var(--transition-fast)}.task-input::placeholder{color:var(--text-tertiary)}.task-input:focus{background:var(--bg-primary);border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-subtle)}.task-input:disabled{opacity:.45;cursor:not-allowed}.timer-ring-container{position:relative;width:var(--ring-size);height:var(--ring-size);filter:drop-shadow(0 0 24px var(--phase-shadow));transition:filter var(--transition-slow)}.timer-ring{width:100%;height:100%;transform:rotate(-90deg)}.timer-ring-bg{fill:none;stroke:var(--ring-track);stroke-width:5;transition:stroke var(--transition-slow)}.timer-ring-progress{fill:none;stroke:var(--phase-ring);stroke-width:5;stroke-linecap:round;stroke-dasharray:678.58;stroke-dashoffset:0;transition:stroke-dashoffset .5s linear,stroke var(--transition-slow)}.timer-display{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px}.timer-time{font-size:clamp(44px,12vw,68px);font-weight:300;letter-spacing:2px;line-height:1;font-variant-numeric:tabular-nums;color:var(--text-primary);transition:color var(--transition-slow)}.timer-phase{font-size:11px;font-weight:500;text-transform:uppercase;letter-spacing:1.8px;color:var(--phase-color);transition:color var(--transition-slow)}.timer-controls{display:flex;align-items:center;gap:14px}.start-btn{width:56px;height:56px;border-radius:50%;border:none;background:var(--phase-color);color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background var(--transition-slow),transform var(--transition-fast),box-shadow var(--transition-base);box-shadow:0 2px 8px var(--phase-shadow),0 1px 2px #0000001a}.start-btn:hover{filter:brightness(1.1);box-shadow:0 4px 16px var(--phase-shadow),0 2px 4px #0000001f;transform:translateY(-1px)}.start-btn:active{transform:scale(.93);filter:brightness(.95)}.reset-btn{width:38px;height:38px;border-radius:50%;border:1px solid var(--border-default);background:transparent;color:var(--text-tertiary);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background var(--transition-fast),color var(--transition-fast),border-color var(--transition-fast),transform var(--transition-fast)}.reset-btn:hover{background:var(--bg-hover);color:var(--text-secondary);border-color:var(--border-default)}.reset-btn:active{transform:scale(.9)}.pomodoro-count{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--text-tertiary);background:var(--phase-bg);padding:5px 14px;border-radius:100px;transition:background var(--transition-slow),color var(--transition-slow)}.tomato{font-size:14px}#pomo-count{font-weight:600;font-size:14px;color:var(--phase-color);min-width:16px;text-align:center;transition:color var(--transition-slow)}#notification{position:fixed;bottom:28px;left:50%;transform:translate(-50%) translateY(8px);padding:8px 18px;background:var(--text-primary);color:var(--bg-primary);border-radius:100px;font-size:13px;font-weight:500;letter-spacing:.01em;opacity:0;pointer-events:none;z-index:200;white-space:nowrap;transition:opacity var(--transition-base),transform var(--transition-base)}#notification.show{opacity:1;transform:translate(-50%) translateY(0)}.settings-main{flex:1;display:flex;flex-direction:column;padding:8px 0 40px;overflow-y:auto;background:var(--bg-primary);transition:background-color var(--transition-slow)}.settings-section{padding:0 16px}.settings-section-label{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--text-tertiary);padding:20px 0 6px}.setting-row{display:flex;align-items:center;justify-content:space-between;padding:10px 12px;border-radius:var(--border-radius-sm);gap:12px;transition:background var(--transition-fast)}.setting-row:hover{background:var(--bg-hover)}.setting-label{font-size:14px;font-weight:400;color:var(--text-primary);flex:1}.setting-desc{font-size:12px;color:var(--text-tertiary);margin-top:1px}.setting-value{display:flex;align-items:center;gap:6px;flex-shrink:0}.setting-number{width:54px;padding:5px 8px;background:var(--input-bg);border:1px solid var(--input-border);border-radius:var(--border-radius-sm);color:var(--text-primary);font-family:var(--font-family);font-size:14px;font-weight:500;text-align:center;outline:none;transition:border-color var(--transition-fast),box-shadow var(--transition-fast);-webkit-appearance:textfield;appearance:textfield;-moz-appearance:textfield}.setting-number::-webkit-outer-spin-button,.setting-number::-webkit-inner-spin-button{-webkit-appearance:none}.setting-number:focus{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-subtle)}.setting-unit{font-size:12px;color:var(--text-tertiary);min-width:40px}.setting-select{padding:5px 28px 5px 10px;background:var(--input-bg);border:1px solid var(--input-border);border-radius:var(--border-radius-sm);color:var(--text-primary);font-family:var(--font-family);font-size:13px;font-weight:500;cursor:pointer;outline:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23787774' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 8px center;transition:border-color var(--transition-fast),box-shadow var(--transition-fast)}.setting-select option{background-color:var(--bg-primary);color:var(--text-primary)}.setting-select:focus{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-subtle)}.setting-toggle{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:var(--border-radius-sm);cursor:pointer;-webkit-user-select:none;user-select:none;transition:background var(--transition-fast)}.setting-toggle:hover{background:var(--bg-hover)}.setting-toggle input[type=checkbox]{position:absolute;opacity:0;width:0;height:0}.toggle-switch{position:relative;width:38px;height:22px;background:var(--toggle-off);border-radius:11px;transition:background var(--transition-base);flex-shrink:0}.toggle-switch:after{content:"";position:absolute;top:3px;left:3px;width:16px;height:16px;background:#fff;border-radius:50%;transition:transform var(--transition-base);box-shadow:0 1px 3px #0003}.setting-toggle input:checked+.toggle-switch{background:var(--toggle-on)}.setting-toggle input:checked+.toggle-switch:after{transform:translate(16px)}.toggle-label{font-size:14px;font-weight:400;color:var(--text-primary);flex:1}.settings-divider{height:1px;background:var(--border-light);margin:8px 16px}.settings-reset{padding:16px;margin-top:auto}.reset-settings-btn{width:100%;padding:10px 16px;background:transparent;border:1px solid var(--border-default);border-radius:var(--border-radius-md);color:var(--text-secondary);font-family:var(--font-family);font-size:13px;font-weight:500;cursor:pointer;transition:background var(--transition-fast),color var(--transition-fast),border-color var(--transition-fast)}.reset-settings-btn:hover{background:#eb575714;border-color:#eb57574d;color:#eb5757}.reset-settings-btn:active{transform:scale(.98)}.hidden{display:none!important}@keyframes pulse{0%,to{opacity:1}50%{opacity:.45}}.timer-time.pulse{animation:pulse 1.2s ease-in-out infinite}@keyframes fadeUp{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}.timer-main>*{animation:fadeUp .4s ease both}.timer-main>*:nth-child(1){animation-delay:.05s}.timer-main>*:nth-child(2){animation-delay:.1s}.timer-main>*:nth-child(3){animation-delay:.15s}.timer-main>*:nth-child(4){animation-delay:.2s}@media (max-width: 360px){:root{--ring-size: 210px}.timer-main{gap:24px}}@media (min-width: 540px){:root{--ring-size: 280px}}@media (min-width: 768px){:root{--ring-size: 300px}.timer-main{gap:40px}.settings-section{padding:0 24px}.setting-row,.setting-toggle{padding:10px 16px}}@media (min-height: 860px){.timer-main{gap:40px}}.login-container{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:40px 32px 60px;gap:32px;background:var(--bg-primary);transition:background-color var(--transition-slow)}.login-logo{display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center}.login-logo-img{width:64px;height:64px;object-fit:contain;animation:float 3s ease-in-out infinite}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-6px)}}.login-title{font-size:28px;font-weight:600;color:var(--text-primary);letter-spacing:-.3px}.login-subtitle{font-size:14px;color:var(--text-secondary);font-weight:400}.login-buttons{display:flex;flex-direction:column;align-items:stretch;gap:10px;width:100%;max-width:320px}.login-btn{display:flex;align-items:center;justify-content:center;gap:10px;padding:12px 20px;border-radius:var(--border-radius-md);font-family:var(--font-family);font-size:14px;font-weight:500;cursor:pointer;transition:background var(--transition-fast),transform var(--transition-fast),box-shadow var(--transition-fast);border:1px solid var(--border-default)}.login-btn--google{background:var(--bg-primary);color:var(--text-primary)}.login-btn--google:hover{background:var(--bg-hover);box-shadow:0 2px 8px #00000014;transform:translateY(-1px)}.login-btn--notion{background:var(--text-primary);color:var(--bg-primary);border-color:transparent}.login-btn--notion:hover{opacity:.88;box-shadow:0 2px 10px #00000026;transform:translateY(-1px)}.login-btn:active{transform:scale(.97)}.login-guest-btn{background:transparent;color:var(--text-secondary);border:none;font-family:var(--font-family);font-size:13px;cursor:pointer;text-decoration:underline;transition:color var(--transition-fast);margin-top:-6px}.login-guest-btn:hover{color:var(--text-primary)}.login-divider{display:flex;align-items:center;gap:12px;color:var(--text-tertiary);font-size:12px}.login-divider:before,.login-divider:after{content:"";flex:1;height:1px;background:var(--border-light)}.login-note{font-size:12px;color:var(--text-tertiary);text-align:center;max-width:280px;line-height:1.6}.header-left,.user-menu{position:relative}.user-avatar{width:28px;height:28px;border-radius:50%;object-fit:cover;cursor:pointer;border:1.5px solid var(--border-default);transition:border-color var(--transition-fast),transform var(--transition-fast);background:var(--bg-tertiary);display:block}.user-avatar:hover{border-color:var(--accent);transform:scale(1.06)}.user-avatar:not([src]),.user-avatar[src=""]{display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:600;color:var(--text-secondary);background:var(--bg-tertiary)}.user-dropdown{position:absolute;top:calc(100% + 8px);left:0;min-width:200px;background:var(--bg-primary);border:1px solid var(--border-default);border-radius:var(--border-radius-md);box-shadow:var(--card-shadow);z-index:100;overflow:hidden;animation:fadeUp .15s ease}.user-dropdown-info{padding:12px 14px 10px;display:flex;flex-direction:column;gap:2px}.user-dropdown-name{font-size:13px;font-weight:500;color:var(--text-primary)}.user-dropdown-email{font-size:11px;color:var(--text-tertiary)}.user-dropdown-divider{height:1px;background:var(--border-light);margin:2px 0}.user-dropdown-item{display:flex;align-items:center;gap:8px;width:100%;padding:9px 14px;background:transparent;border:none;color:var(--text-primary);font-family:var(--font-family);font-size:13px;text-align:left;cursor:pointer;transition:background var(--transition-fast)}.user-dropdown-item:hover{background:var(--bg-hover)}.user-dropdown-item--danger{color:#e16259}.user-dropdown-item--danger:hover{background:#e1625912}.header-right{gap:6px}.notion-status{display:flex;align-items:center}.notion-status-dot{width:7px;height:7px;border-radius:50%;transition:background var(--transition-base)}.notion-status-dot--connected{background:#4dab9a;box-shadow:0 0 0 2px #4dab9a40}.notion-status-dot--warning{background:#e9a84c;box-shadow:0 0 0 2px #e9a84c40}.notion-status-dot--disconnected{background:var(--border-default)}.notion-status-text{font-size:13px;color:var(--text-secondary);padding:8px 12px;line-height:1.6}.notion-connect-btn{display:flex;align-items:center;gap:8px;margin:4px 12px 12px;padding:10px 16px;background:var(--text-primary);color:var(--bg-primary);border:none;border-radius:var(--border-radius-md);font-family:var(--font-family);font-size:13px;font-weight:500;cursor:pointer;transition:opacity var(--transition-fast),transform var(--transition-fast)}.notion-connect-btn:hover{opacity:.85;transform:translateY(-1px)}.notion-workspace-info{display:flex;align-items:center;gap:8px;padding:8px 12px}.notion-workspace-badge{font-size:11px;font-weight:600;color:#4dab9a;background:#4dab9a1f;padding:2px 8px;border-radius:100px}.notion-workspace-name{font-size:13px;color:var(--text-secondary);font-weight:500}.notion-db-setup{padding:4px 12px 12px;display:flex;flex-direction:column;gap:8px}.notion-db-option{display:flex;flex-direction:column;gap:6px}.notion-db-option-label{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--text-tertiary);padding:4px 0 2px}.notion-db-select{width:100%;padding:7px 28px 7px 10px}.notion-db-btn{padding:8px 14px;background:var(--accent);color:#fff;border:none;border-radius:var(--border-radius-sm);font-family:var(--font-family);font-size:13px;font-weight:500;cursor:pointer;transition:background var(--transition-fast),transform var(--transition-fast);align-self:flex-start}.notion-db-btn:hover:not(:disabled){background:var(--accent-hover);transform:translateY(-1px)}.notion-db-btn:disabled{opacity:.4;cursor:not-allowed}.notion-db-or{text-align:center;font-size:11px;color:var(--text-tertiary);padding:4px 0;position:relative}.notion-db-or:before,.notion-db-or:after{content:"";position:absolute;top:50%;width:35%;height:1px;background:var(--border-light)}.notion-db-or:before{left:0}.notion-db-or:after{right:0}.notion-db-active{display:flex;align-items:center;justify-content:space-between;padding:10px 12px;background:#4dab9a12;border-radius:var(--border-radius-sm);margin:0 12px}.notion-db-status{display:flex;align-items:center;gap:8px}.notion-db-status-icon{font-size:16px}.notion-db-label{font-size:13px;font-weight:500;color:var(--text-primary)}.notion-db-change-btn{font-size:12px;color:var(--text-secondary);background:transparent;border:1px solid var(--border-default);border-radius:var(--border-radius-sm);padding:4px 10px;cursor:pointer;font-family:var(--font-family);transition:background var(--transition-fast)}.notion-db-change-btn:hover{background:var(--bg-hover)}.notion-disconnect-btn{display:inline-block;margin:8px 12px 4px;padding:6px 12px;background:transparent;border:1px solid var(--border-default);border-radius:var(--border-radius-sm);color:var(--text-tertiary);font-family:var(--font-family);font-size:12px;cursor:pointer;transition:background var(--transition-fast),color var(--transition-fast)}.notion-disconnect-btn:hover{background:#e1625912;border-color:#e162594d;color:#e16259}