* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; background: #02060d; color: #eef7ff; font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Arial, sans-serif; }
button, input { font: inherit; }
button { color: inherit; }
#app { position: relative; width: 100%; height: 100%; background:
  radial-gradient(circle at 50% 45%, rgba(19,53,84,.24), transparent 38%),
  radial-gradient(circle at 20% 15%, rgba(26,90,132,.13), transparent 26%),
  #02060d;
}
#scene { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

.topbar { position: absolute; z-index: 20; inset: 18px 20px auto 20px; display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; pointer-events: none; }
.topbar > * { pointer-events: auto; }
.universe-brand { display: flex; align-items: flex-start; gap: 12px; color: inherit; text-decoration: none; }
.universe-logo { width: 24px; height: 24px; display: block; border-radius: 6px; box-shadow: 0 5px 14px rgba(0,0,0,.24); flex: 0 0 auto; }
.eyebrow { font-size: 10px; letter-spacing: .22em; color: #78b9df; font-weight: 800; }
.title { font-size: 27px; line-height: 1.05; font-weight: 780; letter-spacing: -.03em; text-shadow: 0 0 24px rgba(63,181,255,.18); }
.breadcrumb { margin-top: 6px; font-size: 12px; color: #93abc0; max-width: min(720px, 64vw); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.top-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.theme-switcher {
  min-height:39px; display:inline-flex; align-items:stretch; overflow:hidden;
  border:1px solid rgba(134,188,225,.24); border-radius:10px;
  background:rgba(7,18,30,.74); backdrop-filter:blur(10px);
}
.theme-option {
  display:inline-flex; align-items:center; justify-content:center; min-width:64px;
  padding:0 10px; color:#7898b0; font-size:11px; font-weight:750;
  text-decoration:none; transition:.18s ease;
}
.theme-option + .theme-option { border-left:1px solid rgba(134,188,225,.16); }
.theme-option:hover { color:#edfbff; background:rgba(17,48,70,.55); }
.theme-option.active {
  color:#edfbff; background:rgba(32,119,166,.38);
  box-shadow:inset 0 0 18px rgba(83,198,255,.08);
}
.theme-option:focus-visible { outline:2px solid #56c9ff; outline-offset:-2px; }
.ghost, .search-btn, .icon-btn {
  border: 1px solid rgba(134,188,225,.2);
  background: rgba(7,18,30,.74);
  backdrop-filter: blur(10px);
  border-radius: 10px;
  cursor: pointer;
  transition: .18s ease;
}
.ghost { min-height: 39px; padding: 0 12px; font-size: 12px; color: #bcd4e7; }
.account-link { display:inline-flex; align-items:center; text-decoration:none; }
.ghost:hover, .ghost.active { border-color: rgba(83,198,255,.6); background: rgba(17,48,70,.8); color: #edfbff; }
.ghost:focus-visible, .search-btn:focus-visible, .icon-btn:focus-visible, input:focus-visible { outline: 2px solid #56c9ff; outline-offset: 2px; }

.info-panel {
  position:absolute; z-index:28; top:92px; right:20px; width:min(470px,calc(100vw - 40px));
  padding:16px 17px 14px; overflow:hidden; border:1px solid rgba(106,214,255,.29); border-radius:16px;
  background:linear-gradient(180deg,rgba(4,17,29,.88),rgba(2,10,18,.78));
  backdrop-filter:blur(18px) saturate(1.18);
  box-shadow:0 22px 70px rgba(0,0,0,.38),inset 0 1px 0 rgba(210,244,255,.04),0 0 35px rgba(53,185,255,.08);
  animation:inspectorIn .22s ease-out;
}
.info-panel::after {
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.15;
  background:repeating-linear-gradient(180deg,transparent 0 4px,rgba(106,219,255,.055) 5px);
}
.inspector-scanline { position:absolute; z-index:0; left:0; right:0; height:1px; top:0; background:linear-gradient(90deg,transparent,#73e3ff,transparent); box-shadow:0 0 16px #42cbff; animation:inspectorScan 4.2s linear infinite; opacity:.62; }
.inspector-head { position:relative; z-index:2; display:flex; align-items:flex-start; justify-content:space-between; gap:14px; }
.panel-kicker { font-size:9px; letter-spacing:.2em; color:#75b9da; font-weight:850; }
.inspector-status { margin-top:7px; display:flex; align-items:center; gap:7px; color:#79dfff; font:700 9px/1 ui-monospace,SFMono-Regular,Consolas,monospace; letter-spacing:.1em; }
.inspector-status i { width:6px; height:6px; border-radius:50%; background:#5fe1b4; box-shadow:0 0 11px rgba(95,225,180,.8); animation:blip 1.7s ease-in-out infinite; }
.inspector-close { position:relative; z-index:3; flex:0 0 auto; }
.inspector-main { position:relative; z-index:2; display:grid; grid-template-columns:145px 1fr; gap:18px; align-items:center; margin-top:10px; }
.inspector-visual { position:relative; width:145px; height:145px; display:grid; place-items:center; }
#inspectorPlanet { position:relative; z-index:2; width:124px; height:124px; display:block; filter:drop-shadow(0 0 16px rgba(74,202,255,.22)); }
.inspector-orbit { position:absolute; left:50%; top:50%; border:1px solid rgba(106,218,255,.24); border-radius:50%; pointer-events:none; }
.inspector-orbit.orbit-a { width:134px; height:68px; transform:translate(-50%,-50%) rotate(-17deg); animation:inspectorOrbitA 9s linear infinite; }
.inspector-orbit.orbit-b { width:104px; height:138px; transform:translate(-50%,-50%) rotate(64deg); border-style:dashed; opacity:.62; animation:inspectorOrbitB 12s linear infinite; }
.inspector-reticle { position:absolute; inset:18px; border:1px solid rgba(94,208,255,.11); border-radius:50%; box-shadow:inset 0 0 24px rgba(66,201,255,.06); }
.inspector-reticle::before,.inspector-reticle::after { content:""; position:absolute; background:rgba(104,221,255,.28); }
.inspector-reticle::before { width:18px; height:1px; left:-10px; top:50%; }
.inspector-reticle::after { width:1px; height:18px; top:-10px; left:50%; }
.inspector-copy { min-width:0; }
.info-panel h2 { margin:0 0 7px; font-size:23px; line-height:1.12; letter-spacing:-.025em; max-height:54px; overflow:hidden; }
.path { color:#8fb8cf; font-size:11px; line-height:1.48; overflow-wrap:anywhere; max-height:50px; overflow:hidden; }
.page-description { margin-top:8px; max-height:56px; overflow:hidden; padding:7px 9px; border-left:2px solid rgba(88,205,255,.42); border-radius:0 7px 7px 0; background:rgba(40,126,168,.08); color:#b8d0dd; font-size:11px; line-height:1.45; }
.inspector-meta-line { display:flex; flex-wrap:wrap; gap:6px 12px; margin-top:11px; color:#527f98; font:700 8px/1.2 ui-monospace,SFMono-Regular,Consolas,monospace; letter-spacing:.09em; }
.info-panel dl { position:relative; z-index:2; margin:14px 0 10px; display:grid; grid-template-columns:repeat(4,1fr); gap:8px; }
.info-panel dl>div { border-top:1px solid rgba(134,188,225,.12); padding-top:8px; min-width:0; }
.info-panel dl>div.wide { grid-column:span 4; }
.info-panel dt { font-size:9px; color:#668da5; text-transform:uppercase; letter-spacing:.1em; }
.info-panel dd { margin:4px 0 0; font-size:13px; font-weight:750; color:#e8f6ff; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.live-page { position:relative; z-index:2; display:flex; justify-content:space-between; align-items:center; min-height:40px; margin:4px 0 10px; padding:0 12px; border:1px solid rgba(85,205,255,.38); border-radius:9px; background:rgba(26,126,190,.16); color:#bdeeff; font-size:10px; letter-spacing:.1em; font-weight:800; text-decoration:none; }
.live-page b { font-size:16px; font-weight:500; color:#72dcff; }
.live-page:hover { background:rgba(26,126,190,.27); color:#effbff; }
.hint { position:relative; z-index:2; font-size:9px; color:#58788d; border-top:1px solid rgba(134,188,225,.1); padding-top:9px; }
@keyframes inspectorIn { from { opacity:0; transform:translateX(14px) scale(.985); } to { opacity:1; transform:none; } }
@keyframes inspectorScan { 0% { top:0; opacity:0; } 10% { opacity:.62; } 90% { opacity:.62; } 100% { top:100%; opacity:0; } }
@keyframes inspectorOrbitA { to { transform:translate(-50%,-50%) rotate(343deg); } }
@keyframes inspectorOrbitB { to { transform:translate(-50%,-50%) rotate(-296deg); } }

.command-dock { position: absolute; z-index: 25; left: 50%; bottom: 20px; transform: translateX(-50%); width: min(760px, calc(100vw - 32px)); }
.command-wrap {
  height: 56px; display: flex; align-items: center; gap: 9px; padding: 7px 7px 7px 15px;
  background: rgba(5,15,27,.9); border: 1px solid rgba(113,189,232,.26); border-radius: 16px;
  backdrop-filter: blur(15px); box-shadow: 0 18px 60px rgba(0,0,0,.32), 0 0 35px rgba(31,147,210,.07);
}
.prompt-mark { color: #6bd4ff; font-size: 22px; font-weight: 300; }
.command-wrap input { min-width: 0; flex: 1; height: 40px; background: transparent; color: #f4fbff; border: 0; outline: 0; font-size: 14px; }
.command-wrap input::placeholder { color: #5f7f95; }
.search-btn { height: 42px; min-width: 92px; padding: 0 18px; border-color: rgba(85,196,255,.4); background: linear-gradient(135deg, rgba(26,126,190,.95), rgba(31,169,220,.9)); font-weight: 750; }
.search-btn:hover { filter: brightness(1.1); transform: translateY(-1px); }
.dock-note { text-align: center; margin-top: 7px; font-size: 10px; color: #526f82; }

.scanner-panel {
  position: absolute; z-index: 24; top: 112px; left: 20px; width: min(390px, calc(100vw - 40px));
  border: 1px solid rgba(91,210,255,.34); border-radius: 12px; overflow: hidden;
  background: linear-gradient(180deg, rgba(3,16,27,.95), rgba(2,10,18,.91));
  backdrop-filter: blur(12px); box-shadow: 0 20px 70px rgba(0,0,0,.38), 0 0 34px rgba(47,195,255,.10);
  pointer-events: none;
}
.scanner-panel::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .22;
  background: repeating-linear-gradient(180deg, transparent 0 3px, rgba(99,220,255,.06) 4px);
  animation: scanlines 6s linear infinite;
}
.scanner-head {
  position: relative; z-index: 2; height: 39px; display: flex; align-items: center; justify-content: space-between;
  padding: 0 12px 0 14px; border-bottom: 1px solid rgba(93,203,245,.18);
  background: linear-gradient(90deg, rgba(20,95,130,.22), transparent);
}
.scanner-title { font-size: 10px; letter-spacing: .19em; font-weight: 850; color: #a9eaff; }
.scanner-state {
  font-size: 9px; letter-spacing: .16em; color: #7de3ff; border: 1px solid rgba(78,207,255,.36);
  border-radius: 999px; padding: 4px 7px; box-shadow: inset 0 0 12px rgba(56,202,255,.08);
}
.scanner-body { position: relative; z-index: 2; display: grid; grid-template-columns: 145px 1fr; gap: 14px; padding: 14px; align-items: center; }
.scanner-radar {
  position: relative; width: 145px; height: 145px; border-radius: 50%; overflow: hidden;
  border: 1px solid rgba(93,213,255,.42);
  background:
    radial-gradient(circle, rgba(72,210,255,.13) 0 2%, transparent 3%),
    repeating-radial-gradient(circle, transparent 0 23px, rgba(89,207,255,.11) 24px 25px);
  box-shadow: inset 0 0 34px rgba(42,185,237,.11), 0 0 24px rgba(42,185,237,.08);
}
.scanner-grid {
  position: absolute; inset: 0; opacity: .22;
  background:
    linear-gradient(90deg, transparent 49.5%, rgba(98,220,255,.38) 50%, transparent 50.5%),
    linear-gradient(0deg, transparent 49.5%, rgba(98,220,255,.38) 50%, transparent 50.5%);
}
.scanner-sweep {
  position: absolute; inset: -5%; border-radius: 50%;
  background: conic-gradient(from 0deg, transparent 0 278deg, rgba(70,218,255,.05) 305deg, rgba(75,224,255,.42) 352deg, transparent 360deg);
  animation: scannerSweep 1.15s linear infinite;
}
.scanner-crosshair { position: absolute; inset: 50% auto auto 50%; width: 8px; height: 8px; transform: translate(-50%,-50%); border: 1px solid #a7efff; border-radius: 50%; box-shadow: 0 0 13px #63dcff; }
.scanner-blip { position: absolute; width: 5px; height: 5px; border-radius: 50%; background: #9becff; box-shadow: 0 0 9px #64dcff; animation: blip 1.35s ease-in-out infinite; }
.blip-a { left: 27%; top: 36%; }
.blip-b { left: 67%; top: 62%; animation-delay: .38s; }
.blip-c { left: 56%; top: 24%; animation-delay: .76s; }
.scanner-readout { min-width: 0; }
.scanner-label { margin-top: 6px; font-size: 8px; letter-spacing: .16em; color: #527f98; font-weight: 800; }
.scanner-query { margin: 3px 0 10px; font-size: 13px; color: #e0f8ff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.search-status { min-height: 32px; margin-top: 4px; font-size: 12px; line-height: 1.35; color: #9de8ff; text-shadow: 0 0 14px rgba(71,206,255,.25); }
.scan-meter { height: 5px; margin-top: 10px; overflow: hidden; border: 1px solid rgba(81,199,241,.24); background: rgba(37,111,143,.08); }
.scan-meter span { display: block; height: 100%; width: 0%; background: linear-gradient(90deg, rgba(79,195,235,.55), rgba(131,235,255,.95)); box-shadow: 0 0 14px rgba(90,220,255,.45); transition: width .28s ease; }
.scan-meta { display: flex; justify-content: space-between; margin-top: 6px; font: 700 8px/1.2 ui-monospace, SFMono-Regular, Consolas, monospace; letter-spacing: .11em; color: #5f9ab7; }
.scan-log { position: relative; z-index: 2; border-top: 1px solid rgba(89,192,233,.13); padding: 9px 14px 11px; min-height: 54px; max-height: 74px; overflow: hidden; font: 9px/1.55 ui-monospace, SFMono-Regular, Consolas, monospace; color: #54869f; }
.scan-log div:last-child { color: #87dfff; }
@keyframes scannerSweep { to { transform: rotate(360deg); } }
@keyframes scanlines { to { background-position: 0 32px; } }
@keyframes blip { 0%,35%,100% { opacity: .15; transform: scale(.65); } 48% { opacity: 1; transform: scale(1.45); } }

.source-panel { position: absolute; z-index: 40; inset: 0; display: grid; place-items: center; padding: 20px; background: rgba(1,7,13,.66); backdrop-filter: blur(7px); }
.source-card { width: min(520px, calc(100vw - 32px)); padding: 22px; border: 1px solid rgba(105,195,240,.25); border-radius: 16px; background: rgba(5,15,27,.97); box-shadow: 0 24px 80px rgba(0,0,0,.5); }
.source-card h2 { margin: 7px 0 7px; font-size: 22px; }
.source-card p { margin: 0 0 15px; color: #7f9db1; font-size: 12px; line-height: 1.5; }
.source-card input { width: 100%; height: 46px; border: 1px solid rgba(126,190,255,.26); border-radius: 10px; background: rgba(3,11,20,.85); color: #edfaff; padding: 0 13px; outline: 0; }
.source-card input:focus { border-color: rgba(88,205,255,.72); box-shadow: 0 0 0 3px rgba(73,190,240,.09); }
.source-actions { display: flex; justify-content: flex-end; gap: 9px; margin-top: 14px; }
.ghost:disabled, .search-btn:disabled { opacity: .45; cursor: wait; }

.results-panel {
  position: absolute; z-index: 24; left: 50%; bottom: 91px; transform: translateX(-50%);
  width: min(650px, calc(100vw - 34px)); max-height: 280px; overflow: hidden;
  background: rgba(5,14,25,.94); border: 1px solid rgba(110,189,232,.24); border-radius: 14px; backdrop-filter: blur(13px);
  box-shadow: 0 20px 60px rgba(0,0,0,.36);
}
.results-head { height: 42px; display: flex; align-items: center; justify-content: space-between; padding: 0 9px 0 14px; border-bottom: 1px solid rgba(120,184,222,.12); color: #bfe9ff; font-size: 12px; font-weight: 750; }
.icon-btn { width: 31px; height: 31px; border-radius: 8px; font-size: 20px; color: #7ea3ba; }
.results-list { max-height: 236px; overflow: auto; padding: 7px; }
.result-item { width: 100%; text-align: left; border: 0; background: transparent; color: #dceffc; border-radius: 9px; padding: 9px 10px; cursor: pointer; display: grid; grid-template-columns: 1fr auto; gap: 4px 14px; }
.result-item:hover, .result-item:focus-visible { background: rgba(35,125,174,.18); outline: 0; }
.result-name { font-size: 13px; font-weight: 720; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.result-size { font-size: 11px; color: #78c9ee; }
.result-path { grid-column: 1 / -1; font-size: 10px; color: #65859a; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.toast { position: absolute; z-index: 30; top: 86px; left: 50%; transform: translateX(-50%); padding: 9px 13px; border-radius: 9px; border: 1px solid rgba(105,192,235,.25); background: rgba(7,17,29,.94); color: #bde9ff; font-size: 11px; box-shadow: 0 12px 35px rgba(0,0,0,.25); }

.presentation .info-panel { opacity: 0; transform: translateX(16px); pointer-events: none; }
.presentation .topbar { opacity: .52; }
.presentation .top-actions { opacity: .35; transition: opacity .2s ease; }
.presentation .top-actions:hover { opacity: 1; }

.hidden { display: none !important; }

@media (max-width: 760px) {
  .topbar { inset: 12px 12px auto; }
  .title { font-size: 22px; }
  .breadcrumb { max-width: 74vw; }
  .top-actions { gap: 6px; }
  .ghost { min-height: 35px; padding: 0 9px; font-size: 11px; }
  .theme-switcher { min-height:35px; }
  .theme-option { min-width:54px; padding:0 8px; font-size:10px; }
  .info-panel { top: 116px; right: 12px; }
  .command-dock { bottom: 12px; width: calc(100vw - 24px); }
  .command-wrap { height: auto; min-height: 54px; }
  .search-btn { min-width: 76px; padding: 0 12px; }
}