:root{--primary:#2563eb;--primary-dark:#1d4ed8;--secondary:#7c3aed;--accent:#059669;--bg:#f8fafc;--card:#fff;--text:#1e293b;--muted:#64748b;--border:#e2e8f0;--radius:12px;--shadow:0 2px 12px rgba(0,0,0,.08)}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;background:var(--bg);color:var(--text);line-height:1.6}
a{color:var(--primary);text-decoration:none}a:hover{text-decoration:underline}
header{background:#fff;border-bottom:1px solid var(--border);position:sticky;top:0;z-index:100;box-shadow:var(--shadow)}
nav{max-width:1100px;margin:0 auto;padding:0 1rem;display:flex;align-items:center;gap:1rem;height:60px;flex-wrap:wrap}
.nav-logo{font-weight:800;font-size:1.2rem;color:var(--primary);margin-right:auto}
nav a{font-size:.9rem;color:var(--muted);padding:.25rem .5rem;border-radius:6px;transition:.2s}
nav a:hover,nav a.active{color:var(--primary);background:#eff6ff;text-decoration:none}
.hero{background:linear-gradient(135deg,#1e3a8a 0%,#2563eb 50%,#7c3aed 100%);color:#fff;padding:3rem 1rem 2.5rem;text-align:center}
.hero h1{font-size:clamp(1.8rem,4vw,2.8rem);font-weight:800;margin-bottom:.75rem}
.hero p{font-size:1.1rem;opacity:.9;max-width:600px;margin:0 auto 1.5rem}
.hero-tools{display:flex;gap:.75rem;justify-content:center;flex-wrap:wrap}
.hero-tools a{background:rgba(255,255,255,.2);color:#fff;padding:.5rem 1rem;border-radius:8px;font-size:.9rem;border:1px solid rgba(255,255,255,.3);transition:.2s}
.hero-tools a:hover{background:rgba(255,255,255,.3);text-decoration:none}
.container{max-width:1100px;margin:0 auto;padding:2rem 1rem}
.section-title{font-size:1.5rem;font-weight:700;margin-bottom:1.5rem;color:var(--text)}
.card{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);padding:1.5rem}
.generator-card{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);padding:2rem;max-width:780px;margin:0 auto}
.generator-card h2{font-size:1.4rem;font-weight:700;color:var(--primary);margin-bottom:.5rem}
.generator-card p.desc{color:var(--muted);margin-bottom:1.5rem;font-size:.95rem}
.form-group{margin-bottom:1.2rem}
.form-group label{display:block;font-size:.9rem;font-weight:600;color:var(--text);margin-bottom:.4rem}
.form-group select,.form-group input{width:100%;padding:.6rem .8rem;border:1.5px solid var(--border);border-radius:8px;font-size:.95rem;background:#fff;color:var(--text)}
.form-group select:focus,.form-group input:focus{border-color:var(--primary)}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.btn{display:inline-flex;align-items:center;gap:.5rem;padding:.65rem 1.4rem;border-radius:8px;font-size:.95rem;font-weight:600;cursor:pointer;border:none;transition:.2s}
.btn-primary{background:var(--primary);color:#fff}.btn-primary:hover{background:var(--primary-dark)}
.btn-secondary{background:#f1f5f9;color:var(--text)}.btn-secondary:hover{background:#e2e8f0}
.btn-success{background:var(--accent);color:#fff}.btn-success:hover{background:#047857}
.btn-group{display:flex;gap:.75rem;flex-wrap:wrap;margin-top:1.5rem}
.preview-area{margin-top:1.5rem;padding:1.25rem;background:#f8fafc;border-radius:8px;border:1px solid var(--border);min-height:120px;font-size:.9rem;color:var(--muted);text-align:center}
.preview-area p{margin:.25rem 0}
.tools-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:1.25rem;margin-bottom:2.5rem}
.tool-card{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);padding:1.5rem;border-top:4px solid var(--primary);transition:.2s;display:block;color:inherit}
.tool-card:hover{transform:translateY(-2px);box-shadow:0 6px 24px rgba(0,0,0,.12);text-decoration:none}
.tool-card .icon{font-size:2rem;margin-bottom:.75rem}
.tool-card h3{font-size:1.05rem;font-weight:700;color:var(--text);margin-bottom:.4rem}
.tool-card p{font-size:.88rem;color:var(--muted);line-height:1.5}
.tool-card .grade-tag{display:inline-block;background:#eff6ff;color:var(--primary);font-size:.75rem;font-weight:600;padding:.15rem .5rem;border-radius:4px;margin-top:.6rem}
.ad-slot{background:#f1f5f9;border:1px dashed #cbd5e1;border-radius:8px;padding:1.5rem;text-align:center;color:#94a3b8;font-size:.85rem;margin:1.5rem 0}
.blog-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:1.25rem}
.blog-card{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);padding:1.5rem}
.blog-card h3{font-size:1rem;font-weight:700;margin-bottom:.5rem}
.blog-card p{font-size:.88rem;color:var(--muted)}
.badge{display:inline-block;background:#dcfce7;color:#166534;font-size:.75rem;font-weight:600;padding:.2rem .6rem;border-radius:20px;margin-bottom:.75rem}
.cross-link{background:linear-gradient(135deg,#eff6ff,#f5f3ff);border-radius:var(--radius);padding:1.5rem;margin-top:2rem;text-align:center}
.cross-link h3{font-size:1rem;font-weight:700;margin-bottom:.75rem;color:var(--text)}
.cross-link .links{display:flex;gap:.75rem;justify-content:center;flex-wrap:wrap}
.cross-link a{background:#fff;color:var(--primary);padding:.4rem .9rem;border-radius:6px;font-size:.85rem;border:1px solid var(--border);transition:.2s}
.cross-link a:hover{background:var(--primary);color:#fff;text-decoration:none}
footer{background:#1e293b;color:#94a3b8;padding:2rem 1rem;text-align:center;margin-top:3rem;font-size:.88rem}
footer a{color:#94a3b8}
footer .links{display:flex;gap:1.5rem;justify-content:center;margin-bottom:.75rem;flex-wrap:wrap}
@media(max-width:600px){.form-row{grid-template-columns:1fr}.hero{padding:2rem 1rem}}

/* ============================================================
   W-2 ADDITIONS: dark mode / focus-visible / 44px taps
   ============================================================ */

/* 1. DARK MODE (prefers-color-scheme) */
@media (prefers-color-scheme: dark) {
  :root {
    --bg:      #0f1117;
    --card-bg: #1a1d27;
    --text:    #e8eaf0;
    --muted:   #8fa0bc;
    --border:  #2a3047;
    --shadow:  0 2px 12px rgba(0,0,0,0.4);
  }
  /* card / white surface overrides */
  .card, .card-bg, .white-bg { background: #1a1d27 !important; }
  /* ad placeholder dark */
  .ad-placeholder { background:#1a1d27; border-color:#2a3047; }
  /* form controls */
  select, input, textarea {
    background: #1e2233;
    color: var(--text);
    border-color: var(--border);
    color-scheme: dark;
  }
}

/* 2. FOCUS-VISIBLE (keyboard accessibility, WCAG 2.1 SC 2.4.7) */
/* Reset — pointer users see no ring; keyboard users see ring below */
a:focus, button:focus, input:focus, select:focus,
textarea:focus, [tabindex]:focus { outline: none; }
/* Keyboard ring */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
  outline: 3px solid var(--primary, #3d5af1);
  outline-offset: 3px;
  border-radius: 4px;
}

/* 3. 44px MINIMUM TAP TARGETS (WCAG 2.5.5) */
.site-header nav a,
.nav-links a {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}
button,
.btn-primary,
.btn-secondary,
[role="button"] {
  min-height: 44px;
}
.site-footer a,
footer a {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding-top: 4px;
  padding-bottom: 4px;
}
.tap-target {
  min-height: 44px;
  min-width: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* E-37: Language switcher */
.lang-switch {
  font-size: 0.78rem;
  padding: 3px 8px;
  border: 1px solid var(--border, #ddd);
  border-radius: 4px;
  color: var(--muted, #666);
  text-decoration: none;
  white-space: nowrap;
}
.lang-switch:hover { background: var(--bg-alt, #f5f5f5); }