/* ===== CHELO – system24 x neon grün ===== */
:root{
  --bg:#0b0c0d;
  --panel:rgba(18,19,21,.7);
  --panel-solid:#101214;
  --sidebar:#0f1012;
  --dock:#080809;
  --text:#f2f7f2;
  --muted:#a7aea7;
  --green:#69ce31;
  --green-soft:rgba(105,206,49,.09);
  --green-mid:rgba(105,206,49,.35);
  --green-strong:rgba(105,206,49,.65);
  --border:rgba(255,255,255,.045);
  --font:"Chakra Petch", ui-monospace, monospace;
  --fs:17.4px;
  --max:1180px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:var(--font);
  font-size:var(--fs);
  line-height:1.6;
  color:var(--text);
  background:
    radial-gradient(1200px 800px at 20% -10%, rgba(105,206,49,.12) 0%, rgba(105,206,49,0) 60%),
    radial-gradient(1200px 800px at 110% 110%, rgba(105,206,49,.07) 0%, rgba(105,206,49,0) 60%),
    linear-gradient(#0a0a0b, #0b0c0d);
}
body::after{
  content:"";
  position:fixed; inset:0;
  background:linear-gradient(rgba(255,255,255,.012),rgba(255,255,255,0) 2px);
  background-size:100% 3px;
  mix-blend-mode:overlay; pointer-events:none; z-index:0;
}

/* ===== Preloader ===== */
#preloader{position:fixed; inset:0; background:#000; display:grid; place-items:center; z-index:999}
#preloader::before{
  content:""; position:absolute; inset:-35%;
  background:conic-gradient(from 0deg, rgba(105,206,49,.03), rgba(105,206,49,.25), rgba(0,0,0,0), rgba(105,206,49,.15), rgba(0,0,0,0));
  filter:blur(44px); animation:spin 6s linear infinite;
}
.pre-box{
  width:min(95%,520px);
  background:rgba(12,14,12,.6);
  border:1px solid var(--green-mid);
  padding:1.2rem 1.4rem 1rem;
  position:relative; z-index:2
}
.pre-title{font-weight:700; letter-spacing:.05em; margin:0 0 .6rem}
.pre-code{
  font-size:.86rem; color:#d9e6d7; white-space:pre; line-height:1.25;
  background:rgba(0,0,0,.45); border:1px solid rgba(255,255,255,.08);
  padding:.65rem .8rem .55rem;
}
.pre-progress{height:4px; background:rgba(255,255,255,.05); margin-top:.8rem; overflow:hidden; position:relative}
.pre-progress::after{
  content:""; position:absolute; top:0; left:-30%; height:100%; width:28%;
  background:linear-gradient(90deg, rgba(105,206,49,0) 0%, rgba(105,206,49,1) 100%);
  animation:bar 1.6s ease-in-out infinite;
}
#preloader.fade-out{opacity:0; transition:opacity .5s ease; pointer-events:none}
@keyframes bar{0%{left:-30%; width:24%}50%{left:40%; width:48%}100%{left:110%; width:22%}}
@keyframes spin{to{transform:rotate(360deg)}}

/* ===== Layout ===== */
.app-shell{display:flex; min-height:100vh; position:relative; z-index:1}
.dock{width:60px; background:var(--dock); border-right:1px solid rgba(255,255,255,.06); display:flex; flex-direction:column; justify-content:space-between; padding:.6rem .4rem}
.dock-logo{width:42px;height:42px;background:var(--green);display:grid;place-items:center;margin:0 auto .8rem;border:1px solid rgba(0,0,0,.4)}
.dock-logo img{width:22px;height:22px}
/* ICONS GRÜN */
.dock-btn img,
.nav-link img,
.icon-square img,
#music-ping img{
  width:18px;
  height:18px;
  filter: invert(69%) sepia(54%) saturate(626%) hue-rotate(60deg) brightness(98%) contrast(96%);
}
.dock-btn{width:44px;height:44px;border:1px solid transparent;background:transparent;display:grid;place-items:center;margin:.25rem auto;cursor:pointer;transition:.12s}
.dock-btn.active,.dock-btn:hover{border-color:var(--green-strong);background:var(--green-soft);transform:translateY(-1px)}
.dock-bottom{text-align:center;font-size:.78rem;color:#95a195}.status-dot{width:10px;height:10px;background:var(--green);display:inline-block;margin-bottom:.3rem}

.page-wrap{display:flex; flex:1; min-height:100vh}
.sidebar{
  width:260px;
  background:var(--sidebar);
  border-right:1px solid rgba(255,255,255,.06);
  padding:1.1rem 1.05rem .7rem;
  font-family:var(--font); /* selbe Schrift */
}
.sidebar h1{font-size:1.7rem;margin:0 0 .25rem}
.muted{color:var(--muted);font-size:.88rem}
.cap{margin-top:1rem;margin-bottom:.55rem;text-transform:uppercase;font-size:.72rem;color:#8aa085;letter-spacing:.06em}
.side-nav{display:flex;flex-direction:column;gap:.38rem}
.nav-link{
  background:transparent;
  border:1px solid rgba(255,255,255,.06);
  display:flex;
  align-items:center;
  gap:.6rem;
  padding:.58rem .6rem;
  color:#f9fff8;
  font-size:1rem;
  cursor:pointer;
  transition:.08s;
  font-family:var(--font);
}
.nav-link.active,.nav-link:hover{background:var(--green-soft);border-color:var(--green-strong)}

.content{flex:1;max-height:100vh;overflow-y:auto;display:flex;justify-content:center;background:transparent}
.content::-webkit-scrollbar{width:8px}.content::-webkit-scrollbar-thumb{background:rgba(255,255,255,.08)}

.panel{
  width:min(100%,var(--max));
  background:var(--panel);
  border:1px solid rgba(105,206,49,.15);
  padding:1.1rem;
  margin:.95rem 1rem .5rem;
  display:none;
  opacity:0;
  transform:translateY(6px);
  transition:opacity .14s, transform .14s;
}
.panel.show{display:block;opacity:1;transform:translateY(0)}
.panel-head{display:flex;gap:.6rem;align-items:center;margin-bottom:.7rem}
.panel-head h2{font-size:1.4rem;margin:0}
.panel-head .sub{font-size:.9rem;color:#d0dacd;margin:.15rem 0 0}
.icon-square{width:32px;height:32px;border:1px solid var(--green-strong);background:var(--green-soft);display:grid;place-items:center}

.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:.65rem}
.ooc-grid{margin-bottom:.65rem} /* dichter an Text */

.card{background:rgba(8,9,9,.25);border:1px solid rgba(105,206,49,.12);padding:.7rem .7rem .6rem;min-height:76px;transition:.08s}
.card:hover{border-color:var(--green-strong)}
.label{font-size:.9rem;color:#d7e6d6}
.val{font-size:1.15rem;margin-top:.25rem}
.card.tall{min-height:0}
.card p{margin-top:.2rem}
.card ul{margin:.5rem 0 0 1.1rem;font-size:1rem;color:#f1fff2}

/* outcomes */
.out-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:.6rem}
.out{background:rgba(7,8,8,.3);border:1px solid rgba(105,206,49,.12);padding:.65rem .7rem .7rem;transition:.08s}
.out:hover{border-color:var(--green-strong);transform:translateY(-1px)}
.out h3{font-size:1.02rem;margin:0 0 .35rem}
.out p{font-size:1rem;margin:0;color:#e9f7ea}

/* bullet holes */
#bg-holes{position:fixed; inset:0; pointer-events:none; z-index:0}
#bg-holes img{position:absolute; width:38px; opacity:.25; filter:grayscale(100%) contrast(120%); animation:holeFlicker 6s ease-in-out infinite alternate}
@keyframes holeFlicker{0%{opacity:.16; transform:scale(1)}100%{opacity:.32; transform:scale(1.03)}}

/* Musikpanel */
#music-panel{
  position:fixed;
  right:1rem;
  bottom:1rem;
  background:#0e0f11;
  border:1px solid var(--green-strong);
  width:280px;
  padding:.6rem .7rem .7rem;
  z-index:50;
  display:block;
}
#music-panel .music-row{display:flex; align-items:center; gap:.55rem; margin-bottom:.35rem}
.music-title{font-weight:700; letter-spacing:.04em}
.eq{display:inline-flex; gap:3px; height:14px}
.eq span{width:3px; background:var(--green); display:block; animation:barBeat 1s ease-in-out infinite; box-shadow:0 0 8px rgba(105,206,49,.4)}
.eq span:nth-child(2){animation-delay:.12s}.eq span:nth-child(3){animation-delay:.24s}.eq span:nth-child(4){animation-delay:.36s}
@keyframes barBeat{0%{height:4px}50%{height:14px}100%{height:6px}}
.music-controls{display:flex; gap:.4rem; align-items:center}
.music-controls button{background:#121416; border:1px solid var(--green-strong); width:42px; height:34px; color:#fff; cursor:pointer}
.vol-display{margin-left:auto; font-size:.9rem}
.hint{margin-top:.35rem; font-size:.88rem; color:#dbe7d8; opacity:.95}
/* aufmerksamkeit */
#music-ping{
  position:fixed;
  right:1rem;
  bottom:5.6rem;
  background:#0e0f11;
  border:1px solid var(--green-strong);
  color:#fff;
  display:flex;
  gap:.45rem;
  align-items:center;
  padding:.38rem .65rem;
  font-size:.92rem;
  z-index:49;
  animation:pulse 1.6s ease-in-out infinite;
  cursor:pointer;
}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(105,206,49,.45)}100%{box-shadow:0 0 0 14px rgba(105,206,49,0)}}

@media (max-width:1000px){
  .sidebar{display:none}
  .panel{width:calc(100% - 1.6rem)}
}