/* ArunaOS Shell — plain CSS, no Tailwind build required.
   Extracted from GoneDNB master 2026-08-27. Imports tokens.css as the palette.
   Keep GoneDNB as the authoring location; re-extract when it changes. */
/* tokens already in styles.css — import removed for static */

/* ---- App frame (outer wrapper) ---- */
.gone-app-frame {
  position: relative;
  isolation: isolate;
  min-height: 100vh;
  overflow-x: hidden;
  background: transparent;
}
.gone-app-frame::before {
  position: absolute;
  top: 0; right: 0; left: 0;
  z-index: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(0, 240, 255, .48) 28%, rgba(255, 0, 170, .46) 72%, transparent);
  content: '';
  pointer-events: none;
}
.gone-main::before {
  position: absolute;
  top: 70px; right: -8%; left: 2%;
  z-index: -1;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(0, 240, 255, .2) 34%, rgba(139, 92, 246, .18) 72%, transparent);
  content: '';
  pointer-events: none;
}

/* ---- Sidebar — 238px fixed, desktop only ---- */
.gone-shell-sidebar,
.shell-sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 40;
  display: none; /* hidden on mobile, flex on md+ */
  width: 238px;
  flex-direction: column;
  padding: 12px;
  border-right: 1px solid rgba(255, 255, 255, .1);
  background: linear-gradient(180deg, rgba(18, 18, 26, .86), rgba(10, 10, 15, .78));
  box-shadow: inset -1px 0 rgba(0, 240, 255, .04), 18px 0 48px rgba(0, 0, 0, .14);
  backdrop-filter: blur(20px) saturate(130%);
}
@media (min-width: 768px) {
  .gone-shell-sidebar,
  .shell-sidebar { display: flex; }
}
.gone-shell-sidebar { border-right-color: rgba(0, 240, 255, .13); }
.gone-shell-sidebar::after {
  position: absolute;
  top: 0; right: -1px; bottom: 0;
  width: 1px;
  background: linear-gradient(180deg, transparent, rgba(0, 240, 255, .26) 28%, rgba(255, 0, 170, .18) 70%, transparent);
  content: '';
  pointer-events: none;
}
.shell-sidebar-brand { margin-bottom: 24px; padding: 4px 8px 0; }
.shell-sidebar-nav { display: flex; flex: 1; flex-direction: column; gap: 2px; overflow-y: auto; }
.shell-sidebar-footer { border-top: 1px solid rgba(255,255,255,.08); padding-top: 10px; margin-top: 8px; }

/* ---- Brand lockup ---- */
.brand-lockup {
  display: inline-flex;
  min-width: 0;
  align-items: center;
  gap: 9px;
  color: #e8e8f0;
  text-decoration: none;
  transition: filter .22s ease, transform .22s ease;
}
.brand-lockup:hover { filter: drop-shadow(0 0 14px rgba(0, 240, 255, .18)); transform: translateX(1px); }
.brand-lockup-mark { display: block; width: 30px; height: 30px; flex: 0 0 auto; object-fit: contain; filter: drop-shadow(0 0 9px rgba(0, 240, 255, .2)); }
.brand-lockup-wordmark { width: min(108px, 28vw); height: auto; object-fit: contain; }
.brand-lockup-text { font-size: 18px; font-weight: 800; letter-spacing: -.02em; line-height: 1; color: #e8e8f0; }
.brand-lockup-sub { color: #7c7c9b; font-size: 9px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; margin-top: 2px; }
.brand-lockup-mark-fallback { /* used when no image asset */ }

/* ---- Nav groups ---- */
.nav-group { display: grid; gap: 2px; margin-bottom: 17px; }
.nav-group-label { padding: 0 12px 5px; color: #5a5a70; font-size: 9px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.shell-sidebar-nav a { text-decoration: none; }

/* ---- Topbar — sticky, blurred, 54px min-height ---- */
.gone-topbar,
.shell-topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: none;
  min-height: 54px;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 0 0 24px;
  border-bottom: 1px solid rgba(255, 255, 255, .1);
  background: rgba(10, 10, 15, .62);
  padding: 0 20px;
  backdrop-filter: blur(20px) saturate(130%);
}
.gone-topbar { border-bottom-color: rgba(0, 240, 255, .14); background: linear-gradient(90deg, rgba(10, 10, 15, .72), rgba(18, 18, 26, .54), rgba(10, 10, 15, .72)); }
@media (min-width: 768px) { .gone-topbar, .shell-topbar { display: flex; } }
.shell-context {
  display: inline-flex; min-width: 0; align-items: center; gap: 8px;
  color: #7c7c9b; font-size: 9px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase;
}
.shell-context .live-beacon { width: 5px; height: 5px; }
.shell-topbar-actions, .shell-topbar-right { display: flex; align-items: center; gap: 9px; }
.shell-topbar-link { color: #00f0ff; font-size: 10px; text-decoration: none; }
.shell-topbar-link:hover { text-decoration: underline; }
.shell-balance { display: inline-flex; align-items: center; gap: 5px; color: #e8e8f0; font-size: 10px; font-variant-numeric: tabular-nums; text-decoration: none; white-space: nowrap; }
.shell-balance:hover .shell-balance-sol { color: #00f0ff; }
.shell-balance img { width: 15px; height: 14px; object-fit: contain; }
.shell-balance-sol { color: #e8e8f0; font-weight: 700; }
.shell-balance-usd { color: #8a8aa0; font-size: 9px; }

/* Main column — offset by sidebar width on desktop */
.gone-main,
.shell-main {
  position: relative;
  z-index: 10;
  padding: 16px;
}
@media (min-width: 768px) {
  .gone-main,
  .shell-main { margin-left: 238px; padding: 24px; }
}
.shell-content { min-width: 0; }

/* ---- Mobile header ---- */
.gone-mobile-header,
.mobile-shell-header {
  position: sticky; top: 0; z-index: 40;
  border-bottom: 1px solid rgba(255, 255, 255, .1);
  background: rgba(10, 10, 15, .82);
  backdrop-filter: blur(20px) saturate(130%);
}
.gone-mobile-header { border-bottom-color: rgba(0, 240, 255, .15); }
.mobile-shell-header-main { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; row-gap: 6px; column-gap: 10px; padding: 10px 14px; }
.mobile-shell-header-main .brand-lockup { min-width: 0; flex: 1 1 auto; }
.mobile-shell-header-main .brand-lockup-wordmark { width: min(92px, 24vw); }
.mobile-shell-nav { display: flex; gap: 4px; overflow-x: auto; border-top: 1px solid rgba(255, 255, 255, .07); padding: 7px 10px; scrollbar-width: none; }
.mobile-shell-nav::-webkit-scrollbar { display: none; }
.mobile-shell-nav a { flex: 0 0 auto; }

/* ---- Ambient layer (fixed, behind content) ---- */
.ambient-space-layer {
  position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden;
}
.ambient-space-layer::after {
  position: absolute; inset: 0;
  background: radial-gradient(circle 300px at var(--ambient-pointer-x, 50vw) var(--ambient-pointer-y, 50vh), rgba(0, 240, 255, .105), rgba(139, 92, 246, .04) 27%, transparent 72%);
  content: ''; opacity: 0; transition: opacity .35s ease;
}
.ambient-space-layer.ambient-pointer-active::after { opacity: 1; }
.ambient-nebula {
  position: absolute; inset: -12%;
  background:
    radial-gradient(ellipse 1100px 620px at 82% -12%, rgba(139, 92, 246, .16), transparent 62%),
    radial-gradient(ellipse 820px 500px at 8% 112%, rgba(0, 240, 255, .08), transparent 62%),
    radial-gradient(ellipse 520px 380px at 50% 45%, rgba(255, 0, 170, .055), transparent 70%);
  animation: ambient-nebula-drift 70s ease-in-out infinite;
}
.ambient-star {
  position: absolute; width: 2px; height: 2px; border-radius: 999px;
  background: rgba(232, 232, 240, .7);
  box-shadow: 0 0 8px rgba(0, 240, 255, .35);
  animation: ambient-star-pulse 14s ease-in-out infinite alternate;
}
@keyframes ambient-nebula-drift {
  0%,100% { transform: translate3d(0,0,0) scale(1); }
  50% { transform: translate3d(1.2%, -1.2%, 0) scale(1.02); }
}
@keyframes ambient-star-pulse { from { opacity: .24; } to { opacity: .7; } }

/* ---- Holo panel — chamfered clip, the primary surface ---- */
.holo-panel {
  position: relative; overflow: hidden;
  border: 1px solid var(--console-panel-border);
  background: var(--console-panel-surface);
  box-shadow: var(--console-panel-shadow);
  clip-path: var(--console-panel-clip);
  transition: border-color .22s ease, box-shadow .22s ease, transform .22s ease;
}
.holo-panel:hover {
  border-color: rgba(0, 240, 255, .3);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .035), 0 20px 54px rgba(0, 0, 0, .25), 0 0 22px rgba(0, 240, 255, .045);
  transform: translateY(-1px);
}
.holo-panel::before {
  position: absolute; inset: 0;
  border-top: 1px solid currentColor;
  pointer-events: none; content: ''; opacity: .18;
}
.holo-panel-cyan { --panel-accent: #00f0ff; color: #00f0ff; }
.holo-panel-magenta { --panel-accent: #ff00aa; color: #ff00aa; }
.holo-panel-purple { --panel-accent: #8b5cf6; color: #8b5cf6; }
.holo-panel-none { --panel-accent: #7c7c9b; color: #7c7c9b; }
.holo-panel-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; border-bottom: 1px solid rgba(255,255,255,.1); padding: 19px 16px 14px; }
.holo-panel-title { display: inline-flex; align-items: center; gap: 7px; color: #e8e8f0; font-size: 14px; font-weight: 800; letter-spacing: -.01em; line-height: 1.2; text-transform: uppercase; }
.holo-panel-title svg { color: var(--panel-accent); }
.holo-panel-body { padding: 16px; }
.holo-panel:not(:has(.holo-panel-header)) .holo-panel-body { padding-top: 16px; }

/* ---- Glass panel — lighter sibling, same clip ---- */
.glass-panel {
  position: relative; overflow: hidden;
  border: 1px solid var(--console-panel-border);
  background: var(--console-panel-surface);
  box-shadow: var(--console-panel-shadow);
  clip-path: var(--console-panel-clip);
  transition: border-color .2s ease, box-shadow .2s ease;
}

/* ---- Stat card — small metric tile, same family ---- */
.stat-card {
  position: relative; min-width: 0;
  border: 1px solid rgba(255, 255, 255, .1);
  background: linear-gradient(180deg, rgba(18, 18, 26, .82), rgba(10, 10, 15, .72));
  padding: 13px 14px;
  clip-path: polygon(7px 0, 100% 0, 100% calc(100% - 7px), calc(100% - 7px) 100%, 0 100%, 0 7px);
  transition: border-color .2s ease, background .2s ease, transform .2s ease;
}
.stat-card::before {
  position: absolute; top: -1px; left: 0; width: 28px; height: 2px;
  background: #00f0ff; box-shadow: 0 0 9px rgba(0, 240, 255, .45); content: '';
}
.stat-card:has(.text-pos)::before  { background: #00ff88; box-shadow: 0 0 9px rgba(0, 255, 136, .45); }
.stat-card:has(.text-warn)::before { background: #e8c860; box-shadow: 0 0 9px rgba(232, 200, 96, .4); }
.stat-card:has(.text-neg)::before  { background: #ff3366; box-shadow: 0 0 9px rgba(255, 51, 102, .4); }
.stat-card:hover { border-color: rgba(0, 240, 255, .28); background: linear-gradient(180deg, rgba(18, 18, 26, .9), rgba(10, 10, 15, .8)); transform: translateY(-1px); }
.stat-card .tnum { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

/* ---- Small shared bits ---- */
.live-beacon { width: 6px; height: 6px; border-radius: 999px; background: #00f0ff; box-shadow: 0 0 10px rgba(0,240,255,.9); flex: 0 0 auto; }
.mode-chip { display: inline-flex; align-items: center; gap: 6px; border: 1px solid rgba(0,240,255,.28); border-radius: 999px; padding: 5px 9px; color: #00f0ff; background: rgba(0,240,255,.08); font-size: 9px; font-weight: 800; letter-spacing: .13em; line-height: 1; }
.mode-chip-live { border-color: rgba(232,200,96,.42); color: #f4df88; background: rgba(232,200,96,.1); }
.mode-chip-dot { width: 5px; height: 5px; border-radius: 999px; background: currentColor; box-shadow: 0 0 8px currentColor; }
.eyebrow { display: inline-flex; align-items: center; gap: 7px; color: #7c7c9b; font-size: 10px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.tnum { font-variant-numeric: tabular-nums; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
  .ambient-nebula, .ambient-star { animation: none; }
}