/* Dark theme tokens (optional; default StudioFlow appearance is sunlit — see sf-theme-sunlit.css) */
html[data-sf-theme="dark"] {
  --sf-bg: #090d16;
  --sf-bg-soft: #111827;
  --sf-panel: #101a2c;
  --sf-panel-2: #0d1525;
  --sf-line: #22314d;
  --sf-text: #f5f8ff;
  --sf-muted: #bccae2;
  --sf-muted-2: #d7e1f2;
  --sf-accent: #8ff36f;
  --sf-accent-2: #58d6ff;
  --sf-danger: #ff7f9b;
  --sf-radius: 18px;
  --sf-shadow: 0 16px 40px rgba(2, 6, 23, 0.42);
}

html[data-sf-theme="dark"] body[data-page^="sf-"] {
  background:
    radial-gradient(1200px 500px at 15% -10%, rgba(88, 214, 255, 0.2), transparent 50%),
    radial-gradient(1000px 480px at 100% -20%, rgba(143, 243, 111, 0.14), transparent 58%),
    var(--sf-bg);
  color: var(--sf-text);
  line-height: 1.45;
}

html[data-sf-theme="dark"] body[data-page^="sf-"] .wrap,
html[data-sf-theme="dark"] body[data-page^="sf-"] .shell,
html[data-sf-theme="dark"] body[data-page^="sf-"] .card {
  position: relative;
}

html[data-sf-theme="dark"] body[data-page^="sf-"] .panel,
html[data-sf-theme="dark"] body[data-page^="sf-"] .card {
  background: linear-gradient(170deg, rgba(16, 26, 44, 0.98), rgba(13, 21, 37, 0.98));
  border: 1px solid #2d4062;
  border-radius: var(--sf-radius);
  box-shadow: var(--sf-shadow);
}

html[data-sf-theme="dark"] body[data-page^="sf-"] .wrap {
  max-width: 1180px;
  margin-inline: auto;
}

html[data-sf-theme="dark"] body[data-page^="sf-"] .header {
  padding: 18px 20px;
  border: 1px solid #2a3d5f;
  border-radius: 16px;
  background: rgba(12, 21, 36, 0.82);
}

html[data-sf-theme="dark"] body[data-page^="sf-"] h1 {
  letter-spacing: -0.02em;
  color: #f8fbff;
}

html[data-sf-theme="dark"] body[data-page^="sf-"] h2,
html[data-sf-theme="dark"] body[data-page^="sf-"] h3,
html[data-sf-theme="dark"] body[data-page^="sf-"] h4 {
  color: #ecf3ff;
}

html[data-sf-theme="dark"] body[data-page^="sf-"] .eyebrow {
  color: var(--sf-accent);
}

html[data-sf-theme="dark"] body[data-page^="sf-"] p,
html[data-sf-theme="dark"] body[data-page^="sf-"] .meta {
  color: var(--sf-muted-2);
}

html[data-sf-theme="dark"] body[data-page^="sf-"] .text-slate-900 {
  color: #f8fbff !important;
}

html[data-sf-theme="dark"] body[data-page^="sf-"] .text-slate-700,
html[data-sf-theme="dark"] body[data-page^="sf-"] .text-slate-800,
html[data-sf-theme="dark"] body[data-page^="sf-"] .text-slate-700 {
  color: #d4dff0 !important;
}

html[data-sf-theme="dark"] body[data-page^="sf-"] .text-slate-400 {
  color: #aebfdc !important;
}

html[data-sf-theme="dark"] body[data-page^="sf-"] input,
html[data-sf-theme="dark"] body[data-page^="sf-"] select,
html[data-sf-theme="dark"] body[data-page^="sf-"] textarea {
  background: #091224;
  border: 1px solid #243754;
  border-radius: 14px;
  color: var(--sf-text);
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

html[data-sf-theme="dark"] body[data-page^="sf-"] input:focus,
html[data-sf-theme="dark"] body[data-page^="sf-"] select:focus,
html[data-sf-theme="dark"] body[data-page^="sf-"] textarea:focus {
  outline: none;
  border-color: rgba(88, 214, 255, 0.75);
  box-shadow: 0 0 0 3px rgba(88, 214, 255, 0.18);
}

html[data-sf-theme="dark"] body[data-page^="sf-"] .btn,
html[data-sf-theme="dark"] body[data-page^="sf-"] .btn-link {
  border-radius: 12px;
  transition: transform 0.15s ease, box-shadow 0.2s ease, opacity 0.2s ease, filter 0.2s ease;
  font-weight: 800;
}

html[data-sf-theme="dark"] body[data-page^="sf-"] .btn:hover,
html[data-sf-theme="dark"] body[data-page^="sf-"] .btn-link:hover {
  transform: translateY(-1px);
}

html[data-sf-theme="dark"] body[data-page^="sf-"] .btn-primary,
html[data-sf-theme="dark"] body[data-page^="sf-"] .btn-link.btn-primary {
  background: #0f766e;
  color: #ffffff;
  box-shadow: 0 8px 20px rgba(15, 118, 110, 0.25);
  border: 1px solid rgba(23, 126, 116, 0.9);
  min-height: 46px;
  font-size: 0.98rem;
  font-weight: 800;
}

html[data-sf-theme="dark"] body[data-page^="sf-"] .btn-secondary,
html[data-sf-theme="dark"] body[data-page^="sf-"] .btn-link.btn-secondary,
html[data-sf-theme="dark"] body[data-page^="sf-"] .links a {
  border: 1px solid #3a5079;
  background: rgba(9, 17, 31, 0.88);
  color: #e2ebfb;
  min-height: 44px;
}

html[data-sf-theme="dark"] body[data-page^="sf-"] .btn-primary:hover,
html[data-sf-theme="dark"] body[data-page^="sf-"] .btn-link.btn-primary:hover {
  filter: brightness(1.02);
  box-shadow: 0 18px 34px rgba(143, 243, 111, 0.34);
}

html[data-sf-theme="dark"] body[data-page^="sf-"] .btn-secondary:hover,
html[data-sf-theme="dark"] body[data-page^="sf-"] .btn-link.btn-secondary:hover {
  border-color: #4d689a;
  background: rgba(14, 24, 42, 0.95);
}

html[data-sf-theme="dark"] body[data-page^="sf-"] section + section {
  margin-top: 22px;
}

html[data-sf-theme="dark"] body[data-page^="sf-"] .card,
html[data-sf-theme="dark"] body[data-page^="sf-"] .panel {
  box-shadow: 0 14px 32px rgba(3, 10, 22, 0.5);
}

html[data-sf-theme="dark"] body[data-page="sf-app"] {
  background:
    radial-gradient(1000px 420px at 0% -10%, rgba(88, 214, 255, 0.16), transparent 55%),
    radial-gradient(900px 380px at 100% -20%, rgba(143, 243, 111, 0.12), transparent 60%),
    var(--sf-bg);
  color: var(--sf-text);
}

html[data-sf-theme="dark"] body[data-page="sf-public"] {
  background:
    radial-gradient(1200px 520px at 0% -10%, rgba(72, 124, 255, 0.22), transparent 56%),
    radial-gradient(1000px 420px at 100% -12%, rgba(94, 224, 255, 0.14), transparent 58%),
    #070c16 !important;
  color: #eef4ff;
}

html[data-sf-theme="dark"] body[data-page="sf-public"] .card,
html[data-sf-theme="dark"] body[data-page="sf-public"] .panel {
  border-color: #2b3f62;
}

html[data-sf-theme="dark"] body[data-page="sf-public"] .eyebrow {
  color: #86ee68 !important;
}

html[data-sf-theme="dark"] body[data-page="sf-public"] .btn-primary {
  background: linear-gradient(145deg, #76ea53, #acff6a) !important;
  color: #0a1304 !important;
}

html[data-sf-theme="dark"] body[data-page="sf-public"] .btn-secondary {
  background: rgba(10, 18, 34, 0.7) !important;
  border-color: #2a3a59 !important;
}

html[data-sf-theme="dark"] body[data-page="sf-student"] {
  background:
    radial-gradient(900px 420px at 0% -12%, rgba(90, 188, 255, 0.17), transparent 60%),
    radial-gradient(900px 420px at 100% -16%, rgba(143, 243, 111, 0.12), transparent 62%),
    #090e19;
}

html[data-sf-theme="dark"] body[data-page="sf-student"] .header p {
  color: #d4e0f3;
}

html[data-sf-theme="dark"] body[data-page="sf-student"] .stats .card,
html[data-sf-theme="dark"] body[data-page="sf-student"] .grid .card,
html[data-sf-theme="dark"] body[data-page="sf-student"] .panel {
  border-color: #2a3d60;
}

html[data-sf-theme="dark"] body[data-page="sf-student"] .value,
html[data-sf-theme="dark"] body[data-page="sf-student"] .price {
  letter-spacing: -0.02em;
}

html[data-sf-theme="dark"] body[data-page="sf-student"] .status.ok {
  color: #8ff36f;
}

html[data-sf-theme="dark"] body[data-page="sf-student"] .status.err {
  color: #ff95a2;
}

html[data-sf-theme="dark"] body[data-page="sf-staff"] {
  background:
    radial-gradient(900px 420px at 0% -12%, rgba(88, 214, 255, 0.18), transparent 58%),
    radial-gradient(900px 420px at 100% -16%, rgba(143, 243, 111, 0.12), transparent 64%),
    #080d17 !important;
}

html[data-sf-theme="dark"] body[data-page="sf-staff"] .header,
html[data-sf-theme="dark"] body[data-page="sf-staff"] header:not(.sf-project-credit),
html[data-sf-theme="dark"] body[data-page="sf-staff"] #maintBanner {
  border-radius: 16px;
}

html[data-sf-theme="dark"] body[data-page="sf-staff"] .card,
html[data-sf-theme="dark"] body[data-page="sf-staff"] .panel,
html[data-sf-theme="dark"] body[data-page="sf-staff"] #historyPanel,
html[data-sf-theme="dark"] body[data-page="sf-staff"] #maintBanner {
  background: linear-gradient(170deg, rgba(15, 25, 42, 0.98), rgba(11, 19, 33, 0.98)) !important;
  border-color: #273959 !important;
  color: #eaf2ff;
}

html[data-sf-theme="dark"] body[data-page="sf-staff"] .sidebar,
html[data-sf-theme="dark"] body[data-page="sf-staff"] aside.sidebar {
  background: rgba(11, 20, 35, 0.95) !important;
  border-right-color: #243754 !important;
}

html[data-sf-theme="dark"] body[data-page="sf-staff"] .sidebar-link {
  color: #cfdbf2 !important;
}

html[data-sf-theme="dark"] body[data-page="sf-staff"] .sidebar-link.active {
  background: linear-gradient(130deg, #89ef69, #68d9ff) !important;
  color: #07120a !important;
}

html[data-sf-theme="dark"] body[data-page="sf-app"] .container,
html[data-sf-theme="dark"] body[data-page="sf-app"] .wrap,
html[data-sf-theme="dark"] body[data-page="sf-app"] main,
html[data-sf-theme="dark"] body[data-page="sf-app"] section {
  max-width: 1180px;
}

html[data-sf-theme="dark"] body[data-page="sf-app"] table {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid #2a3a59;
  border-radius: 12px;
  overflow: hidden;
}

html[data-sf-theme="dark"] body[data-page="sf-app"] th,
html[data-sf-theme="dark"] body[data-page="sf-app"] td {
  border-bottom: 1px solid #253754;
  padding: 10px 12px;
}

html[data-sf-theme="dark"] body[data-page="sf-app"] tr:hover td {
  background: rgba(88, 214, 255, 0.06);
}

html[data-sf-theme="dark"] body[data-page="sf-app"] .status,
html[data-sf-theme="dark"] body[data-page="sf-app"] .feedback {
  font-weight: 700;
}

html[data-sf-theme="dark"] body[data-page="sf-book"] .header,
html[data-sf-theme="dark"] body[data-page="sf-shop"] .header {
  margin-bottom: 20px;
  padding: 16px 18px;
  border: 1px solid #22314d;
  border-radius: 16px;
  background: rgba(12, 21, 36, 0.72);
}

html[data-sf-theme="dark"] body[data-page="sf-book"] .slots .slot,
html[data-sf-theme="dark"] body[data-page="sf-shop"] .card {
  box-shadow: 0 8px 24px rgba(5, 12, 24, 0.35);
}

html[data-sf-theme="dark"] body[data-page="sf-book"] .slot:hover {
  border-color: #4bc9f6;
  transform: translateY(-1px);
}

html[data-sf-theme="dark"] body[data-page="sf-book"] #bookBtn,
html[data-sf-theme="dark"] body[data-page="sf-shop"] .btn {
  min-height: 46px;
}

html[data-sf-theme="dark"] body[data-page="sf-shop"] .grid {
  gap: 20px;
}

html[data-sf-theme="dark"] body[data-page="sf-shop"] .card h2 {
  margin: 8px 0;
  font-size: 1.2rem;
  letter-spacing: -0.01em;
}

html[data-sf-theme="dark"] body[data-page="sf-shop"] .nav a {
  margin-left: 0;
  padding: 8px 12px;
  border-radius: 10px;
  border: 1px solid #2a3a59;
  background: rgba(10, 18, 34, 0.72);
}

html[data-sf-theme="dark"] body[data-page="sf-admin-legacy"] {
  background:
    radial-gradient(900px 420px at 0% -12%, rgba(88, 214, 255, 0.18), transparent 58%),
    radial-gradient(900px 420px at 100% -16%, rgba(143, 243, 111, 0.14), transparent 62%),
    #090d16 !important;
}

html[data-sf-theme="dark"] body[data-page="sf-admin-legacy"] .sidebar {
  background: rgba(12, 20, 35, 0.95) !important;
  border-right-color: #22314d !important;
}

html[data-sf-theme="dark"] body[data-page="sf-admin-legacy"] .card {
  background: linear-gradient(170deg, rgba(15, 25, 42, 0.98), rgba(11, 19, 33, 0.98)) !important;
  border-color: #263857 !important;
  color: #e8f1ff;
}

html[data-sf-theme="dark"] body[data-page="sf-admin-legacy"] .sidebar-link {
  color: #acc0e7 !important;
}

html[data-sf-theme="dark"] body[data-page="sf-admin-legacy"] .sidebar-link:hover {
  background: rgba(90, 111, 152, 0.2) !important;
  color: #dff3ff !important;
}

html[data-sf-theme="dark"] body[data-page="sf-admin-legacy"] .sidebar-link.active {
  background: linear-gradient(130deg, #86ed64, #5fd6ff) !important;
  color: #07120a !important;
}

html[data-sf-theme="dark"] body[data-page="sf-admin-legacy"] main p,
html[data-sf-theme="dark"] body[data-page="sf-admin-legacy"] .text-slate-700,
html[data-sf-theme="dark"] body[data-page="sf-admin-legacy"] .text-slate-400 {
  color: #9fb4db !important;
}

html[data-sf-theme="dark"] body[data-page="sf-admin-legacy"] #maintBanner,
html[data-sf-theme="dark"] body[data-page="sf-admin-legacy"] #overdueAlert {
  border: 1px solid #2a3c5d;
}

html[data-sf-theme="dark"] body[data-page="sf-admin"] .header,
html[data-sf-theme="dark"] body[data-page="sf-portal"] .header {
  margin-bottom: 24px;
  padding: 18px 20px;
  border: 1px solid #22314d;
  border-radius: 16px;
  background: rgba(13, 23, 38, 0.68);
  backdrop-filter: blur(8px);
}

html[data-sf-theme="dark"] body[data-page="sf-admin"] .row,
html[data-sf-theme="dark"] body[data-page="sf-portal"] .item {
  background: rgba(11, 20, 35, 0.72);
  border: 1px solid rgba(37, 56, 84, 0.9);
  border-radius: 12px;
  padding: 12px 14px;
}

html[data-sf-theme="dark"] body[data-page="sf-admin"] .table,
html[data-sf-theme="dark"] body[data-page="sf-portal"] .list {
  gap: 10px;
}

html[data-sf-theme="dark"] body[data-page="sf-auth"] .card,
html[data-sf-theme="dark"] body[data-page="sf-register"] .card {
  border-radius: 20px;
}

html[data-sf-theme="dark"] body[data-page="sf-home"] {
  background:
    radial-gradient(1200px 500px at 10% -10%, rgba(60, 98, 210, 0.28), transparent 55%),
    radial-gradient(1200px 500px at 100% 0%, rgba(58, 198, 255, 0.2), transparent 50%),
    #060a14 !important;
  color: #eef4ff;
}

html[data-sf-theme="dark"] body[data-page="sf-home"] .hero-gradient {
  background: transparent;
}

html[data-sf-theme="dark"] body[data-page="sf-home"] .btn-primary {
  background: linear-gradient(145deg, #7df259, #b9ff75);
  color: #081303;
}

html[data-sf-theme="dark"] body[data-page="sf-home"] nav,
html[data-sf-theme="dark"] body[data-page="sf-home"] header,
html[data-sf-theme="dark"] body[data-page="sf-home"] section,
html[data-sf-theme="dark"] body[data-page="sf-home"] footer {
  max-width: 1180px !important;
}

html[data-sf-theme="dark"] body[data-page="sf-home"] #features {
  border-top-color: #1f2f4d !important;
}

html[data-sf-theme="dark"] body[data-page="sf-home"] .text-slate-900 {
  color: #f3f8ff !important;
}

html[data-sf-theme="dark"] body[data-page="sf-home"] .text-slate-800,
html[data-sf-theme="dark"] body[data-page="sf-home"] .text-slate-700,
html[data-sf-theme="dark"] body[data-page="sf-home"] .text-slate-400 {
  color: #d2def3 !important;
}

html[data-sf-theme="dark"] body[data-page="sf-home"] .text-teal-800,
html[data-sf-theme="dark"] body[data-page="sf-home"] .text-teal-700 {
  color: #f4f8ff !important;
}

html[data-sf-theme="dark"] body[data-page="sf-home"] .border-slate-100 {
  border-color: #22314d !important;
}

html[data-sf-theme="dark"] body[data-page="sf-home"] #termsModal .text-slate-900 {
  color: #0f172a !important;
}

html[data-sf-theme="dark"] body[data-page="sf-home"] #termsModal .text-slate-800,
html[data-sf-theme="dark"] body[data-page="sf-home"] #termsModal .text-slate-700 {
  color: #475569 !important;
}