diff --git a/README.md b/README.md
index 99f7b9e..c6f3ae9 100644
--- a/README.md
+++ b/README.md
@@ -814,13 +814,15 @@ discoverable.
   on critical screens and when space is available to allow users to disambiguate
   addresses visually, as a security feature.
 - **Tailwind CSS**: Utility-first CSS via Tailwind. No custom CSS classes for
-  styling. Tailwind is configured with a minimal monochrome palette. This keeps
-  the styling co-located with the markup and eliminates CSS file management. The
-  handful of classes in `styles/main.css` are not styling: `.copy-flash-*`
-  carries the copy feedback animation, and `.am-address` carries the rule that
-  an address never wraps. Both are invariants that hold in every place they
-  appear, and spelling either out as repeated utilities is how one of those
-  places drifts away from the rest.
+  styling, and no `style="..."` attributes, which the
+  [Content Security Policy](#content-security-policy) refuses. Tailwind is
+  configured with a minimal monochrome palette. This keeps the styling
+  co-located with the markup and eliminates CSS file management. The handful of
+  classes in `styles/main.css` are not styling: `.copy-flash-*` carries the copy
+  feedback animation, and `.am-address` carries the rule that an address never
+  wraps. Both are invariants that hold in every place they appear, and spelling
+  either out as repeated utilities is how one of those places drifts away from
+  the rest.
 - **Vanilla JS**: No framework (React, Vue, Svelte, etc.). The popup UI is small
   enough that vanilla JS with simple view switching is sufficient. A framework
   would add bundle size, build complexity, and attack surface for no benefit at
@@ -2213,7 +2215,7 @@ a bare string in `manifest/firefox.json` (MV2):
 
 ```
 default-src 'self'; script-src 'self' 'wasm-unsafe-eval'; object-src 'self';
-style-src 'self' 'unsafe-inline'; img-src 'self' data:;
+style-src 'self'; img-src 'self' data:;
 connect-src 'self' https: http:; frame-src 'none'; form-action 'none';
 base-uri 'none'
 ```
@@ -2225,15 +2227,17 @@ wallet's own UI. Escaping is the primary fix for that (see
 `src/shared/html.js`); this is the second line, so an escape that does slip
 cannot reach the network.
 
-Four directives are looser than `'self'`, each for a reason that does not
+`style-src 'self'` admits the stylesheet and nothing inline: both browsers
+refuse a `style="..."` attribute and a `<style>` block. So the popup's markup,
+in `src/popup/index.html` and in the HTML the view helpers build, carries
+Tailwind classes and never a `style` attribute. Script that sets `element.style`
+is not affected; that is how the views show and hide their error lines. An
+inline style that slips in anyway is refused with a console error, which fails
+both end-to-end suites.
+
+These directives differ from a plain `'self'`, each for a reason that does not
 generalise:
 
-- `style-src 'unsafe-inline'` — `src/popup/index.html` and the view helpers set
-  presentation through `style="..."` attributes, which CSP blocks without this.
-  Chrome enforces `style-src` on attributes, not only on `<style>` blocks, and
-  Firefox has never implemented `style-src-attr`, so there is no narrower
-  spelling that works on both targets. It permits inline **style**; script stays
-  under `script-src`, which does not allow `'unsafe-inline'`.
 - `img-src data:` — identicons are generated in the popup by
   `ethereum-blockies-base64` and assigned to `img.src` as `data:` PNGs.
 - `connect-src https: http:` — the RPC endpoint is user-configurable and a local
diff --git a/TODO.md b/TODO.md
index d638a4b..6feb978 100644
--- a/TODO.md
+++ b/TODO.md
@@ -45,6 +45,17 @@ but the review is broader than any of them.
 
 # Completed Steps
 
+- 2026-10-05: The popup's Content Security Policy no longer allows inline style
+  ([#328](https://git.eeqj.de/sneak/AutistMask/issues/328)): `style-src` is
+  `'self'` in both manifests, pinned in `tests/manifest.test.js`. The 42
+  `style="..."` attributes in `src/popup/index.html` and in the markup the view
+  helpers build are now Tailwind classes, each computing to the value it
+  replaced. The 16 address dot colours are written out as whole classes, because
+  Tailwind builds only the classes it finds in the source. The Settings debug
+  well is shown and hidden with the `hidden` class, since clearing an inline
+  `display` no longer uncovers it. Script that sets `element.style` is
+  unaffected.
+
 - 2026-10-05: `.prettierignore` no longer lists an AI vendor's tool directory
   ([#363](https://git.eeqj.de/sneak/AutistMask/issues/363)). The directory is
   not tracked, so the line ignored nothing.
diff --git a/manifest/chrome.json b/manifest/chrome.json
index b46dd49..49a87d0 100644
--- a/manifest/chrome.json
+++ b/manifest/chrome.json
@@ -7,7 +7,7 @@
     "permissions": ["storage", "activeTab", "alarms"],
     "host_permissions": ["<all_urls>"],
     "content_security_policy": {
-        "extension_pages": "default-src 'self'; script-src 'self' 'wasm-unsafe-eval'; object-src 'self'; style-src 'self' 'unsafe-inline'; img-src 'self' data:; connect-src 'self' https: http:; frame-src 'none'; form-action 'none'; base-uri 'none'"
+        "extension_pages": "default-src 'self'; script-src 'self' 'wasm-unsafe-eval'; object-src 'self'; style-src 'self'; img-src 'self' data:; connect-src 'self' https: http:; frame-src 'none'; form-action 'none'; base-uri 'none'"
     },
     "icons": {
         "16": "icons/icon16.png",
diff --git a/manifest/firefox.json b/manifest/firefox.json
index 5d2c0e2..489c1a6 100644
--- a/manifest/firefox.json
+++ b/manifest/firefox.json
@@ -4,7 +4,7 @@
     "version": "0.1.0",
     "description": "Minimal Ethereum wallet for Firefox",
     "permissions": ["storage", "activeTab", "alarms", "<all_urls>"],
-    "content_security_policy": "default-src 'self'; script-src 'self' 'wasm-unsafe-eval'; object-src 'self'; style-src 'self' 'unsafe-inline'; img-src 'self' data:; connect-src 'self' https: http:; frame-src 'none'; form-action 'none'; base-uri 'none'",
+    "content_security_policy": "default-src 'self'; script-src 'self' 'wasm-unsafe-eval'; object-src 'self'; style-src 'self'; img-src 'self' data:; connect-src 'self' https: http:; frame-src 'none'; form-action 'none'; base-uri 'none'",
     "icons": {
         "16": "icons/icon16.png",
         "32": "icons/icon32.png",
diff --git a/src/popup/index.html b/src/popup/index.html
index 3019c8a..35e2d4c 100644
--- a/src/popup/index.html
+++ b/src/popup/index.html
@@ -110,8 +110,7 @@
                     </div>
                     <div
                         id="add-wallet-phrase-warning"
-                        class="text-xs mb-2 border border-border border-dashed p-2"
-                        style="visibility: hidden"
+                        class="text-xs mb-2 border border-border border-dashed p-2 invisible"
                     >
                         Write these words down and keep them safe. Anyone with
                         them can take your funds; if you lose them, your wallet
@@ -262,10 +261,7 @@
 
                 <!-- recent transactions across all addresses -->
                 <div>
-                    <div
-                        class="font-bold bg-section py-1 px-2"
-                        style="margin-left: -0.5rem; margin-right: -0.5rem"
-                    >
+                    <div class="font-bold bg-section py-1 px-2 -mx-2">
                         Recent Transactions
                     </div>
                     <div id="home-tx-list">
@@ -273,7 +269,7 @@
                     </div>
                 </div>
 
-                <div class="py-1" style="margin: 0 -0.5rem">&nbsp;</div>
+                <div class="py-1 -mx-2">&nbsp;</div>
 
                 <div class="text-xs text-muted">
                     <span
@@ -409,8 +405,7 @@
                 </p>
                 <div
                     id="export-privkey-flash"
-                    class="text-xs mb-2 min-h-[1.25rem]"
-                    style="visibility: hidden"
+                    class="text-xs mb-2 min-h-[1.25rem] invisible"
                 ></div>
                 <div id="export-privkey-password-section" class="mb-2">
                     <label class="block mb-1">Password</label>
@@ -542,8 +537,7 @@
                     />
                     <div
                         id="send-to-error"
-                        class="text-xs"
-                        style="min-height: 1.25rem; color: #cc0000"
+                        class="text-xs min-h-[1.25rem] text-[#cc0000]"
                     ></div>
                 </div>
                 <div class="mb-2">
@@ -619,7 +613,7 @@
                     <div class="text-xs text-muted mb-1">Your balance</div>
                     <div id="confirm-balance" class="text-xs"></div>
                 </div>
-                <div id="confirm-fee" class="mb-3" style="visibility: hidden">
+                <div id="confirm-fee" class="mb-3 invisible">
                     <div class="text-xs text-muted mb-1">Network fee</div>
                     <div id="confirm-fee-amount" class="text-xs"></div>
                     <!-- Holds its one line of space from the first paint, so
@@ -627,22 +621,13 @@
                     nothing. The placeholder is never seen. -->
                     <div
                         id="confirm-fee-reserve"
-                        class="text-xs text-muted"
-                        style="visibility: hidden"
+                        class="text-xs text-muted invisible"
                     >
                         reserve pending
                     </div>
                 </div>
-                <div
-                    id="confirm-warnings"
-                    class="mb-2"
-                    style="visibility: hidden"
-                ></div>
-                <div
-                    id="confirm-recipient-warning"
-                    class="mb-2"
-                    style="visibility: hidden"
-                >
+                <div id="confirm-warnings" class="mb-2 invisible"></div>
+                <div id="confirm-recipient-warning" class="mb-2 invisible">
                     <div
                         class="border border-red-500 border-dashed p-2 text-xs font-bold text-red-500"
                     >
@@ -655,14 +640,9 @@
                 in confirmTx.js sets it. -->
                 <div
                     id="confirm-contract-warning"
-                    class="mb-2 border border-red-500 border-dashed p-2 text-xs font-bold text-red-500"
-                    style="visibility: hidden"
+                    class="mb-2 border border-red-500 border-dashed p-2 text-xs font-bold text-red-500 invisible"
                 ></div>
-                <div
-                    id="confirm-burn-warning"
-                    class="mb-2"
-                    style="visibility: hidden"
-                >
+                <div id="confirm-burn-warning" class="mb-2 invisible">
                     <div
                         class="border border-red-500 border-dashed p-2 text-xs font-bold text-red-500"
                     >
@@ -670,11 +650,7 @@
                         here are permanently destroyed and cannot be recovered.
                     </div>
                 </div>
-                <div
-                    id="confirm-etherscan-warning"
-                    class="mb-2"
-                    style="visibility: hidden"
-                >
+                <div id="confirm-etherscan-warning" class="mb-2 invisible">
                     <div
                         class="border border-red-500 border-dashed p-2 text-xs font-bold text-red-500"
                     >
@@ -684,13 +660,11 @@
                 </div>
                 <div
                     id="confirm-errors"
-                    class="mb-2 border border-border border-dashed p-2"
-                    style="visibility: hidden; min-height: 1.25rem"
+                    class="mb-2 border border-border border-dashed p-2 invisible min-h-[1.25rem]"
                 ></div>
                 <div
                     id="confirm-amount-fee-error"
-                    class="mb-2 border border-border border-dashed p-2 text-xs"
-                    style="visibility: hidden"
+                    class="mb-2 border border-border border-dashed p-2 text-xs invisible"
                 >
                     Your balance does not cover this amount plus the network
                     fee. Please go back and send a smaller amount.
@@ -699,15 +673,13 @@
                 in confirmTx.js sets it. -->
                 <div
                     id="confirm-gas-error"
-                    class="mb-2 border border-border border-dashed p-2 text-xs"
-                    style="visibility: hidden"
+                    class="mb-2 border border-border border-dashed p-2 text-xs invisible"
                 ></div>
                 <!-- Its sentence names why the fee could not be estimated,
                 so show() in confirmTx.js sets it. -->
                 <div
                     id="confirm-fee-unknown-error"
-                    class="mb-2 border border-border border-dashed p-2 text-xs"
-                    style="visibility: hidden"
+                    class="mb-2 border border-border border-dashed p-2 text-xs invisible"
                 ></div>
                 <div class="mb-2">
                     <label class="block mb-1 text-xs">Password</label>
@@ -719,8 +691,7 @@
                 </div>
                 <div
                     id="confirm-tx-password-error"
-                    class="text-xs mb-2 min-h-[1.25rem]"
-                    style="visibility: hidden"
+                    class="text-xs mb-2 min-h-[1.25rem] invisible"
                 ></div>
                 <button
                     id="btn-confirm-send"
@@ -835,8 +806,7 @@
                 </button>
                 <div
                     id="receive-erc20-warning"
-                    class="text-xs border border-border border-dashed p-2 mt-3"
-                    style="visibility: hidden"
+                    class="text-xs border border-border border-dashed p-2 mt-3 invisible"
                 ></div>
             </div>
 
@@ -864,8 +834,7 @@
                 </div>
                 <div
                     id="add-token-info"
-                    class="text-xs text-muted mb-2 min-h-[1.25rem]"
-                    style="visibility: hidden"
+                    class="text-xs text-muted mb-2 min-h-[1.25rem] invisible"
                 ></div>
                 <div class="mb-2">
                     <label class="block mb-1 text-xs text-muted"
@@ -1051,8 +1020,7 @@
                             type="text"
                             inputmode="numeric"
                             id="settings-dust-threshold"
-                            class="border border-border p-1 text-xs bg-bg text-fg"
-                            style="width: 10ch"
+                            class="border border-border p-1 text-xs bg-bg text-fg w-[10ch]"
                         />
                         <span class="text-xs text-muted">gwei</span>
                     </div>
@@ -1129,8 +1097,7 @@
 
                 <div
                     id="settings-debug-well"
-                    class="bg-well p-3 mx-1 mb-3"
-                    style="display: none"
+                    class="bg-well p-3 mx-1 mb-3 hidden"
                 >
                     <h3 class="font-bold mb-1">Debug</h3>
                     <label
@@ -1158,8 +1125,7 @@
                 </p>
                 <div
                     id="delete-wallet-flash"
-                    class="text-xs text-red-500 mb-2 min-h-[1.25rem]"
-                    style="visibility: hidden"
+                    class="text-xs text-red-500 mb-2 min-h-[1.25rem] invisible"
                 ></div>
                 <div class="mb-2">
                     <label class="block mb-1">Password</label>
@@ -1232,8 +1198,7 @@
                 </div>
                 <div
                     id="delete-wallet-lost-flash"
-                    class="text-xs text-red-500 mb-2 min-h-[1.25rem]"
-                    style="visibility: hidden"
+                    class="text-xs text-red-500 mb-2 min-h-[1.25rem] invisible"
                 ></div>
                 <button
                     id="btn-delete-wallet-lost-confirm"
@@ -1288,8 +1253,7 @@
                 </p>
                 <div
                     id="delete-address-flash"
-                    class="text-xs text-red-500 mb-2 min-h-[1.25rem]"
-                    style="visibility: hidden"
+                    class="text-xs text-red-500 mb-2 min-h-[1.25rem] invisible"
                 ></div>
                 <button
                     id="btn-delete-address-confirm"
@@ -1318,8 +1282,7 @@
                 </div>
                 <div
                     id="show-phrase-flash"
-                    class="text-xs text-red-500 mb-2 min-h-[1.25rem]"
-                    style="visibility: hidden"
+                    class="text-xs text-red-500 mb-2 min-h-[1.25rem] invisible"
                 ></div>
                 <div id="show-phrase-password-section" class="mb-2">
                     <label class="block mb-1">Password</label>
@@ -1401,8 +1364,7 @@
                     />
                     <div
                         id="settings-addtoken-info"
-                        class="text-xs text-muted mt-1 min-h-[1.25rem]"
-                        style="visibility: hidden"
+                        class="text-xs text-muted mt-1 min-h-[1.25rem] invisible"
                     ></div>
                     <button
                         id="btn-settings-addtoken-manual"
@@ -1635,8 +1597,7 @@
                 </div>
                 <div
                     id="approve-tx-error"
-                    class="text-xs mb-2 border border-border border-dashed p-1 min-h-[1.875rem]"
-                    style="visibility: hidden"
+                    class="text-xs mb-2 border border-border border-dashed p-1 min-h-[1.875rem] invisible"
                 ></div>
                 <div class="flex justify-between">
                     <button
@@ -1672,15 +1633,7 @@
 
                 <div
                     id="approve-sign-danger-warning"
-                    class="mb-3 p-2 text-xs font-bold"
-                    style="
-                        visibility: hidden;
-                        min-height: 1.25rem;
-                        background: #fee2e2;
-                        color: #991b1b;
-                        border: 2px solid #dc2626;
-                        border-radius: 6px;
-                    "
+                    class="mb-3 p-2 text-xs font-bold invisible min-h-[1.25rem] bg-[#fee2e2] text-[#991b1b] border-2 border-[#dc2626] rounded-[6px]"
                 ></div>
 
                 <div class="mb-3">
@@ -1697,8 +1650,7 @@
                     <div class="text-xs text-muted mb-1">Message</div>
                     <div
                         id="approve-sign-message"
-                        class="text-xs break-all"
-                        style="max-height: 12rem; overflow-y: auto"
+                        class="text-xs break-all max-h-48 overflow-y-auto"
                     ></div>
                 </div>
 
@@ -1706,8 +1658,7 @@
                     <div class="text-xs text-muted mb-1">Raw data</div>
                     <div
                         id="approve-sign-hex"
-                        class="text-xs break-all"
-                        style="max-height: 6rem; overflow-y: auto"
+                        class="text-xs break-all max-h-24 overflow-y-auto"
                     ></div>
                 </div>
 
@@ -1721,8 +1672,7 @@
                 </div>
                 <div
                     id="approve-sign-error"
-                    class="text-xs mb-2 border border-border border-dashed p-1 min-h-[1.875rem]"
-                    style="visibility: hidden"
+                    class="text-xs mb-2 border border-border border-dashed p-1 min-h-[1.875rem] invisible"
                 ></div>
                 <div class="flex justify-between">
                     <button
@@ -1846,8 +1796,7 @@
                 </div>
                 <div
                     id="state-recovery-flash"
-                    class="text-xs text-red-500 mb-2 min-h-[1.25rem]"
-                    style="visibility: hidden"
+                    class="text-xs text-red-500 mb-2 min-h-[1.25rem] invisible"
                 ></div>
                 <button
                     id="btn-state-recovery-reset"
diff --git a/src/popup/views/addressDetail.js b/src/popup/views/addressDetail.js
index bb4d847..f100536 100644
--- a/src/popup/views/addressDetail.js
+++ b/src/popup/views/addressDetail.js
@@ -181,10 +181,10 @@ function renderTransactions(txs) {
         // it on the line above rather than replacing it.
         const nameStr = escapeHtml(title || ensName || "");
         const err = tx.isError ? " (failed)" : "";
-        const opacity = tx.isError ? " opacity:0.5;" : "";
+        const opacity = tx.isError ? " opacity-50" : "";
         const ago = escapeHtml(timeAgo(tx.timestamp));
         const iso = escapeHtml(isoDate(tx.timestamp));
-        html += `<div class="tx-row py-2 border-b border-border-light text-xs cursor-pointer hover:bg-hover" data-tx="${i}" style="${opacity}">`;
+        html += `<div class="tx-row py-2 border-b border-border-light text-xs cursor-pointer hover:bg-hover${opacity}" data-tx="${i}">`;
         html += `<div class="flex justify-between"><span class="text-muted" title="${iso}">${ago}</span><span>${dirLabel}${err}</span></div>`;
         html += txCounterpartyHtml(counterparty, nameStr, amountStr);
         html += `</div>`;
diff --git a/src/popup/views/addressToken.js b/src/popup/views/addressToken.js
index e834e7f..a544789 100644
--- a/src/popup/views/addressToken.js
+++ b/src/popup/views/addressToken.js
@@ -258,10 +258,10 @@ function renderTransactions(txs) {
         // it on the line above rather than replacing it.
         const nameStr = escapeHtml(title || ensName || "");
         const err = tx.isError ? " (failed)" : "";
-        const opacity = tx.isError ? " opacity:0.5;" : "";
+        const opacity = tx.isError ? " opacity-50" : "";
         const ago = escapeHtml(timeAgo(tx.timestamp));
         const iso = escapeHtml(isoDate(tx.timestamp));
-        html += `<div class="tx-row py-2 border-b border-border-light text-xs cursor-pointer hover:bg-hover" data-tx="${i}" style="${opacity}">`;
+        html += `<div class="tx-row py-2 border-b border-border-light text-xs cursor-pointer hover:bg-hover${opacity}" data-tx="${i}">`;
         html += `<div class="flex justify-between"><span class="text-muted" title="${iso}">${ago}</span><span>${dirLabel}${err}</span></div>`;
         html += txCounterpartyHtml(counterparty, nameStr, amountStr);
         html += `</div>`;
diff --git a/src/popup/views/helpers.js b/src/popup/views/helpers.js
index e01272a..04bffc6 100644
--- a/src/popup/views/helpers.js
+++ b/src/popup/views/helpers.js
@@ -335,7 +335,7 @@ function balanceLine(symbol, amount, price, tokenId) {
         : "";
     return (
         `<div class="flex text-xs${clickClass}"${tokenAttr}>` +
-        `<span class="flex justify-between" style="width:42ch;max-width:100%">` +
+        `<span class="flex justify-between w-[42ch] max-w-full">` +
         `<span>${escapeHtml(displaySymbol(symbol))}</span>` +
         `<span>${qty}</span>` +
         `</span>` +
@@ -430,23 +430,26 @@ function truncateMiddle(str, maxLen) {
 
 // 16 colors evenly spaced around the hue wheel (22.5° apart),
 // all at HSL saturation 70%, lightness 50% for uniform vibrancy.
+// Each is a whole Tailwind class: Tailwind builds only the classes it finds
+// written out in the source, so the class name cannot be put together at
+// runtime.
 const ADDRESS_COLORS = [
-    "#d92626",
-    "#d96926",
-    "#d9ac26",
-    "#c2d926",
-    "#80d926",
-    "#3dd926",
-    "#26d953",
-    "#26d996",
-    "#26d9d9",
-    "#2696d9",
-    "#2653d9",
-    "#3d26d9",
-    "#8026d9",
-    "#c226d9",
-    "#d926ac",
-    "#d92669",
+    "bg-[#d92626]",
+    "bg-[#d96926]",
+    "bg-[#d9ac26]",
+    "bg-[#c2d926]",
+    "bg-[#80d926]",
+    "bg-[#3dd926]",
+    "bg-[#26d953]",
+    "bg-[#26d996]",
+    "bg-[#26d9d9]",
+    "bg-[#2696d9]",
+    "bg-[#2653d9]",
+    "bg-[#3d26d9]",
+    "bg-[#8026d9]",
+    "bg-[#c226d9]",
+    "bg-[#d926ac]",
+    "bg-[#d92669]",
 ];
 
 function addressColor(address) {
@@ -456,12 +459,12 @@ function addressColor(address) {
 
 function addressDotHtml(address) {
     const color = addressColor(address);
-    return `<span style="width:8px;height:8px;border-radius:50%;display:inline-block;background:${color};margin-right:4px;vertical-align:middle;flex-shrink:0;"></span>`;
+    return `<span class="inline-block w-[8px] h-[8px] rounded-[50%] ${color} mr-[4px] align-middle shrink-0"></span>`;
 }
 
 function blockieHtml(address) {
     const src = makeBlockie(address);
-    return `<img src="${escapeHtml(src)}" width="48" height="48" style="image-rendering:pixelated;border-radius:50%;display:inline-block">`;
+    return `<img src="${escapeHtml(src)}" width="48" height="48" class="inline-block rounded-[50%] [image-rendering:pixelated]">`;
 }
 
 // Look up an address across all wallets and return its title
@@ -571,7 +574,7 @@ function timeAgo(timestamp) {
 
 // Shared external-link icon SVG used across all views.
 const EXT_ICON =
-    `<span style="display:inline-block;width:10px;height:10px;margin-left:4px;vertical-align:middle">` +
+    `<span class="inline-block w-[10px] h-[10px] ml-[4px] align-middle">` +
     `<svg viewBox="0 0 12 12" fill="none" stroke="currentColor" stroke-width="1.5">` +
     `<path d="M4.5 1.5H2a.5.5 0 00-.5.5v8a.5.5 0 00.5.5h8a.5.5 0 00.5-.5V7.5"/>` +
     `<path d="M7 1.5h3.5V5M7 5.5L10.5 1.5"/>` +
diff --git a/src/popup/views/home.js b/src/popup/views/home.js
index 37046f9..b30c0fd 100644
--- a/src/popup/views/home.js
+++ b/src/popup/views/home.js
@@ -131,10 +131,10 @@ function renderHomeTxList(ctx) {
         const title = addressTitle(counterparty, state.wallets);
         const titleStr = title ? escapeHtml(title) : "";
         const err = tx.isError ? " (failed)" : "";
-        const opacity = tx.isError ? " opacity:0.5;" : "";
+        const opacity = tx.isError ? " opacity-50" : "";
         const ago = escapeHtml(timeAgo(tx.timestamp));
         const iso = escapeHtml(isoDate(tx.timestamp));
-        html += `<div class="home-tx-row py-2 border-b border-border-light text-xs cursor-pointer hover:bg-hover" data-tx="${i}" style="${opacity}">`;
+        html += `<div class="home-tx-row py-2 border-b border-border-light text-xs cursor-pointer hover:bg-hover${opacity}" data-tx="${i}">`;
         html += `<div class="flex justify-between"><span class="text-muted" title="${iso}">${ago}</span><span>${dirLabel}${err}</span></div>`;
         html += txCounterpartyHtml(counterparty, titleStr, amountStr);
         html += `</div>`;
@@ -241,7 +241,7 @@ function walletListHtml() {
     state.wallets.forEach((wallet, wi) => {
         const defect = walletDefect(wallet);
         html += `<div>`;
-        html += `<div class="flex justify-between items-center bg-section py-1 px-2" style="margin:0 -0.5rem">`;
+        html += `<div class="flex justify-between items-center bg-section py-1 px-2 -mx-2">`;
         html += `<span class="font-bold cursor-pointer wallet-name underline decoration-dashed" data-wallet="${wi}">${escapeHtml(wallet.name)}</span>`;
         // No "+" on a defective wallet: deriving another address from that
         // xpub would only add one more address the key does not produce
@@ -255,12 +255,12 @@ function walletListHtml() {
         wallet.addresses.forEach((addr, ai) => {
             html += `<div class="address-row py-1 border-b border-border-light cursor-pointer hover:bg-hover" data-wallet="${wi}" data-address="${ai}">`;
             const isActive = state.activeAddress === addr.address;
-            const infoBtn = `<span class="btn-addr-info text-xs cursor-pointer border border-border hover:bg-fg hover:text-bg" style="padding:0" data-wallet="${wi}" data-address="${ai}">[info]</span>`;
+            const infoBtn = `<span class="btn-addr-info text-xs cursor-pointer border border-border hover:bg-fg hover:text-bg p-0" data-wallet="${wi}" data-address="${ai}">[info]</span>`;
             // Only where a wallet can spare the address: a wallet holding a
             // single address has no remove control, because its last address
             // is never removable.
             const removeBtn = canRemoveAddress(wallet)
-                ? `<span class="btn-remove-address text-xs cursor-pointer border border-border hover:bg-fg hover:text-bg ml-1" style="padding:0" data-wallet="${wi}" data-address="${ai}" title="Remove this address from the wallet">[x]</span>`
+                ? `<span class="btn-remove-address text-xs cursor-pointer border border-border hover:bg-fg hover:text-bg ml-1 p-0" data-wallet="${wi}" data-address="${ai}" title="Remove this address from the wallet">[x]</span>`
                 : "";
             const dot = addressDotHtml(addr.address);
             const titleBold = isActive ? "font-bold" : "";
diff --git a/src/popup/views/settings.js b/src/popup/views/settings.js
index 6262085..cd79548 100644
--- a/src/popup/views/settings.js
+++ b/src/popup/views/settings.js
@@ -213,12 +213,7 @@ function show() {
     versionClickCount = 0;
 
     // Show debug well if debug mode is already enabled
-    const debugWell = $("settings-debug-well");
-    if (state.debugMode) {
-        debugWell.style.display = "";
-    } else {
-        debugWell.style.display = "none";
-    }
+    $("settings-debug-well").classList.toggle("hidden", !state.debugMode);
     $("settings-debug-mode").checked = state.debugMode;
 
     showView("settings");
@@ -434,7 +429,7 @@ function init(ctx) {
         if (versionClickCount >= 10) {
             versionClickCount = 0;
             clearTimeout(versionClickTimer);
-            $("settings-debug-well").style.display = "";
+            $("settings-debug-well").classList.remove("hidden");
         }
     });
 
diff --git a/tests/contractCreation.test.js b/tests/contractCreation.test.js
index d2a820a..ab4e5da 100644
--- a/tests/contractCreation.test.js
+++ b/tests/contractCreation.test.js
@@ -301,7 +301,7 @@ describe.each([
     test("a contract creation's row says so, with no colour dot and no address line", async () => {
         const html = await rowsFor(historyTx(""));
         expect(html).toContain(SENTENCE);
-        expect(html).not.toContain("background:");
+        expect(html).not.toContain("bg-[#");
         expect(html).not.toContain("am-address");
         expect(html).not.toContain("undefined");
     });
@@ -309,7 +309,7 @@ describe.each([
     test("a transaction with a recipient shows its colour dot and address", async () => {
         const html = await rowsFor(historyTx(RECIPIENT));
         expectAddressLine(html);
-        expect(html).toContain("background:#");
+        expect(html).toContain("bg-[#");
         expect(html).toContain(`<div class="am-address">${RECIPIENT}</div>`);
     });
 });
diff --git a/tests/e2e/run.js b/tests/e2e/run.js
index b71997e..4db35f4 100644
--- a/tests/e2e/run.js
+++ b/tests/e2e/run.js
@@ -311,7 +311,7 @@ test("transaction detail renders an ERC-20 transfer (#151)", async (env) => {
         "token contract row missing the contract address, got: " +
             JSON.stringify(contractText),
     );
-    const dots = await contract.locator('span[style*="border-radius"]').count();
+    const dots = await contract.locator('span[class*="rounded-[50%]"]').count();
     assert(dots > 0, "token contract row rendered without its colour dot");
 });
 
diff --git a/tests/manifest.test.js b/tests/manifest.test.js
index 7e3b258..af5cdf0 100644
--- a/tests/manifest.test.js
+++ b/tests/manifest.test.js
@@ -21,15 +21,14 @@
 // escaping in src/shared/html.js is the primary fix; default-src is what
 // stops the next escape that slips from reaching the network.
 //
-// Every directive below is pinned exactly, because each of the four
+// And for #328: style-src is 'self' alone, so the browser refuses every
+// style="..." attribute in the popup's markup, including one an escape lets
+// through. The popup styles with classes; script setting element.style is
+// not affected.
+//
+// Every directive below is pinned exactly, because each of the three
 // loosenings is load-bearing and none of them may grow:
 //
-//   style-src 'unsafe-inline'  src/popup/index.html and the view helpers
-//                              use style="..." attributes throughout, which
-//                              CSP blocks without it. Chrome enforces this
-//                              on attributes, not just <style> blocks, and
-//                              Firefox has never implemented style-src-attr,
-//                              so there is no narrower spelling available.
 //   img-src data:              blockies are data: PNGs assigned to img.src.
 //   connect-src https: http:   the RPC endpoint is user-configurable, and a
 //                              local node over http://127.0.0.1 is a
@@ -58,7 +57,7 @@ const EXPECTED_DIRECTIVES = {
     "default-src": ["'self'"],
     "script-src": ["'self'", "'wasm-unsafe-eval'"],
     "object-src": ["'self'"],
-    "style-src": ["'self'", "'unsafe-inline'"],
+    "style-src": ["'self'"],
     "img-src": ["'self'", "data:"],
     "connect-src": ["'self'", "http:", "https:"],
     "frame-src": ["'none'"],