html[data-theme="dark"] {
    --bg: #0f172a;
    --surface: #1e293b;
    --border: #334155;
    --text: #e2e8f0;
    --sub: #94a3b8;
}
/* Topbar */
html[data-theme="dark"] .ip-topbar { background: rgba(15,23,42,.92) !important; border-bottom-color: #334155; }
html[data-theme="dark"] .ip-logo-text { color: #f1f5f9 !important; }
html[data-theme="dark"] .ip-logo-slogan { color: #64748b !important; }
html[data-theme="dark"] .ip-clock { background: #334155 !important; color: #94a3b8 !important; }
html[data-theme="dark"] .ip-hamburger span { background: #94a3b8 !important; }
html[data-theme="dark"] .ip-hamburger:hover { background: #334155 !important; }
/* Online popup – dark mode */
html[data-theme="dark"] .ip-pill { background: #064e3b; border-color: #065f46; color: #6ee7b7; }
html[data-theme="dark"] .ip-pill:hover { background: #065f46; }
@keyframes ip-flash-green-dark {
    0%, 100% { background: #064e3b; border-color: #065f46; }
    50%      { background: #166534; border-color: #16a34a; }
}
@keyframes ip-flash-red-dark {
    0%, 100% { background: #064e3b; border-color: #065f46; }
    50%      { background: #7f1d1d; border-color: #dc2626; }
}
html[data-theme="dark"] .ip-pill.flash-up   { animation: ip-flash-green-dark 1s ease-in-out 5; }
html[data-theme="dark"] .ip-pill.flash-down { animation: ip-flash-red-dark   1s ease-in-out 5; }
html[data-theme="dark"] #ip-online-popup { background: #1e293b; border-color: #334155; box-shadow: 0 8px 32px rgba(0,0,0,.5); }
html[data-theme="dark"] .ip-popup-hdr { border-bottom-color: #334155; color: #e2e8f0; }
html[data-theme="dark"] .ip-popup-close { color: #64748b; }
html[data-theme="dark"] .ip-popup-close:hover { color: #94a3b8; }
html[data-theme="dark"] .ip-user-row { border-bottom-color: #334155; }
html[data-theme="dark"] .ip-user-isp { color: #e2e8f0; }
html[data-theme="dark"] .ip-user-loc { color: #94a3b8; }
html[data-theme="dark"] .ip-user-ip { color: #94a3b8; }
html[data-theme="dark"] .ip-user-dev { color: #94a3b8; }
html[data-theme="dark"] .ip-user-ago { color: #64748b; }
html[data-theme="dark"] .ip-user-scroll { scrollbar-color: #475569 transparent; }
html[data-theme="dark"] .ip-user-scroll::-webkit-scrollbar-thumb { background: #475569; background-clip: content-box; }
html[data-theme="dark"] .ip-user-scroll::-webkit-scrollbar-thumb:hover { background: #64748b; background-clip: content-box; }
html[data-theme="dark"] .ip-popup-self { background: #0f172a; border-top-color: #334155; color: #64748b; }
html[data-theme="dark"] .ip-popup-loading { color: #64748b; }
html[data-theme="dark"] #ip-call-panel { background: #1e293b; border-color: #334155; box-shadow: 0 12px 40px rgba(0,0,0,.55); }
html[data-theme="dark"] #ip-chat-panel { background: #1e293b; border-color: #334155; box-shadow: 0 12px 40px rgba(0,0,0,.55); }
html[data-theme="dark"] .ip-chat-hdr { background: #0f172a; border-bottom-color: #334155; }
html[data-theme="dark"] .ip-chat-peer { background: #0f172a; border-bottom-color: #334155; }
html[data-theme="dark"] .ip-chat-peer div { color: #94a3b8; }
html[data-theme="dark"] .ip-chat-log { background: #1e293b; }
html[data-theme="dark"] #ip-chat-tabs { background: #0f172a; border-bottom-color: #334155; }
html[data-theme="dark"] .ip-chat-min-badge { background: #2563eb; }
html[data-theme="dark"] .ip-chat-tab { background: #1e293b; border-color: #334155; color: #e2e8f0; }
html[data-theme="dark"] .ip-chat-tab.active { border-color: #60a5fa; box-shadow: inset 0 0 0 1px #60a5fa; }
html[data-theme="dark"] .ip-chat-tab-badge { background: #2563eb; }
html[data-theme="dark"] .ip-chat-tab-typing { color: #60a5fa; }
html[data-theme="dark"] .ip-chat-tab-x { color: #64748b; }
html[data-theme="dark"] .ip-chat-bubble { background: #334155; color: #e2e8f0; }
html[data-theme="dark"] .ip-chat-ticks { color: #94a3b8; }
html[data-theme="dark"] .ip-chat-ticks.read { color: #60a5fa; }
html[data-theme="dark"] .ip-chat-dots i { background: #94a3b8; }
html[data-theme="dark"] .ip-chat-composer { border-top-color: #334155; }
html[data-theme="dark"] #ip-chat-input { background: #0f172a; border-color: #334155; color: #e2e8f0; }
html[data-theme="dark"] .ip-call-avatar { background: #0f172a; }
html[data-theme="dark"] .ip-call-title { color: #f1f5f9; }
html[data-theme="dark"] .ip-call-act.neutral { background: #334155; color: #e2e8f0; }
/* Section headers & all headings */
html[data-theme="dark"] .ip-section-title { color: var(--text) !important; }
html[data-theme="dark"] .ip-section-icon { background: rgba(59,130,246,.15) !important; }
html[data-theme="dark"] h1, html[data-theme="dark"] h2,
html[data-theme="dark"] h3, html[data-theme="dark"] h4,
html[data-theme="dark"] h5 { color: var(--text) !important; }
html[data-theme="dark"] .file-item-name { color: var(--text) !important; }
/* Cards */
html[data-theme="dark"] .card { background: #1e293b !important; border-color: #334155 !important; }
html[data-theme="dark"] .card-header { background: #0f172a !important; border-bottom-color: #334155 !important; color: #94a3b8 !important; }
html[data-theme="dark"] .ft-filelist-card > .card-header { background: #0f172a !important; }
/* Progress & drag-drop */
html[data-theme="dark"] .progress { background: #334155 !important; }
html[data-theme="dark"] #drag-and-drop-zone,
html[data-theme="dark"] .dm-uploader { background: #1e293b !important; border-color: #475569 !important; }
/* Inputs & selects */
html[data-theme="dark"] input[type=text],
html[data-theme="dark"] input[type=search],
html[data-theme="dark"] input[type=number],
html[data-theme="dark"] textarea,
html[data-theme="dark"] select { background: #1e293b !important; border-color: #334155 !important; color: #e2e8f0 !important; }
html[data-theme="dark"] select option { background: #1e293b !important; color: #e2e8f0 !important; }
/* Buttons — default/white variant */
html[data-theme="dark"] input[type=button],
html[data-theme="dark"] button:not(.btn-primary),
html[data-theme="dark"] .btn:not(.btn-primary) {
    background: #1e293b !important; border-color: #334155 !important; color: #cbd5e1 !important;
}
html[data-theme="dark"] input[type=button]:hover,
html[data-theme="dark"] button:not(.btn-primary):hover,
html[data-theme="dark"] .btn:not(.btn-primary):hover {
    background: #334155 !important; color: #f1f5f9 !important; border-color: #475569 !important;
}
/* Command-block copy icon — the <pre> is dark in both themes, so keep
   the button translucent instead of taking the generic dark styling */
html[data-theme="dark"] .cmd-box button.cmd-copy {
    background: rgba(255,255,255,.10) !important; border-color: rgba(255,255,255,.18) !important; color: #cbd5e1 !important;
}
html[data-theme="dark"] .cmd-box button.cmd-copy:hover {
    background: rgba(255,255,255,.22) !important; border-color: rgba(255,255,255,.35) !important; color: #fff !important;
}
html[data-theme="dark"] .cmd-box button.cmd-copy.copied,
html[data-theme="dark"] .cmd-box button.cmd-copy.copied:hover {
    background: #059669 !important; border-color: #059669 !important; color: #fff !important;
}
/* Shareable-link buttons stay accent-coloured in dark mode: the generic
   dark rule above is more specific than a bare class, so it has to be
   beaten with the theme selector rather than with !important alone. */
html[data-theme="dark"] button.ip-share-btn {
    background: var(--blue-600) !important; border-color: var(--blue-600) !important; color: #fff !important;
}
html[data-theme="dark"] button.ip-share-btn:hover {
    background: var(--blue-700) !important; border-color: var(--blue-700) !important; color: #fff !important;
}
html[data-theme="dark"] button.ip-share-btn.copied,
html[data-theme="dark"] button.ip-share-btn.copied:hover {
    background: #059669 !important; border-color: #059669 !important; color: #fff !important;
}
/* Voice "Call" button — keep it blue in dark mode (must beat the generic
   button:not(.btn-primary) rule above on both specificity and source order) */
html[data-theme="dark"] button.ip-call-btn {
    background: var(--blue-600) !important; border-color: var(--blue-600) !important; color: #fff !important;
}
html[data-theme="dark"] button.ip-call-btn:hover {
    background: var(--blue-700) !important; border-color: var(--blue-700) !important; color: #fff !important;
}
/* Chat-header "Call" button — same reason: keep it blue in dark mode */
html[data-theme="dark"] button.ip-chat-call {
    background: var(--blue-600) !important; border-color: var(--blue-600) !important; color: #fff !important;
}
html[data-theme="dark"] button.ip-chat-call:hover {
    background: var(--blue-700) !important; border-color: var(--blue-700) !important; color: #fff !important;
}
/* Blue primary buttons — keep blue */
html[data-theme="dark"] .btn-primary,
html[data-theme="dark"] input[type=button][name=btn1],
html[data-theme="dark"] input[type=button][value="Check Speed"],
html[data-theme="dark"] input[type=button][value="click here"],
html[data-theme="dark"] input[type=button][value="Check Port"],
html[data-theme="dark"] input[type=button][name="portcheck_btn"],
html[data-theme="dark"] input[type=button][value="Lookup"],
html[data-theme="dark"] input[type=button][value="Sort"],
html[data-theme="dark"] input[type=button][value="Start Job"],
html[data-theme="dark"] input[type=button][value="Get Time"],
html[data-theme="dark"] input[type=button][value="Get Date Time"],
html[data-theme="dark"] input[type=button][value="Get MiliSeconds"],
html[data-theme="dark"] input[type=button][value="Calculate Backup"],
html[data-theme="dark"] input[type=button][value="Check"],
html[data-theme="dark"] input[type=button][value="Create"],
html[data-theme="dark"] input[type=button][value="Format"],
html[data-theme="dark"] input[type=button][name="btnSendFCM"],
html[data-theme="dark"] input[type=button][name="btnURLUpload"],
html[data-theme="dark"] button[id="xml"], html[data-theme="dark"] button[id="css"],
html[data-theme="dark"] button[id="sql"], html[data-theme="dark"] button[id="json"] {
    background: var(--blue-600) !important; border-color: var(--blue-600) !important; color: #fff !important;
}
/* Secondary (gray-50) buttons */
html[data-theme="dark"] button[id="xmlmin"], html[data-theme="dark"] button[id="cssmin"],
html[data-theme="dark"] button[id="sqlmin"], html[data-theme="dark"] button[id="jsonmin"],
html[data-theme="dark"] button[id="xml_load"], html[data-theme="dark"] button[id="css_load"],
html[data-theme="dark"] button[id="sql_load"], html[data-theme="dark"] button[id="json_load"],
html[data-theme="dark"] input[type=button][value="Upper Case"],
html[data-theme="dark"] input[type=button][value="Lower Case"],
html[data-theme="dark"] input[type=button][value="Stop Job"] {
    background: #334155 !important; border-color: #475569 !important; color: #cbd5e1 !important;
}
/* Danger buttons */
html[data-theme="dark"] .btn-danger,
html[data-theme="dark"] button[id="Reset"],
html[data-theme="dark"] input[type=reset] {
    background: #1e293b !important; border-color: #fca5a5 !important; color: var(--red-500) !important;
}
/* Status badges */
html[data-theme="dark"] .nt-typing { background: #431407 !important; color: #fbbf24 !important; }
html[data-theme="dark"] .nt-saving { background: #1e3a5f !important; color: #93c5fd !important; }
html[data-theme="dark"] .nt-saved  { background: #064e3b !important; color: #6ee7b7 !important; }
/* Speed result */
html[data-theme="dark"] #divinternetspeed { background: #1e293b !important; border-color: #334155 !important; }
/* Theme toggle button */
.ip-theme-btn {
    background: none;
    border: 1px solid var(--border);
    border-radius: 100px;
    padding: 4px 12px;
    font-size: 11px;
    font-weight: 600;
    color: var(--sub);
    cursor: pointer;
    font-family: var(--sans);
    transition: all .15s;
    white-space: nowrap;
    line-height: 1.6;
    box-shadow: none;
}
.ip-theme-btn:hover { background: var(--gray-100) !important; color: var(--text) !important; border-color: var(--gray-300); }
html[data-theme="dark"] .ip-theme-btn:hover { background: #334155 !important; }
/* Chat file cards. The bubble keeps its own background; the card only
   adds the row, the bar and the note underneath. */
#ip-chat-attach {
    background: transparent; border: 0; cursor: pointer;
    font-size: 17px; line-height: 1; padding: 0 8px; opacity: .75;
}
#ip-chat-attach:hover:not(:disabled) { opacity: 1; }
#ip-chat-attach:disabled { opacity: .3; cursor: default; }
.ip-chat-bubble.ip-file { display: block; min-width: 190px; }
.ip-file-top { display: flex; align-items: flex-start; gap: 8px; }
.ip-file-icon { flex: 0 0 auto; font-size: 15px; line-height: 1.3; }
.ip-file-info { display: flex; flex-direction: column; min-width: 0; }
.ip-file-name {
    font-weight: 600; word-break: break-all;
    /* Two lines then ellipsis: a long name must not push the card wide. */
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden;
}
.ip-file-size { font-size: 11px; opacity: .75; }
.ip-file-bar {
    display: block; height: 4px; margin-top: 7px; border-radius: 3px;
    background: rgba(127, 127, 127, .35); overflow: hidden;
}
.ip-file-bar > i {
    display: block; height: 100%; width: 0;
    background: currentColor; transition: width .15s linear;
}
.ip-file-note { display: block; font-size: 10.5px; opacity: .8; margin-top: 4px; }
.ip-chat-bubble.ip-file.failed .ip-file-note { opacity: 1; color: #dc2626; }
.ip-file-save { color: inherit; text-decoration: underline; font-weight: 600; }

/* Notepad textarea & line numbers */
html[data-theme="dark"] #note { background: transparent !important; color: #e2e8f0 !important; caret-color: #93c5fd; }
html[data-theme="dark"] .np-hl-wrap { background: #1e293b; }
html[data-theme="dark"] .np-link { text-decoration-color: #93c5fd; background: rgba(147,197,253,.14); }
html[data-theme="dark"] #lines { background: #0f172a !important; color: #475569 !important; border-right-color: #334155 !important; }
html[data-theme="dark"] .notepad-wrap { border-color: #334155 !important; }
/* Notepad live badge */
html[data-theme="dark"] .nt-live { background: #064e3b !important; color: #6ee7b7 !important; }
/* jQuery UI tabs */
html[data-theme="dark"] #tabs { background: #1e293b !important; border-color: #334155 !important; }
html[data-theme="dark"] #tabs .ui-tabs-nav { background: #0f172a !important; border-bottom-color: #334155 !important; }
html[data-theme="dark"] #tabs .ui-tabs-nav li.ui-state-active { background: #1e293b !important; border-color: #334155 !important; }
html[data-theme="dark"] #tabs [role=tabpanel] { background: #1e293b !important; }
/* Canvas & map */
html[data-theme="dark"] #myCanvas { background: #1e293b !important; border-color: #334155 !important; }
/* Footer */
html[data-theme="dark"] .ip-page-footer { background: #0f172a !important; border-top-color: #334155 !important; }
/* Scrollbar */
html[data-theme="dark"] ::-webkit-scrollbar-track { background: #0f172a; }
html[data-theme="dark"] ::-webkit-scrollbar-thumb { background: #334155; }
html[data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: #475569; }
/* AI Chat */
html[data-theme="dark"] #ai-chat-wrap { background: #1e293b !important; border-color: #334155 !important; }
html[data-theme="dark"] .ai-msg.assistant .ai-bubble { background: #273549 !important; color: #e2e8f0 !important; }
html[data-theme="dark"] .ai-bubble code { background: rgba(255,255,255,.1) !important; color: #93c5fd !important; }
html[data-theme="dark"] .ai-bubble pre { background: #0f172a !important; color: #e2e8f0 !important; }
html[data-theme="dark"] .ai-bubble pre code { background: none !important; color: #e2e8f0 !important; }
html[data-theme="dark"] #ai-input-bar { background: #1e293b !important; border-top-color: #334155 !important; }
html[data-theme="dark"] #ai-input { background: #0f172a !important; border-color: #334155 !important; color: #e2e8f0 !important; }
html[data-theme="dark"] #ai-input:focus { background: #0f172a !important; border-color: #3b82f6 !important; }
html[data-theme="dark"] #ai-input::placeholder { color: #475569 !important; }
html[data-theme="dark"] #ai-send-btn { background: #3b82f6 !important; border-color: #3b82f6 !important; color: #fff !important; }
html[data-theme="dark"] #ai-send-btn:hover { background: #2563eb !important; }
html[data-theme="dark"] #ai-send-btn:disabled { background: #334155 !important; color: #64748b !important; }
html[data-theme="dark"] #ai-clear-btn { background: #334155 !important; border-color: #475569 !important; color: #94a3b8 !important; }
html[data-theme="dark"] #ai-clear-btn:hover { background: #475569 !important; color: #e2e8f0 !important; }
html[data-theme="dark"] #ai-messages::-webkit-scrollbar-thumb { background: #334155 !important; }
html[data-theme="dark"] .ai-typing span { background: #475569 !important; }
html[data-theme="dark"] #ai-model-pill { background: #1e293b !important; border-color: #334155 !important; color: #94a3b8 !important; }
html[data-theme="dark"] #ai-empty-state { color: #475569 !important; }
/* Mobile bottom nav */
html[data-theme="dark"] .ip-bottom-nav { background: rgba(15,23,42,.96) !important; border-top-color: #334155 !important; box-shadow: 0 -2px 16px rgba(0,0,0,.4) !important; }
html[data-theme="dark"] .ip-bn-item:active { background: #334155 !important; }
html[data-theme="dark"] .ip-bn-item svg { color: #475569; }
html[data-theme="dark"] .ip-bn-item span { color: #475569; }
html[data-theme="dark"] .ip-bn-item.active svg { color: var(--blue-400, #60a5fa); }
html[data-theme="dark"] .ip-bn-item.active span { color: var(--blue-400, #60a5fa); }
html[data-theme="dark"] .ip-bn-badge { border-color: #0f172a !important; }
/* File reltime pills */
html[data-theme="dark"] .file-download-count { background: #1e3a5f !important; color: #93c5fd !important; }
html[data-theme="dark"] .file-download-count:hover { background: #1e40af !important; }
html[data-theme="dark"] .file-size-badge { background: #334155 !important; color: #cbd5e1 !important; }
html[data-theme="dark"] .file-reltime { background: #334155 !important; border-color: #475569 !important; color: #94a3b8 !important; }
html[data-theme="dark"] .file-reltime:hover { background: #475569 !important; color: #e2e8f0 !important; }
html[data-theme="dark"] .file-reltime.rt-fresh { background: #064e3b !important; border-color: #065f46 !important; color: #6ee7b7 !important; }
html[data-theme="dark"] .file-reltime.rt-recent { background: #1e3a5f !important; border-color: #334155 !important; color: #93c5fd !important; }
html[data-theme="dark"] .file-reltime.rt-today { background: #334155 !important; border-color: #475569 !important; color: #94a3b8 !important; }
/* Web Search — hero & chips */
html[data-theme="dark"] .ws-hero {
    background: linear-gradient(180deg, rgba(59,130,246,.1) 0%, transparent 70%);
    border-color: #334155;
}
html[data-theme="dark"] .ws-panel.ws-searched .ws-hero { border-color: transparent; }
html[data-theme="dark"] .ws-hero-icon { background: rgba(59,130,246,.15); color: #60a5fa; }
html[data-theme="dark"] button.ws-chip {
    background: #1e293b !important; border-color: #334155 !important; color: #cbd5e1 !important;
}
html[data-theme="dark"] button.ws-chip:hover {
    background: #334155 !important; border-color: #3b82f6 !important; color: #93c5fd !important;
}
/* Web Search — Google Custom Search Engine */
html[data-theme="dark"] #tab0 .gsc-control-cse,
html[data-theme="dark"] #tab0 .gsc-control-cse .gsc-control-wrapper-cse,
html[data-theme="dark"] #tab0 .gsc-results-wrapper-overlay,
html[data-theme="dark"] #tab0 .gsc-results-wrapper-visible,
html[data-theme="dark"] #tab0 .gsc-expansionArea,
html[data-theme="dark"] #tab0 .gsc-above-wrapper-area,
html[data-theme="dark"] #tab0 .gsc-tabsArea,
html[data-theme="dark"] #tab0 .gsc-refinementArea {
    background: transparent !important;
    border-color: #334155 !important;
    color: var(--text) !important;
}
html[data-theme="dark"] #tab0 table.gsc-search-box td { background: transparent !important; }
html[data-theme="dark"] #tab0 .gsc-input-box {
    background: #1e293b !important;
    border: 1px solid #334155 !important;
}
html[data-theme="dark"] #tab0 input.gsc-input,
html[data-theme="dark"] #tab0 .gsib_a {
    background: transparent !important;
    color: #e2e8f0 !important;
}
html[data-theme="dark"] #tab0 .gsc-search-button-v2,
html[data-theme="dark"] #tab0 .gsc-search-button-v2:hover,
html[data-theme="dark"] #tab0 .gsc-search-button-v2:focus {
    background-color: #3b82f6 !important;
    border-color: #3b82f6 !important;
}
html[data-theme="dark"] #tab0 .gsc-webResult.gsc-result,
html[data-theme="dark"] #tab0 .gsc-result {
    background: transparent !important;
    border-color: #334155 !important;
}
html[data-theme="dark"] #tab0 .gsc-webResult.gsc-result:hover {
    background: rgba(51,65,85,.35) !important;
}
html[data-theme="dark"] #tab0 .gs-result .gs-title,
html[data-theme="dark"] #tab0 .gs-result .gs-title * { color: #60a5fa !important; }
html[data-theme="dark"] #tab0 .gs-webResult:not(.gs-no-results-result):not(.gs-error-result) .gs-snippet,
html[data-theme="dark"] #tab0 .gs-fileFormatType,
html[data-theme="dark"] #tab0 .gs-no-results-result .gs-snippet,
html[data-theme="dark"] #tab0 .gs-spelling,
html[data-theme="dark"] #tab0 .gs-spelling a { color: #94a3b8 !important; }
html[data-theme="dark"] #tab0 .gs-visibleUrl,
html[data-theme="dark"] #tab0 .gs-visibleUrl-short,
html[data-theme="dark"] #tab0 .gs-visibleUrl-long { color: #6ee7b7 !important; }
html[data-theme="dark"] #tab0 .gsc-results .gsc-cursor-box .gsc-cursor-page {
    background: #1e293b !important;
    border-color: #334155 !important;
    color: #94a3b8 !important;
}
html[data-theme="dark"] #tab0 .gsc-results .gsc-cursor-box .gsc-cursor-current-page {
    background: #3b82f6 !important;
    color: #fff !important;
}
html[data-theme="dark"] #tab0 .gsc-tabHeader,
html[data-theme="dark"] #tab0 .gsc-refinementHeader { color: #94a3b8 !important; }
html[data-theme="dark"] #tab0 .gsc-tabHeader.gsc-tabhActive,
html[data-theme="dark"] #tab0 .gsc-refinementhActive { color: #e2e8f0 !important; border-bottom-color: #3b82f6 !important; }
html[data-theme="dark"] #tab0 .gsc-orderby-container,
html[data-theme="dark"] #tab0 .gsc-selected-option-container { color: #94a3b8 !important; }
html[data-theme="dark"] #tab0 .gsc-control-cse .gsc-option-menu {
    background: #1e293b !important;
    border-color: #334155 !important;
}
html[data-theme="dark"] #tab0 .gsc-option-menu-item { color: #e2e8f0 !important; }
html[data-theme="dark"] #tab0 .gsc-option-menu-item:hover { background: #334155 !important; }
html[data-theme="dark"] #tab0 .gcsc-branding,
html[data-theme="dark"] #tab0 .gcsc-find-more-on-google,
html[data-theme="dark"] #tab0 .gcsc-more-maybe-branding-root { color: #64748b !important; }
html[data-theme="dark"] #tab0 .gsc-adBlock {
    background: #1e293b !important;
    border-color: #334155 !important;
}
/* Autocomplete dropdown is appended to body */
html[data-theme="dark"] .gsc-completion-container {
    background: #1e293b !important;
    border-color: #334155 !important;
    color: #e2e8f0 !important;
}
html[data-theme="dark"] .gssb_a { background: #1e293b !important; color: #e2e8f0 !important; }
html[data-theme="dark"] .gssb_a:hover,
html[data-theme="dark"] .gssb_a.gssb_a_active { background: #334155 !important; color: #f1f5f9 !important; }
/* ── LOCKED API ── */
.lk-api {
    border: 1px solid var(--border);
    border-radius: var(--r);
    background: var(--surface);
    padding: 16px 18px;
    margin: 18px 0;
}
.lk-api-head {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--sans);
    font-weight: 700;
    font-size: 14px;
    color: var(--text);
}
.lk-api-head svg { color: var(--amber-500); flex-shrink: 0; }
.lk-api-note { font-size: 12px !important; margin: 6px 0 12px !important; }
.lk-api-form { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.lk-api-form input[type="password"] {
    flex: 1 1 200px;
    min-width: 0;
    padding: 8px 10px;
    font-family: var(--sans);
    font-size: 13px;
    color: var(--text);
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
}
.lk-api-form input[type="password"]:focus {
    outline: none;
    border-color: var(--accent);
}
.lk-api-msg { font-size: 12px; margin-top: 10px; font-family: var(--sans); }
.lk-api-msg.err { color: var(--red-500); }
.lk-api-msg.ok  { color: var(--emerald-500); }
.lk-api-body { display: none; margin-top: 4px; }
.lk-api.unlocked .lk-api-form,
.lk-api.unlocked .lk-api-note { display: none; }
.lk-api.unlocked .lk-api-body { display: block; }
html[data-theme="dark"] .lk-api { background: #1e293b; border-color: #334155; }
html[data-theme="dark"] .lk-api-form input[type="password"] {
    background: #0f172a;
    border-color: #334155;
    color: #e2e8f0;
}
/* Theme button — compact on small screens */
@media (max-width: 480px) {
    .ip-theme-btn { padding: 4px 8px !important; font-size: 10px !important; }
    .ip-clock { font-size: 10px !important; padding: 4px 7px !important; }
}

/* ── Battery capacity calculator (Converter tab) ── */
.bc-grid { border-collapse: collapse; margin-bottom: 10px; width: 100%; }
.bc-grid td, .bc-grid th {
    border: 1px solid #d7dde5;
    padding: 5px 8px;
    font-size: 13px;
    text-align: left;
    vertical-align: middle;
}
.bc-grid th { background: #f1f5f9; font-weight: 600; }
.bc-grid input[type="text"], .bc-grid select {
    width: 100%;
    max-width: 230px;
    box-sizing: border-box;
}
.bc-note { color: #64748b; font-size: 12px; }
/* Download PDF is blue like its neighbours but starts disabled, and the
   blue hover rule still fires on a disabled input — without this it
   darkens on hover and reads as clickable when it is not. Written as
   input[type=button]#bc_pdf_btn so it outranks the value-keyed blue
   allowlist above, which is (0,2,1) and carries !important.
   Same opacity convention as the other :disabled buttons on this page. */
input[type=button]#bc_pdf_btn:disabled,
input[type=button]#bc_pdf_btn:disabled:hover,
input[type=button]#bc_pdf_btn:disabled:active {
    opacity: .5 !important;
    cursor: default !important;
    background: var(--blue-600) !important;
    border-color: var(--blue-600) !important;
    box-shadow: none !important;
    transform: none !important;
}
.bc-out { margin-top: 10px; }
.bc-out h4 { margin: 0 0 6px; font-size: 14px; }
.bc-total { font-weight: 700; background: #f8fafc; }
.bc-answer {
    margin-top: 10px;
    padding: 10px 12px;
    border-left: 4px solid #2563eb;
    background: #eff6ff;
    font-size: 15px;
}
.bc-err { color: #b91c1c; font-size: 13px; }
.bc-health {
    margin-top: 10px;
    padding: 10px 12px;
    border-left: 4px solid #f59e0b;
    background: #fffbeb;
    font-size: 13px;
    line-height: 1.45;
}
.bc-health-num { margin-top: 6px; font-size: 14px; }
/* The grid is the widest thing in the tab; let it scroll rather than
   push the whole page sideways on a phone. */
.bc-scroll { overflow-x: auto; }
html[data-theme="dark"] .bc-grid td,
html[data-theme="dark"] .bc-grid th { border-color: #334155; }
html[data-theme="dark"] .bc-grid th { background: #1e293b; }
html[data-theme="dark"] .bc-total { background: #1e293b; }
html[data-theme="dark"] .bc-answer { background: #16233b; border-left-color: #3b82f6; }
html[data-theme="dark"] .bc-health { background: #2a2312; border-left-color: #d97706; }
html[data-theme="dark"] .bc-note { color: #94a3b8; }

/* ── Live running devices map (Google Maps tab) ── */
#ldevMap {
    height: 420px;
    width: 100%;
    margin: 10px 0 14px;
    border: 1px solid #d7dde5;
    border-radius: 8px;
}
.ldev-bar { margin: 8px 0; }
.ldev-filter { font-size: 13px; font-weight: 400; margin-right: 10px; }
.ldev-filter select { padding: 5px 8px; }
.ldev-status { font-size: 12px; color: #64748b; margin-left: 10px; }
.ldev-warn { color: #b45309; }
/* The map box before anything is fetched. The class is stripped the
   moment the map is built — these are flex rules, and leaving them on
   the container would fight Google Maps for the layout. */
.ldev-idle {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 0 16px;
    border-style: dashed !important;
    background: #f8fafc;
    color: #64748b;
    font-size: 13px;
}
/* Same opacity convention as the other disabled buttons on this page;
   written this specifically so it outranks the blue value-keyed rules,
   whose :hover would otherwise darken it while it is not clickable. */
input[type=button]#ldevLoadBtn:disabled,
input[type=button]#ldevLoadBtn:disabled:hover,
input[type=button]#ldevLoadBtn:disabled:active {
    opacity: .5 !important;
    cursor: default !important;
    background: var(--blue-600) !important;
    border-color: var(--blue-600) !important;
    box-shadow: none !important;
    transform: none !important;
}
html[data-theme="dark"] #ldevMap { border-color: #334155; }
html[data-theme="dark"] .ldev-idle { background: #0f172a; color: #94a3b8; }
html[data-theme="dark"] .ldev-status { color: #94a3b8; }
html[data-theme="dark"] .ldev-warn { color: #f59e0b; }

/* ── Google Maps' own controls ──
   The global button rule near the top of this file matches every
   <button> on the page and is written with !important, so it also
   repaints the ones Google injects into a map: the InfoWindow close
   button, the zoom and fullscreen controls, the Map/Satellite toggle.
   The close button is a transparent 30x30 box holding the ×, and the
   page was giving it a white fill, a border and 8px 16px of padding —
   which is the grey rectangle that appeared beside the info window
   with the × pushed out of sight.

   Everything inside .gm-style belongs to Google, so hand it back. Only
   !important beats !important, hence the repetition; the dark-theme
   copy is there because html[data-theme="dark"] button:not(.btn-primary)
   outranks a bare .gm-style button on specificity. */
.gm-style button,
html[data-theme="dark"] .gm-style button {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0 !important;
    background: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    color: inherit !important;
    line-height: normal !important;
    white-space: nowrap !important;
    vertical-align: middle !important;
    transition: none !important;
}
.gm-style button:hover,
.gm-style button:active,
html[data-theme="dark"] .gm-style button:hover,
html[data-theme="dark"] .gm-style button:active {
    background: none !important;
    border: 0 !important;
    box-shadow: none !important;
    transform: none !important;
}
/* The Map / Satellite toggle is the one Maps control that genuinely is
   a filled button, so give it its chrome back after the reset. It stays
   light in dark mode because the map itself does. */
.gm-style .gm-style-mtc button,
html[data-theme="dark"] .gm-style .gm-style-mtc button {
    background: #fff !important;
    color: #565656 !important;
    padding: 0 17px !important;
    font-size: 13px !important;
}