/* ==========================================================================
   DIXIIT JEE — Premium theme overrides (load AFTER styles.css)
   ========================================================================== */
:root {
  --primary: #1d4ed8;
  --primary-hover: #1e40af;
  --primary-soft: #dbeafe;
  --grad: linear-gradient(135deg, #1740b8 0%, #2563eb 55%, #3b82f6 100%);
  --bg: #f4f5fb;
  --border: #e7e9f2;
  --shadow: 0 6px 24px rgba(37, 99, 235, 0.09);
  --shadow-lg: 0 18px 50px rgba(15, 23, 42, 0.16);
  --radius: 16px;
}
[data-theme="dark"] {
  --primary: #60a5fa;
  --primary-hover: #93c5fd;
  --primary-soft: #1e3a8a;
  --bg: #081430;
  --bg-2: #0e1c3e;
  --bg-3: #14254e;
  --border: #21335e;
  --border-strong: #2e4374;
  --grad: linear-gradient(135deg, #2563eb 0%, #3b82f6 60%, #60a5fa 100%);
}

html, body {
  font-family: "Inter", "Segoe UI", "Noto Sans Devanagari", system-ui, -apple-system, sans-serif;
}

/* ---- full-page auth/select screens: soft gradient backdrop ---- */
#screen-login, #screen-select, #screen-start {
  background:
    radial-gradient(900px 500px at 8% -10%, rgba(37, 99, 235, 0.13), transparent 60%),
    radial-gradient(800px 500px at 108% 110%, rgba(245, 158, 11, 0.10), transparent 60%),
    var(--bg);
}
[data-theme="dark"] #screen-login, [data-theme="dark"] #screen-select, [data-theme="dark"] #screen-start {
  background:
    radial-gradient(900px 500px at 8% -10%, rgba(59, 130, 246, 0.25), transparent 60%),
    radial-gradient(800px 500px at 108% 110%, rgba(245, 158, 11, 0.12), transparent 60%),
    var(--bg);
}

.start-card {
  border-radius: 22px;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-lg);
  animation: cardRise .45s ease both;
}
@keyframes cardRise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

.brand { padding-bottom: 14px; border-bottom: 2px solid transparent;
  border-image: linear-gradient(90deg, #1d4ed8, #f59e0b, transparent) 1; }
.brand-text h1 { letter-spacing: -0.02em; font-weight: 800; }
.brand-logo { box-shadow: 0 4px 14px rgba(37, 99, 235, 0.18); }

/* ---- buttons ---- */
.btn { border-radius: 11px; font-weight: 600; }
.btn-primary {
  background: var(--grad);
  border: none; color: #fff;
  box-shadow: 0 5px 16px rgba(37, 99, 235, 0.35);
}
.btn-primary:hover { background: var(--grad); filter: brightness(1.07); box-shadow: 0 8px 22px rgba(37, 99, 235, 0.5); }
.btn-success { box-shadow: 0 5px 14px rgba(22, 163, 74, 0.3); border: none; }

/* ---- dashboard exam cards ---- */
.dash-h { font-size: 13px !important; text-transform: uppercase; letter-spacing: .08em;
  color: var(--text-mute); font-weight: 700; }
.exam-item {
  border-radius: 16px;
  border: 1.5px solid var(--border);
  padding: 16px 18px;
  background: var(--bg-2);
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.05);
  transition: all .18s ease;
  position: relative;
  overflow: hidden;
}
.exam-item::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  background: var(--grad); opacity: 0; transition: opacity .18s; }
.exam-item:hover { border-color: var(--primary); transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(37, 99, 235, 0.18); background: var(--bg-2); }
.exam-item:hover::before { opacity: 1; }
.exam-item .ei-go { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
  background: var(--primary-soft); transition: all .18s; }
.exam-item:hover .ei-go { background: var(--grad); color: #fff; }

/* ---- login form ---- */
.candidate-row input { border-radius: 11px; border-width: 1.5px; padding: 12px 14px; transition: all .15s; }
.candidate-row input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.14); }
.login-foot a { color: var(--primary); font-weight: 600; text-decoration: none; }
.login-foot a:hover { text-decoration: underline; }

/* ---- exam topbar ---- */
.exam-topbar {
  background: linear-gradient(90deg, #081430, #0c2050 60%, #0e2a63);
  color: #fff; border-bottom: none;
  box-shadow: 0 4px 18px rgba(8, 20, 48, 0.35);
}
.exam-topbar .title-main { color: #fff; }
.exam-topbar .title-sub { color: #93c5fd; }
.exam-topbar .logo-img { border-radius: 8px; background: #fff; padding: 2px 4px; }
.candidate-chip { background: rgba(255, 255, 255, 0.1); color: #dbeafe; border: 1px solid rgba(255, 255, 255, 0.16); }
.timer-box { background: rgba(255, 255, 255, 0.1); color: #fff; border: 1px solid rgba(255, 255, 255, 0.18); border-radius: 12px; }
.timer-box.warning { background: var(--warning-soft); color: var(--warning); }
.timer-box.danger { background: var(--danger-soft); color: var(--danger); }
.exam-topbar .icon-btn { color: #dbeafe; }

.exam-progress-bar span { background: var(--grad) !important; }

/* ---- section tabs ---- */
.section-tab { border-radius: 999px; font-weight: 600; }
.section-tab.active { background: var(--grad); border-color: transparent; color: #fff !important;
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.35); }

/* ---- question panel + options ---- */
.question-panel { border-radius: 18px; box-shadow: var(--shadow); }
.option-item { border-radius: 13px; border-width: 1.5px; transition: all .15s ease; }
.option-item:hover { border-color: var(--primary); transform: translateX(3px); }
.option-item.selected { border-color: var(--primary); background: var(--primary-soft);
  box-shadow: 0 3px 12px rgba(37, 99, 235, 0.2); }
.qtype-chip { background: var(--grad); color: #fff; }

/* ---- palette ---- */
.palette-col { border-radius: 18px; box-shadow: var(--shadow); }
.pal-q { border-radius: 10px; font-weight: 700; transition: transform .12s; }
.pal-q:hover { transform: scale(1.1); }
.pal-q.current { outline: 3px solid var(--primary); outline-offset: 1px; }

/* ---- result ---- */
.status-banner { border-radius: 14px; font-weight: 800; letter-spacing: .02em; }
.status-banner.pass { background: linear-gradient(135deg, #059669, #10b981); color: #fff;
  box-shadow: 0 8px 24px rgba(16, 185, 129, 0.35); }
.status-banner.fail { background: linear-gradient(135deg, #dc2626, #f87171); color: #fff;
  box-shadow: 0 8px 24px rgba(239, 68, 68, 0.3); }
.stat-card { border-radius: 14px; border: 1px solid var(--border);
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.05); transition: transform .15s, box-shadow .15s; }
.stat-card:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.review-card { border-radius: 16px; box-shadow: 0 1px 3px rgba(15, 23, 42, 0.05); }

/* ---- modals ---- */
.modal-card { border-radius: 20px; box-shadow: var(--shadow-lg); }

/* ---- misc ---- */
.ei-tag { font-weight: 700; }
.login-error { border-radius: 10px; }
.login-ok { border-radius: 10px; }

/* ---- display type + score numerals ---- */
.brand-text h1, .title-main, #start-title, .instructions h2, .stat-value, .donut-pct { font-family: 'Sora', 'Inter', sans-serif; }
.timer-value, .stat-value, .done-v { font-variant-numeric: tabular-nums; }

/* ---- brand row proportions ---- */
.brand-logo { height: 44px !important; max-width: 190px !important; }
.brand-text { flex: 1; min-width: 0; }
.brand-text h1 { font-size: 21px; }
.brand-text h1 { white-space: nowrap; font-size: 20px; }

/* ---- responsive polish (phones) ---- */
@media (max-width: 600px) {
  .start-card, .login-card { padding: 20px 16px; }
  .exam-item { padding: 13px 14px; }
  .exam-item .ei-title { font-size: 15px; }
  .exam-item .ei-meta { font-size: 12px; }
  .exam-item .ei-go { width: 28px; height: 28px; font-size: 18px; }
  .brand { gap: 10px; }
  .brand-text h1 { font-size: 17px !important; }
  .brand-logo { height: 36px !important; max-width: 150px !important; }
}