:root { --cyan:#00f3ff; --pink:#ff007f; --orange:#ff5500; --bg-dark:#030914; }
body { background-color:var(--bg-dark); color:#e2f8ff; font-family:'Noto Sans SC',sans-serif; overflow-x:hidden; user-select:none; }
.font-cyber { font-family:'Orbitron','Noto Sans SC',sans-serif; }
.cyber-space { position:fixed; inset:0; background:radial-gradient(circle at 50% 35%,#0a2239 0%,#030914 70%,#010409 100%); z-index:-2; overflow:hidden; }
.cyber-grid-floor { position:absolute; bottom:-35%; left:-50%; width:200%; height:90%;
  background-image:linear-gradient(to right,rgba(0,243,255,.18) 1px,transparent 1px),linear-gradient(to bottom,rgba(0,243,255,.18) 1px,transparent 1px);
  background-size:60px 60px; transform:perspective(500px) rotateX(68deg); animation:gridMove 12s linear infinite;
  mask-image:linear-gradient(to top,rgba(0,0,0,1) 20%,rgba(0,0,0,0) 90%); -webkit-mask-image:linear-gradient(to top,rgba(0,0,0,1) 20%,rgba(0,0,0,0) 90%); }
.cyber-grid-ceiling { position:absolute; top:-35%; left:-50%; width:200%; height:75%;
  background-image:linear-gradient(to right,rgba(255,0,127,.12) 1px,transparent 1px),linear-gradient(to bottom,rgba(0,243,255,.12) 1px,transparent 1px);
  background-size:60px 60px; transform:perspective(500px) rotateX(-68deg); animation:gridMove 12s linear infinite;
  mask-image:linear-gradient(to bottom,rgba(0,0,0,.8) 10%,rgba(0,0,0,0) 85%); -webkit-mask-image:linear-gradient(to bottom,rgba(0,0,0,.8) 10%,rgba(0,0,0,0) 85%); }
@keyframes gridMove { 0%{background-position:0 0} 100%{background-position:0 60px} }
.hud-frame { position:relative; background:linear-gradient(180deg,rgba(6,24,44,.88) 0%,rgba(3,13,26,.92) 100%);
  border:2px solid rgba(0,243,255,.65); box-shadow:0 0 25px rgba(0,243,255,.25),inset 0 0 30px rgba(0,243,255,.12);
  clip-path:polygon(0 20px,20px 0,calc(100% - 20px) 0,100% 20px,100% calc(100% - 20px),calc(100% - 20px) 100%,20px 100%,0 calc(100% - 20px)); }
.hud-corner-tl,.hud-corner-tr,.hud-corner-bl,.hud-corner-br { position:absolute; width:48px; height:48px; pointer-events:none; z-index:20; }
.hud-corner-tl { top:0;left:0; border-top:4px solid var(--pink); border-left:4px solid var(--cyan); filter:drop-shadow(0 0 8px var(--pink)); }
.hud-corner-tr { top:0;right:0; border-top:4px solid var(--orange); border-right:4px solid var(--cyan); filter:drop-shadow(0 0 8px var(--orange)); }
.hud-corner-bl { bottom:0;left:0; border-bottom:4px solid var(--pink); border-left:4px solid var(--cyan); filter:drop-shadow(0 0 8px var(--pink)); }
.hud-corner-br { bottom:0;right:0; border-bottom:4px solid var(--orange); border-right:4px solid var(--cyan); filter:drop-shadow(0 0 8px var(--orange)); }
.cyber-pill { background:rgba(5,36,56,.88); border:1.5px solid #22d3ee; box-shadow:0 0 15px rgba(34,211,238,.35),inset 0 0 12px rgba(34,211,238,.2); }
.text-glow-cyan { text-shadow:0 0 12px rgba(0,243,255,.75),0 0 24px rgba(0,243,255,.35); }
@keyframes talkBounce { 0%,100%{transform:translateY(0) scale(1)} 50%{transform:translateY(-6px) scale(1.02)} }
.talking-avatar { animation:talkBounce .45s ease-in-out infinite; }
@keyframes mouthMove { 0%,100%{transform:scaleY(.3)} 50%{transform:scaleY(1.15)} }
.talking-mouth { transform-origin:center; animation:mouthMove .25s ease-in-out infinite; }
::-webkit-scrollbar { width:6px; height:6px; }
::-webkit-scrollbar-track { background:rgba(3,13,26,.6); }
::-webkit-scrollbar-thumb { background:rgba(0,243,255,.4); border-radius:3px; }
::-webkit-scrollbar-thumb:hover { background:rgba(0,243,255,.8); }
select.voice-select {
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2300f3ff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
  background-repeat: no-repeat; background-position: right 0.5rem center; background-size: 1em;
}
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }