@import"https://fonts.googleapis.com/css2?family=Geist+Mono:wght@700;900&family=Geist:wght@400;500;700&display=swap";*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}:root{--bg: #0a0a0f;--surface: #16161f;--surface2: #1e1e2e;--border: rgba(255, 255, 255, .08);--text: #f0f0f5;--text-muted: rgba(240, 240, 245, .5);--radius: 16px;--radius-sm: 8px;--font-display: "Geist Mono", monospace;--font-body: "Geist", sans-serif;--shadow-card: 0 1px 3px rgba(0,0,0,.4)}@media (prefers-color-scheme: light){:root{--bg: #f4f4f6;--surface: #ffffff;--surface2: #ebebef;--border: rgba(0, 0, 0, .08);--text: #111118;--text-muted: rgba(17, 17, 24, .45);--shadow-card: 0 1px 4px rgba(0,0,0,.1)}}html,body,#root{height:100%;width:100%}body{background:var(--bg);color:var(--text);font-family:var(--font-body);-webkit-font-smoothing:antialiased}.timer-view{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:2rem;transition:background .4s ease}.timer-center{text-align:center;display:flex;flex-direction:column;align-items:center;gap:1.5rem}.timer-title{font-family:var(--font-body);font-size:clamp(1.5rem,4vw,3rem);font-weight:700;letter-spacing:.02em;opacity:.9}.timer-display{display:flex;align-items:center;gap:.1em;font-family:var(--font-display);font-size:clamp(3rem,12vw,9rem);font-weight:900;line-height:1;letter-spacing:-.02em}.digit-group{display:flex;align-items:center}.digit{display:inline-block}.colon{margin:0 .05em;opacity:.6}.timer-display-relative{display:flex;align-items:baseline;gap:.6em}.rel-segment{display:flex;align-items:baseline;gap:.15em}.rel-value{font-family:var(--font-display);font-size:clamp(3rem,12vw,9rem);font-weight:900;line-height:1;letter-spacing:-.02em}.rel-unit{font-family:var(--font-body);font-size:clamp(1rem,3vw,2.5rem);font-weight:600;opacity:.6;letter-spacing:.01em}.timer-subtitle{font-size:1rem;opacity:.65;letter-spacing:.05em}.timer-finished{font-family:var(--font-display);font-size:clamp(2rem,6vw,4.5rem);font-weight:900;animation:pulse 1s ease infinite alternate}@keyframes pulse{0%{transform:scale(1)}to{transform:scale(1.06)}}.floating-buttons{position:fixed;top:1.5rem;right:1.5rem;z-index:100;display:flex;flex-direction:row;gap:.5rem;align-items:center}.fab{display:flex;align-items:center;gap:0;padding:.55rem;border:none;border-radius:50px;font-family:var(--font-body);font-size:.85rem;font-weight:600;cursor:pointer;transition:padding .2s ease,gap .2s ease,transform .15s ease,box-shadow .15s ease;box-shadow:0 4px 15px #00000040;animation:fade-up .25s ease both;overflow:hidden;white-space:nowrap}.fab-label{max-width:0;overflow:hidden;transition:max-width .2s ease,opacity .2s ease;opacity:0}.fab:hover .fab-label{max-width:120px;opacity:1}.fab:hover{padding:.55rem .9rem;gap:.4rem;transform:translateY(-1px);box-shadow:0 8px 25px #0000004d}.fab:active{transform:scale(.97)}@keyframes fade-up{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.fab:nth-child(1){animation-delay:.05s}.fab:nth-child(2){animation-delay:.1s}.fab:nth-child(3){animation-delay:.15s}.fab:nth-child(4){animation-delay:.2s}.dashboard{min-height:100vh;padding:2rem;max-width:1200px;margin:0 auto}.dashboard-topbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:2rem;position:relative;z-index:100}.topbar-actions{display:flex;align-items:center;gap:.5rem}.filter-wrapper{position:relative}.dash-fab-active{color:var(--text)!important;background:var(--surface)!important;border-color:#80808040!important}.filter-dropdown{position:absolute;top:calc(100% + .4rem);right:0;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm);box-shadow:0 8px 24px #00000026;overflow:hidden;z-index:200;min-width:140px;animation:dropdown-in .12s ease}@keyframes dropdown-in{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}.filter-option{display:flex;align-items:center;gap:.5rem;width:100%;padding:.6rem .9rem;background:transparent;border:none;color:var(--text-muted);font-family:var(--font-body);font-size:.875rem;font-weight:500;cursor:pointer;text-align:left;transition:background .1s,color .1s}.filter-option:hover{background:var(--surface2);color:var(--text)}.filter-option.active{color:var(--text);font-weight:600}.filter-check{opacity:0;flex-shrink:0}.filter-option.active .filter-check{opacity:1}.dashboard-wordmark{display:inline-flex;align-items:center;gap:.4rem;font-family:var(--font-display);font-size:1rem;font-weight:700;color:var(--text-muted)}.cards-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1rem;padding-bottom:5rem}.cards-grid .timer-card{animation:fade-up .25s ease both}.cards-grid .timer-card:nth-child(1){animation-delay:.04s}.cards-grid .timer-card:nth-child(2){animation-delay:.08s}.cards-grid .timer-card:nth-child(3){animation-delay:.12s}.cards-grid .timer-card:nth-child(4){animation-delay:.16s}.cards-grid .timer-card:nth-child(5){animation-delay:.2s}.cards-grid .timer-card:nth-child(6){animation-delay:.24s}.cards-grid .timer-card:nth-child(n+7){animation-delay:.28s}.dashboard-wordmark{animation:fade-up .2s ease both}.topbar-actions{animation:fade-up .2s ease both .05s}.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:60vh;gap:1rem;color:var(--text-muted)}.empty-icon{opacity:.2}.empty-title{font-size:1.1rem;font-weight:600;color:var(--text);opacity:.45}.empty-sub{font-size:.875rem;text-align:center;max-width:240px;line-height:1.6}.dash-fab{display:flex;align-items:center;gap:0;padding:.7rem;background:var(--surface2);color:var(--text-muted);border:1px solid var(--border);border-radius:50px;font-family:var(--font-body);font-size:.875rem;font-weight:600;cursor:pointer;box-shadow:var(--shadow-card);transition:padding .2s ease,gap .2s ease,transform .15s ease,box-shadow .15s ease,color .15s ease;overflow:hidden;white-space:nowrap;z-index:100}.dash-fab-label{max-width:0;overflow:hidden;opacity:0;transition:max-width .2s ease,opacity .2s ease}.dash-fab:hover{padding:.7rem 1.1rem;gap:.45rem;transform:translateY(-1px);color:var(--text);box-shadow:0 4px 16px #00000026}.dash-fab:hover .dash-fab-label{max-width:120px;opacity:1}.dash-fab:active{transform:scale(.97)}.timer-card{border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column;cursor:pointer;padding:1.1rem 1.1rem 1rem;gap:.6rem;box-shadow:var(--shadow-card);transition:transform .15s ease,box-shadow .15s ease}.timer-card:hover{transform:translateY(-2px);box-shadow:0 10px 30px #0003}.card-top{display:flex;align-items:flex-start;justify-content:space-between;gap:.5rem}.card-title{font-weight:600;font-size:.95rem;line-height:1.3;opacity:.9}.card-time{font-family:var(--font-display);font-size:2.2rem;font-weight:700;line-height:1;letter-spacing:-.02em}.card-colon{opacity:.65;margin:0 .02em}.card-rel-segment{display:inline-flex;align-items:baseline;gap:.1em;margin-right:.35em}.card-rel-unit{font-family:var(--font-body);font-size:.55em;font-weight:600;opacity:.65}.card-bottom{display:flex;align-items:center;justify-content:space-between;gap:.5rem;flex-wrap:wrap}.card-badge{font-size:.68rem;font-weight:700;padding:.2rem .55rem;border-radius:50px;text-transform:uppercase;letter-spacing:.07em;white-space:nowrap}.card-date{font-size:.75rem;opacity:.7;white-space:nowrap}.card-actions{display:flex;gap:.3rem;flex-shrink:0}.card-action-btn{background:#00000026;border:none;width:28px;height:28px;border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;cursor:pointer;opacity:.75;transition:opacity .15s,background .15s}.card-action-btn:hover{opacity:1;background:#00000040}.card-action-btn-confirm{opacity:1!important;background:#00000059!important;min-width:52px;border-radius:var(--radius-sm)}.card-confirm-label{font-family:var(--font-body);font-size:.7rem;font-weight:700;white-space:nowrap}.error-view{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:2rem}.error-box{text-align:center;display:flex;flex-direction:column;align-items:center;gap:.75rem}.error-title{font-size:1.4rem;font-weight:700}.error-sub{color:var(--text-muted);font-size:.95rem}.error-btn{margin-top:.5rem;background:var(--surface2)!important;color:var(--text)!important;padding:.65rem 1.4rem;border-radius:var(--radius-sm)}.modal-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background:#000000a6;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);display:flex;align-items:center;justify-content:center;z-index:200;padding:1rem;animation:backdrop-in .18s ease}@keyframes backdrop-in{0%{opacity:0}to{opacity:1}}.modal{background:var(--surface);border:1px solid rgba(255,255,255,.1);border-radius:20px;width:100%;max-width:460px;overflow:hidden;animation:modal-up .22s cubic-bezier(.22,1,.36,1);box-shadow:0 30px 80px #00000080}@keyframes modal-up{0%{opacity:0;transform:translateY(20px) scale(.96)}to{opacity:1;transform:translateY(0) scale(1)}}.modal-header{display:flex;align-items:center;justify-content:space-between;padding:1.5rem 1.5rem 0}.modal-title{font-family:var(--font-body);font-size:1.15rem;font-weight:700;color:var(--text)}.modal-close{background:var(--surface2);border:1px solid var(--border);color:var(--text-muted);width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .15s,color .15s;flex-shrink:0}.modal-close:hover{background:#ffffff1a;color:var(--text)}.editor-form{display:flex;flex-direction:column;gap:1.1rem;padding:1.25rem 1.5rem 1.5rem}.field{display:flex;flex-direction:column;gap:.35rem}.field label{font-size:.75rem;font-weight:600;color:var(--text-muted);text-transform:uppercase;letter-spacing:.08em}.field input[type=text],.field input[type=datetime-local]{background:var(--surface2);border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--text);padding:.7rem .9rem;font-family:var(--font-body);font-size:.95rem;outline:none;transition:border-color .15s,box-shadow .15s;width:100%}.field input:focus{border-color:#ffffff40;box-shadow:0 0 0 3px #ffffff0d}.mode-toggle{display:grid;grid-template-columns:1fr 1fr;gap:.4rem;background:var(--surface2);border:1px solid var(--border);border-radius:var(--radius-sm);padding:.3rem}.mode-btn{background:transparent;border:none;color:var(--text-muted);border-radius:6px;padding:.55rem;font-family:var(--font-body);font-size:.875rem;font-weight:600;cursor:pointer;transition:all .15s;display:inline-flex;align-items:center;justify-content:center;gap:.4rem}.mode-btn.active{background:var(--bg);color:var(--text);box-shadow:0 1px 3px #00000026}.color-picker{display:flex;gap:.45rem;flex-wrap:wrap;align-items:center}.color-swatch{width:30px;height:30px;border-radius:50%;border:2px solid transparent;cursor:pointer;transition:transform .15s,box-shadow .15s}.color-swatch:hover{transform:scale(1.15)}.color-swatch.selected{border-color:#fffc;transform:scale(1.18);box-shadow:0 0 0 3px #ffffff26}.color-free{width:30px;height:30px;border-radius:50%;border:2px dashed rgba(255,255,255,.2);background:transparent;cursor:pointer;padding:0;overflow:hidden;transition:border-color .15s}.color-free:hover{border-color:#fff6}.editor-actions{display:grid;grid-template-columns:1fr 2fr;gap:.6rem;margin-top:.25rem}.btn-secondary{background:var(--surface2);border:1px solid var(--border);color:var(--text-muted);padding:.7rem;border-radius:var(--radius-sm);font-family:var(--font-body);font-size:.9rem;font-weight:600;cursor:pointer;transition:background .15s,color .15s}.btn-secondary:hover{background:#ffffff12;color:var(--text)}.btn-primary{border:none;padding:.7rem;border-radius:var(--radius-sm);font-family:var(--font-body);font-size:.9rem;font-weight:700;cursor:pointer;transition:filter .15s,transform .1s}.btn-primary:hover{filter:brightness(1.12);transform:translateY(-1px)}.btn-primary:active{transform:scale(.98)}::-webkit-scrollbar{width:6px}::-webkit-scrollbar-track{background:var(--bg)}::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px}
