:root{--text:#161616;--text-muted:#696969;--bg:#fff;--bg-overlay-opacity:.82;--surface:#ffffffb3;--border:#d9d9d9;--accent:#b45309;--accent-hover:#92400e;--danger:#b91c1c;--danger-hover:#7f1313;--success:#15803d;--gold:#ca8a04;--gold-text:#1a1a1a;--shadow:0 10px 30px #0000001a;color:var(--text);background:var(--bg);font-family:system-ui,-apple-system,Segoe UI,sans-serif}:root[data-theme=dark]{--text:#f2f2f2;--text-muted:#a3a3a3;--bg:#0a0a0a;--bg-overlay-opacity:.74;--surface:#18181899;--border:#ffffff1f;--accent:#d97706;--accent-hover:#f59e0b;--danger:#ef4444;--danger-hover:#fca5a5;--success:#4ade80;--gold:#eab308;--gold-text:#1a1a1a;--shadow:0 10px 30px #0000008c}*{box-sizing:border-box}*,:before,:after{transition:background-color .25s,border-color .25s,color .25s,box-shadow .25s}body{min-height:100vh;color:var(--text);background:var(--bg);margin:0;position:relative}body:before{content:"";filter:blur(22px)saturate(1.1);z-index:0;background-image:url(/assets/Commotion_Image-CO3n3MVD.jpg);background-position:50%;background-size:cover;position:fixed;inset:-40px;transform:scale(1.05)}body:after{content:"";background:var(--bg);opacity:var(--bg-overlay-opacity);z-index:0;transition:background .2s,opacity .2s;position:fixed;inset:0}#app{z-index:1;max-width:100%;margin:0 auto;padding:1.5rem;position:relative}.app-header{background:var(--surface);border:1px solid var(--border);-webkit-backdrop-filter:blur(14px);box-shadow:var(--shadow);border-radius:12px;justify-content:space-between;align-items:center;gap:1rem;margin-bottom:1.25rem;padding:.9rem 1.25rem;display:flex}.app-brand{align-items:center;gap:.7rem;display:flex}.app-crest{border:1px solid var(--border);object-fit:cover;border-radius:50%;flex-shrink:0;width:2.25rem;height:2.25rem;display:block}.app-header h1{letter-spacing:.01em;margin:0;font-size:1.5rem;font-weight:700}.theme-toggle-button{width:2.25rem;height:2.25rem;color:var(--text);background:var(--surface);border:1px solid var(--border);cursor:pointer;border-radius:8px;justify-content:center;align-items:center;padding:0;transition:border-color .15s,color .15s,transform .1s;display:inline-flex}.theme-toggle-button:active,.view-mode-toggle-button:active,.upload-clipboard-button:active,.min-players-control button:active,.selection-action-button:active{transform:scale(.96)}.theme-toggle-button:hover{border-color:var(--accent);color:var(--accent)}.view-mode-toggle-button{font:inherit;color:var(--text);background:var(--surface);border:1px solid var(--border);cursor:pointer;border-radius:8px;padding:.4rem .8rem;transition:border-color .15s,color .15s,background-color .15s,transform .1s}.view-mode-toggle-button:hover{border-color:var(--accent);color:var(--accent)}.view-mode-toggle-button.active{background:var(--accent);border-color:var(--accent);color:#fff}.upload-clipboard-button{font:inherit;color:var(--text);background:var(--surface);border:1px solid var(--border);cursor:pointer;border-radius:8px;align-items:center;gap:.4rem;padding:.4rem .8rem;transition:border-color .15s,color .15s,transform .1s;display:inline-flex}.upload-clipboard-button:hover{border-color:var(--accent);color:var(--accent)}.logout-button{font:inherit;color:var(--text);background:var(--surface);border:1px solid var(--border);cursor:pointer;border-radius:8px;padding:.4rem .8rem;transition:border-color .15s,color .15s,transform .1s}.logout-button:hover{border-color:var(--accent);color:var(--accent)}.header-controls{flex-wrap:wrap;align-items:center;gap:1rem;display:flex}@media (width<=860px){.app-header{flex-direction:column;align-items:stretch}.header-controls{justify-content:flex-start}}@media (width<=540px){#app{padding:1rem}.app-header{padding:.75rem 1rem}.header-controls{gap:.6rem}.upload-clipboard-button span{display:none}.min-players-control input{width:3.5rem}}.min-players-control{align-items:center;gap:.5rem;display:flex}.min-players-control label{color:var(--text-muted);font-size:.8rem}.min-players-control input{font:inherit;color:var(--text);background:var(--bg);border:1px solid var(--border);border-radius:6px;width:5rem;padding:.4rem .6rem}.min-players-control button{font:inherit;color:var(--text);background:var(--surface);border:1px solid var(--border);cursor:pointer;border-radius:6px;padding:.4rem .8rem}.min-players-control button:hover{border-color:var(--accent);color:var(--accent)}.filter-bar{flex-wrap:wrap;gap:1rem;margin-bottom:1rem;display:flex}.filter-field{flex-direction:column;gap:.25rem;display:flex}.filter-field label{color:var(--text-muted);font-size:.8rem}.filter-field input{font:inherit;color:var(--text);background:var(--bg);border:1px solid var(--border);border-radius:6px;padding:.4rem .6rem}.view-container{background:var(--surface);border:1px solid var(--border);-webkit-backdrop-filter:blur(14px);box-shadow:var(--shadow);border-radius:12px;padding:1rem;overflow-x:auto}.member-table{border-collapse:collapse;font-variant-numeric:tabular-nums;width:100%;font-size:.9rem}.member-table th,.member-table td{text-align:left;border-bottom:1px solid var(--border);white-space:nowrap;padding:.5rem .75rem}.member-table thead th{background:color-mix(in srgb, var(--text) 4%, transparent);border-bottom:2px solid var(--border)}.member-table tbody tr:nth-child(2n){background:color-mix(in srgb, var(--text) 3%, transparent)}.sort-button{font:inherit;color:var(--text);cursor:pointer;background:0 0;border:none;padding:0;font-weight:600}.sort-button-icon{align-items:center;gap:.25rem;display:inline-flex}.sort-arrow{margin-left:.25rem;font-size:.7rem}.sort-button:hover{color:var(--accent)}.status-icon{color:var(--text-muted);vertical-align:middle;margin-right:.35rem;display:inline-flex}.selection-action-bar{background:color-mix(in srgb, var(--accent) 8%, var(--surface));border:1px solid var(--border);border-radius:10px;flex-wrap:wrap;align-items:center;gap:.75rem;margin-bottom:1rem;padding:.6rem .75rem;display:flex}.selection-count{font-weight:600}.selection-action-button{font:inherit;color:var(--text);background:var(--surface);border:1px solid var(--border);cursor:pointer;border-radius:6px;padding:.35rem .7rem}.selection-action-button:hover{border-color:var(--accent);color:var(--accent)}.selection-status{color:var(--text-muted);margin:0 0 .75rem;font-size:.85rem}.member-row{cursor:pointer}.member-row:hover{background:color-mix(in srgb, var(--accent) 6%, transparent)}.member-row:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}.kick-candidate-row{background:color-mix(in srgb, var(--danger) 10%, transparent)}.kick-candidate-row:hover{background:color-mix(in srgb, var(--danger) 18%, transparent)}.member-table th:nth-child(2),.member-table td:nth-child(2){z-index:1;background:var(--surface);border-right:1px solid var(--border);position:sticky;left:0}.member-table tbody tr:nth-child(2n) td:nth-child(2){background:color-mix(in srgb, var(--text) 3%, var(--surface))}.member-row:hover td:nth-child(2){background:color-mix(in srgb, var(--accent) 6%, var(--surface))}.kick-candidate-row td:nth-child(2){background:color-mix(in srgb, var(--danger) 10%, var(--surface))}.kick-candidate-row:hover td:nth-child(2){background:color-mix(in srgb, var(--danger) 18%, var(--surface))}.kick-badge{background:var(--danger);color:#fff;white-space:nowrap;border-radius:999px;align-items:center;margin-left:.5rem;padding:.1rem .5rem;font-size:.7rem;font-weight:600;display:inline-flex}.rank-badge{white-space:nowrap;border-radius:999px;align-items:center;margin-left:.5rem;padding:.1rem .5rem;font-size:.7rem;font-weight:600;display:inline-flex}.rank-badge-gold{background:var(--gold);color:var(--gold-text)}.rank-badge-green{background:var(--success);color:#fff}.back-button{font:inherit;color:var(--accent);cursor:pointer;background:0 0;border:none;margin-bottom:1rem;padding:0}.back-button:hover{color:var(--accent-hover);text-decoration:underline}.member-detail h2{margin:0 0 1rem}.detail-badges{flex-wrap:wrap;gap:.4rem;margin:-.5rem 0 1rem;display:flex}.detail-badges .rank-badge{margin-left:0}.external-links{gap:1rem;margin-bottom:1rem;display:flex}.external-link{color:var(--accent);align-items:center;gap:.35rem;text-decoration:none;display:inline-flex}.external-link:hover{color:var(--accent-hover);text-decoration:underline}.external-link-icon{display:inline-flex}.member-detail h3{color:var(--text-muted);text-transform:uppercase;letter-spacing:.04em;margin:1.5rem 0 .5rem;font-size:1rem}.field-list{grid-template-columns:max-content 1fr;gap:.4rem 1rem;margin:0;display:grid}.field-list dt{color:var(--text-muted)}.field-list dd{margin:0;font-weight:500}.no-stats-message{color:var(--text-muted);font-style:italic}.battle-chart-container{height:260px;margin:1rem 0;position:relative}.progress-message{color:var(--text-muted);margin:0 0 .5rem}.progress-track{background:var(--border);border-radius:999px;width:100%;height:.5rem;overflow:hidden}.progress-fill{background:var(--accent);width:0%;height:100%;transition:width .15s}.skeleton-loader{flex-direction:column;gap:.6rem;padding:.25rem 0;display:flex}.skeleton-row{background:linear-gradient(90deg, color-mix(in srgb, var(--accent) 10%, var(--surface)) 25%, color-mix(in srgb, var(--accent) 24%, var(--surface)) 37%, color-mix(in srgb, var(--accent) 10%, var(--surface)) 63%);background-size:400% 100%;border-radius:8px;height:2rem;animation:1.6s ease-in-out infinite skeleton-shimmer}.skeleton-heading{width:40%;height:1.5rem}@keyframes skeleton-shimmer{0%{background-position:100% 0}to{background-position:0 0}}.toast-container{z-index:1000;flex-direction:column;gap:.6rem;max-width:22rem;display:flex;position:fixed;top:1rem;right:1rem}.toast{background:var(--surface);border:1px solid var(--border);border-left:3px solid var(--danger);-webkit-backdrop-filter:blur(14px);box-shadow:var(--shadow);opacity:0;border-radius:10px;align-items:flex-start;gap:.6rem;padding:.7rem .8rem;transition:opacity .2s,transform .2s;display:flex;transform:translateY(-8px)scale(.98)}.toast.toast-visible{opacity:1;transform:translateY(0)scale(1)}.toast-success{border-left-color:var(--success)}.toast-icon{color:var(--danger);flex-shrink:0;margin-top:.1rem;display:inline-flex}.toast-success .toast-icon{color:var(--success)}.toast-message{flex:1;font-size:.85rem;line-height:1.4}.toast-close{color:var(--text-muted);cursor:pointer;background:0 0;border:none;flex-shrink:0;align-items:center;padding:0;display:inline-flex}.toast-close:hover{color:var(--text)}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:.001ms!important;animation-duration:.001ms!important;animation-iteration-count:1!important}}