*{box-sizing:border-box}
body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;max-width:720px;margin:0 auto;padding:20px;color:#2d3748;background:#fafbfc;line-height:1.6}
header{display:flex;align-items:center;justify-content:space-between;margin-bottom:24px;padding-bottom:16px;border-bottom:1px solid #e2e8f0}
h1{margin:0;font-size:1.5rem;font-weight:600;color:#1a202c}
.header-info{display:flex;align-items:center;gap:12px}
.version-info{font-size:0.75rem;color:#718096;background:#ffffff;padding:6px 12px;border-radius:20px;border:1px solid #e2e8f0;box-shadow:0 1px 3px rgba(0,0,0,0.1)}
.version-info.updated{background:#f0fff4;color:#38a169;border-color:#9ae6b4;box-shadow:0 1px 3px rgba(56,161,105,0.1)}
section.add{background:#ffffff;border:1px solid #e2e8f0;border-radius:16px;padding:20px;margin-bottom:24px;box-shadow:0 1px 3px rgba(0,0,0,0.05)}
.row{display:flex;gap:12px;align-items:center;margin-top:12px}
.preset-row{justify-content:flex-start;flex-wrap:wrap;margin-top:16px;padding-top:16px;border-top:1px solid #e2e8f0}
.preset-label{font-size:0.9rem;color:#718096;margin-right:8px;font-weight:500}
.preset-btn{background:#f7fafc;color:#4a5568;border:1px solid #e2e8f0;transition:all 0.2s ease;border-radius:8px;font-weight:500;box-shadow:0 1px 2px rgba(0,0,0,0.05)}
.preset-btn:hover{background:#edf2f7;border-color:#cbd5e0;transform:translateY(-1px);box-shadow:0 2px 4px rgba(0,0,0,0.1)}
input[type=number]{width:90px}
input,button{padding:12px 16px;border-radius:8px;border:1px solid #e2e8f0;font-size:1rem;transition:all 0.2s ease}
input{background:#ffffff;color:#2d3748}
input:focus{outline:none;border-color:#4299e1;box-shadow:0 0 0 3px rgba(66,153,225,0.1)}
button{background:#4299e1;color:#ffffff;border:none;cursor:pointer;font-weight:500;box-shadow:0 1px 2px rgba(0,0,0,0.05)}
button:hover{background:#3182ce;transform:translateY(-1px);box-shadow:0 2px 4px rgba(0,0,0,0.1)}
button.ghost{background:#ffffff;color:#4299e1;border:1px solid #4299e1}
button.ghost:hover{background:#ebf8ff;border-color:#3182ce}
button.secondary{background:#f7fafc;color:#4a5568;border:1px solid #e2e8f0}
button.secondary:hover{background:#edf2f7;border-color:#cbd5e0}
button.small{padding:8px 12px;font-size:0.875rem;border-radius:6px}
button:disabled{opacity:0.6;cursor:not-allowed;transform:none}
ul#timers{list-style:none;padding:0;margin:0;display:grid;gap:16px}
li.timer{display:flex;align-items:center;justify-content:space-between;border:1px solid #e2e8f0;border-radius:12px;padding:16px 20px;background:#ffffff;box-shadow:0 1px 3px rgba(0,0,0,0.05);transition:all 0.2s ease}
li.timer:hover{border-color:#cbd5e0;box-shadow:0 2px 8px rgba(0,0,0,0.1)}
.timer .left{display:flex;flex-direction:column;gap:6px}
.label-container,.time-container{display:flex;align-items:center;gap:4px}
.label{font-weight:600;cursor:pointer;padding:4px 8px;border-radius:6px;transition:all 0.2s ease;color:#2d3748}
.label:hover{background:#f7fafc;color:#1a202c}
.label.empty{color:#a0aec0;font-style:italic}
.time{font-variant-numeric:tabular-nums;font-size:1.5rem;font-weight:700;cursor:pointer;padding:4px 8px;border-radius:6px;transition:all 0.2s ease;color:#1a202c}
.time:hover{background:#f7fafc}
.editable{border:1px solid transparent}
.editable:hover{border-color:#e2e8f0}
.edit-input{padding:4px 8px;font-size:0.9rem;border:1px solid #4299e1;border-radius:6px;background:#ffffff}
.badge{padding:4px 12px;border-radius:20px;background:#ebf8ff;color:#2b6cb0;font-size:0.75rem;border:1px solid #bee3f8;font-weight:500}
.actions{display:flex;gap:8px}
.btn-icon{background:#f7fafc;border:1px solid #e2e8f0;color:#4a5568;padding:10px;border-radius:8px;transition:all 0.2s ease;box-shadow:0 1px 2px rgba(0,0,0,0.05);min-width:40px;min-height:40px;display:flex;align-items:center;justify-content:center}
.btn-icon:hover{background:#edf2f7;border-color:#cbd5e0;color:#2d3748;transform:translateY(-1px);box-shadow:0 2px 4px rgba(0,0,0,0.1)}
.btn-icon svg{stroke-width:2.5}
.play-pause{background:#e6fffa;border-color:#81e6d9;color:#234e52}
.play-pause:hover{background:#b2f5ea;border-color:#4fd1c7;color:#1a202c}
.reset{background:#fef5e7;border-color:#f6ad55;color:#744210}
.reset:hover{background:#fed7aa;border-color:#ed8936;color:#1a202c}
.delete{background:#fed7d7;border-color:#fc8181;color:#742a2a}
.delete:hover{background:#feb2b2;border-color:#f56565;color:#1a202c}
.muted{color:#718096;font-size:0.9rem}
footer{margin-top:32px;padding-top:16px;border-top:1px solid #e2e8f0}