:root {
  color-scheme: dark;
  --ink: #06100f;
  --ink-soft: #0b1917;
  --panel: #10211e;
  --panel-2: #142925;
  --line: rgba(232, 210, 163, .16);
  --line-strong: rgba(232, 210, 163, .30);
  --cream: #f5ecd7;
  --muted: #a8b4ad;
  --teal: #079b93;
  --teal-bright: #1cc8ba;
  --teal-dark: #06645f;
  --gold: #d8b168;
  --gold-soft: #edd49e;
  --danger: #df746a;
  --success: #4ed09b;
  --shadow: 0 28px 80px rgba(0, 0, 0, .38);
  --radius: 22px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; min-width: 300px; color: var(--cream); background: var(--ink); font: 15px/1.55 Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; }
button, input, textarea, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { color: inherit; }
a { color: inherit; text-decoration: none; }
:focus-visible { outline: 2px solid var(--teal-bright); outline-offset: 3px; }

.app-body {
  min-height: 100vh;
  background:
    radial-gradient(circle at 12% 12%, rgba(7, 155, 147, .11), transparent 32rem),
    radial-gradient(circle at 88% 76%, rgba(216, 177, 104, .08), transparent 30rem),
    var(--ink);
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 40;
  height: 84px;
  padding: 0 max(24px, calc((100vw - 1320px) / 2));
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 24px;
  border-bottom: 1px solid var(--line);
  background: rgba(6, 16, 15, .88);
  backdrop-filter: blur(20px);
}

.brand { display: inline-flex; align-items: center; gap: 12px; justify-self: start; }
.brand img { width: 52px; height: 52px; object-fit: contain; filter: drop-shadow(0 8px 16px rgba(0,0,0,.35)); }
.brand span { display: grid; line-height: 1; }
.brand strong { font: 800 18px/1.1 Georgia, serif; letter-spacing: .15em; color: var(--gold-soft); }
.brand small { margin-top: 6px; color: var(--muted); font-size: 10px; text-transform: uppercase; letter-spacing: .19em; }

.menu-wrap { position: relative; justify-self: center; }
.menu-button {
  min-width: 148px;
  height: 46px;
  padding: 0 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 11px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: rgba(20, 41, 37, .8);
  cursor: pointer;
  font-weight: 700;
  letter-spacing: .02em;
}
.menu-button:hover, .menu-button[aria-expanded="true"] { border-color: rgba(28, 200, 186, .6); background: var(--panel-2); }
.menu-lines { width: 17px; display: grid; gap: 5px; }
.menu-lines i { display: block; height: 1px; background: var(--gold-soft); }
.menu-lines i:last-child { width: 11px; }
.chevron { color: var(--muted); margin-left: 2px; transition: transform .2s ease; }
.menu-button[aria-expanded="true"] .chevron { transform: rotate(180deg); }

.main-menu {
  position: absolute;
  top: calc(100% + 12px);
  left: 50%;
  width: min(350px, calc(100vw - 28px));
  padding: 12px;
  transform: translateX(-50%);
  border: 1px solid var(--line-strong);
  border-radius: 20px;
  background: rgba(10, 26, 23, .98);
  box-shadow: var(--shadow);
}
.main-menu { max-height: min(650px, calc(100vh - 92px)); overflow-y: auto; }
.main-menu[hidden] { display: none; }
.main-menu p { margin: 5px 10px 9px; color: var(--gold); font-size: 10px; letter-spacing: .18em; }
.main-menu p:not(:first-child) { margin-top: 17px; padding-top: 12px; border-top: 1px solid rgba(216,177,104,.11); }
.main-menu button {
  width: 100%;
  padding: 12px 13px;
  display: flex;
  align-items: center;
  border: 0;
  border-radius: 12px;
  background: transparent;
  text-align: left;
  cursor: pointer;
}
.main-menu button:hover, .main-menu button.active { background: rgba(28, 200, 186, .10); color: var(--teal-bright); }
.main-menu button.feature-off { color: #77827d; }
.main-menu button.feature-off::after { content: "Aus"; margin-left: auto; padding: 3px 7px; border: 1px solid rgba(168, 180, 173, .14); border-radius: 999px; color: #8e9993; font-size: 9px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }

.account { justify-self: end; display: flex; align-items: center; gap: 10px; }
.account-copy { display: grid; text-align: right; line-height: 1.1; }
.account-copy strong { font-size: 13px; }
.account-copy small { margin-top: 5px; color: var(--muted); font-size: 10px; }
.account img { width: 39px; height: 39px; border: 1px solid var(--line-strong); border-radius: 50%; object-fit: cover; background: var(--panel); }
.icon-button { width: 38px; height: 38px; border: 1px solid transparent; border-radius: 50%; background: transparent; cursor: pointer; color: var(--muted); }
.icon-button:hover { color: var(--cream); border-color: var(--line); background: var(--panel); }

.app-shell { width: min(1320px, calc(100% - 48px)); margin: 0 auto; padding: 34px 0 70px; }
.loading-state { min-height: calc(100vh - 180px); display: grid; place-content: center; justify-items: center; color: var(--muted); }
.loading-state img { width: 110px; height: 110px; object-fit: contain; animation: breathe 1.6s ease-in-out infinite; }
@keyframes breathe { 50% { transform: scale(.96); opacity: .68; } }

.eyebrow { margin: 0 0 11px; color: var(--teal-bright); font-size: 11px; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; }
.page-heading { margin: 0 0 24px; display: flex; align-items: end; justify-content: space-between; gap: 20px; }
.page-heading h1 { margin: 0; font: 700 clamp(34px, 5vw, 58px)/.98 Georgia, serif; letter-spacing: -.045em; }
.page-heading p:not(.eyebrow) { max-width: 620px; margin: 12px 0 0; color: var(--muted); }

.hero {
  position: relative;
  min-height: min(640px, calc(100vh - 145px));
  display: flex;
  align-items: end;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 30px;
  background-image:
    linear-gradient(90deg, rgba(4, 12, 11, .97) 0%, rgba(4, 12, 11, .77) 48%, rgba(4, 12, 11, .16) 100%),
    linear-gradient(0deg, rgba(4, 12, 11, .9), transparent 48%),
    url('/assets/group-background.png');
  background-size: cover;
  background-position: center;
  box-shadow: var(--shadow);
}
.hero::before { content: ""; position: absolute; inset: 0; border: 1px solid rgba(255,255,255,.04); border-radius: inherit; pointer-events: none; }
.hero-mark { position: absolute; top: 34px; right: 40px; width: clamp(120px, 15vw, 205px); aspect-ratio: 1; object-fit: contain; filter: drop-shadow(0 20px 28px rgba(0,0,0,.55)); }
.hero-content { position: relative; z-index: 1; width: min(700px, 100%); padding: clamp(32px, 6vw, 78px); }
.hero h1 { margin: 0; max-width: 700px; font: 700 clamp(52px, 8vw, 105px)/.82 Georgia, serif; letter-spacing: -.065em; color: #fff5de; }
.hero h1 span { display: block; color: var(--teal-bright); font-style: italic; }
.motto { margin-top: 32px; display: flex; flex-wrap: wrap; gap: 9px; }
.motto span { padding: 8px 13px; border: 1px solid var(--line-strong); border-radius: 999px; background: rgba(7, 24, 21, .62); color: var(--gold-soft); font-size: 11px; font-weight: 800; letter-spacing: .12em; }

.section-block { margin-top: 24px; padding: clamp(19px, 3vw, 30px); border: 1px solid var(--line); border-radius: var(--radius); background: rgba(13, 29, 26, .84); box-shadow: 0 18px 45px rgba(0,0,0,.16); }
.section-head { margin-bottom: 22px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.section-head h2 { margin: 0; font: 700 24px/1.1 Georgia, serif; }
.section-head p { margin: 6px 0 0; color: var(--muted); font-size: 13px; }

.primary-button, .secondary-button, .danger-button, .success-button {
  min-height: 42px;
  padding: 0 16px;
  border-radius: 11px;
  border: 1px solid transparent;
  cursor: pointer;
  font-weight: 800;
  font-size: 12px;
  transition: transform .16s ease, background .16s ease, border-color .16s ease;
}
.primary-button { background: var(--teal); color: #fff; }
.primary-button:hover { background: var(--teal-bright); color: #041110; transform: translateY(-1px); }
.secondary-button { border-color: var(--line-strong); background: var(--panel); color: var(--cream); }
.secondary-button:hover { border-color: var(--teal); }
.danger-button { border-color: rgba(223, 116, 106, .36); background: rgba(223, 116, 106, .08); color: #f0a099; }
.danger-button:hover { background: rgba(223, 116, 106, .16); }
.success-button { border-color: rgba(78, 208, 155, .40); background: rgba(78, 208, 155, .12); color: #86e7bd; }
.success-button:hover { background: rgba(78, 208, 155, .22); }
.full { width: 100%; }
.small-button { min-height: 34px; padding: 0 11px; font-size: 11px; }

.feature-access { padding: clamp(20px, 2.5vw, 28px); }
.feature-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.system-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.catalog-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.catalog-grid > .empty-state { grid-column: 1 / -1; }
.system-card, .catalog-card { min-height: 165px; padding: 22px; border: 1px solid var(--line); border-radius: 17px; background: var(--panel); }
.feature-card {
  min-height: 154px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: linear-gradient(145deg, rgba(20, 41, 37, .96), rgba(11, 25, 23, .96));
  box-shadow: 0 10px 24px rgba(0, 0, 0, .12);
  transition: border-color .16s ease, background .16s ease, opacity .16s ease;
}
.feature-card.is-enabled { border-color: rgba(28, 200, 186, .24); }
.feature-card.is-disabled { background: linear-gradient(145deg, rgba(24, 32, 30, .92), rgba(13, 20, 19, .94)); opacity: .78; }
.feature-card-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.feature-card-name { min-width: 0; display: flex; align-items: center; gap: 11px; }
.feature-card-name h3 { margin: 0; color: var(--cream); font-size: 15px; font-weight: 850; line-height: 1.2; }
.feature-card-symbol { width: 30px; height: 30px; flex: 0 0 30px; display: grid; place-items: center; border: 1px solid rgba(216, 177, 104, .28); border-radius: 9px; background: rgba(216, 177, 104, .07); color: var(--gold-soft); font: 800 13px/1 ui-monospace, monospace; }
.new-chip { display: inline-flex; align-items: center; padding: 4px 7px; border: 1px solid rgba(216,177,104,.28); border-radius: 999px; background: rgba(216,177,104,.08); color: var(--gold-soft); font-size: 8px; font-weight: 900; letter-spacing: .1em; line-height: 1; text-transform: uppercase; }
.feature-card > p { min-height: 36px; margin: 11px 0 15px; color: var(--muted); font-size: 12.5px; line-height: 1.42; }
.feature-toggle { position: relative; width: 49px; height: 28px; flex: 0 0 49px; padding: 0; border: 1px solid rgba(168, 180, 173, .28); border-radius: 999px; background: #66706c; cursor: pointer; transition: border-color .16s ease, background .16s ease; }
.feature-toggle span { position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; display: grid; place-items: center; border-radius: 50%; background: #edf1ef; color: #67706c; font-size: 14px; font-weight: 900; line-height: 1; box-shadow: 0 2px 8px rgba(0,0,0,.25); transition: transform .18s ease, color .18s ease; }
.feature-toggle[aria-checked="true"] { border-color: rgba(28, 200, 186, .72); background: var(--teal); }
.feature-toggle[aria-checked="true"] span { transform: translateX(21px); color: var(--teal-dark); }
.feature-toggle:disabled { cursor: wait; opacity: .62; }
.feature-card-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.feature-settings { min-height: 34px; padding: 0 11px; display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--line); border-radius: 9px; background: rgba(6, 16, 15, .48); color: #cbd5d0; cursor: pointer; font-size: 11px; font-weight: 800; }
.feature-settings span { color: var(--gold-soft); font-size: 15px; line-height: 1; }
.feature-settings:hover { border-color: rgba(28, 200, 186, .46); color: var(--cream); background: rgba(28, 200, 186, .08); }

/* Einsteigerfreundliche Start- und Einstellungszentrale */
.beginner-start { margin-top: 24px; padding: clamp(22px,4vw,36px); display: flex; align-items: center; justify-content: space-between; gap: 28px; border: 1px solid rgba(28,200,186,.28); border-radius: var(--radius); background: radial-gradient(circle at 92% 8%,rgba(28,200,186,.13),transparent 36%),linear-gradient(145deg,rgba(14,41,35,.96),rgba(8,25,22,.96)); box-shadow: 0 20px 50px rgba(0,0,0,.18); }
.beginner-start h2 { margin: 2px 0 8px; color: var(--cream); font: 700 clamp(25px,3vw,36px)/1.05 Georgia,serif; }
.beginner-start p:not(.eyebrow) { max-width: 570px; margin: 0; color: var(--muted); }
.beginner-start-actions,.button-row,.twitch-form-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.feature-group { scroll-margin-top: 100px; }
.feature-group .section-head { margin-bottom: 18px; }
.feature-group .feature-card { min-height: 166px; }

.setup-overview { padding: 28px; border: 1px solid rgba(28,200,186,.28); border-radius: var(--radius); background: linear-gradient(145deg,rgba(13,40,34,.97),rgba(8,25,22,.96)); }
.setup-score { display: grid; grid-template-columns: auto 1fr; column-gap: 16px; align-items: center; }
.setup-score > span { grid-row: span 2; width: 86px; height: 64px; display: grid; place-items: center; border: 1px solid rgba(216,177,104,.35); border-radius: 18px; background: rgba(216,177,104,.08); color: var(--gold-soft); font: 800 22px/1 ui-monospace,monospace; }
.setup-score strong { color: var(--cream); font: 700 25px/1.1 Georgia,serif; }
.setup-score p { margin: 5px 0 0; color: var(--muted); }
.setup-progress { height: 8px; margin-top: 22px; overflow: hidden; border-radius: 999px; background: rgba(255,255,255,.07); }
.setup-progress i { height: 100%; display: block; border-radius: inherit; background: linear-gradient(90deg,var(--teal),var(--gold)); transition: width .3s ease; }
.setup-step-grid { margin-top: 16px; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; }
.setup-step { padding: 20px; display: grid; grid-template-columns: 38px 1fr; gap: 14px; border: 1px solid var(--line); border-radius: 16px; background: rgba(13,29,26,.84); }
.setup-step.is-ready { border-color: rgba(28,200,186,.25); }
.setup-step.needs-work { border-color: rgba(216,177,104,.32); background: linear-gradient(145deg,rgba(40,33,20,.58),rgba(13,29,26,.88)); }
.setup-step-number { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; background: rgba(216,177,104,.1); color: var(--gold-soft); font-weight: 900; }
.setup-step.is-ready .setup-step-number { background: rgba(28,200,186,.14); color: var(--teal-bright); }
.setup-step h3 { margin: 2px 0 7px; color: var(--cream); font-size: 16px; }
.setup-step p { min-height: 38px; margin: 0 0 13px; color: var(--muted); font-size: 12.5px; line-height: 1.45; }
.settings-route-grid { margin-top: 24px; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 14px; }
.settings-route-grid > article { min-height: 235px; padding: 22px; display: grid; grid-template-columns: 34px 1fr; gap: 14px; border: 1px solid var(--line); border-radius: 18px; background: rgba(13,29,26,.84); }
.settings-route-grid > article > span { color: var(--gold-soft); font: 800 12px/1 ui-monospace,monospace; }
.settings-route-grid h2 { margin: 5px 0 10px; color: var(--cream); font: 700 22px/1.05 Georgia,serif; }
.settings-route-grid p:not(.eyebrow) { min-height: 64px; margin: 0 0 17px; color: var(--muted); font-size: 13px; line-height: 1.5; }
.plain-help { margin-top: 18px; border: 1px solid var(--line); border-radius: 15px; background: rgba(8,22,19,.75); }
.plain-help summary { padding: 18px 20px; color: var(--cream); cursor: pointer; font-weight: 800; }
.plain-help > div { padding: 0 20px 19px; color: var(--muted); font-size: 13px; line-height: 1.6; }
.plain-help p { margin: 0 0 10px; }
.setup-notice { margin-top: 18px; padding: 17px 20px; display: flex; align-items: center; gap: 14px; border: 1px solid rgba(216,177,104,.3); border-radius: 14px; background: rgba(216,177,104,.07); }
.setup-notice strong { color: var(--cream); white-space: nowrap; }
.setup-notice span { flex: 1; color: var(--muted); font-size: 12.5px; line-height: 1.45; }
.setup-notice.warning { border-color: rgba(229,160,72,.36); }
.simple-business-settings { border-color: rgba(216,177,104,.23); }
.simple-setting-badge { padding: 7px 10px; border: 1px solid rgba(28,200,186,.25); border-radius: 999px; background: rgba(28,200,186,.08); color: var(--teal-bright); font-size: 10px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.clip-capacity-form { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)) auto; gap: 12px; align-items: end; }
.clip-capacity-form label { padding: 14px; display: grid; grid-template-columns: 1fr 80px; align-items: center; gap: 5px 12px; border: 1px solid var(--line); border-radius: 13px; background: rgba(5,18,15,.45); }
.clip-capacity-form label > span { color: var(--cream); font-weight: 850; }
.clip-capacity-form label input { grid-row: span 2; grid-column: 2; text-align: center; font-weight: 900; }
.clip-capacity-form label small { color: var(--muted); font-size: 9px; }

/* Twitch-Konfiguration */
.twitch-status-grid { display: grid; grid-template-columns: minmax(0,1.5fr) minmax(300px,.8fr); gap: 16px; }
.twitch-preview-card,.twitch-health-card { padding: clamp(22px,3vw,30px); border: 1px solid var(--line); border-radius: 19px; background: #15151a; box-shadow: 0 18px 45px rgba(0,0,0,.18); }
.twitch-preview-card { position: relative; overflow: hidden; border-left: 4px solid #9146ff; background: radial-gradient(circle at 100% 0,rgba(145,70,255,.18),transparent 42%),#15151a; }
.twitch-live-mark { display: flex; align-items: center; gap: 8px; color: #bf94ff; font-size: 10px; font-weight: 900; letter-spacing: .16em; }
.twitch-live-mark span { width: 8px; height: 8px; border-radius: 50%; background: #f04463; box-shadow: 0 0 0 5px rgba(240,68,99,.12); }
.twitch-preview-card h2 { margin: 20px 0 8px; color: #fff; font: 800 clamp(25px,3vw,36px)/1.05 Georgia,serif; }
.twitch-preview-card > p { max-width: 610px; color: #c7c5cf; }
.twitch-preview-meta { margin: 24px 0 18px; display: flex; flex-wrap: wrap; gap: 9px; }
.twitch-preview-meta span { padding: 8px 11px; border-radius: 9px; background: rgba(255,255,255,.055); color: #b8b5c1; font-size: 11px; }
.twitch-link-sample { min-height: 37px; padding: 0 13px; border: 1px solid #3a3a43; border-radius: 9px; background: #26262d; color: #dedce5; font-weight: 800; }
.twitch-health-card h2 { margin: 5px 0 20px; color: var(--cream); font: 700 24px/1.08 Georgia,serif; }
.twitch-health-card dl { margin: 0; display: grid; gap: 0; }
.twitch-health-card dl div { padding: 12px 0; display: flex; justify-content: space-between; gap: 16px; border-top: 1px solid rgba(255,255,255,.07); }
.twitch-health-card dt { color: var(--muted); }
.twitch-health-card dd { margin: 0; color: var(--cream); font-weight: 800; text-align: right; }
.twitch-health-card dd.good { color: var(--teal-bright); }
.twitch-health-card dd.bad { color: #f28b82; }
.twitch-settings-block { border-color: rgba(145,70,255,.24); }
.twitch-roster-card { margin-top: 18px; padding: clamp(22px,3vw,30px); border: 1px solid rgba(145,70,255,.25); border-radius: 20px; background: radial-gradient(circle at 100% 0,rgba(145,70,255,.10),transparent 34%),linear-gradient(145deg,rgba(20,31,29,.96),rgba(10,23,21,.97)); box-shadow: 0 18px 45px rgba(0,0,0,.16); }
.twitch-roster-card .section-head { margin-bottom: 18px; }
.twitch-roster-count { padding: 7px 11px; border: 1px solid rgba(145,70,255,.3); border-radius: 999px; background: rgba(145,70,255,.09); color: #c7a7ff; font-size: 10px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
.twitch-roster-list { display: grid; gap: 9px; }
.twitch-roster-list > article { min-height: 72px; padding: 12px 14px; display: grid; grid-template-columns: 40px minmax(0,1fr) auto auto; align-items: center; gap: 12px; border: 1px solid var(--line); border-radius: 14px; background: rgba(5,18,16,.55); }
.twitch-roster-list > article.is-live { border-color: rgba(240,68,99,.35); background: linear-gradient(90deg,rgba(240,68,99,.08),rgba(5,18,16,.58)); }
.twitch-roster-avatar { width: 40px; height: 40px; display: grid; place-items: center; border: 1px solid rgba(168,180,173,.18); border-radius: 12px; background: rgba(255,255,255,.035); color: #707b76; font-size: 16px; }
.is-live .twitch-roster-avatar { border-color: rgba(240,68,99,.28); background: rgba(240,68,99,.10); color: #f04463; box-shadow: 0 0 22px rgba(240,68,99,.10); }
.twitch-roster-list article > div { min-width: 0; display: grid; gap: 4px; }
.twitch-roster-list article strong { overflow: hidden; color: var(--cream); font-size: 13px; text-overflow: ellipsis; }
.twitch-roster-list article small { color: var(--muted); font-size: 9px; }
.twitch-roster-list article > a { color: #bf94ff; font-size: 10px; font-weight: 850; white-space: nowrap; }
.twitch-roster-list article > a:hover { color: #dccaff; }
.twitch-roster-empty { min-height: 104px; padding: 20px; display: flex; align-items: center; gap: 16px; border: 1px dashed rgba(145,70,255,.25); border-radius: 14px; background: rgba(145,70,255,.035); }
.twitch-roster-empty > span { width: 46px; height: 46px; flex: 0 0 46px; display: grid; place-items: center; border-radius: 14px; background: rgba(145,70,255,.10); color: #bf94ff; font-size: 23px; }
.twitch-roster-empty strong { color: var(--cream); }
.twitch-roster-empty p { margin: 4px 0 0; color: var(--muted); font-size: 11px; }
.feature-state { color: var(--muted); font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.is-enabled .feature-state { color: var(--teal-bright); }
.feature-disabled-banner { margin-bottom: 18px; padding: 18px 20px; display: flex; align-items: center; justify-content: space-between; gap: 18px; border: 1px solid rgba(216, 177, 104, .34); border-radius: 16px; background: rgba(216, 177, 104, .07); }
.feature-disabled-banner div { display: grid; }
.feature-disabled-banner .eyebrow { margin-bottom: 5px; color: var(--gold); }
.feature-disabled-banner strong { color: var(--gold-soft); }
.feature-disabled-banner span { margin-top: 4px; color: var(--muted); font-size: 12px; }
.feature-readonly { opacity: .58; filter: saturate(.65); }
.backend-restart-banner { margin-bottom: 18px; padding: 20px; display: flex; align-items: center; justify-content: space-between; gap: 20px; border: 1px solid rgba(223, 116, 106, .5); border-radius: 16px; background: linear-gradient(135deg, rgba(92, 36, 31, .35), rgba(34, 19, 17, .72)); box-shadow: 0 12px 32px rgba(0, 0, 0, .18); }
.backend-restart-banner div { display: grid; }
.backend-restart-banner .eyebrow { margin-bottom: 5px; color: #f0a099; }
.backend-restart-banner strong { color: #ffe1dc; }
.backend-restart-banner span { max-width: 780px; margin-top: 5px; color: #d2b9b4; font-size: 12px; line-height: 1.5; }
.backend-restart-banner button { flex: 0 0 auto; }
.main-server-missing-banner { margin-bottom: 18px; padding: 20px; display: flex; align-items: center; justify-content: space-between; gap: 20px; border: 1px solid rgba(216, 177, 104, .48); border-radius: 16px; background: linear-gradient(135deg, rgba(89, 67, 29, .28), rgba(32, 27, 17, .74)); box-shadow: 0 12px 32px rgba(0, 0, 0, .16); }
.main-server-missing-banner div { display: grid; }
.main-server-missing-banner .eyebrow { margin-bottom: 5px; color: var(--gold); }
.main-server-missing-banner strong { color: #ffe8b8; }
.main-server-missing-banner span { max-width: 780px; margin-top: 5px; color: #cbbf9f; font-size: 12px; line-height: 1.5; }
.main-server-missing-banner button { flex: 0 0 auto; }
.systems-overview {
  margin-bottom: 24px;
  padding: clamp(24px, 3vw, 34px);
  overflow: hidden;
  border: 1px solid rgba(28, 200, 186, .30);
  border-radius: 24px;
  background:
    radial-gradient(circle at 92% 8%, rgba(216, 177, 104, .14), transparent 25rem),
    linear-gradient(140deg, rgba(15, 46, 39, .98), rgba(7, 24, 21, .98));
  box-shadow: 0 24px 70px rgba(0, 0, 0, .20);
}
.systems-overview-copy { display: flex; align-items: center; gap: 18px; }
.systems-overview-copy > span { width: 68px; height: 68px; flex: 0 0 68px; display: grid; place-items: center; border: 1px solid rgba(216, 177, 104, .28); border-radius: 20px; background: rgba(216, 177, 104, .08); font-size: 32px; }
.systems-overview-copy h2 { margin: 3px 0 6px; color: var(--cream); font: 700 clamp(26px, 3vw, 36px)/1.05 Georgia, serif; }
.systems-overview-copy p:last-child { max-width: 730px; margin: 0; color: var(--muted); font-size: 13px; }
.systems-overview-stats { margin-top: 24px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 11px; }
.systems-overview-stats article { min-height: 82px; padding: 15px 17px; display: grid; align-content: center; border: 1px solid rgba(232, 210, 163, .13); border-radius: 15px; background: rgba(3, 14, 12, .34); }
.systems-overview-stats span { color: var(--muted); font-size: 9px; font-weight: 850; letter-spacing: .10em; text-transform: uppercase; }
.systems-overview-stats strong { margin-top: 5px; color: var(--gold-soft); font: 700 20px/1.1 Georgia, serif; }

.systems-groups { margin-top: 38px; display: grid; gap: 42px; }
.system-group-block { min-width: 0; }
.system-group-head { margin-bottom: 15px; padding: 0 5px; display: flex; align-items: center; gap: 14px; }
.system-group-head > span { width: 47px; height: 47px; flex: 0 0 47px; display: grid; place-items: center; border: 1px solid rgba(216, 177, 104, .22); border-radius: 14px; background: rgba(216, 177, 104, .07); font-size: 23px; }
.system-group-head h2 { margin: 3px 0 4px; font: 700 24px/1.05 Georgia, serif; }
.system-group-head p:last-child { margin: 0; color: var(--muted); font-size: 12px; }

.system-card { min-height: 315px; padding: 23px; display: flex; flex-direction: column; border-radius: 20px; background: linear-gradient(145deg, rgba(17, 40, 35, .96), rgba(9, 24, 21, .98)); box-shadow: 0 18px 45px rgba(0, 0, 0, .15); transition: border-color .16s ease, transform .16s ease, box-shadow .16s ease, opacity .16s ease; }
.system-card:hover { transform: translateY(-2px); box-shadow: 0 23px 56px rgba(0, 0, 0, .22); }
.system-card.is-enabled { border-color: rgba(28,200,186,.25); }
.system-card.is-disabled { border-color: rgba(168, 180, 173, .13); background: linear-gradient(145deg, rgba(28, 35, 33, .93), rgba(13, 21, 19, .96)); opacity: .75; filter: saturate(.55); }
.system-card-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 13px; }
.system-card-icon { width: 50px; height: 50px; display: grid; place-items: center; border: 1px solid rgba(216, 177, 104, .22); border-radius: 15px; background: rgba(216, 177, 104, .07); font-size: 24px; }
.system-card-title { min-width: 0; }
.system-card-title > span { display: block; margin-bottom: 3px; color: var(--teal-bright); font-size: 9px; font-weight: 900; letter-spacing: .11em; text-transform: uppercase; }
.system-card h3 { margin: 0; overflow: hidden; color: var(--cream); font: 700 23px/1.08 Georgia, serif; text-overflow: ellipsis; white-space: nowrap; }
.catalog-card h3 { margin: 0 0 8px; font: 700 20px/1.1 Georgia, serif; }
.catalog-card p { margin: 0; color: var(--muted); font-size: 13px; }
.system-status { display: inline-flex; align-items: center; gap: 6px; color: #949e99; font-size: 9px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
.system-status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.system-status.enabled { color: var(--success); }
.system-purpose { min-height: 43px; margin: 18px 0 13px; color: #dce5df; font-size: 14px; line-height: 1.5; }
.system-result { min-height: 87px; padding: 13px 15px; border-left: 3px solid rgba(216, 177, 104, .56); border-radius: 0 12px 12px 0; background: rgba(216, 177, 104, .055); }
.system-result > span { color: var(--gold-soft); font-size: 9px; font-weight: 900; letter-spacing: .10em; text-transform: uppercase; }
.system-result p { margin: 5px 0 0; color: var(--muted); font-size: 11.5px; line-height: 1.5; }
.system-card-footer { margin-top: auto; padding-top: 17px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.system-open-button { min-height: 40px; padding: 0 14px; }
.system-open-button span { margin-left: 4px; color: var(--gold-soft); font-size: 16px; }
.system-channel-state { display: inline-flex; align-items: center; justify-content: flex-end; gap: 6px; color: var(--muted); font-size: 9px; font-weight: 750; text-align: right; }
.system-channel-state i { width: 7px; height: 7px; flex: 0 0 7px; border-radius: 50%; background: currentColor; }
.system-channel-state.ready { color: var(--success); }
.system-channel-state.missing { color: #efa39c; }
.system-technical { margin-top: 13px; padding-top: 11px; border-top: 1px solid var(--line); }
.system-technical summary { color: #81908a; cursor: pointer; font-size: 9px; }
.system-technical code { display: block; margin-top: 7px; color: var(--teal-bright); font-size: 10px; overflow-wrap: anywhere; }

.main-server-block { padding: clamp(23px, 3vw, 32px); border-color: rgba(216, 177, 104, .22); background: linear-gradient(145deg, rgba(15, 40, 35, .98), rgba(7, 24, 21, .98)); }
.main-server-block.is-missing { border-color: rgba(223, 116, 106, .4); background: linear-gradient(145deg, rgba(55, 29, 25, .82), rgba(22, 20, 16, .96)); }
.main-server-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 16px; }
.main-server-icon { width: 58px; height: 58px; display: grid; place-items: center; border: 1px solid rgba(28, 200, 186, .24); border-radius: 17px; background: rgba(28, 200, 186, .07); font-size: 28px; }
.main-server-head h2 { margin: 3px 0 5px; color: var(--cream); font: 700 28px/1.08 Georgia, serif; }
.main-server-head p:last-child { max-width: 720px; margin: 0; color: var(--muted); font-size: 12px; }
.main-server-connection { display: inline-flex; align-items: center; gap: 7px; padding: 8px 11px; border: 1px solid rgba(223, 116, 106, .24); border-radius: 999px; color: #efa39c; background: rgba(223, 116, 106, .07); font-size: 9px; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
.main-server-connection i { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.main-server-connection.ready { border-color: rgba(78, 208, 155, .24); color: var(--success); background: rgba(78, 208, 155, .07); }
.server-select-form { display: grid; grid-template-columns: minmax(260px, 1fr) auto; align-items: end; gap: 14px; }
.main-server-block .server-select-form { margin-top: 24px; padding: 15px; border: 1px solid var(--line); border-radius: 15px; background: rgba(3, 14, 12, .34); }
.server-select-form button { min-height: 43px; }
.server-note { margin: 14px 0 0; padding: 12px 14px; border-left: 3px solid var(--gold); border-radius: 0 9px 9px 0; color: #b9c5bf; background: rgba(216, 177, 104, .06); font-size: 12px; }
.main-server-help { margin-top: 14px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; }
.main-server-help article { min-height: 84px; padding: 13px 14px; display: grid; align-content: center; border: 1px solid rgba(232, 210, 163, .11); border-radius: 12px; background: rgba(3, 14, 12, .26); }
.main-server-help strong { color: var(--gold-soft); font-size: 11px; }
.main-server-help span { margin-top: 4px; color: var(--muted); font-size: 9.5px; line-height: 1.45; }
.server-technical { margin-top: 13px; }
.server-technical summary { color: #81908a; cursor: pointer; font-size: 9px; }
.server-technical code { display: block; margin-top: 8px; padding: 9px 11px; border: 1px solid rgba(28, 200, 186, .15); border-radius: 9px; color: var(--teal-bright); background: rgba(28, 200, 186, .04); font-size: 10px; overflow-wrap: anywhere; }
.empty-server-state { padding: 16px; border: 1px dashed var(--line-strong); border-radius: 12px; color: var(--muted); }
.server-name { color: var(--cream); font-weight: 800; }
.server-meta { display: block; margin-top: 4px; color: var(--muted); font-size: 11px; }

.test-server-section { margin-top: 42px; }
.test-server-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px; }
.test-server-grid > .empty-state { grid-column: 1 / -1; }
.test-server-card { min-height: 155px; padding: 18px; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 14px; border: 1px solid var(--line); border-radius: 16px; background: rgba(5, 19, 16, .42); }
.test-server-card.is-connected { border-color: rgba(78, 208, 155, .22); }
.test-server-icon { width: 48px; height: 48px; display: grid; place-items: center; border: 1px solid rgba(216, 177, 104, .18); border-radius: 14px; background: rgba(216, 177, 104, .06); font-size: 23px; }
.test-server-copy > span { color: var(--teal-bright); font-size: 9px; font-weight: 900; letter-spacing: .09em; text-transform: uppercase; }
.test-server-copy h3 { margin: 3px 0 4px; font: 700 19px/1.1 Georgia, serif; }
.test-server-copy p { margin: 0 0 8px; color: var(--muted); font-size: 10px; line-height: 1.45; }
.test-server-copy code { color: #81908a; font-size: 9px; overflow-wrap: anywhere; }
.test-server-actions { display: grid; justify-items: end; gap: 10px; }

@media (max-width: 820px) {
  .systems-overview-stats, .main-server-help { grid-template-columns: 1fr; }
  .system-card-footer { align-items: stretch; flex-direction: column; }
  .system-channel-state { justify-content: flex-start; text-align: left; }
  .test-server-grid { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  .systems-overview-copy { align-items: flex-start; }
  .systems-overview-copy > span { width: 52px; height: 52px; flex-basis: 52px; border-radius: 15px; font-size: 24px; }
  .systems-overview-copy h2 { font-size: 24px; }
  .system-group-head { align-items: flex-start; }
  .system-group-head h2 { font-size: 21px; }
  .system-card { min-height: 0; padding: 18px; }
  .system-card-head { grid-template-columns: auto minmax(0, 1fr); }
  .system-card-head .system-status { grid-column: 2; justify-self: start; }
  .system-card h3 { white-space: normal; }
  .system-purpose { min-height: 0; }
  .system-result { min-height: 0; }
  .system-open-button { width: 100%; }
  .main-server-head { grid-template-columns: auto minmax(0, 1fr); align-items: start; }
  .main-server-connection { grid-column: 2; justify-self: start; }
  .main-server-head h2 { font-size: 23px; }
  .test-server-card { grid-template-columns: auto minmax(0, 1fr); align-items: start; }
  .test-server-actions { grid-column: 1 / -1; grid-template-columns: 1fr auto; align-items: center; justify-items: start; }
}

.data-table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 15px; }
.data-table { width: 100%; border-collapse: collapse; min-width: 780px; }
.data-table th { padding: 13px 15px; color: var(--gold); background: rgba(216,177,104,.05); text-align: left; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; }
.data-table td { padding: 15px; border-top: 1px solid var(--line); color: #d9e0dc; vertical-align: middle; }
.data-table code { color: var(--teal-bright); }
.actions { display: flex; flex-wrap: wrap; gap: 7px; }
.status { display: inline-flex; align-items: center; gap: 7px; padding: 6px 9px; border-radius: 999px; background: rgba(223,116,106,.09); color: #efa39c; font-size: 11px; font-weight: 800; }
.status.paid { background: rgba(78,208,155,.09); color: var(--success); }
.status.partial { background: rgba(216,177,104,.11); color: var(--gold-soft); }
.status.overdue { background: rgba(223,116,106,.18); color: #ffaaa2; box-shadow: inset 0 0 0 1px rgba(223,116,106,.18); }
.status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.sanction-table { min-width: 1120px; }
.sanction-workflow { margin-bottom: 24px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.sanction-workflow div { min-height: 92px; padding: 17px 18px; display: grid; align-content: center; border: 1px solid rgba(28,200,186,.18); border-radius: 14px; background: linear-gradient(145deg, rgba(16,40,35,.82), rgba(9,25,22,.88)); }
.sanction-workflow strong { color: var(--gold-soft); font: 700 16px/1.2 Georgia, serif; }
.sanction-workflow span { margin-top: 6px; color: var(--muted); font-size: 11px; line-height: 1.45; }
.case-facts { margin-top: 9px; display: flex; flex-wrap: wrap; gap: 5px; }
.account-table-wrap { margin-top: 22px; }
.account-debt { color: #ff9c91; }
.account-credit { color: #71e2c8; }
.compact-form { max-width: 760px; }

.inventory-hub {
  position: relative;
  margin-bottom: 18px;
  padding: 26px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 22px;
  overflow: hidden;
  border: 1px solid rgba(28, 200, 186, .26);
  border-radius: 24px;
  background:
    radial-gradient(circle at 90% 0, rgba(216, 177, 104, .12), transparent 19rem),
    linear-gradient(135deg, rgba(16, 48, 41, .97), rgba(8, 26, 23, .98));
  box-shadow: 0 24px 70px rgba(0, 0, 0, .20);
}
.inventory-hub-copy { min-width: 0; display: flex; align-items: center; gap: 17px; }
.inventory-hub-icon { width: 62px; height: 62px; flex: 0 0 62px; display: grid; place-items: center; border: 1px solid rgba(216, 177, 104, .26); border-radius: 18px; background: rgba(216, 177, 104, .08); font-size: 30px; box-shadow: inset 0 0 24px rgba(216, 177, 104, .04); }
.inventory-hub-copy h2 { margin: 3px 0 5px; font: 700 27px/1.12 Georgia, serif; }
.inventory-hub-copy p:last-child { margin: 0; color: var(--muted); font-size: 13px; }
.inventory-new-button { min-height: 48px; white-space: nowrap; }
.inventory-new-button span { margin-right: 5px; font-size: 20px; line-height: 0; }
.inventory-summary { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.inventory-summary article { min-height: 76px; padding: 13px 17px; display: grid; grid-template-columns: 1fr auto; align-items: center; border: 1px solid rgba(232, 210, 163, .12); border-radius: 15px; background: rgba(3, 14, 12, .32); }
.inventory-summary article.warning { border-color: rgba(223, 116, 106, .35); background: rgba(91, 37, 32, .22); }
.inventory-summary span { color: var(--muted); font-size: 10px; font-weight: 800; letter-spacing: .10em; text-transform: uppercase; }
.inventory-summary strong { grid-row: 1 / span 2; grid-column: 2; color: var(--cream); font: 700 29px/1 Georgia, serif; }
.inventory-summary small { color: var(--gold-soft); font-size: 10px; }

.inventory-toolbar { margin-bottom: 26px; padding: 10px; display: flex; align-items: center; gap: 10px; border: 1px solid var(--line); border-radius: 17px; background: rgba(10, 25, 22, .78); }
.inventory-search { position: relative; min-width: 230px; flex: 1; display: flex; align-items: center; font-weight: 500; }
.inventory-search > span { position: absolute; left: 14px; z-index: 1; color: var(--gold); font-size: 20px; transform: rotate(-20deg); pointer-events: none; }
.inventory-search input { min-height: 45px; padding: 10px 72px 10px 42px; border: 0; background: rgba(3, 14, 12, .62); }
.inventory-search small { position: absolute; right: 13px; padding: 3px 7px; border-radius: 999px; color: var(--muted); background: rgba(168, 180, 173, .08); font-size: 9px; white-space: nowrap; }
.inventory-filters { display: flex; gap: 7px; }
.inventory-filter { min-height: 43px; padding: 8px 11px 8px 14px; display: inline-flex; align-items: center; gap: 8px; border: 1px solid transparent; border-radius: 12px; color: var(--muted); background: transparent; cursor: pointer; font-size: 11px; font-weight: 800; }
.inventory-filter:hover { color: var(--cream); background: rgba(232, 210, 163, .05); }
.inventory-filter.active { border-color: rgba(28, 200, 186, .32); color: var(--teal-bright); background: rgba(28, 200, 186, .09); }
.inventory-filter b { min-width: 22px; padding: 2px 6px; border-radius: 999px; color: var(--cream); background: rgba(168, 180, 173, .11); font-size: 9px; text-align: center; }

.inventory-content { display: grid; gap: 30px; }
.inventory-category-group { min-width: 0; }
.inventory-category-head { margin-bottom: 11px; padding: 0 5px; display: flex; align-items: center; justify-content: space-between; }
.inventory-category-head > div { display: flex; align-items: center; gap: 10px; }
.inventory-category-head > div > span { width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid rgba(216, 177, 104, .18); border-radius: 10px; background: rgba(216, 177, 104, .06); font-size: 17px; }
.inventory-category-head h2 { margin: 0; font: 700 17px/1.1 Georgia, serif; }
.inventory-category-head small { display: block; margin-top: 2px; color: var(--muted); font-size: 10px; }
.inventory-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 15px; }
.inventory-card { position: relative; min-width: 0; padding: 19px; overflow: hidden; border: 1px solid var(--line); border-radius: 20px; background: linear-gradient(145deg, rgba(15, 36, 32, .94), rgba(9, 24, 21, .96)); box-shadow: 0 18px 45px rgba(0,0,0,.14); transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease; }
.inventory-card:hover { border-color: rgba(28, 200, 186, .26); transform: translateY(-1px); box-shadow: 0 22px 52px rgba(0,0,0,.20); }
.inventory-card.is-disabled { opacity: .68; filter: saturate(.55); }
.inventory-card.is-low { border-color: rgba(223, 116, 106, .43); background: linear-gradient(145deg, rgba(52, 27, 25, .74), rgba(15, 25, 22, .96)); }
.inventory-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.inventory-title { min-width: 0; display: flex; align-items: center; gap: 12px; }
.inventory-item-icon { width: 43px; height: 43px; flex: 0 0 43px; display: grid; place-items: center; border: 1px solid rgba(28, 200, 186, .16); border-radius: 13px; background: rgba(28, 200, 186, .06); font-size: 21px; }
.inventory-card h3 { margin: 3px 0 0; overflow: hidden; font: 700 20px/1.15 Georgia, serif; text-overflow: ellipsis; white-space: nowrap; }
.inventory-category { color: var(--teal-bright); font-size: 9px; font-weight: 800; letter-spacing: .10em; text-transform: uppercase; }
.switch { position: relative; width: 48px; height: 27px; flex: 0 0 48px; padding: 0; border: 1px solid rgba(168,180,173,.30); border-radius: 999px; background: #626b68; cursor: pointer; }
.switch i { position: absolute; top: 3px; left: 3px; width: 19px; height: 19px; border-radius: 50%; background: #eff3f1; transition: transform .18s ease; }
.switch.on { border-color: rgba(28,200,186,.65); background: var(--teal); }
.switch.on i { transform: translateX(21px); }
.inventory-stock { margin: 17px 0 15px; padding: 15px 16px 13px; display: grid; border: 1px solid rgba(28,200,186,.13); border-radius: 15px; background: rgba(3, 14, 12, .52); }
.inventory-stock > span:first-child { color: var(--muted); font-size: 9px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
.inventory-stock > strong { margin: 3px 0 9px; color: var(--gold-soft); font: 700 32px/1 Georgia, serif; }
.inventory-stock-status { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.inventory-stock-status small { overflow: hidden; color: var(--muted); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.inventory-state { padding: 4px 7px; border-radius: 999px; color: var(--muted); background: rgba(168, 180, 173, .08); font-size: 9px; font-weight: 900; white-space: nowrap; }
.inventory-state.good { color: var(--success); background: rgba(78, 208, 155, .09); }
.inventory-state.warning { color: #ffaaa2; background: rgba(223, 116, 106, .12); }
.inventory-level { height: 6px; margin-top: 12px; overflow: hidden; border-radius: 999px; background: rgba(168, 180, 173, .12); }
.inventory-level i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--teal), var(--success)); }
.inventory-level.warning i { background: linear-gradient(90deg, #a5423d, var(--danger)); }
.inventory-minimum { margin-top: 5px; color: var(--muted); font-size: 9px; }
.inventory-adjust-form { display: grid; grid-template-columns: minmax(92px,.52fr) minmax(150px,1fr); gap: 10px; }
.inventory-adjust-form label { position: relative; gap: 5px; font-size: 10px; }
.inventory-adjust-form label > small { position: absolute; top: 0; right: 0; color: var(--muted); font-size: 8px; font-weight: 500; }
.inventory-adjust-form input { min-height: 41px; padding: 8px 10px; }
.inventory-quick-row { grid-column: 1 / -1; display: flex; align-items: center; gap: 6px; }
.inventory-quick-row > span { margin-right: auto; color: var(--muted); font-size: 9px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.inventory-quick-row button { min-width: 42px; padding: 5px 7px; border: 1px solid rgba(216, 177, 104, .18); border-radius: 8px; color: var(--gold-soft); background: rgba(216, 177, 104, .06); cursor: pointer; font-size: 10px; font-weight: 800; }
.inventory-quick-row button:hover { border-color: rgba(216, 177, 104, .42); background: rgba(216, 177, 104, .12); }
.inventory-actions { grid-column: 1 / -1; display: flex; gap: 8px; }
.inventory-actions button { min-height: 42px; flex: 1; }
.inventory-actions button span { margin-right: 4px; font-size: 16px; }
.inventory-updated { margin: 13px 0 -3px; color: #72807a; font-size: 9px; text-align: right; }

.inventory-empty { min-height: 310px; padding: 42px 22px; display: grid; place-items: center; align-content: center; border: 1px dashed rgba(216, 177, 104, .28); border-radius: 22px; background: rgba(13, 29, 26, .56); text-align: center; }
.inventory-empty > span { width: 74px; height: 74px; display: grid; place-items: center; border: 1px solid rgba(216, 177, 104, .22); border-radius: 22px; background: rgba(216, 177, 104, .07); font-size: 35px; }
.inventory-empty h2 { margin: 15px 0 6px; font: 700 24px/1.1 Georgia, serif; }
.inventory-empty p { max-width: 500px; margin: 0 0 20px; color: var(--muted); }
.inventory-empty.compact { min-height: 240px; }

.inventory-create-panel, .inventory-history-panel { margin-top: 23px; padding: 0; overflow: hidden; }
.inventory-create-panel > summary, .inventory-history-panel > summary { min-height: 105px; padding: 22px 24px; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 16px; cursor: pointer; list-style: none; }
.inventory-create-panel > summary::-webkit-details-marker, .inventory-history-panel > summary::-webkit-details-marker { display: none; }
.inventory-create-panel > summary:hover, .inventory-history-panel > summary:hover { background: rgba(28, 200, 186, .035); }
.inventory-create-panel > summary h2, .inventory-history-panel > summary h2 { margin: 3px 0; font: 700 21px/1.1 Georgia, serif; }
.inventory-create-panel > summary p:last-of-type, .inventory-history-panel > summary p:last-of-type { margin: 0; color: var(--muted); font-size: 11px; }
.inventory-details-icon { width: 43px; height: 43px; display: grid; place-items: center; border: 1px solid rgba(28, 200, 186, .22); border-radius: 13px; color: var(--teal-bright); background: rgba(28, 200, 186, .07); font-size: 24px; }
.inventory-details-chevron { color: var(--gold); font-size: 22px; transition: transform .2s ease; }
details[open] > summary .inventory-details-chevron { transform: rotate(180deg); }
.inventory-create-form { padding: 0 24px 24px; display: grid; gap: 12px; }
.inventory-create-form > section { position: relative; padding: 19px 19px 19px 65px; border: 1px solid var(--line); border-radius: 16px; background: rgba(5, 19, 16, .42); }
.inventory-create-form h3 { margin: 0; font: 700 17px/1.2 Georgia, serif; }
.inventory-create-form section > div > p { margin: 3px 0 15px; color: var(--muted); font-size: 10px; }
.inventory-step { position: absolute; top: 18px; left: 18px; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 10px; color: var(--ink); background: var(--gold); font-size: 13px; font-weight: 900; }
.inventory-create-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px; }
.inventory-create-fields.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.inventory-create-fields label { font-size: 10px; }
.inventory-create-fields label small { color: var(--muted); font-size: 8px; font-weight: 500; }
.inventory-category-picks { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 6px; }
.inventory-category-picks:empty { display: none; }
.inventory-category-picks button { padding: 5px 9px; border: 1px solid rgba(216, 177, 104, .18); border-radius: 999px; color: var(--gold-soft); background: rgba(216, 177, 104, .05); cursor: pointer; font-size: 9px; }
.inventory-create-form > .inventory-create-finish { min-height: 70px; display: flex; align-items: center; justify-content: space-between; gap: 14px; border-color: rgba(28, 200, 186, .19); background: rgba(28, 200, 186, .04); }
.inventory-create-finish .check-row { flex: 1; }
.inventory-history-content { padding: 0 24px 24px; }
.movement { font-weight: 800; }
.movement.positive { color: #71e2b5; }
.movement.negative { color: #f0958b; }

@media (max-width: 760px) {
  .inventory-hub { padding: 20px; grid-template-columns: 1fr; }
  .inventory-new-button { width: 100%; }
  .inventory-summary, .inventory-grid { grid-template-columns: 1fr; }
  .inventory-toolbar { align-items: stretch; flex-direction: column; }
  .inventory-filters { display: grid; grid-template-columns: repeat(3, 1fr); }
  .inventory-filter { justify-content: center; }
  .inventory-adjust-form { grid-template-columns: 1fr; }
  .inventory-create-fields, .inventory-create-fields.three { grid-template-columns: 1fr; }
  .inventory-create-form > .inventory-create-finish { align-items: stretch; flex-direction: column; }
}

@media (max-width: 480px) {
  .inventory-hub-copy { align-items: flex-start; }
  .inventory-hub-icon { width: 48px; height: 48px; flex-basis: 48px; border-radius: 14px; font-size: 23px; }
  .inventory-hub-copy h2 { font-size: 22px; }
  .inventory-summary article { min-height: 64px; padding: 11px; }
  .inventory-summary strong { font-size: 25px; }
  .inventory-filter { padding: 7px 5px; gap: 4px; }
  .inventory-filter b { min-width: 19px; padding: 2px 4px; }
  .inventory-card { padding: 15px; }
  .inventory-item-icon { width: 38px; height: 38px; flex-basis: 38px; font-size: 18px; }
  .inventory-stock > strong { font-size: 28px; }
  .inventory-quick-row { flex-wrap: wrap; }
  .inventory-quick-row > span { width: 100%; flex-basis: 100%; }
  .inventory-quick-row button { flex: 1; }
  .inventory-actions { flex-direction: column; }
  .inventory-create-panel > summary, .inventory-history-panel > summary { min-height: 92px; padding: 17px; gap: 11px; }
  .inventory-create-panel > summary p:last-of-type, .inventory-history-panel > summary p:last-of-type { display: none; }
  .inventory-details-icon { width: 37px; height: 37px; font-size: 19px; }
  .inventory-create-form { padding: 0 14px 14px; }
  .inventory-create-form > section { padding: 16px 14px 16px 55px; }
  .inventory-step { top: 15px; left: 14px; }
  .inventory-create-fields, .inventory-category-picks { margin-left: -41px; }
  .inventory-history-content { padding: 0 14px 14px; }
}

@media (max-width: 900px) {
  .beginner-start { align-items: flex-start; flex-direction: column; }
  .setup-step-grid,.settings-route-grid,.twitch-status-grid { grid-template-columns: 1fr; }
  .settings-route-grid > article { min-height: auto; }
  .settings-route-grid p:not(.eyebrow) { min-height: auto; }
  .setup-notice { align-items: flex-start; flex-direction: column; }
  .clip-capacity-form { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 560px) {
  .setup-step-grid { grid-template-columns: 1fr; }
  .setup-score { grid-template-columns: 1fr; }
  .setup-score > span { grid-row: auto; margin-bottom: 14px; }
  .beginner-start-actions > *, .twitch-form-actions > * { width: 100%; justify-content: center; }
  .clip-capacity-form { grid-template-columns: 1fr; }
}
.case-chip { padding: 4px 7px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); background: rgba(6,16,15,.36); font-size: 9px; font-weight: 800; line-height: 1.2; }
.case-chip.warn { border-color: rgba(216,177,104,.28); color: var(--gold-soft); background: rgba(216,177,104,.08); }
.case-chip.triggered { border-color: rgba(223,116,106,.3); color: #f0a099; background: rgba(223,116,106,.08); }
.deadline-line { display: inline-flex; align-items: center; gap: 6px; margin-top: 5px; color: var(--muted); }
.deadline-counter { min-width: 92px; padding: 4px 7px; border: 1px solid rgba(216,177,104,.24); border-radius: 7px; background: rgba(216,177,104,.08); color: var(--gold-soft); font: 800 11px/1.2 ui-monospace, SFMono-Regular, Consolas, monospace; letter-spacing: .02em; text-align: center; }
.deadline-counter.is-paid { border-color: rgba(78,208,155,.25); background: rgba(78,208,155,.08); color: var(--success); }
.deadline-counter.is-expired { border-color: rgba(223,116,106,.32); background: rgba(223,116,106,.12); color: #ffaaa2; }

.form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 15px; }
.form-grid .wide { grid-column: 1 / -1; }
label { display: grid; gap: 7px; color: #d7ded9; font-size: 12px; font-weight: 700; }
input, textarea, select {
  width: 100%;
  border: 1px solid var(--line-strong);
  border-radius: 11px;
  padding: 11px 12px;
  color: var(--cream);
  background: #091512;
  outline: 0;
}
input:focus, textarea:focus, select:focus { border-color: var(--teal-bright); box-shadow: 0 0 0 3px rgba(28,200,186,.10); }
textarea { resize: vertical; }
select { color-scheme: dark; }
.check-row { display: flex; align-items: center; gap: 10px; }
.check-row input { width: 18px; height: 18px; accent-color: var(--teal); }
.check-row span { color: var(--muted); font-weight: 500; }
.compact-form { grid-template-columns: minmax(260px, 1fr) auto; align-items: end; }
.form-action { display: flex; align-items: end; }
.form-action button { min-height: 43px; }
.stack-form { display: grid; gap: 14px; }
.divider { height: 1px; margin: 22px 0; background: var(--line); }
.spaced-button { margin-top: 14px; }
.no-margin { margin-top: 0; }
.welcome-designer-layout { display: grid; grid-template-columns: minmax(620px, 1.45fr) minmax(380px, .75fr); gap: 18px; align-items: start; }
.welcome-designer-sidebar { display: grid; gap: 18px; }
.welcome-canvas-block { position: sticky; top: 96px; }
.welcome-preview-member { margin-bottom: 13px; display: grid; grid-template-columns: auto minmax(180px, 300px); gap: 12px; align-items: center; }
.welcome-designer-stage { --welcome-overlay: .31; position: relative; width: 100%; aspect-ratio: 12 / 5; overflow: hidden; container-type: inline-size; border: 1px solid var(--line-strong); border-radius: 16px; background: #121924; box-shadow: 0 18px 45px rgba(0,0,0,.28); touch-action: none; user-select: none; }
.welcome-stage-background { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.welcome-stage-default { background: linear-gradient(#141923, #232d41); }
.welcome-stage-shade { position: absolute; inset: 0; background: rgba(0,0,0,var(--welcome-overlay)); pointer-events: none; }
.welcome-stage-avatar { position: absolute; aspect-ratio: 1; object-fit: cover; border-radius: 50%; transform: translate(-50%,-50%); filter: drop-shadow(0 4px 6px rgba(0,0,0,.52)); cursor: grab; }
.welcome-stage-text { position: absolute; max-width: 96%; font-weight: 700; line-height: 1; white-space: nowrap; text-shadow: 2px 2px 1px rgba(0,0,0,.63); cursor: grab; }
[data-welcome-drag] { outline: 1px dashed transparent; outline-offset: 7px; transition: outline-color .15s ease, filter .15s ease; }
[data-welcome-drag]:hover, [data-welcome-drag].is-dragging { outline-color: var(--teal-bright); filter: drop-shadow(0 0 8px rgba(16,211,193,.42)); }
[data-welcome-drag].is-dragging { cursor: grabbing; }
.welcome-drag-hint { margin: 12px 0 0; color: var(--muted); font-size: 11px; }
.welcome-layout-form { display: grid; gap: 15px; }
.welcome-control-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; }
.welcome-control-grid label { min-width: 0; }
.welcome-control-grid input, .welcome-control-grid select { min-width: 0; }
.welcome-control-grid input[type="color"] { min-height: 43px; padding: 5px; }
.welcome-control-grid input[type="range"] { padding-inline: 0; }
.welcome-global-controls { padding-bottom: 5px; }
.welcome-global-controls label:first-child { grid-column: 1 / -1; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; }
.welcome-global-controls output { min-width: 30px; color: var(--teal-bright); text-align: right; }
.welcome-layer-controls { margin: 0; padding: 14px; display: grid; gap: 12px; border: 1px solid var(--line); border-radius: 13px; background: rgba(6,16,15,.35); }
.welcome-layer-controls legend { padding: 0 7px; color: var(--gold-soft); font: 700 16px/1 Georgia, serif; }
.welcome-layer-controls .wide-control { display: grid; }
.welcome-layer-controls small { color: var(--muted); }
.welcome-layout-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.verification-editor { margin-top: 18px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(380px, .78fr); gap: 18px; align-items: stretch; }
.verification-preview-card { display: flex; flex-direction: column; }
.verification-discord-card { position: relative; flex: 1; overflow: hidden; padding: 22px 24px 24px 27px; border: 1px solid rgba(186,194,204,.22); border-radius: 14px; background: linear-gradient(145deg, #17191d, #101214); box-shadow: 0 20px 44px rgba(0,0,0,.26); }
.verification-discord-card::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 4px; background: linear-gradient(var(--teal-bright), var(--gold)); }
.verification-discord-card > small { color: #9ba4ae; font: 700 10px/1.2 ui-monospace, monospace; letter-spacing: .08em; }
.verification-discord-card h3 { margin: 10px 0 5px; color: #f2f3f5; font: 800 25px/1.15 Inter, ui-sans-serif, system-ui, sans-serif; }
.verification-discord-card > p { max-width: 680px; margin: 0; color: #c5c8ce; }
.verification-name-box { margin: 20px 0 16px; padding: 14px 16px; display: grid; gap: 5px; border: 1px solid rgba(28,200,186,.28); border-radius: 11px; background: rgba(28,200,186,.07); }
.verification-name-box span { color: #aab1ba; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; }
.verification-name-box strong { overflow-wrap: anywhere; color: #fff; font-size: 21px; }
.verification-discord-card ol { margin: 0 0 18px; padding: 0; display: grid; gap: 8px; counter-reset: verification-step; list-style: none; color: #d5d8dd; }
.verification-discord-card li { display: flex; align-items: center; gap: 9px; counter-increment: verification-step; }
.verification-discord-card li::before { content: counter(verification-step); width: 23px; height: 23px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 7px; color: #06100f; background: var(--teal-bright); font-size: 11px; font-weight: 900; }
.verification-discord-card button { min-height: 40px; padding: 0 17px; border: 0; border-radius: 8px; color: #fff; background: #5865f2; font-weight: 800; opacity: 1; }
.verification-settings-form { display: grid; gap: 14px; }
.verification-settings-form label { display: grid; gap: 6px; }
.verification-settings-form label small { color: var(--muted); }
.verification-live-name { padding: 15px 16px; display: grid; gap: 4px; border: 1px solid var(--line-strong); border-radius: 12px; background: rgba(6,16,15,.56); }
.verification-live-name small { color: var(--muted); font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.verification-live-name strong { overflow-wrap: anywhere; color: var(--teal-bright); font: 800 21px/1.3 ui-monospace, SFMono-Regular, Consolas, monospace; }
.verification-live-name span { color: var(--muted); font-size: 10px; }
.absence-overview-grid { display: grid; gap: 18px; }
.absence-overview-grid .section-block { overflow: hidden; }
.absence-overview-grid .data-table { min-width: 900px; }
.form-grid label small { margin-top: 4px; color: var(--muted); font-size: 10px; font-weight: 500; }

.filter-bar { display: flex; gap: 10px; }
.filter-bar input { max-width: 380px; }
.settings-groups { display: grid; gap: 18px; }
.settings-group { border: 1px solid var(--line); border-radius: 16px; overflow: hidden; }
.settings-group h2 { margin: 0; padding: 16px 18px; border-bottom: 1px solid var(--line); background: rgba(216,177,104,.04); color: var(--gold-soft); font: 700 18px/1 Georgia, serif; }
.setting-row { padding: 16px 18px; display: grid; grid-template-columns: minmax(175px,.8fr) minmax(240px,1.35fr) auto; gap: 15px; align-items: center; border-top: 1px solid var(--line); }
.setting-row:first-of-type { border-top: 0; }
.setting-label strong { display: block; }
.setting-label small { display: block; margin-top: 3px; color: var(--muted); }
.setting-form { display: contents; }
.setting-form input { font: 12px/1.2 ui-monospace, SFMono-Regular, Consolas, monospace; color: var(--teal-bright); }

/* Discord-nahe, serverbezogene Channel-/Rollen-Konfiguration */
.id-server-picker {
  margin-bottom: 18px;
  padding: 20px 22px;
  display: grid;
  grid-template-columns: minmax(260px, .85fr) minmax(410px, 1.15fr) auto;
  align-items: center;
  gap: 22px;
  border: 1px solid rgba(88, 101, 242, .34);
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(43,45,49,.98), rgba(30,31,34,.98));
  box-shadow: 0 20px 50px rgba(0,0,0,.24);
}
.id-server-identity { min-width: 0; display: flex; align-items: center; gap: 14px; }
.id-server-identity img { width: 58px; height: 58px; flex: 0 0 58px; border-radius: 17px; object-fit: cover; background: #1e1f22; box-shadow: 0 8px 22px rgba(0,0,0,.3); }
.id-server-identity .eyebrow { margin-bottom: 4px; color: #aeb5ff; font-size: 9px; }
.id-server-identity h2 { overflow: hidden; margin: 0; color: #f2f3f5; font: 800 21px/1.2 Inter, sans-serif; text-overflow: ellipsis; white-space: nowrap; }
.id-server-identity span { display: block; margin-top: 4px; color: #b5bac1; font-size: 11px; }
.id-server-select { gap: 6px; color: #dbdee1; font-size: 11px; }
.id-server-select select { min-height: 48px; border-color: #4e5058; border-radius: 8px; background: #1e1f22; color: #f2f3f5; font-weight: 700; }
.id-server-select small { color: #949ba4; font-size: 10px; font-weight: 500; }
.id-server-mode { padding: 8px 10px; border-radius: 999px; color: #c4c9ff; background: rgba(88,101,242,.17); font-size: 9px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
.id-server-mode.mode-main { color: #7ee2b8; background: rgba(35,165,90,.16); }
.id-server-mode.mode-view { color: #f2c97d; background: rgba(240,178,50,.14); }

.discord-config-shell { display: grid; grid-template-columns: 310px minmax(0, 1fr); align-items: start; gap: 18px; }
.discord-server-preview {
  position: sticky;
  top: 102px;
  overflow: hidden;
  border: 1px solid #3f4147;
  border-radius: 17px;
  color: #dbdee1;
  background: #2b2d31;
  box-shadow: 0 22px 54px rgba(0,0,0,.28);
}
.discord-server-header { min-height: 53px; padding: 0 16px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #1f2023; color: #f2f3f5; background: #2b2d31; box-shadow: 0 2px 4px rgba(0,0,0,.22); }
.discord-server-header strong { overflow: hidden; font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
.discord-server-banner { margin: 12px 10px 5px; padding: 12px; display: flex; align-items: center; gap: 11px; border-radius: 9px; background: linear-gradient(135deg, rgba(88,101,242,.32), rgba(35,165,90,.18)); }
.discord-server-banner img { width: 42px; height: 42px; flex: 0 0 42px; border-radius: 13px; object-fit: cover; background: #1e1f22; }
.discord-server-banner div { min-width: 0; display: grid; }
.discord-server-banner strong { overflow: hidden; color: #fff; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.discord-server-banner span { margin-top: 3px; overflow: hidden; color: #c4c9ff; font: 9px/1.2 ui-monospace, monospace; text-overflow: ellipsis; }
.discord-channel-list { max-height: calc(100vh - 295px); min-height: 440px; padding: 8px 8px 18px; overflow-y: auto; scrollbar-color: #1a1b1e transparent; scrollbar-width: thin; }
.discord-channel-category { margin-top: 13px; }
.discord-channel-category h3 { margin: 0 5px 4px; display: flex; align-items: center; gap: 3px; color: #949ba4; font-size: 9px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.discord-channel-category h3 span { font-size: 8px; }
.discord-channel-row { min-height: 33px; padding: 0 9px; display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: 7px; border-radius: 5px; color: #949ba4; }
.discord-channel-row:hover { color: #dbdee1; background: #35373c; }
.discord-channel-row.is-assigned { color: #f2f3f5; background: rgba(88,101,242,.18); }
.discord-channel-row strong { overflow: hidden; font-size: 12px; font-weight: 550; text-overflow: ellipsis; white-space: nowrap; }
.discord-channel-row em { min-width: 18px; padding: 2px 5px; border-radius: 999px; color: #fff; background: #5865f2; font-size: 8px; font-style: normal; font-weight: 900; text-align: center; }
.discord-hash { color: #80848e; font: 700 17px/1 ui-monospace, monospace; }
.discord-empty-category { margin: 8px; color: #6d6f78; font-size: 10px; }
.discord-preview-footer { min-height: 58px; padding: 10px 13px; display: flex; align-items: center; gap: 10px; background: #232428; }
.discord-status-dot { width: 11px; height: 11px; flex: 0 0 11px; border: 3px solid #232428; border-radius: 50%; background: #23a55a; box-shadow: 0 0 0 1px #23a55a; }
.discord-preview-footer div { display: grid; }
.discord-preview-footer strong { color: #f2f3f5; font-size: 11px; }
.discord-preview-footer small { margin-top: 2px; color: #949ba4; font-size: 9px; }

.discord-config-workspace { min-width: 0; }
.discord-config-toolbar { position: sticky; top: 98px; z-index: 10; margin-bottom: 14px; padding: 12px; display: flex; align-items: center; justify-content: space-between; gap: 12px; border: 1px solid #3f4147; border-radius: 14px; background: rgba(30,31,34,.94); box-shadow: 0 12px 30px rgba(0,0,0,.2); backdrop-filter: blur(16px); }
.id-section-tabs { display: flex; flex-wrap: wrap; gap: 6px; }
.id-section-tabs button { min-height: 36px; padding: 0 11px; display: inline-flex; align-items: center; gap: 7px; border: 0; border-radius: 7px; color: #b5bac1; background: transparent; cursor: pointer; font-size: 11px; font-weight: 750; }
.id-section-tabs button:hover { color: #dbdee1; background: #35373c; }
.id-section-tabs button.active { color: #fff; background: #5865f2; }
.id-section-tabs button span { min-width: 19px; padding: 2px 5px; border-radius: 999px; color: inherit; background: rgba(255,255,255,.11); font-size: 8px; text-align: center; }
.discord-config-search { min-width: min(310px, 100%); position: relative; display: block; }
.discord-config-search > span { position: absolute; top: 50%; left: 12px; z-index: 1; color: #949ba4; font-size: 17px; transform: translateY(-50%); }
.discord-config-search input { min-height: 38px; padding: 8px 11px 8px 34px; border-color: #3f4147; border-radius: 7px; background: #111214; color: #f2f3f5; font-size: 11px; }
.id-readonly-note { margin-bottom: 14px; padding: 15px 17px; display: grid; border: 1px solid rgba(240,178,50,.30); border-radius: 12px; background: rgba(240,178,50,.07); }
.id-readonly-note strong { color: #f2c97d; font-size: 12px; }
.id-readonly-note span { margin-top: 4px; color: #b5bac1; font-size: 10px; }
.id-readonly-note code { color: #c4c9ff; }
.discord-settings-groups { gap: 14px; }
.discord-settings-group { overflow: visible; border-color: #3f4147; border-radius: 15px; background: #2b2d31; }
.settings-group-heading { padding: 16px 17px; border-bottom: 1px solid #3f4147; border-radius: 15px 15px 0 0; background: #232428; }
.settings-group-heading > div { display: flex; align-items: center; gap: 11px; }
.discord-settings-group .settings-group-heading h2 { margin: 0; padding: 0; border: 0; color: #f2f3f5; background: none; font: 800 15px/1.2 Inter, sans-serif; }
.settings-group-heading p { margin: 3px 0 0; color: #949ba4; font-size: 9px; }

/* Kompakter Discord-Einrichtungsassistent */
.id-setup-progress { margin: 16px 0; display: grid; grid-template-columns: 180px 180px 1fr; gap: 12px; }
.id-setup-progress > article,.id-progress-bar { min-height: 88px; padding: 16px 18px; border: 1px solid var(--line); border-radius: 14px; background: rgba(13,29,26,.86); }
.id-setup-progress article { display: grid; grid-template-columns: auto 1fr; column-gap: 11px; align-content: center; }
.id-setup-progress article > span { grid-row: span 2; color: var(--teal-bright); font: 800 28px/1 Georgia,serif; }
.id-setup-progress article strong { color: var(--cream); font-size: 13px; }
.id-setup-progress article small { color: var(--muted); font-size: 9px; }
.id-setup-progress article.needs-work { border-color: rgba(216,177,104,.3); }
.id-setup-progress article.needs-work > span { color: var(--gold-soft); }
.id-progress-bar { position: relative; display: flex; align-items: center; overflow: hidden; }
.id-progress-bar::before { content:""; position:absolute; left:18px; right:18px; height:8px; border-radius:999px; background:rgba(255,255,255,.07); }
.id-progress-bar i { position:absolute; left:18px; height:8px; max-width:calc(100% - 36px); border-radius:999px; background:linear-gradient(90deg,var(--teal),var(--gold)); }
.id-progress-bar span { position:relative; z-index:1; margin-top:35px; color:var(--muted); font-size:9px; font-weight:800; }
.simplified-config-shell { display:block; background:#1e1f22; }
.simplified-config-shell .discord-config-workspace { min-width:0; }
.discord-config-toolbar .missing-filter { min-height:38px; padding:0 12px; border:1px solid #3f4147; border-radius:9px; background:#2b2d31; color:#b5bac1; cursor:pointer; font-size:10px; font-weight:800; white-space:nowrap; }
.discord-config-toolbar .missing-filter.active { border-color:rgba(216,177,104,.4); background:rgba(216,177,104,.1); color:var(--gold-soft); }
.compact-config-group { display:block; }
.compact-config-group[hidden] { display:none; }
.compact-config-group .compact-group-heading { padding:17px; display:flex; align-items:center; justify-content:space-between; gap:14px; list-style:none; cursor:pointer; }
.compact-group-heading::-webkit-details-marker,.compact-setting-summary::-webkit-details-marker { display:none; }
.compact-group-heading::after { content:"⌄"; margin-left:8px; color:#949ba4; transition:transform .15s ease; }
.compact-config-group[open] > .compact-group-heading::after { transform:rotate(180deg); }
.group-progress-ring { margin-left:auto; min-width:31px; height:31px; padding:0 8px; display:grid; place-items:center; border:1px solid rgba(216,177,104,.3); border-radius:999px; color:var(--gold-soft); font-size:10px; font-weight:900; }
.group-progress-ring.complete { border-color:rgba(28,200,186,.28); color:var(--teal-bright); }
.compact-config-group .discord-setting-grid { padding:12px; grid-template-columns:1fr; background:#1e1f22; }
.compact-config-hint { margin:0 14px 14px; padding:12px 14px; display:flex; align-items:center; gap:9px; border:1px solid rgba(28,200,186,.16); border-radius:10px; background:rgba(28,200,186,.045); color:#aeb4bc; font-size:10px; }
.compact-config-hint span,.compact-config-hint i { width:21px; height:21px; display:grid; place-items:center; border-radius:50%; background:rgba(28,200,186,.12); color:var(--teal-bright); font-style:normal; font-weight:900; }
.compact-config-hint strong { color:#d7d9dc; font-size:10px; }
.compact-setting-card { min-height:0; padding:0; display:block; overflow:hidden; border-radius:11px; background:#2b2d31; }
.compact-setting-card.is-missing { border-color:rgba(216,177,104,.26); }
.compact-setting-summary { min-height:72px; padding:13px 14px; display:grid; grid-template-columns:minmax(240px,1.15fr) minmax(190px,1fr) auto; align-items:center; gap:14px; list-style:none; cursor:pointer; }
.compact-setting-summary:hover { background:rgba(255,255,255,.025); }
.compact-setting-summary .discord-setting-title > span { background:#1e1f22; }
.compact-setting-card.is-configured .discord-setting-title > span { border-color:rgba(28,200,186,.26); color:var(--teal-bright); }
.compact-setting-summary .discord-current-assignment { min-height:auto; padding:0; background:none; }
.compact-setting-summary > em { color:#aeb4bc; font-size:10px; font-style:normal; font-weight:800; white-space:nowrap; }
.compact-setting-card[open] .compact-setting-summary { border-bottom:1px solid #3f4147; background:#25262a; }
.compact-setting-card .discord-setting-form { margin:0; padding:15px; grid-template-columns:1fr auto; background:#232428; }
.compact-complete-state { padding:30px; border:1px dashed #3f4147; border-radius:10px; color:#949ba4; text-align:center; }
.discord-structure-inspector { margin-top:16px; border:1px solid var(--line); border-radius:15px; background:rgba(13,29,26,.72); }
.discord-structure-inspector > summary { padding:17px 19px; color:var(--cream); cursor:pointer; font-size:12px; font-weight:850; }
.discord-structure-inspector .discord-server-preview { position:static; max-height:580px; margin:0 15px 15px; border-radius:12px; }
.discord-structure-inspector .discord-channel-list { max-height:430px; }
.discord-group-symbol { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 9px; color: #fff; background: #5865f2; font: 800 16px/1 ui-monospace, monospace; }
.discord-setting-grid { padding: 13px; display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 11px; }
.discord-setting-card { min-width: 0; padding: 16px; display: grid; grid-template-columns: 1fr; align-content: start; gap: 13px; border: 1px solid #3f4147 !important; border-radius: 11px; background: #313338; }
.discord-setting-card:hover { border-color: #5865f2 !important; }
.discord-setting-title { min-width: 0; display: grid; grid-template-columns: 34px minmax(0,1fr); align-items: start; gap: 10px; }
.discord-setting-title > span { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 9px; color: #b5bac1; background: #1e1f22; font: 800 17px/1 ui-monospace, monospace; }
.discord-setting-title div { min-width: 0; display: grid; }
.discord-setting-title strong { color: #f2f3f5; font-size: 13px; }
.discord-setting-title small { min-height: 31px; margin-top: 3px; color: #949ba4; font-size: 9.5px; font-weight: 500; line-height: 1.45; }
.discord-current-assignment { min-height: 32px; display: flex; flex-wrap: wrap; align-items: center; gap: 5px; }
.discord-assignment-chip, .discord-assignment-empty { max-width: 100%; padding: 5px 8px; display: inline-flex; align-items: center; gap: 5px; overflow: hidden; border-radius: 5px; color: #dbdee1; background: #404249; font-size: 9px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.discord-assignment-chip b { color: #b5bac1; font: 800 11px/1 ui-monospace, monospace; }
.discord-assignment-chip.missing { color: #f0a099; background: rgba(218,55,60,.16); }
.discord-assignment-empty { color: #949ba4; background: #25262a; font-weight: 550; }
.discord-setting-form { display: grid; grid-template-columns: 1fr; gap: 10px; }
.discord-setting-form label { gap: 6px; color: #b5bac1; font-size: 9px; letter-spacing: .03em; text-transform: uppercase; }
.discord-setting-form select { min-height: 45px; border-color: #4e5058; border-radius: 7px; background: #1e1f22; color: #f2f3f5; font-size: 11px; text-transform: none; }
.discord-setting-form select[multiple] { min-height: 128px; padding: 5px; }
.discord-setting-form select[multiple] option { padding: 7px 8px; border-radius: 4px; }
.discord-setting-form small { overflow-wrap: anywhere; color: #80848e; font: 8.5px/1.35 ui-monospace, monospace; letter-spacing: 0; text-transform: none; }
.discord-setting-form button { min-height: 39px; border-radius: 7px; background: #5865f2; }
.discord-setting-form button:hover { background: #4752c4; color: #fff; }
.discord-setting-form button:disabled, .discord-setting-form select:disabled { cursor: not-allowed; opacity: .55; }

.catalog-toolbar { margin-bottom: 16px; padding: 16px 18px; display: flex; align-items: center; justify-content: space-between; gap: 20px; border: 1px solid var(--line); border-radius: 15px; background: rgba(16,33,30,.72); }
.catalog-toolbar div { display: grid; }
.catalog-toolbar strong { color: var(--gold-soft); font: 700 17px/1.2 Georgia, serif; }
.catalog-toolbar span { margin-top: 5px; color: var(--muted); font-size: 11px; }
.catalog-toolbar input { width: min(330px, 100%); }
.catalog-card { position: relative; min-height: 290px; overflow: hidden; background: linear-gradient(145deg, rgba(17,40,35,.98), rgba(9,25,22,.98)); box-shadow: 0 14px 34px rgba(0,0,0,.14); }
.catalog-card::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 3px; background: linear-gradient(var(--gold), var(--teal)); }
.catalog-card h3 { margin-top: 5px; padding-right: 86px; font-size: 23px; }
.catalog-number { display: block; color: var(--teal-bright); font: 800 10px/1 ui-monospace, monospace; letter-spacing: .16em; }
.catalog-description { min-height: 42px; margin-top: 11px !important; line-height: 1.48; }
.catalog-facts { margin: 18px 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.catalog-facts div { min-width: 0; padding: 12px; border-left: 1px solid var(--line); background: rgba(6,16,15,.38); }
.catalog-facts div:first-child { border-left: 0; }
.catalog-facts dt { color: var(--muted); font-size: 9px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
.catalog-facts dd { margin: 5px 0 0; color: var(--cream); font-size: 12px; font-weight: 800; overflow-wrap: anywhere; }
.catalog-card .punishment { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); color: var(--gold-soft); }
.catalog-card .card-actions { position: absolute; top: 16px; right: 16px; display: flex; gap: 5px; }
.catalog-level-list { margin-top: 17px; display: grid; gap: 8px; }
.catalog-level { padding: 11px 12px; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: center; border: 1px solid var(--line); border-radius: 10px; background: rgba(6,16,15,.38); }
.catalog-level strong { color: var(--teal-bright); font: 800 11px/1 ui-monospace, monospace; }
.catalog-level span { color: var(--cream); font-size: 12px; font-weight: 700; overflow-wrap: anywhere; }
.catalog-level small { color: var(--gold-soft); font-size: 10px; white-space: nowrap; }
.catalog-repeat-note { display: block; margin-top: 10px; color: var(--muted); font-size: 10px; }
.mini-icon { width: 34px; height: 34px; border: 1px solid var(--line); border-radius: 9px; background: transparent; color: var(--muted); cursor: pointer; }
.mini-icon:hover { border-color: var(--teal); color: var(--cream); }
.warn-chip { display: inline-block; margin-top: 14px; padding: 5px 8px; border-radius: 7px; background: rgba(216,177,104,.10); color: var(--gold); font-size: 10px; font-weight: 800; }

.section-count { padding: 7px 11px; border: 1px solid var(--line); border-radius: 999px; color: var(--gold-soft); background: rgba(216,177,104,.06); font-size: 10px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.lineup-template-grid, .active-lineup-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.lineup-template-empty { grid-column: 1 / -1; }
.lineup-template-card { min-height: 240px; padding: 20px; display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 16px; background: linear-gradient(145deg, rgba(18,42,37,.98), rgba(8,24,21,.98)); transition: border-color .18s ease, opacity .18s ease, transform .18s ease; }
.lineup-template-card:hover { transform: translateY(-1px); border-color: rgba(28,200,186,.35); }
.lineup-template-card.is-enabled { box-shadow: inset 3px 0 0 rgba(28,200,186,.78); }
.lineup-template-card.is-disabled { opacity: .62; filter: saturate(.58); }
.lineup-template-top, .active-lineup-head, .lineup-template-actions { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.lineup-template-kicker, .active-lineup-head span { color: var(--teal-bright); font-size: 9px; font-weight: 900; letter-spacing: .13em; text-transform: uppercase; }
.lineup-template-card h3, .active-lineup-card h3 { margin: 4px 0 0; color: var(--cream); font: 700 21px/1.15 Georgia, serif; }
.lineup-template-card > p, .active-lineup-card > p { margin: 11px 0 0; color: var(--muted); font-size: 12px; }
.lineup-schedule { margin-top: 16px; padding: 13px 14px; display: grid; gap: 4px; border: 1px solid rgba(216,177,104,.18); border-radius: 12px; background: rgba(216,177,104,.05); }
.lineup-schedule strong { color: var(--gold-soft); font-size: 13px; letter-spacing: .06em; }
.lineup-schedule span { color: var(--muted); font-size: 11px; }
.lineup-option-chips { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 6px; }
.lineup-option-chips span { padding: 5px 8px; border: 1px solid var(--line); border-radius: 999px; color: #84918b; background: rgba(6,16,15,.38); font-size: 9px; font-weight: 800; }
.lineup-option-chips span.active { border-color: rgba(78,208,155,.24); color: var(--success); background: rgba(78,208,155,.07); }
.lineup-option-chips span.warning { border-color: rgba(216,177,104,.28); color: var(--gold-soft); background: rgba(216,177,104,.08); }
.lineup-template-actions { margin-top: auto; padding-top: 17px; align-items: center; }
.lineup-template-actions small { color: var(--muted); font-size: 9px; }
.lineup-template-actions > div { display: flex; gap: 6px; flex: 0 0 auto; }
.lineup-editor-block { border-color: rgba(28,200,186,.25); background: linear-gradient(145deg, rgba(14,37,32,.96), rgba(9,27,24,.9)); }
.field-label { display: block; margin-bottom: 8px; color: #d7ded9; font-size: 12px; font-weight: 700; }
.weekday-picker { display: grid; grid-template-columns: repeat(7, minmax(50px, 1fr)); gap: 8px; }
.weekday-picker label { display: block; cursor: pointer; }
.weekday-picker input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.weekday-picker span { min-height: 44px; display: grid; place-items: center; border: 1px solid var(--line-strong); border-radius: 11px; color: var(--muted); background: #091512; font-size: 12px; font-weight: 900; transition: border-color .16s ease, color .16s ease, background .16s ease; }
.weekday-picker input:checked + span { border-color: var(--teal-bright); color: #041110; background: var(--teal-bright); box-shadow: 0 8px 22px rgba(28,200,186,.16); }
.weekday-picker input:focus-visible + span { outline: 2px solid var(--gold); outline-offset: 2px; }
.lineup-settings-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; }
.setting-check { min-height: 78px; padding: 13px 14px; display: grid; grid-template-columns: auto 1fr; align-items: start; gap: 11px; border: 1px solid var(--line); border-radius: 12px; background: rgba(6,16,15,.36); cursor: pointer; }
.setting-check input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--teal); }
.setting-check span { display: grid; gap: 4px; }
.setting-check strong { color: var(--cream); font-size: 12px; }
.setting-check small { color: var(--muted); font-size: 10px; font-weight: 500; line-height: 1.4; }
.setting-check:has(input:checked) { border-color: rgba(28,200,186,.3); background: rgba(28,200,186,.06); }
.active-lineup-card { padding: 19px; border: 1px solid var(--line); border-radius: 16px; background: linear-gradient(145deg, rgba(17,35,32,.95), rgba(8,21,19,.98)); }
.active-lineup-head time { color: var(--gold-soft); font-size: 10px; font-weight: 800; text-align: right; }
.active-lineup-place { margin-top: 12px; color: var(--gold-soft); font-size: 11px; font-weight: 800; }
.lineup-status-grid { margin-top: 16px; display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); overflow: hidden; border: 1px solid var(--line); border-radius: 12px; }
.lineup-status-grid span { min-width: 0; padding: 11px 7px; display: grid; gap: 3px; border-left: 1px solid var(--line); color: var(--muted); font-size: 8px; font-weight: 800; text-align: center; text-transform: uppercase; }
.lineup-status-grid span:first-child { border-left: 0; }
.lineup-status-grid strong { color: var(--cream); font-size: 17px; }
.lineup-status-grid .needs-reply strong { color: #ff9a90; }
.active-lineup-foot { margin-top: 14px; padding-top: 12px; display: flex; justify-content: space-between; gap: 12px; border-top: 1px solid var(--line); color: var(--muted); font-size: 9px; }
.active-lineup-foot code { color: var(--teal-bright); }

.route-schedule-grid, .route-plan-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.route-schedule-card, .route-plan-card { min-width: 0; padding: 20px; border: 1px solid var(--line); border-radius: 16px; background: linear-gradient(145deg, rgba(17,37,33,.98), rgba(7,22,19,.98)); }
.route-schedule-card { min-height: 255px; display: flex; flex-direction: column; }
.route-schedule-card.is-enabled { box-shadow: inset 3px 0 0 rgba(28,200,186,.78); }
.route-schedule-card.is-disabled { opacity: .62; filter: saturate(.58); }
.route-schedule-card h3, .route-plan-card h3 { margin: 4px 0 0; color: var(--cream); font: 700 21px/1.15 Georgia, serif; }
.route-schedule-card > p, .route-plan-card > p { margin: 11px 0 0; color: var(--muted); font-size: 12px; }
.route-schedule-days { margin-top: 16px; padding: 13px 14px; display: grid; gap: 4px; border: 1px solid rgba(216,177,104,.2); border-radius: 12px; background: rgba(216,177,104,.05); }
.route-schedule-days strong { color: var(--gold-soft); font-size: 13px; }
.route-schedule-days span { color: var(--muted); font-size: 10px; }
.route-slot-chips { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 7px; }
.route-slot-chips span { padding: 7px 9px; border: 1px solid rgba(28,200,186,.2); border-radius: 8px; color: var(--teal-bright); background: rgba(28,200,186,.055); font: 800 10px/1 ui-monospace, monospace; }
.route-editor-block { border-color: rgba(28,200,186,.25); background: linear-gradient(145deg, rgba(14,37,32,.96), rgba(9,27,24,.9)); }
.route-day-presets { margin-bottom: 9px; display: flex; flex-wrap: wrap; gap: 7px; }
.route-day-presets button { padding: 7px 10px; border: 1px solid var(--line-strong); border-radius: 999px; color: var(--gold-soft); background: rgba(216,177,104,.05); font-size: 10px; font-weight: 800; cursor: pointer; }
.route-day-presets button:hover { border-color: var(--gold); color: var(--cream); }
.route-slot-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.route-slot-heading .field-label { margin: 0; }
.route-slot-editor { margin-top: 9px; display: grid; gap: 8px; }
.route-slot-row { padding: 10px; display: grid; grid-template-columns: minmax(130px, 1fr) auto minmax(130px, 1fr) 42px; align-items: end; gap: 10px; border: 1px solid var(--line); border-radius: 12px; background: rgba(6,16,15,.38); }
.route-slot-row > span { align-self: center; color: var(--gold-soft); font-size: 18px; }
.route-slot-row label { gap: 5px; font-size: 10px; }
.route-slot-remove { width: 42px; height: 42px; border: 1px solid rgba(223,116,106,.35); border-radius: 10px; color: #ffaaa2; background: rgba(223,116,106,.08); font-size: 20px; cursor: pointer; }
.route-help { display: block; margin-top: 8px; color: var(--muted); font-size: 10px; }
.route-plan-slots { margin-top: 16px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
.route-plan-slots span { padding: 10px; display: grid; gap: 4px; border: 1px solid var(--line); border-radius: 10px; background: rgba(6,16,15,.38); }
.route-plan-slots strong { color: var(--teal-bright); font: 800 10px/1 ui-monospace, monospace; }
.route-plan-slots small { color: var(--muted); font-size: 8px; }

.appearance-layout { display: grid; grid-template-columns: minmax(330px, .72fr) minmax(0, 1.28fr); gap: 18px; align-items: start; }
.appearance-preview-sticky { position: sticky; top: 100px; }
.appearance-profile-card { margin-top: 10px; overflow: hidden; border: 1px solid var(--line-strong); border-radius: 21px; background: linear-gradient(150deg, #13241f, #091512); box-shadow: 0 24px 60px rgba(0,0,0,.25); }
.appearance-profile-banner { height: 180px; position: relative; background: radial-gradient(circle at 75% 25%, rgba(28,200,186,.34), transparent 32%), linear-gradient(135deg, #173e36, #0d201c 62%, #362d18); background-position: center; background-size: cover; }
.appearance-profile-banner::after { content: 'AZTECAS'; position: absolute; right: 22px; bottom: 16px; color: rgba(255,241,208,.12); font: 900 30px/1 Georgia,serif; letter-spacing: .14em; }
.appearance-profile-banner.has-image::after { display: none; }
.appearance-profile-body { min-height: 310px; position: relative; padding: 61px 24px 23px; }
.appearance-avatar-wrap { width: 106px; height: 106px; position: absolute; top: -56px; left: 23px; padding: 5px; border-radius: 50%; background: #0d1d19; box-shadow: 0 7px 22px rgba(0,0,0,.32); }
.appearance-avatar-wrap img { width: 100%; height: 100%; display: block; border-radius: 50%; object-fit: cover; background: #07110f; }
.appearance-status-dot { width: 25px; height: 25px; position: absolute; right: 4px; bottom: 4px; border: 5px solid #0d1d19; border-radius: 50%; background: #4ed09b; }
.appearance-status-dot.status-idle { background: #e2a64b; }
.appearance-status-dot.status-do_not_disturb { background: #ed5d62; }
.appearance-status-dot.status-invisible { background: #707a77; }
.appearance-profile-identity { display: grid; gap: 5px; }
.appearance-profile-identity h2 { margin: 0; color: var(--cream); font: 700 28px/1 Georgia,serif; overflow-wrap: anywhere; }
.appearance-profile-identity span { color: var(--muted); font-size: 11px; }
.appearance-profile-identity b { margin-left: 5px; padding: 2px 5px; border-radius: 4px; color: white; background: #5865f2; font-size: 8px; }
.appearance-profile-bio { min-height: 62px; margin: 19px 0 0; padding: 15px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); color: #ccd6d0; font-size: 12px; line-height: 1.55; white-space: pre-wrap; }
.appearance-activity { margin-top: 15px; padding: 12px; display: flex; align-items: center; gap: 11px; border: 1px solid rgba(28,200,186,.18); border-radius: 12px; background: rgba(28,200,186,.055); }
.appearance-activity > i { width: 11px; height: 11px; flex: 0 0 auto; border-radius: 50%; background: var(--teal-bright); box-shadow: 0 0 16px rgba(28,200,186,.65); }
.appearance-activity div { min-width: 0; display: grid; gap: 3px; }
.appearance-activity small { color: var(--muted); font-size: 8px; font-weight: 800; text-transform: uppercase; }
.appearance-activity strong { color: var(--cream); font-size: 11px; overflow-wrap: anywhere; }
.appearance-scope-note { margin-top: 12px; padding: 14px 15px; display: grid; gap: 5px; border: 1px solid rgba(216,177,104,.22); border-radius: 12px; background: rgba(216,177,104,.055); }
.appearance-scope-note strong { color: var(--gold-soft); font-size: 11px; }
.appearance-scope-note span { color: var(--muted); font-size: 9px; line-height: 1.5; }
.appearance-editor-column { min-width: 0; display: grid; gap: 16px; }
.appearance-settings-block { border-color: rgba(28,200,186,.25); background: linear-gradient(145deg, rgba(14,37,32,.97), rgba(8,25,22,.96)); }
.appearance-stream-url { display: none !important; }
.appearance-stream-url.is-visible { display: grid !important; }
.appearance-media-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; }
.appearance-media-card { min-width: 0; padding: 20px; display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 17px; background: linear-gradient(145deg, rgba(17,35,32,.97), rgba(8,21,19,.98)); }
.appearance-media-head { display: flex; align-items: center; gap: 11px; }
.appearance-media-head > span { width: 35px; height: 35px; display: grid; place-items: center; border: 1px solid rgba(216,177,104,.3); border-radius: 10px; color: var(--gold-soft); background: rgba(216,177,104,.06); font: 800 9px/1 ui-monospace,monospace; }
.appearance-media-head .eyebrow { margin: 0; }
.appearance-media-head h3 { margin: 3px 0 0; color: var(--cream); font: 700 20px/1 Georgia,serif; }
.appearance-avatar-sample { width: 112px; height: 112px; margin: 18px auto 0; padding: 5px; border: 1px solid var(--line-strong); border-radius: 50%; background: #07110f; }
.appearance-avatar-sample img { width: 100%; height: 100%; display: block; border-radius: 50%; object-fit: cover; }
.appearance-banner-sample { height: 112px; margin-top: 18px; display: grid; place-items: center; border: 1px solid var(--line-strong); border-radius: 12px; background: radial-gradient(circle at 70% 25%, rgba(28,200,186,.30), transparent 32%), linear-gradient(135deg,#173e36,#171b13); background-position: center; background-size: cover; color: var(--muted); font-size: 9px; font-weight: 800; text-transform: uppercase; }
.appearance-banner-sample.has-image span { padding: 5px 8px; border-radius: 6px; background: rgba(0,0,0,.55); color: white; }
.appearance-media-card > p { min-height: 46px; margin: 15px 0 0; color: var(--muted); font-size: 10px; line-height: 1.5; }
.appearance-upload-form { margin-top: 14px; display: grid; gap: 9px; }
.appearance-upload-form label { gap: 6px; font-size: 9px; }
.appearance-upload-form input[type='file'] { min-width: 0; padding: 9px; font-size: 9px; }
.appearance-media-card > .danger-button { margin-top: 9px; align-self: flex-start; }
.appearance-warning { padding: 15px 17px; display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 15px; border: 1px solid rgba(223,116,106,.23); border-radius: 13px; background: rgba(223,116,106,.055); }
.appearance-warning strong { color: #ffaaa2; font-size: 11px; white-space: nowrap; }
.appearance-warning p { margin: 0; color: var(--muted); font-size: 9px; line-height: 1.5; }

.weekly-summary-grid { margin-bottom: 16px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.weekly-summary-grid article { min-height: 126px; padding: 19px 20px; display: grid; align-content: center; gap: 5px; border: 1px solid var(--line); border-radius: 16px; background: linear-gradient(145deg, rgba(18,42,37,.98), rgba(8,24,21,.98)); box-shadow: inset 3px 0 0 rgba(28,200,186,.65); }
.weekly-summary-grid span { color: var(--muted); font-size: 9px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.weekly-summary-grid strong { color: var(--cream); font: 700 30px/1 Georgia, serif; }
.weekly-summary-grid small { color: var(--gold-soft); font-size: 10px; }
.weekly-rule { margin-bottom: 22px; padding: 15px 18px; display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 16px; border: 1px solid rgba(216,177,104,.24); border-radius: 13px; background: rgba(216,177,104,.06); }
.weekly-rule strong { color: var(--gold-soft); font: 700 17px/1 Georgia, serif; white-space: nowrap; }
.weekly-rule p { margin: 0; color: #b9c5bf; font-size: 11px; line-height: 1.55; }
.weekly-editor-grid { margin-bottom: 22px; display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(330px, .65fr); gap: 16px; align-items: start; }
.weekly-standing-block { border-color: rgba(28,200,186,.26); background: linear-gradient(145deg, rgba(14,37,32,.97), rgba(8,25,22,.96)); }
.weekly-manual-block { background: linear-gradient(145deg, rgba(24,35,31,.95), rgba(9,22,20,.98)); }
.weekly-deposit-block { border-color: rgba(216,177,104,.22); }
.weekly-debt { color: #ff9a90; }
.weekly-credit { color: var(--success); }
.weekly-week-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 14px; }
.weekly-week-card { min-width: 0; padding: 20px; border: 1px solid var(--line); border-radius: 16px; background: linear-gradient(145deg, rgba(17,37,33,.98), rgba(7,22,19,.98)); }
.weekly-week-card h3 { margin: 4px 0 0; color: var(--cream); font: 700 21px/1.15 Georgia, serif; }
.weekly-week-card > p { margin: 11px 0 0; min-height: 18px; color: var(--muted); font-size: 11px; }
.weekly-week-amount { margin-top: 15px; display: flex; align-items: baseline; gap: 8px; }
.weekly-week-amount strong { color: var(--gold-soft); font: 700 28px/1 Georgia, serif; }
.weekly-week-amount span { color: var(--muted); font-size: 10px; }
.weekly-progress { height: 7px; margin-top: 14px; overflow: hidden; border-radius: 999px; background: rgba(255,255,255,.06); }
.weekly-progress i { height: 100%; display: block; border-radius: inherit; background: linear-gradient(90deg, var(--teal), var(--teal-bright)); box-shadow: 0 0 14px rgba(28,200,186,.32); }
.weekly-week-stats { margin-top: 12px; display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); overflow: hidden; border: 1px solid var(--line); border-radius: 10px; }
.weekly-week-stats span { padding: 9px 7px; display: grid; gap: 3px; border-left: 1px solid var(--line); color: var(--muted); font-size: 8px; font-weight: 800; text-align: center; text-transform: uppercase; }
.weekly-week-stats span:first-child { border-left: 0; }
.weekly-week-stats strong { color: var(--success); font-size: 15px; }
.weekly-week-stats .warning strong { color: #ff9a90; }
.weekly-week-stats .weekly-exempt-stat strong { color: var(--gold-soft); }
.weekly-week-card details { margin-top: 12px; border: 1px solid var(--line); border-radius: 10px; background: rgba(6,16,15,.35); }
.weekly-week-card summary { padding: 10px 12px; color: var(--gold-soft); font-size: 10px; font-weight: 800; cursor: pointer; }
.weekly-member-lists { padding: 0 12px 12px; display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 10px; }
.weekly-member-lists > div { min-width: 0; padding: 10px; border-radius: 8px; background: rgba(255,255,255,.025); }
.weekly-member-lists strong { color: var(--cream); font-size: 9px; }
.weekly-member-lists p { max-height: 160px; margin: 7px 0 0; overflow: auto; color: var(--muted); font-size: 9px; line-height: 1.7; }
.weekly-audit-wrap { max-height: 680px; overflow: auto; }
.weekly-audit-wrap thead { position: sticky; top: 0; z-index: 1; background: #10231f; }
.weekly-audit-type { display: inline-block; padding: 5px 8px; border: 1px solid var(--line-strong); border-radius: 999px; color: var(--cream); background: rgba(255,255,255,.025); font-size: 9px; font-weight: 800; white-space: nowrap; }
.weekly-audit-type.type-deposit { border-color: rgba(78,208,155,.3); color: var(--success); }
.weekly-audit-type.type-allocated, .weekly-audit-type.type-credit_applied { border-color: rgba(28,200,186,.3); color: var(--teal-bright); }
.weekly-audit-type.type-week_created, .weekly-audit-type.type-standing_order_saved { border-color: rgba(216,177,104,.3); color: var(--gold-soft); }
.weekly-audit-type.type-absence_exempted { border-color: rgba(216,177,104,.35); color: var(--gold-soft); }
.weekly-audit-type.type-absence_restored { border-color: rgba(223,116,106,.3); color: #ffaaa2; }

.empty-state { padding: 50px 20px; border: 1px dashed var(--line-strong); border-radius: 16px; text-align: center; color: var(--muted); }
.empty-state strong { display: block; color: var(--cream); font: 700 20px/1.1 Georgia, serif; }
.empty-state p { margin: 8px 0 0; }

/* Gefuehrter Discord-Server-Installationsassistent */
.server-install-launch { margin: 0 0 20px; padding: 22px; display: grid; grid-template-columns: 50px minmax(0,1fr) auto; align-items: center; gap: 18px; border: 1px solid rgba(88,101,242,.4); border-radius: 18px; background: linear-gradient(135deg, rgba(88,101,242,.16), rgba(8,27,24,.96) 58%); box-shadow: inset 0 1px rgba(255,255,255,.035); }
.server-install-launch-icon { width: 50px; height: 50px; display: grid; place-items: center; border: 1px solid rgba(88,101,242,.5); border-radius: 14px; color: #fff; background: #5865f2; font-size: 29px; box-shadow: 0 12px 30px rgba(88,101,242,.2); }
.server-install-launch h2 { margin: 3px 0 6px; color: var(--cream); font: 700 22px/1.1 Georgia,serif; }
.server-install-launch p:not(.eyebrow) { max-width: 770px; margin: 0; color: var(--muted); font-size: 11px; line-height: 1.55; }
.server-install-launch .primary-button { white-space: nowrap; }

.server-install-dialog { width: min(900px, calc(100% - 28px)); max-height: min(880px, calc(100vh - 28px)); padding: 0; overflow: auto; border: 1px solid #3d4745; border-radius: 24px; background: #0b1715; color: var(--cream); box-shadow: 0 32px 100px rgba(0,0,0,.68); }
.server-install-dialog::backdrop { background: rgba(0,0,0,.78); backdrop-filter: blur(7px); }
.server-install-dialog > .dialog-close { z-index: 5; position: sticky; float: right; top: 14px; margin: 14px 14px -52px 0; background: rgba(30,31,34,.92); }
.server-install-dialog .primary-button.disabled { pointer-events: none; opacity: .45; }
.install-loading,.install-error,.install-complete { min-height: 470px; padding: 55px; display: grid; place-items: center; align-content: center; text-align: center; }
.install-loading > span,.install-contact-wait > span { width: 24px; height: 24px; display: block; border: 3px solid rgba(28,200,186,.18); border-top-color: var(--teal-bright); border-radius: 50%; animation: install-spin .8s linear infinite; }
.install-loading h2,.install-error h2 { margin: 19px 0 4px; font: 700 28px/1 Georgia,serif; }
.install-loading p,.install-error p { color: var(--muted); }
@keyframes install-spin { to { transform: rotate(360deg); } }

.install-welcome { min-height: 610px; padding: 38px clamp(24px,5vw,56px) 44px; }
.install-dialog-brand { display: flex; align-items: center; gap: 14px; }
.install-dialog-brand img { width: 62px; height: 62px; object-fit: contain; }
.install-dialog-brand h2 { margin: 3px 0 0; color: var(--cream); font: 700 32px/1 Georgia,serif; }
.install-roadmap { margin: 32px 0 24px; padding: 0; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; list-style: none; }
.install-roadmap li { min-width: 0; padding: 15px; display: grid; grid-template-columns: 30px 1fr; gap: 10px; border: 1px solid var(--line); border-radius: 12px; background: rgba(255,255,255,.018); }
.install-roadmap li.active { border-color: rgba(88,101,242,.45); background: rgba(88,101,242,.09); }
.install-roadmap li > span { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: #404249; font-size: 11px; font-weight: 900; }
.install-roadmap li.active > span { background: #5865f2; }
.install-roadmap div { min-width: 0; display: grid; gap: 4px; }
.install-roadmap strong { font-size: 11px; }
.install-roadmap small { color: var(--muted); font-size: 9px; line-height: 1.4; }
.install-invite-button { width: 100%; min-height: 52px; display: flex; justify-content: center; font-size: 13px; }
.install-invite-hint { margin: 11px 0 0; color: var(--muted); font-size: 10px; text-align: center; }
.install-contact-wait { margin-top: 13px; padding: 13px 15px; display: flex; align-items: center; justify-content: center; gap: 12px; border: 1px solid rgba(28,200,186,.28); border-radius: 11px; background: rgba(28,200,186,.06); }
.install-contact-wait > span { width: 19px; height: 19px; flex: 0 0 auto; border-width: 2px; }
.install-contact-wait div { display: grid; gap: 3px; }
.install-contact-wait strong { color: var(--teal-bright); font-size: 10px; }
.install-contact-wait small { color: var(--muted); font-size: 9px; }
.install-existing-server { margin-top: 25px; padding: 17px; display: grid; grid-template-columns: minmax(180px,.8fr) minmax(300px,1.2fr); align-items: center; gap: 20px; border: 1px solid var(--line); border-radius: 14px; background: rgba(255,255,255,.02); }
.install-existing-server > div:first-child { display: grid; gap: 4px; }
.install-existing-server strong { color: var(--cream); font-size: 12px; }
.install-existing-server small { color: var(--muted); font-size: 9px; }
.install-existing-row { display: grid; grid-template-columns: 1fr auto; gap: 8px; }
.install-existing-row select { min-width: 0; }
.install-refresh-link { margin: 14px auto 0; display: block; border: 0; color: var(--muted); background: transparent; font-size: 10px; cursor: pointer; }
.install-refresh-link:hover { color: var(--teal-bright); }

.install-wizard { min-height: 680px; padding: 31px clamp(22px,4vw,46px) 28px; }
.install-wizard-header { padding-right: 44px; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.install-wizard-header > strong { color: var(--teal-bright); font: 800 22px/1 ui-monospace,monospace; }
.install-server-identity { display: flex; align-items: center; gap: 13px; }
.install-server-identity img { width: 52px; height: 52px; border: 1px solid var(--line); border-radius: 16px; object-fit: cover; }
.install-server-identity h2 { margin: 3px 0 4px; font: 700 25px/1 Georgia,serif; }
.install-server-identity span { color: var(--muted); font-size: 9px; }
.install-progress { height: 7px; margin-top: 20px; overflow: hidden; border-radius: 999px; background: rgba(255,255,255,.06); }
.install-progress i { height: 100%; display: block; border-radius: inherit; background: linear-gradient(90deg,#5865f2,var(--teal-bright)); transition: width .25s ease; }
.install-permission-ok { margin-top: 13px; color: var(--success); font-size: 9px; font-weight: 800; }
.install-permission-warning { margin-top: 13px; padding: 12px 14px; display: grid; gap: 4px; border: 1px solid rgba(223,116,106,.35); border-radius: 10px; background: rgba(223,116,106,.07); }
.install-permission-warning strong { color: #ffaaa2; font-size: 10px; }
.install-permission-warning span,.install-permission-warning small { color: var(--muted); font-size: 9px; }
.install-section-progress { margin-top: 20px; display: grid; grid-template-columns: repeat(3,1fr); overflow: hidden; border: 1px solid var(--line); border-radius: 10px; }
.install-section-progress span { padding: 10px; display: flex; justify-content: center; gap: 7px; border-left: 1px solid var(--line); color: var(--muted); font-size: 9px; font-weight: 800; }
.install-section-progress span:first-child { border-left: 0; }
.install-section-progress span.active { color: #fff; background: rgba(88,101,242,.15); }
.install-section-progress b { color: var(--teal-bright); }
.install-current-step { margin-top: 15px; padding: clamp(20px,3vw,30px); border: 1px solid #3f4147; border-radius: 16px; background: #1e1f22; }
.install-current-step.resolved { border-color: rgba(78,208,155,.32); }
.install-step-count { margin-bottom: 17px; display: flex; align-items: center; justify-content: space-between; color: #949ba4; font-size: 9px; font-weight: 800; }
.install-step-count b { padding: 5px 8px; border-radius: 999px; color: var(--gold-soft); background: rgba(216,177,104,.09); }
.install-current-step.resolved .install-step-count b { color: var(--success); background: rgba(78,208,155,.08); }
.install-current-step h3 { margin: 4px 0 7px; color: #f2f3f5; font: 800 22px/1.1 Inter,sans-serif; }
.install-current-step > p:not(.eyebrow) { margin: 0 0 18px; color: #b5bac1; font-size: 10px; }
.install-assign-form { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 9px; }
.install-assign-form label,.install-create-form label { display: grid; gap: 6px; color: #b5bac1; font-size: 9px; font-weight: 700; }
.install-assign-form select,.install-create-form select,.install-create-form input,.install-quick-category input { border-color: #4e5058; background: #2b2d31; color: #f2f3f5; }
.install-or { height: 28px; display: flex; align-items: center; gap: 10px; color: #6d6f78; font-size: 8px; text-transform: uppercase; }
.install-or::before,.install-or::after { height: 1px; flex: 1; content: ''; background: #35363c; }
.install-create-box { padding: 15px; border: 1px solid #35363c; border-radius: 12px; background: #232428; }
.install-create-heading { margin-bottom: 12px; display: flex; align-items: center; gap: 10px; }
.install-create-heading > span { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 8px; color: #fff; background: #5865f2; font-size: 17px; }
.install-create-heading div { display: grid; gap: 3px; }
.install-create-heading strong { color: #f2f3f5; font-size: 10px; }
.install-create-heading small { color: #949ba4; font-size: 8.5px; }
.install-create-form { display: grid; grid-template-columns: minmax(150px,.75fr) minmax(180px,1fr) auto; align-items: end; gap: 8px; }
.install-create-form.compact { grid-template-columns: 1fr auto; }
.install-quick-category { margin-top: 10px; }
.install-quick-category summary { color: #949ba4; font-size: 8.5px; cursor: pointer; }
.install-quick-category form { margin-top: 8px; display: grid; grid-template-columns: 1fr auto; gap: 8px; }
.install-wizard-footer { margin-top: 15px; display: flex; justify-content: flex-end; gap: 8px; }
.install-wizard-footer [data-install-finish] { margin-left: auto; }
.install-save-note { margin: 11px 0 0; color: var(--muted); font-size: 8.5px; text-align: center; }
.install-complete-mark { width: 72px; height: 72px; display: grid; place-items: center; border: 1px solid rgba(78,208,155,.42); border-radius: 50%; color: #06130e; background: var(--success); font-size: 34px; box-shadow: 0 0 35px rgba(78,208,155,.22); }
.install-complete h2 { margin: 7px 0 8px; font: 700 34px/1 Georgia,serif; }
.install-complete > p:not(.eyebrow) { max-width: 590px; color: var(--muted); line-height: 1.6; }
.install-complete-actions { margin-top: 17px; display: flex; gap: 9px; }

.form-dialog { width: min(540px, calc(100% - 28px)); padding: 0; border: 1px solid var(--line-strong); border-radius: 22px; background: #0d1d1a; color: var(--cream); box-shadow: var(--shadow); }
.catalog-dialog { width: min(860px, calc(100% - 28px)); }
.form-dialog::backdrop { background: rgba(0, 0, 0, .72); backdrop-filter: blur(5px); }
.form-dialog form { position: relative; padding: 29px; display: grid; gap: 16px; }
.form-dialog h2 { margin: -4px 0 4px; font: 700 30px/1 Georgia, serif; }
.dialog-close { position: absolute; top: 14px; right: 14px; width: 38px; height: 38px; border: 0; border-radius: 50%; background: var(--panel); color: var(--muted); font-size: 24px; cursor: pointer; }
.dialog-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.compact-dialog { width: min(480px, calc(100% - 28px)); }
.dialog-copy { margin: -4px 0 0; color: var(--muted); }
.form-hint { margin: -4px 0 0; color: var(--muted); font-size: 11px; }
.level-editor-heading { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding-top: 4px; }
.level-editor-heading div { display: grid; gap: 4px; }
.level-editor-heading strong { color: var(--gold-soft); font: 700 18px/1.1 Georgia, serif; }
.level-editor-heading small { color: var(--muted); font-size: 11px; }
.catalog-level-editor { display: grid; gap: 11px; max-height: min(48vh, 520px); overflow: auto; padding-right: 4px; }
.catalog-level-edit { padding: 14px; display: grid; grid-template-columns: 72px minmax(130px,.8fr) minmax(180px,1.4fr) 110px auto auto; gap: 10px; align-items: end; border: 1px solid var(--line); border-radius: 13px; background: rgba(6,16,15,.42); }
.catalog-level-edit > strong { align-self: center; color: var(--teal-bright); font: 800 12px/1 ui-monospace, monospace; }
.catalog-level-edit label { gap: 5px; font-size: 9px; }
.catalog-level-edit input { min-width: 0; }
.catalog-level-edit .check-row { min-height: 43px; padding: 0 4px; align-self: end; }
.catalog-level-remove { align-self: end; width: 43px; height: 43px; border: 1px solid rgba(223,116,106,.35); border-radius: 10px; background: rgba(223,116,106,.08); color: #ffaaa2; cursor: pointer; }

.toast { position: fixed; right: 22px; bottom: 22px; z-index: 100; max-width: min(420px, calc(100vw - 44px)); padding: 14px 17px; border: 1px solid rgba(78,208,155,.35); border-radius: 13px; background: #10251f; color: #dff8ec; box-shadow: var(--shadow); }
.toast.error { border-color: rgba(223,116,106,.45); background: #2a1716; color: #ffd8d4; }

.auth-screen {
  min-height: 100vh;
  background:
    linear-gradient(90deg, rgba(2, 10, 9, .97), rgba(2, 10, 9, .76) 48%, rgba(2, 10, 9, .42)),
    linear-gradient(0deg, rgba(2, 10, 9, .75), transparent 55%),
    url('/assets/group-background.png') center / cover fixed;
}
.auth-shell { width: min(1180px, calc(100% - 36px)); min-height: 100vh; margin: 0 auto; padding: 55px 0 30px; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; }
.auth-card { width: min(535px, 100%); padding: clamp(28px, 5vw, 50px); border: 1px solid var(--line-strong); border-radius: 28px; background: rgba(6, 21, 18, .88); backdrop-filter: blur(18px); box-shadow: var(--shadow); }
.auth-card.compact { width: min(510px, 100%); }
.auth-logo { width: 154px; height: 154px; margin: -12px 0 17px -9px; object-fit: contain; filter: drop-shadow(0 18px 22px rgba(0,0,0,.38)); }
.auth-logo.small { width: 112px; height: 112px; }
.auth-card h1 { margin: 0; font: 700 clamp(42px, 7vw, 68px)/.9 Georgia, serif; letter-spacing: -.05em; color: #fff1d0; }
.auth-copy { margin: 22px 0 0; color: #bdcbc4; font-size: 16px; }
.discord-button { margin-top: 29px; min-height: 54px; padding: 0 20px; display: flex; align-items: center; justify-content: space-between; gap: 20px; border-radius: 13px; background: var(--teal); color: white; font-weight: 800; }
.discord-button:hover { background: var(--teal-bright); color: var(--ink); }
.discord-button b { font-size: 21px; }
.auth-note { margin-top: 21px; display: flex; align-items: center; gap: 9px; color: var(--muted); font-size: 11px; }
.auth-note span { width: 7px; height: 7px; border-radius: 50%; background: var(--success); box-shadow: 0 0 14px var(--success); }
.auth-footer { margin: 25px 0 0 4px; color: var(--gold-soft); font: 700 11px/1 Georgia, serif; letter-spacing: .2em; text-transform: uppercase; }
.setup-card { margin-top: 26px; padding: 16px; border: 1px solid rgba(216,177,104,.32); border-radius: 13px; background: rgba(216,177,104,.07); color: var(--gold-soft); }
.setup-card p { margin: 7px 0 0; color: #c8c1b2; font-size: 12px; }
.setup-card code { color: var(--teal-bright); overflow-wrap: anywhere; }

@media (max-width: 980px) {
  .feature-grid, .system-grid, .catalog-grid { grid-template-columns: repeat(2, 1fr); }
  .sanction-workflow { grid-template-columns: 1fr; }
  .setting-row { grid-template-columns: 1fr auto; }
  .setting-form { display: grid; grid-column: 1 / -1; grid-template-columns: 1fr auto; }
  .welcome-designer-layout { grid-template-columns: 1fr; }
  .welcome-canvas-block { position: static; }
  .verification-editor { grid-template-columns: 1fr; }
  .lineup-template-grid, .active-lineup-grid { grid-template-columns: 1fr; }
  .route-schedule-grid, .route-plan-grid { grid-template-columns: 1fr; }
  .weekly-editor-grid, .weekly-week-grid { grid-template-columns: 1fr; }
  .appearance-layout { grid-template-columns: 1fr; }
  .appearance-preview-sticky { position: static; }
  .id-server-picker { grid-template-columns: 1fr; }
  .id-server-mode { justify-self: start; }
  .discord-config-shell { grid-template-columns: 250px minmax(0,1fr); }
  .discord-setting-grid { grid-template-columns: 1fr; }
  .discord-config-toolbar { align-items: stretch; flex-direction: column; }
  .discord-config-search { width: 100%; }
  .id-setup-progress { grid-template-columns:1fr 1fr; }
  .id-progress-bar { grid-column:1 / -1; }
  .compact-setting-summary { grid-template-columns:1fr auto; }
  .compact-setting-summary .discord-current-assignment { grid-column:1 / -1; }
}

@media (max-width: 720px) {
  .topbar { height: 72px; padding: 0 14px; grid-template-columns: auto 1fr auto; gap: 9px; }
  .brand span, .account-copy { display: none; }
  .brand img { width: 45px; height: 45px; }
  .menu-wrap { justify-self: center; }
  .menu-button { min-width: 126px; height: 42px; }
  .account img { width: 36px; height: 36px; }
  .icon-button { display: none; }
  .app-shell { width: min(100% - 24px, 1320px); padding-top: 18px; }
  .hero { min-height: 610px; background-image: linear-gradient(0deg, rgba(4,12,11,.98) 0%, rgba(4,12,11,.68) 72%, rgba(4,12,11,.32)), url('/assets/group-background.png'); background-position: 57% center; }
  .hero-mark { top: 22px; right: 20px; width: 118px; }
  .hero-content { padding: 28px; }
  .hero h1 { font-size: clamp(52px, 18vw, 77px); }
  .page-heading { align-items: flex-start; flex-direction: column; }
  .feature-grid, .system-grid, .catalog-grid, .form-grid, .compact-form, .server-select-form { grid-template-columns: 1fr; }
  .form-grid .wide { grid-column: auto; }
  .section-head { align-items: flex-start; flex-direction: column; }
  .feature-disabled-banner { align-items: flex-start; flex-direction: column; }
  .backend-restart-banner { align-items: flex-start; flex-direction: column; }
  .main-server-missing-banner { align-items: flex-start; flex-direction: column; }
  .catalog-toolbar { align-items: stretch; flex-direction: column; }
  .catalog-toolbar input { width: 100%; }
  .catalog-facts { grid-template-columns: 1fr; }
  .catalog-facts div { border-top: 1px solid var(--line); border-left: 0; }
  .catalog-facts div:first-child { border-top: 0; }
  .catalog-level-edit { grid-template-columns: 1fr 1fr; }
  .catalog-level-edit > strong { grid-column: 1 / -1; }
  .dialog-grid { grid-template-columns: 1fr; }
  .weekday-picker { grid-template-columns: repeat(4, 1fr); }
  .lineup-settings-grid { grid-template-columns: 1fr; }
  .route-slot-row { grid-template-columns: 1fr auto 1fr 42px; }
  .route-plan-slots { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .weekly-summary-grid { grid-template-columns: 1fr; }
  .weekly-rule { grid-template-columns: 1fr; }
  .appearance-media-grid { grid-template-columns: 1fr; }
  .appearance-warning { grid-template-columns: 1fr; }
  .discord-config-shell { grid-template-columns: 1fr; }
  .discord-server-preview { position: static; }
  .discord-channel-list { min-height: 0; max-height: 420px; }
  .discord-config-toolbar { top: 82px; }
  .id-setup-progress { grid-template-columns:1fr; }
  .id-progress-bar { grid-column:auto; }
  .compact-setting-summary { grid-template-columns:1fr auto; }
  .compact-setting-card .discord-setting-form { grid-template-columns:1fr; }
  .server-install-launch { grid-template-columns: 44px 1fr; }
  .server-install-launch-icon { width: 44px; height: 44px; }
  .server-install-launch .primary-button { grid-column: 1 / -1; width: 100%; }
  .install-roadmap { grid-template-columns: 1fr; }
  .install-existing-server { grid-template-columns: 1fr; }
  .install-assign-form,.install-create-form,.install-create-form.compact { grid-template-columns: 1fr; }
  .install-wizard-footer { display: grid; grid-template-columns: 1fr 1fr; }
  .install-wizard-footer [data-install-finish] { grid-column: 1 / -1; margin-left: 0; }
  .twitch-roster-list > article { grid-template-columns: 40px minmax(0,1fr) auto; }
  .twitch-roster-list article > a { display: none; }
}

@media (max-width: 480px) {
  .feature-card { min-height: 150px; padding: 16px; }
  .feature-card-footer { align-items: flex-start; }
  .section-block { border-radius: 17px; }
  .setting-form { grid-template-columns: 1fr; }
  .setting-form button { width: 100%; }
  .auth-shell { justify-content: flex-end; padding-bottom: 24px; }
  .auth-card { border-radius: 23px; }
  .lineup-template-actions, .active-lineup-foot { align-items: stretch; flex-direction: column; }
  .lineup-template-actions > div { width: 100%; }
  .lineup-template-actions button { flex: 1; }
  .lineup-status-grid { grid-template-columns: repeat(2, 1fr); }
  .lineup-status-grid span { border-top: 1px solid var(--line); }
  .lineup-status-grid span:nth-child(odd) { border-left: 0; }
  .route-slot-row { grid-template-columns: 1fr 1fr 42px; }
  .route-slot-row > span { display: none; }
  .route-plan-slots { grid-template-columns: 1fr; }
  .weekly-week-stats { grid-template-columns: repeat(2, 1fr); }
  .weekly-week-stats span { border-top: 1px solid var(--line); }
  .weekly-week-stats span:nth-child(odd) { border-left: 0; }
  .weekly-member-lists { grid-template-columns: 1fr; }
  .server-install-dialog { width: 100%; max-width: none; max-height: calc(100vh - 10px); border-radius: 20px 20px 0 0; }
  .install-welcome,.install-wizard { padding-left: 17px; padding-right: 17px; }
  .install-existing-row,.install-quick-category form { grid-template-columns: 1fr; }
  .install-wizard-header { padding-right: 38px; }
  .install-server-identity img { width: 43px; height: 43px; }
  .install-server-identity h2 { font-size: 20px; }
  .install-wizard-header > strong { display: none; }
  .install-section-progress span { padding: 8px 4px; font-size: 8px; }
  .install-complete-actions { width: 100%; flex-direction: column; }
  .twitch-roster-list > article { grid-template-columns: 36px minmax(0,1fr); }
  .twitch-roster-avatar { width: 36px; height: 36px; }
  .twitch-roster-list article > .danger-button { grid-column: 1 / -1; width: 100%; }
}

/* Grosses, ruhiges Einstellungs-Dashboard */
.settings-home { display: grid; gap: 22px; }
.settings-home > * { margin-top: 0; }

.settings-hero {
  position: relative;
  min-height: 390px;
  padding: clamp(30px, 5vw, 62px);
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(310px, .65fr);
  align-items: center;
  gap: clamp(30px, 5vw, 72px);
  overflow: hidden;
  border: 1px solid rgba(28, 200, 186, .32);
  border-radius: 30px;
  background:
    radial-gradient(circle at 89% 20%, rgba(28, 200, 186, .17), transparent 31%),
    radial-gradient(circle at 48% 110%, rgba(216, 177, 104, .10), transparent 42%),
    linear-gradient(135deg, rgba(15, 43, 37, .98), rgba(6, 20, 18, .99) 68%);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .32), inset 0 1px rgba(255, 255, 255, .045);
}
.settings-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: linear-gradient(rgba(255,255,255,.022) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.022) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: linear-gradient(90deg, #000, transparent 76%);
}
.settings-hero-copy { position: relative; z-index: 2; }
.settings-hero-copy .eyebrow { display: flex; align-items: center; gap: 9px; }
.settings-hero-copy .eyebrow > span { width: 7px; height: 7px; border-radius: 50%; background: var(--teal-bright); box-shadow: 0 0 0 6px rgba(28,200,186,.10); }
.settings-hero h1 { margin: 0; color: #fff7e6; font: 700 clamp(45px, 5.4vw, 76px)/.91 Georgia, serif; letter-spacing: -.055em; }
.settings-hero h1 em { color: var(--gold-soft); font-weight: 700; }
.settings-hero-copy > p:not(.eyebrow) { max-width: 680px; margin: 21px 0 0; color: #b8c5be; font-size: clamp(14px, 1.4vw, 17px); line-height: 1.65; }
.settings-hero-actions { margin-top: 28px; display: flex; flex-wrap: wrap; gap: 11px; }
.settings-hero-actions .primary-button, .settings-hero-actions .secondary-button { min-height: 50px; padding: 0 20px; border-radius: 13px; font-size: 13px; }
.settings-install-button { display: inline-flex; align-items: center; gap: 10px; box-shadow: 0 13px 30px rgba(7,155,147,.2); }
.settings-install-button > span { font-size: 20px; font-weight: 500; line-height: 1; }
.settings-install-hint { max-width: 690px; margin-top: 14px; display: block; color: #7f9189; font-size: 11px; line-height: 1.5; }
.settings-hero-mark { position: absolute; z-index: 0; top: -68px; right: -52px; width: 330px; height: 330px; object-fit: contain; opacity: .075; filter: grayscale(1); transform: rotate(8deg); pointer-events: none; }

.settings-hero-status {
  position: relative;
  z-index: 2;
  min-width: 0;
  padding: 25px;
  display: grid;
  grid-template-columns: 116px minmax(0,1fr);
  align-items: center;
  gap: 22px;
  border: 1px solid rgba(232, 210, 163, .18);
  border-radius: 23px;
  background: rgba(4, 16, 14, .68);
  box-shadow: 0 22px 48px rgba(0,0,0,.22), inset 0 1px rgba(255,255,255,.04);
  backdrop-filter: blur(12px);
}
.settings-progress-ring { position: relative; width: 116px; height: 116px; display: grid; place-items: center; border-radius: 50%; background: conic-gradient(var(--teal-bright) 0 var(--setup-progress), rgba(255,255,255,.075) var(--setup-progress) 360deg); box-shadow: 0 0 36px rgba(28,200,186,.12); }
.settings-progress-ring::after { content: ""; position: absolute; inset: 9px; border-radius: 50%; background: #091d19; box-shadow: inset 0 0 0 1px rgba(255,255,255,.045); }
.settings-progress-ring > span { position: relative; z-index: 1; display: flex; align-items: baseline; }
.settings-progress-ring strong { color: #fff8e9; font: 800 33px/1 Georgia,serif; }
.settings-progress-ring small { margin-left: 2px; color: var(--teal-bright); font-size: 13px; font-weight: 900; }
.settings-hero-status > div:last-child { min-width: 0; }
.settings-live-label { margin-bottom: 9px; display: flex; align-items: center; gap: 7px; color: var(--teal-bright); font-size: 10px; font-weight: 900; letter-spacing: .16em; text-transform: uppercase; }
.settings-live-label i { width: 7px; height: 7px; border-radius: 50%; background: var(--success); box-shadow: 0 0 0 5px rgba(78,208,155,.09); }
.settings-hero-status > div > strong { display: block; color: var(--cream); font: 700 20px/1.15 Georgia,serif; }
.settings-hero-status p { margin: 8px 0 0; color: var(--muted); font-size: 12px; line-height: 1.5; }

.settings-checklist, .settings-clip-card {
  padding: clamp(25px, 3.5vw, 40px);
  border: 1px solid rgba(232,210,163,.17);
  border-radius: 25px;
  background: linear-gradient(145deg, rgba(14, 34, 30, .96), rgba(8, 24, 21, .97));
  box-shadow: 0 20px 50px rgba(0,0,0,.18);
}
.settings-section-title { display: flex; align-items: end; justify-content: space-between; gap: 22px; }
.settings-section-title .eyebrow { margin-bottom: 8px; }
.settings-section-title h2 { margin: 0; color: #fff5df; font: 700 clamp(27px, 3vw, 38px)/1 Georgia,serif; letter-spacing: -.025em; }
.settings-section-title p:not(.eyebrow) { margin: 10px 0 0; color: var(--muted); font-size: 13px; }
.settings-open-badge { flex: 0 0 auto; padding: 9px 13px; border: 1px solid rgba(216,177,104,.3); border-radius: 999px; background: rgba(216,177,104,.08); color: var(--gold-soft); font-size: 10px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.settings-open-badge.complete { border-color: rgba(78,208,155,.3); background: rgba(78,208,155,.08); color: var(--success); }
.settings-checklist > .setup-progress { height: 9px; margin: 25px 0 20px; border: 1px solid rgba(255,255,255,.025); background: rgba(255,255,255,.055); }
.settings-checklist > .setup-progress i { background: linear-gradient(90deg, #0baea4, var(--teal-bright) 70%, var(--gold-soft)); box-shadow: 0 0 18px rgba(28,200,186,.22); }

.settings-home .setup-step-grid { margin: 0; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 15px; }
.settings-home .setup-step { position: relative; min-height: 235px; padding: 22px; display: flex; flex-direction: column; gap: 0; overflow: hidden; border-radius: 19px; background: linear-gradient(145deg, rgba(18,43,38,.95), rgba(9,27,24,.96)); transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease; }
.settings-home .setup-step::after { content: ""; position: absolute; top: -50px; right: -48px; width: 130px; height: 130px; border-radius: 50%; background: rgba(28,200,186,.055); pointer-events: none; }
.settings-home .setup-step:hover { transform: translateY(-2px); border-color: rgba(28,200,186,.42); box-shadow: 0 18px 35px rgba(0,0,0,.19); }
.settings-home .setup-step.needs-work { border-color: rgba(216,177,104,.34); background: linear-gradient(145deg, rgba(50,39,20,.68), rgba(11,29,25,.96) 70%); }
.settings-home .setup-step.needs-work::after { background: rgba(216,177,104,.07); }
.setup-step-top { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.setup-step-icon { width: 43px; height: 43px; display: grid; place-items: center; border: 1px solid rgba(28,200,186,.28); border-radius: 13px; background: rgba(28,200,186,.09); color: var(--teal-bright); font-size: 19px; font-weight: 900; }
.needs-work .setup-step-icon { border-color: rgba(216,177,104,.3); background: rgba(216,177,104,.09); color: var(--gold-soft); }
.setup-step-state { padding: 6px 9px; border-radius: 999px; background: rgba(78,208,155,.09); color: var(--success); font-size: 9px; font-weight: 900; letter-spacing: .07em; text-transform: uppercase; }
.needs-work .setup-step-state { background: rgba(216,177,104,.1); color: var(--gold-soft); }
.setup-step-copy { position: relative; z-index: 1; margin-top: 19px; }
.setup-step-copy > small { color: var(--teal-bright); font-size: 9px; font-weight: 900; letter-spacing: .17em; text-transform: uppercase; }
.needs-work .setup-step-copy > small { color: var(--gold-soft); }
.settings-home .setup-step h3 { margin: 5px 0 8px; color: #fff5df; font: 700 22px/1.1 Georgia,serif; }
.settings-home .setup-step p { min-height: 0; margin: 0; color: var(--muted); font-size: 13px; line-height: 1.55; }
.settings-card-action { position: relative; z-index: 1; min-height: 39px; margin-top: auto; padding: 0; display: flex; align-items: end; justify-content: space-between; gap: 14px; border: 0; border-top: 1px solid rgba(232,210,163,.12); background: transparent; color: #dce5e0; cursor: pointer; font-size: 11px; font-weight: 850; text-align: left; }
.settings-card-action b { color: var(--teal-bright); font-size: 18px; line-height: .8; transition: transform .16s ease; }
.needs-work .settings-card-action b { color: var(--gold-soft); }
.settings-card-action:hover b { transform: translateX(4px); }

.settings-route-title { margin-top: 8px; padding: 12px 6px 0; }
.settings-home .settings-route-grid { margin: 0; gap: 15px; }
.settings-route-card { position: relative; min-height: 380px; padding: 25px; display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--line); border-radius: 22px; background: rgba(13,29,26,.9); box-shadow: 0 18px 42px rgba(0,0,0,.14); transition: transform .18s ease, border-color .18s ease; }
.settings-route-card::before { content: ""; position: absolute; inset: 0; opacity: .7; pointer-events: none; }
.settings-route-card.discord-card::before { background: radial-gradient(circle at 100% 0,rgba(88,101,242,.17),transparent 43%); }
.settings-route-card.appearance-card::before { background: radial-gradient(circle at 100% 0,rgba(216,177,104,.14),transparent 43%); }
.settings-route-card.automation-card::before { background: radial-gradient(circle at 100% 0,rgba(28,200,186,.14),transparent 43%); }
.settings-route-card:hover { transform: translateY(-3px); border-color: rgba(28,200,186,.35); }
.settings-route-top, .settings-route-card > div { position: relative; z-index: 1; }
.settings-route-top { display: flex; align-items: flex-start; justify-content: space-between; }
.settings-route-icon { width: 58px; height: 58px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.1); border-radius: 17px; background: rgba(255,255,255,.055); color: #fff; font-size: 25px; font-weight: 900; }
.discord-card .settings-route-icon { color: #aeb5ff; background: rgba(88,101,242,.13); }
.appearance-card .settings-route-icon { color: var(--gold-soft); background: rgba(216,177,104,.10); }
.automation-card .settings-route-icon { color: var(--teal-bright); background: rgba(28,200,186,.09); }
.settings-route-top small { color: #64736c; font: 800 11px/1 ui-monospace,monospace; }
.settings-route-card > div:nth-child(2) { margin-top: 30px; }
.settings-route-card .eyebrow { margin-bottom: 8px; }
.settings-route-card h2 { margin: 0; color: #fff5df; font: 700 clamp(27px,2.6vw,36px)/.98 Georgia,serif; letter-spacing: -.025em; }
.settings-route-card p:not(.eyebrow) { min-height: 0; margin: 16px 0 22px; color: var(--muted); font-size: 13px; line-height: 1.55; }
.settings-route-actions { margin-top: auto; display: grid; gap: 7px; border-top: 1px solid rgba(232,210,163,.12); padding-top: 10px; }
.settings-route-actions button { min-height: 37px; padding: 0; display: flex; align-items: center; justify-content: space-between; border: 0; background: transparent; color: #d4ded9; cursor: pointer; font-size: 11px; font-weight: 850; text-align: left; }
.settings-route-actions button + button { border-top: 1px solid rgba(232,210,163,.075); }
.settings-route-actions button span { color: var(--teal-bright); font-size: 16px; transition: transform .16s ease; }
.settings-route-actions button:hover { color: #fff; }
.settings-route-actions button:hover span { transform: translateX(4px); }

.settings-clip-card { margin-top: 8px; border-color: rgba(216,177,104,.24); background: radial-gradient(circle at 98% 0,rgba(216,177,104,.105),transparent 34%),linear-gradient(145deg,rgba(28,35,27,.98),rgba(8,24,21,.97) 68%); }
.settings-clip-head { display: grid; grid-template-columns: 58px minmax(0,1fr) auto; align-items: center; gap: 18px; }
.settings-clip-icon { width: 58px; height: 58px; display: grid; place-items: center; border: 1px solid rgba(216,177,104,.3); border-radius: 17px; background: rgba(216,177,104,.09); color: var(--gold-soft); font-size: 26px; }
.settings-clip-head h2 { margin: 0; color: #fff5df; font: 700 clamp(24px,2.7vw,34px)/1.06 Georgia,serif; }
.settings-clip-head p:not(.eyebrow) { max-width: 760px; margin: 9px 0 0; color: var(--muted); font-size: 13px; }
.settings-clip-head .simple-setting-badge { align-self: start; display: flex; align-items: center; gap: 7px; }
.settings-clip-head .simple-setting-badge i { width: 6px; height: 6px; border-radius: 50%; background: var(--teal-bright); box-shadow: 0 0 0 4px rgba(28,200,186,.08); }
.settings-home .clip-capacity-form { margin-top: 27px; grid-template-columns: repeat(3,minmax(0,1fr)) minmax(190px,auto); gap: 10px; }
.settings-home .clip-capacity-form label { min-height: 92px; padding: 15px; grid-template-columns: 42px minmax(0,1fr) 66px; grid-template-rows: 1fr; gap: 12px; border-color: rgba(232,210,163,.14); border-radius: 16px; background: rgba(4,17,15,.48); }
.clip-capacity-symbol { width: 42px; height: 42px; display: grid; place-items: center; border: 1px solid rgba(216,177,104,.26); border-radius: 12px; background: rgba(216,177,104,.08); color: var(--gold-soft); font-size: 10px; font-weight: 950; letter-spacing: .06em; }
.clip-capacity-copy { min-width: 0; display: grid; gap: 3px; }
.clip-capacity-copy strong { overflow: hidden; color: var(--cream); font-size: 13px; text-overflow: ellipsis; }
.clip-capacity-copy small { color: var(--muted); font-size: 9px; line-height: 1.25; }
.settings-home .clip-capacity-form label input { grid-row: auto; grid-column: auto; width: 66px; height: 52px; padding: 0 6px; border-color: rgba(28,200,186,.25); border-radius: 12px; background: rgba(28,200,186,.075); color: #fff; font-size: 21px; }
.settings-home .clip-capacity-form > button { min-height: 92px; padding: 0 22px; display: flex; align-items: center; justify-content: center; gap: 9px; border-radius: 16px; font-size: 12px; }
.settings-home .clip-capacity-form > button span { font-size: 15px; }

.settings-help { margin-top: 0; overflow: hidden; border-radius: 18px; background: rgba(8,22,19,.82); }
.settings-help summary { padding: 18px 20px; display: grid; grid-template-columns: 38px minmax(0,1fr) auto; align-items: center; gap: 13px; list-style: none; }
.settings-help summary::-webkit-details-marker { display: none; }
.settings-help summary > span { width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid var(--line-strong); border-radius: 50%; color: var(--gold-soft); }
.settings-help summary > div { display: grid; gap: 3px; }
.settings-help summary strong { color: var(--cream); font-size: 12px; }
.settings-help summary small { color: var(--muted); font-size: 10px; font-weight: 500; }
.settings-help summary > b { color: var(--muted); font-size: 17px; transition: transform .18s ease; }
.settings-help[open] summary > b { transform: rotate(180deg); }
.settings-help > div { padding: 0 24px 22px 71px; }

@media (max-width: 1080px) {
  .settings-hero { grid-template-columns: 1fr; }
  .settings-hero-status { width: min(100%, 520px); }
  .settings-home .clip-capacity-form { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .settings-home .clip-capacity-form > button { min-height: 52px; grid-column: 1 / -1; }
  .settings-home .clip-capacity-form label { grid-template-columns: 38px minmax(0,1fr) 58px; }
  .settings-home .clip-capacity-form label input { width: 58px; }
}

@media (max-width: 760px) {
  .settings-home { gap: 16px; }
  .settings-hero { min-height: 0; padding: 28px 22px; grid-template-columns: 1fr; gap: 26px; border-radius: 22px; }
  .settings-hero h1 { font-size: clamp(42px, 12vw, 61px); }
  .settings-hero-copy > p:not(.eyebrow) { font-size: 14px; }
  .settings-hero-actions { display: grid; }
  .settings-hero-actions .primary-button, .settings-hero-actions .secondary-button { width: 100%; justify-content: center; }
  .settings-install-hint { font-size: 10px; }
  .settings-hero-status { width: 100%; padding: 18px; grid-template-columns: 86px minmax(0,1fr); gap: 16px; }
  .settings-progress-ring { width: 86px; height: 86px; }
  .settings-progress-ring::after { inset: 7px; }
  .settings-progress-ring strong { font-size: 27px; }
  .settings-hero-status > div > strong { font-size: 17px; }
  .settings-hero-mark { width: 240px; height: 240px; }
  .settings-checklist, .settings-clip-card { padding: 22px 17px; border-radius: 20px; }
  .settings-section-title { align-items: flex-start; flex-direction: column; }
  .settings-home .setup-step-grid, .settings-home .settings-route-grid { grid-template-columns: 1fr; }
  .settings-home .setup-step { min-height: 220px; }
  .settings-route-title { padding: 12px 3px 0; }
  .settings-route-card { min-height: 350px; }
  .settings-clip-head { grid-template-columns: 48px minmax(0,1fr); align-items: start; gap: 13px; }
  .settings-clip-icon { width: 48px; height: 48px; border-radius: 14px; font-size: 22px; }
  .settings-clip-head .simple-setting-badge { grid-column: 1 / -1; justify-self: start; }
  .settings-home .clip-capacity-form { grid-template-columns: 1fr; }
  .settings-home .clip-capacity-form label { min-height: 82px; grid-template-columns: 42px minmax(0,1fr) 66px; }
  .settings-home .clip-capacity-form label input { width: 66px; }
  .settings-home .clip-capacity-form > button { grid-column: auto; min-height: 56px; }
  .settings-help summary { padding: 15px; grid-template-columns: 34px minmax(0,1fr) auto; }
  .settings-help summary > span { width: 34px; height: 34px; }
  .settings-help > div { padding: 0 18px 18px; }
}

@media (max-width: 390px) {
  .settings-hero-status { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .settings-live-label { justify-content: center; }
  .settings-section-title h2 { font-size: 28px; }
  .settings-route-card h2 { font-size: 29px; }
  .settings-help summary small { display: none; }
}

/* Gefuehrte, grosszuegige Discord-Zuordnungsseite */
.id-config-home { display: grid; gap: 20px; }
.id-config-hero { position: relative; min-height: 470px; padding: clamp(30px, 4.5vw, 58px); display: grid; grid-template-columns: minmax(0,1.08fr) minmax(390px,.92fr); grid-template-rows: auto auto; align-items: center; gap: 18px clamp(30px,5vw,70px); overflow: hidden; border: 1px solid rgba(88,101,242,.32); border-radius: 30px; background: radial-gradient(circle at 90% 8%,rgba(88,101,242,.22),transparent 34%),radial-gradient(circle at 15% 110%,rgba(28,200,186,.13),transparent 40%),linear-gradient(135deg,rgba(12,35,31,.99),rgba(7,19,18,.99) 70%); box-shadow: 0 30px 80px rgba(0,0,0,.3), inset 0 1px rgba(255,255,255,.04); }
.id-config-hero::before { content:"#"; position:absolute; left:-24px; bottom:-170px; color:rgba(88,101,242,.045); font:900 480px/1 Inter,sans-serif; pointer-events:none; }
.id-config-intro { position: relative; z-index: 1; grid-row: 1 / 3; }
.id-config-intro .eyebrow { display:flex; align-items:center; gap:9px; }
.id-config-intro .eyebrow span { width:7px; height:7px; border-radius:50%; background:#7783ff; box-shadow:0 0 0 6px rgba(88,101,242,.12); }
.id-config-intro h1 { margin:0; color:#fff6e2; font:700 clamp(43px,5vw,70px)/.92 Georgia,serif; letter-spacing:-.055em; }
.id-config-intro h1 em { color:#aeb5ff; font-weight:700; }
.id-config-intro > p:not(.eyebrow) { max-width:650px; margin:22px 0 0; color:#b2c0b9; font-size:15px; line-height:1.7; }
.id-active-server,.id-config-score { position:relative; z-index:1; min-width:0; padding:20px; border:1px solid rgba(255,255,255,.105); border-radius:21px; background:rgba(5,17,16,.68); box-shadow:0 18px 42px rgba(0,0,0,.2); backdrop-filter:blur(14px); }
.id-active-server-head { display:grid; grid-template-columns:54px minmax(0,1fr) auto; align-items:center; gap:13px; }
.id-active-server-head img { width:54px; height:54px; border:1px solid rgba(255,255,255,.12); border-radius:16px; object-fit:cover; background:var(--panel); }
.id-active-server-head div { min-width:0; display:grid; gap:3px; }
.id-active-server-head small,.id-config-score > div > small { color:#959efa; font-size:9px; font-weight:900; letter-spacing:.15em; text-transform:uppercase; }
.id-active-server-head h2 { margin:0; overflow:hidden; color:var(--cream); font:700 22px/1.1 Georgia,serif; text-overflow:ellipsis; white-space:nowrap; }
.id-active-server-head span { color:var(--muted); font-size:10px; }
.id-active-server-head > b { padding:7px 9px; display:flex; align-items:center; gap:6px; border:1px solid rgba(78,208,155,.25); border-radius:999px; background:rgba(78,208,155,.08); color:var(--success); font-size:8px; letter-spacing:.08em; text-transform:uppercase; white-space:nowrap; }
.id-active-server-head > b i { width:6px; height:6px; border-radius:50%; background:currentColor; box-shadow:0 0 0 4px rgba(78,208,155,.08); }
.id-active-server-head > b.mode-view { border-color:rgba(216,177,104,.28); color:var(--gold-soft); background:rgba(216,177,104,.08); }
.id-active-server .id-server-select { margin-top:17px; display:grid; grid-template-columns:1fr; gap:7px; }
.id-active-server .id-server-select > span { color:#c9d3ce; font-size:10px; font-weight:800; }
.id-active-server .id-server-select select { width:100%; min-height:48px; border-color:rgba(88,101,242,.32); border-radius:12px; background:rgba(13,24,23,.9); font-size:11px; }
.id-active-server .id-server-select small { color:#7f8d87; font-size:9px; line-height:1.4; }
.id-config-score { display:grid; grid-template-columns:82px minmax(0,1fr); align-items:center; gap:17px; }
.id-score-ring { position:relative; width:82px; height:82px; display:grid; place-items:center; border-radius:50%; background:conic-gradient(#7783ff 0 var(--id-progress),rgba(255,255,255,.07) var(--id-progress) 360deg); }
.id-score-ring::after { content:""; position:absolute; inset:7px; border-radius:50%; background:#0a1b18; }
.id-score-ring > span { position:relative; z-index:1; display:flex; align-items:baseline; }
.id-score-ring strong { color:#fff; font:800 25px/1 Georgia,serif; }
.id-score-ring small { margin-left:1px; color:#959efa; font-size:10px; font-weight:900; }
.id-config-score > div { min-width:0; display:grid; gap:4px; }
.id-config-score > div > strong { color:var(--cream); font:700 17px/1.15 Georgia,serif; }
.id-config-score p { margin:2px 0 0; color:var(--muted); font-size:10px; }
.id-config-workbench { padding:clamp(24px,3.5vw,40px); border:1px solid var(--line); border-radius:26px; background:linear-gradient(145deg,rgba(14,32,29,.98),rgba(8,23,20,.98)); box-shadow:0 22px 55px rgba(0,0,0,.18); }
.id-workbench-head { display:flex; align-items:end; justify-content:space-between; gap:20px; }
.id-workbench-head h2 { margin:0; color:#fff5df; font:700 clamp(28px,3vw,39px)/1 Georgia,serif; letter-spacing:-.025em; }
.id-workbench-head p:not(.eyebrow) { margin:10px 0 0; color:var(--muted); font-size:13px; }
.id-open-total { padding:9px 13px; border:1px solid rgba(216,177,104,.3); border-radius:999px; background:rgba(216,177,104,.08); color:var(--gold-soft); font-size:10px; font-weight:900; letter-spacing:.08em; text-transform:uppercase; white-space:nowrap; }
.id-open-total.complete { border-color:rgba(78,208,155,.3); color:var(--success); background:rgba(78,208,155,.08); }
.id-config-home .id-setup-progress { margin:24px 0 18px; grid-template-columns:190px 190px minmax(0,1fr); gap:10px; }
.id-config-home .id-setup-progress > article,.id-config-home .id-progress-bar { min-height:76px; padding:14px 16px; border-radius:15px; background:rgba(5,18,16,.5); }
.id-config-home .id-setup-progress article { grid-template-columns:36px minmax(0,1fr); align-items:center; gap:10px; }
.id-config-home .id-setup-progress article > span { grid-row:auto; width:36px; height:36px; display:grid; place-items:center; border-radius:11px; background:rgba(28,200,186,.09); color:var(--teal-bright); font:900 15px/1 Inter,sans-serif; }
.id-config-home .id-setup-progress article.needs-work > span { background:rgba(216,177,104,.10); color:var(--gold-soft); }
.id-config-home .id-setup-progress article > div { min-width:0; display:grid; gap:2px; }
.id-config-home .id-setup-progress article strong { font-size:12px; }
.id-config-home .id-setup-progress article small { font-size:9px; }
.id-config-home .id-progress-bar { position:relative; min-width:0; align-content:center; overflow:hidden; }
.id-config-home .id-progress-bar::before { content:""; position:absolute; left:16px; right:16px; top:26px; height:8px; border-radius:999px; background:rgba(255,255,255,.065); }
.id-config-home .id-progress-bar i { position:absolute; z-index:1; left:16px; top:26px; max-width:calc(100% - 32px); height:8px; border-radius:999px; background:linear-gradient(90deg,#5865f2,#8f98ff,var(--teal-bright)); box-shadow:0 0 18px rgba(88,101,242,.25); }
.id-config-home .id-progress-bar span { margin-top:25px; color:#aeb5ff; font-size:9px; font-weight:900; }
.id-config-home .discord-config-workspace { min-width:0; }
.id-config-home .discord-config-toolbar { position:sticky; top:98px; z-index:10; margin:0 0 12px; padding:12px; border-color:rgba(88,101,242,.24); border-radius:16px; background:rgba(18,27,26,.94); }
.id-config-home .id-section-tabs { display:flex; flex-wrap:wrap; gap:5px; }
.id-config-home .id-section-tabs button { min-height:38px; padding:0 12px; border:1px solid transparent; border-radius:10px; background:transparent; color:#aeb9b3; font-size:10px; font-weight:850; }
.id-config-home .id-section-tabs button:hover { background:rgba(255,255,255,.035); color:var(--cream); }
.id-config-home .id-section-tabs button.active { border-color:rgba(88,101,242,.35); background:#5865f2; color:#fff; box-shadow:0 8px 20px rgba(88,101,242,.2); }
.id-config-home .id-section-tabs button span { margin-left:5px; padding:2px 5px; border-radius:999px; background:rgba(255,255,255,.11); font-size:8px; }
.id-config-home .discord-config-toolbar .missing-filter { min-height:38px; display:flex; align-items:center; gap:7px; border-radius:10px; }
.id-config-home .discord-config-search { width:min(310px,100%); min-height:40px; border-radius:10px; background:rgba(5,15,14,.65); }
.id-config-home .discord-config-search input { font-size:10px; }
.id-config-home .compact-config-hint { min-height:58px; margin-bottom:13px; padding:10px 16px; display:flex; align-items:center; justify-content:center; gap:18px; border:1px solid rgba(28,200,186,.16); border-radius:14px; background:rgba(28,200,186,.045); }
.id-config-home .compact-config-hint > div { display:flex; align-items:center; gap:8px; }
.id-config-home .compact-config-hint span { width:25px; height:25px; display:grid; place-items:center; border-radius:50%; background:rgba(28,200,186,.12); color:var(--teal-bright); font-size:9px; font-weight:900; }
.id-config-home .compact-config-hint strong { color:#cbd6d0; font-size:9px; }
.id-config-home .compact-config-hint > i { color:#52625b; font-style:normal; }
.id-config-home .discord-settings-groups { display:grid; gap:11px; }
.id-config-home .discord-settings-group { overflow:hidden; border:1px solid rgba(232,210,163,.15); border-radius:18px; background:rgba(12,27,24,.92); box-shadow:0 12px 30px rgba(0,0,0,.11); }
.id-config-home .discord-settings-group.has-open-items { border-color:rgba(216,177,104,.25); }
.id-config-home .compact-config-group .compact-group-heading { min-height:96px; padding:18px 20px; }
.id-config-home .compact-group-heading > div:first-child { min-width:0; display:flex; align-items:center; gap:14px; }
.id-config-home .discord-group-symbol { width:48px; height:48px; flex:0 0 48px; display:grid; place-items:center; border:1px solid rgba(88,101,242,.3); border-radius:14px; background:rgba(88,101,242,.1); color:#aeb5ff; font-size:19px; font-weight:900; }
.id-config-home .compact-group-heading > div > div { min-width:0; }
.id-config-home .compact-group-heading small { color:#7e8883; font-size:8px; font-weight:850; letter-spacing:.09em; text-transform:uppercase; }
.id-config-home .discord-settings-group .settings-group-heading h2 { margin:3px 0; color:#fff5df; font:700 21px/1.1 Georgia,serif; }
.id-config-home .compact-group-heading p { color:var(--muted); font-size:9px; }
.discord-group-result { margin-left:auto; display:flex; align-items:center; gap:9px; }
.discord-group-result strong { color:var(--gold-soft); font-size:9px; white-space:nowrap; }
.is-complete .discord-group-result strong { color:var(--success); }
.id-config-home .group-progress-ring { width:34px; height:34px; display:grid; place-items:center; border:1px solid rgba(216,177,104,.32); border-radius:50%; color:var(--gold-soft); background:rgba(216,177,104,.08); font-size:10px; font-weight:900; }
.id-config-home .group-progress-ring.complete { border-color:rgba(78,208,155,.28); background:rgba(78,208,155,.08); color:var(--success); }
.id-config-home .compact-config-group .compact-group-heading::after { font-size:16px; }
.id-config-home .compact-config-group .discord-setting-grid { padding:11px; gap:8px; background:rgba(5,16,14,.48); }
.id-config-home .compact-setting-card { border:1px solid rgba(232,210,163,.12); border-radius:14px; background:rgba(17,35,31,.88); }
.id-config-home .compact-setting-card.is-missing { border-color:rgba(216,177,104,.27); background:linear-gradient(90deg,rgba(50,39,20,.38),rgba(15,33,29,.92) 54%); }
.id-config-home .compact-setting-summary { min-height:92px; padding:15px 16px; grid-template-columns:minmax(280px,1.25fr) minmax(180px,.8fr) auto; gap:18px; }
.id-config-home .compact-setting-summary:hover { background:rgba(255,255,255,.025); }
.id-config-home .discord-setting-title { min-width:0; display:flex; align-items:center; gap:13px; }
.id-config-home .discord-setting-title > span { width:38px; height:38px; flex:0 0 38px; display:grid; place-items:center; border:1px solid rgba(216,177,104,.25); border-radius:11px; background:rgba(216,177,104,.08); color:var(--gold-soft); font-weight:900; }
.id-config-home .is-configured .discord-setting-title > span { border-color:rgba(28,200,186,.25); background:rgba(28,200,186,.08); color:var(--teal-bright); }
.id-config-home .discord-setting-title > div { min-width:0; display:grid; gap:2px; }
.id-config-home .discord-setting-title small,.discord-current-block > small { color:var(--gold-soft); font-size:8px; font-weight:900; letter-spacing:.1em; text-transform:uppercase; }
.id-config-home .is-configured .discord-setting-title small { color:var(--teal-bright); }
.id-config-home .discord-setting-title strong { color:var(--cream); font-size:13px; }
.id-config-home .discord-setting-title p { margin:1px 0 0; overflow:hidden; color:var(--muted); font-size:9px; line-height:1.35; text-overflow:ellipsis; white-space:nowrap; }
.discord-current-block { min-width:0; display:grid; gap:6px; }
.id-config-home .discord-current-assignment { min-height:24px; }
.id-config-home .discord-assignment-chip { padding:5px 8px; border-radius:8px; background:rgba(88,101,242,.1); color:#c8ccff; font-size:9px; }
.id-config-home .discord-assignment-empty { color:#a9936c; font-size:9px; }
.id-config-home .compact-setting-summary > em { min-height:34px; padding:0 10px; display:flex; align-items:center; gap:8px; border:1px solid rgba(255,255,255,.1); border-radius:9px; background:rgba(255,255,255,.025); color:#cbd4cf; }
.id-config-home .compact-setting-summary > em b { color:#87958e; transition:transform .15s ease; }
.id-config-home .compact-setting-card[open] .compact-setting-summary > em b { transform:rotate(180deg); }
.id-config-home .compact-setting-card[open] .compact-setting-summary { border-bottom:1px solid rgba(232,210,163,.12); background:rgba(255,255,255,.02); }
.id-config-home .compact-setting-card .discord-setting-form { padding:18px; grid-template-columns:minmax(0,1fr) auto; gap:12px; background:rgba(4,15,13,.58); }
.id-config-home .discord-setting-form select { min-height:50px; border-color:rgba(88,101,242,.28); border-radius:11px; background:#101b19; }
.id-config-home .discord-setting-form button { min-height:50px; padding:0 20px; border-radius:11px; }
.id-config-home .discord-structure-inspector { margin-top:0; overflow:hidden; border:1px solid var(--line); border-radius:17px; background:rgba(8,22,19,.78); }
.id-config-home .discord-structure-inspector > summary { padding:17px 19px; display:grid; grid-template-columns:38px minmax(0,1fr) auto; align-items:center; gap:12px; list-style:none; cursor:pointer; }
.id-config-home .discord-structure-inspector > summary::-webkit-details-marker { display:none; }
.id-config-home .discord-structure-inspector > summary > span { width:38px; height:38px; display:grid; place-items:center; border:1px solid rgba(88,101,242,.27); border-radius:11px; color:#aeb5ff; background:rgba(88,101,242,.07); }
.id-config-home .discord-structure-inspector > summary > div { display:grid; gap:2px; }
.id-config-home .discord-structure-inspector > summary strong { color:var(--cream); font-size:11px; }
.id-config-home .discord-structure-inspector > summary small { color:var(--muted); font-size:9px; }
.id-config-home .discord-structure-inspector > summary > b { color:var(--muted); transition:transform .15s ease; }
.id-config-home .discord-structure-inspector[open] > summary > b { transform:rotate(180deg); }

@media (max-width: 1020px) {
  .id-config-hero { grid-template-columns:1fr; grid-template-rows:auto; }
  .id-config-intro { grid-row:auto; }
  .id-active-server,.id-config-score { width:min(100%,660px); }
  .id-config-home .id-setup-progress { grid-template-columns:1fr 1fr; }
  .id-config-home .id-progress-bar { grid-column:1 / -1; }
  .id-config-home .discord-config-toolbar { align-items:stretch; flex-wrap:wrap; }
  .id-config-home .discord-config-search { width:100%; order:3; }
}
@media (max-width: 720px) {
  .id-config-home { gap:15px; }
  .id-config-hero { min-height:0; padding:28px 20px; gap:20px; border-radius:22px; }
  .id-config-intro h1 { font-size:clamp(42px,12vw,60px); }
  .id-config-intro > p:not(.eyebrow) { font-size:13px; }
  .id-active-server,.id-config-score { width:100%; }
  .id-active-server-head { grid-template-columns:48px minmax(0,1fr); }
  .id-active-server-head img { width:48px; height:48px; }
  .id-active-server-head > b { grid-column:1 / -1; justify-self:start; }
  .id-config-workbench { padding:22px 14px; border-radius:20px; }
  .id-workbench-head { align-items:flex-start; flex-direction:column; }
  .id-config-home .id-setup-progress { grid-template-columns:1fr; }
  .id-config-home .id-progress-bar { grid-column:auto; }
  .id-config-home .discord-config-toolbar { position:static; }
  .id-config-home .id-section-tabs { display:grid; grid-template-columns:1fr 1fr; }
  .id-config-home .id-section-tabs button { width:100%; }
  .id-config-home .discord-config-toolbar .missing-filter { justify-content:center; }
  .id-config-home .compact-config-hint { justify-content:flex-start; gap:8px; overflow-x:auto; }
  .id-config-home .compact-config-hint > div { flex:0 0 auto; }
  .id-config-home .compact-config-group .compact-group-heading { min-height:84px; padding:14px; }
  .id-config-home .discord-group-symbol { width:42px; height:42px; flex-basis:42px; }
  .discord-group-result strong { display:none; }
  .id-config-home .compact-setting-summary { min-height:0; padding:14px; grid-template-columns:1fr auto; }
  .id-config-home .discord-current-block { grid-column:1 / -1; padding:10px 0 2px 51px; border-top:1px solid rgba(232,210,163,.09); }
  .id-config-home .discord-setting-title p { white-space:normal; }
  .id-config-home .compact-setting-summary > em span { display:none; }
  .id-config-home .compact-setting-card .discord-setting-form { grid-template-columns:1fr; }
  .id-config-home .discord-setting-form button { width:100%; }
}
@media (max-width: 400px) {
  .id-config-score { grid-template-columns:70px minmax(0,1fr); padding:15px; }
  .id-score-ring { width:70px; height:70px; }
  .id-config-home .id-section-tabs { grid-template-columns:1fr; }
  .id-config-home .compact-config-hint > i { display:none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; }
}