* { box-sizing:border-box; }

:root{
  --bg:#0f131a;
  --panel:#151b24;
  --card:#161d27;
  --muted:#7d8b9f;
  --text:#e7eefc;
  --primary:#0073c5;
  --danger:#ff4d4f;
  --radius:16px;
  --shadow:0 10px 30px rgba(0, 37, 61, 0.315);
  --border:1px solid rgba(255, 255, 255, 0.059);
}

/* Grundlayout */

body {
  margin:0;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background:#0b0f16;
  color:#e8ecf1;
  font-size:14px;
  line-height:1.5;
}

/* Links */

.links{
  margin-top:18px;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.post.label{
  text-align:center;
}

/* Haupt-Navi-Kachel auf der Startseite */
.link-tile{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:10px 14px;
  border-radius:12px;
  background:#0f1622;
  border:1px solid rgba(255,255,255,0.06);
  color:#e7eefc;
  text-decoration:none;
  box-shadow:0 8px 20px rgba(0,0,0,.45);
  transition:
    transform .08s ease,
    box-shadow .12s ease,
    border-color .12s ease,
    background .12s ease;
}

/* wichtig: globale a:hover-Underline für diese Links killen */
.link-tile:hover{
  text-decoration:none;
  transform:translateY(-1px);
  background:#131c2b;
  border-color:rgba(88,160,255,.7);
  box-shadow:0 12px 28px rgba(0,0,0,.6);
}

.link-tile .title{
  display:block;
  font-weight:600;
  font-size:19px;
}

.link-tile .desc{
  display:block;
  margin-top:2px;
  font-size:12px;
  color:#7d8b9f;
}

/* der Pfeil rechts */
.link-tile span:last-child{
  font-size:18px;
  opacity:.6;
  transform:translateX(0);
  transition:opacity .12s ease, transform .12s ease;
}
.link-tile:hover span:last-child{
  opacity:1;
  transform:translateX(2px);
}

a {
  color:#8ab4ff;
  text-decoration:none;
}
a:hover {
  text-decoration:underline;
}

/* Page-Layout (zentriert) */

.page {
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:30px 15px;
}

/* Karten / Panels */

.cards{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  margin-top:18px;
  gap:16px;
}

.card{
  background:#0e1422;
  border:1px solid #22304a;
  border-radius:14px;
  padding:14px;
  margin-top:14px;
  box-shadow:var(--shadow);
}

/* Lockeres Layout nur für die Index-Card */
.index-card{
  max-width: 520px;
  width: 100%;
  padding: 26px 28px 24px;
}

/* Header oben nicht so gequetscht */
.index-card .header{
  margin-bottom: 18px;
  gap: 14px;
  align-items: flex-start;
}

.index-card .header h1{
  font-size: 24px;
}

.index-card .header small{
  display:block;
  margin-top: 3px;
  color: #8b93a1;
}

/* Login-Button sauber rechts, aber mit Luft */
.index-card .header > div:last-child{
  display:flex;
  align-items:center;
  justify-content:flex-end;
}

/* Text unter dem Header mit Abstand */
.index-card .note{
  margin-top: 8px;
}


.card-title{color:var(--muted);font-size:12px}
.card-value{font-size:24px;font-weight:700;margin-top:6px}

.panel{
  background:var(--panel);
  border:var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  margin-top:18px;
  margin-bottom:18px;
}
.panel-head{padding:14px 16px;border-bottom:var(--border)}
.panel-body{padding:16px}

/* Header + Buttons */

.header {
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:16px;
}
.header h1 {
  margin:0;
  font-size:22px;
}
.header small {
  color:#b9bbbe;
}

button {
  padding:8px 16px;
  border-radius:999px;
  border:none;
  background:#5865f2;
  color:#fff;
  cursor:pointer;
  font-weight:500;
}
button.secondary {
  background:transparent;
  border:1px solid #4f545c;
}
button:hover {
  opacity:.9;
}

button.logout {
  background:transparent;
  border:1px solid #ff0000;
  color:#965f5f;
}
button.back {
  background:transparent;
  border:1px solid #ff0000;
  color:#965f5f;
}

/* Kompakte Version vom Shine-Button – Größe wie button.back */
.btn-23-red,
.btn-23-orange {
  position: relative;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;

  /* kompakter als der große Senden-Button */
  width: auto;
  max-width: none;

  padding: 6px 16px;
  border-radius: 999px;

  letter-spacing: .14em;
  text-transform: uppercase;
  font-size: 13px;
  font-weight: 600;

  border: 1px solid;
  background: #0e141f;
  box-shadow:
    0 6px 18px rgba(0,0,0,.5),
    0 0 0 1px rgba(0,0,0,.7) inset;

  overflow: hidden;
  transition:
    transform .08s ease,
    box-shadow .12s ease,
    background .12s ease,
    border-color .12s ease,
    color .12s ease;
}

/* Rot */
.btn-23-red {
  border-color: #ff0019e6;
  color: #ff0019e6;
}
.btn-23-red::before {
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(
    120deg,
    transparent,
    rgba(255,80,98,.45),
    transparent
  );
  transform:translateX(-130%);
  pointer-events:none;
  transition:transform .55s ease-out;
}
.btn-23-red:hover::before {
  transform:translateX(130%);
}
.btn-23-red:hover {
  transform:translateY(-1px);
  background:#181320;
  border-color:rgb(255, 0, 0);
  box-shadow:
    0 10px 24px rgba(0,0,0,.7),
    0 0 0 1px rgba(255,110,130,.2) inset;
}
.btn-23-red:active {
  transform:translateY(0);
  background:#120d18;
  box-shadow:0 4px 14px rgba(0,0,0,.7);
}
.btn-23-red:focus {
  outline:none;
  box-shadow:
    0 0 0 1px rgba(255,110,130,.9),
    0 0 0 4px rgba(255,110,130,.2);
}

/* Orange */
.btn-23-orange {
  border-color: rgba(255, 224, 87, 0.9);
  color: #fff6a8;
}
.btn-23-orange::before {
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(
    120deg,
    transparent,
    rgba(255, 230, 87, 0.5),
    transparent
  );
  transform:translateX(-130%);
  pointer-events:none;
  transition:transform .55s ease-out;
}
.btn-23-orange:hover::before {
  transform:translateX(130%);
}
.btn-23-orange:hover {
  transform:translateY(-1px);
  background:#18151f;
  border-color:rgb(255, 246, 120);
  box-shadow:
    0 10px 24px rgba(0,0,0,.7),
    0 0 0 1px rgba(255, 235, 120, 0.2) inset;
}
.btn-23-orange:active {
  transform:translateY(0);
  background:#130f18;
  box-shadow:0 4px 14px rgba(0,0,0,.7);
}
.btn-23-orange:focus {
  outline:none;
  box-shadow:
    0 0 0 1px rgba(255, 235, 120, 0.9),
    0 0 0 4px rgba(255, 235, 120, 0.2);
}



/* "Cooler" Button-Style extra */

a.btn,
button.btn{
  display:inline-block;
  border:1px solid #2a3550;
  background:#121929;
  color:#e8ecf1;
  padding:8px 12px;
  border-radius:10px;
  text-decoration:none;
}
a.btn:hover,
.btn:hover{
  border-color:#6c5ce7;
}

a.btn-23-orange {
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

a.btn-23-orange:hover {
  text-decoration: none;
}


.btn-23-sm {
  padding: 3px 12px;
  font-size: 11px;
  letter-spacing: .16em;
  border-radius: 999px;
  box-shadow:
    0 3px 8px rgba(0,0,0,.55),
    0 0 0 1px rgba(0,0,0,.6) inset;
}

.btn-23-sm:hover {
  transform: translateY(-0.5px);
}

.btn-23-sm:active {
  transform: translateY(0);
  box-shadow: 0 2px 6px rgba(0,0,0,.6);
}


/* Inputs / Forms */
input[type=number],
input[type=text],
textarea,
select {
  width:100%;
  padding:8px 10px;
  margin:4px 0 10px;
  border-radius:10px;
  border:1px solid #243044;
  background:#0b1220;
  color:#e8ecf1;
}
textarea {
  resize:vertical;
}

/* Grid / Rows */

.row {
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  align-items:center;
}
.row > div {
  flex:1;
}

/* Messages / Notes */

.msg {
  margin-bottom:12px;
  padding:8px 10px;
  border-radius:8px;
  font-size:14px;
}
.msg.ok {
  background:#2ecc71;
}
.msg.err {
  background:#e74c3c;
}
.note {
  font-size:13px;
  color:#b9bbbe;
  text-align:center;
}

/* Lists / Tables */

table {
  width:100%;
  border-collapse:collapse;
  margin-top:10px;
  font-size:13px;
}
th, td {
  padding:8px 6px;
  border-bottom:1px dashed #22304a;
  text-align:left;
  vertical-align:top;
}
th {
  color:#b9bbbe;
}
.badge {
  display:inline-block;
  padding:2px 6px;
  border-radius:999px;
  background:#2f3136;
  font-size:11px;
  color:#b9bbbe;
}

.muted{color:#8b93a1}
.small{font-size:12px}

/* Details-Boxen (falls genutzt) */

details.coupon-targets{
  border:1px solid #22304a;
  border-radius:10px;
  padding:10px;
  background:#0e1422;
}
details.coupon-targets > summary{
  list-style:none;
  cursor:pointer;
  display:flex;
  align-items:center;
  gap:8px;
  outline:none;
}
details.coupon-targets > summary::-webkit-details-marker{display:none}
.chev{display:inline-block;transition:transform .2s ease;font-weight:700}
details.coupon-targets[open] .chev{transform:rotate(90deg)}

/* Extra Button-Farben (falls du die nutzt) */

.btn.danger{background:#1a0f12;border-color:#4d1d20;color:#ffb4b4}
.btn.danger:hover{border-color:#bd1414}
.btn.green{background:#0f1a10;border-color:#1d4d1f;color:#c1ffb4}
.btn.green:hover{border-color:#22bd14}
.btn.yellow{background:#1a1a0f;border-color:#4c4d1d;color:#faffb4}
.btn.yellow:hover{border-color:#babd14}

footer { text-align:center; margin-top:18px; opacity:.8; }

/* Toast / Notifications (kannst du später nutzen) */

.toast {
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: 16px;
  z-index: 99999;
  background: #252a36;
  color: #fff;
  border: 1px solid #2f3a54;
  border-radius: 10px;
  padding: 12px 14px 16px;
  box-shadow: 0 8px 28px rgba(0,0,0,.35);
  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
  font-size: 14px;
}
.toast .title { font-weight: 800; letter-spacing:.02em; margin-bottom: 2px; }
.toast .msg { opacity: .95; }
.toast .bar {
  height: 4px; border-radius: 3px; margin-top: 10px;
  background: #6ee787;
}
.toast.err .bar { background: #ff6b6b; }
.toast.show { opacity: 1; transform: translateY(0); }

/* Scrollbar clean */

body{
  scrollbar-width:thin;
  scrollbar-color:var(--primary) transparent;
}
body::-webkit-scrollbar{
  width:8px;
  height:8px;
  background:transparent;
}
body::-webkit-scrollbar-track{
  background:transparent;
}
body::-webkit-scrollbar-thumb{
  background:var(--primary);
  border-radius:999px;
  border:2px solid transparent;
  background-clip:padding-box;
}
*::-webkit-scrollbar-corner{background:transparent;}
*::-webkit-scrollbar-button{display:none;width:0;height:0;}

/* Header-Extras */

.header-logo{
  width:28px;
  height:28px;
  object-fit:contain;
  margin-right:8px;
}
.top, .toolbar{
  display:flex;
  align-items:center;
  gap:10px;
}

/* Chips (falls du Stats-Karten machst) */

.chip{
  display:inline-flex;
  flex-direction:column;
  gap:2px;
  min-width:140px;
  padding:10px 14px;
  border-radius:14px;
  background:#151b25;
  border:1px solid rgba(255,255,255,.08);
  color:#cccccc;
  box-shadow:0 1px 0 rgba(255,255,255,.06) inset, 0 8px 20px rgba(0,0,0,.35);
  transition:transform .06s ease, border-color .2s ease, box-shadow .2s ease;
}
.chip:hover{
  transform:translateY(-1px);
  border-color:rgba(88,160,255,.5);
  box-shadow:0 0 0 1px rgba(88,160,255,.15), 0 12px 26px rgba(0,0,0,.45);
}
.chip.strong{background:#0f1622;border-color:rgba(255,255,255,.12);}
.chip .num{font-size:18px;font-weight:700;letter-spacing:.2px;}
.chip .hint{font-size:12px;opacity:.7;}
.chip.pill{
  flex-direction:row;
  align-items:center;
  gap:10px;
  border-radius:999px;
  padding:10px 14px;
}
.chip.pill .num{font-weight:800;}
.chip-col{
  display:flex;
  flex-direction:column;
  gap:8px;
  max-width:220px;
}
@media (max-width:760px){
  .chip-col{max-width:none;}
}

/* Terminal unten rechts – "Made by BrasX" */

.terminal-fx{
  position:fixed;
  right:16px;
  bottom:16px;
  z-index:999;
  font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,"Liberation Mono","Courier New",monospace;
}

.tf-card{
  padding:6px;
  border-radius:12px;
  border:1px solid #00000000;
  background:#d9d9d900;
  backdrop-filter:blur(8px);
}

.tf-head{
  display:flex;
  align-items:center;
  padding:4px 12px;
  background:#202425;
  border-radius:8px 8px 0 0;
}

.tf-title{
  display:flex;
  align-items:center;
  gap:6px;
  font-size:13px;
  font-weight:600;
  color:#8e8e8e;
}

.tf-title svg{
  color:#006adc;
}

.tf-body{
  display:flex;
  align-items:center;
  padding:8px 10px;
  background:#000;
  color:#4abe3baf;
  font-size:13px;
  border-radius:0 0 8px 8px;
  white-space:nowrap;
}

.tf-cmd{
  position:relative;
  display:flex;
  align-items:center;
}

/* Schreibanimation */
.tf-cmd::before{
  content:attr(data-text);
  overflow:hidden;
  white-space:nowrap;
  display:block;
  animation:tf-type 3s steps(14) infinite alternate;
}

/* Cursor */
.tf-cmd::after{
  content:"";
  display:block;
  border-right:0.15em solid #e34ba9;
  margin-left:2px;
  animation:tf-cursor 0.5s step-end infinite;
}

@keyframes tf-type{
  from{width:0;}
  to{width:14ch;}
}

@keyframes tf-cursor{
  0%,50%{border-color:#e34ba9;}
  50.01%,100%{border-color:transparent;}
}

/* Fancy Button (btn-23) */

/* Primary Action Button (Senden) */
.btn-23 {
  position: relative;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 100%;
  max-width: 260px;

  padding: 10px 18px;
  border-radius: 12px;

  letter-spacing: .18em;
  text-transform: uppercase;
  font-size: 15px;
  font-weight: 700;

  border: 1px solid rgba(255,196,87,.9);
  color: #fbd38d;
  background: #0e141f;
  box-shadow:
    0 10px 26px rgba(0,0,0,.6),
    0 0 0 1px rgba(0,0,0,.7) inset;

  overflow: hidden;
  transition:
    transform .08s ease,
    box-shadow .12s ease,
    background .12s ease,
    border-color .12s ease,
    color .12s ease;
}

/* Shine-Animation über den Button */
.btn-23::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    120deg,
    transparent,
    rgba(255,196,87,0.45),
    transparent
  );
  transform: translateX(-130%);
  pointer-events: none;
  transition: transform .55s ease-out;
}

.btn-23:hover::before {
  transform: translateX(130%);
}

.btn-23:hover {
  text-decoration: none;
  transform: translateY(-1px);
  background:#111827;
  border-color: rgba(255,196,87,1);
  box-shadow:
    0 14px 32px rgba(0,0,0,.8),
    0 0 0 1px rgba(255,196,87,.18) inset;
}

.btn-23:active {
  transform: translateY(0);
  background:
    radial-gradient(circle at top, rgba(255,196,87,0.35), transparent 60%),
    #0c111a;
  box-shadow: 0 6px 18px rgba(0,0,0,.7);
}

.btn-23:focus {
  outline: none;
  box-shadow:
    0 0 0 1px rgba(255,196,87,.9),
    0 0 0 4px rgba(255,196,87,.18);
}



/* Color-Picker clean, ohne hässigen Standardrand */
input[type=color] {
  padding: 0;
  width: 44px;
  height: 32px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.18);
  background: #0b1220;
  cursor: pointer;
}

/* WebKit (Chrome, Edge, Safari) */
input[type=color]::-webkit-color-swatch-wrapper {
  padding: 2px;
  border-radius: 6px;
}
input[type=color]::-webkit-color-swatch {
  border: none;
  border-radius: 6px;
}

/* Firefox */
input[type=color]::-moz-color-swatch {
  border: none;
  border-radius: 6px;
}


/* Farbe: kleines Quadrat links, Hexfeld rechts – gleiche Höhe & Größe */
.color-row{
  display:flex;
  align-items:center;
  gap:1px;
}

/* Rahmen für den Color-Picker */
.color-box{
  flex:0 0 32px;        /* etwas breiter */
  width:38px;
  height:34px;          /* gleiche Höhe wie Textfeld */
  box-sizing:border-box;
  border-radius:8px;
  border:1px solid rgba(255,255,255,0.16);
  background:#0b1220;
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;   /* <– wichtig */
  top:-2px;            /* hiermit schiebst du den Rahmen leicht hoch */
}

/* Color-Input füllt den Rahmen sauber aus */
.color-box input[type=color]{
  width:100%;
  height:100%;
  border:none;
  padding:0;
  background:transparent;
  cursor:pointer;
}

/* Hex-Eingabe rechts füllt den Rest, gleiche Höhe */
.color-hex{
  flex:1;
}
.color-hex input[type=text]{
  width:100%;
  height:38px;          /* matcht .color-box */
  margin:0;
  padding:8px 10px;
  border-radius:8px;
}






/* Spezielles Layout für Embeds-Formular */
.embeds-form {
  max-width: 900px;
}

/* Reihen im Embeds-Formular */
.embeds-form .row {
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  align-items:flex-end; /* sorgt dafür, dass die Inputs unten bündig sind */
}

.embeds-form .row > div {
  flex:1;
  min-width:0;
}

/* Label-Abstand etwas enger */
.embeds-form label {
  display:block;
  margin-bottom:4px;
  text-align:center;
}

/* Textarea soll nicht am Rand kleben */
.embeds-form textarea {
  min-height:120px;
}

/* Button zentriert unter allem */
.embeds-form .btn-23 {
  display:block;
  margin:24px auto 6px;
}

/* Wrapper für Einstellungen */
.settings-block{
  margin-top:8px;
}

/* Haupt-Tile "Einstellungen" – Pfeil rechts */
.settings-toggle{
  display:flex;
  align-items:center;
  justify-content:space-between;
}

.settings-chevron{
  font-size:11px;
  opacity:.8;
  transition:transform .15s ease, opacity .15s ease;
}






/* Container für die Unterpunkte */
.settings-group{
  display:none; /* standard versteckt */
  flex-direction:column;
  gap:6px;
  margin-top:6px;
  padding:6px 6px 6px 18px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.05);
  background:rgba(0,0,0,.20);
}

/* wenn geöffnet */
.settings-group.open{
  display:flex;
}

/* Kinder-Tiles leicht eingedunkelt / kleiner */
.settings-child{
  background:#151824;
  border-color:rgba(255,255,255,.05);
}
.settings-child .title{
  font-size:13px;
}

/* Block im "open"-Zustand → Pfeil drehen */
.settings-block.open .settings-chevron{
  transform:rotate(180deg);
  opacity:1;
}