/* ============================================================
   EDEN — PROFESSIONAL REFINEMENT LAYER
   Additive overrides loaded AFTER styles.css.
   Keeps the exact color scheme; removes the "thrown-together"
   sci-fi tells (scanlines, corner brackets, heavy glows) and
   tightens spacing, elevation, and typography for daily use.

   TO REVERT: delete the <link rel="stylesheet" href="styles-refine.css">
   line in index.html. Nothing else touched.
   ============================================================ */

:root {
  /* softer, more even elevation instead of neon glows */
  --elev-1: 0 1px 2px rgba(0,0,0,0.40), 0 2px 8px rgba(0,0,0,0.28);
  --elev-2: 0 4px 14px rgba(0,0,0,0.42), 0 10px 34px rgba(0,0,0,0.30);
  --line-hair: rgba(140,190,225,0.09);
  --line-hair-2: rgba(140,190,225,0.16);
  /* calmer glows (dimmed ~50%) */
  --glow-teal: 0 0 10px rgba(0,200,255,0.22);
  --glow-soft: 0 0 20px rgba(0,200,255,0.06);
  /* roomier radius reads as designed, not cramped */
  --r: 9px;
}

/* ------------------------------------------------------------
   1. Kill the cheap overlays — scanlines + hot grid
   ------------------------------------------------------------ */
.app::after { display: none !important; }           /* scanlines */
.app::before { opacity: 0.5; background-size: 58px 58px; }  /* fainter, larger grid */

/* calmer backdrop wash */
.app {
  background:
    radial-gradient(1100px 640px at 74% -10%, rgba(0,80,140,0.26), transparent 60%),
    radial-gradient(820px 560px at -6% 112%, rgba(0,60,120,0.16), transparent 55%),
    linear-gradient(180deg, var(--bg-1), var(--bg-0));
}

/* ------------------------------------------------------------
   2. Panels — drop the teal L-brackets, add real elevation
   ------------------------------------------------------------ */
.panel {
  /* opaque-ish gradient (no backdrop-filter) — blur on dozens of panels
     was the scroll-jank source; solid fill composites far cheaper */
  background: linear-gradient(180deg, rgb(13,32,58), rgb(7,19,37));
  border: 1px solid var(--line-hair);
  border-radius: var(--r);
  box-shadow: var(--elev-1);
  /* isolate each panel's paint so scrolling only repaints what moved */
  contain: layout paint style;
}
.panel::before,
.panel::after { display: none !important; }         /* corner brackets */

/* subtle top edge-light so cards feel lit, not stickered */
.panel { position: relative; }
.panel > .panel-head { border-bottom-color: var(--line-hair); }

.modcard:hover {
  transform: translateY(-2px);
  border-color: var(--line-hair-2);
  box-shadow: var(--elev-2);
}

/* ------------------------------------------------------------
   3. Typography — dial back shouty tracking + neon text-shadow
   ------------------------------------------------------------ */
.brand-name {
  letter-spacing: 0.08em;
  text-shadow: 0 0 10px rgba(0,200,255,0.25);
}
.view-title {
  letter-spacing: 0.02em;
  text-shadow: 0 0 14px rgba(0,200,255,0.16);
}
.panel-title { letter-spacing: 0.07em; font-size: 14px; }
.eyebrow { letter-spacing: 0.16em; }
.nav-group-label { letter-spacing: 0.16em; color: var(--tx-3); }

/* ------------------------------------------------------------
   4. Sidebar — cleaner active state, calmer hovers
   ------------------------------------------------------------ */
.brand { border-bottom-color: var(--line-hair); }
.side { border-right-color: var(--line-hair); }
.nav-item {
  border-radius: 8px;
  transition: background .14s ease, color .14s ease;
}
.nav-item:hover { background: rgba(120,190,230,0.06); }
.nav-item.active {
  background: linear-gradient(90deg, rgba(0,200,255,0.14), rgba(0,200,255,0.015));
  color: #e6faff;
}
.nav-item.active::before { box-shadow: none; width: 3px; }

/* ------------------------------------------------------------
   5. Top bar + status — hairline borders
   ------------------------------------------------------------ */
.top { border-bottom-color: var(--line-hair); background: linear-gradient(180deg, rgba(7,26,48,0.5), rgba(3,14,28,0.2)); }
.status { border-top-color: var(--line-hair); }
.cmd { border-color: var(--line-hair); border-radius: 8px; }
.icon-btn { border-color: var(--line-hair); border-radius: 8px; }
.top-status .live { box-shadow: 0 0 6px var(--emerald); }

/* ------------------------------------------------------------
   6. Buttons / inputs / chips — consistent radius + softer state
   ------------------------------------------------------------ */
.btn { border-radius: 8px; border-color: var(--line-hair-2); transition: background .14s ease, border-color .14s ease, box-shadow .14s ease; }
.btn:hover { box-shadow: none; }
.btn.solid:hover { box-shadow: 0 0 14px rgba(0,200,255,0.35); }
.input, .textarea, .select { border-radius: 8px; border-color: var(--line-hair); }
.chip { border-color: var(--line-hair); }
.check { border-radius: 5px; }

/* rows — hairline separators */
.row { border-bottom-color: var(--line-hair); }

/* ------------------------------------------------------------
   6b. Scroll performance
   ------------------------------------------------------------ */
/* the scroll surface: promote to its own layer, stop scroll chaining */
.main {
  overscroll-behavior: contain;
  transform: translateZ(0);
}
/* keep the always-spinning decor on GPU layers so they don't force
   full-surface repaints while the list scrolls underneath */
.orbit, .orbit-rev, .sweep, svg.spin { will-change: transform; }

/* ------------------------------------------------------------
   7. Motion — respect reduced-motion (extends existing rule)
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .fade-up, svg.spin, .orbit, .orbit-rev { animation: none !important; }
}