/* ======= OnionDrop — nüchterner Darknet-Look (Original) ======= */
:root{
  --bg:#0b0e11;
  --panel:#12161b;
  --panel-2:#0f1317;
  --text:#e7ecef;
  --muted:#97a1a9;
  --line:#1f262d;
  --accent:#79c0ff;
  --ok:#2ecc71;
  --danger:#ff5c5c;
  --shadow: 0 10px 30px rgba(0,0,0,0.5);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; color:var(--text); background: linear-gradient(180deg, #0b0e11, #0a0c0f);
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial;
}

a{ color:var(--accent); text-decoration:none; }
a:hover{ text-decoration:underline; }

/* Topbar (altes Design) */
.topbar{
  position:sticky; top:0; z-index:10;
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; padding:12px 16px; background:var(--panel); border-bottom:1px solid var(--line);
}
.brand{ display:flex; align-items:center; gap:10px; }
.logo{ width:10px; height:10px; display:inline-block; border-radius:50%; background:var(--accent); }
.name{ font-weight:700; letter-spacing:.02em; }
.nav a{ margin-left:16px; color:var(--muted); }
.nav a:hover{ color:var(--text); }

/* Layout */
main{
  min-height:calc(100% - 54px);
  display:grid; place-items:center;
  padding:clamp(24px, 6vw, 80px);
}
.card{
  width:min(960px, 94vw);
  padding:clamp(22px, 3vw, 40px);
  background:linear-gradient(180deg, var(--panel), var(--panel-2));
  border:1px solid var(--line);
  border-radius:16px;
  box-shadow: var(--shadow);
}

h1{ margin:0 0 6px 0; font-size: clamp(22px, 4vw, 32px); font-weight:700; }
.sub{ margin:0 0 18px 0; color:var(--muted); }
.muted{ color:var(--muted); }
.muted.center{ text-align:center; }

/* Forms */
.form{ display:grid; gap:16px; }
.field{ display:grid; gap:6px; }
.field span{ color:var(--muted); font-size:13px; }
.field input, .field textarea, .field select{
  width:100%; padding:12px 14px; border-radius:10px; background:#0b0f14;
  border:1px solid var(--line); color:var(--text); outline:none;
}
.field input:focus, .field textarea:focus, .field select:focus{
  border-color:#2b3946; box-shadow: 0 0 0 3px rgba(121,192,255,0.12);
}
.field textarea{ resize:vertical; min-height:160px; }

.pw-wrap{ position:relative; display:flex; }
.pw-wrap input{ flex:1; padding-right:44px; }
.ghost{
  position:absolute; right:6px; top:50%; transform: translateY(-50%);
  border:none; background:transparent; color:var(--muted); cursor:pointer; font-size:16px; padding:6px 10px; border-radius:8px;
}
.ghost:hover{ color:var(--text); background:#121820; }

/* Zeile für TTL + Checkbox */
.row{
  display:flex; flex-wrap:wrap; gap:16px 20px; align-items:flex-end;
}
.row > .field{ flex:1 1 280px; margin:0; }
.field.chk{
  flex:0 0 auto; display:flex; align-items:center; gap:10px;
  padding:10px 12px; height:44px; border:1px solid var(--line);
  border-radius:10px; background:#0b0f14;
}
.field.chk span{ margin:0; color:var(--text); }
.field.chk input{
  appearance: none; width:18px; height:18px; border:1.5px solid #2b3946;
  border-radius:4px; background:#0b0f14; display:inline-block; position:relative; cursor:pointer;
}
.field.chk input:focus{ outline:none; box-shadow: 0 0 0 3px rgba(121,192,255,0.12); }
.field.chk input:checked{ border-color: var(--ok); background:#102017; }
.field.chk input:checked::after{
  content:""; position:absolute; left:4px; top:0px; width:6px; height:12px;
  border-right:3px solid var(--ok); border-bottom:3px solid var(--ok); transform: rotate(45deg);
}

/* Buttons */
.btn-primary{
  appearance:none; border:1px solid #2b3946; cursor:pointer;
  padding:12px 16px; border-radius:10px; font-weight:600;
  color:#0b0e11; background: linear-gradient(180deg, #9bd2ff, #79c0ff);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.15), var(--shadow);
}
.btn-primary:hover{ filter: brightness(1.03); }
.btn-secondary{
  display:inline-block; border:1px solid #2b3946; padding:10px 14px; border-radius:10px;
  color:var(--text); background:#10151b;
}
.btn-secondary:hover{ background:#131a21; }
.above{ margin-bottom:12px; }

/* Table */
.table-wrap{ overflow-x:auto; }
.tbl{ width:100%; border-collapse: collapse; }
.tbl th, .tbl td{ padding:10px 8px; border-bottom:1px solid var(--line); text-align:left; vertical-align:top; }
.tbl thead th{ font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:#c8d3db; }

/* Badges & tiny buttons */
.badge{ display:inline-block; padding:2px 8px; border-radius:999px; border:1px solid #2b3946; background:#10161c; font-size:12px; color:#cfe7ff; }
.badge.ok{ border-color: rgba(46,204,113,0.5); background: rgba(46,204,113,0.12); color:#d6ffe6; }
.badge.danger{ border-color: rgba(255,92,92,0.6); background: rgba(255,92,92,0.15); color:#ffe1e1; }

.sharecell{ min-width: 280px; }
.share{
  width:100%;
  font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size:12px; padding:8px 10px; border-radius:8px; background:#0b0f14; border:1px solid var(--line); color:var(--text);
}
.btn-mini{
  margin-top:6px; padding:6px 10px; font-size:12px; border-radius:8px;
  border:1px solid #2b3946; background:#10161c; color:#dbe6ef; cursor:pointer;
}
.btn-mini:hover{ background:#131a21; }
.btn-mini.danger{ border-color: rgba(255,92,92,0.55); color:#ffdede; }

/* Grid tiles */
.grid{
  display:grid; gap:16px;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  margin-top: 14px;
}
.tile{
  padding:14px; border-radius:12px; border:1px solid var(--line); background:#10151b;
}

/* QR + secret block */
.qr-wrap{ display:grid; place-items:center; margin: 10px 0 12px 0; }
.qr{
  width:min(260px, 60vw); height:auto; border-radius:10px; border:1px solid var(--line);
  background:white; padding:10px; box-shadow: var(--shadow);
}
.secret{
  margin:16px 0; padding:12px 14px; border-radius:10px;
  border:1px dashed #2b3946;
  background:#0d1217; color:#d7e7f3; overflow:auto;
  font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* Toasts — ALT (oben rechts) -> NEU: zentriert mit Abstand oben */
.toast-stack{
  position: fixed;
  z-index: 9999;
  display: grid; gap: 10px;
  max-width: min(520px, 92vw);
  pointer-events: none;
}
/* neue Klasse für Top-Center mit Abstand zur Navbar */
.toast-top-center{
  top: 70px; /* Abstand vergrößert */
  left: 50%;
  transform: translateX(-50%);
}

.toast{
  pointer-events: auto;
  padding: 10px 14px;
  border-radius: 10px;
  border: 1px solid rgba(255, 92, 92, 0.55);
  background: rgba(255, 92, 92, 0.1);
  color: #ffe0e0;
  box-shadow: var(--shadow);
  transform: translateY(-6px);
  opacity: 0;
  transition: transform .25s ease, opacity .25s ease;
}
.toast.show{ transform: translateY(0); opacity: 1; }
.toast.hide{ transform: translateY(-6px); opacity: 0; }

.toast.ok{
  border-color: rgba(46,204,113,0.55);
  background: rgba(46,204,113,0.12);
  color: #e5ffe5;
}

/* Small text */
.muted.s{ font-size:12px; }

/* Responsive */
@media (max-width: 460px){
  .nav a{ margin-left:10px; }
}