:root{
    --ink:#25282b; --paper:#f7f7f5; --studio:#dfe3e6; --studio-2:#cfd5d9;
    --accent:#4f6373; --accent-dark:#3b4d5a; --gold:#8b8a76; --muted:#6f7378;
    --border:#c9d0d4; --danger:#a8503f; --danger-bg:#f3e5e1;
  }

  *{box-sizing:border-box;}
  html,body{height:100%;}
  body{
    margin:0; background:var(--studio); color:var(--ink);
    font-family:'Inter',sans-serif; font-size:14px;
    display:flex; flex-direction:column;
  }
  h1,h2,h3{font-family:'Lora',serif; font-weight:600; margin:0;}
  button{font-family:'Inter',sans-serif; cursor:pointer;}
  input,textarea,select{font-family:'Inter',sans-serif;}

  /* ---------- Header / toolbar ---------- */
  .app-header{
    background:var(--ink); color:#f4f1ea; padding:14px 20px;
    display:flex; align-items:center; gap:16px; flex-wrap:wrap;
  }
  .brand{display:flex; align-items:center; gap:10px; margin-right:6px;}
  .brand-name{font-family:'Lora',serif; font-size:16px; letter-spacing:.02em; white-space:nowrap;}
  #projectTitle{
    background:transparent; border:none; border-bottom:1px solid rgba(244,241,234,.35);
    color:#f4f1ea; font-family:'Lora',serif; font-size:15px; padding:4px 2px; width:280px;
  }
  #projectTitle::placeholder{color:rgba(244,241,234,.5);}
  #projectTitle:focus{outline:none; border-bottom-color:var(--gold);}
  .hamburger-btn{
    display:none; flex-direction:column; justify-content:center; gap:4px;
    width:32px; height:32px; background:transparent; border:none; padding:0;
    margin-left:auto;
  }
  .hamburger-btn span{ display:block; width:20px; height:2px; background:#f4f1ea; border-radius:1px; }
  .header-menu-panel{ display:flex; align-items:center; gap:16px; flex:1; }
  .header-menu-backdrop{ display:none; }
  .header-spacer{flex:1;}
  .btn{
    border:1px solid rgba(244,241,234,.35); background:transparent; color:#f4f1ea;
    padding:8px 14px; font-size:13px; border-radius:3px; white-space:nowrap;
  }
  .btn:hover{border-color:var(--gold); color:var(--gold);}
  .btn.primary{background:var(--gold); border-color:var(--gold); color:#2c2a27; font-weight:600;}
  .btn.danger{background:var(--danger); border-color:var(--danger); color:#fff; font-weight:600;}
  .btn-icon{margin-right:3px;}
  .btn.primary:hover{filter:brightness(1.08); color:#2c2a27;}
  #loadInput{display:none;}

  /* ---------- Tabs ---------- */
  .tabs{
    display:flex; gap:2px; background:var(--studio-2); padding:0 20px;
  }
  .tab-btn{
    background:transparent; border:none; padding:11px 18px; font-size:13px;
    color:var(--muted); border-bottom:2px solid transparent;
  }
  .tab-btn.active{color:var(--ink); border-bottom-color:var(--accent); font-weight:600;}

  /* ---------- Main layout ---------- */
  .main{flex:1; display:flex; min-height:0;}
  .sidebar{
    width:250px; flex:none; background:var(--studio-2); border-right:1px solid var(--border);
    display:flex; flex-direction:column;
  }
  .sidebar-head{
    padding:14px 14px 8px; display:flex; align-items:center; justify-content:space-between;
  }
  .sidebar-head span{font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted);}
  #addPageBtn{
    background:var(--accent); color:#fff; border:none; border-radius:3px;
    padding:6px 10px; font-size:12px; font-weight:600;
  }
  #addPageBtn:hover{background:var(--accent-dark);}
  #pageList{flex:1; overflow-y:auto; padding:4px 10px 14px;}
  .fold-info{
    flex:none; border-top:1px solid var(--border); padding:10px 14px 14px; font-size:11px; color:var(--muted);
  }
  .fold-info .fold-count{font-size:12px; color:var(--ink); margin-bottom:6px;}
  .fold-info .fold-row{display:flex; justify-content:space-between; gap:6px; padding:2px 0;}
  .fold-info .fold-tag{color:var(--accent-dark); font-weight:600;}
  .page-item{
    display:flex; align-items:center; gap:8px; background:var(--paper);
    border:1px solid var(--border); border-left:4px solid transparent;
    border-radius:3px; padding:8px 10px; margin-bottom:6px; cursor:pointer;
  }
  .page-item.selected{border-left-color:var(--gold); box-shadow:0 1px 3px rgba(0,0,0,.12);}
  .page-num{
    font-family:'Lora',serif; font-size:12px; color:var(--muted); width:16px; text-align:center; flex:none;
  }
  .page-info{flex:1; min-width:0;}
  .page-tpl{font-size:10px; text-transform:uppercase; letter-spacing:.06em; color:var(--accent-dark);}
  .page-title{font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
  .page-actions{display:flex; gap:2px; flex:none;}
  .icon-btn{
    width:20px; height:20px; border:none; background:transparent; color:var(--muted);
    font-size:11px; border-radius:2px; display:flex; align-items:center; justify-content:center;
  }
  .icon-btn:hover{background:var(--studio-2); color:var(--ink);}
  .icon-btn.danger:hover{background:var(--danger-bg); color:var(--danger);}
  .icon-btn:disabled{opacity:.25; cursor:default;}
  .icon-btn:disabled:hover{background:transparent; color:var(--muted);}

  /* ---------- Design stage ---------- */
  .design-stage{flex:1; display:flex; min-width:0; position:relative;}
  body[data-mode="print"] .design-stage{display:none;}
  .editor-drawer{
    width:360px; flex:none; overflow-y:auto; padding:20px; border-right:1px solid var(--border);
  }
  .editor-pane{}
  .drawer-header, .drawer-done-btn, .drawer-close-btn, .drawer-header-actions, .drawer-backdrop, .mobile-edit-fab, .mobile-print-fab, .page-indicator{ display:none; }
  .preview-pane{
    flex:1; overflow-y:auto; padding:36px; display:flex; align-items:flex-start;
    justify-content:center;
  }
  .empty-state{margin:auto; text-align:center; color:var(--muted); max-width:320px;}
  .empty-state h2{font-size:18px; margin-bottom:8px; color:var(--ink);}

  .field{margin-bottom:16px;}
  .field-group{
    border-left:2px solid var(--border); padding-left:14px;
    margin-bottom:22px;
  }
  .field-group-title{
    font-size:13px; font-weight:500; color:var(--muted); margin-bottom:12px;
  }
  .field-group .field:last-child{ margin-bottom:0; }
  .field label{
    display:block; font-size:11px; text-transform:uppercase; letter-spacing:.06em;
    color:var(--muted); margin-bottom:5px;
  }
  .field input[type="text"], .field textarea, .field select{
    width:100%; padding:8px 9px; border:1px solid var(--border); border-radius:3px;
    background:var(--paper); color:var(--ink); font-size:13px;
  }
  .field textarea{resize:vertical; min-height:90px; line-height:1.5; font-family:'Lora',serif;}
  .field-hint{font-size:11px; color:var(--muted); margin-top:4px;}
  .section-divider{
    font-size:11px; text-transform:uppercase; letter-spacing:.08em; color:var(--accent-dark);
    font-weight:600; margin:20px 0 10px; padding-top:16px; border-top:2px solid var(--border);
  }
  .section-box{background:var(--studio); border-radius:4px; padding:12px 12px 4px;}
  .radio-row{display:flex; gap:8px; flex-wrap:wrap;}
  .radio-row label{
    flex:1 1 70px; text-align:center; border:1px solid var(--border); border-radius:3px;
    padding:6px 4px; font-size:12px; text-transform:none; letter-spacing:0; cursor:pointer;
    color:var(--ink);
  }
  .radio-row input{display:none;}
  .radio-row input:checked + span{color:var(--accent-dark); font-weight:600;}
  .radio-row label:has(input:checked){border-color:var(--accent); background:var(--studio);}

  .image-slot{
    border:1px dashed var(--border); border-radius:4px; padding:10px; margin-bottom:10px;
    display:flex; gap:10px; align-items:center;
  }
  .image-thumb{
    width:52px; height:52px; flex:none; background:var(--studio); border-radius:3px;
    display:flex; align-items:center; justify-content:center; overflow:hidden; color:var(--muted); font-size:10px;
  }
  .image-thumb img{width:100%; height:100%; object-fit:cover;}
  .image-slot-controls{flex:1; min-width:0;}
  .image-slot-controls input[type="text"]{
    width:100%; margin-top:6px; padding:5px 7px; font-size:12px;
    border:1px solid var(--border); border-radius:3px; background:var(--paper); color:var(--ink);
  }
  .file-label{
    display:inline-block; font-size:12px; padding:5px 10px; border:1px solid var(--border);
    border-radius:3px; background:var(--paper); color:var(--ink);
  }
  .file-label:hover{border-color:var(--accent);}
  .file-label input{display:none;}
  .crop-controls{
    border:1px solid var(--border); border-radius:4px; padding:8px 10px; margin:-4px 0 10px;
    background:var(--studio);
  }
  .crop-preview{
    width:140px; aspect-ratio:148.5/210; margin:2px auto 10px; overflow:hidden;
    background:var(--paper); border:1px solid var(--border);
  }
  .crop-preview.oval{ border-radius:50%; aspect-ratio:200/260; }
  .crop-preview img{ width:100%; height:100%; display:block; object-fit:cover; }
  .crop-row{display:flex; align-items:center; gap:8px; margin-bottom:4px;}
  .crop-row:last-child{margin-bottom:0;}
  .crop-row span{font-size:11px; color:var(--muted); width:64px; flex:none;}
  .crop-row input[type="range"]{flex:1; accent-color:var(--accent);}

  .order-row{display:flex; gap:6px; margin-bottom:8px; align-items:center;}
  .order-row input{
    flex:1; padding:7px 8px; border:1px solid var(--border); border-radius:3px;
    background:var(--paper); color:var(--ink); font-size:12px;
  }
  .order-item-card{
    border:1px solid var(--border); border-radius:6px; padding:8px; margin-bottom:8px;
    background:var(--studio);
  }
  .order-item-row{display:flex; gap:6px; align-items:center; flex-wrap:wrap;}
  .order-item-row + .order-item-row{ padding-left:24px; }
  .order-item-row input{
    padding:7px 8px; border:1px solid var(--border); border-radius:3px;
    background:var(--paper); color:var(--ink); font-size:12px; min-width:0;
  }
  .order-item-num{
    flex:none; width:18px; height:18px; border-radius:50%; background:var(--studio-2);
    color:var(--muted); font-size:10px; font-weight:600; display:flex; align-items:center; justify-content:center;
  }
  .oi-label{flex:1;}
  .oi-detail{flex:1.3;}
  .oi-hymnnum{flex:none !important; width:52px !important;}
  .icon-btn.active{background:var(--accent); color:#fff;}
  .icon-btn.active:hover{background:var(--accent-dark); color:#fff;}
  .add-line-btn{
    font-size:12px; padding:6px 10px; border:1px solid var(--border); border-radius:3px;
    background:var(--paper); color:var(--accent-dark);
  }
  .add-line-btn:hover{border-color:var(--accent);}
  .fetch-btn{
    flex:1; min-width:56px; font-size:12px; padding:7px 6px; border:1px solid var(--border); border-radius:3px;
    background:var(--paper); color:var(--accent-dark); font-weight:600;
  }
  .fetch-btn:hover{border-color:var(--accent);}
  .fetch-btn:disabled{opacity:.6; cursor:default;}
  .link-btn{
    background:none; border:none; color:var(--accent-dark); font-size:11px; padding:2px 4px;
    text-decoration:underline; text-underline-offset:2px;
  }
  .link-btn:hover{color:var(--accent);}

  /* ---------- A5 page look (shared: editor preview + print) ---------- */
  .a5-page{
    background:var(--paper); color:var(--ink); font-family:'Lora','Noto Serif Devanagari',serif;
    width:100%; aspect-ratio:148.5/210; position:relative; overflow:hidden;
    display:flex; flex-direction:column; padding:9% 10%;
  }
  .preview-frame{
    width:460px; aspect-ratio:148.5/210; overflow:hidden; position:relative;
    box-shadow:0 6px 24px rgba(0,0,0,.16); border:1px solid rgba(0,0,0,.05);
  }
  .preview-frame-inner{ position:absolute; top:0; left:0; transform-origin:top left; }
  .preview-col{display:flex; flex-direction:column; align-items:flex-start;}
  .a5-page h2{font-size:1.35em; margin-bottom:.6em; letter-spacing:.01em;}
  .body-copy{font-size:.92em; line-height:1.65; overflow:hidden;}
  .body-copy p{margin:0 0 .8em;}
  .blank-page{align-items:center; justify-content:center; background:repeating-linear-gradient(45deg, var(--paper), var(--paper) 10px, #00000006 10px, #00000006 20px);}
  .blank-label{font-size:.8em; color:var(--muted); text-transform:uppercase; letter-spacing:.1em;}

  .layout-cover{align-items:center; justify-content:center; text-align:center; padding-top:12%;}
  .cover-title{font-size:2.9em; line-height:1.15; margin-bottom:.1em;}
  .cover-subtitle{font-size:1.5em; font-weight:600; color:var(--ink); margin-bottom:2%;}
  .cover-art-row{display:flex; align-items:center; justify-content:center; width:100%; gap:1%; margin:3% 0;}
  .cover-branch{width:17%; flex:none;}
  .cover-branch svg, .cover-branch img{width:100%; height:auto; display:block;}
  .cover-branch.right{transform:scaleX(-1);}
  .cover-oval{width:42%; flex:none; aspect-ratio:200/260; border-radius:50%; overflow:hidden; background:none; border:1px solid var(--accent); padding:3px; position:relative;}
  .cover-oval.cover-shape-circle{aspect-ratio:1/1; border-radius:50%; width:50%;}
  .cover-oval.cover-shape-arch{aspect-ratio:200/260; border-radius:50% 50% 0 0/38% 38% 0 0;}
  .cover-oval.cover-shape-heart{aspect-ratio:1/0.92; border-radius:0; clip-path:url(#shape-heart); width:50%; border:none; background:none; padding:0; position:relative;}
  .cover-oval.cover-shape-scalloped{aspect-ratio:1/1; border-radius:0; clip-path:url(#shape-scalloped); width:50%; border:none; background:none; padding:0; position:relative;}
  .cover-oval-inset{position:absolute; width:calc(100% - 6px); height:calc(100% - 6px); top:50%; left:50%; transform:translate(-50%,-50%); overflow:hidden; border-radius:50%;}
  .cover-oval.cover-shape-arch .cover-oval-inset{border-radius:50% 50% 0 0/38% 38% 0 0;}
  .cover-oval-inset.cover-shape-heart{border-radius:0; clip-path:url(#shape-heart);}
  .cover-oval-inset.cover-shape-scalloped{border-radius:0; clip-path:url(#shape-scalloped);}
  .cover-shape-stroke{position:absolute; inset:0; width:100%; height:100%; pointer-events:none;}
  .cover-oval img, .cover-oval svg, .cover-oval-inset img, .cover-oval-inset svg{width:100%; height:100%; display:block; object-fit:cover;}
  .cover-dates{font-size:1em; margin-top:1%;}
  .cover-swirl{width:58%; margin:4% auto 3%; display:block;}
  .cover-service{width:100%;}
  .cover-service-intro{font-size:.9em; color:var(--muted); text-align:center; margin-bottom:.15em;}
  .cover-service-date{font-size:1.15em; font-weight:600; text-align:center; margin-bottom:3%;}

  .layout-photo-text{gap:6%;}
  .layout-photo-text.pos-top{flex-direction:column;}
  .layout-photo-text.pos-left{flex-direction:row;}
  .layout-photo-text.pos-right{flex-direction:row-reverse;}
  .pt-photo{overflow:hidden; border-radius:2px; flex:none;}
  .layout-photo-text.pos-top .pt-photo{width:100%; height:38%;}
  .layout-photo-text.pos-left .pt-photo, .layout-photo-text.pos-right .pt-photo{width:38%; align-self:flex-start; aspect-ratio:3/4;}
  .pt-photo img{width:100%; height:100%; object-fit:cover;}
  .pt-text{flex:1; min-width:0; overflow:hidden;}

  .layout-full-photo{padding:0;}
  .fp-img{width:100%; height:100%; object-fit:cover;}
  .fp-placeholder{
    flex:1; display:flex; align-items:center; justify-content:center; color:var(--muted);
    font-size:.85em; background:var(--studio);
  }
  .fp-caption{
    position:absolute; left:0; right:0; bottom:0; padding:8% 10% 7%;
    background:linear-gradient(transparent, rgba(0,0,0,.55)); color:#fff; font-size:.95em; text-align:center;
  }

  .layout-hymn{padding:8% 7%; overflow-y:hidden;}
  .hymn-block{display:flex; gap:10px; margin-bottom:2%; width:80%; margin-left:auto; margin-right:auto;}
  .hymn-divider{width:46%; margin:0 auto 6%; display:block;}
  .hymn-number{font-weight:600; font-size:.9em; flex:none; width:22px; padding-top:.1em;}
  .hymn-content{flex:1; min-width:0; text-align:center; line-height:1.55; font-size:.85em;}
  .hymn-content p{margin:0 0 .75em;}
  .hymn-content p.hymn-chorus{font-style:italic;}
  .hymn-closing{margin-top:auto; padding-top:6%; text-align:center;}
  .hymn-closing-title{font-size:1.8em; margin-bottom:.15em;}
  .hymn-closing-body{font-size:.85em; color:var(--muted); font-style:italic;}

  .layout-gallery .gallery-grid{
    flex:1; display:grid; grid-template-columns:1fr 1fr; gap:4%; margin-top:2%;
  }
  .gallery-cell{position:relative; overflow:hidden; border-radius:2px; background:var(--studio);}
  .gallery-cell img{width:100%; height:100%; object-fit:cover; display:block;}
  .cell-placeholder{width:100%; height:100%; min-height:40px;}
  .gallery-cap{
    position:absolute; left:0; right:0; bottom:0; font-size:.62em; text-align:center;
    padding:2px 3px; background:rgba(255,255,255,.82); color:var(--ink);
  }

  .layout-details{justify-content:center;}
  .detail-row{display:flex; flex:1; align-items:flex-start; margin-top:4%;}
  .detail-col{flex:1; min-width:0; text-align:center; padding:0 4%;}
  .detail-heading{font-weight:600; text-transform:uppercase; font-size:.78em; letter-spacing:.06em; margin-bottom:.5em;}
  .detail-body{font-size:.85em; line-height:1.65; color:var(--muted);}
  .detail-divider{width:1px; align-self:stretch; background:var(--border);}

  .order-sections{flex:1; overflow:hidden; font-size:1em;}
  .order-section{margin-bottom:.9em;}
  .order-sec-heading{
    font-weight:600; text-transform:uppercase; font-size:.82em; letter-spacing:.05em;
    margin-bottom:.35em; padding-bottom:.25em; border-bottom:1px solid var(--border);
  }
  .order-sec-intro{font-style:italic; color:var(--muted); font-size:.92em; margin-bottom:.3em;}
  .order-list{list-style:none; margin:0; padding:0;}
  .order-list li{display:flex; gap:5px; padding:.14em 0; font-size:1em;}
  .ord-num{color:var(--muted); flex:none;}
  .ord-label{font-weight:500;}
  .ord-detail{color:var(--muted);}
  .ord-detail::before{content:' \2014 ';}

  /* ---------- Modal ---------- */
  .modal-overlay{
    position:fixed; inset:0; background:rgba(30,28,25,.55); display:none;
    align-items:center; justify-content:center; z-index:50; padding:20px;
  }
  .modal-overlay.open{display:flex;}
  .modal{
    background:var(--studio); border-radius:6px; padding:22px; width:100%; max-width:560px;
    max-height:80vh; overflow-y:auto;
  }
  .modal h3{margin-bottom:4px;}
  .modal p.sub{color:var(--muted); font-size:12px; margin:0 0 16px;}
  .tpl-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:10px;}
  .tpl-card{
    background:var(--paper); border:1px solid var(--border); border-radius:4px;
    padding:14px 8px; text-align:center; font-size:12px; color:var(--ink);
  }
  .tpl-card:hover{border-color:var(--accent); background:var(--studio); }
  .tpl-icon{font-size:20px; margin-bottom:6px; display:block; color:var(--accent-dark);}
  .modal-close{
    margin-top:16px; width:100%; padding:8px; border:1px solid var(--border); border-radius:3px;
    background:transparent; color:var(--muted); font-size:12px;
  }

  .alert-modal{ max-width:340px; text-align:center; }
  .alert-icon{
    width:40px; height:40px; border-radius:50%; background:var(--studio); color:var(--gold);
    font-size:18px; display:flex; align-items:center; justify-content:center; margin:0 auto 12px;
  }
  .alert-message{ font-size:14px; line-height:1.55; color:var(--ink); margin:0 0 20px; }
  .alert-actions{ display:flex; gap:8px; }
  .alert-actions .btn{ flex:1; }
  #alertCancelBtn{ display:none; }

  /* ---------- Print stage (screen preview of imposed sheets) ---------- */
  .print-stage{flex:1; overflow-y:auto; padding:28px; display:none;}
  .print-stage.active{display:block;}
  .print-single-page{ display:none; }
  .print-info{
    max-width:900px; margin:0 auto 20px; background:var(--paper); border:1px solid var(--border);
    border-radius:4px; padding:14px 18px; font-size:13px; color:var(--muted); display:flex;
    justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap;
  }
  .print-info strong{color:var(--ink);}
  .print-hint{
    max-width:900px; margin:-8px auto 20px; font-size:12px; color:var(--muted);
  }
  .print-hint strong{color:var(--accent-dark);}
  .sheets-wrap{max-width:900px; margin:0 auto; display:flex; flex-direction:column; gap:22px;}
  .print-page{
    background:#fff; width:100%; aspect-ratio:297/210; display:flex; position:relative;
    box-shadow:0 4px 16px rgba(0,0,0,.14); border:1px solid rgba(0,0,0,.08);
  }
  .print-page-label{
    position:absolute; top:-20px; left:0; font-size:11px; color:var(--muted); letter-spacing:.04em;
  }
  .sheet-mark{
    position:absolute; bottom:2mm; right:3mm; font-size:7px; color:#b3aea3; letter-spacing:.03em; z-index:5;
  }
  .a5-slot{width:50%; height:100%; position:relative;}
  .a5-slot-label{
    position:absolute; top:4px; left:4px; z-index:6; font-size:10px; color:var(--muted);
    background:rgba(255,255,255,.85); padding:1px 6px; border-radius:3px; letter-spacing:.03em;
  }
  .a5-slot .a5-page{aspect-ratio:auto; width:100%; height:100%;}
  .print-page::before, .print-page::after{
    content:''; position:absolute; left:50%; width:0; border-left:1px dashed #b9b3a4; height:5%;
  }
  .print-page::before{top:0;}
  .print-page::after{bottom:0;}

  /* ---------- Print media ---------- */
  @media print{
    @page{ size:A4 landscape; margin:0; }
    html,body{background:#fff;}
    .app-header, .tabs, .sidebar, .design-stage, .print-info, .no-print{ display:none !important; }
    .main{display:block;}
    .print-stage{ display:block !important; overflow:visible; padding:0; }
    .sheets-wrap{max-width:none; gap:0;}
    .print-page{
      width:297mm; height:210mm; box-shadow:none; border:none;
      page-break-after:always; break-after:page;
    }
    .print-page::before, .print-page::after{ border-left-color:#ccc; }
  }

  /* ---------- Share progress overlay ---------- */
  .share-progress-overlay{
    display:none; position:fixed; inset:0; z-index:80; background:rgba(0,0,0,.55);
    align-items:center; justify-content:center;
  }
  .share-progress-overlay.open{ display:flex; }
  .share-progress-box{
    background:var(--paper); border-radius:8px; padding:28px 32px; text-align:center;
    box-shadow:0 10px 30px rgba(0,0,0,.3); max-width:280px;
  }
  .share-spinner{
    width:32px; height:32px; margin:0 auto 14px; border-radius:50%;
    border:3px solid var(--border); border-top-color:var(--accent);
    animation:share-spin .8s linear infinite;
  }
  @keyframes share-spin{ to{ transform:rotate(360deg); } }
  .share-progress-box p{ margin:0; font-size:13px; color:var(--ink); }

  /* ---------- Undo toast ---------- */
  .undo-toast{
    display:none; position:fixed; left:50%; bottom:24px; transform:translateX(-50%); z-index:60;
    background:var(--ink); color:#f4f1ea; padding:10px 10px 10px 16px; border-radius:6px;
    font-size:13px; align-items:center; gap:14px; box-shadow:0 4px 16px rgba(0,0,0,.25);
  }
  .undo-toast.show{ display:flex; }
  .undo-toast button{
    background:var(--gold); color:#2c2a27; border:none; border-radius:4px; padding:6px 12px;
    font-size:12px; font-weight:600;
  }

  /* ---------- Mobile bottom navigation (hidden on desktop) ---------- */
  .bottom-nav{
    display:none; position:fixed; left:0; right:0; bottom:0; z-index:40;
    background:var(--studio-2); border-top:1px solid var(--border);
    padding:6px 4px calc(6px + env(safe-area-inset-bottom));
  }
  .bn-btn{
    flex:1; display:flex; flex-direction:column; align-items:center; gap:2px;
    background:none; border:none; color:var(--muted); font-size:11px; padding:6px 2px; border-radius:6px;
  }
  .bn-icon{font-size:18px; line-height:1;}
  .bn-btn.active{color:var(--accent-dark); font-weight:600; background:var(--studio);}

  @media screen and (max-width:820px){
    .editor-drawer{width:300px;}
    .sidebar{width:200px;}
  }

  /* ---------- Mobile layout: one panel at a time, bottom-nav driven ---------- */
  .mobile-print-btn{ display:none; }

  @media screen and (max-width:720px){
    body{ padding-bottom:64px; }
    .bottom-nav{ display:flex; }
    .undo-toast{ bottom:76px; }
    .app-header{ padding:12px 14px; gap:10px; position:relative; }
    .hamburger-btn{ display:flex; }
    .header-menu-panel{
      display:none; position:absolute; left:0; right:0; top:100%; z-index:61;
      background:var(--ink); flex-direction:column; align-items:stretch; gap:10px;
      padding:14px; box-shadow:0 8px 20px rgba(0,0,0,.3);
    }
    .header-menu-panel.open{ display:flex; }
    #projectTitle{ width:100%; }
    .header-spacer{ display:none; }
    #saveBtn, label[for="loadInput"]{ font-size:13px; padding:10px; text-align:center; }
    .header-menu-backdrop.open{ display:block; position:fixed; inset:0; z-index:60; background:rgba(0,0,0,.35); }
    .tabs{ display:none; } /* replaced by bottom-nav */

    .main{ display:block; }
    .sidebar{
      width:100%; display:none; border-right:none; max-height:none;
    }
    body[data-mode="design"] .design-stage{ display:block; position:relative; }
    .preview-pane{ width:100%; display:none; border-right:none; padding:36px 20px 20px; }
    .print-stage{ padding:16px 0; padding-bottom:76px; }
    .print-info, .print-hint, .sheets-wrap{ display:none; }
    body[data-mode="print"] .print-single-page{
      display:block; width:100%; max-width:400px; aspect-ratio:148.5/210; margin:36px auto 0;
      overflow:hidden; position:relative; background:#fff;
      box-shadow:0 6px 20px rgba(0,0,0,.18); border:1px solid rgba(0,0,0,.06);
    }
    .print-single-page-inner{ position:absolute; top:0; left:0; transform-origin:top left; }
    body[data-mode="print"] .mobile-print-btn{
      display:block; position:fixed; left:14px; right:14px; bottom:76px; z-index:41;
      text-align:center; padding:13px; border-radius:6px;
    }

    body[data-mobile-panel="pages"] .sidebar{ display:flex; }
    body[data-mobile-panel="preview"] .preview-pane{ display:flex; }
    body[data-mode="print"] .sidebar,
    body[data-mode="print"] .editor-drawer,
    body[data-mode="print"] .preview-pane{ display:none; }

    .preview-col{ width:100%; align-items:center; }
    .preview-frame{ width:100%; max-width:440px; }

    /* Edit drawer: bottom sheet over the preview, opened via the floating edit button.
       Shrunk so the live preview stays visible above it while editing. */
    .editor-drawer{
      display:none; position:fixed; left:0; right:0; bottom:0; z-index:55;
      width:100%; max-height:60vh; overflow-y:auto; border-right:none;
      border-radius:16px 16px 0 0; box-shadow:0 -8px 28px rgba(0,0,0,.3);
      background:var(--paper); padding:0;
    }
    body[data-drawer-open="true"] .editor-drawer{ display:block; }
    .drawer-header{
      position:sticky; top:0; z-index:2; background:var(--paper);
      display:flex; align-items:center; justify-content:center;
      min-height:48px; padding:8px 16px; border-bottom:1px solid var(--border);
    }
    .drawer-handle-bar{
      display:block; width:36px; height:4px; background:var(--border); border-radius:2px;
    }
    .drawer-header-actions{
      position:absolute; right:12px; top:50%; transform:translateY(-50%);
      display:flex; align-items:center; gap:8px;
    }
    .drawer-done-btn{
      display:flex; align-items:center; gap:4px; background:var(--accent); color:#fff; border:none; border-radius:4px;
      padding:6px 14px; font-size:13px; font-weight:600;
    }
    .drawer-close-btn{
      display:flex; align-items:center; justify-content:center; width:28px; height:28px;
      background:var(--danger); color:#fff; border:none; border-radius:50%;
    }
    .drawer-header-actions{
      position:absolute; right:12px; top:50%; transform:translateY(-50%);
      display:flex; align-items:center; gap:8px;
    }
    .editor-pane{ padding:16px 16px 24px; }
    .drawer-backdrop{
      display:none; position:fixed; inset:0; background:rgba(0,0,0,.4); z-index:50;
    }
    body[data-drawer-open="true"] .drawer-backdrop{ display:block; }
    .mobile-edit-fab, .mobile-print-fab, .mobile-share-fab{
      display:none; position:fixed; z-index:45;
      width:48px; height:48px; border-radius:50%; border:none;
      font-size:18px; align-items:center; justify-content:center; box-shadow:0 4px 14px rgba(0,0,0,.3);
    }
    .mobile-edit-fab{ right:16px; bottom:78px; background:var(--gold); color:#2c2a27; }
    .mobile-print-fab{ right:16px; bottom:136px; background:var(--ink); color:#f4f1ea; }
    .mobile-share-fab{ right:16px; bottom:194px; background:var(--accent); color:#fff; }
    body[data-mobile-panel="preview"] .mobile-edit-fab,
    body[data-mobile-panel="preview"] .mobile-print-fab,
    body[data-mobile-panel="preview"] .mobile-share-fab{ display:flex; }
    body[data-drawer-open="true"] .mobile-edit-fab,
    body[data-drawer-open="true"] .mobile-print-fab,
    body[data-drawer-open="true"] .mobile-share-fab{ display:none; }
    body[data-mode="print"] .mobile-edit-fab,
    body[data-mode="print"] .mobile-print-fab,
    body[data-mode="print"] .mobile-share-fab{ display:none; }

    /* Compact floating page indicator — swipe the page itself to navigate */
    .page-indicator{
      display:none; position:absolute; top:8px; left:50%; transform:translateX(-50%); z-index:10;
      background:rgba(37,40,43,.82); color:#f4f1ea; border-radius:16px; padding:3px 4px;
      align-items:center; gap:2px; box-shadow:0 2px 8px rgba(0,0,0,.2);
    }
    body[data-mobile-panel="preview"] .page-indicator#pageNav{ display:flex; }
    body[data-mode="print"] .page-indicator#printSingleNav{
      display:flex; position:fixed; top:auto; bottom:78px; left:50%;
    }
    body[data-drawer-open="true"] .page-indicator{ display:none; }
    .page-indicator span{ font-size:11px; padding:0 4px; }
    .page-indicator button{
      background:none; border:none; color:#f4f1ea; font-size:15px; width:24px; height:24px;
      border-radius:50%; display:flex; align-items:center; justify-content:center; flex:none;
    }
    .page-indicator button:disabled{ opacity:.3; }
    .swipe-hint{ display:none; }



    /* Bigger touch targets throughout */
    .icon-btn{ width:32px; height:32px; font-size:14px; }
    .page-item{ padding:12px 10px; }
    .radio-row label{ padding:10px 6px; font-size:13px; }
    .add-line-btn, .link-btn, .file-label{ padding:9px 12px; font-size:13px; }
    .field input[type="text"], .field textarea, .field select{ padding:10px; font-size:14px; }
    .crop-row input[type="range"]{ height:28px; }
    #addPageBtn{ padding:9px 12px; font-size:13px; }
    .tpl-grid{ grid-template-columns:repeat(2,1fr); }
  }