/* =========================================================
   Lynnx Toolkit — shared tool page styles
   Used by every individual tool page.
   Requires toolkit.css to be loaded first.
   ========================================================= */

/* breadcrumb — deprecated, kept only so legacy markup doesn't break layout */
.tk-crumb { display: none; }

/* back button — fixed top-left, theme aware, replaces breadcrumb.
   Sits BELOW the parent header (which is z-index: 1000 and ~80px tall),
   so it must clear the header bottom plus a comfortable gap. */
.tk-back {
  position: fixed;
  top: 5.5rem;
  left: max(1rem, 5%);
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--tk-surface);
  border: 1px solid var(--tk-border);
  border-radius: 12px;
  color: var(--tk-text);
  text-decoration: none;
  z-index: 1100;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  transition: all 200ms var(--ease-snap);
}
.tk-back:hover {
  background: var(--tk-surface-hi);
  border-color: var(--tk-border-hi);
  transform: translateX(-3px);
}
.tk-back:active { transform: translateX(-1px); }
.tk-back svg { width: 18px; height: 18px; }
@media (max-width: 720px) {
  .tk-back { top: 5rem; }
}

/* tool hero — tight, no eyebrow.
   padding-top must clear the back button (top: 5.5rem + 40px ≈ 8rem) */
.tk-tool-hero {
  max-width: 1280px;
  margin: 0 auto;
  padding: 8.5rem 5% 1.25rem;
}
.tk-tool-hero h1 {
  font-family: 'Inter Tight', 'Inter', sans-serif;
  font-size: clamp(1.8rem, 3.6vw, 2.4rem);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.05;
  margin: 0 0 0.4rem;
}
.tk-tool-hero p {
  color: var(--tk-text-2);
  font-size: 0.98rem;
  max-width: 640px;
  line-height: 1.5;
  margin: 0;
}

/* tool stage — the dominant interactive area */
.tk-stage-wrap {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 5% 4rem;
}
.tk-stage {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 3rem 2rem;
  min-height: 460px;
  border-radius: 24px;
  background: var(--tk-surface);
  border: 1px solid var(--tk-border);
  overflow: hidden;
  isolation: isolate;
}
.tk-stage::before {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  padding: 1px;
  background: var(--scn-grad, var(--gradient-primary));
  opacity: 0.45;
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
}

/* primary action button (within stage) */
.tk-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 1rem 2.4rem;
  font-family: 'Inter Tight', 'Inter', sans-serif;
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: #fff;
  background: var(--scn-grad, var(--gradient-primary));
  border: 0;
  border-radius: 14px;
  cursor: pointer;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.12) inset,
    0 14px 30px -16px rgba(0,0,0,0.5);
  transition:
    transform 200ms var(--ease-snap),
    box-shadow 200ms var(--ease-snap),
    filter 200ms var(--ease-snap);
}
.tk-action:hover {
  transform: translateY(-2px);
  filter: brightness(1.08);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.15) inset,
    0 18px 40px -16px rgba(0,0,0,0.55);
}
.tk-action:active { transform: translateY(0); filter: brightness(0.95); }
.tk-action:disabled { opacity: 0.6; cursor: not-allowed; transform: none; }
.tk-action.tk-action--ghost {
  background: transparent;
  color: var(--tk-text);
  border: 1px solid var(--tk-border);
  box-shadow: none;
}
.tk-action.tk-action--ghost:hover {
  background: var(--tk-surface-hi);
  border-color: var(--tk-border-hi);
  filter: none;
}
.tk-action.tk-action--sm { padding: 0.55rem 1.1rem; font-size: 0.88rem; border-radius: 10px; }

/* variant strip (e.g., d4 d6 d8 ...) */
.tk-variants {
  display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: center;
  margin-top: 1.4rem;
}
.tk-variant {
  padding: 0.55rem 1rem;
  background: var(--tk-surface);
  border: 1px solid var(--tk-border);
  border-radius: 999px;
  font-size: 0.85rem;
  color: var(--tk-text-2);
  text-decoration: none;
  cursor: pointer;
  font-family: inherit;
  transition: all 180ms var(--ease-snap);
}
.tk-variant:hover { color: var(--tk-text); border-color: var(--tk-border-hi); }
.tk-variant.is-active {
  color: #fff;
  background: var(--scn-grad, var(--gradient-primary));
  border-color: transparent;
}

/* result chip strip (history) */
.tk-history {
  margin-top: 1.6rem;
  display: flex; align-items: center; gap: 0.45rem;
  flex-wrap: wrap;
  min-height: 30px;
}
.tk-history-label {
  font-size: 0.78rem;
  color: var(--tk-text-3);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.tk-chip {
  padding: 0.3rem 0.65rem;
  background: var(--tk-surface);
  border: 1px solid var(--tk-border);
  border-radius: 8px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.8rem;
  color: var(--tk-text-2);
  font-feature-settings: "tnum";
  animation: tk-chip-in 350ms var(--ease-spring) both;
}
@keyframes tk-chip-in {
  0%   { opacity: 0; transform: translateX(8px); }
  100% { opacity: 1; transform: translateX(0); }
}
.tk-chip.tk-chip--crit { color: #fbbf24; border-color: rgba(251,191,36,0.4); }
.tk-chip.tk-chip--fail { color: #f87171; border-color: rgba(248,113,113,0.4); }

/* SEO content section */
.tk-content {
  max-width: 760px;
  margin: 0 auto;
  padding: 4rem 5%;
}
.tk-content h2 {
  font-family: 'Inter Tight', 'Inter', sans-serif;
  font-size: 1.6rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 2.5rem 0 1rem;
  color: var(--tk-text);
}
.tk-content h2:first-child { margin-top: 0; }
.tk-content p {
  color: var(--tk-text-2);
  font-size: 1rem;
  line-height: 1.75;
  margin: 0 0 1.2rem;
}
.tk-content ul { color: var(--tk-text-2); padding-left: 1.4rem; line-height: 1.75; }
.tk-content li { margin-bottom: 0.4rem; }
.tk-content code {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.86em;
  padding: 0.12rem 0.4rem;
  border-radius: 5px;
  background: var(--tk-surface);
  border: 1px solid var(--tk-border);
  color: var(--tk-text);
}

/* FAQ accordion */
.tk-faq { margin: 1.5rem 0; }
.tk-faq details {
  border-bottom: 1px solid var(--tk-border);
  padding: 1rem 0;
}
.tk-faq details:first-child { border-top: 1px solid var(--tk-border); }
.tk-faq summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-weight: 500;
  color: var(--tk-text);
  font-size: 1.02rem;
  user-select: none;
  outline: none;
}
.tk-faq summary::-webkit-details-marker { display: none; }
.tk-faq summary::after {
  content: '+';
  font-size: 1.5rem;
  color: var(--tk-text-3);
  transition: transform 200ms var(--ease-snap);
  font-weight: 300;
}
.tk-faq details[open] summary::after { transform: rotate(45deg); }
.tk-faq details p {
  color: var(--tk-text-2);
  margin: 0.7rem 0 0;
  font-size: 0.96rem;
  line-height: 1.7;
}

/* related tools */
.tk-related {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 5% 4rem;
}
.tk-related h2 {
  font-family: 'Inter Tight', 'Inter', sans-serif;
  font-size: 1.4rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0 0 1.4rem;
}
.tk-tools-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 0.85rem;
}
.tk-tool-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 1.2rem 1.3rem;
  background: var(--tk-surface);
  border: 1px solid var(--tk-border);
  border-radius: 14px;
  text-decoration: none;
  color: var(--tk-text);
  min-height: 110px;
  transition: all 200ms var(--ease-snap);
}
.tk-tool-tile:hover {
  border-color: var(--tk-border-hi);
  background: var(--tk-surface-hi);
  transform: translateY(-2px);
}
.tk-tool-tile-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 0.5rem;
}
.tk-tool-tile-name {
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: -0.01em;
}
.tk-tool-tile-arrow {
  color: var(--tk-text-3);
  transition: transform 180ms var(--ease-snap), color 180ms var(--ease-snap);
}
.tk-tool-tile:hover .tk-tool-tile-arrow {
  color: var(--tk-text);
  transform: translateX(4px);
}
.tk-tool-tile-desc {
  color: var(--tk-text-2);
  font-size: 0.86rem;
  line-height: 1.5;
}
.tk-tool-tile.is-soon {
  opacity: 0.55;
  cursor: not-allowed;
  pointer-events: none;
}
.tk-tool-tile-soon {
  position: absolute;
  top: 1rem; right: 1rem;
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--tk-text-3);
  background: var(--tk-surface-hi);
  padding: 0.2rem 0.5rem;
  border-radius: 6px;
  text-transform: uppercase;
}

/* group heading inside scenario hubs */
.tk-group {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.78rem;
  color: var(--tk-text-3);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  margin: 2.4rem 0 1rem;
  display: flex;
  align-items: center;
  gap: 0.7rem;
}
.tk-group::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--scn-grad, var(--gradient-primary));
}
.tk-group:first-of-type { margin-top: 0; }

/* sound toggle (small floating in stage) */
.tk-sound {
  position: absolute;
  top: 1rem; right: 1rem;
  width: 36px; height: 36px;
  border-radius: 10px;
  background: var(--tk-surface);
  border: 1px solid var(--tk-border);
  color: var(--tk-text-2);
  cursor: pointer;
  display: inline-flex;
  align-items: center; justify-content: center;
  transition: all 180ms var(--ease-snap);
}
.tk-sound:hover { color: var(--tk-text); border-color: var(--tk-border-hi); }
.tk-sound.is-on { color: var(--tk-text); }

/* =========================================================
   3D ICONS — for scenario hub tool tiles
   Each icon is a self-contained ~64px 3D animated mark.
   ========================================================= */
.icon-3d {
  width: 52px; height: 52px;
  margin: 0 0 1.1rem;
  perspective: 480px;
  flex-shrink: 0;
}
.icon-3d-inner {
  width: 100%; height: 100%;
  position: relative;
  transform-style: preserve-3d;
}

/* generic spin animations */
@keyframes i3d-spin   { to { transform: rotateX(360deg) rotateY(360deg); } }
@keyframes i3d-spin-y { to { transform: rotateY(360deg); } }
@keyframes i3d-spin-x { to { transform: rotateX(360deg); } }
@keyframes i3d-flip   { 0%,40% { transform: rotateY(0); } 50% { transform: rotateY(180deg); } 90%,100% { transform: rotateY(360deg); } }
@keyframes i3d-float  { 0%,100% { transform: rotateX(20deg) rotateY(20deg); } 50% { transform: rotateX(-20deg) rotateY(-20deg); } }
@keyframes i3d-pulse  { 0%,100% { transform: scale(1); } 50% { transform: scale(1.08); } }

@media (prefers-reduced-motion: no-preference) {
  /* CUBE (dice) */
  .icon-3d--cube .icon-3d-inner { animation: i3d-spin 9s linear infinite; }
  .tk-tool-tile:hover .icon-3d--cube .icon-3d-inner { animation-duration: 2.6s; }

  /* CARD (cards/tarot) */
  .icon-3d--card .icon-3d-inner { animation: i3d-flip 4.6s ease-in-out infinite; }
  .tk-tool-tile:hover .icon-3d--card .icon-3d-inner { animation-duration: 1.6s; }

  /* DISC (wheel/spinner) */
  .icon-3d--disc .icon-3d-inner { animation: i3d-spin-y 7s linear infinite; }
  .tk-tool-tile:hover .icon-3d--disc .icon-3d-inner { animation-duration: 2s; }

  /* SHIELD (stats) */
  .icon-3d--shield .icon-3d-inner { animation: i3d-float 6s ease-in-out infinite; }

  /* SWORDS (initiative) */
  .icon-3d--swords .icon-3d-inner { animation: i3d-spin-y 5s linear infinite; }
  .tk-tool-tile:hover .icon-3d--swords .icon-3d-inner { animation-duration: 1.6s; }

  /* SCROLL (GM tables) */
  .icon-3d--scroll .icon-3d-inner { animation: i3d-float 7s ease-in-out infinite; }

  /* CLOCK (timers) */
  .icon-3d--clock .clock-hand { animation: i3d-spin 6s linear infinite; transform-origin: 50% 50%; }

  /* SPHERE (8-ball) */
  .icon-3d--sphere .icon-3d-inner { animation: i3d-spin 10s linear infinite; }

  /* STACK (groups, layers) */
  .icon-3d--stack .icon-3d-inner { animation: i3d-float 5s ease-in-out infinite; }

  /* KEY (JWT/security) */
  .icon-3d--key .icon-3d-inner { animation: i3d-spin-x 6s linear infinite; }

  /* LOCK (encode) */
  .icon-3d--lock .icon-3d-inner { animation: i3d-pulse 2.2s ease-in-out infinite; }

  /* ID (UUID) */
  .icon-3d--id .icon-3d-inner { animation: i3d-spin-y 5s linear infinite; }

  /* WAVE (fitness/timer) */
  .icon-3d--wave .wave-line { animation: wave-draw 1.8s ease-in-out infinite; }
}

/* CUBE faces */
.icon-3d--cube .face {
  position: absolute; inset: 0;
  border-radius: 9px;
  background: var(--scn-grad, var(--gradient-primary));
  border: 1px solid rgba(255,255,255,0.22);
  box-shadow: inset 0 0 18px rgba(0,0,0,0.12);
  display: flex; align-items: center; justify-content: center;
  font-family: 'Inter Tight', sans-serif;
  font-weight: 800; color: #fff;
  font-size: 1.05rem;
}
.icon-3d--cube .f-front  { transform: translateZ(26px); }
.icon-3d--cube .f-back   { transform: rotateY(180deg) translateZ(26px); }
.icon-3d--cube .f-right  { transform: rotateY(90deg) translateZ(26px); }
.icon-3d--cube .f-left   { transform: rotateY(-90deg) translateZ(26px); }
.icon-3d--cube .f-top    { transform: rotateX(90deg) translateZ(26px); }
.icon-3d--cube .f-bottom { transform: rotateX(-90deg) translateZ(26px); }
.icon-3d--cube .face { font-size: 0.85rem; border-radius: 7px; }

/* CARD */
.icon-3d--card { perspective: 480px; }
.icon-3d--card .face {
  position: absolute; inset: 8px 16px;
  border-radius: 8px;
  backface-visibility: hidden;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Inter Tight', sans-serif;
  font-weight: 800; font-size: 1.4rem;
}
.icon-3d--card .f-front {
  background: #fff; color: #dc2626;
  box-shadow: 0 6px 14px rgba(0,0,0,0.25);
}
.icon-3d--card .f-back {
  background:
    repeating-linear-gradient(45deg, rgba(255,255,255,0.12) 0 4px, transparent 4px 8px),
    var(--scn-grad, var(--gradient-primary));
  color: rgba(255,255,255,0.6);
  transform: rotateY(180deg);
}

/* DISC (rotating ring) */
.icon-3d--disc .disc {
  position: absolute; inset: 0;
  border-radius: 50%;
  background: conic-gradient(
    from 0deg,
    #fbbf24 0 60deg,
    #c2410c 60deg 120deg,
    #fbbf24 120deg 180deg,
    #c2410c 180deg 240deg,
    #fbbf24 240deg 300deg,
    #c2410c 300deg 360deg
  );
  box-shadow:
    inset 0 0 0 4px rgba(0,0,0,0.15),
    inset 0 0 12px rgba(0,0,0,0.18);
}
.icon-3d--disc .disc-hub {
  position: absolute;
  top: 50%; left: 50%;
  width: 16px; height: 16px;
  margin: -8px 0 0 -8px;
  border-radius: 50%;
  background: #0a0a0a;
  border: 2px solid rgba(255,255,255,0.4);
}
.icon-3d--disc[data-scn="class"] .disc {
  background: conic-gradient(
    from 0deg,
    #0ea5e9 0 60deg,
    #14b8a6 60deg 120deg,
    #22c55e 120deg 180deg,
    #0ea5e9 180deg 240deg,
    #14b8a6 240deg 300deg,
    #22c55e 300deg 360deg
  );
}

/* SHIELD */
.icon-3d--shield .shield-shape {
  position: absolute; inset: 4px;
  background: var(--scn-grad, var(--gradient-primary));
  clip-path: polygon(50% 0, 100% 22%, 100% 60%, 50% 100%, 0 60%, 0 22%);
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  font-family: 'Inter Tight', sans-serif;
  font-weight: 800;
  font-size: 1.25rem;
  padding-bottom: 8px;
}
.icon-3d--shield .shield-shape::before {
  content: '';
  position: absolute;
  inset: 6px;
  clip-path: inherit;
  border: 2px solid rgba(255,255,255,0.35);
  pointer-events: none;
}

/* SWORDS — two crossed bars */
.icon-3d--swords .sword {
  position: absolute;
  top: 50%; left: 50%;
  width: 8px; height: 56px;
  background: linear-gradient(180deg, #f8fafc 0%, #94a3b8 88%, transparent 100%);
  transform-origin: 50% 50%;
  border-radius: 2px 2px 4px 4px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.4);
}
.icon-3d--swords .sword::after {
  content: '';
  position: absolute;
  top: 38px; left: -10px;
  width: 28px; height: 6px;
  background: var(--scn-grad, var(--gradient-primary));
  border-radius: 2px;
}
.icon-3d--swords .sword-1 { transform: translate(-50%, -50%) rotate(45deg); }
.icon-3d--swords .sword-2 { transform: translate(-50%, -50%) rotate(-45deg); }

/* SCROLL — stylized rectangle with curl */
.icon-3d--scroll .scroll-body {
  position: absolute;
  inset: 8px 10px;
  border-radius: 4px;
  background: linear-gradient(180deg, #fef3c7 0%, #fde68a 100%);
  box-shadow: inset 0 0 12px rgba(0,0,0,0.15), 0 4px 10px rgba(0,0,0,0.3);
}
.icon-3d--scroll .scroll-body::before,
.icon-3d--scroll .scroll-body::after {
  content: '';
  position: absolute;
  left: 0; right: 0;
  height: 8px;
  background: linear-gradient(180deg, #c2410c 0%, #92400e 100%);
}
.icon-3d--scroll .scroll-body::before { top: -8px; border-radius: 4px 4px 0 0; }
.icon-3d--scroll .scroll-body::after  { bottom: -8px; border-radius: 0 0 4px 4px; }
.icon-3d--scroll .scroll-line {
  position: absolute;
  left: 12px; right: 12px;
  height: 2px;
  background: rgba(120, 53, 15, 0.6);
  border-radius: 1px;
}
.icon-3d--scroll .scroll-line:nth-child(1) { top: 22px; }
.icon-3d--scroll .scroll-line:nth-child(2) { top: 32px; right: 26px; }
.icon-3d--scroll .scroll-line:nth-child(3) { top: 42px; }
.icon-3d--scroll .scroll-line:nth-child(4) { top: 52px; right: 32px; }

/* CLOCK */
.icon-3d--clock .clock-face {
  position: absolute; inset: 4px;
  border-radius: 50%;
  background: var(--scn-grad, var(--gradient-primary));
  box-shadow: inset 0 0 0 3px rgba(255,255,255,0.18);
}
.icon-3d--clock .clock-tick {
  position: absolute;
  top: 6px; left: 50%;
  width: 2px; height: 6px;
  margin-left: -1px;
  background: rgba(255,255,255,0.7);
}
.icon-3d--clock .clock-tick.t90  { transform: translateY(28px) rotate(90deg);  transform-origin: 50% calc(50% + -2px);}
.icon-3d--clock .clock-hand {
  position: absolute;
  top: 50%; left: 50%;
  width: 3px; height: 22px;
  background: #fff;
  margin: -22px 0 0 -1.5px;
  border-radius: 2px;
  transform-origin: 50% 100%;
}
.icon-3d--clock .clock-hand.minute {
  height: 28px;
  margin-top: -28px;
  background: rgba(255,255,255,0.7);
  width: 2px;
  margin-left: -1px;
}
.icon-3d--clock .clock-center {
  position: absolute;
  top: 50%; left: 50%;
  width: 8px; height: 8px;
  margin: -4px 0 0 -4px;
  background: #fff;
  border-radius: 50%;
  z-index: 2;
}

/* SPHERE (8-ball) */
.icon-3d--sphere .sphere {
  position: absolute; inset: 4px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 30%, #475569 0%, #1e293b 60%, #0a0a0a 100%);
  box-shadow:
    inset -8px -8px 24px rgba(0,0,0,0.55),
    inset 6px 6px 12px rgba(255,255,255,0.18);
}
.icon-3d--sphere .sphere-num {
  position: absolute;
  top: 50%; left: 50%;
  width: 28px; height: 28px;
  margin: -14px 0 0 -14px;
  background: #fff;
  color: #0a0a0a;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Inter Tight', sans-serif;
  font-weight: 800;
  font-size: 0.95rem;
}

/* STACK (groups) */
.icon-3d--stack .stack-card {
  position: absolute;
  width: 56px; height: 40px;
  left: 50%; top: 50%;
  margin: -20px 0 0 -28px;
  border-radius: 6px;
  background: var(--scn-grad, var(--gradient-primary));
  border: 1px solid rgba(255,255,255,0.25);
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}
.icon-3d--stack .s1 { transform: translateZ(-12px) translateX(-10px) translateY(8px); opacity: 0.6; }
.icon-3d--stack .s2 { transform: translateZ(0) translateX(0) translateY(0); }
.icon-3d--stack .s3 { transform: translateZ(12px) translateX(10px) translateY(-8px); }

/* KEY (JWT) */
.icon-3d--key .key-shape {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 56px; height: 20px;
  background: var(--scn-grad, var(--gradient-primary));
  border-radius: 4px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.3);
}
.icon-3d--key .key-shape::before {
  content: '';
  position: absolute;
  left: -14px; top: 50%; transform: translateY(-50%);
  width: 24px; height: 24px;
  background: var(--scn-grad, var(--gradient-primary));
  border-radius: 50%;
  border: 4px solid var(--tk-bg-top);
  box-sizing: border-box;
}
.icon-3d--key .key-shape::after {
  content: '';
  position: absolute;
  right: 4px; top: 100%;
  width: 5px; height: 8px;
  background: inherit;
  border-radius: 0 0 2px 2px;
}

/* LOCK (encode) */
.icon-3d--lock .lock-body {
  position: absolute;
  top: 30px; left: 50%; transform: translateX(-50%);
  width: 44px; height: 32px;
  background: var(--scn-grad, var(--gradient-primary));
  border-radius: 6px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.3);
}
.icon-3d--lock .lock-shackle {
  position: absolute;
  top: 8px; left: 50%; transform: translateX(-50%);
  width: 28px; height: 28px;
  border: 5px solid var(--tk-text);
  border-bottom-color: transparent;
  border-radius: 50%;
}
.icon-3d--lock .lock-keyhole {
  position: absolute;
  top: 38px; left: 50%; transform: translateX(-50%);
  width: 6px; height: 12px;
  background: var(--tk-bg-top);
  border-radius: 3px;
}

/* ID barcode (UUID) */
.icon-3d--id .id-card {
  position: absolute; inset: 8px 4px;
  background: linear-gradient(135deg, var(--tk-surface-hi), var(--tk-surface));
  border: 1px solid var(--tk-border-hi);
  border-radius: 8px;
  display: flex; flex-direction: column; gap: 4px;
  padding: 8px 10px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}
.icon-3d--id .id-line {
  height: 4px;
  border-radius: 2px;
  background: var(--scn-grad, var(--gradient-primary));
  opacity: 0.7;
}
.icon-3d--id .id-line:nth-child(2) { width: 80%; }
.icon-3d--id .id-line:nth-child(3) { width: 60%; }
.icon-3d--id .id-line:nth-child(4) { width: 90%; opacity: 0.4; }
.icon-3d--id .id-line:nth-child(5) { width: 70%; opacity: 0.4; }

/* WAVE (fitness ECG) */
.icon-3d--wave svg { width: 100%; height: 100%; }
.icon-3d--wave .wave-line {
  fill: none;
  stroke: var(--scn-grad, #ef4444);
  stroke: #ef4444;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 200;
  stroke-dashoffset: 200;
}
@keyframes wave-draw {
  0%   { stroke-dashoffset: 200; }
  60%  { stroke-dashoffset: 0; }
  100% { stroke-dashoffset: -200; }
}

/* PEN (markdown / diff) */
.icon-3d--pen .pen-paper {
  position: absolute;
  inset: 8px;
  background: var(--tk-surface-hi);
  border-radius: 6px;
  display: flex; flex-direction: column; gap: 4px;
  padding: 10px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}
.icon-3d--pen .pen-line {
  height: 3px; border-radius: 2px;
  background: var(--scn-grad, var(--gradient-primary));
  opacity: 0.7;
}
.icon-3d--pen .pen-line:nth-child(2) { width: 80%; }
.icon-3d--pen .pen-line:nth-child(3) { width: 90%; opacity: 0.4; }
.icon-3d--pen .pen-line:nth-child(4) { width: 70%; opacity: 0.4; }

/* tile-with-icon overhaul */
.tk-tool-tile {
  padding: 1.6rem 1.5rem 1.3rem;
  min-height: 200px;
  display: flex;
  flex-direction: column;
}
.tk-tool-tile-name { font-size: 1.05rem; font-weight: 600; }
.tk-tool-tile-desc { font-size: 0.86rem; color: var(--tk-text-3); margin-top: 0.3rem; }
.tk-tool-tile-head { margin-top: 0.1rem; }

/* generic input fields shared across tools */
.tk-input,
.tk-textarea,
.tk-select {
  width: 100%;
  background: var(--tk-surface);
  border: 1px solid var(--tk-border);
  border-radius: 10px;
  color: var(--tk-text);
  font-family: inherit;
  font-size: 0.95rem;
  padding: 0.75rem 0.95rem;
  outline: none;
  transition: all 180ms var(--ease-snap);
}
.tk-input:focus,
.tk-textarea:focus,
.tk-select:focus {
  border-color: rgba(102,126,234,0.55);
  background: var(--tk-surface-hi);
  box-shadow: 0 0 0 3px rgba(102,126,234,0.15);
}
.tk-textarea { font-family: 'JetBrains Mono', monospace; font-size: 0.88rem; resize: vertical; min-height: 120px; }
.tk-label {
  display: block;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--tk-text-3);
  margin-bottom: 0.45rem;
  font-weight: 500;
}

/* big result number (used by dice, etc.) */
.tk-big-result {
  font-family: 'Inter Tight', 'Inter', sans-serif;
  font-size: clamp(4.5rem, 11vw, 8rem);
  font-weight: 800;
  letter-spacing: -0.05em;
  line-height: 1;
  margin: 1.5rem 0;
  font-feature-settings: "tnum";
  background: var(--scn-grad, var(--gradient-primary));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  transition: transform 350ms var(--ease-spring);
}
.tk-big-result.is-rolling {
  filter: blur(0.5px);
  opacity: 0.9;
}
.tk-big-result.is-popped {
  animation: tk-pop 450ms var(--ease-spring);
}
@keyframes tk-pop {
  0%   { transform: scale(0.85); opacity: 0; }
  60%  { transform: scale(1.08); opacity: 1; }
  100% { transform: scale(1); }
}
.tk-big-result.is-crit { animation: tk-crit 0.9s var(--ease-spring) both; }
@keyframes tk-crit {
  0%   { transform: scale(0.85); }
  50%  { transform: scale(1.15); filter: drop-shadow(0 0 24px rgba(251,191,36,0.5)); }
  100% { transform: scale(1); filter: none; }
}
.tk-big-result.is-fail { animation: tk-fail 0.4s ease-in-out both; }
@keyframes tk-fail {
  0%, 100% { transform: translateX(0); }
  20%      { transform: translateX(-6px); }
  40%      { transform: translateX(6px); }
  60%      { transform: translateX(-4px); }
  80%      { transform: translateX(4px); }
}

/* copy button */
.tk-copy {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.35rem 0.65rem;
  background: var(--tk-surface);
  border: 1px solid var(--tk-border);
  border-radius: 8px;
  font-size: 0.78rem;
  color: var(--tk-text-2);
  cursor: pointer;
  transition: all 180ms var(--ease-snap);
}
.tk-copy:hover { color: var(--tk-text); border-color: var(--tk-border-hi); }
.tk-copy.is-done { color: #22c55e; border-color: rgba(34,197,94,0.4); }

@media (max-width: 720px) {
  .tk-stage { padding: 2rem 1.2rem; min-height: 380px; }
  .tk-tool-hero { padding: 1rem 5% 1.5rem; }
  .tk-content { padding: 2.5rem 5%; }
}

/* =========================================================
   Per-tool feedback widget (injected by tool-common.js)
   ========================================================= */
.tk-tool-feedback {
  max-width: 720px;
  margin: 0 auto;
  padding: 0 5% 4rem;
}
.tk-tool-feedback-inner {
  background: var(--tk-surface);
  border: 1px solid var(--tk-border);
  border-radius: 16px;
  padding: 1.2rem 1.4rem;
}
.tfb-head {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  margin-bottom: 0.8rem;
}
.tfb-head strong {
  font-family: 'Inter Tight', sans-serif;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--tk-text);
}
.tfb-head span {
  font-size: 0.86rem;
  color: var(--tk-text-2);
  line-height: 1.5;
}
.tfb-form { display: flex; flex-direction: column; gap: 0.55rem; }
.tfb-msg, .tfb-email {
  width: 100%;
  background: var(--tk-bg-bottom);
  border: 1px solid var(--tk-border);
  border-radius: 10px;
  color: var(--tk-text);
  font-family: inherit;
  font-size: 0.92rem;
  padding: 0.7rem 0.9rem;
  outline: none;
  transition: border-color 180ms var(--ease-snap), background 180ms var(--ease-snap);
}
.tfb-msg { resize: vertical; min-height: 56px; }
.tfb-msg:focus, .tfb-email:focus {
  border-color: rgba(102,126,234,0.55);
  background: var(--tk-surface);
  box-shadow: 0 0 0 3px rgba(102,126,234,0.15);
}
.tfb-row { display: flex; gap: 0.5rem; align-items: stretch; flex-wrap: wrap; }
.tfb-row .tfb-email { flex: 1; min-width: 200px; }
.tfb-submit {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 0.45rem;
  padding: 0.7rem 1.4rem;
  font-family: 'Inter Tight', sans-serif;
  font-size: 0.92rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: #fff;
  background: var(--scn-grad, var(--gradient-primary));
  border: 0;
  border-radius: 10px;
  cursor: pointer;
  transition: transform 160ms var(--ease-snap), filter 160ms var(--ease-snap);
}
.tfb-submit:hover { transform: translateY(-1px); filter: brightness(1.08); }
.tfb-submit:active { transform: translateY(0); }
.tfb-submit:disabled { opacity: 0.6; cursor: not-allowed; transform: none; }
.tfb-submit .tfb-submit-spinner { display: none; width: 13px; height: 13px; border: 2px solid rgba(255,255,255,0.4); border-top-color: #fff; border-radius: 50%; animation: spin 0.9s linear infinite; }
.tfb-submit.is-loading .tfb-submit-label { display: none; }
.tfb-submit.is-loading .tfb-submit-spinner { display: inline-block; }
.tfb-hp { position: absolute !important; left: -9999px !important; height: 0; width: 0; opacity: 0; }
.tfb-status {
  margin-top: 0.7rem;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.82rem;
  color: var(--tk-text-3);
  min-height: 1.2em;
}
.tfb-status.is-success { color: #22c55e; }
.tfb-status.is-error   { color: #f87171; }
@media (max-width: 600px) {
  .tk-tool-feedback { padding: 0 5% 3rem; }
  .tk-tool-feedback-inner { padding: 1rem 1.1rem; }
  .tfb-row { flex-direction: column; }
  .tfb-row .tfb-email { min-width: 0; }
  .tfb-submit { width: 100%; }
}