:root{--ink:#20364b;--muted:#657889;--pink:#fb648e;--pink-dark:#bd3568;--cream:#fff9f1;--violet:#7865e5;--cyan:#1389aa;--outline:#e9dcca;--shadow:0 28px 72px #745e4640;}
    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{margin:0;min-width:320px;font-family:"Trebuchet MS","Arial Rounded MT Bold",system-ui,sans-serif;color:var(--ink);background:radial-gradient(circle at 7% 9%,#fff8cc 0,transparent 25%),radial-gradient(circle at 95% 90%,#ffd7e5 0,transparent 30%),#faf3e8;min-height:100vh}
    button{font:inherit;cursor:pointer}
    button:focus-visible{outline:4px solid #795bd2;outline-offset:3px}
    .shell{width:min(1220px,calc(100% - 32px));margin:0 auto;padding:24px 0 36px}
    .topbar{display:flex;align-items:center;gap:14px;margin:0 8px 19px}
    .brand-mark{flex:none;display:grid;place-items:center;width:48px;height:48px;border-radius:17px;background:#ff769a;color:white;font-weight:900;font-size:29px;box-shadow:0 7px 0 #e8527d}
    .brand-copy{min-width:0}
    .brand-copy strong{display:block;font-size:21px;line-height:1.15}
    .brand-copy span{font-size:13px;color:var(--muted);font-weight:700}
    .top-pill{margin-left:auto;border:2px solid #edddca;border-radius:99px;padding:10px 16px;background:#fff9f0;color:#6b5972;font-size:13px;font-weight:900;white-space:nowrap}
    .progress{margin:0 7px 17px;display:flex;align-items:center;gap:16px}
    .progress-track{height:10px;border-radius:99px;background:#ebdcca;overflow:hidden;flex:1}
    .progress-bar{height:100%;width:0;background:linear-gradient(90deg,#ffa65c,#fa6f9b,#9e79eb);border-radius:99px;transition:width .3s ease}
    .progress-label{font-size:13px;white-space:nowrap;font-weight:900;color:#776a76;min-width:105px;text-align:right}
    .book{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);min-height:610px;overflow:hidden;border:8px solid white;border-radius:32px;background:#fff;box-shadow:var(--shadow);position:relative}
    .book:after{content:"";position:absolute;top:0;bottom:0;left:50%;width:15px;transform:translateX(-50%);background:linear-gradient(90deg,#00000011,transparent 45%,#00000009);pointer-events:none;z-index:3}
    .art-panel{position:relative;background:#bdebf5;min-width:0;overflow:hidden;display:flex;align-items:center}
    #scene{display:block;width:100%;height:100%;min-height:600px;object-fit:cover}
    .art-sticker{position:absolute;top:20px;left:20px;padding:9px 15px;border-radius:999px;background:#ffffffdb;color:#47738c;font-weight:900;letter-spacing:.06em;font-size:12px;box-shadow:0 5px 18px #365e6620}
    .read-panel{background:var(--cream);padding:clamp(28px,4vw,58px);display:flex;flex-direction:column;min-width:0;position:relative;justify-content:center}
    .read-panel:before,.read-panel:after{content:"✳";font-size:34px;position:absolute;color:#eac7d8;opacity:.55}
    .read-panel:before{right:26px;top:17px}.read-panel:after{left:25px;bottom:14px;color:#c7d6ee;font-size:24px}
    .chapter{font-size:12px;letter-spacing:.17em;text-transform:uppercase;font-weight:900;color:var(--pink-dark);margin-bottom:13px}
    .page-title{font-size:clamp(32px,3.6vw,52px);line-height:1.09;letter-spacing:-.045em;font-weight:1000;margin:0 0 24px;color:#253f54}
    .story{font-size:clamp(21px,2.05vw,28px);line-height:1.55;letter-spacing:-.017em}
    .story p{margin:0 0 16px}.story p:last-child{margin-bottom:0}
    .story .dialogue{color:#5961a1;font-weight:800}
    .word{display:inline;border:0;padding:0 3px;margin:0 -3px;border-radius:5px;color:#ba356b;background:linear-gradient(transparent 61%,#ffe0a2 61%);font-weight:900;text-decoration:none;line-height:inherit;white-space:normal}
    .word:hover{background:#ffe0a2}
    .sound-row{margin-top:28px;display:flex;flex-wrap:wrap;gap:9px}
    .syllable{background:#fff;color:#765ed5;border:2px solid #ddd4ff;border-radius:16px;padding:11px 14px;box-shadow:0 4px 0 #d9d0fa;font-size:17px;font-weight:1000;letter-spacing:.06em;min-width:60px}
    .syllable:hover{transform:translateY(-2px);background:#f3efff}
    .syllable:active{transform:translateY(3px);box-shadow:0 1px 0 #d9d0fa}
    .hint{margin-top:22px;color:#7d8793;font-size:14px;line-height:1.45;font-weight:700}
    .page-number{position:absolute;right:30px;bottom:22px;font-size:13px;color:#8e8b95;font-weight:900}
    .cover .chapter{color:#ad3c72}.cover .page-title{font-size:clamp(44px,5.2vw,75px);color:#2e5071;line-height:1.05;margin-bottom:20px}
    .cover .story{font-size:clamp(20px,2vw,25px);color:#5d6f85}
    .cover .cover-sub{display:inline-block;background:#ffe79f;color:#815c30;border-radius:12px;padding:9px 14px;font-weight:900;font-size:16px;margin-top:21px}
    .controls{display:flex;align-items:center;gap:12px;margin-top:23px}
    .nav-button{border:0;border-radius:18px;min-height:58px;padding:12px 21px;font-weight:900;display:inline-flex;align-items:center;justify-content:center;gap:9px;transition:transform .15s,filter .15s}
    .nav-button:hover:not(:disabled){transform:translateY(-2px);filter:brightness(1.015)}
    .nav-button:active:not(:disabled){transform:translateY(1px)}
    .nav-button:disabled{opacity:.38;cursor:default}
    .prev{background:#fff;border:2px solid #eadccc;color:#586d80}
    .next{background:#f96b91;color:white;box-shadow:0 5px 0 #da4774;font-size:18px;min-width:188px}
    .listen{background:#e9e3fc;color:#6950b7;margin-left:auto}
    .dots{display:flex;justify-content:center;align-items:center;gap:6px;flex-wrap:wrap;margin:19px auto 0;max-width:520px}
    .dot{display:block;width:10px;height:10px;border-radius:99px;border:0;padding:0;background:#d6c9be;transition:all .2s}
    .dot[aria-current="page"]{width:29px;background:#f96b91}
    .bottom-note{font-size:13px;text-align:center;margin-top:14px;color:#8a7d7a;font-weight:700}
    .exercise{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:7px;margin:20px 0 0}
    .exercise button{border-radius:14px;border:2px solid #ddd4ff;background:white;color:#6e58bf;padding:14px 2px;font-size:17px;font-weight:1000;box-shadow:0 4px 0 #e0d9f8}
    .exercise button.done{background:#dff8e9;color:#247b59;border-color:#a9e8c3;box-shadow:0 4px 0 #9dd5b5}
    .medal{background:#fff0b9;color:#8d5b24;border-radius:18px;padding:15px;font-weight:900;margin-top:14px;text-align:center;border:2px dashed #e8bf65;font-size:22px}
    .toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,20px);background:#253c52;color:white;box-shadow:0 12px 34px #253c5250;padding:12px 18px;border-radius:14px;font-size:14px;font-weight:800;opacity:0;pointer-events:none;transition:all .2s;z-index:20;max-width:90vw;text-align:center}
    .toast.show{opacity:1;transform:translate(-50%,0)}
    /* Virada 3D de uma folha: frente, verso, vinco central e sombra dinâmica. */
    .page-turn-layer{position:absolute;inset:0;z-index:9;overflow:hidden;pointer-events:none;perspective:1600px;isolation:isolate}
    .page-turn-still{position:absolute;top:0;bottom:0;width:50%;overflow:hidden;background:#fff9f1}
    .page-turn-layer.forward .page-turn-still{left:0}
    .page-turn-layer.backward .page-turn-still{right:0}
    .page-turn-leaf{position:absolute;top:0;bottom:0;width:50%;transform-style:preserve-3d;transition:transform 780ms cubic-bezier(.27,.04,.3,1);will-change:transform;z-index:2}
    .page-turn-layer.forward .page-turn-leaf{left:50%;transform-origin:0 50%}
    .page-turn-layer.backward .page-turn-leaf{left:0;transform-origin:100% 50%}
    .page-turn-layer.forward.turning .page-turn-leaf{transform:rotateY(-180deg)}
    .page-turn-layer.backward.turning .page-turn-leaf{transform:rotateY(180deg)}
    .page-turn-leaf:after{content:"";position:absolute;inset:0;transform:translateZ(2px);background:linear-gradient(90deg,#26334f22,transparent 28%,#ffffff55 77%,#25344c22);opacity:0;animation:page-glint 780ms ease-in-out both;pointer-events:none}
    .page-turn-face{position:absolute;inset:0;overflow:hidden;backface-visibility:hidden;-webkit-backface-visibility:hidden;background:#fff9f1;box-shadow:inset 0 0 20px #4c3c2520}
    .page-turn-face.page-turn-back{transform:rotateY(180deg);background:repeating-linear-gradient(0deg,transparent 0 34px,#e7d8bc24 35px 36px),linear-gradient(105deg,#e8dac4 0%,#fff9eb 22%,#fffdf5 75%,#e0cfb2 100%);display:flex;align-items:center;justify-content:center;box-shadow:inset 14px 0 34px #5c49353a}
    .page-turn-watermark{font-size:clamp(75px,9vw,190px);font-weight:900;color:#cbb5d433;user-select:none}
    .page-turn-face .art-panel,.page-turn-still .art-panel{width:100%;height:100%}
    .page-turn-face .read-panel,.page-turn-still .read-panel{width:100%;height:100%}
    .page-turn-layer .art-panel img{display:block;width:100%;height:100%;object-fit:cover}
    .page-turn-layer .art-sticker{z-index:2}
    .page-turn-layer.mobile-leaf .page-turn-still{display:none}
    .page-turn-layer.mobile-leaf .page-turn-leaf{left:0;width:100%}
    .page-turn-layer.mobile-leaf.forward .page-turn-leaf{transform-origin:0 50%}
    .page-turn-layer.mobile-leaf.backward .page-turn-leaf{transform-origin:100% 50%}
    .page-turn-mobile-spread{width:100%;height:100%;display:grid;grid-template-columns:1fr;grid-template-rows:minmax(0,auto) minmax(0,1fr);overflow:hidden}
    @keyframes page-glint{0%,100%{opacity:0}48%{opacity:.7}}
    @media(max-width:820px){
      .shell{width:min(650px,calc(100% - 18px));padding-top:12px}.topbar{margin-bottom:14px}.top-pill{display:none}
      .book{grid-template-columns:1fr;border-width:6px;border-radius:24px;min-height:0}
      .book:after{display:none}.art-panel{max-height:320px;min-height:225px}.art-panel #scene{min-height:0;height:auto;aspect-ratio:1000/580}
      .read-panel{padding:26px 24px 51px;min-height:390px}.page-title{font-size:clamp(30px,7vw,45px);margin-bottom:18px}
      .story{font-size:clamp(21px,4.5vw,26px)}.cover .page-title{font-size:clamp(43px,9vw,64px)}
      .controls{gap:8px}.nav-button{min-height:52px;padding:9px 13px;border-radius:14px}.next{font-size:16px;min-width:0;flex:1}
      .listen{margin-left:0}.progress{margin:0 6px 12px}.hint{margin-top:17px}.page-number{bottom:14px}
    }
    @media(max-width:450px){
      .brand-copy strong{font-size:17px}.brand-copy span{font-size:11px}.brand-mark{width:39px;height:39px;border-radius:12px;font-size:24px}
      .art-panel{max-height:244px;min-height:0}.read-panel{min-height:410px;padding:25px 21px 46px}
      .story{font-size:20px;line-height:1.53}.chapter{font-size:11px}.hint{font-size:12px}.syllable{font-size:15px;padding:8px;min-width:48px}
      .nav-button{font-size:14px}.listen{padding-left:10px;padding-right:10px}.prev{font-size:14px}
    }
    @media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
    @media print{body{background:white}.shell{width:100%;padding:0}.topbar,.progress,.controls,.dots,.bottom-note,.toast{display:none}.book{box-shadow:none;border:0;border-radius:0;min-height:100vh}.word{background:none;text-decoration:underline}.read-panel{background:white}}

    /* Shared reader additions */
    [hidden]{display:none!important}
    .reader-topbar{gap:11px}
    .back-to-shelf{display:inline-flex;gap:4px;align-items:center;flex:none;text-decoration:none;color:#64738b;background:#fff9ef;border:2px solid #edddca;border-radius:14px;padding:10px 13px;font-size:13px;font-weight:900}
    .back-to-shelf:hover{background:white;color:#a64270}
    .reader-logo{border-radius:13px;flex:none}
    .reader-error{background:#fff;border:2px solid #f2d4d2;color:#a23e55;padding:26px;border-radius:18px;margin:25px 0;font-size:20px;line-height:1.5}
    .reader-error a{color:#7458b7}
    #scene{object-fit:cover}
    .challenge-row{display:flex;gap:10px;align-items:flex-start;margin:13px 0}
    .challenge-check{flex:none;border:2px solid #efc876;background:#fff2c6;width:50px;height:50px;border-radius:13px;font-weight:1000;color:#7b539d;font-size:19px}
    .challenge-check[aria-pressed="true"]{border-color:#6bcba4;background:#e3f8e9;color:#247b59}
    .challenge-say{border:0;background:none;text-align:left;color:#34506a;font-size:clamp(16px,1.55vw,20px);line-height:1.35;font-weight:800;padding:5px 0;flex:1}

    /* The library shelf */
    .shelf-shell{width:min(1200px,calc(100% - 36px));margin:0 auto}
    .shelf-header{min-height:106px;display:flex;align-items:center;justify-content:space-between;gap:20px}
    .shelf-brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--ink)}
    .shelf-brand img{border-radius:15px;box-shadow:0 5px 0 #eac6d0}
    .shelf-brand strong{display:block;font-size:23px;letter-spacing:-.045em;line-height:1.1}
    .shelf-brand small{display:block;color:#8a7788;font-size:12px;font-weight:800;margin-top:4px}
    .shelf-actions{display:flex;align-items:center;gap:12px}
    .connection-status{font-size:13px;font-weight:900;color:#638374;border-radius:100px;background:#e7f6e8;padding:11px 14px;white-space:nowrap}
    .connection-status.offline{background:#fff1d2;color:#926b43}
    .install-action{background:#fff;border:2px solid #e6d8eb;color:#7454bd;padding:11px 16px;border-radius:14px;font-size:14px;font-weight:900}
    .shelf-hero{display:grid;grid-template-columns:1.12fr .88fr;overflow:hidden;border-radius:35px;background:linear-gradient(130deg,#e8dffc 0%,#f8e7f1 47%,#ffdfbb 100%);min-height:455px;box-shadow:0 17px 46px #9e8b9a1e;position:relative}
    .shelf-hero-copy{padding:clamp(32px,5vw,72px);position:relative;z-index:2;align-self:center}
    .hero-kicker,.section-kicker{font-size:12px;letter-spacing:.14em;font-weight:1000;color:#ab5b91}
    .shelf-hero h1{font-size:clamp(39px,5vw,68px);line-height:1.06;letter-spacing:-.065em;color:#3d4268;margin:17px 0 20px;font-weight:1000;max-width:620px}
    .hero-period{color:#ee77a0}
    .shelf-hero p{max-width:480px;font-size:19px;line-height:1.5;color:#66728a;font-weight:700;margin:0 0 27px}
    .hero-button{background:#f76e96;color:#fff;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:25px;min-height:57px;border-radius:17px;padding:13px 22px;font-weight:1000;box-shadow:0 6px 0 #df4f7f}
    .hero-button:hover{transform:translateY(-2px)}
    .hero-visual{min-height:455px;position:relative;overflow:hidden}
    .hero-visual:before{content:"";position:absolute;width:470px;height:470px;right:-15px;top:40px;background:#fff6e890;border-radius:50%}
    .hero-book{width:245px;height:326px;border-radius:10px 40px 40px 10px;position:absolute;top:64px;left:28%;overflow:hidden;box-shadow:14px 17px 30px #73587442, inset 12px 0 #ffffff30;transform:rotate(9deg);border:6px solid #fff7ee}
    .hero-book-front{background:#a8def0;z-index:2}.hero-book-front img{width:100%;height:100%;object-fit:cover}
    .hero-book-back{top:86px;left:11%;transform:rotate(-14deg);background:linear-gradient(125deg,#ad9dff,#795ed0);border-color:#fff2dc}
    .hero-book-back:after{content:"✳";font-size:115px;color:#ffffff95;position:absolute;left:60px;top:95px}
    .hero-shelf{position:absolute;bottom:25px;left:6%;width:89%;height:24px;border-radius:100px;background:#a783ac;box-shadow:0 17px 0 #cbaac9}
    .hero-star{position:absolute;color:#fff7bf;z-index:3;font-size:62px}.hero-star-a{left:9%;top:27px;transform:rotate(12deg)}.hero-star-b{right:10%;top:39px;font-size:40px}
    .hero-sparkle{position:absolute;right:7%;bottom:94px;color:#ed89b1;font-size:53px;transform:rotate(-12deg)}
    .shelf-section{padding:67px 0 35px}
    .section-topline{display:flex;justify-content:space-between;align-items:end;gap:24px;margin-bottom:23px}
    .section-topline h2{font-size:clamp(30px,3.3vw,44px);letter-spacing:-.05em;line-height:1.12;margin:10px 0 0}
    .section-topline p{color:#887b8a;font-size:15px;font-weight:800;margin:0 2px 4px;white-space:nowrap}
    .book-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:23px}
    .shelf-loading{font-size:18px;color:#807790;font-weight:800}
    .book-card{display:block;min-width:0;padding:16px;border:2px solid #fff;border-radius:26px;background:#fffaf3;box-shadow:0 13px 34px #997a7825;transition:transform .2s,box-shadow .2s;text-decoration:none;color:inherit}
    .book-card:hover{transform:translateY(-5px);box-shadow:0 20px 37px #997a7838}
    .book-card-cover{height:272px;border-radius:10px 40px 40px 10px;overflow:hidden;position:relative;background:#d9f1f2}
    .book-card-cover img{width:100%;height:100%;object-fit:cover;display:block}
    .book-card-cover .cover-label{position:absolute;left:13px;top:13px;background:#fffaf3;color:#aa4f80;border-radius:100px;padding:8px 12px;font-size:11px;font-weight:1000;box-shadow:0 4px 12px #49627625}
    .book-card-copy{padding:19px 7px 8px}
    .book-card h3{font-size:25px;letter-spacing:-.045em;margin:0 0 8px;line-height:1.1}
    .book-card p{font-size:14px;color:#7f788a;line-height:1.45;font-weight:700;margin:0 0 15px}
    .card-foot{display:flex;align-items:center;justify-content:space-between;gap:13px}
    .card-sounds{display:flex;gap:5px;flex-wrap:wrap}
    .card-sounds span{font-size:10px;font-weight:1000;letter-spacing:.03em;color:#8066bb;border-radius:7px;background:#eee8ff;padding:6px 7px}
    .book-achievement{display:inline-block;background:#fff1bd;color:#74591a;border-radius:20px;padding:7px 11px;font-size:12px;font-weight:1000;margin:0 0 13px}
    .book-achievement.in-progress{background:#e9f5ec;color:#357555}
    .card-open{flex:none;font-size:14px;color:#c44d7e;font-weight:1000}
    .shelf-footnote{margin:22px 0 45px;padding:19px;background:#fff2d5;color:#8a6d5a;border-radius:16px;text-align:center;font-size:15px;font-weight:900}
    .site-footer{border-top:2px solid #e9dece;display:flex;justify-content:space-between;gap:15px;padding:24px 0 35px;color:#93858b;font-size:12px;font-weight:800}
    .customize-action{display:inline-flex;align-items:center;gap:5px;text-decoration:none;border:2px solid #e5d5e9;background:#fffafc;color:#8655a5;padding:11px 15px;border-radius:14px;font-size:13px;font-weight:1000;white-space:nowrap;cursor:pointer}
    .customize-action:hover{background:#f9eefb}
    .hero-avatar{position:absolute;right:5%;bottom:26px;z-index:4;width:138px;height:180px;display:grid;place-items:end center;background:#fff9f0;border:5px solid white;border-radius:50% 50% 28% 28%;box-shadow:0 10px 25px #7059814b;overflow:hidden;transform:rotate(-7deg)}
    .hero-avatar svg{height:155px;max-width:100%}
    .reader-topbar .customize-action{margin-left:auto}

    /* Editor dedicado do protagonista */
    .preferences-form{padding:clamp(24px,4vw,42px)}
    .preferences-heading{display:flex;align-items:start;justify-content:space-between;gap:16px}
    .preferences-heading h2{font-size:clamp(29px,4.1vw,43px);letter-spacing:-.055em;line-height:1.1;margin:8px 0 0}
    .settings-close{width:42px;height:42px;flex:none;background:#fff;border:2px solid #eee0d9;border-radius:14px;color:#88718b;font-size:19px;font-weight:1000}
    .settings-intro{margin:12px 0 22px;color:#7e7a88;font-size:16px;font-weight:700;line-height:1.45}
    .preferences-content{display:grid;grid-template-columns:230px minmax(0,1fr);gap:24px;margin-bottom:25px}
    .avatar-editor{min-height:320px;background:linear-gradient(165deg,#d0eaf3,#dbe8fc 52%,#fbe7d2);border-radius:24px;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;padding:16px}
    .avatar-stage{height:270px;width:200px;display:flex;align-items:flex-end;justify-content:center}
    .avatar-stage svg{height:265px;max-width:100%}
    .avatar-editor>span{font-size:13px;font-weight:1000;letter-spacing:.03em;color:#678399;margin:3px 0 8px}
    .preferences-fields{display:flex;flex-direction:column;min-width:0}
    .field-label,.gender-fieldset legend,.avatar-style-fieldset legend,.skin-fieldset legend{font-size:14px;font-weight:1000;color:#4f556f;margin-bottom:8px}
    .preferences-fields input[type=text]{width:100%;height:45px;padding:10px 13px;border:2px solid #e7dbe3;background:white;border-radius:13px;font-size:16px;color:#33495f;margin-bottom:16px;min-width:0}
    .preferences-fields input[type=text]:focus{outline:3px solid #d9c4fe;border-color:#af8de5}
    .pronunciation-input-row{display:flex;align-items:stretch;gap:10px;min-width:0;margin-bottom:16px}
    .preferences-fields .pronunciation-input-row input[type=text]{flex:1;min-width:0;width:auto;margin:0}
    .pronunciation-preview-button{display:inline-flex;align-items:center;justify-content:center;gap:6px;flex:none;min-width:100px;min-height:45px;border-radius:13px;border:2px solid #d9c4f0;background:#f0e5ff;color:#664797;font-size:14px;font-weight:900;cursor:pointer;transition:background .16s ease}
    .pronunciation-preview-button:hover{background:#e4d2ff}
    .pronunciation-preview-button:focus-visible{outline:3px solid #a67df0;outline-offset:2px}
    @media(max-width:370px){.pronunciation-preview-button{min-width:48px;padding:0 10px}.pronunciation-preview-text{display:none}}
    .field-help{font-size:12px;color:#8d8496;margin:-8px 0 17px;line-height:1.35}
    .gender-fieldset,.avatar-style-fieldset,.skin-fieldset{border:0;padding:0;margin:0 0 18px;min-width:0}
    .gender-fieldset{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}
    .gender-fieldset legend{grid-column:1/-1}
    .gender-fieldset label{display:flex;align-items:center;gap:5px;background:white;border:2px solid #eadfe8;border-radius:13px;padding:9px 7px;cursor:pointer;font-size:12px;font-weight:1000}
    .gender-fieldset label:has(input:checked){background:#f3eaff;border-color:#ae94e5}
    .gender-fieldset input{accent-color:#8659bf;flex:none}
    .gender-fieldset small{display:block;font-size:10px;font-weight:800;color:#877c91;margin-top:3px}
    .avatar-style-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}
    .avatar-style-grid.outfits-grid{grid-template-columns:repeat(6,minmax(0,1fr))}
    .avatar-style-grid.bottoms-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
    .avatar-style{display:flex;flex-direction:column;align-items:center;justify-content:center;border:2px solid #eadfe7;background:white;border-radius:15px;min-height:122px;padding:8px 5px;gap:4px;color:#716b85;font-weight:1000;font-size:12px}
    .avatar-style.selected{border-color:#a081df;background:#f2ecff;color:#694cab}
    .avatar-style.locked{opacity:.52;filter:grayscale(1);cursor:not-allowed;background:#f6f6f6}
    .style-preview{display:flex;height:110px;align-items:center;justify-content:center;overflow:hidden;width:100%}
    .style-preview svg{height:100%;width:auto;max-width:100%;max-height:100%;transform:none}
    .skin-options{display:flex;align-items:center;flex-wrap:wrap;gap:11px;margin:6px 0 12px}
    .avatar-color-fields{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:16px}
    .skin-swatch{width:37px;height:37px;border-radius:50%;border:3px solid #fff;box-shadow:0 0 0 2px #dfd6e0;position:relative}
    .skin-swatch.selected{box-shadow:0 0 0 4px #8c70cb}
    .skin-swatch.selected:after{content:"✓";position:absolute;inset:0;display:grid;place-items:center;color:#253346;text-shadow:0 1px 2px #fff;font-weight:1000}
    .custom-color{display:inline-flex;align-items:center;gap:11px;color:#777084;font-size:13px;font-weight:800;margin-top:4px}
    .custom-color input{height:36px;width:55px;border:0;padding:0;background:transparent;cursor:pointer}
    .custom-color-row{display:grid;grid-template-columns:max-content minmax(0,1fr);align-items:center;gap:5px 11px;margin:7px 0 14px;min-width:0}
    .custom-color-row .custom-color{margin:0;gap:7px}
    .custom-color-row .custom-color span{max-width:128px;line-height:1.25}
    .color-word-tools{display:flex;gap:6px;min-width:0;align-items:center}
    .color-word-input{min-width:0;flex:1;width:100%;height:43px;border:2px solid #dfd2eb;border-radius:12px;background:#fff;color:#33495f;padding:7px 10px;font-size:14px;font-family:inherit}
    .color-word-input:focus-visible{outline:3px solid #d9c4fe;outline-offset:1px;border-color:#ac88df}
    .color-word-hear{flex:none;min-height:43px;padding:8px 10px;border-radius:12px;border:2px solid #d6c1f1;background:#f1e7ff;color:#674898;font-size:13px;font-weight:900;cursor:pointer}
    .color-word-hear:disabled{opacity:.55;cursor:default}
    .color-word-hear:not(:disabled):hover{background:#e6d5ff}
    .color-word-hear:focus-visible{outline:3px solid #a67df0;outline-offset:2px}
    .color-word-name{grid-column:1/-1;color:#7559a0;font-size:12px;font-weight:900;min-width:0;overflow-wrap:anywhere}
    .color-word-name:empty{display:none}
    .profile-backup{padding:20px 22px;background:#eaf6f5;border:2px solid #cce8e4;border-radius:19px;margin:7px 0 15px}
    .profile-backup h3{font-size:20px;line-height:1.2;margin:0 0 8px;color:#285b66;letter-spacing:-.025em}
    .profile-backup p{margin:0 0 14px;font-size:13px;color:#557479;font-weight:700;line-height:1.5}
    .profile-backup-actions{display:flex;flex-wrap:wrap;gap:10px}
    .profile-backup-actions button{min-height:46px;padding:11px 15px;border-radius:13px;border:2px solid #57a9a2;background:white;color:#306a67;font-size:14px;font-weight:1000}
    .profile-backup-actions #downloadProfile{background:#32968f;color:white;border-color:#32968f}
    .profile-backup .profile-backup-status{min-height:1px;margin:11px 0 0;font-size:13px;color:#326d5f;font-weight:900}
    .profile-backup .profile-backup-status:empty{display:none}
    .settings-privacy{font-size:12px;color:#827d8b;background:#f3eff5;border-radius:12px;padding:12px 14px;margin:17px 0 16px;font-weight:800}
    .settings-actions{display:flex;align-items:center;justify-content:space-between;gap:12px}
    .settings-actions button{border-radius:14px;padding:14px 18px;min-height:52px;font-weight:1000;font-size:15px}
    .settings-reset{border:2px solid #e7d9e6;background:white;color:#786e8b}
    .settings-save{border:0;background:#f66e98;color:#fff;box-shadow:0 5px 0 #dd517e}

    /* Editor em página completa: prévia fixa durante toda a rolagem. */
    .settings-screen{background:radial-gradient(circle at 18% 5%,#f7ddeb 0,transparent 34%),#faf3e8;min-height:100dvh}
    .settings-page-shell{width:min(1360px,calc(100% - 48px));margin:0 auto;padding-bottom:44px}
    .settings-site-header{display:flex;align-items:center;justify-content:space-between;gap:15px;padding:22px 0 28px}
    .settings-layout{display:grid;grid-template-columns:minmax(260px,370px) minmax(0,1fr);align-items:start;gap:24px}
    .settings-preview-column{position:sticky;top:20px;align-self:start;z-index:10}
    .settings-preview-column .avatar-editor{min-height:510px;padding:24px;background:linear-gradient(155deg,#cee8f1 0%,#e8dcf9 55%,#fbe7d2 100%);box-shadow:0 12px 30px #684c7740}
    .settings-preview-column .avatar-stage{height:420px;width:300px;max-width:100%}
    .settings-preview-column .avatar-stage svg{height:410px;max-width:100%;width:auto}
    .settings-preview-label{display:flex;align-items:center;flex-direction:column;gap:5px;color:#5c7184;text-align:center}
    .settings-preview-label strong{font-size:24px;line-height:1.15;color:#334c68}
    .settings-preview-label span{font-size:13px;letter-spacing:.05em;font-weight:900}
    .settings-preview-help{margin:17px 15px 0;text-align:center;color:#7e7582;font-size:13px;font-weight:750;line-height:1.4}
    .settings-screen .preferences-form{background:#fffaf4;border-radius:26px;box-shadow:0 10px 34px #75607e22;border:1px solid #e9dfd5;padding:clamp(20px,3.3vw,40px)}
    .settings-screen .preferences-content{grid-template-columns:1fr;margin-bottom:20px}
    .settings-screen .preferences-fields{width:min(100%,650px)}
    .settings-screen .preferences-heading{align-items:center}
    .settings-screen .settings-close{display:inline-flex;align-items:center;justify-content:center;gap:6px;width:auto;padding:10px 16px;min-height:48px;color:#745887;font-size:14px;font-weight:950;text-decoration:none}
    .settings-screen .avatar-style-grid{grid-template-columns:repeat(5,minmax(0,1fr))}
    .settings-screen .avatar-style-grid.outfits-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
    .settings-screen .avatar-style-grid.bottoms-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
    .settings-screen .preferences-form fieldset{scroll-margin-top:20px}
    /* Categorias do editor: uma busca independente e seus seletores de cor. */
    .avatar-category-tabs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;padding:8px;
      background:var(--theme-soft,#f1e9f6);border-radius:19px;margin:14px 0 18px}
    .avatar-category-tab{min-width:0;min-height:54px;border:2px solid transparent;border-radius:13px;padding:9px 10px;
      background:var(--theme-card,#fff);color:var(--theme-text,#685c77);font:inherit;font-size:13px;font-weight:950;
      line-height:1.25;cursor:pointer;overflow-wrap:anywhere}
    .avatar-category-tab:hover{border-color:#cfb4ed}
    .avatar-category-tab.active{background:var(--theme-accent,#a079d9);color:#fff;box-shadow:0 3px 10px #8165ac45}
    .avatar-category-tab:focus-visible{outline:3px solid #b68af0;outline-offset:2px}
    .avatar-category-tab[data-avatar-tab="general"]{grid-column:span 2}
    .avatar-category-panel{min-width:0;background:var(--theme-card,#fffdf9);border:1px solid var(--theme-border,#eee0e9);
      border-radius:19px;padding:clamp(15px,2vw,23px);margin-bottom:17px}
    .avatar-category-panel[hidden],.avatar-category-panel .avatar-style[hidden],
    .avatar-category-panel .pet-choice[hidden]{display:none!important}
    .avatar-search-label{display:block;font-size:14px;font-weight:1000;color:var(--theme-text,#59506d);margin:0 0 9px}
    .avatar-category-search{width:100%;height:48px;border:2px solid #dfd2eb;background:#fff;border-radius:13px;
      color:#33495f;padding:10px 14px;font:inherit;font-size:16px;min-width:0}
    .avatar-category-search:focus-visible{outline:3px solid #dac5fb;border-color:#9b73d5}
    .avatar-search-count{margin:8px 0 17px;color:var(--theme-text,#7c718d);font-size:12px;font-weight:850;min-height:18px}
    .avatar-pet-colors-note{font-size:13px;color:var(--theme-text,#857892);font-weight:750;line-height:1.5}
    #avatarTabGeneral .mood-theme-maker{margin-bottom:0}
    @media(max-width:1000px){
      .avatar-category-tabs{grid-template-columns:repeat(3,minmax(0,1fr))}
      .avatar-category-tab[data-avatar-tab="general"]{grid-column:span 3}
    }
    @media(max-width:600px){
      .avatar-category-tabs{grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;padding:7px}
      .avatar-category-tab[data-avatar-tab="general"]{grid-column:span 2}
      .avatar-category-tab{min-height:49px;padding:8px 6px;font-size:12px}
      .avatar-category-panel{padding:13px}
    }
    @media(max-width:1000px){.book-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
    @media(max-width:850px){
      .settings-page-shell{width:calc(100% - 24px)}
      .settings-layout{grid-template-columns:minmax(195px,255px) minmax(0,1fr);gap:15px}
      .settings-preview-column .avatar-editor{min-height:360px;padding:14px}
      .settings-preview-column .avatar-stage{height:295px;width:210px}
      .settings-preview-column .avatar-stage svg{height:290px}
      .settings-preview-label strong{font-size:19px}
      .settings-screen .avatar-style-grid,.settings-screen .avatar-style-grid.outfits-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
      .shelf-hero{grid-template-columns:1fr}.shelf-hero-copy{padding:38px 35px 0}.shelf-hero h1{max-width:670px}
      .hero-visual{min-height:290px}.hero-visual:before{width:360px;height:360px;left:50%;top:4px;transform:translateX(-50%)}
      .hero-book{top:13px;height:250px;width:193px;left:50%;margin-left:-45px}.hero-book-back{left:50%;margin-left:-155px;top:32px}
      .hero-shelf{bottom:18px}.shelf-header{min-height:87px}.reader-topbar .top-pill{display:none}
    }
    @media(max-width:600px){
      .settings-page-shell{width:100%;padding-bottom:28px}
      .settings-site-header{padding:12px 16px 14px}
      .settings-site-header .connection-status{font-size:11px}
      .settings-layout{display:flex;flex-direction:column;gap:0}
      .settings-preview-column{position:sticky;top:0;z-index:30;width:100%;background:#faf3e8}
      .settings-preview-column .avatar-editor{height:166px;min-height:0;flex-direction:row;justify-content:center;gap:14px;border-radius:0 0 24px 24px;padding:8px 16px;box-shadow:0 8px 20px #51487745}
      .settings-preview-column .avatar-stage{height:146px;width:104px;flex:none}
      .settings-preview-column .avatar-stage svg{height:146px;max-width:100%}
      .settings-preview-label{text-align:left;align-items:flex-start;max-width:155px}
      .settings-preview-label strong{font-size:20px;overflow-wrap:anywhere}
      .settings-preview-help{display:none}
      .settings-screen .preferences-form{width:100%;border-radius:0;background:#fffaf4;box-shadow:none;border:0;padding:24px 18px 36px}
      .settings-screen .preferences-heading{flex-wrap:wrap;gap:10px}
      .settings-screen .preferences-heading h2{font-size:30px}
      .settings-screen .avatar-style-grid,.settings-screen .avatar-style-grid.outfits-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
      .settings-screen .avatar-style-grid.bottoms-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
      .settings-screen .preferences-form fieldset{scroll-margin-top:180px}
      .shelf-shell{width:calc(100% - 22px)}.shelf-header{align-items:flex-start;padding:14px 4px;flex-direction:column;gap:12px}
      .shelf-brand strong{font-size:20px}.shelf-brand small{font-size:11px}.shelf-brand img{width:43px;height:43px}
      .shelf-actions{width:100%;justify-content:flex-start;flex-wrap:wrap;gap:8px}.connection-status{font-size:12px;padding:8px 10px}.install-action{font-size:12px;padding:8px 12px}
      .shelf-hero{border-radius:25px}.shelf-hero-copy{padding:32px 24px 0}.shelf-hero h1{font-size:41px}.shelf-hero p{font-size:17px}
      .shelf-section{padding:44px 5px 20px}.section-topline{display:block}.section-topline p{margin-top:12px}
      .book-grid{grid-template-columns:1fr}.book-card-cover{height:245px}.site-footer{display:block;line-height:2}
      .reader-topbar{flex-wrap:wrap}.reader-topbar .brand-copy{flex:1}.back-to-shelf span{display:none}.back-to-shelf{font-size:20px;padding:7px 12px}
      .reader-topbar .customize-action{padding:8px 10px;font-size:12px}
      .hero-avatar{width:106px;height:144px;right:4%;bottom:22px}.hero-avatar svg{height:122px}
      .preferences-content{grid-template-columns:1fr;gap:15px}.avatar-editor{min-height:220px}.avatar-stage{height:188px}.avatar-stage svg{height:190px}
      .gender-fieldset{grid-template-columns:1fr}.gender-fieldset label{padding:9px 12px}.gender-fieldset label span{display:flex;justify-content:space-between;align-items:center;gap:8px;width:100%}
      .gender-fieldset small{margin:0}.avatar-style-grid,.avatar-style-grid.outfits-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.avatar-style-grid.bottoms-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.avatar-color-fields{grid-template-columns:1fr;gap:0}.settings-actions{flex-direction:column-reverse}.settings-actions button{width:100%}
      .profile-backup{padding:17px}.profile-backup-actions{flex-direction:column}.profile-backup-actions button{width:100%}
    }

    /* Progresso, medalhas e companheiros originais da coleção Cute Animal Vectors. */
    .settings-header-actions{display:flex;align-items:center;justify-content:flex-end;gap:12px;flex-wrap:wrap}
    .profile-action{background:#fff7dc;border-color:#f6d68b;color:#7a613c}
    .settings-screen .preferences-fields input[type=date]{width:100%;height:45px;padding:9px 12px;border:2px solid #e7dbe3;background:white;border-radius:13px;font-size:16px;color:#33495f;margin-bottom:15px}
    .pet-unlock-status{background:#fff4db;color:#776345;border-radius:13px;padding:12px 15px;font-size:14px;font-weight:800;line-height:1.45;margin:5px 0 15px}
    .pet-style-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:11px}
    .pet-choice{border:2px solid #eadfe7;background:#fff;border-radius:17px;min-width:0;min-height:138px;padding:10px 5px;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:8px;color:#645875;font-weight:900;font-size:12px;line-height:1.25;cursor:pointer}
    .pet-choice .pet-image{height:87px;width:100%;object-fit:contain;display:block}
    .pet-choice .pet-none{display:grid;place-items:center;font-size:43px}
    .pet-choice.selected{border-color:#9973dd;box-shadow:0 0 0 2px #d4bdf6;background:#f4edff;color:#5f4892}
    .pet-choice.locked{opacity:.53;filter:grayscale(.75);cursor:not-allowed}
    .pet-choice.locked .pet-image{filter:grayscale(1)}
    .pet-choice:focus-visible{outline:3px solid #9675d3;outline-offset:2px}
    .profile-screen{min-height:100dvh;background:radial-gradient(circle at 10% 5%,#f8e1ef,transparent 32%),#faf3e8}
    .profile-main{display:grid;gap:34px}
    .profile-identity{background:#fffaf4;border:2px solid #e9e0e4;border-radius:31px;padding:clamp(22px,4vw,44px);display:grid;grid-template-columns:270px minmax(0,1fr);gap:35px;align-items:center;box-shadow:0 12px 35px #70577f1c}
    .profile-portrait{height:360px;background:linear-gradient(155deg,#cdebf4,#e5dcfa 52%,#ffedcb);display:flex;align-items:center;justify-content:center;border-radius:25px;overflow:hidden}
    .profile-portrait svg{width:auto;height:330px;max-width:100%}
    .profile-identity h1{font-size:clamp(30px,4.4vw,57px);line-height:1.05;letter-spacing:-.05em;margin:8px 0 13px;color:#394f68}
    .profile-info{font-size:15px;font-weight:800;color:#786d86;margin:0 0 22px;line-height:1.5}
    .profile-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:11px}
    .profile-stat{background:#f4f0fc;border-radius:17px;padding:15px 12px;min-height:102px;display:flex;flex-direction:column;gap:5px;justify-content:center}
    .profile-stat strong{font-size:clamp(17px,2.2vw,25px);color:#805fbd;line-height:1.2;overflow-wrap:anywhere}
    .profile-stat span{font-size:12px;line-height:1.3;font-weight:850;color:#837393}
    .profile-unlock-hint{font-size:14px;font-weight:850;color:#806c51;line-height:1.5;margin:17px 0 0}
    .profile-reading{padding:0 6px}
    .profile-reading h2{font-size:clamp(27px,3.1vw,43px);line-height:1.2;color:#45506c;letter-spacing:-.045em;margin:5px 0 9px}
    .profile-reading-intro{color:#7c7485;font-size:15px;line-height:1.5;margin:0 0 20px;max-width:800px}
    .profile-books-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:19px}
    .profile-book-card{display:grid;grid-template-columns:145px minmax(0,1fr);gap:18px;align-items:center;background:white;border:2px solid #ede5e8;border-radius:23px;padding:18px;text-decoration:none;color:inherit;box-shadow:0 8px 20px #8a76831c;min-width:0}
    .profile-book-card:hover{transform:translateY(-3px);box-shadow:0 12px 26px #8a76832c}
    .profile-book-cover{width:100%;height:185px;border-radius:15px;object-fit:contain;background:#f5eaf3}
    .profile-book-details{min-width:0}
    .profile-book-details h3{font-size:21px;line-height:1.2;letter-spacing:-.025em;margin:0 0 6px;color:#48536e}
    .profile-book-status{color:#7d788e;font-size:12px;font-weight:850;margin:0 0 10px}
    .profile-medal{display:inline-block;background:#efedf1;color:#898494;border-radius:20px;padding:7px 11px;font-size:12px;font-weight:900;margin-bottom:18px}
    .profile-medal.earned{background:#fff0c7;color:#906a20}
    .profile-progress-heading{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:12px;color:#8d8795;margin-bottom:7px}
    .profile-progress-heading strong{font-size:17px;color:#735ca4}
    .profile-progress-track{height:11px;border-radius:30px;background:#f0eaf7;overflow:hidden}
    .profile-progress-track>span{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#ba8bee,#f079a9);transition:width .3s}
    .profile-continue{display:inline-block;color:#8c5fbd;font-size:13px;font-weight:1000;margin-top:14px}
    .profile-empty{grid-column:1/-1;background:white;padding:35px 28px;border:2px dashed #d7c4e5;border-radius:23px;text-align:center}
    .profile-empty strong{font-size:21px;color:#645a81}.profile-empty p{color:#857b8e}.profile-empty a{display:inline-block;background:#d870ad;color:white;border-radius:15px;padding:12px 20px;text-decoration:none;font-weight:950}
    @media(max-width:1080px){.profile-books-grid{grid-template-columns:1fr}}
    @media(max-width:850px){.pet-style-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.profile-identity{grid-template-columns:200px minmax(0,1fr);gap:18px}.profile-portrait{height:300px}.profile-portrait svg{height:280px}}
    @media(max-width:600px){
      .settings-header-actions{gap:7px;padding-right:8px}.settings-header-actions .customize-action{font-size:11px;padding:8px}
      .pet-style-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.pet-choice{min-height:119px;padding:8px 4px}.pet-choice .pet-image{height:69px}
      .profile-main{gap:23px}.profile-identity{grid-template-columns:1fr;margin:0 12px;border-radius:23px;padding:20px;gap:15px}
      .profile-portrait{height:240px}.profile-portrait svg{height:225px}.profile-stats{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}.profile-stat{padding:12px 8px;min-height:95px}.profile-stat strong{font-size:17px}.profile-stat span{font-size:11px}
      .profile-reading{padding:0 14px}.profile-book-card{grid-template-columns:106px minmax(0,1fr);padding:12px;gap:12px}.profile-book-cover{height:158px}.profile-book-details h3{font-size:17px}.profile-medal{font-size:10px;padding:6px 8px;margin-bottom:10px}
      .profile-screen .settings-privacy{margin:0 14px 20px}
    }

    /* Leitor sem cabeçalho: livro livre, progresso acima e comandos sempre à mão. */
    .reader-screen{overflow-x:hidden}
    .reader-shell{width:min(1250px,calc(100% - 34px));padding:24px 0 136px}
    .reader-shell .progress{margin:0 4px 15px}
    .reader-shell .book{display:block;width:100%;min-height:0;border:0;border-radius:0;overflow:visible;
      box-shadow:none;background:transparent;position:relative;touch-action:pan-y}
    .reader-shell .book:after{display:none}
    .reader-shell .flip-page{background:#fffaf4;overflow:hidden;border:1px solid #ebdfd4;
      box-shadow:inset 0 0 11px #74604e12;display:flex;flex-direction:column;min-width:0}
    .reader-shell .flip-illustration{background:#e0f0f4}
    .reader-shell .flip-page .art-panel{width:100%;height:100%;min-height:0;max-height:none;
      display:flex;align-items:center;justify-content:center;background:#e0f0f4;padding:10px;overflow:hidden}
    .reader-shell .flip-page .art-panel img{width:100%;height:100%;display:block;min-height:0;
      max-width:100%;max-height:100%;object-fit:contain;object-position:center;aspect-ratio:auto}
    .reader-shell .flip-page .art-sticker{top:15px;left:15px;max-width:calc(100% - 30px);
      font-size:11px;padding:8px 12px;white-space:normal}
    .reader-shell .flip-page .read-panel{height:100%;width:100%;min-height:0;
      display:flex;justify-content:flex-start;overflow-y:auto;overscroll-behavior:contain;
      -webkit-overflow-scrolling:touch;padding:clamp(25px,3vw,48px) clamp(22px,3.3vw,50px) 44px}
    .reader-shell .flip-page .page-title{font-size:clamp(28px,3vw,44px);margin-bottom:20px}
    .reader-shell .flip-page .cover .page-title{font-size:clamp(37px,4.5vw,61px)}
    .reader-shell .flip-page .story{font-size:clamp(18px,1.8vw,24px);line-height:1.52}
    .reader-shell .flip-page .page-number{position:static;align-self:flex-end;margin-top:auto;
      padding-top:18px;font-size:12px}
    .reader-shell .flip-page .hint{margin-top:16px}
    .reader-shell .flip-page .challenge-row{margin:10px 0;align-items:center;min-width:0}
    .reader-shell .flip-page .challenge-check{width:45px;height:45px}
    .reader-shell .flip-page .challenge-say{font-size:clamp(15px,1.6vw,19px);min-width:0;overflow-wrap:anywhere}
    /* StPageFlip com autoSize:false exige altura explícita no wrapper interno.
       Sem ela, a biblioteca calcula top:-height/2 e corta a metade superior. */
    .reader-shell .book .stf__wrapper{position:relative;width:100%;height:100%;filter:drop-shadow(0 15px 23px #584d5940)}
    .reader-shell .dots{max-width:95%;margin-top:22px}
    .reader-shell .bottom-note{max-width:740px;margin:12px auto 0;line-height:1.5;padding:0 10px}
    .reader-shell .controls{position:fixed;z-index:60;left:50%;bottom:0;transform:translateX(-50%);
      width:min(860px,100%);margin:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;
      padding:13px 17px calc(14px + env(safe-area-inset-bottom));background:#fffdf8ed;
      box-shadow:0 -10px 42px #543d4e2b;border:1px solid #eddfd2;border-bottom:0;border-radius:25px 25px 0 0;
      backdrop-filter:blur(14px)}
    .reader-shell .nav-button{display:flex;min-width:0;min-height:53px;margin:0;
      border-radius:15px;padding:10px 12px;font-size:15px;white-space:nowrap;
      text-decoration:none;text-align:center;box-shadow:none}
    .reader-shell .shelf-nav{background:#fff0d6;border:2px solid #f2ddb9;color:#86653d}
    .reader-shell .listen{background:#ebe4ff;color:#6950b7}
    .reader-shell .prev{background:#fff;border:2px solid #eadccc;color:#586d80}
    .reader-shell .next{background:#f96b91;color:#fff;font-weight:1000;box-shadow:0 4px 0 #da4774}
    .reader-shell .next:disabled{box-shadow:none}
    .reader-shell .toast{bottom:110px}
    .reader-screen .toast{bottom:110px}
    .book-card-cover img{object-fit:contain}

    /* As duas áreas do perfil compartilham a mesma rota e navegação por abas. */
    .profile-tabs{display:flex;gap:10px;background:#fffaf4;padding:9px;border:2px solid #eaddeb;
      border-radius:19px;width:fit-content;max-width:100%;margin:0 0 27px;position:sticky;top:8px;z-index:35;
      box-shadow:0 5px 18px #725b7520}
    .profile-tab{display:flex;align-items:center;justify-content:center;flex:1;min-width:150px;
      padding:13px 20px;border-radius:12px;text-decoration:none;color:#766c87;font-size:15px;font-weight:1000}
    .profile-tab.active{background:#a079d9;color:white;box-shadow:0 4px 10px #916ab44a}
    .profile-editor-pane{min-height:0;background:none}
    .profile-screen .settings-preview-column{top:100px}
    .profile-screen .settings-page-shell{max-width:1360px}
    .profile-screen .settings-preview-column .avatar-editor{max-height:min(510px,calc(100vh - 120px))}
    .profile-screen .settings-preview-column .avatar-stage{max-height:calc(100vh - 220px)}
    .profile-screen .settings-preview-column .avatar-stage svg{max-height:100%}
    @media(max-width:820px){
      .reader-shell{width:calc(100% - 20px);padding:15px 0 133px}
      .reader-shell .flip-page .read-panel{padding:27px 25px 37px}
      .reader-shell .flip-combined .art-panel{flex:0 0 32%;height:32%;min-height:0;max-height:none;padding:8px}
      .reader-shell .flip-combined .read-panel{height:68%;flex:1;min-height:0;
        padding:24px 24px 31px;overflow-y:auto}
      .reader-shell .flip-combined .page-title{font-size:clamp(29px,6vw,39px);margin-bottom:15px}
      .reader-shell .flip-combined .cover .page-title{font-size:clamp(34px,8vw,47px)}
      .reader-shell .flip-combined .story{font-size:clamp(17px,4vw,21px);line-height:1.48}
      .reader-shell .flip-combined .story p{margin-bottom:12px}
      .reader-shell .flip-combined .sound-row{margin-top:16px}
      .reader-shell .flip-combined .art-sticker{font-size:10px;padding:6px 9px;top:10px;left:10px}
      .reader-shell .controls{gap:8px;padding:11px 10px calc(13px + env(safe-area-inset-bottom))}
      .reader-shell .nav-button{padding:9px 8px;font-size:13px;min-height:50px;gap:5px}
      .profile-tabs{top:0;width:calc(100% - 20px);margin:0 auto 16px;gap:5px;padding:6px}
      .profile-tab{min-width:0;padding:11px 7px;font-size:13px}
    }
    @media(max-width:600px){
      .profile-screen .settings-preview-column{top:57px}
      .profile-screen .settings-preview-column .avatar-editor{max-height:none}
      .profile-screen .settings-preview-column .avatar-stage{max-height:none}
      .profile-screen .settings-preview-column .avatar-stage svg{max-height:100%}
      .profile-screen .settings-page-shell{width:100%}
      .profile-screen .settings-site-header{padding:14px 13px}
      .profile-screen .profile-main{padding:0 3px}
      .profile-screen .profile-reading{padding:0 11px}
      .profile-screen .profile-book-card{grid-template-columns:90px minmax(0,1fr);gap:10px}
      .profile-screen .profile-book-cover{height:139px}
      .profile-screen .profile-identity{margin:0 8px}
      .profile-screen .settings-screen .preferences-form{border-radius:0}
      .profile-screen .settings-screen .avatar-style-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
      .profile-screen .profile-tabs{width:calc(100% - 22px)}
    }
    @media(max-width:370px){
      .reader-shell .nav-button{font-size:12px;padding:8px 4px}
      .reader-shell .shelf-nav span:last-child{display:none}
      .reader-shell .nav-button .listen-text{font-size:12px}
      .reader-shell .flip-combined .read-panel{padding:19px 17px 25px}
      .reader-shell .flip-combined .story{font-size:17px}
      .reader-shell .flip-combined .page-title{font-size:29px}
      .reader-shell .progress-label{min-width:0;font-size:11px}
      .profile-screen .profile-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
      .profile-screen .profile-book-card{grid-template-columns:1fr}
      .profile-screen .profile-book-cover{height:160px}
      .profile-screen .pet-style-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
    }

/* NameToColor: uma paleta por sentimento para toda a aplicação. */
html[data-color-theme] body{background:radial-gradient(circle at 15% 6%,var(--theme-soft),transparent 40%),var(--theme-page)}
html[data-color-theme] button:focus-visible{outline-color:var(--theme-accent)}
html[data-color-theme] .shelf-hero{background:var(--theme-hero)}
html[data-color-theme] .shelf-hero h1,html[data-color-theme] .shelf-brand,html[data-color-theme] .page-title{color:var(--theme-text)}
html[data-color-theme] .brand-mark,html[data-color-theme] .hero-button,html[data-color-theme] .reader-shell .next,
html[data-color-theme] .settings-save{background:var(--theme-accent);box-shadow:none;color:#fff}
html[data-color-theme] .hero-kicker,html[data-color-theme] .section-kicker,html[data-color-theme] .chapter,
html[data-color-theme] .card-open,html[data-color-theme] .word{color:var(--theme-accent)}
html[data-color-theme] .hero-book-back{background:var(--theme-hero)}
html[data-color-theme] .profile-tab.active{background:var(--theme-accent);color:#fff}
html[data-color-theme] .book-card,html[data-color-theme] .settings-screen .preferences-form,
html[data-color-theme] .profile-identity,html[data-color-theme] .profile-book-card{background:var(--theme-card);border-color:var(--outline)}
html[data-color-theme] .shelf-footnote,html[data-color-theme] .profile-stats,
html[data-color-theme] .profile-stat,html[data-color-theme] .settings-privacy{background:var(--theme-soft)}
html[data-color-theme] .settings-screen,html[data-color-theme] .settings-preview-column{background:var(--theme-page)}
html[data-color-theme] .reader-shell .flip-page .read-panel{background:var(--theme-card)}
html[data-color-theme] .reader-shell .controls{background:var(--theme-card)}
html[data-color-theme] .reader-shell .dots [aria-current="page"],html[data-color-theme] .progress-bar{background:var(--theme-accent)}
html[data-color-theme] .customize-action,html[data-color-theme] .install-action,
html[data-color-theme] .profile-tabs{border-color:var(--outline);background:var(--theme-card)}

/* Editor: paletas de tema da biblioteca NameToColor. */
.mood-theme-maker{background:#fff4e7;border:2px solid #f0dfbf;border-radius:22px;padding:22px;margin:22px 0;min-width:0}
.mood-theme-maker h3{margin:0 0 8px;font-size:24px;line-height:1.2;color:var(--ink)}
.mood-theme-maker p{font-size:14px;font-weight:750;line-height:1.5;margin:0 0 15px;color:var(--muted)}
.mood-theme-maker label{font-size:14px;font-weight:950;color:var(--ink);display:block;margin-bottom:8px}
.mood-theme-maker select{width:100%;min-width:0;height:48px;border-radius:14px;border:2px solid #dfd2eb;background:white;padding:10px 13px;font:inherit;color:var(--ink)}
.mood-theme-maker button{min-height:45px;border-radius:13px;border:0;background:var(--violet);color:white;padding:10px 15px;font-size:14px;font-weight:1000}
.theme-mood-swatches{display:flex;align-items:center;gap:9px;min-height:75px;margin:12px 0;overflow:hidden}
.theme-mood-swatches span{flex:1;min-width:0;height:68px;border-radius:13px;border:3px solid white;box-shadow:0 0 0 1px #e5d8c9}
.mood-theme-maker #applyThemeAvatar{background:var(--pink);width:100%;margin:3px 0 10px}
.mood-theme-maker .theme-avatar-hint{font-size:12px;margin:0;color:#6b687b}

/* Laboratório que vive dentro de uma página física do livrinho. */
.color-explorer{font-size:14px;line-height:1.4;background:#fff;border:2px solid #eadcf6;border-radius:20px;padding:16px;margin:14px 0;min-width:0;color:#384660}
.color-explorer button,.color-explorer input,.color-explorer select{font:inherit}
.color-explorer-top{display:flex;align-items:center;gap:14px;min-width:0;margin-bottom:15px}
.color-explorer-preview{width:90px;height:90px;border:5px solid white;box-shadow:0 0 0 2px #e1d3e9;border-radius:27px;background:#f44e9a;color:#fff;display:grid;place-items:center;font-size:36px;flex:none;text-shadow:0 2px 5px #0004}
.color-explorer-description{display:flex;flex-direction:column;align-items:flex-start;gap:3px;min-width:0}
.color-mini-label{font-size:11px;font-weight:1000;letter-spacing:.1em;color:#9374ae}
.color-explorer-description strong{font-size:27px;line-height:1.1;overflow-wrap:anywhere}
.color-explorer-meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-size:12px;font-weight:900;color:#727c92}
.color-explorer-temp{color:#8a7aa9}
.color-explorer-description [data-color-hex]{font-size:12px;font-weight:900;color:#727c92}
.color-explorer-description button{border:0;background:#7354b0;color:#fff;border-radius:12px;padding:7px 12px;font-size:13px;font-weight:950;margin-top:5px}
.color-explorer-pickers{display:grid;grid-template-columns:1fr;gap:9px}
.color-explorer-pickers label{display:flex;flex-direction:column;gap:5px;font-size:12px;font-weight:1000;color:#596478}
.color-explorer-pickers input{width:100%;height:42px;border:2px solid #ddd1eb;border-radius:12px;background:white;color:#33465c;padding:5px 11px;min-width:0;font-size:15px}
.color-explorer-pickers input[type=color]{padding:2px 8px;cursor:pointer}
.color-ready{margin:13px 0 4px;font-size:12px;font-weight:900;display:flex;flex-direction:column;gap:8px}
.color-ready>span{font-size:12px;font-weight:1000;color:#596478}
.color-quick-row{display:flex;flex-wrap:wrap;align-items:center;gap:10px;min-width:0}
.color-random-btn{border:0;background:#f3ecfa;color:#5f3f9c;border-radius:999px;padding:7px 12px;font-size:13px;font-weight:950;box-shadow:0 0 0 1px #e4d7ee;cursor:pointer}
.color-quick{display:flex;flex-wrap:wrap;gap:7px;flex:1;min-width:0;margin:0}
.color-quick-dot{width:29px;height:29px;border:3px solid white;border-radius:50%;box-shadow:0 0 0 1px #ddd3df;padding:0;cursor:pointer}
.color-quick-dot[aria-pressed=true]{box-shadow:0 0 0 3px #8760c3}
.color-feedback{font-size:12px!important;color:#675d87;font-weight:800;margin:6px 0 15px!important}
.color-harmonies-heading{display:flex;flex-direction:column;gap:9px;padding:10px 0 8px;border-top:2px dashed #e2d5ef}
.color-harmonies-heading strong{font-size:16px}
.color-harmonies-heading label{font-size:12px;font-weight:900;display:flex;align-items:center;justify-content:space-between;gap:8px}
.color-harmonies-heading select{min-width:0;max-width:58%;border-radius:11px;border:2px solid #e5d5e8;background:white;padding:7px;color:#45516c}
.color-harmonies{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;margin-top:10px}
.color-harmony-card{background:#f8f3fc;border-radius:14px;padding:11px;min-width:0}
.color-harmony-card h3{font-size:14px!important;margin:0 0 5px!important;letter-spacing:normal}
.color-harmony-card p{font-size:12px!important;line-height:1.4!important;margin:0 0 9px!important;color:#69718a!important}
.color-harmony-swatches{display:flex;gap:3px}
.color-harmony-swatches button{flex:1;height:31px;min-width:0;border:2px solid white;border-radius:7px;padding:0;box-shadow:0 0 0 1px #d7cbd9}
.color-harmony-hint{font-size:12px!important;font-weight:800!important;color:#655d82!important;margin:12px 0 0!important}
.reader-shell .flip-page .challenge-color-dot{width:20px;height:40px;flex:none;border-radius:9px;border:3px solid white;box-shadow:0 0 0 1px #ddd3e0}
.reader-shell .flip-page .challenge-row:has(.challenge-color-dot){gap:7px}
@media(max-width:820px){.color-explorer{padding:13px;margin:12px 0}.color-harmonies{grid-template-columns:1fr}.color-harmony-card{padding:12px}.color-harmony-swatches button{height:35px}}
@media(max-width:480px){
  .mood-theme-maker{padding:15px;border-radius:17px}
  .custom-color-row{grid-template-columns:1fr;gap:8px}
  .color-word-input{font-size:16px}
  .theme-mood-swatches span{height:53px;border-radius:10px}
  .color-explorer-top{gap:10px}.color-explorer-preview{width:67px;height:67px;border-radius:20px}
  .color-explorer-description strong{font-size:22px}
  .color-explorer-pickers input{font-size:16px}
  .reader-shell .flip-page .challenge-color-dot{width:14px;height:37px}
}

/* Histórico de escolhas: permanece ao lado do personagem durante a rolagem. */
.editor-history-tools{margin:13px 5px 0;display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap}
.editor-history-tools button{min-height:42px;padding:8px 14px;border:2px solid #b4a2db;border-radius:13px;background:#fff;color:#694c96;font-size:14px;font-weight:950;cursor:pointer}
.editor-history-tools button:disabled{opacity:.47;cursor:default}
.editor-history-tools span{color:#477d66;font-size:12px;font-weight:900}
.settings-actions .settings-reset{border-color:#e8aab6;background:#fff7f7;color:#a34559;text-align:center}
@media(max-width:600px){
  .editor-history-tools{margin:0;padding:6px 10px;justify-content:space-between;gap:5px}
  .editor-history-tools button{min-height:34px;padding:5px 12px;font-size:12px}
  .editor-history-tools span{font-size:11px}
}

/* Landing page */
.landing-page{background:radial-gradient(circle at 12% 0%,#f7e4ef 0,transparent 38%),#faf3e8}
.landing-hero{display:grid;grid-template-columns:1.15fr .85fr;gap:40px;align-items:center;padding:clamp(30px,6vw,70px) 0;min-height:520px}
.landing-hero-copy h1{font-size:clamp(38px,5.2vw,72px);line-height:1.05;letter-spacing:-.065em;color:#3d4268;margin:17px 0 20px;font-weight:1000;max-width:680px}
.hero-highlight{color:#f76e96}
.landing-hero-copy p{max-width:580px;font-size:19px;line-height:1.6;color:#66728a;font-weight:700;margin:0 0 28px}
.landing-ctas{display:flex;flex-wrap:wrap;gap:14px;align-items:center;margin-bottom:26px}
.landing-secondary{display:inline-flex;align-items:center;justify-content:center;min-height:57px;padding:13px 22px;border-radius:17px;text-decoration:none;font-weight:1000;color:#7454bd;background:#f3eeff;border:2px solid #d9ccff}
.landing-bullets{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 18px;list-style:none;padding:0;margin:0;max-width:580px}
.landing-bullets li{font-size:15px;font-weight:800;color:#5f6b7d;background:#fffaf3;border:1px solid #e9e0d6;border-radius:12px;padding:10px 14px}
.landing-hero-visual{position:relative;min-height:420px;display:flex;align-items:center;justify-content:center}
.landing-book-stack{position:relative;width:280px;height:360px}
.landing-book{position:absolute;width:220px;height:300px;border-radius:10px 40px 40px 10px;border:6px solid #fff7ee;box-shadow:16px 20px 40px #73587438}
.landing-book-1{top:30px;left:40px;background:linear-gradient(135deg,#f96b91,#ffb3d1);transform:rotate(8deg)}
.landing-book-2{top:15px;left:20px;background:linear-gradient(135deg,#8b79dd,#b8a9ff);transform:rotate(-2deg)}
.landing-book-3{top:0;left:0;background:linear-gradient(135deg,#4c9fbe,#7bc5e0);transform:rotate(-12deg)}
.landing-sparkles{position:absolute;top:10px;right:40px;font-size:36px;color:#f0a6c6;letter-spacing:8px}

.landing-section{padding:clamp(40px,7vw,80px) 0}
.benefits-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.benefit-card{background:#fffaf4;border:2px solid #efe4da;border-radius:24px;padding:26px;box-shadow:0 12px 30px #7a6a7c16}
.benefit-icon{font-size:36px;margin-bottom:12px}
.benefit-card h3{font-size:24px;letter-spacing:-.04em;margin:0 0 10px;color:#3d4268}
.benefit-card p{margin:0;color:#66728a;font-weight:700;line-height:1.6}

.stories-preview{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.story-preview-card{background:#fffaf4;border:2px solid #efe4da;border-left:6px solid var(--story-color,#f96b91);border-radius:22px;overflow:hidden;box-shadow:0 10px 26px #7a6a7c12}
.story-preview-cover{height:180px;background:var(--story-color,#f96b91);border-radius:10px 40px 40px 10px;overflow:hidden}
.story-preview-cover img{width:100%;height:100%;object-fit:cover;display:block}
.story-preview-card h3{font-size:18px;margin:14px 16px 6px;letter-spacing:-.03em;color:#3d4268}
.story-preview-card p{margin:0 16px 16px;color:#7f788a;font-weight:700;font-size:14px}
.landing-center{display:flex;justify-content:center;margin-top:28px}

.donation-card{display:grid;grid-template-columns:1.2fr .8fr;gap:30px;background:linear-gradient(135deg,#fff2f8 0%,#f7f3ff 100%);border:2px solid #f0e0ea;border-radius:32px;padding:clamp(28px,5vw,56px);align-items:center;box-shadow:0 16px 40px #7a6a7c18}
.donation-copy h2{font-size:clamp(28px,4vw,48px);letter-spacing:-.05em;margin:10px 0 16px;color:#3d4268}
.donation-copy p{font-size:18px;line-height:1.6;color:#66728a;font-weight:700;margin:0 0 22px}
.donation-key{background:#fff;border:2px solid #e9deec;border-radius:18px;padding:18px 22px;display:flex;flex-direction:column;gap:8px;max-width:320px}
.donation-key textarea{width:100%;max-width:100%;min-height:90px;resize:vertical;border-radius:12px;border:2px solid #e9deec;
  padding:12px;overflow-wrap:anywhere;word-break:break-all;color:#583f79;font-size:13px;font-weight:750;background:#fffdfb}
.donation-key button{cursor:pointer;min-height:44px;padding:10px 14px;border-radius:12px;border:0;background:#9366ce;color:#fff;font-weight:900}
.donation-key button:hover,.donation-key button:focus-visible{background:#7e52bb}
.donation-key span{color:#547c62;font-weight:800;font-size:13px}
.pix-qr img{width:min(280px,76vw);height:auto;image-rendering:pixelated;}
.donation-note{font-size:14px!important;color:#8a7788!important;margin-top:14px!important}
.donation-qr{display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center}
.pix-qr{background:#fff;padding:16px;border-radius:20px;border:2px solid #efe4da;box-shadow:0 10px 30px #7a6a7c16}
.pix-qr img{display:block}

.faq-list{display:flex;flex-direction:column;gap:14px;max-width:900px}
.faq-item{background:#fffaf4;border:2px solid #efe4da;border-radius:18px;padding:0;overflow:hidden}
.faq-item summary{padding:18px 24px;font-size:18px;font-weight:1000;color:#3d4268;cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:'+';font-size:24px;color:#f76e96}
.faq-item[open] summary::after{content:'−'}
.faq-item p{padding:0 24px 20px;margin:0;color:#66728a;font-weight:700;line-height:1.6}

.landing-cta-section{padding-bottom:60px}
.landing-cta-box{background:linear-gradient(135deg,#f8e7f1 0%,#e8dffc 100%);border-radius:32px;padding:clamp(32px,6vw,64px);text-align:center;box-shadow:0 16px 40px #7a6a7c18}
.landing-cta-box h2{font-size:clamp(30px,4.5vw,56px);letter-spacing:-.05em;margin:0 0 12px;color:#3d4268}
.landing-cta-box p{font-size:19px;color:#66728a;font-weight:700;margin:0 0 28px}

.visually-hidden{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}

/* Bookshelf new layout */
.shelf-controls{display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:space-between;margin-bottom:28px}
.shelf-search{flex:1;min-width:260px}
.shelf-search-input{width:100%;height:52px;padding:12px 18px;border:2px solid #e7dbe3;background:#fff;border-radius:16px;font-size:16px;font-weight:700;color:#33495f}
.shelf-search-input:focus{outline:3px solid #f3d6e3;border-color:#f76e96}
.shelf-sort{display:flex;align-items:center;gap:10px}
.shelf-select{height:52px;padding:10px 16px;border:2px solid #e7dbe3;background:#fff;border-radius:16px;font-size:15px;font-weight:800;color:#4f556f}
.shelf-filter-label{display:flex;flex-direction:column;gap:4px;font-size:12px;font-weight:900;color:#645d78}
.shelf-filter-label .shelf-select{height:43px;padding:7px 10px;max-width:230px}
.shelf-sort-dir{width:52px;height:52px;border:2px solid #e7dbe3;background:#fff;border-radius:16px;font-size:20px;cursor:pointer}

/* Prateleira: cada item é um link com a capa em pé sobre o ripão da
   prateleira e, abaixo, um balão em nuvem com o título personalizado. */
.bookshelf{
  display:flex;
  flex-direction:column;
  gap:26px;
  background:linear-gradient(180deg,#d4b896 0%,#c4a484 100%);
  border-radius:24px;
  padding:clamp(20px,4vw,32px);
  box-shadow:inset 0 8px 20px #8b735520, 0 16px 40px #7a6a7c18;
  border:6px solid #b89470
}
.book-spine{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
  width:100%;
  background:linear-gradient(90deg,#fffaf3 0%,#fff 100%);
  border:2px solid #efe4da;
  border-radius:16px;
  padding:12px;
  text-decoration:none;
  color:inherit;
  box-shadow:0 10px 24px #6b5a6b20;
  transition:transform .2s,box-shadow .2s
}
.book-spine:hover{transform:translateY(-4px);box-shadow:0 14px 30px #6b5a6b28}
.book-spine:focus-visible{outline:4px solid #795bd2;outline-offset:3px;z-index:1}
.book-stand{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  width:100%
}
.book-cover-img{
  width:70px;
  height:95px;
  border-radius:4px 8px 8px 4px;
  box-shadow:4px 6px 14px #4a3a4a40;
  border:3px solid #fff7ee;
  background:var(--book-color,#f96b91);
  object-fit:cover;
  display:block
}
.book-spine-label{
  position:absolute;
  right:6px;
  top:6px;
  background:#fffaf3;
  color:#aa4f80;
  border-radius:100px;
  padding:4px 8px;
  font-size:9px;
  font-weight:1000;
  z-index:2
}

/* Nuvem do balão da prateleira (arte fornecida): contorno em tinta
   #3d4268 e miolo creme #fffaf3, aplicada como fundo do balão. */
:root{
  --cloud-bubble:url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 741.83 542.75"%3E%3Cpath d="M346.271 0.04C296.945 0.058 249.824 31.984 230.581 77.102C198.089 53.675 152.587 55.259 118.121 73.597C84.513 90.096 55.915 121.789 52.116 160.227C51.338 170.44 53.303 180.62 55.866 190.446C15.031 211.166 -9.825 261.915 3.715 306.686C10.047 327.104 25.039 344.27 43.616 354.384C28.039 379.942 18.051 412.435 28.503 441.818C39.943 471.309 72.769 487.657 103.428 486.321C120.2 486.253 136.765 482.431 152.49 476.79C186.686 528.933 256.42 554.954 316.41 537.172C340.035 529.469 361.291 514.278 375.583 493.946C422.218 525.678 486.323 525.096 535.493 499.321C569.163 481.072 595.303 445.882 596.731 406.791C595.437 402.417 600.727 405.278 602.961 404.102C664.592 397.306 714.951 338.689 712.461 276.632C712.844 271.023 709.344 263.32 715.555 260.07C743.501 234.955 750.042 189.631 730.899 157.38C713.715 124.983 678.472 103.418 641.961 101.88C639.321 55.854 603.051 15.83 558.911 4.747C515.051 -7.533 464.321 4.98 433.031 38.2C412.131 12.866 378.951 -0.876 346.281 0.043L346.271 0.04Z" fill="%233d4268"/%3E%3Cpath transform="matrix(1 0 0 1 12.001 12.02)" d="M336.689 0.002C289.417 -0.216 239.671 29.415 224.219 86.19C157.481 13.369 17.239 104.937 59.939 184.44C-11.028 211.678 -24.425 310.95 49.377 336.91C-17.754 434.633 60.673 488.31 145.44 449.57C181.203 520.822 310.01 554.7 360.28 464.132C424.992 523.596 577.11 494.012 573.16 380.538C636.264 384.722 700.12 322.979 686.63 246.098C753.83 198.178 704.06 96.388 617.78 102.278C623.05 4.571 486.85 -40.272 419.94 45.719C401.96 15.094 369.95 0.153 336.69 0L336.689 0.002Z" fill="%23fffaf3"/%3E%3C/svg%3E')
}

/* Balão em nuvem: a arte da nuvem é o próprio fundo do elemento (data URI
   com contorno #3d4268 e miolo #fffaf3). O balão sobe sobre a base da capa,
   como se o livro estivesse saindo de dentro da nuvem. */
.book-bubble{
  position:relative;
  z-index:3;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  width:205px;
  max-width:100%;
  aspect-ratio:741.83/542.75;
  margin-top:-32px;
  padding:20px 34px 18px;
  background:var(--cloud-bubble) center/100% 100% no-repeat;
  border:0;
  border-radius:0;
  box-shadow:none;
  filter:drop-shadow(0 6px 12px #5a4a5a30);
  color:#3d4268;
  font-weight:900;
  font-size:14px;
  line-height:1.25;
  text-align:center
}
.book-bubble-copy{position:relative;z-index:1;width:100%}
.book-bubble-title{
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:3;
  overflow:hidden;
  margin:0 0 4px;
  font-size:inherit
}
.book-bubble-subtitle{
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:3;
  overflow:hidden;
  font-size:10px;
  font-weight:700;
  color:#a63a63;
  line-height:1.3
}
.book-bubble-meta{display:block;color:#625c80;font-size:9px;line-height:1.3;font-weight:900;margin-top:4px}
.profile-book-subject{font-size:12px;font-weight:900;color:#8c679a;margin:3px 0 8px}
.book-bibliography{font-size:13px;line-height:1.45;border:2px dashed #c9d9e6;border-radius:14px;padding:12px;margin:12px 0;overflow-wrap:anywhere}
.book-bibliography h2{font-size:17px;margin:0 0 8px;color:#486d82}
.book-bibliography p{margin:8px 0;display:flex;flex-direction:column;gap:3px}
.reference-address{color:#647b88;user-select:text;font-size:11px;overflow-wrap:anywhere}
.book-prizes{background:#e4f7e5;border:2px dashed #90cfa2;color:#316d4a;padding:12px;border-radius:14px;font-weight:900;font-size:16px;margin-top:12px}
.music-keyboard{background:#f3ecff;border:2px solid #c6adee;border-radius:16px;padding:12px;color:#54446c;font-size:13px;margin:12px 0}
.music-keyboard p{margin:0 0 10px;font-size:13px}
.music-keys{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:3px}
.music-key{display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:8px;min-width:0;min-height:90px;padding:9px 1px;background:#fff;border:2px solid #ae96d6;border-radius:5px 5px 10px 10px;color:#554c81;cursor:pointer;box-shadow:0 4px 0 #b7a4d1}
.music-key:nth-child(even){background:#fcefff}.music-key strong{font-size:clamp(10px,1.3vw,16px)}.music-key span{font-weight:900;font-size:14px}
.music-key:focus-visible{outline:3px solid #7762ad;outline-offset:2px}.music-key:active,.music-key.playing{background:#dec8ff;transform:translateY(3px);box-shadow:0 1px 0 #b7a4d1}
.music-status{font-weight:900;color:#684c9b;margin:10px 0 0!important}
@media(max-width:700px){.shelf-filter-label .shelf-select{max-width:none;width:100%}.music-keys{grid-template-columns:repeat(4,minmax(0,1fr))}.music-key{min-height:72px}.music-key strong{font-size:11px}.music-key span{font-size:12px}}

@media(max-width:1000px){
  .landing-hero{grid-template-columns:1fr;gap:30px}
  .landing-hero-visual{min-height:320px}
  .benefits-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stories-preview{grid-template-columns:repeat(2,minmax(0,1fr))}
  .donation-card{grid-template-columns:1fr}
}
@media(max-width:700px){
  .landing-bullets{grid-template-columns:1fr}
  .benefits-grid{grid-template-columns:1fr}
  .stories-preview{grid-template-columns:1fr}
  .shelf-controls{flex-direction:column;align-items:stretch}
  .shelf-sort{width:100%}
  .shelf-select{flex:1}
}

/* Prateleira em ripas: colunas a partir de 600px. A capa fica em pé sobre
   a ripa e o balão de nuvem sobe por cima da base do livro, pendurado no
   vão entre as fileiras. */
@media(min-width:600px){
  /* A ripa de cada fileira fica no pé da linha da grade, então a tábua
     acompanha cada fileira mesmo com fileiras múltiplas. O período do
     fundo é linha + vão, para as ripas não saírem de sincronia. */
  .bookshelf{
    --shelf-row:205px;
    --shelf-gap:100px;
    --shelf-plank-lip:#c4a484;
    --shelf-plank-edge:#b89470;
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    grid-auto-rows:var(--shelf-row);
    gap:var(--shelf-gap) 40px;
    background-image:linear-gradient(
      to bottom,
      transparent 0 calc(var(--shelf-row) - 14px),
      var(--shelf-plank-lip) calc(var(--shelf-row) - 14px) calc(var(--shelf-row) - 4px),
      var(--shelf-plank-edge) calc(var(--shelf-row) - 4px) var(--shelf-row),
      transparent var(--shelf-row) calc(var(--shelf-row) + var(--shelf-gap))
    );
    background-size:100% calc(var(--shelf-row) + var(--shelf-gap));
    background-origin:content-box;
    border-radius:20px;
    padding:clamp(20px,3vw,32px);
    box-shadow:inset 0 4px 12px #8b735520, 0 12px 32px #7a6a7c18;
    border:4px solid #a0825c
  }
  .book-spine{
    position:relative;
    height:100%;
    background:transparent;
    border:0;
    box-shadow:none;
    padding:0;
    margin:0
  }
  .book-stand{
    position:absolute;
    bottom:12px;
    left:50%;
    transform:translateX(-50%);
    display:flex;
    flex-direction:column;
    align-items:center;
    z-index:2
  }
  .book-cover-img{width:85px;height:115px}
  .book-bubble{
    position:absolute;
    top:calc(100% - 34px);
    left:50%;
    transform:translateX(-50%);
    width:200px;
    max-width:200px;
    margin-top:0
  }
}
@media(min-width:900px){
  .bookshelf{
    --shelf-row:195px;
    --shelf-gap:90px;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:var(--shelf-gap) 50px
  }
  .book-cover-img{width:90px;height:120px}
}
@media(min-width:1200px){
  .bookshelf{
    --shelf-row:190px;
    --shelf-gap:85px;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:var(--shelf-gap) 60px
  }
}

/* Enhanced theme application */
.theme-enhanced body,
.theme-enhanced .shelf-page,
.theme-enhanced .landing-page,
.theme-enhanced .profile-screen,
.theme-enhanced .settings-screen {
  background: radial-gradient(circle at 18% 5%, var(--theme-gradient-start, #f7ddeb) 0, transparent 40%),
              radial-gradient(circle at 82% 15%, var(--theme-gradient-mid, #e8dffc) 0, transparent 35%),
              radial-gradient(circle at 50% 100%, var(--theme-gradient-end, #ffdfbb) 0, transparent 45%),
              var(--theme-bg, #faf3e8) !important;
}

.theme-enhanced .shelf-shell,
.theme-enhanced .landing-page .shelf-shell,
.theme-enhanced .profile-main,
.theme-enhanced .settings-page-shell {
  background: transparent;
}

.theme-enhanced .shelf-header,
.theme-enhanced .site-header,
.theme-enhanced .settings-site-header {
  background: linear-gradient(90deg, var(--theme-surface, #fffaf4) 0%, var(--theme-card, #ffffff) 100%);
  border-radius: 20px;
  padding: 12px 24px;
  margin-top: 16px;
  box-shadow: 0 8px 24px rgba(120, 90, 120, 0.12);
  border: 1px solid var(--theme-border, #e9dece);
}

.theme-enhanced .shelf-brand,
.theme-enhanced .page-title {
  color: var(--theme-text, #3d4268) !important;
}

.theme-enhanced .shelf-hero,
.theme-enhanced .landing-hero {
  background: var(--theme-hero) !important;
  box-shadow: 0 20px 50px rgba(120, 90, 140, 0.18);
}

.theme-enhanced .book-card,
.theme-enhanced .benefit-card,
.theme-enhanced .story-preview-card,
.theme-enhanced .donation-card,
.theme-enhanced .faq-item,
.theme-enhanced .profile-identity,
.theme-enhanced .profile-book-card,
.theme-enhanced .settings-screen .preferences-form,
.theme-enhanced .profile-backup {
  background: linear-gradient(180deg, var(--theme-surface, #fffaf4) 0%, var(--theme-card, #ffffff) 100%) !important;
  border-color: var(--theme-border, #efe4da) !important;
  box-shadow: 0 14px 36px rgba(110, 80, 120, 0.16);
}

.theme-enhanced .shelf-section,
.theme-enhanced .landing-section {
  background: rgba(255, 255, 255, 0.4);
  border-radius: 28px;
  padding: clamp(32px, 5vw, 48px);
  margin: 32px 0;
  backdrop-filter: blur(8px);
  border: 1px solid var(--theme-border, #e9dece);
}

.theme-enhanced .section-topline h2,
.theme-enhanced .landing-hero h1,
.theme-enhanced .donation-copy h2,
.theme-enhanced .landing-cta-box h2,
.theme-enhanced .benefit-card h3,
.theme-enhanced .faq-item summary {
  color: var(--theme-text, #3d4268) !important;
}

.theme-enhanced .section-kicker,
.theme-enhanced .hero-kicker {
  color: var(--theme-accent, #ab5b91) !important;
}

.theme-enhanced .hero-button,
.theme-enhanced .landing-center .hero-button,
.theme-enhanced .landing-cta-box .hero-button {
  background: linear-gradient(135deg, var(--theme-accent, #f76e96) 0%, var(--pink-dark, #df4f7f) 100%) !important;
  box-shadow: 0 8px 0 rgba(223, 79, 127, 0.6);
  border: none;
}

.theme-enhanced .customize-action,
.theme-enhanced .profile-action,
.theme-enhanced .landing-secondary {
  background: linear-gradient(90deg, var(--theme-soft, #f9eefb) 0%, var(--theme-surface, #ffffff) 100%) !important;
  border-color: var(--theme-border, #e5d5e9) !important;
  color: var(--violet, #8655a5) !important;
}

.theme-enhanced .site-footer {
  background: linear-gradient(90deg, var(--theme-surface, #fffaf4) 0%, var(--theme-card, #ffffff) 100%);
  border-radius: 20px 20px 0 0;
  padding: 24px 32px;
  margin-top: 40px;
  border: 1px solid var(--theme-border, #e9dece);
  border-bottom: none;
}

.theme-enhanced .bookshelf {
  --shelf-plank-lip: var(--theme-border, #c4a484);
  --shelf-plank-edge: color-mix(in srgb, var(--theme-border, #c4a484) 86%, #000);
  border-color: var(--theme-border, #a0825c) !important;
}

.theme-enhanced .shelf-footnote {
  background: linear-gradient(90deg, var(--theme-highlight, #fff2d5) 0%, var(--theme-soft, #fdf0e0) 100%) !important;
  color: mix(var(--theme-text), #8a6d5a, 40%) !important;
  border: 1px solid var(--theme-border, #f2e0c8);
}

/* Aba do criador por foto: oculta até modelos locais estarem disponíveis. */
.profile-tab[hidden], .profile-editor-pane[hidden], .avatar-photo-video[hidden],
.avatar-photo-camera-placeholder[hidden], .avatar-photo-buttons [hidden] { display: none !important; }
.avatar-photo-screen { padding: clamp(8px, 3vw, 24px) 0 32px; }
.avatar-photo-app { max-width: 810px; margin: 0 auto; }
.avatar-photo-panel {
  padding: clamp(20px, 4vw, 40px);
  border: 2px solid #eaddeb;
  border-radius: 24px;
  background: #fffaf4;
  box-shadow: 0 12px 32px #725b7520;
  color: #423459;
}
.avatar-photo-intro { font-size: 1.06rem; }
.avatar-photo-adult {
  background: #fff0cb; border: 1px solid #ead497; border-radius: 16px;
  padding: 14px 18px; font-size: 1rem;
}
.avatar-photo-camera-area {
  margin: 18px auto; width: min(100%, 470px); min-height: 220px;
  border: 2px dashed #baa1d0; border-radius: 20px;
  display: grid; place-items: center; background: #f4e9ff;
  overflow: hidden;
}
.avatar-photo-camera-placeholder { font-size: clamp(52px, 12vw, 92px); padding: 36px 16px; }
.avatar-photo-back {
  display: inline-flex; align-items: center; padding: 10px 14px;
  border: 1px solid #bc9bd0; border-radius: 12px;
  color: #493568; text-decoration: none; font-weight: 700;
}
.avatar-photo-back:hover, .avatar-photo-back:focus-visible { background: #ece0f5; }
@media(max-width:820px) {
  .profile-tabs { flex-wrap: wrap; }
  .profile-tab { flex: 1 1 calc(50% - 8px); }
}
@media(max-width:600px) {
  .profile-screen .settings-preview-column { top: 107px; }
}
.avatar-photo-panel h2 { font-size: 1.45rem; margin: 0 0 8px; }
.avatar-photo-panel p { line-height: 1.5; }
.avatar-photo-video {
  display: block;
  width: 100%;
  max-height: min(60dvh, 500px);
  margin: 0 auto;
  border-radius: 18px;
  background: #272036;
  object-fit: contain;
  transform: scaleX(-1);
}
.avatar-photo-buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin: 18px 0 6px;
}
.avatar-photo-buttons button, .avatar-photo-buttons .avatar-photo-file-control {
  border: 1px solid #bc9bd0;
  border-radius: 12px;
  padding: 10px 14px;
  font: inherit;
  font-weight: 700;
  color: #493568;
  background: #f3e8fb;
  cursor: pointer;
}
.avatar-photo-buttons button:disabled, .avatar-photo-file-control.disabled { opacity: .5; cursor: wait; }
.avatar-photo-file-control {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.avatar-photo-file-control:focus-within {
  outline: 3px solid #8753b9;
  outline-offset: 3px;
}
/* O input file nativo ocupa todo o botão: clique e toque chegam diretamente
   no seletor do navegador (inclusive Safari/iOS), sem .click() programático. */
.avatar-photo-file-control .avatar-photo-input {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  opacity: 0;
  font-size: 100px;
  cursor: pointer;
}
.avatar-photo-file-control.disabled .avatar-photo-input { cursor: wait; }
.avatar-photo-status { min-height: 24px; font-weight: 700; }
.avatar-photo-privacy { font-size: .83rem; opacity: .85; }

/* Conferência infantil: a forma do cabelo não é decidida sem a criança. */
.avatar-photo-review[hidden] { display: none !important; }
.avatar-photo-review { text-align: center; padding: 12px 0; }
.avatar-photo-review h3 { color: #493568; font-size: 1.3rem; }
.avatar-photo-suggestions {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(145px, 1fr));
  gap: 12px; margin: 20px 0;
}
.avatar-photo-suggestion {
  border: 3px solid #e4d5f3; border-radius: 16px; padding: 10px;
  background: #fff; color: #493568; cursor: pointer; min-width: 0;
}
.avatar-photo-suggestion[aria-pressed="true"] {
  border-color: #7050ac; background: #f0e6ff;
  box-shadow: 0 0 0 2px #7050ac;
}
.avatar-photo-suggestion:focus-visible, .avatar-photo-other-hair:focus-visible {
  outline: 3px solid #d08918; outline-offset: 3px;
}
.avatar-photo-suggestion-art { height: 168px; overflow: hidden; }
.avatar-photo-suggestion-art svg { width: 104px; max-width: 100%; height: 168px; }
.avatar-photo-suggestion strong { display: block; font-size: .92rem; }
.avatar-photo-more-label { display: block; margin: 10px 0 6px; font-weight: 750; }
.avatar-photo-other-hair { width: min(100%, 390px); min-height: 44px; padding: 8px; border-radius: 10px; }
.avatar-photo-colors-preview { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; margin: 18px 0; }
.avatar-photo-color-chip { display: inline-flex; align-items: center; gap: 6px; font-size: .84rem; }
.avatar-photo-color-swatch { width: 24px; height: 24px; border: 1px solid #81748b; border-radius: 50%; }
.avatar-photo-review-note { color: #5b4c6d; font-size: .86rem; }

/* Recorte local antes da inferência: sem dependências externas. */
.avatar-photo-crop-editor[hidden], .avatar-photo-buttons[hidden],
.avatar-photo-camera-area[hidden] { display: none !important; }
.avatar-photo-crop-editor {
  padding: 14px 0 6px;
  text-align: center;
}
.avatar-photo-crop-editor h3 { margin: 6px 0; font-size: 1.35rem; color: #493568; }
.avatar-photo-crop-editor p { max-width: 540px; margin: 8px auto 14px; }
.avatar-photo-crop-preview {
  display: block;
  width: min(100%, 360px, 48dvh);
  height: auto;
  aspect-ratio: 4/5;
  margin: 0 auto 14px;
  border: 3px solid #9565cb;
  border-radius: 18px;
  background: #29263a;
  box-shadow: 0 8px 18px #40315233;
  cursor: grab;
  touch-action: none;
  user-select: none;
}
.avatar-photo-crop-preview:active { cursor: grabbing; }
.avatar-photo-crop-preview:focus-visible { outline: 4px solid #f0b74c; outline-offset: 3px; }
.avatar-photo-zoom-label { display: block; margin: 10px 0 6px; font-weight: 850; }
.avatar-photo-zoom { width: min(100%, 350px); min-height: 36px; accent-color: #9565cb; }
.avatar-photo-crop-buttons {
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap;
  gap: 10px; margin-top: 14px;
}
.avatar-photo-crop-buttons button {
  border: 1px solid #bc9bd0; border-radius: 12px;
  padding: 11px 15px; font: inherit; font-weight: 750;
  color: #493568; background: #f3e8fb; cursor: pointer;
}
.avatar-photo-crop-buttons [data-action="analyze"] {
  color: #fff; background: #7b4ab2; border-color: #7b4ab2;
}
.avatar-photo-crop-buttons button:disabled { opacity: .5; cursor: wait; }
@media(max-width:480px) {
  .avatar-photo-crop-preview { max-height: 52dvh; }
  .avatar-photo-crop-buttons button { width: 100%; }
}

/* Leitor adaptativo: sem StPageFlip, sombras transformadas ou animação pesada. */
.reader-motion-settings {
  display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px;
  padding:8px 12px 14px; color:#625377; font-weight:750; font-size:14px;
}
.reader-motion-settings select {
  min-height:40px; max-width:100%;
  border:1px solid #cfc1df; border-radius:12px; padding:8px 12px;
  font:inherit; font-weight:700; color:#503a75; background:#fffaf8;
}
.reader-motion-settings select:focus-visible { outline:3px solid #9170c6; outline-offset:2px; }
.reader-motion-settings [role="status"] { margin-left:auto; font-size:12px; }
.reader-shell .book.reader-simple {
  display:flex; gap:0; position:relative; touch-action:pan-y;
  overflow:visible; isolation:isolate;
}
.reader-shell .book.reader-simple > .flip-page {
  display:flex; height:100%; flex:1 1 50%; min-width:0;
  position:relative; box-shadow:0 6px 18px #584d5924;
}
.reader-shell .book.reader-simple > .flip-page[hidden] { display:none!important; }
.reader-shell .book.reader-simple.reader-portrait > .flip-page { flex:1 1 100%; }
.reader-shell .book.reader-simple > .flip-page .read-panel { overflow-y:auto; }

/* Perfis infantis e controle de tempo (funcionam também offline). */
.family-switcher { position:fixed;right:14px;bottom:16px;z-index:90;
  color:#50366b;font-size:14px;max-width:calc(100vw - 24px) }
.reader-screen .family-switcher { bottom:100px }
.family-toggle { border:2px solid #b89fdd;border-radius:18px;background:#fff9ff;
  padding:10px 15px;box-shadow:0 5px 18px #4b325e30;font:inherit;font-weight:900;color:inherit;cursor:pointer }
.family-menu { position:absolute;right:0;bottom:calc(100% + 8px);width:min(290px,calc(100vw - 24px));
  border:2px solid #dbc9ec;border-radius:18px;padding:14px;background:#fffafc;box-shadow:0 8px 24px #49305245 }
.family-menu strong { display:block;margin-bottom:9px }
.family-children,.parental-profile-choices { display:grid;gap:6px;margin-bottom:10px }
.family-children button,.parental-profile-choices button { font:inherit;text-align:left;background:#f0e8ff;
  color:#543d72;border:1px solid #d0b9ec;border-radius:11px;padding:10px;cursor:pointer }
.family-children button:disabled,.parental-profile-choices button:disabled { opacity:.55;cursor:default }
.family-menu a,.parental-block-card a { color:#6548a4;font-weight:900 }
.parental-blocker { position:fixed;inset:0;z-index:9999;display:grid;place-items:center;
  background:#29213ce8;backdrop-filter:blur(8px);padding:14px;overflow:auto }
.parental-blocker[hidden],.family-menu[hidden],.parent-gate[hidden],#parentControls[hidden],
  #parentPinWarning[hidden],.parental-unlock-form[hidden] { display:none!important }
.parental-block-card { width:min(480px,100%);padding:clamp(22px,5vw,38px);border-radius:28px;
  background:#fffcf3;box-shadow:0 12px 50px #140d2670;text-align:center;color:#42315d }
.parental-block-card h2 { margin:5px 0;font-size:clamp(26px,5vw,37px) }
.parental-block-card p { line-height:1.5 }
.parental-block-icon { font-size:60px }
.parental-unlock-form { display:flex;flex-wrap:wrap;gap:8px;margin:13px 0 }
.parental-unlock-form input { flex:1 1 150px;min-width:0 }
.parental-block-card input,.parent-settings-card input,.parent-settings-card select {
  border:2px solid #d9c6ea;border-radius:11px;padding:11px 12px;background:#fff;color:#46395a;font:inherit;max-width:100%;min-height:42px }
.parental-block-card button,.parent-settings-card button { border:0;border-radius:12px;padding:12px 16px;
  color:#fff;background:#8360bc;font:inherit;font-weight:850;cursor:pointer }
.parental-block-card button:disabled,.parent-settings-card button:disabled { opacity:.55;cursor:default }
.parental-locked-profiles { text-align:left;margin:19px 0 12px }
.parent-settings-card { width:min(850px,calc(100% - 20px));margin:14px auto 90px;
  background:#fffaf9;border:2px solid #ecdfed;border-radius:24px;padding:clamp(20px,4vw,38px);
  box-shadow:0 8px 24px #44315015;color:#403350 }
.parent-settings-card h1 { font-size:clamp(25px,4vw,34px);margin:8px 0 }
.parent-settings-card h2 { font-size:22px }
.parent-settings-card label { display:block;font-weight:850;margin-top:12px }
.parent-settings-card input:not([type="file"]),.parent-settings-card select { width:100% }
.parent-settings-card input[type="checkbox"] { width:auto;min-height:0;accent-color:#8060b9 }
.parent-settings-card .parent-photo-permission { display:flex;align-items:center;gap:10px;
  padding:13px;border-radius:12px;background:#f1eafd;border:1px solid #d8c8ec;cursor:pointer }
.parent-settings-card .pronunciation-input-row { display:flex;gap:9px }
.parent-settings-card .pronunciation-input-row input { flex:1;min-width:0 }
.parent-settings-card .pronunciation-input-row button { flex:none }
.parent-children-header { display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap }
.parent-children-list { display:flex;gap:8px;flex-wrap:wrap;margin:12px 0 20px }
.parent-children-list button { background:#efe6f6;color:#654894 }
.parent-children-list button.active { background:#7150a4;color:#fff }
.parent-child-form,.parent-password,.parent-settings-card .profile-backup { background:#fff;border:1px solid #e7d9e9;
  border-radius:17px;padding:19px;margin:18px 0 }
.parent-form-buttons { display:flex;flex-wrap:wrap;gap:10px;margin-top:18px }
.parent-settings-card .settings-reset { background:#a34367 }
.parent-warning { background:#fff0d2;border:1px solid #ecc382;padding:13px;border-radius:11px }
.parent-settings-card [role="status"] { min-height:19px;color:#69508f;font-weight:750 }
@media(max-width:600px) {
  .family-switcher { right:8px;bottom:8px;font-size:12px }
  .family-toggle { padding:9px 10px }
  .reader-screen .family-switcher { bottom:94px }
  .parent-settings-card { margin-top:0;width:calc(100% - 12px);padding:14px }
  .parent-child-form,.parent-password,.parent-settings-card .profile-backup { padding:13px }
}
@media(max-width:520px) {
  .reader-motion-settings { font-size:13px; padding:6px 4px 12px; }
  .reader-motion-settings select { flex:1 1 175px; }
  .reader-motion-settings [role="status"] { margin-left:0; }
}

/* Check-in acolhedor: diálogo nativo para manter foco e impedir leitura por trás. */
.mood-dialog { width:min(690px,calc(100vw - 24px));max-height:min(92dvh,850px);border:0;
  padding:0;border-radius:27px;background:#fffaf5;color:#443654;box-shadow:0 20px 90px #1b123e80;overflow:auto }
.mood-dialog::backdrop { background:#251d42dd;backdrop-filter:blur(6px) }
.mood-dialog-body { padding:clamp(18px,4vw,32px);text-align:center }
.mood-dialog-heading { font-size:32px;letter-spacing:.16em }
.mood-dialog h2 { font-size:clamp(25px,4vw,36px);line-height:1.2;margin:8px 0 }
.mood-dialog p { line-height:1.45;margin:8px 0 15px }
.mood-hear { border:2px solid #bfafe6;border-radius:14px;padding:10px 15px;
  background:#f3edff;color:#493569;font:inherit;font-weight:850;cursor:pointer }
.mood-options { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;
  max-height:min(47dvh,390px);overflow-y:auto;padding:10px 4px;margin-top:10px }
.mood-choice { display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;
  min-height:90px;padding:10px 5px;border:2px solid #e7d6e4;border-radius:17px;background:#fff;
  color:#443654;font:inherit;font-size:14px;font-weight:900;cursor:pointer }
.mood-choice .mood-emoji { font-size:34px;line-height:1.1 }
.mood-choice[aria-pressed="true"] { border-color:#7553ad;background:#eee6ff;box-shadow:0 0 0 2px #b29ddb }
.mood-choice:hover { background:#f8f0ff }
.mood-choice:focus-visible,.mood-hear:focus-visible,.mood-confirm:focus-visible,.mood-cancel:focus-visible {
  outline:4px solid #f0a842;outline-offset:3px }
.mood-actions { display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:13px;margin-top:16px }
.mood-confirm { min-height:50px;padding:12px 20px;border:0;border-radius:15px;background:#7653ad;
  color:white;font:inherit;font-size:16px;font-weight:900;cursor:pointer }
.mood-confirm:disabled { opacity:.5;cursor:not-allowed }
.mood-cancel { min-height:48px;padding:10px 17px;border:2px solid #d7c4e8;border-radius:15px;
  background:#fff;color:#674b86;font:inherit;font-weight:850;cursor:pointer }
.mood-actions a { font-size:13px;font-weight:850;color:#63478a }
.mood-status { color:#654784;min-height:20px;font-weight:800 }
@media(max-width:500px) {
  .mood-options { grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;max-height:49dvh }
  .mood-choice { min-height:78px;font-size:13px }
  .mood-choice .mood-emoji { font-size:30px }
}

/* Emoji de hoje em um balão de pensamento, ao lado da cabeça do avatar. */
.avatar-stage,.profile-portrait { position:relative }
.mood-thought-bubble { position:absolute;top:2%;right:4%;z-index:5;display:grid;place-items:center;
  box-sizing:border-box;width:clamp(80px,28%,110px);aspect-ratio:1;padding:7px;
  border:3px solid #d1b9df;border-radius:49% 52% 48% 50%;appearance:none;
  background:#fffdfb;box-shadow:0 4px 12px #4f365b35;color:#443654;
  font:inherit;font-size:clamp(36px,4vw,54px);line-height:1;cursor:pointer;touch-action:manipulation }
.mood-thought-emoji { display:block;max-width:100%;line-height:1;white-space:nowrap }
.mood-thought-bubble:hover { background:#fff7ff;box-shadow:0 6px 16px #4f365b44 }
.mood-thought-bubble:focus-visible { outline:4px solid #f0a842;outline-offset:4px }
.mood-thought-bubble::before,.mood-thought-bubble::after { content:"";position:absolute;border:2px solid #d1b9df;
  background:#fffdfb;border-radius:50%;pointer-events:none }
.mood-thought-bubble::before { width:13px;height:13px;bottom:-16px;left:11px }
.mood-thought-bubble::after { width:7px;height:7px;bottom:-27px;left:4px }
.settings-preview-column .mood-thought-bubble { right:-5%;top:0 }
@media(max-width:650px) {
  .settings-preview-column .mood-thought-bubble { width:64px;right:-16%;top:-2%;font-size:38px }
  .profile-portrait .mood-thought-bubble { width:78px;right:6%;top:4%;font-size:47px }
}

/* Gráficos locais dos responsáveis: sem dependências e com rótulos acessíveis. */
.parent-mood-section { margin:20px 0;padding:clamp(15px,3vw,23px);background:#fff;
  border:1px solid #e6dce9;border-radius:18px }
.parent-mood-section p { line-height:1.55 }
.parent-mood-section h3 { font-size:18px;margin:24px 0 13px }
.parent-mood-section #parentMoodDashboard[hidden],.parent-mood-section #parentMoodLocked[hidden] { display:none!important }
.parent-mood-summary { background:#f4eefb;padding:12px;border-radius:12px;color:#51406b;font-weight:750 }
.parent-mood-bars { display:grid;gap:10px }
.parent-mood-bar { display:grid;grid-template-columns:minmax(105px,155px) minmax(0,1fr) 28px;
  align-items:center;gap:11px;font-size:14px }
.parent-mood-name { font-weight:850 }
.parent-mood-track { height:21px;background:#f0e8f2;border-radius:20px;overflow:hidden }
.parent-mood-fill { display:block;height:100%;background:linear-gradient(90deg,#9d7ad2,#6948a5);
  border-radius:20px;min-width:0 }
.parent-mood-count { font-variant-numeric:tabular-nums;text-align:right }
.parent-mood-timeline { display:grid;grid-template-columns:repeat(auto-fill,minmax(83px,1fr));gap:7px;
  max-height:430px;overflow:auto;padding:4px }
.parent-mood-day { display:flex;flex-direction:column;align-items:center;gap:3px;min-height:85px;
  padding:9px 4px;border:1px solid #dfd0e7;border-radius:13px;background:#f8f0ff;text-align:center }
.parent-mood-day.empty { background:#f7f5f6;border-style:dashed;color:#857d85 }
.parent-mood-date { font-size:12px;font-weight:900 }
.parent-mood-day-emoji { font-size:27px;line-height:1.2 }
.parent-mood-day-label { font-size:11px;font-weight:800;overflow-wrap:anywhere }
.parent-mood-advice { display:grid;gap:11px }
.parent-mood-message { margin:0;padding:14px 16px;border:1px solid #d7d0e5;border-radius:14px;
  background:#f5f2fc;color:#483b5d }
.parent-mood-message p { margin:6px 0 0 }
.parent-mood-message.atencao { background:#fff0dc;border-color:#e7bc82 }
.parent-mood-message.acompanhar { background:#fff9e8;border-color:#e1d2a1 }
.parent-mood-message.acolhedor { background:#eaf8ed;border-color:#add7b6 }
.parent-mood-disclaimer { margin-top:17px;font-size:13px;color:#665d6e }
.parent-mood-sources { margin-top:14px;padding:13px;border:1px solid #e5d9eb;border-radius:13px }
.parent-mood-sources summary { cursor:pointer;font-weight:900 }
.parent-mood-sources ul { padding-left:22px }
.parent-mood-sources li { line-height:1.5;margin:11px 0;font-size:13px }
.parent-mood-sources a { color:#60418b;font-weight:850 }
@media(max-width:550px) {
  .parent-mood-bar { grid-template-columns:105px minmax(0,1fr) 24px;gap:6px;font-size:12px }
  .parent-mood-timeline { grid-template-columns:repeat(auto-fill,minmax(66px,1fr)) }
}

/* Atividades das histórias de jogos e matemática. As respostas são botões
   grandes para tocar, com retorno que não depende apenas da cor. */
.read-panel.is-challenge { justify-content:flex-start;overflow-y:auto;padding:clamp(17px,2.2vw,27px) }
.read-panel.is-challenge .chapter { margin-bottom:5px }
.read-panel.is-challenge .page-title { font-size:clamp(25px,2.5vw,35px);margin-bottom:10px }
.read-panel.is-challenge .story { font-size:clamp(14px,1.35vw,17px);line-height:1.35 }
.read-panel.is-challenge .story p { margin:0 0 7px }
.read-panel.is-challenge .hint { margin-top:9px }
.learning-game { background:#fff;border:2px solid #d5c9e9;border-radius:18px;padding:13px;
  margin-top:12px;font-size:15px;line-height:1.3;box-shadow:0 5px 0 #e9e0f3 }
.learning-game .learning-progress { font-size:13px;font-weight:900;color:#70569a;margin:0 0 6px }
.learning-prompt { font-size:clamp(15px,1.55vw,20px);line-height:1.25;color:#34465d;margin:0 0 5px }
.learning-formula { font-size:clamp(21px,2.6vw,30px);font-weight:1000;color:#7454a4;margin:4px 0 9px }
.learning-groups { display:flex;gap:6px;flex-wrap:wrap;max-height:145px;overflow-y:auto;margin:8px 0 }
.learning-group { display:flex;gap:3px;flex-wrap:wrap;background:#f8f2ff;border:1px solid #e0d5f0;
  border-radius:10px;padding:5px;max-width:100% }
.learning-object { font-size:clamp(17px,1.7vw,22px);line-height:1.15 }
.learning-object.removed { opacity:.26;text-decoration:line-through;filter:grayscale(.6) }
.learning-choices { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;margin:10px 0 4px }
.learning-choice,.learning-next { cursor:pointer;font-family:inherit;font-weight:900;font-size:clamp(14px,1.5vw,18px);
  border-radius:12px;min-height:44px;padding:8px 10px;background:#f0e7ff;color:#5e4389;border:2px solid #c8b4e6 }
.learning-choice:hover,.learning-next:hover { background:#e3d2ff }
.learning-choice.correct { background:#dbf5e2;border-color:#76c998;color:#276b43 }
.learning-choice:disabled,.learning-next:disabled { cursor:default;opacity:.75 }
.learning-feedback { font-size:14px;font-weight:800;color:#49657e;min-height:34px;margin:8px 0!important }
.learning-controls { display:flex;justify-content:flex-end }
.learning-next { width:100%;background:#6e54a7;border-color:#6e54a7;color:#fff }
.learning-next:hover { background:#553c8e;color:#fff }
.learning-board { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px;
  max-width:248px;margin:8px auto;border:3px solid #98aadd;background:#98aadd;border-radius:12px }
.learning-cell { aspect-ratio:1;border:0;background:#fffdfb;border-radius:5px;color:#69599e;
  font-size:clamp(24px,3vw,40px);font-weight:900;cursor:pointer;min-height:54px }
.learning-cell:disabled { cursor:default }
.learning-cell:hover:not(:disabled) { background:#f2ecff }
.learning-game button:focus-visible { outline:3px solid #2983c7;outline-offset:2px }
.learning-done { background:#e8f7eb;border-color:#91cfa3;color:#38694b;font-weight:850 }
@media(max-width:700px) {
  .read-panel.is-challenge { padding:15px }
  .learning-game { padding:10px }
  .learning-groups { max-height:130px }
  .learning-board { max-width:200px }
  .learning-cell { min-height:48px }
}