:root{
  --bg:#0b0e14; --bg2:#0e1218; --panel:#12161f; --panel2:#161b26;
  --line:#222a37; --line2:#2c3645;
  --ink:#e8edf4; --mut:#8b97a8; --faint:#5b6675;
  --acc:#7c83ff; --acc2:#a371f7;
  --ok:#3fb950; --warn:#d8a234; --bad:#f0564b;
  --r:14px;
}

/* ---------- light theme (dark is default) ---------- */
body.light{
  --bg:#f4f6fb; --bg2:#eceff5; --panel:#ffffff; --panel2:#eef2f8;
  --line:#e3e7f0; --line2:#d2d9e6;
  --ink:#1b2230; --mut:#586577; --faint:#97a1b3;
}
body.light .sidebar{background:rgba(255,255,255,.7)}
body.light .btn-ghost:hover{background:#eef1f7;border-color:#cfd6e3}
body.light .toast{background:#ffffff;box-shadow:0 10px 30px rgba(20,30,60,.18)}
body.light .brand-logo .logo-word{fill:#1b2230}
body.light .brand-logo .logo-sub{fill:#586577}
body.light .tn-word{color:#2b3442}        /* turnitin wordmark readable on white */
/* model toggle: clearer on the light theme */
body.light .model-toggle{background:#eef2f8;border-color:#cfd6e3}
body.light .model-btn{color:#3a4658}
body.light .model-btn+.model-btn{border-left-color:#cfd6e3}
body.light .model-btn:hover{color:#1b2230;background:#e2e8f2}
/* output highlight text: dark colors so they're readable on white */
body.light .sent.human{color:#157a2c}
body.light .sent.mid{color:#8a6410}
body.light .sent.ai{color:#c12418}

/* themeable logo text + theme toggle button */
.brand-logo .logo-word{fill:#eef2f8}
.brand-logo .logo-sub{fill:#aab4c2}
.side-brand{display:flex;align-items:center;justify-content:space-between;gap:8px}
.theme-toggle{position:absolute;top:32px;right:14px;z-index:6;
  width:30px;height:30px;display:flex;align-items:center;
  justify-content:center;font-size:14px;cursor:pointer;border-radius:8px;
  background:transparent;border:1px solid var(--line2);color:var(--mut);transition:.15s}
.theme-toggle:hover{background:var(--panel2);color:var(--ink)}

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  background:
    radial-gradient(1100px 500px at 78% -8%, rgba(124,131,255,.10), transparent 60%),
    radial-gradient(900px 500px at 10% 110%, rgba(163,113,247,.08), transparent 55%),
    var(--bg);
  color:var(--ink);
  font-family:"Inter","Segoe UI",system-ui,-apple-system,sans-serif;
  -webkit-font-smoothing:antialiased;
  overflow:hidden;
}

/* ---------- dashboard shell ---------- */
.app-shell{display:flex;height:100vh;position:relative}
.sidebar{
  width:236px;flex:0 0 236px;display:flex;flex-direction:column;position:relative;
  border-right:1px solid var(--line);background:rgba(12,15,21,.55);
  padding:16px 14px;backdrop-filter:blur(8px);white-space:nowrap;
  transition:width .22s ease, flex-basis .22s ease, padding .22s ease;
}
/* collapse toggle on the sidebar edge */
.sidebar-toggle{
  position:absolute; top:50%; left:224px; transform:translateY(-50%);
  width:24px; height:24px; border-radius:50%; z-index:60; cursor:pointer;
  background:var(--panel2); border:1px solid var(--line2); color:var(--mut);
  display:flex; align-items:center; justify-content:center; font-size:15px;
  box-shadow:0 2px 8px rgba(0,0,0,.3); transition:left .22s ease, background .15s, color .15s;
}
.sidebar-toggle:hover{background:var(--panel);color:var(--ink)}
.sidebar-toggle .chev{display:block;line-height:1;transition:transform .22s ease;margin-top:-1px}
.app-shell.collapsed .sidebar{flex-basis:0;width:0;padding-left:0;padding-right:0;overflow:hidden;border-right:0}
.app-shell.collapsed .sidebar-toggle{left:6px}
.app-shell.collapsed .sidebar-toggle .chev{transform:rotate(180deg)}
.side-brand{padding:4px 6px 14px;border-bottom:1px solid var(--line);margin-bottom:12px}
.side-brand .brand-logo{height:54px;width:auto;display:block}
.nav{display:flex;flex-direction:column;gap:4px;flex:1}
.nav-item{
  display:flex;align-items:center;gap:11px;text-decoration:none;
  padding:11px 13px;border-radius:10px;color:var(--mut);
  font-size:15px;font-weight:700;letter-spacing:-.3px;transition:.15s;cursor:pointer;
}
.nav-item:hover{background:var(--panel2);color:var(--ink)}
.nav-item.hidden{display:none}        /* admin-only nav items (Uploads) hidden unless shown by JS */
.nav-sep{height:1px;background:var(--line);margin:9px 10px}   /* divider above the admin section */
.nav-sep.hidden{display:none}
.nav-badge{display:inline-flex;align-items:center;justify-content:center;min-width:19px;height:19px;
  padding:0 6px;margin-left:auto;border-radius:999px;background:var(--bad);color:#fff;
  font-size:11px;font-weight:800;line-height:1;box-shadow:0 0 0 3px rgba(248,81,73,.18)}
.nav-badge.hidden{display:none}
.nav-item.active{background:linear-gradient(135deg,rgba(124,131,255,.20),rgba(163,113,247,.14));
  color:var(--ink);box-shadow:inset 0 0 0 1px var(--line2)}
.nav-ic{font-size:15px;width:18px;text-align:center}
.nav-item[data-view="humanizer"] .nav-ic{color:var(--acc)}      /* purple */
.nav-item[data-view="pricing"] .nav-ic{color:#f4b03c}           /* gold */
/* turnitin logo in the nav: icon sits in an 18px box (like the other icons) so
   the wordmark left-aligns with "Humanizer" / "Pricing & Plans" */
.nav-tn-icon{flex:0 0 18px;height:16px;width:18px;object-fit:contain;object-position:left center;display:block}
.nav-gz-icon{flex:0 0 19px;width:19px;height:19px;display:block;object-fit:contain}
.nav-dc-icon{flex:0 0 19px;width:19px;height:19px;display:block;color:#5865F2}
.nav-discord:hover .nav-dc-icon{color:#fff}
.btn-gz-icon{width:17px;height:17px;display:inline-block;vertical-align:-4px;object-fit:contain}
.nav-tn-word{font-size:15px;font-weight:700;color:inherit;letter-spacing:-.3px;line-height:1}
.nav-tn-word sup{font-size:7px;vertical-align:super;opacity:.6}
.side-foot{border-top:1px solid var(--line);padding-top:12px;font-size:12px;color:var(--faint)}
.side-foot a{color:var(--acc);text-decoration:none;display:block;margin-bottom:5px}
.side-note{font-size:11px;color:var(--faint)}

/* mobile hamburger (hidden on desktop — the sidebar nav is always visible there) */
.nav-burger{display:none;background:transparent;border:1px solid var(--line2);border-radius:10px;
  width:42px;height:40px;cursor:pointer;flex-direction:column;align-items:center;justify-content:center;
  gap:4px;padding:0;transition:border-color .15s,background .15s}
.nav-burger:hover{border-color:var(--acc);background:var(--panel2)}
.nav-burger span{display:block;width:18px;height:2px;background:var(--ink);border-radius:2px;
  transition:transform .22s ease,opacity .18s ease}
.sidebar.menu-open .nav-burger span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.sidebar.menu-open .nav-burger span:nth-child(2){opacity:0}
.sidebar.menu-open .nav-burger span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

.content{flex:1;min-width:0;display:flex;flex-direction:column;overflow:hidden;position:relative}
.view{flex:1;min-height:0;display:flex;flex-direction:column;overflow:auto;padding:18px 22px}
.view.hidden{display:none}
.view-title{font-size:22px;font-weight:800;margin-bottom:4px;display:flex;align-items:center;gap:8px}
.title-tn{display:inline-flex;align-items:center;gap:5px}
.title-tn-icon{height:26px;width:auto;display:block}
.title-tn-word{font-size:24px;font-weight:800;letter-spacing:-.5px;line-height:1;color:inherit}
.title-tn-word sup{font-size:10px;vertical-align:super;opacity:.6}
.view-sub{color:var(--mut);font-size:13.5px;margin-bottom:18px}

/* turnitin-check view */
.check-area{flex:0 0 auto;height:210px;width:100%;resize:none;outline:none;
  background:var(--panel);border:1px solid var(--line);border-radius:12px;
  padding:16px 18px;color:var(--ink);font-family:inherit;font-size:15px;line-height:1.7;margin-bottom:12px}
.check-area::placeholder{color:var(--faint)}
.check-bar{display:flex;align-items:center;gap:16px;margin-bottom:12px;flex-wrap:wrap}
.check-score{font-weight:700;font-size:15px}
#checkOut{flex:1;min-height:200px}

/* file upload + turnitin-style report */
.upload-zone{border:2px dashed var(--line2);border-radius:14px;padding:38px;text-align:center;
  cursor:pointer;background:var(--panel);transition:.15s;max-width:840px;margin:24px 0 20px}
.upload-zone:hover,.upload-zone.drag{border-color:var(--acc);background:var(--panel2)}
.upz-icon{font-size:34px;margin-bottom:8px}
.upz-title{font-size:16px;font-weight:650}
.upz-title span{color:var(--acc)}
.upz-sub{font-size:12.5px;color:var(--mut);margin-top:4px}
/* GPTZero result (rendered inside the output pane) */
.pane-sub{font-size:12px;color:var(--mut);margin-left:auto}
.gz-low{color:var(--bad)}
.usage-bar .uh a{color:var(--acc);text-decoration:none}
/* locked input (no GPTZero access) */
#gzInputPane{position:relative}
.gz-lock{position:absolute;inset:0;z-index:30;display:flex;align-items:center;justify-content:center;
  text-align:center;padding:24px;border-radius:inherit;
  background:rgba(13,16,23,.74);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
body.light .gz-lock{background:rgba(245,247,250,.8)}
.gz-lock.hidden{display:none}
/* Full-view "Under maintenance" overlay for the Turnitin Check section. */
#view-check{position:relative}
.tn-maint{position:absolute;inset:0;z-index:40;display:flex;align-items:center;
  justify-content:center;text-align:center;padding:24px;
  background:rgba(11,14,20,.5);backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px)}
body.light .tn-maint{background:rgba(244,246,251,.55)}
.tn-maint.hidden{display:none}
.tn-maint .gz-lock-ic{font-size:52px;margin-bottom:14px}
.tn-maint .gz-lock-title{font-size:24px}
.tn-maint .gz-lock-sub{font-size:15px;margin-top:8px}
.gz-lock-box{max-width:320px}
.gz-lock-ic{font-size:38px;margin-bottom:10px}
.gz-lock-title{font-size:18px;font-weight:700}
.gz-lock-sub{font-size:13px;color:var(--mut);margin:6px 0 18px}
.gz-lock-btn{flex:0 0 auto;display:inline-flex}
/* Turnitin upload lock */
.tn-upwrap{position:relative;max-width:840px;margin:24px 0 20px;border-radius:14px}
.tn-upwrap .upload-zone{margin:0}
#tnLock{border-radius:14px}
.gz-err{color:var(--bad);font-size:13px}
.gz-bars{display:flex;flex-direction:column;gap:9px;margin-bottom:4px}
.gz-bar{display:flex;align-items:center;gap:12px;font-size:12.5px}
.gz-bar>span{width:54px;color:var(--mut)}
.gz-bar>b{width:42px;text-align:right;font-variant-numeric:tabular-nums}
.gz-track{flex:1;height:8px;border-radius:5px;background:var(--line2);overflow:hidden}
.gz-track>i{display:block;height:100%;border-radius:5px;background:linear-gradient(90deg,var(--acc),var(--acc2));transition:width .4s ease}
/* highlighted document (AI sentences) */
.gz-doc{margin-top:16px;padding-top:14px;border-top:1px solid var(--line);font-size:14px;line-height:1.9;color:var(--ink)}
.gz-hl{background:rgba(240,86,75,.16);box-shadow:inset 0 -2px 0 rgba(240,86,75,.5);
  border-radius:4px;padding:1px 3px;color:#ffb1aa}
.model-toggle{display:inline-flex;border:1px solid var(--line2);border-radius:8px;overflow:hidden}
.model-btn{background:transparent;color:var(--mut);border:0;padding:6px 11px;
  font-size:12.5px;font-weight:600;cursor:pointer;transition:.15s}
.model-btn+.model-btn{border-left:1px solid var(--line2)}
.model-btn:hover{color:var(--ink);background:var(--panel2)}
.model-btn.active{background:linear-gradient(135deg,var(--acc),var(--acc2));color:#fff}
.model-btn.hidden{display:none}
/* Model 3 is admin-only (hidden from users) — show it in RED so it's an obvious reminder */
.model-btn.model-admin-only,
body.light .model-btn.model-admin-only{color:#f0564b}
.model-btn.model-admin-only:hover,
body.light .model-btn.model-admin-only:hover{color:#ff7064;background:rgba(240,86,75,.14)}
.model-btn.model-admin-only.active,
body.light .model-btn.model-admin-only.active{background:linear-gradient(135deg,#f0564b,#c9352b);color:#fff}
.rep-toolbar{max-width:840px;margin-bottom:14px}
.rep-done{max-width:560px;padding:6px 2px}
.rep-result{margin-top:16px;font-size:13.5px;color:var(--mut)}
.rep-result b{font-size:19px;display:block;margin-bottom:3px}
/* Discord section */
.dc-wrap{max-width:860px;margin:0 auto;display:flex;flex-direction:column;gap:18px}
.dc-hero{position:relative;overflow:hidden;border-radius:22px;padding:54px 28px;text-align:center;
  background:radial-gradient(120% 140% at 50% -10%, #5865F2 0%, #4853d8 38%, #2b2f63 78%, #1b1e3a 100%);
  box-shadow:0 22px 60px rgba(88,101,242,.35)}
.dc-orb{position:absolute;border-radius:50%;filter:blur(8px);opacity:.5;pointer-events:none;
  background:radial-gradient(circle,#fff,transparent 70%)}
.dc-orb1{width:160px;height:160px;top:-50px;left:-40px;animation:dcFloat 7s ease-in-out infinite}
.dc-orb2{width:210px;height:210px;bottom:-80px;right:-50px;opacity:.35;animation:dcFloat 9s ease-in-out infinite reverse}
@keyframes dcFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(18px)}}
.dc-hero-inner{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:8px}
.dc-logo{width:104px;height:104px;border-radius:26px;overflow:hidden;
  box-shadow:0 14px 34px rgba(0,0,0,.35);margin-bottom:8px;
  animation:dcPop .5s cubic-bezier(.2,1.3,.4,1)}
.dc-logo-img{width:100%;height:100%;object-fit:cover;display:block}
@keyframes dcPop{0%{transform:scale(.6);opacity:0}100%{transform:scale(1);opacity:1}}
.dc-title{font-size:30px;font-weight:800;color:#fff;margin:4px 0 0;letter-spacing:-.5px}
.dc-sub{font-size:14.5px;color:rgba(255,255,255,.82);max-width:480px;margin:0 0 8px;line-height:1.6}
.dc-join{background:#fff;color:#404EED;font-weight:800;font-size:15px;padding:14px 30px;border-radius:30px;
  box-shadow:0 10px 26px rgba(0,0,0,.28);transition:transform .15s,box-shadow .15s}
.dc-join:hover{transform:translateY(-2px) scale(1.02);box-shadow:0 16px 34px rgba(0,0,0,.36)}
.dc-join-ic{font-weight:900;margin-right:2px}
.dc-note{font-size:11.5px;color:rgba(255,255,255,.62);max-width:420px;margin-top:12px;line-height:1.5}
.dc-note b{color:#fff}
.dc-perks{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.dc-perk{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:18px 16px;
  display:flex;flex-direction:column;gap:5px;transition:border-color .15s,transform .15s}
.dc-perk:hover{border-color:var(--acc);transform:translateY(-2px)}
.dc-perk-ic{font-size:24px}
.dc-perk b{font-size:14px;color:var(--ink)}
.dc-perk small{font-size:11.5px;color:var(--mut);line-height:1.4}
@media (max-width:760px){.dc-perks{grid-template-columns:1fr 1fr}.dc-title{font-size:24px}.dc-hero{padding:40px 20px}}
@media (max-width:440px){.dc-perks{grid-template-columns:1fr}}
/* What's New / changelog */
#view-changelog .view-title,#view-changelog .cl-intro{text-align:center}
.cl-intro{color:var(--mut);font-size:13.5px;margin:-6px 0 20px}
.changelog{max-width:760px;margin:0 auto;display:flex;flex-direction:column;gap:6px}
.cl-entry{display:grid;grid-template-columns:140px 1fr;gap:20px;padding:20px 0;border-top:1px solid var(--line)}
.cl-entry:first-child{border-top:0}
.cl-date{color:var(--mut);font-size:14.5px;font-weight:600;padding-top:3px}
.cl-title{font-size:20px;font-weight:700;margin-bottom:14px}
.cl-items{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:13px}
.cl-items li{display:flex;gap:11px;align-items:flex-start;font-size:15.5px;line-height:1.55;color:var(--ink)}
.cl-text{color:var(--mut)}
.cl-text b{color:var(--ink);font-weight:600}
.cl-tag{flex:0 0 auto;font-size:11px;font-weight:800;letter-spacing:.4px;text-transform:uppercase;
  padding:3px 9px;border-radius:20px;margin-top:2px}
.cl-new{background:rgba(63,185,80,.16);color:#5fd16e}
.cl-improved{background:rgba(124,131,255,.18);color:#a3a8ff}
.cl-updated{background:rgba(54,214,231,.16);color:#5fd0e0}
.cl-fixed{background:rgba(216,162,52,.18);color:#e0b65a}
@media (max-width:640px){.cl-entry{grid-template-columns:1fr;gap:8px;padding:16px 0}}
/* report summary card */
.rep-card{max-width:600px;margin-top:18px;background:var(--panel);border:1px solid var(--line);
  border-radius:16px;padding:22px;display:flex;flex-direction:column;gap:20px}
.rep-card-main{display:flex;gap:22px;align-items:center}
.rep-gauge{flex:0 0 auto;width:150px;height:150px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:conic-gradient(var(--col) var(--deg), var(--line2) 0)}
.rep-gauge-in{width:116px;height:116px;border-radius:50%;background:var(--panel);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px}
.rep-gauge-in b{font-size:34px;font-weight:800;line-height:1}
.rep-gauge-in small{color:var(--mut);font-size:11px;letter-spacing:2px}
.rep-card-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:9px}
.rep-verdict{font-size:18px;font-weight:800;line-height:1.2}
.rep-file{font-size:12.5px;color:var(--mut);word-break:break-word}
.rep-bar-track{height:9px;border-radius:5px;background:var(--line2);overflow:hidden}
.rep-bar-track>i{display:block;height:100%;border-radius:5px;transition:width .5s ease}
.rep-bar-cap{display:flex;justify-content:space-between;font-size:11.5px;color:var(--mut);margin-top:5px}
.rep-stats{display:grid;grid-template-columns:1fr 1fr;gap:0 18px;margin-top:6px}
.rep-st{display:flex;justify-content:space-between;gap:10px;font-size:12px;padding:6px 0;border-bottom:1px solid var(--line)}
.rep-st>span{color:var(--mut)}
.rep-st>b{color:var(--ink);text-align:right;word-break:break-word}
.btn-primary.rep-dl{flex:0 0 auto;justify-content:center}
@media (max-width:560px){.rep-card-main{flex-direction:column;text-align:center}.rep-stats{grid-template-columns:1fr}}
.scan-box{max-width:560px;padding:34px 2px}
.scan-title{font-size:15px;margin-bottom:5px}
.scan-stage{color:var(--mut);font-size:13px;margin-bottom:12px}
.scan-bar{height:10px;background:var(--panel2);border:1px solid var(--line);border-radius:6px;overflow:hidden}
.scan-fill{height:100%;width:0;border-radius:6px;
  background:linear-gradient(90deg,var(--acc),var(--acc2));transition:width .25s ease}
.scan-pct{margin-top:8px;font-size:12px;color:var(--faint);font-weight:700}
.rep-loading{max-width:840px;padding:40px;text-align:center;color:var(--mut);font-size:15px}
.rep-loading small{color:var(--faint)}
.rep-spin{width:30px;height:30px;border-radius:50%;border:3px solid var(--line2);border-top-color:var(--acc);
  animation:spin .7s linear infinite;margin:0 auto 14px}

.tn-report{background:#fff;color:#1c1c1c;border-radius:10px;max-width:840px;overflow:hidden;
  box-shadow:0 14px 44px rgba(0,0,0,.45);margin-bottom:24px}
.tn-rep-bar{display:flex;align-items:center;gap:12px;padding:14px 28px;border-bottom:1px solid #e6e6e6}
.tn-rep-bar img{height:24px;width:auto}
.tn-rep-bar span{color:#0a2e36;font-weight:600;font-size:14px}
.tn-rep-overview{display:flex;align-items:flex-start;gap:20px;padding:24px 28px 18px}
.tn-rep-pct{font-size:46px;font-weight:800;color:#0a2e36;line-height:.95}
.tn-rep-pct-label{font-size:22px;color:#0a2e36;font-weight:700}
.tn-rep-note{font-size:12px;color:#666;max-width:460px;margin-top:5px;line-height:1.5}
.tn-rep-details{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;padding:0 28px 20px}
.tn-rep-details>div{font-size:13px;color:#222}
.tn-rep-details b{display:block;color:#8a8a8a;font-weight:600;font-size:10.5px;letter-spacing:.5px;margin-bottom:2px}
.tn-rep-doc{padding:24px 34px;border-top:1px solid #e6e6e6;line-height:1.95;font-size:15px;
  color:#1c1c1c;font-family:Georgia,'Times New Roman',serif}
.tn-rep-doc .tn-h{font-weight:700;margin:16px 0 4px;font-family:Inter,'Segoe UI',sans-serif}
.tn-rep-doc .tn-p{margin:0 0 6px}
.tn-rep-doc .tn-blank{height:.7em}
.tn-hl{background:#b6e6f2;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.tn-rep-foot{padding:13px 28px;border-top:1px solid #e6e6e6;font-size:11px;color:#9a9a9a}

/* pricing view */
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;max-width:940px;margin:56px auto 0}
.plans-4{grid-template-columns:repeat(4,1fr);max-width:1480px}
#view-pricing .view-title{text-align:center}
.plan li.muted{color:var(--faint)}
@media (max-width:1100px){.plans-4{grid-template-columns:repeat(2,1fr);max-width:680px}}
.plan{background:var(--panel);border:1px solid var(--line);border-radius:20px;padding:42px 36px;position:relative}
.plan.featured{border-color:var(--acc);box-shadow:0 0 0 1px var(--acc),0 14px 34px rgba(124,131,255,.20)}
.plan-badge{position:absolute;top:-11px;left:50%;transform:translateX(-50%);
  background:linear-gradient(135deg,var(--acc),var(--acc2));color:#fff;font-size:11px;font-weight:700;
  padding:3px 13px;border-radius:20px;white-space:nowrap}
.plan-name{font-size:15px;font-weight:700;color:var(--mut);text-transform:uppercase;letter-spacing:1.5px}
.plan-price{font-size:52px;font-weight:800;margin:10px 0 24px}
.plan-price span{font-size:16px;color:var(--mut);font-weight:600}
.plan ul{list-style:none;margin:0 0 28px;padding:0}
.plan li{font-size:16px;color:var(--ink);padding:12px 0 12px 32px;position:relative;border-bottom:1px solid var(--line)}
.plan li::before{content:"✓";position:absolute;left:0;top:12px;width:20px;height:20px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;
  color:#3fb950;background:color-mix(in srgb,#3fb950 16%,transparent)}
.plan li.muted::before{content:"✕";color:var(--faint);background:color-mix(in srgb,var(--faint) 16%,transparent)}
.plan-btn{width:100%;justify-content:center}
/* the user's active subscription: clear "current plan" state instead of a buy button */
.plan-btn.is-current,.plan-btn.is-current:disabled{
  opacity:1;cursor:default;transform:none;filter:none;
  background:color-mix(in srgb,var(--ok) 14%,transparent);
  border:1px solid color-mix(in srgb,var(--ok) 45%,transparent);
  color:var(--ok);box-shadow:none}

/* ===== Pay-per-scan Turnitin card (Pricing page) ===== */
.tn-scan-card{max-width:940px;margin:26px auto 0;display:flex;flex-wrap:wrap;gap:24px;align-items:center;
  justify-content:space-between;background:linear-gradient(135deg,rgba(124,131,255,.10),rgba(56,211,255,.06));
  border:1px solid var(--line2);border-radius:20px;padding:26px 30px;box-shadow:0 18px 44px -28px rgba(0,0,0,.6)}
.tn-scan-left{flex:1;min-width:280px}
.tn-scan-badge{display:inline-flex;align-items:center;gap:9px;font-size:18px;font-weight:800;color:var(--ink);letter-spacing:-.3px}
.tn-scan-badge img{height:22px;width:auto}
.tn-scan-desc{color:var(--mut);font-size:14px;line-height:1.55;margin:10px 0 12px;max-width:560px}
.tn-scan-desc b{color:var(--ink)}
.tn-scan-feats{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:7px}
.tn-scan-feats li{position:relative;padding-left:26px;font-size:13.5px;color:var(--ink)}
.tn-scan-feats li::before{content:"✓";position:absolute;left:0;top:0;width:18px;height:18px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:800;color:#3fb950;
  background:color-mix(in srgb,#3fb950 16%,transparent)}
.tn-scan-right{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;gap:10px;min-width:180px}
.tn-scan-price{font-size:40px;font-weight:800;color:var(--ink);line-height:1}
.tn-scan-price span{font-size:15px;color:var(--mut);font-weight:600;margin-left:4px}
.tn-scan-buy{width:100%;justify-content:center}
.tn-scan-note{font-size:12px;color:var(--faint);text-align:center;min-height:14px}
.tn-scan-prem{margin:14px 0 0;font-size:13px;color:var(--acc);
  background:rgba(124,131,255,.10);border:1px solid color-mix(in srgb,var(--acc) 35%,transparent);
  border-radius:9px;padding:9px 13px;display:inline-block}
.tn-scan-prem b{color:var(--ink)}
@media (max-width:640px){.tn-scan-card{flex-direction:column;text-align:center}.tn-scan-right{width:100%}}

/* ===== Scan-credit bar on the Turnitin upload card ===== */
.tno-credits{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;
  background:var(--panel2);border:1px solid var(--line2);border-radius:11px;padding:11px 14px;margin-bottom:14px;
  font-size:13.5px;color:var(--ink)}
.tno-credits.empty{border-color:color-mix(in srgb,var(--warn) 45%,transparent);background:rgba(216,162,52,.08)}
.tno-credits.has{border-color:color-mix(in srgb,var(--ok) 40%,transparent);background:rgba(63,185,80,.07)}
.tno-credits.staff{border-color:color-mix(in srgb,var(--acc) 40%,transparent);background:rgba(124,131,255,.08)}
.tno-cred-txt b{color:var(--ink);font-weight:800}
.tno-buy-scan{flex-shrink:0;background:linear-gradient(135deg,var(--acc),#a06bff);color:#fff;border:0;
  font-weight:700;border-radius:9px;padding:8px 16px;box-shadow:0 4px 14px -4px rgba(124,131,255,.5)}
.tno-buy-scan:hover{filter:brightness(1.08)}

/* locked upload area (no scans): blur + disable the box & submit, show a small lock chip */
.tno-uparea{position:relative}
.tno-uparea.tno-locked > .upload-zone,
.tno-uparea.tno-locked > .tno-selected,
.tno-uparea.tno-locked > .tno-submit{
  filter:blur(3px);opacity:.4;pointer-events:none;user-select:none;transition:filter .2s,opacity .2s}
.tno-lock{display:none}
.tno-uparea.tno-locked .tno-lock{display:inline-flex;position:absolute;left:50%;top:50%;
  transform:translate(-50%,-50%);z-index:5;align-items:center;gap:8px;pointer-events:none;
  padding:9px 16px;border-radius:999px;background:rgba(20,24,33,.92);
  border:1px solid var(--line2);box-shadow:0 8px 24px -10px rgba(0,0,0,.6);
  color:var(--ink);font-weight:700;font-size:14px}
.tno-lock-ic{font-size:16px;line-height:1}
.tno-lock-txt{letter-spacing:.2px}

/* ===== Admin: grant scan credits ===== */
.tno-grant{display:flex;flex-wrap:wrap;align-items:center;gap:9px;margin:0 0 16px;font-size:13px;color:var(--mut)}
.tno-grant-lbl{font-weight:700;color:var(--ink)}
.tno-grant input{background:var(--panel2);border:1px solid var(--line2);border-radius:8px;color:var(--ink);
  padding:7px 11px;font:inherit;font-size:13px}
.tno-grant input[type=email]{min-width:220px;flex:1;max-width:300px}
.tno-grant input[type=number]{width:70px;text-align:center}
.tno-grant input:focus{outline:none;border-color:var(--acc)}
.tno-grant-btn{background:var(--panel2);border:1px solid var(--line2);border-radius:8px;color:var(--ink);
  padding:7px 15px;font-size:13px;font-weight:600;cursor:pointer;transition:.15s}
.tno-grant-btn:hover{border-color:var(--acc);color:var(--acc)}

/* sidebar legal links */
.side-legal{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:3px 14px;
  padding:14px 6px 6px;margin-top:14px;border-top:1px solid var(--line)}
.side-legal a{position:relative;color:var(--faint);font-size:12px;letter-spacing:.3px;
  text-decoration:none;line-height:1;transition:color .15s}
.side-legal a:hover{color:var(--ink)}
/* middot between links (not before the first) */
.side-legal a + a::before{content:"·";position:absolute;left:-9px;top:50%;transform:translateY(-50%);
  color:var(--faint);opacity:.55;line-height:0;pointer-events:none}
.mobile-legal{display:none}   /* desktop: links live in the sidebar; mobile shows this footer */

/* FAQ */
.faq-tabs{display:flex;gap:4px;flex-wrap:wrap;max-width:820px;
  border-bottom:1px solid var(--line);margin:18px 0 22px}
.faq-tab{background:none;border:0;font:inherit;font-size:13.5px;font-weight:600;color:var(--mut);
  padding:10px 14px;cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px;white-space:nowrap}
.faq-tab:hover{color:var(--ink)}
.faq-tab.active{color:var(--ink);border-bottom-color:var(--acc)}
.faq-group{max-width:820px;display:flex;flex-direction:column;gap:10px}
.faq-group.hidden{display:none}
.faq-item{background:var(--panel);border:1px solid var(--line);border-radius:12px;overflow:hidden}
.faq-item summary{list-style:none;cursor:pointer;padding:16px 48px 16px 18px;position:relative;
  font-size:14.5px;font-weight:650;color:var(--ink);user-select:none}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"";position:absolute;right:20px;top:50%;width:9px;height:9px;
  border-right:2px solid var(--mut);border-bottom:2px solid var(--mut);
  transform:translateY(-70%) rotate(45deg);transition:transform .2s}
.faq-item[open] summary::after{transform:translateY(-30%) rotate(225deg)}
.faq-item[open] summary{color:var(--acc)}
.faq-item[open]{border-color:color-mix(in srgb,var(--acc) 45%,var(--line))}
.faq-item p{margin:0;padding:2px 18px 18px;font-size:14px;line-height:1.65;color:var(--mut)}
.faq-item summary:hover{color:var(--acc)}

/* ---------- (legacy) top bar ---------- */
.topbar{
  height:60px; flex:0 0 60px;
  display:flex; align-items:center; justify-content:space-between;
  padding:0 26px; border-bottom:1px solid var(--line);
  background:rgba(12,15,21,.6); backdrop-filter:blur(8px);
}
.brand{display:flex;align-items:center;gap:11px}
.brand-logo{height:48px;width:auto;display:block;overflow:visible}
/* gentle floating triangles */
.brand-logo .tri{transform-box:fill-box;transform-origin:center;animation:float 3.2s ease-in-out infinite}
.brand-logo .t1{animation-delay:0s}
.brand-logo .t2{animation-delay:.5s}
.brand-logo .t3{animation-delay:1s}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-2.5px)}}
@media (prefers-reduced-motion:reduce){.brand-logo .tri{animation:none}}
.brand-tag{font-size:12px;color:var(--faint);letter-spacing:.3px}

/* honesty banner */
.notice{
  flex:0 0 auto;
  font-size:12.5px;color:#cdd6e3;line-height:1.5;
  padding:9px 26px;border-bottom:1px solid var(--line);
  background:rgba(216,162,52,.07);
}
.notice b{color:var(--warn)}

/* ---------- workspace ---------- */
.workspace{
  flex:1 1 auto; min-height:0;
  display:grid; grid-template-columns:1fr 1fr; gap:18px; width:100%;
}
.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;
  box-shadow:0 12px 40px rgba(0,0,0,.35);
  overflow:hidden;
}
/* --- animated edge effects: input pane while humanizing, output pane while make-all-green --- */
.pane.fx-humanizing, .pane.fx-greening{ position:relative; isolation:isolate; }
@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(124,131,255,.30); }
  50%    { box-shadow:0 12px 40px rgba(0,0,0,.35), 0 0 0 1px #9aa0ff, 0 0 32px 5px rgba(124,131,255,.62); }
}
@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,.62); }
}
.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; }
@property --fxang{ syntax:'<angle>'; initial-value:0deg; inherits:false; }
@keyframes fx-spin{ to{ --fxang:360deg; } }
@supports ((-webkit-mask-composite:xor) or (mask-composite:exclude)){
  .pane.fx-humanizing::after, .pane.fx-greening::after{
    content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; z-index:6;
    padding:2px;
    -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite:xor; mask-composite:exclude;
    animation:fx-spin 1.25s linear infinite;
  }
  .pane.fx-humanizing::after{ background:conic-gradient(from var(--fxang), transparent 0 68%, #c4c7ff 80%, #fff 88%, #c4c7ff 95%, transparent 100%); }
  .pane.fx-greening::after{ background:conic-gradient(from var(--fxang), transparent 0 68%, #86f3b6 80%, #fff 88%, #86f3b6 95%, transparent 100%); }
}
@media (prefers-reduced-motion:reduce){
  .pane.fx-humanizing::after, .pane.fx-greening::after{ animation:none; }
}
.pane-head{
  flex:0 0 auto; position:relative;
  display:flex; align-items:center; justify-content:space-between;
  padding:13px 16px; border-bottom:1px solid var(--line);
  background:rgba(255,255,255,.015);
}
/* ring centered in the output bar */
.head-ring{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
}
.head-ring .ring-num{font-size:13px}
.pane-title{font-size:13px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--mut)}
.pane-meta{font-size:12px;color:var(--faint)}
.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}
.usage-bar .uh{display:inline-flex;align-items:center;gap:5px;white-space:nowrap}
.usage-bar .uh.low b{color:var(--bad)}
.usage-bar .uh-reset{color:var(--faint);white-space:nowrap;cursor:default;text-align:center}
.scans-bar{margin:8px 0 18px;font-size:13px;min-height:18px}
.scans-bar .sb-ok{color:var(--mut)}
.scans-bar .sb-ok b{color:var(--ink);font-weight:700}
.scans-bar .sb-ok.low b{color:var(--bad)}
.scans-bar .sb-lock{color:var(--mut)}
.scans-bar .sb-lock a{color:var(--acc);font-weight:600}
.head-right{display:flex;align-items:center;gap:16px}
.level{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--mut);font-weight:600}
.level select{
  background:var(--panel2);color:var(--ink);border:1px solid var(--line2);
  border-radius:8px;padding:4px 9px;font-family:inherit;font-size:13px;font-weight:600;
  cursor:pointer;outline:none;transition:border-color .15s;
}
.level select:hover{border-color:var(--acc)}
.level select:focus{border-color:var(--acc)}

/* editor + result share size */
.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)}
/* click an output sentence -> highlight the matching input sentence with a
   backdrop layer behind the textarea, styled like the output highlights. */
.ta-wrap{position:relative;flex:1 1 auto;min-height:0;display:flex}
.ta-wrap > textarea.editor{position:relative;z-index:1;background:transparent;scrollbar-width:none}
.ta-wrap > textarea.editor::-webkit-scrollbar{width:0;height:0}
.ta-backdrop{position:absolute;inset:0;z-index:0;margin:0;border:0;overflow:hidden;
  white-space:pre-wrap;overflow-wrap:break-word;color:transparent;pointer-events:none;resize:none}
.ihl{border-radius:5px;background:rgba(124,131,255,.20);
  box-shadow:inset 0 -2px 0 rgba(124,131,255,.6);color:transparent}  /* purple, dark theme */
body.light .ihl{background:rgba(60,130,246,.16);box-shadow:inset 0 -2px 0 rgba(60,130,246,.5)}
.result .sent{cursor:pointer}
.result{line-height:2}
.placeholder{color:var(--faint);font-style:italic}
/* structure-preserving output */
.result .line{display:block;margin:0 0 2px}
.result .line.heading{font-weight:700;color:var(--ink);margin:14px 0 4px;letter-spacing:.2px}
.result .line.heading:first-child{margin-top:0}
.result .blank{height:.85em}

/* sentence highlights */
.sent{padding:1px 3px;border-radius:5px;transition:background .15s}
.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}
/* "Check Meaning": sentences whose meaning may have drifted — light pink. */
.sent.meaning-bad{background:rgba(255,105,180,.18);box-shadow:inset 0 -2px 0 rgba(255,105,180,.55);color:#ffc4dd}
body.light .sent.meaning-bad{color:#b03060}

/* === Tier-1 showstopper animations === */
/* 1) red->green ripple sweep: sentences flash in a staggered wave on humanize / make-all-green */
@keyframes fx-sent-wave{ 0%{filter:brightness(1)} 35%{filter:brightness(1.5)} 100%{filter:brightness(1)} }
@keyframes fx-sent-green{
  0%{ box-shadow:inset 0 -2px 0 rgba(63,185,80,.45) }
  35%{ box-shadow:inset 0 -2px 0 rgba(63,185,80,.85), 0 0 18px 3px rgba(63,185,80,.6) }
  100%{ box-shadow:inset 0 -2px 0 rgba(63,185,80,.45) }
}
#output.fx-ripple .sent{ animation:fx-sent-wave .5s ease-out both; animation-delay:calc(var(--i,0) * 42ms) }
#output.fx-ripple .sent.human{ animation:fx-sent-wave .5s ease-out both, fx-sent-green .72s ease-out both; animation-delay:calc(var(--i,0) * 42ms) }

/* 2) animated gauge: arc + colour sweep to value (number count-up is in JS), pop when it lands */
@property --deg{ syntax:'<angle>'; initial-value:0deg; inherits:false; }
@property --col{ syntax:'<color>'; initial-value:#6e7681; inherits:false; }
.ring,.head-ring{ transition:--deg .9s cubic-bezier(.22,1,.36,1), --col .5s linear; }
.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)} }

/* 3) "all green" celebration: confetti burst + checkmark draw */
.fx-celebrate{ position:fixed; inset:0; z-index:9999; pointer-events:none; display:flex; align-items:center; justify-content:center }
.fx-celebrate i{ position:absolute; left:50%; top:44%; width:9px; height:9px; background:var(--c); border-radius:2px; opacity:0;
  animation:fx-confetti var(--d) cubic-bezier(.2,.7,.3,1) forwards }
@keyframes fx-confetti{
  0%{ transform:translate(-50%,-50%) rotate(0) scale(.5); opacity:1 }
  100%{ transform:translate(calc(-50% + var(--x)), calc(-50% + var(--y))) rotate(var(--r)) scale(1); opacity:0 }
}
.fx-check{ width:118px; height:118px; transform:scale(.6); opacity:0; animation:fx-check-pop 1.7s ease-out forwards;
  filter:drop-shadow(0 0 14px rgba(63,185,80,.55)) }
.fx-check circle{ fill:none; stroke:#3fb950; stroke-width:3; stroke-dasharray:151; stroke-dashoffset:151; animation:fx-draw .5s ease-out .05s forwards }
.fx-check path{ fill:none; stroke:#3fb950; stroke-width:4; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:48; stroke-dashoffset:48; animation:fx-draw .4s ease-out .45s forwards }
@keyframes fx-check-pop{ 0%{transform:scale(.6);opacity:0} 12%{transform:scale(1.08);opacity:1} 24%{transform:scale(1)} 78%{opacity:1} 100%{transform:scale(1);opacity:0} }
@keyframes fx-draw{ to{ stroke-dashoffset:0 } }
@media (prefers-reduced-motion:reduce){
  #output.fx-ripple .sent,#output.fx-ripple .sent.human{ animation:none }
  .ring,.head-ring{ transition:none }
  .ring.fx-pop{ animation:none }
  .fx-celebrate i,.fx-check,.fx-check circle,.fx-check path{ animation:none }
}

/* ---------- footers / buttons ---------- */
.pane-foot{
  flex:0 0 auto;
  display:flex; align-items:center; gap:12px;
  padding:13px 16px; border-top:1px solid var(--line);
  background:rgba(255,255,255,.015);
}
.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-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 svg{display:block;transition:transform .15s}
.btn-clear:hover{background:var(--bad);color:#fff;border-color:var(--bad);transform:translateY(-1px)}
/* Clear-all: flash red + shake the trash can on click */
.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)}}
.btn-primary{
  flex:1; justify-content:center;
  background:linear-gradient(135deg,var(--acc),var(--acc2)); color:#fff;
  box-shadow:0 6px 18px rgba(124,131,255,.32);
}
.btn-primary:hover{filter:brightness(1.08);transform:translateY(-1px)}
.btn-ghost{background:var(--panel2);border-color:var(--line2);color:var(--ink)}
.btn-ghost:hover{background:#1d2433;border-color:#384355}
.btn-ghost .dot{width:8px;height:8px;border-radius:50%;background:var(--acc)}
/* Make all green: green border + font + icon */
.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)}
/* Stop button: red border + font (only shown during make-all-green) */
.btn-stop{color:var(--bad);border-color:var(--bad);background:transparent}
.btn-stop:hover{background:var(--bad);color:#fff;border-color:var(--bad)}
/* Copy button: animated confirmation on click */
#btnCopy{transition:background .2s,border-color .2s,color .2s,transform .12s}
#btnCopy.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;animation:copyCheck .35s cubic-bezier(.2,1.4,.4,1)}
@keyframes copyCheck{0%{transform:scale(0) rotate(-25deg);opacity:0}60%{transform:scale(1.3) rotate(8deg)}100%{transform:scale(1) rotate(0);opacity:1}}
/* Check / Humanize: snappy press + success pop */
#btnCheck,#btnHumanize{transition:filter .15s,transform .1s,box-shadow .2s}
#btnCheck:active:not(:disabled),#btnHumanize:active:not(:disabled){transform:scale(.95)}
#btnCheck.done,#btnHumanize.done{animation:btnDone .55s cubic-bezier(.2,1.3,.4,1)}
@keyframes btnDone{0%{transform:scale(1);box-shadow:0 0 0 0 rgba(124,131,255,.45)}
  35%{transform:scale(1.08);box-shadow:0 0 0 6px rgba(124,131,255,.18)}
  100%{transform:scale(1);box-shadow:0 0 0 12px rgba(124,131,255,0)}}
.btn:disabled{opacity:.5;cursor:not-allowed;transform:none}
.btn.loading{position:relative;color:transparent}
.btn.loading::after{
  content:"";position:absolute;top:50%;left:50%;right:auto;bottom:auto;
  width:16px;height:16px;margin:-8px 0 0 -8px;border-radius:50%;background:none;
  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{gap:16px}
.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)}
#btnCopy{margin-left:auto}

/* ---------- score chip + ring ---------- */
.score-chip{display:flex;align-items:center;gap:11px}
/* AI score chip (replaces the donut): the % number + a thin level bar, coloured & glowing by score */
.ring{
  flex:0 0 auto; padding:5px 11px 7px; 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{
  width:auto; height:auto; background:transparent; border-radius:0;
  font-size:14px; 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.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} }
@media (prefers-reduced-motion:reduce){ .ring.safe::after{ animation:none; opacity:.5 } }

/* === Tier-2 / Tier-3 polish === */
/* Output "rewrite reveal": a light shimmer sweeps across new output once */
#output.fx-reveal{ position:relative }
#output.fx-reveal::after{ content:""; position:absolute; inset:0; pointer-events:none; z-index:3;
  background:linear-gradient(105deg, transparent 38%, rgba(124,131,255,.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} }

/* Scanning line over the input while "Check for AI" runs */
.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(124,131,255,.28), transparent);
  box-shadow:0 0 14px rgba(124,131,255,.45); animation:fx-scan 1.1s ease-in-out infinite }
@keyframes fx-scan{ 0%{top:-12%} 100%{top:100%} }

/* Humanize button: gradient shine sweep at rest + ripple on click */
#btnHumanize{ position:relative; overflow:hidden }
#btnHumanize: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 } }

/* View transitions: fade/slide in when a nav view becomes visible */
.view:not(.hidden){ animation:fx-view-in .34s ease both }
@keyframes fx-view-in{ from{opacity:0; transform:translateY(10px)} to{opacity:1; transform:none} }

/* Theme crossfade on dark/light toggle */
body,.sidebar,.topbar,.nav-item,.pane{ transition:background-color .35s ease, color .35s ease, border-color .35s ease }

@media (prefers-reduced-motion:reduce){
  #output.fx-reveal::after,.pane.fx-scanning::after,#btnHumanize:not(.loading)::before,
  .btn-ripple,.view:not(.hidden){ animation:none }
  body,.sidebar,.topbar,.nav-item,.pane{ transition:none }
}
.chip-text{display:flex;flex-direction:column;line-height:1.25}
.tn-logo{display:flex;align-items:center;gap:7px;margin-bottom:5px;align-self:flex-start}
.tn-icon{height:26px;width:auto;display:block}
.tn-word{font-size:21px;font-weight:700;letter-spacing:-.4px;color:#e8edf4;line-height:1}
.tn-word sup{font-size:9px;color:#8b97a8;margin-left:1px;top:-.7em}
.chip-text b{font-size:13px;font-weight:700}
.chip-text small{font-size:11px;color:var(--faint)}

/* ---------- toast ---------- */
.toast{
  position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(20px);
  background:#1c2330;border:1px solid var(--line2);color:var(--ink);
  padding:10px 18px;border-radius:10px;font-size:13px;opacity:0;pointer-events:none;
  transition:all .25s;box-shadow:0 10px 30px rgba(0,0,0,.4);
}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* ---------- accounts: modals, chip, profile ---------- */
.modal-overlay{position:fixed;inset:0;background:rgba(5,8,14,.62);backdrop-filter:blur(3px);
  display:flex;align-items:center;justify-content:center;z-index:100;padding:16px}
.modal-overlay.hidden{display:none}
.modal-card{position:relative;width:100%;max-width:380px;background:var(--panel);
  border:1px solid var(--line2);border-radius:16px;padding:26px 24px;box-shadow:0 24px 70px rgba(0,0,0,.5)}
.modal-close{position:absolute;top:10px;right:14px;background:transparent;border:0;color:var(--mut);
  font-size:24px;line-height:1;cursor:pointer}
.modal-close:hover{color:var(--ink)}
.brand-mini{font-weight:800;font-size:18px;margin-bottom:16px}
.auth-tabs{display:flex;gap:6px;background:var(--panel2);border-radius:10px;padding:4px;margin-bottom:16px}
.auth-tab{flex:1;background:transparent;border:0;color:var(--mut);font-weight:700;font-size:14px;
  padding:8px;border-radius:7px;cursor:pointer}
.auth-tab.active{background:linear-gradient(135deg,var(--acc),var(--acc2));color:#fff}
.auth-input{width:100%;background:var(--panel2);border:1px solid var(--line2);border-radius:10px;
  padding:11px 13px;color:var(--ink);font-family:inherit;font-size:14px;margin-bottom:11px;outline:none}
.auth-input:focus{border-color:var(--acc)}
.auth-err{color:var(--bad);font-size:12.5px;min-height:16px;margin-bottom:8px}
.auth-note{background:color-mix(in srgb,var(--acc) 14%,transparent);border:1px solid color-mix(in srgb,var(--acc) 40%,transparent);
  color:var(--ink);font-size:13px;line-height:1.4;border-radius:10px;padding:10px 12px;margin:4px 0 12px;text-align:center}
.auth-note.hidden{display:none}
#authMain.hidden,#authVerify.hidden,#authReset.hidden{display:none}
.dl-notice{display:none;margin-top:14px;padding:12px 14px;border-radius:10px;font-size:13.5px;line-height:1.5;
  background:color-mix(in srgb,#f7b733 14%,transparent);border:1px solid color-mix(in srgb,#f7b733 45%,transparent);color:var(--ink)}
.dl-notice a{color:var(--acc);font-weight:600;text-decoration:none}
.dl-notice a:hover{text-decoration:underline}
.code-input{text-align:center;font-size:22px;font-weight:700;letter-spacing:8px;padding-left:8px}
.auth-resend{text-align:center;font-size:12.5px;color:var(--mut);margin-top:12px}
.auth-resend a{color:var(--acc);text-decoration:none;font-weight:600}
.auth-resend a:hover{text-decoration:underline}
.gbtn{width:100%;display:flex;align-items:center;justify-content:center;gap:11px;
  background:var(--panel2);border:1px solid var(--line2);border-radius:10px;color:var(--ink);
  font-family:inherit;font-size:14.5px;font-weight:600;padding:11px;cursor:pointer;
  margin-bottom:10px;transition:.15s}
.gbtn:hover{border-color:var(--acc);background:var(--panel)}
.gbtn-g{flex:0 0 auto}
.auth-or{display:flex;align-items:center;gap:10px;color:var(--faint);font-size:12px;margin:2px 0 12px}
.auth-or::before,.auth-or::after{content:"";flex:1;height:1px;background:var(--line)}
#authSubmit{width:100%;justify-content:center}

#accountBox .profile-chip{display:flex;align-items:center;gap:10px;width:100%;background:var(--panel2);
  border:1px solid var(--line2);border-radius:10px;padding:8px 10px;cursor:pointer;color:var(--ink);text-align:left}
#accountBox .profile-chip:hover{border-color:var(--acc)}
#btnLogin{width:100%;justify-content:center}
.avatar{flex:0 0 auto;width:30px;height:30px;border-radius:50%;display:flex;align-items:center;
  justify-content:center;font-weight:800;font-size:13px;color:#fff;background:linear-gradient(135deg,var(--acc),var(--acc2))}
.avatar.big{width:46px;height:46px;font-size:18px}
.pc-text{display:flex;flex-direction:column;min-width:0}
.pc-text b{font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:150px}
.pc-text small{font-size:11px;color:var(--mut)}
.avatar.admin{background:linear-gradient(135deg,#f7b733,#fc4a1a)}
.plan-admin{display:inline-flex;align-items:center;gap:4px;font-size:10.5px;font-weight:800;
  letter-spacing:.5px;text-transform:uppercase;color:#f7b733}
.plan-admin::before{content:"★";font-size:10px}
.prof-head{display:flex;align-items:center;gap:12px;margin-bottom:8px}
.prof-head b{display:block;font-size:15px}
.prof-head small{color:var(--mut);font-size:12.5px}
#profileBody h4{font-size:11.5px;text-transform:uppercase;letter-spacing:.6px;color:var(--faint);margin:18px 0 6px}
.prow{display:flex;justify-content:space-between;gap:10px;font-size:13px;padding:7px 0;border-bottom:1px solid var(--line)}
.pmut{color:var(--mut);font-size:12px;text-align:right}
/* clean card-style table for the profile */
.prof-table{background:var(--panel2);border:1px solid var(--line);border-radius:12px;overflow:hidden;margin:6px 0 2px}
.prof-table .prow{padding:11px 14px;border-bottom:1px solid var(--line);align-items:center}
.prof-table .prow:last-child{border-bottom:none}
.prof-table .prow > span:first-child{color:var(--mut);font-size:13px}
.prof-table .pval{color:var(--ink);font-weight:600;font-size:13px;text-align:right}
/* profile accordion: 3 stacked boxes, click to expand */
.prof-acc{display:flex;flex-direction:column;gap:10px;margin:14px 0 4px}
.acc-item{background:var(--panel2);border:1px solid var(--line);border-radius:12px;overflow:hidden}
.acc-item.open{border-color:var(--acc)}
.acc-head{width:100%;display:flex;align-items:center;justify-content:space-between;
  background:transparent;border:0;cursor:pointer;color:var(--ink);
  font-size:13.5px;font-weight:700;padding:13px 14px;transition:.15s}
.acc-head:hover{background:var(--line)}
.acc-item.open .acc-head{color:var(--acc)}
.acc-chev{color:var(--mut);font-size:16px;transition:transform .2s}
.acc-item.open .acc-chev{transform:rotate(180deg);color:var(--acc)}
.tab-badge{display:inline-flex;align-items:center;justify-content:center;min-width:18px;
  height:18px;padding:0 5px;border-radius:9px;font-size:11px;font-weight:700;
  background:var(--line2);color:var(--ink);margin-left:4px}
/* collapsed by default; expand when open */
.acc-body{max-height:0;overflow:hidden;transition:max-height .25s ease;padding:0 12px}
.acc-item.open .acc-body{max-height:420px;overflow-y:auto;padding:0 12px 12px}
.acc-body .prof-table{margin-top:0}
.acc-body .pmut{padding:4px 2px}
/* profile action buttons */
.btn-admin{justify-content:center;color:#fff;border:0;
  background:linear-gradient(135deg,var(--acc),var(--acc2));
  box-shadow:0 6px 18px rgba(124,131,255,.28)}
.btn-admin:hover{filter:brightness(1.08);transform:translateY(-1px)}
.btn-logout{justify-content:center;color:var(--bad);
  background:color-mix(in srgb,var(--bad) 12%,transparent);
  border:1px solid color-mix(in srgb,var(--bad) 42%,transparent)}
.btn-logout:hover{background:var(--bad);color:#fff;border-color:var(--bad)}
.modal-wide{max-width:1280px;width:96vw;max-height:90vh;overflow:auto}
.admin-title{font-size:16px;font-weight:800;margin-bottom:14px}
/* admin dashboard cards + controls */
.admin-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:14px}
.acard{background:var(--panel2);border:1px solid var(--line);border-radius:12px;padding:14px 16px}
.acard.click{cursor:pointer;transition:border-color .15s,transform .15s,box-shadow .15s}
.acard.click:hover{border-color:var(--acc);transform:translateY(-2px)}
.acard.active{border-color:var(--acc);box-shadow:0 0 0 1px var(--acc),0 8px 22px rgba(124,131,255,.18)}
.acard-n{font-size:24px;font-weight:800;color:var(--ink);line-height:1.1}
.acard-n.on{color:#3fb950}
.acard-l{font-size:11px;text-transform:uppercase;letter-spacing:.5px;color:var(--mut);margin-top:3px}
.admin-controls{display:flex;align-items:center;gap:14px;margin-bottom:12px}
.afilter{font-size:13px;color:var(--mut);display:inline-flex;align-items:center;gap:8px}
.afilter select{background:var(--panel2);border:1px solid var(--line2);border-radius:8px;color:var(--ink);
  padding:6px 10px;font-family:inherit;font-size:13px;outline:none;cursor:pointer}
.afilter select:focus{border-color:var(--acc)}
.afilter-count{font-size:12px;color:var(--faint);margin-left:auto}
.admin-table th.sortable{cursor:pointer;user-select:none;white-space:nowrap}
.admin-table th.sortable:hover{color:var(--ink)}
.admin-table th.sortable.active{color:var(--acc)}
@media (max-width:720px){.admin-cards{grid-template-columns:repeat(2,1fr)}}
.admin-stat{font-size:13px;color:var(--mut);margin-bottom:14px}
.admin-stat b{color:var(--ink);font-size:16px}
.admin-user{border:1px solid var(--line);border-radius:10px;padding:11px 13px;margin-bottom:10px}
.au-top{display:flex;justify-content:space-between;gap:10px;align-items:baseline}
.au-top b{font-size:13.5px}
.au-top small{color:var(--mut);font-size:11.5px;white-space:nowrap}
.au-meta{font-size:12px;color:var(--mut);margin-top:4px}
.au-loc{font-size:11.5px;color:var(--faint);margin-top:5px;word-break:break-all}
.admin-table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:10px}
.admin-table{width:100%;border-collapse:collapse;font-size:12.5px}
.admin-table th{text-align:left;color:var(--faint);font-size:10px;text-transform:uppercase;
  letter-spacing:.5px;padding:9px 10px;background:var(--panel2);white-space:nowrap}
.admin-table td{padding:10px;border-top:1px solid var(--line);vertical-align:middle;color:var(--ink)}
.admin-table .ac{text-align:center}
.admin-table .ae{font-weight:600;word-break:break-word;min-width:130px}
.admin-table .ae small{display:block;font-weight:400;color:var(--mut);font-size:11px}
.admin-table tbody tr:hover td{background:var(--panel2)}
.admin-table tr.row-click{cursor:pointer}
.status-online{display:inline-flex;align-items:center;gap:6px;color:#3fb950;font-weight:600;white-space:nowrap}
.status-online .dot{width:8px;height:8px;border-radius:50%;background:#3fb950;
  box-shadow:0 0 0 3px rgba(63,185,80,.18)}
.status-off{color:var(--faint);white-space:nowrap}
.admin-table tr.row-blocked td{background:color-mix(in srgb,var(--bad) 16%,transparent);color:var(--bad)}
.admin-table tr.row-blocked:hover td{background:color-mix(in srgb,var(--bad) 26%,transparent)}
.blk-tag{display:inline-block;background:color-mix(in srgb,var(--bad) 22%,transparent);
  color:var(--bad);font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;
  padding:2px 6px;border-radius:6px;vertical-align:middle}
.btn-danger{background:var(--bad);color:#fff;border-color:transparent}
.btn-danger:hover{filter:brightness(1.08)}
.blk-btn{white-space:nowrap}
.role-tag{display:inline-block;background:color-mix(in srgb,#f7b733 22%,transparent);color:#f7b733;
  font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;padding:2px 6px;border-radius:6px;vertical-align:middle}
.role-tag.mod{background:color-mix(in srgb,var(--acc) 24%,transparent);color:var(--acc)}
.blk-actions{display:flex;gap:6px;justify-content:center}
.blk-btn:disabled{opacity:.4;cursor:default;filter:none}

/* ---------- responsive / mobile ---------- */
@media (max-width:820px){
  html,body{height:auto;overflow:auto}
  .app-shell{flex-direction:column;height:auto;min-height:100dvh}

  /* sidebar becomes a top bar: brand row + nav tabs row */
  .sidebar{
    width:100%;flex:0 0 auto;flex-direction:row;flex-wrap:wrap;align-items:center;gap:10px;
    border-right:0;border-bottom:1px solid var(--line);padding:10px 14px;
  }
  .side-brand{flex:1 1 auto;border-bottom:0;margin:0;padding:0;order:1}
  .theme-toggle{position:static;order:3;flex:0 0 auto}
  /* mobile account: just the avatar (tap opens the full profile) */
  #accountBox .pc-text{display:none}
  #accountBox .profile-chip{width:auto;background:transparent;border:0;padding:2px;gap:0}
  #accountBox .avatar{width:34px;height:34px;font-size:14px}
  #btnLogin{width:auto;padding:8px 16px;white-space:nowrap}
  .side-brand .brand-logo{height:36px}
  /* nav collapses into a hamburger; tapping it slides the links down as an overlay
     so the top bar stays one compact row and the tool gets the screen */
  .nav-burger{display:inline-flex;order:4;flex:0 0 auto}
  .nav{display:none}
  .sidebar.menu-open{z-index:100}        /* lift the whole bar (+ menu) above the content */
  .sidebar.menu-open .nav{
    display:flex;flex-direction:column;gap:4px;
    position:absolute;left:0;right:0;top:100%;z-index:60;
    background:var(--panel);border-bottom:1px solid var(--line);
    padding:8px;box-shadow:0 18px 36px rgba(0,0,0,.5)}
  .sidebar.menu-open .nav-item{flex:0 0 auto;width:100%;justify-content:flex-start;
    padding:13px 14px;font-size:15px;white-space:normal;border-radius:10px}
  .sidebar.menu-open .nav-sep:not(.hidden){display:block}
  .nav-tn-word{font-size:14px}
  /* move legal links to a footer at the bottom of the page (not the top bar) */
  .side-legal{display:none}
  .mobile-legal{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:6px 20px;
    padding:18px 14px calc(20px + env(safe-area-inset-bottom,0px));
    border-top:1px solid var(--line)}
  .mobile-legal a{position:relative;color:var(--faint);font-size:12.5px;letter-spacing:.3px;
    text-decoration:none;line-height:1;transition:color .15s}
  .mobile-legal a + a::before{content:"·";position:absolute;left:-12px;top:50%;transform:translateY(-50%);
    color:var(--faint);opacity:.55;line-height:0;pointer-events:none}
  .mobile-legal a:hover{color:var(--ink)}
  .side-foot{display:flex;align-items:center;flex:0 0 auto;order:2;border-top:0;padding:0;margin:0}
  .sidebar-toggle{display:none}
  .app-shell.collapsed .sidebar{flex-basis:auto;width:100%;padding:10px 14px;overflow:visible;border-bottom:1px solid var(--line)}

  /* content scrolls with the page */
  .content{overflow:visible;min-height:auto}
  .view{overflow:visible;min-height:auto;padding:14px}

  /* humanizer: stack input over output */
  .workspace{grid-template-columns:1fr;min-height:auto;gap:14px}
  .pane{min-height:0}
  .pane .editor{min-height:200px;max-height:48vh}
  .pane-head{flex-wrap:wrap;gap:8px;row-gap:8px}
  .head-right{flex-wrap:wrap;gap:10px;justify-content:flex-end}
  .pane-foot{flex-wrap:wrap}
  #btnCopy{margin-left:0}

  /* turnitin check */
  .view-title{font-size:19px}
  .title-tn-icon{height:22px}
  .title-tn-word{font-size:20px}
  .upload-zone{padding:28px 16px;margin-top:14px}
  .rep-toolbar,.scan-box,.rep-done{max-width:100%}

  /* pricing: single column */
  .plans{grid-template-columns:1fr;max-width:100%}
}

/* phones: tighten the nav tabs to icons-friendly size */
@media (max-width:460px){
  .nav-item{padding:9px 6px;font-size:12.5px;gap:7px}
  .nav-tn-word{font-size:13px}
  .mobile-legal{gap:8px 16px}
  .mobile-legal a{font-size:12px}
  .btn{padding:11px 14px}
  .view{padding:12px}
}

/* ==== Turnitin manual-order section ==================================== */
.tno-intro{max-width:840px;color:var(--mut);font-size:15px;line-height:1.55;margin:6px 0 18px}
.tno-upcard{max-width:840px;background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:18px}
.tno-upcard .upload-zone{margin:0 0 14px}
.upz-hint{color:var(--faint);font-size:12px;margin-top:6px}
.tno-selected{background:var(--panel2);border:1px solid var(--line2);border-radius:10px;
  padding:10px 14px;margin-bottom:12px;color:var(--ink);font-size:14px;display:flex;align-items:center;gap:8px}
.tno-selected.hidden{display:none}
.tno-clear{margin-left:auto;background:none;border:none;color:var(--faint);cursor:pointer;font-size:14px}
.tno-clear:hover{color:var(--bad)}
.tno-note{width:100%;background:var(--panel2);border:1px solid var(--line2);border-radius:10px;
  color:var(--ink);padding:10px 12px;font:inherit;font-size:14px;resize:vertical;margin-bottom:12px}
.tno-submit{width:100%}
.tno-submit:disabled{opacity:.5;cursor:not-allowed;transform:none;filter:none}
.tno-section,.tno-admin{max-width:840px;margin-top:30px}
.tno-h3{font-size:16px;color:var(--ink);margin:0 0 12px;display:flex;align-items:center;gap:10px}
.tno-counts{font-size:12px;font-weight:400;color:var(--mut)}
.tno-list{display:flex;flex-direction:column;gap:12px}
.tno-card{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:14px 16px}
.tno-row{display:flex;align-items:center;justify-content:space-between;gap:12px}
.tno-file{font-weight:600;color:var(--ink);font-size:14px;word-break:break-word}
.tno-meta{color:var(--faint);font-size:12px;margin-top:5px}
.tno-result{margin-top:10px;color:var(--ink);font-size:14px;background:var(--panel2);
  border:1px solid var(--line2);border-radius:8px;padding:9px 12px}
.tno-wait{margin-top:10px;color:var(--mut);font-size:13px;font-style:italic}
.tno-dl,.tno-dl-rep{color:var(--acc);cursor:pointer;text-decoration:none}
.tno-dl:hover,.tno-dl-rep:hover{text-decoration:underline}
.tno-empty{color:var(--faint);font-size:14px;padding:6px 2px}
.tno-badge{font-size:11px;font-weight:700;padding:3px 10px;border-radius:999px;white-space:nowrap}
.tno-pending{background:rgba(216,162,52,.15);color:var(--warn);border:1px solid rgba(216,162,52,.35)}
.tno-reviewing{background:rgba(124,131,255,.15);color:var(--acc);border:1px solid rgba(124,131,255,.35)}
.tno-done{background:rgba(63,185,80,.15);color:var(--ok);border:1px solid rgba(63,185,80,.35)}
/* admin Uploads queue — professional card layout */
.tno-card{padding:16px 18px}
.tno-order{border-left:3px solid var(--line2);transition:border-color .15s}
.tno-order.st-pending{border-left-color:var(--warn)}
.tno-order.st-reviewing{border-left-color:var(--acc)}
.tno-order.st-done{border-left-color:var(--ok)}
.tno-usernote{font-style:italic;color:var(--mut)}
.tno-pill{display:inline-flex;align-items:center;font-size:12px;font-weight:600;
  padding:4px 11px;border-radius:999px;margin-right:8px}
.tno-pill.st-pending{background:rgba(216,162,52,.13);color:var(--warn)}
.tno-pill.st-reviewing{background:rgba(124,131,255,.13);color:var(--acc)}
.tno-pill.st-done{background:rgba(63,185,80,.13);color:var(--ok)}
.tno-toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:14px}
.tno-btn{display:inline-flex;align-items:center;gap:6px;background:var(--panel2);
  border:1px solid var(--line2);border-radius:9px;color:var(--ink);padding:8px 13px;
  font-size:13px;font-weight:500;cursor:pointer;white-space:nowrap;transition:.15s}
.tno-btn:hover{border-color:var(--acc);color:var(--acc)}
.tno-upbtn{display:inline-flex;align-items:center;gap:7px;max-width:230px;
  background:var(--panel2);border:1px dashed var(--line2);border-radius:9px;color:var(--mut);
  padding:8px 13px;font-size:13px;cursor:pointer;transition:.15s;overflow:hidden}
.tno-upbtn:hover{border-color:var(--acc);color:var(--ink)}
.tno-upbtn .up-ic{font-size:15px;font-weight:700;line-height:1;flex-shrink:0}
.tno-upbtn .up-txt{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tno-upbtn.has-file{border-style:solid;border-color:var(--ok);color:var(--ok);background:rgba(63,185,80,.08)}
.tno-note-field{flex:1;min-width:200px;background:var(--panel2);border:1px solid var(--line2);
  border-radius:9px;color:var(--ink);padding:9px 12px;font-size:13px}
.tno-note-field:focus{outline:none;border-color:var(--acc)}
.tno-note-field::placeholder{color:var(--faint)}
.tno-savebtn{flex-shrink:0;background:linear-gradient(135deg,var(--acc),#a06bff);border:0;
  border-radius:9px;color:#fff;font-weight:600;font-size:13px;padding:9px 22px;cursor:pointer;
  transition:.15s;box-shadow:0 2px 10px rgba(124,131,255,.25)}
.tno-savebtn:hover{filter:brightness(1.08)}
.tno-savebtn:disabled{opacity:.6;cursor:default}
/* order-submitted success popup */
.tno-thanks-card{max-width:420px;text-align:center;padding:36px 30px 28px;
  animation:tnoCardIn .28s cubic-bezier(.2,.8,.3,1.2)}
@keyframes tnoCardIn{from{transform:translateY(14px) scale(.96);opacity:0}to{transform:none;opacity:1}}
.tno-check{width:74px;height:74px;margin:4px auto 18px;border-radius:50%;
  background:rgba(63,185,80,.16);border:2px solid var(--ok);color:var(--ok);
  display:flex;align-items:center;justify-content:center;font-size:40px;font-weight:700;
  box-shadow:0 0 0 8px rgba(63,185,80,.07);animation:tnoPop .4s ease both}
@keyframes tnoPop{0%{transform:scale(.3);opacity:0}55%{transform:scale(1.15)}100%{transform:scale(1);opacity:1}}
.tno-thanks-title{margin:0 0 8px;font-size:20px;color:var(--ink)}
.tno-thanks-msg{margin:0 0 22px;color:var(--mut);font-size:15px;line-height:1.55}
.tno-thanks-ok{width:100%}
/* grouped order history */
.tno-grouplabel{font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  color:var(--faint);margin:10px 2px 4px}
.tno-counts-bar{display:flex;align-items:center;gap:12px;margin:2px 0 14px}
.tno-clearbtn{margin-left:auto;background:transparent;border:1px solid var(--line2);border-radius:8px;
  color:var(--mut);padding:6px 13px;font-size:12.5px;font-weight:600;cursor:pointer;transition:.15s}
.tno-clearbtn:hover{border-color:var(--bad);color:var(--bad)}
.tno-del{background:transparent;border:1px solid color-mix(in srgb,var(--bad) 45%,transparent);
  border-radius:8px;color:var(--bad);padding:8px 11px;font-size:13px;cursor:pointer;transition:.15s}
.tno-del:hover{background:var(--bad);color:#fff;border-color:var(--bad)}
/* Uploads queue filter tabs (active vs completed) */
.tno-tab{display:inline-flex;align-items:center;gap:7px;background:var(--panel2);border:1px solid var(--line2);
  border-radius:999px;color:var(--mut);padding:6px 14px;font-size:13px;font-weight:600;cursor:pointer;transition:.15s}
.tno-tab:hover{color:var(--ink)}
.tno-tabn{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 5px;
  border-radius:999px;background:rgba(255,255,255,.08);font-size:11px;font-weight:800}
/* Pending = orange, Completed = green */
.tno-tab[data-filter="active"] .tno-tabn{background:var(--warn);color:#0b0e14}
.tno-tab[data-filter="completed"] .tno-tabn{background:var(--ok);color:#0b0e14}
.tno-tab[data-filter="active"].active{background:rgba(216,162,52,.15);border-color:var(--warn);color:var(--warn)}
.tno-tab[data-filter="completed"].active{background:rgba(63,185,80,.15);border-color:var(--ok);color:var(--ok)}
/* user Turnitin view — how-it-works steps */
.tno-steps{display:flex;flex-wrap:wrap;align-items:stretch;gap:12px;margin:18px 0 22px}
.tno-step{display:inline-flex;align-items:center;gap:11px;
  background:linear-gradient(180deg,var(--panel),var(--panel2));border:1px solid var(--line);
  border-radius:14px;padding:11px 16px 11px 11px;transition:transform .18s,border-color .18s,box-shadow .25s}
.tno-step:hover{transform:translateY(-2px);border-color:color-mix(in srgb,var(--acc) 45%,var(--line));
  box-shadow:0 12px 28px -18px var(--acc)}
.tno-step-n{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;
  border-radius:50%;background:linear-gradient(135deg,var(--acc),#a06bff);color:#fff;font-size:14px;font-weight:800;
  box-shadow:0 4px 13px -2px rgba(124,131,255,.55)}
.tno-step-txt{display:flex;flex-direction:column;line-height:1.25}
.tno-step-txt b{font-size:13.5px;font-weight:700;color:var(--ink);letter-spacing:-.2px}
.tno-step-txt small{font-size:11.5px;color:var(--mut)}
.tno-step-sep{align-self:center;color:var(--acc);font-size:18px;font-weight:800;
  animation:tnoArrow 1.5s ease-in-out infinite}
@keyframes tnoArrow{0%,100%{transform:translateX(0);opacity:.4}50%{transform:translateX(4px);opacity:.95}}
@media (prefers-reduced-motion:reduce){.tno-step-sep{animation:none;opacity:.7}}
@media (max-width:640px){
  .tno-steps{flex-direction:column;align-items:stretch}
  .tno-step{justify-content:flex-start}
  .tno-step-sep{align-self:center;transform:rotate(90deg);animation:none;opacity:.6}
}
/* user order cards: status accent, score chips, download buttons */
.tno-mine{transition:border-color .15s}
.tno-mine.st-done{border-left:3px solid var(--ok)}
.tno-mine.st-pending,.tno-mine.st-reviewing{border-left:3px solid var(--warn)}
.tno-scorerow{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
/* user order: score gauges (AI / similarity) with colored fill bars */
.tno-gauges{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:13px}
.tno-gauge{background:var(--panel2);border:1px solid var(--line2);border-radius:11px;padding:11px 13px}
.tno-gauge-top{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.tno-gauge-lbl{font-size:12px;color:var(--mut);font-weight:600}
.tno-gauge-val{font-size:20px;font-weight:800;line-height:1}
.tno-gauge-bar{height:6px;border-radius:4px;background:var(--line2);overflow:hidden;margin-top:8px}
.tno-gauge-bar>i{display:block;height:100%;border-radius:4px;transition:width .5s cubic-bezier(.2,.8,.3,1)}
.tno-gauge.good .tno-gauge-val{color:var(--ok)} .tno-gauge.good .tno-gauge-bar>i{background:var(--ok)}
.tno-gauge.warn .tno-gauge-val{color:var(--warn)} .tno-gauge.warn .tno-gauge-bar>i{background:var(--warn)}
.tno-gauge.bad .tno-gauge-val{color:var(--bad)} .tno-gauge.bad .tno-gauge-bar>i{background:var(--bad)}
/* plain-language verdict line */
.tno-verdict{display:flex;align-items:center;gap:9px;margin-top:11px;padding:9px 13px;border-radius:9px;
  font-size:13.5px;font-weight:600;line-height:1.4}
.tno-verdict-ic{flex-shrink:0;width:20px;height:20px;border-radius:50%;display:inline-flex;align-items:center;
  justify-content:center;font-size:12px;font-weight:800}
.tno-verdict.good{background:rgba(63,185,80,.12);color:var(--ok)}
.tno-verdict.good .tno-verdict-ic{background:rgba(63,185,80,.22)}
.tno-verdict.warn{background:rgba(216,162,52,.12);color:var(--warn)}
.tno-verdict.warn .tno-verdict-ic{background:rgba(216,162,52,.22)}
.tno-verdict.bad{background:rgba(248,81,73,.12);color:var(--bad)}
.tno-verdict.bad .tno-verdict-ic{background:rgba(248,81,73,.22)}
@media(max-width:480px){.tno-gauges{grid-template-columns:1fr}}
/* user order action row: report buttons left, Chat pinned to the right edge */
.tno-actions{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:12px}
.tno-chat-wrap{margin-left:auto}
.tno-stat{display:inline-flex;align-items:center;gap:5px;font-size:13px;font-weight:500;padding:5px 13px;border-radius:999px}
.tno-stat b{font-weight:800}
.tno-stat-good{background:rgba(63,185,80,.14);color:var(--ok)}
.tno-stat-warn{background:rgba(216,162,52,.14);color:var(--warn)}
.tno-stat-bad{background:rgba(248,81,73,.14);color:var(--bad)}
.tno-stat-na{background:var(--panel2);color:var(--mut)}
/* staff note shown to the user on their order */
.tno-usermsg{display:flex;gap:9px;align-items:flex-start;margin-top:12px;padding:11px 14px;
  background:var(--panel2);border:1px solid var(--line2);border-left:3px solid var(--acc);
  border-radius:9px;color:var(--ink);font-size:14px;line-height:1.5;white-space:pre-wrap}
.tno-usermsg-ic{flex-shrink:0;font-size:15px;line-height:1.4}
/* user's reply box (on their own order, under the staff note) */
.tno-replyrow{display:flex;gap:8px;margin-top:10px}
.tno-replybox{flex:1;min-width:0;background:var(--panel2);border:1px solid var(--line2);border-radius:8px;
  color:var(--ink);padding:9px 13px;font:inherit;font-size:14px}
.tno-replybox:focus{outline:none;border-color:var(--acc)}
.tno-replybox::placeholder{color:var(--faint)}
.tno-replybtn{flex-shrink:0;background:linear-gradient(135deg,var(--acc),#a06bff);border:0;border-radius:8px;
  color:#fff;font-weight:600;font-size:13px;padding:9px 18px;cursor:pointer;transition:.15s}
.tno-replybtn:hover{filter:brightness(1.08)}
.tno-replybtn:disabled{opacity:.6;cursor:default}
/* user's reply shown to staff in the Uploads queue */
.tno-userreply{display:flex;gap:8px;align-items:flex-start;margin-top:8px;padding:9px 13px;
  background:rgba(124,131,255,.08);border:1px solid var(--line2);border-left:3px solid var(--acc);
  border-radius:8px;color:var(--ink);font-size:13.5px;line-height:1.5;white-space:pre-wrap}
.tno-userreply-ic{flex-shrink:0;color:var(--acc);font-weight:800}
/* per-order chat button + popup */
.tno-chatrow{margin-top:12px}
.oc-open{position:relative;display:inline-flex;align-items:center;gap:7px;background:var(--panel2);
  border:1px solid var(--line2);border-radius:9px;color:var(--ink);padding:9px 15px;font-size:13px;
  font-weight:600;cursor:pointer;transition:.15s}
.oc-open:hover{border-color:var(--acc);color:var(--acc)}
.oc-ic{font-size:14px;line-height:1}
.oc-badge{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 5px;
  border-radius:999px;background:var(--bad);color:#fff;font-size:11px;font-weight:800;
  box-shadow:0 0 0 3px rgba(248,81,73,.16);animation:badgePulse 2.2s ease-in-out infinite}
/* admin toolbar: keep Chat a normal-sized button; push Save & send (+ delete) to the right */
.tno-toolbar .tno-savebtn{margin-left:auto}
.oc-card{max-width:560px;width:100%;display:flex;flex-direction:column;height:min(72vh,640px);padding:0;overflow:hidden}
.oc-head{display:flex;align-items:center;gap:12px;padding:16px 18px;border-bottom:1px solid var(--line);background:var(--panel2)}
.oc-avatar{width:40px;height:40px;flex-shrink:0;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:20px;background:rgba(124,131,255,.15)}
.oc-head-meta{min-width:0}
.oc-title{font-weight:700;color:var(--ink);font-size:15px}
.oc-sub{font-size:12.5px;color:var(--mut);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:400px}
.oc-body{flex:1}
.tno-dlrow{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.tno-dlbtn{display:inline-flex;align-items:center;gap:6px;background:var(--panel2);border:1px solid var(--line2);
  border-radius:8px;color:var(--ink);padding:7px 13px;font-size:13px;cursor:pointer;transition:.15s}
.tno-dlbtn:hover{border-color:var(--acc);color:var(--acc)}
.tno-wait{display:flex;align-items:center;gap:8px;margin-top:12px;color:var(--mut);font-size:13px;font-style:normal}
.tno-spin{width:13px;height:13px;border:2px solid var(--line2);border-top-color:var(--acc);
  border-radius:50%;display:inline-block;animation:tnoSpin .8s linear infinite}
@keyframes tnoSpin{to{transform:rotate(360deg)}}

/* ===== Live Support chat (user) ===== */
.chat-card{max-width:720px;display:flex;flex-direction:column;height:min(62vh,560px);
  background:var(--panel);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.chat-head{display:flex;align-items:center;gap:12px;padding:14px 18px;border-bottom:1px solid var(--line);background:var(--panel2)}
.chat-avatar{width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:20px;background:rgba(124,131,255,.15)}
.chat-head-title{font-weight:700;color:var(--ink);font-size:15px}
.chat-head-sub{font-size:12px;color:var(--mut);display:flex;align-items:center;gap:6px}
.chat-dot{width:8px;height:8px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 3px rgba(63,185,80,.18)}
.chat-body{flex:1;overflow-y:auto;padding:18px;display:flex;flex-direction:column;gap:10px}
.chat-welcome{margin:auto;text-align:center;color:var(--mut);font-size:14px;max-width:320px;line-height:1.5}
.chat-msg{display:flex;flex-direction:column;max-width:78%}
.chat-msg.me{align-self:flex-end;align-items:flex-end}
.chat-msg.them{align-self:flex-start;align-items:flex-start}
.chat-bubble{padding:10px 14px;border-radius:14px;font-size:14px;line-height:1.45;word-break:break-word}
.chat-msg.me .chat-bubble{background:linear-gradient(135deg,var(--acc),#a06bff);color:#fff;border-bottom-right-radius:4px}
.chat-msg.them .chat-bubble{background:var(--panel2);color:var(--ink);border:1px solid var(--line2);border-bottom-left-radius:4px}
.chat-time{font-size:10.5px;color:var(--faint);margin-top:3px;padding:0 4px}
.chat-input{display:flex;gap:10px;padding:14px 16px;border-top:1px solid var(--line);background:var(--panel)}
.chat-input input{flex:1;background:var(--panel2);border:1px solid var(--line2);border-radius:999px;color:var(--ink);padding:11px 16px;font-size:14px}
.chat-input input:focus{outline:none;border-color:var(--acc)}
.chat-send{flex-shrink:0;width:42px;height:42px;border-radius:50%;border:0;cursor:pointer;background:linear-gradient(135deg,var(--acc),#a06bff);color:#fff;font-size:16px;transition:.15s}
.chat-send:hover{filter:brightness(1.1)}

/* ===== Chats inbox (admin) ===== */
.inbox{display:flex;gap:16px;height:min(72vh,660px)}
.inbox-list{width:340px;flex-shrink:0;overflow-y:auto;background:var(--panel);border:1px solid var(--line);
  border-radius:var(--r);box-shadow:0 1px 4px rgba(0,0,0,.22)}
.inbox-listhead{position:sticky;top:0;z-index:2;background:var(--panel);display:flex;align-items:center;gap:8px;
  padding:14px 16px 11px;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;
  color:var(--faint);border-bottom:1px solid var(--line)}
.inbox-listcount{background:var(--panel2);color:var(--mut);font-size:11px;font-weight:800;padding:2px 8px;border-radius:999px}
.inbox-clearall{margin-left:auto;background:transparent;border:1px solid var(--line2);border-radius:7px;color:var(--mut);
  padding:4px 11px;font-size:11px;font-weight:600;letter-spacing:0;text-transform:none;cursor:pointer;transition:.15s}
.inbox-clearall:hover{border-color:var(--bad);color:var(--bad)}
.inbox-delconv{margin-left:auto;flex-shrink:0;background:transparent;border:1px solid var(--line2);border-radius:8px;
  color:var(--faint);padding:7px 11px;font-size:13px;cursor:pointer;transition:.15s}
.inbox-delconv:hover{border-color:var(--bad);color:var(--bad)}
.inbox-noconv{padding:34px 16px;text-align:center;color:var(--faint);font-size:13px}
.inbox-item{position:relative;display:flex;gap:12px;align-items:center;padding:13px 14px;margin:5px 8px;
  border-radius:12px;cursor:pointer;transition:.12s}
.inbox-item:hover{background:var(--panel2)}
.inbox-item.active{background:rgba(124,131,255,.12)}
.inbox-item.active::before{content:"";position:absolute;left:-1px;top:14px;bottom:14px;width:3px;
  border-radius:0 3px 3px 0;background:var(--acc)}
.inbox-av{width:40px;height:40px;flex-shrink:0;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-weight:700;color:#fff;background:linear-gradient(135deg,var(--acc),#a06bff);font-size:16px;
  box-shadow:0 2px 7px rgba(124,131,255,.3)}
.inbox-meta{flex:1;min-width:0}
.inbox-row1{display:flex;justify-content:space-between;gap:8px;align-items:center}
.inbox-email{font-weight:700;color:var(--ink);font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.inbox-time{font-size:11px;color:var(--faint);flex-shrink:0}
.inbox-row2{display:flex;justify-content:space-between;gap:8px;align-items:center;margin-top:3px}
.inbox-prev{font-size:13px;color:var(--mut);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.inbox-item.unread .inbox-prev{color:var(--ink);font-weight:600}
.inbox-unread{flex-shrink:0;min-width:20px;height:20px;padding:0 6px;border-radius:999px;background:var(--bad);
  color:#fff;font-size:11px;font-weight:800;display:inline-flex;align-items:center;justify-content:center;
  box-shadow:0 0 0 3px rgba(248,81,73,.18)}
.inbox-conv{flex:1;min-width:0;background:var(--panel);border:1px solid var(--line);border-radius:var(--r);
  display:flex;flex-direction:column;overflow:hidden;box-shadow:0 1px 4px rgba(0,0,0,.22)}
.inbox-empty{margin:auto;display:flex;flex-direction:column;align-items:center;text-align:center;padding:30px;gap:6px}
.inbox-empty-ic{width:74px;height:74px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:34px;background:rgba(124,131,255,.1);margin-bottom:8px}
.inbox-empty-title{font-size:17px;font-weight:700;color:var(--ink)}
.inbox-empty-sub{font-size:13.5px;color:var(--mut);max-width:280px;line-height:1.5}
.inbox-thread{display:flex;flex-direction:column;height:100%}
.inbox-thread.hidden,.inbox-empty.hidden{display:none}
.inbox-conv-head{display:flex;align-items:center;gap:11px;padding:13px 18px;border-bottom:1px solid var(--line);background:var(--panel2)}
.inbox-conv-head .inbox-av{width:38px;height:38px;font-size:15px}
.inbox-conv-head-meta{display:flex;flex-direction:column;min-width:0}
.inbox-conv-head-email{font-weight:700;color:var(--ink);font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.inbox-conv-head-sub{font-size:12px;color:var(--mut);display:flex;align-items:center;gap:6px}
.inbox-thread .chat-body{flex:1}
@media(max-width:760px){
  .inbox{flex-direction:column;height:auto}
  .inbox-list{width:100%;max-height:260px}
  .inbox-conv{min-height:420px}
}