/* Go Memory — CSS thuần, mobile-first, phong cách flat.
   Token theo bộ evon ui-ux (tokens.css), dịch sang biến CSS vì theme không dùng Tailwind.

   ĐỔI THƯƠNG HIỆU: màu nhấn ở 2 chỗ (khối "MÀU NHẤN" nền sáng và nền tối), font ở 1 chỗ (--app-font). */

/* ---------- Font: Inter tự host, có bộ tiếng Việt ---------- */

@font-face {
	font-family: "Inter";
	font-style: normal;
	font-weight: 400 700;
	font-display: swap;
	src: url("../fonts/inter-vietnamese.woff2") format("woff2");
	unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
	font-family: "Inter";
	font-style: normal;
	font-weight: 400 700;
	font-display: swap;
	src: url("../fonts/inter-latin-ext.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: "Inter";
	font-style: normal;
	font-weight: 400 700;
	font-display: swap;
	src: url("../fonts/inter-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- Token ---------- */

:root {
	--app-font: "Inter", ui-sans-serif, system-ui, sans-serif;

	/* ===== MÀU NHẤN, CHỖ 1/2: NỀN SÁNG ===== */
	--primary: #0f766e;
	--primary-hover: #115e59;
	--primary-foreground: #ffffff;
	--primary-light: rgb(15 118 110 / 0.1);
	--ring-focus: rgb(15 118 110 / 0.12);
	/* ======================================== */

	--background: #f4f4f6;
	--surface: #ffffff;
	--foreground: #2c2c2c;
	--muted: #707070;
	--border: #ececef;          /* đường tóc: viền card, đường chia */
	--border-strong: #e2e2e6;   /* viền ô nhập, nút viền, khung app */
	--secondary: #e7e8ec;
	--secondary-hover: #dbdce2;
	--surface-hover: #f8f8fa;
	--button-hover: #f1f1f3;
	--border-focus: var(--primary);
	--overlay: rgb(0 0 0 / 0.3);

	--danger: #c70036;
	--danger-bg: rgb(255 32 86 / 0.1);
	--danger-bg-hover: rgb(255 32 86 / 0.15);
	--error-text: #e7000b;
	--error-strong: #c10007;
	--error-bg: #fef2f2;
	--success: #007a55;
	--success-bg: #ecfdf5;
	--warning: #bb4d00;
	--warning-bg: #fffbeb;
	--neutral: #52525c;
	--neutral-bg: #f4f4f5;

	--shadow-segment-track: inset 0 0 0 1px rgb(0 0 0 / 0.05), inset 0 1px 2px rgb(0 0 0 / 0.04);
	--shadow-segment-thumb: 0 0 0 1px rgb(0 0 0 / 0.04), 0 1px 2px rgb(0 0 0 / 0.06), 0 2px 6px -2px rgb(0 0 0 / 0.08);
	--shadow-float: 0 12px 32px -8px rgb(0 0 0 / 0.18), 0 2px 6px rgb(0 0 0 / 0.06); /* chỉ lớp nổi */

	--ease-sheet: cubic-bezier(0.32, 0.72, 0, 1);
	--header-h: 56px;
	--tabbar-h: 64px;
	--safe-b: env(safe-area-inset-bottom, 0px);
	--safe-t: env(safe-area-inset-top, 0px);
	color-scheme: light;
}

@media (prefers-color-scheme: dark) {
	:root {
		/* ===== MÀU NHẤN, CHỖ 2/2: NỀN TỐI (sáng hơn 2 bậc) ===== */
		--primary: #2dd4bf;
		--primary-hover: #5eead4;
		--primary-foreground: #042f2e;
		--primary-light: rgb(45 212 191 / 0.12);
		--ring-focus: rgb(45 212 191 / 0.16);
		--border-focus: rgb(45 212 191 / 0.6);
		/* ======================================================= */

		--background: #05060f;
		--surface: #0f111a;
		--foreground: #e9edf5;
		--muted: #8b93a7;
		--border: rgb(160 180 220 / 0.12);
		--border-strong: rgb(160 180 220 / 0.2);
		--secondary: #1a1d29;
		--secondary-hover: #232736;
		--surface-hover: #141722;
		--button-hover: #1a1d29;
		--overlay: rgb(0 0 0 / 0.6);

		--danger: #ff637e;
		--error-text: #ff6467;
		--error-strong: #ff6467;
		--error-bg: rgb(251 44 54 / 0.1);
		--success: #00d492;
		--success-bg: rgb(0 188 125 / 0.15);
		--warning: #ffb900;
		--warning-bg: rgb(254 154 0 / 0.15);
		--neutral: #9f9fa9;
		--neutral-bg: rgb(113 113 123 / 0.15);

		--shadow-segment-track: inset 0 0 0 1px var(--border), inset 0 1px 2px rgb(0 0 0 / 0.4);
		--shadow-segment-thumb: 0 0 0 1px var(--border-strong), inset 0 1px 0 rgb(255 255 255 / 0.06), 0 1px 2px rgb(0 0 0 / 0.5);
		--shadow-float: 0 12px 32px -8px rgb(0 0 0 / 0.7);
		color-scheme: dark;
	}
}

/* ---------- Nền ---------- */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body.go {
	margin: 0;
	background: var(--background);
	color: var(--foreground);
	font: 400 14px/1.5 var(--app-font);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	-webkit-tap-highlight-color: transparent;
}

h1, h2, h3, p, ul, dl, dd { margin: 0; }
ul { padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus { outline: none; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.i { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.muted { color: var(--muted); }
.is-in { color: var(--success); }
.is-neg { color: var(--error-strong); }

/* Thanh cuộn tự ẩn (I18) */
* { --scrollbar-thumb: transparent; }
*:hover { --scrollbar-thumb: color-mix(in srgb, var(--foreground) 16%, transparent); }
::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: 9999px; }
.scrollbar-clean { scrollbar-width: none; }
.scrollbar-clean::-webkit-scrollbar { display: none; }

/* ---------- Khung app ---------- */

.app {
	max-width: 600px;
	margin: 0 auto;
	min-height: 100dvh;
	padding-bottom: calc(var(--tabbar-h) + var(--safe-b) + 88px);
}

.topbar {
	position: sticky;
	top: 0;
	z-index: 20;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	height: calc(var(--header-h) + var(--safe-t));
	padding: var(--safe-t) 8px 0 16px;
	background: var(--background);
}
.topbar h1 { min-width: 0; overflow: hidden; font-size: 16px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }

.screens { padding: 4px 16px 0; }
.stack { display: grid; gap: 12px; }

/* Thanh điều hướng dưới */
.tabbar {
	position: fixed;
	z-index: 30;
	left: 0;
	right: 0;
	bottom: 0;
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	max-width: 600px;
	height: calc(var(--tabbar-h) + var(--safe-b));
	margin: 0 auto;
	padding-bottom: var(--safe-b);
	border-top: 1px solid var(--border-strong);
	background: var(--surface);
}
.tabbar__item { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-width: 0; color: var(--muted); font-size: 12px; }
.tabbar__item .i { width: 20px; height: 20px; }
.tabbar__item span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tabbar__item[aria-current="page"] { color: var(--primary); font-weight: 500; }
@media (min-width: 600px) {
	.tabbar { border-inline: 1px solid var(--border-strong); }
}

/* Nút nổi ghi chi (admin) — lớp nổi nên được có bóng */
.fab {
	position: fixed;
	z-index: 31;
	right: max(16px, calc(50% - 300px + 16px));
	bottom: calc(var(--tabbar-h) + var(--safe-b) + 16px);
	display: inline-flex;
	align-items: center;
	gap: 8px;
	height: 52px;
	padding: 0 20px 0 16px;
	border: 0;
	border-radius: 16px;
	background: var(--primary);
	color: var(--primary-foreground);
	font-size: 15px;
	font-weight: 600;
	box-shadow: var(--shadow-float);
	transition: background-color .15s;
}
.fab .i { width: 20px; height: 20px; }
.fab:hover { background: var(--primary-hover); }

/* ---------- Card, danh sách ---------- */

.card {
	overflow: hidden;
	border: 1px solid var(--border);
	border-radius: 16px;
	background: var(--surface);
}
.card--pad { padding: 16px; }
.card__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 40px; }
.card__head--list { padding: 8px 16px 0; }
.card__title { min-width: 0; font-size: 16px; font-weight: 600; }
.link { display: inline-flex; align-items: center; height: 32px; color: color-mix(in srgb, var(--foreground) 70%, transparent); font-size: 14px; font-weight: 500; white-space: nowrap; }
.link:hover { color: var(--foreground); text-decoration: underline; text-underline-offset: 3px; }

.group-label { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 8px 4px; color: var(--muted); font-size: 12px; font-weight: 500; }

.list > li + li { border-top: 1px solid var(--border); }
.day { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 8px 16px; background: var(--surface-hover); color: var(--muted); font-size: 12px; font-weight: 500; }
.row {
	display: flex;
	align-items: center;
	gap: 12px;
	width: 100%;
	min-height: 64px;
	padding: 12px 16px;
	border: 0;
	background: none;
	text-align: left;
	transition: background-color .15s;
}
button.row:hover { background: var(--surface-hover); }
button.row:disabled { cursor: default; }
button.row:disabled:hover { background: none; }
.row-wrap { display: flex; align-items: center; }
.row-wrap > .row { flex: 1; min-width: 0; }
.row-wrap > .row-actions { flex: none; display: flex; align-items: center; gap: 4px; padding-right: 12px; }
.row__main { flex: 1; min-width: 0; }
.row__title { display: block; overflow: hidden; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.row__sub { display: block; margin-top: 2px; color: var(--muted); font-size: 12px; overflow-wrap: anywhere; }
.row > .badge, .row-actions > .badge { flex: none; }
.row__sub .i { display: inline-block; width: 14px; height: 14px; margin-right: 2px; vertical-align: -2px; }
.row__end { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; text-align: right; }
.row__end > .num:first-child { font-weight: 600; }
.row__end small { color: var(--muted); font-size: 12px; }
.row.is-inactive .row__main, .row.is-inactive .avatar { opacity: .55; }

.tx-icon { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--background); color: var(--muted); }
.tx-icon .i { width: 18px; height: 18px; }
.tx-icon--in { color: var(--success); }

.avatar {
	flex: none;
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: color-mix(in srgb, var(--c, var(--primary)) 12%, var(--surface));
	color: color-mix(in srgb, var(--c, var(--primary)) 75%, var(--foreground));
	box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c, var(--primary)) 28%, transparent);
	font-size: 14px;
	font-weight: 600;
}

.badge {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	height: 22px;
	padding: 0 8px;
	border-radius: 999px;
	background: var(--neutral-bg);
	color: var(--neutral);
	font-size: 12px;
	font-weight: 500;
	white-space: nowrap;
}
.badge .i { width: 12px; height: 12px; }
.badge--success { background: var(--success-bg); color: var(--success); }
.badge--warning { background: var(--warning-bg); color: var(--warning); }
.badge--error { background: var(--error-bg); color: var(--error-strong); }

.empty { padding: 24px 16px; color: var(--muted); font-size: 14px; text-align: center; }

/* Khung chờ đúng hình dòng thật */
.sk-row { display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 12px 16px; }
.sk-row + .sk-row { border-top: 1px solid var(--border); }
.sk { border-radius: 999px; background: var(--background); animation: pulse 1.4s ease-in-out infinite; }
.sk--box { flex: none; width: 40px; height: 40px; border-radius: 12px; }
.sk--line { height: 12px; }
.sk-row > div { flex: 1; display: grid; gap: 8px; }
@keyframes pulse { 50% { opacity: .5; } }

/* ---------- Nút ---------- */

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 40px;
	max-width: 100%;
	padding: 8px 16px;
	border: 1px solid var(--border-strong);
	border-radius: 12px;
	background: var(--surface);
	font-size: 14px;
	font-weight: 500;
	line-height: 1.25;
	text-align: center;
	transition: background-color .15s, color .15s;
}
.btn:hover { background: var(--button-hover); }
.btn:disabled { cursor: not-allowed; opacity: .5; }
.btn[aria-busy="true"] { cursor: progress; }
.btn--primary { border-color: transparent; background: var(--primary); color: var(--primary-foreground); }
.btn--primary:hover { background: var(--primary-hover); }
.btn--secondary { border-color: transparent; background: var(--secondary); }
.btn--secondary:hover { background: var(--secondary-hover); }
.btn--danger { border-color: transparent; background: var(--danger-bg); color: var(--danger); }
.btn--danger:hover { background: var(--danger-bg-hover); }
.btn--form { min-height: 44px; }
.btn--grow { flex: 1; }
.btn--icon { width: 44px; padding: 0; }
@media (min-width: 768px) { .btn--form { min-height: 40px; } .btn--icon { width: 40px; } }

.icon-btn {
	display: inline-grid;
	place-items: center;
	width: 40px;
	height: 40px;
	flex: none;
	border: 0;
	border-radius: 12px;
	background: transparent;
	color: var(--muted);
	transition: background-color .15s, color .15s;
}
.icon-btn:hover { background: color-mix(in srgb, var(--foreground) 5%, transparent); color: var(--foreground); }
.icon-btn .i { width: 20px; height: 20px; }
.row-actions .icon-btn:hover { background: color-mix(in srgb, var(--foreground) 8%, transparent); }

/* Chip */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips:empty { display: none; }
.chips--scroll { flex-wrap: nowrap; overflow-x: auto; margin-inline: -20px; padding-inline: 20px; }
.chip {
	flex: none;
	display: inline-flex;
	align-items: center;
	max-width: 240px;
	height: 36px;
	padding: 0 14px;
	border: 0;
	border-radius: 999px;
	background: color-mix(in srgb, var(--foreground) 5%, transparent);
	color: color-mix(in srgb, var(--foreground) 75%, transparent);
	font-size: 14px;
	font-weight: 500;
	transition: background-color .15s, color .15s;
}
.chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chip:hover { background: color-mix(in srgb, var(--foreground) 10%, transparent); color: var(--foreground); }
.chip[aria-pressed="true"] { background: var(--primary); color: var(--primary-foreground); }

/* Segmented: rãnh chìm, ô chọn nổi */
.segmented {
	display: grid;
	grid-auto-columns: minmax(0, 1fr);
	grid-auto-flow: column;
	gap: 4px;
	padding: 4px;
	border-radius: 12px;
	background: var(--background);
	box-shadow: var(--shadow-segment-track);
}
.segmented--page { background: color-mix(in srgb, var(--foreground) 5%, transparent); }
.segmented > button, .segmented > label > span {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 32px;
	padding: 0 6px;
	border: 0;
	border-radius: 8px;
	background: transparent;
	color: color-mix(in srgb, var(--foreground) 60%, transparent);
	font-size: 14px;
	font-weight: 500;
	white-space: nowrap;
	cursor: pointer;
	transition: color .15s, background-color .15s, box-shadow .15s;
}
.segmented > button:hover, .segmented > label > span:hover { color: var(--foreground); }
.segmented > label { display: block; min-width: 0; }
.segmented input { position: absolute; opacity: 0; pointer-events: none; }
.segmented > button[aria-checked="true"], .segmented input:checked + span { background: var(--surface); color: var(--foreground); box-shadow: var(--shadow-segment-thumb); }

/* Điều hướng tháng: ‹ nhãn › */
.month-nav { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.month-nav__label {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	height: 40px;
	padding: 0 12px;
	border: 0;
	border-radius: 12px;
	background: transparent;
	font-size: 16px;
	font-weight: 600;
}
button.month-nav__label:hover { background: color-mix(in srgb, var(--foreground) 5%, transparent); }
.month-nav__label small { color: var(--muted); font-size: 12px; font-weight: 500; }

/* ---------- Số liệu ---------- */

.stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--border); }
.stats--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.stats > div { min-width: 0; padding: 12px 16px; background: var(--surface); }
.stats--3 > div { padding-inline: 12px; }
.stats dt { color: var(--muted); font-size: 12px; font-weight: 500; }
.stats dd { margin-top: 2px; overflow: hidden; font-size: 14px; font-weight: 600; text-overflow: ellipsis; }
.card > .stats { border-top: 1px solid var(--border); }

.balance { padding: 16px; }
.balance__label { color: var(--muted); font-size: 12px; font-weight: 500; }
.balance__value { margin-top: 4px; font-size: 30px; font-weight: 600; line-height: 1.2; letter-spacing: -0.02em; }

.progress { height: 8px; overflow: hidden; border-radius: 999px; background: var(--background); }
.progress__bar { height: 100%; width: 0; border-radius: inherit; background: var(--primary); transition: width .4s ease; }
.progress-line { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 4px 0 8px; }
.progress-line strong { font-size: 14px; font-weight: 600; }
.progress-line span { color: var(--muted); font-size: 12px; }
.note { margin-top: 8px; color: var(--muted); font-size: 12px; }
.note strong { color: var(--foreground); font-weight: 500; }
.page-note { margin: 0 4px; }
.progress-line--spaced { margin-top: 16px; }
.link--inline { height: auto; font-size: inherit; text-decoration: underline; text-underline-offset: 3px; }

/* Mức nộp của tháng */
.fee { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.fee__label { color: var(--muted); font-size: 12px; font-weight: 500; }
.fee__value { margin-top: 2px; font-size: 16px; font-weight: 600; }
.fee .segmented { flex: 1; min-width: 200px; max-width: 280px; }

/* ---------- Khoảnh khắc ---------- */

.moment__body { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; padding: 12px 16px; border: 0; background: none; text-align: left; transition: background-color .15s; }
.moment__body:hover { background: var(--surface-hover); }
.moment__title { display: block; font-size: 16px; font-weight: 600; }
.grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 2px; }
.grid > button { position: relative; aspect-ratio: 1; overflow: hidden; grid-column: span 2; padding: 0; border: 0; background: var(--background); }
.grid img { display: block; width: 100%; height: 100%; object-fit: cover; }
.grid--1 > button { grid-column: span 6; aspect-ratio: 16 / 10; }
.grid--2 > button, .grid--4 > button { grid-column: span 3; aspect-ratio: 4 / 3; }
.grid--3 > button:first-child { grid-column: span 6; aspect-ratio: 2 / 1; }
.grid--3 > button:not(:first-child) { grid-column: span 3; aspect-ratio: 4 / 3; }
.grid__more { position: absolute; inset: 0; display: grid; place-items: center; background: rgb(0 0 0 / 0.45); color: #fff; font-size: 20px; font-weight: 600; }

/* ---------- Sheet (dialog): đáy màn ở mobile, modal giữa từ 640px ---------- */

.sheet {
	width: 100%;
	max-width: 100%;
	max-height: 92dvh;
	margin: auto 0 0;
	padding: 0;
	border: 0;
	border-radius: 20px 20px 0 0;
	background: var(--surface);
	color: var(--foreground);
	box-shadow: var(--shadow-float);
	overflow: hidden;
}
.sheet[open] { display: flex; flex-direction: column; animation: sheet-in .5s var(--ease-sheet); }
.sheet.is-closing { animation: sheet-out .35s var(--ease-sheet) forwards; }
.sheet::backdrop { background: var(--overlay); animation: fade-in .5s var(--ease-sheet); }
.sheet.is-closing::backdrop { animation: fade-out .35s var(--ease-sheet) forwards; }
@keyframes sheet-in { from { translate: 0 100%; } }
@keyframes sheet-out { to { translate: 0 100%; } }
@keyframes fade-in { from { opacity: 0; } }
@keyframes fade-out { to { opacity: 0; } }

.sheet__grip { flex: none; width: 36px; height: 4px; margin: 8px auto 0; border-radius: 9px; background: var(--border-strong); }
.sheet__head { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 56px; padding: 4px 12px 0 20px; }
.sheet__head h2 { min-width: 0; font-size: 18px; font-weight: 600; }
.sheet__body { flex: 1; min-height: 0; overflow-y: auto; padding: 4px 20px 20px; overscroll-behavior: contain; }
.sheet__foot { flex: none; display: flex; gap: 8px; padding: 12px 20px calc(16px + var(--safe-b)); border-top: 1px solid var(--border); background: var(--surface); }
.sheet__foot:empty { display: none; }
.sheet > form { display: flex; flex-direction: column; min-height: 0; flex: 1; }

@media (min-width: 640px) {
	.sheet { width: calc(100% - 32px); max-width: 480px; max-height: min(720px, calc(100dvh - 64px)); margin: auto; border-radius: 16px; }
	.sheet[open] { animation: modal-in .15s ease-out; }
	.sheet.is-closing { animation: modal-out .1s ease-in forwards; }
	.sheet::backdrop { animation-duration: .15s; }
	.sheet.is-closing::backdrop { animation-duration: .1s; }
	.sheet__grip { display: none; }
	.sheet__head { padding-top: 8px; }
	.sheet__foot { padding-bottom: 16px; }
	@keyframes modal-in { from { opacity: 0; scale: .95; } }
	@keyframes modal-out { to { opacity: 0; scale: .95; } }
}

/* Form */
.form { display: grid; gap: 20px; }
.field { display: grid; gap: 6px; min-width: 0; }
.field > label, .field > .label { width: fit-content; font-size: 14px; font-weight: 500; }
.field__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.input {
	width: 100%;
	height: 44px;
	padding: 0 14px;
	border: 1px solid var(--border-strong);
	border-radius: 12px;
	background: var(--surface);
	font-size: 16px; /* chống iOS zoom (R8) */
	transition: border-color .15s, box-shadow .15s;
}
select.input { appearance: none; padding-right: 36px; background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23707070' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center; }
.input::placeholder { color: var(--muted); }
.input:focus { border-color: var(--border-focus); box-shadow: 0 0 0 2px var(--ring-focus); }
@media (min-width: 768px) { .input { height: 40px; font-size: 14px; } }

.amount { display: grid; gap: 12px; }
.amount__box {
	display: flex;
	align-items: baseline;
	justify-content: center;
	gap: 4px;
	padding: 8px 0;
	border-bottom: 1px solid var(--border-strong);
	transition: border-color .15s;
}
.amount__box:focus-within { border-color: var(--border-focus); }
.amount__box input {
	width: 1.5ch;
	min-width: 1.5ch;
	max-width: 85%;
	padding: 0;
	border: 0;
	background: none;
	font-size: 30px;
	font-weight: 600;
	letter-spacing: -0.02em;
	text-align: center;
	font-variant-numeric: tabular-nums;
}
.amount__box input::placeholder { color: var(--muted); }
.amount__box span { color: var(--muted); font-size: 20px; font-weight: 600; }
.amount .chips { justify-content: center; }

.stepper { display: flex; align-items: center; height: 44px; padding: 0 2px; border: 1px solid var(--border-strong); border-radius: 12px; background: var(--surface); }
.stepper .icon-btn { width: 38px; height: 38px; border-radius: 10px; }
.stepper__value { flex: 1; min-width: 0; overflow: hidden; font-size: 14px; font-weight: 500; text-align: center; text-overflow: ellipsis; white-space: nowrap; }
@media (min-width: 768px) { .stepper { height: 40px; } .stepper .icon-btn { width: 34px; height: 34px; } }

.photos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.photo-add, .photo-thumb { position: relative; aspect-ratio: 1; overflow: hidden; border-radius: 12px; }
.photo-add {
	order: 99;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 4px;
	border: 1px dashed var(--border-strong);
	color: var(--muted);
	font-size: 12px;
	font-weight: 500;
	cursor: pointer;
	transition: background-color .15s, color .15s;
}
.photo-add:hover { background: var(--surface-hover); color: var(--foreground); }
.photo-add .i { width: 20px; height: 20px; }
.photo-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.photo-thumb.is-uploading img { opacity: .4; }
.photo-thumb.is-uploading::after { content: ""; position: absolute; inset: 0; margin: auto; width: 20px; height: 20px; border: 2px solid var(--primary); border-right-color: transparent; border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { rotate: 1turn; } }
.photo-thumb button { position: absolute; top: 4px; right: 4px; display: grid; place-items: center; width: 24px; height: 24px; padding: 0; border: 0; border-radius: 50%; background: rgb(0 0 0 / 0.6); color: #fff; }
.photo-thumb button .i { width: 14px; height: 14px; }

.swatches { display: flex; flex-wrap: wrap; gap: 8px; }
.swatches button { width: 32px; height: 32px; padding: 0; border: 0; border-radius: 50%; background: var(--c); box-shadow: inset 0 0 0 2px var(--surface); }
.swatches button[aria-pressed="true"] { box-shadow: inset 0 0 0 2px var(--surface), 0 0 0 2px var(--foreground); }

.setting { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.setting__name { font-size: 14px; font-weight: 500; }
.setting__desc { margin-top: 2px; color: var(--muted); font-size: 14px; }
.switch { position: relative; display: inline-flex; align-items: center; flex: none; width: 44px; height: 24px; padding: 2px; border: 0; border-radius: 999px; background: color-mix(in srgb, var(--muted) 40%, transparent); transition: background-color .15s; }
.switch::before { content: ""; position: absolute; inset: -8px; }
.switch span { width: 20px; height: 20px; border-radius: 50%; background: var(--surface); box-shadow: 0 1px 2px rgb(0 0 0 / 0.2); transition: translate .15s; }
.switch[aria-checked="true"] { background: var(--primary); }
.switch[aria-checked="true"] span { translate: 20px 0; background: var(--primary-foreground); }

/* Chi tiết giao dịch */
.detail__amount { font-size: 30px; font-weight: 600; line-height: 1.2; letter-spacing: -0.02em; }
.detail__title { margin-top: 4px; font-size: 16px; font-weight: 500; }
.dl { margin-top: 16px; border-top: 1px solid var(--border); }
.dl > div { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--border); }
.dl dt { color: var(--muted); }
.dl dd { font-weight: 500; text-align: right; }
.detail .grid { margin-top: 16px; overflow: hidden; border-radius: 12px; }

.confirm-text { color: var(--muted); font-size: 14px; line-height: 1.6; }

/* Menu */
.menu-head { padding: 0 20px 4px; color: var(--muted); font-size: 14px; }
.menu-head strong { color: var(--foreground); font-weight: 500; }
.menu { padding: 4px 8px 8px; }
.menu a, .menu button, .menu label {
	display: flex;
	align-items: center;
	gap: 12px;
	width: 100%;
	min-height: 48px;
	padding: 0 12px;
	border: 0;
	border-radius: 12px;
	background: none;
	font-size: 14px;
	font-weight: 500;
	text-align: left;
	cursor: pointer;
	transition: background-color .15s, color .15s;
}
.menu a:hover, .menu button:hover, .menu label:hover { background: var(--surface-hover); }
.menu .i { width: 20px; height: 20px; color: var(--muted); }
.menu .is-danger:hover { background: var(--danger-bg); color: var(--danger); }
.menu .is-danger:hover .i { color: var(--danger); }

/* Xem ảnh */
.lightbox { width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: #000; color: #fff; }
.lightbox[open] { display: grid; place-items: center; animation: fade-in .15s ease-out; }
.lightbox::backdrop { background: #000; }
.lightbox img { max-width: 100%; max-height: 100dvh; object-fit: contain; user-select: none; -webkit-user-drag: none; }
.lightbox .icon-btn { position: absolute; z-index: 1; background: rgb(255 255 255 / 0.12); color: #fff; }
.lightbox .icon-btn:hover { background: rgb(255 255 255 / 0.2); }
.lightbox__close { top: calc(var(--safe-t) + 12px); right: 12px; }
.lightbox__nav { top: 50%; translate: 0 -50%; }
.lightbox__nav--prev { left: 12px; }
.lightbox__nav--next { right: 12px; }
.lightbox__caption { position: absolute; left: 0; right: 0; bottom: 0; padding: 32px 16px calc(16px + var(--safe-b)); background: linear-gradient(transparent, rgb(0 0 0 / 0.7)); font-size: 14px; text-align: center; }

/* Toast: đỉnh màn ở mobile, đáy giữa từ 640px */
.toasts {
	position: fixed;
	z-index: 100;
	top: calc(var(--safe-t) + 12px);
	left: 16px;
	right: 16px;
	display: grid;
	justify-items: center;
	gap: 8px;
	pointer-events: none;
}
.toast {
	display: flex;
	align-items: center;
	gap: 12px;
	min-width: min(288px, 100%);
	max-width: 448px;
	padding: 10px 8px 10px 14px;
	border: 1px solid var(--border);
	border-radius: 16px;
	background: var(--surface);
	box-shadow: var(--shadow-float);
	font-size: 14px;
	pointer-events: auto;
	animation: toast-in-top .3s ease-out;
}
.toast.is-leaving { animation: toast-out-top .2s ease-in forwards; }
@keyframes toast-in-top { from { opacity: 0; translate: 0 -100%; } }
@keyframes toast-out-top { to { opacity: 0; translate: 0 -100%; } }
@keyframes toast-in-bottom { from { opacity: 0; translate: 0 100%; } }
@keyframes toast-out-bottom { to { opacity: 0; translate: 0 100%; } }
@media (min-width: 640px) {
	.toasts { top: auto; bottom: calc(var(--tabbar-h) + var(--safe-b) + 24px); }
	.toast { animation-name: toast-in-bottom; }
	.toast.is-leaving { animation-name: toast-out-bottom; }
}
.toast > .i { width: 20px; height: 20px; color: var(--success); }
.toast.is-error > .i { color: var(--error-text); }
.toast p { flex: 1; min-width: 0; }
.toast button { flex: none; height: 32px; padding: 0 12px; border: 0; border-radius: 8px; background: none; font-size: 14px; font-weight: 500; }
.toast button:hover { background: color-mix(in srgb, var(--foreground) 5%, transparent); }

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}