/* ===================================================================== app.css - hand-authored design system (replaces Tailwind) Three cascade layers: base - reset + design tokens + element defaults components - semantic classes (.card, .btn-primary, .field-input, ...) utilities - thin layout layer (generated by design/_gen_utilities.py) Dark mode: tokens flip under `.dark` on ; component classes read tokens via var(), so no component needs a dark variant. Palette: a warm neutral ramp (not the cool blue-gray of the old build). To restyle the whole app, edit the --n-* primitives or the semantic role tokens below - nothing else changes. ===================================================================== */ @layer base, components, utilities; /* ===================================================================== BASE: design tokens ===================================================================== */ @layer base { :root { /* --- neutral ramp (warm, low-chroma; do not use directly) --- */ --n-50: oklch(98.4% .003 83); --n-100: oklch(97% .004 83); --n-200: oklch(92.6% .005 83); --n-300: oklch(87% .006 83); --n-400: oklch(71.5% .009 78); --n-500: oklch(55.6% .011 75); --n-600: oklch(44.5% .009 72); --n-700: oklch(37% .008 70); --n-800: oklch(26.8% .006 66); --n-900: oklch(21.5% .005 66); --white: #fff; /* --- accents (semantic state colours) --- */ --red-50: oklch(97.1% .013 17.38); --red-100: oklch(93.6% .032 17.717); --red-400: oklch(70.4% .191 22.216); --red-500: oklch(63.7% .237 25.331); --red-600: oklch(57.7% .245 27.325); --red-800: oklch(44.4% .177 26.899); --red-900: oklch(39.6% .141 25.723); --green-100: oklch(96.2% .044 156.743); --green-800: oklch(44.8% .119 151.328); --emerald-300: oklch(84.5% .143 164.978); --emerald-500: oklch(69.6% .17 162.48); --purple-100: oklch(94.6% .033 307.174); --purple-800: oklch(43.8% .218 303.724); --violet-300: oklch(81.1% .111 293.571); --violet-500: oklch(60.6% .25 292.717); --amber-50: oklch(98.7% .022 95); --amber-200: oklch(92.4% .12 95.746); --amber-300: oklch(87.9% .169 91.605); --amber-500: oklch(76.9% .188 70.08); --amber-800: oklch(47.3% .137 46.201); /* --- semantic roles (use these everywhere) --- */ /* surfaces */ --surface-page: var(--n-50); --surface-card: var(--white); --surface-card-border: var(--n-200); --surface-header: var(--n-50); /* table header row / inset / recessed */ --row-hover: var(--n-50); --divider: var(--n-100); --divider-strong: var(--n-200); /* text */ --text-primary: var(--n-900); --text-secondary: var(--n-700); --text-body: var(--n-600); --text-muted: var(--n-500); --text-faint: var(--n-400); --text-icon: var(--n-300); /* interactive (near-black primary; simple, no blue) */ --btn-bg: var(--n-900); --btn-fg: var(--white); --btn-bg-hover: var(--n-700); --focus-ring: var(--n-900); /* form inputs */ --input-bg: var(--white); --input-border: var(--n-300); --input-text: var(--n-900); --input-placeholder: var(--n-400); /* feedback / state */ --danger-text: var(--red-600); --danger-strong: var(--red-800); --success-text: var(--green-800); --warning-text: var(--amber-800); --error-text: var(--red-600); --error-border: var(--red-400); --error-bg: var(--red-50); /* solid danger button (destructive confirmations) */ --danger-solid-bg: var(--red-600); --danger-solid-hover: var(--red-800); --danger-solid-fg: var(--white); /* recessed surface + modal overlay */ --surface-inset: var(--n-50); --overlay: color-mix(in oklab, var(--n-900) 50%, transparent); /* progress track / fill */ --track: var(--n-200); --track-fill: var(--n-900); /* badges (bg / fg pairs) */ --badge-green-bg: var(--green-100); --badge-green-fg: var(--green-800); --badge-red-bg: var(--red-100); --badge-red-fg: var(--red-800); --badge-purple-bg: var(--purple-100); --badge-purple-fg: var(--purple-800); --badge-amber-bg: var(--amber-50); --badge-amber-fg: var(--amber-800); --badge-gray-bg: var(--n-100); --badge-gray-fg: var(--n-700); --chip-bg: var(--n-100); --chip-fg: var(--n-700); /* alerts */ --alert-warning-bg: var(--amber-50); --alert-warning-fg: var(--amber-800); --alert-warning-bd: var(--amber-200); --alert-error-bg: var(--red-50); --alert-error-fg: var(--red-800); --alert-error-bd: var(--red-100); --alert-success-bg: var(--green-100); --alert-success-fg: var(--green-800); --alert-success-bd: var(--green-100); --alert-info-bg: var(--n-50); --alert-info-fg: var(--n-800); --alert-info-bd: var(--n-200); /* shared primitives */ --font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / .1), 0 1px 2px -1px rgb(0 0 0 / .1); --shadow: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1); --ring-w: 2px; --transition: color .15s, background-color .15s, border-color .15s, fill .15s, stroke .15s, opacity .15s, box-shadow .15s; } /* dark mode: only the semantic roles flip (warm dark neutrals, not zinc) */ .dark { --surface-page: var(--n-900); --surface-card: var(--n-800); --surface-card-border: var(--n-700); --surface-header: var(--n-700); --row-hover: var(--n-700); --divider: var(--n-700); --divider-strong: var(--n-700); --text-primary: var(--n-100); --text-secondary: var(--n-300); --text-body: var(--n-400); --text-muted: var(--n-400); --text-faint: var(--n-500); --text-icon: var(--n-600); --btn-bg: var(--n-100); --btn-fg: var(--n-900); --btn-bg-hover: var(--white); --focus-ring: var(--n-400); --input-bg: var(--n-700); --input-border: var(--n-600); --input-text: var(--n-100); --input-placeholder: var(--n-500); --danger-text: var(--red-400); --danger-strong: var(--red-400); --success-text: var(--emerald-300); --warning-text: var(--amber-300); --error-text: var(--red-400); --error-bg: color-mix(in oklab, var(--red-900) 22%, transparent); --surface-inset: var(--n-700); --overlay: color-mix(in oklab, var(--n-900) 65%, transparent); --track: var(--n-700); --track-fill: var(--n-100); --badge-green-bg: color-mix(in oklab, var(--emerald-500) 20%, transparent); --badge-green-fg: var(--emerald-300); --badge-red-bg: color-mix(in oklab, var(--red-500) 20%, transparent); --badge-red-fg: var(--red-400); --badge-purple-bg: color-mix(in oklab, var(--violet-500) 20%, transparent); --badge-purple-fg: var(--violet-300); --badge-amber-bg: color-mix(in oklab, var(--amber-500) 20%, transparent); --badge-amber-fg: var(--amber-300); --badge-gray-bg: var(--n-700); --badge-gray-fg: var(--n-300); --chip-bg: var(--n-700); --chip-fg: var(--n-300); --alert-warning-bg: color-mix(in oklab, var(--amber-500) 12%, transparent); --alert-warning-fg: var(--amber-300); --alert-warning-bd: color-mix(in oklab, var(--amber-500) 22%, transparent); --alert-error-bg: color-mix(in oklab, var(--red-500) 12%, transparent); --alert-error-fg: var(--red-400); --alert-error-bd: color-mix(in oklab, var(--red-500) 22%, transparent); --alert-success-bg: color-mix(in oklab, var(--emerald-500) 12%, transparent); --alert-success-fg: var(--emerald-300); --alert-success-bd: color-mix(in oklab, var(--emerald-500) 22%, transparent); --alert-info-bg: var(--n-700); --alert-info-fg: var(--n-300); --alert-info-bd: var(--n-700); } } /* ===================================================================== BASE: reset + element defaults Compact equivalent of the parts of Tailwind preflight this app relies on. Lives in the base layer so it never overrides utility classes. ===================================================================== */ @layer base { *, ::before, ::after { box-sizing: border-box; border: 0 solid var(--surface-card-border); } * { margin: 0; } html { line-height: 1.5; -webkit-text-size-adjust: 100%; tab-size: 4; } html, body { height: 100%; } body { font-family: var(--font-sans); background: var(--surface-page); color: var(--text-primary); -webkit-font-smoothing: antialiased; } h1, h2, h3, h4 { font-size: inherit; font-weight: inherit; } a { color: inherit; text-decoration: inherit; } button, input, select, textarea { font: inherit; color: inherit; background: transparent; letter-spacing: inherit; } button, [role="button"] { cursor: pointer; } :disabled { cursor: default; } img, svg, video, canvas { display: block; max-width: 100%; } table { border-collapse: collapse; } ::placeholder { color: var(--input-placeholder); opacity: 1; } [hidden] { display: none !important; } } /* ===================================================================== COMPONENTS ===================================================================== */ @layer components { /* --- page scaffolding --- */ .page { margin-inline: auto; padding-block: 1.5rem; } .page-narrow { max-width: 32rem; } /* forms */ .page-md { max-width: 42rem; } .page-wide { max-width: 56rem; } /* detail / mid lists */ .page-full { max-width: 72rem; } /* wide tables */ .page-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.5rem; } /* breadcrumb: small uppercase eyebrow above a title */ .breadcrumb { font-size: .75rem; line-height: calc(1 / .75); font-weight: 600; text-transform: uppercase; letter-spacing: .025em; color: var(--text-muted); margin-bottom: .25rem; } .breadcrumb a:hover { text-decoration: underline; } .page-title { font-size: 1.5rem; line-height: calc(2 / 1.5); font-weight: 700; color: var(--text-primary); } /* --- cards / panels --- */ .card { background: var(--surface-card); border: 1px solid var(--surface-card-border); border-radius: .75rem; box-shadow: var(--shadow-sm); } .card-flush { overflow: hidden; } /* clip children to radius (tables/lists) */ .card-pad { padding: 1.5rem; margin-bottom: 1rem; } /* header bar inside a card (e.g. group header in a nested list) */ .card-head { display: flex; align-items: center; justify-content: space-between; padding: .75rem 1rem; border-bottom: 1px solid var(--divider); background: var(--surface-header); } /* --- buttons / links --- */ .btn-primary { display: inline-flex; align-items: center; justify-content: center; padding: .5rem 1rem; border-radius: .5rem; font-size: .875rem; font-weight: 500; line-height: calc(1.25 / .875); background: var(--btn-bg); color: var(--btn-fg); transition: var(--transition); cursor: pointer; } .btn-primary:hover { background: var(--btn-bg-hover); } .btn-primary-lg { padding-inline: 1.25rem; } /* px-5 form submit */ .btn-ghost { display: inline-flex; align-items: center; padding: .5rem 1.25rem; border-radius: .5rem; font-size: .875rem; font-weight: 500; color: var(--text-body); transition: var(--transition); cursor: pointer; } .btn-ghost:hover { color: var(--text-primary); } .btn-danger { display: inline-flex; align-items: center; padding: .5rem 1rem; border-radius: .5rem; font-size: .875rem; font-weight: 500; color: var(--danger-text); transition: var(--transition); cursor: pointer; } .btn-danger:hover { color: var(--danger-strong); } /* filled destructive button (delete confirmations) */ .btn-danger-solid { display: inline-flex; align-items: center; justify-content: center; padding: .5rem 1rem; border-radius: .5rem; font-size: .875rem; font-weight: 500; background: var(--danger-solid-bg); color: var(--danger-solid-fg); transition: var(--transition); cursor: pointer; } .btn-danger-solid:hover { background: var(--danger-solid-hover); } /* bordered neutral/secondary button (Edit, Resend, passkey, ...) */ .btn-outline { display: inline-flex; align-items: center; justify-content: center; padding: .5rem 1rem; border-radius: .5rem; font-size: .875rem; font-weight: 500; border: 1px solid var(--surface-card-border); color: var(--text-secondary); background: var(--surface-card); transition: var(--transition); cursor: pointer; } .btn-outline:hover { background: var(--surface-inset); color: var(--text-primary); } /* disabled state for all buttons */ .btn-primary:disabled, .btn-outline:disabled, .btn-danger-solid:disabled, .btn-ghost:disabled, .btn-danger:disabled { opacity: .5; cursor: not-allowed; } /* inline links */ .link { color: var(--text-primary); text-decoration: underline; } .link-muted { color: var(--text-muted); transition: var(--transition); } .link-muted:hover { color: var(--text-primary); } /* --- data tables --- */ .data-table { width: 100%; font-size: .875rem; line-height: calc(1.25 / .875); } .data-table thead tr { border-bottom: 1px solid var(--divider-strong); background: var(--surface-header); } .data-table th { text-align: left; padding: .75rem 1rem; font-weight: 600; color: var(--text-secondary); } /* metadata-style header: uppercase, no tinted row */ .data-table.plain thead tr { background: transparent; } .data-table.plain th { font-size: .75rem; text-transform: uppercase; letter-spacing: .025em; color: var(--text-muted); } .data-table tbody tr { border-top: 1px solid var(--divider); } .data-table tbody tr:first-child { border-top: 0; } .data-table tbody tr.is-clickable { cursor: pointer; transition: var(--transition); } .data-table tbody tr.is-clickable:hover { background: var(--row-hover); } .data-table td { padding: .75rem 1rem; color: var(--text-body); } .cell-strong { color: var(--text-primary); font-weight: 500; } .cell-faint { color: var(--text-faint); } /* list of rows separated by hairlines */ .divide-rows > * + * { border-top: 1px solid var(--divider); } /* --- empty states --- */ .empty { padding: 3rem 1.5rem; text-align: center; color: var(--text-faint); font-size: .875rem; } .empty-rich { text-align: center; padding: 4rem 0; background: var(--surface-card); border: 1px solid var(--surface-card-border); border-radius: .75rem; } .empty-icon { width: 2.5rem; height: 2.5rem; margin: 0 auto .75rem; color: var(--text-icon); } /* --- forms --- */ .field-label { display: block; font-size: .75rem; line-height: calc(1 / .75); font-weight: 600; text-transform: uppercase; letter-spacing: .025em; color: var(--text-secondary); margin-bottom: .25rem; } .req { color: var(--red-500); } .field-input { width: 100%; padding: .5rem .75rem; border-radius: .5rem; font-size: .875rem; line-height: calc(1.25 / .875); border: 1px solid var(--input-border); background: var(--input-bg); color: var(--input-text); transition: var(--transition); } .field-input::placeholder { color: var(--input-placeholder); } .field-input:focus { outline: none; border-color: transparent; box-shadow: 0 0 0 var(--ring-w) var(--focus-ring); } .field-input.has-error { border-color: var(--error-border); background: var(--error-bg); } .field-input:disabled { background: var(--surface-header); color: var(--text-muted); } .field-hint { margin-top: .5rem; font-size: .75rem; color: var(--text-faint); } .field-error { margin-top: .25rem; font-size: .75rem; color: var(--error-text); } .form-heading { font-size: .75rem; font-weight: 600; text-transform: uppercase; letter-spacing: .025em; color: var(--text-secondary); margin-bottom: 1rem; } .form-divider { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--divider); } .form-actions { display: flex; align-items: center; gap: .75rem; } /* --- badges / chips --- */ .badge { display: inline-flex; align-items: center; padding: .125rem .5rem; border-radius: .25rem; font-size: .75rem; font-weight: 500; } .badge-green { background: var(--badge-green-bg); color: var(--badge-green-fg); } .badge-red { background: var(--badge-red-bg); color: var(--badge-red-fg); } .badge-purple { background: var(--badge-purple-bg); color: var(--badge-purple-fg); } .badge-amber { background: var(--badge-amber-bg); color: var(--badge-amber-fg); } .badge-gray { background: var(--badge-gray-bg); color: var(--badge-gray-fg); } .chip { display: inline-flex; align-items: center; gap: .5rem; padding: .25rem .75rem; border-radius: 9999px; font-size: .75rem; background: var(--chip-bg); color: var(--chip-fg); } /* --- alerts (Django messages) --- */ .alert { padding: .75rem 1rem; border-radius: .5rem; font-size: .875rem; font-weight: 500; border: 1px solid transparent; } .alert-warning { background: var(--alert-warning-bg); color: var(--alert-warning-fg); border-color: var(--alert-warning-bd); } .alert-error { background: var(--alert-error-bg); color: var(--alert-error-fg); border-color: var(--alert-error-bd); } .alert-success { background: var(--alert-success-bg); color: var(--alert-success-fg); border-color: var(--alert-success-bd); } .alert-info { background: var(--alert-info-bg); color: var(--alert-info-fg); border-color: var(--alert-info-bd); } /* --- checkbox / radio --- */ .field-check { width: 1rem; height: 1rem; border-radius: .25rem; border: 1px solid var(--input-border); background: var(--input-bg); accent-color: var(--btn-bg); cursor: pointer; } .field-check[type="radio"] { border-radius: 9999px; } /* --- recessed / inset panel (secondary cards, code blocks, summaries) --- */ .inset { background: var(--surface-inset); border-radius: .5rem; color: var(--text-body); } /* --- progress bar --- */ .progress { height: .5rem; border-radius: 9999px; background: var(--track); overflow: hidden; } .progress-bar { height: 100%; border-radius: 9999px; background: var(--track-fill); transition: width .2s; } .progress-bar.is-danger { background: var(--danger-solid-bg); } .progress-bar.is-warning { background: var(--amber-500); } .progress-bar.is-success { background: var(--emerald-500); } /* --- step indicator dot (multi-step flows) --- */ .step-dot { display: inline-flex; align-items: center; justify-content: center; width: 1.75rem; height: 1.75rem; border-radius: 9999px; font-size: .75rem; font-weight: 600; background: var(--surface-inset); color: var(--text-muted); } .step-dot.is-active { background: var(--btn-bg); color: var(--btn-fg); } .step-dot.is-done { background: var(--emerald-500); color: var(--white); } /* --- file dropzone --- */ .dropzone { border: 2px dashed var(--input-border); border-radius: .75rem; background: var(--surface-inset); transition: var(--transition); cursor: pointer; } .dropzone:hover { border-color: var(--text-faint); } .dropzone.is-dragging { border-color: var(--btn-bg); background: var(--row-hover); } /* --- modal / mobile-nav backdrop --- */ .overlay { position: fixed; inset: 0; background: var(--overlay); } /* --- dark chrome: sidebar + mobile top bar (always dark, both themes) --- */ .chrome-dark { background: var(--n-900); color: var(--n-400); } .sidebar-brand { color: var(--white); } .sidebar-divider { border-color: var(--n-700); } .sidebar-avatar { display: inline-flex; align-items: center; justify-content: center; background: var(--n-600); color: var(--white); } /* dropdown panel inside the sidebar */ .sidebar-menu { background: var(--n-800); border: 1px solid var(--n-700); box-shadow: 0 10px 15px -3px rgb(0 0 0 / .3), 0 4px 6px -4px rgb(0 0 0 / .3); } /* a nav row (link, group toggle, sub-link, logout) */ .sidebar-link { display: flex; align-items: center; gap: .75rem; padding: .5rem .75rem; border-radius: .5rem; font-size: .875rem; font-weight: 500; color: var(--n-400); transition: var(--transition); cursor: pointer; } .sidebar-link:hover { background: var(--n-800); color: var(--white); } .sidebar-link.is-active { background: var(--n-700); color: var(--white); } /* dark/light theme switch in the sidebar footer */ .theme-toggle { position: relative; display: inline-flex; align-items: center; flex-shrink: 0; width: 3.5rem; height: 1.75rem; padding: .25rem; border-radius: 9999px; background: var(--n-600); transition: background-color .3s; cursor: pointer; } .theme-toggle.is-on { background: var(--n-400); } .theme-toggle-knob { position: relative; z-index: 1; width: 1.25rem; height: 1.25rem; background: var(--white); border-radius: 9999px; box-shadow: var(--shadow-sm); transition: transform .3s; } .theme-toggle.is-on .theme-toggle-knob { transform: translateX(1.75rem); } .theme-toggle-icon { color: var(--white); } /* tiny meta text in the sidebar footer (version) */ .sidebar-meta { color: var(--n-600); transition: var(--transition); } .sidebar-meta:hover { color: var(--n-400); } } /* ===== UTILITIES (generated by design/_gen_utilities.py) ===== */ @layer utilities { .block{display:block} .inline-block{display:inline-block} .inline{display:inline} .flex{display:flex} .inline-flex{display:inline-flex} .grid{display:grid} .hidden{display:none} .flex-col{flex-direction:column} .flex-wrap{flex-wrap:wrap} .flex-1{flex:1 1 0%} .shrink-0{flex-shrink:0} .grow{flex-grow:1} .items-center{align-items:center} .items-start{align-items:flex-start} .items-end{align-items:flex-end} .items-baseline{align-items:baseline} .justify-center{justify-content:center} .justify-between{justify-content:space-between} .justify-end{justify-content:flex-end} .mx-auto{margin-inline:auto} .grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))} .grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))} .grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))} .grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))} .relative{position:relative} .absolute{position:absolute} .fixed{position:fixed} .sticky{position:sticky} .inset-0{inset:0} .inset-y-0{top:0;bottom:0} .top-0{top:0} .left-0{left:0} .right-0{right:0} .bottom-0{bottom:0} .top-1{top:.25rem} .left-1{left:.25rem} .right-1{right:.25rem} .left-1\.5{left:.375rem} .right-1\.5{right:.375rem} .z-10{z-index:10} .z-20{z-index:20} .z-30{z-index:30} .z-40{z-index:40} .mt-0{margin-top:0rem} .mt-0\.5{margin-top:0.125rem} .mt-1{margin-top:0.25rem} .mt-1\.5{margin-top:0.375rem} .mt-2{margin-top:0.5rem} .mt-2\.5{margin-top:0.625rem} .mt-3{margin-top:0.75rem} .mt-3\.5{margin-top:0.875rem} .mt-4{margin-top:1rem} .mt-5{margin-top:1.25rem} .mt-6{margin-top:1.5rem} .mt-7{margin-top:1.75rem} .mt-8{margin-top:2rem} .mt-10{margin-top:2.5rem} .mt-11{margin-top:2.75rem} .mt-12{margin-top:3rem} .mt-14{margin-top:3.5rem} .mt-16{margin-top:4rem} .mt-px{margin-top:1px} .mr-0{margin-right:0rem} .mr-0\.5{margin-right:0.125rem} .mr-1{margin-right:0.25rem} .mr-1\.5{margin-right:0.375rem} .mr-2{margin-right:0.5rem} .mr-2\.5{margin-right:0.625rem} .mr-3{margin-right:0.75rem} .mr-3\.5{margin-right:0.875rem} .mr-4{margin-right:1rem} .mr-5{margin-right:1.25rem} .mr-6{margin-right:1.5rem} .mr-7{margin-right:1.75rem} .mr-8{margin-right:2rem} .mr-10{margin-right:2.5rem} .mr-11{margin-right:2.75rem} .mr-12{margin-right:3rem} .mr-14{margin-right:3.5rem} .mr-16{margin-right:4rem} .mr-px{margin-right:1px} .mb-0{margin-bottom:0rem} .mb-0\.5{margin-bottom:0.125rem} .mb-1{margin-bottom:0.25rem} .mb-1\.5{margin-bottom:0.375rem} .mb-2{margin-bottom:0.5rem} .mb-2\.5{margin-bottom:0.625rem} .mb-3{margin-bottom:0.75rem} .mb-3\.5{margin-bottom:0.875rem} .mb-4{margin-bottom:1rem} .mb-5{margin-bottom:1.25rem} .mb-6{margin-bottom:1.5rem} .mb-7{margin-bottom:1.75rem} .mb-8{margin-bottom:2rem} .mb-10{margin-bottom:2.5rem} .mb-11{margin-bottom:2.75rem} .mb-12{margin-bottom:3rem} .mb-14{margin-bottom:3.5rem} .mb-16{margin-bottom:4rem} .mb-px{margin-bottom:1px} .ml-0{margin-left:0rem} .ml-0\.5{margin-left:0.125rem} .ml-1{margin-left:0.25rem} .ml-1\.5{margin-left:0.375rem} .ml-2{margin-left:0.5rem} .ml-2\.5{margin-left:0.625rem} .ml-3{margin-left:0.75rem} .ml-3\.5{margin-left:0.875rem} .ml-4{margin-left:1rem} .ml-5{margin-left:1.25rem} .ml-6{margin-left:1.5rem} .ml-7{margin-left:1.75rem} .ml-8{margin-left:2rem} .ml-10{margin-left:2.5rem} .ml-11{margin-left:2.75rem} .ml-12{margin-left:3rem} .ml-14{margin-left:3.5rem} .ml-16{margin-left:4rem} .ml-px{margin-left:1px} .mx-0{margin-inline:0rem} .mx-0\.5{margin-inline:0.125rem} .mx-1{margin-inline:0.25rem} .mx-1\.5{margin-inline:0.375rem} .mx-2{margin-inline:0.5rem} .mx-2\.5{margin-inline:0.625rem} .mx-3{margin-inline:0.75rem} .mx-3\.5{margin-inline:0.875rem} .mx-4{margin-inline:1rem} .mx-5{margin-inline:1.25rem} .mx-6{margin-inline:1.5rem} .mx-7{margin-inline:1.75rem} .mx-8{margin-inline:2rem} .mx-10{margin-inline:2.5rem} .mx-11{margin-inline:2.75rem} .mx-12{margin-inline:3rem} .mx-14{margin-inline:3.5rem} .mx-16{margin-inline:4rem} .mx-px{margin-inline:1px} .my-0{margin-block:0rem} .my-0\.5{margin-block:0.125rem} .my-1{margin-block:0.25rem} .my-1\.5{margin-block:0.375rem} .my-2{margin-block:0.5rem} .my-2\.5{margin-block:0.625rem} .my-3{margin-block:0.75rem} .my-3\.5{margin-block:0.875rem} .my-4{margin-block:1rem} .my-5{margin-block:1.25rem} .my-6{margin-block:1.5rem} .my-7{margin-block:1.75rem} .my-8{margin-block:2rem} .my-10{margin-block:2.5rem} .my-11{margin-block:2.75rem} .my-12{margin-block:3rem} .my-14{margin-block:3.5rem} .my-16{margin-block:4rem} .my-px{margin-block:1px} .m-0{margin:0rem} .m-0\.5{margin:0.125rem} .m-1{margin:0.25rem} .m-1\.5{margin:0.375rem} .m-2{margin:0.5rem} .m-2\.5{margin:0.625rem} .m-3{margin:0.75rem} .m-3\.5{margin:0.875rem} .m-4{margin:1rem} .m-5{margin:1.25rem} .m-6{margin:1.5rem} .m-7{margin:1.75rem} .m-8{margin:2rem} .m-10{margin:2.5rem} .m-11{margin:2.75rem} .m-12{margin:3rem} .m-14{margin:3.5rem} .m-16{margin:4rem} .m-px{margin:1px} .pt-0{padding-top:0rem} .pt-0\.5{padding-top:0.125rem} .pt-1{padding-top:0.25rem} .pt-1\.5{padding-top:0.375rem} .pt-2{padding-top:0.5rem} .pt-2\.5{padding-top:0.625rem} .pt-3{padding-top:0.75rem} .pt-3\.5{padding-top:0.875rem} .pt-4{padding-top:1rem} .pt-5{padding-top:1.25rem} .pt-6{padding-top:1.5rem} .pt-7{padding-top:1.75rem} .pt-8{padding-top:2rem} .pt-10{padding-top:2.5rem} .pt-11{padding-top:2.75rem} .pt-12{padding-top:3rem} .pt-14{padding-top:3.5rem} .pt-16{padding-top:4rem} .pt-px{padding-top:1px} .pr-0{padding-right:0rem} .pr-0\.5{padding-right:0.125rem} .pr-1{padding-right:0.25rem} .pr-1\.5{padding-right:0.375rem} .pr-2{padding-right:0.5rem} .pr-2\.5{padding-right:0.625rem} .pr-3{padding-right:0.75rem} .pr-3\.5{padding-right:0.875rem} .pr-4{padding-right:1rem} .pr-5{padding-right:1.25rem} .pr-6{padding-right:1.5rem} .pr-7{padding-right:1.75rem} .pr-8{padding-right:2rem} .pr-10{padding-right:2.5rem} .pr-11{padding-right:2.75rem} .pr-12{padding-right:3rem} .pr-14{padding-right:3.5rem} .pr-16{padding-right:4rem} .pr-px{padding-right:1px} .pb-0{padding-bottom:0rem} .pb-0\.5{padding-bottom:0.125rem} .pb-1{padding-bottom:0.25rem} .pb-1\.5{padding-bottom:0.375rem} .pb-2{padding-bottom:0.5rem} .pb-2\.5{padding-bottom:0.625rem} .pb-3{padding-bottom:0.75rem} .pb-3\.5{padding-bottom:0.875rem} .pb-4{padding-bottom:1rem} .pb-5{padding-bottom:1.25rem} .pb-6{padding-bottom:1.5rem} .pb-7{padding-bottom:1.75rem} .pb-8{padding-bottom:2rem} .pb-10{padding-bottom:2.5rem} .pb-11{padding-bottom:2.75rem} .pb-12{padding-bottom:3rem} .pb-14{padding-bottom:3.5rem} .pb-16{padding-bottom:4rem} .pb-px{padding-bottom:1px} .pl-0{padding-left:0rem} .pl-0\.5{padding-left:0.125rem} .pl-1{padding-left:0.25rem} .pl-1\.5{padding-left:0.375rem} .pl-2{padding-left:0.5rem} .pl-2\.5{padding-left:0.625rem} .pl-3{padding-left:0.75rem} .pl-3\.5{padding-left:0.875rem} .pl-4{padding-left:1rem} .pl-5{padding-left:1.25rem} .pl-6{padding-left:1.5rem} .pl-7{padding-left:1.75rem} .pl-8{padding-left:2rem} .pl-10{padding-left:2.5rem} .pl-11{padding-left:2.75rem} .pl-12{padding-left:3rem} .pl-14{padding-left:3.5rem} .pl-16{padding-left:4rem} .pl-px{padding-left:1px} .px-0{padding-inline:0rem} .px-0\.5{padding-inline:0.125rem} .px-1{padding-inline:0.25rem} .px-1\.5{padding-inline:0.375rem} .px-2{padding-inline:0.5rem} .px-2\.5{padding-inline:0.625rem} .px-3{padding-inline:0.75rem} .px-3\.5{padding-inline:0.875rem} .px-4{padding-inline:1rem} .px-5{padding-inline:1.25rem} .px-6{padding-inline:1.5rem} .px-7{padding-inline:1.75rem} .px-8{padding-inline:2rem} .px-10{padding-inline:2.5rem} .px-11{padding-inline:2.75rem} .px-12{padding-inline:3rem} .px-14{padding-inline:3.5rem} .px-16{padding-inline:4rem} .px-px{padding-inline:1px} .py-0{padding-block:0rem} .py-0\.5{padding-block:0.125rem} .py-1{padding-block:0.25rem} .py-1\.5{padding-block:0.375rem} .py-2{padding-block:0.5rem} .py-2\.5{padding-block:0.625rem} .py-3{padding-block:0.75rem} .py-3\.5{padding-block:0.875rem} .py-4{padding-block:1rem} .py-5{padding-block:1.25rem} .py-6{padding-block:1.5rem} .py-7{padding-block:1.75rem} .py-8{padding-block:2rem} .py-10{padding-block:2.5rem} .py-11{padding-block:2.75rem} .py-12{padding-block:3rem} .py-14{padding-block:3.5rem} .py-16{padding-block:4rem} .py-px{padding-block:1px} .p-0{padding:0rem} .p-0\.5{padding:0.125rem} .p-1{padding:0.25rem} .p-1\.5{padding:0.375rem} .p-2{padding:0.5rem} .p-2\.5{padding:0.625rem} .p-3{padding:0.75rem} .p-3\.5{padding:0.875rem} .p-4{padding:1rem} .p-5{padding:1.25rem} .p-6{padding:1.5rem} .p-7{padding:1.75rem} .p-8{padding:2rem} .p-10{padding:2.5rem} .p-11{padding:2.75rem} .p-12{padding:3rem} .p-14{padding:3.5rem} .p-16{padding:4rem} .p-px{padding:1px} .gap-1{gap:0.25rem} .gap-1\.5{gap:0.375rem} .gap-2{gap:0.5rem} .gap-3{gap:0.75rem} .gap-4{gap:1rem} .gap-6{gap:1.5rem} .space-y-0\.5 > * + *{margin-top:0.125rem} .space-y-1 > * + *{margin-top:0.25rem} .space-y-1\.5 > * + *{margin-top:0.375rem} .space-y-2 > * + *{margin-top:0.5rem} .space-y-3 > * + *{margin-top:0.75rem} .space-y-4 > * + *{margin-top:1rem} .space-y-8 > * + *{margin-top:2rem} .w-1{width:0.25rem} .h-1{height:0.25rem} .w-1\.5{width:0.375rem} .h-1\.5{height:0.375rem} .w-3\.5{width:0.875rem} .h-3\.5{height:0.875rem} .w-4{width:1rem} .h-4{height:1rem} .w-5{width:1.25rem} .h-5{height:1.25rem} .w-6{width:1.5rem} .h-6{height:1.5rem} .w-7{width:1.75rem} .h-7{height:1.75rem} .w-8{width:2rem} .h-8{height:2rem} .w-10{width:2.5rem} .h-10{height:2.5rem} .w-12{width:3rem} .h-12{height:3rem} .w-14{width:3.5rem} .h-14{height:3.5rem} .w-72{width:18rem} .h-72{height:18rem} .w-80{width:20rem} .h-80{height:20rem} .w-36{width:9rem} .w-64{width:16rem} .w-1\/3{width:33.333333%} .h-16{height:4rem} .h-screen{height:100vh} .w-full{width:100%} .h-full{height:100%} .w-auto{width:auto} .h-px{height:1px} .min-w-0{min-width:0} .min-h-screen{min-height:100vh} .min-w-\[120px\]{min-width:120px} .min-w-\[160px\]{min-width:160px} .min-w-\[200px\]{min-width:200px} .min-h-\[60vh\]{min-height:60vh} .min-h-\[80vh\]{min-height:80vh} .max-w-sm{max-width:24rem} .max-w-lg{max-width:32rem} .max-w-2xl{max-width:42rem} .max-w-3xl{max-width:48rem} .max-w-4xl{max-width:56rem} .max-w-5xl{max-width:64rem} .max-w-6xl{max-width:72rem} .max-w-7xl{max-width:80rem} .text-xs{font-size:.75rem;line-height:calc(1/.75)} .text-sm{font-size:.875rem;line-height:calc(1.25/.875)} .text-base{font-size:1rem;line-height:1.5} .text-lg{font-size:1.125rem;line-height:calc(1.75/1.125)} .text-xl{font-size:1.25rem;line-height:calc(1.75/1.25)} .text-2xl{font-size:1.5rem;line-height:calc(2/1.5)} .text-3xl{font-size:1.875rem;line-height:calc(2.25/1.875)} .text-4xl{font-size:2.25rem;line-height:calc(2.5/2.25)} .text-5xl{font-size:3rem;line-height:1} .text-8xl{font-size:6rem;line-height:1} .font-normal{font-weight:400} .font-medium{font-weight:500} .font-semibold{font-weight:600} .font-bold{font-weight:700} .font-mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace} .italic{font-style:italic} .uppercase{text-transform:uppercase} .normal-case{text-transform:none} .tracking-wide{letter-spacing:.025em} .tracking-widest{letter-spacing:.1em} .text-left{text-align:left} .text-center{text-align:center} .text-right{text-align:right} .underline{text-decoration:underline} .tabular-nums{font-variant-numeric:tabular-nums} .truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .whitespace-nowrap{white-space:nowrap} .whitespace-pre{white-space:pre} .leading-tight{line-height:1.25} .leading-relaxed{line-height:1.625} .select-none{user-select:none} .select-all{user-select:all} .line-through{text-decoration:line-through} .not-italic{font-style:normal} .break-all{word-break:break-all} .whitespace-pre-wrap{white-space:pre-wrap} .align-middle{vertical-align:middle} .object-contain{object-fit:contain} .list-disc{list-style-type:disc} .list-inside{list-style-position:inside} .text-primary{color:var(--text-primary)} .text-secondary{color:var(--text-secondary)} .text-body{color:var(--text-body)} .text-muted{color:var(--text-muted)} .text-faint{color:var(--text-faint)} .text-icon{color:var(--text-icon)} .text-danger{color:var(--danger-text)} .text-success{color:var(--success-text)} .text-warning{color:var(--warning-text)} .text-on-accent{color:var(--btn-fg)} .bg-page{background:var(--surface-page)} .bg-card{background:var(--surface-card)} .bg-inset{background:var(--surface-inset)} .bg-accent{background:var(--btn-bg)} .bg-white{background:#fff} .hover\:underline:hover{text-decoration:underline} .hover\:bg-inset:hover{background:var(--row-hover)} .hover\:text-primary:hover{color:var(--text-primary)} .hover\:text-body:hover{color:var(--text-body)} .hover\:text-danger:hover{color:var(--danger-text)} .rounded{border-radius:.25rem} .rounded-md{border-radius:.375rem} .rounded-lg{border-radius:.5rem} .rounded-xl{border-radius:.75rem} .rounded-2xl{border-radius:1rem} .rounded-full{border-radius:9999px} .border{border-width:1px;border-color:var(--surface-card-border)} .border-t{border-top-width:1px;border-color:var(--divider)} .border-b{border-bottom-width:1px;border-color:var(--divider)} .border-strong{border-color:var(--surface-card-border)} .border-muted{border-color:var(--divider)} .shadow-sm{box-shadow:var(--shadow-sm)} .shadow{box-shadow:var(--shadow)} .max-h-72{max-height:18rem} .max-h-80{max-height:20rem} .max-h-96{max-height:24rem} .transition-transform{transition-property:transform;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s} .transition-opacity{transition-property:opacity;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s} .duration-200{transition-duration:.2s} .duration-300{transition-duration:.3s} .ease-in-out{transition-timing-function:cubic-bezier(.4,0,.2,1)} .rotate-180{transform:rotate(180deg)} .translate-x-0{transform:translateX(0)} .translate-x-7{transform:translateX(1.75rem)} .-translate-x-full{transform:translateX(-100%)} .shadow-lg{box-shadow:0 10px 15px -3px rgb(0 0 0 / .1),0 4px 6px -4px rgb(0 0 0 / .1)} .overflow-hidden{overflow:hidden} .overflow-x-auto{overflow-x:auto} .overflow-y-auto{overflow-y:auto} .cursor-pointer{cursor:pointer} .cursor-default{cursor:default} .transition-colors{transition:var(--transition)} .transition{transition:var(--transition)} .opacity-0{opacity:0} .opacity-25{opacity:.25} .opacity-30{opacity:.3} .opacity-40{opacity:.4} .opacity-50{opacity:.5} .opacity-75{opacity:.75} .opacity-100{opacity:1} .cursor-not-allowed{cursor:not-allowed} .mt-auto{margin-top:auto} .flex-shrink-0{flex-shrink:0} .bg-transparent{background:transparent} .animate-spin{animation:spin 1s linear infinite} @keyframes spin{to{transform:rotate(360deg)}} .file\:border::file-selector-button{border-width:1px} .file\:border-0::file-selector-button{border:0} .file\:rounded::file-selector-button{border-radius:.25rem} .file\:rounded-lg::file-selector-button{border-radius:.5rem} .file\:cursor-pointer::file-selector-button{cursor:pointer} .file\:font-medium::file-selector-button{font-weight:500} .file\:text-xs::file-selector-button{font-size:.75rem} .file\:text-sm::file-selector-button{font-size:.875rem} .file\:mr-2::file-selector-button{margin-right:.5rem} .file\:mr-3::file-selector-button{margin-right:.75rem} .file\:px-2::file-selector-button{padding-inline:.5rem} .file\:px-3::file-selector-button{padding-inline:.75rem} .file\:py-1::file-selector-button{padding-block:.25rem} .file\:py-1\.5::file-selector-button{padding-block:.375rem} .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0} .first\:pt-0:first-child{padding-top:0} .last\:pb-0:last-child{padding-bottom:0} .disabled\:opacity-50:disabled{opacity:.5} .disabled\:cursor-not-allowed:disabled{cursor:not-allowed} .group:hover .group-hover\:opacity-40{opacity:.4} .group:hover .group-hover\:opacity-100{opacity:1} @media (min-width:640px){ .sm\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))} .sm\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))} .sm\:w-auto{width:auto} .sm\:text-5xl{font-size:3rem;line-height:1} } @media (min-width:768px){ .md\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))} .md\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))} .md\:flex{display:flex} .md\:hidden{display:none} } @media (min-width:1024px){ .lg\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))} .lg\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))} .lg\:hidden{display:none} .lg\:block{display:block} .lg\:flex{display:flex} .lg\:pl-64{padding-left:16rem} .lg\:pt-4{padding-top:1rem} } }