:root{--bg: #0b0e17;--bg2: #0f1420;--panel: #121826;--card: #151c2c;--card2: #1a2234;--border: #232c3f;--border2: #2e3950;--text: #e6e9f0;--muted: #98a2b8;--muted2: #6b7590;--primary: #2f6bff;--primary2: #2458d6;--primary-soft: #1a2b57;--pink1: #f7a1c4;--pink2: #ff7a8a;--green: #22c55e;--red: #ef4444;--yellow: #f5d36b;--yellow-soft: #3a3418;--radius: 16px;--radius-sm: 10px;--font: "IBM Plex Sans Arabic", system-ui, -apple-system, "Segoe UI", Tahoma, sans-serif}*{box-sizing:border-box}html,body,#root{height:100%;margin:0}body{background:var(--bg);color:var(--text);font-family:var(--font);font-size:14px;line-height:1.6}a{color:inherit;text-decoration:none}button,input,select,textarea{font-family:inherit;font-size:inherit;color:inherit}::placeholder{color:var(--muted2)}.app{display:grid;grid-template-columns:1fr 250px;min-height:100vh}.sidebar{background:var(--bg2);border-inline-start:1px solid var(--border);padding:18px 14px;position:sticky;top:0;height:100vh;display:flex;flex-direction:column;gap:6px}.brand{display:flex;align-items:center;gap:10px;padding:6px 8px 16px;font-weight:700;font-size:17px;color:#fff}.brand .logo{width:34px;height:34px;border-radius:10px;background:linear-gradient(135deg,var(--pink1),var(--pink2));display:grid;place-items:center;font-size:18px}.nav-group{border:1px solid var(--primary-soft);background:linear-gradient(180deg,#14213f,#0f1a33);border-radius:12px;padding:10px 12px;margin-bottom:8px;color:#8fb3ff;font-weight:600;display:flex;justify-content:space-between;align-items:center}.nav-item{padding:10px 14px;border-radius:10px;color:var(--muted);display:flex;align-items:center;gap:8px;cursor:pointer}.nav-item:hover{background:var(--card);color:var(--text)}.nav-item.active{background:#172447;color:#a9c4ff}.nav-item.active:before{content:"•";color:#6ea0ff}.sidebar .spacer{flex:1}.sidebar .foot{border-top:1px solid var(--border);padding-top:12px;font-size:12px;color:var(--muted);display:flex;flex-direction:column;gap:8px}.main{padding:22px 28px 60px;min-width:0}.topbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px;gap:12px}.topbar h1{font-size:20px;margin:0}.back{color:var(--muted);display:inline-flex;gap:8px;align-items:center;cursor:pointer}.back:hover{color:var(--text)}.card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:20px 22px;margin-bottom:16px}.card h2{font-size:17px;margin:0 0 4px;display:flex;align-items:center;gap:8px}.card .sub{color:var(--muted);margin:0 0 16px;font-size:13px}.help{display:inline-grid;place-items:center;width:16px;height:16px;border-radius:50%;border:1px solid var(--muted2);color:var(--muted);font-size:10px;cursor:help;position:relative}.help:hover:after{content:attr(data-tip);position:absolute;top:22px;inset-inline-end:0;background:#0b0f1a;border:1px solid var(--border2);padding:8px 10px;border-radius:8px;width:260px;z-index:20;font-size:12px;color:var(--text);font-weight:400;line-height:1.5}.hint{color:var(--muted2);font-size:12px;margin-top:6px}label.lbl{display:block;color:var(--muted);font-size:13px;margin:14px 0 6px}label.lbl b{color:var(--text);font-weight:500}.req{color:#ff7a8a}input.in,textarea.in,select.in{width:100%;background:var(--bg2);border:1px solid var(--border2);border-radius:var(--radius-sm);padding:12px 14px;outline:none;transition:border .15s}input.in:focus,textarea.in:focus,select.in:focus{border-color:var(--primary)}textarea.in{min-height:110px;resize:vertical;line-height:1.7}textarea.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px;min-height:260px;direction:rtl}.row{display:grid;grid-template-columns:1fr 1fr;gap:14px}.row3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px}.btn{border:1px solid var(--border2);background:var(--card2);color:var(--text);padding:10px 16px;border-radius:10px;cursor:pointer;display:inline-flex;align-items:center;gap:8px;font-weight:500}.btn:hover{border-color:var(--muted2)}.btn.primary{background:var(--primary);border-color:var(--primary);color:#fff}.btn.primary:hover{background:var(--primary2)}.btn.primary:disabled{opacity:.55;cursor:default}.btn.big{padding:13px 22px;font-size:15px;border-radius:12px}.btn.danger{background:#3a1520;border-color:#6b1f2f;color:#ff9aa6}.btn.ghost{background:transparent}.btn.sm{padding:6px 10px;font-size:12px;border-radius:8px}.hero{background:radial-gradient(900px 300px at 10% 0%,#16264d 0%,var(--card) 55%);border:1px solid var(--border);border-radius:var(--radius);padding:24px 26px;margin-bottom:16px;display:flex;gap:22px;align-items:center}.avatar{width:128px;height:128px;border-radius:50%;background:linear-gradient(140deg,var(--pink1) 0%,var(--pink2) 100%);display:grid;place-items:center;font-size:56px;flex:none;box-shadow:0 10px 40px #ff7a8a40}.avatar.sm{width:64px;height:64px;font-size:30px}.avatar.xs{width:34px;height:34px;font-size:17px}.hero .title{background:transparent;border:none;font-size:22px;font-weight:700;width:100%;outline:none;color:#fff}.hero .desc{background:transparent;border:none;font-size:15px;width:100%;outline:none;color:var(--muted);margin-top:6px}.badge{display:inline-flex;align-items:center;gap:6px;padding:4px 12px;border-radius:999px;background:#10182b;border:1px solid var(--border2);font-size:12px;color:#bcd}.badge.blue{background:#16264d;border-color:#24407f;color:#a9c4ff}.badge.yellow{background:var(--yellow-soft);border-color:#5a4f1e;color:var(--yellow)}.badge.green{background:#0f2a1c;border-color:#1f5c3a;color:#7ee0a5}.badge.red{background:#3a1520;border-color:#6b1f2f;color:#ff9aa6}.tabs{display:flex;gap:4px;background:var(--panel);border:1px solid var(--border);border-radius:14px;padding:6px;margin-bottom:16px;overflow-x:auto}.tab{padding:10px 18px;border-radius:10px;color:var(--muted);cursor:pointer;display:inline-flex;gap:8px;align-items:center;white-space:nowrap;border:1px solid transparent}.tab:hover{color:var(--text)}.tab.active{background:var(--card2);color:#fff;border-color:var(--primary)}.editor{display:grid;grid-template-columns:1fr 340px;gap:20px;align-items:start}.editor .side{position:sticky;top:22px}.preview{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);display:flex;flex-direction:column;min-height:560px;max-height:calc(100vh - 44px)}.preview .ph{display:flex;justify-content:space-between;align-items:center;padding:14px 16px;border-bottom:1px solid var(--border);font-weight:600}.preview .ph small{color:var(--muted);font-weight:400;cursor:pointer;display:inline-flex;gap:6px;align-items:center}.preview .agent{display:flex;gap:12px;align-items:center;padding:14px 16px;border-bottom:1px solid var(--border)}.preview .agent .name{font-weight:700;font-size:15px}.preview .agent .tag{color:var(--muted);font-size:12px}.preview .chips{display:flex;gap:6px;flex-wrap:wrap;padding:10px 16px;border-bottom:1px solid var(--border)}.preview .chat{flex:1;overflow:auto;padding:14px 12px;display:flex;flex-direction:column;gap:12px}.msg{display:flex;gap:8px;align-items:flex-end;max-width:92%}.msg.agent{align-self:flex-start}.msg.user{align-self:flex-end;flex-direction:row-reverse}.bubble{padding:10px 14px;border-radius:16px;background:var(--card2);border:1px solid var(--border);white-space:pre-wrap;line-height:1.7}.msg.user .bubble{background:var(--primary);border-color:var(--primary);color:#fff}.msg .meta{font-size:11px;color:var(--muted2);margin-top:4px}.preview .in-row{display:flex;gap:8px;padding:10px 12px;border-top:1px solid var(--border)}.preview .in-row input{flex:1}.preview .foot{padding:8px 12px;border-top:1px solid var(--border);color:var(--muted2);font-size:12px;text-align:start}.dot{width:10px;height:10px;border-radius:50%;background:var(--green);border:2px solid var(--card);position:absolute;bottom:2px;inset-inline-start:2px}.rel{position:relative}.presets{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.preset{border:1px solid var(--border2);background:var(--bg2);border-radius:14px;padding:16px 18px;cursor:pointer}.preset:hover{border-color:var(--muted2)}.preset.active{border-color:var(--primary);box-shadow:0 0 0 1px var(--primary) inset}.preset b{display:block;font-size:15px;margin-bottom:4px}.preset span{color:var(--muted);font-size:13px}.choices{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.choice{border:1px solid var(--border2);background:var(--bg2);border-radius:14px;padding:22px;text-align:center;cursor:pointer;font-size:15px}.choice .ic{font-size:22px;display:block;margin-bottom:6px}.choice.active{border-color:var(--primary);box-shadow:0 0 0 1px var(--primary) inset}.switch{width:46px;height:26px;border-radius:999px;background:#2a3448;position:relative;cursor:pointer;flex:none;transition:background .15s;border:none}.switch:after{content:"";position:absolute;top:3px;inset-inline-start:3px;width:20px;height:20px;border-radius:50%;background:#cfd6e6;transition:transform .15s}.switch.on{background:var(--primary)}.switch.on:after{transform:translate(-20px)}.switch:disabled{opacity:.5;cursor:default}.trow{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;padding:14px 4px;border-top:1px solid var(--border)}.trow:first-of-type{border-top:none}.trow .t{display:flex;gap:12px;align-items:flex-start}.trow .ic{font-size:20px;width:28px;text-align:center}.trow b{font-weight:600;display:inline-flex;gap:8px;align-items:center}.trow .d{color:var(--muted);font-size:12.5px;margin-top:2px}.code{font-family:ui-monospace,Menlo,monospace;font-size:11px;background:#0b0f1a;border:1px solid var(--border2);padding:1px 7px;border-radius:6px;color:#b7c2d9;direction:ltr}.group{border:1px solid var(--border);border-radius:14px;margin-bottom:12px;overflow:hidden}.group .gh{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;background:var(--card2);font-weight:600}.group .gh small{color:var(--muted);font-weight:400;font-size:12px;direction:ltr}.group .gb{padding:0 16px}.counter{display:flex;align-items:baseline;gap:6px;direction:ltr}.counter b{font-size:26px;color:#7fa6ff}.counter small{color:var(--muted2);font-size:11px;letter-spacing:.5px}.bar{height:4px;background:#232c3f;border-radius:4px;margin:10px 0 14px;overflow:hidden}.bar i{display:block;height:100%;background:var(--primary)}.checks{display:grid;grid-template-columns:1fr 1fr;gap:6px 24px}.chk{display:flex;align-items:center;gap:8px;padding:6px 0;cursor:pointer}.chk input{accent-color:var(--primary);width:16px;height:16px}.chk .ch{display:inline-flex;gap:3px}.chan{display:inline-block;width:14px;height:14px;border-radius:4px;font-size:9px;text-align:center;line-height:14px;color:#fff}.chan.wa{background:#25d366}.chan.ig{background:#d62976}.chan.fb{background:#1877f2}.slider{display:grid;grid-template-columns:60px 1fr;gap:16px;align-items:center}.slider .val{font-size:26px;font-weight:700;color:#7fa6ff;direction:ltr}input[type=range]{width:100%;accent-color:var(--primary)}.marks{display:flex;justify-content:space-between;color:var(--muted2);font-size:12px;margin-top:4px}table.tbl{width:100%;border-collapse:collapse;font-size:13px}.tbl th{text-align:start;color:var(--muted);font-weight:500;padding:8px 10px;border-bottom:1px solid var(--border2)}.tbl td{padding:10px;border-bottom:1px solid var(--border);vertical-align:top}.tbl tr:hover td{background:var(--card2)}.tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:16px}.tile{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:16px}.tile .v{font-size:24px;font-weight:700;direction:ltr;text-align:end}.tile .k{color:var(--muted);font-size:12px}.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px}.gcard{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:20px;display:flex;flex-direction:column;gap:12px}.gcard .actions{display:flex;gap:8px;margin-top:auto}.pill-tabs{display:inline-flex;gap:4px;background:var(--panel);border:1px solid var(--border);padding:4px;border-radius:12px}.pill-tabs span{padding:6px 14px;border-radius:8px;cursor:pointer;color:var(--muted)}.pill-tabs span.active{background:var(--card2);color:#fff}.empty{text-align:center;padding:60px 20px;color:var(--muted)}.empty .ic{width:80px;height:80px;border-radius:50%;background:var(--card2);display:grid;place-items:center;font-size:34px;margin:0 auto 14px}.empty b{display:block;font-size:18px;color:var(--text);margin-bottom:6px}.toast{position:fixed;bottom:20px;inset-inline-start:20px;background:#0f172a;border:1px solid var(--border2);padding:12px 16px;border-radius:12px;z-index:50;box-shadow:0 10px 30px #0006}.toast.err{border-color:var(--red)}.danger-zone{border:1px solid #5a1f2c;background:#1d0f14;border-radius:14px;padding:14px 16px;color:#ff9aa6;margin:16px 0}.login{min-height:100vh;display:grid;place-items:center}.login .card{width:380px}.stack{display:flex;flex-direction:column;gap:10px}.inline{display:flex;gap:10px;align-items:center;flex-wrap:wrap}.mode-opt{border:1px solid var(--border2);border-radius:12px;padding:12px 14px;cursor:pointer;background:var(--bg2)}.mode-opt.active{border-color:var(--primary);box-shadow:0 0 0 1px var(--primary) inset}.mode-opt b{display:block}.mode-opt span{color:var(--muted);font-size:12px}.kbd{font-size:11px;color:var(--muted2)}.files{display:grid;grid-template-columns:260px 1fr;gap:14px;min-height:320px}.files .tree{border:1px solid var(--border);border-radius:12px;padding:10px}.files .tree .f{padding:6px 10px;border-radius:8px;cursor:pointer;direction:ltr;text-align:end;font-family:ui-monospace,Menlo,monospace;font-size:12px}.files .tree .f.active{background:var(--card2)}.files .ed{border:1px solid var(--border);border-radius:12px;padding:12px;display:flex;flex-direction:column;gap:8px}@media(max-width:1100px){.editor{grid-template-columns:1fr}.editor .side{position:static}.app{grid-template-columns:1fr}.sidebar{position:static;height:auto}}