:root{--phase: #e74c3c;--phase-dim: rgba(231,76,60,.12)}.pomo-page{min-height:100vh;padding:24px 16px 48px}.pomo-page .container{max-width:480px;margin:0 auto}.pomo-page .nav{display:flex;align-items:center;gap:10px;margin-bottom:20px}.pomo-page .nav h1{flex:1;font-size:22px;font-weight:700;color:var(--text);letter-spacing:-.5px}.pomo-page .nav-end{margin-left:auto;display:flex;gap:8px;align-items:center}.pomo-page .icon-btn{width:34px;height:34px;background:var(--card);border-radius:10px;border:none;font-size:17px;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 1px 4px #00000014;color:var(--sub);transition:background .15s}.pomo-page .icon-btn:hover{background:var(--card-alt)}.pomo-page .help-btn{font-size:15px;font-weight:700}.pomo-page .sound-test-btn{font-size:12px;padding:0 10px;height:34px;background:var(--card);border:1.5px solid var(--border);border-radius:10px;color:var(--sub);cursor:pointer;white-space:nowrap;box-shadow:0 1px 4px #00000014}.pomo-page .phase-tabs{display:grid;grid-template-columns:repeat(3,1fr);background:var(--card);border-radius:14px;padding:5px;gap:4px;box-shadow:0 1px 4px #00000012;margin-bottom:20px}.pomo-page .phase-tab{padding:9px;border-radius:10px;border:none;background:transparent;font-size:14px;font-weight:600;color:var(--sub);cursor:pointer;transition:all .2s}.pomo-page .phase-tab.active{background:var(--phase);color:#fff}.pomo-page .timer-card{background:var(--card);border-radius:20px;padding:28px 20px 24px;box-shadow:0 2px 12px #00000014;margin-bottom:20px;text-align:center}.pomo-page .session-dots{display:flex;gap:10px;justify-content:center;margin-bottom:22px}.pomo-page .s-dot{width:10px;height:10px;border-radius:50%;background:var(--card-alt);transition:background .3s,transform .3s}.pomo-page .s-dot.done{background:var(--phase);transform:scale(1.15)}.pomo-page .s-dot.current{background:var(--phase);opacity:.4}.pomo-page .ring-wrap{position:relative;width:230px;height:230px;margin:0 auto 22px}.pomo-page .ring-wrap svg{width:230px;height:230px;transform:rotate(-90deg)}.pomo-page .ring-bg{fill:none;stroke:var(--card-alt);stroke-width:10}.pomo-page .ring-fg{fill:none;stroke:var(--phase);stroke-width:10;stroke-linecap:round;stroke-dasharray:659.7;stroke-dashoffset:0;transition:stroke-dashoffset .9s linear,stroke .4s ease}.pomo-page .ring-text{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px}.pomo-page .time-display{font-size:54px;font-weight:300;color:var(--text);letter-spacing:2px;font-variant-numeric:tabular-nums;line-height:1}.pomo-page .phase-label{font-size:13px;color:var(--sub);font-weight:500}.pomo-page .next-label{font-size:11px;color:var(--sub)}.pomo-page .task-wrap{display:flex;align-items:center;gap:8px;background:var(--card-alt);border-radius:10px;padding:9px 12px}.pomo-page .task-wrap span{font-size:15px;flex-shrink:0}.pomo-page .task-input{flex:1;border:none;background:transparent;font-size:14px;color:var(--text);outline:none;font-family:inherit}.pomo-page .task-input::placeholder{color:var(--sub)}.pomo-page .controls{display:flex;gap:16px;justify-content:center;align-items:center;margin-bottom:20px}.pomo-page .btn-round{border-radius:50%;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:transform .12s,filter .12s;flex-shrink:0}.pomo-page .btn-round:active{transform:scale(.93)}.pomo-page .btn-play{width:72px;height:72px;background:var(--phase);color:#fff;font-size:24px;box-shadow:0 4px 20px var(--phase-dim),0 2px 8px #00000026;transition:transform .12s,filter .12s,background .4s,box-shadow .4s}.pomo-page .btn-play:hover{filter:brightness(1.08)}.pomo-page .btn-side{width:50px;height:50px;background:var(--card-alt);color:var(--sub);font-size:19px}.pomo-page .btn-side:hover{background:var(--border)}.pomo-page .stats-card{background:var(--card);border-radius:var(--radius);box-shadow:0 1px 6px #00000012;padding:16px 20px;margin-bottom:16px;display:flex;gap:0}.pomo-page .stat-item{flex:1;text-align:center;border-right:1px solid var(--border)}.pomo-page .stat-item:last-child{border-right:none}.pomo-page .stat-num{font-size:28px;font-weight:700;color:var(--phase);font-variant-numeric:tabular-nums;transition:color .4s;line-height:1.2}.pomo-page .stat-lbl{font-size:11px;color:var(--sub);margin-top:3px}.pomo-page .modal{max-width:340px;padding:20px;border-radius:20px}.pomo-page .log-modal .modal{max-width:400px}.pomo-page .help-modal .modal{max-width:360px;max-height:min(80vh,calc(100dvh - 32px))}.pomo-page .help-modal .modal-body{min-height:0;padding:0 0 4px;gap:20px}.pomo-page .modal-head{border-bottom:none;padding:0;margin-bottom:18px}.pomo-page .setting-row{display:flex;align-items:center;justify-content:space-between;padding:10px 0;border-bottom:1px solid var(--border)}.pomo-page .setting-row:last-child{border-bottom:none;padding-bottom:0}.pomo-page .setting-label{font-size:14px;color:var(--text)}.pomo-page .setting-ctrl{display:flex;align-items:center;gap:8px}.pomo-page .num-btn{width:30px;height:30px;border-radius:8px;border:none;background:var(--card-alt);color:var(--sub);font-size:17px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .15s}.pomo-page .num-btn:hover{background:var(--border)}.pomo-page .num-val{width:44px;text-align:center;font-size:16px;font-weight:600;color:var(--text);font-variant-numeric:tabular-nums;border:2px solid var(--border);border-radius:8px;padding:4px 0;outline:none;font-family:inherit;background:var(--card-alt);transition:border-color .15s;-moz-appearance:textfield}.pomo-page .num-val:focus{border-color:var(--phase);background:var(--card-alt)}.pomo-page .num-val::-webkit-inner-spin-button,.pomo-page .num-val::-webkit-outer-spin-button{-webkit-appearance:none}.pomo-page .reset-btn{padding:6px 14px;border-radius:8px;border:none;background:#fdecea;color:#e74c3c;font-size:13px;font-weight:600;cursor:pointer;transition:background .15s,color .15s;white-space:nowrap}.pomo-page .reset-btn:hover{background:#f44336;color:#fff}.pomo-page .reset-btn.confirm{background:#f44336;color:#fff;animation:confirmShake .3s ease}.pomo-page .hs-title:before{background:var(--phase);transition:background .4s}.pomo-page .flash{position:fixed;inset:0;pointer-events:none;background:var(--phase);opacity:0;animation:flashAnim .6s ease forwards;z-index:999}.pomo-page .cycle-bar-card{background:var(--card);border-radius:var(--radius);box-shadow:0 1px 6px #00000012;padding:12px 16px;margin-bottom:20px}.pomo-page .cycle-bar-title{font-size:11px;color:var(--sub);font-weight:600;margin-bottom:8px;letter-spacing:.3px;display:flex;justify-content:space-between}.pomo-page .cycle-hint{font-weight:400}.pomo-page .cycle-segs{display:flex;gap:3px;height:22px}.pomo-page .cb-seg{position:relative;overflow:hidden;border-radius:5px;background:var(--card-alt);display:flex;align-items:center;justify-content:center;min-width:0}.pomo-page .cb-inner{position:absolute;left:0;top:0;height:100%;width:0%;border-radius:5px}.pomo-page .cb-lbl{position:relative;z-index:1;font-size:10px;font-weight:700;color:#0000004d;user-select:none}.pomo-page .cb-seg.done.work-seg{background:#e74c3c4d}.pomo-page .cb-seg.done.short-seg{background:#27ae604d}.pomo-page .cb-seg.done.long-seg{background:#2980b94d}.pomo-page .cb-seg.done .cb-lbl{color:#ffffffb3}.pomo-page .cb-seg.active.work-seg{background:#e74c3c14;box-shadow:0 0 0 2px #e74c3c}.pomo-page .cb-seg.active.short-seg{background:#27ae6014;box-shadow:0 0 0 2px #27ae60}.pomo-page .cb-seg.active.long-seg{background:#2980b914;box-shadow:0 0 0 2px #2980b9}.pomo-page .cb-seg.work-seg .cb-inner{background:#e74c3c8c}.pomo-page .cb-seg.short-seg .cb-inner{background:#27ae608c}.pomo-page .cb-seg.long-seg .cb-inner{background:#2980b98c}.pomo-page .log-list{max-height:60vh;overflow-y:auto}.pomo-page .log-meta{font-size:12px;color:var(--sub)}.pomo-page .log-empty{text-align:center;color:var(--sub);font-size:13px;padding:18px 0}.pomo-page .log-day-sep{font-size:11px;font-weight:700;color:var(--sub);padding:8px 0 4px;border-top:1px solid var(--border);margin-top:4px;letter-spacing:.3px}.pomo-page .log-day-sep:first-child{border-top:none;margin-top:0;padding-top:0}.pomo-page .log-item{display:flex;align-items:center;gap:8px;padding:6px 0;border-bottom:1px solid var(--border)}.pomo-page .log-item:last-child{border-bottom:none}.pomo-page .log-dot{width:6px;height:6px;border-radius:50%;background:#e74c3c;flex-shrink:0;opacity:.6}.pomo-page .log-time{font-size:12px;color:var(--sub);font-variant-numeric:tabular-nums;flex-shrink:0;width:38px}.pomo-page .log-task{flex:1;font-size:13px;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.pomo-page .log-task.no-task{color:var(--sub);font-style:italic}.pomo-page .log-dur{font-size:12px;color:var(--sub);flex-shrink:0}.pomo-page .settings-divider{margin:14px 0 10px}.pomo-page .reset-row{border-bottom:1px solid var(--border);padding:4px 0 8px}.pomo-page .reset-row.no-border{border-bottom:none;padding:8px 0 0}.pomo-page .reset-label{color:var(--sub);font-size:13px}@keyframes confirmShake{0%,to{transform:translate(0)}25%{transform:translate(-4px)}75%{transform:translate(4px)}}@keyframes flashAnim{0%{opacity:.25}to{opacity:0}}@media(max-width:600px){.pomo-page{padding:12px 12px 80px}.pomo-page .container{max-width:100%}.pomo-page input,.pomo-page textarea,.pomo-page select{font-size:16px!important}.pomo-page .time-display{font-size:48px}.pomo-page .phase-tab{min-height:44px}.pomo-page .btn-play{width:80px;height:80px}.pomo-page .btn-side{width:54px;height:54px}.pomo-page .icon-btn:hover{background:var(--card)}.pomo-page .icon-btn:active{background:var(--card-alt)}.pomo-page button,.pomo-page a{touch-action:manipulation}}:is([data-theme=dark]) .pomo-page :is(.icon-btn,.btn-side,.num-btn){background:var(--card-alt);color:var(--sub)}:is([data-theme=dark]) .pomo-page .s-dot:not(.done):not(.current){background:#ffffff26}:is([data-theme=dark]) .pomo-page .ring-bg{stroke:#ffffff1f}:is([data-theme=dark]) .pomo-page .task-wrap{background:var(--card-alt)}:is([data-theme=dark]) .pomo-page :is(.next-label,.hl,.log-empty,.log-task.no-task){color:var(--sub)}:is([data-theme=dark]) .pomo-page :is(.setting-row,.log-day-sep){border-color:var(--border)}:is([data-theme=dark]) .pomo-page .stat-item{border-right-color:var(--border)}:is([data-theme=dark]) .pomo-page .num-val{background:var(--card-alt);border-color:var(--border);color:var(--text)}:is([data-theme=dark]) .pomo-page .cb-seg:not(.done):not(.active){background:#ffffff1a}:is([data-theme=dark]) .pomo-page .cb-lbl{color:#fff6}:is([data-theme=dark]) .pomo-page .log-item{border-bottom-color:var(--border)}@media(prefers-color-scheme:dark){:root:not([data-theme=light]) .pomo-page :is(.icon-btn,.btn-side,.num-btn){background:var(--card-alt);color:var(--sub)}:root:not([data-theme=light]) .pomo-page .s-dot:not(.done):not(.current){background:#ffffff26}:root:not([data-theme=light]) .pomo-page .ring-bg{stroke:#ffffff1f}:root:not([data-theme=light]) .pomo-page .task-wrap{background:var(--card-alt)}:root:not([data-theme=light]) .pomo-page :is(.next-label,.hl,.log-empty,.log-task.no-task){color:var(--sub)}:root:not([data-theme=light]) .pomo-page :is(.setting-row,.log-day-sep){border-color:var(--border)}:root:not([data-theme=light]) .pomo-page .stat-item{border-right-color:var(--border)}:root:not([data-theme=light]) .pomo-page .num-val{background:var(--card-alt);border-color:var(--border);color:var(--text)}:root:not([data-theme=light]) .pomo-page .cb-seg:not(.done):not(.active){background:#ffffff1a}:root:not([data-theme=light]) .pomo-page .cb-lbl{color:#fff6}:root:not([data-theme=light]) .pomo-page .log-item{border-bottom-color:var(--border)}}