/* For School — notebooks.
   Its own stylesheet, deliberately sharing nothing with the book creators:
   editing one product must never move another. The look is modern and flat to
   match the covers themselves, not the parchment-and-gold of the storybooks. */

:root{
  --ink:#1F3348;
  --ink-soft:#5C7086;
  --ink-mute:#93A5B7;
  --line:#E2EAF1;
  --paper:#F4F8FC;
  --card:#FFFFFF;
  --brand:#2E8FE0;
  --brand-deep:#1B6BB5;
  --accent:#EC5FA0;
  --ok:#25B394;
  --radius:16px;
  --shadow:0 10px 30px -12px rgba(31,51,72,.22);
}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  font-family:'Quicksand',system-ui,-apple-system,sans-serif;
  background:var(--paper); color:var(--ink);
  min-height:100vh; line-height:1.5;
}
h1,h2,h3,.display{font-family:'Fredoka',system-ui,sans-serif;font-weight:600;line-height:1.15}

/* ─── shell ─────────────────────────────────────────────────────────────── */
.sc-top{
  position:sticky; top:0; z-index:20;
  background:rgba(244,248,252,.92); backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
.sc-top__in{max-width:760px;margin:0 auto;padding:12px 18px;display:flex;align-items:center;gap:14px}
.sc-logo{display:flex;align-items:center;gap:7px;text-decoration:none;color:var(--brand-deep);
  font-family:'Fredoka',sans-serif;font-weight:600;font-size:17px;white-space:nowrap}
.sc-logo svg{width:15px;height:15px}
.sc-steps{margin-left:auto;display:flex;gap:6px}
.sc-steps i{width:22px;height:5px;border-radius:99px;background:var(--line);transition:background .25s}
.sc-steps i.on{background:var(--brand)}
.sc-steps i.done{background:var(--ok)}

main{max-width:760px;margin:0 auto;padding:22px 18px 120px}

.step{display:none}
.step.is-active{display:block;animation:rise .28s ease}
@keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

.step__kicker{font-size:12px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-mute);font-weight:700;margin-bottom:6px}
.step__title{font-size:clamp(24px,6vw,32px);margin-bottom:6px}
.step__sub{color:var(--ink-soft);font-size:15px;margin-bottom:22px}

/* ─── fields ────────────────────────────────────────────────────────────── */
.field{margin-bottom:20px}
.field__label{display:block;font-weight:700;font-size:14px;margin-bottom:8px;color:var(--ink-soft)}
.input{
  width:100%; font-family:'Fredoka',sans-serif; font-weight:500; font-size:22px;
  color:var(--ink); background:var(--card); border:2px solid var(--line);
  border-radius:14px; padding:14px 16px; outline:none; transition:border-color .2s;
}
.input::placeholder{color:#C4D2DF}
.input:focus{border-color:var(--brand)}
.input--email{font-size:17px;font-family:'Quicksand',sans-serif;font-weight:600}

/* ─── choice grids ──────────────────────────────────────────────────────── */
.grid{display:grid;gap:10px}
.grid--sub{grid-template-columns:repeat(auto-fill,minmax(140px,1fr))}
.grid--theme{grid-template-columns:repeat(auto-fill,minmax(104px,1fr))}
.grid--opt{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}

.chip{
  appearance:none; cursor:pointer; text-align:left;
  background:var(--card); border:2px solid var(--line); border-radius:14px;
  padding:13px 15px; font:600 15px/1.25 'Quicksand',sans-serif; color:var(--ink);
  transition:border-color .15s,transform .12s,box-shadow .15s;
}
.chip:hover{border-color:#C9DDF0}
.chip:active{transform:scale(.98)}
.chip.on{border-color:var(--brand);box-shadow:0 0 0 3px rgba(46,143,224,.14)}
.chip small{display:block;font-weight:600;font-size:12px;color:var(--ink-mute);margin-top:2px}

.tile{
  appearance:none;cursor:pointer;background:var(--card);
  border:2px solid var(--line);border-radius:16px;padding:14px 8px 11px;
  display:flex;flex-direction:column;align-items:center;gap:7px;
  font:700 12.5px 'Quicksand',sans-serif;color:var(--ink-soft);
  transition:border-color .15s,transform .12s,box-shadow .15s;
}
.tile span{font-size:30px;line-height:1}
.tile:active{transform:scale(.97)}
.tile.on{border-color:var(--brand);color:var(--brand-deep);box-shadow:0 0 0 3px rgba(46,143,224,.14)}

.swatches{display:flex;gap:12px;flex-wrap:wrap}
.swatch{
  appearance:none;cursor:pointer;width:52px;height:52px;border-radius:50%;
  border:3px solid transparent;box-shadow:inset 0 0 0 2px rgba(255,255,255,.85);
  transition:transform .12s;
}
.swatch:active{transform:scale(.94)}
.swatch.on{border-color:var(--ink);}

/* ─── cover preview ─────────────────────────────────────────────────────── */
.cover-stage{display:flex;flex-direction:column;align-items:center;gap:16px;width:100%}
.cover{
  position:relative;width:min(268px,72vw);aspect-ratio:148/210;flex-shrink:0;
  border-radius:12px;overflow:hidden;background:var(--brand-deep);
  box-shadow:0 22px 44px -18px rgba(31,51,72,.55);
}
.cover__art{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity .7s}
.cover.is-ready .cover__art{opacity:1}
.cover__wash{position:absolute;left:0;right:0;bottom:0;height:56%;
  background:linear-gradient(180deg,rgba(0,0,0,0) 0%,rgba(0,0,0,.16) 45%,rgba(0,0,0,.42) 100%)}
.cover__label{
  position:absolute;left:5.5%;right:5.5%;bottom:10%;
  background:rgba(255,255,255,.95);border-radius:8px;padding:11px 10px 9px;
  text-align:center;box-shadow:0 6px 16px -6px rgba(0,0,0,.4);
}
.cover__name{font-family:'Fredoka',sans-serif;font-weight:600;font-size:26px;
  line-height:1.05;color:var(--brand-deep);word-break:break-word}
.cover__subject{display:inline-block;margin-top:6px;font-family:'Fredoka',sans-serif;
  font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:#fff;
  background:var(--brand);padding:4px 11px;border-radius:99px}
.cover__logo{position:absolute;left:0;right:0;bottom:3.5%;text-align:center;
  font-family:'Fredoka',sans-serif;font-size:9px;color:rgba(255,255,255,.9)}

/* painting state */
.cover__paint{position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:12px;padding:22px;text-align:center;
  background:linear-gradient(160deg,#20416099,#0f2537cc)}
.cover.is-ready .cover__paint{display:none}
.cover__msg{font-family:'Fredoka',sans-serif;font-size:14px;color:#fff}
.cover__bar{width:78%;height:5px;border-radius:99px;background:rgba(255,255,255,.22);overflow:hidden}
.cover__bar i{display:block;height:100%;width:0;border-radius:99px;background:#fff;transition:width .5s}
.cover__pct{font-size:12px;color:rgba(255,255,255,.85);letter-spacing:.08em}

.attempts{font-size:13px;color:var(--ink-mute)}

/* ─── add-ons ───────────────────────────────────────────────────────────── */
.addon{
  display:flex;align-items:flex-start;gap:12px;cursor:pointer;
  background:var(--card);border:2px solid var(--line);border-radius:14px;
  padding:14px 15px;margin-bottom:9px;transition:border-color .15s;
}
.addon.on{border-color:var(--brand)}
.addon input{position:absolute;opacity:0;pointer-events:none}
.addon__box{
  flex-shrink:0;width:22px;height:22px;border-radius:7px;border:2px solid var(--line);
  display:grid;place-items:center;margin-top:1px;transition:.15s;
}
.addon.on .addon__box{background:var(--brand);border-color:var(--brand)}
.addon__box svg{width:12px;height:12px;opacity:0;stroke:#fff;stroke-width:3;fill:none}
.addon.on .addon__box svg{opacity:1}
.addon__t{flex:1;font-weight:700;font-size:15px}
.addon__t small{display:block;font-weight:600;font-size:12.5px;color:var(--ink-mute);margin-top:2px}
.addon__p{font-family:'Fredoka',sans-serif;font-weight:600;color:var(--brand);white-space:nowrap}
.addon--free{background:#F1FAF7;border-color:#CDEDE3}
.addon--free .addon__p{color:var(--ok)}
.addon--free .addon__box{background:var(--ok);border-color:var(--ok)}
.addon--free .addon__box svg{opacity:1}

/* ─── footer bar ────────────────────────────────────────────────────────── */
.bar{
  position:fixed;left:0;right:0;bottom:0;z-index:30;
  background:rgba(255,255,255,.96);backdrop-filter:blur(10px);
  border-top:1px solid var(--line);padding:12px 18px calc(12px + env(safe-area-inset-bottom));
}
.bar__in{max-width:760px;margin:0 auto;display:flex;align-items:center;gap:12px}
.total{font-family:'Fredoka',sans-serif;font-weight:600;font-size:21px;color:var(--ink)}
.total small{display:block;font-family:'Quicksand',sans-serif;font-weight:600;
  font-size:11.5px;color:var(--ink-mute);letter-spacing:.02em}

.btn{
  appearance:none;cursor:pointer;border:none;border-radius:13px;
  font:600 16px 'Fredoka',sans-serif;padding:15px 26px;text-decoration:none;
  display:inline-block;text-align:center;
  background:var(--brand);color:#fff;transition:filter .15s,transform .12s;
}
.btn:hover{filter:brightness(1.06)}
.btn:active{transform:scale(.985)}
.btn:disabled{opacity:.5;cursor:not-allowed;transform:none;filter:none}
.btn--wide{margin-left:auto}
.btn--ghost{background:transparent;color:var(--ink-soft);padding:15px 12px;font-size:15px}
.btn--pay{background:var(--accent)}

.note{font-size:13px;color:var(--ink-mute);margin-top:14px;line-height:1.5}
.err{background:#FDEDED;border:1px solid #F6C9C9;color:#9B2C2C;
  border-radius:12px;padding:12px 14px;font-size:14px;margin-bottom:16px}
.err:empty{display:none}

@media (max-width:420px){
  .cover{width:min(240px,78vw)}
  .btn{padding:14px 20px;font-size:15px}
  .total{font-size:19px}
}