/**
 * Japet Portal - shared brand design tokens.
 *
 * Brand palette supplied by V-Shield Asia / JAPET:
 *   Primary:   #1f576c (deep teal - headings, primary actions)
 *   Secondary: #dc9b15 (gold - accents, highlights, badges)
 *   Background:#d7f2f8 (pale aqua - app shell / section backgrounds)
 *
 * Loaded once by public/class-public.php on any page that renders
 * a Japet Portal shortcode, so all templates share one consistent,
 * professional look instead of duplicating inline styles.
 */

:root {
	--japet-primary: #1f576c;       /* Deep teal - headings, primary buttons */
	--japet-primary-dark: #163f4e;  /* Hover/active state for primary actions */
	--japet-primary-bright: #2f7d99; /* Lighter teal - gradients, accents */
	--japet-secondary: #dc9b15;     /* Brand gold - badges, highlights, focus */
	--japet-secondary-dark: #b97e0e; /* Hover state for gold accents */
	--japet-bg: #d7f2f8;            /* Brand pale aqua - app shell background */
	--japet-bg-soft: #eefbfd;       /* Lighter aqua tint for subtle panels */
	--japet-text: #16323d;          /* Dark teal-neutral, high contrast on white/aqua */
	--japet-text-muted: #5b7480;
	--japet-border: #c3dde3;
	--japet-surface: #ffffff;
	--japet-surface-alt: #fff6e3;   /* Soft gold-tinted surface for hints/callouts */
	--japet-success: #1a7f4e;
	--japet-success-bg: #eafaf1;
	--japet-warning: #a86b0c;
	--japet-warning-bg: #fff3d9;
	--japet-danger: #c0362c;
	--japet-danger-bg: #fdeeed;
	--japet-info: #1f576c;
	--japet-info-bg: #e6f6fa;
	--japet-radius: 10px;
	--japet-radius-lg: 16px;
	--japet-shadow: 0 2px 10px rgba(22, 50, 61, 0.08);
	--japet-shadow-md: 0 8px 24px rgba(22, 50, 61, 0.14);
	--japet-font-heading: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
	--japet-font-body: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
}

.japet-wrap {
	box-sizing: border-box;
	max-width: 520px;
	margin: 24px auto;
	font-family: var( --japet-font-body );
	color: var( --japet-text );
	background: var( --japet-bg );
	border-radius: 22px;
	box-shadow: var( --japet-shadow );
	overflow: hidden;
	padding-bottom: 6px;
}

.japet-wrap * {
	box-sizing: border-box;
}

.japet-wrap h1, .japet-wrap h2, .japet-wrap h3 {
	font-family: var( --japet-font-heading );
	color: var( --japet-primary );
	font-weight: 700;
}

/* Brand header: V-Shield Asia is the parent brand and always
   appears larger than the JAPET.W+ product mark beside it. */
.japet-brand-header {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 16px;
	padding: 26px 16px 14px;
}

.japet-brand-header img {
	width: auto;
	display: block;
}

.japet-brand-header img.japet-logo-vshield {
	height: 52px;
}

.japet-brand-header img.japet-logo-japet {
	height: 24px;
	opacity: 0.88;
}

.japet-brand-divider {
	width: 1px;
	height: 34px;
	background: var( --japet-border );
	flex: 0 0 auto;
}

/* Hero banner: product photography used to make the auth/dashboard
   screens feel like a polished product rather than a bare form. */
.japet-hero {
	position: relative;
	margin: 0 16px 18px;
	border-radius: var( --japet-radius-lg );
	overflow: hidden;
	box-shadow: var( --japet-shadow-md );
	background: var( --japet-primary );
}

.japet-hero img {
	width: 100%;
	height: 168px;
	object-fit: cover;
	display: block;
}

.japet-hero .japet-hero-overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient( 180deg, rgba( 22, 50, 61, 0 ) 35%, rgba( 22, 50, 61, 0.8 ) 100% );
	display: flex;
	align-items: flex-end;
	padding: 14px 16px;
}

.japet-hero .japet-hero-overlay p {
	color: #fff;
	font-family: var( --japet-font-heading );
	font-weight: 700;
	font-size: 14.5px;
	line-height: 1.4;
	margin: 0;
	text-shadow: 0 1px 4px rgba( 0, 0, 0, 0.35 );
}

/* Horizontal photo gallery (device usage / fit reminders). */
.japet-gallery {
	display: flex;
	gap: 10px;
	overflow-x: auto;
	padding: 2px 2px 6px;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
}

.japet-gallery-item {
	flex: 0 0 auto;
	width: 148px;
	scroll-snap-align: start;
	border-radius: var( --japet-radius );
	overflow: hidden;
	background: var( --japet-surface );
	box-shadow: var( --japet-shadow );
}

.japet-gallery-item img {
	width: 100%;
	height: 108px;
	object-fit: cover;
	display: block;
}

.japet-gallery-item span {
	display: block;
	font-size: 11.5px;
	font-weight: 600;
	padding: 7px 8px;
	color: var( --japet-text-muted );
	text-align: center;
}


.japet-primary-btn {
	display: block;
	width: 100%;
	min-height: 48px;
	font-family: var( --japet-font-body );
	font-size: 16px;
	font-weight: 700;
	color: #fff;
	background: var( --japet-primary );
	border: none;
	border-radius: var( --japet-radius );
	padding: 12px 16px;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	touch-action: manipulation;
	box-shadow: var( --japet-shadow );
	transition: background-color 0.15s ease, box-shadow 0.15s ease;
}

.japet-primary-btn:hover,
.japet-primary-btn:focus {
	background: var( --japet-primary-dark );
	box-shadow: var( --japet-shadow-md );
}

.japet-primary-btn:disabled,
.japet-primary-btn.is-disabled {
	background: #a8b0b5;
	box-shadow: none;
	cursor: not-allowed;
	pointer-events: none;
}

.japet-secondary-btn {
	display: block;
	width: 100%;
	min-height: 44px;
	font-family: var( --japet-font-body );
	font-size: 15px;
	font-weight: 600;
	color: var( --japet-primary );
	background: transparent;
	border: 2px solid var( --japet-primary );
	border-radius: var( --japet-radius );
	padding: 10px 16px;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	touch-action: manipulation;
}

.japet-accent-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 40px;
	font-family: var( --japet-font-body );
	font-size: 14px;
	font-weight: 700;
	color: var( --japet-primary );
	background: var( --japet-secondary );
	border: none;
	border-radius: var( --japet-radius );
	padding: 8px 14px;
	cursor: pointer;
}

.japet-card {
	background: var( --japet-surface );
	border: 1px solid var( --japet-border );
	border-radius: var( --japet-radius-lg );
	padding: 18px;
	margin: 0 16px 14px;
	box-shadow: var( --japet-shadow );
}

.japet-wrap .japet-checkin .japet-card,
.japet-wrap .japet-dashboard .japet-card {
	margin-left: 0;
	margin-right: 0;
}

.japet-notice {
	font-family: var( --japet-font-body );
	padding: 16px;
	color: var( --japet-danger );
}

.japet-help-text {
	font-size: 13px;
	color: var( --japet-text-muted );
	line-height: 1.5;
	margin: 6px 0 0;
}

.japet-error-banner {
	background: var( --japet-danger-bg );
	border: 1px solid #f2b8b3;
	color: var( --japet-danger );
	padding: 12px;
	border-radius: var( --japet-radius );
	font-size: 14px;
	margin-bottom: 14px;
	display: none;
}

.japet-error-banner.is-visible {
	display: block;
}

.japet-offline-note {
	background: var( --japet-warning-bg );
	border: 1px solid #eccf8f;
	color: var( --japet-warning );
	padding: 10px 12px;
	border-radius: var( --japet-radius );
	font-size: 13px;
	margin-bottom: 14px;
	display: none;
}

.japet-offline-note.is-visible {
	display: block;
}

.japet-info-banner {
	background: var( --japet-info-bg );
	border: 1px solid #b7dee8;
	color: var( --japet-primary );
	padding: 12px 14px;
	border-radius: var( --japet-radius );
	font-size: 14px;
	margin-bottom: 14px;
	line-height: 1.5;
}

/* Dashboard isolation: the host WordPress theme must not change the
   portal's palette, typography, spacing, links, or controls. */
#japet-dashboard-root {
	width: 100% !important;
	max-width: 560px !important;
	margin: 24px auto !important;
	padding: 0 0 28px !important;
	background: #d7f2f8 !important;
	border-radius: 24px !important;
	overflow: hidden !important;
	color: #16323d !important;
	font-family: var( --japet-font-body ) !important;
}

#japet-dashboard-root,
#japet-dashboard-root * {
	box-sizing: border-box !important;
}

#japet-dashboard-root h1,
#japet-dashboard-root h2,
#japet-dashboard-root h3,
#japet-dashboard-root p,
#japet-dashboard-root span,
#japet-dashboard-root strong {
	font-family: var( --japet-font-body ) !important;
}

#japet-dashboard-root h1,
#japet-dashboard-root h2,
#japet-dashboard-root h3 {
	color: #1f576c !important;
}

#japet-dashboard-root .japet-dashboard-inner {
	padding: 0 22px !important;
}

#japet-dashboard-root .japet-dashboard-account-actions {
	display: flex !important;
	justify-content: flex-end !important;
	padding: 0 0 16px !important;
}

#japet-dashboard-root .japet-logout-btn,
#japet-dashboard-root a.japet-logout-btn {
	appearance: none !important;
	-webkit-appearance: none !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 7px !important;
	min-height: 38px !important;
	margin: 0 !important;
	padding: 8px 13px !important;
	border: 1px solid #1f576c !important;
	border-radius: 999px !important;
	background: #ffffff !important;
	box-shadow: none !important;
	color: #1f576c !important;
	font-family: var( --japet-font-body ) !important;
	font-size: 13px !important;
	font-weight: 800 !important;
	line-height: 1.2 !important;
	text-align: center !important;
	text-decoration: none !important;
	cursor: pointer !important;
	transition: background-color .15s ease, color .15s ease, border-color .15s ease !important;
}

#japet-dashboard-root .japet-logout-btn:hover,
#japet-dashboard-root .japet-logout-btn:focus,
#japet-dashboard-root a.japet-logout-btn:hover,
#japet-dashboard-root a.japet-logout-btn:focus {
	background: #1f576c !important;
	border-color: #1f576c !important;
	color: #ffffff !important;
	text-decoration: none !important;
	outline: 3px solid rgba( 1, 212, 255, .28 ) !important;
	outline-offset: 2px !important;
}

#japet-dashboard-root .japet-brand-header {
	padding: 24px 22px 16px !important;
	background: #ffffff !important;
}

#japet-dashboard-root .japet-dashboard-hero {
	position: relative !important;
	height: 178px !important;
	margin: 0 22px 16px !important;
	overflow: hidden !important;
	border-radius: 20px !important;
	background: #1f576c !important;
	box-shadow: 0 10px 26px rgba( 22, 50, 61, .16 ) !important;
}

#japet-dashboard-root .japet-dashboard-hero img {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
	display: block !important;
}

#japet-dashboard-root .japet-dashboard-hero::after {
	content: '' !important;
	position: absolute !important;
	inset: 0 !important;
	background: linear-gradient( 180deg, rgba( 22, 50, 61, 0 ) 20%, rgba( 22, 50, 61, .9 ) 100% ) !important;
	pointer-events: none !important;
}

#japet-dashboard-root .japet-dashboard-hero-copy {
	position: absolute !important;
	z-index: 1 !important;
	left: 18px !important;
	right: 18px !important;
	bottom: 16px !important;
	display: flex !important;
	flex-direction: column !important;
	gap: 4px !important;
}

#japet-dashboard-root .japet-dashboard-hero-kicker {
	color: rgba( 255, 255, 255, .78 ) !important;
	font-size: 10px !important;
	font-weight: 800 !important;
	letter-spacing: .12em !important;
	line-height: 1.2 !important;
	text-transform: uppercase !important;
}

#japet-dashboard-root .japet-dashboard-hero-copy strong {
	color: #ffffff !important;
	font-size: 18px !important;
	font-weight: 800 !important;
	line-height: 1.2 !important;
}

#japet-dashboard-root .japet-card {
	margin: 0 0 14px !important;
	border: 1px solid #c3dde3 !important;
	border-radius: 18px !important;
	box-shadow: 0 8px 24px rgba( 22, 50, 61, .09 ) !important;
	background: #ffffff !important;
}

#japet-dashboard-root .japet-progress-card {
	position: relative !important;
	overflow: hidden !important;
	padding: 22px !important;
}

#japet-dashboard-root .japet-progress-number {
	color: #1f576c !important;
	font-family: var( --japet-font-heading ) !important;
	font-size: 30px !important;
	font-weight: 800 !important;
	line-height: 1 !important;
}

#japet-dashboard-root .japet-progress-percent,
#japet-dashboard-root .japet-target-value {
	color: #b97e0e !important;
	font-family: var( --japet-font-heading ) !important;
	font-weight: 800 !important;
}

#japet-dashboard-root .japet-progress-track {
	width: 100% !important;
	height: 11px !important;
	background: #e8f0f2 !important;
	border-radius: 999px !important;
	overflow: hidden !important;
}

#japet-dashboard-root .japet-progress-fill {
	height: 100% !important;
	background: linear-gradient( 90deg, #1f576c, #2f7d99 ) !important;
	border-radius: 999px !important;
}

#japet-dashboard-root .japet-target-card {
	display: flex !important;
	align-items: center !important;
	gap: 13px !important;
	padding: 17px 18px !important;
}

#japet-dashboard-root .japet-target-icon {
	display: grid !important;
	place-items: center !important;
	width: 44px !important;
	height: 44px !important;
	flex: 0 0 44px !important;
	border-radius: 14px !important;
	background: #fff6e3 !important;
	color: #b97e0e !important;
}

#japet-dashboard-root .japet-fit-card {
	padding: 0 !important;
	overflow: hidden !important;
}

#japet-dashboard-root .japet-fit-card img {
	width: 100% !important;
	height: 210px !important;
	object-fit: cover !important;
	display: block !important;
}

#japet-dashboard-root .japet-section-title {
	display: flex !important;
	align-items: center !important;
	gap: 9px !important;
	color: #1f576c !important;
	font-size: 15px !important;
	font-weight: 800 !important;
	line-height: 1.3 !important;
	margin: 21px 0 11px !important;
}

#japet-dashboard-root .japet-section-title::before {
	content: '' !important;
	width: 5px !important;
	height: 21px !important;
	flex: 0 0 5px !important;
	border-radius: 999px !important;
	background: #dc9b15 !important;
}

#japet-dashboard-root .japet-gallery {
	display: grid !important;
	grid-template-columns: 1fr !important;
	gap: 0 !important;
	padding: 0 !important;
	overflow: hidden !important;
	border-radius: 18px !important;
	box-shadow: 0 8px 24px rgba( 22, 50, 61, .12 ) !important;
}

#japet-dashboard-root .japet-gallery-item {
	position: relative !important;
	display: block !important;
	width: 100% !important;
	height: 190px !important;
	min-width: 0 !important;
	flex: none !important;
	overflow: hidden !important;
	background: #1f576c !important;
}

#japet-dashboard-root .japet-gallery-item::after {
	content: '' !important;
	position: absolute !important;
	inset: 0 !important;
	background: linear-gradient( 180deg, rgba( 22, 50, 61, 0 ) 25%, rgba( 22, 50, 61, .88 ) 100% ) !important;
	pointer-events: none !important;
}

#japet-dashboard-root .japet-gallery-item img {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
	display: block !important;
}

#japet-dashboard-root .japet-gallery-item span {
	position: absolute !important;
	z-index: 1 !important;
	left: 16px !important;
	right: 16px !important;
	bottom: 14px !important;
	display: block !important;
	width: auto !important;
	min-height: 0 !important;
	color: #ffffff !important;
	font-size: 13px !important;
	font-weight: 700 !important;
	line-height: 1.35 !important;
	padding: 0 !important;
	text-align: left !important;
}

/* Reset theme button/link rules and keep every dashboard control branded. */
#japet-dashboard-root .japet-primary-btn,
#japet-dashboard-root button.japet-primary-btn,
#japet-dashboard-root a.japet-primary-btn {
	appearance: none !important;
	-webkit-appearance: none !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 100% !important;
	min-height: 48px !important;
	margin: 0 !important;
	padding: 12px 16px !important;
	border: 0 !important;
	border-radius: 10px !important;
	background: #1f576c !important;
	box-shadow: none !important;
	color: #ffffff !important;
	font-family: var( --japet-font-body ) !important;
	font-size: 16px !important;
	font-weight: 700 !important;
	line-height: 1.2 !important;
	text-align: center !important;
	text-decoration: none !important;
	cursor: pointer !important;
}

#japet-dashboard-root .japet-primary-btn:hover,
#japet-dashboard-root .japet-primary-btn:focus,
#japet-dashboard-root a.japet-primary-btn:hover,
#japet-dashboard-root a.japet-primary-btn:focus {
	background: #163f4e !important;
	color: #ffffff !important;
	text-decoration: none !important;
}

#japet-dashboard-root .japet-action-card {
	position: relative !important;
	overflow: hidden !important;
	padding: 22px !important;
	background: #1f576c !important;
	border: 0 !important;
	color: #ffffff !important;
}

#japet-dashboard-root .japet-action-card h2,
#japet-dashboard-root .japet-action-card p {
	position: relative !important;
	color: #ffffff !important;
}

#japet-dashboard-root .japet-action-card h2 {
	font-size: 20px !important;
	line-height: 1.25 !important;
	margin: 0 0 7px !important;
}

#japet-dashboard-root .japet-action-card p {
	color: rgba( 255, 255, 255, .82 ) !important;
	font-size: 13px !important;
	line-height: 1.5 !important;
	margin: 0 0 17px !important;
}

#japet-dashboard-root .japet-action-card .japet-primary-btn {
	background: #ffffff !important;
	color: #1f576c !important;
}

#japet-dashboard-root .japet-action-card .japet-primary-btn:hover,
#japet-dashboard-root .japet-action-card .japet-primary-btn:focus {
	background: #eefbfd !important;
	color: #163f4e !important;
}

#japet-dashboard-root .japet-action-card .japet-status-note {
	color: rgba( 255, 255, 255, .78 ) !important;
	text-align: center !important;
}

@media ( max-width: 420px ) {
	#japet-dashboard-root {
		margin: 0 auto !important;
		border-radius: 0 !important;
	}

	#japet-dashboard-root .japet-dashboard-inner {
		padding-left: 18px !important;
		padding-right: 18px !important;
	}

	#japet-dashboard-root .japet-dashboard-hero {
		margin-left: 18px !important;
		margin-right: 18px !important;
	}
}


#japet-dashboard-root .japet-primary-btn:disabled,
#japet-dashboard-root .japet-primary-btn.is-disabled {
	background: #dc9b15 !important;
	color: #1f576c !important;
	opacity: .72 !important;
	box-shadow: none !important;
}

#japet-dashboard-root .japet-status-note {
	color: #5b7480 !important;
	font-family: var( --japet-font-body ) !important;
	font-size: 13px !important;
	line-height: 1.4 !important;
}

/* Auth screen isolation and responsive layout. The auth page is
   embedded inside arbitrary WordPress themes/page builders, so every
   form control is explicitly reset and branded here. */
#japet-auth-root {
	width: 100% !important;
	max-width: 760px !important;
	margin: 24px auto !important;
	padding: 0 0 28px !important;
	background: #d7f2f8 !important;
	border-radius: 26px !important;
	overflow: hidden !important;
	color: #1f576c !important;
	font-family: var( --japet-font-body ) !important;
}

#japet-auth-root,
#japet-auth-root * {
	box-sizing: border-box !important;
}

#japet-auth-root h1,
#japet-auth-root h2,
#japet-auth-root h3,
#japet-auth-root p,
#japet-auth-root label,
#japet-auth-root span,
#japet-auth-root button,
#japet-auth-root input,
#japet-auth-root select {
	font-family: var( --japet-font-body ) !important;
}

#japet-auth-root .japet-brand-header {
	padding: 28px 24px 18px !important;
	background: #ffffff !important;
}

#japet-auth-root .japet-hero {
	position: relative !important;
	margin: 0 28px 22px !important;
	border-radius: 20px !important;
	overflow: hidden !important;
	background: #1f576c !important;
	box-shadow: 0 10px 28px rgba( 22, 50, 61, .16 ) !important;
}

#japet-auth-root .japet-hero img {
	width: 100% !important;
	height: 220px !important;
	object-fit: cover !important;
	display: block !important;
}

#japet-auth-root .japet-hero .japet-hero-overlay {
	background: linear-gradient( 180deg, rgba( 22, 50, 61, 0 ) 25%, rgba( 22, 50, 61, .9 ) 100% ) !important;
	padding: 18px 20px !important;
}

#japet-auth-root .japet-hero .japet-hero-overlay p {
	color: #ffffff !important;
	font-size: 15px !important;
	font-weight: 700 !important;
	line-height: 1.4 !important;
	margin: 0 !important;
}

#japet-auth-root .japet-auth-inner {
	margin: 0 28px !important;
	padding: 28px !important;
	background: #ffffff !important;
	border: 1px solid rgba( 31, 87, 108, .12 ) !important;
	border-radius: 22px !important;
	box-shadow: 0 10px 28px rgba( 22, 50, 61, .1 ) !important;
}

#japet-auth-root .japet-auth-inner h1 {
	color: #1f576c !important;
	font-size: 25px !important;
	font-weight: 800 !important;
	line-height: 1.2 !important;
	margin: 0 0 20px !important;
	text-align: center !important;
}

#japet-auth-root .japet-tabs {
	display: grid !important;
	grid-template-columns: repeat( 2, minmax( 0, 1fr ) ) !important;
	gap: 4px !important;
	width: 100% !important;
	margin: 0 0 22px !important;
	padding: 4px !important;
	background: #eefbfd !important;
	border: 1px solid #b8e8f2 !important;
	border-radius: 13px !important;
	box-shadow: none !important;
}

#japet-auth-root .japet-tab-btn {
	appearance: none !important;
	-webkit-appearance: none !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 100% !important;
	min-height: 46px !important;
	margin: 0 !important;
	padding: 10px 12px !important;
	border: 0 !important;
	border-radius: 9px !important;
	background: transparent !important;
	color: #1f576c !important;
	font-size: 14px !important;
	font-weight: 800 !important;
	line-height: 1.2 !important;
	cursor: pointer !important;
}

#japet-auth-root .japet-tab-btn:hover,
#japet-auth-root .japet-tab-btn:focus {
	background: rgba( 1, 212, 255, .18 ) !important;
	color: #1f576c !important;
	outline: none !important;
}

#japet-auth-root .japet-tab-btn.is-active {
	background: #1f576c !important;
	color: #ffffff !important;
	box-shadow: 0 4px 10px rgba( 31, 87, 108, .2 ) !important;
}

#japet-auth-root .japet-field {
	width: 100% !important;
	margin: 0 0 17px !important;
}

#japet-auth-root .japet-field label {
	display: block !important;
	color: #1f576c !important;
	font-size: 13px !important;
	font-weight: 800 !important;
	line-height: 1.3 !important;
	margin: 0 0 7px !important;
}

#japet-auth-root .japet-field input,
#japet-auth-root .japet-field select {
	appearance: none !important;
	-webkit-appearance: none !important;
	display: block !important;
	width: 100% !important;
	max-width: 100% !important;
	min-height: 50px !important;
	margin: 0 !important;
	padding: 12px 14px !important;
	border: 1px solid #a9cdd6 !important;
	border-radius: 11px !important;
	outline: none !important;
	background: #ffffff !important;
	box-shadow: none !important;
	color: #1f576c !important;
	font-size: 15px !important;
	font-weight: 500 !important;
	line-height: 1.3 !important;
}

#japet-auth-root .japet-field input::placeholder {
	color: rgba( 31, 87, 108, .52 ) !important;
	opacity: 1 !important;
}

#japet-auth-root .japet-field input:hover,
#japet-auth-root .japet-field select:hover {
	border-color: #01d4ff !important;
}

#japet-auth-root .japet-field input:focus,
#japet-auth-root .japet-field select:focus {
	border-color: #01d4ff !important;
	box-shadow: 0 0 0 3px rgba( 1, 212, 255, .2 ) !important;
}

#japet-auth-root .japet-password-wrap {
	position: relative !important;
	width: 100% !important;
}

#japet-auth-root .japet-password-wrap input {
	padding-right: 76px !important;
}

#japet-auth-root .japet-toggle-password {
	appearance: none !important;
	-webkit-appearance: none !important;
	position: absolute !important;
	right: 6px !important;
	top: 6px !important;
	bottom: 6px !important;
	width: 62px !important;
	min-width: 62px !important;
	min-height: 0 !important;
	margin: 0 !important;
	padding: 6px 8px !important;
	border: 0 !important;
	border-radius: 8px !important;
	background: #01d4ff !important;
	color: #1f576c !important;
	font-size: 11px !important;
	font-weight: 800 !important;
	line-height: 1 !important;
	cursor: pointer !important;
}

#japet-auth-root .japet-toggle-password:hover,
#japet-auth-root .japet-toggle-password:focus {
	background: #01d4ff !important;
	color: #1f576c !important;
	outline: 2px solid rgba( 31, 87, 108, .25 ) !important;
}

#japet-auth-root .japet-auth-section {
	width: 100% !important;
}

#japet-auth-root .japet-ref-code-row {
	display: flex !important;
	align-items: stretch !important;
	gap: 8px !important;
	width: 100% !important;
}

#japet-auth-root .japet-ref-code-prefix {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	flex: 0 0 auto !important;
	min-height: 50px !important;
	padding: 0 12px !important;
	border-radius: 11px !important;
	background: #1f576c !important;
	color: #ffffff !important;
	font-size: 13px !important;
	font-weight: 800 !important;
	letter-spacing: .03em !important;
	white-space: nowrap !important;
}

#japet-auth-root .japet-ref-code-row input {
	min-width: 0 !important;
	text-align: center !important;
	font-weight: 800 !important;
	letter-spacing: .18em !important;
}

#japet-auth-root .japet-ref-hint {
	display: flex !important;
	align-items: flex-start !important;
	gap: 8px !important;
	margin: 9px 0 0 !important;
	padding: 11px 12px !important;
	border: 1px solid #8deaff !important;
	border-radius: 11px !important;
	background: rgba( 1, 212, 255, .1 ) !important;
	color: #1f576c !important;
	font-size: 12px !important;
	line-height: 1.5 !important;
}

#japet-auth-root .japet-help-text {
	color: #5b7480 !important;
	font-size: 12px !important;
	line-height: 1.45 !important;
	margin: 6px 0 0 !important;
}

#japet-auth-root .japet-primary-btn,
#japet-auth-root button.japet-primary-btn {
	appearance: none !important;
	-webkit-appearance: none !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 100% !important;
	min-height: 52px !important;
	margin: 4px 0 0 !important;
	padding: 13px 16px !important;
	border: 0 !important;
	border-radius: 11px !important;
	background: #1f576c !important;
	box-shadow: 0 6px 14px rgba( 31, 87, 108, .2 ) !important;
	color: #ffffff !important;
	font-family: var( --japet-font-body ) !important;
	font-size: 15px !important;
	font-weight: 800 !important;
	line-height: 1.2 !important;
	text-align: center !important;
	text-decoration: none !important;
	cursor: pointer !important;
}

#japet-auth-root .japet-primary-btn:hover,
#japet-auth-root .japet-primary-btn:focus,
#japet-auth-root button.japet-primary-btn:hover,
#japet-auth-root button.japet-primary-btn:focus {
	background: #01d4ff !important;
	color: #1f576c !important;
	box-shadow: 0 7px 16px rgba( 1, 212, 255, .28 ) !important;
	text-decoration: none !important;
}

#japet-auth-root .japet-error-banner {
	margin: 0 0 16px !important;
	padding: 11px 12px !important;
	border: 1px solid #dc9b15 !important;
	border-radius: 10px !important;
	background: rgba( 220, 155, 21, .12 ) !important;
	color: #1f576c !important;
	font-size: 13px !important;
	line-height: 1.45 !important;
}

@media ( max-width: 640px ) {
	#japet-auth-root {
		max-width: 100% !important;
		margin: 0 auto !important;
		border-radius: 0 !important;
	}

	#japet-auth-root .japet-brand-header {
		padding: 22px 16px 14px !important;
	}

	#japet-auth-root .japet-hero {
		margin: 0 16px 16px !important;
		border-radius: 16px !important;
	}

	#japet-auth-root .japet-hero img {
		height: 185px !important;
	}

	#japet-auth-root .japet-auth-inner {
		margin: 0 16px !important;
		padding: 21px 17px 23px !important;
		border-radius: 18px !important;
	}

	#japet-auth-root .japet-auth-inner h1 {
		font-size: 22px !important;
	}
}

@media ( max-width: 380px ) {
	#japet-auth-root .japet-ref-code-row {
		gap: 5px !important;
	}

	#japet-auth-root .japet-ref-code-prefix {
		padding: 0 8px !important;
		font-size: 11px !important;
	}

	#japet-auth-root .japet-ref-code-row input {
		letter-spacing: .1em !important;
	}
}

/* Final auth action override: cyan is the auth accent, teal is the
   supporting brand color. */
#japet-auth-root .japet-primary-btn,
#japet-auth-root button.japet-primary-btn {
	background: #01d4ff !important;
	color: #1f576c !important;
}

#japet-auth-root .japet-primary-btn:hover,
#japet-auth-root .japet-primary-btn:focus,
#japet-auth-root button.japet-primary-btn:hover,
#japet-auth-root button.japet-primary-btn:focus {
	background: #1f576c !important;
	color: #ffffff !important;
}

#japet-auth-root .japet-primary-btn:disabled,
#japet-auth-root .japet-primary-btn.is-disabled {
	background: #01d4ff !important;
	color: #1f576c !important;
	opacity: .65 !important;
}

#japet-auth-root .japet-brand-header img.japet-logo-vshield {
	height: 64px !important;
	width: auto !important;
	max-width: 58% !important;
	object-fit: contain !important;
}

#japet-auth-root .japet-brand-header img.japet-logo-japet {
	height: 30px !important;
	width: auto !important;
	max-width: 34% !important;
	object-fit: contain !important;
	opacity: 1 !important;
}

@media ( max-width: 380px ) {
	#japet-auth-root .japet-brand-header img.japet-logo-vshield {
		height: 54px !important;
	}

	#japet-auth-root .japet-brand-header img.japet-logo-japet {
		height: 25px !important;
	}
}

#japet-auth-root form,
#japet-auth-root .japet-auth-section form {
	width: 100% !important;
	max-width: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
}

#japet-auth-root input,
#japet-auth-root select,
#japet-auth-root button {
	outline-offset: 2px !important;
}


/* Check-in screen isolation: keep the daily and milestone forms independent
   from WordPress themes and page builders while retaining the JS state hooks. */
#japet-checkin-root {
	width: 100% !important;
	max-width: 760px !important;
	margin: 24px auto !important;
	padding: 0 0 30px !important;
	background: #d7f2f8 !important;
	border: 0 !important;
	border-radius: 26px !important;
	overflow: hidden !important;
	color: #16323d !important;
	font-family: var( --japet-font-body ) !important;
}

#japet-checkin-root,
#japet-checkin-root * {
	box-sizing: border-box !important;
}

#japet-checkin-root h1,
#japet-checkin-root h2,
#japet-checkin-root h3,
#japet-checkin-root p,
#japet-checkin-root label,
#japet-checkin-root span,
#japet-checkin-root button,
#japet-checkin-root input,
#japet-checkin-root select,
#japet-checkin-root textarea {
	font-family: var( --japet-font-body ) !important;
}

#japet-checkin-root .japet-brand-header {
	padding: 27px 24px 17px !important;
	background: #ffffff !important;
}

#japet-checkin-root .japet-brand-header img.japet-logo-vshield {
	height: 64px !important;
	width: auto !important;
	max-width: 58% !important;
	object-fit: contain !important;
}

#japet-checkin-root .japet-brand-header img.japet-logo-japet {
	height: 30px !important;
	width: auto !important;
	max-width: 34% !important;
	object-fit: contain !important;
	opacity: 1 !important;
}

#japet-checkin-root .japet-checkin-inner {
	padding: 0 22px !important;
}


#japet-checkin-root .japet-test-mode-banner {
	margin: 0 0 16px !important;
	padding: 11px 13px !important;
	border: 1px solid rgba( 220, 155, 21, .5 ) !important;
	border-radius: 12px !important;
	background: rgba( 220, 155, 21, .14 ) !important;
	color: #7e5707 !important;
	font-size: 12px !important;
	font-weight: 800 !important;
	line-height: 1.4 !important;
	text-align: center !important;
}

#japet-checkin-root h1 {
	margin: 0 0 6px !important;
	color: #1f576c !important;
	font-size: 25px !important;
	font-weight: 800 !important;
	line-height: 1.2 !important;
}

#japet-checkin-root .japet-step-hint {
	margin: 0 0 20px !important;
	color: #5b7480 !important;
	font-size: 13px !important;
	line-height: 1.5 !important;
}

#japet-checkin-root form {
	width: 100% !important;
	margin: 0 !important;
}

#japet-checkin-root .japet-q {
	position: relative !important;
	margin: 0 0 14px !important;
	padding: 19px 18px 18px !important;
	border: 1px solid #c3dde3 !important;
	border-left: 4px solid #01d4ff !important;
	border-radius: 16px !important;
	background: #ffffff !important;
	box-shadow: 0 7px 20px rgba( 22, 50, 61, .075 ) !important;
}

#japet-checkin-root .japet-q-label {
	display: block !important;
	margin: 0 0 12px !important;
	color: #1f576c !important;
	font-size: 15px !important;
	font-weight: 800 !important;
	line-height: 1.4 !important;
	overflow-wrap: anywhere !important;
	word-break: break-word !important;
}

#japet-checkin-root .japet-q-label[for] {
	cursor: pointer !important;
}

#japet-checkin-root .japet-option-grid {
	display: grid !important;
	grid-template-columns: repeat( auto-fit, minmax( 132px, 1fr ) ) !important;
	gap: 9px !important;
}

#japet-checkin-root .japet-option-btn {
	appearance: none !important;
	-webkit-appearance: none !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 100% !important;
	min-width: 0 !important;
	min-height: 46px !important;
	margin: 0 !important;
	padding: 10px 12px !important;
	border: 2px solid #a9cdd6 !important;
	border-radius: 11px !important;
	outline: 0 !important;
	background: #ffffff !important;
	box-shadow: none !important;
	color: #16323d !important;
	font-size: 14px !important;
	font-weight: 600 !important;
	line-height: 1.25 !important;
	text-align: center !important;
	white-space: normal !important;
	overflow-wrap: anywhere !important;
	word-break: break-word !important;
	cursor: pointer !important;
	touch-action: manipulation !important;
	transition: border-color .15s ease, background-color .15s ease, color .15s ease, transform .15s ease !important;
}

#japet-checkin-root .japet-option-btn:hover {
	border-color: #01d4ff !important;
	background: #eefcff !important;
	color: #1f576c !important;
}

#japet-checkin-root .japet-option-btn:focus-visible,
#japet-checkin-root .japet-text-input:focus,
#japet-checkin-root .japet-select-input:focus {
	outline: 3px solid rgba( 1, 212, 255, .28 ) !important;
	outline-offset: 1px !important;
}

#japet-checkin-root .japet-option-btn.is-selected {
	border-color: #1f576c !important;
	background: #1f576c !important;
	box-shadow: inset 0 0 0 2px rgba( 1, 212, 255, .48 ) !important;
	color: #ffffff !important;
	font-weight: 800 !important;
}

#japet-checkin-root .japet-option-btn.is-selected:hover,
#japet-checkin-root .japet-option-btn.is-selected:focus-visible {
	border-color: #01d4ff !important;
	background: #163f4e !important;
	color: #ffffff !important;
}

#japet-checkin-root .japet-scale-grid {
	display: grid !important;
	grid-template-columns: repeat( 5, minmax( 0, 1fr ) ) !important;
	gap: 8px !important;
}

#japet-checkin-root .japet-scale-grid .japet-option-btn {
	min-width: 0 !important;
	padding-left: 6px !important;
	padding-right: 6px !important;
}

#japet-checkin-root .japet-scale-grid-11 {
	display: grid !important;
	grid-template-columns: repeat( 6, minmax( 0, 1fr ) ) !important;
	gap: 7px !important;
}

#japet-checkin-root .japet-scale-grid-11 .japet-option-btn {
	min-width: 0 !important;
	padding: 9px 5px !important;
	font-size: 13px !important;
}

#japet-checkin-root .japet-tag-grid {
	grid-template-columns: repeat( auto-fit, minmax( 145px, 1fr ) ) !important;
}

#japet-checkin-root .japet-scale-caption {
	display: flex !important;
	flex-wrap: wrap !important;
	justify-content: space-between !important;
	gap: 4px 12px !important;
	margin: 8px 1px 0 !important;
	color: #5b7480 !important;
	font-size: 11px !important;
	font-weight: 600 !important;
	line-height: 1.35 !important;
	overflow-wrap: anywhere !important;
	word-break: break-word !important;
}

#japet-checkin-root .japet-scale-caption span {
	min-width: 0 !important;
}

#japet-checkin-root .japet-text-input,
#japet-checkin-root .japet-select-input {
	appearance: none !important;
	-webkit-appearance: none !important;
	display: block !important;
	width: 100% !important;
	max-width: 100% !important;
	min-height: 48px !important;
	margin: 0 !important;
	padding: 11px 13px !important;
	border: 1px solid #a9cdd6 !important;
	border-radius: 11px !important;
	outline: 0 !important;
	background: #ffffff !important;
	box-shadow: none !important;
	color: #16323d !important;
	font-size: 14px !important;
	font-weight: 500 !important;
	line-height: 1.4 !important;
}

#japet-checkin-root .japet-text-input {
	min-height: 92px !important;
	resize: vertical !important;
}

#japet-checkin-root .japet-text-input[type="number"] {
	min-height: 48px !important;
}

#japet-checkin-root .japet-text-input:hover,
#japet-checkin-root .japet-select-input:hover {
	border-color: #01d4ff !important;
}

#japet-checkin-root .japet-text-input:focus,
#japet-checkin-root .japet-select-input:focus {
	border-color: #01d4ff !important;
	box-shadow: 0 0 0 3px rgba( 1, 212, 255, .18 ) !important;
}

#japet-checkin-root .japet-text-input::placeholder {
	color: rgba( 31, 87, 108, .55 ) !important;
	opacity: 1 !important;
}

#japet-checkin-root .japet-conditional {
	display: none;
	margin-top: 13px !important;
	padding-top: 13px !important;
	border-top: 1px solid #dcebef !important;
}

#japet-checkin-root .japet-conditional.is-visible {
	display: block;
}

#japet-checkin-root .japet-conditional .japet-q-label {
	margin-top: 0 !important;
	font-size: 13px !important;
}

#japet-checkin-root .japet-error-banner,
#japet-checkin-root .japet-offline-note {
	margin: 0 0 15px !important;
	padding: 12px 13px !important;
	border-radius: 11px !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	line-height: 1.45 !important;
}

#japet-checkin-root .japet-error-banner {
	border: 1px solid rgba( 220, 155, 21, .55 ) !important;
	background: rgba( 220, 155, 21, .13 ) !important;
	color: #704c05 !important;
}

#japet-checkin-root .japet-offline-note {
	border: 1px solid #f0c77b !important;
	background: #fff7e7 !important;
	color: #7e5707 !important;
}

#japet-checkin-root .japet-milestone-section {
	display: none;
}

#japet-checkin-root .japet-milestone-section.is-visible {
	display: block;
}

#japet-checkin-root .japet-milestone-intro {
	margin: 0 0 16px !important;
	padding: 15px 16px !important;
	border: 1px solid rgba( 1, 212, 255, .5 ) !important;
	border-left: 4px solid #dc9b15 !important;
	border-radius: 12px !important;
	background: #eefbfd !important;
	color: #1f576c !important;
	font-size: 14px !important;
	font-weight: 600 !important;
	line-height: 1.5 !important;
}

#japet-checkin-root .japet-primary-btn,
#japet-checkin-root button.japet-primary-btn,
#japet-checkin-root a.japet-primary-btn {
	appearance: none !important;
	-webkit-appearance: none !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 100% !important;
	min-height: 52px !important;
	margin: 18px 0 0 !important;
	padding: 13px 16px !important;
	border: 0 !important;
	border-radius: 11px !important;
	background: #01d4ff !important;
	box-shadow: 0 7px 16px rgba( 1, 212, 255, .2 ) !important;
	color: #1f576c !important;
	font-size: 15px !important;
	font-weight: 800 !important;
	line-height: 1.2 !important;
	text-align: center !important;
	text-decoration: none !important;
	cursor: pointer !important;
}

#japet-checkin-root .japet-primary-btn:hover,
#japet-checkin-root .japet-primary-btn:focus,
#japet-checkin-root button.japet-primary-btn:hover,
#japet-checkin-root button.japet-primary-btn:focus,
#japet-checkin-root a.japet-primary-btn:hover,
#japet-checkin-root a.japet-primary-btn:focus {
	background: #1f576c !important;
	box-shadow: 0 8px 18px rgba( 31, 87, 108, .22 ) !important;
	color: #ffffff !important;
	text-decoration: none !important;
}

#japet-checkin-root .japet-primary-btn:disabled,
#japet-checkin-root .japet-primary-btn.is-disabled {
	background: #8deaff !important;
	box-shadow: none !important;
	color: #1f576c !important;
	opacity: .75 !important;
	cursor: not-allowed !important;
}

#japet-checkin-root .japet-confirmation {
	display: none;
	padding: 54px 18px 30px !important;
	text-align: center !important;
}

#japet-checkin-root .japet-confirmation.is-visible {
	display: block;
}

#japet-checkin-root .japet-confirmation .japet-check-icon {
	display: grid !important;
	place-items: center !important;
	width: 70px !important;
	height: 70px !important;
	margin: 0 auto 19px !important;
	border: 6px solid rgba( 1, 212, 255, .22 ) !important;
	border-radius: 50% !important;
	background: #1f576c !important;
	color: #ffffff !important;
	font-size: 30px !important;
	line-height: 1 !important;
}

#japet-checkin-root .japet-confirmation h2 {
	margin: 0 0 9px !important;
	color: #1f576c !important;
	font-size: 22px !important;
	font-weight: 800 !important;
	line-height: 1.25 !important;
}

#japet-checkin-root .japet-confirmation p {
	margin: 0 auto 25px !important;
	max-width: 430px !important;
	color: #5b7480 !important;
	font-size: 14px !important;
	line-height: 1.55 !important;
}

@media ( max-width: 640px ) {
	#japet-checkin-root {
		max-width: 100% !important;
		margin: 0 auto !important;
		border-radius: 0 !important;
	}

	#japet-checkin-root .japet-brand-header {
		padding: 23px 17px 15px !important;
	}

	#japet-checkin-root .japet-checkin-inner {
		padding: 0 16px !important;
	}


	#japet-checkin-root h1 {
		font-size: 22px !important;
	}

	#japet-checkin-root .japet-q {
		padding: 17px 15px 15px !important;
	}

	#japet-checkin-root .japet-option-grid {
		grid-template-columns: repeat( auto-fit, minmax( 118px, 1fr ) ) !important;
	}
}

@media ( max-width: 420px ) {
	#japet-checkin-root .japet-brand-header {
		gap: 10px !important;
	}

	#japet-checkin-root .japet-brand-header img.japet-logo-vshield {
		height: 54px !important;
	}

	#japet-checkin-root .japet-brand-header img.japet-logo-japet {
		height: 25px !important;
	}

	#japet-checkin-root .japet-scale-grid {
		gap: 6px !important;
	}

	#japet-checkin-root .japet-scale-grid-11 {
		grid-template-columns: repeat( 4, minmax( 0, 1fr ) ) !important;
	}

	#japet-checkin-root .japet-scale-caption {
		font-size: 10px !important;
	}
}

@media ( max-width: 360px ) {
	#japet-checkin-root .japet-checkin-inner {
		padding: 0 12px !important;
	}

	#japet-checkin-root .japet-option-grid {
		grid-template-columns: 1fr !important;
	}

	#japet-checkin-root .japet-scale-grid {
		grid-template-columns: repeat( 5, minmax( 0, 1fr ) ) !important;
	}

	#japet-checkin-root .japet-scale-grid-11 {
		grid-template-columns: repeat( 3, minmax( 0, 1fr ) ) !important;
	}
}

/* Current-use-day and milestone notices. These are intentionally
   touch-friendly and mobile-safe because they sit above the daily CTA/form. */
#japet-checkin-root .japet-current-day {
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	gap: 12px !important;
	min-height: 58px !important;
	margin: 0 0 14px !important;
	padding: 12px 16px !important;
	border: 1px solid rgba( 31, 87, 108, .18 ) !important;
	border-left: 5px solid #01d4ff !important;
	border-radius: 13px !important;
	background: #ffffff !important;
	box-shadow: 0 5px 16px rgba( 22, 50, 61, .08 ) !important;
}

#japet-checkin-root .japet-current-day-label {
	color: #5b7480 !important;
	font-size: 13px !important;
	font-weight: 700 !important;
	line-height: 1.3 !important;
}

#japet-checkin-root .japet-current-day strong {
	color: #1f576c !important;
	font-family: var( --japet-font-heading ) !important;
	font-size: 20px !important;
	font-weight: 800 !important;
	line-height: 1.2 !important;
	text-align: right !important;
	white-space: nowrap !important;
}

#japet-checkin-root .japet-milestone-notice,
#japet-dashboard-root .japet-milestone-notice {
	display: none !important;
	align-items: center !important;
	gap: 10px !important;
	min-height: 44px !important;
	padding: 11px 13px !important;
	border: 1px solid #f2dfa8 !important;
	border-radius: 12px !important;
	background: #fff6e3 !important;
	color: #7e5707 !important;
	font-size: 13px !important;
	font-weight: 700 !important;
	line-height: 1.45 !important;
	text-align: left !important;
}

#japet-checkin-root .japet-milestone-notice.is-visible,
#japet-dashboard-root .japet-milestone-notice.is-visible {
	display: flex !important;
}

#japet-checkin-root .japet-milestone-notice {
	margin: 0 0 16px !important;
}

#japet-dashboard-root .japet-action-card .japet-milestone-notice {
	position: relative !important;
	z-index: 1 !important;
	margin: 0 0 17px !important;
}

#japet-checkin-root .japet-milestone-notice-icon,
#japet-dashboard-root .japet-milestone-notice-icon {
	display: grid !important;
	place-items: center !important;
	width: 24px !important;
	height: 24px !important;
	flex: 0 0 24px !important;
	border-radius: 50% !important;
	background: #dc9b15 !important;
	color: #ffffff !important;
	font-size: 16px !important;
	font-weight: 800 !important;
	line-height: 1 !important;
}

@media ( max-width: 420px ) {
	#japet-checkin-root .japet-current-day {
		align-items: flex-start !important;
		flex-direction: column !important;
		justify-content: center !important;
		gap: 5px !important;
	}

	#japet-checkin-root .japet-current-day strong {
		font-size: 19px !important;
		text-align: left !important;
	}

	#japet-checkin-root .japet-milestone-notice,
	#japet-dashboard-root .japet-milestone-notice {
		align-items: flex-start !important;
	}
}

/* -------------------------------------------------------------------------
   Refined participant screens
   These final, highly scoped rules are intentionally strong because the
   templates can be embedded in any WordPress theme or page builder.
   ------------------------------------------------------------------------- */

#japet-dashboard-root {
	width: min( calc( 100% - 32px ), 920px ) !important;
	max-width: 920px !important;
	margin: 32px auto !important;
	padding: 0 0 32px !important;
	border: 1px solid rgba( 31, 87, 108, .1 ) !important;
	border-radius: 28px !important;
	background: #eefbfd !important;
	box-shadow: 0 18px 50px rgba( 22, 50, 61, .12 ) !important;
}

#japet-dashboard-root .japet-brand-header {
	justify-content: flex-start !important;
	gap: 18px !important;
	padding: 24px 32px 18px !important;
	border-bottom: 1px solid rgba( 31, 87, 108, .1 ) !important;
	background: #ffffff !important;
}

#japet-dashboard-root .japet-brand-header img.japet-logo-vshield,
#japet-dashboard-root .japet-brand-header img.japet-logo-japet {
	width: auto !important;
	max-width: 42% !important;
	object-fit: contain !important;
	opacity: 1 !important;
}

#japet-dashboard-root .japet-brand-header img.japet-logo-vshield {
	height: 56px !important;
}

#japet-dashboard-root .japet-brand-header img.japet-logo-japet {
	height: 27px !important;
}

#japet-dashboard-root .japet-dashboard-inner {
	padding: 0 32px !important;
}

#japet-dashboard-root .japet-dashboard-account-actions {
	padding: 18px 0 0 !important;
}

#japet-dashboard-root .japet-logout-btn,
#japet-dashboard-root a.japet-logout-btn {
	min-height: 36px !important;
	padding: 8px 13px !important;
	border: 1px solid #c3dde3 !important;
	background: #ffffff !important;
	color: #1f576c !important;
	font-size: 12px !important;
	font-weight: 800 !important;
}

#japet-dashboard-root .japet-logout-btn:hover,
#japet-dashboard-root .japet-logout-btn:focus,
#japet-dashboard-root a.japet-logout-btn:hover,
#japet-dashboard-root a.japet-logout-btn:focus {
	border-color: #1f576c !important;
	background: #1f576c !important;
	color: #ffffff !important;
	outline: 3px solid rgba( 220, 155, 21, .25 ) !important;
}

#japet-dashboard-root .japet-test-mode-banner {
	margin: 18px 0 0 !important;
	padding: 12px 14px !important;
	border: 1px solid rgba( 220, 155, 21, .45 ) !important;
	border-radius: 12px !important;
	background: #fff7e7 !important;
	color: #7e5707 !important;
	font-size: 12px !important;
	font-weight: 800 !important;
	line-height: 1.45 !important;
	text-align: center !important;
}

#japet-dashboard-root .japet-welcome {
	padding: 34px 0 30px !important;
}

#japet-dashboard-root .japet-welcome-label {
	margin: 0 0 10px !important;
	color: #b97e0e !important;
	font-size: 11px !important;
	font-weight: 800 !important;
	letter-spacing: .14em !important;
	line-height: 1.3 !important;
	text-transform: uppercase !important;
}

#japet-dashboard-root .japet-welcome h1,
#japet-dashboard-root h1 {
	margin: 0 0 10px !important;
	color: #1f576c !important;
	font-family: var( --japet-font-heading ) !important;
	font-size: clamp( 28px, 4vw, 42px ) !important;
	font-weight: 800 !important;
	letter-spacing: 0 !important;
	line-height: 1.08 !important;
}

#japet-dashboard-root .japet-subtext {
	max-width: 610px !important;
	margin: 0 !important;
	color: #5b7480 !important;
	font-size: 15px !important;
	line-height: 1.6 !important;
}

#japet-dashboard-root .japet-dashboard-hero {
	height: clamp( 210px, 30vw, 280px ) !important;
	margin: 0 32px 20px !important;
	border-radius: 22px !important;
	box-shadow: 0 14px 30px rgba( 22, 50, 61, .16 ) !important;
}

#japet-dashboard-root .japet-dashboard-hero-copy {
	left: 26px !important;
	right: 26px !important;
	bottom: 24px !important;
	gap: 6px !important;
}

#japet-dashboard-root .japet-dashboard-hero-kicker {
	font-size: 11px !important;
	letter-spacing: .16em !important;
}

#japet-dashboard-root .japet-dashboard-hero-copy strong {
	font-family: var( --japet-font-heading ) !important;
	font-size: clamp( 19px, 3vw, 26px ) !important;
	letter-spacing: 0 !important;
}

#japet-dashboard-root .japet-card {
	margin: 0 0 16px !important;
	border: 1px solid #c3dde3 !important;
	border-radius: 20px !important;
	box-shadow: 0 8px 26px rgba( 22, 50, 61, .08 ) !important;
}

#japet-dashboard-root > .japet-card {
	margin-right: 32px !important;
	margin-left: 32px !important;
}

#japet-dashboard-root .japet-progress-card {
	padding: 26px !important;
}

#japet-dashboard-root .japet-progress-top {
	display: flex !important;
	align-items: flex-end !important;
	justify-content: space-between !important;
	gap: 20px !important;
	margin: 0 0 22px !important;
}

#japet-dashboard-root .japet-progress-kicker,
#japet-dashboard-root .japet-progress-label {
	margin: 0 !important;
	color: #5b7480 !important;
	font-size: 13px !important;
	line-height: 1.45 !important;
}

#japet-dashboard-root .japet-progress-kicker {
	margin-bottom: 6px !important;
	font-weight: 700 !important;
}

#japet-dashboard-root .japet-progress-number {
	margin: 0 !important;
	font-family: var( --japet-font-heading ) !important;
	font-size: clamp( 32px, 5vw, 44px ) !important;
	font-weight: 800 !important;
	letter-spacing: 0 !important;
	line-height: 1 !important;
}

#japet-dashboard-root .japet-progress-percent {
	font-family: var( --japet-font-heading ) !important;
	font-size: 24px !important;
	font-weight: 800 !important;
}

#japet-dashboard-root .japet-progress-track {
	height: 12px !important;
	background: #e4eff2 !important;
}

#japet-dashboard-root .japet-progress-fill {
	background: linear-gradient( 90deg, #1f576c 0%, #2f7d99 72%, #dc9b15 100% ) !important;
}

#japet-dashboard-root .japet-progress-label {
	margin-top: 10px !important;
}

#japet-dashboard-root .japet-milestone-flag {
	margin-top: 18px !important;
	padding: 8px 12px !important;
	border: 1px solid #f2dfa8 !important;
	background: #fff7e7 !important;
	color: #a86b0c !important;
	font-size: 12px !important;
}

#japet-dashboard-root .japet-milestone-flag-wrap {
	text-align: center !important;
}

#japet-dashboard-root .japet-target-card {
	gap: 16px !important;
	padding: 20px 22px !important;
}

#japet-dashboard-root .japet-target-icon {
	width: 48px !important;
	height: 48px !important;
	flex-basis: 48px !important;
	border-radius: 15px !important;
	background: #fff7e7 !important;
	color: #b97e0e !important;
	font-size: 22px !important;
}

#japet-dashboard-root .japet-target-copy p {
	margin: 4px 0 0 !important;
	color: #5b7480 !important;
	font-size: 13px !important;
	line-height: 1.5 !important;
}

#japet-dashboard-root .japet-target-label {
	margin: 0 !important;
	color: #1f576c !important;
	font-size: 14px !important;
	font-weight: 800 !important;
}

#japet-dashboard-root .japet-target-value {
	font-family: var( --japet-font-heading ) !important;
	font-size: 25px !important;
}

#japet-dashboard-root .japet-fit-card img {
	height: clamp( 190px, 26vw, 260px ) !important;
}

#japet-dashboard-root .japet-fit-card .japet-fit-body {
	padding: 22px !important;
}

#japet-dashboard-root .japet-fit-card h3 {
	margin: 0 0 8px !important;
	font-family: var( --japet-font-heading ) !important;
	font-size: 18px !important;
	font-weight: 800 !important;
}

#japet-dashboard-root .japet-fit-card p {
	margin: 0 !important;
	color: #5b7480 !important;
	font-size: 14px !important;
	line-height: 1.6 !important;
}

#japet-dashboard-root .japet-section-title {
	display: flex !important;
	align-items: center !important;
	gap: 10px !important;
	margin: 28px 0 13px !important;
	color: #1f576c !important;
	font-family: var( --japet-font-heading ) !important;
	font-size: 17px !important;
	font-weight: 800 !important;
	line-height: 1.3 !important;
}

#japet-dashboard-root .japet-section-title span,
#japet-dashboard-root .japet-section-title::before {
	width: 5px !important;
	height: 23px !important;
	flex: 0 0 5px !important;
	border-radius: 999px !important;
	background: #dc9b15 !important;
}

#japet-dashboard-root .japet-section-title::before {
	content: none !important;
}

#japet-dashboard-root .japet-gallery {
	display: grid !important;
	grid-template-columns: repeat( auto-fit, minmax( 260px, 1fr ) ) !important;
	gap: 10px !important;
	padding: 10px !important;
	border: 1px solid #c3dde3 !important;
	border-radius: 20px !important;
	background: #ffffff !important;
	box-shadow: 0 8px 26px rgba( 22, 50, 61, .08 ) !important;
}

#japet-dashboard-root .japet-gallery-item {
	height: 220px !important;
	border-radius: 14px !important;
}

#japet-dashboard-root .japet-action-card {
	margin-top: 26px !important;
	padding: 26px !important;
	border: 0 !important;
	border-radius: 20px !important;
	background: linear-gradient( 135deg, #1f576c 0%, #163f4e 100% ) !important;
	box-shadow: 0 14px 30px rgba( 22, 50, 61, .18 ) !important;
}

#japet-dashboard-root .japet-action-card::before {
	right: 28px !important;
	top: 16px !important;
	color: rgba( 220, 155, 21, .15 ) !important;
	font-size: 112px !important;
}

#japet-dashboard-root .japet-action-card h2 {
	margin: 0 0 8px !important;
	font-family: var( --japet-font-heading ) !important;
	font-size: 23px !important;
	font-weight: 800 !important;
}

#japet-dashboard-root .japet-action-card p {
	margin: 0 0 20px !important;
	font-size: 14px !important;
	line-height: 1.6 !important;
}

#japet-dashboard-root .japet-action-card .japet-primary-btn,
#japet-dashboard-root .japet-primary-btn {
	min-height: 52px !important;
	border: 2px solid #dc9b15 !important;
	border-radius: 12px !important;
	background: #dc9b15 !important;
	box-shadow: 0 8px 18px rgba( 22, 50, 61, .12 ) !important;
	color: #163f4e !important;
	font-size: 15px !important;
	font-weight: 800 !important;
	letter-spacing: .01em !important;
	text-transform: none !important;
}

#japet-dashboard-root .japet-primary-btn::before,
#japet-dashboard-root .japet-primary-btn::after,
#japet-dashboard-root .japet-logout-btn::before,
#japet-dashboard-root .japet-logout-btn::after {
	content: none !important;
	display: none !important;
}

#japet-dashboard-root .japet-action-card .japet-primary-btn:hover,
#japet-dashboard-root .japet-action-card .japet-primary-btn:focus,
#japet-dashboard-root .japet-primary-btn:hover,
#japet-dashboard-root .japet-primary-btn:focus {
	border-color: #f0bd43 !important;
	background: #f0bd43 !important;
	color: #163f4e !important;
	outline: 3px solid rgba( 220, 155, 21, .28 ) !important;
	outline-offset: 2px !important;
}

#japet-dashboard-root .japet-action-card .japet-primary-btn:disabled,
#japet-dashboard-root .japet-primary-btn.is-disabled {
	border-color: #dc9b15 !important;
	background: #dc9b15 !important;
	color: #163f4e !important;
	opacity: .62 !important;
}

#japet-dashboard-root .japet-status-note {
	margin: 12px 0 0 !important;
	font-size: 12px !important;
	line-height: 1.45 !important;
}

#japet-dashboard-root .japet-complete-banner {
	margin: 0 32px 16px !important;
	padding: 24px 20px !important;
	border: 1px solid #b6e3c8 !important;
	border-radius: 18px !important;
	background: #eafaf1 !important;
	color: #1a7f4e !important;
	font-size: 14px !important;
	font-weight: 700 !important;
	line-height: 1.5 !important;
	text-align: center !important;
}

#japet-checkin-root {
	width: min( calc( 100% - 32px ), 820px ) !important;
	max-width: 820px !important;
	margin: 32px auto !important;
	padding-bottom: 34px !important;
	border: 1px solid rgba( 31, 87, 108, .1 ) !important;
	border-radius: 28px !important;
	background: #eefbfd !important;
	box-shadow: 0 18px 50px rgba( 22, 50, 61, .12 ) !important;
}

#japet-checkin-root .japet-brand-header {
	justify-content: flex-start !important;
	gap: 18px !important;
	padding: 24px 32px 18px !important;
	border-bottom: 1px solid rgba( 31, 87, 108, .1 ) !important;
	background: #ffffff !important;
}

#japet-checkin-root .japet-brand-header img.japet-logo-vshield,
#japet-checkin-root .japet-brand-header img.japet-logo-japet {
	width: auto !important;
	max-width: 42% !important;
	object-fit: contain !important;
	opacity: 1 !important;
}

#japet-checkin-root .japet-brand-header img.japet-logo-vshield {
	height: 56px !important;
}

#japet-checkin-root .japet-brand-header img.japet-logo-japet {
	height: 27px !important;
}

#japet-checkin-root .japet-checkin-inner {
	padding: 0 32px !important;
}

#japet-checkin-root .japet-test-mode-banner {
	margin: 22px 0 16px !important;
	padding: 12px 14px !important;
	border: 1px solid rgba( 220, 155, 21, .45 ) !important;
	border-radius: 12px !important;
	background: #fff7e7 !important;
	color: #7e5707 !important;
	font-size: 12px !important;
	font-weight: 800 !important;
	line-height: 1.45 !important;
	text-align: center !important;
}

#japet-checkin-root .japet-current-day {
	margin: 22px 0 16px !important;
	padding: 16px 18px !important;
	border: 1px solid #c3dde3 !important;
	border-left: 5px solid #dc9b15 !important;
	border-radius: 14px !important;
	box-shadow: 0 7px 20px rgba( 22, 50, 61, .08 ) !important;
}

#japet-checkin-root .japet-milestone-notice {
	border-color: #f2dfa8 !important;
	background: #fff7e7 !important;
	color: #7e5707 !important;
}

#japet-checkin-root .japet-milestone-notice-icon {
	background: #dc9b15 !important;
}

#japet-checkin-root .japet-milestone-intro {
	border-color: #f2dfa8 !important;
	background: #fff7e7 !important;
	color: #7e5707 !important;
}

#japet-checkin-root #japet-form-view > h1,
#japet-checkin-root #japet-milestone-view > h1 {
	margin-top: 30px !important;
	font-family: var( --japet-font-heading ) !important;
	font-size: clamp( 25px, 4vw, 34px ) !important;
	font-weight: 800 !important;
	letter-spacing: 0 !important;
}

#japet-checkin-root .japet-step-hint {
	margin-bottom: 24px !important;
	font-size: 14px !important;
	line-height: 1.6 !important;
}

#japet-checkin-root form {
	width: 100% !important;
	max-width: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
}

#japet-checkin-root .japet-q {
	margin-bottom: 16px !important;
	padding: 22px !important;
	border: 1px solid #c3dde3 !important;
	border-left: 4px solid #dc9b15 !important;
	border-radius: 18px !important;
	box-shadow: 0 8px 24px rgba( 22, 50, 61, .07 ) !important;
}

#japet-checkin-root .japet-q[style] {
	margin-top: 0 !important;
}

#japet-checkin-root .japet-q-label {
	margin-bottom: 14px !important;
	color: #1f576c !important;
	font-size: 15px !important;
	font-weight: 800 !important;
	line-height: 1.45 !important;
}

#japet-checkin-root .japet-option-grid {
	grid-template-columns: repeat( auto-fit, minmax( 145px, 1fr ) ) !important;
	gap: 10px !important;
}

#japet-checkin-root .japet-option-btn {
	min-height: 50px !important;
	padding: 11px 13px !important;
	border: 1px solid #a9cdd6 !important;
	border-radius: 12px !important;
	background: #ffffff !important;
	color: #16323d !important;
	font-size: 14px !important;
	font-weight: 700 !important;
	letter-spacing: normal !important;
	text-transform: none !important;
}

#japet-checkin-root .japet-option-btn::before,
#japet-checkin-root .japet-option-btn::after,
#japet-checkin-root .japet-primary-btn::before,
#japet-checkin-root .japet-primary-btn::after {
	content: none !important;
	display: none !important;
}

#japet-checkin-root .japet-option-btn:hover {
	border-color: #dc9b15 !important;
	background: #fffaf0 !important;
	color: #1f576c !important;
}

#japet-checkin-root .japet-option-btn:focus-visible,
#japet-checkin-root .japet-text-input:focus,
#japet-checkin-root .japet-select-input:focus {
	outline: 3px solid rgba( 220, 155, 21, .25 ) !important;
	outline-offset: 2px !important;
}

#japet-checkin-root .japet-option-btn.is-selected {
	border-color: #1f576c !important;
	background: #1f576c !important;
	box-shadow: inset 0 0 0 2px rgba( 220, 155, 21, .7 ) !important;
	color: #ffffff !important;
}

#japet-checkin-root .japet-option-btn.is-selected:hover,
#japet-checkin-root .japet-option-btn.is-selected:focus-visible {
	border-color: #dc9b15 !important;
	background: #163f4e !important;
	color: #ffffff !important;
}

#japet-checkin-root .japet-text-input,
#japet-checkin-root .japet-select-input {
	min-height: 50px !important;
	padding: 12px 14px !important;
	border: 1px solid #a9cdd6 !important;
	border-radius: 12px !important;
	background: #ffffff !important;
	color: #16323d !important;
	font-size: 14px !important;
}

#japet-checkin-root textarea.japet-text-input {
	min-height: 104px !important;
}

#japet-checkin-root input.japet-text-input {
	min-height: 50px !important;
}

#japet-checkin-root .japet-select-input {
	padding-right: 42px !important;
	background-image: linear-gradient( 45deg, transparent 50%, #1f576c 50% ), linear-gradient( 135deg, #1f576c 50%, transparent 50% ) !important;
	background-position: calc( 100% - 18px ) 50%, calc( 100% - 13px ) 50% !important;
	background-repeat: no-repeat !important;
	background-size: 5px 5px, 5px 5px !important;
}

#japet-checkin-root .japet-text-input:hover,
#japet-checkin-root .japet-select-input:hover,
#japet-checkin-root .japet-text-input:focus,
#japet-checkin-root .japet-select-input:focus {
	border-color: #dc9b15 !important;
	box-shadow: 0 0 0 3px rgba( 220, 155, 21, .14 ) !important;
}

#japet-checkin-root .japet-primary-btn,
#japet-checkin-root button.japet-primary-btn,
#japet-checkin-root a.japet-primary-btn {
	min-height: 54px !important;
	margin-top: 20px !important;
	border: 2px solid #dc9b15 !important;
	border-radius: 12px !important;
	background: #dc9b15 !important;
	box-shadow: 0 8px 18px rgba( 22, 50, 61, .12 ) !important;
	color: #163f4e !important;
	font-size: 15px !important;
	font-weight: 800 !important;
	letter-spacing: normal !important;
	text-transform: none !important;
}

#japet-checkin-root .japet-primary-btn:hover,
#japet-checkin-root .japet-primary-btn:focus,
#japet-checkin-root button.japet-primary-btn:hover,
#japet-checkin-root button.japet-primary-btn:focus,
#japet-checkin-root a.japet-primary-btn:hover,
#japet-checkin-root a.japet-primary-btn:focus {
	border-color: #f0bd43 !important;
	background: #f0bd43 !important;
	box-shadow: 0 10px 22px rgba( 22, 50, 61, .16 ) !important;
	color: #163f4e !important;
	outline: 3px solid rgba( 220, 155, 21, .28 ) !important;
	outline-offset: 2px !important;
}

#japet-checkin-root .japet-confirmation {
	padding: 70px 26px 34px !important;
}

#japet-checkin-root .japet-confirmation .japet-check-icon {
	border-color: rgba( 220, 155, 21, .35 ) !important;
	background: #1f576c !important;
}

@media ( max-width: 640px ) {
	#japet-dashboard-root,
	#japet-checkin-root {
		width: 100% !important;
		max-width: none !important;
		margin: 0 auto !important;
		border-right: 0 !important;
		border-left: 0 !important;
		border-radius: 0 !important;
		box-shadow: none !important;
	}

	#japet-dashboard-root .japet-brand-header,
	#japet-checkin-root .japet-brand-header {
		gap: 12px !important;
		padding: 21px 18px 15px !important;
	}

	#japet-dashboard-root .japet-dashboard-inner,
	#japet-checkin-root .japet-checkin-inner {
		padding-right: 16px !important;
		padding-left: 16px !important;
	}

	#japet-dashboard-root .japet-dashboard-hero {
		height: 220px !important;
		margin-right: 16px !important;
		margin-left: 16px !important;
		border-radius: 18px !important;
	}

	#japet-dashboard-root .japet-welcome {
		padding: 27px 0 24px !important;
	}

	#japet-dashboard-root > .japet-card {
		margin-right: 16px !important;
		margin-left: 16px !important;
	}

	#japet-dashboard-root .japet-progress-card,
	#japet-dashboard-root .japet-action-card {
		padding: 20px !important;
	}

	#japet-dashboard-root .japet-target-card {
		align-items: flex-start !important;
		flex-wrap: wrap !important;
	}

	#japet-dashboard-root .japet-target-value {
		width: 100% !important;
		padding-left: 64px !important;
	}

	#japet-dashboard-root .japet-complete-banner {
		margin-right: 16px !important;
		margin-left: 16px !important;
	}

	#japet-dashboard-root .japet-gallery {
		grid-template-columns: 1fr !important;
	}

	#japet-checkin-root .japet-q {
		padding: 18px 16px !important;
		border-radius: 16px !important;
	}
}

@media ( max-width: 420px ) {
	#japet-dashboard-root .japet-brand-header img.japet-logo-vshield,
	#japet-checkin-root .japet-brand-header img.japet-logo-vshield {
		height: 51px !important;
	}

	#japet-dashboard-root .japet-brand-header img.japet-logo-japet,
	#japet-checkin-root .japet-brand-header img.japet-logo-japet {
		height: 24px !important;
	}

	#japet-dashboard-root .japet-progress-top {
		align-items: flex-start !important;
		flex-direction: column !important;
		gap: 10px !important;
	}

	#japet-dashboard-root .japet-progress-percent {
		font-size: 21px !important;
	}

	#japet-checkin-root .japet-option-grid {
		grid-template-columns: repeat( 2, minmax( 0, 1fr ) ) !important;
	}
}

@media ( max-width: 360px ) {
	#japet-dashboard-root .japet-dashboard-inner,
	#japet-checkin-root .japet-checkin-inner {
		padding-right: 12px !important;
		padding-left: 12px !important;
	}

	#japet-dashboard-root .japet-dashboard-hero {
		margin-right: 12px !important;
		margin-left: 12px !important;
	}

	#japet-dashboard-root .japet-complete-banner {
		margin-right: 12px !important;
		margin-left: 12px !important;
	}

	#japet-dashboard-root > .japet-card {
		margin-right: 12px !important;
		margin-left: 12px !important;
	}

	#japet-checkin-root .japet-option-grid {
		grid-template-columns: 1fr !important;
	}
}