/* ===== ROOT VARIABLES ===== */
:root {
  --primary: #6C63FF;
  --primary-dark: #5a52d5;
  --secondary: #f093fb;
  --accent: #4facfe;
  --success: #43e97b;
  --danger: #f5576c;
  --warning: #fee140;
  --dark: #0f0f1a;
  --dark-2: #161625;
  --dark-3: #1e1e35;
  --dark-4: #252540;
  --bg-glass: rgba(15,15,26,0.85);
  --border: rgba(255,255,255,0.08);
  --text: #e8e8f0;
  --text-muted: #8888aa;
  --radius: 16px;
  --radius-sm: 10px;
  --shadow: 0 8px 32px rgba(0,0,0,0.4);
  --shadow-sm: 0 4px 16px rgba(0,0,0,0.2);
  --transition: 0.3s cubic-bezier(0.4,0,0.2,1);
  --font: 'Cairo', 'Tajawal', sans-serif;
}

/* ===== LIGHT THEME ===== */
[data-theme="light"] {
  --dark: #f8fafc;
  --dark-2: #ffffff;
  --dark-3: #f1f5f9;
  --dark-4: #e2e8f0;
  --border: rgba(0,0,0,0.06);
  --text: #1e293b;
  --text-muted: #64748b;
  --bg-glass: rgba(255,255,255,0.85);
  --shadow: 0 10px 40px rgba(0,0,0,0.05);
  --shadow-sm: 0 4px 12px rgba(0,0,0,0.04);
}

* { margin:0; padding:0; box-sizing:border-box; }
html, body { height:100%; font-family: var(--font); background: var(--dark); color: var(--text); direction: rtl; overflow-x: hidden; }
a { text-decoration: none; color: inherit; }
input, select, textarea, button { font-family: var(--font); }

.card-login-title {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin-bottom: 1.75rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--border);
}
.card-login-title i {
  width: 40px; height: 40px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  display: flex; align-items: center; justify-content: center;
  font-size: 1rem; color: #fff;
}
.card-login-title h3 {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--text);
}

/* ===== PAGES ===== */
.page { display:none; min-height:100vh; }
.page.active { display:block; }

/* ===== NAVBAR ===== */
.navbar { position:fixed; top:0; left:0; right:0; z-index:100; padding:0 2rem; height:70px; display:flex; align-items:center; background:var(--bg-glass); backdrop-filter:blur(20px); border-bottom:1px solid var(--border); }
.nav-container { width:100%; max-width:1400px; margin:0 auto; display:flex; align-items:center; justify-content:space-between; }
.nav-brand { display:flex; align-items:center; gap:.75rem; }
.brand-icon { width:40px; height:40px; background:linear-gradient(135deg,var(--primary),var(--secondary)); border-radius:10px; display:flex; align-items:center; justify-content:center; font-size:1.1rem; color:#fff; }
.brand-icon.large { width:56px; height:56px; font-size:1.5rem; border-radius:14px; }
.brand-icon.small { width:32px; height:32px; font-size:.9rem; border-radius:8px; }
.brand-name { font-size:1.4rem; font-weight:800; background:linear-gradient(135deg,var(--primary),var(--secondary)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.brand-name.large { font-size:2rem; }
.nav-actions { display:flex; gap:.75rem; }

/* ===== BUTTONS ===== */
.btn { padding:.6rem 1.25rem; border:none; border-radius:var(--radius-sm); cursor:pointer; font-weight:600; font-size:.9rem; display:inline-flex; align-items:center; gap:.5rem; transition:var(--transition); }
.btn-primary { background:linear-gradient(135deg,var(--primary),var(--primary-dark)); color:#fff; box-shadow:0 4px 15px rgba(108,99,255,0.4); }
.btn-primary:hover { transform:translateY(-2px); box-shadow:0 6px 20px rgba(108,99,255,0.6); }
.btn-ghost { background:transparent; color:var(--text); border:1px solid var(--border); }
.btn-ghost:hover { background:var(--dark-3); }
.btn-success { background:linear-gradient(135deg,var(--success),#38f9d7); color:#111; }
.btn-success:hover { transform:translateY(-2px); }
.btn-danger { background:linear-gradient(135deg,var(--danger),#fa709a); color:#fff; }
.btn-hero { padding:.85rem 2rem; font-size:1rem; border-radius:50px; background:linear-gradient(135deg,var(--primary),var(--secondary)); color:#fff; box-shadow:0 8px 30px rgba(108,99,255,0.5); }
.btn-hero:hover { transform:translateY(-3px); box-shadow:0 12px 40px rgba(108,99,255,0.7); }
.btn-hero-outline { padding:.85rem 2rem; font-size:1rem; border-radius:50px; background:transparent; color:var(--text); border:2px solid var(--border); }
.btn-hero-outline:hover { border-color:var(--primary); background:rgba(108,99,255,0.1); }
.btn-link { background:none; border:none; color:var(--primary); cursor:pointer; font-size:.85rem; font-weight:600; }
.btn-sm { padding:.4rem .85rem; font-size:.8rem; }
.full-width { width:100%; justify-content:center; }

/* ===== HERO ===== */
.hero { min-height:100vh; display:flex; align-items:center; justify-content:space-between; padding:100px 4rem 4rem; max-width:1400px; margin:0 auto; position:relative; gap:3rem; flex-wrap:wrap; }
.hero-bg { position:fixed; inset:0; z-index:-1; overflow:hidden; }
.hero-blob { position:absolute; border-radius:50%; filter:blur(80px); opacity:.15; animation:float 8s ease-in-out infinite; }
.blob-1 { width:600px; height:600px; background:var(--primary); top:-200px; right:-200px; }
.blob-2 { width:400px; height:400px; background:var(--secondary); bottom:-100px; left:-100px; animation-delay:-3s; }
.blob-3 { width:300px; height:300px; background:var(--accent); top:50%; left:50%; animation-delay:-5s; }
@keyframes float { 0%,100%{transform:translateY(0) scale(1)} 50%{transform:translateY(-30px) scale(1.05)} }
.hero-content { flex:1; min-width:300px; max-width:600px; }
.hero-badge { display:inline-flex; align-items:center; gap:.5rem; background:rgba(108,99,255,0.15); border:1px solid rgba(108,99,255,0.3); border-radius:50px; padding:.4rem 1rem; font-size:.85rem; color:var(--primary); margin-bottom:1.5rem; }
.hero-title { font-size:clamp(2.5rem,5vw,4rem); font-weight:900; line-height:1.15; margin-bottom:1.25rem; }
.gradient-text { background:linear-gradient(135deg,var(--primary),var(--secondary),var(--accent)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.hero-subtitle { font-size:1.15rem; color:var(--text-muted); line-height:1.7; margin-bottom:2rem; }
.hero-cta { display:flex; gap:1rem; flex-wrap:wrap; margin-bottom:2.5rem; }
.hero-stats { display:flex; align-items:center; gap:1.5rem; flex-wrap:wrap; }
.stat-item { text-align:center; }
.stat-number { display:block; font-size:1.8rem; font-weight:800; background:linear-gradient(135deg,var(--primary),var(--secondary)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.stat-label { font-size:.8rem; color:var(--text-muted); }
.stat-divider { width:1px; height:40px; background:var(--border); }

/* ===== HERO PREVIEW ===== */
.hero-preview { flex:1; min-width:280px; max-width:420px; }
.preview-card { background:var(--dark-2); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); animation:float 6s ease-in-out infinite; }
.preview-header { background:var(--dark-3); padding:1rem 1.25rem; display:flex; align-items:center; gap:.75rem; }
.preview-dots { display:flex; gap:.4rem; }
.preview-dots span { width:10px; height:10px; border-radius:50%; background:var(--border); }
.preview-dots span:nth-child(1){background:#f5576c;} .preview-dots span:nth-child(2){background:#fee140;} .preview-dots span:nth-child(3){background:#43e97b;}
.preview-body { padding:1.5rem; }
.preview-question { margin-bottom:1.5rem; }
.preview-q-label { font-size:.75rem; color:var(--primary); font-weight:700; margin-bottom:.4rem; }
.preview-q-text { font-size:1rem; font-weight:600; margin-bottom:1rem; }
.preview-options { display:flex; flex-direction:column; gap:.5rem; }
.preview-option { padding:.6rem 1rem; border:1px solid var(--border); border-radius:.5rem; font-size:.85rem; cursor:pointer; transition:var(--transition); }
.preview-option.selected { border-color:var(--primary); background:rgba(108,99,255,0.15); color:var(--primary); }
.preview-progress { height:6px; background:var(--border); border-radius:3px; margin-bottom:1.25rem; overflow:hidden; }
.preview-progress-bar { height:100%; background:linear-gradient(90deg,var(--primary),var(--secondary)); border-radius:3px; }
.preview-nav { display:flex; justify-content:flex-end; }
.preview-btn { padding:.5rem 1.25rem; background:linear-gradient(135deg,var(--primary),var(--primary-dark)); color:#fff; border:none; border-radius:.5rem; cursor:pointer; font-family:var(--font); font-size:.85rem; font-weight:600; }

/* ===== FEATURES ===== */
.features { padding:6rem 2rem; }
.container { max-width:1200px; margin:0 auto; }
.section-header { text-align:center; margin-bottom:3rem; }
.section-title { font-size:clamp(1.8rem,3vw,2.5rem); font-weight:800; margin-bottom:.75rem; }
.section-subtitle { color:var(--text-muted); font-size:1.05rem; }
.features-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:1.5rem; }
.feature-card { background:var(--dark-2); border:1px solid var(--border); border-radius:var(--radius); padding:2rem; transition:var(--transition); }
.feature-card:hover { transform:translateY(-6px); border-color:rgba(108,99,255,0.3); box-shadow:var(--shadow); }
.feature-icon { width:56px; height:56px; border-radius:14px; display:flex; align-items:center; justify-content:center; font-size:1.4rem; color:#fff; margin-bottom:1.25rem; }
.feature-card h3 { font-size:1.15rem; font-weight:700; margin-bottom:.6rem; }
.feature-card p { color:var(--text-muted); font-size:.9rem; line-height:1.6; }

/* ===== FOOTER ===== */
.footer { padding:2rem; text-align:center; background:var(--dark-2); border-top:1px solid var(--border); }
.footer-brand { font-size:1.2rem; font-weight:800; margin-bottom:.5rem; }
.footer-brand i { color:var(--primary); }
.footer p { color:var(--text-muted); font-size:.85rem; }

/* ===== AUTH ===== */
.auth-container { display:flex; min-height:100vh; background:var(--dark); }
.auth-right { flex:1; display:flex; flex-direction:column; justify-content:center; align-items:center; padding:3rem; position:relative; overflow:hidden; }
.auth-right::before { content:''; position:absolute; width:600px; height:600px; border-radius:50%; background:var(--primary); filter:blur(120px); opacity:.07; top:-200px; right:-200px; }
.auth-right::after { content:''; position:absolute; width:400px; height:400px; border-radius:50%; background:var(--secondary); filter:blur(100px); opacity:.07; bottom:-100px; left:-100px; }
.auth-card { width:100%; max-width:420px; background:var(--dark-2); border:1px solid var(--border); border-radius:var(--radius); padding:2.5rem; box-shadow:var(--shadow); }
.auth-tabs { display:flex; background:var(--dark-3); border-radius:var(--radius-sm); padding:.3rem; margin-bottom:2rem; }
.auth-tab { flex:1; padding:.6rem; border:none; background:transparent; color:var(--text-muted); border-radius:.6rem; cursor:pointer; font-weight:600; font-family:var(--font); transition:var(--transition); }
.auth-tab.active { background:var(--primary); color:#fff; }
.auth-form { display:flex; flex-direction:column; gap:1.25rem; }
.auth-form.hidden { display:none; }
.form-group { display:flex; flex-direction:column; gap:.5rem; }
.form-group label { font-size:.85rem; font-weight:600; color:var(--text-muted); display:flex; align-items:center; gap:.4rem; }
.form-control { padding:.75rem 1rem; background:var(--dark-3); border:1px solid var(--border); border-radius:var(--radius-sm); color:var(--text); font-size:.95rem; transition:var(--transition); width:100%; }
.form-control:focus { outline:none; border-color:var(--primary); box-shadow:0 0 0 3px rgba(108,99,255,0.15); }
.form-control.large { font-size:1.2rem; padding:1rem 1.25rem; }
.input-group { position:relative; }
.input-group .form-control { padding-left:2.5rem; }
.input-toggle { position:absolute; left:.75rem; top:50%; transform:translateY(-50%); background:none; border:none; color:var(--text-muted); cursor:pointer; }
.form-options { display:flex; align-items:center; justify-content:space-between; }
.checkbox-label { display:flex; align-items:center; gap:.4rem; cursor:pointer; font-size:.85rem; }
.forgot-link { font-size:.85rem; color:var(--primary); }
.auth-divider { text-align:center; color:var(--text-muted); font-size:.85rem; position:relative; }
.auth-divider::before, .auth-divider::after { content:''; position:absolute; top:50%; width:40%; height:1px; background:var(--border); }
.auth-divider::before { right:0; } .auth-divider::after { left:0; }
.demo-title { font-size:.8rem; color:var(--text-muted); text-align:center; margin-bottom:.5rem; }
.demo-accounts { display:flex; gap:.75rem; }
.demo-btn { flex:1; padding:.5rem; background:var(--dark-3); border:1px solid var(--border); border-radius:var(--radius-sm); cursor:pointer; color:var(--text); font-size:.8rem; font-family:var(--font); font-weight:600; transition:var(--transition); }
.demo-btn:hover { border-color:var(--primary); color:var(--primary); }
.back-home { margin-top:1.5rem; background:none; border:none; color:var(--text-muted); cursor:pointer; font-size:.85rem; display:flex; align-items:center; gap:.4rem; transition:var(--transition); }
.back-home:hover { color:var(--primary); }

/* ===== DASHBOARD LAYOUT ===== */
.sidebar { position:fixed; right:0; top:0; bottom:0; width:260px; background:var(--dark-2); border-left:1px solid var(--border); display:flex; flex-direction:column; z-index:50; transition:var(--transition); }
.sidebar-header { padding:1.25rem 1.5rem; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--border); }
.sidebar-toggle { background:none; border:none; color:var(--text-muted); cursor:pointer; font-size:1.1rem; }
.sidebar-nav { flex:1; padding:1rem .75rem; overflow-y:auto; display:flex; flex-direction:column; gap:.25rem; }
.nav-section { margin-bottom:1rem; }
.nav-section-title { font-size:.7rem; font-weight:700; text-transform:uppercase; color:var(--text-muted); padding:.5rem .75rem; letter-spacing:.1em; }
.nav-item { display:flex; align-items:center; gap:.75rem; padding:.75rem 1rem; border-radius:var(--radius-sm); color:var(--text-muted); transition:var(--transition); cursor:pointer; font-size:.9rem; font-weight:500; }
.nav-item:hover { color:var(--text); background:var(--dark-3); }
.nav-item.active { color:var(--primary); background:rgba(108,99,255,0.12); font-weight:700; }
.nav-item .fas { width:18px; text-align:center; }
.nav-badge { margin-right:auto; background:var(--primary); color:#fff; font-size:.7rem; padding:.15rem .45rem; border-radius:50px; font-weight:700; min-width:20px; text-align:center; }
.sidebar-footer { padding:1.25rem; border-top:1px solid var(--border); display:flex; align-items:center; gap:.75rem; }
.user-info { flex:1; display:flex; align-items:center; gap:.75rem; overflow:hidden; }
.user-avatar { width:38px; height:38px; border-radius:50%; background:linear-gradient(135deg,var(--primary),var(--secondary)); display:flex; align-items:center; justify-content:center; font-weight:700; font-size:.95rem; color:#fff; flex-shrink:0; }
.user-avatar.small { width:30px; height:30px; font-size:.8rem; }
.user-details { overflow:hidden; }
.user-name { display:block; font-weight:700; font-size:.9rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.user-role { display:block; font-size:.75rem; color:var(--text-muted); }
.logout-btn { background:none; border:none; color:var(--text-muted); cursor:pointer; font-size:1.1rem; padding:.5rem; border-radius:.5rem; transition:var(--transition); }
.logout-btn:hover { color:var(--danger); background:rgba(245,87,108,0.1); }
.main-content { margin-right:260px; min-height:100vh; display:flex; flex-direction:column; }
.topbar { padding:0 2rem; height:70px; display:flex; align-items:center; justify-content:space-between; background:var(--bg-glass); border-bottom:1px solid var(--border); position:sticky; top:0; z-index:40; backdrop-filter:blur(20px); }
.topbar-left { display:flex; align-items:center; gap:1rem; }
.topbar-right { display:flex; align-items:center; gap:.75rem; }
.breadcrumb { display:flex; align-items:center; gap:.5rem; color:var(--text-muted); font-size:.9rem; }
.topbar-search { display:flex; align-items:center; gap:.5rem; background:var(--dark-3); border:1px solid var(--border); border-radius:var(--radius-sm); padding:.5rem 1rem; }
.topbar-search input { background:none; border:none; color:var(--text); font-size:.85rem; outline:none; width:180px; }
.topbar-search i { color:var(--text-muted); }
.topbar-btn { background:var(--dark-3); border:1px solid var(--border); width:38px; height:38px; border-radius:.75rem; display:flex; align-items:center; justify-content:center; cursor:pointer; color:var(--text-muted); position:relative; transition:var(--transition); }
.topbar-btn:hover { color:var(--primary); }
.notif-dot { position:absolute; top:6px; right:6px; width:8px; height:8px; border-radius:50%; background:var(--danger); }
.topbar-user { display:flex; align-items:center; gap:.5rem; cursor:pointer; font-size:.85rem; font-weight:600; }
.mobile-menu-btn { display:none; background:none; border:none; color:var(--text-muted); font-size:1.2rem; cursor:pointer; }

/* ===== SECTIONS ===== */
.sections-container { flex:1; padding:2rem; }
.section { display:none; animation:fadeInUp .4s ease; }
.section.active { display:block; }
@keyframes fadeInUp { from{opacity:0;transform:translateY(20px)} to{opacity:1;transform:translateY(0)} }
.section-header-row { display:flex; align-items:flex-start; justify-content:space-between; margin-bottom:2rem; gap:1rem; flex-wrap:wrap; }
.section-title { font-size:1.75rem; font-weight:800; }
.section-desc { color:var(--text-muted); font-size:.9rem; margin-top:.25rem; }
.header-actions { display:flex; gap:.75rem; align-items:center; flex-wrap:wrap; }

/* ===== STATS GRID ===== */
.stats-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:1.25rem; margin-bottom:2rem; }
.stat-card { background:var(--dark-2); border:1px solid var(--border); border-radius:var(--radius); padding:1.5rem; display:flex; align-items:center; gap:1rem; position:relative; overflow:hidden; transition:var(--transition); }
.stat-card::before { content:''; position:absolute; top:0; right:0; width:4px; height:100%; background:var(--color,var(--primary)); }
.stat-card:hover { transform:translateY(-3px); box-shadow:var(--shadow-sm); }
.stat-icon { width:48px; height:48px; border-radius:12px; background:rgba(var(--color-rgb,108,99,255),.15); display:flex; align-items:center; justify-content:center; font-size:1.25rem; color:var(--color,var(--primary)); flex-shrink:0; }
.stat-info { flex:1; }
.stat-value { display:block; font-size:2rem; font-weight:800; line-height:1; }
.stat-name { font-size:.8rem; color:var(--text-muted); margin-top:.25rem; }
.stat-trend { font-size:.75rem; color:var(--success); display:flex; align-items:center; gap:.3rem; }
.stat-trend.up { color:var(--success); }
.stat-trend.neutral { color:var(--text-muted); }

/* ===== OVERVIEW GRID ===== */
.overview-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:1.5rem; }
.overview-card { background:var(--dark-2); border:1px solid var(--border); border-radius:var(--radius); padding:1.5rem; }
.card-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:1.25rem; }
.card-header h3 { font-size:1rem; font-weight:700; }
.recent-list { display:flex; flex-direction:column; gap:.75rem; }
.recent-item { display:flex; align-items:center; gap:.75rem; padding:.75rem; background:var(--dark-3); border-radius:var(--radius-sm); transition:var(--transition); }
.recent-item:hover { background:var(--dark-4); }
.recent-icon { width:36px; height:36px; border-radius:.5rem; background:rgba(108,99,255,.15); display:flex; align-items:center; justify-content:center; color:var(--primary); flex-shrink:0; }
.recent-info { flex:1; overflow:hidden; }
.recent-title { font-size:.9rem; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.recent-meta { font-size:.75rem; color:var(--text-muted); }
.recent-badge { font-size:.7rem; padding:.25rem .6rem; border-radius:50px; background:rgba(108,99,255,.15); color:var(--primary); white-space:nowrap; }

/* ===== FORMS GRID ===== */
.filter-bar { display:flex; gap:1rem; margin-bottom:1.5rem; align-items:center; flex-wrap:wrap; }
.search-box { display:flex; align-items:center; gap:.5rem; background:var(--dark-2); border:1px solid var(--border); border-radius:var(--radius-sm); padding:.6rem 1rem; flex:1; min-width:200px; }
.search-box input { background:none; border:none; color:var(--text); flex:1; outline:none; font-size:.9rem; }
.search-box i { color:var(--text-muted); }
.filter-btns { display:flex; gap:.4rem; }
.filter-btn { padding:.5rem 1rem; background:var(--dark-2); border:1px solid var(--border); border-radius:var(--radius-sm); cursor:pointer; color:var(--text-muted); font-size:.85rem; font-weight:600; font-family:var(--font); transition:var(--transition); }
.filter-btn.active { background:var(--primary); color:#fff; border-color:var(--primary); }
.forms-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:1.5rem; }
.form-card { background:var(--dark-2); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; transition:var(--transition); }
.form-card:hover { transform:translateY(-4px); box-shadow:var(--shadow); border-color:rgba(108,99,255,.3); }
.form-card-header { padding:1.25rem; background:linear-gradient(135deg,rgba(108,99,255,.1),rgba(240,147,251,.05)); border-bottom:1px solid var(--border); display:flex; align-items:flex-start; gap:1rem; }
.form-card-logo { width:48px; height:48px; border-radius:10px; background:linear-gradient(135deg,var(--primary),var(--secondary)); display:flex; align-items:center; justify-content:center; font-size:1.25rem; color:#fff; flex-shrink:0; overflow:hidden; }
.form-card-logo img { width:100%; height:100%; object-fit:cover; }
.form-card-info { flex:1; overflow:hidden; }
.form-card-title { font-size:1rem; font-weight:700; margin-bottom:.25rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.form-card-desc { font-size:.8rem; color:var(--text-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.form-card-body { padding:1.25rem; }
.form-meta-row { display:flex; gap:.75rem; flex-wrap:wrap; margin-bottom:1rem; }
.meta-tag { font-size:.75rem; padding:.2rem .6rem; border-radius:50px; display:flex; align-items:center; gap:.3rem; }
.meta-tag.type { background:rgba(79,172,254,.15); color:var(--accent); }
.meta-tag.count { background:rgba(108,99,255,.15); color:var(--primary); }
.meta-tag.status-active { background:rgba(67,233,123,.15); color:var(--success); }
.meta-tag.status-inactive { background:rgba(136,136,170,.15); color:var(--text-muted); }
.meta-tag.count[onclick]:hover { background:var(--primary); color:#fff; transform:translateY(-1px); }
.form-card-actions { display:flex; gap:.5rem; justify-content:flex-end; }
.icon-btn { width:34px; height:34px; border-radius:.5rem; display:flex; align-items:center; justify-content:center; cursor:pointer; border:1px solid var(--border); background:var(--dark-3); color:var(--text-muted); transition:var(--transition); font-size:.85rem; }
.icon-btn:hover { background:var(--dark-4); color:var(--primary); border-color:var(--primary); }
.icon-btn.danger:hover { color:var(--danger); border-color:var(--danger); background:rgba(245,87,108,.1); }

/* ===== FORM EDITOR ===== */
.form-editor { display:flex; flex-direction:column; gap:1.5rem; max-width:860px; margin:0 auto; }
.editor-card { background:var(--dark-2); border:1px solid var(--border); border-radius:var(--radius); padding:2rem; }
.form-settings-card { display:flex; gap:1.5rem; align-items:flex-start; flex-wrap:wrap; }
.form-logo-section { flex-shrink:0; }
.logo-preview { width:100px; height:100px; border:2px dashed var(--border); border-radius:var(--radius); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.4rem; cursor:pointer; transition:var(--transition); color:var(--text-muted); font-size:.75rem; text-align:center; }
.logo-preview:hover { border-color:var(--primary); color:var(--primary); background:rgba(108,99,255,.05); }
.logo-preview i { font-size:1.5rem; }
.logo-preview img { width:100%; height:100%; object-fit:cover; border-radius:12px; }
.form-meta { flex:1; display:flex; flex-direction:column; gap:1rem; min-width:200px; }
.form-options-row { display:flex; gap:1rem; flex-wrap:wrap; align-items:center; }
.form-option { display:flex; flex-direction:column; gap:.35rem; flex:1; min-width:120px; }
.form-option label { font-size:.8rem; color:var(--text-muted); font-weight:600; }

/* TOGGLE */
.toggle-switch { display:flex; align-items:center; gap:.5rem; cursor:pointer; }
.toggle-switch input { display:none; }
.toggle-slider { width:44px; height:24px; background:var(--dark-4); border-radius:12px; position:relative; transition:var(--transition); flex-shrink:0; }
.toggle-slider::after { content:''; position:absolute; width:18px; height:18px; border-radius:50%; background:#fff; top:3px; right:3px; transition:var(--transition); }
.toggle-switch input:checked + .toggle-slider { background:var(--success); }
.toggle-switch input:checked + .toggle-slider::after { right:23px; }
.toggle-label { font-size:.85rem; font-weight:600; }

/* ===== QUESTION EDITOR ===== */
.question-card { background:var(--dark-2); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; transition:var(--transition); }
.question-card:hover { border-color:rgba(108,99,255,.3); }
.question-card.dragging { opacity:.5; border-style:dashed; }
.question-drag-handle { padding:.75rem 1rem; background:var(--dark-3); border-bottom:1px solid var(--border); display:flex; align-items:center; justify-content:space-between; cursor:grab; }
.drag-icon { color:var(--text-muted); font-size:.9rem; }
.question-type-badge { font-size:.75rem; padding:.2rem .6rem; border-radius:50px; background:rgba(108,99,255,.15); color:var(--primary); font-weight:600; }
.question-card-body { padding:1.5rem; display:flex; flex-direction:column; gap:1rem; }
.q-header-row { display:flex; gap:1rem; align-items:flex-start; }
.q-number { width:30px; height:30px; border-radius:50%; background:var(--primary); color:#fff; font-size:.85rem; font-weight:700; display:flex; align-items:center; justify-content:center; flex-shrink:0; margin-top:.25rem; }
.q-inputs { flex:1; display:flex; flex-direction:column; gap:.75rem; }
.q-options-list { display:flex; flex-direction:column; gap:.5rem; }
.q-option-item { display:flex; align-items:center; gap:.5rem; }
.option-radio { width:18px; height:18px; border-radius:50%; border:2px solid var(--border); flex-shrink:0; }
.option-input { flex:1; padding:.5rem .75rem; background:var(--dark-3); border:1px solid var(--border); border-radius:.5rem; color:var(--text); font-size:.9rem; }
.option-correct-btn { width:28px; height:28px; border-radius:50%; border:2px solid var(--border); background:none; cursor:pointer; transition:var(--transition); flex-shrink:0; display:flex; align-items:center; justify-content:center; font-size:.75rem; color:var(--text-muted); }
.option-correct-btn.correct { border-color:var(--success); background:rgba(67,233,123,.2); color:var(--success); }
.delete-option-btn { width:24px; height:24px; border-radius:50%; border:none; background:none; cursor:pointer; color:var(--text-muted); transition:var(--transition); }
.delete-option-btn:hover { color:var(--danger); }
.add-option-btn { padding:.4rem .8rem; background:none; border:1px dashed var(--border); border-radius:.5rem; cursor:pointer; color:var(--text-muted); font-size:.8rem; font-family:var(--font); transition:var(--transition); display:inline-flex; align-items:center; gap:.3rem; }
.add-option-btn:hover { border-color:var(--primary); color:var(--primary); }
.question-actions { display:flex; justify-content:flex-end; gap:.5rem; padding-top:.75rem; border-top:1px solid var(--border); }
.q-required-toggle { display:flex; align-items:center; gap:.5rem; font-size:.8rem; color:var(--text-muted); }

/* Edit / View states */
.question-card .q-edit-fields { display: flex; flex-direction: column; gap: 1rem; }
.question-card .q-text-view { display: none; font-size: 1rem; font-weight: 600; cursor: pointer; padding: .5rem 0; }
.question-card.collapsed .q-edit-fields { display: none; }
.question-card.collapsed .q-text-view { display: block; }
.question-card.collapsed { background: var(--dark-3); border-color: var(--border); }
.question-card.collapsed:hover { border-color: var(--primary); }

/* ===== ADD QUESTION AREA ===== */
.add-question-area { background:var(--dark-2); border:2px dashed var(--border); border-radius:var(--radius); padding:2rem; text-align:center; }
.add-question-types { display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; }
.add-type-btn { display:flex; flex-direction:column; align-items:center; gap:.5rem; padding:1rem 1.25rem; background:var(--dark-3); border:1px solid var(--border); border-radius:var(--radius-sm); cursor:pointer; transition:var(--transition); color:var(--text-muted); font-size:.8rem; font-family:var(--font); min-width:90px; }
.add-type-btn i { font-size:1.25rem; color:var(--primary); }
.add-type-btn:hover { background:rgba(108,99,255,.1); border-color:var(--primary); color:var(--text); }

/* ===== RESPONSES TABLE ===== */
.responses-table-wrapper { background:var(--dark-2); border:1px solid var(--border); border-radius:var(--radius); overflow-x:auto; }
.responses-table { width:100%; border-collapse:collapse; }
.responses-table th { padding:1rem 1.25rem; background:var(--dark-3); font-size:.8rem; text-transform:uppercase; letter-spacing:.05em; color:var(--text-muted); text-align:right; font-weight:700; white-space:nowrap; }
.responses-table td { padding:1rem 1.25rem; border-top:1px solid var(--border); font-size:.9rem; vertical-align:middle; }
.responses-table tr:hover td { background:var(--dark-3); }
.score-badge { padding:.25rem .75rem; border-radius:50px; font-weight:700; font-size:.8rem; }
.score-high { background:rgba(67,233,123,.15); color:var(--success); }
.score-mid { background:rgba(254,225,64,.15); color:var(--warning); }
.score-low { background:rgba(245,87,108,.15); color:var(--danger); }
.empty-table { text-align:center; padding:3rem; color:var(--text-muted); }
.empty-table i { font-size:2rem; display:block; margin-bottom:.75rem; opacity:.5; }

/* ===== ANALYTICS ===== */
.analytics-grid { display:grid; gap:1.5rem; }
.analytics-card { background:var(--dark-2); border:1px solid var(--border); border-radius:var(--radius); padding:1.5rem; }
.analytics-card.full { grid-column:1/-1; }
.analytics-card h3 { font-size:1rem; font-weight:700; margin-bottom:1.25rem; }
.chart-container { height:300px; position:relative; }

/* ===== SETTINGS ===== */
.settings-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:1.5rem; }
.settings-card { background:var(--dark-2); border:1px solid var(--border); border-radius:var(--radius); padding:2rem; display:flex; flex-direction:column; gap:1.25rem; }
.settings-card h3 { font-size:1rem; font-weight:700; display:flex; align-items:center; gap:.5rem; color:var(--primary); }
.settings-avatar-section { display:flex; align-items:center; gap:1rem; }
.settings-avatar { width:64px; height:64px; border-radius:50%; background:linear-gradient(135deg,var(--primary),var(--secondary)); display:flex; align-items:center; justify-content:center; font-size:1.5rem; font-weight:700; }
.theme-options { display:flex; gap:1rem; }
.theme-option { flex:1; display:flex; flex-direction:column; align-items:center; gap:.5rem; cursor:pointer; padding:1rem; border-radius:var(--radius-sm); border:2px solid var(--border); transition:var(--transition); }
.theme-option.active { border-color:var(--primary); }
.theme-preview { width:100%; height:60px; border-radius:.5rem; }
.dark-preview { background:linear-gradient(135deg,#0f0f1a,#1e1e35); }
.light-preview { background:linear-gradient(135deg,#f0f0f8,#e0e0f0); }

/* ===== FORM VIEWER ===== */
.form-viewer-container { max-width:760px; margin:0 auto; padding:2rem; min-height:100vh; }
.form-viewer-header { text-align:center; padding:2.5rem 2rem; background:var(--dark-2); border:1px solid var(--border); border-radius:var(--radius); margin-bottom:1.5rem; }
.form-logo { width:80px; height:80px; border-radius:16px; margin:0 auto 1.25rem; overflow:hidden; }
.form-logo img { width:100%; height:100%; object-fit:cover; }
.viewer-title { font-size:1.75rem; font-weight:800; margin-bottom:.5rem; }
.viewer-desc { color:var(--text-muted); font-size:.95rem; line-height:1.6; margin-bottom:1.5rem; }
.progress-container { max-width:500px; margin:0 auto; }
.progress-info { display:flex; justify-content:space-between; font-size:.85rem; color:var(--text-muted); margin-bottom:.5rem; }
.progress-bar-track { height:8px; background:var(--dark-4); border-radius:4px; overflow:hidden; }
.progress-bar-fill { height:100%; background:linear-gradient(90deg,var(--primary),var(--secondary)); border-radius:4px; transition:.5s ease; }
.viewer-questions { display:flex; flex-direction:column; gap:1.25rem; }
.viewer-question { background:var(--dark-2); border:1px solid var(--border); border-radius:var(--radius); padding:1.75rem; display:none; animation:slideIn .4s ease; }
.viewer-question.visible { display:block; }
@keyframes slideIn { from{opacity:0;transform:translateX(30px)} to{opacity:1;transform:translateX(0)} }
.viewer-question.all-visible { display:block; }
.vq-label { font-size:.8rem; color:var(--primary); font-weight:700; margin-bottom:.5rem; display:flex; align-items:center; gap:.4rem; }
.vq-required { color:var(--danger); }
.vq-text { font-size:1.1rem; font-weight:700; margin-bottom:1.25rem; }
.vq-options { display:flex; flex-direction:column; gap:.6rem; }
.vq-option { display:flex; align-items:center; gap:.75rem; padding:.85rem 1rem; background:var(--dark-3); border:2px solid transparent; border-radius:var(--radius-sm); cursor:pointer; transition:var(--transition); }
.vq-option:hover { border-color:rgba(108,99,255,.3); background:var(--dark-4); }
.vq-option.selected { border-color:var(--primary); background:rgba(108,99,255,.1); }
.vq-option-radio { width:20px; height:20px; border-radius:50%; border:2px solid var(--border); flex-shrink:0; display:flex; align-items:center; justify-content:center; transition:var(--transition); }
.vq-option.selected .vq-option-radio { border-color:var(--primary); background:var(--primary); }
.vq-option.selected .vq-option-radio::after { content:''; width:8px; height:8px; border-radius:50%; background:#fff; }
.vq-option-text { font-size:.95rem; }
.vq-input { padding:.85rem 1rem; background:var(--dark-3); border:2px solid var(--border); border-radius:var(--radius-sm); color:var(--text); font-size:.95rem; width:100%; resize:vertical; transition:var(--transition); font-family:var(--font); }
.vq-input:focus { outline:none; border-color:var(--primary); }
.vq-file-upload { border:2px dashed var(--border); border-radius:var(--radius); padding:2.5rem; text-align:center; cursor:pointer; transition:var(--transition); background:var(--dark-3); }
.vq-file-upload:hover { border-color:var(--primary); background:rgba(108,99,255,.05); }
.vq-file-upload i { font-size:2rem; color:var(--primary); margin-bottom:.75rem; }
.vq-file-upload p { font-size:.85rem; color:var(--text-muted); }
.viewer-nav { display:flex; align-items:center; justify-content:space-between; margin-top:1.25rem; }
.nav-dots { display:flex; gap:.4rem; }
.nav-dot { width:8px; height:8px; border-radius:50%; background:var(--dark-4); cursor:pointer; transition:var(--transition); }
.nav-dot.active { background:var(--primary); width:20px; border-radius:4px; }
.viewer-footer { text-align:center; margin-top:2rem; padding-top:2rem; border-top:1px solid var(--border); }
.viewer-name-input { max-width:400px; margin:0 auto 1.5rem; }

/* ===== RESULT PAGE ===== */
.result-container { min-height:100vh; display:flex; align-items:center; justify-content:center; padding:2rem; }
.result-card { background:var(--dark-2); border:1px solid var(--border); border-radius:var(--radius); padding:3rem 2.5rem; max-width:500px; width:100%; text-align:center; box-shadow:var(--shadow); }
.result-animation { margin-bottom:2rem; }
.result-circle { width:150px; height:150px; position:relative; margin:0 auto; }
.result-circle svg { width:150px; height:150px; transform:rotate(-90deg); }
.result-track { fill:none; stroke:var(--dark-3); stroke-width:8; }
.result-progress { fill:none; stroke:var(--primary); stroke-width:8; stroke-linecap:round; stroke-dasharray:283; stroke-dashoffset:283; transition:stroke-dashoffset 1.5s ease; }
.result-score { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:2rem; font-weight:800; }
.result-info h2 { font-size:1.75rem; font-weight:800; margin-bottom:.75rem; }
.result-info p { color:var(--text-muted); font-size:1rem; margin-bottom:1.5rem; }
.result-details { background:var(--dark-3); border-radius:var(--radius-sm); padding:1.25rem; margin-bottom:1.5rem; text-align:right; display:flex; flex-direction:column; gap:.75rem; }
.result-detail-row { display:flex; justify-content:space-between; align-items:center; font-size:.9rem; }
.result-detail-label { color:var(--text-muted); }
.result-detail-value { font-weight:700; }
.result-actions { display:flex; gap:.75rem; justify-content:center; }

/* ===== MODAL ===== */
.modal-overlay { position:fixed; inset:0; background:rgba(0,0,0,.7); backdrop-filter:blur(8px); z-index:1000; display:none; align-items:center; justify-content:center; padding:1.5rem; }
.modal-overlay.show { display:flex; animation:fadeIn .3s ease; }
@keyframes fadeIn { from{opacity:0} to{opacity:1} }
.modal { background:var(--dark-2); border:1px solid var(--border); border-radius:var(--radius); width:100%; max-width:580px; max-height:90vh; overflow-y:auto; animation:slideInModal .3s ease; }
@keyframes slideInModal { from{transform:scale(.95) translateY(20px);opacity:0} to{transform:scale(1) translateY(0);opacity:1} }
.modal-header { padding:1.5rem 2rem; border-bottom:1px solid var(--border); display:flex; align-items:center; justify-content:space-between; }
.modal-header h3 { font-size:1.1rem; font-weight:700; }
.modal-close { background:none; border:none; color:var(--text-muted); cursor:pointer; font-size:1.1rem; padding:.25rem; }
.modal-body { padding:2rem; }
.modal-footer { padding:1.25rem 2rem; border-top:1px solid var(--border); display:flex; justify-content:flex-end; gap:.75rem; }

/* ===== TOAST ===== */
.toast-container { position:fixed; bottom:2rem; left:2rem; z-index:2000; display:flex; flex-direction:column; gap:.5rem; }
.toast { padding:.85rem 1.25rem; border-radius:var(--radius-sm); background:var(--dark-3); border:1px solid var(--border); display:flex; align-items:center; gap:.75rem; box-shadow:var(--shadow); font-size:.9rem; font-weight:500; animation:slideInToast .4s ease; min-width:250px; }
@keyframes slideInToast { from{transform:translateX(-100%);opacity:0} to{transform:translateX(0);opacity:1} }
.toast.success { border-color:var(--success); }
.toast.error { border-color:var(--danger); }
.toast.warning { border-color:var(--warning); }
.toast-icon { font-size:1rem; }
.toast.success .toast-icon { color:var(--success); }
.toast.error .toast-icon { color:var(--danger); }
.toast.warning .toast-icon { color:var(--warning); }
.toast.info .toast-icon { color:var(--accent); }

/* ===== EMPTY STATES ===== */
.empty-state { text-align:center; padding:4rem 2rem; color:var(--text-muted); }
.empty-icon { font-size:3rem; margin-bottom:1rem; opacity:.4; }
.empty-state h3 { font-size:1.2rem; font-weight:700; color:var(--text); margin-bottom:.5rem; }
.empty-state p { font-size:.9rem; margin-bottom:1.5rem; }
.empty-state-small { text-align:center; padding:2rem; color:var(--text-muted); display:flex; flex-direction:column; align-items:center; gap:.5rem; }
.empty-state-small i { font-size:1.75rem; opacity:.4; }
.empty-state-small p { font-size:.85rem; }

/* ===== ANIMATIONS ===== */
.animate-fade-in { animation:fadeIn .6s ease both; }
.animate-fade-in-up { animation:fadeInUp .7s ease both; animation-delay:.1s; }
.animate-fade-in-right { animation:slideInRight .8s ease both; animation-delay:.2s; }
@keyframes slideInRight { from{opacity:0;transform:translateX(40px)} to{opacity:1;transform:translateX(0)} }

/* ===== RESPONSIVE ===== */
@media (max-width:1024px) {
  .auth-left { display:none; }
  .hero { flex-direction:column; padding:100px 2rem 3rem; align-items:flex-start; }
  .hero-preview { width:100%; max-width:100%; }
}
@media (max-width:768px) {
  .sidebar { transform:translateX(100%); }
  .sidebar.open { transform:translateX(0); }
  .main-content { margin-right:0; }
  .mobile-menu-btn { display:flex; }
  .topbar-search { display:none; }
  .sections-container { padding:1.25rem; }
  .stats-grid { grid-template-columns:repeat(2,1fr); }
  .hero { padding:90px 1.25rem 2rem; }
}
@media (max-width:480px) {
  .stats-grid { grid-template-columns:1fr; }
  .form-settings-card { flex-direction:column; }
  .forms-grid { grid-template-columns:1fr; }
  .result-actions { flex-direction:column; }
}
textarea.form-control { resize:vertical; min-height:80px; }
select.form-control { cursor:pointer; }
::-webkit-scrollbar { width:6px; height:6px; }
::-webkit-scrollbar-track { background:var(--dark-2); }
::-webkit-scrollbar-thumb { background:var(--dark-4); border-radius:3px; }
::-webkit-scrollbar-thumb:hover { background:var(--primary); }