*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{overflow-x:hidden;}
:root{
  --bg:#07070b;
  --bg2:#0f0f18;
  --bg3:#141424;
  --bg4:#1b1b30;
  --border:rgba(255,255,255,0.06);
  --border2:rgba(212,175,55,0.18);
  --border-focus:rgba(212,175,55,0.45);
  --text:#f3f3f7;
  --text2:#94a3b8;
  --text3:#475569;
  --gold:#d4af37;
  --gold2:#f3e5ab;
  --gold-dim:rgba(212,175,55,0.12);
  --accent:#d4af37;
  --purple:#7c3aed;
  --radius:10px;
  --radius-lg:16px;
  --transition:all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  --shadow:0 8px 32px rgba(0,0,0,0.5);
}
body{
  font-family:'Syne',sans-serif;
  background:var(--bg);
  color:var(--text);
  height:100vh;
  display:flex;
  flex-direction:column;
  overflow:hidden;
  -webkit-font-smoothing:antialiased;
}

/* HEADER */
.hdr-group{display:flex;align-items:center;gap:6px;}
.hdr-sep{width:1px;height:22px;background:var(--border);margin:0 4px;}
.btn-icon{
  padding:6px 10px!important;
  min-width:36px;
  justify-content:center;
  transition:var(--transition);
}
.btn-icon svg{width:16px;height:16px;stroke-width:2;}
.btn-del{
  color:#f87171!important;
  border-color:rgba(239,68,68,0.25)!important;
}
.btn-del:hover{
  background:rgba(239,68,68,0.12)!important;
  border-color:rgba(239,68,68,0.5)!important;
  color:#ef4444!important;
}

/* EDITOR NAVBAR */
.header{
  background:var(--bg2);
  border-bottom:1px solid var(--border);
  padding:0 16px;
  height:50px;
  display:flex;
  align-items:center;
  gap:12px;
}
.header-actions{margin-left:auto;display:flex;gap:8px;align-items:center;}

/* STICKY NAV */
.sticky-top{position:sticky;top:0;z-index:190;}
.nav{
  height:56px;
  background:rgba(7,7,11,0.95);
  backdrop-filter:blur(16px);
  border-bottom:1px solid rgba(212,175,55,0.22);
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 2rem;
  position:relative;
}
.nav-logo{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--text);}
.nav-logo img{height:28px;width:auto;}
.nav-tools-btn{
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  display:flex;
  align-items:center;
  gap:8px;
  color:var(--text2);
  font-family:'DM Mono',monospace;
  font-size:0.7rem;
  letter-spacing:0.18em;
  text-transform:uppercase;
  transition:var(--transition);
  cursor:pointer;
  background:none;
  border:none;
  padding:6px 12px;
  height:56px;
}
.nav-tools-btn:hover{color:var(--gold);}
.nav-tools-btn svg{
  width:14px;
  height:14px;
  fill:none;
  stroke:currentColor;
  stroke-width:2.5;
  stroke-linecap:round;
  stroke-linejoin:round;
  transition:transform .25s;
}
.nav-tools-btn.open svg{transform:rotate(180deg);}

.tools-dropdown{
  position:absolute;
  top:56px;
  left:50%;
  transform:translateX(-50%);
  background:rgba(15,15,24,0.96);
  backdrop-filter:blur(24px);
  border:1px solid rgba(212,175,55,0.25);
  border-radius:var(--radius-lg);
  padding:24px;
  display:none;
  z-index:300;
  box-shadow:0 24px 64px rgba(0,0,0,0.7);
  animation:dropdownFade 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes dropdownFade{
  from{opacity:0;transform:translate(-50%, -10px);}
  to{opacity:1;transform:translate(-50%, 0);}
}
.tools-dropdown.open{display:block;}
.tools-dropdown-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:0 28px;}
.tools-col{min-width:170px;}
.tools-col-label{
  font-family:'DM Mono',monospace;
  font-size:0.6rem;
  letter-spacing:0.2em;
  text-transform:uppercase;
  color:var(--gold);
  padding:0 10px 10px;
  border-bottom:1px solid rgba(212,175,55,0.2);
  margin-bottom:8px;
}
.tools-dropdown a{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border-radius:var(--radius);
  font-family:'Syne',sans-serif;
  font-size:0.75rem;
  color:var(--text2);
  text-decoration:none;
  transition:var(--transition);
  white-space:nowrap;
}
.tools-dropdown a:hover{
  background:rgba(212,175,55,0.12);
  color:var(--gold);
  transform:translateX(3px);
}
.tools-dropdown a.current-tool{opacity:0.35;pointer-events:none;}
.tool-icon{font-size:0.95rem;width:22px;text-align:center;}

/* HERO (hidden by default) */
.hero-section{display:none !important;}

/* STICKY TOOLBAR */
.sticky-toolbar{position:sticky;top:0;z-index:180;}
.toolbar{
  background:var(--bg2);
  border-bottom:1px solid var(--border);
  padding:8px 16px;
  display:flex;
  align-items:center;
  gap:10px;
  height:52px;
}
.toolbar .spacer{flex:1;}
.toolbar-btn{font-size:12px;}
.btn{
  padding:8px 16px;
  border-radius:var(--radius);
  font-size:12px;
  font-weight:600;
  cursor:pointer;
  border:1px solid var(--border);
  background:var(--bg3);
  color:var(--text);
  transition:var(--transition);
  display:flex;
  align-items:center;
  gap:8px;
  white-space:nowrap;
}
.btn:hover{
  background:var(--bg4);
  border-color:var(--gold2);
  transform:translateY(-1px);
}
.btn:active{
  transform:translateY(0);
}
.btn svg{width:14px;height:14px;stroke-width:2;}
.btn-primary{
  background:var(--gold);
  border-color:var(--gold);
  color:#000;
}
.btn-primary:hover{
  background:var(--gold2);
  border-color:var(--gold2);
  box-shadow:0 0 12px rgba(212,175,55,0.3);
}
.btn-success{
  background:rgba(212,175,55,0.1);
  border-color:rgba(212,175,55,0.35);
  color:var(--gold);
}
.btn-success:hover{
  background:rgba(212,175,55,0.2);
  border-color:var(--gold);
}
.btn-danger{
  background:rgba(239,68,68,0.1);
  border-color:rgba(239,68,68,0.3);
  color:#f87171;
}
.btn-danger:hover{
  background:rgba(239,68,68,0.2);
  border-color:#ef4444;
  color:#ef4444;
}

/* FORMAT/ALIGN MODALS */
.format-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:12px;}
.plat-btn{
  padding:10px 12px;
  border-radius:var(--radius);
  font-size:11px;
  font-weight:600;
  cursor:pointer;
  border:1px solid var(--border);
  background:var(--bg3);
  color:var(--text2);
  transition:var(--transition);
  white-space:nowrap;
  text-align:center;
}
.plat-btn:hover{
  border-color:var(--accent);
  color:var(--text);
  background:var(--bg4);
}
.plat-btn.active{
  background:var(--accent);
  border-color:var(--accent);
  color:#000;
  box-shadow:0 0 10px rgba(212,175,55,0.25);
}
.custom-size{display:flex;align-items:center;gap:8px;flex-shrink:0;margin-top:6px;}
.custom-size input{
  width:72px;
  padding:8px;
  border-radius:var(--radius);
  border:1px solid var(--border2);
  background:var(--bg3);
  color:var(--text);
  font-size:12px;
  text-align:center;
  transition:var(--transition);
}
.custom-size input:focus{
  outline:none;
  border-color:var(--gold);
}
.custom-size span{color:var(--text3);font-size:12px;}
.modal-box.wide{width:460px;}
.align-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;}

/* MAIN */
.main{display:flex;flex:1;overflow:hidden;min-height:0;}

/* Always hide non-editor sections */
.hero-section, .page-sections, footer{display:none !important;}
html, body{height:100vh;overflow:hidden;}

/* LEFT PANEL — CANVA-STYLE ICON RAIL + SLIDE-OUT DRAWER */
.left-panel{
  display:flex;
  flex-direction:row;
  background:var(--bg2);
  border-right:1px solid var(--border);
  overflow:hidden;
  flex-shrink:0;
}
.panel-tabs-wrap{
  display:flex;
  flex-direction:column;
  align-items:stretch;
  border-right:1px solid var(--border);
  background:var(--bg);
  width:72px;
  min-width:72px;
  flex-shrink:0;
  overflow-y:auto;
  scrollbar-width:none;
}
.panel-tabs-wrap::-webkit-scrollbar{display:none;}
.panel-tabs{display:flex;flex-direction:column;flex:1;min-width:0;padding-top:8px;}
.tab{
  flex:0 0 auto;
  padding:14px 4px;
  font-size:8px;
  font-weight:700;
  cursor:pointer;
  text-align:center;
  color:var(--text2);
  border-left:3px solid transparent;
  transition:var(--transition);
  letter-spacing:1px;
  white-space:nowrap;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  opacity:0.75;
}
.tab .tab-icon{
  width:20px;
  height:20px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.tab .tab-icon svg{
  width:100%;
  height:100%;
  stroke-width:2px;
  transition:var(--transition);
}
.tab.active{
  color:var(--accent);
  border-left-color:var(--accent);
  background:var(--bg2);
  opacity:1;
}
.tab.active .tab-icon svg{
  stroke:var(--gold);
}
.tab:hover:not(.active){
  color:var(--text);
  background:rgba(255,255,255,0.02);
  opacity:1;
}

.panel-drawer{
  width:0;
  min-width:0;
  overflow:hidden;
  transition:width .26s cubic-bezier(0.16, 1, 0.3, 1);
  background:var(--bg2);
  border-right:1px solid var(--border);
}
.left-panel.drawer-open .panel-drawer{width:290px;min-width:290px;}

.panel-content{
  flex:1;
  overflow-y:auto;
  padding:16px;
  scrollbar-width:thin;
  scrollbar-color:var(--border2) transparent;
  width:290px;
  height:100%;
  box-sizing:border-box;
}
.section-title{
  font-size:10px;
  font-weight:700;
  color:var(--gold);
  letter-spacing:1.5px;
  text-transform:uppercase;
  margin:16px 0 10px;
}
.section-title:first-child{margin-top:0;}

/* LAYER LIST */
.layer-item{
  display:flex;
  align-items:center;
  gap:10px;
  padding:8px 10px;
  border-radius:var(--radius);
  cursor:pointer;
  font-size:12px;
  font-weight:500;
  color:var(--text2);
  border:1px solid transparent;
  transition:var(--transition);
  margin-bottom:6px;
  user-select:none;
  background:rgba(255,255,255,0.01);
}
.layer-item:hover{
  background:var(--bg3);
  color:var(--text);
  border-color:rgba(255,255,255,0.03);
}
.layer-item.selected{
  background:rgba(212,175,55,0.07);
  border-color:var(--accent);
  color:var(--text);
}
/* Added: extra layers selected via Shift/Ctrl+Click (multi-select for grouping) */
.layer-item.multi-selected{
  background:rgba(125,211,252,0.07);
  border-color:#7dd3fc;
  color:var(--text);
}
.layer-icon{
  width:18px;
  height:18px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--text2);
}
.layer-icon svg{width:14px;height:14px;stroke-width:2;}
.layer-name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600;}
.layer-del{
  opacity:0;
  cursor:pointer;
  color:#f87171;
  font-size:12px;
  flex-shrink:0;
  padding:2px;
  transition:var(--transition);
}
.layer-item:hover .layer-del{opacity:1;}
.layer-del:hover{color:#ef4444;}
.layer-vis{
  color:rgba(212,175,55,0.4);
  cursor:pointer;
  font-size:12px;
  flex-shrink:0;
  padding:2px;
  transition:var(--transition);
}
.layer-vis.vis-hidden{color:#ef4444;}
.layer-vis:hover{color:var(--gold);}
.layer-lock{
  cursor:pointer;
  font-size:12px;
  color:rgba(255,255,255,.18);
  flex-shrink:0;
  padding:2px;
  transition:var(--transition);
}
.layer-lock:hover{color:rgba(255,255,255,.45);}
.layer-lock.locked-on{color:var(--gold);text-shadow:0 0 8px rgba(212,175,55,.45);}
.layer-drag-handle{cursor:grab;color:var(--text3);font-size:13px;flex-shrink:0;padding-right:4px;}
.layer-drag-handle:hover{color:var(--accent);}
.layer-order-wrap{display:flex;flex-direction:column;gap:0px;flex-shrink:0;}
.layer-order-btn{font-size:9px;cursor:pointer;color:var(--text3);line-height:1;padding:1px 2px;border-radius:3px;transition:var(--transition);}
.layer-order-btn:hover{color:var(--gold);background:rgba(212,175,55,.1);}

/* FORM CONTROLS */
.form-row{margin-bottom:12px;}
.form-label{
  font-size:10px;
  color:var(--text2);
  font-weight:700;
  margin-bottom:6px;
  display:block;
  letter-spacing:.5px;
  text-transform:uppercase;
}
.form-input{
  width:100%;
  padding:8px 12px;
  border-radius:var(--radius);
  border:1px solid var(--border);
  background:var(--bg3);
  color:var(--text);
  font-size:12px;
  transition:var(--transition);
  font-family:'Syne',sans-serif;
}
.form-input:focus{
  outline:none;
  border-color:var(--accent);
  background:var(--bg4);
  box-shadow:0 0 0 2px rgba(212,175,55,0.1);
}
.form-row-2{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:12px;}
.form-row-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:6px;margin-bottom:12px;}
select.form-input{cursor:pointer;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='white'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center;background-size:12px;}
input[type="range"]{width:100%;accent-color:var(--accent);height:5px;cursor:pointer;background:#2d2d44;border-radius:3px;}
.range-num-wrap{display:flex;align-items:center;gap:10px;}
.range-num-wrap input[type="range"]{flex:1;min-width:0;}
.range-num-input{
  width:58px;
  flex:0 0 auto;
  padding:6px 8px;
  border-radius:var(--radius);
  border:1px solid var(--border);
  background:var(--bg3);
  color:var(--text);
  font-size:11px;
  text-align:center;
  font-family:'Syne',sans-serif;
  transition:var(--transition);
}
.range-num-input:focus{outline:none;border-color:var(--accent);}
.range-num-input::-webkit-outer-spin-button,
.range-num-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}
.range-num-input{-moz-appearance:textfield;}
input[type="color"]{
  width:38px;
  height:28px;
  border-radius:6px;
  border:1px solid var(--border);
  background:none;
  cursor:pointer;
  padding:2px;
  transition:var(--transition);
}
input[type="color"]:hover{
  transform:scale(1.05);
}
.color-row{display:flex;align-items:center;gap:8px;}
.color-row input[type="text"]{flex:1;}
.range-row{display:flex;align-items:center;gap:10px;}
.range-row input[type="range"]{flex:1;}
.range-val{font-size:11px;color:var(--text2);min-width:30px;text-align:right;}

/* ADD BUTTONS */
.add-btns{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:16px;}
.add-btn{
  padding:12px 8px;
  border-radius:var(--radius);
  border:1px dashed var(--border2);
  background:rgba(255,255,255,0.01);
  color:var(--text2);
  font-size:10px;
  font-weight:700;
  cursor:pointer;
  text-align:center;
  transition:var(--transition);
  letter-spacing:.5px;
}
.add-btn:hover{
  border-color:var(--accent);
  color:var(--gold);
  background:rgba(212,175,55,0.05);
  transform:translateY(-1px);
}
.add-btn .icon{
  display:block;
  font-size:20px;
  margin-bottom:4px;
  line-height:1;
}

/* RIGHT PANEL — HIDDEN ON DESKTOP */
.right-panel { display: none !important; }
.right-panel-toggle { display: none !important; }

/* CANVAS AREA */
.canvas-area{
  flex:1;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#050508;
  background-image:linear-gradient(rgba(255,255,255,0.01) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,0.01) 1px,transparent 1px);
  background-size:20px 20px;
  position:relative;
  overflow:hidden;
}
.canvas-wrapper{
  position:relative;
  box-shadow:0 20px 60px rgba(0,0,0,0.85), 0 0 0 1px rgba(255,255,255,0.06);
  cursor:crosshair;
  transition:box-shadow var(--transition);
}
.canvas-wrapper:hover{
  box-shadow:0 24px 64px rgba(0,0,0,0.9), 0 0 0 1px rgba(212,175,55,0.2);
}
#mainCanvas{display:block;}

/* ZOOM BAR */
.zoom-bar{
  position:absolute;
  bottom:18px;
  left:50%;
  transform:translateX(-50%);
  background:rgba(15,15,24,0.8);
  backdrop-filter:blur(12px);
  border:1px solid var(--border);
  border-radius:30px;
  padding:6px 14px;
  display:flex;
  align-items:center;
  gap:10px;
  font-size:11px;
  color:var(--text2);
  z-index:10;
  box-shadow:var(--shadow);
}
.zoom-btn{
  background:var(--bg3);
  border:1px solid var(--border);
  color:var(--text);
  width:26px;
  height:26px;
  border-radius:50%;
  cursor:pointer;
  font-size:14px;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:var(--transition);
}
.zoom-btn:hover{background:var(--bg4);border-color:var(--gold);}
#zoomLabel{min-width:36px;text-align:center;font-weight:700;color:var(--text);font-size:11px;}

/* TEMPLATES */
.template-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:10px;}
.template-thumb{
  aspect-ratio:16/9;
  border-radius:var(--radius);
  cursor:pointer;
  border:2px solid transparent;
  transition:var(--transition);
  overflow:hidden;
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:10px;
  font-weight:800;
  letter-spacing:1px;
  color:rgba(255,255,255,0.95);
  text-align:center;
  padding:8px;
  box-shadow:0 4px 12px rgba(0,0,0,0.3);
}
.template-thumb:hover{
  border-color:var(--accent);
  transform:scale(1.04);
  box-shadow:0 8px 16px rgba(212,175,55,0.15);
}

/* GRADIENT PRESETS */
.gradient-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;margin-bottom:12px;}
.grad-swatch{aspect-ratio:1;border-radius:6px;cursor:pointer;border:2px solid transparent;transition:var(--transition);}
.grad-swatch:hover{border-color:var(--text);transform:scale(1.1);}

/* TEXT STYLE BTNS */
.style-row{display:flex;gap:6px;margin-bottom:10px;flex-wrap:wrap;}
.style-btn{
  padding:6px 12px;
  border-radius:var(--radius);
  border:1px solid var(--border);
  background:var(--bg3);
  color:var(--text2);
  font-size:12px;
  cursor:pointer;
  transition:var(--transition);
  font-weight:600;
}
.style-btn:hover,.style-btn.active{background:var(--bg4);color:var(--text);border-color:var(--accent);}

/* UPLOAD AREA */
.upload-zone{
  border:2px dashed var(--border2);
  border-radius:var(--radius-lg);
  padding:20px;
  text-align:center;
  cursor:pointer;
  transition:var(--transition);
  margin-bottom:12px;
  background:rgba(255,255,255,0.01);
}
.upload-zone:hover{
  border-color:var(--accent);
  background:rgba(212,175,55,0.05);
}
.upload-zone p{font-size:11px;color:var(--text2);margin-top:6px;}
.upload-zone .u-icon{font-size:26px;}

/* SHAPE PRESETS */
.shape-btns{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px;}
.shape-btn{
  padding:6px 12px;
  border-radius:var(--radius);
  border:1px solid var(--border);
  background:var(--bg3);
  color:var(--text2);
  font-size:11px;
  cursor:pointer;
  transition:var(--transition);
  font-weight:600;
}
.shape-btn:hover{border-color:var(--accent);color:var(--accent);}
.shape-btn.active{border-color:var(--accent);color:var(--accent);background:rgba(212,175,55,0.12);}

/* FONT PREVIEW */
.font-preview-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-bottom:12px;}
.font-preview-btn{
  padding:8px 10px;
  border-radius:var(--radius);
  border:1px solid var(--border);
  background:var(--bg3);
  color:var(--text);
  font-size:14px;
  cursor:pointer;
  transition:var(--transition);
  text-align:center;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
}
.font-preview-btn:hover{border-color:var(--accent);background:var(--bg4);}
.font-preview-btn.active{border-color:var(--accent);background:rgba(212,175,55,0.1);}
.font-preview-btn small{
  display:block;
  font-family:'Syne',sans-serif;
  font-size:8px;
  color:var(--text3);
  margin-top:2px;
  letter-spacing:.5px;
}
.font-search{margin-bottom:10px;}

/* TOAST */
.toast{
  position:fixed;
  bottom:24px;
  right:24px;
  background:var(--bg4);
  border:1px solid var(--border2);
  color:var(--text);
  padding:12px 20px;
  border-radius:var(--radius-lg);
  font-size:12px;
  font-weight:600;
  z-index:9999;
  transform:translateY(80px);
  opacity:0;
  transition:all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow:var(--shadow);
}
.toast.show{transform:translateY(0);opacity:1;}
.divider{height:1px;background:var(--border);margin:12px 0;}
.tab-pane{display:none;}
.tab-pane.active{display:block;}
.panel-pane{display:none;}
.panel-pane.active{display:block;}

/* BLUR PANEL */
.blur-controls{
  background:var(--bg3);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  padding:12px 14px;
  margin-bottom:16px;
}
.blur-badge{
  display:inline-block;
  padding:4px 10px;
  border-radius:20px;
  font-size:9px;
  font-weight:700;
  letter-spacing:.8px;
  text-transform:uppercase;
  background:rgba(212,175,55,0.18);
  color:var(--gold);
  margin-bottom:8px;
}

/* MASK SECTION */
.mask-btn{
  padding:6px 12px;
  border-radius:var(--radius);
  border:1px solid var(--border);
  background:var(--bg3);
  color:var(--text2);
  font-size:11px;
  cursor:pointer;
  transition:var(--transition);
  display:flex;
  align-items:center;
  gap:6px;
}
.mask-btn:hover,.mask-btn.active{border-color:var(--accent);color:var(--accent);}
.mask-btns{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px;}

/* COLOR SWATCH GRID */
.color-palette{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px;}
.color-swatch{
  width:24px;
  height:24px;
  border-radius:6px;
  cursor:pointer;
  border:1.5px solid transparent;
  transition:var(--transition);
}
.color-swatch:hover{transform:scale(1.2);border-color:var(--text);box-shadow:0 0 8px rgba(255,255,255,0.2);}

/* STICKER GRID */
.sticker-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;margin-bottom:10px;}
.sticker-btn{
  aspect-ratio:1;
  border-radius:var(--radius);
  border:1px solid var(--border);
  background:var(--bg3);
  font-size:20px;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:var(--transition);
}
.sticker-btn:hover{
  border-color:var(--accent);
  background:var(--bg4);
  transform:scale(1.1);
}

/* ADJ ROW */
.adj-row{display:flex;align-items:center;gap:6px;width:100%;margin-bottom:8px;}
.adj-label{
  font-size:10px;
  font-weight:700;
  color:var(--text2);
  letter-spacing:.3px;
  text-transform:uppercase;
  white-space:nowrap;
  width:72px;
  flex-shrink:0;
}
.adj-slider{
  flex:1;
  min-width:0;
  accent-color:var(--accent);
  cursor:pointer;
  height:5px;
  padding:0;
  border:none;
  outline:none;
  box-shadow:none;
  background:transparent;
  -webkit-appearance:auto;
  appearance:auto;
}
.adj-num{
  width:38px;
  flex-shrink:0;
  padding:4px 3px;
  border-radius:6px;
  border:1px solid var(--border);
  background:var(--bg3);
  color:var(--text);
  font-size:10px;
  text-align:center;
  font-family:'Syne',sans-serif;
  outline:none;
  box-shadow:none;
  -moz-appearance:textfield;
}
.adj-num:focus{border-color:var(--accent);}
.adj-num::-webkit-outer-spin-button,
.adj-num::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}

.filter-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-bottom:12px;}
.filter-btn{
  padding:8px 4px;
  border-radius:var(--radius);
  border:1px solid var(--border);
  background:var(--bg3);
  color:var(--text2);
  font-size:10px;
  cursor:pointer;
  transition:var(--transition);
  text-align:center;
  font-weight:700;
  letter-spacing:.3px;
}
.filter-btn:hover,.filter-btn.active{
  border-color:var(--accent);
  color:var(--accent);
  background:rgba(212,175,55,0.06);
}

/* BG REMOVER MOBILE STRIP */
.mobile-tool-strip{display:none;}

/* CONTEXT MENU */
.ctx-menu{
  position:fixed;
  background:rgba(15,15,24,0.92);
  backdrop-filter:blur(16px);
  border:1px solid var(--border2);
  border-radius:var(--radius-lg);
  padding:6px;
  z-index:5000;
  min-width:170px;
  box-shadow:0 12px 40px rgba(0,0,0,0.65);
  animation:ctxFade 0.15s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes ctxFade{
  from{opacity:0;transform:scale(0.95);}
  to{opacity:1;transform:scale(1);}
}
.ctx-item{
  padding:8px 12px;
  font-size:12px;
  cursor:pointer;
  border-radius:8px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  color:var(--text2);
  transition:var(--transition);
  font-weight:500;
}
.ctx-item span.shortcut{
  color:var(--text3);
  font-size:10px;
  font-family:'DM Mono',monospace;
}
.ctx-item:hover{background:var(--bg4);color:var(--text);}
.ctx-item.danger{color:#f87171;}
.ctx-item.danger:hover{background:rgba(239,68,68,0.12);color:#ef4444;}
.ctx-divider{height:1px;background:var(--border);margin:4px 6px;}

/* GRADIENT TEXT BTN */
.gtext-btn{
  padding:6px 12px;
  border-radius:var(--radius);
  border:1px solid var(--border);
  background:var(--bg3);
  font-size:11px;
  cursor:pointer;
  transition:var(--transition);
  color:var(--text2);
}
.gtext-btn.active{border-color:var(--accent);color:var(--accent);}

/* INLINE LABEL VALUE */
.inline-lv{display:flex;justify-content:space-between;align-items:center;margin-bottom:4px;}
.inline-lv .form-label{margin:0;}
.inline-val{font-size:11px;color:var(--accent);font-weight:700;min-width:26px;text-align:right;}

/* TOOLTIP */
[data-tip]{position:relative;}
[data-tip]:hover::after{
  content:attr(data-tip);
  position:absolute;
  bottom:calc(100% + 8px);
  left:50%;
  transform:translateX(-50%);
  background:rgba(15, 15, 24, 0.95);
  color:var(--text);
  font-size:10px;
  padding:5px 10px;
  border-radius:6px;
  white-space:nowrap;
  border:1px solid var(--border2);
  z-index:999;
  pointer-events:none;
  box-shadow:var(--shadow);
  animation:tooltipFade 0.15s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes tooltipFade{
  from{opacity:0;transform:translate(-50%, 4px);}
  to{opacity:1;transform:translate(-50%, 0);}
}

/* MODAL */
.modal-overlay{
  position:fixed;
  inset:0;
  background:rgba(5,5,8,0.65);
  backdrop-filter:blur(6px);
  z-index:8000;
  display:none;
  align-items:center;
  justify-content:center;
}
.modal-overlay.show{display:flex;}
.modal-box{
  background:var(--bg2);
  border:1px solid var(--border2);
  border-radius:var(--radius-lg);
  padding:20px;
  width:340px;
  max-width:92vw;
  max-height:85vh;
  overflow-y:auto;
  box-shadow:0 24px 64px rgba(0,0,0,0.8);
  animation:modalSlide 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes modalSlide{
  from{opacity:0;transform:translateY(20px);}
  to{opacity:1;transform:translateY(0);}
}
.modal-box h3{
  font-size:14px;
  margin-bottom:12px;
  color:var(--gold);
  letter-spacing:1px;
  text-transform:uppercase;
  font-weight:800;
}

/* Keyboard Shortcut List Grid */
.shortcut-list-grid {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 12px;
}
.shortcut-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  border-bottom: 1px solid var(--border);
  padding-bottom: 6px;
}
.shortcut-keys {
  font-family: 'DM Mono', monospace;
  background: var(--bg3);
  padding: 2px 6px;
  border-radius: 4px;
  border: 1px solid var(--border);
  color: var(--gold);
  font-size: 10px;
}

/* ========== MOBILE BASE (header/toast tweaks; layout handled by app-mode) ========== */
@media(max-width:768px){
  html,body{overflow-x:hidden;}
  .toast{bottom:76px !important;right:12px !important;left:12px !important;text-align:center;}
}
@media(max-width:420px){
  .template-grid{grid-template-columns:repeat(2,1fr) !important;}
  .add-btns{grid-template-columns:repeat(3,1fr) !important;}
}

/* ========== APP MODE (MOBILE FULL-SCREEN EDITOR OVERHAUL) ========== */
.app-top-bar{display:none;}
.app-bottom-nav{display:none;}
.mob-add-sheet{display:none;}
.mob-add-sheet-backdrop{display:none;}
.app-sheet-backdrop{display:none;}

@media(max-width:768px){
  body.app-mode .hero-section,
  body.app-mode .sticky-toolbar,
  body.app-mode .page-sections,
  body.app-mode footer,
  body.app-mode .mobile-tool-strip{display:none !important;}

  body.app-mode .sticky-top{position:relative;}
  body.app-mode .nav{height:52px;padding:0 1rem;}
  body.app-mode .nav-tools-btn{display:none !important;}

  body.app-mode .main{
    height:calc(100dvh - 52px - 60px - 44px) !important;
    flex-direction:column !important;
    overflow:hidden !important;
  }
  body.app-mode .app-top-bar{
    display:flex !important;
    align-items:center;
    gap:8px;
    height:44px;
    padding:0 10px;
    background:var(--bg2);
    border-bottom:1px solid var(--border);
    flex-shrink:0;
    overflow-x:auto;
    scrollbar-width:none;
  }
  body.app-mode .app-top-bar::-webkit-scrollbar{display:none;}
  .app-top-btn{
    flex-shrink:0;
    background:var(--bg3);
    border:1px solid var(--border);
    color:var(--text);
    border-radius:8px;
    padding:6px 12px;
    font-size:11px;
    font-weight:700;
    cursor:pointer;
    white-space:nowrap;
    font-family:'Syne',sans-serif;
    display:flex;
    align-items:center;
    gap:4px;
  }
  .app-top-btn svg{width:12px;height:12px;stroke-width:2.5;}
  .app-top-btn:active{background:var(--bg4);}
  .app-top-spacer{flex:1;min-width:8px;}
  .app-top-zoom{font-size:11px;font-weight:800;color:var(--text);min-width:36px;text-align:center;flex-shrink:0;}

  body.app-mode .canvas-area{
    order:1 !important;
    width:100% !important;
    height:100% !important;
    min-height:unset !important;
    padding:8px !important;
    border-bottom:none !important;
    background:#040407 !important;
    overflow:hidden !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
  }
  body.app-mode .canvas-wrapper{
    max-width:100% !important;
    max-height:100% !important;
  }
  body.app-mode .zoom-bar{display:none !important;}
  body.app-mode .canvas-wrapper{transform-origin:center center !important;}

  /* Floating Bottom Sheets on Mobile */
  body.app-mode .left-panel,
  body.app-mode .right-panel{
    position:fixed !important;
    left:10px !important;
    right:10px !important;
    bottom:70px !important;
    width:calc(100% - 20px) !important;
    min-width:unset !important;
    max-height:55vh !important;
    border:1px solid var(--border2) !important;
    border-radius:var(--radius-lg) !important;
    background:rgba(15,15,24,0.95) !important;
    backdrop-filter:blur(20px) !important;
    box-shadow:0 10px 40px rgba(0,0,0,0.7) !important;
    z-index:400 !important;
    transform:translateY(120%) !important;
    transition:transform 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
    order:initial !important;
    flex-direction:column !important;
  }
  body.app-mode .left-panel.sheet-open,
  body.app-mode .right-panel.sheet-open{transform:translateY(0) !important;}

  /* Hide left rail on mobile - sheets open with header/nav */
  body.app-mode .left-panel .panel-tabs-wrap{display:none !important;}
  body.app-mode .left-panel .panel-drawer{
    width:100% !important;min-width:unset !important;border-right:none !important;
  }
  body.app-mode .left-panel .panel-content{width:100% !important;padding:12px 14px;}
  body.app-mode .right-panel-toggle{display:none !important;}

  /* Drag handle on sheets */
  body.app-mode .left-panel::before,
  body.app-mode .right-panel::before{
    content:'';
    display:block;
    width:40px;
    height:5px;
    border-radius:3px;
    background:var(--border2);
    margin:10px auto 4px;
    flex-shrink:0;
  }

  /* Sheet backdrop */
  .app-sheet-backdrop{
    position:fixed;inset:0;background:rgba(0,0,0,0.5);z-index:399;backdrop-filter:blur(2px);
  }
  body.app-mode .app-sheet-backdrop.show{display:block;}

  /* BOTTOM APP NAV BAR */
  .app-bottom-nav{
    position:fixed;
    left:0;
    right:0;
    bottom:0;
    height:60px;
    z-index:500;
    background:rgba(9,9,14,0.96);
    backdrop-filter:blur(16px);
    border-top:1px solid rgba(212,175,55,0.18);
    display:none;
    align-items:stretch;
    justify-content:space-around;
    padding-bottom:env(safe-area-inset-bottom);
  }
  body.app-mode .app-bottom-nav{display:flex !important;}
  .app-nav-btn{
    flex:1;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:3px;
    background:none;
    border:none;
    color:var(--text2);
    font-family:'Syne',sans-serif;
    font-size:9px;
    font-weight:700;
    letter-spacing:.05em;
    text-transform:uppercase;
    cursor:pointer;
    transition:var(--transition);
  }
  .app-nav-btn .anicon{
    width:20px;
    height:20px;
    display:flex;
    align-items:center;
    justify-content:center;
  }
  .app-nav-btn .anicon svg{
    width:100%;
    height:100%;
    stroke-width:2.2;
    transition:var(--transition);
  }
  .app-nav-btn.active,.app-nav-btn:active{color:var(--gold);}
  .app-nav-btn.active .anicon svg{stroke:var(--gold);}
  
  /* Contextual Quick Action Bar on Mobile */
  .mobile-quick-actions-bar {
    position: fixed;
    bottom: 60px;
    left: 0;
    right: 0;
    height: 48px;
    background: rgba(15,15,24,0.9);
    backdrop-filter: blur(12px);
    border-top: 1px solid var(--border);
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 12px;
    overflow-x: auto;
    scrollbar-width: none;
    z-index: 350;
    box-shadow: 0 -4px 16px rgba(0,0,0,0.3);
  }
  .mobile-quick-actions-bar::-webkit-scrollbar { display: none; }
  .mob-quick-btn {
    flex-shrink: 0;
    background: var(--bg3);
    border: 1px solid var(--border);
    color: var(--text);
    border-radius: 6px;
    padding: 6px 12px;
    font-size: 11px;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 4px;
    cursor: pointer;
    -webkit-tap-highlight-color: rgba(212,175,55,0.2);
    touch-action: manipulation;
    user-select: none;
  }
  .mob-quick-btn:active { background: var(--bg4); border-color: var(--gold); }
  .mob-quick-btn svg { width: 12px; height: 12px; stroke-width: 2.2; pointer-events: none; }
  .app-nav-btn {
    touch-action: manipulation;
    -webkit-tap-highlight-color: rgba(212,175,55,0.2);
    user-select: none;
    cursor: pointer;
  }
  .app-top-btn {
    touch-action: manipulation;
    -webkit-tap-highlight-color: rgba(212,175,55,0.2);
    cursor: pointer;
  }
}

/* ACCORDION SECTIONS */
.acc-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 10px;
  margin: 4px 0 0;
  border-radius: var(--radius);
  background: var(--bg3);
  border: 1px solid var(--border);
  cursor: pointer;
  user-select: none;
  transition: var(--transition);
  font-size: 11px;
  font-weight: 700;
  color: var(--text2);
  letter-spacing: .5px;
  text-transform: uppercase;
}
.acc-header:hover { border-color: var(--gold); color: var(--gold); background: var(--bg4); }
.acc-header.open { border-color: var(--border2); color: var(--gold); background: var(--bg4); }
.acc-header .acc-arrow { font-size: 10px; transition: transform .2s; }
.acc-header.open .acc-arrow { transform: rotate(180deg); }
.acc-body { display: none; padding: 8px 2px 4px; }
.acc-body.open { display: block; }