:root {
	--ios-accent: #0a84ff;
	--ios-accent-pressed: #0a6de0;
	--ios-destructive: #ff3b30;
	--ios-destructive-pressed: #d12a1f;

	--ios-fg: #ffffff;
	--ios-fg-muted: rgba(255,255,255,0.72);
	--ios-fg-danger: rgba(255,50,50,0.72);
	--ios-separator: rgba(255,255,255,0.12);

	--ios-bg: #000000;
	--ios-chrome: rgba(26,26,34,0.72);
	--ios-field: rgba(255,255,255,0.08);

	--ios-radius-lg: 14px;
	--ios-radius-md: 12px;
	--ios-radius-sm: 10px;

	--ios-shadow-1: 0 1px 1.5px rgba(0,0,0,0.24), 0 8px 24px rgba(0,0,0,0.28);
	--ios-shadow-2: 0 1px 1px rgba(0,0,0,0.22), 0 4px 14px rgba(0,0,0,0.24);
}

/* Page */
.ios-page {
	display: flex;
	flex-direction: column;
	height: 100%;
	background: var(--ios-bg);
	color: var(--ios-fg);
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* Header with large title look */
.ios-header {
	position: sticky;
	top: 0;
	z-index: 2;
	background: var(--ios-chrome);
	-webkit-backdrop-filter: blur(28px) saturate(140%);
	backdrop-filter: blur(28px) saturate(140%);
	border-bottom: 1px solid var(--ios-separator);
	padding: 12px 16px;
	padding-top: calc(env(safe-area-inset-top) + 12px);
	text-align: center;
}
.ios-header-title {
	font-size: 15px;
	font-weight: 600;
	letter-spacing: 0.2px;
	color: var(--ios-fg);
	text-shadow: 0 1px 0 rgba(0,0,0,0.25);
}

/* Content */
.ios-content {
	flex: 1;
	width: 100%;
	max-width: 420px;
	margin: 0 auto;
	padding: 16px;
}
.ios-section {
	margin-bottom: 16px;
}

/* Grouped cards like Settings in iOS 18 */
.ios-group {
	background: rgba(255,255,255,0.06);
	border: 1px solid var(--ios-separator);
	border-radius: 18px;
	box-shadow: var(--ios-shadow-2);
	overflow: hidden;
}
.ios-row {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 14px 16px;
}
.ios-row + .ios-row {
	border-top: 1px solid var(--ios-separator);
}
.ios-row-label {
	font-size: 15px;
	color: var(--ios-fg);
}
.ios-row-subtle {
	font-size: 13px;
	color: var(--ios-fg-muted);
}

/* Buttons base with iOS 18 depth and pure CSS springy press */
.ios-btn {
	-webkit-user-select: none;
	user-select: none;
	text-decoration: none !important;
	display: block;
	width: 100%;
	padding: 12px 14px;
	border-radius: var(--ios-radius-lg);
	font-size: 15px;
	font-weight: 600;
	border: 0;
	text-align: center;
	position: relative;
	color: #fff;
	box-shadow: var(--ios-shadow-1);
	outline: none;
	transition:
		transform 140ms cubic-bezier(.2,.8,.2,1),
		filter 140ms,
		box-shadow 140ms,
		background-color 140ms;
}

/* hover feedback */
.ios-btn:hover {
	filter: brightness(1.06);
}

a.ios-btn:hover, a.ios-btn:active {
	color: #fff;
}

/* focus outline */
.ios-btn:focus-visible {
	box-shadow:
		0 0 0 3px rgba(10,132,255,0.35),
		var(--ios-shadow-1);
}

/* tap highlight */
.ios-btn::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: rgba(255,255,255,.14);
	opacity: 0;
	transition: opacity 120ms ease;
	pointer-events: none;
}

/* press state while down */
.ios-btn:active {
	transform: scale(.985);
}
.ios-btn:active::after {
	opacity: 1;
}

/* release bounce */
.ios-btn:focus:not(:active) {
	animation: ios18-press-bounce 180ms cubic-bezier(.2,.8,.2,1);
}
@keyframes ios18-press-bounce {
	0%   { transform: scale(.985); }
	60%  { transform: scale(1.008); }
	100% { transform: scale(1); }
}

/* disabled state */
.ios-btn:disabled,
.ios-btn[aria-disabled="true"] {
	opacity: .5;
	filter: none;
	transform: none;
	cursor: default;
	pointer-events: none;
}

/* Variants */
.ios-btn-primary {
	background: linear-gradient(180deg, var(--ios-accent), var(--ios-accent));
}
.ios-btn-primary:active {
	background: linear-gradient(180deg, var(--ios-accent-pressed), var(--ios-accent-pressed));
}
.ios-btn-secondary {
	background: rgba(255,255,255,0.10);
	color: var(--ios-fg);
	border: 1px solid var(--ios-separator);
	box-shadow: var(--ios-shadow-2);
}
.ios-btn-secondary:active {
	background: rgba(255,255,255,0.16);
}
.ios-btn-destructive {
	background: linear-gradient(180deg, var(--ios-destructive), var(--ios-destructive));
}
.ios-btn-destructive:active {
	background: linear-gradient(180deg, var(--ios-destructive-pressed), var(--ios-destructive-pressed));
}

/* Inputs */
.ios-input,
.ios-select {
	width: 100%;
	padding: 12px 14px;
	border-radius: var(--ios-radius-lg);
	border: 1px solid var(--ios-separator);
	background: var(--ios-field);
	color: var(--ios-fg);
	font-size: 15px;
	appearance: none;
	outline: none;
	transition: border-color 140ms, background-color 140ms, box-shadow 140ms;
	box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
}
.ios-input::placeholder,
.ios-select::placeholder {
	color: var(--ios-fg-muted);
}
.ios-input:focus,
.ios-select:focus {
	border-color: rgba(10,132,255,0.55);
	box-shadow: 0 0 0 3px rgba(10,132,255,0.30);
	background: rgba(255,255,255,0.10);
}

/* Footer bar */
.ios-footer {
	position: sticky;
	bottom: 0;
	background: var(--ios-chrome);
	-webkit-backdrop-filter: blur(28px) saturate(140%);
	backdrop-filter: blur(28px) saturate(140%);
	border-top: 1px solid var(--ios-separator);
	padding: 12px;
	padding-bottom: calc(env(safe-area-inset-bottom) + 12px);
	display: flex;
	flex-direction: row;
	gap: 10px;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
	.ios-btn,
	.ios-btn::after,
	.ios-input,
	.ios-select {
		transition: none;
	}
	.ios-btn:focus:not(:active) {
		animation: none;
	}
}

/* Narrow view fine tuning */
@media (max-width: 360px) {
	.ios-content {
		padding: 12px;
	}
	.ios-btn {
		padding: 11px 12px;
		font-size: 14px;
	}
}

/* Section label */
.ios-section-label {
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .3px;
	color: var(--ios-fg-muted);
	margin: 0 0 6px 4px;
	text-transform: uppercase;
}

.ios-section-danger {
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .3px;
	color: var(--ios-fg-danger);
	margin: 0 0 6px 4px;
	text-transform: uppercase;
}

/* Light mode fallback */
@media (prefers-color-scheme: light) {
	:root {
		--ios-fg: #111111;
		--ios-fg-muted: rgba(0,0,0,0.55);
		--ios-bg: #f2f2f7;
		--ios-chrome: rgba(255,255,255,0.72);
		--ios-separator: rgba(0,0,0,0.12);
		--ios-field: rgba(0,0,0,0.06);
	}
}

/* iOS switches */
.ios-toggle {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 12px;
    padding: 12px 12px;
    background: rgba(255,255,255,0.04);
    border-radius: 16px;
}

.ios-toggle__label {
    font-size: 16px;
    color: var(--text, #fff);
}

.ios-toggle__sub {
    font-size: 12px;
    color: var(--muted, rgba(255,255,255,0.72));
    margin-top: 4px;
}

/* switch core */
.ios-switch {
    position: relative;
    width: 52px;
    height: 32px;
    border-radius: 999px;
    background: var(--off, #8e8e93);
    transition: background 200ms ease, box-shadow 200ms ease;
    box-shadow: inset 0 0 0 1px rgba(0,0,0,0.15);
    cursor: pointer;
    display: inline-block;
}

.ios-switch::after {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0,0,0,0.35), 0 0 0 1px rgba(0,0,0,0.05);
    transition: transform 200ms ease;
}

/* hidden checkbox */
.ios-switch__input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

/* on state */
.ios-switch__input:checked + .ios-switch {
    background: var(--accent, #34c759);
}

.ios-switch__input:checked + .ios-switch::after {
    transform: translateX(20px);
}

/* focus ring */
.ios-switch__input:focus + .ios-switch {
    box-shadow: 0 0 0 3px rgba(0,122,255,0.35), inset 0 0 0 1px rgba(0,0,0,0.15);
}

/* disabled */
.ios-switch__input:disabled + .ios-switch {
    opacity: 0.6;
    cursor: not-allowed;
}

/* row container to match your .ios-section spacing */
.ios-section--toggle {
    padding: 0 0;
}

.ios-toggle + .ios-toggle {
    margin-top: 8px;
}