style(ui): add color-coded accents and tags to shortcut cards

Introduce per-card accent colors to enhance the visual hierarchy of the documentation shortcut cards. This includes adding left borders, colored eyebrows, and matching hover glows using CSS variables.

Additionally, this commit:
- Adds color-coded tags (GET, POST, JSON, etc.) for API links.
- Implements retro-themed styling for both the shortcut cards and tags to maintain consistency with the classic 16-color VGA palette.
- Applies the new accent classes to the API page template.

backend/static/css/16-retro.css

@@ -801,26 +801,81 @@
   margin-top: 0.5rem;
 }
 
-/* Section intros sit on the black desktop: gold kicker, white title, light
+/* Section intro becomes a real Win98 window: silver body, the <h2> a navy
-   subtitle, and readable inline code (not the default black-on-black). */
+   title bar with a fake close button, and the subtitle as black body text.
-:root[data-theme="retro"] .panel-head .kicker {
+   This fixes the default black-on-black inline code in headings/intros. */
-  color: #ffd966;
+:root[data-theme="retro"] .panel-head {
-  display: block;
+  max-width: none;
+  margin-bottom: 1.5rem;
+  padding: 1rem;
+  background: linear-gradient(to bottom, #ffffff, 4%, #c0c0c0 8%);
+  background-color: #c0c0c0;
+  border: 1px solid #000000;
+  box-shadow: var(--shadow);
 }
 
-:root[data-theme="retro"] .panel-head h2,
+/* The kicker is redundant once the title sits in a title bar; hide it so the
+   bar can hug the top edge (the markup puts the kicker before the h2). */
+:root[data-theme="retro"] .panel-head .kicker {
+  display: none;
+}
+
+:root[data-theme="retro"] .panel-head h2 {
+  position: relative;
+  margin: -1rem -1rem 1rem;
+  padding: 0.35rem 1.8rem 0.35rem 0.5rem;
+  background: linear-gradient(to right, #000078, 80%, #0f80cd);
+  color: #ffffff;
+  font-size: 1rem;
+  font-weight: 700;
+}
+
+/* Inline code in the title (e.g. "The warpbox CLI") reads white on the bar
+   instead of the default black. */
+:root[data-theme="retro"] .panel-head h2 code {
+  color: #ffffff;
+  background: transparent;
+  padding: 0;
+}
+
+:root[data-theme="retro"] .panel-head h2::after {
+  content: "\2715";
+  position: absolute;
+  top: 50%;
+  right: 0.4rem;
+  transform: translateY(-50%);
+  display: grid;
+  place-items: center;
+  width: 1.15rem;
+  height: 1rem;
+  background: #c0c0c0;
+  color: #000000;
+  font-size: 0.7rem;
+  font-weight: 700;
+  box-shadow: inset -1px -1px 0 #404040, inset 1px 1px 0 #ffffff, inset -2px -2px 0 #808080, inset 2px 2px 0 #dfdfdf;
+}
+
+:root[data-theme="retro"] .panel-head .lead {
+  color: #1a1a1a;
+  margin: 0;
+}
+
+/* Inline code in the subtitle: sunken white field, black text. */
+:root[data-theme="retro"] .panel-head .lead code {
+  color: #000000;
+  background: #ffffff;
+  border: 1px solid #808080;
+  padding: 0 0.2rem;
+}
+
+/* The lone "Quick links" label on the home desktop stays light. */
 :root[data-theme="retro"] .section-label {
   color: #ffffff;
 }
 
-:root[data-theme="retro"] .panel-head .lead {
+/* ShareX step lists are light-muted by default; black on the silver window. */
-  color: #cfd8ff;
+:root[data-theme="retro"] .docs-steps {
-}
+  color: #1a1a1a;
-
-:root[data-theme="retro"] .panel-head .lead code {
-  color: #ffffff;
-  background: #000078;
-  padding: 0 0.2rem;
 }
 
 /* Each card heading becomes a Win98 title bar with a fake close button.
@@ -903,6 +958,7 @@
 :root[data-theme="retro"] .shortcut-card:hover {
   transform: none;
   background-color: #d4d0c8;
+  box-shadow: inset -1px -1px 0 #404040, inset 1px 1px 0 #ffffff, inset -2px -2px 0 #808080, inset 2px 2px 0 #dfdfdf;
 }
 
 :root[data-theme="retro"] .shortcut-eyebrow {
@@ -927,6 +983,14 @@
   border: 1px solid #000000;
 }
 
+/* Colour-coded badges in the classic 16-colour VGA palette, with black
+   borders so they read like little Win98 toolbar icons. */
+:root[data-theme="retro"] .link-pill .tag-get { background: #0000aa; color: #ffffff; }
+:root[data-theme="retro"] .link-pill .tag-post { background: #008000; color: #ffffff; }
+:root[data-theme="retro"] .link-pill .tag-json { background: #aa00aa; color: #ffffff; }
+:root[data-theme="retro"] .link-pill .tag-key { background: #aa5500; color: #ffffff; }
+:root[data-theme="retro"] .link-pill .tag-help { background: #00aaaa; color: #000000; }
+
 /* CLI download cards = silver windows. */
 :root[data-theme="retro"] .download-card {
   background: linear-gradient(to bottom, #ffffff, 4%, #c0c0c0 8%);

backend/static/css/40-docs.css

@@ -172,23 +172,32 @@
   gap: 0.2rem;
   padding: 1rem;
   border: 1px solid var(--border);
+  border-left: 3px solid var(--accent-c, var(--border));
   border-radius: var(--radius);
   background: color-mix(in srgb, var(--card) 94%, transparent);
   text-decoration: none;
-  transition: border-color 0.12s ease, transform 0.12s ease;
+  transition: border-color 0.12s ease, transform 0.12s ease, box-shadow 0.12s ease;
 }
 
 .shortcut-card:hover {
-  border-color: var(--ring);
+  border-color: var(--accent-c, var(--ring));
   transform: translateY(-2px);
+  box-shadow: 0 6px 18px color-mix(in srgb, var(--accent-c, var(--ring)) 22%, transparent);
 }
 
+/* Per-card accent. Each home shortcut owns a colour, echoed by its eyebrow,
+   left edge, and hover glow. */
+.accent-blue { --accent-c: #3b82f6; }
+.accent-green { --accent-c: #22c55e; }
+.accent-violet { --accent-c: #8b5cf6; }
+.accent-amber { --accent-c: #f59e0b; }
+
 .shortcut-eyebrow {
   font-size: 0.7rem;
   font-weight: 700;
   text-transform: uppercase;
   letter-spacing: 0.04em;
-  color: var(--primary);
+  color: var(--accent-c, var(--primary));
 }
 
 .shortcut-title {
@@ -239,6 +248,14 @@
   letter-spacing: 0.03em;
 }
 
+/* Colour-coded tags on the home quick links (and reusable elsewhere). Tinted
+   background plus a saturated label so they read as accents, not loud chips. */
+.link-pill .tag-get { background: color-mix(in srgb, #3b82f6 22%, transparent); color: #93c5fd; }
+.link-pill .tag-post { background: color-mix(in srgb, #22c55e 22%, transparent); color: #86efac; }
+.link-pill .tag-json { background: color-mix(in srgb, #8b5cf6 24%, transparent); color: #c4b5fd; }
+.link-pill .tag-key { background: color-mix(in srgb, #eab308 24%, transparent); color: #fde047; }
+.link-pill .tag-help { background: color-mix(in srgb, #06b6d4 24%, transparent); color: #67e8f9; }
+
 /* --- Code blocks with copy button --- */
 .code-block {
   position: relative;

backend/templates/pages/api.html

@@ -30,22 +30,22 @@
       </header>
 
       <div class="shortcut-grid">
-        <a class="shortcut-card" href="#examples" data-doc-link>
+        <a class="shortcut-card accent-blue" href="#examples" data-doc-link>
           <span class="shortcut-eyebrow">60-second start</span>
           <span class="shortcut-title">Copy-paste examples</span>
           <span class="shortcut-sub">curl, wget, HTTPie, Python &amp; more</span>
         </a>
-        <a class="shortcut-card" href="#cli" data-doc-link>
+        <a class="shortcut-card accent-green" href="#cli" data-doc-link>
           <span class="shortcut-eyebrow">Terminal</span>
           <span class="shortcut-title">Install the CLI</span>
           <span class="shortcut-sub">One command for macOS, Linux &amp; Windows</span>
         </a>
-        <a class="shortcut-card" href="#endpoints" data-doc-link>
+        <a class="shortcut-card accent-violet" href="#endpoints" data-doc-link>
           <span class="shortcut-eyebrow">Reference</span>
           <span class="shortcut-title">All endpoints</span>
           <span class="shortcut-sub">Payloads, responses &amp; status codes</span>
         </a>
-        <a class="shortcut-card" href="#integrations" data-doc-link>
+        <a class="shortcut-card accent-amber" href="#integrations" data-doc-link>
           <span class="shortcut-eyebrow">Screenshots</span>
           <span class="shortcut-title">ShareX integration</span>
           <span class="shortcut-sub">Import once, upload as your account</span>
@@ -65,14 +65,14 @@
 
       <h3 class="section-label">Quick links</h3>
       <div class="link-grid">
-        <a class="link-pill" href="#ep-upload" data-doc-link><span>POST</span> Upload endpoint</a>
+        <a class="link-pill" href="#ep-upload" data-doc-link><span class="link-tag tag-post">POST</span> Upload endpoint</a>
-        <a class="link-pill" href="/static/api/warpbox.sh" download><span>GET</span> warpbox.sh (macOS/Linux)</a>
+        <a class="link-pill" href="/static/api/warpbox.sh" download><span class="link-tag tag-get">GET</span> warpbox.sh (macOS/Linux)</a>
-        <a class="link-pill" href="/static/api/warpbox.ps1" download><span>GET</span> warpbox.ps1 (Windows)</a>
+        <a class="link-pill" href="/static/api/warpbox.ps1" download><span class="link-tag tag-get">GET</span> warpbox.ps1 (Windows)</a>
-        <a class="link-pill" href="{{.Data.ShareXDownloadURL}}" download><span>GET</span> ShareX .sxcu config</a>
+        <a class="link-pill" href="{{.Data.ShareXDownloadURL}}" download><span class="link-tag tag-get">GET</span> ShareX .sxcu config</a>
-        <a class="link-pill" href="{{.Data.RequestSchemaURL}}"><span>JSON</span> Request schema</a>
+        <a class="link-pill" href="{{.Data.RequestSchemaURL}}"><span class="link-tag tag-json">JSON</span> Request schema</a>
-        <a class="link-pill" href="{{.Data.ResponseSchemaURL}}"><span>JSON</span> Response schema</a>
+        <a class="link-pill" href="{{.Data.ResponseSchemaURL}}"><span class="link-tag tag-json">JSON</span> Response schema</a>
-        <a class="link-pill" href="/account/settings"><span>KEY</span> Create an API token</a>
+        <a class="link-pill" href="/account/settings"><span class="link-tag tag-key">KEY</span> Create an API token</a>
-        <a class="link-pill" href="#faq" data-doc-link><span>?</span> FAQ &amp; troubleshooting</a>
+        <a class="link-pill" href="#faq" data-doc-link><span class="link-tag tag-help">?</span> FAQ &amp; troubleshooting</a>
       </div>
     </section>