From b55c4f294f6e5552d83c0cb7929052297f9606c0 Mon Sep 17 00:00:00 2001
From: David Dyer <social_davidbdyer@icloud.com>
Date: Sat, 29 Aug 2026 22:01:55 -0400
Subject: [PATCH] Consolidate admin styles into styles.css and remove inline
 style tags

- Move all admin dashboard and login rules into styles.css
- Remove embedded <style> blocks from admin/login.php and admin/index.php
- Clean up redundant preview action button
---
 admin/index.php | 185 ----------------------------------
 admin/login.php |  96 +-----------------
 styles.css      | 258 ++++++++++++++++++++++++++++++++++++++++++++++++
 3 files changed, 259 insertions(+), 280 deletions(-)

diff --git a/admin/index.php b/admin/index.php
index 84a369d..63de448 100644
--- a/admin/index.php
+++ b/admin/index.php
@@ -57,191 +57,6 @@ if (!$announcement) {
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <link href="https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,600;1,9..144,400&family=Karla:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap" rel="stylesheet">
   <link rel="stylesheet" href="../styles.css">
-  <style>
-    .admin-nav {
-      background: var(--ground-2);
-      border-bottom: 1px solid var(--rule);
-      padding: 0.85rem 0;
-    }
-    .admin-nav-inner {
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-    }
-    .admin-brand {
-      display: flex;
-      align-items: center;
-      gap: 0.75rem;
-      text-decoration: none;
-      font-family: 'Fraunces', serif;
-      font-size: 1.15rem;
-      color: var(--ink);
-    }
-    .admin-user {
-      display: flex;
-      align-items: center;
-      gap: 1.25rem;
-      font-family: 'IBM Plex Mono', monospace;
-      font-size: 0.82rem;
-      color: var(--ink-muted);
-    }
-    .admin-user a {
-      color: var(--gold-bright);
-      text-decoration: none;
-    }
-    .admin-user a:hover {
-      text-decoration: underline;
-    }
-
-    .dashboard-layout {
-      padding-block: 2.5rem 4rem;
-    }
-    .dash-header {
-      margin-bottom: 2rem;
-    }
-    .dash-header h1 {
-      font-size: 2rem;
-      color: var(--ink);
-    }
-
-    .panel {
-      background: var(--surface);
-      border: 1px solid var(--rule);
-      border-radius: 0.25rem;
-      padding: 2rem;
-      margin-bottom: 2rem;
-    }
-    .panel h2 {
-      font-size: 1.35rem;
-      color: var(--gold-bright);
-      margin-bottom: 1.25rem;
-      display: flex;
-      align-items: center;
-      gap: 0.6rem;
-    }
-
-    .form-grid {
-      display: grid;
-      grid-template-columns: 1fr 1fr;
-      gap: 1.5rem;
-    }
-    @media (max-width: 47.5em) {
-      .form-grid { grid-template-columns: 1fr; }
-    }
-
-    .form-group {
-      margin-bottom: 1.25rem;
-    }
-    .form-group.full-width {
-      grid-column: 1 / -1;
-    }
-    .form-group label {
-      display: block;
-      font-family: 'IBM Plex Mono', monospace;
-      font-size: 0.75rem;
-      letter-spacing: 0.08em;
-      text-transform: uppercase;
-      color: var(--gold);
-      margin-bottom: 0.45rem;
-    }
-    .form-control {
-      width: 100%;
-      background: var(--ground-2);
-      border: 1px solid var(--rule);
-      color: var(--ink);
-      font-family: 'Karla', sans-serif;
-      font-size: 0.95rem;
-      padding: 0.7rem 0.85rem;
-      border-radius: 0.125rem;
-      box-sizing: border-box;
-      outline: none;
-      transition: border-color .15s ease;
-    }
-    .form-control:focus {
-      border-color: var(--gold-bright);
-    }
-    textarea.form-control {
-      resize: vertical;
-      min-height: 5.5rem;
-      line-height: 1.5;
-    }
-
-    .checkbox-group {
-      display: flex;
-      flex-direction: column;
-      gap: 0.75rem;
-      margin-top: 0.5rem;
-    }
-    .checkbox-label {
-      display: flex;
-      align-items: center;
-      gap: 0.6rem;
-      font-size: 0.92rem;
-      color: var(--ink);
-      cursor: pointer;
-    }
-    .checkbox-label input[type="checkbox"] {
-      width: 1.15rem;
-      height: 1.15rem;
-      accent-color: var(--gold);
-      cursor: pointer;
-    }
-
-    .status-badge {
-      display: inline-flex;
-      align-items: center;
-      gap: 0.4rem;
-      font-family: 'IBM Plex Mono', monospace;
-      font-size: 0.72rem;
-      letter-spacing: 0.08em;
-      text-transform: uppercase;
-      padding: 0.25rem 0.6rem;
-      border-radius: 0.125rem;
-    }
-    .status-badge.active {
-      background: rgba(51, 80, 63, 0.4);
-      border: 1px solid var(--green);
-      color: #9fe2bf;
-    }
-    .status-badge.inactive {
-      background: rgba(138, 115, 74, 0.2);
-      border: 1px solid var(--rule);
-      color: var(--ink-muted);
-    }
-
-    .alert-success {
-      background: rgba(51, 80, 63, 0.25);
-      border: 1px solid var(--green);
-      color: #bbf7d0;
-      padding: 0.9rem 1.25rem;
-      border-radius: 0.125rem;
-      margin-bottom: 1.5rem;
-    }
-    .alert-error {
-      background: rgba(180, 50, 40, 0.15);
-      border: 1px solid rgba(220, 80, 60, 0.4);
-      color: #ff9d9d;
-      padding: 0.9rem 1.25rem;
-      border-radius: 0.125rem;
-      margin-bottom: 1.5rem;
-    }
-
-    .preview-box {
-      margin-top: 1.5rem;
-      background: var(--ground-2);
-      border: 1px dashed var(--rule);
-      padding: 1.5rem;
-      border-radius: 0.25rem;
-    }
-    .preview-box h3 {
-      font-size: 0.9rem;
-      font-family: 'IBM Plex Mono', monospace;
-      color: var(--ink-muted);
-      margin-bottom: 1rem;
-      text-transform: uppercase;
-      letter-spacing: 0.1em;
-    }
-  </style>
 </head>
 <body>
 
diff --git a/admin/login.php b/admin/login.php
index f36619e..28d9612 100644
--- a/admin/login.php
+++ b/admin/login.php
@@ -25,102 +25,8 @@ if ($_SERVER['REQUEST_METHOD'] === 'POST') {
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <link href="https://fonts.googleapis.com/css2?family=Fraunces:wght@600&family=Karla:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap" rel="stylesheet">
   <link rel="stylesheet" href="../styles.css">
-  <style>
-    body {
-      min-height: 100vh;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      padding: 1.5rem;
-    }
-    .login-card {
-      background: var(--surface);
-      border: 1px solid var(--rule);
-      border-radius: 0.25rem;
-      padding: 2.5rem 2rem;
-      width: 100%;
-      max-width: 25rem;
-      box-shadow: 0 1rem 2.5rem rgba(0, 0, 0, 0.4);
-    }
-    .login-header {
-      text-align: center;
-      margin-bottom: 2rem;
-    }
-    .login-header img {
-      width: 2rem;
-      height: 2rem;
-      margin: 0 auto 0.75rem;
-    }
-    .login-header h1 {
-      font-size: 1.5rem;
-      color: var(--gold-bright);
-    }
-    .login-header p {
-      font-family: 'IBM Plex Mono', monospace;
-      font-size: 0.72rem;
-      letter-spacing: 0.15em;
-      text-transform: uppercase;
-      color: var(--ink-muted);
-      margin-top: 0.35rem;
-    }
-    .form-group {
-      margin-bottom: 1.25rem;
-    }
-    .form-group label {
-      display: block;
-      font-family: 'IBM Plex Mono', monospace;
-      font-size: 0.75rem;
-      letter-spacing: 0.08em;
-      text-transform: uppercase;
-      color: var(--gold);
-      margin-bottom: 0.4rem;
-    }
-    .form-input {
-      width: 100%;
-      background: var(--ground-2);
-      border: 1px solid var(--rule);
-      color: var(--ink);
-      font-family: 'Karla', sans-serif;
-      font-size: 0.95rem;
-      padding: 0.7rem 0.85rem;
-      border-radius: 0.125rem;
-      box-sizing: border-box;
-      outline: none;
-      transition: border-color .15s ease;
-    }
-    .form-input:focus {
-      border-color: var(--gold-bright);
-    }
-    .error-msg {
-      background: rgba(180, 50, 40, 0.15);
-      border: 1px solid rgba(220, 80, 60, 0.4);
-      color: #ff9d9d;
-      padding: 0.75rem 1rem;
-      font-size: 0.88rem;
-      border-radius: 0.125rem;
-      margin-bottom: 1.25rem;
-    }
-    .login-btn {
-      width: 100%;
-      justify-content: center;
-      margin-top: 0.5rem;
-      cursor: pointer;
-    }
-    .back-link {
-      display: block;
-      text-align: center;
-      margin-top: 1.5rem;
-      font-family: 'IBM Plex Mono', monospace;
-      font-size: 0.75rem;
-      color: var(--ink-muted);
-      text-decoration: none;
-    }
-    .back-link:hover {
-      color: var(--gold-bright);
-    }
-  </style>
 </head>
-<body>
+<body class="admin-login-body">
   <div class="login-card">
     <div class="login-header">
       <img src="../assets/knot.png" alt="" class="knot">
diff --git a/styles.css b/styles.css
index ca7600f..b0ff288 100644
--- a/styles.css
+++ b/styles.css
@@ -870,4 +870,262 @@
       transform: none;
       transition: none;
     }
+  }
+
+  /* ---------- admin / management styles ---------- */
+  .admin-login-body {
+    min-height: 100vh;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 1.5rem;
+  }
+
+  .login-card {
+    background: var(--surface);
+    border: 1px solid var(--rule);
+    border-radius: 0.25rem;
+    padding: 2.5rem 2rem;
+    width: 100%;
+    max-width: 25rem;
+    box-shadow: 0 1rem 2.5rem rgba(0, 0, 0, 0.4);
+  }
+
+  .login-header {
+    text-align: center;
+    margin-bottom: 2rem;
+  }
+
+  .login-header img {
+    width: 2rem;
+    height: 2rem;
+    margin: 0 auto 0.75rem;
+  }
+
+  .login-header h1 {
+    font-size: 1.5rem;
+    color: var(--gold-bright);
+  }
+
+  .login-header p {
+    font-family: 'IBM Plex Mono', monospace;
+    font-size: 0.72rem;
+    letter-spacing: 0.15em;
+    text-transform: uppercase;
+    color: var(--ink-muted);
+    margin-top: 0.35rem;
+  }
+
+  .form-group {
+    margin-bottom: 1.25rem;
+  }
+
+  .form-group.full-width {
+    grid-column: 1 / -1;
+  }
+
+  .form-group label {
+    display: block;
+    font-family: 'IBM Plex Mono', monospace;
+    font-size: 0.75rem;
+    letter-spacing: 0.08em;
+    text-transform: uppercase;
+    color: var(--gold);
+    margin-bottom: 0.45rem;
+  }
+
+  .form-control,
+  .form-input {
+    width: 100%;
+    background: var(--ground-2);
+    border: 1px solid var(--rule);
+    color: var(--ink);
+    font-family: 'Karla', sans-serif;
+    font-size: 0.95rem;
+    padding: 0.7rem 0.85rem;
+    border-radius: 0.125rem;
+    box-sizing: border-box;
+    outline: none;
+    transition: border-color .15s ease;
+  }
+
+  .form-control:focus,
+  .form-input:focus {
+    border-color: var(--gold-bright);
+  }
+
+  textarea.form-control {
+    resize: vertical;
+    min-height: 5.5rem;
+    line-height: 1.5;
+  }
+
+  .error-msg,
+  .alert-error {
+    background: rgba(180, 50, 40, 0.15);
+    border: 1px solid rgba(220, 80, 60, 0.4);
+    color: #ff9d9d;
+    padding: 0.85rem 1.1rem;
+    font-size: 0.88rem;
+    border-radius: 0.125rem;
+    margin-bottom: 1.25rem;
+  }
+
+  .alert-success {
+    background: rgba(51, 80, 63, 0.25);
+    border: 1px solid var(--green);
+    color: #bbf7d0;
+    padding: 0.9rem 1.25rem;
+    border-radius: 0.125rem;
+    margin-bottom: 1.5rem;
+  }
+
+  .login-btn {
+    width: 100%;
+    justify-content: center;
+    margin-top: 0.5rem;
+    cursor: pointer;
+  }
+
+  .back-link {
+    display: block;
+    text-align: center;
+    margin-top: 1.5rem;
+    font-family: 'IBM Plex Mono', monospace;
+    font-size: 0.75rem;
+    color: var(--ink-muted);
+    text-decoration: none;
+  }
+
+  .back-link:hover {
+    color: var(--gold-bright);
+  }
+
+  .admin-nav {
+    background: var(--ground-2);
+    border-bottom: 1px solid var(--rule);
+    padding: 0.85rem 0;
+  }
+
+  .admin-nav-inner {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+
+  .admin-brand {
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+    text-decoration: none;
+    font-family: 'Fraunces', serif;
+    font-size: 1.15rem;
+    color: var(--ink);
+  }
+
+  .admin-user {
+    display: flex;
+    align-items: center;
+    gap: 1.25rem;
+    font-family: 'IBM Plex Mono', monospace;
+    font-size: 0.82rem;
+    color: var(--ink-muted);
+  }
+
+  .admin-user a {
+    color: var(--gold-bright);
+    text-decoration: none;
+  }
+
+  .admin-user a:hover {
+    text-decoration: underline;
+  }
+
+  .dashboard-layout {
+    padding-block: 2.5rem 4rem;
+  }
+
+  .dash-header {
+    margin-bottom: 2rem;
+  }
+
+  .dash-header h1 {
+    font-size: 2rem;
+    color: var(--ink);
+  }
+
+  .panel {
+    background: var(--surface);
+    border: 1px solid var(--rule);
+    border-radius: 0.25rem;
+    padding: 2rem;
+    margin-bottom: 2rem;
+  }
+
+  .panel h2 {
+    font-size: 1.35rem;
+    color: var(--gold-bright);
+    margin-bottom: 1.25rem;
+    display: flex;
+    align-items: center;
+    gap: 0.6rem;
+  }
+
+  .form-grid {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 1.5rem;
+  }
+
+  @media (max-width: 47.5em) {
+    .form-grid {
+      grid-template-columns: 1fr;
+    }
+  }
+
+  .checkbox-group {
+    display: flex;
+    flex-direction: column;
+    gap: 0.75rem;
+    margin-top: 0.5rem;
+  }
+
+  .checkbox-label {
+    display: flex;
+    align-items: center;
+    gap: 0.6rem;
+    font-size: 0.92rem;
+    color: var(--ink);
+    cursor: pointer;
+  }
+
+  .checkbox-label input[type="checkbox"] {
+    width: 1.15rem;
+    height: 1.15rem;
+    accent-color: var(--gold);
+    cursor: pointer;
+  }
+
+  .status-badge {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.4rem;
+    font-family: 'IBM Plex Mono', monospace;
+    font-size: 0.72rem;
+    letter-spacing: 0.08em;
+    text-transform: uppercase;
+    padding: 0.25rem 0.6rem;
+    border-radius: 0.125rem;
+  }
+
+  .status-badge.active {
+    background: rgba(51, 80, 63, 0.4);
+    border: 1px solid var(--green);
+    color: #9fe2bf;
+  }
+
+  .status-badge.inactive {
+    background: rgba(138, 115, 74, 0.2);
+    border: 1px solid var(--rule);
+    color: var(--ink-muted);
   }
\ No newline at end of file