.share-input-wrapper{position:relative;width:calc(100% - 20px)!important;margin:20px 10px!important}
.share-url-input{width:100%!important;padding:12px 50px 12px 12px!important;border:1px solid #e0e0e0!important;border-radius:10px!important;background:#fff!important;font-size:14px!important;box-shadow:0 2px 4px rgb(0 0 0 / .05)!important}
.copy-btn{position:absolute!important;right:8px!important;top:50%!important;transform:translateY(-50%)!important;background:#007bff!important;border:none!important;border-radius:6px!important;width:34px!important;height:34px!important;cursor:pointer!important;display:flex!important;align-items:center!important;justify-content:center!important}
.copy-btn svg{width:20px!important;height:20px!important;fill:white!important}
.prompt-input-group{display:flex;flex-direction:column;gap:12px;width:100%}
.prompt-input-group label{font-weight:500;color:#333;font-size:1rem}
#prompt-input{padding:12px 16px;font-size:1rem;border:2px solid #e0e0e0;border-radius:8px;width:100%;transition:border-color .2s ease}
#prompt-input:focus{border-color:#007bff;outline:0}
.prompt-help{color:#666;font-size:.9rem;margin:-8px 0 4px 0}
.gradient-btn{padding:12px 24px;font-size:1rem;min-height:48px}
.action-buttons{position:relative}
.progress-bar{flex:1;height:8px;background:#e0e0e0;border-radius:12px;overflow:visible;position:relative;padding:2px;display:flex;align-items:center;gap:2px}
.nav-btn{display:flex;align-items:center;justify-content:center}
.nav-btn svg{width:24px;height:24px}
.nav-btn span{display:none}
@media (max-width:768px){
.prompt-header{text-align:center;gap:8px;padding:0 12px}
.fullscreen-mode .book-page-container{width:100%;max-width:100vw;margin:0 auto;padding:16px;display:flex;flex-direction:column;align-items:center;box-sizing:border-box;background-color:#f9f9f9}
.fullscreen-mode .book-page{width:100%;max-width:640px;margin:20px auto;background:#fff;border-radius:12px;box-shadow:0 8px 24px rgb(0 0 0 / .1);overflow:hidden;position:relative;display:flex;flex-direction:column;padding:16px}
.fullscreen-mode .book-page-text-area{width:100%;max-width:640px;min-height:140px;max-height:70vh;padding:24px;box-sizing:border-box;display:flex;align-items:center;justify-content:center;text-align:justify;background:#fff;overflow-y:auto;border:1px solid #e0e0e0}
.fullscreen-mode .book-page-text{width:100%;max-width:600px;font-family:Georgia,serif;color:#333;line-height:1.6;word-wrap:normal;overflow-wrap:normal;hyphens:none;font-size:1.2rem}
.fullscreen-mode .navigation-container{padding:10px 20px;display:flex;justify-content:space-between;align-items:center;background-color:#fff;border-top:1px solid #e0e0e0}
.fullscreen-mode .nav-btn{background:#007bff;color:#fff;border:none;border-radius:8px;padding:10px 16px;font-size:1rem;cursor:pointer;transition:background-color .3s}
.fullscreen-mode .nav-btn:hover{background:#0056b3}
.fullscreen-mode .progress-bar{height:6px;background:#007bff;border-radius:3px;margin:10px 0}
.fullscreen-mode .exit-fullscreen{position:absolute;top:16px;right:16px;width:40px;height:40px;background:#ff4d4d;color:#fff;border:none;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background-color .3s}
.fullscreen-mode .exit-fullscreen:hover{background:#c00}
}
@media (max-width:768px){
.fullscreen-mode .navigation-container{display:flex;flex-direction:row;align-items:center;justify-content:space-between;padding:0 10px}
.fullscreen-mode .progress-bar{flex:1;margin:0 10px}
.fullscreen-mode .nav-btn{width:40px;height:40px;padding:0;display:flex;align-items:center;justify-content:center}
.fullscreen-mode .nav-btn.prev{order:-1}
.fullscreen-mode .nav-btn.next{order:1}
}
@media (hover:none){
.nav-btn,.story-button{-webkit-tap-highlight-color:#fff0}
.nav-btn:active,.story-button:active{transform:scale(.98)}
}
@media (max-width:480px){
.fullscreen-mode .page-display{max-width:100vw;padding:0}
.fullscreen-mode .book-page-container{max-width:100vw;padding:0}
.fullscreen-mode .book-page{width:100vw;max-width:100vw;margin:0;border-radius:0}
.fullscreen-mode .book-page-text-area{max-width:100vw;min-height:100px;max-height:50vh;padding:12px;font-size:1rem}
.fullscreen-mode .book-page-text{max-width:95vw;font-size:1rem}
.fullscreen-mode .navigation-container{padding:10px 5px;gap:8px}
.fullscreen-mode .nav-btn{min-width:60px;padding:8px 10px;font-size:14px;border-radius:6px}
.fullscreen-mode .progress-bar{max-width:200px;height:6px}
.fullscreen-mode .exit-fullscreen{top:8px;right:8px;width:36px;height:36px}
}
.action-buttons{display:flex;flex-wrap:wrap;gap:.4rem;padding:.5rem 0}
.story-button{flex:1 1 auto;min-height:40px;padding:.5rem .3rem;font-size:.85rem;border-radius:6px;margin:0}
.story-button svg{width:16px;height:16px;margin-right:4px}
@supports (padding:max(0px)){
.content-wrapper{padding-left:max(1rem,env(safe-area-inset-left));padding-right:max(1rem,env(safe-area-inset-right));background-color:#fff;border-radius:20px}
}
.action-toolbar{margin:1.5rem 0}
.action-grid{display:grid;grid-template-columns:repeat(8,1fr);gap:10px;margin-bottom:20px}
.action-button{background-color:#fff;border:1px solid #e0e0e0;border-radius:10px;padding:12px;display:flex;flex-direction:column;align-items:center;justify-content:center;box-shadow:0 2px 4px rgb(0 0 0 / .05);transition:all .15s ease;min-height:80px}
.action-button:hover{background-color:#f9f9f9;box-shadow:0 3px 8px rgb(0 0 0 / .08)}
.action-button:active{transform:translateY(1px);box-shadow:0 1px 2px rgb(0 0 0 / .1)}
.button-content{display:flex;flex-direction:column;align-items:center;gap:8px}
.action-button svg{width:24px;height:24px;fill:#505050}
.action-button span{font-size:14px;font-weight:500;color:#333}
.action-button .audio-controls,.action-button .generating-text{margin-top:8px;text-align:center}
.action-button .spinner{width:16px;height:16px;border:2px solid rgb(0 0 0 / .1);border-top-color:#333;border-radius:50%;animation:spin 1s linear infinite}
@keyframes spin{
to{transform:rotate(360deg)}
}
@media (max-width:480px){
.action-grid{grid-template-columns:repeat(4,1fr)}
.action-button{min-height:70px;padding:10px}
}
.share-url-input{width:calc(100% - 24px);padding:12px;border:1px solid #e0e0e0;border-radius:10px;background:#fff;font-size:14px;margin:20px 12px;box-shadow:0 2px 4px rgb(0 0 0 / .05);transition:all .15s ease;display:block;position:relative}
.share-url-input:focus{outline:0;border-color:#007bff;box-shadow:0 3px 8px rgb(0 0 0 / .08)}
/* Fullscreen Mode - Kid-Friendly Reading Experience */
.fullscreen-mode {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
    z-index: 2000;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.fullscreen-content-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    min-height: 100vh;
    width: 100%;
    padding: max(env(safe-area-inset-top, 20px), 20px) max(env(safe-area-inset-right, 20px), 20px) max(env(safe-area-inset-bottom, 20px), 20px) max(env(safe-area-inset-left, 20px), 20px);
    box-sizing: border-box;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
}

.fullscreen-page-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: min(90vw, 800px);
    margin: auto;
    padding: 15px 10px;
    box-sizing: border-box;
    flex-shrink: 0;
}

.fullscreen-mode .page-display {
    width: 100%;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: white;
    border-radius: 20px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
    overflow: hidden;
    padding: 0;
}

.fullscreen-mode .book-page {
    width: 100%;
    max-width: 100%;
    margin: 0;
    border-radius: 20px;
    box-shadow: none;
    display: flex;
    flex-direction: column;
}

.fullscreen-mode .book-page-image-area {
    width: 100%;
    height: auto;
    max-height: 55vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: visible;
    background: #f5f5f5;
}

.fullscreen-mode .book-page-image-area img {
    max-width: 100%;
    max-height: 55vh;
    height: auto;
    width: auto;
    object-fit: contain;
    display: block;
}

.fullscreen-mode .book-page-text-area {
    width: 100%;
    height: auto !important;
    min-height: 100px;
    max-height: 40vh;
    padding: clamp(12px, 3vw, 24px);
    box-sizing: border-box;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    text-align: center;
    background: white;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
}

.fullscreen-mode .book-page-text {
    width: 100%;
    font-family: 'Georgia', 'Comic Sans MS', cursive, serif !important;
    color: #333;
    line-height: 1.6 !important;
    font-size: clamp(16px, 3vw, 24px) !important;
    word-wrap: normal;
    overflow-wrap: normal;
    hyphens: none;
}

.fullscreen-mode .navigation-container {
    position: relative !important;
    width: 100%;
    max-width: min(90vw, 800px);
    background: white !important;
    padding: 20px !important;
    margin-top: 20px !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 15px !important;
    border-radius: 16px !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
}

.fullscreen-mode .nav-btn {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
    border-radius: 50%;
    width: 56px;
    height: 56px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
    transition: all 0.3s ease;
    font-size: 24px;
    flex-shrink: 0;
}

.fullscreen-mode .nav-btn:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 16px rgba(102, 126, 234, 0.4);
}

.fullscreen-mode .nav-btn:active {
    transform: scale(0.95);
}

.fullscreen-mode .progress-bar {
    flex: 1;
    height: 10px;
    background: #e0e0e0;
    border-radius: 10px;
    overflow: hidden;
    position: relative;
}

.fullscreen-mode .exit-fullscreen {
    position: fixed !important;
    top: max(env(safe-area-inset-top, 10px), 10px) !important;
    right: max(env(safe-area-inset-right, 10px), 10px) !important;
    z-index: 1001 !important;
    background: rgba(255, 77, 77, 0.95) !important;
    color: white !important;
    border: none !important;
    border-radius: 50% !important;
    width: 50px !important;
    height: 50px !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2) !important;
    transition: all 0.3s ease !important;
}

.fullscreen-mode .exit-fullscreen:hover {
    transform: scale(1.1) rotate(90deg);
    background: rgba(255, 0, 0, 0.95);
}

.fullscreen-mode .exit-fullscreen:active {
    transform: scale(0.95);
}

.fullscreen-mode .exit-fullscreen svg {
    width: 24px;
    height: 24px;
}

/* Tablet Adjustments */
@media (max-width: 1024px) {
    .fullscreen-page-wrapper {
        max-width: 95vw;
    }
    
    .fullscreen-mode .book-page-text {
        font-size: clamp(16px, 3vw, 24px) !important;
    }
}

/* Mobile Adjustments */
@media (max-width: 768px) {
    .fullscreen-content-wrapper {
        padding: max(env(safe-area-inset-top, 15px), 15px) max(env(safe-area-inset-right, 15px), 15px) max(env(safe-area-inset-bottom, 15px), 15px) max(env(safe-area-inset-left, 15px), 15px) !important;
    }
    
    .fullscreen-page-wrapper {
        max-width: 100%;
        padding: 10px 5px;
    }
    
    .fullscreen-mode .book-page-image-area {
        max-height: 48vh;
    }
    
    .fullscreen-mode .book-page-image-area img {
        max-height: 48vh;
    }
    
    .fullscreen-mode .book-page-text-area {
        padding: clamp(10px, 2.5vw, 20px) !important;
        min-height: 80px !important;
        max-height: 45vh !important;
    }
    
    .fullscreen-mode .book-page-text {
        font-size: clamp(14px, 3.5vw, 20px) !important;
        line-height: 1.5 !important;
    }
    
    .fullscreen-mode .navigation-container {
        padding: 16px !important;
        margin-top: 16px !important;
        gap: 10px !important;
        max-width: 100%;
    }
    
    .fullscreen-mode .nav-btn {
        width: 48px !important;
        height: 48px !important;
        font-size: 20px !important;
    }
    
    .fullscreen-mode .exit-fullscreen {
        width: 44px !important;
        height: 44px !important;
    }
}

/* Small Mobile Adjustments */
@media (max-width: 480px) {
    .fullscreen-content-wrapper {
        padding: max(env(safe-area-inset-top, 10px), 10px) max(env(safe-area-inset-right, 10px), 10px) max(env(safe-area-inset-bottom, 10px), 10px) max(env(safe-area-inset-left, 10px), 10px) !important;
    }
    
    .fullscreen-page-wrapper {
        padding: 8px 4px;
    }
    
    .fullscreen-mode .book-page {
        border-radius: 16px;
    }
    
    .fullscreen-mode .page-display {
        border-radius: 16px;
    }
    
    .fullscreen-mode .book-page-image-area {
        max-height: 42vh;
    }
    
    .fullscreen-mode .book-page-image-area img {
        max-height: 42vh;
    }
    
    .fullscreen-mode .book-page-text-area {
        padding: clamp(8px, 2vw, 16px) !important;
        min-height: 70px !important;
        max-height: 48vh !important;
    }
    
    .fullscreen-mode .book-page-text {
        font-size: clamp(13px, 4vw, 18px) !important;
        line-height: 1.4 !important;
    }
    
    .fullscreen-mode .navigation-container {
        padding: 12px !important;
        margin-top: 12px !important;
        gap: 8px !important;
    }
    
    .fullscreen-mode .nav-btn {
        width: 44px !important;
        height: 44px !important;
        font-size: 18px !important;
    }
    
    .fullscreen-mode .progress-bar {
        height: 8px !important;
    }
    
    .fullscreen-mode .exit-fullscreen {
        width: 40px !important;
        height: 40px !important;
    }
    
    .fullscreen-mode .exit-fullscreen svg {
        width: 20px !important;
        height: 20px !important;
    }
}

/* Landscape Orientation on Mobile */
@media (max-width: 812px) and (orientation: landscape) {
    .fullscreen-content-wrapper {
        padding: 10px !important;
    }
    
    .fullscreen-page-wrapper {
        padding: 8px 4px;
    }
    
    .fullscreen-mode .book-page-image-area {
        max-height: 40vh;
    }
    
    .fullscreen-mode .book-page-image-area img {
        max-height: 40vh;
    }
    
    .fullscreen-mode .book-page-text-area {
        min-height: 60px !important;
        max-height: 50vh !important;
        padding: 10px !important;
    }
    
    .fullscreen-mode .book-page-text {
        font-size: clamp(13px, 2.2vw, 16px) !important;
        line-height: 1.3 !important;
    }
    
    .fullscreen-mode .navigation-container {
        padding: 12px !important;
        margin-top: 12px !important;
    }
}
#illustration-modal.modal{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:rgb(0 0 0 / .6);backdrop-filter:blur(8px);z-index:1000;align-items:center;justify-content:center;padding:20px;box-sizing:border-box}
#illustration-modal.modal.active{display:flex}
#illustration-modal .modal-content{background:#fff;border-radius:20px;padding:32px;width:100%;max-width:600px;position:relative;animation:modalSlideUp .4s cubic-bezier(.34,1.56,.64,1);box-shadow:0 20px 60px rgb(0 0 0 / .2);max-height:90vh;overflow-y:auto}
#illustration-modal .modal-close-btn{position:absolute;right:20px;top:20px;background:rgb(0 0 0 / .05);border:none;font-size:24px;cursor:pointer;color:#666;padding:12px;border-radius:50%;transition:all .3s ease;width:44px;height:44px;display:flex;align-items:center;justify-content:center}
#illustration-modal .modal-close-btn:hover{background:rgb(0 0 0 / .1);transform:rotate(90deg) scale(1.1);color:#333}
#illustration-modal .prompt-header{margin-bottom:24px}
#illustration-modal .prompt-header h3{margin:0;font-size:24px;font-weight:700;color:#333;background:linear-gradient(135deg,#667eea 0,#764ba2 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:#fff0}
#illustration-modal .prompt-input-group{display:flex;flex-direction:column;gap:16px}
#illustration-modal .prompt-input-group label{font-weight:600;color:#444;font-size:16px;margin-bottom:8px}
#illustration-modal #prompt-input{padding:16px 20px;font-size:16px;border:2px solid #e8e8e8;border-radius:12px;width:100%;transition:all .3s ease;font-family:inherit;line-height:1.5;min-height:120px;resize:vertical;box-sizing:border-box}
#illustration-modal #prompt-input:focus{border-color:#667eea;outline:0;box-shadow:0 0 0 4px rgb(102 126 234 / .1);transform:translateY(-2px)}
#illustration-modal .prompt-help{color:#777;font-size:14px;margin:0;font-style:italic}
#illustration-modal .gradient-btn{background:#1a1a1a;border:none;border-radius:50px;color:#fff;font-size:1rem;font-weight:600;padding:0.75rem 1.5rem;cursor:pointer;transition:all .3s ease;display:flex;align-items:center;justify-content:center;gap:12px;margin-top:8px}
#illustration-modal .gradient-btn:hover{background:#333;transform:translateY(-2px);box-shadow:0 8px 20px rgba(0,0,0,0.2)}
#illustration-modal .gradient-btn:active{transform:translateY(0);box-shadow:0 4px 10px rgba(0,0,0,0.15)}
#illustration-modal .sparkle-icon{width:20px;height:20px;fill:currentColor}
@keyframes modalSlideUp{
from{opacity:0;transform:translateY(30px) scale(.95)}
to{opacity:1;transform:translateY(0) scale(1)}
}
@media (max-width:768px){
#illustration-modal{padding:16px}
#illustration-modal .modal-content{padding:24px;border-radius:16px;max-height:85vh}
#illustration-modal .prompt-header h3{font-size:20px}
#illustration-modal #prompt-input{font-size:16px;min-height:100px}
#illustration-modal .gradient-btn{padding:14px 24px;font-size:15px}
}
@media (max-width:480px){
#illustration-modal .modal-content{padding:20px}
#illustration-modal .modal-close-btn{right:16px;top:16px;width:40px;height:40px;font-size:20px}
}
.page-display{touch-action:pan-y pinch-zoom;user-select:none;-webkit-user-select:none;position:relative;will-change:transform}
@media (hover:none){
.page-display{transition:transform .3s ease-out,opacity .3s ease-out}
.page-display.swiping{cursor:grabbing}
}
#audiobook-btn[data-status=cloning] .cloning-text,#audiobook-btn[data-status=generating] .generating-text{display:flex;align-items:center;gap:8px}
#audiobook-btn[data-status=cloning] .audio-controls,#audiobook-btn[data-status=cloning] .button-content,#audiobook-btn[data-status=generating] .audio-controls,#audiobook-btn[data-status=generating] .button-content{display:none}
#audiobook-btn[data-status=cloning],#audiobook-btn[data-status=generating]{background:var(--background-light);cursor:wait;pointer-events:none;opacity:.8}
#audiobook-btn .cloning-text,#audiobook-btn .generating-text{display:none}
#audiobook-btn .audio-controls{display:none}
#audiobook-btn[data-status=paused] .audio-controls,#audiobook-btn[data-status=playing] .audio-controls{display:flex;align-items:center;gap:8px}
#audiobook-btn[data-status=paused] .button-content,#audiobook-btn[data-status=playing] .button-content{display:none}
#audiobook-btn[data-status=paused] .pause-icon,#audiobook-btn[data-status=playing] .play-icon{display:none}
.spinner{width:16px;height:16px;border:2px solid #fff0;border-top-color:currentColor;border-radius:50%;animation:spin 1s linear infinite}
@keyframes spin{
from{transform:rotate(0)}
to{transform:rotate(360deg)}
}
#audiobook-btn[data-status=initial] .button-content{display:flex}
#audiobook-btn[data-status=initial] .audio-controls,#audiobook-btn[data-status=initial] .cloning-text,#audiobook-btn[data-status=initial] .generating-text{display:none}
#audiobook-btn[data-status=generating] .generating-text{display:flex}
#audiobook-btn[data-status=generating] .audio-controls,#audiobook-btn[data-status=generating] .button-content,#audiobook-btn[data-status=generating] .cloning-text{display:none}
#audiobook-btn[data-status=cloning] .cloning-text{display:flex}
#audiobook-btn[data-status=cloning] .audio-controls,#audiobook-btn[data-status=cloning] .button-content,#audiobook-btn[data-status=cloning] .generating-text{display:none}
#audiobook-btn[data-status=ready] .audio-controls{display:flex}
#audiobook-btn[data-status=cloning] .cloning-text,#audiobook-btn[data-status=ready] .button-content,#audiobook-btn[data-status=ready] .generating-text{display:none}
#audiobook-btn[data-status=playing] .audio-controls{display:flex}
#audiobook-btn[data-status=cloning] .cloning-text,#audiobook-btn[data-status=playing] .button-content,#audiobook-btn[data-status=playing] .generating-text{display:none}
#audiobook-btn[data-status=playing] .play-icon{display:none}
#audiobook-btn[data-status=ready] .play-icon{display:block}
#audiobook-btn[data-status=ready] .pause-icon{display:none}
#audiobook-btn .generating-text{display:none;align-items:center;gap:8px}
#audiobook-btn .generating-text .spinner{width:16px;height:16px;border:2px solid rgb(0 0 0 / .1);border-top-color:currentColor;border-radius:50%;animation:spin 1s linear infinite}
#audiobook-btn[data-status=generating] .generating-text{display:flex;flex-direction:column}
#audiobook-btn[data-status=generating] .audio-controls,#audiobook-btn[data-status=generating] .button-content{display:none}
#audiobook-btn[data-status=ready] .audio-controls{display:flex;flex-direction:column}
#audiobook-btn[data-status=ready] .button-content,#audiobook-btn[data-status=ready] .generating-text{display:none}
#audiobook-btn[data-status=initial] .button-content{display:flex;flex-direction:column}
#audiobook-btn[data-status=initial] .audio-controls,#audiobook-btn[data-status=initial] .generating-text{display:none}
#lullaby-btn[data-status=generating] .generating-text{display:flex;align-items:center;gap:.5rem}
#lullaby-btn[data-status=generating] .audio-controls,#lullaby-btn[data-status=generating] .button-content{display:none}
#lullaby-btn[data-status=generating]{pointer-events:none;opacity:.8}
#lullaby-btn[data-status=ready] .play-state{display:flex;align-items:center;gap:.5rem}
#lullaby-btn[data-status=ready] .pause-state,#lullaby-btn[data-status=ready] .button-content,#lullaby-btn[data-status=ready] .generating-text{display:none}
#lullaby-btn[data-status=playing] .pause-state{display:flex;align-items:center;gap:.5rem}
#lullaby-btn[data-status=playing] .play-state,#lullaby-btn[data-status=playing] .button-content,#lullaby-btn[data-status=playing] .generating-text{display:none}
#lullaby-btn[data-status=paused] .play-state{display:flex;align-items:center;gap:.5rem}
#lullaby-btn[data-status=paused] .pause-state,#lullaby-btn[data-status=paused] .button-content,#lullaby-btn[data-status=paused] .generating-text{display:none}
#lullaby-btn[data-status=initial] .button-content{display:flex;align-items:center;gap:.5rem}
#lullaby-btn[data-status=initial] .audio-controls,#lullaby-btn[data-status=initial] .generating-text{display:none}
.image-card{position:relative;overflow:visible}
.delete-image-btn{position:absolute;top:-10px;right:-10px;background:rgb(255 0 0 / .7);border:none;border-radius:50%;width:24px;height:24px;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 4px rgb(0 0 0 / .2);transition:all .2s ease;z-index:10;color:#fff}
.delete-image-btn:hover{background:rgb(255 0 0);color:#fff;transform:scale(1.1)}
.delete-image-btn svg{width:14px;height:14px;fill:currentColor}
.share-input-wrapper{position:relative;width:100%;margin:20px 0}
.share-url-input{width:100%;padding:12px;padding-right:50px;border:1px solid #e0e0e0;border-radius:10px;background:#fff;font-size:14px;box-shadow:0 2px 4px rgb(0 0 0 / .05)}
.copy-btn{position:absolute;right:8px;top:50%;transform:translateY(-50%);background:#007bff;border:none;border-radius:6px;width:34px;height:34px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s ease}
.copy-btn:hover{background:#0056b3}
.copy-btn svg{width:20px;height:20px;fill:#fff}
.share-input-wrapper+#share-book-btn{display:none}
.modal{position:fixed;z-index:1000;left:0;top:0;width:100%;height:100%;background-color:rgb(0 0 0 / .5);backdrop-filter:blur(2px)}
@keyframes modalSlideIn{
from{opacity:0;transform:translateY(-30px)}
to{opacity:1;transform:translateY(0)}
}
.modal-header{display:flex;justify-content:space-between;align-items:center;padding:20px 25px;border-bottom:1px solid #e0e0e0;background:linear-gradient(135deg,#667eea 0,#764ba2 100%);color:#fff;border-radius:12px 12px 0 0;margin-bottom:0}
.modal-header h3{margin:0;font-size:20px;font-weight:600}
.close-modal{color:#fff;font-size:28px;font-weight:700;cursor:pointer;width:30px;height:30px;display:flex;align-items:center;justify-content:center;border-radius:50%;transition:background-color .2s ease}
.close-modal:hover{background-color:rgb(255 255 255 / .2)}
.modal-body{padding:25px}
.modal-body p{margin-bottom:15px;color:#555;line-height:1.5}
.modal-body textarea{width:100%;padding:12px;border:2px solid #e0e0e0;border-radius:8px;font-family:inherit;font-size:14px;resize:vertical;min-height:200px;transition:border-color .2s ease}
.modal-body textarea:focus{outline:0;border-color:#667eea;box-shadow:0 0 0 3px rgb(102 126 234 / .1)}
.character-count{text-align:right;margin-top:8px;font-size:12px;color:#888}
.modal-footer{display:flex;justify-content:flex-end;gap:10px;padding:20px 25px;border-top:1px solid #e0e0e0;background-color:#f8f9fa;border-radius:0 0 12px 12px}
.btn-primary,.btn-secondary{padding:10px 20px;border:none;border-radius:6px;font-weight:600;cursor:pointer;transition:all .2s ease;font-size:14px}
.btn-primary{background:linear-gradient(135deg,#667eea 0,#764ba2 100%);color:#fff}
.btn-primary:hover{transform:translateY(-1px);box-shadow:0 4px 12px rgb(102 126 234 / .3)}
.btn-secondary{background:#6c757d;color:#fff}
.btn-secondary:hover{background:#5a6268;transform:translateY(-1px)}
@media (max-width:768px){
.modal-content{width:95%;margin:10% auto}
.modal-body,.modal-footer,.modal-header{padding:15px 20px}
.modal-footer{flex-direction:column;gap:8px}
.btn-primary,.btn-secondary{width:100%}
}
#lullaby-modal .text-options{display:flex;gap:10px;margin-bottom:15px}
#lullaby-modal .text-options button{padding:8px 16px;border:1px solid #ddd;background:#f8f9fa;border-radius:6px;cursor:pointer;transition:all .2s ease}
#lullaby-modal .text-options button.active{background:#007bff;color:#fff;border-color:#007bff}
#lullaby-modal .text-options button:hover{background:#e9ecef}
#lullaby-modal .text-options button.active:hover{background:#0056b3}
#lullaby-modal .text-input-container{position:relative}
#lullaby-modal #lullaby-text{width:100%;min-height:120px;padding:12px;border:1px solid #ddd;border-radius:8px;font-family:inherit;resize:vertical;font-size:14px;line-height:1.4}
#lullaby-modal #lullaby-text:focus{outline:0;border-color:#007bff;box-shadow:0 0 0 2px rgb(0 123 255 / .1)}
#lullaby-modal .char-count{position:absolute;bottom:8px;right:12px;font-size:12px;color:#666;background:rgb(255 255 255 / .9);padding:2px 6px;border-radius:4px}
#lullaby-modal .modal-footer{display:flex;gap:10px;justify-content:flex-end}
#lullaby-modal .modal-footer button{padding:10px 20px;border:none;border-radius:6px;cursor:pointer;font-size:14px;transition:all .2s ease}
#lullaby-modal .cancel-btn{background:#fff;color:#1a1a1a;border:2px solid #1a1a1a;border-radius:50px;padding:0.75rem 1.5rem;font-weight:600;transition:all 0.3s ease}
#lullaby-modal .cancel-btn:hover{background:#f8f9fa;transform:translateY(-2px);box-shadow:0 8px 20px rgba(0,0,0,0.1)}
#lullaby-modal .update-text-btn{background:#28a745;color:#fff}
#lullaby-modal .update-text-btn:hover{background:#218838}
#lullaby-modal .generate-lullaby-btn{background:#007bff;color:#fff}
#lullaby-modal .generate-lullaby-btn:hover{background:#0056b3}
#lullaby-modal .generating-indicator{display:flex;align-items:center;gap:8px}
#lullaby-modal .spinner{width:16px;height:16px;border:2px solid rgb(255 255 255 / .3);border-top:2px solid #fff;border-radius:50%;animation:spin 1s linear infinite}
@keyframes spin{
0%{transform:rotate(0)}
100%{transform:rotate(360deg)}
}
@media (max-width:768px){
#lullaby-modal .text-options{flex-direction:column}
#lullaby-modal .modal-footer{flex-direction:column}
#lullaby-modal .modal-footer button{width:100%}
}
.page-heading-overlay{position:absolute;bottom:8px;right:8px;background:rgb(0 0 0 / .7);color:#fff;padding:4px 8px;border-radius:4px;font-size:12px;font-weight:500;z-index:5;backdrop-filter:blur(2px);border:1px solid rgb(255 255 255 / .2)}
.book-page-container{display:flex;flex-direction:column;align-items:center;max-width:100%;margin:0 auto;}
.book-page{width:100%;max-width:min(640px,95vw);background:#fff;border-radius:12px;box-shadow:0 8px 24px rgb(0 0 0 / .1);overflow:hidden;position:relative;margin:20px auto;display:flex;flex-direction:column}
.book-page-image-area{background:#f5f5f5;display:flex;align-items:center;justify-content:center;overflow:hidden;position:relative;width:100%}
.book-page-image{max-width:100%;max-height:65vh;width:auto;height:auto;object-fit:contain;display:block}
.book-page-text-area{width:100%;height:auto;min-height:180px;padding:20px;box-sizing:border-box;display:flex;align-items:center;justify-content:center;text-align:center;background:#fff;overflow-y:auto}
.book-page-text{width:100%;max-width:600px;font-family:Arial,'DejaVu Sans',sans-serif;color:#000;line-height:1.2;word-wrap:normal;overflow-wrap:normal;hyphens:none}
.book-page-image-loading{background:linear-gradient(45deg,#f0f0f0 25%,#e0e0e0 25%,#e0e0e0 50%,#f0f0f0 50%,#f0f0f0 75%,#e0e0e0 75%);background-size:20px 20px;animation:loading-slide 2s linear infinite;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#666;font-size:1rem;width:100%;height:100%}
.book-page-image-loading .spinner{width:32px;height:32px;border:3px solid rgb(0 0 0 / .1);border-top-color:#333;border-radius:50%;animation:spin 1s linear infinite;margin-bottom:10px}
@keyframes loading-slide{
0%{background-position:0 0}
100%{background-position:40px 40px}
}
.image-selection-container{display:flex;gap:15px;margin-bottom:20px;flex-wrap:wrap;justify-content:center;max-width:100%}
.image-option{position:relative;border:3px solid #fff0;border-radius:12px;overflow:hidden;cursor:pointer;transition:all .3s ease;background:#fff;box-shadow:0 4px 12px rgb(0 0 0 / .1)}
.image-option:hover{transform:translateY(-2px);box-shadow:0 6px 16px rgb(0 0 0 / .15)}
.image-option.selected{border-color:#007bff;box-shadow:0 6px 16px rgb(0 123 255 / .3)}
.image-option img{width:120px;height:120px;object-fit:cover;display:block}
.image-option .delete-image-btn{position:absolute;top:5px;right:5px;width:24px;height:24px;border:none;border-radius:50%;background:rgb(255 0 0 / .8);color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:12px;transition:all .2s ease;z-index:10}
.image-option .delete-image-btn:hover{background:rgb(255 0 0);transform:scale(1.1)}
.image-option .delete-image-btn svg{width:12px;height:12px;fill:currentColor}
@media (max-width:700px){
.book-page-container{padding:10px}
.book-page{max-width:95vw}
.book-page-image-area{width:100%}
.book-page-image{max-height:65vh}
.book-page-text-area{min-height:150px;padding:15px;font-size:0.95rem}
.image-selection-container{gap:10px}
.image-option img{width:80px;height:80px}
}
@media (max-width:480px){
.book-page{margin:10px auto;border-radius:8px;max-width:98vw}
.book-page-image{max-height:60vh}
.book-page-text-area{padding:12px;min-height:120px}
.book-page-text{font-size:.85rem;line-height:1.3}
.image-option img{width:60px;height:60px}
}
.title-page-overlay{position:absolute;top:20px;right:20px;font-size:32px;z-index:3;animation:titleGlow 3s ease-in-out infinite alternate;filter:drop-shadow(0 0 8px rgb(255 215 0 / .8))}
.title-page-text{font-size:48px!important;font-weight:800!important;background:linear-gradient(45deg,#ff6b6b,#4ecdc4,#45b7d1,#96ceb4,#feca57)!important;background-size:400% 400%!important;-webkit-background-clip:text!important;background-clip:text!important;-webkit-text-fill-color:transparent!important;animation:titleGlowBackground 4s ease-in-out infinite,textGlow 2s ease-in-out infinite alternate;text-shadow:0 0 30px rgb(255 255 255 / .5)!important;letter-spacing:2px!important;line-height:1.2!important;position:relative}
.title-page-text::before{content:'';position:absolute;top:-10px;left:-10px;right:-10px;bottom:-10px;background:linear-gradient(135deg,rgb(255 107 107 / .1),rgb(78 205 196 / .1),rgb(69 183 175 / .1),rgb(150 206 180 / .1));border-radius:20px;z-index:-1;animation:titleGlowBackground 4s ease-in-out infinite}
@keyframes titleGlow{
0%{opacity:.7;transform:scale(1)}
100%{opacity:1;transform:scale(1.1)}
}
@keyframes titleGlowBackground{
0%{background-position:0 50%}
50%{background-position:100% 50%}
100%{background-position:0 50%}
}
@keyframes textGlow{
0%{filter:drop-shadow(0 0 10px rgb(255 255 255 / .3));transform:translateY(0)}
100%{filter:drop-shadow(0 0 20px rgb(255 255 255 / .6));transform:translateY(-2px)}
}
.book-page-container .book-page[data-page="0"]{background:linear-gradient(135deg,#ffe5f1,#e1f5fe,#f3e5f5,#fff8e1);border:2px solid #fff0;background-clip:padding-box;position:relative}
.book-page-container .book-page[data-page="0"]::before{content:'';position:absolute;inset:0;border-radius:12px;padding:2px;background:linear-gradient(135deg,#ff6b6b,#4ecdc4,#45b7af,#96ceb4,#feca57,#ff9ff3);mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask-composite:xor;-webkit-mask-composite:xor}
.book-page[data-page="0"] .book-page-text-area{background:linear-gradient(135deg,rgb(255 229 241 / .95),rgb(225 245 254 / .95),rgb(243 229 245 / .95));position:relative;overflow:hidden}
.book-page[data-page="0"] .book-page-text-area::before{content:'';position:absolute;top:0;left:0;right:0;bottom:0;background:radial-gradient(circle at 20% 20%,rgb(255 107 107 / .08) 0,transparent 50%),radial-gradient(circle at 80% 80%,rgb(78 205 196 / .08) 0,transparent 50%),radial-gradient(circle at 50% 50%,rgb(254 202 87 / .06) 0,transparent 70%),radial-gradient(circle at 70% 30%,rgb(255 159 243 / .05) 0,transparent 60%);pointer-events:none;z-index:0}
.book-page[data-page="0"] .book-page-text{position:relative;z-index:1}
.book-page-text-area:has(div[style*="text-align: left"]){height:auto!important;min-height:300px;text-align:left!important;justify-content:flex-start!important;align-items:flex-start!important;padding:30px 20px!important}
.book-page-text-area:has(div[style*="text-align: left"]) .book-page-text{text-align:left!important;line-height:1.6!important}
.fullscreen-mode .book-page-container{padding:0}

/* Confirmation Modal */
#confirmation-modal .modal-content.confirmation-content {
    max-width: 450px;
    border-radius: 16px;
    overflow: hidden;
}

/* PDF Options Modal */
#pdf-options-modal .modal-content.pdf-options-content {
    max-width: 800px;
    max-height: 90vh;
    border-radius: 16px;
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
}

#pdf-options-modal .modal-header {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: #fff;
    padding: 20px 25px;
    flex-shrink: 0;
}

#pdf-options-modal .modal-body {
    padding: 30px 25px;
    overflow-y: auto;
    flex: 1;
}

#pdf-options-modal .modal-body p {
    color: #666;
    font-size: 16px;
    margin: 0 0 20px 0;
}

.pdf-options-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
}

.pdf-option-card {
    background: #fff;
    border: 2px solid #e0e0e0;
    border-radius: 12px;
    padding: 24px 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
}

.pdf-option-card:hover {
    border-color: #667eea;
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(102, 126, 234, 0.2);
}

.pdf-option-card:active {
    transform: translateY(-2px);
}

.pdf-option-card .option-icon {
    width: 64px;
    height: 64px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
}

.pdf-option-card .option-icon svg {
    width: 32px;
    height: 32px;
    fill: #fff;
}

.pdf-option-card h4 {
    font-size: 18px;
    font-weight: 600;
    color: #333;
    margin: 0 0 8px 0;
}

.pdf-option-card p {
    font-size: 14px;
    color: #666;
    line-height: 1.4;
    margin: 0;
}

@media (max-width: 768px) {
    .pdf-options-grid {
        grid-template-columns: 1fr;
    }
    
    #pdf-options-modal .modal-content.pdf-options-content {
        max-width: 95%;
        max-height: 85vh;
        margin: 5vh auto;
    }
    
    #pdf-options-modal .modal-body {
        padding: 20px 15px;
    }
    
    #pdf-options-modal .modal-header {
        padding: 16px 20px;
    }
}

#confirmation-modal .modal-header {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: #fff;
    padding: 20px 25px;
}

#confirmation-modal .modal-body {
    padding: 30px 25px;
}

#confirmation-modal .confirmation-message {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    text-align: center;
}

#confirmation-modal .icon-container {
    width: 64px;
    height: 64px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

#confirmation-modal .confirmation-icon {
    width: 36px;
    height: 36px;
    fill: #fff;
}

#confirmation-modal #confirmation-text {
    font-size: 16px;
    color: #333;
    line-height: 1.5;
    margin: 0;
}

#confirmation-modal .token-cost {
    display: flex;
    align-items: center;
    gap: 8px;
    background: linear-gradient(135deg, #fff3e0 0%, #ffe0b2 100%);
    padding: 12px 24px;
    border-radius: 30px;
    border: 2px solid #ff9800;
    box-shadow: 0 2px 8px rgba(255, 152, 0, 0.2);
}

#confirmation-modal .token-cost svg {
    width: 24px;
    height: 24px;
    fill: #ff9800;
}

#confirmation-modal #confirmation-cost {
    font-size: 16px;
    font-weight: 600;
    color: #e65100;
}

#confirmation-modal .modal-footer {
    padding: 20px 25px;
    display: flex;
    gap: 12px;
    justify-content: flex-end;
}

#confirmation-modal .cancel-btn,
#confirmation-modal .confirm-btn {
    padding: 0.75rem 1.5rem;
    border: none;
    border-radius: 50px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

#confirmation-modal .cancel-btn {
    background: #fff;
    color: #1a1a1a;
    border: 2px solid #1a1a1a;
}

#confirmation-modal .cancel-btn:hover {
    background: #f8f9fa;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}

#confirmation-modal .confirm-btn {
    background: #1a1a1a;
    color: #fff;
}

#confirmation-modal .confirm-btn:hover {
    background: #333;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
}

@media (max-width: 480px) {
    #confirmation-modal .modal-footer {
        flex-direction: column;
    }
    
    #confirmation-modal .cancel-btn,
    #confirmation-modal .confirm-btn {
        width: 100%;
    }
}