/* dark utils download site -- schlicht, dunkel, technisch */

*,
*::before,
*::after { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  background: #0c0c0f;
  color: #c8ccd1;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               Helvetica, Arial, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

a {
  color: #9bbcb4;
  text-decoration: none;
  border-bottom: 1px solid #2c3b37;
}
a:hover { color: #c8e0d8; }

.mono {
  font-family: ui-monospace, "SFMono-Regular", Consolas, "Cascadia Mono",
               "Liberation Mono", Menlo, monospace;
  font-size: 12.5px;
}
.small { font-size: 12px; }
.muted { color: #6c707a; }
.warn  { color: #d18a8a; }

.wrap {
  max-width: 980px;
  margin: 0 auto;
  padding: 32px 24px 80px;
  min-height: 100%;
  display: flex;
  flex-direction: column;
}

/* topbar */
.topbar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: #111114;
  border: 1px solid #1f1f24;
  margin-bottom: 28px;
  font-size: 13px;
}
.brand {
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #c8ccd1;
  font-weight: 600;
}
.sep { color: #3a3a42; }
.route {
  color: #7d818b;
  font-family: ui-monospace, Consolas, monospace;
  font-size: 12px;
}
.logout { margin-left: auto; }

/* karten */
.card {
  background: #111114;
  border: 1px solid #1f1f24;
  padding: 24px 26px;
  margin: 0 0 22px 0;
}
.card.narrow { max-width: 440px; }

h1 {
  font-size: 18px;
  font-weight: 600;
  margin: 0 0 18px 0;
  color: #dfe2e6;
  letter-spacing: 0.01em;
}

p { margin: 8px 0; }

/* formulare */
.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0 0 16px 0;
}
.field > span {
  font-size: 12px;
  color: #82858d;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

input[type="text"],
input[type="password"],
input[type="number"],
input[type="file"],
textarea {
  background: #0a0a0c;
  color: #d8dbe0;
  border: 1px solid #25252c;
  padding: 9px 11px;
  font-family: inherit;
  font-size: 13.5px;
  outline: none;
  width: 100%;
}
input[type="text"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
textarea:focus {
  border-color: #4a625c;
  background: #0d0d10;
}
textarea { resize: vertical; min-height: 80px; font-family: inherit; }

input[type="file"] {
  padding: 7px 8px;
  cursor: pointer;
}
input[type="file"]::file-selector-button {
  background: #1d1d22;
  color: #c8ccd1;
  border: 1px solid #2a2a32;
  padding: 5px 10px;
  margin-right: 10px;
  font-family: inherit;
  font-size: 12px;
  cursor: pointer;
}

/* buttons */
.btn {
  display: inline-block;
  background: #1c1f23;
  color: #d8dbe0;
  border: 1px solid #2d3137;
  padding: 9px 18px;
  font-family: inherit;
  font-size: 13px;
  cursor: pointer;
  letter-spacing: 0.03em;
}
.btn:hover { background: #232529; border-color: #3a3e44; }
.btn.primary {
  border-color: #3e524c;
  color: #d8efe7;
  background: #182320;
}
.btn.primary:hover { background: #1f2c28; border-color: #51695f; }

.link-btn {
  background: transparent;
  border: none;
  color: #88abc1;
  padding: 0;
  font: inherit;
  cursor: pointer;
  text-decoration: underline;
  text-decoration-color: #2a3540;
  text-underline-offset: 3px;
}
.link-btn:hover { color: #bcd4e2; }
.link-btn.danger { color: #c98484; text-decoration-color: #4a2424; }
.link-btn.danger:hover { color: #e3a0a0; }

.inline { display: inline; margin-left: 8px; }

/* flashes */
.flashes { margin-bottom: 18px; }
.flash {
  padding: 9px 12px;
  margin: 0 0 6px 0;
  border-left: 3px solid #444;
  background: #131316;
  font-size: 13px;
}
.flash-ok    { border-left-color: #6a8a78; color: #b9d6c8; }
.flash-error { border-left-color: #a26060; color: #e2b4b4; }

/* tabelle */
.grid {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
  margin-top: 4px;
}
.grid th, .grid td {
  text-align: left;
  padding: 8px 10px;
  border-bottom: 1px solid #1a1a1f;
}
.grid th {
  font-weight: 500;
  color: #7d818b;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 11px;
  border-bottom: 1px solid #25252c;
}
.grid tr:hover td { background: #131318; }

/* download page */
.meta {
  color: #82858d;
  font-size: 12.5px;
  margin: -6px 0 18px 0;
}
.desc {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid #1f1f24;
  color: #b8bcc3;
  white-space: pre-wrap;
  font-size: 13.5px;
}
.desc p { margin: 4px 0; }

/* footer */
.foot {
  margin-top: auto;
  padding-top: 36px;
  color: #4a4d54;
  font-size: 11.5px;
  font-family: ui-monospace, Consolas, monospace;
  text-align: right;
}

::selection { background: #2a3a36; color: #e0f0eb; }

/* Erfolgs-Karte nach Link-Erstellung */
.card.highlight {
  border-color: #3a524c;
  background: #11181a;
}
.card.highlight h1 { color: #cfe9df; }
.card.highlight h2.sub {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: #82858d;
  margin: 22px 0 8px 0;
  font-weight: 500;
}

.result-grid {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 6px 18px;
  margin: 10px 0 4px 0;
  align-items: baseline;
  font-size: 13.5px;
}
.result-grid .label {
  color: #7d818b;
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: 0.06em;
}
.pw {
  background: #0a0a0c;
  border: 1px solid #25252c;
  padding: 3px 8px;
  color: #d8efe7;
  letter-spacing: 0.03em;
}

.message-box {
  width: 100%;
  min-height: 170px;
  font-family: ui-monospace, Consolas, "Cascadia Mono", monospace;
  font-size: 12.5px;
  background: #0a0a0c;
  border: 1px solid #25252c;
  color: #d0d4da;
  padding: 12px 14px;
  resize: vertical;
  line-height: 1.55;
}

.actions {
  display: flex;
  gap: 14px;
  align-items: center;
  margin-top: 10px;
  flex-wrap: wrap;
}

.copied { color: #a9d6b9 !important; }

/* Versteckte Nachrichten-Zeile in der Tabelle */
.msg-row { display: none; }
.msg-row.open { display: table-row; }
.msg-row td {
  background: #0d0d10;
  border-bottom: 1px solid #1f1f24;
  padding: 14px 12px 18px 12px;
}

/* ══════════════════════════════════════════════════════════════════
   Fresh polish + Telegram-artige Animationen (sanftes Easing)
   ══════════════════════════════════════════════════════════════════ */
:root {
  --ease: cubic-bezier(.22,.61,.36,1);
  --accent: #6ab3a0;
}

/* Globale sanfte Uebergaenge */
a, .btn, .link-btn, input, textarea, select,
.grid tr, .adminnav a, .flash, .chip {
  transition: background-color .18s var(--ease), border-color .18s var(--ease),
              color .18s var(--ease), transform .16s var(--ease),
              box-shadow .18s var(--ease), opacity .18s var(--ease);
}

/* Weichere Radien */
.card    { border-radius: 12px; }
.topbar  { border-radius: 10px; }
input, textarea, select, .btn { border-radius: 8px; }
.flash   { border-radius: 8px; }

/* Karten gleiten beim Laden rein (gestaffelt) */
@keyframes cardIn {
  from { opacity: 0; transform: translateY(16px) scale(.995); }
  to   { opacity: 1; transform: none; }
}
.card { animation: cardIn .5s var(--ease) both; }
.card:nth-of-type(1){ animation-delay:.03s }
.card:nth-of-type(2){ animation-delay:.09s }
.card:nth-of-type(3){ animation-delay:.15s }
.card:nth-of-type(4){ animation-delay:.21s }
.card:nth-of-type(5){ animation-delay:.27s }
.card:nth-of-type(6){ animation-delay:.33s }
.card:nth-of-type(7){ animation-delay:.39s }
.card:hover { border-color:#2a2a33; box-shadow: 0 6px 26px -18px rgba(0,0,0,.8); }

/* Topbar Brand: dezenter Akzent-Punkt */
.brand::after {
  content:""; display:inline-block; width:6px; height:6px; margin-left:8px;
  border-radius:50%; background: var(--accent); vertical-align: middle;
  box-shadow: 0 0 8px var(--accent); animation: pulse 2.4s var(--ease) infinite;
}
@keyframes pulse { 0%,100%{opacity:.45; transform:scale(.9)} 50%{opacity:1; transform:scale(1.15)} }

/* Buttons: Press-Feedback + Ripple */
.btn { position: relative; overflow: hidden; }
.btn:hover { transform: translateY(-1px); }
.btn:active, .link-btn:active { transform: scale(.96); }
.btn::after {
  content:""; position:absolute; left:50%; top:50%;
  width:0; height:0; border-radius:50%;
  background: rgba(255,255,255,.13); transform: translate(-50%,-50%);
  opacity:0; pointer-events:none;
}
.btn:active::after {
  width:280px; height:280px; opacity:1;
  transition: width .5s var(--ease), height .5s var(--ease), opacity .7s;
}

/* Flash rutscht rein */
@keyframes flashIn { from{opacity:0; transform:translateX(-12px)} to{opacity:1; transform:none} }
.flash { animation: flashIn .42s var(--ease) both; }

/* Tabellenzeilen gleiten rein */
@keyframes rowIn { from{opacity:0; transform:translateY(6px)} to{opacity:1; transform:none} }
.grid tbody tr { animation: rowIn .34s var(--ease) both; }
.grid tr:hover td { background:#15151b; }

/* Admin-Nav Unterstrich-Slide */
.adminnav a { position: relative; }
.adminnav a::before {
  content:""; position:absolute; left:12px; right:12px; bottom:3px; height:2px;
  background: var(--accent); border-radius:2px;
  transform: scaleX(0); transform-origin:left; transition: transform .22s var(--ease);
}
.adminnav a:hover::before, .adminnav a.active::before { transform: scaleX(1); }

/* Download-Button (mini) + Version-Chips */
.btn.mini { padding:4px 13px; font-size:12px; border-radius:6px; letter-spacing:.02em; }
.btn.dl { border-color:#3e524c; color:#d8efe7; background:#15211d; }
.btn.dl:hover { background:#1b2b26; border-color:#5a7a6e; }
.chip {
  display:inline-block; padding:1px 9px; border-radius:999px;
  background:#182320; border:1px solid #2e423b; color:#9ed3c3;
  font-size:10.5px; letter-spacing:.04em; text-transform:uppercase; vertical-align:middle;
}
.ver-toggle { margin-top:12px; display:inline-flex; align-items:center; gap:7px; }
.ver-toggle::before {
  content:""; width:7px; height:7px; border-right:2px solid currentColor;
  border-bottom:2px solid currentColor; transform: rotate(45deg);
  transition: transform .2s var(--ease); display:inline-block;
}
.ver-toggle.open::before { transform: rotate(-135deg); }

/* Lade-Spinner */
.spin { display:inline-block; width:12px; height:12px; border:2px solid #2a2a32;
  border-top-color: var(--accent); border-radius:50%;
  animation: spin .7s linear infinite; vertical-align:-2px; margin-right:6px; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Inputs Fokus-Glow */
input:focus, textarea:focus, select:focus {
  box-shadow: 0 0 0 3px rgba(106,179,160,.12);
}

/* Barrierefrei: Bewegung reduzieren */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}