:root {
  --sneat-primary: #696cff;
  --sneat-primary-rgb: 105, 108, 255;
  --sneat-bg: #f5f5f9;
  --sneat-card: #fff;
  --sneat-heading: #384551;
  --sneat-body: #697a8d;
  --sneat-muted: #a1acb8;
  --sneat-border: #d9dee3;
  --sneat-soft-border: #eceef1;
  --sneat-menu-width: 16.25rem;
  --sneat-shadow: 0 0.125rem 0.375rem rgba(67, 89, 113, 0.12);
  --sneat-shadow-lg: 0 0.625rem 1.25rem rgba(67, 89, 113, 0.12);
}

* { box-sizing: border-box; }
html { min-height: 100%; }
body {
  margin: 0;
  min-height: 100%;
  color: var(--sneat-body);
  background: var(--sneat-bg);
  font-family: 'Public Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 0.9375rem;
  line-height: 1.53;
}
a { color: var(--sneat-primary); text-decoration: none; }
a:hover { color: #5f61e6; }
img { max-width: 100%; }
button, input, textarea, select { font: inherit; }
[x-cloak], .d-none { display: none !important; }

.layout-wrapper { width: 100%; min-height: 100vh; }
.layout-container { display: flex; min-height: 100vh; }
.layout-menu {
  position: fixed;
  inset: 0 auto 0 0;
  width: var(--sneat-menu-width);
  background: #fff;
  color: var(--sneat-body);
  z-index: 1080;
  display: flex;
  flex-direction: column;
  box-shadow: var(--sneat-shadow);
  transition: transform .25s ease;
}
.layout-page {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 100vh;
  padding-left: var(--sneat-menu-width);
  display: flex;
  flex-direction: column;
}
.content-wrapper { flex: 1 1 auto; display: flex; flex-direction: column; }
.container-xxl { width: 100%; max-width: 1440px; margin: 0 auto; padding-right: 1.5rem; padding-left: 1.5rem; }
.container-p-y { padding-top: 1.5rem; padding-bottom: 1.5rem; }
.layout-overlay { display: none; }

.app-brand {
  min-height: 4.75rem;
  display: flex;
  align-items: center;
  padding: 0 1.5rem;
}
.app-brand-link { display: inline-flex; align-items: center; gap: .75rem; color: var(--sneat-heading); }
.app-brand-logo {
  width: 2.35rem;
  height: 2.35rem;
  display: grid;
  place-items: center;
  border-radius: .65rem;
  color: #fff;
  background: linear-gradient(135deg, #696cff, #8c8eff);
  font-weight: 800;
  box-shadow: 0 .5rem 1rem rgba(var(--sneat-primary-rgb), .25);
}
.app-brand-text { font-size: 1.15rem; letter-spacing: -.02em; color: var(--sneat-heading); }
.app-brand-subtitle { display: block; margin-top: .15rem; font-size: .73rem; color: var(--sneat-muted); font-weight: 500; }
.menu-divider { height: 1px; background: var(--sneat-soft-border); }
.menu-inner { list-style: none; padding: .75rem .75rem 1rem; margin: 0; overflow-y: auto; flex: 1 1 auto; }
.menu-header { padding: .85rem 1rem .45rem; }
.menu-header-text { font-size: .70rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--sneat-muted); }
.menu-item { margin: .125rem 0; }
.menu-link {
  min-height: 2.75rem;
  border-radius: .5rem;
  color: var(--sneat-body);
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .625rem 1rem;
  font-weight: 500;
  transition: all .18s ease;
}
.menu-link:hover { background: #f6f7fb; color: var(--sneat-heading); }
.menu-item.active > .menu-link {
  color: var(--sneat-primary);
  background: #f0f0ff;
  box-shadow: 0 .125rem .375rem rgba(var(--sneat-primary-rgb), .14);
}
.menu-link i { font-size: 1.25rem; width: 1.25rem; height: 1.25rem; }
.menu-footer { padding: 1rem; border-top: 1px solid var(--sneat-soft-border); }
.admin-profile-box { border-radius: .75rem; background: #f8f8fb; padding: 1rem; }

.layout-navbar {
  min-height: 4rem;
  margin: 1rem 1.5rem 0;
  padding: .65rem 1rem;
  background: rgba(255,255,255,.95);
  border-radius: .75rem;
  box-shadow: var(--sneat-shadow);
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: sticky;
  top: 1rem;
  z-index: 1030;
  backdrop-filter: saturate(200%) blur(6px);
}
.navbar-left, .navbar-right { display: flex; align-items: center; gap: .75rem; min-width: 0; }
.navbar-title { color: var(--sneat-heading); font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.navbar-date { padding: .45rem .75rem; background: #f6f7fb; border-radius: .5rem; color: var(--sneat-body); font-size: .82rem; font-weight: 600; }
.layout-menu-toggle { cursor: pointer; }
.nav-link-icon { width: 2.5rem; height: 2.5rem; border-radius: .5rem; display: grid; place-items: center; color: var(--sneat-body); background: transparent; border: 0; }
.nav-link-icon:hover { background: #f6f7fb; color: var(--sneat-primary); }

.dropdown { position: relative; }
.dropdown-toggle { border: 0; background: transparent; padding: 0; cursor: pointer; }
.dropdown-menu {
  position: absolute;
  z-index: 1090;
  right: 0;
  top: calc(100% + .5rem);
  min-width: 15rem;
  padding: .5rem 0;
  margin: 0;
  list-style: none;
  background: #fff;
  border: 1px solid rgba(67,89,113,.08);
  border-radius: .5rem;
  box-shadow: var(--sneat-shadow-lg);
  display: none;
}
.dropdown.show .dropdown-menu { display: block; }
.dropdown-item {
  width: 100%;
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .55rem 1rem;
  color: var(--sneat-body);
  background: transparent;
  border: 0;
  text-align: left;
  cursor: pointer;
}
.dropdown-item:hover { background: #f6f7fb; color: var(--sneat-primary); }
.dropdown-divider { height: 1px; background: var(--sneat-soft-border); margin: .5rem 0; }

.avatar { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; }
.avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.avatar-online::after {
  content: '';
  position: absolute;
  right: 1px;
  bottom: 1px;
  width: .7rem;
  height: .7rem;
  border: 2px solid #fff;
  border-radius: 50%;
  background: #71dd37;
}
.avatar-initial { width: 100%; height: 100%; display: grid; place-items: center; border-radius: .5rem; }

.page-heading {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: flex-start;
  margin-bottom: 1.5rem;
}
.page-eyebrow { margin: 0 0 .25rem; color: var(--sneat-primary); text-transform: uppercase; letter-spacing: .04em; font-size: .75rem; font-weight: 700; }
.page-title { margin: 0; color: var(--sneat-heading); font-weight: 800; font-size: 1.65rem; letter-spacing: -.03em; }
.page-subtitle { margin: .35rem 0 0; color: var(--sneat-muted); }

.row { --gutter-x: 1.5rem; --gutter-y: 1.5rem; display: flex; flex-wrap: wrap; margin-top: calc(-1 * var(--gutter-y)); margin-right: calc(-.5 * var(--gutter-x)); margin-left: calc(-.5 * var(--gutter-x)); }
.row > * { width: 100%; max-width: 100%; padding-right: calc(var(--gutter-x) * .5); padding-left: calc(var(--gutter-x) * .5); margin-top: var(--gutter-y); }
.g-2 { --gutter-x: .5rem; --gutter-y: .5rem; }
.g-3 { --gutter-x: 1rem; --gutter-y: 1rem; }
.g-4 { --gutter-x: 1.5rem; --gutter-y: 1.5rem; }
.col { flex: 1 0 0%; }
.col-12 { flex: 0 0 auto; width: 100%; }
@media (min-width: 576px) { .col-sm-6 { flex: 0 0 auto; width: 50%; } .d-sm-flex { display: flex !important; } }
@media (min-width: 768px) { .col-md-4 { flex: 0 0 auto; width: 33.333333%; } .col-md-6 { flex: 0 0 auto; width: 50%; } .col-md-8 { flex: 0 0 auto; width: 66.666667%; } }
@media (min-width: 992px) { .col-lg-3 { flex: 0 0 auto; width: 25%; } .col-lg-4 { flex: 0 0 auto; width: 33.333333%; } .col-lg-5 { flex: 0 0 auto; width: 41.666667%; } .col-lg-7 { flex: 0 0 auto; width: 58.333333%; } .col-lg-8 { flex: 0 0 auto; width: 66.666667%; } .col-lg-12 { flex: 0 0 auto; width: 100%; } }
@media (min-width: 1200px) { .col-xl-3 { flex: 0 0 auto; width: 25%; } .col-xl-4 { flex: 0 0 auto; width: 33.333333%; } .col-xl-5 { flex: 0 0 auto; width: 41.666667%; } .col-xl-7 { flex: 0 0 auto; width: 58.333333%; } .col-xl-8 { flex: 0 0 auto; width: 66.666667%; } }

.card { background: var(--sneat-card); border: 0; border-radius: .75rem; box-shadow: var(--sneat-shadow); color: var(--sneat-body); }
.card-header { padding: 1.25rem 1.5rem; border-bottom: 1px solid var(--sneat-soft-border); display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; }
.card-body { padding: 1.5rem; }
.card-footer { padding: 1.25rem 1.5rem; border-top: 1px solid var(--sneat-soft-border); background: transparent; }
.card-title { margin: 0; color: var(--sneat-heading); font-weight: 700; }
.card-subtitle { margin: .25rem 0 0; color: var(--sneat-muted); font-size: .875rem; }
.stat-value { margin: .35rem 0 0; font-size: 1.75rem; line-height: 1.2; color: var(--sneat-heading); font-weight: 800; }

.table-responsive { width: 100%; overflow-x: auto; }
.table { width: 100%; margin: 0; border-collapse: collapse; vertical-align: middle; color: var(--sneat-body); }
.table > :not(caption) > * > * { padding: 1rem 1.5rem; border-bottom: 1px solid var(--sneat-soft-border); }
.table thead th { color: var(--sneat-heading); font-size: .78rem; text-transform: uppercase; letter-spacing: .03em; font-weight: 700; background: #f6f7fb; }
.table tbody tr:hover { background: #fafafb; }
.table tbody tr:last-child td { border-bottom: 0; }
.table-nowrap td, .table-nowrap th { white-space: nowrap; }

.form-label { display: block; margin-bottom: .45rem; color: var(--sneat-heading); font-weight: 600; }
.form-control, .form-select {
  display: block;
  width: 100%;
  padding: .625rem .875rem;
  border: 1px solid var(--sneat-border);
  border-radius: .5rem;
  background: #fff;
  color: var(--sneat-heading);
  outline: 0;
  min-height: 2.65rem;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.form-control:focus, .form-select:focus { border-color: var(--sneat-primary); box-shadow: 0 0 0 .18rem rgba(var(--sneat-primary-rgb), .16); }
textarea.form-control { min-height: 6rem; resize: vertical; }
.form-text { margin-top: .35rem; font-size: .80rem; color: var(--sneat-muted); }
.form-check { display: flex; gap: .75rem; align-items: flex-start; }
.form-check-input { flex: 0 0 auto; width: 1.1rem; height: 1.1rem; margin-top: .2rem; accent-color: var(--sneat-primary); }
.form-check-label { color: var(--sneat-heading); font-weight: 600; }
.input-group { display: flex; align-items: stretch; width: 100%; }
.input-group .form-control { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.input-group .btn { border-top-left-radius: 0; border-bottom-left-radius: 0; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  min-height: 2.4rem;
  padding: .55rem 1rem;
  border: 1px solid transparent;
  border-radius: .5rem;
  font-weight: 600;
  line-height: 1.25;
  cursor: pointer;
  transition: all .18s ease;
  text-decoration: none;
  white-space: nowrap;
}
.btn-sm { min-height: 2.05rem; padding: .375rem .75rem; font-size: .82rem; }
.btn-lg { min-height: 2.8rem; padding: .75rem 1.25rem; }
.btn-primary { background: var(--sneat-primary); border-color: var(--sneat-primary); color: #fff; box-shadow: 0 .125rem .375rem rgba(var(--sneat-primary-rgb), .25); }
.btn-primary:hover { background: #5f61e6; border-color: #5f61e6; color: #fff; transform: translateY(-1px); }
.btn-secondary { background: #8592a3; border-color: #8592a3; color: #fff; }
.btn-secondary:hover { background: #788393; color: #fff; }
.btn-info { background: #03c3ec; border-color: #03c3ec; color: #fff; }
.btn-info:hover { background: #02a6c9; color: #fff; }
.btn-success { background: #71dd37; border-color: #71dd37; color: #fff; }
.btn-success:hover { background: #60bd2f; color: #fff; }
.btn-danger { background: #ff3e1d; border-color: #ff3e1d; color: #fff; }
.btn-danger:hover { background: #e6381a; color: #fff; }
.btn-dark { background: #384551; border-color: #384551; color: #fff; }
.btn-dark:hover { background: #2f3a44; color: #fff; }
.btn-outline-secondary { background: transparent; border-color: var(--sneat-border); color: var(--sneat-body); }
.btn-outline-secondary:hover { background: #f6f7fb; color: var(--sneat-heading); }
.btn-outline-danger { background: transparent; border-color: #ffc5bb; color: #ff3e1d; }
.btn-outline-danger:hover { background: #fff0ed; color: #ff3e1d; }
.btn-icon { width: 2.4rem; padding: 0; }
.w-100 { width: 100% !important; }

.badge { display: inline-flex; align-items: center; border-radius: 50rem; padding: .35rem .65rem; font-size: .75rem; font-weight: 700; line-height: 1; white-space: nowrap; }
.bg-label-primary { background: #e7e7ff; color: var(--sneat-primary); }
.bg-label-success { background: #e8fadf; color: #42b016; }
.bg-label-info { background: #d7f5fc; color: #03a6c9; }
.bg-label-warning { background: #fff2d6; color: #ffab00; }
.bg-label-danger { background: #ffe0db; color: #ff3e1d; }
.bg-label-secondary { background: #ebeef0; color: #8592a3; }

.alert { padding: 1rem 1.25rem; border-radius: .65rem; margin-bottom: 1.25rem; border: 1px solid transparent; }
.alert-success { background: #edfbe8; color: #2e8f10; border-color: #d8f6cf; }
.alert-danger { background: #fff0ed; color: #c7351c; border-color: #ffd7cf; }
.alert-title { font-weight: 700; margin-bottom: .35rem; }

.media-row { display: flex; align-items: center; gap: 1rem; min-width: 15rem; }
.thumb { width: 4.5rem; height: 3.8rem; border-radius: .6rem; overflow: hidden; background: #f0f2f5; flex: 0 0 auto; display: grid; place-items: center; color: var(--sneat-muted); }
.thumb img { width: 100%; height: 100%; object-fit: cover; }
.text-heading { color: var(--sneat-heading) !important; }
.text-muted { color: var(--sneat-muted) !important; }
.text-body { color: var(--sneat-body) !important; }
.fw-semibold { font-weight: 600 !important; }
.fw-bold { font-weight: 700 !important; }
.small { font-size: .82rem !important; }
.text-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.text-end { text-align: right !important; }
.text-center { text-align: center !important; }
.d-flex { display: flex !important; }
.d-grid { display: grid !important; }
.d-inline-flex { display: inline-flex !important; }
.flex-wrap { flex-wrap: wrap !important; }
.flex-column { flex-direction: column !important; }
.align-items-center { align-items: center !important; }
.align-items-start { align-items: flex-start !important; }
.justify-content-between { justify-content: space-between !important; }
.justify-content-end { justify-content: flex-end !important; }
.justify-content-center { justify-content: center !important; }
.gap-1 { gap: .25rem !important; }
.gap-2 { gap: .5rem !important; }
.gap-3 { gap: 1rem !important; }
.gap-4 { gap: 1.5rem !important; }
.mb-0 { margin-bottom: 0 !important; }
.mb-1 { margin-bottom: .25rem !important; }
.mb-2 { margin-bottom: .5rem !important; }
.mb-3 { margin-bottom: 1rem !important; }
.mb-4 { margin-bottom: 1.5rem !important; }
.mb-5 { margin-bottom: 2rem !important; }
.mt-0 { margin-top: 0 !important; }
.mt-1 { margin-top: .25rem !important; }
.mt-2 { margin-top: .5rem !important; }
.mt-3 { margin-top: 1rem !important; }
.mt-4 { margin-top: 1.5rem !important; }
.mt-5 { margin-top: 2rem !important; }
.me-1 { margin-right: .25rem !important; }
.me-2 { margin-right: .5rem !important; }
.me-3 { margin-right: 1rem !important; }
.ms-auto { margin-left: auto !important; }
.p-0 { padding: 0 !important; }
.p-3 { padding: 1rem !important; }
.p-4 { padding: 1.5rem !important; }
.py-4 { padding-top: 1.5rem !important; padding-bottom: 1.5rem !important; }
.rounded { border-radius: .5rem !important; }
.rounded-circle { border-radius: 50% !important; }
.border { border: 1px solid var(--sneat-border) !important; }
.border-bottom { border-bottom: 1px solid var(--sneat-soft-border) !important; }
.bg-menu-theme, .bg-navbar-theme, .bg-footer-theme { background: #fff; }
.bg-light { background: #f6f7fb !important; }

.filter-card { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.5rem; }
.filter-form { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; }
.filter-form .form-control, .filter-form .form-select { width: auto; min-width: 12rem; }
.action-group { display: inline-flex; align-items: center; justify-content: flex-end; gap: .5rem; flex-wrap: wrap; }
.sticky-action { position: sticky; bottom: 1rem; z-index: 10; display: flex; justify-content: flex-end; padding: .75rem 0; }

.rich-editor { border: 1px solid var(--sneat-border); border-radius: .65rem; overflow: hidden; background: #fff; }
.rich-editor-toolbar { display: flex; flex-wrap: wrap; gap: .45rem; padding: .65rem; border-bottom: 1px solid var(--sneat-soft-border); background: #f6f7fb; }
.rich-toolbar-button { border: 1px solid var(--sneat-border); border-radius: .45rem; background: #fff; color: var(--sneat-body); min-height: 2rem; padding: .4rem .65rem; font-size: .80rem; font-weight: 600; cursor: pointer; }
.rich-toolbar-button:hover { border-color: var(--sneat-primary); background: #f4f4ff; color: var(--sneat-primary); }
.rich-editor-source { display: none !important; }
.rich-editor-surface { min-height: 12rem; padding: 1rem; color: var(--sneat-heading); background: #fff; outline: none; }
.rich-editor-surface.large { min-height: 18rem; }
.rich-editor-surface:focus { box-shadow: inset 0 0 0 2px rgba(var(--sneat-primary-rgb), .16); }
.rich-editor-surface h2 { margin: 1rem 0 .5rem; font-size: 1.35rem; color: var(--sneat-heading); }
.rich-editor-surface h3 { margin: .85rem 0 .45rem; font-size: 1.1rem; color: var(--sneat-heading); }
.rich-editor-surface p { margin: 0 0 .75rem; }
.rich-editor-surface ul, .rich-editor-surface ol { margin: .5rem 0 .85rem; padding-left: 1.35rem; }
.rich-editor-surface blockquote { margin: .85rem 0; border-left: 4px solid var(--sneat-primary); background: #f8f7ff; padding: .75rem 1rem; color: var(--sneat-body); }

.dynamic-item { border: 1px solid var(--sneat-soft-border); border-radius: .65rem; padding: 1rem; background: #fff; }
.empty-state { padding: 3rem 1rem; text-align: center; color: var(--sneat-muted); }
.footer { margin-top: auto; }
.footer-container { color: var(--sneat-muted); font-size: .875rem; }
.pagination { display: flex; padding-left: 0; list-style: none; gap: .35rem; margin: 0; flex-wrap: wrap; }
.page-link { display: grid; place-items: center; min-width: 2.15rem; min-height: 2.15rem; border-radius: .45rem; color: var(--sneat-body); background: #fff; border: 1px solid var(--sneat-border); padding: .35rem .65rem; }
.page-item.active .page-link { background: var(--sneat-primary); color: #fff; border-color: var(--sneat-primary); }
.page-item.disabled .page-link { opacity: .55; pointer-events: none; }

@media (max-width: 1199.98px) {
  .layout-menu { transform: translateX(-105%); }
  .layout-page { padding-left: 0; }
  body.menu-open .layout-menu { transform: translateX(0); }
  body.menu-open .layout-overlay { display: block; position: fixed; inset: 0; background: rgba(67,89,113,.5); z-index: 1070; }
}
@media (min-width: 1200px) { .d-xl-none { display: none !important; } }
@media (max-width: 767.98px) {
  .container-xxl { padding-right: 1rem; padding-left: 1rem; }
  .layout-navbar { margin: .75rem 1rem 0; }
  .page-heading { flex-direction: column; }
  .filter-form, .filter-form .form-control, .filter-form .form-select, .filter-form .btn { width: 100%; }
  .action-group { justify-content: flex-start; }
  .table > :not(caption) > * > * { padding: .85rem 1rem; }
}
.d-block { display: block !important; }
.flex-grow-1 { flex-grow: 1 !important; }
.text-uppercase { text-transform: uppercase !important; }
.icon-base { display: inline-block; vertical-align: middle; flex: 0 0 auto; }

/* DNA English admin refinements */
:root {
  --sneat-primary: #0b8ed8;
  --sneat-primary-rgb: 11, 142, 216;
  --dna-orange: #ff7a1a;
  --dna-navy: #0b376d;
}
.app-brand-logo.dna-logo-box { background: linear-gradient(135deg, #0b8ed8, #ff7a1a); }
.app-brand-logo img { width: 1.8rem; height: 1.8rem; object-fit: contain; border-radius: .35rem; }
.avatar-initial { color:#fff; background: linear-gradient(135deg, #0b8ed8, #ff7a1a); font-weight: 800; }
.auth-page {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 1.5rem;
  background:
    radial-gradient(circle at 18% 16%, rgba(11,142,216,.18), transparent 28%),
    radial-gradient(circle at 86% 20%, rgba(255,122,26,.18), transparent 26%),
    linear-gradient(135deg, #f6fbff, #fff7f1 100%);
}
.auth-card { width: min(100%, 28rem); }
.auth-logo { width: 8.75rem; margin-bottom: 1rem; }
.auth-help { border-radius: .75rem; padding: .85rem 1rem; background: #f6f7fb; color: var(--sneat-body); font-size: .86rem; }
.stats-icon { width: 3rem; height: 3rem; border-radius: .75rem; display:grid; place-items:center; font-size:1.35rem; }
.bg-gradient-primary { background: linear-gradient(135deg, rgba(11,142,216,.16), rgba(11,142,216,.06)); color:#0b8ed8; }
.bg-gradient-orange { background: linear-gradient(135deg, rgba(255,122,26,.18), rgba(255,122,26,.06)); color:#ff7a1a; }
.bg-gradient-green { background: linear-gradient(135deg, rgba(22,185,129,.16), rgba(22,185,129,.06)); color:#16b981; }
.bg-gradient-dark { background: linear-gradient(135deg, rgba(11,55,109,.16), rgba(11,55,109,.06)); color:#0b376d; }
.landing-preview-card {
  min-height: 13rem;
  overflow: hidden;
  background:
    radial-gradient(circle at 72% 35%, rgba(11,142,216,.2), transparent 24%),
    radial-gradient(circle at 88% 78%, rgba(255,122,26,.18), transparent 25%),
    linear-gradient(135deg, #f2fbff 0%, #ffffff 45%, #fff3ea 100%);
}
.landing-preview-card h3 { color:#0b376d; font-size: clamp(1.4rem, 2.4vw, 2.15rem); line-height:1.02; letter-spacing:-.04em; }
.settings-index { position: sticky; top: 6rem; }
.settings-index a { display:flex; align-items:center; justify-content:space-between; gap:.5rem; padding:.65rem .8rem; border-radius:.5rem; color:var(--sneat-body); font-weight:600; }
.settings-index a:hover { background:#f6f7fb; color:var(--sneat-primary); }
.setting-section { scroll-margin-top: 6.5rem; }
.field-help-code { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; background:#f6f7fb; border-radius:.35rem; padding:.05rem .3rem; }
.form-grid-2 { display:grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap:1rem; }
.form-grid-3 { display:grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap:1rem; }
.order-card-small { border:1px solid var(--sneat-soft-border); border-radius:.75rem; padding:1rem; }
.program-form-box { border:1px solid var(--sneat-soft-border); border-radius:.75rem; padding:1.25rem; background:#fff; }
.status-dot { width:.65rem; height:.65rem; border-radius:999px; background:#71dd37; display:inline-block; }
.status-created,.status-pending { background:#fff2d6; color:#ffab00; }
.status-paid { background:#e8fadf; color:#42b016; }
.status-expire,.status-expired,.status-failed,.status-cancel,.status-deny { background:#ffe0db; color:#ff3e1d; }
.status-refund { background:#d7f5fc; color:#03a6c9; }
@media (max-width: 767.98px) { .form-grid-2,.form-grid-3 { grid-template-columns: 1fr; } .settings-index { position: static; } }
.h-100 { height: 100% !important; }