:root{
  color-scheme:dark;
  --bg:#0d1117;--panel:#161b22;--line:#303846;--text:#f4f6f8;--muted:#9da9b8;
  --blue:#2a6bb7;--red:#b6303b;--orange:#c76a10;--green:#25864a;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text);font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif}
button,input,select{font:inherit}
button,.button{border:1px solid var(--line);background:#202735;color:var(--text);border-radius:8px;padding:9px 13px;text-decoration:none;cursor:pointer}
button:hover,.button:hover{filter:brightness(1.08)}
button.primary,.primary{background:#275f9f}
button.danger,.danger{background:#7f2730}
.hidden{display:none!important}
.muted{color:var(--muted)} .small{font-size:12px}
.error{background:#51252b;color:#ffd9dd;border:1px solid #7a3741;padding:10px;border-radius:8px}
.success{background:#173f2a;color:#c7f6d7;border:1px solid #286343;padding:10px;border-radius:8px}
.app{padding:18px;max-width:1500px;margin:auto}
header{display:flex;justify-content:space-between;gap:15px;align-items:center;margin-bottom:18px}
header h1{margin:0;font-size:25px;letter-spacing:.04em} header p{margin:3px 0 0;color:var(--muted)}
.topActions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.topActions form{margin:0}.identity{font-size:12px;color:#a9bdd1}
.panel{border:1px solid var(--line);background:var(--panel);border-radius:14px;overflow:hidden}
.titleRow{padding:17px 18px;display:flex;align-items:center;justify-content:space-between;gap:15px}
.eyebrow{font-size:10px;letter-spacing:.16em;color:#8eb4d8}.titleRow h2{margin:5px 0 0;font-size:18px}
.saveState{font-size:12px;color:#a8c4de}.saveState.saving{color:#e4c95f}.saveState.saved{color:#66d48c}.saveState.saveError{color:#ff7b85}
.tabs{display:flex;gap:8px;margin-bottom:10px;flex-wrap:wrap}.tabs button{font-weight:800;min-width:48px}.tabs button.active{background:#f1f3f6;color:#10151c}
.qualityLegend{display:flex;gap:8px;flex-wrap:wrap;padding:0 18px 14px}.qBadge{font-size:11px;padding:4px 7px;border-radius:999px;border:1px solid transparent}
.quality-good{background:rgba(31,143,78,.24)!important;border-color:rgba(67,203,119,.42)!important}
.quality-medium{background:rgba(139,123,36,.25)!important;border-color:rgba(220,198,70,.38)!important}
.quality-weak{background:rgba(166,94,29,.26)!important;border-color:rgba(232,134,55,.42)!important}
.quality-bad{background:rgba(146,45,55,.27)!important;border-color:rgba(229,77,91,.42)!important}
.tableWrap{overflow-x:auto;border-top:1px solid var(--line)}
table{border-collapse:collapse;min-width:1120px;width:100%}
th,td{border-right:1px solid var(--line);border-bottom:1px solid var(--line);padding:7px;text-align:center}
th{font-size:12px;background:#1d2430;white-space:nowrap} th:first-child,td:first-child{text-align:left}
.classRow td{font-weight:900;letter-spacing:.04em;padding:9px 12px}
.class-deff td,.memberGroup.class-deff .memberGroupHead{background:var(--blue)}
.class-aggro td,.memberGroup.class-aggro .memberGroupHead{background:var(--red)}
.class-kara td,.memberGroup.class-kara .memberGroupHead{background:var(--orange)}
.class-grower td,.memberGroup.class-grower .memberGroupHead{background:var(--green)}
.memberRow td{background:#171d25}.memberName{white-space:nowrap;font-weight:750;min-width:155px}
.memberDot{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:7px}
.class-dot-deff{background:#3f99f5}.class-dot-aggro{background:#ee5260}.class-dot-kara{background:#f58f28}.class-dot-grower{background:#35bd68}
.levelBadge,.maxBadge{display:inline-block;margin-left:5px;padding:2px 5px;border-radius:5px;background:#252d38;color:#aeb9c5;font-size:10px;font-weight:600}
.valueEditor,.valueDisplay,.handEditor,.handDisplay{min-width:64px;border:1px solid #34404e;border-radius:7px;background:#10151c}
.valueEditor,.valueDisplay{height:38px;display:flex;align-items:center;justify-content:center;gap:5px}
.valueEditor input{width:48px;border:0;background:transparent;color:white;text-align:center;font-weight:800;outline:none}
.qualityIcon{font-size:12px;font-weight:900}
.handEditor,.handDisplay{padding:4px;min-width:86px}
.bonusInputRow,.extraInputRow,.bonusLine,.extraLine{display:flex;align-items:center;justify-content:center;gap:4px}
.extraInputRow,.extraLine{margin-top:3px;border-top:1px solid rgba(255,255,255,.08);padding-top:3px;font-size:10px;color:#c1ccd6}
.handEditor input{border:0;background:transparent;color:#fff;text-align:center;outline:none;font-weight:800}
.handEditor .bonusInput{width:40px}.handEditor .extraInput{width:38px}
.emptyCategory{text-align:center!important;color:var(--muted);padding:30px!important}
.loginShell{min-height:100vh;display:grid;place-items:center;padding:20px}
.loginCard{width:min(420px,100%);background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:24px;display:grid;gap:14px}
.loginCard .logo{font-size:21px;font-weight:900;letter-spacing:.05em}.loginCard p{color:var(--muted);margin:0}
label{display:grid;gap:6px;font-size:13px}input,select{background:#0f141b;color:white;border:1px solid #364150;border-radius:7px;padding:9px}
.membersPanel{padding-bottom:14px}.memberGroups{padding:0 14px 14px;display:grid;gap:12px}
.memberGroup{border:1px solid var(--line);border-radius:10px;overflow:hidden}.memberGroupHead{padding:8px 11px;font-weight:900}
.memberCards{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:8px;padding:9px}
.memberCard{display:flex;flex-direction:column;align-items:flex-start;gap:3px;text-align:left;background:#131923}
.memberCardName{font-weight:800}.memberCardMeta,.memberCardAccount{font-size:11px;color:var(--muted)}
dialog{border:1px solid var(--line);border-radius:12px;background:#161b22;color:white;width:min(460px,calc(100vw - 28px))}
dialog::backdrop{background:rgba(0,0,0,.65)} dialog form{display:grid;gap:12px} dialog h3,dialog h4{margin:0}
.dialogButtons{display:flex;justify-content:flex-end;gap:8px}.formDivider{height:1px;background:var(--line);margin:4px 0}
.accountPanel{padding-bottom:20px}.profileForm{padding:0 18px 18px;display:grid;gap:18px}
.profileGrid{display:grid;grid-template-columns:minmax(160px,220px) minmax(160px,220px);gap:12px}
.maxBonusCard{border:1px solid var(--line);border-radius:10px;background:#111720;padding:10px 14px;display:flex;flex-direction:column;justify-content:center}
.maxBonusCard span,.maxBonusCard small{color:var(--muted);font-size:11px}.maxBonusCard strong{font-size:26px;margin:2px 0}
.categoryPicker h3{margin:0 0 4px}.categoryPicker p{margin:0 0 10px}
.categoryChecks{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:8px}
.categoryCheck{display:flex;align-items:center;gap:8px;background:#111720;border:1px solid var(--line);border-radius:9px;padding:9px;cursor:pointer}
.categoryCheck input{width:18px;height:18px}.categoryCheck span{display:flex;flex-direction:column}.categoryCheck small{color:var(--muted)}
.infoBox{margin:0 18px 18px;padding:12px;border:1px solid var(--line);border-radius:9px;color:var(--muted)}
@media(max-width:700px){
  .app{padding:10px}header{align-items:flex-start;flex-direction:column}.topActions{width:100%}
  .titleRow{padding:13px}.qualityLegend{padding:0 13px 12px}.profileGrid{grid-template-columns:1fr}
  th,td{padding:6px}.levelBadge,.maxBadge{display:none}
}


.luggageStack{
  display:grid;
  gap:3px;
  min-width:76px;
}
.luggageItem{
  min-height:28px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:4px;
  border:1px solid #34404e;
  border-radius:6px;
  background:#10151c;
  padding:2px 4px;
}
.luggageItem.valueEditor{
  height:28px;
}
.luggageItem .valueInput{
  width:38px;
}
.luggageNo{
  display:inline-grid;
  place-items:center;
  width:16px;
  height:16px;
  border-radius:4px;
  background:#252d38;
  color:#aeb9c5;
  font-size:9px;
  font-weight:800;
  flex:0 0 auto;
}


/* Mobile/Horizontal-Scroll: Mitgliedsspalte bleibt sichtbar */
.tableWrap thead th:first-child{
  position:sticky;
  left:0;
  z-index:5;
  background:#1d2430;
  min-width:155px;
  box-shadow:6px 0 10px rgba(0,0,0,.22);
}

.tableWrap .memberRow td:first-child{
  position:sticky;
  left:0;
  z-index:4;
  background:#171d25;
  min-width:155px;
  box-shadow:6px 0 10px rgba(0,0,0,.22);
}

/* Klassenbalken bleiben normal über die gesamte Tabellenbreite */
.tableWrap .classRow td:first-child{
  position:static;
  box-shadow:none;
}

@media(max-width:700px){
  .tableWrap thead th:first-child,
  .tableWrap .memberRow td:first-child{
    min-width:132px;
    max-width:132px;
  }

  .tableWrap .memberRow td:first-child{
    padding-left:8px;
    padding-right:8px;
  }

  .memberName{
    white-space:normal;
    line-height:1.15;
  }
}


/* Umschaltbare Desktop-/Hochkantansicht */
.viewSwitch{
  display:flex;
  gap:7px;
  margin:0 0 10px;
}
.viewSwitch button{
  font-size:12px;
  font-weight:800;
  padding:7px 10px;
}
.viewSwitch button.active{
  background:#f1f3f6;
  color:#10151c;
}

.portraitView{
  background:transparent;
}
.portraitMembers{
  display:grid;
  gap:10px;
}
.portraitEmpty{
  border:1px solid var(--line);
  border-radius:12px;
  background:var(--panel);
  color:var(--muted);
  padding:24px 15px;
  text-align:center;
}

.portraitCard{
  --member-class:#4b5563;
  border:1px solid var(--line);
  border-left:4px solid var(--member-class);
  border-radius:12px;
  overflow:hidden;
  background:var(--panel);
}
.portrait-deff{--member-class:var(--blue)}
.portrait-aggro{--member-class:var(--red)}
.portrait-kara{--member-class:var(--orange)}
.portrait-grower{--member-class:var(--green)}

.portraitCardHead{
  width:100%;
  border:0;
  border-radius:0;
  background:#171d25;
  padding:12px 13px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  text-align:left;
}
.portraitCardIdentity{
  display:flex;
  align-items:center;
  gap:9px;
  min-width:0;
}
.portraitCardIdentity strong{
  font-size:15px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.portraitClassBadge{
  font-size:9px;
  font-weight:900;
  letter-spacing:.05em;
  padding:3px 6px;
  border-radius:999px;
  background:var(--member-class);
  color:#fff;
}
.portraitChevron{
  font-size:11px;
  color:#aeb9c5;
}
.portraitCardBody{
  border-top:1px solid var(--line);
}
.portraitItemRow{
  min-height:45px;
  padding:6px 10px;
  display:grid;
  grid-template-columns:minmax(105px,1fr) minmax(112px,auto);
  align-items:center;
  gap:9px;
  border-bottom:1px solid rgba(255,255,255,.06);
}
.portraitItemRow:last-child{
  border-bottom:0;
}
.portraitItemLabel{
  font-size:12px;
  color:#cbd5df;
  font-weight:700;
}
.portraitValue,
.portraitEditor{
  min-height:32px;
  min-width:112px;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:5px;
  border:1px solid #34404e;
  border-radius:7px;
  background:#10151c;
  padding:4px 7px;
}
.portraitValue strong{
  min-width:25px;
  text-align:center;
}
.portraitEditor input{
  border:0;
  background:transparent;
  color:#fff;
  outline:none;
  padding:0;
  font-weight:800;
  text-align:center;
}
.portraitEditor .valueInput{
  width:39px;
}
.portraitExtraIcon{
  margin-left:5px;
}
.portraitExtraLabel{
  font-size:9px;
  color:#aeb9c5;
  font-weight:800;
}
.portraitEditor .portraitExtraInput{
  width:36px;
}
.portraitExtraValue{
  min-width:22px!important;
}
.portraitCard .qualityIcon{
  width:12px;
  text-align:center;
}

/* Die Tabelle bleibt für Desktop unverändert; auf kleinen Displays startet
   die App standardmäßig in der Hochkantansicht, kann aber umgeschaltet werden. */
@media(max-width:700px){
  .viewSwitch{
    position:sticky;
    top:0;
    z-index:20;
    padding:4px 0;
    background:var(--bg);
  }
  .viewSwitch button{
    flex:1;
  }
  .portraitMembers{
    gap:8px;
  }
  .portraitItemRow{
    grid-template-columns:minmax(96px,1fr) minmax(108px,auto);
  }
}


/* Bonus-Kategorie + Qualitätslegende auch in der Hochkantansicht */
.portraitContext{
  border:1px solid var(--line);
  border-radius:12px;
  background:var(--panel);
  margin-bottom:10px;
  overflow:hidden;
}
.portraitContextTop{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:13px 14px 8px;
}
.portraitContextTop h2{
  margin:4px 0 0;
  font-size:18px;
}
.portraitLegend{
  padding:4px 14px 13px;
}
.valueEditor input:focus,
.handEditor input:focus,
.portraitEditor input:focus{
  outline:2px solid rgba(142,180,216,.85);
  outline-offset:1px;
  border-radius:4px;
}
@media(max-width:700px){
  .portraitContextTop{padding:12px 12px 7px}
  .portraitLegend{padding:3px 12px 11px;gap:6px}
  .portraitLegend .qBadge{font-size:10px;padding:3px 6px}
}


/* Boss-Rolle */
.bossBadge{
  display:inline-block;
  margin-left:6px;
  padding:2px 6px;
  border-radius:999px;
  border:1px solid rgba(224,184,72,.45);
  background:rgba(184,137,24,.20);
  color:#f0cf68;
  font-size:9px;
  font-weight:900;
  letter-spacing:.04em;
  text-transform:uppercase;
}


/* Mini-Aufklapper pro Itemposition */
.portraitItemGroup{
  border-bottom:1px solid rgba(255,255,255,.06);
}
.portraitItemGroup:last-child{border-bottom:0}
.portraitItemGroup .portraitItemRow{border-bottom:0}

.portraitItemLabelWrap{
  display:flex;
  align-items:center;
  gap:6px;
  min-width:0;
}

.crossMiniToggle{
  width:22px;
  min-width:22px;
  height:22px;
  padding:0;
  display:inline-grid;
  place-items:center;
  border-radius:6px;
  border:1px solid #34404e;
  background:#111720;
  color:#aeb9c5;
  font-size:10px;
}

.crossMiniPanel{
  margin:0 10px 7px 38px;
  padding:5px;
  display:grid;
  gap:4px;
  border-left:2px solid rgba(142,180,216,.28);
  background:rgba(13,17,23,.48);
  border-radius:0 7px 7px 0;
}

.crossMiniRow{
  min-height:25px;
  display:flex;
  align-items:center;
  gap:7px;
  padding:3px 6px;
  border:1px solid #303846;
  border-radius:6px;
  background:#10151c;
  font-size:10px;
}

.crossMiniCategory{
  min-width:38px;
  font-weight:900;
  color:#b9c8d6;
}

.crossMiniBonus{
  display:flex;
  align-items:center;
  gap:4px;
  min-width:42px;
}

.crossMiniExtra{
  margin-left:auto;
  display:flex;
  align-items:center;
  gap:3px;
  color:#aeb9c5;
  font-size:9px;
}

@media(max-width:700px){
  .crossMiniPanel{
    margin-left:28px;
    margin-right:8px;
  }
  .crossMiniRow{
    min-height:23px;
    padding:2px 5px;
  }
}


/* Mini-Aufklapper kompakter / kürzer */
.crossMiniPanel{
  width:fit-content;
  min-width:132px;
  max-width:calc(100% - 48px);
}

.crossMiniRow{
  width:max-content;
  min-width:120px;
  max-width:100%;
}

.crossMiniCategory{
  min-width:30px;
}

.crossMiniBonus{
  min-width:36px;
}

@media(max-width:700px){
  .crossMiniPanel{
    min-width:124px;
    max-width:calc(100% - 36px);
  }
  .crossMiniRow{
    min-width:112px;
  }
}


/* SAUBERER HAND-FIX
   - normale Itemfelder kompakt
   - Hände = zwei echte getrennte Felder
   - keine CSS-Tricks / keine Zwischenkapsel */
@media(max-width:700px){

  /* Normale Itemfelder: deutlich kürzer */
  .portraitValue:not(.portraitHandValue),
  .portraitEditor:not(.portraitHandEditor){
    width:64px;
    min-width:64px;
    max-width:64px;
    min-height:32px;
    justify-content:center;
    padding:4px 5px;
    gap:4px;
    border-radius:12px;
  }

  .portraitValue:not(.portraitHandValue) strong{
    min-width:18px;
  }

  .portraitEditor:not(.portraitHandEditor) .valueInput{
    width:26px;
  }

  /* Äußerer Hand-Container hat selbst KEIN Feld */
  .portraitHandValue,
  .portraitHandEditor{
    min-width:0;
    width:auto;
    border:0 !important;
    background:transparent !important;
    padding:0 !important;
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:10px;
    overflow:visible;
  }

  /* Beide Handbereiche sind echte eigenständige Felder */
  .portraitHandValue .handExtraPill,
  .portraitHandEditor .handExtraPill,
  .portraitHandValue .handBonusPill,
  .portraitHandEditor .handBonusPill{
    min-height:36px;
    display:flex;
    align-items:center;
    justify-content:center;
    box-sizing:border-box;
    border:1px solid #34404e;
    border-radius:14px;
    background:#10151c;
  }

  /* Linkes Feld = DEF / ATK */
  .portraitHandValue .handExtraPill,
  .portraitHandEditor .handExtraPill{
    min-width:104px;
    padding:4px 9px;
    gap:5px;
  }

  /* Rechtes Feld = Bonus */
  .portraitHandValue .handBonusPill,
  .portraitHandEditor .handBonusPill{
    min-width:72px;
    padding:4px 8px;
    gap:5px;
  }

  .portraitHandValue .portraitExtraIcon,
  .portraitHandEditor .portraitExtraIcon{
    margin:0;
  }

  .portraitHandValue .portraitExtraLabel,
  .portraitHandEditor .portraitExtraLabel{
    font-size:9px;
    color:#c4ced8;
    font-weight:800;
  }

  .portraitHandEditor .portraitExtraInput{
    width:26px;
    padding:0;
    border:0;
    background:transparent;
    text-align:center;
    font-weight:800;
    color:#fff;
  }

  .portraitHandEditor .handBonusPill .valueInput{
    width:28px;
    padding:0;
    border:0;
    background:transparent;
    text-align:center;
    font-weight:800;
    color:#fff;
  }

  .portraitHandValue .portraitExtraValue{
    min-width:20px !important;
    text-align:center;
  }

  .portraitHandValue .handBonusPill strong{
    min-width:24px;
    text-align:center;
  }

  /* Beide getrennten Felder bekommen dieselbe Qualitätsfarbe wie der Bonus */
  .portraitHandValue.quality-good .handExtraPill,
  .portraitHandValue.quality-good .handBonusPill,
  .portraitHandEditor.quality-good .handExtraPill,
  .portraitHandEditor.quality-good .handBonusPill{
    background:rgba(31,143,78,.24);
    border-color:rgba(67,203,119,.42);
  }

  .portraitHandValue.quality-medium .handExtraPill,
  .portraitHandValue.quality-medium .handBonusPill,
  .portraitHandEditor.quality-medium .handExtraPill,
  .portraitHandEditor.quality-medium .handBonusPill{
    background:rgba(139,123,36,.25);
    border-color:rgba(220,198,70,.38);
  }

  .portraitHandValue.quality-weak .handExtraPill,
  .portraitHandValue.quality-weak .handBonusPill,
  .portraitHandEditor.quality-weak .handExtraPill,
  .portraitHandEditor.quality-weak .handBonusPill{
    background:rgba(166,94,29,.26);
    border-color:rgba(232,134,55,.42);
  }

  .portraitHandValue.quality-bad .handExtraPill,
  .portraitHandValue.quality-bad .handBonusPill,
  .portraitHandEditor.quality-bad .handExtraPill,
  .portraitHandEditor.quality-bad .handBonusPill{
    background:rgba(146,45,55,.27);
    border-color:rgba(229,77,91,.42);
  }
}