@import "https://fonts.googleapis.com/css2?family=Cairo:wght@400;600;700;800&family=Manrope:wght@600;700;800&display=swap";@import "https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&display=swap";:root{--brand-primary:#6de7be;--brand-hover:#7ff0c8;--brand-dim:#6de7be1f;--text-on-brand:#003829;--bg-base:#131313;--bg-surface:#201f1f;--bg-elevated:#2a2a2a;--bg-hover:#323232;--bg-active:#3a3a3a;--border-subtle:#ffffff0a;--border-default:#ffffff14;--border-strong:#ffffff26;--text-primary:#e5e2e1;--text-secondary:#86948d;--text-muted:#4a5550;--green:#6de7be;--green-d:#6de7be1f;--red:#ff6b6b;--red-d:#ff6b6b1f;--yellow:#ffb700;--yellow-d:#ffb7001f;--blue:#5b9cf6;--blue-d:#5b9cf61f;--purple:#a78bfa;--shadow-sm:0 2px 8px #00000080;--shadow-md:0 4px 20px #0009;--shadow-lg:0 8px 40px #000000b3;--r-sm:8px;--r-md:10px;--r-lg:14px;--r-xl:22px;--transition:all .18s ease;--font:"Cairo", "Manrope", system-ui, sans-serif;--header-h:52px;--sidebar-w:220px;--sidebar-collapsed:52px}*,:before,:after{box-sizing:border-box;margin:0;padding:0}button,input,textarea,select{font-family:var(--font);font-size:inherit}html,body,#root{width:100%;height:100%}body{font-family:var(--font);background:var(--bg-base);color:var(--text-primary);font-size:14px;line-height:1.5;overflow:hidden}#root{flex-direction:column;height:100%;display:flex}.ms{font-variation-settings:"FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;vertical-align:middle;-webkit-user-select:none;user-select:none;direction:ltr;font-family:Material Symbols Outlined;font-size:20px;font-style:normal;line-height:1}.ms.filled{font-variation-settings:"FILL" 1, "wght" 400, "GRAD" 0, "opsz" 24}.ms.sm{font-size:16px}.ms.lg{font-size:24px}::-webkit-scrollbar{width:4px;height:4px}::-webkit-scrollbar-track{background:0 0}::-webkit-scrollbar-thumb{background:var(--bg-hover);border-radius:4px}::-webkit-scrollbar-thumb:hover{background:var(--bg-active)}*{scrollbar-width:thin;scrollbar-color:var(--bg-hover) transparent}.app-layout{grid-template-rows:var(--header-h) 1fr auto;grid-template-columns:var(--sidebar-collapsed) 1fr;height:100%;transition:grid-template-columns var(--transition);display:grid}.app-layout.sidebar-open{grid-template-columns:var(--sidebar-w) 1fr}.app-header{z-index:100;grid-area:1/1/auto/-1}.app-sidebar{grid-area:2/1;overflow:hidden}.app-main{grid-area:2/2;min-height:0;padding:20px 24px;overflow:hidden}.app-footer{text-align:center;color:var(--text-muted);border-top:1px solid var(--border-default);background:var(--bg-surface);grid-area:3/1/auto/-1;padding:8px 16px;font-size:11px}.header{height:var(--header-h);background:var(--bg-surface);border-bottom:1px solid var(--border-default);align-items:center;gap:12px;padding:0 16px;display:flex}.header-logo{color:var(--brand-primary);letter-spacing:-.3px;align-items:center;gap:8px;font-size:15px;font-weight:800;text-decoration:none;display:flex}.header-spacer{flex:1}.header-lang{background:var(--bg-elevated);border:1px solid var(--border-default);border-radius:var(--r-sm);display:flex;overflow:hidden}.header-lang button{color:var(--text-secondary);cursor:pointer;transition:var(--transition);background:0 0;border:none;padding:5px 12px;font-size:12px;font-weight:700}.header-lang button.active{background:var(--brand-primary);color:var(--text-on-brand)}.sidebar{background:var(--bg-surface);border-right:1px solid var(--border-default);flex-direction:column;height:100%;display:flex;overflow:hidden}.sidebar-toggle{border:none;border-bottom:1px solid var(--border-subtle);height:44px;min-height:44px;color:var(--text-secondary);cursor:pointer;transition:var(--transition);background:0 0;justify-content:center;align-items:center;display:flex}.sidebar-toggle:hover{color:var(--brand-primary)}.sidebar-nav{flex:1;padding:8px 0;overflow-y:auto}.nav-item{color:var(--text-secondary);border-radius:var(--r-md);cursor:pointer;transition:var(--transition);white-space:nowrap;text-align:left;background:0 0;border:none;align-items:center;gap:10px;width:calc(100% - 12px);margin:2px 6px;padding:9px 14px;font-size:13px;font-weight:600;text-decoration:none;display:flex;position:relative}.nav-item:hover{background:var(--bg-hover);color:var(--text-primary)}.nav-item.active{background:var(--brand-dim);color:var(--brand-primary);box-shadow:inset 2px 0 0 var(--brand-primary)}.nav-item .ms{transition:var(--transition);flex-shrink:0}.nav-item.active .ms{font-variation-settings:"FILL" 1, "wght" 400, "GRAD" 0, "opsz" 24}.nav-label{opacity:0;white-space:nowrap;transition:opacity .15s;overflow:hidden}.sidebar-open .nav-label{opacity:1}.page-title{color:var(--text-primary);align-items:center;gap:10px;margin-bottom:20px;font-size:20px;font-weight:800;display:flex}.page-title .ms{color:var(--brand-primary);font-size:24px}.panel{background:var(--bg-surface);border:1px solid var(--border-default);border-radius:var(--r-lg);padding:20px;transition:border-color .2s}.panel:hover{border-color:var(--border-strong)}.panel+.panel{margin-top:16px}.panel-title{color:var(--text-muted);text-transform:uppercase;letter-spacing:.8px;align-items:center;gap:6px;margin-bottom:14px;font-size:11px;font-weight:700;display:flex}.panel-title .ms{color:var(--brand-primary);font-size:16px}.field{margin-bottom:14px}.field label{color:var(--text-muted);text-transform:uppercase;letter-spacing:.6px;margin-bottom:6px;font-size:11px;font-weight:700;display:block}.field select,.field input,.field textarea{background:var(--bg-elevated);border:1px solid var(--border-default);border-radius:var(--r-md);width:100%;color:var(--text-primary);transition:var(--transition);outline:none;padding:9px 12px;font-size:13px}.field select{appearance:none;cursor:pointer;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2386948d' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");background-position:right 12px center;background-repeat:no-repeat;padding-right:32px}.field select:focus,.field input:focus,.field textarea:focus{border-color:var(--brand-primary);box-shadow:0 0 0 2px var(--brand-dim)}.field textarea{resize:vertical;min-height:80px}.field select option{background:var(--bg-elevated)}.btn{border-radius:var(--r-md);cursor:pointer;transition:var(--transition);-webkit-user-select:none;user-select:none;border:none;align-items:center;gap:7px;padding:9px 18px;font-size:13px;font-weight:700;display:inline-flex}.btn:active{transform:scale(.97)}.btn-primary{background:var(--brand-primary);color:var(--text-on-brand)}.btn-primary:hover{background:var(--brand-hover)}.btn-primary:disabled{opacity:.4;cursor:not-allowed;transform:none}.btn-ghost{background:var(--bg-elevated);color:var(--text-secondary);border:1px solid var(--border-default)}.btn-ghost:hover{background:var(--bg-hover);color:var(--text-primary)}.btn-ghost:active{transform:scale(.97)}.btn-danger{background:var(--red-d);color:var(--red);border:1px solid var(--red)}.btn.full{justify-content:center;width:100%;padding:12px}.chips{flex-wrap:wrap;gap:6px;display:flex}.chip{background:var(--bg-elevated);border:1px solid var(--border-default);color:var(--text-secondary);cursor:pointer;transition:var(--transition);-webkit-user-select:none;user-select:none;border-radius:20px;align-items:center;gap:5px;padding:4px 12px;font-size:12px;font-weight:600;display:inline-flex}.chip:hover{border-color:var(--brand-primary);color:var(--brand-primary)}.chip.active{background:var(--brand-dim);border-color:var(--brand-primary);color:var(--brand-primary)}.chip.trend{padding:3px 10px;font-size:11px}.grid-2{grid-template-columns:1fr 1fr;gap:16px;display:grid}.grid-3{grid-template-columns:1fr 1fr 1fr;gap:14px;display:grid}.studio-layout{grid-template-columns:380px 1fr;gap:20px;height:100%;min-height:0;display:grid}.studio-left{flex-direction:column;gap:14px;padding-right:4px;display:flex;overflow-y:auto}.studio-right{border-left:1px solid var(--border-subtle);flex-direction:column;gap:14px;min-height:0;padding-left:20px;display:flex}.output-box{background:var(--bg-base);border:1px solid var(--border-default);border-radius:var(--r-lg);white-space:pre-wrap;word-break:break-word;min-height:300px;color:var(--text-primary);font-size:13px;line-height:1.7;font-family:var(--font);flex:1;padding:20px;overflow-y:auto}.output-box.streaming{border-color:var(--brand-primary);box-shadow:0 0 0 2px var(--brand-dim)}.output-box h2,.output-box h3{color:var(--brand-primary);margin:20px 0 10px;font-size:15px}.output-box strong{color:var(--text-primary)}.output-placeholder{height:100%;min-height:280px;color:var(--text-muted);flex-direction:column;justify-content:center;align-items:center;gap:12px;display:flex}.output-placeholder .ms{opacity:.4;font-size:48px}.status-bar{color:var(--brand-primary);align-items:center;gap:6px;padding:8px 0 0;font-size:12px;display:flex}.status-bar .dot{background:var(--brand-primary);border-radius:50%;width:6px;height:6px;animation:1s infinite pulse}@keyframes pulse{0%,to{opacity:1}50%{opacity:.3}}.asset-card{background:var(--bg-surface);border:1px solid var(--border-default);border-radius:var(--r-lg);cursor:pointer;outline:none;margin-bottom:8px;padding:14px 16px;transition:border-color .15s,background .15s,transform .15s}.asset-card:hover{border-color:var(--border-strong);background:var(--bg-elevated);transform:translateY(-1px)}.asset-card.selected{border-color:var(--brand-primary);box-shadow:inset 3px 0 0 var(--brand-primary);background:#6de7be1f}.asset-card-top{align-items:center;gap:8px;margin-bottom:6px;display:flex}.asset-card-type{text-transform:uppercase;letter-spacing:.6px;background:var(--brand-dim);color:var(--brand-primary);border-radius:12px;padding:2px 8px;font-size:10px;font-weight:700}.asset-card-date{color:var(--text-muted);margin-left:auto;font-size:11px}.asset-card-title{color:var(--text-primary);font-size:13px;font-weight:600}.asset-card-meta{color:var(--text-muted);margin-top:4px;font-size:11px}.client-card{background:var(--bg-surface);border:1px solid var(--border-default);border-radius:var(--r-lg);cursor:pointer;outline:none;margin-bottom:8px;padding:16px;transition:border-color .15s,background .15s,transform .15s}.client-card:hover{border-color:var(--brand-primary);transform:translateY(-1px)}.client-card.selected{border-color:var(--brand-primary);box-shadow:inset 3px 0 0 var(--brand-primary);background:#6de7be1f}.client-card-name{color:var(--text-primary);margin-bottom:4px;font-size:15px;font-weight:800}.client-card-meta{color:var(--text-muted);flex-wrap:wrap;gap:8px;font-size:12px;display:flex}.client-card-meta span{align-items:center;gap:4px;display:flex}.toggle-group{background:var(--bg-elevated);border:1px solid var(--border-default);border-radius:var(--r-md);display:flex;position:relative;overflow:hidden}.toggle-group button{color:var(--text-secondary);cursor:pointer;z-index:1;background:0 0;border:none;flex:1;padding:8px;font-size:12px;font-weight:700;transition:all .2s;position:relative}.toggle-group button.active{color:var(--text-on-brand)}.toggle-group:after{content:"";background:var(--brand-primary);border-radius:var(--r-md);width:50%;transition:transform .25s;position:absolute;inset:0}.toggle-group:has(button:last-child.active):after{transform:translate(100%)}.empty-state{color:var(--text-muted);text-align:center;flex-direction:column;justify-content:center;align-items:center;gap:10px;padding:60px 20px;display:flex}.empty-state .ms{opacity:.5;font-size:40px}.empty-state p{max-width:280px;font-size:13px;line-height:1.6}.app-main{animation:.25s fadeIn}@keyframes fadeIn{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}.skeleton{background:linear-gradient(90deg, var(--bg-elevated) 25%, var(--bg-hover) 50%, var(--bg-elevated) 75%);border-radius:var(--r-md);background-size:200% 100%;animation:1.5s infinite shimmer}@keyframes shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}.rtl{text-align:right;direction:rtl}.rtl .field select{background-position:12px;padding-left:32px;padding-right:12px}.rtl .nav-item.active{box-shadow:inset -2px 0 0 var(--brand-primary)}.rtl .toggle-group:after{left:auto;right:0}.rtl .toggle-group:has(button:last-child.active):after{transform:translate(-100%)}.ltr{text-align:left;direction:ltr}.modal-overlay{-webkit-backdrop-filter:blur(4px)}