:root {
    --apple-blue: #007aff;
    --apple-blue-deep: #0062cc;
    --apple-indigo: #5856d6;
    --apple-text: #172033;
    --apple-secondary: #647084;
    --apple-hairline: rgba(255, 255, 255, 0.64);
    --apple-border: rgba(105, 126, 158, 0.16);
    --apple-glass: rgba(255, 255, 255, 0.64);
    --apple-glass-strong: rgba(255, 255, 255, 0.78);
    --apple-shadow: 0 18px 50px rgba(50, 72, 108, 0.12), 0 2px 8px rgba(50, 72, 108, 0.06);
    --apple-shadow-soft: 0 10px 30px rgba(50, 72, 108, 0.09);
    --apple-radius: 22px;
    color-scheme: light;
}

html {
    background: #eaf1fa;
    scroll-behavior: smooth;
}

body.liquid-app,
body.liquid-auth {
    position: relative;
    min-height: 100vh;
    overflow-x: hidden;
    color: var(--apple-text) !important;
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "PingFang SC", "Helvetica Neue", Arial, sans-serif !important;
    background:
        radial-gradient(circle at 8% 12%, rgba(97, 171, 255, 0.34), transparent 28%),
        radial-gradient(circle at 92% 14%, rgba(174, 142, 255, 0.25), transparent 26%),
        radial-gradient(circle at 72% 88%, rgba(80, 210, 194, 0.22), transparent 30%),
        linear-gradient(145deg, #edf5ff 0%, #f7f8fc 48%, #edf6f5 100%) !important;
}

body.liquid-app::before,
body.liquid-auth::before,
body.liquid-app::after,
body.liquid-auth::after {
    content: "";
    position: fixed;
    z-index: 0;
    border-radius: 999px;
    pointer-events: none;
    filter: blur(2px);
    opacity: 0.72;
}

body.liquid-app::before,
body.liquid-auth::before {
    width: 36vw;
    height: 36vw;
    min-width: 360px;
    min-height: 360px;
    top: -16vw;
    right: -8vw;
    background: radial-gradient(circle at 35% 35%, rgba(255,255,255,.9), rgba(135,111,255,.24) 44%, rgba(0,122,255,.06) 72%, transparent 74%);
}

body.liquid-app::after,
body.liquid-auth::after {
    width: 28vw;
    height: 28vw;
    min-width: 280px;
    min-height: 280px;
    bottom: -12vw;
    left: 24vw;
    background: radial-gradient(circle at 42% 38%, rgba(255,255,255,.8), rgba(82,205,190,.22) 45%, transparent 72%);
}

body.liquid-app > *,
body.liquid-auth > * {
    position: relative;
    z-index: 1;
}

::selection {
    color: #fff;
    background: rgba(0, 122, 255, 0.82);
}

* {
    scrollbar-width: thin;
    scrollbar-color: rgba(94, 112, 140, 0.28) transparent;
}

*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
    background: rgba(94, 112, 140, 0.25);
    border: 2px solid transparent;
    border-radius: 999px;
    background-clip: padding-box;
}

.liquid-app .bg-slate-50,
.liquid-app .bg-gray-50 { background: rgba(244, 248, 253, 0.54) !important; }
.liquid-app .bg-white,
.liquid-auth .bg-white {
    background: var(--apple-glass) !important;
    backdrop-filter: saturate(180%) blur(28px);
    -webkit-backdrop-filter: saturate(180%) blur(28px);
}

.liquid-app .border-gray-100,
.liquid-app .border-gray-200,
.liquid-app .border-slate-100,
.liquid-auth .border-gray-100,
.liquid-auth .border-gray-200 { border-color: var(--apple-border) !important; }

.liquid-app .shadow-sm,
.liquid-app .shadow-md,
.liquid-app .shadow-lg,
.liquid-app .shadow-xl,
.liquid-auth .shadow-lg { box-shadow: var(--apple-shadow-soft) !important; }

/* App chrome */
.liquid-app > .flex.h-screen { padding: 14px; gap: 14px; }

.liquid-app aside {
    overflow: hidden;
    border: 1px solid var(--apple-hairline) !important;
    border-radius: 28px;
    background: rgba(250, 252, 255, 0.62) !important;
    box-shadow: var(--apple-shadow) !important;
    backdrop-filter: saturate(190%) blur(32px);
    -webkit-backdrop-filter: saturate(190%) blur(32px);
}

@media (min-width: 1024px) {
    .liquid-app aside { position: relative; }
}

.liquid-app aside::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    border-radius: inherit;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.92), inset 0 -1px 0 rgba(255,255,255,.3);
}

.liquid-app aside > div:first-child {
    height: 72px !important;
    color: var(--apple-text) !important;
    background: transparent !important;
    box-shadow: none !important;
}

.liquid-app aside > div:first-child svg {
    color: var(--apple-blue);
    filter: drop-shadow(0 5px 12px rgba(0,122,255,.22));
}

.liquid-app aside nav { margin-top: 4px !important; padding-inline: 10px !important; }

.liquid-app aside nav a,
.liquid-app aside nav button {
    min-height: 46px;
    border: 1px solid transparent;
    border-radius: 14px !important;
    color: #536075 !important;
    transition: background-color .22s ease, color .22s ease, border-color .22s ease, transform .22s cubic-bezier(.2,.8,.2,1), box-shadow .22s ease !important;
}

.liquid-app aside nav a:hover,
.liquid-app aside nav button:hover {
    color: var(--apple-text) !important;
    border-color: rgba(255,255,255,.74) !important;
    background: rgba(255,255,255,.62) !important;
    box-shadow: 0 8px 22px rgba(50,72,108,.08), inset 0 1px 0 rgba(255,255,255,.8);
    transform: translateY(-1px);
}

.liquid-app aside nav .bg-indigo-50,
.liquid-app aside nav .text-indigo-600 {
    color: #fff !important;
    border-color: rgba(255,255,255,.58) !important;
    background: linear-gradient(135deg, rgba(0,122,255,.93), rgba(79,108,255,.88)) !important;
    box-shadow: 0 10px 24px rgba(0,122,255,.23), inset 0 1px 0 rgba(255,255,255,.35) !important;
}

.liquid-app aside nav .bg-indigo-50 svg,
.liquid-app aside nav .text-indigo-600 svg { color: #fff !important; }

.liquid-app .flex-1.flex.flex-col.overflow-hidden {
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.72);
    border-radius: 28px;
    background: rgba(249, 251, 255, 0.46) !important;
    box-shadow: var(--apple-shadow);
    backdrop-filter: saturate(150%) blur(20px);
    -webkit-backdrop-filter: saturate(150%) blur(20px);
}

.liquid-app header {
    height: 72px !important;
    border-color: rgba(105,126,158,.11) !important;
    background: rgba(255,255,255,.52) !important;
    box-shadow: 0 1px 0 rgba(255,255,255,.7) !important;
    backdrop-filter: saturate(180%) blur(24px);
    -webkit-backdrop-filter: saturate(180%) blur(24px);
}

.liquid-app header h2 {
    color: var(--apple-text) !important;
    background: none !important;
    -webkit-text-fill-color: currentColor !important;
    font-size: 21px !important;
    font-weight: 700 !important;
    letter-spacing: -0.02em;
}

.liquid-app main {
    background: transparent !important;
    padding: 24px !important;
}

.liquid-app #page-content { max-width: 1680px; margin: 0 auto; }

/* Content surfaces */
.liquid-app #page-content .rounded-2xl,
.liquid-app #page-content .rounded-xl,
.liquid-app [role="dialog"] {
    border-radius: var(--apple-radius) !important;
}

.liquid-app #page-content .bg-white,
.liquid-app .fixed .bg-white {
    border-color: rgba(255,255,255,.74) !important;
    box-shadow: var(--apple-shadow-soft), inset 0 1px 0 rgba(255,255,255,.82) !important;
}

.liquid-app table {
    border-collapse: separate !important;
    border-spacing: 0;
    font-variant-numeric: tabular-nums;
}

.liquid-app table thead th {
    color: #6a7587 !important;
    font-size: 12px !important;
    font-weight: 650 !important;
    letter-spacing: .02em;
    background: rgba(239,244,251,.66) !important;
    border-bottom: 1px solid rgba(105,126,158,.12);
}

.liquid-app table tbody tr { transition: background-color .18s ease; }
.liquid-app table tbody tr:hover { background: rgba(255,255,255,.52); }
.liquid-app table td { border-color: rgba(105,126,158,.09) !important; }

/* Controls */
.liquid-app input:not([type="checkbox"]):not([type="radio"]),
.liquid-app select,
.liquid-app textarea,
.liquid-auth input:not([type="checkbox"]):not([type="radio"]),
.liquid-auth select,
.liquid-auth textarea {
    color: var(--apple-text) !important;
    border: 1px solid rgba(105,126,158,.18) !important;
    border-radius: 13px !important;
    background: rgba(255,255,255,.68) !important;
    box-shadow: inset 0 1px 2px rgba(50,72,108,.04), 0 1px 0 rgba(255,255,255,.7);
    outline: none !important;
    transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease !important;
}

.liquid-app input:focus,
.liquid-app select:focus,
.liquid-app textarea:focus,
.liquid-auth input:focus,
.liquid-auth select:focus,
.liquid-auth textarea:focus {
    border-color: rgba(0,122,255,.58) !important;
    background: rgba(255,255,255,.88) !important;
    box-shadow: 0 0 0 4px rgba(0,122,255,.12), inset 0 1px 1px rgba(50,72,108,.03) !important;
}

.liquid-app input::placeholder,
.liquid-auth input::placeholder,
.liquid-app textarea::placeholder { color: #929cad !important; }

.liquid-app input[type="checkbox"],
.liquid-app input[type="radio"],
.liquid-auth input[type="checkbox"] { accent-color: var(--apple-blue); }

.liquid-app button,
.liquid-app a,
.liquid-auth button,
.liquid-auth a { -webkit-tap-highlight-color: transparent; }

.liquid-app .bg-indigo-600,
.liquid-auth .bg-indigo-600 {
    border: 1px solid rgba(255,255,255,.35) !important;
    background: linear-gradient(180deg, #1387ff 0%, #0071ea 100%) !important;
    box-shadow: 0 9px 22px rgba(0,122,255,.22), inset 0 1px 0 rgba(255,255,255,.35) !important;
}

.liquid-app .bg-indigo-600:hover,
.liquid-auth .bg-indigo-600:hover {
    background: linear-gradient(180deg, #087ef3 0%, #0067d8 100%) !important;
    transform: translateY(-1px);
}

.liquid-app button:focus-visible,
.liquid-app a:focus-visible,
.liquid-auth button:focus-visible,
.liquid-auth a:focus-visible {
    outline: 3px solid rgba(0,122,255,.3) !important;
    outline-offset: 3px;
}

.liquid-app .text-indigo-600,
.liquid-auth .text-indigo-600 { color: var(--apple-blue) !important; }
.liquid-app .bg-indigo-50,
.liquid-auth .bg-indigo-50 { background: rgba(0,122,255,.10) !important; }
.liquid-app .text-gray-800,
.liquid-app .text-slate-800,
.liquid-auth .text-gray-800 { color: var(--apple-text) !important; }
.liquid-app .text-gray-700,
.liquid-auth .text-gray-700 { color: #3f4b60 !important; }
.liquid-app .text-gray-600,
.liquid-app .text-gray-500,
.liquid-auth .text-gray-600,
.liquid-auth .text-gray-500 { color: var(--apple-secondary) !important; }

.liquid-app .fixed.inset-0.bg-black\/50,
.liquid-app .fixed.inset-0.bg-black\/40,
.liquid-app .absolute.inset-0.bg-black\/50,
.liquid-app .absolute.inset-0.bg-black\/40 {
    background: rgba(28,37,52,.26) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.liquid-app .sheet-title {
    font-size: 17px;
    font-weight: 650;
    letter-spacing: -0.022em;
}

.liquid-app .field-label {
    display: block;
    margin-bottom: 8px;
    color: #2c3648;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: -0.012em;
}

.liquid-app .field-label.mb-0 { margin-bottom: 0; }

.liquid-app .field-label .opt {
    margin-left: 6px;
    color: var(--apple-secondary);
    font-weight: 500;
}

.liquid-app .field-hint {
    margin: 7px 0 0;
    color: var(--apple-secondary);
    font-size: 12px;
    line-height: 1.5;
}

.liquid-app .source-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 36px;
    padding: 0 13px;
    border: 1px solid rgba(105,126,158,.16);
    border-radius: 999px;
    background: rgba(255,255,255,.48);
    color: #3f4b60;
    font-size: 13px;
    cursor: pointer;
    user-select: none;
    transition: background-color .18s ease, border-color .18s ease, color .18s ease, box-shadow .18s ease;
}

.liquid-app .source-chip:hover {
    background: rgba(255,255,255,.7);
}

.liquid-app .source-chip:has(input:checked) {
    border-color: rgba(0,122,255,.36);
    background: rgba(0,122,255,.11);
    color: #0b4f9c;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.72);
}

.liquid-app .choice-card {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 13px 14px;
    border: 1px solid rgba(105,126,158,.14);
    border-radius: 16px;
    background: rgba(255,255,255,.4);
    cursor: pointer;
    transition: background-color .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.liquid-app .choice-card:hover {
    background: rgba(255,255,255,.58);
}

.liquid-app .choice-card:has(input:checked) {
    border-color: rgba(0,122,255,.34);
    background: rgba(0,122,255,.08);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.7);
}

.liquid-app .choice-card input {
    margin-top: 2px;
}

.liquid-app .choice-card .choice-copy {
    display: block;
    min-width: 0;
}

.liquid-app .choice-card strong {
    display: block;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--apple-text);
}

.liquid-app .choice-card .choice-desc {
    display: block;
    margin-top: 3px;
    font-size: 12px;
    line-height: 1.45;
    color: var(--apple-secondary);
}

.liquid-app .inner-code-row {
    display: grid;
    grid-template-columns: minmax(108px, 1.1fr) minmax(150px, 1.7fr) minmax(150px, 1.6fr) 58px 34px;
    gap: 8px;
    align-items: center;
    padding: 8px;
    border: 1px solid rgba(255,255,255,.55);
    border-radius: 12px;
    background: rgba(255,255,255,.3);
}

.liquid-app .inner-code-row input:not([type="checkbox"]):not([type="radio"]) {
    min-height: 36px !important;
    padding: 6px 10px !important;
    font-size: 13px !important;
    border-radius: 10px !important;
}

.liquid-app .ghost-danger {
    width: 34px;
    min-height: 34px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    color: #c23b4a;
    background: rgba(255,59,48,.08);
    font-size: 16px;
    font-weight: 500;
    line-height: 1;
}

.liquid-app .ghost-danger:hover {
    background: rgba(255,59,48,.14);
}

@media (max-width: 720px) {
    .liquid-app .inner-code-row {
        grid-template-columns: 1fr 58px 34px;
    }
    .liquid-app .inner-code-row .col-link,
    .liquid-app .inner-code-row .col-qr {
        grid-column: 1 / -1;
    }
}

.liquid-app .sheet-foot {
    border-top: 1px solid rgba(105,126,158,.1);
    background: rgba(255,255,255,.36);
}

/* Authentication */
.liquid-auth .min-h-screen { padding: 32px 18px; }
.liquid-auth .max-w-md {
    position: relative;
    overflow: hidden;
    max-width: 440px !important;
    padding: 38px !important;
    border: 1px solid rgba(255,255,255,.82) !important;
    border-radius: 30px !important;
    box-shadow: 0 28px 80px rgba(50,72,108,.18), inset 0 1px 0 rgba(255,255,255,.9) !important;
    backdrop-filter: saturate(190%) blur(34px);
    -webkit-backdrop-filter: saturate(190%) blur(34px);
}

.liquid-auth .max-w-md::before {
    content: "";
    position: absolute;
    width: 170px;
    height: 170px;
    top: -110px;
    right: -80px;
    border-radius: 999px;
    background: rgba(255,255,255,.6);
    box-shadow: 0 0 60px rgba(100,146,255,.18);
    pointer-events: none;
}

.liquid-auth .text-2xl {
    font-size: 28px !important;
    letter-spacing: -0.03em;
}

.liquid-auth input:not([type="checkbox"]) { min-height: 48px; }
.liquid-auth button[type="submit"] {
    min-height: 48px;
    border-radius: 14px !important;
}

@media (max-width: 1023px) {
    .liquid-app > .flex.h-screen { padding: 0; gap: 0; }
    .liquid-app aside {
        border-radius: 0 26px 26px 0;
        border-left: 0 !important;
    }
    .liquid-app .flex-1.flex.flex-col.overflow-hidden { border: 0; border-radius: 0; }
    .liquid-app main { padding: 16px !important; }
}

@media (max-width: 640px) {
    .liquid-app header { padding-inline: 16px !important; }
    .liquid-app header h2 { max-width: 62vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .liquid-auth .max-w-md { padding: 28px 22px !important; border-radius: 24px !important; }
    .liquid-app #page-content .p-6 { padding: 18px !important; }
}

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

@supports not ((backdrop-filter: blur(12px)) or (-webkit-backdrop-filter: blur(12px))) {
    .liquid-app .bg-white,
    .liquid-auth .bg-white,
    .liquid-app aside,
    .liquid-app header { background: rgba(248,251,255,.96) !important; }
}