:root {
  --ink: #102533;
  --ink-deep: #081923;
  --muted: #687b83;
  --line: #d9e4e3;
  --paper: #f6f8f7;
  --sand: #f2f4ed;
  --mint: #35c29d;
  --mint-dark: #0b7f69;
  --orange: #ff9f51;
  --blue: #147ab8;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: "Noto Sans TC", system-ui, sans-serif; }
h1, h2, h3, h4, .brand-name, .display-title, .event-title { font-weight: 900; letter-spacing: -.04em; }
h2 { font-size: clamp(2rem, 4vw, 3.25rem); }
.site-header { background: rgba(8, 25, 35, .97); z-index: 10; }
.navbar-brand { text-decoration: none; color: #fff; }
.brand-mark { width: 36px; height: 36px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; color: var(--ink-deep); background: var(--mint); font-size: 1.05rem; }
.brand-name { font-family: "Barlow Condensed", sans-serif; font-size: 1.6rem; line-height: .8; letter-spacing: .03em; }
.brand-sub { font-family: "Barlow Condensed", sans-serif; font-size: .62rem; letter-spacing: .15em; color: rgba(255,255,255,.52); }
.nav-link { color: rgba(255,255,255,.72) !important; font-size: .88rem; }
.nav-link:hover, .nav-link:focus { color: #fff !important; }
.hero-section { color: #fff; overflow: hidden; position: relative; background: radial-gradient(circle at 83% 8%, rgba(53,194,157,.25), transparent 29%), linear-gradient(135deg, #0a2230 0%, #0c3545 57%, #0c6d67 100%); }
.hero-court-lines { position: absolute; inset: 0; opacity: .18; background: linear-gradient(90deg, transparent 49.8%, #82dac3 50%, transparent 50.2%), linear-gradient(0deg, transparent 49.8%, #82dac3 50%, transparent 50.2%); transform: perspective(650px) rotateX(55deg) scale(1.8) translateY(25%); transform-origin: center; }
.eyebrow { color: var(--mint); font: 700 .74rem/1 "Barlow Condensed", sans-serif; letter-spacing: .18em; text-transform: uppercase; }
.text-primary { color: var(--mint-dark) !important; }
.display-title { font-size: clamp(3.35rem, 8vw, 7rem); line-height: .9; margin: 1.4rem 0; position: relative; }
.display-title em { color: var(--mint); font-style: normal; }
.hero-copy { color: rgba(255,255,255,.72); max-width: 30rem; font-size: 1.05rem; line-height: 1.8; }
.btn-primary { --bs-btn-bg: var(--mint); --bs-btn-border-color: var(--mint); --bs-btn-color: var(--ink-deep); --bs-btn-hover-bg: #64d6b8; --bs-btn-hover-border-color: #64d6b8; --bs-btn-hover-color: var(--ink-deep); font-weight: 700; }
.btn-ghost { color: #fff; border-color: rgba(255,255,255,.35); }
.btn-ghost:hover { color: var(--ink); background: #fff; border-color: #fff; }
.hero-info-card { color: var(--ink); background: rgba(255,255,255,.92); border: 1px solid rgba(255,255,255,.5); border-radius: 20px; padding: 1.5rem; box-shadow: 0 25px 70px rgba(0,0,0,.2); }
.badge-soft { color: var(--mint-dark); background: #dcf7ef; font: 700 .68rem "Barlow Condensed", sans-serif; letter-spacing: .12em; }
.event-title { font-size: 2.25rem; line-height: 1.05; }
.event-title span { color: var(--mint-dark); font: 700 1.2rem "Barlow Condensed", sans-serif; letter-spacing: .08em; }
.hero-stats { border-top: 1px solid rgba(255,255,255,.18); position: relative; }
.stat-item { border-right: 1px solid rgba(255,255,255,.18); padding: 1.35rem 1rem 0; }
.stat-item:last-child { border-right: 0; }
.stat-item strong { display: block; color: var(--mint); font: 700 2.4rem/1 "Barlow Condensed", sans-serif; letter-spacing: 0; }
.stat-item span { display: block; color: rgba(255,255,255,.5); font: 700 .63rem "Barlow Condensed", sans-serif; letter-spacing: .16em; margin-top: .3rem; }
.section { padding: 6.4rem 0; }
.section-light { background: var(--paper); }
.section-dark { background: var(--ink-deep); }
.section-sand { background: var(--sand); }
.section-heading h2 { margin: .7rem 0 .6rem; }
.section-lead { color: var(--muted); line-height: 1.75; }
.panel, .capacity-panel { background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: clamp(1.25rem, 3vw, 2rem); box-shadow: 0 10px 35px rgba(11,40,50,.04); }
.capacity-panel { background: #edf8f4; border-color: #ccebe2; }
.form-section-label { color: var(--ink); font-size: .75rem; font-weight: 700; letter-spacing: .08em; margin-bottom: .2rem; }
.form-label { font-size: .82rem; font-weight: 700; margin-bottom: .45rem; }
.required { color: #dc5d4c; }
.form-control, .form-select { border-color: #cfdfdd; border-radius: 10px; padding: .72rem .85rem; font-size: .9rem; }
.form-control:focus, .form-select:focus { border-color: var(--mint); box-shadow: 0 0 0 .25rem rgba(53,194,157,.14); }
.payment-note { color: var(--muted); font-size: .78rem; line-height: 1.55; }
.capacity-row { border-bottom: 1px solid rgba(20,83,75,.12); padding: .85rem 0; }
.capacity-row:last-child { border-bottom: 0; }
.capacity-name { font-size: .9rem; font-weight: 700; }
.capacity-code { color: var(--muted); font: 700 .72rem "Barlow Condensed", sans-serif; letter-spacing: .1em; margin-left: .3rem; }
.capacity-meter { height: 5px; background: #cfe9e1; border-radius: 99px; overflow: hidden; }
.capacity-meter > span { display: block; height: 100%; border-radius: inherit; background: var(--mint-dark); }
.capacity-remaining { color: var(--mint-dark); font: 700 .8rem "Barlow Condensed", sans-serif; }
.capacity-full { color: #cd5547; }
.live-dot { display: inline-block; width: 8px; height: 8px; border-radius: 99px; background: #ef6659; box-shadow: 0 0 0 4px rgba(239,102,89,.14); vertical-align: middle; margin-right: .4rem; }
.live-status { color: #f48777; font: 700 .74rem "Barlow Condensed", sans-serif; letter-spacing: .1em; }
.court-card { min-height: 185px; background: #102f3d; border: 1px solid rgba(255,255,255,.11); border-radius: 15px; padding: 1rem; color: #fff; position: relative; overflow: hidden; }
.court-card::after { content: ""; position: absolute; right: -24px; bottom: -38px; width: 100px; height: 100px; border: 1px solid rgba(53,194,157,.26); border-radius: 50%; }
.court-number { color: var(--mint); font: 700 1.2rem "Barlow Condensed", sans-serif; }
.court-status { color: rgba(255,255,255,.48); font-size: .68rem; }
.court-match { border-top: 1px solid rgba(255,255,255,.13); margin-top: .75rem; padding-top: .75rem; }
.court-team { font-size: .82rem; font-weight: 700; }
.court-score { color: var(--mint); font: 700 1.3rem "Barlow Condensed", sans-serif; }
.court-empty { color: rgba(255,255,255,.42); font-size: .8rem; padding-top: 1.15rem; }
.division-tabs { gap: .6rem; }
.division-tabs .nav-link { color: var(--muted) !important; border-radius: 99px; padding: .65rem 1.35rem; background: #e8efed; }
.division-tabs .nav-link span { color: #94a5a7; font: 700 .68rem "Barlow Condensed", sans-serif; margin-left: .4rem; }
.division-tabs .nav-link.active { background: var(--ink); color: #fff !important; }
.standing-wrap { border: 1px solid var(--line); border-radius: 16px; overflow: hidden; background: #fff; }
.standing-group-title { background: var(--ink); color: #fff; padding: .8rem 1rem; font: 700 .86rem "Barlow Condensed", sans-serif; letter-spacing: .09em; }
.standing-group-title span { color: var(--mint); margin-left: .5rem; }
.standing-table { margin: 0; font-size: .78rem; }
.standing-table thead th { background: #edf3f1; color: var(--muted); border: 0; font-size: .68rem; font-weight: 700; letter-spacing: .05em; white-space: nowrap; }
.standing-table tbody td { border-color: #edf1f0; padding: .75rem .7rem; vertical-align: middle; }
.standing-table tbody tr:last-child td { border-bottom: 0; }
.rank-no { color: var(--muted); font: 700 1rem "Barlow Condensed", sans-serif; }
.rank-no.top { color: var(--mint-dark); }
.team-cell { font-weight: 700; }
.team-code { color: var(--muted); display: block; font: 600 .67rem "Barlow Condensed", sans-serif; letter-spacing: .08em; }
.standing-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1rem; }
.badge-outline { color: var(--mint-dark); border: 1px solid #afdacf; background: transparent; font: 700 .7rem "Barlow Condensed", sans-serif; letter-spacing: .1em; }
.draw-tabs { border-color: var(--line); }
.draw-tabs .nav-link { color: var(--muted) !important; border: 0; border-bottom: 3px solid transparent; padding: .7rem 1.35rem; font-weight: 700; }
.draw-tabs .nav-link:hover, .draw-tabs .nav-link:focus { color: var(--ink) !important; }
.draw-tabs .nav-link.active { color: var(--ink) !important; background: transparent; border-bottom-color: var(--mint); }
.draw-section { margin-bottom: 2.6rem; }
.draw-section:last-child { margin-bottom: 0; }
.draw-label { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; color: var(--ink); margin-bottom: .8rem; }
.draw-label > span { font: 700 .88rem "Barlow Condensed", sans-serif; letter-spacing: .1em; text-transform: uppercase; }
.draw-label small { color: var(--muted); font-size: .72rem; }
.bracket-scroll { overflow-x: auto; padding: .2rem .1rem 1rem; scrollbar-color: #aac7c0 transparent; }
.bracket { display: grid; grid-template-columns: repeat(var(--round-count), minmax(190px, 1fr)) minmax(135px, .7fr); min-width: calc(var(--round-count) * 220px + 155px); gap: 1.5rem; align-items: stretch; }
.bracket-round { min-width: 190px; display: flex; flex-direction: column; }
.bracket-round-head { min-height: 38px; display: flex; align-items: center; justify-content: space-between; border-bottom: 2px solid var(--ink); margin-bottom: .7rem; padding: 0 .2rem .5rem; }
.bracket-round-head h4 { color: var(--ink); font: 700 .78rem "Barlow Condensed", sans-serif; letter-spacing: .11em; text-transform: uppercase; margin: 0; }
.bracket-round-head span { color: var(--muted); font: 600 .65rem "Barlow Condensed", sans-serif; }
.bracket-round-matches { flex: 1; display: flex; flex-direction: column; justify-content: space-around; gap: .75rem; }
.bracket-match { background: #fff; border: 1px solid var(--line); border-radius: 9px; position: relative; box-shadow: 0 5px 15px rgba(15,44,52,.045); transition: opacity .18s ease, border-color .18s ease, box-shadow .18s ease; }
.bracket-match::after { content: ""; position: absolute; z-index: 0; right: -1.55rem; top: 50%; height: 1px; width: 1.55rem; background: #b9cdca; }
.bracket-round:last-of-type .bracket-match::after { display: none; }
.bracket-match-meta { display: flex; align-items: center; justify-content: space-between; min-height: 24px; padding: .28rem .55rem; background: #f4f8f7; border-bottom: 1px solid #e4ecea; border-radius: 8px 8px 0 0; color: #809493; font: 700 .57rem "Barlow Condensed", sans-serif; letter-spacing: .08em; }
.match-state { color: #7c8e8e; letter-spacing: .02em; }
.match-state-complete { color: var(--mint-dark); }
.match-state-on_court, .match-state-playing { color: #db5a4c; }
.match-state-pending_confirm { color: #c07824; }
.bracket-team { display: flex; justify-content: space-between; align-items: center; gap: .5rem; padding: .5rem .58rem; color: var(--ink); font-size: .72rem; min-height: 34px; }
.bracket-team + .bracket-team { border-top: 1px solid #edf1f0; }
.bracket-team.winner { color: var(--mint-dark); font-weight: 700; background: #f0fbf7; }
.bracket-team.winner .bracket-team-name::after { content: "\F135"; font-family: bootstrap-icons; font-size: .62rem; margin-left: .35rem; }
.bracket-team-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bracket-score { color: var(--muted); font: 700 .85rem "Barlow Condensed", sans-serif; margin-left: .25rem; }
.bracket-team.winner .bracket-score { color: var(--mint-dark); }
.bracket-champion { align-self: center; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 118px; padding: 1rem; color: var(--ink); background: linear-gradient(145deg, #fff, #ecfaf6); border: 1px solid #b9e3d8; border-radius: 14px; text-align: center; box-shadow: 0 12px 28px rgba(15,74,67,.08); }
.bracket-champion i { color: #d9a820; font-size: 1.6rem; }
.bracket-champion span { color: var(--muted); font: 700 .62rem "Barlow Condensed", sans-serif; letter-spacing: .12em; margin-top: .35rem; }
.bracket-champion strong { font-size: .82rem; margin-top: .25rem; }
.draw-empty { min-height: 130px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .35rem; color: var(--muted); background: rgba(255,255,255,.6); border: 1px dashed #b9cdca; border-radius: 12px; text-align: center; }
.draw-empty i { color: var(--mint-dark); font-size: 1.35rem; }
.draw-empty strong { color: var(--ink); font-size: .86rem; }
.draw-empty span { font-size: .72rem; }
.draw-page { background: var(--paper); }
.draw-event-hero { color: #fff; background: radial-gradient(circle at 82% 12%, rgba(53,194,157,.22), transparent 24%), linear-gradient(125deg, #071923, #103c47); border-bottom: 4px solid var(--mint); }
.draw-page-title { color: #fff; font-size: clamp(2.4rem, 5vw, 4.6rem); margin: .65rem 0 .5rem; }
.draw-event-meta { display: inline-flex; flex-direction: column; gap: .55rem; color: rgba(255,255,255,.7); font-size: .8rem; text-align: left; }
.draw-event-meta i { color: var(--mint); margin-right: .55rem; }
.draw-page-content { padding-top: 3.2rem; background: var(--paper); }
.draw-toolbar { display: flex; align-items: end; justify-content: space-between; gap: 1.5rem; }
.draw-tools { display: flex; align-items: center; gap: .75rem; }
.draw-search { width: min(300px, 46vw); }
.draw-path-filter { width: 210px; }
.draw-rule-strip { display: flex; align-items: center; flex-wrap: wrap; gap: .7rem; margin-top: 1.5rem; padding: .85rem 1rem; color: #536b6e; background: #e8f4f0; border: 1px solid #cde4dd; border-radius: 11px; font-size: .73rem; }
.draw-rule-strip strong { color: var(--mint-dark); font-family: "Barlow Condensed", sans-serif; letter-spacing: .08em; text-transform: uppercase; }
.draw-rule-strip > i { color: var(--mint-dark); }
.draw-rule-divider { width: 1px; height: 18px; margin: 0 .3rem; background: #b8d2cb; }
.draw-page-tabs .nav-link { display: flex; flex-direction: column; align-items: flex-start; min-width: 128px; }
.draw-page-tabs .nav-link small { color: #93a4a4; font: 600 .65rem "Barlow Condensed", sans-serif; letter-spacing: .08em; }
.draw-page-tabs .nav-link.active small { color: var(--mint-dark); }
.draw-page .draw-section { padding: 1.2rem; background: #f8fbfa; border: 1px solid var(--line); border-radius: 14px; }
.bracket-match.search-muted { opacity: .18; }
.bracket-match.search-hit { border-color: var(--mint); box-shadow: 0 0 0 3px rgba(53,194,157,.14); }
.site-footer { background: #071923; padding: 2.2rem 0; }
.admin-main { min-height: calc(100vh - 73px); background: radial-gradient(circle at 95% 0%, rgba(53,194,157,.11), transparent 30%), var(--paper); }
.admin-login { max-width: 430px; padding-top: 3rem; }
.admin-lock-icon { width: 72px; height: 72px; display: inline-flex; align-items: center; justify-content: center; color: var(--mint-dark); background: #dcf7ef; border-radius: 22px; font-size: 2rem; }
.admin-header { position: static; }
.admin-console { max-width: 1200px; margin: auto; }
.input-group-text { background: #f3f7f6; border-color: #cfdfdd; }
.score-team-row { display: flex; align-items: center; justify-content: space-between; padding: .9rem 0; border-top: 1px solid var(--line); gap: 1rem; }
.score-team-row strong { font-size: .9rem; }
.score-input-wrap { width: 86px; }
.score-input { text-align: center; font: 700 1.3rem "Barlow Condensed", sans-serif; }
.table thead th { color: var(--muted); font-size: .7rem; white-space: nowrap; }
.table tbody td { font-size: .78rem; }
@media (max-width: 767.98px) { .section { padding: 4.25rem 0; } .display-title { font-size: 4rem; } .hero-info-card { margin-top: 1.5rem; } .hero-stats { margin-top: 2rem !important; } .stat-item { padding-left: .35rem; } .stat-item strong { font-size: 1.9rem; } .draw-toolbar, .draw-tools { align-items: stretch; flex-direction: column; } .draw-tools, .draw-search, .draw-path-filter { width: 100%; } .draw-rule-divider { width: 100%; height: 1px; margin: .15rem 0; } .draw-page .draw-section { padding: .85rem; } .draw-label { align-items: flex-start; flex-direction: column; gap: .25rem; } }