/* LEMBAR v68 — PGLAB studio theme.
   Re-themes the interface to match LUME, MOSAIC and the rest of CREATE.
   The photobook pages are drawn on <canvas> (white paper, the book's own
   colours and fonts), so pages, thumbnails, PDF and PNG exports are unchanged. */

:root{
 --paper:#111111;--ink:#f4f3ee;--muted:#b4b1a7;--line:#323232;--orange:#ff5a1f;--orange-dark:#ff9a6e;--panel:#1b1b1b;
 --sans:PGStudio,Manrope,"Helvetica Neue",Arial,sans-serif;--shadow:0 10px 28px #0007;
 --lb-surface:#1b1b1b;--lb-rail:#151515;--lb-raised:#242424;--lb-field:#141414;--lb-border:#454545;--lb-tint:#38231a;--lb-tint-text:#ffc6aa;--lb-dim:#8f8d86
}
html,body{background:#111}
body{color:var(--ink);font-family:var(--sans)}
/* PGLAB header sits above the studio, as on LUME and MOSAIC */
body.pg-lembar .app{height:calc(100dvh - var(--site-header-height,78px))}
body.pg-lembar>.site-header{flex-shrink:0}

/* ---------- Typography: PGLAB interface type and readable sizes ---------- */
h1{font-weight:700;letter-spacing:-.04em}
h2{font-weight:700}
.eyebrow{font-size:10px;letter-spacing:.14em;color:var(--orange-dark)}
.modal-header h2,#progressModal h2,.drop-overlay h2{font-family:var(--sans);font-weight:700;letter-spacing:-.04em}
.modal-header h2{font-size:30px;line-height:1.1}
#progressModal h2{font-size:26px}
.drop-overlay h2{font-size:38px}
.text-preset.title{font-family:var(--serif)} /* previews the book's title style */

/* ---------- Top bar ---------- */
.topbar{background:var(--lb-surface);border-bottom:1px solid var(--line);color:var(--ink)}
.brand{gap:12px;color:var(--ink)}
.brand>span.brand-mark{display:grid;place-items:center;width:36px;height:36px;border:1px solid var(--lb-border);border-radius:10px;background:var(--lb-raised);color:#d3d0c6;font:800 12px/1 var(--sans);letter-spacing:-.02em}
.brand-word{font:800 18px/1 var(--sans);letter-spacing:-.04em}
.brand-product{display:block;font-size:9px;letter-spacing:.14em;color:var(--muted);line-height:1.4;white-space:nowrap}
.brand-divider{background:var(--line)}
.brand,.brand:hover{flex-direction:row;align-items:center}
.font-note{font-size:11px;color:var(--muted)}
.create-return{font-size:11px;text-decoration-color:#ff5a1f99}
.modal-menu>a{font-size:14px;color:var(--ink)}
.project-heading{border-left-color:var(--line)}
.project-heading input{color:var(--ink);font-size:15px}
.project-heading input:hover{box-shadow:0 1px 0 #ffffff24}
.save-status{font-size:11px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.project-heading{min-width:0}
.status-dot{background:#7fd49a}
.top-divider{background:var(--line)}
.icon-btn{color:#c9c6bc;border-radius:8px;transition:background-color .14s,color .14s}
.icon-btn:hover{background:#2a2a2a;color:#fff}

/* ---------- Buttons ---------- */
.button{background:var(--lb-raised);border:1px solid var(--lb-border);color:var(--ink);font-size:12px;border-radius:8px;transition:background-color .14s,border-color .14s,scale .14s}
.button:hover{background:#2d2d2d;border-color:#5a5a5a}
.button:not(:disabled):active{scale:.97}
.button.primary,.button.dark{background:var(--orange);border-color:var(--orange);color:#111}
.button.primary:hover,.button.dark:hover{background:#ff7038;border-color:#ff7038;box-shadow:0 8px 24px #ff5a1f33}
.button.subtle{background:none;border:0;color:#d6d3c9}
.button.subtle:hover{background:#2a2a2a}
.button.ghost{background:transparent;border-color:var(--lb-border);color:#d6d3c9}
.button.ghost:hover{border-color:var(--orange);color:var(--orange-dark)}
.button.danger{color:#ff8a7a;border-color:#5a2b25;background:transparent}
.button.small{font-size:11px}
.download-ready{color:#111}

/* ---------- Tool rail ---------- */
.tool-rail{background:var(--lb-rail);border-right-color:var(--line)}
.tool{color:var(--muted);font-size:11px;font-weight:600}
.tool:hover{background:var(--lb-raised);color:var(--ink)}
.tool.active,.tool.active:hover{background:var(--lb-tint);color:var(--orange-dark)}

/* ---------- Side panel ---------- */
.side-panel{background:var(--lb-surface);border-right-color:var(--line)}
.panel-body{scrollbar-color:#444 transparent}
.panel-footer{border-top-color:var(--line);font-size:11px;color:var(--muted)}
.drop-zone{background:#181818;border:1px dashed #6e584b}
.drop-zone:hover{background:#201a17;border-color:#ff895a}
.drop-icon{background:#2a2a2a;color:var(--orange-dark);box-shadow:none}
.drop-zone strong{font-size:14px}
.drop-zone p{font-size:12px;color:var(--muted)}
.upload-note{font-size:10px;color:var(--lb-dim)}
.control-section,.smart-card{border-top-color:var(--line)}
.control-title label,.control-title span{font-size:12px}
.control-title small{font-size:11px;color:var(--muted)}
.field-label{font-size:12px;color:#c9c6bc}
.photo-tally{font-size:11px;color:var(--muted)}
.photo-tally strong{color:#e6e3da}
.photo-tile{background:var(--lb-raised)}
.photo-tile.selected{border-color:var(--orange);box-shadow:0 0 0 1px var(--orange)}
.photo-tile .photo-num{background:#111c;color:var(--ink);font-size:10px}
.photo-tile .photo-used{background:#7fd49a;color:#111;width:15px;height:15px;font-size:9px}
.photo-caption,.smart-card p,.helper-copy,.image-meta{font-size:12px;color:var(--muted)}
.smart-heading{font-size:14px}
.smart-heading svg{color:var(--orange)}
.check-row{font-size:12px;color:#c9c6bc}
.range-label{font-size:12px}
.range-label output{background:var(--lb-raised);color:#e6e3da;font-size:11px}
.segmented{background:var(--lb-rail);border:1px solid var(--line)}
.segmented button{color:var(--muted);font-size:12px;min-height:34px}
.segmented button.active{background:var(--lb-tint);color:var(--lb-tint-text);box-shadow:inset 0 0 0 1px var(--orange)}
.swatch{border-color:#ffffff38}
.swatch.active:after{border:2px solid var(--orange);inset:-5px}
.layout-choice{background:#222;border-color:#3f3f3f;color:var(--ink)}
.layout-choice:hover{border-color:#8a5a43}
.layout-choice.active{background:var(--lb-tint);border-color:var(--orange);box-shadow:0 0 0 1px var(--orange)}
.layout-choice>span{font-size:11px;color:var(--muted)}
.layout-choice.active>span{color:var(--lb-tint-text)}
.layout-mini{background:#2e2e2e}
.layout-mini i{background:#6d6a62}
.layout-choice.active .layout-mini i{background:#e0895f}
.page-presets button{background:#222;border-color:#3f3f3f;color:var(--ink);font-size:12px}
.page-presets button.active{background:var(--lb-tint);border-color:var(--orange);color:var(--lb-tint-text)}
.text-preset{background:#222;border-color:#3f3f3f;color:var(--ink)}
.text-preset:hover{border-color:#8a5a43}
.text-preset.body{font-size:12px;color:var(--muted)}
.selection-note{background:#222;color:#c9c6bc;border-left:2px solid var(--orange);font-size:12px}
.text-style-row button{background:#222;border-color:#3f3f3f;color:var(--ink)}
.text-style-row button.active{background:var(--lb-tint);border-color:var(--orange);color:var(--lb-tint-text)}
.danger-text{color:#ff8a7a;font-size:12px}
.sort-row select{font-size:13px}
.sort-row .icon-btn{background:var(--lb-raised);border-color:var(--lb-border)}
.layer-row{background:#222;border-color:#3f3f3f;color:var(--ink);font-size:12px}
.layer-row.active{border-color:var(--orange);background:var(--lb-tint)}
.empty-library{color:var(--muted);font-size:12px}
.subtle-link{font-size:12px;color:#d6d3c9;text-decoration-color:#ff5a1f99}

/* ---------- Form fields ---------- */
select,input[type=number],input[type=text],textarea{background-color:var(--lb-field);border-color:#484848;color:var(--ink);caret-color:#ff895a;border-radius:8px}
select:focus,input[type=number]:focus,input[type=text]:focus,textarea:focus{border-color:var(--orange)}
select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23c9c6bc'/%3E%3C/svg%3E")}
select option{background:#1b1b1b;color:#f4f3ee}
input::placeholder,textarea::placeholder{color:var(--lb-dim)}
input[type=range]{background:#3a3a3a}
input[type=range]::-webkit-slider-thumb{border-color:#1b1b1b;box-shadow:0 0 0 1px #ff895a}
input[type=color]::-webkit-color-swatch{border-color:#ffffff38}
.project-heading input{background:none;border:0}

/* ---------- Studio (artwork first: white paper on a dark stage) ---------- */
.studio{background:#111}
.studio-bar{border-bottom-color:#2a2a2a}
.page-breadcrumb{font-size:12px;color:var(--muted)}
.page-breadcrumb #pageLabel{color:var(--ink)}
.book-dot{border-color:var(--orange-dark)}
.tiny-divider{color:#77746c}
.format-pill{font-size:12px;color:#e6e3da;min-height:34px;padding:0 12px;border:1px solid var(--lb-border);border-radius:999px;background:var(--lb-raised)}
.format-pill:hover{border-color:var(--orange)}
.demo-strip{font-size:11px;color:var(--muted)}
.sample-dot{background:var(--orange);width:6px;height:6px}
.demo-strip button{font-size:11px;color:var(--ink);text-decoration-color:#ff5a1f99}
.paper-stage{box-shadow:0 22px 60px #000c,0 2px 6px #0008}
.paper-top-label,.paper-bottom-label{color:var(--lb-dim);font-size:9px}
.paper-top-label span:last-child,.paper-watermark{font-size:8px}
.context-bar{color:var(--muted);font-size:11px}
.context-pill{background:#1f1f1f;border-color:#3a3a3a;box-shadow:0 6px 18px #0007;color:var(--ink)}
.context-pill button.active{background:var(--lb-tint);color:var(--orange-dark)}
.context-label,.context-pill output,.context-note{font-size:11px;color:#c9c6bc}
.context-divider{background:#3a3a3a}
.filmstrip-wrap{background:var(--lb-rail);border-top-color:#2a2a2a}
.filmstrip-label,.filmstrip-label>span>span{font-size:10px;color:var(--muted)}
.filmstrip{scrollbar-color:#444 transparent}
.page-thumb{color:var(--muted)}
.page-thumb canvas{box-shadow:0 3px 10px #0009}
.page-thumb span{font-size:10px}
.page-thumb.active span{color:var(--orange-dark);font-weight:700}
.add-page-thumb{border-color:#4a4a4a;color:var(--muted);font-size:10px}
.add-page-thumb:hover{background:#222;border-color:var(--orange);color:var(--ink)}
.studio-footer{background:var(--lb-rail);border-top-color:#2a2a2a;color:var(--muted);font-size:11px}
.studio-footer .status-dot{background:#7fd49a}
.footer-brand{color:var(--muted);font-size:11px}
.create-return{color:#d6d3c9}
.create-return:hover{color:var(--orange-dark)}

/* ---------- Feedback, overlays and dialogs ---------- */
#toast{background:#202020;color:var(--ink);border:1px solid #55524c;box-shadow:0 18px 50px #0007;font-size:13px}
.drop-overlay{background:#111111f0}
.drop-overlay p{color:var(--muted);font-size:14px}
dialog{background:var(--lb-surface);border-color:#3a3a3a;color:var(--ink);box-shadow:0 25px 100px #0009}
dialog::backdrop{background:#000b}
.modal-body p,.modal-body ul,.modal-body ol{font-size:14px;color:#c9c6bc}
.modal-body h3{font-size:15px}
.modal-actions{background:#161616;border-top-color:var(--line)}
.modal-menu button{border-bottom-color:var(--line);font-size:14px;color:var(--ink)}
.modal-menu button:hover{color:var(--orange-dark)}
.notice{background:#33281d;border-color:#6b5037;color:#f6d5aa;font-size:12px}
.export-option{background:#222;border-color:#3f3f3f;font-size:13px;color:var(--ink)}
.export-option:has(input:checked){background:var(--lb-tint)}
.export-option small{font-size:12px;color:var(--muted)}
.export-warning-list{font-size:12px;color:var(--muted)}
.keyboard-key{background:#2a2a2a;border-color:#444;color:#e6e3da;font-size:11px}
.progress-mark{width:96px;height:36px;margin:0 auto 22px;background:url('/assets/pglab-wordmark.svg') center/contain no-repeat;filter:brightness(0) invert(1);color:transparent;font-size:0}
.progress-mark span{display:none}
#progressModal p{font-size:13px;color:var(--muted)}
progress::-webkit-progress-bar{background:#2a2a2a}
.progress-note{font-size:11px;color:var(--lb-dim)}

/* ---------- Preview mode ---------- */
.preview-mode .studio-bar{background:var(--lb-rail)}
.preview-mode .studio-bar-right .icon-btn{background:var(--lb-raised);border-color:var(--lb-border)}
.preview-mode .paper-top-label,.preview-mode .paper-bottom-label{color:var(--lb-dim)}

/* ---------- Tablet ---------- */
@media(max-width:1150px) and (min-width:761px){.brand-product{display:none}}

/* ---------- Phone ---------- */
@media(max-width:760px){
 .topbar{height:58px;gap:10px}
 .brand{flex-direction:row;align-items:center;gap:10px}
 .brand-product{display:none}
 .context-bar>.context-note{font-size:10.5px}
 .brand>span.brand-mark{width:34px;height:34px;font-size:12px;letter-spacing:-.02em}
 .brand-word{font-size:16px}
 .project-heading input{font-size:13px}
 .save-status{font-size:10px}
 .top-actions .mobile-more{width:40px;height:40px}
 .top-actions .button{height:40px;padding:0 14px}
 .top-actions .button span:after{font-size:12px}
 .tool-rail{background:#151515f5;border-top-color:var(--line);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
 .tool{font-size:10.5px}
 .side-panel{background:var(--lb-surface);border-color:#3a3a3a;box-shadow:0 -14px 50px #000a}
 .panel-head h1{font-size:23px}
 .panel-head .eyebrow{font-size:9px}
 .panel-close{width:40px;height:40px}
 .drop-zone strong{font-size:13px}
 .drop-zone p{font-size:11px}
 .drop-zone .button{height:36px}
 .upload-note{font-size:10px}
 .studio-bar{height:48px}
 .page-breadcrumb{font-size:11px}
 .format-pill{font-size:11px;min-height:32px;padding:0 10px;gap:6px}
 .studio-bar-right .icon-btn{width:36px;height:36px}
 .demo-strip{font-size:10.5px;height:34px}
 .demo-strip button{font-size:10.5px}
 .paper-top-label{font-size:7px}
 .paper-top-label span:last-child,.paper-watermark{font-size:6.5px}
 .paper-bottom-label{font-size:8px}
 .context-note{font-size:10.5px}
 .context-pill .icon-btn{width:36px;height:36px}
 .context-pill output{font-size:10px}
 .filmstrip-label,.filmstrip-label>span>span{font-size:9.5px}
 .strip-actions{gap:2px}
 .strip-actions .icon-btn{width:34px;height:30px}
 .page-thumb span{font-size:9.5px}
 .add-page-thumb{font-size:9.5px}
 .layout-choice>span{font-size:10px}
 #toast{font-size:12px}
 .modal-header h2{font-size:27px}
}
@media(max-width:480px){.brand>span.brand-mark{display:none}}
/* Phone: while a settings sheet is open, the page re-fits above it so edits stay visible */
@media(max-width:760px){
 body.pg-lembar.panel-open>.site-header{display:none}
 body.pg-lembar.panel-open .app{height:100dvh}
 body.pg-lembar.panel-open :is(.demo-strip,.context-bar,.filmstrip-wrap){display:none}
 body.pg-lembar.panel-open .side-panel{max-height:46dvh;animation:lb-sheet .24s cubic-bezier(.2,.8,.2,1)}
 body.pg-lembar.panel-open .panel-body{max-height:calc(46dvh - 70px)}
 body.pg-lembar.panel-open .canvas-area{padding:18px 16px calc(46dvh + 22px)}
}
@keyframes lb-sheet{from{transform:translateY(16px);opacity:0}}
@media(prefers-reduced-motion:reduce){.button,.icon-btn{transition:none}.button:active{scale:none}body.pg-lembar.panel-open .side-panel{animation:none}}