/* ===== REPORT SECTION ===== */

/* ... other report styles ... */

/* Feedback Area */
/* ... existing feedback styles ... */

/* Container for the score displays */
.score-container {
    display: flex;          /* Enable Flexbox */
    flex-wrap: wrap;        /* Allow items to wrap onto the next line */
    gap: var(--space-sm) var(--space-md); /* Vertical and horizontal gap between items */
    align-items: center;      /* Align items vertically if they wrap */
    margin-top: var(--space-lg); /* Keep the top margin */
  }
  
  /* The individual score display */
  .feedback-score-display {
    display: inline-flex;   /* Use inline-flex for potential internal alignment */
    align-items: center;    /* Align content vertically inside the span */
    /* margin-right: var(--space-md); REMOVE - Use gap on parent */
    /* margin-top: var(--space-xs);   REMOVE - Use gap on parent */
    font-weight: 600;
    border: var(--border-width) solid var(--gray-300);
    padding: var(--space-xs) var(--space-sm);
    border-radius: var(--radius-sm);
    background-color: var(--light-200);
    font-size: 0.95rem;
    white-space: normal;   /* CHANGE: Allow text inside the span to wrap */
    line-height: 1.5;     /* ADD: Improve readability if text wraps */
    flex-shrink: 0;       /* Optional: Prevent shrinking if space is very tight */
  }
  
  /* Make sure the h4 doesn't interfere with flex layout */
  .score-container h4 {
      width: 100%; /* Make heading take full width */
      margin-bottom: var(--space-xs); /* Reduce space below heading */
      flex-basis: 100%; /* Ensure it takes the full line in flex context */
  }
  
  
  /* =========================================================== */
  /* ==       REST OF YOUR CSS (VARIABLES, BASE, ETC.)        == */
  /* =========================================================== */
  
  /* --- PASTE THE REST OF THE CSS FROM THE PREVIOUS RESPONSE HERE --- */
  /* ===== BASE STYLES & VARIABLES ===== */
  :root {
    /* Color Palette */
    --primary-500: #4361ee;
    --primary-600: #3a56d4;
    --primary-400: #4cc9f0;
    --secondary-500: #7209b7;
    --accent-500: #f72585;
    --success-500: #38b000;   /* Use a standard green */
    --warning-500: #ffaa00;
    --danger-500: #ef233c;
    --light-100: #f8f9fa;
    --light-200: #ffffff; /* Explicit white */
    --dark-900: #212529;
    --gray-200: #e9ecef;
    --gray-300: #dee2e6; /* Added for borders */
    --gray-400: #adb5bd;
    --gray-600: #495057;
    --gray-700: #343a40; /* Darker gray for text */
  
    /* Gradients */
    --gradient-primary: linear-gradient(135deg, var(--primary-500) 0%, #3a0ca3 100%);
    --gradient-accent: linear-gradient(135deg, var(--accent-500) 0%, #b5179e 100%);
    --gradient-card: linear-gradient(145deg, var(--light-200) 0%, #f8fafc 100%);
    --gradient-success: linear-gradient(135deg, var(--success-500) 0%, #2b9348 100%);
    --gradient-danger: linear-gradient(135deg, var(--danger-500) 0%, #d90429 100%);
  
    /* Typography */
    --font-main: 'Inter', -apple-system, system-ui, sans-serif;
    --font-heading: 'Poppins', var(--font-main);
    --font-mono: 'Fira Code', 'Courier New', monospace;
  
    /* Spacing */
    --space-xxs: 0.25rem; /* 4px */
    --space-xs: 0.5rem;  /* 8px */
    --space-sm: 0.75rem; /* 12px */
    --space-md: 1rem;    /* 16px */
    --space-lg: 1.5rem;  /* 24px */
    --space-xl: 2rem;    /* 32px */
    --space-xxl: 3rem;   /* 48px */
  
    /* Border */
    --radius-sm: 6px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 24px;
    --radius-full: 9999px;
    --border-width: 1px;
    --border-width-lg: 2px;
  
    /* Shadows */
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.06);
    --shadow-md: 0 4px 12px rgba(0,0,0,0.08);
    --shadow-lg: 0 10px 25px rgba(0,0,0,0.1);
    --shadow-xl: 0 20px 40px rgba(0,0,0,0.12);
    --shadow-inner: inset 0 1px 2px rgba(0,0,0,0.05);
  
    /* Transitions */
    --transition-xs: 0.15s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-sm: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-md: 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-lg: 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  
    /* Z-index */
    --z-base: 1;
    --z-dropdown: 10;
    --z-sticky: 20;
    --z-fixed: 30;
    --z-modal: 40;
    --z-popover: 50;
    --z-tooltip: 60;
  }
  
  /* ===== BASE STYLES ===== */
  *,
  *::before,
  *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }
  
  html {
    font-size: 16px;
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
  }
  
  body {
    font-family: var(--font-main);
    line-height: 1.7;
    color: var(--dark-900);
    background-color: #f5f7ff; /* Light blue-tinted background */
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
  
  /* ===== TYPOGRAPHY ===== */
  h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    font-weight: 700;
    line-height: 1.3;
    margin-bottom: var(--space-md);
    color: var(--dark-900);
  }
  
  /* Specific heading sizes */
  h1 { font-size: clamp(1.8rem, 5vw, 2.5rem); letter-spacing: -0.025em; } /* Responsive h1 */
  h2 { font-size: clamp(1.5rem, 4vw, 2rem); letter-spacing: -0.02em; }
  h3 { font-size: clamp(1.2rem, 3vw, 1.5rem); letter-spacing: -0.015em; }
  h4 { font-size: 1.1rem; font-weight: 600; margin-bottom: var(--space-sm); } /* Common h4 style */
  
  p {
    margin-bottom: var(--space-md);
    color: var(--gray-600);
    font-size: 1rem;
  }
  
  a {
    color: var(--primary-500);
    text-decoration: none;
    transition: color var(--transition-xs);
    font-weight: 500;
  }
  a:hover { color: var(--primary-600); }
  
  strong { font-weight: 600; } /* Slightly less bold than default */
  small { font-size: 0.85rem; color: var(--gray-600); } /* Common small text */
  
  /* ===== LAYOUT ===== */
  .container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--space-lg);
    position: relative;
  }
  
  #main-content {
    flex-grow: 1; /* Ensures content pushes footer down */
    padding-top: var(--space-lg);
    padding-bottom: var(--space-xl);
  }
  
  /* Sections - common styling */
  section {
      margin-bottom: var(--space-xl);
      animation: fadeIn 0.6s var(--transition-sm) both; /* Default fade-in */
  }
  
  /* Specific Section Titles */
  section > h2 {
    position: relative;
    padding-bottom: var(--space-sm);
    margin-bottom: var(--space-lg);
    color: var(--primary-600);
  }
  section > h2::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 50px;
    height: 3px;
    background: var(--gradient-accent);
    border-radius: var(--radius-full);
  }
  
  /* Card-like Sections (Dashboards, Forms) */
  .dashboard-section,
  #auth-section form, /* Target forms directly */
  #resume-upload-section,
  #interview-section,
  #report-section {
    background: var(--gradient-card);
    border-radius: var(--radius-lg);
    padding: var(--space-lg);
    box-shadow: var(--shadow-md);
    transition: box-shadow var(--transition-md), transform var(--transition-md);
  }
  .dashboard-section:hover,
  #auth-section form:hover,
  #resume-upload-section:hover {
      /* transform: translateY(-3px); */ /* Optional hover lift */
      /* box-shadow: var(--shadow-lg); */
  }
  #interview-section, #report-section { /* Less hover effect for main content sections */
      padding: var(--space-xl);
  }
  
  /* ===== HEADER ===== */
  header.container { /* Target the specific header */
    padding-top: var(--space-lg);
    padding-bottom: var(--space-lg);
    text-align: center;
    animation: fadeInDown 0.6s var(--transition-sm) both;
  }
  
  header.container h1 {
    font-size: clamp(2rem, 6vw, 2.8rem); /* Responsive title */
    font-weight: 800;
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    position: relative;
    display: inline-block;
    margin: 0;
    letter-spacing: -1px;
    transform: translateZ(0);
  }
  
  header.container h1::after { /* Title underline animation */
    content: '';
    position: absolute;
    bottom: -8px;
    left: 0;
    width: 100%;
    height: 4px;
    background: var(--gradient-accent);
    border-radius: 2px;
    transform: scaleX(0);
    transform-origin: center; /* Center origin */
    animation: titleUnderline 1s 0.3s forwards var(--transition-md);
  }
  
  @keyframes titleUnderline {
    to { transform: scaleX(0.6); opacity: 1; } /* Don't make it full width */
  }
  
  /* ===== USER INFO HEADER ===== */
  #user-info.user-info-header { /* More specific selector */
    display: flex;
    flex-wrap: wrap; /* Allow wrapping */
    align-items: center;
    justify-content: space-between; /* Space out content and button */
    gap: var(--space-sm) var(--space-lg); /* Row and column gap */
    background-color: var(--light-200);
    padding: var(--space-md);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    border: var(--border-width) solid var(--gray-200);
    margin-bottom: var(--space-xl);
    font-size: 0.95rem;
    transition: box-shadow var(--transition-sm);
    animation: fadeIn 0.5s 0.2s both;
  }
  #user-info.user-info-header:hover {
      box-shadow: var(--shadow-md);
  }
  
  #user-info > div { /* The div containing the text */
      line-height: 1.6;
      color: var(--gray-600);
  }
  
  #user-info strong, #user-info span { /* General style for dynamic parts */
      font-weight: 500;
      color: var(--dark-900);
  }
  #user-info #user-fullname { /* Specific name style */
      font-weight: 700;
      color: var(--primary-600);
  }
  #user-info #user-email { /* Specific email style */
      font-size: 0.9em;
      color: var(--gray-600);
  }
  #user-info #logout-btn { /* Logout button */
      flex-shrink: 0; /* Prevent shrinking */
      /* Small button styles are applied via class */
  }
  
  /* ===== BUTTONS ===== */
  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-sm) var(--space-lg);
    border: none;
    border-radius: var(--radius-full); /* Pill shape */
    font-family: var(--font-heading);
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-sm);
    text-align: center;
    position: relative;
    overflow: hidden;
    z-index: var(--z-base);
    box-shadow: var(--shadow-sm);
    min-width: 120px; /* Minimum width */
    transform: translateZ(0); /* Hardware acceleration hint */
    margin: var(--space-xs); /* Add small margin around buttons */
  }
  
  .btn:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
  }
  .btn:active {
    transform: translateY(0px);
    box-shadow: var(--shadow-sm);
  }
  .btn:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(67, 97, 238, 0.3); /* Focus ring */
  }
  
  /* Primary Button */
  .primary-btn {
    background: var(--gradient-primary);
    color: white;
    box-shadow: 0 4px 15px rgba(67, 97, 238, 0.25);
  }
  .primary-btn:hover {
    box-shadow: 0 6px 20px rgba(67, 97, 238, 0.35);
  }
  
  /* Secondary Button */
  .secondary-btn {
    background: var(--light-200);
    color: var(--primary-500);
    border: var(--border-width-lg) solid var(--primary-500);
    box-shadow: none;
    padding: calc(var(--space-sm) - var(--border-width-lg)) calc(var(--space-lg) - var(--border-width-lg)); /* Adjust padding for border */
  }
  .secondary-btn:hover {
    background: rgba(67, 97, 238, 0.05);
    color: var(--primary-600);
    border-color: var(--primary-600);
    box-shadow: none;
  }
  
  /* Danger Button */
  .danger-btn {
    background: var(--gradient-danger);
    color: white;
    box-shadow: 0 4px 15px rgba(239, 35, 60, 0.25);
  }
  .danger-btn:hover {
    box-shadow: 0 6px 20px rgba(239, 35, 60, 0.35);
  }
  
  /* Small Button */
  .small-btn {
    padding: var(--space-xs) var(--space-md);
    font-size: 0.85rem;
    min-width: auto;
    border-radius: var(--radius-full); /* Keep pill shape */
  }
  /* Adjust padding for small secondary button with border */
  .secondary-btn.small-btn {
    padding: calc(var(--space-xs) - var(--border-width-lg)) calc(var(--space-md) - var(--border-width-lg));
  }
  
  
  /* Disabled Button State */
  .btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none !important; /* Override hover transform */
    box-shadow: var(--shadow-sm) !important; /* Override hover shadow */
    background: var(--gray-300); /* Generic disabled background */
    color: var(--gray-600);
    border-color: transparent; /* Remove border for disabled */
  }
  .primary-btn:disabled { background: var(--primary-500); } /* Keep color but faded */
  .secondary-btn:disabled { background: var(--light-200); color: var(--gray-400); border-color: var(--gray-300); }
  .danger-btn:disabled { background: var(--danger-500); }
  
  .button-group {
    margin-top: var(--space-md);
    display: flex;
    justify-content: center; /* Center buttons in resume upload */
    gap: var(--space-md);
  }
  
  /* ===== FORMS ===== */
  .form-group {
    margin-bottom: var(--space-lg);
    position: relative;
  }
  
  label {
    display: block;
    margin-bottom: var(--space-xs);
    font-weight: 600;
    color: var(--gray-700);
    font-size: 0.95rem;
  }
  
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="number"],
  textarea,
  select {
    width: 100%;
    padding: var(--space-sm) var(--space-md);
    border: var(--border-width) solid var(--gray-300);
    border-radius: var(--radius-md); /* Softer radius */
    font-size: 1rem;
    font-family: var(--font-main);
    background-color: var(--light-200);
    transition: all var(--transition-sm);
    box-shadow: var(--shadow-inner);
    color: var(--dark-900);
  }
  input[type="file"] {
      padding: var(--space-xs); /* Different padding for file input */
      font-size: 0.9rem;
      background-color: var(--light-100);
  }
  
  input::placeholder, textarea::placeholder { color: var(--gray-400); opacity: 1; }
  /* Add vendor prefixes if needed */
  
  input:focus, textarea:focus, select:focus {
    outline: none;
    border-color: var(--primary-500);
    box-shadow: 0 0 0 3px rgba(67, 97, 238, 0.2), var(--shadow-inner);
  }
  
  textarea {
    resize: vertical;
    min-height: 100px;
  }
  
  select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%234361ee' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right var(--space-md) center;
    background-size: 16px;
    padding-right: var(--space-xl);
    cursor: pointer;
  }
  
  /* ===== AUTH SECTION ===== */
  #auth-section {
    max-width: 480px;
    margin: var(--space-xl) auto;
    animation: fadeInUp 0.6s var(--transition-sm) both;
  }
  
  #auth-section form {
      padding: var(--space-xl); /* Ensure padding */
  }
  #auth-section form h3 { /* Form titles */
      text-align: center;
      margin-top: 0;
      margin-bottom: var(--space-lg);
      color: var(--primary-500);
  }
  
  /* Links within auth forms */
  #auth-section form p { /* Paragraphs containing links */
      text-align: center;
      margin-top: var(--space-lg);
      font-size: 0.9rem;
      color: var(--gray-600);
  }
  #auth-section form a { /* The links themselves */
      font-weight: 600;
      color: var(--primary-500);
      transition: color var(--transition-sm);
  }
  #auth-section form a:hover {
      color: var(--primary-600);
      text-decoration: underline;
  }
  
  /* ===== DASHBOARDS (Recruiter & Candidate) ===== */
  #recruiter-dashboard h2,
  #candidate-dashboard h2 {
      /* Common title styling applied via section > h2 */
  }
  
  /* Dashboard Sections */
  .dashboard-section {
      /* Card styling applied above */
      margin-bottom: var(--space-xl); /* Space between sections */
  }
  .dashboard-section h3 { /* Titles within sections */
      margin-top: 0; /* Remove extra top margin */
      margin-bottom: var(--space-md);
      color: var(--secondary-500); /* Use secondary color */
      border-bottom: 1px solid var(--gray-200);
      padding-bottom: var(--space-sm);
  }
  
  /* Specific elements */
  #selected-job-title-recruiter { /* Displayed job title */
      font-weight: 600;
      color: var(--dark-900);
      margin-bottom: var(--space-sm);
      display: block;
      font-size: 1.1rem;
  }
  
  /* ===== ITEM LISTS (Jobs, Candidates, Interviews) ===== */
  .item-list {
    margin-top: var(--space-md);
    border: var(--border-width) solid var(--gray-200);
    border-radius: var(--radius-md);
    overflow: hidden; /* Clip corners */
    background-color: var(--light-200);
  }
  
  .list-item {
    padding: var(--space-md);
    border-bottom: var(--border-width) solid var(--gray-200);
    display: flex;
    flex-wrap: wrap; /* Allow wrapping on small screens */
    justify-content: space-between;
    align-items: center;
    gap: var(--space-sm) var(--space-md); /* Row and column gaps */
    transition: background-color var(--transition-sm);
  }
  .list-item:last-child { border-bottom: none; }
  .list-item:hover { background-color: var(--light-100); }
  
  /* Highlight selected job */
  .list-item.active {
      background-color: rgba(67, 97, 238, 0.05);
      border-left: 4px solid var(--primary-500);
      padding-left: calc(var(--space-md) - 4px); /* Adjust padding */
  }
  
  .list-item > div:first-child { /* The main info block */
    flex: 1 1 300px; /* Allow growing and shrinking, base width */
    min-width: 0; /* Prevent overflow */
  }
  
  .list-item .job-title,
  .list-item .candidate-email { /* Main identifier */
    font-weight: 600;
    color: var(--dark-900);
    margin-bottom: var(--space-xs);
    display: block;
    word-break: break-word;
  }
  .list-item small { /* Meta info */
    display: block;
    color: var(--gray-600);
    line-height: 1.5;
  }
  
  .list-item > span { /* Score display spans */
      flex-shrink: 0; /* Prevent shrinking */
      font-size: 0.9rem;
      color: var(--gray-700);
      white-space: nowrap;
      text-align: right;
  }
  
  .list-item .interview-status { /* Status badge alignment */
      flex-shrink: 0;
      margin-left: var(--space-sm); /* Space before status */
  }
  
  .list-item button { /* Action buttons */
      flex-shrink: 0;
      /* Small button styles applied via class */
  }
  
  /* Empty list message */
  .list-empty-msg {
      text-align: center;
      padding: var(--space-lg);
      color: var(--gray-600);
      font-style: italic;
  }
  
  /* ===== RESUME UPLOAD SECTION ===== */
  #resume-upload-section {
      max-width: 600px; /* Limit width */
      margin-left: auto;
      margin-right: auto;
      text-align: center;
  }
  #resume-upload-section h2 { /* Title with job name */
      margin-bottom: var(--space-sm);
      font-size: 1.5rem;
  }
  #resume-upload-section h2 span { /* The job title span */
      color: var(--primary-500);
      font-weight: 700;
  }
  #resume-upload-section p { /* Instruction text */
      margin-bottom: var(--space-lg);
      color: var(--gray-600);
  }
  #resume-upload-section label {
      font-weight: 500; /* Less bold label */
  }
  #interview-resume-status { /* Status message styling */
      min-height: 1.5em; /* Prevent layout jumps */
      margin-top: var(--space-xs);
  }
  
  /* ===== INTERVIEW SECTION ===== */
  #interview-section { text-align: center; }
  
  #interview-loading {
      text-align: center;
      padding: var(--space-xl) 0;
      font-size: 1.1rem;
      color: var(--gray-600);
      min-height: 100px; /* Placeholder height */
  }
  #interview-loading::after { /* Spinner animation */
      content: ''; display: inline-block; width: 24px; height: 24px;
      border: 3px solid rgba(67, 97, 238, 0.2);
      border-radius: 50%; border-top-color: var(--primary-500);
      animation: spin 1s linear infinite; margin-left: var(--space-sm);
      vertical-align: middle;
  }
  
  /* Question Area */
  #interview-qa-area {
      opacity: 0;
      animation: fadeIn 0.5s 0.1s forwards; /* Fade in slightly delayed */
  }
  #question-title {
    color: var(--primary-500);
    margin-bottom: var(--space-sm);
    font-size: 1.3rem;
  }
  #question-text.question-box { /* Style applied via class in HTML */
    font-size: 1.1rem;
    line-height: 1.7;
    padding: var(--space-lg);
    background-color: var(--light-100);
    border-radius: var(--radius-md);
    border-left: 4px solid var(--primary-500);
    margin: 0 auto var(--space-xl); /* Center and space below */
    max-width: 800px; /* Limit width of question text */
    text-align: left;
    box-shadow: var(--shadow-inner);
  }
  
  /* Video Area */
  #video-area {
    position: relative; /* For positioning controls */
    max-width: 600px; /* Limit video size */
    margin: var(--space-xl) auto; /* Center video area */
    background-color: var(--dark-900); /* Dark background */
    border-radius: var(--radius-lg); /* Rounded corners */
    overflow: hidden; /* Clip corners */
    box-shadow: var(--shadow-lg);
    border: 4px solid var(--light-200); /* White border */
  }
  
  #webcam-feed {
    display: block;
    width: 100%;
    height: auto;
    transform: scaleX(-1); /* Mirror mode */
  }
  
  #recording-controls {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background: linear-gradient(to top, rgba(0,0,0,0.7), rgba(0,0,0,0)); /* Gradient overlay */
    padding: var(--space-lg) var(--space-md) var(--space-md); /* More padding at bottom */
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--space-sm);
    flex-wrap: wrap;
  }
  #recording-controls span { /* Status and Timer */
      background-color: rgba(0, 0, 0, 0.6);
      color: white;
      padding: var(--space-xs) var(--space-sm);
      border-radius: var(--radius-sm);
      font-size: 0.9rem;
      font-weight: 500;
      white-space: nowrap;
  }
  #recording-status { /* Specific status text */
      flex-grow: 1; /* Allow status to take more space */
      text-align: left;
      background: none; /* Remove background */
      padding: 0;
  }
  #question-timer-display.timer-display { /* Timer specific */
      font-family: var(--font-mono);
      background-color: rgba(255, 170, 0, 0.2); /* Warning background */
      color: var(--warning-500);
      border: 1px solid rgba(255, 170, 0, 0.4);
  }
  #question-timer-display.hidden { display: none; }
  
  #recording-controls .btn { /* Buttons within controls */
      box-shadow: none; /* Remove shadow on overlay buttons */
      /* Adjust sizes if needed */
  }
  
  /* Loading/Status below video */
  #loading-answer { display: none; text-align: center; margin-top: var(--space-sm); }
  #loading-answer::before { /* Spinner */
      content: ''; display: inline-block; width: 16px; height: 16px;
      border: 2px solid rgba(67, 97, 238, 0.2);
      border-radius: 50%; border-top-color: var(--primary-500);
      animation: spin 1s linear infinite; margin-right: var(--space-xs);
      vertical-align: middle;
  }
  
  #stt-simulation-note {
      font-size: 0.85rem; color: var(--gray-600); font-style: italic;
      text-align: center; margin-top: var(--space-md);
      display: none; /* Hidden initially */
  }
  
  /* Navigation controls (Next/Finish) */
  .navigation-controls {
      margin-top: var(--space-xl);
      text-align: center;
  }
  .navigation-controls .btn {
      min-width: 150px; /* Ensure decent width */
  }
  
  /* ===== REPORT SECTION ===== */
  #report-section { /* Card styling applied above */ }
  
  .report-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start; /* Align top */
    flex-wrap: wrap; /* Allow wrapping */
    gap: var(--space-md);
    margin-bottom: var(--space-lg);
    padding-bottom: var(--space-md);
    border-bottom: var(--border-width) solid var(--gray-200);
  }
  .report-header h2 { margin-bottom: 0; }
  .report-header #back-to-dashboard-btn { /* Specific button placement */
      margin-left: auto; /* Push to right if space allows */
  }
  
  /* Report Info Paragraphs */
  #report-section > p {
      margin-bottom: var(--space-sm);
      color: var(--gray-700);
      font-size: 1rem;
  }
  #report-section > p strong {
      font-weight: 600;
      color: var(--dark-900);
      margin-right: var(--space-xs);
  }
  #report-section > p .interview-status { /* Adjust status badge margin */
      margin-left: var(--space-xs);
      vertical-align: middle;
  }
  #report-resume-link-area { /* Resume link container */
      display: inline; /* Keep on same line if possible */
  }
  #report-resume-link.link-style { /* Resume link */
      color: var(--primary-500);
      text-decoration: underline;
      font-weight: 500;
      margin-left: var(--space-xs);
  }
  #report-resume-link.link-style:hover { color: var(--primary-600); }
  
  /* Recruiter Status Update Area */
  #recruiter-status-update {
    background-color: var(--light-100);
    border: var(--border-width) solid var(--gray-200);
    border-radius: var(--radius-md);
    padding: var(--space-lg);
    margin-top: var(--space-lg);
    display: none; /* Hidden by default */
  }
  #recruiter-status-update h4 {
      margin-top: 0;
      margin-bottom: var(--space-md);
      color: var(--secondary-500);
  }
  #recruiter-status-update .form-group {
      margin-bottom: var(--space-md); /* Consistent spacing */
  }
  #recruiter-status-update button {
      margin-top: var(--space-xs); /* Align button nicely */
  }
  
  /* Feedback Area */
  #feedback-area { margin-top: var(--space-xl); }
  #feedback-area h3 { margin-bottom: var(--space-md); }
  
  #loading-feedback {
      display: flex; justify-content: center; align-items: center;
      padding: var(--space-xl); color: var(--gray-600); font-style: italic;
      min-height: 80px;
  }
  #loading-feedback::after { /* Spinner */
      content: ''; display: inline-block; width: 20px; height: 20px;
      border: 2px solid rgba(67, 97, 238, 0.2);
      border-radius: 50%; border-top-color: var(--primary-500);
      animation: spin 1s linear infinite; margin-left: var(--space-sm);
  }
  #logo-main{
    height: 100px;
    width: 100px;
    border-radius: 5px;
  }
  
  #feedback-content {
    background-color: var(--light-100);
    border-radius: var(--radius-md);
    padding: var(--space-lg);
    border-left: 4px solid var(--primary-400); /* Lighter blue border */
    display: none; /* Hidden until loaded */
  }
  /* Styles for formatted feedback within #feedback-content */
  .feedback-section h4 {
      font-size: 1.05rem;
      font-weight: 600;
      color: var(--dark-900);
      margin-top: var(--space-md);
      margin-bottom: var(--space-xs);
  }
  .feedback-section h4:first-child { margin-top: 0; }
  .feedback-section p {
      color: var(--gray-700);
      line-height: 1.7;
      margin-bottom: var(--space-sm);
  }
  /* Container for the score displays */
  .score-container {
    display: flex;          /* Enable Flexbox */
    flex-wrap: wrap;        /* Allow items to wrap onto the next line */
    gap: var(--space-sm) var(--space-md); /* Vertical and horizontal gap between items */
    align-items: center;      /* Align items vertically if they wrap */
    margin-top: var(--space-lg); /* Keep the top margin */
  }
  /* Make sure the h4 doesn't interfere with flex layout */
  .score-container h4 {
      width: 100%; /* Make heading take full width */
      margin-bottom: var(--space-xs); /* Reduce space below heading */
      flex-basis: 100%; /* Ensure it takes the full line in flex context */
  }
  /* The individual score display */
  .feedback-score-display {
    display: inline-flex;   /* Use inline-flex for potential internal alignment */
    align-items: center;    /* Align content vertically inside the span */
    /* margin-right: var(--space-md); REMOVE - Use gap on parent */
    /* margin-top: var(--space-xs);   REMOVE - Use gap on parent */
    font-weight: 600;
    border: var(--border-width) solid var(--gray-300);
    padding: var(--space-xs) var(--space-sm);
    border-radius: var(--radius-sm);
    background-color: var(--light-200);
    font-size: 0.95rem;
    white-space: normal;   /* CHANGE: Allow text inside the span to wrap */
    line-height: 1.5;     /* ADD: Improve readability if text wraps */
    flex-shrink: 0;       /* Optional: Prevent shrinking if space is very tight */
  }
  
  
  /* Q&A Report Area */
  #report-content { margin-top: var(--space-xl); }
  #report-content h3 { margin-bottom: var(--space-md); }
  
  .qa-block {
    margin-bottom: var(--space-xl);
    padding-bottom: var(--space-lg);
    border-bottom: 1px dashed var(--gray-200);
    overflow: visible; /* Ensure no clipping */
  }
  .qa-block:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
  
  .qa-block h4 { /* Q/A labels */
    color: var(--primary-500);
    margin-bottom: var(--space-xs);
    font-size: 1rem;
    font-weight: 600;
  }
  .qa-block p.question-text { /* Question text */
    color: var(--dark-900);
    font-weight: 500;
    margin-bottom: var(--space-md);
    line-height: 1.6;
    background-color: var(--light-100); /* Slight background for question */
    padding: var(--space-sm);
    border-radius: var(--radius-sm);
  }
  .qa-block pre.answer-text { /* Answer text */
    white-space: pre-wrap;
    word-wrap: break-word;
    overflow-x: auto;
    max-width: 100%;
    box-sizing: border-box;
    background-color: var(--light-200); /* White background for answer */
    padding: var(--space-md);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-md);
    font-size: 0.95rem;
    line-height: 1.6;
    font-family: var(--font-mono);
    color: var(--gray-700);
    margin-top: var(--space-sm); /* Space below "Answer" label */
  }
  .qa-block .btn { /* Video button */
      margin-top: var(--space-sm);
      display: inline-block;
  }
  .qa-block p.message.inline-msg { /* Video status message */
      margin-top: var(--space-sm);
      display: inline-block;
      padding: var(--space-xs) var(--space-sm);
  }
  
  /* ===== STATUS BADGES ===== */
  .interview-status {
    display: inline-flex;
    align-items: center;
    padding: var(--space-xs) var(--space-sm);
    border-radius: var(--radius-full);
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
    border: var(--border-width) solid transparent; /* Base border */
  }
  .interview-status::before { /* Status dot */
    content: ''; display: inline-block; width: 8px; height: 8px;
    border-radius: 50%; margin-right: var(--space-xs);
    background-color: currentColor; /* Use text color */
    flex-shrink: 0;
  }
  
  /* Status Colors (Lowercase class names preferred) */
  .status-pending    { background-color: #fff3cd; color: #856404; border-color: #ffeeba; }
  .status-reviewed   { background-color: #d1ecf1; color: #0c5460; border-color: #bee5eb; }
  .status-selected   { background-color: #d4edda; color: #155724; border-color: #c3e6cb; }
  .status-rejected   { background-color: #f8d7da; color: #721c24; border-color: #f5c6cb; }
  .status-on-hold    { background-color: #e2e3e5; color: #383d41; border-color: #d6d8db; }
  .status-inprogress { background-color: #cce5ff; color: #004085; border-color: #b8daff; } /* If used */
  /* Add more statuses as needed */
  
  /* Default/Unknown status */
  .interview-status:not([class*="status-"]) {
      background-color: var(--gray-200); color: var(--gray-600); border-color: var(--gray-300);
  }
  
  /* ===== MESSAGES & LOADERS ===== */
  .message, .error-message { /* Base styles */
    padding: var(--space-md);
    margin-bottom: var(--space-md);
    border-radius: var(--radius-md);
    border-left-width: 4px;
    border-left-style: solid;
    animation: fadeIn 0.3s ease;
    font-size: 0.95rem;
    text-align: left; /* Default align left */
  }
  /* Center align specific messages if needed by adding a class */
  .message.text-center, .error-message.text-center { text-align: center; }
  
  .message { /* Success/Info Message */
    background-color: rgba(67, 97, 238, 0.08); /* Light primary */
    border-left-color: var(--primary-500);
    color: var(--primary-600);
  }
  .error-message { /* Error Message */
    background-color: rgba(239, 35, 60, 0.08); /* Light danger */
    border-left-color: var(--danger-500);
    color: var(--danger-500);
    animation: shake 0.4s ease;
  }
  
  /* Inline Messages */
  .inline-msg {
    display: inline-block;
    padding: var(--space-xs) var(--space-sm);
    margin: var(--space-xs) 0 var(--space-xs) var(--space-sm); /* Adjust margin */
    border-radius: var(--radius-sm);
    font-size: 0.9rem;
    border-left-width: 3px;
    animation: none; /* No animation for inline */
    vertical-align: middle; /* Align with buttons */
  }
  /* Specific inline colors inherit from base message types */
  .inline-msg.message { background-color: rgba(67, 97, 238, 0.05); border-left-color: var(--primary-500); color: var(--primary-600); }
  .inline-msg.error-message { background-color: rgba(239, 35, 60, 0.05); border-left-color: var(--danger-500); color: var(--danger-500); }
  .inline-msg:not(.message):not(.error-message) { /* Default inline style */
      background-color: var(--gray-200);
      border-left-color: var(--gray-400);
      color: var(--gray-700);
  }
  
  /* Loading Indicators */
  .loading { /* Text-based loading */
    display: inline-flex; align-items: center; gap: var(--space-sm);
    color: var(--gray-600); font-style: italic; padding: var(--space-md);
  }
  .loading::after { /* Spinner animation */
    content: ''; display: inline-block; width: 16px; height: 16px;
    border: 2px solid rgba(67, 97, 238, 0.2);
    border-radius: 50%; border-top-color: var(--primary-500);
    animation: spin 1s linear infinite;
  }
  .loading.full-width { /* Class to make it block */
      display: flex; justify-content: center; width: 100%;
  }
  
  /* Global Loading Overlay */
  #global-loading {
    position: fixed; top: 0; left: 0; right: 0; bottom: 0;
    background-color: rgba(245, 247, 255, 0.9); /* Light background tint */
    z-index: var(--z-modal);
    display: none; /* Controlled by JS */
    flex-direction: column; justify-content: center; align-items: center;
    font-size: 1.1rem; font-weight: 500; color: var(--dark-900);
  }
  #global-loading p { margin-bottom: var(--space-md); color: var(--dark-900);}
  #global-loading .spinner { /* Larger spinner for overlay */
    width: 40px; height: 40px; border-width: 4px;
    border-color: rgba(67, 97, 238, 0.2); border-top-color: var(--primary-500);
    border-radius: 50%; animation: spin 1s linear infinite;
  }
  
  /* Global Error Display (if used) */
  #global-error {
      /* Similar to .error-message but positioned */
      position: fixed; /* Example */
      top: var(--space-lg);
      left: 50%;
      transform: translateX(-50%);
      z-index: var(--z-tooltip);
      min-width: 300px;
      max-width: 90%;
      text-align: center;
      display: none; /* Controlled by JS */
  }
  
  /* ===== FOOTER ===== */
  footer.container {
    text-align: center;
    padding: var(--space-lg) 0;
    margin-top: var(--space-xl);
    border-top: var(--border-width) solid var(--gray-200);
    color: var(--gray-600);
    font-size: 0.9rem;
    flex-shrink: 0; /* Prevent footer shrinking */
  }
  
  /* ===== UTILITIES & HELPERS ===== */
  .text-center { text-align: center; }
  .hidden { display: none !important; } /* Force hide */
  
  /* Dynamically Added Back Button in Error States */
  .back-btn-error {
      margin-top: var(--space-lg);
      display: block;
      margin-left: auto;
      margin-right: auto;
      max-width: 250px;
  }
  
  /* ===== ANIMATIONS ===== */
  @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
  @keyframes fadeInDown { from { opacity: 0; transform: translateY(-15px); } to { opacity: 1; transform: translateY(0); } }
  @keyframes fadeInUp { from { opacity: 0; transform: translateY(15px); } to { opacity: 1; transform: translateY(0); } }
  @keyframes shake { 0%, 100% { transform: translateX(0); } 20%, 60% { transform: translateX(-4px); } 40%, 80% { transform: translateX(4px); } }
  @keyframes spin { to { transform: rotate(360deg); } }
  /* Pulse animation can be added if desired for buttons */
  
  /* ===== RESPONSIVE DESIGN ===== */
  @media (max-width: 992px) {
      /* Adjustments for tablets */
      .container { padding: 0 var(--space-md); }
      :root { --space-lg: 1.25rem; --space-xl: 1.75rem; } /* Slightly reduce larger spacing */
  }
  
  @media (max-width: 768px) {
    /* Adjustments for smaller tablets and large phones */
    html { font-size: 15px; }
    h1 { font-size: 1.8rem; } h2 { font-size: 1.6rem; } h3 { font-size: 1.3rem; }
  
    header.container { padding-top: var(--space-md); padding-bottom: var(--space-md); }
    #main-content { padding-top: var(--space-md); }
  
    /* Stack user info */
    #user-info.user-info-header {
        flex-direction: column; align-items: stretch; text-align: center;
    }
    #user-info > div { margin-bottom: var(--space-xs); }
    #user-info #logout-btn { width: 100%; margin-top: var(--space-sm); }
  
    /* Stack list items */
    .list-item { flex-direction: column; align-items: flex-start; }
    .list-item > span, .list-item .interview-status, .list-item button { margin-left: 0; margin-top: var(--space-sm); width: 100%; text-align: center; }
    .list-item > span { text-align: left; } /* Keep scores aligned left */
    .list-item button { justify-content: center; }
  
    /* Status update layout */
    #recruiter-status-update .form-group { grid-column: 1 / -1; } /* Force single column */
    #recruiter-status-update button { width: 100%; }
  
    #video-area { padding: var(--space-md); }
    #recording-controls { padding: var(--space-md); }
  }
  
  @media (max-width: 480px) {
    /* Adjustments for small phones */
    :root { --space-md: 0.8rem; --space-lg: 1rem; --space-xl: 1.5rem; }
    .btn { width: 100%; margin-left: 0; margin-right: 0; } /* Full width buttons generally */
    .small-btn { width: auto; } /* Keep small buttons smaller */
    #user-info #logout-btn { width: 100%; }
    #auth-section form { padding: var(--space-lg); }
    .dashboard-section { padding: var(--space-md); }
    #report-section { padding: var(--space-md); }
    .qa-block pre.answer-text { font-size: 0.9rem; padding: var(--space-sm); }
    .report-header { flex-direction: column; align-items: stretch; }
    .report-header #back-to-dashboard-btn { margin-left: 0; width: 100%; }
    #recording-controls { flex-direction: column; align-items: stretch; } /* Stack recording controls */
    #recording-controls span { text-align: center; } /* Center status/timer text */
    #recording-status { text-align: center; }
  }
  /* --- Enhanced Date Input Style (Option 2: Visual Distinction) --- */

.form-group label[for="job-deadline"] {
  /* Optional styling */
}

/* Container for potential icon positioning */
.form-group.date-input-group { /* Add this class to the form-group div in HTML */
   position: relative;
}

#job-deadline {
   /* Base Styles */
   display: block;
   width: 100%;
   padding: 0.75rem 2.5rem 0.75rem 1rem; /* More padding on the right for icon */
   font-size: 1rem;
   font-family: var(--font-family);
   line-height: var(--line-height);
   color: var(--text-color);
   background-color: var(--white-color);
   background-clip: padding-box;
   border: 1px solid var(--border-color);
   border-radius: var(--border-radius);
   transition: border-color var(--transition-speed) ease-in-out, box-shadow var(--transition-speed) ease-in-out;
   appearance: none;
   -webkit-appearance: none;
   -moz-appearance: none;
   cursor: text;
   min-height: calc(1.6em + 1.5rem + 2px);

   /* Add a background icon */
   background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="15" viewBox="0 0 24 24"><path fill="%236c757d" d="M19 4h-1V2h-2v2H8V2H6v2H5c-1.11 0-1.99.9-1.99 2L3 20c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 16H5V9h14v11zM7 11h10v2H7v-2zm0 4h7v2H7v-2z"/></svg>'); /* Inline SVG */
   background-repeat: no-repeat;
   background-position: right 1rem center; /* Position icon */
   background-size: 1em 1em; /* Control icon size */
}

/* Focus State */
#job-deadline:focus {
   border-color: var(--primary-color);
   outline: 0;
   box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

/* Hide the default browser picker icon */
#job-deadline::-webkit-calendar-picker-indicator {
   opacity: 0; /* Make it invisible */
   position: absolute; /* Allow clicking over the background icon */
   right: 0;
   top: 0;
   width: 40px; /* Make clickable area cover the icon */
   height: 100%;
   cursor: pointer;
}

/* Placeholder */
#job-deadline::placeholder {
   color: var(--secondary-color);
   opacity: 0.7;
}

/* Add this HTML structure:
  <div class="form-group date-input-group">
      <label for="job-deadline">Apply Deadline:</label>
      <input type="date" id="job-deadline" required>
  </div>
*/
/* --- Container for the form group --- */
#edit-phone-group { /* Or use .form-group if you want this style applied to all similar groups */
  margin-bottom: 1.5rem; /* Spacing below the group */
  /* display: none; */ /* Keep this inline style if you control visibility with JS */
                      /* Or manage visibility with a CSS class (e.g., .is-hidden) */
}

/* --- Styling for the label --- */
#edit-phone-group label {
  display: block; /* Ensure label is on its own line */
  font-weight: 600; /* Make label slightly bolder */
  color: #333; /* Dark grey color for good readability */
  margin-bottom: 0.5rem; /* Space between label and input */
  font-size: 0.9rem; /* Slightly smaller font size for the label */
  cursor: pointer; /* Indicate it's clickable (points to input) */
}

/* --- Styling for the phone input field --- */
#edit-phone {
  display: block; /* Take up full width */
  width: 100%; /* Ensure it fills the container */
  padding: 0.75rem 1rem; /* Comfortable padding inside the input */
  font-size: 1rem; /* Standard text size */
  line-height: 1.5; /* Standard line height */
  color: #495057; /* Standard input text color */
  background-color: #fff; /* White background */
  background-clip: padding-box;
  border: 1px solid #ced4da; /* Standard light grey border */
  border-radius: 0.3rem; /* Slightly rounded corners */
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); /* Subtle inner shadow */

  /* --- Transitions for smooth focus effect --- */
  transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

/* --- Focus state for the input --- */
#edit-phone:focus {
  color: #495057;
  background-color: #fff;
  border-color: #80bdff; /* Highlight border color on focus (light blue) */
  outline: 0; /* Remove default browser outline */
  /* Nice glow effect on focus */
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

/* --- Placeholder text styling (optional) --- */
#edit-phone::placeholder {
  color: #6c757d;
  opacity: 1; /* Override browser defaults */
}

/* --- Disabled state styling (optional) --- */
#edit-phone:disabled,
#edit-phone[readonly] {
  background-color: #e9ecef; /* Grey out background when disabled */
  opacity: 1;
  cursor: not-allowed;
}

/* --- Styling for Validation (Optional examples) --- */
/* Add these classes with JavaScript based on validation */
#edit-phone.is-valid {
    border-color: #28a745; /* Green border for valid input */
}

#edit-phone.is-valid:focus {
    border-color: #28a745;
    box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.25); /* Green glow for valid input focus */
}

#edit-phone.is-invalid {
    border-color: #dc3545; /* Red border for invalid input */
}

#edit-phone.is-invalid:focus {
    border-color: #dc3545;
    box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25); /* Red glow for invalid input focus */
}

/* --- Accessibility: Reduce motion preference --- */
@media (prefers-reduced-motion: reduce) {
  #edit-phone {
    transition: none; /* Disable transitions if user prefers reduced motion */
  }
}
/* --- Container for the form group --- */
#signup-phone-group { /* Or use .form-group if applying to multiple similar groups */
  margin-bottom: 1.5rem; /* Spacing below the group */
  /* Consider controlling visibility with a CSS class instead of inline style */
  /* e.g., add/remove a class like 'is-hidden' { display: none; } */
}

/* --- Styling for the label --- */
#signup-phone-group label {
  display: block; /* Label on its own line */
  font-weight: 600; /* Slightly bolder label text */
  color: #333; /* Dark grey for readability */
  margin-bottom: 0.5rem; /* Space between label and input */
  font-size: 0.9rem; /* Slightly smaller label font */
  cursor: pointer; /* Indicates it's related to the input */
}

/* --- Styling for the phone input field --- */
#signup-phone {
  display: block; /* Take up full available width */
  width: 100%; /* Ensure it fills its container */
  padding: 0.75rem 1rem; /* Comfortable internal padding */
  font-size: 1rem; /* Standard text size */
  line-height: 1.5;
  color: #495057; /* Standard input text color */
  background-color: #fff; /* White background */
  background-clip: padding-box;
  border: 1px solid #ced4da; /* Light grey border */
  border-radius: 0.3rem; /* Slightly rounded corners */
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); /* Subtle inner shadow */

  /* --- Transitions for smooth focus/state changes --- */
  transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

/* --- Focus state for the input --- */
#signup-phone:focus {
  color: #495057;
  background-color: #fff;
  border-color: #80bdff; /* Highlight border with a light blue */
  outline: 0; /* Remove default browser outline */
  /* Add a subtle blue glow effect */
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

/* --- Placeholder text styling --- */
#signup-phone::placeholder {
  color: #6c757d; /* Lighter grey for placeholder text */
  opacity: 1; /* Ensure placeholder is visible (some browsers reduce opacity) */
  font-style: italic; /* Optional: make placeholder italic */
}

/* --- Disabled state styling (optional) --- */
#signup-phone:disabled,
#signup-phone[readonly] {
  background-color: #e9ecef; /* Grey out background */
  opacity: 1;
  cursor: not-allowed; /* Indicate non-interactive state */
}

/* --- Styling for Validation (Optional examples) --- */
/* Add these classes dynamically with JavaScript */
#signup-phone.is-valid {
    border-color: #28a745; /* Green border for success */
}

#signup-phone.is-valid:focus {
    border-color: #28a745;
    box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.25); /* Green glow */
}

#signup-phone.is-invalid {
    border-color: #dc3545; /* Red border for error */
}

#signup-phone.is-invalid:focus {
    border-color: #dc3545;
    box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25); /* Red glow */
}

/* --- Accessibility: Reduce motion preference --- */
@media (prefers-reduced-motion: reduce) {
  #signup-phone {
    transition: none; /* Disable transitions if user prefers */
  }
}
/* ======== GLOBAL STYLES ======== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Poppins', sans-serif;
  background: linear-gradient(135deg, #f5f7fa, #c3cfe2);
  color: #333;
  line-height: 1.6;
}

.container {
  max-width: 1100px;
  margin: auto;
  padding: 20px;
}

/* ======== HEADER ======== */
header h1 {
  font-size: 2.2rem;
  color: #222;
  margin-bottom: 10px;
  text-align: center;
}

.user-info-bar {
  background: #ffffff;
  border-radius: 12px;
  padding: 12px 20px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 10px;
  position: sticky;
  top: 0;
  z-index: 10;
  transition: all 0.3s ease-in-out;
}

.user-details span {
  font-weight: 500;
}

.user-actions button {
  margin-left: 10px;
}

/* ======== FORMS ======== */
.form-container {
  background: #fff;
  padding: 25px;
  margin: 20px 0;
  border-radius: 15px;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease-in-out;
}

.form-container:hover {
  transform: scale(1.01);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.08);
}

.form-group {
  margin-bottom: 15px;
}

.form-group label {
  display: block;
  margin-bottom: 6px;
  font-weight: 500;
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="date"],
input[type="tel"],
select,
textarea {
  width: 100%;
  padding: 10px 14px;
  border: 1px solid #ccc;
  border-radius: 8px;
  font-size: 1rem;
  transition: border-color 0.3s ease;
}

input:focus,
textarea:focus,
select:focus {
  outline: none;
  border-color: #4f46e5;
}

/* ======== BUTTONS ======== */
.btn {
  display: inline-block;
  padding: 10px 18px;
  font-size: 1rem;
  font-weight: 500;
  border-radius: 8px;
  cursor: pointer;
  border: none;
  transition: background-color 0.3s ease, transform 0.2s ease;
}

.primary-btn {
  background-color: #4f46e5;
  color: #fff;
}

.primary-btn:hover {
  background-color: #4338ca;
  transform: translateY(-2px);
}

.secondary-btn {
  background-color: #f3f4f6;
  color: #333;
}

.secondary-btn:hover {
  background-color: #e5e7eb;
  transform: translateY(-2px);
}

.danger-btn {
  background-color: #ef4444;
  color: white;
}

.danger-btn:hover {
  background-color: #dc2626;
}

/* Small buttons */
.small-btn {
  padding: 6px 12px;
  font-size: 0.9rem;
}

/* ======== MESSAGE STYLES ======== */
.error-message {
  color: #dc2626;
  background-color: #fee2e2;
  border: 1px solid #fca5a5;
  padding: 10px;
  border-radius: 8px;
  margin: 10px 0;
}

.message {
  color: #2563eb;
  background-color: #dbeafe;
  border: 1px solid #93c5fd;
  padding: 10px;
  border-radius: 8px;
  margin: 10px 0;
}

/* ======== SECTION DIVIDERS ======== */
.section-divider {
  margin: 30px 0;
  border: 0;
  border-top: 1px solid #ccc;
}

/* ======== DASHBOARD LISTS ======== */
.item-list {
  display: grid;
  gap: 15px;
  margin-top: 15px;
}

.item-list > div {
  padding: 16px;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.05);
  transition: transform 0.3s ease;
}

.item-list > div:hover {
  transform: translateY(-5px);
}

/* ======== SPINNER ======== */
.loading-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(255,255,255,0.8);
  z-index: 999;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.spinner {
  border: 4px solid #ccc;
  border-top: 4px solid #4f46e5;
  border-radius: 50%;
  width: 36px;
  height: 36px;
  animation: spin 1s linear infinite;
  margin-bottom: 10px;
}

@keyframes spin {
  to {
      transform: rotate(360deg);
  }
}

/* ======== LINKS & HOME ======== */
a {
  color: #4f46e5;
  text-decoration: none;
  transition: color 0.3s ease;
}

a:hover {
  color: #1d4ed8;
  text-decoration: underline;
}

.auth-links {
  margin-top: 15px;
  font-size: 0.95rem;
  text-align: center;
}

/* ======== RESPONSIVE ======== */
@media (max-width: 768px) {
  .user-info-bar {
      flex-direction: column;
      align-items: flex-start;
  }

  .user-actions {
      margin-top: 10px;
  }

  .form-container {
      padding: 15px;
  }
}
@media (max-width: 480px) {

  /* ================================== */
  /*     MOBILE BASE & TYPOGRAPHY       */
  /* ================================== */
  :root {
    /* Slightly reduce spacing for tighter mobile layout */
    --space-3: 0.65rem;
    --space-4: 0.85rem;
    --space-5: 1.1rem;
    --space-6: 1.3rem;
    --space-8: 1.75rem;
    --space-10: 2.2rem;
    --space-12: 2.6rem;
  }

  html {
    font-size: 15px; /* Slightly smaller base font */
  }

  body {
    /* Remove background gradient if it feels too busy on mobile */
     background: var(--light-bg);
  }

  .container {
    /* Reduce horizontal padding */
    padding-left: var(--space-4);
    padding-right: var(--space-4);
  }

  h1 { font-size: 1.8rem; }
  h2 { font-size: 1.5rem; margin-bottom: var(--space-5); }
  h3 { font-size: 1.25rem; margin-bottom: var(--space-4); }
  h4 { font-size: 1.05rem; margin-bottom: var(--space-2); }
  p { line-height: 1.6; } /* Ensure good readability */

  /* ================================== */
  /*          MOBILE HEADER             */
  /* ================================== */
  header.container {
    padding-top: var(--space-3);
    padding-bottom: var(--space-3);
    position: relative; /* Remove sticky if it takes too much space */
    background: var(--white); /* Solid background might be cleaner */
    box-shadow: var(--shadow-sm);
    backdrop-filter: none; /* Remove blur */
  }

  .header-main {
    flex-direction: column;
    align-items: center; /* Center title and home link */
    gap: var(--space-3);
  }
  .header-main h1 { text-align: center; }
  .home-link { background-color: transparent; padding: var(--space-2); } /* Simplify home link */

  #user-info {
    margin-top: var(--space-4);
    padding-top: var(--space-4);
    flex-direction: column;
    align-items: center; /* Center user info */
    text-align: center;
    gap: var(--space-3);
  }
  #user-info #logout-btn {
    width: auto; /* Let button size naturally */
    padding: var(--space-2) var(--space-4);
    margin-top: var(--space-2);
    background: var(--danger-100); /* Make logout more distinct */
    color: var(--danger-600);
    border: none;
  }
  #user-info #logout-btn:hover {
     background: var(--danger-500);
     color: var(--white);
  }


  /* ================================== */
  /*          MOBILE SECTIONS           */
  /* ================================== */
  section.container {
    padding: var(--space-6); /* Reduced section padding */
    margin-bottom: var(--space-6);
    border-radius: var(--radius-lg); /* Slightly smaller radius */
    animation: fadeInUp 0.5s var(--transition-norm) both; /* Keep subtle animation */
  }
  section.container h2::after {
      width: 50px; /* Slightly smaller underline */
      height: 3px;
  }

  #auth-section {
     padding: var(--space-6);
     margin-top: var(--space-6);
  }
  #auth-section form {
      margin-top: var(--space-4);
  }

  /* ================================== */
  /*           MOBILE BUTTONS           */
  /* ================================== */
  .btn {
    width: 100%; /* Make most buttons full-width for easy tapping */
    padding: var(--space-4) var(--space-5); /* Slightly larger vertical padding */
    font-size: 1rem; /* Ensure readable text */
    margin: var(--space-2) 0; /* Vertical margin only when stacked */
    justify-content: center; /* Ensure icon/text are centered */
  }
  .btn i {
      font-size: 1.2em; /* Ensure icons are prominent */
  }

  /* Override full-width for specific smaller buttons */
  .btn-sm,
  #logout-btn, /* Already handled above */
  .qa-block .btn { /* Video view button */
    width: auto; /* Let small buttons size naturally */
    padding: var(--space-2) var(--space-4);
    font-size: 0.9rem;
  }

  .button-group {
    flex-direction: column; /* Stack buttons in groups */
    gap: var(--space-3);
    margin-top: var(--space-5);
  }

  /* Slightly enhance tap feedback */
  .btn:active:not(:disabled) {
    transform: scale(0.98); /* Scale down slightly on tap */
    box-shadow: var(--shadow-xs);
  }


  /* ================================== */
  /*            MOBILE FORMS            */
  /* ================================== */
  .form-group {
      margin-bottom: var(--space-4);
  }

  input[type="text"], input[type="email"], input[type="password"],
  input[type="number"], input[type="tel"], input[type="date"],
  textarea, select {
    padding: var(--space-4); /* Slightly larger padding */
    font-size: 1rem; /* Ensure readability */
  }

  input[type="file"] {
     padding: var(--space-3);
     text-align: left; /* Align text left */
  }
   input[type="file"]::file-selector-button {
      margin-right: var(--space-3);
   }

  /* ================================== */
  /*      MOBILE MESSAGES & ALERTS      */
  /* ================================== */
  .message {
    padding: var(--space-3) var(--space-4);
    gap: var(--space-2);
  }
  .message i {
      margin-top: 0; /* Better vertical alignment */
  }
  .inline-msg {
     display: block; /* Stack inline messages */
     margin-left: 0;
     margin-top: var(--space-2);
     text-align: left;
  }

  /* ================================== */
  /*   MOBILE INTERVIEW & REPORT UI     */
  /* ================================== */

  /* --- Video Area --- */
  #mock-video-area {
      margin-left: calc(-1 * var(--space-4)); /* Bleed edge-to-edge */
      margin-right: calc(-1 * var(--space-4));
      border-radius: 0; /* Square edges on mobile */
      border-left: none;
      border-right: none;
      border-width: 4px 0; /* Top/Bottom border only */
  }
  .video-controls-status {
    padding: var(--space-4);
    flex-direction: column;
    align-items: stretch; /* Stretch items */
    text-align: center;
    gap: var(--space-3);
  }
  #mock-recording-status {
      margin-bottom: var(--space-2);
      padding: var(--space-2);
      text-align: center;
      background-color: rgba(255,255,255, 0.15); /* Slightly more visible status */
  }
  #mock-question-timer-display {
      padding: var(--space-2);
  }
  .recording-controls {
     width: 100%;
     flex-direction: column; /* Stack record/stop buttons */
     gap: var(--space-3);
  }
  .recording-controls .btn {
      width: 100%; /* Full width record/stop */
      margin: 0;
  }

  /* --- Question Display --- */
  #mock-question-title {
      font-size: 1rem;
      margin-bottom: var(--space-3);
  }
  p.question-text {
    padding: var(--space-4);
    font-size: 1.1rem;
    margin-left: calc(-1 * var(--space-4)); /* Bleed edge-to-edge */
    margin-right: calc(-1 * var(--space-4));
    border-radius: 0;
    border-left-width: 3px;
  }
  p.question-text::before { display: none; } /* Hide quote icon */

  /* --- Navigation --- */
  .interview-navigation, .exit-controls {
      margin-top: var(--space-6);
  }
   .interview-navigation .btn, .exit-controls .btn {
       width: 100%; /* Full width navigation */
       margin: var(--space-2) 0;
   }

  /* --- Report Section --- */
  #mock-report-section {
      padding: var(--space-5); /* Less padding on report */
  }
  .feedback-section { margin-bottom: var(--space-6); }
  .feedback-section h4 { font-size: 1.1rem; }
  .score-container { gap: var(--space-2) var(--space-3); }
  .feedback-score-display { padding: var(--space-2) var(--space-3); font-size: 0.9rem; }
  #report-content { margin-top: var(--space-6); }
  .qa-block { margin-bottom: var(--space-6); padding-bottom: var(--space-6); }
  .qa-block pre.answer-text { font-size: 0.9rem; padding: var(--space-3); }
  .report-actions .btn { width: 100%; margin: 0; }


  /* ================================== */
  /*    MOBILE INTERVIEW HISTORY LIST   */
  /* ================================== */
  #past-mock-interviews-list { margin-top: var(--space-6); }
  #past-mock-interviews-list h3 { font-size: 1.2rem; margin-bottom: var(--space-4); }
  #mock-interviews-history { gap: var(--space-4); }
  #mock-interviews-history li.list-item {
      padding: var(--space-4);
      flex-direction: column; /* Stack info and button */
      align-items: flex-start; /* Align content start */
      gap: var(--space-3);
  }
  .history-actions { width: 100%; margin-top: var(--space-2); }
  .history-actions .btn { width: 100%; } /* Full width view button */

  /* ================================== */
  /*           MOBILE FOOTER            */
  /* ================================== */
  footer.container {
      padding: var(--space-5) var(--space-4);
      margin-top: var(--space-6);
      font-size: 0.85rem;
  }
  footer p.disclaimer { font-size: 0.75rem; }

} /* End of @media (max-width: 480px) */
/* ================================== */
/*       LOGOUT BUTTON STYLING        */
/* ================================== */

#user-info #logout-btn {
  /* Override Defaults / Base Style */
  background-color: transparent; /* No background fill */
  color: var(--gray-500);        /* Muted text color */
  border: var(--border-width-lg) solid var(--gray-200); /* Subtle border */
  box-shadow: none;             /* Remove base button shadow */
  padding: var(--space-2) var(--space-4); /* Slightly more horizontal padding for balance */
  transition: all var(--transition-norm); /* Apply standard transition */
  font-weight: 500; /* Less bold than primary buttons */
}

/* Icon Specific Style */
#user-info #logout-btn i {
  color: var(--danger-500); /* Make the icon red */
  transition: color var(--transition-norm); /* Transition icon color */
  margin-right: var(--space-2); /* Ensure space between icon and text */
  font-size: 1em; /* Adjust if needed relative to button text */
}

/* Hover State */
#user-info #logout-btn:hover:not(:disabled) {
  background-color: var(--danger-500); /* Fill with red on hover */
  border-color: var(--danger-500);     /* Match border color */
  color: var(--white);                 /* White text on hover */
  box-shadow: var(--shadow-md);        /* Add a subtle shadow on hover */
  transform: translateY(-1px);         /* Slight lift */
}
#user-info #logout-btn:hover:not(:disabled) i {
  color: var(--white); /* Make icon white on hover */
}

/* Focus State */
#user-info #logout-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.4); /* Red focus ring */
  /* Optionally keep border color consistent with hover */
  /* border-color: var(--danger-500); */
}

/* Active State */
#user-info #logout-btn:active:not(:disabled) {
    transform: translateY(0); /* Remove lift */
    box-shadow: var(--shadow-sm); /* Minimal shadow */
    background-color: var(--danger-600); /* Slightly darker red when pressed */
    border-color: var(--danger-600);
}

/* Disabled State (Inherits general .btn:disabled, but ensure overrides if needed) */
#user-info #logout-btn:disabled {
    background-color: transparent;
    border-color: var(--gray-200);
    color: var(--gray-300); /* Very faded text */
    box-shadow: none !important;
    transform: none !important;
}
#user-info #logout-btn:disabled i {
    color: var(--gray-300); /* Fade icon too */
}


/* Mobile Adjustments (within your existing mobile media query) */
@media (max-width: 480px) {
  #user-info #logout-btn {
    width: auto; /* Allow button to size naturally */
    align-self: center; /* Center it if user info stacks vertically */
    padding: var(--space-2) var(--space-4); /* Ensure adequate padding */
    margin-top: var(--space-3);
  }
}
@media (max-width: 480px) {

  /* ... other mobile styles ... */

  /* ================================== */
  /*    MOBILE INTERVIEW HISTORY LIST   */
  /* ================================== */
  #past-mock-interviews-list {
      margin-top: var(--space-6); /* Reduced top margin */
  }
  #past-mock-interviews-list h3 {
      font-size: 1.1rem; /* Smaller heading */
      margin-bottom: var(--space-3);
  }
  #mock-interviews-history {
      gap: var(--space-3); /* Reduced gap between items */
  }

  /* Target the history list item specifically */
  #mock-interviews-history li.list-item {
    padding: var(--space-3); /* DECREASED PADDING: Reduce top/bottom and left/right padding */
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-2); /* DECREASED GAP: Reduce space between info and actions */
    box-shadow: var(--shadow-xs); /* Lighter shadow */
  }
   #mock-interviews-history li.list-item:hover {
       transform: none; /* Disable hover transform on mobile */
       box-shadow: var(--shadow-sm); /* Slightly increase shadow on hover */
   }


  .history-info strong {
    font-size: 1rem; /* Slightly smaller topic font size */
    margin-bottom: var(--space-1); /* Less space below topic */
  }
  .history-meta {
    font-size: 0.8rem; /* Smaller meta text */
    line-height: 1.4; /* Tighter line height */
  }
  .history-meta + .history-meta {
     margin-top: 0; /* Remove extra margin between meta items */
  }

  .history-actions {
    width: 100%;
    margin-top: var(--space-3); /* Adjust space above button if needed */
  }
  .history-actions .btn {
    width: 100%;
    padding: var(--space-2) var(--space-4); /* Adjust button padding if needed */
    font-size: 0.9rem; /* Slightly smaller button text */
  }


  /* You might need similar adjustments if other .list-item elements exist */
  /* Example for a generic .list-item if used elsewhere: */
  /*
  .list-item {
     padding: var(--space-3);
     gap: var(--space-2);
  }
  .list-item > div:first-child { // Assuming this is the info block
     // Adjust font sizes or margins within the info block if needed
  }
  */

  /* ... rest of your mobile styles ... */

} /* End of @media (max-width: 480px) */
/* ================================== */
/*     EDIT PROFILE SECTION LAYOUT    */
/* ================================== */

/* Ensure the section container itself is centered like others */
#edit-profile-section.container {
  max-width: 700px; /* Adjust max-width as needed - match other main sections */
  margin-left: auto;
  margin-right: auto;
  /* Add specific top/bottom margin if needed */
  margin-top: var(--space-10); /* Example: Add top spacing */
  margin-bottom: var(--space-10); /* Example: Add bottom spacing */
  /* Ensure block display if it was somehow changed */
  display: block;
}

/* Style and center the form *within* the section */
#edit-profile-form {
  max-width: 550px; /* Give the form a max-width (adjust as needed) */
  margin-left: auto;  /* Center the form horizontally */
  margin-right: auto; /* Center the form horizontally */
  padding: var(--space-6); /* Add padding inside the form if desired */
  /* Optional: Add a subtle border or background to the form itself */
  /* background-color: var(--gray-50); */
  /* border: 1px solid var(--gray-200); */
  /* border-radius: var(--radius-md); */
}

/* Adjust heading alignment within the form if needed */
#edit-profile-section h2 {
    text-align: center; /* Center the "Edit Profile" title */
    border-bottom: none; /* Remove underline if not desired here */
    margin-bottom: var(--space-6); /* Adjust spacing */
}
#edit-profile-section h2::after {
    display: none; /* Hide the animated underline */
}

/* Ensure button group within the form is centered */
#edit-profile-form .button-group {
    justify-content: center;
}