@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&family=Playfair+Display:ital,wght@0,500;0,600;1,500&display=swap');
:root{--ink:#28231f;--muted:#867d76;--paper:#f8f5f0;--line:#e8e1d8;--gold:#b68a51;--dark:#211d1a}*{box-sizing:border-box}body{margin:0;color:var(--ink);font-family:'DM Sans',sans-serif;background:var(--paper)}button,input,textarea{font:inherit}button{cursor:pointer}.eyebrow{font-size:10px;letter-spacing:.2em;color:var(--gold);font-weight:700;margin:0 0 13px}.auth{width:min(420px,calc(100% - 40px));margin:12vh auto}.brand-mark{width:44px;height:44px;border:1px solid var(--gold);border-radius:50%;display:grid;place-items:center;font:600 26px 'Playfair Display';color:var(--gold);margin-bottom:30px}.auth h1,h1,h2{font-family:'Playfair Display';font-weight:500}.auth h1{font-size:37px;margin:0}.auth>p{color:var(--muted);line-height:1.6;margin:12px 0 27px}.auth form{display:grid;gap:16px}.auth label{font-size:13px;display:grid;gap:7px;color:var(--muted)}input,textarea{border:1px solid var(--line);border-radius:5px;background:#fff;padding:12px;color:var(--ink);outline:none}input:focus,textarea:focus{border-color:var(--gold)}button{border:0;border-radius:4px;background:var(--dark);color:#fff;padding:13px 19px;transition:.2s}button:hover{transform:translateY(-1px);background:#403832}em{color:#b54b45;font-size:13px;font-style:normal}.topbar{height:68px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 max(28px,5vw);background:#fcfaf7}.logo{font:500 22px 'Playfair Display'}.logo span{font-size:18px;color:var(--gold);border:1px solid var(--gold);border-radius:50%;padding:1px 6px;margin-right:7px}.quiet{background:transparent;color:var(--muted);padding:8px}.dashboard{display:grid;grid-template-columns:290px 1fr;min-height:calc(100vh - 68px)}aside{border-right:1px solid var(--line);padding:42px 28px}aside h1{margin:0 0 25px;font-size:34px}.new{width:100%;background:var(--gold);margin-bottom:25px}.new:hover{background:#9d7443}.catalog-row{padding:13px 10px;border-bottom:1px solid var(--line);cursor:pointer}.catalog-row:hover,.catalog-row.active{background:#f0ebe4}.catalog-row b{font-size:14px;display:block}.catalog-row small{color:var(--muted);font-size:11px}.workspace{padding:48px min(6vw,90px);max-width:1100px}.empty{text-align:center;margin:15vh auto;color:var(--muted)}.empty div{font-size:34px;color:var(--gold)}.empty h2{color:var(--ink);font-size:30px}.editor-head{display:flex;justify-content:space-between;align-items:start;gap:20px}.editor-head h1{font-size:36px;margin:0 0 5px}.editor-head p{color:var(--muted);margin:0}.outline{background:transparent;color:var(--ink);border:1px solid var(--line)}.tabs{display:flex;gap:22px;border-bottom:1px solid var(--line);margin:35px 0 23px}.tab{color:var(--muted);background:transparent;padding:11px 2px;border-radius:0}.tab.active{color:var(--ink);border-bottom:2px solid var(--gold)}.panel{display:none}.panel.active{display:block}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;max-width:650px}.form-grid label{font-size:12px;color:var(--muted);display:grid;gap:6px}.form-grid .wide{grid-column:span 2}.form-grid textarea{min-height:80px;resize:vertical}.save{margin-top:18px;background:var(--gold)}.share-box{display:grid;grid-template-columns:160px 1fr;gap:30px;align-items:center;background:#fff;padding:22px;border:1px solid var(--line);max-width:600px}.share-box img{width:150px;height:150px}.share-box code{font-size:12px;word-break:break-all;color:var(--muted);display:block;margin:10px 0}.pages{display:grid;grid-template-columns:repeat(auto-fill,minmax(155px,1fr));gap:16px}.page-card{background:white;border:1px solid var(--line);position:relative}.page-card img{width:100%;aspect-ratio:3/4;object-fit:cover;display:block}.page-card p{font-size:12px;margin:9px}.page-card button{font-size:11px;padding:7px 9px;margin:0 0 9px 9px}.danger{background:#9e4e49}.uploader{border:1px dashed #c9b9a7;padding:26px;text-align:center;margin-bottom:22px;background:#fff}.uploader input{max-width:100%;padding:8px}.modal{position:fixed;inset:0;background:#201b18a6;display:grid;place-items:center;padding:18px;z-index:10}.modal-box{background:var(--paper);width:min(460px,100%);padding:25px;border-radius:7px;max-height:90vh;overflow:auto}.modal-box h2{margin-top:0}.modal-box label{font-size:12px;display:grid;gap:5px;color:var(--muted);margin:12px 0}.modal-actions{display:flex;gap:8px;margin-top:18px}.modal-actions .delete{background:#a44c48;margin-right:auto}
/* Vitrine */.showcase{background:#181512;min-height:100vh;color:#fff;overflow:hidden}.viewer{height:100vh;max-width:590px;margin:auto;position:relative;background:#29231e;touch-action:pan-y}.slide{position:absolute;inset:0;opacity:0;transform:translateX(18px);transition:opacity .55s ease,transform .55s ease;pointer-events:none}.slide.active{opacity:1;transform:none;pointer-events:auto}.slide img{width:100%;height:100%;object-fit:cover;display:block}.shade{position:absolute;inset:0;background:linear-gradient(180deg,#0005 0%,transparent 22%,transparent 65%,#0009 100%)}.catalog-title{position:absolute;top:26px;left:25px;right:25px;z-index:2;text-shadow:0 1px 7px #000}.catalog-title p{letter-spacing:.18em;font-size:9px;margin:0 0 5px;color:#ead8bd}.catalog-title h1{font:500 25px 'Playfair Display';margin:0}.counter{position:absolute;bottom:25px;right:25px;font-size:11px;letter-spacing:.12em;z-index:3}.spots{position:absolute;inset:0;z-index:4}.spot{position:absolute;width:34px;height:34px;border:1px solid #fff;border-radius:50%;transform:translate(-50%,-50%);background:#b68a5199;color:#fff;box-shadow:0 0 0 5px #ffffff33;animation:pulse 2.4s infinite;font-size:16px;padding:0}.hint{position:absolute;z-index:20;left:50%;bottom:60px;transform:translateX(-50%);background:#fff;color:#312a25;border-radius:24px;padding:11px 17px;font-size:12px;white-space:nowrap;box-shadow:0 5px 25px #0004;animation:fadeout 7s forwards}.detail{position:fixed;inset:0;background:#171310a1;z-index:30;display:grid;align-items:end}.detail-card{background:#faf7f2;color:var(--ink);padding:25px 26px 35px;border-radius:18px 18px 0 0;animation:up .3s ease}.detail-card small{color:var(--gold);letter-spacing:.16em}.detail-card h2{font-size:29px;margin:8px 0}.detail-card .price{font:500 18px 'Playfair Display';color:#8c6132}.close{float:right;background:transparent;color:var(--ink);font-size:24px;padding:0}@keyframes pulse{50%{box-shadow:0 0 0 10px #ffffff00}}@keyframes fadeout{80%{opacity:1}100%{opacity:0;visibility:hidden}}@keyframes up{from{transform:translateY(100%)}to{transform:none}}@media(max-width:700px){.dashboard{display:block}.dashboard aside{border-right:0;padding:25px 20px}.workspace{padding:28px 20px}.editor-head h1{font-size:31px}.form-grid{display:block}.form-grid label{margin:12px 0}.share-box{grid-template-columns:105px 1fr;gap:16px}.share-box img{width:105px;height:105px}.pages{grid-template-columns:repeat(2,1fr)}}
/* Páginas-imagem: preservar integralmente a arte criada, em qualquer tela. */
.showcase .slide img{object-fit:contain}
.showcase .shade{display:none}
.showcase .slide{transform:translateX(24px);filter:blur(3px)}
.showcase .slide{transition:opacity .65s ease,transform .7s cubic-bezier(.22,.61,.36,1),filter .5s ease}
.showcase .slide.active{transform:none;filter:blur(0)}
.showcase .slide img{transition:transform 1s cubic-bezier(.22,.61,.36,1);transform:scale(1.035)}
.showcase .slide.active img{transform:scale(1)}
.showcase .spot{width:auto;height:auto;min-width:0;min-height:0;border:0;border-radius:0;transform:none;background:transparent;box-shadow:none;animation:none;padding:0}
.area-canvas{position:relative;display:table;max-width:100%;margin:auto;line-height:0;cursor:crosshair;user-select:none}.area-canvas img{width:auto;max-width:100%;height:auto;max-height:58vh;background:#eee;display:block;-webkit-user-drag:none;user-drag:none}.edit-area,.drawing-area{position:absolute;display:block;border:2px solid var(--gold);background:rgba(182,138,81,.16);border-radius:3px;transform:none;padding:0}.edit-area span{position:absolute;left:0;top:-22px;line-height:1;background:var(--gold);color:#fff;font-size:10px;padding:5px;white-space:nowrap;max-width:150px;overflow:hidden;text-overflow:ellipsis}.remove-area{position:absolute;right:-10px;top:-10px;width:21px;height:21px;min-width:0;min-height:0;padding:0;border-radius:50%;background:#b43d3d;color:#fff;font:700 16px/18px Arial;box-shadow:0 2px 5px #0005;z-index:3}.drawing-area{pointer-events:none}
.showcase .hint{background:rgba(37,30,25,.70);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);color:#fff;border:1px solid rgba(255,255,255,.22);border-radius:28px;padding:15px 22px;font-size:15px;animation:fadeout 3.5s forwards}
@keyframes fadeout{72%{opacity:1}100%{opacity:0;visibility:hidden}}
.detail-card .reference{margin:10px 0 7px;color:var(--muted);font-size:14px}.detail-card .description{line-height:1.6;margin:16px 0 0}
.showcase .slide{transform:translateY(42px);filter:blur(3px);transition:opacity .65s ease,transform .72s cubic-bezier(.22,.61,.36,1),filter .5s ease}
.showcase .slide.active{transform:none;filter:blur(0)}
.showcase .slide.leave-up{opacity:0;transform:translateY(-42px);filter:blur(3px)}
.showcase .slide.leave-down{opacity:0;transform:translateY(42px);filter:blur(3px)}
.showcase .slide.from-bottom{opacity:0;transform:translateY(52px)}
.showcase .slide.from-top{opacity:0;transform:translateY(-52px)}
.page-visual{position:absolute;inset:0;transform-origin:center center;will-change:transform}
.showcase .viewer{overflow:hidden}
.page-visual.zoomed{cursor:zoom-out}
.showcase .details-hint{bottom:118px}
.detail{opacity:0;transition:opacity .26s ease}.detail.open{opacity:1}
.detail-card{transform:translateY(34px);transition:transform .38s cubic-bezier(.22,.61,.36,1)}.detail.open .detail-card{transform:none}
.detail-image{height:210px;margin:-25px -26px 20px;border-radius:18px 18px 0 0;background-repeat:no-repeat;background-color:#e5ded6;animation:detailZoom .58s cubic-bezier(.22,.61,.36,1) both}
@keyframes detailZoom{from{opacity:0;transform:scale(1.09)}to{opacity:1;transform:scale(1)}}
.detail-focus{position:absolute;z-index:1;left:50%;top:38%;border-radius:10px;background-repeat:no-repeat;background-color:#e5ded6;box-shadow:0 18px 45px #0008;opacity:0;transform:translate(calc(-50% + var(--from-x)),calc(-50% + var(--from-y))) scale(.14);transition:opacity .18s ease,transform .58s cubic-bezier(.22,.61,.36,1);will-change:transform}
.detail-focus canvas{display:block;width:100%;height:100%;border-radius:inherit}
.detail.open .detail-focus{opacity:1;transform:translate(-50%,-50%) scale(1)}
.detail .detail-card{position:relative;z-index:2;width:100%;min-height:125px}