:root{--bg:#1a1a2e;--bg-card:#16213e;--bg-form:#0f3460;--accent:#e94560;--accent-light:#ff6b81;--green:#2ecc71;--green-dark:#27ae60;--yellow:#f39c12;--text:#e0e0e0;--text-dim:#8892a4;--text-bright:#fff;--border:#2a3a5c;--radius:12px;--sans:"Segoe UI", system-ui, -apple-system, sans-serif;--mono:"SF Mono", "Cascadia Code", "Consolas", monospace}*{box-sizing:border-box;margin:0;padding:0}body{font-family:var(--sans);background:var(--bg);color:var(--text);min-height:100vh}#root{max-width:860px;margin:0 auto;padding:20px 16px 40px}button{cursor:pointer;font-family:var(--sans);border:none;border-radius:8px;padding:8px 16px;font-size:14px;font-weight:600;transition:all .15s}button:active{transform:scale(.96)}input[type=text]{font-family:var(--sans);border:1px solid var(--border);color:var(--text-bright);background:#ffffff14;border-radius:8px;outline:none;padding:10px 14px;font-size:16px;transition:border-color .2s}input:focus{border-color:var(--accent)}.time-input{text-align:center;width:72px}.app-header{text-align:center;padding:24px 0 16px}.app-header h1{color:var(--text-bright);margin:0 0 4px;font-size:28px;font-weight:700}.subtitle{color:var(--text-dim);font-size:14px}.room-info{justify-content:center;align-items:center;gap:8px;margin-top:10px;display:flex}.room-id{color:var(--text-dim);font-size:13px;font-family:var(--mono)}.btn-copy{color:var(--text);background:#ffffff1a;padding:4px 10px;font-size:12px}.btn-copy:hover{background:#fff3}.location-form{background:var(--bg-form);border-radius:var(--radius);border:1px solid var(--border);margin-bottom:24px;padding:16px 20px}.form-row{align-items:center;gap:10px;display:flex}.form-row+.form-row{margin-top:12px}.label-input{flex:1;width:100%}.time-inputs{align-items:center;gap:8px;display:flex}.time-field{align-items:center;gap:4px;display:flex}.time-label{color:var(--text-dim);font-size:14px}.checkbox-label{color:var(--text-dim);cursor:pointer;white-space:nowrap;-webkit-user-select:none;user-select:none;align-items:center;gap:4px;font-size:13px;display:flex}.checkbox-label input[type=checkbox]{accent-color:var(--accent);cursor:pointer;width:16px;height:16px}.btn-add{background:var(--accent);color:#fff;white-space:nowrap;margin-left:auto;padding:10px 20px}.btn-add:hover{background:var(--accent-light)}.timer-list{grid-template-columns:repeat(2,1fr);gap:12px;display:grid}.empty-state{text-align:center;color:var(--text-dim);border:1px dashed var(--border);border-radius:var(--radius);grid-column:1/-1;padding:48px 20px;font-size:15px}.timer-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:14px 16px;transition:border-color .3s,box-shadow .3s;overflow:hidden}.timer-card.running{border-color:var(--green);box-shadow:0 0 12px #2ecc7126}.timer-card.finished{border-color:var(--accent);animation:1s ease-in-out infinite alternate pulse;box-shadow:0 0 12px #e9456033}.timer-card.just-finished{background:linear-gradient(135deg,#e9456026,#ff47570d);border-width:2px;border-color:#ff4757;animation:.6s ease-in-out infinite alternate alertPulse;transform:scale(1.02)}.timer-card.just-finished .timer-label{color:#ff6b81;font-size:17px}.timer-card.just-finished .finished-badge{font-size:20px;animation:.5s ease-in-out infinite alternate blink}@keyframes pulse{0%{box-shadow:0 0 8px #e9456033}to{box-shadow:0 0 20px #e9456066}}@keyframes alertPulse{0%{box-shadow:0 0 12px #ff47574d}to{box-shadow:0 0 30px #ff475799,0 0 60px #ff475733}}.timer-card-header{justify-content:space-between;align-items:center;margin-bottom:12px;display:flex}.timer-label-group{flex-direction:column;gap:4px;min-width:0;display:flex}.timer-label{color:var(--text-bright);white-space:nowrap;text-overflow:ellipsis;font-size:15px;font-weight:600;overflow:hidden}.group-badge-wrap{position:relative}.group-badge{color:#ffffff40;cursor:pointer;background:0 0;border:none;border-radius:6px;align-items:center;gap:3px;margin-left:-4px;padding:1px 4px;font-size:11px;transition:color .15s,background .15s;display:inline-flex}.group-badge:hover{color:var(--text-dim);background:#ffffff12}.group-badge-unset{opacity:.4}.group-badge-arrow{opacity:.6;font-size:9px;transition:opacity .15s}.group-badge:hover .group-badge-arrow{opacity:1}.group-picker-backdrop{z-index:99;position:fixed;inset:0}.group-picker-dropdown{z-index:100;border:1px solid var(--border);background:#1e2235;border-radius:10px;flex-direction:column;min-width:120px;padding:4px;display:flex;position:absolute;top:calc(100% + 4px);left:0;box-shadow:0 8px 24px #0006}.group-picker-option{color:var(--text);cursor:pointer;text-align:left;background:0 0;border:none;border-radius:7px;padding:7px 12px;font-size:13px;transition:background .12s}.group-picker-option:hover{background:#ffffff14}.group-picker-active{color:var(--accent-light);font-weight:600}.btn-delete{color:var(--text-dim);background:0 0;border-radius:6px;padding:2px 8px;font-size:22px;line-height:1}.btn-delete:hover{color:var(--accent);background:#e9456033}.timer-display{text-align:center;font-family:var(--mono);padding:8px 0}.time-main{color:var(--text-bright);letter-spacing:2px;font-size:48px;font-weight:700}.timer-card.finished .time-main{color:var(--accent)}.progress-bar{background:#fff3;border-radius:3px;height:6px;margin:12px 0;overflow:hidden}.progress-fill{background:var(--green);border-radius:3px;height:100%}.timer-card.finished .progress-fill{background:var(--accent)}.finished-badge{text-align:center;color:var(--accent);margin-bottom:8px;font-size:16px;font-weight:700;animation:.8s ease-in-out infinite alternate blink}@keyframes blink{0%{opacity:1}to{opacity:.4}}.timer-actions{justify-content:center;gap:8px;display:flex}.btn-start{background:var(--green);color:#fff}.btn-start:hover{background:var(--green-dark)}.btn-pause{background:var(--yellow);color:#1a1a2e}.btn-pause:hover{opacity:.85}.btn-reset{color:var(--text);background:#ffffff14}.btn-reset:hover{background:#ffffff26}.mushroom-selector{margin:12px 0 8px}.mushroom-selector-label{color:var(--text-dim);text-align:center;margin-bottom:8px;font-size:13px;display:block}.mushroom-selector-row{justify-content:center;align-items:center;gap:8px;display:flex}.mushroom-select{font-family:var(--sans);border:1px solid var(--border);color:var(--text-bright);background:#ffffff14;border-radius:8px;outline:none;padding:8px 12px;font-size:14px;transition:border-color .2s}.mushroom-select:focus{border-color:var(--accent)}.mushroom-select option{background:var(--bg-card);color:var(--text-bright)}.btn-record{background:var(--accent);color:#fff;white-space:nowrap;padding:8px 16px}.btn-record:hover{background:var(--accent-light)}.timer-card.idle{border-color:var(--border);opacity:.85}.duration-input{margin:8px 0}.duration-row{justify-content:center;align-items:center;gap:8px;display:flex}.duration-row .time-input{width:56px}.duration-row .btn-start{white-space:nowrap;padding:8px 16px}.finished-actions{border-top:1px solid var(--border);margin-top:12px;padding-top:12px}.btn-skip{color:var(--text-dim);background:0 0;margin:8px auto 0;padding:6px 16px;font-size:13px;display:block}.btn-skip:hover{color:var(--text);background:#ffffff0d}.history-section{border-top:1px solid var(--border);margin-top:12px;padding-top:8px}.history-toggle{width:100%;color:var(--text-dim);cursor:pointer;font-size:13px;font-family:var(--sans);background:0 0;border:none;justify-content:space-between;align-items:center;padding:4px 0;display:flex}.history-toggle:hover{color:var(--text)}.history-latest{font-weight:500}.history-count{font-size:12px}.history-list{scrollbar-width:thin;scrollbar-color:#ffffff26 transparent;max-height:200px;margin-top:6px;overflow-y:auto}.history-list::-webkit-scrollbar{width:6px}.history-list::-webkit-scrollbar-track{background:0 0}.history-list::-webkit-scrollbar-thumb{background:#ffffff26;border-radius:3px}.history-list::-webkit-scrollbar-thumb:hover{background:#ffffff40}.history-item{color:var(--text-dim);justify-content:space-between;align-items:center;padding:4px 0;font-size:13px;display:flex}.history-item+.history-item{border-top:1px solid #ffffff0d}.history-date{font-family:var(--mono);min-width:80px;font-size:12px}.history-mushroom-group{align-items:center;gap:8px;display:flex}.history-mushroom{color:var(--text)}.btn-delete-record{color:var(--text-dim);cursor:pointer;opacity:.5;background:0 0;border:none;padding:0 4px;font-size:16px;line-height:1;transition:opacity .15s,color .15s}.btn-delete-record:hover{opacity:1;color:var(--accent)}.confirm-overlay{z-index:1000;background:#0009;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.confirm-dialog{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);text-align:center;min-width:280px;padding:24px}.confirm-dialog p{color:var(--text-bright);margin:0 0 16px;font-size:15px}.confirm-actions{justify-content:center;gap:10px;display:flex}.btn-confirm-yes{background:var(--accent);color:#fff;border-radius:var(--radius);cursor:pointer;border:none;padding:8px 20px;font-size:14px}.btn-confirm-yes:hover{background:var(--accent-hover)}.btn-confirm-no{color:var(--text);border:1px solid var(--border);border-radius:var(--radius);cursor:pointer;background:#ffffff1a;padding:8px 20px;font-size:14px}.btn-confirm-no:hover{background:#ffffff26}.history-duration{font-family:var(--mono);font-size:12px}.group-tabs{flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:16px;display:flex}.group-tab{border:1px solid var(--border);color:var(--text-dim);cursor:pointer;white-space:nowrap;background:#ffffff0f;border-radius:20px;align-items:center;gap:6px;padding:6px 14px;font-size:13px;transition:background .15s,color .15s,border-color .15s;display:flex}.group-tab:hover{color:var(--text);background:#ffffff1a}.group-tab-active{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:600}.group-tab-active:hover{background:var(--accent-hover);border-color:var(--accent-hover);color:#fff}.group-tab-delete{opacity:.5;margin-left:2px;font-size:15px;line-height:1;transition:opacity .15s}.group-tab-delete:hover{opacity:1}.group-tab-new{color:var(--text-dim);border-style:dashed}.group-tab-wrap{display:contents}.group-tab-input-wrap{align-items:center;gap:4px;display:flex}.group-tab-input{border:1px solid var(--accent);color:var(--text);background:#ffffff14;border-radius:20px;outline:none;width:110px;padding:5px 12px;font-size:13px}.group-tab-add-confirm{background:var(--accent);color:#fff;cursor:pointer;border:none;border-radius:50%;justify-content:center;align-items:center;width:28px;height:28px;font-size:14px;display:flex}.group-tab-add-confirm:hover{background:var(--accent-hover)}.today-summary{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);margin-bottom:20px;padding:14px 18px}.today-header{justify-content:space-between;align-items:center;margin-bottom:10px;display:flex}.today-title{color:var(--text-bright);font-size:15px;font-weight:600}.today-total{color:var(--text-dim);font-size:13px}.today-tags{flex-wrap:wrap;gap:8px;display:flex}.today-tag{border:1px solid var(--border);color:var(--text);background:#ffffff0f;border-radius:20px;padding:4px 12px;font-size:13px}.today-tag strong{color:var(--accent-light);margin-left:4px}.today-tag-large{color:gold;background:#ffd7001a;border-color:#ffd70066}.today-tag-large strong{color:gold}@media (width<=640px){.timer-list{grid-template-columns:1fr}}@media (width<=480px){.time-main{font-size:36px}.form-row{flex-wrap:wrap}.btn-add{width:100%;margin-left:0}.duration-row{flex-wrap:wrap;justify-content:center}.duration-row .btn-start{width:100%}.mushroom-selector-row{flex-wrap:wrap}.mushroom-select{flex:1;min-width:0}.btn-record{width:100%}}