:root { --bg:#0a0d0e; --panel:#111718; --panel-2:#172022; --line:#2a3536; --ink:#f3f7f5; --muted:#99a6a4; --green:#98cfa2; --blue:#07509e; }
* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; text-size-adjust:100%; }
body { margin:0; overflow-x:hidden; background:radial-gradient(circle at 15% 0%,#14211b 0,transparent 27rem),var(--bg); color:var(--ink); font-family:Manrope,Arial,sans-serif; }
button { font:inherit; touch-action:manipulation; }
.app-shell { max-width:1440px; min-height:100vh; margin:auto; padding:0 40px; }
.topbar { position:relative; height:94px; display:flex; align-items:center; justify-content:center; border-bottom:1px solid var(--line); }
.brand { width:124px; height:64px; display:flex; align-items:center; justify-content:center; overflow:hidden; color:var(--ink); text-decoration:none; }
.brand img { width:470px; max-width:none; height:auto; object-fit:initial; }
.client-label { position:absolute; left:0; margin:0; color:var(--green); font:500 10px 'DM Mono',monospace; letter-spacing:.12em; }
.private-label { position:absolute; right:0; color:var(--muted); font:500 10px 'DM Mono',monospace; letter-spacing:.13em; }
.private-label span,.status-dot { display:inline-block; width:7px; height:7px; background:var(--green); border-radius:50%; margin-right:8px; box-shadow:0 0 16px var(--green); }
.hero { display:grid; grid-template-columns:74px 1fr auto; gap:22px; align-items:center; padding:34px 0; }
.club-mark { width:68px; height:68px; display:grid; place-items:center; }
.club-mark img { max-width:100%; max-height:100%; }
.eyebrow { margin:0 0 8px; color:var(--green); font:500 10px 'DM Mono',monospace; letter-spacing:.12em; }
h1,h2,p { margin-top:0; } .hero h1 { margin-bottom:10px; font-size:clamp(35px,4.4vw,57px); line-height:.98; letter-spacing:-.06em; }
h2 { margin-bottom:0; font-size:21px; letter-spacing:-.04em; }.match-meta { margin:0; color:var(--muted); font-size:15px; }
.hero-actions { display:flex; align-items:center; gap:24px; }.pdf-actions { display:flex; gap:8px; }.pdf-download { display:inline-flex; align-items:center; justify-content:center; gap:9px; min-height:48px; padding:0 17px; border:1px solid #65876d; border-radius:9px; color:#d2e8d6; font:500 11px 'DM Mono',monospace; letter-spacing:.065em; text-decoration:none; white-space:nowrap; transition:background .18s,border-color .18s; }.pdf-view { border-color:var(--line); color:#b8c7c4; }.pdf-download span { font-size:18px; line-height:1; }.pdf-download:hover { border-color:var(--green); background:rgba(152,207,162,.1); }.report-count { display:flex; align-items:center; gap:12px; padding:11px 0 11px 24px; border-left:1px solid var(--line); }.report-count strong { color:var(--green); font:500 33px 'DM Mono',monospace; }.report-count span { color:var(--muted); font-size:10px; line-height:1.35; text-transform:uppercase; letter-spacing:.08em; }
.workspace { display:grid; grid-template-columns:minmax(0,1.72fr) minmax(320px,.72fr); overflow:hidden; border:1px solid var(--line); border-radius:18px; background:var(--panel); }
.player-panel { min-width:0; padding:22px; }.now-playing { display:flex; align-items:center; min-height:20px; color:var(--muted); font:500 10px 'DM Mono',monospace; letter-spacing:.1em; }.now-category { margin-left:auto; color:var(--green); }
.video-frame { width:100%; aspect-ratio:16/9; min-height:0; display:grid; place-items:center; overflow:hidden; border-radius:10px; background:#050607; }.video-frame iframe { display:block; border:0; width:100%; height:100%; }.video-placeholder { text-align:center; color:var(--muted); }.play-symbol { display:grid; place-items:center; width:52px; height:52px; margin:0 auto 14px; padding-left:3px; border:1px solid #4b5a59; border-radius:50%; color:var(--green); }.video-placeholder p { max-width:250px; margin:auto; font-size:13px; line-height:1.5; }
.video-support { margin-top:13px; color:#8e9b99; font:500 9px 'DM Mono',monospace; letter-spacing:.045em; }.video-support summary { width:max-content; max-width:100%; cursor:pointer; list-style:none; }.video-support summary::-webkit-details-marker { display:none; }.video-support summary::after { margin-left:7px; color:var(--green); content:'+'; font-size:13px; }.video-support[open] summary::after { content:'–'; }.video-support > div { display:flex; flex-wrap:wrap; align-items:center; gap:8px 14px; padding-top:11px; }.video-support a { color:#b7d8bd; text-decoration:none; white-space:nowrap; }.video-support a:hover { color:var(--green); }.video-support b { margin-left:3px; font-size:12px; }
.mobile-playback-guide { margin-top:14px; padding:14px; border:1px solid #416149; border-radius:12px; background:rgba(152,207,162,.08); }.mobile-playback-guide .eyebrow { margin-bottom:7px; }.mobile-playback-guide > p:not(.eyebrow) { margin:0; color:#bdc9c6; font-size:12px; line-height:1.55; }.mobile-playback-guide > div { display:flex; gap:8px; margin-top:13px; }.mobile-playback-guide a,.mobile-playback-guide button { flex:1; min-height:40px; display:inline-flex; align-items:center; justify-content:center; border:1px solid #6e9b78; border-radius:8px; background:transparent; color:#d2e8d6; font:500 9px 'DM Mono',monospace; letter-spacing:.06em; text-decoration:none; }.mobile-playback-guide button { border-color:var(--line); color:#b8c7c4; cursor:pointer; }
.external-video-card { position:relative; width:100%; height:100%; isolation:isolate; overflow:hidden; background:#050607; }.external-video-card img { width:100%; height:100%; object-fit:cover; display:block; opacity:.64; }.external-video-shade { position:absolute; inset:0; z-index:1; background:linear-gradient(180deg,rgba(0,0,0,.08),rgba(0,0,0,.75)); }.external-video-content { position:absolute; z-index:2; inset:0; display:flex; flex-direction:column; align-items:flex-start; justify-content:flex-end; gap:7px; padding:18px; }.external-video-content span { color:#b8e6c0; font:500 9px 'DM Mono',monospace; letter-spacing:.09em; }.external-video-content strong { max-width:230px; font-size:18px; line-height:1.06; letter-spacing:-.04em; }.external-video-content a { display:inline-flex; align-items:center; justify-content:center; min-height:38px; margin-top:4px; padding:0 13px; border:1px solid #a6d6ae; border-radius:8px; background:rgba(7,13,10,.52); color:#effbf1; font:500 9px 'DM Mono',monospace; letter-spacing:.07em; text-decoration:none; }
.player-info { display:flex; justify-content:space-between; align-items:end; gap:20px; padding:24px 2px 2px; }.controls { display:flex; gap:8px; }.controls button { width:42px; height:42px; border:1px solid var(--line); border-radius:8px; background:transparent; color:var(--ink); cursor:pointer; }.controls button:hover { border-color:var(--green); color:var(--green); }
.playlist-panel { border-left:1px solid var(--line); }.playlist-heading { display:flex; justify-content:space-between; align-items:end; min-height:103px; padding:22px; border-bottom:1px solid var(--line); }.playlist-heading h2 { font-size:19px; }.playlist-heading > span { color:var(--muted); font:500 11px 'DM Mono',monospace; }.playlist { max-height:504px; overflow:auto; }.playlist-item { width:100%; display:grid; grid-template-columns:30px 1fr 20px; align-items:center; gap:10px; padding:18px 20px; border:0; border-bottom:1px solid var(--line); background:transparent; color:var(--ink); text-align:left; cursor:pointer; }.playlist-item:hover { background:var(--panel-2); }.playlist-item.active { background:linear-gradient(90deg,rgba(152,207,162,.15),transparent); }.item-number,.item-play { font:500 11px 'DM Mono',monospace; color:var(--muted); }.active .item-number,.active .item-play { color:var(--green); }.item-copy { display:grid; gap:4px; }.item-copy strong { font-size:14px; font-weight:600; }.item-copy small { color:var(--muted); font-size:11px; }
footer { display:flex; justify-content:space-between; gap:20px; padding:22px 0; color:#5f706d; font:10px 'DM Mono',monospace; letter-spacing:.06em; text-transform:uppercase; }
.season-hero { display:grid; grid-template-columns:74px 1fr auto; gap:22px; align-items:center; padding:38px 0 30px; }.season-hero h1 { margin:0 0 9px; font-size:clamp(35px,4.4vw,57px); line-height:.98; letter-spacing:-.06em; }.season-hero p:not(.eyebrow) { margin:0; color:var(--muted); font-size:15px; }.season-stat { display:flex; align-items:center; gap:12px; padding:11px 0 11px 24px; border-left:1px solid var(--line); }.season-stat strong { color:var(--green); font:500 33px 'DM Mono',monospace; }.season-stat span { color:var(--muted); font-size:10px; line-height:1.35; text-transform:uppercase; letter-spacing:.08em; }
.featured-report { display:flex; align-items:center; justify-content:space-between; gap:24px; padding:24px; border:1px solid #496451; border-radius:18px; background:linear-gradient(105deg,rgba(152,207,162,.13),rgba(17,23,24,.3) 55%); }.featured-report h2 { font-size:23px; }.featured-report p:not(.eyebrow) { margin:7px 0 0; color:var(--muted); font-size:13px; }.featured-report > a { flex:0 0 auto; display:inline-flex; align-items:center; gap:13px; padding:15px 17px; border:1px solid #71957a; border-radius:9px; color:#d2e8d6; font:500 11px 'DM Mono',monospace; letter-spacing:.065em; text-decoration:none; }.featured-report > a span { font-size:17px; }
.library-head { display:flex; align-items:end; justify-content:space-between; gap:20px; padding:42px 0 17px; }.library-head h2 { font-size:25px; }.library-help { margin:7px 0 0; color:var(--muted); font-size:13px; }.result-count { margin:0; color:var(--green); font:500 11px 'DM Mono',monospace; letter-spacing:.07em; }.filter-panel { display:grid; grid-template-columns:1.55fr 1.2fr 1fr .82fr .85fr .72fr auto; gap:8px; padding:14px; border:1px solid var(--line); border-radius:14px; background:var(--panel); }.search { display:flex; align-items:center; gap:9px; padding:0 13px; border:1px solid var(--line); border-radius:9px; color:var(--muted); }.search input { width:100%; height:46px; border:0; outline:0; background:transparent; color:var(--ink); font:13px Manrope,Arial,sans-serif; }.search input::placeholder { color:#71807e; }.competition-select { position:relative; display:grid; gap:2px; min-width:0; padding:7px 12px 5px; border:1px solid var(--line); border-radius:9px; color:var(--muted); font:500 8px 'DM Mono',monospace; letter-spacing:.07em; }.competition-select select { appearance:none; border:0; outline:0; padding:0 18px 0 0; background:transparent; color:var(--ink); font:12px Manrope,Arial,sans-serif; }.competition-select::after { position:absolute; right:12px; bottom:10px; content:'⌄'; color:var(--green); font-size:13px; pointer-events:none; }.clear-filters { min-height:46px; padding:0 12px; border:1px solid var(--line); border-radius:9px; background:transparent; color:#9eadab; font:500 9px 'DM Mono',monospace; letter-spacing:.06em; cursor:pointer; }.clear-filters:hover { color:#d2e8d6; border-color:#6f9978; }
.report-grid { display:grid; gap:7px; padding-top:14px; }.report-row { display:grid; grid-template-columns:98px minmax(180px,1.5fr) minmax(170px,1fr) 230px; align-items:center; gap:18px; min-height:68px; padding:14px 16px; border:1px solid var(--line); border-radius:11px; background:var(--panel); transition:border-color .18s,background .18s; }.report-row:hover { border-color:#597961; background:var(--panel-2); }.row-date { color:#8e9b99; font:500 10px 'DM Mono',monospace; letter-spacing:.04em; }.row-match { display:grid; gap:3px; }.row-match strong { font-size:14px; }.row-match span { color:var(--muted); font-size:11px; }.report-type { color:#c7e4cc; font:700 12px Manrope,Arial,sans-serif; letter-spacing:-.015em; }.report-type.post { color:var(--green); }.card-actions { display:flex; align-items:center; justify-content:flex-end; gap:13px; min-width:0; }.card-action { color:#9eadab; font:500 9px 'DM Mono',monospace; letter-spacing:.05em; text-decoration:none; white-space:nowrap; }.card-action.primary { color:#d2e8d6; }.card-action.disabled { color:#687775; }.card-action span { margin-left:4px; font-size:12px; }.empty { color:var(--muted); padding:35px 0; }
.card-status { color:#e4c78d; font:500 9px 'DM Mono',monospace; letter-spacing:.06em; white-space:nowrap; }
.competition-select select { color-scheme:dark; }
.competition-select select option { background:#111718; color:#f3f7f5; }
.data-access{display:inline-flex;align-items:center;gap:11px;margin-top:16px;padding:12px 14px;border:1px solid #71957a;border-radius:9px;color:#d2e8d6;font:500 10px 'DM Mono',monospace;letter-spacing:.07em;text-decoration:none;transition:border-color .18s,color .18s,background .18s}.data-access span{font-size:16px;line-height:1}.data-access:hover{border-color:var(--green);background:rgba(152,207,162,.08);color:var(--green)}
@media (max-width:900px) { .hero-actions { gap:14px; flex-direction:column; align-items:stretch; }.pdf-actions { justify-content:stretch; }.pdf-download { flex:1; }.report-count { border-left:0; border-top:1px solid var(--line); padding:11px 0 0; } }
@media (max-width:800px) { .app-shell { padding:0 max(16px,env(safe-area-inset-right)) calc(18px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left)); }.topbar { height:74px; }.brand { width:104px; height:56px; }.brand img { width:405px; }.hero,.season-hero { grid-template-columns:56px minmax(0,1fr); gap:15px; padding:25px 0 22px; }.club-mark { width:54px; height:54px; }.hero h1 { margin-bottom:8px; font-size:clamp(33px,10vw,44px); }.match-meta { font-size:14px; line-height:1.45; }.hero-actions { grid-column:1/-1; width:100%; flex-direction:column; align-items:stretch; gap:0; }.pdf-actions { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); width:100%; }.pdf-download { min-width:0; min-height:48px; padding:0 8px; font-size:9px; letter-spacing:.04em; }.report-count { display:none; }.season-stat { grid-column:1/-1; border-left:0; border-top:1px solid var(--line); padding:14px 0 0; }.workspace { display:block; overflow:visible; border:0; border-radius:0; background:transparent; }.player-panel { padding:0; }.now-playing { padding:13px 0 9px; }.video-frame { width:calc(100% + 32px); margin-left:-16px; border-radius:0; }.video-support { padding:13px 0 0; line-height:1.65; }.player-info { align-items:center; padding:18px 0 0; }.player-info h2 { font-size:27px; line-height:1.04; }.controls button { width:50px; height:50px; border-radius:11px; }.playlist-panel { margin-top:22px; overflow:hidden; border:1px solid var(--line); border-radius:15px; background:var(--panel); }.playlist-heading { min-height:94px; padding:18px; }.playlist-heading h2 { font-size:23px; }.playlist { max-height:none; -webkit-overflow-scrolling:touch; }.playlist-item { min-height:78px; padding:15px 18px; }.item-copy strong { font-size:16px; }.item-copy small { font-size:12px; }.client-label,.private-label { display:none; }.featured-report,.library-head { align-items:flex-start; flex-direction:column; }.featured-report > a { width:100%; justify-content:center; }.filter-panel { grid-template-columns:1fr; }.competition-select { min-height:47px; width:100%; }.report-row { grid-template-columns:1fr; gap:9px; padding:15px; }.card-actions { justify-content:flex-start; padding-top:5px; } footer { align-items:flex-start; flex-direction:column; } }

/* Border interaction system — 2026 refresh */
:root{--green-strong:#00dc22;--ease:cubic-bezier(.22,1,.36,1)}
body{animation:page-in .5s var(--ease) both}
@keyframes page-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.brand img{transition:filter .25s var(--ease),transform .25s var(--ease)}
.brand:hover img{filter:drop-shadow(0 0 12px rgba(0,220,34,.3));transform:scale(1.035)}
.pdf-download{padding:0 18px;border-color:#72977a;border-radius:10px;background:linear-gradient(135deg,rgba(152,207,162,.1),rgba(0,220,34,.03));color:#e6f6e9;font-weight:600;box-shadow:0 9px 24px rgba(0,0,0,.12);transition:transform .25s var(--ease),box-shadow .25s var(--ease),background .25s,border-color .25s,color .25s}
.pdf-download:hover{transform:translateY(-2px);border-color:var(--green-strong);background:linear-gradient(135deg,var(--green),#66c978);color:#071008;box-shadow:0 12px 28px rgba(0,220,34,.16)}
.controls button{background:rgba(255,255,255,.015);transition:transform .2s var(--ease),border-color .2s,background .2s,color .2s}
.controls button:hover{transform:translateY(-2px);background:rgba(152,207,162,.1)}
.playlist-item{transition:background .22s,border-color .22s,transform .22s var(--ease)}
.playlist-item:hover{transform:translateX(3px)}
.playlist-item.active{box-shadow:inset 3px 0 0 var(--green-strong)}
.featured-report{position:relative;overflow:hidden;padding:26px;border-color:#4f7058;box-shadow:0 18px 60px rgba(0,0,0,.16);transition:border-color .3s,box-shadow .3s,transform .3s var(--ease)}
.featured-report::before{position:absolute;inset:0 auto 0 0;width:3px;content:'';background:var(--green-strong);box-shadow:0 0 22px rgba(0,220,34,.48)}
.featured-report:hover{transform:translateY(-2px);border-color:#6da578;box-shadow:0 22px 66px rgba(0,0,0,.24)}
.featured-report>a{min-height:52px;justify-content:center;padding:0 21px;border-color:var(--green);border-radius:10px;background:linear-gradient(135deg,var(--green),#70c980);color:#071008;font-weight:700;box-shadow:0 10px 28px rgba(0,220,34,.12);transition:transform .25s var(--ease),box-shadow .25s var(--ease),filter .25s}
.featured-report>a span{transition:transform .25s var(--ease)}
.featured-report>a:hover{transform:translateY(-2px);filter:brightness(1.07);box-shadow:0 15px 34px rgba(0,220,34,.2)}
.featured-report>a:hover span{transform:translateX(4px)}
.clear-filters{font-weight:600;transition:transform .2s var(--ease),color .2s,border-color .2s,background .2s}
.clear-filters:hover{transform:translateY(-1px);background:rgba(152,207,162,.07)}
.report-grid{gap:8px}
.report-row{grid-template-columns:98px minmax(180px,1.5fr) minmax(170px,1fr) 250px;min-height:76px;border-radius:12px;animation:row-in .42s var(--ease) both;animation-delay:calc(var(--row-index,0) * 45ms);transition:transform .25s var(--ease),border-color .25s,background .25s,box-shadow .25s}
.report-row:hover{transform:translateY(-2px);border-color:#5f8468;box-shadow:0 12px 34px rgba(0,0,0,.18)}
@keyframes row-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.card-actions{gap:8px}
.card-action{display:inline-flex;align-items:center;justify-content:center;min-height:38px;padding:0 12px;border:1px solid var(--line);border-radius:8px;background:rgba(255,255,255,.012);color:#b8c5c1;font-weight:600;transition:transform .2s var(--ease),border-color .2s,background .2s,color .2s}
.card-action.primary{border-color:#688e70;background:rgba(152,207,162,.075);color:#e9f7ec}
.card-action:hover{transform:translateY(-2px);border-color:var(--green);background:var(--green);color:#071008}
.card-action.primary:hover{border-color:var(--green-strong);background:linear-gradient(135deg,var(--green),#70c980)}
.card-action span{margin-left:6px;transition:transform .2s var(--ease)}
.card-action:hover span{transform:translateX(2px)}
.card-action.secondary:hover span{transform:translate(1px,-1px)}
.back-row{margin:18px 0 0}
.back-link{display:inline-flex;align-items:center;gap:10px;min-height:42px;padding:0 14px;border:1px solid var(--line);border-radius:9px;background:rgba(255,255,255,.012);color:#c6d4cf;font:600 9px 'DM Mono',monospace;letter-spacing:.06em;text-decoration:none;transition:transform .2s var(--ease),border-color .2s,background .2s,color .2s}
.back-link span{font-size:15px;transition:transform .2s var(--ease)}
.back-link:hover{transform:translateY(-2px);border-color:var(--green);background:rgba(152,207,162,.08);color:var(--green)}
.back-link:hover span{transform:translateX(-3px)}
@media(max-width:800px){.app-shell{padding-top:0;padding-right:max(16px,env(safe-area-inset-right));padding-bottom:max(18px,env(safe-area-inset-bottom));padding-left:max(16px,env(safe-area-inset-left))}.season-hero{grid-template-columns:52px minmax(0,1fr);gap:12px}.club-mark{width:50px;height:56px}.season-hero h1{font-size:clamp(32px,9.5vw,40px);letter-spacing:-.055em}.season-stat{grid-column:1/-1}.report-row{grid-template-columns:1fr}.card-actions{display:grid;grid-template-columns:minmax(0,1fr) auto;width:100%}.card-action{min-height:44px}.featured-report>a{min-height:50px}.back-link{width:100%;justify-content:center}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}