* { box-sizing: border-box; }
html, body { height: 100%; }
html { background: #0f172a; }
body {
	margin: 0;
	font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	background: #0f172a;
	color: #e2e8f0;
    /* Fill iOS notch area when in standalone (black-translucent) */
    padding-top: constant(safe-area-inset-top);
    padding-top: env(safe-area-inset-top);
    padding-bottom: constant(safe-area-inset-bottom);
    padding-bottom: env(safe-area-inset-bottom);
}
/* helpers if needed on specific elements */
.ios-safe { padding-top: constant(safe-area-inset-top); padding-top: env(safe-area-inset-top); }
.ios-safe-bot { padding-bottom: constant(safe-area-inset-bottom); padding-bottom: env(safe-area-inset-bottom); }
.ios-safe-bg { background-color: #0f172a; }
.container {
	min-height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 24px;
	gap: 16px;
}
.card {
	width: 100%;
	max-width: 480px;
	background: #111827;
	border: 1px solid #1f2937;
	border-radius: 16px;
	padding: 24px;
	box-shadow: 0 10px 20px rgba(0,0,0,0.3);
}
.center { text-align: center; }
.title { font-size: 18px; opacity: 0.9; margin: 0 0 8px; }
.amount {
	font-size: 48px;
	font-weight: 700;
	letter-spacing: 1px;
	margin: 12px 0;
}
.subtle { font-size: 13px; opacity: 0.7; }
.actions { display: flex; gap: 12px; justify-content: center; margin-top: 16px; }
.btn {
	appearance: none;
	border: 1px solid #334155;
	background: #0ea5e9;
	color: white;
	padding: 12px 16px;
	border-radius: 10px;
	font-weight: 600;
	font-size: 16px;
	text-decoration: none;
}
.btn.secondary { background: transparent; color: #e2e8f0; }

/* Disabled button state */
.btn[disabled], .btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    filter: grayscale(40%);
}

/* Equal-sized, extra-bold hero lines on the main screen */
.hero-line {
	font-size: 38px;
	font-weight: 800;
	letter-spacing: 0.5px;
	margin: 6px 0;
}

/* .gradiented {
	background: -webkit-linear-gradient(#eee, #333);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
} */

@supports (background-clip: text) {
	.gradiented {
		/* background-image: linear-gradient(60deg, #E21143, #FFB03A); */
		background-image: linear-gradient(60deg, #fc00ff, #00dbde);
		background-clip: text;
		color: transparent;
	}
  }

  .below-actions { margin-top: 8px;
	position: absolute;
	bottom: 10%;
	width: 100%;}

form { display: grid; gap: 14px; }
label { font-size: 14px; opacity: 0.85; }
input, textarea, select {
	width: 100%;
	padding: 12px 14px;
	border-radius: 10px;
	border: 1px solid #334155;
	background: #0b1220;
	color: #e2e8f0;
	font-size: 16px;
}
input:focus, textarea:focus, select:focus { outline: 2px solid #0ea5e9; }

.footer { margin-top: 8px; font-size: 12px; opacity: 0.6; text-align: center; }

.hidden { display: none; }

/* Weekly summary */
.weekly-progress { display: flex; align-items: center; justify-content: center; gap: 6px; }
.weekly-progress .icons { display: inline-flex; gap: 4px; flex-wrap: nowrap; }
.weekly-progress .icon { width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center; font-size: 18px; line-height: 1; }
.weekly-progress .icon.big { filter: none; }
.weekly-progress .icon.small { opacity: 0.9; }
.weekly-progress .icon.empty { opacity: 0.35; }
.weekly-progress .icon.devil { filter: none; }
.weekly-overspend { margin-top: 10px; display: grid; gap: 6px; }

/* Burger/menu */
.icon-button {
    appearance: none;
    border: none;
    background: transparent;
    color: #e2e8f0;
    padding: 0;
    border-radius: 0;
    font-size: 22px;
    line-height: 1;
    opacity: 0.5;
    position: fixed;
    top: calc(constant(safe-area-inset-top) + 12px);
    top: calc(env(safe-area-inset-top) + 12px);
    right: 12px;
    z-index: 1100;
    cursor: pointer;
}
.icon-button:hover, .icon-button[aria-expanded="true"] { opacity: 0.85; }
.link { color: #a3b3c2; text-decoration: none; }
.menu {
    position: fixed;
    top: calc(constant(safe-area-inset-top) + 44px);
    top: calc(env(safe-area-inset-top) + 44px);
    right: 12px;
    background: #0b1220;
    border: 1px solid #1f2937;
    border-radius: 10px;
    min-width: 160px;
    box-shadow: 0 10px 20px rgba(0,0,0,0.3);
    display: grid;
    z-index: 1000;
}
.menu-item {
    display: block;
    padding: 10px 12px;
    color: #e2e8f0;
    text-decoration: none;
    background: transparent;
    border: none;
    width: 100%;
    text-align: left;
}
.menu-item:hover { background: #0f172a; }

/* Ensure hidden state wins over .menu display */
.menu.hidden { display: none; }

/* Responsive helpers */
.hidden-sm { display: inline; }
@media (max-width: 380px) {
    .hidden-sm { display: none; }
}

/* Floating actions on details screen */
.floating-actions {
    position: sticky;
    bottom: calc(constant(safe-area-inset-bottom) + 12px);
    bottom: calc(env(safe-area-inset-bottom) + 12px);
    background: rgba(17,24,39,0.8);
    backdrop-filter: blur(6px);
    border: 1px solid #1f2937;
    border-radius: 12px;
    padding: 10px 12px;
    justify-content: space-between;
}