[data-theme="dark"] {
    color-scheme: dark;
    --PageBcgrd: #15181c;  --CardsBgrd: #1f2328;  --Wall_Bgrd: #181b1f;  --TextColr: #e3e3e3;
    --InptBgrd: #2a2f36;   --LinkColr: #8ab4f8;   --lablColor: #f0c8a0;  --lablBgrnd: #20262c;
    --grayColor: #5a5f66;  --FieldBord: #555b62;  --FieldBgrd: #2a2f36;  --shadColor: #00000066;
    --ButtnShad: #000000;  --HintsBgrd: #2b3036;  --HintsText: #eeeeee;  --tblRowDrk: #2a2f36;
    --tblRowLgt: #23272d;  --BtLnkBgrd: #3a3a20;  --BtLnkText: #eeeeee;  --fltBgColr: #2a2f36;
    --fltTxColr: #f0c8a0;  --btnTxNorm: #eeeeee;  --brunColor: #c08080;  --xx33Color: #22394a;
    --AccnColr: #8fd18f;
}
:where(:root) { --AccnColr: DarkGreen; }   /* Accent: card titles/icons, OK buttons. :where() = no specificity, so the dark block wins */
[data-p2h-vars] body { background: var(--PageBcgrd) !important; background-image: none !important; color: var(--TextColr); }
[data-p2h-vars] a { color: var(--LinkColr); }
[data-p2h-vars] a.button, [data-p2h-vars] a.button:visited {   /* htm_LinkButt: white text on a darker green (not the link color) */
    color: #ffffff !important; background-color: #2e7d32 !important; }
[data-p2h-vars] a.button:hover { background-color: #388e3c !important; }
[data-p2h-vars] .buttstyl { background-color: var(--InptBgrd) !important; color: var(--TextColr) !important; border-color: #5a6370 !important; }
[data-p2h-vars] input, [data-p2h-vars] textarea, [data-p2h-vars] select,
[data-p2h-vars] .boxStyle, [data-p2h-vars] .inpField input {
    background-color: var(--InptBgrd) !important; color: var(--TextColr) !important; border-color: var(--grayColor); }
[data-p2h-vars] .cardsTitl, [data-p2h-vars] [style*="DarkGreen" i],
[data-p2h-vars] [style*="color: green" i], [data-p2h-vars] [style*="color:green" i] { color: var(--AccnColr) !important; }
[data-p2h-vars] .pagination { background: var(--CardsBgrd) !important; color: var(--TextColr); }   /* PDF viewer: "Page: 1 / 2" */
[data-p2h-vars] [style*="background-color: white" i], [data-p2h-vars] [style*="background-color:white" i],
[data-p2h-vars] [style*="background: white" i],       [data-p2h-vars] [style*="background:white" i],
[data-p2h-vars] [style*="background-color: #fff" i],  [data-p2h-vars] [style*="background-color:#fff" i],
[data-p2h-vars] [style*="background-color: ivory" i], [data-p2h-vars] [style*="background-color:ivory" i],
[data-p2h-vars] [style*="background-color: lightyellow" i], [data-p2h-vars] [style*="background-color:lightyellow" i],
[data-p2h-vars] [style*="background-color:lightcyan" i],    [data-p2h-vars] [style*="background-color: lightcyan" i],
[data-p2h-vars] [style*="background-color: lightgray" i],   [data-p2h-vars] [style*="background-color:lightgray" i],
[data-p2h-vars] .mnu_heads {
    background-color: var(--CardsBgrd) !important; color: var(--TextColr); }
[data-p2h-vars] [style*="color: black" i], [data-p2h-vars] [style*="color:black" i],
[data-p2h-vars] [style*="color:#550000" i], [data-p2h-vars] [style*="color: #550000" i],
[data-p2h-vars] [style*="color:#500000" i], [data-p2h-vars] [style*="color: #500000" i],
[data-p2h-vars] [style*="color: #000000" i], [data-p2h-vars] [style*="color:#000000" i],
[data-p2h-vars] [style*="color: #000;" i],   [data-p2h-vars] [style*="color:#000;" i] { color: var(--TextColr) !important; }
/* 3. The vertical page texts at the left / right edge (htm_Page_ hint / info) */
[data-p2h-vars] [style*="background-color:#ddddddbd" i] { background-color: #2a2f36cc !important; color: var(--TextColr) !important; }
[data-p2h-vars] .tablesorter-blue, [data-p2h-vars] .tablesorter-blue td { background-color: var(--tblRowLgt) !important; color: var(--TextColr) !important; border-color: #3a3f46 !important; }
[data-p2h-vars] .tablesorter-blue tbody > tr.even > td { background-color: var(--CardsBgrd) !important; }
[data-p2h-vars] .tablesorter-blue tbody > tr.odd > td  {   /* Zebra stripe: a clear shade of the card color (dark and custom themes) */
    background-color: color-mix(in srgb, var(--CardsBgrd) 86%, var(--AccnColr)) !important; }
[data-p2h-vars] .tablesorter-blue tbody td input:not([type=checkbox]):not([type=radio]), [data-p2h-vars] .tablesorter-blue tbody td textarea {
    background-color: transparent !important; }   /* Let the zebra stripe show through the cell fields - as in the light theme */
[data-p2h-vars] .tablesorter-blue .tablesorter-filter-row, [data-p2h-vars] .tablesorter-blue .tablesorter-filter-row td {
    background-color: color-mix(in srgb, var(--CardsBgrd) 75%, var(--AccnColr)) !important; }
[data-p2h-vars] .tablesorter-blue tbody > tr:hover > td { background-color: color-mix(in srgb, var(--CardsBgrd) 70%, var(--AccnColr)) !important; }
[data-p2h-vars] .tablesorter-blue th, [data-p2h-vars] .tablesorter-blue thead td { background-color: #26364a !important; color: #e3e3e3 !important; }
[data-p2h-vars] [style*="_background.png"], [data-p2h-vars] .grid-container {
    background-image: none !important; background-color: var(--PageBcgrd) !important; }
[data-p2h-vars] [id^="chead"] {   /* Card headers: a shade of the card color (works for dark and custom themes) */
    background-image: none !important; background-color: color-mix(in srgb, var(--CardsBgrd) 90%, var(--TextColr)) !important; }

/* htm_Inbox(): placeholder text in an empty editable box */
.p2hInbox[contenteditable=true]:empty:not(:focus)::before { content: attr(data-ph); color: var(--grayColor, #888); font-style: italic; }

/* Theme button */
.p2hThemeButt { cursor: pointer; border: 1px solid var(--grayColor); border-radius: 6px; padding: 3px 10px;
    background: var(--InptBgrd); color: var(--TextColr); font-size: 13px; }

/* Theme button as a menu item in htm_Menu_TopDown */
.topnav .p2hThemeButt { border: none; border-radius: 0; padding: 6px 12px; margin: 0; background-color: inherit; color: white; font-family: inherit; }
.topnav .p2hThemeButt:hover { background-color: #555; }
@media screen and (max-width: 640px) { .topnav .mnuTheme { display: none; } .topnav.responsive .mnuTheme { display: block; float: none; } }

/* htm_ViewBar: a small floating toolbar (zoom, full screen, theme) - it lives outside <body>, so the page zoom does not scale it */
.p2hViewBar { position: fixed; top: 38px; right: 12px; z-index: 1001; display: flex; align-items: center; gap: 1px; padding: 3px 4px;
    background: rgba(40,44,52,0.92); color: #fff; border-radius: 8px; box-shadow: 0 4px 16px rgba(0,0,0,0.35);
    font: 13px/1.2 sans-serif; user-select: none; }
.p2hViewBar button { background: none; border: none; color: #fff; cursor: pointer; padding: 4px 7px; border-radius: 5px; font: inherit; }
.p2hViewBar button:hover { background: rgba(255,255,255,0.15); }
.p2hViewBar button:focus-visible, .p2hVbGrip:focus-visible { outline: 2px solid #4fc3f7; outline-offset: -2px; }
.p2hViewBar .p2hThemeTx { display: none; }
/* Column view (htm_ViewBar button): the cards flow in columns; the browser picks the number of columns from the width */
.p2hColview { column-width: 480px; column-gap: 16px; padding: 0 8px; }
.p2hColview > * { column-span: all; }                           /* Menu, headings, text: across all columns */
.p2hColview > span:not([id^=card]) { display: block; }          /* column-span works on blocks only (the menus are in a <span>) */
.p2hColview > [id^=card] { column-span: none; display: block; width: auto !important; max-width: 100%;
    margin: 0 0 14px !important; break-inside: avoid; -webkit-column-break-inside: avoid; }
.p2hViewBar [aria-pressed=true] { background: rgba(79,195,247,0.30); }
/* Skip links: hidden until they get keyboard focus */
.p2hSkip { position: absolute; left: -9999px; top: 4px; z-index: 3000; padding: 8px 14px; background: #2c3e50; color: #fff !important; border-radius: 6px; font-weight: 600; }
.p2hSkip:focus { left: 8px; outline: 2px solid #4fc3f7; }
.p2hSkip + .p2hSkip:focus { left: 200px; }
/* htm_NotePad(): uses the help window style; a dot on the button when there are notes */
.p2hNoteWin { top: 120px; right: 60px; }
.p2hNoteText { flex: 1; min-height: 220px; margin: 10px; padding: 8px; resize: vertical; font: 14px/1.5 sans-serif;
    border: 1px solid var(--grayColor, #aaa); border-radius: 4px; background: var(--InptBgrd, #fff); color: var(--TextColr, #222); }
.p2hNoteFoot { display: flex; align-items: center; gap: 6px; opacity: 1; }
.p2hNoteState { margin-right: auto; opacity: 0.7; }
.p2hNoteFoot button { background: none; border: 1px solid rgba(127,127,127,0.4); border-radius: 4px; padding: 3px 9px; cursor: pointer; color: inherit; font-size: 12px; }
.p2hNoteFoot button:hover { background: rgba(127,127,127,0.15); }
.p2hNoteButt { position: relative; }
.p2hNoteButt.hasNotes::after { content: ""; position: absolute; top: 3px; right: 3px; width: 7px; height: 7px; border-radius: 50%; background: #f0a050; }
/* Print (all pages): only the content - no menus, bars or buttons; folded cards are printed open; no background image */
@media print {
    nav, .topnav, .p2hViewBar, .p2hQuickBar, .p2hSideTxt, .p2hHelpWin, .p2hCardGrip, .p2hGripHint, .p2hMoveHint, .p2hTableTools, .p2hSessionEnd,
    [id^=btnGo], .ctxP_Js, button, .acceptbutt, a.button { display: none !important; }
    body { background: #fff !important; background-image: none !important; color: #000 !important; padding: 0 !important; }
    [id^=HideBody] { display: block !important; max-height: none !important; overflow: visible !important; }
    [id^=card] { box-shadow: none !important; }                    /* (no break-inside:avoid - a big card would leave an empty page) */
    .wrapper { height: auto !important; overflow: visible !important; }   /* Table windows: all rows */
    ic[onclick], abbr.hint > data-hint { display: none !important; }        /* Card control icons, hints */
    [id^=chead] { break-after: avoid; }                             /* A card header stays with the start of its content */
    .p2hPrintBlock, fieldset, [id^=card]:has([id^=card], table) { display: block !important; }   /* An inline-block cannot be split over pages -
                                       big ones become blocks: groups, cards with cards or tables inside (they grow when printed open), and (beforeprint) tall cards */
    a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.8em; }   /* External links: show the address */
}
.p2hSessionEnd { position: fixed; top: 10px; left: 50%; transform: translateX(-50%); z-index: 2000; width: min(640px, calc(100vw - 24px)); }
.p2hSessionEnd button { margin-left: 8px; }
/* htm_QuickBar(): fixed at the bottom - the page gets room, and fixed elements near the bottom are lifted above the bar */
.p2hQuickBar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1000; display: flex; justify-content: center; gap: 6px;
    padding: 5px 8px; overflow-x: auto; background: rgba(40,44,52,0.96); border-top: 2px solid var(--AccnColr, DarkGreen);
    box-shadow: 0 -2px 10px rgba(0,0,0,0.25); box-sizing: border-box; }
.p2hQbItem { display: flex; align-items: center; gap: 7px; padding: 5px 13px; border-radius: 5px; white-space: nowrap;
    color: #fff !important; text-decoration: none; font: 600 13px/1.3 sans-serif; }
.p2hQbItem:hover, .p2hQbItem:focus-visible { background: rgba(255,255,255,0.15); outline: none; }
.p2hQbItem:focus-visible { box-shadow: inset 0 0 0 2px #4fc3f7; }
.p2hQbDot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.p2hHasQuickBar body { padding-bottom: 56px; }
.p2hHasQuickBar #btnGoTop { bottom: 60px !important; }  .p2hHasQuickBar #btnGoMid { bottom: 94px !important; }
.p2hHasQuickBar #btnGoBot { bottom: 128px !important; }
.p2hHasQuickBar .p2hSideTxt { margin-bottom: 52px; }
.p2hHasQuickBar #snackbar.show { bottom: 70px !important; }
@media screen and (max-width: 600px) { .p2hQbTxt { display: none; } .p2hQbItem { padding: 7px 12px; font-size: 16px; } }   /* Phones: icons only */
@media print { .p2hQuickBar { display: none !important; } .p2hHasQuickBar body { padding-bottom: 0; } }
/* htm_PageHelp(): the help window (lives outside <body>, like the view bar) */
.p2hHelpButt:disabled { opacity: 0.35; cursor: not-allowed; }
.p2hHelpWin { position: fixed; top: 84px; right: 24px; z-index: 1003; width: min(460px, calc(100vw - 24px)); max-height: calc(100vh - 100px);
    display: flex; flex-direction: column; background: var(--CardsBgrd, #fff); color: var(--TextColr, #222); border: 1px solid #9aa5b1;
    border-radius: 8px; box-shadow: 0 10px 30px rgba(0,0,0,0.3); font: 14px/1.55 sans-serif; text-align: left; }
.p2hHelpWin[hidden] { display: none; }
.p2hHelpHead, .p2hNoteHead { display: flex; align-items: center; gap: 6px; padding: 9px 12px; background: #2c3e50; color: #fff; border-radius: 7px 7px 0 0;
    cursor: move; user-select: none; touch-action: none; font-weight: 600; }
.p2hHelpHead > ic, .p2hNoteHead > ic { color: #f0a050; }
.p2hHelpClose, .p2hNoteClose { margin-left: auto; background: none; border: none; color: #cfd6dd; font-size: 22px; line-height: 1; cursor: pointer; padding: 0 4px; }
.p2hHelpClose:hover, .p2hHelpClose:focus-visible, .p2hNoteClose:hover, .p2hNoteClose:focus-visible { color: #fff; }
.p2hHelpBody { padding: 4px 16px 10px; overflow-y: auto; }
.p2hHelpBody:focus { outline: none; }                          /* Gets focus when opened (keyboard scroll) - the window itself shows where you are */
.p2hHelpBody h3 { font-size: 16px; margin: 10px 0 6px; }
.p2hHelpFoot { padding: 6px 12px; border-top: 1px solid rgba(127,127,127,0.25); font-size: 11px; opacity: 0.7; text-align: right; }
/* htm_LangSelect(): flag button and the list of languages */
.p2hLang { position: relative; display: inline-flex; }
.p2hFlag { vertical-align: -2px; border-radius: 2px; box-shadow: 0 0 0 1px rgba(255,255,255,0.35); }
.p2hFlagTx { display: inline-block; min-width: 20px; font-size: 10px; text-align: center; border: 1px solid currentColor; border-radius: 2px; }
.p2hLangCode { font-size: 11px; }
.p2hLangList { position: absolute; top: calc(100% + 6px); right: 0; z-index: 1002; display: flex; flex-direction: column; min-width: 150px;
    padding: 4px; background: rgba(40,44,52,0.97); border-radius: 8px; box-shadow: 0 4px 16px rgba(0,0,0,0.45); }
.p2hLangList[hidden] { display: none; }
.p2hLangList.up { top: auto; bottom: calc(100% + 6px); }
.p2hLangList button { display: flex; align-items: center; gap: 8px; text-align: left; white-space: nowrap; }
.p2hLangList button[aria-checked=true] { background: rgba(255,255,255,0.18); font-weight: 600; }
.p2hVbGrip { cursor: grab; color: #aaa; padding: 4px 5px; touch-action: none; border-radius: 5px; }
.p2hVbGrip:hover { color: #fff; }
.p2hVbGrip.dragging { cursor: grabbing; color: #4fc3f7; }
.p2hVbZoom { min-width: 3.3em; text-align: center; }
.p2hVbSep { width: 1px; align-self: stretch; background: rgba(255,255,255,0.25); margin: 3px 3px; }

/* Dark theme: menu and view bar a step lighter than the page, so they stand out */
[data-theme="dark"] .topnav, [data-theme="dark"] .topnav .dropdown, [data-theme="dark"] .topnav a.icon { background-color: #464e5a !important; }
[data-theme="dark"] .topnav { box-shadow: 0 2px 10px rgba(0,0,0,0.5); }
[data-theme="dark"] .topnav a:hover, [data-theme="dark"] .dropdown:hover .dropbtn,
[data-theme="dark"] .topnav .p2hThemeButt:hover { background-color: #5c6573 !important; }
[data-theme="dark"] .topnav .mnu_heads { background-color: #5a6370 !important; color: #f2f2f2; }
[data-theme="dark"] .p2hViewBar { background: rgba(78,86,99,0.97); border: 1px solid rgba(255,255,255,0.14); box-shadow: 0 4px 16px rgba(0,0,0,0.55); }
[data-theme="dark"] .p2hViewBar button:hover { background: rgba(255,255,255,0.18); }

/* sysAlert / sysConfirm / sysPrompt dialogs (theme-aware) */
dialog.p2hDlg { border: 1px solid var(--grayColor); border-radius: 8px; padding: 0; min-width: 280px; max-width: min(520px, 92vw);
    background: var(--CardsBgrd); color: var(--TextColr); box-shadow: 0 8px 30px rgba(0,0,0,.35); }
dialog.p2hDlg::backdrop { background: rgba(0,0,0,.35); }
.p2hDlgHead { padding: 8px 14px; font-weight: 600; border-bottom: 1px solid var(--grayColor); }
.p2hDlgBody { padding: 14px; white-space: pre-line; text-align: left; }
.p2hDlgInp  { width: 100%; box-sizing: border-box; margin-top: 8px; padding: 5px; }
.p2hDlgFoot { padding: 8px 14px 12px; text-align: right; }
.p2hDlgFoot button { margin-left: 8px; padding: 4px 14px; border-radius: 5px; border: 1px solid var(--grayColor);
    background: var(--InptBgrd); color: var(--TextColr); cursor: pointer; }
.p2hDlgFoot button.p2hDlgOk { background: #1A6E1A; border-color: #1A6E1A; color: white; }
[data-p2h-custom] .p2hDlgFoot button.p2hDlgOk { background: var(--AccnColr); border-color: var(--AccnColr); }

/* Theme editor (htm_ThemeEditor) */
.p2hThemeEd { display: inline-grid; grid-template-columns: auto auto; gap: 6px 12px; align-items: center; text-align: left; }
.p2hThemeEd input[type=color] { width: 44px; height: 26px; padding: 0; border: 1px solid var(--grayColor); border-radius: 4px; cursor: pointer; }
.p2hThemeEd select { padding: 2px 6px; }
.p2hThemeEdButt { margin-top: 10px; }
.p2hThemeEdButt button { margin: 0 4px; padding: 4px 12px; border-radius: 5px; border: 1px solid var(--grayColor); background: var(--InptBgrd); color: var(--TextColr); cursor: pointer; }