:root {
  --navy-900:#0F2035; --navy-700:#1B2A4A; --navy-500:#2D7FF9;
  --gray-50:#F8F9FB; --gray-100:#F1F3F5; --gray-200:#E5E7EB;
  --gray-300:#D1D5DB; --gray-500:#6B7280; --gray-700:#374151;
  --gray-800:#1F2937; --gray-900:#111827;
  --white:#FFFFFF; --blue:#007AFF; --green:#34C759; --red:#FF3B30; --orange:#FF9500;
  --shadow-sm:0 1px 2px rgba(0,0,0,0.05); --shadow-md:0 4px 12px rgba(0,0,0,0.08);
  --card-radius:12px;
}
[data-theme="dark"] {
  --gray-50:#0D1B2A; --gray-100:#1A2332; --gray-200:rgba(255,255,255,0.08);
  --gray-300:rgba(255,255,255,0.12); --gray-500:#8899BB; --gray-700:#D1D5DB;
  --gray-800:#E5E7EB; --gray-900:#FFFFFF; --white:#1A2332;
}
*{box-sizing:border-box; margin:0; padding:0;}
body{font-family:'DM Sans',sans-serif; background:var(--gray-50); color:var(--gray-900); line-height:1.5;}
.container{max-width:1200px; margin:0 auto; padding:24px;}
.header{background:var(--navy-900); color:white; padding:14px 24px; display:flex; justify-content:space-between; align-items:center;}
.header-brand{font-size:1.125rem; font-weight:700; color:white; text-decoration:none;}
.header-back{font-size:0.875rem; color:#8899BB; text-decoration:none;}
.header-back:hover{color:white;}
.page-title{font-size:1.5rem; font-weight:700; margin-bottom:6px;}
.page-sub{font-size:0.875rem; color:var(--gray-500); margin-bottom:20px;}
.btn{display:inline-flex; align-items:center; gap:6px; padding:10px 18px; border:none; border-radius:8px; font-size:0.875rem; font-weight:600; cursor:pointer; transition:all 0.2s; text-decoration:none;}
.btn-primary{background:var(--blue); color:white;}
.btn-primary:hover{background:#0066D6;}
.btn-secondary{background:var(--gray-100); color:var(--gray-800); border:1px solid var(--gray-200);}
.btn-secondary:hover{background:var(--gray-200);}
.btn-danger{background:transparent; color:var(--red); border:1px solid var(--gray-200);}
.btn-danger:hover{background:#FFE5E5;}
.card{background:var(--white); border:1px solid var(--gray-200); border-radius:var(--card-radius); padding:20px; margin-bottom:14px;}
.card-row{display:flex; justify-content:space-between; align-items:center; gap:12px;}
.assess-name{font-size:1rem; font-weight:600; color:var(--gray-900); margin-bottom:4px;}
.assess-meta{font-size:0.8125rem; color:var(--gray-500);}
.badge{display:inline-block; font-size:0.6875rem; font-weight:600; padding:3px 8px; border-radius:10px; background:var(--gray-100); color:var(--gray-700);}
.badge-blue{background:#E1F0FF; color:#0066D6;}
.badge-green{background:#D4EDDA; color:#155724;}
.empty{text-align:center; padding:40px 20px; color:var(--gray-500); font-size:0.9375rem;}
.loading{text-align:center; padding:40px; color:var(--gray-500);}
input,select,textarea{width:100%; padding:10px 12px; border:1px solid var(--gray-300); border-radius:8px; font-family:inherit; font-size:0.875rem; background:var(--white); color:var(--gray-900);}
input:focus,select:focus,textarea:focus{outline:none; border-color:var(--blue);}
label{display:block; font-size:0.8125rem; font-weight:600; color:var(--gray-700); margin-bottom:6px;}
.form-row{margin-bottom:14px;}
.form-grid{display:grid; grid-template-columns:1fr 1fr; gap:12px;}
.modal-overlay{position:fixed; inset:0; background:rgba(0,0,0,0.5); display:flex; align-items:center; justify-content:center; z-index:100;}
.modal{background:var(--white); border-radius:14px; padding:24px; max-width:520px; width:90%; max-height:90vh; overflow-y:auto;}
.modal-title{font-size:1.125rem; font-weight:700; margin-bottom:14px;}
.modal-actions{display:flex; gap:8px; justify-content:flex-end; margin-top:18px;}
.toast{position:fixed; bottom:24px; right:24px; padding:12px 18px; background:var(--gray-900); color:white; border-radius:8px; font-size:0.875rem; z-index:200;}




/* ===== Main-site navbar + theme compatibility ===== */
:root {
  --navy-800: #0F2035;
  --gray-500: #6B7280;
  --accent: #2B7AE9;
}
[data-theme="dark"] {
  --bg-main: #0D1117;
  --gray-50: #161B22;
  --gray-100: #1F2937;
  --gray-200: #30363D;
  --gray-300: #484F58;
  --gray-500: #8B949E;
  --gray-700: #C9D1D9;
  --gray-800: #E6EDF3;
  --gray-900: #F0F6FC;
  --white: #161B22;
  --navy-800: #C9D1D9;
}
[data-theme="dark"] body { background: #0D1117; color: #C9D1D9; }
[data-theme="dark"] .card,
[data-theme="dark"] .question-card,
[data-theme="dark"] .modal,
[data-theme="dark"] .settings-card,
[data-theme="dark"] .info-tile,
[data-theme="dark"] .meta-tile,
[data-theme="dark"] .score-tile,
[data-theme="dark"] .ans-block { background: #161B22; border-color: #30363D; color: #C9D1D9; }
[data-theme="dark"] .header { background: #0D1117; border-color: #30363D; }
[data-theme="dark"] input,
[data-theme="dark"] textarea,
[data-theme="dark"] select { background: #1F2937; border-color: #30363D; color: #C9D1D9; }

body { padding-top: 64px; padding-bottom: 0; margin: 0; min-height: 100vh; }

.navbar { position: fixed; top: 0; left: 0; right: 0; height: 64px; background: var(--white); border-bottom: 1px solid var(--gray-200); z-index: 100; }
.navbar-inner { max-width: 1200px; margin: 0 auto; height: 100%; display: flex; align-items: center; gap: 24px; padding: 0 24px; }
.navbar-logo { font-size: 1.25rem; font-weight: 800; color: var(--navy-800); text-decoration: none; }
.navbar-logo span { color: var(--accent); }
.navbar-links { display: flex; gap: 18px; flex: 1; }
.navbar-links a { color: var(--gray-500); text-decoration: none; font-weight: 600; font-size: 0.875rem; transition: color 0.2s; }
.navbar-links a:hover { color: var(--navy-800); }
.navbar-actions { display: flex; align-items: center; gap: 12px; }
.theme-toggle { background: transparent; border: 1px solid var(--gray-200); width: 36px; height: 36px; border-radius: 50%; cursor: pointer; font-size: 1rem; }
.theme-toggle:hover { background: var(--gray-100); }
.btn-sm { padding: 7px 14px; font-size: 0.8125rem; }

@media(max-width:700px) {
  .navbar-inner { gap: 10px; padding: 0 12px; }
  .navbar-links { display: none; }
}

.header { display: none !important; }

.tn-back-btn { display: inline-flex; align-items: center; gap: 6px; padding: 10px 18px; background: var(--gray-100); color: var(--gray-800); border: 1px solid var(--gray-200); border-radius: 8px; text-decoration: none; font-weight: 600; font-size: 0.875rem; margin-bottom: 16px; }
.tn-back-btn:hover { background: var(--gray-200); }