:root{--bg:#121212;--panel:#1e1e1e;--accent:#00bfff;--muted:#b0b0b0;--radius:14px;--shadow:0 6px 20px rgba(0,0,0,0.6)}
body{margin:0;background:var(--bg);color:#fff;font-family:Arial,sans-serif}
.app{max-width:1100px;margin:24px auto;padding:18px}
.header h1{margin:0;color:#fff}
.content{display:flex;gap:18px;flex-wrap:wrap}
.panel{flex:1 1 280px;background:var(--panel);border-radius:var(--radius);padding:16px;box-shadow:var(--shadow)}
.canvas-wrap{flex:2 1 400px;display:flex;justify-content:center;align-items:center}
.stage{position:relative;width:100%;background:#000;border-radius:14px;padding:8px;box-shadow:var(--shadow)}
.owl-img{display:block;max-width:100%;height:auto;border-radius:8px}
.overlay{position:absolute;left:8px;top:8px;width:calc(100% - 16px);height:calc(100% - 16px);z-index:10;pointer-events:auto}
.tab{padding:10px 14px;border:1px solid #333;background:#222;color:#fff;border-radius:var(--radius);cursor:pointer;transition:background .2s}
.tab.active{background:var(--accent)}
.tab-content{display:none;margin-top:12px}
.tab-content.active{display:block}
.tools{display:flex;gap:10px;margin-top:12px;flex-wrap:wrap}
.tool{padding:10px 14px;background:#333;color:#fff;border-radius:var(--radius);cursor:pointer;transition:background .2s}
.tool.active{background:var(--accent)}
.btn{padding:10px 14px;border-radius:var(--radius);border:none;cursor:pointer}
.btn.ghost{background:transparent;border:1px solid #555;color:#fff}
.footer{text-align:center;margin-top:12px;color:var(--muted)}
label{display:block;margin-top:10px;color:var(--muted)}
input[type=range]{width:100%}
input[type=color]{border:none;padding:0;background:none}
@media(max-width:768px){.content{flex-direction:column}.canvas-wrap{order:-1}}