:root {
  --neo-ink: #e7f6ff;
  --neo-muted: #9eb7c9;
  --neo-line: rgba(125, 211, 252, 0.24);
  --neo-paper: rgba(7, 18, 34, 0.78);
  --neo-soft: rgba(15, 35, 58, 0.82);
  --neo-mint: #00d6a3;
  --neo-mint-bright: #34f5c5;
  --neo-sky: #38bdf8;
  --neo-coral: #ef6f5e;
  --neo-sun: #f4b942;
  --neo-danger: #ef4444;
  --neo-shadow: 0 24px 70px rgba(0, 214, 163, 0.16);
  --neo-font: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
}

html {
  min-height: 100%;
}

body {
  min-height: 100vh;
  color: var(--neo-ink) !important;
  font-family: var(--neo-font) !important;
  background:
    linear-gradient(135deg, rgba(0, 214, 163, 0.11) 0 1px, transparent 1px 42px),
    radial-gradient(circle at 16% 12%, rgba(56, 189, 248, 0.24), transparent 34%),
    radial-gradient(circle at 86% 18%, rgba(0, 214, 163, 0.18), transparent 30%),
    radial-gradient(circle at 62% 90%, rgba(244, 185, 66, 0.12), transparent 34%),
    linear-gradient(160deg, #06111f 0%, #081a2f 45%, #04131b 100%) !important;
}

body,
p,
li,
td,
label,
span,
.muted,
.hint,
.form-hint,
.materials-stats,
.file-meta-info {
  color: var(--neo-ink);
}

.muted,
.hint,
.form-hint,
.student-badge,
.file-meta-info,
.login-choice-card span,
.brand p,
header p {
  color: var(--neo-muted) !important;
}

a {
  color: var(--neo-mint-bright);
}

.container,
.page,
.skills-app,
.vocab-app,
.comp-app {
  background: transparent !important;
  box-shadow: none !important;
}

header,
.topbar,
.top-bar,
.skills-top,
.speak-top,
.vocab-top,
.comp-header {
  background: rgba(4, 13, 24, 0.72) !important;
  border: 1px solid rgba(125, 211, 252, 0.18) !important;
  border-radius: 8px;
  box-shadow: var(--neo-shadow);
  backdrop-filter: blur(18px);
}

header {
  position: relative;
  overflow: hidden;
  min-height: 205px;
  padding: 22px 18px 18px !important;
  border-bottom: 1px solid rgba(125, 211, 252, 0.18) !important;
}

header h1 {
  position: relative;
  z-index: 2;
  margin-bottom: 0 !important;
}

.header-motto-art {
  width: min(820px, 76vw);
  height: 144px;
  margin: 2px auto 0;
  overflow: hidden;
  border: 0;
  border-radius: 6px;
  background: rgba(4, 13, 24, 0.08);
  box-shadow: 0 18px 52px rgba(0, 214, 163, 0.12);
}

.header-motto-art img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 47%;
}

h1,
h2,
h3,
h4,
.brand,
.comp-brand,
.role-dashboard h3,
.login-choice-card strong {
  color: var(--neo-mint-bright) !important;
  letter-spacing: 0;
}

h2 {
  border-bottom-color: var(--neo-line) !important;
}

.language-switcher select,
select,
input,
textarea {
  border: 1px solid var(--neo-line) !important;
  color: var(--neo-ink) !important;
  background: rgba(255, 255, 255, 0.08) !important;
  outline: none;
}

select option {
  color: #0f172a;
  background: #f8fafc;
}

input::placeholder,
textarea::placeholder {
  color: rgba(231, 246, 255, 0.58);
}

input[type="file"] {
  color: var(--neo-muted) !important;
}

.button,
.btn,
.primary-btn,
.speakstar-start,
button[type="submit"],
input[type="submit"] {
  border: 0 !important;
  color: #fff !important;
  background: linear-gradient(135deg, #007a5f, #0369a1) !important;
  box-shadow: 0 12px 26px rgba(0, 122, 95, 0.2);
}

.button:hover,
.btn:hover,
.primary-btn:hover,
.speakstar-start:hover {
  filter: brightness(1.08);
}

.button.secondary,
.btn-ghost,
.ghost,
.back,
.back-btn,
.comp-back,
.speakstar-history-btn,
.small-btn {
  border: 1px solid var(--neo-line) !important;
  color: var(--neo-ink) !important;
  background: rgba(255, 255, 255, 0.08) !important;
  box-shadow: none;
}

.button.danger,
.button.red,
.attendance-btn.absent {
  background: linear-gradient(135deg, #ef4444, #f97316) !important;
}

.button.green,
.attendance-btn.present {
  background: linear-gradient(135deg, #16a34a, #00d6a3) !important;
}

.user-status,
.main-tabs,
.main-tab-dropdown,
.section,
.panel,
.hero,
.summary-item,
.course,
.referral-box,
.message-box,
.checkout-form,
.modal-content,
.login-choice-card,
.teacher-dashboard,
.role-dashboard,
.dashboard-summary div,
.admin-tab,
.admin-tab-content,
.filter-container,
.student-item,
.visual-card,
.question-card,
.word-card,
.missed-list,
.history-card,
.lb-controls,
.materials-toolbar,
.batch-toolbar,
.file-item,
.comp-progress,
.comp-body,
.comp-footer,
.comp-question-card {
  border: 1px solid var(--neo-line) !important;
  color: var(--neo-ink) !important;
  background: linear-gradient(180deg, rgba(10, 28, 48, 0.92), rgba(6, 20, 34, 0.86)) !important;
  box-shadow: var(--neo-shadow);
}

.section,
.panel,
.hero,
.course,
.modal-content,
.login-choice-card,
.role-dashboard,
.summary-item,
.dashboard-summary div {
  border-radius: 8px !important;
}

.main-tabs {
  display: flex;
  align-items: stretch;
  gap: 0;
  padding: 0 10px;
}

.main-tabs > a,
.main-tab-trigger {
  color: var(--neo-ink) !important;
  border-bottom-color: transparent !important;
}

.main-tabs > a.active,
.main-tab-trigger.active,
.main-tabs a:hover,
.main-tab-group:hover > .main-tab-trigger {
  color: var(--neo-mint-bright) !important;
  border-bottom-color: var(--neo-mint) !important;
}

.main-tab-dropdown a {
  color: var(--neo-ink) !important;
}

.main-tab-dropdown a:hover {
  color: var(--neo-mint-bright) !important;
  background: rgba(125, 211, 252, 0.12) !important;
}

.status-pill,
.badge,
.flh-hint-pill,
.student-badge {
  color: var(--neo-mint-bright) !important;
  background: rgba(0, 214, 163, 0.14) !important;
  border: 1px solid rgba(0, 214, 163, 0.22);
}

table,
.admin-table,
.lb-table {
  color: var(--neo-ink) !important;
  background: rgba(7, 18, 34, 0.68) !important;
}

th,
td,
table,
.admin-table th,
.admin-table td,
.lb-table th,
.lb-table td {
  border-color: var(--neo-line) !important;
}

th,
.admin-table th,
.lb-table th {
  color: var(--neo-ink) !important;
  background: rgba(15, 48, 72, 0.92) !important;
}

tr:nth-child(odd),
tr:nth-child(even),
.admin-table tr:nth-child(odd),
.admin-table tr:nth-child(even),
.lb-table tr:nth-child(odd),
.lb-table tr:nth-child(even) {
  background: rgba(7, 18, 34, 0.48) !important;
}

tr:hover td,
.admin-table tr:hover td,
.lb-row-clickable:hover {
  background: rgba(125, 211, 252, 0.12) !important;
}

.code-display,
.success-message,
.message-box.warning,
.notice,
.alert,
#non-member-notice,
.file-item:not(.header-row) {
  border: 1px solid var(--neo-line) !important;
  color: var(--neo-ink) !important;
  background: rgba(15, 48, 72, 0.58) !important;
}

.success-message {
  border-color: rgba(0, 214, 163, 0.34) !important;
}

.message-box.warning {
  border-color: rgba(244, 185, 66, 0.36) !important;
}

.close {
  color: var(--neo-ink) !important;
}

.tab-content,
.tab-pane,
.admin-tab-content {
  color: var(--neo-ink) !important;
}

.course h3,
.section h2,
.panel h2 {
  color: var(--neo-mint-bright) !important;
}

.comp-pills button,
.mod-tab,
.page-number,
.page-size-select,
.jump-input {
  border: 1px solid var(--neo-line) !important;
  color: var(--neo-ink) !important;
  background: rgba(255, 255, 255, 0.08) !important;
}

.comp-pills button.active,
.mod-tab.active,
.page-number.active {
  color: #fff !important;
  background: linear-gradient(135deg, #007a5f, #0369a1) !important;
}

#exchange-content .exchange-card,
#exchange-content .exchange-entry-button,
#exchange-content .exchange-filter,
#exchange-content .exchange-child-card,
#exchange-content .teacher-card,
#exchange-content .exchange-day,
#exchange-content .teacher-booking-panel,
#exchange-content .teacher-booking-interface,
#exchange-content .teacher-fixed-row,
#exchange-content .teacher-booking-result,
#exchange-content .teacher-weekly-row,
#exchange-content .teacher-selected-row,
#exchange-content .teacher-availability-rule,
#exchange-content .exchange-calendar-empty,
.exchange-child-profile-dialog {
  border: 1px solid var(--neo-line) !important;
  color: var(--neo-ink) !important;
  background: linear-gradient(180deg, rgba(10, 28, 48, 0.92), rgba(6, 20, 34, 0.86)) !important;
  box-shadow: none;
}

#exchange-content .exchange-card h3,
#exchange-content .exchange-entry-button strong,
#exchange-content .teacher-booking-interface h3,
#exchange-content .teacher-booking-result h4,
#exchange-content .teacher-fixed-row strong,
#exchange-content .teacher-weekly-row strong,
#exchange-content .exchange-day strong,
#exchange-content .exchange-child-card strong,
#exchange-content .teacher-card strong,
#exchange-content .exchange-calendar-title,
.exchange-child-profile-head h3,
.exchange-child-profile-section h4 {
  color: var(--neo-mint-bright) !important;
}

#exchange-content .exchange-card p,
#exchange-content .exchange-card span,
#exchange-content .exchange-child-card span,
#exchange-content .exchange-child-card p,
#exchange-content .teacher-card p,
#exchange-content .teacher-card span,
#exchange-content .teacher-schedule-count,
#exchange-content .teacher-weekly-row span,
#exchange-content .teacher-selected-row span,
#exchange-content .exchange-calendar-empty,
.exchange-child-profile-dialog,
.exchange-child-profile-dialog p {
  color: var(--neo-ink) !important;
}

#exchange-content .exchange-card > p,
#exchange-content .exchange-entry-button span,
#exchange-content .teacher-schedule-count {
  color: var(--neo-muted) !important;
}

#exchange-content .exchange-filter label,
#exchange-content .teacher-booking-panel label,
#exchange-content .teacher-booking-interface label {
  color: var(--neo-ink) !important;
}

#exchange-content .exchange-filter input,
#exchange-content .exchange-filter select,
#exchange-content .teacher-booking-panel input,
#exchange-content .teacher-booking-panel select,
#exchange-content .teacher-booking-interface input,
#exchange-content .teacher-booking-interface select {
  border-color: var(--neo-line) !important;
  color: var(--neo-ink) !important;
  background: rgba(255, 255, 255, 0.08) !important;
}

#exchange-content .exchange-child-card img,
#exchange-content .teacher-card img,
#exchange-content .teacher-media-list img,
.exchange-child-profile-head img,
.exchange-child-photo-grid img {
  border: 1px solid rgba(125, 211, 252, 0.28);
  background: rgba(125, 211, 252, 0.12) !important;
}

#exchange-content .exchange-child-card.active {
  border-color: rgba(0, 214, 163, 0.66) !important;
  box-shadow: 0 18px 42px rgba(0, 214, 163, 0.16) !important;
}

#exchange-content .exchange-child-profile-link {
  color: var(--neo-ink) !important;
}

.exchange-child-profile-close {
  color: var(--neo-ink) !important;
}

#exchange-content .slot-btn,
#exchange-content .exchange-calendar button {
  border: 1px solid var(--neo-line) !important;
  color: var(--neo-ink) !important;
  background: rgba(255, 255, 255, 0.08) !important;
}

#admin-content .exchange-card,
#admin-content .teacher-card,
#admin-content .teacher-availability-rule {
  border: 1px solid var(--neo-line) !important;
  color: var(--neo-ink) !important;
  background: linear-gradient(180deg, rgba(10, 28, 48, 0.92), rgba(6, 20, 34, 0.86)) !important;
  box-shadow: none !important;
}

#admin-content .exchange-card h3,
#admin-content .teacher-card h4,
#admin-content .teacher-card strong {
  color: var(--neo-mint-bright) !important;
}

#admin-content .exchange-card p,
#admin-content .exchange-card span,
#admin-content .exchange-card label,
#admin-content .exchange-card small,
#admin-content .teacher-card p,
#admin-content .teacher-card span {
  color: var(--neo-ink) !important;
}

#admin-content .exchange-card small,
#admin-content .exchange-card .form-hint {
  color: var(--neo-muted) !important;
}

#admin-content .exchange-card input,
#admin-content .exchange-card textarea,
#admin-content .exchange-card select,
#admin-content .teacher-availability-rule input,
#admin-content .teacher-availability-rule select {
  border-color: var(--neo-line) !important;
  color: var(--neo-ink) !important;
  background: rgba(255, 255, 255, 0.08) !important;
}

#admin-content .exchange-card input::placeholder,
#admin-content .exchange-card textarea::placeholder {
  color: rgba(231, 246, 255, 0.58) !important;
}

#admin-content .referral-table {
  border-color: var(--neo-line) !important;
  color: var(--neo-ink) !important;
  background: rgba(255, 255, 255, 0.04) !important;
}

#admin-content .referral-table th {
  color: #fff !important;
  background: rgba(3, 105, 161, 0.42) !important;
}

#admin-content .referral-table td {
  border-color: rgba(125, 211, 252, 0.18) !important;
  color: var(--neo-ink) !important;
  background: rgba(255, 255, 255, 0.04) !important;
}

#admin-content .referral-table tr:nth-child(even) td {
  background: rgba(255, 255, 255, 0.07) !important;
}

#admin-content .nav-tabs a {
  border: 1px solid var(--neo-line) !important;
  color: var(--neo-ink) !important;
  background: rgba(255, 255, 255, 0.08) !important;
}

#admin-content .nav-tabs a.active {
  color: #fff !important;
  background: #007bff !important;
  border-color: #007bff !important;
}

#admin-content .filter-container,
#admin-content .pagination-container,
#admin-content .file-info-section,
#admin-content .storage-stats > div,
#admin-content .files-table-container,
#admin-content #admin-competition-list > div,
#admin-content [style*="background-color: #f8f9fa"],
#admin-content [style*="background-color:#f8f9fa"],
#admin-content [style*="background-color: #e9ecef"],
#admin-content [style*="background-color:#e9ecef"] {
  border: 1px solid var(--neo-line) !important;
  color: var(--neo-ink) !important;
  background: linear-gradient(180deg, rgba(10, 28, 48, 0.92), rgba(6, 20, 34, 0.86)) !important;
  box-shadow: none !important;
}

#admin-content .pagination-container,
#admin-content .file-info-section,
#admin-content .storage-stats > div,
#admin-content .files-table-container {
  border-radius: 8px !important;
}

#admin-content .pagination-container label,
#admin-content .pagination-container span,
#admin-content .pagination-container .records-info,
#admin-content .filter-container label,
#admin-content .filter-container span,
#admin-content .filter-stats,
#admin-content .file-info-section p,
#admin-content .file-info-section h4,
#admin-content .storage-stats strong,
#admin-content .storage-stats span,
#admin-content .current-admin-path,
#admin-content #admin-files-empty,
#admin-content #admin-files-loading,
#admin-content #admin-files-error {
  color: var(--neo-ink) !important;
}

#admin-content .filter-stats,
#admin-content .pagination-container .records-info,
#admin-content .current-admin-path {
  color: var(--neo-muted) !important;
}

#admin-content .pagination-container select,
#admin-content .pagination-container input,
#admin-content .filter-container input,
#admin-content .filter-container select,
#admin-content .jump-input {
  border-color: var(--neo-line) !important;
  color: var(--neo-ink) !important;
  background: rgba(255, 255, 255, 0.08) !important;
}

#admin-content .page-btn,
#admin-content .page-number,
#admin-content .filter-btn,
#admin-content .file-action-btn {
  border: 1px solid var(--neo-line) !important;
  color: var(--neo-ink) !important;
  background: rgba(255, 255, 255, 0.08) !important;
}

#admin-content .page-btn:not(:disabled):hover,
#admin-content .page-number:not(.active):hover,
#admin-content .filter-btn:hover {
  color: var(--neo-mint-bright) !important;
  background: rgba(125, 211, 252, 0.14) !important;
}

#admin-content .page-btn:disabled,
#admin-content .page-number:disabled,
#admin-content .filter-btn:disabled {
  opacity: 0.5;
}

#admin-content .page-number.active,
#admin-content .filter-btn-primary {
  color: #fff !important;
  background: linear-gradient(135deg, #007a5f, #0369a1) !important;
}

#admin-content .files-table {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid var(--neo-line) !important;
  color: var(--neo-ink) !important;
  background: rgba(255, 255, 255, 0.04) !important;
}

#admin-content .files-table th {
  border: 1px solid rgba(125, 211, 252, 0.28) !important;
  color: #fff !important;
  background: rgba(3, 105, 161, 0.42) !important;
}

#admin-content .files-table td {
  border: 1px solid rgba(125, 211, 252, 0.18) !important;
  color: var(--neo-ink) !important;
  background: rgba(255, 255, 255, 0.04) !important;
}

#admin-content .files-table tr:nth-child(even) td {
  background: rgba(255, 255, 255, 0.07) !important;
}

#admin-content .files-table .file-name,
#admin-content .files-table .file-size,
#admin-content .files-table .file-date {
  color: var(--neo-ink) !important;
}

#admin-content .files-table .file-action-btn {
  color: #fff !important;
  background: linear-gradient(135deg, #ef4444, #f97316) !important;
  border: 0 !important;
}

#admin-content .admin-child-management-grid {
  grid-template-columns: minmax(320px, 420px) 1fr;
  align-items: start;
}

#admin-content .admin-child-list-card {
  grid-column: 1 / -1;
}

#admin-international-children-list {
  width: 100%;
}

#admin-international-children-list > div {
  width: 100%;
  overflow-x: auto;
}

#admin-international-children-list .referral-table {
  min-width: 980px;
}

#admin-international-children-list .referral-table th:nth-child(1),
#admin-international-children-list .referral-table td:nth-child(1) {
  width: 90px;
  text-align: center;
}

#admin-international-children-list .referral-table th:nth-child(2),
#admin-international-children-list .referral-table td:nth-child(2) {
  min-width: 140px;
}

#admin-international-children-list .referral-table th:nth-child(3),
#admin-international-children-list .referral-table td:nth-child(3) {
  min-width: 220px;
}

#admin-international-children-list .referral-table th:nth-child(4),
#admin-international-children-list .referral-table td:nth-child(4) {
  min-width: 180px;
}

#admin-international-children-list .referral-table th:nth-child(5),
#admin-international-children-list .referral-table td:nth-child(5) {
  min-width: 150px;
}

#admin-international-children-list .referral-table th:nth-child(6),
#admin-international-children-list .referral-table td:nth-child(6) {
  min-width: 150px;
  white-space: nowrap;
}

#admin-international-children-list .referral-table td:nth-child(6) > div {
  flex-wrap: nowrap !important;
}

#admin-content .admin-teacher-account-grid {
  grid-template-columns: minmax(320px, 420px) 1fr;
  align-items: start;
}

#admin-content .admin-teacher-account-list-card {
  grid-column: 1 / -1;
}

#admin-teacher-accounts-list {
  width: 100%;
}

#admin-teacher-accounts-list > div {
  width: 100%;
  overflow-x: auto;
}

#admin-teacher-accounts-list .referral-table {
  min-width: 980px;
}

#admin-teacher-accounts-list .referral-table th:nth-child(1),
#admin-teacher-accounts-list .referral-table td:nth-child(1) {
  width: 90px;
  text-align: center;
}

#admin-teacher-accounts-list .referral-table th:nth-child(2),
#admin-teacher-accounts-list .referral-table td:nth-child(2) {
  min-width: 140px;
}

#admin-teacher-accounts-list .referral-table th:nth-child(3),
#admin-teacher-accounts-list .referral-table td:nth-child(3) {
  min-width: 220px;
}

#admin-teacher-accounts-list .referral-table th:nth-child(4),
#admin-teacher-accounts-list .referral-table td:nth-child(4) {
  min-width: 180px;
}

#admin-teacher-accounts-list .referral-table th:nth-child(5),
#admin-teacher-accounts-list .referral-table td:nth-child(5) {
  min-width: 150px;
}

#admin-teacher-accounts-list .referral-table th:nth-child(6),
#admin-teacher-accounts-list .referral-table td:nth-child(6) {
  min-width: 150px;
  white-space: nowrap;
}

.site-nav-actions {
  position: relative;
  z-index: 50;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  width: min(1120px, calc(100% - 36px));
  margin: 14px auto 6px;
}

.site-nav-action {
  display: inline-flex;
  min-height: 40px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--neo-line) !important;
  border-radius: 8px;
  padding: 8px 14px;
  color: var(--neo-ink) !important;
  background: rgba(255, 255, 255, 0.08) !important;
  font-family: var(--neo-font);
  font-size: 15px;
  font-weight: 800;
  line-height: 1.2;
  text-decoration: none;
  box-shadow: none;
  cursor: pointer;
}

.site-nav-home {
  color: #fff !important;
  background: linear-gradient(135deg, #007a5f, #0369a1) !important;
  border-color: transparent !important;
}

.site-nav-action:hover {
  filter: brightness(1.08);
}

body .action-btn,
body .competition-action,
body .competition-button {
  border: 1px solid var(--neo-line) !important;
  color: var(--neo-ink) !important;
  background: rgba(255, 255, 255, 0.08) !important;
  box-shadow: none;
}

body .action-btn.active,
body .competition-action.active,
body .competition-button.active {
  color: #fff !important;
  background: linear-gradient(135deg, #007a5f, #0369a1) !important;
  border-color: transparent !important;
}

body .subtitle,
body .panel > p,
body .panel li,
body #notice-output,
body #notice-output p,
body #notice-output div,
body .rules-list li {
  color: var(--neo-ink) !important;
}

body .panel .subtitle,
body #notice-output [style*="color:#667085"],
body #notice-output [style*="color: #667085"] {
  color: var(--neo-muted) !important;
}

body .rules-list li,
body #notice-output > div > div,
body #notice-output div[style*="background:#f8fbff"],
body #notice-output div[style*="background: #f8fbff"],
body #notice-output div[style*="background:#fafafa"],
body #notice-output div[style*="background: #fafafa"],
body .kid-card {
  border: 1px solid var(--neo-line) !important;
  color: var(--neo-ink) !important;
  background: rgba(255, 255, 255, 0.08) !important;
}

body #notice-output strong,
body .rules-list strong {
  color: var(--neo-mint-bright) !important;
}

body #notice-output [style*="color:#c00"],
body #notice-output [style*="color: #c00"],
body .rules-list [style*="color:#c00"],
body .rules-list [style*="color: #c00"] {
  color: #fecaca !important;
}

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: rgba(7, 18, 34, 0.5);
}

::-webkit-scrollbar-thumb {
  background: rgba(56, 189, 248, 0.42);
  border-radius: 999px;
}

@media (max-width: 700px) {
  .main-tabs {
    overflow-x: auto;
    justify-content: flex-start;
  }

  .user-status,
  .language-switcher {
    position: static !important;
    margin: 10px 0;
  }

  .header-motto-art {
    width: min(520px, 90vw);
    height: 92px;
  }

  .header-motto-art img {
    height: 100%;
  }
}