:root{
    --cover:#2b3a2f;
    --cover-dark:#1c2620;
    --gold:#a8843c;
    --gold-light:#cdae72;
    --paper:#efe4c9;
    --paper-shadow:#ddcda3;
    --ink:#3a2e22;
    --ink-soft:#6b5a45;
    --wine:#7a3131;
    --bg-1:#10140f;
    --bg-2:#232f22;
    --title-font:'Fraunces', serif;
  }
  *{box-sizing:border-box;}
  html,body{margin:0;padding:0;height:100%;}
  body{
    min-height:100vh;
    background:
      radial-gradient(ellipse 90% 70% at 50% 0%, var(--bg-2) 0%, var(--bg-1) 65%);
    font-family:'EB Garamond', serif;
    color:#eee3cf;
    overflow-x:hidden;
    display:flex;
    flex-direction:column;
    align-items:center;
  }
  .topbar{
    width:100%;
    padding:calc(22px + env(safe-area-inset-top, 0px)) calc(24px + env(safe-area-inset-right, 0px)) 10px calc(24px + env(safe-area-inset-left, 0px));
    position:relative;
    z-index:200;
  }
  .topbar-inner{
    max-width:1040px; margin:0 auto;
    display:flex; align-items:center; justify-content:flex-start;
    gap:16px; flex-wrap:wrap;
  }
  .sidebar-toggle{
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    gap:4px;
    width:42px; height:38px;
    background:rgba(238,227,207,.08);
    border:1px solid rgba(205,174,114,.4);
    border-radius:8px;
    cursor:pointer;
    transition:background .15s, transform .15s;
    flex:0 0 auto;
  }
  .sidebar-toggle:hover{background:rgba(205,174,114,.18);}
  .sidebar-toggle .bar{
    width:18px; height:2px; background:var(--gold-light); border-radius:2px; display:block;
  }
  .brand{
    font-family:'Fraunces', serif;
    font-weight:600;
    font-size:clamp(20px,3vw,30px);
    letter-spacing:.02em;
    color:var(--gold-light);
    margin:0;
  }
  .brand .icon{opacity:.9;}
  #albumTitleDisplay{border-bottom:1px dashed transparent;}

  .save-indicator{
    font-family:'Inter', sans-serif;
    font-size:12.5px;
    letter-spacing:.02em;
    color:#cdbb95;
    opacity:.85;
    min-height:16px;
    transition:opacity .3s;
  }
  .save-indicator:empty{opacity:0;}
  .save-indicator.saving{color:#cdbb95;}
  .save-indicator.saved{color:#a8c9a1;}
  .save-indicator.error{color:#e2a1a1; opacity:1;}

  .viewer-banner{
    max-width:1040px; margin:8px auto 0;
    background:rgba(205,174,114,.14);
    border:1px solid rgba(205,174,114,.4);
    border-radius:8px;
    padding:8px 14px;
    font-family:'Inter', sans-serif;
    font-size:12.5px;
    color:#f0e6c8;
    display:flex;
    align-items:center;
    gap:8px;
  }

  .role-badge{
    display:inline-block;
    font-family:'Inter', sans-serif;
    font-size:11.5px;
    letter-spacing:.03em;
    padding:4px 10px;
    border-radius:999px;
    background:rgba(168,132,60,.18);
    border:1px solid rgba(205,174,114,.4);
    color:#e8d9b4;
  }

  /* Modo somente-visualização: desabilita visualmente os controles de
     personalização (cores, fontes, templates, texturas) — a gravação já é
     bloqueada em duas outras camadas (JS e RLS no banco), isso aqui é só
     pra deixar claro pro convidado, antes mesmo de ele tentar clicar. */
  .viewer-mode #panelOverlay input,
  .viewer-mode #panelOverlay select,
  .viewer-mode #panelOverlay button:not(.panel-close){
    pointer-events:none;
    opacity:.5;
  }
  .viewer-mode #iconInput{ cursor:default; }
  .viewer-mode #ribbonTab,
  .viewer-mode #layoutModeBtn{
    opacity:.45;
    pointer-events:none;
  }

  .trash-row{
    display:flex; align-items:center; gap:10px;
    padding:10px 4px;
    border-bottom:1px solid rgba(58,46,34,.1);
  }
  .trash-row-info{flex:1; min-width:0;}
  .trash-row-label{display:block; font-size:15px; color:var(--ink-soft, #3a2e22);}
  .trash-row-meta{display:block; font-size:12px; opacity:.65; margin-top:2px;}
  .trash-row-actions{display:flex; gap:8px; flex:0 0 auto;}
  .trash-row-actions button{
    font-family:'Inter', sans-serif; font-size:12.5px;
    padding:6px 10px; border-radius:7px; cursor:pointer;
    border:1px solid rgba(205,174,114,.4); background:transparent;
  }
  .trash-row-actions .restore-btn{color:#4f7a45;}
  .trash-row-actions .purge-btn{color:var(--wine);}
  #trashList .toc-empty{ padding:16px 4px; opacity:.7; }

  /* ---- reordenar páginas ---- */
  .reorder-row{
    display:flex; align-items:center; gap:10px;
    padding:9px 4px;
    border-bottom:1px solid rgba(58,46,34,.1);
  }
  .reorder-row-num{
    flex:0 0 auto; width:22px; text-align:center;
    font-family:'Inter', sans-serif; font-size:12px; opacity:.6;
  }
  .reorder-row-label{
    flex:1; min-width:0; font-size:14.5px; color:var(--ink-soft, #3a2e22);
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  }
  .reorder-row-actions{display:flex; gap:6px; flex:0 0 auto;}
  .reorder-row-actions .icon-btn:disabled{ opacity:.25; cursor:default; }

  /* ---- prévia do Premium ---- */
  .preview-banner{
    background:rgba(120,168,214,.14) !important;
    border-color:rgba(120,168,214,.4) !important;
    align-items:center; flex-wrap:wrap; gap:10px;
  }
  .preview-banner span{ flex:1 1 auto; }
  .btn-tiny{ padding:5px 12px; font-size:11.5px; flex:0 0 auto; }
  .plan-badge.preview{
    background:rgba(120,168,214,.22);
    border-color:rgba(120,168,214,.5);
    color:#dcebf9;
  }

  /* ---- tour inicial ---- */
  .tour-emoji{ font-size:42px; margin-bottom:4px; }
  .tour-dots{ display:flex; justify-content:center; gap:6px; margin:14px 0 6px; }
  .tour-dot{
    width:7px; height:7px; border-radius:50%;
    background:rgba(205,174,114,.3);
  }
  .tour-dot.active{ background:var(--wine, #7a2e2e); }
  #tourText b{ color:inherit; }

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

  /* Foco visível para os controles convertidos de <div> pra <button>/role="button" */
  .template-card:focus-visible,
  .swatch:focus-visible,
  .album-switch-item:focus-visible,
  .toc-row:focus-visible,
  .icon-preset-btn:focus-visible{
    outline:2px solid var(--gold-light);
    outline-offset:2px;
  }

  #appContent{
    width:100%;
    flex:1 1 auto;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    min-height:0;
  }

  .stage-wrap{
    width:100%;
    display:flex;
    justify-content:center;
    padding:10px 10px 0;
    min-height:0;
  }
  .stage{
    transform-origin:top center;
  }
  .perspective{
    perspective:2400px;
    -webkit-perspective:2400px;
    width:960px;
    height:620px;
    position:relative;
  }
  .ground-shadow{
    position:absolute;
    left:50%; bottom:-26px;
    width:640px; height:60px;
    transform:translateX(-50%);
    background:radial-gradient(ellipse at center, rgba(0,0,0,.55) 0%, rgba(0,0,0,0) 70%);
    filter:blur(2px);
    pointer-events:none;
  }
  .book{
    position:relative;
    width:100%;
    height:100%;
  }
  .spine-shadow{
    position:absolute;
    left:465px; top:6px; width:30px; height:calc(100% - 12px);
    background:linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.35) 50%, rgba(0,0,0,0) 100%);
    z-index:6;
    pointer-events:none;
    border-radius:2px;
  }
  .slot{
    position:absolute;
    top:0; width:460px; height:100%;
    z-index:2;
  }
  .slot-left{left:20px;}
  .slot-right{left:480px;}

  .page-face{
    width:100%; height:100%;
    border-radius:3px;
    box-shadow: 0 18px 40px rgba(0,0,0,.45), inset 0 0 0 1px rgba(0,0,0,.06);
    padding:26px 26px 20px;
    position:relative;
    overflow:hidden;
    display:flex;
    flex-direction:column;
    color:var(--ink);
  }
  .slot-left .page-face{box-shadow:inset -14px 0 22px -18px rgba(0,0,0,.5), 0 18px 40px rgba(0,0,0,.45);}
  .slot-right .page-face{box-shadow:inset 14px 0 22px -18px rgba(0,0,0,.5), 0 18px 40px rgba(0,0,0,.45);}

  /* --- Leaf flipping element ---
     Lives directly under .perspective (a sibling of .book), not inside .book.
     .book's slots are flat 2D content; if the rotating leaf shared a
     transform-style:preserve-3d context with them, browsers sort by real 3D
     depth instead of z-index, and the turning page renders behind the
     already-updated destination page for almost the whole animation. Keeping
     it in its own layer guarantees it always paints on top while it turns. */
  .leaf{
    position:absolute; top:0; width:460px; height:100%;
    transform-style:preserve-3d;
    -webkit-transform-style:preserve-3d;
    z-index:100;
    will-change:transform;
    transition:transform .7s cubic-bezier(.37,.13,.2,1);
  }
  .leaf-right{left:480px; transform-origin:left center; transform:rotateY(0deg);}
  .leaf-right.flip{transform:rotateY(-179.9deg);}
  .leaf-left{left:20px; transform-origin:right center; transform:rotateY(0deg);}
  .leaf-left.unflip{transform:rotateY(-179.9deg);}
  .leaf-face{
    position:absolute; inset:0;
    backface-visibility:hidden;
    -webkit-backface-visibility:hidden;
  }
  .leaf-face-back{transform:rotateY(180deg);}

  /* --- Cover styling --- */
  .cover-face{
    width:100%; height:100%;
    border-radius:4px;
    box-shadow:0 22px 46px rgba(0,0,0,.55), inset 0 0 0 2px rgba(168,132,60,.35), inset 0 0 40px rgba(0,0,0,.4);
    position:relative;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    color:var(--gold-light);
    text-align:center;
    padding:30px;
    cursor:pointer;
  }
  .cover-face::before{
    content:'';
    position:absolute; inset:14px;
    border:1px solid rgba(205,174,114,.45);
    border-radius:2px;
    pointer-events:none;
  }
  .cover-emblem{
    font-size:52px;
    margin-bottom:18px;
    filter:drop-shadow(0 2px 3px rgba(0,0,0,.5));
  }
  .cover-title{
    font-family:var(--title-font);
    font-weight:700;
    font-size:clamp(26px,3.4vw,36px);
    line-height:1.25;
    letter-spacing:.01em;
    outline:none;
    max-width:320px;
    text-shadow:0 2px 6px rgba(0,0,0,.4);
  }
  .cover-sub{
    margin-top:14px;
    font-family:'Caveat', cursive;
    font-size:20px;
    color:#d8c9a3;
    opacity:.85;
  }
  .cover-hint{
    position:absolute; bottom:22px;
    font-size:13px;
    letter-spacing:.08em;
    text-transform:uppercase;
    color:#cdae72;
    opacity:.65;
    font-family:'Inter',sans-serif;
  }
  .ribbon-mark{
    position:absolute; top:0; right:56px;
    width:20px; height:70px;
    background:linear-gradient(180deg, var(--wine), #5a2222);
    clip-path:polygon(0 0,100% 0,100% 100%,50% 78%,0 100%);
    box-shadow:0 4px 8px rgba(0,0,0,.4);
  }

  .back-cover-face{
    width:100%;height:100%;border-radius:4px;
    box-shadow:0 22px 46px rgba(0,0,0,.55), inset 0 0 0 2px rgba(168,132,60,.3);
    display:flex; align-items:center; justify-content:center;
    color:var(--gold-light);
    font-family:'Fraunces',serif;
    font-size:20px;
  }

  .inside-cover{
    display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; height:100%;
  }
  .inside-cover h2{
    font-family:var(--title-font); font-weight:600; font-size:26px; margin:0 0 8px; color:var(--ink);
  }
  .inside-cover p{font-family:'Caveat',cursive; font-size:20px; color:var(--ink-soft); margin:0;}
  .inside-cover .fleur{font-size:26px;margin-top:16px;opacity:.6;}

  /* --- User page content --- */
  .page-header{
    display:flex; justify-content:space-between; align-items:flex-start;
    font-family:'Inter',sans-serif; font-size:12px; color:var(--ink-soft); letter-spacing:.04em;
    margin-bottom:8px;
  }
  .page-actions{display:flex; gap:6px;}
  .icon-btn{
    background:rgba(0,0,0,.06); border:none; border-radius:50%;
    width:26px;height:26px; cursor:pointer; font-size:13px;
    display:flex;align-items:center;justify-content:center;
    color:var(--ink-soft);
    transition:background .15s;
    position:relative;
  }
  .icon-btn::after{
    content:''; position:absolute; inset:-6px;
  }
  .icon-btn:hover{background:rgba(0,0,0,.14); color:var(--wine);}

  /* Free-form content zone: photos and caption are absolutely positioned
     (in % of this box) so they can be dragged around in layout-edit mode. */
  .page-content-zone{
    position:relative;
    flex:1;
    min-height:0;
  }
  .photo-frame{
    position:absolute;
    background:#fff; padding:6px 6px 18px;
    box-shadow:0 6px 14px rgba(0,0,0,.28);
    box-sizing:border-box;
  }
  .photo-frame img{width:100%; height:100%; object-fit:cover; display:block;}
  .photo-frame::before{
    content:'';
    position:absolute; top:-8px; left:50%; transform:translateX(-50%) rotate(-2deg);
    width:46px; height:16px;
    background:rgba(232,220,190,.85);
    box-shadow:0 1px 2px rgba(0,0,0,.15);
    pointer-events:none;
  }
  .page-caption{
    position:absolute;
    font-family:'Caveat', cursive;
    font-size:22px; line-height:1.35; color:var(--ink);
    overflow-y:auto;
    white-space:pre-wrap;
    box-sizing:border-box;
    padding:2px 4px;
  }

  /* --- Layout-edit mode: draggable affordances --- */
  .page-face.editing .photo-frame,
  .page-face.editing .page-caption{
    cursor:grab;
    touch-action:none;
    user-select:none;
    outline:2px dashed rgba(122,49,49,.55);
    outline-offset:2px;
  }
  .page-face.editing .photo-frame:hover,
  .page-face.editing .page-caption:hover{
    outline-color:rgba(122,49,49,.85);
  }
  .page-face.editing .photo-frame.dragging,
  .page-face.editing .page-caption.dragging,
  .page-face.editing .photo-frame.resizing,
  .page-face.editing .page-caption.resizing{
    cursor:grabbing;
    z-index:60;
    outline-color:var(--wine);
    box-shadow:0 14px 26px rgba(0,0,0,.4);
  }
  .page-face.editing .photo-frame img{ pointer-events:none; }
  .page-face.editing .text-block{
    cursor:default;
    user-select:text;
  }
  .text-block-content{
    width:100%; height:100%;
    outline:none;
    overflow-y:auto;
  }
  .resize-handle{
    position:absolute; right:-7px; bottom:-7px;
    width:16px; height:16px;
    background:var(--wine);
    border:2px solid #f6e9df;
    border-radius:50%;
    cursor:nwse-resize;
    touch-action:none;
    z-index:70;
    box-shadow:0 2px 4px rgba(0,0,0,.4);
  }
  .resize-handle::after{
    content:''; position:absolute; inset:-9px;
  }
  .resize-handle:hover{transform:scale(1.15);}
  .text-drag-handle{
    position:absolute; top:-11px; left:-11px;
    width:22px; height:22px;
    display:flex; align-items:center; justify-content:center;
    background:var(--wine); color:#f6e9df;
    border:2px solid #f6e9df; border-radius:50%;
    font-size:11px; cursor:grab;
    touch-action:none;
    z-index:70;
    box-shadow:0 2px 4px rgba(0,0,0,.4);
  }
  .text-drag-handle::after{
    content:''; position:absolute; inset:-8px;
  }
  .text-drag-handle:active{cursor:grabbing;}
  .text-remove{
    position:absolute; top:-11px; right:-11px;
    width:20px; height:20px;
    display:flex; align-items:center; justify-content:center;
    background:#7a3131; color:#f6e9df;
    border:2px solid #f6e9df; border-radius:50%;
    font-size:12px; line-height:1; cursor:pointer; padding:0;
    z-index:70;
  }
  .text-remove::after{
    content:''; position:absolute; inset:-8px;
  }

  .page-footer-meta{
    display:flex; justify-content:space-between; align-items:baseline; gap:8px;
    margin-top:auto; padding-top:8px;
  }
  .page-date{
    font-family:'Inter',sans-serif; font-size:11px; color:var(--ink-soft);
    text-align:right; letter-spacing:.04em;
  }
  .page-author{
    font-family:'Inter',sans-serif; font-size:11px; color:var(--ink-soft);
    opacity:.65; font-style:italic; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  }
  .empty-page{
    height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center;
    text-align:center; gap:14px; color:var(--ink-soft);
    border:2px dashed rgba(58,46,34,.25); border-radius:4px; margin:-6px;
    padding:20px;
  }
  .empty-page .plus{font-size:34px; color:var(--wine);}
  .empty-page button{
    font-family:'Inter',sans-serif; font-weight:600; font-size:13px;
    background:var(--wine); color:#f4e9d8; border:none; border-radius:20px;
    padding:9px 20px; cursor:pointer; letter-spacing:.02em;
  }
  .blank-back{
    height:100%; display:flex; align-items:flex-end; justify-content:center;
    font-family:'Inter',sans-serif; font-size:11px; color:rgba(58,46,34,.35);
    padding-bottom:10px;
  }
  .blank-back .fleur{font-size:22px; opacity:.4; padding-bottom:2px;}

  /* --- Table of contents (in-book page) --- */
  .toc-page{ height:100%; display:flex; flex-direction:column; overflow:hidden; }
  .toc-title{
    font-family:var(--title-font); font-weight:600; font-size:22px; margin:0 0 14px;
    color:var(--ink); text-align:center; flex:0 0 auto;
  }
  .toc-rows{ display:flex; flex-direction:column; gap:2px; overflow:auto; flex:1 1 auto; }
  .toc-empty{ font-size:13px; color:var(--ink-soft); text-align:center; margin-top:20px; }
  .toc-row{
    display:flex; align-items:center; gap:10px;
    padding:8px 4px; border-radius:6px; cursor:pointer;
    border-bottom:1px dashed rgba(58,46,34,.18);
  }
  .toc-row:hover{ background:rgba(58,46,34,.06); }
  .toc-row-num{
    font-family:'Inter',sans-serif; font-size:12px; color:var(--ink-soft);
    min-width:20px; text-align:right; flex:0 0 auto;
  }
  .toc-row-label{
    flex:1 1 auto; font-family:'EB Garamond', serif; font-size:15px; color:var(--ink);
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  }
  .toc-row-edit{
    flex:0 0 auto; background:none; border:none; cursor:pointer;
    color:var(--ink-soft); font-size:13px; opacity:.6; padding:4px;
  }
  .toc-row-edit:hover{ opacity:1; color:var(--wine); }
  .toc-row-input{
    flex:1 1 auto; font-family:'EB Garamond', serif; font-size:15px; color:var(--ink);
    background:rgba(255,255,255,.5); border:1px solid rgba(58,46,34,.3); border-radius:4px;
    padding:3px 6px; min-width:0;
  }
  .toc-upgrade-note{
    margin-top:12px; flex:0 0 auto; text-align:left; background:none; border:none;
    font-family:'Inter',sans-serif; font-size:12px; color:var(--wine); cursor:pointer;
    line-height:1.5; padding:8px 4px 0;
  }
  .toc-upgrade-note u{ color:var(--wine); }
  .toc-toggle-row{
    display:flex; align-items:center; gap:10px; cursor:pointer;
    margin:16px 0 4px; padding:10px 12px; border-radius:8px;
    background:rgba(238,227,207,.06); border:1px solid rgba(205,174,114,.2);
    font-family:'Inter',sans-serif; font-size:13px; color:#e7dabf;
  }
  .toc-toggle-row input{ width:16px; height:16px; accent-color:var(--gold); flex:0 0 auto; }
  #tocList .toc-row-label{ font-size:15px; }
  #tocList .toc-row{ border-bottom-color:rgba(238,227,207,.14); }
  #tocList .toc-row:hover{ background:rgba(238,227,207,.08); }
  #tocList .toc-row-num{ color:#cdbb95; }
  #tocList .toc-row-label{ color:#f4e9d8; }
  #tocList .toc-row-input{ background:rgba(0,0,0,.25); border-color:rgba(205,174,114,.4); color:#f4e9d8; }

  /* --- Nav controls --- */
  .controls{
    display:flex; align-items:center; gap:22px;
    margin:22px 0 40px;
    font-family:'Inter',sans-serif;
  }
  .nav-btn{
    width:44px;height:44px;border-radius:50%;
    background:rgba(238,227,207,.08); color:var(--gold-light);
    border:1px solid rgba(205,174,114,.4);
    font-size:20px; cursor:pointer;
    display:flex;align-items:center;justify-content:center;
    transition:background .15s;
  }
  .nav-btn:hover{background:rgba(205,174,114,.18);}
  .nav-btn:disabled{opacity:.3; cursor:default;}
  .page-indicator{font-size:14px; color:#cdbb95; min-width:130px; text-align:center;}

  /* --- Modal --- */
  .modal-overlay{
    position:fixed; inset:0; background:rgba(10,12,8,.72);
    display:none; align-items:center; justify-content:center; z-index:500;
    padding:20px;
  }
  .modal-overlay.open{display:flex;}
  .modal{
    background:var(--paper); color:var(--ink); border-radius:8px;
    width:100%; max-width:440px; max-height:88vh; overflow-y:auto;
    padding:26px; position:relative;
    box-shadow:0 30px 60px rgba(0,0,0,.5);
    font-family:'Inter',sans-serif;
  }
  .modal h2{font-family:'Fraunces',serif; margin:0 0 16px; font-size:22px;}
  .modal-close{
    position:absolute; top:14px; right:14px; background:none; border:none;
    font-size:22px; cursor:pointer; color:var(--ink-soft);
  }
  .field-label{display:block; font-size:12px; font-weight:600; letter-spacing:.04em; margin:14px 0 6px; color:var(--ink-soft);}
  .modal input[type=file], .modal input[type=date], .modal textarea{
    width:100%; font-family:'Inter',sans-serif; font-size:14px;
    border:1px solid rgba(58,46,34,.25); border-radius:6px; padding:9px 10px;
    background:#fbf6ea; color:var(--ink); resize:vertical;
  }
  .thumbs{display:flex; flex-wrap:wrap; gap:8px; margin-top:8px;}
  .thumb{position:relative; width:64px; height:64px;}
  .thumb img{width:100%;height:100%;object-fit:cover;border-radius:4px;}
  .thumb .rm{
    position:absolute; top:-6px; right:-6px; width:18px; height:18px; border-radius:50%;
    background:var(--wine); color:#fff; border:none; font-size:11px; cursor:pointer; line-height:1;
  }
  .modal-actions{display:flex; align-items:center; gap:8px; margin-top:20px;}
  .spacer{flex:1;}
  .btn{border:none; border-radius:20px; padding:10px 18px; font-family:'Inter',sans-serif; font-weight:600; font-size:13px; cursor:pointer;}
  .btn-primary{background:var(--wine); color:#f4e9d8;}
  .btn-ghost{background:transparent; color:var(--ink-soft);}
  .btn-danger{background:transparent; color:var(--wine); text-decoration:underline;}

  @media (max-width:600px){
    .stage-wrap{min-height:auto;}
  }

  /* ===== Cover textures ===== */
  .cover-face, .back-cover-face{
    background-image: radial-gradient(120% 90% at 30% 10%, rgba(255,255,255,.06), transparent 55%), radial-gradient(120% 90% at 30% 10%, var(--cover) 0%, var(--cover) 55%, var(--cover-dark) 100%);
  }
  .book.ctex-couro .cover-face, .book.ctex-couro .back-cover-face{
    background-image:
      radial-gradient(1.4px 1.4px at 8px 8px, rgba(0,0,0,.16) 1px, transparent 1.4px),
      radial-gradient(120% 90% at 30% 10%, rgba(255,255,255,.07), transparent 55%),
      radial-gradient(120% 90% at 30% 10%, var(--cover) 0%, var(--cover) 55%, var(--cover-dark) 100%);
    background-size:7px 7px, auto, auto;
  }
  .book.ctex-linho .cover-face, .book.ctex-linho .back-cover-face{
    background-image:
      repeating-linear-gradient(45deg, rgba(255,255,255,.05) 0 2px, transparent 2px 4px),
      repeating-linear-gradient(-45deg, rgba(0,0,0,.05) 0 2px, transparent 2px 4px),
      radial-gradient(120% 90% at 30% 10%, var(--cover) 0%, var(--cover-dark) 100%);
  }
  .book.ctex-veludo .cover-face, .book.ctex-veludo .back-cover-face{
    background-image:
      repeating-linear-gradient(90deg, rgba(255,255,255,.045) 0 3px, rgba(0,0,0,.035) 3px 6px),
      radial-gradient(140% 100% at 50% 0%, rgba(255,255,255,.09), transparent 60%),
      radial-gradient(120% 100% at 50% 100%, var(--cover-dark) 0%, var(--cover) 60%);
  }
  .book.ctex-floral .cover-face, .book.ctex-floral .back-cover-face{
    background-image:
      radial-gradient(circle at 50% 50%, rgba(255,255,255,.12) 0 3px, transparent 4px),
      radial-gradient(120% 90% at 30% 10%, var(--cover) 0%, var(--cover-dark) 100%);
    background-size:46px 46px, auto;
    background-repeat:repeat, no-repeat;
    background-position: 0 0, 0 0;
  }
  .book.ctex-floral .cover-face::after, .book.ctex-floral .back-cover-face::after{
    content:'';
    position:absolute; inset:0; pointer-events:none; border-radius:4px;
    background-image: radial-gradient(circle at 23px 23px, rgba(255,255,255,.06) 0 8px, transparent 9px);
    background-size:46px 46px;
  }
  .book.ctex-kraft .cover-face, .book.ctex-kraft .back-cover-face{
    background-image:
      repeating-linear-gradient(8deg, rgba(255,255,255,.05) 0 1px, transparent 1px 5px),
      radial-gradient(120% 90% at 30% 10%, var(--cover) 0%, var(--cover-dark) 100%);
  }
  .book.ctex-marmore .cover-face, .book.ctex-marmore .back-cover-face{
    background-image:
      linear-gradient(120deg, rgba(255,255,255,.14) 0%, transparent 22%, rgba(255,255,255,.09) 40%, transparent 60%, rgba(255,255,255,.16) 78%, transparent 100%),
      radial-gradient(120% 90% at 30% 10%, var(--cover) 0%, var(--cover-dark) 100%);
  }
  .book.ctex-madeira .cover-face, .book.ctex-madeira .back-cover-face{
    background-image:
      repeating-linear-gradient(180deg, rgba(0,0,0,.12) 0 3px, rgba(255,255,255,.05) 3px 6px, transparent 6px 14px),
      radial-gradient(120% 90% at 30% 10%, var(--cover) 0%, var(--cover-dark) 100%);
  }

  /* ===== Page textures ===== */
  .page-face{
    background-image: linear-gradient(180deg, rgba(255,255,255,.08), rgba(0,0,0,.03));
    background-color: var(--paper);
  }
  .book.ptex-pautado .page-face{
    background-image:
      repeating-linear-gradient(180deg, transparent 0 27px, rgba(58,46,34,.16) 27px 28px),
      linear-gradient(180deg, rgba(255,255,255,.08), rgba(0,0,0,.03));
    background-color: var(--paper);
  }
  .book.ptex-kraft .page-face{
    background-image:
      repeating-linear-gradient(6deg, rgba(0,0,0,.05) 0 1px, transparent 1px 6px),
      linear-gradient(180deg, rgba(255,255,255,.05), rgba(0,0,0,.05));
    background-color: var(--paper);
  }
  .book.ptex-aquarela .page-face{
    background-image:
      radial-gradient(120px 90px at 15% 20%, rgba(120,150,140,.10), transparent 60%),
      radial-gradient(160px 100px at 80% 70%, rgba(150,120,110,.10), transparent 60%),
      radial-gradient(100px 80px at 60% 15%, rgba(140,130,180,.08), transparent 60%),
      linear-gradient(180deg, rgba(255,255,255,.08), rgba(0,0,0,.03));
    background-color: var(--paper);
  }
  .book.ptex-vintage .page-face{
    background-image:
      radial-gradient(220px 160px at 0% 0%, rgba(90,60,30,.16), transparent 60%),
      radial-gradient(220px 160px at 100% 100%, rgba(90,60,30,.16), transparent 60%),
      linear-gradient(180deg, rgba(255,255,255,.05), rgba(0,0,0,.05));
    background-color: var(--paper-shadow);
  }

  /* ===== Customize panel ===== */
  .panel-overlay{
    position:fixed; inset:0; background:rgba(10,12,8,.55);
    display:none; align-items:center; justify-content:flex-end; z-index:520;
  }
  .panel-overlay.open{display:flex;}
  .panel{
    width:100%; max-width:340px; height:100%; overflow-y:auto;
    background:#1a2117; color:#eee3cf;
    padding:26px 22px 40px;
    font-family:'Inter',sans-serif;
    box-shadow:-14px 0 40px rgba(0,0,0,.5);
  }
  .panel h2{
    font-family:'Fraunces',serif; font-size:22px; margin:0 0 4px; color:var(--gold-light);
  }
  .panel .panel-close{
    float:right; background:none; border:none; color:#cdbb95; font-size:22px; cursor:pointer;
  }
  .panel-section{margin-top:22px;}
  .panel-section h3{
    font-size:12px; text-transform:uppercase; letter-spacing:.08em; color:#b7a986; margin:0 0 10px;
  }
  .color-row{display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; font-size:13px;}
  .color-row input[type=color]{
    width:38px; height:28px; border:none; border-radius:6px; background:none; cursor:pointer; padding:0;
  }
  .swatch-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:10px;}
  .template-grid{display:grid; grid-template-columns:1fr 1fr; gap:10px;}
  .template-card{
    cursor:pointer; border-radius:8px; overflow:hidden; position:relative;
    border:2px solid transparent; background:#2b3a2f; text-align:left;
    display:block; width:100%; padding:0; margin:0; font:inherit;
  }
  .template-card.selected{border-color:var(--gold-light);}
  .template-card .tpl-preview{height:56px; width:100%;}
  .template-card .tpl-label{
    display:block; font-size:11.5px; padding:6px 8px; color:#e7dbc0; background:rgba(0,0,0,.28);
  }
  .template-card .lock-badge{top:4px; right:6px;}
  .template-card.locked{opacity:.6;}
  .swatch{
    cursor:pointer; border-radius:8px; overflow:hidden;
    border:2px solid transparent;
    background:#2b3a2f;
    text-align:center;
    position:relative;
    display:block; width:100%; padding:0; margin:0; font:inherit;
  }
  .swatch.selected{border-color:var(--gold-light);}
  .swatch.locked{opacity:.55;}
  .swatch .swatch-preview{height:44px; width:100%; position:relative;}
  .lock-badge{
    position:absolute; top:3px; right:5px; font-size:12px;
    filter:drop-shadow(0 1px 2px rgba(0,0,0,.6));
  }
  .swatch .swatch-label{
    display:block; font-size:11px; padding:5px 2px; color:#e7dbc0; background:rgba(0,0,0,.25);
  }
  select.font-select{
    width:100%; background:#25301f; color:#eee3cf; border:1px solid rgba(205,174,114,.35);
    border-radius:6px; padding:8px 10px; font-family:'Inter',sans-serif; font-size:13px;
  }
  .reset-link{
    display:inline-block; margin-top:24px; font-size:12px; color:#cdae72; text-decoration:underline; cursor:pointer; background:none; border:none; font-family:'Inter',sans-serif;
  }
  .premium-tag{
    display:inline-block;
    font-size:9.5px; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
    background:linear-gradient(120deg, #a8843c, #cdae72); color:#1c2620;
    border-radius:8px; padding:2px 7px; margin-left:6px; vertical-align:middle;
  }
  .icon-picker-row{display:flex; align-items:center; gap:10px; margin-bottom:10px;}
  .icon-preview{
    flex:0 0 auto;
    width:44px; height:44px; border-radius:10px;
    background:#25301f; border:1px solid rgba(205,174,114,.35);
    display:flex; align-items:center; justify-content:center;
    font-size:22px;
  }
  #iconInput{
    flex:1; min-width:0; text-align:center;
    font-family:'Inter',sans-serif; font-size:16px;
    border:1px solid rgba(205,174,114,.3); border-radius:6px; padding:9px 10px;
    background:#25301f; color:#eee3cf;
  }
  #iconInput[readonly]{opacity:.55; cursor:pointer;}
  .icon-presets{display:grid; grid-template-columns:repeat(8,1fr); gap:6px;}
  .icon-preset-btn{
    background:#25301f; border:1px solid rgba(205,174,114,.25); border-radius:6px;
    font-size:16px; padding:6px 0; cursor:pointer;
    transition:background .15s, border-color .15s;
  }
  .icon-preset-btn:hover{background:rgba(205,174,114,.16);}
  .icon-preset-btn.selected{border-color:var(--gold-light); background:rgba(205,174,114,.22);}

  /* ===== Auth screen ===== */
  .logout-btn{
    background:rgba(238,227,207,.08); color:#cdae72;
    border:1px solid rgba(205,174,114,.35); border-radius:16px;
    font-family:'Inter',sans-serif; font-size:12px; padding:6px 14px; cursor:pointer;
  }
  .auth-overlay{
    position:fixed; inset:0; z-index:800;
    display:flex; align-items:center; justify-content:center;
    background:
      radial-gradient(ellipse 90% 70% at 50% 0%, var(--bg-2) 0%, var(--bg-1) 65%);
    padding:20px;
  }
  .auth-card{
    width:100%; max-width:360px;
    background:#1a2117; color:#eee3cf;
    border:1px solid rgba(205,174,114,.3);
    border-radius:10px; padding:34px 28px;
    text-align:center;
    box-shadow:0 30px 60px rgba(0,0,0,.5);
    font-family:'Inter',sans-serif;
  }
  .auth-emblem{font-size:34px; margin-bottom:6px;}
  .auth-card h2{
    font-family:'Fraunces',serif; font-size:22px; margin:0 0 6px; color:var(--gold-light);
  }
  .auth-sub{font-size:13px; color:#b7a986; margin:0 0 18px; line-height:1.5;}
  .auth-card .field-label{text-align:left; color:#b7a986;}
  .auth-card input{
    width:100%; font-family:'Inter',sans-serif; font-size:14px;
    border:1px solid rgba(205,174,114,.3); border-radius:6px; padding:10px 12px;
    background:#25301f; color:#eee3cf; margin-bottom:2px;
  }
  .auth-error{
    color:#e2a1a1; font-size:12.5px; min-height:18px; margin:10px 0 4px; text-align:left;
  }
  .auth-forgot-link{
    display:block; background:none; border:none; cursor:pointer;
    font-family:'Inter',sans-serif; font-size:12.5px; color:#b7a986;
    text-decoration:underline; padding:0; margin:6px 0 0; text-align:right; width:100%;
  }
  .auth-forgot-link:hover{color:#cdae72;}
  .auth-submit{width:100%; margin-top:14px; padding:11px;}
  .auth-toggle{font-size:13px; color:#b7a986; margin-top:18px;}
  .auth-toggle button{
    background:none; border:none; color:#cdae72; text-decoration:underline; cursor:pointer;
    font-family:'Inter',sans-serif; font-size:13px; padding:0; margin-left:4px;
  }

  /* ===== Share ===== */
  .share-desc{font-size:12.5px; color:#b7a986; margin:0 0 12px; line-height:1.5;}

  /* ===== Download PDF ===== */
  #downloadTab.working{cursor:wait; opacity:.75;}
  .share-code-box{
    display:flex; align-items:center; justify-content:space-between;
    background:#25301f; border:1px dashed rgba(205,174,114,.4); border-radius:8px;
    padding:12px 14px;
  }
  .share-code-box span{
    font-family:'Space Grotesk',monospace; letter-spacing:.12em; font-size:16px; color:var(--gold-light);
  }
  .panel-section input[type=text]{
    width:100%; font-family:'Inter',sans-serif; font-size:14px;
    border:1px solid rgba(205,174,114,.3); border-radius:6px; padding:9px 10px;
    background:#25301f; color:#eee3cf;
  }
  .album-switch-item{
    display:flex; align-items:center; justify-content:space-between;
    padding:10px 12px; border-radius:6px; background:#232f22; margin-bottom:8px;
    font-size:13px; cursor:pointer;
    width:100%; border:none; font-family:'Inter',sans-serif; color:inherit; text-align:left;
  }
  .album-switch-item:hover{background:#2b3a2a;}
  .album-switch-item.active{border:1px solid var(--gold-light);}

  .plan-badge{
    font-family:'Inter',sans-serif; font-size:11px; font-weight:600; letter-spacing:.06em;
    text-transform:uppercase; padding:5px 11px; border-radius:12px;
    background:rgba(238,227,207,.1); color:#cdae72; border:1px solid rgba(205,174,114,.35);
  }
  .plan-badge.premium{
    background:linear-gradient(120deg, #a8843c, #cdae72); color:#1c2620; border:none;
  }
  .upgrade-list{
    text-align:left; font-size:13px; color:#e7dbc0; line-height:1.9;
    margin:0 0 16px; padding-left:20px;
  }
  .upgrade-note{
    font-size:11.5px; color:#9a8d70; margin-top:14px; line-height:1.5; text-align:left;
  }
  /* ===== Retractable sidebar ===== */
  .sidebar-backdrop{
    position:fixed; inset:0; background:rgba(10,12,8,.5);
    opacity:0; pointer-events:none; transition:opacity .25s;
    z-index:300;
  }
  .sidebar-backdrop.open{opacity:1; pointer-events:auto;}

  .sidebar{
    position:fixed; top:0; left:0; height:100%;
    width:280px; max-width:86vw;
    background:#171f14;
    border-right:1px solid rgba(205,174,114,.3);
    box-shadow:18px 0 40px rgba(0,0,0,.5);
    z-index:310;
    display:flex; flex-direction:column;
    transform:translateX(-100%);
    transition:transform .28s cubic-bezier(.4,.05,.2,1);
    font-family:'Inter',sans-serif;
  }
  .sidebar.open{transform:translateX(0);}

  .sidebar-head{
    display:flex; align-items:center; justify-content:space-between;
    padding:20px 18px 14px;
    border-bottom:1px solid rgba(205,174,114,.18);
  }
  .sidebar-brand{
    margin:0; font-family:'Fraunces',serif; font-weight:600;
    font-size:18px; color:var(--gold-light); letter-spacing:.02em;
  }
  .sidebar-brand .icon{margin-right:4px;}
  .sidebar-close{
    background:none; border:none; color:#cdbb95; font-size:24px;
    line-height:1; cursor:pointer; padding:0 4px;
  }
  .sidebar-close:hover{color:var(--gold-light);}

  .sidebar-plan{padding:14px 18px 0;}

  .sidebar-nav{
    display:flex; flex-direction:column; gap:8px;
    padding:16px 14px; overflow-y:auto; flex:1;
  }
  .sidebar-divider{
    height:1px; background:rgba(205,174,114,.18); margin:6px 4px;
  }
  .sidebar-btn{
    display:flex; align-items:center; gap:12px;
    width:100%; text-align:left;
    background:rgba(238,227,207,.05);
    color:#eee3cf;
    border:1px solid rgba(205,174,114,.22);
    border-radius:10px;
    padding:12px 14px;
    font-family:'Inter',sans-serif; font-weight:600; font-size:14px;
    letter-spacing:.01em;
    cursor:pointer;
    transition:background .15s, border-color .15s, transform .15s;
  }
  .sidebar-btn:hover{
    background:rgba(205,174,114,.16);
    border-color:rgba(205,174,114,.45);
    transform:translateX(2px);
  }
  .sidebar-btn-icon{font-size:16px; flex:0 0 auto;}
  .sidebar-btn-hide{
    background:rgba(122,49,49,.18);
    border-color:rgba(122,49,49,.5);
    color:#f2d9d9;
  }
  .sidebar-btn-hide:hover{background:rgba(122,49,49,.32); border-color:rgba(122,49,49,.7);}

  .sidebar-foot{
    padding:14px 18px 20px;
    border-top:1px solid rgba(205,174,114,.18);
  }
  .sidebar-foot .logout-btn{width:100%;}

  /* ===== Hide GUI mode ===== */
  .show-gui-btn{
    display:none;
    position:fixed; bottom:22px; right:22px; z-index:400;
    align-items:center; gap:8px;
    background:rgba(26,33,23,.92); color:var(--gold-light);
    border:1px solid rgba(205,174,114,.45);
    border-radius:24px;
    padding:11px 18px;
    font-family:'Inter',sans-serif; font-weight:600; font-size:13px;
    cursor:pointer;
    box-shadow:0 10px 30px rgba(0,0,0,.5);
    transition:transform .15s, background .15s;
  }
  .show-gui-btn:hover{transform:translateY(-2px); background:rgba(205,174,114,.22);}

  body.gui-hidden .topbar,
  body.gui-hidden .sidebar,
  body.gui-hidden .sidebar-backdrop,
  body.gui-hidden .controls{
    display:none !important;
  }
  body.gui-hidden .show-gui-btn{display:flex;}

  @media (max-width:600px){
    .show-gui-btn span{display:none;}
    .show-gui-btn{padding:12px; border-radius:50%;}
  }

  /* ===== Layout edit mode: hint banner + active nav button ===== */
  .sidebar-btn.active{
    background:rgba(205,174,114,.22);
    border-color:var(--gold-light);
    color:var(--gold-light);
  }

  .layout-hint{
    display:none;
    position:fixed; top:18px; left:50%; transform:translateX(-50%);
    align-items:center; gap:8px;
    background:rgba(122,49,49,.92); color:#f6e9df;
    border:1px solid rgba(205,174,114,.5);
    border-radius:24px;
    padding:10px 18px;
    font-family:'Inter',sans-serif; font-weight:600; font-size:12.5px;
    letter-spacing:.01em;
    box-shadow:0 10px 26px rgba(0,0,0,.45);
    z-index:250;
    max-width:88vw;
    text-align:left;
  }
  body.layout-edit-active .layout-hint{display:flex;}

  @media (max-width:640px){
    .layout-hint{font-size:11.5px; padding:9px 14px;}
  }

  /* ===== Small phones: tighten spacing so nothing crowds or clips ===== */
  @media (max-width:420px){
    .topbar{padding-left:calc(14px + env(safe-area-inset-left, 0px)); padding-right:calc(14px + env(safe-area-inset-right, 0px));}
    .topbar-inner{gap:10px;}
    .brand{font-size:17px;}
    .panel{padding:22px 16px 32px;}
    .modal{padding:20px 16px;}
    .icon-presets{grid-template-columns:repeat(6,1fr);}
    .controls{gap:14px; margin:16px 0 28px;}
    .auth-card{padding:26px 20px;}
  }

  /* ===== Safe-area padding for floating elements on notch / gesture-nav devices ===== */
  .sidebar{
    padding-top:env(safe-area-inset-top, 0px);
    padding-left:env(safe-area-inset-left, 0px);
  }
  .show-gui-btn{
    bottom:calc(22px + env(safe-area-inset-bottom, 0px));
    right:calc(22px + env(safe-area-inset-right, 0px));
  }
  .layout-hint{
    top:calc(18px + env(safe-area-inset-top, 0px));
  }
  .controls{
    padding-bottom:env(safe-area-inset-bottom, 0px);
  }

  /* ===== Larger screens: let the album breathe a little more, never feel tiny ===== */
  @media (min-width:1400px){
    .stage-wrap{padding-top:22px;}
  }

  /* ===== Respect reduced-motion preference ===== */
  @media (prefers-reduced-motion: reduce){
    .leaf{transition:none;}
    .sidebar{transition:none;}
    .sidebar-backdrop{transition:none;}
    .sidebar-btn, .show-gui-btn, .icon-preset-btn, .resize-handle{transition:none;}
    .sidebar-btn:hover{transform:none;}
    .show-gui-btn:hover{transform:none;}
  }

  /* ===== Touch devices: skip hover-only affordances that can stick after a tap ===== */
  @media (hover:none){
    .sidebar-btn:hover, .show-gui-btn:hover, .icon-btn:hover, .nav-btn:hover,
    .icon-preset-btn:hover, .swatch:hover, .template-card:hover{
      transform:none;
    }
  }