:root{
  --ps-pink:#f282a8;
  --ps-pink-dark:#d94f7d;
  --ps-pink-light:#fff0f5;
  --ps-border:#f1d7e1;
  --ps-text:#332532;
  --ps-muted:#8f7885;
  --ps-bg:#fff8fb;
}
#planner-studio-app.ps-app{
  position:relative; width:100%; height:92vh; min-height:600px; max-height:1400px;
  display:flex; flex-direction:column;
  background:#fff; color:var(--ps-text); font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  border:1px solid var(--ps-border); border-radius:18px;
  box-shadow:0 12px 40px rgba(242,130,168,.12);
}
/* ΤΡΙΤΗ απόπειρα σε "fullscreen" (v0.26 CSS position:fixed, v0.42 browser
   Fullscreen API, v0.44 DOM-relocation) — και οι τρεις είχαν προβλήματα, η πιο
   πρόσφατη μάλιστα έσπασε βασική πλοήγηση (κουμπί BACK/λογότυπο δεν
   δούλευαν). Αποφασίστηκε να ΜΗΝ ξαναδοκιμαστεί άμεσα — η αξιοπιστία της
   βασικής πλοήγησης είναι πιο σημαντική. Το app είναι ξανά απλό, κανονικό
   μπλοκ μέσα στη σελίδα. Η πιο αξιόπιστη εναλλακτική για να κρύψεις το
   WordPress/theme chrome γύρω από τον editor παραμένει σε επίπεδο WordPress
   (WoodMart "Options for pages": Disable footer/pre-footer/Page title, ή
   custom minimal header για τη συγκεκριμένη σελίδα) — εξηγήθηκε στον χρήστη. */
.ps-loading{padding:40px;text-align:center;color:var(--ps-muted)}
.ps-login-required{padding:60px;text-align:center;background:var(--ps-pink-light);border-radius:18px}
.ps-topbar{
  flex-shrink:0;display:flex;flex-direction:column;
  border-bottom:1px solid var(--ps-border);background:#fff;
  border-radius:18px 18px 0 0;
}
.ps-topbar-row{display:flex;align-items:center;gap:12px;padding:0 20px;height:44px;overflow-x:auto;overflow-y:hidden}
.ps-topbar-row1{height:60px;border-bottom:1px solid #f3e6ec;display:grid;grid-template-columns:1fr auto 1fr;align-items:center}
.ps-topbar-row1-left{display:flex;align-items:center;gap:12px;overflow:hidden}
.ps-topbar-row1-right{display:flex;justify-content:flex-end;overflow:hidden}
.ps-topbar .ps-btn{flex-shrink:0}
.ps-icon-only{padding:9px 12px;font-size:16px;line-height:1}
.ps-logo{font-size:21px;font-weight:800;color:var(--ps-pink-dark);white-space:nowrap;text-decoration:none;cursor:pointer}
.ps-title-block{display:flex;flex-direction:row;align-items:center;gap:10px}
.ps-project-name{min-width:180px;padding:9px 12px;border:1px solid var(--ps-border);border-radius:9px;background:#fff;text-align:center}
.ps-size-label{font-size:11px;color:var(--ps-muted);padding:8px 10px;border:1px solid var(--ps-border);border-radius:9px;background:#fff;white-space:nowrap}
.ps-preview-date{padding:8px;border:1px solid var(--ps-border);border-radius:9px;color:var(--ps-muted);background:#fff;width:105px;box-sizing:border-box}
.ps-spacer{flex:1}.ps-status{font-size:12px;color:#6f6270;white-space:nowrap}
.ps-btn{border:1px solid var(--ps-border);background:#fff;color:var(--ps-text);border-radius:9px;padding:10px 14px;cursor:pointer;font-weight:600}
/* Τα κουμπιά ενεργειών στο topbar (Save/Generate/Preview/Preflight/Export κ.λπ.)
   — όλα light pink, πιο κοντά κουτιά, πιο rounded, ίδια εμφάνιση μεταξύ τους
   (χωρίς να αλλάξει η βασική .ps-btn που χρησιμοποιείται σε όλη την εφαρμογή). */
.ps-topbar-row2 .ps-btn{background:var(--ps-pink-light);border-color:var(--ps-border);color:var(--ps-pink-dark);padding:7px 14px;border-radius:14px}
.ps-topbar-row2 .ps-btn:hover{background:var(--ps-pink);color:#fff;border-color:var(--ps-pink)}
.ps-btn:hover{background:var(--ps-pink-light)}
.ps-btn-primary{background:var(--ps-pink);border-color:var(--ps-pink);color:#fff}
.ps-btn-primary:hover{background:var(--ps-pink-dark);color:#fff}
.ps-btn-small{padding:6px 12px;font-size:11px;border-radius:20px}
.ps-btn-pink-light{background:var(--ps-pink-light);border-color:var(--ps-border);color:var(--ps-pink-dark)}
.ps-btn-pink-light:hover{background:var(--ps-pink);color:#fff;border-color:var(--ps-pink)}
.ps-color-palette{display:flex;flex-wrap:wrap;gap:4px;margin-top:6px;margin-bottom:10px}
.ps-color-swatch{width:12px;height:12px;flex:0 0 12px;border-radius:50%;border:1px solid var(--ps-border);cursor:pointer;padding:0;box-sizing:border-box}
.ps-color-swatch:hover{transform:scale(1.15)}
.ps-color-swatch:hover{border-color:var(--ps-pink);transform:scale(1.08)}
.ps-workspace{display:grid;grid-template-columns:auto minmax(400px,1fr) 300px;flex:1 1 auto;min-height:0;overflow:hidden;background:#fff7fa}
.ps-search{width:100%;box-sizing:border-box;padding:10px 12px;border:1px solid var(--ps-border);border-radius:9px;margin-bottom:14px}
.ps-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.ps-card{border:1px solid var(--ps-border);border-radius:12px;padding:10px;background:#fff;cursor:pointer}
.ps-card:hover{border-color:var(--ps-pink);box-shadow:0 5px 15px rgba(242,130,168,.12)}
.ps-card-preview{height:110px;border-radius:8px;background:linear-gradient(145deg,#fff,#ffeef4);display:flex;align-items:center;justify-content:center;color:var(--ps-pink-dark);font-weight:800;font-size:12px;text-align:center}
.ps-card-title{font-size:12px;margin-top:8px;font-weight:700}
.ps-canvas-wrap{position:relative;overflow:hidden;min-height:0;background:#f6edf1}
/* Ξεχωριστό, εσωτερικό scrollable wrapper — ΜΟΝΟ αυτό κάνει scroll. Το ίδιο το
   .ps-canvas-wrap πλέον ΔΕΝ scrollάρει, ώστε τα floating στοιχεία (zoom
   controls, floating tabs) που είναι position:absolute μέσα του να μένουν
   ΠΑΝΤΑ στην ίδια ορατή θέση (π.χ. κάτω-κέντρο) — πριν "έφευγαν" μαζί με το
   περιεχόμενο όταν έκανες scroll, αφού ήταν μέσα στο ΙΔΙΟ scrollable container. */
.ps-canvas-scroll{position:absolute;inset:0;overflow:auto;display:flex;align-items:flex-start;justify-content:center;padding:20px;-webkit-overflow-scrolling:touch}
.ps-ruler-grid{display:grid;grid-template-columns:16px auto;grid-template-rows:16px auto}
.ps-ruler-corner{grid-column:1;grid-row:1;background:#fff;border-right:1px solid var(--ps-border);border-bottom:1px solid var(--ps-border)}
.ps-ruler-h{grid-column:2;grid-row:1;position:relative;overflow:hidden;background:#fff;border-bottom:1px solid var(--ps-border)}
.ps-ruler-v{grid-column:1;grid-row:2;position:relative;overflow:hidden;background:#fff;border-right:1px solid var(--ps-border)}
.ps-ruler-tick-h{position:absolute;top:0;width:1px;height:5px;background:#e3d2da;overflow:visible}
.ps-ruler-tick-h.major{height:9px;background:#c9adba}
.ps-ruler-tick-h.major .ps-ruler-hlabel{position:absolute;left:2px;top:-1px;font-size:8px;color:#b9a7b1;white-space:nowrap}
.ps-ruler-tick-v{position:absolute;left:0;width:5px;height:1px;background:#e3d2da;overflow:visible}
.ps-ruler-tick-v.major{width:9px;background:#c9adba}
.ps-ruler-tick-v.major .ps-ruler-vlabel{position:absolute;left:11px;top:-5px;font-size:8px;color:#b9a7b1;white-space:nowrap}
.ps-canvas-shell{background:#fff;box-shadow:0 12px 30px rgba(53,25,40,.16);position:relative;touch-action:none}
/* Η συνοδευτική μικρογραφία (spread view) τοποθετείται με ΡΗΤΕΣ απόλυτες
   συντεταγμένες (left/right/top υπολογισμένα στο JS) αντί για flex — πιο
   αξιόπιστο, αποφεύγει edge cases με το internal canvas-container του Fabric.js
   ή το πώς τα <img> συμπεριφέρονται μέσα σε flex containers. */
.ps-spread-companion{position:absolute;top:0;opacity:.5;filter:grayscale(.15);border:1px dashed var(--ps-border);pointer-events:none;box-sizing:border-box}
#ps-canvas{display:block}
.ps-right{border-left:1px solid var(--ps-border);background:#fff;min-height:0;display:flex;flex-direction:column}
#ps-right-content.ps-form{flex:1;overflow-y:auto;min-height:0}
.ps-right-footer{
  flex-shrink:0; display:flex; gap:8px; padding:12px 16px; border-top:1px solid var(--ps-border);
  background:#fff;
}
.ps-right-footer .ps-btn{flex:1;padding:10px 6px;font-size:11px}

/* Floating tabs (Πρότυπα/Στοιχεία/Σελίδα/Στοιχείο/Επίπεδα) — κάτω-κέντρο πάνω
   από το canvas, ελέγχουν το περιεχόμενο του δεξιού sidebar. */
.ps-floating-tabs{
  position:absolute; left:50%; bottom:16px; transform:translateX(-50%); z-index:5;
  display:flex; gap:4px; background:#fff; padding:6px; border-radius:14px;
  border:1px solid var(--ps-border); box-shadow:0 8px 24px rgba(53,25,40,.14);
}
.ps-floating-tab{
  border:0; background:transparent; cursor:pointer; color:var(--ps-muted); font-weight:700;
  font-size:11px; padding:9px 14px; border-radius:10px;
}
.ps-floating-tab.active{ background:var(--ps-pink); color:#fff; }
.ps-floating-tab:hover:not(.active){ background:var(--ps-pink-light); }
.ps-form{padding:16px}
.ps-field{margin-bottom:14px}.ps-field label{display:block;font-size:12px;font-weight:700;margin-bottom:6px;color:#6f5d68}
.ps-field input,.ps-field select{width:100%;box-sizing:border-box;padding:9px;border:1px solid var(--ps-border);border-radius:8px;background:#fff}
.ps-field-row{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.ps-section-title{font-size:13px;font-weight:800;margin:18px 0 10px;color:#4d3944}
.ps-toggle-row{display:flex;justify-content:space-between;align-items:center;margin:9px 0;font-size:12px}
.ps-toggle{accent-color:var(--ps-pink)}

/* ---------- Pages sidebar (αριστερή στήλη, μικρές κάθετες κάρτες σελίδων) ---------- */
.ps-pages-sidebar{
  width:150px; flex-shrink:0; border-right:1px solid var(--ps-border); background:#fff;
  overflow-y:auto; min-height:0; box-sizing:border-box; padding:12px; transition:width .15s ease;
  display:flex; flex-direction:column; gap:10px;
}
.ps-pages-sidebar.is-collapsed{ width:38px; padding:12px 6px; overflow:hidden; }
.ps-pages-sidebar.is-collapsed .ps-pages,.ps-pages-sidebar.is-collapsed .ps-page-count{ display:none; }
.ps-pages-head{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.ps-pages-head strong{font-size:12px;flex:1}
.ps-pages-head .ps-status{font-size:10px;width:100%;color:var(--ps-muted)}
.ps-pages{display:flex;flex-direction:column;gap:8px}
.ps-page-thumb{width:100%;border:1px solid var(--ps-border);border-radius:10px;padding:6px;background:#fff;cursor:pointer;box-sizing:border-box;position:relative}
.ps-thumb-remove{position:absolute;top:4px;right:4px;width:16px;height:16px;border-radius:50%;border:0;background:#fff;color:var(--ps-muted);font-size:9px;line-height:16px;text-align:center;padding:0;cursor:pointer;box-shadow:0 1px 3px rgba(0,0,0,.15);z-index:1}
.ps-thumb-remove:hover{background:var(--ps-pink);color:#fff}
.ps-page-thumb.active{border:2px solid var(--ps-pink);background:var(--ps-pink-light)}
.ps-thumb-paper{height:60px;background:#fff;border:1px solid #eee;display:flex;align-items:center;justify-content:center;font-size:9px;text-align:center;color:#7d6873}
.ps-thumb-label{font-size:10px;margin-top:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ps-modal-backdrop{position:fixed;inset:0;background:rgba(40,20,30,.35);display:flex;align-items:center;justify-content:center;z-index:99999}
.ps-modal{width:min(620px,92vw);background:#fff;border-radius:18px;padding:24px;box-shadow:0 30px 80px rgba(0,0,0,.2)}
.ps-modal h2{margin:0 0 18px;color:var(--ps-pink-dark)}
.ps-options{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.ps-option{border:1px solid var(--ps-border);border-radius:12px;padding:14px;cursor:pointer}
.ps-option.selected{border:2px solid var(--ps-pink);background:var(--ps-pink-light)}
.ps-option strong{display:block}.ps-option span{font-size:11px;color:var(--ps-muted)}
.ps-notice{background:var(--ps-pink-light);border:1px solid var(--ps-border);border-radius:10px;padding:12px;font-size:12px;line-height:1.5}

/* ---------- Toggle pills (Επιλογές Planner modal) — ροζ κουμπιά αντί για plain checkboxes ---------- */
.ps-toggle-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:10px 0}
.ps-toggle-pill{
  display:flex;align-items:center;gap:6px;padding:10px 12px;border-radius:10px;
  border:1.5px solid var(--ps-border);background:#fff;cursor:pointer;font-size:12px;
  font-weight:700;color:var(--ps-text);transition:background .12s ease,border-color .12s ease,color .12s ease;
  user-select:none;
}
.ps-toggle-pill input{ position:absolute; opacity:0; width:0; height:0; }
.ps-toggle-pill:has(input:checked){ background:var(--ps-pink); border-color:var(--ps-pink); color:#fff; }
.ps-toggle-pill:hover{ border-color:var(--ps-pink); }
@media(max-width:1100px){
  .ps-workspace{grid-template-columns:auto minmax(380px,1fr) 260px}
}
/* 11" iPad Pro portrait = 834px CSS width — έπρεπε να μείνει χρηστικό, όχι να
   εξαφανιστούν τα side panels. Στενεύουν αντί να κρύβονται. */
@media(max-width:900px){
  .ps-workspace{grid-template-columns:auto minmax(300px,1fr) 208px}
  .ps-pages-sidebar{width:120px}
}
/* Μόνο πραγματικά στενές (τηλέφωνο) οθόνες κρύβουν τα panels — όχι iPad Pro. */
@media(max-width:700px){
  .ps-workspace{grid-template-columns:1fr}
  .ps-pages-sidebar,.ps-right{display:none}
}

/* ---------- Weekly 2-page toggle ---------- */
.ps-weekly-toggle{
  position:absolute; top:8px; left:50%; transform:translateX(-50%); z-index:2;
  display:none; gap:6px; background:#fff; padding:4px; border-radius:10px;
  border:1px solid var(--ps-border); box-shadow:0 2px 8px rgba(0,0,0,.06);
}
.ps-weekly-toggle .ps-btn{ padding:6px 14px; font-size:12px; }

/* ---------- Page Manager (#6) — ομάδες από κάθετες κάρτες, στη νέα στενή στήλη ---------- */
.ps-page-group{ display:flex; flex-direction:column; gap:8px; }
.ps-page-group-head{ font-size:10px; font-weight:700; text-transform:uppercase; color:var(--ps-muted); letter-spacing:.03em; }
.ps-page-group-head .ps-count{ font-weight:400; text-transform:none; color:#b9a7b1; }
.ps-expand-more{ font-size:10px; padding:6px; color:var(--ps-pink-dark); border-style:dashed; width:100%; }
.ps-edited-dot{ color:var(--ps-pink); margin-right:3px; }

.ps-page-edit-bar{
  position:absolute; top:8px; left:50%; transform:translateX(-50%); z-index:3;
  display:none; align-items:center; gap:8px; background:#fff; padding:6px 10px; border-radius:10px;
  border:1px solid var(--ps-border); box-shadow:0 2px 8px rgba(0,0,0,.08); font-size:12px; max-width:90%;
}
.ps-edit-bar-label{ white-space:nowrap; }
.ps-page-edit-bar .ps-btn{ padding:5px 10px; font-size:11px; white-space:nowrap; }

/* ---------- Preflight Check (#8) ---------- */
.ps-preflight-overlay{
  display:none; position:fixed; inset:0; z-index:1000000; background:rgba(30,20,25,.45);
  align-items:center; justify-content:center;
}
.ps-preflight-box{
  background:#fff; border-radius:14px; width:min(560px,90vw); max-height:80vh;
  display:flex; flex-direction:column; box-shadow:0 12px 40px rgba(0,0,0,.25); overflow:hidden;
}
/* Το περιεχόμενο ΚΑΘΕ modal που μοιράζεται αυτό το κουτί (Περιεχόμενο Planner,
   Εξαγωγή PDF, Ημερήσιο Πρόγραμμα κ.λπ.) πρέπει να scrollάρει ΜΟΝΟ του —
   αλλιώς σε μικρότερη οθόνη το κάτω κουμπί (π.χ. "ΔΗΜΙΟΥΡΓΙΑ PLANNER") μπορεί
   να κοπεί εντελώς εκτός της ορατής, μη-scrollάρισμης 80vh περιοχής του κουτιού. */
.ps-preflight-box > div:not(.ps-preflight-head){ overflow-y:auto; flex:1; min-height:0; }
.ps-preflight-head{ display:flex; align-items:center; justify-content:space-between; padding:14px 18px; border-bottom:1px solid var(--ps-border); }
.ps-preflight-head .ps-btn{ padding:4px 10px; }
.ps-pf-summary{ display:flex; gap:8px; padding:12px 18px; flex-wrap:wrap; }
.ps-pf-ok{ padding:16px 18px; color:#2e8b57; font-weight:600; }
.ps-pf-badge{ font-size:12px; padding:4px 10px; border-radius:20px; font-weight:600; }
.ps-pf-badge.ps-pf-error{ background:#fde3e3; color:#c62828; }
.ps-pf-badge.ps-pf-warning{ background:#fff3d6; color:#a06400; }
.ps-pf-badge.ps-pf-info{ background:#e3eefd; color:#2a5db0; }
.ps-preflight-list{ overflow-y:auto; padding:0 18px 18px; display:flex; flex-direction:column; gap:8px; }
.ps-pf-item{ font-size:13px; padding:10px 12px; border-radius:8px; border-left:3px solid transparent; background:#faf7f8; }
.ps-pf-item.ps-pf-error{ border-color:#c62828; }
.ps-pf-item.ps-pf-warning{ border-color:#a06400; }
.ps-pf-item.ps-pf-info{ border-color:#2a5db0; }

/* ---------- Export progress (#10) ---------- */
.ps-progress-track{ height:10px; border-radius:6px; background:#f0e4ea; overflow:hidden; }
.ps-progress-fill{ height:100%; background:var(--ps-pink); transition:width .4s ease; }
/* Όσο είναι "Στην ουρά" (πριν αρχίσει πραγματική πρόοδος σελίδων, οπότε το %
   μένει στο 0), ένα ζωντανό pulse δείχνει ότι κάτι συμβαίνει ακόμα — αλλιώς η
   μπάρα φαίνεται σαν να έχει κολλήσει. */
.ps-progress-fill.is-queued{ width:100% !important; animation:ps-progress-pulse 1.4s ease-in-out infinite; }
@keyframes ps-progress-pulse{ 0%,100%{opacity:.25} 50%{opacity:.7} }

/* ---------- Undo/Redo ---------- */
.ps-btn:disabled{ opacity:0.4; cursor:not-allowed; }
.ps-btn:disabled:hover{ background:#fff; }

/* ---------- Planner Preview ---------- */
.ps-preview-box{
  background:#fff; border-radius:14px; width:min(680px,92vw); max-height:92vh;
  display:flex; flex-direction:column; box-shadow:0 12px 40px rgba(0,0,0,.25); overflow:hidden;
}
.ps-preview-body{ display:flex; align-items:center; justify-content:center; gap:14px; padding:20px; flex:1; min-height:0; }
.ps-preview-body .ps-btn{ font-size:20px; padding:10px 16px; flex-shrink:0; }
.ps-preview-imgwrap{ position:relative; flex:1; display:flex; align-items:center; justify-content:center; min-height:0; max-height:70vh; }
.ps-preview-imgwrap img{ max-width:100%; max-height:70vh; box-shadow:0 6px 24px rgba(0,0,0,.18); border-radius:2px; transition:opacity .15s ease; }
.ps-preview-loading{
  position:absolute; inset:0; display:none; align-items:center; justify-content:center;
  font-size:13px; color:#a893a0;
}
.ps-preview-footer{ text-align:center; padding:10px 18px 18px; font-size:13px; color:#7c6671; }

/* ---------- Home Screen ---------- */
.ps-home{ min-height:100vh; background:#fdf7f9; }
.ps-home-topbar{ display:flex; align-items:center; padding:16px 32px; background:#fff; border-bottom:1px solid var(--ps-border); }
.ps-home-user{ font-weight:600; color:var(--ps-text); font-size:14px; }
.ps-home-hero{
  margin:28px 32px; padding:48px 44px; border-radius:20px;
  background:linear-gradient(135deg,#fdeef3,#fbe0ea);
}
.ps-home-hero-text{ max-width:560px; }
.ps-home-eyebrow{ font-size:11px; font-weight:700; letter-spacing:.08em; color:#c94372; margin-bottom:10px; }
.ps-home-hero h1{ font-family:Georgia,serif; font-size:34px; line-height:1.2; margin:0 0 14px; color:#342630; }
.ps-home-hero p{ color:#7c6671; font-size:14px; margin:0 0 22px; }
.ps-home-cta{ font-size:14px; padding:13px 22px; }
.ps-home-section{ margin:32px; }
.ps-active-job-card{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  margin:0 32px 16px; padding:12px 16px; background:var(--ps-pink-light);
  border:1px solid var(--ps-border); border-radius:12px;
}
.ps-active-job-info{ display:flex; flex-direction:column; gap:2px; font-size:13px; }
.ps-active-job-info span{ color:var(--ps-muted); font-size:12px; }
.ps-home-section-head{ margin-bottom:14px; font-size:15px; }
.ps-home-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:16px; }
.ps-home-card{
  position:relative; background:#fff; border:1px solid var(--ps-border); border-radius:14px;
  padding:20px 16px; cursor:pointer; transition:box-shadow .15s ease, transform .15s ease;
}
.ps-home-card:hover{ box-shadow:0 8px 20px rgba(53,25,40,.12); transform:translateY(-2px); }
.ps-home-card-thumb{ font-size:32px; margin-bottom:10px; }
.ps-home-card-title{ font-weight:700; font-size:14px; color:var(--ps-text); margin-bottom:4px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; line-height:1.3; }
.ps-home-card-meta{ font-size:11px; color:#a893a0; }
.ps-home-card-delete{
  position:absolute; top:10px; right:10px; border:none; background:#fff; border-radius:8px;
  width:28px; height:28px; cursor:pointer; opacity:0; transition:opacity .15s ease; font-size:13px;
}
.ps-home-card:hover .ps-home-card-delete{ opacity:1; }
.ps-home-card-delete:hover{ background:#fde3e3; }

/* ---------- Element panel action row (πάνω-πάνω, 3 κουμπιά) ---------- */


/* ---------- Zoom controls ---------- */
.ps-zoom-controls{
  position:absolute; bottom:12px; right:16px; z-index:4;
  display:flex; align-items:center; gap:6px; background:#fff; padding:5px 8px;
  border-radius:10px; border:1px solid var(--ps-border); box-shadow:0 2px 8px rgba(0,0,0,.08);
}
.ps-zoom-controls .ps-icon-only{ padding:4px 10px; font-size:16px; }
.ps-zoom-controls .ps-btn{ padding:5px 10px; font-size:11px; }
#ps-zoom-label{ font-size:12px; color:var(--ps-muted); min-width:38px; text-align:center; }