:root {
  --void: #0B0D0F;
  --panel: #14171A;
  --panel2: #191D21;
  --hairline: #2A2E33;
  --signal: #FF4A1C;
  --data: #29D9C2;
  --warn: #F2B705;
  --ink: #EDEEF0;
  --mute: #8A9096;
}

* { box-sizing: border-box; }

body {
  background-color: var(--void);
  color: var(--ink);
  font-family: 'Inter', sans-serif;
  background-image:
    radial-gradient(circle at 100% 0%, rgba(41, 217, 194, 0.05), transparent 40%),
    radial-gradient(circle at 0% 100%, rgba(255, 74, 28, 0.04), transparent 40%);
  min-height: 100vh;
}

.font-display { font-family: 'Oswald', sans-serif; }
.font-mono { font-family: 'IBM Plex Mono', monospace; }

.cc-layout { display: flex; min-height: 100vh; }

.cc-sidebar {
  width: 64px;
  flex-shrink: 0;
  background: var(--panel);
  border-right: 1px solid var(--hairline);
  display: flex;
  flex-direction: column;
}
@media (min-width: 768px) { .cc-sidebar { width: 224px; } }

.cc-sidebar-head {
  height: 64px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 16px;
  border-bottom: 1px solid var(--hairline);
}
.cc-brand {
  display: none;
  font-family: 'Oswald', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-size: 14px;
}
@media (min-width: 768px) { .cc-brand { display: inline; } }

.tally-dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--signal);
  box-shadow: 0 0 8px 1px rgba(255, 74, 28, 0.7);
  animation: pulse-signal 2s ease-in-out infinite;
  flex-shrink: 0;
}
@keyframes pulse-signal { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }

.cc-nav { flex: 1; padding: 16px 0; }
.cc-nav-link {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px;
  font-size: 14px;
  color: var(--mute);
  text-decoration: none;
  border-left: 2px solid transparent;
  transition: color .15s, background .15s, border-color .15s;
}
.cc-nav-link:hover { color: var(--ink); background: var(--panel2); }
.cc-nav-link.active { color: var(--ink); background: var(--panel2); border-left-color: var(--data); }
.cc-code { font-family: 'IBM Plex Mono', monospace; font-size: 10px; color: var(--mute); width: 20px; flex-shrink: 0; }
.cc-label { display: none; }
@media (min-width: 768px) { .cc-label { display: inline; } }

.cc-sidebar-foot {
  display: none;
  padding: 16px;
  border-top: 1px solid var(--hairline);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  color: var(--mute);
  line-height: 1.5;
}
@media (min-width: 768px) { .cc-sidebar-foot { display: block; } }

.cc-main { flex: 1; min-width: 0; padding: 24px; }
@media (min-width: 768px) { .cc-main { padding: 40px; } }
.cc-main-inner { max-width: 960px; }

.eyebrow { font-family: 'IBM Plex Mono', monospace; font-size: 12px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--data); margin-bottom: 8px; }
.eyebrow.signal { color: var(--signal); }
.page-title { font-family: 'Oswald', sans-serif; text-transform: uppercase; letter-spacing: -0.01em; margin-bottom: 12px; }
.page-desc { color: var(--mute); max-width: 560px; }

/* Signature element: viewfinder corner brackets */
.viewfinder {
  position: relative;
  background: var(--panel);
  border: 1px solid var(--hairline);
  padding: 20px;
}
.viewfinder::before, .viewfinder::after {
  content: ''; position: absolute; width: 14px; height: 14px;
  border-color: var(--hairline); transition: border-color .2s ease;
}
.viewfinder::before { top: -1px; left: -1px; border-top: 2px solid; border-left: 2px solid; }
.viewfinder::after { bottom: -1px; right: -1px; border-bottom: 2px solid; border-right: 2px solid; }
.viewfinder:hover::before, .viewfinder:hover::after { border-color: var(--data); }
.viewfinder-link { text-decoration: none; color: inherit; display: block; }
.viewfinder-link:hover .viewfinder { background: var(--panel2); }

.btn-signal {
  background: var(--signal); color: var(--void); border: none;
  font-family: 'Oswald', sans-serif; text-transform: uppercase; letter-spacing: 0.03em;
  padding: 12px 24px; font-size: 14px;
}
.btn-signal:hover { background: #ff5c33; color: var(--void); }
.btn-signal:disabled { opacity: 0.5; }

.btn-ghost {
  background: transparent; border: 1px solid var(--hairline); color: var(--ink);
  font-family: 'IBM Plex Mono', monospace; font-size: 12px; padding: 8px 16px;
}
.btn-ghost:hover { border-color: var(--data); color: var(--data); }

.form-control-cc, .form-select-cc {
  background: var(--panel); border: 1px solid var(--hairline); color: var(--ink);
  padding: 12px 16px; font-size: 14px; width: 100%;
}
.form-control-cc:focus, .form-select-cc:focus { outline: 2px solid var(--data); border-color: var(--data); }
.form-control-cc::placeholder { color: var(--mute); }

.tag-chip { font-family: 'IBM Plex Mono', monospace; font-size: 12px; border: 1px solid var(--hairline); padding: 4px 8px; color: var(--mute); display: inline-block; }

.style-chip { font-family: 'IBM Plex Mono', monospace; font-size: 12px; border: 1px solid var(--hairline); padding: 8px 12px; color: var(--mute); background: transparent; cursor: pointer; }
.style-chip.active { border-color: var(--data); color: var(--data); background: var(--panel2); }

.error-box { border: 1px solid var(--signal); background: var(--panel); padding: 16px; color: var(--signal); font-family: 'IBM Plex Mono', monospace; font-size: 13px; }

.gauge-label { font-family: 'IBM Plex Mono', monospace; font-size: 10px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--mute); text-align: center; margin-top: 6px; }
.gauge-value { font-family: 'IBM Plex Mono', monospace; font-weight: 600; }

.thumb-crop { position: relative; width: 100%; aspect-ratio: 16/9; background: var(--void); overflow: hidden; }
.thumb-crop img { width: 100%; height: 100%; object-fit: cover; }

.spinner-cc { display: inline-block; width: 14px; height: 14px; border: 2px solid var(--hairline); border-top-color: var(--data); border-radius: 50%; animation: spin 0.7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

a { color: var(--data); }