/* Кабинет и страница книги: крупно, просто, в детском стиле на звёздном небе */
:root{
  --ink:#1E1A3C;--muted:#6B6690;--line:#E7E2FA;--soft:#F5F2FF;--violet:#7A4DF0;--green:#14A05A;--on-dark:#F1F4FF;--on-dark-2:#AFBBDD;
  --g-cta:linear-gradient(135deg,#8B5CFF 0%,#E8459A 100%);--g-sun:linear-gradient(180deg,#FFE58A 0%,#FFB02E 100%);
  --g-sky:linear-gradient(180deg,#62F0DC 0%,#2E9BFF 100%);--g-pink:linear-gradient(180deg,#FFB8E8 0%,#F04FB6 100%);
  --g-violet:linear-gradient(180deg,#C2A8FF 0%,#7A4DF0 100%);--g-orange:linear-gradient(180deg,#FFBA6B 0%,#FF7A2E 100%);
  --shadow:0 1px 2px rgba(10,15,40,.08),0 18px 40px -22px rgba(0,0,0,.6);color-scheme:light
}
*{box-sizing:border-box}
html{background:#040918}
body{margin:0;font:16px/1.5 "Nunito",system-ui,-apple-system,"Segoe UI",sans-serif;color:var(--ink);background:transparent;min-height:100vh}
#sky{position:fixed;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none}
[hidden]{display:none!important}
a{color:var(--violet)}
button{font:inherit;color:inherit;cursor:pointer}
button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid #A78BFF;outline-offset:3px}
h1,h2,h3{margin:0;font-weight:900;letter-spacing:-.02em;line-height:1.15}
.wrap{max-width:980px;margin:0 auto;padding-inline:16px}
.tile{aspect-ratio:1;border-radius:30%;position:relative;overflow:hidden;flex:none;box-shadow:inset 0 3px 1px rgba(255,255,255,.55),inset 0 -8px 14px rgba(50,20,110,.16),0 12px 22px -12px rgba(0,0,0,.55)}
.tile svg{width:100%;height:100%;display:block}
.t-sky{background:var(--g-sky)}.t-pink{background:var(--g-pink)}.t-sun{background:var(--g-sun)}.t-violet{background:var(--g-violet)}.t-orange{background:var(--g-orange)}

/* header */
.ch{position:sticky;top:0;z-index:20;background:rgba(4,8,22,.62);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid rgba(255,255,255,.07)}
.ch .wrap{display:flex;align-items:center;justify-content:space-between;gap:10px;padding-block:10px}
.brand{display:flex;align-items:center;gap:10px;color:#fff;text-decoration:none;font-weight:900;font-size:17px}
.brand .tile{width:40px}
.ch-r{display:flex;align-items:center;gap:10px;color:var(--on-dark-2);font-weight:800;font-size:14px}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;border-radius:999px;padding:14px 24px;font-weight:900;font-size:16px;background:var(--g-cta);color:#fff;text-decoration:none;
  box-shadow:inset 0 2px 0 rgba(255,255,255,.35),0 10px 22px -10px rgba(160,50,200,.75);transition:transform .15s}
.btn:hover{transform:translateY(-1px)}.btn:active{transform:scale(.98)}
.btn[disabled]{opacity:.45;cursor:not-allowed;transform:none}
.btn.gold{background:var(--g-sun);color:#4A2A00;box-shadow:inset 0 2px 0 rgba(255,255,255,.6),0 10px 22px -10px rgba(230,140,0,.8)}
.btn.ghost{background:#fff;color:var(--ink);box-shadow:inset 0 0 0 2px var(--line)}
.btn.dark{background:rgba(255,255,255,.1);color:#fff;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.2)}
.btn.small{padding:9px 16px;font-size:14px}
.btn.wide{width:100%}
.btn.ya{background:#FC3F1D;color:#fff;box-shadow:0 10px 22px -10px rgba(252,63,29,.7)}
.btn.gg{background:#fff;color:#1F1F1F;box-shadow:inset 0 0 0 2px #DADCE0}
.btn.tg{background:#29A9EB;color:#fff;box-shadow:0 10px 22px -10px rgba(41,169,235,.8)}
.btn.wa{background:#25D366;color:#fff}
.link{background:none;border:0;padding:0;color:var(--violet);font-weight:800;text-decoration:underline;text-underline-offset:3px}

/* login */
.login{max-width:460px;margin:40px auto;background:#fff;border-radius:32px;padding:28px 24px;text-align:center;box-shadow:var(--shadow)}
.login .tiles{display:flex;justify-content:center;gap:10px;margin-bottom:16px}.login .tiles .tile{width:58px}
.login h1{font-size:26px}.login p{color:var(--muted);font-weight:600;margin:10px 0 20px}
.login .btns{display:flex;flex-direction:column;gap:10px}
.login small{display:block;margin-top:16px;color:var(--muted);font-size:13px;line-height:1.45}
.alert{border-radius:16px;padding:12px 14px;font-weight:800;font-size:14px;margin-bottom:14px;text-align:left}
.alert.err{background:#FFE9EC;color:#B42346}.alert.ok{background:#E3F8EC;color:#11793F}.alert.info{background:#FFF4D6;color:#7A4C00}

/* greeting + tabs */
.hello{display:flex;align-items:center;gap:14px;color:#fff;margin:22px 0 14px}
.hello .tile{width:54px}.hello h1{font-size:clamp(22px,4vw,30px)}.hello p{margin:2px 0 0;color:var(--on-dark-2);font-weight:700;font-size:14px}
.tabs{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;background:rgba(255,255,255,.08);padding:6px;border-radius:22px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.1)}
.tabs button{border:0;background:none;border-radius:16px;padding:10px 6px;color:var(--on-dark);font-weight:900;font-size:14px;display:flex;flex-direction:column;align-items:center;gap:2px}
.tabs button i{font-style:normal;font-size:22px;line-height:1}
.tabs button[aria-selected=true]{background:#fff;color:var(--ink);box-shadow:0 8px 18px -10px rgba(0,0,0,.6)}
.panel{margin:16px 0 40px}
.card{background:#fff;border-radius:26px;padding:18px;box-shadow:var(--shadow)}
.card + .card{margin-top:12px}
.empty{text-align:center;padding:30px 18px}.empty .tile{width:70px;margin:0 auto 12px}.empty p{color:var(--muted);font-weight:700;margin:8px 0 16px}
.sec-t{color:#fff;font-size:20px;margin:22px 0 10px}

/* books */
.books{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:14px}
.bk{background:#fff;border-radius:26px;overflow:hidden;box-shadow:var(--shadow);display:flex;flex-direction:column}
.bk-img{aspect-ratio:4/3;background:var(--soft);position:relative}
.bk-img img{width:100%;height:100%;object-fit:cover;display:block}
.badge{position:absolute;top:10px;left:10px;border-radius:99px;padding:5px 11px;font-size:12.5px;font-weight:900}
.badge.paid{background:#E3F8EC;color:#11793F}.badge.draft{background:#FFF4D6;color:#7A4C00}
.bk-b{padding:14px 16px 16px;display:flex;flex-direction:column;gap:8px;flex:1}
.bk-b h3{font-size:18px}.bk-meta{color:var(--muted);font-size:13.5px;font-weight:700}
.bk-act{display:flex;flex-wrap:wrap;gap:8px;margin-top:auto}
.bk-del{margin-left:auto;font-size:13px;color:var(--muted)}

/* payments */
.pay{display:grid;grid-template-columns:1fr auto;gap:4px 12px;align-items:center}
.pay b{font-size:16px}.pay .sum{font-weight:900;font-size:20px;text-align:right}
.pay .meta{color:var(--muted);font-size:13.5px;font-weight:700}
.pay .lines{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:4px 14px;font-size:13px;color:var(--muted);font-weight:700;border-top:1px dashed var(--line);padding-top:8px;margin-top:6px}
.st{display:inline-block;border-radius:99px;padding:3px 10px;font-size:12.5px;font-weight:900;justify-self:end}
.st.succeeded{background:#E3F8EC;color:#11793F}.st.pending{background:#FFF4D6;color:#7A4C00}.st.canceled{background:#EEF0F5;color:#5B6178}.st.refunded{background:#E3F1FF;color:#1E5FB0}
.bonus-row{display:flex;justify-content:space-between;gap:10px;padding:8px 0;border-bottom:1px dashed var(--line);font-weight:700;font-size:14.5px}
.bonus-row:last-child{border:0}.plus{color:var(--green)}.minus{color:#B42346}

/* referral */
.ref-hero{display:flex;gap:14px;align-items:center}.ref-hero .tile{width:62px}
.ref-hero h2{font-size:21px}.ref-hero p{margin:4px 0 0;color:var(--muted);font-weight:700}
.steps3{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:16px 0}
.steps3 div{background:var(--soft);border-radius:18px;padding:12px;font-size:14px;font-weight:700;color:var(--muted)}
.steps3 b{display:block;color:var(--ink);font-size:15px}
.copy{display:flex;gap:8px;background:var(--soft);border-radius:18px;padding:6px}
.copy input{flex:1;min-width:0;border:0;background:none;font:inherit;font-weight:800;padding:8px 10px;color:var(--ink)}
.share-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:14px}
.stats div{background:var(--soft);border-radius:18px;padding:12px;text-align:center;font-size:13px;font-weight:700;color:var(--muted)}
.stats b{display:block;font-size:24px;color:var(--ink)}

/* help */
.help-top{display:flex;gap:14px;align-items:center}.help-top .tile{width:62px}
.help-btns{display:flex;flex-direction:column;gap:10px;margin-top:16px}
.faq details{border-bottom:1px dashed var(--line);padding:12px 0}.faq details:last-child{border:0}
.faq summary{font-weight:900;cursor:pointer;list-style:none}.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:" +";color:var(--violet)}.faq details[open] summary::after{content:" −"}
.faq p{margin:8px 0 0;color:var(--muted);font-weight:600;font-size:14.5px}
.docs{display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:12px;font-size:13.5px;font-weight:800}

/* modal */
.modal{position:fixed;inset:0;z-index:50;background:rgba(2,5,15,.6);backdrop-filter:blur(6px);display:grid;place-items:center;padding:12px}
.dialog{background:#fff;border-radius:30px;width:100%;max-width:480px;max-height:94vh;overflow:auto;padding:22px;position:relative;animation:pop .3s cubic-bezier(.3,1.5,.5,1)}
@keyframes pop{from{transform:scale(.92);opacity:0}to{transform:none;opacity:1}}
.dialog h2{font-size:22px;padding-right:36px}
.x{position:absolute;top:14px;right:14px;width:38px;height:38px;border-radius:50%;border:0;background:var(--soft);font-size:20px}
.opts{display:flex;flex-direction:column;gap:8px;margin:14px 0}
.opt{display:flex;align-items:center;gap:12px;border:0;border-radius:18px;background:var(--soft);padding:12px 14px;text-align:left;box-shadow:inset 0 0 0 2px transparent}
.opt[aria-checked=true]{background:#fff;box-shadow:inset 0 0 0 2.5px #8B5CFF}
.opt i{font-style:normal;font-size:26px}.opt b{display:block}.opt span{font-size:13px;color:var(--muted);font-weight:700}
.opt .pr{margin-left:auto;font-weight:900;font-size:18px;white-space:nowrap}
.check{display:flex;gap:10px;align-items:flex-start;font-size:14px;font-weight:700;color:var(--muted);margin:10px 0;cursor:pointer;line-height:1.4}
.check input{width:20px;height:20px;flex:none;accent-color:#7A4DF0;margin:0}
.sum-box{background:var(--soft);border-radius:18px;padding:12px 14px;font-weight:700;font-size:14.5px}
.sum-box div{display:flex;justify-content:space-between;gap:8px;padding:2px 0}
.sum-box .total{font-weight:900;font-size:19px;border-top:1px dashed var(--line);margin-top:6px;padding-top:8px}
.err{color:#B42346;font-weight:800;font-size:14px;margin:8px 0 0}
#ykWidget{margin-top:12px;min-height:40px}

@media (max-width:640px){
  .tabs{position:fixed;left:10px;right:10px;bottom:calc(10px + env(safe-area-inset-bottom,0px));z-index:30;background:rgba(10,14,34,.9);backdrop-filter:blur(12px)}
  .panel{margin-bottom:110px}
  .steps3,.stats{grid-template-columns:1fr}
  .stats{grid-template-columns:repeat(3,1fr)}
  .ch-r .who{display:none}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}