:root{--font-heading:"Inter", -apple-system, BlinkMacSystemFont, sans-serif;--font-body:"Inter", -apple-system, BlinkMacSystemFont, sans-serif;--font-mono:"Inter", monospace;--bg-engine-canvas:#1e2124;--bg-panel-surface:#4a4c51;--bg-panel-header:#36393f;--bg-card-surface:#424549;--bg-card-hover:#4a4d52;--bg-input:#1e2124;--border-panel:#2f3136;--border-light:#585b62;--border-focus:#43b581;--text-primary:#fff;--text-secondary:#dcddde;--text-muted:#747f8d;--accent-blue:#00b0f4;--accent-cyan:#43b581;--accent-green:#43b581;--accent-amber:#f8a51a;--accent-red:#ee4646;--bg-card-selected:#242f3d;--border-card-selected:#3b82f6;--bg-card-expired:#381e1e;--btn-manual-bg:#2e2640;--btn-manual-border:#5c4b7d;--btn-manual-text:#d1c4e9;--btn-mode-plus-bg:#1b3e2b;--btn-mode-plus-border:#2e7d32;--btn-mode-plus-text:#a5d6a7;--btn-mode-plus-hover:#235239;--btn-mode-minus-bg:#4a1b1b;--btn-mode-minus-border:#c62828;--btn-mode-minus-text:#ef9a9a;--btn-mode-minus-hover:#612323;--radius-panel:6px;--radius-btn:4px;--transition-speed:.1s ease-in-out}[data-theme=light]{--bg-engine-canvas:#e8ecf1;--bg-panel-surface:#fff;--bg-panel-header:#dce1e8;--bg-card-surface:#fff;--bg-card-hover:#f4f6f9;--bg-input:#fff;--bg-card-selected:#e0f2fe;--border-card-selected:#0284c7;--bg-card-expired:#fee2e2;--btn-manual-bg:#f3e8ff;--btn-manual-border:#c084fc;--btn-manual-text:#6b21a8;--btn-mode-plus-bg:#dcfce7;--btn-mode-plus-border:#86efac;--btn-mode-plus-text:#15803d;--btn-mode-plus-hover:#bbf7d0;--btn-mode-minus-bg:#fee2e2;--btn-mode-minus-border:#fca5a5;--btn-mode-minus-text:#b91c1c;--btn-mode-minus-hover:#fecaca;--border-panel:#c5cbd5;--border-light:#a4acb9;--text-primary:#111827;--text-secondary:#374151;--text-muted:#6b7280}[data-theme=light] .timer-card.selected .timer-name-display{color:#0f172a;font-weight:700}[data-theme=light] .timer-card.selected .digits{color:#0f172a}[data-theme=light] .timer-card.selected .btn-card-time-chip,[data-theme=light] .timer-card.selected .btn-card-manual{color:#1e293b;background-color:#fff;border-color:#cbd5e1}[data-theme=light] .timer-card.selected .btn-card-time-chip:hover,[data-theme=light] .timer-card.selected .btn-card-manual:hover{color:#0f172a;background-color:#f1f5f9;border-color:#94a3b8}[data-theme=light]{--shadow-card:0 4px 12px #00000014}[data-theme=light] .app-title{background:linear-gradient(90deg,#111827,#4b5563)!important;-webkit-text-fill-color:transparent!important;-webkit-background-clip:text!important}*{box-sizing:border-box;margin:0;padding:0}html,body,#root{background-color:var(--bg-engine-canvas);width:100vw;height:100%;color:var(--text-primary);font-family:var(--font-body);-webkit-font-smoothing:antialiased;line-height:1.4;overflow:hidden}@media (width<=599px){html{height:100%;overflow:hidden}body{-webkit-overflow-scrolling:touch;overscroll-behavior-y:auto;height:100%;overflow-y:auto}#root{height:auto;overflow:visible}}.app-container{background-color:var(--bg-engine-canvas);flex-direction:column;width:100vw;height:100vh;display:flex;overflow:hidden}@media (width<=599px){.app-container{height:auto;min-height:100dvh;overflow:visible}}.app-wrapper{width:100%;min-height:0;padding:8px 12px;padding-left:max(12px, env(safe-area-inset-left));padding-right:max(12px, env(safe-area-inset-right));padding-bottom:max(8px, env(safe-area-inset-bottom));flex-direction:column;flex:1;gap:8px;display:flex;overflow:hidden}@media (width<=599px){.app-wrapper{height:auto;min-height:0;padding:6px 8px;padding-bottom:max(32px, env(safe-area-inset-bottom));overflow:visible}}.main-content{flex-direction:column;flex:1;min-height:0;display:flex;overflow:hidden}@media (width<=599px){.main-content{flex:none;overflow:visible}}.app-footer{background-color:var(--bg-panel-surface);border:1px solid var(--border-panel);border-radius:var(--radius-panel);flex-shrink:0;justify-content:center;align-items:center;padding:8px 16px;display:flex}.app-footer .app-footer-inner{flex-wrap:wrap;justify-content:center;align-items:center;gap:10px;max-width:1200px;margin:0 auto;display:flex}.app-footer .footer-text{color:var(--text-muted);font-size:.8rem}.app-footer .footer-pip{background-color:var(--accent-blue);opacity:.6;border-radius:50%;flex-shrink:0;width:4px;height:4px}.app-footer .footer-link{color:var(--text-secondary);align-items:center;font-size:.8rem;text-decoration:underline;transition:color .15s;display:inline-flex}.app-footer .footer-link:hover{color:var(--accent-blue)}@media (width<=599px){.app-footer{margin-top:8px;padding:8px 12px}}.app-header{background-color:var(--bg-panel-surface);border:1px solid var(--border-panel);border-radius:var(--radius-panel);z-index:100;flex-direction:column;flex-shrink:0;gap:6px;padding:8px 12px;display:flex;position:relative}@media (width<=599px){.app-header{z-index:200;box-shadow:0 0 0 6px var(--bg-engine-canvas);gap:5px;padding:6px 8px;position:sticky;top:6px}}.header-top-row{justify-content:space-between;align-items:center;gap:10px;display:flex}@media (width<=599px){.header-top-row{flex-wrap:wrap;gap:6px}}.brand-section{flex:1;align-items:center;gap:12px;display:flex}.brand-section .brand-logo{border-radius:var(--radius-btn);background-color:var(--bg-panel-header);border:1px solid var(--border-panel);justify-content:center;align-items:center;width:32px;height:32px;display:flex;position:relative;overflow:visible}.brand-section .brand-logo .galaxy-spill-icon{filter:drop-shadow(0 3px 8px #000000b3);width:46px;height:46px;transition:transform var(--transition-speed);pointer-events:none;z-index:10;position:absolute;top:-7px;left:-7px}.brand-section:hover .galaxy-spill-icon{transform:scale(1.1)rotate(6deg)}.brand-section .app-title{font-family:var(--font-heading);letter-spacing:.02em;color:var(--text-primary);font-size:1.15rem;font-weight:700}@media (width<=599px){.brand-section .app-title{font-size:1rem}}.brand-section .app-subtitle{color:var(--text-muted);font-size:.72rem;font-weight:500}@media (width<=599px){.brand-section .app-subtitle{display:none}}.header-status-pills{align-items:center;gap:6px;display:flex;position:relative}.header-status-pills .unified-timer-count-pill{background-color:var(--bg-panel-header);border:1px solid var(--border-panel);border-radius:var(--radius-btn);align-items:stretch;display:flex;overflow:hidden}.header-status-pills .unified-timer-count-pill .count-segment{color:var(--text-primary);align-items:center;gap:3px;padding:4px 10px;font-size:.8rem;font-weight:700;display:flex}.header-status-pills .unified-timer-count-pill .count-segment .count-number{font-family:var(--font-mono);color:var(--accent-cyan);font-size:.88rem;font-weight:800}.header-status-pills .unified-timer-count-pill .count-segment .count-max{color:var(--text-muted);font-size:.72rem;font-weight:600}.header-status-pills .unified-timer-count-pill .segment-divider{background-color:var(--border-panel);align-self:center;width:1px;height:16px}.header-status-pills .unified-timer-count-pill .add-segment-btn{color:#fff;font-family:var(--font-heading);cursor:pointer;transition:background-color var(--transition-speed);background-color:#2b5288;border:none;align-self:stretch;align-items:center;gap:5px;padding:4px 12px;font-size:.76rem;font-weight:600;display:flex}@media (width<=599px){.header-status-pills .unified-timer-count-pill .add-segment-btn{padding:8px 14px;font-size:.8rem}.header-status-pills .unified-timer-count-pill .add-segment-btn span{display:inline}.header-status-pills .unified-timer-count-pill .add-segment-btn .btn-label-full{display:none}}.header-status-pills .unified-timer-count-pill .add-segment-btn:hover:not(:disabled){background-color:#3663a0}.header-status-pills .unified-timer-count-pill .add-segment-btn:active:not(:disabled){background-color:#203e68}.header-status-pills .unified-timer-count-pill .add-segment-btn:disabled{opacity:.5;cursor:not-allowed}.header-status-pills .status-pill{background-color:var(--bg-panel-header);border:1px solid var(--border-panel);border-radius:var(--radius-btn);color:var(--text-secondary);align-items:center;gap:6px;padding:4px 10px;font-size:.74rem;font-weight:600;display:flex}.header-status-pills .status-pill .pill-dot{background-color:var(--accent-green);border-radius:50%;width:6px;height:6px}.header-status-pills .status-pill.highlight{white-space:nowrap;background-color:var(--border-card-selected);border-color:var(--border-card-selected);color:#fff;font-weight:700;position:absolute;top:50%;left:calc(100% + 8px);transform:translateY(-50%)}@media (width<=599px){.header-status-pills .status-pill.highlight{display:none}}.highlight-mobile-only{border-radius:var(--radius-btn);color:#fff;white-space:nowrap;background-color:#3b82f6;border:1px solid #2563eb;align-items:center;gap:6px;padding:4px 10px;font-size:.74rem;font-weight:700;display:flex}@media (width>=600px){.highlight-mobile-only{display:none}}.header-view-and-add{flex:1;justify-content:flex-end;align-items:center;gap:8px;display:flex}.view-mode-toggle{background-color:var(--bg-panel-header);border-radius:var(--radius-btn);border:1px solid var(--border-panel);padding:2px;display:flex}@media (width<=599px){.view-mode-toggle{display:none}}.view-mode-toggle .view-btn{color:var(--text-muted);cursor:pointer;background:0 0;border:none;border-radius:2px;justify-content:center;align-items:center;padding:4px 8px;display:flex}.view-mode-toggle .view-btn.active{background-color:var(--bg-card-surface);color:var(--text-primary);border:1px solid var(--border-light)}.btn-theme-toggle,.btn-fullscreen-toggle{background-color:var(--bg-panel-header);border:1px solid var(--border-panel);color:var(--text-secondary);border-radius:var(--radius-btn);cursor:pointer;justify-content:center;align-items:center;padding:5px 8px;display:flex}.btn-theme-toggle:hover,.btn-fullscreen-toggle:hover{background-color:var(--bg-card-hover);color:var(--text-primary)}.btn-primary-add{color:#fff;border-radius:var(--radius-btn);font-family:var(--font-heading);cursor:pointer;transition:var(--transition-speed);background-color:#2b5288;border:1px solid #4171b3;align-items:center;gap:6px;padding:5px 12px;font-size:.8rem;font-weight:600;display:flex}.btn-primary-add:hover{background-color:#3663a0}.btn-primary-add:active{background-color:#224370}.header-controls-bar{border-top:1px solid var(--border-panel);justify-content:space-between;align-items:center;gap:8px;padding-top:6px;display:flex}@media (width<=599px){.header-controls-bar{flex-wrap:wrap;gap:6px}}.controls-group-left{flex:1;align-items:center;gap:6px;display:flex}.btn-select-all{background-color:var(--bg-panel-header);border:1px solid var(--border-panel);color:var(--text-secondary);border-radius:var(--radius-btn);cursor:pointer;white-space:nowrap;transition:var(--transition-speed);flex-shrink:0;align-items:center;gap:6px;padding:4px 10px;font-size:.74rem;font-weight:600;display:flex}.btn-select-all:hover{background-color:var(--bg-card-hover);border-color:var(--border-light);color:var(--text-primary)}.btn-select-all.selected{background-color:var(--border-card-selected);border-color:var(--border-card-selected);color:#fff;font-weight:600}.btn-select-all.selected:hover{opacity:.9}.btn-play-pause-all.split-play-pause{border-radius:var(--radius-btn);color:#fff;font-family:var(--font-heading);cursor:pointer;transition:filter var(--transition-speed), transform var(--transition-speed);background:linear-gradient(115deg,#27ae60 0% 46%,#e67e22 46% 100%);border:1px solid #1e293b;flex-shrink:0;align-items:center;padding:0;font-size:.74rem;font-weight:700;display:inline-flex;position:relative;overflow:hidden;box-shadow:0 2px #00000040}.btn-play-pause-all.split-play-pause .split-segment{z-index:1;align-items:center;gap:4px;padding:4px 8px;display:flex}.btn-play-pause-all.split-play-pause .split-segment.play-segment{padding-left:9px;padding-right:6px}.btn-play-pause-all.split-play-pause .split-segment.pause-segment{padding-left:9px;padding-right:9px}.btn-play-pause-all.split-play-pause .split-segment svg{flex-shrink:0}.btn-play-pause-all.split-play-pause:hover:not(:disabled){filter:brightness(1.12)}.btn-play-pause-all.split-play-pause:active:not(:disabled){transform:translateY(1px);box-shadow:0 1px #00000040}.btn-play-pause-all.split-play-pause:disabled{opacity:.45;cursor:not-allowed;filter:grayscale(.6)}.btn-control{background-color:var(--bg-card-surface);border:1px solid var(--border-panel);color:var(--text-primary);border-radius:var(--radius-btn);cursor:pointer;align-items:center;gap:6px;padding:4px 8px;font-size:.74rem;font-weight:600;display:flex}.btn-control:hover:not(:disabled){background-color:var(--bg-card-hover);border-color:var(--border-light)}.btn-control:disabled{opacity:.4;cursor:not-allowed}.btn-mode-toggle{box-sizing:border-box;border-radius:var(--radius-btn);cursor:pointer;border:1px solid #0000;flex-shrink:0;justify-content:center;align-items:center;width:24px;height:23px;padding:3px 0;transition:transform 80ms,box-shadow 80ms,background-color 80ms;display:inline-flex}.btn-mode-toggle.plus-active{color:#fff;background-color:#27ae60;border-color:#196f3d;transform:translateY(-1px);box-shadow:0 2px #145a32}.btn-mode-toggle.plus-active:hover:not(:disabled){background-color:#2ecc71;transform:translateY(-1.5px);box-shadow:0 2.5px #145a32}.btn-mode-toggle.plus-active:active:not(:disabled){transform:translateY(1px);box-shadow:0 1px #145a32}.btn-mode-toggle.minus-active{color:#fff;background-color:#e74c3c;border-color:#962d22;transform:translateY(-1px);box-shadow:0 2px #78281f}.btn-mode-toggle.minus-active:hover:not(:disabled){background-color:#ff5e4d;transform:translateY(-1.5px);box-shadow:0 2.5px #78281f}.btn-mode-toggle.minus-active:active:not(:disabled){transform:translateY(1px);box-shadow:0 1px #78281f}.btn-mode-toggle:disabled{background-color:var(--bg-panel-header);border-color:var(--border-panel);color:var(--text-muted);opacity:.4;cursor:not-allowed;box-shadow:none;transform:none}.quick-time-buttons-row{-webkit-overflow-scrolling:touch;scrollbar-width:none;align-items:center;gap:3px;display:flex;overflow-x:auto}.quick-time-buttons-row::-webkit-scrollbar{display:none}@media (width<=599px){.quick-time-buttons-row{flex:100%;order:10;padding-bottom:2px}}.btn-time-chip{background-color:var(--bg-panel-header);border:1px solid var(--border-panel);color:var(--text-secondary);border-radius:var(--radius-btn);cursor:pointer;transition:var(--transition-speed);align-items:center;gap:0;padding:3px 6px;font-size:.71rem;font-weight:600;display:inline-flex}.btn-time-chip .chip-sign{text-align:center;flex-shrink:0;width:7px;font-weight:800;display:inline-block}.btn-time-chip:hover:not(:disabled){background-color:var(--bg-card-hover);border-color:var(--border-light);color:var(--text-primary)}.btn-time-chip:disabled{opacity:.4;cursor:not-allowed}.btn-manual-time{background-color:var(--bg-panel-header);border:1px solid var(--border-panel);color:var(--text-secondary);border-radius:var(--radius-btn);cursor:pointer;transition:var(--transition-speed);align-items:center;gap:4px;padding:3px 6px;font-size:.71rem;font-weight:600;display:flex}.btn-manual-time:hover:not(:disabled){background-color:var(--bg-card-hover);border-color:var(--border-light);color:var(--text-primary)}.btn-manual-time:disabled{opacity:.4;cursor:not-allowed}.dropdown-container{flex:1;justify-content:flex-end;display:flex;position:relative}.btn-more-actions{background-color:var(--bg-panel-header);border:1px solid var(--border-panel);color:var(--text-secondary);border-radius:var(--radius-btn);cursor:pointer;align-items:center;padding:4px;display:flex}.btn-more-actions:disabled{opacity:.4;cursor:not-allowed}.dropdown-menu{background-color:var(--bg-panel-surface);border:1px solid var(--border-light);border-radius:var(--radius-btn);z-index:9999;white-space:nowrap;flex-direction:column;gap:3px;min-width:170px;padding:4px;display:flex;position:absolute;top:calc(100% + 4px);right:0}.dropdown-menu .dropdown-item{color:var(--text-secondary);cursor:pointer;background:0 0;border:none;border-radius:2px;align-items:center;gap:8px;padding:6px 8px;font-size:.76rem;font-weight:500;display:flex}.dropdown-menu .dropdown-item:hover{background-color:var(--bg-card-hover);color:#fff}.dropdown-menu .dropdown-item.danger{color:#ef5350}.dropdown-menu .dropdown-item.danger:hover{background-color:#4a1b1b}.timer-dashboard-container{-webkit-overflow-scrolling:touch;flex-direction:column;flex:1;gap:12px;height:100%;min-height:0;padding-right:2px;display:flex;overflow-y:auto}@media (width<=599px){.timer-dashboard-container{height:auto;overflow-y:visible}}.primary-timer-grid{grid-template-columns:repeat(2,1fr);align-content:start;gap:12px;display:grid}.primary-timer-grid.primary-count-1{grid-template-columns:1fr}@media (width<=767px){.primary-timer-grid{grid-template-columns:1fr;gap:10px}}.secondary-timer-grid{grid-template-columns:repeat(3,1fr);align-content:start;gap:12px;display:grid}.secondary-timer-grid.secondary-count-1,.secondary-timer-grid.secondary-count-2{grid-template-columns:repeat(2,1fr)}@media (width<=767px){.secondary-timer-grid{grid-template-columns:1fr;gap:10px}}.timer-grid-separator{z-index:10;background-color:var(--border-panel);flex-shrink:0;width:100%;height:2px;margin:4px 0;position:sticky;top:-1px}.view-compact .primary-timer-grid,.view-compact .secondary-timer-grid{grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}.view-list .primary-timer-grid,.view-list .secondary-timer-grid{grid-template-columns:1fr}.grid-item-wrapper{height:auto;min-height:0}.grid-item-wrapper.is-dragging{opacity:.5}.timer-card{background-color:var(--bg-card-surface);border:1px solid var(--border-panel);border-radius:var(--radius-panel);height:auto;transition:border-color var(--transition-speed), background-color var(--transition-speed);flex-direction:column;gap:8px;padding:12px 16px;display:flex;overflow:hidden}.timer-card:hover{border-color:var(--border-light);background-color:var(--bg-card-hover)}.timer-card.selected{border-color:var(--border-card-selected);background-color:var(--bg-card-selected);box-shadow:inset 0 0 0 1px var(--border-card-selected)}.timer-card.selected .timer-name-display{color:#fff;font-weight:700}.timer-card.selected .digits{color:#fff}.timer-card.selected .btn-card-time-chip,.timer-card.selected .btn-card-manual{color:#fff;background-color:#ffffff1f;border-color:#ffffff38}.timer-card.selected .btn-card-time-chip:hover,.timer-card.selected .btn-card-manual:hover{color:#fff;background-color:#ffffff38}.timer-card.selected:hover{background-color:var(--bg-card-selected);border-color:var(--border-card-selected)}.timer-card.running{border-left:4px solid var(--accent-green)}.timer-card.expired{border-left:4px solid var(--accent-red);background-color:var(--bg-card-expired)}.timer-card.expired.selected{background-color:var(--bg-card-selected);border-color:var(--border-card-selected);border-left:4px solid var(--accent-red)}.card-top-bar{justify-content:space-between;align-items:center;gap:6px;display:flex}.card-top-bar .left-controls{flex:1;align-items:center;gap:6px;min-width:0;display:flex}.card-top-bar .left-controls .drag-handle{color:var(--text-muted);cursor:grab;flex-shrink:0;align-items:center;display:flex}.card-top-bar .left-controls .timer-name-display{font-family:var(--font-heading);color:var(--text-primary);cursor:pointer;white-space:nowrap;text-overflow:ellipsis;border-radius:2px;padding:1px 4px;font-size:.9rem;font-weight:700;overflow:hidden}.card-top-bar .left-controls .timer-name-display:hover{background-color:#ffffff14}.card-top-bar .left-controls .input-timer-name{font-family:var(--font-heading);background-color:var(--bg-input);border:1px solid var(--accent-blue);color:var(--text-primary);border-radius:2px;outline:none;width:100%;padding:1px 4px;font-size:.85rem;font-weight:700}.card-top-bar .status-badge{letter-spacing:.04em;text-transform:uppercase;border-radius:5px;flex-shrink:0;padding:3px 7px;font-size:.64rem;font-weight:800}.card-top-bar .status-badge.status-paused{color:#fff;background-color:#e67e22;border:1px solid #a04000;box-shadow:0 2px #873600}.card-top-bar .status-badge.status-running{color:#fff;background-color:#27ae60;border:1px solid #196f3d;box-shadow:0 2px #145a32}.card-top-bar .status-badge.status-expired{color:#fff;background-color:#e74c3c;border:1px solid #962d22;box-shadow:0 2px #78281f}.checkbox-container{cursor:pointer;-webkit-user-select:none;user-select:none;flex-shrink:0;justify-content:center;align-items:center;display:inline-flex;position:relative}.checkbox-container input{opacity:0;cursor:pointer;width:0;height:0;position:absolute}.checkbox-container .checkmark{background-color:var(--bg-input);border:1px solid var(--border-light);border-radius:3px;flex-shrink:0;width:16px;height:16px;display:inline-block;position:relative}.checkbox-container .checkmark:after{content:"";border:2px solid #fff;border-width:0 2px 2px 0;width:4px;height:8px;display:none;position:absolute;top:42%;left:50%;transform:translate(-50%,-50%)rotate(45deg)}.checkbox-container input:checked~.checkmark{background-color:var(--border-card-selected);border-color:var(--border-card-selected)}.checkbox-container input:checked~.checkmark:after{display:block}.card-body-row{justify-content:space-between;align-items:center;gap:8px;padding:2px 0;display:flex}.card-body-row .countdown-display .digits{font-family:var(--font-mono);color:var(--text-primary);font-size:clamp(1.3rem,5vw,1.85rem);font-weight:700;line-height:1}.card-body-row .btn-play-pause{cursor:pointer;border:1px solid #0000;border-radius:8px;flex-shrink:0;justify-content:center;align-items:center;width:40px;height:40px;transition:transform .1s cubic-bezier(.2,.8,.4,1),box-shadow .1s cubic-bezier(.2,.8,.4,1),background-color .1s;display:flex;position:relative}.card-body-row .btn-play-pause svg{filter:drop-shadow(0 1px 2px #0006)}.card-body-row .btn-play-pause.paused{color:#fff;background:linear-gradient(#4ecc8a 0%,#43b581 60%,#369c6e 100%);border-color:#287a53 #287a53 #1b593b;transform:translateY(-4px);box-shadow:0 4px #1b593b,0 6px 10px #0006}.card-body-row .btn-play-pause.paused:hover:not(:disabled){background:linear-gradient(#59db96 0%,#46c48c 60%,#3aa877 100%);transform:translateY(-5px);box-shadow:0 5px #1b593b,0 8px 14px #00000073}.card-body-row .btn-play-pause.paused:active:not(:disabled){transform:translateY(0);box-shadow:0 0 #1b593b,inset 0 3px 5px #00000080}.card-body-row .btn-play-pause.playing{color:#fff;background:linear-gradient(#f8a51a 0%,#e08e0d 60%,#ca7c03 100%);border-color:#704401 #9e6002 #9e6002;transform:translateY(0);box-shadow:0 0 #0000,inset 0 3px 6px #0000008c,inset 0 -1px 2px #fff3}.card-body-row .btn-play-pause.playing:hover:not(:disabled){background:linear-gradient(#ffb330 0%,#ea9716 60%,#d68407 100%)}.card-body-row .btn-play-pause.playing:active:not(:disabled){transform:translateY(1px);box-shadow:0 0 #0000,inset 0 4px 8px #000000b3}.card-body-row .btn-play-pause:disabled{opacity:.4;cursor:not-allowed;box-shadow:none;transform:translateY(0)}.card-quick-buttons-row{flex-wrap:wrap;align-items:center;gap:3px;display:flex}.card-row-spacer{flex:1}@media (width<=599px){.btn-card-time-chip.mobile-hide,.btn-time-chip.mobile-hide{display:none}}.btn-card-time-chip{background-color:var(--bg-panel-header);border:1px solid var(--border-panel);color:var(--text-secondary);border-radius:var(--radius-btn);cursor:pointer;transition:var(--transition-speed);align-items:center;gap:0;padding:2px 6px;font-size:.68rem;font-weight:600;display:inline-flex}.btn-card-time-chip .chip-sign{text-align:center;flex-shrink:0;width:7px;font-weight:800;display:inline-block}.btn-card-time-chip:hover{background-color:var(--bg-card-hover);border-color:var(--border-light);color:var(--text-primary)}.card-footer-bar{border-top:1px solid var(--border-panel);justify-content:space-between;align-items:center;gap:4px;min-width:0;padding-top:4px;display:flex}.btn-card-manual{background-color:var(--bg-panel-header);border:1px solid var(--border-panel);color:var(--text-secondary);border-radius:var(--radius-btn);cursor:pointer;white-space:nowrap;min-width:0;transition:var(--transition-speed);flex-shrink:1;align-items:center;gap:4px;padding:2px 6px;font-size:.68rem;font-weight:600;display:flex;overflow:hidden}.btn-card-manual:hover{background-color:var(--bg-card-hover);border-color:var(--border-light);color:var(--text-primary)}.trash-confirm-actions{flex-shrink:0;align-items:center;gap:4px;display:flex}.trash-confirm-actions.compact{gap:3px}.trash-confirm-actions.compact .btn-trash-action{padding:3px 5px;font-size:.65rem}.trash-confirm-actions.compact .btn-trash-action.btn-cancel{padding:4px 6px}.trash-confirm-actions .btn-trash-action{cursor:pointer;border:1px solid #0000;border-radius:6px;align-items:center;gap:4px;padding:4px 7px;font-size:.68rem;font-weight:800;transition:transform 80ms,box-shadow 80ms,background-color 80ms;display:flex;transform:translateY(-1px)}.trash-confirm-actions .btn-trash-action.btn-delete{color:#fff;background-color:#e74c3c;border-color:#962d22;box-shadow:0 2.5px #78281f}.trash-confirm-actions .btn-trash-action.btn-delete:hover{background-color:#ff5e4d;transform:translateY(-1.5px);box-shadow:0 3px #78281f}.trash-confirm-actions .btn-trash-action.btn-delete:active{transform:translateY(1px);box-shadow:0 .5px #78281f}.trash-confirm-actions .btn-trash-action.btn-clear{color:#fff;background-color:#f39c12;border-color:#b04300;box-shadow:0 2.5px #873600}.trash-confirm-actions .btn-trash-action.btn-clear:hover{background-color:#f5ab35;transform:translateY(-1.5px);box-shadow:0 3px #873600}.trash-confirm-actions .btn-trash-action.btn-clear:active{transform:translateY(1px);box-shadow:0 .5px #873600}.trash-confirm-actions .btn-trash-action.btn-cancel{color:#fff;background-color:#7f8c8d;border-color:#5d6d7e;box-shadow:0 2.5px #34495e}.trash-confirm-actions .btn-trash-action.btn-cancel:hover{background-color:#95a5a6;transform:translateY(-1.5px);box-shadow:0 3px #34495e}.trash-confirm-actions .btn-trash-action.btn-cancel:active{transform:translateY(1px);box-shadow:0 .5px #34495e}.btn-trash-trigger{color:#fff;cursor:pointer;background-color:#e74c3c;border:1px solid #962d22;border-radius:6px;align-items:center;padding:4px 7px;transition:transform 80ms,box-shadow 80ms,background-color 80ms;display:flex;transform:translateY(-1px);box-shadow:0 2.5px #78281f}.btn-trash-trigger:hover{background-color:#ff5e4d;transform:translateY(-1.5px);box-shadow:0 3px #78281f}.btn-trash-trigger:active{transform:translateY(1px);box-shadow:0 .5px #78281f}.empty-state-container{flex:1;justify-content:center;align-items:center;display:flex}.empty-state-card{background-color:var(--bg-panel-surface);border:1px solid var(--border-panel);border-radius:var(--radius-panel);text-align:center;padding:30px 40px}.empty-state-card h3{font-family:var(--font-heading);margin-bottom:6px}.empty-state-card p{color:var(--text-muted);margin-bottom:16px;font-size:.85rem}.empty-state-card .btn-empty-add{color:#fff;border-radius:var(--radius-btn);cursor:pointer;background-color:#2b5288;border:1px solid #4171b3;align-items:center;gap:8px;padding:8px 16px;font-weight:600;display:inline-flex}.modal-overlay{z-index:1000;padding:16px;padding-bottom:max(16px, env(safe-area-inset-bottom));background-color:#000000bf;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.modal-content{background-color:var(--bg-panel-surface);border:1px solid var(--border-light);border-radius:var(--radius-panel);box-shadow:0 12px 32px #0006, 0 0 0 1px var(--border-panel);flex-direction:column;gap:14px;width:100%;max-width:380px;padding:18px 20px;display:flex}@media (width<=599px){.modal-content{gap:10px;padding:14px}}.modal-content .modal-header{justify-content:space-between;align-items:center;display:flex}.modal-content .modal-header .modal-title{font-family:var(--font-heading);color:var(--text-primary);align-items:center;gap:8px;font-size:1rem;font-weight:700;display:flex}.modal-content .modal-header .btn-close{background-color:var(--bg-panel-header);border:1px solid var(--border-panel);border-radius:var(--radius-btn);width:28px;height:28px;color:var(--text-secondary);cursor:pointer;transition:var(--transition-speed);justify-content:center;align-items:center;display:flex}.modal-content .modal-header .btn-close:hover{background-color:var(--bg-card-hover);color:var(--text-primary)}.modal-content .time-input-grid{justify-content:center;align-items:center;gap:8px;margin-bottom:6px;display:flex}.modal-content .time-input-grid .time-field{flex-direction:column;align-items:center;gap:4px;display:flex}.modal-content .time-input-grid .time-field label{text-transform:uppercase;letter-spacing:.04em;color:var(--text-muted);font-size:.72rem;font-weight:700}.modal-content .time-input-grid .time-drum{background-color:var(--bg-input);border:1px solid var(--border-panel);border-radius:var(--radius-btn);cursor:text;width:64px;height:48px;transition:border-color var(--transition-speed), box-shadow var(--transition-speed);justify-content:center;align-items:center;display:flex;position:relative;overflow:hidden}.modal-content .time-input-grid .time-drum:focus-within{border-color:#2563eb;box-shadow:0 0 0 2px #2563eb40}.modal-content .time-input-grid .time-drum-value{font-family:var(--font-mono);color:var(--text-primary);pointer-events:none;-webkit-user-select:none;user-select:none;font-size:1.5rem;font-weight:700;line-height:1}.modal-content .time-input-grid .time-drum-value.roll-up{animation:.14s cubic-bezier(.22,1,.36,1) drum-roll-up}.modal-content .time-input-grid .time-drum-value.roll-down{animation:.14s cubic-bezier(.22,1,.36,1) drum-roll-down}.modal-content .time-input-grid .time-drum-input{color:#0000;width:100%;height:100%;caret-color:var(--text-primary);font-family:var(--font-mono);text-align:center;background:0 0;border:none;outline:none;font-size:1.5rem;font-weight:700;position:absolute;inset:0}.modal-content .time-input-grid .time-drum-input:focus{color:var(--text-primary)}.modal-content .time-input-grid .time-spin-btn{background-color:var(--bg-panel-header);border:1px solid var(--border-panel);border-radius:var(--radius-btn);width:32px;height:24px;color:var(--text-secondary);cursor:pointer;transition:var(--transition-speed);justify-content:center;align-items:center;display:flex}.modal-content .time-input-grid .time-spin-btn:hover{background-color:var(--bg-card-hover);border-color:var(--border-light);color:var(--text-primary)}.modal-content .time-input-grid .time-spin-btn:active{transform:scale(.93)}.modal-content .time-input-grid .time-colon{font-family:var(--font-mono);color:var(--text-muted);margin-top:18px;font-size:1.5rem;font-weight:700}@keyframes drum-roll-up{0%{opacity:0;transform:translateY(60%)}to{opacity:1;transform:translateY(0)}}@keyframes drum-roll-down{0%{opacity:0;transform:translateY(-60%)}to{opacity:1;transform:translateY(0)}}.modal-content .preset-chips{background-color:var(--bg-panel-header);border:1px solid var(--border-panel);border-radius:var(--radius-btn);flex-wrap:wrap;align-items:center;gap:6px;margin-bottom:6px;padding:8px 10px;display:flex}.modal-content .preset-chips .preset-label{color:var(--text-muted);margin-right:2px;font-size:.72rem;font-weight:700}.modal-content .preset-chips button.preset-chip-btn{background-color:var(--bg-panel-surface);border:1px solid var(--border-panel);color:var(--text-primary);border-radius:var(--radius-btn);cursor:pointer;transition:var(--transition-speed);padding:3px 8px;font-size:.72rem;font-weight:700}.modal-content .preset-chips button.preset-chip-btn:hover{background-color:var(--bg-card-hover);border-color:var(--border-light)}.modal-content .modal-actions{justify-content:flex-end;align-items:center;gap:8px;display:flex}.modal-content .modal-actions button{border-radius:var(--radius-btn);cursor:pointer;padding:6px 14px;font-size:.8rem;font-weight:600}.modal-content .modal-actions button.btn-cancel{background-color:var(--bg-panel-header);border:1px solid var(--border-panel);color:var(--text-secondary);transition:background-color var(--transition-speed)}.modal-content .modal-actions button.btn-cancel:hover{background-color:var(--bg-card-hover);color:var(--text-primary)}.modal-content .modal-actions button.btn-apply{color:#fff;background-color:#2b5288;border:1px solid #1c3b66;font-weight:700;transition:transform 80ms,background-color 80ms;box-shadow:0 2px #182d4c}.modal-content .modal-actions button.btn-apply:hover{background-color:#3663a0;transform:translateY(-1px)}.modal-content .modal-actions button.btn-apply:active{transform:translateY(1px);box-shadow:0 .5px #182d4c}