/* Streamwidget – RTIRL Overlay Generator. Farben/Abstände wie index.php */
:root{
  --bg: #0F1113;
  --panel: #1D2025;
  --panel-2: #23262C;
  --border: #2C3038;
  --text: #EDEEF0;
  --muted: #868C97;
  --amber: #E8B93F;
  --teal: #43D9C0;
  --green: #6BCB77;
  --red: #E8615D;
  --purple: #B18CF2;
  color-scheme: dark;
}
*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; background:var(--bg); color:var(--text); font-family:'Manrope',system-ui,sans-serif; }
.mono{ font-family:'JetBrains Mono', ui-monospace, monospace; }
a{ color:inherit; }
[hidden]{ display:none !important; }

/* ---------- Hero (wie Startseite, kompakter) ---------- */
#hero{
  position:relative; overflow:hidden;
  padding: 44px 20px 52px;
  text-align:center;
  background:
    radial-gradient(700px 340px at 18% -10%, rgba(67,217,192,0.20), transparent 60%),
    radial-gradient(600px 320px at 85% 0%, rgba(232,185,63,0.16), transparent 60%),
    linear-gradient(180deg, #14161A 0%, #0F1113 100%);
  border-bottom:1px solid var(--border);
}
#hero::before{
  content:""; position:absolute; inset:0;
  background-image: radial-gradient(rgba(255,255,255,0.045) 1px, transparent 1px);
  background-size: 26px 26px;
  -webkit-mask-image: radial-gradient(ellipse at 50% 0%, black 40%, transparent 78%);
  mask-image: radial-gradient(ellipse at 50% 0%, black 40%, transparent 78%);
  pointer-events:none;
}
.hero-inner{ position:relative; max-width:820px; margin:0 auto; }
.hero-top{ position:relative; max-width:1000px; margin:0 auto 22px; text-align:left; }
a.back{ color:var(--muted); text-decoration:none; font-size:13px; display:inline-block; }
a.back:hover{ color:var(--text); }
.badge-row{ display:flex; gap:10px; justify-content:center; margin-bottom:20px; flex-wrap:wrap; }
.plat-chip{
  display:flex; align-items:center; gap:7px;
  font-size:12.5px; font-weight:700; letter-spacing:0.2px;
  padding:6px 14px; border-radius:20px;
  border:1px solid var(--border); background:rgba(255,255,255,0.03);
}
.plat-chip .dot{ width:8px; height:8px; border-radius:50%; }
.plat-chip.twitch .dot{ background:var(--purple); }
.plat-chip.kick .dot{ background:var(--green); }
#hero h1{
  font-size: clamp(32px, 5.5vw, 48px); font-weight:800; letter-spacing:-0.5px;
  margin: 0 0 12px;
  background: linear-gradient(90deg, #E8B93F, #43D9C0 70%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
#hero p.lead{ font-size:16px; color:var(--muted); max-width:580px; margin:0 auto; line-height:1.6; }

/* ---------- Grundgerüst ---------- */
#app{ max-width:1040px; margin:0 auto; padding:40px 20px 20px; display:flex; flex-direction:column; gap:22px; }

.card{
  background: var(--panel);
  border:1px solid var(--border);
  border-radius:18px;
  padding:24px;
  position:relative; overflow:hidden; min-width:0;
}
.card::before{
  content:""; position:absolute; top:0; left:0; right:0; height:3px;
  background: linear-gradient(90deg, var(--amber), var(--teal));
}
.card h2{ font-size:18px; font-weight:700; margin:0 0 16px; }
.card .num{ font-weight:700; font-size:13px; color:var(--teal); margin-bottom:6px; }
.card-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:16px; }
.card-head h2{ margin:0; }
.pill{ font-size:11.5px; color:var(--muted); border:1px solid var(--border); border-radius:20px; padding:3px 10px; }

.manage-bar{
  display:flex; flex-wrap:wrap; gap:8px 16px; align-items:center; justify-content:space-between;
  padding:14px 18px; border-radius:14px; font-size:14px;
  background:rgba(67,217,192,0.08); border:1px solid rgba(67,217,192,0.35);
}
.link-btn{ background:none; border:0; padding:4px 0; color:var(--teal); font:inherit; font-weight:700; cursor:pointer; }

.form-grid{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:22px; }
@media (max-width:760px){ .form-grid{ grid-template-columns:1fr; } }
.form-actions{ grid-column:1 / -1; display:flex; flex-wrap:wrap; align-items:center; gap:12px; }

/* ---------- Formularelemente ---------- */
.field-label{ display:block; margin:0 0 8px; font-weight:700; font-size:13px; }
.hint{ margin:8px 0 0; font-size:12.5px; color:var(--muted); line-height:1.6; }
fieldset{ border:0; margin:0 0 18px; padding:0; min-width:0; }

input[type="text"], input[type="password"], input[type="number"], input:not([type]), select{
  width:100%; height:44px; padding:0 12px; border-radius:10px;
  border:1px solid var(--border); background:var(--panel-2); color:var(--text);
  font:inherit; font-size:14px;
}
input::placeholder{ color:#5B6068; }
input:focus-visible, select:focus-visible, button:focus-visible, a:focus-visible,
.seg input:focus-visible + span, .check input:focus-visible + span{ outline:2px solid var(--teal); outline-offset:2px; }

.secret{ position:relative; }
.secret input{ padding-right:48px; letter-spacing:.02em; }
.secret-toggle{
  position:absolute; top:4px; right:4px; width:36px; height:36px; border:0; border-radius:8px;
  background:transparent; color:var(--muted); cursor:pointer; display:grid; place-items:center;
}
.secret-toggle:hover{ color:var(--text); background:var(--border); }
.secret-toggle svg{ width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:2; }
.secret-toggle[aria-pressed="true"]{ color:var(--teal); }

.security{ margin-top:16px; border-top:1px solid var(--border); padding-top:14px; }
.security summary{ cursor:pointer; font-size:13px; font-weight:700; }
.feature-list{ list-style:none; padding:0; margin:12px 0 0; display:flex; flex-direction:column; gap:7px; }
.feature-list li{ font-size:12.5px; color:#B7BCC4; display:flex; align-items:flex-start; gap:8px; line-height:1.55; }
.feature-list li::before{ content:"✓"; color:var(--teal); font-weight:700; flex:none; }

.seg{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.seg legend{ grid-column:1 / -1; }
.seg label{ position:relative; cursor:pointer; }
.seg input{ position:absolute; opacity:0; }
.seg span{
  display:flex; flex-direction:column; justify-content:center; gap:2px; min-height:54px; padding:8px 14px;
  border:1px solid var(--border); border-radius:10px; background:var(--panel-2); font-weight:700; font-size:14px;
  transition:border-color .15s ease, background .15s ease;
}
.seg small{ font-weight:500; color:var(--muted); font-size:12px; }
.labels-choice{ margin:22px 0 0; }
.seg label:hover span{ border-color:#454A54; }
.seg input:checked + span{ border-color:var(--teal); background:rgba(67,217,192,0.08); }

.range{ display:flex; align-items:center; gap:12px; }
.range input[type="range"]{ flex:1; accent-color:var(--teal); }
.range-num{ display:flex; align-items:center; gap:6px; color:var(--muted); }
.range-num input{ width:78px; text-align:right; }

.checks{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
@media (max-width:420px){ .checks{ grid-template-columns:1fr; } }
.check{ position:relative; cursor:pointer; }
.check input{ position:absolute; opacity:0; }
.check span{
  display:flex; align-items:center; gap:10px; min-height:48px; padding:8px 12px;
  border:1px solid var(--border); border-radius:10px; background:var(--panel-2); font-weight:600; font-size:13.5px;
  transition:border-color .15s ease, background .15s ease;
}
.check span::before{
  content:""; flex:none; width:18px; height:18px; border-radius:5px; border:2px solid #5B6068;
  background:center / 12px no-repeat;
}
.check small{ color:var(--muted); font-size:11.5px; font-weight:500; margin-left:auto; }
.check:hover span{ border-color:#454A54; }
.check input:checked + span{ border-color:rgba(67,217,192,0.5); background:rgba(67,217,192,0.06); }
.check input:checked + span::before{
  border-color:var(--teal); background-color:var(--teal);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 6.5 5 9l5-6' fill='none' stroke='%230B1210' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.switch{ display:flex; align-items:center; gap:12px; cursor:pointer; margin-bottom:18px; font-weight:600; font-size:14px; }
.switch input{ position:absolute; opacity:0; }
.switch-ui{ flex:none; position:relative; width:44px; height:26px; border-radius:13px; background:var(--border); transition:background .15s; }
.switch-ui::after{ content:""; position:absolute; top:3px; left:3px; width:20px; height:20px; border-radius:50%; background:#fff; transition:transform .15s; }
.switch input:checked + .switch-ui{ background:var(--teal); }
.switch input:checked + .switch-ui::after{ transform:translateX(18px); }
.switch input:focus-visible + .switch-ui{ outline:2px solid var(--teal); outline-offset:2px; }

.reset-now{ margin-top:18px; padding-top:16px; border-top:1px solid var(--border); }
.reset-now p{ margin:0 0 12px; font-size:14px; }

/* ---------- Buttons (wie Startseite) ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:13px 22px; border-radius:10px;
  font:inherit; font-weight:700; font-size:14.5px; text-decoration:none; cursor:pointer;
  border:1px solid var(--border);
  transition: transform .15s ease, border-color .15s ease, background .15s ease;
}
.btn:hover:not(:disabled){ transform: translateY(-1px); }
.btn:disabled{ opacity:.6; cursor:progress; transform:none; }
.btn.primary{ background:var(--teal); color:#0B1210; border-color:var(--teal); }
.btn.primary:hover:not(:disabled){ background:#59e2cb; }
.btn.ghost{ background:rgba(255,255,255,0.03); color:var(--text); }
.btn.ghost:hover{ border-color:#454A54; background:#282B32; }
.btn.danger{ background:transparent; color:var(--red); border-color:rgba(232,97,93,0.45); }
.btn.danger:hover{ background:rgba(232,97,93,0.08); }
.btn.small{ padding:0 16px; height:44px; font-size:13.5px; }

.status{ margin:0; flex:1 1 100%; min-height:1.5em; font-size:14px; font-weight:700; }
.status--ok{ color:var(--green); }
.status--error{ color:var(--red); }

/* ---------- Vorschau ---------- */
.stage{
  position:relative; overflow-x:auto; border-radius:12px; padding:34px 22px;
  min-height:150px; display:flex; align-items:flex-end;
  border:1px solid var(--border);
  background:
    linear-gradient(180deg, rgba(0,0,0,0) 50%, rgba(0,0,0,.4)),
    linear-gradient(160deg, #31506a 0%, #6f8494 38%, #a99273 64%, #4f4134 100%);
}
.stage--v{ min-height:430px; align-items:flex-start; }
.stage-widget{ flex:none; }

/* ---------- Ergebnis ---------- */
.result h2{ color:var(--green); }
.copy{ display:flex; gap:8px; }
.copy input{ flex:1; min-width:0; font-size:12.5px; }
#editBlock{ margin-top:20px; padding-top:18px; border-top:1px solid var(--border); }
.warn{
  margin:12px 0 0; font-size:12.5px; line-height:1.6; color:#F0D48A;
  background:rgba(232,185,63,0.08); border-left:3px solid var(--amber);
  padding:10px 14px; border-radius:0 10px 10px 0;
}

/* ---------- Footer (wie Startseite) ---------- */
footer{ margin-top:70px; border-top:1px solid var(--border); padding:30px 20px 40px; text-align:center; }
footer .foot-nav{ display:flex; gap:22px; justify-content:center; flex-wrap:wrap; font-size:12.5px; margin-bottom:14px; }
footer .foot-nav a{ color:var(--muted); text-decoration:none; }
footer .foot-nav a:hover{ color:var(--text); }
footer .copyright{ font-size:11.5px; color:#5B6068; }

/* ---------- Hinweis bei Einrichtungsproblemen ---------- */
.setup-banner{
  padding:14px 18px; border-radius:14px; font-size:14px; line-height:1.55;
  background:rgba(232,97,93,0.10); border:1px solid rgba(232,97,93,0.45); color:#F4C9BE;
}
.setup-banner ul{ margin:8px 0 0; padding-left:20px; }
.setup-banner li + li{ margin-top:4px; }

/* ---------- Farbwahl ---------- */
.colors{ display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:20px; }
@media (max-width:420px){ .colors{ grid-template-columns:1fr; } }
.color-row{ display:flex; align-items:center; gap:10px; }
.color-row input[type="color"]{
  width:52px; height:40px; padding:3px; border-radius:10px; cursor:pointer;
  border:1px solid var(--border); background:var(--panel-2);
}
.color-row input[type="color"]::-webkit-color-swatch-wrapper{ padding:0; }
.color-row input[type="color"]::-webkit-color-swatch{ border:0; border-radius:7px; }
.color-row input[type="color"]::-moz-color-swatch{ border:0; border-radius:7px; }
.color-hex{ font-size:13px; color:var(--muted); }
.swatches{ display:flex; flex-wrap:wrap; gap:6px; margin-top:10px; }
.swatches button{
  width:24px; height:24px; padding:0; border-radius:50%; cursor:pointer;
  border:2px solid var(--border); transition:transform .12s ease, border-color .12s ease;
}
.swatches button:hover{ transform:scale(1.1); }
.swatches button.is-active{ border-color:var(--text); box-shadow:0 0 0 2px var(--bg); }