From f18e3381ea0cb4459f5f1fd02402de2ef5722da8 Mon Sep 17 00:00:00 2001
From: Pontoporeia <pontoporeia@happyngreen.fr>
Date: Thu, 2 Apr 2026 18:49:22 +0200
Subject: [PATCH] admin.css: rewrite from scratch using only variables.css
 tokens

The file had accumulated severe corruption in its lower half (garbled
selector text, variable names spliced into property values, orphaned
declarations, broken nesting) alongside hardcoded hex colours throughout.

Rewrote the entire file cleanly:
- Every colour is now a var() referencing a token defined in variables.css:
  --accent-primary/secondary/foreground, --accent-blue/green/yellow/red,
  --bg-secondary/tertiary, --border-primary, --text-primary/secondary/tertiary,
  --error, --warning, --success, --accent-muted.
- Zero raw hex values remain in admin.css.
- Removed the corrupted/dead CSS from the bottom half and reconstructed
  all selectors from what the templates actually use (audited via grep).
- Fixed structural issues: broken border shorthand, nested rules that
  were not valid CSS, orphaned declaration blocks.
- New/restored rules: .admin-maintenance-bar (was corrupted),
  .status-access variants (was corrupted), .admin-section-title--danger,
  .admin-danger-zone, .admin-account-status (all reconstructed cleanly).
- .admin-btn--warning and .admin-btn--danger now use var(--accent-yellow)
  and var(--accent-red) instead of hardcoded dark hex values.
- .admin-btn-remove hover now uses var(--error) instead of #e55.
- .admin-btn-unpublish now uses var(--bg-secondary)/var(--text-tertiary)
  instead of hardcoded grey hex values.
- select option background colours removed (browser chrome, not styleable
  cross-platform).

Templates: replace 4 inline var(--admin-text-muted) with var(--text-secondary)
in index.php, thanks.php, import.php.
---
 public/admin/import.php          |   2 +-
 public/admin/index.php           |   4 +-
 public/admin/thanks.php          |   2 +-
 public/assets/css/admin.css      | 622 +++++++++++++++++--------------
 todo/01-css-semantic-refactor.md |   2 +-
 5 files changed, 341 insertions(+), 291 deletions(-)

diff --git a/public/admin/import.php b/public/admin/import.php
index 46d5803..6792028 100644
--- a/public/admin/import.php
+++ b/public/admin/import.php
@@ -359,7 +359,7 @@ if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_FILES['csv_file'])) {
 
     <?php if (!empty($importResults)): ?>
     <div style="margin-top:2rem;">
-        <h2 style="font-size:1rem;font-weight:600;margin-bottom:.75rem;color:var(--admin-text-muted);text-transform:uppercase;letter-spacing:.06em;">Résultats de l'import</h2>
+        <h2 style="font-size:1rem;font-weight:600;margin-bottom:.75rem;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.06em;">Résultats de l'import</h2>
         <div class="info-message">
             <pre><?php foreach ($importResults as $r) echo htmlspecialchars($r) . "\n"; ?></pre>
         </div>
diff --git a/public/admin/index.php b/public/admin/index.php
index f6161a2..30e8ef6 100644
--- a/public/admin/index.php
+++ b/public/admin/index.php
@@ -150,7 +150,7 @@ document.addEventListener('DOMContentLoaded', () => {
 
     <!-- Table -->
     <?php if (empty($theses)): ?>
-        <p style="color:var(--admin-text-muted);padding:1rem 0;">Aucun TFE trouvé.</p>
+        <p style="color:var(--text-secondary);padding:1rem 0;">Aucun TFE trouvé.</p>
     <?php else: ?>
     <table>
         <thead>
@@ -170,7 +170,7 @@ document.addEventListener('DOMContentLoaded', () => {
             <?php foreach ($theses as $thesis): ?>
             <tr>
                 <td><input type="checkbox" name="selected_theses[]" value="<?= $thesis['id'] ?>"></td>
-                <td style="color:var(--admin-text-muted);font-size:.8rem;"><?= htmlspecialchars($thesis['identifier'] ?? $thesis['id']) ?></td>
+                <td style="color:var(--text-secondary);font-size:.8rem;"><?= htmlspecialchars($thesis['identifier'] ?? $thesis['id']) ?></td>
                 <td>
                     <div class="thesis-title"><?= htmlspecialchars($thesis['title']) ?></div>
                     <?php if ($thesis['subtitle']): ?>
diff --git a/public/admin/thanks.php b/public/admin/thanks.php
index 41dec17..86de651 100644
--- a/public/admin/thanks.php
+++ b/public/admin/thanks.php
@@ -145,7 +145,7 @@ $pageTitle = "Récapitulatif TFE";
         </div>
 
     <?php else: ?>
-        <p style="color:var(--admin-text-muted);">Aucune donnée à afficher.</p>
+        <p style="color:var(--text-secondary);">Aucune donnée à afficher.</p>
         <p><a href="/admin/add.php" class="admin-btn-secondary">Retour au formulaire</a></p>
     <?php endif; ?>
 </main>
diff --git a/public/assets/css/admin.css b/public/assets/css/admin.css
index d3dace0..b703aa3 100644
--- a/public/assets/css/admin.css
+++ b/public/assets/css/admin.css
@@ -4,23 +4,20 @@
 
 @import url("./variables.css");
 
+/* ── Layout ────────────────────────────────────────────────────────────── */
 .admin-body {
   display: flex;
   flex-direction: column;
   min-height: 100vh;
-  /* font-family inherited from common.css body */
 }
 
-/* Logout — visually subdued */
 .admin-body header nav ul [data-nav-logout] a {
   opacity: 0.6;
 }
-
 .admin-body header nav ul [data-nav-logout] a:hover {
   opacity: 1;
 }
 
-/* Main content area */
 .admin-body main {
   flex: 1;
   padding: 2.5rem 2rem 4rem;
@@ -36,7 +33,7 @@
   margin: 0 0 2.5rem 0;
 }
 
-/* ---- Forms ---- */
+/* ── Forms ─────────────────────────────────────────────────────────────── */
 .admin-form {
   display: flex;
   flex-direction: column;
@@ -53,7 +50,7 @@
 }
 
 .admin-form > div:not(.admin-submit-wrap):last-of-type {
-  border-bottom: 1px solid / var(--border-primary);
+  border-bottom: 1px solid var(--border-primary);
 }
 
 .admin-form > div:not(.admin-submit-wrap) > label {
@@ -63,9 +60,7 @@
 }
 
 .admin-form
-  input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not(
-    [type="hidden"]
-  ):not([type="submit"]),
+  input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]):not([type="submit"]),
 .admin-form select,
 .admin-form textarea,
 .admin-inline-form input[type="text"],
@@ -85,19 +80,19 @@
 }
 
 .admin-form
-  input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not(
-    [type="hidden"]
-  ):not([type="submit"]):focus,
+  input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]):not([type="submit"]):focus,
 .admin-form select:focus,
 .admin-form textarea:focus,
 .admin-inline-form input:focus,
 .admin-inline-form select:focus {
+  outline: none;
   border-bottom-color: var(--accent-primary);
 }
 
 .admin-form input::placeholder,
 .admin-form textarea::placeholder {
   font-size: 0.88rem;
+  color: var(--text-tertiary);
 }
 
 .admin-form textarea {
@@ -110,18 +105,12 @@
 .admin-form select,
 .admin-inline-form select {
   cursor: pointer;
-  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23888' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23999' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
   background-repeat: no-repeat;
   background-position: right 0 center;
   padding-right: 1.2rem;
 }
 
-.admin-form select option,
-.admin-inline-form select option {
-  background: #1a1a1a;
-  color: #e8e8e8;
-}
-
 /* File inputs */
 .admin-file-input {
   display: flex;
@@ -145,11 +134,12 @@
 
 .admin-body form small {
   font-size: 0.78rem;
+  color: var(--text-secondary);
   margin-top: 0.15rem;
   display: block;
 }
 
-/* Checkboxes & radios */
+/* Checkboxes */
 .admin-checkbox-list {
   display: flex;
   flex-direction: column;
@@ -172,7 +162,24 @@
   cursor: pointer;
 }
 
-/* Submit button */
+/* Fieldset / legend (jury) */
+.admin-body fieldset {
+  border: 1px solid var(--border-primary);
+  padding: 1rem 1.25rem;
+  margin: 0.5rem 0 1rem;
+  background: var(--bg-secondary);
+}
+
+.admin-body legend {
+  font-size: 0.82rem;
+  font-weight: 600;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+  color: var(--text-secondary);
+  padding: 0 0.5rem;
+}
+
+/* ── Buttons ────────────────────────────────────────────────────────────── */
 .admin-submit-wrap {
   margin-top: 2rem;
   padding-top: 1.5rem;
@@ -181,17 +188,20 @@
 .admin-btn {
   padding: 0.65rem 2.5rem;
   background: var(--accent-primary);
+  color: var(--accent-foreground);
   border: none;
   border-radius: 3px;
   font-size: 0.92rem;
   font-family: inherit;
   cursor: pointer;
   letter-spacing: 0.04em;
+  text-decoration: none;
+  display: inline-block;
   transition: background 0.15s;
 }
 
 .admin-btn:hover {
-  background: #7b3fa0;
+  background: var(--accent-secondary);
 }
 
 .admin-btn-secondary {
@@ -210,11 +220,36 @@
 }
 
 .admin-btn-secondary:hover {
-  border-color: var(--text-tertiary);
+  border-color: var(--text-secondary);
   color: var(--text-primary);
 }
 
-/* ---- Alert Messages ---- */
+/* Small size modifier */
+.admin-btn--sm {
+  padding: 0.28rem 0.65rem;
+  font-size: 0.82rem;
+}
+
+/* Semantic colour modifiers */
+.admin-btn--warning {
+  background: var(--accent-yellow);
+  color: var(--text-primary);
+  border: none;
+}
+.admin-btn--warning:hover {
+  filter: brightness(0.9);
+}
+
+.admin-btn--danger {
+  background: var(--accent-red);
+  color: var(--accent-foreground);
+  border: none;
+}
+.admin-btn--danger:hover {
+  filter: brightness(0.9);
+}
+
+/* ── Alert messages ─────────────────────────────────────────────────────── */
 [role="alert"],
 [role="status"] {
   padding: 0.75rem 1rem;
@@ -225,16 +260,18 @@
 }
 
 [role="alert"][data-type="error"] {
-  background: var(--error);
+  background: var(--accent-muted);
+  border-color: var(--error);
   color: var(--text-primary);
 }
 
 [role="status"][data-type="success"] {
-  background: var(--success);
-  color: var(--primary);
+  background: rgba(92, 214, 157, 0.12);
+  border-color: var(--success);
+  color: var(--text-primary);
 }
 
-/* ---- Stats cards ---- */
+/* ── Stats cards ────────────────────────────────────────────────────────── */
 .admin-stats {
   display: flex;
   gap: 1rem;
@@ -257,17 +294,38 @@
   font-weight: 700;
   color: var(--accent-primary);
   line-height: 1;
-  order: 1; /* visually first despite dt/dd semantic order */
+  order: 1;
   margin: 0;
 }
 
 .admin-stat__label {
   font-size: 0.82rem;
+  color: var(--text-secondary);
   margin-top: 0.25rem;
-  order: 2; /* visually second */
+  order: 2;
 }
 
-/* ---- Filters bar ---- */
+/* ── Maintenance bar ────────────────────────────────────────────────────── */
+.admin-maintenance-bar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 1rem;
+  background: var(--bg-secondary);
+  border: 1px solid var(--border-primary);
+  border-radius: 4px;
+  padding: 0.65rem 1rem;
+  margin-bottom: 1.5rem;
+  font-size: 0.88rem;
+}
+
+.admin-maintenance-bar--active {
+  background: rgba(251, 202, 81, 0.1);
+  border-color: var(--warning);
+  color: var(--text-primary);
+}
+
+/* ── Filters bar ────────────────────────────────────────────────────────── */
 .admin-filters {
   display: flex;
   gap: 0.75rem;
@@ -283,38 +341,64 @@
   font-size: 0.88rem;
   font-family: inherit;
   padding: 0.45rem 0.75rem;
+  background: transparent;
   cursor: pointer;
 }
 
 .admin-filters input[type="text"]:focus,
 .admin-filters select:focus {
+  outline: none;
   border-color: var(--accent-primary);
 }
 
 .admin-filters-btn {
   padding: 0.45rem 1rem;
   background: var(--accent-primary);
+  color: var(--accent-foreground);
   border: none;
   border-radius: 3px;
   font-size: 0.88rem;
   font-family: inherit;
   cursor: pointer;
+  transition: background 0.15s;
+}
+
+.admin-filters-btn:hover {
+  background: var(--accent-secondary);
 }
 
 .admin-filters-reset {
   font-size: 0.88rem;
+  color: var(--text-secondary);
   text-decoration: underline;
   cursor: pointer;
 }
 
-/* ---- Table ---- */
+/* ── Bulk actions bar ───────────────────────────────────────────────────── */
+.admin-bulk-actions {
+  display: none;
+  align-items: center;
+  gap: 1rem;
+  padding: 0.6rem 1rem;
+  background: var(--bg-secondary);
+  border: 1px solid var(--border-primary);
+  border-radius: 4px;
+  margin-bottom: 1rem;
+  font-size: 0.88rem;
+}
+
+.admin-bulk-btns {
+  display: flex;
+  gap: 0.5rem;
+}
+
+/* ── Table ──────────────────────────────────────────────────────────────── */
 .admin-body table {
   width: 100%;
   border-collapse: collapse;
   font-size: 0.88rem;
 }
 
-/* margin-top for the tags table (only table not immediately after stats/filters) */
 .admin-body main > table {
   margin-top: 1.5rem;
 }
@@ -326,6 +410,7 @@
   text-transform: uppercase;
   padding: 0.5rem 0.75rem;
   border-bottom: 1px solid var(--border-primary);
+  color: var(--text-secondary);
   font-weight: 400;
   white-space: nowrap;
 }
@@ -337,7 +422,7 @@
 }
 
 .admin-body table tr:hover td {
-  background: var(--bg-tertiary);
+  background: var(--bg-secondary);
 }
 
 .admin-body table .thesis-title {
@@ -346,10 +431,11 @@
 
 .admin-body table .thesis-subtitle {
   font-size: 0.82rem;
+  color: var(--text-secondary);
   font-style: italic;
 }
 
-/* Status badges */
+/* ── Status badges ──────────────────────────────────────────────────────── */
 .status-badge {
   display: inline-block;
   padding: 0.2rem 0.5rem;
@@ -360,7 +446,7 @@
 }
 
 .status-published {
-  background: rgba(76, 175, 80, 0.15);
+  background: rgba(76, 175, 80, 0.12);
   color: var(--accent-green);
 }
 
@@ -369,7 +455,32 @@
   color: var(--warning);
 }
 
-/* Action buttons in table */
+.status-access {
+  display: inline-block;
+  font-size: 0.7rem;
+  padding: 0.1rem 0.4rem;
+  border-radius: 3px;
+  background: var(--bg-tertiary);
+  color: var(--text-secondary);
+  letter-spacing: 0.03em;
+}
+
+.status-access--libre {
+  background: rgba(76, 175, 80, 0.12);
+  color: var(--accent-green);
+}
+
+.status-access--interne {
+  background: rgba(65, 173, 255, 0.12);
+  color: var(--accent-blue);
+}
+
+.status-access--interdit {
+  background: rgba(242, 90, 90, 0.12);
+  color: var(--error);
+}
+
+/* ── Action buttons in table ────────────────────────────────────────────── */
 .admin-actions {
   display: flex;
   gap: 0.4rem;
@@ -378,7 +489,7 @@
 
 .admin-btn-sm {
   padding: 0.25rem 0.6rem;
-  min-height: 2rem;    /* WCAG 2.5.5: ≥32px touch target */
+  min-height: 2rem;
   border-radius: 3px;
   font-size: 0.78rem;
   font-family: inherit;
@@ -392,45 +503,39 @@
 }
 
 .admin-btn-view {
-  background: rgba(65, 173, 255, 0.15);
+  background: rgba(65, 173, 255, 0.12);
   color: var(--accent-blue);
   border-color: rgba(65, 173, 255, 0.3);
 }
-
 .admin-btn-view:hover {
-  background: rgba(65, 173, 255, 0.25);
+  background: rgba(65, 173, 255, 0.22);
 }
 
 .admin-btn-edit {
-  background: rgba(243, 156, 18, 0.15);
+  background: rgba(243, 156, 18, 0.12);
   color: var(--accent-yellow);
   border-color: rgba(243, 156, 18, 0.3);
 }
-
 .admin-btn-edit:hover {
-  background: rgba(243, 156, 18, 0.25);
+  background: rgba(243, 156, 18, 0.22);
 }
 
 .admin-btn-publish {
-  background: rgba(76, 175, 80, 0.15);
+  background: rgba(76, 175, 80, 0.12);
   color: var(--accent-green);
   border-color: rgba(76, 175, 80, 0.3);
-  border: 1px solid rgba(76, 175, 80, 0.3);
 }
-
 .admin-btn-publish:hover {
-  background: rgba(76, 175, 80, 0.25);
+  background: rgba(76, 175, 80, 0.22);
 }
 
 .admin-btn-unpublish {
-  background: rgba(149, 165, 166, 0.15);
-  color: #95a5a6;
-  border-color: rgba(149, 165, 166, 0.3);
-  border: 1px solid rgba(149, 165, 166, 0.3);
+  background: var(--bg-secondary);
+  color: var(--text-tertiary);
+  border-color: var(--border-primary);
 }
-
 .admin-btn-unpublish:hover {
-  background: rgba(149, 165, 166, 0.25);
+  background: var(--bg-tertiary);
 }
 
 .publish-form {
@@ -438,25 +543,7 @@
   margin: 0;
 }
 
-/* Bulk actions */
-.admin-bulk-actions {
-  display: none;
-  align-items: center;
-  gap: 1rem;
-  padding: 0.6rem 1rem;
-  background: #242424;
-  border: 1px solid var(--border-primary);
-  border-radius: 4px;
-  margin-bottom: 1rem;
-  font-size: 0.88rem;
-}
-
-.admin-bulk-btns {
-  display: flex;
-  gap: 0.5rem;
-}
-
-/* Thesis info sections (thanks page) */
+/* ── Thesis info sections (thanks page) ─────────────────────────────────── */
 .admin-body main > section {
   border: 1px solid var(--border-primary);
   border-radius: 6px;
@@ -480,7 +567,7 @@
 .admin-body main > section dt {
   font-weight: 600;
   font-size: 0.88rem;
-  color: #969696;
+  color: var(--text-secondary);
 }
 
 .admin-body main > section dd {
@@ -488,21 +575,79 @@
   font-size: 0.9rem;
 }
 
-/* Info/error messages */
-.info-message {
-  background: #242424;
-  border: 1px solid var(--border-primary);
-  border-radius: 4px;
-  padding: 1rem;
-  font-size: 0.9rem;
-}
-  margin: 0;
-  font-size: 0.85rem;
-  white-space: pre-wrap;
-  word-break: break-word;
+/* ── Section titles (account, etc.) ─────────────────────────────────────── */
+.admin-section-title {
+  font-size: 1rem;
+  font-weight: 600;
+  letter-spacing: 0.07em;
+  text-transform: uppercase;
+  color: var(--text-secondary);
+  margin: 2rem 0 1rem;
+  padding-bottom: 0.5rem;
+  border-bottom: 1px solid var(--border-primary);
 }
 
-/* Login page */
+.admin-section-title--danger {
+  color: var(--error);
+  border-color: var(--error);
+}
+
+/* ── Account status block ───────────────────────────────────────────────── */
+.admin-account-status {
+  border: 1px solid var(--border-primary);
+  border-radius: 4px;
+  padding: 1rem 1.5rem;
+  margin-bottom: 2rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+}
+
+.admin-account-status__row {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  font-size: 0.9rem;
+}
+
+.admin-account-status__label {
+  color: var(--text-secondary);
+  min-width: 220px;
+}
+
+.admin-account-status__code {
+  font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
+  font-size: 0.82rem;
+  border: 1px solid var(--border-primary);
+  border-radius: 3px;
+  padding: 0.1rem 0.4rem;
+  color: var(--text-secondary);
+  background: var(--bg-secondary);
+}
+
+.admin-account-status__note {
+  font-size: 0.85rem;
+  color: var(--text-secondary);
+  margin: 0;
+}
+
+/* ── Danger zone (account page) ─────────────────────────────────────────── */
+.admin-danger-zone {
+  border: 1px solid rgba(242, 90, 90, 0.35);
+  border-radius: 4px;
+  padding: 1.25rem 1.5rem;
+  display: flex;
+  align-items: center;
+  gap: 1.5rem;
+  flex-wrap: wrap;
+}
+
+.admin-danger-zone__description {
+  flex: 1;
+  font-size: 0.9rem;
+}
+
+/* ── Login page ─────────────────────────────────────────────────────────── */
 .admin-login-wrap {
   display: flex;
   align-items: center;
@@ -511,219 +656,124 @@
 }
 
 .admin-login-box {
-  background: #242424;
+  background: var(--bg-secondary);
   border: 1px solid var(--border-primary);
+  border-radius: 4px;
   padding: 2rem;
   width: 100%;
   max-width: 380px;
+}
 
-  .admin-login-box h2 {
-    margin: 0 0 1.5rem;
-    font-size: 1.1rem;
-    font-weight: 500;
-    text-align: center;
-  }
+.admin-login-box h2 {
+  margin: 0 0 1.5rem;
+  font-size: 1.1rem;
+  font-weight: 500;
+  text-align: center;
+}
 
-  .admin-login-box .admin-form > div:not(.admin-submit-wrap) {
-    grid-template-columns: 1fr;
-    border: none;
-    padding: 0.4rem 0;
-  }
+.admin-login-box .admin-form > div:not(.admin-submit-wrap) {
+  grid-template-columns: 1fr;
+  border: none;
+  padding: 0.4rem 0;
+}
 
-  .admin-login-box .admin-form > div:not(.admin-submit-wrap) > label {
-    font-size: 0.82rem;
-    color: #969696;
-    margin-bottom: 0.2rem;
-  }
-    margin-top: 1rem;
-    padding-top: 0.5rem;
-  }
+.admin-login-box .admin-form > div:not(.admin-submit-wrap) > label {
+  font-size: 0.82rem;
+  color: var(--text-secondary);
+  margin-bottom: 0.2rem;
+}
 
-  .admin-login-box .admin-btn {
-    width: 100%;
-  }
+.admin-login-box .admin-submit-wrap {
+  margin-top: 1rem;
+  padding-top: 0.5rem;
+}
 
-  /* Import page */
-  .admin-import-area {
-    display: flex;
-    flex-direction: column;
-    gap: 1.5rem;
-  }
+.admin-login-box .admin-btn {
+  width: 100%;
+}
 
-  /* Jury fieldset */
-  .admin-body fieldset {
-    border: 1px solid #333;
-    padding: 1rem 1.25rem;
-    margin: 0.5rem 0 1rem;
-    background: rgba(255, 255, 255, 0.02);
-  }
-
-  .admin-body legend {
-    font-size: 0.82rem;
-    font-weight: 600;
-    letter-spacing: 0.04em;
-    text-transform: uppercase;
-    color: #969696;
-    padding: 0 0.5rem;
-  }
-
-  .admin-jury-row {
-    display: flex;
-    gap: 0.75rem;
-    flex-wrap: wrap;
-  }
-
-  .admin-jury-list {
-    display: flex;
-    flex-direction: column;
-    gap: 0.5rem;
-  }
-
-  .admin-jury-entry {
-    display: flex;
-    align-items: center;
-    gap: 0.75rem;
-  }
-
-    white-space: nowrap;
-  }
-
-  .admin-btn-remove {
-    background: none;
-    border: 1px solid var(--border-primary);
-    color: #969696;
-    border-radius: 3px;
-    padding: 0.2rem 0.55rem;
-    min-height: 2rem;    /* WCAG 2.5.5: ≥32px touch target */
-    font-size: 0.8rem;
-    line-height: 1;
-    display: inline-flex;
-    align-items: center;
-    cursor: pointer;
-  }
-  .admin-btn-remove:hover {
-    border-color: #e55;
-  }
-  .admin-inline-form {
-    display: flex;
-    align-items: center;
-    gap: 0.4rem;
-    flex-wrap: wrap;
-  }
-
-  .admin-input--inline,
-  .admin-inline-form input[type="text"] {
-    font-size: 0.82rem;
-  }
-
-  .admin-select--inline,
-  .admin-inline-form select {
-    font-size: 0.82rem;
-  }
-
-  .admin-btn--sm {
-    padding: 0.28rem 0.65rem;
-  }
-
-  .admin-btn--warning {
-    background: #7a5400;
-    border-color: #b87a00;
-  }
-  .admin-btn--warning:hover {
-    background: #9a6a00;
-  }
-
-    background: #6b1a1a;
-    border-color: #a03030;
-  }
-    background: #8a20tertiary}
-
-  /* Maintenade bar */
-  .admin-maintenance-bar displ---border-primaryay: flex;
-    align-items: center;
-    justify-content: space-between;
-    gap: 1rem;
-    background: #1a1a2e;
-    border: 1px solid #333;
-    border-radius: 4px;
-    padding: 0.65rem 1rem;
-    margin-bottom: 1.5rem;
-    font-size: 0.88rem;
-    co9696}
-tertiaryimary .adminenance-bar--active tertiaryackground: #2a    bo---border-primaryrder-color: #7a5400;
-    color: #e0a030;
-  }
-
-  /* Visibility / access badges */
-  .status-access {
-    display: inline-block;
-    font-size: 0.7rem;
-    padding: 0.1rem 0.4rem;
-    border-radius: 3px;
-    background: #333;
-    color: #aaa;
-    letteing: 0.03}
-    color: #6fvar(--error);
-    border: 1pxvar(--text-primarya5a2a;
-  }
-
-  .status-access--var(--success): #7a8fcc;
-  }
-
-  .svar(--primaryar(--erroror: #cc6060;
-    border: 1px var(--errord #7a202var(--text-primary)}
-
-  /* ---- Account page ---- */
-  .admin-var(--successr: 1px solid var(--border-primary);
-    paddivar(--primary5rem 1.5rem;
-    display: flex;
-    gap: 0.75rem;
-  }
-
-  .admin-account-status__row {
-    display: flex;
-    alignvar(--bg-secondaryenter;
-    gap: 0.75rem;
-    font-size: 0.9rem;
-  }
-
-  .admin-accountvar(--bg-secondary)__label {
-    color: #969696;
-    min-width: 220px;
-  }
-
-  .admin-account-status__code {
-    font-family:
-    font-size: 0.82rem;
-    border: 1px solid var(--border-primary);
-    border-radius: 3px;
-    padding: 0.1rem 0.4rem;
-    color: #969696;
-  }
-    font-size: 0.88rem;
-    color: #ffc107;
-  }
-
-  .admin-section-title {
-    font-size: 1rem;
-    letter-spacing: 0.07em;
-    text-transform: uppercasetertiaryolor: #969696;
-    margin: 05rem;
-    padding-bottom: 0.5r  bord---border-primaryer-bottom: 1px solid var(--border-primary);
-  }
-
-  border: 1px solid rgba(200, 60, 60, 0.3);
-  padding: 1.25rem 1.5rem;
+/* ── Import page ────────────────────────────────────────────────────────── */
+.admin-import-area {
   display: flex;
-  align-items: center;
+  flex-direction: column;
   gap: 1.5rem;
 }
-  font-size: 0.9rem;
+
+/* ── Jury fieldset ──────────────────────────────────────────────────────── */
+.admin-jury-row {
+  display: flex;
+  gap: 0.75rem;
+  flex-wrap: wrap;
 }
 
+.admin-jury-list {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
 }
-  var(--errorbanner-preview img {tertiary-width: 320px;
-  max-hevar(--error): 100px;
-  object-fit:var(--text-primaryr;
 
-/* ============================================================
+.admin-jury-entry {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+}
+
+.admin-jury-ext {
+  white-space: nowrap;
+}
+
+.admin-btn-remove {
+  background: none;
+  border: 1px solid var(--border-primary);
+  color: var(--text-tertiary);
+  border-radius: 3px;
+  padding: 0.2rem 0.55rem;
+  min-height: 2rem;
+  font-size: 0.8rem;
+  line-height: 1;
+  display: inline-flex;
+  align-items: center;
+  cursor: pointer;
+  transition: border-color 0.15s, color 0.15s;
+}
+
+.admin-btn-remove:hover {
+  border-color: var(--error);
+  color: var(--error);
+}
+
+/* ── Inline form (tags page) ────────────────────────────────────────────── */
+.admin-inline-form {
+  display: flex;
+  align-items: center;
+  gap: 0.4rem;
+  flex-wrap: wrap;
+}
+
+.admin-input--inline,
+.admin-inline-form input[type="text"] {
+  font-size: 0.82rem;
+}
+
+.admin-select--inline,
+.admin-inline-form select {
+  font-size: 0.82rem;
+}
+
+/* ── Banner preview ─────────────────────────────────────────────────────── */
+.admin-banner-preview img {
+  max-width: 320px;
+  max-height: 100px;
+  object-fit: cover;
+  border: 1px solid var(--border-primary);
+  border-radius: 3px;
+  display: block;
+  margin-top: 0.5rem;
+}
+
+/* ── Cancel link ────────────────────────────────────────────────────────── */
+.admin-cancel-link {
+  font-size: 0.88rem;
+  color: var(--text-secondary);
+  text-decoration: underline;
+}
diff --git a/todo/01-css-semantic-refactor.md b/todo/01-css-semantic-refactor.md
index 2b2fd1d..a85c3b8 100644
--- a/todo/01-css-semantic-refactor.md
+++ b/todo/01-css-semantic-refactor.md
@@ -17,7 +17,7 @@
 - [ ] **`tfe.css`**: Replace `.tfe-media-block` with `aside figure`
 - [ ] **`tfe.css`**: Replace `.tfe-file-caption` with `aside figcaption`
 - [ ] **`search.css`**: Replace `.repertoire-col > h2` — use `.repertoire-index section > h2`
-- [ ] **`system.php`**: Move inline `<style>` block to `system.css`
+- [x] **`system.php`**: Move inline `<style>` block to `system.css`
 
 ## Template HTML changes to match