:root {
  --orange:#FF6B00; --orange-dim:#cc5500;
  --dark:#0a0a0a; --dark2:#111; --dark3:#1a1a1a;
  --grey:#2a2a2a; --grey2:#333; --grey-light:#555;
  --text:#e8e8e8; --text-dim:#aaa;
  --green:#4ade80; --red:#f87171; --blue:#60a5fa; --yellow:#facc15;
}
body.light {
  --dark:#f0f0f0; --dark2:#ffffff; --dark3:#e8e8e8;
  --grey:#cccccc; --grey2:#bbbbbb; --grey-light:#999;
  --text:#111111; --text-dim:#555555;
}
body.light .demo-header { background: rgba(240,240,240,0.97); }

.theme-toggle {
  background:var(--grey);border:1px solid var(--grey);border-radius:20px;
  width:44px;height:24px;position:relative;cursor:pointer;transition:background .3s;flex-shrink:0;
}
.theme-toggle::after {
  content:'';position:absolute;top:3px;left:3px;width:16px;height:16px;
  border-radius:50%;background:var(--orange);transition:transform .3s;
}
body.light .theme-toggle::after { transform:translateX(20px); }
.theme-toggle-wrap {
  display:flex;align-items:center;gap:.5rem;
  font-family:'Share Tech Mono',monospace;font-size:.6rem;color:var(--text-dim);letter-spacing:.1em;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
body{background:var(--dark);color:var(--text);font-family:'Rajdhani',sans-serif;font-weight:500;min-height:100vh}

/* ── HEADER ── */
.demo-header {
  background:var(--dark2);border-bottom:1px solid rgba(255,107,0,.25);
  padding:0 2rem;height:60px;display:flex;align-items:center;justify-content:space-between;
  position:sticky;top:0;z-index:100;
}
.demo-header-title{font-family:'Bebas Neue',sans-serif;font-size:1.4rem;letter-spacing:.08em;color:var(--orange)}
.demo-header-title span{color:var(--text)}
.demo-header-right{display:flex;align-items:center;gap:.6rem}
.user-badge{font-family:'Share Tech Mono',monospace;font-size:.65rem;color:var(--text-dim);letter-spacing:.1em;border:1px solid var(--grey);padding:.25rem .6rem}
.role-chip{font-family:'Share Tech Mono',monospace;font-size:.65rem;letter-spacing:.1em;padding:.2rem .5rem;text-transform:uppercase;font-weight:700}
.role-owner{background:var(--orange);color:#000}
.role-editor{background:var(--blue);color:#000}
.role-reporter{background:var(--green);color:#000}
.role-player{background:var(--yellow);color:#000}
.role-taktiker{background:#a855f7;color:#fff}

/* ── FORMS ── */
.form-group{margin-bottom:1.2rem}
label{display:block;font-family:'Share Tech Mono',monospace;font-size:.65rem;letter-spacing:.2em;color:var(--text-dim);text-transform:uppercase;margin-bottom:.4rem}
input[type=text],input[type=password],select,textarea{
  width:100%;background:var(--dark3);border:1px solid var(--grey);color:var(--text);
  font-family:'Rajdhani',sans-serif;font-size:.95rem;padding:.6rem .8rem;outline:none;
  transition:border-color .2s;appearance:none;
}
input:focus,select:focus,textarea:focus{border-color:var(--orange)}

/* ── BUTTONS ── */
.btn{display:inline-block;font-family:'Bebas Neue',sans-serif;font-size:1rem;letter-spacing:.12em;padding:.6rem 1.5rem;border:none;cursor:pointer;transition:opacity .2s,transform .15s;text-decoration:none}
.btn:hover{opacity:.85;transform:translateY(-1px)} .btn:active{transform:translateY(0)}
.btn-primary{background:var(--orange);color:#000}
.btn-danger{background:var(--red);color:#000}
.btn-ghost{background:transparent;border:1px solid var(--grey);color:var(--text)}
.btn-sm{font-size:.7rem;padding:.3rem .8rem}

/* ── CONTENT ── */
.demo-content{max-width:960px;margin:0 auto;padding:2.5rem 2rem}
.section-title{font-family:'Bebas Neue',sans-serif;font-size:1.8rem;letter-spacing:.08em;color:var(--text);margin-bottom:.3rem}
.section-sub{font-family:'Share Tech Mono',monospace;font-size:.65rem;color:var(--text-dim);letter-spacing:.15em;margin-bottom:2rem}

/* ── SETTINGS BOX ── */
.settings-box{background:var(--dark2);border:1px solid var(--grey);padding:1.5rem;max-width:600px}

/* ── UPLOAD ZONE ── */
.logo-upload-zone{border:1px dashed var(--grey2);padding:2rem;text-align:center;cursor:pointer;transition:border-color .2s;position:relative;margin-bottom:1rem}
.logo-upload-zone:hover{border-color:var(--orange)}
.logo-upload-zone input{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%}
.logo-upload-hint{font-family:'Share Tech Mono',monospace;font-size:.65rem;color:var(--text-dim);letter-spacing:.12em}

/* ── DEMO LIST ── */
.demo-item{background:var(--dark2);border:1px solid var(--grey);padding:1rem 1.2rem;margin-bottom:.6rem;display:flex;align-items:center;gap:1rem;flex-wrap:wrap}
.demo-item-name{font-family:'Bebas Neue',sans-serif;font-size:1.1rem;letter-spacing:.06em;flex:1}
.demo-item-meta{font-family:'Share Tech Mono',monospace;font-size:.65rem;color:var(--text-dim)}
.demo-analyzed{color:var(--green);font-family:'Share Tech Mono',monospace;font-size:.65rem}

/* ── RESULTS ── */
.result-header{background:var(--dark2);border:1px solid var(--grey);padding:1.2rem;margin-bottom:1.5rem;display:flex;align-items:center;gap:2rem;flex-wrap:wrap}
.result-score{font-family:'Bebas Neue',sans-serif;font-size:3rem;letter-spacing:.1em;line-height:1}
.result-map{font-family:'Share Tech Mono',monospace;font-size:.7rem;color:var(--text-dim);letter-spacing:.15em}
.result-team{font-size:.9rem;color:var(--text-dim)}
.round-chart-wrap{background:var(--dark2);border:1px solid var(--grey);margin-bottom:1.5rem;overflow:hidden}
.round-chart-wrap img{width:100%;display:block}
.stats-table{width:100%;border-collapse:collapse;margin-bottom:1.5rem;font-size:.88rem}
.stats-table th{text-align:left;font-family:'Share Tech Mono',monospace;font-size:.65rem;letter-spacing:.15em;color:var(--text-dim);text-transform:uppercase;padding:.5rem .8rem;border-bottom:1px solid var(--grey)}
.stats-table td{padding:.7rem .8rem;border-bottom:1px solid rgba(255,255,255,.04);vertical-align:middle}
.stats-table tr:hover td{background:rgba(255,107,0,.08)}
.stat-rating{font-family:'Bebas Neue',sans-serif;font-size:1.2rem;color:var(--orange)}
.heatmap-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:1.2rem;margin-bottom:1.5rem}
.heatmap-card{background:var(--dark2);border:1px solid var(--grey);overflow:hidden}
.heatmap-card img{width:100%;display:block}
.heatmap-label{font-family:'Bebas Neue',sans-serif;font-size:1rem;letter-spacing:.08em;padding:.6rem 1rem;border-top:1px solid var(--grey)}
.panel-sub{font-family:'Share Tech Mono',monospace;font-size:.65rem;color:var(--text-dim);letter-spacing:.15em;margin-bottom:.5rem}

.no-data{color:var(--text-dim);font-style:italic;font-size:.9rem;padding:1rem 0}

/* ── COLLAPSIBLE ── */
.collapse-header{
  display:flex;align-items:center;justify-content:space-between;
  cursor:pointer;user-select:none;padding:.5rem 0;
}
.collapse-header:hover .collapse-title{color:var(--orange)}
.collapse-chevron{
  font-size:.7rem;color:var(--text-dim);transition:transform .25s;flex-shrink:0;margin-left:.5rem;
}
.collapse-chevron.open{transform:rotate(180deg)}
.collapse-body{
  overflow:hidden;max-height:0;transition:max-height .35s ease,opacity .25s ease;opacity:0;
}
.collapse-body.open{max-height:9999px;opacity:1}
.result-collapse-header{
  background:var(--dark2);border:1px solid var(--grey);padding:1rem 1.2rem;
  display:flex;align-items:center;justify-content:space-between;cursor:pointer;
  user-select:none;margin-bottom:.3rem;
}
.result-collapse-header:hover{border-color:var(--orange)}
.result-collapse-inner{
  overflow:hidden;max-height:0;opacity:0;transition:max-height .4s ease,opacity .3s ease;
}
.result-collapse-inner.open{max-height:99999px;opacity:1}

/* ── TOAST ── */
#toast{position:fixed;bottom:2rem;right:2rem;font-family:'Share Tech Mono',monospace;font-size:.75rem;letter-spacing:.1em;padding:.8rem 1.2rem;z-index:9999;transform:translateY(100px);opacity:0;transition:all .3s}
#toast.show{transform:translateY(0);opacity:1}
#toast.ok{background:var(--green);color:#000}
#toast.err{background:var(--red);color:#000}