/* CamelAC visual refresh — restrained forensic console / no neon-game HUD */
:root {
  --ink-950: #070b12;
  --ink-900: #0b111b;
  --ink-850: #101827;
  --ink-800: #151f2f;
  --line: rgba(130, 157, 191, 0.18);
  --line-strong: rgba(130, 157, 191, 0.30);
  --text: #eef4fb;
  --muted: #8c9caf;
  --faint: #56667a;
  --accent: #55b6ff;
  --accent-soft: #9ed8ff;
  --good: #7be2bd;
  --warning: #f5c86a;
  --ease-out: cubic-bezier(.23,1,.32,1);
}

html { background: var(--ink-950); }
body {
  margin: 0;
  background:
    radial-gradient(900px 560px at 12% 7%, rgba(43, 115, 166, .16), transparent 62%),
    radial-gradient(740px 520px at 90% 94%, rgba(37, 80, 126, .14), transparent 60%),
    linear-gradient(135deg, #070b12 0%, #0b111b 48%, #08101a 100%);
  color: var(--text);
  font-family: "DM Sans", Inter, system-ui, sans-serif;
  overflow-x: hidden;
}
/* Shared CamelAC brand asset: replaces the former placeholder shield marks. */
.brand-mark {
  background: url('/camelac-logo.png') center / cover no-repeat !important;
  border-color: rgba(85,182,255,.48) !important;
  box-shadow: 0 0 24px rgba(85,182,255,.14), inset 0 1px rgba(255,255,255,.08) !important;
  overflow: hidden;
}
.brand-mark svg { opacity: 0 !important; }
.brand-mark img { display: block; width: 100%; height: 100%; object-fit: cover; }
[data-testid="brand-mark"] { min-width: 0; }
.camelac-brand-image { display: block; width: 38px; height: 42px; flex: 0 0 auto; border-radius: 10px; object-fit: cover; box-shadow: 0 0 24px rgba(85,182,255,.14), inset 0 1px rgba(255,255,255,.08); }
[data-testid="brand-mark"] > div { margin-left: 0; white-space: nowrap; }
[data-testid="brand-mark"]:has(.camelac-brand-image) { width: auto; }
[data-testid="brand-mark"]:has(.camelac-brand-image) .camelac-brand-image { width: 38px; height: 42px; }
[data-testid="brand-mark"]:has(.camelac-brand-image:only-child) .camelac-brand-image { width: 30px; height: 34px; }
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .28;
  background-image: linear-gradient(rgba(141, 173, 207, .045) 1px, transparent 1px), linear-gradient(90deg, rgba(141, 173, 207, .045) 1px, transparent 1px);
  background-size: 52px 52px;
  mask-image: linear-gradient(to bottom, black, transparent 88%);
}
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 20;
  opacity: .025;
  background: repeating-linear-gradient(0deg, rgba(255,255,255,.2) 0 1px, transparent 1px 4px);
  mix-blend-mode: overlay;
}

#root { min-height: 100svh; }
#root > div { min-height: 100svh; }

/* Auth view */
#root > div:not(.cockpit-shell) {
  display: grid;
  place-items: center;
  padding: clamp(18px, 4vw, 54px);
  position: relative;
}
#root > div:not(.cockpit-shell)::before {
  content: "CAMELAC / SECURE REVIEW ENVIRONMENT";
  position: absolute;
  top: clamp(18px, 4vw, 46px);
  left: clamp(18px, 4vw, 54px);
  font: 600 10px/1 "JetBrains Mono", ui-monospace, monospace;
  letter-spacing: .18em;
  color: var(--faint);
}
#root > div:not(.cockpit-shell)::after {
  content: "v4.8.1  •  ENCRYPTED CHANNEL";
  position: absolute;
  right: clamp(18px, 4vw, 54px);
  top: clamp(18px, 4vw, 46px);
  font: 600 10px/1 "JetBrains Mono", ui-monospace, monospace;
  letter-spacing: .12em;
  color: var(--faint);
}
#root > div:not(.cockpit-shell) > div {
  width: min(100%, 930px) !important;
  min-height: 0 !important;
  border: 1px solid var(--line) !important;
  border-radius: 22px !important;
  overflow: hidden;
  background: linear-gradient(135deg, rgba(17, 27, 42, .96), rgba(9, 15, 24, .94)) !important;
  box-shadow: 0 30px 90px rgba(0,0,0,.42), 0 0 0 6px rgba(130,157,191,.025), inset 0 1px rgba(255,255,255,.04) !important;
  animation: panel-in 520ms var(--ease-out) both;
}
#root > div:not(.cockpit-shell) > div > section:first-child {
  background: linear-gradient(155deg, rgba(22, 38, 58, .9), rgba(11, 18, 29, .55)) !important;
  position: relative;
}
#root > div:not(.cockpit-shell) > div > section:first-child::after {
  content: "";
  position: absolute;
  right: 40px;
  top: 42px;
  width: 70px;
  height: 70px;
  border: 1px solid rgba(85,182,255,.25);
  border-radius: 50%;
  box-shadow: 0 0 0 10px rgba(85,182,255,.035), 0 0 40px rgba(85,182,255,.12);
}
#root > div:not(.cockpit-shell) > div > section:first-child::before {
  content: "";
  position: absolute;
  right: 38px;
  top: 37px;
  width: 74px;
  height: 74px;
  border-radius: 50%;
  background: url('/camelac-logo.png') center / cover no-repeat;
  opacity: .9;
  box-shadow: 0 0 34px rgba(85,182,255,.16);
}
#root > div:not(.cockpit-shell) h1,
#root > div:not(.cockpit-shell) h2 { font-family: "DM Sans", Inter, sans-serif !important; letter-spacing: -.045em !important; }
#root > div:not(.cockpit-shell) h1 { font-size: clamp(31px, 4vw, 44px) !important; line-height: 1.04 !important; }
#root > div:not(.cockpit-shell) h1 span { color: var(--accent-soft) !important; }
#root > div:not(.cockpit-shell) .eyebrow { color: var(--accent) !important; letter-spacing: .18em !important; }
#root > div:not(.cockpit-shell) p { color: var(--muted) !important; }

.cockpit-input {
  background: rgba(7, 12, 20, .72) !important;
  border: 1px solid var(--line-strong) !important;
  color: var(--text) !important;
  border-radius: 10px !important;
  transition: border-color 160ms var(--ease-out), box-shadow 160ms var(--ease-out), transform 160ms var(--ease-out) !important;
}
.cockpit-input:focus { border-color: rgba(85,182,255,.82) !important; box-shadow: 0 0 0 4px rgba(85,182,255,.12), 0 10px 30px rgba(0,0,0,.18) !important; transform: translateY(-1px); outline: none; }
.primary-action {
  background: linear-gradient(135deg, #55b6ff, #2e82cf) !important;
  border: 1px solid rgba(183, 229, 255, .48) !important;
  box-shadow: 0 10px 24px rgba(31, 126, 194, .24) !important;
  transition: transform 160ms var(--ease-out), box-shadow 160ms var(--ease-out), filter 160ms var(--ease-out) !important;
}
.primary-action:hover { filter: brightness(1.08); transform: translateY(-2px); box-shadow: 0 15px 30px rgba(31,126,194,.35) !important; }
.primary-action:active { transform: scale(.98); }

/* Auth footer download */
#camelac-download {
  right: clamp(18px, 4vw, 54px) !important;
  bottom: clamp(18px, 4vw, 46px) !important;
  border: 1px solid rgba(130,157,191,.30) !important;
  background: rgba(15, 25, 39, .72) !important;
  box-shadow: 0 12px 32px rgba(0,0,0,.24) !important;
  backdrop-filter: blur(14px);
  transition: transform 180ms var(--ease-out), border-color 180ms var(--ease-out), background 180ms var(--ease-out) !important;
}
#camelac-download:hover { background: rgba(29, 50, 75, .86) !important; border-color: rgba(85,182,255,.65) !important; box-shadow: 0 16px 38px rgba(0,0,0,.32) !important; }

/* Auth mobile */
@media (max-width: 720px) {
  #root > div:not(.cockpit-shell) { padding: 70px 16px 92px; place-items: start center; }
  #root > div:not(.cockpit-shell)::after { display: none; }
  #root > div:not(.cockpit-shell) > div { border-radius: 16px !important; }
  #root > div:not(.cockpit-shell) > div > section { padding: 34px 26px !important; min-height: auto !important; }
  #root > div:not(.cockpit-shell) > div > section:first-child::after { right: 24px; top: 24px; width: 46px; height: 46px; }
  #root > div:not(.cockpit-shell) > div > section:first-child::before { right: 22px; top: 21px; width: 50px; height: 50px; }
}

/* Logged-in console keeps the same information architecture, with calmer surfaces. */
.cockpit-shell { background: transparent !important; }
.cockpit-shell .desktop-sidebar,
.cockpit-shell header { background: rgba(11,17,27,.86) !important; border-color: var(--line) !important; backdrop-filter: blur(18px); }
.cockpit-card, .cockpit-card-raised { border-color: var(--line) !important; background: rgba(15,24,37,.82) !important; box-shadow: 0 18px 50px rgba(0,0,0,.18), inset 0 1px rgba(255,255,255,.025) !important; }
.cockpit-card:hover, .cockpit-card-raised:hover { border-color: rgba(85,182,255,.32) !important; }
.cockpit-shell .empty-state,
.cockpit-shell [data-testid*="empty"],
.cockpit-shell .empty { position: relative; overflow: hidden; }
.cockpit-shell .empty-state::after,
.cockpit-shell [data-testid*="empty"]::after,
.cockpit-shell .empty::after { content: ""; position: absolute; right: 18px; bottom: 14px; width: 44px; height: 44px; opacity: .18; background: url('/camelac-logo.png') center / cover no-repeat; pointer-events: none; }
.ghost-action, .nav-link { transition: background 160ms var(--ease-out), color 160ms var(--ease-out), transform 160ms var(--ease-out) !important; }
.nav-link:hover { transform: translateX(2px); }
.status-dot.blue { background: var(--accent) !important; box-shadow: 0 0 0 4px rgba(85,182,255,.11) !important; }

@keyframes panel-in { from { opacity: 0; transform: translateY(12px) scale(.985); } to { opacity: 1; transform: translateY(0) scale(1); } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } }