/**
 * Pigee Booking — owner portal SPA styles.
 *
 * Deep forest green + warm cream, matching the marketing site. Two layouts:
 * a centred auth card, and the logged-in dashboard shell (sidebar + main).
 */

* { box-sizing: border-box; margin: 0; padding: 0; }

/* Reset browser default blue link colour throughout the portal */
.pigee-app-body a {
	color: inherit;
	text-decoration: none;
}
.pigee-app-body a:hover {
	color: inherit;
	text-decoration: none;
}
/* Logo link — never changes colour on hover */
.pa-logo { cursor: default; }

.pigee-app-body {
	/* Pigee Invoice — orange brand */
	--g:        #FF5C1A;
	--g-deep:   #CC3D00;
	--g-mid:    #FF7A40;
	--lime:     #FFB380;
	--cream:    #FFF5EE;
	--cream-2:  #FFF9F5;
	--ink:      #1A1A2E;
	--mute:     #6B6B7B;
	--line:     #FFE8D6;
	--radius:   14px;
	--shadow:   0 22px 50px -28px rgba(255, 92, 26, .22);
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	background: #FFF9F5;
	color: var(--ink);
	-webkit-font-smoothing: antialiased;
	min-height: 100vh;
}

/* ---- splash / spinner ------------------------------------------- */
.pigee-app-splash {
	min-height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
}
.pigee-app-spinner {
	width: 38px; height: 38px;
	border-radius: 50%;
	border: 3px solid rgba(255, 92, 26, .15);
	border-top-color: var(--g);
	animation: pa-spin .8s linear infinite;
}
@keyframes pa-spin { to { transform: rotate(360deg); } }

/* ================================================================
   AUTH SCREEN
   ================================================================ */
.pa-auth-wrap {
	min-height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 28px 18px;
	background: linear-gradient( 145deg, #FFF0E6 0%, #FFE8D6 60%, #FFDCC8 100% );
}
.pa-auth-card {
	width: 100%;
	max-width: 420px;
	background: #fff;
	border-radius: 20px;
	overflow: hidden;
	box-shadow: 0 24px 56px -20px rgba(255,92,26,.18);
}
.pa-auth-brand {
	background: var(--cream);
	padding: 28px 38px 20px;
	text-align: center;
	border-bottom: 1px solid var(--line);
}
.pa-auth-logo {
	height: 72px;
	width: auto;
	display: block;
	margin: 0 auto;
}
.pa-auth-form {
	padding: 28px 38px 32px;
}
.pa-auth-sub {
	color: var(--mute);
	font-size: 14px;
	margin: 8px 0 20px;
	text-align: center;
}
.pa-logo {
	display: flex;
	align-items: center;
	gap: 9px;
	margin-bottom: 22px;
}
.pa-logo-mark {
	width: 34px; height: 34px;
	border-radius: 9px;
	background: var(--g);
	color: var(--lime);
	display: grid;
	place-items: center;
	font-size: 18px;
}
.pa-logo-img {
	height: 48px;
	width: auto;
	object-fit: contain;
	background: transparent;
	flex-shrink: 0;
}

/* ---- Password visibility toggle --------------------------------- */
.pa-pass-wrap {
	position: relative;
	display: flex;
	align-items: center;
	margin-bottom: 11px;
}
.pa-pass-wrap .pa-input {
	margin-bottom: 0;
	padding-right: 44px;
	width: 100%;
}
.pa-pass-toggle {
	position: absolute;
	right: 10px;
	background: none;
	border: none;
	cursor: pointer;
	color: var(--mute);
	padding: 4px;
	display: flex;
	align-items: center;
	line-height: 1;
	border-radius: 5px;
}
.pa-pass-toggle:hover { color: var(--g); outline: none; }
.pa-logo-text {
	font-weight: 600;
	font-size: 17px;
	letter-spacing: -0.01em;
	color: var(--g);
}
.pa-auth-title {
	font-size: 1.5rem;
	color: var(--ink);
	font-weight: 800;
	letter-spacing: -0.025em;
	margin-bottom: 4px;
}
.pa-auth-switch {
	margin-top: 18px;
	text-align: center;
	font-size: 13.5px;
	color: var(--mute);
}
.pa-auth-switch a { color: var(--g-mid); font-weight: 700; text-decoration: none; }
.pa-auth-switch a:hover { text-decoration: underline; }
.pa-google { margin-top: 14px; display: flex; justify-content: center; }

/* ---- inputs ----------------------------------------------------- */
.pa-auth-card .pa-input { margin-bottom: 11px; }
.pa-input {
	width: 100%;
	border: 1px solid var(--line);
	border-radius: 10px;
	padding: 11px 13px;
	font-size: 14px;
	background: #fff;
	color: var(--ink);
	font-family: inherit;
}
.pa-input:focus {
	outline: 2px solid rgba(255,92,26,.3);
	border-color: var(--g-mid);
}
.pa-input--sm { padding: 6px 9px; font-size: 13px; }
.pa-input[type=color] { padding: 5px; height: 42px; cursor: pointer; }
textarea.pa-input { resize: vertical; line-height: 1.5; }
.pa-time { width: auto; }

.pa-field { margin-bottom: 14px; }
.pa-label {
	display: block;
	font-size: 12.5px;
	font-weight: 700;
	color: var(--g);
	margin-bottom: 5px;
}
.pa-field-note {
	font-size: 12px;
	color: var(--mute);
	margin: 4px 0 0;
}

/* ---- buttons ---------------------------------------------------- */
.pa-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
	font-family: inherit;
	font-weight: 700;
	font-size: 14px;
	padding: 11px 20px;
	border-radius: 10px;
	border: 2px solid transparent;
	cursor: pointer;
	color: var(--g, #FF5C1A);
	transition: transform .14s ease, background .14s ease;
}
.pa-btn:disabled { opacity: .65; cursor: default; }
.pa-btn--primary {
	background: var(--g);
	color: #fff !important;
	width: 100%;
}
a.pa-btn--primary,
a.pa-btn--primary:visited,
a.pa-btn--primary:hover { color: #fff !important; }
.pa-btn--primary:hover:not(:disabled) { background: var(--g-deep); color: #fff; }
.pa-btn--ghost {
	background: transparent;
	color: var(--g);
	border-color: var(--line);
}
.pa-btn--ghost:hover { background: var(--cream); color: var(--g); }
.pa-page-head .pa-btn,
.pa-modal-foot .pa-btn { width: auto; }

/* ---- messages --------------------------------------------------- */
.pa-msg { font-size: 13px; font-weight: 600; }
.pa-msg:empty { display: none; }
.pa-msg--err { color: #c0392b; margin: 4px 0 10px; }
.pa-msg--ok { color: #1c7a3e; }
.pa-auth-card .pa-msg--err { margin-bottom: 12px; }

/* ================================================================
   APP SHELL
   ================================================================ */
.pa-shell {
	display: flex;
	min-height: 100vh;
}
/* Sidebar also needs safe area on left-handed notch devices */
.pa-sidebar {
	width: 232px;
	flex-shrink: 0;
	padding-top: env(safe-area-inset-top, 0px);
	background: linear-gradient( 175deg, #1A1A2E 0%, #2d2d44 100% );
	color: var(--cream);
	display: flex;
	flex-direction: column;
	padding: 22px 16px;
}
.pa-logo--side { margin-bottom: 20px; padding: 0 4px; display: flex; align-items: center; }
.pa-logo--side .pa-logo-text { color: var(--cream); }
.pa-nav { display: flex; flex-direction: column; gap: 3px; flex-grow: 1; }
.pa-nav-link {
	display: flex;
	align-items: center;
	gap: 11px;
	background: none;
	border: none;
	color: rgba(255,249,245,.75);
	font-family: inherit;
	font-size: 14px;
	font-weight: 600;
	padding: 11px 12px;
	border-radius: 9px;
	cursor: pointer;
	text-align: left;
	width: 100%;
	text-decoration: none;
}
.pa-nav-link:hover { background: rgba(255,255,255,.10); color: #fff; }
.pa-nav-link.is-active { background: var(--g); color: #fff; }
.pa-nav-upgrade { border-top: 1px solid rgba(255,255,255,.12); margin-top: 8px; padding-top: 8px; }
.pa-nav-upgrade.is-active { background: var(--g); }
.pa-nav-ic { font-size: 15px; width: 18px; text-align: center; }
.pa-side-foot {
	border-top: 1px solid rgba(255,255,255,.14);
	padding-top: 14px;
	display: flex;
	flex-direction: column;
	gap: 9px;
}
.pa-plan-chip {
	font-size: 10.5px;
	font-weight: 800;
	letter-spacing: .1em;
	color: #fff;
	background: var(--g);
	padding: 5px 10px;
	border-radius: 999px;
	align-self: flex-start;
}
.pa-logout {
	background: none;
	border: 1px solid rgba(255,255,255,.25);
	color: #fff;
	font-family: inherit;
	font-size: 13px;
	font-weight: 600;
	padding: 8px 12px;
	border-radius: 8px;
	cursor: pointer;
}
.pa-logout:hover { background: rgba(255,255,255,.1); }

.pa-main { flex-grow: 1; min-width: 0; display: flex; flex-direction: column; }
.pa-topbar {
	background: #fff;
	border-bottom: 1px solid var(--line);
	/* Push below iPhone notch / Dynamic Island when installed as PWA */
	padding: calc(16px + env(safe-area-inset-top, 0px)) 30px 16px;
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.pa-top-biz { font-weight: 800; font-size: 15px; color: var(--ink); }
.pa-top-email { font-size: 12.5px; color: var(--mute); }
.pa-top-link {
	font-size: 13px;
	font-weight: 700;
	color: var(--g-mid);
	text-decoration: none;
	border: 1px solid var(--line);
	padding: 8px 14px;
	border-radius: 8px;
}
.pa-top-link:hover { background: var(--cream); }

.pa-content { padding: 30px 36px; max-width: 1080px; width: 100%; }
.pa-loading { display: flex; justify-content: center; padding: 60px 0; }

/* ---- page head -------------------------------------------------- */
.pa-page-head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 22px;
}
.pa-page-title {
	font-size: 1.55rem;
	letter-spacing: -0.025em;
	color: var(--g);
}
.pa-page-sub { color: var(--mute); font-size: 14px; margin-top: 3px; }

/* ---- KPIs ------------------------------------------------------- */
.pa-kpis {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 14px;
	margin-bottom: 18px;
}
.pa-kpi {
	background: var(--cream-2);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 18px;
}
.pa-kpi--accent {
	background: linear-gradient( 140deg, #1A1A2E, #2d2d44 );
	border-color: var(--g-deep);
}
.pa-kpi--accent .pa-kpi-num,
.pa-kpi--accent .pa-kpi-label { color: var(--cream); }
.pa-kpi-num {
	font-size: 1.9rem;
	font-weight: 800;
	letter-spacing: -0.02em;
	color: var(--g);
	line-height: 1.1;
}
.pa-kpi-label { font-size: 12px; color: var(--mute); margin-top: 3px; }

/* ---- cards ------------------------------------------------------ */
.pa-card {
	background: var(--cream-2);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 22px;
	margin-bottom: 16px;
}
.pa-card--flush { padding: 0; overflow: hidden; }
.pa-card--empty { text-align: center; padding: 40px 22px; }
.pa-card-title {
	font-size: 14px;
	font-weight: 800;
	color: var(--g);
	margin-bottom: 14px;
}
.pa-empty { color: var(--mute); font-size: 14px; }

/* ---- next-appointment rows ------------------------------------- */
.pa-next-row {
	display: flex;
	align-items: center;
	gap: 11px;
	padding: 10px 0;
	border-bottom: 1px solid var(--line);
}
.pa-next-row:last-child { border-bottom: none; }
.pa-next-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--mute); flex-shrink: 0; }
.pa-next-name { font-weight: 600; font-size: 14px; flex-grow: 1; }
.pa-next-time { font-size: 13px; color: var(--mute); }

/* ---- share ------------------------------------------------------ */
.pa-share-row { display: flex; gap: 8px; }
.pa-share-row .pa-input { flex-grow: 1; }
.pa-share-row .pa-btn { width: auto; white-space: nowrap; }

/* ---- list rows -------------------------------------------------- */
.pa-list { display: flex; flex-direction: column; gap: 9px; }
.pa-list-row {
	display: flex;
	align-items: center;
	gap: 13px;
	background: var(--cream-2);
	border: 1px solid var(--line);
	border-radius: 11px;
	padding: 14px 16px;
}
.pa-list-main { flex-grow: 1; min-width: 0; }
.pa-list-name { font-weight: 700; font-size: 14.5px; }
.pa-list-meta { font-size: 12.5px; color: var(--mute); margin-top: 1px; }
.pa-swatch { width: 14px; height: 30px; border-radius: 5px; flex-shrink: 0; }
.pa-avatar {
	width: 36px; height: 36px;
	border-radius: 50%;
	background: var(--g);
	color: var(--lime);
	display: grid;
	place-items: center;
	font-weight: 700;
	flex-shrink: 0;
}
.pa-mini {
	background: none;
	border: 1px solid var(--line);
	color: var(--g);
	font-family: inherit;
	font-size: 12.5px;
	font-weight: 600;
	padding: 6px 12px;
	border-radius: 7px;
	cursor: pointer;
}
.pa-mini:hover { background: var(--cream); }
.pa-mini--del { color: #c0392b; }
.pa-mini--del:hover { background: #fbe9e7; }

/* ---- hours ------------------------------------------------------ */
.pa-hours-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	padding: 10px 0;
	border-bottom: 1px solid var(--line);
}
.pa-hours-row:last-child { border-bottom: none; }
.pa-hours-day {
	display: flex;
	align-items: center;
	gap: 9px;
	font-weight: 600;
	font-size: 14px;
	cursor: pointer;
}
.pa-hours-times {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	color: var(--mute);
}

/* ---- table ------------------------------------------------------ */
.pa-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.pa-table th {
	text-align: left;
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: .04em;
	color: var(--mute);
	padding: 12px 16px;
	border-bottom: 1px solid var(--line);
	background: var(--cream);
}
.pa-table td {
	padding: 12px 16px;
	border-bottom: 1px solid var(--line);
	vertical-align: middle;
}
.pa-table tr:last-child td { border-bottom: none; }
.pa-cell-name { font-weight: 600; }
.pa-cell-sub { font-size: 12px; color: var(--mute); }

/* ---- status badges + dots -------------------------------------- */
.pa-badge {
	display: inline-block;
	font-size: 11px;
	font-weight: 700;
	padding: 3px 9px;
	border-radius: 999px;
	text-transform: capitalize;
}
.pa-st-pending   { background: #fbeccd; color: #9a6a12; }
.pa-st-confirmed { background: #d8ede4; color: #FF7A40; }
.pa-st-completed { background: #dfe9d4; color: #4a6b1f; }
.pa-st-cancelled { background: #f6dcd8; color: #b03a2e; }
.pa-st-no_show   { background: #e6e1d4; color: #6a6457; }
.pa-next-dot.pa-st-pending   { background: #d9a23c; }
.pa-next-dot.pa-st-confirmed { background: var(--lime); }
.pa-badge.pa-st-pending,
.pa-badge.pa-st-confirmed,
.pa-badge.pa-st-completed,
.pa-badge.pa-st-cancelled,
.pa-badge.pa-st-no_show { color: inherit; }

/* ---- Plan status card (Settings) -------------------------------- */
.pa-plan-status { margin-bottom: 16px; }
.pa-plan-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	margin-bottom: 16px;
	padding-bottom: 16px;
	border-bottom: 1px solid var(--line);
}
.pa-plan-name {
	font-weight: 800;
	font-size: 15px;
	color: var(--g);
}
.pa-key-block { }

/* ---- Actions row ------------------------------------------------ */
.pa-actions {
	display: flex;
	align-items: center;
	gap: 14px;
}

/* ---- modal ------------------------------------------------------ */
.pa-modal-overlay {
	position: fixed;
	inset: 0;
	background: rgba(26, 26, 46, .55);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px 16px;
	z-index: 999;
}
.pa-modal {
	background: #fff;
	border-radius: 18px;
	width: 100%;
	max-width: 560px;
	max-height: 88vh;
	display: flex;
	flex-direction: column;
	box-shadow: 0 32px 72px -16px rgba(26,26,46,.28), 0 0 0 1px rgba(26,26,46,.06);
}
.pa-modal-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 20px 28px;
	border-bottom: 1px solid var(--line);
	flex-shrink: 0;
}
.pa-modal-head h3 { font-size: 1.1rem; color: var(--ink); font-weight: 700; }
.pa-modal-x {
	background: none;
	border: none;
	font-size: 24px;
	color: var(--mute);
	cursor: pointer;
	line-height: 1;
	padding: 2px 6px;
	border-radius: 6px;
}
.pa-modal-x:hover { background: var(--cream); }
.pa-modal-body {
	padding: 24px 28px;
	overflow-y: auto;
	flex: 1;
}
.pa-modal .pa-msg { margin: 0 0 12px; }
.pa-modal .pa-msg--err { margin-bottom: 12px; }
.pa-modal-foot {
	display: flex;
	justify-content: flex-end;
	gap: 10px;
	padding: 18px 28px;
	border-top: 1px solid var(--line);
	flex-shrink: 0;
	background: #fff;
	border-radius: 0 0 18px 18px;
}

/* ================================================================
   RESPONSIVE
   ================================================================ */
@media (max-width: 860px) {
	.pa-kpis { grid-template-columns: repeat(2, 1fr); }
}
/* Old compact top-bar mobile styles removed — replaced by slide-in drawer. */
@media (max-width: 720px) {
	.pa-content { padding: 18px; }
	.pa-topbar { padding: calc(14px + env(safe-area-inset-top, 0px)) 18px 14px; }
	.pa-table { font-size: 12.5px; }
	.pa-table th, .pa-table td { padding: 9px 10px; }
}

/* ================================================================
   ADDITIONAL SCREENS — v2 additions
   ================================================================ */

/* ---- Locked / teaser ------------------------------------------ */
.pa-locked {
	text-align: center;
	padding: 40px 22px;
	border: 2px dashed var(--line);
}
.pa-locked-icon { font-size: 32px; margin-bottom: 8px; }
.pa-locked-title { font-size: 1.2rem; color: var(--g); margin-bottom: 6px; }
.pa-locked-teaser { margin-top: 16px; }
.pa-teaser-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 14px; margin-top: 14px; }
.pa-teaser-item { background: var(--cream); border: 1px solid var(--line); border-radius: 11px; padding: 16px; }
.pa-teaser-ic { font-size: 22px; margin-bottom: 6px; }
.pa-teaser-item b { display: block; font-size: 14px; color: var(--g); margin-bottom: 4px; }
.pa-teaser-item p { font-size: 13px; color: var(--mute); }
@media (max-width:560px) { .pa-teaser-grid { grid-template-columns: 1fr; } }

/* ---- Notifications -------------------------------------------- */
.pa-check-row { display: flex; align-items: flex-start; gap: 9px; font-size: 14px; margin-bottom: 12px; cursor: pointer; }
.pa-notif-wa { margin-top: 16px; }
.pa-connected { display: flex; align-items: center; gap: 12px; }

/* ---- Marketing templates -------------------------------------- */
.pa-tpl-row { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.pa-tpl-btn {
	font-family: inherit;
	font-size: 13px;
	font-weight: 600;
	padding: 7px 14px;
	border-radius: 8px;
	border: 1px solid var(--line);
	background: var(--cream-2);
	color: var(--g);
	cursor: pointer;
}
.pa-tpl-btn.is-sel { background: var(--g); color: var(--lime); border-color: var(--g); }
.pa-preview { margin-top: 8px; }

/* ---- Calendar ------------------------------------------------- */

/* ---- Analytics bar chart -------------------------------------- */
.pa-bar-chart {
	display: flex;
	align-items: flex-end;
	gap: 8px;
	height: 140px;
	padding-top: 12px;
}
.pa-bar-col { display: flex; flex-direction: column; align-items: center; flex: 1; height: 100%; justify-content: flex-end; }
.pa-bar {
	width: 100%;
	background: var(--g);
	border-radius: 4px 4px 0 0;
	min-height: 4px;
	transition: height .3s ease;
}
.pa-bar-val { font-size: 11px; color: var(--g); font-weight: 700; margin-top: 3px; }
.pa-bar-lbl { font-size: 10px; color: var(--mute); }
.pa-compare-wrap { overflow-x: auto; }
.pa-tick { color: var(--g-mid); font-weight: 800; }
.pa-cross { color: #ccc; }
.pa-compare th.is-current,
.pa-compare td.is-current { background: rgba(20,61,46,.05); }

/* ---- Upgrade page --------------------------------------------- */
.pa-upgrade-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 14px; margin-bottom: 20px; }
@media (max-width:860px) { .pa-upgrade-grid { grid-template-columns: repeat(2,1fr); } }
@media (max-width:480px) { .pa-upgrade-grid { grid-template-columns: 1fr; } }
.pa-upgrade-card {
	background: var(--cream-2);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 22px 18px;
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.pa-upgrade-card.is-current { background: rgba(20,61,46,.06); border-color: var(--g); }
.pa-upgrade-card.is-popular { border-color: var(--lime); box-shadow: 0 8px 24px -14px rgba(255,92,26,.3); }
.pa-popular-badge {
	position: absolute;
	top: -10px; left: 50%;
	transform: translateX(-50%);
	background: var(--g);
	color: #fff;
	font-size: 10px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: .05em;
	padding: 3px 10px;
	border-radius: 999px;
	white-space: nowrap;
}
.pa-upgrade-name { font-weight: 800; font-size: 15px; color: var(--g); text-transform: uppercase; letter-spacing: .04em; }
.pa-upgrade-price { font-size: 2.2rem; font-weight: 800; letter-spacing: -0.02em; color: var(--g); }
.pa-upgrade-price span { font-size: .9rem; font-weight: 500; color: var(--mute); }
.pa-upgrade-blurb { font-size: 12.5px; color: var(--mute); }
.pa-upgrade-btn { margin-top: auto; justify-content: center; color: #fff !important; }
.pa-upgrade-current { margin-top: auto; font-size: 13px; font-weight: 700; color: var(--g-mid); }

/* ---- Mobile nav improvements ---------------------------------- */
.pa-hamburger {
	display: none;
	background: none;
	border: none;
	color: var(--g);
	cursor: pointer;
	padding: 6px;
	border-radius: 8px;
	flex-shrink: 0;
}
.pa-mob-overlay {
	display: none;
	position: fixed;
	inset: 0;
	background: rgba(26,26,46,.5);
	z-index: 49;
}
.pa-mob-overlay.is-visible { display: block; }

@media (max-width:720px) {
	.pa-hamburger { display: flex; }
	.pa-sidebar {
		position: fixed;
		top: 0; left: -240px;
		height: 100vh;
		width: 220px;
		z-index: 50;
		transition: left .22s ease;
		overflow-y: auto;
	}
	.pa-sidebar.is-open { left: 0; }
	.pa-kpis { grid-template-columns: repeat(2,1fr); }
	.pa-upgrade-grid { grid-template-columns: repeat(2,1fr); }
	.pa-topbar { padding: calc(14px + env(safe-area-inset-top, 0px)) 16px 14px; }
	.pa-content { padding: 16px; }
	.pa-table { font-size: 12.5px; }
	.pa-table th, .pa-table td { padding: 9px 10px; }
	.pa-page-head { flex-direction: column; align-items: flex-start; }
	.pa-page-head .pa-btn { align-self: flex-start; }
}
@media (max-width:420px) {
	.pa-kpis { grid-template-columns: 1fr 1fr; }
	.pa-upgrade-grid { grid-template-columns: 1fr; }
	.pa-auth-card { border-radius: 16px; }
	.pa-auth-brand { padding: 20px 24px 16px; }
	.pa-auth-form { padding: 20px 24px 24px; }
}

/* ---- Calendar screen ------------------------------------------- */
.pa-cal-hero { border: 2px solid var(--g); }
.pa-cal-badge { font-size: 36px; margin-bottom: 10px; }
.pa-cal-app-head { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 14px; }
.pa-cal-app-ic { font-size: 26px; flex-shrink: 0; margin-top: 2px; }
.pa-cal-steps { display: flex; flex-direction: column; gap: 10px; }
.pa-cal-step {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	font-size: 14px;
	line-height: 1.5;
}
.pa-cal-step-num {
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: var(--g);
	color: #fff;
	font-size: 12px;
	font-weight: 800;
	display: grid;
	place-items: center;
	flex-shrink: 0;
	margin-top: 2px;
}
.pa-cal-facts { display: flex; flex-direction: column; gap: 14px; }
.pa-cal-fact { display: flex; align-items: flex-start; gap: 12px; }
.pa-cal-fact-ic { font-size: 20px; flex-shrink: 0; margin-top: 2px; }
.pa-cal-fact b { display: block; font-size: 14px; color: var(--g); }
.pa-cal-fact p { margin-top: 2px; }

/* ---- Logo upload row ------------------------------------------- */
.pa-logo-upload-row {
	display: flex;
	align-items: flex-start;
	gap: 14px;
}
.pa-logo-preview {
	width: 72px;
	height: 72px;
	object-fit: contain;
	border-radius: 10px;
	border: 1px solid var(--line);
	background: var(--cream-2);
	padding: 4px;
	flex-shrink: 0;
}
.pa-logo-upload-btns {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

/* ---- Holidays -------------------------------------------------- */
.pa-holiday-form { display: flex; flex-direction: column; gap: 8px; }
.pa-holiday-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 10px 12px;
	border-radius: 10px;
	background: var(--cream-2, #f5f0e8);
	gap: 12px;
}
.pa-mini--del {
	color: var(--red, #dc2626);
	border-color: var(--red, #dc2626);
	flex-shrink: 0;
}

/* ---- Payment options: draggable rows --------------------------- */
.pa-pay-list { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.pa-pay-row {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px 10px;
	border-radius: 10px;
	background: var(--cream-2, #f5f0e8);
	cursor: default;
}
.pa-pay-row.is-dragging { opacity: .45; }
.pa-drag-handle {
	cursor: grab;
	color: var(--muted, #8a8070);
	font-size: 15px;
	line-height: 1;
	user-select: none;
	padding: 2px 4px;
}
.pa-drag-handle:active { cursor: grabbing; }

/* ---- Premium teaser card --------------------------------------- */
.pa-teaser-card {
	border: 2px dashed var(--brand, #2d5a27);
	border-radius: 12px;
	padding: 14px 16px;
	background: linear-gradient(135deg, rgba(45,90,39,.04) 0%, transparent 100%);
}
.pa-teaser-badge {
	display: inline-block;
	background: var(--brand, #2d5a27);
	color: #fff;
	font-size: 10px;
	font-weight: 800;
	letter-spacing: .06em;
	border-radius: 6px;
	padding: 2px 7px;
	margin-bottom: 6px;
}
.pa-teaser-title {
	font-weight: 700;
	font-size: 14px;
	margin-bottom: 4px;
}
.pa-teaser-body { font-size: 13px; color: var(--muted, #6b6356); }
.pa-btn--outline {
	background: transparent;
	border: 2px solid var(--brand, #2d5a27);
	color: var(--brand, #2d5a27);
}
.pa-btn--outline:hover { background: rgba(45,90,39,.07); }

/* ---- Get Started checklist ------------------------------------ */
.pa-gs-step { transition: opacity .2s; }
.pa-gs-step.is-done { opacity: .7; }
.pa-gs-icon {
	display: flex; align-items: center; justify-content: center;
	width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0;
	background: var(--cream-3, #e8e0d0); color: var(--muted, #6b6356);
	font-weight: 800; font-size: 13px; margin-top: 2px;
}
.pa-gs-icon.done { background: var(--brand, #2d5a27); color: #fff; }

/* ---- Bookings calendar ---------------------------------------- */
.pa-bk-cal-nav {
	display: flex; align-items: center; justify-content: space-between;
	margin-bottom: 12px;
}
.pa-bk-nav-btn {
	background: none; border: 1.5px solid var(--cream-3, #e0d8cc);
	border-radius: 8px; width: 32px; height: 32px; font-size: 20px;
	cursor: pointer; display: flex; align-items: center; justify-content: center;
	color: var(--ink, #1a2e1a);
}
.pa-bk-nav-btn:hover { background: var(--cream-2, #f0ebe0); }
.pa-bk-cal-grid {
	display: grid; grid-template-columns: repeat(7,1fr); gap: 4px;
}
.pa-bk-cal-dow {
	text-align: center; font-size: 11px; font-weight: 700;
	text-transform: uppercase; color: var(--muted, #8a8070); padding-bottom: 4px;
}
.pa-bk-cal-empty { aspect-ratio: 1; }
.pa-bk-cal-cell {
	aspect-ratio: 1; border-radius: 8px; display: flex; flex-direction: column;
	align-items: center; justify-content: center; position: relative;
	border: 2px solid transparent; transition: border-color .12s, background .12s;
}
.pa-bk-cal-cell.is-today { border-color: var(--brand, #2d5a27) !important; }
.pa-bk-cal-dom { font-size: 12px; font-weight: 600; }
.pa-bk-cal-count {
	font-size: 10px; font-weight: 800; margin-top: 1px;
	background: rgba(0,0,0,.12); border-radius: 99px;
	padding: 0 4px; line-height: 14px;
}
.pa-bk-cal-cell.heat-empty  { background: transparent; }
.pa-bk-cal-cell.heat-quiet  { background: #dcfce7; color: #166534; }
.pa-bk-cal-cell.heat-moderate { background: #fef9c3; color: #854d0e; }
.pa-bk-cal-cell.heat-busy   { background: #fee2e2; color: #991b1b; }
.pa-bk-cal-cell.heat-hectic { background: #f3e8ff; color: #6b21a8; }
.pa-bk-cal-cell[style*="pointer"]:hover { filter: brightness(.94); }
.pa-bk-legend {
	display: flex; gap: 14px; flex-wrap: wrap; margin-top: 10px; font-size: 12px;
}
.pa-bk-leg-item { display: flex; align-items: center; gap: 5px; }
.pa-bk-leg-item i {
	display: inline-block; width: 10px; height: 10px; border-radius: 3px;
}
.pa-bk-leg-item .heat-quiet   { background: #dcfce7; }
.pa-bk-leg-item .heat-moderate { background: #fef9c3; }
.pa-bk-leg-item .heat-busy    { background: #fee2e2; }
.pa-bk-leg-item .heat-hectic  { background: #f3e8ff; }

/* ---- Day modal ------------------------------------------------ */
.pa-modal--wide { max-width: 600px; }
.pa-day-modal-row {
	display: flex; gap: 16px; padding: 12px;
	border-radius: 10px; background: var(--cream-2, #f0ebe0);
}

/* ---- Service import ------------------------------------------- */
.pa-import-dropzone {
	display: flex; flex-direction: column; align-items: center;
	justify-content: center; padding: 32px 20px;
	border: 2px dashed var(--line, #e0d8cc); border-radius: 14px;
	cursor: pointer; text-align: center; transition: border-color .15s, background .15s;
	background: var(--cream-2, #f8f4ee);
}
.pa-import-dropzone:hover { border-color: var(--brand, #2d5a27); background: #f0ece4; }
.pa-import-row {
	padding: 10px 12px; border-radius: 10px;
	background: var(--cream-2, #f8f4ee); margin-bottom: 6px;
}
.pa-import-row--cat { border-left: 3px solid var(--brand, #2d5a27); }

/* ---- Staff photo avatars -------------------------------------- */
.pa-avatar--img {
	background-size: cover;
	background-position: center;
	color: transparent;
}
/* ---- Staff hours rows ----------------------------------------- */
.pa-hours-row {
	display: flex; align-items: center; gap: 8px;
	padding: 5px 0;
}
.pa-hours-day {
	display: flex; align-items: center; gap: 6px;
	min-width: 130px; font-size: 13px;
}
.pa-hours-dash { color: var(--muted, #8a8070); }

/* 4-digit verification code input */
.pa-code-input {
	font-size: 22px;
	font-weight: 700;
	letter-spacing: 0.4em;
	text-align: center;
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* ── Customer tags / segments ──────────────────────────────────── */
.pa-tag-row { display: flex; flex-wrap: wrap; gap: 4px; }
.pa-tag-chip {
	display: inline-block;
	font-size: 11px;
	font-weight: 600;
	padding: 2px 8px;
	border-radius: 99px;
	background: var(--cream-2, #f0ebe0);
	color: var(--ink, #3a352c);
}
.pa-btn--danger {
	background: #fff;
	color: #dc2626;
	border: 1.5px solid #fecaca;
}
.pa-btn--danger:hover { background: #fef2f2; }

/* ── Sortable service list ─────────────────────────────────────── */
.pa-list--sortable .pa-list-row--drag { cursor: default; }
.pa-list--sortable .pa-drag-handle {
	cursor: grab;
	color: var(--muted, #9b9486);
	font-size: 18px;
	padding: 0 6px 0 0;
	user-select: none;
}
.pa-list--sortable .pa-drag-handle:active { cursor: grabbing; }
.pa-list-row--drag.is-dragging { opacity: 0.4; }
.pa-list-row--drag.drag-over {
	outline: 2px dashed var(--brand, #0f766e);
	border-radius: 10px;
}

/* ── Automated campaign cards ──────────────────────────────────── */
.pa-auto-card { margin-bottom: 12px; }
.pa-auto-form { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line, #e5ddcf); }

/* ── Rich email editor ─────────────────────────────────────────── */
.pa-eeditor {
	border: 1.5px solid var(--line, #e5ddcf);
	border-radius: 10px;
	overflow: hidden;
	background: #fff;
}
.pa-etoolbar {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 6px 10px;
	background: var(--cream-2, #f5f0e8);
	border-bottom: 1px solid var(--line, #e5ddcf);
	flex-wrap: wrap;
}
.pa-etab-row { display: flex; gap: 2px; }
.pa-etab {
	padding: 4px 12px;
	border-radius: 6px;
	border: none;
	background: transparent;
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
	color: var(--muted, #6b6356);
	font-family: inherit;
}
.pa-etab.is-active {
	background: #fff;
	color: var(--ink, #1a1a1a);
	box-shadow: 0 1px 3px rgba(0,0,0,.10);
}
.pa-ebar {
	display: flex;
	gap: 2px;
	padding: 4px 8px;
	border-bottom: 1px solid var(--line, #e5ddcf);
	background: var(--cream-2, #f5f0e8);
}
.pa-ebar-btn {
	width: 28px; height: 28px;
	border: none; border-radius: 5px;
	background: transparent; cursor: pointer;
	font-size: 13px; font-family: inherit;
	display: flex; align-items: center; justify-content: center;
}
.pa-ebar-btn:hover { background: var(--line, #e5ddcf); }
.pa-evisual {
	min-height: 140px;
	padding: 12px 14px;
	font-size: 14px;
	line-height: 1.6;
	outline: none;
	color: var(--ink, #1a1a1a);
}
.pa-ehtml {
	width: 100%;
	border: none !important;
	border-radius: 0 !important;
	resize: vertical;
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: 12px;
	min-height: 160px;
}
.pa-epreview-frame {
	width: 100%; border: none;
	min-height: 320px;
	display: block;
}
.pa-etoolbar > div:last-child { margin-left: auto; }

/* ---- Support screen --------------------------------------------- */
.pa-ticket-reply {
	background: var(--bg2, #f0ebe0);
	border-radius: 6px;
	padding: 10px 14px;
	margin-top: 8px;
}
.pa-ticket-reply .pa-page-sub {
	font-size: 11px;
	margin-bottom: 4px;
}

/* ---- save-template button --------------------------------------- */
.pa-mini--save {
	background: var(--g, #FF5C1A);
	color: #fff !important;
	border-color: var(--g, #FF5C1A);
}
.pa-mini--save:hover {
	background: #0d2e22;
	color: #fff !important;
}

/* ---- mini button muted variant (secondary actions) -------------- */
.pa-mini--muted {
	color: #666 !important;
	border-color: #ccc;
}
.pa-mini--muted:hover {
	background: #f5f5f5;
	color: #444 !important;
}
/* Ensure ALL button elements in the portal are never white-on-white */
.pigee-app-body button:not([class]) {
	color: var(--g, #FF5C1A);
}

/* ---- Google sign-in divider ------------------------------------- */
.pa-auth-divider {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 4px 0;
	color: var(--mute, #888);
	font-size: 13px;
}
.pa-auth-divider::before,
.pa-auth-divider::after {
	content: '';
	flex: 1;
	height: 1px;
	background: var(--line, #e5ddcf);
}
.pa-google {
	min-height: 44px;
}

/* ---- Legal / T&C text in auth screen ---------------------------- */
.pa-auth-legal {
	font-size: 11px;
	color: var(--mute, #888);
	text-align: center;
	margin-top: 8px;
	line-height: 1.5;
}
.pa-auth-legal a {
	color: var(--g, #FF5C1A);
	text-decoration: underline;
}
.pa-auth-legal a:hover {
	color: var(--g-deep, #0d2e22);
}

/* ---- WhatsApp guided setup steps -------------------------------- */
.pa-wa-step {
	display: flex;
	gap: 14px;
	padding: 16px 0;
	border-bottom: 1px solid var(--line, #e5ddcf);
}
.pa-wa-step:last-child { border-bottom: none; padding-bottom: 0; }
.pa-wa-step:first-of-type { padding-top: 0; }
.pa-wa-step-num {
	flex-shrink: 0;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: var(--g, #FF5C1A);
	color: #fff;
	font-weight: 700;
	font-size: 13px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-top: 2px;
}
.pa-wa-step-body { flex: 1; min-width: 0; }
.pa-wa-step-title {
	font-weight: 700;
	font-size: 14px;
	margin-bottom: 4px;
	color: var(--g, #FF5C1A);
}
.pa-wa-help {
	display: flex;
	gap: 8px;
	background: #f0f9f4;
	border: 1px solid #b7e3c8;
	border-radius: 8px;
	padding: 10px 12px;
	margin-top: 12px;
	font-size: 12px;
	color: #1a5c38;
	line-height: 1.5;
}
.pa-wa-help-icon { flex-shrink: 0; font-size: 14px; }

/* ---- PWA install banner ----------------------------------------- */
.pa-install-banner {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	background: var(--g, #FF5C1A);
	color: #fff;
	border-radius: 12px;
	padding: 14px 16px;
	margin-bottom: 16px;
	position: relative;
	box-shadow: 0 4px 16px rgba(0,0,0,0.18);
}
.pa-install-icon {
	font-size: 24px;
	flex-shrink: 0;
	margin-top: 2px;
}
.pa-install-body { flex: 1; min-width: 0; }
.pa-install-title {
	font-weight: 700;
	font-size: 14px;
	margin-bottom: 4px;
}
.pa-install-sub {
	font-size: 13px;
	opacity: 0.85;
	margin: 0;
	line-height: 1.5;
}
.pa-install-close {
	background: none;
	border: none;
	color: rgba(255,255,255,0.7);
	font-size: 20px;
	cursor: pointer;
	padding: 0 0 0 8px;
	flex-shrink: 0;
	line-height: 1;
	margin-top: -2px;
}
.pa-install-close:hover { color: #fff; }
@media (min-width: 720px) {
	.pa-install-banner { display: none; } /* Desktop: never show */
}

/* ---- Owner manual booking — slot picker buttons ----------------- */
.pa-slot-btn {
	padding: 8px 14px;
	border: 1.5px solid var(--line, #e5ddcf);
	border-radius: 8px;
	background: var(--bg, #faf6ef);
	color: var(--g, #FF5C1A);
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
	font-family: inherit;
	transition: background .12s, border-color .12s;
}
.pa-slot-btn:hover { background: var(--cream, #f4ece0); border-color: var(--g, #FF5C1A); }
.pa-slot-btn.selected {
	background: var(--g, #FF5C1A);
	border-color: var(--g, #FF5C1A);
	color: #fff;
}

/* ---- Customer autocomplete suggest box -------------------------- */
.pa-suggest-box {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	background: #fff;
	border: 1.5px solid var(--g, #FF5C1A);
	border-radius: 0 0 10px 10px;
	box-shadow: 0 8px 24px rgba(0,0,0,0.12);
	z-index: 9999;
	overflow: hidden;
}
.pa-suggest-row {
	padding: 10px 14px;
	cursor: pointer;
	border-bottom: 1px solid var(--line, #e5ddcf);
	transition: background .1s;
}
.pa-suggest-row:last-child { border-bottom: none; }
.pa-suggest-row:hover { background: var(--cream, #f4ece0); }

/* ---- Clickable name links --------------------------------------- */
.pa-link { color: var(--g, #FF5C1A); text-decoration: underline; text-decoration-style: dotted; }
.pa-link:hover { text-decoration-style: solid; }

/* ---- Dashboard quick-action buttons ----------------------------- */
.pa-quick-charge-row {
	display: flex;
	gap: 10px;
	margin-bottom: 16px;
	flex-wrap: wrap;
}
.pa-quick-charge-btn {
	flex: 1;
	min-width: 0;
	font-size: 15px;
	padding: 14px 18px;
	font-weight: 700;
}
.pa-quick-charge-btn2 {
	flex: 1;
	min-width: 0;
	font-size: 15px;
	padding: 14px 18px;
	font-weight: 700;
}
/* Hide on desktop — Mike won't need them prominently on a big screen */
@media (min-width: 720px) {
	.pa-quick-charge-row { display: none; }
}

/* ---- Bookings table mobile: keep Charge button always in view --- */
@media (max-width: 719px) {
	/* Stack the bookings table columns sensibly on small screens */
	.pa-bkg-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
	/* Hide PRICE column on very small screens to make room for Charge */
	.pa-bkg-col-price { display: none; }
	/* Charge button: ensure it never gets clipped */
	.pa-table td:last-child { padding-right: 4px; }
	.pa-mini.pa-mini--save {
		white-space: nowrap;
		font-size: 12px;
		padding: 6px 8px;
	}
}

/* ---- WhatsApp prerequisites card ------------------------------- */
.pa-wa-prereq {
	background: #fff8e1;
	border: 1.5px solid #f6cc42;
	border-radius: 12px;
	padding: 14px 16px;
	margin-bottom: 20px;
}
.pa-wa-prereq-title {
	font-weight: 700;
	font-size: 13px;
	color: #7c5e00;
	margin-bottom: 12px;
}
.pa-wa-prereq-list { display: flex; flex-direction: column; gap: 12px; }
.pa-wa-prereq-item { display: flex; gap: 10px; align-items: flex-start; }
.pa-wa-prereq-num {
	flex-shrink: 0;
	width: 22px; height: 22px;
	border-radius: 50%;
	background: #f6cc42;
	color: #7c5e00;
	font-weight: 800;
	font-size: 12px;
	display: flex; align-items: center; justify-content: center;
}
.pa-wa-link {
	display: inline-block;
	margin-top: 4px;
	font-size: 12px;
	font-weight: 700;
	color: var(--g, #FF5C1A);
	text-decoration: underline;
}
/* ---- WhatsApp setup divider ------------------------------------ */
.pa-wa-divider {
	font-size: 11px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: .07em;
	color: var(--mute, #888);
	margin: 4px 0 16px;
	padding-bottom: 8px;
	border-bottom: 1px solid var(--line, #e5ddcf);
}
/* ---- WhatsApp step sub-content --------------------------------- */
.pa-wa-step-sub { margin-top: 6px; }
.pa-wa-ol {
	margin: 6px 0 0 16px;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 5px;
}
.pa-wa-ol li { font-size: 13px; color: var(--ink, #2c2416); line-height: 1.4; }

/* ---- Import dialog option cards -------------------------------- */
.pa-import-option {
	background: var(--cream, #f4ece0);
	border: 1.5px solid var(--line, #e5ddcf);
	border-radius: 12px;
	padding: 14px 16px;
	margin-bottom: 12px;
}
.pa-import-option--info {
	background: #fff8e1;
	border-color: #f6cc42;
}
.pa-import-option-title {
	font-weight: 700;
	font-size: 14px;
	color: var(--g, #FF5C1A);
	margin-bottom: 6px;
}

/* ================================================================
   PIGEE INVOICE — domain-specific additions
   ================================================================ */

/* ---- status pills -------------------------------------------- */
.pa-pill { display:inline-block; font-size:11px; font-weight:800; letter-spacing:.4px; text-transform:uppercase; padding:4px 10px; border-radius:999px; white-space:nowrap; }
.pa-pill--draft   { background:#eceadd; color:#6b6552; }
.pa-pill--sent    { background:#dce8ff; color:#1d4ed8; }
.pa-pill--viewed  { background:#e3dcff; color:#5b3fd1; }
.pa-pill--partial { background:#fff3cd; color:#7a5c00; }
.pa-pill--paid    { background:#d1f0dd; color:#0c6b3a; }
.pa-pill--overdue { background:#fdd9d7; color:#b42318; }
.pa-pill--void    { background:#eee; color:#9ca3af; text-decoration:line-through; }
.pa-pill--accepted{ background:#d1f0dd; color:#0c6b3a; }
.pa-pill--declined{ background:#fdd9d7; color:#b42318; }
.pa-pill--converted{background:#dce8ff; color:#1d4ed8; }
.pa-pill--expired { background:#eee; color:#9ca3af; }

/* ---- health dots --------------------------------------------- */
.pa-dot { display:inline-block; width:9px; height:9px; border-radius:50%; margin-right:6px; vertical-align:middle; }
.pa-dot--green { background:#2ecc71; }
.pa-dot--amber { background:#f5a623; }
.pa-dot--red   { background:#e74c3c; }

/* ---- list rows ----------------------------------------------- */
.pa-rows { display:flex; flex-direction:column; }
.pa-row { display:flex; align-items:center; gap:14px; padding:14px 18px; border-bottom:1px solid var(--line); cursor:pointer; transition:background .12s; }
.pa-row:last-child { border-bottom:0; }
.pa-row:hover { background:var(--cream-2); }
.pa-row-main { flex:1; min-width:0; }
.pa-row-title { font-weight:700; font-size:14px; }
.pa-row-sub { font-size:12px; color:var(--mute); margin-top:2px; }
.pa-row-amt { text-align:right; font-variant-numeric:tabular-nums; font-weight:700; white-space:nowrap; }

/* ---- filter tabs --------------------------------------------- */
.pa-tabs { display:flex; gap:6px; flex-wrap:wrap; margin-bottom:16px; }
.pa-tab { appearance:none; border:1px solid var(--line); background:#fff; color:var(--mute); padding:7px 14px; border-radius:999px; font-size:13px; font-weight:600; cursor:pointer; }
.pa-tab.is-active { background:var(--g); color:#fff; border-color:var(--g); }

/* ---- line item editor ---------------------------------------- */
.pa-items-ed { width:100%; border-collapse:collapse; margin-top:8px; }
.pa-items-ed th { font-size:11px; text-transform:uppercase; letter-spacing:.4px; color:var(--mute); text-align:left; padding:6px 8px; }
.pa-items-ed td { padding:5px 8px; vertical-align:top; }
.pa-items-ed .pa-input { margin-bottom:0; }
.pa-li-desc { width:42%; }
.pa-li-del { background:none; border:0; color:#b42318; cursor:pointer; font-size:18px; line-height:1; padding:6px; }
.pa-li-ai { background:none; border:0; color:var(--g); cursor:pointer; font-size:13px; font-weight:700; padding:4px 6px; white-space:nowrap; }
.pa-addrow { margin-top:8px; }

/* ---- totals box ---------------------------------------------- */
.pa-totbox { margin-left:auto; min-width:260px; margin-top:14px; }
.pa-totrow { display:flex; justify-content:space-between; padding:5px 0; font-size:14px; }
.pa-totrow--grand { border-top:2px solid var(--g); margin-top:6px; padding-top:10px; font-weight:800; font-size:18px; color:var(--g); }

/* ---- AI FAB + sheet ------------------------------------------ */
.pa-fab { position:fixed; right:24px; bottom:24px; z-index:50; background:var(--g); color:#fff; border:0; border-radius:999px; padding:15px 22px; font-size:15px; font-weight:800; box-shadow:0 18px 40px -16px rgba(255,92,26,.4); cursor:pointer; display:flex; align-items:center; gap:8px; }
.pa-fab:hover { background:var(--g-deep); }
.pa-fab .ic { font-size:18px; }
@media(max-width:720px){ .pa-fab{ right:16px; bottom:calc(16px + env(safe-area-inset-bottom,0px)); } }

.pa-aibox { background:linear-gradient(165deg,#1A1A2E 0%,#2d2d44 100%); color:#FFF9F5; border-radius:var(--radius); padding:22px; }
.pa-aibox h3 { margin:0 0 4px; color:#fff; }
.pa-aibox .pa-input { background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.2); color:#fff; }
.pa-aibox .pa-input::placeholder { color:rgba(255,249,245,.5); }
.pa-ai-note { font-size:13px; background:rgba(255,92,26,.08); border-left:3px solid var(--g); padding:10px 12px; border-radius:0 8px 8px 0; margin-top:12px; }

/* ---- IR35 RAG cards ------------------------------------------ */
.pa-rag { border-radius:12px; padding:16px; margin-bottom:12px; border-left:5px solid; background:#fff; }
.pa-rag--green { border-color:#2ecc71; }
.pa-rag--amber { border-color:#f5a623; }
.pa-rag--red   { border-color:#e74c3c; }
.pa-rag-name { font-weight:800; font-size:14px; }
.pa-rag-find { font-size:13px; color:var(--ink); margin-top:6px; line-height:1.5; }
.pa-rag-sugg { font-size:12px; color:var(--mute); margin-top:6px; font-style:italic; }

/* ---- VAT threshold meter ------------------------------------- */
.pa-meter { height:10px; border-radius:999px; background:var(--line); overflow:hidden; margin:8px 0; }
.pa-meter-fill { height:100%; background:var(--g); border-radius:999px; transition:width .4s; }
.pa-meter-fill.is-over { background:#e74c3c; }

/* ---- dashboard CTA banner (non-dismissible on free) ---------- */
.pa-cta-banner { background:linear-gradient(120deg,var(--g),var(--g-mid)); color:var(--cream); border-radius:var(--radius); padding:18px 22px; display:flex; align-items:center; gap:16px; margin-bottom:20px; flex-wrap:wrap; }
.pa-cta-banner b { color:#fff; }
.pa-cta-banner .pa-btn { width:auto; background:#fff; color:var(--g); margin-left:auto; }

/* ---- disclaimer ---------------------------------------------- */
.pa-disclaimer { font-size:11px; color:var(--mute); font-style:italic; margin-top:10px; line-height:1.5; }

/* ---- pricing grid -------------------------------------------- */
.pa-price-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
@media(max-width:860px){ .pa-price-grid{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:480px){ .pa-price-grid{ grid-template-columns:1fr; } }
.pa-price-card { background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:20px; }
.pa-price-card.is-current { border-color:var(--g); box-shadow:0 0 0 2px var(--g); }
.pa-price-amt { font-size:30px; font-weight:800; color:var(--g); }
.pa-price-amt small { font-size:13px; color:var(--mute); font-weight:600; }
.pa-price-feats { list-style:none; padding:0; margin:14px 0; font-size:13px; }
.pa-price-feats li { padding:5px 0; border-bottom:1px solid var(--cream); }

/* ---- form grid / actions / toast (invoice SPA) --------------- */
.pa-form-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:12px; }
@media(max-width:560px){ .pa-form-grid{ grid-template-columns:1fr; } }
.pa-actions-bar { display:flex; gap:10px; flex-wrap:wrap; margin-top:16px; }
.pa-toast { position:fixed; left:50%; bottom:28px; transform:translate(-50%,20px); background:#1A1A2E; color:#FFF9F5; padding:12px 20px; border-radius:12px; font-size:14px; font-weight:600; box-shadow:0 18px 40px -16px rgba(255,92,26,.4); opacity:0; transition:opacity .25s, transform .25s; z-index:200; }
.pa-toast.is-in { opacity:1; transform:translate(-50%,0); }
.pa-toast--err { background:#b42318; }

.pa-auth-card .pa-input:focus { border-color: var(--g); box-shadow: 0 0 0 3px rgba(255,92,26,.12); outline: none; }

.pa-modal .pa-label { color: var(--g); font-weight: 700; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; margin-bottom: 5px; display: block; }