:root {
  --primary: #6C63FF;
  --primary-dark: #5A52D5;
  --primary-light: #EEF0FF;
  --success: #22C55E;
  --warning: #F59E0B;
  --danger: #EF4444;
  --dark: #1E293B;
  --gray: #64748B;
  --gray-light: #94A3B8;
  --light: #F8FAFC;
  --border: #E2E8F0;
  --radius: 12px;
  --radius-lg: 16px;
  --shadow: 0 1px 3px rgba(0,0,0,.08);
  --shadow-md: 0 4px 6px -1px rgba(0,0,0,.08);
  --shadow-lg: 0 10px 15px -3px rgba(0,0,0,.08);
  --sidebar-width: 260px;
}
* { margin:0; padding:0; box-sizing:border-box; }
body {
  font-family: 'Inter', 'Tajawal', -apple-system, BlinkMacSystemFont, sans-serif;
  background: #F1F5F9;
  color: var(--dark);
  line-height: 1.6;
}
a { text-decoration: none; color: var(--primary); }
.layout { display:flex; min-height:100vh; }
.sidebar {
  width: var(--sidebar-width); background: var(--dark); color: #fff;
  padding: 0; position: fixed; top:0; left:0; height:100vh;
  overflow-y:auto; z-index:100; display:flex; flex-direction:column;
}
.sidebar .brand {
  padding: 20px 20px 16px; border-bottom:1px solid rgba(255,255,255,.08);
  font-size:22px; font-weight:800; display:flex; align-items:center; gap:10px;
}
.sidebar .brand span { color: var(--primary); }
.sidebar .brand small { font-size:10px; font-weight:400; color:rgba(255,255,255,.4); margin-left:auto; }
.sidebar .nav-section { padding: 16px 20px 4px; font-size:10px; color:rgba(255,255,255,.35); text-transform:uppercase; letter-spacing:1.5px; }
.sidebar a.nav-link {
  display:flex; align-items:center; gap:12px; padding:10px 20px;
  color: rgba(255,255,255,.65); transition:.2s; font-size:14px; position:relative;
}
.sidebar a.nav-link:hover { background:rgba(255,255,255,.08); color:#fff; }
.sidebar a.nav-link.active { background:rgba(108,99,255,.15); color:var(--primary); }
.sidebar a.nav-link.active::before {
  content:''; position:absolute; left:0; top:50%; transform:translateY(-50%);
  width:3px; height:20px; background:var(--primary); border-radius:0 3px 3px 0;
}
.sidebar .logout { margin-top:auto; border-top:1px solid rgba(255,255,255,.08); padding:12px 0; }
.sidebar .logout a { color:rgba(255,255,255,.45); }
.main { flex:1; margin-left:var(--sidebar-width); padding:28px 32px; min-height:100vh; }
.top-bar {
  display:flex; justify-content:space-between; align-items:center;
  margin-bottom:24px; flex-wrap:wrap; gap:12px;
}
.lang-switch { display:flex; align-items:center; gap:6px; font-size:13px; font-weight:600; }
.lang-switch a { color:var(--gray); text-decoration:none; padding:4px 10px; border-radius:6px; transition:.2s; }
.lang-switch a:hover { background:var(--primary-light); color:var(--primary); }
.lang-switch a.active { background:var(--primary); color:#fff; }
.lang-switch .sep { color:var(--border); }
.main-header {
  display:flex; justify-content:space-between; align-items:center;
  margin-bottom:28px; flex-wrap:wrap; gap:12px;
}
.main-header h2 { font-size:24px; font-weight:700; }
.user-badge {
  background:#fff; padding:8px 18px; border-radius:50px; font-size:13px;
  box-shadow:var(--shadow); display:flex; align-items:center; gap:8px;
}
.user-badge .credits,
.credits-badge { background:var(--primary-light); color:var(--primary); padding:2px 10px; border-radius:50px; font-weight:700; font-size:12px; }

.alert-banner {
  background:linear-gradient(135deg,#FEF3C7,#FDE68A); border:1px solid #F59E0B;
  color:#92400E; padding:14px 20px; border-radius:var(--radius); margin-bottom:24px;
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px;
  font-size:14px;
}
.alert-banner a { color:#92400E; font-weight:700; text-decoration:underline; }

.stats { display:grid; grid-template-columns:repeat(auto-fit, minmax(200px,1fr)); gap:20px; margin-bottom:32px; }
.stat-card {
  background:#fff; border-radius:var(--radius-lg); padding:22px; box-shadow:var(--shadow);
  transition:.2s;
}
.stat-card:hover { box-shadow:var(--shadow-md); transform:translateY(-2px); }
.stat-card .stat-icon { font-size:32px; margin-bottom:8px; }
.stat-card .label { font-size:13px; color:var(--gray); text-transform:uppercase; letter-spacing:.5px; }
.stat-card .value { font-size:28px; font-weight:800; margin:6px 0; }
.stat-card .sub { font-size:12px; color:var(--gray-light); }

.card { background:#fff; border-radius:var(--radius-lg); box-shadow:var(--shadow); margin-bottom:24px; overflow:hidden; }
.card-header {
  padding:18px 24px; border-bottom:1px solid var(--border);
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:8px;
}
.card-header h3 { font-size:16px; font-weight:600; }
.card-body { padding:20px 24px; }

table { width:100%; border-collapse:collapse; }
th, td { padding:12px 16px; text-align:left; border-bottom:1px solid var(--border); font-size:14px; }
th { background:var(--light); font-weight:600; color:var(--gray); font-size:12px; text-transform:uppercase; letter-spacing:.5px; }
tr:hover { background:#FAFAFA; }

.btn {
  display:inline-flex; align-items:center; gap:6px; padding:8px 18px; border-radius:8px;
  border:none; font-family:inherit; font-size:14px; font-weight:500; cursor:pointer; transition:.2s;
}
.btn-primary { background:var(--primary); color:#fff; }
.btn-primary:hover { background:var(--primary-dark); transform:translateY(-1px); }
.btn-success { background:var(--success); color:#fff; }
.btn-success:hover { background:#16A34A; }
.btn-warning { background:var(--warning); color:#fff; }
.btn-danger { background:var(--danger); color:#fff; }
.btn-sm { padding:4px 12px; font-size:12px; }
.btn-xs { padding:2px 8px; font-size:11px; border-radius:6px; }
.btn-ghost { background:transparent; color:var(--gray); border:1px solid var(--border); }
.btn-ghost:hover { background:var(--light); }

.form-group { margin-bottom:16px; }
.form-group label { display:block; font-size:13px; font-weight:600; margin-bottom:4px; color:var(--dark); }
.form-control {
  width:100%; padding:10px 14px; border:1px solid var(--border); border-radius:8px;
  font-family:inherit; font-size:14px; transition:.2s; background:#fff;
}
.form-control:focus { outline:none; border-color:var(--primary); box-shadow:0 0 0 3px rgba(108,99,255,.15); }
textarea.form-control { min-height:100px; resize:vertical; }
select.form-control { appearance:auto; }

.alert { padding:12px 18px; border-radius:8px; margin-bottom:16px; font-size:14px; }
.alert-success { background:#DCFCE7; color:#166534; border:1px solid #BBF7D0; }
.alert-danger { background:#FEE2E2; color:#991B1B; border:1px solid #FECACA; }
.alert-info { background:#DBEAFE; color:#1E40AF; border:1px solid #BFDBFE; }
.alert-warning { background:#FEF3C7; color:#92400E; border:1px solid #FDE68A; }

.badge { display:inline-block; padding:2px 10px; border-radius:50px; font-size:11px; font-weight:600; }
.badge-success { background:#DCFCE7; color:#166534; }
.badge-warning { background:#FEF3C7; color:#92400E; }
.badge-danger { background:#FEE2E2; color:#991B1B; }
.badge-info { background:#DBEAFE; color:#1E40AF; }

.stars { color:var(--warning); }
.empty { text-align:center; padding:60px 20px; color:var(--gray); }
.empty .icon { font-size:56px; margin-bottom:16px; opacity:.5; }
.empty p { font-size:15px; }
.actions { display:flex; gap:4px; flex-wrap:wrap; }
.search-bar { display:flex; gap:8px; margin-bottom:16px; flex-wrap:wrap; }
.search-bar input { flex:1; min-width:200px; }

.grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.grid-3 { display:grid; grid-template-columns:1fr 1fr 1fr; gap:16px; }

.login-page { min-height:100vh; display:flex; align-items:center; justify-content:center; background:linear-gradient(135deg,var(--primary) 0%,#4338CA 100%); padding:20px; }
.login-card { background:#fff; border-radius:var(--radius-lg); padding:40px; width:440px; max-width:100%; box-shadow:var(--shadow-lg); }
.login-card h1 { text-align:center; font-size:26px; margin-bottom:4px; }
.login-card .subtitle { text-align:center; color:var(--gray); margin-bottom:28px; font-size:14px; }

.sub-status { display:flex; align-items:center; gap:6px; font-size:13px; }
.sub-status .dot { width:8px; height:8px; border-radius:50%; display:inline-block; }
.dot-green { background:var(--success); }
.dot-yellow { background:var(--warning); }
.dot-red { background:var(--danger); }

.plan-selector { display:flex; flex-direction:column; gap:10px; margin-bottom:24px; }
.plan-option {
  display:flex; align-items:center; gap:14px; padding:16px 18px;
  border:2px solid var(--border); border-radius:var(--radius); cursor:pointer; transition:.2s;
}
.plan-option:hover { border-color:var(--primary); }
.plan-option.selected { border-color:var(--primary); background:var(--primary-light); }
.plan-option input[type="radio"] { accent-color:var(--primary); width:18px; height:18px; }
.plan-option .plan-name { font-weight:700; font-size:15px; }
.plan-option .plan-price { margin-left:auto; font-weight:800; color:var(--primary); font-size:20px; text-align:right; }
.plan-option .plan-price small { font-size:11px; font-weight:400; color:var(--gray); display:block; }
.plan-option .plan-desc { font-size:12px; color:var(--gray); }
.plan-option.trial { border-style:dashed; }
.plan-option.trial .plan-price { color:var(--success); }

.pricing-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:24px; margin-bottom:32px; }
.pricing-card {
  background:#fff; border-radius:var(--radius-lg); overflow:hidden;
  box-shadow:var(--shadow); position:relative; transition:.2s; border:2px solid transparent;
}
.pricing-card:hover { box-shadow:var(--shadow-md); transform:translateY(-4px); }
.pricing-card.featured { border-color:var(--primary); }
.pricing-card .popular-badge {
  position:absolute; top:12px; right:12px; background:var(--primary); color:#fff;
  padding:4px 14px; border-radius:50px; font-size:11px; font-weight:700;
}
.pricing-card .pricing-header {
  padding:24px; text-align:center; border-bottom:1px solid var(--border);
}
.pricing-card .pricing-header h3 { font-size:20px; font-weight:700; margin-bottom:4px; }
.pricing-card .pricing-header .subtitle { font-size:13px; color:var(--gray); margin-bottom:12px; }
.pricing-card .pricing-header .price { font-size:36px; font-weight:800; color:var(--primary); }
.pricing-card .pricing-header .price small { font-size:14px; font-weight:400; color:var(--gray); }
.pricing-card .pricing-body { padding:24px; }
.pricing-card .pricing-body ul { list-style:none; padding:0; }
.pricing-card .pricing-body li {
  padding:8px 0; font-size:13px; display:flex; align-items:flex-start; gap:8px;
  border-bottom:1px solid var(--border);
}
.pricing-card .pricing-body li:last-child { border-bottom:none; }
.pricing-card .pricing-body li .check { color:var(--success); font-weight:700; }
.pricing-card .pricing-footer { padding:0 24px 24px; }

.credit-display {
  background:linear-gradient(135deg,var(--primary),var(--primary-dark));
  color:#fff; border-radius:var(--radius-lg); padding:24px; margin-bottom:24px;
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:16px;
}
.credit-display .credit-value { font-size:40px; font-weight:800; }
.credit-display .credit-label { font-size:14px; opacity:.85; }

.modal-overlay {
  display:none; position:fixed; inset:0; background:rgba(0,0,0,.5);
  z-index:1000; align-items:center; justify-content:center; backdrop-filter:blur(4px);
}
.modal-overlay.show { display:flex; }
.modal {
  background:#fff; border-radius:var(--radius-lg); padding:32px;
  width:520px; max-width:92vw; max-height:90vh; overflow-y:auto;
  box-shadow:var(--shadow-lg);
}

.menu-toggle { display:none; background:none; border:none; font-size:22px; cursor:pointer; color:var(--dark); padding:4px; }
.sidebar-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,.4); z-index:90; }
.top-left { display:flex; align-items:center; gap:10px; }

@media (max-width:768px) {
  .menu-toggle { display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px; }
  .sidebar { width:240px; transform:translateX(-100%); position:fixed; transition:transform .25s; }
  .sidebar.open { transform:translateX(0); }
  .sidebar .brand span, .sidebar .brand small, .sidebar .nav-section, .sidebar a.nav-link span { display:inline; }
  .sidebar .brand { justify-content:flex-start; padding:16px 18px; font-size:18px; }
  .sidebar a.nav-link { justify-content:flex-start; padding:10px 18px; }
  .sidebar-overlay.show { display:block; }
  .main { margin-left:0; padding:12px; }
  .main-header h2 { font-size:18px; }
  .main-header { flex-direction:column; align-items:stretch; }
  .top-bar { flex-direction:row; justify-content:space-between; }
  .user-badge { font-size:12px; padding:6px 12px; }
  .grid-2, .grid-3 { grid-template-columns:1fr; }
  .pricing-grid { grid-template-columns:1fr; }
  .stats { grid-template-columns:repeat(2,1fr); gap:8px; }
  .stat-card { padding:14px; }
  .stat-card .value { font-size:20px; }
  .card-header { padding:12px 14px; flex-direction:column; align-items:stretch; }
  .card-body { padding:12px 14px; }
  th, td { padding:8px 10px; font-size:12px; white-space:nowrap; }
  table { display:block; overflow-x:auto; }
  .search-bar { flex-direction:column; }
  .search-bar input { min-width:auto; }
  .form-control { font-size:16px; }
  .modal { padding:20px; }
  .actions { flex-direction:column; }
  .actions .btn { width:100%; justify-content:center; }
  .credit-display { flex-direction:column; text-align:center; }
  .credit-display .credit-value { font-size:28px; }
}

@media (max-width:480px) {
  .main { margin-left:0; padding:8px; }
  .stats { grid-template-columns:1fr 1fr; gap:6px; }
  .stat-card { padding:10px; }
  .stat-card .stat-icon { font-size:24px; margin-bottom:4px; }
  .stat-card .value { font-size:18px; }
  .stat-card .label { font-size:11px; }
  .main-header h2 { font-size:16px; }
  .card { border-radius:10px; }
  .alert-banner { flex-direction:column; text-align:center; font-size:13px; padding:12px 14px; }
  .login-card { padding:24px 20px; }
  .login-card h1 { font-size:20px; }
  .plan-option { padding:12px 14px; }
  .plan-option .plan-price { font-size:16px; }
  .pricing-card .pricing-header { padding:16px; }
  .pricing-card .pricing-body { padding:16px; }
  .pricing-card .pricing-footer { padding:0 16px 16px; }
  .lang-switch a { padding:3px 8px; font-size:12px; }
}

/* RTL overrides */
html[dir="rtl"] .sidebar { left:auto; right:0; }
html[dir="rtl"] .main { margin-left:0; margin-right:var(--sidebar-width); }
html[dir="rtl"] .sidebar a.nav-link.active::before { left:auto; right:0; border-radius:3px 0 0 3px; }
html[dir="rtl"] th, html[dir="rtl"] td { text-align:right; }
html[dir="rtl"] .plan-option .plan-price { margin-left:0; margin-right:auto; text-align:left; }
html[dir="rtl"] .pricing-card .popular-badge { right:auto; left:12px; }
html[dir="rtl"] .alert-banner a { margin-right:auto; margin-left:0; }
@media (max-width:768px) {
  html[dir="rtl"] .sidebar { left:auto; right:0; }
  html[dir="rtl"] .main { margin-left:0; margin-right:52px; }
}
@media (max-width:480px) {
  html[dir="rtl"] .main { margin-right:44px; }
}