:root{
    --blue:#0a62a3;
    --light-blue:#3aa0e6;
    --soft-orange:#ff8a47;
    --muted:#6c757d;
    --card-bg:#ffffff;
    --bg-color:#f8f9fa;
    --text-color:#212529;
    --navbar-bg:#ffffff;
    --card-border:#dee2e6;
    font-family: 'Vazirmatn','Roboto', sans-serif;
  }

  [data-theme="dark"] {
    --blue:#3aa0e6;
    --light-blue:#5db3f0;
    --soft-orange:#ff9d61;
    --muted:#adb5bd;
    --card-bg:#2d2d2d;
    --bg-color:#1a1a1a;
    --text-color:#e9ecef;
    --navbar-bg:#212529;
    --card-border:#404040;
  }
  
  html, body { height: 100%; }
  body { 
    font-family: var(--font, 'Vazirmatn'), sans-serif; 
    color: var(--text-color); 
    background-color: var(--bg-color);
    display: flex;
    flex-direction: column;
    transition: background-color 0.3s ease, color 0.3s ease;
  }
  main { flex: 1; }
  
  .navbar-brand .brand-title{ font-weight:700; font-size:1.1rem; }
  .navbar-brand .brand-sub{ font-size:0.75rem; color:var(--muted); }
  
  .logo { height:48px; width:auto; border-radius:6px; object-fit:contain; }
  
  /* Hero */
  .hero{
    background: linear-gradient(180deg, rgba(10,98,163,0.95), rgba(58,160,230,0.95));
    padding:4rem 0;
    border-bottom-left-radius:14px;
    border-bottom-right-radius:14px;
  }
  .hero .hero-logo{ width:110px; border-radius:10px; background:white; padding:8px; }
  .hero h1, .hero p { font-family: 'Vazirmatn', sans-serif; }
  
  /* Cards and team */
  .service-card{ border: none; border-radius:12px; }
  .team-card{ border: none; border-radius:12px; box-shadow:0 6px 18px rgba(10,98,163,0.06); }
  .avatar{ width:72px; height:72px; border-radius:50%; background:var(--soft-orange); color:white; display:inline-flex; align-items:center; justify-content:center; font-size:28px; margin:auto; }
  
  /* Footer */
  footer { 
    margin-top: auto; 
    background-color: var(--navbar-bg);
    border-top-color: var(--card-border) !important;
  }
  footer a.social { color:var(--muted); text-decoration:none; margin-left:10px; }
  
  [data-theme="dark"] footer {
    background-color: var(--navbar-bg);
  }
  
  /* Questionnaire / modals */
  .modal-content { border-radius:12px; }
  #questionContainer { min-height:200px; transition: opacity 0.3s ease-in-out; display: flex; flex-direction: column; justify-content: center; }
  #questionContainer.fade-out { opacity: 0.3; }
  .q-text { font-size:1.05rem; margin-bottom:1.5rem; }
  .q-help-text { 
    font-size: 0.85rem; 
    color: var(--muted); 
    margin-bottom: 1.5rem; 
    padding: 0.5rem 0;
    text-align: center;
    border-bottom: 1px solid #e9ecef;
  }
  .rating-buttons-container { 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    gap: 0.5rem;
    margin: 1rem 0;
  }
  .rating-btn { width:44px; height:44px; border-radius:8px; margin:0; transition: all 0.2s ease; }
  .rating-btn.active { background-color: var(--blue); color: white; border-color: var(--blue); }
  .completion-message { 
    text-align: center; 
    padding: 1rem; 
    margin: 1rem 0; 
    color: var(--blue); 
    font-weight: 600; 
  }
  
  /* small screens */
  @media (max-width:576px){
    .hero{ padding:2.5rem 0; }
    .hero h1{ font-size:1.4rem; }
  }
  
  /* subtle focus */
  .form-control:focus, .btn:focus { box-shadow:0 0 0 0.15rem rgba(58,160,230,0.18); }
  
  /* results */
  .arch-item { border-radius:8px; padding:12px; background:var(--bg-color); margin-bottom:8px; display:flex; align-items:center; justify-content:space-between; }
  .arch-name { font-weight:600; }
  .arch-score { font-weight:700; color:var(--blue); }
  
  /* small utility */
  .hidden { display:none !important; }

  /* Questionnaire with analysis - Light mode styles */
  .list-group-item.has-analysis .bi-file-text-fill {
    color: #28a745;
    font-size: 1.1rem;
  }

  .list-group-item.has-analysis.active .bi-file-text-fill {
    color: white;
  }

  /* Dark Theme Styles */
  [data-theme="dark"] body {
    background-color: var(--bg-color);
    color: var(--text-color);
  }

  [data-theme="dark"] .navbar {
    background-color: var(--navbar-bg) !important;
    border-bottom: 1px solid var(--card-border);
  }

  [data-theme="dark"] .navbar-light .navbar-brand,
  [data-theme="dark"] .navbar-light .navbar-nav .nav-link {
    color: var(--text-color);
  }

  [data-theme="dark"] .navbar-light .navbar-nav .nav-link:hover {
    color: var(--light-blue);
  }

  [data-theme="dark"] .navbar-toggler {
    border-color: var(--card-border);
  }

  [data-theme="dark"] .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28233, 236, 239, 1%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
  }

  [data-theme="dark"] .card {
    background-color: var(--card-bg);
    border-color: var(--card-border);
    color: var(--text-color);
  }

  [data-theme="dark"] .bg-white {
    background-color: var(--navbar-bg) !important;
  }

  [data-theme="dark"] .text-muted {
    color: var(--muted) !important;
  }

  [data-theme="dark"] .form-control {
    background-color: var(--card-bg);
    border-color: var(--card-border);
    color: var(--text-color);
  }

  [data-theme="dark"] .form-control:focus {
    background-color: var(--card-bg);
    border-color: var(--light-blue);
    color: var(--text-color);
  }

  [data-theme="dark"] .modal-content {
    background-color: var(--card-bg);
    color: var(--text-color);
  }

  [data-theme="dark"] .arch-item {
    background-color: var(--card-bg);
    border-color: var(--card-border);
  }

  [data-theme="dark"] .q-help-text {
    border-bottom-color: var(--card-border);
  }

  [data-theme="dark"] #themeToggle {
    color: var(--text-color);
  }

  [data-theme="dark"] #themeToggle:hover {
    color: var(--light-blue);
  }

  [data-theme="dark"] .card-header {
    background-color: var(--card-bg) !important;
    border-bottom-color: var(--card-border) !important;
    color: var(--text-color);
  }

  [data-theme="dark"] .bg-light {
    background-color: var(--card-bg) !important;
  }

  [data-theme="dark"] .border-top,
  [data-theme="dark"] .border-bottom {
    border-color: var(--card-border) !important;
  }

  /* List group items - Dark mode styles */
  [data-theme="dark"] .list-group-item {
    background-color: var(--card-bg);
    border-color: var(--card-border);
    color: var(--text-color);
  }

  [data-theme="dark"] .list-group-item:hover {
    background-color: #353535;
    border-color: var(--card-border);
    color: var(--text-color);
  }

  [data-theme="dark"] .list-group-item.active {
    background-color: var(--blue);
    border-color: var(--blue);
    color: white;
  }

  [data-theme="dark"] .list-group-item.active .text-muted {
    color: rgba(255, 255, 255, 0.7) !important;
  }

  [data-theme="dark"] .list-group-item.disabled {
    background-color: var(--card-bg);
    opacity: 0.6;
    color: var(--muted);
  }

  /* Questionnaire with analysis - Dark mode styles */
  [data-theme="dark"] .list-group-item.has-analysis {
    background-color: var(--card-bg);
    border-color: var(--card-border);
    color: var(--text-color);
  }

  [data-theme="dark"] .list-group-item.has-analysis:hover {
    background-color: #353535;
    border-color: var(--light-blue);
  }

  [data-theme="dark"] .list-group-item.has-analysis.active {
    background-color: var(--blue);
    border-color: var(--blue);
    color: white;
  }

  [data-theme="dark"] .list-group-item.has-analysis.active .text-muted {
    color: rgba(255, 255, 255, 0.7) !important;
  }

  [data-theme="dark"] .list-group-item.has-analysis .bi-file-text-fill {
    color: #4ade80;
  }

  [data-theme="dark"] .list-group-item.has-analysis.active .bi-file-text-fill {
    color: white;
  }