/* ═══ FUTURISTIC TECH — neon HUD, holographic, cyber-noir ═══ */
@import url('https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&family=Share+Tech+Mono&family=Noto+Sans+SC:wght@400;700&display=swap');

:root {
  --bg: #020b1a;
  --surface: #061428;
  --surface2: #0a1c38;
  --text: #c8e0ff;
  --text-dim: #3d5f8c;
  --accent: #00ccff;
  --accent-dim: #003d5c;
  --accent-glow: rgba(0,204,255,0.15);
  --accent2: #b44dff;
  --accent2-glow: rgba(180,77,255,0.1);
  --warn: #ffbb33;
  --ok: #00ff88;
  --err: #ff3355;
  --border: #0d2848;
  --border-bright: #1a4470;
  --font-mono: 'Space Mono', 'Share Tech Mono', 'Noto Sans SC', monospace;
  --font-display: 'Share Tech Mono', 'Space Mono', monospace;
}

/* Scan lines — persistent CRT effect */
body::before {
  content:''; position:fixed; inset:0; pointer-events:none; z-index:998;
  background: repeating-linear-gradient(0deg, transparent, transparent 3px, rgba(0,204,255,0.02) 3px, rgba(0,204,255,0.02) 6px);
}
.scan-beam {
  display:block; position:fixed; left:0; right:0; height:2px; z-index:999;
  pointer-events:none;
  background: linear-gradient(90deg, transparent, rgba(0,204,255,0.15), transparent);
  animation: scanDown 6s linear infinite; opacity: 0.6;
}
@keyframes scanDown { 0%{top:-2px} 100%{top:100vh} }

/* Grid background */
.bg-pattern {
  position:fixed; inset:0; pointer-events:none; z-index:0;
  background-image:
    linear-gradient(rgba(0,204,255,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,204,255,0.03) 1px, transparent 1px);
  background-size: 60px 60px;
}
/* Holographic ambient glow */
.bg-glow {
  position:fixed; top:0; left:50%; transform:translateX(-50%);
  width:900px; height:500px; pointer-events:none; z-index:0;
  background: radial-gradient(ellipse at center, rgba(0,140,255,0.04) 0%, transparent 70%);
  animation: holoPulse 8s ease-in-out infinite;
}
@keyframes holoPulse { 0%,100%{opacity:.5} 50%{opacity:1} }

/* Header — HUD title */
header h1 {
  font-family: 'Share Tech Mono', monospace;
  font-size: 2.6rem; font-weight: 400;
  color: var(--accent); letter-spacing: 0.1em;
  text-shadow: 0 0 30px var(--accent-glow), 0 0 80px rgba(0,204,255,0.05);
  text-transform: uppercase;
}
header h1 .accent { color: var(--accent2); text-shadow: 0 0 25px var(--accent2-glow); }
header .subtitle {
  font-family: 'Space Mono', monospace; font-size: 0.65rem;
  color: var(--text-dim); letter-spacing: 0.2em; text-transform: uppercase;
}
header .subtitle::after { content: ''; }

/* Theme bar */
.theme-bar {
  background: rgba(6,20,40,0.8); border: 1px solid var(--border);
  backdrop-filter: blur(10px);
}
.theme-btn { color: var(--text-dim); }
.theme-btn.active {
  color: var(--accent);
  box-shadow: 0 0 10px var(--accent-glow), inset 0 0 6px rgba(0,204,255,0.06);
}
.theme-btn:hover { color: var(--text); background: rgba(0,204,255,0.06); }

/* Search — terminal input */
.search-box {
  font-family: 'Space Mono', monospace;
  font-size: 0.95rem; letter-spacing: 0.04em;
  border: 1px solid var(--border);
  background: rgba(6,20,40,0.6); color: var(--accent);
  animation: inputPulse 3s ease-in-out infinite;
  backdrop-filter: blur(4px);
}
@keyframes inputPulse {
  0%,100%{box-shadow: 0 0 2px rgba(0,204,255,0.05);}
  50%{box-shadow: 0 0 12px rgba(0,204,255,0.1);}
}
.search-box:focus {
  border-color: var(--accent);
  box-shadow: 0 0 24px var(--accent-glow), inset 0 0 16px rgba(0,204,255,0.03);
  animation: none;
}
.search-box::placeholder { color: var(--text-dim); }
.search-btn {
  font-family: 'Share Tech Mono', monospace;
  border: 1px solid var(--border); border-left: none;
  background: rgba(6,20,40,0.8); color: var(--accent);
  backdrop-filter: blur(4px);
}
.search-btn:hover { background: var(--accent); color: var(--bg); box-shadow: 0 0 16px var(--accent-glow); }

.suggestion-item {
  border-bottom: 1px solid rgba(0,204,255,0.06);
  background: rgba(6,20,40,0.95); backdrop-filter: blur(10px);
}
.suggestion-item:hover, .suggestion-item.active {
  background: rgba(0,204,255,0.06);
  border-left: 2px solid var(--accent);
}

/* Stats — data readout */
.stat-item {
  font-family: 'Share Tech Mono', monospace; font-size: 0.65rem;
  text-transform: uppercase; letter-spacing: 0.08em;
  border: 1px solid var(--border); color: var(--text-dim);
  background: rgba(10,28,56,0.6);
  position: relative;
}
.stat-item::before { content: '[ '; color: var(--accent-dim); }
.stat-item::after { content: ' ]'; color: var(--accent-dim); }

/* Card — holographic panel */
.entry-card {
  background: rgba(6,20,40,0.7); border: 1px solid var(--border);
  box-shadow: 0 0 40px rgba(0,0,0,0.5), 0 0 80px rgba(0,140,255,0.03), inset 0 0 30px rgba(0,140,255,0.02);
  backdrop-filter: blur(8px);
  animation: cardHolo .6s ease-out both;
}
@keyframes cardHolo {
  from { opacity: 0; transform: translateY(12px); filter: blur(1px); }
  to { opacity: 1; transform: translateY(0); filter: blur(0); }
}
.entry-card::before {
  height: 1px; opacity: .5;
  background: linear-gradient(90deg, transparent, var(--accent), var(--accent2), transparent);
}
.entry-card::after {
  content:''; position:absolute; bottom:6px; right:6px;
  width:30px; height:18px;
  border-bottom: 1px solid var(--accent-dim); border-right: 1px solid var(--accent-dim);
}

/* Headword */
.headword-text {
  font-family: 'Share Tech Mono', monospace;
  background: linear-gradient(180deg, var(--text) 30%, var(--accent) 100%);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
  background-clip:text; text-shadow: none;
}
.ipa { font-family: 'Space Mono', monospace; color: var(--accent); opacity: .8; }
.lang-tag {
  font-family: 'Share Tech Mono', monospace; font-size: 0.6rem;
  border: 1px solid var(--accent-dim); color: var(--accent);
  background: rgba(0,204,255,0.04); letter-spacing: 0.1em;
}
.entry-type {
  font-family: 'Share Tech Mono', monospace; font-size: 0.6rem;
  border: 1px solid rgba(180,77,255,0.3); color: var(--accent2);
  background: rgba(180,77,255,0.04);
}

.headword-summary { font-family: 'Space Mono', monospace; color: var(--text-dim); }
.headword-summary::before { content: '// '; color: var(--accent-dim); }

.etymology { border-left: 2px solid var(--accent-dim); background: rgba(0,204,255,0.02); }
.etymology::before { content: '> '; color: var(--accent-dim); font-weight: 700; }

.pron-item { color: var(--accent); opacity: .8; }

.meaning { border-left: 1px solid var(--border); background: transparent; }
.meaning:hover { border-left-color: var(--accent); background: rgba(0,204,255,0.02); }
.meaning-index { font-family: 'Share Tech Mono', monospace; color: var(--accent-dim); }
.meaning-explanation { font-family: 'Space Mono', monospace; font-size: 0.9rem; }
.meaning-gloss { color: var(--text-dim); }
.meaning-gloss::before { content: '/ '; color: var(--accent-dim); }

.example { border-left: 1px solid var(--border); }
.example:hover { border-left-color: var(--accent-dim); }
.example-source::before { content: '> '; color: var(--accent-dim); }

.rel-item { border: 1px solid var(--border); padding: 2px 8px; background: rgba(0,204,255,0.02); }
.rel-item:hover { background: rgba(0,204,255,0.05); border-color: var(--accent-dim); }
.rel-type { color: var(--accent2); opacity: .8; }
.rel-type::after { content: ' '; }

.study-note::before { content: '> '; color: var(--accent-dim); }
.study-notes { border-top: 1px solid var(--border); }

/* POS */
.pos-label {
  font-family: 'Share Tech Mono', monospace; font-size: 0.85rem;
  color: var(--accent); text-shadow: 0 0 10px rgba(0,204,255,0.2);
  border: 1px solid var(--accent-dim); background: rgba(0,204,255,0.06);
  padding: 4px 14px; letter-spacing: 0.08em;
}
.pos-label:hover { box-shadow: 0 0 16px rgba(0,204,255,0.15); }

.label-tag { color: var(--warn); background: rgba(255,187,51,0.03); border-color: var(--border); }
.topic-tag { color: var(--ok); background: rgba(0,255,136,0.03); border-color: rgba(0,255,136,0.2); }

/* MD / AI results */
.md-result { font-family: 'Space Mono', monospace; }
.md-result h2, .md-result h3 { font-family: 'Share Tech Mono', monospace; }
.md-result code { font-family: 'Space Mono', monospace; background: var(--surface2); }

/* Spinner — holographic ring */
.spinner {
  border: 2px solid var(--border); border-top-color: var(--accent);
  box-shadow: 0 0 16px var(--accent-glow); border-radius: 0;
  animation: holoSpin .8s linear infinite;
}
@keyframes holoSpin {
  0%{transform:rotate(0deg);border-top-color:var(--accent)}
  50%{border-top-color:var(--accent2)}
  100%{transform:rotate(360deg);border-top-color:var(--accent)}
}

.corner-tl,.corner-tr,.corner-bl,.corner-br { border-color: var(--accent-dim); opacity: .4; }

.error { border: 1px solid var(--err); border-left: 3px solid var(--err); background: rgba(255,51,85,0.03); font-family: 'Space Mono', monospace; }
.error::before { content: '[ERR] '; color: var(--err); }

footer {
  font-family: 'Share Tech Mono', monospace; font-size: 0.65rem;
  color: var(--text-dim); letter-spacing: 0.1em; text-transform: uppercase;
  border-top: 1px solid var(--border);
}

/* Chinese entry overrides */
.cn-char {
  font-family: 'Share Tech Mono', 'Noto Sans SC', monospace;
  font-size: 4rem; font-weight: 400; color: var(--accent);
  text-shadow: 0 0 40px var(--accent-glow), 0 0 80px rgba(0,204,255,0.04);
  letter-spacing: 0.15em;
}
.cn-tag {
  font-family: 'Space Mono', monospace;
  font-size: 0.7rem; letter-spacing: 0.05em;
  padding: 4px 10px; border: 1px solid var(--border);
  background: rgba(10,28,56,0.6); color: var(--text-dim);
}
.cn-tag b { color: var(--accent); }
.cn-pron { border-top: 1px solid var(--border); }
.cn-pron-title {
  font-family: 'Share Tech Mono', monospace;
  font-size: 0.85rem; font-weight: 400;
  color: var(--accent); letter-spacing: 0.1em;
}
.cn-explain { border-left: 1px solid var(--accent-dim); }
.cn-explain-content { font-family: 'Space Mono', monospace; font-weight: 400; color: var(--text); }
.cn-cite { font-family: 'Space Mono', monospace; color: var(--text-dim); }
.cn-cite-book { color: var(--accent2); }
.cn-word {
  font-family: 'Share Tech Mono', monospace;
  font-size: 0.72rem; letter-spacing: 0.04em;
  padding: 3px 10px; border: 1px solid var(--border);
  background: rgba(10,28,56,0.6); color: var(--text-dim);
}
.cn-word:hover { border-color: var(--accent); color: var(--accent); background: rgba(0,204,255,0.05); }
.cn-word-link:hover { background: var(--accent); color: var(--bg) !important; }
.cn-page-btn {
  font-family: 'Share Tech Mono', monospace; font-size: 0.7rem;
  border: 1px solid var(--border); background: rgba(10,28,56,0.6); color: var(--accent);
}
.cn-page-btn:hover { background: var(--accent); color: var(--bg); }