/* Medina Lab (standalone) — keep theme vibe: dark/mono/neon */
:root{
  --bg-primary:#0a0a0f;
  --bg-secondary:#12121a;
  --bg-tertiary:#1a1a25;
  --text-primary:#e8e8ed;
  --text-secondary:#a0a0a8;
  --accent:#00d4ff;
  --accent2:#7c3aed;
  --border:#2a2a35;
  --mono:'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;
  background:var(--bg-primary);
  color:var(--text-primary);
}

/* Links (default) — exclude buttons/brand so CTA contrast stays correct */
a:not(.btn):not(.brand){
  color: var(--accent);
  text-decoration: underline;
  text-decoration-color: rgba(0,212,255,.35);
  text-underline-offset: .18em;
}
a:not(.btn):not(.brand):visited{ color: var(--accent); }
a:not(.btn):not(.brand):hover{
  color: rgba(0,212,255,.95);
  text-decoration-color: rgba(0,212,255,.75);
  text-shadow: 0 0 14px rgba(0,212,255,.25);
}

.top{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:1.2rem 2rem;
  border-bottom:1px solid var(--border);
  background:var(--bg-secondary);
}
.brand{
  font-family:var(--mono);
  color:var(--accent);
  text-decoration:none;
  font-weight:800;
  font-size:1.5rem; /* align with blog */
  display:inline-flex;
  align-items:center;
  gap:.75rem;
}
.brand-logo{
  width:68px;
  height:68px;
  border-radius:8px;
  border:0;
  box-shadow:none;
  background:transparent;
  flex:0 0 auto;
}
.brand-wordmark{ color: var(--accent); }
.brand-domain{ color: var(--text-primary); }
.nav{display:flex;gap:1.2rem;align-items:center}
.nav a{
  font-family:var(--mono);
  font-size:.9rem;
  color:var(--text-secondary);
  text-decoration:none;
}
.nav a:hover{color:var(--accent)}
.nav a.active{color:var(--accent)}
.wrap{max-width:1000px;margin:0 auto;padding:2.2rem 2rem 4rem}
.hero{
  border:1px solid var(--border);
  border-radius:16px;
  padding:1.6rem 1.6rem;
  background:linear-gradient(180deg, rgba(18,18,26,.95), rgba(10,10,15,.95));
  position:relative;
  overflow:hidden;
}
.hero::before{
  content:"";
  position:absolute; inset:-40px;
  background:
    radial-gradient(circle at 10% 0%, rgba(0,212,255,.15), transparent 45%),
    radial-gradient(circle at 90% 60%, rgba(124,58,237,.18), transparent 55%);
  filter:saturate(1.2);
  pointer-events:none;
}
.kicker{
  font-family:var(--mono);
  letter-spacing:.16em;
  color:var(--text-secondary);
  font-size:.75rem;
  position:relative;
}
.hero h1{margin:.6rem 0 .4rem; font-size:2rem; line-height:1.1; position:relative}
.sub{color:var(--text-secondary); max-width:70ch; position:relative}
.cta-row{display:flex; gap:.8rem; margin-top:1.2rem; position:relative; flex-wrap:wrap}
.btn{
  font-family:var(--mono);
  background:var(--accent);
  color:#061018;
  border:0;
  padding:.7rem 1rem;
  border-radius:12px;
  cursor:pointer;
  font-weight:800;
  display:inline-block;
  transition: transform .08s ease, box-shadow .2s ease, filter .2s ease, background .2s ease, border-color .2s ease;
  box-shadow:
    inset 0 0 0 1px rgba(6,16,24,.06),
    0 0 0 rgba(0,0,0,0);
}
.btn.ghost{background:transparent;color:var(--accent);border:1px solid rgba(0,212,255,.55); box-shadow:none}
.btn.small{padding:.55rem .8rem;border-radius:10px;font-weight:700}

/* Neon hover feel (similar to consults.de card lift) */
.btn:hover{
  transform: translateY(-2px);
  filter: brightness(1.03);
  box-shadow:
    inset 0 0 0 1px rgba(6,16,24,.10),
    0 0 22px rgba(0,212,255,.22);
}
.btn:active{ transform: translateY(-1px); }
.btn:focus-visible{
  outline:none;
  box-shadow:
    0 0 0 3px rgba(0,212,255,.18),
    0 0 22px rgba(0,212,255,.18);
}
.btn.ghost:hover{
  background: rgba(0,212,255,.08);
  border-color: rgba(0,212,255,.95);
  box-shadow:
    inset 0 0 0 1px rgba(0,212,255,.18),
    0 0 22px rgba(0,212,255,.18);
}


/* Hero filter */
.filter-row{
  display:flex;
  gap:.7rem;
  align-items:center;
  margin-top:1rem;
  position:relative;
  flex-wrap:wrap;
}
.filter-label{
  font-family:var(--mono);
  color:var(--text-secondary);
  font-size:.85rem;
  letter-spacing:.08em;
}
.filter-input{
  flex:1 1 320px;
  min-width:220px;
  font-family:var(--mono);
  background: rgba(26,26,37,.65);
  border:1px solid rgba(0,212,255,.25);
  color:var(--text-primary);
  padding:.6rem .75rem;
  border-radius:12px;
}
.filter-input::placeholder{ color: rgba(160,160,168,.9); }
.filter-input:focus{
  outline:none;
  border-color: rgba(0,212,255,.65);
  box-shadow: 0 0 0 3px rgba(0,212,255,.12);
}

.card.is-hidden{display:none}
.grid{
  display:grid;
  grid-template-columns:1fr;
  gap:1rem;
  margin-top:1rem;
}
@media (min-width: 920px){
  .grid{grid-template-columns:1fr 1fr}
}
.card{
  border:1px solid var(--border);
  border-radius:16px;
  background:var(--bg-secondary);
  overflow:hidden;
}

/* Random tool picker highlight */
.card.flash{
  border-color: rgba(0,212,255,.75);
  box-shadow:
    0 0 0 1px rgba(0,212,255,.25),
    0 0 22px rgba(0,212,255,.14),
    0 0 48px rgba(124,58,237,.12);
  animation: cardFlash 900ms ease-out 1;
}

@keyframes cardFlash{
  0%{
    box-shadow:
      0 0 0 1px rgba(0,212,255,.15),
      0 0 0 rgba(0,212,255,0),
      0 0 0 rgba(124,58,237,0);
  }
  35%{
    box-shadow:
      0 0 0 1px rgba(0,212,255,.35),
      0 0 26px rgba(0,212,255,.20),
      0 0 62px rgba(124,58,237,.18);
  }
  100%{
    box-shadow:
      0 0 0 1px rgba(0,212,255,.10),
      0 0 10px rgba(0,212,255,.08),
      0 0 24px rgba(124,58,237,.06);
  }
}

@media (prefers-reduced-motion: reduce){
  .card.flash{ animation:none; }
}
.cardhdr{
  display:flex;align-items:center;gap:.8rem;
  padding:1rem 1rem;
  border-bottom:1px solid var(--border);
  background:rgba(26,26,37,.9);
}
.tag{
  font-family:var(--mono);
  font-size:.75rem;
  letter-spacing:.12em;
  background:var(--accent);
  color:#061018;
  padding:.15rem .5rem;
  border-radius:999px;
  font-weight:800;
}
.name{font-family:var(--mono); font-weight:800}
.name-link{font-family:var(--mono); font-weight:800; color:var(--text-primary); text-decoration:none}
.name-link:hover{color:var(--accent); text-decoration:none}

/* Tool detail pages */
.crumbs{font-family:var(--mono); color:var(--text-secondary); margin: 0 0 0.9rem}
.crumbs a{color:var(--accent); text-decoration:none}
.crumbs a:hover{text-decoration:underline}
.crumbs .sep{opacity:.7; padding: 0 .4rem}
.crumbs .here{color:var(--text-primary)}
.toolhero{margin-bottom:1rem}
.cardbody{padding:1rem 1rem 1.2rem}
.cardbody p{color:var(--text-secondary); margin:.2rem 0 1rem}

/* Inline lab host inherits styles from theme, but keep minimal fallback */
.labhost{min-height:120px}

.pi textarea,
.glitch textarea,
.hash textarea,
.slug textarea,
.case textarea,
.b64 textarea,
.url textarea,
.regex textarea,
.jwt textarea,
.json textarea,
.stats textarea,
.zwsp textarea,
.epoch textarea{
  width:100%;
  min-height:160px;
  resize:vertical;
  border:1px solid var(--border);
  border-radius:12px;
  background:var(--bg-tertiary);
  color:var(--text-primary);
  font-family:var(--mono);
  padding:.75rem;
  caret-color: var(--accent);
}

.pi textarea:focus,
.glitch textarea:focus,
.hash textarea:focus,
.slug textarea:focus,
.case textarea:focus,
.b64 textarea:focus,
.url textarea:focus,
.regex textarea:focus,
.jwt textarea:focus,
.json textarea:focus,
.stats textarea:focus,
.zwsp textarea:focus,
.epoch textarea:focus{
  outline:none;
  border-color: rgba(0,212,255,0.65);
  box-shadow: 0 0 0 3px rgba(0,212,255,0.12);
}

.slug textarea{min-height:110px}

.pi-actions,
.tool-actions{display:flex;gap:.6rem;align-items:center;margin:.7rem 0;flex-wrap:wrap}
.range{display:flex;gap:.5rem;align-items:center;font-family:var(--mono);color:var(--text-secondary)}
.range input{accent-color:var(--accent)}
.score{font-family:var(--mono); color:var(--text-secondary)}

.tool-select{
  font-family:var(--mono);
  background: var(--bg-tertiary);
  border:1px solid var(--border);
  color:var(--text-primary);
  padding:.45rem .55rem;
  border-radius:10px;
}

.tool-input{
  font-family:var(--mono);
  background: var(--bg-tertiary);
  border:1px solid var(--border);
  color:var(--text-primary);
  padding:.45rem .55rem;
  border-radius:10px;
  min-width: 220px;
}

.tool-input:focus{
  outline:none;
  border-color: rgba(0,212,255,0.65);
  box-shadow: 0 0 0 3px rgba(0,212,255,0.12);
}

.color-picker{
  width: 44px;
  height: 38px;
  padding: 0;
  border-radius: 10px;
  border:1px solid var(--border);
  background: var(--bg-tertiary);
  cursor:pointer;
}
.color-picker::-webkit-color-swatch-wrapper{ padding: 0; }
.color-picker::-webkit-color-swatch{ border: none; border-radius: 8px; }
.color-picker::-moz-color-swatch{ border: none; border-radius: 8px; }

.swatches{
  display:flex;
  gap:.45rem;
  flex-wrap:wrap;
  margin: .2rem 0 .65rem;
}

.swatch{
  width: 30px;
  height: 30px;
  border-radius: 10px;
  border:1px solid var(--border);
  background: var(--sw, #000);
  box-shadow:
    inset 0 0 0 1px rgba(0,212,255,.10),
    0 0 14px rgba(0,212,255,.06);
  cursor:pointer;
  transition: transform 0.06s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.swatch:hover{
  border-color: rgba(0,212,255,.55);
  transform: translateY(-1px);
}

.swatch:focus{
  outline:none;
  border-color: rgba(0,212,255,.75);
  box-shadow: 0 0 0 3px rgba(0,212,255,0.12);
}

@media (prefers-reduced-motion: reduce){
  .swatch{ transition:none; }
  .swatch:hover{ transform:none; }
}

/* Make dropdown options readable (avoid white-on-white native menus) */
select,
select option{
  background-color: var(--bg-tertiary);
  color: var(--text-primary);
}

select:focus{
  outline: none;
  border-color: rgba(0,212,255,0.65);
  box-shadow: 0 0 0 3px rgba(0,212,255,0.12);
}
.out{
  border:1px solid var(--border);
  border-radius:12px;
  padding:.75rem;
  background:#0b0b11;
  color:var(--text-primary);
  font-family:var(--mono);
  overflow:auto;
  white-space:pre-wrap;
  cursor:text;
  position:relative;
  transition: border-color 160ms ease, box-shadow 160ms ease;
}

/* Hover hint (matches shortcuts modal) */
.out:hover::after{
  content:"Shift+Klick: kopieren";
  position:absolute;
  top:.55rem;
  right:.6rem;
  font-family:var(--mono);
  font-size:.72rem;
  letter-spacing:.06em;
  color: rgba(232,232,237,.86);
  background: rgba(0,212,255,.10);
  border: 1px solid rgba(0,212,255,.28);
  padding: .18rem .45rem;
  border-radius: 999px;
  pointer-events:none;
}

/* Shift+Click copy feedback */
.out.copied{
  border-color: rgba(0,212,255,.70);
  box-shadow:
    0 0 0 1px rgba(0,212,255,.20),
    0 0 18px rgba(0,212,255,.14),
    0 0 34px rgba(124,58,237,.10);
}
.out.copyfail{
  border-color: rgba(255,80,80,.75);
  box-shadow:
    0 0 0 1px rgba(255,80,80,.18),
    0 0 18px rgba(255,80,80,.12);
}

/* HTTP Roulette widget (shared with blog JS) */
.medina-lab{
  border: 1px solid var(--border);
  background: linear-gradient(180deg, rgba(18,18,26,0.95), rgba(10,10,15,0.95));
  border-radius: 12px;
  padding: 1.0rem;
  position: relative;
  overflow: hidden;
}
.medina-lab::before{
  content:"";
  position:absolute;
  inset:0;
  background: radial-gradient(circle at 20% 0%, rgba(0,212,255,0.08), transparent 45%),
              radial-gradient(circle at 90% 80%, rgba(124,58,237,0.10), transparent 55%);
  pointer-events:none;
}
.medina-labtitle{display:flex;align-items:center;gap:.6rem;margin-bottom:.5rem;position:relative}
.medina-badge{
  font-family:var(--mono);
  font-size:.75rem;
  letter-spacing:.12em;
  color:#061018;
  background:var(--accent);
  padding:.15rem .5rem;
  border-radius:999px;
  font-weight:800;
}
.medina-labname{font-family:var(--mono);font-weight:800}
.medina-labq{color:var(--text-secondary);margin:.4rem 0 .6rem;position:relative}
.medina-labcode{font-family:var(--mono);font-size:2rem;font-weight:900;color:var(--accent);margin:.2rem 0 .6rem;position:relative}
.medina-labanswers{display:grid;grid-template-columns:1fr;gap:.5rem;position:relative}
.medina-opt{
  text-align:left;
  font-family:var(--mono);
  background: var(--bg-tertiary);
  color: var(--text-primary);
  border: 1px solid var(--border);
  padding: .7rem .8rem;
  border-radius: 10px;
  cursor:pointer;
}
.medina-opt:hover{border-color: rgba(0,212,255,0.65)}
.medina-opt:disabled{opacity:.65;cursor:not-allowed}
.medina-labfb{margin-top:.6rem;font-family:var(--mono);color:var(--text-secondary);position:relative}
.medina-labfoot{display:flex;justify-content:space-between;align-items:center;margin-top:.7rem;position:relative}
.medina-btn{
  font-family:var(--mono);
  background: transparent;
  color: var(--accent);
  border: 1px solid rgba(0,212,255,0.55);
  padding: .45rem .7rem;
  border-radius: 10px;
  cursor:pointer;
}
.medina-btn:hover{border-color: var(--accent)}
.medina-labscore{font-family:var(--mono);color:var(--text-secondary)}

/* Starfield */
.sf{display:flex;flex-direction:column;gap:.65rem}
.sf-canvas{
  width:100%;
  height:240px;
  display:block;
  border:1px solid var(--border);
  border-radius:12px;
  background:#07070c;
}
.sf-actions{display:flex;gap:.6rem;align-items:center;flex-wrap:wrap}
.sf-hint{font-family:var(--mono);color:var(--text-secondary);font-size:.8rem;opacity:.9}

.rating{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.75rem;
  border:1px solid var(--border);
  border-radius:12px;
  padding:.75rem;
  background: linear-gradient(180deg, rgba(10,10,15,.62), rgba(10,10,15,.42));
}
.rating-left{display:flex;flex-direction:column;gap:.15rem}
.rating-title{font-family:var(--mono); font-weight:800}
.rating-meta{font-family:var(--mono); color:var(--text-secondary); font-size:.85rem}
.rating-hearts{display:flex; gap:.25rem; align-items:center; flex-wrap:wrap}
.rating-heart{
  width: 26px;
  height: 24px;
  padding: 0;
  border-radius: 0;

  /* Strong contrast even when "empty" */
  border: 1px solid rgba(0,212,255,0.92);
  background: rgba(0,212,255,0.14);

  cursor: pointer;
  clip-path: polygon(25% 6%, 75% 6%, 100% 50%, 75% 94%, 25% 94%, 0% 50%);
  box-shadow:
    inset 0 0 0 1px rgba(0,212,255,0.14),
    0 0 14px rgba(0,212,255,0.10);
  transition: transform 0.06s ease, border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}

.rating-heart::before{
  content: "";
  display: block;
  width: 6px;
  height: 6px;
  margin: 0 auto;
  margin-top: 9px;
  border-radius: 999px;
  background: rgba(0,212,255,0.80);
  box-shadow: 0 0 14px rgba(0,212,255,0.18);
}
.rating-heart.filled{
  background: linear-gradient(180deg, rgba(0,212,255,0.52), rgba(0,212,255,0.24));
  border-color: rgba(0,212,255,1);
  box-shadow:
    inset 0 0 0 1px rgba(0,212,255,0.24),
    0 0 22px rgba(0,212,255,0.28);
}

.rating-heart.filled::before{
  background: rgba(0,212,255,1);
  box-shadow: 0 0 18px rgba(0,212,255,0.34);
}
.rating-heart:hover{
  border-color: rgba(0,212,255,1);
  transform: translateY(-1px);
}

.rating-heart:disabled{opacity:.6; cursor:not-allowed}

.footer{margin-top:1.6rem;color:var(--text-secondary)}
.footer .muted{opacity:.8}

/* Footer links */
.footer a,
.footer a:visited{
  color: var(--text-secondary);
  text-decoration: none;
}
.footer a:hover{
  color: var(--accent);
  text-decoration: underline;
}

/* consults link: always neon-blue (no weird visited/hover colors)
   (supports legacy .footer-consults and the newer .footer-consults-link) */
.footer-consults{ text-align:center; }
.footer-consults a,
.footer-consults a:visited,
.footer a.footer-consults-link,
.footer a.footer-consults-link:visited{
  color: var(--accent);
}
.footer-consults a:hover,
.footer a.footer-consults-link:hover{
  color: var(--accent);
  text-decoration: underline;
}
.footer-consults a,
.footer a.footer-consults-link{ display:inline-block; padding: 0.1rem 0.2rem; }

/* HTTP Status Roulette (fallback widget) */
.roulette{display:flex;flex-direction:column;gap:.65rem}
.roulette-top{display:flex;justify-content:space-between;gap:.8rem;align-items:flex-start;flex-wrap:wrap}
.roulette-q{font-family:var(--mono);color:var(--text-secondary);font-size:.85rem;letter-spacing:.02em}
.roulette-meta{font-family:var(--mono);color:var(--text-secondary);font-size:.85rem}
.roulette-code{
  font-family:var(--mono);
  font-weight:900;
  font-size:2.6rem;
  letter-spacing:.06em;
  padding:.6rem .8rem;
  border:1px solid var(--border);
  border-radius:14px;
  background:linear-gradient(180deg, rgba(7,7,12,.9), rgba(18,18,26,.9));
  box-shadow: inset 0 0 0 1px rgba(0,212,255,.08);
}
.roulette-timer{height:8px;border-radius:999px;background:#0b0b11;border:1px solid var(--border);overflow:hidden}
.roulette-bar{height:100%;transform-origin:left center;transform:scaleX(1);background:linear-gradient(90deg, rgba(0,212,255,.9), rgba(124,58,237,.95))}
.roulette-options{display:grid;grid-template-columns:1fr;gap:.55rem}
@media (min-width: 640px){
  .roulette-options{grid-template-columns:1fr 1fr}
}
.roulette-opt{
  text-align:left;
  border:1px solid var(--border);
  background:var(--bg-tertiary);
  color:var(--text-primary);
  border-radius:14px;
  padding:.7rem .8rem;
  cursor:pointer;
  font-family:var(--mono);
}
.roulette-opt:hover{border-color:rgba(0,212,255,.45)}
.roulette-opt:disabled{cursor:default;opacity:.95}
.roulette-opt.good{border-color:rgba(0,212,255,.75); box-shadow:0 0 0 1px rgba(0,212,255,.25) inset}
.roulette-opt.wrong{border-color:rgba(255,80,180,.55)}
.opt-name{display:block;font-weight:900}
.opt-desc{display:block;color:var(--text-secondary);font-size:.85rem;margin-top:.25rem}
.roulette-result{font-family:var(--mono);color:var(--text-secondary);min-height:1.2em}
.roulette-result .ok{color:var(--accent);font-weight:900}
.roulette-result .bad{color:#ff50b4;font-weight:900}
.roulette-actions{display:flex;gap:.6rem;align-items:center;flex-wrap:wrap}

/* Panels (tool detail pages) */
.panel{
  border:1px solid var(--border);
  border-radius:16px;
  background:var(--bg-secondary);
  overflow:hidden;
  margin: 0 0 1rem;
}
.panelhdr{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:1rem;
  padding:1rem 1rem;
  border-bottom:1px solid var(--border);
  background:rgba(26,26,37,.85);
}
.panelhdr h2{
  margin:0;
  font-family:var(--mono);
  font-size:1.05rem;
  font-weight:900;
}
.panelbody{
  padding:1rem 1rem 1.2rem;
}

.muted{color:var(--text-secondary)}

.panelbody ul{
  margin:.25rem 0 0;
  padding-left:1.2rem;
  color:var(--text-secondary);
}
.panelbody li{margin:.35rem 0}
.panelbody strong{color:var(--text-primary)}

/* Tools directory (/lab/tools/) */
.toolsdir{
  display:grid;
  gap:.85rem;
}
.tools-sort{
  display:flex;
  align-items:center;
  gap:.5rem;
  flex-wrap:wrap;
}
.tools-sort label{
  font-family:var(--mono);
  font-size:.85rem;
}
.tools-sort select{
  font-family:var(--mono);
}
.toolrow{
  border:1px solid var(--border);
  border-radius:14px;
  background:linear-gradient(180deg, rgba(26,26,37,.75), rgba(18,18,26,.65));
  padding:.9rem 1rem;
}
.toolrow:hover{
  border-color: rgba(0,212,255,0.45);
  box-shadow: 0 0 0 1px rgba(0,212,255,0.08), 0 4px 14px rgba(0,0,0,0.25);
  transform: translateY(-1px);
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.toolrow-top{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:1rem;
}
.toolrow-title{
  display:flex;
  align-items:baseline;
  gap:.55rem;
  flex-wrap:wrap;
  min-width: 0;
}
.toolrow-name{
  font-family:var(--mono);
  font-weight:900;
  color:var(--text-primary);
  text-decoration:none;
}
.toolrow-name:hover{ color:var(--accent); }
.toolrow-date{
  font-family:var(--mono);
  font-size:.85rem;
  color:var(--text-secondary);
  white-space:nowrap;
}
.toolrow-meta{
  font-family:var(--mono);
  font-size:.85rem;
  color:var(--text-secondary);
  white-space:nowrap;
}
.toolrow-desc{
  margin:.55rem 0 0;
  color:var(--text-secondary);
  max-width: 88ch;
}
.toolrow-share{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  margin-top:.75rem;
  padding-top:.75rem;
  border-top:1px solid rgba(42,42,53,.75);
}
.toolrow-share-label{
  font-family:var(--mono);
  font-size:.85rem;
  color:var(--text-secondary);
}
.toolrow-share-btns{
  display:flex;
  gap:.5rem;
  flex-wrap:wrap;
  justify-content:flex-end;
}
.sharebtn{
  font-family:var(--mono);
  font-size:.85rem;
  font-weight:800;
  color:var(--accent);
  background:transparent;
  border:1px solid rgba(0,212,255,.42);
  border-radius:10px;
  padding:.45rem .65rem;
  cursor:pointer;
  text-decoration:none;
  transition: transform .08s ease, border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.sharebtn:hover{
  transform: translateY(-1px);
  border-color: rgba(0,212,255,.95);
  box-shadow: 0 0 18px rgba(0,212,255,.16);
  background: rgba(0,212,255,.06);
}
.sharebtn:active{ transform: translateY(0px); }
.sharebtn:focus-visible{ outline:none; box-shadow: 0 0 0 3px rgba(0,212,255,.18); }
.sharebtn.copied{ border-color: rgba(0,212,255,.95); background: rgba(0,212,255,.10); }

/* Share block (tool detail pages) */
.shareblock{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  margin-top: 1rem;
  padding-top: .85rem;
  border-top: 1px solid rgba(42,42,53,.75);
}
.shareblock-label{
  font-family:var(--mono);
  font-size:.85rem;
  color:var(--text-secondary);
}
.shareblock-btns{
  display:flex;
  gap:.5rem;
  flex-wrap:wrap;
  justify-content:flex-end;
}

/* Modal (index help / shortcuts) */
body.modal-open{overflow:hidden}
.modal{
  position:fixed;
  inset:0;
  display:none;
  align-items:center;
  justify-content:center;
  padding:1.2rem;
  z-index:50;
}
.modal.is-open{display:flex}
.modal-backdrop{
  position:absolute;
  inset:0;
  background:rgba(10,10,15,.75);
  backdrop-filter:blur(4px);
}
.modal-card{
  position:relative;
  width:min(720px, 100%);
  border:1px solid rgba(0,212,255,.25);
  border-radius:16px;
  background:linear-gradient(180deg, rgba(18,18,26,.96), rgba(10,10,15,.96));
  box-shadow:
    0 0 0 1px rgba(0,212,255,.08),
    0 0 40px rgba(0,212,255,.08),
    0 0 80px rgba(124,58,237,.10);
  padding:1.1rem 1.1rem 1.2rem;
}
.modal-hdr{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:1rem;
  margin-bottom:.6rem;
}
.modal-card h2{
  margin:0 0 .6rem;
  font-family:var(--mono);
  font-weight:900;
  font-size:1.1rem;
}
.kbd-list{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:.45rem;
}
.kbd-list li{
  display:flex;
  align-items:baseline;
  gap:.75rem;
  color:var(--text-secondary);
}
kbd{
  font-family:var(--mono);
  font-weight:800;
  color:var(--text-primary);
  background:rgba(26,26,37,.9);
  border:1px solid rgba(0,212,255,.22);
  border-bottom-color:rgba(0,212,255,.35);
  padding:.1rem .45rem;
  border-radius:8px;
}
.smallprint{font-size:.85rem; margin-top:.9rem}

@media (prefers-reduced-motion: reduce){
  .modal-backdrop{backdrop-filter:none}
}
/* A11Y: focus + reduced motion */
/* Visible keyboard focus for non-button links */
.nav a:focus-visible,
.name-link:focus-visible,
.brand:focus-visible,
.footer a:focus-visible{
  outline: 2px solid rgba(0,212,255,.65);
  outline-offset: 3px;
}

/* Respect reduced-motion preferences: avoid hover lifts */
@media (prefers-reduced-motion: reduce){
  .btn,
  .sharebtn,
  .rating-heart{ transition:none !important; }

  .btn:hover,
  .sharebtn:hover,
  .rating-heart:hover{ transform:none !important; }
}
/* lab-hourly: focus-visible */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
}


/* Accessibility: reduced motion */
@media (prefers-reduced-motion: reduce){
  *{
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* Accessibility: visible focus for text links */
a:focus-visible{
  outline: none;
  box-shadow: 0 0 0 3px rgba(0,212,255,.18), 0 0 22px rgba(0,212,255,.18);
  border-radius: 6px;
}

/* lab-hourly 2026-03-01: enhanced focus for input elements */
input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-color: var(--accent);
}

/* lab-hourly 2026-03-02: subtle hover effect for tool cards */
.toolrow {
  transition: background-color 0.15s ease, transform 0.15s ease;
  border-radius: 8px;
}
.toolrow:hover {
  background-color: rgba(0, 212, 255, 0.03);
  transform: translateX(4px);
}

/* lab-hourly 2026-03-04: improved contrast for tool descriptions */
.toolrow .desc {
  color: rgba(255, 255, 255, 0.85);
}
.toolrow .desc:hover {
  color: rgba(255, 255, 255, 0.95);
}

/* lab-hourly 2026-03-04: enhanced prompt playground output */
#pi-output {
  font-family: var(--mono);
  font-size: 0.9rem;
  line-height: 1.6;
  white-space: pre-wrap;
  word-wrap: break-word;
}
#pi-output:empty::before {
  content: 'Gib einen Text ein und klicke auf "Scannen", um versteckte Prompt-Injection-Muster zu finden.';
  color: var(--text-secondary);
  font-style: italic;
}

/* lab-hourly 2026-03-05: subtle tool card hover animation */
.tool-card {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.tool-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 255, 255, 0.15);
}
.tool-card:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Hourly improvement: enhanced focus visibility */
.lab-tool-card:focus-within {
  box-shadow: 0 0 0 3px rgba(0, 255, 255, 0.4);
  outline: none;
}

/* lab-hourly 2026-03-06: filter input glow enhancement */
.filter-input:focus{
  box-shadow: 
    0 0 0 3px rgba(0,212,255,.12),
    0 0 18px rgba(0,212,255,.08);
}

/* Scan result animation — subtle pulse for annotated matches */
@keyframes scan-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}
#pi-output, #pi-output span.match {
  animation: scan-pulse 2s ease-in-out infinite;
}

/* lab-hourly 2026-03-07: better mobile tool card spacing */
@media (max-width: 768px) {
  .tool-card {
    margin-bottom: 12px;
  }
  .toolrow {
    flex-direction: column;
    gap: 8px;
  }
}

/* LAB-HOUR 2026-03-07: Subtle card lift polish */
.tool-card, .card {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.tool-card:hover, .card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0,255,255,0.15);
}

/* Subtle hero glow pulse animation */
@keyframes hero-glow {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 0.8; }
}
.hero::after {
  content: "";
  position: absolute;
  inset: -20px;
  background: radial-gradient(circle at 50% -10%, rgba(0,212,255,0.08), transparent 60%);
  animation: hero-glow 4s ease-in-out infinite;
  pointer-events: none;
  z-index: 0;
}
.hero > * { position: relative; z-index: 1; }

/* HTTP Roulette placeholder state - make it look like a CTA */
.roulette-code:empty,
.roulette-code[data-state="idle"]{
  cursor: pointer;