@import "https://fonts.googleapis.com/css2?family=Cairo:wght@400;500;600;700;800&family=Inter:wght@400;500;600;700;800&display=swap";:root{--primary:#06f;--primary-dark:#0052cc;--primary-light:#3385ff;--success:#00c853;--warning:#ffab00;--danger:#ff1744;--info:#00b0ff;--bg:#0f0f1a;--bg-card:#1a1a2e;--bg-card-hover:#252542;--bg-navbar:#131324;--text:#fff;--text-muted:#a0a0b0;--text-dark:#6b6b7b;--border:#2a2a40;--border-light:#3a3a55;--gradient:linear-gradient(135deg, #06f 0%, #00d4aa 100%);--shadow:0 4px 20px #0000004d;--shadow-lg:0 10px 40px #0006;--radius:12px;--radius-sm:8px;--radius-lg:16px;--transition:all .3s ease}*,:before,:after{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth}body{background:var(--bg);color:var(--text);direction:rtl;min-height:100vh;font-family:Cairo,sans-serif;line-height:1.6}html[lang=en] body,html:not([lang=ar]) body.en-body{direction:ltr;font-family:Inter,sans-serif}a{color:inherit;transition:var(--transition);text-decoration:none}ul{list-style:none}button,input,select,textarea{font-family:inherit;font-size:inherit}@keyframes spin{to{transform:rotate(360deg)}}.customer-layout{flex-direction:column;min-height:100vh;display:flex}.main-content{flex:1;padding-top:70px}.top-navbar{background:var(--bg-navbar);border-bottom:1px solid var(--border);z-index:1000;position:fixed;top:0;left:0;right:0}.navbar-inner{justify-content:space-between;align-items:center;gap:20px;max-width:1200px;height:70px;margin:0 auto;padding:0 24px;display:flex}.navbar-logo{align-items:center;gap:10px;font-size:1.2rem;font-weight:800;display:flex}.navbar-logo .logo-icon{font-size:1.5rem}.navbar-logo .logo-text{background:var(--gradient);-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text}.navbar-links{align-items:center;gap:4px;display:flex}.nav-link{border-radius:var(--radius-sm);color:var(--text-muted);transition:var(--transition);align-items:center;gap:6px;padding:8px 16px;font-size:.9rem;font-weight:500;display:flex}.nav-link:hover{color:var(--text);background:var(--bg-card)}.nav-link.active{color:var(--primary-light);background:#0066ff1a}.nav-icon{font-size:1rem}.navbar-actions{align-items:center;gap:12px;display:flex}.lang-btn{border:1px solid var(--border);color:var(--text-muted);cursor:pointer;transition:var(--transition);background:0 0;border-radius:20px;padding:6px 14px;font-size:.8rem;font-weight:600}.lang-btn:hover{border-color:var(--primary);color:var(--primary)}.user-dropdown-wrapper{position:relative}.user-avatar-btn{color:var(--text);cursor:pointer;border-radius:var(--radius-sm);transition:var(--transition);background:0 0;border:none;align-items:center;gap:8px;padding:4px;display:flex}.user-avatar-btn:hover{background:var(--bg-card)}.avatar-circle{background:var(--gradient);border-radius:50%;justify-content:center;align-items:center;width:36px;height:36px;font-size:.85rem;font-weight:700;display:flex}.user-name-text{font-size:.85rem;font-weight:500}.dropdown-arrow{color:var(--text-muted);font-size:.7rem}.user-dropdown{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);min-width:200px;box-shadow:var(--shadow-lg);z-index:100;position:absolute;top:calc(100% + 8px);left:0;overflow:hidden}html[dir=ltr] .user-dropdown{left:auto;right:0}.dropdown-item{color:var(--text);cursor:pointer;width:100%;text-align:inherit;transition:var(--transition);background:0 0;border:none;align-items:center;gap:10px;padding:12px 16px;font-size:.9rem;display:flex}.dropdown-item:hover{background:var(--bg-card-hover)}.logout-item{color:var(--danger)}.dropdown-divider{border:none;border-top:1px solid var(--border);margin:0}.hamburger-btn{color:var(--text);cursor:pointer;background:0 0;border:none;padding:4px 8px;font-size:1.5rem;display:none}.mobile-menu{border-top:1px solid var(--border);padding:8px 16px 16px;display:none}.mobile-nav-link{border-radius:var(--radius-sm);color:var(--text-muted);transition:var(--transition);align-items:center;gap:10px;padding:12px 16px;font-size:.95rem;display:flex}.mobile-nav-link:hover,.mobile-nav-link.active{color:var(--primary-light);background:#0066ff1a}.site-footer{border-top:1px solid var(--border);margin-top:40px;padding:24px}.footer-inner{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:16px;max-width:1200px;margin:0 auto;display:flex}.footer-brand{color:var(--text-muted);font-size:.85rem}.footer-links{gap:20px;display:flex}.footer-links a{color:var(--text-dark);font-size:.85rem}.footer-links a:hover{color:var(--primary)}.page-container{max-width:1200px;margin:0 auto;padding:32px 24px}.page-header{flex-wrap:wrap;justify-content:space-between;align-items:flex-start;gap:16px;margin-bottom:24px;display:flex}.page-title{margin-bottom:4px;font-size:1.6rem;font-weight:700}.page-subtitle{color:var(--text-muted);font-size:.9rem}.back-link{color:var(--text-muted);margin-bottom:12px;font-size:.85rem;display:inline-block}.back-link:hover{color:var(--primary)}.welcome-banner{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);flex-wrap:wrap;justify-content:space-between;align-items:center;gap:16px;margin-bottom:24px;padding:24px;display:flex}.stats-grid{grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px;margin-bottom:24px;display:grid}.stat-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);transition:var(--transition);align-items:center;gap:16px;padding:20px;display:flex}.stat-card:hover{border-color:var(--primary);transform:translateY(-2px)}.stat-icon{font-size:2rem}.stat-value{font-size:1.8rem;font-weight:800;line-height:1}.stat-total{color:var(--text-muted);font-size:1rem;font-weight:400}.stat-label{color:var(--text-muted);margin-top:4px;font-size:.85rem}.section-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);margin-bottom:24px;padding:24px}.section-title{border-bottom:1px solid var(--border);margin-bottom:20px;padding-bottom:12px;font-size:1.1rem;font-weight:700}.quick-actions{grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px;display:grid}.action-card{background:var(--bg-card-hover);border:1px solid var(--border);border-radius:var(--radius-sm);transition:var(--transition);text-align:center;flex-direction:column;align-items:center;gap:8px;padding:20px;font-size:.9rem;display:flex}.action-card:hover{border-color:var(--primary);background:#0066ff0d}.action-icon{font-size:1.5rem}.server-cards{grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:16px;display:grid}.server-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);transition:var(--transition);padding:20px}.server-card:hover{border-color:var(--primary);transform:translateY(-2px)}.server-card-header{justify-content:space-between;align-items:center;margin-bottom:8px;display:flex}.server-hostname{align-items:center;gap:8px;font-size:1.05rem;font-weight:700;display:flex}.server-icon{font-size:1.2rem}.server-ip{color:var(--text-muted);margin-bottom:12px;font-family:JetBrains Mono,monospace;font-size:.85rem}.server-specs{color:var(--text-muted);gap:16px;margin-bottom:12px;font-size:.85rem;display:flex}.server-meta{color:var(--text-dark);justify-content:space-between;margin-bottom:8px;font-size:.82rem;display:flex}.server-expires{color:var(--text-dark);font-size:.8rem}.detail-grid{grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:20px;display:grid}.detail-list{flex-direction:column;gap:0;display:flex}.detail-row{border-bottom:1px solid var(--border);justify-content:space-between;align-items:center;gap:12px;padding:12px 0;display:flex}.detail-row:last-child{border-bottom:none}.detail-row.total{font-size:1.1rem;font-weight:700}.detail-label{color:var(--text-muted);font-size:.9rem}.detail-value{text-align:end;font-weight:500}.detail-divider{border:none;border-top:1px solid var(--border);margin:8px 0}.mono{font-family:JetBrains Mono,Fira Code,monospace}.resource-grid{grid-template-columns:repeat(3,1fr);gap:16px;display:grid}.resource-item{text-align:center;background:var(--bg-card-hover);border-radius:var(--radius-sm);padding:20px}.resource-icon{margin-bottom:8px;font-size:2rem}.resource-value{margin-bottom:4px;font-size:1.4rem;font-weight:700}.resource-label{color:var(--text-muted);font-size:.82rem}.action-buttons{flex-wrap:wrap;gap:12px;display:flex}.plans-grid{grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px;margin-top:32px;display:grid}.plan-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);text-align:center;transition:var(--transition);padding:32px 24px;position:relative}.plan-card:hover{transform:translateY(-4px)}.plan-card.popular{border-color:var(--primary);box-shadow:0 0 30px #0066ff26}.popular-badge{background:var(--gradient);white-space:nowrap;border-radius:20px;padding:4px 20px;font-size:.75rem;font-weight:700;position:absolute;top:-12px;left:50%;transform:translate(-50%)}.plan-name{margin-bottom:16px;font-size:1.3rem;font-weight:700}.plan-price{margin-bottom:4px}.price-amount{font-size:2.5rem;font-weight:800}.price-currency{color:var(--text-muted);margin:0 4px;font-size:1rem}.price-period{color:var(--text-muted);font-size:.85rem}.plan-yearly{color:var(--text-dark);margin-bottom:24px;font-size:.82rem}.plan-features{text-align:start;flex-direction:column;gap:10px;margin-bottom:24px;font-size:.9rem;display:flex}.plan-features li{color:var(--text-muted)}.table-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden}.data-table{border-collapse:collapse;width:100%}.data-table th{text-align:start;color:var(--text-muted);text-transform:uppercase;letter-spacing:.5px;border-bottom:1px solid var(--border);background:var(--bg-card-hover);padding:14px 16px;font-size:.82rem;font-weight:600}.data-table td{border-bottom:1px solid var(--border);padding:14px 16px;font-size:.9rem}.data-table tr:last-child td{border-bottom:none}.data-table tr:hover td{background:var(--bg-card-hover)}.empty-state{text-align:center;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:60px 20px}.empty-icon{margin-bottom:16px;font-size:3rem}.empty-state h3{margin-bottom:8px}.empty-state p{color:var(--text-muted);margin-bottom:20px}.ticket-messages{flex-direction:column;gap:16px;display:flex}.ticket-message{border-radius:var(--radius);border:1px solid var(--border);padding:16px 20px}.ticket-message.staff{background:#0066ff0d;border-color:#06f3}.ticket-message.customer{background:var(--bg-card)}.msg-header{justify-content:space-between;margin-bottom:8px;font-size:.82rem;display:flex}.msg-sender{font-weight:600}.msg-time{color:var(--text-dark)}.msg-body{color:var(--text-muted);line-height:1.7}.profile-header{border-bottom:1px solid var(--border);align-items:center;gap:20px;padding-bottom:20px;display:flex}.profile-avatar{background:var(--gradient);border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:64px;height:64px;font-size:1.3rem;font-weight:800;display:flex}.password-strength{align-items:center;gap:12px;margin-top:8px;display:flex}.strength-bar{background:var(--border);border-radius:2px;flex:1;height:4px;overflow:hidden}.strength-fill{border-radius:2px;height:100%;transition:width .3s}.password-rules{color:var(--text-dark);flex-direction:column;gap:4px;margin-top:12px;margin-bottom:20px;font-size:.82rem;display:flex}.password-rules li:before{content:"○ "}.password-rules li.met{color:var(--success)}.password-rules li.met:before{content:"● "}.auth-page{background:var(--bg);justify-content:center;align-items:center;min-height:100vh;padding:24px;display:flex}.auth-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);width:100%;max-width:420px;box-shadow:var(--shadow-lg);padding:40px 32px}.auth-card-wide{max-width:520px}.auth-logo{justify-content:center;align-items:center;gap:10px;margin-bottom:24px;font-size:1.4rem;font-weight:800;display:flex}.auth-logo .logo-icon{font-size:1.8rem}.auth-title{text-align:center;margin-bottom:8px;font-size:1.4rem}.auth-sub{text-align:center;color:var(--text-muted);margin-bottom:24px;font-size:.9rem}.auth-error{color:var(--danger);border-radius:var(--radius-sm);background:#ff17441a;border:1px solid #ff17444d;margin-bottom:16px;padding:10px 16px;font-size:.85rem}.auth-footer-text{text-align:center;color:var(--text-muted);margin-top:24px;font-size:.85rem}.auth-lang-toggle{text-align:center;margin-top:16px}.lang-btn-sm{border:1px solid var(--border);color:var(--text-muted);cursor:pointer;background:0 0;border-radius:14px;padding:4px 12px;font-size:.78rem}.lang-btn-sm:hover{border-color:var(--primary);color:var(--primary)}.text-link{color:var(--primary-light);font-weight:600}.text-link:hover{color:var(--primary)}.text-muted{color:var(--text-dark);font-size:.8rem}.form-group{margin-bottom:16px}.form-label{color:var(--text-muted);margin-bottom:6px;font-size:.85rem;font-weight:600;display:block}.form-input{background:var(--bg);border:1px solid var(--border);border-radius:var(--radius-sm);width:100%;color:var(--text);transition:var(--transition);outline:none;padding:12px 16px;font-size:.9rem}.form-input:focus{border-color:var(--primary);box-shadow:0 0 0 3px #0066ff26}.form-input::placeholder{color:var(--text-dark)}.form-input-sm{max-width:250px}.form-textarea{resize:vertical;min-height:80px}.form-input-icon{position:relative}.form-input-icon .input-icon{font-size:1rem;position:absolute;top:50%;left:14px;transform:translateY(-50%)}html[dir=ltr] .form-input-icon .input-icon{left:auto;right:14px}.form-input-icon .form-input{padding-left:42px}html[dir=ltr] .form-input-icon .form-input{padding-left:16px;padding-right:42px}.form-grid{grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px;display:grid}.form-row{justify-content:space-between;align-items:center;margin-bottom:20px;display:flex}.form-check{color:var(--text-muted);cursor:pointer;align-items:center;gap:8px;font-size:.85rem;display:flex}.form-check input[type=checkbox]{width:16px;height:16px;accent-color:var(--primary)}select.form-input{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M6 8L1 3h10z' fill='%23a0a0b0'/%3E%3C/svg%3E");background-position:14px;background-repeat:no-repeat;padding-left:36px}html[dir=ltr] select.form-input{background-position:right 14px center;padding-left:16px;padding-right:36px}.billing-toggle{gap:8px;display:flex}.toggle-btn{background:var(--bg);border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--text-muted);cursor:pointer;transition:var(--transition);flex:1;padding:12px;font-size:.85rem}.toggle-btn.active{border-color:var(--primary);color:var(--primary-light);background:#0066ff1a}.btn{border-radius:var(--radius-sm);cursor:pointer;transition:var(--transition);white-space:nowrap;border:none;justify-content:center;align-items:center;gap:8px;padding:12px 24px;font-size:.9rem;font-weight:600;display:inline-flex}.btn:disabled{opacity:.6;cursor:not-allowed}.btn-block{width:100%}.btn-primary{background:var(--gradient);color:#fff}.btn-primary:hover:not(:disabled){filter:brightness(1.1);transform:translateY(-1px)}.btn-outline{border:1px solid var(--border);color:var(--text-muted);background:0 0}.btn-outline:hover:not(:disabled){border-color:var(--primary);color:var(--primary)}.btn-danger{background:var(--danger);color:#fff}.btn-danger:hover:not(:disabled){filter:brightness(1.1)}.btn-warning{background:var(--warning);color:#000}.btn-warning:hover:not(:disabled){filter:brightness(1.1)}.btn-success{background:var(--success);color:#fff}.btn-success:hover:not(:disabled){filter:brightness(1.1)}.desktop-only{display:flex}.mobile-only{display:none}@media (width<=768px){.desktop-only{display:none!important}.mobile-only,.hamburger-btn{display:block}.mobile-menu{flex-direction:column;display:flex}.page-container{padding:20px 16px}.page-header{flex-direction:column}.page-title{font-size:1.3rem}.welcome-banner{text-align:center;flex-direction:column}.stats-grid,.server-cards,.plans-grid,.detail-grid{grid-template-columns:1fr}.resource-grid{grid-template-columns:repeat(3,1fr)}.quick-actions{grid-template-columns:repeat(2,1fr)}.form-grid{grid-template-columns:1fr}.table-card{overflow-x:auto}.data-table{min-width:500px}.footer-inner{text-align:center;flex-direction:column}.footer-links{flex-wrap:wrap;justify-content:center}.auth-card{padding:28px 20px}.billing-toggle{flex-direction:column}}