:root {
  --bg:#f9fafb; --text:#111; --muted:#4b5563;
  --panel:#ffffff; --border:#e5e7eb; --shadow:0 4px 8px rgba(0,0,0,.05);
  --brand:#16a34a; --brand-strong:#14532d;
  --btn:#2563eb; --btn-hover:#1e40af; --input-bg:#ffffff;
}
:root[data-theme="dark"]{
  --bg:#0f1419; --text:#f3f4f6; --muted:#9ca3af;
  --panel:#1f2937; --border:#374151; --shadow:0 4px 14px rgba(0,0,0,.45);
  --brand:#22c55e; --brand-strong:#15803d;
  --btn:#3b82f6; --btn-hover:#1d4ed8; --input-bg:#0b1016;
}

*{box-sizing:border-box}
html,body{height:100%}
body{font:16px/1.5 system-ui,"Segoe UI",Arial,sans-serif;margin:0;background:var(--bg);color:var(--text)}
a{color:var(--btn);text-decoration:none}
.wrap{max-width:980px;margin:24px auto;padding:0 16px}

/* Header */
.header{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 0}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:20px;color:var(--brand);text-decoration:none}
.brand:visited{color:var(--brand)}
.brand:hover,.brand:focus-visible{color:var(--brand-strong)}
.brand svg{width:22px;height:22px;fill:currentColor}
.nav{display:flex;gap:14px}
.nav a{color:var(--text);opacity:.9}
.nav a:hover{opacity:1}
.hr{border:0;border-top:1px solid var(--border);margin:0}

/* Hero */
.hero{margin:18px 0}
.hero h1{font-size:42px;margin:0 0 10px;font-weight:800;display:flex;align-items:center;gap:10px}
.hero h1 svg{width:28px;height:28px;fill:var(--brand)}
.hero h2{font-size:28px;margin:0 0 8px;color:var(--brand);font-weight:800}
.hero p{margin:0 0 18px;color:var(--muted);font-size:14px}

/* Cards & form */
.card{background:var(--panel);border:1px solid var(--border);border-radius:12px;padding:20px;box-shadow:var(--shadow)}
label{display:block;font-size:14px;color:var(--muted);margin-bottom:6px;font-weight:600}

/* Make "Geheimer Text" look like a title */
.panel label[for="secret"]{
  font-size:1.25rem; /* ~20px */
  font-weight:800;
  letter-spacing:.2px;
  margin-bottom:.35rem;
  color:var(--brand);
}

/* Inputs */
textarea,input,select{
  width:100%;
  border:1px solid var(--border);
  border-radius:8px;
  padding:10px 12px;
  font:inherit;
  background:var(--input-bg);
  color:var(--text);
  outline:none;
}
textarea{min-height:140px;resize:vertical}
textarea:focus-visible,
input:focus-visible,
select:focus-visible{outline:2px solid var(--btn);outline-offset:2px}
input::placeholder,textarea::placeholder{color:var(--muted);opacity:.9}

/* Rows & buttons */
.row{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.btn{
  cursor:pointer;border:0;border-radius:8px;padding:10px 16px;
  background:var(--btn);color:#fff;font-weight:700;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  line-height:1;min-height:36px;
}
.btn:hover{background:var(--btn-hover)}
.btn-secondary{
  background:transparent;color:var(--btn);border:1px solid var(--btn)
}
.btn-secondary:hover{background:rgba(37,99,235,.08)}
.btn.btn-ghost{
  background:transparent;color:var(--text);border:1px solid var(--border);
}
.btn.btn-ghost:hover{background:rgba(0,0,0,.04)}
.btn:disabled,button[disabled]{opacity:.6;cursor:not-allowed}

.note{font-size:13px;color:var(--muted)}
.hidden{display:none}
.help{font-size:13px;color:var(--muted);margin-top:8px;display:flex;align-items:center;gap:6px}
.help svg{width:16px;height:16px;fill:var(--brand)}

/* Result box */
.result{margin-top:16px;background:transparent;border:1px dashed var(--border);border-radius:12px;padding:14px}
.result .row{justify-content:space-between}
.result a{word-break:break-all}
.result:focus-within{box-shadow:0 0 0 2px var(--btn)}

/* Reveal output */
.out{
  background:var(--input-bg);
  border:1px dashed var(--border);
  border-radius:8px;
  padding:12px;
  white-space:pre-wrap;
  word-break:break-word;
}
.err{color:#dc2626}

/* Footer */
.footer{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:13px;padding:10px 0}
.footer svg{width:18px;height:18px;fill:var(--brand)}

/* ---------- Meine Links: spacing & toolbar alignment ---------- */
#myLinksPanel{margin-top:24px}
#myLinksPanel .toolbar{display:flex;align-items:center;gap:.75rem;margin-bottom:.6rem}
#myLinksPanel .panel-title{display:flex;align-items:center;gap:.5rem;margin:0}
#myLinksPanel .panel-title .ico svg{width:1.1em;height:1.1em;fill:currentColor}
#myLinksPanel .spacer{flex:1}
#myLinksPanel .btn.btn-icon{padding-left:.65rem;padding-right:.65rem}
#myLinksPanel .list .card{
  padding:.75rem;border:1px solid var(--border);border-radius:.75rem;background:var(--panel);margin-top:.5rem
}
/* badges used by mylinks.js */
.badge{display:inline-flex;gap:.35rem;align-items:center;padding:.12rem .45rem;border-radius:.5rem;font-size:.85em}
.badge.ok{background:#d1fae5;color:#065f46}
.badge.warn{background:#fde68a;color:#92400e}
.badge.err{background:#fecaca;color:#7f1d1d}
.badge i{display:inline-flex;width:1em;height:1em}
.badge i svg{width:1em;height:1em;fill:currentColor}
.time-line{min-height:1lh}
.okflash{box-shadow:0 0 0 2px #34d399 inset}

/* Utilities */
.row--spaced{justify-content:space-between}
.mt-0{margin-top:0}.mb-0{margin-bottom:0}
.mx-auto{margin-left:auto;margin-right:auto}
.w-full{width:100%}
.mt-12{margin-top:12px}.mt-24{margin-top:24px}

/* === Teams (Fluent) Skin — opt-in via <html data-skin="teams"> ========== */
:root[data-skin="teams"]{
  --bg:#f3f2f1;
  --text:#201f1e;
  --muted:#605e5c;
  --panel:#ffffff;
  --border:#edebe9;
  --shadow:0 1px 2px rgba(0,0,0,.06), 0 4px 16px rgba(0,0,0,.05);
  --btn:#6264a7;
  --btn-hover:#585ea8;
}
:root[data-theme="dark"][data-skin="teams"]{
  --bg:#1b1a19;
  --text:#f3f2f1;
  --muted:#c8c6c4;
  --panel:#252423;
  --border:#3b3a39;
  --shadow:0 2px 16px rgba(0,0,0,.35);
  --btn:#8b8cc7;
  --btn-hover:#7e7fbd;
}

/* Wrapping link box + nicer spacing on the share result */
.linkbox{
  width:100%;
  border:1px dashed var(--border);
  border-radius:12px;
  padding:12px;
  background:var(--input-bg);
  color:var(--text);
  font:14px/1.35 ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  white-space:normal;
  word-break:break-word;
  overflow-wrap:anywhere;
  resize:none;
}
.result .actions{
  margin-top:12px;
  gap:12px;
  align-items:center;
  justify-content:flex-start;
}
.result .actions #status{ margin-left:8px }

/* -------- DateTime Picker (unchanged) -------- */
.row.responsive.two-cols{ width:100%; display:grid; grid-template-columns: 1fr 1fr; gap:12px; }
@media (max-width: 700px){ .row.responsive.two-cols{ grid-template-columns: 1fr; } }
.col{ min-width:0; }
.datefield{ position:relative; }
.datefield input[type="text"]{ cursor:pointer; user-select:none; }
.datefield .cal-icon{ position:absolute; right:12px; top:50%; transform:translateY(-50%); width:18px; height:18px; fill:var(--muted); pointer-events:none; }
.dtp-backdrop{ position:fixed; inset:0; background:rgba(0,0,0,.35); display:flex; align-items:center; justify-content:center; z-index:9999; }
.dtp{ width:min(460px, 92vw); background:var(--panel); color:var(--text); border:1px solid var(--border); border-radius:12px; box-shadow:var(--shadow); padding:12px; }
.dtp-header{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:8px; }
.dtp-title{ font-weight:800; }
.dtp-week{ display:grid; grid-template-columns:repeat(7,1fr); gap:4px; margin-bottom:6px; font-size:12px; color:var(--muted); }
.dtp-wk{ text-align:center; }
.dtp-grid{ display:grid; grid-template-columns:repeat(7,1fr); gap:4px; margin-bottom:10px; }
.dtp-day{ border:1px solid var(--border); background:var(--panel); padding:8px 0; border-radius:8px; text-align:center; }
.dtp-day:hover{ background:rgba(0,0,0,.04); }
.dtp-day.sel{ outline:2px solid var(--btn); outline-offset:1px; }
.dtp-day.today{ border-color: var(--btn); }
.dtp-day.out{ opacity:.5; }
.dtp-day.disabled{ opacity:.35; cursor:not-allowed; }
.dtp-time{ display:flex; align-items:center; gap:8px; margin-bottom:10px; flex-wrap:wrap; }
.dtp-time-label{ color:var(--muted); font-size:13px; margin-right:4px; }
.dtp-h,.dtp-m{ box-sizing:border-box; text-align:center; width: clamp(64px, 8vw, 88px); min-width: 64px; padding: 6px 26px 6px 10px; border:1px solid var(--border); border-radius:8px; background:var(--panel); color:var(--text); }
.dtp-colon{ font-weight:600; opacity:.8; }
.dtp-quick{ margin-left:auto; display:flex; gap:8px; }
.dtp-footer{ display:flex; align-items:center; gap:8px; margin-top:4px; }
.dtp-footer .spacer{ flex:1; }
.dtp-err{ color:#b91c1c; font-size:13px; min-height:1lh; }

/* -------- QR block (image) -------- */
.qrwrap{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  border:1px dashed var(--border);
  border-radius:12px;
  padding:16px;
  background:var(--panel);
}
#qrImg{
  width:min(340px, 80vw);
  height:auto;
  image-rendering:pixelated;
}
/* ==== Guard small SVGs (no global svg rules) ==== */
/* Header brand icon only */
.header .brand svg { width:36px; height:36px; display:inline-block; }

/* Tiny action icons only (buttons & date-picker icon) */
.btn-icon i svg,
.icon-btn svg,
.cal-icon svg { width:18px; height:18px; display:block; }

/* ==== Scope all "Meine Links" layout so it never affects forms/header ==== */
.my-links { margin-top:24px; }
.my-links .row { display:flex; flex-wrap:wrap; align-items:center; gap:.5rem; }
.my-links .link-card { padding:.75rem; border:1px solid var(--border,#e5e7eb); border-radius:.75rem; background:var(--panel,#fff); }
.my-links .link-card + .link-card { margin-top:.75rem; }
.my-links .link-actions { display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; }
.my-links .btn-icon { display:inline-flex; align-items:center; gap:.4rem; }
.my-links .btn-danger { background:#d13438; border-color:#d13438; color:#fff; }
.my-links .btn-danger:hover { background:#b32c2f; border-color:#b32c2f; }
.my-links .status-line .mut { opacity:.8; }
.my-links .break-all { word-break:break-all; overflow-wrap:anywhere; }
.my-links .copy-helper { position:fixed; opacity:0; left:-9999px; top:-9999px; pointer-events:none; }
.my-links .okflash { outline:2px solid currentColor; outline-offset:2px; }

/* Optional: if your title has a span/i wrapper */
.my-links .ml-title { display:flex; align-items:center; gap:.5rem; margin:0 0 8px; }
.my-links .ml-toolbar { display:flex; align-items:center; gap:.5rem; }
.my-links .ml-spacer { flex:1 1 auto; }

/* Icon normalization — keeps every small icon crisp and centered */
.btn.btn-icon {
  width: 36px;
  height: 36px;
  padding: 0;
  border-radius: 10px;
  display: inline-grid;
  place-items: center;
}

.btn.btn-icon img,
.btn.btn-icon svg,
#myLinksPanel .toolbar .btn.btn-icon img,
#myLinksPanel .toolbar .btn.btn-icon svg {
  width: 18px;
  height: 18px;
  display: block;
  pointer-events: none; /* clicks go to the button, not the <img> */
}

/* Slight hover/focus affordance (optional, matches your theme) */
.btn.btn-icon:hover { background: rgba(0,0,0,.05); }
:root[data-theme="dark"] .btn.btn-icon:hover { background: rgba(255,255,255,.06); }

/* Keep the header brand icon pinned */
.header .brand svg { width: 22px; height: 22px; }

/* Prevent any accidental giant inline SVGs in forms */
input svg, textarea svg { max-width: 20px; max-height: 20px; }

/* === Icon tinting for <img class="ico"> on action buttons =============== */
/* default: white; hover/focus: black */
.btn-icon .ico,
.btn .ico {
  filter: invert(1) brightness(1000%);   /* makes black SVGs appear white */
  transition: filter .15s ease;
}

/* on hover/focus the icons go back to their original (black) */
.btn-icon:hover .ico,
.btn:hover .ico,
.btn-icon:focus-visible .ico,
.btn:focus-visible .ico {
  filter: none;
}

/* Pager (older compact variant you had) */
.my-links .pager {
  display: flex;
  align-items: center;
  gap: 6px;
  justify-content: flex-end;
  margin-top: 8px;
}
.my-links .pager .mlPageSize { width: 64px; min-width: 52px; padding: 2px 6px; font-size: 13px; border-radius: 8px; }
.my-links .pager .btn-sm     { padding: 2px 8px; min-height: 28px; line-height: 1; border-radius: 8px; }
.my-links .pager .mlPageInfo { font-size: 13px; opacity: .85; }

/* ==== Link card 2-column grid, URL row, chips, hover ===== */
.my-links .link-card { transition: background-color .12s ease; }
.my-links .link-card:hover { background: rgba(0,0,0,.03); }
:root[data-theme="dark"] .my-links .link-card:hover { background: rgba(255,255,255,.04); }

/* NEW grid for QR left + details right + selection column */
.link-grid{ display:grid; grid-template-columns: 28px 160px 1fr; gap:12px; align-items:start; }
@media (max-width: 640px){ .link-grid{ grid-template-columns: 24px 120px 1fr; gap:10px; } }
.selcol{ display:flex; align-items:center; justify-content:center; padding-top:4px; }

.link-media .qrimg{ width:100%; height:auto; display:block; image-rendering:pixelated; }
.link-body{ min-width:0; }

/* URL row + mono font (only this container) */
.urlrow{ display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; }
.url-mono{ font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; }

/* subtitle (Betreff) under URL */
.subtitle{ display:flex; align-items:center; gap:.4rem; color:var(--muted); font-size:.9em; margin-top:.15rem; }

/* status line + countdown chip */
.status-line .mut{ opacity:.9; display:inline-flex; align-items:center; gap:.35rem; }
.rel-time{ font-size:.85em; padding:2px 6px; border-radius:999px; }
.rel-ok{   background:rgba(34,197,94,.12);  color:#14532d; }
.rel-warn{ background:rgba(245,158,11,.15); color:#7c3d00; }
.rel-crit{ background:rgba(239,68,68,.15);  color:#991b1b; }

/* Actions */
.link-actions{ display:flex; align-items:center; gap:.5rem; }
.link-actions.only-delete > :not(.btn-danger){ display:none; }

/* Disabled card state (expired/consumed) */
.card-disabled{ opacity:.6; filter:grayscale(.15); }
.card-disabled .link-actions :not(.btn-danger){ pointer-events:none; opacity:.5; }

/* Chips (copy next to URL) */
.chip{
  display:inline-flex; align-items:center; gap:.35rem;
  padding:4px 10px; font-size:12px; line-height:1.2;
  border-radius:999px; border:1px solid var(--border);
  background:transparent; cursor:pointer;
  transition:transform .12s ease, background-color .12s ease, border-color .12s ease;
}
.chip:hover{ transform:translateY(-1px); background:rgba(0,0,0,.05); }
:root[data-theme="dark"] .chip:hover{ background:rgba(255,255,255,.06); }

/* Badge fade-in (150ms) */
.badge-fade{ opacity:0; transition:opacity .15s ease; }
.badge-fade.in{ opacity:1; }

/* -------- Compact pager that JS renders (first/last + select) -------- */
.ml-compact-pager{display:flex;align-items:center;gap:.35rem;margin-left:auto}
.ml-compact-pager .ml-nav{border:1px solid var(--border);background:var(--panel);border-radius:6px;padding:4px 8px;cursor:pointer}
.ml-compact-pager .ml-nav:disabled{opacity:.5;cursor:not-allowed}
.ml-compact-pager .mlPageInfo{min-width:3.5em;text-align:center;color:var(--muted)}
.ml-compact-pager .ml-size{width:56px;padding:4px 6px;border:1px solid var(--border);border-radius:6px;background:var(--panel)}
.ml-compact-pager .hidden{display:none}

/* Bulk bar */
.ml-bulkbar{display:flex;align-items:center;gap:.5rem;border:1px dashed var(--border);border-radius:10px;padding:8px 10px;margin:.25rem 0 .5rem;background:rgba(0,0,0,.02)}
:root[data-theme="dark"] .ml-bulkbar{background:rgba(255,255,255,.04)}
.ml-bulkbar .spacer{flex:1}

/* Toasts (for one-time reminder) */
#toastHost{position:fixed;right:16px;top:16px;z-index:2000;display:flex;flex-direction:column;gap:8px;pointer-events:none}
.toast{min-width:180px;max-width:280px;padding:10px 12px;border-radius:10px;background:rgba(30,30,36,.98);color:#fff;box-shadow:0 8px 24px rgba(0,0,0,.25);opacity:0;transform:translateY(-6px);transition:opacity .2s ease,transform .2s ease;pointer-events:auto}
.toast.show{opacity:1;transform:translateY(0)}
.toast.ok{background:rgba(23,132,79,.95)}
.toast.err{background:rgba(164,35,42,.95)}
:root[data-theme="dark"] .toast{background:rgba(30,30,36,.98)}
/* === Compact header controls (same row as title) === */
.my-links .ml-controls{
  display:flex; align-items:center; gap:8px; margin-left:auto;
}
.my-links .ml-search{
  width:220px; max-width:32vw; padding:6px 8px;
  border:1px solid var(--border); border-radius:8px;
  background:var(--panel); color:var(--text); font-size:14px;
}
.my-links .ml-sort{
  padding:6px 8px; border:1px solid var(--border); border-radius:8px;
  background:var(--panel); color:var(--text); font-size:14px;
}

/* Keep header on one row on wider screens */
@media (min-width: 820px){
  .my-links .toolbar{ flex-wrap: nowrap; }
}

/* Selection column + bulk bar visibility */
.selcol{ width:28px; }
.my-links .ml-bulkbar.hidden{ display:none; }

/* Middle-ellipsis container already used by JS */
.truncate-mid{ display:inline-block; max-width:100%; overflow:hidden; vertical-align:bottom; }
.truncate-mid a{ display:inline-block; max-width:100%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
/* small subtitle next to title */
.my-links .panel-title { display:flex; align-items:center; gap:.5rem; }
.my-links .panel-title .ml-sub { font-size:12px; opacity:.75; }

/* extra space before the bottom pager */
.my-links .ml-bottom { margin-top: 12px; }
/* Collapse selection column unless select mode is on */
.my-links .selcol { width:28px; display:flex; align-items:center; justify-content:center; }
.my-links.select-on .link-grid { display:grid; grid-template-columns: 28px 168px 1fr; gap:12px; align-items:start; }
.my-links:not(.select-on) .link-grid { display:grid; grid-template-columns: 168px 1fr; gap:12px; align-items:start; }
.my-links:not(.select-on) .selcol { display:none; }

/* Smooth badge/status fade (already referenced by JS) */
.badge-fade { opacity:0; transition: opacity .15s ease; }
.badge-fade.in { opacity:1; }