/* ZapText — liquid glass */
:root {
  --bg: #eef1f8;
  --text: #0b0d14;
  --muted: rgba(11, 13, 20, .58);
  --glass: rgba(255, 255, 255, .42);
  --glass-strong: rgba(255, 255, 255, .62);
  --glass-inset: rgba(255, 255, 255, .35);
  --edge: rgba(255, 255, 255, .85);
  --edge-dim: rgba(255, 255, 255, .35);
  --shadow: 0 1px 0 rgba(255, 255, 255, .6) inset, 0 20px 50px -18px rgba(40, 50, 90, .35), 0 2px 8px rgba(40, 50, 90, .08);
  --accent: #6d5cff;
  --accent2: #2f8bff;
  --good: #0f9d58; --warn: #c27a00; --bad: #e0244f;
  --orb1: #8f7bff; --orb2: #3fb5ff; --orb3: #ff8ad8; --orb4: #6ef2c2;
  --radius: 28px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #07080d;
    --text: #f3f5fb;
    --muted: rgba(243, 245, 251, .58);
    --glass: rgba(255, 255, 255, .07);
    --glass-strong: rgba(255, 255, 255, .12);
    --glass-inset: rgba(255, 255, 255, .06);
    --edge: rgba(255, 255, 255, .32);
    --edge-dim: rgba(255, 255, 255, .1);
    --shadow: 0 1px 0 rgba(255, 255, 255, .14) inset, 0 24px 60px -20px rgba(0, 0, 0, .7), 0 2px 10px rgba(0, 0, 0, .3);
    --accent: #8b7bff;
    --accent2: #4fa3ff;
    --good: #3ddc84; --warn: #ffbf47; --bad: #ff6b8b;
    --orb1: #5b3cff; --orb2: #0a84ff; --orb3: #c2187f; --orb4: #0fae7f;
  }
}
:root[data-theme="dark"] {
  --bg: #07080d; --text: #f3f5fb; --muted: rgba(243, 245, 251, .58);
  --glass: rgba(255, 255, 255, .07); --glass-strong: rgba(255, 255, 255, .12); --glass-inset: rgba(255, 255, 255, .06);
  --edge: rgba(255, 255, 255, .32); --edge-dim: rgba(255, 255, 255, .1);
  --shadow: 0 1px 0 rgba(255, 255, 255, .14) inset, 0 24px 60px -20px rgba(0, 0, 0, .7), 0 2px 10px rgba(0, 0, 0, .3);
  --accent: #8b7bff; --accent2: #4fa3ff; --good: #3ddc84; --warn: #ffbf47; --bad: #ff6b8b;
  --orb1: #5b3cff; --orb2: #0a84ff; --orb3: #c2187f; --orb4: #0fae7f;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Helvetica Neue", Inter, system-ui, sans-serif;
  background: var(--bg); color: var(--text); min-height: 100vh;
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}

/* ---------- living backdrop: the glass needs something to refract ---------- */
.backdrop { position: fixed; inset: 0; z-index: -1; overflow: hidden; }
.orb { position: absolute; border-radius: 50%; filter: blur(70px); opacity: .75; will-change: transform; }
.o1 { width: 48vw; height: 48vw; background: var(--orb1); top: -14vw; left: -10vw; animation: drift1 26s ease-in-out infinite; }
.o2 { width: 40vw; height: 40vw; background: var(--orb2); top: 10vh; right: -12vw; animation: drift2 31s ease-in-out infinite; }
.o3 { width: 34vw; height: 34vw; background: var(--orb3); bottom: -12vw; left: 22vw; animation: drift3 36s ease-in-out infinite; opacity: .55; }
.o4 { width: 26vw; height: 26vw; background: var(--orb4); bottom: 6vh; right: 14vw; animation: drift1 40s ease-in-out infinite reverse; opacity: .45; }
@keyframes drift1 { 50% { transform: translate(8vw, 6vh) scale(1.1); } }
@keyframes drift2 { 50% { transform: translate(-10vw, 10vh) scale(.92); } }
@keyframes drift3 { 50% { transform: translate(6vw, -8vh) scale(1.08); } }
@media (prefers-reduced-motion: reduce) { .orb { animation: none; } }

/* ---------- the material ---------- */
.glass {
  position: relative;
  background: var(--glass);
  -webkit-backdrop-filter: blur(28px) saturate(180%);
  backdrop-filter: blur(28px) saturate(180%);
  border: 1px solid var(--edge-dim);
  box-shadow: var(--shadow);
  isolation: isolate;
}
/* specular rim: bright top-left edge fading around the shape */
.glass::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none;
  background: linear-gradient(140deg, var(--edge) 0%, transparent 32%, transparent 68%, var(--edge-dim) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}
/* soft sheen across the top */
.glass::after {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 46%; border-radius: inherit; pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, .16), transparent);
  z-index: -1;
}
.glass-inset {
  background: var(--glass-inset);
  border: 1px solid var(--edge-dim);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .08);
}

/* ---------- layout ---------- */
.topbar {
  position: sticky; top: 14px; z-index: 10;
  margin: 14px auto 0; width: min(1160px, calc(100% - 32px));
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 12px 10px 18px; border-radius: 999px;
}
.logo { font-size: 19px; font-weight: 700; letter-spacing: -.4px; display: flex; align-items: center; gap: 8px; }
.logo .mark {
  display: grid; place-items: center; width: 30px; height: 30px; border-radius: 10px; font-size: 15px;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset, 0 6px 14px -4px var(--accent);
}
.tint { color: var(--accent); }
.chip {
  font-size: 12px; color: var(--muted); padding: 6px 12px; border-radius: 999px;
  background: var(--glass-inset); border: 1px solid var(--edge-dim); white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; max-width: 60vw;
}
.chip.warn { color: var(--warn); }

.hero { width: min(1160px, calc(100% - 32px)); margin: 0 auto; padding: 56px 4px 28px; }
.hero h1 { font-size: clamp(36px, 6vw, 64px); line-height: 1.02; letter-spacing: -.035em; font-weight: 800; }
.grad {
  background: linear-gradient(100deg, var(--accent) 10%, var(--accent2) 55%, var(--orb3) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.tagline { color: var(--muted); margin-top: 14px; font-size: 17px; line-height: 1.5; max-width: 560px; }

main { width: min(1160px, calc(100% - 32px)); margin: 0 auto; }
.grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 900px) { .grid { grid-template-columns: 1fr; } .hero { padding-top: 36px; } }

.card { border-radius: var(--radius); padding: 20px; display: flex; flex-direction: column; min-width: 0; }
.card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin: 2px 4px 14px; }
.card h2 { font-size: 13px; font-weight: 600; letter-spacing: .02em; text-transform: uppercase; color: var(--muted); }

textarea {
  width: 100%; min-height: 340px; color: var(--text);
  background: var(--glass-inset); border: 1px solid var(--edge-dim); border-radius: 20px;
  padding: 16px 18px; font-size: 15.5px; line-height: 1.65; resize: vertical; font-family: inherit;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, .08);
  transition: border-color .2s, box-shadow .2s;
}
textarea::placeholder { color: var(--muted); }
textarea:focus { outline: none; border-color: color-mix(in srgb, var(--accent) 60%, transparent); box-shadow: inset 0 1px 3px rgba(0, 0, 0, .08), 0 0 0 4px color-mix(in srgb, var(--accent) 22%, transparent); }

.empty {
  min-height: 340px; display: flex; flex-direction: column; gap: 10px; align-items: center; justify-content: center;
  color: var(--muted); font-size: 15px; border-radius: 20px;
  background: var(--glass-inset); border: 1px dashed var(--edge-dim);
}
.empty-icon { font-size: 26px; opacity: .6; }

/* ---------- controls ---------- */
button { font-family: inherit; -webkit-tap-highlight-color: transparent; }
.btnrow { display: flex; gap: 10px; margin-top: 14px; align-items: center; flex-wrap: wrap; }
.segmented { display: inline-flex; padding: 4px; border-radius: 999px; gap: 2px; }
.ghost-btn {
  background: transparent; color: var(--text); border: none; border-radius: 999px;
  padding: 9px 16px; font-size: 14px; font-weight: 500; cursor: pointer;
  transition: background .18s, transform .12s;
}
.ghost-btn:hover:enabled { background: var(--glass-strong); }
.ghost-btn:active:enabled { transform: scale(.96); }
.primary-btn {
  position: relative; margin-left: auto; cursor: pointer;
  color: #fff; font-size: 15.5px; font-weight: 650; letter-spacing: -.01em;
  padding: 13px 28px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .35);
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  box-shadow: 0 1px 0 rgba(255, 255, 255, .55) inset, 0 -8px 16px -8px rgba(0, 0, 0, .25) inset,
              0 12px 28px -10px color-mix(in srgb, var(--accent) 80%, transparent);
  transition: transform .15s cubic-bezier(.3, .7, .4, 1.4), box-shadow .2s, filter .2s;
}
.primary-btn::after {
  content: ""; position: absolute; inset: 1px 1px 50% 1px; border-radius: 999px 999px 40px 40px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .35), transparent); pointer-events: none;
}
.primary-btn:hover:enabled { transform: translateY(-1px) scale(1.02); filter: brightness(1.06); }
.primary-btn:active:enabled { transform: scale(.97); }
.primary-btn:disabled, .ghost-btn:disabled { opacity: .45; cursor: not-allowed; }
.primary-btn.busy { animation: pulse 1.4s ease-in-out infinite; }
@keyframes pulse { 50% { filter: brightness(1.25) saturate(1.2); } }

/* ---------- results ---------- */
.meta, .status { font-size: 13px; color: var(--muted); }
.err { color: var(--bad); font-size: 13.5px; min-height: 18px; margin: 10px 4px 0; }
.note { font-size: 12.5px; color: var(--muted); margin: 8px 4px 0; }
.badge {
  display: none; font-size: 13px; font-weight: 600; padding: 8px 14px; border-radius: 999px;
  margin-top: 14px; width: fit-content; max-width: 100%;
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border: 1px solid var(--edge-dim);
}
.badge.pass { display: block; background: color-mix(in srgb, var(--good) 18%, transparent); color: var(--good); }
.badge.fail { display: block; background: color-mix(in srgb, var(--bad) 16%, transparent); color: var(--bad); }
.badge.warn { display: block; background: color-mix(in srgb, var(--warn) 18%, transparent); color: var(--warn); }
.badge.nover { display: block; background: var(--glass-inset); color: var(--muted); }

.flagged { list-style: none; margin-top: 12px; display: flex; flex-direction: column; gap: 8px; }
.flagged li {
  font-size: 13px; color: var(--text); line-height: 1.5;
  background: var(--glass-inset); border: 1px solid var(--edge-dim); border-radius: 16px; padding: 10px 14px;
}
.flagged .ai { color: var(--warn); font-weight: 700; margin-right: 6px; }

footer { width: min(1160px, calc(100% - 32px)); margin: 0 auto; padding: 22px 4px 48px; color: var(--muted); font-size: 12.5px; text-align: center; }

@media (max-width: 520px) {
  .topbar { top: 8px; padding-left: 14px; }
  .chip { max-width: 46vw; }
  .card { padding: 14px; border-radius: 24px; }
  textarea, .empty { min-height: 260px; }
  .primary-btn { width: 100%; margin-left: 0; }
  .segmented { width: 100%; justify-content: space-between; }
}