:root {
  --bg: #f4f7fb;
  --bg-soft: #eef3fb;
  --panel: #ffffff;
  --panel-2: #fbfdff;
  --text: #0f172a;
  --muted: #64748b;
  --muted-2: #94a3b8;
  --line: #e2e8f0;
  --line-2: #d7e1ee;
  --primary: #2563eb;
  --primary-2: #1d4ed8;
  --primary-soft: #eaf1ff;
  --good: #16a34a;
  --good-soft: #dcfce7;
  --warn: #d97706;
  --warn-soft: #fef3c7;
  --danger: #dc2626;
  --danger-soft: #fee2e2;
  --blue-soft: #dbeafe;
  --shadow: 0 12px 34px rgba(15, 23, 42, 0.08);
  --shadow-soft: 0 8px 22px rgba(15, 23, 42, 0.05);
  --radius: 22px;
  --radius-md: 18px;
  --radius-sm: 14px;
  --mono: "JetBrains Mono", monospace;
  --sans: "Inter", system-ui, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  min-height: 100vh;
  font-family: var(--sans);
  color: var(--text);
  background:
    radial-gradient(circle at 0% 0%, rgba(37,99,235,.08), transparent 28%),
    radial-gradient(circle at 100% 0%, rgba(14,165,233,.08), transparent 22%),
    linear-gradient(180deg, #f9fbff 0%, var(--bg) 100%);
}
a { color: inherit; text-decoration: none; }
button, input, select { font: inherit; }
.hidden { display: none !important; }
.site-shell { max-width: 1420px; margin: 0 auto; padding: 14px; }
.section { padding: 18px 0; }
.container { width: min(100%, 1320px); margin: 0 auto; }
.topbar {
  position: sticky; top: 10px; z-index: 60;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 14px 16px; border-radius: 24px;
  background: rgba(255,255,255,.88); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  border: 1px solid rgba(215,225,238,.9); box-shadow: var(--shadow);
}
.brand { display: flex; align-items: center; gap: 12px; min-width: 0; }
.brand-mark {
  width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center;
  color: #fff; font-weight: 800; background: linear-gradient(135deg, var(--primary), #0ea5e9);
  flex: 0 0 44px;
}
.brand-copy { display: block; min-width: 0; }
.brand-copy strong { display: block; font-size: 1rem; }
.brand-copy small { display: block; color: var(--muted); margin-top: 1px; }
.desktop-nav, .mobile-menu { display: flex; gap: 8px; }
.desktop-nav a, .mobile-menu a {
  padding: 10px 14px; border-radius: 999px; color: var(--muted); font-weight: 700; transition: .18s ease;
}
.desktop-nav a:hover, .desktop-nav a.active, .mobile-menu a:hover {
  background: var(--primary-soft); color: var(--primary-2);
}
.topbar-actions { display: flex; align-items: center; gap: 10px; }
.mobile-menu {
  margin-top: 10px; padding: 10px; border-radius: 18px; flex-direction: column;
  background: rgba(255,255,255,.92); border: 1px solid var(--line-2); box-shadow: var(--shadow-soft);
}
.mobile-only { display: none; }
.icon-btn, .btn, .tab, .round-tab, .event-tab, .filter-pill {
  border: 1px solid var(--line-2); background: #fff; color: var(--text); cursor: pointer; transition: .18s ease;
}
.icon-btn, .btn { border-radius: 14px; padding: 11px 14px; font-weight: 700; }
.icon-btn:hover, .btn:hover, .tab:hover, .round-tab:hover, .event-tab:hover, .filter-pill:hover {
  transform: translateY(-1px); box-shadow: var(--shadow-soft);
}
.btn-primary { background: var(--primary); border-color: var(--primary); color: #fff; }
.btn-primary:hover { background: var(--primary-2); }
.btn-secondary { background: #fff; }
.btn-soft { background: var(--primary-soft); border-color: #cfe0ff; color: var(--primary-2); }
.page { display: grid; gap: 18px; }
.panel {
  background: var(--panel); border: 1px solid var(--line-2); border-radius: var(--radius);
  box-shadow: var(--shadow-soft); padding: 18px; min-width: 0;
}
.panel.tight { padding: 14px; }
.loading-state {
  min-height: 300px; display: grid; place-items: center; text-align: center; gap: 14px; color: var(--muted);
}
.spinner {
  width: 46px; height: 46px; border-radius: 50%; border: 4px solid #dbeafe; border-top-color: var(--primary);
  animation: spin 1s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.hero-simple {
  display: grid; gap: 18px; align-items: start; grid-template-columns: 1.3fr .7fr;
}
.hero-copy h1 { margin: 0 0 10px; font-size: clamp(2rem, 4vw, 3.4rem); line-height: 1.02; }
.hero-copy p { margin: 0; color: var(--muted); font-size: 1.03rem; line-height: 1.65; max-width: 760px; }
.hub-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 18px; }
.hub-card {
  display: block; padding: 16px; border-radius: 18px; background: linear-gradient(180deg, #fff, #fbfdff);
  border: 1px solid var(--line-2); box-shadow: var(--shadow-soft);
}
.hub-card strong { display: block; margin-bottom: 6px; }
.hub-card span { color: var(--muted); font-size: .92rem; line-height: 1.45; display: block; }
.hero-side { display: grid; gap: 12px; }
.hero-stat {
  border: 1px solid var(--line-2); background: #fff; border-radius: 18px; padding: 16px;
}
.hero-stat .k { color: var(--muted); font-size: .82rem; }
.hero-stat .v { margin-top: 6px; font-weight: 800; font-size: 1.12rem; }
.page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.page-head h2, .page-head h3 { margin: 3px 0 0; }
.page-head p { margin: 6px 0 0; color: var(--muted); }
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px; color: var(--primary-2);
  text-transform: uppercase; letter-spacing: .08em; font-size: .76rem; font-weight: 800;
}
.toolbar { display: flex; align-items: center; gap: 10px; }
.toolbar-wrap { flex-wrap: wrap; }
.input, .select {
  border-radius: 14px; border: 1px solid var(--line-2); background: #fff; color: var(--text); padding: 12px 14px;
}
.input { min-width: 270px; }
.input:focus, .select:focus { outline: 2px solid rgba(37,99,235,.14); border-color: #bdd3fb; }
.filter-row, .tab-row { display: flex; gap: 8px; flex-wrap: wrap; }
.filter-pill, .tab {
  padding: 10px 14px; border-radius: 999px; font-weight: 800; color: var(--muted);
}
.filter-pill.active, .tab.active {
  background: var(--primary-soft); color: var(--primary-2); border-color: #cfe0ff;
}
.comp-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.comp-card {
  display: grid; gap: 12px; padding: 18px; background: #fff; border: 1px solid var(--line-2);
  border-radius: 20px; box-shadow: var(--shadow-soft);
}
.comp-card h3 { margin: 0; font-size: 1.06rem; line-height: 1.35; }
.comp-sub { color: var(--muted); font-size: .94rem; line-height: 1.5; }
.card-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 2px; }
.badge-row, .pill-row { display: flex; gap: 8px; flex-wrap: wrap; }
.badge, .pill {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 30px; padding: 6px 10px; border-radius: 999px; font-size: .76rem; font-weight: 800;
  border: 1px solid transparent; line-height: 1;
}
.badge.live { background: var(--danger-soft); color: #991b1b; border-color: #fecaca; }
.badge.upcoming { background: #e0f2fe; color: #075985; border-color: #bae6fd; }
.badge.past { background: #eef2ff; color: #4338ca; border-color: #dbeafe; }
.pill-blue { background: var(--blue-soft); color: #1d4ed8; border-color: #bfdbfe; }
.pill-green { background: var(--good-soft); color: #166534; border-color: #bbf7d0; }
.pill-yellow { background: var(--warn-soft); color: #92400e; border-color: #fde68a; }
.pill-red { background: var(--danger-soft); color: #991b1b; border-color: #fecaca; }
.pill-neutral { background: #f8fafc; color: #334155; border-color: var(--line); }
.kpi-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 12px; }
.kpi {
  padding: 16px; border-radius: 18px; background: linear-gradient(180deg, #fff, #fbfdff); border: 1px solid var(--line-2);
}
.kpi .num { font-size: 1.45rem; font-weight: 800; }
.kpi .sub { margin-top: 5px; color: var(--muted); font-size: .9rem; }
.competition-layout { display: grid; grid-template-columns: 330px minmax(0, 1fr); gap: 16px; align-items: start; }
.sticky-stack { position: sticky; top: 92px; display: grid; gap: 14px; }
.schedule-list, .round-list { display: grid; gap: 10px; }
.schedule-item, .round-chip {
  display: grid; gap: 4px; border: 1px solid var(--line); border-radius: 16px; background: #fff; padding: 12px 13px;
}
.round-group { display: grid; gap: 8px; }
.round-group-title { font-size: .86rem; color: var(--muted); font-weight: 800; }
.event-tab, .round-tab {
  display: inline-flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 999px; font-weight: 800; color: var(--muted);
}
.event-tab.active, .round-tab.active {
  background: var(--primary-soft); border-color: #cfe0ff; color: var(--primary-2);
}
.event-tab-row, .round-tab-row { display: flex; gap: 8px; flex-wrap: wrap; }
.results-head { display: grid; gap: 14px; }
.results-meta { display: flex; gap: 10px; flex-wrap: wrap; }
.table-wrap {
  overflow: auto; border-radius: 18px; border: 1px solid var(--line-2); background: #fff;
}
.table {
  width: 100%; min-width: 930px; border-collapse: collapse;
}
.table.compact { min-width: 680px; }
.table th, .table td {
  padding: 12px 12px; border-bottom: 1px solid #edf2f7; text-align: left; vertical-align: top;
}
.table th {
  position: sticky; top: 0; z-index: 1; background: #fbfdff; color: var(--muted); font-size: .82rem; white-space: nowrap;
}
.table tr:last-child td { border-bottom: 0; }
.rank-chip {
  min-width: 42px; min-height: 34px; padding: 6px 10px; border-radius: 999px; font-weight: 800;
  display: inline-flex; align-items: center; justify-content: center;
}
.rank-normal { background: #f8fafc; color: #334155; }
.rank-good { background: var(--good-soft); color: #166534; }
.rank-maybe { background: var(--warn-soft); color: #92400e; }
.person { display: flex; gap: 10px; align-items: flex-start; min-width: 210px; }
.avatar {
  width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; flex: 0 0 34px;
  color: #fff; font-weight: 800; background: linear-gradient(135deg, var(--primary), #0ea5e9);
}
.person-name { font-weight: 700; line-height: 1.35; }
.person-sub { color: var(--muted); font-size: .84rem; margin-top: 2px; line-height: 1.4; }
.solve-list { display: flex; flex-wrap: wrap; gap: 6px; }
.solve-chip {
  padding: 6px 8px; border: 1px solid var(--line); border-radius: 10px; background: #f8fafc;
  font-family: var(--mono); font-size: .8rem; white-space: nowrap;
}
.mono { font-family: var(--mono); }
.legend-row, .small-note { display: flex; gap: 12px; flex-wrap: wrap; color: var(--muted); font-size: .9rem; }
.dot { width: 10px; height: 10px; border-radius: 999px; display: inline-block; margin-right: 6px; }
.dot-good { background: var(--good); }
.dot-maybe { background: var(--warn); }
.stats-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.note-card {
  border: 1px solid #fde68a; background: #fffbeb; color: #854d0e; border-radius: 18px; padding: 14px 16px;
}
.empty, .error-box {
  padding: 26px; text-align: center; color: var(--muted);
}
.error-box {
  border-radius: 18px; border: 1px solid #fecaca; background: #fff5f5; color: #991b1b;
}
.footer-note { color: var(--muted); font-size: .9rem; line-height: 1.55; }
@media (max-width: 1160px) {
  .hero-simple, .competition-layout, .stats-grid-2, .comp-grid { grid-template-columns: 1fr; }
  .kpi-grid, .hub-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sticky-stack { position: static; }
}
@media (max-width: 760px) {
  .site-shell { padding: 10px; }
  .desktop-nav { display: none; }
  .mobile-only { display: inline-flex; }
  .brand-copy small { display: none; }
  .panel { padding: 14px; border-radius: 18px; }
  .input, .select { width: 100%; min-width: 0; }
  .toolbar { width: 100%; }
  .toolbar-wrap > * { flex: 1 1 100%; }
  .kpi-grid, .hub-grid { grid-template-columns: 1fr; }
  .hero-copy h1 { font-size: 2rem; }
  .table { min-width: 780px; }
}

.search-box{position:relative;min-width:270px;flex:1 1 280px}
.search-list{position:absolute;top:calc(100% + 8px);left:0;right:0;z-index:40;background:#fff;border:1px solid var(--line-2);border-radius:16px;box-shadow:var(--shadow);padding:8px;display:grid;gap:6px;max-height:320px;overflow:auto}
.search-item{width:100%;text-align:left;padding:11px 12px;border-radius:12px;border:1px solid transparent;background:#fff;cursor:pointer;display:grid;gap:4px}
.search-item:hover{background:var(--bg-soft);border-color:#cfe0ff}
.search-item strong{font-size:.94rem}
.search-item span{color:var(--muted);font-size:.82rem}


.comp-hero{display:grid;grid-template-columns:1.1fr .9fr;gap:18px;align-items:start}
.comp-hero h2{margin:6px 0 0;font-size:2rem;line-height:1.1}
.comp-hero p{margin:8px 0 0;color:var(--muted);font-size:1.05rem}
.comp-hero-actions{justify-content:flex-end}
.competition-layout-wide{grid-template-columns:320px minmax(0,1fr)}
.nav-card,.schedule-card{background:linear-gradient(180deg,#fff,#fcfdff)}
.event-stack{display:grid;gap:10px}
.event-nav-card{border:1px solid var(--line);border-radius:18px;padding:12px;background:#fff}
.event-nav-card.active{border-color:#cfe0ff;background:linear-gradient(180deg,#fff,#f8fbff);box-shadow:var(--shadow-soft)}
.event-nav-head{display:flex;justify-content:space-between;align-items:center;gap:10px;font-weight:800}
.event-nav-head span{color:var(--muted);font-size:.84rem;font-weight:700}
.round-pill-row{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.round-pill{padding:9px 12px;border:1px solid var(--line);border-radius:999px;background:#fff;font-weight:700;color:var(--muted)}
.round-pill.active{background:var(--primary-soft);border-color:#cfe0ff;color:var(--primary-2)}
.schedule-accordion{display:grid;gap:10px;margin-top:12px}
.schedule-details{border:1px solid var(--line);border-radius:18px;background:#fff;overflow:hidden}
.schedule-details.is-current{border-color:#cfe0ff;box-shadow:var(--shadow-soft)}
.schedule-details summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px;cursor:pointer}
.schedule-details summary::-webkit-details-marker{display:none}
.schedule-details summary strong{display:block}
.schedule-details summary span{display:block;color:var(--muted);font-size:.84rem;margin-top:4px}
.mini-link{color:var(--primary-2)!important;font-weight:800;margin-top:0!important}
.schedule-body{padding:0 14px 14px}
.schedule-slot-list{display:grid;gap:10px}
.schedule-slot{display:block;border:1px solid var(--line);border-radius:16px;padding:12px;background:#fbfdff}
.schedule-slot.active{border-color:#cfe0ff;background:#f4f8ff}
.schedule-slot-top{display:flex;justify-content:space-between;gap:12px;align-items:center}
.schedule-slot-top span{color:var(--muted);font-size:.82rem}
.schedule-time{margin-top:6px;font-size:.9rem;font-weight:700}
.schedule-time-soft{color:var(--muted);font-weight:600}
.schedule-empty{padding:12px;color:var(--muted)}
.result-panel{padding:20px}
.result-head-clean h3{font-size:2rem;margin:4px 0 0}
.result-head-clean p{font-size:1.05rem}
.result-table-wrap{border-radius:22px}
.result-table{min-width:1080px}
.result-table th{font-size:.86rem}
.result-table td{padding:14px 12px}
.result-main{font-size:1.25rem;font-weight:800;color:#0b1730}
.solve-chip{display:inline-flex;align-items:center;justify-content:center;min-width:56px;padding:7px 10px;border-radius:12px}
.solve-good{background:var(--good-soft)!important;border-color:#b7e7c6!important;color:#166534}
.solve-bad{background:var(--danger-soft)!important;border-color:#f6b8b8!important;color:#991b1b}
.sor-header{display:grid;grid-template-columns:1.1fr .9fr;gap:16px;align-items:start}
.sor-header h2{margin:6px 0 0;font-size:2rem}
.sor-toolbar{justify-content:flex-end}
.sor-filters{grid-column:1/-1}
.sor-layout{display:grid;grid-template-columns:320px minmax(0,1fr);gap:16px;align-items:start}
.sor-browser{position:sticky;top:92px;max-height:calc(100vh - 112px);overflow:auto}
.browser-list{display:grid;gap:10px;margin-top:8px}
.browser-item{display:grid;gap:4px;padding:14px 14px;border:1px solid var(--line);border-radius:16px;background:#fff}
.browser-item strong{line-height:1.35}
.browser-item span{color:var(--muted);font-size:.86rem}
.browser-item small{color:var(--muted-2);font-size:.78rem}
.browser-item.active{border-color:#cfe0ff;background:#f4f8ff;box-shadow:var(--shadow-soft)}
.sor-main{display:grid;gap:16px}
.kpi-grid-compact{grid-template-columns:repeat(4,minmax(0,1fr))}
.compare-panel{padding:0;overflow:hidden}
.compare-header{padding:18px 18px 0}
.compare-header h3{margin:0;font-size:1.35rem}
.compare-header p{margin:6px 0 14px;color:var(--muted)}
.compare-table th,.compare-table td{padding:14px 16px}
.stats-grid-2-wide{grid-template-columns:1fr 1fr}
.compact-head h3{margin:0;font-size:1.25rem}
.compact-head p{margin:5px 0 0}
@media (max-width: 1160px){
  .comp-hero,.sor-header,.sor-layout,.competition-layout-wide,.stats-grid-2-wide{grid-template-columns:1fr}
  .sor-browser{position:static;max-height:none}
}
@media (max-width: 760px){
  .comp-hero h2,.sor-header h2,.result-head-clean h3{font-size:1.55rem}
  .comp-hero-actions,.sor-toolbar{justify-content:stretch}
  .competition-layout-wide,.sor-layout{gap:12px}
  .browser-item,.event-nav-card,.schedule-slot{padding:12px}
  .kpi-grid-compact{grid-template-columns:1fr 1fr}
}


.site-shell,.container{max-width:1680px}
.competition-layout,.competition-layout-wide{grid-template-columns:300px minmax(0,1fr);gap:20px}
.comp-hero{grid-template-columns:minmax(0,1fr) auto}
.result-table-wrap,.table-wrap{overflow-x:auto}
.result-table,.compare-table{min-width:0;width:100%}
.result-table th,.result-table td{padding:14px 10px}
.result-main{font-size:1.1rem;font-weight:800}
.event-dropdown-list{display:grid;gap:10px}
.event-dropdown{border:1px solid var(--line-2);border-radius:18px;background:#fff;overflow:hidden}
.event-dropdown summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;padding:14px 16px;font-weight:800}
.event-dropdown summary::-webkit-details-marker{display:none}
.event-dropdown.open-current{border-color:#cfe0ff;background:linear-gradient(180deg,#fff,#f8fbff)}
.event-dropdown-title{font-size:1rem}
.event-dropdown-meta{color:var(--muted);font-size:.88rem}
.event-dropdown-body{display:grid;gap:8px;padding:0 14px 14px}
.round-menu-item{display:block;padding:10px 12px;border-radius:12px;border:1px solid var(--line);font-weight:700;color:var(--muted);background:#fff}
.round-menu-item.active{background:var(--primary-soft);color:var(--primary-2);border-color:#cfe0ff}
.schedule-card .schedule-details summary{display:flex;justify-content:space-between;align-items:center;padding:14px 16px;cursor:pointer;list-style:none}
.schedule-card .schedule-details summary::-webkit-details-marker{display:none}
.schedule-card .schedule-details{border:1px solid var(--line-2);border-radius:18px;background:#fff;overflow:hidden}
.schedule-card .schedule-body{padding:0 14px 14px}
.schedule-slot{display:grid;gap:6px;padding:12px;border-radius:14px;border:1px solid var(--line);background:var(--panel-2)}
.schedule-slot-top{display:flex;justify-content:space-between;gap:8px}
.result-panel{padding:20px}
.sor-layout{display:grid;grid-template-columns:320px minmax(0,1fr);gap:18px;align-items:start}
.browser-list{display:grid;gap:8px;max-height:calc(100vh - 280px);overflow:auto;padding-right:4px}
.browser-item{display:grid;gap:4px;padding:12px 13px;border:1px solid var(--line);border-radius:14px;background:#fff}
.browser-item.active{background:var(--primary-soft);border-color:#cfe0ff}
.view-switch{display:flex;gap:8px;flex-wrap:wrap}
.sor-main .panel{margin-bottom:16px}
@media (min-width: 980px){.table-wrap{overflow-x:visible}.result-table{table-layout:fixed}.result-table th:nth-child(2),.result-table td:nth-child(2){width:30%}}
@media (max-width: 1160px){.sor-layout,.competition-layout,.competition-layout-wide,.comp-hero{grid-template-columns:1fr}.browser-list{max-height:none}}