:root {
    --primary: #73152b;
    --primary-dark: #320812;
    --secondary: #d6b477;
    --paper: #fff8e9;
    --ink: #2c2022;
    --page-turn-duration: 1700ms;
    --cover-turn-duration: 1880ms;
    --muted: #766a6c;
    --glass: rgba(255,255,255,.78);
    --line: rgba(58,39,43,.14);
    --shadow: 0 30px 80px rgba(43,16,24,.30);
    --radius: 24px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    margin: 0;
    min-height: 100vh;
    color: #fff;
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    overflow-x: hidden;
    background:
        radial-gradient(circle at 15% 20%, rgba(157,31,61,.28), transparent 34%),
        radial-gradient(circle at 82% 80%, rgba(115,21,43,.34), transparent 35%),
        linear-gradient(135deg, #190208 0%, #4c0b1d 47%, #120106 100%);
    background-size: cover;
    background-position: center;
}
body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 180 180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.07'/%3E%3C/svg%3E");
    mix-blend-mode: soft-light;
    opacity: .65;
}
button, input, textarea { font: inherit; }
button { -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; }

.ambient { position: fixed; inset: 0; overflow: hidden; pointer-events: none; }
.ambient span {
    position: absolute; width: 5px; height: 5px; border-radius: 50%;
    background: rgba(255,236,224,.75); box-shadow: 0 0 18px rgba(255,208,220,.85);
    animation: floatDust 11s ease-in-out infinite;
}
.ambient span:nth-child(1){left:8%;top:73%;animation-delay:-2s}.ambient span:nth-child(2){left:22%;top:20%;animation-delay:-7s}.ambient span:nth-child(3){left:48%;top:82%;animation-delay:-4s}.ambient span:nth-child(4){left:70%;top:18%;animation-delay:-8s}.ambient span:nth-child(5){left:88%;top:63%;animation-delay:-5s}.ambient span:nth-child(6){left:58%;top:39%;animation-delay:-1s}
@keyframes floatDust { 0%,100%{transform:translateY(0) scale(.7);opacity:.25}50%{transform:translateY(-32px) scale(1.25);opacity:1} }

.topbar {
    position: fixed; z-index: 50; top: 18px; left: 24px; right: 24px;
    display: flex; align-items: center; justify-content: space-between;
    padding: 10px 12px 10px 16px;
    border: 1px solid rgba(255,255,255,.16); border-radius: 20px;
    background: rgba(34,3,12,.56); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
    box-shadow: 0 12px 38px rgba(0,0,0,.18);
}
.brand { display:flex; gap:11px; align-items:center; color:#fff; border:0; background:transparent; cursor:pointer; text-align:left; }
.brand-mark { width:38px;height:38px;border-radius:12px;display:grid;place-items:center;background:linear-gradient(145deg,var(--secondary),#fff1f4);color:var(--primary-dark);font:700 21px Georgia,serif;box-shadow:inset 0 0 0 1px rgba(255,255,255,.6); }
.brand strong { display:block; font-size:14px; letter-spacing:.02em; }
.brand small { display:block; margin-top:2px; color:rgba(255,255,255,.55); font-size:10px; letter-spacing:.16em; text-transform:uppercase; }
.nav-actions { display:flex; gap:8px; }
.icon-btn { min-height:42px; border:1px solid rgba(255,255,255,.14); color:#fff; background:rgba(255,255,255,.07); border-radius:13px; padding:0 14px; display:flex;align-items:center;gap:8px;cursor:pointer;transition:.2s ease; }
.icon-btn:hover { transform:translateY(-2px);background:rgba(255,255,255,.13); }
.icon-btn.accent { background:linear-gradient(135deg,var(--primary),#9b2944);border-color:rgba(255,255,255,.19); }
.icon-btn.active { background:var(--secondary); color:var(--primary-dark); }
.icon { font-size:18px; line-height:1; }
.desktop-label { font-size:12px; font-weight:700; }

.app-stage { min-height:100vh; display:grid; grid-template-columns:minmax(240px, .7fr) minmax(560px, 1.55fr); gap:3vw; align-items:center; max-width:1500px; margin:0 auto; padding:118px 5vw 48px; position:relative; z-index:2; }
.hero-copy { max-width:480px; padding-left:1vw; transition:.4s ease; }
.eyebrow { display:inline-block;font-size:10px;letter-spacing:.25em;font-weight:800;color:var(--secondary);margin-bottom:14px; }
.hero-copy h1 { margin:0; font:400 clamp(40px,5vw,76px)/.97 Georgia,"Times New Roman",serif; letter-spacing:-.045em; text-wrap:balance; }
.hero-copy h1 em { color:var(--secondary);font-weight:400; }
.hero-copy p { color:rgba(255,255,255,.68);font-size:15px;line-height:1.75;max-width:410px;margin-top:23px; }

.book-zone { position:relative; display:flex; flex-direction:column;align-items:center;min-width:0; }
.book-shadow { position:absolute; width:72%; height:34px; bottom:96px; border-radius:50%; background:rgba(0,0,0,.43); filter:blur(20px); transform:perspective(500px) rotateX(65deg); }
.book { width:min(900px, 59vw); aspect-ratio:1.48/1; position:relative; perspective:2800px; transform-style:preserve-3d; filter:drop-shadow(0 28px 44px rgba(0,0,0,.34)); }
.book-cover { position:absolute;inset:0 21%;z-index:24;border-radius:5px 18px 18px 5px;overflow:hidden;background:linear-gradient(145deg,var(--primary),var(--primary-dark));box-shadow:var(--shadow),inset 0 0 0 1px rgba(255,255,255,.16),inset -18px 0 28px rgba(0,0,0,.24);transform-origin:left center;transform-style:preserve-3d;animation:coverArrive .8s cubic-bezier(.2,.8,.2,1);will-change:transform,opacity; }
#coverView { background:transparent;box-shadow:none;overflow:visible; }
.cover-face { position:absolute;inset:0;border-radius:5px 18px 18px 5px;overflow:hidden;backface-visibility:hidden; }
.cover-front-surface { z-index:2;background:linear-gradient(145deg,var(--primary),var(--primary-dark));box-shadow:var(--shadow),inset 0 0 0 1px rgba(255,255,255,.16),inset -18px 0 28px rgba(0,0,0,.24);transform:rotateY(0deg) translateZ(2px); }
.cover-lining { z-index:1;display:grid;backface-visibility:visible;place-items:center;padding:14%;text-align:center;background:linear-gradient(135deg,#fffaf0,#eadfc9);color:rgba(83,46,34,.58);border:12px solid #d9c7a8;box-shadow:inset 0 0 42px rgba(90,55,25,.15),0 18px 45px rgba(0,0,0,.2);font:italic 14px/1.7 Georgia,serif;letter-spacing:.08em;transform:rotateY(180deg) translateZ(2px); }
.cover-lining::before { content:"❦";display:block;font-size:42px;color:var(--primary);opacity:.48;margin-bottom:12px; }
@keyframes coverArrive { from{opacity:0;transform:translateY(28px) rotateX(7deg) scale(.96)}to{opacity:1;transform:none} }
.cover-texture { position:absolute;inset:0;background:radial-gradient(circle at 25% 15%,rgba(255,255,255,.16),transparent 32%),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='x'%3E%3CfeTurbulence baseFrequency='.22' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23x)' opacity='.15'/%3E%3C/svg%3E");mix-blend-mode:soft-light; }
.cover-border { position:absolute;inset:20px;border:1px solid rgba(255,232,222,.43);box-shadow:inset 0 0 0 5px rgba(255,255,255,.035);border-radius:2px 12px 12px 2px; }
.cover-spine { position:absolute;left:7%;top:0;bottom:0;width:9px;border-left:1px solid rgba(255,255,255,.12);border-right:1px solid rgba(0,0,0,.26);box-shadow:10px 0 25px rgba(0,0,0,.15); }
.cover-layout {
    position:absolute; inset:7.5% 8.5% 13.5% 14%; z-index:4;
    display:grid; grid-template-rows:auto minmax(0,1fr) auto; gap:10px;
    color:#fff8f3; min-height:0;
}
.cover-copy { position:relative;z-index:2;text-align:center; }
.cover-copy-top { padding:0 3%; }
.cover-kicker { display:block;font-size:8px;letter-spacing:.29em;font-weight:800;color:rgba(255,244,239,.72); }
.cover-copy h2 { margin:6px auto 0;max-width:420px;font:400 clamp(22px,2.45vw,36px)/1.02 Georgia,"Times New Roman",serif;letter-spacing:-.035em;text-wrap:balance; }
.cover-flourish { font:18px Georgia,serif;color:var(--secondary);margin:3px 0 0;line-height:1; }
.cover-photo-frame {
    position:relative; min-height:0; width:100%; height:100%; margin:0; overflow:hidden;
    border:1px solid color-mix(in srgb,var(--secondary) 78%,#fff 8%);
    border-radius:3px 10px 10px 3px;
    background:color-mix(in srgb,var(--primary-dark) 82%,#000 18%);
    box-shadow:0 9px 24px rgba(0,0,0,.25),inset 0 0 0 4px rgba(255,255,255,.045),0 0 0 3px rgba(34,4,12,.35);
}
.cover-photo-frame::before {
    content:"";position:absolute;z-index:3;inset:7px;border:1px solid rgba(224,190,126,.42);border-radius:1px 7px 7px 1px;pointer-events:none;
}
.cover-photo {
    position:absolute;z-index:1;inset:0;width:100%;height:100%;display:block;
    opacity:1!important;filter:none!important;mix-blend-mode:normal!important;
    object-fit:contain;object-position:center;background:var(--primary-dark);
    image-rendering:auto;-webkit-user-drag:none;
}
.cover-photo-placeholder { position:absolute;z-index:0;inset:0;display:grid;place-content:center;gap:7px;text-align:center;color:rgba(255,255,255,.45); }
.cover-photo-placeholder span { font:34px Georgia,serif;color:var(--secondary); }
.cover-photo-placeholder small { font-size:9px;letter-spacing:.2em;text-transform:uppercase; }
.cover-photo-frame.has-photo .cover-photo-placeholder { display:none; }
.cover-copy-bottom { padding:0 5%; }
.cover-copy-bottom p { margin:0 auto 7px;max-width:360px;font:italic 11px/1.45 Georgia,serif;color:rgba(255,246,240,.78);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden; }
.cover-recipient { margin:0 auto;border-top:1px solid rgba(255,255,255,.24);padding-top:7px;width:78%;font:700 10px/1.35 Georgia,serif;letter-spacing:.08em;text-transform:uppercase; }
.cover-layout[data-layout="image_only"] { inset:5.2% 6% 12.5% 11.5%;grid-template-rows:minmax(0,1fr);gap:0; }
.cover-layout[data-layout="image_only"] .cover-copy { display:none; }
.cover-layout[data-layout="image_only"] .cover-photo-frame { grid-row:1;height:100%;border-radius:3px 12px 12px 3px; }
.open-book-btn { position:absolute;z-index:8;left:50%;bottom:20px;transform:translateX(-50%);border:1px solid rgba(255,255,255,.28);color:#fff;background:rgba(49,5,17,.76);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-radius:999px;padding:10px 17px;font-size:10px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;cursor:pointer;white-space:nowrap;transition:.2s ease;box-shadow:0 8px 22px rgba(0,0,0,.18); }
.open-book-btn:hover { background:#fff;color:var(--primary);transform:translateX(-50%) translateY(-2px); }
.open-book-btn span { margin-left:8px;font-size:16px; }
.open-book-btn.light { background:rgba(255,255,255,.9); color:var(--primary-dark); }

.spread-view { position:absolute;z-index:5;inset:0;display:grid;grid-template-columns:1fr 1fr;transform-style:preserve-3d; }
.spread-view::before { content:"";position:absolute;z-index:-2;inset:8px 3px -8px;background:repeating-linear-gradient(to bottom,#eee1c8 0,#eee1c8 2px,#d9c8aa 3px,#f5ead6 5px);border-radius:15px;box-shadow:0 28px 55px rgba(0,0,0,.34); }
.spread-view::after { content:"";position:absolute;z-index:-1;inset:3px 1px -3px;border-radius:14px;background:#eadfc9;box-shadow:inset 0 -5px 0 #d2bea0; }
.paper-page { position:relative;overflow:hidden;background:linear-gradient(90deg,color-mix(in srgb,var(--paper) 96%,#c9aa7a) 0%,var(--paper) 8%,var(--paper) 92%,color-mix(in srgb,var(--paper) 96%,#b89460) 100%);color:var(--ink);padding:clamp(30px,4vw,58px);box-shadow:inset 0 0 32px rgba(113,79,47,.07); }
.paper-page::after { content:"";position:absolute;inset:0;pointer-events:none;opacity:.35;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='p'%3E%3CfeTurbulence baseFrequency='.75' numOctaves='4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23p)' opacity='.06'/%3E%3C/svg%3E");mix-blend-mode:multiply; }
.left-page { border-radius:12px 2px 2px 12px;box-shadow:inset -25px 0 30px rgba(53,32,20,.08),-12px 14px 25px rgba(0,0,0,.16); }
.right-page { border-radius:2px 12px 12px 2px;box-shadow:inset 25px 0 30px rgba(53,32,20,.08),12px 14px 25px rgba(0,0,0,.16); }
.book-gutter { position:absolute;z-index:3;left:50%;top:1%;bottom:1%;width:4px;transform:translateX(-50%);background:linear-gradient(90deg,rgba(71,38,23,.22),rgba(255,255,255,.55),rgba(71,38,23,.18));filter:blur(.3px);box-shadow:0 0 18px rgba(49,25,13,.18); }
.page-inner { position:relative;z-index:2;height:100%;display:flex;flex-direction:column; }
.page-chapter { font-size:9px;letter-spacing:.27em;text-transform:uppercase;font-weight:900;color:var(--primary); }
.page-title { margin:13px 0 18px;font:400 clamp(25px,2.4vw,42px)/1.06 Georgia,serif;letter-spacing:-.035em; }
.page-rule { width:44px;height:2px;background:var(--secondary);margin-bottom:18px; }
.page-body { font:400 clamp(13px,1.05vw,16px)/1.72 Georgia,"Times New Roman",serif;color:color-mix(in srgb,var(--ink) 88%,transparent);white-space:pre-line;overflow:auto;scrollbar-width:thin; }
.page-quote { margin-top:auto;padding:15px 0 0 16px;border-left:2px solid var(--secondary);font:italic 13px/1.55 Georgia,serif;color:var(--primary); }
.page-number { position:absolute;bottom:20px;font:11px Georgia,serif;color:rgba(58,43,43,.45); }
.left-page .page-number { left:34px; }.right-page .page-number { right:34px; }
.page-image { width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:3px;margin:2px 0 17px;box-shadow:0 8px 22px rgba(45,28,20,.15);filter:none; }
.blank-page { align-items:center;justify-content:center;text-align:center;color:rgba(56,37,38,.35); }
.blank-page .ornament { font:50px Georgia,serif;color:var(--secondary);opacity:.65; }

.flip-sheet { display:none;position:absolute;z-index:30;top:0;bottom:0;width:50%;transform-style:preserve-3d;will-change:transform; }
.flip-sheet.active { display:block; }
.flip-sheet.active.next { right:0;transform-origin:left center;animation:flipNext var(--page-turn-duration) cubic-bezier(.18,.61,.22,1) forwards; }
.flip-sheet.active.prev { left:0;transform-origin:right center;animation:flipPrev var(--page-turn-duration) cubic-bezier(.18,.61,.22,1) forwards; }
.flip-face { position:absolute!important;inset:0!important;width:100%;height:100%;border-radius:0;backface-visibility:hidden;transform-style:preserve-3d;will-change:filter; }
.flip-front { transform:rotateY(0deg) translateZ(1px); }
.flip-back { transform:rotateY(180deg) translateZ(1px); }
.flip-sheet.next .flip-front { box-shadow:inset 28px 0 40px rgba(46,22,12,.04),12px 12px 28px rgba(0,0,0,.13); }
.flip-sheet.next .flip-back { box-shadow:inset -28px 0 40px rgba(46,22,12,.11),-12px 12px 28px rgba(0,0,0,.13); }
.flip-sheet.prev .flip-front { box-shadow:inset -28px 0 40px rgba(46,22,12,.04),-12px 12px 28px rgba(0,0,0,.13); }
.flip-sheet.prev .flip-back { box-shadow:inset 28px 0 40px rgba(46,22,12,.11),12px 12px 28px rgba(0,0,0,.13); }
.page-curl-shadow { position:absolute;z-index:5;top:0;bottom:0;width:34%;pointer-events:none;opacity:0;filter:blur(8px); }
.flip-sheet.next .page-curl-shadow { left:-12%;background:linear-gradient(90deg,transparent,rgba(20,8,4,.28));animation:curlShadowNext var(--page-turn-duration) ease-in-out forwards; }
.flip-sheet.prev .page-curl-shadow { right:-12%;background:linear-gradient(-90deg,transparent,rgba(20,8,4,.28));animation:curlShadowPrev var(--page-turn-duration) ease-in-out forwards; }
@keyframes flipNext {
    0%{transform:rotateY(0deg) translateZ(1px) skewY(0);}
    18%{transform:rotateY(-24deg) translateZ(9px) skewY(-.35deg);}
    44%{transform:rotateY(-76deg) translateZ(24px) scaleX(.985) skewY(-.7deg);}
    52%{transform:rotateY(-99deg) translateZ(28px) scaleX(.975) skewY(.55deg);}
    78%{transform:rotateY(-153deg) translateZ(10px) skewY(.3deg);}
    100%{transform:rotateY(-180deg) translateZ(1px) skewY(0);}
}
@keyframes flipPrev {
    0%{transform:rotateY(0deg) translateZ(1px) skewY(0);}
    18%{transform:rotateY(24deg) translateZ(9px) skewY(.35deg);}
    44%{transform:rotateY(76deg) translateZ(24px) scaleX(.985) skewY(.7deg);}
    52%{transform:rotateY(99deg) translateZ(28px) scaleX(.975) skewY(-.55deg);}
    78%{transform:rotateY(153deg) translateZ(10px) skewY(-.3deg);}
    100%{transform:rotateY(180deg) translateZ(1px) skewY(0);}
}
@keyframes curlShadowNext {0%,100%{opacity:0;transform:translateX(45%)}45%,58%{opacity:.9;transform:translateX(0)}}
@keyframes curlShadowPrev {0%,100%{opacity:0;transform:translateX(-45%)}45%,58%{opacity:.9;transform:translateX(0)}}
.cover-opening { animation:openNovelCover var(--cover-turn-duration) cubic-bezier(.2,.62,.18,1) forwards!important; }
.cover-closing { animation:openNovelCover var(--cover-turn-duration) cubic-bezier(.2,.62,.18,1) reverse forwards!important; }
.cover-opening .cover-front-surface { animation:coverFrontVisibility var(--cover-turn-duration) linear forwards; }
.cover-opening .cover-lining { animation:coverLiningVisibility var(--cover-turn-duration) linear forwards; }
.cover-closing .cover-front-surface { animation:coverFrontVisibility var(--cover-turn-duration) linear reverse forwards; }
.cover-closing .cover-lining { animation:coverLiningVisibility var(--cover-turn-duration) linear reverse forwards; }
@keyframes coverFrontVisibility {0%,42%{opacity:1}43%,100%{opacity:0}}
@keyframes coverLiningVisibility {0%,42%{opacity:0}43%,100%{opacity:1}}
.spread-revealing { animation:spreadReveal var(--cover-turn-duration) ease-out forwards; }
.spread-closing { animation:spreadReveal var(--cover-turn-duration) ease-in reverse forwards; }
@keyframes openNovelCover {0%{transform:translateX(0) rotateY(0deg);opacity:1}22%{transform:translateX(-4%) rotateY(-25deg)}56%{transform:translateX(-17%) rotateY(-102deg)}82%{opacity:1}100%{transform:translateX(-28%) rotateY(-178deg);opacity:.2}}
@keyframes spreadReveal {0%{opacity:.18;transform:scale(.92) translateX(-2%)}45%{opacity:.7}100%{opacity:1;transform:scale(1) translateX(0)}}

.back-cover { inset:0 21%;display:block;background:linear-gradient(145deg,var(--primary-dark),var(--primary)); }
.back-content { position:absolute;inset:15%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:#fff; }
.back-content h2 { font:400 clamp(28px,3.5vw,50px)/1.08 Georgia,serif;margin:20px 0;letter-spacing:-.03em; }
.back-content p { color:rgba(255,255,255,.65);font:italic 14px Georgia,serif; }

.book-controls { position:relative;z-index:20;margin-top:25px;display:flex;align-items:center;gap:18px; }
.round-btn { width:44px;height:44px;border-radius:50%;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.09);color:#fff;font-size:19px;cursor:pointer;backdrop-filter:blur(8px);transition:.2s ease; }
.round-btn:hover:not(:disabled){background:#fff;color:var(--primary);transform:scale(1.05)}.round-btn:disabled{opacity:.28;cursor:not-allowed}
.progress-wrap { width:170px;text-align:center; }
.progress-wrap span { display:block;font-size:10px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.7);margin-bottom:8px; }
.progress-track { height:3px;background:rgba(255,255,255,.13);border-radius:99px;overflow:hidden; }
.progress-track div { width:0;height:100%;background:var(--secondary);transition:width .4s ease; }
.hint { font-size:10px;color:rgba(255,255,255,.35);letter-spacing:.04em;margin-top:13px; }

.settings-drawer { position:fixed;z-index:100;top:0;right:0;width:min(540px,100%);height:100vh;background:#fbf7f3;color:#2d2426;transform:translateX(104%);transition:transform .36s cubic-bezier(.25,.8,.25,1);box-shadow:-30px 0 70px rgba(0,0,0,.28);display:flex;flex-direction:column; }
.settings-drawer.open { transform:translateX(0); }
.drawer-backdrop { position:fixed;z-index:90;inset:0;background:rgba(9,4,6,.62);backdrop-filter:blur(4px); }
.drawer-head { padding:24px 25px 17px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #e9dfdb; }
.drawer-head .eyebrow { color:var(--primary);margin-bottom:5px; }.drawer-head h2{font:400 28px Georgia,serif;margin:0}.close-btn{width:40px;height:40px;border:1px solid #dfd2ce;background:#fff;border-radius:12px;font-size:25px;color:#5a474b;cursor:pointer}
.drawer-body { padding:24px;overflow:auto;flex:1; }
.auth-panel { text-align:center;padding-top:55px; }.auth-icon{width:64px;height:64px;margin:0 auto 17px;border-radius:20px;display:grid;place-items:center;background:#f0e0e5;color:var(--primary);font-size:28px}.auth-panel h3{font:400 27px Georgia,serif;margin:0 0 8px}.auth-panel>p{font-size:13px;color:#7b6d70;margin-bottom:25px}
.stack-form { display:flex;flex-direction:column;gap:16px;text-align:left; }
.stack-form label,.color-grid label { display:flex;flex-direction:column;gap:7px;font-size:11px;font-weight:800;letter-spacing:.04em;color:#5a474b; }
input,textarea,select { width:100%;border:1px solid #ddd0cc;border-radius:12px;background:#fff;padding:12px 13px;color:#2d2426;outline:none;transition:.2s ease;resize:vertical; }
input:focus,textarea:focus,select:focus{border-color:var(--primary);box-shadow:0 0 0 3px color-mix(in srgb,var(--primary) 14%,transparent)}
input[type=color]{height:45px;padding:5px;cursor:pointer}.field-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}.color-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.primary-btn,.small-btn,.danger-btn{border:0;border-radius:12px;padding:13px 16px;font-weight:800;cursor:pointer;transition:.2s ease}.primary-btn{background:linear-gradient(135deg,var(--primary),#9b2944);color:#fff;box-shadow:0 8px 20px color-mix(in srgb,var(--primary) 25%,transparent)}.primary-btn:hover,.small-btn:hover{transform:translateY(-1px);filter:brightness(1.05)}.primary-btn:disabled{opacity:.55;cursor:wait}.small-btn{background:#f0e0e5;color:var(--primary);padding:9px 12px;font-size:11px}.danger-btn{background:#fff0f0;color:#a42c37;border:1px solid #f0c9cd}
.stack-form small,.upload-card small,.panel-toolbar small { color:#918286;font-size:10px;font-weight:500;line-height:1.5; }.stack-form code{background:#efe8e5;padding:2px 5px;border-radius:5px;color:var(--primary)}
.tabbar { display:flex;padding:11px 18px 0;border-bottom:1px solid #e9dfdb;background:#fff;gap:4px; }.tab-btn{border:0;background:transparent;padding:12px 14px;color:#87777a;font-size:11px;font-weight:800;cursor:pointer;border-bottom:2px solid transparent}.tab-btn.active{color:var(--primary);border-color:var(--primary)}.tab-panel{display:none}.tab-panel.active{display:block}
.upload-card { border:1px dashed #d7c5c0;border-radius:14px;padding:13px;display:flex;gap:13px;align-items:center;justify-content:space-between;background:#fff; }.upload-card div{display:flex;flex-direction:column;gap:4px}.upload-card input[type=file]{max-width:165px;font-size:10px;padding:8px}.upload-card strong{font-size:12px}
.cover-upload-preview{display:grid;grid-template-columns:82px 1fr;gap:13px;align-items:center;border:1px solid #e2d6d2;border-radius:14px;padding:10px;background:#fff}.cover-upload-preview img{width:82px;height:105px;display:block;object-fit:contain;object-position:center;background:#3d0715;border-radius:8px;border:1px solid #d6b477}.cover-upload-preview>div{display:flex;flex-direction:column;align-items:flex-start;gap:5px}.cover-upload-preview strong{font-size:12px}.cover-upload-preview small{font-size:10px;line-height:1.45;color:#918286}.cover-upload-preview.no-image img{opacity:.22}.text-btn{border:0;background:transparent;color:var(--primary);padding:2px 0;font-size:10px;font-weight:800;cursor:pointer}.text-btn:hover{text-decoration:underline}select{border:1px solid #ddd0cc;border-radius:12px;background:#fff;padding:12px 13px;color:#2d2426;outline:none;transition:.2s ease;appearance:auto}.cover-layout-fields{align-items:end}
.panel-toolbar{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:14px}.panel-toolbar>div{display:flex;flex-direction:column;gap:3px}.page-editor-list{display:flex;flex-direction:column;gap:12px}.page-card{border:1px solid #e2d7d3;border-radius:15px;background:#fff;overflow:hidden}.page-card-head{display:flex;align-items:center;gap:9px;padding:12px 13px;cursor:pointer}.page-index{width:28px;height:28px;border-radius:9px;background:#f1e2e7;color:var(--primary);display:grid;place-items:center;font-size:11px;font-weight:900}.page-card-title{min-width:0;flex:1}.page-card-title strong{display:block;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.page-card-title small{display:block;margin-top:2px;color:#9a898c;font-size:9px}.chevron{color:#a18e92;transition:.2s}.page-card.open .chevron{transform:rotate(180deg)}.page-card-body{display:none;padding:0 13px 14px;border-top:1px solid #eee5e2}.page-card.open .page-card-body{display:block}.page-card-body .stack-form{padding-top:14px}.page-actions{display:grid;grid-template-columns:1fr 1fr;gap:7px}.page-actions button{padding:9px;border-radius:10px;border:1px solid #e3d6d2;background:#faf6f4;color:#67565a;font-size:10px;font-weight:800;cursor:pointer}.page-actions .delete{color:#a42c37;background:#fff4f4;border-color:#efd0d3}.page-actions .add-after{color:var(--primary);background:#f7ecef;border-color:#dec6ce}.page-preview{height:70px;border-radius:10px;background:#f4ece9 center/cover;margin-bottom:2px;display:none}.page-preview.has-image{display:block}.danger-zone{margin-top:28px;border:1px solid #efd3d5;background:#fff8f8;border-radius:15px;padding:16px}.danger-zone strong{font-size:13px}.danger-zone p{font-size:11px;color:#8a7477;margin:5px 0 13px}
.toast-stack{position:fixed;z-index:200;right:22px;bottom:22px;display:flex;flex-direction:column;gap:9px}.toast{min-width:260px;max-width:380px;background:#fff;color:#35282b;border-radius:13px;padding:13px 15px;box-shadow:0 15px 40px rgba(0,0,0,.24);font-size:12px;font-weight:700;border-left:4px solid #3c9a69;animation:toastIn .25s ease}.toast.error{border-left-color:#c7434c}.toast.out{opacity:0;transform:translateY(8px);transition:.25s}.toast small{display:block;color:#8c7b7f;font-weight:500;margin-top:3px}@keyframes toastIn{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}}

@media (max-width: 1050px) {
    .app-stage { grid-template-columns:1fr; padding-top:105px; }
    .hero-copy { text-align:center;max-width:700px;margin:auto;padding:0 }.hero-copy p{margin:18px auto 0}.hero-copy h1{font-size:clamp(38px,8vw,64px)}
    .book { width:min(850px,88vw); }.book-zone{margin-top:10px}
}
@media (max-width: 700px) {
    .topbar{top:10px;left:10px;right:10px;border-radius:16px}.desktop-label{display:none}.icon-btn{width:40px;padding:0;justify-content:center}.brand small{display:none}.brand-mark{width:34px;height:34px}.brand strong{max-width:120px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
    .app-stage{padding:91px 12px 28px}.hero-copy h1{font-size:39px}.hero-copy p{font-size:13px;margin-top:14px}.eyebrow{font-size:8px}.book-zone{width:100%;margin-top:18px}
    .book{width:min(94vw,470px);aspect-ratio:.76/1;perspective:2200px}.book-cover,.back-cover{inset:0 4%;border-radius:4px 15px 15px 4px}.cover-face{border-radius:4px 15px 15px 4px}.cover-layout{inset:6.5% 8% 13% 13%;gap:8px}.cover-copy h2{font-size:clamp(22px,7vw,31px)}.cover-copy-bottom p{font-size:10px}.cover-recipient{font-size:9px}.cover-layout[data-layout="image_only"]{inset:4.5% 5.5% 11.5% 10%}.cover-border{inset:14px}.cover-spine{left:6%}
    .spread-view{grid-template-columns:1fr}.paper-page{padding:34px 28px}.left-page,.right-page{position:absolute;inset:0 3%;border-radius:5px 13px 13px 5px;box-shadow:var(--shadow);}.left-page{display:none}.book-gutter{display:none}.page-title{font-size:29px}.page-body{font-size:14px}.flip-sheet{width:94%;left:3%!important;right:3%!important}.flip-sheet.active.next{transform-origin:left center}.flip-sheet.active.prev{transform-origin:right center}.flip-face{border-radius:5px 13px 13px 5px}.cover-opening,.cover-closing{transform-origin:left center}@keyframes openNovelCover{0%{transform:translateX(0) rotateY(0deg);opacity:1}35%{transform:translateX(-3%) rotateY(-38deg)}72%{transform:translateX(-8%) rotateY(-124deg)}100%{transform:translateX(-12%) rotateY(-176deg);opacity:.16}}.book-controls{margin-top:20px}.hint{display:none}
    .settings-drawer{width:100%}.drawer-head{padding:18px}.drawer-body{padding:18px}.field-row,.color-grid{grid-template-columns:1fr}.upload-card{align-items:flex-start;flex-direction:column}.upload-card input[type=file]{max-width:100%}.cover-upload-preview{grid-template-columns:72px 1fr}.cover-upload-preview img{width:72px;height:92px}.toast-stack{left:12px;right:12px;bottom:12px}.toast{min-width:0;max-width:none}
}
@media (prefers-reduced-motion: reduce) { *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important} }

/* =========================================================
   V4 — FULL-BLEED PREMIUM COVER
   Foto tetap 100% opacity dan memenuhi seluruh sampul.
   Judul berada pada panel lokal, bukan overlay gelap satu halaman.
   ========================================================= */

/* Bentuk sampul lebih menyerupai novel premium. */
@media (min-width: 701px) {
    .book-cover,
    .back-cover { inset: 0 24.5%; }
}

.cover-layout[data-layout="full_bleed"],
.cover-layout[data-layout="image_only"] {
    inset: 0;
    display: block;
    min-height: 0;
    color: #fffaf4;
}

.cover-layout[data-layout="full_bleed"] .cover-photo-frame,
.cover-layout[data-layout="image_only"] .cover-photo-frame {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    border: 0;
    border-radius: 5px 18px 18px 5px;
    background: var(--primary-dark);
    box-shadow: none;
    overflow: hidden;
}

.cover-layout[data-layout="full_bleed"] .cover-photo-frame::before,
.cover-layout[data-layout="image_only"] .cover-photo-frame::before {
    display: none;
}

.cover-layout[data-layout="full_bleed"] .cover-photo,
.cover-layout[data-layout="image_only"] .cover-photo {
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 1 !important;
    filter: none !important;
    mix-blend-mode: normal !important;
    background: var(--primary-dark);
}

/* Panel judul hanya menutup area kecil dan tidak menggelapkan foto keseluruhan. */
.cover-layout[data-layout="full_bleed"] .cover-copy {
    display: block;
    position: absolute;
    z-index: 5;
    left: 11.5%;
    right: 5.5%;
    text-align: center;
    color: #fffaf4;
    border: 1px solid rgba(231, 202, 142, .54);
    background: rgba(57, 5, 19, .88);
    box-shadow: 0 10px 24px rgba(0, 0, 0, .24), inset 0 0 0 1px rgba(255, 255, 255, .055);
}

.cover-layout[data-layout="full_bleed"] .cover-copy-top {
    top: 4.5%;
    padding: 13px 16px 12px;
    border-radius: 3px 11px 11px 3px;
}

.cover-layout[data-layout="full_bleed"] .cover-copy-bottom {
    bottom: 12.5%;
    padding: 10px 14px 11px;
    border-radius: 3px 10px 10px 3px;
}

.cover-layout[data-layout="full_bleed"] .cover-kicker {
    color: rgba(255, 244, 230, .82);
    font-size: 7px;
    letter-spacing: .31em;
}

.cover-layout[data-layout="full_bleed"] .cover-copy h2 {
    margin-top: 5px;
    max-width: none;
    color: #fffdf8;
    font-size: clamp(23px, 2.3vw, 34px);
    line-height: .98;
    text-shadow: 0 2px 8px rgba(0, 0, 0, .42);
}

.cover-layout[data-layout="full_bleed"] .cover-flourish {
    margin-top: 4px;
    color: var(--secondary);
}

.cover-layout[data-layout="full_bleed"] .cover-copy-bottom p {
    margin-bottom: 6px;
    max-width: none;
    color: rgba(255, 250, 241, .91);
    font-size: 10px;
    line-height: 1.42;
    -webkit-line-clamp: 2;
}

.cover-layout[data-layout="full_bleed"] .cover-recipient {
    width: 88%;
    color: #fffaf1;
    border-color: rgba(231, 202, 142, .48);
    font-size: 9px;
}

/* Mode gambar saja tetap benar-benar memenuhi sampul. */
.cover-layout[data-layout="image_only"] .cover-copy {
    display: none;
}

/* Mode lama dengan bingkai tetap tersedia. */
.cover-layout[data-layout="framed"] {
    inset: 7.5% 8.5% 13.5% 14%;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    gap: 10px;
}

@media (max-width: 700px) {
    .book {
        width: min(94vw, 470px);
        aspect-ratio: .72 / 1;
    }

    .book-cover,
    .back-cover {
        inset: 0 3.5%;
    }

    .cover-layout[data-layout="full_bleed"] .cover-photo-frame,
    .cover-layout[data-layout="image_only"] .cover-photo-frame {
        border-radius: 4px 15px 15px 4px;
    }

    .cover-layout[data-layout="full_bleed"] .cover-copy {
        left: 10.5%;
        right: 4.5%;
    }

    .cover-layout[data-layout="full_bleed"] .cover-copy-top {
        top: 3.8%;
        padding: 11px 12px 10px;
    }

    .cover-layout[data-layout="full_bleed"] .cover-copy-bottom {
        bottom: 11.5%;
        padding: 9px 11px 10px;
    }

    .cover-layout[data-layout="full_bleed"] .cover-copy h2 {
        font-size: clamp(25px, 7.1vw, 34px);
    }

    .cover-layout[data-layout="full_bleed"] .cover-copy-bottom p {
        font-size: 9px;
    }

    .cover-layout[data-layout="full_bleed"] .cover-recipient {
        font-size: 8px;
    }
}


/* =========================================================
   V5 — CENTERED NOVEL ONLY LAYOUT
   - Desktop dan mobile hanya menampilkan novel di tengah
   - Sampul memakai gambar cover penuh tanpa overlay dari aplikasi
   ========================================================= */
.hero-copy {
    display: none !important;
}

.app-stage {
    display: flex;
    justify-content: center;
    align-items: center;
    max-width: none;
    gap: 0;
    padding: 112px 24px 40px;
}

.book-zone {
    width: 100%;
    max-width: 1180px;
    margin: 0 auto;
}

.book {
    width: min(980px, 78vw);
}

#coverView {
    cursor: pointer;
}

#coverView.is-image-only .cover-front-surface {
    background: transparent;
    box-shadow: none;
}

#coverView.is-image-only .cover-texture,
#coverView.is-image-only .cover-border,
#coverView.is-image-only .cover-spine,
#coverView.is-image-only .cover-copy,
#coverView.is-image-only .cover-photo-placeholder,
#coverView .open-book-btn {
    display: none !important;
}

#coverView.is-image-only .cover-layout {
    inset: 0;
    display: block;
}

#coverView.is-image-only .cover-photo-frame {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    border-radius: 5px 18px 18px 5px;
    background: transparent;
    box-shadow: none;
    overflow: hidden;
}

#coverView.is-image-only .cover-photo-frame::before {
    display: none;
}

#coverView.is-image-only .cover-photo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    background: transparent;
}

.book-controls {
    margin-top: 22px;
}

.hint {
    text-align: center;
}

@media (max-width: 1050px) {
    .app-stage {
        display: flex;
        padding: 102px 18px 34px;
    }
    .book {
        width: min(900px, 92vw);
    }
}

@media (max-width: 700px) {
    .app-stage {
        display: flex;
        padding: 86px 10px 24px;
    }

    .book-zone {
        margin-top: 0;
    }

    .book {
        width: min(96vw, 470px);
        aspect-ratio: .72 / 1;
    }

    #coverView.is-image-only .cover-photo-frame {
        border-radius: 4px 15px 15px 4px;
    }

    .book-controls {
        margin-top: 18px;
    }
}


/* V6 — STORY PHOTO UPLOAD */
.page-photo-upload small { max-width: 290px; line-height: 1.55; }
.clear-page-photo { align-self: flex-start; margin-top: -9px; }
@media (max-width: 700px) {
    .page-photo-upload small { max-width: none; }
}


/* =========================================================
   V7 — FULL COVER + NO INTERNAL PAGE SCROLL
   ========================================================= */

/* Sampul harus terlihat utuh pada desktop/tablet. Rasio area cover dibuat tepat 2:3. */
@media (min-width: 701px) {
    #coverView {
        inset: 0 27.5% !important;
    }
}

/* Pada telepon, 3.5% inset dengan rasio buku .72 menghasilkan area cover mendekati 2:3. */
@media (max-width: 700px) {
    #coverView {
        inset: 0 3.5% !important;
    }
}

#coverView.is-image-only .cover-photo {
    object-fit: contain !important;
    object-position: center !important;
    width: 100%;
    height: 100%;
}

/* Semua tulisan halaman ditampilkan tanpa scrollbar internal. */
.paper-page {
    padding: var(--fit-padding-y, clamp(30px, 4vw, 58px)) var(--fit-padding-x, clamp(30px, 4vw, 58px));
}

.page-inner {
    min-height: 0;
    overflow: visible;
    padding-bottom: 18px;
}

.page-chapter {
    font-size: var(--fit-chapter-size, 9px);
}

.page-title {
    font-size: var(--fit-title-size, clamp(25px, 2.4vw, 42px));
    margin-top: var(--fit-title-margin-top, 13px);
    margin-bottom: var(--fit-title-margin-bottom, 18px);
}

.page-rule {
    margin-bottom: var(--fit-rule-margin, 18px);
}

.page-body {
    font-size: var(--fit-body-size, clamp(13px, 1.05vw, 16px));
    line-height: var(--fit-body-line, 1.72);
    overflow: visible !important;
    max-height: none !important;
    scrollbar-width: none;
}

.page-body::-webkit-scrollbar {
    display: none;
}

/* Quote tidak lagi didorong jauh ke bawah; diberi jarak yang konsisten dari isi. */
.page-quote {
    margin: var(--fit-quote-gap, 17px) 0 0;
    padding: var(--fit-quote-padding, 15px) 0 0 16px;
    font-size: var(--fit-quote-size, 13px);
    line-height: var(--fit-quote-line, 1.55);
}

.page-image {
    height: var(--fit-image-height, clamp(82px, 18vh, 145px));
    aspect-ratio: auto;
    object-fit: cover;
    margin: 2px 0 var(--fit-image-margin, 17px);
}

/* Pra-penyesuaian untuk halaman panjang agar pemuatan awal tetap rapi. */
.page-density-compact .page-body { font-size: 14px; line-height: 1.58; }
.page-density-dense .page-body { font-size: 13px; line-height: 1.5; }
.page-density-extra-dense .page-body { font-size: 12px; line-height: 1.44; }
.page-density-dense .page-title,
.page-density-extra-dense .page-title { font-size: clamp(21px, 2vw, 34px); }

@media (max-width: 700px) {
    .paper-page {
        padding: var(--fit-padding-y, 27px) var(--fit-padding-x, 22px);
    }

    .page-inner {
        padding-bottom: 15px;
    }

    .page-title {
        font-size: var(--fit-title-size, 26px);
        line-height: 1.03;
    }

    .page-body {
        font-size: var(--fit-body-size, 12.5px);
        line-height: var(--fit-body-line, 1.48);
    }

    .page-quote {
        margin-top: var(--fit-quote-gap, 13px);
        padding-top: var(--fit-quote-padding, 11px);
        font-size: var(--fit-quote-size, 11.5px);
    }

    .page-image {
        height: var(--fit-image-height, 78px);
    }
}