/* Moritz Tools – Glas-Design nach dem Zeittracker:
   gefrostete Platten mit polierter Kante und violettem Licht darunter, leuchtende dunkle Tasten,
   vertiefte Felder, weicher farbiger Hintergrund. Hell & dunkel. */
:root {
  --text: #2C202F; --muted: #6D656C; --faint: #A5A1A6;
  --violet: #6B66F2; --pink: #D259C8;
  --g1: #FF9A3C; --g2: #F0508F; --g3: #A44DF0; --g4: #4F7BFF;
  --glow: linear-gradient(90deg, var(--g1), var(--g2), var(--g3), var(--g4));
  --bg1: #F7F5FA; --bg2: #E4E0EE;
  --slab-top: rgba(255, 255, 255, .74); --slab-bot: rgba(241, 238, 244, .58);
  --edge-top: rgba(255, 255, 255, 1); --edge-bot: rgba(0, 0, 0, .06);
  --thick: rgba(196, 193, 250, .75); --underlight: rgba(107, 102, 242, .42); --drop: rgba(44, 32, 47, .16);
  --recess: rgba(233, 230, 236, .75); --recess-edge: rgba(109, 101, 108, .28);
  --key-face: linear-gradient(180deg, #3A2E3F, #1A121C);
  --ok: #2FB98F; --check: #E8932E; --est: #A44DF0; --bad: #E5487F;
  --radius: 22px;
  --mono: ui-monospace, "SF Mono", Menlo, monospace;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --text: #F3EFF7; --muted: #B0A8B8; --faint: #756C7D;
    --bg1: #1D1822; --bg2: #120E15;
    --slab-top: rgba(43, 36, 49, .88); --slab-bot: rgba(26, 21, 30, .92);
    --edge-top: rgba(255, 255, 255, .32); --edge-bot: rgba(0, 0, 0, .35);
    --thick: rgba(52, 44, 82, .95); --underlight: rgba(107, 102, 242, .5); --drop: rgba(0, 0, 0, .4);
    --recess: rgba(0, 0, 0, .28); --recess-edge: rgba(0, 0, 0, .45);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --text: #F3EFF7; --muted: #B0A8B8; --faint: #756C7D;
  --bg1: #1D1822; --bg2: #120E15;
  --slab-top: rgba(43, 36, 49, .88); --slab-bot: rgba(26, 21, 30, .92);
  --edge-top: rgba(255, 255, 255, .32); --edge-bot: rgba(0, 0, 0, .35);
  --thick: rgba(52, 44, 82, .95); --underlight: rgba(107, 102, 242, .5); --drop: rgba(0, 0, 0, .4);
  --recess: rgba(0, 0, 0, .28); --recess-edge: rgba(0, 0, 0, .45);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100vh; color: var(--text);
  font: 15px/1.5 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", "Segoe UI", system-ui, sans-serif;
  background: linear-gradient(180deg, var(--bg1), var(--bg2));
  background-attachment: fixed;
  font-variant-numeric: tabular-nums;
}
/* farbige Lichtflecken im Hintergrund */
body::before {
  content: ""; position: fixed; inset: -20vmax; z-index: -1; pointer-events: none;
  background:
    radial-gradient(40vmax 40vmax at 15% 10%, color-mix(in srgb, var(--g4) var(--blob, 26%), transparent), transparent 70%),
    radial-gradient(44vmax 44vmax at 88% 28%, color-mix(in srgb, var(--g3) var(--blob, 24%), transparent), transparent 70%),
    radial-gradient(42vmax 42vmax at 72% 98%, color-mix(in srgb, var(--g1) var(--blob, 26%), transparent), transparent 70%),
    radial-gradient(32vmax 32vmax at 8% 88%, color-mix(in srgb, var(--g2) var(--blob, 18%), transparent), transparent 70%);
  filter: blur(10px);
}
a { color: inherit; }
.wrap { max-width: 860px; margin: 0 auto; padding: 28px 16px 160px; min-height: 100vh; display: flex; flex-direction: column; justify-content: center; }
:focus-visible { outline: 2px solid color-mix(in srgb, var(--violet) 70%, transparent); outline-offset: 3px; }

/* ---------- Glasplatte */
.slab {
  position: relative; border-radius: var(--radius);
  background: linear-gradient(180deg, var(--slab-top), var(--slab-bot));
  -webkit-backdrop-filter: blur(22px) saturate(1.4); backdrop-filter: blur(22px) saturate(1.4);
  box-shadow:
    0 5px 0 -0.5px var(--thick),                 /* Stärke der Platte */
    0 16px 26px -12px var(--underlight),         /* violettes Licht darunter */
    0 22px 30px -18px var(--drop);               /* Schatten */
}
.slab::before { /* polierte Kante: oben hell, unten weich */
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.2px; pointer-events: none;
  background: linear-gradient(180deg, var(--edge-top), color-mix(in srgb, var(--edge-top) 35%, transparent) 35%, var(--edge-bot));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}

/* ---------- vertiefte Fläche (Felder) */
.recess {
  background: var(--recess); border-radius: 14px; border: 1px solid transparent;
  box-shadow: inset 0 1px 0 var(--recess-edge), inset 0 -1px 0 rgba(255, 255, 255, .5);
}

/* ---------- leuchtende Taste */
.key {
  position: relative; display: inline-flex; align-items: center; gap: 10px; cursor: pointer;
  font: 600 15px/1 inherit; font-family: inherit; color: #fff; border: 0; padding: 0 0 5px; border-radius: 16px;
  background: var(--glow);
}
.key > span {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; width: 100%;
  padding: 14px 22px; border-radius: 16px; background: var(--key-face);
  box-shadow: inset 0 1.3px 0 rgba(255, 255, 255, .45), inset 0 -1.3px 0 color-mix(in srgb, var(--g2) 90%, transparent);
  position: relative; overflow: hidden;
}
.key > span::after { content: ""; position: absolute; inset: 45% 0 0; background: linear-gradient(transparent, color-mix(in srgb, var(--g2) 35%, transparent)); pointer-events: none; }
.key::after { content: ""; position: absolute; inset: 8px 4px -8px; border-radius: 18px; background: var(--glow); filter: blur(16px); opacity: .7; z-index: -1; }
.key:hover:not(:disabled) > span { filter: brightness(1.12); }
.key:active:not(:disabled) { transform: scale(.98); }
.key:disabled { cursor: not-allowed; filter: saturate(.2); opacity: .55; }
.key kbd { font: 600 11px/1 var(--mono); color: rgba(255, 255, 255, .7); border: 1px solid rgba(255, 255, 255, .25); border-radius: 5px; padding: 3px 5px; position: relative; z-index: 1; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .key > span { background: linear-gradient(90deg, color-mix(in srgb, var(--g2) 85%, #000), color-mix(in srgb, var(--g3) 85%, #000)); box-shadow: inset 0 1.3px 0 rgba(255, 255, 255, .8); }
}

/* ---------- kleine Glas-Taste */
.btn {
  font: 600 14px/1 inherit; font-family: inherit; color: var(--text); cursor: pointer;
  border: 0; border-radius: 12px; padding: 11px 16px;
  background: linear-gradient(180deg, var(--slab-top), var(--slab-bot));
  box-shadow: 0 3px 0 -0.5px var(--thick), inset 0 1px 0 var(--edge-top), inset 0 -1px 0 var(--edge-bot), 0 8px 14px -10px var(--underlight);
}
.btn:hover:not(:disabled) { filter: brightness(1.04); }
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn.ghost { background: transparent; box-shadow: none; color: var(--muted); }

kbd.k {
  display: inline-grid; place-items: center; min-width: 26px; height: 24px; padding: 0 6px;
  font: 600 12px/1 var(--mono); color: var(--muted); border-radius: 7px; background: var(--recess);
  box-shadow: inset 0 1px 0 var(--recess-edge), inset 0 -1px 0 rgba(255, 255, 255, .5);
}
.dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex: 0 0 auto; }
.crumbs { font-size: 13px; color: var(--muted); text-decoration: none; }
.crumbs:hover { color: var(--text); }

/* ---------- Fuß jedes Tools (assets/share.js): Teilen-Leiste, darunter ggf. .stats */
.wrap.has-foot { position: relative; padding-bottom: 200px; }
.tool-foot { position: absolute; left: 16px; right: 16px; bottom: 44px; display: flex; flex-direction: column; align-items: center; gap: 22px; }
.share { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }
.share p { margin: 0; font-size: 12.5px; color: var(--muted); }
.share p b { color: var(--text); font-weight: 650; }
.share-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.share .btn { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; padding: 7px 11px; border-radius: 10px; text-decoration: none; }
.share svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; color: var(--violet); }
.share .btn.done svg { color: var(--ok); }
@media (max-width: 600px) { .wrap.has-foot { padding-bottom: 230px; } .share-row { gap: 6px; } }