:root{
  --bg: #0f172a;
  --card: #111827;
  --text: #e5e7eb;
  --muted: #9ca3af;

  --green: #4ade80;
  --green-bg: rgba(74,222,128,.16);

  --red: #fb7185;
  --red-bg: rgba(251,113,133,.18);

  --border: rgba(148,163,184,.18);
}

*{ box-sizing:border-box; }

html,body{
  margin:0;
  padding:0;
  background:linear-gradient(180deg,#020617,#0b1220);
  color:var(--text);
  font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
}

/* Layout */
.container{
  max-width:920px;
  margin:0 auto;
  padding:14px;
}

.header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:12px;
}

.brand{
  font-size:20px;
  font-weight:700;
}

.card{
  background:linear-gradient(180deg,#0b1220,#070d19);
  border:1px solid var(--border);
  border-radius:16px;
  padding:14px;
}

.hr{
  height:1px;
  background:var(--border);
  margin:12px 0;
}

.row{
  display:flex;
  gap:14px;
  flex-wrap:wrap;
}

.col{
  flex:1 1 260px;
}

/* Text helpers */
.help{
  color:var(--muted);
  font-size:13px;
}

.notice{
  border:1px dashed var(--border);
  border-radius:12px;
  padding:10px;
  font-size:14px;
}

.idline{
  display:flex;
  gap:8px;
  align-items:center;
}

.idlabel{
  color:var(--muted);
  font-size:14px;
}

.idcode{
  font-family:monospace;
  font-weight:700;
  letter-spacing:.05em;
}

/* Buttons */
.btn{
  background:#020617;
  border:1px solid var(--border);
  color:var(--text);
  border-radius:12px;
  padding:10px 14px;
  cursor:pointer;
  font-size:15px;
}

.btn:hover{ background:#020617; }

.btn.primary{
  background:linear-gradient(180deg,#2563eb,#1d4ed8);
  border-color:#1e40af;
}

.btn.ok{
  background:linear-gradient(180deg,#16a34a,#15803d);
  border-color:#14532d;
}

.btn.wide{ width:100%; }

.actionstack{
  display:flex;
  flex-direction:column;
  gap:8px;
}

/* Pills / badges */
.pill{
  display:inline-block;
  padding:6px 10px;
  border-radius:999px;
  background:#020617;
  border:1px solid var(--border);
  font-size:13px;
  white-space:nowrap;
}

.badge{
  display:inline-block;
  padding:6px 10px;
  border-radius:10px;
  font-size:14px;
  font-weight:600;
}

.badge.ok{
  background:var(--green-bg);
  color:var(--green);
}

.badge.bad{
  background:var(--red-bg);
  color:var(--red);
}

/* Tabs */
.tabs{
  display:flex;
  gap:8px;
  align-items:center;
  margin:14px 0 8px;
}

.tab{
  background:#020617;
  border:1px solid var(--border);
  color:var(--text);
  border-radius:999px;
  padding:8px 14px;
  cursor:pointer;
}

.tab.active{
  background:#1e293b;
}

/* Inputs */
.input{
  width:100%;
  background:#020617;
  border:1px solid var(--border);
  border-radius:12px;
  padding:10px 12px;
  color:var(--text);
  font-size:15px;
}

/* KPI */
.kpi{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

/* Grid */
.grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(56px,1fr));
  gap:8px;
}

.st{
  border-radius:12px;
  padding:10px 4px;
  text-align:center;
  cursor:pointer;
  user-select:none;
  border:1px solid var(--border);
  transition:transform .05s ease;
}

.st:active{
  transform:scale(.97);
}

.st .n{
  font-weight:600;
  font-size:15px;
}

/* === STATES === */

/* FEHLT */
.st.miss{
  background:var(--red-bg);
  border-color:var(--red);
  color:var(--red);
}

/* VORHANDEN (1x UND mehrfach) */
.st.have,
.st.both{
  background:var(--green-bg);
  border-color:var(--green);
  color:var(--green);
}

/* mehrfach: Nummer + Badge etwas kräftiger */
.st.both .n{
  font-weight:700;
}

.st.both div:last-child{
  font-weight:700;
}

/* Toolbar */
.toolbar{
  position:sticky;
  bottom:0;
  background:linear-gradient(180deg,rgba(2,6,23,.0),rgba(2,6,23,.9));
  padding:12px 0 4px;
}

.bar{
  display:flex;
  gap:10px;
  align-items:center;
}

/* Trade */
.listbox{
  min-height:44px;
}

/* Zustand: vorhanden (1x) und mehrfach (2-5) sollen gleich "vorhanden" aussehen */
.st.have,
.st.both{
  border-color: var(--green);
  background: var(--green-bg);
  color: var(--green);
}

/* Optional: mehrfach etwas kräftiger (nur Typo/Badge), ohne Farben zu ändern */
.st.both .n{
  font-weight: 700;
}
.st.both div:last-child{
  font-weight: 700;
}

/* Desktop: Light-Theme (Mobile bleibt Dark) */
@media (min-width: 900px) and (pointer: fine) {
  :root{
    --bg: #f6f7fb;
    --card: #ffffff;
    --text: #111827;
    --muted: #4b5563;

    --border: rgba(17,24,39,.14);

    --green: #16a34a;
    --green-bg: rgba(22,163,74,.12);

    --red: #e11d48;
    --red-bg: rgba(225,29,72,.10);
  }

  html, body{
    background: var(--bg);
  }

  .card{
    background: var(--card);
    box-shadow: 0 8px 22px rgba(17,24,39,.06);
  }

  .btn{
    background: #ffffff;
  }

  .pill, .tab, .input{
    background: #ffffff;
  }
    /* Active Tabs im Light-Theme: lesbar */
  .tab.active{
    background: #e5e7eb;
    color: #111827;
    border-color: rgba(17,24,39,.25);
  }
  /* Hover-Fix für Light-Theme */
  .btn:hover,
  .tab:hover{
    background: rgba(0,0,0,.04);
  }
  
    .btn.primary{
    background: #e5e7eb;
    border-color: rgba(17,24,39,.25);
    color: #111827;
  }
  .btn.primary:hover{
    background: rgba(0,0,0,.06);
  }

}