:root{
 font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
 color:#f7f7f8;background:#08080b;color-scheme:dark;
 --panel:#111116;--panel2:#17171d;--line:#292932;--muted:#8b8b98;
 --accent:#8b5cf6;--accent2:#6d5dfc;--danger:#ff7f91;
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;max-width:100%;overflow-x:hidden;background:#08080b}
button,input,select{font:inherit}
button{cursor:pointer}
button:disabled{opacity:.38;cursor:not-allowed}
.hidden{display:none!important}
.creator-app{min-height:100dvh;background:radial-gradient(circle at 10% -10%,rgba(139,92,246,.12),transparent 25%),#08080b}
.creator-header{
 height:68px;position:sticky;top:0;z-index:60;display:flex;align-items:center;gap:12px;
 padding:0 12px;border-bottom:1px solid #202027;background:rgba(9,9,13,.95);backdrop-filter:blur(18px)
}
.creator-brand{display:flex;align-items:center;gap:8px;min-width:220px}
.creator-brand img{width:36px;height:36px;border-radius:11px;object-fit:cover;background:#0a0a0a}
.creator-brand div{display:flex;flex-direction:column;min-width:0}
.creator-brand small{font-size:7px;letter-spacing:.18em;color:#777783;font-weight:900}
.creator-brand strong{font-size:15px;white-space:nowrap}
.creator-back{
 width:36px;height:36px;display:grid;place-items:center;text-decoration:none;border:1px solid #303039;
 border-radius:11px;background:#16161c;color:#fff;font-size:21px
}
.creator-name{
 flex:1;min-width:120px;max-width:360px;border:1px solid #292932;border-radius:10px;
 background:#141419;color:#fff;padding:9px 11px;outline:none
}
.creator-mode-switch{display:flex;padding:3px;border:1px solid #2c2c35;border-radius:11px;background:#111116}
.creator-mode-switch button{border:0;border-radius:8px;padding:7px 12px;background:transparent;color:#858591;font-weight:900;font-size:9px}
.creator-mode-switch button.active{background:#f3f3f5;color:#09090b}
.creator-head-actions{display:flex;gap:5px}
.creator-head-actions button,.creator-viewbar button,.creator-layer-actions button,.creator-panel>button,.creator-inline button,.creator-send-row button{
 border:1px solid #303039;border-radius:9px;background:#19191f;color:#eeeef2;padding:8px 10px;font-weight:800
}
.creator-head-actions button{min-width:38px;height:38px}
button.accent,.creator-primary{border:0!important;background:linear-gradient(100deg,var(--accent),var(--accent2))!important;color:#fff!important}

.creator-layout{
 height:calc(100dvh - 68px);display:grid;grid-template-columns:72px minmax(0,1fr) 304px;
 gap:8px;padding:8px;overflow:hidden
}
.creator-tools{
 display:flex;flex-direction:column;gap:5px;padding:5px;border:1px solid #25252d;border-radius:16px;
 background:#0f0f14;overflow:auto
}
.creator-tool{
 min-height:58px;border:1px solid #292932;border-radius:11px;background:#17171d;color:#92929e;
 display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px
}
.creator-tool b{font-size:19px;line-height:1}.creator-tool span{font-size:7px;font-weight:900}
.creator-tool.active{background:#f3f3f5;color:#09090b;border-color:#fff}
.creator-center{min-width:0;min-height:0;display:grid;grid-template-rows:auto minmax(0,1fr) auto;gap:6px}
.creator-viewbar{
 min-height:42px;display:flex;align-items:center;justify-content:space-between;gap:8px;
 padding:4px 6px;border:1px solid #25252d;border-radius:13px;background:#101015;overflow-x:auto
}
.creator-viewbar-group{display:flex;gap:4px;flex:0 0 auto}
.creator-viewbar button{padding:6px 9px;font-size:9px}
.creator-viewbar button.active{border-color:#8b5cf6;background:#2c2044}
.creator-viewbar .view-value{min-width:58px;color:#cfc6ff}
.creator-viewport{
 position:relative;min-width:0;min-height:0;overflow:hidden;border:1px solid #2a2a33;border-radius:18px;
 background:#0d0d12;touch-action:none;user-select:none;overscroll-behavior:none
}
.creator-artboard{
 position:absolute;left:50%;top:50%;transform-origin:50% 50%;
 box-shadow:0 24px 70px rgba(0,0,0,.5);background-color:transparent;
 background-image:
  linear-gradient(45deg,#ddd 25%,transparent 25%),
  linear-gradient(-45deg,#ddd 25%,transparent 25%),
  linear-gradient(45deg,transparent 75%,#ddd 75%),
  linear-gradient(-45deg,transparent 75%,#ddd 75%);
 background-size:20px 20px;background-position:0 0,0 10px,10px -10px,-10px 0
}
.creator-artboard.paper-white{background:#fff;background-image:none}
.creator-artboard.paper-dark{background:#25252b;background-image:none}
.creator-artboard.grid-on:after{
 content:"";position:absolute;inset:0;pointer-events:none;
 background-image:linear-gradient(#8b5cf622 1px,transparent 1px),linear-gradient(90deg,#8b5cf622 1px,transparent 1px);
 background-size:40px 40px
}
#creatorCanvas{display:block;width:100%;height:100%;touch-action:none}
.creator-center-guides{display:none;position:absolute;inset:0;pointer-events:none}
.creator-artboard.symmetry-on .creator-center-guides{display:block}
.creator-center-guides:before,.creator-center-guides:after{content:"";position:absolute;background:#a78bfa99;z-index:2}
.creator-center-guides:before{left:50%;top:0;bottom:0;width:1px}
.creator-center-guides:after{top:50%;left:0;right:0;height:1px}
.creator-brush-cursor{
 position:absolute;z-index:12;display:none;width:14px;height:14px;border:1px solid #fff;border-radius:50%;
 transform:translate(-50%,-50%);pointer-events:none;box-shadow:0 0 0 1px #000,0 0 8px #8b5cf688
}
.creator-gesture-hint{
 position:absolute;left:50%;bottom:10px;transform:translateX(-50%);z-index:8;white-space:nowrap;
 border:1px solid #303039;border-radius:999px;background:#0d0d12dd;color:#777783;padding:6px 10px;font-size:8px;font-weight:800;pointer-events:none
}
.creator-navigator{
 position:absolute;right:10px;bottom:10px;z-index:9;width:104px;height:104px;border:1px solid #34343e;border-radius:11px;
 background:#f5f5f5;box-shadow:0 10px 30px #0008;pointer-events:none
}
.creator-statusbar{
 min-height:28px;display:flex;justify-content:space-between;gap:10px;align-items:center;
 padding:4px 8px;border:1px solid #24242c;border-radius:10px;background:#101015;color:#777783;font-size:8px
}
#creatorAutosaveState.saving{color:#f0c675}#creatorAutosaveState.saved{color:#7fcca0}#creatorAutosaveState.error{color:#ff8c9b}
.creator-mobile-tools{display:none}

.creator-panels{min-height:0;display:flex;flex-direction:column;gap:7px;overflow-y:auto;overflow-x:hidden;padding-right:2px}
.creator-panel{border:1px solid #272730;border-radius:15px;background:#111116;padding:9px}
.creator-panel-title{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:7px}
.creator-panel-title span{color:#a78bfa;font-size:7px;letter-spacing:.16em;font-weight:1000}
.creator-panel-title strong{font-size:10px}
.creator-panel-title button{border:1px solid #303039;border-radius:8px;background:#19191f;color:#fff;padding:5px 7px;font-size:8px}
.creator-select,.creator-save-card input,.creator-save-card select{
 width:100%;border:1px solid #303039;border-radius:9px;background:#19191f;color:#fff;padding:8px;outline:none
}
.creator-range{display:block;margin-top:7px}.creator-range>span{display:flex;justify-content:space-between;color:#8b8b96;font-size:8px;margin-bottom:3px}
.creator-range b{color:#d7d7dd}.creator-range input{width:100%;margin:0;accent-color:var(--accent)}
.creator-color-row{display:flex;align-items:center;gap:9px}
#creatorColor{width:48px;height:38px;padding:2px;border:1px solid #34343e;border-radius:10px;background:#17171d}
.creator-swatches{display:flex;gap:5px;flex:1}
.creator-swatches button{width:27px;height:27px;border:2px solid #35353e;border-radius:50%;padding:0;background:var(--swatch)}
.creator-swatches button.active{border-color:#fff;box-shadow:0 0 0 2px #8b5cf6}
.creator-segment{display:grid;grid-template-columns:repeat(3,1fr);gap:3px;margin-top:6px}
.creator-segment button{border:1px solid #303039;border-radius:8px;background:#18181e;color:#8e8e99;padding:6px 3px;font-size:7px}
.creator-segment button.active{border-color:#8b5cf6;color:#fff;background:#2b2042}
.creator-layer-panel{min-height:180px}
.creator-layer-list{display:grid;gap:4px;max-height:220px;overflow:auto}
.creator-layer-item{
 display:grid;grid-template-columns:26px minmax(0,1fr) 26px;align-items:center;gap:5px;
 border:1px solid #292932;border-radius:9px;background:#17171d;padding:5px
}
.creator-layer-item.active{border-color:#8b5cf6;background:#211a30}
.creator-layer-item button{width:26px;height:26px;border:0;border-radius:7px;background:#25252d;color:#fff;padding:0}
.creator-layer-item input{min-width:0;border:0;background:transparent;color:#eee;font-size:8px;outline:none}
.creator-layer-actions{display:grid;grid-template-columns:34px 34px 1fr 1fr;gap:4px;margin-top:6px}
.creator-layer-actions button{padding:6px 4px;font-size:7px}.creator-layer-actions .danger{color:var(--danger)}
.creator-export-panel{display:grid;gap:6px}
.creator-export-panel>button{width:100%}
.creator-send-row{display:grid;grid-template-columns:1fr 1fr;gap:5px}
.creator-send-row button{font-size:8px;padding:7px 4px}
.easy-mode .pro-control{display:none}

.creator-modal{
 position:fixed;inset:0;z-index:200;display:grid;place-items:center;padding:max(18px,env(safe-area-inset-top)) 18px max(18px,env(safe-area-inset-bottom));
 background:rgba(0,0,0,.78);backdrop-filter:blur(12px);overflow:auto
}
.creator-modal-card{width:min(860px,100%);max-height:92dvh;overflow:auto;border:1px solid #33333d;border-radius:23px;background:#111116;padding:16px;box-shadow:0 30px 100px #000}
.creator-modal-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:14px}
.creator-modal-head small{font-size:8px;letter-spacing:.18em;color:#a78bfa;font-weight:900}
.creator-modal-head h1,.creator-modal-head h2{margin:3px 0 0}.creator-modal-head h1{font-size:25px}.creator-modal-head h2{font-size:20px}
.creator-modal-head>a,.creator-modal-head>button{width:36px;height:36px;display:grid;place-items:center;text-decoration:none;border:1px solid #33333d;border-radius:10px;background:#19191f;color:#fff;font-size:20px}
.creator-start-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.creator-start-option{
 min-height:120px;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:4px;
 border:1px solid #303039;border-radius:17px;background:#18181f;color:#fff;padding:15px;text-align:left
}
.creator-start-option b{font-size:24px}.creator-start-option strong{font-size:14px}.creator-start-option span{font-size:9px;color:#92929d}
.creator-start-option.primary{background:linear-gradient(135deg,#7650ea,#594ff0)}
.creator-start-option.primary span{color:#e5deff}
.creator-start-settings{display:grid;grid-template-columns:1fr 1.7fr;gap:9px;margin-top:10px}
.creator-start-settings label,.creator-save-card>label{display:flex;flex-direction:column;gap:5px;color:#898995;font-size:9px}
.creator-inline{display:grid;grid-template-columns:1fr auto;gap:5px}
.creator-start-lists{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px}
.creator-list-title{font-size:8px;letter-spacing:.14em;color:#8b8b96;font-weight:900;margin-bottom:6px}
.creator-start-list{display:grid;gap:5px;max-height:210px;overflow:auto}
.creator-start-item{
 display:grid;grid-template-columns:42px minmax(0,1fr) auto;align-items:center;gap:7px;
 border:1px solid #292932;border-radius:10px;background:#17171d;padding:6px
}
.creator-start-item img{width:42px;height:42px;object-fit:contain;border-radius:7px;background:#eee}
.creator-start-item span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:9px}
.creator-start-actions{display:flex;gap:3px}
.creator-start-item button{border:1px solid #303039;border-radius:8px;background:#24242c;color:#fff;padding:6px;font-size:8px}
.creator-start-item button.danger{color:var(--danger)}
.creator-empty-list{padding:12px;border:1px dashed #303039;border-radius:10px;color:#73737e;font-size:9px;text-align:center}
.creator-save-card{width:min(460px,100%);display:grid;gap:9px}
.creator-sticker-preview{min-height:180px;display:grid;place-items:center;border:1px solid #303039;border-radius:14px;background-color:#eee;background-image:linear-gradient(45deg,#ddd 25%,transparent 25%),linear-gradient(-45deg,#ddd 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#ddd 75%),linear-gradient(-45deg,transparent 75%,#ddd 75%);background-size:18px 18px;background-position:0 0,0 9px,9px -9px,-9px 0}
.creator-sticker-preview img{max-width:90%;max-height:220px;object-fit:contain}
.creator-modal-actions{display:grid;grid-template-columns:1fr 1fr;gap:7px}
.creator-modal-actions button{border:1px solid #303039;border-radius:10px;background:#19191f;color:#fff;padding:11px;font-weight:900}
.creator-toast{
 position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom));z-index:300;transform:translate(-50%,20px);
 max-width:calc(100% - 24px);border:1px solid #3a3a44;border-radius:999px;background:#15151bdd;color:#fff;
 padding:10px 15px;font-size:9px;font-weight:800;opacity:0;pointer-events:none;transition:.18s
}
.creator-toast.show{opacity:1;transform:translate(-50%,0)}

@media(max-width:1050px){
 .creator-layout{grid-template-columns:62px minmax(0,1fr) 274px}
 .creator-brand{min-width:180px}.creator-tool{min-height:52px}
}
@media(max-width:820px){
 .creator-header{
  height:calc(58px + env(safe-area-inset-top));min-height:calc(58px + env(safe-area-inset-top));
  padding:env(safe-area-inset-top) max(8px,env(safe-area-inset-right)) 0 max(8px,env(safe-area-inset-left));gap:5px
 }
 .creator-brand{min-width:0;flex:1}.creator-brand img{display:none}.creator-brand small{display:none}.creator-brand strong{font-size:14px}
 .creator-back{width:34px;height:34px;flex:0 0 34px}.creator-name{display:none}
 .creator-mode-switch button{padding:6px 8px}.creator-head-actions{gap:3px}.creator-head-actions button{min-width:34px;height:34px;padding:5px;font-size:10px}
 #creatorSaveProject{font-size:0}#creatorSaveProject:after{content:"Sichern";font-size:8px}
 .creator-layout{
  height:auto;min-height:calc(100dvh - 58px - env(safe-area-inset-top));display:flex;flex-direction:column;
  gap:6px;padding:6px;overflow:visible
 }
 .creator-tools{display:none}
 .creator-center{display:flex;flex-direction:column;min-height:0}
 .creator-viewbar{order:0}
 .creator-viewport{height:clamp(360px,58dvh,620px);min-height:360px;flex:0 0 auto}
 .creator-statusbar{order:2}.creator-mobile-tools{order:3}
 .creator-mobile-tools{
  display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:3px;padding:4px;border:1px solid #292932;border-radius:13px;background:#101015
 }
 .creator-mobile-tools button{height:43px;border:0;border-radius:9px;background:transparent;color:#858591;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px}
 .creator-mobile-tools button span{font-size:6px;font-weight:900}.creator-mobile-tools button.active{background:#f2f2f4;color:#09090b}
 .creator-panels{display:grid;grid-template-columns:1fr 1fr;overflow:visible;padding:0}
 .creator-layer-panel,.creator-export-panel{grid-column:1/-1}
 .creator-gesture-hint{font-size:7px}.creator-navigator{width:82px;height:82px}
}
@media(max-width:520px){
 .creator-brand strong{font-size:12px}.creator-mode-switch{display:none}
 .creator-viewbar{justify-content:flex-start}.creator-viewbar button{padding:6px 7px}
 .creator-viewbar-group:nth-child(2){display:none}
 .creator-viewport{height:clamp(330px,54dvh,520px);min-height:330px;border-radius:15px}
 .creator-statusbar span:nth-child(2){display:none}
 .creator-panels{grid-template-columns:1fr}
 .creator-layer-panel,.creator-export-panel{grid-column:auto}
 .creator-start-grid,.creator-start-settings,.creator-start-lists{grid-template-columns:1fr}
 .creator-start-option{min-height:94px}.creator-modal{padding:calc(8px + env(safe-area-inset-top)) 8px calc(8px + env(safe-area-inset-bottom))}
 .creator-modal-card{padding:11px;border-radius:17px;max-height:96dvh}
 .creator-modal-head h1{font-size:20px}.creator-gesture-hint{display:none}
 .creator-navigator{width:68px;height:68px;right:7px;bottom:7px}
}
@media(prefers-reduced-motion:reduce){.creator-toast{transition:none}}