:root{--color-bg:#ecfeff;--color-surface:#fff;--color-border:#cffafe;--color-border-hover:#a5f3fc;--color-text:#164e63;--color-text-muted:#0e7490;--color-primary:#0891b2;--color-primary-hover:#06b6d4;--color-primary-bg:#cffafe;--color-cta:#22c55e;--color-cta-hover:#16a34a;--color-accent-a:#0284c7;--color-accent-b:#ea580c;--color-vs:#0e7490;--color-vs-bg:#cffafe;--font-family:"Inter", system-ui, -apple-system, sans-serif;--font-size-xs:.75rem;--font-size-sm:.875rem;--font-size-base:1rem;--font-size-lg:1.125rem;--font-size-xl:1.5rem;--font-size-2xl:2rem;--space-xs:.25rem;--space-sm:.5rem;--space-md:1rem;--space-lg:1.5rem;--space-xl:2rem;--space-2xl:3rem;--radius-sm:8px;--radius-md:12px;--radius-lg:16px;--radius-full:9999px;--shadow-sm:0 1px 2px 0 #0891b20d;--shadow-md:0 4px 6px -1px #0891b21a, 0 2px 4px -2px #0891b21a;--shadow-focus:0 0 0 3px #0891b24d;--transition-fast:.15s ease;--transition-base:.25s ease}[data-theme=dark]{--color-bg:#0b1120;--color-surface:#1e293b;--color-border:#334155;--color-border-hover:#475569;--color-text:#f8fafc;--color-text-muted:#94a3b8;--color-primary:#22d3ee;--color-primary-hover:#67e8f9;--color-primary-bg:#22d3ee1a;--color-cta:#4ade80;--color-cta-hover:#86efac;--color-accent-a:#38bdf8;--color-accent-b:#fb923c;--color-vs:#94a3b8;--color-vs-bg:#0f172a;--shadow-sm:0 1px 2px 0 #0000004d;--shadow-md:0 4px 6px -1px #0006;--shadow-focus:0 0 0 3px #22d3ee4d}*,:before,:after{box-sizing:border-box;margin:0;padding:0}body{font-family:var(--font-family);font-size:var(--font-size-base);color:var(--color-text);background:var(--color-bg);-webkit-font-smoothing:antialiased;min-height:100vh;transition:background-color var(--transition-base), color var(--transition-base);line-height:1.6}:focus-visible{box-shadow:var(--shadow-focus);border-radius:inherit;outline:none}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}#app{max-width:600px;padding:var(--space-xl) var(--space-md);flex-direction:column;min-height:100vh;margin:0 auto;display:flex}.header{margin-bottom:var(--space-2xl)}.header__content{justify-content:space-between;align-items:flex-start;display:flex}.header__brand{align-items:flex-start;gap:var(--space-md);display:flex}.header__icon{width:40px;height:40px;color:var(--color-primary);flex-shrink:0}.header__title{font-size:var(--font-size-2xl);color:var(--color-text);letter-spacing:-.02em;font-weight:700;line-height:1.2}.header__subtitle{font-size:var(--font-size-base);color:var(--color-text-muted);margin-top:var(--space-xs);font-weight:500}.theme-toggle{background:var(--color-surface);border:1px solid var(--color-border);color:var(--color-text-muted);border-radius:var(--radius-full);cursor:pointer;width:44px;height:44px;transition:all var(--transition-fast);box-shadow:var(--shadow-sm);justify-content:center;align-items:center;display:flex}.theme-toggle:hover{background-color:var(--color-primary-bg);color:var(--color-primary);border-color:var(--color-primary)}.controls{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--space-xl);gap:var(--space-xl);box-shadow:var(--shadow-md);transition:background-color var(--transition-base), border-color var(--transition-base);flex-direction:column;display:flex}.control-group{gap:var(--space-sm);flex-direction:column;display:flex}.control-label{font-size:var(--font-size-sm);color:var(--color-text-muted);text-transform:uppercase;letter-spacing:.05em;font-weight:600}.number-input{align-items:center;display:flex}.number-btn{border:1px solid var(--color-border);background:var(--color-bg);width:48px;height:48px;color:var(--color-text-muted);font-size:var(--font-size-lg);cursor:pointer;transition:all var(--transition-fast);-webkit-user-select:none;user-select:none;justify-content:center;align-items:center;display:flex}#btn-decrease{border-radius:var(--radius-md) 0 0 var(--radius-md);border-right:none}#btn-increase{border-radius:0 var(--radius-md) var(--radius-md) 0;border-left:none}.number-btn:hover{background:var(--color-primary-bg);color:var(--color-primary)}.number-value{border:1px solid var(--color-border);background:var(--color-surface);width:80px;height:48px;color:var(--color-text);font-size:var(--font-size-lg);text-align:center;appearance:textfield;outline:none;font-weight:600}.number-value::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.number-value::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.number-value:focus{border-color:var(--color-primary);box-shadow:inset 0 0 0 1px var(--color-primary);z-index:1}.toggle-group{background:var(--color-bg);border-radius:var(--radius-md);border:1px solid var(--color-border);padding:4px;display:flex}.toggle-btn{border-radius:calc(var(--radius-md) - 4px);color:var(--color-text-muted);font-family:var(--font-family);font-size:var(--font-size-sm);cursor:pointer;transition:all var(--transition-fast);background:0 0;border:none;flex:1;padding:12px 16px;font-weight:600}.toggle-btn:hover:not(.active){color:var(--color-text)}.toggle-btn.active{background:var(--color-surface);color:var(--color-primary);box-shadow:var(--shadow-sm)}.results{margin-top:var(--space-xl);flex:1}.results-header{margin-bottom:var(--space-md);padding-bottom:var(--space-sm);border-bottom:2px dashed var(--color-border);justify-content:space-between;align-items:center;display:flex}.results-header__title{font-size:var(--font-size-lg);color:var(--color-text);font-weight:700}.results-header__count{font-size:var(--font-size-sm);color:var(--color-primary);background:var(--color-primary-bg);border-radius:var(--radius-full);padding:4px 12px;font-weight:600}.match-list{gap:var(--space-sm);flex-direction:column;list-style:none;display:flex}.match-card{align-items:center;gap:var(--space-md);padding:var(--space-md) var(--space-lg);background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);transition:all var(--transition-fast);cursor:pointer;display:flex}.match-card:hover:not(.is-finished){border-color:var(--color-primary);box-shadow:var(--shadow-sm);transform:translateY(-1px)}.match-card.is-finished{opacity:.5;background-color:var(--color-bg);border-color:#0000}.match-card.is-finished .match-card__team,.match-card.is-finished .match-card__number{text-decoration:line-through}.match-card__number{border-radius:var(--radius-md);background:var(--color-bg);width:36px;height:36px;color:var(--color-text-muted);font-size:var(--font-size-sm);border:1px solid var(--color-border);flex-shrink:0;justify-content:center;align-items:center;font-weight:600;display:flex}.match-card__content{justify-content:space-between;align-items:center;gap:var(--space-md);flex:1;display:flex}.match-card__team{font-size:var(--font-size-lg);flex:1;min-width:60px;font-weight:600}.match-card__team--a{color:var(--color-text);text-align:right}.match-card__team--b{color:var(--color-text)}.match-card__vs{font-size:var(--font-size-xs);color:var(--color-vs);background:var(--color-vs-bg);border-radius:var(--radius-full);text-transform:uppercase;letter-spacing:.05em;border:1px solid var(--color-border);flex-shrink:0;padding:4px 10px;font-weight:700}.empty-state{text-align:center;padding:var(--space-2xl) var(--space-xl);color:var(--color-text-muted);background:var(--color-surface);border:2px dashed var(--color-border);border-radius:var(--radius-lg);align-items:center;gap:var(--space-md);flex-direction:column;display:flex}.empty-state__icon{width:48px;height:48px;color:var(--color-border-hover)}.empty-state__text{font-size:var(--font-size-base);font-weight:500}.footer{text-align:center;padding:var(--space-2xl) 0 var(--space-md);margin-top:auto}.footer p{font-size:var(--font-size-sm);color:var(--color-text-muted);font-weight:500}@media (width<=480px){#app{padding:var(--space-lg) var(--space-md)}.header{margin-bottom:var(--space-xl)}.header__title{font-size:1.5rem}.controls{padding:var(--space-md) var(--space-md)}.match-card{padding:var(--space-sm) var(--space-md);gap:var(--space-sm)}.match-card__number{width:32px;height:32px;font-size:var(--font-size-xs)}.match-card__team{font-size:var(--font-size-base);min-width:40px}}