/* Module 06 - DBMS & SQL rapid fire.
   Rules are scoped under .dbmod: this module uses .topbar, .wrap, .card, .btn
   and .tag, all of which the shared shell also owns. Its palette carries the
   site's dark values. Markup and JS are untouched. */

:root {
  --page:#0e1116;
  --surface:#161b22;
  --surface-2:#131820;
  --border:#2c3440;
  --border-2:#39424f;

  --ink:#e9edf2;
  --ink-2:#b4becc;
  --muted:#8f9aab;
  --muted-2:#7c8797;

  --green:#74dfa2;
  --green-dark:#a6efc6;
  --green-soft:#11291d;
  --green-line:#2f6b49;

  --blue:#4d9bff;
  --blue-dark:#9cc6ff;
  --blue-soft:#16243a;
  --blue-line:#31455f;


  --red:#ff9d96;
  --red-soft:#2d1618;
  --red-line:#7a3733;
  --amber:#e0b060;
  --amber-soft:#2a2114;
  --amber-line:#6d5423;

  --radius:10px;
  --radius-lg:12px;
  --font:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  --display:"Space Grotesk","Inter",system-ui,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
}
.dbmod * {box-sizing:border-box}
.dbmod html,
.dbmod {margin:0;padding:0}
.dbmod html {overflow-x:hidden}
.dbmod {
  background:var(--page);
  color:var(--ink);
  font-family:var(--font);
  font-size:16px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
  display:flex;flex-direction:column;
}
.dbmod .screen {display:none}
.dbmod .screen.is-active {display:flex;flex-direction:column;flex:1 0 auto}
.dbmod .wrap {max-width:1120px;margin:0 auto;padding:20px 20px 64px}
.dbmod .wrap-narrow {max-width:680px}
.dbmod .start-wrap {max-width:980px;flex:1;display:flex;flex-direction:column;
  justify-content:center;min-height:0;padding-bottom:24px}
.dbmod .start-grid {display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start}
.dbmod .start-grid .card {margin-bottom:0}
.dbmod .start-grid .card-body {padding:16px}
.dbmod .start-grid .field {margin-bottom:12px}
.dbmod .covers {
  margin:14px 0 0;padding-top:12px;border-top:1px solid var(--border);
  font-size:.72rem;line-height:1.6;color:var(--muted-2);
}
.dbmod .covers b {
  display:block;font-size:.64rem;text-transform:uppercase;letter-spacing:.11em;
  color:var(--muted);font-weight:600;margin-bottom:3px;
}
@media (max-width:820px){
.dbmod .start-wrap {flex:0 0 auto;justify-content:flex-start;padding-bottom:40px}
.dbmod .start-grid {grid-template-columns:1fr}
}
.dbmod .topbar {
  display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  padding:14px 20px;background:var(--surface);border-bottom:1px solid var(--border);
}
.dbmod .wordmark {
  font-family:var(--display);font-weight:700;font-size:1.5rem;letter-spacing:-.02em;
  text-transform:uppercase;color:var(--ink);white-space:nowrap;
}
.dbmod .wordmark i {font-style:normal;color:var(--green)}
.dbmod .wordmark-sm {font-size:1.15rem}
.dbmod .topbar-right {margin-left:auto;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.dbmod .stepchip {
  display:inline-flex;align-items:center;gap:6px;
  border:1px solid var(--border);background:var(--surface);border-radius:999px;
  padding:6px 14px;font-size:.82rem;color:var(--muted);white-space:nowrap;
}
.dbmod .stepchip b {color:var(--ink);font-family:var(--display);font-weight:700}
.dbmod .stepchip-num {border-color:var(--blue-line);background:var(--blue-soft)}
.dbmod .stepchip-num b {font-family:var(--mono);color:var(--blue-dark);font-weight:600}
.dbmod .hstat {
  display:inline-flex;align-items:baseline;gap:7px;padding:6px 14px;
  border:1px solid var(--border);border-radius:999px;background:var(--surface);
}
.dbmod .hstat span {font-size:.66rem;text-transform:uppercase;letter-spacing:.1em;color:var(--muted-2)}
.dbmod .hstat b {font-family:var(--display);font-size:1.05rem;color:var(--ink)}
.dbmod .banner {
  display:flex;align-items:center;gap:14px;
  background:var(--blue-soft);border-left:4px solid var(--blue);
  padding:14px 20px;
}
.dbmod .banner p {
  margin:0;font-family:var(--display);font-size:1.12rem;font-weight:500;
  color:var(--blue-dark);letter-spacing:-.01em;
}
.dbmod .tag {
  flex:0 0 auto;background:var(--blue);color:var(--page);border-radius:6px;
  font-family:var(--display);font-weight:700;font-size:.68rem;letter-spacing:.1em;
  text-transform:uppercase;padding:5px 10px;
}
.dbmod .card {
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);
  margin-bottom:16px;overflow:hidden;
}
.dbmod .card-head {
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:11px 16px;background:var(--surface-2);border-bottom:1px solid var(--border);
}
.dbmod .card-head > span:first-child {
  font-size:.72rem;font-weight:600;text-transform:uppercase;letter-spacing:.11em;color:var(--muted);
}
.dbmod .card-body {padding:18px 16px}
.dbmod .badge {
  font-family:var(--mono);font-size:.72rem;color:var(--muted);
  background:var(--surface);border:1px solid var(--border);border-radius:999px;padding:2px 10px;
}
.dbmod .field {display:block;margin-bottom:14px}
.dbmod .field > span {
  display:block;font-size:.68rem;font-weight:600;text-transform:uppercase;
  letter-spacing:.11em;color:var(--muted);margin-bottom:7px;
}
.dbmod .field input,
.dbmod .field select {
  width:100%;padding:11px 13px;border-radius:var(--radius);font:inherit;color:var(--ink);
  background:var(--surface);border:1px solid var(--border-2);outline:none;
  transition:border-color .14s, box-shadow .14s;
}
.dbmod .field input {font-family:var(--mono);font-size:.92rem}
.dbmod .field input::placeholder {color:var(--muted-2);font-family:var(--font)}
.dbmod .field input:focus,
.dbmod .field select:focus {
  border-color:var(--blue);box-shadow:0 0 0 3px rgba(37,99,235,.14);
}
.dbmod .field select {
  font-family:var(--mono);font-size:.92rem;cursor:pointer;
  appearance:none;-webkit-appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);
  background-position:calc(100% - 18px) calc(50% + 1px), calc(100% - 13px) calc(50% + 1px);
  background-size:5px 5px, 5px 5px;background-repeat:no-repeat;
}
.dbmod .field-row {display:flex;gap:12px}
.dbmod .field-row .field {flex:1;min-width:0}
.dbmod .field-row .field:first-child {flex:0 0 32%}
.dbmod .form-error {
  color:var(--red);background:var(--red-soft);border:1px solid var(--red-line);
  border-radius:var(--radius);font-size:.85rem;margin:0 0 12px;padding:9px 12px;display:none;
}
.dbmod .btn {
  font:inherit;font-weight:600;border:1px solid transparent;border-radius:var(--radius);
  padding:11px 22px;cursor:pointer;transition:background .14s, border-color .14s, transform .1s;
}
.dbmod .btn:active {transform:translateY(1px)}
.dbmod .btn-go {background:var(--green);color:var(--page)}
.dbmod .btn-go:hover {background:var(--green-dark)}
.dbmod .btn-blue {background:var(--blue);color:var(--page)}
.dbmod .btn-blue:hover {background:var(--blue-dark)}
.dbmod .btn-ghost {background:var(--surface);color:var(--ink-2);border-color:var(--border-2)}
.dbmod .btn-ghost:hover {background:var(--surface-2)}
.dbmod .btn-block {width:100%;padding:13px;font-size:1rem}
.dbmod .btn-sm {padding:7px 14px;font-size:.85rem;border-radius:8px}
.dbmod .rules {margin:0;padding-left:18px;color:var(--ink-2);font-size:.86rem;line-height:1.5}
.dbmod .rules li {margin-bottom:7px}
.dbmod .rules li:last-child {margin-bottom:0;color:var(--muted)}
.dbmod kbd {
  font-family:var(--mono);font-size:.75em;background:var(--surface-2);
  border:1px solid var(--border-2);border-bottom-width:2px;border-radius:4px;
  padding:1px 5px;color:var(--ink-2);
}
.dbmod .footer {margin-top:22px;color:var(--muted-2);font-size:.78rem;line-height:1.7;text-align:center}
.dbmod .progress {height:3px;background:var(--border)}
.dbmod .progress-fill {height:100%;width:0;background:var(--green);transition:width .35s ease}
.dbmod #screen-quiz .wrap {
  display:flex;flex-direction:column;justify-content:center;
  flex:1;min-height:0;padding-top:28px;width:100%;
}
.dbmod .quiz-grid {display:grid;grid-template-columns:220px 1fr;gap:16px;align-items:start}
@media (max-width:760px){
.dbmod .quiz-grid {grid-template-columns:1fr}
.dbmod #screen-quiz .wrap {justify-content:flex-start;flex:0 0 auto}
.dbmod .card-timer .card-body {flex-direction:row;justify-content:center;align-items:center;gap:14px;padding:12px}
.dbmod .timer {width:64px;height:64px}
.dbmod .timer-value {font-size:1.5rem}
.dbmod .timer-note {font-size:.62rem}
}
.dbmod .card-timer .card-body {display:flex;flex-direction:column;align-items:center;gap:6px}
.dbmod .timer {position:relative;width:132px;height:132px}
.dbmod .timer svg {width:100%;height:100%;transform:rotate(-90deg)}
.dbmod .ring-track {fill:none;stroke:var(--border);stroke-width:9}
.dbmod .ring-progress {fill:none;stroke:var(--green);stroke-width:9;stroke-linecap:round;transition:stroke .3s ease}
.dbmod .timer.is-warn .ring-progress {stroke:var(--amber)}
.dbmod .timer.is-danger .ring-progress {stroke:var(--red)}
.dbmod .timer-value {
  position:absolute;inset:0;display:grid;place-items:center;
  font-family:var(--display);font-size:2.5rem;font-weight:700;color:var(--ink);
}
.dbmod .timer.is-warn .timer-value {color:var(--amber)}
.dbmod .timer.is-danger .timer-value {color:var(--red);animation:pulse .5s ease-in-out infinite}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.1)}}
.dbmod .timer-note {
  margin:0;font-size:.66rem;text-transform:uppercase;letter-spacing:.11em;color:var(--muted-2);
}
.dbmod .card-in {animation:cardIn .24s cubic-bezier(.2,.8,.2,1)}
@keyframes cardIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.dbmod .q-text {
  font-family:var(--display);font-size:clamp(1.1rem,2.2vw,1.4rem);line-height:1.4;
  margin:0 0 18px;letter-spacing:-.015em;color:var(--ink);
}
.dbmod code {
  font-family:var(--mono);font-size:.86em;background:var(--blue-soft);
  border:1px solid var(--blue-line);border-radius:5px;padding:1px 6px;color:var(--blue-dark);
  
  -webkit-box-decoration-break:clone;box-decoration-break:clone;
}
.dbmod .options {display:grid;gap:9px}
.dbmod .option {
  display:flex;align-items:center;gap:12px;text-align:left;width:100%;
  padding:12px 14px;border-radius:var(--radius);font:inherit;font-size:.97rem;color:var(--ink-2);
  background:var(--surface);border:1px solid var(--border-2);cursor:pointer;
  transition:background .12s, border-color .12s, color .12s;
}
.dbmod .option:hover:not(.is-disabled) {background:var(--surface-2);border-color:var(--muted-2);color:var(--ink)}
.dbmod .option-key {
  flex:0 0 26px;height:26px;display:grid;place-items:center;border-radius:6px;
  font-family:var(--mono);font-size:.75rem;font-weight:600;
  background:var(--surface-2);border:1px solid var(--border);color:var(--muted);
}
.dbmod .option-text {flex:1}
.dbmod .option.is-disabled {cursor:default}
.dbmod .option.is-disabled:not(.is-correct):not(.is-wrong) {opacity:.5}
.dbmod .option.is-correct {background:var(--green-soft);border-color:var(--green-line);color:var(--ink)}
.dbmod .option.is-correct .option-key {background:var(--green);color:var(--page);border-color:var(--green)}
.dbmod .option.is-wrong {background:var(--red-soft);border-color:var(--red-line);color:var(--ink)}
.dbmod .option.is-wrong .option-key {background:var(--red);color:var(--page);border-color:var(--red)}
.dbmod .flash {
  height:28px;margin-top:14px;text-align:center;font-family:var(--display);font-weight:600;
  font-size:.95rem;letter-spacing:.01em;opacity:0;transition:opacity .14s;
}
.dbmod .flash.is-ok {opacity:1;color:var(--green)}
.dbmod .flash.is-no {opacity:1;color:var(--red)}
.dbmod .flash.is-out {opacity:1;color:var(--amber)}
.dbmod .hint {text-align:center;color:var(--muted-2);font-size:.76rem;margin:2px 0 0}
.dbmod .result-grid {display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start}
@media (max-width:820px){
.dbmod .result-grid {grid-template-columns:1fr} }
.dbmod .score-body {display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.dbmod .score-ring {position:relative;width:150px;height:150px;flex:0 0 150px}
.dbmod .score-ring svg {width:100%;height:100%;transform:rotate(-90deg)}
.dbmod .res-ring-fill {
  fill:none;stroke:var(--green);stroke-width:11;stroke-linecap:round;
  transition:stroke-dashoffset 1.1s cubic-bezier(.2,.8,.2,1);
}
.dbmod .score-ring-label {position:absolute;inset:0;display:grid;place-content:center;text-align:center}
.dbmod .score-ring-label strong {font-family:var(--display);font-size:2.2rem;line-height:1;color:var(--ink)}
.dbmod .score-ring-label span {font-size:.64rem;color:var(--muted-2);text-transform:uppercase;letter-spacing:.12em}
.dbmod .score-meta {flex:1;min-width:170px}
.dbmod .score-meta h2 {font-family:var(--display);font-size:1.5rem;margin:0 0 4px;letter-spacing:-.02em}
.dbmod .ident {font-family:var(--mono);font-size:.78rem;color:var(--muted);margin:0 0 10px}
.dbmod .big-score {margin:0;color:var(--muted);font-size:.9rem}
.dbmod .big-score strong {font-family:var(--display);font-size:1.6rem;color:var(--green)}
.dbmod .muted {color:var(--muted-2)}
.dbmod .stat-grid {display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
@media (max-width:420px){
.dbmod .stat-grid {grid-template-columns:repeat(2,1fr)} }
.dbmod .stat {
  background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius);
  padding:12px 8px;text-align:center;
}
.dbmod .stat strong {display:block;font-family:var(--display);font-size:1.3rem;line-height:1.2;color:var(--ink)}
.dbmod .stat span {font-size:.7rem;color:var(--muted)}
.dbmod .topic-row {margin-bottom:13px}
.dbmod .topic-row:last-child {margin-bottom:0}
.dbmod .topic-head {display:flex;justify-content:space-between;font-size:.87rem;margin-bottom:6px}
.dbmod .topic-head span:last-child {color:var(--muted);font-family:var(--mono);font-size:.76rem}
.dbmod .topic-track {height:7px;background:var(--border);border-radius:99px;overflow:hidden}
.dbmod .topic-fill {height:100%;background:var(--green);border-radius:99px;transition:width .8s ease}
.dbmod .lb {width:100%;border-collapse:collapse;font-size:.9rem}
.dbmod .lb th {
  text-align:left;color:var(--muted);font-weight:600;font-size:.68rem;
  text-transform:uppercase;letter-spacing:.1em;padding:0 8px 8px;
}
.dbmod .lb td {padding:8px;border-top:1px solid var(--border);font-family:var(--mono);font-size:.83rem}
.dbmod .lb td:nth-child(2) {font-family:var(--font);font-size:.9rem}
.dbmod .lb td:first-child,
.dbmod .lb th:first-child {width:34px;color:var(--muted-2)}
.dbmod .lb-me {background:var(--green-soft)}
.dbmod .lb-me td {color:var(--green-dark);font-weight:600}
.dbmod .review-toggle {
  display:inline-flex;align-items:center;gap:9px;background:var(--surface);
  border:1px solid var(--border-2);border-radius:8px;color:var(--ink-2);
  font:inherit;font-size:.82rem;font-weight:600;cursor:pointer;padding:5px 12px;
}
.dbmod .review-toggle:hover {background:var(--surface-2)}
.dbmod .review-list {display:none}
.dbmod .review-list.is-open {display:block}
.dbmod .review-item {border-bottom:1px solid var(--border);padding:0 0 14px;margin-bottom:14px}
.dbmod .review-item:last-child {border-bottom:none;margin-bottom:0;padding-bottom:0}
.dbmod .review-q {font-weight:500;margin-bottom:8px;line-height:1.45;color:var(--ink)}
.dbmod .review-n {
  font-family:var(--mono);font-size:.72rem;color:var(--muted);
  background:var(--surface-2);border:1px solid var(--border);
  border-radius:4px;padding:1px 6px;margin-right:8px;
}
.dbmod .review-line {font-size:.87rem;margin-bottom:3px}
.dbmod .review-bad {color:var(--red)}
.dbmod .review-good {color:var(--green-dark)}
.dbmod .review-topic {
  font-size:.66rem;color:var(--muted-2);margin-top:6px;
  text-transform:uppercase;letter-spacing:.1em;
}
.dbmod .save-status {font-size:.85rem;margin:4px 0 0;padding:10px 14px;border-radius:var(--radius);border:1px solid var(--border)}
.dbmod .save-status.is-idle {color:var(--muted);background:var(--surface-2)}
.dbmod .save-status.is-pending {color:var(--amber);background:var(--amber-soft);border-color:var(--amber-line)}
.dbmod .save-status.is-ok {color:var(--green-dark);background:var(--green-soft);border-color:var(--green-line)}
.dbmod .save-status.is-warn {color:var(--amber);background:var(--amber-soft);border-color:var(--amber-line)}
.dbmod :fullscreen {background:var(--page)}
.dbmod :fullscreen .wrap {max-width:1280px}
.dbmod :fullscreen .q-text {font-size:clamp(1.25rem,2.1vw,1.65rem)}
.dbmod :fullscreen .option {padding:15px 16px;font-size:1.04rem}
.dbmod :fullscreen .timer {width:152px;height:152px}
.dbmod :fullscreen .timer-value {font-size:2.9rem}

@media (prefers-reduced-motion:reduce){
.dbmod * {animation-duration:.01ms !important;transition-duration:.01ms !important}
}
.dbmod .sitefoot {
  flex:0 0 auto;
  display:flex;align-items:center;justify-content:center;gap:9px;flex-wrap:wrap;
  padding:14px 20px;background:var(--surface);border-top:1px solid var(--border);
  font-size:.8rem;color:var(--muted);text-align:center;
}
.dbmod .sitefoot strong {
  font-family:var(--display);font-weight:700;font-size:.88rem;
  color:var(--ink);letter-spacing:-.01em;
}
.dbmod .sf-role {color:var(--green-dark);font-weight:600}
.dbmod .sf-org i {font-style:normal;color:var(--muted-2);padding:0 1px}
.dbmod .sf-sep {color:var(--border-2)}

@media (max-width:560px){
.dbmod .sitefoot {gap:2px;flex-direction:column;padding:12px 16px;line-height:1.5}
.dbmod .sitefoot .sf-sep {display:none}
}
.dbmod .confetti {
  position:fixed;inset:0;width:100%;height:100%;
  pointer-events:none;z-index:9999;
}