/* B7oothKw Humanizer — dark workspace, modelled on the Grade A humanizer.
   Self-contained: scoped to body.hz-page so it overrides the light styles.css. */

/* ---- login prompt modal (shown to guests on a tool action) ---- */
.b7-ovl{position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;padding:20px;
  background:rgba(8,10,16,.62);backdrop-filter:blur(3px);animation:b7fade .15s ease}
@keyframes b7fade{from{opacity:0}to{opacity:1}}
.b7-modal{width:100%;max-width:380px;text-align:center;padding:28px 26px;border-radius:16px;
  background:var(--panel,var(--card,#fff));border:1px solid var(--line,#e8e6ea);
  box-shadow:0 24px 60px rgba(0,0,0,.5);animation:b7pop .2s cubic-bezier(.2,1.2,.4,1)}
@keyframes b7pop{from{transform:translateY(8px) scale(.97);opacity:0}to{transform:none;opacity:1}}
.b7-modal-ic{font-size:34px;margin-bottom:8px}
.b7-modal h3{margin:0 0 8px;font-size:20px;letter-spacing:-.01em;color:var(--ink,#16161a)}
.b7-modal p{margin:0 0 20px;font-size:14px;line-height:1.55;color:var(--mut,var(--muted,#6e6e78))}
.b7-row{display:flex;gap:10px;justify-content:center}
.b7-row .btn{padding:11px 22px}

/* ---- guest link on the login page ---- */
.guest-link{width:100%;display:flex;align-items:center;justify-content:center;gap:10px;margin:14px 0 0;padding:15px;
  background:var(--panel2);border:1px solid var(--line2);border-radius:12px;color:var(--ink);
  font-family:inherit;font-weight:650;font-size:16px;cursor:pointer;transition:.15s}
.guest-link:hover{border-color:var(--acc);background:var(--panel)}
.guest-link svg{width:20px;height:20px;flex:none}
.guest-note{text-align:center;color:var(--faint);font-size:13.5px;margin:12px 0 0}

/* email / password auth */
.auth-tabs{display:flex;gap:6px;background:var(--panel2);border:1px solid var(--line2);border-radius:12px;padding:6px;margin-bottom:16px}
.auth-tab{flex:1;background:none;border:0;font-family:inherit;font-weight:700;font-size:15.5px;color:var(--mut);padding:11px;border-radius:9px;cursor:pointer;transition:.15s}
.auth-tab:hover{color:var(--ink)}
.auth-tab.on{background:linear-gradient(135deg,var(--acc),var(--acc2));color:#fff}
.auth-input{width:100%;padding:15px 16px;border-radius:12px;border:1px solid var(--line2);background:var(--panel2);
  color:var(--ink);font-family:inherit;font-size:16px;outline:none;transition:border-color .15s;margin-bottom:12px}
.auth-input:focus{border-color:var(--acc)}
.auth-input::placeholder{color:var(--faint)}
.code-input{letter-spacing:.35em;text-align:center;font-weight:700}
.auth-btn{width:100%;justify-content:center;margin-top:2px;font-size:16px;padding:15px}
.auth-row{text-align:center;font-size:14px;color:var(--mut);margin-top:14px}
.auth-row a{color:var(--acc2);font-weight:600;text-decoration:none;cursor:pointer}
.auth-row a:hover{text-decoration:underline}
.auth-note{font-size:14px;color:var(--mut);margin-bottom:14px;text-align:center;line-height:1.5}

/* ---- theme toggle (in every topbar) ---- */
.topbar-right{display:flex;align-items:center;gap:12px}

/* ---- responsive top bar (phones): keep everything on one row, no overflow ---- */
@media(max-width:640px){
  .topbar{padding-left:14px;padding-right:14px;gap:8px;flex-wrap:wrap;row-gap:10px}
  .bar-top{gap:10px;min-width:0;flex-wrap:wrap}
  .topbar-right{gap:8px}
  .logo-svg{height:42px}
  .back-link{padding:7px 12px;font-size:13px}
  .theme-toggle{width:34px;height:34px;font-size:15px}
  .wa-link{padding:8px 10px}
  .wa-link span{display:none}              /* icon-only WhatsApp on small screens */
  .hz-page .hz-tab{padding:8px 14px;font-size:13.5px}
  .hz-page .hz-tab svg{width:16px;height:16px}
}
@media(max-width:380px){
  .hz-page .hz-tab span,.hz-page .hz-tab{gap:6px}
  .back-link .bk-arrow{margin-right:-2px}
}
.theme-toggle{width:38px;height:38px;display:inline-flex;align-items:center;justify-content:center;font-size:17px;
  cursor:pointer;border-radius:10px;background:#fff;border:1.5px solid #e8e6ea;color:#1a1a1f;transition:.15s;line-height:1}
.theme-toggle:hover{border-color:#ff3131;transform:translateY(-1px)}
.hz-page .theme-toggle{background:var(--panel2);border-color:var(--line2);color:var(--ink)}
.hz-page .theme-toggle:hover{border-color:var(--acc)}
body.dark .theme-toggle{background:#161b26;border-color:#2c3645;color:#e8edf4}
body.dark .theme-toggle:hover{border-color:#ff3131}

/* ================= LIGHT theme for the dark hz-pages ================= */
body.hz-page.light{
  --bg:#f4f6fb; --bg2:#eceff5; --panel:#ffffff; --panel2:#eef2f8;
  --line:#e3e7f0; --line2:#d2d9e6;
  --ink:#1b2230; --mut:#586577; --faint:#97a1b3;
  background:
    radial-gradient(1100px 520px at 82% -10%, rgba(255,49,49,.08), transparent 60%),
    radial-gradient(900px 520px at 6% 108%, rgba(255,106,77,.05), transparent 55%),
    var(--bg);
  background-color:var(--bg);
}
body.hz-page.light .lg-cap,body.hz-page.light .lg-must,body.hz-page.light .lg-word{fill:#16161a}
body.hz-page.light .sent.human{color:#157a2c}
body.hz-page.light .sent.mid{color:#8a6410}
body.hz-page.light .sent.ai{color:#c12418}
body.hz-page.light .btn-ghost:hover:not(:disabled){background:#e2e8f2;border-color:#cfd6e3}
body.hz-page.light .hz-bar{background:#eceff5}
body.hz-page.light .pp-drop:hover{background:#fff}
body.hz-page.light .pane{box-shadow:0 16px 44px -28px rgba(20,30,60,.4)}
body.hz-page.light .chip,body.hz-page.light .chip-x{background:#eef2f8}

/* ---- login page ---- */
.hz-page .login-wrap{max-width:520px;margin:0 auto;padding:clamp(20px,5vh,40px) clamp(18px,5vw,24px) 60px}
.login-card{background:linear-gradient(180deg,var(--panel),var(--bg2));border:1px solid var(--line);
  border-radius:20px;padding:42px 40px;box-shadow:0 18px 50px rgba(0,0,0,.4)}
.hz-page.light .login-card{box-shadow:0 18px 50px -20px rgba(20,30,60,.45)}
.login-card h1{font-size:30px;margin:0 0 8px;text-align:center;letter-spacing:-.02em;color:var(--ink)}
.login-card .sub{text-align:center;color:var(--mut);font-size:15.5px;margin:0 0 28px}
.gbtn{width:100%;display:flex;align-items:center;justify-content:center;gap:12px;
  background:var(--panel2);border:1px solid var(--line2);border-radius:12px;color:var(--ink);
  font-family:inherit;font-size:16px;font-weight:650;padding:15px;cursor:pointer;transition:.15s;position:relative}
.gbtn-g{flex:0 0 auto;width:20px;height:20px}
.gbtn:hover{border-color:var(--acc);background:var(--panel)}
.gbtn-g{flex:0 0 auto}
.gbtn.loading{color:transparent}
.gbtn.loading .gbtn-g{opacity:0}
.gbtn.loading::after{content:"";position:absolute;top:50%;left:50%;width:16px;height:16px;margin:-8px 0 0 -8px;
  border-radius:50%;border:2px solid var(--line2);border-top-color:var(--acc);animation:spin .7s linear infinite}
.login-or{display:flex;align-items:center;gap:12px;color:var(--faint);font-size:12px;margin:24px 0;
  text-transform:uppercase;letter-spacing:.12em}
.login-or[hidden]{display:none}      /* respect the hidden attribute (overrides display:flex) */
.login-or::before,.login-or::after{content:"";flex:1;height:1px;background:var(--line)}
.field{margin-bottom:14px}
.field label{display:block;font-size:13px;font-weight:600;color:var(--mut);margin-bottom:6px}
.field input{width:100%;padding:13px 14px;border-radius:11px;border:1px solid var(--line2);background:var(--panel2);
  color:var(--ink);font-family:inherit;font-size:15px;outline:none;transition:border-color .15s}
.field input:focus{border-color:var(--acc)}
.field input::placeholder{color:var(--faint)}
.login-card .btn-primary{width:100%;justify-content:center;margin-top:2px}
.otp-input{letter-spacing:.5em;text-align:center;font-size:20px!important;font-weight:700}
.login-msg{min-height:1.2em;font-size:13.5px;font-weight:600;color:var(--acc2);margin-top:14px;text-align:center}
.login-msg:empty{display:none;min-height:0;margin:0}   /* no reserved space when there's no message */
.login-msg.ok{color:var(--ok)}
.login-back{display:inline-block;margin:10px 8px 0;color:var(--mut);font-size:13px;cursor:pointer;
  background:none;border:none;font-family:inherit}
.login-back:hover{color:var(--ink)}

/* ---- back button (works on both light narrator + dark humanizer) ---- */
.back-link{display:inline-flex;align-items:center;gap:6px;font-weight:700;font-size:14px;text-decoration:none;
  white-space:nowrap;padding:8px 15px;border-radius:999px;transition:.15s;color:#6e6e78;border:1.5px solid #e8e6ea;background:#fff}
.back-link:hover{color:#1a1a1f;border-color:#ff3131}
.back-link .bk-arrow{font-size:17px;line-height:1;margin-top:-1px}
body.dark .back-link{color:#8b97a8;border-color:#2c3645;background:#161b26}
body.dark .back-link:hover{color:#e8edf4;border-color:#ff3131}

/* ---- home chooser ---- */
.home-wrap{max-width:900px;margin:0 auto;padding:46px clamp(18px,5vw,60px) 80px}
.home-head{text-align:center;margin:6px 0 38px}
.home-head h1{font-size:clamp(28px,5vw,46px);font-weight:850;letter-spacing:-.025em;margin:0 0 10px;color:#16161a}
.home-head p{font-size:17px;margin:0;color:#6e6e78}
.home-cards{display:grid;grid-template-columns:1fr 1fr;gap:22px}
@media(max-width:720px){.home-cards{grid-template-columns:1fr}}
.home-card{display:flex;flex-direction:column;gap:13px;text-decoration:none;padding:30px 26px;border-radius:18px;
  background:#fff;border:1.5px solid #e8e6ea;box-shadow:0 16px 44px -24px rgba(20,20,23,.5);position:relative;overflow:hidden;
  transition:transform .24s cubic-bezier(.34,1.4,.5,1),border-color .2s,box-shadow .24s;animation:home-in .5s both}
/* hover (desktop) AND active (mobile tap) trigger the same effects */
.home-card:hover,.home-card:active{transform:translateY(-6px) scale(1.014);border-color:#ff3131;box-shadow:0 26px 56px -22px rgba(255,49,49,.5)}
/* shine sweep on hover / tap */
.home-card::before{content:"";position:absolute;top:0;left:-65%;width:45%;height:100%;pointer-events:none;z-index:1;
  background:linear-gradient(105deg,transparent,rgba(255,255,255,.45),transparent);transform:skewX(-18deg);opacity:0}
.home-card:hover::before,.home-card:active::before{animation:home-shine .85s ease}
@keyframes home-shine{0%{left:-65%;opacity:1}100%{left:135%;opacity:1}}
@keyframes home-in{from{opacity:0}to{opacity:1}}        /* opacity-only so it never blocks the hover transform */
.home-cards .home-card:nth-child(1){animation-delay:.04s}
.home-cards .home-card:nth-child(2){animation-delay:.11s}
.home-wide{animation-delay:.18s}

.home-ic{width:56px;height:56px;border-radius:14px;display:grid;place-items:center;position:relative;z-index:2;
  background:linear-gradient(135deg,#ff3131,#ff6a4d);color:#fff;box-shadow:0 10px 24px -10px rgba(255,49,49,.7);
  transition:transform .28s cubic-bezier(.34,1.56,.64,1),box-shadow .28s}
.home-ic svg{width:30px;height:30px;transition:transform .28s cubic-bezier(.34,1.56,.64,1)}
.home-card:hover .home-ic,.home-card:active .home-ic{transform:scale(1.09) rotate(-5deg);box-shadow:0 14px 30px -8px rgba(255,49,49,.8)}
.home-card:hover .home-ic svg,.home-card:active .home-ic svg{transform:rotate(5deg)}
.home-head-row{display:flex;align-items:center;gap:14px;position:relative;z-index:2}
.home-card h2{margin:0;font-size:22px;letter-spacing:-.01em;color:#16161a}
.home-desc{margin:0;font-size:14.5px;line-height:1.55;color:#6e6e78;position:relative;z-index:2}
.home-card p{margin:0;font-size:14.5px;line-height:1.6;color:#6e6e78}
.home-go{margin-top:2px;color:#d41f1f;font-weight:700;font-size:14px;display:inline-block;position:relative;z-index:2;transition:transform .2s}
.home-card:hover .home-go,.home-card:active .home-go{transform:translateX(5px)}

.home-wide{margin-top:22px}                 /* full-width card below the two tools */
.home-ic.wa-ic{background:linear-gradient(135deg,#25d366,#1ebe59);box-shadow:0 10px 24px -10px rgba(37,211,102,.7)}
.home-card:hover .home-ic.wa-ic,.home-card:active .home-ic.wa-ic{box-shadow:0 14px 30px -8px rgba(37,211,102,.85)}
.home-go.wa-go{color:#1ba84e}
.home-wide:hover,.home-wide:active{border-color:#25d366;box-shadow:0 26px 56px -22px rgba(37,211,102,.5)}
@media(prefers-reduced-motion:reduce){.home-card,.home-card::before{animation:none}
  .home-card:hover,.home-card:active{transform:translateY(-3px)}
  .home-card:hover .home-ic,.home-card:active .home-ic,.home-card:hover .home-go,.home-card:active .home-go{transform:none}}

/* dark-theme overrides for the above when on .hz-page */
.hz-page .back-link{color:var(--mut);border-color:var(--line2);background:var(--panel2)}
.hz-page .back-link:hover{color:var(--ink);border-color:var(--acc)}
.hz-page .home-head h1{color:var(--ink)}
.hz-page .home-head p{color:var(--mut)}
.hz-page .home-card{background:linear-gradient(180deg,var(--panel),var(--bg2));border-color:var(--line);box-shadow:0 12px 40px rgba(0,0,0,.35)}
.hz-page .home-card:hover{border-color:var(--acc);box-shadow:0 18px 50px rgba(255,49,49,.18)}
.hz-page .home-card h2{color:var(--ink)}
.hz-page .home-card p,.hz-page .home-desc{color:var(--mut)}
.hz-page .home-go{color:var(--acc2)}
.hz-page .home-go.wa-go{color:#34e07a}

body.hz-page{
  --bg:#0b0e14; --bg2:#0e1218; --panel:#12161f; --panel2:#161b26;
  --line:#222a37; --line2:#2c3645;
  --ink:#e8edf4; --mut:#8b97a8; --faint:#5b6675;
  --acc:#ff3131; --acc2:#ff6a4d;             /* B7oothKw red brand gradient */
  --ok:#3fb950; --warn:#d8a234; --bad:#f0564b;
  --r:14px;
  color:var(--ink);
  background:
    radial-gradient(1100px 520px at 82% -10%, rgba(255,49,49,.10), transparent 60%),
    radial-gradient(900px 520px at 6% 108%, rgba(255,106,77,.07), transparent 55%),
    var(--bg);
  background-color:var(--bg);
  min-height:100vh;
}

/* ---- topbar / logo / nav on dark ---- */
.hz-page .topbar{max-width:1640px;padding-bottom:8px}
.hz-page .lg-cap,.hz-page .lg-must{fill:#e8edf4}
.hz-page .lg-word{fill:#e8edf4}
.hz-page .nav a{color:var(--mut)}
.hz-page .nav a:hover{color:var(--ink)}
.hz-page .nav a.on{color:#fff;background:var(--panel2)}

/* ---- tabs ---- */
.hz-page .hz-tabs{display:inline-flex;gap:5px;padding:5px;border-radius:13px;margin:0 0 0 6px;
  background:var(--panel2);border:1px solid var(--line2);box-shadow:inset 0 1px 0 rgba(255,255,255,.04)}
.hz-page .hz-tab{display:inline-flex;align-items:center;gap:8px;font-size:14.5px;font-weight:750;letter-spacing:.01em;
  color:var(--mut);padding:9px 20px;border-radius:9px;cursor:pointer;border:none;background:none;
  font-family:inherit;transition:transform .15s,color .15s,background .15s,box-shadow .25s}
.hz-page .hz-tab svg{width:18px;height:18px;flex:none}
.hz-page .hz-tab:hover:not(.on){color:var(--ink);background:rgba(255,255,255,.05)}
.hz-page .hz-tab.on{color:#fff;background:linear-gradient(135deg,var(--acc),var(--acc2));
  box-shadow:0 10px 24px -8px rgba(255,49,49,.7),inset 0 1px 0 rgba(255,255,255,.25);transform:translateY(-1px)}
.hz-page .hz-tab:active{transform:translateY(0) scale(.97)}

.hz-page main{max-width:1640px}
.hz-pane{margin-top:4px}
.hz-pane.hidden{display:none}

/* ================= workspace ================= */
.hz-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media(max-width:860px){.hz-grid{grid-template-columns:1fr}}

.pane{
  background:linear-gradient(180deg,var(--panel),var(--bg2));
  border:1px solid var(--line);border-radius:var(--r);
  display:flex;flex-direction:column;min-height:0;overflow:hidden;
  box-shadow:0 12px 40px rgba(0,0,0,.35);
  height:min(80vh,860px);
}
@media(max-width:860px){.pane{height:auto;min-height:60vh}}

.pane-head{
  flex:0 0 auto;position:relative;display:flex;align-items:center;justify-content:space-between;
  padding:12px 16px;border-bottom:1px solid var(--line);background:rgba(255,255,255,.015);
}
.pane-title{font-size:13px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--mut)}
.usage-bar{display:flex;justify-content:space-between;align-items:center;gap:10px;flex:0 0 auto;
  padding:7px 16px;font-size:12px;color:var(--mut);border-bottom:1px solid var(--line);background:var(--panel2)}
.usage-bar b{color:var(--ink);font-weight:700}

.editor{
  flex:1 1 auto;min-height:0;width:100%;padding:18px 20px;border:0;outline:0;resize:none;
  background:transparent;color:var(--ink);font-family:inherit;font-size:15px;line-height:1.85;overflow:auto;
}
.editor::placeholder{color:var(--faint)}
.result{line-height:2}
.hz-page .result{text-align:left}      /* override .result{text-align:center} from styles.css */
.result .placeholder{color:var(--faint);font-style:italic}
.result p{margin:0 0 6px}
.result .hz-h{font-weight:700;color:var(--ink);display:block;margin:14px 0 4px;letter-spacing:.2px}
.result .hz-h:first-child{margin-top:0}

/* sentence colours (match Grade A) */
.sent{padding:1px 3px;border-radius:5px;transition:background .15s;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.sent.human{background:rgba(63,185,80,.13);box-shadow:inset 0 -2px 0 rgba(63,185,80,.45);color:#a6f0ad}
.sent.mid{background:rgba(216,162,52,.13);box-shadow:inset 0 -2px 0 rgba(216,162,52,.45);color:#f0d79a}
.sent.ai{background:rgba(240,86,75,.14);box-shadow:inset 0 -2px 0 rgba(240,86,75,.5);color:#ffb1aa}

/* ================= buttons ================= */
.hz-controls{margin-top:18px;display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.btn{font-family:inherit;font-size:14px;font-weight:650;cursor:pointer;border-radius:10px;padding:11px 18px;
  border:1px solid transparent;display:inline-flex;align-items:center;gap:8px;transition:all .15s}
.btn-sm{padding:7px 13px;font-size:13px}
.btn:disabled{opacity:.5;cursor:not-allowed;transform:none}
.btn-primary{justify-content:center;background:linear-gradient(135deg,var(--acc),var(--acc2));color:#fff;
  box-shadow:0 6px 18px rgba(255,49,49,.32);position:relative;overflow:hidden}
.btn-primary:hover:not(:disabled){filter:brightness(1.08);transform:translateY(-1px)}
.btn-ghost{background:var(--panel2);border-color:var(--line2);color:var(--ink)}
.btn-ghost:hover:not(:disabled){background:#1d2433;border-color:#384355}
.btn-ghost .dot{width:8px;height:8px;border-radius:50%;background:var(--acc)}
.btn-green{color:var(--ok);border-color:var(--ok);background:transparent}
.btn-green:hover:not(:disabled){background:var(--ok);color:#fff;border-color:var(--ok)}
.btn-green:disabled{color:var(--ok);border-color:var(--ok)}
.btn-stop{color:var(--bad);border-color:var(--bad);background:transparent}
.btn-stop:hover{background:var(--bad);color:#fff;border-color:var(--bad)}
.btn-clear{padding:0 14px;align-self:stretch;color:var(--bad);
  background:color-mix(in srgb,var(--bad) 10%,transparent);border:1px solid color-mix(in srgb,var(--bad) 45%,transparent)}
.btn-clear:hover{background:var(--bad);color:#fff;border-color:var(--bad);transform:translateY(-1px)}
.btn-clear svg{display:block}
.btn.loading{position:relative;color:transparent}
.btn.loading::after{content:"";position:absolute;top:50%;left:50%;width:16px;height:16px;margin:-8px 0 0 -8px;
  border-radius:50%;border:2px solid rgba(255,255,255,.4);border-top-color:#fff;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* foot legend */
.pane-foot{flex:0 0 auto;display:flex;align-items:center;gap:16px;padding:11px 16px;border-top:1px solid var(--line);
  background:rgba(255,255,255,.015);flex-wrap:wrap}
.lg{display:inline-flex;align-items:center;gap:7px;font-size:12px;color:var(--mut)}
.sw{width:11px;height:11px;border-radius:3px;display:inline-block}
.sw.human{background:rgba(63,185,80,.6)} .sw.mid{background:rgba(216,162,52,.6)} .sw.ai{background:rgba(240,86,75,.65)}
.copy-btn{margin-left:auto}
#hz-copy{transition:background .2s,border-color .2s,color .2s,transform .12s}
#hz-copy.copied{color:#fff;background:var(--ok);border-color:var(--ok);animation:copyPop .3s ease}
@keyframes copyPop{0%{transform:scale(1)}40%{transform:scale(1.12)}100%{transform:scale(1)}}
.copy-check{display:inline-block;font-weight:800}
.btn-clear.cleared{background:var(--bad);color:#fff;border-color:var(--bad);animation:clearFlash .55s ease}
.btn-clear.cleared svg{animation:trashShake .55s ease}
@keyframes clearFlash{0%{transform:scale(1)}30%{transform:scale(1.12)}100%{transform:scale(1)}}
@keyframes trashShake{0%,100%{transform:rotate(0)}15%{transform:rotate(-16deg)}35%{transform:rotate(13deg)}55%{transform:rotate(-9deg)}75%{transform:rotate(5deg)}}

/* ================= score ring ================= */
.head-ring{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}
.ring{flex:0 0 auto;padding:4px 11px 6px;border-radius:12px;background:rgba(127,140,170,.07);
  border:1px solid color-mix(in srgb,var(--col) 50%,var(--line));box-shadow:0 0 18px -5px var(--col);
  display:flex;flex-direction:column;align-items:center;gap:5px;transition:box-shadow .4s,border-color .4s}
.ring-num{font-size:13px;font-weight:800;color:var(--col);line-height:1;
  text-shadow:0 0 10px color-mix(in srgb,var(--col) 55%,transparent)}
.ring-bar{display:block;width:44px;height:3px;border-radius:3px;background:rgba(255,255,255,.10);overflow:hidden}
.ring-bar::before{content:"";display:block;height:100%;border-radius:3px;width:calc(var(--lvl,0) * 1%);
  background:var(--col);box-shadow:0 0 8px -1px var(--col);transition:width .85s cubic-bezier(.22,1,.36,1),background .5s}
.ring.fx-pop{animation:fx-ring-pop .6s ease-out}
@keyframes fx-ring-pop{0%{transform:translate(-50%,-50%) scale(1)}35%{transform:translate(-50%,-50%) scale(1.2)}100%{transform:translate(-50%,-50%) scale(1)}}
.ring.safe::after{content:"";position:absolute;inset:-3px;border-radius:14px;pointer-events:none;z-index:-1;
  box-shadow:0 0 20px 1px var(--col);animation:fx-ring-breathe 2.2s ease-in-out infinite}
@keyframes fx-ring-breathe{0%,100%{opacity:.3}50%{opacity:.9}}

/* ================= animated effects ================= */
.pane.fx-humanizing{animation:fx-glow-acc 1.4s ease-in-out infinite;border-color:var(--acc)!important}
.pane.fx-greening{animation:fx-glow-green 1.4s ease-in-out infinite;border-color:#2bbf6a!important}
@keyframes fx-glow-acc{
  0%,100%{box-shadow:0 12px 40px rgba(0,0,0,.35),0 0 0 1px var(--acc),0 0 14px rgba(255,49,49,.30)}
  50%{box-shadow:0 12px 40px rgba(0,0,0,.35),0 0 0 1px #ff6a6a,0 0 32px 5px rgba(255,49,49,.6)}}
@keyframes fx-glow-green{
  0%,100%{box-shadow:0 12px 40px rgba(0,0,0,.35),0 0 0 1px #2bbf6a,0 0 14px rgba(43,191,106,.30)}
  50%{box-shadow:0 12px 40px rgba(0,0,0,.35),0 0 0 1px #46d987,0 0 32px 5px rgba(43,191,106,.6)}}
.pane.fx-scanning{position:relative}
.pane.fx-scanning::after{content:"";position:absolute;left:0;right:0;top:0;height:46px;pointer-events:none;z-index:7;
  background:linear-gradient(180deg,transparent,rgba(255,49,49,.26),transparent);
  box-shadow:0 0 14px rgba(255,49,49,.4);animation:fx-scan 1.1s ease-in-out infinite}
@keyframes fx-scan{0%{top:-12%}100%{top:100%}}
#hz-out.fx-reveal{position:relative}
#hz-out.fx-reveal::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:3;
  background:linear-gradient(105deg,transparent 38%,rgba(255,49,49,.16) 50%,transparent 62%);
  background-size:300% 100%;animation:fx-shine .9s ease-out forwards}
@keyframes fx-shine{from{background-position:140% 0}to{background-position:-40% 0}}
#hz-out.fx-ripple .sent{animation:fx-sent-wave .5s ease-out both;animation-delay:calc(var(--i,0) * 42ms)}
@keyframes fx-sent-wave{0%{filter:brightness(1)}35%{filter:brightness(1.5)}100%{filter:brightness(1)}}
#btn-humanize:not(.loading)::before{content:"";position:absolute;top:0;bottom:0;width:45%;pointer-events:none;
  background:linear-gradient(105deg,transparent,rgba(255,255,255,.38),transparent);transform:skewX(-18deg);
  animation:fx-btn-shine 3.4s ease-in-out infinite}
@keyframes fx-btn-shine{0%{left:-60%}60%,100%{left:140%}}
.btn-ripple{position:absolute;border-radius:50%;background:rgba(255,255,255,.45);pointer-events:none;
  transform:translate(-50%,-50%) scale(0);animation:fx-ripple .55s ease-out forwards}
@keyframes fx-ripple{to{transform:translate(-50%,-50%) scale(1);opacity:0}}
@media(prefers-reduced-motion:reduce){
  .pane.fx-humanizing,.pane.fx-greening,.pane.fx-scanning::after,.ring.safe::after,
  #hz-out.fx-reveal::after,#hz-out.fx-ripple .sent,#btn-humanize::before{animation:none!important}
}

.hz-msg{margin:14px 0 0;font-size:14px;font-weight:600;color:var(--acc2);min-height:1.2em}
.hz-msg.ok{color:var(--ok)}
.hz-bar{height:8px;background:#0d1119;border:1px solid var(--line);border-radius:999px;overflow:hidden;margin-top:14px}
.hz-bar-fill{height:100%;width:0;background:linear-gradient(90deg,var(--acc),var(--acc2));transition:width .35s}

/* ================= PowerPoint pane ================= */
.pp-wrap{max-width:620px}
.pp-wrap .lede{color:var(--mut);font-size:16px;margin:0 0 18px}
.pp-wrap .lede b{color:var(--ink)}
.pp-drop{position:relative;background:linear-gradient(180deg,var(--panel),var(--bg2));border:1.5px dashed var(--line2);
  border-radius:var(--r);padding:26px 24px;min-height:180px;cursor:pointer;transition:.18s;text-align:center}
.pp-drop:hover{border-color:var(--acc);background:linear-gradient(180deg,#181018,var(--bg2))}
.pp-drop.drag{border-color:var(--acc);border-style:solid;background:rgba(255,49,49,.06)}
.pp-drop.filled{border-style:solid;border-color:var(--ok)}
.pp-drop .step{position:absolute;top:-13px;left:22px;width:32px;height:32px;border-radius:9px;
  background:linear-gradient(135deg,var(--acc),var(--acc2));color:#fff;display:grid;place-items:center;font-weight:800;font-size:15px;transform:rotate(-6deg)}
.pp-drop h3{margin:6px 0;color:var(--ink);font-size:18px}
.pp-drop h3 em{font-style:normal;color:var(--mut);font-weight:500;font-size:13px}
.pp-drop .drop-cue{display:flex;justify-content:center;margin-top:10px;color:var(--acc)}
.pp-drop .drop-cue svg{width:44px;height:44px}
.pp-drop.filled .drop-cue{display:none}
.pp-files{display:flex;justify-content:center;flex-wrap:wrap;gap:6px;margin-top:12px}
.chip{display:inline-flex;align-items:center;gap:7px;font-size:12px;background:var(--panel2);border:1px solid var(--line2);
  color:var(--ink);padding:5px 8px 5px 11px;border-radius:999px;max-width:100%}
.chip-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:200px}
.chip-x{flex:none;width:18px;height:18px;border:none;border-radius:50%;background:rgba(255,255,255,.1);color:var(--ink);
  font-size:15px;line-height:1;cursor:pointer;display:grid;place-items:center;padding:0;transition:.15s}
.chip-x:hover{background:var(--bad);color:#fff}