@import url('https://fonts.googleapis.com/css2?family=Akshar:wght@400;500;600;700&family=Manrope:wght@400;500;600;700&display=swap');

:root {
  --bg: oklch(0.953 0.012 80);
  --bg-strong: oklch(0.915 0.02 75);
  --panel: oklch(0.985 0.004 80 / 0.94);
  --panel-2: oklch(0.969 0.007 75 / 0.9);
  --line: oklch(0.82 0.026 75);
  --line-strong: oklch(0.72 0.042 52);
  --text: oklch(0.26 0.018 40);
  --muted: oklch(0.48 0.018 55);
  --brand: oklch(0.58 0.19 33);
  --brand-strong: oklch(0.52 0.21 31);
  --accent: oklch(0.69 0.12 82);
  --success: oklch(0.63 0.15 150);
  --danger: oklch(0.58 0.2 28);
  --shadow: 0 18px 50px rgba(71, 34, 15, 0.12);
  --radius-xl: 28px;
  --radius-lg: 20px;
  --radius-md: 14px;
}

* {
  box-sizing: border-box;
}

html {
  color-scheme: light;
}

body {
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(circle at top right, color-mix(in oklab, var(--accent) 26%, transparent), transparent 28%),
    linear-gradient(180deg, var(--bg) 0%, oklch(0.937 0.015 80) 100%);
  color: var(--text);
  font-family: 'Manrope', sans-serif;
}

a {
  color: inherit;
  text-decoration: none;
}

button,
input,
textarea,
select {
  font: inherit;
}

.shell {
  display: grid;
  grid-template-columns: 320px minmax(0, 1fr);
  min-height: 100vh;
}

.sidebar {
  position: relative;
  padding: 32px 24px;
  background:
    linear-gradient(180deg, oklch(0.23 0.03 35), oklch(0.18 0.02 32)),
    var(--text);
  color: oklch(0.95 0.02 75);
}

.sidebar::after {
  content: '';
  position: absolute;
  inset: 24px 24px auto auto;
  width: 92px;
  height: 92px;
  border-radius: 24px;
  background: linear-gradient(135deg, color-mix(in oklab, var(--brand) 82%, white), transparent 68%);
  opacity: 0.65;
  transform: rotate(16deg);
}

.brand-mark {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 999px;
  background: rgba(255,255,255,0.05);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 0.75rem;
}

.brand-mark strong,
.headline,
.section-title,
.metric-value,
.page-title,
.hero-title {
  font-family: 'Akshar', sans-serif;
}

.hero-title {
  margin: 22px 0 8px;
  font-size: clamp(2.5rem, 4vw, 4.3rem);
  line-height: 0.92;
  text-transform: uppercase;
}

.hero-copy {
  max-width: 24rem;
  color: oklch(0.84 0.016 70);
  font-size: 1rem;
}

.nav {
  display: grid;
  gap: 10px;
  margin-top: 34px;
}

.nav a {
  display: grid;
  gap: 4px;
  padding: 16px 18px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.03);
  transition: transform 180ms ease, border-color 180ms ease, background 180ms ease;
}

.nav a:hover,
.nav a.is-active {
  transform: translateX(6px);
  border-color: rgba(255,255,255,0.18);
  background: rgba(255,255,255,0.09);
}

.nav strong {
  font-size: 1rem;
}

.nav span {
  color: oklch(0.78 0.016 70);
  font-size: 0.88rem;
}

.sidebar-footer {
  margin-top: 38px;
  display: grid;
  gap: 16px;
}

.mini-note {
  padding: 16px 18px;
  border-radius: 18px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.08);
  color: oklch(0.82 0.02 72);
  font-size: 0.92rem;
}

.ghost-button,
.primary-button,
.danger-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  padding: 0 18px;
  border-radius: 999px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform 180ms ease, background 180ms ease, border-color 180ms ease;
}

.ghost-button:hover,
.primary-button:hover,
.danger-button:hover {
  transform: translateY(-1px);
}

.ghost-button {
  border-color: rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.04);
  color: oklch(0.95 0.02 75);
}

.primary-button {
  background: linear-gradient(135deg, var(--brand), var(--brand-strong));
  color: oklch(0.98 0.006 75);
}

.danger-button {
  background: color-mix(in oklab, var(--danger) 12%, white);
  border-color: color-mix(in oklab, var(--danger) 35%, white);
  color: var(--danger);
}

.content {
  padding: clamp(22px, 3vw, 40px);
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 24px;
}

.page-title {
  margin: 0;
  font-size: clamp(2rem, 3.4vw, 3.2rem);
  line-height: 0.95;
  text-transform: uppercase;
}

.page-copy {
  margin: 6px 0 0;
  color: var(--muted);
  max-width: 44rem;
}

.topbar-meta {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.user-chip {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 0 16px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: color-mix(in oklab, var(--panel) 76%, white);
  color: var(--text);
}

.grid {
  display: grid;
  gap: 22px;
}

.metrics {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.panel {
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  background: linear-gradient(180deg, var(--panel), var(--panel-2));
  box-shadow: var(--shadow);
}

.panel-inner {
  padding: clamp(20px, 2.6vw, 30px);
}

.metric-card {
  display: grid;
  gap: 14px;
}

.metric-label {
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 0.78rem;
}

.metric-value {
  font-size: clamp(2.3rem, 4vw, 3.4rem);
  line-height: 0.9;
}

.metric-copy {
  color: var(--muted);
}

.split {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(360px, 0.92fr);
  gap: 22px;
}

.section-title {
  margin: 0;
  font-size: clamp(1.4rem, 2.2vw, 2rem);
  line-height: 0.94;
  text-transform: uppercase;
}

.section-copy {
  margin: 8px 0 0;
  color: var(--muted);
}

.toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}

.status-banner {
  display: none;
  margin-bottom: 18px;
  padding: 16px 18px;
  border-radius: 18px;
  border: 1px solid var(--line);
  background: color-mix(in oklab, var(--panel) 82%, white);
}

.status-banner.is-visible {
  display: block;
}

.status-banner.is-error {
  color: var(--danger);
  border-color: color-mix(in oklab, var(--danger) 40%, white);
  background: color-mix(in oklab, var(--danger) 8%, white);
}

.status-banner.is-success {
  color: oklch(0.37 0.09 150);
  border-color: color-mix(in oklab, var(--success) 42%, white);
  background: color-mix(in oklab, var(--success) 10%, white);
}

.data-list {
  display: grid;
  gap: 14px;
}

.data-card {
  display: grid;
  gap: 14px;
  padding: 18px;
  border-radius: 20px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,0.56);
}

.data-card.is-selectable {
  cursor: pointer;
  transition: transform 180ms ease, border-color 180ms ease, background 180ms ease;
}

.data-card.is-selectable:hover {
  transform: translateY(-2px);
  border-color: color-mix(in oklab, var(--brand) 26%, var(--line));
}

.data-card.is-active {
  border-color: color-mix(in oklab, var(--brand) 42%, white);
  background: color-mix(in oklab, var(--brand) 8%, white);
}

.data-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.data-card-title {
  display: grid;
  gap: 6px;
}

.data-card-title strong {
  font-size: 1.04rem;
}

.data-card-title span {
  color: var(--muted);
}

.tag-row,
.chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.tag,
.chip {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 0 12px;
  border-radius: 999px;
  font-size: 0.85rem;
}

.tag {
  border: 1px solid color-mix(in oklab, var(--brand) 24%, white);
  background: color-mix(in oklab, var(--brand) 8%, white);
  color: var(--brand-strong);
}

.chip {
  border: 1px solid var(--line);
  background: rgba(255,255,255,0.6);
  color: var(--text);
}

.empty-state {
  padding: 30px;
  border-radius: 24px;
  border: 1px dashed var(--line-strong);
  background: color-mix(in oklab, var(--accent) 10%, white);
}

.empty-state strong {
  display: block;
  margin-bottom: 8px;
  font-size: 1.04rem;
}

.form-grid {
  display: grid;
  gap: 16px;
}

.field {
  display: grid;
  gap: 8px;
}

.field.inline {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.field label,
.fieldset-title {
  font-weight: 700;
  color: var(--text);
}

.field input,
.field textarea,
.field select {
  width: 100%;
  min-height: 48px;
  padding: 12px 14px;
  border-radius: 16px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,0.74);
  color: var(--text);
}

.field textarea {
  min-height: 130px;
  resize: vertical;
}

.field small {
  color: var(--muted);
}

.builder-stack {
  display: grid;
  gap: 12px;
}

.builder-item {
  display: grid;
  gap: 14px;
  padding: 16px;
  border-radius: 18px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,0.62);
}

.builder-item[draggable="true"] {
  cursor: grab;
}

.builder-item.is-dragging {
  opacity: 0.5;
}

.builder-item-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.builder-item-title {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.drag-handle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,0.8);
  color: var(--muted);
  font-size: 1.2rem;
}

.builder-item-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.mini-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,0.7);
  color: var(--text);
  cursor: pointer;
}

.mini-button.is-danger {
  color: var(--danger);
  border-color: color-mix(in oklab, var(--danger) 35%, white);
  background: color-mix(in oklab, var(--danger) 6%, white);
}

.builder-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.advanced-box {
  margin-top: 18px;
  border-radius: 18px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,0.48);
  overflow: hidden;
}

.advanced-box summary {
  cursor: pointer;
  list-style: none;
  padding: 16px 18px;
  font-weight: 700;
}

.advanced-box summary::-webkit-details-marker {
  display: none;
}

.advanced-box .advanced-body {
  padding: 0 18px 18px;
}

.muted-note {
  color: var(--muted);
  font-size: 0.92rem;
}

.driver-preview-stage {
  padding: 22px;
  border-radius: 24px;
  border: 1px solid var(--line);
  background:
    radial-gradient(circle at top right, rgba(255,255,255,0.24), transparent 28%),
    linear-gradient(135deg, #0f7cc0, #16a6d9);
  overflow: hidden;
}

.driver-preview-card {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr);
  min-height: 164px;
  border-radius: 0;
  overflow: hidden;
  background: linear-gradient(135deg, #132d46, #183e5f 68%, #11273e);
  box-shadow: 0 18px 40px rgba(8, 24, 40, 0.28);
}

.driver-preview-badge {
  display: grid;
  place-items: center;
  background: linear-gradient(180deg, #ee1e21, #d71417);
  color: #ffffff;
  font-family: 'Akshar', sans-serif;
  font-size: 3.2rem;
  line-height: 1;
  font-weight: 700;
}

.driver-preview-body {
  display: grid;
  gap: 10px;
  padding: 14px 18px 16px;
  color: #ffffff;
}

.driver-preview-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.driver-preview-brand,
.driver-preview-mode {
  font-family: 'Akshar', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.driver-preview-brand {
  font-size: 1.6rem;
}

.driver-preview-mode {
  color: rgba(255,255,255,0.78);
  font-size: 0.92rem;
}

.driver-preview-main {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr) 210px;
  gap: 16px;
  align-items: center;
}

.driver-preview-portrait {
  width: 92px;
  height: 92px;
  border-radius: 14px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.3), rgba(255,255,255,0)),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 92 92'%3E%3Crect width='92' height='92' rx='14' fill='%23224666'/%3E%3Ccircle cx='46' cy='30' r='18' fill='%239fd1ff'/%3E%3Cpath d='M19 83c6-18 18-27 27-27s21 9 27 27' fill='%239fd1ff'/%3E%3C/svg%3E") center/cover no-repeat;
  border: 1px solid rgba(255,255,255,0.14);
}

.driver-preview-identity {
  display: grid;
  gap: 8px;
}

.driver-preview-name-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}

.driver-preview-flag {
  width: 24px;
  height: 16px;
  border-radius: 3px;
  background: linear-gradient(180deg, #f8f8f8 0 33%, #2446b8 33% 66%, #d82126 66% 100%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.18);
}

.driver-preview-name {
  font-family: 'Akshar', sans-serif;
  font-size: clamp(2rem, 3vw, 2.8rem);
  line-height: 0.88;
  text-transform: uppercase;
}

.driver-preview-number {
  margin-left: auto;
  font-family: 'Akshar', sans-serif;
  font-size: clamp(2.3rem, 3vw, 3.6rem);
  line-height: 0.86;
  color: rgba(125, 168, 255, 0.9);
}

.driver-preview-team {
  font-family: 'Akshar', sans-serif;
  font-size: 1.05rem;
  line-height: 0.96;
  text-transform: uppercase;
  color: #f39b28;
  letter-spacing: 0.06em;
}

.driver-preview-side {
  display: grid;
  gap: 4px;
  justify-items: end;
  text-align: right;
}

.driver-preview-panel,
.driver-preview-panel-sub {
  font-family: 'Akshar', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.9rem;
  color: rgba(255,255,255,0.7);
}

.driver-preview-panel-value {
  font-family: 'Akshar', sans-serif;
  font-size: 2.2rem;
  line-height: 0.86;
  text-transform: uppercase;
}

.driver-preview-panel-subvalue {
  font-family: 'Akshar', sans-serif;
  font-size: 1.6rem;
  line-height: 0.9;
  text-transform: uppercase;
  color: #ffffff;
}

.login-shell {
  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(420px, 0.9fr);
  background:
    linear-gradient(135deg, oklch(0.24 0.04 38) 0%, oklch(0.16 0.025 32) 100%);
}

.login-poster {
  padding: clamp(28px, 5vw, 64px);
  color: oklch(0.95 0.02 75);
  display: grid;
  align-content: space-between;
  background:
    radial-gradient(circle at 20% 20%, color-mix(in oklab, var(--brand) 24%, transparent), transparent 26%),
    radial-gradient(circle at 80% 78%, color-mix(in oklab, var(--accent) 18%, transparent), transparent 32%);
}

.poster-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.poster-block {
  padding: 18px;
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,0.1);
  background: rgba(255,255,255,0.04);
}

.poster-block strong {
  display: block;
  margin-bottom: 8px;
  font-family: 'Akshar', sans-serif;
  font-size: 1.4rem;
  line-height: 0.94;
  text-transform: uppercase;
}

.login-panel {
  display: grid;
  place-items: center;
  padding: 24px;
  background: linear-gradient(180deg, var(--bg) 0%, oklch(0.93 0.016 80) 100%);
}

.login-card {
  width: min(520px, 100%);
  padding: clamp(26px, 4vw, 38px);
}

.helper-line {
  margin: 0;
  color: var(--muted);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (max-width: 1080px) {
  .shell,
  .login-shell,
  .split,
  .metrics {
    grid-template-columns: 1fr;
  }

  .sidebar::after {
    inset: auto 24px 24px auto;
  }
}

@media (max-width: 720px) {
  .sidebar,
  .content,
  .login-poster,
  .login-panel {
    padding: 20px;
  }

  .field.inline {
    grid-template-columns: 1fr;
  }

  .builder-grid {
    grid-template-columns: 1fr;
  }

  .driver-preview-card,
  .driver-preview-main {
    grid-template-columns: 1fr;
  }

  .driver-preview-badge {
    min-height: 72px;
    font-size: 2.4rem;
  }

  .driver-preview-side {
    justify-items: start;
    text-align: left;
  }

  .topbar {
    align-items: flex-start;
    flex-direction: column;
  }
}