:root {
	color-scheme: light;
	--bg: #eef3f8;
	--card: rgba(255, 255, 255, 0.8);
	--card-solid: #ffffff;
	--card-border: rgba(148, 163, 184, 0.42);
	--inset-border: rgba(148, 163, 184, 0.5);
	--text: #0f172a;
	--muted: #526175;
	--accent: #0f766e;
	--accent-2: #0ea5e9;
	--danger: #dc2626;
	--success: #047857;
	--radius: 18px;
	--shadow: 0 14px 40px rgba(15, 23, 42, 0.08);
	--tab-bar-bg: rgba(255, 255, 255, 0.8);
}

body[data-theme="dark"] {
	--bg: #0b1220;
	--card: rgba(15, 23, 42, 0.78);
	--card-solid: #111827;
	--card-border: rgba(71, 85, 105, 0.78);
	--inset-border: rgba(100, 116, 139, 0.72);
	--text: #e5edf8;
	--muted: #9fb0c7;
	--accent: #14b8a6;
	--accent-2: #38bdf8;
	--success: #34d399;
	--shadow: 0 16px 44px rgba(2, 6, 23, 0.55);
	--tab-bar-bg: rgba(255, 255, 255, 0.086);
}

* {
	box-sizing: border-box;
}

body {
	margin: 0;
	font-family: 'Plus Jakarta Sans', sans-serif;
	color: var(--text);
	background: radial-gradient(circle at top left, #376d67 0%, transparent 40%),
		radial-gradient(circle at bottom right, #432f5a 0%, transparent 35%),
		var(--bg);
	min-height: 100vh;
}

a {
	color: var(--accent);
	text-decoration: none;
}

.app-shell,
.auth-shell {
	position: relative;
	z-index: 1;
	max-width: 1080px;
	margin: 0 auto;
	padding: 20px;
}

.auth-shell {
	min-height: 100vh;
	display: grid;
	place-items: center;
}

.card {
	background: var(--card);
	box-shadow: var(--shadow);
	border-radius: var(--radius);
	/* backdrop-filter: blur(12px); */
	padding: 10px;
}

.inset-card {
	background: var(--card-solid);
	box-shadow: none;
}

.auth-card {
	width: min(480px, 96vw);
	padding: 28px;
}

.topbar,
.tabs,
.panel {
	padding: 18px;
	margin-bottom: 16px;
}

.topbar {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 12px;
}

.topbar h1 {
	margin: 0;
	font-size: 1.35rem;
}

.subtitle {
	margin: 6px 0 0;
	color: var(--muted);
}

.tabs {
	display: flex;
	overflow-x: auto;
	gap: 10px;
	padding: 10px;
	background: var(--tab-bar-bg);
	backdrop-filter: blur(12px);
}

.tab-link {
	padding: 10px 14px;
	border-radius: 12px;
	color: var(--text);
	font-weight: 600;
	white-space: nowrap;
}

.tab-link.active {
	background: linear-gradient(120deg, var(--accent), var(--accent-2));
	color: #ffffff;
}

.tab-link.active .tab-icon svg {
	fill: #ffffff;
}

.content-grid {
	display: grid;
	gap: 16px;
	padding-bottom: 28px;
}

.hero-panel {
	display: grid;
	gap: 16px;
}

.pill {
	display: inline-block;
	margin: 0;
	padding: 5px 10px;
	border-radius: 999px;
	color: var(--accent);
	background: rgba(15, 118, 110, 0.1);
	font-weight: 700;
	font-size: 0.8rem;
}

.hero-panel h2 {
	margin: 10px 0 4px;
	font-size: 2.1rem;
}

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

.kpi {
	background: #ffffff;
	border-radius: 14px;
	border: 1px solid #e2e8f0;
	padding: 12px;
}

.kpi span {
	display: block;
	color: var(--muted);
	font-size: 0.84rem;
}

.kpi strong {
	font-size: 1.1rem;
}

h3,
h4 {
	margin-top: 0;
}

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

.form-actions {
	grid-column: 1 / -1;
}

.field,
.stack {
	display: grid;
	gap: 8px;
}

.field>span,
.field-label {
	font-size: 0.86rem;
	color: var(--muted);
	font-weight: 600;
}

input,
select,
button {
	font: inherit;
}

input,
select {
	border: 1px solid #cdd7e5;
	border-radius: 12px;
	background: #ffffff;
	padding: 12px;
	min-height: 46px;
	color: var(--text);
}

body[data-theme="dark"] input,
body[data-theme="dark"] select,
body[data-theme="dark"] .history-item,
body[data-theme="dark"] .kpi,
body[data-theme="dark"] .chart-card,
body[data-theme="dark"] .chip {
	background: #0f172a;
	border-color: #334155;
	color: var(--text);
}

.btn {
	border: none;
	border-radius: 12px;
	background: linear-gradient(120deg, var(--accent), var(--accent-2));
	color: #ffffff;
	font-weight: 700;
	padding: 12px 16px;
	min-height: 46px;
	cursor: pointer;
	text-align: center;
}

.btn-secondary {
	background: #e2e8f0;
	color: #0f172a;
}

.btn-danger {
	background: #fee2e2;
	color: #991b1b;
}

.quick-amounts {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
}

.chip {
	border: 1px solid #d1d5db;
	background: #ffffff;
	color: #0f172a;
	border-radius: 999px;
	padding: 10px 16px;
	min-height: 42px;
	font-weight: 700;
	cursor: pointer;
}

.checkbox-row {
	display: flex;
	gap: 8px;
	align-items: center;
	color: var(--muted);
	font-size: 0.92rem;
}

.notice {
	padding: 12px 14px;
	border-radius: 12px;
	margin-bottom: 14px;
	font-weight: 600;
}

.notice.success {
	background: #dcfce7;
	color: var(--success);
}

.notice.error {
	background: #fee2e2;
	color: #b91c1c;
}

.row-between {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
}

.inline-form {
	display: flex;
	gap: 8px;
}

.history-list {
	display: grid;
	gap: 10px;
	margin-top: 12px;
}

.history-item {
	display: flex;
	justify-content: space-between;
	gap: 10px;
	align-items: center;
	border: 1px solid #e2e8f0;
	background: #ffffff;
	border-radius: 12px;
	padding: 12px;
}

.history-entry {
	align-items: flex-end;
	gap: 12px;
}

.history-edit-form {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
	gap: 10px;
	width: 100%;
}

.history-actions,
.history-delete-form {
	display: flex;
	align-items: end;
}

.history-delete-form {
	align-self: flex-end;
}

.restaurants-map {
	height: 320px;
	border-radius: 0.75rem;
	overflow: hidden;
}

.restaurants-page .favorite-name {
	word-break: break-word;
}

.restaurants-page .restaurant-row {
	align-items: flex-start;
}

.restaurants-page .restaurant-meta {
	min-width: 0;
}

.restaurants-page .restaurant-actions {
	display: flex;
	gap: 0.5rem;
	align-items: center;
	flex-wrap: wrap;
	flex-shrink: 0;
}

.restaurants-page .restaurant-actions form {
	margin: 0;
}

.restaurants-page .restaurant-actions .btn {
	white-space: nowrap;
}

.tab-link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.tab-icon {
	width: 20px;
	height: 20px;
	display: inline-flex;
}

.tab-icon svg {
	width: 20px;
	height: 20px;
	fill: var(--text);
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
}

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

.chart-card {
	border: 1px solid #e2e8f0;
	background: #ffffff;
	border-radius: 14px;
	padding: 14px;
	min-height: 320px;
}

.chart-card canvas {
	width: 100% !important;
	display: block;
	aspect-ratio: 1 / 1;
	height: auto !important;
	margin: 0 auto;
}

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

.mt-16 {
	margin-top: 16px;
}

.mt-1rem {
	margin-top: 1rem;
}

.tips-images {
	display: flex;
}

.tips-image {
	width: 50%;
}

.tips-image-left {
	border-top-left-radius: 16px;
	border-bottom-left-radius: 16px;
}

.tips-image-right {
	border-top-right-radius: 16px;
	border-bottom-right-radius: 16px;
}

.auth-switch {
	color: var(--muted);
	margin-bottom: 0;
}

.admin-actions {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
}

.admin-subnav {
	display: flex;
	gap: 8px;
	margin-top: 4px;
}

.admin-subnav .tab-link {
	background: rgba(255, 255, 255, 0.08);
	border-radius: 10px;
	padding: 10px 12px;
}

.admin-table-wrap {
	overflow: auto;
	border: 1px solid var(--card-border);
	border-radius: 12px;
}

.admin-table {
	width: 100%;
	border-collapse: collapse;
	min-width: 920px;
}

.admin-table th,
.admin-table td {
	padding: 10px;
	border-bottom: 1px solid var(--card-border);
	text-align: left;
	vertical-align: top;
}

.admin-row-actions {
	display: grid;
	gap: 8px;
}

.inline-admin-form {
	display: flex;
	gap: 8px;
	align-items: center;
	flex-wrap: wrap;
}

.inline-admin-form input[type="password"] {
	min-width: 160px;
}

.admin-chart-grid {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.admin-chart-grid .chart-card {
	min-height: 360px;
	height: auto !important;
	aspect-ratio: 1 / 1;
}

@media (max-width: 880px) {
	body, html {
		background: var(--bg);
	}

	.form-grid,
	.settings-grid,
	.kpi-grid {
		grid-template-columns: 1fr;
	}

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

	.chart-card {
		min-height: 300px;
	}

	.topbar {
		align-items: flex-start;
		flex-direction: column;
	}

	.btn {
		width: 100%;
	}

	.tabs {
		position: fixed;
		left: 10px;
		right: 10px;
		bottom: 20px;
		margin: 0;
		z-index: 20;
		justify-content: space-around;
		border-radius: 18px;
		padding: 8px 10px;
	}

	.tab-link {
		flex: 1;
		justify-content: center;
		min-height: 52px;
		border-radius: 14px;
		padding: 10px;
	}

	.tab-label {
		display: none;
	}

	.content-grid {
		padding-bottom: 96px;
	}

	.app-shell {
		padding: 14px;
	}

	.inline-form {
		width: 100%;
		flex-wrap: wrap;
	}

	.history-entry {
		flex-direction: column;
		align-items: stretch;
	}

	.restaurants-map {
		height: 260px;
	}

	.restaurants-page .favorite-row,
	.restaurants-page .restaurant-row {
		flex-direction: column;
		align-items: stretch;
	}

	.restaurants-page .restaurant-actions {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		width: 100%;
	}

	.restaurants-page .restaurant-actions form,
	.restaurants-page .restaurant-actions .btn {
		width: 100%;
	}

	.restaurants-page .restaurant-actions form .btn {
		width: 100%;
	}

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

	.history-actions,
	.history-delete-form {
		width: 100%;
	}

	.admin-actions {
		width: 100%;
	}

	.admin-subnav {
		flex-wrap: wrap;
	}

	.admin-subnav .tab-link {
		flex: 1;
		text-align: center;
	}

	.admin-chart-grid {
		grid-template-columns: 1fr;
	}

	.admin-table {
		min-width: 0;
	}

	.admin-table thead {
		display: none;
	}

	.admin-table,
	.admin-table tbody,
	.admin-table tr,
	.admin-table td {
		display: block;
		width: 100%;
	}

	.admin-table tr {
		padding: 10px;
		border-bottom: 1px solid var(--card-border);
	}

	.admin-table td {
		border: 0;
		padding: 6px 0;
	}

	.admin-table td::before {
		content: attr(data-label);
		display: block;
		font-size: 0.75rem;
		color: var(--muted);
		margin-bottom: 2px;
		font-weight: 700;
		text-transform: uppercase;
		letter-spacing: 0.04em;
	}
}

@media (max-width: 520px) {
	.restaurants-page .restaurant-actions {
		grid-template-columns: 1fr;
	}

	.tips-images {
		flex-direction: column;
	}

	.tips-image {
		width: 100%;
	}

	.tips-image-left {
		border-radius: 16px 16px 0 0;
	}

	.tips-image-right {
		border-radius: 0 0 16px 16px;
	}
}