:root {
  --v2-bg: #051424;
  --v2-bg-deep: #010f1f;
  --v2-surface: #0d1c2d;
  --v2-surface-high: #122131;
  --v2-surface-bright: #273647;
  --v2-text: #d4e4fa;
  --v2-text-strong: #f4f7ff;
  --v2-muted: #8a93a3;
  --v2-muted-light: #aeb9d0;
  --v2-lime: #c3f400;
  --v2-lime-soft: rgba(195, 244, 0, .13);
  --v2-amber: #f0c674;
  --v2-amber-soft: rgba(240, 198, 116, .14);
  --v2-red: #e06c75;
  --v2-red-soft: rgba(224, 108, 117, .14);
  --v2-line: rgba(255, 255, 255, .08);
  --v2-line-strong: rgba(255, 255, 255, .16);
  --v2-mono: ui-monospace, "SFMono-Regular", Menlo, Monaco, Consolas, monospace;
  --v2-sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { min-width: 320px; background: var(--v2-bg); }
body { margin: 0; min-width: 320px; min-height: 100vh; color: var(--v2-text); background: radial-gradient(circle at 80% -20%, rgba(39, 54, 71, .42), transparent 34rem), var(--v2-bg); font: 14px/1.45 var(--v2-sans); }
button, a { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; font: inherit; }
a { color: inherit; }
h1, h2, h3, p { margin: 0; }

.v2-app { display: grid; grid-template-columns: 240px minmax(0, 1fr); min-height: 100vh; }
.v2-sidebar { position: sticky; top: 0; display: flex; flex-direction: column; width: 240px; height: 100vh; padding: 22px 16px; background: rgba(1, 15, 31, .88); border-right: 1px solid var(--v2-line); }
.v2-brand { display: flex; align-items: center; gap: 11px; margin: 0 8px 48px; color: var(--v2-text-strong); font-size: 14px; font-weight: 750; text-decoration: none; }
.v2-brand-mark { display: grid; place-items: center; width: 30px; height: 30px; color: var(--v2-bg-deep); background: var(--v2-lime); border-radius: 9px; font-size: 17px; font-weight: 900; }
.v2-nav-label, .v2-eyebrow, .v2-meta-label { color: var(--v2-muted); font-size: 10px; font-weight: 800; letter-spacing: .11em; text-transform: uppercase; }
.v2-nav-label { margin: 0 12px 10px; }
.v2-nav-list { display: grid; gap: 5px; }
.v2-nav-group { display: grid; gap: 3px; }
.v2-nav-item { display: flex; align-items: center; gap: 11px; min-height: 42px; padding: 0 12px; color: var(--v2-muted-light); border: 1px solid transparent; border-radius: 8px; text-decoration: none; font-size: 13px; font-weight: 650; }
.v2-nav-item:hover { color: var(--v2-text-strong); background: rgba(255, 255, 255, .04); }
.v2-nav-item--active { color: var(--v2-bg-deep); background: var(--v2-lime); border-color: var(--v2-lime); }
.v2-nav-parent { width: 100%; color: var(--v2-muted-light); background: transparent; font: inherit; text-align: left; }
.v2-nav-parent--active { color: var(--v2-lime); background: var(--v2-lime-soft); border-color: rgba(195, 244, 0, .2); }
.v2-nav-icon { display: grid; place-items: center; width: 18px; flex: 0 0 18px; color: currentColor; font-size: 16px; line-height: 1; }
.v2-nav-name { flex: 1; }
.v2-nav-arrow { color: var(--v2-muted); font-size: 13px; transition: transform 160ms ease, color 160ms ease; }
.v2-nav-parent[aria-expanded="true"] .v2-nav-arrow { color: var(--v2-lime); transform: rotate(90deg); }
.v2-nav-children { display: none; gap: 3px; padding: 3px 0 5px 12px; }
.v2-nav-children--open { display: grid; }
.v2-nav-child { display: flex; align-items: center; gap: 10px; min-height: 36px; padding: 0 12px; color: var(--v2-muted); border: 1px solid transparent; border-radius: 7px; text-decoration: none; font-size: 12px; font-weight: 600; }
.v2-nav-child:hover { color: var(--v2-text-strong); background: rgba(255, 255, 255, .04); }

.v2-sidebar-footer { display: grid; gap: 14px; margin-top: auto; padding: 16px 12px 0; border-top: 1px solid var(--v2-line); }
.v2-system-status { display: flex; align-items: center; gap: 8px; color: var(--v2-muted); font-size: 11px; }
.v2-status-dot { width: 7px; height: 7px; background: var(--v2-lime); border-radius: 50%; box-shadow: 0 0 0 4px rgba(195, 244, 0, .1); }
.v2-logout { padding: 0; color: var(--v2-muted); background: transparent; border: 0; font-size: 11px; text-align: left; }
.v2-logout:hover { color: var(--v2-red); }
.v2-sidebar-backdrop { display: none; }

.v2-workspace { min-width: 0; }
.v2-workspace--full { grid-column: 1 / -1; }
.v2-app--no-sidebar { grid-template-columns: minmax(0, 1fr); }
.v2-topbar { display: flex; align-items: center; justify-content: space-between; min-height: 74px; padding: 0 clamp(20px, 4vw, 56px); border-bottom: 1px solid var(--v2-line); background: rgba(5, 20, 36, .64); backdrop-filter: blur(14px); }
.v2-mobile-menu { display: none; width: 38px; height: 38px; color: var(--v2-muted-light); background: transparent; border: 1px solid var(--v2-line); border-radius: 8px; }
.v2-breadcrumb { display: flex; align-items: center; gap: 9px; color: var(--v2-muted); font-size: 12px; }
.v2-breadcrumb strong { color: var(--v2-text-strong); font-weight: 650; }
.v2-user { display: flex; align-items: center; gap: 9px; color: var(--v2-muted-light); font-size: 12px; }
.v2-user-avatar { display: grid; place-items: center; width: 28px; height: 28px; color: var(--v2-lime); background: var(--v2-lime-soft); border: 1px solid rgba(195, 244, 0, .3); border-radius: 50%; font-size: 10px; font-weight: 800; }

.v2-content { width: min(1440px, 100%); margin: 0 auto; padding: clamp(26px, 4vw, 52px) clamp(20px, 4vw, 56px) 54px; }
.v2-alert { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 22px; padding: 12px 15px; color: var(--v2-red); background: var(--v2-red-soft); border: 1px solid rgba(224, 108, 117, .35); border-radius: 8px; }
.v2-alert div { display: flex; align-items: baseline; gap: 10px; }
.v2-alert strong { color: var(--v2-text-strong); font-size: 12px; }
.v2-alert span { font-size: 12px; }
.v2-alert a { color: var(--v2-red); font-size: 11px; font-weight: 750; text-decoration: none; white-space: nowrap; }
.v2-alert a:hover { text-decoration: underline; }
.v2-page-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 28px; }
.v2-page-heading h1 { margin-top: 6px; color: var(--v2-text-strong); font-size: clamp(25px, 3vw, 34px); letter-spacing: -.035em; line-height: 1.1; }
.v2-page-summary { max-width: 620px; margin-top: 10px; color: var(--v2-muted); font-size: 13px; }
.v2-secondary-button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 38px; padding: 0 13px; color: var(--v2-bg-deep); background: var(--v2-lime); border: 1px solid var(--v2-lime); border-radius: 7px; font-size: 12px; font-weight: 750; text-decoration: none; white-space: nowrap; }
.v2-secondary-button:hover { background: #d5ff35; }
.v2-dashboard-grid { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(360px, .92fr); gap: 20px; align-items: start; }
.v2-panel { min-width: 0; overflow: hidden; background: rgba(13, 28, 45, .82); border: 1px solid var(--v2-line); border-top-color: rgba(255, 255, 255, .16); border-radius: 12px; box-shadow: 0 22px 60px rgba(0, 0, 0, .18); }
.v2-panel-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 20px 22px 17px; border-bottom: 1px solid var(--v2-line); }
.v2-panel-header h2 { display: flex; align-items: center; gap: 10px; color: var(--v2-text-strong); font-size: 17px; letter-spacing: -.015em; }
.v2-panel-header p { margin-top: 4px; color: var(--v2-muted); font-size: 11px; }
.v2-panel-icon { color: var(--v2-lime); font-size: 19px; }
.v2-panel-count { flex: 0 0 auto; color: var(--v2-muted); font-family: var(--v2-mono); font-size: 11px; }
.v2-log-header-actions { display: flex; align-items: center; gap: 10px; }
.v2-demo-button { padding: 5px 8px; color: var(--v2-lime); background: transparent; border: 1px solid rgba(195, 244, 0, .35); border-radius: 5px; font-size: 10px; font-weight: 750; white-space: nowrap; }
.v2-demo-button:hover { color: var(--v2-bg-deep); background: var(--v2-lime); }

.v2-accordion-list { display: grid; gap: 8px; padding: 12px; }
.v2-schedule { overflow: hidden; background: rgba(5, 20, 36, .58); border: 1px solid rgba(255, 255, 255, .07); border-radius: 9px; }
.v2-schedule:hover { border-color: rgba(255, 255, 255, .16); }
.v2-schedule[open] { border-color: rgba(195, 244, 0, .34); box-shadow: inset 0 0 22px rgba(195, 244, 0, .025); }
.v2-schedule summary { display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto; align-items: center; gap: 14px; min-height: 83px; padding: 15px 16px; list-style: none; cursor: pointer; }
.v2-schedule summary::-webkit-details-marker { display: none; }
.v2-schedule summary:focus-visible, .v2-nav-item:focus-visible, .v2-nav-child:focus-visible, .v2-mobile-menu:focus-visible, a:focus-visible, button:focus-visible { outline: 2px solid var(--v2-lime); outline-offset: 2px; }
.v2-schedule-main { min-width: 0; }
.v2-schedule-title, .v2-schedule-subtitle { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.v2-schedule-title { color: var(--v2-text-strong); font-size: 14px; font-weight: 700; }
.v2-schedule-subtitle { margin-top: 4px; color: var(--v2-muted); font-size: 11px; }
.v2-scope-summary, .v2-court-scope { display: flex; flex-wrap: wrap; gap: 5px; }
.v2-scope-chip { display: inline-flex; align-items: center; justify-content: center; min-width: 30px; padding: 4px 7px; color: var(--v2-muted); background: rgba(255, 255, 255, .04); border: 1px solid var(--v2-line); border-radius: 4px; font-family: var(--v2-mono); font-size: 10px; font-weight: 700; white-space: nowrap; }
.v2-scope-chip--active { color: var(--v2-lime); background: var(--v2-lime-soft); border-color: rgba(195, 244, 0, .35); }
.v2-next-attempt { text-align: right; }
.v2-meta-label { display: block; }
.v2-countdown { display: block; margin-top: 4px; color: var(--v2-lime); font-family: var(--v2-mono); font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.v2-chevron { display: grid; place-items: center; width: 22px; height: 22px; color: var(--v2-muted); border: 1px solid var(--v2-line); border-radius: 5px; font-size: 15px; transition: transform 160ms ease, color 160ms ease, border-color 160ms ease; }
.v2-schedule[open] .v2-chevron { color: var(--v2-lime); border-color: rgba(195, 244, 0, .4); transform: rotate(90deg); }
.v2-schedule-details { padding: 0 16px 16px; border-top: 1px solid rgba(255, 255, 255, .06); }
.v2-detail-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 20px; padding: 14px 0; }
.v2-detail-grid strong { display: block; margin-top: 5px; color: var(--v2-muted-light); font-size: 12px; font-weight: 600; }
.v2-member-list { display: grid; gap: 8px; padding-top: 4px; }
.v2-member-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 10px; background: rgba(255, 255, 255, .025); border: 1px solid var(--v2-line); border-radius: 6px; }
.v2-member-row div { min-width: 0; }
.v2-member-row strong, .v2-member-row span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.v2-member-row strong { color: var(--v2-text); font-size: 12px; }
.v2-member-row div span { margin-top: 2px; color: var(--v2-muted); font-size: 10px; }
.v2-member-row a, .v2-panel-footer a { color: var(--v2-lime); font-size: 11px; font-weight: 750; text-decoration: none; white-space: nowrap; }
.v2-member-row a:hover, .v2-panel-footer a:hover { text-decoration: underline; }
.v2-panel-footer { padding: 3px 22px 17px; color: var(--v2-muted); font-size: 11px; }

.v2-log-list { display: grid; align-content: start; gap: 1px; max-height: 680px; padding: 8px 12px 12px; overflow-y: auto; scrollbar-color: var(--v2-surface-bright) transparent; scrollbar-width: thin; }
.v2-log-list::-webkit-scrollbar { width: 6px; }
.v2-log-list::-webkit-scrollbar-track { background: transparent; }
.v2-log-list::-webkit-scrollbar-thumb { background: var(--v2-surface-bright); border-radius: 3px; }
.v2-log-entry { display: grid; grid-template-columns: 118px minmax(0, 1fr); gap: 16px; align-items: start; padding: 13px 10px; border-bottom: 1px solid rgba(255, 255, 255, .06); }
.v2-log-entry:last-child { border-bottom: 0; }
.v2-log-entry:hover { background: rgba(255, 255, 255, .025); }
.v2-log-entry--simulated { border: 1px solid rgba(195, 244, 0, .4); border-radius: 7px; overflow: hidden; animation: v2-log-slide-in 380ms cubic-bezier(.2, .8, .2, 1); }
.v2-log-entry--simulated .v2-court-status { opacity: 0; transform: translateX(-12px); animation: v2-court-reveal 260ms ease-out forwards; }
.v2-log-entry--simulated .v2-court-status:nth-child(1) { animation-delay: 340ms; }
.v2-log-entry--simulated .v2-court-status:nth-child(2) { animation-delay: 460ms; }
.v2-log-entry--simulated .v2-court-status:nth-child(3) { animation-delay: 580ms; }
.v2-log-entry--removing { overflow: hidden; animation: v2-log-slide-out 360ms ease-in forwards; }
.v2-log-time { display: grid; gap: 3px; align-self: center; }
.v2-log-day { color: var(--v2-lime); font-size: 9px; font-weight: 800; letter-spacing: .1em; }
.v2-log-time strong { color: var(--v2-muted-light); font-size: 12px; }
.v2-log-time span { color: var(--v2-muted); font-family: var(--v2-mono); font-size: 11px; }
.v2-court-statuses { display: grid; gap: 6px; }
.v2-court-status { display: grid; grid-template-columns: 42px minmax(0, 1fr); align-items: center; gap: 9px; min-width: 0; padding: 7px; background: rgba(255, 255, 255, .025); border: 1px solid var(--v2-line); border-radius: 7px; }
.v2-court-status--booked { --v2-court-color: var(--v2-lime); color: var(--v2-lime); background: var(--v2-lime-soft); border-color: rgba(195, 244, 0, .3); }
.v2-court-status--cancelled { --v2-court-color: var(--v2-muted); color: var(--v2-muted); background: rgba(255, 255, 255, .035); border-color: var(--v2-line); }
.v2-court-status--failed { --v2-court-color: var(--v2-red); color: var(--v2-red); background: var(--v2-red-soft); border-color: rgba(224, 108, 117, .3); }
.v2-court-status--attempting { --v2-court-color: var(--v2-amber); color: var(--v2-amber); background: var(--v2-amber-soft); border-color: rgba(240, 198, 116, .3); }
.v2-court-status--not_attempted { --v2-court-color: var(--v2-muted); color: var(--v2-muted); }
.v2-court-logo { display: block; width: 42px; height: 42px; color: currentColor; }
.v2-court-outline, .v2-court-line { fill: none; stroke: currentColor; stroke-width: 1.25; }
.v2-court-number { fill: currentColor; font: 800 15px var(--v2-sans); }
.v2-court-status strong { display: flex; align-items: baseline; gap: 9px; min-width: 0; }
.v2-court-name { color: var(--v2-text-strong); font-size: 12px; }
.v2-court-state { color: var(--v2-court-color); font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.v2-court-owner { display: block; margin-top: 2px; overflow: hidden; color: var(--v2-muted); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.v2-empty-state { display: grid; gap: 4px; padding: 28px 14px; color: var(--v2-muted); text-align: center; }
.v2-empty-state strong { color: var(--v2-text); font-size: 13px; }
.v2-empty-state a { color: var(--v2-lime); font-size: 11px; font-weight: 750; text-decoration: none; }
.v2-prototype-label { margin-top: 20px; color: var(--v2-muted); font-family: var(--v2-mono); font-size: 10px; text-align: right; }
@keyframes v2-log-slide-in { from { opacity: 0; max-height: 0; padding-top: 0; padding-bottom: 0; } to { opacity: 1; max-height: 220px; padding-top: 13px; padding-bottom: 13px; } }
@keyframes v2-court-reveal { from { opacity: 0; transform: translateX(-12px); } to { opacity: 1; transform: translateX(0); } }
@keyframes v2-log-slide-out { from { opacity: 1; transform: translateY(0); max-height: 220px; } to { opacity: 0; transform: translateY(-12px); max-height: 0; padding-top: 0; padding-bottom: 0; } }

@media (max-width: 1050px) {
  .v2-app { grid-template-columns: 76px minmax(0, 1fr); }
  .v2-sidebar { width: 76px; padding: 22px 12px; }
  .v2-brand { justify-content: center; margin: 0 0 48px; }
  .v2-brand > span:last-child, .v2-nav-label, .v2-nav-name, .v2-nav-arrow, .v2-nav-children, .v2-sidebar-footer .v2-system-status span:last-child, .v2-logout { display: none; }
  .v2-nav-item { justify-content: center; padding: 0; }
  .v2-sidebar-footer { padding: 16px 0 0; }
  .v2-system-status { justify-content: center; }
  .v2-dashboard-grid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 720px) {
  .v2-app { display: block; }
  .v2-sidebar { display: flex; position: fixed; top: 0; bottom: 0; left: 0; z-index: 40; width: 240px; padding: 22px 16px; transform: translateX(-100%); transition: transform 180ms ease; }
  body.v2-nav-open .v2-sidebar { transform: translateX(0); }
  .v2-sidebar .v2-brand { justify-content: flex-start; margin: 0 8px 48px; }
  .v2-sidebar .v2-brand > span:last-child, .v2-sidebar .v2-nav-label, .v2-sidebar .v2-nav-name, .v2-sidebar .v2-nav-arrow { display: initial; }
  .v2-sidebar .v2-nav-name { flex: 1; }
  .v2-sidebar .v2-nav-item { justify-content: flex-start; padding: 0 12px; }
  .v2-sidebar .v2-nav-children { display: none; }
  .v2-sidebar .v2-nav-children--open { display: grid; }
  .v2-sidebar .v2-sidebar-footer { padding: 16px 12px 0; }
  .v2-sidebar .v2-sidebar-footer .v2-system-status span:last-child, .v2-sidebar .v2-logout { display: initial; }
  .v2-sidebar-backdrop { display: block; position: fixed; inset: 0; z-index: 30; background: rgba(1, 15, 31, .7); opacity: 0; pointer-events: none; transition: opacity 180ms ease; }
  body.v2-nav-open .v2-sidebar-backdrop { opacity: 1; pointer-events: auto; }
  .v2-topbar { min-height: 62px; padding: 0 16px; }
  .v2-mobile-menu { display: grid; place-items: center; }
  .v2-breadcrumb { display: none; }
  .v2-user { margin-left: auto; }
  .v2-content { padding: 26px 14px 42px; }
  .v2-alert { align-items: flex-start; flex-direction: column; gap: 8px; }
  .v2-alert div { display: block; }
  .v2-alert span { display: block; margin-top: 3px; }
  .v2-page-heading { align-items: flex-start; margin-bottom: 20px; }
  .v2-page-heading .v2-secondary-button { display: none; }
  .v2-panel-header { padding: 17px 15px 14px; }
  .v2-panel-header h2 { font-size: 16px; }
  .v2-log-header-actions { align-items: flex-end; flex-direction: column; gap: 6px; }
  .v2-accordion-list { padding: 9px; }
  .v2-schedule summary { grid-template-columns: minmax(0, 1fr) auto; gap: 10px; padding: 13px 12px; }
  .v2-scope-summary { grid-column: 1 / 2; grid-row: 2; justify-content: flex-start; }
  .v2-next-attempt { grid-column: 1 / 2; grid-row: 3; text-align: left; }
  .v2-schedule summary > .v2-chevron { grid-column: 2; grid-row: 1 / span 3; }
  .v2-schedule-details { padding: 0 12px 13px; }
  .v2-detail-grid { grid-template-columns: 1fr; gap: 12px; }
  .v2-member-row { align-items: flex-start; flex-direction: column; }
  .v2-log-list { max-height: 660px; padding: 5px 9px 9px; }
  .v2-log-entry { grid-template-columns: 1fr; gap: 10px; padding: 12px 5px; }
  .v2-court-status { grid-template-columns: 34px minmax(0, 1fr); gap: 5px; padding: 6px; }
  .v2-court-logo { width: 34px; height: 34px; }
  .v2-court-number { font-size: 13px; }
  .v2-court-status strong { gap: 6px; }
  .v2-court-name, .v2-court-state { font-size: 9px; }
  .v2-court-owner { font-size: 9px; }
  .v2-prototype-label { text-align: left; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}
