:root{
      --bg:#0b0f14; --panel:#0f1622aa; --panel-solid:#101827; --muted:#9aa3b2; --text:#e6edf6; --brand:#7c3aed; --brand-2:#06b6d4; --good:#22c55e; --bad:#ef4444; --warn:#f59e0b;
      --glass: 12px; --radius: 16px; --shadow: 0 10px 30px rgba(0,0,0,.35);
    }
    *{box-sizing:border-box}
    html,body{height:100%;}
    body{margin:0; font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Inter, "Helvetica Neue", Arial; background: radial-gradient(1200px 600px at 70% -20%, #1b1f2a 0%, transparent 50%), radial-gradient(1000px 800px at -10% 110%, #101827 0%, transparent 60%), var(--bg); color:var(--text);}
    .app{display:grid; grid-template-columns: 320px 1fr 380px; gap:16px; padding:18px; max-width:1440px; margin:0 auto;}
    @media (max-width:1200px){.app{grid-template-columns: 1fr;}}
    header{
      backdrop-filter: blur(var(--glass)); z-index: 9; grid-column: 1 / -1; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px 18px; background:linear-gradient(135deg, #0f172a98, #11182791); border:1px solid #1f2937; border-radius:18px; box-shadow:var(--shadow);
    }
    .brand{display:flex; align-items:center; gap:12px;}
    .logo{width:36px; height:36px; display:grid; place-items:center; border-radius:10px; background: conic-gradient(from 210deg, var(--brand), var(--brand-2)); filter: drop-shadow(0 6px 14px rgba(124, 58, 237,.35));}
    .logo svg{mix-blend-mode:screen}
    .faviconLogo {border-radius: 5px;}
    h1{font-size: clamp(18px, 2.2vw, 24px); margin:0; letter-spacing:.3px}
    .sub{color:var(--muted); font-size:12px}
    .controls{display:flex; gap:8px; flex-wrap:wrap}
    button{position:relative; border:0; padding:10px 14px; border-radius:12px; background:linear-gradient(180deg,#1a2234,#141a28); color:#e9eef7; border:1px solid #2a3447; cursor:pointer; font-weight:600; letter-spacing:.2px; transition:transform .08s ease, box-shadow .2s ease, border-color .2s ease; box-shadow: 0 6px 16px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.05);}
    button:hover{transform: translateY(-1px); box-shadow:0 10px 26px rgba(0,0,0,.35);} button:active{transform: translateY(0)}
    .brand-btn{background:linear-gradient(135deg, rgba(124,58,237,.35), rgba(6,182,212,.25)); border-color:#3a3f58}
    .good{border-color:#204c34}
    .warn{border-color:#b32f2f}
    .import{border-color:#2f6db3}
    .export{border-color:#59b32f}

    .card{background: linear-gradient(180deg, rgba(16, 24, 39, .8), rgba(13,18,30,.75)); border:1px solid #1f2937; border-radius: var(--radius); padding:14px; box-shadow:var(--shadow); backdrop-filter: blur(var(--glass));}
    .title{display:flex; align-items:center; justify-content:space-between; margin-bottom:8px}
    .title h2{margin:0; font-size:15px; letter-spacing:.3px}
    .kpis{display:grid; grid-template-columns: repeat(3, 1fr); gap:8px}
    .kpi{padding:10px; border-radius:12px; background:linear-gradient(180deg,#0e1523,#0c1320); border:1px solid #1d2636}
    .kpi .v {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 2px;
      font-size: 1.05em;
      font-weight: 700;
      white-space: nowrap;
    }
    .kpi .v i.fa-coins { color: #FFD700; font-size: 1.35em; }
    .kpi .v i.fa-bolt { color: #38BDF8; font-size: 1.35em; }
    .kpi .v i.fa-gem { color: #A78BFA; font-size: 1.35em; }
    .kpi .v span { margin-top: 2px; font-size: 0.98em; word-break: break-all; }
    .kpi .l { text-align: center; font-size: 0.98em; }
    @media (max-width: 600px) {
      .kpi .v { font-size: 0.95em; }
      .kpi .v i { font-size: 1.1em !important; }
      .kpi .v span { font-size: 0.92em; }
    }

    /* Left column */
    .producers{display:grid; gap:10px}
    .producer {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 8px;
      padding: 16px 14px 14px 14px;
      border-radius: 14px;
      background: linear-gradient(180deg,#0f1625,#0c1320);
      border: 1px solid #1b2433;
      margin-bottom: 8px;
    }
    .producer .info {
      width: 100%;
      margin-bottom: 4px;
    }
    .producer .name i.fa-coins { color: #FFD700; }
    .producer .name i.fa-bolt { color: #38BDF8; }
    .producer .name i.fa-gem { color: #A78BFA; }
    .producer .name {
      font-weight: 700;
      margin-bottom: 2px;
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 1.1em;
    }
    .producer .desc {
      color: var(--muted);
      font-size: 13px;
      margin-bottom: 2px;
    }
    .producer .meta {
      font-size: 12px;
      color: var(--muted);
      margin-bottom: 8px;
    }
    .producer button {
      align-self: stretch;
      margin-top: 6px;
      font-size: 1em;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      padding: 12px 0;
      background: linear-gradient(180deg,#1a2234,#141a28);
      border-radius: 10px;
      border: 1px solid #2a3447;
      font-weight: 700;
      transition: background 0.2s;
    }
    .producer button i.fa-coins { color: #FFD700; }
    .producer button i.fa-bolt { color: #38BDF8; }
    .producer button i.fa-gem { color: #A78BFA; }
    .producer button:hover { background: #232c44; }

    /* Center column: 3D Scene */
    .scene-wrap{position:relative; height:520px; perspective: 1000px;}
    .scene{position:absolute; inset:0; transform-style:preserve-3d;}
    .island{position:absolute; left:50%; top:65%; transform-style:preserve-3d; transform: translate(-50%,-50%) rotateX(15deg) rotateZ(0deg);} 
    .cube{position:absolute; transform-style:preserve-3d;}
    .cube .face{position:absolute; width:120px; height:120px; background:linear-gradient(180deg,#182235,#0e1626); border:1px solid #1e2a40; box-shadow: inset 0 0 20px rgba(0,0,0,.35)}
    .cube .top{transform: rotateX(90deg) translateZ(60px); background:linear-gradient(180deg,#1b2540,#223257)}
    .cube .bottom{transform: rotateX(-90deg) translateZ(60px);} .cube .front{transform: translateZ(60px)}
    .cube .back{transform: rotateY(180deg) translateZ(60px)} .cube .left{transform: rotateY(-90deg) translateZ(60px)} .cube .right{transform: rotateY(90deg) translateZ(60px)}
    .glow{position:absolute; inset:-30px; background: radial-gradient(120px 80px at 50% 110%, rgba(124,58,237,.35), transparent 60%); filter: blur(20px); transform: translateZ(40px)}
    .node{position:absolute; width:22px; height:22px; border-radius:8px; background: radial-gradient(circle at 30% 30%, #c4b5fd, #7c3aed 70%); box-shadow:0 0 18px rgba(124,58,237,.7), inset 0 2px 4px rgba(0,0,0,.5);} 

    /* Right column */
    .tabs{display:flex; gap:8px; margin-bottom:8px}
    .tab{padding:8px 10px; border-radius:9px; cursor:pointer; font-weight:700; color:var(--muted); border:1px solid #263045}
    .tab.active{color:var(--text); background:linear-gradient(180deg,#0e1523,#0c1320)}
    .panel{display:none}
    .panel.active{display:block}
    .panel#panel-docs {
      max-height: 70vh;
      overflow-y: auto;
      position: sticky;
      top: 18px;
    }

    .list{display:grid; gap:8px}
    .row{display:flex; justify-content:space-between; align-items:center; padding:10px; border-radius:12px; border:1px solid #1c2536; background:linear-gradient(180deg,#111a2b,#0e1626)}
    .row small{color:var(--muted)}
    .grow{flex:1}
    .cost{font-weight:700}

    .footer{grid-column:1/-1; text-align:center; color:var(--muted); font-size:12px; padding:10px}
    .pill{display:inline-flex; align-items:center; gap:6px; padding:6px 10px; border-radius:999px; background:rgba(124,58,237,.1); border:1px solid #2d1b69}

    .toast{position:fixed; left:50%; bottom:16px; transform:translateX(-50%); background:#101826; border:1px solid #243049; padding:10px 12px; border-radius:12px; box-shadow:var(--shadow); display:none}

    .hint{color:var(--muted); font-size:12px}
    a{color:#a78bfa}
    .docs{line-height:1.55}
    .docs h3{margin:6px 0 4px 0; font-size:14px}
    .docs p, .docs li{font-size:13px; color:var(--muted)}
    .kbd{font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size:12px; padding:2px 6px; border:1px solid #334155; border-radius:6px; background:#0b1220}
    /* Upgrades-Liste schöner */
    .row.upgrade-row {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 6px;
      padding: 16px 14px 14px 14px;
      border-radius: 14px;
      background: linear-gradient(180deg,#101827,#181f2e);
      border: 1.5px solid #232b3a;
      margin-bottom: 12px;
      box-shadow: 0 2px 8px rgba(16,24,39,0.08);
    }
    .upgrade-row .grow {
      width: 100%;
    }
    .upgrade-row .upgrade-title {
      font-size: 1.13em;
      font-weight: 700;
      display: flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 2px;
    }
    .upgrade-row .upgrade-title i { font-size: 1.2em; }
    .upgrade-row .upgrade-desc {
      color: var(--muted);
      font-size: 13px;
      margin-bottom: 2px;
    }
    .upgrade-row .cost-pill {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      background: #181f2e;
      border: 1.5px solid #232b3a;
      border-radius: 999px;
      padding: 4px 12px;
      font-size: 1em;
      font-weight: 700;
      color: #FFD700;
      margin-bottom: 6px;
    }
    .upgrade-row .cost-pill i.fa-coins { color: #FFD700; }
    .upgrade-row .cost-pill i.fa-bolt { color: #38BDF8; }
    .upgrade-row .cost-pill i.fa-gem { color: #A78BFA; }
    .upgrade-row button {
      align-self: flex-end;
      padding: 10px 22px;
      border-radius: 10px;
      background: linear-gradient(90deg,#7c3aed 0%,#38bdf8 100%);
      color: #fff;
      font-weight: 700;
      font-size: 1em;
      border: none;
      box-shadow: 0 2px 8px rgba(124,58,237,0.08);
      display: flex;
      align-items: center;
      gap: 8px;
      cursor: pointer;
      transition: background 0.2s, transform 0.1s;
    }
    .upgrade-row button:hover {
      background: linear-gradient(90deg,#38bdf8 0%,#7c3aed 100%);
      transform: translateY(-2px) scale(1.04);
    }
    /* Docs-Overlay */
    #docsOverlay {
      display: none;
      position: fixed;
      top: 0; left: 0; right: 0; bottom: 0;
      background: rgba(16,24,39,0.92);
      z-index: 1000;
      align-items: center;
      justify-content: center;
    }
    #docsOverlay.active { display: flex; }
    #docsOverlay .docs-modal {
      background: #181f2e;
      border-radius: 18px;
      max-width: 540px;
      width: 95vw;
      max-height: 80vh;
      overflow-y: auto;
      box-shadow: 0 8px 32px rgba(16,24,39,0.25);
      padding: 32px 28px 24px 28px;
      position: relative;
      color: var(--text);
      animation: fadeIn .3s;
    }
    #docsOverlay .close-btn {
      position: absolute;
      top: 16px;
      right: 18px;
      background: none;
      border: none;
      color: #fff;
      font-size: 1.5em;
      cursor: pointer;
      opacity: 0.7;
      transition: opacity 0.2s;
    }
    #docsOverlay .close-btn:hover { opacity: 1; }
    @keyframes fadeIn { from { opacity: 0; transform: scale(0.97);} to { opacity: 1; transform: scale(1);} }

    /* --- Scrollbars für alle Listen --- */
    #achievements.custom-scroll,
    #prestigeUpgrades.custom-scroll,
    #log.custom-scroll {
      max-height: 520px;
      border-radius: 5px;
      overflow-y: auto;
      padding-right: 4px;
    }
    #upgrades.custom-scroll {
      max-height: 735px;
      border-radius: 5px;
      overflow-y: auto;
      padding-right: 4px;
    }
    #upgrades.custom-scroll,
    #achievements.custom-scroll,
    #prestigeUpgrades.custom-scroll,
    #log.custom-scroll {
      scrollbar-width: thin;
      scrollbar-color: #7c3aed #181f2e;
    }
    #upgrades.custom-scroll::-webkit-scrollbar,
    #achievements.custom-scroll::-webkit-scrollbar,
    #prestigeUpgrades.custom-scroll::-webkit-scrollbar,
    #log.custom-scroll::-webkit-scrollbar {
      width: 8px;
      background: #181f2e;
      border-radius: 8px;
    }
    #upgrades.custom-scroll::-webkit-scrollbar-thumb,
    #achievements.custom-scroll::-webkit-scrollbar-thumb,
    #prestigeUpgrades.custom-scroll::-webkit-scrollbar-thumb,
    #log.custom-scroll::-webkit-scrollbar-thumb {
      background: linear-gradient(180deg,#7c3aed 0%,#38bdf8 100%);
      border-radius: 8px;
      min-height: 32px;
    }
    #upgrades.custom-scroll::-webkit-scrollbar-thumb:hover,
    #achievements.custom-scroll::-webkit-scrollbar-thumb:hover,
    #prestigeUpgrades.custom-scroll::-webkit-scrollbar-thumb:hover,
    #log.custom-scroll::-webkit-scrollbar-thumb:hover {
      background: linear-gradient(180deg,#38bdf8 0%,#7c3aed 100%);
    }
/* ------------------------------ */
    .row.upgrade-row {
      padding: 10px 10px 10px 12px;
      margin-bottom: 8px;
      font-size: 0.98em;
    }
    .upgrade-row .upgrade-title { font-size: 1em; }
    .upgrade-row .upgrade-desc { font-size: 12px; }
    .upgrade-row .cost-pill { font-size: 0.98em; padding: 3px 10px; margin-bottom: 2px; }
    /* Upgrade-Kaufen-Button wie Produktions-Kaufen-Button */
    .upgrade-row button {
      align-self: stretch;
      margin-top: 6px;
      font-size: 1em;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      padding: 12px 0;
      background: linear-gradient(180deg,#1a2234,#141a28);
      border-radius: 10px;
      border: 1px solid #2a3447;
      font-weight: 700;
      color: #e9eef7;
      box-shadow: 0 2px 8px rgba(16,24,39,0.08);
      cursor: pointer;
      transition: background 0.2s, transform 0.1s;
    }
    .upgrade-row button:hover { background: #232c44; transform: translateY(-2px) scale(1.04); }
    /* Docs-Overlay Custom Scrollbar */
    #docsOverlay .docs-modal {
      overflow-y: auto;
      max-height: 80vh;
    }
    #docsOverlay .docs-modal.custom-scroll {
      scrollbar-width: thin;
      scrollbar-color: #7c3aed #181f2e;
    }
    #docsOverlay .docs-modal.custom-scroll::-webkit-scrollbar {
      width: 8px;
      background: #181f2e;
      border-radius: 8px;
    }
    #docsOverlay .docs-modal.custom-scroll::-webkit-scrollbar-thumb {
      background: linear-gradient(180deg,#7c3aed 0%,#38bdf8 100%);
      border-radius: 8px;
      min-height: 32px;
    }
    #docsOverlay .docs-modal.custom-scroll::-webkit-scrollbar-thumb:hover {
      background: linear-gradient(180deg,#38bdf8 0%,#7c3aed 100%);
    }
    /* Footer entfernen */
    .footer { display: none !important; }