/* =========================================================================
   DETEKTÍVMŰHELY // COLD CASE OPERATING SYSTEM
   High-tech / cinematic HUD felület
   ========================================================================= */

:root {
  --bg-0: #01050c;
  --bg-1: #03101d;
  --bg-2: #071a2e;
  --bg-3: #0b2743;
  --panel: rgba(6, 22, 39, 0.78);
  --panel-strong: rgba(8, 31, 54, 0.92);
  --panel-soft: rgba(13, 45, 74, 0.46);
  --stroke: rgba(79, 190, 255, 0.22);
  --stroke-strong: rgba(73, 206, 255, 0.72);
  --stroke-hot: rgba(57, 241, 255, 0.95);
  --cyan: #35eaff;
  --cyan-soft: #87dfff;
  --blue: #49a7ff;
  --blue-deep: #0b68d2;
  --green: #24f6b3;
  --amber: #ffd56e;
  --red: #ff5671;
  --text: #e9f7ff;
  --muted: #8aa9c8;
  --dim: #527090;
  --paper: #efe2c5;
  --font-ui: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  --font-mono: "JetBrains Mono", "Cascadia Mono", Consolas, "SFMono-Regular", monospace;
  --shadow-hot: 0 0 26px rgba(53, 234, 255, .22), 0 0 80px rgba(29, 140, 255, .12);
  --shadow-deep: 0 26px 90px rgba(0, 0, 0, .72);
  --r-xl: 22px;
  --r-lg: 16px;
  --r-md: 11px;
  --r-sm: 7px;
}

* { box-sizing: border-box; }
html, body { min-height: 100%; margin: 0; }
body {
  min-height: 100vh;
  padding: 86px 22px 24px;
  color: var(--text);
  font-family: var(--font-ui);
  background: var(--bg-0);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow-x: hidden;
  isolation: isolate;
}

input, textarea, select, button { font: inherit; }
input, textarea, select, .selectable-text { user-select: text; }
button { user-select: none; }
button:disabled { opacity: .45; cursor: not-allowed !important; filter: saturate(.35); }
img { max-width: 100%; }

.ambient-bg,
.circuit-grid,
.scanline-layer,
.edge-noise { position: fixed; inset: 0; pointer-events: none; }

.ambient-bg {
  z-index: -4;
  background:
    radial-gradient(circle at 13% 18%, rgba(31, 143, 255, .34), transparent 32%),
    radial-gradient(circle at 82% 12%, rgba(44, 255, 235, .14), transparent 28%),
    radial-gradient(circle at 78% 84%, rgba(12, 68, 145, .45), transparent 42%),
    linear-gradient(135deg, #01050b 0%, #05101c 45%, #020915 100%);
}

.circuit-grid {
  z-index: -3;
  opacity: .48;
  background-image:
    linear-gradient(rgba(55, 201, 255, .07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(55, 201, 255, .07) 1px, transparent 1px),
    linear-gradient(rgba(55, 201, 255, .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(55, 201, 255, .035) 1px, transparent 1px);
  background-size: 72px 72px, 72px 72px, 12px 12px, 12px 12px;
  mask-image: linear-gradient(to bottom, transparent 0, #000 9%, #000 88%, transparent 100%);
}

.scanline-layer {
  z-index: -2;
  opacity: .18;
  mix-blend-mode: screen;
  background: repeating-linear-gradient(to bottom, rgba(255,255,255,.055) 0, rgba(255,255,255,.055) 1px, transparent 1px, transparent 5px);
}

.edge-noise {
  z-index: -1;
  opacity: .28;
  background:
    linear-gradient(90deg, rgba(53,234,255,.14), transparent 12%, transparent 88%, rgba(53,234,255,.14)),
    radial-gradient(circle at 50% 2%, rgba(53,234,255,.18), transparent 26%);
}

.hidden { display: none !important; }
.hidden-space { visibility: hidden; }
.visible-inline { display: inline-flex !important; }
.admin-only { display: none !important; }
body.admin-mode .admin-only { display: revert !important; }
body.admin-mode .top-ui-controls .admin-only { display: inline-flex !important; }
body.admin-mode .ai-edit-box.admin-only { display: flex !important; }

/* =========================================================================
   Global command bar
   ========================================================================= */

.global-command-bar {
  position: fixed;
  top: 14px;
  left: 18px;
  right: 18px;
  height: 54px;
  z-index: 90000;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  padding: 0 18px;
  border: 1px solid rgba(73, 206, 255, .18);
  border-bottom-color: rgba(73, 206, 255, .36);
  background:
    linear-gradient(180deg, rgba(8, 24, 42, .82), rgba(3, 12, 23, .74)),
    linear-gradient(90deg, rgba(53, 234, 255, .08), transparent 45%, rgba(73, 206, 255, .06));
  box-shadow: 0 12px 38px rgba(0,0,0,.44), inset 0 -1px 0 rgba(53,234,255,.15);
  backdrop-filter: blur(16px);
}

.global-id-block {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--muted);
  font-family: var(--font-mono);
  font-weight: 800;
  letter-spacing: .095em;
  font-size: .78rem;
  white-space: nowrap;
}

.hex-mark {
  width: 30px;
  height: 30px;
  display: inline-block;
  background: linear-gradient(135deg, rgba(53,234,255,.25), rgba(73,167,255,.08));
  border: 1px solid rgba(53,234,255,.78);
  clip-path: polygon(25% 6%, 75% 6%, 100% 50%, 75% 94%, 25% 94%, 0 50%);
  box-shadow: 0 0 20px rgba(53,234,255,.42), inset 0 0 18px rgba(53,234,255,.18);
  position: relative;
}
.hex-mark::after {
  content: "";
  position: absolute;
  inset: 8px;
  border: 1px solid rgba(53,234,255,.8);
  clip-path: inherit;
}

.top-ui-controls { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 10px; }
.dev-skip-btn,
.email-toggle-btn,
.admin-toggle-btn,
.office-btn {
  min-height: 38px;
  padding: 0 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  color: var(--cyan-soft);
  background:
    linear-gradient(180deg, rgba(18, 55, 89, .82), rgba(3, 16, 31, .88)),
    linear-gradient(90deg, rgba(53,234,255,.09), transparent);
  border: 1px solid rgba(91, 199, 255, .35);
  border-radius: 10px;
  box-shadow: 0 10px 28px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.08);
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: .075em;
  font-size: .72rem;
  font-weight: 900;
  transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease, color .16s ease, background .16s ease;
}
.dev-skip-btn:hover,
.email-toggle-btn:hover,
.admin-toggle-btn:hover,
.office-btn:hover {
  transform: translateY(-1px);
  color: #fff;
  border-color: rgba(53,234,255,.82);
  box-shadow: 0 16px 42px rgba(0,0,0,.52), 0 0 24px rgba(53,234,255,.2), inset 0 0 24px rgba(53,234,255,.08);
}
.email-toggle-btn::before, .office-btn::before, .admin-toggle-btn::before { opacity: .92; font-size: .94rem; }
.cmd-mail::before { content: "✉"; }
.cmd-ai::before { content: "⦿"; color: var(--green); }
.cmd-board::before { content: "▣"; color: var(--amber); }
.cmd-admin::before { content: "⚙"; }
.cmd-logout::before { content: "↯"; }
.cmd-reset::before { content: "⟳"; }
.nancy-chat-top-btn { border-color: rgba(36,246,179,.42); color: #c6ffed; }
.office-btn { border-color: rgba(255,213,110,.48); color: #ffeab2; }
.logout-btn { border-color: rgba(255,86,113,.58) !important; color: #ffc0ca !important; }
.email-badge {
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: linear-gradient(135deg, #ff335d, #ff8a44);
  color: #fff;
  font-size: .68rem;
  box-shadow: 0 0 16px rgba(255, 86, 113, .58);
}

/* =========================================================================
   Dashboard frame
   ========================================================================= */

.detektiv-dashboard {
  position: relative;
  width: min(1540px, 100%);
  min-height: min(860px, calc(100vh - 110px));
  display: grid;
  grid-template-columns: minmax(322px, 372px) minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 14px;
  padding: 16px;
  border: 1px solid rgba(91, 199, 255, .32);
  border-radius: var(--r-xl);
  background:
    radial-gradient(circle at 9% 0%, rgba(53,234,255,.14), transparent 33%),
    radial-gradient(circle at 100% 100%, rgba(73,167,255,.12), transparent 32%),
    linear-gradient(145deg, rgba(5, 19, 34, .92), rgba(2, 9, 18, .96));
  box-shadow: var(--shadow-deep), var(--shadow-hot), inset 0 0 0 1px rgba(255,255,255,.035);
  backdrop-filter: blur(18px);
  overflow: hidden;
}
.detektiv-dashboard::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, transparent 0, rgba(53,234,255,.18) 2%, transparent 4%, transparent 96%, rgba(53,234,255,.16) 98%, transparent),
    linear-gradient(to bottom, rgba(53,234,255,.16), transparent 11%);
  opacity: .78;
}
.detektiv-dashboard::after {
  content: "";
  position: absolute;
  inset: 10px;
  pointer-events: none;
  border: 1px solid rgba(53,234,255,.13);
  border-radius: calc(var(--r-xl) - 7px);
  box-shadow: inset 0 0 28px rgba(53,234,255,.05);
}
.dashboard-topbar {
  position: relative;
  z-index: 1;
  grid-column: 1 / -1;
  min-height: 82px;
  padding: 16px 22px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  border: 1px solid rgba(73,206,255,.22);
  border-radius: var(--r-lg);
  background:
    linear-gradient(180deg, rgba(8, 31, 54, .68), rgba(3, 13, 25, .82)),
    linear-gradient(90deg, rgba(53,234,255,.08), transparent 46%, rgba(73,167,255,.06));
  box-shadow: inset 0 0 32px rgba(53,234,255,.05);
  overflow: hidden;
}
.dashboard-topbar::before,
.dashboard-topbar::after {
  content: "";
  position: absolute;
  height: 1px;
  left: 22px;
  right: 22px;
  background: linear-gradient(90deg, transparent, rgba(53,234,255,.7), transparent);
  opacity: .32;
}
.dashboard-topbar::before { top: 0; }
.dashboard-topbar::after { bottom: 0; }
.product-lockup { display: flex; align-items: center; gap: 18px; min-width: 300px; }
.product-emblem {
  width: 64px;
  height: 54px;
  display: inline-block;
  background:
    linear-gradient(135deg, rgba(53,234,255,.95), rgba(73,167,255,.18)),
    radial-gradient(circle, #fff, transparent 36%);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  filter: drop-shadow(0 0 18px rgba(53,234,255,.58));
  opacity: .92;
}
.product-lockup div { display: flex; flex-direction: column; gap: 4px; }
.product-kicker {
  color: var(--cyan);
  font-family: var(--font-mono);
  font-weight: 900;
  font-size: .78rem;
  letter-spacing: .19em;
}
.product-lockup strong {
  font-size: 1.12rem;
  letter-spacing: .015em;
  color: var(--text);
  text-shadow: 0 0 18px rgba(73,206,255,.2);
}
.system-status-row { display: flex; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
.status-chip {
  min-height: 36px;
  padding: 0 14px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #9bc4e6;
  border: 1px solid rgba(91,199,255,.28);
  border-radius: 10px;
  background: rgba(5, 20, 36, .72);
  font-family: var(--font-mono);
  font-weight: 800;
  font-size: .72rem;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.status-chip::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--blue); box-shadow: 0 0 12px var(--blue); }
.status-chip.online { color: #c6ffed; border-color: rgba(36,246,179,.43); }
.status-chip.online::before { background: var(--green); box-shadow: 0 0 14px var(--green); }
.status-chip.archive::before { border-radius: 2px; }
.status-chip.review::before { width: 12px; height: 8px; border-radius: 2px; background: transparent; border: 1px solid var(--cyan-soft); box-shadow: none; }

/* Intro mode */
.detektiv-dashboard.intro-mode {
  grid-template-columns: minmax(320px, 620px);
  width: min(780px, 96vw);
  min-height: 720px;
}
.detektiv-dashboard.intro-mode .dashboard-topbar,
.detektiv-dashboard.intro-mode .dashboard-footer { display: none; }
.detektiv-dashboard.intro-mode .main-terminal { display: none; }
.detektiv-dashboard.intro-mode .ai-panel { grid-column: 1; min-height: 650px; }
.detektiv-dashboard.intro-mode .ai-avatar-container { height: 295px; }
.detektiv-dashboard.intro-mode .ai-speech-bubble { min-height: 270px; }

/* =========================================================================
   AI module
   ========================================================================= */

.ai-panel,
.main-terminal {
  position: relative;
  z-index: 1;
  border: 1px solid rgba(91,199,255,.28);
  background:
    linear-gradient(180deg, rgba(7, 28, 50, .76), rgba(2, 9, 18, .9)),
    radial-gradient(circle at 50% 0%, rgba(53,234,255,.12), transparent 44%);
  box-shadow: inset 0 0 42px rgba(53,234,255,.045), 0 18px 42px rgba(0,0,0,.34);
  overflow: hidden;
}
.ai-panel { grid-column: 1; grid-row: 2; border-radius: var(--r-lg); padding: 18px; display: flex; flex-direction: column; min-width: 0; }
.ai-panel::before,
.main-terminal::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(53,234,255,.12), transparent 18%, transparent 82%, rgba(53,234,255,.1)),
    linear-gradient(to bottom, rgba(255,255,255,.06), transparent 14%);
  opacity: .46;
}
.ai-panel::after,
.main-terminal::after {
  content: "";
  position: absolute;
  inset: 8px;
  border: 1px solid rgba(73,206,255,.095);
  border-radius: 12px;
  pointer-events: none;
}
.panel-label {
  position: relative;
  z-index: 1;
  color: var(--cyan);
  font-family: var(--font-mono);
  font-weight: 900;
  letter-spacing: .16em;
  font-size: .8rem;
  margin: 0 0 14px;
}
.ai-avatar-container {
  position: relative;
  z-index: 1;
  height: 220px;
  border: 1px solid rgba(73,206,255,.34);
  border-radius: 8px;
  overflow: hidden;
  background:
    radial-gradient(circle at 42% 45%, rgba(53,234,255,.2), transparent 35%),
    linear-gradient(180deg, rgba(7, 40, 68, .62), rgba(2, 9, 18, .9));
  box-shadow: inset 0 0 44px rgba(53,234,255,.13), 0 0 30px rgba(53,234,255,.1);
}
.ai-avatar-container::before {
  content: "";
  position: absolute;
  inset: 14px;
  border: 1px solid rgba(53,234,255,.34);
  background:
    radial-gradient(circle at center, transparent 0 38%, rgba(53,234,255,.09) 39%, transparent 40%),
    repeating-linear-gradient(to bottom, rgba(255,255,255,.05) 0 1px, transparent 1px 4px);
  opacity: .74;
  z-index: 2;
  pointer-events: none;
}
.ai-avatar-img {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 68%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(65%) contrast(1.22) brightness(.72) sepia(20%) hue-rotate(165deg) saturate(2.2);
  opacity: .72;
  mix-blend-mode: screen;
}
.ai-holo-ring {
  position: absolute;
  left: 26px;
  top: 18px;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  border: 1px solid rgba(53,234,255,.25);
  background:
    radial-gradient(circle, transparent 0 44%, rgba(53,234,255,.07) 45%, transparent 46%),
    conic-gradient(from 140deg, transparent, rgba(53,234,255,.36), transparent 36%, transparent 70%, rgba(73,167,255,.24), transparent);
  opacity: .8;
  z-index: 1;
}
.ai-status-pulse {
  position: absolute;
  right: 18px;
  bottom: 18px;
  z-index: 5;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 0 6px rgba(36,246,179,.16), 0 0 22px rgba(36,246,179,.9);
  animation: pulseAnimation 1.8s infinite;
}
@keyframes pulseAnimation { 0%, 100% { transform: scale(.92); } 50% { transform: scale(1.15); } }
.ai-avatar-meta {
  position: absolute;
  right: 18px;
  top: 44px;
  z-index: 4;
  min-width: 84px;
  display: grid;
  gap: 4px;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: .66rem;
  text-transform: uppercase;
  letter-spacing: .055em;
}
.ai-avatar-meta strong { color: var(--green); font-size: .7rem; }
.ai-avatar-meta small { margin-top: 18px; color: #6c8ead; font-size: .58rem; }
.ai-avatar-meta b { color: var(--cyan-soft); font-size: 1.28rem; text-shadow: 0 0 18px rgba(53,234,255,.28); }
.ai-name {
  position: relative;
  z-index: 1;
  margin: 18px 0 12px;
  color: var(--cyan-soft);
  font-family: var(--font-mono);
  font-size: .9rem;
  letter-spacing: .13em;
  line-height: 1.35;
  text-transform: uppercase;
}
.ai-speech-bubble {
  position: relative;
  z-index: 1;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.ai-speech-text-container {
  position: relative;
  min-height: 160px;
  max-height: 260px;
  overflow-y: auto;
  padding: 24px 20px;
  border: 1px solid rgba(73,206,255,.35);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(5, 23, 42, .78), rgba(1, 7, 15, .92)),
    radial-gradient(circle at 0% 0%, rgba(53,234,255,.18), transparent 45%);
  box-shadow: inset 0 0 38px rgba(53,234,255,.07), 0 0 22px rgba(53,234,255,.08);
}
.ai-speech-text-container::before {
  content: "“";
  position: absolute;
  top: 12px;
  left: 14px;
  color: var(--cyan);
  font-family: Georgia, serif;
  font-size: 2.4rem;
  line-height: 1;
  opacity: .86;
}
.ai-text-ghost { display: none; }
.ai-text-visible {
  position: relative;
  z-index: 1;
  margin: 0;
  color: #e8f7ff;
  font-family: var(--font-mono);
  font-size: .82rem;
  line-height: 1.72;
  font-weight: 700;
  padding-left: 8px;
}
.typewriter-cursor {
  display: inline-block;
  width: 8px;
  height: 15px;
  margin-left: 5px;
  vertical-align: middle;
  background: var(--cyan);
  box-shadow: 0 0 12px rgba(53,234,255,.74);
  animation: blink 1s steps(2, start) infinite;
}
@keyframes blink { 50% { opacity: .08; } }
.ai-link-row {
  margin: -39px 16px 0;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  color: var(--green);
  font-family: var(--font-mono);
  font-size: .62rem;
  letter-spacing: .04em;
  pointer-events: none;
}
.ai-link-row span:last-child { color: #6f90ad; }
.ai-hint-controls { display: none; flex-direction: column; gap: 9px; margin-top: 4px; }
.ai-chat-launch, .ai-edit-box { display: flex; }
.ai-action-btn {
  width: 100%;
  min-height: 58px;
  justify-content: flex-start !important;
  align-items: center !important;
  padding-left: 62px !important;
  text-align: left;
  position: relative;
}
.ai-action-btn::before {
  content: "⦿";
  position: absolute;
  left: 19px;
  color: var(--cyan);
  font-size: 1.35rem;
  text-shadow: 0 0 18px rgba(53,234,255,.56);
}
.ai-action-btn.secondary::before { content: "✎"; }
.ai-action-btn span, .ai-action-btn small { display: block; }
.ai-action-btn small { color: var(--muted); font-family: var(--font-mono); font-size: .64rem; margin-top: 3px; letter-spacing: .06em; }

/* =========================================================================
   Main workspace
   ========================================================================= */

.main-terminal {
  grid-column: 2;
  grid-row: 2;
  border-radius: var(--r-lg);
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
}
.terminal-title {
  position: relative;
  z-index: 2;
  min-height: 68px;
  margin: 0;
  padding: 0 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border-bottom: 1px solid rgba(73,206,255,.2);
  color: var(--text);
  font-size: 1.05rem;
  line-height: 1.3;
  letter-spacing: .055em;
  text-transform: uppercase;
  font-weight: 950;
}
.terminal-title #terminal-main-title::first-letter { color: var(--cyan); }
.terminal-menu {
  position: relative;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 14px 20px;
  border-bottom: 1px solid rgba(73,206,255,.16);
  background: rgba(1, 8, 17, .32);
}
.content-box {
  position: relative;
  z-index: 2;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 20px;
  background:
    linear-gradient(rgba(73,206,255,.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(73,206,255,.028) 1px, transparent 1px),
    linear-gradient(180deg, rgba(2, 10, 20, .48), rgba(1, 6, 13, .62));
  background-size: 44px 44px, 44px 44px, auto;
}
.content-box::-webkit-scrollbar,
.ai-speech-text-container::-webkit-scrollbar,
.admin-body::-webkit-scrollbar,
.email-list::-webkit-scrollbar,
.email-reading-view::-webkit-scrollbar { width: 9px; height: 9px; }
.content-box::-webkit-scrollbar-thumb,
.ai-speech-text-container::-webkit-scrollbar-thumb,
.admin-body::-webkit-scrollbar-thumb,
.email-list::-webkit-scrollbar-thumb,
.email-reading-view::-webkit-scrollbar-thumb { background: rgba(73,206,255,.28); border-radius: 999px; border: 2px solid rgba(1,7,15,.75); }

/* Buttons */
.det-btn {
  min-height: 38px;
  padding: 0 15px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid rgba(91, 199, 255, .38);
  border-radius: 10px;
  background:
    linear-gradient(180deg, rgba(20, 68, 105, .78), rgba(5, 19, 35, .88)),
    linear-gradient(90deg, rgba(53,234,255,.08), transparent);
  color: var(--cyan-soft);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 10px 22px rgba(0,0,0,.28);
  cursor: pointer;
  text-transform: uppercase;
  font-weight: 900;
  font-size: .73rem;
  letter-spacing: .075em;
  transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease, color .15s ease, background .15s ease;
}
.det-btn:hover:not(:disabled) { transform: translateY(-1px); color: #fff; border-color: rgba(53,234,255,.82); box-shadow: 0 0 28px rgba(53,234,255,.18), 0 14px 32px rgba(0,0,0,.36), inset 0 0 22px rgba(53,234,255,.08); }
.det-btn.active { background: linear-gradient(180deg, rgba(53,234,255,.88), rgba(24,152,232,.78)); color: #02111f; border-color: rgba(130,245,255,.94); box-shadow: 0 0 28px rgba(53,234,255,.38); }
.det-btn.active:hover { color: #02111f; }
.back-btn { display: none; border-color: rgba(91,199,255,.46); }
.back-btn::before { content: "‹"; font-size: 1.2rem; }
.danger-btn, .verdict-tab { border-color: rgba(255,86,113,.55) !important; color: #ffb7c2 !important; }
.verdict-tab.active, .verdict-tab:hover { background: linear-gradient(180deg, rgba(96, 24, 39, .86), rgba(25, 8, 17, .88)) !important; color: #fff !important; box-shadow: 0 0 30px rgba(255,86,113,.25), inset 0 -2px 0 rgba(255,86,113,.68) !important; }
.save-btn { border-color: rgba(36,246,179,.55) !important; color: #d2fff1 !important; background: linear-gradient(180deg, rgba(21,107,84,.86), rgba(6,35,28,.92)) !important; }
.mini-btn { min-height: 31px; padding: 0 11px; font-size: .66rem; }
.admin-close-btn { border-color: rgba(255,213,110,.55); color: #ffeab2; }

.terminal-menu .det-btn { min-width: 170px; justify-content: flex-start; }
.tab-icon { opacity: .9; color: var(--cyan); }

.system-message { color: var(--muted); font-style: italic; line-height: 1.55; font-family: var(--font-mono); }

/* =========================================================================
   Case list and high-tech Alapakta
   ========================================================================= */

.case-card {
  position: relative;
  padding: 24px;
  margin-bottom: 16px;
  border: 1px solid rgba(73,206,255,.28);
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(9,37,63,.76), rgba(3,14,26,.86));
  box-shadow: inset 0 0 32px rgba(53,234,255,.04);
  overflow: hidden;
}
.case-card::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(53,234,255,.14), transparent 45%); opacity: .6; pointer-events:none; }
.case-card h3 { position: relative; margin: 0 0 14px; color: var(--cyan); font-size: 1.05rem; text-transform: uppercase; letter-spacing: .08em; }
.admin-inline-panel { margin-top: 22px; padding-top: 15px; border-top: 1px solid rgba(73,206,255,.18); }
.admin-tab-edit-btn { background: rgba(255,213,110,.08); color: #ffe3a2; border: 1px dashed rgba(255,213,110,.55); padding: 10px 15px; cursor: pointer; border-radius: 10px; font-weight: 900; }

.case-workspace { display: grid; gap: 16px; }
.case-file-hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(210px, 290px) minmax(260px, 1fr) minmax(170px, 220px);
  gap: 20px;
  align-items: stretch;
  padding: 22px;
  border: 1px solid rgba(73,206,255,.32);
  border-radius: 14px;
  background:
    linear-gradient(rgba(73,206,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(73,206,255,.035) 1px, transparent 1px),
    radial-gradient(circle at 14% 18%, rgba(53,234,255,.16), transparent 36%),
    linear-gradient(180deg, rgba(9, 38, 65, .78), rgba(3, 13, 25, .92));
  background-size: 38px 38px, 38px 38px, auto, auto;
  box-shadow: inset 0 0 46px rgba(53,234,255,.055), 0 18px 42px rgba(0,0,0,.22);
  overflow: hidden;
}
.case-file-hero::before {
  content: "ALAPAKTA";
  position: absolute;
  top: 18px;
  left: 22px;
  color: var(--cyan);
  font-size: 1.34rem;
  font-weight: 950;
  letter-spacing: .08em;
  text-shadow: 0 0 18px rgba(53,234,255,.32);
}
.case-file-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(115deg, transparent, rgba(255,255,255,.07) 38%, transparent 58%);
  opacity: .2;
}
.dossier-holo {
  position: relative;
  min-height: 216px;
  margin-top: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(73,206,255,.22);
  border-radius: 10px;
  background: rgba(2,10,20,.42);
  overflow: hidden;
}
.dossier-holo::before {
  content: "";
  width: 160px;
  height: 116px;
  border: 1px solid rgba(53,234,255,.78);
  border-radius: 10px;
  background:
    linear-gradient(180deg, rgba(53,234,255,.12), rgba(73,167,255,.03)),
    repeating-linear-gradient(to bottom, rgba(139,223,255,.28) 0 2px, transparent 2px 12px);
  box-shadow: 0 0 28px rgba(53,234,255,.38), inset 0 0 30px rgba(53,234,255,.16);
  transform: perspective(300px) rotateX(8deg) rotateY(-6deg);
}
.dossier-holo::after {
  content: "FELÜLVIZSGÁLAT";
  position: absolute;
  padding: 8px 12px;
  border: 2px solid rgba(53,234,255,.72);
  border-radius: 50%;
  color: var(--cyan);
  font-family: var(--font-mono);
  font-weight: 900;
  font-size: .75rem;
  transform: rotate(-18deg);
  box-shadow: inset 0 0 16px rgba(53,234,255,.14);
}
.dossier-code {
  position: absolute;
  left: 22px;
  bottom: 18px;
  padding: 6px 11px;
  border: 1px solid rgba(73,206,255,.28);
  border-radius: 6px;
  color: var(--cyan-soft);
  background: rgba(9,37,63,.72);
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .05em;
}
.case-meta-grid {
  position: relative;
  z-index: 1;
  margin-top: 42px;
  padding: 20px 22px;
  border: 1px solid rgba(73,206,255,.2);
  border-radius: 10px;
  background: rgba(2,10,20,.36);
  display: grid;
  align-content: center;
}
.case-meta-row {
  display: grid;
  grid-template-columns: minmax(142px, 220px) 1fr;
  gap: 16px;
  padding: 9px 0;
  border-bottom: 1px solid rgba(73,206,255,.105);
}
.case-meta-row:last-child { border-bottom: 0; }
.case-meta-label {
  color: var(--muted);
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: .06em;
  font-size: .74rem;
  display: flex;
  gap: 8px;
  align-items: center;
}
.case-meta-label::before { content: "▧"; color: var(--cyan); opacity: .75; }
.case-meta-value { color: var(--text); font-weight: 650; }
.case-open-panel {
  position: relative;
  z-index: 1;
  margin-top: 42px;
  min-height: 206px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: space-between;
  padding: 18px;
  border: 1px solid rgba(53,234,255,.48);
  border-radius: 10px;
  background:
    radial-gradient(circle at 50% 55%, rgba(53,234,255,.14), transparent 42%),
    linear-gradient(180deg, rgba(9, 42, 70, .82), rgba(2, 10, 20, .88));
  box-shadow: inset 0 0 38px rgba(53,234,255,.08), 0 0 20px rgba(53,234,255,.12);
}
.case-open-panel .det-btn { min-height: 62px; justify-content: space-between; font-size: .84rem; }
.case-open-radar {
  height: 96px;
  opacity: .95;
  background:
    radial-gradient(circle at center, transparent 0 18%, rgba(53,234,255,.16) 19%, transparent 21%, transparent 34%, rgba(53,234,255,.13) 35%, transparent 37%, transparent 50%, rgba(53,234,255,.16) 51%, transparent 53%),
    linear-gradient(90deg, transparent 49%, rgba(53,234,255,.38) 50%, transparent 51%),
    linear-gradient(0deg, transparent 49%, rgba(53,234,255,.38) 50%, transparent 51%);
  border-radius: 8px;
  filter: drop-shadow(0 0 14px rgba(53,234,255,.18));
}
.case-intel-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.intel-card {
  min-height: 160px;
  padding: 16px;
  border: 1px solid rgba(73,206,255,.22);
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(9,37,63,.62), rgba(2,10,20,.84));
  box-shadow: inset 0 0 34px rgba(53,234,255,.045);
  overflow: hidden;
}
.intel-card h4 {
  margin: 0 0 14px;
  color: var(--cyan-soft);
  font-family: var(--font-mono);
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .09em;
}
.evidence-donut {
  width: 104px;
  height: 104px;
  float: left;
  margin: 2px 18px 8px 0;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at center, #061526 0 48%, transparent 49%),
    conic-gradient(var(--cyan) calc(var(--value, 68) * 1%), rgba(255,213,110,.84) 0 81%, rgba(255,86,113,.86) 0 100%);
  box-shadow: 0 0 24px rgba(53,234,255,.22);
}
.evidence-donut span { display: block; color: var(--text); text-align: center; font-weight: 950; font-size: 1.34rem; }
.evidence-donut small { display: block; font-family: var(--font-mono); color: var(--cyan-soft); font-size: .56rem; }
.intel-lines { display: grid; gap: 8px; font-family: var(--font-mono); font-size: .72rem; color: var(--muted); }
.intel-lines div { display: flex; justify-content: space-between; gap: 12px; }
.intel-lines b { color: var(--text); }
.waveform {
  height: 74px;
  margin: 4px 0 12px;
  background:
    linear-gradient(90deg, transparent, rgba(53,234,255,.2), transparent),
    repeating-linear-gradient(90deg, transparent 0 12px, rgba(53,234,255,.16) 13px 14px, transparent 15px 24px);
  clip-path: polygon(0 65%, 4% 42%, 8% 70%, 12% 34%, 16% 62%, 21% 38%, 26% 56%, 31% 20%, 36% 72%, 42% 46%, 49% 60%, 56% 32%, 62% 68%, 68% 40%, 74% 51%, 80% 24%, 86% 58%, 92% 38%, 100% 63%, 100% 100%, 0 100%);
  filter: drop-shadow(0 0 12px rgba(53,234,255,.45));
}
.shield-score { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; min-width: 92px; min-height: 82px; margin-right: 14px; float: left; border: 2px solid rgba(53,234,255,.55); clip-path: polygon(50% 0, 95% 16%, 84% 78%, 50% 100%, 16% 78%, 5% 16%); color: var(--cyan); font-weight: 950; text-shadow: 0 0 14px rgba(53,234,255,.36); }
.shield-score small { color: var(--muted); font-family: var(--font-mono); font-size: .58rem; }
.timeline-widget { display: grid; gap: 16px; }
.timeline-axis { height: 62px; position: relative; background: linear-gradient(90deg, rgba(73,206,255,.24), rgba(255,86,113,.44), rgba(73,206,255,.24)); mask-image: linear-gradient(to bottom, transparent, #000 40%, #000 60%, transparent); }
.timeline-axis::before { content: "2009     2010     2011     2022     2024"; position: absolute; left: 6px; right: 6px; top: 35px; display: flex; justify-content: space-between; white-space: pre; color: var(--muted); font-family: var(--font-mono); font-size: .64rem; letter-spacing: .12em; }
.timeline-focus { border: 1px solid rgba(73,206,255,.18); border-radius: 8px; padding: 12px; color: var(--text); background: rgba(2,10,20,.36); }
.timeline-focus small { display: block; color: var(--muted); font-family: var(--font-mono); margin-bottom: 4px; }
.timeline-focus b { color: var(--cyan-soft); }

/* =========================================================================
   Evidence / witness cards
   ========================================================================= */

.evidence-item, .witness-card {
  position: relative;
  display: flex;
  gap: 16px;
  padding: 16px;
  margin-bottom: 14px;
  border: 1px solid rgba(73,206,255,.22);
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(9,37,63,.68), rgba(2,10,20,.86));
  box-shadow: inset 0 0 30px rgba(53,234,255,.04);
}
.evidence-item::before, .witness-card::before { content: ""; position: absolute; left: 0; top: 14px; bottom: 14px; width: 3px; background: linear-gradient(var(--cyan), transparent); box-shadow: 0 0 16px rgba(53,234,255,.6); }
.evidence-thumbnail { width: 118px; height: 118px; object-fit: cover; border-radius: 8px; border: 1px solid rgba(73,206,255,.3); background: rgba(2,10,20,.8); cursor: zoom-in; filter: contrast(1.08) saturate(.9); }
.evidence-thumbnail:hover { border-color: rgba(53,234,255,.86); transform: scale(1.02); }
.evidence-info, .witness-card-body { flex: 1; min-width: 0; }
.evidence-info h3, .witness-card h3 { margin: 0 0 7px; color: var(--cyan-soft); letter-spacing: .04em; text-transform: uppercase; }
.evidence-info p, .witness-card p { margin: 0 0 9px; color: #c9def0; line-height: 1.55; }
.evidence-time, .witness-date { color: var(--amber); font-family: var(--font-mono); font-size: .72rem; margin-bottom: 8px; letter-spacing: .06em; }
.analysis-box { margin: 10px 0; padding: 11px 12px; border: 1px solid rgba(36,246,179,.3); border-radius: 9px; background: rgba(36,246,179,.06); color: #d7fff4; line-height: 1.55; }
.witness-card-photo { width: 86px; height: 86px; object-fit: cover; border-radius: 8px; border: 1px solid rgba(255,213,110,.35); filter: grayscale(.15) contrast(1.05); }

/* =========================================================================
   Email / Nancy chat modals
   ========================================================================= */

.email-modal,
.nancy-chat-modal,
.witness-modal,
.evidence-modal,
.office-modal,
.admin-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 100001;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(1, 5, 12, .82);
  backdrop-filter: blur(12px);
}
.email-modal { z-index: 100003; }
.nancy-chat-modal { z-index: 100004; }
.witness-modal { z-index: 100005; }
.evidence-modal { z-index: 100006; flex-direction: column; overflow: hidden; }
.office-modal { z-index: 100002; }
.login-modal-visible { display: flex; }
.email-window,
.nancy-chat-window,
.admin-box,
.auth-box,
.office-container {
  border: 1px solid rgba(73,206,255,.34);
  background:
    linear-gradient(180deg, rgba(8,31,54,.94), rgba(2,10,20,.98)),
    radial-gradient(circle at 0 0, rgba(53,234,255,.14), transparent 35%);
  box-shadow: 0 28px 90px rgba(0,0,0,.74), 0 0 34px rgba(53,234,255,.12), inset 0 0 44px rgba(53,234,255,.035);
  color: var(--text);
}
.email-window { width: min(1160px, 96vw); height: min(780px, 90vh); display: flex; flex-direction: column; overflow: hidden; border-radius: var(--r-lg); }
.email-header,
.nancy-chat-header,
.admin-header,
.office-header {
  padding: 15px 18px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  border-bottom: 1px solid rgba(73,206,255,.18);
  background: rgba(2,10,20,.48);
}
.email-header h3,
.nancy-chat-header h3,
.office-header h3,
.admin-title { margin: 0 0 3px; color: var(--cyan-soft); text-transform: uppercase; letter-spacing: .07em; }
.mail-subtitle,
.nancy-chat-header span { color: var(--muted); font-size: .82rem; }
.email-layout { display: flex; flex: 1; min-height: 0; }
.email-sidebar { width: 330px; display: flex; flex-direction: column; border-right: 1px solid rgba(73,206,255,.16); background: rgba(1,7,15,.42); }
.email-tabs { display: flex; }
.email-tab { flex: 1; min-height: 43px; border: 0; border-bottom: 1px solid rgba(73,206,255,.18); background: rgba(7,28,50,.72); color: var(--muted); cursor: pointer; text-transform: uppercase; font-weight: 900; letter-spacing: .06em; }
.email-tab.active { color: var(--cyan); background: rgba(53,234,255,.08); box-shadow: inset 0 -2px 0 var(--cyan); }
.email-list { overflow-y: auto; padding: 10px; }
.email-list-item { width: 100%; text-align: left; cursor: pointer; font-family: inherit; margin-bottom: 9px; padding: 12px; border: 1px solid rgba(73,206,255,.18); border-radius: 10px; background: rgba(8,31,54,.72); color: var(--text); display: grid; gap: 4px; }
.email-list-item:hover { border-color: rgba(53,234,255,.62); background: rgba(9,42,70,.82); }
.email-list-item.unread { border-left: 4px solid var(--green); box-shadow: 0 0 18px rgba(36,246,179,.12); }
.email-subject { color: var(--text); font-weight: 850; }
.email-sender, .email-date { color: var(--muted); font-size: .76rem; }
.email-reading-view { flex: 1; overflow-y: auto; padding: 22px; }
.email-no-selection, .email-list-empty { min-height: 100%; display: grid; place-items: center; text-align: center; color: var(--muted); font-style: italic; }
.email-read-card, .compose-box { max-width: 860px; margin: 0 auto; border: 1px solid rgba(73,206,255,.22); border-radius: 14px; padding: 22px; background: rgba(3,14,26,.74); box-shadow: inset 0 0 34px rgba(53,234,255,.035); }
.email-read-card h3, .compose-box h3 { margin-top: 0; color: var(--cyan-soft); }
.email-read-meta { color: var(--muted); border-bottom: 1px solid rgba(73,206,255,.16); padding-bottom: 12px; margin-bottom: 14px; }
.email-read-content { color: #dbefff; line-height: 1.72; }
.email-read-actions { margin-top: 18px; }
.outbound-preview { margin: 14px 0; min-height: 140px; border: 1px solid rgba(73,206,255,.18); border-radius: 10px; background: rgba(1,7,15,.46); padding: 14px; color: #dbefff; line-height: 1.62; }
.compose-footer { display: flex; justify-content: space-between; align-items: center; gap: 12px; }

.nancy-chat-window { width: min(920px, 94vw); height: min(760px, 88vh); border-radius: var(--r-lg); display: flex; flex-direction: column; overflow: hidden; }
.nancy-chat-history { flex: 1; overflow-y: auto; padding: 18px; display: flex; flex-direction: column; gap: 12px; }
.nancy-msg { max-width: 82%; padding: 12px 14px; border-radius: 14px; border: 1px solid rgba(73,206,255,.2); background: rgba(7,28,50,.72); line-height: 1.55; }
.nancy-msg.user { align-self: flex-end; border-color: rgba(53,234,255,.38); background: rgba(19,80,122,.58); }
.nancy-msg.assistant { align-self: flex-start; border-color: rgba(36,246,179,.24); }
.nancy-typing { padding: 0 18px 12px; color: var(--green); font-family: var(--font-mono); font-size: .78rem; }
.nancy-chat-footer { padding: 14px; border-top: 1px solid rgba(73,206,255,.16); display: flex; gap: 10px; }
.nancy-chat-input { flex: 1; min-height: 76px; resize: vertical; }

/* =========================================================================
   Paper / evidence image modal
   ========================================================================= */

.witness-paper {
  position: relative;
  width: min(780px, 94vw);
  max-height: 88vh;
  overflow-y: auto;
  padding: 38px 40px 40px 72px;
  border-radius: 4px;
  border: 1px solid #c9b57e;
  background-color: var(--paper);
  color: #1b160d;
  font-family: "Courier New", Courier, monospace;
  box-shadow: 0 20px 70px rgba(0,0,0,.78), 0 0 0 1px rgba(255,255,255,.15), inset 0 0 60px rgba(101,66,21,.18);
  background-image:
    linear-gradient(90deg, transparent 54px, rgba(139,54,32,.5) 55px, rgba(139,54,32,.5) 57px, transparent 58px),
    repeating-linear-gradient(0deg, rgba(0,0,0,.025) 0, rgba(0,0,0,.025) 1px, transparent 1px, transparent 28px),
    radial-gradient(circle at 24% 18%, rgba(255,255,255,.38), transparent 28%),
    radial-gradient(circle at 70% 75%, rgba(120,75,20,.08), transparent 32%);
}
.witness-paper::before { content: ""; position: absolute; inset: 10px; border: 1px solid rgba(80,60,32,.18); pointer-events:none; }
.paper-close { position: absolute; top: 8px; right: 12px; border: 0; background: transparent; color: #7f1d1d; font-size: 1.6rem; cursor: pointer; z-index: 5; }
.paper-close:hover { color: #dc2626; }
.paper-stamp { position: absolute; border: 4px double #b91c1c; color: #b91c1c; font-size: .76rem; font-weight: bold; padding: 5px 10px; transform: rotate(-8deg); text-align: center; white-space: pre-line; user-select: none; mix-blend-mode: multiply; }
#retro-paper-stamp { top: 30px; right: 40px; }
.photo-stamp { right: -18px; top: 126px; background: rgba(245,241,230,.76); }
.witness-photo-frame { position: absolute; top: 28px; right: 30px; width: 132px; height: 168px; padding: 7px; background: #fffaf0; border: 1px solid #8b7d61; transform: rotate(1.4deg); box-shadow: 0 5px 12px rgba(0,0,0,.25); }
.witness-photo-frame img { width: 100%; height: 100%; object-fit: cover; filter: sepia(18%) contrast(105%); }
.witness-paper-header { border-bottom: 2px solid #2b2a27; padding-bottom: 15px; margin-bottom: 24px; padding-right: 170px; min-height: 150px; }
.retro-paper .witness-paper-header { padding-right: 150px; }
.paper-kicker { font-weight: bold; font-size: .78rem; margin-bottom: 8px; color: #6b4f2a; letter-spacing: 1px; }
.witness-paper-title { font-size: 1.28rem; font-weight: bold; margin: 0 0 12px; text-transform: uppercase; letter-spacing: 1px; }
.witness-paper-meta { display: grid; grid-template-columns: max-content 1fr; gap: 5px 10px; font-size: .86rem; }
.paper-meta-row { display: contents; }
.paper-meta-row.full { display: block; grid-column: 1 / -1; }
.witness-paper-content { font-size: .95rem; line-height: 1.7; color: #24170f; white-space: pre-wrap; background-image: linear-gradient(rgba(0,0,0,.03) 1px, transparent 1px); background-size: 100% 1.7rem; padding-top: 5px; }
.statement-section { margin-bottom: 22px; }
.statement-section h5 { margin: 0 0 8px; font-size: .98rem; color: #111; text-transform: uppercase; }
.record-meta { white-space: pre-line; }

.modal-frame { position: relative; width: min(1120px, 88vw); height: 76vh; border: 1px solid rgba(53,234,255,.72); background: rgba(2,10,20,.96); padding: 10px; border-radius: 12px; display: flex; align-items: center; justify-content: center; overflow: auto; box-shadow: 0 0 46px rgba(53,234,255,.28); }
.modal-image { max-width: 100%; max-height: 100%; object-fit: contain; transform-origin: center center; transition: transform .15s ease; }
.modal-caption { color: var(--cyan); margin-top: 14px; text-align: center; text-transform: uppercase; letter-spacing: .09em; }
.modal-zoom-controls { display: flex; gap: 8px; margin-top: 10px; }
.close-modal-btn { position: absolute; top: -44px; right: 0; background: none; border: 0; color: var(--muted); font-family: inherit; font-size: 1rem; cursor: pointer; }
.close-modal-btn:hover { color: var(--red); }

/* =========================================================================
   Verdict
   ========================================================================= */

.verdict-screen h2 { color: #ffb6c1; margin-top: 0; letter-spacing: .08em; }
.verdict-screen h3 { color: var(--amber); border-bottom: 1px solid rgba(73,206,255,.18); padding-bottom: 7px; }
.suspect-verdict-card { display: flex; align-items: center; gap: 12px; padding: 12px; margin-bottom: 10px; border: 1px solid rgba(73,206,255,.22); border-radius: 12px; background: rgba(8,31,54,.66); }
.suspect-verdict-card.selected { border-color: rgba(36,246,179,.66); box-shadow: 0 0 18px rgba(36,246,179,.18); }
.suspect-verdict-card img { width: 66px; height: 66px; object-fit: cover; border-radius: 8px; border: 1px solid rgba(73,206,255,.25); }
.suspect-verdict-info { flex: 1; }
.suspect-verdict-info h4 { margin: 0 0 3px; color: var(--text); }
.suspect-verdict-info p { margin: 0; color: var(--muted); }
.suspect-verdict-actions { display: flex; gap: 7px; flex-wrap: wrap; justify-content: flex-end; }
.verdict-actions { margin-top: 18px; display: flex; justify-content: flex-end; }
.verdict-result { margin-top: 16px; border-radius: 12px; padding: 16px; line-height: 1.6; }
.verdict-result.success { background: rgba(36,246,179,.08); border: 1px solid rgba(36,246,179,.55); color: #d7fff4; }
.verdict-result.error { background: rgba(255,86,113,.08); border: 1px solid rgba(255,86,113,.55); color: #ffd3da; }
.newspaper-result { margin-top: 18px; background: #f4ecd8; color: #17130d; border: 1px solid #c2a66e; padding: 26px; font-family: Georgia, "Times New Roman", serif; box-shadow: 0 12px 35px rgba(0,0,0,.45); }
.newspaper-kicker { font-family: "Courier New", monospace; letter-spacing: 1.5px; color: #7c2d12; border-bottom: 3px double #4b2e12; padding-bottom: 7px; margin-bottom: 12px; font-weight: bold; }
.newspaper-result h3 { color: #111 !important; font-size: 1.6rem; border: 0 !important; margin: 0 0 12px; }
.newspaper-result p { font-size: 1.02rem; line-height: 1.75; }

/* =========================================================================
   Iratfal
   ========================================================================= */

.office-container { width: 100%; height: 100%; border-radius: var(--r-lg); display: flex; flex-direction: column; overflow: hidden; }
.office-body { display: flex; flex: 1; overflow: hidden; }
.office-sidebar-left,
.office-sidebar-right { width: 260px; background: rgba(1,7,15,.56); overflow-y: auto; padding: 12px; display: flex; flex-direction: column; gap: 12px; z-index: 10; border-color: rgba(73,206,255,.16); }
.office-sidebar-left { border-right: 1px solid rgba(73,206,255,.16); }
.office-sidebar-right { border-left: 1px solid rgba(73,206,255,.16); }
.office-nancy-panel h4 { color: var(--cyan); text-align: center; margin: 0 0 8px; }
.office-nancy-panel p,
.office-mini-help { color: var(--muted); font-size: .78rem; line-height: 1.5; background: rgba(2,10,20,.7); border: 1px solid rgba(73,206,255,.16); padding: 10px; border-radius: 9px; }
.office-board-size-controls { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.office-board-size-controls .det-btn:nth-child(3), .office-zoom-display { grid-column: 1 / -1; }
.office-zoom-display { color: var(--amber); text-align: center; font-weight: 900; font-family: var(--font-mono); border: 1px solid rgba(73,206,255,.18); background: rgba(1,7,15,.68); padding: 7px; border-radius: 8px; }
.office-board-wrap { flex: 1; overflow: hidden; position: relative; background: #0a1827; display: flex; align-items: center; justify-content: center; }
.office-main-board { flex: none; position: relative; min-width: 900px; min-height: 600px; overflow: visible !important; border: 14px solid #5a351c; outline: 1px solid rgba(255,255,255,.16); background-color: #8b5a2b; background-image: radial-gradient(#6b4226 15%, transparent 16%), radial-gradient(#6b4226 15%, transparent 16%); background-size: 20px 20px; background-position: 0 0, 10px 10px; box-shadow: inset 0 0 60px rgba(0,0,0,.8); transition: transform .16s ease; }
#office-lines-layer { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: auto; z-index: 4; }
.red-thread { stroke: #991b1b; stroke-width: 4; stroke-linecap: round; filter: drop-shadow(0 2px 2px rgba(0,0,0,.5)); cursor: pointer; pointer-events: stroke; }
.office-toolbar { background: rgba(1,7,15,.78); border-top: 1px solid rgba(73,206,255,.16); padding: 10px; display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; }
.tray-title { color: var(--amber); font-weight: bold; text-align: center; border-bottom: 1px dashed rgba(73,206,255,.2); padding-bottom: 8px; }
.office-tray-item { background: rgba(8,31,54,.72); border: 1px solid rgba(73,206,255,.22); border-radius: 9px; padding: 10px; cursor: pointer; transition: all .18s; text-align: center; font-family: inherit; color: var(--text); }
.office-tray-item:hover { border-color: rgba(53,234,255,.72); background: rgba(9,42,70,.82); }
.office-tray-img { width: 100%; height: 86px; object-fit: cover; border-radius: 6px; margin-bottom: 7px; pointer-events: none; background: #030712; }
.office-tray-img.placeholder { display: flex; align-items: center; justify-content: center; color: var(--dim); border: 1px dashed rgba(73,206,255,.22); }
.office-tray-title { display: block; color: var(--cyan-soft); font-weight: bold; font-size: .74rem; pointer-events: none; }
.office-tray-subtitle { display: block; color: var(--muted); font-size: .68rem; pointer-events: none; margin-top: 3px; }
.board-item { position: absolute; border-radius: 4px; box-shadow: 3px 5px 15px rgba(0,0,0,.6); cursor: grab; z-index: 10; user-select: none; transform-origin: center center; }
.board-item:active { cursor: grabbing; }
.board-item.line-start { outline: 3px solid var(--red); }
.board-item-evidence, .board-item-witness, .board-item-suspect { background: #fff; color: #111; padding: 9px 9px 12px; border: 1px solid #ddd; }
.board-item-witness { background: #f8fafc; }
.board-item-suspect { background: #fff7ed; }
.board-item img { width: 100%; height: auto; min-height: 60px; object-fit: cover; pointer-events: none; border: 1px solid #ddd; }
.board-title { color: #111; font-weight: bold; font-size: .76rem; text-align: center; margin-top: 7px; pointer-events: none; }
.board-subtitle { color: #555; font-size: .66rem; text-align: center; margin-top: 4px; pointer-events: none; }
.board-img-placeholder { height: 110px; display: flex; align-items: center; justify-content: center; border: 1px dashed #aaa; color: #777; }
.board-item-note { background: #fde68a; color: #111827; padding: 0; border: 1px solid #d97706; min-width: 120px; min-height: 58px; cursor: default; }
.note-drag-handle { background: rgba(217,119,6,.25); color: #78350f; font-weight: bold; font-size: .65rem; padding: 4px 7px; cursor: grab; border-bottom: 1px solid rgba(217,119,6,.35); }
.board-note-text { min-width: 120px; min-height: 48px; max-width: 360px; max-height: 280px; background: transparent; color: #111827; border: 0; outline: 0; padding: 8px; font-family: "Courier New", Courier, monospace; font-weight: bold; font-size: .9rem; line-height: 1.25; resize: both; overflow: auto; display: block; }
.board-resize-controls { position: absolute; right: 4px; top: 4px; display: flex; gap: 3px; z-index: 50; opacity: 1; }
.board-resize-controls button { width: 22px; height: 22px; border: 1px solid #111827; background: rgba(255,255,255,.92); color: #111827; font-weight: bold; cursor: pointer; border-radius: 3px; line-height: 18px; pointer-events: auto; }
.board-resize-controls button:hover { background: var(--amber); }

/* =========================================================================
   Login / admin
   ========================================================================= */

.admin-modal { display: none; }
.login-modal-visible { display: flex; }
.auth-box { width: min(480px, 94vw); padding: 28px; border-radius: var(--r-lg); }
.start-box { border-color: rgba(53,234,255,.52); }
.modal-kicker { color: var(--green); font-family: var(--font-mono); font-size: .72rem; letter-spacing: .16em; text-align: center; margin-bottom: 9px; }
.auth-title { margin: 0 0 15px; color: var(--cyan-soft); text-align: center; letter-spacing: .06em; }
.login-help-text { color: var(--muted); line-height: 1.55; font-size: .9rem; text-align: center; }
.admin-input,
.admin-textarea,
.admin-select,
.nancy-chat-input {
  width: 100%;
  border: 1px solid rgba(73,206,255,.22);
  border-radius: 9px;
  background: rgba(1,7,15,.72);
  color: var(--text);
  padding: 11px 12px;
  outline: 0;
}
.admin-input:focus,
.admin-textarea:focus,
.admin-select:focus,
.nancy-chat-input:focus { border-color: rgba(53,234,255,.72); box-shadow: 0 0 0 3px rgba(53,234,255,.08); }
.admin-textarea { min-height: 320px; resize: vertical; line-height: 1.45; font-family: var(--font-mono); }
.admin-textarea.short { min-height: 120px; }
.admin-textarea.medium { min-height: 220px; }
.admin-textarea.tall { min-height: 430px; }
.detective-name-input { text-align: center; border-color: rgba(53,234,255,.48); }
.start-actions { display: grid; grid-template-columns: 1fr; gap: 10px; margin-top: 12px; }
.login-submit-btn, .admin-login-open-btn { width: 100%; }
.admin-login-open-btn { border-color: rgba(255,213,110,.55); color: #ffeab2; }
.firebase-login-box { margin-top: 14px; padding-top: 14px; border-top: 1px dashed rgba(73,206,255,.2); }
.admin-box { width: min(1100px, 96vw); height: min(840px, 92vh); border-radius: var(--r-lg); display: flex; flex-direction: column; overflow: hidden; }
.admin-body { padding: 16px; overflow-y: auto; }
.admin-footer { padding: 12px 16px; border-top: 1px solid rgba(73,206,255,.16); display: flex; align-items: center; justify-content: flex-end; gap: 10px; flex-wrap: wrap; background: rgba(1,7,15,.54); }
.admin-section { background: rgba(2,10,20,.56); border: 1px solid rgba(73,206,255,.18); border-radius: 12px; padding: 14px; margin-bottom: 14px; }
.admin-section-title { color: var(--cyan-soft); margin: 0 0 10px; letter-spacing: .05em; }
.admin-label { display: block; color: var(--muted); font-size: .74rem; text-transform: uppercase; letter-spacing: .08em; margin-bottom: 6px; }
.admin-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; }
.admin-small-card { background: rgba(1,7,15,.62); border: 1px solid rgba(73,206,255,.16); border-radius: 9px; padding: 10px; color: var(--text); font-size: .82rem; line-height: 1.45; }
.admin-tabs-row { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; position: sticky; top: -16px; background: rgba(8,31,54,.96); padding: 8px 0; z-index: 5; }
.admin-tab-btn { background: rgba(7,28,50,.88); color: var(--muted); border: 1px solid rgba(73,206,255,.18); border-radius: 9px; padding: 9px 11px; cursor: pointer; font-weight: 850; }
.admin-tab-btn.active, .admin-tab-btn:hover { color: var(--cyan); border-color: rgba(53,234,255,.62); background: rgba(53,234,255,.08); }
.admin-edit-card,
.admin-nested-card { border: 1px solid rgba(73,206,255,.16); border-radius: 10px; padding: 12px; margin: 12px 0; background: rgba(1,7,15,.38); }
.admin-card-head { display: flex; justify-content: space-between; gap: 10px; align-items: center; margin-bottom: 10px; color: var(--cyan-soft); }
.admin-two-col { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.admin-evidence-preview img { max-height: 110px; border-radius: 8px; border: 1px solid rgba(73,206,255,.2); }

/* Toast */
.notif-container { position: fixed; bottom: 25px; right: 25px; z-index: 100010; display: flex; flex-direction: column; gap: 10px; }
.notif-toast { min-width: 250px; max-width: 380px; background: linear-gradient(135deg, rgba(8,31,54,.98), rgba(2,10,20,.98)); border: 1px solid rgba(73,206,255,.2); border-left: 5px solid var(--green); border-radius: 10px; padding: 13px 16px; font-size: .84rem; box-shadow: 0 12px 38px rgba(0,0,0,.48); display: flex; align-items: flex-start; gap: 10px; animation: slideIn .25s ease; transition: opacity .25s ease; color: #d7fff4; }
.notif-toast.error { border-left-color: var(--red); color: #ffd3da; }
.notif-toast.achievement { border-left-color: var(--amber); color: #fff0c4; }
@keyframes slideIn { from { transform: translateX(100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
.achievement-action { display: block; margin-top: 10px; background: var(--amber); color: #111827; border: 0; border-radius: 8px; padding: 7px 10px; font-family: inherit; font-weight: 900; cursor: pointer; }

/* Footer */
.dashboard-footer {
  position: relative;
  z-index: 1;
  grid-column: 1 / -1;
  min-height: 46px;
  padding: 0 18px;
  display: flex;
  align-items: center;
  gap: 26px;
  border: 1px solid rgba(73,206,255,.18);
  border-radius: 12px;
  background: rgba(2,10,20,.58);
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .05em;
  color: var(--muted);
  overflow: hidden;
}
.dashboard-footer div { display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.dashboard-footer strong { color: var(--cyan-soft); }
.dashboard-footer div:first-child strong { color: var(--green); }
.pulse-line { width: 130px; height: 18px; display: inline-block; background: linear-gradient(90deg, transparent, rgba(36,246,179,.55), transparent); clip-path: polygon(0 54%, 8% 54%, 10% 35%, 13% 70%, 16% 54%, 24% 54%, 26% 40%, 29% 64%, 32% 54%, 42% 54%, 45% 28%, 48% 76%, 51% 54%, 62% 54%, 65% 36%, 69% 66%, 72% 54%, 100% 54%, 100% 100%, 0 100%); }
.footer-mark { margin-left: auto; color: rgba(53,234,255,.18) !important; font-size: 1.3rem; font-weight: 950; letter-spacing: .1em; }

/* Responsive */
@media (max-width: 1180px) {
  body { padding-top: 124px; align-items: flex-start; }
  .global-command-bar { height: auto; min-height: 54px; flex-direction: column; align-items: stretch; padding: 12px 14px; clip-path: none; }
  .top-ui-controls { justify-content: flex-start; }
  .detektiv-dashboard { grid-template-columns: 1fr; grid-template-rows: auto auto minmax(0, 1fr) auto; min-height: auto; }
  .dashboard-topbar, .dashboard-footer { grid-column: 1; }
  .ai-panel { grid-column: 1; grid-row: 2; }
  .main-terminal { grid-column: 1; grid-row: 3; min-height: 560px; }
  .case-file-hero { grid-template-columns: 1fr; }
  .dossier-holo, .case-meta-grid, .case-open-panel { margin-top: 42px; }
  .case-intel-grid { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  body { padding: 138px 10px 14px; }
  .global-id-block { white-space: normal; }
  .top-ui-controls { gap: 7px; }
  .dev-skip-btn, .email-toggle-btn, .admin-toggle-btn, .office-btn { min-height: 34px; font-size: .62rem; padding: 0 9px; }
  .detektiv-dashboard { padding: 10px; border-radius: 16px; }
  .dashboard-topbar { flex-direction: column; align-items: flex-start; }
  .product-emblem { width: 42px; height: 36px; }
  .ai-avatar-container { height: 210px; }
  .terminal-title { flex-direction: column; align-items: flex-start; padding: 16px; }
  .terminal-menu { padding: 12px; }
  .terminal-menu .det-btn { min-width: 100%; }
  .content-box { padding: 12px; }
  .case-meta-row { grid-template-columns: 1fr; gap: 4px; }
  .email-layout, .office-body { flex-direction: column; }
  .email-sidebar, .office-sidebar-left, .office-sidebar-right { width: 100%; max-height: 220px; border-right: 0; border-left: 0; border-bottom: 1px solid rgba(73,206,255,.16); }
  .office-main-board { min-width: 720px; min-height: 520px; }
  .witness-paper { padding: 34px 24px 34px 58px; }
  .witness-paper-header { padding-right: 0; padding-top: 190px; }
  .witness-photo-frame { left: 72px; right: auto; }
  .admin-two-col { grid-template-columns: 1fr; }
  .dashboard-footer { flex-wrap: wrap; gap: 12px; height: auto; padding: 10px; }
}

/* =========================================================================
   Rendszerindító képernyő + tutorial overlay
   ========================================================================= */

.cmd-help::before { content: "?"; color: var(--cyan); font-weight: 1000; }

.system-boot-screen {
  position: fixed;
  inset: 0;
  z-index: 250000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 26px;
  background:
    radial-gradient(circle at 50% 42%, rgba(23, 140, 255, .24), transparent 34%),
    radial-gradient(circle at 22% 20%, rgba(53, 234, 255, .18), transparent 28%),
    linear-gradient(135deg, #01050b 0%, #061426 52%, #010711 100%);
  overflow: hidden;
}
.system-boot-screen::before,
.system-boot-screen::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.system-boot-screen::before {
  background-image:
    linear-gradient(rgba(53,234,255,.075) 1px, transparent 1px),
    linear-gradient(90deg, rgba(53,234,255,.075) 1px, transparent 1px),
    repeating-linear-gradient(to bottom, rgba(255,255,255,.035) 0, rgba(255,255,255,.035) 1px, transparent 1px, transparent 6px);
  background-size: 80px 80px, 80px 80px, 100% 100%;
  opacity: .52;
}
.system-boot-screen::after {
  background:
    linear-gradient(90deg, rgba(53,234,255,.24), transparent 9%, transparent 91%, rgba(53,234,255,.24)),
    linear-gradient(to bottom, rgba(53,234,255,.18), transparent 16%, transparent 84%, rgba(53,234,255,.12));
  mix-blend-mode: screen;
}
.system-boot-screen.boot-complete {
  animation: bootFadeOut .62s ease forwards;
}
@keyframes bootFadeOut {
  to { opacity: 0; transform: scale(1.015); filter: blur(7px); }
}
.boot-shell {
  position: relative;
  width: min(980px, 96vw);
  min-height: 560px;
  padding: 24px;
  border: 1px solid rgba(73, 206, 255, .46);
  border-radius: 24px;
  background:
    linear-gradient(135deg, rgba(7, 28, 50, .86), rgba(2, 10, 20, .94)),
    radial-gradient(circle at 85% 10%, rgba(53,234,255,.16), transparent 26%);
  box-shadow:
    0 28px 100px rgba(0,0,0,.76),
    0 0 70px rgba(53,234,255,.18),
    inset 0 0 0 1px rgba(255,255,255,.04);
  overflow: hidden;
}
.boot-shell::before {
  content: "";
  position: absolute;
  inset: 10px;
  border: 1px solid rgba(53,234,255,.14);
  border-radius: 18px;
  pointer-events: none;
}
.boot-grid {
  position: absolute;
  inset: 0;
  opacity: .28;
  background-image:
    linear-gradient(rgba(53,234,255,.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(53,234,255,.08) 1px, transparent 1px);
  background-size: 26px 26px;
  mask-image: radial-gradient(circle at 55% 45%, #000 0 45%, transparent 78%);
}
.boot-header,
.boot-core,
.boot-footer { position: relative; z-index: 1; }
.boot-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  padding-bottom: 20px;
  border-bottom: 1px solid rgba(53,234,255,.18);
}
.boot-brand { display: flex; align-items: center; gap: 14px; }
.boot-brand strong {
  display: block;
  color: #effcff;
  font-size: 1.35rem;
  letter-spacing: .14em;
}
.boot-brand small {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-family: var(--font-mono);
  letter-spacing: .06em;
}
.boot-emblem {
  width: 48px;
  height: 48px;
  display: inline-block;
  background: linear-gradient(135deg, rgba(53,234,255,.36), rgba(73,167,255,.1));
  clip-path: polygon(50% 0, 96% 26%, 96% 74%, 50% 100%, 4% 74%, 4% 26%);
  border: 1px solid rgba(53,234,255,.8);
  box-shadow: 0 0 34px rgba(53,234,255,.32), inset 0 0 20px rgba(53,234,255,.2);
}
.boot-version {
  color: var(--cyan-soft);
  font-family: var(--font-mono);
  font-weight: 900;
  letter-spacing: .12em;
  border: 1px solid rgba(53,234,255,.24);
  border-radius: 999px;
  padding: 10px 14px;
  background: rgba(4, 18, 32, .72);
}
.boot-core {
  display: grid;
  grid-template-columns: 330px minmax(0, 1fr);
  gap: 24px;
  align-items: center;
  padding: 44px 8px 34px;
}
.boot-orb {
  position: relative;
  width: 286px;
  height: 286px;
  margin: 0 auto;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(53,234,255,.15) 0 23%, transparent 24%),
    conic-gradient(from 120deg, rgba(53,234,255,.95), rgba(73,167,255,.06), rgba(36,246,179,.38), rgba(53,234,255,.95));
  box-shadow: 0 0 58px rgba(53,234,255,.18), inset 0 0 70px rgba(4,14,26,.95);
  animation: bootOrbPulse 2.2s ease-in-out infinite;
}
.boot-orb::before {
  content: "";
  position: absolute;
  inset: 14px;
  border: 1px solid rgba(53,234,255,.55);
  border-radius: inherit;
  background: radial-gradient(circle, rgba(2, 9, 18, .9) 0 48%, rgba(3, 24, 43, .72));
}
.boot-orb span {
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(53,234,255,.42);
  animation: bootSpin 8s linear infinite;
}
.boot-orb span:nth-child(1) { inset: 30px; border-top-color: transparent; }
.boot-orb span:nth-child(2) { inset: 58px; border-left-color: transparent; animation-duration: 5.5s; animation-direction: reverse; }
.boot-orb span:nth-child(3) { inset: 86px; border-bottom-color: transparent; animation-duration: 3.8s; }
.boot-orb b {
  position: relative;
  z-index: 1;
  color: #eaffff;
  font-family: var(--font-mono);
  font-size: 2.5rem;
  letter-spacing: .05em;
  text-shadow: 0 0 24px rgba(53,234,255,.55);
}
@keyframes bootSpin { to { transform: rotate(360deg); } }
@keyframes bootOrbPulse { 50% { transform: scale(1.025); filter: brightness(1.15); } }
.boot-terminal {
  min-height: 315px;
  border: 1px solid rgba(53,234,255,.22);
  border-radius: 16px;
  padding: 18px;
  background: linear-gradient(180deg, rgba(3, 14, 27, .84), rgba(1, 8, 17, .92));
  box-shadow: inset 0 0 35px rgba(53,234,255,.06);
}
.boot-terminal-title {
  color: var(--cyan);
  font-family: var(--font-mono);
  font-weight: 900;
  letter-spacing: .12em;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(53,234,255,.14);
}
.boot-log {
  height: 190px;
  overflow: hidden;
  padding: 12px 0;
  font-family: var(--font-mono);
  font-size: .82rem;
}
.boot-log-line {
  display: flex;
  gap: 10px;
  align-items: center;
  color: var(--muted);
  margin: 7px 0;
  animation: bootLineIn .22s ease both;
}
.boot-log-line span {
  color: var(--green);
  font-weight: 900;
  min-width: 34px;
}
.boot-log-line b { color: #dff8ff; font-weight: 600; }
@keyframes bootLineIn { from { opacity: 0; transform: translateY(6px); } }
.boot-progress-track {
  height: 12px;
  overflow: hidden;
  border-radius: 999px;
  border: 1px solid rgba(53,234,255,.26);
  background: rgba(1, 8, 17, .82);
}
.boot-progress-track i {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #188cff, #35eaff, #24f6b3);
  box-shadow: 0 0 22px rgba(53,234,255,.45);
  transition: width .16s ease;
}
.boot-current-step {
  margin-top: 12px;
  color: var(--cyan-soft);
  font-family: var(--font-mono);
  letter-spacing: .06em;
}
.boot-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding-top: 18px;
  border-top: 1px solid rgba(53,234,255,.18);
  color: var(--dim);
  font-family: var(--font-mono);
  font-weight: 800;
  font-size: .75rem;
  letter-spacing: .08em;
}
.boot-skip-btn {
  color: var(--cyan-soft);
  background: rgba(3, 18, 34, .72);
  border: 1px solid rgba(53,234,255,.35);
  border-radius: 999px;
  padding: 9px 13px;
  cursor: pointer;
  font-family: var(--font-mono);
  font-weight: 900;
}
.boot-skip-btn:hover { border-color: var(--cyan); color: #fff; box-shadow: 0 0 22px rgba(53,234,255,.2); }

.tutorial-overlay {
  position: fixed;
  inset: 0;
  z-index: 220000;
  background: radial-gradient(circle at 50% 48%, rgba(53,234,255,.08), rgba(0,0,0,.68) 38%, rgba(0,0,0,.82));
  backdrop-filter: blur(3px);
}
.tutorial-spotlight {
  position: fixed;
  border: 2px solid rgba(53,234,255,.95);
  border-radius: 18px;
  box-shadow:
    0 0 0 9999px rgba(0, 4, 10, .72),
    0 0 36px rgba(53,234,255,.52),
    inset 0 0 34px rgba(53,234,255,.08);
  pointer-events: none;
  transition: left .22s ease, top .22s ease, width .22s ease, height .22s ease;
}
.tutorial-spotlight::before,
.tutorial-spotlight::after {
  content: "";
  position: absolute;
  width: 34px;
  height: 34px;
  border-color: var(--green);
  border-style: solid;
  filter: drop-shadow(0 0 9px rgba(36,246,179,.65));
}
.tutorial-spotlight::before { left: -7px; top: -7px; border-width: 2px 0 0 2px; }
.tutorial-spotlight::after { right: -7px; bottom: -7px; border-width: 0 2px 2px 0; }
.tutorial-card {
  position: fixed;
  width: min(420px, calc(100vw - 38px));
  padding: 18px;
  border: 1px solid rgba(53,234,255,.42);
  border-radius: 18px;
  background:
    linear-gradient(135deg, rgba(8, 31, 54, .96), rgba(2, 12, 24, .97)),
    radial-gradient(circle at 100% 0, rgba(53,234,255,.12), transparent 38%);
  box-shadow: 0 24px 75px rgba(0,0,0,.68), 0 0 44px rgba(53,234,255,.18), inset 0 1px 0 rgba(255,255,255,.06);
  color: var(--text);
  transition: left .22s ease, top .22s ease;
}
.tutorial-card::before {
  content: "";
  position: absolute;
  inset: 8px;
  border: 1px solid rgba(53,234,255,.1);
  border-radius: 12px;
  pointer-events: none;
}
.tutorial-kicker {
  color: var(--green);
  font-family: var(--font-mono);
  font-size: .72rem;
  font-weight: 1000;
  letter-spacing: .13em;
  text-transform: uppercase;
}
.tutorial-card h3 {
  margin: 8px 0 8px;
  color: var(--cyan);
  font-size: 1.25rem;
  letter-spacing: .035em;
}
.tutorial-card p {
  margin: 0;
  color: #c6ddf2;
  line-height: 1.6;
  font-size: .94rem;
}
.tutorial-dots {
  display: flex;
  gap: 7px;
  margin: 16px 0;
}
.tutorial-dots span {
  width: 28px;
  height: 4px;
  border-radius: 999px;
  background: rgba(138,169,200,.32);
}
.tutorial-dots span.active {
  background: linear-gradient(90deg, var(--blue), var(--cyan));
  box-shadow: 0 0 12px rgba(53,234,255,.42);
}
.tutorial-actions {
  display: flex;
  justify-content: flex-end;
  gap: 9px;
}
.tutorial-skip { margin-right: auto; }

@media (max-width: 920px) {
  .boot-core { grid-template-columns: 1fr; padding-top: 24px; }
  .boot-orb { width: 210px; height: 210px; }
  .boot-orb b { font-size: 2rem; }
  .boot-footer { flex-direction: column; align-items: flex-start; }
  .tutorial-card { left: 19px !important; right: 19px; top: auto !important; bottom: 18px; transform: none !important; }
}

/* =========================================================================
   FINOMHANGOLÁS: lassabb boot, személyes belépési betöltés, opcionális tutorial
   ========================================================================= */
.boot-progress-track i {
  transition: width .34s cubic-bezier(.2, .8, .2, 1);
}

.system-boot-screen.personal-boot-mode {
  background:
    radial-gradient(circle at 48% 42%, rgba(36,246,179,.17), transparent 32%),
    radial-gradient(circle at 72% 18%, rgba(53,234,255,.15), transparent 28%),
    linear-gradient(135deg, #01050b 0%, #061426 50%, #020b12 100%);
}
.system-boot-screen.personal-boot-mode .boot-shell {
  border-color: rgba(36, 246, 179, .42);
  box-shadow:
    0 28px 100px rgba(0,0,0,.76),
    0 0 72px rgba(36,246,179,.14),
    inset 0 0 0 1px rgba(255,255,255,.04);
}
.system-boot-screen.personal-boot-mode .boot-emblem {
  box-shadow: 0 0 34px rgba(36,246,179,.28), inset 0 0 20px rgba(36,246,179,.16);
}
.system-boot-screen.personal-boot-mode .boot-terminal-title,
.system-boot-screen.personal-boot-mode .boot-current-step {
  color: #bafeea;
}
.system-boot-screen.personal-boot-mode .boot-progress-track i {
  background: linear-gradient(90deg, #156dff, #35eaff, #24f6b3);
}

.tutorial-overlay {
  background: transparent;
  backdrop-filter: none;
  pointer-events: auto;
}
.tutorial-overlay.no-target {
  background: radial-gradient(circle at 50% 48%, rgba(53,234,255,.08), rgba(0,0,0,.68) 38%, rgba(0,0,0,.82));
  backdrop-filter: blur(3px);
}
.tutorial-spotlight {
  z-index: 1;
  background: transparent;
  box-shadow:
    0 0 0 9999px rgba(0, 4, 10, .78),
    0 0 42px rgba(53,234,255,.62),
    inset 0 0 36px rgba(53,234,255,.05);
}
.tutorial-card {
  z-index: 3;
}
.tutorial-highlight-target {
  position: relative !important;
  z-index: 220010 !important;
  filter: brightness(1.16) saturate(1.12) drop-shadow(0 0 18px rgba(53,234,255,.24)) !important;
  isolation: isolate;
}
.tutorial-highlight-target::selection { background: rgba(53,234,255,.25); }

.tutorial-consent-overlay {
  position: fixed;
  inset: 0;
  z-index: 230000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 22px;
  background:
    radial-gradient(circle at 50% 42%, rgba(53,234,255,.11), rgba(0,0,0,.74) 38%, rgba(0,0,0,.88)),
    linear-gradient(135deg, rgba(3,14,27,.72), rgba(0,2,8,.9));
  backdrop-filter: blur(8px);
}
.tutorial-consent-card {
  position: relative;
  width: min(560px, 94vw);
  padding: 28px;
  border: 1px solid rgba(53,234,255,.48);
  border-radius: 24px;
  background:
    linear-gradient(135deg, rgba(8,31,54,.96), rgba(2,12,24,.98)),
    radial-gradient(circle at 18% 0, rgba(36,246,179,.14), transparent 36%),
    radial-gradient(circle at 100% 22%, rgba(53,234,255,.13), transparent 38%);
  color: var(--text);
  box-shadow:
    0 30px 110px rgba(0,0,0,.78),
    0 0 70px rgba(53,234,255,.18),
    inset 0 1px 0 rgba(255,255,255,.07);
  overflow: hidden;
  animation: tutorialConsentIn .34s cubic-bezier(.2,.8,.2,1) both;
}
.tutorial-consent-card::before {
  content: "";
  position: absolute;
  inset: 10px;
  border: 1px solid rgba(53,234,255,.13);
  border-radius: 17px;
  pointer-events: none;
}
.tutorial-consent-card::after {
  content: "";
  position: absolute;
  top: 0;
  left: 18px;
  right: 18px;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--cyan), var(--green), transparent);
  box-shadow: 0 0 22px rgba(53,234,255,.58);
  pointer-events: none;
}
@keyframes tutorialConsentIn {
  from { opacity: 0; transform: translateY(16px) scale(.975); filter: blur(6px); }
  to { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}
.consent-avatar-shell {
  width: 132px;
  height: 132px;
  margin: 0 auto 16px;
  position: relative;
  border-radius: 30px;
  border: 1px solid rgba(53,234,255,.56);
  background: rgba(2,12,24,.92);
  box-shadow: 0 0 34px rgba(53,234,255,.22), inset 0 0 28px rgba(53,234,255,.1);
  overflow: hidden;
}
.consent-avatar-shell img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(1.04) contrast(1.08) brightness(.92);
}
.consent-avatar-shell span {
  position: absolute;
  inset: 10px;
  border-radius: 22px;
  border: 1px solid rgba(36,246,179,.42);
  box-shadow: inset 0 0 25px rgba(36,246,179,.08);
  pointer-events: none;
}
.tutorial-consent-card h3 {
  margin: 9px 0 10px;
  color: var(--cyan);
  text-align: center;
  font-size: clamp(1.35rem, 3vw, 1.9rem);
  letter-spacing: .025em;
}
.tutorial-consent-card p {
  margin: 0;
  color: #c6ddf2;
  line-height: 1.65;
  text-align: center;
}
.tutorial-consent-actions {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: 22px;
  flex-wrap: wrap;
}
.tutorial-consent-actions .det-btn {
  min-width: 150px;
}