/* Layout and motion adapted from ui.mp4; the application stays native, RTL and interactive. */
:root {
    --vd-bg:#f3f4f9; --vd-panel:#fff; --vd-raised:#eceef7; --vd-border:#e1e4f0;
    --vd-text:#202540; --vd-muted:#626982; --vd-cyan:#076c94; --vd-cyan-soft:#e6f5fd;
    --vd-purple:#7944d4; --vd-active:#efe9fc; --vd-sidebar:230px;
}
html[data-theme="dark"] {
    --vd-bg:#1d2033; --vd-panel:#25293e; --vd-raised:#2d314b; --vd-border:#35394f;
    --vd-text:#f1f2fa; --vd-muted:#a2aac4; --vd-cyan:#65d8ff; --vd-cyan-soft:#273d56;
    --vd-purple:#b68aff; --vd-active:#383052;
}
body.vd-dashboard {
    --bc-bg:var(--vd-bg); --bc-surface:var(--vd-panel); --bc-soft:var(--vd-raised);
    --bc-text:var(--vd-text); --bc-muted:var(--vd-muted); --bc-line:var(--vd-border);
    --bc-primary:var(--vd-cyan); --bc-hover:#046b94; --bc-tint:var(--vd-cyan-soft);
    background:var(--vd-bg); color:var(--vd-text); font-size:13px;
}
.vd-dashboard .vd-frame { min-height:100vh; }
.vd-app { position:relative; min-height:100vh; }
.vd-sidebar { position:fixed; inset-block:0; inset-inline-start:0; width:var(--vd-sidebar); padding:27px 19px 20px; border-inline-end:1px solid var(--vd-border); background:var(--vd-bg); overflow-y:auto; overscroll-behavior:contain; z-index:85; scrollbar-width:thin; scrollbar-color:var(--vd-border) transparent; }
.vd-sidebar-brand { display:flex; gap:10px; justify-content:space-between; align-items:center; margin-bottom:32px; min-height:40px; }
.vd-brand { display:flex; align-items:center; justify-content:center; flex:1; min-width:0; max-width:calc(100% - 38px); min-height:36px; padding:7px 9px; border-radius:6px; background:#fff; }
.vd-brand-logo { display:block; width:100%; max-width:148px; height:auto; }
.vd-brand-symbol { display:none; width:32px; height:auto; }
.vd-mobile-brand { display:none; flex-shrink:0; }
.vd-mobile-brand-wordmark { display:block; width:112px; height:auto; }
.vd-mobile-brand-symbol { display:none; width:29px; height:27px; }
.vd-collapse,.vd-drawer-close { display:grid; place-items:center; width:28px; height:32px; border:0; background:transparent; color:var(--vd-muted); font-size:20px; padding:0; }
.vd-collapse:hover,.vd-drawer-close:hover { color:var(--vd-cyan); }
.vd-drawer-close { display:none; }
.vd-side-nav { display:flex; flex-direction:column; gap:6px; padding-bottom:27px; border-bottom:1px solid var(--vd-border); }
.vd-side-nav a { display:flex; align-items:center; gap:12px; padding:10px 12px; min-height:43px; color:var(--vd-muted); font-size:11px; font-weight:500; border-radius:7px; position:relative; }
.vd-side-nav a>i { font-size:20px; flex-shrink:0; }
.vd-side-nav a>small { font-size:8px; color:var(--vd-purple); margin-inline-start:auto; background:var(--vd-panel); padding:1px 5px; border-radius:4px; }
.vd-side-nav a:hover { background:var(--vd-raised); color:var(--vd-text); }
.vd-side-nav a[aria-current] { background:var(--vd-active); color:var(--vd-cyan); font-weight:700; }
.vd-side-nav a[aria-current]:after { content:""; position:absolute; inset-inline-start:0; top:9px; bottom:9px; width:3px; background:var(--vd-purple); border-radius:3px; }
.vd-filters { padding:24px 2px 0; }
.vd-filter-heading { display:flex; align-items:center; justify-content:space-between; margin-bottom:17px; }
.vd-filter-heading h2 { color:var(--vd-muted); font-size:11px; margin:0; font-weight:500; }
.vd-filter-heading a { color:#bc4773; font-size:10px; }
html[data-theme="dark"] .vd-filter-heading a { color:#f395bc; }
.vd-filters>label { display:block; background:var(--vd-panel); border:1px solid var(--vd-border); padding:8px 11px 6px; margin-bottom:9px; border-radius:6px; color:var(--vd-muted); font-size:9px; }
.vd-filters select { display:block; width:100%; min-height:28px; color:var(--vd-text); background:transparent; border:0; font-size:11px; cursor:pointer; padding:2px 0; }
.vd-filters select:disabled { opacity:.4; cursor:not-allowed; }
.vd-filters select option { color:var(--vd-text); background:var(--vd-panel); }
.vd-dashboard .bc-button,html[data-theme="dark"] .vd-dashboard .bc-button { background:linear-gradient(115deg,#087eaf,#07699d); border-color:transparent; color:#fff!important; box-shadow:inset 0 1px 0 #ffffff25; border-radius:6px; }
.vd-dashboard .bc-button:hover { background:linear-gradient(115deg,#0878a9,#06618f); box-shadow:0 5px 18px #00b9ef20; }
.vd-dashboard .bc-button-outline,html[data-theme="dark"] .vd-dashboard .bc-button-outline { background:transparent; border:1px solid var(--vd-border); color:var(--vd-muted)!important; box-shadow:none; }
.vd-dashboard .bc-button-outline:hover { background:var(--vd-raised); border-color:var(--vd-cyan); color:var(--vd-cyan)!important; }
.vd-dashboard .vd-apply-filters { width:100%; font-size:10px; min-height:36px; margin-top:4px; }
.vd-sidebar-bottom { margin-top:30px; padding-top:20px; border-top:1px solid var(--vd-border); }
.vd-sidebar-caption { color:var(--vd-muted); display:block; font-size:9px; margin-bottom:13px; }
.vd-sidebar-bottom>a { display:flex; gap:8px; align-items:center; font-size:10px; }
.vd-sidebar-bottom>a>span:nth-child(2) { flex:1; }
.vd-sidebar-bottom small { display:block; font-size:8px; color:var(--vd-muted); }
.vd-support-icon { display:grid; place-items:center; color:var(--vd-cyan); width:31px; height:31px; background:var(--vd-cyan-soft); border-radius:50%; font-size:23px; }
.vd-topbar { position:sticky; top:0; z-index:75; margin-inline-start:var(--vd-sidebar); padding:22px 30px 17px; min-height:82px; display:flex; align-items:center; gap:18px; background:var(--vd-bg); border-bottom:1px solid var(--vd-border); }
.vd-global-search { display:flex; align-items:center; gap:10px; max-width:510px; flex:1; min-width:140px; padding:7px 12px; border:1px solid var(--vd-border); background:var(--vd-panel); border-radius:7px; margin:0; }
.vd-global-search>i { color:var(--vd-cyan); font-size:19px; }
.vd-global-search input { width:100%; min-width:0; min-height:25px; border:0; background:transparent; color:var(--vd-text); font-size:11px; outline:0; }
.vd-global-search:focus-within { border-color:var(--vd-cyan); box-shadow:0 0 0 2px var(--vd-cyan-soft); }
.vd-global-search input::placeholder { color:var(--vd-muted); }
.vd-global-search kbd { color:var(--vd-muted); background:var(--vd-raised); border:1px solid var(--vd-border); padding:0 5px; font-size:10px; }
.vd-global-search button { border:0; padding:0; color:var(--vd-cyan); background:transparent; }
.vd-topbar-actions { display:flex; gap:14px; align-items:center; margin-inline-start:auto; }
.vd-dashboard .bc-icon-button { width:34px; height:34px; background:var(--vd-panel); border:1px solid var(--vd-border); }
.vd-dashboard .bc-icon-button>i { font-size:18px; }
.vd-account { display:flex; gap:8px; align-items:center; font-size:10px; white-space:nowrap; }
.vd-account>i { font-size:28px; color:var(--vd-purple); }
.vd-showcase-toggle { display:grid; place-items:center; width:32px; height:34px; color:var(--vd-muted)!important; font-size:21px; }
.vd-showcase-toggle:hover { color:var(--vd-cyan)!important; }
.vd-mobile-menu { display:none!important; }
.vd-dashboard .vd-main { margin-inline-start:var(--vd-sidebar); padding:0 30px 30px; min-height:calc(100vh - 170px); width:auto; }
.vd-categories { display:flex; gap:8px; align-items:center; overflow-x:auto; padding:18px 0 17px; scrollbar-width:thin; scrollbar-color:var(--vd-border) transparent; }
.vd-game-chip { display:inline-flex; align-items:center; gap:7px; padding:5px 15px; border:1px solid transparent; border-radius:6px; color:var(--vd-muted)!important; background:var(--vd-raised); font-size:11px; white-space:nowrap; line-height:1.8; flex-shrink:0; }
.vd-game-chip i { font-size:15px; }
.vd-game-chip:hover { border-color:var(--vd-purple); color:var(--vd-text)!important; }
.vd-game-chip.is-active { background:linear-gradient(115deg,#a05bea,#7440c8); color:#fff!important; box-shadow:0 3px 13px #9054df22; }
.vd-page-heading { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:18px 0 25px; }
.vd-overline { font-size:9px; color:var(--vd-cyan); letter-spacing:.4px; }
.vd-page-heading h1 { font-size:27px; font-weight:800; letter-spacing:-.6px; margin:4px 0; line-height:1.6; }
.vd-page-heading h1 em { color:var(--vd-text); font-style:normal; }
.vd-page-heading p { font-size:11px; color:var(--vd-muted); margin:7px 0 0; }
.vd-heading-actions { display:flex; gap:12px; align-items:center; }
.vd-replay,.vd-filter-button { display:flex; gap:7px; align-items:center; color:var(--vd-muted); border:1px solid var(--vd-border); background:var(--vd-panel); border-radius:6px; padding:7px 11px; font-size:10px!important; min-height:36px; white-space:nowrap; }
.vd-replay i { font-size:17px; color:var(--vd-cyan); }
.vd-replay:hover { border-color:var(--vd-cyan); }
.vd-filter-button { display:none; }
.vd-toolbar { display:flex; gap:20px; align-items:center; justify-content:space-between; border-bottom:1px solid var(--vd-border); padding-bottom:14px; }
.vd-dashboard .bc-status-tabs { background:transparent; border:0; border-radius:0; padding:0; gap:22px; }
.vd-dashboard .bc-status-tab { color:var(--vd-muted); padding:6px 0 11px; min-height:36px; border-radius:0; font-size:10px!important; position:relative; gap:7px; }
.vd-dashboard .bc-status-tab span { background:var(--vd-raised); color:var(--vd-muted); min-width:19px; height:18px; font-size:8px; border-radius:4px; }
.vd-dashboard .bc-status-tab.is-active,html[data-theme="dark"] .vd-dashboard .bc-status-tab.is-active { background:transparent; color:var(--vd-text); font-weight:700; }
.vd-dashboard .bc-status-tab.is-active:after { content:""; position:absolute; bottom:-15px; inset-inline:0; height:2px; background:var(--vd-cyan); }
.vd-dashboard .bc-status-tab.is-active span { color:var(--vd-cyan); background:var(--vd-cyan-soft); }
.vd-sort { display:flex; align-items:center; gap:7px; color:var(--vd-muted); font-size:10px; white-space:nowrap; margin:0; }
.vd-sort>i { color:var(--vd-cyan); font-size:17px; }
.vd-sort select { max-width:170px; padding:5px 7px; border:0; border-radius:5px; color:var(--vd-text); background:var(--vd-panel); cursor:pointer; font-size:10px; }
.vd-results-caption { display:flex; justify-content:space-between; align-items:center; gap:15px; padding:18px 0 14px; }
.vd-results-caption h2 { font-size:11px; color:var(--vd-muted); font-weight:500; margin:0; }
.vd-results-caption p { font-size:10px; color:var(--vd-muted); margin:0; }
.vd-dashboard .vd-grid { grid-template-columns:repeat(4,minmax(0,1fr)); gap:18px; align-items:stretch; }
.vd-dashboard .vd-tournament { border:1px solid var(--vd-border); border-radius:9px; background:var(--vd-panel); box-shadow:none; }
.vd-dashboard .vd-tournament:hover { border-color:var(--vd-cyan); box-shadow:0 10px 25px #00000012; transform:translateY(-4px); }
.vd-dashboard .bc-card-cover { height:145px; }
.vd-dashboard .bc-card-cover:after { content:""; position:absolute; inset:0; background:linear-gradient(transparent 65%,#171b3025); pointer-events:none; }
.vd-format-badge { position:absolute; bottom:7px; inset-inline-end:8px; z-index:1; font-size:9px; padding:1px 8px; border-radius:3px; background:#343855e8; color:#e3e6ff; border-inline-start:2px solid #29bdf0; }
.vd-star { position:absolute; top:8px; inset-inline-start:8px; display:grid; place-items:center; width:26px; height:26px; border-radius:4px; background:#20243fce; color:#ffd35b; font-size:16px; }
.vd-dashboard .bc-card-content { padding:14px; }
.vd-dashboard .bc-card-game { font-size:9px; color:var(--vd-cyan); }
.vd-dashboard .bc-card-content h3 { font-size:13px; font-weight:700; line-height:1.85; margin:2px 0 5px; }
.vd-date { display:flex; gap:6px; align-items:center; font-size:9px; color:var(--vd-muted); margin-bottom:15px; }
.vd-date i { font-size:13px; }
.vd-card-facts { display:flex; flex-direction:column; gap:6px; margin-top:auto; }
.vd-card-facts>span { display:flex; gap:6px; align-items:center; color:var(--vd-muted); font-size:9px; }
.vd-card-facts i { color:var(--vd-cyan); font-size:14px; flex-shrink:0; }
.vd-dashboard .bc-card-bottom { display:flex; align-items:center; justify-content:space-between; padding-top:14px; margin-top:12px; border-top:1px solid var(--vd-border); gap:5px; flex-wrap:nowrap; }
.vd-dashboard .bc-card-bottom .bc-button { min-height:33px; font-size:9px; padding:5px 9px; min-width:0; }
.vd-dashboard .bc-card-bottom .bc-button>i { font-size:14px; }
.vd-dashboard .bc-card-bottom>span { display:block; text-align:end; font-size:11px; color:var(--vd-text); }
.vd-dashboard .bc-card-bottom>span>i { font-size:12px; color:var(--vd-muted); margin-inline-end:4px; }
.vd-dashboard .bc-card-bottom small { font-size:8px; display:block; color:var(--vd-muted); }
.vd-promo { position:relative; display:flex; flex-direction:column; justify-content:center; padding:25px 22px; border-radius:9px; background:linear-gradient(155deg,#0876b7,#07669f); color:#fff; overflow:hidden; min-height:340px; isolation:isolate; }
.vd-promo-symbol { position:absolute; inset-inline-end:18px; top:17px; font-size:24px; color:#b2edff; opacity:.6; }
.vd-promo-kicker { color:#fff; font-size:10px; margin-bottom:8px; }
.vd-promo h2 { font-size:27px; font-weight:800; color:#fff; line-height:1.6; margin:0 0 15px; }
.vd-promo p { color:#fff; font-size:10px; margin-bottom:20px; line-height:2; }
.vd-promo>a { display:flex; align-items:center; justify-content:space-between; gap:6px; border:1px solid #bce6ff60; color:#fff!important; border-radius:5px; padding:7px 9px; font-size:9px; position:relative; z-index:1; }
.vd-promo>a:hover { background:#ffffff17; }
.vd-promo-orbit { width:210px; height:210px; border:1px solid #ffffff15; border-radius:50%; position:absolute; bottom:-125px; inset-inline-start:-70px; z-index:-1; box-shadow:0 0 0 25px #ffffff05,0 0 0 50px #ffffff04; }
.vd-bottom-note { display:flex; align-items:center; gap:9px; color:var(--vd-muted); border-top:1px solid var(--vd-border); margin-top:30px; padding:19px 0 0; font-size:10px; }
.vd-bottom-note>i { color:var(--vd-cyan); font-size:18px; }
.vd-bottom-note a { color:var(--vd-cyan); display:flex; gap:8px; align-items:center; margin-inline-start:auto; }
.vd-footer { margin-inline-start:var(--vd-sidebar); padding:17px 30px 22px; display:flex; flex-wrap:wrap; align-items:center; gap:16px 25px; border-top:1px solid var(--vd-border); color:var(--vd-muted); font-size:9px; }
.vd-footer nav { display:flex; gap:17px; margin-inline-start:auto; }
.vd-host { display:flex; align-items:center; gap:8px; font-size:8px; }
.vd-host img { object-fit:contain; }
.vd-dashboard .bc-more-menu { border-radius:8px; }
.vd-dashboard .bc-empty { margin-top:15px; border-radius:9px; }
.vd-sidebar-backdrop { position:fixed; inset:0; border:0; background:#0a0b1e99; z-index:99; backdrop-filter:blur(3px); }
.vd-sidebar-collapsed { --vd-sidebar:80px; }
.vd-sidebar-collapsed .vd-sidebar { padding-inline:12px; }
.vd-sidebar-collapsed .vd-sidebar-brand { flex-direction:column; gap:6px; margin-bottom:20px; }
.vd-sidebar-collapsed .vd-brand { flex:none; max-width:none; width:40px; padding:0; background:transparent; }
.vd-sidebar-collapsed .vd-brand-logo { display:none; }
.vd-sidebar-collapsed .vd-brand-symbol { display:block; }
.vd-sidebar-collapsed .vd-side-nav span,.vd-sidebar-collapsed .vd-side-nav small,.vd-sidebar-collapsed .vd-filters,.vd-sidebar-collapsed .vd-sidebar-bottom { display:none; }
.vd-sidebar-collapsed .vd-side-nav a { justify-content:center; padding-inline:8px; }
.vd-sidebar-collapsed .vd-collapse { transform:rotate(180deg); }
/* The optional tablet stage reproduces the reference's camera movement, then settles. */
body.vd-showcase { background:#646c87; padding:60px 45px; perspective:1800px; }
.vd-showcase .vd-frame { position:relative; max-width:1500px; min-height:0; margin:auto; border:17px solid #0c0e13; border-radius:36px; background:var(--vd-bg); box-shadow:0 28px 65px #0a0d2855,0 0 0 2px #a3aabe60,inset 0 0 0 1px #ffffff12; overflow:clip; transform-origin:50% 60%; }
.vd-showcase .vd-app { height:calc(100vh - 154px); min-height:560px; overflow:auto; position:relative; scrollbar-width:thin; }
.vd-showcase .vd-sidebar { position:absolute; }
.vd-showcase .vd-topbar { position:relative; }
.vd-showcase .vd-main { min-height:0; }
.vd-showcase .vd-footer { display:none; }
.vd-showcase.vd-device-motion .vd-frame { animation:vd-device-flight 6.6s cubic-bezier(.2,.7,.3,1) both; }
@keyframes vd-device-flight {
    0% { transform:translateY(85px) rotateX(9deg) rotateY(-11deg) rotateZ(1.5deg) scale(.86); opacity:.2; }
    18% { transform:translateY(-12px) rotateX(3deg) rotateY(5deg) rotateZ(-1deg) scale(.99); opacity:1; }
    50% { transform:translateY(0) rotateX(0) rotateY(0) rotateZ(0) scale(1); opacity:1; }
    78% { transform:translateY(-5px) rotateX(1deg) rotateY(-2deg) rotateZ(.3deg) scale(1); }
    100% { transform:none; opacity:1; }
}
@keyframes vd-ui-in { from { opacity:0; transform:translateY(14px); } to { opacity:1; transform:none; } }
@keyframes vd-nav-in { from { opacity:0; transform:translateX(15px); } to { opacity:1; transform:none; } }
@keyframes vd-card-in { from { opacity:0; transform:perspective(800px) translateY(30px) rotateY(-9deg) scale(.94); } to { opacity:1; transform:none; } }
.vd-ui-enter { animation:vd-ui-in .62s cubic-bezier(.2,.8,.2,1) both; animation-delay:var(--vd-delay,0ms); }
.vd-nav-enter { animation:vd-nav-in .55s cubic-bezier(.2,.8,.2,1) both; animation-delay:var(--vd-delay,0ms); }
.vd-card-enter { animation:vd-card-in .72s cubic-bezier(.16,.8,.2,1) both; animation-delay:var(--vd-delay,0ms); }
.vd-filter-enter { animation:vd-ui-in .28s ease-out both; animation-delay:var(--vd-delay,0ms); }
@media (min-width:1700px) { .vd-dashboard .vd-grid { grid-template-columns:repeat(5,minmax(0,1fr)); } .vd-dashboard .bc-card-cover { height:170px; } }
@media (max-width:1250px) { :root { --vd-sidebar:210px; } .vd-dashboard .vd-grid { grid-template-columns:repeat(3,minmax(0,1fr)); } .vd-topbar { padding-inline:23px; } .vd-dashboard .vd-main { padding-inline:23px; } .vd-promo { min-height:310px; } .vd-sidebar-collapsed { --vd-sidebar:80px; } }
@media (max-width:1020px) { .vd-topbar-actions { gap:9px; } .vd-account span { display:none; } .vd-dashboard .vd-grid { gap:14px; } .vd-dashboard .bc-card-content { padding:11px; } .vd-dashboard .bc-card-cover { height:125px; } .vd-toolbar { gap:12px; } .vd-dashboard .bc-status-tabs { gap:15px; } .vd-sort>span { display:none; } .vd-page-heading h1 { font-size:23px; } }
@media (max-width:900px) {
    .vd-topbar,.vd-dashboard .vd-main,.vd-footer { margin-inline-start:0; }
    .vd-topbar { gap:12px; padding-inline:18px; } .vd-global-search { min-width:90px; }
    .vd-mobile-brand-wordmark { width:100px; }
    .vd-sidebar { transform:translateX(105%); transition:transform .28s ease; width:280px; padding-inline:19px; z-index:110; }
    .vd-drawer-open .vd-sidebar { transform:none; }
    .vd-sidebar-collapsed .vd-side-nav span,.vd-sidebar-collapsed .vd-side-nav small,.vd-sidebar-collapsed .vd-filters,.vd-sidebar-collapsed .vd-sidebar-bottom { display:revert; }
    .vd-sidebar-collapsed .vd-brand { flex:1; max-width:calc(100% - 38px); width:auto; padding:7px 9px; background:#fff; }
    .vd-sidebar-collapsed .vd-brand-logo { display:block; } .vd-sidebar-collapsed .vd-brand-symbol { display:none; }
    .vd-mobile-brand { display:flex; align-items:center; justify-content:center; padding:6px 8px; background:#fff; border-radius:5px; }
    .vd-sidebar-collapsed .vd-sidebar-brand { flex-direction:row; } .vd-sidebar-collapsed .vd-side-nav a { justify-content:initial; }
    .vd-drawer-close { display:grid; } .vd-collapse { display:none; } .vd-mobile-menu { display:flex!important; }
    .vd-filter-button { display:flex; } .vd-dashboard .vd-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
    .vd-drawer-open { overflow:hidden; }
    body.vd-showcase { padding:30px 18px; } .vd-showcase .vd-frame { border-width:10px; border-radius:24px; } .vd-showcase .vd-app { height:calc(100vh - 80px); min-height:520px; } .vd-showcase .vd-sidebar { position:fixed; }
    .vd-showcase .vd-showcase-toggle { display:none; }
}
@media (max-width:650px) { .vd-dashboard .vd-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .vd-promo { min-height:280px; } .vd-promo h2 { font-size:24px; } .vd-sort select { max-width:115px; } .vd-replay span { display:none; } }
@media (max-width:600px) {
    .vd-dashboard .vd-topbar { padding:14px 16px; gap:9px; min-height:70px; }
    .vd-mobile-brand { background:transparent; padding:0; }
    .vd-mobile-brand-wordmark { display:none; } .vd-mobile-brand-symbol { display:block; }
    .vd-dashboard .vd-main { padding:0 16px 20px; }
    .vd-topbar .vd-showcase-toggle,.vd-topbar .bc-more { display:none; } .vd-topbar-actions { gap:8px; } .vd-account>i { font-size:25px; }
    .vd-global-search { min-width:90px; padding:6px 8px; gap:6px; }
    .vd-global-search input { font-size:10px; } .vd-global-search kbd { display:none; } .vd-global-search>i { font-size:15px; }
    .vd-dashboard .bc-icon-button { width:31px; height:31px; } .vd-global-search input { min-height:23px; }
    .vd-categories { padding:16px 0 12px; gap:6px; margin-inline-end:-16px; padding-inline-end:16px; }
    .vd-game-chip { font-size:10px; padding:5px 12px; }
    .vd-page-heading { padding:13px 0 20px; align-items:flex-start; gap:8px; }
    .vd-page-heading h1 { font-size:21px; max-width:220px; line-height:1.8; } .vd-overline { font-size:8px; }
    .vd-page-heading p { font-size:10px; max-width:230px; margin-top:4px; }
    .vd-heading-actions { gap:6px; padding-top:6px; } .vd-replay,.vd-filter-button { min-height:32px; padding:5px 7px; font-size:9px!important; }
    .vd-filter-button { font-size:0!important; } .vd-filter-button i { font-size:17px; }
    .vd-toolbar { flex-wrap:wrap; gap:12px; padding-bottom:11px; }
    .vd-dashboard .bc-status-tabs { width:100%; gap:0; justify-content:space-between; }
    .vd-dashboard .bc-status-tab { font-size:9px!important; gap:5px; padding:5px 0 9px; }
    .vd-dashboard .bc-status-tab.is-active:after { bottom:-1px; }
    .vd-sort { margin-inline-start:auto; font-size:9px; } .vd-sort select { max-width:165px; padding:4px 8px; font-size:9px; }
    .vd-sort>span { display:inline; } .vd-results-caption { padding:15px 0 12px; }
    .vd-dashboard .vd-grid { grid-template-columns:1fr; gap:13px; }
    .vd-dashboard .vd-tournament { display:grid; grid-template-columns:105px minmax(0,1fr); gap:0 12px; padding:11px; }
    .vd-dashboard .bc-card-cover { height:125px; grid-column:1; grid-row:1/5; border-radius:6px; }
    .vd-dashboard .bc-card-content { display:contents; }
    .vd-dashboard .bc-card-game { grid-column:2; font-size:9px; }
    .vd-dashboard .bc-card-content h3 { grid-column:2; font-size:12px; margin:2px 0 4px; }
    .vd-date { grid-column:2; font-size:8px; margin-bottom:6px; }
    .vd-card-facts { grid-column:2; gap:5px; margin:0; } .vd-card-facts>span { font-size:8px; }
    .vd-dashboard .bc-card-bottom { grid-column:1/-1; margin-top:11px; padding-top:10px; }
    .vd-dashboard .bc-card-bottom .bc-button { min-height:34px; padding-inline:13px; font-size:10px; }
    .vd-format-badge { font-size:8px; bottom:5px; inset-inline-end:5px; padding:1px 6px; } .vd-star { width:22px; height:22px; top:5px; inset-inline-start:5px; font-size:13px; }
    .vd-promo { min-height:190px; padding:20px; display:grid; grid-template-columns:1fr 1fr; gap:8px 18px; align-items:center; }
    .vd-promo-kicker { grid-column:1; margin:0; } .vd-promo h2 { grid-column:1; grid-row:2/4; font-size:24px; margin:0; line-height:1.5; }
    .vd-promo h2 br:nth-child(2) { display:none; } .vd-promo p { grid-column:2; grid-row:1/3; font-size:10px; margin:0; } .vd-promo>a { grid-column:2; font-size:8px; } .vd-promo-symbol { display:none; }
    .vd-bottom-note { flex-wrap:wrap; font-size:9px; gap:7px; margin-top:23px; } .vd-bottom-note>a { width:100%; margin:0 25px 0 0; font-size:9px; }
    .vd-footer { margin:0; padding:20px 16px; font-size:8px; gap:14px; } .vd-footer nav { margin:0; } .vd-host { width:100%; }
    .vd-dashboard .bc-mobile-nav { background:var(--vd-panel); }
    body.vd-showcase { padding:0 0 calc(76px + env(safe-area-inset-bottom)); perspective:none; background:var(--vd-bg); }
    .vd-showcase .vd-frame { border:0; border-radius:0; box-shadow:none; overflow:visible; }
    .vd-showcase .vd-app { height:auto; min-height:100vh; overflow:visible; }
    .vd-showcase .vd-footer { display:flex; } .vd-showcase .vd-topbar { position:sticky; }
    .vd-showcase.vd-device-motion .vd-frame { animation:none; }
}
@media (prefers-reduced-motion:reduce) {
    .vd-dashboard *, .vd-dashboard *:before, .vd-dashboard *:after { animation:none!important; transition:none!important; }
    .vd-showcase .vd-frame { transform:none!important; opacity:1!important; }
}
@media print { .vd-sidebar,.vd-topbar,.bc-mobile-nav,.vd-heading-actions,.vd-footer { display:none!important; } .vd-dashboard .vd-main { margin:0; padding:0; } .vd-dashboard .vd-grid { grid-template-columns:repeat(2,1fr); } .vd-dashboard * { animation:none!important; } }