@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Syne:wght@600;700;800&display=swap');

:root {
  --nsp-ink: #10211c;
  --nsp-muted: #63716c;
  --nsp-canvas: #f4f7f1;
  --nsp-paper: rgba(255, 255, 255, 0.9);
  --nsp-paper-solid: #ffffff;
  --nsp-line: rgba(16, 33, 28, 0.11);
  --nsp-green: #13a56f;
  --nsp-green-deep: #087d58;
  --nsp-cyan: #18b7c9;
  --nsp-coral: #ff6b55;
  --nsp-amber: #f0a72f;
  --nsp-shadow: 0 22px 55px rgba(31, 72, 59, 0.11), 0 2px 8px rgba(16, 33, 28, 0.05);
  --nsp-shadow-hover: 0 28px 70px rgba(20, 113, 82, 0.16), 0 3px 10px rgba(16, 33, 28, 0.06);
}

* {
  box-sizing: border-box;
}

html {
  background: var(--nsp-canvas);
}

body.theme-modern {
  min-height: 100vh;
  margin: 0;
  color: var(--nsp-ink);
  background:
    radial-gradient(circle at 8% 4%, rgba(70, 224, 171, 0.2), transparent 28rem),
    radial-gradient(circle at 93% 14%, rgba(24, 183, 201, 0.16), transparent 27rem),
    linear-gradient(145deg, #f9fbf7 0%, #eff6f1 52%, #f7f5ed 100%);
  font-family: 'DM Sans', sans-serif !important;
  -webkit-font-smoothing: antialiased;
}

body.theme-modern::before {
  position: fixed;
  inset: 0;
  z-index: -2;
  content: '';
  pointer-events: none;
  opacity: 0.42;
  background-image: radial-gradient(rgba(16, 33, 28, 0.1) 0.7px, transparent 0.7px);
  background-size: 18px 18px;
  mask-image: linear-gradient(to bottom, black, transparent 70%);
}

.theme-modern h1,
.theme-modern h2,
.theme-modern h3,
.theme-modern .header-brand,
.theme-modern .stat .num,
.theme-modern .success .code {
  font-family: 'Syne', sans-serif;
  letter-spacing: -0.035em;
}

.theme-modern button,
.theme-modern input,
.theme-modern select,
.theme-modern textarea {
  font: inherit;
}

.theme-modern button,
.theme-modern a,
.theme-modern [role='button'] {
  -webkit-tap-highlight-color: transparent;
}

/* Shared operational/admin surfaces */
.theme-admin .header {
  position: sticky;
  top: 0;
  z-index: 40;
  padding: 14px 24px 12px;
  color: var(--nsp-ink);
  background: rgba(255, 255, 255, 0.86) !important;
  border-bottom: 1px solid var(--nsp-line) !important;
  box-shadow: 0 10px 35px rgba(16, 33, 28, 0.07);
  backdrop-filter: blur(20px) saturate(1.25);
  -webkit-backdrop-filter: blur(20px) saturate(1.25);
}

.theme-admin .header-logo {
  width: min(250px, 64vw);
  height: 58px;
}

.theme-admin .header .nav {
  gap: 7px;
  margin-top: 9px;
}

.theme-admin .header .nav a {
  padding: 8px 12px;
  color: #486059 !important;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  transition: 160ms ease;
}

.theme-admin .header .nav a:hover {
  color: var(--nsp-green-deep) !important;
  background: #edf9f3 !important;
  border-color: rgba(19, 165, 111, 0.18);
  transform: translateY(-1px);
}

.theme-admin .header .nav a.active {
  color: #fff !important;
  background: linear-gradient(135deg, var(--nsp-green-deep), var(--nsp-cyan)) !important;
  box-shadow: 0 8px 20px rgba(19, 165, 111, 0.22);
}

.theme-admin .header .nav a.mpl-access-btn {
  color: #30200b !important;
  background: linear-gradient(135deg, #ffd875, #f6a93d) !important;
  border-color: rgba(142, 87, 13, 0.16);
  box-shadow: 0 8px 20px rgba(240, 167, 47, 0.2);
}

.theme-admin .container {
  max-width: 1120px;
  padding-top: 30px;
}

.theme-admin .card,
.theme-admin .stat {
  color: var(--nsp-ink);
  background: var(--nsp-paper) !important;
  border: 1px solid rgba(255, 255, 255, 0.92) !important;
  border-radius: 20px !important;
  box-shadow: var(--nsp-shadow);
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
}

.theme-admin .card {
  padding: 22px;
  animation: nsp-rise 360ms both;
}

.theme-admin .card h2 {
  color: var(--nsp-ink);
  font-size: 18px;
  font-weight: 800;
}

.theme-admin .card h3 {
  color: #31463f;
}

.theme-admin .form-group label,
.theme-admin th,
.theme-admin .stat .lbl,
.theme-admin .msg-box .label,
.theme-admin .setup-pack-file-meta,
.theme-admin .ord-sub,
.theme-admin .ord-contact .contact-label,
.theme-admin .row-item .code {
  color: var(--nsp-muted) !important;
}

.theme-admin .form-group input,
.theme-admin .form-group select,
.theme-admin .form-group textarea,
.theme-admin .toolbar input,
.theme-admin .toolbar select {
  color: var(--nsp-ink) !important;
  background: rgba(248, 251, 247, 0.95) !important;
  border: 1px solid #dce6df !important;
  border-radius: 11px !important;
  box-shadow: inset 0 1px 1px rgba(16, 33, 28, 0.02);
}

.theme-admin input:focus,
.theme-admin select:focus,
.theme-admin textarea:focus {
  border-color: var(--nsp-green) !important;
  outline: none;
  box-shadow: 0 0 0 4px rgba(19, 165, 111, 0.12) !important;
}

.theme-admin .btn {
  border-radius: 999px;
  font-weight: 700;
  transition: transform 150ms ease, box-shadow 150ms ease, background 150ms ease;
}

.theme-admin .btn:hover:not([disabled]) {
  transform: translateY(-1px);
}

.theme-admin .btn-primary {
  color: #fff !important;
  background: linear-gradient(135deg, var(--nsp-green-deep), var(--nsp-cyan)) !important;
  box-shadow: 0 8px 20px rgba(19, 165, 111, 0.18);
}

.theme-admin .btn-ghost {
  color: #345048 !important;
  background: #f1f6f2 !important;
  border: 1px solid #dce6df !important;
}

.theme-admin .btn-danger {
  color: #fff !important;
  background: linear-gradient(135deg, #e75345, var(--nsp-coral)) !important;
}

.theme-admin .row-item,
.theme-admin .msg-box,
.theme-admin .chip,
.theme-admin .import-drop,
.theme-admin .import-preview,
.theme-admin .ord-detail,
.theme-admin .ord-contact .contact-body,
.theme-admin .bar-wrap,
.theme-admin .athlete-entry {
  color: var(--nsp-ink);
  background: #f7faf7 !important;
  border: 1px solid #e2eae4 !important;
  border-radius: 13px !important;
}

.theme-admin .row-item {
  transition: transform 150ms ease, background 150ms ease, box-shadow 150ms ease;
}

.theme-admin .row-item:hover {
  background: #fff !important;
  box-shadow: 0 10px 25px rgba(31, 72, 59, 0.08);
  transform: translateY(-1px);
}

.theme-admin .tab-bar {
  gap: 4px;
  padding: 5px;
  background: rgba(235, 242, 236, 0.9) !important;
  border: 1px solid #dde7df !important;
  border-radius: 15px !important;
}

.theme-admin .tab {
  color: #61716b;
  border-radius: 11px;
  font-weight: 700;
}

.theme-admin .tab:hover {
  background: rgba(255, 255, 255, 0.72) !important;
}

.theme-admin .tab.active {
  color: var(--nsp-green-deep) !important;
  background: #fff !important;
  box-shadow: 0 4px 15px rgba(31, 72, 59, 0.1);
}

.theme-admin table {
  color: #263a34;
}

.theme-admin th {
  background: #f3f7f4 !important;
  border-color: #dde6df !important;
}

.theme-admin td {
  border-color: #e5ebe7 !important;
}

.theme-admin tr:hover td {
  background: #f4fbf7 !important;
}

.theme-admin .mpl-sticky-col,
.theme-admin .mpl-table tr:hover td.mpl-sticky-col {
  color: var(--nsp-ink);
  background-color: #fff !important;
  background-image: none !important;
  border-color: #dce6df !important;
}

.theme-admin .mpl-table thead th,
.theme-admin .mpl-table thead .mpl-sticky-col {
  background-color: #eff5f0 !important;
  background-image: none !important;
}

.theme-admin .mpl-scroll {
  scrollbar-color: #9bc9b8 #edf3ee;
}

.theme-admin .mpl-scroll::-webkit-scrollbar-track,
.theme-admin .mpl-scroll::-webkit-scrollbar-corner {
  background: #edf3ee;
}

.theme-admin .mpl-scroll::-webkit-scrollbar-thumb {
  background: #9bc9b8;
  border-color: #edf3ee;
}

.theme-admin .stat .num {
  color: var(--nsp-green-deep);
}

.theme-admin .pill-green { color: #08744f; background: #dff7ec; }
.theme-admin .pill-blue { color: #087f8d; background: #dcf6f8; }
.theme-admin .pill-amber { color: #8a5a0a; background: #fff1cb; }
.theme-admin .pill-red { color: #a5372e; background: #ffe6e1; }
.theme-admin .pill-gray { color: #56635f; background: #edf1ee; }
.theme-admin .ord-tag { color: #087f8d; background: #e5f8fa; border-color: #c7eaed; }
.theme-admin .ord-val { color: var(--nsp-ink); }
.theme-admin .ord-contact summary { color: var(--nsp-green-deep); }
.theme-admin .divider,
.theme-admin .ord-sel { border-color: #dfe8e1; }
.theme-admin .empty-state { color: var(--nsp-muted); }

.theme-admin [style*='background:#101018'],
.theme-admin [style*='background:#14141c'],
.theme-admin [style*='background:#1a1a23'],
.theme-admin [style*='background:#0f172a'] {
  color: var(--nsp-ink) !important;
  background: #f6faf7 !important;
  border-color: #dfe8e1 !important;
}

/* Signup and school owner portal */
.theme-form .header {
  padding: 12px 18px;
  background: rgba(255, 255, 255, 0.9) !important;
  border-bottom: 1px solid var(--nsp-line) !important;
  box-shadow: 0 12px 36px rgba(31, 72, 59, 0.07);
  backdrop-filter: blur(18px);
}

.theme-form .header img {
  height: 112px;
}

.theme-form .container {
  padding-top: 30px;
}

.theme-form .card,
.theme-form .login-card,
.theme-form .stat-card {
  color: var(--nsp-ink);
  background: var(--nsp-paper) !important;
  border: 1px solid rgba(255, 255, 255, 0.94) !important;
  border-radius: 22px !important;
  box-shadow: var(--nsp-shadow);
  backdrop-filter: blur(15px);
  animation: nsp-rise 380ms both;
}

.theme-form .card {
  padding: 26px;
}

.theme-form .card h2 {
  color: var(--nsp-ink) !important;
  font-size: 19px;
  font-weight: 800;
}

.theme-form .form-group label,
.theme-form .avail,
.theme-form .subtitle,
.theme-form .success p {
  color: var(--nsp-muted) !important;
}

.theme-form .form-group input,
.theme-form .form-group select,
.theme-form .form-group textarea,
.theme-form .login-card input {
  color: var(--nsp-ink) !important;
  background: #f8fbf8 !important;
  border: 1px solid #dce6df !important;
  border-radius: 12px !important;
}

.theme-form .form-group input:focus,
.theme-form .form-group select:focus,
.theme-form .form-group textarea:focus,
.theme-form .login-card input:focus {
  border-color: var(--nsp-green) !important;
  box-shadow: 0 0 0 4px rgba(19, 165, 111, 0.12) !important;
}

.theme-form .form-group select option {
  color: var(--nsp-ink);
  background: #fff;
}

.theme-form .athlete-entry,
.theme-form .qualifier-option,
.theme-form .slot-btn,
.theme-form .school-btn,
.theme-form .msg-box,
.theme-form .table-wrap {
  color: var(--nsp-ink) !important;
  background: #f7faf7 !important;
  border: 1px solid #dfe8e1 !important;
  border-radius: 14px !important;
}

.theme-form .slot-btn,
.theme-form .school-btn,
.theme-form .qualifier-option {
  transition: transform 150ms ease, border-color 150ms ease, box-shadow 150ms ease;
}

.theme-form .slot-btn:hover,
.theme-form .school-btn:hover,
.theme-form .qualifier-option:hover {
  border-color: var(--nsp-green) !important;
  box-shadow: 0 8px 20px rgba(19, 165, 111, 0.1);
  transform: translateY(-1px);
}

.theme-form .slot-btn.selected,
.theme-form .qualifier-option.selected {
  color: #07583f !important;
  background: #e5f8ef !important;
  border-color: var(--nsp-green) !important;
  box-shadow: inset 0 0 0 1px var(--nsp-green);
}

.theme-form .qualifier-option strong {
  color: var(--nsp-ink) !important;
}

.theme-form .btn-primary,
.theme-form .btn-login {
  color: #fff !important;
  background: linear-gradient(135deg, var(--nsp-green-deep), var(--nsp-cyan)) !important;
  border: 0 !important;
  border-radius: 999px !important;
  box-shadow: 0 12px 26px rgba(19, 165, 111, 0.22);
  transition: transform 150ms ease, box-shadow 150ms ease;
}

.theme-form .btn-primary:hover,
.theme-form .btn-login:hover {
  box-shadow: 0 16px 34px rgba(19, 165, 111, 0.28);
  transform: translateY(-2px);
}

.theme-form .btn-secondary,
.theme-form .btn:not(.btn-primary):not(.btn-danger) {
  color: #345048 !important;
  background: #f0f5f1 !important;
  border: 1px solid #d9e4dc !important;
  border-radius: 999px !important;
}

.theme-form .pill-green { color: #08744f; background: #dff7ec; }
.theme-form .pill-blue { color: #087f8d; background: #dcf6f8; }
.theme-form .pill-amber { color: #8a5a0a; background: #fff1cb; }
.theme-form .pill-gray { color: #56635f; background: #edf1ee; }
.theme-form .success h2 { color: var(--nsp-green-deep); }
.theme-form .success .code { color: var(--nsp-ink); }
.theme-form table { color: var(--nsp-ink); }
.theme-form th { color: var(--nsp-muted); background: #f1f6f2; }
.theme-form td { border-color: #e2e9e4; }
.theme-form tr:hover td { background: #f4fbf7; }

/* React/Tailwind kiosk flows */
.theme-flow .app-bg {
  filter: saturate(0.75) contrast(0.9);
  opacity: 0.32;
}

.theme-flow .app-bg::after {
  background:
    linear-gradient(130deg, rgba(248, 252, 247, 0.84), rgba(235, 248, 240, 0.91)),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.68), rgba(239, 246, 241, 0.94)) !important;
}

.theme-flow .glass-panel,
.theme-flow .glass {
  color: var(--nsp-ink);
  background: rgba(255, 255, 255, 0.86) !important;
  border: 1px solid rgba(255, 255, 255, 0.94) !important;
  box-shadow: var(--nsp-shadow) !important;
  backdrop-filter: blur(20px) saturate(1.2);
  -webkit-backdrop-filter: blur(20px) saturate(1.2);
}

.theme-flow .glass-panel {
  animation: nsp-rise 400ms both;
}

.theme-flow .glass-input,
.theme-flow input:not([type='file']),
.theme-flow select,
.theme-flow textarea {
  color: var(--nsp-ink) !important;
  background: rgba(249, 252, 249, 0.94) !important;
  border-color: #d5e3da !important;
}

.theme-flow .glass-input:focus,
.theme-flow input:focus,
.theme-flow select:focus,
.theme-flow textarea:focus {
  color: var(--nsp-ink) !important;
  background: #fff !important;
  border-color: var(--nsp-green) !important;
  box-shadow: 0 0 0 4px rgba(19, 165, 111, 0.12) !important;
}

.theme-flow select option {
  color: var(--nsp-ink);
  background: #fff;
}

.theme-flow .text-white { color: var(--nsp-ink) !important; }
/* Dark order-form controls must retain readable white labels under every theme. */
.theme-flow .order-contrast-text { color: #fff !important; }
.theme-flow .text-slate-200,
.theme-flow .text-slate-300,
.theme-flow .text-gray-200,
.theme-flow .text-gray-300 { color: #40534c !important; }
.theme-flow .text-slate-400,
.theme-flow .text-slate-500,
.theme-flow .text-gray-400,
.theme-flow .text-gray-500 { color: var(--nsp-muted) !important; }
.theme-flow .text-blue-300,
.theme-flow .text-blue-400,
.theme-flow .text-green-300,
.theme-flow .text-green-400,
.theme-flow .text-emerald-300,
.theme-flow .text-emerald-400 { color: var(--nsp-green-deep) !important; }
.theme-flow .text-purple-200,
.theme-flow .text-purple-300,
.theme-flow .text-purple-400 { color: #b44c3c !important; }

.theme-flow .bg-slate-950,
.theme-flow .bg-slate-900,
.theme-flow .bg-slate-800,
.theme-flow .bg-gray-900,
.theme-flow .bg-gray-800,
.theme-flow .bg-gray-700,
.theme-flow .bg-slate-950\/60,
.theme-flow .bg-slate-900\/80,
.theme-flow .bg-slate-900\/70,
.theme-flow .bg-slate-900\/60,
.theme-flow .bg-slate-900\/50,
.theme-flow .bg-slate-900\/20,
.theme-flow .bg-slate-800\/80,
.theme-flow .bg-slate-800\/50,
.theme-flow .bg-slate-800\/35,
.theme-flow .bg-slate-800\/30,
.theme-flow .bg-slate-800\/25,
.theme-flow .bg-slate-700\/40,
.theme-flow .bg-gray-900\/80,
.theme-flow .bg-gray-900\/60,
.theme-flow .bg-gray-800\/50 {
  color: var(--nsp-ink) !important;
  background: rgba(249, 252, 249, 0.88) !important;
}

.theme-flow .border-slate-700,
.theme-flow .border-slate-700\/50,
.theme-flow .border-slate-600,
.theme-flow .border-gray-700,
.theme-flow .border-gray-600,
.theme-flow .border-gray-500 {
  border-color: #d7e2da !important;
}

.theme-flow .bg-blue-600,
.theme-flow .bg-green-600,
.theme-flow .bg-emerald-600,
.theme-flow .bg-emerald-600\/90,
.theme-flow .bg-purple-600 {
  color: #fff !important;
  background: linear-gradient(135deg, var(--nsp-green-deep), var(--nsp-cyan)) !important;
  border-color: transparent !important;
  box-shadow: 0 10px 24px rgba(19, 165, 111, 0.22);
}

.theme-flow .bg-blue-600 .text-white,
.theme-flow .bg-green-600 .text-white,
.theme-flow .bg-emerald-600 .text-white,
.theme-flow .bg-purple-600 .text-white,
.theme-flow button.bg-blue-600,
.theme-flow button.bg-green-600,
.theme-flow button.bg-emerald-600,
.theme-flow button.bg-purple-600 {
  color: #fff !important;
}

.theme-flow .bg-blue-600:hover,
.theme-flow .bg-green-600:hover,
.theme-flow .bg-emerald-600:hover,
.theme-flow .bg-purple-600:hover {
  box-shadow: 0 15px 32px rgba(19, 165, 111, 0.28);
  transform: translateY(-2px);
}

.theme-flow .bg-red-500,
.theme-flow .bg-red-600,
.theme-flow .bg-red-700,
.theme-flow .bg-red-700\/90 {
  color: #fff !important;
  background: linear-gradient(135deg, #db5144, var(--nsp-coral)) !important;
}

.theme-flow .bg-yellow-500,
.theme-flow .bg-amber-500 {
  color: #3b270a !important;
  background: linear-gradient(135deg, #ffd36d, var(--nsp-amber)) !important;
}

.theme-flow .bg-red-500\/20,
.theme-flow .bg-red-950\/40 {
  color: #8f332b !important;
  background: #fff0ed !important;
}

.theme-flow .bg-orange-500\/20,
.theme-flow .bg-yellow-950\/30 {
  color: #70480a !important;
  background: #fff5d9 !important;
}

.theme-flow .text-red-200,
.theme-flow .text-red-300,
.theme-flow .text-red-400 { color: #b84136 !important; }
.theme-flow .text-orange-200,
.theme-flow .text-orange-300,
.theme-flow .text-orange-400,
.theme-flow .text-yellow-100,
.theme-flow .text-yellow-300 { color: #80520c !important; }

.theme-flow button {
  transition: transform 150ms ease, box-shadow 150ms ease, background 150ms ease;
}

.theme-flow .preview-stage,
.theme-flow .finished-sample-frame,
.theme-flow .raw-photo-frame {
  background: #eaf1ec;
  border-color: #d7e2da;
}

/* Photography overlays remain cinematic. */
.theme-flow .samples-overlay,
.theme-flow .samples-lightbox,
.theme-flow .bg-reference-overlay,
.theme-flow .agent-intro-backdrop,
.theme-flow .language-choice-backdrop {
  color: #fff;
}

.theme-flow .samples-overlay .text-white,
.theme-flow .samples-lightbox .text-white,
.theme-flow .bg-reference-overlay .text-white,
.theme-flow .samples-overlay .text-gray-300,
.theme-flow .samples-overlay .text-gray-400,
.theme-flow .bg-reference-overlay .text-gray-300,
.theme-flow .bg-reference-overlay .text-gray-400 {
  color: #fff !important;
}

.theme-flow .agent-intro-card,
.theme-flow .language-choice-card,
.theme-flow .agent-chat-panel,
.theme-flow .ninja-guide-bubble {
  border-color: var(--nsp-green) !important;
  box-shadow: 0 28px 80px rgba(16, 33, 28, 0.3);
}

.theme-flow .agent-chat-launch {
  color: #fff;
  background: linear-gradient(135deg, var(--nsp-green-deep), var(--nsp-cyan));
  border-color: #fff;
  box-shadow: 0 12px 30px rgba(19, 165, 111, 0.28);
}

.theme-queue {
  padding: clamp(14px, 2.4vw, 30px) !important;
}

.theme-queue #root > div > div:first-child {
  padding: 18px 20px;
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.85);
  border-radius: 20px;
  box-shadow: var(--nsp-shadow);
}

.theme-queue table {
  color: var(--nsp-ink);
}

.theme-queue thead tr {
  background: #edf4ef !important;
}

.theme-queue tbody tr:hover {
  background: #f3fbf6 !important;
}

@keyframes nsp-rise {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 760px) {
  .theme-admin .header {
    position: relative;
    padding-inline: 12px;
  }

  .theme-admin .header .nav {
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    padding-bottom: 4px;
    scrollbar-width: none;
  }

  .theme-admin .header .nav::-webkit-scrollbar { display: none; }
  .theme-admin .header .nav a { flex: 0 0 auto; }
  .theme-admin .container { padding: 20px 12px 50px; }
  .theme-admin .card { padding: 17px; border-radius: 17px !important; }
  .theme-form .container { padding: 20px 12px 40px; }
  .theme-form .card { padding: 20px; }
}

@media (prefers-reduced-motion: reduce) {
  .theme-modern *,
  .theme-modern *::before,
  .theme-modern *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}