:root {
  --primary: #28C254;
  --primary-100: #e8fcef;
  --primary-200: #bcf0cd;
  --primary-500: #1fa344;
  --secondary: #707BFF;
  --secondary-100: #eef0ff;
  --secondary-500: #5a65e8;
  --blue: #388BFF;
  --blue-100: #ebf3ff;
  --blue-500: #2a7aed;
  --ink: #131d29;
  --neutral-500: #6c757d;
  --neutral-900: #131d29;
}
* { margin:0; padding:0; box-sizing:border-box; }
body { font-family:'Inter',sans-serif; color:var(--neutral-900); background:#fff; }
body.rtl { direction:rtl; font-family:'Tajawal','Inter',sans-serif; }
.btn-primary {
  background:var(--primary); color:white; padding:0.75rem 2rem; border-radius:9999px;
  font-weight:600; transition:all .2s; display:inline-flex; align-items:center; gap:8px;
  border:none; cursor:pointer; text-decoration:none;
}
.btn-primary:hover { background:var(--primary-500); transform:scale(1.02); }
.btn-outline {
  border:2px solid var(--primary); color:var(--primary); padding:0.5rem 1.5rem;
  border-radius:9999px; font-weight:600; transition:all .2s; background:transparent;
  cursor:pointer; text-decoration:none; display:inline-flex; align-items:center;
}
.btn-outline:hover { background:var(--primary); color:white; }
.btn-sm { padding:0.4rem 1rem; font-size:0.85rem; }
.hero-gradient { background:linear-gradient(to bottom,#e0f7fa,#fff,#fff); }
.feature-bg { background:#fcfefe; }
.step-circle {
  width:48px; height:48px; border-radius:50%; display:flex; align-items:center;
  justify-content:center; font-weight:700; font-size:1.2rem;
  background:var(--primary); color:white; flex-shrink:0;
}
.cta-card { background:var(--ink); border-radius:1.25rem; overflow:hidden; }
.footer-bg { background:var(--ink); }
.card-shadow { box-shadow:0 4px 20px rgba(0,0,0,.06); }
.card-shadow:hover { box-shadow:0 8px 30px rgba(40,194,84,.12); }
.qr-type-card {
  border:1px solid #ededed; border-radius:12px; padding:0.75rem 0.5rem; text-align:center;
  transition:all .2s; cursor:pointer; background:white;
}
.qr-type-card:hover { border-color:var(--primary); box-shadow:0 4px 20px rgba(40,194,84,.1); }
.qr-type-card.active { border-color:var(--primary); background:var(--primary-100); }
.qr-type-card .icon-wrap {
  width:40px; height:40px; margin:0 auto 6px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:var(--primary-100); color:var(--primary);
  transition:all .2s;
}
.qr-type-card.active .icon-wrap { background:var(--primary); color:white; box-shadow:0 4px 12px rgba(40,194,84,.3); }
.qr-type-card .type-label { font-size:0.7rem; font-weight:500; color:var(--neutral-500); display:block; }
.faq-item { border:1px solid #ededed; border-radius:12px; overflow:hidden; transition:all .2s; }
.faq-item.open { border-color:var(--primary); }
.faq-question {
  padding:1.25rem 1.5rem; cursor:pointer; display:flex; justify-content:space-between;
  align-items:center; font-weight:500; background:white; transition:all .2s;
}
.faq-question:hover { background:var(--primary-100); }
.faq-answer {
  max-height:0; overflow:hidden; transition:max-height .3s,padding .3s;
  padding:0 1.5rem; background:white; color:var(--neutral-500); line-height:1.6;
}
.faq-item.open .faq-answer { max-height:300px; padding:0 1.5rem 1.25rem; }
.faq-icon { transition:transform .3s; width:24px; height:24px; color:var(--primary); }
.faq-item.open .faq-icon { transform:rotate(180deg); }
.qr-customizer { background:white; border:1px solid #ededed; border-radius:16px; padding:1.5rem; }
.color-input {
  width:40px; height:40px; border-radius:8px; border:2px solid #e5e7eb;
  cursor:pointer; padding:2px; background:none;
}
.color-input::-webkit-color-swatch-wrapper { padding:0; }
.color-input::-webkit-color-swatch { border:none; border-radius:6px; }
.range-slider { width:100%; accent-color:var(--primary); }
.input-style {
  border:1px solid #e5e7eb; border-radius:8px; padding:0.75rem 1rem;
  width:100%; font-size:.95rem; transition:border-color .2s;
}
.input-style:focus { outline:none; border-color:var(--primary); box-shadow:0 0 0 3px rgba(60,203,218,.15); }
.select-style {
  border:1px solid #e5e7eb; border-radius:8px; padding:0.5rem 0.75rem;
  width:100%; background:white; font-size:.9rem;
}
.download-btn {
  background:var(--primary); color:white; border-radius:8px; padding:0.6rem 1.2rem;
  font-weight:600; font-size:.85rem; transition:all .2s; border:none; cursor:pointer;
}
.download-btn:hover { background:var(--primary-500); }
.download-btn-outline {
  border:2px solid var(--primary); color:var(--primary); border-radius:8px;
  padding:0.6rem 1.2rem; font-weight:600; font-size:.85rem;
  transition:all .2s; background:white; cursor:pointer;
}
.download-btn-outline:hover { background:var(--primary); color:white; }
.nav-link { color:var(--neutral-500); transition:color .2s; font-weight:500; text-decoration:none; cursor:pointer; }
.nav-link:hover { color:var(--primary); }
@keyframes fadeIn { from{opacity:0;transform:translate(-50%,10px)} to{opacity:1;transform:translate(-50%,0)} }
.animate-fade-in { animation:fadeIn .3s ease-out; }
.auth-container {
  min-height:100vh; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg,#e0f7fa 0,#fff 100%); padding:2rem;
}
.auth-card {
  background:white; border-radius:24px; padding:2.5rem; width:100%; max-width:420px;
  box-shadow:0 20px 60px rgba(0,0,0,.08);
}
.auth-card h1 { font-size:1.75rem; font-weight:800; margin-bottom:.5rem; }
.auth-card p { color:var(--neutral-500); margin-bottom:2rem; }
.form-group { margin-bottom:1.25rem; }
.form-group label { display:block; font-size:.875rem; font-weight:500; margin-bottom:.375rem; color:var(--neutral-500); }
.form-error { color:#e40014; font-size:.8rem; margin-top:.25rem; }
.dashboard { display:flex; min-height:100vh; }
.sidebar {
  width:260px; background:white; color:var(--neutral-900); padding:2rem 1.5rem; flex-shrink:0;
  border-right:1px solid #f0f0f0;
}
body.rtl .sidebar { border-right:none; border-left:1px solid #f0f0f0; }
.sidebar-logo { display:flex; align-items:center; gap:8px; font-size:1.25rem; font-weight:800; margin-bottom:2.5rem; }
.sidebar nav { display:flex; flex-direction:column; gap:4px; }
.sidebar nav a {
  color:var(--neutral-500); text-decoration:none; padding:.75rem 1rem;
  border-radius:10px; transition:all .2s; display:flex; align-items:center; gap:12px; font-weight:500;
}
.sidebar nav a:hover { background:var(--primary-100); color:var(--primary); }
.sidebar nav a.active { background:var(--primary); color:white; }
.main-content { flex:1; padding:2rem; background:#f8f9fa; }
.dashboard-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:2rem; }
.dashboard-header h2 { font-size:1.5rem; font-weight:700; }
.qr-table { background:white; border-radius:16px; overflow:hidden; box-shadow:0 4px 20px rgba(0,0,0,.04); }
.qr-table table { width:100%; border-collapse:collapse; }
.qr-table th {
  text-align:left; padding:1rem 1.25rem; font-size:.8rem; font-weight:600;
  color:var(--neutral-500); text-transform:uppercase; letter-spacing:.05em;
  border-bottom:1px solid #f0f0f0; background:#fafafa;
}
body.rtl .qr-table th { text-align:right; }
.qr-table td { padding:1rem 1.25rem; border-bottom:1px solid #f0f0f0; font-size:.9rem; }
.qr-table tr:last-child td { border-bottom:none; }
.delete-btn { color:#e40014; background:none; border:none; cursor:pointer; font-size:.85rem; font-weight:500; padding:4px 8px; border-radius:6px; }
.delete-btn:hover { background:#fff0f0; }
.edit-btn { color:var(--primary); background:none; border:none; cursor:pointer; font-size:.85rem; font-weight:500; padding:4px 8px; border-radius:6px; margin-right:8px; }
.edit-btn:hover { background:var(--primary-100); }
.badge {
  display:inline-block; padding:.2rem .6rem; border-radius:9999px; font-size:.75rem;
  font-weight:600; background:var(--primary-100); color:var(--primary-500);
}
.lang-toggle {
  display:flex; align-items:center; gap:4px; cursor:pointer; padding:4px 8px;
  border-radius:8px; transition:all .2s; background:none; border:none;
  font-size:.8rem; font-weight:600; color:var(--neutral-500);
}
.lang-toggle:hover { background:var(--primary-100); color:var(--primary); }
.file-upload-zone {
  border:2px dashed #d0d0d0; border-radius:12px; padding:1.5rem; text-align:center;
  transition:all .2s; cursor:pointer; background:#fafafa;
}
.file-upload-zone:hover { border-color:var(--primary); background:var(--primary-100); }
.file-upload-zone.has-file { border-color:var(--primary); background:var(--primary-100); }
.phone-mockup {
  background:white; border-radius:40px; box-shadow:0 20px 60px rgba(0,0,0,.1);
  padding:12px; max-width:300px; margin:0 auto;
}
.phone-mockup .screen {
  border-radius:28px; overflow:hidden; background:#f0f4f8; padding:16px;
}
.phone-mockup .status-bar {
  display:flex; justify-content:space-between; font-size:10px; color:#888; margin-bottom:8px;
}
#nav-toggle { display:none; background:none; border:none; cursor:pointer; padding:8px; color:var(--neutral-900); }
.sidebar-overlay { display:none; }

@media (max-width:768px) {
  .nav-links { display:none !important; }
  #nav-toggle { display:block !important; }
  .sidebar { position:fixed; top:0; left:0; bottom:0; z-index:100; width:260px !important; transform:translateX(-100%); transition:transform .25s; overflow-y:auto; }
  body.rtl .sidebar { left:auto; right:0; transform:translateX(100%); }
  .sidebar.open { transform:translateX(0); }
  .sidebar-overlay { display:none; position:fixed; top:0; left:0; right:0; bottom:0; background:rgba(0,0,0,.4); z-index:99; }
  .sidebar-overlay.show { display:block; }
  .dashboard { flex-direction:column; }
  .main-content { padding:1rem; padding-top:0; }
  .dashboard-header { margin-bottom:1rem; }
  .step-indicator { flex-wrap:nowrap; overflow-x:auto; gap:0; }
  .step-line { width:20px; }
  .step-dot .circle { width:28px; height:28px; font-size:.7rem; }
  .step-dot .label { font-size:.6rem; white-space:nowrap; margin:0 4px; }
  .hero-gradient h1 { font-size:2rem !important; }
  .hero-gradient .phone-mockup { max-width:220px; }
  .qr-type-card { min-width:60px; padding:0.5rem 0.25rem; }
  .qr-type-card .icon-wrap { width:28px; height:28px; }
  .qr-type-card .type-label { font-size:.6rem; }
  #generator-content .qr-type-card { min-width:54px; }
  #generator-content [style*="grid-template-columns:repeat(auto-fill,minmax(80px,1fr))"] { grid-template-columns:repeat(auto-fill,minmax(60px,1fr)) !important; }
  .auth-card { padding:1.5rem; }
  .kpi-card { min-width:100%; }
  .qr-table { font-size:.8rem; }
  .chart-box { padding:12px; }
  .admin-card { padding:16px; }
  .account-card { padding:16px; }
  .charts-grid { grid-template-columns:1fr !important; }
}

@media (max-width:480px) {
  .hero-gradient h1 { font-size:1.5rem !important; }
  .hero-gradient { padding:32px 16px !important; }
  .step-line { width:12px; }
  .step-dot .label { font-size:.55rem; }
}