/* ==========================================================================
   rMed Clinical Calculators - Consolidated Stylesheet
   Pure Vanilla CSS Architecture: Zero-Build, Zero-Telemetry, Self-Hosted Fonts
   ========================================================================== */

/* ── Local Self-Hosted Fonts ─────────────────────────────────────────────── */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url('/assets/fonts/inter-latin-300.woff2') format('woff2');
    unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url('/assets/fonts/inter-latin-300.woff2') format('woff2');
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url('/assets/fonts/inter-latin-300.woff2') format('woff2');
    unicode-range: U+1F00-1FFF;
}

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url('/assets/fonts/inter-latin-300.woff2') format('woff2');
    unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url('/assets/fonts/inter-latin-300.woff2') format('woff2');
    unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url('/assets/fonts/inter-latin-300.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url('/assets/fonts/inter-latin-300.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/assets/fonts/inter-latin-400.woff2') format('woff2');
    unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/assets/fonts/inter-latin-400.woff2') format('woff2');
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/assets/fonts/inter-latin-400.woff2') format('woff2');
    unicode-range: U+1F00-1FFF;
}

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/assets/fonts/inter-latin-400.woff2') format('woff2');
    unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/assets/fonts/inter-latin-400.woff2') format('woff2');
    unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/assets/fonts/inter-latin-400.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/assets/fonts/inter-latin-400.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('/assets/fonts/inter-latin-500.woff2') format('woff2');
    unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('/assets/fonts/inter-latin-500.woff2') format('woff2');
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('/assets/fonts/inter-latin-500.woff2') format('woff2');
    unicode-range: U+1F00-1FFF;
}

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('/assets/fonts/inter-latin-500.woff2') format('woff2');
    unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('/assets/fonts/inter-latin-500.woff2') format('woff2');
    unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('/assets/fonts/inter-latin-500.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('/assets/fonts/inter-latin-500.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('/assets/fonts/inter-latin-600.woff2') format('woff2');
    unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('/assets/fonts/inter-latin-600.woff2') format('woff2');
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('/assets/fonts/inter-latin-600.woff2') format('woff2');
    unicode-range: U+1F00-1FFF;
}

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('/assets/fonts/inter-latin-600.woff2') format('woff2');
    unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('/assets/fonts/inter-latin-600.woff2') format('woff2');
    unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('/assets/fonts/inter-latin-600.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('/assets/fonts/inter-latin-600.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('/assets/fonts/inter-latin-700.woff2') format('woff2');
    unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('/assets/fonts/inter-latin-700.woff2') format('woff2');
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('/assets/fonts/inter-latin-700.woff2') format('woff2');
    unicode-range: U+1F00-1FFF;
}

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('/assets/fonts/inter-latin-700.woff2') format('woff2');
    unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('/assets/fonts/inter-latin-700.woff2') format('woff2');
    unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('/assets/fonts/inter-latin-700.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('/assets/fonts/inter-latin-700.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Outfit';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('/assets/fonts/outfit-latin-500.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'Outfit';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('/assets/fonts/outfit-latin-500.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Outfit';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('/assets/fonts/outfit-latin-600.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'Outfit';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('/assets/fonts/outfit-latin-600.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Outfit';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('/assets/fonts/outfit-latin-700.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'Outfit';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('/assets/fonts/outfit-latin-700.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Outfit';
    font-style: normal;
    font-weight: 800;
    font-display: swap;
    src: url('/assets/fonts/outfit-latin-800.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'Outfit';
    font-style: normal;
    font-weight: 800;
    font-display: swap;
    src: url('/assets/fonts/outfit-latin-800.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


/* ── Tailwind Core Utilities (Pre-extracted) ────────────────────────────── */
@layer properties;@layer theme,base,components,utilities;@layer theme{:root,:host{--font-sans: "Inter", system-ui, sans-serif;--font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;--color-indigo-600: oklch(51.1% .262 276.966);--color-violet-600: oklch(54.1% .281 293.009);--color-slate-50: oklch(98.4% .003 247.858);--color-slate-300: oklch(86.9% .022 252.894);--color-slate-600: oklch(44.6% .043 257.281);--color-slate-700: oklch(37.2% .044 257.287);--color-slate-800: oklch(27.9% .041 260.031);--color-slate-900: oklch(20.8% .042 265.755);--color-white: #fff;--spacing: .25rem;--container-5xl: 64rem;--container-7xl: 80rem;--text-xs: .75rem;--text-xs--line-height: calc(1 / .75);--text-sm: .875rem;--text-sm--line-height: calc(1.25 / .875);--text-base: 1rem;--text-base--line-height: 1.5 ;--text-lg: 1.125rem;--text-lg--line-height: calc(1.75 / 1.125);--text-2xl: 1.5rem;--text-2xl--line-height: calc(2 / 1.5);--text-3xl: 1.875rem;--text-3xl--line-height: 1.2 ;--text-4xl: 2.25rem;--text-4xl--line-height: calc(2.5 / 2.25);--text-5xl: 3rem;--text-5xl--line-height: 1;--font-weight-medium: 500;--font-weight-semibold: 600;--font-weight-bold: 700;--font-weight-extrabold: 800;--tracking-tight: -.025em;--tracking-wide: .025em;--tracking-wider: .05em;--leading-relaxed: 1.625;--radius-md: .375rem;--radius-lg: .5rem;--radius-xl: .75rem;--radius-2xl: 1rem;--animate-pulse: pulse 2s cubic-bezier(.4, 0, .6, 1) infinite;--blur-md: 12px;--default-transition-duration: .15s;--default-transition-timing-function: cubic-bezier(.4, 0, .2, 1);--default-font-family: var(--font-sans);--default-mono-font-family: var(--font-mono);--font-display: "Outfit", "Inter", system-ui, sans-serif;--animate-fade-in: fade-in .25s ease-out forwards;--animate-fade-in-up: fade-in-up .4s ease-out forwards}}@layer base{*,:after,:before,::backdrop,::file-selector-button{box-sizing:border-box;margin:0;padding:0;border:0 solid}html,:host{line-height:1.5;-webkit-text-size-adjust:100%;tab-size:4;font-family:var(--default-font-family, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");font-feature-settings:var(--default-font-feature-settings, normal);font-variation-settings:var(--default-font-variation-settings, normal);-webkit-tap-highlight-color:transparent}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);font-feature-settings:var(--default-mono-font-feature-settings, normal);font-variation-settings:var(--default-mono-font-variation-settings, normal);font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring{outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea,::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;border-radius:0;background-color:transparent;opacity:1}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::placeholder{opacity:1}@supports (not (-webkit-appearance: -apple-pay-button)) or (contain-intrinsic-size: 1px){::placeholder{color:currentcolor}@supports (color: color-mix(in lab,red,red)){::placeholder{color:color-mix(in oklab,currentcolor 50%,transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit,::-webkit-datetime-edit-year-field,::-webkit-datetime-edit-month-field,::-webkit-datetime-edit-day-field,::-webkit-datetime-edit-hour-field,::-webkit-datetime-edit-minute-field,::-webkit-datetime-edit-second-field,::-webkit-datetime-edit-millisecond-field,::-webkit-datetime-edit-meridiem-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]),::file-selector-button{appearance:button}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}}@layer utilities{.pointer-events-none{pointer-events:none}.collapse{visibility:collapse}.invisible{visibility:hidden}.visible{visibility:visible}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border-width:0}.card{position:relative;display:flex;flex-direction:column;overflow:hidden;border-radius:var(--radius-lg);border-style:var(--tw-border-style);border-width:1px;border-color:var(--color-border);background-color:var(--color-surface);--tw-shadow: 0 1px 2px 0 var(--tw-shadow-color, rgb(0 0 0 / .05));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);transition-property:all;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function));transition-duration:var(--tw-duration, var(--default-transition-duration));--tw-duration: .3s;transition-duration:.3s}.absolute{position:absolute}.fixed{position:fixed}.relative{position:relative}.static{position:static}.sticky{position:sticky}.inset-0{inset:0}.inset-x-0{inset-inline:0}.inset-y-0{inset-block:0}.top-0{top:0}.top-full{top:100%}.right-0{right:0}.right-4{right:calc(var(--spacing) * 4)}.bottom-0{bottom:0}.left-0{left:0}.isolate{isolation:isolate}.z-30{z-index:30}.z-40{z-index:40}.z-50{z-index:50}.container{width:100%}@media(width>=40rem){.container{max-width:40rem}}@media(width>=48rem){.container{max-width:48rem}}@media(width>=64rem){.container{max-width:64rem}}@media(width>=80rem){.container{max-width:80rem}}@media(width>=96rem){.container{max-width:96rem}}.mx-auto{margin-inline:auto}.-mt-0\.5{margin-top:calc(var(--spacing) * -.5)}.mt-0\.5{margin-top:calc(var(--spacing) * .5)}.mt-1{margin-top:var(--spacing)}.mt-1\.5{margin-top:calc(var(--spacing) * 1.5)}.mt-2{margin-top:calc(var(--spacing) * 2)}.mt-3{margin-top:calc(var(--spacing) * 3)}.mt-4{margin-top:calc(var(--spacing) * 4)}.mt-8{margin-top:calc(var(--spacing) * 8)}.mr-2{margin-right:calc(var(--spacing) * 2)}.mb-1\.5{margin-bottom:calc(var(--spacing) * 1.5)}.mb-2{margin-bottom:calc(var(--spacing) * 2)}.mb-3{margin-bottom:calc(var(--spacing) * 3)}.mb-4{margin-bottom:calc(var(--spacing) * 4)}.mb-5{margin-bottom:calc(var(--spacing) * 5)}.mb-8{margin-bottom:calc(var(--spacing) * 8)}.ml-2{margin-left:calc(var(--spacing) * 2)}.block{display:block}.contents{display:contents}.flex{display:flex}.grid{display:grid}.hidden{display:none}.inline{display:inline}.inline-block{display:inline-block}.inline-flex{display:inline-flex}.table{display:table}.h-1\.5{height:calc(var(--spacing) * 1.5)}.h-3{height:calc(var(--spacing) * 3)}.h-3\.5{height:calc(var(--spacing) * 3.5)}.h-4{height:calc(var(--spacing) * 4)}.h-5{height:calc(var(--spacing) * 5)}.h-6{height:calc(var(--spacing) * 6)}.h-8{height:calc(var(--spacing) * 8)}.h-10{height:calc(var(--spacing) * 10)}.h-12{height:calc(var(--spacing) * 12)}.h-16{height:calc(var(--spacing) * 16)}.h-full{height:100%}.h-px{height:1px}.max-h-64{max-height:calc(var(--spacing) * 64)}.min-h-12{min-height:calc(var(--spacing) * 12)}.min-h-screen{min-height:100vh}.w-1\.5{width:calc(var(--spacing) * 1.5)}.w-1\/3{width:calc(1 / 3 * 100%)}.w-1\/4{width:25%}.w-2\/3{width:calc(2 / 3 * 100%)}.w-3{width:calc(var(--spacing) * 3)}.w-3\.5{width:calc(var(--spacing) * 3.5)}.w-4{width:calc(var(--spacing) * 4)}.w-5{width:calc(var(--spacing) * 5)}.w-6{width:calc(var(--spacing) * 6)}.w-8{width:calc(var(--spacing) * 8)}.w-10{width:calc(var(--spacing) * 10)}.w-16{width:calc(var(--spacing) * 16)}.w-full{width:100%}.max-w-5xl{max-width:var(--container-5xl)}.min-w-0{min-width:0}.min-w-32{min-width:calc(var(--spacing) * 32)}.flex-1{flex:1}.flex-none{flex:none}.shrink{flex-shrink:1}.grow{flex-grow:1}.card-interactive{cursor:pointer}@media(hover:hover){.card-interactive:hover{--tw-translate-y: calc(var(--spacing) * -1);translate:var(--tw-translate-x) var(--tw-translate-y)}}@media(hover:hover){.card-interactive:hover{--tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / .1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / .1));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}}.card-interactive:active{scale:.98}.card-interactive:hover{border-color:var(--color-primary)}@supports (color: color-mix(in lab,red,red)){.card-interactive:hover{border-color:color-mix(in srgb,var(--color-primary) 30%,var(--color-border))}}.rotate-180{rotate:180deg}.transform{transform:var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,)}.animate-fade-in{animation:var(--animate-fade-in)}.animate-fade-in-up{animation:var(--animate-fade-in-up)}.animate-pulse{animation:var(--animate-pulse)}.cursor-pointer{cursor:pointer}.touch-manipulation{touch-action:manipulation}.appearance-none{appearance:none}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.items-center{align-items:center}.items-start{align-items:flex-start}.justify-around{justify-content:space-around}.justify-between{justify-content:space-between}.justify-center{justify-content:center}.gap-1{gap:var(--spacing)}.gap-1\.5{gap:calc(var(--spacing) * 1.5)}.gap-2{gap:calc(var(--spacing) * 2)}.gap-3{gap:calc(var(--spacing) * 3)}.gap-4{gap:calc(var(--spacing) * 4)}:where(.space-y-2>:not(:last-child)){--tw-space-y-reverse: 0;margin-block-start:calc(calc(var(--spacing) * 2) * var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-y-reverse)))}:where(.space-y-3>:not(:last-child)){--tw-space-y-reverse: 0;margin-block-start:calc(calc(var(--spacing) * 3) * var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing) * 3) * calc(1 - var(--tw-space-y-reverse)))}:where(.space-y-4>:not(:last-child)){--tw-space-y-reverse: 0;margin-block-start:calc(calc(var(--spacing) * 4) * var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-y-reverse)))}:where(.space-y-5>:not(:last-child)){--tw-space-y-reverse: 0;margin-block-start:calc(calc(var(--spacing) * 5) * var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing) * 5) * calc(1 - var(--tw-space-y-reverse)))}:where(.space-y-6>:not(:last-child)){--tw-space-y-reverse: 0;margin-block-start:calc(calc(var(--spacing) * 6) * var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing) * 6) * calc(1 - var(--tw-space-y-reverse)))}.self-stretch{align-self:stretch}.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.overflow-hidden{overflow:hidden}.overflow-visible{overflow:visible}.overflow-y-auto{overflow-y:auto}.rounded{border-radius:.25rem}.rounded-2xl{border-radius:var(--radius-2xl)}.rounded-full{border-radius:calc(infinity * 1px)}.rounded-lg{border-radius:var(--radius-lg)}.rounded-md{border-radius:var(--radius-md)}.rounded-xl{border-radius:var(--radius-xl)}.rounded-l-none{border-top-left-radius:0;border-bottom-left-radius:0}.rounded-r-none{border-top-right-radius:0;border-bottom-right-radius:0}.border{border-style:var(--tw-border-style);border-width:1px}.border-0{border-style:var(--tw-border-style);border-width:0px}.border-t{border-top-style:var(--tw-border-style);border-top-width:1px}.border-b{border-bottom-style:var(--tw-border-style);border-bottom-width:1px}.border-l-0{border-left-style:var(--tw-border-style);border-left-width:0px}.border-\[var\(--border\)\]{border-color:var(--border)}.border-\[var\(--border\)\]\/50{border-color:var(--border)}@supports (color: color-mix(in lab,red,red)){.border-\[var\(--border\)\]\/50{border-color:color-mix(in oklab,var(--border) 50%,transparent)}}.border-\[var\(--color-border\)\]{border-color:var(--color-border)}.border-\[var\(--color-border\)\]\/50{border-color:var(--color-border)}@supports (color: color-mix(in lab,red,red)){.border-\[var\(--color-border\)\]\/50{border-color:color-mix(in oklab,var(--color-border) 50%,transparent)}}.border-\[var\(--color-error\)\]{border-color:var(--color-error)}.border-\[var\(--color-primary\)\]\/20{border-color:var(--color-primary)}@supports (color: color-mix(in lab,red,red)){.border-\[var\(--color-primary\)\]\/20{border-color:color-mix(in oklab,var(--color-primary) 20%,transparent)}}.border-transparent{border-color:transparent}.bg-\[var\(--color-error\)\]\/10{background-color:var(--color-error)}@supports (color: color-mix(in lab,red,red)){.bg-\[var\(--color-error\)\]\/10{background-color:color-mix(in oklab,var(--color-error) 10%,transparent)}}.bg-\[var\(--color-primary\)\]{background-color:var(--color-primary)}.bg-\[var\(--color-primary\)\]\/10{background-color:var(--color-primary)}@supports (color: color-mix(in lab,red,red)){.bg-\[var\(--color-primary\)\]\/10{background-color:color-mix(in oklab,var(--color-primary) 10%,transparent)}}.bg-\[var\(--color-success\)\]{background-color:var(--color-success)}.bg-\[var\(--color-surface\)\]{background-color:var(--color-surface)}.bg-\[var\(--color-surface-muted\)\]{background-color:var(--color-surface-muted)}.bg-\[var\(--color-warning\)\]\/90{background-color:var(--color-warning)}@supports (color: color-mix(in lab,red,red)){.bg-\[var\(--color-warning\)\]\/90{background-color:color-mix(in oklab,var(--color-warning) 90%,transparent)}}.bg-\[var\(--surface\)\]{background-color:var(--surface)}.bg-\[var\(--surface\)\]\/95{background-color:var(--surface)}@supports (color: color-mix(in lab,red,red)){.bg-\[var\(--surface\)\]\/95{background-color:color-mix(in oklab,var(--surface) 95%,transparent)}}.bg-transparent{background-color:transparent}.bg-linear-to-r{--tw-gradient-position: to right;background-image:linear-gradient(var(--tw-gradient-stops))}@supports (background-image: linear-gradient(in lab,red,red)){.bg-linear-to-r{--tw-gradient-position: to right in oklab}}.from-transparent{--tw-gradient-from: transparent;--tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position))}.from-violet-600{--tw-gradient-from: var(--color-violet-600);--tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position))}.via-\[var\(--border\)\]{--tw-gradient-via: var(--border);--tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);--tw-gradient-stops: var(--tw-gradient-via-stops)}.to-indigo-600{--tw-gradient-to: var(--color-indigo-600);--tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position))}.to-transparent{--tw-gradient-to: transparent;--tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position))}.object-cover{object-fit:cover}.p-2{padding:calc(var(--spacing) * 2)}.p-2\.5{padding:calc(var(--spacing) * 2.5)}.p-4{padding:calc(var(--spacing) * 4)}.p-5{padding:calc(var(--spacing) * 5)}.p-6{padding:calc(var(--spacing) * 6)}.px-2{padding-inline:calc(var(--spacing) * 2)}.px-2\.5{padding-inline:calc(var(--spacing) * 2.5)}.px-3{padding-inline:calc(var(--spacing) * 3)}.px-4{padding-inline:calc(var(--spacing) * 4)}.px-5{padding-inline:calc(var(--spacing) * 5)}.py-0\.5{padding-block:calc(var(--spacing) * .5)}.py-1{padding-block:var(--spacing)}.py-1\.5{padding-block:calc(var(--spacing) * 1.5)}.py-2{padding-block:calc(var(--spacing) * 2)}.py-2\.5{padding-block:calc(var(--spacing) * 2.5)}.py-3{padding-block:calc(var(--spacing) * 3)}.py-3\.5{padding-block:calc(var(--spacing) * 3.5)}.py-4{padding-block:calc(var(--spacing) * 4)}.py-6{padding-block:calc(var(--spacing) * 6)}.py-8{padding-block:calc(var(--spacing) * 8)}.py-12{padding-block:calc(var(--spacing) * 12)}.py-16{padding-block:calc(var(--spacing) * 16)}.pt-6{padding-top:calc(var(--spacing) * 6)}.pr-4{padding-right:calc(var(--spacing) * 4)}.pr-12{padding-right:calc(var(--spacing) * 12)}.pb-0{padding-bottom:0}.pb-4{padding-bottom:calc(var(--spacing) * 4)}.pb-5{padding-bottom:calc(var(--spacing) * 5)}.pb-6{padding-bottom:calc(var(--spacing) * 6)}.pb-8{padding-bottom:calc(var(--spacing) * 8)}.pb-12{padding-bottom:calc(var(--spacing) * 12)}.pb-24{padding-bottom:calc(var(--spacing) * 24)}.pl-4{padding-left:calc(var(--spacing) * 4)}.pl-12{padding-left:calc(var(--spacing) * 12)}.text-center{text-align:center}.text-left{text-align:left}.font-display{font-family:var(--font-display)}.text-2xl{font-size:var(--text-2xl);line-height:var(--tw-leading, var(--text-2xl--line-height))}.text-4xl{font-size:var(--text-4xl);line-height:var(--tw-leading, var(--text-4xl--line-height))}.text-base{font-size:var(--text-base);line-height:var(--tw-leading, var(--text-base--line-height))}.text-lg{font-size:var(--text-lg);line-height:var(--tw-leading, var(--text-lg--line-height))}.text-sm{font-size:var(--text-sm);line-height:var(--tw-leading, var(--text-sm--line-height))}.text-xs{font-size:var(--text-xs);line-height:var(--tw-leading, var(--text-xs--line-height))}.text-\[10px\]{font-size:10px}.leading-none{--tw-leading: 1;line-height:1}.leading-relaxed{--tw-leading: var(--leading-relaxed);line-height:var(--leading-relaxed)}.font-bold{--tw-font-weight: var(--font-weight-bold);font-weight:var(--font-weight-bold)}.font-extrabold{--tw-font-weight: var(--font-weight-extrabold);font-weight:var(--font-weight-extrabold)}.font-medium{--tw-font-weight: var(--font-weight-medium);font-weight:var(--font-weight-medium)}.font-semibold{--tw-font-weight: var(--font-weight-semibold);font-weight:var(--font-weight-semibold)}.tracking-tight{--tw-tracking: var(--tracking-tight);letter-spacing:var(--tracking-tight)}.tracking-wide{--tw-tracking: var(--tracking-wide);letter-spacing:var(--tracking-wide)}.tracking-wider{--tw-tracking: var(--tracking-wider);letter-spacing:var(--tracking-wider)}.whitespace-nowrap{white-space:nowrap}.text-\[var\(--color-error\)\]{color:var(--color-error)}.text-\[var\(--color-primary\)\]{color:var(--color-primary)}.text-\[var\(--color-text-main\)\]{color:var(--color-text-main)}.text-\[var\(--color-warning\)\]{color:var(--color-warning)}.text-\[var\(--text-main\)\]{color:var(--text-main)}.text-\[var\(--text-muted\)\]{color:var(--text-muted)}.text-\[var\(--text-subtle\)\]{color:var(--text-subtle)}.capitalize{text-transform:capitalize}.lowercase{text-transform:lowercase}.uppercase{text-transform:uppercase}.ordinal{--tw-ordinal: ordinal;font-variant-numeric:var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,)}.shadow-\[var\(--color-primary\)\]\/30{--tw-shadow-alpha: 30%;--tw-shadow: var(--color-primary);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.shadow{--tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / .1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / .1));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.shadow-lg{--tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / .1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / .1));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.shadow-none{--tw-shadow: 0 0 #0000;box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.shadow-sm{--tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / .1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / .1));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.ring{--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.outline{outline-style:var(--tw-outline-style);outline-width:1px}.blur{--tw-blur: blur(8px);filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)}.grayscale{--tw-grayscale: grayscale(100%);filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)}.invert{--tw-invert: invert(100%);filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)}.filter{filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)}.backdrop-blur-md{--tw-backdrop-blur: blur(var(--blur-md));-webkit-backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,)}.transition{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to,opacity,box-shadow,transform,translate,scale,rotate,filter,-webkit-backdrop-filter,backdrop-filter,display,content-visibility,overlay,pointer-events;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function));transition-duration:var(--tw-duration, var(--default-transition-duration))}.transition-all{transition-property:all;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function));transition-duration:var(--tw-duration, var(--default-transition-duration))}.transition-colors{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function));transition-duration:var(--tw-duration, var(--default-transition-duration))}.transition-transform{transition-property:transform,translate,scale,rotate;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function));transition-duration:var(--tw-duration, var(--default-transition-duration))}.duration-200{--tw-duration: .2s;transition-duration:.2s}.duration-300{--tw-duration: .3s;transition-duration:.3s}.\[cite\:1\]{cite:1}.\[cite\:2\]{cite:2}.\[cite\:3\]{cite:3}.\[cite\:4\]{cite:4}.\[cite\:5\]{cite:5}.\[cite\:7\]{cite:7}.\[cite\:8\]{cite:8}.\[cite\:10\]{cite:10}.\[cite\:11\]{cite:11}.\[cite\:13\]{cite:13}.\[cite\:15\]{cite:15}.\[cite\:19\]{cite:19}.\[cite\:25\]{cite:25}.\[cite\:31\]{cite:31}.\[cite\:44\]{cite:44}.\[cite\:46\]{cite:46}.\[cite\:47\]{cite:47}.\[cite\:49\]{cite:49}.\[cite\:51\]{cite:51}@media(hover:hover){.group-hover\:-translate-x-0\.5:is(:where(.group):hover *){--tw-translate-x: calc(var(--spacing) * -.5);translate:var(--tw-translate-x) var(--tw-translate-y)}}.placeholder\:text-\[var\(--text-subtle\)\]::placeholder{color:var(--text-subtle)}.last\:border-b-0:last-child{border-bottom-style:var(--tw-border-style);border-bottom-width:0px}@media(hover:hover){.hover\:-translate-y-1:hover{--tw-translate-y: calc(var(--spacing) * -1);translate:var(--tw-translate-x) var(--tw-translate-y)}}@media(hover:hover){.hover\:border-\[var\(--color-border\)\]:hover{border-color:var(--color-border)}}@media(hover:hover){.hover\:border-\[var\(--color-primary\)\]\/30:hover{border-color:var(--color-primary)}@supports (color: color-mix(in lab,red,red)){.hover\:border-\[var\(--color-primary\)\]\/30:hover{border-color:color-mix(in oklab,var(--color-primary) 30%,transparent)}}}@media(hover:hover){.hover\:bg-\[var\(--color-primary\)\]\/20:hover{background-color:var(--color-primary)}@supports (color: color-mix(in lab,red,red)){.hover\:bg-\[var\(--color-primary\)\]\/20:hover{background-color:color-mix(in oklab,var(--color-primary) 20%,transparent)}}}@media(hover:hover){.hover\:bg-\[var\(--color-surface\)\]:hover{background-color:var(--color-surface)}}@media(hover:hover){.hover\:bg-\[var\(--color-surface-elevated\)\]:hover{background-color:var(--color-surface-elevated)}}@media(hover:hover){.hover\:bg-\[var\(--color-surface-muted\)\]:hover{background-color:var(--color-surface-muted)}}@media(hover:hover){.hover\:bg-\[var\(--surface-muted\)\]:hover{background-color:var(--surface-muted)}}@media(hover:hover){.hover\:text-\[var\(--color-primary\)\]:hover{color:var(--color-primary)}}@media(hover:hover){.hover\:text-\[var\(--text-main\)\]:hover{color:var(--text-main)}}@media(hover:hover){.hover\:text-\[var\(--text-muted\)\]:hover{color:var(--text-muted)}}@media(hover:hover){.hover\:shadow-md:hover{--tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / .1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / .1));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}}@media(hover:hover){.hover\:shadow-sm:hover{--tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / .1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / .1));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}}.focus\:border-\[var\(--color-primary\)\]:focus{border-color:var(--color-primary)}.focus\:ring-2:focus{--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.focus\:ring-\[var\(--color-primary\)\]:focus{--tw-ring-color: var(--color-primary)}.focus\:ring-\[var\(--color-primary\)\]\/20:focus{--tw-ring-color: var(--color-primary)}@supports (color: color-mix(in lab,red,red)){.focus\:ring-\[var\(--color-primary\)\]\/20:focus{--tw-ring-color: color-mix(in oklab, var(--color-primary) 20%, transparent)}}.focus\:outline-hidden:focus{--tw-outline-style: none;outline-style:none}@media(forced-colors:active){.focus\:outline-hidden:focus{outline:2px solid transparent;outline-offset:2px}}.focus\:outline-none:focus{--tw-outline-style: none;outline-style:none}.focus-visible\:ring-2:focus-visible{--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.focus-visible\:ring-\[var\(--color-primary\)\]:focus-visible{--tw-ring-color: var(--color-primary)}.focus-visible\:ring-offset-2:focus-visible{--tw-ring-offset-width: 2px;--tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color)}.focus-visible\:outline-none:focus-visible{--tw-outline-style: none;outline-style:none}.focus-visible\:ring-inset:focus-visible{--tw-ring-inset: inset}.active\:scale-\[0\.98\]:active{scale:.98}@media(width>=40rem){.sm\:p-6{padding:calc(var(--spacing) * 6)}}@media(width>=40rem){.sm\:px-6{padding-inline:calc(var(--spacing) * 6)}}@media(width>=40rem){.sm\:pb-6{padding-bottom:calc(var(--spacing) * 6)}}@media(width>=40rem){.sm\:text-3xl{font-size:var(--text-3xl);line-height:var(--tw-leading, var(--text-3xl--line-height))}}@media(width>=40rem){.sm\:text-5xl{font-size:var(--text-5xl);line-height:var(--tw-leading, var(--text-5xl--line-height))}}@media(width>=48rem){.md\:flex{display:flex}}@media(width>=48rem){.md\:hidden{display:none}}@media(width>=48rem){.md\:border-t-0{border-top-style:var(--tw-border-style);border-top-width:0px}}@media(width>=48rem){.md\:border-l{border-left-style:var(--tw-border-style);border-left-width:1px}}@media(width>=48rem){.md\:pb-6{padding-bottom:calc(var(--spacing) * 6)}}}:root{--color-blue-600: #2563eb;--color-slate-50: #f8fafc;--color-slate-100: #f1f5f9;--color-slate-200: #e2e8f0;--color-slate-300: #cbd5e1;--color-slate-400: #94a3b8;--color-slate-500: #64748b;--color-slate-600: #475569;--color-slate-700: #334155;--color-slate-800: #1e293b;--color-slate-900: #0f172a;--color-slate-950: #020617;--color-teal-600: #0d9488;--color-white: #ffffff;--color-primary: oklch(.511 .262 276.966);--color-primary-foreground: oklch(1 0 0);--color-secondary: oklch(.552 .037 264.052);--color-secondary-foreground: oklch(.985 0 0);--color-surface: #ffffff;--color-surface-muted: #f8fafc;--color-surface-elevated: #f1f5f9;--color-border: #e2e8f0;--color-border-muted: #f1f5f9;--text-main: var(--color-text-main);--text-muted: var(--color-text-muted);--text-subtle: var(--color-text-subtle);--surface: var(--color-surface);--surface-muted: var(--color-surface-muted);--border: var(--color-border);--color-text-main: #0f172a;--color-text-muted: #64748b;--color-text-subtle: #94a3b8;--color-text-inverse: var(--color-white);--color-warning: #f59e0b;--color-success: #10b981;--color-error: #ef4444;--touch-min: 48px;--touch-comfortable: 52px;--radius-sm: .5rem;--radius-md: .75rem;--radius-lg: 1rem;--radius-full: 9999px;--space-1: .25rem;--space-2: .5rem;--space-3: .75rem;--space-4: 1rem;--space-5: 1.5rem;--space-6: 2rem;--space-8: 3rem;--space-10: 4rem;--duration-fast: .15s;--duration-normal: .2s;--duration-slow: .3s;--shadow-sm: 0 1px 2px 0 rgb(0 0 0 / .05);--shadow-md: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);--shadow-lg: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);--shadow-xl: 0 20px 25px -5px rgb(0 0 0 / .1), 0 8px 10px -6px rgb(0 0 0 / .1)}:root.dark{--color-primary: oklch(.7 .2 276.966);--color-primary-foreground: oklch(.15 0 0);--color-secondary: oklch(.7 .037 264.052);--color-secondary-foreground: oklch(.15 0 0);--color-surface: var(--color-slate-900);--color-surface-muted: var(--color-slate-800);--color-surface-elevated: var(--color-slate-700);--color-border: var(--color-slate-600);--color-border-muted: var(--color-slate-700);--color-text-main: var(--color-slate-50);--color-text-muted: var(--color-slate-300);--color-text-subtle: var(--color-slate-300);--color-text-inverse: var(--color-slate-900);--color-success: #34d399;--color-warning: #fbbf24;--color-error: #f87171;--shadow-sm: 0 1px 2px 0 rgb(0 0 0 / .3);--shadow-md: 0 4px 6px -1px rgb(0 0 0 / .4), 0 2px 4px -2px rgb(0 0 0 / .4);--shadow-lg: 0 10px 15px -3px rgb(0 0 0 / .5), 0 4px 6px -4px rgb(0 0 0 / .5);--shadow-xl: 0 20px 25px -5px rgb(0 0 0 / .6), 0 8px 10px -6px rgb(0 0 0 / .6)}:root.dark body{background-image:radial-gradient(circle at 15% 50%,rgba(167,139,250,.04),transparent 25%),radial-gradient(circle at 85% 30%,rgba(14,165,233,.04),transparent 25%),radial-gradient(circle at 50% 80%,rgba(244,63,94,.02),transparent 40%)}body{background-color:var(--color-surface);font-family:var(--font-sans);color:var(--color-text-main);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-image:radial-gradient(circle at 15% 50%,rgba(167,139,250,.08),transparent 25%),radial-gradient(circle at 85% 30%,rgba(14,165,233,.08),transparent 25%),radial-gradient(circle at 50% 80%,rgba(244,63,94,.05),transparent 40%);background-attachment:fixed;min-height:100vh}h1,h2,h3,h4,h5,h6{font-family:var(--font-display);--tw-font-weight: var(--font-weight-semibold);font-weight:var(--font-weight-semibold);--tw-tracking: var(--tracking-tight);letter-spacing:var(--tracking-tight);color:var(--color-text-main)}.safe-area-top{padding-top:env(safe-area-inset-top,0px)}.safe-area-inset-bottom{padding-bottom:env(safe-area-inset-bottom,0px)}.container-page{margin-inline:auto;max-width:var(--container-7xl);padding-inline:calc(var(--spacing) * 4)}@media(width>=40rem){.container-page{padding-inline:calc(var(--spacing) * 6)}}@media(width>=64rem){.container-page{padding-inline:calc(var(--spacing) * 8)}}main{flex:1}footer{padding-bottom:calc(var(--spacing) * 12)}.skip-link{position:absolute;top:calc(var(--spacing) * -12);left:calc(var(--spacing) * 4);z-index:50;border-radius:var(--radius-lg);background-color:var(--color-primary);padding-inline:calc(var(--spacing) * 4);padding-block:calc(var(--spacing) * 2);color:var(--color-white);transition-property:all;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function));transition-duration:var(--tw-duration, var(--default-transition-duration))}.skip-link:focus{top:calc(var(--spacing) * 4)}@keyframes fade-in{0%{opacity:0}to{opacity:1}}@keyframes fade-in-up{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}::-webkit-scrollbar{width:6px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--color-border);border-radius:10px}::-webkit-scrollbar-thumb:hover{background:var(--color-text-muted)}@property --tw-border-style{syntax: "*"; inherits: false; initial-value: solid;}@property --tw-shadow{syntax: "*"; inherits: false; initial-value: 0 0 #0000;}@property --tw-shadow-color{syntax: "*"; inherits: false;}@property --tw-shadow-alpha{syntax: "<percentage>"; inherits: false; initial-value: 100%;}@property --tw-inset-shadow{syntax: "*"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-shadow-color{syntax: "*"; inherits: false;}@property --tw-inset-shadow-alpha{syntax: "<percentage>"; inherits: false; initial-value: 100%;}@property --tw-ring-color{syntax: "*"; inherits: false;}@property --tw-ring-shadow{syntax: "*"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-ring-color{syntax: "*"; inherits: false;}@property --tw-inset-ring-shadow{syntax: "*"; inherits: false; initial-value: 0 0 #0000;}@property --tw-ring-inset{syntax: "*"; inherits: false;}@property --tw-ring-offset-width{syntax: "<length>"; inherits: false; initial-value: 0px;}@property --tw-ring-offset-color{syntax: "*"; inherits: false; initial-value: #fff;}@property --tw-ring-offset-shadow{syntax: "*"; inherits: false; initial-value: 0 0 #0000;}@property --tw-duration{syntax: "*"; inherits: false;}@property --tw-translate-x{syntax: "*"; inherits: false; initial-value: 0;}@property --tw-translate-y{syntax: "*"; inherits: false; initial-value: 0;}@property --tw-translate-z{syntax: "*"; inherits: false; initial-value: 0;}@property --tw-rotate-x{syntax: "*"; inherits: false;}@property --tw-rotate-y{syntax: "*"; inherits: false;}@property --tw-rotate-z{syntax: "*"; inherits: false;}@property --tw-skew-x{syntax: "*"; inherits: false;}@property --tw-skew-y{syntax: "*"; inherits: false;}@property --tw-space-y-reverse{syntax: "*"; inherits: false; initial-value: 0;}@property --tw-gradient-position{syntax: "*"; inherits: false;}@property --tw-gradient-from{syntax: "<color>"; inherits: false; initial-value: #0000;}@property --tw-gradient-via{syntax: "<color>"; inherits: false; initial-value: #0000;}@property --tw-gradient-to{syntax: "<color>"; inherits: false; initial-value: #0000;}@property --tw-gradient-stops{syntax: "*"; inherits: false;}@property --tw-gradient-via-stops{syntax: "*"; inherits: false;}@property --tw-gradient-from-position{syntax: "<length-percentage>"; inherits: false; initial-value: 0%;}@property --tw-gradient-via-position{syntax: "<length-percentage>"; inherits: false; initial-value: 50%;}@property --tw-gradient-to-position{syntax: "<length-percentage>"; inherits: false; initial-value: 100%;}@property --tw-leading{syntax: "*"; inherits: false;}@property --tw-font-weight{syntax: "*"; inherits: false;}@property --tw-tracking{syntax: "*"; inherits: false;}@property --tw-ordinal{syntax: "*"; inherits: false;}@property --tw-slashed-zero{syntax: "*"; inherits: false;}@property --tw-numeric-figure{syntax: "*"; inherits: false;}@property --tw-numeric-spacing{syntax: "*"; inherits: false;}@property --tw-numeric-fraction{syntax: "*"; inherits: false;}@property --tw-outline-style{syntax: "*"; inherits: false; initial-value: solid;}@property --tw-blur{syntax: "*"; inherits: false;}@property --tw-brightness{syntax: "*"; inherits: false;}@property --tw-contrast{syntax: "*"; inherits: false;}@property --tw-grayscale{syntax: "*"; inherits: false;}@property --tw-hue-rotate{syntax: "*"; inherits: false;}@property --tw-invert{syntax: "*"; inherits: false;}@property --tw-opacity{syntax: "*"; inherits: false;}@property --tw-saturate{syntax: "*"; inherits: false;}@property --tw-sepia{syntax: "*"; inherits: false;}@property --tw-drop-shadow{syntax: "*"; inherits: false;}@property --tw-drop-shadow-color{syntax: "*"; inherits: false;}@property --tw-drop-shadow-alpha{syntax: "<percentage>"; inherits: false; initial-value: 100%;}@property --tw-drop-shadow-size{syntax: "*"; inherits: false;}@property --tw-backdrop-blur{syntax: "*"; inherits: false;}@property --tw-backdrop-brightness{syntax: "*"; inherits: false;}@property --tw-backdrop-contrast{syntax: "*"; inherits: false;}@property --tw-backdrop-grayscale{syntax: "*"; inherits: false;}@property --tw-backdrop-hue-rotate{syntax: "*"; inherits: false;}@property --tw-backdrop-invert{syntax: "*"; inherits: false;}@property --tw-backdrop-opacity{syntax: "*"; inherits: false;}@property --tw-backdrop-saturate{syntax: "*"; inherits: false;}@property --tw-backdrop-sepia{syntax: "*"; inherits: false;}@keyframes pulse{50%{opacity:.5}}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style: solid;--tw-shadow: 0 0 #0000;--tw-shadow-color: initial;--tw-shadow-alpha: 100%;--tw-inset-shadow: 0 0 #0000;--tw-inset-shadow-color: initial;--tw-inset-shadow-alpha: 100%;--tw-ring-color: initial;--tw-ring-shadow: 0 0 #0000;--tw-inset-ring-color: initial;--tw-inset-ring-shadow: 0 0 #0000;--tw-ring-inset: initial;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-offset-shadow: 0 0 #0000;--tw-duration: initial;--tw-translate-x: 0;--tw-translate-y: 0;--tw-translate-z: 0;--tw-rotate-x: initial;--tw-rotate-y: initial;--tw-rotate-z: initial;--tw-skew-x: initial;--tw-skew-y: initial;--tw-space-y-reverse: 0;--tw-gradient-position: initial;--tw-gradient-from: #0000;--tw-gradient-via: #0000;--tw-gradient-to: #0000;--tw-gradient-stops: initial;--tw-gradient-via-stops: initial;--tw-gradient-from-position: 0%;--tw-gradient-via-position: 50%;--tw-gradient-to-position: 100%;--tw-leading: initial;--tw-font-weight: initial;--tw-tracking: initial;--tw-ordinal: initial;--tw-slashed-zero: initial;--tw-numeric-figure: initial;--tw-numeric-spacing: initial;--tw-numeric-fraction: initial;--tw-outline-style: solid;--tw-blur: initial;--tw-brightness: initial;--tw-contrast: initial;--tw-grayscale: initial;--tw-hue-rotate: initial;--tw-invert: initial;--tw-opacity: initial;--tw-saturate: initial;--tw-sepia: initial;--tw-drop-shadow: initial;--tw-drop-shadow-color: initial;--tw-drop-shadow-alpha: 100%;--tw-drop-shadow-size: initial;--tw-backdrop-blur: initial;--tw-backdrop-brightness: initial;--tw-backdrop-contrast: initial;--tw-backdrop-grayscale: initial;--tw-backdrop-hue-rotate: initial;--tw-backdrop-invert: initial;--tw-backdrop-opacity: initial;--tw-backdrop-saturate: initial;--tw-backdrop-sepia: initial}}}


/* ── Design System Tokens & Custom Medical Components ───────────────────── */
/* rMed runtime theme — Leptos / Trunk (loaded after tailwind-built.css) */

/* ── Tokens ─────────────────────────────────────────────────────────────── */

html {
    scrollbar-gutter: stable;
    -webkit-tap-highlight-color: transparent;
    text-rendering: optimizeLegibility;
    overscroll-behavior-y: contain;
    overscroll-behavior-x: none;
}

body {
    overscroll-behavior-y: contain;
    overscroll-behavior-x: none;
}

/* Prevent accidental text selection on interactive chrome while keeping clinical content selectable */
button, nav, .btn, .chip, [role="button"], [role="tab"], header, svg, input[type="checkbox"], input[type="radio"], label {
    -webkit-user-select: none;
    user-select: none;
}

/* Keep clinical values, formulas, and notes selectable for copying */
input, textarea, [contenteditable="true"], .selectable, .calc-result, .result-card, p, article, blockquote {
    -webkit-user-select: text;
    user-select: text;
}

/* Disable ghost dragging on icons and images in WebView */
img, svg {
    -webkit-user-drag: none;
    user-drag: none;
}

/* Ensure minimum 16px font-size on mobile viewports to prevent mobile WebView auto-zoom */
@media (max-width: 640px) {
    input[type="text"],
    input[type="number"],
    input[type="search"],
    select,
    textarea {
        font-size: 16px !important;
    }
}

/* Clearances for mobile soft keyboards, browser viewports, and sticky navigation headers */
input,
select,
textarea {
    scroll-margin-top: calc(4.5rem + env(safe-area-inset-top, 0px));
    scroll-margin-bottom: calc(2rem + env(safe-area-inset-bottom, 0px));
}

/* Prevent accidental pull-to-refresh reload in web browsers when flick-scrolling calculators */
html,
body {
    overscroll-behavior-y: none;
}

::selection {
    background-color: color-mix(in srgb, var(--color-primary) 28%, transparent);
    color: inherit;
}

select option {
    background-color: var(--color-surface);
    color: var(--color-text-main);
}

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input[type="number"] {
    -moz-appearance: textfield;
}

.line-clamp-1 {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    line-clamp: 1;
    overflow: hidden;
}

.line-clamp-2 {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
}

.line-clamp-3 {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    overflow: hidden;
}

:root {
    --color-primary: oklch(0.50 0.12 186);
    --color-primary-hover: oklch(0.46 0.12 186);
    --color-primary-foreground: oklch(0.99 0.01 186);
    --color-secondary: oklch(0.44 0.04 228);
    --color-secondary-foreground: oklch(0.985 0 0);

    --color-surface: #ffffff;
    --color-surface-muted: #f6fafb;
    --color-surface-elevated: #ecf3f5;

    --color-border: #d5e2e8;
    --color-border-muted: #e8f0f3;

    --color-text-main: #0a171d;
    --color-text-muted: #3a4d57;
    --color-text-subtle: #5f7480;
    --color-text-inverse: #ffffff;

    --text-main: var(--color-text-main);
    --text-muted: var(--color-text-muted);
    --text-subtle: var(--color-text-subtle);
    --surface: var(--color-surface);
    --surface-muted: var(--color-surface-muted);
    --border: var(--color-border);

    --color-warning: #c26a08;
    --color-success: #047857;
    --color-error: #c81e1e;

    --color-warning-surface: color-mix(in srgb, var(--color-warning) 8%, var(--color-surface));
    --color-success-surface: color-mix(in srgb, var(--color-success) 8%, var(--color-surface));
    --color-error-surface: color-mix(in srgb, var(--color-error) 8%, var(--color-surface));

    --touch-min: 44px;
    --touch-comfortable: 48px;
    --content-max: 64rem;

    --radius-sm: 0.5rem;
    --radius-md: 0.75rem;
    --radius-lg: 1rem;
    --radius-xl: 1.25rem;
    --radius-full: 9999px;

    --duration-fast: 150ms;
    --duration-normal: 200ms;
    --duration-slow: 280ms;
    --ease-out: cubic-bezier(0.22, 1, 0.36, 1);

    --shadow-xs: 0 1px 2px rgb(12 26 32 / 0.04);
    --shadow-sm: 0 1px 3px rgb(12 26 32 / 0.06), 0 1px 2px rgb(12 26 32 / 0.04);
    --shadow-md: 0 4px 12px rgb(12 26 32 / 0.07), 0 2px 4px rgb(12 26 32 / 0.04);
    --shadow-lg: 0 12px 24px rgb(12 26 32 / 0.08), 0 4px 8px rgb(12 26 32 / 0.04);
    --shadow-xl: 0 20px 40px rgb(12 26 32 / 0.10), 0 8px 16px rgb(12 26 32 / 0.05);

    --ring-focus: 0 0 0 2px color-mix(in srgb, var(--color-primary) 35%, transparent);
    --ring-focus-offset: 0 0 0 2px var(--color-surface), 0 0 0 4px color-mix(in srgb, var(--color-primary) 40%, transparent);

    --font-sans: 'Inter', system-ui, sans-serif;
    --font-display: 'Outfit', 'Inter', system-ui, sans-serif;

    --nav-height: 3.5rem;
}

@media (min-width: 640px) {
    :root {
        --nav-height: 4rem;
    }
}

:root.dark {
    --color-primary: oklch(0.74 0.10 186);
    --color-primary-hover: oklch(0.78 0.10 186);
    --color-primary-foreground: oklch(0.16 0.02 186);
    --color-secondary: oklch(0.68 0.03 228);
    --color-secondary-foreground: oklch(0.14 0 0);

    --color-surface: #0a1216;
    --color-surface-muted: #121d23;
    --color-surface-elevated: #1a2830;

    --color-border: #273a44;
    --color-border-muted: #1a2830;

    --color-text-main: #f0f6f8;
    --color-text-muted: #a6bcc7;
    --color-text-subtle: #7993a0;
    --color-text-inverse: #0a1216;

    --color-warning: #f0b429;
    --color-success: #34d399;
    --color-error: #f87171;

    --color-warning-surface: color-mix(in srgb, var(--color-warning) 12%, var(--color-surface));
    --color-success-surface: color-mix(in srgb, var(--color-success) 12%, var(--color-surface));
    --color-error-surface: color-mix(in srgb, var(--color-error) 12%, var(--color-surface));

    --shadow-xs: 0 1px 2px rgb(0 0 0 / 0.35);
    --shadow-sm: 0 1px 3px rgb(0 0 0 / 0.4);
    --shadow-md: 0 4px 12px rgb(0 0 0 / 0.45);
    --shadow-lg: 0 12px 24px rgb(0 0 0 / 0.5);
    --shadow-xl: 0 20px 40px rgb(0 0 0 / 0.55);

    --ring-focus-offset: 0 0 0 2px var(--color-surface), 0 0 0 4px color-mix(in srgb, var(--color-primary) 50%, transparent);
}

/* ── Base ───────────────────────────────────────────────────────────────── */

*,
*::before,
*::after {
    box-sizing: border-box;
}

body {
    font-family: var(--font-sans);
    font-size: 1rem;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    background-color: var(--color-surface);
    color: var(--color-text-main);
    background-image:
        radial-gradient(ellipse 100% 60% at 0% -20%, oklch(0.52 0.09 186 / 0.09), transparent 58%),
        radial-gradient(ellipse 80% 50% at 100% -10%, oklch(0.55 0.05 215 / 0.06), transparent 52%);
    background-attachment: fixed;
    min-height: 100vh;
    min-height: 100dvh;
}

:root.dark body {
    background-image:
        radial-gradient(ellipse 90% 55% at 0% 0%, oklch(0.52 0.08 186 / 0.10), transparent 55%),
        radial-gradient(ellipse 70% 45% at 100% 0%, oklch(0.45 0.04 228 / 0.08), transparent 48%);
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-display);
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1.25;
    color: var(--color-text-main);
}

main {
    flex: 1;
}

.font-display {
    font-family: var(--font-display);
}

.text-balance {
    text-wrap: balance;
}

/* ── Layout ─────────────────────────────────────────────────────────────── */

.container-page {
    --page-inline: 1rem;
    width: 100%;
    max-width: var(--content-max);
    margin-inline: auto;
    padding-inline: var(--page-inline);
}

@media (min-width: 640px) {
    .container-page {
        --page-inline: 1.5rem;
    }
}

.safe-area-top {
    padding-top: env(safe-area-inset-top, 0px);
}

.safe-area-inset-bottom {
    padding-bottom: env(safe-area-inset-bottom, 0px);
}

.touch-target {
    min-width: var(--touch-min);
    min-height: var(--touch-min);
}

.scrollbar-none {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.scrollbar-none::-webkit-scrollbar {
    display: none;
}

/* ── Navigation ─────────────────────────────────────────────────────────── */

.nav-bar {
    position: sticky;
    top: 0;
    z-index: 30;
    width: 100%;
    border-bottom: 1px solid color-mix(in srgb, var(--color-border) 80%, transparent);
    background: color-mix(in srgb, var(--color-surface) 88%, transparent);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: var(--shadow-xs);
}

.skip-link {
    position: absolute;
    top: -3rem;
    left: 1rem;
    z-index: 50;
    border-radius: var(--radius-sm);
    background: var(--color-primary);
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-primary-foreground);
    text-decoration: none;
    transition: top var(--duration-normal) var(--ease-out);
}

.skip-link:focus {
    top: 1rem;
    outline: none;
    box-shadow: var(--ring-focus-offset);
}

/* ── Typography blocks ──────────────────────────────────────────────────── */

.page-title {
    font-family: var(--font-display);
    font-size: 1.625rem;
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.15;
    color: var(--text-main);
    text-wrap: balance;
}

@media (min-width: 640px) {
    .page-title {
        font-size: 1.875rem;
    }
}

.page-subtitle {
    margin-top: 0.375rem;
    font-size: 0.875rem;
    line-height: 1.55;
    color: var(--text-muted);
    max-width: 42rem;
}

/* ── Panels & cards ───────────────────────────────────────────────────────── */

.panel {
    border-radius: var(--radius-xl);
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    padding: 1.25rem;
    box-shadow: var(--shadow-xs);
}

@media (min-width: 640px) {
    .panel {
        padding: 1.5rem;
    }
}

.catalog-card {
    position: relative;
    display: flex;
    border-radius: var(--radius-xl);
    border: 1px solid var(--color-border);
    border-left-width: 3px;
    border-left-color: transparent;
    background: var(--color-surface);
    box-shadow: var(--shadow-xs);
    transition:
        border-color var(--duration-normal) var(--ease-out),
        box-shadow var(--duration-normal) var(--ease-out),
        transform var(--duration-fast) var(--ease-out);
}

.catalog-card:hover {
    border-color: color-mix(in srgb, var(--color-primary) 28%, var(--color-border));
    border-left-color: var(--color-primary);
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}

.catalog-card--animated {
    animation: fade-in-up 0.38s var(--ease-out) both;
}

/* ── Form controls ────────────────────────────────────────────────────────── */

.input-search,
.input-base {
    width: 100%;
    border-radius: var(--radius-xl);
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    color: var(--text-main);
    font-size: 1rem;
    line-height: 1.4;
    transition:
        border-color var(--duration-fast) ease,
        box-shadow var(--duration-fast) ease;
}

.input-search {
    height: 3rem;
    padding-left: 2.85rem;
    padding-right: 2.85rem;
    font-size: 0.9375rem;
    box-shadow: var(--shadow-xs);
}

.input-search::-webkit-search-cancel-button,
.input-search::-webkit-search-decoration,
.input-search::-webkit-search-results-button,
.input-search::-webkit-search-results-decoration {
    -webkit-appearance: none;
    appearance: none;
    display: none;
}

.search-icon-box {
    position: absolute;
    top: 50%;
    left: 1rem;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.25rem;
    height: 1.25rem;
    color: var(--color-text-subtle);
    pointer-events: none;
    z-index: 2;
}

.search-icon-box svg {
    width: 1.25rem;
    height: 1.25rem;
    display: block;
}

.trust-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.25rem 0.75rem;
    border-radius: var(--radius-full);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--color-primary);
    background: color-mix(in srgb, var(--color-primary) 8%, var(--color-surface));
    border: 1px solid color-mix(in srgb, var(--color-primary) 22%, transparent);
}

.input-base {
    padding: 0.75rem 0.875rem;
    font-size: 0.875rem;
}

.input-search::placeholder,
.input-base::placeholder {
    color: var(--text-subtle);
}

.input-search:hover,
.input-base:hover {
    border-color: color-mix(in srgb, var(--color-primary) 25%, var(--color-border));
}

.input-search:focus,
.input-base:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: var(--ring-focus);
}

.input-invalid {
    border-color: var(--color-error) !important;
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-error) 25%, transparent) !important;
}

/* ── Buttons ────────────────────────────────────────────────────────────── */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: var(--touch-comfortable);
    padding: 0.75rem 1.25rem;
    border-radius: var(--radius-md);
    border: 1px solid transparent;
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
    transition:
        background-color var(--duration-fast) ease,
        border-color var(--duration-fast) ease,
        color var(--duration-fast) ease,
        box-shadow var(--duration-fast) ease,
        transform var(--duration-fast) ease,
        opacity var(--duration-fast) ease;
}

.btn:focus-visible {
    outline: none;
    box-shadow: var(--ring-focus-offset);
}

.btn:active {
    transform: scale(0.98);
}

.btn-primary {
    background: var(--color-primary);
    color: var(--color-primary-foreground);
    box-shadow: var(--shadow-sm);
}

.btn-primary:hover {
    background: var(--color-primary-hover);
    box-shadow: var(--shadow-md);
}

.btn-secondary {
    border-color: var(--color-border);
    background: var(--color-surface);
    color: var(--text-muted);
}

.btn-secondary:hover {
    border-color: color-mix(in srgb, var(--color-primary) 35%, var(--color-border));
    background: var(--color-surface-muted);
    color: var(--text-main);
}

.icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: var(--touch-min);
    min-height: var(--touch-min);
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    color: var(--text-muted);
    cursor: pointer;
    transition:
        border-color var(--duration-fast) ease,
        color var(--duration-fast) ease,
        background-color var(--duration-fast) ease,
        box-shadow var(--duration-fast) ease;
}

.icon-btn:hover {
    border-color: color-mix(in srgb, var(--color-primary) 35%, var(--color-border));
    color: var(--color-primary);
    background: var(--color-surface-muted);
}

.icon-btn:focus-visible {
    outline: none;
    box-shadow: var(--ring-focus);
}

.icon-btn--ghost {
    border-color: transparent;
    background: transparent;
}

.icon-btn--ghost:hover {
    background: var(--color-surface-muted);
}

.icon-btn--fav {
    gap: 0.5rem;
    min-width: auto;
    padding: 0 0.875rem;
    font-size: 0.875rem;
    font-weight: 500;
}

.icon-btn--fav:hover {
    border-color: color-mix(in srgb, #f59e0b 40%, var(--color-border));
    color: #d97706;
}

.icon-btn--fav-active {
    border-color: color-mix(in srgb, #f59e0b 50%, var(--color-border));
    color: #f59e0b;
}

:root.dark .icon-btn--fav-active {
    color: #fbbf24;
}

.fav-star-btn {
    position: absolute;
    right: 0.75rem;
    top: 0.75rem;
    z-index: 10;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    min-width: 2.25rem;
    min-height: 2.25rem;
    border: 0;
    border-radius: var(--radius-full);
    background: transparent;
    color: var(--color-text-subtle);
    cursor: pointer;
    transition: color var(--duration-fast) ease, background-color var(--duration-fast) ease, transform var(--duration-fast) cubic-bezier(0.34, 1.56, 0.64, 1);
}

.fav-star-btn:hover {
    background: var(--color-surface-muted);
    color: #f59e0b;
}

.fav-star-btn:active {
    transform: scale(1.18);
}

.fav-star-btn:focus-visible {
    outline: none;
    box-shadow: var(--ring-focus);
}

.fav-star-btn--active {
    color: #f59e0b;
}

:root.dark .fav-star-btn--active {
    color: #fbbf24;
}

.fav-count {
    margin-left: 0.25rem;
    border-radius: var(--radius-full);
    padding: 0.125rem 0.4rem;
    font-size: 0.6875rem;
    font-weight: 700;
    background: color-mix(in srgb, #f59e0b 14%, var(--color-surface-muted));
    color: #b45309;
}

:root.dark .fav-count {
    color: #fbbf24;
}

.icon-btn-clear {
    position: absolute;
    inset-block: 0;
    right: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    border: 0;
    background: transparent;
    color: var(--text-subtle);
    cursor: pointer;
    border-radius: var(--radius-full);
}

.icon-btn-clear:hover {
    color: var(--text-muted);
}

.icon-btn-clear:focus-visible {
    outline: none;
    box-shadow: var(--ring-focus);
}

.brand-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--color-primary) 10%, transparent);
    color: var(--color-primary);
}

@media (min-width: 640px) {
    .brand-mark {
        width: 2.5rem;
        height: 2.5rem;
    }
}

.panel-title {
    font-family: var(--font-display);
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--text-main);
}

.shell-title {
    font-family: var(--font-display);
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.35;
    color: var(--text-main);
    text-wrap: balance;
}

@media (min-width: 640px) {
    .shell-title {
        font-size: 1.5rem;
    }
}

.shell-description {
    margin-top: 0.5rem;
    font-size: 0.875rem;
    line-height: 1.6;
    color: var(--text-muted);
    max-width: 48rem;
}

.field-heading {
    padding-top: 1rem;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--text-muted);
    border-bottom: 1px solid color-mix(in srgb, var(--color-border) 60%, transparent);
    padding-bottom: 0.5rem;
}

.field-heading:first-child,
.field-heading:first-of-type,
.panel > .field-heading:first-child,
.panel > div:first-child + .field-heading {
    padding-top: 0;
}

.checkbox-option {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.875rem;
    min-height: 48px;
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border);
    background: var(--color-surface-muted);
    color: var(--text-main);
    font-size: 0.875rem;
    cursor: pointer;
    touch-action: manipulation;
    transition: border-color var(--duration-fast) ease, background-color var(--duration-fast) ease, color var(--duration-fast) ease, box-shadow var(--duration-fast) ease;
}

.checkbox-option:hover {
    background: var(--color-surface-elevated);
}

.checkbox-option:focus-within {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-primary) 25%, transparent);
}

.checkbox-option--checked {
    border-color: color-mix(in srgb, var(--color-primary) 40%, transparent);
    background: color-mix(in srgb, var(--color-primary) 6%, var(--color-surface-muted));
    color: var(--color-primary);
    box-shadow: var(--shadow-xs);
}

:root.dark .checkbox-option--checked {
    background: color-mix(in srgb, var(--color-primary) 12%, var(--color-surface-muted));
}

.form-select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%2364748b' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
    background-position: right 0.875rem center;
    background-repeat: no-repeat;
    background-size: 1.25rem 1.25rem;
    padding-right: 2.5rem !important;
}

:root.dark .form-select {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%2394a3b8' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
}

.form-select-unit {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%2364748b' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
    background-position: right 0.5rem center;
    background-repeat: no-repeat;
    background-size: 1rem 1rem;
    padding-right: 1.75rem !important;
    transition: border-color var(--duration-fast) ease, background-color var(--duration-fast) ease, color var(--duration-fast) ease;
}

:root.dark .form-select-unit {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%2394a3b8' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
}

.input-compound:focus-within > .form-select-unit,
.input-compound:focus-within > .static-unit-badge {
    border-left-color: color-mix(in srgb, var(--color-primary) 35%, transparent) !important;
}

.input-compound input {
    padding-inline: 1rem !important;
    padding-block: 0.75rem !important;
}

.empty-state {
    padding: 4rem 1rem;
    text-align: center;
}

.empty-state-icon {
    margin-inline: auto;
    width: 3rem;
    height: 3rem;
    color: var(--color-text-subtle);
}

.empty-state-title {
    margin-top: 1rem;
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-main);
}

.empty-state-text {
    margin-top: 0.25rem;
    font-size: 0.875rem;
    color: var(--text-muted);
}

/* ── Tags ───────────────────────────────────────────────────────────────── */

.tag {
    display: inline-flex;
    align-items: center;
    border-radius: var(--radius-full);
    padding: 0.1875rem 0.625rem;
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--text-muted);
    background: var(--color-surface-muted);
    border: 1px solid color-mix(in srgb, var(--color-border) 70%, transparent);
    letter-spacing: 0.01em;
}

.sticky-toolbar {
    position: sticky;
    top: calc(var(--nav-height, 3.5rem) + env(safe-area-inset-top, 0px));
    z-index: 20;
    margin-inline: -1rem;
    padding-inline: 1rem;
    padding-block: 0.75rem;
    background: color-mix(in srgb, var(--color-surface) 92%, transparent);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid color-mix(in srgb, var(--color-border) 60%, transparent);
    margin-bottom: 1rem;
    transition: background-color var(--duration-fast) ease, border-color var(--duration-fast) ease, box-shadow var(--duration-fast) ease;
}

@media (min-width: 640px) {
    .sticky-toolbar {
        top: calc(var(--nav-height, 4rem) + env(safe-area-inset-top, 0px));
        margin-inline: -1.5rem;
        padding-inline: 1.5rem;
        padding-block: 0.875rem;
    }
}

/* ── Result panels ──────────────────────────────────────────────────────── */

.result-panel {
    display: flex;
    flex-direction: column;
    justify-content: center;
    border-radius: var(--radius-lg);
    padding: 1.25rem;
    border: 1px solid transparent;
    transition:
        background-color var(--duration-slow) ease,
        border-color var(--duration-slow) ease,
        color var(--duration-slow) ease;
    box-shadow: inset 0 1px 2px rgb(0 0 0 / 0.03);
}

@media (min-width: 640px) {
    .result-panel {
        padding: 1.5rem;
    }
}

.result-panel-default {
    background: var(--color-surface-muted);
    border-color: var(--color-border);
    color: var(--text-main);
}

.result-panel-success {
    background: var(--color-success-surface);
    border-color: color-mix(in srgb, var(--color-success) 30%, transparent);
    color: var(--color-success);
}

.result-panel-warning {
    background: var(--color-warning-surface);
    border-color: color-mix(in srgb, var(--color-warning) 30%, transparent);
    color: var(--color-warning);
}

.result-panel-error {
    background: var(--color-error-surface);
    border-color: color-mix(in srgb, var(--color-error) 30%, transparent);
    color: var(--color-error);
}

/* Calculate block: result first in DOM (required for sticky). Desktop places form left / result right. */
.calc-layout {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    overflow-anchor: none;
}

.calc-layout__form {
    min-width: 0;
    order: 1;
}

.calc-layout__result {
    min-width: 0;
    order: 2;
}

/* Zero-size marker at the top of the calculate block (does not affect flex/grid gap). */
.calc-layout__sentinel {
    position: absolute;
    top: 0;
    left: 0;
    width: 1px;
    height: 1px;
    pointer-events: none;
    visibility: hidden;
}

@media (min-width: 768px) {
    .calc-layout {
        display: grid;
        grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
        gap: 1.75rem;
        align-items: start;
    }

    .calc-layout__form {
        order: initial;
        grid-column: 1;
        grid-row: 1;
    }

    .calc-layout__result {
        order: initial;
        grid-column: 2;
        grid-row: 1;
    }
}

@media (min-width: 1024px) {
    .calc-layout {
        grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
        gap: 2rem;
    }
}

/* ── Reference & Field Badges ─────────────────────────────────────────────── */

.kbd-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 1.5rem;
    min-width: 1.5rem;
    padding: 0 0.375rem;
    font-family: inherit;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--text-subtle);
    background: var(--color-surface-muted);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.ref-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.25rem 0.6rem;
    border-radius: var(--radius-sm);
    font-size: 0.6875rem;
    font-weight: 600;
    text-decoration: none;
    border: 1px solid color-mix(in srgb, var(--color-border) 80%, transparent);
    background: var(--color-surface-muted);
    color: var(--text-muted);
    transition: border-color var(--duration-fast) ease, background-color var(--duration-fast) ease, color var(--duration-fast) ease;
}

.ref-badge:hover {
    border-color: color-mix(in srgb, var(--color-primary) 40%, var(--color-border));
    background: color-mix(in srgb, var(--color-primary) 8%, var(--color-surface));
    color: var(--color-primary);
}

.ref-badge--pubmed {
    border-color: color-mix(in srgb, #0284c7 35%, var(--color-border));
    background: color-mix(in srgb, #0284c7 8%, var(--color-surface));
    color: #0284c7;
}

:root.dark .ref-badge--pubmed {
    color: #38bdf8;
    border-color: color-mix(in srgb, #38bdf8 30%, transparent);
}

.ref-badge--doi {
    border-color: color-mix(in srgb, #8b5cf6 35%, var(--color-border));
    background: color-mix(in srgb, #8b5cf6 8%, var(--color-surface));
    color: #8b5cf6;
}

:root.dark .ref-badge--doi {
    color: #a78bfa;
    border-color: color-mix(in srgb, #a78bfa 30%, transparent);
}

.field-range-hint {
    display: inline-block;
    font-size: 0.725rem;
    font-weight: 500;
    color: var(--text-subtle);
}

/* Sticky result: sticks flush under nav while the calculate block scrolls, then releases */
.result-sticky {
    position: sticky;
    /* Match nav content (h-14/h-16) + safe-area; -1px covers nav border / subpixel gap */
    top: calc(var(--nav-height) + env(safe-area-inset-top, 0px) - 1px);
    z-index: 20;
    align-self: start;
    width: 100%;
}

@media (max-width: 767px) {
    .result-sticky {
        margin-inline: 0;
        padding: 0;
        background: transparent;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        border-bottom: 0;
    }

    /* Compact + flush to nav while stuck */
    .result-sticky--stuck {
        /* Break out of .container-page horizontal padding so result meets the full-width nav */
        width: calc(100% + (var(--page-inline, 1rem) * 2));
        max-width: none;
        margin-inline: calc(var(--page-inline, 1rem) * -1);
        background: color-mix(in srgb, var(--color-surface) 95%, transparent);
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
        border-bottom: 1px solid color-mix(in srgb, var(--color-border) 60%, transparent);
        box-shadow: var(--shadow-sm);
    }

    .result-sticky--stuck .result-kicker,
    .result-sticky--stuck .result-interp-label {
        display: none !important;
    }

    .result-sticky--stuck .result-pending {
        padding-block: 0.25rem;
    }

    .result-sticky--stuck .result-pending svg {
        display: none;
    }

    .result-sticky--stuck .result-pending p {
        margin-top: 0;
        font-size: 0.8125rem;
    }

    .result-sticky--stuck .result-panel {
        /* No top padding/radius — was the remaining gap under the nav */
        margin: 0;
        border-radius: 0 0 var(--radius-md) var(--radius-md);
        border-top-width: 0;
        padding: 0.5rem 0.875rem 0.65rem;
    }

    .result-sticky--stuck .result-value {
        margin-top: 0;
        font-size: 1.25rem;
        line-height: 1.25;
    }

    .result-sticky--stuck .result-interp-block {
        margin-top: 0.375rem;
        padding-top: 0.375rem;
    }

    .result-sticky--stuck .result-interp-body {
        margin-top: 0;
        font-size: 0.8125rem;
        line-height: 1.4;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
}

/* ── Specialty Select Filter ──────────────────────────────────────────────── */

.select-filter {
    width: 100%;
    height: 3rem;
    padding: 0 2.25rem 0 1rem;
    border-radius: var(--radius-xl);
    border: 1px solid var(--color-border);
    background-color: var(--color-surface);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%2364748b' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M19 9l-7 7-7-7'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.85rem center;
    background-size: 1rem 1rem;
    color: var(--text-main);
    font-family: inherit;
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.4;
    cursor: pointer;
    box-shadow: var(--shadow-xs);
    appearance: none;
    -webkit-appearance: none;
    transition: border-color var(--duration-fast) ease, box-shadow var(--duration-fast) ease;
}

:root.dark .select-filter {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%2394a8b3' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M19 9l-7 7-7-7'/%3E%3C/svg%3E");
}

.select-filter:hover {
    border-color: color-mix(in srgb, var(--color-primary) 35%, var(--color-border));
}

.select-filter:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: var(--ring-focus);
}

.btn-fav-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    height: 3rem;
    padding: 0 1rem;
    border-radius: var(--radius-xl);
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    color: var(--text-muted);
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    box-shadow: var(--shadow-xs);
    white-space: nowrap;
    transition: border-color var(--duration-fast) ease, background-color var(--duration-fast) ease, color var(--duration-fast) ease, box-shadow var(--duration-fast) ease;
}

.btn-fav-toggle:hover {
    border-color: color-mix(in srgb, #f59e0b 40%, var(--color-border));
    color: #d97706;
    background: var(--color-surface-muted);
}

:root.dark .btn-fav-toggle:hover {
    color: #fbbf24;
}

.btn-fav-toggle--active {
    border-color: color-mix(in srgb, #f59e0b 50%, transparent);
    background: color-mix(in srgb, #f59e0b 12%, var(--color-surface));
    color: #d97706;
}

:root.dark .btn-fav-toggle--active {
    color: #fbbf24;
    background: color-mix(in srgb, #f59e0b 16%, var(--color-surface));
}

/* ── Links ────────────────────────────────────────────────────────────────── */

.text-link {
    color: var(--text-muted);
    text-underline-offset: 2px;
    transition: color var(--duration-fast) ease;
}

.text-link:hover {
    color: var(--color-primary);
    text-decoration: underline;
}

.footer-links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.5rem 1.5rem;
    color: var(--text-muted);
    font-size: 0.75rem;
    font-weight: 500;
}

/* ── Animations ───────────────────────────────────────────────────────────── */

.animate-fade-in {
    animation: fade-in 0.28s var(--ease-out) both;
}

.animate-fade-in-up {
    animation: fade-in-up 0.38s var(--ease-out) both;
}

@keyframes fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes fade-in-up {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ── Scrollbar ────────────────────────────────────────────────────────────── */

::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: var(--color-border);
    border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--color-text-muted);
}

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



/* ── Print Styles ────────────────────────────────────────────────────────── */
@media print {
    .nav-bar,
    .skip-link,
    .icon-btn,
    .fav-star-btn,
    footer,
    #calculator-search,
    button {
        display: none !important;
    }

    body {
        background: #ffffff !important;
        color: #000000 !important;
        font-size: 11pt !important;
    }

    .container-page {
        max-width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    .panel,
    .result-panel {
        box-shadow: none !important;
        border: 1px solid #ccc !important;
        break-inside: avoid;
    }

    .calc-layout {
        display: block !important;
    }

    .calc-layout__result {
        position: static !important;
        margin-bottom: 1.5rem !important;
    }

    .calc-layout__form {
        margin-top: 1rem !important;
    }

    a {
        text-decoration: none !important;
        color: inherit !important;
    }
}