/* Site-wide adapters for the dashboard palette. Shared widgets inherit these
   rules, including AJAX fragments. Do not recolor images or chart data series. */
[data-skin="new"][data-theme="dark"] {
    --ispt-link-hover:#a6dfff;
    --ispt-eyebrow:#67c7fb;
    --ispt-default-hover:#234454;
    --ispt-focus:#67c7fb;
}
[data-skin="new"] body { font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif; }
[data-skin="new"] h6 { color:var(--ispt-heading); }
[data-skin="new"] a:focus-visible, [data-skin="new"] button:focus-visible { outline:2px solid var(--ispt-focus); outline-offset:3px; }
[data-skin="new"] input, [data-skin="new"] textarea, [data-skin="new"] select { accent-color:var(--ispt-accent); }
[data-skin="new"] input:not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
[data-skin="new"] textarea, [data-skin="new"] select {
    background-color:var(--ispt-surface); color:var(--ispt-text-strong); border-color:var(--ispt-border-strong);
}
[data-skin="new"] input::placeholder, [data-skin="new"] textarea::placeholder { color:var(--ispt-muted); opacity:1; }
[data-skin="new"] input:autofill { box-shadow:0 0 0 100px var(--ispt-surface) inset; }
[data-skin="new"] input:-webkit-autofill { -webkit-text-fill-color:var(--ispt-text-strong); -webkit-box-shadow:0 0 0 100px var(--ispt-surface) inset; caret-color:var(--ispt-text-strong); }
[data-skin="new"] .form-actions, [data-skin="new"] .control-group, [data-skin="new"] .portlet { color:var(--ispt-text); border-color:var(--ispt-border); }
[data-skin="new"] .form-actions, [data-skin="new"] .portlet-decoration, [data-skin="new"] .portlet-content { background:var(--ispt-surface-2); border-color:var(--ispt-border); }
[data-skin="new"] .form-actions { padding:16px; border-radius:8px; }
[data-skin="new"] .btn:not([class*="btn-"]) { background:var(--ispt-default-bg); border-color:var(--ispt-default-border); color:var(--ispt-default-fg); text-shadow:none; }
[data-skin="new"] .btn-default:hover, [data-skin="new"] .btn-default:focus { color:var(--ispt-text-strong); }
[data-skin="new"] .text-success { color:var(--ispt-success-text); }
[data-skin="new"] .text-warning { color:var(--ispt-warning-text); }
[data-skin="new"] .text-danger { color:var(--ispt-danger-text); }
[data-skin="new"] .text-info { color:var(--ispt-active-text); }
[data-skin="new"] .yBlackMarked, [data-skin="new"] .yWhiteMarked { color:var(--ispt-text-strong)!important; }
[data-skin="new"] .yRedMarked { color:var(--ispt-danger-text)!important; }
[data-skin="new"] .yGreyQuestionMark { color:var(--ispt-muted); }
[data-skin="new"] .yBackBlack, [data-skin="new"] .yBackDefault { background:var(--ispt-surface-2); color:var(--ispt-text-strong); }
[data-skin="new"] .yBackPrimary, [data-skin="new"] .yBackInfo { background:var(--ispt-active-bg); color:var(--ispt-active-text); }
[data-skin="new"] .yBackSuccess { background:var(--ispt-success-bg); color:var(--ispt-success-text); }
[data-skin="new"] .yBackWarning { background:var(--ispt-warning-bg); color:var(--ispt-warning-text); }
[data-skin="new"] .yBackDanger { background:var(--ispt-danger-bg); color:var(--ispt-danger-text); }
[data-skin="new"] .navbar-default, [data-skin="new"] .navbar-default .navbar-collapse, [data-skin="new"] .navbar-inner {
    background:var(--ispt-chrome); border-color:var(--ispt-chrome-border); color:var(--ispt-chrome-text); box-shadow:none;
}
[data-skin="new"] .navbar-default .navbar-brand, [data-skin="new"] .navbar-default .navbar-nav>li>a { color:var(--ispt-chrome-text); }
[data-skin="new"] .navbar-default .navbar-nav>.active>a, [data-skin="new"] .navbar-default .navbar-nav>.open>a,
[data-skin="new"] .navbar-default .navbar-nav>li>a:hover { background:var(--ispt-surface-2); color:var(--ispt-text-strong); }
[data-skin="new"] .navbar-default .navbar-toggle .icon-bar { background:var(--ispt-text); }
[data-skin="new"] #footer { background:var(--ispt-chrome); color:var(--ispt-muted); border-color:var(--ispt-border); }
[data-skin="new"] .panel-success>.panel-heading { background:var(--ispt-success-bg); color:var(--ispt-success-text); border-color:var(--ispt-success-border); }
[data-skin="new"] .panel-info>.panel-heading { background:var(--ispt-active-bg); color:var(--ispt-active-text); border-color:var(--ispt-active-border); }
[data-skin="new"] .panel-warning>.panel-heading { background:var(--ispt-warning-bg); color:var(--ispt-warning-text); border-color:var(--ispt-warning-border); }
[data-skin="new"] .panel-danger>.panel-heading { background:var(--ispt-danger-bg); color:var(--ispt-danger-text); border-color:var(--ispt-danger-border); }
[data-skin="new"] .panel-heading .panel-title { color:inherit!important; }
[data-skin="new"] .table, [data-skin="new"] table.detail-view { color:var(--ispt-text); background:var(--ispt-surface); }
[data-skin="new"] .table>thead>tr>td, [data-skin="new"] .table>tfoot>tr>td, [data-skin="new"] .table>tfoot>tr>th { border-color:var(--ispt-border); }
[data-skin="new"] .grid-view table.items { background:var(--ispt-surface); border-color:var(--ispt-border); }
[data-skin="new"] .grid-view table.items th { background:var(--ispt-surface-2); color:var(--ispt-text-strong); }
[data-skin="new"] .grid-view table.items th a { color:var(--ispt-link); }
[data-skin="new"] .grid-view table.items td, [data-skin="new"] .grid-view table.items th,
[data-skin="new"] table.detail-view td, [data-skin="new"] table.detail-view th { border-color:var(--ispt-border); }
[data-skin="new"] .grid-view table.items tr.odd, [data-skin="new"] table.detail-view tr.odd { background:var(--ispt-surface-2); }
[data-skin="new"] .grid-view table.items tr.even, [data-skin="new"] table.detail-view tr.even { background:var(--ispt-surface); }
[data-skin="new"] .grid-view table.items tbody tr:hover, [data-skin="new"] .grid-view table.items tr.selected { background:var(--ispt-active-bg); }
/* yiistrap paints selected cells #eee (.grid-view .table tr.selected td): let the row colour show through, but keep status cell colours */
[data-skin="new"] .grid-view .table tr.selected td { background:transparent; }
[data-skin="new"] .grid-view .table tr.selected td.yBackBlack, [data-skin="new"] .grid-view .table tr.selected td.yBackDefault { background:var(--ispt-surface-2); }
[data-skin="new"] .grid-view .table tr.selected td.yBackPrimary, [data-skin="new"] .grid-view .table tr.selected td.yBackInfo { background:var(--ispt-active-bg); }
[data-skin="new"] .grid-view .table tr.selected td.yBackSuccess { background:var(--ispt-success-bg); }
[data-skin="new"] .grid-view .table tr.selected td.yBackWarning { background:var(--ispt-warning-bg); }
[data-skin="new"] .grid-view .table tr.selected td.yBackDanger { background:var(--ispt-danger-bg); }
/* Option C: outline the selected row so it stays distinct from hover */
[data-skin="new"] .grid-view .table tr.selected { outline:2px solid var(--ispt-primary); outline-offset:-2px; }
[data-skin="new"] ul.yiiPager a:link, [data-skin="new"] ul.yiiPager a:visited { background:var(--ispt-surface); border-color:var(--ispt-border); color:var(--ispt-link); }
[data-skin="new"] ul.yiiPager .selected a { background:var(--ispt-primary); color:var(--ispt-primary-fg); }
[data-skin="new"] .errorSummary { background:var(--ispt-danger-bg); border-color:var(--ispt-danger-border); color:var(--ispt-danger-text); }

/* Native login replaces the pasted DIVI document, keeping Yii form handling. */
.ispt-login { max-width:1060px; margin:20px auto; }
.ispt-login-banner { font-size:20px; font-weight:600; }
/* Heading stays for screen readers (the section is aria-labelledby it) but is hidden visually */
.ispt-login h1 { position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.ispt-login-art { padding-top:30px; }
/* Demo "ticket" on the left, login form on the right, centered together as one group in the panel.
   Narrow screens stack them, login first. */
.ispt-login-layout { display:grid; grid-template-columns:270px minmax(0,460px); justify-content:center; align-items:center; column-gap:56px; }
.ispt-login-demo { width:270px; padding:18px 20px; text-align:center;
    background:var(--ispt-surface-2); background:radial-gradient(circle at top, color-mix(in srgb, var(--ispt-primary) 28%, var(--ispt-surface-2)), var(--ispt-surface-2) 70%);
    border:2px dashed color-mix(in srgb, var(--ispt-primary) 65%, transparent); border-radius:16px;
    box-shadow:0 12px 30px rgba(0,0,0,.35); transform:rotate(2deg); transition:transform .2s ease; }
.ispt-login-demo:hover { transform:rotate(0) scale(1.02); }
.ispt-login-demo-badge { display:inline-flex; align-items:center; gap:6px; padding:3px 10px; border-radius:999px; background:var(--ispt-primary); color:var(--ispt-primary-fg);
    font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; }
.ispt-login-demo-badge i { width:7px; height:7px; border-radius:50%; background:#4ade80; animation:ispt-demo-pulse 1.6s ease-in-out infinite; }
@keyframes ispt-demo-pulse { 0%,100% { opacity:1; } 50% { opacity:.25; } }
.ispt-login-demo-title { margin:12px 0 14px; font-size:18px; font-weight:700; color:var(--ispt-text-strong); }
.ispt-login-demo-creds { display:flex; gap:10px; justify-content:center; }
.ispt-login-demo-chip { display:flex; flex-direction:column; min-width:96px; padding:8px 10px; border:1px solid var(--ispt-border); border-radius:10px; background:var(--ispt-surface); }
.ispt-login-demo-chip small { font-size:10px; letter-spacing:.06em; text-transform:uppercase; color:var(--ispt-muted); }
.ispt-login-demo-chip b { font-family:monospace; font-size:17px; color:var(--ispt-text-strong); user-select:all; }
.ispt-login-demo-hint { margin:12px 0 0; font-size:12px; font-style:italic; color:var(--ispt-muted); }
@media (max-width:991px) {
    .ispt-login-layout { grid-template-columns:minmax(0,460px); }
    .ispt-login-box { order:-1; }
    .ispt-login-demo { justify-self:center; margin-top:28px; transform:none; }
    .ispt-login-demo-hint { display:none; }
}
.ispt-login .form-actions { display:flex; flex-wrap:wrap; gap:8px; margin-top:20px; background:transparent; border:0; padding:0; }
.ispt-login-features { display:flex; flex-wrap:wrap; }
/* Feature nodes: the title sits in a circle, the paragraph below it */
.ispt-login-node { margin-bottom:28px; text-align:center; }
.ispt-login-node h2 { display:flex; align-items:center; justify-content:center; width:140px; height:140px; margin:0 auto 16px; padding:16px; border-radius:50%;
    font-size:16px; font-weight:700; line-height:1.3; color:var(--ispt-text-strong);
    background:var(--ispt-surface-2); background:radial-gradient(circle at top, color-mix(in srgb, var(--ispt-primary) 28%, var(--ispt-surface-2)), var(--ispt-surface-2) 70%);
    border:2px solid color-mix(in srgb, var(--ispt-primary) 65%, transparent);
    box-shadow:0 0 18px color-mix(in srgb, var(--ispt-primary) 35%, transparent); }
.ispt-login-node p { max-width:290px; margin:0 auto; font-size:13px; line-height:1.55; color:var(--ispt-muted); }
/* Desktop: the circles sit on the bottom of a larger circle, joined by one dashed arc.
   The SVG covers the row's top 200px at 1 unit = 1px vertically. Side circle centers are at y=70
   (140px circle), the middle one at y=130 (column pushed down 60px), and the parabola through
   (167,70) (500,130) (833,70) starts and ends at the side centers, hidden behind the opaque circles. */
.ispt-login-arc { display:none; }
@media (min-width:992px) {
    .ispt-login-features { position:relative; }
    .ispt-login-features>div { position:relative; z-index:1; }
    .ispt-login-features>div:nth-child(2) { margin-top:60px; }
    .ispt-login-arc { display:block; position:absolute; left:0; top:0; width:100%; height:200px; z-index:0; overflow:visible; pointer-events:none; }
    .ispt-login-arc path { fill:none; stroke:color-mix(in srgb, var(--ispt-primary) 65%, transparent); stroke-width:2; stroke-dasharray:6 6; }
}

/* Welcome, orders, shop and legacy marketing/package fragments. */
[data-skin="new"] #welcome-page {
    --wl-ink:var(--ispt-text); --wl-h1:var(--ispt-heading); --wl-h2:var(--ispt-heading); --wl-h3:var(--ispt-text-strong);
    --wl-intro:var(--ispt-text); --wl-accent:var(--ispt-primary); --wl-accent-dk:var(--ispt-link);
    --wl-edge:var(--ispt-border); --wl-card-edge:var(--ispt-border);
}
[data-skin="new"] #welcome-page .ispt-welcome, [data-skin="new"] #welcome-page .ispt-path,
[data-skin="new"] #welcome-page .ispt-start { background:var(--ispt-surface); box-shadow:var(--ispt-shadow); }
[data-skin="new"] #welcome-page .ispt-flow-step, [data-skin="new"] #welcome-page .ispt-flow-icon,
[data-skin="new"] #welcome-page .ispt-path-head { background:var(--ispt-surface-2); }
[data-skin="new"] #welcome-page .ispt-path-head { border-bottom:1px solid var(--ispt-border); }
[data-skin="new"] #welcome-page .ispt-path-button:hover, [data-skin="new"] #welcome-page .ispt-start-button:hover { background:var(--ispt-primary-hover); }
[data-skin="new"] .ispt-ot {
    --ot-ink:var(--ispt-text); --ot-muted:var(--ispt-muted); --ot-edge:var(--ispt-warning-border); --ot-rail:var(--ispt-border);
    --ot-accent:var(--ispt-warning-text); --ot-accent-dk:var(--ispt-warning-text);
    background:var(--ispt-surface); box-shadow:var(--ispt-shadow);
}
[data-skin="new"] .ispt-ot-icon, [data-skin="new"] .ispt-ot-dot, [data-skin="new"] .ispt-ot-button { background:var(--ispt-surface-2); }
[data-skin="new"] .ispt-ot-done .ispt-ot-dot { background:var(--ot-accent); }
[data-skin="new"] .ispt-ot-button:hover { background:var(--ispt-warning-bg); color:var(--ispt-warning-text); }
[data-skin="new"] .ispt-notice, [data-skin="new"] #welcome-page .ispt-start.ispt-start-order { background:var(--ispt-warning-bg); border-color:var(--ispt-warning-border); color:var(--ispt-text); }
[data-skin="new"] #welcome-page .ispt-start-order .ispt-start-copy p { color:var(--ispt-text); }
[data-skin="new"] #welcome-page .ispt-start-order .ispt-start-button { color:var(--ispt-warning-fg); }
[data-skin="new"] #main-content .panel-purple, [data-skin="new"] #main-content .panel-blue,
[data-skin="new"] #main-content .panel-green, [data-skin="new"] #main-content .panel-orange { border-color:var(--ispt-border); }
[data-skin="new"] #main-content .panel-purple .panel-heading, [data-skin="new"] #main-content .panel-blue .panel-heading,
[data-skin="new"] #main-content .panel-green .panel-heading, [data-skin="new"] #main-content .panel-orange .panel-heading { background:var(--ispt-surface-2); color:var(--ispt-text-strong)!important; filter:none; }
[data-skin="new"] #main-content .panel-heading p { color:var(--ispt-text-strong); }
[data-skin="new"] .orgov .orgov-badge { background:var(--ispt-primary); color:var(--ispt-primary-fg); }
[data-skin="new"] .orgov .orgov-panel-head { background:var(--ispt-surface-2); border-bottom:1px solid var(--ispt-border); }
[data-skin="new"] .orgov .orgov-danger .orgov-panel-head { background:var(--ispt-danger-bg); }
/* Retained DIVI fragments inherit the shared palette, with no page-builder CSS. */
[data-skin="new"] .et_pb_section, [data-skin="new"] .et_pb_module { background-color:var(--ispt-surface); color:var(--ispt-text); }
[data-skin="new"] .et_pb_pricing { list-style:none; padding:0; color:var(--ispt-text); }
[data-skin="new"] .et_pb_pricing li { padding:8px 0; border-bottom:1px solid var(--ispt-border); }

/* Date pickers, autocomplete, Select2 and module admin widgets. */
[data-skin="new"] .ui-widget-content, [data-skin="new"] .ui-widget-header,
[data-skin="new"] .select2-drop, [data-skin="new"] .select2-container .select2-choice,
[data-skin="new"] .select2-container-multi .select2-choices, [data-skin="new"] .select2-dropdown,
[data-skin="new"] .select2-container--default .select2-selection--single,
[data-skin="new"] .select2-container--default .select2-selection--multiple {
    background:var(--ispt-surface); border-color:var(--ispt-border); color:var(--ispt-text);
}
[data-skin="new"] .ui-widget-content a, [data-skin="new"] .select2-container .select2-choice,
[data-skin="new"] .select2-container--default .select2-selection--single .select2-selection__rendered { color:var(--ispt-text-strong); }
[data-skin="new"] .ui-state-default, [data-skin="new"] .ui-widget-content .ui-state-default,
[data-skin="new"] .ui-widget-header .ui-state-default { background:var(--ispt-surface-2); border-color:var(--ispt-border); color:var(--ispt-text); }
[data-skin="new"] .ui-state-hover, [data-skin="new"] .ui-widget-content .ui-state-hover,
[data-skin="new"] .ui-state-active, [data-skin="new"] .ui-widget-content .ui-state-active,
[data-skin="new"] .select2-results .select2-highlighted { background:var(--ispt-primary); border-color:var(--ispt-primary); color:var(--ispt-primary-fg); }
[data-skin="new"] .bootstrap-datetimepicker-widget table td.day:hover,
[data-skin="new"] .bootstrap-datetimepicker-widget table td.hour:hover,
[data-skin="new"] .bootstrap-datetimepicker-widget table td.minute:hover,
[data-skin="new"] .bootstrap-datetimepicker-widget table td span:hover,
[data-skin="new"] .bootstrap-datetimepicker-widget table th:hover { background:var(--ispt-active-bg); }

/* Map controls and popups; geographic imagery retains its original colors. */
[data-skin="new"] .leaflet-popup-content-wrapper,
[data-skin="new"] .leaflet-popup-tip, [data-skin="new"] .leaflet-control-layers,
[data-skin="new"] .leaflet-bar a { background:var(--ispt-surface); border-color:var(--ispt-border); color:var(--ispt-text); }
/* overview map Save position / auto-zoom: a native Google map control (pushed in the view), styled like the others */
[data-skin="new"] #floating-panel { position:static; top:auto; right:auto; margin:10px 0 0 10px; display:none; gap:8px; padding:0; background:transparent; border:0; line-height:normal; }
/* hidden in the page HTML until Google moves it into the map (.gm-style): no flash or layout jump while loading */
[data-skin="new"] .gm-style #floating-panel { display:flex; }
[data-skin="new"] #floating-panel button { width:auto; height:40px; padding:0 14px; background:#fff; border:0; border-radius:2px;
    box-shadow:rgba(0,0,0,.3) 0 1px 4px -1px; color:#333; font:500 16px 'Roboto', Arial, sans-serif; cursor:pointer; }
[data-skin="new"] #floating-panel button:hover { background:#ebebeb; color:#000; }
[data-skin="new"] .gm-style .gm-style-iw-c, [data-skin="new"] .gm-style .gm-style-iw-tc::after,
[data-skin="new"] .gm-style .gm-style-iw-d { background:var(--ispt-surface); color:var(--ispt-text); }
[data-skin="new"] .gm-style .gm-style-iw-d { color-scheme:dark; }
[data-skin="new"] .node text { fill:var(--ispt-text-strong); }
[data-skin="new"] div.tooltip { background:var(--ispt-surface-2); color:var(--ispt-text-strong); border-color:var(--ispt-border); }
[data-skin="new"] .c3-chart-texts text { fill:var(--ispt-text); }
/* Embedded payment UI owns its palette; light color-scheme prevents frame gaps. */
[data-skin="new"] [id^="paypal-button"], [data-skin="new"] #hw-paypal-buttons { color-scheme:light; }

/* Standalone Yii errors do not pass through a controller or Bootstrap layout. */
[data-skin="new"] body.ispt-error-page { max-width:1040px; margin:40px auto; padding:28px; font-size:15px; line-height:1.6; }
[data-skin="new"] .ispt-error-page p, [data-skin="new"] .ispt-error-page .version { color:var(--ispt-text); font-family:inherit; font-size:inherit; }
[data-skin="new"] .ispt-error-page .version { border-color:var(--ispt-border); }
[data-skin="new"] .ispt-error-page .source, [data-skin="new"] .ispt-error-page .code,
[data-skin="new"] .ispt-error-page .trace { background:var(--ispt-surface); color:var(--ispt-text); border-color:var(--ispt-border); }
[data-skin="new"] .ispt-error-page .error { background:var(--ispt-danger-bg); color:var(--ispt-danger-text); }
@media(max-width:767px) {
    .ispt-login { margin:10px auto; }
    .ispt-login-art { padding-top:0; margin-bottom:22px; }
    .ispt-login-art img { max-height:145px; width:auto; }
    .ispt-login-features>div { width:100%; }
    .ispt-login .form-actions .btn { white-space:normal; }
    [data-skin="new"] body.ispt-error-page { margin:12px; padding:16px; }
}
[data-skin="new"] .ispt-error-page .message,
[data-skin="new"] .ispt-error-page .code pre { background:var(--ispt-surface-2); color:var(--ispt-text); border-color:var(--ispt-border); }
[data-skin="new"] .ispt-error-page .trace .plus, [data-skin="new"] .ispt-error-page .trace .minus { color:var(--ispt-text-strong); border-color:var(--ispt-border-strong); }
[data-skin="new"] .ispt-error-page .trace-file:hover { background:var(--ispt-active-bg); }
[data-skin="new"] .ispt-error-page .container { margin:0; }
[data-skin="new"] .ispt-error-page pre { overflow:auto; }

/* Fluid application layout: use the viewport instead of stacking fixed-width
   shells. Bootstrap rows retain their matching 15px column gutters. */
[data-skin="new"] .ispt-page {
    width:100%; max-width:none; padding:0 16px;
}
[data-skin="new"] .ispt-page #content { min-width:0; }
[data-skin="new"] .ispt-page .ispt-overall,
[data-skin="new"] .ispt-page .orgov {
    width:100%; max-width:none; margin-left:0; margin-right:0;
}
[data-skin="new"] .ispt-page .ispt-overall { padding:0; }
[data-skin="new"] #available-packages-page .ap-shell { max-width:none; padding:0; }
[data-skin="new"] #welcome-page .ispt-welcome {
    max-width:none; margin:12px 0; padding:20px;
}
[data-skin="new"] #welcome-page .ispt-ot { max-width:none; margin:12px 0; }
[data-skin="new"] .well { padding:16px; }
[data-skin="new"] .panel>.panel-heading { padding:12px 16px; }
[data-skin="new"] .panel>.panel-body,
[data-skin="new"] .ispt-report .panel>.panel-body,
[data-skin="new"] .ispt-report .ispt-summary>.panel-body,
[data-skin="new"] .ispt-report .ispt-question-panel>.panel-body { padding:16px; }
/* Gap between the agent menu pills and the first dashboard panel. */
#agent-dashboard .nav-pills { margin-bottom:16px; }
/* Keep wide data tables scrollable without pushing the document off screen. */
[data-skin="new"] .grid-view {
    max-width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch;
}
[data-skin="new"] .grid-view .filters input,
[data-skin="new"] .grid-view .filters select { max-width:100%; box-sizing:border-box; }
[data-skin="new"] .ispt-page-heading { display:flex; flex-wrap:wrap; align-items:flex-start; margin-bottom:12px; }
[data-skin="new"] .ispt-page-heading::before,
[data-skin="new"] .ispt-page-heading::after { display:none; }
[data-skin="new"] .ispt-breadcrumb-column { float:none; flex:1 1 320px; width:auto; min-width:0; }
[data-skin="new"] .ispt-breadcrumb-column .breadcrumb { margin-bottom:0; }
[data-skin="new"] .ispt-help-column { float:none; flex:0 1 auto; width:auto; display:flex; flex-wrap:wrap; gap:6px; }
[data-skin="new"] .ispt-help-column .btn { white-space:normal; }
[data-skin="new"] .ispt-help-column .btn-block { width:auto; }
/* Footer follows the page and cannot cover table rows or mobile controls. */
[data-skin="new"] body.ispt-site { display:flex; flex-direction:column; min-height:100vh; padding-bottom:0; }
[data-skin="new"] .ispt-site>.ispt-page { flex:1 0 auto; }
[data-skin="new"] .ispt-footer { flex-shrink:0; margin:20px 0 0; border-radius:0; }
[data-skin="new"] .ispt-footer-content {
    float:none; width:100%; display:flex; justify-content:space-between;
    flex-wrap:wrap; gap:8px 20px; margin:10px 0; padding:0 16px;
}
[data-skin="new"] .ispt-footer-content::before,
[data-skin="new"] .ispt-footer-content::after { display:none; }
@media(max-width:767px) {
    [data-skin="new"] .ispt-page { padding:0 15px; }
    [data-skin="new"] .ispt-page-heading { gap:8px 0; }
    [data-skin="new"] .ispt-breadcrumb-column { flex-basis:100%; }
    [data-skin="new"] .ispt-help-column { flex-basis:100%; }
    [data-skin="new"] #welcome-page .ispt-welcome { margin:8px 0; padding:12px; }
    [data-skin="new"] #welcome-page .ispt-ot { margin:8px 0; }
    [data-skin="new"] .well,
    [data-skin="new"] .panel>.panel-heading,
    [data-skin="new"] .panel>.panel-body,
    [data-skin="new"] .ispt-report .panel>.panel-body,
    [data-skin="new"] .ispt-report .ispt-summary>.panel-body,
    [data-skin="new"] .ispt-report .ispt-question-panel>.panel-body { padding:12px; }
    [data-skin="new"] #welcome-page .ispt-path-body { padding:12px; }
    [data-skin="new"] .ispt-footer-content { padding:0 15px; }
}

/* Packet dots follow the SVG orbit in both directions: outbound above the
   house, inbound below. SVG pathLength keeps their spacing fluid at any size. */
.ispt-report .ispt-connection-packets { display:none; fill:none; }
.ispt-report .ispt-state-active .ispt-connection-packets {
    display:inline; stroke:var(--report-status-active); stroke-width:5;
    stroke-linecap:round; stroke-dasharray:0 20;
    animation:ispt-connection-flow 4s linear infinite;
}
@keyframes ispt-connection-flow {
    from { stroke-dashoffset:0; }
    to { stroke-dashoffset:-100; }
}
@media(prefers-reduced-motion:reduce) {
    .ispt-report .ispt-state-active .ispt-connection-packets { display:none; animation:none; }
}

/* Dashboard reference: detailed house, status badge and bidirectional orbit. */
.ispt-report .ispt-connection-art { max-height:165px; overflow:visible; }
.ispt-report .ispt-connection-halo { fill:none; stroke:var(--report-border); stroke-width:1; stroke-dasharray:2 10; opacity:.65; }
.ispt-report .ispt-connection-house { fill:#1c3a49; stroke:#8cadbd; stroke-width:1; stroke-linejoin:round; }
.ispt-report .ispt-connection-roof { fill:none; stroke:#b9d5df; stroke-width:1.6; stroke-linejoin:round; }
.ispt-report .ispt-connection-chimney { fill:var(--report-surface-alt); stroke:#8cadbd; stroke-width:1; }
.ispt-report .ispt-connection-attic, .ispt-report .ispt-connection-window { fill:#f5cd81; }
.ispt-report .ispt-connection-frame { stroke:#fff0c6; stroke-width:.8; }
.ispt-report .ispt-connection-door { fill:var(--report-surface-alt); stroke:#688d9e; stroke-width:.8; }
.ispt-report .ispt-connection-knob { fill:#a9c7d5; }
.ispt-report .ispt-connection-badge { fill:var(--report-surface); stroke:var(--report-amber); stroke-width:1.2; }
.ispt-report .ispt-connection-check, .ispt-report .ispt-connection-wait { fill:none; stroke:var(--report-amber); stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
.ispt-report .ispt-connection-check { display:none; }
.ispt-report .ispt-state-active .ispt-connection-check { display:inline; stroke:var(--report-status-active); }
.ispt-report .ispt-state-active .ispt-connection-wait { display:none; }
.ispt-report .ispt-state-active .ispt-connection-badge { stroke:var(--report-status-active); }
.ispt-report .ispt-connection-art .ispt-connection-label { fill:var(--report-ink); font-size:12px; font-weight:600; }
.ispt-report .ispt-state-active .ispt-connection-packets { stroke-width:2.5; stroke-dasharray:.35 16.316667; animation-duration:5s; }
.ispt-report .ispt-ping-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.ispt-report .ispt-ping-latest { max-width:260px; text-align:right; }
.ispt-report .ispt-chart-pings .ispt-chart-event:hover circle,
.ispt-report .ispt-chart-pings .ispt-chart-event:focus circle { fill:var(--report-surface); stroke:var(--report-ink); stroke-width:2.5; r:6; }
@media(max-width:767px) {
    .ispt-report .ispt-connection-art { max-height:155px; margin-top:12px; }
    .ispt-report .ispt-ping-latest { text-align:left; }
}

/* Decorative signal bars beside the status strip's recorded ping value. */
.ispt-report .ispt-ping-value { display:inline-flex; align-items:center; gap:6px; vertical-align:middle; white-space:nowrap; }
.ispt-report .ispt-ping-signal { flex:none; fill:#d7fae9; }

/* An interrupted refresh must not imply confirmed live communication. */
.ispt-report .ispt-live-stale .ispt-connection-packets { display:none; }