:root {
    --blue-dark: #0a1e46;
    --blue-med:  #0052cc;
    --blue-light:#0078d7;
    --gray-bg:  #f0f2f5;
    --white:    #ffffff;
    --text:     #333;
    --text-light:#555;
    --spacing-sm: clamp(0.5rem, 2vw, 1rem);
    --spacing-md: clamp(1rem, 4vw, 2rem);
    --spacing-lg: clamp(1.5rem, 6vw, 3rem);
  }
  
  /* Reset & Base */
  * { box-sizing: border-box; margin: 0; padding: 0; }
  body { font-family: 'Inter', sans-serif; background: var(--gray-bg); color: var(--text); line-height: 1.5; }
  a { color: var(--blue-light); text-decoration: none; }
  ul { list-style: none; }
  
  /* Hidden utility */
  .hidden { display: none; }
  
  /* Top Bar */
  .top-bar {
    background: var(--blue-dark);
    color: var(--white);
    display: flex; justify-content: space-between; align-items: center;
    padding: var(--spacing-sm) var(--spacing-md);
    font-size: 0.875rem;
  }
  .top-bar .branding { display: flex; align-items: center; }
  .top-bar .branding img { height: 1rem; margin-right: 0.5rem; }
  .top-bar .actions a,
  .top-bar .actions button {
    background: none; border: none; color: var(--white);
    margin-left: var(--spacing-md); cursor: pointer;
  }
  .top-bar .sep { margin: 0 0.5rem; }
  .top-bar .actions button.active { text-decoration: underline; }
  
  /* Header */
  .site-header {
    background: var(--white);
    display: flex; align-items: center; justify-content: space-between;
    padding: var(--spacing-sm) var(--spacing-md);
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
  }
  .header-left { display: flex; align-items: center; gap: var(--spacing-sm); }
  .logo  { height: 2.5rem; }
  .tagline { font-size: 0.875rem; color: var(--text-light); }
  .student-btn {
    border: 1px solid var(--blue-light);
    background: var(--white);
    color: var(--blue-light);
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: 0.375rem;
  }
  
  /* Container & Card */
  .container {
    width: min(95%, 600px);
    margin: var(--spacing-lg) auto;
  }
  .card {
    background: var(--white);
    border-radius: 1rem;
    overflow: hidden;
    box-shadow: 0 8px 24px rgba(0,0,0,0.1);
  }
  
  /* Hero */
  .hero {
    padding: var(--spacing-lg) var(--spacing-md);
    text-align: center;
  }
  .council-logo { width: 4rem; margin-bottom: var(--spacing-sm); }
  .hero h1 { font-size: 1.5rem; margin-bottom: var(--spacing-sm); }
  .description { color: var(--text-light); font-size: 0.95rem; }
  
  /* Form Section */
  .form-section {
    background: #fafafa;
    padding: var(--spacing-md);
    text-align: center;
  }
  .form-section h2 { font-size: 1.25rem; margin-bottom: var(--spacing-md); }
  .form-section input {
    width: 100%;
    padding: var(--spacing-sm) var(--spacing-md);
    border: 1px solid #ccc;
    border-radius: 0.5rem;
    font-size: 1rem;
  }
  .note { color: var(--blue-light); font-size: 0.875rem; margin-top: 0.25rem; }
  .submit-btn {
    display: inline-flex; align-items: center; gap: 0.5rem;
    background: var(--blue-med); color: var(--white);
    border: none; border-radius: 2rem;
    padding: var(--spacing-sm) var(--spacing-lg);
    font-size: 1rem; font-weight: 600;
    margin-top: var(--spacing-lg);
    cursor: pointer;
  }
  .btn-icon { height: 1.25rem; }
  
  /* Bottom Note */
  .card-footer-note {
    padding: var(--spacing-md);
    background: #fafafa;
    font-size: 0.875rem;
    color: var(--text-light);
    text-align: center;
    border-top: 1px solid #eee;
  }
  .card-footer-note a { text-decoration: underline; }
  
  /* Result Area */
  .result-section,
  #result-area {
    padding: var(--spacing-md);
    text-align: center;
  }
  .document-img {
    max-width: 95%;
    height: auto;
    display: block;
    margin: var(--spacing-md) auto;
  }
  
  /* Footer */
  .footer {
    background: var(--blue-dark);
    color: var(--white);
    font-size: 0.875rem;
  }
  .footer-top {
    display: flex; flex-wrap: wrap;
    justify-content: space-between;
    padding: var(--spacing-lg) var(--spacing-md);
    gap: var(--spacing-md);
  }
  .ft-about, .ft-powered { flex: 1 1 200px; }
  .ft-links { flex: 2 1 300px; display: flex; gap: var(--spacing-lg); }
  .ft-logo { height: 1.5rem; margin-bottom: var(--spacing-sm); }
  .ft-links h4 { margin-bottom: 0.5rem; font-weight: 600; }
  .ft-links ul li { margin-bottom: 0.25rem; }
  .footer-bottom {
    border-top: 1px solid #044c7f;
    text-align: center;
    padding: var(--spacing-sm);
  }
  
  /* FAB */
  .fab {
    position: fixed; bottom: var(--spacing-md); right: var(--spacing-md);
    width: 3rem; height: 3rem;
    background: var(--blue-med); color: var(--white);
    border: none; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.5rem; cursor: pointer;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
  }
  
  /* Mobile tweaks */
  @media (max-width: 640px) {
    .site-header, .top-bar { flex-direction: column; align-items: flex-start; gap: var(--spacing-sm); }
    .ft-links { flex-direction: column; }
  }