:root{
  --gap: 16px;
  --radius: 18px;

  --bg0: #050510;
  --bg1: #070a1f;
  --card0: rgba(10, 14, 40, .65);
  --card1: rgba(16, 22, 60, .55);
  --border: rgba(145, 220, 255, .18);

  --text: rgba(240, 247, 255, .92);
  --muted: rgba(200, 220, 255, .65);

  --neon-cyan: #42f5ff;
  --neon-blue: #5b7cff;
  --neon-pink: #ff3df2;
  --neon-green: #3dffb5;
  --neon-warn: #ffd34d;

  --danger: #ff3b6a;
  --shadow: 0 12px 40px rgba(0,0,0,.45);
  --glow-cyan: 0 0 18px rgba(66,245,255,.35), 0 0 46px rgba(66,245,255,.18);
  --glow-pink: 0 0 18px rgba(255,61,242,.28), 0 0 46px rgba(255,61,242,.16);

  --sidebarW: 320px;

  --font-ui: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  --font-sci: "Orbitron", system-ui, sans-serif;
}

/* Performance profiles */
html[data-perf="low"] .starfield{ display:none; }
html[data-perf="low"] .space-bg::after{ display:none; } /* planet off in low */

*{ box-sizing: border-box; }
html, body{ height: 100%; }
body{
  margin: 0;
  color: var(--text);
  font-family: var(--font-ui);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  background:
    radial-gradient(1200px 800px at 20% 10%, rgba(91,124,255,.18), transparent 65%),
    radial-gradient(900px 700px at 80% 0%, rgba(255,61,242,.12), transparent 60%),
    radial-gradient(900px 800px at 60% 110%, rgba(66,245,255,.10), transparent 60%),
    linear-gradient(180deg, var(--bg0), var(--bg1));

  overflow-x: hidden;
}

/* Starfield Canvas */
.starfield{
  position: fixed;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: .98;
}

/* Nebula/Planet Overlay */
.space-bg{
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}
.space-bg::before{
  content:"";
  position:absolute;
  inset: 0;
  background:
    radial-gradient(900px 600px at 20% 15%, rgba(91,124,255,.12), transparent 60%),
    radial-gradient(700px 500px at 80% 10%, rgba(255,61,242,.10), transparent 55%),
    radial-gradient(900px 700px at 60% 110%, rgba(66,245,255,.08), transparent 60%);
  opacity: .9;
}
.space-bg::after{
  content:"";
  position:absolute;
  width: 420px;
  height: 420px;
  left: 72%;
  top: 55%;
  border-radius: 50%;
  background:
    radial-gradient(closest-side at 30% 30%, rgba(255,255,255,.20), transparent 55%),
    radial-gradient(closest-side at 55% 60%, rgba(66,245,255,.16), transparent 62%),
    radial-gradient(closest-side at 70% 75%, rgba(0,0,0,.50), rgba(0,0,0,.80) 70%),
    radial-gradient(circle at 40% 40%, rgba(90,140,255,.30), rgba(40,60,120,.14) 55%, rgba(0,0,0,0) 72%);
  box-shadow: 0 0 50px rgba(91,124,255,.18), 0 0 120px rgba(255,61,242,.09);
  animation: planetFloat 90s ease-in-out infinite;
  opacity: .58;
}
@keyframes planetFloat{
  0%   { transform: translate(-40px,-20px) scale(1); }
  50%  { transform: translate(30px,10px) scale(1.02); }
  100% { transform: translate(-40px,-20px) scale(1); }
}

/* Layout */
.container{
  width: min(1280px, 100% - 32px);
  margin-inline: auto;
  padding-block: 16px;
  position: relative;
  z-index: 2;
}
.container::before{
  content:"";
  position:absolute;
  inset:-14px;
  pointer-events:none;
  background:
    radial-gradient(1200px 700px at 50% 40%, transparent 55%, rgba(0,0,0,.55) 85%),
    linear-gradient(135deg, rgba(255,255,255,.05), transparent 35%);
  border-radius: 28px;
  opacity: .55;
  filter: blur(.2px);
}

.app{
  min-height: calc(100vh - 32px);
  display:grid;
  gap: var(--gap);
  grid-template-columns: var(--sidebarW) 1fr;
  grid-template-rows: auto auto auto auto 1fr auto;
  grid-template-areas:
    "sidebar topbar"
    "sidebar alertbar"
    "sidebar subnav"
    "sidebar resourcebar"
    "sidebar content"
    "footer  footer";
}

.sidebar{ grid-area: sidebar; }
.topbar{ grid-area: topbar; }
.alertbar{ grid-area: alertbar; }
.subnav{ grid-area: subnav; }
.resourcebar{ grid-area: resourcebar; }
.content{ grid-area: content; }
.footer{ grid-area: footer; }

.sidebar{
  display:grid;
  gap: var(--gap);
  align-content:start;
  position: sticky;
  top: 16px;
  max-height: calc(100vh - 32px);
  overflow: auto;
  padding-right: 4px;
}

/* Cards / Panels + Hologramm */
.card{
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: linear-gradient(180deg, rgba(10, 14, 40, .65), rgba(16, 22, 60, .55));
  box-shadow: var(--shadow);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  position: relative;
  overflow: hidden;
}
.panel{ padding: 14px 16px; }

.card::after{
  content:"";
  position:absolute;
  inset:-2px;
  border-radius: inherit;
  background:
    radial-gradient(600px 120px at 20% 0%, rgba(66,245,255,.18), transparent 70%),
    radial-gradient(500px 120px at 80% 0%, rgba(255,61,242,.12), transparent 70%);
  pointer-events:none;
  opacity:.85;
}
.card::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    repeating-linear-gradient(180deg, rgba(66,245,255,.00) 0px, rgba(66,245,255,.00) 3px, rgba(66,245,255,.05) 4px);
  opacity: .22;
  mix-blend-mode: screen;
}

@keyframes hudShimmer{
  0%   { transform: translateX(-120%) skewX(-20deg); opacity: 0; }
  20%  { opacity: .35; }
  100% { transform: translateX(120%) skewX(-20deg); opacity: 0; }
}
.card:hover .panel::after{
  content:"";
  position:absolute;
  top:0; left:0;
  height:100%;
  width:40%;
  background: linear-gradient(90deg, transparent, rgba(66,245,255,.18), transparent);
  filter: blur(2px);
  pointer-events:none;
  animation: hudShimmer 1.1s ease;
}

/* Typography */
.panel-title,
.brand-title,
.hud-title,
h1,h2,h3,
button,.btn,input[type="submit"], .chip, .tab,
label,.label{
  font-family: var(--font-sci);
  letter-spacing: .6px;
}
.hud-title{ margin: 0 0 6px; text-transform: uppercase; }
.h2{ margin: 0 0 10px; }
.muted{ color: var(--muted); font-size: .95rem; }
.tiny{ font-size: .8rem; }

.divider{ height: 1px; background: rgba(145,220,255,.14); margin: 14px 0; }
.w-full{ display:block; width: 100%; text-align:center; }

/* Topbar */
.topbar{ position: relative; }
.topbar-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.brand{ display:flex; align-items:center; gap: 12px; }
.brand-dot{
  width: 12px; height: 12px;
  border-radius: 50%;
  background: linear-gradient(180deg, rgba(66,245,255,.85), rgba(255,61,242,.55));
  box-shadow: var(--glow-cyan);
}
.top-actions{ display:flex; gap: 10px; align-items:center; flex-wrap: wrap; }

.iconbtn{
  border: 1px solid rgba(145,220,255,.18);
  background: rgba(0,0,0,.18);
  color: var(--text);
  border-radius: 14px;
  padding: 9px 12px;
  cursor:pointer;
  font-family: var(--font-sci);
  letter-spacing: .6px;
}
.iconbtn:hover{ box-shadow: var(--glow-cyan); border-color: rgba(66,245,255,.45); transform: translateY(-1px); }
.badge{
  display:inline-block;
  margin-left: 8px;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid rgba(255,61,242,.25);
  background: rgba(255,61,242,.10);
  font-size: .8rem;
}

/* Notification panel */
.notif{
  position: absolute;
  right: 12px;
  top: calc(100% + 10px);
  width: min(360px, 100%);
  border-radius: 16px;
  border: 1px solid rgba(145,220,255,.18);
  background: linear-gradient(180deg, rgba(10, 14, 40, .92), rgba(16, 22, 60, .75));
  box-shadow: var(--shadow);
  overflow: hidden;
}
.notif-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 10px 12px;
  border-bottom: 1px solid rgba(145,220,255,.12);
}
.notif-list{ display:grid; }
.notif-item{
  display:flex;
  gap: 10px;
  align-items:center;
  padding: 10px 12px;
  border: 0;
  background: transparent;
  color: var(--text);
  text-align:left;
  cursor:pointer;
}
.notif-item:hover{ background: rgba(66,245,255,.06); }
.notif-ico{ width: 24px; text-align:center; }
.notif-title{ display:block; font-family: var(--font-sci); letter-spacing:.6px; }
.notif-meta{ display:block; color: var(--muted); font-size: .82rem; margin-top: 2px; }

/* Subnav (Kontextmenü in der Mitte) */
.subnav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.subnav-tabs{ display:flex; gap: 10px; flex-wrap: wrap; }
.tab{
  display:inline-flex;
  align-items:center;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(145,220,255,.18);
  background: rgba(0,0,0,.18);
  color: var(--text);
  text-decoration:none;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.tab:hover{ transform: translateY(-1px); border-color: rgba(66,245,255,.45); box-shadow: var(--glow-cyan); }
.tab.is-active{
  border-color: rgba(66,245,255,.55);
  box-shadow: var(--glow-cyan);
  background: linear-gradient(180deg, rgba(66,245,255,.18), rgba(91,124,255,.10));
}

/* Main menu list */
.navlist{ list-style:none; padding:0; margin: 12px 0 0; display:grid; gap: 10px; }
.navlist a{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(145,220,255,.14);
  background: rgba(0,0,0,.18);
  transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
  text-decoration: none;
  color: var(--text);
}
.navlist a:hover{
  transform: translateY(-1px);
  border-color: rgba(66,245,255,.35);
  box-shadow: var(--glow-cyan);
}
.navlist a.is-active{
  border-color: rgba(66,245,255,.55);
  box-shadow: var(--glow-cyan);
}
.mi{ width: 22px; text-align:center; }

/* Planet list */
.planetlist{ list-style:none; padding:0; margin: 12px 0 0; display:grid; gap: 10px; }
.planetlist a{
  display:flex;
  align-items:center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(145,220,255,.14);
  background: rgba(0,0,0,.18);
  text-decoration: none;
  color: var(--text);
  justify-content:space-between;
}
.planetlist a:hover{ border-color: rgba(66,245,255,.35); box-shadow: var(--glow-cyan); transform: translateY(-1px); }
.planetlist a.is-active{ border-color: rgba(66,245,255,.55); box-shadow: var(--glow-cyan); }
.pl-name{ flex: 1; }
.pl-dot{
  width: 10px; height: 10px; border-radius: 999px;
  background: rgba(145,220,255,.20);
  box-shadow: 0 0 10px rgba(255,255,255,.08);
}
.pl-dot.on{ background: var(--neon-green); box-shadow: 0 0 18px rgba(61,255,181,.24); }

.navhint{
  color: rgba(200,220,255,.55);
  font-size: .8rem;
  border: 1px solid rgba(145,220,255,.16);
  border-radius: 10px;
  padding: 2px 8px;
  background: rgba(0,0,0,.18);
}

/* Buttons */
button, .btn, input[type="submit"]{
  appearance:none;
  border: 1px solid rgba(66,245,255,.28);
  background: linear-gradient(180deg, rgba(66,245,255,.18), rgba(91,124,255,.10));
  color: var(--text);
  border-radius: 14px;
  padding: 10px 14px;
  cursor:pointer;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease, filter .15s ease;
  text-decoration: none;
  display: inline-block;
}
button:hover, .btn:hover, input[type="submit"]:hover{
  transform: translateY(-1px);
  border-color: rgba(66,245,255,.55);
  box-shadow: var(--glow-cyan);
  filter: brightness(1.08);
}
button:active, .btn:active, input[type="submit"]:active{ transform: translateY(0) scale(.99); }
.btn-primary{
  border-color: rgba(255,61,242,.32);
  background: linear-gradient(180deg, rgba(255,61,242,.18), rgba(66,245,255,.08));
}
.btn-primary:hover{ box-shadow: var(--glow-pink); }
.btn-mini{ padding: 7px 10px; border-radius: 12px; font-size: .85rem; }

.actions{ display:flex; gap: 12px; margin-top: 14px; flex-wrap: wrap; }

/* Auth */
.auth-view{ display:flex; flex-direction:column; gap: 16px; }
.auth-card{ max-width: 720px; margin: 0 auto; width: 100%; }
.form-row{ margin-top: 12px; }
.input{
  width: 100%;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(145,220,255,.22);
  background: rgba(0,0,0,.28);
  color: var(--text);
}
.input:focus{ outline: 2px solid rgba(66,245,255,.35); }
.auth-grid{
  display:grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  margin-top: 12px;
}
.auth-choice{
  border: 1px solid rgba(145,220,255,.18);
  background: rgba(0,0,0,.18);
  border-radius: 14px;
  padding: 12px;
  color: var(--text);
  text-align: left;
  display:flex;
  flex-direction:column;
  gap: 6px;
  cursor:pointer;
}
.auth-choice:hover{ border-color: rgba(66,245,255,.45); box-shadow: var(--glow-cyan); transform: translateY(-1px); }
.auth-choice.is-selected{
  border-color: rgba(66,245,255,.55);
  box-shadow: var(--glow-cyan);
  background: linear-gradient(180deg, rgba(66,245,255,.16), rgba(91,124,255,.10));
}
.auth-choice-title{ font-family: var(--font-sci); letter-spacing: .6px; }
.auth-choice-meta{ color: var(--muted); font-size: .85rem; }
.auth-message{ min-height: 18px; margin-top: 8px; }
.auth-avatar{
  width: 100%;
  border-radius: 12px;
  border: 1px solid rgba(145,220,255,.18);
  background: rgba(0,0,0,.22);
}

/* Resourcebar sticky */
.resourcebar{
  position: sticky;
  top: 16px;
  z-index: 5;
}

.resource-row, .footer-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.stats{ display:flex; gap: 12px; flex-wrap: wrap; }
.stat{
  border: 1px solid rgba(145,220,255,.14);
  background: rgba(0,0,0,.18);
  border-radius: 14px;
  padding: 8px 12px;
  min-width: 160px;
}
.stat-k{ color: var(--muted); font-size: .86rem; }
.stat-v{ font-family: var(--font-sci); letter-spacing: .6px; margin-top: 2px; }
.dot{
  display:inline-block;
  width: 8px; height: 8px;
  border-radius: 999px;
  margin-right: 8px;
  box-shadow: 0 0 14px rgba(255,255,255,.12);
}
.dot-cyan{ background: var(--neon-cyan); box-shadow: var(--glow-cyan); }
.dot-pink{ background: var(--neon-pink); box-shadow: var(--glow-pink); }
.dot-green{ background: var(--neon-green); box-shadow: 0 0 18px rgba(61,255,181,.24); }
.dot-warn{ background: var(--neon-warn); box-shadow: 0 0 18px rgba(255,211,77,.18); }
.stat-bar{
  margin-top: 8px;
  height: 6px;
  border-radius: 999px;
  background: rgba(145,220,255,.10);
  overflow: hidden;
}
.stat-bar > span{
  display:block;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(66,245,255,.55), rgba(255,61,242,.35));
}

/* Cockpit Window */
.cockpit{ padding-top: 10px; }
.cockpit-hud{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 12px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(145,220,255,.16);
  background: rgba(0,0,0,.18);
}
.hud-left, .hud-right{
  font-family: var(--font-sci);
  letter-spacing: .7px;
  font-size: .85rem;
  color: rgba(240,247,255,.88);
  text-transform: uppercase;
}
.hud-pill{
  display:inline-block;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(66,245,255,.20);
  background: rgba(0,0,0,.16);
  margin-left: 8px;
}
.cockpit::after{
  content:"";
  position:absolute;
  inset: 10px;
  border-radius: calc(var(--radius) - 6px);
  pointer-events:none;
  border: 1px solid rgba(66,245,255,.22);
  box-shadow: 0 0 22px rgba(66,245,255,.14), inset 0 0 20px rgba(255,61,242,.06);
}
.cockpit::before{
  content:"";
  position:absolute;
  inset: 0;
  pointer-events:none;
  background:
    linear-gradient(90deg, rgba(66,245,255,.35), rgba(66,245,255,0)) 0 0 / 120px 2px no-repeat,
    linear-gradient(180deg, rgba(66,245,255,.35), rgba(66,245,255,0)) 0 0 / 2px 120px no-repeat,
    linear-gradient(90deg, rgba(66,245,255,0), rgba(66,245,255,.35)) 100% 0 / 120px 2px no-repeat,
    linear-gradient(180deg, rgba(66,245,255,.35), rgba(66,245,255,0)) 100% 0 / 2px 120px no-repeat,
    linear-gradient(90deg, rgba(66,245,255,.35), rgba(66,245,255,0)) 0 100% / 120px 2px no-repeat,
    linear-gradient(180deg, rgba(66,245,255,0), rgba(66,245,255,.35)) 0 100% / 2px 120px no-repeat,
    linear-gradient(90deg, rgba(66,245,255,0), rgba(66,245,255,.35)) 100% 100% / 120px 2px no-repeat,
    linear-gradient(180deg, rgba(66,245,255,0), rgba(66,245,255,.35)) 100% 100% / 2px 120px no-repeat,
    repeating-linear-gradient(90deg, rgba(66,245,255,.04) 0px, rgba(66,245,255,.04) 1px, transparent 1px, transparent 60px),
    repeating-linear-gradient(180deg, rgba(66,245,255,.03) 0px, rgba(66,245,255,.03) 1px, transparent 1px, transparent 60px),
    radial-gradient(900px 300px at 20% 0%, rgba(255,255,255,.06), transparent 55%);
  opacity: .55;
  mix-blend-mode: screen;
}

/* Timeline + Queue */
.grid-2{ display:grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.inner.card{ background: rgba(0,0,0,.10); }
.timeline{ display:grid; gap: 10px; margin-top: 10px; }
.tl-item{
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(145,220,255,.14);
  background: rgba(0,0,0,.18);
}
.tl-dot{ display:inline-block; width: 8px; height: 8px; border-radius: 999px; margin-right: 10px; vertical-align: middle; }
.tl-cyan{ background: var(--neon-cyan); box-shadow: var(--glow-cyan); }
.tl-pink{ background: var(--neon-pink); box-shadow: var(--glow-pink); }
.tl-green{ background: var(--neon-green); box-shadow: 0 0 18px rgba(61,255,181,.24); }

.queue{ display:grid; gap: 12px; margin-top: 10px; }
.q-card{
  border: 1px solid rgba(145,220,255,.14);
  background: rgba(0,0,0,.18);
  border-radius: 14px;
  padding: 12px;
}
.q-head{ display:flex; gap: 10px; align-items:center; }
.q-bar{
  margin-top: 10px;
  height: 8px;
  border-radius: 999px;
  background: rgba(145,220,255,.10);
  overflow: hidden;
}
.q-bar > span{
  display:block;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(66,245,255,.55), rgba(255,61,242,.35));
}
.q-meta{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 10px;
  color: var(--muted);
}

/* Settings segments */
.settings-row{ display:flex; gap: 14px; flex-wrap: wrap; align-items:flex-end; }
.settings-block{ min-width: 240px; }
.seg{ display:flex; gap: 10px; flex-wrap: wrap; }
.seg-btn{
  border: 1px solid rgba(145,220,255,.18);
  background: rgba(0,0,0,.18);
  color: var(--text);
  border-radius: 999px;
  padding: 9px 12px;
  cursor:pointer;
}
.seg-btn:hover{ box-shadow: var(--glow-cyan); border-color: rgba(66,245,255,.45); transform: translateY(-1px); }
.seg-btn.is-selected{
  border-color: rgba(66,245,255,.55);
  box-shadow: var(--glow-cyan);
  background: linear-gradient(180deg, rgba(66,245,255,.18), rgba(91,124,255,.10));
}
.check{ display:flex; gap: 10px; align-items:center; margin-top: 6px; }
.check input{ accent-color: var(--neon-cyan); }

/* Alert pulse modes via html[data-alertpulse] */
html[data-alertpulse="burst"] { --alert-iter: 3; }
html[data-alertpulse="loop"]  { --alert-iter: infinite; }

.alert.alert-pro{
  position: relative;
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 14px 14px;
  border-radius: 16px;
  border: 1px solid rgba(255,59,106,.42);
  background:
    linear-gradient(180deg, rgba(255,59,106,.16), rgba(0,0,0,.18)),
    repeating-linear-gradient(135deg, rgba(255,59,106,.06) 0px, rgba(255,59,106,.06) 10px, rgba(0,0,0,0) 10px, rgba(0,0,0,0) 22px);
  box-shadow: 0 0 18px rgba(255,59,106,.22), 0 0 52px rgba(255,59,106,.10);
}
.alert.alert-pro::before{
  content:"";
  position:absolute;
  inset:-10px;
  border-radius: 18px;
  pointer-events:none;
  background: radial-gradient(closest-side at 20% 30%, rgba(255,59,106,.30), rgba(255,59,106,.10) 45%, rgba(0,0,0,0) 70%);
  opacity: .55;
  transform: scale(1);
  animation: alertPulse 1.25s ease-in-out 0s var(--alert-iter) both;
}
.alert-led{
  flex: 0 0 auto;
  width: 12px;
  height: 12px;
  border-radius: 999px;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.30), rgba(255,59,106,.95));
  box-shadow: 0 0 10px rgba(255,59,106,.35), 0 0 24px rgba(255,59,106,.18);
  margin-top: 2px;
  animation: ledBreathe 1.25s ease-in-out 0s var(--alert-iter) both;
}
.alert-title{ text-transform: uppercase; letter-spacing: .8px; margin-bottom: 6px; }
.alert-text{ color: rgba(240,247,255,.92); }

@keyframes alertPulse{
  0%   { opacity: .45; transform: scale(1); }
  45%  { opacity: .95; transform: scale(1.01); }
  100% { opacity: .55; transform: scale(1); }
}
@keyframes ledBreathe{
  0%   { transform: scale(1);   opacity: .75; }
  45%  { transform: scale(1.2); opacity: 1; }
  100% { transform: scale(1);   opacity: .85; }
}

/* Toasts */
.toast-host{
  position: fixed;
  right: 16px;
  bottom: 16px;
  display: grid;
  gap: 10px;
  z-index: 9999;
  width: min(360px, calc(100vw - 32px));
}

.toast{
  display:flex;
  gap: 12px;
  align-items:flex-start;
  padding: 12px 12px;
  border-radius: 16px;
  border: 1px solid rgba(145,220,255,.18);
  background: linear-gradient(180deg, rgba(10, 14, 40, .82), rgba(16, 22, 60, .65));
  box-shadow: var(--shadow);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  overflow: hidden;
  animation: toastIn .18s ease-out;
  position: relative;
}
.toast::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background: repeating-linear-gradient(180deg, rgba(66,245,255,.00) 0px, rgba(66,245,255,.00) 3px, rgba(66,245,255,.05) 4px);
  opacity: .18;
  mix-blend-mode: screen;
}
.toast-icon{ font-size: 18px; line-height: 1; margin-top: 2px; filter: drop-shadow(0 0 12px rgba(66,245,255,.22)); }
.toast-title{ text-transform: uppercase; font-size: .92rem; }
.toast-msg{ color: rgba(240,247,255,.85); font-size: .95rem; margin-top: 2px; }
.toast-x{
  margin-left: auto;
  border: 1px solid rgba(145,220,255,.18);
  background: rgba(0,0,0,.18);
  color: var(--text);
  border-radius: 12px;
  padding: 6px 9px;
}
.toast-success{ border-color: rgba(61,255,181,.25); }
.toast-error{ border-color: rgba(255,59,106,.30); }
.toast-info{ border-color: rgba(66,245,255,.25); }
@keyframes toastIn{ from{ transform: translateY(8px); opacity: 0; } to{ transform: translateY(0); opacity: 1; } }
.toast.out{ animation: toastOut .18s ease-in forwards; }
@keyframes toastOut{ to{ transform: translateY(8px); opacity: 0; } }

/* Scrollbar */
.sidebar::-webkit-scrollbar{ width: 10px; }
.sidebar::-webkit-scrollbar-track{ background: rgba(0,0,0,.12); border-radius: 999px; }
.sidebar::-webkit-scrollbar-thumb{
  background: linear-gradient(180deg, rgba(66,245,255,.35), rgba(255,61,242,.25));
  border-radius: 999px;
  border: 2px solid rgba(0,0,0,.18);
}

/* Responsive */
@media (max-width: 980px){
  :root{ --sidebarW: 1fr; }
  .app{
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto auto auto 1fr auto;
    grid-template-areas:
      "topbar"
      "alertbar"
      "subnav"
      "resourcebar"
      "content"
      "sidebar"
      "footer";
  }
  .sidebar{ position: static; max-height: none; overflow: visible; padding-right: 0; }
  .grid-2{ grid-template-columns: 1fr; }
  .resourcebar{ position: static; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .starfield{ display:none; }
  .space-bg::after{ animation: none !important; }
  .alert.alert-pro::before, .alert-led{ animation: none !important; }
}