:root {
    color-scheme: light;
    --bg: #f3f5f8; --surface: #fff; --soft: #f7f9fc; --text: #182437;
    --muted: #607086; --border: #e1e7ef; --accent: #316af2; --accent-soft: #edf3ff; --primary: #316af2; --danger-button: #b83247;
    --link: #2454c0; --danger: #b83247; --success: #24754a; --radius: 14px;
    --shadow: 0 8px 30px rgb(24 36 55 / 4%); --sidebar: 248px;
    --brand-glow: rgb(49 106 242 / 9%); --brand-mark-opacity: .055;
    --brand-wordmark: url("../images/tkd-wordmark.svg");
}
:root[data-theme="dark"] {
    color-scheme: dark;
    --bg: #101721; --surface: #182230; --soft: #1b2737; --text: #edf2fa;
    --muted: #a6b5ca; --border: #2c394b; --accent: #91b0ff; --accent-soft: #223657; --link: #91b0ff;
    --danger: #dc5970; --success: #69c993; --shadow: none;
    --brand-glow: rgb(145 176 255 / 8%); --brand-mark-opacity: .06;
}
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; font: 15px/1.5 "Segoe UI", Arial, sans-serif; background: var(--bg); color: var(--text); }
body a { color: var(--link); }
button, input, select, textarea { font: inherit; }
button, a, input, select, textarea, summary { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
svg { flex-shrink: 0; }
.ui-symbols { position: absolute; width: 0; height: 0; overflow: hidden; }
.ui-skip { position: fixed; top: 8px; left: 12px; z-index: 200; padding: 10px 14px; background: var(--surface); transform: translateY(-160%); }
.ui-skip:focus { transform: none; }
.site-shell { min-height: 100dvh; }
.site-shell.with-sidebar { padding-left: var(--sidebar); }
.site-main { min-width: 0; container: main / inline-size; }
.site-main:focus { outline: none; }
.ui-sidebar { position: fixed; inset: 0 auto 0 0; z-index: 60; width: var(--sidebar); padding: 24px 16px 18px; display: flex; flex-direction: column; background: var(--surface); border-right: 1px solid var(--border); overflow-y: auto; }
.ui-brand-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
body .ui-brand { display: flex; gap: 10px; align-items: center; color: var(--text); text-decoration: none; font-size: 18px; font-weight: 750; line-height: 1.15; }
.ui-brand small { display: block; color: var(--muted); font-size: 11px; font-weight: 500; margin-top: 7px; }
.ui-brand-mark { display: grid; place-items: center; width: 38px; height: 42px; background: var(--primary); color: white; font-size: 11px; font-weight: 800; border-radius: 12px 12px 12px 3px; }
.ui-brand-accent { color: var(--accent); }
.ui-sidebar .ui-brand { font-size: 17px; gap: 8px; }
.ui-brand-mark { flex-shrink: 0; }
.ui-sidebar-theme { margin: 20px 6px 0; }
.ui-event-label { margin: 20px 6px 18px; border-bottom: 1px solid var(--border); padding-bottom: 18px; }
.ui-event-label > span { display: block; color: var(--muted); font-size: 11px; letter-spacing: .07em; text-transform: uppercase; margin-bottom: 7px; }
.ui-event-label strong { font-size: 13px; line-height: 1.5; display: block; overflow-wrap: anywhere; }
.ui-nav { display: grid; gap: 4px; margin-top: 20px; }
.ui-event-label + .ui-nav { margin-top: 0; }
.ui-nav a { display: flex; align-items: center; gap: 10px; padding: 11px 12px; min-height: 44px; border-radius: 10px; color: var(--muted); text-decoration: none; font-size: 13px; font-weight: 550; line-height: 1.4; }
.ui-nav a:hover { background: var(--soft); color: var(--text); }
.ui-nav a[aria-current] { color: var(--link); background: var(--accent-soft); font-weight: 700; }
.ui-nav svg, .ui-menu-button svg, .ui-sidebar-close svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.65; stroke-linecap: round; stroke-linejoin: round; }
.ui-sidebar-footer { margin-top: auto; padding: 26px 6px 0; }
.ui-account { font-size: 12px; overflow-wrap: anywhere; }
.ui-account strong, .ui-account span { display: block; }
.ui-account span { color: var(--muted); margin-top: 3px; }
body .ui-account-link { display: inline-block; background: none; color: var(--muted); border: 0; text-decoration: none; margin: 9px 0 0; padding: 4px 0; width: auto; font-size: 12px; min-height: 30px; font-weight: 500; }
.ui-sidebar-footer form { padding: 0; border: 0; }
.ui-theme-label { display: flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 600; color: var(--text); margin: 0 0 7px; }
.ui-theme-label svg,.ui-theme-toggle svg,.ui-theme-choice svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.65; stroke-linecap: round; stroke-linejoin: round; }
body .ui-sidebar select { background: var(--soft); color: var(--text); border: 1px solid var(--border); border-radius: 9px; padding: 8px 10px; width: 100%; font-size: 13px; min-height: 44px; }
.ui-theme-picker { position: relative; flex: 0 0 auto; }
.ui-theme-toggle { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; padding: 8px 10px; margin: 0; border: 1px solid var(--border); border-radius: 9px; background: var(--soft); color: var(--text); font: 600 13px/1.3 "Segoe UI", Arial, sans-serif; white-space: nowrap; }
.ui-theme-toggle[aria-expanded="true"] { border-color: var(--accent); }
.ui-theme-caret { font-size: 15px; line-height: 1; }
.ui-theme-panel { position: absolute; right: 0; top: calc(100% + 8px); z-index: 55; width: 224px; max-width: calc(100vw - 24px); padding: 10px; background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 12px 35px rgb(0 0 0 / 20%); }
.ui-theme-panel-title { margin: 3px 9px 8px; font-size: 12px; font-weight: 650; color: var(--muted); }
.ui-theme-choice { display: flex; align-items: center; gap: 9px; width: 100%; min-height: 44px; padding: 9px; border: 0; border-radius: 8px; background: transparent; color: var(--text); text-align: left; font: 500 13px/1.4 "Segoe UI", Arial, sans-serif; }
.ui-theme-choice:hover { background: var(--soft); }
.ui-theme-choice[aria-pressed="true"] { background: var(--accent-soft); color: var(--link); font-weight: 650; }
.ui-theme-choice-check { margin-left: auto; visibility: hidden; }
.ui-theme-choice[aria-pressed="true"] .ui-theme-choice-check { visibility: visible; }
.ui-mobile-bar, .ui-sidebar-close { display: none; }
.ui-menu-backdrop { position: fixed; inset: 0; z-index: 59; border: 0; background: rgb(0 0 0 / 45%); width: 100%; height: 100%; margin: 0; }
.ui-public-header { display: flex; justify-content: space-between; gap: 20px; align-items: center; padding: 24px max(24px, calc((100% - 1280px) / 2)); }
.without-sidebar .site-main { min-height: calc(100dvh - 94px); }
.without-sidebar .site-main .wrap { min-height: calc(100dvh - 94px); }
.site-main .top { display: flex; justify-content: space-between; align-items: center; background: var(--surface); color: var(--text); padding: 24px 30px; border-bottom: 1px solid var(--border); gap: 18px; min-width: 0; }
.site-main .top strong { font-size: 20px; font-weight: 700; line-height: 1.35; }
.site-main .top > div { min-width: 0; overflow-wrap: anywhere; }
.site-main .top .muted { font-size: 13px; margin-top: 5px; }
.site-main .box, .site-main > main { padding: 26px 30px; min-width: 0; }
.site-main .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 22px; max-width: none; min-width: 0; margin-bottom: 18px; box-shadow: var(--shadow); }
.site-main h1 { font-size: clamp(24px, 2.2vw, 32px); line-height: 1.2; letter-spacing: -.025em; }
.site-main h2 { font-size: 21px; line-height: 1.35; letter-spacing: -.015em; margin-top: 0; }
.site-main h3 { font-size: 17px; line-height: 1.4; }
.site-main p { line-height: 1.55; }
.site-main .muted, .site-main .hint, .site-main label { color: var(--muted); }
.site-main .empty { color: var(--muted); padding: 24px 12px; }
.site-main .grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
.site-main .grid > *, .site-main .meta > * { min-width: 0; overflow-wrap: anywhere; }
.site-main .meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); gap: 12px; }
.site-main .meta > div { background: var(--soft); border-color: var(--border); border-radius: 10px; padding: 12px 14px; }
.site-main .item { background: var(--soft); border-color: var(--border); border-radius: 12px; padding: 18px; }
.site-main .item h3 { margin: 0 0 8px; }
.site-main .item p { color: var(--muted); }
.site-main input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), .site-main select, .site-main textarea { background: var(--soft); color: var(--text); border: 1px solid var(--border); border-radius: 9px; min-height: 44px; padding: 10px 12px; min-width: 0; max-width: 100%; }
.site-main input::placeholder, .site-main textarea::placeholder { color: var(--muted); opacity: .8; }
.site-main input:focus, .site-main select:focus, .site-main textarea:focus { border-color: var(--accent); }
.site-main label { font-size: 13px; font-weight: 500; }
.site-main .btn, .site-main .link-btn, .site-main button:not(.ui-plain) { display: inline-flex; align-items: center; justify-content: center; gap: 7px; background: var(--primary); color: #fff; padding: 10px 15px; border: 1px solid transparent; border-radius: 9px; min-height: 42px; font: 600 13px/1.35 "Segoe UI", Arial, sans-serif; text-decoration: none; cursor: pointer; max-width: 100%; overflow-wrap: anywhere; }
.site-main .btn:hover, .site-main .link-btn:hover, .site-main button:not(.ui-plain):hover { filter: brightness(.96); }
.site-main .btn-danger, .site-main .danger-btn, .site-main button.btn-danger, .site-main button.danger-btn { background: var(--danger-button); color: #fff; }
.site-main .btn-secondary, .site-main .btn-quiet, .site-main button.btn-secondary, .site-main button.btn-quiet { background: var(--soft); color: var(--text); border-color: var(--border); }
.site-main > .top > a.btn:not(.btn-danger):not(.danger-btn) { background: var(--primary); color: #fff; border-color: transparent; }
.site-main .back-link { color: var(--link); font-size: 13px; text-decoration: none; }
.site-main .back-link:hover { text-decoration: underline; }
.site-main .actions, .site-main .row-actions, .site-main .inline-actions, .site-main .public-link-actions { gap: 8px; flex-wrap: wrap; min-width: 0; }
.site-main .actions form, .site-main .row-actions form { min-width: 0; margin: 0; }
.site-main .row-actions .mini-form { width: 100%; flex-wrap: wrap; }
.site-main .date-time { white-space: normal; }
.site-main .ok, .site-main .success { color: var(--success); }
.site-main .err, .site-main .error { color: var(--danger); }
.site-main details.ui-disclosure { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); margin-bottom: 18px; padding: 18px 22px; }
.site-main details.ui-disclosure > summary { cursor: pointer; font-size: 16px; font-weight: 650; min-height: 32px; }
.site-main details.ui-disclosure > summary + * { margin-top: 18px; }
.site-main .table-shell, .site-main .table-wrap { overflow: visible; max-width: 100%; }
.site-main .ui-service-table { display: table; width: 100%; min-width: 0; table-layout: fixed; background: var(--surface); border-color: var(--border); font-size: 13px; }
.site-main .ui-service-table th, .site-main .ui-service-table td { padding: 11px 10px; border-color: var(--border); color: var(--text); overflow-wrap: anywhere; white-space: normal; font-size: 13px; }
.site-main .ui-service-table th { background: var(--soft); color: var(--muted); font-weight: 600; }
.site-main .ui-service-table td small { color: var(--muted); }
.site-main .ui-service-table .row-actions { display: grid; grid-template-columns: 1fr; }
.site-main .ui-service-table td::before { display: none; }
.site-main .public-link-url { background: var(--soft); border-color: var(--border); color: var(--text); overflow-wrap: anywhere; }
.site-main .filters { gap: 12px; }
.site-main .summary-item, .site-main .age-section, .site-main .notice, .site-main .count { border-color: var(--border); border-radius: var(--radius); background: var(--surface); }
.site-main .settings { grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); }
.site-main .section-head { border-color: var(--border); }
.site-main .dojang { background: var(--soft); }
.site-main .duration, .site-main .discipline { color: var(--text); }
.site-main .pager { margin-top: 20px; }
.site-main .pager svg { width: 18px; height: 18px; }
.site-main .event-heading h1 { font-size: clamp(28px, 3.2vw, 44px); }
.site-main .toolbar { flex-wrap: wrap; }
.site-main .place-1 { color: #946200; }
.site-main .place-2 { color: #546578; }
.site-main .place-3 { color: #9c5228; }
:root[data-theme="dark"] .site-main .place-1 { color: #ffd76b; }
:root[data-theme="dark"] .site-main .place-2 { color: #d8e0f2; }
:root[data-theme="dark"] .site-main .place-3 { color: #e0a877; }
@container main (max-width: 1240px) {
    .site-main .ui-dense-table, .site-main .ui-dense-table tbody { display: block; }
    .site-main .ui-dense-table thead { display: none; }
    .site-main .ui-dense-table .ui-service-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 14px; gap: 12px; border: 1px solid var(--border); border-radius: 12px; margin: 12px 0; }
    .site-main .ui-dense-table .ui-service-row td { display: block; padding: 0; border: 0; min-width: 0; }
    .site-main .ui-dense-table .ui-service-row td::before { content: attr(data-label); display: block; font-size: 11px; font-weight: 500; color: var(--muted); margin-bottom: 3px; }
}
@container main (max-width: 720px) {
    .site-main .ui-service-table, .site-main .ui-service-table tbody { display: block; }
    .site-main .ui-service-table thead { display: none; }
    .site-main .ui-service-table .ui-service-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 16px; gap: 14px; border: 1px solid var(--border); border-radius: 12px; margin: 12px 0; }
    .site-main .ui-service-table .ui-service-row td { display: block; width: auto; border: 0; padding: 0; min-width: 0; }
    .site-main .ui-service-table .ui-service-row td::before { content: attr(data-label); display: block; font-size: 11px; font-weight: 500; color: var(--muted); margin-bottom: 3px; }
    .site-main .ui-service-table .ui-service-row td:last-child { grid-column: 1 / -1; }
    .site-main .ui-service-table .row-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .site-main .box, .site-main > main { padding: 16px; }
    .site-main .top { padding: 20px 16px; flex-wrap: wrap; }
    .site-main .card { padding: 18px; }
    .site-main .toolbar { display: grid; grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 900px) {
    .site-shell.with-sidebar { padding-left: 0; padding-top: 64px; }
    .ui-mobile-bar { position: fixed; inset: 0 0 auto; z-index: 50; display: flex; height: 64px; justify-content: space-between; align-items: center; gap: 8px; padding: 8px 12px; border-bottom: 1px solid var(--border); background: var(--surface); }
    .ui-mobile-brand { font-size: clamp(13px, 3.8vw, 15px); font-weight: 750; white-space: nowrap; }
    .ui-mobile-brand span { color: var(--accent); }
    .ui-menu-button, .ui-sidebar-close { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: auto; min-height: 40px; background: var(--soft); color: var(--text); border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px; margin: 0; font-size: 13px; }
    .ui-menu-button { min-height: 44px; }
    .ui-mobile-bar .ui-theme-panel { position: fixed; top: 58px; right: 12px; }
    .ui-sidebar { width: min(300px, calc(100vw - 32px)); transform: translateX(-102%); visibility: hidden; transition: transform .18s ease, visibility .18s; }
    .ui-menu-open .ui-sidebar { transform: none; visibility: visible; }
    .ui-menu-open { overflow: hidden; }
    .ui-public-header { padding: 18px 16px; }
    .ui-public-header { gap: 10px; }
    .ui-sidebar-theme select { font-size: 16px; }
    .site-main input:not([type="checkbox"]):not([type="radio"]), .site-main select, .site-main textarea { font-size: 16px; }
    .site-main .btn, .site-main .link-btn, .site-main button:not(.ui-plain) { min-height: 44px; }
    .site-main .top strong { font-size: 18px; }
}
@media (max-width: 380px) { .ui-public-header .ui-brand { font-size: 15px; gap: 7px; } .ui-public-header .ui-brand-mark { width: 32px; height: 38px; } }
@media (max-width: 340px) { .ui-menu-button > span { display: none; } .ui-menu-button { padding: 8px 10px; } }
@container main (max-width: 380px) {
    .site-main .ui-service-table .ui-service-row { grid-template-columns: minmax(0, 1fr); }
    .site-main .ui-service-table .row-actions { grid-template-columns: minmax(0, 1fr); }
}
/* Brand decoration stays local to headings and the canvas outside auth cards.
   Working tables, participant lists and the bracket keep their solid surfaces. */
.site-main > .top {
    position: relative; isolation: isolate;
    background: radial-gradient(ellipse at top right, var(--brand-glow), transparent 68%), var(--surface);
}
.site-main .event-heading::after, .auth-page .site-main > .wrap::after {
    content: ""; position: absolute; z-index: -1; pointer-events: none;
    background-color: var(--accent); opacity: var(--brand-mark-opacity);
    -webkit-mask-image: var(--brand-wordmark); mask-image: var(--brand-wordmark);
    -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
    -webkit-mask-size: contain; mask-size: contain;
    -webkit-mask-position: right center; mask-position: right center;
}
/* The overview already has a branded hero: keep its upper panel quiet. */
.site-main > .top:has(~ .box .event-heading) { background: var(--surface); }
.site-main .event-heading {
    position: relative; isolation: isolate; min-width: 0;
    margin-bottom: 24px;
    padding: clamp(22px, 3vw, 32px);
    border: 1px solid var(--border); border-radius: var(--radius);
    background: radial-gradient(ellipse at top right, var(--brand-glow), transparent 70%), var(--surface);
}
.site-main .event-heading::after {
    right: 0; bottom: 0; width: min(42%, 390px); height: min(75%, 160px);
    -webkit-mask-position: right bottom; mask-position: right bottom;
}
.site-main .event-public-hero .event-heading { padding: clamp(22px, 3vw, 32px); margin-bottom: 0; }
.site-main .event-public-hero::after { content: none; }
.auth-page .site-main > .wrap {
    position: relative; isolation: isolate;
    background: radial-gradient(ellipse at 12% 12%, var(--brand-glow), transparent 58%),
        radial-gradient(ellipse at 95% 90%, var(--brand-glow), transparent 55%);
}
.auth-page .site-main > .wrap::after {
    left: max(16px, calc(50% - 580px)); top: 24%; width: min(36%, 420px); height: 180px;
    -webkit-mask-position: left center; mask-position: left center;
}
@media (max-width: 600px) {
    .site-main .event-heading, .site-main .event-public-hero .event-heading { padding: 22px 18px; }
    .site-main .event-heading::after { width: min(70%, 260px); height: 100px; }
    .auth-page .site-main > .wrap::after { left: 16px; top: 10%; width: calc(100% - 32px); height: 120px; }
}
/* Login-only tournament motif: two static masks behind the opaque form.
   No match data, extra text, motion or interaction is part of the decoration. */
.auth-login-page {
    --auth-bracket-ink: #8ba3c7;
    --auth-bracket-haze: rgb(91 133 213 / 8%);
    --auth-bracket-mask: url("../images/auth-tournament-bracket.svg");
}
:root[data-theme="dark"] .auth-login-page {
    --auth-bracket-ink: #6c88b0;
    --auth-bracket-haze: rgb(95 141 215 / 11%);
}
.auth-login-page .site-main > .wrap {
    background: radial-gradient(ellipse at 90% 20%, var(--auth-bracket-haze), transparent 62%);
}
.auth-login-page .site-main > .wrap::before,
.auth-login-page .site-main > .wrap::after {
    content: ""; position: absolute; z-index: -1; pointer-events: none;
    top: 0; bottom: 0; height: auto; width: clamp(184px, 27vw, 380px);
    background-color: var(--auth-bracket-ink); opacity: .15;
    -webkit-mask-image: var(--auth-bracket-mask); mask-image: var(--auth-bracket-mask);
    -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%; mask-size: 100% 100%;
    -webkit-mask-position: center; mask-position: center;
}
.auth-login-page .site-main > .wrap::before { left: clamp(8px, 3.5vw, 64px); }
.auth-login-page .site-main > .wrap::after { left: auto; right: clamp(8px, 3.5vw, 64px); transform: scaleX(-1); }
@media (forced-colors: active) {
    .site-main .event-heading::after, .auth-page .site-main > .wrap::after,
    .auth-login-page .site-main > .wrap::before { content: none; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; } }