:root{--bg:#0b0e11;--panel:#131a20;--panel-2:#1a222a;--line:#27313b;--text:#e8eef3;--muted:#8b97a3;--green:#009639;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}*{box-sizing:border-box}html,body,#root{height:100%;margin:0}body{background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased;font-family:Cairo,Noto Kufi Arabic,Segoe UI,Tahoma,sans-serif;overflow:hidden}button,input,select{color:inherit;font-family:inherit}.app{height:100%;display:flex}.stage{flex-direction:column;flex:1;min-width:0;display:flex}.viewport{background:#0a0d10;flex:1;min-height:0;position:relative}.viewport canvas{display:block}.viewport-tag{top:14px;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);pointer-events:none;background:#080c109e;border:1px solid #ffffff17;border-radius:10px;flex-direction:column;gap:2px;padding:9px 14px;display:flex;position:absolute;inset-inline-start:16px}.viewport-tag strong{font-size:13px;font-weight:600}.viewport-tag span{color:var(--muted);font-size:11px}.loading{height:100%;color:var(--muted);place-items:center;font-size:14px;display:grid}.strip{border-top:1px solid var(--line);background:#0e1216;flex-shrink:0;height:290px}.editor-wrap{width:100%;height:100%;position:relative}.editor-canvas{touch-action:none;cursor:crosshair;display:block}.editor-hud{bottom:10px;color:var(--muted);pointer-events:none;background:#080c10b3;border-radius:6px;padding:4px 10px;font-size:11px;position:absolute;inset-inline-end:14px}.sidebar{background:var(--panel);border-inline-end:1px solid var(--line);flex-shrink:0;width:330px;padding-bottom:28px;overflow-y:auto}.brand{border-bottom:1px solid var(--line);align-items:center;gap:11px;padding:18px 18px 16px;display:flex}.brand .dot{background:linear-gradient(145deg, var(--green), #016b29);border-radius:9px;flex-shrink:0;width:34px;height:34px;box-shadow:inset 0 0 0 1px #ffffff14}.brand strong{letter-spacing:.3px;font-size:16px;display:block}.brand small{color:var(--muted);font-size:11px}.panel{border-bottom:1px solid var(--line);padding:16px 18px}.panel h3{letter-spacing:1.1px;color:var(--muted);margin:0 0 12px;font-size:11px;font-weight:700}.tools{grid-template-columns:repeat(4,1fr);gap:6px;display:grid}.tool{background:var(--panel-2);border:1px solid var(--line);cursor:pointer;border-radius:8px;flex-direction:column;align-items:center;gap:4px;padding:9px 2px;font-size:10px;transition:all .12s;display:flex}.tool span{font-size:16px;line-height:1}.tool:hover{border-color:#3c4a58}.tool.on{border-color:var(--green);background:#0096392e}.row{color:var(--muted);align-items:center;gap:10px;margin-top:11px;font-size:12px;display:flex}.row input[type=range]{accent-color:var(--green);flex:1;min-width:0}.row b{color:var(--text);text-align:center;min-width:30px;font-size:12px}.check{color:var(--muted);cursor:pointer;align-items:center;gap:8px;margin-top:12px;font-size:12px;display:flex}.check input{accent-color:var(--green)}.btns{gap:6px;margin-top:12px;display:flex}.btns button{background:var(--panel-2);border:1px solid var(--line);cursor:pointer;border-radius:7px;flex:1;padding:8px;font-size:11px}.btns button:hover{border-color:#3c4a58}.btns .danger:hover{color:#ff8b96;border-color:#b8323f}button.primary{background:var(--green);cursor:pointer;color:#fff;border:0;border-radius:8px;width:100%;margin-top:12px;padding:10px;font-size:12px;font-weight:600}button.primary:hover{background:#00ad42}.swatches{flex-wrap:wrap;gap:7px;display:flex}.sw{border:2px solid var(--line);cursor:pointer;border-radius:9px;width:38px;height:38px;padding:0}.sw.on{border-color:#fff;box-shadow:0 0 0 3px #ffffff24}.muted{color:var(--muted);margin-top:9px;font-size:11px;display:block}.text-in{background:var(--panel-2);border:1px solid var(--line);border-radius:8px;outline:none;width:100%;padding:10px 12px;font-size:15px}.text-in:focus{border-color:var(--green)}.fonts{gap:6px;margin-top:8px;display:flex}.chip{background:var(--panel-2);border:1px solid var(--line);cursor:pointer;border-radius:7px;flex:1;padding:7px 4px;font-size:11px}.chip.on{border-color:var(--green);color:#4ade80}.stats{gap:8px;display:flex}.stats div{text-align:center;background:var(--panel-2);border-radius:9px;flex:1;padding:11px}.stats b{font-size:19px;display:block}.stats span{color:var(--muted);font-size:10px}.legend{margin:12px 0 0;padding:0;list-style:none}.legend li{align-items:center;gap:9px;padding:5px 0;font-size:12px;display:flex}.legend i{border:1px solid #ffffff2e;border-radius:4px;width:13px;height:13px}.legend b{color:var(--muted);margin-inline-start:auto;font-weight:500}::-webkit-scrollbar{width:9px}::-webkit-scrollbar-track{background:0 0}::-webkit-scrollbar-thumb{background:#2b3540;border-radius:5px}::-webkit-scrollbar-thumb:hover{background:#3a4653}.fonts.wrap{flex-wrap:wrap}.fonts.wrap .chip{flex:none;padding:6px 10px}button.primary.ghost{background:var(--panel-2);border:1px solid var(--line);color:var(--text)}button.primary.ghost:hover:not(:disabled){border-color:var(--green)}button.primary:disabled{opacity:.45;cursor:default}.bar{background:var(--panel-2);border-radius:3px;height:4px;margin-top:9px;overflow:hidden}.bar i{background:var(--green);height:100%;transition:width .15s;display:block}.viewport.cinema{z-index:60;background:#000;position:fixed;inset:0}.cine{pointer-events:none;position:absolute;inset:0}.vignette{background:radial-gradient(at 50% 45%,#0000 42%,#0009 100%);position:absolute;inset:0}.cine-top{top:24px;justify-content:space-between;align-items:center;display:flex;position:absolute;inset-inline:28px}.cine-top strong{letter-spacing:.3px;text-shadow:0 2px 14px #000000f2;font-size:15px}.cine-top button{pointer-events:auto;cursor:pointer;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#0c10168c;border:1px solid #ffffff29;border-radius:8px;padding:7px 15px;font-size:12px}.cine-top button:hover{border-color:#fff6}.cine-bar{bottom:0;background:#ffffff17;height:3px;position:absolute;inset-inline:0}.cine-bar i{background:var(--green);height:100%;animation:linear forwards cineGrow;display:block}@keyframes cineGrow{0%{width:0}to{width:100%}}.drop{cursor:pointer;text-align:center;border:1px dashed var(--line);background:var(--panel-2);border-radius:10px;flex-direction:column;align-items:center;gap:8px;padding:16px 12px;transition:all .15s;display:flex}.drop:hover{border-color:#46525f}.drop.on{border-color:var(--green);background:#0096391a}.drop span{color:var(--muted);word-break:break-all;font-size:11px}.drop img{background:repeating-conic-gradient(#2a323a 0% 25%,#202730 0% 50%) 0 0/14px 14px;border-radius:6px;max-width:100%;max-height:92px}.sw.add{background:var(--panel-2);color:var(--muted);place-items:center;font-size:20px;line-height:1;display:grid}.sw.add:hover{border-color:var(--green);color:var(--text)}.hexrow{align-items:center;gap:7px;margin-top:10px;display:flex}.hexrow input[type=color]{cursor:pointer;border:1px solid var(--line);background:0 0;border-radius:7px;width:38px;height:34px;padding:0}.hexrow .hex{background:var(--panel-2);border:1px solid var(--line);border-radius:7px;outline:none;flex:1;min-width:0;padding:8px 10px;font-family:ui-monospace,Cascadia Code,monospace;font-size:12px}.hexrow .hex:focus{border-color:var(--green)}.hexrow .del{cursor:pointer;background:var(--panel-2);border:1px solid var(--line);width:34px;height:34px;color:var(--muted);border-radius:7px;font-size:12px}.hexrow .del:hover:not(:disabled){color:#ff8b96;border-color:#b8323f}.hexrow .del:disabled{opacity:.35;cursor:default}.refview{top:14px;cursor:pointer;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:#080c109e;border:1px solid #ffffff17;border-radius:10px;padding:9px 14px;font-size:12px;position:absolute;inset-inline-end:16px}.refview:hover{border-color:var(--green);color:#4ade80}