/* /tools/uptime-monitoring/style.css
 * Ecosystem-aligned styles. Uses #039669 (primary), #e11d48 (danger), #3e6fe8 (accent).
 * Table-based layout for better a11y and to integrate with .table styles.
 */

:root {
	--um-primary:    #039669;
	--um-primary-h:  #57b16c;
	--um-accent:     #3e6fe8;
	--um-danger:     #e11d48;
	--um-warn:       #f59e0b;
	--um-success:    #039669; /* same as primary — unified brand green */
	--um-text:       #000213; /* ecosystem primary text */
	--um-muted:      #454f63; /* ecosystem secondary text — passes WCAG AAA on white */
	--um-text-faint: #6b7280; /* for very low-importance info (timestamps "10m ago") */
	--um-border:     #e9e9ea; /* ecosystem border color */
	--um-bg-soft:    #f9fafb;
	--um-bg-zebra:   #dff3e0;
	--um-bg-down:    #fef2f2;
	--um-bg-warn:    #fef3c7;
}

/* ========================================================================== */
/* SMART-DIFF CELL UPDATE FADE                                                 */
/* Applied for 600ms to cells/sections whose innerHTML was replaced during    */
/* the patch path (poll-driven update). Subtle green flash signals "this just */
/* changed" without the jarring full-row redraw of the old innerHTML approach.*/
/* ========================================================================== */
@keyframes um-cell-fade {
	0%   { background-color: rgba(3, 150, 105, 0.18); }
	100% { background-color: transparent; }
}
td.um-cell-updated,
.um-mcard__head.um-cell-updated,
.um-mcard__metrics.um-cell-updated,
.um-mcard__charts.um-cell-updated,
.um-mcard__summary.um-cell-updated,
.um-mcard__tags.um-cell-updated,
.um-mcard__url-row.um-cell-updated {
	animation: um-cell-fade 0.6s ease-out;
}
/* Respect user preference — no animation for those who don't want it. */
@media (prefers-reduced-motion: reduce) {
	td.um-cell-updated,
	.um-mcard__head.um-cell-updated,
	.um-mcard__metrics.um-cell-updated,
	.um-mcard__charts.um-cell-updated,
	.um-mcard__summary.um-cell-updated,
	.um-mcard__tags.um-cell-updated,
	.um-mcard__url-row.um-cell-updated {
		animation: none;
	}
}

/* ========================================================================== */
/*  TOOLBAR                                                                   */
/* ========================================================================== */
.um-tool { font-size: 14px; line-height: 1.5; color: var(--um-text); }

.um-toolbar {
	display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
	padding: 12px 0 16px; margin-bottom: 16px;
	border-bottom: 2px solid var(--um-border);
}
.um-toolbar__left { flex: 1; }
.um-toolbar__right { display: flex; flex-wrap: wrap; gap: 8px; }
.um-subtitle { color: var(--um-muted); margin: 0; font-size: 13px; }

/* Toolbar buttons inherit ecosystem .button.primary / .button.secondary */

/* ========================================================================== */
/*  SUMMARY CARDS                                                             */
/* ========================================================================== */
.um-summary {
	display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
	gap: 8px; margin: 0 0 16px;
}
.um-stat {
	background: #fff; border: 1px solid var(--um-border); border-radius: 8px;
	padding: 12px; text-align: center; cursor: pointer; transition: all .2s;
	position: relative;
}
.um-stat:hover {
	border-color: var(--um-primary);
	box-shadow: 0 4px 12px rgba(3,150,105,0.15); transform: translateY(-2px);
}
.um-stat--active {
	border-color: var(--um-primary); background: #f0fdf4;
	box-shadow: inset 0 -3px 0 var(--um-primary);
}
.um-stat__num { font-size: 26px; font-weight: 700; line-height: 1.2; font-family: var(--secondary-font, "Syne"), sans-serif; }
.um-stat__label { font-size: 11px; color: var(--um-muted); text-transform: uppercase; letter-spacing: .5px; margin-top: 2px; }

.um-stat--up        .um-stat__num { color: var(--um-success); }
.um-stat--down      .um-stat__num { color: var(--um-danger); }
.um-stat--issues    .um-stat__num { color: var(--um-warn); }
.um-stat--expiring  .um-stat__num { color: #fb923c; }
.um-stat--paused    .um-stat__num { color: var(--um-muted); }
.um-stat--avg       .um-stat__num { color: var(--um-accent); }

/* ========================================================================== */
/*  CONTROLS  (search, filters, sort)                                         */
/* ========================================================================== */
.um-controls {
	display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; align-items: center;
}
.um-controls input,
.um-controls select {
	padding: 7px 12px; border: 1px solid var(--um-border); border-radius: 4px;
	font-size: 13px; background: #fff; transition: all .2s;
	max-width: 240px; height: 36px; box-sizing: border-box;
}
.um-controls input:focus,
.um-controls select:focus { border-color: var(--um-accent); outline: none; }

/* Restore select arrow (ecosystem CSS removes appearance) */
.um-controls select {
	-webkit-appearance: none; -moz-appearance: none; appearance: none;
	padding-right: 30px;
	background: #fff url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="%239CA3AF" d="M16.293 9.293 12 13.586 7.707 9.293l-1.414 1.414L12 16.414l5.707-5.707z"/></svg>') no-repeat calc(100% - 5px) 50%;
}
#um-search { flex: 1; min-width: 200px; max-width: 350px; }

/* Custom × clear button — ecosystem CSS may hide native search-cancel pseudo,
   so we render our own. JS toggles [hidden] based on input value. */
.um-search-wrap {
	position: relative;
	display: flex;
	align-items: center;
	flex: 1;
	min-width: 200px;
	max-width: 350px;
}
.um-search-wrap #um-search {
	width: 100%;
	max-width: none;
	padding-right: 32px;
}
/* Hide native webkit X — we control it ourselves */
.um-search-wrap #um-search::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; display: none; }
.um-search-clear {
	position: absolute;
	right: 6px;
	top: 50%;
	transform: translateY(-50%);
	width: 22px;
	height: 22px;
	border-radius: 50%;
	border: 0;
	background: #e5e7eb;
	color: #4b5563;
	font-size: 16px;
	line-height: 1;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
}
.um-search-clear:hover { background: #d1d5db; color: #000; }
.um-search-clear[hidden] { display: none; }
.um-pending { font-size: 12px; color: var(--um-muted); }

/* ========================================================================== */
/*  TABLE LAYOUT (rows)                                                       */
/* ========================================================================== */
.um-list-wrap {
	border: 1px solid var(--um-border); border-radius: 8px;
	background: #fff;
	/* NO overflow:hidden here — tooltips need to escape vertically.
	   Horizontal scroll is on a dedicated inner container (.um-table-scroll). */
}
.um-table-scroll {
	overflow-x: auto;
	overflow-y: visible;
	-webkit-overflow-scrolling: touch;
	border-radius: 8px;
}

.um-table {
	width: 100%; border-collapse: collapse; table-layout: auto; font-size: 13px;
}
.um-table thead th {
	background: var(--um-bg-soft); text-align: left;
	padding: 10px 12px; border-bottom: 2px solid var(--um-border);
	font-size: 11px; font-weight: 700; color: var(--um-muted);
	text-transform: uppercase; letter-spacing: .5px;
	white-space: nowrap; position: relative;
}
.um-table tbody tr {
	cursor: pointer; transition: background .15s;
	border-bottom: 1px solid var(--um-border);
}
/* NO stripes in .um-table (recommended Variant 1 — DOWN rows pop out clearly,
   matches Datadog/Pingdom/BetterStack convention).
   IMPORTANT: ecosystem CSS has `tbody tr:nth-of-type(2n-1) { background: #dff3e0 }`
   that we need to override here. Other tools keep their stripes. */
.um-table tbody tr,
.um-table tbody tr:nth-of-type(2n),
.um-table tbody tr:nth-of-type(2n-1)  { background: #fff !important; }
.um-table tbody tr:hover,
.um-table tbody tr:nth-of-type(2n):hover,
.um-table tbody tr:nth-of-type(2n-1):hover {
	background: #f0fdf4 !important;
	box-shadow: inset 4px 0 0 #039669;
}
.um-table tbody tr.um-row--down,
.um-table tbody tr.um-row--down:nth-of-type(2n),
.um-table tbody tr.um-row--down:nth-of-type(2n-1) { background: var(--um-bg-down) !important; }
.um-table tbody tr.um-row--down:hover { background: #fee2e2 !important; }
.um-table tbody tr.um-row--paused { opacity: .7; }
.um-table tbody tr.um-row--expanded,
.um-table tbody tr.um-row--expanded:nth-of-type(2n),
.um-table tbody tr.um-row--expanded:nth-of-type(2n-1) {
	background: #f0fdf4 !important;
	box-shadow: inset 4px 0 0 #039669;
}

.um-table tbody td {
	padding: 12px; vertical-align: middle; word-wrap: break-word;
	color: #000213; /* primary text — high contrast for WCAG AA */
	border-bottom: 1px solid #dddfe0; /* row separator — visible on white AND tinted DOWN rows */
}

/* Column widths */
.um-col-status { width: 100px; }
.um-col-url    { min-width: 220px; }
.um-col-http   { width: 60px; text-align: center; }
.um-col-rt     { width: 80px; text-align: right; font-family: ui-monospace, monospace; }
.um-col-uptime { width: 374px; }
.um-col-ssl    { width: 80px; text-align: center; }
.um-col-domain { width: 80px; text-align: center; }
.um-col-last   { width: 100px; font-size: 11px; color: var(--um-muted); text-align: right; }
.um-col-actions{ width: 160px; text-align: right; white-space: nowrap; }

/* Status pill with animated dot (ecosystem-style) */
.um-status {
	display: inline-flex; align-items: center; gap: 6px;
	padding: 4px 10px; border-radius: 14px;
	font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .3px;
	white-space: nowrap;
}
.um-status__dot {
	width: 8px; height: 8px; border-radius: 50%;
	flex-shrink: 0;
}
.um-status--up      { background: #d1fae5; color: #065f46; }
.um-status--up      .um-status__dot { background: var(--um-success); box-shadow: 0 0 0 0 rgba(16,185,129,0.7); animation: um-pulse 2s infinite; }
.um-status--down    { background: #fee2e2; color: #991b1b; }
.um-status--down    .um-status__dot { background: var(--um-danger); box-shadow: 0 0 0 0 rgba(225,29,72,0.7); animation: um-pulse-fast 1s infinite; }
.um-status--paused  { background: #f3f4f6; color: #4b5563; }
.um-status--paused  .um-status__dot { background: #9ca3af; }
.um-status--unknown { background: #fef3c7; color: #78350f; }
.um-status--unknown .um-status__dot { background: var(--um-warn); }
.um-status--checking { background: #dbeafe; color: #1e40af; }
.um-status--checking .um-status__dot { background: var(--um-accent); animation: um-pulse-fast 1s infinite; }
.um-status--redirect { background: #fed7aa; color: #9a3412; }
.um-status--redirect .um-status__dot { background: #f97316; }

/* Shimmer placeholders for cells in monitors that have never been checked yet */
@keyframes um-shimmer {
	0%   { background-position: -200% 0; }
	100% { background-position: 200% 0; }
}
.um-cell-loading {
	display: inline-block; height: 18px; width: 60px; border-radius: 4px;
	background: linear-gradient(90deg, #e5e7eb 0%, #f3f4f6 50%, #e5e7eb 100%);
	background-size: 200% 100%;
	animation: um-shimmer 1.5s ease-in-out infinite;
	vertical-align: middle;
}
.um-cell-loading--xs { width: 28px; height: 16px; }
.um-cell-loading--small { width: 36px; }
.um-cell-loading--wide { width: 90px; }

/* Subtle dim on loading rows so user knows they're pending */
.um-table tbody tr.um-row--loading { background: #fefce8 !important; }
.um-table tbody tr.um-row--loading:hover { background: #fef9c3 !important; box-shadow: inset 4px 0 0 var(--um-warn); }

@keyframes um-pulse {
	0% { box-shadow: 0 0 0 0 rgba(16,185,129,0.7); }
	70% { box-shadow: 0 0 0 8px rgba(16,185,129,0); }
	100% { box-shadow: 0 0 0 0 rgba(16,185,129,0); }
}
@keyframes um-pulse-fast {
	0% { box-shadow: 0 0 0 0 rgba(225,29,72,0.7); }
	70% { box-shadow: 0 0 0 8px rgba(225,29,72,0); }
	100% { box-shadow: 0 0 0 0 rgba(225,29,72,0); }
}

/* Queued pill */
.um-queued {
	display: inline-block; margin-left: 4px;
	padding: 2px 7px; border-radius: 10px;
	background: #cfe2ff; color: #084298;
	font-size: 10px; font-weight: 600;
}

/* URL cell */
.um-url-cell .um-url-name { font-weight: 600; color: var(--um-text); display: block; margin-bottom: 2px; }
.um-url-cell .um-url-link {
	color: var(--um-accent); text-decoration: none; font-size: 12px;
	word-break: break-all; display: inline-flex; align-items: center; gap: 4px;
}
.um-url-cell .um-url-link:hover { color: var(--um-text); text-decoration: underline; }
.um-url-cell .um-url-link svg { width: 11px; height: 11px; flex-shrink: 0; opacity: .6; }
.um-url-cell .um-url-meta { margin-top: 6px; display: flex; flex-wrap: wrap; gap: 4px; }

/* Tags */
.um-tag {
	display: inline-block; padding: 2px 8px; border-radius: 10px;
	background: #e0e7ff; color: #3730a3; font-size: 10px; font-weight: 600;
	cursor: pointer; transition: all .15s;
}
.um-tag:hover { background: var(--um-accent); color: #fff; transform: translateY(-1px); }
.um-tag--active {
	background: var(--um-accent);
	color: #fff;
	box-shadow: 0 0 0 2px rgba(62, 111, 232, 0.20);
}
.um-tag--active:hover { background: #2952c6; transform: none; }

/* Keyword pill */
.um-keyword {
	display: inline-flex; align-items: center; gap: 3px;
	padding: 2px 7px; border-radius: 10px; font-size: 10px; font-weight: 600;
}
.um-keyword--ok  { background: #d1fae5; color: #065f46; }
.um-keyword--bad { background: #fee2e2; color: #991b1b; }
.um-keyword--pending { background: #f3f4f6; color: #6b7280; }
.um-plan-badge {
	display: inline-block; margin-left: 6px; padding: 1px 8px;
	background: #fef3c7; color: #92400e; border-radius: 10px;
	font-size: 10px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase;
}

/* HTTP code */
.um-code {
	display: inline-block; padding: 3px 8px; border-radius: 4px;
	font-family: ui-monospace, "SFMono-Regular", monospace;
	font-size: 12px; font-weight: 700;
}
.um-code--2xx { background: #d1fae5; color: #065f46; }
.um-code--3xx { background: #dbeafe; color: #1e40af; }
.um-code--4xx { background: #fef3c7; color: #78350f; }
.um-code--5xx { background: #fee2e2; color: #991b1b; }
.um-code--none { color: #d1d5db; font-weight: normal; }

/* Response time */
.um-rt-fast   { color: var(--um-success); font-weight: 600; }
.um-rt-mid    { color: #fbbf24; font-weight: 600; }
.um-rt-slow   { color: #f97316; font-weight: 600; }
.um-rt-vslow  { color: var(--um-danger); font-weight: 600; }

/* Uptime % */
.um-uptime { font-weight: 700; font-size: 13px; }
.um-uptime--high   { color: var(--um-success); }
.um-uptime--mid    { color: var(--um-warn); }
.um-uptime--low    { color: var(--um-danger); }
.um-uptime--none   { color: #d1d5db; font-weight: 400; }

/* SSL pill */
.um-ssl {
	display: inline-block; padding: 3px 8px; border-radius: 10px;
	font-size: 11px; font-weight: 600; min-width: 36px;
}
.um-ssl--na     { background: #f3f4f6; color: #9ca3af; }
.um-ssl--ok     { background: #d1fae5; color: #065f46; }
.um-ssl--warn   { background: #fef3c7; color: #78350f; }
.um-ssl--bad    { background: #fee2e2; color: #991b1b; }

/* Domain pill */
.um-dom {
	display: inline-block; padding: 3px 8px; border-radius: 10px;
	font-size: 11px; font-weight: 600;
}
.um-dom--ok     { background: #d1fae5; color: #065f46; }
.um-dom--warn   { background: #fef3c7; color: #78350f; }
.um-dom--bad    { background: #fee2e2; color: #991b1b; }
.um-dom--none   { background: #f3f4f6; color: #9ca3af; }

/* Last check */
.um-last-check { font-size: 11px; color: var(--um-muted); }
.um-last-check--never { color: #fbbf24; font-style: italic; }

/* ========================================================================== */
/*  ROW ACTIONS                                                               */
/* ========================================================================== */
.um-actions { display: inline-flex; gap: 4px; align-items: center; justify-content: flex-end; }
.um-act {
	background: #fff; border: 1px solid var(--um-border); border-radius: 4px;
	width: 30px; height: 30px; cursor: pointer; font-size: 14px; padding: 0;
	display: inline-flex; align-items: center; justify-content: center;
	transition: all .15s; color: var(--um-muted);
}
.um-act:hover {
	background: var(--um-primary); border-color: var(--um-primary); color: #fff;
	transform: translateY(-1px); box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.um-act--danger:hover { background: var(--um-danger); border-color: var(--um-danger); }
.um-act svg { width: 14px; height: 14px; fill: currentColor; }
.um-act-tiny {
	background: #fff; border: 1px solid var(--um-border); border-radius: 4px;
	padding: 3px 8px; font-size: 11px; cursor: pointer; margin-left: 6px;
	color: var(--um-accent); transition: all .15s;
}
.um-act-tiny:hover { background: var(--um-accent); color: #fff; border-color: var(--um-accent); }

/* Button loading state — just opacity + disabled, NO spinning animation.
   Text change ("Adding monitor..." / "Adding 100 monitors...") is sufficient feedback. */
.um-act.um-busy, .button.um-busy {
	pointer-events: none;
	opacity: .55;
	cursor: wait;
}

/* ========================================================================== */
/*  CHARTS — Option B: vertical split bars                                    */
/* ========================================================================== */
.um-bars {
	display: flex;
	gap: 2px;
	align-items: stretch; /* each bar fills full height */
	height: 40px; /* taller — gives room for micro-outage visibility */
	margin-top: 2px;
	width: 100%;
}
.um-bar {
	flex: 1;
	min-width: 3px;
	height: 100%;
	display: flex;
	flex-direction: column;
	border-radius: 1px;
	overflow: hidden;
	background: transparent;
	cursor: help;
}
/* The two stacked segments inside each bar (green top, red bottom) */
.um-bar__up   { background: #039669; }
.um-bar__down { background: #e11d48; }
/* No-data bars — full-height gray placeholder (matches data bars visually) */
.um-bar--nodata {
	background: #e5e7eb;
	height: 100%;
	display: block;
	border-radius: 1px;
}
.um-chart-summary { font-size: 10px; color: #454f63; margin-top: 2px; }

/* Sparkline — fills container width so it matches bars chart */
.um-spark { display: block; width: 100%; }
.um-spark svg { display: block; width: 100%; height: 22px; }
.um-spark--empty { width: 100%; height: 22px; background: var(--um-bg-soft); border-radius: 2px; }

/* ========================================================================== */
/*  EXPANDED ROW DETAILS                                                      */
/* ========================================================================== */
.um-table tr.um-details-row { background: #f0fdf4 !important; }
.um-table tr.um-details-row td {
	padding: 16px 20px; border-bottom: 2px solid var(--um-primary);
}
.um-details {
	background: #fff; border: 1px solid var(--um-border); border-radius: 6px; padding: 16px;
}
.um-details__grid {
	display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
}
.um-details__panel {
	background: var(--um-bg-soft); border-radius: 6px; padding: 12px;
}
.um-details__panel--full { grid-column: 1 / -1; }
.um-details__panel h4 {
	margin: 0 0 10px; font-size: 11px; text-transform: uppercase;
	color: var(--um-muted); letter-spacing: .5px; font-weight: 700;
}
.um-details__panel dl {
	margin: 0; display: grid; grid-template-columns: 130px 1fr; gap: 6px 12px; font-size: 13px;
}
.um-details__panel dt { color: var(--um-muted); font-weight: 600; }
.um-details__panel dd { margin: 0; word-break: break-word; }

.um-details-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.um-details-table th, .um-details-table td {
	padding: 6px 8px; text-align: left; border-bottom: 1px solid var(--um-border); vertical-align: top;
}
.um-details-table th {
	background: #fff; font-weight: 600; color: #495057;
	font-size: 11px; text-transform: uppercase;
}

.um-hb {
	background: #cfe2ff; padding: 8px 12px; border-radius: 4px;
	margin-bottom: 12px; font-size: 13px;
}
.um-hb code { background: #fff; padding: 2px 6px; border-radius: 3px; word-break: break-all; }

.um-loading-overlay {
	position: relative; min-height: 60px; opacity: .5;
}
.um-loading-overlay::after {
	content: ''; position: absolute; inset: 0;
	background: rgba(255,255,255,0.6) url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50"><circle cx="25" cy="25" r="20" fill="none" stroke="%23039669" stroke-width="3" stroke-dasharray="80" stroke-dashoffset="60"><animateTransform attributeName="transform" type="rotate" from="0 25 25" to="360 25 25" dur="0.8s" repeatCount="indefinite"/></circle></svg>') center center no-repeat;
	background-size: 32px 32px;
}

.um-debug-panel {
	background: #fef3c7; border: 1px solid #fbbf24; border-radius: 4px;
	padding: 10px; margin-top: 8px; font-size: 11px; font-family: ui-monospace, monospace;
}
.um-debug-panel strong { color: #92400e; }
.um-debug-panel ul { margin: 4px 0 0; padding-left: 20px; }

/* ========================================================================== */
/*  EMPTY STATE                                                               */
/* ========================================================================== */
.um-empty {
	padding: 60px 20px; text-align: center; color: var(--um-muted);
	font-size: 14px;
}
.um-empty-cell { color: #d1d5db; font-style: italic; }

/* ========================================================================== */
/*  MODALS                                                                    */
/* ========================================================================== */
.um-modal {
	position: fixed; inset: 0;
	background: rgba(0,0,0,.5); z-index: 1000;
	display: flex; align-items: flex-start; justify-content: center;
	padding: 20px; overflow-y: auto;
}
.um-modal[hidden] { display: none; }
.um-modal__inner {
	background: #fff; border-radius: 8px; max-width: 600px; width: 100%;
	margin: 30px 0; padding: 24px; position: relative;
	box-shadow: 0 20px 60px rgba(0,0,0,0.25);
}
.um-modal__inner--wide { max-width: 800px; }
.um-modal__close {
	position: absolute; top: 8px; right: 12px;
	background: none; border: none; font-size: 28px; cursor: pointer;
	color: var(--um-muted); line-height: 1; padding: 4px 8px;
}
.um-modal__close:hover { color: var(--um-text); }
.um-modal h2 { margin-top: 0; font-family: var(--secondary-font, "Syne"); font-weight: 700; }

/* Forms inside modals — inherit ecosystem input styling */
.um-form label { display: block; margin: 12px 0; font-weight: 600; font-size: 13px; }
.um-form fieldset {
	border: 1px solid var(--um-border); border-radius: 6px; padding: 14px; margin: 14px 0;
}
.um-form fieldset legend { font-weight: 700; padding: 0 6px; color: #495057; font-size: 13px; }
.um-form__advanced { margin-top: 14px; }
.um-form__advanced summary {
	cursor: pointer; padding: 6px 0; font-weight: 600; color: var(--um-accent);
}
.um-form__actions { display: flex; gap: 8px; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--um-border); }
.um-disabled-field input[disabled] { background: #f8f9fa; color: #adb5bd; cursor: not-allowed; }
.um-disabled-field small { display: block; margin-top: 4px; color: var(--um-muted); }
.um-disabled-field small a { color: var(--um-accent); text-decoration: none; }

/* ========================================================================== */
/*  TOASTS                                                                    */
/* ========================================================================== */
.um-toasts {
	position: fixed; bottom: 20px; right: 20px; z-index: 10000;
	display: flex; flex-direction: column; gap: 8px; pointer-events: none;
}
.um-toast {
	min-width: 280px; max-width: 420px; padding: 14px 18px;
	border-radius: 6px; font-size: 13px; line-height: 1.5; color: #fff; font-weight: 500;
	box-shadow: 0 8px 24px rgba(0,0,0,0.15);
	transform: translateX(140%); transition: transform .3s cubic-bezier(.2,.8,.2,1);
	pointer-events: auto;
}
.um-toast--visible { transform: translateX(0); }
.um-toast--ok   { background: linear-gradient(135deg, #10b981, #059669); }
.um-toast--err  { background: linear-gradient(135deg, #ef4444, #dc2626); }
.um-toast--info { background: linear-gradient(135deg, #3b82f6, #2563eb); }

/* ========================================================================== */
/*  EXPORT MENU                                                               */
/* ========================================================================== */
.um-export { position: relative; display: inline-block; }
.um-export__menu {
	display: none; position: absolute; top: 100%; right: 0; min-width: 200px;
	background: #fff; border: 1px solid var(--um-border); border-radius: 6px;
	box-shadow: 0 8px 16px rgba(0,0,0,0.1); z-index: 50; padding: 4px 0;
	margin-top: 4px;
}
/* Open on hover (desktop) OR on .open class (mobile/click) */
.um-export:hover .um-export__menu,
.um-export.open .um-export__menu { display: block; }
.um-export__menu a {
	display: block; padding: 10px 16px; text-decoration: none;
	color: var(--um-text); font-size: 13px;
}
.um-export__menu a:hover { background: var(--um-bg-soft); color: var(--um-primary); }
/* Mobile: anchor menu to right edge of viewport so it doesn't overflow */
@media (max-width: 600px) {
	.um-export__menu {
		right: auto;
		left: 0;
		min-width: 240px;
		max-width: calc(100vw - 24px);
	}
}

/* ========================================================================== */
/*  PAGINATION                                                                */
/* ========================================================================== */
/*  PAGINATION — numbered with Go to                                           */
/* ========================================================================== */
.um-pagination {
	display: flex; gap: 4px; align-items: center; padding: 16px 0;
	font-size: 13px; justify-content: center; flex-wrap: wrap;
}
.um-pag__btn {
	min-width: 32px; height: 32px; padding: 0 10px;
	background: #fff; border: 1px solid var(--um-border); border-radius: 5px;
	cursor: pointer; font-size: 13px; font-weight: 500;
	color: var(--um-text-2, #454f63); transition: all .15s;
	display: inline-flex; align-items: center; justify-content: center;
}
.um-pag__btn:hover { color: var(--um-primary); border-color: var(--um-primary); }
.um-pag__btn--current {
	background: var(--um-primary); color: #fff; border-color: var(--um-primary); font-weight: 600;
}
.um-pag__btn--current:hover { background: var(--um-primary); color: #fff; }
.um-pag__btn--disabled {
	color: #d1d5db; cursor: not-allowed; opacity: 0.5;
}
.um-pag__btn--disabled:hover {
	color: #d1d5db; border-color: var(--um-border);
}
.um-pag__dots { color: #9ca3af; padding: 0 4px; font-size: 13px; }
.um-pag__goto {
	margin-left: 12px; display: inline-flex; gap: 6px; align-items: center;
	font-size: 12px; color: var(--um-text-2, #454f63);
}
.um-pag__goto-input {
	width: 56px; height: 32px; padding: 4px 8px;
	border: 1px solid var(--um-border); border-radius: 4px;
	font-size: 12px; text-align: center; background: #f9fafb;
	-moz-appearance: textfield;
}
.um-pag__goto-input::-webkit-outer-spin-button,
.um-pag__goto-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.um-pag__total {
	margin-left: 14px; color: #9ca3af; font-size: 12px;
}

/* ========================================================================== */
/*  FILTER PILLS — show active tag/status/search filters                       */
/* ========================================================================== */
.um-filter-pills {
	display: flex; gap: 8px; flex-wrap: wrap;
	padding: 8px 0 4px;
}
.um-filter-pill {
	display: inline-flex; align-items: center; gap: 6px;
	padding: 4px 4px 4px 12px;
	border: 1px solid #dddfe0;
	background: #fff;
	color: var(--um-text-2, #454f63);
	border-radius: 14px;
	font: 500 12px "Open Sans";
	height: 28px;
}
.um-filter-pill__x {
	display: inline-flex; align-items: center; justify-content: center;
	width: 20px; height: 20px;
	border-radius: 50%;
	background: #f3f4f6;
	border: 0;
	cursor: pointer;
	font-size: 12px;
	color: #6b7280;
	transition: all 0.2s;
	line-height: 1;
	padding: 0;
}
.um-filter-pill__x:hover {
	background: #fee2e2; color: #e11d48;
}

/* ========================================================================== */
/*  TLD AUTO-TAG (blue chip, distinct from user tags)                          */
/* ========================================================================== */
.um-tag--tld {
	background: #e0f2fe !important;
	color: #2563eb !important;
	border-color: #bfdbfe !important;
}
.um-tag--tld:hover {
	background: #bfdbfe !important;
}

/* ========================================================================== */
/*  QUEUED STAT CARD (replaces Avg Uptime)                                     */
/* ========================================================================== */
.um-stat--queued .um-stat__num { color: #2563eb; }

/* ========================================================================== */
/*  SORT ICON — bulletproof override for ecosystem's `table th[class*=sort]`   */
/*  rule which renders an inline SVG that overlaps text on some columns.       */
/*  Target ANY th with "sort" in class (matches um-sortable, sort-up, sort-asc */
/*  etc.) and force absolute positioning + adequate padding.                   */
/* ========================================================================== */
/* Sortable headers: force LEFT alignment regardless of column's text-align setting.
   Without this, columns with text-align: center (like .um-col-domain, .um-col-ssl)
   center the text WITHIN the available space which includes the 28px padding-right
   reserved for the sort icon → text shifts right and overlaps the icon. */
.um-table th.um-sortable,
.um-table th[class*="sort"] {
	position: relative !important;
	padding-right: 28px !important;
	text-align: left !important;
	cursor: pointer;
}
/* Override ecosystem's inline SVG ::after — absolute-position it at the right edge */
.um-table th.um-sortable::after,
.um-table th[class*="sort"]::after {
	content: '' !important;
	display: inline-block;
	width: 10px !important;
	height: 8px !important;
	background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="10" height="8" viewBox="0 0 10 8"><path fill="%239ca3af" d="M5 8L0 0h10z"/></svg>') no-repeat 50% 50% !important;
	position: absolute !important;
	right: 8px !important;
	top: 50% !important;
	transform: translateY(-50%) !important;
	margin: 0 !important;
	opacity: 0;
	transition: opacity 0.15s;
	pointer-events: none;
}
/* Show icon on hover */
.um-table th.um-sortable:hover::after,
.um-table th[class*="sort"]:hover::after {
	opacity: 0.6 !important;
}
/* Show icon when column is the active sort, with full opacity and green color */
.um-table th.um-sort-asc::after,
.um-table th.um-sort-desc::after,
.um-table th[class*="sort-asc"]::after,
.um-table th[class*="sort-desc"]::after {
	opacity: 1 !important;
	background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="10" height="8" viewBox="0 0 10 8"><path fill="%23039669" d="M5 8L0 0h10z"/></svg>') !important;
}
/* Active-sort-asc: flip arrow upside down */
.um-table th.um-sort-asc::after,
.um-table th[class*="sort-asc"]::after {
	transform: translateY(-50%) rotate(180deg) !important;
}
/* Old override (kept for legacy element paths) — superseded by above */
.um-row-head th,
.um-row-head .um-th-sortable,
.um-row-head [class*="sort"] {
	position: relative;
}

/* ========================================================================== */
/*  FREE PREVIEW + MANUAL-ONLY BANNER                                          */
/* ========================================================================== */
.um-free-preview {
	padding: 32px; background: linear-gradient(135deg, #f0fdf4, #ecfdf5);
	border-radius: 12px; margin: 16px 0;
	border: 1px solid var(--um-primary);
}
.um-free-preview h2 {
	margin-top: 0; font-family: var(--secondary-font, "Syne"); color: var(--um-primary); font-size: 24px;
}
.um-features-list {
	list-style: none; padding: 0; columns: 2; column-gap: 30px;
	font-size: 14px; margin-top: 24px;
}
.um-features-list li { margin: 8px 0; break-inside: avoid; padding-left: 4px; }

.um-manual-only-banner {
	display: flex; align-items: center; gap: 12px;
	padding: 12px 18px; background: #dbeafe;
	border: 1px solid var(--um-accent); border-radius: 8px;
	margin: 12px 0; font-size: 13px;
}
.um-manual-only-banner b { color: #1e40af; }

/* ========================================================================== */
/*  TOOLTIPS                                                                  */
/* ========================================================================== */
/* The .tooltip element is now used as DATA SOURCE — its text is read by
   setupTooltipPortal() which renders a fixed-positioned body-level tooltip
   that escapes any parent overflow:hidden. The original element stays in DOM
   (so we can read text) but is permanently hidden via display:none. */
.has-tooltip { position: relative; }
.has-tooltip > .tooltip {
	display: none !important;
}

/* ========================================================================== */
/*  RESPONSIVE                                                                */
/* ========================================================================== */
@media (max-width: 1100px) {
	.um-col-uptime .um-bars,
	.um-col-uptime .um-spark,
	.um-col-uptime .um-chart-summary { display: none; }
	.um-col-last { display: none; }
}

@media (max-width: 900px) {
	.um-table { font-size: 12px; display: block; overflow-x: auto; }
	.um-col-http, .um-col-ssl, .um-col-domain { display: none; }
}

@media (max-width: 600px) {
	.um-toolbar__right .button { flex: 1; min-width: 0; font-size: 12px; padding: 6px 10px; }
	.um-toolbar__right { width: 100%; }
	.um-summary { grid-template-columns: repeat(3, 1fr); }
	.um-modal__inner { padding: 18px; }
	.um-toasts { left: 12px; right: 12px; bottom: 12px; }
	.um-toast { max-width: none; min-width: 0; }
	.um-features-list { columns: 1; }
	.um-table { font-size: 11px; }
	.um-table tbody td { padding: 8px 6px; }
	.um-col-rt { display: none; }
	.um-status { padding: 3px 7px; font-size: 10px; }
	.um-status__dot { width: 6px; height: 6px; }
}

/* ============================================================================
   v3.8 ADDITIONS — checkbox column, numbering, bulk bar, sort indicators,
   dual chart layout, tooltip z-index fix.
   ============================================================================ */

/* New columns: # and checkbox.
   Checkboxes intentionally have NO custom styling — ecosystem CSS owns the
   look + animation. We only set column width here.

   IMPORTANT: ecosystem 'table td { padding: 8px 8px }' would make these cells
   wider than intended (32 + 16 = 48px). Force tight padding + center alignment
   so checkbox and # number sit consistently in narrow columns. */
.um-col-cb,
.um-col-num {
	width: 32px !important;
	min-width: 32px !important;
	max-width: 32px;
	text-align: center !important;
	padding-left: 2px !important;
	padding-right: 2px !important;
	vertical-align: middle !important;
}
/* Force inner content (checkbox + number) to center horizontally + vertically */
.um-col-cb > *,
.um-col-num > * {
	vertical-align: middle;
}
/* Header cells use same rules */
.um-table thead .um-col-cb,
.um-table thead .um-col-num {
	width: 32px !important;
	min-width: 32px !important;
	padding-left: 2px !important;
	padding-right: 2px !important;
	text-align: center !important;
}
.um-col-num {
	font-size: 12px;
	color: #000213;
	font-variant-numeric: tabular-nums;
	font-weight: 500;
}
/* When row is checkbox-selected — subtle highlight (no checkbox style change) */
.um-table tbody tr.um-row--selected td {
	background: #ecfdf5 !important;
	box-shadow: inset 3px 0 0 #039669;
}

/* Table — horizontal scroll lives on .um-table-scroll wrapper (created by JS).
   #um-list itself has NO overflow so tooltips can escape vertically. */
.um-table {
	min-width: 1100px; /* enough for all columns; .um-table-scroll wraps with horiz scroll */
}

/* Sortable headers */
.um-sortable {
	cursor: pointer;
	user-select: none;
	position: relative;
	transition: background 0.15s;
	padding-right: 18px;
}
.um-sortable:hover {
	background: rgba(16, 185, 129, 0.06);
}
.um-sortable::after {
	content: '⇅';
	position: absolute;
	right: 6px;
	top: 50%;
	transform: translateY(-50%);
	font-size: 10px;
	color: #cbd5e1;
	opacity: 0;
	transition: opacity 0.15s;
	pointer-events: none;
}
.um-sortable:hover::after {
	opacity: 0.6;
}
/* Active-sort: subtle bold + tint, NO colored arrow.
   Arrow stays hidden by default, shows on hover same as inactive columns. */
.um-sortable.um-sort-asc,
.um-sortable.um-sort-desc {
	font-weight: 600;
	color: #039669;
}

/* Floating bulk action bar */
.um-bulk-bar {
	position: fixed;
	bottom: 24px;
	left: 50%;
	transform: translateX(-50%);
	background: #1f2937;
	color: #fff;
	padding: 12px 18px;
	border-radius: 10px;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
	display: flex;
	gap: 14px;
	align-items: center;
	z-index: 9999;
	font-size: 14px;
	min-width: 320px;
	animation: umBulkBarIn 0.18s ease-out;
}
@keyframes umBulkBarIn {
	from { opacity: 0; transform: translate(-50%, 10px); }
	to   { opacity: 1; transform: translate(-50%, 0); }
}
.um-bulk-bar__label {
	font-weight: 600;
	white-space: nowrap;
}
.um-bulk-bar__select {
	background: #374151;
	color: #fff;
	border: 1px solid #4b5563;
	padding: 8px 12px;
	border-radius: 6px;
	cursor: pointer;
	font-size: 13px;
	flex: 1;
	min-width: 180px;
}
.um-bulk-bar__select option {
	background: #1f2937;
	color: #fff;
}
.um-bulk-bar__clear {
	background: transparent;
	color: #9ca3af;
	border: 0;
	font-size: 18px;
	cursor: pointer;
	padding: 4px 8px;
	line-height: 1;
}
.um-bulk-bar__clear:hover {
	color: #fff;
}

/* Dual chart layout — when both bars + sparkline are enabled, stack them */
.um-chart-wrap {
	display: block;
	margin-top: 4px;
	line-height: 0;
}
.um-chart-wrap--bars + .um-chart-wrap--sparkline {
	margin-top: 6px;
}

/* Tooltip z-index fix — make sure tooltips show OVER table headers AND
   the first row (which previously had its tooltips clipped by the table container) */
.um-table thead th .tooltip,
.has-tooltip .tooltip {
	z-index: 1000;
}
.um-table thead {
	position: relative;
	z-index: 1;
}
.um-table tbody .has-tooltip .tooltip,
.um-actions .tooltip {
	z-index: 9999; /* above table, above bulk bar's siblings */
}
/* First row tooltips — even higher specificity to clear scrollable container */
.um-table tbody tr:first-child .has-tooltip .tooltip {
	z-index: 99999;
}

/* Dual chart layout — bars and sparkline both fill same width */
.um-chart-wrap {
	display: block;
	margin-top: 4px;
	line-height: 0;
	width: 100%;
}
.um-chart-wrap--bars + .um-chart-wrap--sparkline {
	margin-top: 6px;
}
/* Bars wrap — bars already have explicit height (40px) from main rule.
   No additional rules needed; older rules removed to avoid specificity clash. */
/* Sparkline SVG fills container */
.um-chart-wrap--sparkline .um-spark,
.um-chart-wrap--sparkline .um-spark svg {
	width: 100%;
	display: block;
}
.um-chart-wrap--sparkline .um-spark--empty {
	width: 100%;
	height: 24px;
}

/* Add monitor: Advanced toggle inside form */
.um-form-advanced-toggle {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: none;
	border: 0;
	color: var(--um-accent, #2563eb);
	cursor: pointer;
	font-size: 14px;
	font-weight: 600;
	padding: 8px 0;
	margin: 8px 0;
}
.um-form-advanced-toggle:hover {
	text-decoration: underline;
}
.um-form-advanced[hidden] {
	display: none;
}

/* Form labels above inputs (consistent with screenshot request) */
.um-modal .form-field,
.um-modal .um-form-field {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin-bottom: 14px;
}
.um-modal .form-field > label,
.um-modal .um-form-field > label {
	display: block;
	font-weight: 600;
	font-size: 13px;
}
.um-modal .form-field > input,
.um-modal .form-field > textarea,
.um-modal .form-field > select,
.um-modal .um-form-field > input,
.um-modal .um-form-field > textarea,
.um-modal .um-form-field > select {
	width: 100%;
	box-sizing: border-box;
}

/* Bulk add: info-box styling */
.um-info-box {
	background: #f0f9ff;
	border-left: 3px solid #0284c7;
	padding: 12px 14px;
	border-radius: 6px;
	font-size: 13px;
	color: #0c4a6e;
	margin-bottom: 14px;
}
.um-info-box strong {
	color: #075985;
}
.um-info-box pre {
	background: #fff;
	padding: 8px 10px;
	border-radius: 4px;
	margin: 8px 0;
	overflow-x: auto;
	font-size: 12px;
	color: #334155;
	border: 1px solid #e0f2fe;
}
.um-info-box .um-keys-list {
	display: inline;
	margin: 0;
	padding: 0;
}
.um-info-box .um-keys-list code {
	background: #fff;
	padding: 1px 6px;
	border-radius: 3px;
	margin: 0 2px;
	font-size: 12px;
	color: #075985;
}

/* Notifications form: select alignment + label/checkbox layout uses system styling */
#um-modal-settings .um-form fieldset {
	margin: 0 0 14px;
	padding: 12px 14px;
	border: 1px solid #e5e7eb;
	border-radius: 8px;
}
#um-modal-settings .um-form fieldset legend {
	font-weight: 600;
	padding: 0 6px;
}
#um-modal-settings .um-form fieldset label {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 8px 0;
	flex-wrap: wrap;
}
/* Inputs/selects in fieldsets fill available width but stay aligned */
#um-modal-settings .um-form fieldset input[type="text"],
#um-modal-settings .um-form fieldset input[type="email"],
#um-modal-settings .um-form fieldset input[type="url"],
#um-modal-settings .um-form fieldset input[type="tel"],
#um-modal-settings .um-form fieldset input[type="number"],
#um-modal-settings .um-form fieldset select {
	flex: 1;
	min-width: 200px;
	box-sizing: border-box;
}
/* Checkbox is fixed-size, doesn't grow */
#um-modal-settings .um-form fieldset input[type="checkbox"],
#um-modal-settings .um-form fieldset input[type="radio"] {
	flex: 0 0 auto;
	margin: 0;
}

/* Guest panel for non-logged-in users */
.um-guest-panel {
	background: linear-gradient(135deg, #ecfdf5 0%, #f0fdf4 100%);
	border: 1px solid #d1fae5;
	border-radius: 12px;
	padding: 32px;
	margin: 20px 0;
	text-align: center;
}
.um-guest-panel h2 {
	color: #065f46;
	margin: 0 0 12px;
	font-size: 22px;
}
.um-guest-panel p {
	color: #047857;
	max-width: 640px;
	margin: 0 auto 20px;
	line-height: 1.5;
}
.um-guest-panel .button.primary {
	font-size: 15px;
	padding: 12px 28px;
}

/* Inactive subscription warning banner */
.um-plan-inactive-warning {
	background: #fef3c7;
	border-left: 3px solid #f59e0b;
	padding: 12px 16px;
	margin: 12px 0;
	border-radius: 6px;
	font-size: 13px;
	color: #78350f;
}

/* Landing pages — typography only, no forced width (ecosystem layout decides) */
.um-landing__lead {
	font-size: 17px;
	color: #495057;
	margin-bottom: 16px;
}
.um-landing__hero {
	margin: 28px 0;
	padding: 0;
	text-align: center;
}
.um-landing__hero img {
	display: block;
	width: 100%;
	max-width: 800px;
	height: auto;
	margin: 0 auto;
	border-radius: 14px;
	box-shadow: 0 6px 24px rgba(62, 111, 232, 0.10);
}
.um-landing__article {
	line-height: 1.65;
	font-size: 16px;
}
.um-landing__article h2 {
	margin-top: 28px;
	margin-bottom: 12px;
}
.um-landing__article h3 {
	margin-top: 22px;
	margin-bottom: 10px;
}
.um-landing__article p,
.um-landing__article ul,
.um-landing__article ol {
	margin-bottom: 14px;
}
.um-landing__cta-bottom {
	margin-top: 32px;
	padding-top: 24px;
	border-top: 1px solid #dee2e6;
}

/* Bulk add live preview */
.um-bulk-preview {
	margin-top: 6px;
	font-size: 12px;
	color: #454f63;
	min-height: 18px;
}
.um-bulk-preview__count { font-weight: 600; color: #039669; }
.um-bulk-preview__muted { color: #8a8989; }
.um-bulk-preview__warnings {
	margin-top: 4px;
	color: #d97706;
	font-weight: 600;
}
.um-bulk-preview__warning {
	margin-left: 14px;
	font-weight: 400;
	color: #92400e;
}

/* ========================================================================== */
/*  MOBILE CARD LAYOUT (< 768px)                                              */
/*  Replaces the desktop table with vertical cards. Each card shows:           */
/*    head row: cb + # + status + actions                                      */
/*    URL row: favicon + URL ellipsized                                        */
/*    tags row                                                                 */
/*    charts: 30-day bars + 50-check sparkline (full width)                    */
/*    metrics grid: HTTP / TTFB / SSL / Domain                                 */
/* ========================================================================== */
@media (max-width: 768px) {
	/* Hide desktop table */
	.um-list table { display: none; }

	/* Stats grid on mobile: show ALL 7 cards in a horizontal scrollable row.
	   White background, scroll-snap for nice UX, no grey separator gaps.
	   IMPORTANT: reset desktop border/border-radius — they clip against the
	   row border-top/bottom creating an L-shape at corners. Active/hover use
	   box-shadow inset instead of border. */
	#um-summary {
		display: flex !important;
		flex-wrap: nowrap !important;
		overflow-x: auto;
		overflow-y: hidden;
		background: #fff;
		margin: 0;
		gap: 0;
		padding: 0;
		border-top: 1px solid var(--um-border);
		border-bottom: 1px solid var(--um-border);
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: thin;
	}
	#um-summary::-webkit-scrollbar { height: 0; }
	.um-stat {
		flex: 0 0 auto !important;
		min-width: 92px !important;
		padding: 10px 14px !important;
		text-align: center !important;
		/* RESET desktop styles that clip at row borders */
		background: #fff !important;
		border: 0 !important;
		border-right: 1px solid var(--um-border) !important;
		border-radius: 0 !important;
		box-shadow: none !important;
		transform: none !important;
		transition: background .12s;
		scroll-snap-align: start;
		cursor: pointer;
	}
	/* First item: add border-left so leftmost edge has a visible separator */
	.um-stat:first-child {
		border-left: 1px solid var(--um-border) !important;
	}
	/* Last item: KEEP border-right (was being removed — invisible after scroll-right) */
	.um-stat:hover {
		background: #f9fafb !important;
		transform: none !important;
	}
	.um-stat--active {
		background: #f0fdf4 !important;
		box-shadow: inset 0 -3px 0 var(--um-primary) !important;
	}
	.um-stat__num { font-size: 18px !important; font-weight: 700; line-height: 1.2; }
	.um-stat__label { font-size: 10px !important; letter-spacing: 0.3px; margin-top: 3px; }
	/* All 7 visible — no display:none on secondary stats */

	/* Controls — compact */
	.um-controls {
		flex-wrap: wrap;
		gap: 6px;
		padding: 8px 0;
	}
	.um-controls input,
	.um-controls select {
		font-size: 16px !important;  /* iOS no-zoom fix */
		padding: 10px 12px !important;
		/* Remove desktop's fixed height: 36px — too tight with 16px mobile font.
		   Descenders (y, g, p) get clipped at the bottom edge. Let select grow
		   to fit content, with min-height matching iOS touch-target standard. */
		height: auto !important;
		min-height: 44px !important;
		line-height: 1.4 !important;
	}
	/* Select arrow needs more room on the right with larger touch target */
	.um-controls select {
		padding-right: 36px !important;
		background-position: calc(100% - 8px) 50% !important;
	}

	/* Toolbar — bottom sheet style */
	.um-toolbar-mobile {
		display: flex !important;
		gap: 8px;
		position: sticky;
		bottom: 0;
		background: #fff;
		padding: 10px 12px;
		border-top: 1px solid var(--um-border);
		box-shadow: 0 -2px 8px rgba(0,0,0,.04);
		z-index: 10;
	}
	.um-toolbar-mobile__primary {
		flex: 1; padding: 12px;
		font-size: 14px !important;
		border-radius: 10px !important;
	}
	.um-toolbar-mobile__more {
		width: 44px; height: 44px;
		border: 1.5px solid var(--um-border);
		background: #fff;
		border-radius: 10px;
		display: flex; align-items: center; justify-content: center;
		font-size: 18px;
		cursor: pointer;
		color: var(--um-text);
	}
	.um-toolbar-mobile__more:hover { color: var(--um-primary); border-color: var(--um-primary); }

	/* Hide desktop toolbar fully on mobile — bottom sheet replaces it.
	   Previous rule used .um-controls > #id, but the buttons are actually in
	   .um-toolbar, not .um-controls. Use IDs directly to catch wherever they are. */
	.um-toolbar,
	#um-add-monitor,
	#um-add-bulk,
	#um-check-all,
	#um-settings,
	.um-export {
		display: none !important;
	}

	/* Bottom sheet panel (more menu) */
	.um-bottom-sheet {
		position: fixed;
		left: 0; right: 0; bottom: 0;
		background: #fff;
		border-radius: 16px 16px 0 0;
		box-shadow: 0 -4px 20px rgba(0,0,0,.15);
		z-index: 1001;
		transform: translateY(100%);
		transition: transform 0.25s ease-out;
		padding: 20px 16px 24px;
	}
	.um-bottom-sheet.is-open { transform: translateY(0); }
	.um-bottom-sheet__handle {
		width: 40px; height: 4px;
		background: #e5e7eb;
		border-radius: 2px;
		margin: 0 auto 16px;
	}
	.um-bottom-sheet__title {
		font-size: 16px; font-weight: 600; text-align: center;
		margin-bottom: 16px;
	}
	.um-bottom-sheet__list { display: flex; flex-direction: column; gap: 8px; }
	.um-bottom-sheet__item {
		width: 100%; padding: 14px 16px;
		background: #fff; border: 1px solid var(--um-border);
		border-radius: 8px;
		font-size: 15px; font-weight: 500; color: var(--um-text);
		text-align: left;
		cursor: pointer;
	}
	.um-bottom-sheet__item:hover { background: #f9fafb; }
	.um-bottom-sheet__item--cancel {
		background: #f3f4f6;
		text-align: center;
		font-weight: 600;
		color: #6b7280;
	}
	.um-bottom-sheet__backdrop {
		position: fixed; inset: 0;
		background: rgba(0,0,0,0.4);
		z-index: 1000;
		opacity: 0;
		pointer-events: none;
		transition: opacity 0.25s;
	}
	.um-bottom-sheet__backdrop.is-open {
		opacity: 1;
		pointer-events: auto;
	}

	/* Cards container — WHITE background, no padding */
	#um-list { padding: 0 !important; }
	.um-mobile-cards { display: block; padding: 0; background: #fff; }
	/* CRITICAL: .um-list-wrap parent has border: 1px + border-radius: 8px for desktop
	   (where it wraps the table cleanly). On mobile, cards have margin-bottom (gap)
	   between them — the wrap's LEFT and RIGHT vertical borders showed through these
	   gaps, looking like a continuous vertical line down the page. Cards self-contain
	   their own borders + box-shadow status stripe, so the wrap border is redundant
	   on mobile and causes the gap-line artifact. Remove it. */
	.um-list-wrap {
		border: 0;
		border-radius: 0;
		background: transparent;
	}
	.um-mcard {
		background: #fff;
		/* Each card is its own visual BOX. Side accent stripe uses box-shadow INSET
		   (not border-left) so the colored line is rendered strictly INSIDE the
		   card's box-radius-clipped area. With border-left, even with overflow:hidden
		   and border-radius, in some browsers the colored stripe appeared to extend
		   into the margin-bottom gap between adjacent cards. inset shadow is
		   guaranteed to stay inside. */
		border-radius: 6px;
		margin-bottom: 6px;
		border: 1px solid var(--um-border);
		overflow: hidden;
		box-sizing: border-box;
	}
	.um-mcard:last-child { margin-bottom: 0; }
	/* Status accent — inset box-shadow renders inside the card's clipped box.
	   Cannot extend outside. Cannot create visual continuity with adjacent cards. */
	.um-mcard--up       { box-shadow: inset 3px 0 0 #039669; }
	.um-mcard--down     { box-shadow: inset 3px 0 0 #e11d48; }
	.um-mcard--redirect { box-shadow: inset 3px 0 0 #f97316; }
	.um-mcard--paused   { box-shadow: inset 3px 0 0 #d1d5db; }
	.um-mcard--checking { box-shadow: inset 3px 0 0 #2563eb; }
	.um-mcard--selected { background: #ecfdf5; }

	.um-mcard__head {
		display: flex; align-items: center;
		padding: 10px 12px 6px;
		gap: 8px;
	}
	.um-mcard__cb input { width: 18px; height: 18px; margin: 0; }
	.um-mcard__num {
		font-size: 11px; color: #6b7280; font-weight: 600;
	}
	.um-mcard__actions {
		margin-left: auto;
		display: flex; gap: 2px;
	}
	.um-mcard__act {
		width: 32px; height: 32px;
		border: 0; background: transparent;
		border-radius: 6px;
		font-size: 16px; color: #6b7280;
		display: inline-flex; align-items: center; justify-content: center;
		cursor: pointer;
	}
	.um-mcard__act:hover { background: #f3f4f6; color: var(--um-text); }

	.um-mcard__url-row {
		padding: 0 12px;
		display: flex; align-items: center; gap: 6px;
	}
	.um-mcard__url-text {
		font-size: 14px;
		color: var(--um-text);
		font-weight: 500;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		flex: 1;
		text-decoration: none;
	}

	.um-mcard__tags {
		padding: 4px 12px 8px;
		display: flex; gap: 4px; flex-wrap: wrap;
	}
	.um-mcard__tags .um-tag {
		font-size: 11px;
		padding: 2px 8px;
	}

	/* Charts in card — both 30-day bars + 50-check sparkline visible */
	.um-mcard__charts {
		padding: 0 12px 8px;
		display: flex; flex-direction: column; gap: 3px;
	}
	.um-mcard__charts svg {
		max-width: 100%;
		width: 100%;
		height: auto;
		display: block;
	}
	.um-mcard__summary {
		font-size: 11px;
		color: #6b7280;
		padding: 0 12px 8px;
	}
	.um-mcard__summary strong { color: var(--um-text); }

	.um-mcard__metrics {
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		gap: 1px;
		background: var(--um-border);
		border-top: 1px solid var(--um-border);
	}
	.um-mcard__metric {
		background: #fafafa;
		padding: 7px 4px;
		text-align: center;
		font-size: 9.5px;
		color: #6b7280;
		text-transform: uppercase;
		letter-spacing: 0.3px;
	}
	.um-mcard__metric-val {
		display: block;
		font-size: 13px;
		font-weight: 600;
		color: var(--um-text);
		font-variant-numeric: tabular-nums;
		margin-bottom: 1px;
	}
	.um-mcard__metric-val--warn { color: #f97316; }
	.um-mcard__metric-val--bad  { color: #e11d48; }
	.um-mcard__metric-val--faint { color: #9ca3af; }

	/* Expansion panel — sections as boxes, single column, optimized for narrow screens.
	   Replaces desktop's 2-column <dl> layout. Rendered by renderDetailsMobile().  */
	.um-mcard__details {
		background: #fafafa;
		border-top: 1px dashed var(--um-border);
		padding: 14px 12px;
		font-size: 13px;
	}

	/* Section box */
	.um-dsec {
		background: #fff;
		border: 1px solid var(--um-border);
		border-radius: 8px;
		padding: 12px 14px;
		margin-bottom: 10px;
	}
	.um-dsec:last-child { margin-bottom: 0; }
	.um-dsec__title {
		font: 600 11px sans-serif;
		color: #454f63;
		text-transform: uppercase;
		letter-spacing: 0.5px;
		margin: 0 0 10px;
	}

	/* Key-value pair — label on top, value below (full width) */
	.um-mkv {
		display: flex;
		flex-direction: column;
		gap: 1px;
		padding: 7px 0;
		border-bottom: 1px solid #f3f4f6;
	}
	.um-mkv:last-child { border-bottom: 0; padding-bottom: 0; }
	.um-mkv__label {
		font-size: 11px;
		color: #6b7280;
		font-weight: 500;
	}
	.um-mkv__value {
		font-size: 14px;
		color: var(--um-text);
		word-break: break-word;
	}
	.um-mkv__value--mono {
		font-family: ui-monospace, "SF Mono", monospace;
		font-size: 12px;
	}
	.um-mkv__value--ok    { color: #039669; font-weight: 500; }
	.um-mkv__value--warn  { color: #f97316; font-weight: 500; }
	.um-mkv__value--bad   { color: #e11d48; font-weight: 500; }
	.um-mkv__value--faint { color: #9ca3af; }
	.um-mkv__hint { font-size: 11px; color: #6b7280; font-style: italic; margin-left: 4px; }

	/* DNS records — type tag + value */
	.um-dns-rec {
		display: flex;
		align-items: flex-start;
		gap: 8px;
		padding: 6px 0;
		border-bottom: 1px solid #f3f4f6;
		font-size: 13px;
	}
	.um-dns-rec:last-child { border-bottom: 0; }
	.um-dns-rec__type {
		background: #e0f2fe;
		color: #2563eb;
		font: 700 10px sans-serif;
		padding: 2px 6px;
		border-radius: 3px;
		min-width: 42px;
		text-align: center;
		flex-shrink: 0;
	}
	.um-dns-rec__val {
		flex: 1;
		font-family: ui-monospace, monospace;
		font-size: 12px;
		color: #454f63;
		word-break: break-all;
	}

	/* Incident list */
	.um-inc {
		padding: 8px 0;
		border-bottom: 1px solid #f3f4f6;
		font-size: 13px;
	}
	.um-inc:last-child { border-bottom: 0; }
	.um-inc__when { font-size: 11px; color: #6b7280; margin-bottom: 2px; }
	.um-inc__what { color: var(--um-text); }
	.um-inc__what--ongoing { color: #e11d48; font-weight: 500; }
	.um-inc__dur { font-size: 11px; color: #9ca3af; margin-left: 6px; }

	/* Button row inside section */
	.um-dsec__btn-row {
		display: flex;
		gap: 8px;
		flex-wrap: wrap;
		margin-top: 10px;
	}
	.um-dsec__notice {
		background: #fef3c7;
		color: #92400e;
		padding: 8px 10px;
		border-radius: 6px;
		font-size: 12px;
		margin: 8px 0;
		border-left: 3px solid #f59e0b;
	}
	.um-dsec__hint {
		font-size: 10px;
		color: #9ca3af;
		margin-top: 6px;
		font-style: italic;
	}

	/* Expanded details panel in mobile */
	.um-mcard__details {
		padding: 12px;
		background: #fafafa;
		border-top: 1px solid var(--um-border);
	}
	.um-mcard__details[hidden] { display: none; }

	/* Mobile pagination — more compact */
	.um-pag__btn { min-width: 28px; height: 28px; padding: 0 8px; }
	.um-pag__goto { font-size: 11px; }
	.um-pag__total { display: none; }
}

/* Hide mobile toolbar on desktop */
@media (min-width: 769px) {
	.um-toolbar-mobile,
	.um-bottom-sheet,
	.um-bottom-sheet__backdrop,
	.um-mobile-cards { display: none !important; }
}

/* iOS zoom fix — all inputs/textareas/selects ≥ 16px font-size */
@media (max-width: 768px) {
	input, textarea, select { font-size: 16px; }
}

/* ========================================================================== */
/*  SEO CONTENT BLOCK — sections below the tool                                */
/*  Bare <h2>, <h3>, <p>, <ul>, <table>, <ol> live inside ecosystem's          */
/*  .tool-description wrapper and inherit its styles. Don't add overrides for  */
/*  typography or colors here — let ecosystem own the look.                   */
/*  Only structural styles for grids/tables (universal "desc-" prefix).        */
/* ========================================================================== */

/* Use-case cards: responsive grid of equal-height cards */
.desc-cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 16px;
	margin: 12px 0 24px;
}
.desc-card {
	background: #fff;
	border: 1px solid var(--um-border);
	border-radius: 10px;
	padding: 18px;
}
.desc-card h3 {
	margin: 0 0 8px;
	font-size: 16px;
}
.desc-card p {
	font-size: 14px;
	margin: 0;
	line-height: 1.6;
}

/* CRITICAL: <code> inside .tool-description MUST render inline. Ecosystem CSS
   somewhere has `code { display: block }` or `white-space: pre`, causing
   inline <code> tokens like <code>keyword:</code> to break onto their own lines
   (visible as: "Each line can include\nkeyword:\n,\ninterval:\n,\n..."). Force
   inline + nowrap so each token stays glued together inside the surrounding text.
   !important needed: ecosystem's `code` (element selector) loads later than ours.
   Landing pages render content in .um-landing__article (not .tool-description),
   so we cover that too. */
.tool-description code,
.um-landing__article code,
.desc-card code,
.faq code {
	display: inline !important;
	white-space: nowrap !important;
	padding: 1px 6px;
	background: #f3f4f6;
	border-radius: 3px;
	font-size: 0.92em;
	color: #1f2937;
	border: 1px solid #e5e7eb;
}

/* Comparison table horizontal-scroll wrapper for narrow viewports.
   Bare <table> inside .tool-description inherits ecosystem table styles. */
.desc-table-wrap {
	overflow-x: auto;
	margin: 12px 0 24px;
}
.desc-table-wrap table {
	min-width: 600px;
}

/* Deep-dive guide links — small inline list at the very bottom of SEO area. */
.desc-links {
	background: #f9fafb;
	padding: 14px 16px;
	border-radius: 8px;
	border: 1px solid var(--um-border);
	font-size: 14px;
	line-height: 1.9;
	margin-top: 32px;
}

/* FAQ section — ecosystem pattern: <ul class="faq"> + <li class="faq-item"> with
   hidden checkbox in <label>. Grid-template-rows transition + :has() open state.
   This CSS will be added globally by ecosystem in the future; we ship it scoped
   to .faq for now so both main tool page and landing pages render correctly.
   NOTE: kept minimal — matches user-provided ecosystem snippet exactly.

   SPECIFICITY: when inside .tool-description, ecosystem's '.tool-description ul'
   selector (specificity 0,1,1) overrides our '.faq' (0,1,0) padding reset.
   Use '.tool-description .faq' (0,2,0) and 'ul.faq' (0,1,1, later) to beat it. */
.tool-description .faq,
ul.faq {
	padding-left: 0;
	margin-left: 0;
}
.faq {
	list-style: none;
	padding: 0;
	margin: 0;
}
.faq .faq-item {
	display: grid;
	grid-template-rows: min-content 0fr;
	border: 1px solid var(--um-border);
	transition: grid-template-rows 0.3s;
	margin-bottom: 1.5em;
}
.faq .faq-item:last-child { margin-bottom: 0; }
.faq .faq-item label {
	cursor: pointer;
	padding: 10px 40px 10px 20px;
	font-weight: 600;
	position: relative;
	transition: color 0.3s;
}
.faq .faq-item label:after {
	display: inline-block;
	position: absolute;
	right: 0;
	top: 50%;
	width: 40px;
	height: 40px;
	background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="%23039669" d="M16.293 9.293 12 13.586 7.707 9.293l-1.414 1.414L12 16.414l5.707-5.707z"/></svg>') no-repeat 50% 50%;
	content: "";
	transition: transform .3s;
	transform: translateY(-50%);
}
.faq .faq-item label:hover { color: #039669; }
.faq .faq-item input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}
.faq .faq-item:has(input:checked) {
	grid-template-rows: min-content 1fr;
}
.faq .faq-item:has(input:checked) label {
	border-bottom: 1px solid var(--um-border);
}
.faq .faq-item:has(input:checked) label:after {
	transform: translateY(-50%) rotate(180deg);
	transform-origin: 50% 50%;
}
.faq .faq-item .faq-item-content {
	overflow: hidden;
	padding-inline: 20px;
}

/* FAQ section — uses ecosystem's native .faq pattern.
   Ecosystem CSS handles .faq, .faq-item, label, checkbox, .faq-item-content,
   grid-template-rows transition, chevron rotation. We don't override here. */