:root { color-scheme: light dark; }
        * { box-sizing: border-box; }
        /* the hidden attribute wins over any display rule: a box with display:flex and hidden stays hidden */
        [hidden] { display: none !important; }
        html, body {
            margin: 0;
            height: 100%;
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
            background: var(--slate-900);
            color: var(--slate-200);
        }
        a { text-decoration: none; }
        /* text links portal-wide: aquamarine from the theme's own tokens (the browser's dark blue is unreadable on the dark panels); buttons and menu keep their colours */
        .content a:not(.btn):not(.lh-button):not(.primary):not(.secondary):not(.success):not(.danger):not(.info):not(.warning):not([class*="sidebar"]):not(.st-kpi):not(.tn-template) { color: color-mix(in srgb, var(--green-300) 55%, var(--blue-300)); }
        .content a:not(.btn):not(.lh-button):not(.primary):not(.secondary):not(.success):not(.danger):not(.info):not(.warning):not([class*="sidebar"]):not(.st-kpi):not(.tn-template):not(.block-link):hover { color: var(--green-200); text-decoration: underline; }
        /* a whole card as a link (.block-link): its texts keep their colours, nothing underlines on hover */
        .content a.block-link, .content a.block-link:hover { color: inherit; text-decoration: none; }
        .text-link { color: var(--blue-400); text-decoration: none; }
        .text-link:hover { color: var(--blue-300); text-decoration: underline; }

        dialog {
            border: none;
            border-radius: 10px;
            background: var(--slate-800);
            color: var(--slate-200);
            padding: 1.5rem;
            max-width: 480px;
            width: 90%;
        }
        dialog::backdrop { background: rgba(0,0,0,.6); }
        dialog h2 { margin: 0 0 1rem; font-size: 1rem; }
        dialog label { display: block; font-size: .85rem; margin-bottom: .35rem; color: var(--slate-400); }
        dialog input, dialog select { width: 100%; margin-bottom: .75rem; box-sizing: border-box; }
        /* a badge: a small round counter inside a button or next to a label (blue = information) */
        .es-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 1.35em; height: 1.35em; padding: 0 .35em; margin-left: .45em; border-radius: 999px; background: var(--blue-500); color: var(--on-fill); font-size: .72em; font-weight: 700; line-height: 1; vertical-align: middle; }
        /* the actions of a dialog: one row, detached from the text above, always on the right (the primary last) */
        dialog .dialog-actions { display: flex; gap: .5rem; margin-top: 1.1rem; padding-top: .8rem; border-top: 1px solid var(--slate-700); justify-content: flex-end; }
        /* Portal rule: action buttons inside a panel sit on the right, the main one last. */
        /* Portal-wide: every insight sentence can be closed (script at the end of the page). */
        .st-insight[data-dismissed] { display: none !important; }
        .st-insight > .st-insight-close { flex: none; align-self: flex-start; margin: -.2rem -.35rem 0 auto; padding: .15rem .4rem; border: 0; border-radius: 6px; background: transparent; color: var(--slate-500); font-size: .85rem; line-height: 1; cursor: pointer; }
        .st-insight > .st-insight-close:hover { background: color-mix(in srgb, var(--slate-400) 15%, transparent); color: var(--slate-200); }
        .st-insight > div { flex: 1; min-width: 0; }
        .st-insight-chip { color: var(--blue-400) !important; font-size: 1.05rem !important; } .st-insight-chip[data-tone="bad"] { color: var(--red-400) !important; } .st-insight-chip[data-tone="good"] { color: var(--green-400) !important; }
        .st-insight-chip:hover { filter: brightness(1.25); } .st-insight-chip[hidden] { display: none !important; } .st-insight-chip--alone { display: block; margin: 0 0 1rem auto; background: none; border: 0; cursor: pointer; }
        /* Portal-wide: a red asterisk beside the label of every mandatory field (added by the script at the end of the page). */
        label.is-required::after { content: ' *'; color: var(--red-400); font-weight: 700; }
        .panel-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: .5rem; margin-top: .75rem; }

        input, select, textarea {
            padding: .35rem .6rem;
            font-size: .8rem;
            border-radius: 6px;
            border: 1px solid var(--slate-700);
            background: var(--slate-900);
            color: var(--slate-200);
        }

        button, .btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            padding: .35rem .8rem;
            font-size: .8rem;
            font-weight: 400;
            border-radius: 6px;
            border: 1px solid transparent;
            cursor: pointer;
            font-family: inherit;
        }
        /* the icon of a button sits on the same line as its text, whatever the font sizes */
        button, .btn { line-height: 1.25; vertical-align: middle; }
        button > i, .btn > i { display: inline-block; line-height: 1; vertical-align: middle; position: relative; top: -.03em; }
        a.btn { text-decoration: none; }
        button.primary, .btn.primary { background: var(--blue-600); color: var(--on-fill); }
        button.primary:hover, .btn.primary:hover { background: var(--blue-700); }
        button.success, .btn.success { background: var(--green-600); color: var(--on-fill); }
        button.success:hover, .btn.success:hover { background: var(--green-700); }
        button.danger, .btn.danger { background: var(--red-600); color: var(--on-fill); }
        button.danger:hover, .btn.danger:hover { background: var(--red-700); }
        /* info = look, test, verify: it reads and reports, it changes nothing that matters (Bootstrap's "info", for the dark theme) */
        button.info, .btn.info { background: var(--c-0891b2); color: var(--white); }
        button.info:hover, .btn.info:hover { background: var(--c-0e7490); }
        button.secondary, .btn.secondary { background: transparent; color: var(--slate-400); border-color: var(--slate-700); }
        button.secondary:hover, .btn.secondary:hover { background: var(--c-273449); color: var(--slate-200); }

        button.primary.outline, .btn.primary.outline { background: transparent; color: var(--blue-400); border-color: var(--blue-600); }
        button.primary.outline:hover, .btn.primary.outline:hover { background: color-mix(in srgb, var(--blue-600) 15%, transparent); }
        button.success.outline, .btn.success.outline { background: transparent; color: var(--green-400); border-color: var(--green-600); }
        button.success.outline:hover, .btn.success.outline:hover { background: color-mix(in srgb, var(--green-600) 15%, transparent); }
        button.danger.outline, .btn.danger.outline { background: transparent; color: var(--red-400); border-color: var(--red-600); }
        button.danger.outline:hover, .btn.danger.outline:hover { background: color-mix(in srgb, var(--red-600) 15%, transparent); }
        button.info.outline, .btn.info.outline { background: transparent; color: var(--c-22d3ee); border-color: var(--c-0891b2); }
        button.info.outline:hover, .btn.info.outline:hover { background: color-mix(in srgb, var(--c-0891b2) 18%, transparent); }

        .page-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; gap: 1rem; }
        .page-header h1 { margin: 0; font-size: 1rem; font-weight: 600; }
        .page-header .actions { display: flex; gap: .5rem; flex-shrink: 0; }

        .filter-bar { display: flex; gap: .5rem; margin-bottom: 1rem; }
        .filter-bar input[type=text] { flex: 0 0 260px; }
        .btn-group { display: flex; }
        .btn-group > * {
            display: flex;
            align-items: center;
            justify-content: center;
            flex: 0 0 auto;
            min-width: 2rem;
            height: 2rem;
            padding: 0 .5rem;
            background: var(--slate-800);
            border: 1px solid var(--slate-700);
            color: var(--slate-400);
            cursor: pointer;
            font-size: .8rem;
            white-space: nowrap;
        }
        .btn-group > *:not(:first-child) { border-left: none; }
        .btn-group > *:first-child { border-radius: 6px 0 0 6px; }
        .btn-group > *:last-child { border-radius: 0 6px 6px 0; }
        .btn-group > *:hover { background: var(--c-273449); color: var(--slate-200); }
        .btn-group > a.disabled { pointer-events: none; opacity: .4; }
        .btn-group > span.pager-current { color: var(--slate-200); cursor: default; }

        table.data-table { width: 100%; border-collapse: collapse; font-size: .85rem; }
        table.data-table th {
            padding: .4rem .9rem;
            font-weight: 400;
            color: silver;
            text-align: left;
        }
        table.data-table td { padding: .6rem .9rem; }
        .layout { display: flex; height: 100vh; overflow: hidden; }

        .sidebar {
            width: 275px;
            flex-shrink: 0;
            background: var(--slate-800);
            display: flex;
            flex-direction: column;
            border-right: 1px solid var(--slate-700);
            overflow-y: auto;
        }
        .sidebar-brand {
            padding: 1.25rem;
            border-bottom: 1px solid var(--slate-700);
        }
        .sidebar-brand img { max-width: 100%; max-height: 48px; height: auto; display: block; margin: 0 auto; }
        /* the light-blue logo on dark themes, the navy one on the light theme */
        .sidebar-brand .brand-on-light { display: none; } html[data-theme="light"] .sidebar-brand .brand-on-light { display: block; } html[data-theme="light"] .sidebar-brand .brand-on-dark { display: none; }
        .sidebar-nav { flex: 1; padding: .75rem; }
        .sidebar-nav a {
            display: block;
            padding: .4rem .75rem;
            margin-bottom: .1rem;
            border-radius: 6px;
            color: var(--slate-400);
            text-decoration: none;
            font-size: .9rem;
        }
        .sidebar-nav a:hover { background: var(--c-273449); color: var(--slate-200); }
        .sidebar-nav a.active { background: var(--blue-600); color: var(--on-fill); }
        .sidebar-group { margin-top: .2rem; }
        .sidebar-divider { height: 1px; background: var(--slate-700); margin: .5rem .75rem; }
        .sidebar-group-label {
            display: flex;
            align-items: center;
            justify-content: space-between;
            width: 100%;
            padding: .45rem .75rem;
            margin: 0;
            font-size: .7rem;
            text-transform: uppercase;
            letter-spacing: .05em;
            color: var(--slate-500);
            background: none;
            border: none;
            border-radius: 6px;
            cursor: pointer;
            font-family: inherit;
        }
        .sidebar-group-label:hover { background: var(--c-273449); color: var(--slate-400); }
        .sidebar-chevron { font-size: .65rem; transition: transform .15s ease; }
        .sidebar-group.open .sidebar-chevron { transform: rotate(90deg); }
        .sidebar-submenu {
            max-height: 0;
            overflow: hidden;
            transition: max-height .2s ease;
            margin-left: 1.15rem;
            border-left: 1px solid var(--slate-700);
        }
        .sidebar-group.open .sidebar-submenu { max-height: 2000px; }
        .sb-sep { display: flex; align-items: center; gap: .5rem; padding: .55rem .9rem .2rem 1.5rem; font-size: .62rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--slate-500); } .sb-sep::after { content: ""; flex: 1; height: 1px; background: var(--slate-700); }
        .sb-realm { display: flex; align-items: center; gap: .5rem; padding: .35rem .9rem .45rem 1.5rem; } .sb-realm i { color: var(--blue-400); font-size: .8em; } .sb-realm select { flex: 1; min-width: 0; padding: .25rem .4rem; font-size: .78rem; font-weight: 600; }
        .sidebar-sublink { padding-left: 1.5rem !important; } .sidebar-sublink--soon { font-style: italic; opacity: .5; cursor: default; } .sb-ext { margin-left: .4rem; font-size: .62em; opacity: .55; vertical-align: super; }
        .sb-ico { width: 1.15rem; margin-right: .55rem; text-align: center; font-size: .82em; opacity: .8; } .sidebar-nav a.active .sb-ico, .sidebar-nav a:hover .sb-ico { opacity: 1; } .sidebar-group-label .sb-ico { font-size: 1.05em; opacity: .85; color: var(--blue-400); }
        .sidebar-subgroup-block { margin-top: .05rem; }
        .sidebar-subheading {
            display: flex;
            align-items: center;
            justify-content: space-between;
            width: 100%;
            padding: .4rem .75rem .4rem 1.1rem;
            margin: 0;
            font-size: .65rem;
            text-transform: uppercase;
            letter-spacing: .05em;
            color: var(--slate-500);
            background: none;
            border: none;
            border-radius: 6px;
            cursor: pointer;
            font-family: inherit;
        }
        .sidebar-subheading:hover { background: var(--c-273449); color: var(--slate-400); }
        .sidebar-subchevron { font-size: .55rem; transition: transform .15s ease; }
        .sidebar-subgroup-block.open .sidebar-subchevron { transform: rotate(90deg); }
        .sidebar-subgroup {
            max-height: 0;
            overflow: hidden;
            transition: max-height .2s ease;
            margin-left: 1rem;
            border-left: 1px solid var(--slate-700);
        }
        .sidebar-subgroup-block.open .sidebar-subgroup { max-height: 400px; }

        .sidebar-version { padding: .8rem 1.25rem; border-top: 1px solid var(--slate-700); font-size: .72rem; letter-spacing: .03em; color: var(--slate-500); white-space: nowrap; }
        .sidebar-version span { color: var(--slate-400); font-variant-numeric: tabular-nums; }

        .main { flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; }
        .topbar {
            height: 56px;
            flex-shrink: 0;
            border-bottom: 1px solid var(--slate-700);
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0 1.5rem;
            font-size: 1.5rem;
            color: var(--slate-400);
        }
        .tb-ico { margin-right: .7rem; font-size: .85em; color: var(--blue-400); }
        .topbar > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .topbar .tb-right { font-size: .9rem; flex: none; }
        .content { flex: 1; min-height: 0; padding: 1.5rem; overflow-y: auto; }
        .page-loading { display: flex; align-items: center; gap: .6rem; color: var(--slate-400); font-size: .9rem; padding: 2rem 0; }

        .tb-right { display: flex; align-items: center; gap: .6rem; } .nb { position: relative; }
        dialog.th-dialog { width: min(980px, 96vw); max-width: none; padding: 0; border: 1px solid var(--slate-700); border-radius: 16px; background: var(--c-111a2e); color: var(--slate-200); box-shadow: 0 30px 80px rgba(0, 0, 0, .6); } dialog.th-dialog::backdrop { background: rgba(0, 0, 0, .55); backdrop-filter: blur(3px); }
        .th-head { display: flex; align-items: flex-start; gap: 1rem; padding: 1.2rem 1.4rem; border-bottom: 1px solid var(--slate-800); } .th-head h2 { margin: 0; font-size: 1.05rem; color: var(--slate-50); } .th-head p { margin: .25rem 0 0; font-size: .78rem; line-height: 1.5; color: var(--slate-400); } .th-logo { flex: none; width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; background: var(--blue-700); color: var(--on-fill); font-size: 1.1rem; }
        .th-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .8rem; padding: 1.2rem 1.4rem .6rem; } @media (max-width: 900px) { .th-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
        .th-card { display: flex; flex-direction: column; align-items: stretch; gap: .5rem; margin: 0; padding: .55rem .55rem .7rem; border: 2px solid var(--slate-700); border-radius: 13px; background: transparent; color: var(--slate-200); text-align: left; cursor: pointer; transition: border-color .15s, transform .15s; } .th-card:hover { border-color: var(--slate-500); transform: translateY(-2px); } .th-card[aria-checked=true] { border-color: var(--blue-500); border-style: double; border-width: 4px; padding: calc(.55rem - 2px) calc(.55rem - 2px) calc(.7rem - 2px); }
        .th-name { display: flex; align-items: center; gap: .45rem; font-size: .86rem; font-weight: 700; color: var(--slate-100); } .th-name > i { width: 1rem; text-align: center; color: var(--blue-400); } .th-about { font-size: .7rem; line-height: 1.4; color: var(--slate-400); } .th-check { display: none; margin-left: auto; font-size: .66rem; font-weight: 600; color: var(--blue-300); white-space: nowrap; } .th-card[aria-checked=true] .th-check { display: inline; }
        .th-mock { display: flex; width: 100%; box-sizing: border-box; height: 96px; border-radius: 8px; overflow: hidden; border: 1px solid var(--slate-700); background: var(--slate-900); } .th-mock-side { flex: none; width: 26%; display: flex; flex-direction: column; gap: 5px; padding: 9px 6px; background: var(--slate-800); border-right: 1px solid var(--slate-700); } .th-mock-side i { height: 5px; border-radius: 3px; background: var(--slate-600); } .th-mock-side i.is-on { background: var(--blue-600); height: 8px; }
        .th-mock-main { flex: 1; display: flex; flex-direction: column; min-width: 0; } .th-mock-bar { height: 13px; border-bottom: 1px solid var(--slate-700); } .th-mock-panel { flex: 1; margin: 7px; padding: 7px; border-radius: 6px; border: 1px solid var(--c-273449); background: var(--slate-800); display: flex; flex-direction: column; gap: 4px; } .th-mock-panel b { width: 50%; height: 6px; border-radius: 3px; background: var(--slate-100); } .th-mock-panel em { height: 4px; border-radius: 2px; background: var(--slate-500); } .th-mock-panel em + em { width: 70%; }
        .th-mock-row { display: flex; align-items: center; gap: 4px; margin-top: auto; } .th-mock-row u { width: 9px; height: 9px; border-radius: 50%; } .th-mock-row u.ok { background: var(--green-500); } .th-mock-row u.warn { background: var(--amber-500); border-radius: 2px; } .th-mock-row u.bad { background: var(--red-500); clip-path: polygon(50% 0, 100% 100%, 0 100%); border-radius: 0; } .th-mock-row s { margin-left: auto; width: 30%; height: 10px; border-radius: 3px; background: var(--blue-700); }
        .th-foot { padding: .6rem 1.4rem 1.2rem; margin: 0; align-items: center; } .th-saved { margin-right: auto; font-size: .78rem; color: var(--green-400); }
        .user-menu { position: relative; }
        .user-menu-btn { display: flex; align-items: center; gap: .7rem; margin: 0; padding: .2rem .25rem .2rem .7rem; border: 1px solid transparent; border-radius: 999px; background: transparent; color: var(--slate-200); cursor: pointer; }
        .user-menu-btn:hover { background: var(--slate-800); border-color: var(--slate-700); }
        .user-menu-who { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.2; text-align: right; }
        .user-menu-who .name { font-size: .82rem; font-weight: 600; color: var(--slate-200); }
        .user-menu-who .role { font-size: .7rem; color: var(--slate-400); }
        .user-menu-avatar { flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; overflow: hidden; color: var(--white); font-size: .78rem; font-weight: 700; border: 1px solid var(--slate-700); }
        .user-menu-avatar img { width: 100%; height: 100%; object-fit: cover; }
        @media (max-width: 700px) { .user-menu-who { display: none; } }
        .user-menu-dropdown {
            display: none;
            position: absolute;
            right: 0;
            top: calc(100% + 8px);
            min-width: 170px;
            background: var(--slate-800);
            border: 1px solid var(--slate-700);
            border-radius: 8px;
            box-shadow: 0 10px 30px rgba(0,0,0,.4);
            overflow: hidden;
            z-index: 20;
        }
        .user-menu-dropdown.open { display: block; }

        .user-menu-dropdown a,
        .user-menu-dropdown button {
            display: block;
            width: 100%;
            text-align: left;
            padding: .6rem .9rem;
            background: transparent;
            border: none;
            color: var(--slate-200);
            font-size: .85rem;
            text-decoration: none;
            cursor: pointer;
        }
        .user-menu-dropdown .um-ico { width: 1.1rem; margin-right: .55rem; text-align: center; color: var(--slate-400); }
        .user-menu-dropdown a:hover,
        .user-menu-dropdown button:hover { background: var(--c-273449); }

        .kebab-btn {
            width: 28px;
            height: 28px;
            border-radius: 6px;
            border: 1px solid transparent;
            background: transparent;
            color: var(--slate-400);
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            justify-content: center;
        }
        .kebab-btn:hover { background: var(--c-273449); color: var(--slate-200); border-color: var(--slate-700); }
        .kebab-dropdown {
            display: none;
            position: fixed;
            min-width: 180px;
            background: var(--slate-800);
            border: 1px solid var(--slate-700);
            border-radius: 8px;
            box-shadow: 0 10px 30px rgba(0,0,0,.4);
            overflow: hidden;
            z-index: 1000;
        }
        .kebab-dropdown.open { display: block; }
        /* the pager of a list (TablePager for tables drawn in the browser, partials.pages for the ones drawn by the server) */
        .tp-pages { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: .6rem; margin-top: .8rem; font-size: .78rem; color: var(--slate-400); }
        .tp-pages:empty { display: none; } tr.tp-off { display: none !important; }
        .tp-pages a, .tp-pages button, .tp-pages span.off { margin: 0; padding: .25rem .6rem; border: 1px solid var(--slate-700); border-radius: 6px; background: transparent; color: inherit; font-size: inherit; text-decoration: none; cursor: pointer; line-height: 1.4; }
        .tp-pages a:hover, .tp-pages button:hover { border-color: var(--blue-500); color: var(--slate-100); } .tp-pages span.off { opacity: .4; cursor: default; }
        .kebab-dropdown a,
        .kebab-dropdown button {
            display: block;
            width: 100%;
            text-align: left;
            padding: .55rem .8rem;
            background: transparent;
            border: none;
            color: var(--slate-200);
            font-size: .8rem;
            text-decoration: none;
            cursor: pointer;
        }
        .kebab-dropdown a:hover,
        .kebab-dropdown button:hover { background: var(--c-273449); }
        .sidebar-brand-text { font-size: 1.15rem; font-weight: 700; letter-spacing: .02em; color: var(--slate-100); } .sidebar-brand-text i { margin-right: .45rem; color: var(--blue-400); } .sidebar-brand-text small { display: block; margin-top: .15rem; font-size: .66rem; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--slate-500); }
        .panel-msg { padding: .6rem .8rem; border-radius: 8px; font-size: .82rem; margin-bottom: 1rem; display: flex; align-items: center; gap: .5rem; } .panel-msg.success { background: color-mix(in srgb, var(--green-500) 14%, transparent); color: var(--green-300); } .panel-msg.error { background: color-mix(in srgb, var(--red-500) 14%, transparent); color: var(--red-300); }
        .lh-button { margin: 0; padding: .2rem .45rem; border: 0; border-radius: 6px; background: transparent; color: var(--slate-400); font-size: .85rem; cursor: pointer; } .lh-button:hover { background: color-mix(in srgb, var(--slate-400) 15%, transparent); color: var(--slate-100); }
        .st-table-wrap { overflow: auto; max-height: 60vh; } .st-table { width: 100%; border-collapse: collapse; font-size: .82rem; } .st-table th { position: sticky; top: 0; background: var(--slate-800); padding: .45rem .7rem; text-align: left; font-size: .72rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--slate-500); border-bottom: 1px solid var(--slate-700); } .st-table td { padding: .5rem .7rem; border-bottom: 1px solid var(--slate-800); color: var(--slate-300); vertical-align: middle; } .st-table tr:hover td { background: color-mix(in srgb, var(--slate-400) 6%, transparent); }
        .st-pill { display: inline-flex; align-items: center; gap: .3rem; padding: .15rem .55rem; border-radius: 999px; font-size: .7rem; font-weight: 600; } .st-pill--good { background: color-mix(in srgb, var(--green-500) 15%, transparent); color: var(--green-400); } .st-pill--bad { background: color-mix(in srgb, var(--red-500) 15%, transparent); color: var(--red-300); } .st-pill--warn { background: color-mix(in srgb, var(--amber-500) 15%, transparent); color: var(--amber-400); } .st-pill--idle { background: color-mix(in srgb, var(--slate-400) 15%, transparent); color: var(--slate-400); }
        .st-insight { display: flex; align-items: flex-start; gap: .7rem; padding: .8rem 1rem; margin-bottom: 1.5rem; border-radius: 10px; border: 1px solid var(--slate-700); background: var(--slate-800); font-size: .84rem; color: var(--slate-300); } .st-insight > i { margin-top: .15rem; color: var(--blue-400); } .st-insight--good > i { color: var(--green-400); } .st-insight--bad { border-color: var(--red-900); } .st-insight--bad > i { color: var(--red-400); }
        dialog.ld-dialog { width: min(540px, 95vw); max-width: none; } dialog.ld-dialog h2 { display: flex; align-items: center; gap: .4rem; } dialog.ld-dialog h2 i { color: var(--blue-400); }
        .ld-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 0 .8rem; } .ld-grid3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0 .8rem; } .ld-hint { display: block; margin: -.45rem 0 .75rem; font-size: .72rem; color: var(--slate-500); } .ld-muted { font-size: .78rem; color: var(--slate-400); }
        .ld-warn { display: flex; gap: .5rem; align-items: flex-start; padding: .55rem .7rem; margin-bottom: .75rem; border-radius: 8px; font-size: .78rem; background: color-mix(in srgb, var(--amber-500) 14%, transparent); color: var(--amber-300); }
        .ld-errors { padding: .55rem .7rem; margin-bottom: .75rem; border-radius: 8px; font-size: .78rem; background: color-mix(in srgb, var(--red-500) 14%, transparent); color: var(--red-300); } .ld-errors i { margin-right: .35rem; }
        .ld-nowrap { white-space: nowrap; } .ld-sub { display: block; font-size: .72rem; color: var(--slate-500); } td.act { width: 1%; text-align: right; } .ld-filter { display: flex; gap: .5rem; align-items: center; margin-bottom: .9rem; } .ld-filter input[type=text], .ld-filter input[type=search] { width: 260px; }
        /* a sub-heading inside a panel (shared by every page): small caps, a rule below, the icon apart from the text */
        .ig-sub { display: flex; align-items: center; gap: .55rem; margin: 1.1rem 0 .7rem; padding-bottom: .35rem; border-bottom: 1px solid var(--slate-700); font-size: .78rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--slate-400); } .ig-sub i { color: var(--blue-400); font-size: .75rem; }
        .page-header h1 .lead-info { margin-left: .35rem; font-size: .8rem; color: var(--slate-500); vertical-align: middle; } .page-header h1 .lead-info:hover { color: var(--blue-400); }
        .mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .78rem; }
        /* the identity confirmation and the MFA mark on buttons */
        .mfa-ico { margin-left: .4rem; font-size: .8em; opacity: .75; } button:hover .mfa-ico, a:hover .mfa-ico { opacity: 1; }
        .su-otp { display: flex; gap: .4rem; margin: .3rem 0 .4rem; } .su-otp input { width: 2.4rem; height: 2.9rem; text-align: center; font-size: 1.3rem; font-weight: 700; padding: 0; }
        .su-question { padding: .55rem .7rem; margin-bottom: .75rem; border-radius: 8px; font-size: .8rem; background: color-mix(in srgb, var(--blue-500) 10%, transparent); border: 1px solid color-mix(in srgb, var(--blue-500) 35%, transparent); color: var(--slate-200); }
        /* a record page made of boxes: small uppercase labels over values, four boxes per row (shared by every page) */
        .ld-boxes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; margin-bottom: 1rem; } .ld-box { background: var(--slate-900); border: 1px solid var(--slate-800); border-radius: 10px; padding: .8rem .9rem; display: flex; flex-direction: column; } .ld-box > .ig-sub { margin-top: 0; } .ld-box > .ig-sub .lh-button { margin-left: auto; }
        .ld-kv { display: grid; grid-template-columns: minmax(0, 1fr); gap: .45rem 0; margin: 0; font-size: .8rem; } .ld-kv dt { color: var(--slate-400); font-size: .7rem; text-transform: uppercase; letter-spacing: .03em; } .ld-kv dd { margin: 0 0 .15rem; color: var(--slate-100); word-break: break-word; } .ld-kv dd.mono { font-size: .76rem; } .ld-kv--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .45rem .8rem; }
        @media (max-width: 1200px) { .ld-boxes { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 760px) { .ld-boxes { grid-template-columns: 1fr; } }