*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
:root{--gelb:#F5C800;--gelb-d:#D4AC00;--gruen:#1F5C1F;--schwarz:#111;--bg:#ECEAE3;
  --border:rgba(0,0,0,.08);--border-s:rgba(0,0,0,.14);--t1:#111;--t2:#5A5955;--t3:#9A9890;
  --blur:blur(24px) saturate(180%);--sh:0 4px 20px rgba(0,0,0,.09);--r:12px;--r-sm:8px;--sw:300px}
body{font-family:'Open Sans',-apple-system,sans-serif;background:var(--bg);height:100dvh;overflow:hidden;display:flex;flex-direction:column;-webkit-font-smoothing:antialiased}

/* HEADER */
header{height:48px;background:rgba(255,255,255,.92);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;padding:0 14px;flex-shrink:0;z-index:200}
.hbrand{display:flex;align-items:center;gap:8px}
.hlogo{height:26px;border-radius:5px}
.hname{font-size:14px;font-weight:800;color:var(--t1)}
.htag{font-weight:400;color:var(--t3);font-size:12px}
.hacts{display:flex;gap:6px;align-items:center}
.btn-icon{width:36px;height:36px;border-radius:var(--r-sm);border:1px solid var(--border-s);background:white;cursor:pointer;font-size:16px;display:flex;align-items:center;justify-content:center}
.btn-icon:hover{border-color:var(--gelb)}
.btn-share{font-family:inherit;font-weight:800;font-size:13px;padding:8px 16px;border-radius:var(--r-sm);border:none;background:var(--gelb);color:var(--schwarz);cursor:pointer;box-shadow:0 2px 8px rgba(245,200,0,.3)}
.btn-share:hover{background:var(--gelb-d)}

/* LAYOUT */
.app{display:flex;flex:1;overflow:hidden}

/* DESKTOP SIDEBAR */
.sb{width:var(--sw);background:rgba(250,249,245,.96);backdrop-filter:var(--blur);border-right:1px solid var(--border);overflow-y:auto;flex-shrink:0;scrollbar-width:none}
.sb::-webkit-scrollbar{display:none}
.ss{padding:12px 12px 0}.ss+.ss{border-top:1px solid var(--border);padding-top:12px;margin-top:2px}.ss:last-child{padding-bottom:20px}
.slbl{font-size:9px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--t3);margin-bottom:7px;padding-left:2px}

/* THEME GRID (desktop) */
.tg{display:grid;grid-template-columns:1fr 1fr;gap:4px}
.tc{border-radius:var(--r);padding:8px;cursor:pointer;border:1.5px solid transparent;background:rgba(255,255,255,.6);transition:all .15s}
.tc:hover{border-color:var(--gelb);background:white}.tc.on{border-color:var(--gelb);background:#FFFBEA;box-shadow:0 0 0 3px rgba(245,200,0,.15)}
.te{font-size:15px;display:block;margin-bottom:2px}.tn{font-size:9.5px;font-weight:800;color:var(--t1);line-height:1.2}.ts{font-size:8px;color:var(--t3);margin-top:1px}

/* FORMAT */
.fr{display:flex;gap:4px}
.fp{flex:1;border-radius:var(--r);border:1.5px solid var(--border-s);background:rgba(255,255,255,.5);cursor:pointer;padding:7px 3px;display:flex;flex-direction:column;align-items:center;gap:3px;transition:all .14s}
.fp:hover{border-color:var(--gruen);background:#EAF0EA}.fp.on{border-color:var(--gruen);background:#EAF0EA}
.fsh{background:var(--t3);border-radius:2px}.fp.on .fsh{background:var(--gruen)}.fl{font-size:10px;font-weight:700;color:var(--t2)}.fp.on .fl{color:var(--gruen)}

/* SLIDERS */
.sls{display:flex;flex-direction:column;gap:6px}
.sr{display:flex;align-items:center;gap:6px}
.sr label{font-size:9px;font-weight:700;color:var(--t3);text-transform:uppercase;letter-spacing:.07em;width:52px;flex-shrink:0}
.sr input[type=range]{flex:1;height:3px;border-radius:2px;-webkit-appearance:none;background:var(--border-s);outline:none;cursor:pointer}
.sr input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;border-radius:50%;background:var(--gelb);cursor:pointer;box-shadow:0 1px 4px rgba(0,0,0,.2);border:2px solid white}
.sv{font-size:10px;font-weight:700;color:var(--t2);width:32px;text-align:right;flex-shrink:0}

/* INPUTS */
.is{display:flex;flex-direction:column;gap:7px}
.ig{display:flex;flex-direction:column;gap:2px}
.ilbl{font-size:9px;font-weight:700;color:var(--t3);letter-spacing:.08em;text-transform:uppercase;padding-left:2px}
.if{font-family:inherit;font-size:13px;padding:8px 10px;border-radius:var(--r-sm);border:1.5px solid var(--border-s);background:rgba(255,255,255,.7);color:var(--t1);width:100%;outline:none;transition:border-color .14s}
.if:focus{border-color:var(--gelb);background:white}
textarea.if{resize:none;height:64px;line-height:1.4}

/* TOGGLES */
.tgg{display:flex;flex-direction:column;gap:2px}
.tgr{display:flex;align-items:center;justify-content:space-between;padding:6px 8px;border-radius:var(--r-sm);background:rgba(255,255,255,.5)}
.tgn{font-size:11px;font-weight:600;color:var(--t1)}
.tgsw{width:38px;height:20px;background:var(--border-s);border-radius:10px;cursor:pointer;position:relative;transition:background .2s;flex-shrink:0}
.tgsw.on{background:var(--gruen)}
.tgsw::after{content:'';position:absolute;width:14px;height:14px;border-radius:50%;background:white;top:3px;left:3px;transition:left .2s;box-shadow:0 1px 3px rgba(0,0,0,.2)}
.tgsw.on::after{left:21px}

/* TSH */
.tsh-row{display:flex;gap:4px}
.tsh-btn{flex:1;padding:6px 3px;border-radius:var(--r-sm);border:1.5px solid var(--border-s);background:rgba(255,255,255,.5);cursor:pointer;font-family:inherit;font-size:10px;font-weight:700;color:var(--t2);text-align:center;transition:all .13s}
.tsh-btn:hover{border-color:var(--gelb)}.tsh-btn.on{border-color:var(--gelb);background:#FFFBEA;color:var(--schwarz)}

/* CANVAS */
.ca{flex:1;display:flex;align-items:center;justify-content:center;overflow:hidden;position:relative;
  background:radial-gradient(ellipse at 25% 25%,rgba(245,200,0,.04) 0%,transparent 55%),radial-gradient(ellipse at 75% 75%,rgba(31,92,31,.04) 0%,transparent 55%)}
.cw{position:relative;display:flex;align-items:center;justify-content:center;width:100%;height:100%;padding:16px}
#postCanvas{display:block;border-radius:var(--r);box-shadow:0 12px 40px rgba(0,0,0,.13),0 0 0 1px rgba(0,0,0,.05);max-width:100%;max-height:100%;background:#1A1A1A}
.canvas-hint{position:absolute;bottom:24px;left:50%;transform:translateX(-50%);background:rgba(0,0,0,.7);color:white;font-size:12px;font-weight:600;padding:8px 16px;border-radius:20px;pointer-events:none;opacity:0;transition:opacity .3s}
.canvas-hint.show{opacity:1}

/* ── MOBILE BOTTOM BAR ── */
.mbar{display:none;position:fixed;bottom:0;left:0;right:0;z-index:300;
  background:rgba(255,255,255,.95);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);
  border-top:1px solid var(--border);padding:0 0 env(safe-area-inset-bottom,0);box-shadow:0 -4px 20px rgba(0,0,0,.08)}
.mthemes{display:flex;gap:6px;padding:8px 12px 4px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.mthemes::-webkit-scrollbar{display:none}
.mt{flex-shrink:0;display:flex;align-items:center;gap:5px;padding:6px 12px;border-radius:20px;border:1.5px solid var(--border-s);background:white;font-family:inherit;font-size:11px;font-weight:700;color:var(--t2);cursor:pointer;transition:all .14s;white-space:nowrap}
.mt:hover,.mt.on{border-color:var(--gelb);background:#FFFBEA;color:var(--schwarz)}
.mt .me{font-size:14px}
.mactions{display:flex;justify-content:space-around;padding:6px 8px 8px}
.mact{display:flex;flex-direction:column;align-items:center;gap:2px;background:none;border:none;cursor:pointer;-webkit-tap-highlight-color:transparent;padding:6px 12px;border-radius:var(--r);font-family:inherit}
.mact:active{background:rgba(0,0,0,.05)}
.mact-icon{font-size:22px;line-height:1}
.mact-lbl{font-size:9px;font-weight:700;color:var(--t2)}
.mact-primary{background:var(--gelb);border-radius:var(--r);padding:8px 20px}
.mact-primary .mact-lbl{color:var(--schwarz)}
.mact-primary:active{background:var(--gelb-d)}

/* ── CONTROLS SHEET (mobile) ── */
.sheet-overlay{position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:400;display:none}
.sheet-overlay.open{display:block}
.sheet{position:absolute;bottom:0;left:0;right:0;max-height:80vh;background:white;border-radius:16px 16px 0 0;overflow-y:auto;
  box-shadow:0 -8px 30px rgba(0,0,0,.15);transform:translateY(100%);transition:transform .3s cubic-bezier(.34,1.56,.64,1)}
.sheet-overlay.open .sheet{transform:translateY(0)}
.sheet-handle{width:36px;height:4px;border-radius:2px;background:var(--border-s);margin:10px auto}
.sheet-body{padding:0 16px 24px}
.sheet-body .ss{padding:10px 0 0}.sheet-body .ss+.ss{border-top:1px solid var(--border);padding-top:10px;margin-top:6px}

/* ── SHARE PANEL ── */
.share-overlay{position:fixed;inset:0;background:rgba(0,0,0,.45);backdrop-filter:blur(4px);z-index:500;display:none;align-items:flex-end;justify-content:center;padding:0}
.share-overlay.open{display:flex}
.share-panel{background:white;border-radius:20px 20px 0 0;width:100%;max-width:500px;max-height:80vh;overflow-y:auto;
  box-shadow:0 -10px 40px rgba(0,0,0,.2);animation:sheetUp .25s cubic-bezier(.34,1.56,.64,1);padding-bottom:env(safe-area-inset-bottom,0)}
@keyframes sheetUp{from{transform:translateY(100%)}to{transform:none}}
.share-head{display:flex;align-items:center;justify-content:space-between;padding:16px 18px;font-weight:800;font-size:15px}
.share-close{width:30px;height:30px;border-radius:50%;border:none;background:var(--bg);font-size:15px;cursor:pointer;display:flex;align-items:center;justify-content:center}
.share-section{padding:12px 18px}.share-section+.share-section{border-top:1px solid var(--border)}
.share-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.share-sm{display:flex;flex-direction:column;align-items:center;gap:4px;padding:14px 6px;border-radius:var(--r);border:1.5px solid var(--border-s);background:white;font-family:inherit;font-size:10px;font-weight:700;cursor:pointer;transition:all .14s;color:var(--t2)}
.share-sm:hover{border-color:var(--gelb);background:#FFFBEA;transform:translateY(-2px)}
.share-sm:active{transform:scale(.95)}.share-sm span{font-size:24px}
.share-btns{display:flex;flex-direction:column;gap:5px}
.share-btn{display:flex;align-items:center;gap:10px;padding:10px 14px;border-radius:var(--r-sm);border:1.5px solid var(--border-s);background:white;font-family:inherit;font-size:12px;font-weight:600;cursor:pointer;transition:all .14s;color:var(--t1)}
.share-btn:hover{border-color:var(--gelb);background:#FFFBEA}.share-btn span{font-size:16px}

/* TOAST */
.toast{position:fixed;bottom:100px;left:50%;transform:translateX(-50%) translateY(14px);background:rgba(15,15,15,.92);backdrop-filter:blur(10px);color:white;font-size:13px;font-weight:600;padding:10px 20px;border-radius:20px;box-shadow:0 12px 40px rgba(0,0,0,.2);opacity:0;transition:all .25s cubic-bezier(.34,1.56,.64,1);pointer-events:none;z-index:999;white-space:nowrap}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* ── MOBILE OVERRIDES ── */
@media(max-width:768px){
  .sb{display:none}
  .mbar{display:block}
  .ca{padding:8px 8px 0}
  .cw{padding:8px}
  .hacts .btn-share{padding:7px 12px;font-size:12px}
  header{height:44px}
  .toast{bottom:160px}
  .share-panel{max-width:100%}
}

/* ── DESKTOP: hide mobile elements ── */
@media(min-width:769px){
  .mbar{display:none!important}
  .sheet-overlay{display:none!important}
  .share-overlay{align-items:center;padding:20px}
  .share-panel{border-radius:20px;max-width:440px}
}