/* MDTV NewsCard v9 — 3-Panel Layout */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
:root{
  --s0:#04080f;--s1:#080e1a;--s2:#0c1422;--s3:#101b2e;--s4:#152038;--s5:#1a2742;
  --b1:rgba(255,255,255,0.05);--b2:rgba(255,255,255,0.08);--b3:rgba(255,255,255,0.12);
  --t1:#f0f6ff;--t2:#8ba3c7;--t3:#3d5a80;
  --blue:#3b82f6;--blue-dark:#1d4ed8;--blue-dim:rgba(59,130,246,0.12);--blue-glow:rgba(59,130,246,0.3);--blue-border:rgba(59,130,246,0.35);
  --green:#10b981;--green-dim:rgba(16,185,129,0.12);--green-border:rgba(16,185,129,0.3);
  --amber:#f59e0b;--amber-dim:rgba(245,158,11,0.12);--red:#ef4444;--red-dim:rgba(239,68,68,0.12);
  --purple:#8b5cf6;--purple-dim:rgba(139,92,246,0.12);
  --r1:5px;--r2:8px;--r3:12px;
  --left-w:360px;--right-w:400px;--nav-h:46px;
  --ease:cubic-bezier(0.4,0,0.2,1);--dur:0.15s;
  --border:rgba(255,255,255,0.08);--border2:rgba(255,255,255,0.12);
  --text:#f0f6ff;--text-muted:#8ba3c7;--text-dim:#3d5a80;
  --bg-input:#101b2e;--bg-deep:#0c1422;--radius-lg:12px;
  --panel-w:300px;
}
html,body{height:100%;overflow:hidden;background:var(--s0);color:var(--t1);font-family:-apple-system,BlinkMacSystemFont,'Inter','Segoe UI',system-ui,sans-serif;font-size:12px;line-height:1.45;-webkit-font-smoothing:antialiased}
.app{display:flex;flex-direction:column;height:100vh;overflow:hidden}
.main-body{display:flex;flex:1;overflow:hidden}

/* NAV */
.topnav{display:flex;align-items:center;gap:8px;height:var(--nav-h);padding:0 10px;background:var(--s1);border-bottom:1px solid var(--b1);flex-shrink:0;position:relative;z-index:200;overflow:visible}
.topnav-brand{display:flex;align-items:center;gap:5px;flex-shrink:0}
.brand-icon{font-size:16px}
.brand-name{font-size:12px;font-weight:800;background:linear-gradient(135deg,#60a5fa,#a78bfa);-webkit-background-clip:text;-webkit-text-fill-color:transparent;white-space:nowrap}
.brand-sub{-webkit-text-fill-color:initial;color:var(--blue)}
.canvas-size-badge{font-size:9px;color:var(--t3);background:var(--s3);padding:2px 6px;border-radius:20px;border:1px solid var(--b2);flex-shrink:0}
.mode-tabs{display:flex;gap:2px;padding:3px;background:var(--s0);border-radius:var(--r2);border:1px solid var(--b2);flex-shrink:0}
.mode-tab{display:inline-flex;align-items:center;gap:3px;padding:3px 8px;border:none;border-radius:var(--r1);cursor:pointer;font-size:10px;font-weight:600;background:transparent;color:var(--t3);transition:all var(--dur) var(--ease);white-space:nowrap;font-family:inherit}
.mode-tab:hover{color:var(--t2);background:var(--s3)}
.mode-tab.active{background:linear-gradient(135deg,var(--blue-dark),var(--blue));color:#fff;box-shadow:0 2px 8px var(--blue-glow)}
.topnav-actions{display:flex;align-items:center;gap:4px;margin-left:auto;flex-shrink:0}
.nav-template-slot{display:flex;align-items:center;gap:6px;flex:1;min-width:0;justify-content:flex-start}
.nav-tpl-label{font-size:10px;color:var(--t3);font-weight:600;white-space:nowrap;flex-shrink:0}
.nav-tpl-wrap{display:flex;gap:4px;flex:1;max-width:420px;min-width:0}
.nav-tpl-wrap select{flex:1;font-size:11px;min-width:0;background:var(--s3);color:var(--t1);border:1px solid var(--blue-border);border-radius:var(--r1);padding:4px 24px 4px 8px;cursor:pointer;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%233d5a80'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 8px center;font-family:inherit}
.nav-tpl-wrap select:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 2px var(--blue-dim)}
#navCategorySelect{flex:0 0 130px;font-size:10px}

/* PANELS */
.panel{display:flex;flex-direction:column;background:var(--s1);overflow:hidden}
.panel.hidden{display:none!important}
/* Generic hidden utility — used by panel switching in v10.js */
.hidden{display:none!important}
.left-panel{width:var(--left-w);min-width:var(--left-w);border-right:1px solid var(--b1)}
.right-panel{width:var(--right-w);min-width:var(--right-w);border-left:1px solid var(--b1)}
.panel-scroll{flex:1;overflow-y:auto;overflow-x:hidden;padding:5px;scrollbar-width:thin;scrollbar-color:var(--b3) transparent}
.panel-scroll::-webkit-scrollbar{width:3px}
.panel-scroll::-webkit-scrollbar-thumb{background:var(--b3);border-radius:2px}

/* LEFT CONTENT */
.content-panel-header{display:flex;align-items:center;justify-content:space-between;padding:6px 8px;margin-bottom:4px;border-bottom:1px solid var(--b1)}
.cp-title{font-size:11px;font-weight:700;color:var(--t2);text-transform:uppercase;letter-spacing:1px}
.content-field{background:var(--s2);border-radius:var(--r2);border:1px solid var(--b1);padding:8px 9px 10px;margin-bottom:4px;transition:border-color var(--dur)}
.content-field:hover{border-color:var(--b2)}
.field-label{display:flex;align-items:center;justify-content:space-between;font-size:10px;font-weight:700;color:var(--t3);text-transform:uppercase;letter-spacing:1px;margin-bottom:6px}

/* CANVAS */
.canvas-area{flex:1;display:flex;flex-direction:column;align-items:stretch;background:radial-gradient(ellipse at center,var(--s2) 0%,var(--s0) 100%);overflow:hidden;position:relative}
.canvas-wrap{flex:1;position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden}
canvas#mainCanvas{cursor:crosshair;max-width:calc(100vw - var(--left-w) - var(--right-w,0px) - 24px);max-height:calc(100vh - var(--nav-h) - 40px);box-shadow:0 0 0 1px var(--b2),0 20px 60px rgba(0,0,0,0.8);border-radius:var(--r1);display:block}
.canvas-bottom-bar{display:flex;align-items:center;justify-content:space-between;padding:5px 10px;background:var(--s1);border-top:1px solid var(--b1);flex-shrink:0;gap:6px;height:36px}
.cbb-left,.cbb-right{display:flex;align-items:center;gap:5px}
.db-slide-panel{position:absolute;bottom:36px;left:0;right:0;background:var(--s2);border-top:1px solid var(--b2);padding:12px 14px;z-index:100;box-shadow:0 -8px 32px rgba(0,0,0,0.5)}
.db-panel-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}

/* RIGHT PANEL TABS */
.rp-tabs{display:flex;border-bottom:1px solid var(--b1);flex-shrink:0;background:var(--s2)}
.rp-tab{flex:1;padding:7px 4px;font-size:9px;font-weight:700;color:var(--t3);background:transparent;border:none;cursor:pointer;text-transform:uppercase;letter-spacing:0.5px;transition:all var(--dur) var(--ease);border-bottom:2px solid transparent;white-space:nowrap;font-family:inherit}
.rp-tab:hover{color:var(--t2);background:var(--s3)}
.rp-tab.active{color:var(--blue);border-bottom-color:var(--blue);background:var(--blue-dim)}
.rp-panel{display:none;flex:1;overflow:hidden;flex-direction:column}
.rp-panel.active{display:flex}
.rp-panel>.panel-scroll{flex:1}

/* BUTTONS */
.btn{display:inline-flex;align-items:center;gap:4px;padding:5px 11px;border:none;border-radius:var(--r1);cursor:pointer;font-size:11px;font-weight:600;transition:all var(--dur) var(--ease);white-space:nowrap;font-family:inherit}
.btn:active{transform:scale(0.97)}
.btn-primary{background:linear-gradient(135deg,var(--blue-dark),var(--blue));color:#fff;box-shadow:0 2px 8px var(--blue-glow)}
.btn-primary:hover{filter:brightness(1.08)}
.btn-success{background:linear-gradient(135deg,#065f46,var(--green));color:#fff}
.btn-success:hover{filter:brightness(1.1)}
.btn-danger{background:linear-gradient(135deg,#7f1d1d,var(--red));color:#fff}
.btn-ghost{background:var(--s4);color:var(--t2);border:1px solid var(--b2)}
.btn-ghost:hover{background:var(--s5);color:var(--t1);border-color:var(--b3)}
.btn-amber{background:linear-gradient(135deg,#78350f,var(--amber));color:#fff}
.btn-purple{background:linear-gradient(135deg,#4c1d95,var(--purple));color:#fff}
.btn-sm{padding:3px 8px;font-size:10px}
.btn-icon{width:24px;height:24px;padding:0;display:inline-flex;align-items:center;justify-content:center;background:var(--s4);color:var(--t2);border:1px solid var(--b2);border-radius:var(--r1);cursor:pointer;font-size:11px;flex-shrink:0;transition:all var(--dur) var(--ease)}
.btn-icon:hover{background:var(--blue-dim);border-color:var(--blue-border);color:var(--blue)}
.btn-icon-sm{background:var(--s3);color:var(--t3);border:1px solid var(--b1);border-radius:4px;width:20px;height:20px;cursor:pointer;font-size:10px;display:inline-flex;align-items:center;justify-content:center;transition:all var(--dur) var(--ease);flex-shrink:0}
.btn-icon-sm:hover{background:var(--s5);color:var(--t1);border-color:var(--b3)}

/* ACCORDION */
.sec{border-radius:var(--r2);margin-bottom:3px;overflow:hidden;border:1px solid var(--b1);background:var(--s2);transition:border-color var(--dur) var(--ease)}
.sec:hover{border-color:var(--b2)}
.sec-head{display:flex;align-items:center;justify-content:space-between;padding:7px 10px;cursor:pointer;user-select:none;transition:background var(--dur) var(--ease)}
.sec-head:hover{background:var(--s3)}
.sec-head h3{margin:0;font-size:10px;font-weight:700;color:var(--t3);text-transform:uppercase;letter-spacing:1.2px;display:flex;align-items:center;gap:5px}
.sec-head .arrow{font-size:9px;color:var(--t3);width:15px;height:15px;border-radius:50%;background:var(--s4);border:1px solid var(--b2);display:flex;align-items:center;justify-content:center;transition:transform 0.2s var(--ease),background 0.2s;flex-shrink:0}
.sec-head.open{border-bottom:1px solid var(--b1);background:var(--s3)}
.sec-head.open h3{color:var(--blue)}
.sec-head.open .arrow{transform:rotate(180deg);background:var(--blue-dim);color:var(--blue)}
.sec-body{padding:0 9px;max-height:0;overflow:hidden;transition:max-height 0.35s var(--ease),padding 0.2s;will-change:max-height}
.sec-body.open{max-height:5000px;padding:8px 9px 12px}
.subsec{background:var(--s3);border-radius:var(--r1);padding:6px 9px;margin-top:5px;border:1px solid var(--b1)}
.subsec-title{font-size:9px;font-weight:700;color:var(--amber);text-transform:uppercase;letter-spacing:1.2px;margin-bottom:4px}

/* FORM */
input[type=text],input[type=date],input[type=url],textarea,select{width:100%;padding:5px 8px;background:var(--s3);color:var(--t1);border:1px solid var(--b2);border-radius:var(--r1);font-size:11px;outline:none;transition:border-color var(--dur),box-shadow var(--dur);font-family:inherit}
input[type=text]:focus,input[type=url]:focus,textarea:focus,select:focus{border-color:var(--blue-border);box-shadow:0 0 0 2px var(--blue-dim)}
textarea{resize:vertical;min-height:56px;font-size:12px;line-height:1.5}
select{cursor:pointer;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%233d5a80'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 8px center;padding-right:24px}
input[type=color]{width:30px;height:24px;border:1px solid var(--b2);border-radius:var(--r1);cursor:pointer;padding:2px;background:var(--s3);flex-shrink:0}
input[type=range]{flex:1;height:3px;accent-color:var(--blue);cursor:pointer;min-height:18px}
input[type=checkbox]{accent-color:var(--blue);width:13px;height:13px;cursor:pointer}
.row{display:flex;gap:4px;align-items:center;margin:2px 0}
.row label{white-space:nowrap;min-width:48px;font-size:10px;color:var(--t3);font-weight:500}
.numbox{width:42px;min-width:42px;text-align:center;padding:3px 2px;background:var(--s4);color:var(--t1);border:1px solid var(--b2);border-radius:var(--r1);font-size:10px}
.colrow{display:flex;gap:5px;align-items:center;margin:3px 0}
.colrow label{font-size:10px;color:var(--t3);min-width:48px;font-weight:500}
.hint{font-size:10px;color:var(--t3);margin:2px 0 4px;line-height:1.4}
.dim{color:var(--t3)!important}
.divider{border:none;border-top:1px solid var(--b1);margin:5px 0}

/* CHIPS */
.chips{display:flex;flex-wrap:wrap;gap:3px;margin:4px 0}
.chip{padding:3px 9px;border-radius:20px;font-size:10px;cursor:pointer;border:1px solid var(--b2);background:var(--s4);color:var(--t2);transition:all var(--dur) var(--ease);user-select:none}
.chip:hover{border-color:var(--blue-border);color:var(--t1);background:var(--blue-dim)}
.chip.active{background:var(--blue-dark);border-color:var(--blue);color:#fff}
.chip.uploaded.active{background:#065f46;border-color:var(--green);color:#6ee7b7}

/* UPLOAD/PASTE */
.upload-area,.paste-zone{border:2px dashed var(--b2);border-radius:var(--r2);padding:10px;text-align:center;cursor:pointer;transition:all var(--dur) var(--ease);margin:4px 0;outline:none;background:var(--s3)}
.upload-area:hover,.paste-zone:hover,.paste-zone:focus{border-color:var(--blue-border);background:var(--blue-dim)}
.paste-zone.pasted{border-color:var(--green-border);background:var(--green-dim)}
.upload-area p,.paste-zone p{margin:1px 0;font-size:10px;color:var(--t2)}
.upload-area.has-frame{border-color:var(--green-border);background:var(--green-dim)}

/* LAYERS */
.layers-header{font-size:10px;color:var(--t3);text-transform:uppercase;letter-spacing:1px;margin-bottom:4px;display:flex;align-items:center;justify-content:space-between}
.layer-item{display:flex;align-items:center;gap:5px;padding:4px 6px;border-radius:var(--r1);cursor:pointer;border:1px solid transparent;transition:all var(--dur) var(--ease);margin-bottom:2px}
.layer-item:hover{background:var(--s4)}
.layer-item.selected{background:var(--blue-dim);border-color:var(--blue-border)}
.layer-item.hidden-layer{opacity:0.35}
.layer-icon{width:24px;height:24px;border-radius:4px;background:var(--s4);border:1px solid var(--b2);display:flex;align-items:center;justify-content:center;font-size:11px;flex-shrink:0;overflow:hidden}
.layer-icon img{width:100%;height:100%;object-fit:cover}
.layer-name{font-size:11px;color:var(--t1);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1}
.layer-type{font-size:10px;color:var(--t3)}
.layer-acts{display:flex;gap:2px;flex-shrink:0}

/* HISTORY */
.history-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:5px;margin-top:5px}
.h-card{border-radius:var(--r1);overflow:hidden;border:1px solid var(--b2);cursor:pointer;transition:all var(--dur) var(--ease);background:var(--s3);position:relative}
.h-card:hover{border-color:var(--blue-border);transform:scale(1.02)}
.h-card img{width:100%;aspect-ratio:1;object-fit:cover;display:block}
.h-card-date{padding:2px 5px;font-size:9px;color:var(--t3)}
.h-card-del{position:absolute;top:3px;right:3px;background:rgba(0,0,0,0.75);border:none;color:#fff;width:18px;height:18px;border-radius:50%;cursor:pointer;font-size:10px;opacity:0;transition:opacity var(--dur)}
.h-card-save{position:absolute;top:3px;right:25px;background:rgba(0,0,0,0.75);border:none;color:var(--amber);width:18px;height:18px;border-radius:50%;cursor:pointer;font-size:10px;opacity:0;transition:opacity var(--dur)}
.h-card:hover .h-card-del,.h-card:hover .h-card-save{opacity:1}

/* BADGES */
.badge{display:inline-block;font-size:10px;padding:1px 6px;border-radius:20px;font-weight:600}
.badge-blue{background:var(--blue-dim);color:var(--blue);border:1px solid var(--blue-border)}
.badge-green{background:var(--green-dim);color:var(--green);border:1px solid var(--green-border)}
.badge-amber{background:var(--amber-dim);color:var(--amber);border:1px solid rgba(245,158,11,0.3)}

/* PH CARDS */
.ph-card{background:var(--s3);border-radius:var(--r1);border:1px solid var(--b2);padding:7px;margin-bottom:4px;transition:border-color 0.2s,box-shadow 0.2s}
.ph-card-selected{border-color:var(--blue)!important;box-shadow:0 0 0 2px var(--blue-dim);background:rgba(29,78,216,0.07)!important}
.ph-card-head{display:flex;align-items:center;gap:5px;margin-bottom:6px}
.ph-type-badge{font-size:9px;padding:1px 6px;border-radius:10px;font-weight:600}
.ph-image{background:rgba(59,130,246,0.1);color:#60a5fa;border:1px solid rgba(59,130,246,0.2)}
.ph-text{background:rgba(16,185,129,0.1);color:#6ee7b7;border:1px solid rgba(16,185,129,0.2)}
.ph-icon{background:var(--purple-dim);color:#c4b5fd;border:1px solid rgba(139,92,246,0.2)}

/* DPH */
.dph-section{background:var(--s2);border-radius:var(--r2);margin-bottom:3px;overflow:hidden;border:1px solid var(--b2)}
.dph-head{display:flex;align-items:center;justify-content:space-between;padding:7px 10px;cursor:pointer;border-left:3px solid var(--purple);background:var(--s3);transition:background 0.15s}
.dph-head:hover{background:var(--s4)}
.dph-head.open{background:var(--s4);border-left-color:#a78bfa;border-bottom:1px solid var(--b2)}
.dph-head h3{margin:0;font-size:10px;color:#c4b5fd;text-transform:uppercase;letter-spacing:1px;font-weight:700}
.dph-head.open h3{color:#a78bfa}
.dph-body{padding:0;max-height:0;overflow:hidden;transition:max-height 0.3s var(--ease)}
.dph-body.open{max-height:1800px;padding:7px 9px 10px}
.dph-ctrl-group{background:var(--s3);border-radius:var(--r1);padding:6px 8px;border:1px solid var(--b1);margin-top:5px}
.dph-ctrl-title{display:flex;align-items:center;justify-content:space-between;font-size:9px;font-weight:700;color:var(--amber);text-transform:uppercase;letter-spacing:1.2px;margin-bottom:4px}
.dph-tab.active{background:var(--blue-dark)!important;color:#fff!important;border-color:var(--blue)!important}
.dph-upload-zone{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;padding:10px;border:2px dashed var(--b2);border-radius:var(--r1);background:var(--s3);cursor:pointer;min-height:58px;transition:all var(--dur) var(--ease);text-align:center}
.dph-upload-zone:hover,.dph-upload-zone.drag-over{border-color:var(--blue-border);background:var(--blue-dim)}
.dph-upload-icon{font-size:18px}
.dph-upload-label{font-size:10px;color:var(--t2)}
.dph-paste-zone{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;padding:10px;border:2px dashed var(--b2);border-radius:var(--r1);background:var(--s3);cursor:pointer;min-height:58px;text-align:center;outline:none}
.dph-paste-zone:focus{border-color:var(--blue-border);box-shadow:0 0 0 2px var(--blue-dim)}

/* EXTRA TEXT BOXES */
.extra-tb{background:var(--s2);border-radius:var(--r2);margin-bottom:3px;overflow:hidden;border:1px solid rgba(245,158,11,0.2)}
.extra-tb-head{display:flex;align-items:center;justify-content:space-between;padding:7px 10px;cursor:pointer;border-left:3px solid var(--amber);background:var(--s3)}
.extra-tb-head h3{margin:0;font-size:10px;color:var(--amber);text-transform:uppercase;letter-spacing:1px;font-weight:700}
.extra-tb-body{padding:0;max-height:0;overflow:hidden;transition:max-height 0.3s var(--ease)}
.extra-tb-body.open{max-height:2000px;padding:7px 9px 10px}

/* TOAST */
#toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%) translateY(80px);background:var(--s4);color:var(--t1);padding:7px 18px;border-radius:var(--r3);font-size:11px;font-weight:500;border:1px solid var(--b3);backdrop-filter:blur(12px);transition:transform 0.25s var(--ease);z-index:9999;box-shadow:0 8px 32px rgba(0,0,0,0.5);pointer-events:none;white-space:nowrap}
#toast.show{transform:translateX(-50%) translateY(0)}

/* BUILDER */
.builder-toolbar{background:var(--s2);border-radius:var(--r2);padding:8px 10px;margin-bottom:4px;border:1px solid var(--b1)}
.builder-toolbar-title{font-size:11px;font-weight:700;color:var(--blue);text-transform:uppercase;letter-spacing:1px}
.builder-tools{display:flex;gap:3px;flex-wrap:wrap;margin-top:5px}
.tool-btn{display:inline-flex;align-items:center;gap:3px;padding:4px 8px;border:1px solid var(--b2);border-radius:var(--r1);background:var(--s4);color:var(--t2);cursor:pointer;font-size:10px;font-weight:600;transition:all var(--dur) var(--ease);font-family:inherit}
.tool-btn:hover{border-color:var(--blue-border);color:var(--t1)}
.tool-btn.active{background:var(--blue-dim);border-color:var(--blue-border);color:#93c5fd}
.builder-info-bar{display:flex;justify-content:space-between;align-items:center;background:var(--s0);border-radius:var(--r1);padding:4px 9px;margin-top:4px;font-size:10px;color:var(--t3);font-family:'SF Mono','Fira Code',monospace;border:1px solid var(--b1)}

/* RULER */
.ruler{position:absolute;z-index:50;background:#1a2236}
.ruler-h{top:0;left:20px;right:0;height:20px;pointer-events:all;cursor:crosshair}
.ruler-v{left:0;top:20px;bottom:0;width:20px;pointer-events:all;cursor:crosshair}
.canvas-wrap.has-rulers{padding-top:20px;padding-left:20px}
.guideline{position:absolute;pointer-events:none;z-index:48}

/* ALIGN BAR */
.align-bar{display:flex;align-items:center;gap:2px;margin:4px 0 3px}
.align-label{font-size:9px;color:var(--t3);font-weight:700;letter-spacing:0.5px;text-transform:uppercase;margin-right:2px;flex-shrink:0}
.align-btn{padding:3px 0;font-size:10px;font-weight:700;background:var(--s4);color:var(--t3);border:1px solid var(--b2);border-radius:var(--r1);cursor:pointer;transition:all var(--dur) var(--ease);flex:1;text-align:center;font-family:inherit}
.align-btn:hover{background:var(--blue-dim);border-color:var(--blue-border);color:#93c5fd}
.align-btn.active{background:var(--blue-dim);border-color:var(--blue);color:#60a5fa}
.ph-card .align-btn{padding:2px 0;font-size:9px}

/* MISC */
.saved-tpl-row{display:flex;align-items:center;gap:5px;padding:5px 7px;background:var(--s4);border-radius:var(--r1);border:1px solid var(--b2);margin-bottom:3px}
.saved-tpl-thumb{width:32px;height:32px;border-radius:3px;object-fit:cover;border:1px solid var(--b2)}
.saved-tpl-name{flex:1;font-size:11px;color:var(--t1);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.default-save-bar{display:flex;align-items:center;gap:5px;padding:5px 9px;margin-top:4px;background:var(--amber-dim);border:1px solid rgba(245,158,11,0.25);border-radius:var(--r1)}
.default-save-bar span{flex:1;font-size:10px;color:var(--amber)}
.ph-selected-banner{display:flex;align-items:center;gap:5px;padding:5px 9px;background:var(--blue-dim);border:1px solid var(--blue-border);border-radius:var(--r1);margin-bottom:4px;font-size:11px;color:#93c5fd}
.ph-selected-banner span{flex:1;font-weight:600}
.loading-shimmer{background:linear-gradient(90deg,var(--s3) 25%,var(--s4) 50%,var(--s3) 75%);background-size:200% 100%;animation:shimmer 1.4s infinite;border-radius:var(--r1)}
@keyframes shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}

/* GALLERY MODAL */
.gallery-modal-backdrop{position:fixed;inset:0;background:rgba(0,0,0,0.82);z-index:9000;display:flex;align-items:center;justify-content:center;padding:12px;backdrop-filter:blur(4px)}
.gallery-modal{display:flex;flex-direction:column;background:var(--s1);border:1px solid var(--b3);border-radius:var(--r3);width:100%;max-width:860px;max-height:90vh;overflow:hidden;box-shadow:0 24px 80px rgba(0,0,0,0.7)}
.gallery-modal-header{display:flex;align-items:center;gap:10px;padding:12px 16px;border-bottom:1px solid var(--b2);flex-shrink:0}
.gallery-modal-header h2{flex:1;font-size:14px;font-weight:700;color:var(--t1);margin:0}
.gallery-modal-close{background:var(--s4);border:1px solid var(--b2);color:var(--t2);border-radius:var(--r1);width:28px;height:28px;cursor:pointer;font-size:14px;display:flex;align-items:center;justify-content:center}
.gallery-modal-close:hover{background:var(--red-dim);color:var(--red)}
.gallery-modal-body{display:flex;flex:1;overflow:hidden;min-height:0}
.gallery-sidebar{width:180px;min-width:180px;border-right:1px solid var(--b2);display:flex;flex-direction:column;overflow:hidden;background:var(--s2)}
.gallery-sidebar-head{padding:10px 10px 6px;border-bottom:1px solid var(--b1);flex-shrink:0}
.gallery-sidebar-head p{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:1px;color:var(--t3);margin-bottom:8px}
.gallery-new-folder{display:flex;gap:4px}
.gallery-new-folder input{flex:1;font-size:11px;padding:4px 7px;background:var(--s3);border:1px solid var(--b2);border-radius:var(--r1);color:var(--t1);min-width:0}
.gallery-new-folder input:focus{border-color:var(--blue);outline:none}
.gallery-new-folder button{width:26px;height:26px;background:var(--blue-dim);border:1px solid var(--blue-border);border-radius:var(--r1);color:var(--blue);cursor:pointer;font-size:14px;display:flex;align-items:center;justify-content:center}
.gallery-folder-list{flex:1;overflow-y:auto;padding:6px}
.gallery-folder-item{display:flex;align-items:center;gap:5px;padding:7px 8px;border-radius:var(--r1);cursor:pointer;margin-bottom:2px;transition:background var(--dur);border:1px solid transparent}
.gallery-folder-item:hover{background:var(--s4)}
.gallery-folder-item.active{background:var(--blue-dim);border-color:var(--blue-border)}
.gallery-folder-icon{font-size:14px;flex-shrink:0}
.gallery-folder-info{flex:1;min-width:0}
.gallery-folder-name{font-size:11px;font-weight:600;color:var(--t1);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gallery-folder-count{font-size:10px;color:var(--t3)}
.gallery-folder-del{opacity:0;width:20px;height:20px;background:none;border:none;color:var(--red);cursor:pointer;font-size:12px;flex-shrink:0;transition:opacity var(--dur)}
.gallery-folder-item:hover .gallery-folder-del{opacity:1}
.gallery-main{flex:1;display:flex;flex-direction:column;overflow:hidden;min-width:0}
.gallery-main-head{display:flex;align-items:center;gap:8px;padding:10px 12px;border-bottom:1px solid var(--b2);flex-shrink:0}
.gallery-main-head h3{flex:1;font-size:12px;font-weight:700;color:var(--t1);margin:0}
.gallery-upload-btn{position:relative;overflow:hidden}
.gallery-upload-btn input[type=file]{position:absolute;inset:0;opacity:0;cursor:pointer;z-index:2}
.gallery-grid{flex:1;overflow-y:auto;padding:10px;display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:8px;align-content:start}
.gallery-img-card{background:var(--s3);border:1px solid var(--b2);border-radius:var(--r2);overflow:hidden;cursor:pointer;transition:all var(--dur);position:relative}
.gallery-img-card:hover{border-color:var(--blue-border);transform:scale(1.02)}
.gallery-img-thumb{width:100%;aspect-ratio:1;object-fit:cover;display:block;background:var(--s4)}
.gallery-img-info{padding:5px 6px;display:flex;align-items:center;gap:4px}
.gallery-img-name{flex:1;font-size:10px;color:var(--t2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gallery-img-del{width:18px;height:18px;background:none;border:none;color:var(--t3);cursor:pointer;font-size:11px;display:flex;align-items:center;justify-content:center;flex-shrink:0;border-radius:3px;transition:all var(--dur)}
.gallery-img-del:hover{background:var(--red-dim);color:var(--red)}
.gallery-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;height:200px;gap:8px;color:var(--t3);font-size:12px}
.gallery-no-folder{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;gap:8px;color:var(--t3);font-size:12px}
.gallery-use-overlay{position:absolute;inset:0;background:rgba(59,130,246,0);display:flex;align-items:center;justify-content:center;opacity:0;transition:all 0.15s}
.gallery-img-card:hover .gallery-use-overlay{opacity:1;background:rgba(59,130,246,0.18)}
.gallery-use-btn{background:var(--blue);color:#fff;border:none;border-radius:var(--r1);padding:6px 12px;font-size:11px;font-weight:700;cursor:pointer;pointer-events:none}
.gallery-from-btn{display:inline-flex;align-items:center;gap:4px;padding:5px 10px;background:var(--purple-dim);border:1px solid rgba(139,92,246,0.3);border-radius:var(--r1);color:var(--purple);cursor:pointer;font-size:11px;font-weight:600;transition:all var(--dur);font-family:inherit;white-space:nowrap}
.gallery-from-btn:hover{background:rgba(139,92,246,0.2);border-color:var(--purple)}

/* INLINE GALLERY PANEL */
.gal-panel-scroll{padding:0!important;display:flex;flex-direction:column;overflow:hidden}
.gal-toolbar{flex-shrink:0;padding:10px 12px 8px;display:flex;flex-direction:column;gap:7px}
.gal-toolbar-top{display:flex;align-items:center;justify-content:space-between}
.gal-breadcrumb{font-size:10px;color:var(--t3);max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gal-new-row{display:flex;gap:5px}
.gal-new-inp{flex:1;font-size:11px}
.gal-upload-row{display:flex;align-items:center;gap:6px}
.gal-folder-path{font-size:11px;color:var(--t2);flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gal-body{display:flex;flex:1;overflow:hidden;min-height:0}
.gal-tree-panel{width:120px;min-width:120px;flex-shrink:0;overflow-y:auto;padding:6px 4px;border-right:1px solid var(--border2);background:var(--s2)}
.gal-grid-panel{flex:1;overflow-y:auto;padding:8px;min-width:0}
.gal-tree-row{display:flex;align-items:center;gap:4px;padding:5px 6px;border-radius:var(--r1);cursor:pointer;transition:background var(--dur);border:1px solid transparent;white-space:nowrap}
.gal-tree-row:hover{background:var(--s4)}
.gal-tree-row.active{background:var(--blue-dim);border-color:var(--blue-border)}
.gal-tree-toggle{font-size:10px;flex-shrink:0;width:12px;text-align:center;color:var(--t3)}
.gal-tree-icon{font-size:13px;flex-shrink:0}
.gal-tree-label{font-size:11px;font-weight:500;color:var(--t1);overflow:hidden;text-overflow:ellipsis;flex:1;min-width:0}
.gal-tree-count{font-size:9px;color:var(--t3);flex-shrink:0}
.gal-tree-actions{display:none;gap:2px;flex-shrink:0}
.gal-tree-row:hover .gal-tree-actions{display:flex}
.gal-tree-children{overflow:hidden}
.gal-subfolder-chip{display:inline-flex;align-items:center;gap:4px;padding:5px 9px;background:var(--s3);border:1px solid var(--b2);border-radius:20px;cursor:pointer;font-size:11px;color:var(--t1);transition:all var(--dur)}
.gal-subfolder-chip:hover{background:var(--blue-dim);border-color:var(--blue-border)}
.gal-img-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(80px,1fr));gap:6px}
.gal-img-card{background:var(--s3);border:1px solid var(--b2);border-radius:var(--r2);overflow:hidden;cursor:pointer;transition:all var(--dur);position:relative}
.gal-img-card:hover{border-color:var(--blue-border);box-shadow:0 4px 14px rgba(59,130,246,0.25)}
.gal-img-card.gal-selected{border-color:var(--blue)!important;box-shadow:0 0 0 2px rgba(59,130,246,0.35)!important}
.gal-img-card.gal-selected .gal-img-overlay{opacity:1}
.gal-img-card img{width:100%;aspect-ratio:1/1;object-fit:cover;display:block}
.gal-img-overlay{position:absolute;inset:0;background:rgba(0,0,0,0.55);display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity var(--dur);gap:6px}
.gal-img-card:hover .gal-img-overlay{opacity:1}
.gal-img-use{font-size:10px;font-weight:700;color:#fff;background:var(--blue);padding:2px 7px;border-radius:8px}
.gal-img-del{background:none;border:none;color:var(--red);font-size:13px;cursor:pointer;padding:2px}
.gal-img-name{font-size:9px;color:var(--t3);padding:3px 5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;background:var(--s2)}
@media(hover:none){.gal-img-overlay{opacity:1}.gal-tree-actions{display:flex}}

/* TOGGLE */
.toggle-switch{position:relative;display:inline-block;width:36px;height:20px;flex-shrink:0}
.toggle-switch input{opacity:0;width:0;height:0}
.toggle-slider{position:absolute;cursor:pointer;inset:0;background:var(--b3);border-radius:20px;transition:0.2s}
.toggle-slider:before{content:'';position:absolute;width:14px;height:14px;left:3px;bottom:3px;background:#fff;border-radius:50%;transition:0.2s}
.toggle-switch input:checked+.toggle-slider{background:var(--blue)}
.toggle-switch input:checked+.toggle-slider:before{transform:translateX(16px)}

/* LAYER DRAG */
.layer-drag-handle{cursor:grab;color:var(--t3);font-size:14px;padding:0 2px;user-select:none;flex-shrink:0;opacity:0.5;transition:opacity 0.15s}
.layer-item:hover .layer-drag-handle{opacity:1}
.layer-drag-handle:active{cursor:grabbing}
.layer-item.dragging{opacity:0.4;background:var(--s4)!important}
.layer-item.drag-over{border-top:2px solid var(--blue)!important;background:var(--blue-dim)!important}

/* OCR */
.ocr-tab.active{background:var(--blue-dark)!important;color:#fff!important;border-color:var(--blue)!important}

/* RESPONSIVE */
@media(min-width:1400px){:root{--left-w:400px;--right-w:440px}}
@media(min-width:769px) and (max-width:1199px){:root{--left-w:290px;--right-w:310px}}
/* ═══════════════════════════════════════════════════════
   MOBILE FULL REDESIGN (≤768px)
   Layout: Topbar → Canvas (full width) → Bottom Sheet
   Navigation: Fixed bottom tab bar (WhatsApp style)
   Panels: Slide-up sheets over canvas
   ═══════════════════════════════════════════════════════ */
@media(max-width:768px){

  /* ── Reset desktop layout ── */
  html,body{overflow:hidden!important;height:100%!important;height:100dvh!important}
  .app{
    display:flex;flex-direction:column;
    height:100vh;height:100dvh;
    overflow:hidden!important;
    background:var(--bg);
  }

  /* ── Topbar: compact, single row ── */
  .topnav{
    height:48px!important;min-height:48px;flex-shrink:0;
    padding:0 12px;gap:8px;flex-wrap:nowrap;
    border-bottom:1px solid var(--b1);
  }
  .topnav-brand{display:flex;align-items:center;gap:6px}
  .topnav-brand .brand-name{font-size:14px!important}
  .nav-mode-tabs,.nav-template-slot,#navModeTabs{display:none!important}
  .topnav-actions{margin-left:auto;gap:6px}
  /* Show download + save only in topbar on mobile */
  .topnav-actions .btn-download{display:flex!important}
  /* Template name chip shown small */
  #navTemplateSlot{display:none!important}

  /* ── Main body: canvas takes all space ── */
  .main-body{
    flex:1;min-height:0;
    display:flex;flex-direction:column;
    overflow:hidden;
    position:relative;
  }

  /* ── Left panel: hidden by default, slides up as bottom sheet ── */
  .left-panel{
    position:fixed!important;
    bottom:60px;left:0;right:0;
    height:55vh!important;max-height:55vh!important;
    width:100%!important;min-width:unset!important;
    border-right:none!important;
    border-top:1px solid var(--b2);
    border-radius:16px 16px 0 0;
    transform:translateY(100%);
    transition:transform .28s cubic-bezier(.4,0,.2,1);
    z-index:500;
    overflow:hidden;
    box-shadow:0 -8px 40px #0008;
    background:var(--bg);
  }
  .left-panel.mob-sheet-open{transform:translateY(0)!important}
  /* Drag handle */
  .left-panel::before{
    content:'';display:block;
    width:36px;height:4px;
    background:var(--b2);border-radius:2px;
    margin:8px auto 4px;flex-shrink:0;
  }
  .lp-panel-header{padding:4px 12px 8px!important;flex-shrink:0}
  .panel-scroll{
    overflow-y:auto!important;
    height:calc(55vh - 60px)!important;
    max-height:none!important;
    padding-bottom:8px;
    -webkit-overflow-scrolling:touch;
  }

  /* ── Right panel: also bottom sheet, above left panel ── */
  .right-panel{
    position:fixed!important;
    bottom:60px;left:0;right:0;
    height:55vh!important;max-height:55vh!important;
    width:100%!important;min-width:unset!important;
    border-left:none!important;
    border-top:1px solid var(--b2);
    border-radius:16px 16px 0 0;
    transform:translateY(100%);
    transition:transform .28s cubic-bezier(.4,0,.2,1);
    z-index:501;
    overflow:hidden;
    box-shadow:0 -8px 40px #0008;
    background:var(--bg);
  }
  .right-panel.mob-sheet-open{transform:translateY(0)!important}
  .right-panel::before{
    content:'';display:block;
    width:36px;height:4px;
    background:var(--b2);border-radius:2px;
    margin:8px auto 4px;flex-shrink:0;
  }
  .rp-tabs{padding:0 8px 4px!important;flex-shrink:0}
  .rp-panel.active{display:flex;overflow:hidden;height:calc(55vh - 80px)}
  .rp-panel.active > .panel-scroll{
    overflow-y:auto!important;height:100%!important;max-height:none!important;
    -webkit-overflow-scrolling:touch;padding-bottom:8px;
  }
  .sec-body.open,.extra-tb-body.open,.dph-body.open{
    overflow-y:auto!important;max-height:160px!important;
  }

  /* ── Canvas: fills remaining space ── */
  .canvas-area{
    flex:1;min-height:0;
    display:flex;flex-direction:column;
    align-items:center;justify-content:center;
    padding:8px;
    overflow:hidden;
    order:1;
  }
  .canvas-wrap{
    flex:1;min-height:0;
    display:flex;align-items:center;justify-content:center;
    width:100%;
  }
  canvas#mainCanvas{
    max-width:calc(100vw - 16px)!important;
    max-height:calc(100vh - 180px)!important;
    width:auto!important;height:auto!important;
    aspect-ratio:var(--canvas-aspect,1/1)!important;
    border-radius:4px;
  }
  .canvas-bottom-bar{
    display:none!important;
  }
  /* Canvas size badge in topbar */
  .canvas-size-badge{font-size:10px;padding:2px 6px}
  #canvasSizeMenu{font-size:12px}
  /* Canvas tab bar hidden on mobile (use bottom nav) */
  .canvas-tab-bar{display:none!important}

  /* ── Overlay: dim behind open sheets ── */
  .mob-sheet-backdrop{
    position:fixed;inset:0;background:#0006;z-index:498;
    display:none;
  }
  .mob-sheet-backdrop.show{display:block}

  /* ── Bottom nav bar (always visible) ── */
  #mobileBottomNav{
    display:flex!important;
    position:fixed;bottom:0;left:0;right:0;
    height:60px;
    padding-bottom:env(safe-area-inset-bottom,0);
    background:var(--s1);
    border-top:1px solid var(--b1);
    z-index:900;
    box-shadow:0 -2px 12px #0006;
  }

  /* ── Gallery specific ── */
  .gal-body{display:flex!important;flex-direction:column!important;height:calc(55vh - 60px)!important}
  .gal-tree-panel{
    width:100%!important;height:auto!important;max-height:80px;
    overflow-x:auto!important;overflow-y:hidden!important;
    border-right:none!important;border-bottom:1px solid var(--b2);
    padding:6px!important;display:flex!important;flex-wrap:nowrap!important;
    gap:6px!important;scrollbar-width:none;flex-shrink:0;
  }
  .gal-tree-panel::-webkit-scrollbar{display:none}
  .gal-tree-row{flex-shrink:0;border-radius:20px;padding:4px 10px;border:1px solid var(--b2);white-space:nowrap}
  .gal-tree-toggle,.gal-tree-children{display:none}
  .gal-grid-panel{flex:1;overflow-y:auto!important;min-height:0}
  .gal-img-overlay{opacity:1!important}
  .gal-img-grid{grid-template-columns:repeat(auto-fill,minmax(90px,1fr))!important}

  /* ── Gallery popup modal ── */
  .gallery-modal{max-height:92vh;max-width:100vw;width:100%;border-radius:16px 16px 0 0;margin:0;position:fixed;bottom:0}
  .gallery-modal-body{flex-direction:column;height:70vh}
  .gallery-sidebar{width:100%;min-width:unset;border-right:none;border-bottom:1px solid var(--b2);max-height:90px;overflow-x:auto;overflow-y:hidden}
  .gallery-folder-list{display:flex;flex-wrap:nowrap;gap:6px;padding:4px;overflow-x:auto;scrollbar-width:none}
  .gallery-folder-list::-webkit-scrollbar{display:none}
  .gallery-grid{grid-template-columns:repeat(auto-fill,minmax(100px,1fr))!important}

  /* ── Template library modal ── */
  #tplMgrBackdrop .tpl-manager-modal{
    max-height:92vh;max-width:100vw;width:100%;
    border-radius:16px 16px 0 0;position:fixed;bottom:0;margin:0;top:auto;
  }
  #tplMgrSidebar{width:120px;min-width:120px}
  .tpl-lib-card img{aspect-ratio:1}

  /* ── Right panel tabs compact ── */
  .rp-tab{padding:5px 8px!important;font-size:11px!important}

  /* ── DB panel ── */
  .db-slide-panel{position:fixed!important;bottom:60px!important;border-radius:12px 12px 0 0}

  /* ── History ── */
  .history-grid{grid-template-columns:repeat(2,1fr)}
  .h-card-del,.h-card-save{opacity:1!important}

  /* ── OCR panel ── */
  #panelOCR .upload-area{min-height:80px}

  /* body padding for bottom nav */
  body{padding-bottom:0!important}
}

/* ══ PERSISTENT BOTTOM: LAYERS + HISTORY ══ */
.right-panel {
  display: flex;
  flex-direction: column;
}

/* The tab panels area: shrink to share space with bottom persistent section */
.rp-panel {
  display: none;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}
.rp-panel.active {
  display: flex;
}
.rp-panel > .panel-scroll {
  flex: 1;
  min-height: 0;
}

/* Persistent bottom panel */
.rp-bottom-persistent {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  border-top: 2px solid var(--blue-border);
  background: var(--s1);
  max-height: 75vh;
  overflow: hidden;
}

.rp-bottom-section {
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

.rp-bottom-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 10px;
  background: var(--s2);
  cursor: pointer;
  user-select: none;
  flex-shrink: 0;
  border-bottom: 1px solid var(--b1);
  transition: background var(--dur) var(--ease);
}
.rp-bottom-header:hover {
  background: var(--s3);
}
.rp-bottom-title {
  font-size: 10px;
  font-weight: 700;
  color: var(--blue);
  text-transform: uppercase;
  letter-spacing: 1px;
}
.rp-bottom-arrow {
  font-size: 9px;
  color: var(--t3);
  width: 15px;
  height: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--s4);
  border: 1px solid var(--b2);
  border-radius: 50%;
  flex-shrink: 0;
  transition: transform 0.2s;
}

.rp-bottom-body {
  overflow-y: auto;
  overflow-x: hidden;
  max-height: 0;
  transition: max-height 0.3s var(--ease);
  scrollbar-width: thin;
  scrollbar-color: var(--b3) transparent;
}
.rp-bottom-body::-webkit-scrollbar { width: 3px; }
.rp-bottom-body::-webkit-scrollbar-thumb { background: var(--b3); border-radius: 2px; }

.rp-bottom-body.open {
  max-height: 700px;
}

/* Layers list inner container */
.layers-list-inner {
  padding: 4px;
}

/* Resize handle */
.rp-resize-handle {
  height: 6px;
  background: var(--s0);
  cursor: ns-resize;
  flex-shrink: 0;
  border-top: 1px solid var(--b2);
  border-bottom: 1px solid var(--b2);
  transition: background var(--dur);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.rp-resize-handle::after {
  content: '';
  width: 32px;
  height: 2px;
  border-radius: 2px;
  background: var(--b3);
}
.rp-resize-handle:hover {
  background: var(--blue-dim);
}
.rp-resize-handle:hover::after {
  background: var(--blue);
}

/* History grid inside bottom panel */
#rpHistoryBody .history-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  padding: 5px;
}
#rpHistoryBody .h-card img {
  aspect-ratio: 1;
}
#rpHistoryBody .h-card-del,
#rpHistoryBody .h-card-save {
  opacity: 1 !important;
}

/* Mobile: bottom persistent stacks normally */
@media(max-width:768px) {
  .rp-bottom-persistent {
    max-height: none;
    border-top: 2px solid var(--blue-border);
  }
  .rp-bottom-body.open {
    max-height: none;
  }
  #rpHistoryBody .history-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ── Download dropdown ─────────────────────────────── */
.download-dropdown {
  position: relative;
  display: inline-block;
}
.download-menu {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  background: #1a2540;
  border: 1px solid rgba(96,165,250,.25);
  border-radius: 10px;
  min-width: 220px;
  z-index: 99999;
  box-shadow: 0 10px 40px rgba(0,0,0,.7);
  overflow: hidden;
  transform: translateY(-6px);
  transition: opacity .18s ease, transform .18s ease, visibility 0s linear .18s;
}
.download-menu.open {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
  transition: opacity .18s ease, transform .18s ease, visibility 0s linear 0s;
}
.download-menu button {
  display: flex !important;
  align-items: center;
  gap: 9px;
  width: 100% !important;
  background: transparent !important;
  border: none !important;
  border-bottom: 1px solid rgba(255,255,255,.07) !important;
  color: #e2e8f0 !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  padding: 12px 16px !important;
  cursor: pointer;
  text-align: left;
  transition: background .15s;
  border-radius: 0 !important;
  box-shadow: none !important;
}
.download-menu button:last-child {
  border-bottom: none !important;
}
.download-menu button:hover {
  background: rgba(96,165,250,.15) !important;
  color: #93c5fd !important;
}

/* ═══════════════════════════════════════════
   CANVAS TABS — browser-style multi-tab editing
   ═══════════════════════════════════════════ */
.canvas-tab-bar{
  display:flex;align-items:center;gap:0;
  background:var(--s0);border-bottom:1px solid var(--b1);
  flex-shrink:0;overflow-x:auto;overflow-y:hidden;
  scrollbar-width:none;min-height:34px;padding-left:4px;
}
.canvas-tab-bar::-webkit-scrollbar{display:none}
.canvas-tab{
  display:flex;align-items:center;gap:5px;
  padding:0 10px 0 12px;height:34px;min-width:110px;max-width:180px;
  background:var(--s2);border-right:1px solid var(--b1);
  border-bottom:2px solid transparent;
  font-size:10px;color:var(--t2);cursor:pointer;
  transition:background var(--dur),color var(--dur);
  white-space:nowrap;overflow:hidden;position:relative;
  user-select:none;flex-shrink:0;
}
.canvas-tab:hover{background:var(--s3);color:var(--t1)}
.canvas-tab.ct-active{
  background:var(--s4);color:var(--t1);
  border-bottom:2px solid var(--blue);
  font-weight:600;
}
.canvas-tab .ct-thumb{
  width:22px;height:22px;border-radius:3px;
  object-fit:cover;flex-shrink:0;
  background:var(--s3);border:1px solid var(--b1);
}
.canvas-tab .ct-label{
  flex:1;overflow:hidden;text-overflow:ellipsis;font-size:10px;
}
.canvas-tab .ct-close{
  flex-shrink:0;width:14px;height:14px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:9px;color:var(--t3);cursor:pointer;
  transition:background var(--dur);margin-left:2px;
}
.canvas-tab .ct-close:hover{background:var(--red-dim,#fee2e2);color:#dc2626}
.canvas-tab-add{
  flex-shrink:0;width:28px;height:28px;border-radius:6px;margin:3px;
  display:flex;align-items:center;justify-content:center;
  font-size:16px;cursor:pointer;color:var(--t3);
  border:1px dashed var(--b2);transition:all var(--dur);
}
.canvas-tab-add:hover{background:var(--blue-dim);color:var(--blue);border-color:var(--blue-border)}

/* ── Quick Actions Bar ─────────────────────────────────── */
#quickActionsBar button:active { transform: scale(0.96); }
#quickActionsBar { animation: qaFadeIn .4s ease; }
@keyframes qaFadeIn { from { opacity:0; transform:translateX(-50%) translateY(8px); } to { opacity:1; transform:translateX(-50%) translateY(0); } }

/* ── Draft Restore Bar ─────────────────────────────────── */
#draftRestoreBar { animation: qaFadeIn .3s ease; }

/* Builder mode: right panel is hidden — expand canvas to use full width */
.app-mode-builder canvas#mainCanvas {
  --right-w: 0px;
  max-width: none;
  max-height: none;
  transform: none !important;
  transform-origin: center center;
}

/* Allow the CSS-sized builder canvas to display without overflow clipping */
.app-mode-builder .canvas-wrap {
  overflow: visible;
}
.app-mode-builder .canvas-area {
  overflow: visible;
}

/* FIX: Builder mode — remove canvas max-size constraints so builderFitCanvas() works */
.app-mode-builder canvas#mainCanvas {
  max-width: none !important;
  max-height: none !important;
}

.size-opt{display:block;width:100%;text-align:left;background:none;border:none;color:var(--t2);padding:5px 10px;border-radius:5px;cursor:pointer;font-size:12px;transition:.12s}
.size-opt:hover{background:var(--s3);color:var(--t1)}


/* ── Gallery Explorer upgrades ─────────────────────────────── */
/* Wider tree panel in left panel */
.gal-tree-panel{width:180px;min-width:180px}
/* Larger image grid tiles by default */
.gal-img-grid{grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:8px}
.gal-img-card img{aspect-ratio:1/1;object-fit:cover}
/* Gallery popup wider folder sidebar */
.gallery-sidebar{width:200px;min-width:200px;background:var(--s1);border-right:1px solid var(--b2);display:flex;flex-direction:column;overflow:hidden}
.gallery-sidebar-head{padding:8px 10px;border-bottom:1px solid var(--b2);flex-shrink:0}
.gallery-folder-list{flex:1;overflow-y:auto;padding:4px}
.gallery-main{flex:1;overflow:hidden;display:flex;flex-direction:column;min-width:0}
.gallery-main-head{padding:8px 12px;border-bottom:1px solid var(--b2);flex-shrink:0;display:flex;align-items:center;gap:8px}
.gallery-grid{flex:1;overflow-y:auto;padding:10px;display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:10px;align-content:start}
.gallery-item{background:var(--s2);border:2px solid var(--b2);border-radius:8px;overflow:hidden;cursor:pointer;transition:all .15s}
.gallery-item:hover{border-color:var(--blue);box-shadow:0 4px 16px rgba(59,130,246,0.3);transform:translateY(-1px)}
.gallery-item img{width:100%;aspect-ratio:1;object-fit:cover;display:block}
.gallery-item-name{font-size:10px;color:var(--t2);padding:4px 6px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;background:var(--s1)}

/* ── Template Library explorer style ──────────────────────── */
#tplMgrSidebar .tl-cat{display:flex;align-items:center;gap:6px;padding:7px 10px;border-radius:6px;cursor:pointer;font-size:12px;color:var(--t2);transition:.12s;border:1px solid transparent;margin-bottom:2px}
#tplMgrSidebar .tl-cat:hover{background:var(--s3);color:var(--t1)}
#tplMgrSidebar .tl-cat.active{background:var(--blue-dim,#1e3a5f);color:var(--blue);border-color:var(--blue-border,#1d4ed833)}
#tplMgrSidebar .tl-cat-count{margin-left:auto;font-size:10px;background:var(--s3);padding:1px 6px;border-radius:10px;color:var(--t3)}
.tpl-lib-card{position:relative;border-radius:10px;overflow:hidden;cursor:pointer;border:2px solid var(--b2);background:var(--s3);transition:all .15s}
.tpl-lib-card:hover{border-color:var(--blue);box-shadow:0 4px 16px rgba(59,130,246,0.3);transform:translateY(-2px)}
.tpl-lib-card.active{border-color:var(--amber)}
.tpl-lib-card img{width:100%;aspect-ratio:1;object-fit:cover;display:block;background:var(--s1)}
.tpl-lib-card-info{padding:8px 10px}
.tpl-lib-card-name{font-size:12px;font-weight:600;color:var(--t1);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tpl-lib-card-cat{font-size:10px;color:var(--t3);margin-top:2px}
.tpl-lib-card-actions{display:flex;gap:4px;padding:0 8px 8px;justify-content:flex-end}
.tpl-lib-active-badge{position:absolute;top:6px;left:6px;background:var(--amber);color:#000;font-size:9px;font-weight:700;padding:2px 7px;border-radius:4px}


/* ── Mobile nav buttons — global (visibility controlled by media query) ── */
#mobileBottomNav{display:none} /* hidden on desktop, shown in @media block */
.mob-nav-btn{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:3px;background:none;border:none;color:var(--t3);cursor:pointer;
  padding:4px 6px;border-radius:8px;transition:.15s;flex:1;
}
.mob-nav-btn > span:first-child{font-size:20px;line-height:1}
.mob-nav-btn > span:last-child{font-size:9px;line-height:1;white-space:nowrap}
.mob-nav-btn.active{color:var(--blue)}
.mob-more-btn{
  display:flex;flex-direction:column;align-items:center;gap:5px;
  background:var(--s2);border:1px solid var(--b2);border-radius:12px;
  padding:12px 6px 8px;cursor:pointer;color:var(--t1);transition:.12s;
}
.mob-more-btn:active{background:var(--s3)}
.mob-more-btn > span:first-child{font-size:24px;display:block;line-height:1}
.mob-more-btn > span:last-child{font-size:10px;color:var(--t2)}

/* ── Hamburger nav button (hidden on desktop) ── */
.nav-hamburger {
  display: none;
  background: var(--s3);
  border: 1px solid var(--b2);
  color: var(--t1);
  border-radius: 6px;
  padding: 4px 10px;
  font-size: 16px;
  cursor: pointer;
  flex-shrink: 0;
  transition: background .15s;
}
.nav-hamburger:hover { background: var(--s4, #2e3245); }

.nav-ham-item {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  color: var(--t1);
  padding: 8px 14px;
  font-size: 13px;
  cursor: pointer;
  border-radius: 5px;
  transition: background .12s;
  white-space: nowrap;
}
.nav-ham-item:hover { background: var(--s3); }

/* Show hamburger when nav-mode-tabs are hidden (narrow/split screen) */
@media (max-width: 900px) {
  .nav-hamburger { display: flex !important; }
}

/* Layer item pulse when selected via canvas click */
@keyframes layerPulse {
  0%   { background: var(--blue); box-shadow: 0 0 0 2px var(--blue); }
  100% { background: transparent; box-shadow: none; }
}
.layer-item.selected {
  background: var(--s3);
  border-left: 2px solid var(--blue);
}

/* ═══════════════════════════════════════════════════════════════
   mobile_fixes v19 — appended at END. All existing CSS untouched.
   ═══════════════════════════════════════════════════════════════ */

/* Hidden on desktop */
#mobTemplateBar  { display: none; }
#rpPanelLayers   { display: none; }   /* same as all other .rp-panel */

@media (max-width: 768px) {

  /* 1. Hide accordion layers inside right panel on mobile.
        Mobile uses rpPanelLayers inside the right-panel sheet. */
  #rpBottomPersistent { display: none !important; }

  /* 2. Hide rp-tabs on mobile — bottom nav handles switching */
  .rp-tabs { display: none !important; }

  /* 3. rp-panel fills full sheet height without the tab bar */
  .right-panel .rp-panel.active {
    height: calc(55vh - 16px) !important;
    display: flex !important;
    flex-direction: column;
    overflow: hidden;
  }
  .right-panel .rp-panel.active > .panel-scroll {
    overflow-y: auto !important;
    height: 100% !important;
    max-height: none !important;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 8px;
  }

  /* 4. Mobile template bar */
  #mobTemplateBar {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    background: var(--s2);
    border-bottom: 1px solid var(--b1);
    flex-shrink: 0;
    order: -1;    /* appears above main-body */
    z-index: 10;
  }
  #mobTemplateBar select {
    flex: 1; min-width: 0;
    font-size: 12px; font-family: inherit;
    background: var(--s3);
    color: var(--t1);
    border: 1px solid var(--blue-border);
    border-radius: var(--r1);
    padding: 5px 24px 5px 8px;
    cursor: pointer; appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%233d5a80'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
  }
  #mobCategorySelect { flex: 0 0 108px; font-size: 11px; }

  /* 5. Bottom nav: 6 buttons — slightly smaller text */
  #mobileBottomNav .mob-nav-btn > span:first-child { font-size: 17px !important; }
  #mobileBottomNav .mob-nav-btn > span:last-child  { font-size:  8px !important; }

  /* 6. Layers panel inside right panel sheet */
  #rpPanelLayers { display: none; }
  #rpPanelLayers.active {
    display: flex !important;
    flex-direction: column;
    height: calc(55vh - 16px) !important;
    overflow: hidden;
  }
  #rpPanelLayers > .panel-scroll {
    overflow-y: auto !important;
    height: 100% !important;
    -webkit-overflow-scrolling: touch;
  }
  #mobLayersList .layer-item {
    display: flex; align-items: center;
    border-radius: 6px;
    border: 1px solid transparent;
  }
  #mobLayersList .layer-item.selected { border-color: var(--blue); }
  #mobLayersList .layer-item.hidden-layer { opacity: .45; }
  #mobLayersList .ml-u[disabled],
  #mobLayersList .ml-d[disabled] { opacity: .3; pointer-events: none; }

  /* 7. Preset popup above sheets */
  #presetPopupBackdrop { z-index: 9100 !important; }
}
/* ─── End mobile_fixes v19 ───────────────────────────────────── */