/* ═══════════════════════════════════════════════════════════════
   شحن جو — Modern shell 2026
   Cohesive app UI for LCL (partial) and FCL (full).
   Loaded after app.css + theme.css.
   ═══════════════════════════════════════════════════════════════ */

:root {
  --accent: var(--gold-500);
  --accent-2: var(--gold-400);
  --accent-soft: var(--gold-100);
  --hero-1: #04151f;
  --hero-2: #0b4d72;
  --hero-3: #c9a227;
  --mesh: rgba(201, 162, 39, 0.16);
  --sidebar-1: #041018;
  --sidebar-2: #0a334c;
  --surface-glow: rgba(201, 162, 39, 0.08);
  --radius-xl: 24px;
  --shadow-soft: 0 10px 28px rgba(8, 28, 42, 0.07);
  --shadow-lift: 0 18px 40px rgba(8, 28, 42, 0.12);
}

html[data-program="partial"] {
  --accent: #c9a227;
  --accent-2: #e3c15a;
  --accent-soft: #fbf4df;
  --hero-1: #04151f;
  --hero-2: #0c567d;
  --hero-3: #d4ae3a;
  --mesh: rgba(201, 162, 39, 0.18);
  --sidebar-1: #041018;
  --sidebar-2: #0a3a54;
  --surface-glow: rgba(201, 162, 39, 0.1);
}

html[data-program="full"] {
  --gold-500: #e07a3d;
  --gold-400: #f0a36c;
  --gold-100: #fdf1e7;
  --navy-950: #0e0b16;
  --navy-900: #1c1533;
  --navy-800: #3a2770;
  --navy-700: #53408f;
  --bg: #f3f0f7;
  --bg-soft: #ebe6f2;
  --card: #fffcfe;
  --text: #16121f;
  --muted: #6a6178;
  --border: #e4dced;
  --border-strong: #cfc4df;
  --shadow: 0 12px 32px rgba(28, 21, 51, 0.08);
  --shadow-lg: 0 28px 64px rgba(14, 11, 22, 0.16);
  --shadow-gold: 0 10px 28px rgba(224, 122, 61, 0.28);
  --ring: 0 0 0 4px rgba(224, 122, 61, 0.22);
  --accent: #e07a3d;
  --accent-2: #f0a36c;
  --accent-soft: #fdf1e7;
  --hero-1: #120c1c;
  --hero-2: #3b2468;
  --hero-3: #e07a3d;
  --mesh: rgba(224, 122, 61, 0.18);
  --sidebar-1: #0c0914;
  --sidebar-2: #241a42;
  --surface-glow: rgba(224, 122, 61, 0.1);
}

html[data-program="full"][data-theme="dark"] {
  --bg: #0a0810;
  --bg-soft: #120e1a;
  --card: #161222;
  --text: #eee9f6;
  --muted: #a89bb8;
  --border: #2a223c;
  --border-strong: #3d3358;
  --gold-100: #2a1a12;
}

/* ── App canvas ── */
.app-body {
  background:
    radial-gradient(900px 420px at 100% -8%, var(--mesh), transparent 58%),
    radial-gradient(700px 380px at 0% 108%, color-mix(in srgb, var(--navy-800) 12%, transparent), transparent 55%),
    var(--bg);
}

.app-body .main {
  padding: 22px 24px 48px;
  max-width: 1480px;
}

/* ── Sidebar ── */
.app-body .sidebar {
  background:
    radial-gradient(ellipse at 0% -10%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 46%),
    linear-gradient(180deg, var(--sidebar-1) 0%, var(--sidebar-2) 100%);
  border-inline-end: 1px solid rgba(255, 255, 255, 0.06);
}

.sidebar-program {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 10px 14px;
  padding: 7px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #f3e7c4;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.sidebar-program b {
  display: grid;
  place-items: center;
  min-width: 36px;
  height: 22px;
  padding: 0 6px;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--accent-2), var(--accent));
  color: var(--navy-950);
  font-size: 0.68rem;
  letter-spacing: 0.04em;
}

#sidebar-pin:checked ~ .sidebar .sidebar-program {
  display: none;
}

html[data-program="full"] .sidebar-program {
  color: #f8dcc8;
}

.sidebar-brand strong {
  letter-spacing: -0.03em;
}

.side-nav a {
  min-height: 42px;
  margin-bottom: 2px;
}

.side-nav a.active {
  background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 28%, transparent), rgba(255, 255, 255, 0.06));
  box-shadow: inset 3px 0 0 var(--accent-2);
}

html[dir="rtl"] .side-nav a.active {
  box-shadow: inset -3px 0 0 var(--accent-2);
}

/* ── Topbar ── */
.app-body .topbar {
  background: color-mix(in srgb, var(--bg) 72%, transparent);
  backdrop-filter: blur(20px) saturate(1.2);
  border-bottom: 1px solid color-mix(in srgb, var(--border) 80%, transparent);
}

.topbar-start strong {
  font-family: var(--font-display);
  letter-spacing: -0.03em;
}

.program-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 34px;
  padding: 0 12px 0 6px;
  border-radius: 999px;
  background: var(--card);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-soft);
  font-size: 0.78rem;
  font-weight: 800;
  color: var(--navy-900);
  white-space: nowrap;
}

.program-chip em {
  display: grid;
  place-items: center;
  min-width: 38px;
  height: 22px;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--accent-2), var(--accent));
  color: var(--navy-950);
  font-style: normal;
  font-size: 0.68rem;
  letter-spacing: 0.06em;
}

.user-chip {
  border-radius: 16px;
  background: var(--card);
}

.icon-btn {
  width: 42px;
  height: 42px;
  justify-content: center;
  border-radius: 14px;
  transition: transform 0.18s var(--ease), background 0.18s ease, border-color 0.18s ease;
}

.icon-btn:hover {
  transform: translateY(-1px);
  border-color: var(--accent);
}

/* ── Page heads — every tab ── */
.app-body .page-head {
  position: relative;
  overflow: hidden;
  align-items: center;
  margin-bottom: 18px;
  padding: 18px 20px 18px 22px;
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--accent-soft) 55%, var(--card)), var(--card) 42%);
  box-shadow: var(--shadow-soft);
}

.app-body .page-head::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 0;
  bottom: 0;
  width: 5px;
  background: linear-gradient(180deg, var(--accent-2), var(--navy-700));
}

.app-body .page-head h1 {
  margin: 0 0 4px;
  font-size: clamp(1.28rem, 1.8vw, 1.7rem);
  letter-spacing: -0.03em;
}

.app-body .page-head .muted {
  margin: 0;
  max-width: 62ch;
}

.app-body .page-actions,
.app-body .page-head-actions {
  gap: 8px;
}

/* ── Cards / panels / filters ── */
.app-body .card,
.app-body .panel {
  border-radius: 20px;
  border-color: color-mix(in srgb, var(--border) 85%, transparent);
  box-shadow: var(--shadow-soft);
}

.app-body .card:has(.filter-bar),
.app-body .card:has(.toolbar) {
  padding: 14px 16px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--card) 88%, var(--bg-soft)), var(--card));
}

.filter-bar {
  gap: 10px;
}

.filter-field label {
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}

.filter-field input,
.filter-field select,
.toolbar .search,
.toolbar select,
.app-body .search {
  min-height: 44px;
  border-radius: 14px;
  background: var(--card);
  border: 1px solid var(--border);
  transition: border-color 0.16s ease, box-shadow 0.16s ease;
}

.filter-field input:focus,
.filter-field select:focus,
.toolbar .search:focus,
.app-body .search:focus,
.field input:focus,
.field select:focus,
.field textarea:focus {
  border-color: var(--accent);
  box-shadow: var(--ring);
}

/* ── Buttons ── */
.app-body .btn,
.login-body .btn,
.auth-body .btn {
  border-radius: 14px;
  font-weight: 800;
}

.app-body .btn-primary {
  background: linear-gradient(180deg, color-mix(in srgb, var(--navy-700) 70%, #fff), var(--navy-900));
  box-shadow: 0 10px 22px color-mix(in srgb, var(--navy-900) 32%, transparent);
}

.app-body .btn-gold {
  background: linear-gradient(180deg, var(--accent-2), var(--accent));
  color: var(--navy-950);
}

.app-body .btn-outline:hover {
  border-color: var(--accent);
  background: var(--accent-soft);
}

/* ── Tables ── */
.app-body .table-wrap {
  border-radius: 18px;
  border: 1px solid var(--border);
  background: var(--card);
  overflow: auto;
}

.app-body table.data {
  width: 100%;
}

.app-body table.data thead th {
  background: color-mix(in srgb, var(--bg-soft) 70%, var(--card));
  color: var(--muted);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
}

.app-body table.data tbody tr:hover {
  background: color-mix(in srgb, var(--accent) 7%, transparent);
}

.app-body table.data td,
.app-body table.data th {
  padding: 12px 14px;
}

.app-body table.data td a {
  font-weight: 800;
}

/* ── Pills / tabs / empty ── */
.pill {
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 0.75rem;
  font-weight: 800;
}

.page-tabs {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.empty {
  border-radius: 20px;
  background:
    radial-gradient(circle at 50% 0, var(--surface-glow), transparent 60%),
    var(--card);
}

.empty-icon {
  background: var(--accent-soft);
  color: var(--navy-900);
}

/* ── Forms ── */
.app-body .field input,
.app-body .field select,
.app-body .field textarea {
  border-radius: 14px;
  background: color-mix(in srgb, var(--card) 90%, var(--bg-soft));
}

.app-body .kv-row,
.app-body .timeline-item,
.app-body .notif-item {
  border-radius: 16px;
}

/* ── Dashboard ── */
.dash-hero {
  position: relative;
  overflow: hidden;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 18px;
  margin-bottom: 18px;
  padding: 28px 28px 26px;
  border-radius: 28px;
  color: #fff;
  background:
    radial-gradient(680px 280px at 100% -10%, color-mix(in srgb, var(--hero-3) 36%, transparent), transparent 55%),
    linear-gradient(135deg, var(--hero-1) 0%, var(--hero-2) 78%);
  box-shadow: var(--shadow-lift);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.dash-hero-glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(115deg, transparent 42%, rgba(255, 255, 255, 0.05) 58%, transparent 72%);
}

.dash-hero-copy,
.dash-hero .page-actions {
  position: relative;
  z-index: 1;
}

.dash-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 10px;
  color: #f6e7bf;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

html[data-program="full"] .dash-kicker {
  color: #f8d7c2;
}

.dash-kicker span {
  display: inline-grid;
  place-items: center;
  min-width: 44px;
  height: 24px;
  padding: 0 8px;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--accent-2), var(--accent));
  color: var(--navy-950);
  letter-spacing: 0.06em;
}

.dash-hero h1 {
  margin: 0 0 6px;
  font-size: clamp(1.6rem, 2.4vw, 2.15rem);
  letter-spacing: -0.04em;
}

.dash-hero .muted {
  margin: 0;
  max-width: 52ch;
  color: rgba(255, 255, 255, 0.72);
}

.dash-hero .page-actions {
  flex-shrink: 0;
}

.pending-accounts-banner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
  padding: 14px 18px;
  border-radius: 18px;
  background: linear-gradient(90deg, #fff6e5, #fff);
  border: 1px solid rgba(201, 162, 39, 0.28);
  color: var(--navy-950);
  box-shadow: var(--shadow-soft);
}

html[data-program="full"] .pending-accounts-banner {
  background: linear-gradient(90deg, #fff1e8, #fff);
  border-color: rgba(224, 122, 61, 0.3);
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px;
  margin-top: 0;
}

.stat-card {
  position: relative;
  overflow: hidden;
  display: flex;
  min-height: 118px;
  padding: 18px 16px 16px 18px;
  border-radius: 22px;
  text-decoration: none;
  color: inherit;
  background: var(--card);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-soft);
  transition: transform 0.22s var(--ease), box-shadow 0.22s var(--ease), border-color 0.22s ease;
}

.stat-card::after {
  content: "";
  position: absolute;
  width: 120px;
  height: 120px;
  inset-inline-end: -36px;
  bottom: -48px;
  border-radius: 50%;
  background: var(--surface-glow);
  pointer-events: none;
}

a.stat-card:hover,
.stat-card-link:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lift);
  border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
}

.stat-card .label {
  font-size: 0.8rem;
  font-weight: 800;
  color: var(--muted);
}

.stat-card .value {
  font-family: var(--font-display);
  font-size: 2rem;
  letter-spacing: -0.04em;
  color: var(--navy-950);
}

.stat-card-icon {
  width: 42px;
  height: 42px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  margin-bottom: 12px;
  background: var(--accent-soft);
  color: var(--navy-900);
}

.stat-card-icon svg {
  width: 20px;
  height: 20px;
}

.stats-grid .stat-card:nth-child(1)::before,
.stats-grid .stat-card:nth-child(2)::before,
.stats-grid .stat-card:nth-child(3)::before,
.stats-grid .stat-card:nth-child(4)::before,
.stats-grid .stat-card:nth-child(5)::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 0;
  bottom: 0;
  width: 4px;
}

.stats-grid .stat-card:nth-child(1)::before { background: var(--accent); }
.stats-grid .stat-card:nth-child(2)::before { background: var(--navy-700); }
.stats-grid .stat-card:nth-child(3)::before { background: var(--info); }
.stats-grid .stat-card:nth-child(4)::before { background: var(--success); }
.stats-grid .stat-card:nth-child(5)::before { background: var(--warning); }

.dash-section-title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 28px 0 6px;
  font-size: 1.12rem;
  letter-spacing: -0.03em;
}

.dash-section-title::before {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: linear-gradient(180deg, var(--accent-2), var(--accent));
  box-shadow: 0 0 0 4px var(--accent-soft);
}

.dash-section-sub {
  margin: 0 0 14px;
}

.dash-charts {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(280px, 0.9fr);
  gap: 14px;
}

.dash-charts-side {
  display: grid;
  gap: 14px;
}

.dchart-card {
  border-radius: 22px;
  padding: 18px 18px 14px;
}

.dchart-kicker {
  background: var(--accent-soft);
  border-color: color-mix(in srgb, var(--accent) 30%, transparent);
  color: var(--navy-950);
}

.dchart-bar-fill,
.dchart-col-fill {
  background: linear-gradient(90deg, var(--accent), var(--navy-700));
}

.dchart-flow-seg {
  border-radius: 14px;
}

.dash-volume-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.china-board-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
}

.china-board-head h3 {
  margin: 0;
  font-size: 1.02rem;
  letter-spacing: -0.02em;
}

.china-board-section {
  border-radius: 20px;
}
.workspace-board {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.workspace-board .card h2,
.card .tab-title,
.side-group {
  letter-spacing: 0.04em;
}

/* ── Login program identity ── */
.login-program-grid-pair {
  gap: 16px;
}

.login-program-card {
  position: relative;
  overflow: hidden;
  min-height: 210px;
  padding: 22px 20px 18px;
  border-radius: 24px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background:
    radial-gradient(420px 180px at 100% 0%, rgba(201, 162, 39, 0.22), transparent 55%),
    linear-gradient(160deg, #0b3046, #062033);
  color: #fff;
  box-shadow: var(--shadow-lift);
  transition: transform 0.22s var(--ease), box-shadow 0.22s var(--ease);
}

.login-program-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 24px 48px rgba(4, 16, 24, 0.28);
}

.login-program-card-gold {
  background:
    radial-gradient(420px 180px at 100% 0%, rgba(224, 122, 61, 0.28), transparent 55%),
    linear-gradient(160deg, #2a1848, #120c1c);
}

.login-program-tag {
  display: inline-flex;
  margin-bottom: 10px;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
}

.login-program-card strong {
  display: block;
  font-size: 1.35rem;
  letter-spacing: -0.03em;
  margin-bottom: 8px;
}

.login-program-card em {
  display: inline-flex;
  margin-top: 16px;
  color: var(--navy-950);
  background: linear-gradient(180deg, var(--gold-400), var(--gold-500));
  border-radius: 999px;
  padding: 8px 14px;
  font-style: normal;
  font-weight: 800;
}

.login-program-card-gold em {
  background: linear-gradient(180deg, #f0a36c, #e07a3d);
}

.login-panel,
.auth-card {
  border-radius: 28px;
}

/* ── Detail / track / show pages ── */
.ptrack-focus,
.ptrack-card {
  border-radius: 22px;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-soft);
}

.ptrack-chip-program {
  background: var(--accent-soft) !important;
  color: var(--navy-900) !important;
  border-color: color-mix(in srgb, var(--accent) 35%, transparent) !important;
}

/* ── Dark ── */
html[data-theme="dark"] .app-body .page-head,
html[data-theme="dark"] .app-body .card,
html[data-theme="dark"] .app-body .panel,
html[data-theme="dark"] .program-chip,
html[data-theme="dark"] .user-chip,
html[data-theme="dark"] .dchart-card,
html[data-theme="dark"] .stat-card {
  background: var(--card);
  border-color: var(--border);
}

html[data-theme="dark"] .app-body .page-head {
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 10%, var(--card)), var(--card));
}

html[data-theme="dark"] .app-body .topbar {
  background: color-mix(in srgb, var(--bg) 78%, transparent);
}

html[data-theme="dark"] .stat-card .value,
html[data-theme="dark"] .app-body .page-head h1 {
  color: var(--text);
}

html[data-theme="dark"] .page-tabs {
  background: var(--bg-soft);
}

html[data-theme="dark"] .page-tabs-item.is-active {
  background: var(--card);
  color: var(--text);
}

html[data-theme="dark"] table.data thead th {
  background: var(--bg-soft);
}

html[data-theme="dark"] .pending-accounts-banner {
  background: #24180e;
  color: #f6e7bf;
  border-color: rgba(201, 162, 39, 0.28);
}

html[data-theme="dark"] .filter-field input,
html[data-theme="dark"] .filter-field select,
html[data-theme="dark"] .toolbar .search,
html[data-theme="dark"] .app-body .search {
  background: var(--bg-soft);
}

/* ── Responsive ── */
@media (max-width: 1180px) {
  .stats-grid,
  .dash-volume-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 980px) {
  .dash-charts,
  .dash-charts-secondary,
  .workspace-board {
    grid-template-columns: 1fr;
  }

  .dash-hero {
    flex-direction: column;
    align-items: stretch;
    padding: 22px 18px;
  }

  .app-body .page-head {
    flex-direction: column;
    align-items: stretch;
  }
}

@media (max-width: 760px) {
  .stats-grid,
  .dash-volume-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .app-body .main {
    padding: 14px 12px 32px;
  }

  .program-chip span {
    display: none;
  }

  .sidebar-program {
    display: none;
  }
}

@media (max-width: 520px) {
  .stats-grid,
  .dash-volume-grid {
    grid-template-columns: 1fr;
  }

  .stat-card {
    min-height: 96px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .stat-card,
  .login-program-card,
  .icon-btn,
  .btn {
    transition: none;
  }
}

/* ═══════════════════════════════════════════════════════════════
   Controls: buttons, fields, selects — premium, consistent, RTL
   ═══════════════════════════════════════════════════════════════ */

:root {
  --control-h: 48px;
  --control-radius: 16px;
  --chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%235d6e7c' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}

html[data-theme="dark"] {
  --chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23c5d6e4' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}

.btn {
  position: relative;
  isolation: isolate;
  min-height: 46px;
  padding: 0 18px;
  border-radius: 16px;
  font-weight: 800;
  letter-spacing: 0.01em;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.18) inset;
  transition:
    transform 0.18s var(--ease),
    box-shadow 0.18s var(--ease),
    background 0.18s ease,
    border-color 0.18s ease,
    filter 0.18s ease;
}

.btn::after {
  content: "";
  position: absolute;
  inset: 1px 1px auto;
  height: 46%;
  border-radius: 15px 15px 40% 40%;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.28), transparent);
  pointer-events: none;
  z-index: 0;
}

.btn > * {
  position: relative;
  z-index: 1;
}

.btn:hover:not(:disabled) {
  transform: translateY(-2px);
}

.btn:active:not(:disabled) {
  transform: translateY(0);
  filter: brightness(0.97);
}

.btn:focus-visible {
  outline: none;
  box-shadow: var(--ring), 0 10px 22px color-mix(in srgb, var(--navy-900) 18%, transparent);
}

.btn-sm {
  min-height: 38px;
  padding: 0 13px;
  border-radius: 13px;
  font-size: 0.88rem;
}

.btn-lg,
.btn-block {
  min-height: 52px;
  padding: 0 22px;
  border-radius: 18px;
  font-size: 1.02rem;
}

.btn-primary {
  background: linear-gradient(180deg, color-mix(in srgb, var(--navy-700) 55%, #fff) 0%, var(--navy-800) 42%, var(--navy-950) 100%);
  color: #fff;
  border: 1px solid color-mix(in srgb, var(--navy-950) 35%, transparent);
  box-shadow:
    0 12px 24px color-mix(in srgb, var(--navy-900) 28%, transparent),
    0 1px 0 rgba(255, 255, 255, 0.22) inset;
}

.btn-primary:hover:not(:disabled) {
  background: linear-gradient(180deg, var(--navy-700), var(--navy-900));
}

html[data-program="full"] .btn-primary {
  background: linear-gradient(180deg, #53408f 0%, #1c1533 100%);
  box-shadow: 0 12px 24px rgba(28, 21, 51, 0.32);
}

.btn-gold {
  background: linear-gradient(180deg, var(--accent-2) 0%, var(--accent) 100%);
  color: var(--navy-950);
  border: 1px solid color-mix(in srgb, var(--accent) 55%, #8a6a12);
  box-shadow:
    0 12px 26px color-mix(in srgb, var(--accent) 34%, transparent),
    0 1px 0 rgba(255, 255, 255, 0.4) inset;
}

.btn-gold:hover:not(:disabled) {
  filter: brightness(1.05);
}

.btn-outline {
  background: color-mix(in srgb, var(--card) 82%, transparent);
  color: var(--navy-900);
  border: 1px solid var(--border-strong);
  box-shadow: 0 6px 16px color-mix(in srgb, var(--navy-900) 6%, transparent);
}

.btn-outline::after {
  opacity: 0.35;
}

.btn-outline:hover:not(:disabled) {
  background: var(--card);
  border-color: var(--accent);
  color: var(--navy-950);
  box-shadow: 0 10px 22px color-mix(in srgb, var(--accent) 16%, transparent);
}

.btn-danger {
  background: linear-gradient(180deg, #e15a5a, var(--danger));
  border: 1px solid color-mix(in srgb, var(--danger) 70%, #7a1d1d);
  color: #fff;
  box-shadow: 0 10px 22px rgba(196, 60, 60, 0.28);
}

.btn-ghost {
  min-height: 42px;
  background: transparent;
  box-shadow: none;
}

.btn-ghost::after,
.btn-ghost-light::after {
  display: none;
}

.dash-hero .btn-outline,
.login-showcase .btn-outline {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.22);
}

.dash-hero .btn-outline:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.18);
  border-color: var(--accent-2);
}

/* Labels */
.field {
  gap: 8px;
  margin-bottom: 16px;
}

.field label,
.filter-field label,
.landing-track-label {
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: var(--navy-900);
}

/* Shared control skin */
.field input,
.field select,
.field textarea,
.filter-field input,
.filter-field select,
.toolbar .search,
.toolbar select,
.toolbar input,
.search,
.global-search-input,
.login-panel input,
.login-panel select,
.login-panel textarea,
.auth-card input,
.auth-card select,
.auth-card textarea,
.cnt-form .field select {
  width: 100%;
  min-height: var(--control-h);
  padding: 12px 16px;
  border-radius: var(--control-radius);
  border: 1px solid color-mix(in srgb, var(--border-strong) 80%, var(--border));
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--card) 88%, #fff), var(--card));
  color: var(--text);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.7) inset,
    0 8px 18px color-mix(in srgb, var(--navy-900) 4%, transparent);
  transition:
    border-color 0.16s ease,
    box-shadow 0.16s ease,
    background 0.16s ease,
    transform 0.16s ease;
}

.field textarea,
.auth-card textarea,
.login-panel textarea {
  min-height: 128px;
  padding-top: 14px;
  line-height: 1.65;
  resize: vertical;
}

.field input::placeholder,
.filter-field input::placeholder,
.search::placeholder,
.global-search-input::placeholder,
.login-panel input::placeholder,
.auth-card input::placeholder {
  color: color-mix(in srgb, var(--muted) 82%, transparent);
  font-weight: 600;
}

.field input:hover,
.field select:hover,
.field textarea:hover,
.filter-field input:hover,
.filter-field select:hover,
.toolbar .search:hover,
.toolbar select:hover,
.search:hover,
.login-panel input:hover,
.auth-card input:hover {
  border-color: color-mix(in srgb, var(--accent) 45%, var(--border-strong));
}

.field input:focus,
.field select:focus,
.field textarea:focus,
.filter-field input:focus,
.filter-field select:focus,
.toolbar .search:focus,
.toolbar select:focus,
.search:focus,
.global-search-input:focus,
.login-panel input:focus,
.login-panel select:focus,
.auth-card input:focus,
.auth-card select:focus,
.auth-card textarea:focus {
  outline: none;
  border-color: var(--accent);
  background: var(--card);
  box-shadow:
    var(--ring),
    0 10px 24px color-mix(in srgb, var(--accent) 14%, transparent);
}

/* Dropdowns */
select:not([multiple]),
.field select:not([multiple]),
.filter-field select:not([multiple]),
.toolbar select:not([multiple]),
.login-panel select:not([multiple]),
.auth-card select:not([multiple]) {
  appearance: none !important;
  -webkit-appearance: none !important;
  cursor: pointer;
  padding-inline-end: 44px;
  background-color: var(--card);
  background-image: var(--chevron);
  background-repeat: no-repeat;
  background-size: 18px;
  background-position: left 14px center;
}

html[dir="ltr"] select:not([multiple]),
html[dir="ltr"] .field select:not([multiple]),
html[dir="ltr"] .filter-field select:not([multiple]),
html[dir="ltr"] .toolbar select:not([multiple]) {
  background-position: right 14px center;
}

select option,
select optgroup {
  color: var(--text);
  background: var(--card);
  font-weight: 600;
}

select[multiple] {
  min-height: 120px;
  padding: 10px;
}

.file-field input[type="file"] {
  padding: 10px 12px;
  background: var(--bg-soft);
  border: 1px dashed var(--border-strong);
}

.file-field input[type="file"]::file-selector-button {
  margin-inline-end: 12px;
  min-height: 36px;
  padding: 8px 14px;
  border: 0;
  border-radius: 12px;
  background: linear-gradient(180deg, var(--navy-700), var(--navy-900));
  color: #fff;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}

/* Login / public track fields */
.login-panel .field input,
.auth-card .field input,
.auth-card .field select {
  min-height: 52px;
  font-size: 1.02rem;
}

.landing-track-input-wrap {
  align-items: stretch;
  gap: 12px;
}

.landing-track-input-wrap input {
  min-height: 54px;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(6, 18, 28, 0.55);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.18) inset;
  font-size: 1.02rem;
  font-weight: 700;
}

.landing-track-input-wrap input:focus {
  border-color: var(--accent-2);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 28%, transparent);
}

.landing-track-btn {
  min-height: 54px;
  padding-inline: 22px;
  border-radius: 18px;
}

.global-search-field {
  position: relative;
}

.global-search-input {
  padding-inline-start: 42px;
  min-height: 44px;
  border-radius: 999px;
}

html[dir="ltr"] .global-search-input {
  padding-inline-start: 42px;
}

/* Dark controls */
html[data-theme="dark"] .field input,
html[data-theme="dark"] .field select,
html[data-theme="dark"] .field textarea,
html[data-theme="dark"] .filter-field input,
html[data-theme="dark"] .filter-field select,
html[data-theme="dark"] .toolbar .search,
html[data-theme="dark"] .toolbar select,
html[data-theme="dark"] .search,
html[data-theme="dark"] .global-search-input,
html[data-theme="dark"] .login-panel input,
html[data-theme="dark"] .auth-card input,
html[data-theme="dark"] .auth-card select,
html[data-theme="dark"] .auth-card textarea {
  background: linear-gradient(180deg, color-mix(in srgb, var(--card) 70%, #000), var(--bg-soft));
  border-color: var(--border-strong);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.22);
  color: var(--text);
}

html[data-theme="dark"] .field input:focus,
html[data-theme="dark"] .field select:focus,
html[data-theme="dark"] .filter-field select:focus,
html[data-theme="dark"] .search:focus {
  background: var(--card);
}

html[data-theme="dark"] .btn-outline {
  background: color-mix(in srgb, var(--card) 70%, transparent);
  color: var(--text);
}

html[data-theme="dark"] .field label,
html[data-theme="dark"] .filter-field label {
  color: #d5e4ef;
}

@media (max-width: 760px) {
  .btn,
  .field input,
  .field select,
  .filter-field input,
  .filter-field select,
  .toolbar select,
  .search {
    min-height: 48px;
  }

  .page-actions .btn,
  .filter-actions .btn {
    width: 100%;
  }
}

/* ═══════════════════════════════════════════════════════════════
   Dark theme: all copy is light so it stays readable everywhere
   ═══════════════════════════════════════════════════════════════ */
html[data-theme="dark"] {
  --text: #ffffff;
  --muted: #e4edf4;
  --ink: #ffffff;
  --ink-soft: #e8f1f7;
}

html[data-theme="dark"] body,
html[data-theme="dark"] .app-body,
html[data-theme="dark"] .public-body,
html[data-theme="dark"] .login-body,
html[data-theme="dark"] .auth-body {
  color: #fff;
}

html[data-theme="dark"] h1,
html[data-theme="dark"] h2,
html[data-theme="dark"] h3,
html[data-theme="dark"] h4,
html[data-theme="dark"] h5,
html[data-theme="dark"] h6,
html[data-theme="dark"] p,
html[data-theme="dark"] li,
html[data-theme="dark"] td,
html[data-theme="dark"] th,
html[data-theme="dark"] dt,
html[data-theme="dark"] dd,
html[data-theme="dark"] label,
html[data-theme="dark"] legend,
html[data-theme="dark"] summary,
html[data-theme="dark"] small,
html[data-theme="dark"] strong,
html[data-theme="dark"] em,
html[data-theme="dark"] b,
html[data-theme="dark"] span,
html[data-theme="dark"] a,
html[data-theme="dark"] .muted,
html[data-theme="dark"] .label,
html[data-theme="dark"] .value,
html[data-theme="dark"] .login-lead,
html[data-theme="dark"] .login-brand,
html[data-theme="dark"] .login-switch-program,
html[data-theme="dark"] .login-switch-program a,
html[data-theme="dark"] .page-head,
html[data-theme="dark"] .page-head h1,
html[data-theme="dark"] .page-head .muted,
html[data-theme="dark"] .field label,
html[data-theme="dark"] .filter-field label,
html[data-theme="dark"] .landing-track-label,
html[data-theme="dark"] .stat-card,
html[data-theme="dark"] .stat-card .label,
html[data-theme="dark"] .stat-card .value,
html[data-theme="dark"] .dash-section-title,
html[data-theme="dark"] .dash-section-sub,
html[data-theme="dark"] .dchart-head h2,
html[data-theme="dark"] .dchart-head .muted,
html[data-theme="dark"] .dchart-kicker,
html[data-theme="dark"] .dchart-caption,
html[data-theme="dark"] .dchart-bar-label,
html[data-theme="dark"] .dchart-bar-nums,
html[data-theme="dark"] .dchart-bar-nums strong,
html[data-theme="dark"] .dchart-legend-text,
html[data-theme="dark"] .dchart-legend-text span,
html[data-theme="dark"] .dchart-legend-text small,
html[data-theme="dark"] .dchart-donut-center strong,
html[data-theme="dark"] .dchart-donut-center span,
html[data-theme="dark"] .dchart-col-label,
html[data-theme="dark"] .dchart-col-val,
html[data-theme="dark"] .dchart-money span,
html[data-theme="dark"] .dchart-money strong,
html[data-theme="dark"] .dchart-flow-seg,
html[data-theme="dark"] .dchart-flow-seg strong,
html[data-theme="dark"] .dchart-flow-seg small,
html[data-theme="dark"] .program-chip,
html[data-theme="dark"] .user-chip,
html[data-theme="dark"] .user-meta strong,
html[data-theme="dark"] .user-meta small,
html[data-theme="dark"] .topbar,
html[data-theme="dark"] .topbar strong,
html[data-theme="dark"] .card,
html[data-theme="dark"] .panel,
html[data-theme="dark"] .empty,
html[data-theme="dark"] .empty p,
html[data-theme="dark"] table.data td,
html[data-theme="dark"] table.data th,
html[data-theme="dark"] table.data td a,
html[data-theme="dark"] table.data td a strong,
html[data-theme="dark"] .page-tabs-item,
html[data-theme="dark"] .page-tabs-item.is-active,
html[data-theme="dark"] .ptrack-code,
html[data-theme="dark"] .ptrack-meta,
html[data-theme="dark"] .ptrack-node-title,
html[data-theme="dark"] .ptrack-node-place,
html[data-theme="dark"] .ptrack-story-card,
html[data-theme="dark"] .ptrack-story-card h3,
html[data-theme="dark"] .ptrack-story-place,
html[data-theme="dark"] .ptrack-kicker,
html[data-theme="dark"] .ptrack-facts dt,
html[data-theme="dark"] .ptrack-facts dd,
html[data-theme="dark"] .ptrack-focus h2,
html[data-theme="dark"] .login-panel,
html[data-theme="dark"] .login-panel h1,
html[data-theme="dark"] .auth-card,
html[data-theme="dark"] .auth-card h1,
html[data-theme="dark"] .auth-card-brand,
html[data-theme="dark"] .landing-title,
html[data-theme="dark"] .landing-lead,
html[data-theme="dark"] .landing-section h2,
html[data-theme="dark"] .landing-section-lead,
html[data-theme="dark"] .landing-kicker,
html[data-theme="dark"] .landing-stat,
html[data-theme="dark"] .landing-stat-value,
html[data-theme="dark"] .landing-feature,
html[data-theme="dark"] .landing-step-card,
html[data-theme="dark"] .service-card,
html[data-theme="dark"] .about-value-card,
html[data-theme="dark"] .journey-step-card,
html[data-theme="dark"] .contact-info-card,
html[data-theme="dark"] .kv-row,
html[data-theme="dark"] .timeline-item,
html[data-theme="dark"] .notif-item,
html[data-theme="dark"] .chat-inbox-title,
html[data-theme="dark"] .chat-list-item,
html[data-theme="dark"] .chat-bubble,
html[data-theme="dark"] .pill,
html[data-theme="dark"] .china-board-head h3,
html[data-theme="dark"] .pending-accounts-banner,
html[data-theme="dark"] .pending-accounts-banner strong,
html[data-theme="dark"] .btn-outline,
html[data-theme="dark"] .btn-ghost,
html[data-theme="dark"] .icon-btn,
html[data-theme="dark"] .lang-switch a,
html[data-theme="dark"] .theme-switch a,
html[data-theme="dark"] .theme-switch button {
  color: #fff !important;
}

html[data-theme="dark"] .muted,
html[data-theme="dark"] .stat-card .label,
html[data-theme="dark"] .user-meta small,
html[data-theme="dark"] .dchart-caption,
html[data-theme="dark"] .dchart-head .muted,
html[data-theme="dark"] .ptrack-meta,
html[data-theme="dark"] .login-lead,
html[data-theme="dark"] .landing-lead,
html[data-theme="dark"] .landing-section-lead,
html[data-theme="dark"] table.data thead th,
html[data-theme="dark"] .ptrack-facts dt {
  color: #e4edf4 !important;
}

html[data-theme="dark"] a:hover {
  color: var(--accent-2) !important;
}

html[data-theme="dark"] .field input,
html[data-theme="dark"] .field select,
html[data-theme="dark"] .field textarea,
html[data-theme="dark"] .filter-field input,
html[data-theme="dark"] .filter-field select,
html[data-theme="dark"] .toolbar .search,
html[data-theme="dark"] .toolbar select,
html[data-theme="dark"] .search,
html[data-theme="dark"] .global-search-input,
html[data-theme="dark"] .login-panel input,
html[data-theme="dark"] .login-panel select,
html[data-theme="dark"] .auth-card input,
html[data-theme="dark"] .auth-card select,
html[data-theme="dark"] .auth-card textarea,
html[data-theme="dark"] .chat-composer textarea {
  color: #fff !important;
  caret-color: #fff;
}

html[data-theme="dark"] .field input::placeholder,
html[data-theme="dark"] .search::placeholder,
html[data-theme="dark"] .global-search-input::placeholder,
html[data-theme="dark"] .login-panel input::placeholder,
html[data-theme="dark"] .auth-card input::placeholder,
html[data-theme="dark"] .filter-field input::placeholder {
  color: #c5d4e0 !important;
  opacity: 1;
}

html[data-theme="dark"] .form-ok {
  color: #9af3c8 !important;
}

html[data-theme="dark"] .form-error,
html[data-theme="dark"] .login-error {
  color: #ffc4c4 !important;
}

/* Keep dark ink on gold / copper chips so it stays readable */
html[data-theme="dark"] .btn-gold,
html[data-theme="dark"] .btn-gold *,
html[data-theme="dark"] .program-chip em,
html[data-theme="dark"] .sidebar-program b,
html[data-theme="dark"] .dash-kicker span,
html[data-theme="dark"] .login-program-card em,
html[data-theme="dark"] .ptrack-chip-now,
html[data-theme="dark"] .ptrack-chip-now *,
html[data-theme="dark"] .lang-switch a.active,
html[data-theme="dark"] .public-header .lang-switch a.active,
html[data-theme="dark"] .sidebar-lang .lang-switch a.active {
  color: #1a1408 !important;
}

html[data-theme="dark"] .btn-primary,
html[data-theme="dark"] .btn-primary * {
  color: #fff !important;
}

html[data-theme="dark"] .pill-success { color: #b8f5d6 !important; }
html[data-theme="dark"] .pill-warning { color: #ffd89a !important; }
html[data-theme="dark"] .pill-danger { color: #ffc1c1 !important; }
html[data-theme="dark"] .pill-info { color: #b7e7f7 !important; }
html[data-theme="dark"] .pill-gold { color: #ffe7a8 !important; }
html[data-theme="dark"] .pill-neutral { color: #e4edf4 !important; }

/* ═══════════════════════════════════════════════════════════════
   Screen switcher — large clickable tabs inside every section
   ═══════════════════════════════════════════════════════════════ */
.page-tabs {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 8px 0 18px;
  padding: 14px 14px 16px;
  border-radius: 24px;
  background:
    radial-gradient(520px 160px at 100% 0%, color-mix(in srgb, var(--accent) 28%, transparent), transparent 58%),
    linear-gradient(135deg, var(--hero-1) 0%, var(--hero-2) 100%);
  border: 1px solid color-mix(in srgb, var(--accent) 28%, rgba(255, 255, 255, 0.12));
  box-shadow: var(--shadow-lift);
}

.page-tabs-hint {
  margin: 0 6px 2px;
  color: #fff !important;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.86;
}

.page-tabs-track {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.page-tabs-item {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 58px;
  padding: 10px 18px 10px 12px;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.08);
  color: #fff !important;
  font-size: 1.02rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  text-decoration: none;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.12);
  transition: transform 0.18s var(--ease), background 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.page-tabs-item:hover {
  transform: translateY(-3px);
  background: rgba(255, 255, 255, 0.16);
  border-color: var(--accent-2);
  color: #fff !important;
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.18);
}

.page-tabs-item.is-active {
  background: linear-gradient(180deg, var(--accent-2), var(--accent));
  border-color: color-mix(in srgb, var(--accent) 70%, #fff);
  color: #1a1408 !important;
  box-shadow: 0 14px 30px color-mix(in srgb, var(--accent) 42%, transparent);
  transform: translateY(-2px);
}

.page-tabs-item.is-active:hover {
  color: #1a1408 !important;
}

.page-tabs-index {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.16);
  color: #fff !important;
  font-size: 0.82rem;
  font-weight: 900;
}

.page-tabs-item.is-active .page-tabs-index {
  background: rgba(26, 20, 8, 0.16);
  color: #1a1408 !important;
}

.page-tabs-label {
  color: inherit !important;
}

.page-tabs-count {
  min-width: 28px;
  height: 28px;
  padding: 0 8px;
  margin-inline-start: 4px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.18);
  color: #fff !important;
  font-size: 0.78rem;
  font-weight: 900;
}

.page-tabs-item.is-active .page-tabs-count {
  background: #1a1408;
  color: var(--accent-2) !important;
}

.page-tabs-item.is-active::after {
  content: "";
  position: absolute;
  inset-inline: 18px;
  bottom: 6px;
  height: 3px;
  border-radius: 99px;
  background: rgba(26, 20, 8, 0.28);
}

.page-tab-panel {
  margin-top: 4px;
  border-radius: 22px;
}

html[data-theme="dark"] .page-tabs {
  background:
    radial-gradient(520px 160px at 100% 0%, color-mix(in srgb, var(--accent) 32%, transparent), transparent 58%),
    linear-gradient(135deg, #070b12, var(--hero-2));
}

html[data-theme="dark"] .page-tabs-hint,
html[data-theme="dark"] .page-tabs-item,
html[data-theme="dark"] .page-tabs-item .page-tabs-label,
html[data-theme="dark"] .page-tabs-index,
html[data-theme="dark"] .page-tabs-count {
  color: #fff !important;
}

html[data-theme="dark"] .page-tabs-item.is-active,
html[data-theme="dark"] .page-tabs-item.is-active .page-tabs-label,
html[data-theme="dark"] .page-tabs-item.is-active .page-tabs-index {
  color: #1a1408 !important;
}

html[data-theme="dark"] .page-tabs-item.is-active .page-tabs-count {
  color: var(--accent-2) !important;
}

@media (max-width: 760px) {
  .page-tabs-track {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 4px;
    scroll-snap-type: x proximity;
  }

  .page-tabs-item {
    flex: 0 0 auto;
    scroll-snap-align: start;
    min-width: 168px;
  }
}