From 158f1c676f0d10f2960fdf237d77935b47aae6c5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=D0=90=D0=BD=D1=82=D0=BE=D0=BD=20=D0=A2=D1=80=D0=BE=D1=88?=
 =?UTF-8?q?=D0=B8=D0=BD?= <i@atroshin.ru>
Date: Sat, 19 Sep 2026 21:51:03 +0300
Subject: [PATCH] ui: embedded labels (fieldset/legend) for the phone simulator
 and SCP81 containers

- Phone simulator: STK menu, STATUS and Polling, TERMINAL PROFILE and
  SET UP EVENT LIST become fieldsets with legends; 'Fetched proactive
  commands:' gains a bordered container
- SCP81 listener: the HTTP OTA listener label moves into the legend (the
  live state span stays next to it), Script results (R-APDUs) and HTTP OTA
  log become fieldsets (the log's Clear button moves to the body top-right)
- Options (applied at Start) stays a details/summary but its summary is
  styled as an embedded label (page-background patch over the top border,
  native triangle kept) so it expands/collapses from the legend
- html.test.js: card-fieldset test no longer assumes exactly two fieldsets;
  new guard test for the legends and the Options summary
- Tailwind rebuild of style.css; SW cache simple-v192 (version stays 2.4.0)
---
 frontend/index.html         |  58 ++++----
 frontend/style.css          | 268 ++++++++++++++++++++++++++++++++++--
 frontend/sw.js              |   2 +-
 frontend/tests/html.test.js |  34 +++--
 4 files changed, 307 insertions(+), 55 deletions(-)

diff --git a/frontend/index.html b/frontend/index.html
index a28b27f..875d2f9 100644
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -909,15 +909,15 @@
 		</div>
 		<div id="phone-sub-phone">
 			<div class="flex flex-wrap items-start gap-4 mb-4">
-				<div class="border border-gray-200 dark:border-slate-700 rounded p-3">
-					<div class="mb-1 text-sm text-gray-500 dark:text-slate-400" data-l10n="STK menu">STK menu</div>
+				<fieldset class="border border-gray-200 dark:border-slate-700 rounded p-3">
+					<legend class="px-1 text-xs font-medium text-gray-500 dark:text-slate-400" data-l10n="STK menu">STK menu</legend>
 					<div class="flex items-center gap-2">
 						<button id="stk-menu-btn" data-needs="card" onclick="stkMenuOpen()" class="px-2.5 py-1 text-sm rounded bg-emerald-600 text-white hover:bg-emerald-700 disabled:opacity-40 disabled:cursor-not-allowed" style="display:none">STK: <span id="stk-menu-title"></span></button>
 						<span id="stk-menu-none" class="text-xs text-gray-500 dark:text-slate-400" style="display:none" data-l10n="No menu set by the card">No menu set by the card</span>
 					</div>
-				</div>
-				<div class="border border-gray-200 dark:border-slate-700 rounded p-3">
-					<div class="mb-1 text-sm text-gray-500 dark:text-slate-400" data-l10n="STATUS and Polling">STATUS and Polling</div>
+				</fieldset>
+				<fieldset class="border border-gray-200 dark:border-slate-700 rounded p-3">
+					<legend class="px-1 text-xs font-medium text-gray-500 dark:text-slate-400" data-l10n="STATUS and Polling">STATUS and Polling</legend>
 					<div class="flex items-center gap-2">
 						<button id="pli-status-btn" data-needs="card" onclick="pysimStatusPoll()" class="px-2.5 py-1 text-sm rounded bg-gray-600 text-white hover:bg-gray-700 disabled:opacity-40 disabled:cursor-not-allowed" data-l10n="Send STATUS">Send STATUS</button>
 						<span class="text-xs text-gray-500 dark:text-slate-400">|</span>
@@ -925,22 +925,24 @@
 						<button id="pli-pause-btn" data-needs="server" onclick="pysimPollToggle()" class="px-2.5 py-1 text-sm rounded bg-gray-200 dark:bg-slate-700 text-gray-700 dark:text-slate-300 hover:bg-gray-300 dark:hover:bg-slate-600 disabled:opacity-40 disabled:cursor-not-allowed">OFF</button>
 						<span id="pli-poll-stat" class="text-xs text-gray-400"></span>
 					</div>
-				</div>
-				<div class="border border-gray-200 dark:border-slate-700 rounded p-3">
-					<div class="mb-1 text-sm text-gray-500 dark:text-slate-400" data-l10n="TERMINAL PROFILE">TERMINAL PROFILE</div>
+				</fieldset>
+				<fieldset class="border border-gray-200 dark:border-slate-700 rounded p-3">
+					<legend class="px-1 text-xs font-medium text-gray-500 dark:text-slate-400" data-l10n="TERMINAL PROFILE">TERMINAL PROFILE</legend>
 					<div class="flex items-center gap-2">
 						<button id="tp-send-btn" data-needs="card" onclick="tpSend()" class="px-2.5 py-1 text-sm rounded bg-gray-600 text-white hover:bg-gray-700 disabled:opacity-40 disabled:cursor-not-allowed" data-l10n="Send">Send</button>
 						<button id="tp-configure-btn" data-needs="server" onclick="tpOpen()" class="px-2.5 py-1 text-sm rounded bg-blue-600 text-white hover:bg-blue-700 disabled:opacity-40 disabled:cursor-not-allowed" data-l10n="Configure">Configure</button>
 						<span id="tp-status" class="text-xs text-gray-400 dark:text-slate-500"></span>
 					</div>
-				</div>
-				<div class="flex-1 min-w-0 border border-gray-200 dark:border-slate-700 rounded p-3">
-					<div class="mb-1 text-sm text-gray-500 dark:text-slate-400" data-l10n="Events that the card monitors (SET UP EVENT LIST):">Events that the card monitors (SET UP EVENT LIST):</div>
+				</fieldset>
+				<fieldset class="flex-1 min-w-0 border border-gray-200 dark:border-slate-700 rounded p-3">
+					<legend class="px-1 text-xs font-medium text-gray-500 dark:text-slate-400" data-l10n="Events that the card monitors (SET UP EVENT LIST):">Events that the card monitors (SET UP EVENT LIST):</legend>
 					<div id="pysim-event-list" class="text-sm font-mono text-gray-600 dark:text-slate-400"></div>
-				</div>
+				</fieldset>
 			</div>
-			<div class="mb-2 text-sm text-gray-500 dark:text-slate-400" data-l10n="Fetched proactive commands:">Fetched proactive commands:</div>
-			<div id="pysim-proactive-log" class="text-sm font-mono text-gray-600 dark:text-slate-400"></div>
+			<fieldset class="border border-gray-200 dark:border-slate-700 rounded p-3">
+				<legend class="px-1 text-xs font-medium text-gray-500 dark:text-slate-400" data-l10n="Fetched proactive commands:">Fetched proactive commands:</legend>
+				<div id="pysim-proactive-log" class="text-sm font-mono text-gray-600 dark:text-slate-400"></div>
+			</fieldset>
 		</div>
 		<div id="phone-sub-tr" class="hidden">
 			<div class="flex justify-between items-center mb-2">
@@ -959,11 +961,8 @@
 			<button class="scp81-subtab px-4 py-1.5 text-sm rounded-full bg-gray-200 dark:bg-slate-700 text-gray-700 dark:text-slate-300 hover:bg-gray-300 dark:hover:bg-slate-600" data-scp81-sub="scripts" onclick="scp81SwitchSubtab('scripts')" data-l10n="Scripts">Scripts</button>
 		</div>
 		<div id="scp81-sub-listener">
-			<div class="flex items-center gap-2 mb-2">
-				<span class="text-sm text-gray-500 dark:text-slate-400" data-l10n="HTTP OTA listener">HTTP OTA listener</span>
-				<span id="scp81-state" class="text-xs text-gray-400"></span>
-			</div>
-			<div class="border border-gray-200 dark:border-slate-700 rounded p-3 mb-3">
+			<fieldset class="border border-gray-200 dark:border-slate-700 rounded p-3 mb-3">
+				<legend class="px-1 text-xs font-medium text-gray-500 dark:text-slate-400"><span data-l10n="HTTP OTA listener">HTTP OTA listener</span> <span id="scp81-state" class="text-xs text-gray-400"></span></legend>
 				<div class="flex flex-wrap items-end gap-3">
 					<div>
 						<label class="block mb-1 text-xs font-medium text-gray-600 dark:text-slate-400" data-l10n="Mode">Mode</label>
@@ -994,9 +993,9 @@
 				<div id="scp81-psk-note" class="mt-2 text-xs text-gray-500 dark:text-slate-400" data-l10n="PSK keys come from the card presets (Cards tab): the listener picks the key by the identity the card sends in the TLS handshake.">PSK keys come from the card presets (Cards tab): the listener picks the key by the identity the card sends in the TLS handshake.</div>
 				<div id="scp81-redirect-note" class="hidden mt-2 text-xs text-gray-500 dark:text-slate-400" data-l10n="Redirect: every BIP channel the card opens is connected to this Host:Port (the external HTTP OTA platform); TLS is terminated there, and the address the card requests is only logged.">Redirect: every BIP channel the card opens is connected to this Host:Port (the external HTTP OTA platform); TLS is terminated there, and the address the card requests is only logged.</div>
 				<div id="scp81-passthru-note" class="hidden mt-2 text-xs text-gray-500 dark:text-slate-400" data-l10n="Pass-through: the terminal connects each BIP channel to the destination the card requests in OPEN CHANNEL (Other address + transport port, TCP client only); Host and Port above are not used, TLS is terminated by that platform, and the server's network is used (lab only).">Pass-through: the terminal connects each BIP channel to the destination the card requests in OPEN CHANNEL (Other address + transport port, TCP client only); Host and Port above are not used, TLS is terminated by that platform, and the server's network is used (lab only).</div>
-			</div>
+			</fieldset>
 			<details id="scp81-opts" class="border border-gray-200 dark:border-slate-700 rounded mb-3">
-				<summary class="p-3 cursor-pointer select-none text-sm text-gray-500 dark:text-slate-400">
+				<summary class="w-fit list-inside relative -top-2 -mb-1 mx-3 px-1 cursor-pointer select-none text-xs font-medium text-gray-500 dark:text-slate-400 bg-neutral-50 dark:bg-slate-900">
 					<span data-l10n="Options (applied at Start)">Options (applied at Start)</span>
 					<span id="scp81-opts-badge" class="ml-1 text-xs text-amber-500 dark:text-amber-400"></span>
 				</summary>
@@ -1038,20 +1037,17 @@
 					<label class="flex items-center gap-2 text-xs text-gray-600 dark:text-slate-300 cursor-pointer mt-3"><input type="checkbox" id="opt-link-events" onchange="scp81OptionsPersist()" class="rounded"> <span data-l10n="Show link events (Channel status ENVELOPEs, TS 102 223 7.5.11)">Show link events (Channel status ENVELOPEs, TS 102 223 7.5.11)</span></label>
 				</div>
 			</details>
-			<div class="border border-gray-200 dark:border-slate-700 rounded p-3 mb-3">
-				<div class="flex justify-between items-center mb-2">
-					<span class="text-sm text-gray-500 dark:text-slate-400" data-l10n="Script results (R-APDUs)">Script results (R-APDUs)</span>
-					<span id="scp81-results-state" class="text-xs text-gray-400"></span>
-				</div>
+			<fieldset class="border border-gray-200 dark:border-slate-700 rounded p-3 mb-3">
+				<legend class="px-1 text-xs font-medium text-gray-500 dark:text-slate-400"><span data-l10n="Script results (R-APDUs)">Script results (R-APDUs)</span> <span id="scp81-results-state" class="text-xs text-gray-400"></span></legend>
 				<div id="scp81-results" class="text-sm font-mono text-gray-600 dark:text-slate-400 max-h-[35vh] overflow-auto"></div>
-			</div>
-			<div class="border border-gray-200 dark:border-slate-700 rounded p-3">
-				<div class="flex justify-between items-center mb-2">
-					<span class="text-sm text-gray-500 dark:text-slate-400" data-l10n="HTTP OTA log">HTTP OTA log</span>
+			</fieldset>
+			<fieldset class="border border-gray-200 dark:border-slate-700 rounded p-3">
+				<legend class="px-1 text-xs font-medium text-gray-500 dark:text-slate-400" data-l10n="HTTP OTA log">HTTP OTA log</legend>
+				<div class="flex justify-end mb-1">
 					<button data-needs="server" onclick="scp81LogClear()" class="px-2.5 py-1 text-xs rounded bg-gray-200 dark:bg-slate-700 text-gray-700 dark:text-slate-300 hover:bg-gray-300 dark:hover:bg-slate-600 disabled:opacity-40 disabled:cursor-not-allowed" data-l10n="Clear">Clear</button>
 				</div>
 				<div id="scp81-log" class="text-sm font-mono text-gray-600 dark:text-slate-400 max-h-[55vh] overflow-auto"></div>
-			</div>
+			</fieldset>
 		</div>
 		<div id="scp81-sub-scripts" class="hidden">
 			<div class="border border-gray-200 dark:border-slate-700 rounded p-3 mb-3">
diff --git a/frontend/style.css b/frontend/style.css
index b7c8cca..276224d 100644
--- a/frontend/style.css
+++ b/frontend/style.css
@@ -554,40 +554,68 @@ video {
   display: none;
 }
 
+.\!container {
+  width: 100% !important;
+}
+
 .container {
   width: 100%;
 }
 
 @media (min-width: 640px) {
+  .\!container {
+    max-width: 640px !important;
+  }
+
   .container {
     max-width: 640px;
   }
 }
 
 @media (min-width: 768px) {
+  .\!container {
+    max-width: 768px !important;
+  }
+
   .container {
     max-width: 768px;
   }
 }
 
 @media (min-width: 1024px) {
+  .\!container {
+    max-width: 1024px !important;
+  }
+
   .container {
     max-width: 1024px;
   }
 }
 
 @media (min-width: 1280px) {
+  .\!container {
+    max-width: 1280px !important;
+  }
+
   .container {
     max-width: 1280px;
   }
 }
 
 @media (min-width: 1536px) {
+  .\!container {
+    max-width: 1536px !important;
+  }
+
   .container {
     max-width: 1536px;
   }
 }
 
+.visible {
+  visibility: visible;
+}
+
 .static {
   position: static;
 }
@@ -612,6 +640,10 @@ video {
   inset: 0px;
 }
 
+.-top-2 {
+  top: -0.5rem;
+}
+
 .bottom-full {
   bottom: 100%;
 }
@@ -636,6 +668,11 @@ video {
   z-index: 50;
 }
 
+.mx-3 {
+  margin-left: 0.75rem;
+  margin-right: 0.75rem;
+}
+
 .mx-4 {
   margin-left: 1rem;
   margin-right: 1rem;
@@ -646,12 +683,16 @@ video {
   margin-right: auto;
 }
 
-.mb-1 {
-  margin-bottom: 0.25rem;
+.-mb-1 {
+  margin-bottom: -0.25rem;
 }
 
-.mb-1\.5 {
-  margin-bottom: 0.375rem;
+.mb-0\.5 {
+  margin-bottom: 0.125rem;
+}
+
+.mb-1 {
+  margin-bottom: 0.25rem;
 }
 
 .mb-10 {
@@ -674,10 +715,18 @@ video {
   margin-bottom: 1.5rem;
 }
 
+.ml-0\.5 {
+  margin-left: 0.125rem;
+}
+
 .ml-1 {
   margin-left: 0.25rem;
 }
 
+.ml-10 {
+  margin-left: 2.5rem;
+}
+
 .ml-2 {
   margin-left: 0.5rem;
 }
@@ -722,6 +771,10 @@ video {
   margin-top: 1rem;
 }
 
+.mt-5 {
+  margin-top: 1.25rem;
+}
+
 .block {
   display: block;
 }
@@ -742,6 +795,10 @@ video {
   display: grid;
 }
 
+.contents {
+  display: contents;
+}
+
 .hidden {
   display: none;
 }
@@ -750,6 +807,10 @@ video {
   height: 4rem;
 }
 
+.h-4 {
+  height: 1rem;
+}
+
 .h-screen {
   height: 100vh;
 }
@@ -758,6 +819,22 @@ video {
   max-height: 8rem;
 }
 
+.max-h-56 {
+  max-height: 14rem;
+}
+
+.max-h-\[35vh\] {
+  max-height: 35vh;
+}
+
+.max-h-\[45vh\] {
+  max-height: 45vh;
+}
+
+.max-h-\[55vh\] {
+  max-height: 55vh;
+}
+
 .max-h-\[60vh\] {
   max-height: 60vh;
 }
@@ -790,6 +867,10 @@ video {
   width: 3rem;
 }
 
+.w-14 {
+  width: 3.5rem;
+}
+
 .w-16 {
   width: 4rem;
 }
@@ -802,6 +883,14 @@ video {
   width: 6rem;
 }
 
+.w-32 {
+  width: 8rem;
+}
+
+.w-36 {
+  width: 9rem;
+}
+
 .w-4 {
   width: 1rem;
 }
@@ -818,6 +907,14 @@ video {
   width: 1.25rem;
 }
 
+.w-52 {
+  width: 13rem;
+}
+
+.w-56 {
+  width: 14rem;
+}
+
 .w-6 {
   width: 1.5rem;
 }
@@ -830,6 +927,11 @@ video {
   width: 2rem;
 }
 
+.w-fit {
+  width: -moz-fit-content;
+  width: fit-content;
+}
+
 .w-full {
   width: 100%;
 }
@@ -838,6 +940,14 @@ video {
   min-width: 0px;
 }
 
+.min-w-\[180px\] {
+  min-width: 180px;
+}
+
+.max-w-3xl {
+  max-width: 48rem;
+}
+
 .max-w-7xl {
   max-width: 80rem;
 }
@@ -870,6 +980,16 @@ video {
   border-collapse: collapse;
 }
 
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.animate-spin {
+  animation: spin 1s linear infinite;
+}
+
 .cursor-pointer {
   cursor: pointer;
 }
@@ -884,6 +1004,10 @@ video {
   resize: none;
 }
 
+.resize {
+  resize: both;
+}
+
 .list-inside {
   list-style-position: inside;
 }
@@ -904,6 +1028,14 @@ video {
   grid-template-columns: repeat(2, minmax(0, 1fr));
 }
 
+.grid-cols-3 {
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+}
+
+.grid-cols-4 {
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+}
+
 .flex-col {
   flex-direction: column;
 }
@@ -916,6 +1048,10 @@ video {
   align-items: flex-start;
 }
 
+.items-end {
+  align-items: flex-end;
+}
+
 .items-center {
   align-items: center;
 }
@@ -956,8 +1092,9 @@ video {
   gap: 1rem;
 }
 
-.gap-6 {
-  gap: 1.5rem;
+.gap-x-2 {
+  -moz-column-gap: 0.5rem;
+       column-gap: 0.5rem;
 }
 
 .gap-x-3 {
@@ -970,10 +1107,18 @@ video {
        column-gap: 1rem;
 }
 
+.gap-y-0\.5 {
+  row-gap: 0.125rem;
+}
+
 .gap-y-1 {
   row-gap: 0.25rem;
 }
 
+.gap-y-1\.5 {
+  row-gap: 0.375rem;
+}
+
 .gap-y-2 {
   row-gap: 0.5rem;
 }
@@ -1057,6 +1202,10 @@ video {
   border-width: 0px;
 }
 
+.border-2 {
+  border-width: 2px;
+}
+
 .border-b {
   border-bottom-width: 1px;
 }
@@ -1077,6 +1226,16 @@ video {
   border-top-width: 1px;
 }
 
+.border-blue-400 {
+  --tw-border-opacity: 1;
+  border-color: rgb(96 165 250 / var(--tw-border-opacity, 1));
+}
+
+.border-blue-500 {
+  --tw-border-opacity: 1;
+  border-color: rgb(59 130 246 / var(--tw-border-opacity, 1));
+}
+
 .border-gray-100 {
   --tw-border-opacity: 1;
   border-color: rgb(243 244 246 / var(--tw-border-opacity, 1));
@@ -1092,6 +1251,20 @@ video {
   border-color: rgb(209 213 219 / var(--tw-border-opacity, 1));
 }
 
+.border-green-400 {
+  --tw-border-opacity: 1;
+  border-color: rgb(74 222 128 / var(--tw-border-opacity, 1));
+}
+
+.border-purple-400 {
+  --tw-border-opacity: 1;
+  border-color: rgb(192 132 252 / var(--tw-border-opacity, 1));
+}
+
+.border-t-transparent {
+  border-top-color: transparent;
+}
+
 .bg-black\/50 {
   background-color: rgb(0 0 0 / 0.5);
 }
@@ -1126,6 +1299,11 @@ video {
   background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1));
 }
 
+.bg-gray-500 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(107 114 128 / var(--tw-bg-opacity, 1));
+}
+
 .bg-gray-600 {
   --tw-bg-opacity: 1;
   background-color: rgb(75 85 99 / var(--tw-bg-opacity, 1));
@@ -1155,11 +1333,20 @@ video {
   background-color: transparent;
 }
 
+.bg-violet-600 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(124 58 237 / var(--tw-bg-opacity, 1));
+}
+
 .bg-white {
   --tw-bg-opacity: 1;
   background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
 }
 
+.p-1\.5 {
+  padding: 0.375rem;
+}
+
 .p-2 {
   padding: 0.5rem;
 }
@@ -1251,10 +1438,18 @@ video {
   padding-bottom: 2rem;
 }
 
+.pb-0\.5 {
+  padding-bottom: 0.125rem;
+}
+
 .pb-1 {
   padding-bottom: 0.25rem;
 }
 
+.pb-3 {
+  padding-bottom: 0.75rem;
+}
+
 .pl-2 {
   padding-left: 0.5rem;
 }
@@ -1325,8 +1520,8 @@ video {
 }
 
 .text-xs {
-  font-size: 0.875rem;
-  line-height: 1.25rem;
+  font-size: 0.75rem;
+  line-height: 1rem;
 }
 
 .font-bold {
@@ -1357,6 +1552,11 @@ video {
   line-height: 1.375;
 }
 
+.text-amber-500 {
+  --tw-text-opacity: 1;
+  color: rgb(245 158 11 / var(--tw-text-opacity, 1));
+}
+
 .text-amber-600 {
   --tw-text-opacity: 1;
   color: rgb(217 119 6 / var(--tw-text-opacity, 1));
@@ -1447,6 +1647,11 @@ video {
   color: rgb(203 213 225 / var(--tw-text-opacity, 1));
 }
 
+.text-slate-400 {
+  --tw-text-opacity: 1;
+  color: rgb(148 163 184 / var(--tw-text-opacity, 1));
+}
+
 .text-white {
   --tw-text-opacity: 1;
   color: rgb(255 255 255 / var(--tw-text-opacity, 1));
@@ -1466,6 +1671,10 @@ video {
   text-decoration-line: underline;
 }
 
+.opacity-40 {
+  opacity: 0.4;
+}
+
 .opacity-50 {
   opacity: 0.5;
 }
@@ -1509,6 +1718,11 @@ video {
   background-color: rgb(209 213 219 / var(--tw-bg-opacity, 1));
 }
 
+.hover\:bg-gray-600:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(75 85 99 / var(--tw-bg-opacity, 1));
+}
+
 .hover\:bg-gray-700:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(55 65 81 / var(--tw-bg-opacity, 1));
@@ -1519,16 +1733,31 @@ video {
   background-color: rgb(254 202 202 / var(--tw-bg-opacity, 1));
 }
 
+.hover\:bg-red-700:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(185 28 28 / var(--tw-bg-opacity, 1));
+}
+
 .hover\:bg-slate-700:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(51 65 85 / var(--tw-bg-opacity, 1));
 }
 
+.hover\:bg-violet-700:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(109 40 217 / var(--tw-bg-opacity, 1));
+}
+
 .hover\:text-gray-600:hover {
   --tw-text-opacity: 1;
   color: rgb(75 85 99 / var(--tw-text-opacity, 1));
 }
 
+.hover\:text-red-500:hover {
+  --tw-text-opacity: 1;
+  color: rgb(239 68 68 / var(--tw-text-opacity, 1));
+}
+
 .hover\:text-red-600:hover {
   --tw-text-opacity: 1;
   color: rgb(220 38 38 / var(--tw-text-opacity, 1));
@@ -1551,10 +1780,6 @@ video {
   opacity: 0.4;
 }
 
-.disabled\:opacity-50:disabled {
-  opacity: 0.5;
-}
-
 .dark\:border-slate-600:is(.dark *) {
   --tw-border-opacity: 1;
   border-color: rgb(71 85 105 / var(--tw-border-opacity, 1));
@@ -1569,6 +1794,11 @@ video {
   border-color: rgb(51 65 85 / 0.5);
 }
 
+.dark\:border-slate-800:is(.dark *) {
+  --tw-border-opacity: 1;
+  border-color: rgb(30 41 59 / var(--tw-border-opacity, 1));
+}
+
 .dark\:bg-blue-500:is(.dark *) {
   --tw-bg-opacity: 1;
   background-color: rgb(59 130 246 / var(--tw-bg-opacity, 1));
@@ -1593,6 +1823,11 @@ video {
   background-color: rgb(15 23 42 / var(--tw-bg-opacity, 1));
 }
 
+.dark\:text-amber-400:is(.dark *) {
+  --tw-text-opacity: 1;
+  color: rgb(251 191 36 / var(--tw-text-opacity, 1));
+}
+
 .dark\:text-blue-400:is(.dark *) {
   --tw-text-opacity: 1;
   color: rgb(96 165 250 / var(--tw-text-opacity, 1));
@@ -1658,6 +1893,11 @@ video {
   color: rgb(250 204 21 / var(--tw-text-opacity, 1));
 }
 
+.dark\:text-yellow-500:is(.dark *) {
+  --tw-text-opacity: 1;
+  color: rgb(234 179 8 / var(--tw-text-opacity, 1));
+}
+
 .dark\:invert:is(.dark *) {
   --tw-invert: invert(100%);
   filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
@@ -1685,9 +1925,7 @@ video {
 .dark\:hover\:text-slate-300:hover:is(.dark *) {
   --tw-text-opacity: 1;
   color: rgb(203 213 225 / var(--tw-text-opacity, 1));
-}
-
-/* ===== Theme contrast adjustments ===== */
+}/* ===== Theme contrast adjustments ===== */
 
 /* Light theme: darken softer (muted) text one step for higher contrast */
 .text-gray-400 {
diff --git a/frontend/sw.js b/frontend/sw.js
index f6e84f5..d40df17 100644
--- a/frontend/sw.js
+++ b/frontend/sw.js
@@ -1,4 +1,4 @@
-const CACHE = 'simple-v191';
+const CACHE = 'simple-v192';
 const URLS = [
   'index.html',
   'help.html',
diff --git a/frontend/tests/html.test.js b/frontend/tests/html.test.js
index 09ce94f..8bc6dd1 100644
--- a/frontend/tests/html.test.js
+++ b/frontend/tests/html.test.js
@@ -27,19 +27,37 @@ test('cards list shows the SCP81 PSK column with blue/red row buttons', () => {
 
 test('the card form groups the SCP80 and SCP81 fields into labelled fieldsets', () => {
     const fieldsets = [...html.matchAll(/<fieldset[\s\S]*?<\/fieldset>/g)].map(m => m[0]);
-    assert.strictEqual(fieldsets.length, 2);
-    assert.match(fieldsets[0], /<legend[^>]*data-l10n="SCP80 \(GSM 03\.48, ETSI TS 102 225\)"/);
-    assert.match(fieldsets[0], /id="cards-kic"/);
-    assert.match(fieldsets[0], /id="cards-kid-key"/);
-    assert.match(fieldsets[1], /<legend[^>]*data-l10n="SCP81 \(HTTP OTA\)"/);
-    assert.match(fieldsets[1], /id="cards-psk-id"/);
-    assert.match(fieldsets[1], /id="cards-psk-key"/);
+    const scp80 = fieldsets.find(f => /data-l10n="SCP80 \(GSM 03\.48, ETSI TS 102 225\)"/.test(f));
+    const scp81 = fieldsets.find(f => /data-l10n="SCP81 \(HTTP OTA\)"/.test(f));
+    assert.ok(scp80, 'SCP80 card fieldset not found');
+    assert.ok(scp81, 'SCP81 card fieldset not found');
+    assert.match(scp80, /id="cards-kic"/);
+    assert.match(scp80, /id="cards-kid-key"/);
+    assert.match(scp81, /id="cards-psk-id"/);
+    assert.match(scp81, /id="cards-psk-key"/);
     // the PSK explanation lives inside the SCP81 group, not outside it
-    assert.match(fieldsets[1], /data-l10n="SCP81 HTTP OTA: the listener picks the key/);
+    assert.match(scp81, /data-l10n="SCP81 HTTP OTA: the listener picks the key/);
     // the ICCID field is not in either group
     assert.ok(!fieldsets.some(f => f.includes('id="cards-iccid"')));
 });
 
+test('labelled containers use fieldsets with embedded legends', () => {
+    const legendCls = '<legend class="px-1 text-xs font-medium text-gray-500 dark:text-slate-400"';
+    for (const label of ['STK menu', 'STATUS and Polling', 'TERMINAL PROFILE',
+        'Events that the card monitors (SET UP EVENT LIST):', 'Fetched proactive commands:',
+        'HTTP OTA log']) {
+        assert.ok(html.includes(legendCls + ' data-l10n="' + label + '"'), 'no legend for ' + label);
+    }
+    // legends with dynamic state spans put data-l10n on the inner span so
+    // translatePage() does not wipe the sibling
+    assert.ok(html.includes('<legend class="px-1 text-xs font-medium text-gray-500 dark:text-slate-400"><span data-l10n="HTTP OTA listener">HTTP OTA listener</span> <span id="scp81-state"'));
+    assert.ok(html.includes('<legend class="px-1 text-xs font-medium text-gray-500 dark:text-slate-400"><span data-l10n="Script results (R-APDUs)">Script results (R-APDUs)</span> <span id="scp81-results-state"'));
+    // the Options block stays a details/summary, with the summary styled as
+    // the embedded label (page-background patch over the border)
+    assert.match(html, /<details id="scp81-opts" class="border border-gray-200 dark:border-slate-700 rounded mb-3">\s*<summary class="w-fit list-inside[^"]*bg-neutral-50 dark:bg-slate-900"/);
+    assert.match(html, /<summary class="w-fit list-inside[^"]*">\s*<span data-l10n="Options \(applied at Start\)">/);
+});
+
 test('PLI qualifier tables cover all standard qualifiers', () => {
     // ESN (07), MEID (0B) and Supported RATs (1A) must at least be named, in
     // both the TR Config dictionary and the proactive-log short labels.