/* Quick Record · WUMETAX shared visual language
   Based on the current html-lab.wumetax.com: navy header, blue actions,
   white workspace, crisp borders, compact labels and minimal shadows.
   The original Tailwind utilities and JavaScript functionality are retained. */
:root {
  color-scheme: light;
  --qr-navy:#111827;
  --qr-navy-alt:#1f2937;
  --qr-blue:#3b82f6;
  --qr-blue-dark:#2563eb;
  --qr-border:#e5e7eb;
  --qr-border-strong:#d1d5db;
  --qr-ink:#111827;
  --qr-muted:#6b7280;
  --qr-surface:#fff;
  --qr-subtle:#f9fafb;
  --qr-focus:#f59e0b;
}
html {scroll-padding-top:100px}
body {background:#fff!important;color:var(--qr-ink)!important;font-family:Outfit,"Noto Sans TC","Microsoft JhengHei",sans-serif!important;font-size:14px}
*,*::before,*::after {text-shadow:none!important;box-shadow:none!important}
body,header,section,button,input,textarea,select {transition-property:color,background-color,border-color,opacity}
button,a,input,textarea,select { -webkit-tap-highlight-color:transparent }
:where(button,a,input,select,textarea):focus-visible{outline:3px solid var(--qr-focus)!important;outline-offset:2px}
button:disabled {cursor:not-allowed;opacity:.55}
a {color:inherit}
body > header {
  background:var(--qr-navy)!important;
  color:#fff!important;
  border-bottom:4px solid var(--qr-blue)!important;
  backdrop-filter:none!important;
  position:sticky;
  top:0;
  z-index:40;
}
body > header > div:first-child {max-width:1840px!important;min-height:76px;height:auto!important;padding-block:10px;gap:14px}
.qr-brand {gap:11px}
.qr-brand-mark {
  display:grid;place-items:center;width:43px;height:43px;flex:none;
  color:#fff!important;background:var(--qr-blue);border-radius:6px;
  font-size:28px;font-weight:900;line-height:1;text-decoration:none;letter-spacing:-2px
}
.qr-brand-copy h1 {font-size:clamp(18px,1.8vw,23px)!important;font-weight:800;letter-spacing:-.025em;color:#fff}
.qr-brand-badge {display:inline-block;padding:4px 7px;border-radius:5px;background:#f59e0b;color:#111827;font:800 10px/1.2 Outfit,"Noto Sans TC",sans-serif;letter-spacing:.045em;white-space:nowrap}
.qr-brand-description {font-size:11px;margin-top:5px;color:#d1d5db;white-space:normal;line-height:1.45}
body > header .text-slate-500,
body > header .text-slate-400 {color:#d1d5db!important}
body > header > div:first-child > div {min-width:0}
body > header .bg-slate-100,
body > header .bg-slate-800,
body > header .dark\\:bg-slate-800 {background:var(--qr-navy-alt)!important;border-color:#374151!important}
body > header select,
body > header select option {color:#fff!important;background:var(--qr-navy-alt);font-size:12px}
body > header button {
  min-height:37px;border-radius:6px!important;font-weight:650
}
body > header button:not(.bg-brand-600) {color:#e5e7eb!important}
body > header button:hover {filter:brightness(1.12)}
body > header button.bg-brand-600 {background:var(--qr-blue)!important}
#btnLayoutDashboard,#btnLayoutTabs {border-radius:5px!important;padding:9px 12px!important;white-space:nowrap}
#btnLayoutDashboard.bg-white,#btnLayoutTabs.bg-white {background:#fff!important;color:#111827!important}
#topTabStrip {background:#1f2937!important;border-top:1px solid #374151!important}
#topTabStrip button {padding-block:10px!important;font-size:12px}
#topTabStrip button.bg-brand-600 {background:#2563eb!important;color:#fff!important}
main {max-width:1840px!important;padding:20px clamp(12px,2.2vw,30px)!important}
#dashboardGrid {gap:16px!important;align-items:stretch}
#middleColumnWrapper {display:flex;flex-direction:column;gap:16px}
#middleColumnWrapper > section {margin:0!important}
#module-notes,#module-sketch,#module-voice,#module-tally {
  background:var(--qr-surface)!important;border:1px solid var(--qr-border)!important;
  border-radius:7px!important;min-width:0
}
#module-notes > div:first-child,
#module-sketch > div:first-child,
#module-voice > div:first-child,
#module-tally > div:first-child {
  background:var(--qr-subtle)!important;border-bottom:1px solid var(--qr-border)!important;
  padding-block:15px!important
}
#module-notes h2,#module-sketch h2,#module-voice h2,#module-tally h2 {
  font-size:15px!important;color:var(--qr-ink);letter-spacing:-.015em;font-weight:800
}
#module-notes h2 + p,#module-sketch h2 + p,#module-voice h2 + p,#module-tally h2 + p {
  color:var(--qr-muted)!important;font-size:11px!important;line-height:1.5
}
#module-notes > div:first-child > div:first-child > div:first-child,
#module-sketch > div:first-child > div:first-child > div:first-child,
#module-voice > div:first-child > div:first-child > div:first-child,
#module-tally > div:first-child > div:first-child > div:first-child {
  border-radius:6px!important;background:#dbeafe!important;color:#1d4ed8!important
}
#dashboardGrid .bg-amber-50\\/30,
#dashboardGrid .bg-indigo-50\\/40 {background:#f9fafb!important}
#dashboardGrid .bg-slate-50,
#dashboardGrid .bg-slate-50\\/50 {background:#f9fafb!important}
#dashboardGrid .text-indigo-700,
#dashboardGrid .text-amber-700 {color:#1d4ed8}
#dashboardGrid .bg-gradient-to-br {background:#111827!important}
#dashboardGrid .bg-gradient-to-br > div > div {border-radius:6px!important}
#dashboardGrid .bg-gradient-to-br .text-emerald-400 {color:#93c5fd!important}
#dashboardGrid .bg-gradient-to-br .text-indigo-200 {color:#bfdbfe!important}
#dashboardGrid .bg-gradient-to-br .text-amber-300 {color:#fcd34d!important}
#dashboardGrid input:not([type=range]):not([type=checkbox]),
#dashboardGrid textarea,#dashboardGrid select {
  background:#fff!important;color:#111827!important;border:1px solid var(--qr-border-strong)!important;
  border-radius:6px!important;font-size:13px;min-height:36px
}
#dashboardGrid textarea {line-height:1.7;font-size:14px;min-height:140px}
#dashboardGrid input::placeholder,
#dashboardGrid textarea::placeholder {color:#9ca3af;opacity:1}
#dashboardGrid input:focus,#dashboardGrid textarea:focus,#dashboardGrid select:focus {
  border-color:var(--qr-blue)!important;outline:2px solid rgba(59,130,246,.18)!important;outline-offset:0
}
#dashboardGrid button {
  border-radius:6px!important;
  font-weight:650
}
#dashboardGrid button.bg-brand-600,
#dashboardGrid button.bg-emerald-600 {background:var(--qr-blue-dark)!important;color:#fff!important}
#dashboardGrid button.bg-brand-600:hover,
#dashboardGrid button.bg-emerald-600:hover {background:#1d4ed8!important}
#dashboardGrid button.bg-amber-500\\/10,
#dashboardGrid button.bg-indigo-500\\/10 {
  background:#eff6ff!important;color:#1d4ed8!important;
  border-color:#bfdbfe!important
}
#dashboardGrid button.bg-gradient-to-r {background:var(--qr-blue-dark)!important}
#dashboardGrid button.bg-slate-900 {background:#111827!important}
#dashboardGrid button:active {transform:translateY(1px)}
#dashboardGrid #canvasContainer {border-top:1px solid var(--qr-border);border-bottom:1px solid var(--qr-border)}
#dashboardGrid #canvasContainer,#dashboardGrid #sketchCanvas {min-height:245px}
#dashboardGrid .border-slate-100,
#dashboardGrid .border-slate-200 {border-color:var(--qr-border)!important}
#dashboardGrid #tallyListContainer {min-height:70px;max-height:480px}
#dashboardGrid #noteCardsContainer {max-height:500px}
#module-tally > div:last-child {background:#f3f4f6!important;border-top:1px solid var(--qr-border)!important}
#module-tally #footerCheckedTotal {color:#1d4ed8!important}
#dashboardGrid .text-brand-600 {color:#2563eb}
#dashboardGrid .bg-brand-600 {background:#2563eb}
#calcDrawer {
  background:#fff!important;border:1px solid var(--qr-border-strong)!important;
  border-radius:7px!important;z-index:45
}
#calcDrawer > div:first-child {background:#111827!important}
#calcDrawer button {border-radius:6px!important}
#calcDrawer input {border-radius:6px!important}
#calcDrawer .bg-brand-600 {background:#2563eb!important}
#fabCalcBtn {border-radius:7px!important;background:#2563eb!important}
#exportModal > div,#featureTipsModal > div,#customConfirmModal > div {
  border-radius:7px!important;border:1px solid var(--qr-border)!important
}
#exportModal button,#featureTipsModal button,#customConfirmModal button,
#exportModal label {border-radius:6px!important}
#exportModal .bg-brand-600,#featureTipsModal .bg-brand-600 {background:#2563eb!important}
#exportModal,#featureTipsModal,#customConfirmModal {backdrop-filter:none!important}
.qr-footer {
  max-width:1780px;width:calc(100% - 36px);margin:2px auto 20px;
  padding:14px 16px;border-top:1px solid var(--qr-border);
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  color:var(--qr-muted);font-size:12px;line-height:1.7
}
.qr-footer-dot {display:inline-block;width:7px;height:7px;background:#3b82f6;border-radius:50%;margin-right:5px}
.qr-footer a {color:#1d4ed8;text-decoration:none;white-space:nowrap;font-weight:750}
.qr-footer a:hover {text-decoration:underline}
@media (min-width:1024px) {
  #module-notes,#module-tally {min-height:645px}
  #middleColumnWrapper > section {flex:1}
}
@media (max-width:1250px) and (min-width:1024px) {
  .qr-brand-description {display:none}
  body > header > div:first-child {gap:8px}
  #btnLayoutDashboard,#btnLayoutTabs {font-size:10px;padding-inline:8px!important}
}
@media (max-width:1023px) {
  body > header {position:relative}
  body > header > div:first-child {padding:10px 12px;min-height:auto;gap:10px}
  #dashboardGrid {gap:14px!important}
  main {padding:14px!important}
  #module-notes,#module-sketch,#module-voice,#module-tally {border-radius:6px!important}
  nav[data-quick-record-mobile],body > nav {height:66px;padding-bottom:env(safe-area-inset-bottom);background:#111827!important;border-top:3px solid #3b82f6!important}
  body > nav .mobile-nav-btn {color:#d1d5db!important;font-size:12px}
  body > nav .mobile-nav-btn.text-brand-600 {color:#93c5fd!important}
  body > nav span {font-size:10px!important}
  #fabCalcBtn {bottom:83px}
  #calcDrawer {bottom:80px;max-height:calc(100dvh - 105px);overflow-y:auto}
  body {padding-bottom:90px!important}
}
@media (max-width:767px) {
  body > header > div:first-child {display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center}
  body > header > div:first-child > div:first-child {display:flex;flex-wrap:wrap;gap:8px}
  body > header > div:first-child > div:last-child {justify-self:end;display:flex;flex-wrap:wrap;justify-content:flex-end;gap:5px}
  .qr-brand-mark {height:37px;width:37px;font-size:24px}
  .qr-brand-copy h1 {font-size:17px!important}
  .qr-brand-badge {font-size:9px;padding:3px 5px}
  .qr-brand-description {display:none}
  #workspaceSelect {max-width:180px;font-size:11px}
  body > header button {min-height:34px}
  #module-notes > div:first-child,#module-tally > div:first-child {align-items:flex-start;gap:8px;flex-wrap:wrap}
  #module-notes > div:first-child > button {margin-left:42px}
  #dashboardGrid input,#dashboardGrid textarea {font-size:16px!important}
  #noteTitleInput {width:40%!important;min-width:100px}
  #noteBodyInput {min-width:0}
  #manualTallyForm > input,#manualTallyForm > select {grid-column:span 6 / span 6!important}
  #manualTallyForm > input:first-child {grid-column:1 / -1!important}
  #manualTallyForm > button {grid-column:1 / -1!important}
  #module-tally .grid-cols-3 {gap:8px}
  #module-tally #statCheckedTotal {font-size:20px}
  #calcDrawer {right:8px!important;left:8px!important;width:auto!important;max-width:none!important}
  #exportModal > div,#featureTipsModal > div,#customConfirmModal > div {max-height:calc(100dvh - 28px);overflow:auto}
  .qr-footer {display:block;margin-top:4px;width:calc(100% - 28px)}
  .qr-footer a {display:block;margin-top:6px}
}
@media (max-width:390px) {
  .qr-brand-badge {display:none}
  #workspaceSelect {max-width:150px}
  body > header > div:first-child > div:last-child {gap:3px}
  #noteColorPicker {flex-wrap:wrap}
  #module-tally #footerSummaryText {display:none}
}
@media print {
  body {background:#fff!important;color:#111827!important;padding:0!important}
  #dashboardGrid {display:block!important}
  #dashboardGrid section {break-inside:avoid;margin-bottom:12px!important}
  main {max-width:100%!important}
  .qr-footer {display:none!important}
}
@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after {animation:none!important;transition:none!important;scroll-behavior:auto!important}
}

/* Preserve the original dark-mode switch without compromising contrast. */
html.dark {color-scheme:dark;background:#0b1220}
html.dark body {background:#0b1220!important;color:#f3f4f6!important}
html.dark main {color:#f3f4f6}
html.dark #module-notes,
html.dark #module-sketch,
html.dark #module-voice,
html.dark #module-tally,
html.dark #calcDrawer {background:#182333!important;border-color:#374151!important}
html.dark #module-notes > div:first-child,
html.dark #module-sketch > div:first-child,
html.dark #module-voice > div:first-child,
html.dark #module-tally > div:first-child,
html.dark #dashboardGrid .bg-slate-50,
html.dark #dashboardGrid .bg-slate-50\/50,
html.dark #dashboardGrid .bg-amber-50\/30,
html.dark #dashboardGrid .bg-indigo-50\/40 {background:#1f2937!important;border-color:#374151!important}
html.dark #module-notes h2,
html.dark #module-sketch h2,
html.dark #module-voice h2,
html.dark #module-tally h2 {color:#f9fafb!important}
html.dark #module-notes h2 + p,
html.dark #module-sketch h2 + p,
html.dark #module-voice h2 + p,
html.dark #module-tally h2 + p {color:#cbd5e1!important}
html.dark #dashboardGrid input:not([type=range]):not([type=checkbox]),
html.dark #dashboardGrid textarea,
html.dark #dashboardGrid select {color:#f9fafb!important;background:#111827!important;border-color:#475569!important}
html.dark #dashboardGrid input::placeholder,
html.dark #dashboardGrid textarea::placeholder {color:#94a3b8!important}
html.dark #dashboardGrid .border-slate-100,
html.dark #dashboardGrid .border-slate-200 {border-color:#374151!important}
html.dark #dashboardGrid .text-slate-600,
html.dark #dashboardGrid .text-slate-700 {color:#cbd5e1!important}
html.dark #dashboardGrid .text-slate-500,
html.dark #dashboardGrid .text-slate-400 {color:#94a3b8!important}
html.dark #dashboardGrid .text-indigo-700,
html.dark #dashboardGrid .text-amber-700,
html.dark #dashboardGrid .text-brand-600 {color:#93c5fd!important}
html.dark #module-tally > div:last-child {background:#1f2937!important;border-color:#374151!important}
html.dark #module-tally #footerCheckedTotal {color:#93c5fd!important}
html.dark #dashboardGrid button.bg-amber-500\/10,
html.dark #dashboardGrid button.bg-indigo-500\/10 {background:#1e3a5f!important;color:#bfdbfe!important;border-color:#375e90!important}
html.dark #exportModal > div,
html.dark #featureTipsModal > div,
html.dark #customConfirmModal > div {background:#182333!important;color:#f3f4f6!important;border-color:#475569!important}
html.dark .qr-footer {border-color:#374151;color:#cbd5e1}
html.dark .qr-footer a {color:#93c5fd}
html.dark #canvasContainer {background-color:#fff!important}
/* Neutral note surfaces remain readable in both modes. */
html.dark #noteCardsContainer .bg-white,
html.dark #tallyListContainer .bg-white {color:#f9fafb!important;background:#1f2937!important}

/*
 * Contrast and responsive-header audit, 2026-10-26.
 * Use named controls instead of guessing the current Tailwind class. The CDN
 * adds utility CSS at runtime, while the view switch changes utility classes.
 * Explicit control states prevent pale-on-pale text in either theme.
 */
#quickRecordHeader {
  --qr-header-panel:#1f2937;
  --qr-header-stroke:#374151;
  --qr-header-fg:#f9fafb;
  --qr-header-muted:#cbd5e1;
  --qr-header-selected:#2563eb;
  background:#111827!important;
  color:var(--qr-header-fg)!important;
}
#quickRecordHeaderInner {
  display:grid!important;
  grid-template-columns:minmax(0,1fr) auto auto;
  align-items:center;
  gap:clamp(10px,1.1vw,20px)!important;
  max-width:1880px!important;
  margin-inline:auto;
  padding-inline:clamp(14px,1.7vw,30px)!important;
  overflow:visible;
}
#qrHeaderLeft {
  display:flex!important;align-items:center;gap:clamp(10px,1.1vw,20px)!important;
  min-width:0;flex-wrap:wrap
}
#qrHeaderLeft .qr-brand {flex:none;max-width:100%}
#qrHeaderLeft .qr-brand h1 {color:#fff!important}
#qrWorkspaceWrap {
  display:flex!important;align-items:center;gap:7px;
  background:var(--qr-header-panel)!important;
  border:1px solid var(--qr-header-stroke)!important;
  border-radius:6px!important;min-height:42px;
  padding:6px 9px!important;
  max-width:238px;
  min-width:0;
}
#qrWorkspaceWrap .fa-folder-open {color:#93c5fd!important}
#quickRecordHeader #workspaceSelect {
  color:var(--qr-header-fg)!important;
  background:var(--qr-header-panel)!important;
  border:0!important;
  min-width:0;max-width:100%;
  padding:5px 16px 5px 3px!important;
  font-size:13px!important;line-height:1.4;
  font-weight:650;
  opacity:1!important;
  color-scheme:dark;
  cursor:pointer;
}
#quickRecordHeader #workspaceSelect option {
  background:#1f2937!important;color:#f9fafb!important
}
#quickRecordHeader #workspaceSelect:focus-visible {
  outline:2px solid #fbbf24!important;outline-offset:3px
}
#qrLayoutToggle {
  display:flex;align-items:center;gap:3px;
  padding:4px!important;
  border:1px solid var(--qr-header-stroke)!important;
  background:var(--qr-header-panel)!important;
  border-radius:6px!important;
  min-width:0
}
#qrLayoutToggle button {
  display:flex;align-items:center;justify-content:center;gap:7px;
  background:transparent!important;
  color:var(--qr-header-muted)!important;
  border:1px solid transparent!important;
  min-height:37px;
  padding:8px 12px!important;
  white-space:nowrap;
  border-radius:5px!important;
  font-weight:700;
  opacity:1!important
}
#qrLayoutToggle button[aria-pressed="true"] {
  background:var(--qr-header-selected)!important;
  border-color:var(--qr-header-selected)!important;
  color:#fff!important
}
#qrLayoutToggle button[aria-pressed="false"] {
  background:transparent!important;
  border-color:transparent!important;
  color:#d1d5db!important
}
#qrLayoutToggle button[aria-pressed="false"]:hover {
  background:#374151!important;
  color:#fff!important
}
#qrHeaderActions {
  display:flex!important;align-items:center;justify-content:flex-end;
  gap:8px!important;flex-wrap:nowrap;min-width:0
}
#qrHeaderActions > button {
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  flex-shrink:0;min-height:42px;min-width:42px;
  padding:8px 12px!important;
  border:1px solid #475569!important;
  border-radius:6px!important;
  background:#1f2937!important;
  color:#f9fafb!important;
  font-size:13px!important;font-weight:750;
  opacity:1!important;
  white-space:nowrap
}
#qrHeaderActions > button:hover {
  background:#334155!important;border-color:#64748b!important
}
#qrHeaderActions #qrExportButton {
  background:#2563eb!important;
  border-color:#2563eb!important;
  color:#fff!important
}
#qrHeaderActions #qrExportButton:hover {
  background:#1d4ed8!important;border-color:#1d4ed8!important
}
#qrHeaderActions #qrFeatureTipsButton {
  background:#352b18!important;border-color:#785a28!important;
  color:#fcd34d!important
}
#qrHeaderActions #qrFeatureTipsButton:hover {
  background:#4b391c!important;border-color:#b18a3e!important
}
#qrHeaderActions #qrCalculatorButton i,
#qrHeaderActions #qrThemeToggleButton i {color:#93c5fd!important}
#qrHeaderActions #qrThemeToggleButton .fa-sun {color:#fcd34d!important}
#qrTimerWrap {
  display:flex;align-items:center;justify-content:center;gap:6px;
  padding:6px 9px!important;min-height:42px;
  border-radius:6px!important;
  border:1px solid #475569!important;
  background:#1f2937!important;
  color:#f9fafb!important;
  white-space:nowrap
}
#qrTimerWrap .fa-clock {color:#93c5fd!important}
#qrTimerWrap #timerDisplay {
  color:#f9fafb!important;opacity:1!important;font-weight:750
}
#qrTimerWrap button {
  width:28px;min-width:28px;min-height:28px;height:28px;
  padding:4px!important;border-radius:5px!important;
  background:#374151!important;color:#e5e7eb!important;
  border:1px solid transparent!important;
  opacity:1!important
}
#qrTimerWrap #btnTimerToggle {background:#2563eb!important;color:#fff!important}
#qrTimerWrap #btnTimerToggle:hover {background:#1d4ed8!important}
#qrTimerWrap button:hover {background:#475569!important}
#qrTimerWrap button:focus-visible {outline:2px solid #fbbf24!important}
#quickRecordHeader #topTabStrip {
  background:#1f2937!important;border-top:1px solid #475569!important
}
#quickRecordHeader #topTabStrip .module-tab-btn {
  background:transparent!important;
  color:#e5e7eb!important;
  border:1px solid transparent!important;
  min-height:39px;
  opacity:1!important;
  font-weight:700
}
#quickRecordHeader #topTabStrip .module-tab-btn[aria-current="page"] {
  color:#fff!important;background:#2563eb!important;
  border-color:#3b82f6!important
}
#quickRecordHeader #topTabStrip .module-tab-btn:not([aria-current="page"]):hover {
  background:#374151!important;color:#fff!important
}
/* Keep colored warnings meaningful, while eliminating faded control labels. */
#dashboardGrid #noteCardsContainer button:focus-visible,
#dashboardGrid #tallyListContainer button:focus-visible {
  outline:2px solid #f59e0b!important
}
#dashboardGrid .text-slate-400 {color:#64748b}
#dashboardGrid .text-slate-500 {color:#64748b}
#dashboardGrid .text-amber-700 {color:#92400e}
#dashboardGrid .text-rose-500 {color:#be123c}
#dashboardGrid #statCheckedTotal {color:#93c5fd!important}
#dashboardGrid #statCheckedCount,
#dashboardGrid #statAllCount,
#dashboardGrid #statMaxItem {color:#cbd5e1!important}
#dashboardGrid #categoryLegend {color:#e2e8f0!important}
html.dark #dashboardGrid .text-slate-400,
html.dark #dashboardGrid .text-slate-500 {color:#cbd5e1!important}
html.dark #dashboardGrid .text-amber-700 {color:#fcd34d!important}
html.dark #dashboardGrid .text-rose-500 {color:#fda4af!important}
/* The status strip and dialogs also need explicit foregrounds in dark mode. */
html.dark main > div:first-child {
  color:#f3f4f6!important;background:#1f2937!important;border-color:#374151!important
}
html.dark main > div:first-child .text-slate-500,
html.dark main > div:first-child .text-slate-600 {color:#cbd5e1!important}
html.dark #exportModal input,
html.dark #exportModal select,
html.dark #featureTipsModal input {
  background:#111827!important;color:#f9fafb!important;border-color:#475569!important
}
html.dark #exportModal .text-slate-500,
html.dark #featureTipsModal .text-slate-500,
html.dark #customConfirmModal .text-slate-500 {color:#cbd5e1!important}
html.dark #calcDrawer .text-slate-700,
html.dark #calcDrawer .text-slate-600 {color:#e2e8f0!important}
html.dark #calcDrawer input {color:#f9fafb!important}
/* Mobile nav must not inherit a white background from its Tailwind classes. */
@media(max-width:1023px) {
  #quickRecordHeader #qrLayoutToggle {display:none!important}
  body > nav .mobile-nav-btn {color:#cbd5e1!important;opacity:1!important}
  body > nav .mobile-nav-btn.text-brand-600 {color:#93c5fd!important}
}
@media(max-width:1650px) and (min-width:1024px) {
  #quickRecordHeaderInner {
    grid-template-columns:minmax(0,1fr) auto;
    grid-template-areas:"qr-left qr-actions" "qr-layout qr-layout";
    row-gap:8px!important
  }
  #qrHeaderLeft {grid-area:qr-left}
  #qrHeaderActions {grid-area:qr-actions}
  #qrLayoutToggle {grid-area:qr-layout;justify-self:center}
}
@media(max-width:1100px) and (min-width:768px) {
  #qrHeaderActions {flex-wrap:wrap}
  #qrHeaderLeft {gap:8px!important}
  #qrWorkspaceWrap {max-width:215px}
}
@media(max-width:767px) {
  /* Preserve the original md-only countdown timer visibility. */
  #qrTimerWrap {display:none!important}
  #quickRecordHeaderInner {
    display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;
    grid-template-areas:"qr-left" "qr-actions";
    align-items:stretch;
    gap:9px!important;
    padding:10px 12px!important
  }
  #qrHeaderLeft {
    grid-area:qr-left;
    justify-content:space-between;
    gap:8px!important;min-width:0;width:100%
  }
  #qrHeaderLeft .qr-brand {min-width:0;flex-shrink:1}
  #qrWorkspaceWrap {max-width:min(210px,100%);min-height:38px}
  #quickRecordHeader #workspaceSelect {font-size:12px!important}
  #qrHeaderActions {
    grid-area:qr-actions;
    justify-content:flex-start;
    flex-wrap:wrap!important;
    gap:6px!important;
    width:100%
  }
  #qrHeaderActions > button {flex:1 1 40px;min-height:39px;padding:7px 9px!important}
  #qrHeaderActions #qrExportButton {flex:1 1 72px}
  #qrTimerWrap {flex:1 1 115px;min-height:39px}
}
@media(max-width:420px) {
  #qrHeaderLeft {justify-content:flex-start}
  #qrHeaderLeft .qr-brand {flex:1 1 auto}
  #qrWorkspaceWrap {flex:1 1 100%;max-width:100%}
  #quickRecordHeader #workspaceSelect {flex:1}
  #qrHeaderActions #qrFeatureTipsButton {min-width:39px}
}