.metro-container{display:flex;flex-direction:column;align-items:center;width:100%;max-width:500px}.state-tabs{display:flex;gap:10px;margin-bottom:15px;flex-wrap:wrap;justify-content:center}.state-tab-button{font-family:inherit;font-size:.85rem;font-weight:500;padding:6px 15px;border-radius:18px;border:1px solid var(--color-border);background-color:var(--color-surface);color:var(--color-text-secondary);cursor:pointer;transition:background-color .2s ease,color .2s ease,border-color .2s ease,opacity .3s ease}.state-tab-button:hover:not(.active):not(:disabled){background-color:var(--color-button-secondary-bg);color:var(--color-text-primary);border-color:var(--color-button-secondary-bg)}[data-theme=dark] .state-tab-button:hover:not(.active):not(:disabled){border-color:var(--color-button-secondary-bg)}.state-tab-button.active{color:var(--color-accent-contrast);border-color:transparent;pointer-events:none}.state-tab-button.active.work{background-color:var(--color-accent)}.state-tab-button.active.short-break{background-color:var(--color-accent)}.state-tab-button.active.long-break{background-color:var(--color-accent)}.current-state-display,.status-indicators{margin-bottom:10px;color:var(--color-text-secondary);text-align:center}.current-state-display{font-size:1.1rem;font-weight:500;text-transform:uppercase;letter-spacing:.5px;min-height:1.5em;transition:color .3s ease}.status-indicators{display:flex;justify-content:center;gap:15px;font-size:.85rem;flex-wrap:wrap;min-height:1.2em}.status-indicators span{white-space:nowrap}.metro-controls{display:flex;justify-content:center;gap:15px;margin-bottom:25px;flex-wrap:wrap}.control-button{font-family:inherit;font-size:.9rem;font-weight:500;padding:10px 20px;border-radius:20px;border:0;cursor:pointer;transition:background-color .2s ease,opacity .2s ease,transform .1s ease;display:inline-flex;align-items:center;min-width:100px;justify-content:center;user-select:none}.control-button .material-symbols-outlined{font-size:18px;margin-right:6px}.control-button.start{background-color:var(--color-accent);color:var(--color-accent-contrast)}.control-button.start:hover:not(:disabled){background-color:color-mix(in srgb,var(--color-accent),black 10%)}.control-button:active:not(:disabled){transform:scale(.95)}.control-button:disabled{opacity:.5;cursor:not-allowed}:fullscreen .main-content>:not(.metro-container):not(.modal-overlay),:fullscreen .seo-content{display:none!important}:fullscreen .metro-container{background-color:transparent!important;padding:10px!important;max-width:95%!important;width:100%!important;justify-content:center;height:100%}:fullscreen .state-tabs{display:none!important}:fullscreen .current-state-display{font-size:clamp(1.2rem,4vw,1.8rem)!important;color:#8e8e93!important;margin-bottom:2vh!important}:fullscreen .status-indicators{font-size:clamp(.8rem,2.5vw,1rem);color:#8e8e93!important;margin-bottom:2vh}:fullscreen .metro-controls{gap:20px!important}:fullscreen .metro-controls button{padding:12px 25px!important;font-size:1rem!important;min-width:120px!important;border-radius:25px!important}