:root {
  --ink: #081520;
  --navy: #071a2e;
  --navy-soft: #102b46;
  --blue: #1267d6;
  --cyan: #31c5e8;
  --aqua-soft: #e5f9fc;
  --orange: #ff8b32;
  --surface: #f3f7fa;
  --card: #ffffff;
  --line: #dce7ee;
  --muted: #6d8090;
  --success: #15865b;
  --danger: #bd3b43;
  --shadow: 0 24px 70px rgba(7, 26, 46, 0.15);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { min-width: 320px; background: var(--surface); }
body {
  margin: 0;
  min-height: 100vh;
  color: var(--ink);
  background:
    radial-gradient(circle at 80% 10%, rgba(49, 197, 232, 0.1), transparent 28rem),
    var(--surface);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft YaHei", "PingFang SC", sans-serif;
  -webkit-font-smoothing: antialiased;
}
button, input { font: inherit; }
button { cursor: pointer; }
button:disabled, input:disabled { cursor: not-allowed; opacity: .55; }
code { font-family: "SFMono-Regular", Consolas, monospace; }

.eyebrow {
  margin: 0 0 8px;
  color: var(--blue);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .18em;
}

.login-shell {
  position: relative;
  display: grid;
  min-height: 100vh;
  place-items: center;
  overflow: hidden;
  padding: 28px;
  background:
    linear-gradient(145deg, rgba(4, 20, 36, .97), rgba(7, 40, 67, .92)),
    repeating-linear-gradient(120deg, transparent 0 22px, rgba(255,255,255,.04) 22px 23px);
}
.login-shell::before,
.login-shell::after {
  position: absolute;
  content: "";
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 50%;
}
.login-shell::before { width: 720px; height: 720px; right: -250px; top: -340px; }
.login-shell::after { width: 520px; height: 520px; left: -260px; bottom: -310px; }
.login-glow {
  position: absolute;
  width: 320px;
  height: 320px;
  border-radius: 50%;
  filter: blur(12px);
  opacity: .32;
}
.login-glow--one { right: 8%; bottom: -120px; background: var(--cyan); }
.login-glow--two { left: -80px; top: 20%; background: var(--orange); opacity: .14; }
.login-card {
  position: relative;
  z-index: 1;
  width: min(100%, 460px);
  padding: 40px;
  border: 1px solid rgba(255,255,255,.7);
  border-radius: 28px;
  background: rgba(255,255,255,.96);
  box-shadow: 0 30px 100px rgba(0,0,0,.28);
  backdrop-filter: blur(20px);
}
.brand-mark {
  display: grid;
  width: 58px;
  height: 58px;
  margin-bottom: 26px;
  place-items: center;
  color: #fff;
  border-radius: 18px;
  background: linear-gradient(145deg, var(--blue), #0e93c2);
  box-shadow: 0 12px 30px rgba(18,103,214,.28);
}
.brand-mark svg { width: 38px; height: 38px; }
.brand-mark--small { width: 42px; height: 42px; margin: 0; border-radius: 13px; box-shadow: none; }
.brand-mark--small svg { width: 28px; height: 28px; }
.login-card h1 { margin: 0; font-size: clamp(30px, 5vw, 40px); letter-spacing: -.04em; }
.login-sub { margin: 10px 0 30px; color: var(--muted); }
.login-form { display: grid; gap: 18px; }
.field { display: grid; gap: 8px; color: #2b4050; font-size: 13px; font-weight: 700; }
.field input {
  width: 100%;
  height: 52px;
  padding: 0 16px;
  color: var(--ink);
  border: 1px solid #cbd9e2;
  border-radius: 13px;
  outline: none;
  background: #f9fbfc;
  transition: border-color .18s, box-shadow .18s, background .18s;
}
.field input:focus { border-color: var(--blue); background: #fff; box-shadow: 0 0 0 4px rgba(18,103,214,.1); }
.form-error { min-height: 18px; margin: -4px 0 0; color: var(--danger); font-size: 13px; }
.primary-button {
  display: flex;
  height: 54px;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  color: white;
  border: 0;
  border-radius: 13px;
  background: linear-gradient(120deg, var(--blue), #1aa8ce);
  box-shadow: 0 12px 28px rgba(18,103,214,.24);
  font-weight: 800;
}
.primary-button:hover { filter: brightness(1.05); }
.login-note {
  display: grid;
  gap: 5px;
  margin-top: 24px;
  padding-top: 20px;
  color: var(--muted);
  border-top: 1px solid var(--line);
  font-size: 12px;
  line-height: 1.55;
}
.login-note strong { color: var(--navy); }

.app-shell { min-height: 100vh; }
.topbar {
  position: sticky;
  z-index: 20;
  top: 0;
  display: flex;
  height: 74px;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
  color: white;
  border-bottom: 1px solid rgba(255,255,255,.08);
  background: rgba(7,26,46,.96);
  backdrop-filter: blur(18px);
}
.topbar-brand { display: flex; align-items: center; gap: 13px; }
.topbar-brand p { margin: 0 0 3px; color: #77d6e8; font-size: 9px; font-weight: 800; letter-spacing: .14em; }
.topbar-brand strong { font-size: 16px; }
.topbar-actions { display: flex; align-items: center; gap: 14px; font-size: 12px; }
.connection-state { display: inline-flex; align-items: center; gap: 7px; color: #b7c8d4; }
.connection-state i { width: 7px; height: 7px; border-radius: 50%; background: #46d99a; box-shadow: 0 0 0 4px rgba(70,217,154,.12); }
.connection-state.is-offline i { background: var(--orange); box-shadow: 0 0 0 4px rgba(255,139,50,.12); }
.user-name { color: #dce8ee; }
.ghost-button {
  padding: 8px 13px;
  color: white;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 9px;
  background: transparent;
}
.ghost-button:hover { background: rgba(255,255,255,.08); }

.workspace-layout {
  display: grid;
  min-height: calc(100vh - 74px);
  grid-template-columns: 320px minmax(0, 1fr);
}
.schedule-panel {
  display: flex;
  max-height: calc(100vh - 74px);
  flex-direction: column;
  padding: 24px 18px;
  border-right: 1px solid var(--line);
  background: rgba(255,255,255,.82);
}
.panel-heading { display: flex; align-items: flex-start; justify-content: space-between; padding: 0 5px; }
.panel-heading h2 { margin: 0; font-size: 25px; letter-spacing: -.03em; }
.panel-subtitle { margin: 5px 0 0; color: var(--muted); font-size: 12px; }
.icon-button {
  width: 38px;
  height: 38px;
  color: var(--navy);
  border: 1px solid var(--line);
  border-radius: 11px;
  background: white;
  font-size: 20px;
}
.icon-button:hover { border-color: var(--blue); color: var(--blue); }
.filter-tabs {
  display: grid;
  margin: 22px 0 14px;
  padding: 4px;
  grid-template-columns: repeat(3, 1fr);
  border-radius: 12px;
  background: #e9f0f4;
}
.filter-tab { padding: 8px; color: #667b8a; border: 0; border-radius: 9px; background: transparent; font-size: 12px; font-weight: 700; }
.filter-tab.is-active { color: var(--navy); background: white; box-shadow: 0 4px 14px rgba(7,26,46,.08); }
.match-list { display: grid; gap: 9px; overflow-y: auto; padding: 2px 2px 10px; scrollbar-width: thin; }
.match-item {
  position: relative;
  display: grid;
  width: 100%;
  gap: 8px;
  padding: 14px;
  text-align: left;
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 14px;
  background: white;
  transition: border-color .18s, transform .18s, box-shadow .18s;
}
.match-item:hover { transform: translateY(-1px); border-color: #a8cbe5; box-shadow: 0 8px 22px rgba(7,26,46,.07); }
.match-item.is-selected { border-color: var(--blue); box-shadow: inset 3px 0 0 var(--blue); }
.match-item.is-live { background: linear-gradient(135deg, #fff, #effbff); }
.match-item__top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.match-item__seq { color: var(--blue); font-size: 11px; font-weight: 800; letter-spacing: .05em; }
.match-item__time { color: var(--muted); font-size: 11px; }
.match-item__teams { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 13px; font-weight: 750; }
.match-item__score { flex: 0 0 auto; padding: 3px 7px; border-radius: 7px; background: #eef4f7; font-family: "SFMono-Regular", Consolas, monospace; }
.match-item__bottom { display: flex; justify-content: space-between; color: var(--muted); font-size: 10px; }
.match-item__status { font-weight: 800; }
.match-item__status.is-live { color: var(--blue); }
.match-item__status.is-finished { color: var(--success); }
.schedule-footnote { margin: auto 3px 0; padding-top: 12px; color: #8b9aa5; font-size: 10px; line-height: 1.5; }

.score-workspace { padding: clamp(20px, 3vw, 42px); }
.empty-state {
  display: grid;
  min-height: calc(100vh - 160px);
  place-content: center;
  justify-items: center;
  color: var(--muted);
  text-align: center;
}
.empty-state h2 { margin: 16px 0 5px; color: var(--navy); }
.empty-state p { margin: 0; }
.empty-icon { display: grid; width: 74px; height: 74px; place-items: center; color: var(--blue); border: 1px solid #cfe0eb; border-radius: 24px; background: white; font-size: 40px; box-shadow: var(--shadow); }
.match-card {
  max-width: 1180px;
  margin: 0 auto;
  overflow: hidden;
  border: 1px solid rgba(190,209,221,.8);
  border-radius: 24px;
  background: white;
  box-shadow: var(--shadow);
}
.match-heading { display: flex; align-items: flex-start; justify-content: space-between; padding: 26px 30px 20px; border-bottom: 1px solid var(--line); }
.match-kicker { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; color: var(--blue); font-size: 12px; font-weight: 800; letter-spacing: .05em; }
.separator { width: 3px; height: 3px; border-radius: 50%; background: #a6b6c1; }
.match-id { margin-left: 4px; padding: 4px 7px; color: #577082; border-radius: 6px; background: #edf3f6; font-family: "SFMono-Regular", Consolas, monospace; font-size: 10px; letter-spacing: .04em; }
.match-heading h1 { margin: 8px 0 0; font-size: clamp(24px, 3vw, 34px); letter-spacing: -.04em; }
.save-state { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 11px; }
.save-state i { width: 7px; height: 7px; border-radius: 50%; background: #aebbc4; }
.save-state.is-saving i { background: var(--orange); animation: pulse 1s infinite; }
.save-state.is-saved i { background: var(--success); }
.save-state.is-error { color: var(--danger); }
.save-state.is-error i { background: var(--danger); }
@keyframes pulse { 50% { opacity: .35; } }

.external-binding {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 18px 30px;
  border-bottom: 1px solid var(--line);
  background: #fbfdfe;
}
.external-binding__copy { display: grid; gap: 4px; min-width: 0; }
.external-binding__copy strong { color: var(--navy); font-size: 13px; }
.external-binding__copy span { color: var(--muted); font-size: 11px; line-height: 1.45; }
.external-binding__control { display: flex; flex: 0 1 560px; gap: 9px; }
.external-binding__control input {
  width: 100%;
  height: 42px;
  min-width: 0;
  padding: 0 13px;
  color: var(--ink);
  border: 1px solid #cbd9e2;
  border-radius: 11px;
  outline: none;
  background: white;
  font-family: "SFMono-Regular", Consolas, monospace;
  font-size: 12px;
}
.external-binding__control input:focus { border-color: var(--blue); box-shadow: 0 0 0 4px rgba(18,103,214,.1); }
.external-binding__control button {
  flex: 0 0 auto;
  padding: 0 16px;
  color: white;
  border: 0;
  border-radius: 11px;
  background: var(--navy);
  font-size: 12px;
  font-weight: 800;
}
.external-binding__control button:hover { background: var(--blue); }
.external-binding__control :disabled { cursor: not-allowed; opacity: .5; }

.scoreboard {
  display: grid;
  padding: clamp(24px, 4vw, 44px) clamp(18px, 4vw, 48px);
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: clamp(12px, 3vw, 36px);
  align-items: center;
  background:
    radial-gradient(circle at 50% 0, rgba(49,197,232,.12), transparent 50%),
    linear-gradient(180deg, #f8fcfd, #f1f7fa);
}
.team { display: grid; min-width: 0; gap: 20px; }
.team--b { text-align: right; }
.team-label { min-width: 0; }
.team-code { display: inline-flex; padding: 5px 9px; color: var(--blue); border: 1px solid #bcd8ec; border-radius: 8px; background: white; font-family: "SFMono-Regular", Consolas, monospace; font-size: 12px; font-weight: 800; }
.team h2 { overflow: hidden; margin: 10px 0 0; font-size: clamp(18px, 2.4vw, 28px); line-height: 1.25; text-overflow: ellipsis; }
.score-control { display: flex; align-items: center; gap: 10px; }
.team--b .score-control { justify-content: flex-end; }
.score-step {
  width: clamp(42px, 4.5vw, 54px);
  height: clamp(42px, 4.5vw, 54px);
  flex: 0 0 auto;
  color: var(--navy);
  border: 1px solid #c9d9e2;
  border-radius: 14px;
  background: white;
  box-shadow: 0 7px 18px rgba(7,26,46,.06);
  font-size: 24px;
  font-weight: 500;
}
.score-step--plus { color: white; border-color: var(--blue); background: var(--blue); box-shadow: 0 9px 24px rgba(18,103,214,.24); }
.score-step:hover { transform: translateY(-1px); }
.score-input {
  width: clamp(72px, 9vw, 108px);
  height: clamp(64px, 7vw, 86px);
  padding: 0;
  color: var(--navy);
  border: 0;
  border-bottom: 3px solid var(--navy);
  outline: none;
  background: transparent;
  font-family: "SFMono-Regular", Consolas, monospace;
  font-size: clamp(42px, 6vw, 72px);
  font-weight: 800;
  line-height: 1;
  text-align: center;
  appearance: textfield;
}
.score-input::-webkit-inner-spin-button, .score-input::-webkit-outer-spin-button { margin: 0; appearance: none; }
.score-divider { align-self: center; padding-top: 36px; color: #658093; font-family: "SFMono-Regular", Consolas, monospace; font-size: clamp(38px, 5vw, 64px); font-weight: 300; }

.control-grid { display: grid; padding: 24px 30px 26px; grid-template-columns: 1fr 1.15fr; gap: 22px; border-top: 1px solid var(--line); }
.control-block { min-width: 0; }
.control-title { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-bottom: 13px; }
.control-title h3, .result-copy h3 { margin: 0; font-size: 17px; }
.control-hint { color: var(--muted); font-size: 10px; }
.segmented-control { display: grid; padding: 4px; border-radius: 13px; background: #eaf0f4; }
.status-control { grid-template-columns: repeat(3, 1fr); }
.period-control { grid-template-columns: repeat(4, 1fr); }
.segmented-control button { min-height: 42px; padding: 8px 10px; color: #627888; border: 0; border-radius: 10px; background: transparent; font-size: 12px; font-weight: 750; }
.segmented-control button.is-active { color: var(--navy); background: white; box-shadow: 0 5px 15px rgba(7,26,46,.1); }
.status-control button[data-status="live"].is-active { color: #075cae; }
.status-control button[data-status="finished"].is-active { color: var(--success); }

.result-section { padding: 0 30px 28px; }
.result-copy { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 14px; }
.result-copy p:not(.eyebrow) { margin: 8px 0 0; color: var(--muted); font-size: 11px; line-height: 1.55; }
.upload-button { position: relative; flex: 0 0 auto; padding: 11px 15px; color: white; border-radius: 10px; background: var(--navy); font-size: 12px; font-weight: 800; text-align: center; }
.upload-button.is-disabled { color: #8d9ba5; background: #e5ebef; pointer-events: none; }
.upload-button input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.result-preview { position: relative; min-height: 150px; overflow: hidden; border: 1px dashed #bed0db; border-radius: 16px; background: #f8fbfc; }
.result-preview.is-empty { display: grid; place-items: center; }
.result-placeholder { color: #8fa0ab; text-align: center; }
.result-placeholder span { font-size: 26px; }
.result-placeholder p { margin: 3px 0 0; font-size: 11px; }
.result-preview img { display: block; width: 100%; max-height: 380px; object-fit: contain; background: #edf3f6; }
.result-meta { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 10px 13px; color: var(--muted); border-top: 1px solid var(--line); background: white; font-size: 11px; }
.result-meta a { color: var(--blue); font-weight: 700; text-decoration: none; }
.match-footer { display: flex; justify-content: space-between; padding: 14px 30px; color: #7a8e9d; border-top: 1px solid var(--line); background: #f8fafb; font-size: 10px; }

.toast {
  position: fixed;
  z-index: 100;
  right: 24px;
  bottom: 24px;
  max-width: min(420px, calc(100vw - 48px));
  padding: 13px 16px;
  color: white;
  border-radius: 11px;
  background: var(--navy);
  box-shadow: 0 14px 40px rgba(7,26,46,.25);
  font-size: 12px;
  line-height: 1.5;
  opacity: 0;
  transform: translateY(10px);
  pointer-events: none;
  transition: opacity .2s, transform .2s;
}
.toast.is-visible { opacity: 1; transform: translateY(0); }
.toast.is-error { background: var(--danger); }

@media (max-width: 960px) {
  .workspace-layout { grid-template-columns: 270px minmax(0, 1fr); }
  .control-grid { grid-template-columns: 1fr; }
  .scoreboard { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); }
  .match-heading, .score-workspace { padding-left: 22px; padding-right: 22px; }
  .external-binding { padding-left: 22px; padding-right: 22px; }
}

@media (max-width: 760px) {
  .topbar { height: 66px; padding: 0 15px; }
  .topbar-actions { gap: 9px; }
  .connection-state, .user-name { display: none; }
  .workspace-layout { display: block; min-height: calc(100vh - 66px); }
  .schedule-panel { max-height: none; padding: 18px 15px 14px; border-right: 0; border-bottom: 1px solid var(--line); }
  .match-list { display: flex; overflow-x: auto; padding-bottom: 5px; scroll-snap-type: x proximity; }
  .match-item { min-width: 245px; scroll-snap-align: start; }
  .schedule-footnote { display: none; }
  .score-workspace { padding: 14px; }
  .match-card { border-radius: 18px; }
  .match-heading { padding: 20px 18px 16px; }
  .external-binding { align-items: stretch; flex-direction: column; gap: 12px; padding: 16px 18px; }
  .external-binding__control { flex-basis: auto; }
  .save-state { margin-left: 10px; white-space: nowrap; }
  .scoreboard { padding: 24px 14px; gap: 8px; }
  .score-control { justify-content: center; gap: 5px; }
  .team--b .score-control { justify-content: center; }
  .team--b { text-align: left; }
  .score-step { width: 38px; height: 42px; border-radius: 11px; font-size: 20px; }
  .score-input { width: 58px; height: 62px; font-size: 42px; }
  .score-divider { padding-top: 70px; font-size: 30px; }
  .control-grid { padding: 20px 18px; gap: 18px; }
  .control-hint { display: none; }
  .result-section { padding: 0 18px 20px; }
  .result-copy { display: grid; align-items: start; }
  .upload-button { justify-self: start; }
  .match-footer { padding: 12px 18px; }
}

@media (max-width: 470px) {
  .login-shell { padding: 16px; }
  .login-card { padding: 28px 22px; border-radius: 22px; }
  .login-card h1 { font-size: 31px; }
  .topbar-brand p { display: none; }
  .topbar-brand strong { font-size: 14px; }
  .brand-mark--small { width: 36px; height: 36px; }
  .match-kicker { gap: 6px; font-size: 10px; }
  .external-binding__control { display: grid; grid-template-columns: minmax(0, 1fr) auto; }
  .match-id { width: 100%; margin-left: 0; }
  .match-heading h1 { font-size: 22px; }
  .scoreboard { grid-template-columns: minmax(0, 1fr) 12px minmax(0, 1fr); }
  .team h2 { font-size: 15px; }
  .team-code { padding: 4px 7px; font-size: 10px; }
  .score-control { display: grid; grid-template-columns: 1fr 1fr; justify-items: stretch; }
  .score-input { width: 100%; height: 56px; grid-column: 1 / -1; grid-row: 1; border-bottom-width: 2px; }
  .score-step { width: 100%; height: 36px; font-size: 18px; }
  .score-step:first-child { grid-column: 1; grid-row: 2; }
  .score-step:last-child { grid-column: 2; grid-row: 2; }
  .score-divider { padding-top: 92px; }
  .segmented-control button { padding: 7px 3px; font-size: 10px; }
  .result-meta { align-items: flex-start; flex-direction: column; }
}