:root{
  --bg:#0b0f12;
  --panel:#0f1418;
  --glass: rgba(255,255,255,0.04);
  --muted:#8b96a8;
  --text:#e6edf3;
  --accent:#80df20;
  --accent-2:#a6ff4d;
  --danger:#ff4d4f;
  --ring: 0 0 0 4px rgba(128,223,32,0.25);
  --shadow: 0 10px 30px rgba(0,0,0,0.45);
}

/* RESET & BASE */
*{ box-sizing: border-box; }
html,body{ height:100%; background: radial-gradient(1600px 900px at 80% -10%, rgba(128,223,32,0.08), transparent 60%), var(--bg); color:var(--text); font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; }

/* Preloader (keine Änderung außer Kante eckig) */
#preloader{
  position: fixed; inset: 0; display:grid; place-items:center; background: radial-gradient(1200px 800px at 50% -10%, rgba(128,223,32,0.12), transparent 60%), #070b0e; z-index: 9999;
  animation: fadeBg 1.8s ease-in-out infinite alternate;
}
@keyframes fadeBg{ from{ filter: saturate(0.9) brightness(0.9);} to{ filter: saturate(1.1) brightness(1);} }
.pl-card{ background: linear-gradient(180deg, var(--glass), rgba(255,255,255,0.02)); border:1px solid rgba(255,255,255,0.08); padding:22px; min-width:320px; text-align:center; box-shadow: var(--shadow); position:relative; }
.pl-logo{ width:56px; height:56px; display:grid; place-items:center; background: linear-gradient(135deg, var(--accent), var(--accent-2)); color:#0a0; margin:0 auto 10px; animation: pulse 2.2s infinite ease-in-out; box-shadow: 0 0 24px rgba(128,223,32,0.35); }
.pl-card::before{ content:""; position:absolute; top:0; left:0; width:42px; height:3px; background: var(--accent); }
.pl-title{ font-weight:900; letter-spacing:.4px; }
.pl-sub{ color:var(--muted); font-size:12px; margin:4px 0 10px; }
.pl-bar{ height:10px; background:#0d1216; border:1px solid rgba(255,255,255,0.12); overflow:hidden; }
.pl-bar span{ display:block; height:100%; width:0%; background: linear-gradient(90deg, var(--accent), var(--accent-2)); box-shadow: 0 0 18px rgba(128,223,32,0.45) inset; animation: loadBar 2.4s ease-in-out infinite; }
@keyframes loadBar{ 0%{ width:10%; } 50%{ width:80%; } 100%{ width:20%; } }

.noise{ position:fixed; inset:0; pointer-events:none;
  background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="140" height="140"><filter id="n"><feTurbulence type="fractalNoise" baseFrequency="0.8" numOctaves="4" stitchTiles="stitch"/></filter><rect width="100%" height="100%" filter="url(%23n)" opacity="0.04"/></svg>');
  mix-blend-mode:soft-light;
}

.app-shell{ max-width: 1200px; margin: 28px auto; padding: 0 16px; }

/* Glass cards: square + accent bar */
.glass{ background: linear-gradient(180deg, var(--glass), rgba(255,255,255,0.02)); border:1px solid rgba(255,255,255,0.08); backdrop-filter: blur(8px); box-shadow: var(--shadow); position:relative; }
.glass::before{content:"";position:absolute;top:0;left:0;width:100%;height:3px;background:var(--accent);}

.app-header{ display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:20px; padding:14px 16px; }
.title{ display:flex; align-items:center; gap:10px; }
.logo-pulse{ width:44px; height:44px; display:grid; place-items:center; background: linear-gradient(135deg, var(--accent), var(--accent-2)); color:#0a0; animation: pulse 2.2s infinite ease-in-out; box-shadow: 0 0 24px rgba(128,223,32,0.35); }
@keyframes pulse{ 0%,100%{ transform: scale(1); } 50%{ transform: scale(1.06);} }
h1{ margin:0; font-size:22px; font-weight:900; letter-spacing:0.3px; }
h1 .thin{ font-weight:600; color:var(--muted); }
.links{ display:flex; gap:12px; }
.link{ text-decoration:none; color:var(--text); padding:10px 14px; border:1px solid rgba(255,255,255,0.1); transition:.2s ease; background:linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02)); }
.link:hover{ box-shadow: var(--ring); border-color: rgba(128,223,32,.6); }

.grid-2{ display:grid; grid-template-columns: 1.25fr 1fr; gap:18px; }
@media (max-width: 980px){ .grid-2{ grid-template-columns: 1fr; } }

.card{ padding:18px; }
.card h2{ margin:8px 0 12px 0; font-size:18px; font-weight:800; }

/* Fields */
.field{ display:flex; flex-direction:column; gap:8px; margin-bottom:14px; }
.row.between{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
.badge{ font-size:12px; background: rgba(128,223,32,0.1); padding:6px 8px; border:1px solid rgba(128,223,32,0.25); }
label{ font-weight:600; }

.input-prefix{ display:flex; align-items:center; background: var(--panel); padding:12px 14px; border:1px solid rgba(255,255,255,0.1); }
.input-prefix input{ flex:1; background:transparent; border:none; outline:none; color:var(--text); font-size:18px; letter-spacing:0.5px; }
.input-prefix .prefix{ color:var(--muted); margin-right:6px; font-size:18px; }

/* Segmented control — square */
.segment{ display:grid; grid-template-columns: repeat(3, 1fr); gap:10px; background:#0d1216; border:1px solid rgba(255,255,255,0.1); padding:6px; }
.seg{ padding:16px 12px; border:none; color:var(--text); background:transparent; cursor:pointer; transition:.18s ease; font-weight:800; letter-spacing:.2px; }
.seg:hover{ box-shadow: var(--ring); }
.seg.active{ background: linear-gradient(180deg, rgba(128,223,32,0.25), rgba(128,223,32,0.08)); border:1px solid rgba(128,223,32,0.45); }

/* Driftkit switch — square thumb */
.switch{ position:relative; display:inline-flex; align-items:center; gap:10px; }
.switch input{ display:none; }
.switch .slider{ position:relative; width:84px; height:36px; background:#0d1216; border:1px solid rgba(255,255,255,0.16); box-shadow: inset 0 0 12px rgba(0,0,0,0.5); transition:.2s ease; }
.switch .slider::after{ content:""; position:absolute; top:3px; left:4px; width:30px; height:30px; background:linear-gradient(135deg, var(--accent), var(--accent-2)); box-shadow: 0 6px 14px rgba(128,223,32,0.35); transition: transform .2s ease; }
.switch input:checked + .slider{ border-color: rgba(128,223,32,0.45); background: rgba(128,223,32,0.15); }
.switch input:checked + .slider::after{ transform: translateX(40px); }
.switch .switch-labels::after{ content: attr(data-off); color: var(--muted); font-size: 12px; margin-left: 8px; }
.switch input:checked ~ .switch-labels::after{ content: attr(data-on); color: var(--accent); text-shadow: 0 0 10px rgba(128,223,32,.4); }

/* Separator */
.divider{ height:1px; background: linear-gradient(90deg, rgba(128,223,32,0.5), transparent); margin:16px 0; }

/* Part cards — square + consistent images */
.grid-4{ display:grid; grid-template-columns: repeat(4, 1fr); gap:14px; }
@media (max-width: 980px){ .grid-4{ grid-template-columns: repeat(2, 1fr); } }

.eq-cards .part-card{ background:#0d1216; border:1px solid rgba(255,255,255,0.08); padding:12px; display:flex; flex-direction:column; align-items:center; gap:10px; transition:.2s ease; position:relative; }
.eq-cards .part-card::before{content:"";position:absolute;top:0;left:0;width:100%;height:3px;background:var(--accent);}
.eq-cards .part-card:hover{ transform: translateY(-2px); box-shadow: 0 8px 28px rgba(0,0,0,0.35); }
.imgwrap{ width:100%; height:140px; display:grid; place-items:center; background: #0a0f13; border:1px solid rgba(255,255,255,0.08); }
.imgwrap img{ width:100%; height:100%; object-fit:contain; }

.part-card h3{ margin:4px 0 0 0; font-size:16px; letter-spacing:.4px; font-weight:900; }

/* Dots — square */
.dots{ display:flex; gap:12px; margin:6px 0 2px; }
.dot{ width:22px; height:22px; background:#0b1014; border:1px solid rgba(255,255,255,0.35); cursor:pointer; transition: all .15s ease; box-shadow: inset 0 0 0 3px rgba(0,0,0,0.45); }
.dot.active{ background: linear-gradient(135deg, var(--accent), var(--accent-2)); border-color: rgba(128,223,32,0.85); box-shadow: 0 0 10px rgba(128,223,32,0.55); transform: translateY(-1px) scale(1.03); }
.dot:hover{ box-shadow: 0 0 0 4px rgba(128,223,32,0.25); }

.level-row{ display:flex; align-items:center; justify-content:space-between; width:100%; }
.level-readout{ font-size:12px; color:var(--muted); }
.level-readout span{ color: var(--accent); font-weight:900; text-shadow: 0 0 8px rgba(128,223,32,.35); }
.level-reset{ border:1px solid rgba(255,255,255,0.2); background:transparent; color:var(--text); padding:6px 10px; cursor:pointer; font-size:12px; }
.level-reset:hover{ box-shadow: var(--ring); border-color: rgba(128,223,32,.6); }

/* Summary */
.summary{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:8px; }
.summary li{ display:flex; justify-content:space-between; gap:8px; padding:10px 12px; background: #0c1216; border:1px dashed rgba(255,255,255,0.1); }
.summary .muted-line{ color:var(--muted); background: transparent; border-style: dotted; }
.rule{ height:1px; background: linear-gradient(90deg, transparent, rgba(128,223,32,.6), transparent); margin:14px 0; }
.grand .row{ display:flex; justify-content:space-between; align-items:center; padding:10px; }
.grand .row.total{ background: linear-gradient(90deg, rgba(128,223,32,.12), rgba(128,223,32,.02)); border:1px solid rgba(128,223,32,.4); font-size:18px; font-weight:900; }
.glow strong{ text-shadow: 0 0 18px rgba(128,223,32,.45); }

.subcard{ margin-top:14px; padding:12px; position:relative; }
.subcard::before{ content:""; position:absolute; top:0; left:0; width:40px; height:3px; background: var(--accent); }
.subcard h3{ margin:0 0 8px 0; font-size:15px; }

.actions{ display:flex; justify-content:flex-end; margin-top:10px; }

/* Buttons */
.btn{ border:1px solid rgba(255,255,255,0.1); padding:10px 14px; background:linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02)); color:var(--text); cursor:pointer; transition: all .2s ease; }
.btn:hover{ transform: translateY(-1px); box-shadow: var(--ring); border-color: rgba(128,223,32,.6); }
.btn.danger{ border-color: rgba(255,77,79,.3); color:#ffd6d6; }
.btn.danger:hover{ box-shadow: 0 0 0 3px rgba(255,77,79,.2); }

.app-footer{ display:flex; align-items:center; gap:6px; justify-content:center; margin-top:18px; color:var(--muted); font-size:12px; }
.app-footer a{ color: var(--text); text-decoration:none; border-bottom:1px dotted rgba(255,255,255,0.25); }
.app-footer a:hover{ color: var(--accent); }

/* Modal popup */
.modal{ position:fixed; inset:0; display:none; place-items:center; background:rgba(0,0,0,.6); z-index:10000; }
.modal.open{ display:grid; }
.modal-card{ width:min(1000px,92vw); max-height:84vh; overflow:hidden; display:flex; flex-direction:column; background:#0d1216; border:1px solid rgba(255,255,255,.1); box-shadow: var(--shadow); position:relative; }
.modal-card::before{ content:""; position:absolute; top:0; left:0; width:100%; height:3px; background:var(--accent); }
.modal-head{ display:flex; align-items:center; justify-content:space-between; padding:12px 14px; gap:10px; border-bottom:1px solid rgba(255,255,255,.08); }
.modal-title{ font-weight:900; letter-spacing:.3px; }
.modal-actions{ display:flex; gap:8px; }
.modal-body{ padding:12px; display:flex; gap:12px; }
.modal-col{ flex:1; display:flex; flex-direction:column; gap:10px; }
.modal-grid{ border:1px solid rgba(255,255,255,.08); overflow:auto; max-height:58vh; }
.table{ width:100%; border-collapse:collapse; }
.table th, .table td{ padding:10px 8px; border-bottom:1px solid rgba(255,255,255,.06); text-align:left; font-size:13px; }
.table tr:hover{ background:rgba(128,223,32,.08); cursor:pointer; }
.table thead th{ position:sticky; top:0; background:#0f151a; z-index:1; }

/* Search inputs */
.search-row{ display:grid; grid-template-columns: repeat(4,1fr); gap:8px; }
.search-row input{ background:#0f1418; color:var(--text); border:1px solid rgba(255,255,255,.1); padding:10px; }
.badge-logo{ width:28px; height:28px; display:grid; place-items:center; background:linear-gradient(135deg, var(--accent), var(--accent-2)); color:#081; font-weight:900; }
.toast{ position:fixed; bottom:18px; right:18px; background:#0d1216; border:1px solid rgba(255,255,255,.12); padding:10px 14px; display:none; }
.toast.show{ display:block; }

/* Custom scrollbars */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
::-webkit-scrollbar-track {
  background: #0c1014;
}
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #80df20, #a6ff4d);
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #a6ff4d, #b8ff70);
  box-shadow: 0 0 8px rgba(128,223,32,0.4);
}

/* Subtle scroll glow effect */
.modal-grid::before, .modal-grid::after {
  content:"";
  position:sticky;
  left:0;
  right:0;
  height:16px;
  pointer-events:none;
}
.modal-grid::before {
  top:0;
  background:linear-gradient(to bottom, rgba(128,223,32,0.1), transparent);
}
.modal-grid::after {
  bottom:0;
  background:linear-gradient(to top, rgba(128,223,32,0.1), transparent);
}

/* Make modal table denser */
.table th, .table td { padding:8px 6px; font-size:12px; }

/* Subtle import link */
.import-link {
  font-size: 12px;
  color: var(--muted);
  cursor: pointer;
  text-decoration: underline dotted rgba(128,223,32,0.4);
  transition: color .2s ease;
}
.import-link:hover { color: var(--accent); }

/* Reset button style */
.reset-btn {
  font-size: 12px;
  color: var(--muted);
  background: transparent;
  border: 1px solid rgba(255,255,255,0.1);
  padding: 6px 8px;
  margin-left: 6px;
  cursor: pointer;
}
.reset-btn:hover {
  border-color: rgba(128,223,32,0.5);
  color: var(--accent);
  box-shadow: 0 0 4px rgba(128,223,32,0.25);
}