*{box-sizing:border-box}body{margin:0;font-family:Arial,sans-serif;background:#11151b;color:#eef2f7}a{color:#f3b35b;text-decoration:none}button,input,select{font:inherit}.center{min-height:100vh;display:grid;place-items:center;background:radial-gradient(circle at top,#283240,#0d1117)}.card{background:#171d25;border:1px solid #2a3543;border-radius:18px;box-shadow:0 20px 60px #0008}.login-card{width:min(430px,92vw);padding:30px}.login-card label{display:block;margin:16px 0}.login-card input,.grid-form input,.sendbar input,.sendbar select,.inline select{width:100%;padding:12px;border-radius:10px;border:1px solid #39485a;background:#0e141b;color:white;margin-top:6px}button{background:#d88b2e;color:#111;border:0;border-radius:10px;padding:11px 16px;font-weight:700;cursor:pointer}.error{background:#602b31;padding:10px;border-radius:8px}.topbar{height:58px;background:#171d25;border-bottom:1px solid #2a3543;display:flex;align-items:center;gap:20px;padding:0 18px}.topbar strong{font-size:20px;margin-right:auto}.chat-body{height:100vh;overflow:hidden}.chat-layout{display:grid;grid-template-columns:190px minmax(0,1fr) 230px;height:calc(100vh - 58px)}.rooms,.online{background:#151b22;padding:16px;overflow:auto}.rooms{border-right:1px solid #28313d}.online{border-left:1px solid #28313d}.rooms a{display:block;padding:10px 12px;border-radius:9px;margin:4px 0;color:#dfe6ee}.rooms a.active{background:#344254;color:white}.chat-main{display:grid;grid-template-rows:1fr auto;min-width:0}.messages{overflow:auto;padding:18px;background:#0e1319}.msg{background:#171f28;border:1px solid #263442;border-radius:12px;padding:10px 13px;margin:0 0 10px}.msg.whisper{border-color:#8d5a22;background:#241b12}.msg small{float:right;color:#7e8b99}.msg p{margin:6px 0 0;white-space:pre-wrap;word-break:break-word}.whisper-tag{font-size:12px;color:#f3b35b}.sendbar{display:grid;grid-template-columns:180px 1fr auto;gap:8px;padding:12px;background:#171d25;border-top:1px solid #28313d}.sendbar input,.sendbar select{margin:0}.online-user{padding:7px 2px;border-bottom:1px solid #222d38}.online-user small{color:#8190a0}.admin-body{background:#0e1319;min-height:100vh}.admin-shell{display:grid;grid-template-columns:250px minmax(0,1fr);min-height:100vh}.admin-nav{background:#151b22;border-right:1px solid #2b3542;padding:24px 16px}.admin-nav h2{margin:0 0 25px}.admin-nav a{display:block;padding:13px 14px;margin:5px 0;border-radius:9px;color:#e8edf2}.admin-nav a:hover{background:#24303c}.admin-main{padding:28px;max-width:1500px;width:100%}.admin-main h1{font-size:30px}.stats{display:grid;grid-template-columns:repeat(4,minmax(130px,1fr));gap:15px;margin-bottom:22px}.stats div,.panel{background:#171d25;border:1px solid #293543;border-radius:14px;padding:20px}.stats b{display:block;font-size:32px;color:#f1a94d}.stats span{color:#9aa8b7}.panel{margin-bottom:20px}.table-wrap{overflow:auto}table{width:100%;border-collapse:collapse}th,td{text-align:left;padding:12px;border-bottom:1px solid #2a3542}th{color:#f1a94d}.grid-form{display:grid;grid-template-columns:repeat(3,minmax(180px,1fr));gap:14px;align-items:end}.grid-form label{color:#b8c3cf}.inline{display:inline-block}@media(max-width:850px){.chat-layout{grid-template-columns:1fr}.rooms,.online{display:none}.sendbar{grid-template-columns:1fr}.admin-shell{grid-template-columns:1fr}.admin-nav{display:flex;gap:5px;overflow:auto}.admin-nav h2{display:none}.admin-nav a{white-space:nowrap}.stats{grid-template-columns:repeat(2,1fr)}.grid-form{grid-template-columns:1fr}}
/* Admin: Design- und Schrift-Einstellungen */
.settings-grid{display:grid;gap:16px;align-items:end}.settings-grid.two-cols{grid-template-columns:repeat(2,minmax(240px,1fr))}.settings-grid.font-grid{grid-template-columns:repeat(4,minmax(160px,1fr))}.settings-grid label{display:block;color:#b8c3cf;font-weight:600}.settings-grid input{width:100%;padding:12px;border-radius:10px;border:1px solid #39485a;background:#0e141b;color:white;margin-top:7px}.check-row{display:flex!important;align-items:center;gap:10px;min-height:48px}.check-row input{width:auto!important;margin:0!important;transform:scale(1.25)}.hint{color:#9eabb9;line-height:1.5}.save-ok{background:#173b2a;border:1px solid #2c7450;color:#d9ffea;padding:12px 16px;border-radius:10px;margin:0 0 18px}.settings-actions{position:sticky;bottom:0;padding:14px 0;background:linear-gradient(transparent,#0e1319 35%);text-align:right}.settings-actions button{font-size:17px;padding:13px 22px}.textfill-preview-wrap{margin-top:22px;padding:18px;border:1px dashed #3b4856;border-radius:12px;background:#10161d}.textfill-preview-wrap>span{display:block;color:#9eabb9;margin-bottom:8px}.textfill-preview{display:inline-block;font-size:38px;font-weight:900;line-height:1.2;background-size:cover;background-position:center;background-clip:text;-webkit-background-clip:text;color:transparent;-webkit-text-fill-color:transparent;text-shadow:none}

/* Im Chat über Admin einstellbare Schriftgrößen */
.chat-title{font-size:var(--chat-topbar-size,22px)}.chat-title.text-fill{display:inline-block;background-size:cover;background-position:center;background-repeat:repeat;background-clip:text;-webkit-background-clip:text;color:transparent!important;-webkit-text-fill-color:transparent}.msg p{font-size:var(--chat-message-size,18px);line-height:1.42}.msg-username{font-size:var(--chat-username-size,18px)}.msg-time{font-size:var(--chat-time-size,12px)}.online-user{font-size:var(--chat-online-size,16px)}.rooms a{font-size:var(--chat-rooms-size,16px)}.rooms h3,.online h3{font-size:var(--chat-heading-size,22px)}.sendbar input,.sendbar select{font-size:var(--chat-input-size,17px)}

@media(max-width:1050px){.settings-grid.font-grid{grid-template-columns:repeat(2,minmax(160px,1fr))}}@media(max-width:700px){.settings-grid.two-cols,.settings-grid.font-grid{grid-template-columns:1fr}.textfill-preview{font-size:30px}}

/* Benutzer-Schriftfarbe und bis zu 8 animierte Text-Fills */
.chat-main{grid-template-rows:1fr auto auto}.user-stylebar{display:flex;align-items:center;gap:8px;min-height:64px;padding:7px 12px;background:#121922;border-top:1px solid #28313d;overflow-x:auto}.style-caption{font-weight:700;color:#aeb9c5;white-space:nowrap;margin-right:3px}.normal-style-choice{height:48px;display:flex;align-items:center;gap:7px;padding:5px 8px;border:1px solid #344354;border-radius:10px;cursor:pointer;background:#171f28;white-space:nowrap}.normal-style-choice.selected,.fill-choice.selected{outline:2px solid #f1a94d;border-color:#f1a94d}.normal-style-choice input[type=color]{width:32px;height:32px;padding:1px;border:0;background:transparent;cursor:pointer}.fill-choices{display:flex;align-items:center;gap:7px}.fill-choice{height:48px;min-width:68px;padding:3px 7px;border:1px solid #344354;background:#171f28;color:#dfe6ee;border-radius:10px;display:grid;grid-template-columns:30px auto;grid-template-rows:1fr;align-items:center;gap:5px}.fill-choice>span{font-size:26px;font-weight:900;line-height:1;background-size:cover;background-position:center;background-repeat:repeat;background-clip:text;-webkit-background-clip:text;color:transparent;-webkit-text-fill-color:transparent}.fill-choice small{font-size:11px;max-width:85px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.message-text-fill{display:inline-block;max-width:100%;font-weight:700;background-size:cover;background-position:center;background-repeat:repeat;background-clip:text;-webkit-background-clip:text;color:transparent!important;-webkit-text-fill-color:transparent}.user-fill-admin-grid{display:grid;grid-template-columns:repeat(4,minmax(210px,1fr));gap:14px}.user-fill-admin-card{border:1px solid #334050;border-radius:12px;padding:13px;background:#111820}.user-fill-admin-card label{display:block;margin-top:8px}.fill-admin-preview{font-size:36px;font-weight:900;line-height:1.2;min-height:44px;background-size:cover;background-position:center;background-repeat:repeat;background-clip:text;-webkit-background-clip:text;color:#f1a94d;-webkit-text-fill-color:transparent}.user-fill-admin-card input{width:100%;padding:10px;border-radius:9px;border:1px solid #39485a;background:#0e141b;color:white;margin-top:5px}
@media(max-width:1100px){.user-fill-admin-grid{grid-template-columns:repeat(2,minmax(210px,1fr))}}@media(max-width:700px){.user-fill-admin-grid{grid-template-columns:1fr}.style-caption{display:none}.user-stylebar{min-height:58px}.fill-choice{min-width:58px}}

/* Update 091: User-Fill-Auswahl unter Einstellungen */
.chat-main{grid-template-rows:1fr auto}.topbar-button{padding:7px 11px;border-radius:8px;background:#263240;color:#f4f7fa;border:1px solid #3b4a5b}.topbar-button:hover{background:#334252}.settings-modal{position:fixed;inset:0;background:#000a;display:none;align-items:center;justify-content:center;padding:20px;z-index:9999}.settings-modal.open{display:flex}.settings-dialog{position:relative;width:min(900px,96vw);max-height:90vh;overflow:auto;background:#151b22;border:1px solid #364555;border-radius:18px;box-shadow:0 28px 80px #000c;padding:24px}.settings-dialog h2{margin:0 45px 6px 0;font-size:28px}.settings-intro{color:#aab6c2;margin:0 0 20px}.settings-close{position:absolute;right:14px;top:12px;width:40px;height:40px;padding:0;border-radius:50%;font-size:28px;line-height:1;background:#2a3542;color:#fff}.user-setting-section{border-top:1px solid #2c3744;padding-top:18px;margin-top:18px}.user-setting-section h3{margin:0 0 12px}.normal-style-card{width:100%;display:flex;align-items:center;justify-content:space-between;gap:16px;background:#10161d;border:2px solid #314052;color:#fff;padding:16px;border-radius:14px;text-align:left}.normal-style-card.selected,.user-fill-option.selected{border-color:#f1a94d;box-shadow:0 0 0 2px #f1a94d44}.normal-color-preview{font-size:24px;font-weight:700}.normal-color-controls{display:flex;align-items:center;gap:10px;color:#b9c4cf}.normal-color-controls input[type=color]{width:50px;height:40px;padding:2px;border:0;background:transparent;cursor:pointer}.user-fill-picker{display:grid;grid-template-columns:repeat(4,minmax(150px,1fr));gap:14px}.user-fill-option{min-height:180px;display:flex;flex-direction:column;align-items:stretch;gap:8px;background:#10161d;color:#eef2f7;border:2px solid #314052;border-radius:14px;padding:10px}.user-fill-thumb{height:82px;border-radius:10px;overflow:hidden;background:#0a0f14;display:grid;place-items:center}.user-fill-thumb img{width:100%;height:100%;object-fit:cover;display:block}.user-fill-text{font-size:22px;font-weight:900;line-height:1.15;background-size:cover;background-position:center;background-repeat:repeat;background-clip:text;-webkit-background-clip:text;color:transparent;-webkit-text-fill-color:transparent}.user-fill-option strong{font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.no-fills{color:#9eabb9}.settings-current{margin-top:20px;padding:12px 14px;background:#10161d;border-radius:10px}.settings-done{margin-top:14px;float:right}.fill-image-preview{height:110px;border:1px solid #334050;border-radius:10px;background:#0b1117;display:grid;place-items:center;overflow:hidden;color:#798899}.fill-image-preview img{width:100%;height:100%;object-fit:cover;display:block}.fill-card-number{font-weight:800;color:#f1a94d;margin-bottom:8px}.user-fill-admin-card input[type=file]{padding:8px}.remove-fill{font-size:13px;color:#e8a0a0!important;margin-top:10px!important}
@media(max-width:900px){.user-fill-picker{grid-template-columns:repeat(2,minmax(140px,1fr))}}@media(max-width:600px){.user-fill-picker{grid-template-columns:1fr 1fr}.settings-dialog{padding:18px}.normal-style-card{align-items:flex-start;flex-direction:column}.user-fill-option{min-height:155px}.user-fill-thumb{height:65px}}

/* Update 092: User-Einstellungen unten mit Zahnrad + Schriftgröße */
.chat-main{grid-template-rows:1fr auto auto}
.user-settings-launcher{display:flex;align-items:center;gap:12px;padding:10px 12px;border-top:1px solid #28313d;background:#111820}
.settings-gear-button{display:inline-flex;align-items:center;gap:9px;padding:10px 14px;border-radius:12px;background:#263240;color:#f4f7fa;border:1px solid #3b4a5b;font-weight:700}
.settings-gear-button:hover{background:#334252}
.gear-icon{font-size:20px;line-height:1}
.settings-gear-info{color:#95a3b1;font-size:14px}
.font-size-card{background:#10161d;border:2px solid #314052;border-radius:14px;padding:16px}
.font-size-label{display:block;font-weight:700;color:#dce4ec;margin-bottom:10px}
.font-size-controls{display:flex;align-items:center;gap:14px}
.font-size-controls input[type=range]{flex:1;margin:0}
#textSizeValue{min-width:64px;text-align:right;color:#f1a94d}
.font-size-preview{margin-top:14px;padding:12px 14px;background:#0b1117;border-radius:10px;color:#e6eef7;font-weight:700;line-height:1.35}

@media(max-width:700px){
  .user-settings-launcher{flex-direction:column;align-items:flex-start}
  .settings-gear-info{font-size:13px}
}

/* Update 094: Webcam-Teststufe */
.user-bottom-actions{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.webcam-button{display:inline-flex;align-items:center;gap:9px;padding:10px 14px;border-radius:12px;background:#263240;color:#f4f7fa;border:1px solid #3b4a5b;font-weight:700}
.webcam-button:hover{background:#334252}
.webcam-icon{font-size:20px;line-height:1}
.webcam-modal{position:fixed;inset:0;background:#000b;display:none;align-items:center;justify-content:center;padding:20px;z-index:10000}
.webcam-modal.open{display:flex}
.webcam-dialog{position:relative;width:min(760px,96vw);background:#151b22;border:1px solid #364555;border-radius:18px;box-shadow:0 28px 80px #000d;padding:24px}
.webcam-dialog h2{margin:0 45px 6px 0;font-size:28px}
.webcam-stage{position:relative;aspect-ratio:16/9;width:100%;background:#070b0f;border:1px solid #344250;border-radius:14px;overflow:hidden;display:grid;place-items:center;margin-top:16px}
#localWebcam{display:none;width:100%;height:100%;object-fit:cover;background:#000;transform:scaleX(-1)}
#localWebcam.active{display:block}
.webcam-placeholder{position:absolute;inset:0;display:grid;place-content:center;text-align:center;font-size:56px;color:#768696;background:radial-gradient(circle at center,#18222c,#080d12)}
.webcam-placeholder span{font-size:16px;margin-top:8px;color:#aab6c2}
.webcam-placeholder.hidden{display:none}
.webcam-status{margin-top:12px;padding:10px 12px;border-radius:9px;background:#10171f;color:#c6d1dc}
.webcam-status.error{background:#35191d;color:#ffccd2;border:1px solid #6b2f36}
.webcam-controls{display:flex;gap:9px;flex-wrap:wrap;margin-top:14px}
.webcam-control{padding:10px 13px;border-radius:10px;background:#263240;color:#fff;border:1px solid #3b4a5b}
.webcam-control.primary{background:#315d3f;border-color:#4b8a5e}
.webcam-control.danger{background:#58262d;border-color:#83404a}
.webcam-control:disabled{opacity:.45;cursor:not-allowed}
@media(max-width:620px){.webcam-dialog{padding:17px}.webcam-controls{display:grid;grid-template-columns:1fr 1fr}.webcam-control{width:100%}}

/* Update 095: Webcam-Reihe oben im Chat statt Popup */
.chat-main{grid-template-rows:auto 1fr auto auto}
.webcam-strip{display:none;gap:10px;align-items:flex-start;overflow-x:auto;overflow-y:hidden;padding:10px 12px;background:#0d141b;border-bottom:1px solid #2b3744;scrollbar-width:thin}
.webcam-strip.active{display:flex}
.webcam-tile{flex:0 0 auto;width:320px;min-width:220px;max-width:720px;min-height:190px;max-height:520px;background:#121a22;border:1px solid #354453;border-radius:14px;overflow:hidden;resize:both;box-shadow:0 8px 24px #0006;display:flex;flex-direction:column}
.webcam-tile.cam-small{width:240px;height:230px}
.webcam-tile.cam-medium{width:340px;height:310px}
.webcam-tile.cam-large{width:520px;height:430px}
.webcam-tile-head{display:flex;justify-content:space-between;gap:10px;align-items:center;padding:8px 10px;background:#18222c;border-bottom:1px solid #2d3946}
.webcam-tile-head strong{color:#f1a94d}
.webcam-tile-head span{font-size:12px;color:#91a0af}
.webcam-tile-video{position:relative;flex:1;min-height:120px;background:#05080b;overflow:hidden}
.webcam-tile-video video{display:none;width:100%;height:100%;object-fit:cover;background:#000;transform:scaleX(-1)}
.webcam-tile-video video.active{display:block}
.webcam-tile-placeholder{position:absolute;inset:0;display:grid;place-content:center;text-align:center;font-size:42px;color:#718191;background:radial-gradient(circle at center,#18222c,#080d12)}
.webcam-tile-placeholder span{font-size:13px;margin-top:4px;color:#aab6c2}
.webcam-tile-placeholder.hidden{display:none}
.webcam-tile-controls{display:flex;gap:5px;flex-wrap:wrap;padding:7px;background:#111820;border-top:1px solid #263340}
.webcam-mini{padding:6px 8px;border-radius:8px;background:#263240;color:#fff;border:1px solid #3b4a5b;font-size:12px}
.webcam-mini.primary{background:#315d3f;border-color:#4b8a5e}
.webcam-mini.danger{background:#58262d;border-color:#83404a}
.webcam-mini:disabled{opacity:.45;cursor:not-allowed}
.webcam-tile-status{padding:6px 9px;background:#0d141b;color:#9dabb8;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.webcam-tile-status.error{color:#ffb4bd;background:#30161a}
.webcam-tile.running{border-color:#4b8a5e}

@media(max-width:700px){
  .webcam-tile{resize:none;width:280px;min-width:240px}
  .webcam-tile.cam-large{width:88vw;height:380px}
  .webcam-tile.cam-medium{width:78vw;height:300px}
  .webcam-tile.cam-small{width:240px;height:225px}
}

/* Update 096: oben ausschließlich Webcam-Bilder, Bedienung unten */
.webcam-strip{display:none;align-items:flex-start;gap:10px;overflow-x:auto;padding:10px 12px;background:#0b1117;border-bottom:1px solid #2b3744}
.webcam-strip.active{display:flex}
.webcam-tile{background:#090d12;border:1px solid #354453;border-radius:12px;overflow:hidden;resize:both;box-shadow:0 8px 24px #0006;display:flex;flex-direction:column}
.webcam-tile-head{padding:6px 8px;min-height:34px}
.webcam-tile-size{display:flex;gap:4px}
.cam-size-icon{width:28px;height:24px;padding:0;border-radius:6px;background:#273441;border:1px solid #405163;color:#fff;font-size:15px;line-height:1}
.cam-size-icon:hover{background:#354657}
.webcam-tile-video{flex:1;min-height:120px;background:#000}
.webcam-tile-video video{display:block;width:100%;height:100%;object-fit:cover;transform:scaleX(-1)}
.webcam-tile-controls,.webcam-tile-status,.webcam-tile-placeholder{display:none!important}
.webcam-subcontrol{padding:10px 12px}
.webcam-subcontrol.danger{background:#58262d;border-color:#83404a}
.webcam-subcontrol:disabled{opacity:.45;cursor:not-allowed}
#webcamStatus.error{color:#ffb4bd}

/* Update 097: Webcam-Bühne wie im Beispielbild - oben quer, Kameras nebeneinander */
.chat-main{grid-template-rows:auto minmax(0,1fr) auto auto}
.webcam-strip{
  display:none;
  width:100%;
  min-width:0;
  min-height:0;
  gap:10px;
  align-items:flex-start;
  overflow-x:auto;
  overflow-y:hidden;
  padding:10px 12px;
  background:linear-gradient(180deg,#1c120b,#0b0908);
  border-bottom:2px solid #7b3a12;
  box-shadow:inset 0 -8px 18px #0008;
}
.webcam-strip.active{
  display:flex;
  min-height:182px;
}
.webcam-tile{
  position:relative;
  flex:0 0 auto;
  width:240px;
  height:160px;
  min-width:160px;
  min-height:108px;
  max-width:620px;
  max-height:420px;
  background:#000;
  border:1px solid #5d351e;
  border-radius:4px;
  overflow:hidden;
  resize:both;
  box-shadow:0 3px 12px #000a;
  display:block;
}
.webcam-tile.cam-small{width:180px;height:120px}
.webcam-tile.cam-medium{width:240px;height:160px}
.webcam-tile.cam-large{width:360px;height:240px}
.webcam-tile-head{
  position:absolute;
  left:0;
  right:0;
  top:0;
  z-index:3;
  min-height:30px;
  padding:5px 7px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:7px;
  background:linear-gradient(180deg,#000c,#0003);
  border:0;
}
.webcam-tile-head strong{
  color:#fff;
  font-size:13px;
  text-shadow:0 1px 3px #000;
  max-width:130px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.webcam-tile-size{display:flex;gap:3px}
.cam-size-icon{
  width:24px;
  height:22px;
  padding:0;
  border-radius:4px;
  background:#111b;
  border:1px solid #ffffff55;
  color:#fff;
  font-size:13px;
  line-height:1;
}
.webcam-tile-video{
  position:absolute;
  inset:0;
  min-height:0;
  background:#000;
}
.webcam-tile-video video{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  background:#000;
  transform:scaleX(-1);
}
.webcam-tile.running{border-color:#a85b24}

@media(max-width:700px){
  .webcam-strip.active{min-height:145px}
  .webcam-tile{resize:none}
  .webcam-tile.cam-small{width:150px;height:100px}
  .webcam-tile.cam-medium{width:210px;height:140px}
  .webcam-tile.cam-large{width:300px;height:200px}
}

/* Update 098: Schreibzeile immer kompakt halten */
.sendbar{
  min-height:64px;
  height:64px;
  max-height:64px;
  align-items:center;
  align-self:end;
  padding:9px 12px;
}
.sendbar input,
.sendbar select,
.sendbar button{
  height:44px;
  min-height:44px;
  max-height:44px;
  margin:0;
}
.sendbar input{
  line-height:20px;
}

@media(max-width:850px){
  .sendbar{
    height:auto;
    max-height:none;
    min-height:0;
  }
  .sendbar input,
  .sendbar select,
  .sendbar button{
    height:44px;
    min-height:44px;
    max-height:44px;
  }
}

/* Update 099: ein einziger Webcam-Button mit aufklappbarem Steuerfeld */
.webcam-control-wrap{position:relative;display:inline-block}
.webcam-control-panel[hidden]{display:none!important}
.webcam-control-panel{
  position:absolute;
  left:0;
  bottom:calc(100% + 10px);
  z-index:5000;
  width:min(430px,88vw);
  padding:14px;
  background:#141b23;
  border:1px solid #3a4858;
  border-radius:14px;
  box-shadow:0 18px 45px #000b;
}
.webcam-panel-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px}
.webcam-panel-head strong{font-size:17px;color:#f1a94d}
.webcam-panel-close{width:30px;height:30px;padding:0;border-radius:50%;background:#293544;border:1px solid #425267;color:#fff;font-size:20px;line-height:1}
.webcam-control-panel label{display:block;margin:10px 0;color:#b9c5d0;font-weight:700}
.webcam-control-panel select{width:100%;height:42px;margin-top:5px;padding:0 10px;border:1px solid #3a495a;border-radius:9px;background:#0d141b;color:#fff}
.webcam-panel-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px}
.webcam-panel-actions .webcam-control{width:100%;margin:0}
.webcam-panel-status{margin-top:10px;padding:9px 10px;border-radius:9px;background:#0c131a;color:#aebbc7;font-size:13px}
.webcam-panel-status.error{background:#34191d;color:#ffc0c7;border:1px solid #6f3139}
#openWebcamPanel[aria-expanded="true"]{background:#354657;border-color:#52677d}

@media(max-width:600px){
  .webcam-control-panel{position:fixed;left:10px;right:10px;bottom:10px;width:auto;max-height:75vh;overflow:auto}
  .webcam-panel-actions{grid-template-columns:1fr}
}

/* Update 100: Bei nur einem Raum keine unnötige Raumspalte anzeigen */
.chat-layout.single-room{grid-template-columns:minmax(0,1fr) 230px}
.danger-button{background:#8e3038;color:#fff}
.danger-button:hover{background:#aa3943}
@media(max-width:850px){.chat-layout.single-room{grid-template-columns:1fr}}

/* Update 101: Empfänger-Auswahl / „An alle“ entfernt */
.sendbar{grid-template-columns:minmax(0,1fr) auto}
@media(max-width:850px){.sendbar{grid-template-columns:minmax(0,1fr) auto}}

/* Update 102: Mehrbenutzer-Webcams */
.local-webcam-tile:not(.running){display:none}
.remote-webcam-tile .webcam-tile-video video{transform:none}
.webcam-strip.active:empty{display:none}

/* Update 103: Webcam-Symbol an Online-Namen + kurze Startmeldung */
.online-user{display:flex;align-items:center;justify-content:space-between;gap:8px}
.online-user-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.online-cam-button{flex:0 0 auto;width:34px;height:30px;padding:0;border-radius:8px;border:1px solid #405267;background:#18222d;color:#fff;cursor:pointer;font-size:17px;line-height:1}
.online-cam-button:hover{background:#2b3a49}
.online-cam-button.viewing{border-color:#f1a94d;box-shadow:0 0 0 2px #f1a94d33;background:#31291f}
.online-cam-button.own{opacity:.72;cursor:default}
.cam-start-notice{margin:8px 10px;padding:10px 14px;border:1px solid #3b5268;border-radius:10px;background:#17232e;color:#dce9f5;font-weight:700;animation:camNoticeIn .22s ease-out}
.cam-start-notice.leaving{opacity:0;transform:translateY(-4px);transition:opacity .35s ease,transform .35s ease}
@keyframes camNoticeIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}

/* Update 106: feste untere Bedienung – Buttons über Eingabefeld, immer sichtbar */
.chat-main{
  height:100%;
  min-height:0;
  overflow:hidden;
  display:grid;
  grid-template-rows:auto minmax(0,1fr) 56px 64px;
}
.messages{
  min-height:0;
  overflow:auto;
}
.user-settings-launcher{
  min-height:56px;
  height:56px;
  max-height:56px;
  display:flex;
  align-items:center;
  padding:7px 12px;
  border-top:1px solid #28313d;
  background:#111820;
  overflow:visible;
  z-index:20;
}
.user-bottom-actions{
  width:100%;
  display:flex;
  flex-wrap:nowrap;
  align-items:center;
  gap:9px;
}
.settings-gear-button,
.webcam-button{
  height:40px;
  min-height:40px;
  white-space:nowrap;
}
.settings-gear-info{display:none!important}
.sendbar{
  min-height:64px!important;
  height:64px!important;
  max-height:64px!important;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto!important;
  gap:8px;
  align-items:center;
  padding:9px 12px;
  background:#171d25;
  border-top:1px solid #28313d;
  overflow:hidden;
}
.sendbar input,
.sendbar button{
  height:44px!important;
  min-height:44px!important;
  max-height:44px!important;
  margin:0!important;
}
.webcam-strip.active{
  min-height:130px;
  max-height:36vh;
  overflow-x:auto;
  overflow-y:auto;
}
.webcam-tile{
  max-height:calc(36vh - 20px);
}
.webcam-tile.cam-large{
  width:360px;
  height:min(240px,calc(36vh - 20px));
}

@media(max-width:850px){
  .chat-main{grid-template-rows:auto minmax(0,1fr) 56px 64px}
  .user-settings-launcher{height:56px;min-height:56px;max-height:56px;flex-direction:row;align-items:center}
  .user-bottom-actions{flex-wrap:nowrap}
  .sendbar{height:64px!important;min-height:64px!important;max-height:64px!important;grid-template-columns:minmax(0,1fr) auto!important}
}

/* Update 108: Smilie-Fenster mit Rubriken */
.smilie-control-wrap{position:relative;display:inline-block}
.smilie-button{height:40px;min-height:40px;display:inline-flex;align-items:center;gap:7px;padding:0 13px;border-radius:12px;background:#263240;color:#f4f7fa;border:1px solid #3b4a5b;font-weight:700;white-space:nowrap}
.smilie-button:hover,.smilie-button[aria-expanded="true"]{background:#354657;border-color:#52677d}
.smilie-panel[hidden]{display:none!important}
.smilie-panel{position:absolute;left:0;bottom:calc(100% + 10px);z-index:5100;width:min(520px,90vw);max-height:390px;overflow:hidden;padding:12px;background:#141b23;border:1px solid #3a4858;border-radius:14px;box-shadow:0 18px 45px #000b}
.smilie-panel-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px}
.smilie-panel-head strong{font-size:17px;color:#f1a94d}
.smilie-panel-close{width:30px;height:30px;padding:0;border-radius:50%;background:#293544;border:1px solid #425267;color:#fff;font-size:20px;line-height:1}
.smilie-tabs{display:flex;gap:6px;overflow-x:auto;padding-bottom:8px;margin-bottom:8px;border-bottom:1px solid #2d3946}
.smilie-tab{flex:0 0 auto;padding:7px 10px;border-radius:9px;background:#202b36;color:#dce5ee;border:1px solid #374758;font-size:13px}
.smilie-tab.active{background:#4b3b22;border-color:#f1a94d;color:#fff}
.smilie-grid{display:grid;grid-template-columns:repeat(7,minmax(48px,1fr));gap:7px;max-height:270px;overflow:auto;padding:2px}
.smilie-choice{height:58px;padding:4px;border-radius:10px;border:1px solid #314052;background:#0e151c;display:grid;place-items:center}
.smilie-choice:hover{border-color:#f1a94d;background:#17212a}
.smilie-choice img{max-width:48px;max-height:48px;object-fit:contain;display:block}
.smilie-empty{color:#9eabb9;margin:8px 2px}
.chat-smilie{display:inline-block;max-width:64px;max-height:64px;width:auto;height:auto;vertical-align:middle;margin:0 2px;object-fit:contain}

/* Admin Smilies */
.smilie-admin-grid{display:grid;grid-template-columns:repeat(5,minmax(150px,1fr));gap:12px}
.smilie-admin-card{background:#111820;border:1px solid #334050;border-radius:12px;padding:12px}
.smilie-admin-preview{height:95px;border-radius:9px;background:#0b1117;display:grid;place-items:center;overflow:hidden;margin-bottom:9px}
.smilie-admin-preview img{max-width:82px;max-height:82px;object-fit:contain}
.smilie-admin-card strong{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.smilie-admin-meta{font-size:12px;color:#96a4b2;margin:4px 0 10px}
.category-list{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.category-chip{display:flex;align-items:center;gap:7px;padding:7px 10px;border:1px solid #334050;border-radius:999px;background:#111820}
.category-chip.inactive{opacity:.55}
.admin-upload-row{display:grid;grid-template-columns:1fr 1fr 1.2fr auto;gap:10px;align-items:end}
.admin-upload-row label{display:block;color:#b8c3cf}
.admin-upload-row input,.admin-upload-row select{width:100%;margin-top:5px}

@media(max-width:850px){
  .user-bottom-actions{gap:6px}
  .settings-gear-button,.smilie-button,.webcam-button{padding-left:10px;padding-right:10px}
  .smilie-panel{position:fixed;left:10px;right:10px;bottom:76px;width:auto;max-height:55vh}
  .smilie-grid{grid-template-columns:repeat(5,minmax(44px,1fr))}
  .smilie-admin-grid{grid-template-columns:repeat(3,minmax(130px,1fr))}
  .admin-upload-row{grid-template-columns:1fr 1fr}
}
@media(max-width:560px){
  .settings-gear-button span:last-child,.smilie-button span:last-child,.webcam-button span:last-child{display:none}
  .smilie-grid{grid-template-columns:repeat(4,minmax(44px,1fr))}
  .smilie-admin-grid{grid-template-columns:repeat(2,minmax(120px,1fr))}
  .admin-upload-row{grid-template-columns:1fr}
}

/* Update 109: Untere Bedienung und Schreibfeld dürfen nie aus dem sichtbaren Chat rutschen */
.chat-layout{
  min-height:0;
  overflow:hidden;
}
.chat-main{
  min-width:0;
  min-height:0;
  height:100%;
  max-height:100%;
  overflow:hidden;
  display:grid;
  grid-template-rows:auto minmax(0,1fr) 56px 64px!important;
}
.webcam-strip{
  min-width:0;
  max-height:36vh;
}
.messages{
  min-height:0!important;
  height:auto!important;
  overflow-y:auto!important;
  overflow-x:hidden;
}
.user-settings-launcher{
  position:relative;
  z-index:40;
  flex:0 0 56px;
  min-height:56px!important;
  height:56px!important;
  max-height:56px!important;
  overflow:visible!important;
}
.user-bottom-actions{
  min-width:0;
  height:40px;
  flex-wrap:nowrap!important;
}
.sendbar{
  position:relative;
  z-index:35;
  flex:0 0 64px;
  min-height:64px!important;
  height:64px!important;
  max-height:64px!important;
  overflow:visible!important;
  align-self:stretch!important;
}
.sendbar input{
  display:block!important;
  min-width:0;
  width:100%!important;
  height:44px!important;
  min-height:44px!important;
  max-height:44px!important;
}
.sendbar button{
  display:block!important;
  height:44px!important;
  min-height:44px!important;
  max-height:44px!important;
}

@media(max-width:850px){
  .chat-layout{height:calc(100dvh - 58px);min-height:0;overflow:hidden}
  .chat-main{height:100%;min-height:0;grid-template-rows:auto minmax(0,1fr) 56px 64px!important}
  .user-bottom-actions{overflow-x:auto;overflow-y:visible;scrollbar-width:thin}
}

/* Update 110: robuster Aufbau – Eingabefeld und Buttons immer sichtbar */
.chat-layout{
  height:calc(100vh - 58px)!important;
  min-height:0!important;
  overflow:hidden!important;
}
.chat-main{
  position:relative;
  display:flex!important;
  flex-direction:column!important;
  height:100%!important;
  min-height:0!important;
  max-height:100%!important;
  overflow:hidden!important;
}
.webcam-strip{
  flex:0 0 auto!important;
  width:100%;
  min-height:0;
  max-height:36vh!important;
}
.messages{
  flex:1 1 auto!important;
  min-height:0!important;
  height:auto!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
}
.user-settings-launcher{
  flex:0 0 56px!important;
  width:100%;
  min-height:56px!important;
  height:56px!important;
  max-height:56px!important;
  position:relative!important;
  z-index:40;
  overflow:visible!important;
}
.sendbar{
  flex:0 0 64px!important;
  width:100%!important;
  min-height:64px!important;
  height:64px!important;
  max-height:64px!important;
  display:grid!important;
  grid-template-columns:minmax(0,1fr) auto!important;
  align-items:center!important;
  gap:8px!important;
  padding:9px 12px!important;
  margin:0!important;
  position:relative!important;
  z-index:50;
  visibility:visible!important;
  opacity:1!important;
}
.sendbar #message{
  display:block!important;
  visibility:visible!important;
  opacity:1!important;
  width:100%!important;
  min-width:0!important;
  height:44px!important;
  min-height:44px!important;
  max-height:44px!important;
  margin:0!important;
  padding:10px 12px!important;
}
.sendbar button{
  display:block!important;
  visibility:visible!important;
  opacity:1!important;
  height:44px!important;
  min-height:44px!important;
  max-height:44px!important;
  margin:0!important;
}

@media(max-width:850px){
  .chat-layout{height:calc(100dvh - 58px)!important;min-height:0!important}
  .chat-main{display:flex!important;height:100%!important;min-height:0!important}
  .user-settings-launcher{flex:0 0 56px!important}
  .sendbar{flex:0 0 64px!important;grid-template-columns:minmax(0,1fr) auto!important}
}

/* Update 111: Smilie-Groessen wie im alten shared-emoji Panel */
/* Smilies in Chatnachrichten deutlich besser lesbar */
.chat-smilie{
  display:inline-block!important;
  width:auto!important;
  height:auto!important;
  max-width:120px!important;
  max-height:90px!important;
  vertical-align:middle!important;
  margin:2px 4px!important;
  object-fit:contain!important;
}

/* Auswahlfenster groesser und luftiger */
.smilie-panel{
  width:min(650px,94vw)!important;
  max-height:500px!important;
  overflow:visible!important;
}
.smilie-grid{
  grid-template-columns:repeat(6,minmax(80px,1fr))!important;
  gap:9px!important;
  max-height:355px!important;
  overflow-y:auto!important;
  overflow-x:visible!important;
  padding:12px 8px 18px!important;
}
.smilie-choice{
  position:relative!important;
  height:86px!important;
  min-width:80px!important;
  padding:7px!important;
  border-radius:10px!important;
  overflow:visible!important;
  z-index:1;
}
.smilie-choice:hover{
  z-index:30!important;
}
.smilie-choice img{
  width:52px!important;
  height:52px!important;
  max-width:none!important;
  max-height:none!important;
  object-fit:contain!important;
  display:block!important;
  transition:width .16s ease,height .16s ease,transform .16s ease!important;
  transform-origin:center center!important;
}
.smilie-choice:hover img{
  width:100px!important;
  height:100px!important;
  transform:translateY(-14px)!important;
  filter:drop-shadow(0 6px 8px rgba(0,0,0,.7));
}

@media(max-width:700px){
  .smilie-panel{width:auto!important;left:8px!important;right:8px!important;max-height:62vh!important}
  .smilie-grid{grid-template-columns:repeat(4,minmax(68px,1fr))!important;max-height:42vh!important}
  .smilie-choice{height:78px!important;min-width:68px!important}
  .smilie-choice img{width:48px!important;height:48px!important}
  .smilie-choice:hover img{width:82px!important;height:82px!important;transform:translateY(-8px)!important}
  .chat-smilie{max-height:78px!important;max-width:105px!important}
}

/* Update 112: komplette Shared-Emoji-Auswahl */
.smilie-panel{width:min(720px,94vw)!important;max-height:78vh!important;background:#050505!important;border:2px solid #a92828!important}
.smilie-tabs{display:grid!important;grid-template-columns:repeat(6,minmax(82px,1fr));gap:7px!important;max-height:145px;overflow:auto;padding:2px 2px 8px}
.smilie-tab{min-height:38px!important;padding:7px 8px!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.smilie-grid{grid-template-columns:repeat(7,minmax(78px,1fr))!important;gap:8px!important;max-height:430px!important;padding:12px 6px 28px!important;overflow:auto!important}
.smilie-choice.shared-smilie-choice{height:88px!important;min-width:78px!important;position:relative!important;overflow:visible!important;display:flex!important;flex-direction:column!important;justify-content:flex-end!important;align-items:center!important;padding:5px!important;background:#151515!important;border:1px solid #8b2424!important}
.smilie-choice.shared-smilie-choice img{position:absolute!important;top:5px!important;left:50%!important;transform:translateX(-50%)!important;width:50px!important;height:50px!important;max-width:50px!important;max-height:50px!important;object-fit:contain!important;transition:width .18s ease,height .18s ease,top .18s ease,transform .18s ease!important;z-index:5!important}
.smilie-choice.shared-smilie-choice:hover{background:#242424!important;border-color:#ff3b3b!important;z-index:30!important}
.smilie-choice.shared-smilie-choice:hover img{width:100px!important;height:100px!important;max-width:100px!important;max-height:100px!important;top:-28px!important;transform:translateX(-50%)!important;filter:drop-shadow(0 5px 8px #000)!important}
.shared-smilie-name{display:block;width:100%;font-size:10px;color:#c8c8c8;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:center;line-height:14px;z-index:2}
.chat-smilie.shared-chat-smilie{height:64px!important;width:auto!important;max-width:180px!important;vertical-align:middle!important;object-fit:contain!important}
@media(max-width:850px){
 .smilie-tabs{grid-template-columns:repeat(3,minmax(78px,1fr))!important;max-height:155px}
 .smilie-grid{grid-template-columns:repeat(4,minmax(68px,1fr))!important;max-height:42vh!important}
 .smilie-choice.shared-smilie-choice{height:82px!important;min-width:68px!important}
 .smilie-choice.shared-smilie-choice img{width:48px!important;height:48px!important;max-width:48px!important;max-height:48px!important}
 .smilie-choice.shared-smilie-choice:hover img{width:82px!important;height:82px!important;max-width:82px!important;max-height:82px!important;top:-16px!important}
 .chat-smilie.shared-chat-smilie{height:54px!important;max-width:150px!important}
}

/* Update 113: Rubriken-Filter muss hidden auch gegen display:...!important durchsetzen */
.smilie-grid .smilie-choice[hidden]{display:none!important}

/* Update 115: native Würfel- und Zeichenfunktionen */
.tool-button{display:inline-flex;align-items:center;gap:8px;padding:10px 14px;border-radius:12px;background:#263240;color:#f4f7fa;border:1px solid #3b4a5b;font-weight:700;cursor:pointer}
.tool-button:hover{background:#334252}.dice-control-wrap,.draw-control-wrap{position:relative}
.mini-tool-panel{position:absolute;left:0;bottom:calc(100% + 8px);z-index:1300;min-width:255px;background:#151b22;border:1px solid #3a4858;border-radius:14px;box-shadow:0 18px 45px #000a;padding:12px}
.mini-tool-panel[hidden]{display:none!important}.mini-tool-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:8px}.mini-tool-close{width:32px;height:32px;padding:0;border-radius:50%;font-size:20px;background:#2a3542;color:white}.mini-tool-panel p{margin:6px 0 10px;color:#aeb9c5}
.dice-count-buttons{display:grid;grid-template-columns:repeat(6,1fr);gap:6px}.dice-count{height:38px;padding:0;border-radius:8px;background:#f2f2f2;color:#111;border:1px solid #bbb;font-weight:900;font-size:17px}.dice-count:hover{transform:translateY(-1px)}
.draw-modal{position:fixed;inset:0;z-index:14000;background:#000b;display:flex;align-items:center;justify-content:center;padding:18px}.draw-modal[hidden]{display:none!important}.draw-dialog{width:min(760px,96vw);max-height:94vh;overflow:auto;background:#151b22;border:1px solid #475768;border-radius:18px;box-shadow:0 30px 90px #000d;padding:14px}.draw-head{display:flex;align-items:center;justify-content:space-between;gap:12px}.draw-head h2{margin:0;font-size:24px}.draw-close{width:40px;height:40px;padding:0;border-radius:50%;font-size:28px;line-height:1;background:#2a3542;color:#fff}.draw-canvas-wrap{margin-top:12px;background:#08120f;border:1px solid #35483f;border-radius:12px;overflow:hidden}.draw-canvas-wrap canvas{display:block;width:100%;height:auto;max-height:58vh;touch-action:none;cursor:crosshair;background:#08251f}.draw-tools{padding-top:12px}.draw-colors{display:flex;flex-wrap:wrap;gap:8px}.draw-color{width:34px;height:34px;padding:0;border-radius:50%;background:var(--draw-color);border:2px solid #66727f}.draw-color.selected{outline:3px solid #f1a94d;outline-offset:2px}.brush-size{display:flex;align-items:center;gap:10px;margin:12px 0;color:#c7d1db}.brush-size input{flex:1}.draw-actions{display:flex;justify-content:flex-end;gap:8px;flex-wrap:wrap}.draw-actions button{padding:10px 14px}.draw-actions .primary{background:#2f7d4f}.draw-status{min-height:22px;margin-top:8px;color:#aeb9c5;text-align:right}.chat-drawing{display:block;max-width:min(520px,92%);max-height:300px;width:auto;height:auto;margin-top:8px;border-radius:10px;border:1px solid #394958;background:#08251f;cursor:zoom-in}.chat-drawing.expanded{max-width:100%;max-height:none;cursor:zoom-out}
@media(max-width:700px){.dice-count-buttons{grid-template-columns:repeat(3,1fr)}.mini-tool-panel{left:50%;transform:translateX(-50%)}.draw-dialog{padding:10px}.draw-actions{justify-content:stretch}.draw-actions button{flex:1}.chat-drawing{max-width:100%}}

/* Update 116: kompakte Fill-Auswahl + feste Schriftgrößen 100/150/200 % */
.font-percent-buttons{display:flex;gap:10px;flex-wrap:wrap;margin:4px 0 12px}
.font-percent-btn{min-width:92px;padding:11px 16px;border:2px solid #314052;border-radius:11px;background:#171f28;color:#eef2f7;font-weight:800;font-size:16px}
.font-percent-btn:hover{background:#23303d}
.font-percent-btn.selected{border-color:#f1a94d;box-shadow:0 0 0 2px #f1a94d44;color:#ffd08b}
.user-fill-picker{grid-template-columns:repeat(4,minmax(115px,1fr));gap:10px}
.user-fill-option{min-height:108px;padding:7px;gap:5px}
.user-fill-thumb{height:42px;border-radius:7px}
.user-fill-text{font-size:17px!important;line-height:1.05;min-height:20px}
.user-fill-option strong{font-size:12px}
@media(max-width:900px){.user-fill-picker{grid-template-columns:repeat(4,minmax(95px,1fr))}}
@media(max-width:650px){.user-fill-picker{grid-template-columns:repeat(2,minmax(105px,1fr))}.font-percent-btn{flex:1;min-width:78px}}
\n\n/* Update 117: harter Fix fuer kompakte Fill-Vorschauen und Prozentbuttons */\n#userSettingsModal .user-fill-picker{\n  display:grid!important;\n  grid-template-columns:repeat(4,96px)!important;\n  gap:9px!important;\n  justify-content:start!important;\n}\n#userSettingsModal .user-fill-option{\n  width:96px!important;\n  min-width:96px!important;\n  max-width:96px!important;\n  min-height:88px!important;\n  height:88px!important;\n  padding:5px!important;\n  gap:3px!important;\n  overflow:hidden!important;\n}\n#userSettingsModal .user-fill-thumb{\n  display:block!important;\n  width:84px!important;\n  min-width:84px!important;\n  max-width:84px!important;\n  height:34px!important;\n  min-height:34px!important;\n  max-height:34px!important;\n  overflow:hidden!important;\n  border-radius:6px!important;\n}\n#userSettingsModal .user-fill-thumb img{\n  display:block!important;\n  width:84px!important;\n  min-width:84px!important;\n  max-width:84px!important;\n  height:34px!important;\n  min-height:34px!important;\n  max-height:34px!important;\n  object-fit:cover!important;\n  transform:none!important;\n}\n#userSettingsModal .user-fill-text{\n  display:block!important;\n  width:84px!important;\n  min-height:18px!important;\n  max-height:20px!important;\n  font-size:15px!important;\n  line-height:18px!important;\n  overflow:hidden!important;\n  white-space:nowrap!important;\n}\n#userSettingsModal .user-fill-option strong{\n  display:block!important;\n  width:84px!important;\n  font-size:10px!important;\n  line-height:12px!important;\n  overflow:hidden!important;\n  text-overflow:ellipsis!important;\n  white-space:nowrap!important;\n}\n#userSettingsModal .font-percent-buttons{display:flex!important;gap:8px!important;flex-wrap:wrap!important}\n#userSettingsModal .font-percent-btn{cursor:pointer!important;pointer-events:auto!important;position:relative!important;z-index:2!important}\n@media(max-width:600px){\n  #userSettingsModal .user-fill-picker{grid-template-columns:repeat(3,86px)!important}\n  #userSettingsModal .user-fill-option{width:86px!important;min-width:86px!important;max-width:86px!important}\n  #userSettingsModal .user-fill-thumb,#userSettingsModal .user-fill-thumb img,#userSettingsModal .user-fill-text,#userSettingsModal .user-fill-option strong{width:74px!important;min-width:74px!important;max-width:74px!important}\n}\n
/* Update 118: extrem kompakte Fill-Auswahl */
#userSettingsModal .user-fill-picker{
  display:grid!important;
  grid-template-columns:repeat(auto-fill, minmax(72px, 82px))!important;
  gap:7px!important;
  justify-content:start!important;
}
#userSettingsModal .user-fill-option{
  width:82px!important;
  min-width:82px!important;
  max-width:82px!important;
  height:54px!important;
  min-height:54px!important;
  max-height:54px!important;
  padding:4px!important;
  gap:2px!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:flex-start!important;
  overflow:hidden!important;
}
#userSettingsModal .user-fill-mini-label{
  display:block!important;
  width:100%!important;
  height:12px!important;
  line-height:12px!important;
  font-size:9px!important;
  font-weight:600!important;
  color:#aeb8c3!important;
  text-align:center!important;
  margin:0!important;
  padding:0!important;
}
#userSettingsModal .user-fill-thumb{
  display:block!important;
  width:50%!important;
  min-width:0!important;
  max-width:50%!important;
  height:20px!important;
  min-height:20px!important;
  max-height:20px!important;
  margin:2px auto 0!important;
  border-radius:4px!important;
  overflow:hidden!important;
}
#userSettingsModal .user-fill-thumb img{
  display:block!important;
  width:100%!important;
  min-width:0!important;
  max-width:100%!important;
  height:20px!important;
  min-height:20px!important;
  max-height:20px!important;
  object-fit:cover!important;
  transform:none!important;
}
#userSettingsModal .user-fill-text{display:none!important}
#userSettingsModal .user-fill-hidden-name{display:none!important}
@media(max-width:600px){
  #userSettingsModal .user-fill-picker{grid-template-columns:repeat(auto-fill,72px)!important}
  #userSettingsModal .user-fill-option{width:72px!important;min-width:72px!important;max-width:72px!important}
}

/* Update 119: alle 8 Fill-Slots in einer Reihe */
#userSettingsModal .user-fill-picker{
  display:grid!important;
  grid-template-columns:repeat(8,72px)!important;
  gap:6px!important;
  justify-content:start!important;
  align-items:start!important;
  overflow-x:auto!important;
  overflow-y:hidden!important;
  padding-bottom:4px!important;
}
#userSettingsModal .user-fill-option{
  width:72px!important;
  min-width:72px!important;
  max-width:72px!important;
  height:66px!important;
  min-height:66px!important;
  padding:4px!important;
}
#userSettingsModal .user-fill-mini-label{
  display:block!important;
  font-size:9px!important;
  line-height:10px!important;
  margin-bottom:2px!important;
  text-align:center!important;
}
#userSettingsModal .user-fill-thumb{
  width:50%!important;
  min-width:50%!important;
  max-width:50%!important;
  height:20px!important;
  min-height:20px!important;
  max-height:20px!important;
  margin:0 auto!important;
}
#userSettingsModal .user-fill-thumb img{
  width:100%!important;
  min-width:100%!important;
  max-width:100%!important;
  height:20px!important;
  min-height:20px!important;
  max-height:20px!important;
  object-fit:cover!important;
}
@media(max-width:700px){
  #userSettingsModal .user-fill-picker{grid-template-columns:repeat(8,68px)!important}
  #userSettingsModal .user-fill-option{width:68px!important;min-width:68px!important;max-width:68px!important}
}

/* Update 120: persoenliche Chat-Anzeige 100 / 150 / 200 % */
:root{--user-chat-scale:1}
.chat-display-card{background:#10161d;border:2px solid #314052;border-radius:14px;padding:14px}
.chat-display-buttons{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.chat-display-btn{min-width:82px;padding:10px 14px;border:2px solid #314052;border-radius:10px;background:#171f28;color:#eef2f7;font-weight:800;font-size:15px;cursor:pointer}
.chat-display-btn:hover{background:#23303d}
.chat-display-btn.selected{border-color:#f1a94d;box-shadow:0 0 0 2px #f1a94d44;color:#ffd08b}
.chat-display-hint{margin-top:9px;color:#8f9dab;font-size:12px}
#messages .msg-username{font-size:calc(var(--chat-username-size,18px) * var(--user-chat-scale))}
/* Uhrzeit bleibt immer in der Admin-Grundgröße und wird nicht mit der User-Anzeige skaliert */
#messages .msg-time{font-size:var(--chat-time-size,12px)!important}
#messages .whisper-tag{font-size:calc(12px * var(--user-chat-scale))}
#messages .chat-smilie.shared-chat-smilie{height:calc(54px * var(--user-chat-scale))!important;max-width:calc(150px * var(--user-chat-scale))!important}
@media(max-width:650px){.chat-display-btn{flex:1;min-width:72px}}

/* Update 123: Fill-Vorschauen im Admin so kompakt wie im User-Dialog */
.admin-main .user-fill-admin-grid{
  display:grid!important;
  grid-template-columns:repeat(8,88px)!important;
  gap:8px!important;
  justify-content:start!important;
  align-items:start!important;
  overflow-x:auto!important;
  padding-bottom:6px!important;
}
.admin-main .user-fill-admin-card{
  width:88px!important;
  min-width:88px!important;
  max-width:88px!important;
  padding:6px!important;
  border-radius:9px!important;
}
.admin-main .fill-card-number{
  font-size:10px!important;
  line-height:12px!important;
  margin:0 0 4px!important;
  text-align:center!important;
}
.admin-main .fill-image-preview{
  width:50%!important;
  min-width:50%!important;
  max-width:50%!important;
  height:20px!important;
  min-height:20px!important;
  max-height:20px!important;
  margin:0 auto 5px!important;
  border-radius:4px!important;
}
.admin-main .fill-image-preview img{
  width:100%!important;
  min-width:100%!important;
  max-width:100%!important;
  height:20px!important;
  min-height:20px!important;
  max-height:20px!important;
  object-fit:cover!important;
}
.admin-main .user-fill-admin-card label{
  font-size:10px!important;
  margin-top:4px!important;
}
.admin-main .user-fill-admin-card input[type=text],
.admin-main .user-fill-admin-card input:not([type]){
  padding:5px!important;
  font-size:10px!important;
}
.admin-main .user-fill-admin-card input[type=file]{
  width:100%!important;
  padding:3px!important;
  font-size:9px!important;
}
.admin-main .remove-fill{
  font-size:9px!important;
  line-height:1.1!important;
}
@media(max-width:900px){
  .admin-main .user-fill-admin-grid{grid-template-columns:repeat(8,82px)!important}
  .admin-main .user-fill-admin-card{width:82px!important;min-width:82px!important;max-width:82px!important}
}

/* Update 124: optionaler Chat-Banner oben links */
.chat-banner-wrap{display:flex;align-items:center;min-width:0;max-width:min(520px,45vw);height:56px;overflow:hidden}
.chat-banner{display:block;max-width:100%;max-height:56px;width:auto;height:auto;object-fit:contain;object-position:left center}
.banner-admin-row{display:grid;grid-template-columns:minmax(220px,420px) minmax(260px,1fr);gap:18px;align-items:start}
.banner-admin-preview{height:100px;border:1px solid #334050;border-radius:10px;background:#0b1117;display:flex;align-items:center;justify-content:flex-start;overflow:hidden;padding:8px;color:#798899}
.banner-admin-preview img{display:block;max-width:100%;max-height:84px;width:auto;height:auto;object-fit:contain}
.banner-admin-controls label{display:block;margin-bottom:12px;color:#b8c3cf;font-weight:600}
.banner-admin-controls input[type=file]{display:block;width:100%;margin-top:7px;padding:9px;border-radius:9px;border:1px solid #39485a;background:#0e141b;color:#fff}
@media(max-width:800px){.banner-admin-row{grid-template-columns:1fr}.chat-banner-wrap{max-width:42vw;height:46px}.chat-banner{max-height:46px}}

/* Update 125: Avatare im Chat + Upload im Userpanel/Admin */
.msg-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:4px}
.msg-avatar{width:50px;height:50px;border-radius:999px;object-fit:cover;flex:0 0 50px;border:2px solid rgba(255,255,255,.16);background:#0c1219;box-shadow:0 2px 6px rgba(0,0,0,.25)}
.msg-time{margin-left:auto}

.avatar-settings-card{display:flex;gap:16px;align-items:center;flex-wrap:wrap;background:#10161d;border:2px solid #314052;border-radius:14px;padding:14px}
.avatar-preview-wrap{width:84px;height:84px;display:flex;align-items:center;justify-content:center}
.settings-avatar-preview,.settings-avatar-placeholder{width:78px;height:78px;border-radius:999px;border:2px solid #3b4a5b;background:#0b1117;object-fit:cover;display:flex;align-items:center;justify-content:center;text-align:center;color:#d5dde5;font-size:12px;padding:6px}
.avatar-settings-actions{display:flex;flex-direction:column;gap:10px;min-width:220px;flex:1}
.avatar-upload-label{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:10px 14px;border-radius:10px;background:#263240;color:#f4f7fa;border:1px solid #3b4a5b;font-weight:700;cursor:pointer;width:max-content}
.avatar-upload-label input[type=file]{display:none}
.avatar-remove-button{padding:10px 14px;border-radius:10px;border:1px solid #6d3d49;background:#3a1820;color:#ffe4ea;font-weight:700;width:max-content}
.avatar-upload-status{min-height:20px;color:#9fb0c0;font-size:14px}

.avatar-admin-preview img{max-width:120px;max-height:120px;width:120px;height:120px;object-fit:cover;border-radius:999px;border:2px solid #3b4a5b;background:#0b1117}

@media(max-width:700px){
  .msg-avatar{width:50px;height:50px;flex-basis:50px}
  .avatar-settings-card{align-items:flex-start}
}

/* Update 127: Rollenfarben / OnAir */
.role-color-grid input[type=color]{height:46px;padding:4px;cursor:pointer}
.login-page{min-height:100vh;margin:0;background:radial-gradient(circle at top,#202b37 0,#10161d 46%,#0a0f14 100%);color:#eef3f8;display:grid;place-items:center;padding:28px;font-family:Arial,Helvetica,sans-serif}
.login-shell{width:min(980px,96vw);display:grid;grid-template-columns:minmax(280px,.9fr) minmax(360px,1.1fr);background:#111820;border:1px solid #334252;border-radius:24px;overflow:hidden;box-shadow:0 30px 90px #000b}
.login-hero{padding:46px 38px;background:linear-gradient(145deg,#202c39,#141b23);display:flex;flex-direction:column;justify-content:center;min-height:520px}
.login-logo-mark{width:86px;height:86px;border-radius:24px;display:grid;place-items:center;background:#f1a94d;color:#17110a;font-weight:900;font-size:28px;box-shadow:0 12px 30px #0007;margin-bottom:24px}
.login-hero h1{font-size:38px;line-height:1.05;margin:0 0 14px;color:#fff}
.login-hero p{font-size:18px;line-height:1.55;color:#b9c5d0;margin:0 0 24px}
.login-feature-line{display:flex;gap:9px;flex-wrap:wrap}.login-feature-line span{background:#0e141b;border:1px solid #344253;border-radius:999px;padding:8px 11px;color:#d9e1e9;font-size:13px}
.login-panel{padding:28px 32px 24px;background:#151c24}
.login-tabs{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:7px;background:#0f151c;padding:6px;border-radius:13px;margin-bottom:24px}.login-tabs a{padding:11px 10px;text-align:center;border-radius:9px;color:#aeb9c5;font-weight:700;text-decoration:none}.login-tabs a.active{background:#293746;color:#fff;box-shadow:inset 0 0 0 1px #40536a}.login-tabs a:hover{color:#fff}
.login-form h2{font-size:28px;margin:8px 0 18px}.login-form label{display:block;color:#c7d0d9;font-weight:700;margin:14px 0}.login-form input{display:block;width:100%;box-sizing:border-box;margin-top:7px;padding:13px 14px;background:#0d1319;border:1px solid #3a495b;border-radius:11px;color:#fff;font-size:16px;outline:none}.login-form input:focus{border-color:#f1a94d;box-shadow:0 0 0 3px #f1a94d22}.login-main-button{width:100%;margin-top:8px;padding:13px 16px;border-radius:11px;background:#d9953f;color:#17110a;border:0;font-size:17px;font-weight:900;cursor:pointer}.login-main-button:hover{filter:brightness(1.08)}
.login-hint,.login-footer-note{color:#9eabb8;line-height:1.5}.login-footer-note{font-size:12px;margin:20px 0 0;text-align:center}.login-message{padding:11px 13px;border-radius:10px;margin:0 0 16px}.login-message.error{background:#421d24;border:1px solid #85404d;color:#ffdce1}
@media(max-width:760px){.login-page{padding:14px}.login-shell{grid-template-columns:1fr}.login-hero{min-height:auto;padding:28px}.login-logo-mark{width:66px;height:66px;border-radius:18px;font-size:22px;margin-bottom:16px}.login-hero h1{font-size:30px}.login-panel{padding:22px 18px}.login-tabs{grid-auto-flow:row;grid-auto-columns:auto;grid-template-columns:1fr}.login-tabs a{padding:9px}.login-form h2{font-size:24px}}

/* Update 131: Admin-Einstellungen in übersichtlichen Reitern */
.admin-settings-tabs{
  display:flex;
  gap:8px;
  align-items:center;
  flex-wrap:wrap;
  margin:0 0 18px;
  padding:8px;
  border:1px solid #2d3947;
  border-radius:14px;
  background:#111820;
  position:sticky;
  top:0;
  z-index:20;
  box-shadow:0 10px 30px rgba(0,0,0,.22);
}
.admin-settings-tab{
  appearance:none;
  border:1px solid #354557;
  background:#18212b;
  color:#c7d1dc;
  padding:10px 13px;
  border-radius:10px;
  font-weight:800;
  font-size:14px;
  line-height:1.15;
  cursor:pointer;
  text-decoration:none;
  white-space:nowrap;
}
.admin-settings-tab:hover{background:#22303d;color:#fff}
.admin-settings-tab.active{
  background:#d9953f;
  color:#17110a;
  border-color:#f1b867;
  box-shadow:0 0 0 2px rgba(241,169,77,.15);
}
.admin-setting-panel[hidden]{display:none!important}
.admin-setting-panel{animation:adminTabIn .16s ease-out}
@keyframes adminTabIn{from{opacity:.35;transform:translateY(3px)}to{opacity:1;transform:none}}

/* Der Speichern-Button bleibt bei allen Reitern erreichbar. */
#chatSettingsForm .settings-actions{
  position:sticky;
  bottom:0;
  z-index:18;
  margin-top:10px;
  padding:14px 0 4px;
  background:linear-gradient(transparent,#0e1319 34%);
}

@media(max-width:760px){
  .admin-settings-tabs{flex-wrap:nowrap;overflow-x:auto;top:0;padding:7px}
  .admin-settings-tab{flex:0 0 auto;font-size:13px;padding:9px 11px}
}

/* Update 134: Rollenfarben im Admin deutlich sichtbar */
.role-colors-panel{border:1px solid #3c4c5f;background:#151d26}
.role-color-cards{display:grid;grid-template-columns:repeat(4,minmax(150px,1fr));gap:14px;margin-top:16px}
.role-color-card{display:flex;flex-direction:column;align-items:center;gap:9px;padding:16px 12px;border:1px solid #3b495a;border-radius:14px;background:#0f161e;color:#eef3f7;font-weight:800;text-align:center}
.role-color-card span{font-size:18px}
.role-color-card input[type=color]{display:block!important;width:86px!important;height:54px!important;min-height:54px!important;padding:3px!important;margin:0!important;border:2px solid #65768a!important;border-radius:10px!important;background:#0a1016!important;cursor:pointer}
.role-color-card small{font-weight:400;color:#9facba;line-height:1.35}
.role-color-card.onair{border-color:#9b7b28;box-shadow:0 0 0 1px rgba(255,205,62,.12) inset}
.role-color-save-note{margin:14px 0 0;padding:10px 12px;border-radius:9px;background:#0d141b;color:#cbd6df}
@media(max-width:900px){.role-color-cards{grid-template-columns:repeat(2,minmax(140px,1fr))}}
@media(max-width:520px){.role-color-cards{grid-template-columns:1fr 1fr}}

/* Update 135: Name im Chat übernimmt Text-Fill; Online-Liste zeigt Rollenfarbe */
.msg-username-fill{
  display:inline-block;
  background-size:cover;
  background-position:center;
  background-repeat:repeat;
  background-clip:text;
  -webkit-background-clip:text;
  color:transparent!important;
  -webkit-text-fill-color:transparent;
}
.online-name-colored{font-weight:700}
.online-role-colored{font-weight:700;margin-left:6px}

/* Update 136: User kann Farbe, Gradient oder Filltext wählen */
.text-style-mode-row{display:flex;gap:8px;flex-wrap:wrap}
.text-style-mode-btn{padding:10px 16px;border-radius:10px;border:1px solid #3a4a5d;background:#18212b;color:#dce5ee;font-weight:800;cursor:pointer}
.text-style-mode-btn.selected{background:#d9953f;color:#17110a;border-color:#f1b867;box-shadow:0 0 0 2px rgba(241,169,77,.16)}
.gradient-style-card{border:2px solid #314052;border-radius:14px;background:#10161d;padding:14px}
.gradient-style-card.selected{border-color:#f1a94d;box-shadow:0 0 0 2px #f1a94d44}
.gradient-controls{display:flex;align-items:center;gap:12px;flex-wrap:wrap;color:#c8d3de}
.gradient-controls label{display:flex;align-items:center;gap:8px;font-weight:700}
.gradient-controls input[type=color]{width:54px;height:38px;padding:2px;border:0;background:transparent;cursor:pointer}
.gradient-preview{margin-top:10px;font-weight:900;line-height:1.2;background-clip:text;-webkit-background-clip:text;color:transparent;-webkit-text-fill-color:transparent;display:inline-block}
.message-text-gradient,.msg-username-gradient{display:inline-block;background-clip:text;-webkit-background-clip:text;color:transparent!important;-webkit-text-fill-color:transparent;background-size:100% 100%;background-repeat:no-repeat}
.msg-username-gradient{font-weight:800}

/* Update 137: Namensstil getrennt vom Nachrichtentext */
.name-style-mode-row{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0 14px}
.name-style-mode-btn{padding:9px 14px;border-radius:10px;border:1px solid #3a495a;background:#151d26;color:#eef3f8;font-weight:700}
.name-style-mode-btn.selected{border-color:#f1a94d;box-shadow:0 0 0 2px #f1a94d44;background:#25303b}
.name-style-choice-grid{display:grid;grid-template-columns:repeat(2,minmax(220px,1fr));gap:12px}
.name-color-card,.name-gradient-card{background:#10161d;border:2px solid #314052;border-radius:14px;padding:14px}
.name-color-card.selected,.name-gradient-card.selected{border-color:#f1a94d;box-shadow:0 0 0 2px #f1a94d44}
.name-color-card label{display:flex;align-items:center;justify-content:space-between;gap:12px;color:#c7d0da}
.name-color-card input[type=color],.name-gradient-card input[type=color]{width:48px;height:36px;padding:1px;border:0;background:transparent;cursor:pointer}
.name-style-preview,.name-gradient-card .gradient-preview{margin-top:12px;font-size:24px;font-weight:900;line-height:1.2}
.msg-username-gradient{display:inline-block;background-clip:text;-webkit-background-clip:text;color:transparent!important;-webkit-text-fill-color:transparent;background-size:100% 100%;background-repeat:no-repeat}
@media(max-width:700px){.name-style-choice-grid{grid-template-columns:1fr}}

/* Update 140: User kann automatisches Scrollen ein-/ausschalten */
.chat-scroll-card{background:#10161d;border:2px solid #314052;border-radius:14px;padding:14px}
.chat-scroll-buttons{display:flex;gap:10px;flex-wrap:wrap;margin-top:10px}
.chat-scroll-btn{padding:10px 14px;border-radius:10px;border:1px solid #3b4a5b;background:#202a35;color:#eef3f8;font-weight:700}
.chat-scroll-btn.selected{border-color:#f1a94d;box-shadow:0 0 0 2px #f1a94d44;background:#342818}