:root{--studio-bg: #090d16;--studio-bg-soft: #0f172a;--studio-card-bg: rgba(18, 26, 47, .85);--studio-card-border: rgba(255, 255, 255, .08);--studio-primary: #3b82f6;--studio-primary-glow: rgba(59, 130, 246, .35);--studio-accent: #10b981;--studio-purple: #8b5cf6;--studio-amber: #f59e0b;--studio-rose: #f43f5e;--studio-text: #f8fafc;--studio-text-muted: #94a3b8;--studio-text-dim: #64748b;--studio-input-bg: #0b1120;--studio-input-border: #1e293b;--studio-header-height: 64px;--studio-sidebar-width: 430px;--font-cairo: "Cairo", system-ui, sans-serif;--font-tajawal: "Tajawal", system-ui, sans-serif;--font-outfit: "Outfit", system-ui, sans-serif;--font-inter: "Inter", system-ui, sans-serif;--font-jakarta: "Plus Jakarta Sans", system-ui, sans-serif;--font-serif: "Playfair Display", Georgia, serif;--transition-fast: .15s cubic-bezier(.4, 0, .2, 1);--transition-normal: .25s cubic-bezier(.4, 0, .2, 1);--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, .3);--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, .4), 0 2px 4px -2px rgba(0, 0, 0, .3);--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, .5), 0 4px 6px -4px rgba(0, 0, 0, .4);--shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, .6), 0 8px 10px -6px rgba(0, 0, 0, .5);--shadow-glow: 0 0 20px -3px var(--studio-primary-glow)}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html,body{height:100%;width:100%;background-color:var(--studio-bg);color:var(--studio-text);font-family:var(--font-tajawal);font-size:15px;line-height:1.6;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow:hidden}#root{height:100%;width:100%;display:flex;flex-direction:column}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:#0f172a99}::-webkit-scrollbar-thumb{background:#94a3b840;border-radius:9999px}::-webkit-scrollbar-thumb:hover{background:#94a3b873}.studio-app{display:flex;flex-direction:column;height:100vh;width:100vw;background:radial-gradient(circle at 10% 20%,rgba(59,130,246,.08) 0%,transparent 40%),radial-gradient(circle at 90% 80%,rgba(139,92,246,.08) 0%,transparent 40%),#090d16;overflow:hidden}.studio-header{height:var(--studio-header-height);background:#0f172ad9;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-bottom:1px solid var(--studio-card-border);display:flex;align-items:center;justify-content:space-between;padding:0 20px;z-index:40;gap:16px}.studio-logo{display:flex;align-items:center;gap:12px;cursor:pointer;-webkit-user-select:none;user-select:none}.studio-logo-icon{width:36px;height:36px;background:linear-gradient(135deg,#3b82f6,#8b5cf6);border-radius:10px;display:flex;align-items:center;justify-content:center;color:#fff;box-shadow:0 0 16px #3b82f666}.studio-logo-text h1{font-family:var(--font-cairo);font-size:17px;font-weight:700;color:#fff;line-height:1.2;letter-spacing:-.3px}.studio-logo-text span{font-size:11px;color:var(--studio-text-muted)}.studio-header-center{display:flex;align-items:center;gap:8px;background:#0b112099;padding:4px;border-radius:12px;border:1px solid var(--studio-card-border)}.studio-pill-btn{display:flex;align-items:center;gap:6px;padding:6px 14px;border-radius:8px;border:none;background:transparent;color:var(--studio-text-muted);font-family:var(--font-cairo);font-size:13px;font-weight:600;cursor:pointer;transition:all var(--transition-fast)}.studio-pill-btn:hover{color:#fff;background:#ffffff0d}.studio-pill-btn.active{background:var(--studio-primary);color:#fff;box-shadow:0 2px 8px #3b82f666}.studio-header-actions{display:flex;align-items:center;gap:10px}.btn-ghost{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:7px 14px;border-radius:8px;background:#ffffff0d;border:1px solid var(--studio-card-border);color:var(--studio-text);font-family:var(--font-cairo);font-size:13px;font-weight:600;cursor:pointer;transition:all var(--transition-fast)}.btn-ghost:hover{background:#ffffff1a;border-color:#ffffff26;color:#fff}.btn-primary{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:8px 18px;border-radius:8px;background:linear-gradient(135deg,#2563eb,#3b82f6);border:1px solid rgba(255,255,255,.2);color:#fff;font-family:var(--font-cairo);font-size:13.5px;font-weight:700;cursor:pointer;box-shadow:0 4px 12px #2563eb59;transition:all var(--transition-fast)}.btn-primary:hover{background:linear-gradient(135deg,#1d4ed8,#2563eb);box-shadow:0 6px 16px #2563eb80;transform:translateY(-1px)}.btn-success{background:linear-gradient(135deg,#059669,#10b981);box-shadow:0 4px 12px #10b9814d}.btn-success:hover{background:linear-gradient(135deg,#047857,#059669);box-shadow:0 6px 16px #10b98173}.studio-main{flex:1;display:flex;overflow:hidden;position:relative}.studio-sidebar{width:var(--studio-sidebar-width);height:100%;background:#0f172abf;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-left:1px solid var(--studio-card-border);display:flex;flex-direction:column;z-index:30;transition:all var(--transition-normal)}[dir=ltr] .studio-sidebar{border-left:none;border-right:1px solid var(--studio-card-border)}.sidebar-tabs-wrapper{position:relative;background:#0b1120f2;border-bottom:1px solid var(--studio-card-border);display:flex;align-items:center}.sidebar-tabs{display:flex;overflow-x:auto;overflow-y:hidden;padding:12px 14px;gap:8px;width:100%;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.2) transparent;-webkit-overflow-scrolling:touch}.sidebar-tabs::-webkit-scrollbar{height:4px}.sidebar-tabs::-webkit-scrollbar-thumb{background:#ffffff38;border-radius:4px}.sidebar-tab-btn{display:inline-flex;flex-direction:row;align-items:center;justify-content:center;gap:7px;flex-shrink:0;padding:8px 14px;border-radius:999px;background:#ffffff0d;border:1px solid rgba(255,255,255,.09);color:#94a3b8;font-family:var(--font-cairo);font-size:12.5px;font-weight:600;cursor:pointer;white-space:nowrap;transition:all var(--transition-fast)}.sidebar-tab-btn:hover{color:#fff;background:#ffffff17;border-color:#ffffff2e;transform:translateY(-1px)}.sidebar-tab-btn.active{color:#fff;background:linear-gradient(135deg,#2563eb4d,#3b82f62e);border-color:var(--studio-primary);font-weight:700;box-shadow:0 0 14px #3b82f64d}.sidebar-tab-btn.active svg{color:var(--studio-primary)}.sidebar-content{flex:1;overflow-y:auto;padding:18px 16px;display:flex;flex-direction:column;gap:20px}.form-group{display:flex;flex-direction:column;gap:6px}.form-label{font-family:var(--font-cairo);font-size:13px;font-weight:600;color:var(--studio-text);display:flex;align-items:center;justify-content:space-between}.form-label span.optional{font-size:11px;color:var(--studio-text-dim);font-weight:400}.form-input,.form-textarea,.form-select{width:100%;padding:9px 12px;background:var(--studio-input-bg);border:1px solid var(--studio-input-border);border-radius:8px;color:var(--studio-text);font-family:inherit;font-size:13.5px;transition:all var(--transition-fast)}.form-input:focus,.form-textarea:focus,.form-select:focus{outline:none;border-color:var(--studio-primary);box-shadow:0 0 0 3px #3b82f633}.form-textarea{min-height:80px;resize:vertical}.form-row{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}.form-hint{font-size:11.5px;color:var(--studio-text-dim)}.editor-card{background:var(--studio-card-bg);border:1px solid var(--studio-card-border);border-radius:12px;padding:16px;display:flex;flex-direction:column;gap:14px}.editor-card-header{display:flex;align-items:center;justify-content:space-between}.editor-card-title{font-family:var(--font-cairo);font-size:14px;font-weight:700;color:#fff;display:flex;align-items:center;gap:8px}.item-list{display:flex;flex-direction:column;gap:10px}.item-card{background:#0b1120b3;border:1px solid var(--studio-card-border);border-radius:10px;padding:12px;display:flex;flex-direction:column;gap:10px;position:relative;transition:border-color var(--transition-fast)}.item-card:hover{border-color:#ffffff26}.item-card-header{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid rgba(255,255,255,.05);padding-bottom:8px}.item-card-title{font-family:var(--font-cairo);font-size:13.5px;font-weight:600;color:#fff}.item-actions{display:flex;align-items:center;gap:6px}.icon-btn-danger{background:#f43f5e1a;color:#fb7185;border:1px solid rgba(244,63,94,.2);border-radius:6px;width:28px;height:28px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all var(--transition-fast)}.icon-btn-danger:hover{background:#f43f5e;color:#fff}.toggle-wrapper{display:flex;align-items:center;justify-content:space-between;padding:8px 12px;background:#0b112080;border:1px solid var(--studio-card-border);border-radius:8px;cursor:pointer;-webkit-user-select:none;user-select:none}.toggle-switch{position:relative;width:44px;height:24px;background:#334155;border-radius:9999px;transition:background-color var(--transition-fast)}.toggle-switch.active{background:var(--studio-primary)}.toggle-slider{position:absolute;top:2px;left:2px;width:20px;height:20px;background:#fff;border-radius:50%;transition:transform var(--transition-fast)}.toggle-switch.active .toggle-slider{transform:translate(20px)}[dir=rtl] .toggle-switch.active .toggle-slider{transform:translate(-20px)}.studio-preview-stage{flex:1;height:100%;display:flex;flex-direction:column;background:#060911;position:relative;overflow:hidden}.preview-control-bar{height:48px;background:#0f172ab3;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-bottom:1px solid var(--studio-card-border);display:flex;align-items:center;justify-content:space-between;padding:0 16px;z-index:20}.device-switcher{display:flex;align-items:center;gap:4px;background:#0b112099;padding:3px;border-radius:8px;border:1px solid var(--studio-card-border)}.device-btn{display:flex;align-items:center;justify-content:center;width:32px;height:30px;border-radius:6px;border:none;background:transparent;color:var(--studio-text-muted);cursor:pointer;transition:all var(--transition-fast)}.device-btn:hover{color:#fff}.device-btn.active{background:#ffffff1a;color:var(--studio-primary)}.preview-badge{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-cairo);font-size:12px;color:var(--studio-text-muted)}.preview-badge-dot{width:8px;height:8px;border-radius:50%;background:#10b981;box-shadow:0 0 8px #10b981;animation:pulseDot 2s infinite}@keyframes pulseDot{0%,to{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(.85)}}.preview-viewport{flex:1;display:flex;justify-content:center;align-items:flex-start;padding:20px;overflow-y:auto;position:relative}.device-frame{height:100%;background:#000;transition:width var(--transition-normal);display:flex;flex-direction:column;position:relative;overflow:hidden}.device-frame.desktop{width:100%;border-radius:0;box-shadow:none}.device-frame.laptop{width:1180px;max-width:95%;height:calc(100% - 20px);border-radius:14px;border:4px solid #334155;box-shadow:var(--shadow-xl)}.device-frame.tablet{width:768px;max-width:95%;height:calc(100% - 20px);border-radius:20px;border:8px solid #1e293b;box-shadow:var(--shadow-xl)}.device-frame.mobile{width:390px;max-width:95%;height:calc(100% - 20px);border-radius:36px;border:10px solid #1e293b;box-shadow:var(--shadow-xl)}.device-screen{width:100%;height:100%;overflow-y:auto;position:relative;background-color:var(--preview-bg, #0b1120)}.studio-modal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#000000bf;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;z-index:100;padding:20px;animation:modalFadeIn .2s ease-out}@keyframes modalFadeIn{0%{opacity:0;transform:scale(.97)}to{opacity:1;transform:scale(1)}}.studio-modal-content{background:#0f172a;border:1px solid var(--studio-card-border);border-radius:16px;width:100%;max-width:680px;max-height:90vh;overflow-y:auto;box-shadow:var(--shadow-xl),0 0 30px #3b82f626;display:flex;flex-direction:column}.modal-header{padding:20px 24px;border-bottom:1px solid var(--studio-card-border);display:flex;align-items:center;justify-content:space-between}.modal-header h3{font-family:var(--font-cairo);font-size:18px;font-weight:700;color:#fff;display:flex;align-items:center;gap:10px}.modal-body{padding:24px;display:flex;flex-direction:column;gap:20px}.modal-footer{padding:16px 24px;border-top:1px solid var(--studio-card-border);display:flex;align-items:center;justify-content:flex-end;gap:12px;background:#0b112080}.template-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}.template-card{border:2px solid var(--studio-card-border);border-radius:12px;padding:14px;background:#0f172a99;cursor:pointer;transition:all var(--transition-fast);display:flex;flex-direction:column;gap:10px;position:relative}.template-card:hover{border-color:#3b82f666;transform:translateY(-2px);background:#1e293bb3}.template-card.active{border-color:var(--studio-primary);background:#3b82f61f;box-shadow:0 0 16px #3b82f640}.template-preview-badge{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:600;padding:3px 8px;border-radius:6px;background:#ffffff14;color:#fff}@media print{@page{size:A4 portrait;margin:12mm 15mm}*{-webkit-print-color-adjust:exact!important;print-color-adjust:exact!important}body{background:transparent!important;overflow:visible!important}.studio-header,.studio-sidebar,.preview-control-bar,.studio-modal-overlay,.whatsapp-fab,.template-selector-drawer{display:none!important}.studio-main,.studio-preview-stage,.preview-viewport,.device-frame,.device-screen{overflow:visible!important;height:auto!important;width:100%!important;max-width:100%!important;padding:0!important;margin:0!important;border:none!important;box-shadow:none!important;transform:none!important}.device-frame{display:block!important}section,.card,.stat-card,.editor-card,.doc-card,.project-img,tr,li{break-inside:avoid!important;page-break-inside:avoid!important}}@keyframes cyberPulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.6;transform:scale(.98)}}.animate-pulse{animation:cyberPulse 2s cubic-bezier(.4,0,.6,1) infinite}.template-grid{display:flex;flex-direction:column;gap:10px;max-height:480px;overflow-y:auto;padding-right:4px}.template-grid::-webkit-scrollbar{width:5px}.template-grid::-webkit-scrollbar-thumb{background:#ffffff26;border-radius:4px}