:root{--color-bg-focus: #ba4949;--color-text-focus: #ffeceb;--color-bg-short: #38858a;--color-text-short: #e0fbfd;--color-bg-long: #397097;--color-text-long: #e3f3ff;--color-text: var(--color-text-focus);--color-surface-rgba: rgba(0, 0, 0, .15);--font-main: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif}*{box-sizing:border-box;margin:0;padding:0}body{font-family:var(--font-main);color:var(--color-text);transition:background-color .5s ease,color .5s ease;-webkit-font-smoothing:antialiased}button{border:none;background:none;cursor:pointer;font-family:inherit;color:inherit}input{font-family:inherit}.app-container{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;transition:background-color .5s ease}.mode-focus{background-color:var(--color-bg-focus);--color-text: var(--color-text-focus);--color-current-bg: var(--color-bg-focus)}.mode-short_break{background-color:var(--color-bg-short);--color-text: var(--color-text-short);--color-current-bg: var(--color-bg-short)}.mode-long_break{background-color:var(--color-bg-long);--color-text: var(--color-text-long);--color-current-bg: var(--color-bg-long)}.timer-card{background-color:var(--color-surface-rgba);padding:3rem;border-radius:24px;display:flex;flex-direction:column;align-items:center;gap:2rem;box-shadow:0 10px 30px #0000001a;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);width:90%;max-width:480px}.timer-digits{font-size:8rem;font-weight:700;line-height:1;font-variant-numeric:tabular-nums;letter-spacing:-2px}@media(max-width:600px){.timer-digits{font-size:6rem}}.controls{display:flex;gap:1.5rem;align-items:center}.btn-main{background-color:#fff3;color:#fff;font-size:1.5rem;padding:1rem 3rem;border-radius:50px;font-weight:600;border:2px solid rgba(255,255,255,.3);transition:all .2s ease;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}.btn-main:hover{background-color:#ffffff59;transform:translateY(-1px)}.btn-main:active{transform:translateY(1px);background-color:#fff6}.mode-finished{background-color:#2c3e50!important;animation:pulse-bg 2s infinite}@keyframes pulse-bg{0%{opacity:1}50%{opacity:.8}to{opacity:1}}.btn-icon{background:#fff3;padding:1rem;border-radius:50%;display:flex;align-items:center;justify-content:center;transition:all .2s ease;border:2px solid rgba(255,255,255,.3);-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);color:#fff}.btn-icon:hover{background:#ffffff59;transform:translateY(-1px)}.btn-icon:active{transform:translateY(1px);background:#fff6}.mode-tabs{display:flex;gap:1rem;margin-bottom:2rem;background:#0000001a;padding:.5rem;border-radius:50px}.tab-btn{padding:.5rem 1.25rem;border-radius:20px;font-size:.9rem;font-weight:500;opacity:.7;transition:all .3s}.tab-btn.active{background:#00000026;font-weight:700;opacity:1}.settings-modal-overlay{position:fixed;inset:0;background:#00000080;display:flex;align-items:center;justify-content:center;z-index:100}.settings-modal{background:var(--color-text);color:#333;padding:2rem;border-radius:16px;width:90%;max-width:400px}.setting-row{margin-bottom:1.5rem}.setting-row label{display:block;font-size:.85rem;color:#888;margin-bottom:.5rem;text-transform:uppercase;letter-spacing:.5px}.setting-row input{width:100%;padding:.75rem;border:1px solid #ddd;border-radius:8px;font-size:1rem}.settings-actions{display:flex;justify-content:flex-end;gap:1rem;margin-top:2rem}.btn-save{background-color:var(--color-current-bg);color:#fff;padding:.75rem 1.5rem;border-radius:8px;font-weight:600;transition:background-color .5s ease}.scrollbar-hide{-ms-overflow-style:none;scrollbar-width:none}.scrollbar-hide::-webkit-scrollbar{display:none}.tooltip-container{position:relative;display:inline-flex}.tooltip-label{position:absolute;top:100%;left:50%;transform:translate(-50%);margin-top:.5rem;background-color:var(--color-current-bg);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.2);color:#fff;padding:.6rem 1rem;border-radius:12px;font-size:.85rem;font-weight:500;white-space:nowrap;z-index:1000;box-shadow:0 8px 16px #0003;animation:tooltipFadeIn .25s ease-out;pointer-events:none}@keyframes tooltipFadeIn{0%{opacity:0;transform:translate(-50%) translateY(-5px)}to{opacity:1;transform:translate(-50%) translateY(0)}}