@import"https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap";:root{font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}*{box-sizing:border-box}body{margin:0;min-height:100vh}:root{font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;color:#0f172a;background-color:#f3f4f6;color-scheme:light}html{-webkit-text-size-adjust:100%}body{margin:0;background:radial-gradient(circle at top,#dbeafe,#f9fafb 55%);min-height:100vh;line-height:1.5;-webkit-font-smoothing:antialiased}.app{padding:2.5rem clamp(1.25rem,5vw,4rem);max-width:1200px;margin:0 auto 4rem}@supports (padding: max(0px)){.app{padding-left:max(1.25rem,env(safe-area-inset-left));padding-right:max(1.25rem,env(safe-area-inset-right));padding-top:max(2rem,calc(1.25rem + env(safe-area-inset-top)));padding-bottom:max(3rem,calc(1.5rem + env(safe-area-inset-bottom)))}}header{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;margin-bottom:2rem;flex-wrap:wrap}.header__actions{display:flex;align-items:center}.header__cta{display:inline-flex;align-items:center;justify-content:center;padding:.65rem 1.25rem;border-radius:999px;background:#111827;color:#f9fafb;font-weight:600;text-decoration:none;border:1px solid rgba(15,23,42,.1);box-shadow:0 10px 20px #0f172a1a;transition:transform .15s ease,box-shadow .15s ease}.header__cta:hover{transform:translateY(-1px);box-shadow:0 14px 24px #0f172a26}.header__cta:focus-visible{outline:2px solid #f97316;outline-offset:3px}@media(max-width:768px){header{flex-direction:column;align-items:stretch}.header__actions{width:100%;justify-content:center}.header__cta{width:100%}.layout{grid-template-columns:1fr}.sidebar{position:static}}h1{margin:0;font-size:clamp(1.8rem,4vw,2.6rem)}.eyebrow{text-transform:uppercase;letter-spacing:.2em;font-size:.8rem;color:#64748b;margin-bottom:.4rem}.muted{color:#6b7280}.panel{background:#fffffffa;border-radius:1.25rem;padding:1.5rem;box-shadow:0 12px 24px #0f172a0f;border:1px solid rgba(148,163,184,.15);display:flex;flex-direction:column;gap:1rem;will-change:transform}.panel__header{display:flex;flex-direction:column;gap:.2rem}.layout{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:1.5rem;align-items:flex-start}.main-column{flex:2;display:flex;flex-direction:column;gap:1.5rem}.sidebar{flex:1;position:sticky;top:2rem}.table-wrapper{overflow-x:auto;-webkit-overflow-scrolling:touch}.table-wrapper table{width:100%;border-collapse:collapse}.singles-panel .table-wrapper{width:100%}.singles-panel table{table-layout:fixed}.ranking-header{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem;flex-wrap:wrap}.ranking-info-button{white-space:nowrap;border-radius:999px;padding:.4rem .9rem;font-size:.9rem;border:1px solid #cbd5f5}.ranking-info-button:hover{border-color:#6366f1;color:#312e81}.singles-panel table{table-layout:auto;width:100%}.singles-panel th:first-child,.singles-panel td:first-child{width:72px}.singles-panel th:nth-child(2),.singles-panel td:nth-child(2){width:40%}th,td{text-align:left;border-bottom:1px solid #e5e7eb}.table-header__short{display:none}.table-header__short--blank{visibility:hidden}.table-value{display:inline-flex;gap:.15rem;align-items:baseline}.table-value__suffix{display:inline}th{font-size:.85rem;text-transform:uppercase;letter-spacing:.08em;color:#94a3b8}th .singles-panel th,th .singles-panel td{padding:.5rem .25rem;font-size:.9rem}.strong{font-weight:600}.positive{color:#16a34a;font-weight:600}.negative{color:#dc2626;font-weight:600}.form-control{display:flex;flex-direction:column;gap:.35rem}.searchable-select{position:relative}.searchable-select input{width:100%;padding:.65rem .75rem;border-radius:.75rem;border:1px solid #cbd5f5;font-size:1rem;background:#f8fafc}.searchable-select input:focus{outline:2px solid #6366f1;border-color:#6366f1;background:#fff}.searchable-select__list{position:absolute;top:calc(100% + 4px);left:0;right:0;background:#fff;border-radius:.75rem;border:1px solid #e2e8f0;box-shadow:0 12px 24px #0f172a1f;max-height:280px;overflow-y:auto;margin:0;padding:.4rem;list-style:none;z-index:10}.searchable-select__option{width:100%;background:transparent;border:none;text-align:left;padding:.5rem .75rem;border-radius:.6rem;font-size:.95rem;font-weight:500;color:#0f172a;cursor:pointer}.searchable-select__option:hover,.searchable-select__option.active{background:#eef2ff;color:#312e81}.form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:1rem}input,select{border-radius:.75rem;border:1px solid #e2e8f0;padding:.8rem 1rem;font-size:1rem;font-family:inherit;background:#f8fafc;min-height:48px}input:focus,select:focus,button:focus{outline:2px solid #3b82f6;outline-offset:1px}button{border:none;border-radius:999px;padding:.8rem 1.4rem;font-weight:600;cursor:pointer;background:#e2e8f0;color:#0f172a;min-height:48px}button.primary{background:linear-gradient(120deg,#2563eb,#9333ea);color:#fff;align-self:flex-start}button.ghost{background:transparent;border:1px solid #e2e8f0}.toggle-group{display:inline-flex;background:#f1f5f9;border-radius:999px;padding:.25rem;gap:.25rem}.toggle{background:transparent;border-radius:999px}.toggle.active{background:#fff;box-shadow:0 5px 15px #0f172a26}.feedback{padding:.75rem 1rem;border-radius:.9rem;background:#e0f2fe;color:#0c4a6e}.feedback.error{background:#fee2e2;color:#991b1b}.feedback.success{background:#dcfce7;color:#166534}.lagkamp__headline{display:flex;justify-content:space-between;align-items:center;gap:1rem}.lagkamp__bar{position:relative;display:flex;width:100%;height:44px;border-radius:999px;overflow:hidden;border:1px solid #cbd5f5}.lagkamp__segment{display:flex;align-items:center;justify-content:center;font-weight:600;color:#fff;font-size:.95rem;text-shadow:0 1px 6px rgba(15,23,42,.35);transition:width .3s ease}.lagkamp__segment--a{background:linear-gradient(120deg,#1d4ed8,#3b82f6)}.lagkamp__segment--b{background:linear-gradient(120deg,#dc2626,#f97316)}.lagkamp__segment-label{padding:0 .75rem;white-space:nowrap}.lagkamp__labels{display:flex;justify-content:space-between;font-weight:600;text-transform:uppercase;letter-spacing:.08em;font-size:.8rem;margin-top:.35rem;color:#475569}.modal-backdrop{position:fixed;inset:0;background:#0f172a8c;display:flex;align-items:flex-start;justify-content:center;padding:2rem 1rem;z-index:999}.modal{width:min(640px,100%);background:#fff;border-radius:1.25rem;padding:1.5rem;box-shadow:0 25px 40px #0f172a40;border:1px solid rgba(148,163,184,.2)}.modal__header{display:flex;justify-content:space-between;align-items:center;gap:1rem;margin-bottom:1rem}.modal__content{color:#0f172a;display:flex;flex-direction:column;gap:.75rem}.modal__content ul{margin:0;padding-left:1.25rem;display:flex;flex-direction:column;gap:.4rem}.modal__content li{line-height:1.5}.match-feed__list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:1rem}.match-feed__list li{border:1px solid #e2e8f0;border-radius:1rem;padding:1rem;background:#f8fafc}.match-feed__header{display:flex;justify-content:space-between;align-items:center;margin-bottom:.4rem}.match-feed__note{margin:.4rem 0 0;color:#475569}.tag{display:inline-flex;align-items:center;border-radius:999px;padding:.2rem .8rem;font-size:.75rem;text-transform:uppercase;letter-spacing:.08em;background:#e2e8f0;color:#0f172a}.streak-banner{background:#f8fafc;border:1px dashed #cbd5f5;border-radius:1rem;padding:.9rem 1.1rem;display:flex;flex-direction:column;gap:.4rem;font-weight:600;color:#0f172a}.streak-banner p{margin:0}@media(max-width:960px){.layout{grid-template-columns:1fr}.sidebar{width:100%;position:static}}@media(max-width:760px){.layout{display:flex;flex-direction:column;gap:1.5rem}.main-column{order:1}.sidebar{order:2;width:100%;position:static}}@media(max-width:640px){header{flex-direction:column;gap:1rem}.table-value__suffix,.table-header__full{display:none}.table-header__short{display:inline}.app{padding:1.5rem 1rem 2.5rem}.panel,.match-feed,.main-column>*{width:100%}.panel{padding:1.2rem;border-radius:1rem;gap:.85rem}th,td{padding:.6rem .35rem}.lagkamp__headline{flex-direction:column;align-items:flex-start}.lagkamp__labels{font-size:.78rem}.lagkamp__bar{height:56px}.toggle-group{flex-wrap:wrap;width:100%}.toggle{flex:1 1 45%;text-align:center}button.primary,button.ghost{width:100%}.match-feed__header{flex-direction:column;align-items:flex-start;gap:.25rem}}@media(max-width:480px){.app{padding:1.1rem .85rem 2.25rem}.panel{padding:1rem;border-radius:.9rem}.form-grid{grid-template-columns:1fr}table{font-size:.95rem}.singles-panel table{font-size:.9rem}header .ghost{order:2}header>div,.main-column,.sidebar{width:100%}.lagkamp__bar{height:60px}.streak-banner{font-size:.95rem}.lagkamp__labels{font-size:.72rem}}
