:root{
  --bg:#060808;
  --panel:rgba(12,18,16,.88);
  --border:rgba(102,255,178,.18);
  --green:#66ffb2;
  --green-soft:#1ddc8a;
  --text:#e9fff3;
  --muted:rgba(233,255,243,.65);
  --ease:cubic-bezier(.2,.9,.2,1);
}

/* RESET */
*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}

html,body{
  height:100%;
  background:
    radial-gradient(1000px 700px at 20% 10%, rgba(102,255,178,.08), transparent 55%),
    var(--bg);
  color:var(--text);
  font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto;
  overflow:hidden;
}

/* APP */
.app{
  height:100%;
  display:grid;
  grid-template-columns:260px 1fr;
  transition:grid-template-columns .4s var(--ease);
}

/* SIDEBAR */
.sidebar{
  position:relative;
  background:linear-gradient(180deg, rgba(10,16,14,.92), rgba(6,10,9,.92));
  border-right:1px solid var(--border);
  padding:24px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
}

/* Ambient Glow */
.sidebar::before{
  content:"";
  position:absolute;
  inset:-1px;
  background:radial-gradient(
    420px 420px at var(--gx,50%) var(--gy,30%),
    rgba(102,255,178,.18),
    transparent 65%
  );
  opacity:.6;
  pointer-events:none;
}

/* BRAND */
.brand{
  display:flex;
  gap:12px;
  align-items:center;
}

.status-dot{
  position:relative;
  width:10px;
  height:10px;
  border-radius:50%;
  background:var(--green);
  box-shadow:
    0 0 12px rgba(102,255,178,.8);
}

/* pulsierender Glow */
.status-dot::before,
.status-dot::after{
  content:"";
  position:absolute;
  inset:-8px;
  border-radius:50%;
  background:radial-gradient(
    circle,
    rgba(102,255,178,.35),
    rgba(102,255,178,.15),
    transparent 70%
  );
  animation:pulse 3.8s cubic-bezier(.4,0,.2,1) infinite;
}

.status-dot::after{
  inset:-14px;
  animation-delay:1.9s;
  opacity:.6;
}

.brand span{
  font-size:11px;
  color:var(--muted);
  text-transform:uppercase;
  letter-spacing:.14em;
}

/* MENU */
.menu{
  display:flex;
  flex-direction:column;
  gap:14px;
  margin-top:40px;
}

.menu a{
  position:relative;
  text-decoration:none;
  color:var(--muted);
  padding:12px 16px;
  border-radius:12px;
  border:1px solid transparent;
  transition:
    color .25s ease,
    transform .25s var(--ease),
    background .25s ease,
    border-color .25s ease;
  will-change:transform;
  overflow:hidden;
}

.menu a::before{
  content:"";
  position:absolute;
  inset:-1px;
  background:radial-gradient(
    300px 200px at var(--mx,50%) var(--my,50%),
    rgba(102,255,178,.22),
    transparent 60%
  );
  opacity:0;
  transition:opacity .25s ease;
  pointer-events:none;
}

.menu a:hover::before{ opacity:1; }

.menu a:hover{
  color:var(--text);
  border-color:var(--border);
  background:rgba(0,0,0,.25);
}

.menu a.active{
  color:var(--text);
  border-color:rgba(102,255,178,.4);
  background:rgba(0,0,0,.35);
  box-shadow:0 0 0 4px rgba(102,255,178,.08);
}

/* FOOTER */
.footer{
  font-size:11px;
  letter-spacing:.15em;
  color:var(--muted);
}

.footer strong{
  color:var(--green);
  display:block;
  margin-top:6px;
}

/* MAIN */
.main{
  position:relative;
  overflow:hidden;
}

/* PAGE */
.page{
  position:absolute;
  inset:0;
  padding:80px;
  opacity:0;
  transform:translateY(28px) scale(.98);
  filter:blur(10px);
  transition:all .7s var(--ease);
  pointer-events:none;
}

.page.active{
  opacity:1;
  transform:none;
  filter:none;
  pointer-events:auto;
}

/* Ambient Glow for active page */
.page.active::before{
  content:"";
  position:absolute;
  inset:-1px;
  background:radial-gradient(
    800px 500px at 50% 30%,
    rgba(102,255,178,.08),
    transparent 65%
  );
  pointer-events:none;
}

.page h1{
  font-size:clamp(34px,5vw,72px);
  letter-spacing:-.03em;
  margin-bottom:16px;
}

.page p{
  max-width:560px;
  font-size:17px;
  line-height:1.6;
  color:var(--muted);
}

/* =====================
   RESPONSIVE
===================== */

/* TABLET */
@media (max-width: 980px){
  .app{
    grid-template-columns:200px 1fr;
  }
  .page{
    padding:60px;
  }
}

@media (max-width: 720px){

  html,body{ overflow:auto; }

  .app{
    grid-template-columns:1fr;
    grid-template-rows:1fr auto;
  }

  /* Sidebar → Bottom Bar */
  .sidebar{
    position:fixed;
    bottom:0;
    left:0;
    right:0;
    height:64px;
    flex-direction:row;
    align-items:center;
    justify-content:center;
    padding:8px 12px;
    border-top:1px solid var(--border);
    border-right:none;
    background:rgba(6,10,9,.95);
    z-index:100;
  }

  .brand{ display:none; }
  .footer{ display:none; }

  .menu{
    flex-direction:row;
    width:100%;
    justify-content:space-around;
    gap:0;
    margin:0;
  }

  .menu a{
    flex:1;
    text-align:center;
    padding:8px 6px;
    font-size:11px;
    border-radius:10px;
  }

  .menu a.active{
    background:rgba(0,0,0,.45);
    box-shadow:
      0 -2px 0 rgba(102,255,178,.4) inset,
      0 0 12px rgba(102,255,178,.25);
  }

  .main{
    padding-bottom:64px;
  }

  /* 🔥 WICHTIG: Flow statt absolute */
  .page{
    position:static;
    inset:auto;
    display:none;
    opacity:1;
    transform:none;
    filter:none;
    pointer-events:auto;
    padding:32px 20px;
  }

  .page.active{
    display:block;
  }
}

@media (hover: none){
  .menu a:hover{
    transform:none;
    background:none;
  }

  .menu a::before{
    display:none;
  }
}


.home-meta{
  margin-top:24px;
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

.chip,
.tag{
  font-size:12px;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid var(--border);
  background:rgba(0,0,0,.25);
  color:var(--muted);
}

.module{
  margin-top:24px;
  padding:18px;
  border:1px solid var(--border);
  border-radius:14px;
  background:rgba(0,0,0,.25);
}

.module h3{
  margin-bottom:8px;
}

.system-list{
  margin-top:20px;
  padding-left:18px;
}

.system-list li{
  margin-bottom:6px;
  color:var(--muted);
}

@keyframes pulse{
  0%{
    transform:scale(.6);
    opacity:0;
  }
  20%{
    opacity:.8;
  }
  60%{
    opacity:.4;
  }
  100%{
    transform:scale(1.4);
    opacity:0;
  }
}

/* =========================
   ADMIN ACCESS
========================= */

.admin-access{
  position:relative;
  margin-top:24px;
}

.admin-access a{
  position:relative;
  display:block;
  padding:14px 16px;
  border-radius:14px;
  text-decoration:none;
  border:1px solid rgba(102,255,178,.25);
  background:rgba(0,0,0,.35);
  overflow:hidden;
  transition:
    transform .3s var(--ease),
    border-color .3s ease,
    box-shadow .3s ease;
}

/* Glow Layer */
.admin-access a::before{
  content:"";
  position:absolute;
  inset:-1px;
  background:radial-gradient(
    260px 140px at var(--mx,50%) var(--my,50%),
    rgba(102,255,178,.25),
    transparent 65%
  );
  opacity:0;
  transition:opacity .3s ease;
  pointer-events:none;
}

.admin-access a:hover::before{
  opacity:1;
}

.admin-access a:hover{
  transform:translateY(-2px);
  border-color:rgba(102,255,178,.45);
  box-shadow:0 0 0 6px rgba(102,255,178,.12);
}

/* Text */
.admin-label{
  display:block;
  font-size:10px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--muted);
}

.admin-state{
  display:block;
  margin-top:4px;
  font-size:13px;
  font-weight:600;
  color:var(--green);
}

/* =========================
   BOOT / OPEN ANIMATION
========================= */

#boot-overlay{
  position:fixed;
  inset:0;
  background:var(--bg);
  z-index:9999;
  display:flex;
  align-items:center;
  justify-content:center;
  pointer-events:none;
  animation:bootFade 1s ease forwards;
  animation-delay:.4s;
}

.boot-line{
  width:0%;
  height:2px;
  background:linear-gradient(
    90deg,
    transparent,
    var(--green),
    transparent
  );
  animation:bootLine .8s cubic-bezier(.2,.9,.2,1) forwards;
}

/* Linie fährt auf */
@keyframes bootLine{
  0%{
    width:0%;
    opacity:0;
  }
  30%{
    opacity:1;
  }
  100%{
    width:80%;
    opacity:0;
  }
}

/* Overlay verschwindet */
@keyframes bootFade{
  to{
    opacity:0;
    visibility:hidden;
  }
}

/* App initial state */
body.booting .app{
  opacity:0;
  transform:scale(.985);
  filter:blur(12px);
}

/* App kommt rein */
body.ready .app{
  opacity:1;
  transform:none;
  filter:none;
  transition:
    opacity .7s cubic-bezier(.2,.9,.2,1),
    transform .7s cubic-bezier(.2,.9,.2,1),
    filter .7s cubic-bezier(.2,.9,.2,1);
}

/* =========================
   TERMINAL LOGIN
========================= */

.terminal-wrapper{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--bg);
}

.terminal{
  width:100%;
  max-width:960px;
  min-height:360px;
  padding:28px 32px;
  background:rgba(4,8,7,.96);
  border:1px solid rgba(102,255,178,.25);
  border-radius:16px;
  font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  box-shadow:
    0 0 0 1px rgba(102,255,178,.12),
    0 30px 80px rgba(0,0,0,.8);
  display:flex;
  flex-direction:column;
  gap:6px;
}


.terminal-line{
  display:flex;
  align-items:center;
  gap:10px;
  font-size:14px;
  line-height:1.6;
  white-space:pre-wrap;
}

.terminal-line.output{
  color:var(--text);
}

.terminal-line.output.muted{
  color:var(--muted);
}

.terminal-line.input{
  margin-top:12px;
}

.terminal-line.header{
  color:var(--green);
  font-weight:600;
  margin-bottom:6px;
}

.terminal-line.muted{
  color:var(--muted);
  font-size:13px;
  margin-bottom:12px;
}

.terminal-line.input{
  display:flex;
  align-items:center;
  gap:8px;
}

.prompt{
  color:var(--green);
  white-space:nowrap;
}

#terminal-input{
  flex:1;
  background:none;
  border:none;
  color:var(--text);
  font-family:inherit;
  font-size:14px;
  outline:none;
  caret-color:var(--green);
}

#admin-input{
  caret-shape:block;
  white-space:nowrap;
}


@keyframes blink {
  50% { opacity:0; }
}

.fake-cursor{
  width:8px;
  height:16px;
  background:var(--green);
  animation:blink 1s steps(1) infinite;
}

/* Blinking cursor illusion */
#terminal-input::selection{
  background:rgba(102,255,178,.35);
}

.admin-terminal{
  max-width:900px;
}

.prompt{
  color:var(--green);
  margin-right:8px;
}

.terminal-line{
  margin-bottom:4px;
}

#admin-input{
  background:transparent;
  border:none;
  outline:none;
  color:var(--text);
  font-family:inherit;
  font-size:14px;
  width:100%;
  caret-color:var(--green);
}