@import "https://fonts.googleapis.com/css2?family=Cairo:wght@300;400;500;600;700;800&family=Outfit:wght@300;400;500;600;700&display=swap";:root{--font-arabic:"Cairo", sans-serif;--font-english:"Outfit", sans-serif;--bg-main:#0b0c10;--bg-card:#11121ab3;--bg-sidebar:#0a0b10d9;--border-glass:#ffffff0f;--border-glass-hover:#ffffff1f;--primary:#6366f1;--primary-glow:#6366f166;--secondary:#8b5cf6;--success:#10b981;--success-glow:#10b98133;--warning:#f59e0b;--danger:#ef4444;--text-main:#f3f4f6;--text-muted:#9ca3af;--text-inverse:#000}*{box-sizing:border-box;scrollbar-width:thin;scrollbar-color:#ffffff1a transparent;margin:0;padding:0}body{background-color:var(--bg-main);color:var(--text-main);font-family:var(--font-arabic);direction:rtl;background-image:radial-gradient(at 10% 20%,#6366f114 0,#0000 50%),radial-gradient(at 90% 80%,#8b5cf614 0,#0000 50%);min-height:100vh;overflow-x:hidden}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:0 0}::-webkit-scrollbar-thumb{background:#ffffff1a;border-radius:10px}::-webkit-scrollbar-thumb:hover{background:#fff3}.glass-card{background:var(--bg-card);-webkit-backdrop-filter:blur(16px);border:1px solid var(--border-glass);border-radius:16px;padding:24px;transition:all .3s cubic-bezier(.4,0,.2,1);box-shadow:0 8px 32px #0000004d}.glass-card:hover{border-color:var(--border-glass-hover);box-shadow:0 12px 40px #0006}.status-indicator{border-radius:50%;width:10px;height:10px;display:inline-block}.status-indicator.ready{background-color:var(--success);box-shadow:0 0 12px var(--success)}.status-indicator.initializing,.status-indicator.qr{background-color:var(--warning);box-shadow:0 0 12px var(--warning)}.status-indicator.disconnected,.status-indicator.error{background-color:var(--danger);box-shadow:0 0 12px var(--danger)}@keyframes pulse{0%{transform:scale(1);box-shadow:0 0 #ef4444b3}70%{transform:scale(1.1);box-shadow:0 0 0 15px #ef444400}to{transform:scale(1);box-shadow:0 0 #ef444400}}.recording-pulse{animation:1.5s infinite pulse;background-color:var(--danger)!important}.glass-table{border-collapse:collapse;text-align:right;width:100%}.glass-table th{color:var(--text-muted);border-bottom:1px solid var(--border-glass);text-align:right;padding:16px;font-weight:600}.glass-table td{border-bottom:1px solid var(--border-glass);color:var(--text-main);padding:16px;font-size:14px}.glass-table tr:hover td{background:#ffffff05}.glass-input{border:1px solid var(--border-glass);color:var(--text-main);font-family:var(--font-arabic);background:#ffffff08;border-radius:8px;outline:none;width:100%;padding:12px 16px;transition:all .2s}.glass-input:focus{border-color:var(--primary);box-shadow:0 0 8px var(--primary-glow);background:#ffffff0f}.glass-btn{background:linear-gradient(135deg, var(--primary), var(--secondary));color:#fff;cursor:pointer;font-weight:600;font-family:var(--font-arabic);box-shadow:0 4px 12px var(--primary-glow);border:none;border-radius:8px;justify-content:center;align-items:center;gap:8px;padding:12px 24px;transition:all .2s;display:inline-flex}.glass-btn:hover{box-shadow:0 6px 16px var(--primary-glow);filter:brightness(1.1);transform:translateY(-2px)}.glass-btn:active{transform:translateY(0)}.glass-btn-secondary{border:1px solid var(--border-glass);color:var(--text-main);box-shadow:none;background:#ffffff0d}.glass-btn-secondary:hover{border-color:var(--border-glass-hover);color:#fff;background:#ffffff1a}.app-container{min-height:100vh;display:flex}.sidebar{background:var(--bg-sidebar);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border-left:1px solid var(--border-glass);z-index:10;flex-direction:column;width:280px;height:100vh;padding:30px 20px;display:flex;position:fixed;top:0;right:0}.main-content{flex:1;width:calc(100% - 280px);max-width:1600px;margin-right:280px;padding:40px}@media (width<=768px){.app-container{flex-direction:column}.sidebar{border-left:none;border-bottom:1px solid var(--border-glass);width:100%;height:auto;padding:15px;position:static}.main-content{width:100%;margin-right:0;padding:20px}}.flex{display:flex}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-between{justify-content:space-between}.justify-center{justify-content:center}.flex-1{flex:1}.flex-wrap{flex-wrap:wrap}.h-fit{height:fit-content}.w-full{width:100%}.gap-1{gap:4px}.gap-2{gap:8px}.gap-3{gap:12px}.gap-4{gap:16px}.gap-8{gap:32px}.mb-1{margin-bottom:4px}.mb-2{margin-bottom:8px}.mb-3{margin-bottom:12px}.mb-4{margin-bottom:16px}.mb-6{margin-bottom:24px}.mb-8{margin-bottom:32px}.mt-auto{margin-top:auto}.mt-1{margin-top:4px}.mt-2{margin-top:8px}.mt-4{margin-top:16px}.mr-auto{margin-right:auto}.ml-auto{margin-left:auto}.mx-auto{margin-left:auto;margin-right:auto}.mx-1{margin-left:4px;margin-right:4px}.px-2{padding-left:8px;padding-right:8px}.px-3{padding-left:12px;padding-right:12px}.px-4{padding-left:16px;padding-right:16px}.py-1{padding-top:4px;padding-bottom:4px}.py-2{padding-top:8px;padding-bottom:8px}.py-3{padding-top:12px;padding-bottom:12px}.py-6{padding-top:24px;padding-bottom:24px}.py-12{padding-top:48px;padding-bottom:48px}.pt-6{padding-top:24px}.pt-12{padding-top:48px}.p-0{padding:0}.p-2{padding:8px}.p-3{padding:12px}.p-4{padding:16px}.p-6{padding:24px}.pr-4{padding-right:16px}.w-5{width:20px}.h-5{height:20px}.w-6{width:24px}.h-6{height:24px}.w-10{width:40px}.h-10{height:40px}.w-12{width:48px}.h-12{height:48px}.w-20{width:80px}.h-20{height:80px}.rounded{border-radius:4px}.rounded-lg{border-radius:8px}.rounded-xl{border-radius:12px}.rounded-2xl{border-radius:16px}.rounded-full{border-radius:9999px}.rounded-tr-none{border-top-right-radius:0}.rounded-tl-none{border-top-left-radius:0}.border-t{border-top:1px solid var(--border-glass)}.border-b{border-bottom:1px solid var(--border-glass)}.border{border:1px solid var(--border-glass)}.text-xs{font-size:12px}.text-sm{font-size:14px}.text-md{font-size:16px}.text-lg{font-size:18px}.text-2xl{font-size:24px}.text-3xl{font-size:30px}.font-bold{font-weight:700}.font-semibold{font-weight:600}.font-medium{font-weight:500}.font-mono{font-family:var(--font-english)}.leading-none{line-height:1}.leading-relaxed{line-height:1.625}.text-center{text-align:center}.text-right{text-align:right}.truncate{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.max-w-\[200px\]{max-width:200px}.max-w-\[300px\]{max-width:300px}.max-h-\[250px\]{max-h:250px}.overflow-hidden{overflow:hidden}.overflow-y-auto{overflow-y:auto}.grid{display:grid}.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.gap-6{gap:24px}@media (width>=768px){.md\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.md\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.md\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.md\:col-span-2{grid-column:span 2/span 2}}@media (width>=1024px){.lg\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.lg\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.lg\:col-span-2{grid-column:span 2/span 2}.lg\:col-span-3{grid-column:span 3/span 3}}.bg-white\/5{background-color:#ffffff0d}.bg-white\/10{background-color:#ffffff1a}.bg-black\/30{background-color:#0000004d}.bg-black\/40{background-color:#0006}.bg-indigo-600{background-color:var(--primary)}.bg-indigo-600\/30{background-color:#6366f14d}.bg-indigo-500\/10{background-color:#6366f11a}.bg-emerald-500\/10{background-color:#10b9811a}.bg-blue-500\/10{background-color:#3b82f61a}.bg-amber-500\/10{background-color:#f59e0b1a}.bg-purple-500\/10{background-color:#8b5cf61a}.bg-red-500\/10{background-color:#ef44441a}.text-white{color:#fff}.text-gray-100{color:#f3f4f6}.text-gray-300{color:#d1d5db}.text-gray-400{color:#9ca3af}.text-gray-500{color:#6b7280}.text-gray-600{color:#4b5563}.text-indigo-400{color:#818cf8}.text-emerald-400{color:#34d399}.text-amber-400{color:#fbbf24}.text-red-400{color:#f87171}.bg-gradient-to-tr{background-image:linear-gradient(to top right, var(--tw-gradient-stops))}.from-indigo-500{--tw-gradient-from:#6366f1;--tw-gradient-stops:var(--tw-gradient-from), var(--tw-gradient-to,#6366f100)}.to-purple-500{--tw-gradient-to:#a855f7}.animate-spin{animation:1s linear infinite spin}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.animate-pulse{animation:2s cubic-bezier(.4,0,.6,1) infinite pulse-effect}@keyframes pulse-effect{0%,to{opacity:1}50%{opacity:.5}}.transition-all{transition-property:all;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1)}.shadow-lg{box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -2px #0000000d}.shadow-xl{box-shadow:0 20px 25px -5px #0000001a,0 10px 10px -5px #0000000a}