:root {
    --pocket-paper: #fff8ea;
    --pocket-paper-strong: #fff1d2;
    --pocket-cream: #f8e9c8;
    --pocket-butter: #f6c86b;
    --pocket-orange: #e88b3a;
    --pocket-salmon: #f2b7a2;
    --pocket-green: #b9d8aa;
    --pocket-mint: #dceccb;
    --pocket-brown: #6f4a2f;
    --pocket-text: #3f3328;
    --pocket-muted: #7b6a58;
    --pocket-line: rgba(111, 74, 47, .18);
    --pocket-shadow: 0 2px 4px rgba(101, 67, 33, .06);
}

* { box-sizing: border-box; }

html, body { min-height: 100%; }

body {
    margin: 0;
    color: var(--pocket-text);
    font-family: Arial, Helvetica, sans-serif;
    background:
        radial-gradient(circle at top left, rgba(246, 200, 107, .28), transparent 32rem),
        radial-gradient(circle at bottom right, rgba(185, 216, 170, .34), transparent 28rem),
        linear-gradient(135deg, #fff9ed, #f5e1bd);
}

a { color: inherit; }

.pocket-shell {
    width: min(1180px, calc(100% - 32px));
    margin: 0 auto;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px 0;
}

.pocket-access-card {
    width: min(620px, 100%);
    background: rgba(255, 248, 234, .94);
    border: 1px solid var(--pocket-line);
    border-radius: 30px;
    box-shadow: var(--pocket-shadow);
    padding: 36px;
    text-align: center;
}

.pocket-brand-mark {
    width: 76px;
    height: 76px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 24px;
    background: linear-gradient(135deg, var(--pocket-orange), var(--pocket-butter));
    color: #fffaf1;
    font-weight: 900;
    margin-bottom: 18px;
    letter-spacing: .04em;
}

.pocket-access-card h1,
.pocket-page h1 {
    margin: 0 0 14px;
    font-size: clamp(2rem, 4vw, 3.3rem);
    line-height: 1.03;
    color: var(--pocket-brown);
}

.pocket-muted,
.pocket-lead {
    color: var(--pocket-muted);
    line-height: 1.6;
}

.pocket-lead {
    font-size: 1.08rem;
    margin-bottom: 24px;
}

.pocket-book {
    width: 100%;
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
    gap: 0;
    filter: drop-shadow(0 1px 2px rgba(86, 56, 31, .035));
}

.pocket-page {
    min-height: 680px;
    background:
        repeating-linear-gradient(to bottom, transparent 0, transparent 35px, rgba(111, 74, 47, .055) 36px),
        linear-gradient(135deg, rgba(255, 250, 239, .98), rgba(255, 241, 210, .96));
    border: 1px solid var(--pocket-line);
    padding: clamp(24px, 5vw, 54px);
    position: relative;
    overflow: hidden;
}

.pocket-page-left {
    border-radius: 34px 4px 4px 34px;
    border-right: 0;
}

.pocket-page-right {
    border-radius: 4px 34px 34px 4px;
    background:
        radial-gradient(circle at center, rgba(246, 200, 107, .2), transparent 20rem),
        repeating-linear-gradient(to bottom, transparent 0, transparent 35px, rgba(111, 74, 47, .045) 36px),
        linear-gradient(135deg, rgba(255, 248, 234, .96), rgba(220, 236, 203, .72));
}

.pocket-page-left::after {
    content: '';
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 18px;
    background: linear-gradient(to right, transparent, rgba(111, 74, 47, .12));
}

.pocket-page-right::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 18px;
    background: linear-gradient(to left, transparent, rgba(111, 74, 47, .12));
}

.pocket-topline {
    color: var(--pocket-orange);
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .08em;
    font-size: .8rem;
    margin-bottom: 16px;
}

.pocket-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    align-items: center;
    margin: 24px 0;
}

.pocket-actions-compact {
    margin: 14px 0;
}

.pocket-button {
    appearance: none;
    border: 0;
    border-radius: 999px;
    padding: 13px 18px;
    background: var(--pocket-orange);
    color: #fffdf8;
    font-weight: 800;
    cursor: pointer;
    text-decoration: none;
    box-shadow: 0 12px 26px rgba(232, 139, 58, .26);
    transition: transform .18s ease, box-shadow .18s ease, opacity .18s ease;
}

.pocket-button:hover {
    transform: translateY(-1px);
    box-shadow: 0 16px 30px rgba(232, 139, 58, .3);
}

.pocket-button:disabled {
    opacity: .65;
    cursor: not-allowed;
    transform: none;
}

.pocket-button-soft {
    background: rgba(111, 74, 47, .08);
    color: var(--pocket-brown);
    box-shadow: none;
    border: 1px solid var(--pocket-line);
}

.pocket-note,
.pocket-success {
    border-radius: 20px;
    padding: 16px;
    background: rgba(185, 216, 170, .32);
    border: 1px solid rgba(111, 74, 47, .12);
    color: var(--pocket-brown);
    line-height: 1.45;
}

.pocket-success {
    background: rgba(185, 216, 170, .48);
    margin-bottom: 18px;
    font-weight: 800;
}

.assistant-stage {
    min-height: 360px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 1;
}

.assistant-character {
    width: 176px;
    height: 305px;
    position: relative;
    animation: assistantFloat 3.4s ease-in-out infinite;
}

.assistant-hat {
    width: 100px;
    height: 48px;
    position: absolute;
    left: 38px;
    top: -11px;
    background: #fffdf7;
    border: 2px solid rgba(111, 74, 47, .11);
    border-radius: 42px 42px 18px 18px;
    z-index: 3;
}

.assistant-hat::before,
.assistant-hat::after {
    content: '';
    position: absolute;
    background: #fffdf7;
    border: 2px solid rgba(111, 74, 47, .1);
    border-radius: 50%;
    top: -18px;
    width: 38px;
    height: 38px;
}

.assistant-hat::before { left: 12px; }
.assistant-hat::after { right: 12px; }

.assistant-head {
    width: 94px;
    height: 94px;
    border-radius: 50% 50% 46% 46%;
    background: #f3c9a7;
    position: absolute;
    left: 41px;
    top: 27px;
    box-shadow: inset 0 -8px 0 rgba(111, 74, 47, .08);
    z-index: 2;
}

.assistant-head::before,
.assistant-head::after {
    content: '';
    position: absolute;
    top: 38px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--pocket-brown);
}

.assistant-head::before { left: 27px; }
.assistant-head::after { right: 27px; }

.assistant-body {
    width: 120px;
    height: 142px;
    border-radius: 34px 34px 26px 26px;
    background: linear-gradient(135deg, #fffdf7, #f6c86b);
    border: 2px solid rgba(111, 74, 47, .12);
    position: absolute;
    left: 28px;
    top: 113px;
}

.assistant-body::after {
    content: 'Chef';
    position: absolute;
    left: 50%;
    top: 42px;
    transform: translateX(-50%);
    font-weight: 900;
    color: var(--pocket-orange);
}

.assistant-apron {
    width: 68px;
    height: 90px;
    position: absolute;
    left: 54px;
    top: 145px;
    border-radius: 14px 14px 22px 22px;
    background: rgba(255, 255, 255, .68);
    border: 1px solid rgba(111, 74, 47, .12);
}

.assistant-apron::after {
    content: '🥄';
    position: absolute;
    left: 50%;
    top: 28px;
    transform: translateX(-50%);
    font-size: 1.4rem;
}

.assistant-arm,
.assistant-leg {
    position: absolute;
    background: #f3c9a7;
    border-radius: 999px;
}

.assistant-arm { width: 28px; height: 104px; top: 130px; }
.assistant-arm-left { left: 8px; transform: rotate(10deg); }
.assistant-arm-right { right: 8px; transform: rotate(-22deg); transform-origin: top; animation: assistantWave 2.8s ease-in-out infinite; }
.assistant-leg { width: 30px; height: 76px; top: 246px; }
.assistant-leg-left { left: 55px; }
.assistant-leg-right { right: 55px; }

.assistant-avatar-chef_aventureiro .assistant-body {
    background: linear-gradient(135deg, #fffdf7, #b9d8aa);
}

.assistant-avatar-chef_familiar .assistant-body {
    background: linear-gradient(135deg, #fffdf7, #f2b7a2);
}

.assistant-avatar-chef_profissional .assistant-body {
    background: linear-gradient(135deg, #fffdf7, #d6c3a7);
}

.assistant-balloon {
    max-width: 390px;
    background: rgba(255, 255, 255, .72);
    border: 1px solid var(--pocket-line);
    border-radius: 22px;
    padding: 16px 18px;
    color: var(--pocket-brown);
    line-height: 1.45;
    box-shadow: 0 14px 30px rgba(101, 67, 33, .1);
    text-align: center;
}

.pocket-grid-cards {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    position: relative;
    z-index: 1;
}

.pocket-mini-card {
    background: rgba(255, 255, 255, .48);
    border: 1px solid var(--pocket-line);
    border-radius: 22px;
    padding: 16px;
}

.pocket-mini-card span {
    display: block;
    color: var(--pocket-orange);
    font-size: .78rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .06em;
    margin-bottom: 6px;
}

.pocket-mini-card strong {
    color: var(--pocket-brown);
}

.pocket-form {
    display: grid;
    gap: 16px;
}

.pocket-form-section {
    display: grid;
    gap: 16px;
    padding: 18px;
    background: rgba(255, 255, 255, .42);
    border: 1px solid var(--pocket-line);
    border-radius: 24px;
}

.pocket-section-title {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    color: var(--pocket-brown);
}

.pocket-section-title strong {
    display: block;
    font-size: 1.08rem;
}

.pocket-section-title small {
    display: block;
    margin-top: 4px;
    color: var(--pocket-muted);
    line-height: 1.35;
}

.pocket-kitchen-icon {
    width: 42px;
    height: 42px;
    border-radius: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(246, 200, 107, .34);
    border: 1px solid var(--pocket-line);
    font-size: 1.35rem;
    flex: 0 0 auto;
}

.pocket-form label {
    display: grid;
    gap: 7px;
    color: var(--pocket-brown);
    font-weight: 800;
}

.pocket-form input,
.pocket-form select {
    width: 100%;
    border: 1px solid var(--pocket-line);
    background: rgba(255, 255, 255, .68);
    border-radius: 16px;
    min-height: 48px;
    padding: 12px 14px;
    color: var(--pocket-text);
    font-size: 1rem;
    outline: none;
}

.pocket-form input:focus,
.pocket-form select:focus {
    border-color: rgba(232, 139, 58, .72);
    box-shadow: 0 0 0 4px rgba(232, 139, 58, .14);
}

.pocket-toggle-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.pocket-toggle {
    display: flex !important;
    grid-template-columns: none !important;
    align-items: center;
    gap: 10px !important;
    min-height: 48px;
    border: 1px solid var(--pocket-line);
    border-radius: 17px;
    padding: 10px 12px;
    background: rgba(255, 255, 255, .42);
    color: var(--pocket-text) !important;
    font-weight: 700 !important;
}

.pocket-toggle input {
    width: 18px;
    min-height: 18px;
    height: 18px;
    accent-color: var(--pocket-orange);
    flex: 0 0 auto;
}

.pocket-help-card,
.pocket-chat-box {
    background: rgba(220, 236, 203, .45);
    border: 1px solid rgba(111, 74, 47, .14);
    border-radius: 20px;
    padding: 16px;
    line-height: 1.5;
}

.pocket-help-card p {
    margin: 7px 0 0;
    color: var(--pocket-muted);
}

.pocket-chat-box {
    display: grid;
    gap: 12px;
    background: rgba(255, 248, 234, .58);
}

.pocket-chat-message {
    padding: 12px 14px;
    border-radius: 16px;
    background: rgba(255, 255, 255, .64);
    border: 1px solid rgba(111, 74, 47, .12);
    color: var(--pocket-brown);
}

.pocket-chat-user {
    background: rgba(246, 200, 107, .22);
}

.pocket-chat-assistant {
    background: rgba(185, 216, 170, .26);
}

.pocket-chat-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
}

@keyframes assistantFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}

@keyframes assistantWave {
    0%, 100% { transform: rotate(-22deg); }
    50% { transform: rotate(-45deg); }
}

@media (max-width: 920px) {
    .pocket-shell {
        width: min(100% - 18px, 620px);
        align-items: flex-start;
        padding: 12px 0;
    }

    .pocket-book {
        display: block;
        filter: none;
    }

    .pocket-page,
    .pocket-page-left,
    .pocket-page-right {
        min-height: auto;
        border-radius: 26px;
        border: 1px solid var(--pocket-line);
        margin-bottom: 12px;
        padding: 24px;
        background:
            repeating-linear-gradient(to bottom, transparent 0, transparent 34px, rgba(111, 74, 47, .06) 35px),
            linear-gradient(135deg, rgba(255, 250, 239, .98), rgba(255, 241, 210, .96));
    }

    .pocket-page-left::after,
    .pocket-page-right::before { display: none; }

    .pocket-access-card { padding: 26px 18px; border-radius: 24px; }

    .assistant-stage { min-height: 340px; }

    .pocket-grid-cards,
    .pocket-toggle-grid {
        grid-template-columns: 1fr;
    }

    .pocket-actions { align-items: stretch; }
    .pocket-actions .pocket-button { width: 100%; text-align: center; }

    .pocket-chat-row {
        grid-template-columns: 1fr;
    }
}

/* Etapa avatar anime e receitas online */
.pocket-book-recipes .pocket-page,
.pocket-book-recipe-open .pocket-page {
    position: relative;
    overflow: hidden;
}

.assistant-stage-image {
    min-height: 500px;
    padding-bottom: 20px;
}

.assistant-image-avatar {
    width: min(86%, 310px);
    max-height: 520px;
    object-fit: contain;
    display: block;
    margin: 0 auto -4px;
    filter: drop-shadow(0 18px 24px rgba(111, 74, 47, .22));
    animation: assistantFloat 3.6s ease-in-out infinite;
}

.avatar-choice-preview {
    display: grid;
    grid-template-columns: 110px minmax(0, 1fr);
    gap: 16px;
    align-items: center;
    padding: 16px;
    border: 1px solid var(--pocket-line);
    border-radius: 22px;
    background: rgba(255, 255, 255, .48);
}

.avatar-choice-preview img {
    width: 110px;
    height: 160px;
    object-fit: contain;
    filter: drop-shadow(0 10px 16px rgba(111, 74, 47, .18));
}

.avatar-choice-preview strong {
    display: block;
    color: var(--pocket-brown);
    margin-bottom: 5px;
}

.avatar-choice-preview p {
    margin: 0;
    color: var(--pocket-muted);
    line-height: 1.45;
}

.pocket-form textarea {
    width: 100%;
    border: 1px solid var(--pocket-line);
    background: rgba(255, 255, 255, .68);
    border-radius: 16px;
    padding: 12px 14px;
    color: var(--pocket-text);
    font-size: 1rem;
    outline: none;
    resize: vertical;
    min-height: 180px;
    font-family: inherit;
}

.pocket-form textarea:focus {
    border-color: rgba(232, 139, 58, .72);
    box-shadow: 0 0 0 4px rgba(232, 139, 58, .14);
}

.pocket-form-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.pocket-form-row-three {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.pocket-search-form {
    display: grid;
    gap: 12px;
    margin-bottom: 18px;
}

.pocket-search-form label {
    display: grid;
    gap: 8px;
    color: var(--pocket-brown);
    font-weight: 800;
}

.pocket-search-form input {
    width: 100%;
    border: 1px solid var(--pocket-line);
    background: rgba(255, 255, 255, .72);
    border-radius: 16px;
    min-height: 48px;
    padding: 12px 14px;
    color: var(--pocket-text);
    font-size: 1rem;
    outline: none;
}

.pocket-reference-card {
    background: rgba(255, 255, 255, .54);
    border: 1px solid rgba(111, 74, 47, .12);
    border-radius: 18px;
    padding: 14px;
    color: var(--pocket-text);
}

.pocket-reference-card strong {
    color: var(--pocket-brown);
}

.pocket-reference-card p {
    margin: 8px 0;
    line-height: 1.45;
    color: var(--pocket-muted);
}

.pocket-reference-card small {
    color: var(--pocket-orange);
    font-weight: 800;
}

.pocket-recipe-guide-card {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 14px;
    padding: 22px;
    border-radius: 28px;
    background: rgba(255, 255, 255, .46);
    border: 1px solid var(--pocket-line);
    color: var(--pocket-text);
}

.pocket-recipe-guide-card h2 {
    margin: 0;
    color: var(--pocket-brown);
}

.pocket-recipe-guide-card p {
    margin: 0;
    line-height: 1.55;
    color: var(--pocket-muted);
}

.pocket-recipe-guide-card ul {
    margin: 0;
    padding-left: 20px;
    line-height: 1.75;
}

.pocket-error {
    padding: 12px 14px;
    border-radius: 18px;
    background: rgba(242, 183, 162, .34);
    border: 1px solid rgba(111, 74, 47, .14);
    color: var(--pocket-brown);
    font-weight: 800;
    margin-bottom: 14px;
}

.recipe-cover-frame {
    border-radius: 28px;
    overflow: hidden;
    border: 1px solid var(--pocket-line);
    background: rgba(255,255,255,.45);
    box-shadow: inset 0 0 0 8px rgba(255,255,255,.22);
    margin: 20px 0;
}

.recipe-cover-frame img {
    display: block;
    width: 100%;
    height: 280px;
    object-fit: cover;
}

.recipe-cover-placeholder {
    display: grid;
    place-items: center;
    height: 280px;
    border-radius: 28px;
    border: 1px dashed rgba(111, 74, 47, .28);
    background: rgba(255, 255, 255, .42);
    font-size: 5rem;
    margin: 20px 0;
}

.recipe-meta-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin: 18px 0;
}

.recipe-meta-grid div {
    padding: 13px;
    border-radius: 18px;
    background: rgba(255, 255, 255, .48);
    border: 1px solid var(--pocket-line);
}

.recipe-meta-grid span {
    display: block;
    font-size: .76rem;
    color: var(--pocket-orange);
    text-transform: uppercase;
    letter-spacing: .06em;
    font-weight: 900;
    margin-bottom: 4px;
}

.recipe-meta-grid strong {
    color: var(--pocket-brown);
}

.recipe-description {
    min-height: 320px;
    padding: 18px;
    border-radius: 24px;
    background: repeating-linear-gradient(to bottom, rgba(255,255,255,.42) 0, rgba(255,255,255,.42) 33px, rgba(111,74,47,.07) 34px);
    border: 1px solid var(--pocket-line);
    line-height: 1.75;
    color: var(--pocket-brown);
    white-space: normal;
}

.recipe-reference-box {
    margin-top: 18px;
    padding: 16px;
    border-radius: 20px;
    background: rgba(220, 236, 203, .45);
    border: 1px solid rgba(111, 74, 47, .14);
    color: var(--pocket-text);
}

.recipe-reference-box strong {
    color: var(--pocket-brown);
}

.recipe-reference-box a {
    color: var(--pocket-orange);
    font-weight: 900;
    text-decoration: none;
}

.pocket-book-recipe-open::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0;
    background: linear-gradient(90deg, transparent 0 47%, rgba(111,74,47,.16) 50%, transparent 54%);
}

.pocket-book-recipe-open.is-turning .pocket-page-right {
    animation: pageTurnRight .82s ease-in-out;
    transform-origin: left center;
}

.pocket-book-recipe-open.is-turning::after {
    animation: pageTurnShadow .82s ease-in-out;
}

@keyframes pageTurnRight {
    0% { transform: perspective(1200px) rotateY(0deg); filter: brightness(1); }
    48% { transform: perspective(1200px) rotateY(-18deg); filter: brightness(.96); }
    100% { transform: perspective(1200px) rotateY(0deg); filter: brightness(1); }
}

@keyframes pageTurnShadow {
    0%, 100% { opacity: 0; }
    45% { opacity: 1; }
}

@media (max-width: 920px) {
    .assistant-stage-image {
        min-height: 410px;
    }

    .assistant-image-avatar {
        width: min(86%, 240px);
        max-height: 360px;
    }

    .avatar-choice-preview,
    .pocket-form-row,
    .pocket-form-row-three,
    .recipe-meta-grid {
        grid-template-columns: 1fr;
    }

    .avatar-choice-preview img {
        margin: 0 auto;
    }

    .recipe-cover-frame img,
    .recipe-cover-placeholder {
        height: 220px;
    }
}

.pocket-demo-meter {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 18px 0;
    padding: 14px 16px;
    border-radius: 22px;
    background: rgba(255, 255, 255, .5);
    border: 1px solid var(--pocket-line);
    color: var(--pocket-text);
}

.pocket-demo-meter strong,
.pocket-demo-meter span {
    display: block;
}

.pocket-demo-meter strong {
    color: var(--pocket-brown);
}

.pocket-demo-meter small {
    color: var(--pocket-orange);
    font-weight: 800;
}

.pocket-reference-card .pocket-button {
    margin-top: 10px;
}

.pocket-integration-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.pocket-integration-card {
    padding: 16px;
    border-radius: 22px;
    background: rgba(255, 255, 255, .48);
    border: 1px solid var(--pocket-line);
    color: var(--pocket-text);
}

.pocket-integration-card strong {
    display: block;
    color: var(--pocket-brown);
    margin-bottom: 8px;
}

.pocket-integration-card p {
    margin: 0 0 10px;
    line-height: 1.55;
}

.pocket-integration-card span {
    display: inline-flex;
    padding: 7px 10px;
    border-radius: 999px;
    background: rgba(244, 185, 109, .22);
    color: var(--pocket-brown);
    font-size: .82rem;
    font-weight: 800;
}

.pocket-device-card {
    margin-top: 18px;
}

@media (max-width: 920px) {
    .pocket-demo-meter,
    .pocket-integration-grid {
        grid-template-columns: 1fr;
    }

    .pocket-demo-meter {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* Etapa de fechamento funcional: caderno e configurações em telas */
.pocket-grid-links .pocket-mini-card,
.recipe-dashboard-card,
.recipe-list-card {
    text-decoration: none;
}

.settings-progress {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    margin: 18px 0 22px;
}

.settings-progress-item {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 52px;
    border-radius: 18px;
    border: 1px solid var(--pocket-line);
    background: rgba(255, 255, 255, .42);
    color: var(--pocket-brown);
    font-weight: 900;
    text-decoration: none;
}

.settings-progress-item.is-active {
    background: rgba(246, 200, 107, .36);
    box-shadow: inset 0 0 0 2px rgba(232, 139, 58, .2);
}

.pocket-settings-navigation {
    border-top: 1px dashed rgba(111, 74, 47, .2);
    padding-top: 18px;
}

.recipe-dashboard-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    margin-top: 22px;
}

.recipe-dashboard-card {
    display: grid;
    gap: 4px;
    justify-items: center;
    text-align: center;
    padding: 14px 10px;
    border-radius: 20px;
    border: 1px solid var(--pocket-line);
    background: rgba(255, 255, 255, .46);
    color: var(--pocket-brown);
}

.recipe-dashboard-card.is-active {
    background: rgba(220, 236, 203, .55);
    box-shadow: inset 0 0 0 2px rgba(185, 216, 170, .35);
}

.recipe-dashboard-card span {
    font-size: 1.45rem;
}

.recipe-dashboard-card strong {
    font-size: 1.45rem;
    color: var(--pocket-orange);
}

.recipe-dashboard-card small {
    color: var(--pocket-muted);
    font-weight: 800;
}

.recipe-list-grid {
    display: grid;
    gap: 14px;
    position: relative;
    z-index: 1;
}

.recipe-list-card {
    display: grid;
    grid-template-columns: 98px minmax(0, 1fr);
    gap: 14px;
    align-items: center;
    border-radius: 24px;
    border: 1px solid var(--pocket-line);
    background: rgba(255, 255, 255, .52);
    padding: 12px;
    color: var(--pocket-text);
}

.recipe-list-card img,
.recipe-list-placeholder {
    width: 98px;
    height: 86px;
    border-radius: 18px;
    object-fit: cover;
    border: 1px solid rgba(111, 74, 47, .12);
    background: rgba(246, 200, 107, .2);
}

.recipe-list-placeholder {
    display: grid;
    place-items: center;
    font-size: 2.2rem;
}

.recipe-list-card span {
    display: block;
    font-size: .75rem;
    color: var(--pocket-orange);
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .06em;
    margin-bottom: 4px;
}

.recipe-list-card strong {
    display: block;
    color: var(--pocket-brown);
    font-size: 1.05rem;
    margin-bottom: 4px;
}

.recipe-list-card small {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    color: var(--pocket-muted);
    line-height: 1.35;
}

.empty-notebook-card {
    min-height: 420px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 12px;
    border-radius: 28px;
    border: 1px dashed rgba(111, 74, 47, .26);
    background: rgba(255, 255, 255, .38);
    padding: 24px;
}

.empty-notebook-icon {
    font-size: 4rem;
}

.empty-notebook-card h2 {
    margin: 0;
    color: var(--pocket-brown);
}

.empty-notebook-card p {
    margin: 0;
    color: var(--pocket-muted);
    line-height: 1.5;
    max-width: 420px;
}

.pocket-demo-meter {
    display: grid;
    gap: 6px;
    border-radius: 20px;
    padding: 14px;
    margin-bottom: 18px;
    background: rgba(220, 236, 203, .46);
    border: 1px solid rgba(111, 74, 47, .14);
    color: var(--pocket-brown);
}

.pocket-demo-meter div {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.pocket-demo-meter small,
.pocket-device-card small {
    color: var(--pocket-muted);
    line-height: 1.45;
}

.pocket-integration-grid {
    display: grid;
    gap: 12px;
}

.pocket-integration-card {
    padding: 15px;
    border-radius: 20px;
    border: 1px solid var(--pocket-line);
    background: rgba(255, 255, 255, .46);
}

.pocket-integration-card strong {
    color: var(--pocket-brown);
}

.pocket-integration-card p {
    color: var(--pocket-muted);
    line-height: 1.45;
    margin: 8px 0;
}

.pocket-integration-card span {
    color: var(--pocket-orange);
    font-weight: 900;
}

@media (max-width: 920px) {
    .settings-progress,
    .recipe-dashboard-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .recipe-list-card {
        grid-template-columns: 82px minmax(0, 1fr);
    }

    .recipe-list-card img,
    .recipe-list-placeholder {
        width: 82px;
        height: 76px;
    }

    .pocket-settings-navigation .pocket-button {
        width: 100%;
    }
}

@media (max-width: 540px) {
    .settings-progress,
    .recipe-dashboard-grid,
    .pocket-form-row,
    .pocket-form-row-three {
        grid-template-columns: 1fr;
    }

    .recipe-list-card {
        grid-template-columns: 1fr;
    }

    .recipe-list-card img,
    .recipe-list-placeholder {
        width: 100%;
        height: 150px;
    }
}

/* Refinamento visual Rizhort Pocket Croquette - fase livro vivo/avatar */
html, body {
    height: 100%;
    overflow: hidden;
}

body {
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    background:
        radial-gradient(circle at 12% 8%, rgba(246, 200, 107, .28), transparent 28rem),
        radial-gradient(circle at 88% 86%, rgba(185, 216, 170, .36), transparent 30rem),
        linear-gradient(135deg, #fffaf0, #f6dfb8 58%, #f0cf9f);
}

a,
a:visited,
a:hover,
a:focus {
    color: inherit;
    text-decoration: none;
}

.pocket-shell {
    min-height: 100dvh;
    height: 100dvh;
    padding: 18px 0;
    overflow: hidden;
}

.pocket-book {
    width: min(1180px, 100%);
    min-height: min(720px, calc(100dvh - 36px));
    height: min(720px, calc(100dvh - 36px));
    max-height: calc(100dvh - 36px);
    perspective: 1800px;
}

.pocket-page {
    min-height: 0;
    height: 100%;
    padding: clamp(22px, 3.6vw, 42px);
    overflow: hidden;
    background:
        linear-gradient(90deg, rgba(255,255,255,.22), transparent 12%, transparent 88%, rgba(111,74,47,.045)),
        repeating-linear-gradient(to bottom, transparent 0, transparent 35px, rgba(111, 74, 47, .052) 36px),
        radial-gradient(circle at 16% 10%, rgba(255, 255, 255, .55), transparent 17rem),
        linear-gradient(135deg, rgba(255, 250, 239, .98), rgba(255, 238, 203, .98));
}

.pocket-page > * {
    position: relative;
    z-index: 1;
}

.pocket-page::before {
    content: '';
    position: absolute;
    inset: 10px;
    border: 1px solid rgba(111, 74, 47, .08);
    border-radius: inherit;
    pointer-events: none;
}

.pocket-page-left,
.pocket-page-right {
    box-shadow: inset 0 0 42px rgba(111, 74, 47, .045);
}

.pocket-page-left {
    border-radius: 22px 5px 5px 22px;
}

.pocket-page-right {
    border-radius: 5px 22px 22px 5px;
}

.pocket-book::after {
    content: '';
    position: absolute;
    top: 22px;
    bottom: 22px;
    left: 50%;
    width: 34px;
    transform: translateX(-50%);
    background: radial-gradient(ellipse at center, rgba(80, 45, 22, .18), transparent 62%);
    pointer-events: none;
}

.pocket-button,
button.pocket-button,
a.pocket-button {
    border-radius: 12px;
    padding: 12px 18px;
    letter-spacing: .01em;
    text-decoration: none !important;
}

.pocket-button-soft {
    background: rgba(255, 250, 239, .72);
    backdrop-filter: blur(8px);
}

.pocket-mini-card,
.recipe-dashboard-card,
.recipe-list-card,
.settings-progress-item,
.avatar-store-card,
.pocket-integration-card {
    text-decoration: none !important;
}

.pocket-mini-card,
.recipe-dashboard-card,
.avatar-store-card {
    border-radius: 16px;
}

.pocket-page-left,
.pocket-page-right {
    display: flex;
    flex-direction: column;
}

.pocket-form,
.pocket-grid-cards,
.recipe-list-grid,
.avatar-store-grid,
.pocket-integration-grid {
    overflow: auto;
    min-height: 0;
    padding-right: 6px;
}

.pocket-form::-webkit-scrollbar,
.pocket-grid-cards::-webkit-scrollbar,
.recipe-list-grid::-webkit-scrollbar,
.avatar-store-grid::-webkit-scrollbar,
.pocket-integration-grid::-webkit-scrollbar {
    width: 8px;
}

.pocket-form::-webkit-scrollbar-thumb,
.pocket-grid-cards::-webkit-scrollbar-thumb,
.recipe-list-grid::-webkit-scrollbar-thumb,
.avatar-store-grid::-webkit-scrollbar-thumb,
.pocket-integration-grid::-webkit-scrollbar-thumb {
    background: rgba(111, 74, 47, .18);
    border-radius: 20px;
}

.pocket-book-recipe .pocket-page,
.pocket-book-recipe-open .pocket-page {
    animation: pageOpenSoft .38s ease both;
}

.pocket-book-recipe .pocket-page,
.pocket-book-recipe-open .pocket-page-right {
    animation-name: pageTurnSoft;
}

.assistant-stage-image {
    min-height: 320px;
}

.assistant-image-avatar {
    max-height: 350px;
    width: min(240px, 82%);
    object-fit: contain;
    filter: drop-shadow(0 20px 24px rgba(86, 54, 32, .22));
    animation: assistantHumanIdle 4.8s ease-in-out infinite;
    transform-origin: center bottom;
}

.assistant-balloon {
    border-radius: 18px;
    background: rgba(255, 250, 239, .9);
    box-shadow: 0 16px 34px rgba(111, 74, 47, .14);
}

.avatar-choice-preview {
    border-radius: 18px;
}

.avatar-choice-preview img {
    max-height: 190px;
    animation: assistantHumanIdle 5.2s ease-in-out infinite;
}

.pocket-field-grid,
.avatar-store-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.voice-slider {
    display: grid;
    gap: 8px;
}

.voice-slider input[type="range"] {
    width: 100%;
    accent-color: var(--pocket-orange);
}

.avatar-store-grid {
    margin: 20px 0;
}

.avatar-store-card {
    background: rgba(255, 250, 239, .72);
    border: 1px solid var(--pocket-line);
    padding: 18px;
    box-shadow: 0 12px 28px rgba(111, 74, 47, .08);
}

.avatar-store-card span {
    font-size: 2rem;
}

.avatar-store-card h2 {
    margin: 8px 0 6px;
    color: var(--pocket-brown);
    font-size: 1rem;
}

.avatar-store-card p,
.avatar-store-card small {
    color: var(--pocket-muted);
}

.pocket-book-store .pocket-page-left,
.pocket-book-settings .pocket-page-left {
    gap: 10px;
}

.settings-progress {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 4px;
}

@keyframes pageOpenSoft {
    from { opacity: .55; transform: rotateY(-2deg) translateY(4px); }
    to { opacity: 1; transform: rotateY(0) translateY(0); }
}

@keyframes pageTurnSoft {
    from { opacity: .62; transform: rotateY(3deg); }
    to { opacity: 1; transform: rotateY(0); }
}

@keyframes assistantHumanIdle {
    0%, 100% { transform: translateY(0) rotate(-.25deg); }
    35% { transform: translateY(-5px) rotate(.35deg); }
    70% { transform: translateY(-2px) rotate(-.15deg); }
}

@media (max-width: 860px) {
    html, body {
        overflow: hidden;
    }

    .pocket-shell {
        width: min(100% - 18px, 620px);
        overflow: auto;
        padding: 10px 0;
    }

    .pocket-book {
        grid-template-columns: 1fr;
        height: auto;
        min-height: calc(100dvh - 20px);
        max-height: none;
        filter: drop-shadow(0 20px 48px rgba(101, 67, 33, .16));
    }

    .pocket-book::after {
        display: none;
    }

    .pocket-page {
        height: auto;
        min-height: auto;
        max-height: none;
        overflow: visible;
        padding: 22px;
    }

    .pocket-page-left,
    .pocket-page-right {
        border-radius: 18px;
        border: 1px solid var(--pocket-line);
    }

    .pocket-page-right {
        margin-top: 12px;
    }

    .pocket-form,
    .pocket-grid-cards,
    .recipe-list-grid,
    .avatar-store-grid,
    .pocket-integration-grid {
        overflow: visible;
    }

    .pocket-field-grid,
    .avatar-store-grid {
        grid-template-columns: 1fr;
    }

    .assistant-image-avatar {
        max-height: 285px;
    }
}

/* Ajustes da tela inicial - caderno estável, lado direito sem sobreposição e navegação circular */
.pocket-shell {
    width: min(1280px, calc(100% - 24px));
}

.pocket-book {
    width: min(1240px, 100%);
    min-height: min(740px, calc(100dvh - 36px));
    height: min(740px, calc(100dvh - 36px));
}

.pocket-book-home {
    grid-template-columns: minmax(0, 1.04fr) minmax(430px, .96fr);
}

.pocket-book-home .pocket-page {
    padding: clamp(24px, 3.2vw, 40px);
}

.pocket-home-icon-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin: 22px 0;
}

.pocket-home-icon-button,
button.pocket-home-icon-button,
a.pocket-home-icon-button {
    width: 52px;
    height: 52px;
    min-width: 52px;
    min-height: 52px;
    padding: 0;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.35rem;
    position: relative;
    overflow: visible;
}

.pocket-home-icon-button::after {
    content: attr(data-label);
    position: absolute;
    left: 50%;
    bottom: -34px;
    transform: translateX(-50%) translateY(4px);
    opacity: 0;
    pointer-events: none;
    white-space: nowrap;
    border-radius: 10px;
    padding: 7px 10px;
    background: rgba(77, 49, 28, .9);
    color: #fffaf0;
    font-size: .76rem;
    font-weight: 800;
    box-shadow: 0 12px 24px rgba(77, 49, 28, .18);
    transition: opacity .18s ease, transform .18s ease;
    z-index: 30;
}

.pocket-home-icon-button:hover::after,
.pocket-home-icon-button:focus-visible::after {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.pocket-book-home .pocket-page-right {
    gap: 14px;
}

.pocket-book-home .assistant-stage-image {
    min-height: 198px;
    height: 198px;
    flex: 0 0 auto;
    display: grid;
    grid-template-columns: 128px minmax(0, 1fr);
    align-items: center;
    gap: 14px;
    padding: 8px 8px 2px;
}

.pocket-book-home .assistant-image-avatar {
    width: 128px;
    height: 150px;
    max-height: 150px;
    object-fit: cover;
    object-position: top center;
    border-radius: 50% 50% 44% 44%;
    padding: 6px 8px 0;
    background:
        radial-gradient(circle at 50% 18%, rgba(255,255,255,.86), transparent 40%),
        linear-gradient(135deg, rgba(246,200,107,.3), rgba(185,216,170,.24));
    border: 1px solid rgba(111, 74, 47, .14);
    margin: 0;
    filter: drop-shadow(0 14px 18px rgba(86, 54, 32, .16));
}

.pocket-book-home .assistant-balloon {
    max-width: none;
    width: 100%;
    text-align: left;
    padding: 14px 15px;
    line-height: 1.38;
    font-size: .96rem;
    align-self: center;
}

.pocket-book-home .pocket-grid-cards {
    flex: 1 1 auto;
    min-height: 0;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    align-content: start;
    padding: 2px 4px 4px 2px;
    overflow: auto;
}

.pocket-book-home .pocket-mini-card {
    min-height: 96px;
    padding: 13px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.pocket-book-home .pocket-mini-card span {
    margin-bottom: 5px;
}

.pocket-book-home .pocket-mini-card strong {
    line-height: 1.25;
    font-size: .96rem;
}

@media (min-width: 1180px) {
    .pocket-home-icon-actions {
        flex-wrap: nowrap;
    }
}

@media (max-width: 1080px) and (min-width: 861px) {
    .pocket-book-home {
        grid-template-columns: minmax(0, 1fr) minmax(380px, .92fr);
    }

    .pocket-book-home .assistant-stage-image {
        grid-template-columns: 108px minmax(0, 1fr);
    }

    .pocket-book-home .assistant-image-avatar {
        width: 108px;
        height: 132px;
        max-height: 132px;
    }

    .pocket-book-home .pocket-mini-card {
        min-height: 90px;
    }
}

@media (max-width: 860px) {
    .pocket-book {
        width: 100%;
        height: auto;
        min-height: calc(100dvh - 20px);
        max-height: none;
    }

    .pocket-book-home {
        grid-template-columns: 1fr;
    }

    .pocket-home-icon-actions {
        justify-content: center;
    }

    .pocket-home-icon-button,
    button.pocket-home-icon-button,
    a.pocket-home-icon-button {
        width: 50px;
        height: 50px;
        min-width: 50px;
        min-height: 50px;
    }

    .pocket-home-icon-button::after {
        display: none;
    }

    .pocket-book-home .assistant-stage-image {
        height: auto;
        min-height: 160px;
        grid-template-columns: 92px minmax(0, 1fr);
        padding: 6px 0;
    }

    .pocket-book-home .assistant-image-avatar {
        width: 92px;
        height: 112px;
        max-height: 112px;
    }

    .pocket-book-home .pocket-grid-cards {
        grid-template-columns: 1fr;
        overflow: visible;
    }
}


/* Correção Home - botões circulares reais e lado direito sem avatar grande */
.pocket-book-home {
    grid-template-columns: minmax(0, 1.12fr) minmax(360px, .88fr) !important;
}

.pocket-home-orb-nav {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    flex-wrap: nowrap !important;
    gap: 9px !important;
    margin: 20px 0 22px !important;
    padding: 0 !important;
    overflow: visible !important;
}

.pocket-home-orb,
button.pocket-home-orb,
a.pocket-home-orb {
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    max-width: 48px !important;
    min-height: 48px !important;
    max-height: 48px !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 1px solid rgba(111, 74, 47, .18) !important;
    border-radius: 50% !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 48px !important;
    aspect-ratio: 1 / 1 !important;
    line-height: 1 !important;
    font-size: 1.26rem !important;
    color: var(--pocket-brown) !important;
    background:
        radial-gradient(circle at 32% 24%, rgba(255,255,255,.88), transparent 34%),
        linear-gradient(135deg, rgba(255, 250, 239, .96), rgba(246, 200, 107, .42)) !important;
    box-shadow: 0 11px 24px rgba(111, 74, 47, .13) !important;
    cursor: pointer !important;
    text-decoration: none !important;
    position: relative !important;
    overflow: visible !important;
    transition: transform .16s ease, box-shadow .16s ease, background .16s ease !important;
}

.pocket-home-orb:hover,
button.pocket-home-orb:hover,
a.pocket-home-orb:hover,
.pocket-home-orb:focus-visible {
    transform: translateY(-2px) !important;
    box-shadow: 0 15px 30px rgba(111, 74, 47, .18) !important;
    background:
        radial-gradient(circle at 32% 24%, rgba(255,255,255,.92), transparent 34%),
        linear-gradient(135deg, rgba(255, 244, 219, .98), rgba(232, 139, 58, .48)) !important;
}

.pocket-home-orb span {
    display: block !important;
    width: auto !important;
    height: auto !important;
    line-height: 1 !important;
    pointer-events: none !important;
}

.pocket-home-orb::after {
    content: attr(data-label);
    position: absolute;
    left: 50%;
    bottom: -35px;
    transform: translateX(-50%) translateY(4px);
    opacity: 0;
    pointer-events: none;
    white-space: nowrap;
    border-radius: 10px;
    padding: 7px 10px;
    background: rgba(77, 49, 28, .92);
    color: #fffaf0;
    font-size: .76rem;
    font-weight: 800;
    box-shadow: 0 12px 24px rgba(77, 49, 28, .18);
    transition: opacity .18s ease, transform .18s ease;
    z-index: 40;
}

.pocket-home-orb:hover::after,
.pocket-home-orb:focus-visible::after {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.pocket-book-home .pocket-page-right {
    gap: 12px !important;
    justify-content: flex-start !important;
}

.assistant-home-chip {
    flex: 0 0 auto !important;
    display: grid !important;
    grid-template-columns: 76px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 13px !important;
    padding: 12px !important;
    border: 1px solid rgba(111, 74, 47, .12) !important;
    border-radius: 18px !important;
    background:
        radial-gradient(circle at 12% 12%, rgba(255,255,255,.78), transparent 42%),
        linear-gradient(135deg, rgba(255,250,239,.88), rgba(220,236,203,.54)) !important;
    box-shadow: 0 14px 30px rgba(111, 74, 47, .09) !important;
    min-height: 104px !important;
    overflow: hidden !important;
}

.assistant-home-face {
    width: 76px !important;
    height: 76px !important;
    min-width: 76px !important;
    min-height: 76px !important;
    max-width: 76px !important;
    max-height: 76px !important;
    object-fit: cover !important;
    object-position: top center !important;
    border-radius: 50% !important;
    background: linear-gradient(135deg, rgba(246,200,107,.38), rgba(185,216,170,.32)) !important;
    border: 1px solid rgba(111, 74, 47, .16) !important;
    box-shadow: 0 10px 18px rgba(86, 54, 32, .14) !important;
    filter: none !important;
    animation: assistantHumanIdle 5.6s ease-in-out infinite !important;
}

.assistant-home-greeting {
    min-width: 0 !important;
}

.assistant-home-greeting span {
    display: block !important;
    color: var(--pocket-orange) !important;
    font-weight: 900 !important;
    font-size: .82rem !important;
    text-transform: uppercase !important;
    letter-spacing: .06em !important;
    margin-bottom: 2px !important;
}

.assistant-home-greeting strong {
    display: block !important;
    color: var(--pocket-brown) !important;
    font-size: 1.06rem !important;
    line-height: 1.15 !important;
}

.assistant-home-greeting p {
    margin: 5px 0 0 !important;
    color: var(--pocket-muted) !important;
    font-size: .88rem !important;
    line-height: 1.32 !important;
}

.pocket-book-home .assistant-stage-image,
.pocket-book-home .assistant-balloon,
.pocket-book-home .assistant-image-avatar {
    display: none !important;
}

.pocket-book-home .pocket-grid-cards {
    grid-template-columns: 1fr !important;
    gap: 9px !important;
    overflow: auto !important;
    padding-right: 4px !important;
}

.pocket-book-home .pocket-mini-card {
    min-height: 74px !important;
    padding: 12px 14px !important;
    border-radius: 14px !important;
}

.pocket-book-home .pocket-mini-card span {
    margin-bottom: 3px !important;
}

.pocket-book-home .pocket-mini-card strong {
    font-size: .94rem !important;
}

@media (min-width: 1081px) {
    .pocket-home-orb-nav {
        flex-wrap: nowrap !important;
    }
}

@media (max-width: 1080px) and (min-width: 861px) {
    .pocket-book-home {
        grid-template-columns: minmax(0, 1fr) minmax(320px, .82fr) !important;
    }

    .pocket-home-orb,
    button.pocket-home-orb,
    a.pocket-home-orb {
        width: 45px !important;
        height: 45px !important;
        min-width: 45px !important;
        max-width: 45px !important;
        min-height: 45px !important;
        max-height: 45px !important;
        flex-basis: 45px !important;
        font-size: 1.18rem !important;
    }

    .assistant-home-chip {
        grid-template-columns: 64px minmax(0, 1fr) !important;
        min-height: 94px !important;
    }

    .assistant-home-face {
        width: 64px !important;
        height: 64px !important;
        min-width: 64px !important;
        min-height: 64px !important;
        max-width: 64px !important;
        max-height: 64px !important;
    }
}

@media (max-width: 860px) {
    .pocket-home-orb-nav {
        justify-content: center !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
    }

    .pocket-home-orb,
    button.pocket-home-orb,
    a.pocket-home-orb {
        width: 46px !important;
        height: 46px !important;
        min-width: 46px !important;
        max-width: 46px !important;
        min-height: 46px !important;
        max-height: 46px !important;
        flex-basis: 46px !important;
    }

    .pocket-home-orb::after {
        display: none !important;
    }

    .assistant-home-chip {
        grid-template-columns: 64px minmax(0, 1fr) !important;
        min-height: 96px !important;
    }

    .assistant-home-face {
        width: 64px !important;
        height: 64px !important;
        min-width: 64px !important;
        min-height: 64px !important;
        max-width: 64px !important;
        max-height: 64px !important;
    }

    .pocket-book-home .pocket-grid-cards {
        overflow: visible !important;
    }
}

/* Ajuste compacto de páginas internas - títulos, cards, navegação e avatar lateral */
.pocket-page h1 {
    font-size: clamp(1.34rem, 2.15vw, 2.08rem) !important;
    line-height: 1.12 !important;
    margin-bottom: 10px !important;
    max-width: 100% !important;
}

.pocket-page .pocket-lead {
    font-size: clamp(.92rem, 1.18vw, 1rem) !important;
    line-height: 1.42 !important;
    margin-bottom: 14px !important;
}

.pocket-topline {
    margin-bottom: 10px !important;
    font-size: .72rem !important;
}

.pocket-page-left .pocket-actions {
    gap: 8px !important;
    margin: 14px 0 !important;
}

.pocket-page-left .pocket-button,
.pocket-page-left button.pocket-button,
.pocket-page-left a.pocket-button {
    padding: 10px 13px !important;
    font-size: .9rem !important;
}

.pocket-form-section,
.pocket-reference-card,
.pocket-note,
.pocket-demo-meter,
.recipe-dashboard-card,
.recipe-list-card,
.pocket-mini-card,
.pocket-recipe-guide-card,
.pocket-help-card,
.avatar-store-card,
.pocket-integration-card {
    border-radius: 14px !important;
}

.pocket-form-section {
    padding: 14px !important;
    gap: 12px !important;
}

.pocket-section-title {
    gap: 10px !important;
}

.pocket-section-title strong {
    font-size: .98rem !important;
}

.pocket-section-title small {
    font-size: .86rem !important;
    line-height: 1.28 !important;
}

.pocket-kitchen-icon {
    width: 38px !important;
    height: 38px !important;
    border-radius: 12px !important;
    font-size: 1.18rem !important;
}

.pocket-form,
.pocket-search-form,
.recipe-list-grid,
.avatar-store-grid,
.pocket-integration-grid,
.pocket-grid-cards {
    gap: 10px !important;
}

.pocket-form input,
.pocket-form select,
.pocket-search-form input,
.pocket-form textarea {
    border-radius: 12px !important;
    min-height: 43px !important;
    padding: 10px 12px !important;
    font-size: .94rem !important;
}

.pocket-form textarea {
    min-height: 140px !important;
}

.pocket-field-grid,
.pocket-form-row,
.pocket-form-row-three {
    gap: 10px !important;
}

.pocket-reference-card,
.pocket-integration-card,
.avatar-store-card {
    padding: 12px !important;
}

.pocket-reference-card p,
.pocket-integration-card p,
.avatar-store-card p {
    font-size: .9rem !important;
    line-height: 1.32 !important;
}

.recipe-dashboard-grid {
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 8px !important;
    margin-top: 12px !important;
}

.recipe-dashboard-card {
    min-height: 78px !important;
    padding: 10px 8px !important;
}

.recipe-dashboard-card span {
    font-size: 1.22rem !important;
}

.recipe-dashboard-card strong {
    font-size: 1.22rem !important;
}

.recipe-dashboard-card small {
    font-size: .76rem !important;
}

.recipe-list-card {
    grid-template-columns: 82px minmax(0, 1fr) !important;
    gap: 10px !important;
    padding: 10px !important;
}

.recipe-list-card img,
.recipe-list-placeholder {
    width: 82px !important;
    height: 72px !important;
    border-radius: 12px !important;
}

.recipe-list-card strong {
    font-size: .96rem !important;
    line-height: 1.18 !important;
}

.recipe-list-card small {
    -webkit-line-clamp: 2 !important;
    font-size: .84rem !important;
}

.empty-notebook-card {
    min-height: 300px !important;
    padding: 18px !important;
}

.empty-notebook-icon {
    font-size: 3.1rem !important;
}

.empty-notebook-card h2 {
    font-size: 1.16rem !important;
}

.pocket-book-recipes .pocket-page-left,
.pocket-book-store .pocket-page-left,
.pocket-book-settings .pocket-page-left {
    gap: 8px !important;
}

/* Etapas de configurações como esferas, iguais à navegação da Home */
.pocket-settings-step .settings-progress {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 8px !important;
    margin: 12px 0 14px !important;
    padding: 0 0 4px !important;
    overflow-x: auto !important;
}

.pocket-settings-step .settings-progress-item {
    width: 46px !important;
    height: 46px !important;
    min-width: 46px !important;
    max-width: 46px !important;
    min-height: 46px !important;
    max-height: 46px !important;
    flex: 0 0 46px !important;
    border-radius: 50% !important;
    padding: 0 !important;
    gap: 0 !important;
    aspect-ratio: 1 / 1 !important;
    font-size: 1.18rem !important;
    position: relative !important;
    overflow: visible !important;
    background:
        radial-gradient(circle at 32% 24%, rgba(255,255,255,.9), transparent 34%),
        linear-gradient(135deg, rgba(255, 250, 239, .96), rgba(246, 200, 107, .34)) !important;
    box-shadow: 0 10px 22px rgba(111, 74, 47, .11) !important;
}

.pocket-settings-step .settings-progress-item strong {
    display: none !important;
}

.pocket-settings-step .settings-progress-item span {
    line-height: 1 !important;
}

.pocket-settings-step .settings-progress-item.is-active {
    background:
        radial-gradient(circle at 32% 24%, rgba(255,255,255,.92), transparent 34%),
        linear-gradient(135deg, rgba(255, 244, 219, .98), rgba(232, 139, 58, .46)) !important;
    box-shadow: 0 12px 26px rgba(232, 139, 58, .18), inset 0 0 0 2px rgba(232, 139, 58, .2) !important;
}

.pocket-settings-step .settings-progress-item::after {
    content: attr(data-label);
    position: absolute;
    left: 50%;
    bottom: -35px;
    transform: translateX(-50%) translateY(4px);
    opacity: 0;
    pointer-events: none;
    white-space: nowrap;
    border-radius: 10px;
    padding: 7px 10px;
    background: rgba(77, 49, 28, .92);
    color: #fffaf0;
    font-size: .74rem;
    font-weight: 800;
    z-index: 50;
    transition: opacity .18s ease, transform .18s ease;
}

.pocket-settings-step .settings-progress-item:hover::after,
.pocket-settings-step .settings-progress-item:focus-visible::after {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.pocket-settings-navigation {
    gap: 8px !important;
    margin-top: 10px !important;
    padding-top: 12px !important;
}

.pocket-settings-navigation .pocket-button {
    padding: 9px 12px !important;
    font-size: .86rem !important;
}

/* Lado direito das configurações: compacto nas etapas comuns e avatar inteiro na aparência */
.pocket-settings-side {
    gap: 10px !important;
}

.pocket-settings-side .assistant-stage-compact-preview {
    min-height: 122px !important;
    height: 122px !important;
    display: grid !important;
    grid-template-columns: 76px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 8px 0 !important;
}

.pocket-settings-side .assistant-stage-compact-preview .assistant-image-avatar {
    width: 76px !important;
    height: 76px !important;
    max-width: 76px !important;
    max-height: 76px !important;
    object-fit: cover !important;
    object-position: top center !important;
    border-radius: 50% !important;
    padding: 0 !important;
    margin: 0 !important;
    background: linear-gradient(135deg, rgba(246,200,107,.36), rgba(185,216,170,.3)) !important;
    border: 1px solid rgba(111,74,47,.14) !important;
}

.pocket-settings-side .assistant-stage-compact-preview .assistant-balloon {
    width: 100% !important;
    max-width: none !important;
    padding: 12px !important;
    font-size: .88rem !important;
    line-height: 1.32 !important;
    text-align: left !important;
}

.pocket-settings-side .pocket-help-card {
    padding: 12px !important;
}

.pocket-settings-side .pocket-help-card p {
    font-size: .86rem !important;
    line-height: 1.28 !important;
}

.pocket-settings-step-aparencia .pocket-settings-side {
    justify-content: center !important;
    align-items: center !important;
}

.pocket-settings-step-aparencia .assistant-stage-full-preview {
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 12px !important;
}

.pocket-settings-step-aparencia .assistant-stage-full-preview .assistant-image-avatar {
    width: min(78%, 330px) !important;
    max-height: calc(100% - 24px) !important;
    object-fit: contain !important;
}

.avatar-choice-preview {
    grid-template-columns: 82px minmax(0, 1fr) !important;
    padding: 12px !important;
    gap: 12px !important;
}

.avatar-choice-preview img {
    width: 82px !important;
    height: 118px !important;
}

.avatar-choice-preview p {
    font-size: .88rem !important;
}

/* Busca online e criação manual: cards mais leves e sem sensação de largura exagerada */
.pocket-book-recipes .pocket-page-left .pocket-demo-meter,
.pocket-book-recipes .pocket-page-left .pocket-note,
.pocket-book-recipes .pocket-page-left .pocket-form-section,
.pocket-book-recipes .pocket-page-left .pocket-reference-card {
    max-width: 96% !important;
}

.pocket-book-recipes .pocket-page-left .pocket-form-section .pocket-reference-card {
    max-width: 100% !important;
}

.pocket-book-recipes .pocket-page-left .pocket-reference-card .pocket-button {
    width: auto !important;
    display: inline-flex !important;
}

@media (min-width: 861px) {
    .pocket-book:not(.pocket-book-home) {
        grid-template-columns: minmax(0, 1.06fr) minmax(0, .94fr) !important;
    }

    .pocket-book-settings.pocket-settings-step-aparencia {
        grid-template-columns: minmax(0, 1.08fr) minmax(360px, .92fr) !important;
    }
}

@media (max-width: 860px) {
    .pocket-page h1 {
        font-size: clamp(1.22rem, 6vw, 1.62rem) !important;
    }

    .pocket-page .pocket-lead {
        font-size: .92rem !important;
    }

    .recipe-dashboard-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .pocket-settings-step .settings-progress {
        justify-content: center !important;
        flex-wrap: wrap !important;
        overflow: visible !important;
    }

    .pocket-settings-step .settings-progress-item::after {
        display: none !important;
    }

    .pocket-settings-side .assistant-stage-compact-preview {
        height: auto !important;
        min-height: 104px !important;
        grid-template-columns: 64px minmax(0, 1fr) !important;
    }

    .pocket-settings-side .assistant-stage-compact-preview .assistant-image-avatar {
        width: 64px !important;
        height: 64px !important;
        max-width: 64px !important;
        max-height: 64px !important;
    }

    .pocket-settings-step-aparencia .assistant-stage-full-preview .assistant-image-avatar {
        width: min(72%, 240px) !important;
        max-height: 320px !important;
    }
}

/* Ajustes 15 polegadas: equilíbrio entre páginas, avatar lateral completo e receita sem invasão de campos */
@media (min-width: 861px) {
    .pocket-shell {
        width: min(1260px, calc(100% - 20px)) !important;
        padding: 12px 0 !important;
    }

    .pocket-book {
        width: min(1220px, 100%) !important;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
        min-height: min(710px, calc(100dvh - 24px)) !important;
        height: min(710px, calc(100dvh - 24px)) !important;
    }

    .pocket-book-home {
        grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr) !important;
    }

    .pocket-book-settings,
    .pocket-book-settings.pocket-settings-step-aparencia,
    .pocket-book-recipes,
    .pocket-book-store,
    .pocket-book-recipe-open {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    }

    .pocket-page {
        padding: clamp(20px, 2.3vw, 34px) !important;
    }

    .pocket-page-left,
    .pocket-page-right {
        min-width: 0 !important;
    }
}

.pocket-page h1 {
    font-size: clamp(1.22rem, 1.75vw, 1.82rem) !important;
    line-height: 1.14 !important;
}

.pocket-page h2 {
    font-size: clamp(1.05rem, 1.42vw, 1.36rem) !important;
    line-height: 1.18 !important;
    color: var(--pocket-brown);
    margin: 0 0 12px;
}

.pocket-mini-card,
.recipe-dashboard-card,
.recipe-list-card,
.pocket-reference-card,
.pocket-form-section,
.pocket-note,
.pocket-demo-meter,
.pocket-integration-card,
.avatar-store-card,
.pocket-help-card {
    max-width: 100% !important;
}

.pocket-book-recipes .pocket-page-left .pocket-demo-meter,
.pocket-book-recipes .pocket-page-left .pocket-note,
.pocket-book-recipes .pocket-page-left .pocket-form-section,
.pocket-book-recipes .pocket-page-left .pocket-reference-card {
    max-width: 100% !important;
}

.recipe-dashboard-grid,
.pocket-grid-cards,
.recipe-list-grid,
.avatar-store-grid,
.pocket-integration-grid {
    overflow-x: visible !important;
}

/* Botões circulares de etapa sem barra de rolagem quando cabem na linha */
.pocket-settings-step .settings-progress {
    overflow: visible !important;
    overflow-x: visible !important;
    padding-bottom: 0 !important;
    justify-content: flex-start !important;
}

.pocket-settings-step .settings-progress::-webkit-scrollbar {
    display: none !important;
}

@media (max-width: 980px) and (min-width: 861px) {
    .pocket-settings-step .settings-progress-item {
        width: 42px !important;
        height: 42px !important;
        min-width: 42px !important;
        max-width: 42px !important;
        min-height: 42px !important;
        max-height: 42px !important;
        flex-basis: 42px !important;
        font-size: 1.08rem !important;
    }
}

/* Lado direito das configurações: avatar completo sempre, cards limpos embaixo */
.pocket-settings-side {
    display: flex !important;
    flex-direction: column !important;
    gap: 9px !important;
    justify-content: flex-start !important;
    align-items: stretch !important;
}

.pocket-settings-side .assistant-stage-image,
.pocket-settings-side .assistant-stage-full-preview,
.pocket-settings-side .assistant-stage-compact-preview {
    min-height: 0 !important;
    height: auto !important;
    flex: 1 1 auto !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 6px 0 0 !important;
}

.pocket-settings-side .assistant-stage-image .assistant-image-avatar,
.pocket-settings-side .assistant-stage-full-preview .assistant-image-avatar,
.pocket-settings-side .assistant-stage-compact-preview .assistant-image-avatar {
    width: min(74%, 300px) !important;
    height: auto !important;
    max-width: 300px !important;
    max-height: min(430px, calc(100dvh - 290px)) !important;
    object-fit: contain !important;
    object-position: center bottom !important;
    border-radius: 0 !important;
    background: transparent !important;
    border: 0 !important;
    padding: 0 !important;
    margin: 0 auto !important;
    filter: drop-shadow(0 20px 26px rgba(86, 54, 32, .18)) !important;
}

.pocket-settings-side .assistant-balloon-side {
    width: min(100%, 330px) !important;
    margin: 4px auto 0 !important;
    padding: 9px 12px !important;
    font-size: .84rem !important;
    line-height: 1.25 !important;
    text-align: center !important;
}

.pocket-settings-side .pocket-help-card {
    flex: 0 0 auto !important;
    padding: 9px 11px !important;
    margin: 0 !important;
}

.pocket-settings-side .pocket-help-card p {
    margin: 3px 0 0 !important;
    font-size: .8rem !important;
    line-height: 1.2 !important;
}

.pocket-settings-side .pocket-avatar-store-link {
    flex: 0 0 auto !important;
    align-self: stretch !important;
    text-align: center !important;
    padding: 10px 12px !important;
    font-size: .88rem !important;
}

.avatar-choice-preview-text {
    display: block !important;
    grid-template-columns: none !important;
    padding: 11px 13px !important;
}

.avatar-choice-preview-text img,
.avatar-choice-preview img[data-avatar-preview-image] {
    display: none !important;
}

/* Receita aberta: referência e botões vão para o verso da página esquerda */
.pocket-book-recipe-open {
    position: relative;
}

.pocket-recipe-page-cover {
    display: block !important;
}

.recipe-page-face {
    position: absolute;
    inset: clamp(18px, 2.3vw, 34px);
    display: flex;
    flex-direction: column;
    min-height: 0;
    opacity: 1;
    transform: translateX(0);
    transition: opacity .28s ease, transform .28s ease;
}

.recipe-page-face-back {
    opacity: 0;
    pointer-events: none;
    transform: translateX(18px);
}

.pocket-book-recipe-open.is-showing-reference .recipe-page-face-front {
    opacity: 0;
    pointer-events: none;
    transform: translateX(-18px);
}

.pocket-book-recipe-open.is-showing-reference .recipe-page-face-back {
    opacity: 1;
    pointer-events: auto;
    transform: translateX(0);
}

.pocket-recipe-page-cover .recipe-cover-frame {
    margin: 10px 0 12px !important;
}

.pocket-recipe-page-cover .recipe-cover-frame img,
.pocket-recipe-page-cover .recipe-cover-placeholder {
    height: min(245px, 32vh) !important;
}

.pocket-recipe-page-cover .recipe-meta-grid {
    margin: 10px 0 14px !important;
}

.pocket-recipe-page-cover .recipe-meta-grid div {
    padding: 10px !important;
}

.pocket-recipe-page-preparo {
    display: flex !important;
    flex-direction: column !important;
    min-height: 0 !important;
}

.pocket-recipe-page-preparo .recipe-description {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: hidden !important;
    padding: 16px 18px !important;
    line-height: 1.58 !important;
    font-size: .95rem !important;
}

.recipe-reference-box-standalone {
    margin-top: 0 !important;
    flex: 0 0 auto !important;
}

.recipe-reference-actions {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 9px !important;
    margin: 14px 0 !important;
}

.recipe-reference-actions .pocket-button {
    justify-content: center !important;
    text-align: center !important;
    padding: 10px 12px !important;
    font-size: .88rem !important;
}

.recipe-page-face-back > .pocket-button {
    margin-top: auto !important;
    align-self: flex-start !important;
}

@media (max-width: 860px) {
    .recipe-page-face {
        position: relative !important;
        inset: auto !important;
    }

    .recipe-page-face-back {
        display: none !important;
    }

    .pocket-book-recipe-open.is-showing-reference .recipe-page-face-front {
        display: none !important;
    }

    .pocket-book-recipe-open.is-showing-reference .recipe-page-face-back {
        display: flex !important;
    }

    .recipe-reference-actions {
        grid-template-columns: 1fr !important;
    }

    .pocket-settings-side .assistant-stage-image .assistant-image-avatar,
    .pocket-settings-side .assistant-stage-full-preview .assistant-image-avatar,
    .pocket-settings-side .assistant-stage-compact-preview .assistant-image-avatar {
        width: min(62%, 230px) !important;
        max-height: 300px !important;
    }
}

/* Correção final de proporção do livro - páginas rigorosamente iguais em desktop/notebook */
@media (min-width: 861px) {
    .pocket-book,
    .pocket-book-home,
    .pocket-book-recipes,
    .pocket-book-settings,
    .pocket-book-store,
    .pocket-book-recipe,
    .pocket-book-recipe-open,
    .pocket-book-settings.pocket-settings-step-aparencia {
        display: grid !important;
        grid-template-columns: minmax(0, 50%) minmax(0, 50%) !important;
        width: min(1220px, 100%) !important;
        max-width: 1220px !important;
    }

    .pocket-page-left,
    .pocket-page-right {
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        flex: none !important;
    }

    .pocket-page-left > *,
    .pocket-page-right > * {
        max-width: 100% !important;
    }
}

/* Cards internos mais proporcionais: não devem parecer maiores que a própria página */
@media (min-width: 861px) {
    .pocket-page-left .pocket-form-section,
    .pocket-page-left .pocket-note,
    .pocket-page-left .pocket-demo-meter,
    .pocket-page-left .pocket-reference-card,
    .pocket-page-left .pocket-recipe-guide-card,
    .pocket-page-left .pocket-help-card,
    .pocket-page-left .pocket-integration-card,
    .pocket-page-left .avatar-store-card,
    .pocket-page-left .empty-notebook-card {
        width: min(100%, 460px) !important;
        max-width: 460px !important;
    }

    .pocket-page-left .recipe-list-card {
        width: min(100%, 470px) !important;
        max-width: 470px !important;
    }

    .pocket-page-left .recipe-dashboard-grid,
    .pocket-page-left .pocket-grid-cards,
    .pocket-page-left .recipe-list-grid,
    .pocket-page-left .pocket-integration-grid,
    .pocket-page-left .avatar-store-grid {
        width: min(100%, 470px) !important;
        max-width: 470px !important;
        align-self: flex-start !important;
    }

    .pocket-page-left .pocket-form,
    .pocket-page-left .pocket-search-form {
        width: min(100%, 470px) !important;
        max-width: 470px !important;
        align-self: flex-start !important;
    }

    .pocket-page-left .recipe-dashboard-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    }

    .pocket-page-left .pocket-grid-cards {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .pocket-book-home .pocket-grid-cards {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

/* A página direita pode usar a largura inteira para o avatar/livro sem distorcer o lado esquerdo */
@media (min-width: 861px) {
    .pocket-page-right .assistant-stage-image,
    .pocket-page-right .assistant-stage-full-preview,
    .pocket-page-right .assistant-stage-compact-preview,
    .pocket-page-right .pocket-help-card,
    .pocket-page-right .pocket-avatar-store-link,
    .pocket-page-right .recipe-description,
    .pocket-page-right .pocket-reference-card,
    .pocket-page-right .pocket-recipe-guide-card {
        width: 100% !important;
        max-width: 100% !important;
    }
}

/* Correção estrutural do caderno: remover sombra dupla e padronizar todas as páginas pelo visual da tela inicial */
@media (min-width: 861px) {
    .pocket-book,
    .pocket-book-home,
    .pocket-book-recipes,
    .pocket-book-settings,
    .pocket-book-store,
    .pocket-book-recipe,
    .pocket-book-recipe-open,
    .pocket-book-settings.pocket-settings-step-aparencia {
        position: relative !important;
        isolation: isolate !important;
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 0 !important;
        column-gap: 0 !important;
        width: min(1220px, 100%) !important;
        max-width: 1220px !important;
        overflow: visible !important;
    }

    .pocket-page,
    .pocket-page-left,
    .pocket-page-right {
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        height: 100% !important;
        margin: 0 !important;
        transform: none !important;
        box-shadow: inset 0 0 42px rgba(111, 74, 47, .042) !important;
    }

    .pocket-page-left {
        border-radius: 22px 5px 5px 22px !important;
        border-right: 0 !important;
    }

    .pocket-page-right {
        border-radius: 5px 22px 22px 5px !important;
        border-left: 0 !important;
    }

    .pocket-page-left::after,
    .pocket-page-right::before {
        content: none !important;
        display: none !important;
        width: 0 !important;
        background: none !important;
        box-shadow: none !important;
    }

    .pocket-book::after,
    .pocket-book-home::after,
    .pocket-book-recipes::after,
    .pocket-book-settings::after,
    .pocket-book-store::after,
    .pocket-book-recipe::after,
    .pocket-book-recipe-open::after {
        content: '' !important;
        position: absolute !important;
        top: 22px !important;
        bottom: 22px !important;
        left: 50% !important;
        width: 30px !important;
        transform: translateX(-50%) !important;
        pointer-events: none !important;
        z-index: 3 !important;
        opacity: 1 !important;
        background: radial-gradient(ellipse at center, rgba(80, 45, 22, .18), rgba(80, 45, 22, .07) 34%, transparent 68%) !important;
    }

    .pocket-book-recipe-open.is-showing-reference::after,
    .pocket-book-recipe-open.is-turning::after {
        background: radial-gradient(ellipse at center, rgba(80, 45, 22, .18), rgba(80, 45, 22, .07) 34%, transparent 68%) !important;
        animation: none !important;
    }
}

/* Correção definitiva: todas as telas usam exatamente a mesma estrutura visual da tela inicial */
@media (min-width: 861px) {
    .pocket-shell {
        width: min(1260px, calc(100% - 20px)) !important;
        height: 100dvh !important;
        min-height: 100dvh !important;
        padding: 12px 0 !important;
        overflow: hidden !important;
    }

    .pocket-book,
    .pocket-book-home,
    .pocket-book-recipes,
    .pocket-book-settings,
    .pocket-book-store,
    .pocket-book-recipe,
    .pocket-book-recipe-open,
    .pocket-book-settings.pocket-settings-step-aparencia {
        display: flex !important;
        flex-direction: row !important;
        grid-template-columns: none !important;
        gap: 0 !important;
        column-gap: 0 !important;
        width: min(1220px, 100%) !important;
        max-width: 1220px !important;
        height: min(710px, calc(100dvh - 24px)) !important;
        min-height: min(710px, calc(100dvh - 24px)) !important;
        max-height: calc(100dvh - 24px) !important;
        position: relative !important;
        overflow: visible !important;
        filter: drop-shadow(0 32px 70px rgba(101, 67, 33, .18)) !important;
    }

    .pocket-page,
    .pocket-page-left,
    .pocket-page-right,
    .pocket-book-home .pocket-page,
    .pocket-book-home .pocket-page-left,
    .pocket-book-home .pocket-page-right {
        flex: 0 0 50% !important;
        width: 50% !important;
        min-width: 0 !important;
        max-width: 50% !important;
        height: 100% !important;
        min-height: 0 !important;
        max-height: 100% !important;
        margin: 0 !important;
        padding: clamp(20px, 2.25vw, 32px) !important;
        box-shadow: none !important;
        transform: none !important;
        overflow: hidden !important;
        border: 1px solid var(--pocket-line) !important;
        background:
            repeating-linear-gradient(to bottom, transparent 0, transparent 35px, rgba(111, 74, 47, .052) 36px),
            radial-gradient(circle at 16% 10%, rgba(255, 255, 255, .55), transparent 17rem),
            linear-gradient(135deg, rgba(255, 250, 239, .98), rgba(255, 238, 203, .98)) !important;
    }

    .pocket-page-left,
    .pocket-book-home .pocket-page-left {
        border-radius: 22px 5px 5px 22px !important;
        border-right: 0 !important;
    }

    .pocket-page-right,
    .pocket-book-home .pocket-page-right {
        border-radius: 5px 22px 22px 5px !important;
        border-left: 0 !important;
    }

    .pocket-page::before,
    .pocket-page-left::after,
    .pocket-page-right::before {
        content: none !important;
        display: none !important;
    }

    .pocket-book::after,
    .pocket-book-home::after,
    .pocket-book-recipes::after,
    .pocket-book-settings::after,
    .pocket-book-store::after,
    .pocket-book-recipe::after,
    .pocket-book-recipe-open::after {
        content: '' !important;
        position: absolute !important;
        top: 22px !important;
        bottom: 22px !important;
        left: 50% !important;
        width: 26px !important;
        transform: translateX(-50%) !important;
        background: radial-gradient(ellipse at center, rgba(80, 45, 22, .18), rgba(80, 45, 22, .06) 34%, transparent 70%) !important;
        pointer-events: none !important;
        z-index: 5 !important;
        opacity: 1 !important;
        animation: none !important;
    }

    .pocket-page h1 {
        font-size: clamp(1.2rem, 1.65vw, 1.72rem) !important;
    }

    .pocket-page .pocket-lead {
        font-size: .92rem !important;
        line-height: 1.35 !important;
        margin-bottom: 12px !important;
    }

    .pocket-page-left .pocket-form,
    .pocket-page-left .pocket-search-form,
    .pocket-page-left .recipe-dashboard-grid,
    .pocket-page-left .pocket-grid-cards,
    .pocket-page-left .recipe-list-grid,
    .pocket-page-left .avatar-store-grid,
    .pocket-page-left .pocket-integration-grid,
    .pocket-page-left .pocket-form-section,
    .pocket-page-left .pocket-note,
    .pocket-page-left .pocket-demo-meter,
    .pocket-page-left .pocket-reference-card,
    .pocket-page-left .pocket-recipe-guide-card,
    .pocket-page-left .pocket-help-card,
    .pocket-page-left .empty-notebook-card {
        width: min(100%, 455px) !important;
        max-width: 455px !important;
        align-self: flex-start !important;
    }

    .pocket-book-home .pocket-page-left .pocket-note,
    .pocket-book-home .pocket-page-left .pocket-home-orb-nav {
        width: 100% !important;
        max-width: 100% !important;
    }

    .pocket-page-right .recipe-description,
    .pocket-page-right .recipe-page-face,
    .pocket-page-right .assistant-stage-image,
    .pocket-page-right .assistant-stage-full-preview,
    .pocket-page-right .assistant-stage-compact-preview,
    .pocket-page-right .empty-notebook-card,
    .pocket-page-right .recipe-list-grid,
    .pocket-page-right .pocket-grid-cards,
    .pocket-page-right .pocket-help-card {
        width: 100% !important;
        max-width: 100% !important;
    }

    .pocket-settings-step .settings-progress {
        overflow: visible !important;
        overflow-x: visible !important;
        padding: 0 !important;
    }

    .pocket-book-recipe-open.is-showing-reference::after,
    .pocket-book-recipe-open.is-turning::after {
        background: radial-gradient(ellipse at center, rgba(80, 45, 22, .18), rgba(80, 45, 22, .06) 34%, transparent 70%) !important;
        animation: none !important;
    }
}

/* Receita aberta: quando a página vira, os dois lados mudam como em um caderno real */
.recipe-page-face-right-back {
    opacity: 0;
    pointer-events: none;
    transform: translateX(18px);
}

.pocket-book-recipe-open.is-showing-reference .recipe-page-face-right-front {
    opacity: 0;
    pointer-events: none;
    transform: translateX(-18px);
}

.pocket-book-recipe-open.is-showing-reference .recipe-page-face-right-back {
    opacity: 1;
    pointer-events: auto;
    transform: translateX(0);
}

.reference-next-page-card {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 0;
    padding: 18px;
    border-radius: 18px;
    border: 1px solid var(--pocket-line);
    background: rgba(255, 255, 255, .42);
    color: var(--pocket-brown);
    line-height: 1.5;
}

.reference-next-page-card p {
    color: var(--pocket-muted);
    margin: 8px 0 0;
}


/* Ajuste pós-padronização das páginas:
   agora que o caderno está realmente 50% / 50%, os cards do lado esquerdo podem voltar a usar a largura útil da página. */
@media (min-width: 861px) {
    .pocket-page-left .pocket-form,
    .pocket-page-left .pocket-search-form,
    .pocket-page-left .recipe-dashboard-grid,
    .pocket-page-left .pocket-grid-cards,
    .pocket-page-left .recipe-list-grid,
    .pocket-page-left .avatar-store-grid,
    .pocket-page-left .pocket-integration-grid,
    .pocket-page-left .pocket-form-section,
    .pocket-page-left .pocket-note,
    .pocket-page-left .pocket-demo-meter,
    .pocket-page-left .pocket-reference-card,
    .pocket-page-left .pocket-recipe-guide-card,
    .pocket-page-left .pocket-help-card,
    .pocket-page-left .empty-notebook-card,
    .pocket-page-left .recipe-list-card {
        width: 100% !important;
        max-width: 100% !important;
        align-self: stretch !important;
    }

    .pocket-page-left .pocket-grid-cards,
    .pocket-page-left .recipe-list-grid,
    .pocket-page-left .avatar-store-grid,
    .pocket-page-left .pocket-integration-grid {
        justify-self: stretch !important;
    }

    .pocket-page-left .pocket-mini-card,
    .pocket-page-left .recipe-list-card,
    .pocket-page-left .pocket-form-section,
    .pocket-page-left .pocket-help-card,
    .pocket-page-left .pocket-integration-card,
    .pocket-page-left .avatar-store-card {
        max-width: 100% !important;
    }

    .pocket-page-left .recipe-dashboard-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    }

    .pocket-page-left .pocket-grid-cards,
    .pocket-page-left .avatar-store-grid,
    .pocket-page-left .pocket-integration-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

/* Editor de avatar estilo jogo / The Sims */
.pocket-avatar-editor-panel {
    gap: 14px;
}

.avatar-editor-colors {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.avatar-color-field {
    border: 1px solid rgba(111, 74, 47, .14);
    background: rgba(255, 255, 255, .46);
    border-radius: 18px;
    padding: 12px;
}

.avatar-color-header {
    display: grid;
    gap: 2px;
    margin-bottom: 10px;
    color: var(--pocket-brown);
}

.avatar-color-header small {
    color: var(--pocket-muted);
    line-height: 1.25;
}

.avatar-color-palette {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.avatar-color-swatch {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, .92);
    background: var(--swatch);
    cursor: pointer;
    box-shadow: 0 5px 12px rgba(111, 74, 47, .18), inset 0 0 0 1px rgba(111, 74, 47, .18);
    transition: transform .18s ease, box-shadow .18s ease;
}

.avatar-color-swatch:hover,
.avatar-color-swatch.is-selected {
    transform: translateY(-2px) scale(1.08);
    box-shadow: 0 0 0 3px rgba(232, 139, 58, .24), 0 7px 15px rgba(111, 74, 47, .2), inset 0 0 0 1px rgba(111, 74, 47, .18);
}

.avatar-game-sliders {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, .9fr);
    gap: 12px;
}

.avatar-range-field {
    border: 1px solid rgba(111, 74, 47, .14);
    border-radius: 18px;
    padding: 12px;
    background: rgba(255, 255, 255, .46);
}

.avatar-range-field input[type="range"] {
    padding: 0;
    min-height: 28px;
    accent-color: var(--pocket-orange);
}

.avatar-range-field small {
    display: flex;
    justify-content: space-between;
    color: var(--pocket-muted);
    font-weight: 700;
}

.avatar-game-stage {
    width: min(100%, 360px);
    min-height: 520px;
    margin: 0 auto;
    position: relative;
    display: grid;
    place-items: center;
    --avatar-skin: #dca979;
    --avatar-hair: #5a3828;
    --avatar-eye: #b3762e;
    --avatar-outfit: #f6c86b;
    --avatar-build: 50;
}

.avatar-sim-character {
    width: 220px;
    height: 460px;
    position: relative;
    animation: assistantFloat 3.4s ease-in-out infinite;
    filter: drop-shadow(0 22px 24px rgba(111, 74, 47, .2));
}

.avatar-sim-shadow {
    position: absolute;
    width: 160px;
    height: 24px;
    left: 30px;
    bottom: 0;
    border-radius: 50%;
    background: rgba(111, 74, 47, .16);
    filter: blur(3px);
}

.avatar-sim-head {
    position: absolute;
    width: 92px;
    height: 108px;
    left: 64px;
    top: 68px;
    border-radius: 48% 48% 45% 45%;
    background: radial-gradient(circle at 34% 28%, rgba(255,255,255,.32), transparent 24px), var(--avatar-skin);
    box-shadow: inset 0 -9px 0 rgba(111, 74, 47, .08);
    z-index: 4;
}

.avatar-sim-hair {
    position: absolute;
    width: 108px;
    height: 94px;
    left: 56px;
    top: 45px;
    background: var(--avatar-hair);
    border-radius: 54px 54px 34px 34px;
    z-index: 5;
    box-shadow: inset 12px -5px 0 rgba(255,255,255,.08);
}

.avatar-sim-hair::after {
    content: '';
    position: absolute;
    left: 16px;
    top: 56px;
    width: 76px;
    height: 42px;
    background: var(--avatar-hair);
    border-radius: 0 0 42px 42px;
}

.avatar-hair-curto { height: 78px; border-radius: 58px 58px 28px 28px; }
.avatar-hair-medio { height: 98px; }
.avatar-hair-longo { height: 154px; border-radius: 58px 58px 48px 48px; }
.avatar-hair-cacheado { border-radius: 45% 55% 42% 50%; box-shadow: 0 0 0 10px rgba(0,0,0,.03), inset 10px -4px 0 rgba(255,255,255,.08); }
.avatar-hair-raspado { height: 54px; top: 58px; opacity: .95; }
.avatar-hair-coque::before { content: ''; position: absolute; width: 54px; height: 54px; left: 27px; top: -32px; border-radius: 50%; background: var(--avatar-hair); }

.avatar-sim-ear {
    position: absolute;
    width: 18px;
    height: 27px;
    top: 42px;
    background: var(--avatar-skin);
    border-radius: 50%;
    z-index: -1;
}
.avatar-sim-ear-left { left: -10px; }
.avatar-sim-ear-right { right: -10px; }

.avatar-sim-eye {
    position: absolute;
    top: 44px;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background: var(--avatar-eye);
    box-shadow: inset 3px 2px 0 rgba(255,255,255,.38);
}
.avatar-sim-eye-left { left: 25px; }
.avatar-sim-eye-right { right: 25px; }
.avatar-eyes-redondo .avatar-sim-eye { width: 15px; height: 15px; }
.avatar-eyes-oriental .avatar-sim-eye { width: 18px; height: 7px; border-radius: 999px; transform: rotate(-8deg); }
.avatar-eyes-sereno .avatar-sim-eye { width: 18px; height: 4px; border-radius: 999px; box-shadow: none; }

.avatar-sim-nose {
    position: absolute;
    left: 44px;
    top: 58px;
    width: 7px;
    height: 17px;
    border-radius: 999px;
    background: rgba(111, 74, 47, .18);
}
.avatar-nose-delicado .avatar-sim-nose { height: 12px; width: 5px; left: 45px; }
.avatar-nose-marcante .avatar-sim-nose { height: 21px; width: 9px; left: 43px; }

.avatar-sim-mouth {
    position: absolute;
    left: 36px;
    top: 80px;
    width: 22px;
    height: 8px;
    border-bottom: 3px solid rgba(111, 74, 47, .48);
    border-radius: 0 0 20px 20px;
}

.avatar-sim-neck {
    position: absolute;
    width: 32px;
    height: 35px;
    left: 94px;
    top: 160px;
    background: var(--avatar-skin);
    border-radius: 12px;
    z-index: 2;
}

.avatar-sim-body {
    position: absolute;
    width: calc(104px + (var(--avatar-build) * .36px));
    height: 155px;
    left: calc(58px - (var(--avatar-build) * .18px));
    top: 188px;
    border-radius: 34px 34px 24px 24px;
    background: linear-gradient(135deg, #fffaf0, var(--avatar-outfit));
    border: 2px solid rgba(111, 74, 47, .12);
    z-index: 3;
}

.avatar-torso-leve { transform: scaleX(.9); }
.avatar-torso-forte { transform: scaleX(1.08); }

.avatar-sim-apron {
    position: absolute;
    width: 58%;
    height: 112px;
    left: 21%;
    top: 35px;
    border-radius: 16px 16px 22px 22px;
    background: rgba(255, 255, 255, .64);
    border: 1px solid rgba(111, 74, 47, .14);
}
.avatar-sim-apron::after { content: '🥄'; position: absolute; left: 50%; top: 38px; transform: translateX(-50%); }

.avatar-sim-waist {
    position: absolute;
    width: 86px;
    height: 28px;
    left: 67px;
    top: 328px;
    border-radius: 999px;
    background: rgba(111, 74, 47, .16);
    z-index: 2;
}

.avatar-sim-arm {
    position: absolute;
    width: 25px;
    height: 134px;
    top: 202px;
    border-radius: 999px;
    background: var(--avatar-skin);
    z-index: 2;
}
.avatar-sim-arm-left { left: 38px; transform: rotate(9deg); }
.avatar-sim-arm-right { right: 38px; transform: rotate(-18deg); transform-origin: top; animation: assistantWave 3s ease-in-out infinite; }

.avatar-sim-hand {
    position: absolute;
    width: 28px;
    height: 28px;
    top: 325px;
    border-radius: 50%;
    background: var(--avatar-skin);
    z-index: 3;
}
.avatar-sim-hand-left { left: 30px; }
.avatar-sim-hand-right { right: 27px; }

.avatar-sim-leg {
    position: absolute;
    width: 32px;
    height: 94px;
    top: 346px;
    border-radius: 999px;
    background: linear-gradient(to bottom, var(--avatar-outfit), rgba(111, 74, 47, .18));
    z-index: 1;
}
.avatar-sim-leg-left { left: 76px; }
.avatar-sim-leg-right { right: 76px; }

.avatar-sim-foot {
    position: absolute;
    width: 42px;
    height: 18px;
    top: 432px;
    border-radius: 999px;
    background: #6f4a2f;
    z-index: 2;
}
.avatar-sim-foot-left { left: 62px; }
.avatar-sim-foot-right { right: 62px; }

.avatar-click-zone {
    position: absolute;
    z-index: 12;
    border: 1px dashed rgba(232, 139, 58, .0);
    background: rgba(246, 200, 107, .0);
    border-radius: 999px;
    cursor: pointer;
    transition: background .18s ease, border-color .18s ease;
}
.avatar-click-zone:hover,
.avatar-click-zone:focus-visible {
    background: rgba(246, 200, 107, .2);
    border-color: rgba(232, 139, 58, .48);
    outline: none;
}
.avatar-zone-hair { left: 115px; top: 52px; width: 130px; height: 96px; }
.avatar-zone-eyes { left: 137px; top: 128px; width: 88px; height: 38px; }
.avatar-zone-nose { left: 164px; top: 155px; width: 34px; height: 38px; }
.avatar-zone-ears { left: 104px; top: 120px; width: 152px; height: 58px; }
.avatar-zone-torso { left: 106px; top: 218px; width: 150px; height: 118px; }
.avatar-zone-outfit { left: 116px; top: 228px; width: 130px; height: 126px; }
.avatar-zone-waist { left: 125px; top: 348px; width: 110px; height: 44px; }
.avatar-zone-arms { left: 70px; top: 225px; width: 224px; height: 130px; }
.avatar-zone-hands { left: 62px; top: 336px; width: 236px; height: 54px; }
.avatar-zone-legs { left: 120px; top: 382px; width: 118px; height: 86px; }
.avatar-zone-feet { left: 110px; top: 455px; width: 142px; height: 42px; }

.avatar-game-hint {
    position: absolute;
    left: 50%;
    bottom: 8px;
    transform: translateX(-50%);
    width: min(290px, 95%);
    text-align: center;
    color: var(--pocket-muted);
    font-weight: 800;
    font-size: .86rem;
    background: rgba(255,255,255,.55);
    border: 1px solid rgba(111, 74, 47, .1);
    border-radius: 999px;
    padding: 8px 10px;
}

.avatar-part-modal[hidden] { display: none; }
.avatar-part-modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: grid;
    place-items: center;
    padding: 18px;
}
.avatar-part-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(63, 51, 40, .32);
    backdrop-filter: blur(4px);
}
.avatar-part-modal-card {
    position: relative;
    width: min(560px, 100%);
    max-height: min(720px, calc(100vh - 36px));
    overflow: auto;
    background:
        repeating-linear-gradient(to bottom, transparent 0, transparent 35px, rgba(111, 74, 47, .045) 36px),
        linear-gradient(135deg, rgba(255, 250, 239, .98), rgba(255, 241, 210, .98));
    border: 1px solid var(--pocket-line);
    border-radius: 28px;
    box-shadow: 0 30px 80px rgba(63, 51, 40, .32);
    padding: 28px;
}
.avatar-part-modal-card h2 { margin: 0 0 8px; color: var(--pocket-brown); }
.avatar-part-modal-card p { margin: 0 0 18px; color: var(--pocket-muted); line-height: 1.45; }
.avatar-part-modal-close {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 1px solid var(--pocket-line);
    background: rgba(255,255,255,.7);
    color: var(--pocket-brown);
    font-size: 1.4rem;
    cursor: pointer;
}
.avatar-part-options {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}
.avatar-part-option {
    min-height: 92px;
    border: 1px solid rgba(111, 74, 47, .14);
    border-radius: 18px;
    background: rgba(255,255,255,.58);
    display: grid;
    place-items: center;
    gap: 4px;
    color: var(--pocket-brown);
    cursor: pointer;
    font: inherit;
    transition: transform .18s ease, box-shadow .18s ease;
}
.avatar-part-option:hover { transform: translateY(-2px); box-shadow: 0 14px 24px rgba(111, 74, 47, .12); }
.avatar-part-option span { font-size: 1.8rem; }
.avatar-part-option strong { font-size: .95rem; }

/* Caderno mais realista sem alterar a proporção validada */
.pocket-book {
    perspective: 1600px;
}

.pocket-page {
    box-shadow: inset 0 0 38px rgba(111, 74, 47, .05), inset 0 1px 0 rgba(255,255,255,.62);
}

.pocket-page-left {
    background:
        radial-gradient(circle at 18% 14%, rgba(255,255,255,.7), transparent 9rem),
        repeating-linear-gradient(to bottom, transparent 0, transparent 35px, rgba(111, 74, 47, .045) 36px),
        linear-gradient(100deg, rgba(255, 250, 239, .98), rgba(255, 241, 210, .96));
}

.pocket-page-right {
    background:
        radial-gradient(circle at 78% 12%, rgba(255,255,255,.62), transparent 10rem),
        repeating-linear-gradient(to bottom, transparent 0, transparent 35px, rgba(111, 74, 47, .04) 36px),
        linear-gradient(82deg, rgba(255, 248, 234, .96), rgba(220, 236, 203, .72));
}

@media (max-width: 920px) {
    .avatar-editor-colors,
    .avatar-game-sliders,
    .avatar-part-options {
        grid-template-columns: 1fr;
    }

    .avatar-game-stage {
        min-height: 480px;
        transform: scale(.92);
        transform-origin: top center;
    }
}



/* =========================================================
   Pocket Croquette - refinamento visual do caderno e avatar
   Avatar com base mais definida e caderno mais realista.
   ========================================================= */

@media (min-width: 861px) {
    .pocket-book,
    .pocket-book-home,
    .pocket-book-recipes,
    .pocket-book-settings,
    .pocket-book-store,
    .pocket-book-recipe,
    .pocket-book-recipe-open {
        background:
            linear-gradient(90deg, rgba(102, 63, 31, .18), transparent 2.2%, transparent 97.8%, rgba(102, 63, 31, .16)),
            linear-gradient(90deg, rgba(255, 244, 217, .92), rgba(255, 250, 238, .98) 49%, rgba(94, 55, 25, .16) 50%, rgba(255, 250, 238, .98) 51%, rgba(255, 244, 217, .94));
        border-radius: 24px;
        padding: 0 !important;
    }

    .pocket-page,
    .pocket-page-left,
    .pocket-page-right {
        background:
            radial-gradient(circle at 14% 9%, rgba(255,255,255,.62), transparent 13rem),
            linear-gradient(90deg, rgba(111, 74, 47, .03), transparent 8%, transparent 92%, rgba(111, 74, 47, .035)),
            repeating-linear-gradient(to bottom, transparent 0, transparent 34px, rgba(111, 74, 47, .045) 35px),
            linear-gradient(135deg, rgba(255, 251, 241, .99), rgba(255, 239, 205, .98)) !important;
    }

    .pocket-page-left {
        box-shadow:
            inset -18px 0 26px rgba(98, 58, 29, .085),
            inset 1px 0 0 rgba(255,255,255,.72) !important;
    }

    .pocket-page-right {
        box-shadow:
            inset 18px 0 26px rgba(98, 58, 29, .085),
            inset -1px 0 0 rgba(255,255,255,.72) !important;
    }

    .pocket-book::after,
    .pocket-book-home::after,
    .pocket-book-recipes::after,
    .pocket-book-settings::after,
    .pocket-book-store::after,
    .pocket-book-recipe::after,
    .pocket-book-recipe-open::after {
        width: 34px !important;
        top: 18px !important;
        bottom: 18px !important;
        background:
            linear-gradient(90deg, transparent, rgba(74, 43, 20, .2) 44%, rgba(255,255,255,.42) 50%, rgba(74, 43, 20, .16) 56%, transparent),
            radial-gradient(ellipse at center, rgba(80, 45, 22, .16), rgba(80, 45, 22, .065) 38%, transparent 72%) !important;
    }

    .pocket-page-left::before,
    .pocket-page-right::after {
        content: '' !important;
        position: absolute !important;
        top: 18px !important;
        bottom: 18px !important;
        width: 12px !important;
        pointer-events: none !important;
        opacity: .65 !important;
        display: block !important;
    }

    .pocket-page-left::before {
        left: 9px !important;
        background: linear-gradient(90deg, rgba(111,74,47,.09), transparent) !important;
    }

    .pocket-page-right::after {
        right: 9px !important;
        background: linear-gradient(270deg, rgba(111,74,47,.08), transparent) !important;
    }
}

.pocket-page h1 {
    letter-spacing: .01em;
}

.pocket-mini-card,
.recipe-list-card,
.pocket-form-section,
.pocket-help-card,
.pocket-integration-card,
.avatar-store-card,
.empty-notebook-card {
    box-shadow: 0 10px 24px rgba(111, 74, 47, .07), inset 0 1px 0 rgba(255,255,255,.62);
}

/* Avatar semi-realista estilizado: base fixa, mais parecido com personagem de jogo casual. */
.avatar-game-stage {
    width: min(100%, 390px);
    min-height: 560px;
    isolation: isolate;
}

.avatar-game-stage::before {
    content: '';
    position: absolute;
    inset: 18px 18px 42px;
    border-radius: 46% 46% 18% 18%;
    background:
        radial-gradient(circle at 50% 12%, rgba(255,255,255,.5), transparent 30%),
        linear-gradient(180deg, rgba(255,248,229,.45), rgba(220,236,203,.2));
    z-index: -1;
}

.avatar-sim-character {
    width: 252px;
    height: 510px;
    transform-origin: center bottom;
    animation: avatarBreathing 4.2s ease-in-out infinite;
    filter: drop-shadow(0 24px 28px rgba(74, 43, 20, .22));
}

@keyframes avatarBreathing {
    0%, 100% { transform: translateY(0) scale(1); }
    50% { transform: translateY(-5px) scale(1.008); }
}

.avatar-sim-shadow {
    width: 182px;
    height: 28px;
    left: 35px;
    bottom: 0;
    background: rgba(74, 43, 20, .18);
}

.avatar-sim-head {
    width: 104px;
    height: 122px;
    left: 74px;
    top: 70px;
    border-radius: 48% 48% 44% 44% / 44% 44% 52% 52%;
    background:
        radial-gradient(circle at 34% 26%, rgba(255,255,255,.42), transparent 22px),
        radial-gradient(circle at 74% 62%, rgba(120,70,40,.11), transparent 26px),
        var(--avatar-skin);
    border: 1px solid rgba(111,74,47,.09);
    box-shadow:
        inset 0 -12px 0 rgba(111, 74, 47, .07),
        0 4px 16px rgba(111, 74, 47, .08);
}

.avatar-sim-hair {
    width: 126px;
    height: 106px;
    left: 63px;
    top: 42px;
    border-radius: 58px 58px 40px 40px;
    background:
        radial-gradient(circle at 31% 22%, rgba(255,255,255,.18), transparent 24px),
        linear-gradient(145deg, color-mix(in srgb, var(--avatar-hair), #ffffff 9%), var(--avatar-hair) 72%);
    box-shadow:
        inset 15px -7px 0 rgba(0,0,0,.08),
        inset -14px -3px 0 rgba(255,255,255,.07);
}

.avatar-sim-hair::before {
    content: '';
    position: absolute;
    left: 18px;
    top: 12px;
    width: 34px;
    height: 72px;
    border-radius: 60% 40% 55% 40%;
    background: color-mix(in srgb, var(--avatar-hair), #ffffff 8%);
    transform: rotate(18deg);
    opacity: .8;
}

.avatar-sim-hair::after {
    left: 9px;
    top: 58px;
    width: 108px;
    height: 58px;
    border-radius: 0 0 48px 48px;
    background: var(--avatar-hair);
}

.avatar-hair-curto { height: 82px !important; top: 51px !important; border-radius: 60px 60px 30px 30px !important; }
.avatar-hair-curto::after { height: 28px !important; top: 54px !important; }
.avatar-hair-medio { height: 112px !important; }
.avatar-hair-longo { height: 188px !important; border-radius: 62px 62px 56px 56px !important; }
.avatar-hair-longo::after { height: 118px !important; border-radius: 0 0 58px 58px !important; }
.avatar-hair-cacheado { border-radius: 46% 54% 44% 50% !important; box-shadow: 0 0 0 12px color-mix(in srgb, var(--avatar-hair), #000000 8%), inset 10px -4px 0 rgba(255,255,255,.08) !important; }
.avatar-hair-raspado { height: 58px !important; top: 60px !important; opacity: .98; border-radius: 62px 62px 24px 24px !important; }
.avatar-hair-coque::after { height: 48px !important; }
.avatar-hair-coque::before { width: 58px !important; height: 58px !important; left: 34px !important; top: -36px !important; border-radius: 50% !important; background: var(--avatar-hair) !important; transform: none !important; opacity: 1 !important; }

.avatar-sim-ear {
    width: 20px;
    height: 30px;
    top: 48px;
    border: 1px solid rgba(111,74,47,.08);
}

.avatar-sim-ear-left { left: -12px; }
.avatar-sim-ear-right { right: -12px; }

.avatar-sim-eye {
    top: 49px;
    width: 17px;
    height: 18px;
    background:
        radial-gradient(circle at 35% 30%, #fff 0 2px, transparent 3px),
        radial-gradient(circle at center, var(--avatar-eye) 0 46%, #1f1915 48% 58%, transparent 60%);
    border: 1px solid rgba(63,51,40,.28);
    box-shadow: none;
}

.avatar-sim-eye-left { left: 28px; }
.avatar-sim-eye-right { right: 28px; }

.avatar-eyes-redondo .avatar-sim-eye { width: 19px !important; height: 20px !important; border-radius: 50% !important; }
.avatar-eyes-oriental .avatar-sim-eye { width: 22px !important; height: 10px !important; border-radius: 999px !important; transform: rotate(-5deg); background: var(--avatar-eye); box-shadow: inset 0 3px 0 rgba(255,255,255,.45); }
.avatar-eyes-sereno .avatar-sim-eye { width: 22px !important; height: 6px !important; border-radius: 999px !important; background: rgba(63,51,40,.48); border: 0; }

.avatar-sim-nose {
    left: 50px;
    top: 66px;
    width: 8px;
    height: 18px;
    background: rgba(111, 74, 47, .12);
    box-shadow: 5px 7px 0 -4px rgba(111,74,47,.26);
}

.avatar-nose-delicado .avatar-sim-nose { height: 13px !important; width: 5px !important; left: 51px !important; opacity: .8; }
.avatar-nose-marcante .avatar-sim-nose { height: 24px !important; width: 10px !important; left: 49px !important; opacity: .9; }

.avatar-sim-mouth {
    left: 41px;
    top: 90px;
    width: 25px;
    height: 10px;
    border-bottom: 3px solid rgba(111, 74, 47, .52);
    animation: avatarSoftSmile 5.4s ease-in-out infinite;
}

@keyframes avatarSoftSmile {
    0%, 90%, 100% { transform: scaleY(1); }
    94% { transform: scaleY(.72); }
}

.avatar-sim-neck {
    width: 34px;
    height: 38px;
    left: 109px;
    top: 178px;
    background: linear-gradient(180deg, var(--avatar-skin), color-mix(in srgb, var(--avatar-skin), #7a4a33 10%));
}

.avatar-sim-body {
    width: calc(116px + (var(--avatar-build) * .38px));
    height: 172px;
    left: calc(68px - (var(--avatar-build) * .19px));
    top: 211px;
    border-radius: 42px 42px 26px 26px;
    background:
        radial-gradient(circle at 32% 18%, rgba(255,255,255,.46), transparent 30px),
        linear-gradient(135deg, color-mix(in srgb, var(--avatar-outfit), #ffffff 36%), var(--avatar-outfit));
    border: 2px solid rgba(111, 74, 47, .11);
    box-shadow:
        inset 0 -18px 0 rgba(111,74,47,.06),
        0 9px 18px rgba(111,74,47,.08);
}

.avatar-torso-leve { transform: scaleX(.9) !important; }
.avatar-torso-medio { transform: scaleX(1) !important; }
.avatar-torso-forte { transform: scaleX(1.1) !important; }

.avatar-sim-apron {
    height: 126px;
    top: 38px;
    background:
        linear-gradient(180deg, rgba(255,255,255,.78), rgba(255,250,239,.56));
    box-shadow: inset 0 -10px 0 rgba(111,74,47,.04);
}

.avatar-sim-waist {
    width: 94px;
    height: 32px;
    left: 79px;
    top: 365px;
    background: color-mix(in srgb, var(--avatar-outfit), #5a3828 22%);
}

.avatar-waist-fina .avatar-sim-waist { width: 76px; left: 88px; }
.avatar-waist-larga .avatar-sim-waist { width: 110px; left: 71px; }

.avatar-sim-arm {
    width: 28px;
    height: 150px;
    top: 225px;
    background: linear-gradient(180deg, var(--avatar-skin), color-mix(in srgb, var(--avatar-skin), #7a4a33 8%));
    box-shadow: inset -4px -8px 0 rgba(111,74,47,.05);
}

.avatar-sim-arm-left { left: 48px; transform: rotate(11deg); }
.avatar-sim-arm-right { right: 48px; transform: rotate(-16deg); animation: assistantWave 3.4s ease-in-out infinite; }

.avatar-arms-delicado .avatar-sim-arm { width: 23px; }
.avatar-arms-expressivo .avatar-sim-arm-right { transform: rotate(-34deg); }

.avatar-sim-hand {
    width: 31px;
    height: 31px;
    top: 361px;
    box-shadow: inset -4px -4px 0 rgba(111,74,47,.06);
}

.avatar-sim-hand-left { left: 38px; }
.avatar-sim-hand-right { right: 35px; }

.avatar-hands-luvas .avatar-sim-hand { background: rgba(255,255,255,.88); border: 1px solid rgba(111,74,47,.12); }
.avatar-hands-utensilio .avatar-sim-hand-right::after { content: '🥄'; position: absolute; right: -13px; top: -11px; transform: rotate(-25deg); font-size: 22px; }

.avatar-sim-leg {
    width: 36px;
    height: 104px;
    top: 386px;
    background: linear-gradient(to bottom, var(--avatar-outfit), color-mix(in srgb, var(--avatar-outfit), #5a3828 28%));
}

.avatar-sim-leg-left { left: 88px; }
.avatar-sim-leg-right { right: 88px; }

.avatar-legs-longa .avatar-sim-leg { height: 119px; }
.avatar-legs-forte .avatar-sim-leg { width: 42px; }

.avatar-sim-foot {
    width: 47px;
    height: 20px;
    top: 479px;
    background: #5c3a29;
}

.avatar-sim-foot-left { left: 73px; }
.avatar-sim-foot-right { right: 73px; }

.avatar-feet-tenis .avatar-sim-foot { background: #ffffff; border: 1px solid rgba(111,74,47,.16); }
.avatar-feet-sapato_chef .avatar-sim-foot { background: #2f2a25; }

.avatar-outfit-chef_moderno .avatar-sim-body { background: linear-gradient(135deg, #fffaf0, #8fb8d9) !important; }
.avatar-outfit-cozy_home .avatar-sim-body { background: linear-gradient(135deg, #fffaf0, #f2b7a2) !important; }
.avatar-outfit-premium_futuro .avatar-sim-body { background: linear-gradient(135deg, #fffaf0, #c7b3ff) !important; }

.avatar-click-zone {
    border: 0;
    background: transparent;
}

.avatar-click-zone:hover,
.avatar-click-zone:focus-visible {
    background: rgba(246, 200, 107, .22);
    border: 1px solid rgba(232,139,58,.42);
    box-shadow: 0 0 0 4px rgba(246, 200, 107, .13);
}

.avatar-zone-hair { left: 124px !important; top: 46px !important; width: 142px !important; height: 112px !important; }
.avatar-zone-eyes { left: 146px !important; top: 126px !important; width: 98px !important; height: 44px !important; }
.avatar-zone-nose { left: 176px !important; top: 154px !important; width: 40px !important; height: 48px !important; }
.avatar-zone-ears { left: 112px !important; top: 119px !important; width: 166px !important; height: 68px !important; }
.avatar-zone-torso { left: 111px !important; top: 236px !important; width: 168px !important; height: 128px !important; }
.avatar-zone-outfit { left: 116px !important; top: 242px !important; width: 158px !important; height: 148px !important; }
.avatar-zone-waist { left: 134px !important; top: 380px !important; width: 122px !important; height: 50px !important; }
.avatar-zone-arms { left: 74px !important; top: 246px !important; width: 242px !important; height: 154px !important; }
.avatar-zone-hands { left: 70px !important; top: 374px !important; width: 248px !important; height: 56px !important; }
.avatar-zone-legs { left: 128px !important; top: 414px !important; width: 136px !important; height: 100px !important; }
.avatar-zone-feet { left: 118px !important; top: 495px !important; width: 156px !important; height: 48px !important; }

.avatar-game-hint {
    bottom: 0;
    border-radius: 16px;
    width: min(320px, 94%);
}

/* Estado aplicado via JS nos containers principais */
.avatar-sim-character.avatar-ears-pequena .avatar-sim-ear { transform: scale(.82); }
.avatar-sim-character.avatar-ears-acessorio .avatar-sim-ear-right::after { content: '✦'; position: absolute; right: -6px; top: 12px; font-size: 13px; color: var(--pocket-orange); }
.avatar-sim-character.avatar-waist-fina .avatar-sim-waist { width: 76px; left: 88px; }
.avatar-sim-character.avatar-waist-larga .avatar-sim-waist { width: 110px; left: 71px; }
.avatar-sim-character.avatar-legs-longa .avatar-sim-leg { height: 119px; }
.avatar-sim-character.avatar-legs-forte .avatar-sim-leg { width: 42px; }
.avatar-sim-character.avatar-feet-tenis .avatar-sim-foot { background: #fff; border: 1px solid rgba(111,74,47,.18); }
.avatar-sim-character.avatar-feet-sapato_chef .avatar-sim-foot { background: #2f2a25; }

/* Refinamento 3D semi-realista do avatar e caderno - referência jogo social/cozy */
.pocket-settings-step-aparencia .avatar-game-stage {
    width: min(100%, 410px) !important;
    min-height: 560px !important;
    padding-top: 6px !important;
}

.pocket-settings-step-aparencia .avatar-game-stage::before {
    inset: 18px 36px 44px !important;
    border-radius: 46% 46% 20% 20% !important;
    background:
        radial-gradient(circle at 50% 12%, rgba(255,255,255,.62), transparent 30%),
        linear-gradient(180deg, rgba(255,248,231,.42), rgba(220,235,207,.18)) !important;
}

/* Em configuração o avatar deve ficar parado para facilitar a seleção das partes. */
.pocket-settings-step-aparencia .avatar-sim-character,
.pocket-settings-step-aparencia .avatar-sim-mouth,
.pocket-settings-step-aparencia .avatar-sim-arm-right {
    animation: none !important;
}

.avatar-sim-character {
    width: 254px !important;
    height: 512px !important;
    filter: drop-shadow(0 26px 26px rgba(65, 42, 27, .24)) !important;
}

.avatar-sim-shadow {
    width: 188px !important;
    height: 24px !important;
    left: 33px !important;
    bottom: 0 !important;
    background: radial-gradient(ellipse at center, rgba(66,42,28,.24), rgba(66,42,28,.08) 58%, transparent 72%) !important;
    filter: blur(4px) !important;
}

.avatar-sim-head {
    width: 108px !important;
    height: 126px !important;
    left: 73px !important;
    top: 66px !important;
    border-radius: 48% 48% 43% 43% / 42% 42% 54% 54% !important;
    background:
        radial-gradient(circle at 35% 24%, rgba(255,255,255,.55), transparent 21px),
        radial-gradient(circle at 72% 68%, rgba(114,69,42,.12), transparent 30px),
        linear-gradient(145deg, rgba(255,255,255,.18), transparent 38%),
        var(--avatar-skin) !important;
    box-shadow:
        inset -10px -14px 0 rgba(88, 48, 28, .08),
        inset 8px 5px 0 rgba(255,255,255,.13),
        0 8px 18px rgba(86, 52, 31, .12) !important;
    border: 1px solid rgba(86,52,31,.09) !important;
}

.avatar-sim-hair {
    width: 130px !important;
    height: 110px !important;
    left: 62px !important;
    top: 35px !important;
    border-radius: 48% 52% 42% 46% / 54% 56% 34% 36% !important;
    background:
        radial-gradient(circle at 35% 17%, rgba(255,255,255,.22), transparent 18px),
        linear-gradient(120deg, rgba(255,255,255,.14), transparent 25%),
        var(--avatar-hair) !important;
    box-shadow:
        inset 18px -7px 0 rgba(0,0,0,.10),
        inset -18px -5px 0 rgba(255,255,255,.06),
        0 6px 12px rgba(58,36,25,.09) !important;
    z-index: 5 !important;
}

.avatar-sim-hair::before {
    content: '' !important;
    position: absolute !important;
    left: 20px !important;
    top: 18px !important;
    width: 34px !important;
    height: 72px !important;
    border-radius: 58% 36% 56% 42% !important;
    background: rgba(255,255,255,.12) !important;
    transform: rotate(18deg) !important;
    opacity: .9 !important;
}

.avatar-sim-hair::after {
    content: '' !important;
    left: 8px !important;
    top: 55px !important;
    width: 114px !important;
    height: 60px !important;
    border-radius: 0 0 52px 52px !important;
    background: var(--avatar-hair) !important;
    box-shadow: inset -14px -6px 0 rgba(0,0,0,.08) !important;
}

.avatar-hair-curto { height: 82px !important; top: 48px !important; }
.avatar-hair-curto::after { height: 27px !important; top: 52px !important; }
.avatar-hair-medio { height: 110px !important; }
.avatar-hair-longo { height: 190px !important; border-radius: 55% 45% 45% 48% / 34% 34% 58% 58% !important; }
.avatar-hair-longo::after { height: 124px !important; top: 62px !important; border-radius: 0 0 62px 62px !important; }
.avatar-hair-cacheado { border-radius: 48% 52% 45% 48% !important; box-shadow: 0 0 0 10px rgba(35,22,16,.09), inset 11px -5px 0 rgba(255,255,255,.08) !important; }
.avatar-hair-raspado { height: 54px !important; top: 59px !important; border-radius: 62px 62px 23px 23px !important; }
.avatar-hair-raspado::after { display: none !important; }
.avatar-hair-coque::before { width: 58px !important; height: 58px !important; left: 37px !important; top: -34px !important; border-radius: 50% !important; background: var(--avatar-hair) !important; opacity: 1 !important; }

.avatar-sim-ear {
    width: 19px !important;
    height: 31px !important;
    top: 50px !important;
    background: linear-gradient(145deg, rgba(255,255,255,.12), transparent 42%), var(--avatar-skin) !important;
    box-shadow: inset -3px -3px 0 rgba(84,50,30,.07) !important;
}
.avatar-sim-ear-left { left: -11px !important; }
.avatar-sim-ear-right { right: -11px !important; }

.avatar-sim-eye {
    top: 49px !important;
    width: 18px !important;
    height: 19px !important;
    background:
        radial-gradient(circle at 34% 28%, #fff 0 2px, transparent 3px),
        radial-gradient(circle at 52% 55%, #15110f 0 25%, var(--avatar-eye) 27% 62%, #15110f 64% 70%, transparent 73%) !important;
    border: 1px solid rgba(34,25,20,.28) !important;
    box-shadow: 0 1px 0 rgba(255,255,255,.28) !important;
}
.avatar-sim-eye-left { left: 28px !important; }
.avatar-sim-eye-right { right: 28px !important; }
.avatar-eyes-redondo .avatar-sim-eye { width: 20px !important; height: 21px !important; }
.avatar-eyes-oriental .avatar-sim-eye { width: 23px !important; height: 11px !important; border-radius: 999px !important; transform: rotate(-4deg) !important; background: linear-gradient(180deg, rgba(255,255,255,.42), transparent 35%), var(--avatar-eye) !important; }
.avatar-eyes-sereno .avatar-sim-eye { width: 22px !important; height: 7px !important; border-radius: 999px !important; background: rgba(42,31,25,.58) !important; border: 0 !important; }

.avatar-sim-nose {
    left: 51px !important;
    top: 66px !important;
    width: 8px !important;
    height: 19px !important;
    background: linear-gradient(90deg, rgba(90,52,31,.13), rgba(255,255,255,.1)) !important;
    box-shadow: 5px 8px 0 -4px rgba(90,52,31,.28) !important;
}
.avatar-sim-mouth {
    left: 41px !important;
    top: 91px !important;
    width: 27px !important;
    height: 10px !important;
    border-bottom: 3px solid rgba(76,43,28,.56) !important;
}

.avatar-sim-neck {
    width: 35px !important;
    height: 39px !important;
    left: 109px !important;
    top: 178px !important;
    border-radius: 12px !important;
}

.avatar-sim-body {
    width: calc(116px + (var(--avatar-build) * .36px)) !important;
    height: 174px !important;
    left: calc(69px - (var(--avatar-build) * .18px)) !important;
    top: 211px !important;
    border-radius: 44px 44px 26px 26px / 48px 48px 28px 28px !important;
    background:
        radial-gradient(circle at 32% 16%, rgba(255,255,255,.48), transparent 34px),
        linear-gradient(135deg, rgba(255,255,255,.36), transparent 44%),
        var(--avatar-outfit) !important;
    box-shadow:
        inset -16px -18px 0 rgba(71,45,31,.08),
        inset 12px 8px 0 rgba(255,255,255,.13),
        0 10px 18px rgba(72,45,31,.1) !important;
}

.avatar-sim-apron {
    width: 56% !important;
    left: 22% !important;
    top: 36px !important;
    height: 130px !important;
    border-radius: 18px 18px 26px 26px !important;
    background: linear-gradient(180deg, rgba(255,255,255,.82), rgba(255,248,235,.62)) !important;
}
.avatar-sim-apron::after { content: '' !important; }

.avatar-sim-arm {
    width: 28px !important;
    height: 150px !important;
    top: 225px !important;
    border-radius: 999px !important;
    background: linear-gradient(180deg, rgba(255,255,255,.14), transparent 36%), var(--avatar-skin) !important;
}
.avatar-sim-arm-left { left: 48px !important; transform: rotate(8deg) !important; }
.avatar-sim-arm-right { right: 48px !important; transform: rotate(-8deg) !important; }
.avatar-arms-expressivo .avatar-sim-arm-right { transform: rotate(-22deg) !important; }

.avatar-sim-hand {
    width: 31px !important;
    height: 31px !important;
    top: 360px !important;
    background: radial-gradient(circle at 34% 25%, rgba(255,255,255,.18), transparent 38%), var(--avatar-skin) !important;
}
.avatar-sim-hand-left { left: 39px !important; }
.avatar-sim-hand-right { right: 39px !important; }
.avatar-hands-utensilio .avatar-sim-hand-right::after { font-size: 18px !important; right: -12px !important; top: -10px !important; }

.avatar-sim-waist {
    width: 94px !important;
    height: 30px !important;
    left: 80px !important;
    top: 366px !important;
    border-radius: 999px !important;
}
.avatar-sim-leg {
    width: 36px !important;
    height: 104px !important;
    top: 386px !important;
    border-radius: 999px !important;
}
.avatar-sim-leg-left { left: 88px !important; }
.avatar-sim-leg-right { right: 88px !important; }
.avatar-sim-foot {
    width: 48px !important;
    height: 20px !important;
    top: 479px !important;
    border-radius: 60% 40% 50% 50% !important;
}
.avatar-sim-foot-left { left: 72px !important; }
.avatar-sim-foot-right { right: 72px !important; }

/* Pontos de seleção menores: não cobrem o personagem. */
.avatar-click-zone {
    width: 22px !important;
    height: 22px !important;
    min-width: 22px !important;
    min-height: 22px !important;
    border-radius: 50% !important;
    border: 2px solid rgba(255,255,255,.9) !important;
    background: radial-gradient(circle at 34% 28%, #fff 0 2px, #f4b96d 3px, #df7b32 70%) !important;
    box-shadow: 0 3px 8px rgba(76,43,28,.22) !important;
    opacity: .82 !important;
    transform: translate(-50%, -50%) !important;
}
.avatar-click-zone:hover,
.avatar-click-zone:focus-visible {
    width: 26px !important;
    height: 26px !important;
    min-width: 26px !important;
    min-height: 26px !important;
    background: radial-gradient(circle at 34% 28%, #fff 0 3px, #ffd277 4px, #df7b32 72%) !important;
    border-color: #fff !important;
    box-shadow: 0 0 0 5px rgba(244,185,109,.18), 0 6px 12px rgba(76,43,28,.24) !important;
    opacity: 1 !important;
    outline: none !important;
}
.avatar-zone-hair { left: 205px !important; top: 78px !important; }
.avatar-zone-eyes { left: 205px !important; top: 130px !important; }
.avatar-zone-nose { left: 205px !important; top: 157px !important; }
.avatar-zone-ears { left: 136px !important; top: 128px !important; }
.avatar-zone-torso { left: 205px !important; top: 255px !important; }
.avatar-zone-outfit { left: 231px !important; top: 315px !important; }
.avatar-zone-waist { left: 205px !important; top: 382px !important; }
.avatar-zone-arms { left: 128px !important; top: 296px !important; }
.avatar-zone-hands { left: 286px !important; top: 370px !important; }
.avatar-zone-legs { left: 205px !important; top: 435px !important; }
.avatar-zone-feet { left: 205px !important; top: 502px !important; }

.avatar-game-hint {
    width: min(315px, 92%) !important;
    bottom: -2px !important;
    border-radius: 14px !important;
    background: rgba(255,251,241,.76) !important;
    font-size: .78rem !important;
    padding: 7px 10px !important;
}

/* Caderno mais físico: papel, lombada e profundidade, sem alterar páginas 50/50. */
.pocket-book,
.pocket-book-home,
.pocket-book-recipes,
.pocket-book-settings,
.pocket-book-store,
.pocket-book-recipe,
.pocket-book-recipe-open {
    background:
        linear-gradient(90deg, rgba(88,54,32,.2), transparent 8%, transparent 92%, rgba(88,54,32,.2)),
        linear-gradient(135deg, rgba(244,185,109,.18), rgba(255,255,255,.16)) !important;
    box-shadow:
        0 30px 70px rgba(63,51,40,.22),
        0 10px 22px rgba(63,51,40,.12),
        inset 0 0 0 1px rgba(255,255,255,.42) !important;
}
.pocket-page-left,
.pocket-page-right {
    background:
        radial-gradient(circle at 20% 12%, rgba(255,255,255,.75), transparent 7.5rem),
        radial-gradient(circle at 84% 82%, rgba(232,139,58,.06), transparent 8rem),
        repeating-linear-gradient(to bottom, transparent 0, transparent 34px, rgba(111,74,47,.04) 35px),
        linear-gradient(135deg, #fffaf0, #f8ebce) !important;
}
.pocket-page-left {
    box-shadow: inset -18px 0 24px rgba(82,49,28,.085), inset 1px 0 0 rgba(255,255,255,.72) !important;
}
.pocket-page-right {
    box-shadow: inset 18px 0 24px rgba(82,49,28,.085), inset -1px 0 0 rgba(255,255,255,.72) !important;
}
.pocket-book::after,
.pocket-book-home::after,
.pocket-book-recipes::after,
.pocket-book-settings::after,
.pocket-book-store::after,
.pocket-book-recipe::after,
.pocket-book-recipe-open::after {
    background:
        linear-gradient(90deg, transparent, rgba(73,43,24,.18) 42%, rgba(255,255,255,.42) 50%, rgba(73,43,24,.15) 58%, transparent),
        radial-gradient(ellipse at center, rgba(73,43,24,.15), rgba(73,43,24,.055) 48%, transparent 78%) !important;
}

/* =========================================================
   Pocket Croquette - Refinamento visual estilo jogo social
   Base: referência visual de personagens semi-realistas/cartoon 3D.
   ========================================================= */
.pocket-book,
.pocket-book-home,
.pocket-book-recipes,
.pocket-book-settings,
.pocket-book-store,
.pocket-book-recipe,
.pocket-book-recipe-open {
    background:
        linear-gradient(90deg, rgba(78, 42, 23, .42) 0 10px, transparent 10px calc(100% - 10px), rgba(78, 42, 23, .34) calc(100% - 10px)),
        linear-gradient(135deg, #6b4128, #b0773f 18%, #fff1d4 19%, #fff1d4 81%, #8a512e 82%, #5b351f) !important;
    border: 1px solid rgba(77, 47, 28, .28) !important;
    border-radius: 26px !important;
    box-shadow:
        0 34px 80px rgba(43, 28, 18, .28),
        0 13px 28px rgba(43, 28, 18, .16),
        inset 0 0 0 1px rgba(255,255,255,.32) !important;
}

.pocket-book::before,
.pocket-book-home::before,
.pocket-book-recipes::before,
.pocket-book-settings::before,
.pocket-book-store::before,
.pocket-book-recipe::before,
.pocket-book-recipe-open::before {
    content: '';
    position: absolute;
    top: 34px;
    bottom: 34px;
    left: 50%;
    width: 22px;
    transform: translateX(-50%);
    border-radius: 999px;
    background:
        radial-gradient(circle at 50% 7%, #5c3923 0 4px, #d7af72 5px 10px, transparent 11px),
        radial-gradient(circle at 50% 21%, #5c3923 0 4px, #d7af72 5px 10px, transparent 11px),
        radial-gradient(circle at 50% 35%, #5c3923 0 4px, #d7af72 5px 10px, transparent 11px),
        radial-gradient(circle at 50% 49%, #5c3923 0 4px, #d7af72 5px 10px, transparent 11px),
        radial-gradient(circle at 50% 63%, #5c3923 0 4px, #d7af72 5px 10px, transparent 11px),
        radial-gradient(circle at 50% 77%, #5c3923 0 4px, #d7af72 5px 10px, transparent 11px),
        radial-gradient(circle at 50% 91%, #5c3923 0 4px, #d7af72 5px 10px, transparent 11px);
    opacity: .72;
    z-index: 5;
    pointer-events: none;
}

.pocket-page-left,
.pocket-page-right {
    background:
        radial-gradient(circle at 20% 8%, rgba(255,255,255,.86), transparent 7rem),
        radial-gradient(circle at 80% 90%, rgba(218,154,89,.09), transparent 9rem),
        repeating-linear-gradient(to bottom, rgba(121,79,47,.032) 0 1px, transparent 1px 32px),
        linear-gradient(145deg, #fff8e7, #f5e2bd 52%, #efd2a4) !important;
    border-color: rgba(95, 61, 36, .14) !important;
}

.pocket-page-left::before,
.pocket-page-right::before {
    inset: 12px !important;
    border: 1px solid rgba(96, 62, 36, .10) !important;
    background:
        linear-gradient(90deg, rgba(255,255,255,.32), transparent 18%, transparent 82%, rgba(99,62,34,.05));
    border-radius: inherit;
}

.pocket-page-left {
    box-shadow: inset -15px 0 24px rgba(84, 48, 26, .10), inset 0 0 22px rgba(255,255,255,.22) !important;
}

.pocket-page-right {
    box-shadow: inset 15px 0 24px rgba(84, 48, 26, .10), inset 0 0 22px rgba(255,255,255,.22) !important;
}

.pocket-book::after,
.pocket-book-home::after,
.pocket-book-recipes::after,
.pocket-book-settings::after,
.pocket-book-store::after,
.pocket-book-recipe::after,
.pocket-book-recipe-open::after {
    top: 18px !important;
    bottom: 18px !important;
    width: 44px !important;
    background:
        linear-gradient(90deg, transparent, rgba(48, 27, 15, .22) 34%, rgba(255,255,255,.38) 50%, rgba(48, 27, 15, .16) 66%, transparent),
        radial-gradient(ellipse at center, rgba(77, 43, 24, .20), rgba(77, 43, 24, .05) 55%, transparent 78%) !important;
    z-index: 4 !important;
}

/* Editor de avatar: personagem base mais próximo de jogo social, em pose frontal estática. */
.pocket-settings-step-aparencia .assistant-stage-full-preview {
    padding-top: 0 !important;
    gap: 8px !important;
}

.pocket-settings-step-aparencia .avatar-game-stage {
    width: min(100%, 430px) !important;
    min-height: 584px !important;
    height: 584px !important;
    padding: 6px 0 0 !important;
    overflow: visible !important;
    background:
        radial-gradient(circle at 50% 13%, rgba(255,255,255,.70), transparent 28%),
        linear-gradient(145deg, rgba(197,224,214,.44), rgba(255,239,206,.60)) !important;
    border: 1px solid rgba(95, 61, 36, .12) !important;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.45), 0 16px 32px rgba(74,47,31,.12) !important;
}

.pocket-settings-step-aparencia .avatar-game-stage::before {
    inset: 18px 46px 34px !important;
    border-radius: 50% 50% 38% 38% / 32% 32% 22% 22% !important;
    background:
        radial-gradient(circle at 50% 14%, rgba(255,255,255,.84), transparent 30%),
        radial-gradient(ellipse at 50% 91%, rgba(63,51,40,.16), transparent 44%),
        linear-gradient(180deg, rgba(201,232,222,.45), rgba(255,244,214,.34)) !important;
    opacity: 1 !important;
}

.avatar-game-stage.avatar-stage-feminino .avatar-sim-character,
.avatar-game-stage.avatar-stage-masculino .avatar-sim-character,
.pocket-settings-step-aparencia .avatar-sim-character {
    width: 286px !important;
    height: 535px !important;
    left: 50% !important;
    bottom: 42px !important;
    transform: translateX(-50%) !important;
    animation: none !important;
    filter: drop-shadow(0 24px 24px rgba(53, 34, 23, .26)) !important;
}

.avatar-sim-shadow {
    width: 212px !important;
    height: 28px !important;
    left: 37px !important;
    bottom: -7px !important;
    background: radial-gradient(ellipse at center, rgba(42,27,18,.25), rgba(42,27,18,.08) 58%, transparent 74%) !important;
    filter: blur(4px) !important;
}

.avatar-sim-head {
    width: 114px !important;
    height: 132px !important;
    left: 86px !important;
    top: 54px !important;
    border-radius: 48% 48% 44% 44% / 41% 41% 55% 55% !important;
    background:
        radial-gradient(circle at 33% 22%, rgba(255,255,255,.64), transparent 24px),
        radial-gradient(circle at 74% 68%, rgba(84,45,24,.13), transparent 32px),
        linear-gradient(145deg, rgba(255,255,255,.22), transparent 38%),
        var(--avatar-skin) !important;
    box-shadow:
        inset -10px -15px 0 rgba(86, 49, 29, .09),
        inset 8px 5px 0 rgba(255,255,255,.16),
        0 9px 18px rgba(70, 44, 29, .13) !important;
    border: 1px solid rgba(73, 43, 27, .10) !important;
}

.avatar-stage-feminino .avatar-sim-head {
    width: 118px !important;
    height: 134px !important;
    left: 84px !important;
    border-radius: 49% 49% 43% 43% / 38% 38% 57% 57% !important;
}

.avatar-sim-hair {
    width: 142px !important;
    height: 108px !important;
    left: 72px !important;
    top: 28px !important;
    border-radius: 48% 52% 42% 46% / 52% 54% 36% 38% !important;
    background:
        linear-gradient(125deg, rgba(255,255,255,.20), transparent 22%),
        radial-gradient(circle at 30% 18%, rgba(255,255,255,.20), transparent 20px),
        var(--avatar-hair) !important;
    box-shadow:
        inset 18px -8px 0 rgba(0,0,0,.10),
        inset -18px -5px 0 rgba(255,255,255,.06),
        0 7px 12px rgba(50,31,22,.10) !important;
    z-index: 8 !important;
}

.avatar-stage-feminino .avatar-sim-hair {
    width: 166px !important;
    height: 174px !important;
    left: 60px !important;
    top: 19px !important;
    border-radius: 48% 52% 49% 45% / 34% 34% 62% 60% !important;
}

.avatar-stage-masculino .avatar-sim-hair {
    width: 134px !important;
    height: 82px !important;
    left: 76px !important;
    top: 31px !important;
    border-radius: 52% 48% 31% 31% / 68% 68% 28% 28% !important;
}

.avatar-sim-hair::before {
    content: '' !important;
    position: absolute !important;
    left: 25px !important;
    top: 18px !important;
    width: 42px !important;
    height: 78px !important;
    border-radius: 58% 36% 56% 42% !important;
    background: rgba(255,255,255,.12) !important;
    transform: rotate(18deg) !important;
    opacity: .82 !important;
}

.avatar-sim-hair::after {
    content: '' !important;
    position: absolute !important;
    left: 10px !important;
    top: 60px !important;
    width: 124px !important;
    height: 64px !important;
    border-radius: 0 0 62px 62px !important;
    background: var(--avatar-hair) !important;
    box-shadow: inset -14px -6px 0 rgba(0,0,0,.08) !important;
}

.avatar-stage-masculino .avatar-sim-hair::after { height: 26px !important; top: 50px !important; width: 112px !important; left: 11px !important; }
.avatar-stage-feminino .avatar-sim-hair::after { height: 116px !important; top: 65px !important; width: 146px !important; left: 10px !important; border-radius: 0 0 72px 72px !important; }
.avatar-hair-curto { height: 78px !important; top: 41px !important; }
.avatar-hair-curto::after { height: 26px !important; top: 50px !important; }
.avatar-hair-longo { height: 204px !important; }
.avatar-hair-longo::after { height: 142px !important; }
.avatar-hair-cacheado { box-shadow: 0 0 0 10px rgba(37,23,16,.10), inset 11px -5px 0 rgba(255,255,255,.08) !important; }
.avatar-hair-raspado { height: 50px !important; top: 52px !important; }
.avatar-hair-raspado::after { display: none !important; }

.avatar-sim-ear {
    width: 18px !important;
    height: 30px !important;
    top: 51px !important;
    background: linear-gradient(145deg, rgba(255,255,255,.13), transparent 40%), var(--avatar-skin) !important;
    box-shadow: inset -3px -3px 0 rgba(84,50,30,.07) !important;
}
.avatar-sim-ear-left { left: -10px !important; }
.avatar-sim-ear-right { right: -10px !important; }

.avatar-sim-eye {
    top: 50px !important;
    width: 19px !important;
    height: 20px !important;
    background:
        radial-gradient(circle at 35% 27%, #fff 0 2px, transparent 3px),
        radial-gradient(circle at 52% 55%, #14100d 0 23%, var(--avatar-eye) 25% 62%, #15100e 64% 70%, transparent 73%) !important;
    border: 1px solid rgba(34,25,20,.30) !important;
    box-shadow: 0 1px 0 rgba(255,255,255,.30), 0 0 0 3px rgba(255,255,255,.12) !important;
}
.avatar-sim-eye-left { left: 29px !important; }
.avatar-sim-eye-right { right: 29px !important; }
.avatar-eyes-redondo .avatar-sim-eye { width: 21px !important; height: 22px !important; }
.avatar-eyes-oriental .avatar-sim-eye { width: 24px !important; height: 11px !important; border-radius: 999px !important; transform: rotate(-4deg) !important; }
.avatar-eyes-sereno .avatar-sim-eye { width: 24px !important; height: 7px !important; border-radius: 999px !important; }

.avatar-sim-nose {
    left: 54px !important;
    top: 68px !important;
    width: 8px !important;
    height: 20px !important;
    border-radius: 50% 50% 60% 60% !important;
    background: linear-gradient(90deg, rgba(89,52,31,.14), rgba(255,255,255,.10)) !important;
    box-shadow: 5px 9px 0 -4px rgba(90,52,31,.28) !important;
}
.avatar-sim-mouth {
    left: 43px !important;
    top: 95px !important;
    width: 29px !important;
    height: 10px !important;
    border-bottom: 3px solid rgba(76,43,28,.58) !important;
    border-radius: 0 0 50% 50% !important;
    animation: none !important;
}
.avatar-stage-feminino .avatar-sim-mouth { border-bottom-color: rgba(145, 63, 49, .72) !important; }

.avatar-sim-neck {
    width: 36px !important;
    height: 42px !important;
    left: 125px !important;
    top: 174px !important;
    border-radius: 14px !important;
    background: linear-gradient(180deg, rgba(255,255,255,.12), transparent 42%), var(--avatar-skin) !important;
}

.avatar-sim-body {
    width: calc(124px + (var(--avatar-build) * .32px)) !important;
    height: 172px !important;
    left: calc(81px - (var(--avatar-build) * .16px)) !important;
    top: 213px !important;
    border-radius: 46px 46px 22px 22px / 50px 50px 22px 22px !important;
    background:
        radial-gradient(circle at 32% 14%, rgba(255,255,255,.52), transparent 35px),
        linear-gradient(135deg, rgba(255,255,255,.34), transparent 43%),
        var(--avatar-outfit) !important;
    box-shadow:
        inset -16px -18px 0 rgba(58,36,24,.09),
        inset 12px 8px 0 rgba(255,255,255,.13),
        0 10px 18px rgba(64,40,26,.11) !important;
}
.avatar-stage-feminino .avatar-sim-body {
    width: calc(108px + (var(--avatar-build) * .24px)) !important;
    left: calc(89px - (var(--avatar-build) * .12px)) !important;
    height: 164px !important;
    border-radius: 42px 42px 18px 18px / 48px 48px 22px 22px !important;
}

.avatar-sim-apron {
    width: 52% !important;
    left: 24% !important;
    top: 37px !important;
    height: 122px !important;
    border-radius: 16px 16px 24px 24px !important;
    background: linear-gradient(180deg, rgba(255,255,255,.80), rgba(255,248,235,.55)) !important;
    border: 1px solid rgba(255,255,255,.25) !important;
}

.avatar-sim-arm {
    width: 27px !important;
    height: 154px !important;
    top: 224px !important;
    border-radius: 999px !important;
    background: linear-gradient(180deg, rgba(255,255,255,.14), transparent 36%), var(--avatar-skin) !important;
    animation: none !important;
}
.avatar-sim-arm-left { left: 58px !important; transform: rotate(5deg) !important; }
.avatar-sim-arm-right { right: 58px !important; transform: rotate(-5deg) !important; }
.avatar-stage-feminino .avatar-sim-arm-left { left: 67px !important; }
.avatar-stage-feminino .avatar-sim-arm-right { right: 67px !important; }
.avatar-arms-expressivo .avatar-sim-arm-right { transform: rotate(-20deg) !important; }

.avatar-sim-hand {
    width: 30px !important;
    height: 32px !important;
    top: 365px !important;
    border-radius: 45% 45% 52% 52% !important;
    background: radial-gradient(circle at 35% 24%, rgba(255,255,255,.18), transparent 38%), var(--avatar-skin) !important;
}
.avatar-sim-hand-left { left: 51px !important; }
.avatar-sim-hand-right { right: 51px !important; }
.avatar-stage-feminino .avatar-sim-hand-left { left: 59px !important; }
.avatar-stage-feminino .avatar-sim-hand-right { right: 59px !important; }

.avatar-sim-waist {
    width: 96px !important;
    height: 30px !important;
    left: 95px !important;
    top: 371px !important;
    border-radius: 999px !important;
    background: linear-gradient(180deg, #344f76, #1d314f) !important;
}
.avatar-stage-feminino .avatar-sim-waist { width: 100px !important; left: 93px !important; }
.avatar-sim-leg {
    width: 38px !important;
    height: 108px !important;
    top: 396px !important;
    border-radius: 22px 22px 16px 16px !important;
    background: linear-gradient(180deg, #263f64, #13233a) !important;
}
.avatar-sim-leg-left { left: 100px !important; }
.avatar-sim-leg-right { right: 100px !important; }
.avatar-stage-feminino .avatar-sim-leg-left { left: 99px !important; }
.avatar-stage-feminino .avatar-sim-leg-right { right: 99px !important; }
.avatar-sim-foot {
    width: 50px !important;
    height: 20px !important;
    top: 492px !important;
    border-radius: 58% 42% 52% 50% !important;
    background: linear-gradient(180deg, #ffffff, #be4f44 36%, #7c2c2a) !important;
}
.avatar-sim-foot-left { left: 82px !important; }
.avatar-sim-foot-right { right: 82px !important; }

/* Pontos de seleção discretos, sem círculos gigantes cobrindo o avatar. */
.avatar-click-zone {
    width: 16px !important;
    height: 16px !important;
    min-width: 16px !important;
    min-height: 16px !important;
    border-radius: 50% !important;
    border: 2px solid rgba(255,255,255,.95) !important;
    background: radial-gradient(circle at 34% 28%, #fff 0 1.5px, #f4b96d 2px, #d97831 70%) !important;
    box-shadow: 0 3px 7px rgba(76,43,28,.22) !important;
    opacity: .74 !important;
    transform: translate(-50%, -50%) !important;
    z-index: 40 !important;
}
.avatar-click-zone:hover,
.avatar-click-zone:focus-visible {
    width: 20px !important;
    height: 20px !important;
    min-width: 20px !important;
    min-height: 20px !important;
    opacity: 1 !important;
    box-shadow: 0 0 0 5px rgba(244,185,109,.18), 0 6px 12px rgba(76,43,28,.24) !important;
    outline: none !important;
}
.avatar-zone-hair { left: 214px !important; top: 74px !important; }
.avatar-zone-eyes { left: 214px !important; top: 132px !important; }
.avatar-zone-nose { left: 214px !important; top: 162px !important; }
.avatar-zone-ears { left: 143px !important; top: 132px !important; }
.avatar-zone-torso { left: 214px !important; top: 254px !important; }
.avatar-zone-outfit { left: 242px !important; top: 315px !important; }
.avatar-zone-waist { left: 214px !important; top: 383px !important; }
.avatar-zone-arms { left: 137px !important; top: 295px !important; }
.avatar-zone-hands { left: 292px !important; top: 375px !important; }
.avatar-zone-legs { left: 214px !important; top: 440px !important; }
.avatar-zone-feet { left: 214px !important; top: 510px !important; }

.avatar-game-hint {
    width: min(330px, 92%) !important;
    bottom: 4px !important;
    font-size: .76rem !important;
    background: rgba(255,251,241,.82) !important;
}

/* Refinamento visual: avatar base semi-realista por imagem, sem boneco vetorial montado por CSS */
.pocket-settings-step-aparencia .avatar-game-stage {
    min-height: 590px;
    display: grid;
    place-items: center;
    padding: 22px 18px 34px;
    overflow: visible;
}

.pocket-settings-step-aparencia .avatar-game-stage::before {
    opacity: .72;
    background:
        radial-gradient(circle at 50% 18%, rgba(255,255,255,.68), transparent 22%),
        radial-gradient(circle at 50% 72%, rgba(185,216,170,.26), transparent 34%),
        linear-gradient(180deg, rgba(255,250,238,.2), rgba(232,139,58,.07));
}

.avatar-image-editor-frame {
    width: min(78%, 330px);
    height: 500px;
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    filter: drop-shadow(0 28px 28px rgba(65, 43, 28, .2));
    z-index: 2;
}

.avatar-image-editor-frame::before {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 9px;
    width: 72%;
    height: 36px;
    transform: translateX(-50%);
    border-radius: 50%;
    background: radial-gradient(ellipse at center, rgba(59, 39, 28, .26), transparent 70%);
    z-index: -1;
}

.avatar-editor-base-image {
    width: auto;
    height: min(100%, 500px);
    max-width: 100%;
    object-fit: contain;
    object-position: center bottom;
    user-select: none;
    pointer-events: none;
}

.avatar-image-editor-feminino .avatar-editor-base-image {
    height: min(100%, 515px);
}

.avatar-image-editor-masculino .avatar-editor-base-image {
    height: min(100%, 505px);
}

/* Pontos de seleção menores e mais parecidos com editor de personagem */
.avatar-click-zone {
    width: 18px !important;
    height: 18px !important;
    min-width: 18px !important;
    min-height: 18px !important;
    border-radius: 999px !important;
    border: 2px solid rgba(255, 250, 238, .92) !important;
    background: rgba(138, 94, 56, .64) !important;
    box-shadow: 0 5px 12px rgba(58, 36, 20, .24), 0 0 0 1px rgba(111, 74, 47, .18) !important;
    opacity: .88;
    z-index: 7 !important;
}

.avatar-click-zone:hover,
.avatar-click-zone:focus-visible {
    transform: scale(1.28) !important;
    background: var(--pocket-orange) !important;
    box-shadow: 0 8px 18px rgba(232, 139, 58, .32), 0 0 0 4px rgba(246, 200, 107, .22) !important;
    opacity: 1;
}

.pocket-settings-step-aparencia .avatar-zone-hair { left: 49%; top: 14%; }
.pocket-settings-step-aparencia .avatar-zone-eyes { left: 49%; top: 22%; }
.pocket-settings-step-aparencia .avatar-zone-nose { left: 51%; top: 27%; }
.pocket-settings-step-aparencia .avatar-zone-ears { left: 32%; top: 25%; }
.pocket-settings-step-aparencia .avatar-zone-torso { left: 50%; top: 43%; }
.pocket-settings-step-aparencia .avatar-zone-outfit { left: 64%; top: 46%; }
.pocket-settings-step-aparencia .avatar-zone-waist { left: 50%; top: 56%; }
.pocket-settings-step-aparencia .avatar-zone-arms { left: 28%; top: 47%; }
.pocket-settings-step-aparencia .avatar-zone-hands { left: 25%; top: 63%; }
.pocket-settings-step-aparencia .avatar-zone-legs { left: 50%; top: 73%; }
.pocket-settings-step-aparencia .avatar-zone-feet { left: 50%; top: 90%; }

.avatar-game-hint {
    position: absolute;
    left: 50%;
    bottom: 16px;
    transform: translateX(-50%);
    width: min(82%, 360px);
    padding: 9px 14px;
    border-radius: 999px;
    text-align: center;
    font-size: .86rem;
    font-weight: 800;
    color: var(--pocket-brown);
    background: rgba(255, 250, 238, .82);
    border: 1px solid rgba(111, 74, 47, .13);
    box-shadow: 0 10px 24px rgba(90, 57, 29, .12);
    z-index: 8;
}

/* Caderno: acabamento mais físico sem alterar a largura padronizada das páginas */
.pocket-book {
    background: linear-gradient(90deg, rgba(95,58,29,.18), rgba(255,250,238,.18) 4%, transparent 10%, transparent 90%, rgba(255,250,238,.2) 96%, rgba(95,58,29,.16));
    border-radius: 38px;
}

.pocket-page {
    background:
        radial-gradient(circle at 18% 8%, rgba(255,255,255,.46), transparent 18rem),
        repeating-linear-gradient(to bottom, transparent 0, transparent 35px, rgba(111, 74, 47, .052) 36px),
        linear-gradient(135deg, rgba(255, 251, 241, .99), rgba(255, 239, 205, .97));
}

.pocket-page-left::before,
.pocket-page-right::after {
    content: '';
    position: absolute;
    inset: 10px;
    border: 1px solid rgba(111, 74, 47, .07);
    border-radius: inherit;
    pointer-events: none;
}

.pocket-page-left::after,
.pocket-page-right::before {
    width: 20px;
}

/* =========================================================
   Pocket Croquette - correção de realismo do avatar e página virando
   Objetivo: avatar base reto, masculino/feminino neutros e efeito de caderno.
   ========================================================= */
.pocket-settings-step-aparencia .avatar-game-stage {
    min-height: 585px !important;
    perspective: 1200px !important;
}

.pocket-settings-step-aparencia .avatar-game-stage::before {
    border-radius: 46% 46% 18% 18% !important;
    background:
        radial-gradient(circle at 50% 18%, rgba(255,255,255,.66), transparent 25%),
        linear-gradient(180deg, rgba(243, 228, 198, .32), rgba(210, 230, 198, .20)) !important;
}

.avatar-image-editor-frame {
    width: min(86%, 342px) !important;
    height: 525px !important;
    align-items: flex-end !important;
    justify-content: center !important;
    filter: drop-shadow(0 25px 26px rgba(62, 42, 29, .22)) !important;
}

.avatar-editor-base-image,
.avatar-image-editor-feminino .avatar-editor-base-image,
.avatar-image-editor-masculino .avatar-editor-base-image {
    height: min(100%, 525px) !important;
    width: auto !important;
    max-width: 100% !important;
    object-fit: contain !important;
    object-position: center bottom !important;
    transform: none !important;
}

.pocket-settings-step-aparencia .assistant-image-avatar,
.pocket-settings-side .assistant-image-avatar {
    transform: none !important;
    animation: none !important;
}

/* Pontos menores e discretos, iguais a alças de edição de personagem. */
.pocket-settings-step-aparencia .avatar-click-zone {
    width: 13px !important;
    height: 13px !important;
    min-width: 13px !important;
    min-height: 13px !important;
    border-radius: 999px !important;
    border: 2px solid rgba(255, 251, 241, .95) !important;
    background: rgba(151, 108, 65, .72) !important;
    box-shadow: 0 4px 10px rgba(59, 38, 25, .24), 0 0 0 1px rgba(111, 74, 47, .16) !important;
    opacity: .78 !important;
}

.pocket-settings-step-aparencia .avatar-click-zone:hover,
.pocket-settings-step-aparencia .avatar-click-zone:focus-visible {
    transform: scale(1.22) !important;
    opacity: 1 !important;
    background: var(--pocket-orange) !important;
    box-shadow: 0 7px 14px rgba(232, 139, 58, .28), 0 0 0 4px rgba(246, 200, 107, .18) !important;
}

.pocket-settings-step-aparencia .avatar-zone-hair { left: 49.5% !important; top: 13.2% !important; }
.pocket-settings-step-aparencia .avatar-zone-eyes { left: 49.5% !important; top: 22.1% !important; }
.pocket-settings-step-aparencia .avatar-zone-nose { left: 51.2% !important; top: 27.2% !important; }
.pocket-settings-step-aparencia .avatar-zone-ears { left: 34.5% !important; top: 24.5% !important; }
.pocket-settings-step-aparencia .avatar-zone-torso { left: 50% !important; top: 43.2% !important; }
.pocket-settings-step-aparencia .avatar-zone-outfit { left: 65.5% !important; top: 44.8% !important; }
.pocket-settings-step-aparencia .avatar-zone-waist { left: 50% !important; top: 57.2% !important; }
.pocket-settings-step-aparencia .avatar-zone-arms { left: 28.5% !important; top: 47.2% !important; }
.pocket-settings-step-aparencia .avatar-zone-hands { left: 27.2% !important; top: 64.3% !important; }
.pocket-settings-step-aparencia .avatar-zone-legs { left: 50% !important; top: 75.5% !important; }
.pocket-settings-step-aparencia .avatar-zone-feet { left: 50% !important; top: 91.2% !important; }

/* Caderno: virar página como folha, não como slide. */
@media (min-width: 861px) {
    .pocket-book-recipe-open {
        perspective: 1800px !important;
        transform-style: preserve-3d !important;
    }

    .pocket-recipe-page-cover,
    .pocket-recipe-page-preparo {
        perspective: 1800px !important;
        transform-style: preserve-3d !important;
        overflow: visible !important;
    }

    .recipe-page-face {
        backface-visibility: hidden !important;
        transform-style: preserve-3d !important;
        transition: transform .62s cubic-bezier(.2,.7,.2,1), opacity .28s ease !important;
        opacity: 1 !important;
    }

    .recipe-page-face-front {
        transform-origin: right center !important;
        transform: rotateY(0deg) !important;
        z-index: 3 !important;
    }

    .recipe-page-face-back {
        transform-origin: left center !important;
        transform: rotateY(88deg) !important;
        opacity: 0 !important;
        z-index: 2 !important;
    }

    .pocket-book-recipe-open.is-showing-reference .recipe-page-face-front {
        transform: rotateY(-92deg) !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }

    .pocket-book-recipe-open.is-showing-reference .recipe-page-face-back {
        transform: rotateY(0deg) !important;
        opacity: 1 !important;
        pointer-events: auto !important;
        z-index: 4 !important;
    }

    .recipe-page-face-right-front {
        transform-origin: left center !important;
        transform: rotateY(0deg) !important;
        z-index: 3 !important;
    }

    .recipe-page-face-right-back {
        transform-origin: right center !important;
        transform: rotateY(-88deg) !important;
        opacity: 0 !important;
        z-index: 2 !important;
    }

    .pocket-book-recipe-open.is-showing-reference .recipe-page-face-right-front {
        transform: rotateY(92deg) !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }

    .pocket-book-recipe-open.is-showing-reference .recipe-page-face-right-back {
        transform: rotateY(0deg) !important;
        opacity: 1 !important;
        pointer-events: auto !important;
        z-index: 4 !important;
    }

    .pocket-book-recipe-open.is-showing-reference::before {
        content: '';
        position: absolute;
        top: 20px;
        bottom: 20px;
        left: calc(50% - 2px);
        width: 4px;
        background: rgba(90, 57, 29, .20);
        filter: blur(4px);
        z-index: 7;
        pointer-events: none;
        animation: pocketPageTurnSpine .62s ease both;
    }
}

@keyframes pocketPageTurnSpine {
    0% { opacity: .18; transform: scaleY(.96); }
    50% { opacity: .5; transform: scaleY(1); }
    100% { opacity: .22; transform: scaleY(.98); }
}

/* =========================================================
   Correção estrutural do avatar — base real de personagem no sistema.
   A tela de aparência passa a usar um SVG integrado, frontal e estático,
   em vez de imagem solta ou boneco montado por círculos grandes.
   ========================================================= */
.pocket-settings-step-aparencia .avatar-game-stage {
    display: grid !important;
    place-items: center !important;
    position: relative !important;
    width: min(100%, 430px) !important;
    height: 584px !important;
    min-height: 584px !important;
    overflow: visible !important;
}

.avatar-render {
    position: relative !important;
    width: min(100%, 330px) !important;
    height: 548px !important;
    display: grid !important;
    place-items: center !important;
    margin: 0 auto !important;
    transform: translateY(-8px) !important;
    --build-scale: calc(.94 + (var(--avatar-build) * .0018));
}

.avatar-render-svg {
    width: 100% !important;
    height: 100% !important;
    display: block !important;
    overflow: visible !important;
}

.avatar-render .pc-character {
    transform-origin: 210px 650px;
    transform: scaleX(var(--build-scale));
}

.avatar-render .pc-head,
.avatar-render .pc-neck,
.avatar-render .pc-ear,
.avatar-render .pc-arm,
.avatar-render .pc-hand {
    fill: url(#pcSkinLight);
}

.avatar-render .pc-body {
    fill: url(#pcCloth);
    stroke: rgba(84, 50, 30, .11);
    stroke-width: 2.5;
}

.avatar-render .pc-apron {
    fill: rgba(255, 250, 239, .76);
    stroke: rgba(84, 50, 30, .12);
    stroke-width: 2;
}

.avatar-render .pc-leg {
    fill: color-mix(in srgb, var(--avatar-outfit), #63402b 28%);
}

.avatar-render .pc-foot {
    fill: #5d3a28;
}

.avatar-render .pc-hair-back,
.avatar-render .pc-hair-front {
    fill: url(#pcHair);
}

.avatar-render .pc-brow {
    fill: none;
    stroke: color-mix(in srgb, var(--avatar-hair), #20140f 42%);
    stroke-width: 6;
    stroke-linecap: round;
    opacity: .72;
}

.avatar-render .pc-eye {
    fill: #fff9f2;
    stroke: rgba(35, 25, 18, .28);
    stroke-width: 1.5;
}

.avatar-render .pc-iris {
    fill: var(--avatar-eye);
    stroke: #1d1510;
    stroke-width: 2;
}

.avatar-render .pc-nose {
    fill: none;
    stroke: color-mix(in srgb, var(--avatar-skin), #5f3827 34%);
    stroke-width: 4.5;
    stroke-linecap: round;
    opacity: .5;
}

.avatar-render .pc-mouth {
    fill: none;
    stroke: rgba(78, 42, 30, .68);
    stroke-width: 5;
    stroke-linecap: round;
}

.avatar-render-feminino .pc-head {
    d: path('M136 70c-18 74 7 154 74 154s92-80 74-154c-13-51-135-51-148 0z');
}

.avatar-render-feminino .pc-body {
    d: path('M135 245c26-39 124-39 150 0 19 29 25 104 20 188-2 24-188 24-190 0-5-84 1-159 20-188z');
}

.avatar-render-feminino .pc-hair-back {
    d: path('M126 88c15-75 153-88 168 2 11 65-7 142-22 205-10-54-19-125-62-130-43 5-52 76-62 130-15-63-33-140-22-207z');
}

.avatar-render-feminino .pc-hair-front {
    d: path('M131 91c32-75 137-82 158 0-38-19-76-20-118-32-12 14-25 24-40 32z');
}

.avatar-render-masculino .pc-head {
    d: path('M139 76c-20 73 6 148 71 148s91-75 71-148c-13-48-129-48-142 0z');
}

.avatar-render-masculino .pc-body {
    d: path('M132 244c28-35 128-35 156 0 19 24 28 102 24 189-1 24-203 24-204 0-4-87 5-165 24-189z');
}

.avatar-render-masculino .pc-hair-back {
    d: path('M132 92c13-69 143-83 157-1 7 42-9 77-9 77-12-38-25-63-70-68-45 5-58 30-70 68 0 0-15-35-8-76z');
}

.avatar-render-masculino .pc-hair-front {
    d: path('M134 92c30-67 130-73 154 0-36-18-74-17-112-30-13 12-27 22-42 30z');
}

/* Variações aplicadas pelo popup. Mantêm a base estável, mas mudam visualmente. */
.avatar-render.avatar-hair-curto .pc-hair-back { d: path('M134 91c15-63 137-73 153 0 4 25-5 55-5 55-14-27-30-46-72-51-42 5-58 24-72 51 0 0-8-29-4-55z'); }
.avatar-render.avatar-hair-curto .pc-hair-front { d: path('M136 91c32-55 122-61 150 0-42-17-82-15-115-26-12 12-22 20-35 26z'); }
.avatar-render.avatar-hair-longo .pc-hair-back { d: path('M126 88c17-78 151-90 168 2 12 72-8 172-25 242-14-68-16-158-59-164-43 6-45 96-59 164-17-70-37-170-25-244z'); }
.avatar-render.avatar-hair-cacheado .pc-hair-back { d: path('M127 99c-3-65 68-96 120-76 45 17 61 58 46 121-11-24-25-37-43-44-10 18-28 21-43 8-21 11-43 8-57-8-11 14-19 27-23 44-8-19-9-34 0-45z'); }
.avatar-render.avatar-hair-raspado .pc-hair-back { d: path('M142 96c19-48 118-48 136 0-26-12-50-18-68-18-18 0-42 6-68 18z'); }
.avatar-render.avatar-hair-coque .pc-hair-back { d: path('M132 90c15-67 141-80 156 0 8 45-9 83-9 83-13-41-27-67-69-72-42 5-56 31-69 72 0 0-17-38-9-83z M177 27c22-22 60-22 82 0 18 18 13 51-20 58-31 7-75-7-62-58z'); }

.avatar-render.avatar-eyes-redondo .pc-eye { rx: 17; ry: 12; }
.avatar-render.avatar-eyes-oriental .pc-eye { rx: 18; ry: 6; }
.avatar-render.avatar-eyes-sereno .pc-eye { rx: 18; ry: 4; fill: rgba(64, 43, 30, .34); }
.avatar-render.avatar-eyes-sereno .pc-iris { opacity: 0; }
.avatar-render.avatar-nose-delicado .pc-nose { stroke-width: 3; opacity: .38; }
.avatar-render.avatar-nose-marcante .pc-nose { stroke-width: 6; opacity: .62; }
.avatar-render.avatar-torso-leve .pc-character { transform: scaleX(calc(var(--build-scale) - .045)); }
.avatar-render.avatar-torso-forte .pc-character { transform: scaleX(calc(var(--build-scale) + .055)); }
.avatar-render.avatar-outfit-chef_moderno .pc-body { fill: #88b8dd; }
.avatar-render.avatar-outfit-cozy_home .pc-body { fill: #f2b6a2; }
.avatar-render.avatar-outfit-premium_futuro .pc-body { fill: #c7b4ff; }
.avatar-render.avatar-feet-tenis .pc-foot { fill: #fff; stroke: rgba(74, 43, 24, .22); stroke-width: 2; }
.avatar-render.avatar-feet-sapato_chef .pc-foot { fill: #27211d; }

/* Pontos de seleção pequenos, como marcador de editor, não círculos gigantes. */
.avatar-click-zone {
    width: 16px !important;
    height: 16px !important;
    min-width: 16px !important;
    min-height: 16px !important;
    max-width: 16px !important;
    max-height: 16px !important;
    border-radius: 50% !important;
    border: 2px solid rgba(255,255,255,.95) !important;
    background: radial-gradient(circle at 35% 30%, #fff 0 2px, #ffd37b 3px, #e88737 72%) !important;
    box-shadow: 0 0 0 4px rgba(232, 139, 58, .16), 0 5px 11px rgba(63, 38, 22, .20) !important;
    opacity: .86 !important;
    transform: translate(-50%, -50%) !important;
}
.avatar-click-zone:hover,
.avatar-click-zone:focus-visible {
    transform: translate(-50%, -50%) scale(1.18) !important;
    opacity: 1 !important;
    outline: none !important;
}
.avatar-zone-hair { left: 50% !important; top: 16% !important; }
.avatar-zone-eyes { left: 50% !important; top: 25% !important; }
.avatar-zone-nose { left: 50% !important; top: 30% !important; }
.avatar-zone-ears { left: 35% !important; top: 25% !important; }
.avatar-zone-torso { left: 50% !important; top: 50% !important; }
.avatar-zone-outfit { left: 61% !important; top: 58% !important; }
.avatar-zone-waist { left: 50% !important; top: 66% !important; }
.avatar-zone-arms { left: 32% !important; top: 55% !important; }
.avatar-zone-hands { left: 70% !important; top: 70% !important; }
.avatar-zone-legs { left: 50% !important; top: 80% !important; }
.avatar-zone-feet { left: 50% !important; top: 92% !important; }

/* Esconde o frame antigo quando existir por cache/markup antigo. */
.avatar-image-editor-frame,
.avatar-editor-base-image { display: none !important; }

@media (max-width: 860px) {
    .avatar-render { width: min(100%, 270px) !important; height: 460px !important; }
    .pocket-settings-step-aparencia .avatar-game-stage { height: 500px !important; min-height: 500px !important; }
}

/* Correção: evitar mistura de camadas de avatar.
   A tela de aparência passa a usar uma única base visual por vez (masculina OU feminina). */
.pocket-settings-step-aparencia .avatar-game-stage {
    width: min(100%, 360px) !important;
    min-height: 520px !important;
    height: 520px !important;
    display: grid !important;
    place-items: center !important;
    overflow: visible !important;
}

.avatar-game-image-avatar {
    display: block !important;
    width: min(100%, 285px) !important;
    height: 480px !important;
    object-fit: contain !important;
    object-position: center bottom !important;
    filter: drop-shadow(0 22px 24px rgba(63, 38, 22, .20)) !important;
    pointer-events: none !important;
    user-select: none !important;
}

/* Garante que nenhum render antigo fique por cima caso o navegador mantenha cache parcial. */
.pocket-settings-step-aparencia .avatar-render,
.pocket-settings-step-aparencia .avatar-sim-character,
.pocket-settings-step-aparencia .avatar-image-editor-frame,
.pocket-settings-step-aparencia .avatar-editor-base-image {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
}

.pocket-settings-step-aparencia .avatar-click-zone {
    z-index: 20 !important;
}


/* Correção definitiva: avatar de aparência com uma única base visível, sem sobreposição de renders antigos */
.pocket-settings-step-aparencia .avatar-game-stage {
    isolation: isolate;
}
.pocket-settings-step-aparencia .avatar-render,
.pocket-settings-step-aparencia .avatar-render-svg,
.pocket-settings-step-aparencia .avatar-sim-character,
.pocket-settings-step-aparencia .avatar-sim-head,
.pocket-settings-step-aparencia .avatar-sim-hair,
.pocket-settings-step-aparencia .avatar-sim-body,
.pocket-settings-step-aparencia .avatar-sim-arm,
.pocket-settings-step-aparencia .avatar-sim-leg,
.pocket-settings-step-aparencia .avatar-sim-shadow {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}
.pocket-settings-step-aparencia .avatar-game-image-avatar {
    display: block !important;
    position: relative !important;
    z-index: 2 !important;
    width: min(74%, 255px) !important;
    max-height: 455px !important;
    object-fit: contain !important;
    margin: 8px auto 0 !important;
    filter: drop-shadow(0 20px 18px rgba(92, 60, 37, .22));
    transform: none !important;
    animation: none !important;
}
.pocket-settings-step-aparencia .avatar-click-zone {
    z-index: 5 !important;
}


/* =========================================================
   Ajuste solicitado: avatar base substituído por personagem casual
   estilo jogo social, sem avental e sem sobreposição de camadas.
   ========================================================= */
.pocket-settings-step-aparencia .avatar-game-stage {
    width: min(100%, 380px) !important;
    height: 540px !important;
    min-height: 540px !important;
    display: grid !important;
    place-items: center !important;
    isolation: isolate !important;
    overflow: visible !important;
}
.pocket-settings-step-aparencia .avatar-game-image-avatar,
.pocket-settings-side .assistant-image-avatar {
    content: normal !important;
    display: block !important;
    object-fit: contain !important;
    object-position: center bottom !important;
    transform: none !important;
    animation: none !important;
    filter: drop-shadow(0 20px 20px rgba(61, 42, 28, .22)) !important;
}
.pocket-settings-step-aparencia .avatar-game-image-avatar {
    width: min(82%, 290px) !important;
    height: 500px !important;
    max-height: 500px !important;
    position: relative !important;
    z-index: 2 !important;
}
.pocket-settings-step-aparencia .avatar-render,
.pocket-settings-step-aparencia .avatar-render-svg,
.pocket-settings-step-aparencia .avatar-sim-character,
.pocket-settings-step-aparencia .avatar-sim-head,
.pocket-settings-step-aparencia .avatar-sim-hair,
.pocket-settings-step-aparencia .avatar-sim-body,
.pocket-settings-step-aparencia .avatar-sim-arm,
.pocket-settings-step-aparencia .avatar-sim-leg,
.pocket-settings-step-aparencia .avatar-sim-shadow,
.pocket-settings-step-aparencia .avatar-image-editor-frame,
.pocket-settings-step-aparencia .avatar-editor-base-image {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}
.pocket-settings-step-aparencia .avatar-click-zone {
    width: 13px !important;
    height: 13px !important;
    min-width: 13px !important;
    min-height: 13px !important;
    max-width: 13px !important;
    max-height: 13px !important;
    z-index: 8 !important;
    box-shadow: 0 0 0 3px rgba(232, 139, 58, .14), 0 4px 9px rgba(63, 38, 22, .18) !important;
}
.avatar-zone-hair { left: 50% !important; top: 15% !important; }
.avatar-zone-eyes { left: 50% !important; top: 25% !important; }
.avatar-zone-nose { left: 50% !important; top: 30% !important; }
.avatar-zone-ears { left: 36% !important; top: 25% !important; }
.avatar-zone-torso { left: 50% !important; top: 48% !important; }
.avatar-zone-outfit { left: 61% !important; top: 53% !important; }
.avatar-zone-waist { left: 50% !important; top: 62% !important; }
.avatar-zone-arms { left: 32% !important; top: 53% !important; }
.avatar-zone-hands { left: 70% !important; top: 67% !important; }
.avatar-zone-legs { left: 50% !important; top: 78% !important; }
.avatar-zone-feet { left: 50% !important; top: 92% !important; }

/* Remover argolas/círculos centrais do caderno: fica livro, não fichário. */
.pocket-book::before,
.pocket-book-home::before,
.pocket-book-recipes::before,
.pocket-book-settings::before,
.pocket-book-store::before,
.pocket-book-recipe::before,
.pocket-book-recipe-open::before {
    content: none !important;
    display: none !important;
    background: none !important;
}
.pocket-book::after,
.pocket-book-home::after,
.pocket-book-recipes::after,
.pocket-book-settings::after,
.pocket-book-store::after,
.pocket-book-recipe::after,
.pocket-book-recipe-open::after {
    width: 24px !important;
    background: linear-gradient(90deg, transparent, rgba(73,43,24,.16) 42%, rgba(255,255,255,.38) 50%, rgba(73,43,24,.12) 58%, transparent) !important;
}

/* =========================================================
   Avatar base refeito: personagem completo, sem montagem por CSS.
   Mantém apenas a imagem SVG final e os pontos de clique pequenos.
   ========================================================= */
.avatar-game-stage {
    width: min(100%, 390px) !important;
    min-height: 560px !important;
    margin: 0 auto !important;
    position: relative !important;
    display: grid !important;
    place-items: center !important;
    overflow: visible !important;
}

.avatar-game-image-avatar,
.assistant-image-avatar {
    display: block !important;
    object-fit: contain !important;
    object-position: center bottom !important;
    image-rendering: auto !important;
}

.avatar-game-image-avatar {
    width: min(100%, 320px) !important;
    height: 520px !important;
    max-height: 74vh !important;
    filter: drop-shadow(0 22px 22px rgba(79, 49, 29, .20)) !important;
    animation: none !important;
}

.assistant-image-avatar {
    max-width: min(100%, 275px) !important;
    max-height: 430px !important;
    filter: drop-shadow(0 16px 18px rgba(79, 49, 29, .16)) !important;
}

.avatar-sim-character,
.avatar-sim-head,
.avatar-sim-hair,
.avatar-sim-body,
.avatar-sim-arm,
.avatar-sim-leg,
.avatar-sim-foot,
.avatar-sim-neck,
.avatar-sim-shadow,
.avatar-sim-hand,
.avatar-sim-waist,
.avatar-sim-apron,
.avatar-sim-eye,
.avatar-sim-nose,
.avatar-sim-mouth,
.avatar-sim-ear {
    display: none !important;
}

.avatar-click-zone {
    width: 18px !important;
    height: 18px !important;
    border-radius: 999px !important;
    border: 2px solid rgba(255, 255, 255, .96) !important;
    background: rgba(232, 139, 58, .72) !important;
    box-shadow: 0 4px 10px rgba(79, 49, 29, .22), inset 0 0 0 2px rgba(255,255,255,.28) !important;
}
.avatar-click-zone:hover,
.avatar-click-zone:focus-visible {
    background: rgba(210, 104, 35, .92) !important;
    transform: scale(1.12) !important;
    outline: none !important;
}

.avatar-zone-hair { left: 186px !important; top: 74px !important; }
.avatar-zone-eyes { left: 185px !important; top: 155px !important; }
.avatar-zone-nose { left: 185px !important; top: 186px !important; }
.avatar-zone-ears { left: 136px !important; top: 174px !important; }
.avatar-zone-torso { left: 186px !important; top: 315px !important; }
.avatar-zone-outfit { left: 220px !important; top: 348px !important; }
.avatar-zone-waist { left: 186px !important; top: 450px !important; }
.avatar-zone-arms { left: 118px !important; top: 378px !important; }
.avatar-zone-hands { left: 105px !important; top: 500px !important; }
.avatar-zone-legs { left: 186px !important; top: 600px !important; }
.avatar-zone-feet { left: 186px !important; top: 748px !important; }

.avatar-game-hint {
    bottom: -2px !important;
    font-size: .78rem !important;
    padding: 7px 11px !important;
}

/* =========================================================
   Correção final do avatar: deixa de usar boneco SVG/CSS e
   passa a exibir personagem artístico base em WebP.
   ========================================================= */
.avatar-render,
.avatar-render-svg,
.avatar-sim-character,
.avatar-sim-head,
.avatar-sim-hair,
.avatar-sim-body,
.avatar-sim-arm,
.avatar-sim-leg,
.avatar-sim-foot,
.avatar-sim-neck,
.avatar-sim-shadow,
.avatar-sim-hand,
.avatar-sim-waist,
.avatar-sim-apron,
.avatar-sim-eye,
.avatar-sim-nose,
.avatar-sim-mouth,
.avatar-image-editor-frame,
.avatar-editor-base-image {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

.pocket-settings-step-aparencia .avatar-game-stage {
    width: min(100%, 390px) !important;
    height: 590px !important;
    min-height: 590px !important;
    margin: 0 auto !important;
    display: grid !important;
    place-items: center !important;
    position: relative !important;
    overflow: visible !important;
    isolation: isolate !important;
    background: radial-gradient(circle at 50% 83%, rgba(94,61,35,.20), transparent 28%) !important;
}

.pocket-settings-step-aparencia .avatar-game-image-avatar {
    display: block !important;
    width: auto !important;
    height: min(570px, 74vh) !important;
    max-width: 92% !important;
    object-fit: contain !important;
    object-position: center bottom !important;
    position: relative !important;
    z-index: 2 !important;
    transform: none !important;
    animation: none !important;
    filter: drop-shadow(0 24px 22px rgba(75,45,25,.22)) !important;
    pointer-events: none !important;
    user-select: none !important;
}

.pocket-settings-side .assistant-image-avatar,
.pocket-book-home .assistant-image-avatar,
.avatar-store-preview img,
.assistant-image-avatar {
    display: block !important;
    width: auto !important;
    max-width: min(92%, 310px) !important;
    max-height: 470px !important;
    object-fit: contain !important;
    object-position: center bottom !important;
    transform: none !important;
    animation: none !important;
    filter: drop-shadow(0 18px 18px rgba(75,45,25,.18)) !important;
}

.pocket-book-home .assistant-image-avatar {
    max-height: 330px !important;
    max-width: min(86%, 230px) !important;
}

.pocket-settings-step-aparencia .avatar-click-zone {
    width: 11px !important;
    height: 11px !important;
    min-width: 11px !important;
    min-height: 11px !important;
    max-width: 11px !important;
    max-height: 11px !important;
    border-radius: 999px !important;
    border: 1px solid rgba(123,74,37,.35) !important;
    background: radial-gradient(circle at 35% 30%, #fff7e9 0 2px, #f2b45d 3px, #cc7731 100%) !important;
    box-shadow: 0 0 0 3px rgba(207,122,49,.13), 0 3px 8px rgba(63,38,22,.17) !important;
    opacity: .88 !important;
    z-index: 8 !important;
}
.pocket-settings-step-aparencia .avatar-click-zone:hover,
.pocket-settings-step-aparencia .avatar-click-zone:focus-visible {
    transform: translate(-50%, -50%) scale(1.28) !important;
    opacity: 1 !important;
}

.pocket-settings-step-aparencia .avatar-zone-hair { left: 50% !important; top: 12% !important; }
.pocket-settings-step-aparencia .avatar-zone-eyes { left: 50% !important; top: 20% !important; }
.pocket-settings-step-aparencia .avatar-zone-nose { left: 50% !important; top: 24% !important; }
.pocket-settings-step-aparencia .avatar-zone-ears { left: 37% !important; top: 20% !important; }
.pocket-settings-step-aparencia .avatar-zone-torso { left: 50% !important; top: 39% !important; }
.pocket-settings-step-aparencia .avatar-zone-outfit { left: 62% !important; top: 43% !important; }
.pocket-settings-step-aparencia .avatar-zone-waist { left: 50% !important; top: 52% !important; }
.pocket-settings-step-aparencia .avatar-zone-arms { left: 31% !important; top: 45% !important; }
.pocket-settings-step-aparencia .avatar-zone-hands { left: 70% !important; top: 58% !important; }
.pocket-settings-step-aparencia .avatar-zone-legs { left: 50% !important; top: 72% !important; }
.pocket-settings-step-aparencia .avatar-zone-feet { left: 50% !important; top: 91% !important; }

@media (max-width: 860px) {
    .pocket-settings-step-aparencia .avatar-game-stage {
        height: 520px !important;
        min-height: 520px !important;
    }
    .pocket-settings-step-aparencia .avatar-game-image-avatar {
        height: 500px !important;
        max-height: 500px !important;
    }
}

/* =========================================================
   Correção final do caderno de receitas - 2026-05-30
   A virada agora simula a folha direita indo para a esquerda.
   A referência fica na página esquerda após a virada e a direita fica em branco.
   ========================================================= */
.pocket-book-recipe-open {
    perspective: 2200px !important;
    transform-style: preserve-3d !important;
    overflow: visible !important;
}

.pocket-book-recipe-open .pocket-page {
    position: relative !important;
    overflow: hidden !important;
}

.pocket-book-recipe-open .pocket-recipe-page-preparo {
    overflow: visible !important;
    perspective: 2200px !important;
    transform-style: preserve-3d !important;
}

.recipe-spread-panel {
    position: absolute !important;
    inset: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    box-sizing: border-box !important;
    transition: opacity .26s ease, transform .34s ease !important;
}

.recipe-left-front,
.recipe-right-prep {
    opacity: 1 !important;
    pointer-events: auto !important;
    transform: translateX(0) !important;
}

.recipe-left-reference,
.recipe-right-blank {
    opacity: 0 !important;
    pointer-events: none !important;
    transform: translateX(8px) !important;
}

.pocket-book-recipe-open.is-showing-reference .recipe-left-front,
.pocket-book-recipe-open.is-showing-reference .recipe-right-prep {
    opacity: 0 !important;
    pointer-events: none !important;
    transform: translateX(-8px) !important;
}

.pocket-book-recipe-open.is-showing-reference .recipe-left-reference,
.pocket-book-recipe-open.is-showing-reference .recipe-right-blank {
    opacity: 1 !important;
    pointer-events: auto !important;
    transform: translateX(0) !important;
}

.recipe-turning-sheet {
    position: absolute !important;
    top: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100% !important;
    border-radius: 5px 22px 22px 5px !important;
    background:
        linear-gradient(90deg, rgba(105, 66, 33, .10), rgba(255,255,255,.08) 14%, transparent 35%, rgba(255,255,255,.24) 74%, rgba(105, 66, 33, .07)),
        repeating-linear-gradient(to bottom, transparent 0, transparent 35px, rgba(111, 74, 47, .04) 36px),
        radial-gradient(circle at 76% 14%, rgba(255,255,255,.48), transparent 18rem),
        linear-gradient(135deg, rgba(255, 250, 239, .99), rgba(255, 238, 203, .98)) !important;
    border: 1px solid var(--pocket-line) !important;
    box-shadow: -22px 18px 30px rgba(72, 43, 22, .16), inset 0 0 20px rgba(111, 74, 47, .035) !important;
    transform-origin: left center !important;
    transform: rotateY(0deg) !important;
    backface-visibility: hidden !important;
    -webkit-backface-visibility: hidden !important;
    pointer-events: none !important;
    opacity: 0 !important;
    z-index: 20 !important;
}

.pocket-book-recipe-open.is-turning .recipe-turning-sheet {
    opacity: 1 !important;
    animation: pocketRightPageTurn .82s cubic-bezier(.18,.72,.24,1) both !important;
}

@keyframes pocketRightPageTurn {
    0% {
        transform: rotateY(0deg);
        opacity: 1;
        filter: brightness(1);
    }
    48% {
        transform: rotateY(-96deg);
        opacity: .96;
        filter: brightness(.96);
    }
    100% {
        transform: rotateY(-180deg);
        opacity: 0;
        filter: brightness(1.02);
    }
}

.recipe-page-turn-button {
    margin-top: auto !important;
    align-self: flex-start !important;
}

.recipe-description,
.recipe-reference-box,
.recipe-reference-actions,
.recipe-cover-frame,
.recipe-cover-placeholder,
.recipe-meta-grid {
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
}

.pocket-recipe-page-preparo .recipe-description {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow: hidden !important;
}

.recipe-blank-page {
    flex: 1 1 auto !important;
    width: 100% !important;
    min-height: 100% !important;
    border-radius: 16px !important;
    background:
        repeating-linear-gradient(to bottom, transparent 0, transparent 35px, rgba(111, 74, 47, .032) 36px),
        radial-gradient(circle at 50% 16%, rgba(255,255,255,.36), transparent 18rem) !important;
}

/* Neutraliza regras antigas do efeito anterior que ainda aparecem no arquivo. */
.pocket-book-recipe-open.is-showing-reference .recipe-page-sheet,
.pocket-book-recipe-open.is-turning .recipe-page-sheet {
    transform: none !important;
    filter: none !important;
}

.recipe-page-sheet,
.recipe-page-face,
.recipe-page-face-front,
.recipe-page-face-back,
.recipe-page-face-right-front,
.recipe-page-face-right-back {
    animation: none !important;
}

@media (max-width: 860px) {
    .recipe-spread-panel {
        position: relative !important;
        inset: auto !important;
        height: auto !important;
    }

    .recipe-left-reference,
    .recipe-right-blank,
    .recipe-turning-sheet {
        display: none !important;
    }

    .pocket-book-recipe-open.is-showing-reference .recipe-left-front,
    .pocket-book-recipe-open.is-showing-reference .recipe-right-prep {
        display: none !important;
    }

    .pocket-book-recipe-open.is-showing-reference .recipe-left-reference,
    .pocket-book-recipe-open.is-showing-reference .recipe-right-blank {
        display: flex !important;
        opacity: 1 !important;
        transform: none !important;
    }
}

/* Ajuste 2026-05-30: contenção do caderno e virada de página mais lenta/realista */
@media (min-width: 861px) {
    .pocket-book,
    .pocket-book-recipes,
    .pocket-book-recipe-open {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
        align-items: stretch !important;
    }

    .pocket-page,
    .pocket-page-left,
    .pocket-page-right {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }

    .pocket-page > *,
    .recipe-spread-panel > *,
    .recipe-list-grid > *,
    .recipe-dashboard-grid > *,
    .pocket-grid-cards > *,
    .pocket-form > * {
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }
}

/* Meu Caderno: receitas sempre dentro da folha */
.recipe-list-grid {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    box-sizing: border-box !important;
    padding-right: 4px !important;
}

.recipe-list-card,
.recipe-dashboard-card,
.pocket-mini-card,
.pocket-reference-card,
.pocket-form-section,
.pocket-note,
.pocket-demo-meter,
.recipe-spread-panel,
.recipe-description,
.recipe-reference-box,
.recipe-reference-actions,
.recipe-meta-grid,
.recipe-cover-frame,
.recipe-cover-placeholder {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
}

.recipe-list-card {
    grid-template-columns: 76px minmax(0, 1fr) !important;
    align-items: center !important;
}

.recipe-list-card img,
.recipe-list-placeholder {
    width: 76px !important;
    height: 68px !important;
    flex: 0 0 76px !important;
}

.recipe-list-card strong,
.recipe-list-card small,
.recipe-list-card span {
    max-width: 100% !important;
    overflow-wrap: anywhere !important;
}

.recipe-dashboard-grid {
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
}

/* Receita aberta: folha contida, sem estouro e com texto interno seguro */
.pocket-book-recipe-open .pocket-page {
    isolation: isolate !important;
    contain: layout paint !important;
}

.pocket-book-recipe-open .recipe-spread-panel {
    padding: clamp(18px, 3vw, 34px) !important;
    gap: 12px !important;
    overflow: hidden !important;
}

.pocket-book-recipe-open h1 {
    font-size: clamp(1.5rem, 2.5vw, 2.2rem) !important;
    line-height: 1.06 !important;
    margin-bottom: 10px !important;
}

.pocket-book-recipe-open h2 {
    font-size: clamp(1.18rem, 2vw, 1.55rem) !important;
    margin: 0 0 10px !important;
}

.pocket-book-recipe-open .recipe-cover-frame,
.pocket-book-recipe-open .recipe-cover-placeholder {
    height: clamp(145px, 23vh, 230px) !important;
    margin: 10px 0 !important;
    overflow: hidden !important;
}

.pocket-book-recipe-open .recipe-cover-frame img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

.pocket-book-recipe-open .recipe-meta-grid {
    gap: 8px !important;
    margin: 10px 0 !important;
}

.pocket-book-recipe-open .recipe-meta-grid div {
    padding: 10px !important;
    border-radius: 12px !important;
}

.pocket-book-recipe-open .recipe-description {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    max-height: 100% !important;
    padding: 14px !important;
    border-radius: 16px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    line-height: 1.58 !important;
}

.pocket-book-recipe-open .recipe-reference-box {
    flex: 0 1 auto !important;
    padding: 14px !important;
    border-radius: 16px !important;
    overflow: hidden !important;
}

.pocket-book-recipe-open .recipe-reference-actions {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
}

.pocket-book-recipe-open .recipe-reference-actions .pocket-button,
.pocket-book-recipe-open .recipe-page-turn-button {
    width: auto !important;
    max-width: 100% !important;
    white-space: normal !important;
}

/* Reduz sombra quadrada externa do livro */
.pocket-book {
    filter: drop-shadow(0 14px 26px rgba(101, 67, 33, .10)) !important;
}

/* Efeito de página: mais lento e com sensação de folha, não slide */
.recipe-turning-sheet {
    opacity: 0 !important;
    pointer-events: none !important;
    position: absolute !important;
    top: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100% !important;
    transform-origin: left center !important;
    transform-style: preserve-3d !important;
    backface-visibility: hidden !important;
    background:
        linear-gradient(90deg, rgba(92,54,28,.22), rgba(255,250,239,.98) 13%, rgba(255,239,202,.98) 100%) !important;
    box-shadow: -10px 0 22px rgba(73, 44, 24, .12), inset 16px 0 26px rgba(92, 54, 28, .10) !important;
    border-radius: 5px 22px 22px 5px !important;
    z-index: 40 !important;
}

.pocket-book-recipe-open.is-turning .recipe-turning-sheet {
    opacity: 1 !important;
    animation: pocketPageTurnSlow 1.35s cubic-bezier(.18,.72,.18,1) both !important;
}

.pocket-book-recipe-open.is-turning::after {
    animation: pocketPageTurnCenterShadow 1.35s ease-in-out both !important;
}

@keyframes pocketPageTurnSlow {
    0% {
        opacity: 0;
        transform: perspective(1800px) rotateY(0deg) translateZ(1px);
        box-shadow: -6px 0 14px rgba(73,44,24,.08), inset 10px 0 20px rgba(92,54,28,.08);
        filter: brightness(1);
    }
    12% {
        opacity: 1;
    }
    38% {
        opacity: 1;
        transform: perspective(1800px) rotateY(-56deg) translateZ(1px);
        box-shadow: -26px 0 42px rgba(73,44,24,.18), inset 20px 0 36px rgba(92,54,28,.12);
        filter: brightness(.98);
    }
    72% {
        opacity: 1;
        transform: perspective(1800px) rotateY(-138deg) translateZ(1px);
        box-shadow: -34px 0 52px rgba(73,44,24,.20), inset -12px 0 26px rgba(255,255,255,.20);
        filter: brightness(.94);
    }
    100% {
        opacity: 0;
        transform: perspective(1800px) rotateY(-180deg) translateZ(1px);
        box-shadow: -8px 0 18px rgba(73,44,24,.08);
        filter: brightness(1);
    }
}

@keyframes pocketPageTurnCenterShadow {
    0%, 100% { opacity: .72; }
    35%, 70% { opacity: .94; }
}

/* Neutraliza animações antigas rápidas que ainda existam no arquivo. */
.pocket-book-recipe-open.is-turning .pocket-page-right {
    animation: none !important;
}

@media (max-width: 860px) {
    .recipe-list-card {
        grid-template-columns: 68px minmax(0, 1fr) !important;
    }

    .recipe-list-card img,
    .recipe-list-placeholder {
        width: 68px !important;
        height: 62px !important;
    }

    .pocket-book-recipe-open .recipe-description {
        max-height: none !important;
        overflow: visible !important;
    }
}


/* =========================================================
   Correção 2026-05-30 - navegação, caderno claro e virada realista
   Esta seção deve ficar no fim do arquivo para sobrepor regras antigas.
   ========================================================= */

/* Visual geral mais claro, como nas primeiras versões aprovadas. */
:root {
    --pocket-paper: #fffaf0 !important;
    --pocket-paper-strong: #fff3d8 !important;
    --pocket-cream: #fbeccf !important;
    --pocket-line: rgba(111, 74, 47, .12) !important;
    --pocket-shadow: 0 10px 22px rgba(101, 67, 33, .08) !important;
}

body {
    background:
        radial-gradient(circle at top left, rgba(246, 200, 107, .14), transparent 30rem),
        radial-gradient(circle at bottom right, rgba(185, 216, 170, .16), transparent 28rem),
        linear-gradient(135deg, #fffaf1, #f8e8c9) !important;
}

/* O caderno deve parecer livro com borda, não bloco quadrado pesado. */
.pocket-book,
.pocket-book-home,
.pocket-book-recipes,
.pocket-book-settings,
.pocket-book-store,
.pocket-book-recipe,
.pocket-book-recipe-open {
    position: relative !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    gap: 0 !important;
    filter: drop-shadow(0 8px 16px rgba(86, 56, 31, .09)) !important;
    box-shadow: none !important;
    background: transparent !important;
    border-radius: 26px !important;
    overflow: visible !important;
}

/* Remover argolas/ferragens e qualquer sombra central parecida com fichário. */
.pocket-book::before,
.pocket-book-home::before,
.pocket-book-recipes::before,
.pocket-book-settings::before,
.pocket-book-store::before,
.pocket-book-recipe::before,
.pocket-book-recipe-open::before {
    content: none !important;
    display: none !important;
}

.pocket-book::after,
.pocket-book-home::after,
.pocket-book-recipes::after,
.pocket-book-settings::after,
.pocket-book-store::after,
.pocket-book-recipe::after,
.pocket-book-recipe-open::after {
    content: '' !important;
    position: absolute !important;
    top: 16px !important;
    bottom: 16px !important;
    left: 50% !important;
    width: 18px !important;
    transform: translateX(-50%) !important;
    pointer-events: none !important;
    z-index: 5 !important;
    background:
        linear-gradient(90deg, transparent, rgba(84, 51, 28, .12) 46%, rgba(255,255,255,.36) 50%, rgba(84, 51, 28, .09) 56%, transparent) !important;
    opacity: .75 !important;
    animation: none !important;
}

/* Páginas claras e bordas discretas. */
.pocket-page,
.pocket-page-left,
.pocket-page-right {
    background:
        radial-gradient(circle at 18% 9%, rgba(255,255,255,.72), transparent 15rem),
        repeating-linear-gradient(to bottom, transparent 0, transparent 35px, rgba(111,74,47,.035) 36px),
        linear-gradient(135deg, #fffaf0, #f8e9c7) !important;
    border: 1px solid rgba(111,74,47,.12) !important;
    box-shadow:
        inset 0 0 0 1px rgba(255,255,255,.32),
        inset 0 0 18px rgba(111,74,47,.025) !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
}

.pocket-page-left {
    border-radius: 28px 5px 5px 28px !important;
    border-right: 0 !important;
}

.pocket-page-right {
    border-radius: 5px 28px 28px 5px !important;
    border-left: 0 !important;
}

.pocket-page::before,
.pocket-page-left::before,
.pocket-page-right::before,
.pocket-page-left::after,
.pocket-page-right::after {
    content: none !important;
    display: none !important;
}

/* Meu Caderno: nada deve estourar a folha. */
.recipe-list-grid,
.recipe-dashboard-grid,
.pocket-grid-links,
.pocket-grid-cards {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
}

.recipe-list-grid {
    overflow-y: auto !important;
    padding-right: 6px !important;
    max-height: calc(100% - 170px) !important;
}

.recipe-list-card,
.recipe-dashboard-card,
.pocket-mini-card,
.pocket-reference-card,
.pocket-form-section,
.pocket-note,
.recipe-spread-panel,
.recipe-description,
.recipe-reference-box,
.recipe-reference-actions,
.recipe-meta-grid,
.recipe-cover-frame,
.recipe-cover-placeholder {
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
}

/* Receita aberta: painéis ficam dentro da folha. */
.pocket-book-recipe-open {
    perspective: 2600px !important;
    transform-style: preserve-3d !important;
}

.pocket-book-recipe-open .pocket-page {
    position: relative !important;
    overflow: hidden !important;
    contain: layout paint !important;
}

.pocket-book-recipe-open .recipe-spread-panel {
    position: absolute !important;
    inset: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    width: 100% !important;
    height: 100% !important;
    padding: clamp(18px, 3vw, 34px) !important;
    overflow: hidden !important;
    transition: opacity .18s ease !important;
}

.recipe-left-front,
.recipe-right-prep {
    opacity: 1 !important;
    pointer-events: auto !important;
}

.recipe-left-reference,
.recipe-right-blank {
    opacity: 0 !important;
    pointer-events: none !important;
}

.pocket-book-recipe-open.is-showing-reference .recipe-left-front,
.pocket-book-recipe-open.is-showing-reference .recipe-right-prep {
    opacity: 0 !important;
    pointer-events: none !important;
}

.pocket-book-recipe-open.is-showing-reference .recipe-left-reference,
.pocket-book-recipe-open.is-showing-reference .recipe-right-blank {
    opacity: 1 !important;
    pointer-events: auto !important;
}

.pocket-book-recipe-open h1 {
    font-size: clamp(1.42rem, 2.15vw, 2.05rem) !important;
    line-height: 1.08 !important;
    margin-bottom: 8px !important;
}

.pocket-book-recipe-open h2 {
    font-size: clamp(1.15rem, 1.75vw, 1.45rem) !important;
}

.pocket-book-recipe-open .recipe-description {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding: 14px !important;
    border-radius: 16px !important;
    line-height: 1.58 !important;
}

.pocket-book-recipe-open .recipe-cover-frame,
.pocket-book-recipe-open .recipe-cover-placeholder {
    height: clamp(140px, 22vh, 220px) !important;
    overflow: hidden !important;
}

/* Virada de página mais lenta e com troca de conteúdo no meio da animação. */
.recipe-turning-sheet {
    opacity: 0 !important;
    pointer-events: none !important;
    position: absolute !important;
    top: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100% !important;
    transform-origin: left center !important;
    transform-style: preserve-3d !important;
    backface-visibility: hidden !important;
    border-radius: 5px 28px 28px 5px !important;
    background:
        linear-gradient(90deg, rgba(93,57,31,.24), rgba(255,251,241,.99) 13%, rgba(255,244,218,.98) 100%) !important;
    box-shadow:
        -8px 0 16px rgba(73,44,24,.08),
        inset 14px 0 28px rgba(92,54,28,.09) !important;
    z-index: 40 !important;
    will-change: transform, opacity, box-shadow, filter !important;
}

.pocket-book-recipe-open.is-turning .recipe-turning-sheet {
    opacity: 1 !important;
}

.pocket-book-recipe-open.is-turning-forward .recipe-turning-sheet {
    animation: pocketRecipePageForward 2.35s cubic-bezier(.18,.67,.16,1) both !important;
}

.pocket-book-recipe-open.is-turning-back .recipe-turning-sheet {
    animation: pocketRecipePageBack 2.35s cubic-bezier(.18,.67,.16,1) both !important;
}

.pocket-book-recipe-open.is-turning .pocket-page-right,
.pocket-book-recipe-open.is-turning .recipe-page-sheet,
.pocket-book-recipe-open.is-turning .recipe-page-face,
.pocket-book-recipe-open.is-turning .recipe-page-face-front,
.pocket-book-recipe-open.is-turning .recipe-page-face-back,
.pocket-book-recipe-open.is-turning .recipe-page-face-right-front,
.pocket-book-recipe-open.is-turning .recipe-page-face-right-back {
    animation: none !important;
    transform: none !important;
    filter: none !important;
}

@keyframes pocketRecipePageForward {
    0% {
        opacity: 0;
        transform: perspective(2400px) rotateY(0deg) translateZ(2px);
        box-shadow: -6px 0 12px rgba(73,44,24,.06), inset 12px 0 22px rgba(92,54,28,.08);
        filter: brightness(1);
    }
    8% { opacity: 1; }
    34% {
        opacity: 1;
        transform: perspective(2400px) rotateY(-48deg) translateZ(2px);
        box-shadow: -28px 0 46px rgba(73,44,24,.18), inset 22px 0 36px rgba(92,54,28,.12);
        filter: brightness(.985);
    }
    58% {
        opacity: 1;
        transform: perspective(2400px) rotateY(-112deg) translateZ(2px);
        box-shadow: -36px 0 58px rgba(73,44,24,.20), inset -14px 0 26px rgba(255,255,255,.18);
        filter: brightness(.95);
    }
    88% { opacity: 1; }
    100% {
        opacity: 0;
        transform: perspective(2400px) rotateY(-180deg) translateZ(2px);
        box-shadow: -6px 0 14px rgba(73,44,24,.06);
        filter: brightness(1);
    }
}

@keyframes pocketRecipePageBack {
    0% {
        opacity: 0;
        transform: perspective(2400px) rotateY(-180deg) translateZ(2px);
        box-shadow: -6px 0 12px rgba(73,44,24,.06);
        filter: brightness(1);
    }
    8% { opacity: 1; }
    34% {
        opacity: 1;
        transform: perspective(2400px) rotateY(-112deg) translateZ(2px);
        box-shadow: -34px 0 52px rgba(73,44,24,.18), inset -14px 0 26px rgba(255,255,255,.18);
        filter: brightness(.96);
    }
    58% {
        opacity: 1;
        transform: perspective(2400px) rotateY(-48deg) translateZ(2px);
        box-shadow: -26px 0 42px rgba(73,44,24,.16), inset 22px 0 36px rgba(92,54,28,.10);
        filter: brightness(.985);
    }
    88% { opacity: 1; }
    100% {
        opacity: 0;
        transform: perspective(2400px) rotateY(0deg) translateZ(2px);
        box-shadow: -6px 0 14px rgba(73,44,24,.06);
        filter: brightness(1);
    }
}

.recipe-blank-page {
    flex: 1 1 auto !important;
    width: 100% !important;
    min-height: 100% !important;
    border-radius: 16px !important;
    background:
        repeating-linear-gradient(to bottom, transparent 0, transparent 35px, rgba(111, 74, 47, .026) 36px),
        radial-gradient(circle at 50% 16%, rgba(255,255,255,.28), transparent 18rem) !important;
}

/* Mobile não deve tentar simular livro 3D. */
@media (max-width: 860px) {
    .recipe-spread-panel {
        position: relative !important;
        inset: auto !important;
        height: auto !important;
    }

    .recipe-left-reference,
    .recipe-right-blank,
    .recipe-turning-sheet {
        display: none !important;
    }

    .pocket-book-recipe-open.is-showing-reference .recipe-left-front,
    .pocket-book-recipe-open.is-showing-reference .recipe-right-prep {
        display: none !important;
    }

    .pocket-book-recipe-open.is-showing-reference .recipe-left-reference,
    .pocket-book-recipe-open.is-showing-reference .recipe-right-blank {
        display: flex !important;
        opacity: 1 !important;
        transform: none !important;
    }

    .pocket-book,
    .pocket-book-home,
    .pocket-book-recipes,
    .pocket-book-settings,
    .pocket-book-store,
    .pocket-book-recipe,
    .pocket-book-recipe-open {
        filter: drop-shadow(0 6px 12px rgba(86, 56, 31, .08)) !important;
    }
}

/* ==========================================================
   Ajuste Pocket Croquette - sombra externa mínima do caderno
   Mantém profundidade apenas como borda suave, sem halo quadrado.
   ========================================================== */
.pocket-book,
.pocket-book-home,
.pocket-book-recipes,
.pocket-book-settings,
.pocket-book-store,
.pocket-book-recipe,
.pocket-book-recipe-open {
    filter: drop-shadow(0 2px 4px rgba(101, 67, 33, .07)) !important;
    box-shadow:
        0 2px 5px rgba(63, 51, 40, .045),
        inset 0 0 0 1px rgba(255, 255, 255, .38) !important;
}

.pocket-page,
.pocket-page-left,
.pocket-page-right {
    box-shadow: none !important;
}

.pocket-page-left {
    box-shadow: inset -8px 0 13px rgba(84, 48, 26, .055), inset 0 0 0 1px rgba(255,255,255,.36) !important;
}

.pocket-page-right {
    box-shadow: inset 8px 0 13px rgba(84, 48, 26, .055), inset 0 0 0 1px rgba(255,255,255,.36) !important;
}

.pocket-book::after,
.pocket-book-home::after,
.pocket-book-recipes::after,
.pocket-book-settings::after,
.pocket-book-store::after,
.pocket-book-recipe::after,
.pocket-book-recipe-open::after {
    background:
        linear-gradient(90deg, transparent, rgba(48, 27, 15, .12) 36%, rgba(255,255,255,.34) 50%, rgba(48, 27, 15, .09) 64%, transparent) !important;
    opacity: .72 !important;
}

@media (max-width: 860px) {
    .pocket-book,
    .pocket-book-home,
    .pocket-book-recipes,
    .pocket-book-settings,
    .pocket-book-store,
    .pocket-book-recipe,
    .pocket-book-recipe-open {
        filter: drop-shadow(0 1px 3px rgba(86, 56, 31, .055)) !important;
        box-shadow: 0 1px 3px rgba(63, 51, 40, .035) !important;
    }
}

/* =========================================================
   Pocket Croquette - Avatar chef editável com personagem base
   Correção 2026-06-03
   ========================================================= */
.pocket-settings-step-avatar .assistant-image-avatar,
.pocket-settings-step-aparencia .avatar-game-image-avatar,
.pocket-settings-step-aparencia .assistant-image-avatar {
    object-fit: contain !important;
    object-position: center bottom !important;
    animation: none !important;
    transform: none !important;
}

.pocket-settings-step-aparencia .avatar-game-stage {
    --avatar-skin: #dca979;
    --avatar-hair: #5a3828;
    --avatar-eye: #3f8f9f;
    --avatar-outfit: #ffffff;
    width: min(100%, 390px) !important;
    height: 590px !important;
    min-height: 590px !important;
    background: radial-gradient(circle at 50% 86%, rgba(91,61,37,.14), transparent 30%) !important;
    border-radius: 24px !important;
}

.pocket-settings-step-aparencia .avatar-game-image-avatar {
    height: min(560px, 72vh) !important;
    max-width: 94% !important;
    filter: drop-shadow(0 12px 14px rgba(76, 49, 31, .12)) !important;
    z-index: 2 !important;
}

.pocket-settings-side .assistant-image-avatar,
.pocket-book-home .assistant-image-avatar {
    filter: drop-shadow(0 10px 12px rgba(76, 49, 31, .10)) !important;
}

.avatar-live-tint {
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    width: 260px !important;
    height: 520px !important;
    transform: translate(-50%, -50%) !important;
    pointer-events: none !important;
    z-index: 3 !important;
    opacity: .22 !important;
    mix-blend-mode: multiply !important;
}

.avatar-live-tint-skin {
    background: var(--avatar-skin) !important;
    clip-path: polygon(40% 13%, 60% 13%, 66% 24%, 61% 34%, 67% 43%, 73% 69%, 65% 70%, 57% 42%, 43% 42%, 35% 70%, 27% 69%, 33% 43%, 39% 34%, 34% 24%) !important;
    opacity: .12 !important;
}

.avatar-live-tint-hair {
    background: var(--avatar-hair) !important;
    clip-path: polygon(28% 5%, 72% 5%, 82% 18%, 76% 29%, 66% 20%, 55% 16%, 43% 17%, 32% 28%, 20% 21%) !important;
    opacity: .28 !important;
}

.avatar-live-tint-eye {
    background: var(--avatar-eye) !important;
    clip-path: polygon(42% 21%, 46% 21%, 46% 23%, 42% 23%, 54% 21%, 58% 21%, 58% 23%, 54% 23%) !important;
    opacity: .45 !important;
}

.avatar-live-tint-outfit {
    background: var(--avatar-outfit) !important;
    clip-path: polygon(29% 31%, 71% 31%, 78% 58%, 70% 64%, 60% 44%, 50% 61%, 40% 44%, 30% 64%, 22% 58%) !important;
    opacity: .24 !important;
}

.avatar-edit-status {
    position: absolute !important;
    left: 50% !important;
    bottom: 18px !important;
    transform: translateX(-50%) !important;
    z-index: 10 !important;
    min-width: 210px !important;
    max-width: 84% !important;
    padding: 8px 12px !important;
    border-radius: 999px !important;
    background: rgba(255, 250, 238, .92) !important;
    border: 1px solid rgba(162, 111, 62, .18) !important;
    color: #6a4326 !important;
    font-size: .78rem !important;
    text-align: center !important;
    box-shadow: 0 2px 5px rgba(74, 45, 22, .08) !important;
}

.pocket-settings-step-aparencia .avatar-click-zone {
    width: 10px !important;
    height: 10px !important;
    min-width: 10px !important;
    min-height: 10px !important;
    border: 1px solid rgba(135, 85, 42, .35) !important;
    background: radial-gradient(circle at 35% 30%, #fff9ef 0 2px, #e8a24a 3px, #b96327 100%) !important;
    box-shadow: 0 0 0 2px rgba(207, 122, 49, .11), 0 2px 5px rgba(70, 43, 24, .12) !important;
}

.pocket-settings-step-aparencia .avatar-game-hint {
    display: none !important;
}

.avatar-choice-preview-text p,
.pocket-note {
    line-height: 1.45 !important;
}

/* =========================================================
   Avatar 3D - base profissional editável por materiais.
   Esta fase substitui o avatar antigo montado por SVG/CSS.
   ========================================================= */
.avatar-game-stage {
    width: min(100%, 390px) !important;
    min-height: 540px !important;
    display: grid !important;
    place-items: center !important;
    isolation: isolate;
    overflow: visible;
}

.avatar-3d-viewer {
    width: min(100%, 360px);
    height: 500px;
    display: block;
    border-radius: 30px;
    background:
        radial-gradient(circle at 50% 20%, rgba(255,255,255,.82), transparent 10rem),
        linear-gradient(180deg, rgba(255,249,236,.72), rgba(247,226,190,.38));
    --poster-color: transparent;
    filter: drop-shadow(0 10px 12px rgba(111, 74, 47, .10));
    z-index: 2;
}

.avatar-3d-viewer-compact {
    height: 420px;
    width: min(100%, 310px);
}

.avatar-3d-poster {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.avatar-game-stage::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 42px;
    width: 190px;
    height: 28px;
    transform: translateX(-50%);
    border-radius: 50%;
    background: rgba(111, 74, 47, .12);
    filter: blur(5px);
    z-index: 1;
    pointer-events: none;
}

.avatar-click-zone {
    z-index: 8 !important;
    background: rgba(255,255,255,.02) !important;
    border: 1px solid rgba(232, 139, 58, .10) !important;
    box-shadow: none !important;
}

.avatar-click-zone:hover,
.avatar-click-zone:focus-visible {
    background: rgba(246, 200, 107, .16) !important;
    border-color: rgba(232, 139, 58, .55) !important;
}

.avatar-zone-hair { left: 135px !important; top: 50px !important; width: 98px !important; height: 86px !important; }
.avatar-zone-eyes { left: 146px !important; top: 132px !important; width: 76px !important; height: 34px !important; }
.avatar-zone-nose { left: 169px !important; top: 158px !important; width: 32px !important; height: 38px !important; }
.avatar-zone-ears { left: 122px !important; top: 126px !important; width: 126px !important; height: 58px !important; }
.avatar-zone-torso { left: 102px !important; top: 205px !important; width: 164px !important; height: 142px !important; }
.avatar-zone-outfit { left: 105px !important; top: 205px !important; width: 158px !important; height: 154px !important; }
.avatar-zone-waist { left: 120px !important; top: 340px !important; width: 128px !important; height: 50px !important; }
.avatar-zone-arms { left: 58px !important; top: 220px !important; width: 252px !important; height: 130px !important; }
.avatar-zone-hands { left: 42px !important; top: 350px !important; width: 282px !important; height: 66px !important; }
.avatar-zone-legs { left: 110px !important; top: 380px !important; width: 148px !important; height: 110px !important; }
.avatar-zone-feet { left: 95px !important; top: 488px !important; width: 180px !important; height: 48px !important; }

.avatar-edit-status {
    position: absolute;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    width: min(310px, 92%);
    text-align: center;
    padding: 8px 12px;
    border-radius: 999px;
    background: rgba(255,255,255,.72);
    border: 1px solid rgba(111, 74, 47, .10);
    color: var(--pocket-brown);
    font-size: .78rem;
    font-weight: 800;
    z-index: 9;
}

/* Desativa qualquer anatomia antiga do avatar por CSS/SVG caso permaneça em cache. */
.avatar-sim-character,
.avatar-live-tint,
.avatar-sim-shadow,
.avatar-sim-head,
.avatar-sim-hair,
.avatar-sim-body,
.avatar-sim-arm,
.avatar-sim-leg,
.avatar-sim-foot,
.avatar-sim-hand,
.avatar-sim-neck,
.avatar-sim-waist,
.avatar-sim-apron {
    display: none !important;
}

@media (max-width: 920px) {
    .avatar-3d-viewer {
        height: 430px;
        width: min(100%, 310px);
    }
    .avatar-game-stage {
        min-height: 470px !important;
        transform: none !important;
    }
}

/* =========================================================
   Correção 2026-06-03 - Avatar 3D profissional editável
   e limpeza visual final do caderno.
   ========================================================= */
.pocket-book,
.pocket-book-home,
.pocket-book-recipes,
.pocket-book-settings,
.pocket-book-store,
.pocket-book-recipe,
.pocket-book-recipe-open {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    filter: drop-shadow(0 1px 2px rgba(86, 56, 31, .035)) !important;
    box-shadow: none !important;
}

.pocket-page {
    background:
        linear-gradient(90deg, rgba(255,255,255,.46), transparent 16%, transparent 84%, rgba(126, 88, 53, .035)),
        linear-gradient(180deg, #fff9ee, #fff1dc) !important;
    box-shadow: inset 0 0 0 1px rgba(117, 82, 49, .055) !important;
}

.pocket-book::after,
.pocket-book-home::after,
.pocket-book-recipes::after,
.pocket-book-settings::after,
.pocket-book-store::after,
.pocket-book-recipe::after,
.pocket-book-recipe-open::after {
    background: linear-gradient(90deg, transparent, rgba(82, 50, 25, .09) 42%, rgba(255,255,255,.24) 50%, rgba(82, 50, 25, .07) 58%, transparent) !important;
    opacity: .58 !important;
}

.pocket-settings-step-aparencia .avatar-game-stage {
    width: min(100%, 390px) !important;
    height: 580px !important;
    min-height: 580px !important;
    padding: 0 !important;
    border-radius: 24px !important;
    background:
        radial-gradient(circle at 50% 92%, rgba(111, 74, 47, .12), transparent 30%),
        linear-gradient(180deg, rgba(255, 249, 236, .78), rgba(246, 226, 190, .28)) !important;
}

.avatar-3d-viewer {
    --avatar-model-scale-x: 1;
    width: min(100%, 365px) !important;
    height: 520px !important;
    background: transparent !important;
    filter: drop-shadow(0 6px 7px rgba(66, 42, 25, .10)) !important;
    transform: scaleX(var(--avatar-model-scale-x)) !important;
    transform-origin: center bottom !important;
}

.avatar-3d-viewer-compact {
    height: 430px !important;
    width: min(100%, 315px) !important;
}

.avatar-3d-poster {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    object-position: center bottom !important;
}

.avatar-game-stage::after {
    bottom: 26px !important;
    width: 170px !important;
    height: 18px !important;
    opacity: .7 !important;
    filter: blur(4px) !important;
}

.pocket-settings-step-aparencia .avatar-click-zone {
    width: 12px !important;
    height: 12px !important;
    min-width: 12px !important;
    min-height: 12px !important;
    border-radius: 50% !important;
    background: radial-gradient(circle at 35% 30%, #fff9ef 0 2px, #f2b45f 3px, #b96327 100%) !important;
    border: 1px solid rgba(122, 74, 34, .38) !important;
    box-shadow: 0 0 0 2px rgba(246, 200, 107, .12), 0 1px 4px rgba(70, 43, 24, .13) !important;
}

.avatar-click-zone:hover,
.avatar-click-zone:focus-visible {
    transform: scale(1.18) !important;
    background: radial-gradient(circle at 35% 30%, #fffaf0 0 2px, #ffcf7b 3px, #d57631 100%) !important;
}

.avatar-zone-hair { left: 185px !important; top: 54px !important; }
.avatar-zone-eyes { left: 188px !important; top: 136px !important; }
.avatar-zone-nose { left: 194px !important; top: 166px !important; }
.avatar-zone-ears { left: 148px !important; top: 138px !important; }
.avatar-zone-torso { left: 194px !important; top: 270px !important; }
.avatar-zone-outfit { left: 222px !important; top: 305px !important; }
.avatar-zone-waist { left: 194px !important; top: 380px !important; }
.avatar-zone-arms { left: 95px !important; top: 300px !important; }
.avatar-zone-hands { left: 78px !important; top: 440px !important; }
.avatar-zone-legs { left: 194px !important; top: 470px !important; }
.avatar-zone-feet { left: 194px !important; top: 540px !important; }

.avatar-edit-status {
    top: 8px !important;
    width: min(300px, 90%) !important;
    font-size: .76rem !important;
    background: rgba(255, 250, 238, .86) !important;
    box-shadow: 0 1px 3px rgba(74, 45, 22, .055) !important;
}

.avatar-part-option {
    border-radius: 12px !important;
}

.recipe-dashboard-card,
.recipe-list-card,
.recipe-reference-box,
.recipe-description,
.recipe-meta-grid,
.recipe-reference-actions,
.pocket-recipe-guide-card {
    max-width: 100% !important;
    overflow-wrap: anywhere !important;
    word-break: normal !important;
}

.pocket-book-recipe-open.is-turning .pocket-page-turn-sheet {
    transition-duration: 3.1s !important;
}

@media (max-width: 920px) {
    .avatar-3d-viewer {
        height: 430px !important;
        width: min(100%, 320px) !important;
    }
    .pocket-settings-step-aparencia .avatar-game-stage {
        min-height: 470px !important;
        height: 470px !important;
    }
}
.pocket-book-recipe-open.is-turning-forward .recipe-turning-sheet {
    animation-duration: 3.15s !important;
}
.pocket-book-recipe-open.is-turning-back .recipe-turning-sheet {
    animation-duration: 3.15s !important;
}


/* =========================================================
   Correção 2026-06-03 - Avatar 3D em pé/frontal.
   Os GLB foram convertidos de Z-up para Y-up; estes ajustes
   só tratam enquadramento, sem voltar para PNG/SVG antigo.
   ========================================================= */
.avatar-3d-viewer {
    height: 540px !important;
    width: min(100%, 365px) !important;
    object-fit: contain !important;
    background: transparent !important;
    overflow: visible !important;
}

.avatar-3d-viewer-compact {
    height: 440px !important;
    width: min(100%, 320px) !important;
}

.pocket-settings-step-aparencia .avatar-game-stage {
    min-height: 595px !important;
    height: 595px !important;
    align-items: end !important;
}

.avatar-game-stage::after {
    bottom: 18px !important;
    width: 135px !important;
    height: 12px !important;
    opacity: .42 !important;
    filter: blur(3px) !important;
}

/* Mantém qualquer render antigo fora da tela para não parecer boneco deitado/sobreposto. */
.avatar-sim-character,
.avatar-sim-head,
.avatar-sim-body,
.avatar-sim-hair,
.avatar-live-tint {
    display: none !important;
}


/* =========================================================
   Correção 2026-06-03 - Avatar 3D com enquadramento inteiro
   e resumo lateral em ícones compactos.
   ========================================================= */
.pocket-book-settings .pocket-page-right.pocket-settings-side {
    display: flex !important;
    flex-direction: column !important;
    min-height: 0 !important;
    overflow: hidden !important;
    gap: 8px !important;
    padding-bottom: clamp(16px, 2.4vw, 34px) !important;
}

.pocket-settings-side .assistant-stage,
.pocket-settings-side .assistant-stage-image,
.pocket-settings-side .assistant-stage-full-preview,
.pocket-settings-side .assistant-stage-compact-preview {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    height: auto !important;
    width: 100% !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    overflow: visible !important;
}

.pocket-settings-step-aparencia .avatar-game-stage,
.avatar-stage-3d-professional {
    width: min(100%, 410px) !important;
    height: min(570px, calc(100dvh - 155px)) !important;
    min-height: min(570px, calc(100dvh - 155px)) !important;
    padding: 0 !important;
    place-items: center !important;
    align-items: center !important;
    overflow: visible !important;
    border-radius: 24px !important;
    background:
        radial-gradient(ellipse at 50% 92%, rgba(103, 65, 34, .13), transparent 30%),
        radial-gradient(circle at 50% 15%, rgba(255, 255, 255, .80), transparent 42%),
        linear-gradient(180deg, rgba(255, 250, 240, .55), rgba(242, 221, 187, .20)) !important;
}

.avatar-3d-viewer {
    width: min(100%, 390px) !important;
    height: min(535px, calc(100dvh - 190px)) !important;
    min-height: 360px !important;
    display: block !important;
    background: transparent !important;
    border-radius: 24px !important;
    overflow: visible !important;
    filter: drop-shadow(0 5px 5px rgba(66, 42, 25, .08)) !important;
    transform: none !important;
}

.avatar-3d-viewer-compact {
    width: min(100%, 360px) !important;
    height: min(500px, calc(100dvh - 215px)) !important;
    min-height: 330px !important;
}

.avatar-3d-poster {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    object-position: center center !important;
}

.avatar-game-stage::after {
    bottom: 24px !important;
    width: 145px !important;
    height: 12px !important;
    opacity: .34 !important;
    filter: blur(3px) !important;
}

.avatar-edit-status {
    top: 8px !important;
    width: min(280px, 86%) !important;
    padding: 7px 10px !important;
    font-size: .72rem !important;
    opacity: .92 !important;
}

.avatar-game-hint {
    display: none !important;
}

.assistant-balloon-side {
    width: min(100%, 310px) !important;
    margin: 2px auto 0 !important;
    padding: 8px 10px !important;
    font-size: .80rem !important;
    line-height: 1.2 !important;
    text-align: center !important;
    border-radius: 16px !important;
    box-shadow: none !important;
}

.pocket-settings-meta-row {
    flex: 0 0 auto !important;
    width: 100% !important;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
    align-items: stretch !important;
    margin-top: auto !important;
}

.pocket-settings-meta-pill {
    min-width: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;
    min-height: 42px !important;
    padding: 7px 8px !important;
    border-radius: 16px !important;
    background: rgba(255, 248, 234, .68) !important;
    border: 1px solid rgba(111, 74, 47, .12) !important;
    color: var(--pocket-brown) !important;
    text-decoration: none !important;
    box-shadow: 0 1px 2px rgba(73, 45, 23, .035) !important;
    line-height: 1 !important;
}

.pocket-settings-meta-pill span {
    font-size: 1.05rem !important;
}

.pocket-settings-meta-pill strong {
    font-size: .78rem !important;
    white-space: nowrap !important;
}

.pocket-settings-meta-pill small {
    font-size: .68rem !important;
    color: var(--pocket-muted) !important;
    white-space: nowrap !important;
}

.pocket-settings-meta-link:hover,
.pocket-settings-meta-link:focus-visible {
    background: rgba(246, 200, 107, .28) !important;
    transform: translateY(-1px) !important;
}

.pocket-settings-side .pocket-help-card,
.pocket-settings-side .pocket-avatar-store-link {
    display: none !important;
}

/* Os pontos precisam continuar pequenos e não podem roubar área do avatar. */
.pocket-settings-step-aparencia .avatar-click-zone {
    width: 11px !important;
    height: 11px !important;
    min-width: 11px !important;
    min-height: 11px !important;
}

/* Em notebooks de 15", o avatar deve aparecer inteiro antes de qualquer card lateral crescer. */
@media (min-width: 861px) and (max-height: 760px) {
    .pocket-page {
        padding-top: 24px !important;
        padding-bottom: 24px !important;
    }

    .avatar-3d-viewer,
    .avatar-3d-viewer-compact {
        height: min(455px, calc(100dvh - 190px)) !important;
        min-height: 310px !important;
    }

    .pocket-settings-step-aparencia .avatar-game-stage,
    .avatar-stage-3d-professional {
        height: min(492px, calc(100dvh - 150px)) !important;
        min-height: min(492px, calc(100dvh - 150px)) !important;
    }

    .assistant-balloon-side {
        display: none !important;
    }

    .pocket-settings-meta-pill {
        min-height: 36px !important;
        padding: 5px 6px !important;
    }
}

/* Mobile mantém o avatar inteiro e joga os resumos abaixo em uma única linha. */
@media (max-width: 860px) {
    .pocket-settings-meta-row {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }

    .avatar-3d-viewer,
    .avatar-3d-viewer-compact {
        height: min(430px, 64vh) !important;
        min-height: 300px !important;
        width: min(100%, 330px) !important;
    }

    .pocket-settings-step-aparencia .avatar-game-stage,
    .avatar-stage-3d-professional {
        height: min(470px, 68vh) !important;
        min-height: min(470px, 68vh) !important;
    }
}


/* =========================================================
   Correção 2026-06-03 - Avatar 3D inteiro, mais baixo e menos "boneco de madeira".
   Mantém o modelo 3D dentro da folha direita sem cortar cabeça/pernas.
   ========================================================= */
.pocket-book-settings .pocket-page-right.pocket-settings-side {
    padding-top: 16px !important;
    padding-bottom: 18px !important;
}

.pocket-settings-side .assistant-stage,
.pocket-settings-side .assistant-stage-image,
.pocket-settings-side .assistant-stage-full-preview,
.pocket-settings-side .assistant-stage-compact-preview {
    justify-content: flex-end !important;
}

.pocket-settings-step-aparencia .avatar-game-stage,
.avatar-stage-3d-professional {
    width: min(100%, 430px) !important;
    height: min(620px, calc(100dvh - 132px)) !important;
    min-height: min(620px, calc(100dvh - 132px)) !important;
    align-items: end !important;
    place-items: end center !important;
    padding-top: 10px !important;
    padding-bottom: 0 !important;
    transform: translateY(18px) !important;
    overflow: visible !important;
    background:
        radial-gradient(ellipse at 50% 94%, rgba(103, 65, 34, .10), transparent 34%),
        radial-gradient(circle at 50% 18%, rgba(255, 255, 255, .86), transparent 46%),
        linear-gradient(180deg, rgba(255, 250, 240, .42), rgba(242, 221, 187, .14)) !important;
}

.avatar-3d-viewer {
    width: min(100%, 405px) !important;
    height: min(600px, calc(100dvh - 158px)) !important;
    min-height: 420px !important;
    overflow: visible !important;
    border-radius: 18px !important;
    filter:
        drop-shadow(0 3px 4px rgba(66, 42, 25, .06))
        drop-shadow(0 12px 18px rgba(66, 42, 25, .045)) !important;
    transform: translateY(14px) !important;
    transform-origin: center bottom !important;
}

.avatar-3d-viewer-compact {
    width: min(100%, 390px) !important;
    height: min(570px, calc(100dvh - 175px)) !important;
    min-height: 390px !important;
    transform: translateY(14px) !important;
}

.avatar-game-stage::after {
    bottom: 7px !important;
    width: 132px !important;
    height: 10px !important;
    opacity: .26 !important;
    filter: blur(3px) !important;
}

.avatar-edit-status {
    top: 4px !important;
    opacity: .72 !important;
    transform: translateX(-50%) scale(.92) !important;
}

.pocket-settings-meta-row {
    margin-top: 2px !important;
    position: relative !important;
    z-index: 5 !important;
}

.pocket-settings-meta-pill {
    min-height: 34px !important;
    padding: 5px 6px !important;
    border-radius: 14px !important;
}

.pocket-settings-meta-pill strong {
    font-size: .74rem !important;
}

.pocket-settings-meta-pill small {
    display: none !important;
}

/* A folha direita precisa deixar o avatar respirar; os cards laterais não podem cortar o canvas. */
.pocket-settings-side {
    contain: none !important;
}

@media (min-width: 861px) and (max-height: 760px) {
    .pocket-settings-step-aparencia .avatar-game-stage,
    .avatar-stage-3d-professional {
        height: min(560px, calc(100dvh - 118px)) !important;
        min-height: min(560px, calc(100dvh - 118px)) !important;
        transform: translateY(22px) !important;
    }

    .avatar-3d-viewer,
    .avatar-3d-viewer-compact {
        height: min(530px, calc(100dvh - 145px)) !important;
        min-height: 360px !important;
        width: min(100%, 385px) !important;
        transform: translateY(18px) !important;
    }

    .pocket-settings-meta-row {
        gap: 6px !important;
    }
}

@media (max-width: 860px) {
    .pocket-settings-step-aparencia .avatar-game-stage,
    .avatar-stage-3d-professional {
        height: min(560px, 70vh) !important;
        min-height: min(560px, 70vh) !important;
        transform: translateY(12px) !important;
    }

    .avatar-3d-viewer,
    .avatar-3d-viewer-compact {
        height: min(520px, 68vh) !important;
        min-height: 350px !important;
        width: min(100%, 380px) !important;
        transform: translateY(12px) !important;
    }
}

/* =========================================================
   Ajuste 2026-06-03 - Avatar maior e cabeça mais modelada.
   O GLB agora traz base chef mais viva; estes ajustes só ampliam
   e reposicionam sem cortar cabeça/pernas.
   ========================================================= */
.pocket-settings-step-aparencia .avatar-game-stage,
.avatar-stage-3d-professional {
    width: min(100%, 470px) !important;
    height: min(680px, calc(100dvh - 105px)) !important;
    min-height: min(680px, calc(100dvh - 105px)) !important;
    transform: translateY(34px) !important;
    padding-bottom: 0 !important;
    background:
        radial-gradient(ellipse at 50% 95%, rgba(103, 65, 34, .10), transparent 32%),
        radial-gradient(circle at 50% 15%, rgba(255, 255, 255, .90), transparent 45%),
        linear-gradient(180deg, rgba(255, 252, 245, .50), rgba(244, 226, 194, .12)) !important;
}

.avatar-3d-viewer {
    width: min(100%, 455px) !important;
    height: min(655px, calc(100dvh - 120px)) !important;
    min-height: 500px !important;
    transform: translateY(22px) !important;
    filter:
        drop-shadow(0 2px 3px rgba(66, 42, 25, .045))
        drop-shadow(0 10px 12px rgba(66, 42, 25, .035)) !important;
}

.avatar-3d-viewer-compact {
    width: min(100%, 425px) !important;
    height: min(620px, calc(100dvh - 145px)) !important;
    min-height: 455px !important;
    transform: translateY(24px) !important;
}

.pocket-settings-meta-row {
    margin-top: 0 !important;
    transform: translateY(3px) !important;
}

.avatar-game-stage::after {
    bottom: 1px !important;
    width: 155px !important;
    opacity: .20 !important;
}

.avatar-edit-status {
    top: 2px !important;
    opacity: .64 !important;
}

@media (min-width: 861px) and (max-height: 760px) {
    .pocket-settings-step-aparencia .avatar-game-stage,
    .avatar-stage-3d-professional {
        height: min(610px, calc(100dvh - 94px)) !important;
        min-height: min(610px, calc(100dvh - 94px)) !important;
        transform: translateY(38px) !important;
    }

    .avatar-3d-viewer,
    .avatar-3d-viewer-compact {
        height: min(590px, calc(100dvh - 112px)) !important;
        min-height: 445px !important;
        width: min(100%, 435px) !important;
        transform: translateY(30px) !important;
    }
}

@media (max-width: 860px) {
    .pocket-settings-step-aparencia .avatar-game-stage,
    .avatar-stage-3d-professional {
        height: min(610px, 74vh) !important;
        min-height: min(610px, 74vh) !important;
        transform: translateY(18px) !important;
    }

    .avatar-3d-viewer,
    .avatar-3d-viewer-compact {
        height: min(590px, 72vh) !important;
        min-height: 420px !important;
        width: min(100%, 415px) !important;
        transform: translateY(18px) !important;
    }
}

/* Ajuste Avatar 3D - Fase 1 cabeça/olhos/cabelo */
.avatar-3d-viewer,
.avatar-3d-viewer-compact {
    --poster-color: transparent;
}
.avatar-game-stage .avatar-3d-viewer {
    filter: drop-shadow(0 3px 5px rgba(73, 45, 24, .10));
}

/* =========================================================
   Pocket Croquette Avatar System V2
   A geração antiga de personagem/protótipo foi substituída
   pelos GLBs principais com base humana anime semi-realista.
   Mantém os nomes dos arquivos para não quebrar o sistema.
   ========================================================= */
.avatar-edit-status::before {
    content: 'V2 • ';
    font-weight: 900;
    color: var(--pocket-orange);
}
.avatar-stage-3d-professional .avatar-3d-viewer {
    background:
        radial-gradient(circle at 50% 16%, rgba(255,255,255,.92), transparent 9.5rem),
        radial-gradient(circle at 50% 82%, rgba(232,139,58,.16), transparent 8rem),
        linear-gradient(180deg, rgba(255,249,236,.78), rgba(247,226,190,.44));
}


/* =========================================================
   Pocket Croquette Avatar System V2 - Life Layer 01
   Camada de presença visual: respiração, atenção, fala e
   sinalização de que o personagem está vivo mesmo sem rig facial.
   ========================================================= */
.avatar-game-stage,
.assistant-stage-image {
    position: relative;
}
.avatar-game-stage .avatar-3d-viewer,
.assistant-stage-image .avatar-3d-viewer {
    transform-origin: 50% 88%;
    animation: pocketAvatarBreathing 5.8s ease-in-out infinite;
    transition: filter .28s ease, transform .28s ease;
}
.avatar-game-stage::after,
.assistant-stage-image::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 17%;
    width: 2.35rem;
    height: .22rem;
    border-radius: 999px;
    background: rgba(73, 45, 24, .44);
    box-shadow: 0 0 0 .17rem rgba(255,255,255,.58), 0 .55rem 0 rgba(73,45,24,.18);
    transform: translateX(-50%) scaleY(1);
    opacity: .20;
    pointer-events: none;
    animation: pocketAvatarBlink 6.9s infinite;
    z-index: 7;
}
.avatar-game-stage.is-avatar-speaking .avatar-3d-viewer,
.assistant-stage-image.is-avatar-speaking .avatar-3d-viewer {
    animation: pocketAvatarTalking 1.25s ease-in-out infinite;
    filter: drop-shadow(0 8px 14px rgba(232,139,58,.20));
}
.avatar-game-stage.is-avatar-listening .avatar-3d-viewer,
.assistant-stage-image.is-avatar-listening .avatar-3d-viewer {
    filter: drop-shadow(0 8px 16px rgba(255,193,95,.24));
}
.avatar-game-stage.is-avatar-thinking .avatar-3d-viewer,
.assistant-stage-image.is-avatar-thinking .avatar-3d-viewer {
    animation: pocketAvatarThinking 1.6s ease-in-out infinite;
}
.avatar-game-stage.is-avatar-happy .avatar-3d-viewer,
.assistant-stage-image.is-avatar-happy .avatar-3d-viewer {
    filter: drop-shadow(0 8px 18px rgba(232,139,58,.28));
}
.avatar-edit-status {
    min-height: 2.55rem;
}
.avatar-life-badges {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .45rem;
    margin-top: .7rem;
}
.avatar-life-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .35rem;
    border: 1px solid rgba(232,139,58,.20);
    border-radius: 999px;
    padding: .38rem .55rem;
    background: rgba(255,255,255,.58);
    color: #5f3c22;
    font-size: .76rem;
    font-weight: 800;
    box-shadow: 0 4px 10px rgba(73,45,24,.05);
}
@keyframes pocketAvatarBreathing {
    0%, 100% { transform: translateY(0) scaleX(var(--avatar-model-scale-x, 1)) scaleY(1); }
    50% { transform: translateY(-.34rem) scaleX(calc(var(--avatar-model-scale-x, 1) * 1.004)) scaleY(1.006); }
}
@keyframes pocketAvatarTalking {
    0%, 100% { transform: translateY(0) scaleX(var(--avatar-model-scale-x, 1)) rotateZ(0deg); }
    25% { transform: translateY(-.22rem) scaleX(var(--avatar-model-scale-x, 1)) rotateZ(-.35deg); }
    50% { transform: translateY(-.06rem) scaleX(var(--avatar-model-scale-x, 1)) rotateZ(.35deg); }
    75% { transform: translateY(-.28rem) scaleX(var(--avatar-model-scale-x, 1)) rotateZ(-.18deg); }
}
@keyframes pocketAvatarThinking {
    0%, 100% { transform: translateY(0) scaleX(var(--avatar-model-scale-x, 1)) rotateZ(0deg); }
    50% { transform: translateY(-.22rem) scaleX(var(--avatar-model-scale-x, 1)) rotateZ(-1deg); }
}
@keyframes pocketAvatarBlink {
    0%, 3%, 100% { opacity: .0; transform: translateX(-50%) scaleY(.15); }
    4%, 5% { opacity: .32; transform: translateX(-50%) scaleY(1); }
    6%, 61% { opacity: .0; transform: translateX(-50%) scaleY(.15); }
    62%, 63% { opacity: .28; transform: translateX(-50%) scaleY(1); }
    64%, 100% { opacity: .0; transform: translateX(-50%) scaleY(.15); }
}
@media (prefers-reduced-motion: reduce) {
    .avatar-game-stage .avatar-3d-viewer,
    .assistant-stage-image .avatar-3d-viewer,
    .avatar-game-stage::after,
    .assistant-stage-image::after {
        animation: none !important;
    }
}

/* =========================================================
   Pocket Croquette Avatar System V2 - Life Layer 03
   Limpeza de resquícios do avatar gerado por CSS e camada
   de vida mais perceptível no modelo 3D real carregado pelo GLB.
   ========================================================= */
.avatar-v2-only .avatar-sim-character,
.avatar-v2-only .avatar-sim-shadow,
.avatar-v2-only .avatar-sim-head,
.avatar-v2-only .avatar-sim-hair,
.avatar-v2-only .avatar-sim-body,
.avatar-v2-only .avatar-sim-arm,
.avatar-v2-only .avatar-sim-hand,
.avatar-v2-only .avatar-sim-leg,
.avatar-v2-only .avatar-sim-foot,
.avatar-stage-3d-professional .avatar-sim-character,
.avatar-stage-3d-professional .avatar-sim-shadow,
.avatar-stage-3d-professional .avatar-sim-head,
.avatar-stage-3d-professional .avatar-sim-hair,
.avatar-stage-3d-professional .avatar-sim-body,
.avatar-stage-3d-professional .avatar-sim-arm,
.avatar-stage-3d-professional .avatar-sim-hand,
.avatar-stage-3d-professional .avatar-sim-leg,
.avatar-stage-3d-professional .avatar-sim-foot {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

.avatar-life-14-active .avatar-3d-viewer,
.assistant-stage-image.avatar-life-14-active .avatar-3d-viewer {
    will-change: transform, filter;
    transform: translateY(var(--avatar-life-y, 0rem)) scaleX(var(--avatar-model-scale-x, 1)) rotateZ(var(--avatar-life-tilt, 0deg));
    animation: pocketAvatarLife04Breathing 3.85s ease-in-out infinite !important;
    filter: drop-shadow(0 18px 22px rgba(75, 46, 24, .18));
}

.avatar-life-14-active::before {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 2.15rem;
    width: min(72%, 15.5rem);
    height: 1.2rem;
    transform: translateX(-50%);
    border-radius: 999px;
    background: radial-gradient(ellipse at center, rgba(72, 44, 24, .24), rgba(72, 44, 24, .08) 58%, transparent 74%);
    filter: blur(3px);
    pointer-events: none;
    z-index: 0;
    animation: pocketAvatarLife04Shadow 3.85s ease-in-out infinite;
}

.avatar-life-14-active::after {
    top: 15.4% !important;
    width: 2.8rem !important;
    height: .26rem !important;
    opacity: 0;
    background: rgba(58, 38, 24, .54) !important;
    box-shadow: 0 0 0 .19rem rgba(255,255,255,.62), 0 .72rem 0 rgba(58,38,24,.20) !important;
    animation: pocketAvatarLife04Blink 5.6s infinite !important;
}

.avatar-life-14-active.is-avatar-speaking .avatar-3d-viewer,
.assistant-stage-image.avatar-life-14-active.is-avatar-speaking .avatar-3d-viewer {
    animation: pocketAvatarLife04Talking 1.05s ease-in-out infinite !important;
    filter: drop-shadow(0 16px 24px rgba(232,139,58,.32));
}

.avatar-life-14-active.is-avatar-listening .avatar-3d-viewer,
.assistant-stage-image.avatar-life-14-active.is-avatar-listening .avatar-3d-viewer {
    animation: pocketAvatarLife04Listening 2.2s ease-in-out infinite !important;
    filter: drop-shadow(0 16px 24px rgba(255,193,95,.35));
}

.avatar-life-14-active.is-avatar-thinking .avatar-3d-viewer,
.assistant-stage-image.avatar-life-14-active.is-avatar-thinking .avatar-3d-viewer {
    animation: pocketAvatarLife04Thinking 1.5s ease-in-out infinite !important;
}

.avatar-life-14-active .avatar-life-badge:first-child::after {
    content: ' 04';
    color: var(--pocket-orange);
}

@keyframes pocketAvatarLife04Breathing {
    0%, 100% { transform: translateY(0) scaleX(var(--avatar-model-scale-x, 1)) scaleY(1) rotateZ(0deg); }
    50% { transform: translateY(-.56rem) scaleX(calc(var(--avatar-model-scale-x, 1) * 1.006)) scaleY(1.012) rotateZ(.45deg); }
}

@keyframes pocketAvatarLife04Talking {
    0%, 100% { transform: translateY(-.05rem) scaleX(var(--avatar-model-scale-x, 1)) rotateZ(0deg); }
    22% { transform: translateY(-.48rem) scaleX(var(--avatar-model-scale-x, 1)) rotateZ(-.75deg); }
    48% { transform: translateY(-.16rem) scaleX(var(--avatar-model-scale-x, 1)) rotateZ(.65deg); }
    72% { transform: translateY(-.54rem) scaleX(var(--avatar-model-scale-x, 1)) rotateZ(-.38deg); }
}

@keyframes pocketAvatarLife04Listening {
    0%, 100% { transform: translateY(-.10rem) scaleX(var(--avatar-model-scale-x, 1)) rotateZ(0deg); }
    45% { transform: translateY(-.36rem) scaleX(var(--avatar-model-scale-x, 1)) rotateZ(1.15deg); }
}

@keyframes pocketAvatarLife04Thinking {
    0%, 100% { transform: translateY(-.04rem) scaleX(var(--avatar-model-scale-x, 1)) rotateZ(0deg); }
    50% { transform: translateY(-.34rem) scaleX(var(--avatar-model-scale-x, 1)) rotateZ(-1.55deg); }
}

@keyframes pocketAvatarLife04Shadow {
    0%, 100% { transform: translateX(-50%) scaleX(1); opacity: .72; }
    50% { transform: translateX(-50%) scaleX(.86); opacity: .52; }
}

@keyframes pocketAvatarLife04Blink {
    0%, 5%, 100% { opacity: 0; transform: translateX(-50%) scaleY(.12); }
    6%, 7% { opacity: .45; transform: translateX(-50%) scaleY(1); }
    8%, 55% { opacity: 0; transform: translateX(-50%) scaleY(.12); }
    56%, 57% { opacity: .38; transform: translateX(-50%) scaleY(1); }
    58%, 100% { opacity: 0; transform: translateX(-50%) scaleY(.12); }
}


/* =========================================================
   Avatar V2 Life 11 - ampliação do personagem nas configurações.
   Mantém o GLB V2 e remove dependência visual de qualquer anatomia antiga.
   ========================================================= */
.pocket-settings-step .pocket-settings-side {
    overflow: visible !important;
}

.pocket-settings-step-aparencia .assistant-stage-full-preview {
    min-height: 760px !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: visible !important;
}

.pocket-settings-step-aparencia .avatar-stage-3d-professional {
    width: min(100%, 560px) !important;
    height: 760px !important;
    min-height: 760px !important;
    margin: -18px auto 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    background:
        radial-gradient(circle at 50% 93%, rgba(111, 74, 47, .15), transparent 31%),
        linear-gradient(180deg, rgba(255, 249, 236, .72), rgba(246, 226, 190, .24)) !important;
}

.pocket-settings-step-aparencia .avatar-stage-3d-professional .avatar-3d-viewer {
    width: min(100%, 545px) !important;
    height: 735px !important;
    max-height: 735px !important;
    transform-origin: center bottom !important;
    filter: drop-shadow(0 16px 18px rgba(66, 42, 25, .16)) !important;
}

.pocket-settings-step-aparencia .avatar-stage-3d-professional::after {
    bottom: 30px !important;
    width: 230px !important;
    height: 24px !important;
    opacity: .54 !important;
}

/* Pontos de edição reposicionados para o enquadramento ampliado do Life 12. */
.pocket-settings-step-aparencia .avatar-stage-3d-professional .avatar-zone-hair { left: 276px !important; top: 76px !important; }
.pocket-settings-step-aparencia .avatar-stage-3d-professional .avatar-zone-eyes { left: 278px !important; top: 178px !important; }
.pocket-settings-step-aparencia .avatar-stage-3d-professional .avatar-zone-nose { left: 281px !important; top: 215px !important; }
.pocket-settings-step-aparencia .avatar-stage-3d-professional .avatar-zone-ears { left: 216px !important; top: 188px !important; }
.pocket-settings-step-aparencia .avatar-stage-3d-professional .avatar-zone-torso { left: 280px !important; top: 355px !important; }
.pocket-settings-step-aparencia .avatar-stage-3d-professional .avatar-zone-outfit { left: 320px !important; top: 410px !important; }
.pocket-settings-step-aparencia .avatar-stage-3d-professional .avatar-zone-waist { left: 280px !important; top: 500px !important; }
.pocket-settings-step-aparencia .avatar-stage-3d-professional .avatar-zone-arms { left: 145px !important; top: 405px !important; }
.pocket-settings-step-aparencia .avatar-stage-3d-professional .avatar-zone-hands { left: 122px !important; top: 565px !important; }
.pocket-settings-step-aparencia .avatar-stage-3d-professional .avatar-zone-legs { left: 280px !important; top: 610px !important; }
.pocket-settings-step-aparencia .avatar-stage-3d-professional .avatar-zone-feet { left: 280px !important; top: 704px !important; }

.pocket-settings-step:not(.pocket-settings-step-aparencia) .assistant-stage-image .avatar-3d-viewer-compact {
    width: min(100%, 380px) !important;
    height: 520px !important;
}

.avatar-life-14-active .avatar-3d-viewer,
.assistant-stage-image.avatar-life-14-active .avatar-3d-viewer {
    animation: avatarV2Life04Presence 5.6s ease-in-out infinite !important;
}

@keyframes avatarV2Life04Presence {
    0%, 100% { transform: translateY(var(--avatar-life-y, 0rem)) scaleX(var(--avatar-model-scale-x, 1)) rotateZ(var(--avatar-life-tilt, 0deg)); }
    50% { transform: translateY(calc(var(--avatar-life-y, 0rem) - .18rem)) scaleX(var(--avatar-model-scale-x, 1)) rotateZ(var(--avatar-life-tilt, 0deg)); }
}

@media (max-width: 920px) {
    .pocket-settings-step-aparencia .assistant-stage-full-preview {
        min-height: 600px !important;
    }
    .pocket-settings-step-aparencia .avatar-stage-3d-professional {
        width: min(100%, 390px) !important;
        height: 590px !important;
        min-height: 590px !important;
        margin-top: 0 !important;
    }
    .pocket-settings-step-aparencia .avatar-stage-3d-professional .avatar-3d-viewer {
        width: min(100%, 390px) !important;
        height: 575px !important;
    }
    .pocket-settings-step:not(.pocket-settings-step-aparencia) .assistant-stage-image .avatar-3d-viewer-compact {
        width: min(100%, 330px) !important;
        height: 450px !important;
    }
}


/* =========================================================
   Avatar V2 Life 11 - correção de enquadramento e limpeza visual.
   Objetivo: manter o personagem grande, porém inteiro na página,
   deslocado para cima e sem fundos/sombras/efeitos extras no palco.
   ========================================================= */
.pocket-settings-step-aparencia .assistant-stage-full-preview {
    min-height: min(650px, calc(100dvh - 72px)) !important;
    height: min(650px, calc(100dvh - 72px)) !important;
    justify-content: flex-start !important;
    align-items: center !important;
    overflow: visible !important;
    padding-top: 0 !important;
}

.pocket-settings-step-aparencia .avatar-stage-3d-professional {
    width: min(100%, 560px) !important;
    height: min(650px, calc(100dvh - 78px)) !important;
    min-height: min(650px, calc(100dvh - 78px)) !important;
    margin: -74px auto 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    background: transparent !important;
    box-shadow: none !important;
    filter: none !important;
}

.pocket-settings-step-aparencia .avatar-stage-3d-professional::before,
.pocket-settings-step-aparencia .avatar-stage-3d-professional::after,
.avatar-life-14-active::before,
.avatar-life-14-active::after,
.assistant-stage-image.avatar-life-14-active::before,
.assistant-stage-image.avatar-life-14-active::after {
    display: none !important;
    content: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
}

.pocket-settings-step-aparencia .avatar-stage-3d-professional .avatar-3d-viewer {
    width: min(100%, 535px) !important;
    height: min(690px, calc(100dvh - 30px)) !important;
    max-height: min(690px, calc(100dvh - 30px)) !important;
    margin-top: -26px !important;
    background: transparent !important;
    box-shadow: none !important;
    filter: none !important;
    transform-origin: center bottom !important;
}

.avatar-life-14-active .avatar-3d-viewer,
.assistant-stage-image.avatar-life-14-active .avatar-3d-viewer {
    animation: avatarV2Life05Presence 5.6s ease-in-out infinite !important;
    filter: none !important;
}

.avatar-life-14-active.is-avatar-speaking .avatar-3d-viewer,
.assistant-stage-image.avatar-life-14-active.is-avatar-speaking .avatar-3d-viewer,
.avatar-life-14-active.is-avatar-listening .avatar-3d-viewer,
.assistant-stage-image.avatar-life-14-active.is-avatar-listening .avatar-3d-viewer,
.avatar-life-14-active.is-avatar-thinking .avatar-3d-viewer,
.assistant-stage-image.avatar-life-14-active.is-avatar-thinking .avatar-3d-viewer {
    filter: none !important;
}

@keyframes avatarV2Life05Presence {
    0%, 100% {
        transform: translateY(calc(var(--avatar-life-y, 0rem) - 2.25rem)) scaleX(var(--avatar-model-scale-x, 1)) rotateZ(var(--avatar-life-tilt, 0deg));
    }
    50% {
        transform: translateY(calc(var(--avatar-life-y, 0rem) - 2.42rem)) scaleX(var(--avatar-model-scale-x, 1)) rotateZ(var(--avatar-life-tilt, 0deg));
    }
}

.pocket-settings-step-aparencia .avatar-edit-status,
.pocket-settings-step-aparencia .avatar-life-badges,
.pocket-settings-step-aparencia .avatar-game-hint {
    display: none !important;
}

/* Pontos reposicionados para o avatar ampliado e elevado do Life 12. */
.pocket-settings-step-aparencia .avatar-stage-3d-professional .avatar-zone-hair { left: 276px !important; top: 24px !important; }
.pocket-settings-step-aparencia .avatar-stage-3d-professional .avatar-zone-eyes { left: 278px !important; top: 126px !important; }
.pocket-settings-step-aparencia .avatar-stage-3d-professional .avatar-zone-nose { left: 281px !important; top: 163px !important; }
.pocket-settings-step-aparencia .avatar-stage-3d-professional .avatar-zone-ears { left: 216px !important; top: 136px !important; }
.pocket-settings-step-aparencia .avatar-stage-3d-professional .avatar-zone-torso { left: 280px !important; top: 303px !important; }
.pocket-settings-step-aparencia .avatar-stage-3d-professional .avatar-zone-outfit { left: 320px !important; top: 358px !important; }
.pocket-settings-step-aparencia .avatar-stage-3d-professional .avatar-zone-waist { left: 280px !important; top: 448px !important; }
.pocket-settings-step-aparencia .avatar-stage-3d-professional .avatar-zone-arms { left: 145px !important; top: 353px !important; }
.pocket-settings-step-aparencia .avatar-stage-3d-professional .avatar-zone-hands { left: 122px !important; top: 513px !important; }
.pocket-settings-step-aparencia .avatar-stage-3d-professional .avatar-zone-legs { left: 280px !important; top: 558px !important; }
.pocket-settings-step-aparencia .avatar-stage-3d-professional .avatar-zone-feet { left: 280px !important; top: 618px !important; }

.pocket-settings-step:not(.pocket-settings-step-aparencia) .assistant-stage-image .avatar-3d-viewer-compact {
    width: min(100%, 350px) !important;
    height: min(480px, calc(100dvh - 210px)) !important;
    filter: none !important;
}

@media (max-width: 920px) {
    .pocket-settings-step-aparencia .assistant-stage-full-preview {
        min-height: 540px !important;
        height: 540px !important;
    }
    .pocket-settings-step-aparencia .avatar-stage-3d-professional {
        width: min(100%, 390px) !important;
        height: 540px !important;
        min-height: 540px !important;
        margin-top: -38px !important;
    }
    .pocket-settings-step-aparencia .avatar-stage-3d-professional .avatar-3d-viewer {
        width: min(100%, 390px) !important;
        height: 560px !important;
        margin-top: -16px !important;
    }
    @keyframes avatarV2Life05Presence {
        0%, 100% { transform: translateY(calc(var(--avatar-life-y, 0rem) - 1.35rem)) scaleX(var(--avatar-model-scale-x, 1)) rotateZ(var(--avatar-life-tilt, 0deg)); }
        50% { transform: translateY(calc(var(--avatar-life-y, 0rem) - 1.5rem)) scaleX(var(--avatar-model-scale-x, 1)) rotateZ(var(--avatar-life-tilt, 0deg)); }
    }
}


/* =========================================================
   Avatar V2 Life 11 - enquadramento superior + rosto refinado.
   Correção: o avatar sobe mais nas configurações e prioriza cabeça/torso.
   Mantém apenas o modelo, sem efeitos extras no palco.
   ========================================================= */
.pocket-settings-step-aparencia .assistant-stage-full-preview {
    min-height: min(640px, calc(100dvh - 70px)) !important;
    height: min(640px, calc(100dvh - 70px)) !important;
    justify-content: flex-start !important;
    align-items: center !important;
    overflow: visible !important;
    padding-top: 0 !important;
}

.pocket-settings-step-aparencia .avatar-stage-3d-professional {
    width: min(100%, 560px) !important;
    height: min(640px, calc(100dvh - 76px)) !important;
    min-height: min(640px, calc(100dvh - 76px)) !important;
    margin: -112px auto 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    background: transparent !important;
    box-shadow: none !important;
    filter: none !important;
}

.pocket-settings-step-aparencia .avatar-stage-3d-professional::before,
.pocket-settings-step-aparencia .avatar-stage-3d-professional::after,
.avatar-life-14-active::before,
.avatar-life-14-active::after,
.assistant-stage-image.avatar-life-14-active::before,
.assistant-stage-image.avatar-life-14-active::after {
    display: none !important;
    content: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
}

.pocket-settings-step-aparencia .avatar-stage-3d-professional .avatar-3d-viewer {
    width: min(100%, 535px) !important;
    height: min(705px, calc(100dvh - 24px)) !important;
    max-height: min(705px, calc(100dvh - 24px)) !important;
    margin-top: -42px !important;
    background: transparent !important;
    box-shadow: none !important;
    filter: none !important;
    transform-origin: center bottom !important;
}

.avatar-life-14-active .avatar-3d-viewer,
.assistant-stage-image.avatar-life-14-active .avatar-3d-viewer {
    animation: avatarV2Life07Presence 5.6s ease-in-out infinite !important;
    filter: none !important;
}

@keyframes avatarV2Life07Presence {
    0%, 100% {
        transform: translateY(calc(var(--avatar-life-y, 0rem) - 3.05rem)) scaleX(var(--avatar-model-scale-x, 1)) rotateZ(var(--avatar-life-tilt, 0deg));
    }
    50% {
        transform: translateY(calc(var(--avatar-life-y, 0rem) - 3.22rem)) scaleX(var(--avatar-model-scale-x, 1)) rotateZ(var(--avatar-life-tilt, 0deg));
    }
}

/* Pontos reposicionados para o avatar mais alto do Life 12. */
.pocket-settings-step-aparencia .avatar-stage-3d-professional .avatar-zone-hair { left: 276px !important; top: -6px !important; }
.pocket-settings-step-aparencia .avatar-stage-3d-professional .avatar-zone-eyes { left: 278px !important; top: 96px !important; }
.pocket-settings-step-aparencia .avatar-stage-3d-professional .avatar-zone-nose { left: 281px !important; top: 133px !important; }
.pocket-settings-step-aparencia .avatar-stage-3d-professional .avatar-zone-ears { left: 216px !important; top: 106px !important; }
.pocket-settings-step-aparencia .avatar-stage-3d-professional .avatar-zone-torso { left: 280px !important; top: 273px !important; }
.pocket-settings-step-aparencia .avatar-stage-3d-professional .avatar-zone-outfit { left: 320px !important; top: 328px !important; }
.pocket-settings-step-aparencia .avatar-stage-3d-professional .avatar-zone-waist { left: 280px !important; top: 418px !important; }
.pocket-settings-step-aparencia .avatar-stage-3d-professional .avatar-zone-arms { left: 145px !important; top: 323px !important; }
.pocket-settings-step-aparencia .avatar-stage-3d-professional .avatar-zone-hands { left: 122px !important; top: 483px !important; }
.pocket-settings-step-aparencia .avatar-stage-3d-professional .avatar-zone-legs { left: 280px !important; top: 528px !important; }
.pocket-settings-step-aparencia .avatar-stage-3d-professional .avatar-zone-feet { left: 280px !important; top: 588px !important; }

.pocket-settings-step:not(.pocket-settings-step-aparencia) .assistant-stage-image .avatar-3d-viewer-compact {
    width: min(100%, 350px) !important;
    height: min(470px, calc(100dvh - 210px)) !important;
    filter: none !important;
}

@media (max-width: 920px) {
    .pocket-settings-step-aparencia .assistant-stage-full-preview {
        min-height: 540px !important;
        height: 540px !important;
    }
    .pocket-settings-step-aparencia .avatar-stage-3d-professional {
        width: min(100%, 390px) !important;
        height: 540px !important;
        min-height: 540px !important;
        margin-top: -64px !important;
    }
    .pocket-settings-step-aparencia .avatar-stage-3d-professional .avatar-3d-viewer {
        width: min(100%, 390px) !important;
        height: 570px !important;
        margin-top: -26px !important;
    }
    @keyframes avatarV2Life07Presence {
        0%, 100% { transform: translateY(calc(var(--avatar-life-y, 0rem) - 1.9rem)) scaleX(var(--avatar-model-scale-x, 1)) rotateZ(var(--avatar-life-tilt, 0deg)); }
        50% { transform: translateY(calc(var(--avatar-life-y, 0rem) - 2.05rem)) scaleX(var(--avatar-model-scale-x, 1)) rotateZ(var(--avatar-life-tilt, 0deg)); }
    }
}


/* =========================================================
   Avatar V2 Life 11 - modo aprovação de personagem inteiro.
   Correção conceitual: na edição o avatar deve aparecer completo,
   da cabeça aos pés. Recortes de rosto/conversa ficam para fases futuras.
   ========================================================= */
.pocket-settings-step-aparencia .assistant-stage-full-preview {
    min-height: clamp(620px, calc(100dvh - 54px), 780px) !important;
    height: clamp(620px, calc(100dvh - 54px), 780px) !important;
    justify-content: center !important;
    align-items: center !important;
    overflow: visible !important;
    padding: 0 !important;
}

.pocket-settings-step-aparencia .avatar-stage-3d-professional {
    width: min(100%, 560px) !important;
    height: clamp(620px, calc(100dvh - 54px), 780px) !important;
    min-height: clamp(620px, calc(100dvh - 54px), 780px) !important;
    margin: 0 auto !important;
    padding: 0 !important;
    overflow: visible !important;
    background: transparent !important;
    box-shadow: none !important;
    filter: none !important;
}

.pocket-settings-step-aparencia .avatar-stage-3d-professional::before,
.pocket-settings-step-aparencia .avatar-stage-3d-professional::after,
.avatar-life-14-active::before,
.avatar-life-14-active::after,
.assistant-stage-image.avatar-life-14-active::before,
.assistant-stage-image.avatar-life-14-active::after {
    display: none !important;
    content: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
}

.pocket-settings-step-aparencia .avatar-stage-3d-professional .avatar-3d-viewer {
    width: min(100%, 520px) !important;
    height: clamp(620px, calc(100dvh - 54px), 780px) !important;
    max-height: clamp(620px, calc(100dvh - 54px), 780px) !important;
    margin: 0 auto !important;
    background: transparent !important;
    box-shadow: none !important;
    filter: none !important;
    transform-origin: center center !important;
}

.avatar-life-14-active .avatar-3d-viewer,
.assistant-stage-image.avatar-life-14-active .avatar-3d-viewer {
    animation: avatarV2Life07FullBodyPresence 6.4s ease-in-out infinite !important;
    filter: none !important;
}

.avatar-life-14-active.is-avatar-speaking .avatar-3d-viewer,
.assistant-stage-image.avatar-life-14-active.is-avatar-speaking .avatar-3d-viewer,
.avatar-life-14-active.is-avatar-listening .avatar-3d-viewer,
.assistant-stage-image.avatar-life-14-active.is-avatar-listening .avatar-3d-viewer,
.avatar-life-14-active.is-avatar-thinking .avatar-3d-viewer,
.assistant-stage-image.avatar-life-14-active.is-avatar-thinking .avatar-3d-viewer {
    filter: none !important;
}

@keyframes avatarV2Life07FullBodyPresence {
    0%, 100% {
        transform: translateY(var(--avatar-life-y, 0rem)) scaleX(var(--avatar-model-scale-x, 1)) rotateZ(var(--avatar-life-tilt, 0deg));
    }
    50% {
        transform: translateY(calc(var(--avatar-life-y, 0rem) - .16rem)) scaleX(var(--avatar-model-scale-x, 1)) rotateZ(var(--avatar-life-tilt, 0deg));
    }
}

.pocket-settings-step-aparencia .avatar-edit-status,
.pocket-settings-step-aparencia .avatar-life-badges,
.pocket-settings-step-aparencia .avatar-game-hint {
    display: none !important;
}

/* Pontos de clique recalibrados para corpo inteiro: cabeça, tronco, braços, pernas e pés visíveis. */
.pocket-settings-step-aparencia .avatar-stage-3d-professional .avatar-zone-hair { left: 280px !important; top: 64px !important; }
.pocket-settings-step-aparencia .avatar-stage-3d-professional .avatar-zone-eyes { left: 280px !important; top: 142px !important; }
.pocket-settings-step-aparencia .avatar-stage-3d-professional .avatar-zone-nose { left: 280px !important; top: 176px !important; }
.pocket-settings-step-aparencia .avatar-stage-3d-professional .avatar-zone-ears { left: 218px !important; top: 154px !important; }
.pocket-settings-step-aparencia .avatar-stage-3d-professional .avatar-zone-torso { left: 280px !important; top: 318px !important; }
.pocket-settings-step-aparencia .avatar-stage-3d-professional .avatar-zone-outfit { left: 322px !important; top: 374px !important; }
.pocket-settings-step-aparencia .avatar-stage-3d-professional .avatar-zone-waist { left: 280px !important; top: 440px !important; }
.pocket-settings-step-aparencia .avatar-stage-3d-professional .avatar-zone-arms { left: 145px !important; top: 350px !important; }
.pocket-settings-step-aparencia .avatar-stage-3d-professional .avatar-zone-hands { left: 120px !important; top: 493px !important; }
.pocket-settings-step-aparencia .avatar-stage-3d-professional .avatar-zone-legs { left: 280px !important; top: 575px !important; }
.pocket-settings-step-aparencia .avatar-stage-3d-professional .avatar-zone-feet { left: 280px !important; top: 704px !important; }

.pocket-settings-step:not(.pocket-settings-step-aparencia) .assistant-stage-image .avatar-3d-viewer-compact {
    width: min(100%, 350px) !important;
    height: min(470px, calc(100dvh - 210px)) !important;
    filter: none !important;
}

@media (max-width: 920px) {
    .pocket-settings-step-aparencia .assistant-stage-full-preview,
    .pocket-settings-step-aparencia .avatar-stage-3d-professional {
        min-height: 560px !important;
        height: 560px !important;
    }
    .pocket-settings-step-aparencia .avatar-stage-3d-professional .avatar-3d-viewer {
        width: min(100%, 390px) !important;
        height: 560px !important;
        max-height: 560px !important;
    }
    @keyframes avatarV2Life07FullBodyPresence {
        0%, 100% { transform: translateY(var(--avatar-life-y, 0rem)) scaleX(var(--avatar-model-scale-x, 1)) rotateZ(var(--avatar-life-tilt, 0deg)); }
        50% { transform: translateY(calc(var(--avatar-life-y, 0rem) - .1rem)) scaleX(var(--avatar-model-scale-x, 1)) rotateZ(var(--avatar-life-tilt, 0deg)); }
    }
    .pocket-settings-step-aparencia .avatar-stage-3d-professional .avatar-zone-feet { top: 518px !important; }
    .pocket-settings-step-aparencia .avatar-stage-3d-professional .avatar-zone-legs { top: 440px !important; }
}


/* =========================================================
   Avatar V2 Life 11 - correção real de corpo inteiro em TODAS
   as telas de configuração do Assistente.
   O avatar de aprovação deve aparecer da cabeça aos pés; zooms de
   rosto/conversa serão separados somente depois da aprovação geral.
   ========================================================= */
.pocket-settings-step .pocket-page-right.pocket-settings-side {
    overflow: visible !important;
    padding-top: 10px !important;
    padding-bottom: 12px !important;
}

.pocket-settings-step .pocket-settings-side .assistant-stage,
.pocket-settings-step .pocket-settings-side .assistant-stage-image,
.pocket-settings-step .pocket-settings-side .assistant-stage-full-preview,
.pocket-settings-step .pocket-settings-side .assistant-stage-compact-preview {
    justify-content: center !important;
    align-items: center !important;
    overflow: visible !important;
    min-height: clamp(580px, calc(100dvh - 112px), 740px) !important;
    height: clamp(560px, calc(100dvh - 124px), 720px) !important;
    padding: 0 !important;
}

.pocket-settings-step .avatar-stage-3d-professional,
.pocket-settings-step .avatar-game-stage {
    width: min(100%, 530px) !important;
    height: clamp(580px, calc(100dvh - 112px), 740px) !important;
    min-height: clamp(580px, calc(100dvh - 112px), 740px) !important;
    margin: 0 auto !important;
    padding: 0 !important;
    transform: none !important;
    display: grid !important;
    place-items: center !important;
    overflow: visible !important;
    background: transparent !important;
    box-shadow: none !important;
    filter: none !important;
}

.pocket-settings-step .avatar-3d-viewer,
.pocket-settings-step .avatar-3d-viewer-compact,
.pocket-settings-step-aparencia .avatar-stage-3d-professional .avatar-3d-viewer,
.pocket-settings-step:not(.pocket-settings-step-aparencia) .assistant-stage-image .avatar-3d-viewer-compact {
    width: min(100%, 485px) !important;
    height: clamp(566px, calc(100dvh - 124px), 724px) !important;
    min-height: 566px !important;
    max-height: 724px !important;
    margin: 0 auto !important;
    display: block !important;
    background: transparent !important;
    border-radius: 18px !important;
    overflow: visible !important;
    box-shadow: none !important;
    filter: none !important;
    transform: translateY(0) scaleX(var(--avatar-model-scale-x, 1)) !important;
    transform-origin: center center !important;
}

.pocket-settings-step .avatar-3d-poster {
    display: none !important;
}

/* Remove definitivamente os efeitos visuais do palco enquanto o personagem está em aprovação. */
.pocket-settings-step .avatar-stage-3d-professional::before,
.pocket-settings-step .avatar-stage-3d-professional::after,
.pocket-settings-step .avatar-game-stage::before,
.pocket-settings-step .avatar-game-stage::after,
.pocket-settings-step .avatar-life-14-active::before,
.pocket-settings-step .avatar-life-14-active::after,
.pocket-settings-step .assistant-stage-image.avatar-life-14-active::before,
.pocket-settings-step .assistant-stage-image.avatar-life-14-active::after {
    display: none !important;
    content: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
}

.pocket-settings-step .avatar-life-14-active .avatar-3d-viewer,
.pocket-settings-step .assistant-stage-image.avatar-life-14-active .avatar-3d-viewer {
    animation: avatarV2Life08FullBodyPresence 6.2s ease-in-out infinite !important;
    filter: none !important;
}

@keyframes avatarV2Life08FullBodyPresence {
    0%, 100% { transform: translateY(var(--avatar-life-y, 0rem)) scaleX(var(--avatar-model-scale-x, 1)) rotateZ(var(--avatar-life-tilt, 0deg)); }
    50% { transform: translateY(calc(var(--avatar-life-y, 0rem) - .10rem)) scaleX(var(--avatar-model-scale-x, 1)) rotateZ(var(--avatar-life-tilt, 0deg)); }
}

.pocket-settings-step .assistant-balloon-side {
    margin-top: 0 !important;
    padding: 6px 10px !important;
    font-size: .78rem !important;
    box-shadow: none !important;
}

.pocket-settings-step .pocket-settings-meta-row {
    margin-top: 4px !important;
    flex: 0 0 auto !important;
}

/* Pontos de clique ajustados para o enquadramento único de corpo inteiro. */
.pocket-settings-step-aparencia .avatar-stage-3d-professional .avatar-zone-hair { left: 50% !important; top: 9.5% !important; }
.pocket-settings-step-aparencia .avatar-stage-3d-professional .avatar-zone-eyes { left: 50% !important; top: 19% !important; }
.pocket-settings-step-aparencia .avatar-stage-3d-professional .avatar-zone-nose { left: 50% !important; top: 24% !important; }
.pocket-settings-step-aparencia .avatar-stage-3d-professional .avatar-zone-ears { left: 38% !important; top: 20% !important; }
.pocket-settings-step-aparencia .avatar-stage-3d-professional .avatar-zone-torso { left: 50% !important; top: 42% !important; }
.pocket-settings-step-aparencia .avatar-stage-3d-professional .avatar-zone-outfit { left: 60% !important; top: 48% !important; }
.pocket-settings-step-aparencia .avatar-stage-3d-professional .avatar-zone-waist { left: 50% !important; top: 58% !important; }
.pocket-settings-step-aparencia .avatar-stage-3d-professional .avatar-zone-arms { left: 32% !important; top: 49% !important; }
.pocket-settings-step-aparencia .avatar-stage-3d-professional .avatar-zone-hands { left: 69% !important; top: 64% !important; }
.pocket-settings-step-aparencia .avatar-stage-3d-professional .avatar-zone-legs { left: 50% !important; top: 76% !important; }
.pocket-settings-step-aparencia .avatar-stage-3d-professional .avatar-zone-feet { left: 50% !important; top: 92% !important; }

@media (min-width: 861px) and (max-height: 760px) {
    .pocket-settings-step .pocket-page-right.pocket-settings-side {
        padding-top: 6px !important;
        padding-bottom: 8px !important;
    }
    .pocket-settings-step .pocket-settings-side .assistant-stage,
    .pocket-settings-step .pocket-settings-side .assistant-stage-image,
    .pocket-settings-step .pocket-settings-side .assistant-stage-full-preview,
    .pocket-settings-step .pocket-settings-side .assistant-stage-compact-preview,
    .pocket-settings-step .avatar-stage-3d-professional,
    .pocket-settings-step .avatar-game-stage {
        min-height: 500px !important;
        height: min(540px, calc(100dvh - 104px)) !important;
    }
    .pocket-settings-step .avatar-3d-viewer,
    .pocket-settings-step .avatar-3d-viewer-compact,
    .pocket-settings-step-aparencia .avatar-stage-3d-professional .avatar-3d-viewer,
    .pocket-settings-step:not(.pocket-settings-step-aparencia) .assistant-stage-image .avatar-3d-viewer-compact {
        width: min(100%, 432px) !important;
        height: min(540px, calc(100dvh - 108px)) !important;
        min-height: 505px !important;
    }
    .pocket-settings-step .assistant-balloon-side {
        display: none !important;
    }
}

@media (max-width: 860px) {
    .pocket-settings-step .pocket-settings-side .assistant-stage,
    .pocket-settings-step .pocket-settings-side .assistant-stage-image,
    .pocket-settings-step .pocket-settings-side .assistant-stage-full-preview,
    .pocket-settings-step .pocket-settings-side .assistant-stage-compact-preview,
    .pocket-settings-step .avatar-stage-3d-professional,
    .pocket-settings-step .avatar-game-stage {
        min-height: 500px !important;
        height: min(560px, 72vh) !important;
    }
    .pocket-settings-step .avatar-3d-viewer,
    .pocket-settings-step .avatar-3d-viewer-compact,
    .pocket-settings-step-aparencia .avatar-stage-3d-professional .avatar-3d-viewer,
    .pocket-settings-step:not(.pocket-settings-step-aparencia) .assistant-stage-image .avatar-3d-viewer-compact {
        width: min(100%, 406px) !important;
        height: min(560px, 72vh) !important;
        min-height: 500px !important;
    }
}


/* Avatar V2 Life 11: elimina prévias PNG antigas e usa somente o modelo 3D nas telas principais. */
.assistant-home-avatar-3d,
.assistant-store-avatar-3d {
    display: block !important;
    background: transparent !important;
    box-shadow: none !important;
    filter: none !important;
    object-fit: contain !important;
}

.assistant-home-avatar-3d {
    width: 112px !important;
    height: 156px !important;
    min-width: 112px !important;
    border-radius: 0 !important;
}

.assistant-store-avatar-3d {
    width: min(100%, 430px) !important;
    height: min(620px, 72vh) !important;
    margin: 0 auto !important;
}


/* Pocket Croquette Avatar V2 Life 14 - anatomy refinement */
.avatar-life-14-active .avatar-3d-viewer,
.assistant-stage-image.avatar-life-14-active .avatar-3d-viewer {
    --avatar-model-scale-x: 1;
}
.avatar-life-14-active::before,
.avatar-life-14-active::after,
.assistant-stage-image.avatar-life-14-active::before,
.assistant-stage-image.avatar-life-14-active::after {
    display: none !important;
    content: none !important;
}

/* Pocket Croquette Life 18 - rede de amigos, compartilhamento e chat */
.pocket-social-book .pocket-form-card,
.social-section-card,
.recipe-share-box,
.chat-panel {
    background: rgba(255, 251, 243, .92);
    border: 1px solid rgba(105, 62, 24, .16);
    border-radius: 22px;
    padding: 16px;
    box-shadow: 0 12px 28px rgba(76, 43, 16, .10);
    margin: 12px 0;
}
.social-inline-form,
.recipe-share-box form,
.chat-send-form {
    display: grid;
    gap: 10px;
}
.social-inline-form {
    grid-template-columns: 1fr auto;
    align-items: end;
}
.social-inline-form input,
.recipe-share-box input,
.recipe-share-box select,
.chat-send-form textarea {
    width: 100%;
    border: 1px solid rgba(105, 62, 24, .22);
    border-radius: 14px;
    padding: 11px 13px;
    font: inherit;
    background: #fffaf2;
    color: #442510;
}
.social-person-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid rgba(105, 62, 24, .12);
}
.social-person-row:last-child { border-bottom: 0; }
.social-person-row strong,
.social-person-row small { display: block; }
.social-person-row small { color: rgba(68, 37, 16, .68); margin-top: 2px; }
.social-person-row form { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.social-status-pill {
    border-radius: 999px;
    padding: 7px 10px;
    background: rgba(244, 185, 109, .26);
    color: #6c3c12;
    font-weight: 700;
    font-size: .82rem;
}
.chat-friend-link {
    display: block;
    text-decoration: none;
    color: #4b2a12;
    background: rgba(255,255,255,.62);
    border: 1px solid rgba(105, 62, 24, .14);
    border-radius: 16px;
    padding: 11px 12px;
    margin: 8px 0;
    font-weight: 700;
}
.chat-friend-link.is-active { background: rgba(244, 185, 109, .32); }
.chat-message-list {
    min-height: 380px;
    max-height: min(58vh, 560px);
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 8px;
    background: rgba(255,255,255,.42);
    border-radius: 18px;
}
.chat-bubble {
    max-width: 82%;
    border-radius: 18px;
    padding: 10px 12px;
    border: 1px solid rgba(105, 62, 24, .12);
    background: #fffaf2;
    color: #442510;
}
.chat-bubble.is-mine {
    align-self: flex-end;
    background: rgba(244, 185, 109, .36);
}
.chat-bubble.is-friend { align-self: flex-start; }
.chat-bubble small { display: block; opacity: .72; margin-bottom: 4px; }
.chat-bubble p { margin: 0; line-height: 1.35; }
.chat-empty {
    margin: auto;
    opacity: .72;
    text-align: center;
}
.recipe-share-box strong { display: block; margin-bottom: 10px; }
@media (max-width: 760px) {
    .social-inline-form { grid-template-columns: 1fr; }
    .social-person-row { align-items: flex-start; flex-direction: column; }
    .chat-message-list { min-height: 300px; }
    .chat-bubble { max-width: 94%; }
}

/* =========================================================
   Life 19 - Serviços: virada de folha real, rede, chat e dispositivos
   ========================================================= */
.pocket-book-recipe-open {
    perspective: 2600px !important;
    transform-style: preserve-3d !important;
}
.pocket-book-recipe-open .pocket-page-right {
    transform-style: preserve-3d !important;
    overflow: visible !important;
}
.recipe-turning-sheet {
    left: -1px !important;
    right: auto !important;
    width: calc(100% + 2px) !important;
    transform-origin: left center !important;
    border-left: 1px solid rgba(111,74,47,.16) !important;
    background:
        linear-gradient(90deg, rgba(77,45,21,.24) 0%, rgba(255,246,224,.99) 7%, rgba(255,251,241,.99) 42%, rgba(249,226,181,.96) 73%, rgba(123,80,39,.18) 100%),
        repeating-linear-gradient(to bottom, transparent 0, transparent 35px, rgba(111,74,47,.04) 36px) !important;
    filter: drop-shadow(-18px 10px 24px rgba(75,43,21,.18)) !important;
}
.recipe-turning-sheet::before,
.recipe-turning-sheet::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    border-radius: inherit;
}
.recipe-turning-sheet::before {
    background: linear-gradient(90deg, rgba(0,0,0,.20), transparent 18%, rgba(255,255,255,.38) 46%, transparent 72%, rgba(0,0,0,.16));
    mix-blend-mode: multiply;
    opacity: .45;
}
.recipe-turning-sheet::after {
    left: auto;
    width: 28px;
    background: linear-gradient(90deg, rgba(255,255,255,.12), rgba(80,48,23,.26));
}
.pocket-book-recipe-open.is-turning-forward .recipe-turning-sheet {
    animation: pocketRealPageForward 2.85s cubic-bezier(.2,.73,.14,1) both !important;
}
.pocket-book-recipe-open.is-turning-back .recipe-turning-sheet {
    animation: pocketRealPageBack 2.85s cubic-bezier(.2,.73,.14,1) both !important;
}
.pocket-book-recipe-open.is-turning .pocket-page-left::after,
.pocket-book-recipe-open.is-turning .pocket-page-right::before {
    opacity: .55 !important;
}
@keyframes pocketRealPageForward {
    0% { opacity: 0; transform: perspective(2600px) rotateY(0deg) translateZ(5px) skewY(0deg); clip-path: polygon(0 0,100% 0,100% 100%,0 100%); }
    8% { opacity: 1; }
    22% { transform: perspective(2600px) rotateY(-32deg) translateZ(18px) skewY(-.6deg); clip-path: polygon(0 0,98% 2%,100% 98%,0 100%); }
    48% { opacity: 1; transform: perspective(2600px) rotateY(-94deg) translateZ(42px) skewY(-1.4deg); clip-path: polygon(0 0,94% 5%,100% 95%,0 100%); filter: drop-shadow(-36px 20px 38px rgba(75,43,21,.24)) brightness(.94); }
    72% { opacity: 1; transform: perspective(2600px) rotateY(-148deg) translateZ(22px) skewY(.8deg); clip-path: polygon(0 2%,98% 0,100% 100%,0 98%); }
    100% { opacity: 0; transform: perspective(2600px) rotateY(-180deg) translateZ(5px) skewY(0deg); clip-path: polygon(0 0,100% 0,100% 100%,0 100%); }
}
@keyframes pocketRealPageBack {
    0% { opacity: 0; transform: perspective(2600px) rotateY(-180deg) translateZ(5px) skewY(0deg); }
    8% { opacity: 1; }
    30% { transform: perspective(2600px) rotateY(-142deg) translateZ(22px) skewY(.8deg); }
    54% { opacity: 1; transform: perspective(2600px) rotateY(-86deg) translateZ(42px) skewY(-1.3deg); filter: drop-shadow(-36px 20px 38px rgba(75,43,21,.24)) brightness(.94); }
    78% { transform: perspective(2600px) rotateY(-28deg) translateZ(18px) skewY(-.6deg); }
    100% { opacity: 0; transform: perspective(2600px) rotateY(0deg) translateZ(5px) skewY(0deg); }
}
.recipe-service-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    margin: 12px 0;
}
.recipe-visibility-form {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
}
.recipe-visibility-form select,
.device-card select {
    border: 1px solid var(--pocket-line);
    background: rgba(255,255,255,.72);
    border-radius: 999px;
    padding: 11px 14px;
    color: var(--pocket-text);
}
.device-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 14px;
}
.device-card {
    background: rgba(255,248,234,.84);
    border: 1px solid var(--pocket-line);
    border-radius: 22px;
    padding: 16px;
    display: grid;
    gap: 10px;
}
.device-card strong { color: var(--pocket-brown); }
.chat-send-form textarea:focus,
.recipe-visibility-form select:focus,
.device-card select:focus {
    outline: 2px solid rgba(232,139,58,.34);
    outline-offset: 2px;
}

/* Prévia temporária do assistente enquanto o avatar 3D fica restrito à Platform. */
.assistant-static-preview {
    width: min(320px, 86%);
    margin: 0 auto;
    text-align: center;
}
.assistant-static-frame {
    width: 220px;
    height: 280px;
    margin: 0 auto 14px;
    border-radius: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.72);
    border: 2px solid rgba(139, 84, 45, 0.22);
    box-shadow: 0 16px 34px rgba(70, 39, 18, 0.14);
    overflow: hidden;
}
.assistant-static-frame img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center bottom;
}
.assistant-static-icon {
    font-size: 6rem;
    line-height: 1;
}
.assistant-static-label {
    font-weight: 800;
    color: #6d3f24;
}

.pocket-preview-toolbar {
    align-items: center;
    background: rgba(255, 255, 255, 0.72);
    border: 1px solid rgba(112, 82, 52, 0.18);
    border-radius: 18px;
    display: flex;
    gap: 14px;
    justify-content: space-between;
    margin: 14px 0 18px;
    padding: 12px 14px;
}
.pocket-preview-toolbar strong {
    color: #4f3422;
    display: block;
    font-size: 0.95rem;
}
.pocket-preview-toolbar small {
    color: rgba(79, 52, 34, 0.72);
    display: block;
    font-size: 0.78rem;
    margin-top: 2px;
}
.pocket-preview-toolbar.is-user-preview {
    background: rgba(246, 200, 107, 0.22);
    border-color: rgba(232, 139, 58, 0.32);
}
.assistant-static-note {
    color: rgba(79, 52, 34, 0.68);
    font-size: 0.82rem;
    line-height: 1.35;
    margin: 8px auto 0;
    max-width: 230px;
    text-align: center;
}
@media (max-width: 720px) {
    .pocket-preview-toolbar {
        align-items: stretch;
        flex-direction: column;
    }
}

/* =========================================================
   Life 20 — caderneta responsiva, navegação e chat persistente
   ========================================================= */
.sr-only {
    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;
}

.pocket-shell {
    width: min(1220px, calc(100% - 28px)) !important;
    align-items: flex-start !important;
    padding: 18px 0 !important;
}

.pocket-notebook-frame {
    position: relative;
    width: 100%;
    min-width: 0;
}

.pocket-notebook-frame.is-authenticated {
    padding: 58px 14px 14px;
    border: 1px solid rgba(93, 48, 20, .42);
    border-radius: 32px;
    background:
        linear-gradient(90deg, rgba(102, 51, 22, .18), transparent 2%, transparent 98%, rgba(102, 51, 22, .16)),
        linear-gradient(145deg, #b85f2d, #8e431f 48%, #713217);
    box-shadow: 0 18px 45px rgba(72, 37, 18, .2), inset 0 1px rgba(255,255,255,.2);
    overflow: hidden;
}

.pocket-app-toolbar.has-compact-nav {
    position: absolute;
    z-index: 80;
    inset: 8px 16px auto;
    min-height: 42px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    color: #fff8e9;
}

.pocket-app-mark,
.pocket-toolbar-actions {
    display: flex;
    align-items: center;
    gap: 9px;
}

.pocket-app-mark strong { font-size: .93rem; letter-spacing: .015em; }
.pocket-toolbar-actions form { margin: 0; }

.pocket-toolbar-button {
    min-height: 38px;
    border: 1px solid rgba(255,255,255,.28);
    border-radius: 999px;
    padding: 8px 13px;
    background: rgba(70, 27, 10, .24);
    color: #fffaf0;
    font: inherit;
    font-size: .86rem;
    font-weight: 800;
    cursor: pointer;
}

.pocket-toolbar-button:hover,
.pocket-toolbar-button:focus-visible { background: rgba(70, 27, 10, .42); outline: 2px solid rgba(255,255,255,.45); outline-offset: 2px; }

.pocket-notebook-frame .pocket-book,
.pocket-notebook-frame .pocket-book-home,
.pocket-notebook-frame .pocket-book-recipes,
.pocket-notebook-frame .pocket-book-settings,
.pocket-notebook-frame .pocket-book-store,
.pocket-notebook-frame .pocket-book-recipe,
.pocket-notebook-frame .pocket-book-recipe-open,
.pocket-notebook-frame .pocket-chat-book {
    width: 100% !important;
    border-radius: 20px !important;
    overflow: hidden !important;
    filter: none !important;
    box-shadow: 0 5px 14px rgba(50, 26, 12, .13) !important;
}

.pocket-page-transition {
    position: absolute;
    z-index: 120;
    inset: 58px 14px 14px 50%;
    pointer-events: none;
    perspective: 1800px;
    overflow: visible;
}

.pocket-page-transition span {
    position: absolute;
    inset: 0;
    opacity: 0;
    transform-origin: left center;
    border-radius: 3px 20px 20px 3px;
    background:
        linear-gradient(90deg, rgba(87,47,24,.2), rgba(255,250,238,.99) 12%, rgba(255,244,214,.98) 100%),
        repeating-linear-gradient(to bottom, transparent 0, transparent 35px, rgba(111,74,47,.04) 36px);
    box-shadow: -18px 10px 32px rgba(57,28,12,.2);
    backface-visibility: hidden;
}

.pocket-notebook-frame.is-navigating .pocket-page-transition span {
    animation: pocketRoutePageTurn .46s cubic-bezier(.5,.03,.45,.98) both;
}

@keyframes pocketRoutePageTurn {
    0% { opacity: 0; transform: rotateY(0deg); }
    10% { opacity: 1; }
    55% { opacity: 1; transform: rotateY(-92deg) translateZ(12px); filter: brightness(.94); }
    100% { opacity: 1; transform: rotateY(-178deg); }
}

.pocket-chat-dock {
    display: none;
    position: fixed;
    z-index: 100;
    right: max(24px, calc((100vw - 1180px) / 2 + 28px));
    bottom: max(22px, env(safe-area-inset-bottom));
}

.pocket-chat-dock.is-visible { display: block; }

.pocket-chat-food-button {
    position: relative;
    width: 64px;
    height: 64px;
    display: grid;
    place-items: center;
    border: 3px solid #fff5dd;
    border-radius: 48% 52% 45% 55%;
    background: linear-gradient(145deg, #f4b25d, #d7792e);
    color: #44210d;
    box-shadow: 0 12px 28px rgba(73, 36, 16, .28);
    font-size: 1.75rem;
    cursor: pointer;
    transform: rotate(-5deg);
}

.pocket-chat-food-button > span { transform: rotate(5deg); }
.pocket-chat-food-button > strong {
    position: absolute;
    top: -7px;
    right: -5px;
    min-width: 24px;
    height: 24px;
    display: grid;
    place-items: center;
    padding: 0 5px;
    border: 2px solid #fff8ea;
    border-radius: 99px;
    background: #b9362e;
    color: #fff;
    font-size: .72rem;
}

.pocket-chat-dock-panel {
    position: absolute;
    right: 0;
    bottom: 76px;
    width: min(330px, calc(100vw - 36px));
    padding: 10px;
    border: 1px solid rgba(93,48,20,.2);
    border-radius: 22px 22px 7px 22px;
    background: rgba(255, 249, 235, .98);
    box-shadow: 0 18px 45px rgba(65,31,13,.24);
}

.pocket-chat-dock-heading { display: flex; align-items: center; justify-content: space-between; padding: 5px 7px 9px; color: var(--pocket-brown); }
.pocket-chat-dock-heading button { border: 0; background: transparent; color: inherit; font-size: 1.45rem; cursor: pointer; }
.pocket-chat-dock-panel > a { display: grid; grid-template-columns: 32px 1fr; gap: 8px; align-items: center; padding: 10px; border-radius: 14px; color: var(--pocket-text); text-decoration: none; }
.pocket-chat-dock-panel > a:hover { background: rgba(244,185,109,.22); }
.pocket-chat-dock-panel > a strong,
.pocket-chat-dock-panel > a small { display: block; }
.pocket-chat-dock-panel > a small { margin-top: 2px; color: var(--pocket-muted); font-size: .78rem; }

.pocket-install-help {
    position: fixed;
    z-index: 200;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 20px;
    background: rgba(51, 26, 12, .48);
}
.pocket-install-help[hidden] { display: none; }
.pocket-install-help > div { position: relative; width: min(440px, 100%); padding: 26px; border-radius: 24px; background: #fff8e8; box-shadow: 0 22px 60px rgba(42,20,8,.28); }
.pocket-install-help h2 { margin-top: 0; color: var(--pocket-brown); }
.pocket-install-help p { line-height: 1.55; }
.pocket-install-help button { position: absolute; top: 8px; right: 10px; border: 0; background: transparent; color: var(--pocket-brown); font-size: 1.6rem; cursor: pointer; }

.pocket-chat-book .pocket-actions { margin-top: 14px; }

/* Tablets em pé e celulares usam uma caderneta de uma folha contínua. */
@media (max-width: 1024px), (max-width: 1180px) and (orientation: portrait) {
    body { background: #8b431f !important; }
    .pocket-shell { width: 100% !important; padding: 0 !important; min-height: 100dvh; }
    .pocket-notebook-frame.is-authenticated {
        min-height: 100dvh;
        padding: calc(52px + env(safe-area-inset-top)) 8px calc(10px + env(safe-area-inset-bottom));
        border: 0;
        border-radius: 0;
        box-shadow: none;
    }
    .pocket-app-toolbar { inset: calc(6px + env(safe-area-inset-top)) 12px auto; min-height: 40px; }
    .pocket-app-mark strong { font-size: .86rem; }
    .pocket-toolbar-button { min-height: 36px; padding: 7px 11px; }
    .pocket-notebook-frame .pocket-book,
    .pocket-notebook-frame .pocket-book-home,
    .pocket-notebook-frame .pocket-book-recipes,
    .pocket-notebook-frame .pocket-book-settings,
    .pocket-notebook-frame .pocket-book-store,
    .pocket-notebook-frame .pocket-book-recipe,
    .pocket-notebook-frame .pocket-book-recipe-open,
    .pocket-notebook-frame .pocket-chat-book {
        display: block !important;
        min-height: calc(100dvh - 62px) !important;
        border-radius: 16px !important;
        background: #fff8e8 !important;
        box-shadow: 0 3px 12px rgba(48,22,8,.18) !important;
    }
    .pocket-notebook-frame .pocket-book::after,
    .pocket-notebook-frame .pocket-book-home::after,
    .pocket-notebook-frame .pocket-book-recipes::after,
    .pocket-notebook-frame .pocket-book-settings::after,
    .pocket-notebook-frame .pocket-book-store::after,
    .pocket-notebook-frame .pocket-book-recipe::after,
    .pocket-notebook-frame .pocket-book-recipe-open::after,
    .pocket-notebook-frame .pocket-chat-book::after { display: none !important; content: none !important; }
    .pocket-notebook-frame .pocket-page,
    .pocket-notebook-frame .pocket-page-left,
    .pocket-notebook-frame .pocket-page-right {
        min-height: 0 !important;
        width: 100% !important;
        padding: clamp(20px, 5vw, 38px) !important;
        border: 0 !important;
        border-radius: 0 !important;
        background:
            repeating-linear-gradient(to bottom, transparent 0, transparent 35px, rgba(111,74,47,.04) 36px),
            linear-gradient(135deg, #fffaf0, #f8e9c7) !important;
        box-shadow: none !important;
        overflow: visible !important;
    }
    .pocket-notebook-frame .pocket-page:first-child { border-radius: 16px 16px 0 0 !important; }
    .pocket-notebook-frame .pocket-page:last-child { border-radius: 0 0 16px 16px !important; padding-top: 8px !important; }
    .pocket-page-transition { inset: calc(52px + env(safe-area-inset-top)) 8px auto; height: min(76vh, 720px); perspective: 1200px; }
    .pocket-page-transition span { transform-origin: right center; border-radius: 16px; }
    @keyframes pocketRoutePageTurn {
        0% { opacity: 0; transform: rotateY(0deg); }
        12% { opacity: 1; }
        60% { opacity: 1; transform: rotateY(92deg) translateZ(8px); }
        100% { opacity: 0; transform: rotateY(178deg); }
    }
    .recipe-list-grid { max-height: none !important; overflow: visible !important; }
    .chat-message-list { min-height: 44dvh; max-height: 58dvh; }
    .pocket-chat-dock { right: 18px; bottom: calc(16px + env(safe-area-inset-bottom)); }
}

/* =========================================================
   Life 25 — acesso do app, som configurável e avatar 3D
   ========================================================= */
.pocket-app-access { max-width: 510px; }
.pocket-access-form {
    display: grid;
    gap: 14px;
    margin: 24px 0 16px;
    text-align: left;
}
.pocket-access-form label { display: grid; gap: 6px; }
.pocket-access-form label span { color: var(--pocket-brown); font-size: .9rem; font-weight: 800; }
.pocket-access-form input {
    width: 100%;
    min-height: 48px;
    border: 1px solid rgba(111,74,47,.24);
    border-radius: 14px;
    padding: 11px 13px;
    background: rgba(255,255,255,.72);
    color: var(--pocket-text);
    font: inherit;
}
.pocket-access-form input:focus-visible { outline: 3px solid rgba(232,139,58,.28); border-color: var(--pocket-orange); }
.pocket-access-form .pocket-button { width: 100%; min-height: 48px; }
.pocket-access-switch { display: inline-block; color: var(--pocket-brown); font-weight: 800; text-underline-offset: 3px; }
.pocket-access-note { margin: 18px 0 0; color: var(--pocket-muted); font-size: .8rem; line-height: 1.45; }
.pocket-install-entry {
    display: block;
    width: 100%;
    margin: 14px 0 0;
    border: 1px solid rgba(111,74,47,.2);
    border-radius: 999px;
    padding: 11px 16px;
    background: rgba(246,200,107,.2);
    color: var(--pocket-brown);
    font: inherit;
    font-weight: 800;
    cursor: pointer;
}
.pocket-install-entry[hidden] { display: none; }

.avatar-game-stage.avatar-stage-3d-professional,
.assistant-stage:has(.avatar-3d-viewer) {
    background:
        radial-gradient(circle at 50% 32%, rgba(255,255,255,.92), transparent 32%),
        radial-gradient(ellipse at 50% 89%, rgba(111,74,47,.18), transparent 34%),
        linear-gradient(160deg, rgba(255,246,222,.94), rgba(220,236,203,.72)) !important;
    border: 1px solid rgba(111,74,47,.16) !important;
    box-shadow: inset 0 1px rgba(255,255,255,.72), 0 18px 42px rgba(75,39,20,.12) !important;
}
.avatar-3d-viewer,
.assistant-home-avatar-3d {
    --poster-color: transparent;
    filter: drop-shadow(0 15px 16px rgba(61,33,18,.18));
}
.avatar-3d-viewer[data-avatar-life="active"] { animation: avatarModelReveal .52s ease-out both; }
@keyframes avatarModelReveal {
    from { opacity: 0; filter: drop-shadow(0 8px 10px rgba(61,33,18,.1)) saturate(.9); }
    to { opacity: 1; filter: drop-shadow(0 15px 16px rgba(61,33,18,.18)) saturate(1.04); }
}
@media (prefers-reduced-motion: reduce) {
    .avatar-3d-viewer[data-avatar-life="active"] { animation: none !important; }
}

@media (max-width: 560px) {
    .pocket-app-mark strong { display: none; }
    .pocket-toolbar-button span { display: none; }
    .pocket-page h1 { font-size: clamp(1.75rem, 9vw, 2.35rem) !important; }
    .pocket-page { font-size: 1rem; }
    .pocket-button { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
    .pocket-home-orb-nav { gap: 12px !important; }
    .pocket-home-orb { min-width: 64px !important; min-height: 64px !important; }
    .pocket-chat-food-button { width: 58px; height: 58px; }
}

@media (prefers-reduced-motion: reduce) {
    .pocket-notebook-frame.is-navigating .pocket-page-transition span { animation: none !important; }
    .assistant-home-face { animation: none !important; }
}

/* =========================================================
   Life 21 — virada sincronizada e retrato do assistente
   ========================================================= */
@view-transition { navigation: none; }
.pocket-notebook-frame { view-transition-name: none; --page-touch-progress: 0; }
::view-transition-group(pocket-notebook) { animation-duration: 1.12s; animation-timing-function: cubic-bezier(.34,.05,.18,1); perspective: 1800px; }
::view-transition-old(pocket-notebook) { transform-origin: left center; animation: pocketViewOld 1.12s cubic-bezier(.34,.05,.18,1) both; }
::view-transition-new(pocket-notebook) { transform-origin: right center; animation: pocketViewNew 1.12s cubic-bezier(.34,.05,.18,1) both; }
@keyframes pocketViewOld {
    0% { opacity: 1; transform: perspective(1800px) rotateY(0deg); filter: brightness(1); }
    50% { opacity: .94; transform: perspective(1800px) rotateY(-78deg) translateZ(12px); filter: brightness(.92); }
    100% { opacity: 0; transform: perspective(1800px) rotateY(-118deg) translateZ(4px); }
}
@keyframes pocketViewNew {
    0% { opacity: 0; transform: perspective(1800px) rotateY(82deg) translateZ(10px); filter: brightness(.9); }
    46% { opacity: .94; }
    100% { opacity: 1; transform: perspective(1800px) rotateY(0deg); filter: brightness(1); }
}
.pocket-notebook-frame.is-navigating .pocket-page-transition span { animation: pocketRoutePageTurn 1.12s cubic-bezier(.34,.05,.18,1) both !important; }
.pocket-notebook-frame.is-page-arriving .pocket-page-transition span { opacity: 1; transform-origin: right center; animation: pocketRoutePageArrive .72s cubic-bezier(.2,.72,.18,1) both !important; }
@keyframes pocketRoutePageTurn {
    0% { opacity: 0; transform: perspective(1800px) rotateY(0deg) translateZ(2px); }
    8% { opacity: 1; }
    48% { opacity: 1; transform: perspective(1800px) rotateY(-82deg) translateZ(24px); filter: brightness(.93); }
    100% { opacity: 0; transform: perspective(1800px) rotateY(-180deg) translateZ(2px); }
}
@keyframes pocketRoutePageArrive {
    0% { opacity: .96; transform: perspective(1800px) rotateY(86deg) translateZ(18px); filter: brightness(.92); }
    100% { opacity: 0; transform: perspective(1800px) rotateY(0deg); filter: brightness(1); }
}
.pocket-notebook-frame.is-touch-turning .pocket-page-transition span { opacity: calc(.18 + var(--page-touch-progress) * .82) !important; transform-origin: right center !important; transform: perspective(1500px) rotateY(calc(var(--page-touch-progress) * -132deg)) translateZ(calc(var(--page-touch-progress) * 20px)) !important; filter: brightness(calc(1 - var(--page-touch-progress) * .09)); animation: none !important; }
.pocket-notebook-frame.is-touch-turning.is-touch-committing .pocket-page-transition span { opacity: 0 !important; transform: perspective(1500px) rotateY(-180deg) translateZ(2px) !important; transition: transform .62s cubic-bezier(.18,.74,.16,1), opacity .62s ease !important; }
.pocket-notebook-frame.is-touch-turning.is-touch-cancelling .pocket-page-transition span { opacity: 0 !important; transform: perspective(1500px) rotateY(0deg) !important; transition: transform .34s ease-out, opacity .28s ease !important; }
.assistant-home-chip { grid-template-columns: 94px minmax(0, 1fr) !important; min-height: 142px !important; }
.assistant-home-face { width: 90px !important; height: 120px !important; min-width: 90px !important; min-height: 120px !important; max-width: 90px !important; max-height: 120px !important; object-fit: contain !important; object-position: center bottom !important; border-radius: 16px !important; background: radial-gradient(circle at 50% 28%, rgba(255,255,255,.92), rgba(246,200,107,.2) 62%, rgba(185,216,170,.2)) !important; border: 1px solid rgba(111,74,47,.18) !important; box-shadow: 0 8px 18px rgba(86,54,32,.13) !important; animation: none !important; }
model-viewer.assistant-home-face::part(default-progress-bar) { display: none; }
@media (max-width: 560px) {
    .assistant-home-chip { grid-template-columns: 82px minmax(0, 1fr) !important; min-height: 128px !important; padding: 10px !important; }
    .assistant-home-face { width: 78px !important; height: 104px !important; min-width: 78px !important; min-height: 104px !important; max-width: 78px !important; max-height: 104px !important; }
}
@media (prefers-reduced-motion: reduce) {
    ::view-transition-group(pocket-notebook), ::view-transition-old(pocket-notebook), ::view-transition-new(pocket-notebook), .pocket-notebook-frame.is-navigating .pocket-page-transition span, .pocket-notebook-frame.is-page-arriving .pocket-page-transition span { animation-duration: .01ms !important; }
}

/* =========================================================
   Life 22 — capa estática, folha interna e navegação contextual
   ========================================================= */
@media (min-width: 1025px) and (min-height: 760px) {
    .pocket-shell {
        min-height: 100vh !important;
        align-items: center !important;
        padding: clamp(34px, 6vh, 76px) 0 !important;
    }
}

.pocket-app-toolbar {
    display: grid !important;
    grid-template-columns: max-content minmax(0, 1fr) max-content;
}

.pocket-compact-nav {
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    overflow-x: auto;
    padding: 2px 5px 4px;
    scrollbar-width: none;
    overscroll-behavior-inline: contain;
}
.pocket-compact-nav::-webkit-scrollbar { display: none; }
.pocket-compact-nav a {
    width: 31px;
    height: 31px;
    min-width: 31px;
    display: inline-grid;
    place-items: center;
    border: 1px solid rgba(255,255,255,.28);
    border-radius: 50%;
    background: rgba(70,27,10,.22);
    color: #fffaf0;
    font-size: .94rem;
    line-height: 1;
    text-decoration: none;
    transition: transform .16s ease, background .16s ease;
}
.pocket-compact-nav a:hover,
.pocket-compact-nav a:focus-visible {
    background: rgba(255,248,232,.2);
    transform: translateY(-1px);
    outline: 2px solid rgba(255,255,255,.38);
    outline-offset: 1px;
}

/* A capa marrom nunca participa da virada; somente esta folha creme sobreposta gira. */
.pocket-notebook-frame { view-transition-name: none !important; }
.pocket-page-transition {
    z-index: 70 !important;
    clip-path: inset(0 round 0 18px 18px 0);
}
.pocket-page-transition span {
    background:
        linear-gradient(90deg, rgba(91,52,28,.15), rgba(255,250,238,.99) 10%, rgba(255,241,210,.99) 100%) !important;
    box-shadow: -14px 7px 25px rgba(57,28,12,.18) !important;
}
.pocket-notebook-frame.is-navigating .pocket-page-transition span {
    animation: pocketInnerSheetTurn 1.06s cubic-bezier(.34,.05,.18,1) both !important;
}
.pocket-notebook-frame.is-page-arriving .pocket-page-transition span {
    animation: pocketInnerSheetArrive .58s cubic-bezier(.2,.72,.18,1) both !important;
}
@keyframes pocketInnerSheetTurn {
    0% { opacity: 0; transform: perspective(1800px) rotateY(0deg); }
    7% { opacity: 1; }
    52% { opacity: 1; transform: perspective(1800px) rotateY(-88deg) translateZ(18px); filter: brightness(.94); }
    100% { opacity: 0; transform: perspective(1800px) rotateY(-178deg); }
}
@keyframes pocketInnerSheetArrive {
    0% { opacity: .92; transform: perspective(1800px) rotateY(78deg) translateZ(14px); }
    100% { opacity: 0; transform: perspective(1800px) rotateY(0deg); }
}

.assistant-home-chip { grid-template-columns: 94px minmax(0, 1fr) !important; }
.assistant-home-portrait {
    width: 90px;
    height: 120px;
    overflow: hidden;
    border: 1px solid rgba(111,74,47,.18);
    border-radius: 16px;
    background: radial-gradient(circle at 50% 28%, rgba(255,255,255,.92), rgba(246,200,107,.2) 62%, rgba(185,216,170,.2));
    box-shadow: 0 8px 18px rgba(86,54,32,.13);
}
.assistant-home-portrait .assistant-home-face {
    width: 100% !important;
    height: 100% !important;
    min-width: 100% !important;
    min-height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
}
.assistant-home-portrait img.assistant-home-face {
    object-fit: contain !important;
    transform: scale(1.5);
    transform-origin: 50% 22%;
}

.pocket-home-orb-nav { gap: 7px !important; }
.pocket-home-orb,
button.pocket-home-orb,
a.pocket-home-orb {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    max-width: 44px !important;
    max-height: 44px !important;
    flex-basis: 44px !important;
    font-size: 1.18rem !important;
}

@media (max-width: 1024px), (max-width: 1180px) and (orientation: portrait) {
    .pocket-app-toolbar.has-compact-nav { grid-template-columns: max-content minmax(0, 1fr) max-content; gap: 6px; }
    .pocket-app-mark { gap: 0; }
    .pocket-app-mark strong { display: none; }
    .pocket-compact-nav { justify-content: flex-start; }
    .pocket-compact-nav a { width: 29px; height: 29px; min-width: 29px; font-size: .88rem; }
    .pocket-page-transition {
        inset: calc(52px + env(safe-area-inset-top)) 8px auto !important;
        height: min(76vh, 720px) !important;
        clip-path: inset(0 round 16px);
    }
    .pocket-page-transition span { transform-origin: right center !important; border-radius: 16px !important; }
}

@media (max-width: 560px) {
    .pocket-toolbar-button { padding-inline: 9px; }
    .assistant-home-chip { grid-template-columns: 82px minmax(0, 1fr) !important; }
    .assistant-home-portrait { width: 78px; height: 104px; }
}

@media (prefers-reduced-motion: reduce) {
    .pocket-notebook-frame.is-navigating .pocket-page-transition span,
    .pocket-notebook-frame.is-page-arriving .pocket-page-transition span { animation-duration: .01ms !important; }
}

/* =========================================================
   Life 23 — abertura coerente e menu superior estável
   ========================================================= */
@media (min-width: 1025px) {
    .pocket-app-toolbar.has-compact-nav {
        grid-template-columns: max-content minmax(0, 1fr) max-content !important;
        column-gap: 12px;
    }

    .pocket-compact-nav {
        justify-content: flex-end !important;
        padding-inline: 10px 2px;
    }

    /* A abertura passa a usar a mesma capa, folhas e barra das telas seguintes. */
    .pocket-book-home {
        width: 100% !important;
        max-width: none !important;
    }
    .pocket-book-home .pocket-page-left,
    .pocket-book-home .pocket-page-right {
        background:
            repeating-linear-gradient(to bottom, transparent 0, transparent 35px, rgba(111, 74, 47, .052) 36px),
            radial-gradient(circle at 16% 10%, rgba(255, 255, 255, .55), transparent 17rem),
            linear-gradient(135deg, rgba(255, 250, 239, .98), rgba(255, 238, 203, .98)) !important;
    }
}

.pocket-compact-nav a {
    transform: none !important;
    outline: 0 !important;
    transition: background-color .15s ease, box-shadow .15s ease, color .15s ease !important;
}
.pocket-compact-nav a:hover,
.pocket-compact-nav a:focus-visible,
.pocket-compact-nav a:active {
    transform: none !important;
    outline: 0 !important;
    background: rgba(255, 248, 232, .25) !important;
    box-shadow:
        inset 0 0 0 2px rgba(255,255,255,.34),
        inset 0 -8px 13px rgba(102,51,22,.18) !important;
}
.pocket-compact-nav a:active span {
    filter: brightness(.9) saturate(1.12);
}

@media (max-width: 1024px), (max-width: 1180px) and (orientation: portrait) {
    .pocket-compact-nav { justify-content: flex-start !important; }
}

/* =========================================================
   Life 24 — encaixe uniforme das folhas e fundo externo
   ========================================================= */
body {
    background:
        radial-gradient(circle at 18% 12%, rgba(210, 127, 67, .2), transparent 34rem),
        radial-gradient(circle at 82% 88%, rgba(116, 63, 36, .34), transparent 38rem),
        linear-gradient(145deg, #3a2118, #24140f 58%, #160d0a) !important;
    background-attachment: fixed !important;
}

@media (min-width: 1025px) {
    .pocket-notebook-frame .pocket-book,
    .pocket-notebook-frame .pocket-book-home,
    .pocket-notebook-frame .pocket-book-recipes,
    .pocket-notebook-frame .pocket-book-settings,
    .pocket-notebook-frame .pocket-book-store,
    .pocket-notebook-frame .pocket-book-recipe,
    .pocket-notebook-frame .pocket-book-recipe-open,
    .pocket-notebook-frame .pocket-chat-book,
    .pocket-notebook-frame .pocket-social-book,
    .pocket-notebook-frame .pocket-devices-book {
        width: 100% !important;
        max-width: none !important;
        margin-inline: 0 !important;
        border-radius: 20px !important;
    }

    .pocket-notebook-frame .pocket-page-left,
    .pocket-notebook-frame .pocket-book-home .pocket-page-left {
        border-radius: 20px 5px 5px 20px !important;
        margin-left: 0 !important;
    }
}

@media (max-width: 1024px), (max-width: 1180px) and (orientation: portrait) {
    body {
        background: linear-gradient(155deg, #8b431f, #642d17) !important;
        background-attachment: fixed !important;
    }
}
:root model-viewer[data-avatar-generation="life27-node-motion"] {
    /* Life27: motion belongs to GLB nodes, not to the entire HTML canvas. */
    animation: none !important;
}