:root{--p:#8b5cf6;--bg:#0b0b14;--c:#161625;--t:#f1f1f8;--m:#9a9ab5}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--t);font-family:Cairo,system-ui,sans-serif;padding:env(safe-area-inset-top) 0 env(safe-area-inset-bottom)}
header{display:flex;justify-content:space-between;align-items:center;padding:10px 16px;background:var(--c);border-bottom:1px solid #26263d;position:sticky;top:0;z-index:5}
.brand{display:flex;align-items:center;gap:10px;font-size:18px}.brand img{height:40px;border-radius:8px;background:#fff}.brand span{color:var(--p)}
.hr{display:flex;gap:8px;align-items:center}.badge{background:var(--p);padding:4px 12px;border-radius:20px;font-size:13px}
main{max-width:900px;margin:16px auto;padding:0 12px;display:grid;gap:14px}.card{background:var(--c);border-radius:16px;padding:18px;border:1px solid #26263d}
.center{max-width:380px;text-align:center}.big{width:160px;border-radius:12px;background:#fff}
input,select,button,.btn{font:inherit;border-radius:10px;border:1px solid #33334f;background:#10101c;color:var(--t);padding:10px;width:100%}
button,.btn{background:var(--p);border:0;cursor:pointer;font-weight:700;display:block;text-align:center;text-decoration:none;margin-top:10px}
button:disabled{opacity:.4}button.ghost{background:transparent;border:1px solid #444;width:auto;margin:0;padding:6px 12px}.row{display:flex;gap:8px}.row button{margin-top:10px}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px;margin:14px 0}label{display:grid;gap:6px;font-size:14px;color:var(--m)}
.drop{border:2px dashed var(--p);border-radius:14px;padding:30px;text-align:center;cursor:pointer}.drop.on{background:#8b5cf622}
.bar{height:6px;background:#10101c;border-radius:4px;margin-top:12px;overflow:hidden}.bar i{display:block;height:100%;width:0;background:var(--p);transition:.2s}
.cmp{position:relative;overflow:hidden;border-radius:12px;background:#000;min-height:160px}.cmp canvas{display:block;width:100%;height:auto}
#cv2{position:absolute;inset:0;clip-path:inset(0 0 0 50%)}#split{position:absolute;bottom:8px;left:5%;width:90%;padding:0}
.plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px}.plan{border:1px solid #33334f;border-radius:12px;padding:14px}.plan.cur{border-color:var(--p);background:#8b5cf61a}
.muted{color:var(--m);font-size:13px}.err{color:#f87171}.hide{display:none!important}
.view{position:relative;height:62vh;min-height:320px;border-radius:12px;overflow:hidden;touch-action:none;background:#000}
.view canvas{width:100%;height:100%;display:block;cursor:grab}.tools{position:absolute;bottom:10px;left:50%;transform:translateX(-50%);display:flex;gap:6px}
.tools button{width:44px;margin:0;padding:6px;background:#000b;border:1px solid #555}.tag{position:absolute;top:8px;background:#000b;padding:2px 10px;border-radius:8px;font-size:13px}.tag.l{left:8px}.tag.r{right:8px}