.app{display:flex;justify-content:center;height:100vh;width:100vw;background:linear-gradient(135deg,var(--color-bg-1) 0%,var(--color-bg-2) 40%,var(--color-bg-3) 100%);padding:16px;overflow:hidden;-webkit-user-select:none;user-select:none}.app-container{display:flex;flex-direction:column;gap:10px;width:100%;max-width:600px;min-height:0;max-height:100%}.timer-display{position:relative;display:flex;flex-direction:column;align-items:center;background:var(--color-panel);border:1px solid var(--color-panel-border);border-radius:6px;padding:16px 16px 8px;gap:8px;transition:none;flex-shrink:0}.timer-display-footer{display:flex;align-items:flex-end;justify-content:space-between;width:100%;align-self:stretch;min-height:52px}.timer-footer-controls{display:flex;gap:8px;align-items:center;flex-shrink:0}.timer-settings-btn{width:28px;height:28px;padding:0;border:none;border-radius:50%;background:transparent;color:var(--color-text-faint);font-size:16px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:color .15s,background .15s;flex-shrink:0}.timer-settings-btn:hover:not(:disabled){color:var(--color-btn-text);background:var(--color-settings-hover-bg)}.timer-settings-btn:disabled{opacity:.3;cursor:not-allowed}.timer-mic-btn{width:28px;height:28px;padding:0;border:none;border-radius:50%;background:transparent;color:var(--color-text-faint);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:color .15s,background .15s}.timer-mic-btn:hover:not(:disabled){color:var(--color-btn-text);background:var(--color-settings-hover-bg)}.timer-mic-btn.active{color:#53b36c}.timer-mic-btn.detected{color:#e8a838}.timer-mic-btn:disabled{opacity:.3;cursor:not-allowed}.timer-display-links{display:flex;gap:8px;align-items:center;flex-shrink:0}.timer-display-link{color:var(--color-text-faint);display:inline-flex;align-items:center;justify-content:center;text-decoration:none;cursor:pointer;min-width:14px;min-height:14px;flex-shrink:0;position:relative;transition:color .15s}.timer-display-link:hover{color:var(--color-text-secondary)}[data-tooltip]{position:relative}[data-tooltip]:after{content:attr(data-tooltip);position:absolute;bottom:calc(100% + 6px);right:0;white-space:nowrap;background:var(--color-dialog-bg);border:1px solid var(--color-dialog-border);color:var(--color-text);font-size:11px;padding:3px 7px;border-radius:4px;pointer-events:none;opacity:0;transform:translateY(4px);transition:opacity .15s,transform .15s;z-index:100;box-shadow:0 2px 8px #00000026}[data-tooltip]:hover:after{opacity:1;transform:translateY(0)}.timer-display-link.heart-link{color:#c94f72}.timer-display-link.heart-link svg{fill:none;stroke:currentColor}.timer-display-link.heart-link:hover{color:#db61a2}.timer-display-link.heart-link:hover svg{fill:currentColor;stroke:none}.timer-current-phase{font-family:Consolas,Courier New,monospace;font-size:clamp(48px,12vw,80px);font-weight:700;letter-spacing:4px;line-height:1;color:var(--color-text-strong);text-align:center}.timer-progress-bar{width:100%;height:6px;background:var(--color-progress-bg);border-radius:3px;overflow:hidden}.timer-progress-fill{height:100%;border-radius:3px;width:100%;transform-origin:left;will-change:transform}.zone-normal .timer-progress-fill{background:#5b9bd5}.zone-action .timer-progress-fill{background:#e8a838}.zone-complete .timer-progress-fill{background:#5cb85c}.timer-play-stop{display:flex;align-items:center;justify-content:center;width:52px;height:52px;border:none;border-radius:50%;background:var(--color-play-bg);color:var(--color-btn-text);cursor:pointer;transition:background .15s,color .15s,transform .1s}.timer-play-stop:hover{background:var(--color-play-hover);color:var(--color-text-strong);transform:scale(1.08)}.timer-play-stop:active{background:var(--color-play-active);transform:scale(.96)}.timer-meta{display:grid;grid-template-columns:1fr 1fr 1fr;width:100%;font-size:13px;color:var(--color-text-secondary)}.timer-meta>span{display:flex;flex-direction:column;align-items:center;gap:2px}.timer-info-item{display:flex;flex-direction:column;align-items:center;gap:2px}.timer-info-label{white-space:nowrap}.mono{font-family:Consolas,Courier New,monospace}.app-action-bar{display:flex;gap:8px;align-items:center;flex-shrink:0}.app-action-bar .btn-update{flex:1}.app-tabs{display:flex;flex-direction:column;background:var(--color-panel);border:1px solid var(--color-panel-border);border-radius:6px;overflow:hidden;min-height:0;flex:0 1 auto}.tab-bar{display:flex;border-bottom:1px solid var(--color-dialog-divider);background:var(--color-tab-bar-bg)}.tab{flex:1;padding:8px 12px;border:none;background:transparent;font-size:14px;cursor:pointer;color:var(--color-text-muted);border-bottom:2px solid transparent;transition:all .15s;text-align:center}.tab:hover:not(:disabled){color:var(--color-text-strong);background:var(--color-tab-hover-bg)}.tab.active{color:var(--color-accent);border-bottom-color:var(--color-accent);font-weight:600}.tab:disabled{opacity:.4;cursor:not-allowed}.tab-content{flex:1;display:flex;overflow:hidden;padding:10px;min-height:0}.timer-panel{display:flex;flex-direction:column;flex:1;gap:10px;min-height:0;overflow:hidden}.panel-scroll-area{flex:1;overflow-y:auto;overflow-x:hidden;min-height:0;border:1px solid var(--color-scroll-border);border-radius:4px;background:var(--color-scroll-bg);padding:10px}.panel-form-group{display:flex;flex-direction:column;gap:10px}.panel-hit-fields{display:flex;flex-direction:column;gap:8px}.form-field{display:flex;flex-direction:column;gap:3px}.form-field-label{font-size:12px;font-weight:500;color:var(--color-text-muted);white-space:nowrap}.form-field-input{flex:1;min-width:0}input[type=text],.int-input,.float-input{width:100%;padding:5px 8px;border:1px solid var(--color-input-border);border-radius:3px;font-size:14px;font-family:inherit;background:var(--color-input-bg);color:var(--color-text);outline:none;transition:border-color .15s}input[type=text]:focus,.int-input:focus,.float-input:focus{border-color:var(--color-input-focus);box-shadow:0 0 0 2px var(--color-input-focus-shadow)}input:disabled{background:var(--color-input-disabled-bg);color:var(--color-input-disabled-text)}select,.enum-select{width:100%;padding:5px 8px;border:1px solid var(--color-input-border);border-radius:3px;font-size:14px;font-family:inherit;background:var(--color-input-bg);color:var(--color-text);outline:none;cursor:pointer}select:focus{border-color:var(--color-input-focus);box-shadow:0 0 0 2px var(--color-input-focus-shadow)}select:disabled{background:var(--color-input-disabled-bg);color:var(--color-input-disabled-text)}.checkbox-label{display:flex;align-items:center;gap:6px;cursor:pointer}input[type=checkbox]{width:16px;height:16px;cursor:pointer}.color-input{width:60px;height:30px;border:1px solid var(--color-input-border);border-radius:3px;padding:2px;cursor:pointer}.btn{padding:6px 16px;border:1px solid var(--color-btn-border);border-radius:3px;background:var(--color-btn-bg);font-size:14px;cursor:pointer;color:var(--color-btn-text);transition:all .15s;white-space:nowrap}.btn:hover:not(:disabled){background:var(--color-btn-hover-bg);border-color:var(--color-btn-hover-border)}.btn:active:not(:disabled){background:var(--color-btn-active-bg)}.btn:disabled{opacity:.45;cursor:not-allowed}.btn-primary{background:var(--color-accent-bg);color:#fff;border-color:var(--color-accent-border)}.btn-primary:hover:not(:disabled){background:var(--color-accent-hover)}.btn-update{flex:1}.btn-icon{width:36px;height:36px;padding:0;display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0}.btn-success{background:#4caf50;color:#fff;border-color:#43a047;font-size:18px;font-weight:700}.btn-success:hover:not(:disabled){background:#43a047}.btn-danger{background:#d9534f;color:#fff;border-color:#c9302c}.btn-danger:hover:not(:disabled){background:#c9302c}.btn-add{width:100%;padding:8px}.app-status-bar{display:flex;align-items:center;justify-content:center;font-size:12px;color:var(--color-text-secondary);padding:2px 4px;min-height:20px;flex-shrink:0;text-align:center}.custom-scroll{padding:10px}.custom-phase-row{display:flex;gap:10px;align-items:flex-start;margin-bottom:10px}.custom-phase-index{font-size:14px;font-weight:600;color:var(--color-text-muted);padding-top:8px;min-width:20px;text-align:right}.custom-phase-group{flex:1;border:1px solid var(--color-custom-phase-border);border-radius:4px;background:var(--color-custom-phase-bg);padding:10px}.custom-phase-fields{display:flex;flex-direction:column;gap:8px}.custom-unit-row{display:flex;gap:8px;align-items:center}.custom-unit-row .enum-select{flex:1}.dialog-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:var(--color-dialog-overlay);display:flex;align-items:center;justify-content:center;z-index:1000}.dialog{background:var(--color-dialog-bg);border:1px solid var(--color-dialog-border);border-radius:6px;width:min(480px,90vw);max-height:90vh;display:flex;flex-direction:column;box-shadow:0 8px 32px #0003}.dialog-title{font-size:16px;font-weight:600;padding:12px 16px 8px;color:var(--color-text-strong)}.dialog-tabs{display:flex;border-bottom:1px solid var(--color-dialog-divider);padding:0 12px}.dialog-tab{padding:6px 16px;border:none;background:transparent;font-size:13px;cursor:pointer;color:var(--color-text-muted);border-bottom:2px solid transparent}.dialog-tab.active{color:var(--color-accent);border-bottom-color:var(--color-accent);font-weight:600}.dialog-content{flex:1;overflow-y:auto;padding:16px}.settings-panel{display:flex;flex-direction:column;gap:12px}.dialog-buttons{display:flex;gap:10px;padding:12px 16px;border-top:1px solid var(--color-dialog-divider);justify-content:flex-end}.dialog-buttons .btn-icon{margin-right:auto}@media(max-width:540px){.app{padding:8px}.app-container{max-width:none;gap:8px}.timer-display{padding:10px 10px 6px}.timer-current-phase{font-size:clamp(36px,14vw,56px);letter-spacing:2px}.timer-meta{font-size:12px}.timer-play-stop{width:44px;height:44px}.timer-play-stop svg{width:26px;height:26px}.tab{padding:6px 8px;font-size:13px}.app-action-bar{gap:6px}.btn{padding:6px 12px;font-size:13px}.btn-icon{width:34px;height:34px;font-size:16px}}@media(max-width:360px){.app{padding:4px}.timer-current-phase{font-size:32px}}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html,body,#root{height:100%;width:100%;overflow:hidden}:root{--color-bg-1: #c8dce8;--color-bg-2: #a8c4d8;--color-bg-3: #b0cce0;--color-panel: rgba(255, 255, 255, .35);--color-panel-border: rgba(0, 0, 0, .15);--color-text: #1a1a1a;--color-text-strong: #111;--color-text-secondary: #444;--color-text-muted: #555;--color-text-faint: #888;--color-input-bg: #fff;--color-input-border: #bbb;--color-input-disabled-bg: #eee;--color-input-disabled-text: #999;--color-input-focus: #5b9bd5;--color-input-focus-shadow: rgba(91, 155, 213, .2);--color-btn-bg: #f5f5f5;--color-btn-border: #bbb;--color-btn-text: #333;--color-btn-hover-bg: #e8e8e8;--color-btn-hover-border: #999;--color-btn-active-bg: #ddd;--color-accent: #1a6fb5;--color-accent-bg: #5b9bd5;--color-accent-border: #4a8ac4;--color-accent-hover: #4a8ac4;--color-tab-hover-bg: rgba(255, 255, 255, .3);--color-tab-bar-bg: rgba(255, 255, 255, .4);--color-dialog-bg: #e8eff5;--color-dialog-border: #aaa;--color-dialog-overlay: rgba(0, 0, 0, .35);--color-dialog-divider: rgba(0, 0, 0, .12);--color-progress-bg: rgba(0, 0, 0, .1);--color-play-bg: rgba(0, 0, 0, .08);--color-play-hover: rgba(0, 0, 0, .15);--color-play-active: rgba(0, 0, 0, .22);--color-settings-hover-bg: rgba(0, 0, 0, .08);--color-custom-phase-bg: rgba(255, 255, 255, .5);--color-custom-phase-border: rgba(0, 0, 0, .12);--color-scroll-border: rgba(0, 0, 0, .1);--color-scroll-bg: rgba(255, 255, 255, .4);--color-body-bg: #b8cfe0}[data-theme=dark]{--color-bg-1: #1a2332;--color-bg-2: #0f1923;--color-bg-3: #162230;--color-panel: rgba(255, 255, 255, .07);--color-panel-border: rgba(255, 255, 255, .1);--color-text: #d8dde3;--color-text-strong: #eef1f4;--color-text-secondary: #a0aab4;--color-text-muted: #8090a0;--color-text-faint: #607080;--color-input-bg: rgba(255, 255, 255, .07);--color-input-border: rgba(255, 255, 255, .15);--color-input-disabled-bg: rgba(255, 255, 255, .04);--color-input-disabled-text: #506070;--color-input-focus: #6aafdf;--color-input-focus-shadow: rgba(106, 175, 223, .25);--color-btn-bg: rgba(255, 255, 255, .08);--color-btn-border: rgba(255, 255, 255, .15);--color-btn-text: #c0cad4;--color-btn-hover-bg: rgba(255, 255, 255, .14);--color-btn-hover-border: rgba(255, 255, 255, .22);--color-btn-active-bg: rgba(255, 255, 255, .18);--color-accent: #6aafdf;--color-accent-bg: #5b9bd5;--color-accent-border: #4a8ac4;--color-accent-hover: #4a8ac4;--color-tab-hover-bg: rgba(255, 255, 255, .06);--color-tab-bar-bg: rgba(255, 255, 255, .04);--color-dialog-bg: #1c2838;--color-dialog-border: rgba(255, 255, 255, .12);--color-dialog-overlay: rgba(0, 0, 0, .6);--color-dialog-divider: rgba(255, 255, 255, .08);--color-progress-bg: rgba(255, 255, 255, .1);--color-play-bg: rgba(255, 255, 255, .1);--color-play-hover: rgba(255, 255, 255, .18);--color-play-active: rgba(255, 255, 255, .25);--color-settings-hover-bg: rgba(255, 255, 255, .1);--color-custom-phase-bg: rgba(255, 255, 255, .06);--color-custom-phase-border: rgba(255, 255, 255, .08);--color-scroll-border: rgba(255, 255, 255, .08);--color-scroll-bg: rgba(255, 255, 255, .05);--color-body-bg: #0f1923}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:14px;color:var(--color-text);background:var(--color-body-bg)}