:root {
	--brand-primary: #FF7044;
	--brand-primary-dark: #E85A2E;
	--brand-primary-light: #FFF0EB;
	--brand-text: #1A1A1A;
	--brand-muted: #6B7280;
	--brand-border: #ECECEC;
	--brand-bg: #F7F7F8;
	--brand-success: #16A34A;
	--brand-danger: #DC2626;
	--app-radius: 16px;
	--app-radius-sm: 12px;
	--app-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
	--app-max-width: 430px;
}

* {
	-webkit-tap-highlight-color: transparent;
}

body {
	font-family: 'Lato', sans-serif;
	background: #E8E8ED;
	color: var(--brand-text);
	margin: 0;
	min-height: 100vh;
}

.app-shell {
	max-width: var(--app-max-width);
	margin: 0 auto;
	min-height: 100vh;
	background: var(--brand-bg);
	position: relative;
	box-shadow: 0 0 40px rgba(0, 0, 0, 0.08);
}

.app-shell--login {
	background: linear-gradient(180deg, #FFF5F1 0%, #FFFFFF 45%, var(--brand-bg) 100%);
}

.app-topbar {
	position: sticky;
	top: 0;
	z-index: 100;
	background: #fff;
	border-bottom: 1px solid var(--brand-border);
	padding: 0.75rem 1rem;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
}

.app-topbar__brand {
	display: flex;
	align-items: center;
	gap: 0.65rem;
	min-width: 0;
}

.app-topbar__logo {
	width: 36px;
	height: 36px;
	object-fit: contain;
	flex-shrink: 0;
}

.app-topbar__title {
	font-size: 0.95rem;
	font-weight: 700;
	line-height: 1.2;
	margin: 0;
}

.app-topbar__subtitle {
	font-size: 0.7rem;
	color: var(--brand-muted);
	margin: 0;
}

.app-topbar__action {
	border: none;
	background: var(--brand-primary-light);
	color: var(--brand-primary);
	width: 38px;
	height: 38px;
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
	flex-shrink: 0;
}

.app-content {
	padding: 1rem 1rem 5.5rem;
}

.app-content--login {
	padding: 1.5rem 1.25rem 2rem;
	display: flex;
	flex-direction: column;
	min-height: calc(100vh - 2rem);
}

.login-hero {
	text-align: center;
	padding: 1.5rem 0 1.25rem;
}

.login-hero__logo {
	width: 88px;
	height: 88px;
	object-fit: contain;
	margin-bottom: 1rem;
}

.login-hero__title {
	font-size: 1.35rem;
	font-weight: 800;
	margin-bottom: 0.35rem;
	color: var(--brand-text);
}

.login-hero__subtitle {
	color: var(--brand-muted);
	font-size: 0.92rem;
	line-height: 1.5;
	margin: 0;
}

.app-card {
	background: #fff;
	border: none;
	border-radius: var(--app-radius);
	box-shadow: var(--app-shadow);
	margin-bottom: 0.85rem;
}

.app-card .card-body {
	padding: 1rem;
}

.profile-card {
	background: linear-gradient(135deg, var(--brand-primary) 0%, #FF8A65 100%);
	color: #fff;
	border-radius: var(--app-radius);
	padding: 1.1rem 1rem;
	margin-bottom: 1rem;
	box-shadow: 0 8px 24px rgba(255, 112, 68, 0.28);
}

.profile-card__label {
	font-size: 0.75rem;
	opacity: 0.9;
	margin-bottom: 0.15rem;
}

.profile-card__name {
	font-size: 1.15rem;
	font-weight: 700;
	margin-bottom: 0.35rem;
}

.profile-card__outlet {
	font-size: 0.85rem;
	opacity: 0.95;
	margin: 0;
}

.section-title {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin: 0 0 0.65rem;
}

.section-title h2 {
	font-size: 0.95rem;
	font-weight: 800;
	margin: 0;
}

.section-title p {
	font-size: 0.8rem;
	color: var(--brand-muted);
	margin: 0 0 0.75rem;
}

.count-pill {
	background: var(--brand-primary);
	color: #fff;
	font-size: 0.72rem;
	font-weight: 700;
	padding: 0.15rem 0.5rem;
	border-radius: 999px;
}

.count-pill--muted {
	background: #FFF3E0;
	color: #E65100;
}

.count-pill--closing {
	background: rgba(255, 255, 255, 0.22);
	color: #fff;
	border: 1px solid rgba(255, 255, 255, 0.35);
}


/* Dashboard section blocks */
.dashboard-section {
	border-radius: var(--app-radius);
	overflow: hidden;
}

.dashboard-section__header {
	display: flex;
	align-items: flex-start;
	gap: 0.75rem;
	padding: 1rem 1rem 0.85rem;
}

.dashboard-section__header--compact {
	padding-bottom: 0.65rem;
}

.dashboard-section__icon-wrap {
	width: 40px;
	height: 40px;
	border-radius: 12px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.15rem;
	flex-shrink: 0;
}

.dashboard-section__title {
	font-size: 0.95rem;
	font-weight: 800;
	margin: 0 0 0.15rem;
}

.dashboard-section__hint {
	font-size: 0.78rem;
	line-height: 1.45;
}

.dashboard-section__body {
	padding: 0 0.75rem 0.75rem;
}

.dashboard-section__body--completed {
	padding: 0 0.65rem 0.65rem;
}

/* Closing pending — evening indigo panel */
.dashboard-section--closing-pending {
	background: linear-gradient(145deg, #312E81 0%, #4338CA 55%, #6366F1 100%);
	box-shadow: 0 10px 28px rgba(67, 56, 202, 0.28);
}

.dashboard-section--closing-pending .dashboard-section__icon-wrap {
	background: rgba(255, 255, 255, 0.15);
	color: #FDE68A;
}

.dashboard-section--closing-pending .dashboard-section__header h2,
.dashboard-section--closing-pending .dashboard-section__title {
	color: #fff;
}

.dashboard-section--closing-pending .dashboard-section__hint {
	color: rgba(255, 255, 255, 0.82);
}

.dashboard-section--closing-pending .checklist-item--upcoming {
	background: rgba(255, 255, 255, 0.12);
	border: 1px solid rgba(255, 255, 255, 0.18);
	border-left: 4px solid #FDE68A;
	box-shadow: none;
	margin-bottom: 0.55rem;
	backdrop-filter: blur(4px);
}

.dashboard-section--closing-pending .checklist-item--upcoming:last-child {
	margin-bottom: 0;
}

.dashboard-section--closing-pending .checklist-item--upcoming .checklist-item__icon {
	background: rgba(253, 230, 138, 0.2);
	color: #FDE68A;
}

.dashboard-section--closing-pending .checklist-item--upcoming .checklist-item__title {
	color: #fff;
}

.dashboard-section--closing-pending .checklist-item--upcoming .checklist-item__meta {
	color: rgba(255, 255, 255, 0.75);
}

.dashboard-section--closing-pending .session-badge--closing {
	background: rgba(255, 255, 255, 0.2);
	color: #E0E7FF;
}

/* Completed / submitted — soft mint panel */
.dashboard-section--completed {
	background: linear-gradient(180deg, #F0FDF4 0%, #ECFDF5 100%);
	border: 1px solid #BBF7D0;
	box-shadow: 0 4px 16px rgba(22, 163, 74, 0.08);
}

.dashboard-section--completed .dashboard-section__icon-wrap--success {
	background: #DCFCE7;
	color: #15803D;
}

.dashboard-section--completed .dashboard-section__title {
	color: #14532D;
}

.dashboard-section--completed .dashboard-section__hint {
	color: #4B7A5C;
}

.submitted-card {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0.8rem 0.85rem;
	margin-bottom: 0.5rem;
	background: #fff;
	border: 1px dashed #A7F3D0;
	border-radius: 12px;
	text-decoration: none;
	color: inherit;
	transition: background 0.15s ease, transform 0.15s ease;
}

.submitted-card:last-child {
	margin-bottom: 0;
}

.submitted-card:active {
	transform: scale(0.98);
	background: #F7FEF9;
}

.submitted-card__status {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	gap: 0.1rem;
	color: #16A34A;
	font-size: 0.62rem;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.submitted-card__status i {
	font-size: 1.35rem;
}

.submitted-card__content {
	flex: 1;
	min-width: 0;
}

.submitted-card__title {
	font-size: 0.88rem;
	font-weight: 700;
	margin: 0 0 0.2rem;
	color: #1F2937;
}

.submitted-card__meta {
	font-size: 0.72rem;
	color: #6B7280;
	margin: 0;
}

.submitted-card__divider {
	margin: 0 0.2rem;
	opacity: 0.6;
}

.submitted-card__arrow {
	color: #9CA3AF;
	font-size: 0.95rem;
	flex-shrink: 0;
}

/* Missed — soft amber/red panel, visually distinct from the indigo
   "Closing Later Today" and mint "Submitted" sections, deliberately
   muted/lower-energy since these items are historical and not actionable. */
.dashboard-section--missed {
	background: linear-gradient(180deg, #FFF7ED 0%, #FEF3F2 100%);
	border: 1px solid #FDE0D4;
	box-shadow: 0 4px 16px rgba(194, 65, 12, 0.08);
}

.dashboard-section--missed .dashboard-section__icon-wrap--missed {
	background: #FFE4DE;
	color: #C2410C;
}

.dashboard-section--missed .dashboard-section__title {
	color: #7C2D12;
}

.dashboard-section--missed .dashboard-section__hint {
	color: #9A6B4F;
}

.dashboard-section__body--missed {
	padding: 0 0.65rem 0.65rem;
}

.missed-card {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0.8rem 0.85rem;
	margin-bottom: 0.5rem;
	background: #fff;
	border: 1px dashed #FECDCA;
	border-radius: 12px;
	opacity: 0.9;
}

.missed-card:last-child {
	margin-bottom: 0;
}

.missed-card__status {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	gap: 0.1rem;
	color: #C2410C;
	font-size: 0.62rem;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.missed-card__status i {
	font-size: 1.35rem;
}

.missed-card__content {
	flex: 1;
	min-width: 0;
}

.missed-card__title {
	font-size: 0.88rem;
	font-weight: 700;
	margin: 0 0 0.2rem;
	color: #57534E;
	text-decoration: line-through;
	text-decoration-color: #FCA5A5;
	text-decoration-thickness: 1.5px;
}

.missed-card__meta {
	font-size: 0.72rem;
	color: #A8A29E;
	margin: 0;
}

.missed-card__divider {
	margin: 0 0.2rem;
	opacity: 0.6;
}

.freq-badge--muted {
	opacity: 0.88;
}

.checklist-item {
	background: #fff;
	border-radius: var(--app-radius-sm);
	padding: 0.95rem;
	margin-bottom: 0.65rem;
	box-shadow: var(--app-shadow);
	display: flex;
	gap: 0.75rem;
	align-items: center;
	text-decoration: none;
	color: inherit;
	transition: transform 0.15s ease;
}

.checklist-item:active {
	transform: scale(0.98);
}

.checklist-item--due {
	border-left: 4px solid var(--brand-danger);
}

.checklist-item--done {
	border-left: 4px solid var(--brand-success);
}

.checklist-item--upcoming {
	cursor: default;
}

.checklist-item__icon {
	width: 42px;
	height: 42px;
	border-radius: 12px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	font-size: 1.1rem;
}

.checklist-item--due .checklist-item__icon {
	background: #FEE2E2;
	color: var(--brand-danger);
}

.checklist-item--done .checklist-item__icon {
	background: #DCFCE7;
	color: var(--brand-success);
}

.checklist-item__body {
	flex: 1;
	min-width: 0;
}

.checklist-item__title {
	font-size: 0.92rem;
	font-weight: 700;
	margin: 0 0 0.25rem;
}

.checklist-item__meta {
	font-size: 0.75rem;
	color: var(--brand-muted);
	margin: 0;
}

.checklist-item__arrow {
	color: var(--brand-muted);
	font-size: 1.1rem;
}

.freq-badge {
	display: inline-block;
	font-size: 0.68rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	padding: 0.2rem 0.45rem;
	border-radius: 6px;
	margin-bottom: 0.35rem;
}

.freq-daily { background: #FFF0EB; color: var(--brand-primary); }
.freq-weekly { background: #E8F5E9; color: #2E7D32; }
.freq-biweekly { background: #FFF8E1; color: #F57F17; }
.freq-monthly { background: #E3F2FD; color: #1565C0; }

.session-badge {
	display: inline-block;
	font-size: 0.68rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	padding: 0.2rem 0.45rem;
	border-radius: 6px;
}

.session-badge--opening {
	background: #E8F5E9;
	color: #2E7D32;
}

.session-badge--closing {
	background: #EDE7F6;
	color: #5E35B1;
}

.btn-brand {
	background: var(--brand-primary);
	border-color: var(--brand-primary);
	color: #fff;
	font-weight: 700;
	border-radius: 14px;
	padding: 0.85rem 1rem;
}

.btn-brand:hover,
.btn-brand:focus {
	background: var(--brand-primary-dark);
	border-color: var(--brand-primary-dark);
	color: #fff;
}

.form-control,
.form-select {
	border-radius: 12px;
	border-color: var(--brand-border);
	padding: 0.75rem 0.9rem;
}

.form-control:focus {
	border-color: var(--brand-primary);
	box-shadow: 0 0 0 0.2rem rgba(255, 112, 68, 0.15);
}

.input-group-text {
	border-radius: 12px 0 0 12px;
	border-color: var(--brand-border);
	background: #fff;
	color: var(--brand-primary);
}

.input-group .form-control {
	border-radius: 0 12px 12px 0;
}

.task-card {
	background: #fff;
	border-radius: var(--app-radius-sm);
	box-shadow: var(--app-shadow);
	margin-bottom: 0.75rem;
	overflow: hidden;
}

.task-card__header {
	padding: 0.9rem 0.95rem 0.5rem;
}

.task-number {
	width: 26px;
	height: 26px;
	border-radius: 8px;
	background: var(--brand-primary-light);
	color: var(--brand-primary);
	font-size: 0.78rem;
	font-weight: 800;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-right: 0.5rem;
}

.task-card__title {
	font-size: 0.9rem;
	font-weight: 700;
	margin: 0;
}

.task-card__desc {
	font-size: 0.78rem;
	color: var(--brand-muted);
	margin: 0.35rem 0 0;
}

.answer-group {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0.5rem;
	padding: 0 0.95rem 0.75rem;
}

.answer-group .btn {
	border-radius: 12px;
	font-weight: 700;
	padding: 0.7rem;
}

.btn-check:checked + .btn-answer-yes {
	background: var(--brand-success);
	border-color: var(--brand-success);
	color: #fff;
}

.btn-check:checked + .btn-answer-no {
	background: var(--brand-danger);
	border-color: var(--brand-danger);
	color: #fff;
}

.task-card__remark {
	padding: 0 0.95rem 0.95rem;
}

.page-back {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	color: var(--brand-primary);
	text-decoration: none;
	font-size: 0.85rem;
	font-weight: 700;
	margin-bottom: 0.85rem;
}

.page-header {
	margin-bottom: 1rem;
}

.page-header h1 {
	font-size: 1.1rem;
	font-weight: 800;
	margin: 0.35rem 0 0;
}

.page-header p {
	font-size: 0.82rem;
	color: var(--brand-muted);
	margin: 0.35rem 0 0;
}

.app-alert {
	border: none;
	border-radius: 12px;
	font-size: 0.85rem;
	padding: 0.75rem 0.9rem;
	margin-bottom: 0.85rem;
}

.app-alert--success {
	background: #DCFCE7;
	color: #166534;
}

.app-alert--danger {
	background: #FEE2E2;
	color: #991B1B;
}

.app-alert--info {
	background: var(--brand-primary-light);
	color: #9A3412;
}

.sticky-submit-bar {
	position: fixed;
	left: 50%;
	transform: translateX(-50%);
	bottom: 0;
	width: 100%;
	max-width: var(--app-max-width);
	background: rgba(255, 255, 255, 0.96);
	backdrop-filter: blur(8px);
	border-top: 1px solid var(--brand-border);
	padding: 0.85rem 1rem calc(0.85rem + env(safe-area-inset-bottom));
	z-index: 90;
}

.app-bottom-nav {
	position: fixed;
	left: 50%;
	transform: translateX(-50%);
	bottom: 0;
	width: 100%;
	max-width: var(--app-max-width);
	background: #fff;
	border-top: 1px solid var(--brand-border);
	padding: 0.45rem 1rem calc(0.45rem + env(safe-area-inset-bottom));
	display: flex;
	justify-content: center;
	z-index: 90;
}

.app-bottom-nav__item {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.15rem;
	text-decoration: none;
	color: var(--brand-muted);
	font-size: 0.68rem;
	font-weight: 700;
	padding: 0.35rem 1.25rem;
	border-radius: 12px;
}

.app-bottom-nav__item i {
	font-size: 1.2rem;
}

.app-bottom-nav__item--active {
	color: var(--brand-primary);
	background: var(--brand-primary-light);
}

.result-badge {
	font-size: 0.72rem;
	font-weight: 800;
	padding: 0.25rem 0.55rem;
	border-radius: 8px;
}

.result-badge--yes {
	background: #DCFCE7;
	color: var(--brand-success);
}

.result-badge--no {
	background: #FEE2E2;
	color: var(--brand-danger);
}

.empty-state {
	text-align: center;
	padding: 1.5rem 1rem;
	background: #fff;
	border-radius: var(--app-radius);
	box-shadow: var(--app-shadow);
}

.empty-state i {
	font-size: 2rem;
	color: var(--brand-success);
	margin-bottom: 0.5rem;
}

.empty-state p {
	margin: 0;
	color: var(--brand-muted);
	font-size: 0.88rem;
}

.has-bottom-nav .app-content {
	padding-bottom: 5.5rem;
}

.has-submit-bar .app-content {
	padding-bottom: 6.5rem;
}

/* Privacy Policy */
.privacy-link {
	color: var(--brand-primary);
	font-weight: 700;
	font-size: 0.85rem;
	text-decoration: none;
}

.privacy-link:hover {
	text-decoration: underline;
	color: var(--brand-primary-dark);
}

.privacy-hero {
	text-align: center;
	margin-bottom: 1rem;
}

.privacy-hero__logo {
	width: 64px;
	height: 64px;
	object-fit: contain;
	margin-bottom: 0.65rem;
}

.privacy-hero__title {
	font-size: 1.35rem;
	font-weight: 800;
	margin: 0 0 0.35rem;
}

.privacy-hero__meta {
	font-size: 0.82rem;
	color: var(--brand-muted);
	margin: 0;
	line-height: 1.5;
}

.privacy-card {
	background: #fff;
	border-radius: var(--app-radius-sm);
	box-shadow: var(--app-shadow);
	padding: 1rem;
	margin-bottom: 0.75rem;
}

.privacy-card h2 {
	font-size: 0.98rem;
	font-weight: 800;
	margin: 0 0 0.55rem;
	color: var(--brand-text);
}

.privacy-card h3 {
	font-size: 0.88rem;
	font-weight: 700;
	margin: 0.85rem 0 0.35rem;
}

.privacy-card p,
.privacy-card li {
	font-size: 0.86rem;
	line-height: 1.55;
	color: #374151;
}

.privacy-card ul {
	padding-left: 1.15rem;
	margin-bottom: 0.65rem;
}

.privacy-card a {
	color: var(--brand-primary);
	font-weight: 700;
	word-break: break-word;
}

.privacy-card--contact {
	border: 1px solid #FFD8C8;
	background: linear-gradient(180deg, #FFF8F5 0%, #fff 100%);
}

.privacy-footnote {
	padding: 0.5rem 0 1rem;
}