:root{
--lsos-panel-bg:#12162a; --lsos-text:#eaeaea; --lsos-label:#9aa3b2;
--lsos-input-bg:#0c1022; --lsos-input-text:#eaeaea;
--lsos-primary-bg:#d61f45; --lsos-primary-text:#fff;
--lsos-ghost-border:#2a3153; --lsos-ghost-text:#eaeaea;
--lsos-card-border:#22273f; --lsos-shadow:rgba(0,0,0,.25);
}
.lsos-wrap{max-width:1100px;width:100%;margin:0 auto;display:grid;grid-template-columns:minmax(0,380px) minmax(0,1fr);gap:24px;align-items:start;box-sizing:border-box;overflow:hidden}
.lsos-card{background:var(--lsos-panel-bg);border:1px solid var(--lsos-card-border);border-radius:16px;box-shadow:0 10px 30px var(--lsos-shadow)}
.lsos-panel{padding:18px}
.lsos-title{margin:0 0 8px;font-size:18px;color:var(--lsos-text)}
.lsos-field{display:grid;gap:8px;margin:14px 0}
.lsos-field label{font-weight:600;color:var(--lsos-label)}
.lsos-hint{margin:6px 0 0 0;font-size:12px;color:var(--lsos-label)}
.lsos-field input[type="text"], .lsos-field input[type="file"]{padding:10px 12px;border-radius:10px;border:1px solid var(--lsos-ghost-border);background:var(--lsos-input-bg);color:var(--lsos-input-text);outline:none;width:100%}
.lsos-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:10px}
.lsos-btn{border:0;border-radius:12px;padding:12px 16px;font-weight:700;cursor:pointer}
.lsos-primary{background:var(--lsos-primary-bg);color:var(--lsos-primary-text)}
.lsos-ghost{background:transparent;border:1px solid var(--lsos-ghost-border);color:var(--lsos-ghost-text)}
.lsos-canvas{padding:12px}
.lsos-inner{aspect-ratio:1;background:#0a0e1c;border-radius:12px;display:flex;align-items:center;justify-content:center;overflow:hidden}
[data-role="canvas"]{max-width:100%;width:100%;height:auto;display:block} @media (max-width: 980px){
.lsos-wrap{grid-template-columns:1fr;padding:0 10px}
.lsos-actions{gap:12px}
.lsos-btn{width:100%}
.lsos-panel, .lsos-canvas{padding:14px}
} @media (max-width: 360px){
.lsos-panel, .lsos-canvas{padding:10px}
.lsos-btn{padding:10px 12px}
}