/* ===== Hacker console atmosphere =====
   Layered CRT field. Theme packs only retint phosphor (--accent-rgb). */

#hacker-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.hb-aurora,
.hb-grid,
.hb-scan,
.hb-beam,
.hb-vignette {
  position: absolute;
  inset: 0;
}

.hb-aurora {
  background:
    radial-gradient(900px 480px at 8% -8%, rgba(var(--accent-rgb), 0.2), transparent 58%),
    radial-gradient(720px 420px at 100% 110%, rgba(var(--accent-rgb), 0.1), transparent 52%),
    radial-gradient(500px 280px at 70% 20%, rgba(var(--accent-rgb), 0.05), transparent 60%);
}

.hb-grid {
  background-image:
    linear-gradient(rgba(var(--accent-rgb), 0.065) 1px, transparent 1px),
    linear-gradient(90deg, rgba(var(--accent-rgb), 0.065) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: radial-gradient(ellipse 90% 75% at 50% 35%, #000 30%, transparent 78%);
  -webkit-mask-image: radial-gradient(ellipse 90% 75% at 50% 35%, #000 30%, transparent 78%);
  animation: hb-grid-drift 60s linear infinite;
  opacity: 0.85;
}

.hb-beam {
  background: linear-gradient(
    105deg,
    transparent 38%,
    rgba(var(--accent-rgb), 0.04) 50%,
    transparent 62%
  );
  background-size: 220% 100%;
  animation: hb-beam 18s ease-in-out infinite;
}

.hb-scan {
  background: repeating-linear-gradient(
    to bottom,
    transparent 0 2px,
    rgba(0, 0, 0, 0.22) 2px 3px
  );
  opacity: 0.28;
  mix-blend-mode: multiply;
}

.hb-scan::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 140px;
  background: linear-gradient(
    to bottom,
    transparent,
    rgba(var(--accent-rgb), 0.09),
    transparent
  );
  animation: hb-sweep 11s linear infinite;
}

.hb-vignette {
  background:
    radial-gradient(ellipse at center, transparent 42%, rgba(0, 0, 0, 0.55) 100%),
    linear-gradient(to bottom, rgba(0, 0, 0, 0.35), transparent 18%, transparent 82%, rgba(0, 0, 0, 0.5));
}

@keyframes hb-grid-drift {
  from { background-position: 0 0, 0 0; }
  to { background-position: 44px 44px, 44px 44px; }
}

@keyframes hb-beam {
  0%, 100% { background-position: 0% 0; opacity: 0.4; }
  50% { background-position: 100% 0; opacity: 1; }
}

@keyframes hb-sweep {
  from { top: -160px; }
  to { top: 110%; }
}

.app {
  position: relative;
  z-index: 2;
}

/* HUD corners on the page */
html:not(.is-mobile) .stage {
  position: relative;
}

html:not(.is-mobile) .stage::after {
  display: none;
}

html:not(.is-mobile) .stage::before {
  display: block;
  content: "";
  position: absolute;
  inset: 0.55rem clamp(0.6rem, 2vw, 1.1rem);
  pointer-events: none;
  z-index: 0;
  border: 1px solid rgba(var(--accent-rgb), 0.18);
  clip-path: polygon(
    0 0, 28px 0, 28px 1px, 1px 1px, 1px 28px, 0 28px,
    0 100%, 0 calc(100% - 28px), 1px calc(100% - 28px), 1px calc(100% - 1px), 28px calc(100% - 1px), 28px 100%,
    100% 100%, 100% calc(100% - 28px), calc(100% - 28px) calc(100% - 28px), calc(100% - 28px) calc(100% - 1px), calc(100% - 1px) calc(100% - 1px), calc(100% - 1px) calc(100% - 28px), 100% calc(100% - 28px),
    100% 0, calc(100% - 28px) 0, calc(100% - 28px) 1px, calc(100% - 1px) 1px, calc(100% - 1px) 28px, 100% 28px
  );
  z-index: 0;
}

.brand-name::after {
  content: "_";
  margin-left: 0.12em;
  color: var(--accent);
  animation: hb-caret 1.05s steps(1, end) infinite;
}

@keyframes hb-caret {
  0%, 45% { opacity: 1; }
  50%, 100% { opacity: 0; }
}

.news-lead-title,
.post-title,
.view-title,
.post-row-title {
  text-shadow: 0 0 22px rgba(var(--accent-rgb), 0.18);
}

.post-row:hover .post-row-title {
  text-shadow: 0 0 16px rgba(var(--accent-rgb), 0.35);
}

.btn-primary {
  background: var(--accent) !important;
  color: #04140f !important;
  border-color: var(--accent) !important;
  box-shadow: 0 0 18px rgba(var(--accent-rgb), 0.28);
}

.btn-primary:hover {
  box-shadow: 0 0 26px rgba(var(--accent-rgb), 0.45);
}

.btn-ghost,
.icon-btn,
.theme-picker-btn {
  border-color: rgba(var(--accent-rgb), 0.28) !important;
}

.query-field {
  background: rgba(0, 0, 0, 0.45) !important;
  border-color: rgba(var(--accent-rgb), 0.32) !important;
  box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb), 0.06), 0 0 18px rgba(var(--accent-rgb), 0.08);
}

.query-prompt {
  font-family: var(--font-mono);
  color: var(--accent);
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  text-shadow: 0 0 8px rgba(var(--accent-rgb), 0.5);
}

.query-icon {
  display: none;
}

.query-field #search-input {
  font-family: var(--font-mono);
  color: var(--text-bright);
  caret-color: var(--accent);
}

.query-count,
.sort-label,
.section-kicker,
.category-chip,
.blog-sidebar-title,
.post-category,
.pc-category {
  font-family: var(--font-mono);
}

.category-chip {
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.76rem !important;
}

.news-lead-media,
.post-row-cover,
.about-avatar,
.profile-avatar {
  background: var(--bg) !important;
  box-shadow: none;
}

.news-lead-media,
.post-row-cover {
  box-shadow: 0 0 0 1px rgba(var(--accent-rgb), 0.2);
}

.cred-card,
.about-hero.panel,
.about-block.panel,
.post-list,
.blog-toolbar.panel,
.feed-rail.panel {
  background: transparent !important;
}

img.cred-icon,
.cred-icon:not(.is-fallback) {
  background: #efebe3 !important;
  border-color: rgba(232, 224, 210, 0.9) !important;
}

.post-body.prose .table-wrap {
  background: rgba(0, 0, 0, 0.38) !important;
  border: 1px solid rgba(var(--accent-rgb), 0.3) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.post-body.prose thead th {
  background: rgba(var(--accent-rgb), 0.1) !important;
  color: var(--accent) !important;
}

.post-body.prose tbody td {
  background: transparent;
  color: var(--text);
}

.post-body.prose tbody tr:nth-child(even) td {
  background: rgba(var(--accent-rgb), 0.045);
}

.post-body.prose tbody tr:hover td {
  background: rgba(var(--accent-rgb), 0.1);
}

.post-body.prose .mermaid-diagram {
  background: rgba(0, 0, 0, 0.38) !important;
  border: 1px solid rgba(var(--accent-rgb), 0.3) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.post-body.prose .mermaid-diagram-head {
  background: rgba(var(--accent-rgb), 0.08) !important;
  border-bottom-color: rgba(var(--accent-rgb), 0.28) !important;
}

.post-body.prose .mermaid-diagram-head .code-lang {
  color: var(--accent);
  font-family: var(--font-mono);
}

.post-body.prose .mermaid-expand-btn,
.post-body.prose .mermaid-diagram-head .copy-btn {
  border-radius: 0;
  border-color: rgba(var(--accent-rgb), 0.28);
  color: var(--text-dim);
  font-family: var(--font-mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.post-body.prose .mermaid-diagram svg,
.mermaid-viewer-stage svg,
.mermaid-viewer-svg {
  background: transparent !important;
}

.post-body.prose .mermaid-diagram svg .node rect,
.post-body.prose .mermaid-diagram svg .node polygon,
.post-body.prose .mermaid-diagram svg .node circle,
.post-body.prose .mermaid-diagram svg .node path,
.post-body.prose .mermaid-diagram svg .actor,
.post-body.prose .mermaid-diagram svg .labelBox,
.post-body.prose .mermaid-diagram svg .basic,
.mermaid-viewer-stage svg .node rect,
.mermaid-viewer-stage svg .node polygon,
.mermaid-viewer-stage svg .node path,
.mermaid-viewer-stage svg .actor,
.mermaid-viewer-svg .node rect,
.mermaid-viewer-svg .node path {
  fill: var(--bg-elevated) !important;
  stroke: var(--accent) !important;
  stroke-width: 1.5px !important;
}

.post-body.prose .mermaid-diagram svg .cluster rect,
.mermaid-viewer-stage svg .cluster rect {
  fill: rgba(0, 0, 0, 0.25) !important;
  stroke: var(--accent) !important;
}

/* Connectors: mermaid 8–11 class names + catch-all edge groups */
.post-body.prose .mermaid-diagram svg .edgePaths path,
.post-body.prose .mermaid-diagram svg .edgePath path,
.post-body.prose .mermaid-diagram svg path.flowchart-link,
.post-body.prose .mermaid-diagram svg .flowchart-link,
.post-body.prose .mermaid-diagram svg path.edge-thickness-normal,
.post-body.prose .mermaid-diagram svg .messageLine0,
.post-body.prose .mermaid-diagram svg .messageLine1,
.post-body.prose .mermaid-diagram svg .loopLine,
.post-body.prose .mermaid-diagram svg .relation,
.post-body.prose .mermaid-diagram svg .relationshipLine,
.post-body.prose .mermaid-diagram svg .transition,
.post-body.prose .mermaid-diagram svg .actor-line,
.post-body.prose .mermaid-diagram svg line,
.post-body.prose .mermaid-diagram svg polyline,
.mermaid-viewer-stage svg .edgePaths path,
.mermaid-viewer-stage svg .edgePath path,
.mermaid-viewer-stage svg path.flowchart-link,
.mermaid-viewer-stage svg .flowchart-link,
.mermaid-viewer-stage svg line,
.mermaid-viewer-stage svg polyline,
.mermaid-viewer-svg .edgePaths path,
.mermaid-viewer-svg path.flowchart-link {
  fill: none !important;
  stroke: var(--accent) !important;
  stroke-width: 2px !important;
  stroke-opacity: 1 !important;
}

.post-body.prose .mermaid-diagram svg marker,
.post-body.prose .mermaid-diagram svg marker path,
.post-body.prose .mermaid-diagram svg marker polygon,
.post-body.prose .mermaid-diagram svg .arrowheadPath,
.post-body.prose .mermaid-diagram svg .arrowMarkerPath,
.mermaid-viewer-stage svg marker path,
.mermaid-viewer-stage svg marker polygon,
.mermaid-viewer-stage svg .arrowheadPath,
.mermaid-viewer-svg marker path {
  fill: var(--accent) !important;
  stroke: var(--accent) !important;
  stroke-opacity: 1 !important;
}

.post-body.prose .mermaid-diagram svg text,
.post-body.prose .mermaid-diagram svg tspan,
.post-body.prose .mermaid-diagram svg .nodeLabel,
.post-body.prose .mermaid-diagram svg .edgeLabel,
.mermaid-viewer-stage svg text,
.mermaid-viewer-stage svg tspan,
.mermaid-viewer-svg text,
.mermaid-viewer-svg tspan {
  fill: var(--text-bright) !important;
  color: var(--text-bright) !important;
}

.post-body.prose .mermaid-diagram svg .edgeLabel rect,
.mermaid-viewer-stage svg .edgeLabel rect {
  fill: var(--bg) !important;
  stroke: none !important;
}

.footer-strip {
  background: rgba(0, 0, 0, 0.45) !important;
  border-top: 1px solid rgba(var(--accent-rgb), 0.22) !important;
  color: var(--text-dim);
  font-family: var(--font-mono) !important;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

::selection {
  background: rgba(var(--accent-rgb), 0.35);
  color: #04140f;
}

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: #05070a;
}

::-webkit-scrollbar-thumb {
  background: rgba(var(--accent-rgb), 0.35);
  border: 2px solid #05070a;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(var(--accent-rgb), 0.55);
}

html.is-mobile .site-header,
html.is-mobile .status-bar {
  background: color-mix(in srgb, var(--masthead) 90%, transparent) !important;
  color: var(--masthead-ink);
  border-bottom: 1px solid rgba(var(--accent-rgb), 0.4) !important;
}

html.is-mobile .brand-name {
  font-family: var(--font-mono);
  color: var(--accent);
  text-shadow: 0 0 10px rgba(var(--accent-rgb), 0.4);
}

html.is-mobile .mobile-tabbar {
  background: rgba(5, 8, 12, 0.92) !important;
  border-top: 1px solid rgba(var(--accent-rgb), 0.22) !important;
  backdrop-filter: blur(12px);
}

.theme-dropdown {
  background: #070b10 !important;
  border: 1px solid rgba(var(--accent-rgb), 0.28) !important;
  box-shadow: 0 0 28px rgba(var(--accent-rgb), 0.12), 0 20px 40px rgba(0, 0, 0, 0.55);
}

.theme-dropdown-title,
.theme-option-name {
  color: var(--text-bright);
  font-family: var(--font-mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 0.72rem;
}

.theme-option:hover,
.theme-option.active {
  background: rgba(var(--accent-rgb), 0.1);
}

.mobile-drawer-panel {
  background: #070b10 !important;
  border-color: rgba(var(--accent-rgb), 0.25) !important;
}

input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]),
select,
textarea,
.editor-surface,
[contenteditable="true"] {
  background: var(--input-bg) !important;
  color: var(--text-bright) !important;
  border-color: rgba(var(--accent-rgb), 0.28) !important;
}

.category-admin-item,
.backup-row,
.profile-admin-item,
.cred-admin-item,
.about-block-item,
.console-card.panel,
#view-admin .panel,
#view-manage .panel,
.admin-side.panel,
.admin-editor.panel,
.editor-toolbar,
.editor-toolbar-wrap,
.editor-top-bar,
.editor-meta-panel,
.ui-modal-dialog,
.ui-modal-header,
.console-status-box {
  background: var(--bg) !important;
  color: var(--text);
  border-color: rgba(var(--accent-rgb), 0.22) !important;
}

.editor-surface {
  background: var(--bg) !important;
  color: var(--text) !important;
}

.editor-title-input {
  background: transparent !important;
}

.ui-modal-field input,
.ui-modal-field textarea,
.ui-modal-field select,
#view-admin textarea,
#view-manage textarea,
#view-admin input[type="text"],
#view-admin input[type="email"],
#view-admin input[type="url"],
#view-admin input[type="number"],
#view-admin input[type="password"],
#view-admin input[type="search"],
#view-manage input[type="text"],
#view-manage input[type="email"],
#view-manage input[type="url"],
#view-manage input[type="number"],
#view-manage input[type="password"],
#view-manage input[type="search"],
#view-admin select,
#view-manage select {
  background: var(--input-bg) !important;
  color: var(--text-bright) !important;
}

.editor-surface code {
  background: rgba(0, 0, 0, 0.4) !important;
  color: var(--accent) !important;
  border-color: rgba(var(--accent-rgb), 0.22) !important;
}

.editor-surface .code-block,
.editor-surface .editor-md-code,
.editor-surface .code-block[data-lang="mermaid"],
.editor-surface .editor-md-code[data-lang="mermaid"] {
  background: var(--bg) !important;
  border: 1px solid rgba(var(--accent-rgb), 0.32) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.editor-surface .code-block-head {
  background: rgba(var(--accent-rgb), 0.08) !important;
  border-bottom: 1px solid rgba(var(--accent-rgb), 0.28) !important;
}

.editor-surface .code-lang {
  color: var(--accent) !important;
  background: rgba(var(--accent-rgb), 0.12) !important;
  border-color: rgba(var(--accent-rgb), 0.28) !important;
}

.editor-surface .code-block pre,
.editor-surface .editor-md-code pre,
.editor-surface pre.editor-codeblock,
.editor-surface .code-block pre code,
.editor-surface .editor-md-code pre code {
  background: transparent !important;
  color: var(--text-bright) !important;
}

@media (prefers-reduced-motion: reduce) {
  .hb-grid,
  .hb-beam,
  .hb-scan::after,
  .brand-name::after {
    animation: none !important;
  }
}