.timer-page{min-height:100vh;padding:24px 16px 48px}.timer-page .container{max-width:420px;margin:0 auto;animation:fadeUp .3s ease both}.timer-page .nav{display:flex;align-items:center;gap:10px;margin-bottom:20px}.timer-page .nav h1{flex:1;font-size:22px;font-weight:700;color:var(--text)}.timer-page .tabs{display:grid;background:var(--card);border-radius:14px;padding:5px;margin-bottom:24px;box-shadow:0 1px 4px #00000012;gap:4px}.timer-page .tab{padding:9px;border-radius:10px;border:none;background:transparent;font-size:14px;font-weight:600;color:var(--sub);cursor:pointer;transition:all .2s;text-align:center}.timer-page .tab.active{background:var(--primary);color:#fff}.timer-page .clock-card{background:var(--card);border-radius:20px;padding:32px 20px 28px;text-align:center;box-shadow:0 2px 12px #00000014;margin-bottom:20px}.timer-page .display{font-size:46px;font-weight:300;color:var(--text);letter-spacing:1px;font-variant-numeric:tabular-nums;line-height:1;margin-bottom:4px;white-space:nowrap}.timer-page .display.warn{color:#f44336}.timer-page .ms-display{font-size:22px;color:var(--sub);font-variant-numeric:tabular-nums;margin-bottom:24px}.timer-page .ring-wrap{position:relative;width:220px;height:220px;margin:0 auto 20px}.timer-page .ring-wrap svg{width:220px;height:220px;transform:rotate(-90deg)}.timer-page .ring-bg{fill:none;stroke:#00000014;stroke-width:10}.timer-page .ring-fg{fill:none;stroke:#6c63ff;stroke-width:10;stroke-linecap:round;transition:stroke-dashoffset .5s linear}.timer-page .ring-fg.warn{stroke:#f44336}.timer-page .ring-text{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:0 20px}.timer-page .custom-time{display:flex;gap:8px;justify-content:center;margin-bottom:20px;align-items:center}.timer-page .time-field{display:flex;flex-direction:column;align-items:center;gap:4px}.timer-page .time-field input{width:64px;text-align:center;padding:8px;background:var(--bg);color:var(--text);border:2px solid var(--border);border-radius:10px;font-size:22px;font-weight:300;outline:none;-webkit-appearance:none;appearance:none;transition:border-color .2s}.timer-page .time-field input:focus{border-color:var(--primary)}.timer-page .time-field label{font-size:12px;color:var(--sub)}.timer-page .time-sep{font-size:28px;color:var(--sub);padding-bottom:14px}.timer-page .controls{display:flex;gap:12px;justify-content:center}.timer-page .btn-main{width:72px;height:72px;border-radius:50%;border:none;font-size:24px;cursor:pointer;transition:transform .15s,box-shadow .15s;box-shadow:0 4px 12px #6c63ff59}.timer-page .btn-main:active{transform:scale(.94)}.timer-page .btn-start{background:var(--primary);color:#fff}.timer-page .btn-pause{background:#ffc107;color:#fff}.timer-page .btn-reset{width:52px;height:52px;background:var(--card-alt);color:var(--sub);font-size:18px;box-shadow:none;align-self:center}.timer-page .laps{background:var(--card);border-radius:14px;overflow:hidden;box-shadow:0 1px 4px #00000012}.timer-page .lap-item{display:flex;justify-content:space-between;padding:10px 14px;border-bottom:1px solid var(--border);font-size:14px;color:var(--text);animation:fadeIn .2s}.timer-page .lap-item:last-child{border-bottom:none}.timer-page .lap-num{color:var(--sub);font-size:12px}.timer-page .section-label{font-size:12px;font-weight:700;color:var(--sub);letter-spacing:1px;margin-bottom:8px}.timer-page [data-panel]{display:none}.timer-page [data-panel].active{display:block}.timer-page .cd-flash{position:fixed;inset:0;pointer-events:none;background:#4caf50;opacity:0;animation:cdFlashAnim .8s ease forwards;z-index:999}.timer-page .cd-toast{position:fixed;top:24px;left:50%;transform:translate(-50%) translateY(-100px);background:#4caf50;color:#fff;padding:13px 28px;border-radius:50px;font-size:16px;font-weight:700;box-shadow:0 4px 20px #4caf5073;z-index:1000;white-space:nowrap;animation:cdToastAnim 3.2s cubic-bezier(.34,1.56,.64,1) forwards}.timer-page .display.finish{color:#4caf50!important;animation:cdBounce .55s cubic-bezier(.36,.07,.19,.97) both}.timer-page .ring-fg.finish{stroke:#4caf50!important;animation:ringPulse .9s ease 3}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes cdFlashAnim{0%{opacity:.3}to{opacity:0}}@keyframes cdToastAnim{0%{transform:translate(-50%) translateY(-80px);opacity:0}12%{transform:translate(-50%) translateY(0);opacity:1}78%{transform:translate(-50%) translateY(0);opacity:1}to{transform:translate(-50%) translateY(-80px);opacity:0}}@keyframes cdBounce{0%,to{transform:scale(1)}20%{transform:scale(1.35)}45%{transform:scale(.93)}65%{transform:scale(1.1)}82%{transform:scale(.97)}}@keyframes ringPulse{0%,to{opacity:1}50%{opacity:.25}}@media(max-width:600px){.timer-page{padding:12px 12px 80px}.timer-page .container{max-width:100%}.timer-page input,.timer-page textarea,.timer-page select{font-size:16px!important}.timer-page .btn-main{width:80px;height:80px}.timer-page .btn-reset{width:60px;height:60px}.timer-page button,.timer-page a{touch-action:manipulation}.timer-page .ring-wrap{width:160px;height:160px}.timer-page .ring-wrap svg{width:160px;height:160px}.timer-page .display{font-size:36px}.timer-page .clock-card{padding:20px 16px}.timer-page .time-field input{width:70px;min-height:44px}}:is([data-theme=dark]) .timer-page .ring-bg{stroke:#ffffff1f}@media(prefers-color-scheme:dark){:root:not([data-theme=light]) .timer-page .ring-bg{stroke:#ffffff1f}}