:root {
	color-scheme: light;
	font-family: "Avenir Next", "Segoe UI", sans-serif;
	line-height: 1.4;
	--bg-top: #fff6d6;
	--bg-bottom: #f6fbff;
	--panel: rgba(255, 255, 255, 0.9);
	--panel-strong: #ffffff;
	--text: #1d2a35;
	--muted: #5f6d78;
	--line: rgba(29, 42, 53, 0.08);
	--gold: #e5a900;
	--gold-dark: #a66800;
	--green: #1e9b61;
	--red: #d15757;
	--shadow: 0 24px 60px rgba(34, 52, 70, 0.12);
}

* {
	box-sizing: border-box;
}

[hidden] {
	display: none !important;
}

body {
	margin: 0;
	min-height: 100vh;
	color: var(--text);
	background:
		radial-gradient(circle at top left, rgba(255, 222, 89, 0.35), transparent 30%),
		radial-gradient(circle at top right, rgba(110, 198, 255, 0.25), transparent 32%),
		linear-gradient(180deg, var(--bg-top) 0%, var(--bg-bottom) 100%);
}

button,
input,
select {
	font: inherit;
}

a.button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
}

.page {
	min-height: 100vh;
	display: grid;
	place-items: center;
	padding: 24px;
}

.card,
.panel,
.balance-panel,
.hero {
	background: var(--panel);
	border: 1px solid var(--line);
	box-shadow: var(--shadow);
	backdrop-filter: blur(18px);
}

.card {
	width: 100%;
	max-width: 420px;
	border-radius: 28px;
	padding: 32px;
}

.auth-card {
	max-width: 460px;
}

.brand {
	text-align: center;
	margin-bottom: 28px;
}

.coin {
	font-size: 46px;
	margin-bottom: 8px;
}

.brand h1 {
	margin: 0 0 10px;
	font-size: 32px;
}

.brand p {
	margin: 0;
	color: var(--muted);
}

.form,
.transaction-form,
.inline-form {
	display: grid;
	gap: 16px;
}

.field,
.transaction-form label,
.inline-field {
	display: grid;
	gap: 8px;
}

.field span,
.transaction-form span,
.inline-field span,
.section-label,
.eyebrow {
	font-size: 13px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--muted);
}

.field input,
.transaction-form input,
.inline-field input,
.inline-field select {
	width: 100%;
	border: 1px solid rgba(29, 42, 53, 0.14);
	border-radius: 16px;
	padding: 13px 14px;
	background: var(--panel-strong);
	outline: none;
	transition: border-color 120ms ease, box-shadow 120ms ease, transform 120ms ease;
}

.field input:focus,
.transaction-form input:focus,
.inline-field input:focus,
.inline-field select:focus {
	border-color: rgba(229, 169, 0, 0.8);
	box-shadow: 0 0 0 4px rgba(229, 169, 0, 0.14);
	transform: translateY(-1px);
}

.error,
.flash-message {
	margin: 0;
	border-radius: 16px;
	padding: 12px 14px;
	font-size: 14px;
}

.error,
.flash-message[data-tone="error"] {
	color: #8d2020;
	background: #fff1f1;
	border: 1px solid rgba(209, 87, 87, 0.25);
}

.flash-message[data-tone="success"] {
	color: #0b6d42;
	background: #edfdf5;
	border: 1px solid rgba(30, 155, 97, 0.22);
}

.button {
	border: 0;
	border-radius: 16px;
	padding: 13px 18px;
	font-weight: 700;
	cursor: pointer;
	color: #fffef8;
	background: linear-gradient(180deg, #f0b300 0%, #cc8e00 100%);
	box-shadow: 0 10px 24px rgba(204, 142, 0, 0.22);
	transition: transform 120ms ease, filter 120ms ease;
}

.button:hover,
.preset-card:hover,
.auth-tab:hover {
	filter: brightness(1.02);
	transform: translateY(-1px);
}

.button:active,
.preset-card:active {
	transform: translateY(0);
}

.button-secondary {
	background: #fff;
	color: var(--text);
	box-shadow: none;
	border: 1px solid var(--line);
}

.button-danger {
	background: linear-gradient(180deg, #ef7c7c 0%, #d15757 100%);
	box-shadow: 0 10px 24px rgba(209, 87, 87, 0.2);
}

.auth-tabs {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px;
	margin-bottom: 16px;
}

.auth-tab {
	border: 1px solid var(--line);
	border-radius: 999px;
	padding: 11px 14px;
	background: rgba(255, 255, 255, 0.78);
	color: var(--muted);
	font-weight: 700;
	cursor: pointer;
	transition: background 120ms ease, color 120ms ease, transform 120ms ease;
}

.auth-tab-active {
	background: linear-gradient(180deg, #f0b300 0%, #cc8e00 100%);
	color: #fffef8;
	border-color: transparent;
}

.dashboard-page {
	max-width: 1200px;
	margin: 0 auto;
	padding: 24px 24px 40px;
}

.hero,
.balance-panel,
.panel {
	border-radius: 28px;
}

.hero {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 20px;
	padding: 28px;
	margin-bottom: 18px;
}

.hero-actions {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 12px;
}

.user-pill,
.permission-pill {
	margin: 0;
	padding: 10px 14px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.9);
	border: 1px solid var(--line);
	color: var(--muted);
	font-weight: 700;
}

.hero h1,
.panel h2 {
	margin: 0;
}

.hero-copy,
.panel-header p {
	margin: 8px 0 0;
	color: var(--muted);
	max-width: 58ch;
}

.hero-permission {
	display: inline-flex;
	margin-top: 14px;
}

.panel {
	padding: 24px;
}

.panel-header {
	margin-bottom: 18px;
}

.top-panel {
	margin-bottom: 18px;
}

.view-tabs {
	display: inline-grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 10px;
	width: 100%;
}

.view-tab {
	border: 1px solid var(--line);
	border-radius: 999px;
	padding: 11px 14px;
	background: rgba(255, 255, 255, 0.78);
	color: var(--muted);
	font-weight: 700;
	cursor: pointer;
	transition: background 120ms ease, color 120ms ease, transform 120ms ease;
}

.view-tab:hover {
	transform: translateY(-1px);
}

.view-tab-active {
	background: linear-gradient(180deg, #f0b300 0%, #cc8e00 100%);
	color: #fffef8;
	border-color: transparent;
}

.account-toolbar {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 18px;
	align-items: end;
}

.inline-form {
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: end;
}

.balance-panel {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 20px;
	padding: 24px 28px;
	margin-bottom: 18px;
	background: linear-gradient(135deg, rgba(255, 241, 191, 0.72), rgba(255, 255, 255, 0.92));
}

.balance-display {
	display: flex;
	align-items: baseline;
	gap: 10px;
	font-weight: 800;
}

.compact-balance #balance-value,
.compact-balance span:first-child {
	font-size: clamp(28px, 5vw, 42px);
}

#balance-value {
	font-size: clamp(42px, 8vw, 64px);
	line-height: 1;
}

.balance-unit {
	font-size: 20px;
	color: var(--gold-dark);
}

.grid-layout {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 18px;
	margin-bottom: 18px;
}

.preset-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 12px;
}

.preset-card {
	display: grid;
	gap: 10px;
	min-height: 140px;
	border: 1px solid rgba(229, 169, 0, 0.16);
	border-radius: 20px;
	padding: 16px;
	background: linear-gradient(180deg, rgba(255, 249, 230, 0.96), rgba(255, 255, 255, 0.96));
	transition: transform 120ms ease, filter 120ms ease, border-color 120ms ease;
}

.preset-card:hover {
	border-color: rgba(229, 169, 0, 0.4);
}

.preset-main {
	border: 0;
	padding: 0;
	background: transparent;
	text-align: left;
	cursor: pointer;
	display: grid;
	gap: 10px;
}

.preset-title {
	font-weight: 700;
	color: var(--text);
	line-height: 1.3;
}

.preset-amount {
	color: var(--gold-dark);
	font-weight: 700;
}

.preset-actions,
.button-row {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
}

.preset-actions .button,
.button-row .button {
	padding: 10px 14px;
}

.preset-form {
	margin-bottom: 14px;
}

.checkbox-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
}

.checkbox-row {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 12px 14px;
	border-radius: 16px;
	background: rgba(255, 255, 255, 0.8);
	border: 1px solid var(--line);
}

.checkbox-row span {
	font-size: 15px;
	letter-spacing: 0;
	text-transform: none;
}

.share-list,
.history-list {
	display: grid;
	gap: 12px;
}

.share-row,
.history-row {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	padding: 14px 16px;
	border-radius: 18px;
	background: rgba(255, 255, 255, 0.72);
	border: 1px solid var(--line);
}

.history-panel {
	padding-bottom: 12px;
}

.history-info,
.history-amount,
.history-balance,
.history-date,
.share-tags {
	margin: 0;
}

.history-info {
	font-weight: 700;
}

.history-date,
.history-balance,
.share-tags {
	margin-top: 4px;
	color: var(--muted);
	font-size: 14px;
}

.history-meta {
	text-align: right;
}

.history-amount {
	font-size: 22px;
	font-weight: 800;
}

.history-amount.deposit {
	color: var(--green);
}

.history-amount.withdraw {
	color: var(--red);
}

.history-empty,
.empty-state {
	color: var(--muted);
}

@media (max-width: 960px) {
	.account-toolbar,
	.grid-layout {
		grid-template-columns: 1fr;
	}

	.inline-form {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 860px) {
	.dashboard-page {
		padding: 16px 16px 28px;
	}

	.hero,
	.balance-panel,
	.history-row,
	.share-row {
		flex-direction: column;
	}

	.hero-actions {
		align-items: stretch;
	}

	.history-meta {
		text-align: left;
	}

	.checkbox-grid {
		grid-template-columns: 1fr;
	}
}