html,body,#root{height:100%;margin:0;padding:0}body{font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;background:#ffeef5}:root{--bg: #ffeef5;--sidebar-bg: #ffe0f0;--card-bg: #ffc9e6;--card-active: #ff7fb8;--accent: #ff7fb8;--text-main: #77455a;--accent-soft: rgba(255, 127, 184, .4);--accent-shadow: rgba(255, 127, 184, .3);--line-bg: #ffe5f3;--line-gradient-start: #ff7fb8;--line-gradient-end: #ffb1d6;--button-bg: #ffd1ea;--button-bg-hover: #ffb7dd;--prompt-bg: rgba(255, 209, 234, .9)}.app-shell.theme-sakura{--bg: #ffeef5;--sidebar-bg: #ffe0f0;--card-bg: #ffc9e6;--card-active: #ff7fb8;--accent: #ff7fb8;--text-main: #77455a;--line-bg: #ffe5f3;--line-gradient-start: #ff7fb8;--line-gradient-end: #ffb1d6;--button-bg: #ffd1ea;--button-bg-hover: #ffb7dd;--prompt-bg: rgba(255, 209, 234, .9);--accent-soft: rgba(255, 127, 184, .4);--accent-shadow: rgba(255, 127, 184, .3)}.app-shell.theme-sprout{--bg: #f7fde8;--sidebar-bg: #e6f7c9;--card-bg: #d8efb3;--card-active: #b7de6f;--accent: #5a7f28;--text-main: #38471b;--line-bg: #e6f7c9;--line-gradient-start: #7ebd38;--line-gradient-end: #c3e673;--button-bg: #e0f3ba;--button-bg-hover: #d1e9a7;--prompt-bg: rgba(224, 243, 186, .95);--accent-soft: rgba(90, 127, 40, .4);--accent-shadow: rgba(90, 127, 40, .3)}.app-shell.theme-hyacinth{--bg: #f7f3ff;--sidebar-bg: #e5d6ff;--card-bg: #d7c3ff;--card-active: #b390ff;--accent: #6b46c1;--text-main: #2c2146;--line-bg: #e5d6ff;--line-gradient-start: #7b5ce6;--line-gradient-end: #c39cff;--button-bg: #e3d6ff;--button-bg-hover: #d4c4ff;--prompt-bg: rgba(227, 214, 255, .95);--accent-soft: rgba(107, 70, 193, .4);--accent-shadow: rgba(107, 70, 193, .3)}.app-shell.theme-unicorn{--bg: linear-gradient(180deg, #ffe8f9, #fffdde, #e2fffd, #f0e5ff);--sidebar-bg: linear-gradient(135deg, #fabaea, #f6dba0, #bfecef, #d2bcf7);--card-bg: linear-gradient(135deg, #ffe8f9, #fffdde, #e2fffd, #f0e5ff);--card-active: linear-gradient(135deg, #ff7bd7, #ffd96a, #8ef7ff, #c59cff);--accent: #ff36c7;--text-main: #3a1e4f;--line-bg: rgba(255, 255, 255, .5);--line-gradient-start: #ff3ec9;--line-gradient-end: #56e3ff;--button-bg: rgba(255, 255, 255, .65);--button-bg-hover: rgba(255, 255, 255, .8);--prompt-bg: rgba(255, 255, 255, .6);--accent-soft: rgba(255, 54, 199, .4);--accent-shadow: rgba(255, 54, 199, .3)}.app-shell.theme-night{--bg: #14101a;--sidebar-bg: #1d1726;--card-bg: #2a2236;--card-active: #4b3d63;--accent: #9f85ff;--text-main: #dcd2ff;--line-bg: #2a2236;--line-gradient-start: #7758d8;--line-gradient-end: #b299ff;--button-bg: #2f2740;--button-bg-hover: #3c3153;--prompt-bg: rgba(60, 49, 83, .9);--accent-soft: rgba(159, 133, 255, .35);--accent-shadow: rgba(159, 133, 255, .25)}.app-shell.theme-cosmic{--bg: #0a0f1a;--sidebar-bg: #0f1625;--card-bg: #151f32;--card-active: #1e3653;--accent: #5bbcff;--text-main: #c8e8ff;--line-bg: #121b2b;--line-gradient-start: #3ba4ff;--line-gradient-end: #75eaff;--button-bg: #152033;--button-bg-hover: #1c2d47;--prompt-bg: rgba(21, 32, 51, .9);--accent-soft: rgba(91, 188, 255, .35);--accent-shadow: rgba(91, 188, 255, .25)}.app-shell.theme-oracle{--bg: linear-gradient( 135deg, #0a0810 0%, #120d20 35%, #1a1230 60%, #0f0a1a 100% );--sidebar-bg: #0f0a1a;--card-bg: #1d142f;--card-active: linear-gradient(135deg, #512a86, #2a3f8e, #3f0c6a);--accent: #a970ff;--text-main: #e7d8ff;--line-bg: #1a1228;--line-gradient-start: #b86cff;--line-gradient-end: #6cf1ff;--button-bg: #231835;--button-bg-hover: #2d1f46;--prompt-bg: rgba(35, 24, 53, .9);--accent-soft: rgba(169, 112, 255, .4);--accent-shadow: rgba(169, 112, 255, .25)}.app-shell.theme-grove{--bg: #0a0f1a;--sidebar-bg: #0f261b;--card-bg: #133222;--card-active: linear-gradient(135deg, #1e6b4b, #2e8c65, #1a5b3e);--accent: #5affb6;--text-main: #d9ffe8;--line-bg: #0f261b;--line-gradient-start: #50f2a3;--line-gradient-end: #9affcc;--button-bg: #143426;--button-bg-hover: #1b4a36;--prompt-bg: rgba(20, 52, 38, .9);--accent-soft: rgba(90, 255, 182, .35);--accent-shadow: rgba(90, 255, 182, .25)}*,*:before,*:after{box-sizing:border-box}body{margin:0}.app-shell{height:100%;min-height:100vh;display:grid;grid-template-columns:260px 1fr;grid-template-rows:1fr auto;grid-template-areas:"sidebar main" "footer footer";background:var(--bg);color:var(--text-main);font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}.sidebar{grid-area:sidebar;background:var(--sidebar-bg);padding:16px;display:flex;flex-direction:column;gap:16px}.sidebar-header{display:flex;align-items:center;gap:8px;font-weight:700;font-size:1.2rem}.app-emoji{font-size:1.5rem}.timer-list{display:flex;flex-direction:column;gap:8px}.timer-card{border:none;border-radius:12px;background:var(--card-bg);padding:10px 12px;text-align:left;cursor:pointer;display:flex;flex-direction:column;gap:4px;transition:transform .1s ease,box-shadow .1s ease,background .1s ease}.timer-card:hover{transform:translateY(-1px);box-shadow:0 2px 6px #8c2c6540}.timer-card--active{background:var(--card-active);box-shadow:0 3px 8px var(--accent-shadow)}.timer-card-name{font-weight:600}.timer-card-duration{font-size:.8rem;opacity:.8}.main-view{grid-area:main;padding:24px;display:flex;align-items:flex-start;justify-content:flex-start}.timer-view{width:100%;max-width:720px;padding:8px 0}.timer-view-title{margin-top:0;margin-bottom:16px;display:flex;justify-content:space-between;align-items:center}.footer{grid-area:footer;background:var(--sidebar-bg);padding:8px 16px}.footer-content{display:flex;align-items:center;gap:8px;font-size:.9rem}.theme-badge{border:none;border-radius:999px;padding:4px 10px;cursor:pointer;font-size:.85rem;transition:background .15s ease,color .15s ease,transform .15s ease}.theme-badge--sakura{background:#ffd1ea;color:#77455a}.theme-badge--sakura:hover{background:#ffb7dd}.theme-badge--sprout{background:#e0f3ba;color:#234034}.theme-badge--sprout:hover{background:#d1e9a7}.theme-badge--hyacinth{background:#e3d6ff;color:#2c2146}.theme-badge--hyacinth:hover{background:#d4c4ff}.theme-badge--night{background:#2a2236;color:#dcd2ff}.theme-badge--night:hover{background:#352b45}.theme-badge--unicorn{background:linear-gradient(135deg,#ffd1ec,#ffe9a8,#c8f5ff);color:#5b3260}.theme-badge--unicorn:hover{background:linear-gradient(135deg,#ffc3e6,#ffe295,#b8eeff)}.theme-badge--cosmic{background:linear-gradient(135deg,#0d1b3d,#153a63,#1b567a);color:#c8e8ff}.theme-badge--cosmic:hover{background:linear-gradient(135deg,#12224c,#1d4a75,#236c92)}.theme-badge--oracle{background:linear-gradient(135deg,#4a1d6f,#1f3e7a,#3b0f70);color:#e7d8ff}.theme-badge--oracle:hover{background:linear-gradient(135deg,#5a2791,#254a92,#4c168a)}.theme-badge--grove{background:linear-gradient(135deg,#0f2e1d,#1a5b3e,#0f3d2b);color:#d9ffe8}.theme-badge--grove:hover{background:linear-gradient(135deg,#133b26,#207048,#145039)}.theme-badge--active{transform:scale(1.07);box-shadow:0 0 8px var(--accent-shadow);color:#fff!important}@media(max-width:768px){.app-shell{grid-template-columns:1fr;grid-template-rows:auto 1fr auto;grid-template-areas:"sidebar" "main" "footer"}.sidebar{flex-direction:row;align-items:center;gap:12px;overflow-x:auto}.timer-list{flex-direction:row}.timer-card{min-width:120px}}.timer-line-wrapper{margin-bottom:16px;padding-top:10px}.timer-line{position:relative;height:12px;border-radius:999px;background:var(--line-bg);overflow:visible}.timer-line-progress{position:absolute;top:0;left:0;bottom:0;border-radius:999px;background:linear-gradient(90deg,var(--line-gradient-start),var(--line-gradient-end));transition:width .1s linear}.timer-emoji{position:absolute;top:50%;transform:translate(-40%,-60%);font-size:2rem;line-height:1;transition:left .1s linear;pointer-events:none}.timer-emoji-inner{display:block}.timer-time-display{font-size:2.4rem;font-weight:700;text-align:left;margin-bottom:16px}.timer-controls{display:flex;gap:8px}.timer-controls button{border:none;border-radius:999px;padding:6px 14px;background:var(--button-bg);cursor:pointer;font-size:.9rem;color:var(--text-main)}.timer-controls button:hover{background:var(--button-bg-hover);color:var(--text-main)}.timer-card-row{display:flex;flex-direction:row;align-items:center;justify-content:space-between;gap:8px;width:100%}.timer-name-input{flex:1;min-width:0;border:none;background:transparent;font-weight:600;font-size:.9rem;color:var(--text-main);outline:none;padding:2px 4px;border-radius:6px}.timer-name-input:focus{background:var(--bg);outline:1px solid var(--accent-soft);border-radius:6px;box-shadow:0 0 4px var(--accent-shadow);transition:box-shadow .15s ease,background .15s ease}.timer-duration-wrapper{display:flex;align-items:center;gap:4px;background:var(--sidebar-bg);border-radius:999px;padding:2px 8px;flex-shrink:0}.timer-duration-input{width:2.8rem;border:none;background:transparent;text-align:right;font-size:.8rem;color:var(--text-main);outline:none;padding:0;-moz-appearance:textfield}.timer-duration-input:focus{outline:none}.timer-duration-input::-webkit-outer-spin-button,.timer-duration-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.timer-duration-label{font-size:.75rem;opacity:.8}.add-timer-button{margin-top:8px;border:none;border-radius:999px;padding:6px 10px;background:var(--button-bg);cursor:pointer;font-size:.8rem;font-weight:500;color:var(--text-main)}.add-timer-button:hover:not(:disabled){background:var(--button-bg-hover)}.add-timer-button:disabled{opacity:.5;cursor:default}.delete-timer-button{border:none;background:transparent;color:var(--text-main);font-size:1rem;line-height:1;padding:0 4px;cursor:pointer;flex-shrink:0;opacity:.7;transition:opacity .15s ease}.delete-timer-button:hover{opacity:1}.delete-timer-button:focus{outline:none}.timer-card.timer-card--dragging{opacity:.6}.timer-card.timer-card--over{outline:2px dashed var(--accent);outline-offset:2px}.next-timer-prompt{margin-top:12px;padding:8px 10px;border-radius:10px;background:var(--prompt-bg);font-size:.85rem;display:flex;align-items:center;justify-content:space-between;gap:8px}.next-timer-prompt-buttons{display:flex;gap:6px;color:var(--text-main)}.next-timer-prompt-buttons button{border:none;border-radius:999px;padding:4px 10px;font-size:.8rem;cursor:pointer;background:var(--button-bg);color:var(--text-main)}.next-timer-prompt-buttons button:hover{background:var(--button-bg-hover)}@keyframes emoji-bounce{0%{transform:translateY(0) scale(1)}35%{transform:translateY(-6px) scale(1.15)}70%{transform:translateY(-2px) scale(1.05)}to{transform:translateY(0) scale(1)}}.timer-emoji-inner.bounce-start,.timer-emoji-inner.bounce-end{animation:emoji-bounce .5s ease-out;animation-fill-mode:none}