/* V3 — Dandy Brand Inspired
   Consistency pass + Pink's Windows polish */

/* ========================================
   1. DESIGN TOKENS
   ======================================== */
:root {
	--blue: #003953;
	--blue-light: #074d6f;
	--blue-lighter: #d0e6fe;
	--pink: #f9abac;
	--pink-hover: #f7999a;
	--pink-light: #fddede;
	--tan: #efe8df;
	--tan-light: #f7f3ee;
	--cream: #fff8f0;
	--white: #ffffff;
	--border: #e0d8cf;
	--border-light: rgba(0, 57, 83, 0.08);
	--border-strong: #b1a9a9;
	--text-primary: #003953;
	--text-secondary: rgba(0, 57, 83, 0.66);
	--text-tertiary: rgba(0, 57, 83, 0.4);
	--text-inverse: #ffffff;
	--success: #4caf50;
	--warning: #ff9800;
	--error: #f44336;
	--radius-sm: 8px;
	--radius-md: 12px;
	--radius-lg: 16px;
	--radius-xl: 24px;
	--radius-full: 9999px;
	--shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.04);
	--shadow-md: 0 2px 8px rgba(0, 0, 0, 0.06);
	--shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.08);
	--shadow-cta: 0 2px 8px rgba(0, 57, 83, 0.2);

	/* Liquid Glass Tokens */
	--glass-bg: rgba(255, 255, 255, 0.55);
	--glass-bg-heavy: rgba(255, 255, 255, 0.7);
	--glass-bg-light: rgba(255, 255, 255, 0.4);
	--glass-bg-warm: rgba(239, 232, 223, 0.45);
	--glass-bg-cream: rgba(255, 248, 240, 0.5);
	--glass-border: rgba(255, 255, 255, 0.45);
	--glass-border-subtle: rgba(255, 255, 255, 0.25);
	--glass-blur: blur(16px);
	--glass-blur-heavy: blur(20px);
	--glass-blur-light: blur(12px);
	--glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
	--glass-shadow-sm: 0 4px 16px rgba(0, 0, 0, 0.06);
	--glass-shadow-elevated: 0 12px 40px rgba(0, 0, 0, 0.1);
	--glass-radius: 20px;
	--glass-inner-glow: inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

/* ========================================
   2. RESET & BASE
   ======================================== */
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

body {
	font-family: "Inter", -apple-system, system-ui, sans-serif;
	background: #1a1a1a;
	display: flex;
	justify-content: center;
	align-items: center;
	min-height: 100vh;
	overflow: hidden;
}

/* ========================================
   3. PHONE FRAME
   ======================================== */
.phone-bezel {
	width: 390px;
	height: 844px;
	border-radius: 44px;
	border: 8px solid #333;
	overflow: hidden;
	position: relative;
	box-shadow:
		0 0 0 2px #1a1a1a,
		0 0 60px rgba(0, 0, 0, 0.5);
	display: flex;
	flex-direction: column;
	background: linear-gradient(
		175deg,
		var(--cream) 0%,
		var(--tan) 35%,
		#ede4d8 70%,
		var(--tan-light) 100%
	);
}

.screen-container {
	flex: 1;
	overflow-y: auto;
	overflow-x: hidden;
	-webkit-overflow-scrolling: touch;
	position: relative;
	padding-bottom: 70px;
}

#app {
	min-height: 100%;
}

/* ========================================
   4. TAB BAR
   ======================================== */
.tab-bar {
	display: flex;
	align-items: center;
	background: linear-gradient(
		180deg,
		rgba(255, 255, 255, 0.45) 0%,
		rgba(255, 255, 255, 0.25) 50%,
		rgba(255, 255, 255, 0.35) 100%
	);
	backdrop-filter: blur(40px) saturate(2.2) brightness(1.08);
	-webkit-backdrop-filter: blur(40px) saturate(2.2) brightness(1.08);
	border: 1px solid rgba(255, 255, 255, 0.55);
	border-top: 1px solid rgba(255, 255, 255, 0.75);
	padding: 5px 6px;
	box-shadow:
		0 8px 32px rgba(0, 0, 0, 0.12),
		0 2px 8px rgba(0, 0, 0, 0.06),
		inset 0 1.5px 0 rgba(255, 255, 255, 0.7),
		inset 0 -1px 0 rgba(0, 0, 0, 0.03);
	position: absolute;
	bottom: 10px;
	left: 12px;
	right: 12px;
	border-radius: 28px;
	z-index: 50;
}

.tab-bar.hidden {
	display: none;
}

.tab-item {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1px;
	background: none;
	border: none;
	cursor: pointer;
	padding: 7px 4px 5px;
	color: var(--blue);
	opacity: 0.4;
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	-webkit-tap-highlight-color: transparent;
	border-radius: 20px;
	position: relative;
}

.tab-item.active {
	opacity: 1;
	background: linear-gradient(
		180deg,
		rgba(255, 255, 255, 0.75) 0%,
		rgba(255, 255, 255, 0.5) 100%
	);
	box-shadow:
		0 2px 12px rgba(0, 57, 83, 0.08),
		0 0 0 0.5px rgba(255, 255, 255, 0.6),
		inset 0 1px 0 rgba(255, 255, 255, 0.9),
		inset 0 -0.5px 0 rgba(0, 0, 0, 0.03);
}

.tab-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 24px;
}
.tab-label {
	font-size: 10px;
	font-weight: 600;
	font-family: "Inter", sans-serif;
	letter-spacing: 0.1px;
}
.tab-item.active .tab-label {
	font-weight: 700;
}

/* ========================================
   5. HEADERS
   ======================================== */

/* Curved header (Home) */
.curved-header {
	background: linear-gradient(180deg, var(--blue) 0%, var(--blue-light) 100%);
	padding: 50px 24px 30px;
	border-radius: 0;
	position: relative;
	overflow: hidden;
	box-shadow: 0 8px 32px rgba(0, 57, 83, 0.15);
}

.curved-header .spark {
	position: absolute;
	color: var(--pink);
	opacity: 0.6;
	font-size: 18px;
}

.curved-header .spark-1 {
	top: 20px;
	right: 30px;
	animation: sparkle 2s ease-in-out infinite;
}
.curved-header .spark-2 {
	top: 45px;
	right: 60px;
	animation: sparkle 2s ease-in-out infinite 0.5s;
	font-size: 12px;
}
.curved-header .spark-3 {
	bottom: 20px;
	left: 30px;
	animation: sparkle 2s ease-in-out infinite 1s;
	font-size: 14px;
}

/* Home header scene illustration */
.curved-header-home {
	padding-bottom: 60px;
}

.curved-header-tasks {
	padding-bottom: 60px;
}

.curved-header-tasks .greeting {
	font-size: 22px;
	font-weight: 800;
	letter-spacing: -0.5px;
}

.header-scene {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 100px;
	pointer-events: none;
}

.curved-header .logo {
	display: flex;
	align-items: center;
	line-height: 1;
}

.curved-header .greeting {
	color: var(--text-inverse);
	font-size: 20px;
	font-weight: 700;
	margin-top: 8px;
	letter-spacing: -0.3px;
}

.curved-header .header-actions {
	position: absolute;
	top: 50px;
	right: 24px;
	display: flex;
	gap: 12px;
}

/* Screen header (sub-pages) */
.screen-header {
	display: flex;
	align-items: center;
	padding: 50px 20px 16px;
	background: linear-gradient(
		180deg,
		rgba(247, 243, 238, 0.65) 0%,
		rgba(239, 232, 223, 0.45) 100%
	);
	backdrop-filter: blur(32px) saturate(1.8) brightness(1.05);
	-webkit-backdrop-filter: blur(32px) saturate(1.8) brightness(1.05);
	position: sticky;
	top: 0;
	z-index: 10;
	border-bottom: 1px solid rgba(255, 255, 255, 0.35);
	box-shadow:
		0 4px 20px rgba(0, 0, 0, 0.05),
		inset 0 -0.5px 0 rgba(0, 0, 0, 0.03);
}

.screen-header .back-btn {
	background: none;
	border: none;
	cursor: pointer;
	padding: 4px;
	margin-right: 8px;
	color: var(--blue);
	-webkit-tap-highlight-color: transparent;
}

.screen-header .back-btn:active {
	opacity: 0.6;
}

.screen-header h1 {
	font-size: 20px;
	font-weight: 700;
	color: var(--text-primary);
	letter-spacing: -0.3px;
}

.screen-header .header-right {
	margin-left: auto;
	display: flex;
	gap: 8px;
}

/* Profile header */
.profile-header {
	background: linear-gradient(180deg, var(--blue) 0%, var(--blue-light) 100%);
	padding: 50px 24px 80px;
	border-radius: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	position: relative;
	overflow: hidden;
	box-shadow: 0 8px 32px rgba(0, 57, 83, 0.15);
}

.profile-header .spark {
	position: absolute;
	color: var(--pink);
	opacity: 0.5;
}

.profile-header .spark-1 {
	top: 20px;
	left: 30px;
	font-size: 16px;
	animation: sparkle 2s ease-in-out infinite;
}
.profile-header .spark-2 {
	top: 40px;
	right: 40px;
	font-size: 20px;
	animation: sparkle 2s ease-in-out infinite 0.7s;
}
.profile-header .spark-3 {
	bottom: 60px;
	left: 30px;
	font-size: 14px;
	animation: sparkle 2s ease-in-out infinite 1s;
}

.profile-header .avatar {
	border: 3px solid var(--pink);
	margin-bottom: 12px;
}

.profile-header .name {
	color: var(--text-inverse);
	font-size: 20px;
	font-weight: 700;
}

.profile-header .address {
	color: rgba(255, 255, 255, 0.7);
	font-size: 13px;
	margin-top: 4px;
	display: flex;
	align-items: center;
	gap: 4px;
	justify-content: center;
}

/* ========================================
   6. CONTENT & LAYOUT
   ======================================== */
.content {
	padding: 20px;
}
.content-flush {
	padding-top: 0;
}
.content-booking {
	padding-top: 14px;
	padding-bottom: 40px;
}

/* ========================================
   7. TYPOGRAPHY
   ======================================== */
.heading-xl {
	font-size: 28px;
	font-weight: 900;
	color: var(--text-primary);
	letter-spacing: -0.5px;
	line-height: 1.1;
	margin-bottom: 8px;
}

.heading-lg {
	font-size: 22px;
	font-weight: 700;
	color: var(--text-primary);
	letter-spacing: -0.3px;
	margin-bottom: 8px;
}

.heading-md {
	font-size: 20px;
	font-weight: 700;
	color: var(--text-primary);
	margin-bottom: 16px;
}

.heading-section {
	font-size: 18px;
	font-weight: 700;
	color: var(--text-primary);
	letter-spacing: -0.3px;
	margin-bottom: 4px;
}

.section-title {
	font-size: 11px;
	font-weight: 700;
	color: var(--text-tertiary);
	text-transform: uppercase;
	letter-spacing: 1.2px;
	margin: 16px 0 10px;
}

.content-booking .section-title {
	margin: 12px 0 8px;
}

.section-desc {
	font-size: 14px;
	color: var(--text-secondary);
	margin-bottom: 20px;
	line-height: 1.5;
}

.body-text {
	font-size: 15px;
	color: var(--text-secondary);
	line-height: 1.6;
	margin-bottom: 20px;
}

.body-text-sm {
	font-size: 14px;
	color: var(--text-secondary);
	line-height: 1.5;
}

.text-meta {
	font-size: 12px;
	color: var(--text-tertiary);
	margin-top: 8px;
}

.text-muted {
	font-size: 13px;
	color: var(--text-tertiary);
}

.text-hint {
	font-size: 13px;
	color: var(--text-secondary);
}

/* ========================================
   8. CARDS
   ======================================== */
.card {
	background: var(--glass-bg);
	backdrop-filter: var(--glass-blur);
	-webkit-backdrop-filter: var(--glass-blur);
	border-radius: var(--glass-radius);
	padding: 16px;
	margin-bottom: 12px;
	border: 1px solid var(--glass-border);
	box-shadow: var(--glass-shadow), var(--glass-inner-glow);
	transition:
		transform 0.15s ease,
		box-shadow 0.15s ease;
	cursor: pointer;
}

.card:active {
	transform: scale(0.97);
}

.card-static {
	cursor: default;
}

.card-static:active {
	transform: none;
}

.card-centered {
	text-align: center;
	padding: 24px;
	cursor: default;
}

.card-centered:active {
	transform: none;
}

.card-compact {
	padding: 12px;
}

.card-accent {
	border-left: 4px solid var(--pink);
}

.card-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.card-title {
	font-size: 16px;
	font-weight: 600;
	color: var(--text-primary);
	margin-bottom: 4px;
	letter-spacing: -0.2px;
}

.card-subtitle {
	font-size: 13px;
	color: var(--text-secondary);
	line-height: 1.4;
}

/* ========================================
   9. BUTTONS
   ======================================== */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	font-family: "Inter", sans-serif;
	font-weight: 600;
	border: none;
	cursor: pointer;
	transition: all 0.15s ease;
	-webkit-tap-highlight-color: transparent;
}

.btn:active {
	transform: scale(0.96);
}

.btn-primary {
	background: var(--blue);
	color: var(--text-inverse);
	padding: 14px 24px;
	border-radius: var(--radius-full);
	font-size: 16px;
	width: 100%;
	box-shadow: var(--shadow-cta);
}

.btn-primary:active {
	box-shadow: 0 1px 4px rgba(0, 57, 83, 0.15);
}

.btn-secondary {
	background: var(--glass-bg-light);
	backdrop-filter: var(--glass-blur-light);
	-webkit-backdrop-filter: var(--glass-blur-light);
	color: var(--blue);
	padding: 12px 24px;
	border-radius: var(--radius-full);
	font-size: 15px;
	border: 1.5px solid rgba(0, 57, 83, 0.2);
	width: 100%;
}

.btn-pink {
	background: var(--pink);
	color: var(--blue);
	padding: 14px 24px;
	border-radius: var(--radius-full);
	font-size: 16px;
	width: 100%;
}

.btn-sm {
	padding: 8px 16px;
	font-size: 13px;
	width: auto;
}

.btn-icon {
	background: none;
	border: none;
	cursor: pointer;
	padding: 8px;
	color: var(--blue);
	border-radius: var(--radius-full);
	transition: background 0.15s;
	-webkit-tap-highlight-color: transparent;
}

.btn-icon:active {
	background: rgba(0, 57, 83, 0.08);
}

.btn-icon-inverse {
	background: none;
	border: none;
	cursor: pointer;
	padding: 8px;
	color: var(--text-inverse);
	border-radius: var(--radius-full);
	transition: background 0.15s;
	-webkit-tap-highlight-color: transparent;
}

.btn-icon-inverse:active {
	background: rgba(255, 255, 255, 0.15);
}

/* ========================================
   10. BADGES
   ======================================== */
.badge {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 3px 10px;
	border-radius: var(--radius-full);
	font-size: 11px;
	font-weight: 600;
}

.badge-pink {
	background: rgba(253, 222, 222, 0.75);
	color: var(--blue);
}
.badge-blue {
	background: rgba(208, 230, 254, 0.75);
	color: var(--blue);
}
.badge-green {
	background: rgba(232, 245, 233, 0.75);
	color: #2e7d32;
}
.badge-orange {
	background: rgba(255, 243, 224, 0.75);
	color: #e65100;
}
.badge-gray {
	background: rgba(245, 245, 245, 0.75);
	color: #666;
}
.badge-tan {
	background: rgba(239, 232, 223, 0.75);
	color: var(--text-primary);
}

.counter-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 24px;
	height: 24px;
	border-radius: var(--radius-full);
	background: var(--pink);
	color: var(--blue);
	font-size: 12px;
	font-weight: 700;
	padding: 0 6px;
}

/* ========================================
   11. FORM CONTROLS
   ======================================== */

/* Form Card — groups form fields in a glass container */
.form-card {
	background: var(--glass-bg);
	border: 1px solid var(--glass-border);
	border-radius: 16px;
	padding: 16px;
	margin-bottom: 12px;
	backdrop-filter: var(--glass-blur);
	-webkit-backdrop-filter: var(--glass-blur);
	box-shadow: var(--glass-shadow-sm), var(--glass-inner-glow);
}

/* Form Section Header */
.form-section-header {
	margin-bottom: 14px;
}

.form-section-title {
	font-size: 18px;
	font-weight: 700;
	color: var(--text-primary);
	letter-spacing: -0.3px;
	margin-bottom: 4px;
}

.form-section-desc {
	font-size: 13px;
	color: var(--text-secondary);
	line-height: 1.4;
}

/* Inputs — refined with Pink's Windows polish */
.input-group {
	margin-bottom: 14px;
}
.input-group:last-child {
	margin-bottom: 0;
}

.input-label {
	font-size: 11px;
	font-weight: 700;
	color: var(--text-tertiary);
	margin-bottom: 6px;
	display: block;
	text-transform: uppercase;
	letter-spacing: 0.8px;
}

.input-field {
	width: 100%;
	padding: 12px 14px;
	border: 1.5px solid var(--glass-border-subtle);
	border-radius: 12px;
	font-size: 15px;
	font-family: "Inter", sans-serif;
	color: var(--text-primary);
	background: rgba(255, 255, 255, 0.45);
	transition:
		border-color 0.2s,
		box-shadow 0.2s;
	outline: none;
}

.input-field:focus {
	border-color: var(--blue);
	box-shadow: 0 0 0 3px rgba(0, 57, 83, 0.08);
	background: rgba(255, 255, 255, 0.7);
}

.input-field::placeholder {
	color: var(--text-tertiary);
}

.input-spaced {
	margin-bottom: 10px;
}

textarea.input-field {
	resize: vertical;
	min-height: 80px;
}

/* Password toggle */
.password-wrapper {
	position: relative;
}

.password-toggle {
	position: absolute;
	right: 12px;
	top: 50%;
	transform: translateY(-50%);
	background: none;
	border: none;
	cursor: pointer;
	color: var(--text-tertiary);
	padding: 4px;
}

/* Segment Control */
.segment-control {
	display: flex;
	background: linear-gradient(
		180deg,
		rgba(240, 234, 226, 0.55) 0%,
		rgba(224, 216, 207, 0.45) 100%
	);
	backdrop-filter: blur(20px) saturate(1.6);
	-webkit-backdrop-filter: blur(20px) saturate(1.6);
	border-radius: 16px;
	padding: 4px;
	margin: 0 0 16px;
	border: 1px solid rgba(255, 255, 255, 0.4);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.5),
		0 2px 8px rgba(0, 0, 0, 0.04);
}

.segment-btn {
	flex: 1;
	padding: 9px 12px;
	font-size: 13px;
	font-weight: 600;
	font-family: "Inter", sans-serif;
	border: none;
	background: none;
	border-radius: 12px;
	cursor: pointer;
	color: var(--text-secondary);
	transition: all 0.2s;
	-webkit-tap-highlight-color: transparent;
}

.segment-btn.active {
	background: linear-gradient(
		180deg,
		rgba(255, 255, 255, 0.8) 0%,
		rgba(255, 255, 255, 0.6) 100%
	);
	color: var(--text-primary);
	box-shadow:
		0 2px 8px rgba(0, 0, 0, 0.06),
		0 0 0 0.5px rgba(255, 255, 255, 0.5),
		inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

/* Size Selector */
.size-selector {
	display: flex;
	gap: 8px;
	margin-bottom: 14px;
}

.size-pill {
	padding: 9px 22px;
	border-radius: var(--radius-full);
	border: 1.5px solid var(--glass-border-subtle);
	font-size: 13px;
	font-weight: 600;
	font-family: "Inter", sans-serif;
	cursor: pointer;
	background: rgba(255, 255, 255, 0.4);
	color: var(--text-primary);
	transition: all 0.15s;
	-webkit-tap-highlight-color: transparent;
}

.size-pill.active {
	background: var(--blue);
	color: var(--text-inverse);
	border-color: var(--blue);
}

/* Toggle */
.toggle-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 12px 0;
}

.toggle-label {
	font-size: 15px;
	font-weight: 500;
	color: var(--text-primary);
}

.toggle {
	width: 48px;
	height: 28px;
	border-radius: 14px;
	background: var(--border);
	position: relative;
	cursor: pointer;
	transition: background 0.2s;
}

.toggle.on {
	background: var(--blue);
}

.toggle-knob {
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: var(--white);
	position: absolute;
	top: 2px;
	left: 2px;
	transition: transform 0.2s;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
}

.toggle.on .toggle-knob {
	transform: translateX(20px);
}

/* ========================================
   12. LISTS & MENUS
   ======================================== */
.menu-list {
	padding: 0;
}

.menu-item {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 16px 20px;
	background: var(--glass-bg);
	backdrop-filter: var(--glass-blur);
	-webkit-backdrop-filter: var(--glass-blur);
	border-bottom: 1px solid var(--glass-border-subtle);
	cursor: pointer;
	transition: background 0.15s;
	-webkit-tap-highlight-color: transparent;
}

.menu-item:first-child {
	border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
.menu-item:last-child {
	border-radius: 0 0 var(--radius-lg) var(--radius-lg);
	border-bottom: none;
}
.menu-item:only-child {
	border-radius: var(--radius-lg);
}

.menu-item:active {
	background: rgba(239, 232, 223, 0.5);
}

.menu-item-icon {
	width: 36px;
	height: 36px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: var(--radius-sm);
	background: rgba(247, 243, 238, 0.7);
	flex-shrink: 0;
}

.menu-item-text {
	flex: 1;
}
.menu-item-label {
	font-size: 15px;
	font-weight: 500;
	color: var(--text-primary);
}
.menu-item-sublabel {
	font-size: 12px;
	color: var(--text-tertiary);
	margin-top: 2px;
}
.menu-item-chevron {
	color: var(--text-tertiary);
	flex-shrink: 0;
}

.menu-item-danger .menu-item-label {
	color: var(--error);
}

.menu-item-icon-pink {
	background: var(--pink-light);
}
.menu-item-icon-danger {
	background: #ffebee;
}

/* ========================================
   13. DETAIL COMPONENTS
   ======================================== */

/* Detail list — key-value rows used in visit detail, booking confirm, etc. */
.detail-list {
	width: 100%;
}

.detail-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 12px 0;
	border-bottom: 1px solid var(--border);
}

.detail-row:last-child {
	border-bottom: none;
}

.detail-label {
	font-size: 14px;
	color: var(--text-secondary);
}

.detail-value {
	font-size: 14px;
	font-weight: 600;
	color: var(--text-primary);
	text-align: right;
}

/* Info bar — small card with icon + text inline */
.info-bar {
	display: flex;
	align-items: center;
	gap: 8px;
	background: var(--glass-bg);
	border: 1px solid var(--glass-border);
	border-radius: var(--radius-md);
	padding: 12px;
	margin-top: 8px;
	box-shadow: var(--glass-shadow-sm), var(--glass-inner-glow);
	backdrop-filter: var(--glass-blur-light);
	-webkit-backdrop-filter: var(--glass-blur-light);
}

/* ========================================
   14. CALENDAR & BOOKING
   ======================================== */
.calendar {
	margin-bottom: 16px;
	background: var(--glass-bg);
	border: 1px solid var(--glass-border);
	border-radius: var(--glass-radius);
	padding: 16px;
	backdrop-filter: var(--glass-blur);
	-webkit-backdrop-filter: var(--glass-blur);
	box-shadow: var(--glass-shadow), var(--glass-inner-glow);
}
.calendar-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 10px;
}
.calendar-title {
	font-size: 15px;
	font-weight: 700;
	color: var(--text-primary);
}
.calendar-nav {
	display: flex;
	gap: 8px;
}
.calendar-nav button {
	background: none;
	border: none;
	cursor: pointer;
	padding: 4px;
	color: var(--blue);
}

.calendar-grid {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 2px;
	text-align: center;
}
.calendar-day-label {
	font-size: 11px;
	font-weight: 600;
	color: var(--text-tertiary);
	padding: 8px 0;
	text-transform: uppercase;
}

.calendar-day {
	padding: 8px 0;
	font-size: 13px;
	font-weight: 500;
	color: var(--text-primary);
	border-radius: var(--radius-full);
	cursor: pointer;
	transition: all 0.15s;
}

.calendar-day:hover {
	background: rgba(247, 243, 238, 0.6);
}
.calendar-day.today {
	background: rgba(253, 222, 222, 0.6);
	color: var(--blue);
	font-weight: 700;
}
.calendar-day.selected {
	background: var(--blue);
	color: var(--text-inverse);
}
.calendar-day.disabled {
	color: var(--text-tertiary);
	cursor: default;
}
.calendar-day.disabled:hover {
	background: none;
}
.calendar-day.empty {
	cursor: default;
}
.calendar-day.empty:hover {
	background: none;
}

/* Time Slots */
.time-slot {
	padding: 14px 16px;
	border: 1px solid var(--glass-border);
	border-radius: 14px;
	margin-bottom: 8px;
	cursor: pointer;
	transition: all 0.15s;
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 14px;
	font-weight: 500;
	color: var(--text-primary);
	background: var(--glass-bg);
	backdrop-filter: var(--glass-blur-light);
	-webkit-backdrop-filter: var(--glass-blur-light);
	box-shadow: var(--glass-shadow-sm), var(--glass-inner-glow);
}

.time-slot:active {
	transform: scale(0.98);
}
.time-slot.selected {
	border-color: var(--blue);
	background: var(--blue);
	color: var(--text-inverse);
}

/* Booking Step Indicator */
.booking-steps {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	margin-bottom: 16px;
	background: var(--glass-bg-light);
	border: 1px solid var(--glass-border-subtle);
	border-radius: 16px;
	padding: 10px 16px;
	backdrop-filter: var(--glass-blur-light);
	-webkit-backdrop-filter: var(--glass-blur-light);
	box-shadow: var(--glass-shadow-sm);
}

.booking-step {
	display: flex;
	align-items: center;
	gap: 5px;
}

.booking-step-dot {
	width: 24px;
	height: 24px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 11px;
	font-weight: 700;
	border: 1.5px solid var(--border);
	background: rgba(255, 255, 255, 0.6);
	color: var(--text-tertiary);
	transition: all 0.3s;
}

.booking-step.active .booking-step-dot {
	background: var(--blue);
	color: var(--text-inverse);
	border-color: var(--blue);
	box-shadow: 0 2px 8px rgba(0, 57, 83, 0.2);
}

.booking-step.completed .booking-step-dot {
	background: var(--pink);
	color: var(--blue);
	border-color: var(--pink);
}

.booking-step-label {
	font-size: 11px;
	font-weight: 600;
	color: var(--text-tertiary);
}

.booking-step.active .booking-step-label {
	color: var(--text-primary);
}

.booking-step.completed .booking-step-label {
	color: var(--text-secondary);
}

.booking-step-line {
	width: 20px;
	height: 2px;
	background: var(--border);
	border-radius: 1px;
}

.booking-step-line.completed {
	background: var(--pink);
}

/* Booking Handyman Mini Card */
.booking-handyman {
	display: flex;
	align-items: center;
	gap: 12px;
	background: var(--glass-bg);
	border: 1px solid var(--glass-border);
	border-radius: var(--radius-lg);
	padding: 12px 14px;
	margin-bottom: 14px;
	box-shadow: var(--glass-shadow-sm), var(--glass-inner-glow);
	backdrop-filter: var(--glass-blur);
	-webkit-backdrop-filter: var(--glass-blur);
}

.booking-handyman-info {
	flex: 1;
}

.booking-handyman-name {
	font-size: 15px;
	font-weight: 600;
	color: var(--text-primary);
}

.booking-handyman-label {
	font-size: 12px;
	color: var(--text-secondary);
	margin-top: 2px;
}

/* Help / Contact Bar */
.help-bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	background: var(--glass-bg-cream);
	border: 1px solid var(--glass-border);
	border-radius: var(--radius-md);
	padding: 12px 16px;
	backdrop-filter: var(--glass-blur-light);
	-webkit-backdrop-filter: var(--glass-blur-light);
	box-shadow: var(--glass-shadow-sm), var(--glass-inner-glow);
}

.help-bar-text {
	font-size: 13px;
	font-weight: 500;
	color: var(--text-secondary);
}

.help-bar-link {
	font-size: 13px;
	font-weight: 600;
	color: var(--blue);
	cursor: pointer;
	border: none;
	font-family: "Inter", sans-serif;
	display: flex;
	align-items: center;
	gap: 5px;
	padding: 6px 12px;
	border-radius: 20px;
	background: rgba(0, 57, 83, 0.06);
	transition: all 0.15s;
}

.help-bar-link:active {
	background: rgba(0, 57, 83, 0.12);
	transform: scale(0.97);
}

/* Task Selection Checkbox */
.task-checkbox {
	width: 24px;
	height: 24px;
	border-radius: var(--radius-sm);
	border: 2px solid var(--border);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	cursor: pointer;
	transition: all 0.15s;
	background: var(--white);
}

.task-checkbox.checked {
	background: var(--blue);
	border-color: var(--blue);
}

/* Task Selection Card (reuses task-card layout, adds checkbox) */
.task-select-card {
	background: var(--glass-bg);
	border-radius: var(--radius-md);
	padding: 14px;
	border: 1px solid var(--glass-border);
	box-shadow: var(--glass-shadow-sm), var(--glass-inner-glow);
	margin-bottom: 8px;
	display: flex;
	align-items: center;
	gap: 12px;
	cursor: pointer;
	transition: all 0.15s;
	-webkit-tap-highlight-color: transparent;
	backdrop-filter: var(--glass-blur-light);
	-webkit-backdrop-filter: var(--glass-blur-light);
}

.task-select-card:active {
	transform: scale(0.98);
}

.task-select-card.selected {
	border-color: rgba(0, 57, 83, 0.3);
	background: rgba(0, 57, 83, 0.06);
	box-shadow:
		0 2px 12px rgba(0, 57, 83, 0.08),
		var(--glass-inner-glow);
}

.task-select-card .task-card-content {
	flex: 1;
	min-width: 0;
}

/* Booking task count hint */
.booking-hint {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 10px 14px;
	background: rgba(253, 222, 222, 0.5);
	border: 1px solid var(--glass-border-subtle);
	border-radius: var(--radius-md);
	margin-bottom: 16px;
	font-size: 13px;
	font-weight: 500;
	color: var(--blue);
	backdrop-filter: var(--glass-blur-light);
	-webkit-backdrop-filter: var(--glass-blur-light);
}

/* Confirm task list */
.confirm-task-list {
	background: var(--glass-bg);
	border: 1px solid var(--glass-border);
	border-radius: 14px;
	padding: 4px 14px;
	backdrop-filter: var(--glass-blur-light);
	-webkit-backdrop-filter: var(--glass-blur-light);
	box-shadow: var(--glass-shadow-sm), var(--glass-inner-glow);
}

.confirm-task-item {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 0;
	border-bottom: 1px solid var(--glass-border-subtle);
}

.confirm-task-item:last-child {
	border-bottom: none;
}

.confirm-task-num {
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: var(--pink);
	color: var(--blue);
	font-size: 11px;
	font-weight: 700;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.confirm-task-name {
	font-size: 14px;
	font-weight: 500;
	color: var(--text-primary);
	flex: 1;
}

/* ========================================
   15. TASK COMPONENTS
   ======================================== */
.task-card {
	background: var(--glass-bg);
	border-radius: var(--radius-md);
	padding: 14px;
	border: 1px solid var(--glass-border);
	box-shadow: var(--glass-shadow-sm), var(--glass-inner-glow);
	margin-bottom: 8px;
	display: flex;
	align-items: flex-start;
	gap: 12px;
	cursor: pointer;
	transition: transform 0.15s;
	-webkit-tap-highlight-color: transparent;
	backdrop-filter: var(--glass-blur-light);
	-webkit-backdrop-filter: var(--glass-blur-light);
}

.task-card:active {
	transform: scale(0.98);
}

.task-card-content {
	flex: 1;
	min-width: 0;
}

.task-card-title {
	font-size: 15px;
	font-weight: 600;
	color: var(--text-primary);
	margin-bottom: 4px;
}

.task-card-desc {
	font-size: 13px;
	color: var(--text-secondary);
	line-height: 1.3;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.task-card-meta {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-top: 8px;
}

.task-thumb {
	width: 40px;
	height: 40px;
	border-radius: 10px;
	background: linear-gradient(
		135deg,
		rgba(255, 255, 255, 0.55) 0%,
		rgba(239, 232, 223, 0.45) 100%
	);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--text-tertiary);
	flex-shrink: 0;
	border: 1px solid rgba(255, 255, 255, 0.45);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.6),
		0 2px 6px rgba(0, 0, 0, 0.04);
}

.photo-count {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-size: 12px;
	color: var(--text-tertiary);
}

/* Priority Badge */
.priority-badge {
	width: 28px;
	height: 28px;
	border-radius: var(--radius-full);
	background: linear-gradient(
		180deg,
		rgba(255, 255, 255, 0.7) 0%,
		rgba(239, 232, 223, 0.6) 100%
	);
	color: var(--blue);
	font-size: 13px;
	font-weight: 700;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow:
		0 1px 4px rgba(0, 0, 0, 0.06),
		inset 0 1px 0 rgba(255, 255, 255, 0.7);
	flex-shrink: 0;
	border: 1.5px solid var(--border);
}

/* Drag Handle */
.task-card-drag {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 4px;
	color: var(--text-tertiary);
	cursor: grab;
	flex-shrink: 0;
	touch-action: none;
	-webkit-tap-highlight-color: transparent;
}

.task-card-drag:active {
	cursor: grabbing;
}

/* Task Card — drag states */
.task-card.dragging {
	opacity: 0.5;
	transform: scale(0.97);
	box-shadow: var(--shadow-lg);
	z-index: 100;
	position: relative;
}

.task-card.drag-over {
	border-top: 2px solid var(--pink);
	padding-top: 12px;
}

/* Visit Group (tasks grouped under an upcoming visit) */
.visit-group {
	background: var(--glass-bg);
	border-radius: var(--radius-lg);
	border: 1px solid var(--glass-border);
	border-left: 4px solid var(--pink);
	padding: 16px;
	margin-bottom: 16px;
	box-shadow: var(--glass-shadow), var(--glass-inner-glow);
	backdrop-filter: var(--glass-blur);
	-webkit-backdrop-filter: var(--glass-blur);
}

.visit-group-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 10px;
}

.visit-group-title {
	font-size: 11px;
	font-weight: 700;
	color: var(--text-tertiary);
	text-transform: uppercase;
	letter-spacing: 1.2px;
	display: flex;
	align-items: center;
	gap: 6px;
}

.visit-group-info {
	display: flex;
	align-items: center;
	gap: 6px;
	padding-top: 10px;
	border-top: 1px solid rgba(255, 255, 255, 0.35);
	margin-top: 6px;
}

.visit-group-footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-top: 10px;
	border-top: 1px solid rgba(255, 255, 255, 0.35);
	margin-top: 6px;
}

.visit-group-info-text {
	font-size: 12px;
	color: var(--text-tertiary);
	display: flex;
	align-items: center;
	gap: 4px;
}

.visit-group-edit-btn {
	display: flex;
	align-items: center;
	gap: 4px;
	font-size: 12px;
	font-weight: 600;
	font-family: "Inter", sans-serif;
	color: var(--blue);
	background: rgba(255, 255, 255, 0.5);
	border: 1px solid rgba(0, 57, 83, 0.12);
	border-radius: var(--radius-full);
	padding: 5px 12px;
	cursor: pointer;
	transition: all 0.15s;
	-webkit-tap-highlight-color: transparent;
}

.visit-group-edit-btn:active {
	transform: scale(0.95);
	background: rgba(255, 255, 255, 0.7);
}

/* Task remove button (X) */
.task-remove-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	border: none;
	background: rgba(0, 57, 83, 0.06);
	cursor: pointer;
	flex-shrink: 0;
	transition: all 0.15s;
	-webkit-tap-highlight-color: transparent;
}

.task-remove-btn:active {
	background: rgba(239, 68, 68, 0.15);
	transform: scale(0.9);
}

/* Task add button (+) */
.task-add-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: rgba(0, 57, 83, 0.08);
	flex-shrink: 0;
}

/* Task cards nested inside visit group — subtle inner glass, no blur */
.visit-group .task-card {
	margin-bottom: 6px;
	border: 1px solid rgba(255, 255, 255, 0.35);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5);
	background: rgba(255, 255, 255, 0.35);
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
	border-radius: 14px;
}

.visit-group .task-card:last-of-type {
	margin-bottom: 0;
}

/* Extra-small avatar for compact display */
.avatar-xs {
	width: 24px;
	height: 24px;
	font-size: 10px;
}

/* ========================================
   16. VISIT COMPONENTS
   ======================================== */
.visit-card {
	background: var(--glass-bg-heavy);
	border-radius: var(--radius-lg);
	padding: 16px;
	border: 1px solid var(--glass-border);
	box-shadow: var(--glass-shadow), var(--glass-inner-glow);
	margin-bottom: 12px;
	cursor: pointer;
	transition: transform 0.15s;
	-webkit-tap-highlight-color: transparent;
	backdrop-filter: var(--glass-blur);
	-webkit-backdrop-filter: var(--glass-blur);
}

.visit-card:active {
	transform: scale(0.98);
}

.visit-card-header {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 12px;
}

.visit-card-info {
	flex: 1;
}

.visit-card-date {
	font-size: 15px;
	font-weight: 600;
	color: var(--text-primary);
}

.visit-card-time {
	font-size: 13px;
	color: var(--text-secondary);
	margin-top: 2px;
	display: flex;
	align-items: center;
	gap: 4px;
}

.visit-card-tasks {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	padding-top: 12px;
	border-top: 1px solid var(--border);
}

/* ========================================
   17. INVOICE / BILLING
   ======================================== */
.invoice-card {
	background: var(--glass-bg);
	border-radius: var(--radius-md);
	border: 1px solid var(--glass-border);
	box-shadow: var(--glass-shadow), var(--glass-inner-glow);
	margin-bottom: 10px;
	overflow: hidden;
	backdrop-filter: var(--glass-blur);
	-webkit-backdrop-filter: var(--glass-blur);
}

.invoice-header {
	padding: 14px 16px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}

.invoice-header:active {
	background: var(--tan-light);
}

.invoice-desc {
	font-size: 14px;
	font-weight: 600;
	color: var(--text-primary);
}
.invoice-date {
	font-size: 12px;
	color: var(--text-tertiary);
	margin-top: 2px;
}

.invoice-right {
	display: flex;
	align-items: center;
	gap: 8px;
}

.invoice-amount {
	font-size: 16px;
	font-weight: 700;
	color: var(--text-primary);
}

.invoice-details {
	padding: 0 16px 14px;
	border-top: 1px solid var(--border);
	display: none;
}

.invoice-details.open {
	display: block;
	padding-top: 12px;
}

.invoice-line {
	display: flex;
	justify-content: space-between;
	padding: 4px 0;
	font-size: 13px;
	color: var(--text-secondary);
}

/* ========================================
   18. PLANS & MEMBERSHIP
   ======================================== */

/* Pricing Cards Container */
.pricing-cards {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin-bottom: 8px;
}

/* Individual Pricing Card */
.pricing-card {
	border: 1px solid var(--glass-border);
	border-radius: 16px;
	padding: 18px;
	position: relative;
	background: var(--glass-bg);
	box-shadow: var(--glass-shadow-sm), var(--glass-inner-glow);
	backdrop-filter: var(--glass-blur);
	-webkit-backdrop-filter: var(--glass-blur);
	transition: all 0.2s;
}

/* Current Plan — solid blue */
.pricing-card-current {
	border-color: var(--blue);
	background: linear-gradient(135deg, var(--blue) 0%, var(--blue-light) 100%);
	box-shadow: 0 8px 24px rgba(0, 57, 83, 0.2);
}

.pricing-card-current .pricing-name,
.pricing-card-current .pricing-price,
.pricing-card-current .pricing-feature,
.pricing-card-current .pricing-feature span {
	color: var(--text-inverse);
}
.pricing-card-current .pricing-interval {
	color: rgba(255, 255, 255, 0.65);
}

/* Best Value — outlined with accent */
.pricing-card-best {
	border: 2px solid var(--pink);
}

/* Pricing Badge */
.pricing-badge {
	display: inline-block;
	background: var(--pink);
	color: var(--blue);
	font-size: 9px;
	font-weight: 800;
	padding: 3px 10px;
	border-radius: 20px;
	letter-spacing: 0.8px;
	margin-bottom: 10px;
	text-transform: uppercase;
}

.pricing-badge-best {
	background: linear-gradient(135deg, #f9abac 0%, #f7c4c4 100%);
}

.pricing-badge-current {
	background: rgba(255, 255, 255, 0.2);
	color: var(--text-inverse);
}

/* Card Header */
.pricing-card-header {
	margin-bottom: 14px;
}

.pricing-name {
	font-size: 15px;
	font-weight: 700;
	color: var(--text-primary);
	margin-bottom: 4px;
}

.pricing-price-row {
	display: flex;
	align-items: baseline;
	gap: 2px;
}

.pricing-price {
	font-size: 30px;
	font-weight: 900;
	color: var(--text-primary);
	letter-spacing: -1px;
	line-height: 1.1;
}

.pricing-interval {
	font-size: 14px;
	font-weight: 400;
	color: var(--text-secondary);
}

.pricing-savings {
	display: inline-block;
	margin-top: 6px;
	font-size: 12px;
	font-weight: 700;
	color: #2e7d32;
	background: rgba(232, 245, 233, 0.8);
	padding: 2px 10px;
	border-radius: 20px;
}

/* Card Features */
.pricing-card-features {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding-top: 12px;
	border-top: 1px solid var(--glass-border-subtle);
}

.pricing-card-current .pricing-card-features {
	border-top-color: rgba(255, 255, 255, 0.15);
}

.pricing-feature {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	font-weight: 500;
	color: var(--text-secondary);
}

.pricing-feature span {
	color: var(--text-primary);
}

/* Card CTA */
.pricing-cta {
	display: block;
	width: 100%;
	margin-top: 14px;
	padding: 10px;
	border: 1.5px solid var(--blue);
	border-radius: 12px;
	background: transparent;
	color: var(--blue);
	font-size: 14px;
	font-weight: 700;
	font-family: "Inter", sans-serif;
	cursor: pointer;
	transition: all 0.15s;
	text-align: center;
}

.pricing-cta:active {
	background: rgba(0, 57, 83, 0.06);
	transform: scale(0.98);
}

.pricing-cta-best {
	background: var(--blue);
	color: var(--text-inverse);
	border-color: var(--blue);
}

.pricing-cta-best:active {
	background: var(--blue-light);
}

/* Legacy plan-card (keep for backwards compat) */
.plan-name {
	font-size: 18px;
	font-weight: 700;
	color: var(--text-primary);
	margin-bottom: 4px;
}
.plan-price {
	font-size: 28px;
	font-weight: 900;
	color: var(--text-primary);
	letter-spacing: -1px;
}
.plan-interval {
	font-size: 14px;
	font-weight: 400;
	color: var(--text-secondary);
}
.plan-detail {
	font-size: 13px;
	color: var(--text-secondary);
	margin-top: 8px;
}

/* Benefit Item */
.benefit-item {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 0;
}

.benefit-check {
	width: 24px;
	height: 24px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.benefit-text {
	font-size: 15px;
	font-weight: 500;
	color: var(--text-primary);
	line-height: 1.3;
}

/* ========================================
   19. REFERRAL
   ======================================== */
.referral-hero {
	background: var(--blue);
	border-radius: var(--radius-xl);
	padding: 32px 24px;
	text-align: center;
	color: var(--text-inverse);
	margin-bottom: 24px;
	position: relative;
	overflow: hidden;
	box-shadow: var(--glass-shadow-elevated);
}

.referral-hero .spark {
	position: absolute;
	color: var(--pink);
	opacity: 0.5;
}
.referral-hero .spark-1 {
	top: 12px;
	left: 20px;
	font-size: 20px;
	animation: sparkle 2.5s ease-in-out infinite;
}
.referral-hero .spark-2 {
	bottom: 16px;
	right: 24px;
	font-size: 16px;
	animation: sparkle 2.5s ease-in-out infinite 0.8s;
}
.referral-hero .spark-3 {
	top: 30px;
	right: 40px;
	font-size: 12px;
	animation: sparkle 2.5s ease-in-out infinite 1.5s;
}

.referral-hero h2 {
	font-size: 24px;
	font-weight: 900;
	margin-bottom: 8px;
	letter-spacing: -0.5px;
}
.referral-hero p {
	font-size: 14px;
	opacity: 0.8;
	line-height: 1.4;
}

.code-box {
	background: var(--glass-bg-heavy);
	border: 2px dashed var(--border-strong);
	border-radius: var(--radius-md);
	padding: 16px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 16px;
	backdrop-filter: var(--glass-blur-light);
	-webkit-backdrop-filter: var(--glass-blur-light);
}

.code-text {
	font-size: 16px;
	font-weight: 700;
	color: var(--text-primary);
	letter-spacing: 1px;
}

.step-list {
	padding: 0;
}

.step-item {
	display: flex;
	gap: 16px;
	padding: 12px 0;
	position: relative;
}

.step-number {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: var(--pink);
	color: var(--blue);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 14px;
	font-weight: 700;
	flex-shrink: 0;
	position: relative;
	z-index: 1;
}

.step-connector {
	position: absolute;
	left: 15px;
	top: 44px;
	bottom: -12px;
	width: 2px;
	background: var(--pink-light);
}

.step-content {
	flex: 1;
	padding-top: 4px;
}
.step-title {
	font-size: 15px;
	font-weight: 600;
	color: var(--text-primary);
	margin-bottom: 2px;
}
.step-desc {
	font-size: 13px;
	color: var(--text-secondary);
	line-height: 1.4;
}

/* ========================================
   20. ONBOARDING
   ======================================== */
.onboarding-screen {
	min-height: 100%;
	display: flex;
	flex-direction: column;
	background: var(--tan);
	padding: 60px 24px 40px;
}

.onboarding-progress {
	display: flex;
	gap: 4px;
	margin-bottom: 32px;
}

.progress-dot {
	height: 4px;
	flex: 1;
	border-radius: 2px;
	background: var(--border);
	transition: background 0.3s;
}

.progress-dot.active {
	background: var(--blue);
}
.progress-dot.completed {
	background: var(--pink);
}

.onboarding-content {
	flex: 1;
	display: flex;
	flex-direction: column;
}

.onboarding-title {
	font-size: 28px;
	font-weight: 900;
	color: var(--text-primary);
	margin-bottom: 8px;
	letter-spacing: -0.5px;
	line-height: 1.1;
}

.onboarding-subtitle {
	font-size: 15px;
	color: var(--text-secondary);
	line-height: 1.5;
	margin-bottom: 32px;
}

.onboarding-footer {
	margin-top: auto;
	padding-top: 24px;
}

.onboarding-back {
	margin-bottom: 12px;
	margin-left: -8px;
}

.onboarding-center {
	text-align: center;
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.welcome-symbol {
	font-size: 48px;
	margin-bottom: 16px;
	animation: pulse 2s ease-in-out infinite;
	text-align: center;
}

.meet-symbol {
	font-size: 20px;
	margin-bottom: 16px;
	animation: sparkle 1.5s ease-in-out infinite;
	text-align: center;
}

/* ========================================
   21. AVATAR
   ======================================== */
.avatar {
	width: 60px;
	height: 60px;
	border-radius: 50%;
	background: var(--pink);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 24px;
	font-weight: 700;
	color: var(--blue);
	flex-shrink: 0;
}

.avatar-sm {
	width: 40px;
	height: 40px;
	font-size: 16px;
}
.avatar-lg {
	width: 80px;
	height: 80px;
	font-size: 32px;
}

/* ========================================
   22. HANDYMAN CARD
   ======================================== */
.handyman-card {
	background: var(--glass-bg);
	border-radius: var(--radius-xl);
	padding: 24px;
	border: 1px solid var(--glass-border);
	box-shadow: var(--glass-shadow), var(--glass-inner-glow);
	text-align: center;
	backdrop-filter: var(--glass-blur);
	-webkit-backdrop-filter: var(--glass-blur);
}

.handyman-card .avatar {
	margin: 0 auto 16px;
}
.handyman-card .name {
	font-size: 20px;
	font-weight: 700;
	color: var(--text-primary);
	margin-bottom: 4px;
}
.handyman-card .experience {
	font-size: 13px;
	color: var(--text-secondary);
	margin-bottom: 12px;
}
.handyman-card .bio {
	font-size: 14px;
	color: var(--text-secondary);
	line-height: 1.5;
}
.handyman-card .rating {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 4px;
	margin-bottom: 12px;
}
.handyman-card .rating-value {
	font-size: 13px;
	color: var(--text-secondary);
	margin-left: 4px;
}

/* Founder Letter */
.founder-letter {
	background: var(--glass-bg-cream);
	border-radius: var(--radius-lg);
	padding: 24px;
	border-left: 4px solid var(--pink);
	margin-bottom: 24px;
	backdrop-filter: var(--glass-blur-light);
	-webkit-backdrop-filter: var(--glass-blur-light);
	border-top: 1px solid var(--glass-border-subtle);
	border-right: 1px solid var(--glass-border-subtle);
	border-bottom: 1px solid var(--glass-border-subtle);
	box-shadow: var(--glass-shadow-sm), var(--glass-inner-glow);
}

.founder-letter p {
	font-size: 14px;
	font-style: italic;
	color: var(--text-secondary);
	line-height: 1.6;
}

/* ========================================
   23. PHOTO UPLOAD
   ======================================== */
.photo-upload {
	border: 1.5px dashed rgba(0, 57, 83, 0.15);
	border-radius: 12px;
	padding: 24px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 4px;
	color: var(--text-tertiary);
	cursor: pointer;
	transition: all 0.2s;
	background: rgba(255, 255, 255, 0.35);
}

.photo-upload:active {
	border-color: var(--blue);
	background: rgba(255, 255, 255, 0.5);
}

.photo-upload-icon {
	width: 44px;
	height: 44px;
	border-radius: 12px;
	background: rgba(0, 57, 83, 0.04);
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 4px;
}

.photo-upload-text {
	font-size: 14px;
	font-weight: 600;
	color: var(--text-secondary);
}

.photo-upload-hint {
	font-size: 11px;
	font-weight: 400;
	color: var(--text-tertiary);
}

/* Task Detail Photo Grid */
.task-detail-photo-grid {
	display: flex;
	gap: 8px;
}

.task-detail-photo-placeholder {
	flex: 1;
	aspect-ratio: 1;
	border-radius: 12px;
	background: linear-gradient(
		135deg,
		rgba(255, 255, 255, 0.5) 0%,
		rgba(239, 232, 223, 0.4) 100%
	);
	border: 1px solid var(--glass-border-subtle);
	display: flex;
	align-items: center;
	justify-content: center;
}

/* Task Detail Parts */
.task-detail-part {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 10px 0;
}

.task-detail-part-border {
	border-bottom: 1px solid var(--glass-border-subtle);
}

.task-detail-part-info {
	flex: 1;
}

/* Editable Rows — tappable fields in edit views */
.editable-row {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 14px 0;
	border-bottom: 1px solid var(--glass-border-subtle);
	cursor: pointer;
	transition: background 0.15s;
	-webkit-tap-highlight-color: transparent;
}

.editable-row:active {
	background: rgba(0, 57, 83, 0.03);
	margin: 0 -16px;
	padding-left: 16px;
	padding-right: 16px;
	border-radius: 10px;
}

.editable-row-last {
	border-bottom: none;
	cursor: default;
}

.editable-row-last:active {
	background: none;
	margin: 0;
	padding-left: 0;
	padding-right: 0;
}

.editable-row-icon {
	width: 32px;
	height: 32px;
	border-radius: 10px;
	background: rgba(0, 57, 83, 0.05);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.editable-row-content {
	flex: 1;
}

.editable-row-label {
	font-size: 11px;
	font-weight: 600;
	color: var(--text-tertiary);
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.editable-row-value {
	font-size: 15px;
	font-weight: 600;
	color: var(--text-primary);
	margin-top: 1px;
}

.editable-row-chevron {
	transform: rotate(180deg);
	opacity: 0.4;
}

/* ========================================
   24. QUICK ACTIONS
   ======================================== */
.quick-actions {
	display: flex;
	gap: 10px;
	overflow-x: auto;
	padding-bottom: 4px;
	margin-bottom: 20px;
	-ms-overflow-style: none;
	scrollbar-width: none;
}

.quick-actions::-webkit-scrollbar {
	display: none;
}

.quick-action {
	flex-shrink: 0;
	padding: 10px 16px;
	background: var(--glass-bg);
	border: 1px solid var(--glass-border);
	border-radius: var(--radius-full);
	font-size: 13px;
	font-weight: 600;
	font-family: "Inter", sans-serif;
	color: var(--text-primary);
	cursor: pointer;
	display: flex;
	align-items: center;
	gap: 6px;
	transition: all 0.15s;
	white-space: nowrap;
	-webkit-tap-highlight-color: transparent;
	box-shadow: var(--glass-shadow-sm), var(--glass-inner-glow);
	backdrop-filter: var(--glass-blur-light);
	-webkit-backdrop-filter: var(--glass-blur-light);
}

.quick-action:active {
	transform: scale(0.96);
	background: var(--tan-light);
}

/* ========================================
   25. MAP AREA
   ======================================== */
.map-area {
	width: 100%;
	height: 200px;
	border-radius: var(--radius-lg);
	background: linear-gradient(135deg, var(--blue-lighter) 0%, #a8d4f0 100%);
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	overflow: hidden;
	margin-bottom: 16px;
}

.map-pin {
	position: absolute;
	animation: map-bounce 1s ease-in-out infinite;
}
.map-pin-1 {
	top: 40%;
	left: 45%;
}
.map-pin-2 {
	top: 55%;
	left: 55%;
	animation-delay: 0.5s;
}

.map-label {
	position: absolute;
	bottom: 12px;
	background: rgba(0, 57, 83, 0.8);
	color: white;
	padding: 6px 14px;
	border-radius: var(--radius-full);
	font-size: 12px;
	font-weight: 600;
}

/* ========================================
   26. PRESET BUTTONS
   ======================================== */
.presets-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 8px;
	margin-bottom: 16px;
}

.preset-btn {
	padding: 12px;
	background: var(--glass-bg);
	border: 1px solid var(--glass-border);
	border-radius: var(--radius-md);
	font-size: 13px;
	font-weight: 500;
	font-family: "Inter", sans-serif;
	color: var(--text-primary);
	cursor: pointer;
	display: flex;
	align-items: center;
	gap: 8px;
	transition: all 0.15s;
	-webkit-tap-highlight-color: transparent;
	box-shadow: var(--glass-shadow-sm), var(--glass-inner-glow);
	backdrop-filter: var(--glass-blur-light);
	-webkit-backdrop-filter: var(--glass-blur-light);
}

.preset-btn:active {
	transform: scale(0.96);
	background: var(--tan-light);
}

/* ========================================
   27. EMPTY STATES
   ======================================== */
.empty-state {
	text-align: center;
	padding: 48px 24px;
	color: var(--text-tertiary);
}

.empty-state-icon {
	font-size: 48px;
	margin-bottom: 12px;
	opacity: 0.4;
}
.empty-state-text {
	font-size: 15px;
	line-height: 1.5;
}

/* ========================================
   28. SKELETON LOADING
   ======================================== */
.skeleton {
	background: linear-gradient(
		90deg,
		var(--border) 25%,
		var(--tan-light) 50%,
		var(--border) 75%
	);
	background-size: 200% 100%;
	animation: shimmer 1.5s infinite;
	border-radius: var(--radius-sm);
}

/* ========================================
   29. FAB
   ======================================== */
.fab {
	position: absolute;
	bottom: 76px;
	right: 20px;
	width: 52px;
	height: 52px;
	border-radius: 50%;
	background: var(--blue);
	color: var(--text-inverse);
	border: none;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow:
		0 4px 16px rgba(0, 57, 83, 0.3),
		0 8px 24px rgba(0, 57, 83, 0.15);
	transition:
		transform 0.2s,
		box-shadow 0.2s;
	z-index: 100;
	-webkit-tap-highlight-color: transparent;
}

.fab:active {
	transform: scale(0.9);
	box-shadow: 0 2px 8px rgba(0, 57, 83, 0.3);
}

/* ========================================
   30. HERO SYMBOLS
   ======================================== */
.hero-symbol {
	font-size: 48px;
	margin-bottom: 12px;
	text-align: center;
}

.hero-emoji {
	font-size: 32px;
	margin-bottom: 8px;
	text-align: center;
}

/* ========================================
   31. SPACERS
   ======================================== */
.spacer-xs {
	height: 8px;
}
.spacer-sm {
	height: 12px;
}
.spacer-md {
	height: 16px;
}
.spacer-lg {
	height: 20px;
}
.spacer-xl {
	height: 24px;
}
.spacer-2xl {
	height: 32px;
}

/* ========================================
   32. CTA SECTION
   ======================================== */
.cta-section {
	padding: 12px 0;
}

/* ========================================
   32b. QUICK ACTION PILLS
   ======================================== */
.quick-pills {
	display: flex;
	gap: 8px;
	overflow-x: auto;
	padding: 0 20px 4px;
	margin: 0 -20px 20px;
	-ms-overflow-style: none;
	scrollbar-width: none;
}

.quick-pills::-webkit-scrollbar {
	display: none;
}

.quick-pill {
	flex-shrink: 0;
	padding: 10px 16px;
	background: var(--glass-bg);
	border: 1px solid var(--glass-border);
	border-radius: var(--radius-full);
	font-size: 13px;
	font-weight: 600;
	font-family: "Inter", sans-serif;
	color: var(--blue);
	cursor: pointer;
	display: flex;
	align-items: center;
	gap: 6px;
	white-space: nowrap;
	transition: all 0.15s;
	-webkit-tap-highlight-color: transparent;
	box-shadow: var(--glass-shadow-sm), var(--glass-inner-glow);
	backdrop-filter: var(--glass-blur-light);
	-webkit-backdrop-filter: var(--glass-blur-light);
}

.quick-pill:active {
	transform: scale(0.95);
	background: var(--cream);
}

.quick-pill-primary {
	background: var(--blue);
	color: var(--text-inverse);
	border-color: var(--blue);
	box-shadow: var(--shadow-cta);
}

.quick-pill-primary:active {
	background: #002a3f;
}

/* ========================================
   32c. COMPACT VISIT CARD SUMMARY
   ======================================== */
.visit-card-summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-top: 12px;
	border-top: 1px solid var(--border);
}

.visit-card-summary-text {
	font-size: 13px;
	font-weight: 600;
	color: var(--text-primary);
	display: flex;
	align-items: center;
	gap: 6px;
}

.visit-card-summary-preview {
	font-size: 12px;
	color: var(--text-secondary);
	font-weight: 400;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 160px;
}

/* ========================================
   32d. RECOMMENDED TASKS SECTION
   ======================================== */
.recommended-section {
	margin-top: 10px;
	margin-bottom: 20px;
}

.recommended-separator {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 16px;
}

.recommended-separator-line {
	flex: 1;
	height: 1px;
	background: rgba(0, 57, 83, 0.1);
}

.recommended-header {
	margin-bottom: 14px;
}

.recommended-title {
	font-size: 18px;
	font-weight: 800;
	color: var(--text-primary);
	letter-spacing: -0.3px;
	line-height: 1.2;
}

.recommended-subtitle {
	font-size: 13px;
	color: var(--text-secondary);
	margin-top: 3px;
}

.tag-filters {
	display: flex;
	gap: 8px;
	overflow-x: auto;
	padding: 0 20px 4px;
	margin: 0 -20px 14px;
	-ms-overflow-style: none;
	scrollbar-width: none;
}

.tag-filters::-webkit-scrollbar {
	display: none;
}

.tag-pill {
	flex-shrink: 0;
	padding: 8px 14px;
	border-radius: var(--radius-full);
	font-family: "Inter", sans-serif;
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
	white-space: nowrap;
	transition: all 0.15s;
	-webkit-tap-highlight-color: transparent;
	border: 1px solid var(--glass-border);
	background: var(--glass-bg-light);
	color: var(--blue);
	backdrop-filter: var(--glass-blur-light);
	-webkit-backdrop-filter: var(--glass-blur-light);
	box-shadow: var(--glass-shadow-sm);
}

.tag-pill:active {
	transform: scale(0.95);
}

.tag-pill-active {
	background: var(--blue);
	color: var(--text-inverse);
	border-color: var(--blue);
}

.recommended-carousel {
	display: flex;
	gap: 12px;
	overflow-x: auto;
	padding: 0 20px 4px;
	margin: 0 -20px;
	-ms-overflow-style: none;
	scrollbar-width: none;
}

.recommended-carousel::-webkit-scrollbar {
	display: none;
}

.recommended-card {
	flex-shrink: 0;
	width: 240px;
	border-radius: var(--radius-lg);
	border: 1.5px solid var(--blue);
	background: var(--glass-bg);
	overflow: hidden;
	cursor: pointer;
	transition: transform 0.15s;
	-webkit-tap-highlight-color: transparent;
	backdrop-filter: var(--glass-blur);
	-webkit-backdrop-filter: var(--glass-blur);
	box-shadow: var(--glass-shadow), var(--glass-inner-glow);
}

.recommended-card:active {
	transform: scale(0.97);
}

.recommended-card-body {
	padding: 14px 14px 12px;
}

.recommended-card-priority {
	display: flex;
	align-items: center;
	gap: 6px;
	margin-bottom: 6px;
}

.recommended-card-dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
}

.recommended-card-priority-label {
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.3px;
}

.recommended-card-title {
	font-size: 15px;
	font-weight: 700;
	color: var(--blue);
	line-height: 1.3;
	letter-spacing: -0.2px;
}

.recommended-card-desc {
	font-size: 12px;
	color: rgba(0, 57, 83, 0.5);
	line-height: 1.4;
	margin-top: 4px;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.recommended-card-footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 10px 14px;
	background: var(--blue);
	border-top: 1.5px solid var(--blue);
}

.recommended-card-footer-text {
	font-size: 13px;
	font-weight: 600;
	color: var(--text-inverse);
}

/* Priority colors */
.priority-preventive .recommended-card-dot {
	background: #3b82f6;
}
.priority-preventive .recommended-card-priority-label {
	color: #2563eb;
}
.priority-safety .recommended-card-dot {
	background: #f97316;
}
.priority-safety .recommended-card-priority-label {
	color: #ea580c;
}
.priority-risk .recommended-card-dot {
	background: #ef4444;
}
.priority-risk .recommended-card-priority-label {
	color: #dc2626;
}
.priority-maintenance .recommended-card-dot {
	background: #78716c;
}
.priority-maintenance .recommended-card-priority-label {
	color: #57534e;
}
.priority-upgrade .recommended-card-dot {
	background: #8b5cf6;
}
.priority-upgrade .recommended-card-priority-label {
	color: #7c3aed;
}
.priority-routine .recommended-card-dot {
	background: #22c55e;
}
.priority-routine .recommended-card-priority-label {
	color: #16a34a;
}
.priority-repair .recommended-card-dot {
	background: #f59e0b;
}
.priority-repair .recommended-card-priority-label {
	color: #d97706;
}

/* ========================================
   33. UTILITY CLASSES
   ======================================== */
.flex {
	display: flex;
}
.flex-col {
	flex-direction: column;
}
.items-center {
	align-items: center;
}
.justify-between {
	justify-content: space-between;
}
.gap-1 {
	gap: 4px;
}
.gap-2 {
	gap: 8px;
}
.gap-3 {
	gap: 12px;
}
.gap-4 {
	gap: 16px;
}
.mt-1 {
	margin-top: 4px;
}
.mt-2 {
	margin-top: 8px;
}
.mt-4 {
	margin-top: 16px;
}
.mt-6 {
	margin-top: 24px;
}
.mb-1 {
	margin-bottom: 4px;
}
.mb-2 {
	margin-bottom: 8px;
}
.mb-4 {
	margin-bottom: 16px;
}
.mb-6 {
	margin-bottom: 24px;
}
.ml-auto {
	margin-left: auto;
}
.p-4 {
	padding: 16px;
}
.px-5 {
	padding-left: 20px;
	padding-right: 20px;
}
.text-center {
	text-align: center;
}
.text-left {
	text-align: left;
}
.w-full {
	width: 100%;
}
.flex-1 {
	flex: 1;
}

/* ========================================
   34. ANIMATIONS
   ======================================== */
@keyframes anim-fade-up {
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes anim-fade-in {
	to {
		opacity: 1;
	}
}

@keyframes anim-scale-in {
	to {
		opacity: 1;
		transform: scale(1);
	}
}

@keyframes anim-slide-right {
	to {
		opacity: 1;
		transform: translateX(0);
	}
}

@keyframes confetti-fall {
	0% {
		transform: translateY(0) rotate(0deg);
		opacity: 1;
	}
	100% {
		transform: translateY(800px) rotate(720deg);
		opacity: 0;
	}
}

@keyframes shimmer {
	0% {
		background-position: -200% 0;
	}
	100% {
		background-position: 200% 0;
	}
}

@keyframes sparkle {
	0%,
	100% {
		opacity: 0.3;
		transform: scale(0.8);
	}
	50% {
		opacity: 0.8;
		transform: scale(1.2);
	}
}

@keyframes pulse {
	0%,
	100% {
		transform: scale(1);
	}
	50% {
		transform: scale(1.05);
	}
}

@keyframes bounce {
	0%,
	100% {
		transform: translateY(0);
	}
	50% {
		transform: translateY(-6px);
	}
}

@keyframes map-bounce {
	0%,
	100% {
		transform: translateY(0);
	}
	50% {
		transform: translateY(-8px);
	}
}

/* ========================================
   35. RESPONSIVE
   ======================================== */
@media (max-width: 500px) {
	body {
		align-items: flex-start;
	}
	.phone-bezel {
		width: 100%;
		height: 100dvh;
		border-radius: 0;
		border: none;
		box-shadow: none;
	}
	.fab {
		right: 24px;
	}
}