:root{
  --bg:#f6f7fb;
  --card:#ffffff;
  --text:#151826;
  --muted:#697386;
  --line:#e5e7ef;
  --ink:#11131c;
  --primary:#6257e8;
  --primary2:#5146d6;
  --primary-soft:#f0efff;
  --violet:#8b5cf6;
  --cyan:#38bdf8;
  --green:#159455;
  --red:#d92d20;
  --gold:#f6b73c;
  --radius:18px;
  --shadow-sm:0 2px 10px rgba(21,24,38,.045);
  --shadow-md:0 16px 42px rgba(21,24,38,.09);
  --topbar-h:76px;
}

/* -----------------------------
   Global overflow protection
------------------------------ */
*,
*::before,
*::after{box-sizing:border-box}

html{
  width:100%;
  max-width:100%;
  overflow-x:hidden;
  scroll-behavior:smooth;
}

body{
  width:100%;
  max-width:100%;
  margin:0;
  min-height:100vh;
  overflow-x:hidden;
  background:
    radial-gradient(circle at 8% -5%,rgba(98,87,232,.09),transparent 29rem),
    radial-gradient(circle at 98% 14%,rgba(56,189,248,.07),transparent 25rem),
    var(--bg);
  color:var(--text);
  font-family:Inter,"Segoe UI",system-ui,-apple-system,BlinkMacSystemFont,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}

img,svg,video,canvas{max-width:100%;height:auto}
input,select,textarea,button{max-width:100%;font:inherit}
pre,code{max-width:100%;white-space:pre-wrap;overflow-wrap:anywhere}
a,p,h1,h2,h3,h4,h5,h6,span,strong,small,label,td,th{
  overflow-wrap:anywhere;
  word-break:normal;
}
.flex-min,.grid-min,
.topbar>*,.hero>*,.section-head>*,.split-head>*,
.quiz-card>*,.library-row>*,.question-card>*,
.pricing-card>*,.buy-row>*,.settings-grid>*,
.create-grid>*,.auth-card>*{min-width:0}

a{color:var(--primary);text-decoration:none}
button,a{-webkit-tap-highlight-color:transparent}
h1,h2,h3,p{margin-top:0}
h1{font-size:clamp(29px,3.3vw,44px);line-height:1.06;letter-spacing:-.045em}
h2{letter-spacing:-.028em}
.muted{color:var(--muted)}
.eyebrow{font-size:11px;font-weight:850;letter-spacing:.13em;color:#7267ed}

.page{
  width:min(100%,1200px);
  margin-inline:auto;
  padding:36px 30px 86px;
}

/* -----------------------------
   KleeQuiz mark
------------------------------ */
.qn-logo{position:relative;display:inline-block;flex:0 0 auto}
.qn-logo-small{width:42px;height:42px}
.qn-logo-large{width:92px;height:92px}
.qn-page{
  position:absolute;top:25%;height:54%;width:39%;
  border-radius:5px 5px 9px 9px;
  box-shadow:0 6px 18px rgba(98,87,232,.16)
}
.qn-page-left{
  left:8%;
  background:linear-gradient(145deg,#fff,#dfe7ff);
  transform:skewY(-6deg)
}
.qn-page-right{
  right:8%;
  background:linear-gradient(145deg,#e5f5ff,#bfdcff);
  transform:skewY(6deg)
}
.qn-logo::after{
  content:"";position:absolute;left:49%;top:27%;width:2px;height:49%;
  background:#92a7ff;border-radius:99px
}
.qn-spark{
  position:absolute;right:-2%;top:0;color:var(--gold);font-size:40%;
  filter:drop-shadow(0 0 8px rgba(246,183,60,.5))
}
.auth-logo-wrap{display:flex;justify-content:center}

/* -----------------------------
   Header / navigation
------------------------------ */
.topbar{
  width:100%;
  height:var(--topbar-h);
  background:rgba(17,19,28,.965);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  padding:0 34px;
  position:sticky;
  top:0;
  z-index:50;
  border-bottom:1px solid rgba(255,255,255,.08);
  backdrop-filter:blur(18px);
}

.brand{
  color:#fff;
  display:flex;
  gap:12px;
  align-items:center;
  min-width:0;
  flex:0 1 auto
}
.brand-copy{
  min-width:0;
  display:grid;
  line-height:1.05
}
.brand-copy strong{
  font-size:20px;
  letter-spacing:-.025em;
  white-space:nowrap
}
.brand-copy small{
  color:#98a2b3;
  font-size:10px;
  margin-top:5px;
  white-space:nowrap
}
.desktop-nav{
  min-width:0;
  display:flex;
  gap:5px;
  align-items:center;
  justify-content:flex-end;
  flex-wrap:nowrap
}
.desktop-nav>a{
  color:#d0d5dd;
  min-height:42px;
  padding:10px 10px;
  border-radius:10px;
  font-size:13px;
  font-weight:670;
  white-space:nowrap
}
.desktop-nav>a:hover{background:#202431;color:#fff}
.credit-pill{
  background:linear-gradient(135deg,#312e81,#5146d6)!important;
  color:#fff!important
}
.credit-dot{color:#ffd166}
.mobile-credit-pill,.mobile-bottom-nav{display:none}

/* -----------------------------
   Controls & surfaces
------------------------------ */
.btn{
  display:inline-flex;
  justify-content:center;
  align-items:center;
  gap:7px;
  min-height:44px;
  max-width:100%;
  border:1px solid var(--line);
  background:#fff;
  color:var(--text);
  border-radius:11px;
  padding:11px 17px;
  font-weight:760;
  font-size:14px;
  line-height:1.2;
  text-align:center;
  cursor:pointer;
  transition:.18s ease;
  box-shadow:var(--shadow-sm);
  white-space:normal
}
.btn:hover{transform:translateY(-1px);box-shadow:0 8px 22px rgba(21,24,38,.09)}
.btn.primary{
  background:linear-gradient(135deg,var(--primary),var(--violet));
  border-color:transparent;
  color:#fff
}
.btn.primary:hover{background:linear-gradient(135deg,var(--primary2),#7c3aed)}
.btn.ghost{background:transparent;color:inherit;box-shadow:none}
.btn.danger{background:#fff;color:var(--red);border-color:#fecaca}
.btn.small{min-height:38px;padding:8px 13px;font-size:13px}
.btn.social{width:100%;min-width:0}
.btn.social.apple{background:#000;color:#fff}
.btn.disabled{opacity:.5;cursor:not-allowed}

.panel{
  min-width:0;
  background:rgba(255,255,255,.97);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:27px;
  box-shadow:var(--shadow-md)
}
.panel.narrow{max-width:470px;width:calc(100% - 30px);text-align:center}

.stack{display:grid;gap:14px;min-width:0}
.stack label,label{
  min-width:0;
  display:grid;
  gap:7px;
  font-size:13px;
  font-weight:750
}

input,select,textarea{
  width:100%;
  min-width:0;
  min-height:44px;
  border:1px solid #d0d5dd;
  border-radius:10px;
  padding:11px 12px;
  background:#fff;
  color:var(--text);
  outline:none;
  transition:.15s ease
}
input:focus,select:focus,textarea:focus{
  border-color:#827bff;
  box-shadow:0 0 0 4px rgba(98,87,232,.12)
}

.flash-stack{display:grid;gap:8px;margin-bottom:16px}
.flash{
  min-width:0;
  padding:12px 14px;
  border-radius:11px;
  border:1px solid var(--line);
  background:#fff;
  overflow-wrap:anywhere
}
.flash.error{background:#fef2f2;border-color:#fecaca;color:#991b1b}
.flash.success{background:#f0fdf4;border-color:#bbf7d0;color:#166534}

/* -----------------------------
   Authentication
------------------------------ */
.auth-shell{
  min-height:100vh;
  display:grid;
  grid-template-columns:minmax(340px,.92fr) minmax(0,1.08fr)
}
.auth-brand{
  min-width:0;
  background:
    radial-gradient(circle at 35% 20%,rgba(98,87,232,.38),transparent 22rem),
    linear-gradient(150deg,#11131c,#171c31 60%,#24204b);
  color:#fff;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:clamp(34px,6vw,70px);
  text-align:center
}
.auth-brand h1{font-size:clamp(38px,5vw,52px);margin:18px 0 10px}
.auth-brand p{
  max-width:500px;
  color:#d0d5dd;
  font-size:17px;
  line-height:1.6
}
.benefits{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  justify-content:center;
  margin-top:22px
}
.benefits span{
  max-width:100%;
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.12);
  border-radius:999px;
  padding:8px 11px;
  font-size:12px
}
.auth-card{
  width:min(455px,calc(100% - 40px));
  min-width:0;
  margin:auto;
  background:#fff;
  border:1px solid var(--line);
  border-radius:20px;
  padding:35px;
  box-shadow:0 24px 70px rgba(21,24,38,.14)
}
.auth-card h2{font-size:29px}
.divider{display:flex;align-items:center;gap:12px;color:#98a2b3;margin:20px 0}
.divider::before,.divider::after{content:"";height:1px;background:var(--line);flex:1}
.social-grid{display:grid;gap:10px;min-width:0}
.switch{text-align:center;margin:20px 0 0;font-size:14px}
.center-shell{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:30px
}
.iconbubble{
  width:62px;height:62px;border-radius:17px;background:var(--primary-soft);
  display:grid;place-items:center;font-size:28px;margin:0 auto 18px
}
.code-input{text-align:center;font-size:26px;letter-spacing:.32em;font-weight:800}

/* -----------------------------
   Dashboard
------------------------------ */
.hero{
  min-width:0;
  background:
    radial-gradient(circle at 85% 15%,rgba(98,87,232,.58),transparent 22rem),
    linear-gradient(140deg,#11131c,#182039 65%,#26214f);
  color:#fff;
  border-radius:24px;
  padding:38px;
  display:flex;
  justify-content:space-between;
  gap:30px;
  align-items:center;
  box-shadow:0 20px 55px rgba(21,24,38,.16)
}
.hero>div{min-width:0}
.hero h1{margin:8px 0}
.hero p{color:#d0d5dd;max-width:650px;line-height:1.55}
.hero-actions{display:flex;gap:9px;flex-wrap:wrap;min-width:0}
.hero .ghost{border-color:#475467;color:#fff}
.credit-card-mini{
  min-width:200px;
  max-width:260px;
  flex:0 1 260px;
  background:rgba(255,255,255,.075);
  border:1px solid rgba(255,255,255,.12);
  border-radius:17px;
  padding:21px;
  backdrop-filter:blur(10px)
}
.credit-card-mini span,.credit-card-mini small{display:block;color:#b9c0cb}
.credit-card-mini strong{
  display:block;
  max-width:100%;
  font-size:clamp(34px,5vw,44px);
  margin:4px 0;
  overflow-wrap:anywhere
}
.credit-card-mini a{
  display:block;
  margin-top:12px;
  color:#c7d2fe;
  font-weight:750;
  font-size:13px
}

.section-head,.split-head{
  min-width:0;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px;
  margin:30px 0 17px
}
.section-head>div,.split-head>div{min-width:0}
.section-head h1,.section-head h2,.split-head h1{margin-bottom:3px}

.quiz-grid{
  min-width:0;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:16px
}
.quiz-card{
  min-width:0;
  background:#fff;
  border:1px solid var(--line);
  border-radius:17px;
  padding:21px;
  box-shadow:var(--shadow-sm);
  transition:.18s ease
}
.quiz-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)}
.quiz-card h3{margin:12px 0;overflow-wrap:anywhere}
.filetag{
  display:block;
  width:max-content;
  max-width:100%;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  background:#f2f4f7;
  color:#475467;
  padding:5px 8px;
  border-radius:7px;
  font-size:11px
}
.quiz-meta{display:flex;gap:10px;flex-wrap:wrap;color:var(--muted);font-size:12px;margin-bottom:16px}
.empty{
  grid-column:1/-1;
  text-align:center;
  background:#fff;
  border:1px dashed #d0d5dd;
  border-radius:17px;
  padding:48px 20px
}

/* -----------------------------
   Library
------------------------------ */
.library-list{display:grid;gap:11px;min-width:0}
.library-row{
  min-width:0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:15px;
  padding:19px 21px;
  box-shadow:var(--shadow-sm)
}
.library-row>div:first-child{min-width:0;flex:1}
.library-row h3{margin:7px 0 4px;overflow-wrap:anywhere}
.library-row p{margin:0;color:var(--muted);font-size:13px}
.row-actions{
  min-width:0;
  display:flex;
  flex:0 0 auto;
  gap:7px;
  align-items:center;
  flex-wrap:wrap
}
.balance-box{
  max-width:100%;
  background:#fff;
  border:1px solid var(--line);
  border-radius:14px;
  padding:14px 20px;
  text-align:right;
  box-shadow:var(--shadow-sm)
}
.balance-box span,.balance-box small{display:block;color:var(--muted);font-size:11px}
.balance-box strong{
  display:block;
  max-width:100%;
  font-size:29px;
  overflow-wrap:anywhere
}
.balance-box.big{min-width:0;width:min(100%,175px)}

/* -----------------------------
   Quiz creator
------------------------------ */
.create-grid{
  min-width:0;
  display:grid;
  grid-template-columns:minmax(0,1.2fr) minmax(300px,.8fr);
  gap:17px
}
.step{
  display:grid;place-items:center;width:30px;height:30px;
  background:var(--primary-soft);color:var(--primary);
  border-radius:9px;font-weight:850;margin-bottom:14px
}
.dropbox{
  width:100%;
  min-width:0;
  border:2px dashed #b9b5ff;
  background:linear-gradient(145deg,#fafaff,#f1f7ff);
  border-radius:16px;
  min-height:210px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  cursor:pointer;
  color:var(--primary);
  padding:24px;
  transition:.18s ease;
  overflow:hidden
}
.dropbox strong,.dropbox span{
  display:block;
  max-width:100%;
  overflow-wrap:anywhere
}
.dropbox:hover,.dropbox.has-file{border-color:var(--primary);background:#f4f3ff}
.dropbox input{display:none}
.dropbox span{color:var(--muted);font-weight:500;margin-top:6px}
.cost-note{
  max-width:100%;
  background:#fffbeb;
  border:1px solid #fde68a;
  color:#92400e;
  border-radius:10px;
  padding:12px;
  font-size:12px;
  overflow-wrap:anywhere
}

/* -----------------------------
   Generation screen
------------------------------ */
.generating{
  width:min(100%,730px);
  margin:70px auto;
  text-align:center;
  padding:44px
}
.generating h1,.generating p{overflow-wrap:anywhere}
.spinner-ring{
  width:54px;height:54px;border:5px solid #e0e7ff;border-top-color:var(--primary);
  border-radius:50%;margin:0 auto 16px;animation:spin 1s linear infinite
}
@keyframes spin{to{transform:rotate(360deg)}}
.progress-track{
  width:100%;
  height:13px;
  background:#eef2f6;
  border-radius:999px;
  overflow:hidden;
  margin:29px 0 10px
}
.progress-bar{
  height:100%;
  max-width:100%;
  background:linear-gradient(90deg,var(--primary),var(--violet),var(--cyan));
  border-radius:inherit;
  transition:width .35s
}
.progress-line{
  min-width:0;
  display:flex;
  justify-content:space-between;
  gap:12px;
  color:var(--muted);
  font-size:13px;
  flex-wrap:wrap
}
.progress-line strong{color:var(--primary)}

/* -----------------------------
   Quiz player
------------------------------ */
.quiz-heading{
  min-width:0;
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:18px;
  gap:20px
}
.quiz-heading>div{min-width:0}
.quiz-heading h1{margin:8px 0 0;overflow-wrap:anywhere}
.question-card{
  min-width:0;
  background:#fff;
  border:1px solid var(--line);
  border-radius:18px;
  padding:29px;
  margin-bottom:17px;
  box-shadow:var(--shadow-sm)
}
.question-number{color:var(--muted);font-size:12px;font-weight:750;overflow-wrap:anywhere}
.question-card h2{
  font-size:22px;
  line-height:1.4;
  margin:11px 0 19px;
  overflow-wrap:anywhere
}
.answers{display:grid;gap:10px;min-width:0}
.answer{
  min-width:0;
  display:flex;
  align-items:center;
  gap:12px;
  border:1px solid var(--line);
  border-radius:12px;
  padding:14px;
  cursor:pointer;
  font-weight:520;
  min-height:56px;
  transition:.15s ease
}
.answer>span:last-child{min-width:0;overflow-wrap:anywhere}
.answer:hover{background:#f8f8ff;border-color:#c7c3ff}
.answer.selected{background:var(--primary-soft);border-color:#9b94ff;box-shadow:0 0 0 2px rgba(98,87,232,.08)}
.answer input{width:auto;min-height:auto;flex:0 0 auto}
.letter{
  width:31px;height:31px;background:#f2f4f7;border-radius:9px;
  display:grid;place-items:center;font-weight:850;flex:0 0 31px
}
.submitbar{
  width:100%;
  max-width:100%;
  position:sticky;
  bottom:16px;
  background:rgba(255,255,255,.92);
  border:1px solid var(--line);
  border-radius:15px;
  padding:12px;
  display:flex;
  justify-content:flex-end;
  backdrop-filter:blur(12px);
  z-index:10
}

/* -----------------------------
   Results / membership / settings
------------------------------ */
.result-hero{
  text-align:center;
  background:#fff;
  border:1px solid var(--line);
  border-radius:20px;
  padding:42px 20px;
  margin-bottom:19px;
  box-shadow:var(--shadow-md)
}
.result-hero h1{
  max-width:100%;
  font-size:clamp(48px,8vw,64px);
  margin:10px 0 0;
  color:var(--primary);
  overflow-wrap:anywhere
}
.result-hero>strong{font-size:24px;display:block;margin-bottom:10px}
.review-item{border-top:1px solid var(--line);padding:18px 0}
.review-item:first-of-type{border-top:0}

.pricing-card{
  min-width:0;
  background:linear-gradient(145deg,#11131c,#1b2140);
  color:#fff;
  border-radius:22px;
  padding:32px;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:22px;
  align-items:center;
  box-shadow:var(--shadow-md)
}
.pricing-card>div{min-width:0}
.pricing-card p{color:#d0d5dd}
.price{text-align:right;min-width:0}
.price strong{
  display:block;
  max-width:100%;
  font-size:clamp(35px,5vw,44px);
  overflow-wrap:anywhere
}
.price span{display:block;color:#98a2b3}
.buy-row{
  min-width:0;
  grid-column:1/-1;
  background:rgba(255,255,255,.07);
  border-radius:14px;
  padding:16px;
  display:flex;
  gap:12px;
  align-items:end
}
.buy-row label{min-width:0;flex:1}

.info-grid,.settings-grid{
  min-width:0;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:15px;
  margin-top:19px
}
.settings-grid{grid-template-columns:minmax(0,1fr) minmax(0,1.3fr)}
.statline{
  min-width:0;
  display:flex;
  justify-content:space-between;
  gap:12px;
  border-bottom:1px solid var(--line);
  padding:11px 0;
  margin-bottom:8px
}
.statline>*{min-width:0;overflow-wrap:anywhere}
.status{
  display:inline-block;
  max-width:100%;
  background:#f2f4f7;
  color:#475467;
  border-radius:999px;
  padding:5px 9px;
  font-size:12px;
  font-weight:850;
  margin-bottom:12px
}
.status.good{background:#ecfdf3;color:#067647}
.qr{width:210px;max-width:100%;display:block;margin:15px auto}
details{max-width:100%;margin:12px 0}
code{word-break:break-all}

/* -----------------------------
   Touch
------------------------------ */
html[data-input="touch"] .btn,
html[data-input="touch"] .desktop-nav>a{min-height:46px}
html[data-input="touch"] .answer{min-height:62px}
html[data-input="touch"] input,
html[data-input="touch"] select,
html[data-input="touch"] textarea{font-size:16px}

/* -----------------------------
   Laptop / smaller desktop
------------------------------ */
@media(max-width:1180px){
  .topbar{padding-inline:24px}
  .desktop-nav>a{padding-inline:8px}
  .brand-copy small{display:none}
}

@media(max-width:1020px){
  .page{padding:30px 22px 88px}
  .quiz-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .create-grid{grid-template-columns:minmax(0,1fr) minmax(285px,360px)}
  .info-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .desktop-nav>a{font-size:12px;padding-inline:7px}
  .hero{padding:30px}
}

/* -----------------------------
   Tablet
------------------------------ */
@media(max-width:840px){
  .desktop-nav a:not(.credit-pill){display:none}
  .brand-copy small{display:block}
  .create-grid{grid-template-columns:1fr}
  .settings-grid{grid-template-columns:1fr}
  .hero{align-items:stretch}
  .credit-card-mini{min-width:180px}
  .pricing-card{grid-template-columns:minmax(0,1fr)}
  .price{text-align:left}
}

/* -----------------------------
   Phone
------------------------------ */
@media(max-width:680px){
  :root{--topbar-h:64px}

  body{
    padding-bottom:calc(78px + env(safe-area-inset-bottom));
  }

  .page{
    width:100%;
    padding:22px 14px 42px;
  }

  .topbar{
    height:var(--topbar-h);
    padding:0 13px;
    gap:10px
  }

  .brand{
    min-width:0;
    max-width:calc(100% - 86px);
    gap:8px
  }

  .qn-logo-small{width:36px;height:36px}
  .brand-copy{min-width:0}
  .brand-copy strong{
    display:block;
    max-width:100%;
    font-size:18px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis
  }
  .brand-copy small{display:none}

  .desktop-nav{display:none}

  .mobile-credit-pill{
    flex:0 0 auto;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    max-width:80px;
    min-height:38px;
    padding:7px 9px;
    border-radius:999px;
    background:#312e81;
    color:#fff;
    font-weight:800;
    font-size:12px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis
  }

  .mobile-bottom-nav{
    display:grid;
    grid-template-columns:repeat(5,minmax(0,1fr));
    position:fixed;
    left:0;right:0;bottom:0;
    z-index:60;
    width:100%;
    min-height:68px;
    padding:7px 4px calc(7px + env(safe-area-inset-bottom));
    background:rgba(255,255,255,.97);
    border-top:1px solid var(--line);
    backdrop-filter:blur(18px);
    box-shadow:0 -8px 24px rgba(21,24,38,.08)
  }
  .mobile-bottom-nav a{
    min-width:0;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    color:#667085;
    gap:2px;
    font-size:18px;
    overflow:hidden
  }
  .mobile-bottom-nav small{
    width:100%;
    padding-inline:2px;
    font-size:9px;
    font-weight:750;
    text-align:center;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis
  }
  .mobile-bottom-nav .mobile-create span{
    width:38px;height:38px;border-radius:13px;display:grid;place-items:center;
    background:linear-gradient(135deg,var(--primary),var(--violet));
    color:#fff;margin-top:-19px;
    box-shadow:0 8px 18px rgba(98,87,232,.3)
  }

  h1{font-size:30px}

  .auth-shell{
    display:block;
    min-height:100vh;
    padding:22px 0
  }
  .auth-brand{display:none}
  .auth-card{
    width:calc(100% - 24px);
    padding:25px 19px;
    border-radius:18px
  }
  .auth-card::before{
    content:"KleeQuiz";
    display:block;
    text-align:center;
    font-weight:900;
    font-size:27px;
    color:var(--text);
    margin-bottom:23px;
    letter-spacing:-.045em
  }
  .social-grid .btn{padding-inline:10px;font-size:13px}

  .hero{
    padding:25px 19px;
    align-items:stretch;
    flex-direction:column;
    border-radius:19px
  }
  .hero h1{font-size:30px}
  .credit-card-mini{
    width:100%;
    max-width:none;
    min-width:0;
    flex:auto
  }
  .hero-actions{
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr)
  }

  .section-head,.split-head{
    align-items:stretch;
    flex-direction:column;
    margin-top:23px
  }
  .section-head>.btn,.split-head>.btn{width:100%}

  .balance-box{
    width:100%;
    text-align:left;
    display:flex;
    align-items:baseline;
    gap:7px;
    flex-wrap:wrap
  }
  .balance-box span,.balance-box small{display:inline}
  .balance-box strong{display:inline}

  .quiz-grid{grid-template-columns:1fr}
  .quiz-card{padding:18px}

  .library-row{
    align-items:flex-start;
    flex-direction:column;
    gap:14px;
    padding:17px
  }
  .row-actions{
    width:100%;
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr)
  }
  .row-actions form,.row-actions .btn{width:100%;min-width:0}

  .create-grid{grid-template-columns:minmax(0,1fr)}
  .panel{padding:21px;border-radius:16px}
  .dropbox{min-height:165px;padding:20px 13px}

  .generating{margin:28px auto;padding:27px 17px}
  .progress-line{justify-content:center;text-align:center}

  .quiz-heading{
    align-items:flex-start;
    flex-direction:column
  }
  .question-card{
    padding:21px 15px;
    border-radius:16px
  }
  .question-card h2{font-size:19px}
  .answer{
    padding:13px 10px;
    gap:9px
  }
  .submitbar{
    bottom:84px;
    padding:10px
  }
  .submitbar .btn{width:100%}

  .pricing-card{
    grid-template-columns:minmax(0,1fr);
    padding:23px 18px
  }
  .price{text-align:left}
  .buy-row{
    display:grid;
    grid-template-columns:minmax(0,1fr)
  }
  .info-grid,.settings-grid{grid-template-columns:minmax(0,1fr)}

  .result-hero{padding:30px 17px}
}

/* -----------------------------
   Tiny phones: 320–390px
------------------------------ */
@media(max-width:390px){
  .page{padding-left:10px;padding-right:10px}
  .topbar{padding-inline:10px}
  .brand{max-width:calc(100% - 72px)}
  .brand-copy strong{font-size:17px}
  .mobile-credit-pill{
    max-width:70px;
    font-size:10px;
    padding-inline:7px
  }
  .hero-actions{grid-template-columns:1fr}
  .hero{padding-inline:16px}
  .panel{padding-inline:15px}
  .auth-card{width:calc(100% - 16px);padding-inline:15px}
  .question-card{padding:18px 11px}
  .answer{padding:12px 8px}
  .letter{width:29px;height:29px;flex-basis:29px}
  .row-actions{grid-template-columns:1fr}
}

/* -----------------------------
   Landscape phone
------------------------------ */
html[data-device="phone"][data-orientation="landscape"] .page{max-width:860px}
html[data-device="phone"][data-orientation="landscape"] .mobile-bottom-nav{min-height:58px}
html[data-device="phone"][data-orientation="landscape"] .mobile-bottom-nav .mobile-create span{margin-top:-13px}

/* -----------------------------
   Reduced motion
------------------------------ */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{
    scroll-behavior:auto!important;
    transition:none!important;
    animation-duration:.001ms!important;
    animation-iteration-count:1!important
  }
}

/* -----------------------------
   Site announcements / admin
------------------------------ */
.site-banner{
  width:100%;min-width:0;display:flex;align-items:center;justify-content:center;
  gap:10px;padding:10px 16px;border-bottom:1px solid var(--line);
  font-size:13px;font-weight:720;text-align:center;overflow-wrap:anywhere
}
.site-banner span{min-width:0;overflow-wrap:anywhere}
.site-banner a{flex:0 0 auto;font-size:12px;font-weight:850;text-decoration:underline}
.site-banner-info{background:#eff8ff;color:#175cd3;border-color:#b2ddff}
.site-banner-warning{background:#fffaeb;color:#93370d;border-color:#fedf89}
.site-banner-maintenance{background:#fff4ed;color:#9c2a10;border-color:#ffd6ae}
.site-banner-icon{font-size:10px;flex:0 0 auto}
.admin-nav-link{background:rgba(246,183,60,.12)!important;color:#ffd166!important}
.admin-hero{
  min-width:0;display:flex;justify-content:space-between;align-items:center;gap:24px;
  padding:30px;border-radius:22px;color:#fff;
  background:linear-gradient(135deg,#171523,#24204b 62%,#41366f);
  box-shadow:var(--shadow-md)
}
.admin-hero>div{min-width:0}.admin-hero h1{margin:7px 0 8px}.admin-hero p{color:#d0d5dd;max-width:700px;margin:0;line-height:1.55}
.admin-infinity{flex:0 0 150px;text-align:center;padding:18px;border:1px solid rgba(255,255,255,.13);border-radius:17px;background:rgba(255,255,255,.07)}
.admin-infinity span{display:block;color:#b9c0cb;font-size:12px}.admin-infinity strong{display:block;font-size:52px;line-height:1}
.admin-stat-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:13px;margin:18px 0}
.admin-stat{min-width:0;background:#fff;border:1px solid var(--line);border-radius:15px;padding:18px;box-shadow:var(--shadow-sm)}
.admin-stat span{display:block;color:var(--muted);font-size:12px}.admin-stat strong{display:block;font-size:28px;margin-top:4px;overflow-wrap:anywhere}
.admin-grid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:17px;min-width:0}
.admin-toggle{display:flex;grid-template-columns:none!important;align-items:center;gap:10px;min-height:44px}
.admin-toggle input{width:18px;min-height:auto;flex:0 0 18px}
.admin-command-box{min-width:0;background:#f7f7fa;border:1px solid var(--line);border-radius:11px;padding:12px;margin-top:10px}
.admin-command-box small{display:block;color:var(--muted);margin-bottom:5px}.admin-command-box code{display:block;font-size:12px;overflow-wrap:anywhere;word-break:break-word}
.admin-unlimited-card{max-width:760px}

/* -----------------------------
   AI mode picker
------------------------------ */
.model-picker{border:0;padding:0;margin:3px 0;min-width:0}
.model-picker legend{font-size:13px;font-weight:800;margin-bottom:8px;padding:0}
.model-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;min-width:0}
.model-option{display:block;min-width:0;cursor:pointer}
.model-option>input{position:absolute;opacity:0;pointer-events:none;width:1px;height:1px}
.model-option-card{
  min-width:0;height:100%;display:flex;flex-direction:column;gap:7px;
  border:1px solid var(--line);border-radius:13px;padding:13px;background:#fff;
  transition:.16s ease;overflow:hidden
}
.model-option-head{display:flex;align-items:center;justify-content:space-between;gap:6px;min-width:0}
.model-option-head strong{font-size:14px}.model-option-card small{color:var(--muted);line-height:1.35;font-weight:520}
.model-option-card code{font-size:10px;color:#667085;word-break:break-all}
.model-option>input:checked + .model-option-card{border-color:#8b84ff;background:#f7f6ff;box-shadow:0 0 0 3px rgba(98,87,232,.1)}
.model-option>input:focus-visible + .model-option-card{outline:2px solid var(--primary);outline-offset:2px}
.recommended-badge{max-width:100%;padding:3px 6px;border-radius:999px;background:var(--primary-soft);color:var(--primary);font-size:9px;font-weight:850;white-space:nowrap}

@media(max-width:840px){
  .admin-stat-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .admin-grid{grid-template-columns:1fr}
  .model-grid{grid-template-columns:1fr}
}
@media(max-width:680px){
  .site-banner{padding:9px 10px;font-size:12px;align-items:flex-start}
  .admin-hero{align-items:stretch;flex-direction:column;padding:23px 18px}
  .admin-infinity{width:100%;flex:auto;display:flex;justify-content:space-between;align-items:center;text-align:left}
  .admin-infinity strong{font-size:40px}
  .admin-stat-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
  .admin-stat{padding:14px}.admin-stat strong{font-size:23px}
}
@media(max-width:390px){
  .admin-stat-grid{grid-template-columns:1fr 1fr}
  .model-option-head{align-items:flex-start;flex-direction:column}
}

/* -----------------------------
   Account security / verification
------------------------------ */
body.auth-pending > *{visibility:hidden}
.remember-row{display:flex!important;grid-template-columns:none!important;align-items:center;gap:10px;min-height:36px;font-weight:650}
.remember-row input{width:18px;min-height:auto;flex:0 0 18px}
.microcopy{font-size:11px;line-height:1.45;color:var(--muted);margin:0;overflow-wrap:anywhere}
.security-challenge h1{font-size:clamp(27px,5vw,36px);margin:7px 0 10px}
.security-alert{background:#fff4ed;border:1px solid #ffd6ae;color:#9c2a10;border-radius:11px;padding:11px 12px;margin:13px 0;font-size:12px;line-height:1.45}
.inline-form{margin-top:11px}
.security-prompt{min-width:0;display:flex;align-items:center;justify-content:space-between;gap:16px;background:linear-gradient(135deg,#f5f3ff,#eef8ff);border:1px solid #d9d6fe;border-radius:15px;padding:15px 17px;margin-bottom:17px}
.security-prompt>div{min-width:0}.security-prompt strong{display:block;margin-bottom:3px}.security-prompt span{display:block;color:#586174;font-size:13px;line-height:1.45;overflow-wrap:anywhere}
.warning-prompt{background:#fffaeb;border-color:#fedf89}
.security-settings-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.provider-row,.device-row{min-width:0;display:flex;justify-content:space-between;align-items:center;gap:13px;padding:13px 0;border-top:1px solid var(--line)}
.provider-row:first-of-type,.device-row:first-of-type{border-top:0}
.provider-row>div,.device-row>div{min-width:0}.provider-row strong,.device-row strong{display:block;overflow-wrap:anywhere}.provider-row span,.device-row span{display:block;color:var(--muted);font-size:12px;margin-top:3px;overflow-wrap:anywhere}
.device-list{margin-bottom:13px}.linked-accounts-panel form{margin:0}

/* -----------------------------
   Account moderation
------------------------------ */
.admin-accounts-panel{margin-top:18px}
.admin-accounts-head{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;min-width:0;margin-bottom:18px}
.admin-accounts-head>div{min-width:0}.admin-accounts-head h2{margin:5px 0}.admin-accounts-head p{margin:0}
.admin-search-form{display:flex;gap:8px;min-width:min(100%,390px);max-width:100%}.admin-search-form input{min-width:0}
.account-admin-list{display:grid;gap:11px;min-width:0}
.account-admin-card{min-width:0;border:1px solid var(--line);border-radius:15px;padding:16px;background:#fafbfc}
.account-summary{min-width:0;display:flex;align-items:center;gap:12px}
.account-avatar{width:42px;height:42px;flex:0 0 42px;border-radius:12px;background:var(--primary-soft);color:var(--primary);display:grid;place-items:center;font-weight:900}
.account-main{min-width:0;flex:1}.account-main>span,.account-main>small{display:block;color:var(--muted);font-size:12px;overflow-wrap:anywhere;margin-top:3px}
.account-title-line{display:flex;align-items:center;gap:8px;flex-wrap:wrap;min-width:0}.account-title-line strong{overflow-wrap:anywhere}
.admin-status{background:#fff7e6;color:#8a4b08}.bad-status{background:#fef2f2;color:#b42318}.warning-status{background:#fffaeb;color:#93370d}
.admin-protected-note{margin-top:13px;padding:10px 12px;border-radius:10px;background:#fff7e6;color:#8a4b08;font-size:12px;font-weight:700}
.account-actions-grid{display:grid;grid-template-columns:minmax(0,.75fr) minmax(0,1.25fr);gap:10px;margin-top:14px}
.compact-admin-form{min-width:0;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:8px;background:#fff;border:1px solid var(--line);border-radius:11px;padding:11px}
.compact-admin-form label{min-width:0}.compact-admin-form label+label{grid-column:1/-1}.compact-admin-form label+label+.btn{grid-column:1/-1}
.account-danger-row{display:flex;gap:8px;align-items:center;justify-content:flex-end;flex-wrap:wrap;margin-top:10px}.account-danger-row form{margin:0;max-width:100%}
.ban-form{display:flex;gap:7px;min-width:min(100%,430px);max-width:100%}.ban-form input{min-width:0}

@media(max-width:840px){
  .security-settings-grid{grid-template-columns:1fr}
  .admin-accounts-head{align-items:stretch;flex-direction:column}
  .admin-search-form{width:100%;min-width:0}
  .account-actions-grid{grid-template-columns:1fr}
}
@media(max-width:680px){
  .security-prompt{align-items:stretch;flex-direction:column}.security-prompt .btn{width:100%}
  .provider-row{align-items:flex-start;flex-direction:column}.provider-row .btn,.provider-row form{width:100%}.provider-row form .btn{width:100%}
  .admin-search-form{display:grid;grid-template-columns:minmax(0,1fr) auto}
  .account-summary{align-items:flex-start}.account-avatar{width:38px;height:38px;flex-basis:38px}
  .compact-admin-form{grid-template-columns:1fr}.compact-admin-form .btn{width:100%}
  .account-danger-row{align-items:stretch;flex-direction:column}.account-danger-row form,.account-danger-row .btn{width:100%}
  .ban-form{display:grid;grid-template-columns:1fr;width:100%}
}
@media(max-width:390px){
  .admin-search-form{grid-template-columns:1fr}.admin-search-form .btn{width:100%}
  .account-admin-card{padding:12px}.account-summary{gap:9px}
}

/* =========================================================
   Auth polish: checkbox, flash messages, password reveal, OTP
   ========================================================= */

/* Keep the Remember email checkbox compact even when generic input styles change. */
.remember-row {
  display:flex !important;
  align-items:center !important;
  justify-content:flex-start !important;
  gap:10px !important;
  min-height:36px;
  cursor:pointer;
}
.remember-row input[type="checkbox"] {
  appearance:auto !important;
  -webkit-appearance:checkbox !important;
  width:18px !important;
  height:18px !important;
  min-width:18px !important;
  min-height:18px !important;
  max-width:18px !important;
  max-height:18px !important;
  padding:0 !important;
  margin:0 !important;
  flex:0 0 18px !important;
  box-shadow:none !important;
}
.remember-row span {display:inline !important;width:auto !important}

/* Flash messages float above the auth grid instead of becoming a grid cell. */
.auth-shell > .flash-stack {
  position:fixed !important;
  top:18px;
  left:50%;
  transform:translateX(-50%);
  z-index:9999;
  width:min(520px,calc(100vw - 32px));
  margin:0 !important;
  pointer-events:none;
}
.auth-shell > .flash-stack .flash {
  width:100%;
  box-sizing:border-box;
  padding:12px 16px;
  border-radius:12px;
  box-shadow:0 8px 30px rgba(0,0,0,.12);
  pointer-events:auto;
}

/* Password field with a Show/Hide control inside the input. */
.password-wrap {
  position:relative;
  display:block;
  width:100%;
}
.password-wrap input {
  width:100%;
  padding-right:66px;
}
.password-toggle {
  position:absolute;
  right:8px;
  top:50%;
  transform:translateY(-50%);
  border:0;
  background:transparent;
  color:var(--primary);
  font:inherit;
  font-size:12px;
  font-weight:800;
  padding:7px 8px;
  border-radius:8px;
  cursor:pointer;
}
.password-toggle:hover {background:var(--primary-soft)}
.password-toggle:focus-visible {
  outline:2px solid var(--primary);
  outline-offset:1px;
}

/* Six-box verification code interface. */
.verification-card {
  width:min(500px,100%);
  padding:clamp(24px,5vw,38px);
  text-align:center;
}
.verification-icon {
  width:64px;
  height:64px;
  border-radius:18px;
  background:linear-gradient(145deg,var(--primary-soft),#eef8ff);
  color:var(--primary);
  display:grid;
  place-items:center;
  font-size:27px;
  margin:0 auto 18px;
  border:1px solid #d9d6fe;
}
.verification-copy {max-width:410px;margin:8px auto 22px;line-height:1.55}
.otp-form {margin-top:4px}
.otp-group {
  width:100%;
  display:grid;
  grid-template-columns:repeat(6,minmax(0,1fr));
  gap:10px;
  margin:4px 0 2px;
}
.otp-box {
  width:100% !important;
  min-width:0;
  height:62px;
  padding:0 !important;
  text-align:center;
  font-size:26px;
  line-height:1;
  font-weight:850;
  border:1.5px solid #d0d5dd;
  border-radius:13px;
  background:#fff;
  caret-color:var(--primary);
}
.otp-box:focus {
  border-color:var(--primary);
  box-shadow:0 0 0 4px rgba(98,87,232,.12);
}
.otp-box.is-filled {
  border-color:#a9a3ff;
  background:#faf9ff;
}
.otp-help {text-align:center;margin:6px 0 2px}
.verification-resend {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:5px;
  flex-wrap:wrap;
  margin-top:18px;
  font-size:13px;
}
.verification-resend .inline-form {margin:0}
.text-button {
  border:0;
  background:transparent;
  color:var(--primary);
  padding:4px 5px;
  font:inherit;
  font-weight:800;
  cursor:pointer;
}
.text-button:hover {text-decoration:underline}
.verification-note {margin-top:15px;text-align:center}

@media (max-width:600px) {
  .auth-shell > .flash-stack {top:12px;width:calc(100vw - 24px)}
  .verification-card {padding:22px 16px}
  .otp-group {gap:6px}
  .otp-box {height:54px;font-size:23px;border-radius:11px}
}

@media (max-width:380px) {
  .otp-group {gap:4px}
  .otp-box {height:48px;font-size:21px;border-radius:9px}
}


/* =========================================================
   KleeQuiz Plus, creator layout, legal/footer polish
   ========================================================= */

/* Give quiz settings enough room so mode cards never squeeze words vertically. */
.create-grid{
  grid-template-columns:minmax(0,1.05fr) minmax(430px,.95fr);
  align-items:stretch;
}
.material-panel,.quiz-settings-panel{min-width:0}
.quiz-settings-panel .stack{gap:13px}
.field-hint{display:block;margin-top:6px;color:var(--muted);font-size:11px;font-weight:520;line-height:1.4}
.accuracy-note{
  margin-top:16px;padding:13px 14px;border:1px solid #fedf89;background:#fffaeb;
  color:#7a2e0e;border-radius:12px;display:grid;gap:3px;font-size:12px;line-height:1.45
}
.accuracy-note strong{font-size:12px}.accuracy-note span{color:#8a3b15}

.model-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.model-option-card{min-height:112px;padding:14px;gap:9px;justify-content:flex-start}
.model-option-head{justify-content:flex-start;flex-wrap:wrap;gap:7px}
.model-option-head strong{font-size:14px;white-space:nowrap;overflow-wrap:normal}
.model-option-card small{font-size:11px;line-height:1.45}
.model-option.is-locked{cursor:default}
.model-option.is-locked .model-option-card{background:#f8f9fc;border-style:dashed;color:#667085}
.model-option.is-locked .model-option-card small{color:#7b8494}
.plus-badge,.discount-chip{
  display:inline-flex;align-items:center;width:max-content;max-width:100%;padding:3px 7px;border-radius:999px;
  background:linear-gradient(135deg,#ece9ff,#e9f7ff);color:#5146d6;border:1px solid #d9d6fe;
  font-size:9px;font-weight:900;letter-spacing:.07em;white-space:nowrap
}
.locked-line{margin-top:auto;font-size:11px;font-weight:750}.locked-line a{font-weight:850}

@media(max-width:1080px){
  .create-grid{grid-template-columns:minmax(0,1fr) minmax(390px,.9fr)}
}
@media(max-width:920px){
  .create-grid{grid-template-columns:1fr}
}
@media(max-width:520px){
  .model-grid{grid-template-columns:1fr}
  .model-option-card{min-height:0}
}

/* Plus / pricing */
.plus-nav-link{color:#e9d7fe!important;background:rgba(139,92,246,.12)!important}
.old-price{display:block;text-decoration:line-through;color:var(--muted);font-size:13px;margin-bottom:3px}
.credit-pricing-card .discount-chip{margin-top:8px}
.plus-teaser{
  margin:18px 0;padding:22px;border:1px solid #d9d6fe;border-radius:18px;
  background:linear-gradient(135deg,#f8f6ff,#f0f9ff);display:flex;align-items:center;justify-content:space-between;gap:20px
}
.plus-teaser>div{min-width:0}.plus-teaser h2{margin:5px 0 7px}.plus-teaser p{margin:0;color:var(--muted)}
.plus-teaser.is-active{border-color:#abefc6;background:linear-gradient(135deg,#f0fdf4,#f0f9ff)}

.membership-hero{
  min-width:0;display:flex;align-items:center;justify-content:space-between;gap:30px;padding:34px;
  border-radius:24px;background:linear-gradient(135deg,#171523,#2b2459 58%,#5541a8);color:#fff;box-shadow:var(--shadow-md)
}
.membership-hero>div{min-width:0;max-width:760px}.membership-hero h1{margin:8px 0 12px;color:#fff}
.membership-hero p{color:#d7d5e8;line-height:1.55;margin-bottom:18px}
.membership-price{font-size:24px;font-weight:850;letter-spacing:-.03em}
.membership-state{display:inline-flex;padding:8px 11px;border-radius:999px;font-size:12px;font-weight:850}
.membership-state.active{background:rgba(255,255,255,.12);color:#fff;border:1px solid rgba(255,255,255,.18)}
.membership-cta{min-width:180px}
.membership-checkout-note{max-width:320px;color:#e6e4f2;background:rgba(255,255,255,.08);padding:14px;border-radius:12px;font-size:12px;line-height:1.45}
.perk-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin:20px 0}
.perk-card{min-width:0;background:#fff;border:1px solid var(--line);border-radius:17px;padding:20px;box-shadow:var(--shadow-sm)}
.perk-card h3{margin:12px 0 7px}.perk-card p{margin:0;color:var(--muted);font-size:13px;line-height:1.5}
.perk-icon{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;background:var(--primary-soft);color:var(--primary);font-weight:900}
.plan-compare{margin-top:18px}.compare-table{border:1px solid var(--line);border-radius:14px;overflow:hidden}
.compare-row{display:grid;grid-template-columns:minmax(160px,1.5fr) minmax(90px,1fr) minmax(90px,1fr);gap:12px;padding:13px 15px;border-top:1px solid var(--line);align-items:center}
.compare-row:first-child{border-top:0}.compare-head{background:#f8f9fb;font-size:12px;color:var(--muted);font-weight:800}
.compare-row>strong:last-child{color:var(--primary)}
.legal-small{font-size:11px;color:var(--muted);line-height:1.55;margin:16px 2px}

/* Legal */
.site-footer{
  width:min(100%,1200px);margin:0 auto;padding:0 30px 30px;display:flex;align-items:center;justify-content:space-between;
  gap:14px;color:#98a2b3;font-size:11px
}
.footer-links{display:flex;align-items:center;justify-content:flex-end;gap:14px;flex-wrap:wrap}
.site-footer a{color:#667085;font-weight:650}.site-footer a:hover{color:var(--primary)}
.legal-page{max-width:860px;margin:0 auto;padding:clamp(24px,5vw,42px)}
.legal-page h1{margin:7px 0 6px}.legal-page h2{margin:28px 0 8px;font-size:20px}
.legal-page p{color:#4b5565;line-height:1.68}.legal-updated{font-size:12px!important;color:var(--muted)!important}
.legal-warning{margin:18px 0;padding:15px 16px;border:1px solid #fedf89;background:#fffaeb;color:#7a2e0e;border-radius:12px;line-height:1.55}
.auth-legal{text-align:center;font-size:10.5px!important;color:var(--muted)!important;line-height:1.45;margin:0!important;font-weight:500!important}

@media(max-width:900px){
  .perk-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .membership-hero{align-items:flex-start;flex-direction:column}
  .plus-teaser{align-items:flex-start;flex-direction:column}
}
@media(max-width:680px){
  .site-footer{padding:0 14px 96px;align-items:flex-start;flex-direction:column}
  .footer-links{justify-content:flex-start}
  .membership-hero{padding:24px 18px;border-radius:18px}
  .perk-grid{grid-template-columns:1fr}
  .compare-row{grid-template-columns:minmax(120px,1.4fr) minmax(70px,1fr) minmax(70px,1fr);font-size:11px;padding:11px 10px;gap:7px}
}

.model-grid > .model-option:last-child:nth-child(odd){grid-column:1/-1}
@media(max-width:520px){.model-grid > .model-option:last-child:nth-child(odd){grid-column:auto}}

/* =========================================================
   KleeQuiz Pro + mixed question types
   ========================================================= */
.pro-badge{display:inline-flex;align-items:center;padding:3px 7px;border-radius:999px;font-size:.68rem;font-weight:900;letter-spacing:.08em;background:#111827;color:white;margin-right:7px}
.pro-nav-link{font-weight:800;border:1px solid rgba(17,24,39,.14);border-radius:999px;padding-left:12px!important;padding-right:12px!important}
.advanced-scan-card{margin-top:18px;padding:16px;border:1px solid #dfe4ec;border-radius:16px;background:linear-gradient(145deg,#fbfcff,#f4f6fb)}
.advanced-scan-card.locked-feature{opacity:.78;background:#f8f8fa}
.feature-title-row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:7px}.feature-title-row>div{display:flex;align-items:center}
.feature-title-row p,.advanced-scan-card p{margin:6px 0;color:#667085;font-size:.9rem;line-height:1.45}.small-link{font-size:.82rem;font-weight:800}
.switch-row{display:flex!important;align-items:center;gap:7px;width:auto!important;cursor:pointer}.switch-row input{width:18px!important;height:18px!important;min-width:18px!important;padding:0!important}
.image-question-toggle{margin-top:13px!important;display:flex!important;align-items:flex-start!important;gap:10px!important;padding:12px;border-radius:12px;background:white;border:1px solid #e7e9ef;cursor:pointer}
.image-question-toggle input{width:18px!important;height:18px!important;min-width:18px!important;margin-top:2px;padding:0!important}.image-question-toggle span{display:grid;gap:3px}.image-question-toggle small{color:#667085;line-height:1.35}
.locked-subfeature,.pro-preview-strip{margin-top:10px;padding:10px 12px;border-radius:10px;background:#fff;border:1px dashed #d5d9e3;color:#667085;font-size:.84rem}
.question-type-picker{border:0;padding:0;margin:0}.question-type-picker legend{font-weight:800;margin-bottom:8px}.question-type-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.question-type-option{display:flex!important;align-items:flex-start!important;gap:10px!important;padding:12px!important;border:1px solid #dfe3ea;border-radius:13px;background:white;cursor:pointer;min-width:0}
.question-type-option input{width:18px!important;height:18px!important;min-width:18px!important;margin-top:2px!important;padding:0!important}.question-type-option span{display:grid;gap:3px;min-width:0}.question-type-option small{color:#697386;line-height:1.3}.selected-static{cursor:default}
.question-kind{display:inline-flex;margin:9px 0 2px;padding:4px 8px;border-radius:999px;background:#f0f2f5;color:#566074;font-size:.72rem;font-weight:800;letter-spacing:.035em}
.written-answer-label{display:grid!important;gap:8px!important;margin-top:18px!important}.written-answer-label textarea{resize:vertical;min-height:150px}.ai-grade-note{font-size:.82rem;color:#667085;margin:8px 0 0}
.question-source-image{margin:18px 0;padding:10px;border:1px solid #e2e5eb;border-radius:15px;background:#fafbfc}.question-source-image img{display:block;max-width:100%;max-height:620px;margin:auto;border-radius:10px;object-fit:contain}.question-source-image figcaption{text-align:center;color:#7a8291;font-size:.78rem;margin-top:8px}
.ai-score-chip{display:inline-flex;padding:6px 10px;border-radius:999px;background:#f0f2f5;font-weight:900;margin-bottom:8px}.written-review details{margin-top:9px}.written-review summary{cursor:pointer;font-weight:750}
.membership-tier-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin:22px 0}.tier-card{position:relative;padding:22px;border:1px solid #e0e3ea;border-radius:20px;background:white;box-shadow:0 8px 24px rgba(20,28,45,.045)}.tier-card.current-tier{border-color:#b9c0cc;box-shadow:0 10px 28px rgba(20,28,45,.09)}
.plus-tier{background:linear-gradient(160deg,#fff,#f7f8ff)}.pro-tier{background:linear-gradient(160deg,#fff,#f4f5f8);border-width:2px}.tier-kicker{font-size:.72rem;font-weight:900;letter-spacing:.09em;color:#5d6575}.tier-card h2{margin:.35rem 0}.tier-price{font-size:1.08rem;font-weight:850;margin:8px 0 16px}.tier-perks{padding-left:19px;margin:0 0 20px;display:grid;gap:9px;color:#4f596b;line-height:1.4}.tier-cta{width:100%}.pro-button{background:#111827;color:white;border-color:#111827}.current-plan-button{display:block;text-align:center;padding:10px;border-radius:11px;background:#eef0f4;font-weight:800;color:#4b5565}
.compare-three .compare-row{grid-template-columns:minmax(180px,1.5fr) repeat(3,minmax(110px,1fr))}.plus-monthly-credit-card{margin-top:18px}
@media(max-width:900px){.membership-tier-grid{grid-template-columns:1fr}.compare-three{overflow-x:auto}.compare-three .compare-row{min-width:720px}.question-type-grid{grid-template-columns:1fr}}
@media(max-width:560px){.feature-title-row{align-items:flex-start;flex-direction:column}.advanced-scan-card{padding:13px}.question-source-image{margin-left:-4px;margin-right:-4px}}

/* =========================================================
   Beta final polish: consent, matching, admin email, mobile
   ========================================================= */
.beta-chip{
  display:inline-flex;align-items:center;justify-content:center;width:max-content;
  padding:4px 8px;border-radius:999px;background:#eef2ff;color:#4f46e5;
  border:1px solid #d9ddff;font-size:9px;font-weight:900;letter-spacing:.1em
}
.beta-chip-nav{padding:2px 6px;font-size:8px;margin-left:6px;vertical-align:middle}
.brand-name-row{display:flex;align-items:center;min-width:0}
.auth-card-heading{display:grid;gap:5px;margin-bottom:4px}.auth-card-heading h2{margin:0}.auth-card-heading .muted{margin:0 0 4px}

.consent-panel{
  display:grid;gap:9px;padding:13px;border:1px solid #e4e7ec;border-radius:14px;
  background:#fafbfc;margin-top:2px
}
.consent-row{
  display:grid!important;grid-template-columns:18px minmax(0,1fr)!important;align-items:start!important;
  gap:10px!important;font-size:11.5px!important;line-height:1.45!important;font-weight:560!important;
  cursor:pointer;min-width:0
}
.consent-row input[type="checkbox"]{
  appearance:auto!important;-webkit-appearance:checkbox!important;width:18px!important;height:18px!important;
  min-width:18px!important;min-height:18px!important;max-width:18px!important;max-height:18px!important;
  padding:0!important;margin:1px 0 0!important;box-shadow:none!important
}
.consent-row span{min-width:0;overflow-wrap:anywhere}.consent-row a{font-weight:800}
.required-consent{color:#344054}.optional-consent{padding-top:9px;border-top:1px solid #e6e8ed;color:#5f6878}
.optional-consent strong{font-size:10px;text-transform:uppercase;letter-spacing:.05em;color:#667085}
.auth-main-form .social-grid{margin-top:0}.auth-main-form .divider{margin:2px 0}

.question-type-option{position:relative;padding-right:58px!important}
.question-type-option .mini-plan-badge{position:absolute;right:9px;top:9px;margin:0}
.locked-question-type{cursor:default!important;background:#f8f9fb!important;opacity:.72;border-style:dashed}
.locked-question-type>span:first-child{display:grid;gap:3px;min-width:0}
.pro-preview-strip{line-height:1.45}

.matching-intro{margin:12px 0 4px;color:#667085;font-size:13px;line-height:1.5}
.matching-grid{display:grid;gap:11px;margin-top:14px}
.matching-row{
  display:grid;grid-template-columns:minmax(130px,.85fr) 28px minmax(240px,1.5fr);
  gap:10px;align-items:center;padding:12px;border:1px solid #e1e5ec;border-radius:14px;background:#fff
}
.matching-term{font-weight:850;overflow-wrap:anywhere}.matching-arrow{text-align:center;color:#98a2b3;font-weight:900}
.matching-row select{width:100%;min-width:0;white-space:normal}

.admin-stat-grid-five{grid-template-columns:repeat(5,minmax(0,1fr))}
.admin-email-panel{margin:18px 0}.admin-email-head{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;margin-bottom:16px}
.admin-email-head>div{min-width:0}.admin-email-head h2{margin:5px 0 6px}.admin-email-head p{margin:0;line-height:1.5}
.recipient-count{display:inline-flex;white-space:nowrap;padding:7px 10px;border-radius:999px;background:#f2f4f7;color:#475467;font-size:11px;font-weight:850}
.admin-email-form{max-width:760px}.email-audience-note{padding:11px 12px;border-radius:11px;background:#f8fafc;border:1px solid #e6eaf0;color:#667085;font-size:11px;line-height:1.5}
.confirm-email-send{align-items:flex-start!important}.email-status{background:#eef4ff!important;color:#3538cd!important}

.legal-contact{margin-top:26px;padding:14px 16px;border:1px solid #e5e7eb;border-radius:12px;background:#f8fafc;display:flex;align-items:center;justify-content:space-between;gap:12px}
.legal-contact a{font-weight:800}

/* Keep auth error messages floating instead of becoming a grid item. */
.auth-shell > .flash-stack{position:fixed!important;top:18px!important;left:50%!important;transform:translateX(-50%)!important;z-index:9999!important;width:min(520px,calc(100vw - 32px))!important;margin:0!important}

@media(max-width:1100px){.admin-stat-grid-five{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:720px){
  .matching-row{grid-template-columns:1fr;gap:8px}.matching-arrow{display:none}
  .admin-email-head{flex-direction:column}.admin-stat-grid-five{grid-template-columns:repeat(2,minmax(0,1fr))}
  .legal-contact{align-items:flex-start;flex-direction:column}
}
@media(max-width:420px){
  .consent-panel{padding:11px}.consent-row{font-size:11px!important}
  .question-type-option{padding-right:52px!important}
  .auth-shell > .flash-stack{top:10px!important;width:calc(100vw - 20px)!important}
}