Dedupe styles.css and remove remaining inline styles

- Add --font-serif/--font-mono/--font-sans tokens to :root and point
  all ~24 hardcoded font-family declarations at them
- Drop an exact-duplicate .footer-brand .knot rule
- Merge the shared background/border of .stat-card, .card,
  .login-card, and .panel into one grouped selector
- Combine .btn-outline:hover and .nav-cta:hover into one rule
- Move remaining inline style="" attributes in index.php and
  admin/index.php into named classes/rules (.about-grid h2,
  footer address/.social-row spacing, .panel-head,
  .checkbox-label-lg, .field-hint, .form-actions)

No visual changes intended — values carried over as-is.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

admin/index.php

@@ -78,7 +78,7 @@ if (!$announcement) {
     <div class="container">
       <div class="dash-header">
         <p class="eyebrow">Content & Operations</p>
-        <h1 style="margin-top: 0.4rem;">Site Announcements & Alerts</h1>
+        <h1>Site Announcements & Alerts</h1>
       </div>
 
       <?php if (!empty($successMsg)): ?>
@@ -94,7 +94,7 @@ if (!$announcement) {
         <input type="hidden" name="announcement_id" value="<?= (int)($announcement['id'] ?? 0) ?>">
 
         <div class="panel">
-          <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem;">
+          <div class="panel-head">
             <h2>
               <span>📢 Announcement Settings</span>
             </h2>
@@ -107,7 +107,7 @@ if (!$announcement) {
 
           <div class="form-grid">
             <div class="form-group full-width">
-              <label class="checkbox-label" style="font-size: 1.05rem; font-weight: 500;">
+              <label class="checkbox-label checkbox-label-lg">
                 <input type="checkbox" name="is_active" value="1" <?= !empty($announcement['is_active']) ? 'checked' : '' ?>>
                 <strong>Enable Announcement on Site</strong>
               </label>
@@ -139,14 +139,14 @@ if (!$announcement) {
               <label for="start_date">Start Date (Optional Auto-Schedule)</label>
               <input type="date" id="start_date" name="start_date" class="form-control" 
                      value="<?= htmlspecialchars($announcement['start_date'] ?? '') ?>">
-              <span class="muted" style="font-size: 0.78rem;">Leave blank to show immediately while enabled.</span>
+              <span class="muted field-hint">Leave blank to show immediately while enabled.</span>
             </div>
 
             <div class="form-group">
               <label for="end_date">End Date (Optional Expiration)</label>
               <input type="date" id="end_date" name="end_date" class="form-control" 
                      value="<?= htmlspecialchars($announcement['end_date'] ?? '') ?>">
-              <span class="muted" style="font-size: 0.78rem;">Auto-hides after 11:59 PM on this date.</span>
+              <span class="muted field-hint">Auto-hides after 11:59 PM on this date.</span>
             </div>
 
             <div class="form-group full-width">
@@ -164,7 +164,7 @@ if (!$announcement) {
             </div>
           </div>
 
-          <div style="margin-top: 1.75rem;">
+          <div class="form-actions">
             <button type="submit" class="btn btn-primary">Save &amp; Update Site</button>
           </div>
         </div>