Spaces:
Sleeping
Sleeping
| /*! tailwindcss v4.3.2 | MIT License | https://tailwindcss.com */ | |
| @layer properties; | |
| @layer theme, base, components, utilities; | |
| @layer theme { | |
| :root, :host { | |
| --font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", | |
| "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; | |
| --font-mono: "JetBrains Mono", ui-monospace, "Consolas", monospace; | |
| --spacing: 0.25rem; | |
| --default-transition-duration: 150ms; | |
| --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); | |
| --default-font-family: var(--font-sans); | |
| --default-mono-font-family: var(--font-mono); | |
| --font-ui: "Inter", ui-sans-serif, system-ui, sans-serif; | |
| --font-display: "Space Grotesk", var(--font-ui); | |
| } | |
| } | |
| @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: -0.25em; | |
| } | |
| sup { | |
| top: -0.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)) { | |
| 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 ; | |
| } | |
| } | |
| @layer utilities { | |
| .invisible { | |
| visibility: hidden; | |
| } | |
| .visible { | |
| visibility: visible; | |
| } | |
| .visible\! { | |
| visibility: visible ; | |
| } | |
| .absolute { | |
| position: absolute; | |
| } | |
| .fixed { | |
| position: fixed; | |
| } | |
| .relative { | |
| position: relative; | |
| } | |
| .static { | |
| position: static; | |
| } | |
| .sticky { | |
| position: sticky; | |
| } | |
| .top-1 { | |
| top: var(--spacing); | |
| } | |
| .isolate { | |
| isolation: isolate; | |
| } | |
| .container { | |
| width: 100%; | |
| @media (width >= 40rem) { | |
| max-width: 40rem; | |
| } | |
| @media (width >= 48rem) { | |
| max-width: 48rem; | |
| } | |
| @media (width >= 64rem) { | |
| max-width: 64rem; | |
| } | |
| @media (width >= 80rem) { | |
| max-width: 80rem; | |
| } | |
| @media (width >= 96rem) { | |
| max-width: 96rem; | |
| } | |
| } | |
| .m-125 { | |
| margin: calc(var(--spacing) * 125); | |
| } | |
| .m-185 { | |
| margin: calc(var(--spacing) * 185); | |
| } | |
| .m-214 { | |
| margin: calc(var(--spacing) * 214); | |
| } | |
| .m-374 { | |
| margin: calc(var(--spacing) * 374); | |
| } | |
| .m-571 { | |
| margin: calc(var(--spacing) * 571); | |
| } | |
| .m-750 { | |
| margin: calc(var(--spacing) * 750); | |
| } | |
| .m-812 { | |
| margin: calc(var(--spacing) * 812); | |
| } | |
| .block { | |
| display: block; | |
| } | |
| .contents { | |
| display: contents; | |
| } | |
| .grid { | |
| display: grid; | |
| } | |
| .hidden { | |
| display: none; | |
| } | |
| .inline { | |
| display: inline; | |
| } | |
| .table { | |
| display: table; | |
| } | |
| .h-18 { | |
| height: calc(var(--spacing) * 18); | |
| } | |
| .transform { | |
| transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,); | |
| } | |
| .cursor-col-resize { | |
| cursor: col-resize; | |
| } | |
| .cursor-crosshair { | |
| cursor: crosshair; | |
| } | |
| .cursor-default { | |
| cursor: default; | |
| } | |
| .cursor-e-resize { | |
| cursor: e-resize; | |
| } | |
| .cursor-ew-resize { | |
| cursor: ew-resize; | |
| } | |
| .cursor-grab { | |
| cursor: grab; | |
| } | |
| .cursor-move { | |
| cursor: move; | |
| } | |
| .cursor-n-resize { | |
| cursor: n-resize; | |
| } | |
| .cursor-ne-resize { | |
| cursor: ne-resize; | |
| } | |
| .cursor-ns-resize { | |
| cursor: ns-resize; | |
| } | |
| .cursor-nw-resize { | |
| cursor: nw-resize; | |
| } | |
| .cursor-pointer { | |
| cursor: pointer; | |
| } | |
| .cursor-row-resize { | |
| cursor: row-resize; | |
| } | |
| .cursor-s-resize { | |
| cursor: s-resize; | |
| } | |
| .cursor-se-resize { | |
| cursor: se-resize; | |
| } | |
| .cursor-sw-resize { | |
| cursor: sw-resize; | |
| } | |
| .cursor-w-resize { | |
| cursor: w-resize; | |
| } | |
| .resize { | |
| resize: both; | |
| } | |
| .text-justify { | |
| text-align: justify; | |
| } | |
| .font-mono { | |
| font-family: var(--font-mono); | |
| } | |
| .capitalize { | |
| text-transform: capitalize; | |
| } | |
| .lowercase { | |
| text-transform: lowercase; | |
| } | |
| .uppercase { | |
| text-transform: uppercase; | |
| } | |
| .italic { | |
| font-style: italic; | |
| } | |
| .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,); | |
| } | |
| .line-through { | |
| text-decoration-line: line-through; | |
| } | |
| .overline { | |
| text-decoration-line: overline; | |
| } | |
| .underline { | |
| text-decoration-line: underline; | |
| } | |
| .shadow { | |
| --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 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,); | |
| } | |
| .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,); | |
| } | |
| .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)); | |
| } | |
| } | |
| :root, :root[data-theme="dark"] { | |
| --bg: #0a0d14; | |
| --bg-glow: radial-gradient(1200px 500px at 70% -10%, rgba(79, 70, 229, 0.14), transparent 60%); | |
| --surface: #10141d; | |
| --surface-2: #171c28; | |
| --surface-3: #1e2432; | |
| --border: #242b3c; | |
| --border-strong: #333c52; | |
| --text: #e8ebf3; | |
| --text-muted: #96a0b5; | |
| --accent: #7c7ff2; | |
| --accent-strong: #5b54ec; | |
| --accent-soft: rgba(124, 127, 242, 0.14); | |
| --danger: #f26d7c; | |
| --danger-soft: rgba(242, 109, 124, 0.12); | |
| --ok: #58d6a3; | |
| --warn: #eec26a; | |
| --plot-grid: rgba(150, 160, 181, 0.16); | |
| --shadow: 0 10px 30px rgba(0, 0, 0, 0.35); | |
| color-scheme: dark; | |
| } | |
| :root[data-theme="light"] { | |
| --bg: #f6f7fb; | |
| --bg-glow: radial-gradient(1200px 500px at 70% -10%, rgba(91, 84, 236, 0.08), transparent 60%); | |
| --surface: #ffffff; | |
| --surface-2: #f0f2f8; | |
| --surface-3: #e7eaf3; | |
| --border: #dfe3ee; | |
| --border-strong: #c8cede; | |
| --text: #171c2b; | |
| --text-muted: #5c667e; | |
| --accent: #5b54ec; | |
| --accent-strong: #4f46e5; | |
| --accent-soft: rgba(91, 84, 236, 0.1); | |
| --danger: #d43f52; | |
| --danger-soft: rgba(212, 63, 82, 0.1); | |
| --ok: #12925f; | |
| --warn: #a97b16; | |
| --plot-grid: rgba(92, 102, 126, 0.18); | |
| --shadow: 0 8px 24px rgba(23, 28, 43, 0.08); | |
| color-scheme: light; | |
| } | |
| html, body { | |
| height: 100%; | |
| } | |
| body { | |
| background: var(--bg); | |
| background-image: var(--bg-glow); | |
| background-attachment: fixed; | |
| color: var(--text); | |
| font-family: var(--font-ui); | |
| font-size: 15px; | |
| line-height: 1.55; | |
| -webkit-font-smoothing: antialiased; | |
| } | |
| ::selection { | |
| background: var(--accent-soft); | |
| } | |
| .boot-splash { | |
| display: grid; | |
| place-items: center; | |
| gap: 0.75rem; | |
| min-height: 70vh; | |
| color: var(--text-muted); | |
| } | |
| #app { | |
| min-height: 100%; | |
| } | |
| .topbar { | |
| position: sticky; | |
| top: 0; | |
| z-index: 40; | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| gap: 1rem; | |
| padding: 0.65rem 1.25rem; | |
| background: var(--bg); | |
| @supports (color: color-mix(in lab, red, red)) { | |
| background: color-mix(in srgb, var(--bg) 82%, transparent); | |
| } | |
| backdrop-filter: blur(14px); | |
| border-bottom: 1px solid var(--border); | |
| } | |
| .brand { | |
| display: flex; | |
| align-items: baseline; | |
| gap: 0.6rem; | |
| } | |
| .brand-mark { | |
| display: inline-grid; | |
| place-items: center; | |
| width: 2rem; | |
| height: 2rem; | |
| border-radius: 0.55rem; | |
| background: linear-gradient(135deg, var(--accent-strong), #8a4fe5); | |
| color: #fff; | |
| font-family: var(--font-display); | |
| font-weight: 700; | |
| font-size: 1.15rem; | |
| align-self: center; | |
| box-shadow: 0 4px 14px rgba(91, 84, 236, 0.35); | |
| } | |
| .brand-name { | |
| font-family: var(--font-display); | |
| font-weight: 700; | |
| font-size: 1.25rem; | |
| letter-spacing: 0.01em; | |
| } | |
| .brand-sub { | |
| color: var(--text-muted); | |
| font-size: 0.8rem; | |
| letter-spacing: 0.04em; | |
| } | |
| .topbar-right { | |
| display: flex; | |
| align-items: center; | |
| gap: 0.6rem; | |
| } | |
| .model-pill { | |
| border: 1px solid var(--border); | |
| background: var(--surface-2); | |
| color: var(--text-muted); | |
| border-radius: 999px; | |
| padding: 0.3rem 0.85rem; | |
| font-size: 0.78rem; | |
| cursor: pointer; | |
| transition: border-color 0.15s, color 0.15s; | |
| max-width: 20rem; | |
| overflow: hidden; | |
| text-overflow: ellipsis; | |
| white-space: nowrap; | |
| } | |
| .model-pill.is-loaded { | |
| color: var(--ok); | |
| border-color: var(--ok); | |
| @supports (color: color-mix(in lab, red, red)) { | |
| border-color: color-mix(in srgb, var(--ok) 40%, var(--border)); | |
| } | |
| } | |
| .model-pill:hover { | |
| border-color: var(--accent); | |
| color: var(--accent); | |
| } | |
| .icon-btn { | |
| border: 1px solid var(--border); | |
| background: var(--surface-2); | |
| color: var(--text-muted); | |
| width: 2rem; | |
| height: 2rem; | |
| border-radius: 0.55rem; | |
| cursor: pointer; | |
| font-size: 0.95rem; | |
| } | |
| .icon-btn:hover { | |
| color: var(--text); | |
| border-color: var(--border-strong); | |
| } | |
| .auth-slot { | |
| display: flex; | |
| align-items: center; | |
| } | |
| .auth-user { | |
| display: flex; | |
| align-items: center; | |
| gap: 0.5rem; | |
| } | |
| .auth-avatar { | |
| width: 1.7rem; | |
| height: 1.7rem; | |
| border-radius: 50%; | |
| border: 1px solid var(--border-strong); | |
| } | |
| .auth-name { | |
| font-size: 0.85rem; | |
| color: var(--text-muted); | |
| } | |
| .body-grid { | |
| display: grid; | |
| grid-template-columns: 12.5rem minmax(0, 1fr); | |
| gap: 1.25rem; | |
| max-width: 100rem; | |
| margin: 0 auto; | |
| padding: 1.25rem; | |
| } | |
| .nav-rail { | |
| position: sticky; | |
| top: 4.4rem; | |
| align-self: start; | |
| display: flex; | |
| flex-direction: column; | |
| gap: 0.25rem; | |
| } | |
| .nav-item { | |
| display: flex; | |
| align-items: center; | |
| gap: 0.7rem; | |
| padding: 0.55rem 0.85rem; | |
| border: 1px solid transparent; | |
| border-radius: 0.65rem; | |
| background: transparent; | |
| color: var(--text-muted); | |
| font-size: 0.92rem; | |
| font-weight: 500; | |
| cursor: pointer; | |
| text-align: left; | |
| transition: background 0.15s, color 0.15s; | |
| } | |
| .nav-item:hover { | |
| background: var(--surface-2); | |
| color: var(--text); | |
| } | |
| .nav-item.is-active { | |
| background: var(--accent-soft); | |
| border-color: var(--accent); | |
| @supports (color: color-mix(in lab, red, red)) { | |
| border-color: color-mix(in srgb, var(--accent) 35%, transparent); | |
| } | |
| color: var(--accent); | |
| } | |
| .nav-icon { | |
| width: 1.1rem; | |
| text-align: center; | |
| opacity: 0.9; | |
| } | |
| .main { | |
| min-width: 0; | |
| } | |
| .view[hidden] { | |
| display: none; | |
| } | |
| .view-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(26rem, 1fr)); | |
| gap: 1.25rem; | |
| align-items: start; | |
| } | |
| .lens-grid { | |
| grid-template-columns: minmax(24rem, 3fr) minmax(22rem, 2fr); | |
| } | |
| .card { | |
| background: var(--surface); | |
| border: 1px solid var(--border); | |
| border-radius: 1rem; | |
| padding: 1.35rem; | |
| box-shadow: var(--shadow); | |
| display: flex; | |
| flex-direction: column; | |
| gap: 0.9rem; | |
| min-width: 0; | |
| } | |
| .card-full { | |
| grid-column: 1 / -1; | |
| } | |
| .card-title { | |
| font-family: var(--font-display); | |
| font-size: 1.05rem; | |
| font-weight: 600; | |
| letter-spacing: 0.01em; | |
| } | |
| .card-sub { | |
| color: var(--text-muted); | |
| font-size: 0.86rem; | |
| margin-top: -0.5rem; | |
| } | |
| .mini-title { | |
| font-family: var(--font-display); | |
| font-size: 0.85rem; | |
| font-weight: 600; | |
| text-transform: uppercase; | |
| letter-spacing: 0.08em; | |
| color: var(--text-muted); | |
| margin-top: 0.35rem; | |
| } | |
| .stack { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 0.85rem; | |
| min-width: 0; | |
| } | |
| .check-stack { | |
| gap: 0.45rem; | |
| justify-content: center; | |
| } | |
| .grid-2 { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); | |
| gap: 0.85rem; | |
| align-items: end; | |
| } | |
| .row-wrap { | |
| display: flex; | |
| flex-wrap: wrap; | |
| gap: 0.85rem; | |
| align-items: end; | |
| } | |
| .row-end { | |
| justify-content: space-between; | |
| } | |
| .row-between { | |
| justify-content: space-between; | |
| align-items: center; | |
| } | |
| .btn-row { | |
| display: flex; | |
| flex-wrap: wrap; | |
| gap: 0.6rem; | |
| align-items: center; | |
| } | |
| .field { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 0.35rem; | |
| min-width: 0; | |
| } | |
| .field-label { | |
| font-size: 0.72rem; | |
| font-weight: 600; | |
| text-transform: uppercase; | |
| letter-spacing: 0.08em; | |
| color: var(--text-muted); | |
| } | |
| .field-hint { | |
| font-size: 0.8rem; | |
| color: var(--text-muted); | |
| line-height: 1.45; | |
| } | |
| .input { | |
| width: 100%; | |
| background: var(--surface-2); | |
| border: 1px solid var(--border); | |
| border-radius: 0.6rem; | |
| padding: 0.5rem 0.7rem; | |
| color: var(--text); | |
| font-size: 0.92rem; | |
| font-family: inherit; | |
| transition: border-color 0.15s, box-shadow 0.15s; | |
| } | |
| textarea.input { | |
| resize: vertical; | |
| line-height: 1.5; | |
| } | |
| .input:focus-visible { | |
| outline: none; | |
| border-color: var(--accent); | |
| box-shadow: 0 0 0 3px var(--accent-soft); | |
| } | |
| .input-number { | |
| width: 7.5rem; | |
| } | |
| .file-input { | |
| font-size: 0.85rem; | |
| color: var(--text-muted); | |
| } | |
| .file-input::file-selector-button { | |
| margin-right: 0.75rem; | |
| border: 1px solid var(--border-strong); | |
| background: var(--surface-2); | |
| color: var(--text); | |
| border-radius: 0.5rem; | |
| padding: 0.4rem 0.8rem; | |
| cursor: pointer; | |
| font-family: inherit; | |
| } | |
| .check-field { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 0.55rem; | |
| font-size: 0.9rem; | |
| cursor: pointer; | |
| color: var(--text); | |
| } | |
| .checkbox { | |
| appearance: none; | |
| width: 1.05rem; | |
| height: 1.05rem; | |
| border: 1px solid var(--border-strong); | |
| border-radius: 0.3rem; | |
| background: var(--surface-2); | |
| cursor: pointer; | |
| position: relative; | |
| flex: none; | |
| } | |
| .checkbox:checked { | |
| background: var(--accent-strong); | |
| border-color: var(--accent-strong); | |
| } | |
| .checkbox:checked::after { | |
| content: ""; | |
| position: absolute; | |
| inset: 0.12rem 0.3rem 0.28rem; | |
| border: solid #fff; | |
| border-width: 0 2px 2px 0; | |
| transform: rotate(45deg); | |
| } | |
| .seg { | |
| display: inline-flex; | |
| flex-wrap: wrap; | |
| background: var(--surface-2); | |
| border: 1px solid var(--border); | |
| border-radius: 0.6rem; | |
| padding: 0.18rem; | |
| gap: 0.18rem; | |
| width: fit-content; | |
| max-width: 100%; | |
| } | |
| .seg-item { | |
| position: relative; | |
| display: inline-flex; | |
| } | |
| .seg-item input { | |
| position: absolute; | |
| opacity: 0; | |
| pointer-events: none; | |
| } | |
| .seg-item span { | |
| display: inline-block; | |
| padding: 0.32rem 0.75rem; | |
| border-radius: 0.45rem; | |
| font-size: 0.85rem; | |
| color: var(--text-muted); | |
| cursor: pointer; | |
| white-space: nowrap; | |
| transition: background 0.12s, color 0.12s; | |
| } | |
| .seg-sm .seg-item span { | |
| padding: 0.22rem 0.6rem; | |
| font-size: 0.8rem; | |
| } | |
| .seg-item input:checked + span { | |
| background: var(--surface); | |
| color: var(--text); | |
| box-shadow: 0 1px 4px rgba(0,0,0,0.25); | |
| font-weight: 500; | |
| } | |
| .seg-item input:focus-visible + span { | |
| outline: 2px solid var(--accent); | |
| outline-offset: 1px; | |
| } | |
| .seg.is-disabled { | |
| opacity: 0.5; | |
| pointer-events: none; | |
| } | |
| .slider-wrap { | |
| display: flex; | |
| align-items: center; | |
| gap: 0.7rem; | |
| min-height: 2.1rem; | |
| } | |
| .slider-wrap.is-disabled { | |
| opacity: 0.45; | |
| } | |
| .slider { | |
| flex: 1; | |
| accent-color: var(--accent-strong); | |
| min-width: 6rem; | |
| } | |
| .slider-value { | |
| font-size: 0.82rem; | |
| color: var(--text-muted); | |
| min-width: 2.6rem; | |
| text-align: right; | |
| } | |
| .btn { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 0.45rem; | |
| border-radius: 0.6rem; | |
| border: 1px solid transparent; | |
| font-size: 0.9rem; | |
| font-weight: 500; | |
| font-family: inherit; | |
| padding: 0.5rem 1rem; | |
| cursor: pointer; | |
| transition: filter 0.12s, background 0.12s, border-color 0.12s; | |
| } | |
| .btn:disabled { | |
| opacity: 0.45; | |
| cursor: not-allowed; | |
| } | |
| .btn-sm { | |
| padding: 0.3rem 0.7rem; | |
| font-size: 0.8rem; | |
| } | |
| .btn-primary { | |
| background: linear-gradient(135deg, var(--accent-strong), #7a4bd6); | |
| color: #fff; | |
| box-shadow: 0 4px 14px rgba(91, 84, 236, 0.3); | |
| } | |
| .btn-primary:not(:disabled):hover { | |
| filter: brightness(1.1); | |
| } | |
| .btn-secondary { | |
| background: var(--surface-2); | |
| border-color: var(--border-strong); | |
| color: var(--text); | |
| } | |
| .btn-secondary:not(:disabled):hover { | |
| border-color: var(--accent); | |
| color: var(--accent); | |
| } | |
| .btn-danger { | |
| background: var(--danger-soft); | |
| border-color: var(--danger); | |
| @supports (color: color-mix(in lab, red, red)) { | |
| border-color: color-mix(in srgb, var(--danger) 45%, transparent); | |
| } | |
| color: var(--danger); | |
| } | |
| .btn-danger:not(:disabled):hover { | |
| filter: brightness(1.12); | |
| } | |
| .btn-ghost { | |
| background: transparent; | |
| color: var(--text-muted); | |
| border-color: transparent; | |
| } | |
| .btn-ghost:not(:disabled):hover { | |
| color: var(--text); | |
| background: var(--surface-2); | |
| } | |
| .btn-chip { | |
| background: var(--surface-2); | |
| border-color: var(--border); | |
| color: var(--text-muted); | |
| border-radius: 999px; | |
| padding: 0.25rem 0.75rem; | |
| font-size: 0.78rem; | |
| font-family: var(--font-mono); | |
| } | |
| .btn-chip:not(:disabled):hover { | |
| color: var(--accent); | |
| border-color: var(--accent); | |
| } | |
| .btn-hf { | |
| background: #ffd21e; | |
| color: #1a1a1a; | |
| font-weight: 600; | |
| } | |
| .btn-hf:not(:disabled):hover { | |
| filter: brightness(1.05); | |
| } | |
| .panel-details { | |
| border: 1px solid var(--border); | |
| border-radius: 0.75rem; | |
| background: var(--surface-2); | |
| overflow: hidden; | |
| } | |
| .panel-details > summary { | |
| cursor: pointer; | |
| padding: 0.65rem 0.9rem; | |
| font-size: 0.88rem; | |
| font-weight: 600; | |
| color: var(--text-muted); | |
| list-style: none; | |
| user-select: none; | |
| } | |
| .panel-details > summary::before { | |
| content: "▸ "; | |
| color: var(--accent); | |
| } | |
| .panel-details[open] > summary::before { | |
| content: "▾ "; | |
| } | |
| .panel-details > summary:hover { | |
| color: var(--text); | |
| } | |
| .details-body { | |
| padding: 0.35rem 0.9rem 0.9rem; | |
| } | |
| .status-pane { | |
| background: var(--surface-2); | |
| border: 1px solid var(--border); | |
| border-radius: 0.6rem; | |
| padding: 0.6rem 0.8rem; | |
| font-family: var(--font-mono); | |
| font-size: 0.8rem; | |
| color: var(--text-muted); | |
| white-space: pre-wrap; | |
| word-break: break-word; | |
| margin: 0; | |
| } | |
| .status-pane.is-error { | |
| color: var(--danger); | |
| border-color: var(--danger); | |
| @supports (color: color-mix(in lab, red, red)) { | |
| border-color: color-mix(in srgb, var(--danger) 40%, var(--border)); | |
| } | |
| } | |
| .status-pane.is-busy { | |
| color: var(--accent); | |
| animation: pulse 1.6s ease-in-out infinite; | |
| } | |
| @keyframes pulse { | |
| 50% { | |
| opacity: 0.55; | |
| } | |
| } | |
| .output-wrap { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 0.35rem; | |
| } | |
| .output-head { | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| } | |
| .output-text { | |
| background: var(--surface-2); | |
| border: 1px solid var(--border); | |
| border-radius: 0.6rem; | |
| padding: 0.7rem 0.85rem; | |
| font-size: 0.9rem; | |
| line-height: 1.6; | |
| white-space: pre-wrap; | |
| word-break: break-word; | |
| margin: 0; | |
| max-height: 24rem; | |
| overflow: auto; | |
| } | |
| .json-pane { | |
| font-family: var(--font-mono); | |
| font-size: 0.78rem; | |
| } | |
| .table-scroll { | |
| overflow: auto; | |
| border: 1px solid var(--border); | |
| border-radius: 0.6rem; | |
| } | |
| .candidates-scroll { | |
| max-height: 24rem; | |
| } | |
| .table-scroll.is-disabled { | |
| opacity: 0.45; | |
| pointer-events: none; | |
| } | |
| .data-table { | |
| width: 100%; | |
| border-collapse: collapse; | |
| font-size: 0.85rem; | |
| } | |
| .data-table th { | |
| position: sticky; | |
| top: 0; | |
| background: var(--surface-3); | |
| text-align: left; | |
| font-size: 0.7rem; | |
| font-weight: 600; | |
| text-transform: uppercase; | |
| letter-spacing: 0.07em; | |
| color: var(--text-muted); | |
| padding: 0.5rem 0.75rem; | |
| z-index: 1; | |
| } | |
| .data-table td { | |
| padding: 0.42rem 0.75rem; | |
| border-top: 1px solid var(--border); | |
| } | |
| .data-table tr.is-preview td { | |
| background: var(--accent-soft); | |
| } | |
| .data-table tr.is-disabled-row td { | |
| opacity: 0.5; | |
| } | |
| .token-cell { | |
| white-space: pre; | |
| } | |
| .eos-cell { | |
| text-align: center; | |
| color: var(--warn); | |
| padding: 1rem ; | |
| } | |
| .pill-grid { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 0.6rem; | |
| } | |
| .pill { | |
| display: flex; | |
| align-items: center; | |
| gap: 0.7rem; | |
| background: var(--surface-2); | |
| border: 1px solid var(--border); | |
| border-radius: 0.6rem; | |
| padding: 0.45rem 0.8rem; | |
| } | |
| .pill-label { | |
| font-size: 0.68rem; | |
| font-weight: 600; | |
| text-transform: uppercase; | |
| letter-spacing: 0.08em; | |
| color: var(--text-muted); | |
| flex: none; | |
| } | |
| .pill-value { | |
| font-size: 0.85rem; | |
| overflow: hidden; | |
| text-overflow: ellipsis; | |
| white-space: nowrap; | |
| } | |
| .search-wrap { | |
| position: relative; | |
| } | |
| .search-results { | |
| position: absolute; | |
| top: calc(100% + 0.3rem); | |
| left: 0; | |
| right: 0; | |
| z-index: 30; | |
| background: var(--surface); | |
| border: 1px solid var(--border-strong); | |
| border-radius: 0.6rem; | |
| box-shadow: var(--shadow); | |
| overflow: hidden; | |
| max-height: 19rem; | |
| overflow-y: auto; | |
| } | |
| .search-item { | |
| display: flex; | |
| justify-content: space-between; | |
| gap: 1rem; | |
| width: 100%; | |
| padding: 0.5rem 0.8rem; | |
| background: transparent; | |
| border: 0; | |
| color: var(--text); | |
| font-size: 0.85rem; | |
| cursor: pointer; | |
| text-align: left; | |
| } | |
| .search-item:hover { | |
| background: var(--accent-soft); | |
| } | |
| .search-meta { | |
| color: var(--text-muted); | |
| font-size: 0.75rem; | |
| flex: none; | |
| } | |
| .chip-row { | |
| display: flex; | |
| flex-wrap: wrap; | |
| gap: 0.45rem; | |
| align-items: center; | |
| } | |
| .plot-host { | |
| min-height: 2rem; | |
| width: 100%; | |
| } | |
| .plot-host.has-plot { | |
| min-height: 18rem; | |
| } | |
| .plot-tall.has-plot { | |
| min-height: 24rem; | |
| } | |
| .lens-html-host { | |
| min-width: 0; | |
| font-size: 0.95rem; | |
| } | |
| .lens-html-host table { | |
| max-width: 100%; | |
| } | |
| .token-strip { | |
| display: flex; | |
| flex-wrap: wrap; | |
| gap: 0.25rem; | |
| max-height: 12rem; | |
| overflow: auto; | |
| padding: 0.4rem; | |
| background: var(--surface-2); | |
| border: 1px solid var(--border); | |
| border-radius: 0.6rem; | |
| min-height: 2.6rem; | |
| } | |
| .token-chip { | |
| font-family: var(--font-mono); | |
| font-size: 0.78rem; | |
| padding: 0.14rem 0.4rem; | |
| border-radius: 0.35rem; | |
| border: 1px solid var(--border); | |
| background: var(--surface); | |
| color: var(--text-muted); | |
| cursor: pointer; | |
| white-space: pre; | |
| transition: border-color 0.1s, color 0.1s; | |
| } | |
| .token-chip:hover { | |
| border-color: var(--accent); | |
| color: var(--text); | |
| } | |
| .token-chip.is-generated { | |
| border-style: dashed; | |
| } | |
| .token-chip.is-selected { | |
| background: var(--accent-soft); | |
| border-color: var(--accent); | |
| color: var(--accent); | |
| font-weight: 500; | |
| } | |
| .pinned-list { | |
| display: flex; | |
| flex-wrap: wrap; | |
| gap: 0.4rem; | |
| } | |
| .pinned-chip { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 0.4rem; | |
| font-size: 0.78rem; | |
| padding: 0.2rem 0.3rem 0.2rem 0.6rem; | |
| border-radius: 999px; | |
| border: 1px solid var(--border-strong); | |
| background: var(--surface-2); | |
| } | |
| .chip-x { | |
| border: 0; | |
| background: transparent; | |
| color: var(--text-muted); | |
| cursor: pointer; | |
| font-size: 0.95rem; | |
| line-height: 1; | |
| padding: 0 0.3rem; | |
| } | |
| .chip-x:hover { | |
| color: var(--danger); | |
| } | |
| .intervention-toolbar { | |
| display: flex; | |
| flex-wrap: wrap; | |
| gap: 0.5rem; | |
| align-items: center; | |
| } | |
| .layer-rail { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fill, minmax(2rem, 1fr)); | |
| gap: 0.25rem; | |
| max-height: 8rem; | |
| overflow: auto; | |
| padding: 0.4rem; | |
| background: var(--surface-2); | |
| border: 1px solid var(--border); | |
| border-radius: 0.6rem; | |
| } | |
| .layer-chip { | |
| min-width: 0; | |
| height: 1.65rem; | |
| padding: 0 0.25rem; | |
| border: 1px solid var(--border); | |
| border-radius: 0.35rem; | |
| background: var(--surface); | |
| color: var(--text-muted); | |
| font-family: var(--font-mono); | |
| font-size: 0.68rem; | |
| cursor: pointer; | |
| } | |
| .layer-chip:hover { | |
| border-color: var(--accent); | |
| color: var(--text); | |
| } | |
| .layer-chip.is-selected { | |
| background: var(--accent-soft); | |
| border-color: var(--accent); | |
| color: var(--accent); | |
| font-weight: 600; | |
| } | |
| .lens-cell { | |
| cursor: pointer; | |
| outline-offset: -2px; | |
| } | |
| .lens-cell:hover { | |
| outline: 2px solid var(--accent); | |
| } | |
| .iv-table-host { | |
| min-width: 0; | |
| } | |
| @media (max-width: 1180px) { | |
| .lens-grid { | |
| grid-template-columns: 1fr; | |
| } | |
| } | |
| @media (max-width: 860px) { | |
| .body-grid { | |
| grid-template-columns: 1fr; | |
| padding: 0.75rem; | |
| } | |
| .nav-rail { | |
| position: static; | |
| flex-direction: row; | |
| overflow-x: auto; | |
| padding-bottom: 0.25rem; | |
| } | |
| .nav-item { | |
| flex: none; | |
| } | |
| .brand-sub { | |
| display: none; | |
| } | |
| .view-grid { | |
| grid-template-columns: 1fr; | |
| } | |
| } | |
| @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-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-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-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; | |
| } | |
| @keyframes pulse { | |
| 50% { | |
| opacity: 0.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-rotate-x: initial; | |
| --tw-rotate-y: initial; | |
| --tw-rotate-z: initial; | |
| --tw-skew-x: initial; | |
| --tw-skew-y: initial; | |
| --tw-ordinal: initial; | |
| --tw-slashed-zero: initial; | |
| --tw-numeric-figure: initial; | |
| --tw-numeric-spacing: initial; | |
| --tw-numeric-fraction: initial; | |
| --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-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; | |
| } | |
| } | |
| } | |