:root{
  --bg:#0f1115;
  --panel:#171a21;
  --panel-2:#1d2230;
  --text:#e8ecf3;
  --muted:#9aa4b2;
  --line:#2a3142;
  --accent:#5aa9ff;
  --ok:#22c55e;
  --nok:#ef4444;
  --warn:#f59e0b;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:Inter,Segoe UI,Roboto,Arial,sans-serif;
  background:var(--bg);
  color:var(--text);
  line-height:1.45;
}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}

/* Layout */
.container{
  width:min(1280px,96vw);
  margin:24px auto;
}
.card{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:14px;
  padding:16px;
  box-shadow:0 8px 30px rgba(0,0,0,.25);
}
.row{display:flex;gap:10px;flex-wrap:wrap}
.col{display:flex;flex-direction:column;gap:10px}

/* Navbar */
.navbar{
  position:sticky; top:0; z-index:50;
  background:rgba(15,17,21,.92);
  backdrop-filter: blur(8px);
  border-bottom:1px solid var(--line);
}
.nav-inner{
  width:min(1280px,96vw);
  margin:0 auto;
  padding:10px 0;
  display:flex;align-items:center;justify-content:space-between;gap:12px;
}
.nav-links{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.btn,button{
  background:var(--panel-2);
  color:var(--text);
  border:1px solid var(--line);
  border-radius:10px;
  padding:8px 12px;
  cursor:pointer;
}
.btn:hover,button:hover{filter:brightness(1.08)}
.btn-primary{background:#1f3b66;border-color:#2c4d83}

/* Inputs */
input,select,textarea{
  width:100%;
  background:#121722;
  color:var(--text);
  border:1px solid var(--line);
  border-radius:10px;
  padding:10px 12px;
  outline:none;
}
input:focus,select:focus,textarea:focus{
  border-color:#3b82f6;
  box-shadow:0 0 0 3px rgba(59,130,246,.2);
}
label{font-size:.92rem;color:var(--muted)}

/* Auth pages */
.auth-wrap{max-width:520px;margin:40px auto}
.auth-title{margin:0 0 14px 0}

/* Tables */

table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  min-width:1050px;
}
thead th{
  position:sticky; top:0;
  background:#121722;
  color:#cfd7e4;
  font-weight:600;
  border-bottom:1px solid var(--line);
  padding:10px;
  text-align:left;
}
tbody td{
  border-bottom:1px solid var(--line);
  padding:10px;
  vertical-align:middle;
}
tbody tr:nth-child(odd){background:rgba(255,255,255,.01)}
tbody tr:hover{background:rgba(90,169,255,.07)}

/* Status Icons */

   /* gelb/orange */
.dot-active{background:#7f1d1d}    /* dunkelrot */

/* Action groups */

.inline{display:inline}

/* Small helpers */
.muted{color:var(--muted)}

/* Admin submenu card style */
.admin-subnav{
  display:flex;gap:8px;flex-wrap:wrap;
  margin:0 0 14px 0;
}
.admin-subnav a{
  background:var(--panel-2);
  border:1px solid var(--line);
  border-radius:10px;
  padding:8px 12px;
  color:var(--text);
}

/* Generator cards */
.grid-2{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
}
@media (max-width:980px){
  .grid-2{grid-template-columns:1fr}
  .container,.nav-inner{width:min(1280px,98vw)}
}

/* V10.2 icon polish */

/* V10.2 FINAL ICON/UI */
.table-wrap{overflow:auto}
.admin-table{width:100%;border-collapse:separate;border-spacing:0;min-width:1200px}
.admin-table th,.admin-table td{
  border-bottom:1px solid rgba(148,163,184,.25);
  padding:10px;
  vertical-align:middle;
  white-space:nowrap;
}
.admin-table th{
  position:sticky;top:0;z-index:1;
  background:#0f172a;
}
.center{text-align:center}

.icon{
  display:inline-flex;align-items:center;justify-content:center;
  width:22px;height:22px;border-radius:999px;
  font-weight:800;font-size:14px;line-height:1;
}
.icon-ok{
  background:#163a22;
  border:1px solid #2f8f46;
  color:#79e38f;
}
.icon-nok{
  background:#3a1616;
  border:1px solid #b04242;
  color:#ff8a8a;
}

.dot{
  display:inline-block;width:10px;height:10px;border-radius:999px;
  vertical-align:middle;margin:0 4px;
}
.dot-passive{
  background:#eab308;
  box-shadow:0 0 0 1px #a16207 inset;
}

.actions{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.spacer{height:6px}

/* Checkbox optisch verstecken, aber funktional lassen */
.actions input[type="checkbox"]{
  position:absolute;opacity:0;pointer-events:none;
}
.actions label{
  display:inline-flex;align-items:center;gap:4px;
  border:1px solid rgba(148,163,184,.35);
  padding:6px 8px;border-radius:10px;
  background:#0b1220;
  cursor:pointer;
}
.actions input[type="checkbox"]:checked + .dot-passive{
  background:#7f1d1d;                 /* dunkelrot = aktiv */
  box-shadow:0 0 0 1px #991b1b inset;
}

/* ===== V10.3 Generator UI polish (layout only) ===== */

/* Generator Bereich: zentrierte, kompakte Breite */
.generator-wrap,
.generator-card,
.generator-panel,
form.generator-form {
  max-width: 980px;
  margin-left: auto;
  margin-right: auto;
}

/* Falls die Seite nur ein normales Formular hat: */
main .card form[action*="generator"],
main form[action*="generator"] {
  max-width: 980px;
  margin-left: auto;
  margin-right: auto;
}

/* 1) Slider auf ca. 50% der bisherigen Breite */
.length-wrap,
.slider-wrap,
.generator-length {
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}
.length-wrap input[type="range"],
.slider-wrap input[type="range"],
.generator-length input[type="range"],
input[type="range"][name="length"] {
  width: 100%;
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
  display: block;
}

/* 2) Checkbox-Optionen als zentrierte Boxen */
.generator-flags,
.flags-grid,
.options-grid,
.checkbox-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(150px, 1fr));
  gap: 10px;
  max-width: 820px;
  margin: 14px auto 10px auto;
  align-items: stretch;
}

@media (max-width: 900px) {
  .generator-flags,
  .flags-grid,
  .options-grid,
  .checkbox-row {
    grid-template-columns: repeat(2, minmax(150px, 1fr));
  }
}
@media (max-width: 560px) {
  .generator-flags,
  .flags-grid,
  .options-grid,
  .checkbox-row {
    grid-template-columns: 1fr;
  }
}

/* Einzelne Option-Box */
.generator-flags label,
.flags-grid label,
.options-grid label,
.checkbox-row label {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 12px;
  min-height: 44px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(9,20,44,.45);
  text-align: center;
  cursor: pointer;
  user-select: none;
}

/* 3) Sonderzeichen-Feld kompakt + mittig */
.generator-symbols,
.symbols-wrap,
.specials-wrap {
  max-width: 760px;
  margin: 10px auto 0 auto;
}
.generator-symbols input[type="text"],
.symbols-wrap input[type="text"],
.specials-wrap input[type="text"],
input[name="specials"] {
  width: 100%;
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
  display: block;
}

/* 4) Output-Felder kompakt + mittig */
.generator-output,
.output-wrap,
.password-output {
  max-width: 760px;
  margin: 14px auto 0 auto;
}
.generator-output input[type="text"],
.output-wrap input[type="text"],
.password-output input[type="text"],
input[name="server_password"],
input[name="local_password"],
#server_password,
#local_password {
  width: 100%;
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
  display: block;
}

/* Buttons im Generator etwas sauber gruppieren */
.generator-actions,
.actions-row {
  display: flex;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 12px;
}

/* Kleine visuelle Ordnung für Labels im Generator */
.generator-wrap label,
.generator-card label,
.generator-panel label,
form.generator-form label {
  display: block;
  margin-bottom: 6px;
}

/* ===== END V10.3 ===== */

/* ===== V10.3b FORCE Generator Layout ===== */
.gen-wrap{
  max-width: 960px;
  margin: 0 auto;
}

.gen-length{
  max-width: 640px;   /* ~50% Gefühl statt full width */
  margin: 8px auto 14px auto;
}
.gen-length input[type="range"]{
  width: 100%;
  display: block;
}

.gen-flags{
  max-width: 820px;
  margin: 8px auto 14px auto;
  display: grid;
  grid-template-columns: repeat(4, minmax(150px,1fr));
  gap: 10px;
}
@media (max-width: 900px){ .gen-flags{grid-template-columns: repeat(2,minmax(150px,1fr));} }
@media (max-width: 560px){ .gen-flags{grid-template-columns: 1fr;} }

.gen-flags label{
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(9,20,44,.45);
  padding: 10px 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-align: center;
  min-height: 44px;
}

.gen-input.gen-specials{
  max-width: 760px !important;
  width: 100% !important;
  display: block;
  margin: 0 auto 14px auto;
}

.gen-input.gen-out{
  max-width: 760px !important;
  width: 100% !important;
  display: block;
  margin: 0 auto 14px auto;
}

/* Fallback: wenn Klassen nicht gesetzt wurden */
form[action*="generator"] input[type="range"]{
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
  display:block;
}
form[action*="generator"] input[name="specials"],
form[action*="generator"] input[name="server_password"],
form[action*="generator"] input[name="local_password"],
form[action*="generator"] #specials,
form[action*="generator"] #server_password,
form[action*="generator"] #local_password{
  max-width: 760px;
  width: 100%;
  margin-left:auto;
  margin-right:auto;
  display:block;
}
/* ===== END V10.3b ===== */

/* ===== V10.3c Generator clean layout ===== */
.gen-wrap{
  max-width: 960px;
  margin: 0 auto;
}

.gen-length{
  max-width: 640px;
  margin: 8px auto 14px auto;
}
.gen-length input[type="range"]{
  width: 100%;
  display: block;
}

.gen-flags{
  max-width: 820px;
  margin: 8px auto 14px auto;
  display: grid;
  grid-template-columns: repeat(4, minmax(150px,1fr));
  gap: 10px;
}
@media (max-width: 900px){ .gen-flags{grid-template-columns: repeat(2,minmax(150px,1fr));} }
@media (max-width: 560px){ .gen-flags{grid-template-columns: 1fr;} }

.gen-flags label{
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(9,20,44,.45);
  padding: 10px 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-align: center;
  min-height: 44px;
}

.gen-input.gen-specials,
.gen-input.gen-out{
  max-width: 760px;
  width: 100%;
  display: block;
  margin: 0 auto 14px auto;
}
/* ===== END V10.3c ===== */

/* ===== Generator clean layout final ===== */
.gen-wrap{
  max-width: 960px;
  margin: 0 auto;
}
.gen-length{
  max-width: 640px; /* ca. 50% kürzer als full width */
  margin: 8px auto 14px auto;
}
.gen-length input[type="range"]{
  width: 100%;
  display: block;
}
.gen-flags{
  max-width: 820px;
  margin: 8px auto 14px auto;
  display: grid;
  grid-template-columns: repeat(4, minmax(150px,1fr));
  gap: 10px;
}
@media (max-width: 900px){ .gen-flags{grid-template-columns: repeat(2,minmax(150px,1fr));} }
@media (max-width: 560px){ .gen-flags{grid-template-columns: 1fr;} }

.gen-flags label{
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(9,20,44,.45);
  padding: 10px 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-align: center;
  min-height: 44px;
}
.gen-input.gen-specials,
.gen-input.gen-out{
  max-width: 760px;
  width: 100%;
  display: block;
  margin: 0 auto 14px auto;
}
/* ===== END Generator clean layout final ===== */

/* ===== V10.3d label centering ===== */
.gen-length > label{
  display:block;
  text-align:center;
  margin-bottom:8px;
}

.gen-wrap > label{
  display:block;
  text-align:center;
  margin: 0 auto 8px auto;
  max-width: 760px;
}
/* ===== END V10.3d ===== */