:root {
  --blue: #005691;
  --navy: #003a63;
  --orange: #e86a00;
  --orange-dark: #a34c00;
  --paper: #efe6cf;
  --paper-light: #fffaf0;
  --ink: #1d1812;
  --muted: #62594c;
  --line: #8e806c;
  --desk: #2b241c;
  --red: #a33a2b;
}

* { box-sizing: border-box; }
body {
  min-width: 320px;
  margin: 0;
  color: var(--ink);
  font: 15px/1.55 Nunito, Arial, sans-serif;
  background-color: var(--desk);
  background-image: repeating-linear-gradient(16deg, #ffffff05 0 1px, transparent 1px 5px), repeating-linear-gradient(-38deg, #00000012 0 1px, transparent 1px 7px);
}
button, input, textarea { font: inherit; }
button { cursor: pointer; }
button:focus-visible, input:focus-visible, textarea:focus-visible, a:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; }
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3, .case-number, .stamp { font-family: "Special Elite", Georgia, serif; }
h1 { margin-bottom: 10px; color: var(--navy); font-size: clamp(2rem, 4vw, 2.85rem); line-height: 1; }
h2 { margin-bottom: 10px; color: var(--navy); font-size: 1.25rem; line-height: 1.15; }
h3 { margin: 0; font-size: 1rem; }

.navbar { display: flex; align-items: center; justify-content: space-between; min-height: 54px; padding: 0 4vw; color: #f6ead3; background: #16120e; border-bottom: 3px solid var(--orange); font-size: .8rem; letter-spacing: .06em; text-transform: uppercase; }
.navbar p { margin: 0; font-weight: 800; }.navbar span { margin-left: 10px; color: #a9c7d9; }.back-link { color: #f6ead3; font-weight: 800; text-decoration: none; }.back-link::before { content: "< "; color: var(--orange); }
.app-shell { display: grid; grid-template-columns: minmax(240px, .9fr) minmax(430px, 1.55fr) minmax(260px, .95fr); gap: 27px; max-width: 1640px; margin: 0 auto; padding: 38px 28px 54px; align-items: start; }
.panel { position: relative; padding: 24px; background: var(--paper); border: 1px solid #b9aa8e; box-shadow: 5px 7px 0 #0d0a07a6, 0 0 0 3px #efe6cf; }
.panel::after { position: absolute; z-index: 2; width: 76px; height: 21px; content: ""; background: #dfc99099; box-shadow: inset 0 0 0 1px #9e835744; transform: rotate(-3deg); top: -10px; left: calc(50% - 38px); pointer-events: none; }
.case-panel { transform: rotate(-.45deg); }.workspace { transform: rotate(.25deg); }.missions-panel { transform: rotate(.45deg); }
.case-panel::before, .missions-panel::before { position: absolute; z-index: 3; width: 14px; height: 14px; content: ""; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #f4e4b9 0 12%, #b74819 17% 45%, #63250f 52% 67%, #21160c 70%); box-shadow: 0 2px 2px #0007; }
.case-panel::before { top: 16px; right: 15px; }.missions-panel::before { top: 16px; left: 15px; }
.folder-tab { position: absolute; top: -29px; left: -1px; padding: 7px 18px 6px; color: #f4e5c7; background: var(--navy); border: 1px solid #002946; border-bottom: 0; border-radius: 5px 5px 0 0; font: .68rem "IBM Plex Mono", monospace; letter-spacing: .12em; }
.file-holes { height: 12px; margin: -7px 0 15px; background-image: radial-gradient(circle, #655847 0 3px, transparent 3.6px); background-size: 24px 12px; }
.case-heading { position: relative; padding-right: 96px; }.eyebrow { margin-bottom: 5px; color: var(--blue); font: 700 .68rem "IBM Plex Mono", monospace; letter-spacing: .09em; text-transform: uppercase; }.case-number { margin-bottom: 6px; color: var(--muted); font-size: .83rem; letter-spacing: .08em; }
.stamp { display: inline-block; position: absolute; top: 0; right: 0; padding: 5px 7px 4px; color: var(--red); border: 4px double currentColor; font-size: .68rem; letter-spacing: .1em; opacity: .88; transform: rotate(-6deg); }
.case-copy { color: #312a22; }.brief-card { margin: 17px 0; padding: 12px 13px; background: #f9efd9; border: 1px solid #a88c61; border-left: 6px solid var(--orange); }.brief-card strong { color: var(--orange-dark); font-family: "IBM Plex Mono", monospace; }.brief-card p { margin: 4px 0 0; }
.suspects { margin: 0 0 20px; padding: 0; list-style: none; }.suspects li { padding: 8px 0; border-bottom: 1px dashed #9f9078; font-weight: 800; }.suspects small { display: block; color: var(--muted); font: .72rem "IBM Plex Mono", monospace; }
.dossier-title, .mission-header, .workspace-head, .result-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }.dossier-title h2 { margin-bottom: 6px; }
.text-button, .secondary-button, .restart-button { padding: 7px 10px; color: var(--navy); background: transparent; border: 1px solid var(--navy); border-radius: 0; font: 700 .72rem "IBM Plex Mono", monospace; }.text-button:hover, .secondary-button:hover, .restart-button:hover { color: var(--paper-light); background: var(--navy); }
.table-list { display: grid; gap: 7px; counter-reset: evidence; }.table-item { display: grid; grid-template-columns: 47px 1fr auto; gap: 7px; align-items: center; padding: 8px; background: #f9efd9; border: 1px dashed #806d50; font: .75rem "IBM Plex Mono", monospace; }.table-item::before { counter-increment: evidence; content: "EV-" counter(evidence, decimal-leading-zero); color: var(--orange-dark); font-weight: 700; }.table-item span { color: var(--muted); font-size: .66rem; }.schema-list { margin-top: 9px; padding: 10px; background: #e1d3b7; border: 1px solid #a38f6e; font: .72rem/1.6 "IBM Plex Mono", monospace; }.schema-list p { margin: 0 0 7px; }.schema-list p:last-child { margin-bottom: 0; }.restart-button { width: 100%; margin-top: 18px; color: var(--red); border-color: var(--red); }.restart-button:hover { background: var(--red); }

.workspace { overflow: hidden; padding: 0 0 23px; }.workspace-head { padding: 25px 25px 15px; border-bottom: 2px solid var(--navy); }.read-only { padding: 4px 7px; color: var(--blue); border: 1px solid var(--blue); font: .62rem "IBM Plex Mono", monospace; letter-spacing: .06em; text-transform: uppercase; }
textarea { display: block; width: calc(100% - 44px); min-height: 262px; margin: 18px 22px 0; padding: 14px 15px; resize: vertical; color: #18130f; background-color: #fffdf6; background-image: repeating-linear-gradient(to bottom, transparent 0 27px, #a9c4d455 27px 28px); background-position: 0 8px; background-attachment: local; border: 1px solid #8a7a64; border-left: 4px solid var(--orange); border-radius: 0; caret-color: var(--orange); font: .9rem/28px "IBM Plex Mono", monospace; line-height: 28px; }.editor-actions { display: flex; flex-wrap: wrap; gap: 8px; padding: 13px 22px; }.execute-button, .conclude-button { padding: 9px 13px; color: #fff8ea; background: var(--orange); border: 1px solid var(--orange-dark); border-radius: 0; box-shadow: 0 3px 0 var(--orange-dark); font: 700 .75rem "IBM Plex Mono", monospace; letter-spacing: .04em; text-transform: uppercase; }.execute-button:hover, .conclude-button:hover { background: #cc5d00; }.execute-button:active, .conclude-button:active { box-shadow: none; transform: translateY(3px); }.execute-button kbd { padding-left: 8px; font: inherit; opacity: .75; }.hint-box, .feedback { margin: 0 22px 12px; padding: 10px 12px; border-left: 4px solid var(--blue); background: #dce9ec; }.feedback.success { border-color: #507b3b; background: #e4ecd9; }.feedback.error { border-color: var(--red); background: #f6e0d8; }
.result-area { margin: 4px 22px 0; border: 3px double #31291f; background: var(--paper-light); }.result-head { padding: 8px 10px; color: #fff; background: var(--blue); }.result-head h3 { color: inherit; }.result-head span { font: .66rem "IBM Plex Mono", monospace; }.table-wrap { overflow-x: auto; min-height: 92px; }.empty-state { padding: 18px; margin: 0; color: var(--muted); font-family: "IBM Plex Mono", monospace; }.result-table { width: 100%; border-collapse: collapse; font: .75rem "IBM Plex Mono", monospace; }.result-table th { padding: 9px; color: #fff; text-align: left; background: var(--navy); }.result-table td { padding: 8px 9px; border-top: 1px solid #cfc4ae; }.result-table tbody tr:nth-child(even) { background: #ede5d2; }
.activity-card { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; margin: 20px 22px 0; padding-top: 16px; border-top: 1px dashed #99866b; }.activity-card label { font: 700 .72rem "IBM Plex Mono", monospace; }.activity-card input { min-width: 0; padding: 8px; color: var(--ink); background: #fffdf6; border: 1px solid #8a7a64; border-radius: 0; }

.current-act { margin: 14px 0 0; padding: 7px 9px; color: var(--navy); background: #e1d3b7; border-left: 4px solid var(--orange); font: 700 .72rem "IBM Plex Mono", monospace; }.progress-track { position: relative; overflow: visible; }.act-tick { position: absolute; top: -4px; height: 18px; border-left: 1px dashed var(--navy); }.tick-1 { left: 18%; }.tick-2 { left: 44%; }.tick-3 { left: 74%; }.tick-4 { left: 90%; }.mission-list { gap: 16px; }.act-section { padding-top: 10px; border-top: 2px solid #a99677; }.act-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 9px; }.act-heading h3 { margin: 0; color: var(--navy); font-size: .88rem; }.act-heading small { color: var(--muted); font: .62rem "IBM Plex Mono", monospace; text-align: right; }.act-complete .act-heading h3 { color: var(--orange-dark); }.act-section ol { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }

.missions-panel { padding-top: 26px; }.mission-header { align-items: flex-start; }.mission-header strong { padding: 8px; color: var(--orange-dark); border: 3px double var(--orange-dark); font: 1rem "Special Elite", serif; transform: rotate(2deg); }.progress-track { height: 12px; margin: 16px 0 8px; overflow: hidden; background: #c7b99e; border: 1px solid #74644e; }.progress-track div { width: 0; height: 100%; background: repeating-linear-gradient(90deg, transparent 0 18px, #ffffff44 18px 20px), linear-gradient(90deg, var(--blue), var(--orange)); transition: width .18s ease; }.score-note { margin-bottom: 17px; color: var(--muted); font-size: .75rem; }.mission-list { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }.mission-list li { position: relative; padding: 12px 10px 11px 42px; background: #f8efd9; border: 1px solid #a99677; transition: transform .18s ease, background .18s ease; }.mission-list li:hover { transform: translateX(2px); }.mission-list li::before { position: absolute; top: 14px; left: 12px; width: 16px; height: 16px; content: ""; border: 2px solid #3e362c; }.mission-list li h3 { color: #292219; }.mission-list li h3 small { color: var(--muted); font: .67rem "IBM Plex Mono", monospace; }.mission-list li p { margin: 5px 0; font-size: .84rem; }.mission-list li > small { color: var(--orange-dark); font: .68rem "IBM Plex Mono", monospace; }.mission-list li.resolved::before { content: "X"; color: #fff8e8; text-align: center; line-height: 13px; background: var(--orange); border-color: var(--orange-dark); }.mission-list li.resolved::after { position: absolute; right: 8px; bottom: 8px; padding: 2px 5px; content: "RESOLVIDO"; color: var(--orange-dark); border: 2px solid currentColor; font: .58rem "Special Elite", serif; letter-spacing: .08em; transform: rotate(-5deg); }.mission-list li.current { border-left: 5px solid var(--orange); }.mission-list li.current h3::before { display: inline-block; width: 8px; height: 8px; margin: 0 7px 1px 0; content: ""; border-radius: 50%; background: var(--orange); animation: pulse 1.5s infinite; }

.toast { position: fixed; z-index: 10; right: 24px; bottom: 24px; max-width: min(420px, calc(100vw - 48px)); padding: 12px 15px; color: var(--orange-dark); background: var(--paper); border: 3px double var(--orange-dark); box-shadow: 4px 4px 0 #0c0906aa; font: .8rem "IBM Plex Mono", monospace; opacity: 0; pointer-events: none; transform: translateY(24px) rotate(-3deg); }.toast.show { opacity: 1; animation: stamp-in .2s ease-out both; }.modal { position: fixed; z-index: 20; inset: 0; display: grid; place-items: center; padding: 20px; background: #0d0a08c7; }.modal[hidden] { display: none; }.modal-card { position: relative; width: min(590px, 100%); padding: 32px; background: var(--paper); border: 4px double var(--navy); box-shadow: 8px 9px 0 #000; }.close-modal { position: absolute; top: 8px; right: 10px; color: var(--navy); background: transparent; border: 0; font-size: 1.6rem; }.certificate { display: grid; place-items: center; gap: 7px; margin-top: 20px; padding: 20px; text-align: center; background: #fffaf0; border: 4px double var(--navy); }.certificate p { margin: 0; color: var(--navy); font-family: "Special Elite", serif; }.certificate strong { font: 1.45rem "Special Elite", serif; }.certificate span { font: .72rem "IBM Plex Mono", monospace; }.senai-seal { width: 105px; height: 105px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
@keyframes pulse { 50% { opacity: .35; } } @keyframes stamp-in { from { opacity: 0; transform: scale(1.15) rotate(-5deg); } to { opacity: 1; transform: scale(1) rotate(-3deg); } }
@media (max-width: 1080px) { .app-shell { grid-template-columns: minmax(0, 1fr) minmax(260px, .72fr); max-width: 920px; }.workspace { grid-row: span 2; }.case-panel, .missions-panel { transform: rotate(0); } }
@media (max-width: 760px) { .app-shell { display: flex; flex-direction: column; gap: 31px; padding: 38px 16px; }.panel { width: 100%; }.workspace { order: 1; }.case-panel { order: 2; }.missions-panel { order: 3; } textarea { min-height: 200px; }.activity-card { grid-template-columns: 1fr; }.conclude-button { width: 100%; }.panel::after { left: 16%; }.navbar span { display: none; } }
@media (max-width: 440px) { .navbar { padding: 0 16px; }.navbar p { display: none; }.workspace-head, .panel { padding-left: 16px; padding-right: 16px; } .workspace { padding-left: 0; padding-right: 0; }.workspace-head { padding-top: 24px; }.editor-actions { padding-left: 16px; padding-right: 16px; }.editor-actions .secondary-button { flex: 1; }.execute-button { width: 100%; }.case-heading { padding-right: 80px; }.stamp { font-size: .57rem; }.result-area, .activity-card, .hint-box, .feedback, textarea { margin-left: 16px; margin-right: 16px; width: calc(100% - 32px); }.hint-box, .feedback, .result-area, .activity-card { width: auto; }.folder-tab { font-size: .58rem; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; animation: none !important; } }

/* === Polimento UI/UX (iteração 2) === */
textarea:focus { border-color: var(--navy); box-shadow: 0 0 0 3px #00569126; }
.execute-button { transition: transform .15s ease, background .15s ease; }
.panel { transition: transform .2s ease; }
.table-item { transition: border-color .2s ease, background .2s ease; }
.table-item:hover { border-style: solid; background: #fff6e2; }
.result-table tbody tr { transition: background .15s ease; }
.result-table tbody tr:hover { background: #fff3dd; }
.mission-list li { border-left: 5px solid transparent; }
.mission-list li.current { border-left-color: var(--orange); }
.mission-list li.resolved { border-left-color: #6f8f52; }
/* Toast já ok; adiciona entrada suave no modal */
.modal-card { animation: stamp-in .25s cubic-bezier(.2,.8,.2,1) both; }
/* Barra de progresso com brilho ao completar */
.progress-track div.done { background: linear-gradient(90deg, var(--blue), var(--orange)); }
/* Navbar: destaca link de voltar como botão */
.back-link { padding: 6px 12px; border: 1px solid #f6ead355; border-radius: 4px; transition: background .2s ease; }
.back-link:hover { background: #ffffff14; }
/* Skip-link focus consistente */
body.navbar-focused .navbar { outline: 3px solid var(--orange); }

/* Histórico de consultas — chips clicáveis */
.sql-history { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 22px 12px; }
.history-chip { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 4px 9px; color: var(--navy); background: #eef3f5; border: 1px solid #a9c4d4; border-radius: 3px; font: .68rem "IBM Plex Mono", monospace; }
.history-chip:hover { background: var(--navy); color: var(--paper-light); }
/* Linha de status vazia mais amigável */
.empty-state { display: grid; place-items: center; min-height: 92px; text-align: center; }
@media (prefers-reduced-motion: reduce) { .modal-card { animation: none; } }