:root {
  --bg:#08080f;--panel:#0f0f1e;--panel2:#161628;--panel3:#1e1e38;
  --border:rgba(255,255,255,.05);--border2:rgba(255,255,255,.11);
  --accent:#a78bfa;--accent2:#f59e0b;--accent3:#10b981;--accent4:#ef4444;
  --text:#f0f0ff;--muted:#8b93a0;--dim:#2a2a4a;
}
*{margin:0;padding:0;box-sizing:border-box;}
html,body{min-height:100%;background:var(--bg);color:var(--text);font-family:'JetBrains Mono',monospace;}
body{display:flex;flex-direction:column;}

.hdr{height:46px;background:rgba(8,8,18,.98);border-bottom:1px solid var(--border2);display:flex;align-items:center;justify-content:space-between;padding:0 14px;flex-shrink:0;position:sticky;top:0;z-index:50;}
.hdr-logo{display:flex;align-items:center;gap:8px;font-family:'Fredoka',cursive;font-size:1rem;font-weight:700;color:var(--text);text-decoration:none;}
.hdr-logo img{height:26px;width:auto;flex-shrink:0;border-radius:5px;}
.hdr-title{font-family:'Fredoka',cursive;font-size:1rem;font-weight:700;color:var(--accent);}
.hdr-back{font-size:.6rem;font-weight:700;color:var(--muted);padding:4px 10px;border-radius:7px;border:1px solid var(--border2);text-decoration:none;}

#app{flex:1;display:flex;min-height:calc(100vh - 46px);}

/* CONTROLS */
#controls{width:310px;flex-shrink:0;background:var(--panel);border-right:1px solid var(--border2);overflow-y:auto;padding:14px;}
.ctrl-section{margin-bottom:16px;}
.ctrl-section h3,.ctrl-section h2{font-family:'Fredoka',cursive;font-size:.9rem;color:var(--accent);margin-bottom:10px;}
.field{display:flex;flex-direction:column;gap:4px;margin-bottom:10px;}
.field label{font-size:.55rem;color:var(--muted);text-transform:uppercase;letter-spacing:.08em;}
.field input,.field select{width:100%;background:var(--panel2);border:1px solid var(--border2);color:var(--text);padding:6px 8px;border-radius:7px;font-size:.75rem;font-family:inherit;}
.field input:focus,.field select:focus{outline:none;border-color:var(--accent);}
.range-row{display:flex;flex-direction:column;gap:3px;margin-bottom:8px;}
.range-row label{font-size:.55rem;color:var(--muted);display:flex;justify-content:space-between;}
.range-row label span{color:var(--accent2);font-weight:700;}
.range-row input[type=range]{accent-color:var(--accent);width:100%;cursor:pointer;}

/* Style presets */
.style-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-bottom:8px;}
.style-btn{padding:10px 4px;border-radius:9px;border:1px solid var(--border2);background:var(--panel2);cursor:pointer;font-size:.6rem;color:var(--muted);text-align:center;transition:all .12s;display:flex;flex-direction:column;align-items:center;gap:4px;}
.style-btn:hover{background:var(--panel3);color:var(--text);}
.style-btn.on{border-color:var(--accent);color:var(--accent);background:rgba(124,58,237,.12);}
.style-icon{font-size:1.5rem;}

/* Font picker */
.font-grid{display:grid;grid-template-columns:1fr 1fr;gap:5px;margin-bottom:8px;}
.font-btn{padding:8px 6px;border-radius:8px;border:1px solid var(--border2);background:var(--panel2);cursor:pointer;color:var(--muted);transition:all .1s;text-align:center;font-size:.75rem;}
.font-btn:hover{background:var(--panel3);color:var(--text);}
.font-btn.on{border-color:var(--accent);color:var(--accent);background:rgba(124,58,237,.12);}

/* colour chips */
.color-row{display:flex;gap:5px;flex-wrap:wrap;margin-bottom:8px;}
.color-chip{width:26px;height:26px;border-radius:6px;cursor:pointer;border:2px solid transparent;flex-shrink:0;transition:all .1s;}
.color-chip:hover{transform:scale(1.1);}
.color-chip.on{border-color:white;transform:scale(1.15);}

/* effect toggles */
.fx-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-bottom:8px;}
.fx-btn{padding:7px 6px;border-radius:8px;border:1px solid var(--border2);background:var(--panel2);cursor:pointer;font-size:.65rem;color:var(--muted);transition:all .1s;text-align:center;font-family:'JetBrains Mono',monospace;}
.fx-btn:hover{background:var(--panel3);color:var(--text);}
.fx-btn.on{background:rgba(124,58,237,.2);border-color:var(--accent);color:var(--accent);}

/* bg options */
.bg-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:5px;margin-bottom:8px;}
.bg-btn{width:100%;aspect-ratio:16/9;border-radius:6px;border:2px solid transparent;cursor:pointer;transition:all .1s;}
.bg-btn.on{border-color:var(--accent);}

.exp-btn{width:100%;padding:9px;border-radius:9px;border:none;cursor:pointer;font-family:'Fredoka',cursive;font-size:.9rem;font-weight:700;margin-bottom:6px;transition:all .12s;display:inline-flex;align-items:center;justify-content:center;min-height:44px;}
.exp-btn:hover{filter:brightness(1.18);}
.exp-png{background:var(--accent);color:white;}
.exp-trans{background:var(--accent3);color:#000;}
.exp-save{background:var(--accent2);color:#000;}
.exp-grey{background:var(--panel3);color:var(--text);}
.exp-red{background:rgba(239,68,68,.15);color:var(--accent4);}
.exp-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-bottom:6px;}
.exp-grid .exp-btn{margin-bottom:0;font-size:.72rem;padding:8px 4px;border-radius:8px;}
.seo-block{max-width:860px;margin:0 auto;padding:36px 22px 70px;}
.seo-block h1{font-family:'Fredoka',cursive;font-size:1.45rem;color:var(--text);margin-bottom:10px;}
.seo-block h1 span{color:var(--accent);}
.seo-block>p{color:var(--muted);font-size:.78rem;line-height:1.75;margin-bottom:26px;}
.seo-cols{display:grid;grid-template-columns:1fr 1fr;gap:26px;}
.seo-cols h2{font-family:'Fredoka',cursive;font-size:.95rem;color:var(--accent2);margin-bottom:10px;}
.seo-cols ol{padding-left:18px;color:var(--muted);font-size:.74rem;line-height:1.95;}
.seo-cols dt{color:var(--text);font-size:.76rem;font-weight:700;margin-top:13px;}
.seo-cols dd{color:var(--muted);font-size:.73rem;line-height:1.6;margin-top:3px;}
@media(max-width:700px){.seo-cols{grid-template-columns:1fr;}}

/* PREVIEW */
#preview-wrap{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:24px;gap:14px;overflow:auto;}
#logo-canvas{border-radius:10px;max-width:100%;}
.size-btns{display:flex;gap:8px;}
.size-btn{padding:5px 14px;border-radius:7px;border:1px solid var(--border2);background:transparent;color:var(--muted);cursor:pointer;font-size:.65rem;font-family:inherit;transition:all .1s;}
.size-btn:hover{color:var(--text);}
.size-btn.on{background:rgba(124,58,237,.2);border-color:var(--accent);color:var(--accent);}
.canvas-label{font-size:.55rem;color:var(--muted);}

#toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);background:var(--panel2);border:1px solid var(--accent);color:var(--accent);padding:6px 16px;border-radius:8px;font-size:.72rem;z-index:999;opacity:0;transition:opacity .3s;pointer-events:none;}

@media(max-width:700px){
  #app{flex-direction:column;}
  #controls{width:100%;border-right:none;border-bottom:1px solid var(--border2);}
  #preview-wrap{padding:12px;min-height:240px;}
}

/* ── Header consolidation: second bar slimmed to save VH (auto-injected) ── */
.jvds-site-nav + .site-header,
.jvds-site-nav + .hdr,
.jvds-site-nav + header.site-header,
.jvds-site-nav + header.hdr {
  height:36px !important;
  min-height:36px !important;
  padding:0 10px !important;
}
.jvds-site-nav + .site-header .site-logo img,
.jvds-site-nav + .hdr .hdr-logo img { display:none !important; }
@media(pointer:coarse){
  .tb,.bb-tb,.tool-btn,.shape-btn,.char-btn,.tb-btn,.sw,.bb-sw,.colour-swatch,.seq-cell,.loop-dot,.pad,.kit-btn,button {
    min-height:32px;
  }
  .seq-cell{ height:36px !important; min-height:36px !important; }
  .z-btn,.lb{ min-width:32px; min-height:32px; }
}
/* Welcome modal , dark-panel standard */
.modal-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.78);z-index:500;align-items:center;justify-content:center;padding:20px;backdrop-filter:blur(6px);}
.modal-overlay.open{display:flex;}
.modal{background:var(--panel2);border:1px solid var(--border2);border-radius:16px;padding:20px;width:min(460px,94vw);max-height:82vh;overflow:auto;display:flex;flex-direction:column;box-shadow:0 20px 60px rgba(0,0,0,.6);}
.modal h3,.modal h2{font-family:'Fredoka',cursive;font-size:1.05rem;color:var(--accent);margin-bottom:10px;}
.modal-btns{display:flex;gap:8px;margin-top:12px;}
.m-ok{flex:1;padding:9px;border-radius:9px;border:none;cursor:pointer;font-family:'Fredoka',cursive;font-weight:700;background:var(--accent);color:white;}
.m-cancel{flex:1;padding:9px;border-radius:9px;border:1px solid var(--border2);cursor:pointer;font-family:'Fredoka',cursive;background:rgba(255,255,255,.06);color:var(--text);}