/* ========================================================================
   Pool Maintenance App - Premium mobile-app frontend styles (v1.1)
   ======================================================================== */

.pma-app {
	--pma-primary: #0ea5e9;
	--pma-primary-dark: #0284c7;
	--pma-primary-light: #38bdf8;
	--pma-accent: #06b6d4;
	--pma-good: #10b981;
	--pma-warning: #f59e0b;
	--pma-critical: #ef4444;
	--pma-bg: #f0f9ff;
	--pma-bg-deep: #e0f2fe;
	--pma-surface: #ffffff;
	--pma-surface-2: #f8fafc;
	--pma-text: #0f172a;
	--pma-text-muted: #64748b;
	--pma-border: #e2e8f0;
	--pma-shadow-sm: 0 1px 2px rgba(15, 23, 42, .04), 0 1px 3px rgba(15, 23, 42, .06);
	--pma-shadow-md: 0 4px 6px rgba(15, 23, 42, .04), 0 10px 20px rgba(15, 23, 42, .06);
	--pma-shadow-lg: 0 10px 30px rgba(2, 132, 199, .18), 0 4px 10px rgba(15, 23, 42, .06);
	--pma-shadow-xl: 0 20px 50px rgba(2, 132, 199, .22), 0 8px 18px rgba(15, 23, 42, .07);
	--pma-radius: 18px;
	--pma-radius-sm: 12px;
	--pma-gradient: linear-gradient(135deg, #0ea5e9 0%, #06b6d4 60%, #14b8a6 100%);
	--pma-gradient-deep: linear-gradient(135deg, #0284c7 0%, #0891b2 60%, #0d9488 100%);
	--pma-gradient-soft: linear-gradient(135deg, #e0f2fe 0%, #f0fdfa 100%);

	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "SF Pro Display", "Inter", Roboto, Helvetica, Arial, sans-serif;
	color: var(--pma-text);
	background: var(--pma-bg);
	max-width: 1300px;
	margin: 0 auto;
	padding: 0 0 130px;
	line-height: 1.55;
	min-height: 90vh;
	-webkit-font-smoothing: antialiased;
	-webkit-tap-highlight-color: transparent;
}
.pma-app *, .pma-app *::before, .pma-app *::after { box-sizing: border-box; }
.pma-app h1, .pma-app h2, .pma-app h3, .pma-app h4 { color: var(--pma-text); margin: 0 0 8px; letter-spacing: -0.015em; line-height: 1.25; }
.pma-app h1 { font-size: 28px; font-weight: 800; }
.pma-app h2 { font-size: 21px; font-weight: 700; }
.pma-app h3 { font-size: 17px; font-weight: 700; }
.pma-app h4 { font-size: 14px; font-weight: 600; }
.pma-app p { margin: 0 0 10px; }
.pma-app .pma-subtle { color: var(--pma-text-muted); font-size: 13px; margin: 0; }

.pma-icon { display: inline-block; vertical-align: middle; flex: 0 0 auto; }

/* ============================ Hero / header ============================ */
.pma-hero {
	position: relative;
	background: var(--pma-gradient);
	color: #fff;
	padding: 32px 24px 60px;
	border-radius: 0 0 28px 28px;
	margin-bottom: 14px;
	overflow: hidden;
	box-shadow: 0 12px 30px rgba(14, 165, 233, .25);
}
.pma-hero::before {
	content: '';
	position: absolute;
	right: -60px; top: -60px;
	width: 260px; height: 260px;
	background: radial-gradient(circle, rgba(255, 255, 255, .28), transparent 70%);
	pointer-events: none;
}
.pma-hero::after {
	content: '';
	position: absolute;
	left: -40px; bottom: -40px;
	width: 200px; height: 200px;
	background: radial-gradient(circle, rgba(255, 255, 255, .18), transparent 70%);
	pointer-events: none;
}
.pma-hero-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; position: relative; z-index: 1; }
.pma-hero h1 { color: #fff; font-size: 26px; margin: 0; font-weight: 800; letter-spacing: -.02em; }
.pma-hero .pma-subtle { color: rgba(255, 255, 255, .92); font-size: 13px; margin-top: 2px; }
.pma-hero-avatar {
	width: 48px; height: 48px; border-radius: 50%;
	background: rgba(255, 255, 255, .25);
	display: flex; align-items: center; justify-content: center;
	color: #fff;
	font-weight: 700;
	font-size: 18px;
	backdrop-filter: blur(8px);
	border: 2px solid rgba(255, 255, 255, .35);
	box-shadow: 0 4px 12px rgba(0, 0, 0, .1);
}
.pma-hero-wave {
	position: absolute;
	bottom: -1px; left: 0;
	width: 100%; height: 32px;
	color: var(--pma-bg);
	display: block;
}
.pma-hero .pma-user-selector { margin-top: 14px; position: relative; z-index: 1; }
.pma-hero .pma-user-selector label { display: inline-flex; align-items: center; gap: 6px; color: #fff; }
.pma-hero .pma-user-selector select {
	background: rgba(255, 255, 255, .22);
	color: #fff;
	border: 1px solid rgba(255, 255, 255, .35);
	padding: 7px 12px;
	border-radius: 10px;
	font-size: 13px;
	font-family: inherit;
	-webkit-appearance: none;
	appearance: none;
}
.pma-hero .pma-user-selector select option { color: #0f172a; }

.pma-hero-stats {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 12px;
	margin-top: 20px;
	position: relative;
	z-index: 1;
}
.pma-hero-stat {
	background: rgba(255, 255, 255, .18);
	border: 1px solid rgba(255, 255, 255, .28);
	border-radius: 14px;
	padding: 12px 14px;
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	transition: transform .15s ease, background .15s ease;
	cursor: pointer;
}
.pma-hero-stat:hover, .pma-hero-stat:active { background: rgba(255, 255, 255, .26); transform: translateY(-2px); }
.pma-hero-stat-value { font-size: 26px; font-weight: 800; line-height: 1.1; letter-spacing: -.02em; }
.pma-hero-stat-label { font-size: 11px; color: rgba(255, 255, 255, .88); text-transform: uppercase; letter-spacing: .06em; margin-top: 4px; font-weight: 600; }

/* ============================ Main content ============================ */
.pma-content { padding: 0 16px; }

.pma-card {
	background: var(--pma-surface);
	border: 1px solid var(--pma-border);
	border-radius: var(--pma-radius);
	padding: 20px;
	margin: 14px 0;
	box-shadow: var(--pma-shadow-sm);
	transition: box-shadow .2s ease, transform .15s ease;
}
.pma-card-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 14px;
	gap: 12px;
	flex-wrap: wrap;
}
.pma-card-header h2, .pma-card-header h3 { margin: 0; }
.pma-card-title { display: flex; align-items: center; gap: 8px; }
.pma-card-title .pma-icon { color: var(--pma-primary); }

.pma-grid { display: grid; gap: 14px; }
.pma-grid-cards { grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); }
.pma-grid-2col { grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)); }

/* Water body cards */
.pma-wb-card {
	background: var(--pma-surface);
	border-radius: var(--pma-radius);
	padding: 20px;
	border: 1px solid var(--pma-border);
	box-shadow: var(--pma-shadow-md);
	position: relative;
	overflow: hidden;
	transition: transform .2s ease, box-shadow .2s ease;
}
.pma-wb-card:hover { transform: translateY(-3px); box-shadow: var(--pma-shadow-lg); }
.pma-wb-card::before {
	content: '';
	position: absolute;
	top: 0; left: 0; right: 0;
	height: 5px;
	background: var(--pma-gradient);
}
.pma-wb-card.pma-status-good::before     { background: linear-gradient(90deg, #10b981, #34d399); }
.pma-wb-card.pma-status-warning::before  { background: linear-gradient(90deg, #f59e0b, #fbbf24); }
.pma-wb-card.pma-status-critical::before { background: linear-gradient(90deg, #ef4444, #f87171); }
.pma-wb-card.pma-status-no_data::before  { background: linear-gradient(90deg, #94a3b8, #cbd5e1); }
.pma-wb-card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.pma-wb-card-head h3 { margin: 0; display: flex; align-items: center; gap: 8px; font-size: 18px; }
.pma-wb-card-head h3 .pma-icon { color: var(--pma-primary); }
.pma-wb-meta { color: var(--pma-text-muted); font-size: 12px; margin: 4px 0 14px; }

.pma-mini-table { width: 100%; border-collapse: collapse; margin-top: 8px; }
.pma-mini-table th, .pma-mini-table td { padding: 6px 8px; border-bottom: 1px dashed var(--pma-border); font-size: 13px; text-align: left; }
.pma-mini-table th { color: var(--pma-text-muted); font-weight: 500; }
.pma-mini-table td { text-align: right; font-weight: 600; }
.pma-mini-table tr:last-child th, .pma-mini-table tr:last-child td { border: 0; }

/* Tables */
.pma-table-wrap { overflow-x: auto; border-radius: var(--pma-radius-sm); margin: 0 -4px; padding: 0 4px; -webkit-overflow-scrolling: touch; }
.pma-table { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 600px; }
.pma-table th, .pma-table td { padding: 12px 14px; border-bottom: 1px solid var(--pma-border); text-align: left; vertical-align: top; }
.pma-table th { background: var(--pma-surface-2); font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--pma-text-muted); }
.pma-table tr:last-child td { border-bottom: 0; }
.pma-table tbody tr { transition: background .15s ease; }
.pma-table tbody tr:hover { background: var(--pma-surface-2); }

/* Status pills */
.pma-badge {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 4px 10px;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 600;
	white-space: nowrap;
}
.pma-badge-good     { background: rgba(16, 185, 129, .14); color: #047857; }
.pma-badge-warning  { background: rgba(245, 158, 11, .17); color: #b45309; }
.pma-badge-critical { background: rgba(239, 68, 68, .14); color: #b91c1c; }
.pma-badge-no_data  { background: rgba(148, 163, 184, .2); color: #475569; }
.pma-badge-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.pma-badge-good .pma-badge-dot     { background: #10b981; }
.pma-badge-warning .pma-badge-dot  { background: #f59e0b; }
.pma-badge-critical .pma-badge-dot { background: #ef4444; }
.pma-badge-no_data .pma-badge-dot  { background: #94a3b8; }

/* Lists */
.pma-list { list-style: none; padding: 0; margin: 0; }
.pma-list li {
	display: flex; align-items: center; gap: 12px;
	padding: 12px 0;
	border-bottom: 1px solid var(--pma-border);
	font-size: 14px;
}
.pma-list li:last-child { border-bottom: 0; }
.pma-list-icon {
	width: 40px; height: 40px; border-radius: 12px;
	background: var(--pma-gradient-soft);
	color: var(--pma-primary-dark);
	display: inline-flex; align-items: center; justify-content: center;
	flex: 0 0 auto;
}
.pma-list-body { flex: 1; min-width: 0; }
.pma-list-title { font-weight: 600; font-size: 14px; }
.pma-list-meta { color: var(--pma-text-muted); font-size: 12px; margin-top: 1px; }

/* Buttons */
.pma-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 10px 16px;
	min-height: 40px;
	border-radius: 12px;
	border: 1px solid transparent;
	background: var(--pma-surface-2);
	color: var(--pma-text);
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
	text-decoration: none;
	transition: transform .12s ease, background .12s ease, box-shadow .12s ease;
	font-family: inherit;
	user-select: none;
}
.pma-button:hover { background: #eef2f7; transform: translateY(-1px); }
.pma-button:active { transform: translateY(0); }
.pma-button-primary {
	background: var(--pma-gradient);
	color: #fff;
	box-shadow: 0 6px 18px rgba(14, 165, 233, .38);
}
.pma-button-primary:hover { color: #fff; box-shadow: 0 8px 22px rgba(14, 165, 233, .45); }
.pma-button-primary:disabled, .pma-button-primary[disabled] { opacity: .5; cursor: not-allowed; transform: none; box-shadow: none; }
.pma-button-ghost { background: transparent; color: var(--pma-primary-dark); }
.pma-button-ghost:hover { background: rgba(14, 165, 233, .08); }
.pma-button-danger { background: transparent; color: #b91c1c; }
.pma-button-danger:hover { background: rgba(239, 68, 68, .08); }
.pma-button-sm { padding: 6px 10px; min-height: 32px; font-size: 12px; border-radius: 9px; }

/* Empty state */
.pma-empty { text-align: center; padding: 36px 22px; }
.pma-empty .pma-illustration {
	width: 100%; max-width: 280px; height: auto;
	margin: 0 auto 16px; display: block;
	border-radius: 18px;
	box-shadow: var(--pma-shadow-md);
}
.pma-empty h3 { margin-bottom: 6px; font-size: 19px; }
.pma-empty p { color: var(--pma-text-muted); margin-bottom: 16px; }

/* Getting started panel */
.pma-getting-started {
	background: linear-gradient(135deg, #ecfeff 0%, #e0f2fe 100%);
	border-color: #bae6fd;
	position: relative;
	overflow: hidden;
	padding: 22px 22px 20px;
}
.pma-getting-started::before {
	content: '';
	position: absolute;
	top: -50px; right: -40px;
	width: 180px; height: 180px;
	background: radial-gradient(circle, rgba(14, 165, 233, .25), transparent 70%);
	pointer-events: none;
}
.pma-gs-close {
	position: absolute;
	top: 12px; right: 12px;
	width: 36px; height: 36px;
	border-radius: 50%;
	border: 1px solid rgba(15, 23, 42, .12);
	background: rgba(255, 255, 255, .95);
	color: #475569;
	cursor: pointer;
	display: inline-flex; align-items: center; justify-content: center;
	z-index: 2;
	transition: background .15s ease, color .15s ease, transform .12s ease;
	box-shadow: 0 2px 8px rgba(15, 23, 42, .08);
	padding: 0;
	font-family: inherit;
}
.pma-gs-close:hover { background: #ffffff; color: #0f172a; transform: scale(1.05); }
.pma-gs-close .pma-icon { color: currentColor; }

.pma-gs-header {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	margin-bottom: 14px;
	position: relative;
	z-index: 1;
}
.pma-gs-header-icon {
	flex: 0 0 auto;
	width: 44px; height: 44px;
	border-radius: 14px;
	background: linear-gradient(135deg, #0ea5e9, #06b6d4);
	color: #fff;
	display: inline-flex; align-items: center; justify-content: center;
	box-shadow: 0 6px 16px rgba(14, 165, 233, .35);
}
.pma-gs-header-icon .pma-icon { color: #fff; }
.pma-gs-title { margin: 0; font-size: 20px; font-weight: 800; color: #0f172a; }
.pma-gs-subtitle { margin: 2px 0 0; }

.pma-gs-tip {
	background: rgba(255, 255, 255, .65);
	border: 1px solid rgba(14, 165, 233, .2);
	border-radius: 10px;
	padding: 10px 12px;
	margin: 12px 0 0;
	font-size: 13px;
	color: #0f172a;
}

.pma-gs-footer {
	margin-top: 16px;
	display: flex;
	justify-content: flex-end;
}
.pma-gs-footer .pma-button-primary {
	background: var(--pma-gradient) !important;
	color: #fff !important;
	box-shadow: 0 6px 18px rgba(14, 165, 233, .4) !important;
	padding: 10px 18px !important;
	font-weight: 700 !important;
	border: 0 !important;
}

/* Help button in hero */
.pma-hero-actions {
	display: flex;
	align-items: center;
	gap: 10px;
}
.pma-hero-help {
	width: 40px; height: 40px;
	border-radius: 50%;
	border: 1px solid rgba(255, 255, 255, .35);
	background: rgba(255, 255, 255, .22);
	color: #fff;
	display: inline-flex; align-items: center; justify-content: center;
	cursor: pointer;
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	transition: background .15s ease, transform .12s ease;
	font-family: inherit;
	padding: 0;
}
.pma-hero-help:hover { background: rgba(255, 255, 255, .35); transform: translateY(-1px); }
.pma-hero-help:active { transform: translateY(0); }
.pma-hero-help .pma-icon { color: #fff; }
.pma-steps { padding: 0; margin: 12px 0 0; list-style: none; counter-reset: pma-step; position: relative; z-index: 1; }
.pma-steps li {
	display: flex; gap: 14px; align-items: flex-start;
	padding: 12px 0;
	counter-increment: pma-step;
}
.pma-steps li::before {
	content: counter(pma-step);
	width: 30px; height: 30px;
	border-radius: 50%;
	background: var(--pma-gradient);
	color: #fff;
	font-weight: 800;
	font-size: 14px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	box-shadow: 0 4px 12px rgba(14, 165, 233, .35);
}

/* Tab panels */
.pma-tab-panel { display: none; animation: pma-fade .25s ease; }
.pma-tab-panel.active { display: block; }
@keyframes pma-fade {
	from { opacity: 0; transform: translateY(8px); }
	to { opacity: 1; transform: translateY(0); }
}

/* ============================ Bottom navigation ============================ */
.pma-bottom-nav {
	position: fixed;
	bottom: 14px;
	left: 50%;
	transform: translateX(-50%);
	background: rgba(255, 255, 255, .96);
	backdrop-filter: blur(18px) saturate(1.5);
	-webkit-backdrop-filter: blur(18px) saturate(1.5);
	border: 1px solid rgba(226, 232, 240, .8);
	border-radius: 999px;
	display: flex;
	gap: 2px;
	padding: 6px;
	box-shadow: 0 16px 40px rgba(15, 23, 42, .18), 0 2px 6px rgba(15, 23, 42, .08);
	z-index: 60;
	overflow-x: auto;
	max-width: calc(100% - 20px);
	scrollbar-width: none;
	scroll-snap-type: x mandatory;
}
.pma-bottom-nav::-webkit-scrollbar { display: none; }
.pma-bottom-nav button {
	background: transparent;
	border: 0;
	padding: 10px 14px;
	border-radius: 999px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 3px;
	color: var(--pma-text-muted);
	font-size: 11px;
	font-weight: 600;
	cursor: pointer;
	min-width: 64px;
	min-height: 48px;
	transition: background .2s ease, color .2s ease, transform .15s ease;
	font-family: inherit;
	scroll-snap-align: center;
	letter-spacing: -.01em;
	flex: 0 0 auto;
}
.pma-bottom-nav button:hover { color: var(--pma-primary-dark); }
.pma-bottom-nav button:active { transform: scale(.94); }
.pma-bottom-nav button.active {
	background: var(--pma-gradient);
	color: #fff;
	box-shadow: 0 6px 18px rgba(14, 165, 233, .45);
	min-width: 80px;
}
.pma-bottom-nav button.active span { color: #fff; }
.pma-bottom-nav span { display: block; }
.pma-bottom-nav .pma-icon { display: block; }

/* Charts */
.pma-chart-controls { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.pma-chart-controls.pma-loading { opacity: .55; pointer-events: none; }
.pma-chart-controls label { font-size: 12px; color: var(--pma-text-muted); display: inline-flex; align-items: center; gap: 4px; }
.pma-chart-controls select {
	padding: 8px 12px;
	border: 1px solid var(--pma-border);
	border-radius: 10px;
	font-size: 13px;
	background: #fff;
	min-height: 36px;
	font-family: inherit;
}

.pma-chart-combined {
	position: relative;
	height: 380px;
	background: linear-gradient(180deg, var(--pma-surface) 0%, var(--pma-surface-2) 100%);
	border-radius: var(--pma-radius-sm);
	padding: 10px;
}
.pma-chart-individual { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.pma-chart-individual .pma-mini-chart {
	background: linear-gradient(180deg, var(--pma-surface) 0%, var(--pma-surface-2) 100%);
	border-radius: var(--pma-radius-sm);
	padding: 16px;
	border: 1px solid var(--pma-border);
	box-shadow: var(--pma-shadow-sm);
}
.pma-chart-individual .pma-mini-chart h4 { margin: 0 0 10px; font-size: 13px; display: flex; align-items: center; gap: 6px; }
.pma-chart-individual .pma-mini-chart .pma-mini-unit { color: var(--pma-text-muted); font-weight: 500; font-size: 11px; }
.pma-chart-individual .pma-mini-chart-canvas-wrap { position: relative; height: 200px; }

.pma-chart-message {
	padding: 36px 22px;
	text-align: center;
	color: var(--pma-text-muted);
	background: var(--pma-surface-2);
	border-radius: var(--pma-radius-sm);
	border: 1px dashed var(--pma-border);
	font-size: 14px;
}
.pma-chart-message.pma-chart-error { background: rgba(239, 68, 68, .06); color: #b91c1c; border-color: rgba(239, 68, 68, .25); }

/* Chemical guide */
.pma-guide-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px; }
.pma-guide-card {
	background: var(--pma-surface);
	border: 1px solid var(--pma-border);
	border-radius: var(--pma-radius);
	padding: 20px;
	box-shadow: var(--pma-shadow-sm);
	position: relative;
	transition: transform .15s ease, box-shadow .15s ease;
}
.pma-guide-card:hover { transform: translateY(-2px); box-shadow: var(--pma-shadow-lg); }
.pma-guide-card-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.pma-guide-card-head .pma-guide-icon {
	width: 44px; height: 44px;
	border-radius: 14px;
	background: var(--pma-gradient-soft);
	color: var(--pma-primary-dark);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-shadow: var(--pma-shadow-sm);
}
.pma-guide-card-head h3 { margin: 0; font-size: 17px; }
.pma-guide-card-head .pma-guide-unit { color: var(--pma-text-muted); font-size: 12px; }
.pma-guide-range {
	background: linear-gradient(90deg, rgba(16, 185, 129, .14), rgba(14, 165, 233, .14));
	color: #047857;
	padding: 10px 14px;
	border-radius: 10px;
	font-size: 13px;
	font-weight: 700;
	margin-bottom: 14px;
}
.pma-guide-row { font-size: 13px; margin-bottom: 10px; }
.pma-guide-row strong { color: var(--pma-text); display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--pma-text-muted); margin-bottom: 3px; font-weight: 700; }
.pma-guide-range-bar { display: flex; height: 10px; border-radius: 999px; overflow: hidden; margin: 4px 0 8px; background: var(--pma-border); }
.pma-guide-range-bar > div { height: 100%; }
.pma-guide-range-bar .pma-rb-crit-l { background: linear-gradient(90deg, #ef4444, #f87171); }
.pma-guide-range-bar .pma-rb-warn-l { background: linear-gradient(90deg, #fbbf24, #fde68a); }
.pma-guide-range-bar .pma-rb-good   { background: linear-gradient(90deg, #34d399, #10b981); }
.pma-guide-range-bar .pma-rb-warn-h { background: linear-gradient(90deg, #fde68a, #fbbf24); }
.pma-guide-range-bar .pma-rb-crit-h { background: linear-gradient(90deg, #f87171, #ef4444); }
.pma-guide-range-scale { display: flex; justify-content: space-between; font-size: 11px; color: var(--pma-text-muted); font-weight: 600; }

/* ============================ Modals ============================ */
.pma-modal {
	position: fixed;
	inset: 0;
	background: rgba(15, 23, 42, .6);
	display: flex;
	align-items: flex-end;
	justify-content: center;
	z-index: 100000;
	padding: 0;
	animation: pma-modal-fade .25s ease;
	backdrop-filter: blur(4px);
}
@keyframes pma-modal-fade { from { opacity: 0; } to { opacity: 1; } }
.pma-modal[hidden] { display: none; }
.pma-modal-inner {
	background: #fff;
	border-radius: 24px 24px 0 0;
	max-width: 640px;
	width: 100%;
	max-height: 92vh;
	overflow-y: auto;
	padding: 22px 22px 32px;
	animation: pma-modal-slide .3s cubic-bezier(.16, 1, .3, 1);
	box-shadow: 0 -16px 50px rgba(15, 23, 42, .25);
	-webkit-overflow-scrolling: touch;
}
@keyframes pma-modal-slide {
	from { transform: translateY(60px); opacity: 0; }
	to { transform: translateY(0); opacity: 1; }
}
.pma-modal-inner::before {
	content: '';
	display: block;
	width: 44px; height: 4px;
	border-radius: 999px;
	background: var(--pma-border);
	margin: -6px auto 16px;
}
.pma-modal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.pma-modal-header h2 { margin: 0; font-size: 19px; font-weight: 700; }
.pma-modal-close {
	background: var(--pma-surface-2);
	border: 0;
	font-size: 22px;
	cursor: pointer;
	line-height: 1;
	width: 36px; height: 36px;
	color: var(--pma-text-muted);
	border-radius: 50%;
	display: inline-flex; align-items: center; justify-content: center;
	transition: background .15s ease, color .15s ease;
}
.pma-modal-close:hover { background: var(--pma-bg-deep); color: var(--pma-text); }

.pma-form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 6px 14px; }
.pma-form-checks { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 8px; padding: 8px 0; }
.pma-form-checks label {
	display: flex; align-items: center; gap: 8px;
	padding: 10px 12px;
	background: var(--pma-surface-2);
	border-radius: 10px;
	cursor: pointer;
	font-size: 13px;
	transition: background .15s ease;
	border: 1px solid transparent;
}
.pma-form-checks label:hover { background: var(--pma-bg-deep); border-color: var(--pma-border); }
.pma-form-checks input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--pma-primary); }

.pma-modal label { font-size: 13px; color: var(--pma-text); font-weight: 600; display: block; margin-bottom: 8px; }
.pma-modal input[type="text"],
.pma-modal input[type="email"],
.pma-modal input[type="number"],
.pma-modal input[type="date"],
.pma-modal input[type="datetime-local"],
.pma-modal select,
.pma-modal textarea {
	width: 100%;
	padding: 11px 14px;
	border: 1px solid var(--pma-border);
	border-radius: 12px;
	font-size: 15px;
	font-family: inherit;
	box-sizing: border-box;
	margin-top: 4px;
	background: #fff;
	transition: border .15s ease, box-shadow .15s ease;
	-webkit-appearance: none;
	appearance: none;
}
.pma-modal select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 36px; }
.pma-modal input:focus, .pma-modal select:focus, .pma-modal textarea:focus {
	outline: 0;
	border-color: var(--pma-primary);
	box-shadow: 0 0 0 4px rgba(14, 165, 233, .15);
}

.pma-modal p { margin: 0 0 14px; }
.pma-modal p:last-child { display: flex; gap: 10px; margin-top: 20px; margin-bottom: 0; }

.pma-modal button {
	padding: 12px 20px;
	border-radius: 12px;
	border: 1px solid transparent;
	font-size: 14px;
	font-weight: 700;
	cursor: pointer;
	font-family: inherit;
	min-height: 44px;
}
.pma-modal button[type="submit"] {
	background: var(--pma-gradient);
	color: #fff;
	box-shadow: 0 6px 18px rgba(14, 165, 233, .38);
	flex: 1;
}
.pma-modal button[type="submit"]:hover { box-shadow: 0 8px 22px rgba(14, 165, 233, .45); transform: translateY(-1px); }
.pma-modal button[type="button"] {
	background: var(--pma-surface-2);
	color: var(--pma-text);
	min-width: 100px;
}

/* Login prompt */
.pma-login-prompt {
	max-width: 480px;
	margin: 60px auto;
	padding: 24px;
}
.pma-login-card {
	background: var(--pma-surface);
	border-radius: 24px;
	padding: 32px 28px;
	text-align: center;
	box-shadow: var(--pma-shadow-xl);
}
.pma-login-card .pma-illustration { width: 240px; height: auto; margin: 0 auto 18px; display: block; border-radius: 18px; }
.pma-login-card h1 { font-size: 24px; }

/* Export tiles */
.pma-export-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.pma-export-tile {
	background: var(--pma-surface-2);
	border: 1px solid var(--pma-border);
	border-radius: var(--pma-radius-sm);
	padding: 18px;
	display: flex;
	flex-direction: column;
	gap: 10px;
	transition: transform .15s ease, box-shadow .15s ease;
}
.pma-export-tile:hover { transform: translateY(-2px); box-shadow: var(--pma-shadow-md); }
.pma-export-tile-head { display: flex; align-items: center; gap: 8px; font-weight: 700; }
.pma-export-tile-head .pma-icon { color: var(--pma-primary); }
.pma-export-actions { display: flex; gap: 8px; }
.pma-export-actions .pma-button { flex: 1; }

/* ============================ Responsive ============================ */
@media (max-width: 720px) {
	.pma-app { padding-bottom: 100px; }
	.pma-hero { padding: 24px 18px 56px; border-radius: 0 0 24px 24px; }
	.pma-hero h1 { font-size: 23px; }
	.pma-hero-avatar { width: 44px; height: 44px; font-size: 17px; }
	.pma-hero-stats { gap: 8px; margin-top: 18px; }
	.pma-hero-stat { padding: 10px 12px; border-radius: 12px; }
	.pma-hero-stat-value { font-size: 20px; }
	.pma-hero-stat-label { font-size: 10px; letter-spacing: .05em; }
	.pma-content { padding: 0 14px; }
	.pma-card { padding: 16px; border-radius: 16px; margin: 12px 0; }
	.pma-app h1 { font-size: 24px; }
	.pma-app h2 { font-size: 19px; }
	.pma-app h3 { font-size: 16px; }
	.pma-grid-2col { grid-template-columns: 1fr; }
	.pma-chart-combined { height: 300px; }
	.pma-chart-individual { grid-template-columns: 1fr; }
	.pma-chart-individual .pma-mini-chart-canvas-wrap { height: 180px; }
	.pma-chart-controls { gap: 8px; }
	.pma-chart-controls select { font-size: 14px; min-height: 40px; padding: 8px 14px; }
	.pma-bottom-nav { bottom: 10px; padding: 5px; }
	.pma-bottom-nav button {
		min-width: 56px; padding: 8px 10px;
		font-size: 10px;
		min-height: 44px;
	}
	.pma-bottom-nav button.active { min-width: 68px; }
	.pma-bottom-nav button .pma-icon { width: 20px; height: 20px; }
	.pma-modal-inner { padding: 20px 18px 30px; max-height: 88vh; }
	.pma-modal-header h2 { font-size: 17px; }
	.pma-table { font-size: 13px; min-width: 540px; }
	.pma-table th, .pma-table td { padding: 10px 12px; }
	.pma-form-grid { grid-template-columns: 1fr 1fr; }
	.pma-button-sm { min-height: 36px; }
	.pma-guide-grid { grid-template-columns: 1fr; }
	.pma-modal p:last-child { flex-direction: column; }
	.pma-modal button[type="button"] { width: 100%; }
}

@media (max-width: 380px) {
	.pma-hero-stat-value { font-size: 18px; }
	.pma-hero-stat-label { font-size: 9px; }
	.pma-bottom-nav button { min-width: 52px; padding: 6px 8px; }
	.pma-bottom-nav button.active { min-width: 62px; }
	.pma-form-grid { grid-template-columns: 1fr; }
}

@media (min-width: 721px) {
	.pma-modal {
		align-items: center;
		padding: 24px;
	}
	.pma-modal-inner { border-radius: 22px; }
	.pma-modal-inner::before { display: none; }
}

/* Animations */
.pma-fade-in { animation: pma-fade .3s ease; }
.pma-pulse { animation: pma-pulse 1.8s ease infinite; }
@keyframes pma-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }

/* Safe area insets (notched devices) */
@supports (padding: max(0px)) {
	.pma-bottom-nav { bottom: max(14px, env(safe-area-inset-bottom)); }
	.pma-app { padding-bottom: max(130px, calc(env(safe-area-inset-bottom) + 110px)); }
}

/* ============================ Form fields with range hints ============================ */
.pma-form-grid .pma-field { display: block; margin-bottom: 8px; }
.pma-form-grid .pma-field label { margin-bottom: 0; }
.pma-range-hint {
	display: block;
	font-size: 11px;
	color: var(--pma-text-muted);
	margin-top: 4px;
	padding: 3px 8px;
	border-radius: 6px;
	background: var(--pma-surface-2);
	font-weight: 600;
	letter-spacing: -.005em;
	transition: background .15s ease, color .15s ease;
}
.pma-range-hint.pma-hint-good     { background: rgba(16, 185, 129, .15);  color: #047857; }
.pma-range-hint.pma-hint-warning  { background: rgba(245, 158, 11, .18);  color: #b45309; }
.pma-range-hint.pma-hint-critical { background: rgba(239, 68, 68, .14);   color: #b91c1c; }

/* ============================ Bottom-nav badge ============================ */
.pma-bottom-nav .pma-tab-icon { position: relative; display: inline-flex; }
.pma-tab-badge {
	position: absolute;
	top: -4px; right: -8px;
	min-width: 16px;
	height: 16px;
	padding: 0 4px;
	border-radius: 999px;
	background: #ef4444;
	color: #fff;
	font-size: 10px;
	font-weight: 800;
	line-height: 16px;
	text-align: center;
	box-shadow: 0 2px 4px rgba(239, 68, 68, .5);
	border: 2px solid #fff;
	animation: pma-badge-pulse 2s ease-in-out infinite;
}
@keyframes pma-badge-pulse {
	0%, 100% { transform: scale(1); }
	50% { transform: scale(1.1); }
}

/* ============================ Skeleton shimmer ============================ */
.pma-skeleton {
	position: relative;
	overflow: hidden;
	pointer-events: none;
}
.pma-skeleton::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(
		90deg,
		rgba(241, 245, 249, 0) 0%,
		rgba(226, 232, 240, .7) 50%,
		rgba(241, 245, 249, 0) 100%
	);
	background-size: 240px 100%;
	background-repeat: no-repeat;
	animation: pma-shimmer 1.4s ease infinite;
	border-radius: inherit;
}
@keyframes pma-shimmer {
	0% { background-position: -240px 0; }
	100% { background-position: calc(100% + 240px) 0; }
}

/* ============================ Bottom-nav collapse toggle ============================ */
.pma-nav-toggle {
	background: var(--pma-gradient) !important;
	color: #fff !important;
	border-radius: 50% !important;
	width: 40px;
	min-width: 40px !important;
	height: 40px;
	min-height: 40px !important;
	padding: 0 !important;
	margin-left: 4px;
	box-shadow: 0 4px 12px rgba(14, 165, 233, .4);
	flex-direction: row !important;
	gap: 0 !important;
}
.pma-nav-toggle .pma-icon {
	transition: transform .35s cubic-bezier(.4, 0, .2, 1);
	color: #fff;
}
.pma-bottom-nav.pma-nav-collapsed .pma-nav-toggle .pma-icon {
	transform: rotate(180deg);
}

.pma-bottom-nav {
	transition: transform .4s cubic-bezier(.4, 0, .2, 1), max-width .4s cubic-bezier(.4, 0, .2, 1);
}

/* Collapsed: nav shrinks to a small pill on the right side */
.pma-bottom-nav.pma-nav-collapsed {
	left: auto;
	right: 14px;
	transform: none;
	max-width: 56px;
	padding: 6px;
	overflow: hidden;
}
.pma-bottom-nav.pma-nav-collapsed .pma-tab {
	opacity: 0;
	max-width: 0;
	min-width: 0;
	padding: 0;
	pointer-events: none;
	transition: opacity .15s ease, max-width .25s ease, padding .25s ease;
}
.pma-bottom-nav.pma-nav-collapsed .pma-nav-toggle {
	margin-left: 0;
}
@supports (padding: max(0px)) {
	.pma-bottom-nav.pma-nav-collapsed { right: max(14px, env(safe-area-inset-right)); }
}
@media (max-width: 720px) {
	.pma-bottom-nav.pma-nav-collapsed { right: 12px; }
}

/* ============================ Hide common third-party "scroll to top" widgets on shortcode pages ============================ */
body.pma-has-app a[href="#top"],
body.pma-has-app a[href="#back-to-top"],
body.pma-has-app #scroll-to-top,
body.pma-has-app #back-to-top,
body.pma-has-app .scroll-to-top,
body.pma-has-app .scrollup,
body.pma-has-app #scrollup,
body.pma-has-app .back-to-top,
body.pma-has-app .scroll-top,
body.pma-has-app .scrolltop,
body.pma-has-app .scroll-top-button,
body.pma-has-app .elementor-scroll-to-top-button,
body.pma-has-app .e-scroll-to-top,
body.pma-has-app #scrollUp,
body.pma-has-app #scroll_to_top,
body.pma-has-app .return-to-top,
body.pma-has-app .top-link {
	display: none !important;
	visibility: hidden !important;
	opacity: 0 !important;
	pointer-events: none !important;
}

/* ============================ Modal redesign: gradient header + tinted sections ============================ */
.pma-modal-inner {
	padding: 0 !important;
	/* Keep scrolling enabled. The gradient header has its own rounded corners. */
	overflow-y: auto !important;
	overflow-x: hidden;
	max-height: 92vh !important;
	-webkit-overflow-scrolling: touch;
	/* Subtle blue tint so the body doesn't feel washed-out white. */
	background: linear-gradient(180deg, #eef6fc 0%, #f0f9ff 80px, #f8fafc 100%) !important;
	display: flex !important;
	flex-direction: column;
}
.pma-modal-inner::before { display: none; }

.pma-modal-header-gradient {
	background: linear-gradient(135deg, #e0f2fe 0%, #ecfeff 50%, #f0fdfa 100%) !important;
	color: #0f172a !important;
	padding: 20px 22px 18px;
	margin: 0;
	border-radius: 24px 24px 0 0;
	position: sticky;
	top: 0;
	z-index: 5;
	box-shadow: 0 2px 8px rgba(15, 23, 42, .06);
	border-bottom: 1px solid rgba(14, 165, 233, .15);
	flex-shrink: 0;
}
.pma-modal-header-gradient::after {
	content: '';
	position: absolute;
	right: -40px; top: -40px;
	width: 160px; height: 160px;
	background: radial-gradient(circle, rgba(14, 165, 233, .12), transparent 70%);
	pointer-events: none;
}
.pma-modal-header-gradient h2 {
	color: #0f172a !important;
	font-size: 20px;
	font-weight: 800;
	letter-spacing: -.015em;
	display: flex; align-items: center; gap: 10px;
	margin: 0;
}
.pma-modal-header-gradient .pma-modal-header-icon {
	display: inline-flex; align-items: center; justify-content: center;
	width: 36px; height: 36px;
	background: linear-gradient(135deg, #0ea5e9, #06b6d4) !important;
	border: 1px solid rgba(14, 165, 233, .25);
	border-radius: 12px;
	color: #ffffff !important;
	box-shadow: 0 4px 10px rgba(14, 165, 233, .35);
}
.pma-modal-header-gradient .pma-modal-header-icon .pma-icon {
	color: #ffffff !important;
}
.pma-modal-header-gradient .pma-modal-close {
	background: rgba(15, 23, 42, .06) !important;
	color: #0f172a !important;
	border: 1px solid rgba(15, 23, 42, .12) !important;
	z-index: 2;
	font-weight: 700;
}
.pma-modal-header-gradient .pma-modal-close:hover {
	background: rgba(15, 23, 42, .12) !important;
}

.pma-modal-inner > form {
	padding: 18px 18px 0;
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
}

.pma-form-section {
	background: #ffffff;
	border: 1px solid var(--pma-border);
	border-radius: 14px;
	padding: 16px 16px 12px;
	margin: 0 0 14px;
	box-shadow: 0 4px 14px rgba(15, 23, 42, .07), 0 1px 2px rgba(15, 23, 42, .04);
}
.pma-form-section-title {
	display: flex; align-items: center; gap: 8px;
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .06em;
	color: var(--pma-text-muted);
	margin: 0 0 12px;
}
.pma-form-section-title .pma-icon { color: var(--pma-primary); }
.pma-form-section .pma-subtle { font-size: 12px; margin-bottom: 10px; }

.pma-form-section-tint-blue   { background: linear-gradient(135deg, #dbeafe 0%, #f0f9ff 100%); border-color: #93c5fd; }
.pma-form-section-tint-green  { background: linear-gradient(135deg, #d1fae5 0%, #ecfdf5 100%); border-color: #6ee7b7; }
.pma-form-section-tint-amber  { background: linear-gradient(135deg, #fef3c7 0%, #fffbeb 100%); border-color: #fcd34d; }
.pma-form-section-tint-pink   { background: linear-gradient(135deg, #fce7f3 0%, #fdf2f8 100%); border-color: #f9a8d4; }
.pma-form-section-accent      { background: linear-gradient(135deg, #cffafe 0%, #f0f9ff 100%); border-color: #67e8f9; }

.pma-form-section-tint-blue  .pma-form-section-title .pma-icon { color: #0284c7; }
.pma-form-section-tint-green .pma-form-section-title .pma-icon { color: #059669; }
.pma-form-section-tint-amber .pma-form-section-title .pma-icon { color: #d97706; }
.pma-form-section-tint-pink  .pma-form-section-title .pma-icon { color: #db2777; }

.pma-form-section .pma-field { margin-bottom: 10px; }
.pma-form-section label { font-size: 13px; font-weight: 600; color: var(--pma-text); }

.pma-form-section.pma-form-disabled { opacity: 0.4; pointer-events: none; }
.pma-form-section.pma-form-disabled .pma-form-section-title::after {
	content: 'disabled for this water body';
	font-size: 10px;
	font-weight: 600;
	color: var(--pma-text-muted);
	text-transform: none;
	letter-spacing: 0;
	margin-left: auto;
}

/* Metric toggle visual (pill checkboxes) */
.pma-form-checks label {
	background: #fff !important;
	border: 1px solid var(--pma-border) !important;
	padding: 9px 12px !important;
	cursor: pointer;
	transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
.pma-form-checks label:has(input:checked) {
	background: linear-gradient(135deg, rgba(14, 165, 233, .08), rgba(20, 184, 166, .06)) !important;
	border-color: var(--pma-primary) !important;
	box-shadow: 0 2px 8px rgba(14, 165, 233, .15);
}
.pma-form-checks input[type="checkbox"] {
	accent-color: var(--pma-primary);
	width: 18px; height: 18px;
	margin-right: 4px;
}
.pma-metric-toggle {
	display: inline-flex; align-items: center; gap: 6px;
	font-weight: 600;
	font-size: 13px;
}
.pma-metric-toggle-icon {
	display: inline-flex; align-items: center; justify-content: center;
	width: 24px; height: 24px;
	border-radius: 8px;
	background: var(--pma-gradient-soft);
	color: var(--pma-primary-dark);
}
.pma-form-checks-grid { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }

.pma-form-actions {
	display: flex !important;
	gap: 10px !important;
	padding: 14px 18px !important;
	margin: 8px -18px 0 !important;
	border-top: 1px solid var(--pma-border);
	background: #ffffff !important;
	position: sticky !important;
	bottom: 0;
	z-index: 4;
	box-shadow: 0 -8px 20px rgba(15, 23, 42, .12);
}
/* Guarantee the Save button stays a gradient pill even if the theme styles .button-primary. */
.pma-form-actions button[type="submit"],
.pma-form-actions .pma-button-primary {
	flex: 1 1 auto !important;
	min-height: 48px !important;
	font-size: 15px !important;
	font-weight: 700 !important;
	background: linear-gradient(135deg, #0ea5e9 0%, #06b6d4 60%, #14b8a6 100%) !important;
	color: #ffffff !important;
	border: 0 !important;
	border-radius: 12px !important;
	padding: 12px 20px !important;
	box-shadow: 0 6px 18px rgba(14, 165, 233, .38) !important;
	text-shadow: 0 1px 1px rgba(0, 0, 0, .15);
	cursor: pointer !important;
	font-family: inherit !important;
	letter-spacing: -0.005em;
}
.pma-form-actions button[type="submit"]:hover,
.pma-form-actions .pma-button-primary:hover {
	background: linear-gradient(135deg, #0284c7 0%, #0891b2 60%, #0d9488 100%) !important;
	box-shadow: 0 8px 22px rgba(14, 165, 233, .45) !important;
}
.pma-form-actions button[type="button"] {
	min-width: 110px !important;
	background: #e2e8f0 !important;
	color: #1f2937 !important;
	border: 0 !important;
	border-radius: 12px !important;
	padding: 12px 20px !important;
	font-weight: 600 !important;
	font-size: 14px !important;
	min-height: 48px !important;
	cursor: pointer !important;
	font-family: inherit !important;
}
.pma-form-actions button[type="button"]:hover { background: #cbd5e1 !important; }

.pma-sr label { display: block; }
.pma-sr-only { position: absolute; left: -9999px; }

.pma-modal textarea { min-height: 70px; }

@media (max-width: 720px) {
	.pma-modal-header-gradient { padding: 18px 18px 16px; }
	.pma-modal-header-gradient h2 { font-size: 18px; }
	.pma-modal-inner > form { padding: 16px 16px 22px; }
	.pma-form-section { padding: 14px 12px 8px; margin-bottom: 12px; }
}