:root, :root[data-theme="dark"]{
  --bg:#141417; --panel:#1c1c21; --panel2:#232329; --line:#2f2f37;
  --text:#e9e8ee; --dim:#8b8a96; --accent:#e0663d; --accent-dim:#a84b2c;
  --canvas-frame:#0f0f11; --canvas-toolbar-bg:#1c1c21;
}
:root[data-theme="light"]{
  --bg:#f3f1ec; --panel:#ffffff; --panel2:#eeece6; --line:#dcd8cf;
  --text:#1c1a17; --dim:#726e64; --accent:#c95a2e; --accent-dim:#a84b2c;
  --canvas-frame:#e4e0d6; --canvas-toolbar-bg:#ffffff;
}
/* The canvas stays visually independent of the theme (per spec) — only its
   frame/toolbar chrome follows light/dark, never the transparent working area itself. */
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{margin:0;background:var(--bg);color:var(--text);
  font-family:'Inter',system-ui,sans-serif;overflow:hidden;
  height:100vh;height:100dvh;
  width:100vw;
}
button{font-family:inherit;cursor:pointer;}
input,select{font-family:inherit;}
::-webkit-scrollbar{width:8px;height:8px;} ::-webkit-scrollbar-thumb{background:#3a3a42;border-radius:4px;}

/* Robust flex column: header/footer size to content, center flexes.
   Never uses a fixed 100vh footer offset, so it can't be pushed off-screen. */
.app{display:flex;flex-direction:column;height:100vh;height:100dvh;height:100svh;overflow:hidden;
  padding-top:env(safe-area-inset-top,0px);
  padding-left:env(safe-area-inset-left,0px); padding-right:env(safe-area-inset-right,0px);}
.topbar{flex:0 0 auto;}
.main{flex:1 1 auto;min-height:0;}
.footer{flex:0 0 auto;padding-bottom:calc(10px + env(safe-area-inset-bottom,0px));}

/* HEADER */
.topbar{display:flex;align-items:center;justify-content:space-between;padding:0 18px;
  border-bottom:1px solid var(--line);background:var(--panel);gap:14px;}
.logo{display:flex;align-items:center;gap:10px;}
.logo-mark{font-family:'Rubik Mono One',sans-serif;font-size:20px;letter-spacing:1px;
  background:linear-gradient(135deg,#f2905e,var(--accent) 60%,#b8401f);
  -webkit-background-clip:text;background-clip:text;color:transparent;}
.logo-mark span{color:var(--text);-webkit-text-fill-color:var(--text);font-family:'Inter',sans-serif;font-weight:700;font-size:11px;letter-spacing:.14em;display:block;margin-top:-2px;}
.top-actions{display:flex;gap:8px;align-items:center;overflow-x:auto;-webkit-overflow-scrolling:touch;
  scrollbar-width:none;flex-shrink:1;min-width:0;}
.top-actions::-webkit-scrollbar{display:none;}
.icon-btn{flex-shrink:0;}
.icon-btn{background:none;border:1px solid var(--line);color:var(--dim);border-radius:6px;
  width:34px;height:34px;display:flex;align-items:center;justify-content:center;font-size:15px;}
.icon-btn:hover{color:var(--text);border-color:#484850;}
.icon-btn:disabled{opacity:.35;cursor:default;}
.mobile-toggle{display:none;}

/* MAIN GRID */
.main{display:grid;grid-template-columns:250px 1fr 290px;min-height:0;}
.side{background:var(--panel);overflow-y:auto;padding:14px;}
.side h3{font-size:10px;letter-spacing:.1em;color:var(--dim);text-transform:uppercase;margin:16px 0 8px;}
.side h3:first-child{margin-top:0;}

/* LEFT: layers + styles */
.left{border-right:1px solid var(--line);}
.add-text-btn{width:100%;padding:10px;background:var(--accent);color:#1a0f0a;border:none;
  border-radius:7px;font-weight:700;font-size:13px;}
.add-text-btn:hover{background:#ec7548;}
.layer-row{display:flex;align-items:center;gap:7px;padding:7px 8px;border-radius:6px;margin-bottom:3px;
  border:1px solid transparent;cursor:pointer;}
.layer-row:hover{background:var(--panel2);}
.layer-row.active{background:#33261e;border-color:var(--accent-dim);}
.layer-row .vis{opacity:.6;font-size:12px;width:16px;text-align:center;}
.layer-row .vis:hover{opacity:1;}
.layer-row .lname{flex:1;font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.layer-row .lbtn{opacity:0;font-size:11px;color:var(--dim);background:none;border:none;padding:2px 4px;}
.layer-row:hover .lbtn{opacity:1;}
.layer-row .lbtn:hover{color:var(--accent);}
.style-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px;}
.style-chip{padding:8px 6px;background:var(--panel2);border:1px solid var(--line);border-radius:6px;
  font-size:11px;text-align:center;color:var(--text);}
.style-chip:hover{border-color:var(--accent);color:var(--accent);}

/* CENTER: canvas */
.center{display:flex;flex-direction:column;background:var(--canvas-frame);min-width:0;}
.canvas-toolbar{display:flex;align-items:center;justify-content:center;gap:6px;padding:8px;
  border-bottom:1px solid var(--line);background:var(--panel);}
.canvas-toolbar button{background:var(--panel2);border:1px solid var(--line);color:var(--dim);
  border-radius:6px;padding:5px 10px;font-size:12px;}
.canvas-toolbar button:hover{color:var(--text);}
.canvas-toolbar button.on{background:var(--accent);color:#1a0f0a;border-color:var(--accent-dim);}
.canvas-wrap{flex:1;display:flex;align-items:center;justify-content:center;overflow:auto;padding:20px;}
#stage{background:
  repeating-conic-gradient(#2a2a30 0% 25%, #1c1c20 0% 50%) 50% / 24px 24px;
  border:1px solid var(--line);box-shadow:0 10px 40px rgba(0,0,0,.5);cursor:grab;}
#stage:active{cursor:grabbing;}
.empty-hint{position:absolute;text-align:center;color:var(--dim);font-size:13px;pointer-events:none;}

/* RIGHT: properties */
.right{border-left:1px solid var(--line);}
.prop-row{margin-bottom:11px;}
.prop-row label{display:flex;justify-content:space-between;font-size:11px;color:var(--dim);margin-bottom:5px;}
.prop-row label b{color:var(--text);font-weight:500;}
.prop-row input[type=range]{width:100%;accent-color:var(--accent);}
.prop-row input[type=text],.prop-row select{width:100%;padding:8px;background:var(--panel2);
  border:1px solid var(--line);color:var(--text);border-radius:6px;font-size:12.5px;}
.prop-row input[type=color]{width:100%;height:34px;border:1px solid var(--line);background:none;border-radius:6px;}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:8px;}
.seg{display:flex;border:1px solid var(--line);border-radius:6px;overflow:hidden;}
.seg button{flex:1;background:var(--panel2);color:var(--dim);border:none;padding:7px;font-size:11px;}
.seg button.on{background:var(--accent);color:#1a0f0a;font-weight:700;}
.tgl{display:flex;align-items:center;justify-content:space-between;padding:8px 0;}
.tgl-switch{width:34px;height:19px;border-radius:10px;background:var(--panel2);border:1px solid var(--line);
  position:relative;cursor:pointer;}
.tgl-switch.on{background:var(--accent-dim);}
.tgl-switch::after{content:'';position:absolute;width:13px;height:13px;border-radius:50%;background:#fff;
  top:2px;left:2px;transition:left .15s;}
.tgl-switch.on::after{left:17px;}
.swatches{display:flex;flex-wrap:wrap;gap:5px;margin-top:6px;}
.swatch{width:20px;height:20px;border-radius:5px;border:1px solid rgba(255,255,255,.15);cursor:pointer;}
.swatch:hover{outline:2px solid var(--accent);}
.hint{font-size:11px;color:var(--dim);text-align:center;padding:30px 10px;}

/* FOOTER */
.footer{display:flex;align-items:center;justify-content:space-between;padding:10px 14px;
  background:var(--panel);border-top:1px solid var(--line);gap:14px;flex-wrap:wrap;}
.footer .note{font-size:11px;color:var(--dim);}
.export-group{display:flex;gap:8px;align-items:center;}
.export-group select{background:var(--panel2);border:1px solid var(--line);color:var(--text);
  border-radius:6px;padding:9px 8px;font-size:12px;min-height:44px;}
.export-btn{background:var(--accent);color:#1a0f0a;border:none;border-radius:7px;padding:12px 20px;
  font-weight:700;font-size:13px;min-height:44px;min-width:44px;}
.export-btn:hover{background:#ec7548;}
.icon-btn{min-width:44px;min-height:44px;}

/* MOBILE */
.panel-toggle{display:none;}
.mobile-toolbar{display:none;}
@media (max-width:880px){
  /* The canvas area and the properties panel become permanent stacked blocks
     (not an overlay that has to be toggled open) — this is the fix for
     "the panel is hidden / doesn't appear": it's now always part of the layout. */
  .main{display:flex;flex-direction:column;position:relative;}
  .side.left{position:absolute;top:0;bottom:0;left:0;width:250px;z-index:30;box-shadow:0 0 30px rgba(0,0,0,.5);
    transform:translateX(-105%);transition:transform .2s;}
  .side.left.open{transform:translateX(0);}
  .center{flex:1 1 auto;min-height:120px;}
  .side.right{position:static;width:auto;max-height:38vh;flex:0 0 auto;overflow-y:auto;
    border-top:1px solid var(--line);border-left:none;
    padding-bottom:calc(10px + env(safe-area-inset-bottom,0px));}
  .sheet-handle{display:none;}
  .mobile-toggle{display:flex;}
  .mobile-toolbar{display:flex;flex:0 0 auto;background:var(--panel);border-top:1px solid var(--line);
    justify-content:space-around;padding:6px calc(4px + env(safe-area-inset-left,0px)) calc(6px + env(safe-area-inset-bottom,0px)) 4px;}
  .mobile-toolbar button{background:none;border:none;color:var(--dim);display:flex;flex-direction:column;
    align-items:center;gap:2px;font-size:10px;min-width:44px;min-height:44px;justify-content:center;}
  .mobile-toolbar button.on, .mobile-toolbar button:active{color:var(--accent);}
  .mobile-toolbar .mt-ic{font-size:17px;}
  .footer{padding:10px 12px;padding-bottom:max(18px, calc(14px + env(safe-area-inset-bottom,0px)));}
  .footer .note{font-size:9.5px;}
  .topbar{padding:0 8px;gap:6px;}
  .logo{gap:6px;min-width:0;}
  .logo-mark{font-size:15px;}
  .logo > div > div:last-child{display:none;} /* hide tagline on mobile to free width for action icons */
  .top-actions{gap:5px;}

  .sheet-header{display:none;} /* no longer needed: the panel is permanently visible, nothing to close */
  .sheet-header button{background:var(--panel2);border:1px solid var(--line);color:var(--text);
    border-radius:6px;padding:6px 12px;font-size:12px;min-height:36px;}
}

/* AI ASSISTANT DRAWER — a real sidebar, not a full-screen takeover */
.ai-drawer-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.35);z-index:110;}
.ai-drawer-overlay.open{display:block;}
.ai-drawer{position:fixed;top:0;right:0;bottom:0;width:400px;max-width:92vw;background:var(--panel);
  border-left:1px solid var(--line);z-index:111;display:flex;flex-direction:column;
  transform:translateX(105%);transition:transform .22s ease;box-shadow:-10px 0 40px rgba(0,0,0,.5);
  padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px);}
.ai-drawer.open{transform:translateX(0);}
.ai-drawer-header{padding:16px 16px 10px;border-bottom:1px solid var(--line);flex:0 0 auto;}
.ai-tabs{display:flex;gap:4px;padding:10px 12px;border-bottom:1px solid var(--line);flex-wrap:wrap;flex:0 0 auto;}
.ai-tab{background:var(--panel2);border:1px solid var(--line);color:var(--dim);border-radius:6px;padding:6px 10px;font-size:10.5px;font-weight:600;}
.ai-tab.on{background:var(--accent);color:#1a0f0a;border-color:var(--accent-dim);}
.ai-body{flex:1 1 auto;overflow-y:auto;padding:14px 16px;}
@media (max-width:880px){ .ai-drawer{width:100%;max-width:100%;} }

/* WordPress admin bar compatibility (only shown to logged-in users who can
   see the toolbar) — keeps it from overlapping the app's own topbar. */
html.wp-toolbar{ padding-top:0 !important; }
body.admin-bar .app{ height:calc(100vh - 32px); height:calc(100dvh - 32px); }
body.admin-bar .ai-drawer, body.admin-bar #modalOverlay{ top:32px; }
@media screen and (max-width:782px){
  body.admin-bar .app{ height:calc(100vh - 46px); height:calc(100dvh - 46px); }
  body.admin-bar .ai-drawer, body.admin-bar #modalOverlay{ top:46px; }
}

/* Site menu bar (Appearance → Menus → assign a menu to "Primary Menu").
   Prints on every page, including the app homepage, so the app's own
   fixed 100vh height is shrunk by exactly this bar's height — same trick
   as the admin-bar rule above, and the two stack correctly together. */
.mf-site-topbar{ display:flex; align-items:center; gap:18px; height:44px; padding:0 16px;
  background:var(--panel); border-bottom:1px solid var(--line); }
.mf-site-topbar-brand{ display:flex; align-items:center; color:var(--text); font-weight:700;
  text-decoration:none; font-size:14px; white-space:nowrap; }
.mf-site-topbar-brand img{ max-height:28px; width:auto; display:block; }
.mf-site-topbar-menu{ list-style:none; display:flex; gap:4px; margin:0; padding:0; overflow-x:auto; }
.mf-site-topbar-menu li{ margin:0; }
.mf-site-topbar-menu a{ display:block; padding:6px 10px; border-radius:6px; color:var(--dim);
  text-decoration:none; font-size:12.5px; font-weight:600; white-space:nowrap; }
.mf-site-topbar-menu a:hover, .mf-site-topbar-menu .current-menu-item a{ color:var(--text); background:var(--panel2); }

body.mf-has-topmenu .app{ height:calc(100vh - 44px); height:calc(100dvh - 44px); }
body.mf-has-topmenu.admin-bar .app{ height:calc(100vh - 76px); height:calc(100dvh - 76px); }
body.mf-has-topmenu .ai-drawer, body.mf-has-topmenu #modalOverlay{ top:44px; }
body.mf-has-topmenu.admin-bar .ai-drawer, body.mf-has-topmenu.admin-bar #modalOverlay{ top:76px; }
@media screen and (max-width:782px){
  body.mf-has-topmenu.admin-bar .app{ height:calc(100vh - 90px); height:calc(100dvh - 90px); }
  body.mf-has-topmenu.admin-bar .ai-drawer, body.mf-has-topmenu.admin-bar #modalOverlay{ top:90px; }
}

/* Site footer (widgets from Appearance → Widgets → "Footer 1/2/3", plus a
   menu assigned to "Footer Menu"). Only ever printed on the normal content
   pages (see footer.php) — the app homepage has no scroll room for it. */
.mf-site-footer{ background:var(--panel); border-top:1px solid var(--line); padding:34px 18px 20px; margin-top:40px; }
.mf-site-footer-widgets{ max-width:900px; margin:0 auto 22px; display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:24px; }
.mf-site-footer-col .mf-widget-title{ font-size:13px; text-transform:uppercase; letter-spacing:.04em; color:var(--text); margin:0 0 10px; }
.mf-site-footer-col{ font-size:13px; color:var(--dim); line-height:1.7; }
.mf-site-footer-col a{ color:var(--dim); }
.mf-site-footer-col a:hover{ color:var(--accent); }
.mf-site-footer-bottom{ max-width:900px; margin:0 auto; display:flex; flex-wrap:wrap; gap:14px 20px; align-items:center;
  justify-content:space-between; padding-top:16px; border-top:1px solid var(--line); font-size:12px; color:var(--dim); }
.mf-site-footer-menu{ list-style:none; display:flex; flex-wrap:wrap; gap:14px; margin:0; padding:0; }
.mf-site-footer-menu a{ color:var(--dim); text-decoration:none; }
.mf-site-footer-menu a:hover{ color:var(--accent); }

/* Fallback WordPress templates (blog posts, search, archives, 404) — used
   only for content other than the MerchForge front page itself, styled to
   match the app's dark theme so the rest of the site stays coherent. */
html:has(.mf-page-wrap), body:has(.mf-page-wrap){ overflow:auto; height:auto; }
.mf-page-wrap{ min-height:100vh; background:var(--bg); color:var(--text); padding:40px 18px; }
.mf-page-inner{ max-width:760px; margin:0 auto; }
.mf-page-wrap.has-sidebar .mf-page-columns{ max-width:980px; margin:0 auto; display:flex; gap:36px; align-items:flex-start; }
.mf-page-wrap.has-sidebar .mf-page-inner{ flex:1 1 auto; min-width:0; margin:0; }
.mf-page-wrap .mf-sidebar{ flex:0 0 260px; font-size:13px; color:var(--dim); line-height:1.7; }
.mf-sidebar .mf-widget{ background:var(--panel); border:1px solid var(--line); border-radius:10px; padding:16px 18px; margin-bottom:16px; }
.mf-sidebar .mf-widget-title{ font-size:13px; text-transform:uppercase; letter-spacing:.04em; color:var(--text); margin:0 0 10px; }
.mf-sidebar a{ color:var(--dim); }
.mf-sidebar a:hover{ color:var(--accent); }
@media (max-width:820px){ .mf-page-wrap.has-sidebar .mf-page-columns{ flex-direction:column; } .mf-sidebar{ flex-basis:auto; width:100%; } }
.mf-post-card{ background:var(--panel); border:1px solid var(--line); border-radius:10px; padding:22px 24px; margin-bottom:18px; }
.mf-post-card h1, .mf-post-card h2{ margin-top:0; }
.mf-post-card h2 a{ color:var(--text); text-decoration:none; }
.mf-post-card h2 a:hover{ color:var(--accent); }
.mf-post-meta{ font-size:12px; color:var(--dim); margin-bottom:14px; }
.mf-post-content, .mf-post-excerpt{ font-size:15px; line-height:1.7; }
.mf-post-content img{ max-width:100%; height:auto; border-radius:8px; }
.mf-archive-title{ margin-bottom:24px; }
.mf-page-wrap a{ color:var(--accent); }
.mf-page-wrap .nav-links{ display:flex; justify-content:space-between; margin-top:20px; font-size:13px; }