:root {
    --ios-bg: #f5f7ff;
    --ios-ink: #111827;
    --ios-muted: #64748b;
    --ios-line: rgba(255, 255, 255, 0.68);
    --ios-glass: rgba(255, 255, 255, 0.46);
    --ios-glass-strong: rgba(255, 255, 255, 0.66);
    --ios-tint: #0a84ff;
    --ios-green: #34c759;
    --ios-red: #ff3b30;
    --ios-amber: #ff9f0a;
    --ios-radius-lg: 34px;
    --ios-radius-md: 24px;
    --ios-shadow: 0 22px 70px rgba(15, 23, 42, 0.13);
    --ios-shadow-soft: 0 12px 36px rgba(15, 23, 42, 0.09);
}

html {
    min-height: 100%;
}

body {
    color: var(--ios-ink);
    background:
        radial-gradient(circle at 14% 8%, rgba(10, 132, 255, 0.24), transparent 28%),
        radial-gradient(circle at 86% 0%, rgba(52, 199, 89, 0.18), transparent 24%),
        radial-gradient(circle at 78% 92%, rgba(191, 90, 242, 0.18), transparent 28%),
        linear-gradient(135deg, #fbfdff 0%, #edf5ff 44%, #f7fbff 100%) !important;
}

body::before {
    position: fixed;
    inset: 0;
    z-index: -2;
    pointer-events: none;
    content: "";
    background:
        linear-gradient(90deg, rgba(255,255,255,0.72) 0 1px, transparent 1px 74px),
        linear-gradient(0deg, rgba(255,255,255,0.62) 0 1px, transparent 1px 74px);
    mask-image: linear-gradient(to bottom, rgba(0,0,0,0.78), transparent 78%);
}

body::after {
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    content: "";
    background:
        linear-gradient(115deg, rgba(255,255,255,0.86), rgba(255,255,255,0.28) 42%, rgba(255,255,255,0.76)),
        radial-gradient(circle at 50% -10%, rgba(255,255,255,0.72), transparent 34%);
}

a,
button,
input,
select,
textarea {
    -webkit-tap-highlight-color: transparent;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 4px solid rgba(10, 132, 255, 0.22) !important;
    outline-offset: 3px;
}

button,
a,
input,
select,
textarea {
    transition:
        border-color 180ms ease,
        background 180ms ease,
        box-shadow 180ms ease,
        color 180ms ease,
        transform 180ms ease,
        opacity 180ms ease;
}

button:active,
a:active {
    transform: scale(0.985);
}

.glass,
.glass-card,
.glass-panel,
.glass-lite,
.panel,
.surface,
.payment-card,
.contact-panel,
.plan-row,
.pay-method,
.info-tile,
.soft-btn {
    border-color: var(--ios-line) !important;
    background:
        linear-gradient(145deg, rgba(255,255,255,0.72), rgba(255,255,255,0.36)) !important;
    backdrop-filter: blur(34px) saturate(190%) contrast(105%) !important;
    -webkit-backdrop-filter: blur(34px) saturate(190%) contrast(105%) !important;
    box-shadow:
        var(--ios-shadow-soft),
        inset 0 1px 0 rgba(255,255,255,0.84),
        inset 0 -1px 0 rgba(255,255,255,0.28) !important;
}

.glass,
.glass-card,
.payment-card {
    box-shadow:
        var(--ios-shadow),
        inset 0 1px 0 rgba(255,255,255,0.88),
        inset 0 -1px 0 rgba(255,255,255,0.24) !important;
}

.glass:hover,
.glass-card:hover,
.panel:hover,
.payment-card:hover,
.plan-row:hover,
.pay-method:hover,
.soft-btn:hover {
    border-color: rgba(255,255,255,0.9) !important;
    background:
        linear-gradient(145deg, rgba(255,255,255,0.82), rgba(255,255,255,0.44)) !important;
    box-shadow:
        0 28px 88px rgba(15, 23, 42, 0.15),
        inset 0 1px 0 rgba(255,255,255,0.92),
        inset 0 -1px 0 rgba(255,255,255,0.26) !important;
}

.payment-card,
.glass-card,
.glass,
.panel {
    position: relative;
    overflow: hidden;
}

.payment-card::before,
.glass-card::before,
.glass::before,
.panel::before {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    content: "";
    border-radius: inherit;
    background:
        radial-gradient(circle at 20% 0%, rgba(255,255,255,0.66), transparent 28%),
        linear-gradient(135deg, rgba(255,255,255,0.4), transparent 48%);
    opacity: 0.82;
}

.payment-card > *,
.glass-card > *,
.glass > *,
.panel > * {
    position: relative;
    z-index: 1;
}

.hero-plate {
    border-color: rgba(255,255,255,0.2) !important;
    background:
        radial-gradient(circle at 20% 0%, rgba(10,132,255,0.55), transparent 28%),
        radial-gradient(circle at 86% 14%, rgba(52,199,89,0.22), transparent 26%),
        linear-gradient(135deg, rgba(8, 18, 39, 0.88), rgba(18, 75, 170, 0.72)) !important;
    box-shadow: 0 30px 90px rgba(10, 40, 95, 0.28) !important;
}

.brand-mark,
.method-icon {
    border-radius: 18px !important;
    box-shadow:
        0 14px 34px rgba(10, 132, 255, 0.24),
        inset 0 1px 0 rgba(255,255,255,0.34) !important;
}

.brand-mark {
    background:
        radial-gradient(circle at 28% 18%, rgba(255,255,255,0.45), transparent 32%),
        linear-gradient(135deg, #0f172a, #0a84ff) !important;
}

.eyebrow,
.tag,
[class*="rounded-full"] {
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.66);
}

.status-dot {
    background: var(--ios-green) !important;
    box-shadow: 0 0 0 5px rgba(52, 199, 89, 0.14), 0 0 18px rgba(52, 199, 89, 0.46) !important;
}

.amount-panel {
    border-color: rgba(255,255,255,0.78) !important;
    background:
        radial-gradient(circle at 82% 12%, rgba(10,132,255,0.18), transparent 24%),
        linear-gradient(145deg, rgba(255,255,255,0.86), rgba(255,255,255,0.48)) !important;
    backdrop-filter: blur(28px) saturate(190%) !important;
    -webkit-backdrop-filter: blur(28px) saturate(190%) !important;
    box-shadow:
        0 18px 54px rgba(15, 23, 42, 0.1),
        inset 0 1px 0 rgba(255,255,255,0.88) !important;
}

.plan-row.is-active {
    border-color: rgba(10,132,255,0.48) !important;
    background:
        radial-gradient(circle at 92% 0%, rgba(10,132,255,0.18), transparent 24%),
        linear-gradient(145deg, rgba(255,255,255,0.82), rgba(228,242,255,0.68)) !important;
    box-shadow:
        0 16px 42px rgba(10, 132, 255, 0.16),
        inset 0 1px 0 rgba(255,255,255,0.9) !important;
}

.choice-dot {
    border-color: rgba(148, 163, 184, 0.72) !important;
    background: rgba(255,255,255,0.76) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.9);
}

.plan-row.is-active .choice-dot {
    border-color: var(--ios-tint) !important;
    background: var(--ios-tint) !important;
}

.field-input,
input,
select,
textarea {
    border-color: rgba(255,255,255,0.78) !important;
    background: rgba(255,255,255,0.58) !important;
    backdrop-filter: blur(22px) saturate(170%);
    -webkit-backdrop-filter: blur(22px) saturate(170%);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.86),
        0 8px 24px rgba(15,23,42,0.05) !important;
}

.field-input:focus,
input:focus,
select:focus,
textarea:focus {
    border-color: rgba(10,132,255,0.56) !important;
    background: rgba(255,255,255,0.78) !important;
    box-shadow:
        0 0 0 5px rgba(10,132,255,0.13),
        inset 0 1px 0 rgba(255,255,255,0.92) !important;
}

button[class*="bg-slate-900"],
button[class*="bg-indigo-600"],
a[class*="bg-slate-900"],
a[class*="bg-indigo-600"] {
    border: 1px solid rgba(255,255,255,0.22) !important;
    background:
        radial-gradient(circle at 30% 0%, rgba(255,255,255,0.22), transparent 30%),
        linear-gradient(135deg, #111827, #0a84ff) !important;
    box-shadow:
        0 16px 42px rgba(10, 132, 255, 0.24),
        inset 0 1px 0 rgba(255,255,255,0.28) !important;
}

button[class*="bg-slate-900"]:hover,
button[class*="bg-indigo-600"]:hover,
a[class*="bg-slate-900"]:hover,
a[class*="bg-indigo-600"]:hover {
    background:
        radial-gradient(circle at 30% 0%, rgba(255,255,255,0.28), transparent 30%),
        linear-gradient(135deg, #0f172a, #007aff) !important;
    box-shadow:
        0 20px 54px rgba(10, 132, 255, 0.3),
        inset 0 1px 0 rgba(255,255,255,0.32) !important;
}

table {
    border-collapse: separate;
    border-spacing: 0;
}

thead {
    background: rgba(255,255,255,0.66) !important;
}

tbody tr:hover {
    background: rgba(255,255,255,0.52) !important;
}

pre,
.table-scroll,
[class*="overflow-auto"] {
    scrollbar-color: rgba(100,116,139,0.42) transparent;
    scrollbar-width: thin;
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .glass,
    .glass-card,
    .glass-panel,
    .glass-lite,
    .panel,
    .surface,
    .payment-card,
    .contact-panel,
    .plan-row,
    .pay-method,
    .info-tile,
    .soft-btn,
    .field-input,
    input,
    select,
    textarea {
        background: rgba(255,255,255,0.86) !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }
}

@media (max-width: 640px) {
    .glass,
    .glass-card,
    .panel,
    .payment-card {
        border-radius: 28px !important;
    }
}