@font-face { font-family: "Manrope"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/manrope-v20-latin-regular.woff2") format("woff2"); } @font-face { font-family: "Manrope"; font-style: normal; font-weight: 500; font-display: swap; src: url("/fonts/manrope-v20-latin-500.woff2") format("woff2"); } @font-face { font-family: "Manrope"; font-style: normal; font-weight: 600; font-display: swap; src: url("/fonts/manrope-v20-latin-600.woff2") format("woff2"); } @font-face { font-family: "Manrope"; font-style: normal; font-weight: 700; font-display: swap; src: url("/fonts/manrope-v20-latin-700.woff2") format("woff2"); } @font-face { font-family: "Space Grotesk"; font-style: normal; font-weight: 500 700; font-display: swap; src: url("/fonts/space-grotesk-v22-latin.woff2") format("woff2"); } @font-face { font-family: "Geist Mono"; font-style: normal; font-weight: 400 600; font-display: swap; src: url("/fonts/geist-mono-v6-latin.woff2") format("woff2"); } :root { --vs-sans: "Manrope", system-ui, sans-serif; --vs-mono: "Geist Mono", "JetBrains Mono", ui-monospace, monospace; --vs-display: "Space Grotesk", "Manrope", system-ui, sans-serif; --vs-bg-deep: #0f1117; --vs-bg: #131722; --vs-bg-tint: #181d29; --vs-on-accent: var(--vs-bg-deep); --vs-surface: #1d2330; --vs-surface-2: #242b3a; --vs-surface-3: #2b3445; --vs-hair: rgba(255, 255, 255, 0.05); --vs-hair-2: rgba(255, 255, 255, 0.08); --vs-hair-3: rgba(255, 255, 255, 0.03); --vs-text: #edf2fa; --vs-text-2: #b6c0d0; --vs-muted: #7f8ca3; --vs-faint: #76829b; --vs-accent: #7898bf; --vs-blue: #6399de; --vs-accent-deep: #5f7ea3; --vs-accent-soft: rgba(var(--vs-tint), 0.12); --vs-accent-glow: rgba(var(--vs-tint), 0.15); --vs-secondary: #7cc8a0; --vs-tint: 120, 152, 191; --vs-dot: 40, 60, 90; --vs-pie-base: var(--vs-accent); --vs-pie-1: var(--vs-pie-base); --vs-pie-2: hsl(from var(--vs-pie-base) calc(h + 180) s l); --vs-pie-3: hsl(from var(--vs-pie-base) calc(h + 90) s l); --vs-pie-4: hsl(from var(--vs-pie-base) calc(h + 270) s l); --vs-pie-5: hsl(from var(--vs-pie-base) calc(h + 45) s l); --vs-pie-6: hsl(from var(--vs-pie-base) calc(h + 225) s l); --vs-pie-7: hsl(from var(--vs-pie-base) calc(h + 135) s l); --vs-pie-8: hsl(from var(--vs-pie-base) calc(h + 315) s l); --vs-success: #7cc8a0; --vs-warning: #e1bb6b; --vs-danger: #d97d91; --vs-info: #8db7ff; --vs-spool-flange: #1c2535; --vs-spool-flange-stroke: #2c3a52; --vs-radius-sm: 8px; --vs-radius: 14px; --vs-radius-lg: 20px; --vs-gap: 18px; --vs-ease: cubic-bezier(0.22, 0.61, 0.36, 1); --vs-shadow-sm: 0 1px 0 rgba(255, 255, 255, 0.03) inset, 0 2px 6px rgba(0, 0, 0, 0.25); --vs-shadow: 0 1px 0 rgba(255, 255, 255, 0.04) inset, 0 8px 24px rgba(0, 0, 0, 0.3); --vs-shadow-lg: 0 1px 0 rgba(255, 255, 255, 0.05) inset, 0 20px 48px rgba(0, 0, 0, 0.38); --vs-st-storage-bg: #1a2a3a; --vs-st-storage-fg: #7aaacc; --vs-st-printing-bg: #2a3a1a; --vs-st-printing-fg: #7acc7a; --vs-st-drying-bg: #3a331a; --vs-st-drying-fg: #d9c46a; --vs-st-printdry-bg: #2f3a1a; --vs-st-printdry-fg: #b7cc6a; --vs-st-tostore-bg: #3a1f28; --vs-st-tostore-fg: #d98a9e; --vs-st-storage-bg-soft: rgba(18, 36, 58, 0.45); --vs-st-storage-fg-soft: rgba(126, 168, 200, 0.95); --vs-st-printing-bg-soft: rgba(22, 44, 18, 0.45); --vs-st-printing-fg-soft: rgba(118, 190, 118, 0.95); --vs-st-drying-bg-soft: rgba(50, 32, 14, 0.45); --vs-st-drying-fg-soft: rgba(205, 172, 112, 0.95); --vs-st-printdry-bg-soft: rgba(38, 44, 14, 0.45); --vs-st-printdry-fg-soft: rgba(185, 195, 115, 0.95); --vs-st-tostore-bg-soft: rgba(36, 18, 58, 0.45); --vs-st-tostore-fg-soft: rgba(176, 136, 210, 0.95); --vs-cond-sealed-bg: rgba(18, 40, 58, 0.55); --vs-cond-sealed-fg: #7fb2d9; --vs-cond-opened-bg: rgba(58, 40, 14, 0.55); --vs-cond-opened-fg: #d9a86a; --vs-cond-almost-bg: rgba(90, 46, 16, 0.6); --vs-cond-almost-fg: #f0b870; --vs-cond-depleted-bg: rgba(40, 40, 48, 0.55); --vs-cond-depleted-fg: #8a8aa0; --vs-ev-created-bg: #2d5a3d; --vs-ev-created-fg: #a8e6c0; --vs-ev-weight-bg: #2d4a6a; --vs-ev-weight-fg: #a8c8e6; --vs-ev-status-bg: #4a2d6a; --vs-ev-status-fg: #c8a8e6; --vs-ev-location-bg: #6a4a2d; --vs-ev-location-fg: #e6c8a8; --vs-ev-depleted-bg: #6a2d2d; --vs-ev-depleted-fg: #e6a8a8; --vs-ev-restored-bg: #2d5a5a; --vs-ev-restored-fg: #a8e6e6; --vs-ev-dried-bg: #3a2a1a; --vs-ev-dried-fg: #ccaa7a; --vs-ev-default-bg: #3a3a3a; --vs-ev-default-fg: #c0c0c0; --vs-badge-empty-bg: #3a3340; --vs-badge-empty-fg: #c8b8d6; --vs-badge-low-bg: #5a2424; --vs-badge-low-fg: #ffc9c9; --vs-badge-depleted-bg: #2c2c38; --vs-badge-depleted-fg: #9aa3b4; --vs-wpill-bg: rgba(22, 30, 42, 0.72); --vs-wpill-fg: rgba(105, 122, 142, 0.72); --vs-wpill-low-bg: rgba(32, 26, 42, 0.72); --vs-wpill-low-fg: rgba(118, 105, 138, 0.80); --vs-dry-active: #6cb6e3; --vs-dry-overdue: #e6a23c; } .mud-button-root { text-transform: none; letter-spacing: 0.01em; } :root { --mud-palette-primary: var(--vs-accent) !important; --mud-palette-primary-darken: var(--vs-accent-deep) !important; --mud-palette-primary-lighten: #9ab2cf !important; --mud-palette-primary-text: #ffffff !important; --mud-palette-secondary: var(--vs-secondary) !important; --mud-palette-secondary-darken: #4db898 !important; --mud-palette-secondary-lighten: #a8efda !important; --mud-palette-secondary-text: #0e1018 !important; --mud-palette-background: var(--vs-bg) !important; --mud-palette-background-gray: var(--vs-surface) !important; --mud-palette-surface: var(--vs-surface) !important; --mud-palette-drawer-background: var(--vs-bg) !important; --mud-palette-drawer-text: var(--vs-text) !important; --mud-palette-appbar-background: var(--vs-bg) !important; --mud-palette-appbar-text: var(--vs-accent) !important; --mud-palette-text-primary: var(--vs-text) !important; --mud-palette-text-secondary: var(--vs-text-2) !important; --mud-palette-action-default: var(--vs-text-2) !important; --mud-palette-action-disabled: var(--vs-faint) !important; --mud-palette-action-disabled-background: var(--vs-surface-2) !important; --mud-palette-divider: var(--vs-hair) !important; --mud-palette-divider-light: var(--vs-hair-3) !important; --mud-palette-table-lines: var(--vs-hair) !important; --mud-palette-table-striped: var(--vs-surface) !important; --mud-palette-table-hover: var(--vs-surface-2) !important; --mud-palette-lines-default: var(--vs-hair) !important; --mud-palette-lines-inputs: var(--vs-hair-2) !important; --mud-palette-success: var(--vs-success) !important; --mud-palette-warning: var(--vs-warning) !important; --mud-palette-error: var(--vs-danger) !important; --mud-palette-info: var(--vs-info) !important; --mud-palette-dark: var(--vs-bg) !important; --mud-palette-dark-text: var(--vs-text) !important; } html[data-mode="light"] { --vs-hair: rgba(22, 32, 52, 0.09); --vs-hair-2: rgba(22, 32, 52, 0.14); --vs-hair-3: rgba(22, 32, 52, 0.05); --vs-on-accent: #ffffff; --vs-success: #2e9d6e; --vs-warning: #b07d1f; --vs-danger: #c4485f; --vs-info: #2f6fd0; --vs-shadow-sm: 0 1px 2px rgba(22, 32, 52, 0.08); --vs-shadow: 0 1px 2px rgba(22, 32, 52, 0.05), 0 10px 26px rgba(22, 32, 52, 0.10); --vs-shadow-lg: 0 24px 50px rgba(22, 32, 52, 0.16); --vs-st-storage-bg: #e4edf7; --vs-st-storage-fg: #2d567c; --vs-st-printing-bg: #e3f1e2; --vs-st-printing-fg: #2c7233; --vs-st-drying-bg: #f4ecd5; --vs-st-drying-fg: #856312; --vs-st-printdry-bg: #eef3d9; --vs-st-printdry-fg: #5b6f1c; --vs-st-tostore-bg: #f7e2e9; --vs-st-tostore-fg: #98415c; --vs-st-storage-bg-soft: rgba(45, 86, 124, 0.10); --vs-st-storage-fg-soft: #2d567c; --vs-st-printing-bg-soft: rgba(44, 114, 51, 0.10); --vs-st-printing-fg-soft: #2c7233; --vs-st-drying-bg-soft: rgba(133, 99, 18, 0.12); --vs-st-drying-fg-soft: #856312; --vs-st-printdry-bg-soft: rgba(91, 111, 28, 0.13); --vs-st-printdry-fg-soft: #5b6f1c; --vs-st-tostore-bg-soft: rgba(152, 65, 92, 0.10); --vs-st-tostore-fg-soft: #98415c; --vs-cond-sealed-bg: rgba(45, 86, 124, 0.10); --vs-cond-sealed-fg: #2d567c; --vs-cond-opened-bg: rgba(150, 100, 30, 0.13); --vs-cond-opened-fg: #8a5a16; --vs-cond-almost-bg: rgba(170, 90, 20, 0.15); --vs-cond-almost-fg: #9a5510; --vs-cond-depleted-bg: rgba(70, 70, 90, 0.10); --vs-cond-depleted-fg: #565666; --vs-ev-created-bg: #dff0e4; --vs-ev-created-fg: #256b3f; --vs-ev-weight-bg: #dde9f5; --vs-ev-weight-fg: #2a5586; --vs-ev-status-bg: #ece0f5; --vs-ev-status-fg: #6a3f93; --vs-ev-location-bg: #f3e7d6; --vs-ev-location-fg: #875c2a; --vs-ev-depleted-bg: #f5dede; --vs-ev-depleted-fg: #993c3c; --vs-ev-restored-bg: #d9f0f0; --vs-ev-restored-fg: #246b6b; --vs-ev-dried-bg: #f1e7d5; --vs-ev-dried-fg: #7a5a23; --vs-ev-default-bg: #e8e8ee; --vs-ev-default-fg: #555566; --vs-badge-empty-bg: #ece4f0; --vs-badge-empty-fg: #6a5a78; --vs-badge-low-bg: #f7dcdc; --vs-badge-low-fg: #b03b3b; --vs-badge-depleted-bg: #e6e6ee; --vs-badge-depleted-fg: #5a6072; --vs-wpill-bg: rgba(var(--vs-dot), 0.07); --vs-wpill-fg: #69748a; --vs-wpill-low-bg: rgba(120, 60, 90, 0.08); --vs-wpill-low-fg: #8a5a72; --vs-dry-active: #2f74a8; --vs-dry-overdue: #b9721a; } html[data-mode="light"] { --vs-spool-flange: #aab0bb; --vs-spool-flange-stroke: #9097a3; } html[data-mode="light"] body { background-image: none; } html[data-mode="light"] .mud-button-outlined { background-color: var(--vs-surface-2); } html[data-mode="light"] .mud-button-outlined:hover { background-color: var(--vs-surface-3); border-color: var(--vs-accent); } html[data-mode="light"] .vs-nav-tabs, html[data-mode="light"] .vs-public-tabs { background: rgba(255, 255, 255, 0.62); border-color: var(--vs-hair-2); } html[data-mode="light"] .vs-nav-tab.is-active { background: var(--vs-accent-glow); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--vs-accent) 42%, transparent), 0 1px 2px rgba(20, 20, 30, 0.07); } html[data-theme="blush"] .vs-nav-tab.is-active { background: color-mix(in srgb, var(--vs-secondary) 22%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--vs-secondary) 44%, transparent), 0 1px 2px rgba(20, 20, 30, 0.07); } html[data-mode="light"] .vs-wizard-tile.is-selected { background: color-mix(in srgb, var(--vs-accent) 15%, var(--vs-surface)); border-color: var(--vs-accent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--vs-accent) 34%, transparent), 0 2px 10px rgba(20, 20, 30, 0.06); } html[data-mode="light"] .vs-wizard-tile.is-selected .vs-tile-check { color: var(--vs-accent) !important; } html[data-mode="light"] .vs-sd-weightpanel { background: rgba(var(--vs-dot), 0.05); } html[data-mode="light"] .vs-pegboard-card, html[data-mode="light"] .vs-widget-card { background-color: var(--vs-surface); background-image: linear-gradient(180deg, rgba(0, 0, 0, 0.015) 0%, transparent 40%, rgba(0, 0, 0, 0.03) 100%), radial-gradient(circle, rgba(var(--vs-dot), 0.07) 1.0px, rgba(var(--vs-dot), 0.035) 1.7px, transparent 1.7px); box-shadow: inset 0 0 0 1px var(--vs-hair), 0 1px 3px rgba(22, 32, 52, 0.05); } html[data-mode="light"] .vs-hero, html[data-mode="light"] .vs-stat-tile, html[data-mode="light"] .vs-maker, html[data-mode="light"] .vs-nextaction { background: var(--vs-surface); border-color: var(--vs-hair-2); } html[data-mode="light"] .vs-gallery-card { box-shadow: 0 1px 2px rgba(22, 32, 52, 0.06), 0 4px 14px rgba(22, 32, 52, 0.05), inset 0 0 0 1px var(--vs-hair) !important; } html[data-mode="light"] .vs-gallery-card .vs-gallery-cavity { box-shadow: inset 0 2px 8px rgba(22, 32, 52, 0.10) !important; } html[data-theme="light"] { --vs-bg-deep: #e7ecf3; --vs-bg: #f4f7fb; --vs-bg-tint: #eaeff7; --vs-surface: #ffffff; --vs-surface-2: #f1f4f9; --vs-surface-3: #e6ecf3; --vs-text: #1b2433; --vs-text-2: #455062; --vs-muted: #5b6678; --vs-faint: #6c7589; --vs-accent: #3f6396; --vs-blue: #2f6fd0; --vs-accent-deep: #2f4f7d; --vs-accent-soft: rgba(63, 99, 150, 0.12); --vs-accent-glow: rgba(63, 99, 150, 0.16); --vs-secondary: #2f9f74; } html[data-theme="blush"] { --vs-bg-deep: #f6dfe7; --vs-bg: #fdf3f6; --vs-bg-tint: #fbecf1; --vs-surface: #f1f6ef; --vs-surface-2: #eaf0e6; --vs-surface-3: #dee7d8; --vs-text: #3a2e33; --vs-text-2: #8e4f64; --vs-muted: #8a7079; --vs-faint: #9b818b; --vs-accent: #4d7555; --vs-blue: #5b94c4; --vs-accent-deep: #3e6045; --vs-accent-soft: rgba(110, 152, 124, 0.15); --vs-accent-glow: rgba(110, 152, 124, 0.20); --vs-secondary: #6aa3c9; --vs-pie-base: #c14e71; } html[data-theme="blush"] .vs-app-footer { background: linear-gradient(90deg, rgba(198, 216, 237, 0) 0%, rgba(198, 216, 237, 0.60) 13%, rgba(233, 227, 232, 0.60) 31%, rgba(239, 213, 224, 0.62) 50%, rgba(233, 227, 230, 0.60) 69%, rgba(205, 221, 200, 0.60) 87%, rgba(205, 221, 200, 0) 100%); } .vs-filter-search { background: var(--vs-surface-2); border: 1px solid var(--vs-hair-2); } html[data-theme="blush"] .vs-input, html[data-theme="blush"] .vs-search, html[data-theme="blush"] .vs-filter-search, html[data-theme="blush"] .mud-input-outlined, html[data-theme="blush"] .mud-input-filled { background-color: #e7f0fb; } html[data-theme="blush"] .vs-search, html[data-theme="blush"] .vs-filter-search { border-color: rgba(91, 148, 196, 0.40); } html[data-theme="blush"] .mud-input-outlined .mud-input-outlined-border { border-color: rgba(91, 148, 196, 0.40) !important; } html[data-mode="light"] .mud-list-item:hover { background-color: color-mix(in srgb, var(--vs-accent) 18%, var(--vs-surface)) !important; } html[data-theme="sepia"] { --vs-bg-deep: #c0a390; --vs-bg: #cdb1a0; --vs-bg-tint: #d6bcab; --vs-surface: #faf6f3; --vs-surface-2: #f3eae3; --vs-surface-3: #ebdfd7; --vs-text: #36241c; --vs-text-2: #543d2e; --vs-muted: #6b4f3e; --vs-faint: #856652; --vs-accent: #7a5240; --vs-blue: #8c7468; --vs-accent-deep: #5a3a2c; --vs-accent-soft: rgba(122, 82, 64, 0.10); --vs-accent-glow: rgba(122, 82, 64, 0.15); --vs-secondary: #aa8b7e; --vs-tint: 122, 82, 64; --vs-dot: 122, 82, 64; --vs-wpill-fg: #8a6c58; } html[data-theme="sage"] { --vs-bg-deep: #cfd9ba; --vs-bg: #dfe7cf; --vs-bg-tint: #d8e1c6; --vs-surface: #f0f4e6; --vs-surface-2: #e7eed9; --vs-surface-3: #d4ddc0; --vs-text: #2d3823; --vs-text-2: #4c5a3f; --vs-muted: #5e6e4d; --vs-faint: #6f7d5e; --vs-accent: #57713f; --vs-blue: #4f7a45; --vs-accent-deep: #455c33; --vs-accent-soft: rgba(87, 113, 63, 0.14); --vs-accent-glow: rgba(87, 113, 63, 0.18); --vs-secondary: #8a7a44; } html[data-theme="dim"] { --vs-bg-deep: #1c2129; --vs-bg: #232a35; --vs-bg-tint: #2a313d; --vs-surface: #2e3643; --vs-surface-2: #38414f; --vs-surface-3: #434d5d; --vs-text: #e6ebf2; --vs-text-2: #b3bccb; --vs-muted: #8b96a8; --vs-faint: #7d8799; --vs-accent: #88a6cc; --vs-blue: #7fb0ea; --vs-accent-deep: #6a89b0; --vs-accent-soft: rgba(136, 166, 204, 0.14); --vs-accent-glow: rgba(136, 166, 204, 0.16); --vs-secondary: #84d0aa; } html[data-theme="wine"] { --vs-bg-deep: #1e1420; --vs-bg: #241823; --vs-bg-tint: #2c1e2b; --vs-surface: #2e2030; --vs-surface-2: #382838; --vs-surface-3: #443447; --vs-text: #f0e3ea; --vs-text-2: #cbb3c2; --vs-muted: #a98ba0; --vs-faint: #997d92; --vs-accent: #d28aa6; --vs-blue: #cf7d9c; --vs-accent-deep: #b06a86; --vs-accent-soft: rgba(210, 138, 166, 0.15); --vs-accent-glow: rgba(210, 138, 166, 0.18); --vs-secondary: #c8a8e6; } html[data-theme="lavender"] { --vs-bg-deep: #1b1b2e; --vs-bg: #22223b; --vs-bg-tint: #2a2a45; --vs-surface: #32324f; --vs-surface-2: #3d3d5a; --vs-surface-3: #4a4e69; --vs-text: #f2e9e4; --vs-text-2: #d9cdd0; --vs-muted: #9a8c98; --vs-faint: #8b8291; --vs-accent: #c9ada7; --vs-blue: #7c80a8; --vs-accent-deep: #b39790; --vs-accent-soft: rgba(201, 173, 167, 0.15); --vs-accent-glow: rgba(201, 173, 167, 0.20); --vs-secondary: #a896a4; } html[data-theme="dim"] .vs-material-editor .vs-modal-actions .mud-button-filled-primary, html[data-theme="lavender"] .vs-material-editor .vs-modal-actions .mud-button-filled-primary { background-color: var(--vs-accent); color: var(--vs-bg-deep); } [data-density="compact"] { --vs-gap: 12px; } [data-density="comfortable"] { --vs-gap: 18px; } [data-density="roomy"] { --vs-gap: 26px; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { background: var(--vs-bg); background-image: radial-gradient( 1100px 550px at 78% -8%, rgba(100, 140, 200, 0.06), transparent 55% ), radial-gradient( 750px 480px at -8% 92%, rgba(80, 60, 150, 0.05), transparent 55% ); background-attachment: fixed; color: var(--vs-text); font-family: var(--vs-sans); font-size: 14px; line-height: 1.55; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; min-height: 100vh; } .vs-mono { font-family: var(--vs-mono); font-variant-numeric: tabular-nums; letter-spacing: 0.005em; } .vs-muted { color: var(--vs-muted); } .vs-app { min-height: 100vh; overflow-x: clip; } .vs-shell { display: flex; flex-direction: column; min-height: 100vh; max-width: 1720px; margin: 0 auto; padding: 0 28px; } .vs-sidebar { display: none; } .vs-topbar { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 28px; padding: 6px 0; position: sticky; top: 0; z-index: 20; background: linear-gradient(to bottom, var(--vs-bg) 70%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } .vs-topbar::after { content: ""; position: absolute; inset: auto 0 0 0; height: 1px; background: var(--vs-hair); } .vs-topbar-toggle { display: none !important; } .vs-masthead-brand { display: flex; align-items: center; gap: 10px; } .vs-masthead-title { font-family: var(--vs-display); font-size: 19px; font-weight: 700; letter-spacing: -0.01em; line-height: 1; color: var(--vs-text); } .vs-masthead-title em { font-style: normal; color: var(--vs-blue); font-weight: 700; } .vs-masthead-meta { display: none; } .vs-main { min-width: 0; flex: 1; display: flex; flex-direction: column; } .vs-nav-tabs { display: flex; align-items: center; gap: 4px; justify-self: center; white-space: nowrap; background: rgba(13, 16, 23, 0.80); border: 1px solid rgba(255, 255, 255, 0.048); border-radius: 999px; padding: 4px; } .vs-public-nav { display: flex; align-items: center; gap: 22px; justify-self: center; } .vs-public-nav-link { font-family: var(--vs-sans); font-size: 13px; font-weight: 500; color: var(--vs-text-2); text-decoration: none; transition: color 0.18s; } .vs-public-nav-link:hover { color: var(--vs-text); } @media (max-width: 600px) { .vs-public-nav { gap: 12px; } .vs-public-nav-link { font-size: 12px; } } .vs-public-tabs { display: flex; align-items: center; gap: 4px; justify-self: center; background: rgba(13, 16, 23, 0.80); border: 1px solid rgba(255, 255, 255, 0.048); border-radius: 999px; padding: 4px; max-width: 100%; overflow-x: auto; scrollbar-width: none; } .vs-public-tabs::-webkit-scrollbar { display: none; } .vs-nav-tab { background: transparent; border: 0; padding: 7px 16px; font-family: var(--vs-sans); font-size: 13px; font-weight: 500; color: var(--vs-text-2); cursor: pointer; letter-spacing: 0; text-transform: none; position: relative; border-radius: 999px; transition: color 0.15s, background 0.15s; } .vs-nav-tab { position: relative; overflow: hidden; } .vs-nav-tab:hover { color: var(--vs-text); background: var(--vs-surface-2); } .vs-nav-tab.is-active { color: var(--vs-text); background: var(--vs-accent-glow); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.11), inset 0 0 0 1px var(--vs-accent-soft), inset 0 -1px 0 rgba(0, 0, 0, 0.18); font-weight: 600; } .vs-nav-tab.is-active::after { display: none; } .vs-nav-tab.is-active::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background-image: linear-gradient( 120deg, transparent 38%, rgba(255, 255, 255, 0.10) 50%, transparent 62% ); background-size: 300% 100%; background-repeat: no-repeat; animation: vs-shimmer 3.4s ease-in-out infinite; } @keyframes vs-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -100% 0; } } .vs-topbar-actions { display: flex; gap: 8px; align-items: center; justify-self: end; } .vs-cmdk-trigger { display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 9px 0 11px; border-radius: 9px; background: var(--vs-surface-2); border: 1px solid var(--vs-hair-2); color: var(--vs-muted); font-size: 13px; cursor: pointer; transition: border-color 0.15s, color 0.15s, background 0.15s; } .vs-cmdk-trigger:hover { color: var(--vs-text-2); border-color: var(--vs-faint); } .vs-cmdk-trigger svg { flex-shrink: 0; } .vs-cmdk-trigger-label { padding-right: 4px; } .vs-cmdk-trigger-kbd { font: 600 11px/1 ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--vs-faint); border: 1px solid var(--vs-hair-2); border-radius: 5px; padding: 3px 5px; } @media (max-width: 760px) { .vs-cmdk-trigger { width: 34px; padding: 0; justify-content: center; gap: 0; } .vs-cmdk-trigger-label, .vs-cmdk-trigger-kbd { display: none; } } .vs-collector-overlay { position: fixed; inset: 0; z-index: 1400; display: flex; align-items: center; justify-content: center; padding: 24px; background: radial-gradient(circle at 50% 32%, var(--vs-surface) 0%, #0a0a0f 68%, #06060a 100%); animation: vs-collector-fade 0.18s ease-out; } @keyframes vs-collector-fade { from { opacity: 0; } to { opacity: 1; } } .vs-collector-card { display: flex; flex-direction: column; align-items: center; gap: clamp(14px, 3vh, 24px); cursor: default; max-width: 92vw; } .vs-collector-render svg { width: min(560px, 86vw, 62vh); height: auto; transform-origin: 50% 50%; animation: vs-collector-spin 26s linear infinite; } @keyframes vs-collector-spin { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { .vs-collector-render svg { animation: none; } } .vs-collector-close { position: absolute; top: 16px; right: 20px; background: none; border: none; color: #8a8aa0; font-size: 30px; line-height: 1; cursor: pointer; transition: color 0.15s; } .vs-collector-close:hover { color: #f0f0f5; } .vs-iconbtn { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 8px; background: var(--vs-surface); border: 1px solid var(--vs-hair); color: var(--vs-text-2); cursor: pointer; position: relative; transition: background 0.15s, color 0.15s, border-color 0.15s; } .vs-iconbtn:hover { color: var(--vs-text); background: var(--vs-surface-2); border-color: var(--vs-hair-2); } .vs-iconbtn-dot { position: absolute; top: 7px; right: 7px; width: 6px; height: 6px; border-radius: 50%; background: var(--vs-accent); box-shadow: 0 0 0 2px var(--vs-surface); } .vs-userchip-mini { display: flex; align-items: center; gap: 8px; } .vs-avatar { width: 32px; height: 32px; border-radius: 8px; background: linear-gradient( 135deg, var(--vs-accent) 0%, var(--vs-accent-deep) 100% ); color: #fff; display: grid; place-items: center; font-weight: 700; font-size: 13px; letter-spacing: 0; } .vs-content { padding: 16px 0 80px; } .vs-page { display: flex; flex-direction: column; gap: 28px; } .vs-page-head { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 24px; min-height: 56px; margin-bottom: 28px; padding-bottom: 0; border-bottom: 0; } .vs-page > .vs-page-head { margin-bottom: 0; } .vs-eyebrow { display: inline-flex; align-items: center; gap: 6px; font-family: var(--vs-sans); font-size: 12px; color: var(--vs-text-2); letter-spacing: 0; text-transform: none; font-weight: 500; } .vs-eyebrow::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--vs-accent); box-shadow: 0 0 0 3px var(--vs-accent-soft); } .vs-page-title { margin: 0; font-family: var(--vs-display); font-size: 28px; font-weight: 700; letter-spacing: -0.01em; line-height: 1.15; color: var(--vs-text); } .vs-page-title em { font-style: normal; color: var(--vs-text); font-weight: 700; } .vs-page-subtitle { font-size: 14px; color: var(--vs-text-2); margin-top: 6px; font-family: var(--vs-sans); max-width: 60ch; } .vs-page-aside { display: flex; align-items: center; gap: 10px; text-align: right; } .vs-page-aside-tile { background: var(--vs-surface); border: 1px solid var(--vs-hair); border-radius: var(--vs-radius); padding: 10px 16px; display: flex; flex-direction: column; align-items: flex-end; min-width: 120px; } .vs-page-aside-big { font-family: var(--vs-sans); font-size: 22px; font-weight: 700; letter-spacing: -0.02em; color: var(--vs-text); } .vs-page-aside-label { font-size: 10.5px; color: var(--vs-muted); letter-spacing: 0.06em; text-transform: uppercase; margin-top: 2px; font-weight: 500; } .vs-section-head { display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 16px; margin-bottom: 14px; padding-bottom: 0; border-bottom: 0; } .vs-section-title { margin: 0; font-family: var(--vs-sans); font-size: 16px; font-weight: 600; letter-spacing: -0.005em; color: var(--vs-text); display: flex; align-items: center; gap: 8px; } .vs-section-sub { font-size: 12px; font-family: var(--vs-sans); color: var(--vs-muted); margin-top: 3px; letter-spacing: 0; text-transform: none; font-weight: 400; } .vs-section-count { font-family: var(--vs-mono); font-size: 11px; color: var(--vs-muted); letter-spacing: 0.04em; text-transform: uppercase; background: var(--vs-surface-2); padding: 3px 8px; border-radius: 999px; } .vs-card { background: var(--vs-surface); border: 1px solid rgba(255, 255, 255, 0.04); border-radius: var(--vs-radius-lg); position: relative; box-shadow: var(--vs-shadow-sm), inset 0 1px 0 rgba(255, 255, 255, 0.04); } .vs-section { padding: 20px 22px; } .vs-two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; } .vs-warn-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--vs-danger); display: inline-block; box-shadow: 0 0 0 3px rgba(255, 92, 122, 0.15); } .vs-hero-shelf { position: relative; padding: 22px; background: linear-gradient( 180deg, var(--vs-surface) 0%, var(--vs-bg-tint) 100% ); border: 1px solid var(--vs-hair); border-radius: var(--vs-radius-lg); overflow: hidden; box-shadow: var(--vs-shadow); } .vs-hero-shelf-glow { position: absolute; inset: -50% -10% auto -10%; height: 180px; background: radial-gradient( ellipse at center, var(--vs-accent-soft), transparent 65% ); pointer-events: none; } .vs-hero-shelf-rail { position: relative; display: flex; align-items: flex-end; gap: 2px; padding: 12px 6px 4px; min-height: 110px; overflow-x: auto; scrollbar-width: thin; scrollbar-color: var(--vs-hair-2) transparent; } .vs-hero-shelf-spool { padding: 0 2px; } .vs-hero-shelf-plank, .vs-hero-shelf-bolt { display: none; } .vs-hero-cap { position: relative; display: flex; justify-content: space-between; align-items: center; } .vs-hero-rule { font-family: var(--vs-sans); font-size: 13px; color: var(--vs-text); font-weight: 600; letter-spacing: -0.005em; } .vs-hero-rule small { display: block; color: var(--vs-muted); font-size: 12px; font-weight: 400; margin-top: 2px; } .vs-stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; } .vs-stat { padding: 16px 18px; background: var(--vs-surface); border: 1px solid var(--vs-hair); border-radius: var(--vs-radius); position: relative; overflow: hidden; transition: border-color 0.15s, transform 0.15s; box-shadow: var(--vs-shadow-sm); cursor: default; } .vs-stat:hover { border-color: var(--vs-hair-2); transform: translateY(-1px); } .vs-stat-glow { position: absolute; inset: -40% -20% auto auto; width: 200px; height: 120px; border-radius: 50%; pointer-events: none; opacity: 0.5; } .vs-stat-value { font-family: var(--vs-sans); font-size: 32px; font-weight: 700; letter-spacing: -0.03em; line-height: 1; color: var(--vs-text); font-variant-numeric: tabular-nums; } .vs-stat-label { font-family: var(--vs-sans); font-size: 12px; letter-spacing: 0; text-transform: none; color: var(--vs-text-2); margin-top: 8px; font-weight: 500; } .vs-stat--primary .vs-stat-value { color: var(--vs-accent); } .vs-stat--primary .vs-stat-glow { background: radial-gradient(circle, var(--vs-accent-glow), transparent 60%); } .vs-stat--success .vs-stat-value { color: var(--vs-success); } .vs-stat--success .vs-stat-glow { background: radial-gradient( circle, rgba(124, 200, 160, 0.3), transparent 60% ); } .vs-stat--danger .vs-stat-value { color: var(--vs-danger); } .vs-stat--danger .vs-stat-glow { background: radial-gradient(circle, rgba(217, 125, 145, 0.3), transparent 60%); } .vs-stat--warning .vs-stat-value { color: var(--vs-warning); } .vs-stat--warning .vs-stat-glow { background: radial-gradient( circle, rgba(225, 187, 107, 0.25), transparent 60% ); } .vs-stat--muted .vs-stat-value { color: var(--vs-text); } .vs-btn { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; background: var(--vs-surface-2); border: 1px solid var(--vs-hair-2); border-radius: 8px; color: var(--vs-text); font-family: var(--vs-sans); font-size: 13px; font-weight: 500; letter-spacing: 0; text-transform: none; cursor: pointer; transition: background 0.12s, border-color 0.12s; } .vs-btn:hover { background: var(--vs-surface-3); border-color: var(--vs-hair-2); } .vs-btn--primary { background: var(--vs-accent); border-color: var(--vs-accent); color: var(--vs-on-accent); font-weight: 600; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.18) inset, 0 4px 14px rgba(255, 125, 63, 0.3); } .vs-btn--primary:hover { background: #ff8a52; border-color: #ff8a52; } .vs-btn--danger { background: transparent; border-color: color-mix(in srgb, var(--vs-danger, #c0564e) 55%, transparent); color: var(--vs-danger, #c0564e); font-weight: 600; } .vs-btn--danger:hover { background: color-mix(in srgb, var(--vs-danger, #c0564e) 14%, transparent); border-color: var(--vs-danger, #c0564e); } .vs-2fa-card { background: var(--vs-surface); border: 1px solid var(--vs-hair-2); border-radius: 12px; padding: 18px 20px; margin-bottom: 16px; } .vs-2fa-h2 { font-size: 15px; font-weight: 600; color: var(--vs-text); margin: 0 0 8px; } .vs-2fa-status { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 600; color: var(--vs-text); } .vs-2fa-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--vs-success, #4c9a6a); box-shadow: 0 0 0 3px color-mix(in srgb, var(--vs-success, #4c9a6a) 22%, transparent); } .vs-2fa-qr { width: 176px; height: 176px; padding: 10px; background: #fff; border-radius: 10px; } .vs-2fa-qr svg { width: 100%; height: 100%; display: block; } .vs-2fa-key { display: inline-block; font-family: var(--vs-mono, monospace); font-size: 14px; letter-spacing: 0.08em; color: var(--vs-text); background: var(--vs-bg-deep); border: 1px solid var(--vs-hair-2); border-radius: 6px; padding: 6px 10px; } .vs-2fa-input { width: 100%; padding: 10px 12px; font-size: 18px; letter-spacing: 0.22em; text-align: center; background: var(--vs-bg-deep); border: 1px solid var(--vs-hair-2); border-radius: 8px; color: var(--vs-text); } .vs-2fa-codes { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; background: var(--vs-bg-deep); border: 1px solid var(--vs-hair-2); border-radius: 8px; padding: 14px; } .vs-2fa-codes code { font-family: var(--vs-mono, monospace); font-size: 14px; letter-spacing: 0.06em; color: var(--vs-text); text-align: center; } .vs-2fa-alert { font-size: 13px; border-radius: 8px; padding: 10px 14px; margin-bottom: 16px; } .vs-2fa-alert--error { color: var(--vs-danger, #c0564e); background: color-mix(in srgb, var(--vs-danger, #c0564e) 12%, transparent); border: 1px solid color-mix(in srgb, var(--vs-danger, #c0564e) 40%, transparent); } .vs-bench-list { display: flex; flex-direction: column; gap: 2px; } .vs-bench-row { display: grid; grid-template-columns: 36px 1fr 80px 1fr 100px; gap: 14px; align-items: center; padding: 10px 12px; border-radius: 8px; border: 1px solid transparent; background: transparent; transition: background 0.12s, border-color 0.12s; } .vs-bench-row:hover { background: var(--vs-surface-2); border-color: var(--vs-hair); } .vs-bench-code { font-family: var(--vs-mono); font-size: 11px; color: var(--vs-muted); } .vs-bench-name { font-family: var(--vs-sans); font-size: 13px; color: var(--vs-text); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .vs-bench-weight { text-align: right; font-family: var(--vs-sans); font-size: 15px; color: var(--vs-text); font-weight: 600; font-variant-numeric: tabular-nums; } .vs-bench-weight-unit { color: var(--vs-muted); font-size: 11px; margin-left: 3px; font-weight: 500; } .vs-bench-pct { display: flex; align-items: center; gap: 10px; } .vs-bench-pct-track { flex: 1; height: 4px; border-radius: 999px; background: var(--vs-surface-3); overflow: hidden; } .vs-bench-pct-fill { height: 100%; background: var(--vs-text-2); border-radius: 999px; } .vs-bench-pct-fill.is-low { background: var(--vs-danger); } .vs-bench-pct span { font-family: var(--vs-mono); font-size: 11px; color: var(--vs-text); min-width: 36px; text-align: right; } .vs-status-pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 9px; border: 1px solid var(--vs-hair); border-radius: 999px; font-family: var(--vs-sans); font-size: 11px; font-weight: 500; letter-spacing: 0; text-transform: none; background: var(--vs-surface-2); color: var(--vs-text-2); cursor: pointer; transition: color 0.15s, background 0.15s, border-color 0.15s; } .vs-status-pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--vs-muted); } .vs-status-pill:hover { background: var(--vs-surface-3); color: var(--vs-text); } .vs-status--InStorage::before { background: var(--vs-success); box-shadow: 0 0 0 2px rgba(127, 231, 192, 0.18); } .vs-status--InUse::before, .vs-status--Loaded::before { background: var(--vs-accent); box-shadow: 0 0 0 2px var(--vs-accent-soft); } .vs-status--Drying::before { background: var(--vs-warning); box-shadow: 0 0 0 2px rgba(255, 206, 91, 0.18); } .vs-status--ToBeStored::before { background: var(--vs-info); box-shadow: 0 0 0 2px rgba(138, 180, 255, 0.18); } .vs-status--InStorage { color: var(--vs-success); border-color: rgba(127, 231, 192, 0.25); } .vs-status--InUse, .vs-status--Loaded { color: var(--vs-accent); border-color: rgba(232, 74, 90, 0.3); } .vs-status--Drying { color: var(--vs-warning); border-color: rgba(255, 206, 91, 0.25); } .vs-status--ToBeStored { color: var(--vs-info); border-color: rgba(138, 180, 255, 0.25); } .vs-statusmenu { position: relative; display: inline-block; } .vs-statusmenu-backdrop { position: fixed; inset: 0; z-index: 9; } .vs-statusmenu-pop { position: absolute; top: calc(100% + 6px); left: 0; display: flex; flex-direction: column; gap: 6px; padding: 8px; background: var(--vs-surface); border: 1px solid var(--vs-hair-2); border-radius: var(--vs-radius); box-shadow: var(--vs-shadow-lg); z-index: 10; } .vs-strand-list { display: flex; flex-direction: column; gap: 12px; } .vs-bar-row { display: grid; grid-template-columns: 110px 1fr 40px; align-items: center; gap: 14px; } .vs-bar-label { font-family: var(--vs-sans); font-size: 12px; color: var(--vs-text-2); letter-spacing: 0; text-transform: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; } .vs-bar-track { position: relative; height: 6px; background: var(--vs-surface-3); border-radius: 999px; overflow: hidden; } .vs-bar-fill { height: 100%; border-radius: 999px; } .vs-bar-fill--primary { background: linear-gradient(90deg, var(--vs-accent-deep), var(--vs-accent)); } .vs-bar-fill--secondary { background: linear-gradient(90deg, #3d8a72, var(--vs-secondary)); } .vs-bar-value { font-family: var(--vs-mono); font-size: 12px; color: var(--vs-text); text-align: right; font-weight: 500; } .vs-low-grid { display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); } .vs-low-card { display: flex; gap: 12px; align-items: center; padding: 10px 12px; background: var(--vs-surface-2); border: 1px solid var(--vs-hair); border-radius: var(--vs-radius); cursor: pointer; transition: background 0.12s, border-color 0.12s, transform 0.12s; } .vs-low-card:hover { background: var(--vs-surface-3); border-color: var(--vs-hair-2); transform: translateY(-1px); } .vs-low-code { font-family: var(--vs-mono); font-size: 10px; color: var(--vs-muted); margin-top: 2px; } .vs-low-name { font-family: var(--vs-sans); font-size: 13px; color: var(--vs-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; } .vs-low-remaining { font-size: 11px; margin-top: 4px; } .vs-toolbar { display: flex; flex-direction: column; gap: 12px; padding: 14px 16px; background: var(--vs-surface); border: 1px solid var(--vs-hair); border-radius: var(--vs-radius-lg); box-shadow: var(--vs-shadow-sm); } .vs-toolbar-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .vs-search { flex: 1; min-width: 240px; display: flex; align-items: center; gap: 10px; padding: 8px 14px; background: var(--vs-bg-tint); border: 1px solid var(--vs-hair); border-radius: 8px; color: var(--vs-muted); transition: border-color 0.15s, background 0.15s; } .vs-search:focus-within { border-color: var(--vs-accent); background: var(--vs-surface-2); color: var(--vs-text); box-shadow: 0 0 0 3px var(--vs-accent-soft); } .vs-search input { background: transparent; border: 0; outline: 0; color: var(--vs-text); font-family: var(--vs-sans); font-size: 14px; flex: 1; min-width: 0; font-weight: 500; } .vs-search input::placeholder { color: var(--vs-muted); } .vs-search-clear { background: transparent; border: 0; color: var(--vs-muted); cursor: pointer; font-size: 18px; line-height: 1; padding: 0 2px; } .vs-select { appearance: none; padding: 8px 30px 8px 12px; background: var(--vs-bg-tint) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6' fill='none'><path d='M1 1l4 4 4-4' stroke='%236c7280' stroke-width='1.4' stroke-linecap='round'/></svg>") no-repeat right 12px center; border: 1px solid var(--vs-hair); border-radius: 8px; color: var(--vs-text); font-family: var(--vs-sans); font-size: 12.5px; font-weight: 500; cursor: pointer; } .vs-select:hover { border-color: var(--vs-hair-2); } .vs-view-toggle { display: inline-flex; padding: 3px; background: var(--vs-bg-tint); border: 1px solid var(--vs-hair); border-radius: 8px; gap: 2px; } .vs-view-toggle-btn { display: inline-flex; align-items: center; gap: 5px; padding: 5px 10px; background: transparent; border: 0; border-radius: 6px; color: var(--vs-muted); font-family: var(--vs-sans); font-size: 12px; cursor: pointer; font-weight: 500; } .vs-view-toggle-btn:hover { color: var(--vs-text); } .vs-view-toggle-btn.is-active { color: var(--vs-text); background: var(--vs-surface-3); } .vs-toolbar-row--chips { gap: 6px; } .vs-filter-chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; background: var(--vs-bg-tint); border: 1px solid var(--vs-hair); border-radius: 999px; color: var(--vs-text-2); font-family: var(--vs-sans); font-size: 12px; font-weight: 500; cursor: pointer; transition: all 0.12s; } .vs-filter-chip:hover { color: var(--vs-text); border-color: var(--vs-hair-2); } .vs-filter-chip.is-active { color: #1a0d05; background: var(--vs-accent); border-color: var(--vs-accent); } .vs-filter-chip-count { font-size: 10.5px; color: var(--vs-muted); } .vs-filter-chip.is-active .vs-filter-chip-count { color: rgba(26, 13, 5, 0.65); } .vs-toolbar-spacer { flex: 1; } .vs-toolbar-count { font-family: var(--vs-sans); font-size: 12.5px; color: var(--vs-text-2); margin-right: 10px; font-weight: 500; } .vs-list { background: var(--vs-surface); border: 1px solid var(--vs-hair); border-radius: var(--vs-radius-lg); overflow: hidden; box-shadow: var(--vs-shadow-sm); } .vs-list-head, .vs-list-row { display: grid; grid-template-columns: 40px 56px minmax(180px, 2fr) minmax( 80px, 110px ) 140px 1fr 1.2fr 130px; gap: 14px; align-items: center; padding: 12px 18px; } .vs-list-head { border-bottom: 1px solid var(--vs-hair); font-family: var(--vs-sans); font-size: 11px; letter-spacing: 0; text-transform: none; color: var(--vs-muted); font-weight: 500; background: var(--vs-bg-tint); } .vs-list-body .vs-list-row { border-top: 1px solid var(--vs-hair-3); } .vs-list-body .vs-list-row:first-child { border-top: 0; } .vs-list-body .vs-list-row:hover { background: var(--vs-surface-2); } .vs-list-cell--spool { display: flex; align-items: center; justify-content: center; } .vs-list-id { font-family: var(--vs-mono); font-size: 11px; color: var(--vs-muted); } .vs-list-name { font-family: var(--vs-sans); font-size: 14px; color: var(--vs-text); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .vs-list-sub { font-size: 11px; color: var(--vs-muted); margin-top: 2px; display: flex; align-items: center; gap: 6px; } .vs-list-code { font-family: var(--vs-mono); font-size: 11px; color: var(--vs-text-2); } .vs-list-shelf { font-family: var(--vs-sans); font-size: 12px; color: var(--vs-text-2); display: flex; align-items: center; gap: 4px; } .vs-list-shelf-room { color: var(--vs-accent); font-weight: 500; } .vs-spec-chip { font-family: var(--vs-sans); font-size: 10.5px; letter-spacing: 0; text-transform: none; padding: 2px 7px; border-radius: 999px; border: 1px solid var(--vs-hair); color: var(--vs-secondary); background: rgba(127, 231, 192, 0.06); font-weight: 500; } .vs-fillbar { display: flex; flex-direction: column; gap: 4px; min-width: 0; } .vs-fillbar-track { height: 4px; background: var(--vs-surface-3); border-radius: 999px; overflow: hidden; } .vs-fillbar-fill { height: 100%; border-radius: 999px; background: var(--vs-text-2); } .vs-fillbar-fill--danger { background: var(--vs-danger); } .vs-fillbar-fill--warning { background: var(--vs-warning); } .vs-fillbar-fill--success { background: var(--vs-success); } .vs-fillbar-meta { display: flex; align-items: center; gap: 6px; font-family: var(--vs-mono); font-size: 11px; } .vs-fillbar-pct--danger { color: var(--vs-danger); } .vs-fillbar-pct--warning { color: var(--vs-warning); } .vs-fillbar-pct--success { color: var(--vs-success); } .vs-card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; } [data-cardsize="small"] .vs-card-grid { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); } [data-cardsize="large"] .vs-card-grid { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); } @media (max-width: 560px) { .vs-card-grid, [data-cardsize="small"] .vs-card-grid, [data-cardsize="large"] .vs-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .vs-spool-card { padding: 12px 10px 10px; } .vs-spool-card-hero { min-height: 120px; } .vs-spool-card-hero svg, [data-cardsize="small"] .vs-spool-card-hero svg, [data-cardsize="large"] .vs-spool-card-hero svg { width: 100% !important; height: auto !important; max-width: 140px; } .vs-spool-card-pct-num { font-size: 22px; } } .vs-spool-card { display: flex; flex-direction: column; padding: 16px 16px 14px; cursor: pointer; background: var(--vs-surface); border: 1px solid var(--vs-hair); border-radius: var(--vs-radius-lg); box-shadow: var(--vs-shadow-sm); transition: transform 0.15s, border-color 0.15s, box-shadow 0.15s; } .vs-spool-card:hover { transform: translateY(-2px); border-color: var(--vs-hair-2); box-shadow: var(--vs-shadow); } .vs-spool-card--success { border-color: rgba(127, 231, 192, 0.18); } .vs-spool-card-head { display: flex; justify-content: space-between; align-items: center; } .vs-spool-card-id { font-family: var(--vs-mono); font-size: 10.5px; color: var(--vs-muted); } .vs-spool-card-hero { margin: 10px auto 8px; display: flex; align-items: center; justify-content: center; width: 100%; min-height: 180px; } [data-cardsize="small"] .vs-spool-card-hero { min-height: 130px; } [data-cardsize="small"] .vs-spool-card-hero svg { width: 130px !important; height: 130px !important; } [data-cardsize="large"] .vs-spool-card-hero { min-height: 230px; } [data-cardsize="large"] .vs-spool-card-hero svg { width: 220px !important; height: 220px !important; } .vs-spool-card-pct { text-align: center; } .vs-spool-card-pct-num { font-family: var(--vs-sans); font-size: 26px; font-weight: 700; letter-spacing: -0.03em; line-height: 1; color: var(--vs-text); display: inline-flex; align-items: baseline; gap: 2px; font-variant-numeric: tabular-nums; } .vs-spool-card-pct-num--danger { color: var(--vs-danger); } .vs-spool-card-pct-num--warning { color: var(--vs-warning); } .vs-spool-card-pct-num--success { color: var(--vs-success); } .vs-spool-card-pct-unit { font-family: var(--vs-sans); font-size: 11px; font-weight: 500; color: var(--vs-muted); } .vs-spool-card-pct-sub { font-family: var(--vs-mono); font-size: 10.5px; color: var(--vs-muted); margin-top: 4px; } .vs-spool-card-meta { text-align: center; margin-top: 10px; } .vs-spool-card-name { font-family: var(--vs-sans); font-size: 13px; font-weight: 500; color: var(--vs-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .vs-spool-card-sub { font-family: var(--vs-sans); font-size: 11px; color: var(--vs-muted); margin-top: 4px; display: flex; justify-content: center; align-items: center; gap: 6px; flex-wrap: wrap; } .vs-spool-card-foot { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--vs-hair); display: flex; justify-content: space-between; align-items: center; gap: 6px; } .vs-spool-card-shelf { font-family: var(--vs-sans); font-size: 11px; color: var(--vs-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .vs-gallery-card { position: relative !important; border: none !important; transition: transform 0.20s cubic-bezier(0.22, 0.61, 0.36, 1), box-shadow 0.20s ease !important; } .vs-gallery-card:hover { transform: translateY(-6px) !important; box-shadow: 0 0 0 1px rgba(80,130,200,0.38), inset 0 2px 20px rgba(0,0,0,0.46), 0 1px 0 rgba(255,255,255,0.05), 0 18px 44px rgba(0,0,0,0.56), 0 4px 14px rgba(50,100,180,0.22) !important; } .vs-card-actions { opacity: 1; } .vs-card-loc { opacity: 0; transition: opacity 0.18s ease; } .vs-gallery-card:hover .vs-card-loc { opacity: 1; } .vs-card-status { opacity: 0; transition: opacity 0.18s ease; } .vs-card-status.is-shown, .vs-gallery-card:hover .vs-card-status { opacity: 1; } .vs-rack-view { padding: 20px; background: var(--vs-surface); border: 1px solid var(--vs-hair); border-radius: var(--vs-radius-lg); box-shadow: var(--vs-shadow-sm); } .vs-rack-row { display: flex; align-items: flex-end; gap: 4px; padding: 16px 12px; flex-wrap: wrap; background: var(--vs-bg-tint); border-radius: var(--vs-radius); border: 1px solid var(--vs-hair-3); margin-bottom: 4px; } .vs-rack-plank { display: none; } .vs-rack-tile { display: flex; flex-direction: column; align-items: center; gap: 4px; cursor: pointer; padding: 0 3px; } .vs-rack-tile-label { text-align: center; line-height: 1.2; padding-bottom: 4px; } .vs-rack-tile-brand { font-size: 10px; color: var(--vs-accent); font-weight: 500; } .vs-rack-tile-mat { font-size: 9.5px; color: var(--vs-muted); } .vs-matguide-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 18px; } .vs-matguide-card { --vs-mat-accent: var(--vs-accent); display: flex; flex-direction: column; border: 1px solid var(--vs-hair-2); border-radius: 14px; overflow: hidden; background: var(--vs-surface); text-decoration: none; color: inherit; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06); transition: transform 120ms ease, box-shadow 120ms ease, border-color 120ms ease; } .vs-matguide-card:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12); border-color: color-mix(in srgb, var(--vs-mat-accent), transparent 55%); } .vs-matguide-head { display: flex; align-items: center; gap: 7px; padding: 14px 18px; background: linear-gradient( 135deg, color-mix(in srgb, var(--vs-mat-accent), #000 4%) 0%, color-mix(in srgb, var(--vs-mat-accent), #000 32%) 100% ); color: #fff; } .vs-matguide-icon { flex: 0 0 auto; font-size: 58px; line-height: 1; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.25)); } .vs-matguide-icon--img { width: 76px; height: 76px; background-color: #fff; -webkit-mask-image: var(--vs-mat-icon); mask-image: var(--vs-mat-icon); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; } .vs-matguide-head-txt { display: flex; flex-direction: column; gap: 1px; min-width: 0; } .vs-matguide-name { font-size: 22px; font-weight: 800; letter-spacing: 0.01em; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35); } .vs-matguide-count { font-size: 12px; font-weight: 600; color: rgba(255, 255, 255, 0.85); text-shadow: 0 1px 1px rgba(0, 0, 0, 0.25); } .vs-matguide-body { flex: 1 1 auto; padding: 14px 18px 10px; } .vs-matguide-ease { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; } .vs-matguide-ease-lbl { font-size: 11px; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: var(--vs-muted); } .vs-matguide-desc { margin: 0 0 12px; font-size: 13px; line-height: 1.5; color: var(--vs-muted); } .vs-matguide-label { font-size: 11px; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: var(--vs-muted); margin-bottom: 8px; } .vs-matguide-uses { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; } .vs-matguide-uses li { position: relative; padding-left: 16px; font-size: 13.5px; line-height: 1.35; color: var(--vs-text); } .vs-matguide-uses li::before { content: ""; position: absolute; left: 0; top: 0.5em; width: 6px; height: 6px; border-radius: 50%; background: var(--vs-mat-accent); } .vs-matguide-empty { font-size: 13px; color: var(--vs-faint); font-style: italic; } .vs-matguide-heat { display: flex; align-items: center; gap: 9px; margin: 6px 12px 12px; padding: 8px 12px; border-radius: 10px; background: color-mix(in srgb, var(--vs-mat-accent), transparent 88%); border: 1px solid color-mix(in srgb, var(--vs-mat-accent), transparent 78%); } .vs-matguide-heat-ico { font-size: 17px; line-height: 1; } .vs-matguide-heat-txt { display: flex; flex-direction: column; line-height: 1.2; } .vs-matguide-heat-lbl { font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--vs-muted); } .vs-matguide-heat-val { font-size: 13.5px; font-weight: 600; color: var(--vs-text); } @media (max-width: 560px) { .vs-matguide-grid { grid-template-columns: 1fr; gap: 14px; } .vs-matguide-name { font-size: 20px; } .vs-matguide-icon { font-size: 48px; } .vs-matguide-icon--img { width: 64px; height: 64px; } } .vs-icon-upload { display: inline-flex; align-items: center; justify-content: center; padding: 5px 10px; font-size: 12px; font-weight: 600; border: 1px solid var(--vs-hair-2); border-radius: 8px; color: var(--vs-text-2); background: rgba(127, 127, 150, 0.06); cursor: pointer; position: relative; overflow: hidden; } .vs-icon-upload:hover { border-color: var(--vs-accent); color: var(--vs-text); } .vs-icon-upload input[type="file"] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; font-size: 0; cursor: pointer; } .vs-cat-ico, .vs-appuses-cat-icon { display: inline-block; width: 15px; height: 15px; flex: 0 0 auto; background-color: currentColor; -webkit-mask: var(--vs-cat-icon) center / contain no-repeat; mask: var(--vs-cat-icon) center / contain no-repeat; } .vs-cat-ico-lg { display: inline-block; width: 22px; height: 22px; flex: 0 0 auto; background-color: var(--vs-text); -webkit-mask: var(--vs-cat-icon) center / contain no-repeat; mask: var(--vs-cat-icon) center / contain no-repeat; } .vs-cat-list { display: flex; flex-direction: column; gap: 6px; } .vs-cat-row { display: flex; align-items: center; gap: 10px; padding: 5px 10px; border: 1px solid var(--vs-hair-2); border-radius: 8px; background: var(--vs-surface); } .vs-cat-reorder { display: flex; flex-direction: column; } .vs-cat-badge { width: 26px; display: inline-flex; align-items: center; justify-content: center; } .vs-guide-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 18px; } .vs-guide-card { display: flex; flex-direction: column; border: 1px solid var(--vs-hair-2); border-radius: 14px; overflow: hidden; background: var(--vs-surface); text-decoration: none; color: inherit; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06); transition: transform 120ms ease, box-shadow 120ms ease, border-color 120ms ease; } .vs-guide-card:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12); border-color: color-mix(in srgb, var(--vs-accent), transparent 55%); } .vs-guide-card-img { width: 100%; height: 160px; object-fit: contain; background: color-mix(in srgb, var(--vs-surface), #000 6%); padding: 10px 0; } .vs-guide-card-body { padding: 14px 16px 16px; } .vs-guide-card-title { font-size: 15px; font-weight: 700; color: var(--vs-text); line-height: 1.3; margin-bottom: 6px; } .vs-guide-card-desc { font-size: 12.5px; color: var(--vs-muted); line-height: 1.5; } .vs-article { color: var(--vs-text); font-size: 15px; line-height: 1.65; } .vs-article h1 { font-size: 1.7rem; font-weight: 800; color: var(--vs-text); margin: 0 0 14px; } .vs-article h2 { font-size: 1.25rem; font-weight: 700; color: var(--vs-text); margin: 30px 0 12px; } .vs-article h3 { font-size: 1.05rem; font-weight: 700; color: var(--vs-text); margin: 24px 0 8px; } .vs-article p { margin: 0 0 14px; color: var(--vs-text-2); } .vs-article strong { color: var(--vs-text); } .vs-article ul, .vs-article ol { margin: 0 0 14px; padding-left: 22px; color: var(--vs-text-2); } .vs-article li { margin-bottom: 4px; } .vs-article hr { border: none; border-top: 1px solid var(--vs-hair-2); margin: 28px 0; } .vs-article blockquote { margin: 0 0 14px; padding: 10px 16px; border-left: 3px solid var(--vs-accent); color: var(--vs-muted); background: color-mix(in srgb, var(--vs-surface), #000 4%); border-radius: 0 8px 8px 0; } .vs-article em:last-child, .vs-article > p:last-child em { color: var(--vs-muted); } .vs-article img { max-width: 100%; height: auto; } .vs-article table { width: 100%; border-collapse: collapse; margin: 4px 0 18px; font-size: 13.5px; } .vs-article th, .vs-article td { padding: 8px 12px; text-align: left; border-bottom: 1px solid var(--vs-hair-2); } .vs-article th { color: var(--vs-muted); font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; } .vs-article td { color: var(--vs-text-2); } .vs-article a { color: var(--vs-info); } .vs-shelves-page { gap: 12px; } .vs-filament-mode-toggle { display: inline-block; margin-top: 10px; background: transparent; border: 0; padding: 2px 4px; font-size: 12px; color: var(--vs-faint); cursor: pointer; text-decoration: none; } .vs-filament-mode-toggle:hover { color: var(--vs-accent); text-decoration: underline; } .vs-picker-popover { max-width: calc(100vw - 24px); } .vs-picker-popover .mud-list-item { white-space: normal; word-break: break-word; } .vs-spool-dialog { top: 70px; max-height: calc(100dvh - 90px); } @media (max-width: 600px) { .vs-spool-dialog { top: 12px; max-height: calc(100dvh - 24px); } } .vs-refill-cell .mud-checkbox .mud-typography { font-size: 0.85rem; } .vs-weight-row { display: flex; gap: 8px; align-items: center; justify-content: flex-start; flex-wrap: nowrap; } .vs-weight-cell { display: flex; align-items: center; order: 2; margin-left: auto; } .vs-th-sort { cursor: pointer; user-select: none; white-space: nowrap; } .vs-th-sort:hover { color: var(--vs-text); } .vs-th-sort.is-active { color: var(--vs-accent); font-weight: 600; } .vs-label-link { display: inline-flex; align-items: center; gap: 3px; background: none; border: none; color: var(--vs-accent); font-size: 11px; cursor: pointer; padding: 0; } .vs-label-link:hover { text-decoration: underline; } .vs-inherited-spec { display: inline-flex; align-items: center; gap: 5px; background: rgba(255, 255, 255, 0.04); border: 1px dashed rgba(255, 255, 255, 0.18); color: var(--vs-faint); padding: 2px 9px; border-radius: 6px; font-size: 12px; } .vs-inherited-spec-src { opacity: 0.6; font-size: 11px; } .vs-label-pop-backdrop { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.6); z-index: 1400; } .vs-label-pop { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 1401; background: var(--vs-surface); border: 1px solid #ffffff14; border-radius: 10px; padding: 16px 18px; width: min(92vw, 320px); box-shadow: 0 18px 50px rgba(0, 0, 0, 0.5); } .vs-label-pop-head { display: flex; justify-content: space-between; align-items: center; font-size: 13px; font-weight: 600; color: var(--vs-faint); margin-bottom: 12px; } .vs-label-pop-x { background: none; border: none; color: var(--vs-faint); font-size: 20px; line-height: 1; cursor: pointer; padding: 0 4px; } .vs-label-pop-preview { display: flex; justify-content: center; padding: 8px; background: #0d0d14; border-radius: 8px; } .vs-label-pop-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; } .vs-weight-error { margin-top: 6px; font-size: 12px; color: #ff9a9a; } .vs-weight-row > .mud-input-control { min-width: 0; } .vs-weight-row .vs-w-net, .vs-weight-row .vs-w-empty { flex: 0 1 72px; opacity: 0.5; } .vs-weight-row .vs-w-net:focus-within, .vs-weight-row .vs-w-empty:focus-within { opacity: 1; } .vs-weight-row .vs-w-total { flex: 0 1 104px; opacity: 1; } .vs-weight-line { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-top: 8px; } .vs-weight-row .vs-w-total .mud-input-label, .vs-weight-row .vs-w-total input, .vs-weight-row .vs-w-total .mud-input-adornment-text { color: #ffffff !important; font-weight: 700; } .vs-weight-row .vs-w-total .mud-input-slot::before { border-bottom-color: rgba(255, 255, 255, 0.55); } .vs-date-field input, .vs-weight-row .mud-input-control input { text-align: right; } .vs-date-field .mud-input-label, .vs-weight-row .mud-input-control .mud-input-label { left: auto; right: 0; transform-origin: top right; } .vs-spool-flags { display: flex; gap: 18px; flex-wrap: nowrap; order: 1; opacity: 0.7; } .vs-spool-flags .mud-checkbox .mud-typography { font-size: 0.78rem; color: var(--vs-faint); } html[data-mode="light"] .vs-mat-check .mud-typography { color: var(--vs-text-2) !important; } html[data-mode="light"] .vs-mat-check.mud-disabled, html[data-mode="light"] .vs-mat-check .mud-disabled { opacity: 1 !important; } html[data-mode="light"] .vs-mat-check.mud-disabled .mud-typography, html[data-mode="light"] .vs-mat-check .mud-disabled .mud-typography { color: var(--vs-muted) !important; } html[data-mode="light"] .vs-mat-check.mud-disabled svg, html[data-mode="light"] .vs-mat-check .mud-disabled svg { color: var(--vs-accent) !important; fill: var(--vs-accent) !important; } html[data-mode="light"] .vs-mat-check .mud-disabled.mud-icon-button { color: var(--vs-accent) !important; } .vs-add-notes-link { background: none; border: none; padding: 2px 0; color: var(--vs-accent); font-size: 12px; cursor: pointer; } .vs-add-notes-link:hover { text-decoration: underline; } .vs-dialog-actions { display: flex; align-items: center; gap: 8px 16px; flex-wrap: wrap; } .vs-dialog-actions-secondary { display: flex; align-items: center; gap: 8px; } .vs-dialog-actions-primary { margin-left: auto; display: flex; align-items: center; gap: 8px; } .vs-purchase-field { opacity: 0.6; transition: opacity 0.2s ease; } .vs-purchase-field:focus-within { opacity: 1; } .vs-filament-readonly .mud-input-helper-text { font-size: 0.7rem; opacity: 0.55; } .vs-notes-field { opacity: 0.72; } .vs-notes-field .mud-input-slot, .vs-notes-field input, .vs-notes-field textarea { font-size: 0.82rem; } .vs-spool-pagination { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 24px; border-top: 1px solid rgba(255, 255, 255, 0.04); padding-top: 12px; opacity: 0.78; } .vs-pagination-mini { display: none; } .vs-pagination-mini-label { font-size: 13px; color: rgba(218, 232, 248, 0.78); font-variant-numeric: tabular-nums; min-width: 48px; text-align: center; } @media (max-width: 600px) { .vs-pagination-full { display: none; } .vs-pagination-mini { display: flex; align-items: center; gap: 2px; } .vs-spool-pagesize { display: none; } } .vs-spool-pagesize { flex: 0 0 auto; width: 72px !important; } .vs-spool-pagesize .mud-input-control, .vs-spool-pagesize .mud-input-slot, .vs-spool-pagesize .mud-select-input, .vs-spool-pagesize input { width: 72px !important; min-width: 0 !important; } .vs-pagesize-popover.mud-popover { min-width: 0 !important; width: 96px !important; } .vs-show-depleted-row { display: flex; justify-content: center; margin-top: 16px; } .vs-show-depleted-link { background: transparent; border: 0; padding: 4px 10px; font-size: 12px; color: var(--vs-faint); cursor: pointer; text-decoration: none; } .vs-show-depleted-link:hover { color: var(--vs-accent); text-decoration: underline; } .vs-fil-prefix { font-weight: 400; color: #8a8aa8; margin-right: 0.35em; } .vs-fil-name { font-weight: 700; } .vs-detailed-table thead th { padding-top: 4px !important; padding-bottom: 4px !important; font-size: 10px !important; font-weight: 600; text-transform: uppercase !important; letter-spacing: 0.05em; color: var(--vs-muted) !important; } .vs-detailed-table thead th .mud-table-sort-label { font-size: 10px !important; text-transform: uppercase; letter-spacing: 0.05em; color: var(--vs-muted) !important; } .vs-detailed-table thead th .mud-table-sort-label:hover { color: var(--vs-info) !important; } .vs-detailed-table thead th .mud-table-sort-label .mud-table-sort-label-icon { font-size: 14px !important; } .vs-detailed-table td.vs-cell-sm { font-size: 12px; color: #b4b4c8; } .vs-detailed-table th.vs-num, .vs-detailed-table td.vs-num { text-align: right; } .vs-detailed-table .vs-rem-grams { justify-content: flex-end; } .vs-detailed-table thead th .mud-table-sort-label-icon { opacity: 0 !important; transition: opacity 0.12s; } .vs-detailed-table thead th:hover .mud-table-sort-label-icon { opacity: 0.4 !important; } .vs-detailed-table thead th[aria-sort] .mud-table-sort-label-icon { opacity: 1 !important; } .vs-spool-title { font-size: 15px; font-weight: 600; color: var(--vs-text); letter-spacing: -0.01em; line-height: 1.35; white-space: normal; word-break: break-word; } .vs-detail-row { display: flex; flex-wrap: wrap; gap: 16px; margin-bottom: 16px; align-items: stretch; } .vs-detail-section { flex: 1 1 0; min-width: 0; } .vs-detail-section--hero { display: flex; justify-content: center; align-items: flex-start; } @media (max-width: 900px) { .vs-detail-section--hero { flex: 1 1 calc(50% - 8px); } .vs-detail-section--status { flex: 1 1 calc(50% - 8px); } .vs-detail-section--details { flex: 1 1 100%; } } .vs-spool-hero { display: flex; justify-content: center; align-items: center; width: 240px; height: 240px; max-width: 100%; border-radius: 50%; background: transparent; } .vs-spool-hero svg { max-width: 100%; max-height: 100%; width: auto; height: auto; } @media (max-width: 480px) { .vs-spool-hero { width: 170px; height: 170px; } } .vs-sd-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; grid-template-areas: "action hero" "details hero"; gap: 16px; margin-bottom: 16px; align-items: start; } .vs-sd-action { grid-area: action; min-width: 0; } .vs-sd-details { grid-area: details; min-width: 0; } .vs-sd-details .justify-space-between { max-width: 560px; } .vs-sd-side { grid-area: hero; position: sticky; top: 16px; display: flex; flex-direction: column; align-items: center; gap: 12px; } .vs-section-card { background: var(--vs-surface); border: 1px solid var(--vs-hair-2); border-radius: var(--vs-radius); } .vs-section-title { display: flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--vs-muted); } .vs-section-title .mud-icon-root { font-size: 15px; } .vs-pegboard-card { background-color: rgba(12, 16, 26, 0.84); background-image: linear-gradient(180deg, rgba(255,255,255,0.018) 0%, transparent 40%, rgba(0,0,0,0.10) 100%), radial-gradient(circle, rgba(200,215,240,0.030) 1.0px, rgba(200,215,240,0.014) 1.7px, transparent 1.7px); background-size: auto, 20px 20px; border: none; box-shadow: inset 0 0 30px rgba(0, 0, 0, 0.20); } .vs-sd-pill { display: inline-flex; align-items: center; gap: 7px; background: var(--vs-surface); border: 1px solid var(--vs-hair-2); border-radius: 20px; padding: 6px 14px; font-size: 13px; color: var(--vs-text-2); text-decoration: none; } .vs-sd-pill:hover { border-color: var(--vs-accent); color: var(--vs-text); } .vs-sd-pill--accent { border-color: var(--vs-accent); color: var(--vs-accent); font-weight: 600; } .vs-sd-pill--accent:hover { color: var(--vs-text); } .vs-sd-loc { display: flex; align-items: center; justify-content: flex-start; flex-wrap: nowrap; gap: 8px; width: 100%; max-width: 300px; text-align: left; background: var(--vs-surface); border: 1px solid var(--vs-hair-2); border-radius: 12px; padding: 9px 14px; font-size: 13px; font-weight: 600; color: var(--vs-text); } .vs-sd-loc > .mud-icon-root { flex-shrink: 0; } .vs-sd-loc-sep { color: var(--vs-faint); font-weight: 400; } .vs-sd-loc-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; } .vs-sd-loc-shelf { font-size: 12px; color: var(--vs-muted); } .vs-sd-home { display: flex; align-items: center; justify-content: center; gap: 5px; margin-top: 5px; font-size: 12px; color: var(--vs-muted); background: none; border: none; font-family: inherit; cursor: pointer; transition: color 0.15s ease; } .vs-sd-home:hover { color: var(--vs-blue); } .vs-loc-tree { display: flex; flex-direction: column; gap: 3px; width: 100%; max-width: 300px; text-align: left; background: var(--vs-surface); border: 1px solid var(--vs-hair-2); border-radius: 12px; padding: 10px 14px; font-size: 13px; color: var(--vs-text); } .vs-loc-node { display: flex; align-items: center; gap: 7px; font-weight: 600; } .vs-loc-node .mud-icon-root { color: var(--vs-info); flex-shrink: 0; } .vs-loc-l1, .vs-loc-l2 { position: relative; font-weight: 500; color: var(--vs-text-2); } .vs-loc-l1 { padding-left: 20px; } .vs-loc-l2 { padding-left: 40px; font-weight: 600; color: var(--vs-text); } .vs-loc-l1::before, .vs-loc-l2::before { content: ""; position: absolute; top: -5px; width: 9px; height: calc(50% + 5px); border-left: 1.5px solid var(--vs-hair-2); border-bottom: 1.5px solid var(--vs-hair-2); border-bottom-left-radius: 5px; } .vs-loc-l1::before { left: 7px; } .vs-loc-l2::before { left: 27px; } .vs-loc-shelf-name { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 220px; } .vs-sd-identity { text-align: center; margin-top: 10px; line-height: 1.25; } .vs-sd-identity-name { font-size: 15px; font-weight: 700; color: var(--vs-text); } .vs-sd-identity-sub { font-size: 12px; color: var(--vs-muted); margin-top: 1px; } .vs-sd-count { font-size: 13px; font-weight: 700; color: var(--vs-text); background: var(--vs-surface); border: 1px solid var(--vs-hair-2); border-radius: 20px; padding: 7px 16px; } .vs-sd-sibs { width: 100%; max-width: 300px; } .vs-sd-sib { display: block; background: var(--vs-surface); border: 1px solid var(--vs-hair-2); border-radius: 10px; padding: 8px 12px 9px; margin-top: 6px; font-size: 13px; color: var(--vs-text-2); text-decoration: none; } .vs-sd-sib-row { display: flex; align-items: center; gap: 12px; } .vs-sd-sib-bar { display: block; height: 4px; margin-top: 7px; border-radius: 2px; background: rgba(255, 255, 255, 0.07); overflow: hidden; } .vs-sd-sib-bar > span { display: block; height: 100%; border-radius: 2px; } .vs-fillbar, .vs-sd-wbar { display: block; height: 6px; border-radius: 999px; background: rgba(255, 255, 255, 0.07); } .vs-sd-wbar { height: 12px; background: color-mix(in srgb, var(--vs-faint) 18%, transparent); } .vs-fillbar > span, .vs-sd-wbar > span { display: block; height: 100%; border-radius: 999px; transition: width 0.25s ease; } .vs-sd-sib:hover { border-color: var(--vs-accent); } .vs-sd-sib-name { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .vs-sd-sib-label { display: inline-flex; align-items: center; gap: 7px; } .vs-sd-sib-loc { display: inline-flex; align-items: center; gap: 3px; min-width: 0; font-size: 11px; font-weight: 400; color: var(--vs-muted); } .vs-sd-sib-loc .mud-icon-root { color: var(--vs-faint); flex-shrink: 0; } .vs-sd-sib-loc-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .vs-sd-sib.is-current { border-color: var(--vs-accent); background: var(--vs-accent-soft); box-shadow: 0 0 0 1px var(--vs-accent); color: var(--vs-text); font-weight: 600; } .vs-sd-sib-viewing { font-size: 10px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--vs-blue); background: rgba(99, 153, 222, 0.14); border: 1px solid var(--vs-blue); border-radius: 999px; padding: 1px 7px; } .vs-printlog-empty { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; padding: 16px 8px 6px; } .vs-printlog-empty-text { font-size: 13px; color: var(--vs-text-2); } .vs-printlog-empty-eg { font-size: 12px; color: var(--vs-muted); margin-top: 3px; max-width: 320px; } .vs-tabs { display: flex; flex-wrap: wrap; gap: 4px; border-bottom: 1px solid var(--vs-hair-2); margin-bottom: 4px; } .vs-tab { appearance: none; background: none; border: none; border-bottom: 2px solid transparent; margin-bottom: -1px; padding: 7px 12px; font-family: inherit; font-size: 12.5px; font-weight: 600; color: var(--vs-muted); cursor: pointer; white-space: nowrap; transition: color 0.15s, border-color 0.15s; } .vs-tab:hover { color: var(--vs-text-2); } .vs-tab.is-active { color: var(--vs-text); border-bottom-color: var(--vs-accent); } .vs-tab-subhead { font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--vs-faint); margin: 14px 0 8px; } .vs-save-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--vs-success); box-shadow: 0 0 0 3px rgba(124, 200, 160, 0.18); } .vs-wchart { flex-shrink: 0; line-height: 0; opacity: 0.92; display: flex; align-items: stretch; gap: 4px; } .vs-wchart svg { display: block; } .vs-wchart-axis { display: flex; flex-direction: column; justify-content: space-between; text-align: right; font-size: 9px; line-height: 1; color: var(--vs-faint); padding: 2px 0; } .vs-sd-sibs-total { margin-top: 8px; text-align: center; font-size: 12px; font-weight: 600; color: var(--vs-muted); } .vs-sd-sibs-archived-toggle { display: flex; align-items: center; gap: 6px; width: 100%; margin-top: 8px; padding: 7px 10px; background: transparent; border: 1px dashed var(--vs-hair-2); border-radius: 10px; color: var(--vs-muted); font-size: 12px; font-weight: 600; cursor: pointer; transition: background 0.12s ease, border-color 0.12s ease; } .vs-sd-sibs-archived-toggle:hover { background: var(--vs-surface); border-color: var(--vs-hair); } .vs-sd-sibs-archived-toggle .mud-icon-root { color: var(--vs-faint); flex-shrink: 0; } .vs-sd-sibs-archived-kg { margin-left: auto; color: var(--vs-faint); font-weight: 700; } .vs-sd-sib.is-empty { opacity: 0.6; } .vs-sd-sib.is-empty:hover { opacity: 0.9; } @media (max-width: 900px) { .vs-sd-grid { grid-template-columns: 1fr; grid-template-areas: "action" "hero" "details"; } .vs-sd-side { position: static; } } .vs-sd-statusbar { display: flex; flex-wrap: wrap; border: 1px solid var(--vs-hair-2); border-radius: 12px; overflow: hidden; } .vs-sd-statusseg { flex: 1 1 auto; display: inline-flex; align-items: center; justify-content: center; gap: 6px; background: transparent; border: none; border-right: 1px solid var(--vs-hair-2); color: var(--vs-muted); padding: 10px 10px; font-family: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; white-space: nowrap; transition: color 0.15s, background-color 0.15s; } .vs-sd-statusseg:last-child { border-right: none; } .vs-sd-statusseg:hover { color: var(--vs-text); background: rgba(255, 255, 255, 0.03); } .vs-spool-hero--big { width: 300px; height: 300px; } @media (max-width: 480px) { .vs-spool-hero--big { width: 215px; height: 215px; } } .vs-sd-status-row { display: flex; flex-wrap: wrap; gap: 8px; } .vs-sd-status-chip { display: inline-flex; align-items: center; gap: 6px; background: transparent; border: 1px solid var(--vs-hair-2); color: var(--vs-muted); border-radius: 20px; padding: 9px 15px; font-family: inherit; font-size: 13px; font-weight: 600; cursor: pointer; transition: border-color 0.15s, color 0.15s; } .vs-sd-status-chip:hover { border-color: var(--vs-accent); color: var(--vs-text); } .vs-sd-status-chip.is-active { border-color: transparent; } .vs-sd-grouphead { display: flex; align-items: center; justify-content: space-between; width: calc(100% + 12px); background: rgba(4, 8, 16, 0.6); border: none; border-radius: 8px; padding: 7px 10px; margin: 18px -6px 10px; font-family: inherit; font-size: 11px; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; text-align: left; color: var(--vs-muted); box-shadow: inset 0 0 12px rgba(0, 0, 0, 0.25); cursor: pointer; } .vs-sd-grouphead:hover { color: var(--vs-text); } .vs-sd-ghead-title { display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0; } .vs-sd-ghead-sum { flex: 1; min-width: 0; margin-left: auto; text-align: right; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; text-transform: none; letter-spacing: 0.01em; font-size: 12px; font-weight: 500; color: var(--vs-text-2); padding-right: 8px; } .vs-weight-input input { font-size: 20px !important; font-weight: 600; } .vs-weight-field-wrap { position: relative; display: block; width: 100%; max-width: 240px; } .vs-weight-field-wrap .vs-weight-input { width: 100%; max-width: none; } .vs-weight-field-wrap .vs-weight-discard { position: absolute; right: 52px; top: 50%; transform: translateY(-50%); z-index: 3; } .vs-weight-field-wrap.has-discard .vs-weight-input input { padding-right: 84px !important; } .vs-sd-notes-area { min-height: 0; background-image: linear-gradient( 135deg, transparent 0 60%, var(--vs-muted) 60% 66%, transparent 66% 74%, var(--vs-muted) 74% 80%, transparent 80% 88%, var(--vs-muted) 88% 94%, transparent 94% ); background-repeat: no-repeat; background-position: right 3px bottom 3px; background-size: 13px 13px; } .vs-sd-weightpanel { background: rgba(4, 8, 16, 0.35); border: 1px solid rgba(var(--vs-tint), 0.08); border-radius: 12px; padding: 12px 14px; margin-top: 18px; } .vs-sd-weight2col { display: flex; gap: 18px; align-items: stretch; } .vs-sd-weight-render { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; padding: 2px 2px 2px 0; } .vs-sd-weight-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 12px; } @media (max-width: 560px) { .vs-sd-weight2col { gap: 12px; } .vs-sd-weight-main .vs-weight-input { max-width: none; } .vs-sd-weight-main .vs-weight-field-wrap { max-width: none; } } .vs-sd-cardhead { display: flex; align-items: center; justify-content: space-between; width: 100%; background: none; border: none; padding: 0; cursor: pointer; font-family: inherit; } .vs-spool-title-row { display: flex; align-items: center; gap: 12px; } .vs-spool-title-row > .vs-spool-title { flex: 1 1 auto; min-width: 0; } .vs-spool-specialty-chips { display: flex; gap: 4px; flex-wrap: wrap; justify-content: flex-end; } .vs-spec-tag { display: inline-flex; align-items: center; padding: 2px 10px; border-radius: 20px; font-size: 12px; line-height: 1.5; white-space: nowrap; } .vs-spec-tag--clickable { cursor: pointer; transition: filter 0.15s, background 0.15s; } .vs-spec-tag--clickable:hover { filter: brightness(1.2); } .vs-spec-tag--active { font-weight: 600; } .vs-spec-tag--inherited { border-style: dashed !important; opacity: 0.7; } html[data-mode="light"] .vs-spec-tag { background: rgba(var(--spec-rgb), 0.16) !important; border-color: rgba(var(--spec-rgb), 0.45) !important; color: color-mix(in srgb, rgb(var(--spec-rgb)), #16161c 58%) !important; } html[data-mode="light"] .vs-spec-tag--active { background: rgba(var(--spec-rgb), 0.26) !important; } .vs-num-right input { text-align: right; } .vs-band-chip { font-size: 13px; font-weight: 600; color: var(--vs-info); } .vs-spec-hint { grid-column: 1 / -1; font-size: 11px; color: var(--vs-faint); line-height: 1.3; margin: -3px 0 5px; } .vs-scalepick { margin-bottom: 2px; } .vs-scalepick-head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 5px; } .vs-scalepick-label { font-size: 13px; font-weight: 600; color: var(--vs-text); } .vs-scalepick-hint { font-size: 11px; color: var(--vs-faint); margin-top: 4px; line-height: 1.4; } .vs-field-rows { display: grid; grid-template-columns: minmax(0, 210px) 1fr; gap: 12px 16px; align-items: center; } .vs-field-hint { font-size: 12px; color: var(--vs-muted); line-height: 1.45; } .vs-material-editor .vs-modal-actions { position: sticky; bottom: -24px; margin: 16px -24px -24px; padding: 14px 24px; background: var(--mud-palette-surface); border-top: 1px solid var(--vs-hair-2); z-index: 2; } .vs-editor-head { position: sticky; top: -24px; z-index: 5; display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: -24px -24px 0; padding: 13px 24px; background: color-mix(in srgb, var(--vs-text), var(--vs-accent) 55%); color: var(--vs-surface); border-bottom: 1px solid rgba(127, 127, 127, 0.28); } .vs-editor-title { font-size: 1.02rem; font-weight: 600; color: var(--vs-surface); } .vs-editor-idchip { font-family: var(--vs-mono); font-size: 12px; font-weight: 700; color: var(--vs-surface); padding: 2px 9px; border-radius: 8px; white-space: nowrap; background: transparent; border: 1px solid currentColor; } .vs-editor-metabox { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 3px 18px; margin: 0 -24px 14px; padding: 7px 24px; background: rgba(127, 127, 150, 0.08); border-bottom: 1px solid var(--vs-hair-2); font-size: 11px; color: var(--vs-muted); } .vs-editor-metabox b { color: var(--vs-text); font-weight: 600; } .vs-editor-foot { position: sticky; bottom: -24px; z-index: 2; display: flex; justify-content: flex-end; gap: 8px; margin: 16px -24px -24px; padding: 12px 24px; background: var(--mud-palette-surface); border-top: 1px solid var(--vs-hair-2); } .vs-editor .mud-input, .vs-editor .mud-input-slot, .vs-editor .mud-input-label, .vs-editor .mud-select .mud-select-input, .vs-editor .mud-checkbox label, .vs-editor .mud-checkbox .mud-typography { font-size: 0.78rem !important; } .vs-editor .mud-input-helper-text:empty, .vs-material-editor .mud-input-helper-text:empty { display: none; } .vs-editor > .d-flex.justify-end { position: sticky; bottom: -24px; z-index: 2; margin: 16px -24px -24px; padding: 12px 24px; background: var(--mud-palette-surface); border-top: 1px solid var(--vs-hair-2); } .vs-small-field input, .vs-small-field label, .vs-small-field .mud-input-helper-text { font-size: 0.78rem !important; } #variant-edit-panel .mud-input-helper-text { color: #5a5a70 !important; } .vs-secondary-fields input, .vs-secondary-fields .mud-input-label { font-size: 0.82rem; } .vs-secondary-fields input { color: #a6a6bc; } .vs-secondary-fields .mud-input-label { color: #76768e; } .vs-secondary-fields .vs-keep input { font-size: 1rem; color: var(--vs-text); } .vs-secondary-fields .vs-keep .mud-input-label { font-size: 1rem; color: #b4b4c6; } .vs-section { background: var(--vs-surface); border: 1px solid var(--vs-hair-2); border-radius: 8px; padding: 14px 16px; } .vs-material-editor .vs-sec-req, .vs-material-editor .vs-sec-char, .vs-material-editor .vs-sec-props, .vs-material-editor .vs-sec-post { background: color-mix(in srgb, var(--vs-surface), var(--sec) 7%); border-color: color-mix(in srgb, var(--vs-hair-2), var(--sec) 35%); border-left: 3px solid var(--sec); } .vs-material-editor .vs-sec-req { --sec: #4a90e2; } .vs-material-editor .vs-sec-char { --sec: #21b59a; } .vs-material-editor .vs-sec-props { --sec: #9a6ce0; } .vs-material-editor .vs-sec-post { --sec: #d98a3d; } .vs-material-editor .vs-sec-head { color: color-mix(in srgb, var(--vs-text), var(--sec) 55%); } .vs-variants-table th, .vs-variants-table td { font-size: 0.74rem; } .vs-variants-table td .mud-typography { font-size: 0.74rem; } .vs-variants-table td:nth-child(1), .vs-variants-table td:nth-child(2), .vs-variants-table td:nth-child(3) { white-space: nowrap; } .vs-printcol-divider { display: none; } @media (min-width: 600px) { .vs-printcol-divider { display: block; align-self: stretch; width: 1px; background: #2a2a3e; } } .vs-pf-card { background: var(--vs-surface); border: 1px solid var(--vs-hair-2); border-radius: 8px; } .vs-pf-row { transition: background-color 0.12s, box-shadow 0.12s; } .vs-pf-row:hover { background: rgba(120,152,191,0.10); box-shadow: inset 3px 0 0 var(--row-accent, var(--vs-accent)), inset -3px 0 0 var(--row-accent, var(--vs-accent)); } .vs-pf-search { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 200px; background: var(--vs-bg); border: 1px solid var(--vs-hair-2); border-radius: 8px; padding: 0 12px; color: var(--vs-muted); } .vs-pf-search input { flex: 1; background: none; border: none; outline: none; padding: 9px 0; color: var(--vs-text); font-size: 14px; } @media (max-width: 640px) { .vs-col-colors { display: none; } } .vs-sort { font-size: 10px; color: var(--vs-muted); margin-left: 2px; } .vs-sort.is-active { color: var(--vs-info); } .vs-mine-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--vs-info); box-shadow: 0 0 0 2px rgba(126, 184, 247, 0.18); flex-shrink: 0; } .vs-brand-sw { width: 10px; height: 10px; border-radius: 2px; border: 1px solid rgba(255,255,255,0.2); flex-shrink: 0; } .vs-override-badge { display: inline-block; font-size: 6.5px; letter-spacing: 0.04em; text-transform: uppercase; color: #9a875f; background: rgba(208,168,95,0.07); border: 1px solid rgba(208,168,95,0.22); border-radius: 3px; padding: 0 3px; margin-top: 2px; cursor: pointer; } .vs-override-badge:hover { background: rgba(208,168,95,0.18); color: #d0a85f; } @media (max-width: 599.95px) { .mud-table-body .mud-table-row { display: flex; flex-wrap: wrap; padding: 10px 0 6px; border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important; } .mud-table-body .mud-table-cell { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 5px 12px !important; border-bottom: none !important; text-align: right; min-width: 0 !important; width: auto !important; flex: 1 1 100%; } .mud-table-body .mud-table-cell.vs-cell-half { flex: 1 1 calc(50% - 4px); } .mud-table-body .mud-table-cell[data-label="Remaining"] > div:first-child { flex: 1 1 auto; min-width: 0; } .mud-table-body .mud-table-cell[data-label="Remaining"] .vs-fillbar, .mud-table-body .mud-table-cell[data-label="Remaining"] .vs-unknown-bar { min-width: 56px; } .mud-table-body .mud-table-cell::before { content: attr(data-label); flex: 0 0 auto; font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: rgba(190, 210, 230, 0.55); text-align: left; } .mud-table-body .mud-table-cell:not([data-label])::before, .mud-table-body .mud-table-cell[data-label=""]::before { content: none; } .mud-table-body .mud-table-cell.vs-spool-title-cell { display: block; text-align: left; padding: 10px 12px 6px !important; } .mud-table-body .mud-table-cell.vs-spool-title-cell::before { content: none; } .vs-spool-table-actions { justify-content: flex-end !important; } .mud-table-body .mud-table-row .mud-icon-button { opacity: 0.85; } } .vs-spool-grid .vs-notes-cell { padding-top: 4px; } .vs-picker-subheader { font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--vs-muted); font-weight: 600; padding: 8px 16px 4px; pointer-events: none; } .vs-filament-picker-row { display: flex; align-items: center; gap: 10px; width: 100%; } .vs-filament-picker-mat { flex: 0 0 auto; min-width: 56px; padding: 1px 8px; font-size: 10.5px; letter-spacing: 0.04em; text-transform: uppercase; font-weight: 600; color: var(--vs-faint); background: var(--vs-surface); border: 1px solid var(--vs-hair); border-radius: 999px; text-align: center; } .vs-filament-picker-label { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .vs-shelves-aside-stack { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; } .vs-shelves-reset-link { background: transparent; border: 0; padding: 2px 4px; font-size: 11px; color: var(--vs-faint); cursor: pointer; text-decoration: none; transition: color 0.15s; } .vs-shelves-reset-link:hover { color: var(--vs-text); text-decoration: underline; } .vs-shelves-section { display: flex; flex-direction: column; gap: 10px; } .vs-shelves-section--sticky { position: sticky; top: 0; z-index: 5; background: var(--vs-bg); margin-top: 10px; padding-top: 20px; padding-bottom: 12px; } .vs-shelves-section--sticky .vs-shelves-section-head { margin-bottom: 4px; } .vs-shelves-layout { display: flex; align-items: flex-start; gap: 20px; } .vs-shelves-rail { flex: 0 0 304px; width: 304px; position: sticky; top: 12px; max-height: calc(100vh - 24px); overflow-y: auto; overflow-x: hidden; } .vs-shelves-main { flex: 1 1 auto; min-width: 0; } .vs-shelves-rail-empty { padding: 28px 16px; text-align: center; font-size: 13px; line-height: 1.55; color: var(--vs-muted); border: 1px dashed var(--vs-hair-2); border-radius: 10px; } .vs-staging-empty-drop { min-height: 132px; align-items: center; justify-content: center; } .vs-staging-empty-hint { text-align: center; line-height: 1.6; padding: 0 14px; max-width: 240px; } .vs-shelves-rail .vs-shelves-section--sticky { position: static; margin-top: 0; padding-top: 0; } .vs-shelves-rail .vs-filter-bar .vs-filter-search { flex: 1 1 100% !important; max-width: none; } .vs-shelves-rail .vs-staging-sort { flex: 1 1 auto; background: var(--vs-surface-2); border: 1px solid var(--vs-hair-2); border-radius: 6px; padding-left: 8px; } .vs-shelves-rail .vs-staging-sort .vs-filter-sort { flex: 1 1 auto !important; } .vs-shelves-rail .vs-staging-sort .mud-input-outlined-border { border: none !important; } .vs-shelves-rail .vs-filter-toggle { flex: 0 0 auto; } .vs-shelves-rail .vs-filter-bar > .vs-filter-field { flex: 1 1 calc(50% - 3px) !important; max-width: none !important; min-width: 0 !important; } .vs-dock-grip, .vs-dock-chevron { display: none; } @media (max-width: 900px) { .vs-shelves-layout { flex-direction: column; } .vs-shelves-rail { flex: none; width: 100%; position: static; max-height: none; overflow: visible; } .vs-shelves-rail[data-vs-dock]:has(.vs-shelves-section--sticky) { position: fixed; left: 0; right: 0; top: auto; bottom: 0; width: 100%; z-index: 60; margin: 0; max-height: 184px; background: var(--vs-surface); border-top: 1px solid var(--vs-hair-2); border-radius: 16px 16px 0 0; box-shadow: 0 -10px 30px rgba(0,0,0,0.34); overflow: hidden; transition: max-height 0.28s var(--vs-ease); } .vs-shelves-rail[data-vs-dock].is-expanded:has(.vs-shelves-section--sticky) { max-height: 82vh; overflow-y: auto; overflow-x: hidden; } .vs-shelves-main { padding-bottom: 200px; } .vs-shelves-rail[data-vs-dock] .vs-shelves-section--sticky { padding: 0; } .vs-shelves-rail[data-vs-dock] .vs-shelves-section-head { position: relative; display: flex; align-items: center; gap: 8px; margin: 0; padding: 16px 16px 10px; cursor: pointer; user-select: none; } .vs-shelves-rail[data-vs-dock] .vs-dock-grip { display: block; position: absolute; top: 7px; left: 50%; transform: translateX(-50%); width: 40px; height: 5px; border-radius: 3px; background: var(--vs-faint); } .vs-shelves-rail[data-vs-dock] .vs-dock-chevron { display: block; margin-left: auto; color: var(--vs-muted); transition: transform 0.24s var(--vs-ease); } .vs-shelves-rail[data-vs-dock].is-expanded .vs-dock-chevron { transform: rotate(180deg); } .vs-shelves-rail[data-vs-dock]:not(.is-expanded) .vs-filter-bar { display: none !important; } .vs-shelves-rail[data-vs-dock]:not(.is-expanded) .vs-staging-tray .vs-shelf-area { flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; padding-bottom: 10px; } .vs-shelves-rail[data-vs-dock]:not(.is-expanded) .vs-staging-tray .vs-shelf-area ~ div { display: none !important; } .vs-shelves-rail[data-vs-dock] .vs-filter-bar { flex-direction: row; flex-wrap: wrap; } } .vs-dock-scrim { position: fixed; inset: 0; z-index: 55; background: rgba(0,0,0,0.42); } @media (min-width: 901px) { .vs-dock-scrim { display: none; } } .vs-shelf.vs-shelf--no-header { display: block; grid-template-columns: none; } .vs-staging-tray, .vs-staging-tray .vs-shelf, .vs-staging-tray .vs-shelf-area { background: transparent !important; box-shadow: none !important; border: none !important; } .vs-staging-tray .vs-storage-unit-frame { background: transparent !important; border: 1px solid var(--vs-hair-2) !important; border-radius: 10px !important; padding: 6px !important; box-shadow: none !important; } .vs-staging-tray .vs-shelf-area { align-items: flex-start; min-height: 0; padding: 6px; } .vs-page.vs-shelves-page { gap: 10px; } .vs-page.vs-shelves-page .vs-page-head { min-height: 0; margin-bottom: 0; } .vs-page.vs-shelves-page .vs-catalog-tabbar { margin-bottom: 8px !important; } .vs-page.vs-shelves-page .vs-shelves-main > div:first-child { margin-top: 0 !important; } .vs-shelves-setup-btn { display: inline-flex; align-items: center; gap: 6px; background: var(--vs-surface-2); border: 1px solid var(--vs-hair-2); color: var(--vs-text-2); border-radius: 8px; padding: 7px 14px; cursor: pointer; font-family: inherit; font-size: 13px; font-weight: 500; white-space: nowrap; } .vs-shelves-setup-btn:hover { border-color: var(--vs-accent); color: var(--vs-text); } .vs-shelves-section-head { display: grid; grid-template-columns: 1fr auto; align-items: baseline; padding-bottom: 0; border-bottom: 0; } .vs-shelves-section-title { display: flex; align-items: center; gap: 10px; margin: 0; font-family: var(--vs-sans); font-size: 20px; font-weight: 600; letter-spacing: -0.015em; color: var(--vs-text); } .vs-shelves-section-title::before { content: ""; width: 5px; height: 18px; background: var(--vs-accent); border-radius: 2px; } .vs-shelves-section-glyph { display: none; } .vs-shelves-section-count { font-family: var(--vs-sans); font-size: 12px; color: var(--vs-muted); } .vs-storage-unit { display: flex; flex-direction: column; gap: 0; } .vs-storage-unit-head { display: grid; grid-template-columns: 1fr auto; align-items: baseline; padding: 12px 16px; background: var(--vs-surface-2); border: none; border-radius: var(--vs-radius-lg) var(--vs-radius-lg) 0 0; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04); } .vs-storage-unit-name { font-family: var(--vs-sans); font-size: 15px; font-weight: 600; color: var(--vs-text); display: flex; align-items: center; } .vs-storage-unit-stats { font-family: var(--vs-sans); font-size: 12px; color: var(--vs-text-2); white-space: nowrap; } .vs-storage-unit-head { align-items: center; } .vs-storage-unit-titlewrap { min-width: 0; } .vs-storage-unit-desc { font-family: var(--vs-sans); font-size: 12px; color: var(--vs-muted); margin: 2px 0 0 23px; } .vs-storage-unit-headright { display: flex; align-items: center; gap: 6px; } .vs-unit-photos { margin-bottom: 12px; } .vs-storage-unit-frame { position: relative; padding: 14px; background: var(--vs-surface); border: none; border-radius: 0; box-shadow: var(--vs-shadow-sm), inset 0 3px 12px rgba(0, 0, 0, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.04); } .vs-storage-unit-frame-rail { display: none; } .vs-storage-unit-shelves { display: flex; flex-flow: row wrap; align-items: flex-start; gap: 12px; } .vs-shelf--large { flex: 1 1 100%; } .vs-shelf--medium { flex: 0 1 calc(50% - 6px); } .vs-shelf--small { flex: 0 1 calc(33.333% - 8px); } .vs-shelf--medium, .vs-shelf--small { grid-template-columns: 1fr; } .vs-shelf--medium > .vs-shelf-header, .vs-shelf--small > .vs-shelf-header { flex-direction: row; align-items: baseline; gap: 10px; border-right: 0; border-bottom: 1px solid var(--vs-hair-3); padding: 8px 36px 8px 14px; } @media (max-width: 820px) { .vs-shelf--medium, .vs-shelf--small { flex-basis: 100%; } } .vs-date-filter { display: inline-flex; flex-direction: column; gap: 2px; } .vs-date-filter-label { font-size: 11px; color: var(--vs-muted); letter-spacing: 0.02em; padding-left: 2px; } .vs-date-filter-input { height: 38px; min-width: 140px; background: var(--vs-surface-2); border: 1px solid var(--vs-hair-2); border-radius: 4px; color: var(--vs-text); font-family: inherit; font-size: 13px; padding: 0 10px; transition: border-color 0.15s var(--vs-ease); } .vs-date-filter-input:hover { border-color: var(--vs-hair); } .vs-date-filter-input:focus { outline: 0; border-color: var(--vs-accent); } .vs-storage-unit-foot { display: none; } .vs-shelf { position: relative; display: grid; grid-template-columns: 130px 1fr; align-items: stretch; gap: 14px; padding: 0; background: linear-gradient( 180deg, var(--vs-bg-tint) 0%, var(--vs-bg-deep) 100% ); border: none; border-radius: var(--vs-radius); box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.025); } .vs-shelf-header { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 4px; padding: 10px 14px; border-right: 1px solid var(--vs-hair-3); } .vs-shelf-name { font-family: var(--vs-sans); font-size: 14px; color: var(--vs-text); font-weight: 600; } .vs-shelf-count { font-family: var(--vs-mono); color: var(--vs-text-2); font-size: 11px; } .vs-shelf-count::after { content: " spools"; color: var(--vs-muted); } .vs-shelf-stats { font-family: var(--vs-mono); color: var(--vs-muted); font-size: 11px; letter-spacing: 0.04em; } .vs-shelf-num { font-weight: 600; color: var(--vs-text); } .vs-shelf-desc { font-weight: 400; color: var(--vs-muted); font-size: 12.5px; } .vs-shelf-desc::before { content: "·"; margin: 0 6px; color: var(--vs-faint); } .vs-shelf { grid-template-columns: 1fr; gap: 0; } .vs-shelf > .vs-shelf-header { flex-direction: row; align-items: center; gap: 10px; border-right: 0; border-bottom: 1px solid var(--vs-hair-3); padding: 8px 40px 8px 14px; } .vs-shelf-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .vs-shelf-count, .vs-shelf-stats { flex: 0 0 auto; white-space: nowrap; } .vs-shelf-area { display: flex; align-items: flex-end; gap: 5px; padding: 14px 16px 16px; min-height: 126px; flex-wrap: wrap; border-radius: 0 var(--vs-radius) var(--vs-radius) 0; transition: background 0.20s var(--vs-ease), box-shadow 0.20s var(--vs-ease); } .vs-shelf-area.is-over { background: var(--vs-accent-soft); box-shadow: inset 0 0 0 1px rgba(120,152,191,0.35); } .vs-shelf-slot { width: 36px; height: 104px; border: 1px dashed rgba(120,152,191,0.18); border-radius: 3px; background: rgba(120,152,191,0.03); flex: 0 0 auto; transition: background 0.18s var(--vs-ease), border-color 0.18s var(--vs-ease), box-shadow 0.18s var(--vs-ease); } .vs-shelf-area.is-over .vs-shelf-slot { border-color: rgba(120,152,191,0.55); background: rgba(120,152,191,0.10); box-shadow: 0 0 8px rgba(120,152,191,0.22) inset; } .vs-shelf-count.is-over-capacity { color: #e0855a; font-weight: 600; } .vs-shelf-header { position: relative; } .vs-shelf-toggle { position: absolute; top: 6px; right: 6px; background: transparent; border: 0; padding: 4px; cursor: pointer; color: var(--vs-muted); border-radius: 3px; display: flex; align-items: center; justify-content: center; transition: color 0.18s var(--vs-ease), background 0.18s var(--vs-ease); } .vs-shelf-toggle:hover { color: var(--vs-accent); background: rgba(120,152,191,0.10); } .vs-shelf-toggle svg { display: block; transition: transform 0.22s var(--vs-ease); } .vs-shelf.is-collapsed .vs-shelf-toggle svg { transform: rotate(-90deg); } .vs-shelf.is-collapsed .vs-shelf-header { border-right: 0; border-bottom: 1px solid var(--vs-hair-3); } .vs-filter-bar .vs-filter-field { margin-top: 0 !important; margin-bottom: 0 !important; } .vs-filter-bar .vs-filter-field .mud-input-helper-text, .vs-filter-bar .vs-filter-field .mud-input-helper-container { display: none !important; min-height: 0 !important; height: 0 !important; } .vs-filter-field .mud-input-slot, .vs-filter-field .mud-select-input, .vs-filter-field input { font-size: 11px !important; } .vs-unknown-bar { opacity: 0.4; } .vs-unknown-bar .mud-progress-linear-bar, .vs-unknown-bar .mud-progress-linear-bar-1, .vs-unknown-bar .mud-progress-linear-bar-2 { animation-duration: 3.6s !important; } .vs-list-empty { padding: 28px 16px; text-align: center; color: var(--vs-muted); font-size: 13px; } .vs-smart-chip { display: inline-flex; align-items: center; height: 28px; padding: 0 12px; border-radius: 14px; border: 1px solid rgba(255, 255, 255, 0.18); background: transparent; color: rgba(232, 236, 242, 0.85); font-size: 12px; font-family: inherit; cursor: pointer; white-space: nowrap; transition: background-color 0.12s, border-color 0.12s, color 0.12s; } .vs-smart-chip:hover { border-color: rgba(199, 125, 255, 0.6); color: #fff; } .vs-smart-chip.is-active { background: rgba(199, 125, 255, 0.18); border-color: #c77dff; color: #e6d2ff; font-weight: 600; } .vs-smart-chip--warn.is-active { background: rgba(224, 160, 48, 0.18); border-color: #e0a030; color: #f0c878; } .vs-compact { display: flex; flex-direction: column; background: var(--vs-surface); border: 1px solid var(--vs-hair-2); border-radius: 8px; overflow: hidden; padding: 4px 0 10px; } .vs-detailed-table.mud-table { background: var(--vs-surface); border: 1px solid var(--vs-hair-2); border-radius: 8px; overflow: hidden; } .vs-detailed-table .mud-table-container { padding: 6px 10px 12px; } .vs-compact-head, .vs-compact-row, .vs-compact-group-header { display: grid; grid-template-columns: minmax(0, 1fr) 140px 122px 160px 40px; align-items: center; gap: 8px; } @media (max-width: 600px) { .vs-compact-head, .vs-compact-row, .vs-compact-group-header { grid-template-columns: minmax(60px, 1fr) 58px 90px 46px 22px; gap: 6px; } .vs-compact-row > div { min-width: 0; } .vs-compact-row .vs-rem-grams { font-size: 10px; } } @media (max-width: 400px) { .vs-compact-head, .vs-compact-row, .vs-compact-group-header { grid-template-columns: minmax(48px, 1fr) 50px 78px 42px 20px; gap: 5px; } } .vs-compact-head { padding: 4px 10px; font-size: 10px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--vs-muted); border-bottom: 1px solid var(--vs-hair-2); } .vs-compact-sort { cursor: pointer; user-select: none; transition: color 0.12s; } .vs-compact-sort:hover { color: #aab; } .vs-compact-sort.is-active { color: var(--vs-info); } .vs-compact-sort-arrow { font-size: 9px; } .vs-compact-row { padding: 3px 10px; min-height: 34px; border-bottom: 1px solid var(--vs-hair); transition: background-color 0.12s, box-shadow 0.12s; } .vs-compact-row:hover { background: rgba(65, 125, 200, 0.07); } .vs-compact-row:not(.is-editing):hover { box-shadow: inset 3px 0 0 var(--row-accent, var(--vs-accent)), inset -3px 0 0 var(--row-accent, var(--vs-accent)); } .vs-detailed-table .mud-table-body .mud-table-row:not(.vs-row-editing):hover .mud-table-cell { box-shadow: none; } .vs-detailed-table .mud-table-body .mud-table-row:not(.vs-row-editing):hover .mud-table-cell:first-child { box-shadow: inset 3px 0 0 var(--row-accent, var(--vs-accent)); } .vs-detailed-table .mud-table-body .mud-table-row:not(.vs-row-editing):hover .mud-table-cell:last-child { box-shadow: inset -3px 0 0 var(--row-accent, var(--vs-accent)); } .vs-spool-namelink { color: inherit; text-decoration: none; cursor: pointer; } .vs-spool-namelink:hover { text-decoration: underline; color: var(--vs-accent); } .vs-compact-row.is-editing { background: rgba(79, 155, 255, 0.24); box-shadow: inset 4px 0 0 #4f9bff, inset -4px 0 0 #4f9bff; } .mud-table-row.vs-row-editing > td { background: rgba(79, 155, 255, 0.24) !important; } .mud-table-row.vs-row-editing > td:first-child { box-shadow: inset 4px 0 0 #4f9bff; } .mud-table-row.vs-row-editing > td:last-child { box-shadow: inset -4px 0 0 #4f9bff; } .vs-compact-group-header { padding: 5px 10px; border-bottom: 1px solid rgba(255, 255, 255, 0.06); background: rgba(255, 255, 255, 0.018); cursor: pointer; transition: background-color 0.12s; } .vs-compact-total-pill { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 11px; font-weight: 600; color: var(--vs-info); background: rgba(65, 125, 200, 0.12); border: 1px solid rgba(65, 125, 200, 0.3); white-space: nowrap; cursor: default; } .vs-compact-group-header:hover { background: rgba(65, 125, 200, 0.09); } .vs-compact-child { background: rgba(0, 0, 0, 0.14); padding-left: 30px; } .vs-compact-child .vs-compact-meta { font-size: 12px; color: #abacc6; } .vs-compact-child .vs-compact-count { font-size: 12px; color: #c3abe2; } .vs-compact-child .vs-compact-name-main { font-size: 12px; font-weight: 500; color: var(--vs-text-2); } .vs-compact-name { font-size: 13px; font-weight: 600; color: var(--vs-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .vs-compact-title { display: flex; align-items: baseline; gap: 6px; min-width: 0; overflow: hidden; } .vs-compact-name-prefix { flex: 0 1 auto; min-width: 0; font-size: 13px; font-weight: 400; color: var(--vs-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .vs-compact-name-main { flex: 0 0 auto; font-size: 13px; font-weight: 700; color: var(--vs-text); white-space: nowrap; } .vs-compact-meta { font-size: 11px; color: #9a9eba; } .vs-compact-loc { font-size: 10px; color: var(--vs-muted); } .vs-compact-chev { display: inline-block; width: 12px; font-size: 10px; color: #8a8aa8; transition: transform 0.15s; flex-shrink: 0; } .vs-compact-chev.is-open { transform: rotate(90deg); } .vs-compact-count { font-family: monospace; font-size: 11px; font-weight: 600; color: #b594d6; flex-shrink: 0; } .vs-filter-bar .vs-filter-sort .mud-input-label, .vs-filter-bar .vs-filter-sort label { color: rgba(144, 144, 176, 0.65) !important; font-weight: 400 !important; } .vs-filter-bar .vs-filter-sort .mud-input-outlined-border { border-color: rgba(255, 255, 255, 0.10) !important; } .vs-series-shelf { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: center; row-gap: 20px; column-gap: 0; padding: 20px 12px; background: linear-gradient(180deg, var(--vs-surface) 0%, var(--vs-surface-2) 100%); border: 1px solid var(--vs-hair-2); border-radius: 12px; box-shadow: inset 0 -16px 24px rgba(0, 0, 0, 0.05); } .vs-series-spool { display: flex; flex-direction: column; align-items: center; gap: 8px; width: 78px; padding: 0 8px 10px; border-bottom: 3px solid var(--vs-surface-3); text-decoration: none; color: var(--vs-text-2); } .vs-series-spool-cap { min-height: 2.5em; font-size: 11px; line-height: 1.25; text-align: center; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .vs-series-spool:hover .vs-series-spool-cap { color: var(--vs-accent); text-decoration: underline; } .vs-series-photo { position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; max-width: 240px; padding: 0 8px 10px; border-bottom: 3px solid var(--vs-surface-3); color: var(--vs-text-2); } .vs-series-photo-btn { height: 116px; max-width: 240px; padding: 0; border: 1px solid var(--vs-hair-2); border-radius: 8px; overflow: hidden; background: var(--vs-bg); cursor: pointer; transition: border-color 0.15s ease, transform 0.15s ease; } .vs-series-photo-btn img { height: 116px; width: auto; max-width: 240px; object-fit: cover; display: block; } .vs-series-photo-btn:hover { border-color: var(--vs-accent); transform: translateY(-2px); } .vs-series-photo .vs-series-spool-cap { max-width: 120px; } .vs-series-photo-del { position: absolute; top: 2px; right: 8px; width: 20px; height: 20px; border-radius: 50%; border: none; background: rgba(0, 0, 0, 0.55); color: #fff; cursor: pointer; font-size: 11px; line-height: 1; opacity: 0; transition: opacity 0.15s ease; } .vs-series-photo:hover .vs-series-photo-del { opacity: 1; } .vs-shelf-photolabel { flex-basis: 100%; text-align: center; font-size: 12px; font-weight: 600; letter-spacing: 0.01em; color: var(--vs-muted); margin: 2px 0 -2px; } .vs-shelf-addlink { flex-basis: 100%; display: flex; justify-content: center; margin-top: 6px; } .vs-photo-add-link { position: relative; display: inline-flex; align-items: center; gap: 5px; font-size: 13px; font-weight: 600; color: var(--vs-accent); cursor: pointer; } .vs-photo-add-link input[type="file"] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; } .vs-photo-add-link.is-busy { opacity: 0.7; cursor: progress; } .vs-fil-buy { margin-top: 22px; padding: 16px 18px; border: 1px solid var(--vs-hair-2); border-radius: 12px; background: var(--vs-surface); } .vs-fil-buy-row { display: flex; flex-wrap: wrap; gap: 10px; } .vs-buy-btn { display: inline-flex; align-items: center; gap: 7px; font-weight: 600; font-size: 14px; text-decoration: none; border-radius: 8px; padding: 10px 18px; transition: background 0.15s var(--vs-ease, ease), border-color 0.15s var(--vs-ease, ease); } .vs-buy-btn--brand { background: var(--vs-accent); color: var(--vs-on-accent); } .vs-buy-btn--brand:hover { background: var(--vs-accent-deep); } .vs-buy-btn--amz { border: 1px solid var(--vs-accent); color: var(--vs-accent); } .vs-buy-btn--amz:hover { background: var(--vs-accent-soft); } .vs-buy-btn--alt { border: 1px solid var(--vs-hair-2); color: var(--vs-text-2); } .vs-buy-btn--alt:hover { border-color: var(--vs-accent); color: var(--vs-accent); } .vs-fil-buy-prices { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 12px; font-size: 13px; color: var(--vs-muted); } .vs-fil-buy-note { font-size: 11px; color: var(--vs-faint); margin-top: 10px; } .vs-material-editor .mud-input, .vs-material-editor .mud-input-slot, .vs-material-editor .mud-input-label, .vs-material-editor .mud-select .mud-select-input, .vs-material-editor .mud-checkbox label, .vs-material-editor .mud-checkbox .mud-typography { font-size: 0.78rem !important; } .vs-error-page { min-height: 60vh; display: flex; align-items: center; justify-content: center; padding: 40px 16px; } .vs-error-card { background: var(--vs-surface); border: 1px solid var(--vs-hair-2); border-radius: 12px; padding: 40px 32px; max-width: 540px; width: 100%; text-align: center; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.32); } .vs-error-icon { margin-bottom: 16px; display: flex; justify-content: center; } .vs-spaghetti { margin-bottom: 16px; display: flex; justify-content: center; } .vs-shelf-404 { margin-bottom: 16px; display: flex; justify-content: center; } .vs-empty-state { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 48px 24px 32px; max-width: 480px; margin: 0 auto; } .vs-empty-spool-preview { margin-bottom: 24px; opacity: 0.55; filter: saturate(0.7); transition: opacity 0.3s, filter 0.3s; } .vs-empty-spool-preview:hover { opacity: 0.85; filter: saturate(1); } .vs-empty-shelf { margin-bottom: 24px; display: flex; justify-content: center; } .vs-empty-state .vs-empty-title { font-family: var(--vs-sans); font-size: 22px; font-weight: 600; color: var(--vs-text); margin: 0 0 12px 0; letter-spacing: -0.01em; } .vs-empty-state .vs-empty-lead { font-size: 14px; color: var(--vs-faint); line-height: 1.55; margin: 0 0 28px 0; } .vs-empty-state .vs-empty-actions { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; } .vs-error-code { font-family: var(--vs-mono); font-size: 64px; font-weight: 700; color: #7898bf; line-height: 1; letter-spacing: -0.02em; margin-bottom: 8px; } .vs-error-title { font-size: 24px; font-weight: 700; color: var(--vs-text); margin: 0 0 12px 0; letter-spacing: -0.015em; } .vs-error-lead { font-size: 15px; color: var(--vs-muted); line-height: 1.5; margin: 0 0 24px 0; } .vs-error-id-block { background: var(--vs-bg-deep); border: 1px solid var(--vs-hair-2); border-radius: 6px; padding: 12px 14px; margin: 0 0 24px 0; width: 100%; text-align: left; cursor: pointer; transition: border-color 0.15s; } .vs-error-id-block:hover, .vs-error-id-block:focus-visible { border-color: var(--vs-accent); outline: none; } .vs-error-id-label { font-size: 11px; color: var(--vs-faint); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 4px; } .vs-error-id-value { font-family: var(--vs-mono); font-size: 12px; color: var(--vs-text-2); word-break: break-all; user-select: all; cursor: pointer; } .vs-error-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; } .vs-error-btn { display: inline-flex; align-items: center; justify-content: center; padding: 10px 18px; border-radius: 6px; font-size: 14px; font-weight: 600; text-decoration: none; border: 1px solid transparent; transition: background 0.15s var(--vs-ease), border-color 0.15s var(--vs-ease); } .vs-error-btn-primary { background: #7898bf; color: #0e1018; } .vs-error-btn-primary:hover { background: #8aa8cf; } .vs-error-btn-secondary { background: transparent; color: var(--vs-text-2); border-color: var(--vs-hair-2); } .vs-error-btn-secondary:hover { background: rgba(var(--vs-tint), 0.10); border-color: #7898bf; } #blazor-error-ui { background: #1a1a2e; border-top: 1px solid #e0855a; bottom: 0; left: 0; width: 100%; position: fixed; display: none; z-index: 10000; padding: 12px 56px 12px 18px; color: #f2d5c4; font-size: 13px; line-height: 1.5; box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.48); align-items: center; gap: 10px; } #blazor-error-ui .vs-blazor-err-icon { color: #e0855a; flex-shrink: 0; display: inline-flex; align-items: center; } #blazor-error-ui .vs-blazor-err-text { flex: 1 1 auto; } #blazor-error-ui .vs-blazor-err-btn { background: #7898bf; color: #0e1018; padding: 4px 12px; border-radius: 4px; font-weight: 600; text-decoration: none; font-size: 12px; flex-shrink: 0; } #blazor-error-ui .vs-blazor-err-btn:hover { background: #8aa8cf; } #blazor-error-ui .vs-blazor-err-dismiss { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); cursor: pointer; color: var(--vs-muted); font-size: 20px; line-height: 1; padding: 4px 8px; } #blazor-error-ui .vs-blazor-err-dismiss:hover { color: #dae8f8; } .mud-tabs .mud-tab-active, .mud-tabs .mud-tab.mud-tab-active .mud-icon-root { color: #7898bf !important; } .mud-tabs .mud-tab:hover { color: #aac4e6; } .mud-tabs .mud-tabs-tabbar-slider { background-color: #7898bf !important; } .vs-shelf-empty { align-self: center; font-family: var(--vs-sans); font-size: 13px; color: var(--vs-faint); padding: 8px; } .vs-shelf-spool { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; cursor: grab; padding: 0 2px; -webkit-touch-callout: none; user-select: none; touch-action: none; } .vs-shelf-spool:active { cursor: grabbing; } .vs-shelf-spool.is-dragging { opacity: 0.22; } .vs-shelf-spool.is-dragging .vs-spool-side { transform: scale(1.06) translateY(-3px); filter: drop-shadow(0 8px 18px rgba(0,0,0,0.55)) drop-shadow(0 2px 6px rgba(120,152,191,0.18)); } .vs-shelf-spool.vs-drag-source { opacity: 0.25 !important; } .vs-drag-clone { position: fixed; left: 0; top: 0; z-index: 9999; margin: 0; pointer-events: none; opacity: 0.97; transform: scale(1.1); transform-origin: center bottom; filter: drop-shadow(0 14px 24px rgba(0,0,0,0.55)) drop-shadow(0 4px 9px rgba(120,152,191,0.28)); will-change: left, top; } .vs-drag-clone .vs-shelf-spool-label, .vs-drag-clone .vs-spool-wrap-trigger { display: none; } .vs-shelf-spool-label { text-align: center; padding-bottom: 4px; line-height: 1.25; opacity: 0; transform: translateY(3px); transition: opacity 0.20s ease-out 0.04s, transform 0.20s var(--vs-ease) 0.04s; } .vs-shelf-spool:hover .vs-shelf-spool-label, .vs-shelf-spool:focus .vs-shelf-spool-label, .vs-shelf-spool:focus-within .vs-shelf-spool-label { opacity: 1; transform: translateY(-4px); } .vs-shelf-spool:focus, .vs-shelf-spool:focus-visible { outline: 1px solid rgba(120,152,191,0.55); outline-offset: 2px; border-radius: 3px; } .vs-shelf-spool[data-vs-tip]::before, .vs-low-spool[data-vs-tip]::before, .vs-bench-tile[data-vs-tip]::before, .vs-gear-spool[data-vs-tip]::before, .vs-desk-spool[data-vs-tip]::before { content: attr(data-vs-tip); position: absolute; bottom: calc(100% + 5px); left: 50%; transform: translateX(-50%) translateY(4px); opacity: 0; pointer-events: none; white-space: pre-line; text-align: center; background: var(--vs-surface); color: var(--vs-text-2); font-size: 11px; font-family: var(--vs-sans); font-weight: 400; line-height: 1.55; border-radius: 6px; padding: 5px 9px; z-index: 200; box-shadow: 0 4px 14px rgba(0,0,0,0.22), inset 0 0 0 1px var(--vs-hair-2); min-width: 140px; max-width: 280px; transition: opacity 0.15s ease-out 0.35s, transform 0.15s ease-out 0.35s; } .vs-shelf-spool[data-vs-tip]:hover::before, .vs-low-spool[data-vs-tip]:hover::before, .vs-bench-tile[data-vs-tip]:hover::before, .vs-gear-spool[data-vs-tip]:hover::before, .vs-desk-spool[data-vs-tip]:hover::before { opacity: 1; transform: translateX(-50%) translateY(0); } .vs-shelf-spool[data-vs-tip]::before, .vs-shelf-spool[data-vs-tip]:hover::before, .vs-low-spool[data-vs-tip]::before, .vs-low-spool[data-vs-tip]:hover::before, .vs-bench-tile[data-vs-tip]::before, .vs-bench-tile[data-vs-tip]:hover::before, .vs-gear-spool[data-vs-tip]::before, .vs-gear-spool[data-vs-tip]:hover::before, .vs-desk-spool[data-vs-tip]::before, .vs-desk-spool[data-vs-tip]:hover::before { display: none; } .vs-floating-tip { position: fixed; display: none; z-index: 9990; pointer-events: none; white-space: pre-line; text-align: center; background: var(--vs-surface); color: var(--vs-text-2); font-size: 11px; font-family: var(--vs-sans); font-weight: 400; line-height: 1.55; border-radius: 6px; padding: 5px 9px; box-shadow: 0 4px 14px rgba(0,0,0,0.22), inset 0 0 0 1px var(--vs-hair-2); min-width: 140px; max-width: 280px; opacity: 0; transition: opacity 0.12s ease-out; } .vs-widget-spool:first-child .vs-shelf-spool[data-vs-tip]::before, .vs-low-spool:first-child[data-vs-tip]::before { left: 0; transform: translateX(0) translateY(4px); } .vs-widget-spool:first-child .vs-shelf-spool[data-vs-tip]:hover::before, .vs-low-spool:first-child[data-vs-tip]:hover::before { transform: translateX(0) translateY(0); } .vs-widget-spool:last-child .vs-shelf-spool[data-vs-tip]::before, .vs-low-spool:last-child[data-vs-tip]::before { left: auto; right: 0; transform: translateX(0) translateY(4px); } .vs-widget-spool:last-child .vs-shelf-spool[data-vs-tip]:hover::before, .vs-low-spool:last-child[data-vs-tip]:hover::before { transform: translateX(0) translateY(0); } .vs-shelf-area > .vs-shelf-spool[data-vs-tip]:first-child::before { left: 0; transform: translateX(0) translateY(4px); } .vs-shelf-area > .vs-shelf-spool[data-vs-tip]:first-child:hover::before { transform: translateX(0) translateY(0); } .vs-shelf-area > .vs-shelf-spool[data-vs-tip]:last-child::before { left: auto; right: 0; transform: translateX(0) translateY(4px); } .vs-shelf-area > .vs-shelf-spool[data-vs-tip]:last-child:hover::before { transform: translateX(0) translateY(0); } @media (hover: none) { .vs-shelf-spool { cursor: pointer; } .vs-shelf-spool[data-vs-tip]::before, .vs-low-spool[data-vs-tip]::before, .vs-bench-tile[data-vs-tip]::before, .vs-gear-spool[data-vs-tip]::before, .vs-desk-spool[data-vs-tip]::before { display: none; } } .vs-shelf-spool-label .vs-mono { font-size: 9px; color: var(--vs-accent); font-weight: 500; } .vs-shelf-spool-mat { font-size: 9px; color: var(--vs-muted); } .vs-shelf-plank, .vs-shelf-plank-edge, .vs-shelf-bolt { display: none; } [data-hoverspin="on"] .vs-spool-front { transition: transform 0.6s cubic-bezier(0.2, 1, 0.3, 1); } [data-hoverspin="on"] .vs-spool-card:hover .vs-spool-front { transform: rotate(45deg); } [data-hoverspin="off"] .vs-spool-front, [data-hoverspin="off"] .vs-spool-side { transition: none; } .vs-shelf-spool .vs-spool-side, .vs-hero-shelf-spool .vs-spool-side, .vs-rack-tile .vs-spool-side { transition: transform 0.22s var(--vs-ease), filter 0.22s ease-out; transform-origin: 50% 100%; filter: drop-shadow(0 2px 3px rgba(0,0,0,0.55)); } .vs-shelf-spool:hover .vs-spool-side { transform: translateY(-4px) scale(1.05); filter: drop-shadow(0 6px 12px rgba(0,0,0,0.52)) drop-shadow(0 2px 4px rgba(0,0,0,0.40)) drop-shadow(0 1px 5px rgba(120,152,191,0.16)); } .vs-hero-shelf-spool:hover .vs-spool-side { transform: translateY(-6px) scale(1.08); } .vs-rack-tile:hover .vs-spool-side { transform: translateY(-5px) scale(1.07); } .vs-layer-std { display: none; } .vs-shelf-spool:hover .vs-layer-std, .vs-hero-shelf-spool:hover .vs-layer-std, .vs-rack-tile:hover .vs-layer-std, .vs-detail-full .vs-layer-std { display: block; } .vs-shelf-spool:hover .vs-layer-minimal, .vs-hero-shelf-spool:hover .vs-layer-minimal, .vs-rack-tile:hover .vs-layer-minimal, .vs-detail-full .vs-layer-minimal { display: none; } .vs-empty { text-align: center; padding: 60px 30px; background: var(--vs-surface); border: 1px solid var(--vs-hair); border-radius: var(--vs-radius-lg); } .vs-empty-title { font-family: var(--vs-sans); font-size: 20px; color: var(--vs-text); font-weight: 600; } .vs-empty-sub { font-family: var(--vs-sans); font-size: 13px; color: var(--vs-muted); margin-top: 8px; } .vs-form-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 24px; align-items: start; } .vs-form-main { display: flex; flex-direction: column; gap: 18px; min-width: 0; } .vs-form-section { padding: 22px 24px; } .vs-form-section-head { display: flex; align-items: center; gap: 12px; padding-bottom: 14px; border-bottom: 1px solid var(--vs-hair); margin-bottom: 18px; } .vs-form-section-num { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: linear-gradient(135deg, var(--vs-accent), var(--vs-accent-deep)); color: #fff; font-size: 11px; font-weight: 700; letter-spacing: 0.04em; box-shadow: 0 4px 12px -4px var(--vs-accent-glow); } .vs-form-section-title { margin: 0; font-family: var(--vs-sans); font-size: 15px; font-weight: 600; color: var(--vs-text); letter-spacing: -0.005em; } .vs-form-section-body { display: flex; flex-direction: column; gap: 14px; } .vs-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .vs-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; } .vs-field-label { font-family: var(--vs-sans); font-size: 11px; color: var(--vs-muted); text-transform: uppercase; letter-spacing: 0.08em; font-weight: 600; } .vs-field-hint { font-size: 11px; color: var(--vs-muted); } .vs-input { background: var(--vs-surface-2); border: 1px solid var(--vs-hair); border-radius: var(--vs-radius); padding: 10px 12px; color: var(--vs-text); font-family: var(--vs-sans); font-size: 13px; outline: none; transition: border-color 0.15s, box-shadow 0.15s; } .vs-input:focus { border-color: var(--vs-accent); box-shadow: 0 0 0 3px var(--vs-accent-glow); } .vs-textarea { resize: vertical; min-height: 64px; font-family: var(--vs-sans); } .vs-chip-group { display: flex; flex-wrap: wrap; gap: 6px; } .vs-chip-btn { background: var(--vs-surface-2); border: 1px solid var(--vs-hair); color: var(--vs-text-2); padding: 8px 12px; border-radius: 999px; font-family: var(--vs-sans); font-size: 12px; font-weight: 500; cursor: pointer; transition: all 0.15s; } .vs-chip-btn:hover { color: var(--vs-text); border-color: var(--vs-hair-2); } .vs-chip-btn.is-active { background: linear-gradient(135deg, var(--vs-accent), var(--vs-accent-deep)); border-color: transparent; color: #fff; box-shadow: 0 4px 12px -6px var(--vs-accent-glow); } .vs-swatch-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(30px, 1fr)); gap: 6px; } .vs-swatch-btn { aspect-ratio: 1; border-radius: 8px; border: 1px solid rgba(255, 255, 255, 0.06); cursor: pointer; transition: transform 0.15s, box-shadow 0.15s; position: relative; } .vs-swatch-btn:hover { transform: scale(1.08); } .vs-swatch-btn.is-active { box-shadow: 0 0 0 2px var(--vs-bg), 0 0 0 4px var(--vs-accent); transform: scale(1.08); } .vs-color-bead { width: 18px; height: 18px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.1); box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.4); } .vs-range { -webkit-appearance: none; appearance: none; width: 100%; height: 6px; background: var(--vs-surface-3); border-radius: 999px; outline: none; } .vs-range::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 18px; height: 18px; border-radius: 50%; background: linear-gradient(135deg, var(--vs-accent), var(--vs-accent-deep)); border: 2px solid var(--vs-bg); cursor: pointer; box-shadow: 0 0 12px var(--vs-accent-glow); } .vs-range::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: var(--vs-accent); border: 2px solid var(--vs-bg); cursor: pointer; } .vs-range-labels { display: flex; justify-content: space-between; font-size: 11px; color: var(--vs-muted); margin-top: 4px; font-variant-numeric: tabular-nums; } .vs-range-current { color: var(--vs-accent); font-weight: 600; } .vs-toggle-row { display: flex; align-items: center; gap: 10px; cursor: pointer; } .vs-toggle-row input { position: absolute; opacity: 0; pointer-events: none; } .vs-toggle-track { width: 36px; height: 20px; background: var(--vs-surface-3); border-radius: 999px; border: 1px solid var(--vs-hair); position: relative; transition: all 0.18s; } .vs-toggle-thumb { position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; background: var(--vs-text-2); border-radius: 50%; transition: all 0.18s; } .vs-toggle-row input:checked + .vs-toggle-track { background: linear-gradient(135deg, var(--vs-accent), var(--vs-accent-deep)); border-color: transparent; } .vs-toggle-row input:checked + .vs-toggle-track .vs-toggle-thumb { left: 18px; background: #fff; } .vs-form-actions { display: flex; justify-content: flex-end; gap: 10px; padding: 16px 0 4px; flex-wrap: wrap; } .vs-form-preview { position: sticky; top: 24px; display: flex; flex-direction: column; gap: 10px; } .vs-preview-card { padding: 20px; } .vs-preview-eyebrow { font-size: 10px; letter-spacing: 0.12em; color: var(--vs-accent); text-transform: uppercase; font-weight: 700; margin-bottom: 14px; } .vs-preview-spool-stage { display: flex; gap: 14px; justify-content: center; align-items: flex-end; padding: 12px 0 18px; border-bottom: 1px solid var(--vs-hair); margin-bottom: 14px; background: radial-gradient( ellipse 60% 30% at 50% 95%, rgba(0, 0, 0, 0.4), transparent 70% ); } .vs-preview-meta { display: flex; flex-direction: column; gap: 10px; } .vs-preview-sku { font-family: var(--vs-mono, ui-monospace, monospace); font-size: 11px; color: var(--vs-text-2); letter-spacing: 0.02em; } .vs-preview-tags { display: flex; flex-wrap: wrap; gap: 5px; } .vs-tag { font-size: 10px; padding: 3px 8px; border-radius: 999px; background: var(--vs-surface-2); color: var(--vs-text-2); border: 1px solid var(--vs-hair); font-weight: 500; letter-spacing: 0.02em; } .vs-tag--accent { background: var(--vs-accent-glow); color: var(--vs-accent); border-color: transparent; } .vs-appuses { display: flex; flex-direction: column; gap: 10px; } .vs-appuses-row { display: grid; grid-template-columns: 140px 1fr; gap: 12px; align-items: start; } .vs-appuses-cat { font-size: 12px; color: var(--vs-text-2); font-weight: 600; padding-top: 3px; } .vs-appuses-chips { display: flex; flex-wrap: wrap; gap: 6px; } @media (max-width: 560px) { .vs-appuses-row { grid-template-columns: 1fr; gap: 5px; } } .vs-preview-fill-track { height: 6px; background: var(--vs-surface-3); border-radius: 999px; overflow: hidden; } .vs-preview-fill-bar { height: 100%; background: linear-gradient(90deg, var(--vs-accent), var(--vs-accent-deep)); border-radius: 999px; transition: width 0.3s cubic-bezier(0.2, 1, 0.3, 1); } .vs-preview-fill-text { display: flex; justify-content: space-between; font-size: 11px; color: var(--vs-muted); margin-top: 5px; font-variant-numeric: tabular-nums; } .vs-preview-fill-pct { color: var(--vs-accent); font-weight: 600; } .vs-preview-row { display: flex; justify-content: space-between; font-size: 12px; color: var(--vs-text-2); padding: 6px 0; border-top: 1px dashed var(--vs-hair); } .vs-preview-row > span:first-child { color: var(--vs-muted); } .vs-preview-hint { font-size: 11px; color: var(--vs-muted); text-align: center; padding: 0 8px; } .vs-aside-stat-value { font-family: var(--vs-mono, ui-monospace, monospace); font-size: 13px; color: var(--vs-accent); letter-spacing: 0.02em; } .vs-aside-stat-label { font-size: 10px; color: var(--vs-muted); text-transform: uppercase; letter-spacing: 0.1em; margin-top: 2px; } @media (max-width: 980px) { .vs-form-layout { grid-template-columns: 1fr; } .vs-form-preview { position: static; } .vs-form-row { grid-template-columns: 1fr; } } @media (max-width: 980px) { .vs-shell { padding: 0 16px; } .vs-topbar { grid-template-columns: auto 1fr auto; gap: 12px; padding: 14px 0; } .vs-topbar { z-index: 200; } .vs-nav-tabs { display: none; position: fixed; top: 76px; left: 12px; right: 12px; z-index: 100; flex-direction: column; align-items: stretch; padding: 8px; gap: 2px; border-radius: var(--vs-radius); background: var(--vs-surface-2); border: 1px solid var(--vs-hair-2); box-shadow: 0 16px 40px rgba(0,0,0,0.5), 0 4px 12px rgba(0,0,0,0.3); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); justify-self: unset; white-space: normal; margin-top: 0; } .vs-nav-tab { text-align: left; padding: 12px 16px; border-radius: 8px; } .vs-nav-tabs, html[data-mode="light"] .vs-nav-tabs { background: var(--vs-surface); backdrop-filter: none; -webkit-backdrop-filter: none; } .vs-app:not(.is-sidebar-closed) .vs-nav-tabs { display: flex; } .vs-topbar-toggle { display: grid !important; } .vs-content { padding: 22px 0 60px; } .vs-stat-grid { grid-template-columns: repeat(2, 1fr); } .vs-stat-value { font-size: 24px; } .vs-two-col { grid-template-columns: 1fr; gap: 14px; } .vs-list-head { display: none; } .vs-list-row { grid-template-columns: 40px 1fr 80px; gap: 12px; padding: 10px 14px; } .vs-list-cell--id, .vs-list-cell--colors, .vs-list-cell--code, .vs-list-cell--shelf { display: none; } .vs-bench-row { grid-template-columns: 36px 1fr 80px; } .vs-bench-pct, .vs-bench-row > div:nth-child(5) { display: none; } .vs-shelf { grid-template-columns: 1fr; gap: 0; } .vs-shelf-header { border-right: 0; border-bottom: 1px solid var(--vs-hair-3); } } @media (max-width: 640px) { .vs-page-title { font-size: 24px; } .vs-card-grid { grid-template-columns: 1fr 1fr; } } .vs-shelf-name { letter-spacing: 0.012em; } .vs-shelf-count { letter-spacing: 0.05em; } .vs-shelves-section-count { letter-spacing: 0.05em; } .vs-storage-unit-name { letter-spacing: 0.01em; } .vs-storage-unit-stats { letter-spacing: 0.04em; } .vs-rack-tile-brand { letter-spacing: 0.04em; } .vs-rack-tile-mat { letter-spacing: 0.04em; } .vs-shelf-spool-mat { letter-spacing: 0.04em; } .vs-nav-tab { letter-spacing: 0.01em; } .vs-nav-tabs { border-color: rgba(255, 255, 255, 0.04); } .vs-rack-view { border-color: rgba(255, 255, 255, 0.04); box-shadow: var(--vs-shadow-sm), inset 0 1px 0 rgba(255, 255, 255, 0.03); } .vs-rack-row { box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.02); } .vs-hero-shelf { border-color: rgba(255, 255, 255, 0.04); } html { scrollbar-gutter: stable both-edges; background-color: var(--vs-bg); } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } } .vs-home { min-height: 100vh; overflow-x: clip; background: var(--vs-bg); background-image: radial-gradient( 1100px 550px at 72% -10%, rgba(100, 140, 200, 0.07), transparent 55% ), radial-gradient( 700px 500px at -5% 90%, rgba(80, 60, 150, 0.05), transparent 55% ); color: var(--vs-text); font-family: var(--vs-sans); } .vs-home-nav { display: flex; justify-content: space-between; align-items: center; max-width: 1720px; margin: 0 auto; padding: 14px 28px; border-bottom: 1px solid var(--vs-hair); position: sticky; top: 0; background: color-mix(in srgb, var(--vs-bg) 88%, transparent); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); z-index: 100; } .vs-home-logo-link { display: flex; align-items: center; gap: 10px; text-decoration: none; } .vs-home-logo-text { font-family: var(--vs-display); font-size: 20px; font-weight: 600; color: var(--vs-text); letter-spacing: -0.01em; } .vs-home-logo-text em { font-style: normal; color: var(--vs-blue); } .vs-home-nav-links { display: flex; align-items: center; gap: 18px; } .vs-home-mobile-menu { display: none; } .vs-home-mobile-menu-button { display: inline-flex; align-items: center; gap: 10px; padding: 12px 16px; min-height: 44px; box-sizing: border-box; border-radius: 999px; border: 1px solid var(--vs-hair-2); background: var(--vs-surface); color: var(--vs-text-2); cursor: pointer; font-size: 13px; line-height: 1; } .vs-home-mobile-menu-button::-webkit-details-marker { display: none; } .vs-home-mobile-menu-panel { display: none; position: absolute; top: calc(100% + 12px); right: 36px; min-width: 220px; background: var(--vs-surface); border: 1px solid var(--vs-hair-2); border-radius: 18px; padding: 14px; box-shadow: 0 22px 60px rgba(0, 0, 0, 0.35); backdrop-filter: blur(14px); z-index: 110; display: grid; gap: 10px; } .vs-home-mobile-menu[open] .vs-home-mobile-menu-panel { display: grid; } .vs-home-mobile-menu-panel .vs-home-nav-link { display: flex; align-items: center; min-height: 44px; padding: 4px 8px; font-size: 15px; } .vs-home-mobile-menu-panel .vs-home-nav-btn { display: flex; align-items: center; justify-content: center; min-height: 44px; } .vs-home-nav-link:focus-visible, .vs-home-nav-btn:focus-visible, .vs-home-mobile-menu-button:focus-visible, .vs-home-logo-link:focus-visible { outline: 2px solid var(--vs-accent); outline-offset: 3px; border-radius: 8px; } .vs-home-nav-link, .vs-home-nav-btn { transition: color 0.15s, opacity 0.15s, transform 0.15s; } .vs-home-nav-link { font-size: 13px; font-weight: 500; color: var(--vs-muted); text-decoration: none; } .vs-home-nav-link:hover { color: var(--vs-text); } .vs-home-nav-btn { font-size: 13px; font-weight: 600; color: var(--vs-bg-deep); background: var(--vs-accent); text-decoration: none; padding: 7px 17px; border-radius: 20px; letter-spacing: 0.01em; transition: opacity 0.15s; } .vs-home-nav-btn:hover { opacity: 0.85; } .vs-home-hero { padding: 32px 36px 56px; max-width: 1200px; margin: 0 auto; position: relative; text-align: center; } .vs-home-hero-glow { position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: min(1000px, 95%); height: 380px; border-radius: 50%; background: radial-gradient( ellipse, rgba(var(--vs-tint), 0.12) 0%, transparent 52% ); pointer-events: none; } .vs-home-hero-copy { max-width: 640px; margin: 0 auto 40px; text-align: center; position: relative; } .vs-home-hero-spools { position: relative; } @keyframes vs-spool-rollin { from { opacity: 0; transform: translateY(22px) rotate(-14deg) scale(0.92); } to { opacity: 1; transform: none; } } .vs-home-hero-spools .vs-home-face-item { animation: vs-spool-rollin 0.55s var(--vs-ease) both; } a.vs-home-face-item { display: flex; flex-direction: column; align-items: center; text-decoration: none; color: inherit; cursor: pointer; } a.vs-home-face-item img { transition: filter 0.25s ease; transform-origin: 50% 50%; } a.vs-home-face-item:hover img { animation: vs-hero-spool-spin 9s linear infinite; filter: drop-shadow(0 6px 18px rgba(0, 0, 0, 0.45)); } @keyframes vs-hero-spool-spin { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { a.vs-home-face-item:hover img { animation: none; } } .vs-home-hero-spools .vs-home-face-item:nth-child(1) { animation-delay: 0.04s; } .vs-home-hero-spools .vs-home-face-item:nth-child(2) { animation-delay: 0.10s; } .vs-home-hero-spools .vs-home-face-item:nth-child(3) { animation-delay: 0.16s; } .vs-home-hero-spools .vs-home-face-item:nth-child(4) { animation-delay: 0.22s; } .vs-home-hero-spools .vs-home-face-item:nth-child(5) { animation-delay: 0.28s; } .vs-home-hero-spools .vs-home-face-item:nth-child(6) { animation-delay: 0.34s; } .vs-home-hero-spools .vs-home-face-item:nth-child(7) { animation-delay: 0.40s; } .vs-home-hero-spools .vs-home-face-item:nth-child(8) { animation-delay: 0.46s; } .vs-home-eyebrow { font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--vs-accent); margin-bottom: 14px; } .vs-home-headline { font-size: 50px; font-weight: 700; line-height: 1.1; letter-spacing: -0.028em; margin: 0 0 18px; color: var(--vs-text); text-wrap: balance; } .vs-home-sub { font-size: 16px; color: var(--vs-text-2); line-height: 1.65; margin: 0 auto 30px; max-width: 420px; } .vs-home-bullets { list-style: none; padding: 0; margin: 0 auto 24px; max-width: 420px; display: flex; flex-direction: column; gap: 8px; text-align: left; } .vs-home-bullets li { font-size: 13px; color: var(--vs-text-2); padding-left: 18px; position: relative; } .vs-home-bullets li::before { content: "✦"; position: absolute; left: 0; color: var(--vs-accent); font-size: 9px; top: 3px; } .vs-home-cta-row { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; justify-content: center; } .vs-home-stats { display: flex; align-items: center; justify-content: center; gap: 20px; margin-top: 28px; } .vs-home-stat-num { font-size: 22px; font-weight: 700; color: var(--vs-text); } .vs-home-stat-label { font-size: 13px; color: var(--vs-muted); } .vs-home-stat-divider { width: 1px; height: 26px; background: var(--vs-hair-2); } .vs-home-demo-label--live { display: flex; align-items: center; justify-content: center; gap: 7px; } .vs-home-demo-label--live::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--vs-secondary); } .vs-home-hero .vs-home-cta-row { justify-content: center; } .vs-home-cta-primary { display: inline-block; padding: 12px 26px; background: var(--vs-accent); color: var(--vs-bg-deep); text-decoration: none; border-radius: 24px; font-size: 14px; font-weight: 700; letter-spacing: 0.01em; transition: opacity 0.15s, transform 0.12s; } .vs-home-cta-primary:hover { opacity: 0.86; transform: translateY(-1px); } .vs-home-cta-primary:focus-visible { outline: 2px solid var(--vs-accent); outline-offset: 3px; } .vs-cta-arrow { display: inline-block; transition: transform 0.18s var(--vs-ease); } .vs-home-cta-primary:hover .vs-cta-arrow, .vs-home-cta-primary:focus-visible .vs-cta-arrow { transform: translateX(4px); } .vs-home-cta-primary { position: relative; overflow: hidden; } .vs-home-cta-primary::after { content: ""; position: absolute; top: 0; left: -60%; width: 45%; height: 100%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.18), transparent); transform: skewX(-18deg); opacity: 0; pointer-events: none; } .vs-home-cta-primary:hover::after { animation: vs-cta-sheen 0.7s var(--vs-ease); } @keyframes vs-cta-sheen { 0% { left: -60%; opacity: 0; } 18% { opacity: 1; } 100% { left: 120%; opacity: 0; } } @keyframes vs-reveal-up { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } } .vs-reveal-up.vs-reveal-armed { opacity: 0; transform: translateY(24px); } .vs-reveal-up.vs-revealed { animation: vs-reveal-up 0.6s var(--vs-ease) both; } .vs-home-logo-link img { transition: transform 0.2s var(--vs-ease); } .vs-home-logo-link:hover img { animation: vs-logo-spin 3.5s linear 1; } .vs-home-depletion-pct--low { animation: vs-low-nudge 2.2s ease-in-out infinite; } @keyframes vs-low-nudge { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } } .vs-home-cta-primary--glow { box-shadow: 0 14px 26px rgba(22, 44, 80, 0.18); transition: opacity 0.15s, transform 0.12s, box-shadow 0.2s; } .vs-home-cta-primary--glow:hover { box-shadow: 0 16px 32px rgba(22, 44, 80, 0.22); } .vs-home-cta-primary--large { padding: 14px 34px; font-size: 15px; } .vs-home-cta-ghost { display: inline-block; padding: 12px 22px; border: 1px solid var(--vs-hair-2); color: var(--vs-text-2); text-decoration: none; border-radius: 24px; font-size: 14px; font-weight: 500; transition: border-color 0.15s, color 0.15s; } .vs-home-cta-ghost:hover { border-color: var(--vs-accent); color: var(--vs-text); } .vs-home-demo-wall { position: relative; padding: 44px 36px 30px; border-radius: 20px 20px 0 0; background: rgba(255,255,255,0.055); max-width: 1040px; width: 100%; margin: 0 auto; justify-self: center; } .vs-home-demo-wall .vs-storage-unit-frame { border-radius: 0; } .vs-home-demo-wall::before { content: ""; position: absolute; inset: -24px; background: radial-gradient(circle at 60% 12%, rgba(120,152,191,0.11), transparent 48%); filter: blur(32px); opacity: 0.9; z-index: -1; } @keyframes vs-demo-hint { 0% { opacity: 1; transform: scale(1); } 40% { opacity: 0.72; transform: scale(0.985); } 100% { opacity: 1; transform: scale(1); } } .vs-home-demo-units { animation: vs-demo-hint 1.6s ease-in-out 0.9s 1 both; } @media (hover: none) { .vs-home-demo-units:focus-within .vs-spool-specialty-overlay, .vs-home-demo-units:active .vs-spool-specialty-overlay { opacity: 1 !important; } } .vs-home-demo-label { font-size: 10px; font-weight: 600; letter-spacing: 0.14em; color: var(--vs-muted); text-align: center; margin-bottom: 14px; text-transform: uppercase; } .vs-home-demo-units { display: flex; gap: 16px; align-items: flex-start; justify-content: center; } .vs-home-demo-wall .vs-shelf { background: none; border: none; border-radius: 0; box-shadow: none; } .vs-home-demo-wall .vs-shelf + .vs-shelf { border-top: 1px solid var(--vs-hair); } .vs-home-storage-unit .vs-storage-unit-head { display: none; } .vs-home-demo-wall .vs-shelf-area { flex-wrap: nowrap; overflow-x: clip; overflow-y: visible; justify-content: center; } .vs-home-demo-wall .vs-shelf-spool { flex: 0 1 46px !important; min-width: 0; } .vs-home-demo-wall .vs-shelf-spool .vs-spool-side { width: 100%; height: auto; display: block; } @media (max-width: 1280px) { .vs-home-demo-wall .vs-shelf { grid-template-columns: 1fr; gap: 6px; } .vs-home-demo-wall .vs-shelf-header { border-right: none; padding-bottom: 2px; } } .vs-home-section { padding: 88px 36px; position: relative; } .vs-home-section-inner { max-width: 1200px; margin: 0 auto; } .vs-home-section-head { text-align: center; max-width: 560px; margin: 0 auto 52px; } .vs-home-section-title { font-size: 34px; font-weight: 700; letter-spacing: -0.022em; line-height: 1.18; margin: 0 0 12px; color: var(--vs-text); } .vs-home-section-sub { font-size: 15px; color: var(--vs-text-2); line-height: 1.65; margin: 0; } .vs-home-materials { background: linear-gradient(180deg, rgba(120,152,191,0.04) 0%, var(--vs-bg-tint) 60px); border-top: 1px solid var(--vs-hair); border-bottom: 1px solid var(--vs-hair); } .vs-home-mat-grid { display: flex; gap: 20px; justify-content: center; flex-wrap: wrap; } .vs-home-face-showcase { background: var(--vs-bg-deep, #0a0c14); border-top: 1px solid var(--vs-hair); border-bottom: 1px solid var(--vs-hair); } .vs-home-face-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 32px 24px; max-width: 1180px; margin: 0 auto; } @media (max-width: 640px) { .vs-home-face-grid { grid-template-columns: 1fr 1fr; gap: 24px 12px; } } .vs-home-depletion-grid { display: flex; align-items: center; justify-content: center; gap: clamp(6px, 2vw, 28px); flex-wrap: nowrap; } .vs-home-depletion-state { display: flex; flex-direction: column; align-items: center; gap: clamp(12px, 2vw, 18px); min-width: 0; padding: clamp(16px, 2.5vw, 30px) clamp(12px, 3vw, 40px); border: 1px solid var(--vs-hair); border-radius: 18px; background: rgba(255, 255, 255, 0.015); } .vs-home-depletion-renders { display: flex; align-items: center; gap: clamp(8px, 2vw, 24px); } .vs-home-depletion-renders > svg { width: clamp(64px, 18vw, 210px); height: auto; } .vs-home-depletion-renders .vs-shelf-spool { flex-shrink: 1 !important; } .vs-home-depletion-renders .vs-spool-side { height: clamp(64px, 18vw, 210px); width: auto; } .vs-home-depletion-caption { display: flex; flex-direction: column; align-items: center; gap: 4px; } .vs-home-depletion-name { font-size: clamp(12px, 2.4vw, 14px); font-weight: 600; color: var(--vs-text); } .vs-home-depletion-pct { font-family: var(--vs-mono); font-size: clamp(10px, 2.2vw, 12px); letter-spacing: 0.02em; color: var(--vs-text-2); } .vs-home-depletion-name--low, .vs-home-depletion-pct--low { color: var(--vs-danger); } .vs-home-depletion-arrow { color: var(--vs-muted); flex-shrink: 0; } .vs-home-nav-link--active { color: var(--vs-text); } .vs-feat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; max-width: 1000px; margin: 0 auto; } .vs-feat-card { padding: 26px 28px; border: 1px solid var(--vs-hair); border-radius: 16px; background: rgba(255, 255, 255, 0.015); } .vs-feat-card h3 { font-size: 16px; font-weight: 600; margin: 0 0 8px; color: var(--vs-text); } .vs-feat-card p { font-size: 14px; line-height: 1.6; color: var(--vs-text-2); margin: 0; } .vs-feat-catalog { max-width: 1000px; margin: 0 auto; } .vs-feat-catalog-more { text-align: center; margin-top: 22px; } .vs-feat-link { display: inline-block; font-size: 14px; font-weight: 600; color: var(--vs-accent); text-decoration: none; padding: 10px 18px; border: 1px solid var(--vs-hair); border-radius: 10px; transition: border-color 0.15s, color 0.15s; } .vs-feat-link:hover { border-color: var(--vs-accent); } .vs-link { color: var(--vs-accent); text-decoration: none; } .vs-meta { font-size: 11px; color: var(--vs-muted); } .vs-field-label { display: block; color: var(--vs-muted); font-size: 12px; margin-bottom: 4px; } .vs-input { width: 100%; background: var(--vs-bg-deep); border: 1px solid var(--vs-hair-2); border-radius: 4px; padding: 8px 10px; color: var(--vs-text); font-size: 14px; font-family: inherit; box-sizing: border-box; } .vs-input--area { resize: vertical; min-height: 120px; } .vs-spec-table { border-collapse: collapse; margin-top: 10px; font-size: 14px; min-width: 280px; max-width: 460px; width: 100%; } .vs-spec-table th, .vs-spec-table td { text-align: left; padding: 9px 14px; border-bottom: 1px solid var(--vs-hair-2); } .vs-spec-table th { color: var(--vs-muted); font-weight: 500; white-space: nowrap; width: 40%; } .vs-spec-table td { color: var(--vs-text); } .vs-spec-table tr:last-child th, .vs-spec-table tr:last-child td { border-bottom: none; } .vs-fil-hero { display: flex; flex-wrap: wrap; gap: 24px 48px; align-items: flex-start; margin: 16px 0 32px; } .vs-fil-hero-renders { display: flex; gap: 24px; align-items: flex-end; flex: 0 1 auto; min-width: 0; max-width: 100%; } .vs-fil-hero-renders > svg { flex-shrink: 1 !important; min-width: 0; height: auto; aspect-ratio: 1 / 1; } .vs-fil-hero-renders .vs-shelf-spool { flex-shrink: 1 !important; min-width: 0; } .vs-fil-hero-renders .vs-spool-side { max-width: 100%; height: auto; } @media (max-width: 560px) { .vs-fil-hero-renders { gap: 18px; } .vs-fil-hero-renders > svg { max-width: 64vw; } } .vs-fil-hero-info { flex: 1 1 340px; min-width: 280px; } .vs-fil-hero-info .vs-page-title { line-height: 1.3; } .vs-fil-card { flex: 1 1 340px; min-width: 280px; background: var(--vs-surface); border: 1px solid var(--vs-hair-2); border-radius: 14px; padding: 18px 20px; } .vs-fil-card > summary { cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 10px; user-select: none; } .vs-fil-card > summary::-webkit-details-marker { display: none; } .vs-fil-card > summary h2 { margin: 0; font-size: 16px; color: var(--vs-text); } .vs-fil-card > summary::after { content: ""; width: 9px; height: 9px; border-right: 2px solid var(--vs-accent); border-bottom: 2px solid var(--vs-accent); transform: rotate(45deg); transition: transform 0.15s var(--vs-ease, ease); flex-shrink: 0; } .vs-fil-card[open] > summary::after { transform: rotate(225deg); } .vs-fil-card > summary:hover h2 { color: var(--vs-accent); } .vs-fil-card > summary:hover::after { border-color: var(--vs-accent); } .vs-fil-card[open] > summary { margin-bottom: 12px; } .vs-fil-own-grid { display: flex; flex-wrap: wrap; gap: 14px; margin: 12px 0 28px; } .vs-fil-own { display: flex; align-items: center; gap: 14px; background: var(--vs-surface); border: 1px solid var(--vs-hair-2); border-radius: 14px; padding: 12px 16px; text-decoration: none; min-width: 230px; } @media (max-width: 560px) { .vs-fil-own-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .vs-fil-own { min-width: 0; gap: 10px; padding: 10px 12px; } .vs-fil-own > svg { width: 56px; height: 56px; } } .vs-star-rate { display: inline-flex; flex-direction: row-reverse; } .vs-star-rate label { cursor: pointer; font-size: 26px; line-height: 1; padding: 2px 3px; color: var(--vs-faint); transition: color 0.15s var(--vs-ease, ease); } .vs-star-rate input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; } .vs-star-rate label:has(input:checked), .vs-star-rate label:has(input:checked) ~ label, .vs-star-rate label:hover, .vs-star-rate label:hover ~ label { color: var(--vs-warning); } .vs-star-rate label:has(input:focus-visible) { outline: 2px solid var(--vs-info); outline-offset: 1px; border-radius: 6px; } .vs-color-chip { display: inline-flex; align-items: center; gap: 8px; background: var(--vs-surface); border: 1px solid var(--vs-hair-2); border-radius: 20px; padding: 5px 12px 5px 6px; font-family: inherit; font-size: 13px; color: var(--vs-text-2); } button.vs-color-chip, a.vs-color-chip { cursor: pointer; } a.vs-color-chip { text-decoration: none; } button.vs-color-chip:hover, button.vs-color-chip:focus-visible, a.vs-color-chip:hover, a.vs-color-chip:focus-visible { border-color: var(--vs-accent); } .vs-color-chip-dot { width: 20px; height: 20px; border-radius: 50%; border: 1px solid #444; flex-shrink: 0; } .vs-color-chip .vs-hex { display: none; font-size: 12px; color: var(--vs-muted); letter-spacing: 0.02em; } .vs-color-chip:hover .vs-hex, .vs-color-chip:focus-visible .vs-hex { display: inline; } .vs-color-chip .vs-td-badge { font-size: 10.5px; font-weight: 600; letter-spacing: 0.03em; color: var(--vs-muted); background: var(--vs-faint-bg, rgba(127, 127, 150, 0.14)); border-radius: 5px; padding: 1px 5px; flex-shrink: 0; } .vs-fil-sib { display: flex; flex-direction: column; align-items: center; gap: 10px; width: 128px; padding: 14px 10px; background: var(--vs-surface); border: 1px solid var(--vs-hair-2); border-radius: 14px; text-decoration: none; text-align: center; transition: border-color 0.15s, transform 0.15s; } .vs-fil-sib:hover { border-color: var(--vs-accent); transform: translateY(-2px); } .vs-fil-sib span { font-size: 12px; color: var(--vs-text-2); line-height: 1.35; } @media (prefers-reduced-motion: reduce) { .vs-fil-sib, .vs-fil-sib:hover { transition: none; transform: none; } } .vs-fil-section { margin: 18px 0 0; background: var(--vs-surface); border: 1px solid var(--vs-hair); border-radius: 12px; padding: 18px 20px; } .vs-fil-section > h2 { font-size: 16px; color: var(--vs-text); margin: 0 0 12px; } .vs-fil-section-lead { font-size: 14px; color: var(--vs-text-2); line-height: 1.6; max-width: 680px; margin: 0 0 14px; } .vs-fil-sw-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 28px; } .vs-fil-sw-grid h2 { font-size: 15px; color: var(--vs-text); margin: 0 0 10px; } @media (max-width: 640px) { .vs-fil-sw-grid { grid-template-columns: 1fr; } } .vs-prop-grid { display: flex; flex-wrap: wrap; gap: 10px; } .vs-prop-chip { display: inline-flex; align-items: center; gap: 8px; background: var(--vs-surface); border: 1px solid var(--vs-hair-2); border-radius: 10px; padding: 7px 13px; font-size: 13px; color: var(--vs-text-2); } .vs-prop-chip .vs-prop-level { font-weight: 600; color: var(--vs-text); } .vs-prop-chip[data-tone="good"] .vs-prop-level { color: var(--vs-success); } .vs-prop-chip[data-tone="caution"] .vs-prop-level { color: var(--vs-warning); } .vs-trait-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; max-width: 640px; } .vs-trait-list li { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; color: var(--vs-text-2); line-height: 1.5; } .vs-trait-list svg { flex-shrink: 0; margin-top: 2px; } .vs-trait-list--good svg { color: var(--vs-success); } .vs-trait-list--caution svg { color: var(--vs-warning); } .vs-tag-row { display: flex; flex-wrap: wrap; gap: 8px; } .vs-tag { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--vs-text-2); background: var(--vs-surface-2); border: 1px solid var(--vs-hair-2); border-radius: 20px; padding: 5px 13px; } .vs-tag--muted { background: transparent; color: var(--vs-muted); } .vs-qr-overlay { position: fixed; inset: 0; z-index: 4000; background: #05070d; display: flex; flex-direction: column; align-items: center; justify-content: center; } .vs-qr-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .vs-qr-top { position: absolute; top: 0; left: 0; right: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; color: #e8ecf2; font-size: 14px; font-weight: 600; background: linear-gradient(rgba(5, 7, 13, 0.85), transparent); } .vs-qr-close { background: rgba(5, 7, 13, 0.6); border: 1px solid rgba(255, 255, 255, 0.25); color: #e8ecf2; border-radius: 50%; width: 38px; height: 38px; font-size: 22px; line-height: 1; cursor: pointer; } .vs-qr-frame { position: relative; z-index: 1; width: min(62vw, 280px); aspect-ratio: 1 / 1; border-radius: 18px; box-shadow: 0 0 0 9999px rgba(5, 7, 13, 0.45); outline: 2px solid rgba(255, 255, 255, 0.8); } .vs-qr-hint { position: absolute; bottom: 36px; left: 0; right: 0; z-index: 2; text-align: center; color: rgba(232, 236, 242, 0.85); font-size: 13px; padding: 0 24px; } @media (max-width: 560px) { .vs-qr-btn-label { display: none; } } .vs-feat-header { max-width: 760px; margin: 0 auto; padding: 60px 24px 36px; text-align: center; } .vs-feat-title { font-size: 40px; font-weight: 700; line-height: 1.12; letter-spacing: -0.025em; margin: 8px 0 16px; color: var(--vs-text); text-wrap: balance; } .vs-feat-lede { font-size: 16px; line-height: 1.6; color: var(--vs-text-2); max-width: 560px; margin: 0 auto 26px; } .vs-feat-rows { max-width: 1060px; margin: 0 auto; display: flex; flex-direction: column; gap: 76px; } .vs-feat-row { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; } .vs-feat-row-visual { display: flex; justify-content: center; order: -1; } .vs-feat-row--rev .vs-feat-row-visual { order: 1; } .vs-feat-eyebrow { font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--vs-accent); margin-bottom: 10px; } .vs-feat-row-title { font-size: 27px; font-weight: 700; line-height: 1.2; letter-spacing: -0.02em; margin: 0 0 12px; color: var(--vs-text); } .vs-feat-row-text { font-size: 15px; line-height: 1.6; color: var(--vs-text-2); margin: 0 0 18px; } .vs-feat-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; } .vs-feat-list li { position: relative; padding-left: 26px; font-size: 14px; color: var(--vs-text); line-height: 1.45; } .vs-feat-list li::before { content: "✓"; position: absolute; left: 0; top: 0; color: var(--vs-accent); font-weight: 700; } .vs-feat-render-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px 18px; } .vs-feat-shelf-wall { padding: 18px; border-radius: 14px 14px 0 0; width: 100%; } .vs-feat-shelf-wall::before { display: none; } @media (max-width: 820px) { .vs-feat-rows { gap: 52px; } .vs-feat-row { grid-template-columns: 1fr; gap: 28px; } .vs-feat-row-visual, .vs-feat-row--rev .vs-feat-row-visual { order: 2; } .vs-feat-title { font-size: 32px; } } .vs-home-face-item { display: flex; flex-direction: column; align-items: center; gap: 10px; } .vs-home-face-item svg, .vs-home-face-item canvas { max-width: 100%; height: auto; transition: filter 0.4s; animation: vs-collector-spin 12s linear infinite; animation-play-state: paused; } .vs-home-face-item:hover svg, .vs-home-face-item:hover canvas { animation-play-state: running; } @media (prefers-reduced-motion: reduce) { .vs-home-face-item svg, .vs-home-face-item canvas { animation: none; } } .vs-home-face-label { font-family: var(--vs-sans); display: flex; flex-direction: column; align-items: center; gap: 3px; text-align: center; } .vs-home-face-brand { font-size: 10px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--vs-muted); } .vs-home-face-name { font-size: 13px; font-weight: 600; color: var(--vs-text); } .vs-home-mat-item { display: flex; flex-direction: column; align-items: center; gap: 10px; } .vs-home-mat-label { font-size: 10px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--vs-muted); } .vs-home-studio-section { background: linear-gradient(180deg, var(--vs-bg-tint) 0%, var(--vs-bg) 100%); border-top: 1px solid var(--vs-hair); border-bottom: 1px solid var(--vs-hair); } .vs-home-studio-inner { display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: 56px; align-items: center; } .vs-home-studio-inner .vs-home-demo-wall { max-width: none; margin: 0; } @keyframes vs-spool-dropin { from { opacity: 0; transform: translateY(-22px); } to { opacity: 1; transform: none; } } .vs-home-demo-wall.vs-reveal-armed .vs-shelf-spool { opacity: 0; } .vs-home-demo-wall.vs-revealed .vs-shelf-spool { animation: vs-spool-dropin 0.5s var(--vs-ease) both; } .vs-home-demo-wall.vs-revealed .vs-shelf-area .vs-shelf-spool:nth-child(1) { animation-delay: 0.03s; } .vs-home-demo-wall.vs-revealed .vs-shelf-area .vs-shelf-spool:nth-child(2) { animation-delay: 0.07s; } .vs-home-demo-wall.vs-revealed .vs-shelf-area .vs-shelf-spool:nth-child(3) { animation-delay: 0.11s; } .vs-home-demo-wall.vs-revealed .vs-shelf-area .vs-shelf-spool:nth-child(4) { animation-delay: 0.15s; } .vs-home-demo-wall.vs-revealed .vs-shelf-area .vs-shelf-spool:nth-child(5) { animation-delay: 0.19s; } .vs-home-demo-wall.vs-revealed .vs-shelf-area .vs-shelf-spool:nth-child(6) { animation-delay: 0.23s; } .vs-home-demo-wall.vs-revealed .vs-shelf-area .vs-shelf-spool:nth-child(7) { animation-delay: 0.27s; } .vs-home-demo-wall.vs-revealed .vs-shelf-area .vs-shelf-spool:nth-child(8) { animation-delay: 0.31s; } .vs-home-demo-wall.vs-revealed .vs-shelf-area .vs-shelf-spool:nth-child(9) { animation-delay: 0.35s; } @media (max-width: 860px) { .vs-home-studio-inner { grid-template-columns: 1fr; gap: 28px; } } .vs-home-workflow-section { background: linear-gradient(180deg, var(--vs-bg-tint) 0%, var(--vs-bg) 100%); border-top: 1px solid var(--vs-hair); border-bottom: 1px solid var(--vs-hair); } .vs-home-workflow-section .vs-home-section-inner { max-width: 1000px; } .vs-home-workflow-inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 400px); gap: 64px; align-items: center; } .vs-home-workflow-copy { max-width: 420px; grid-column: 2; grid-row: 1; } .vs-home-workflow-panel { grid-column: 1; grid-row: 1; display: flex; flex-direction: column; gap: 24px; padding: 24px; background-color: rgba(12, 16, 26, 0.84); background-image: radial-gradient(ellipse 90% 70% at 35% 20%, transparent 35%, rgba(0,0,0,0.12) 100%), linear-gradient(180deg, rgba(255,255,255,0.018) 0%, transparent 40%, rgba(0,0,0,0.10) 100%), linear-gradient(165deg, rgba(255,255,255,0.018) 0%, transparent 45%, rgba(0,0,0,0.055) 100%), radial-gradient(circle, rgba(200,215,240,0.030) 1.0px, rgba(200,215,240,0.014) 1.7px, transparent 1.7px); background-size: auto, auto, auto, 20px 20px; border: none; border-radius: var(--vs-radius-lg); box-shadow: inset 2px 0 0 rgba(200,215,240,0.06), inset 0 0 40px rgba(0,0,0,0.22); } .vs-home-workflow-panel-head { display: grid; gap: 12px; } .vs-home-workflow-panel-label { font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--vs-muted); } .vs-home-workflow-panel-eyebrow { font-size: 12px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--vs-text-2); } .vs-home-workflow-panel-title { font-size: 22px; line-height: 1.25; margin: 0; color: var(--vs-text); } .vs-home-workflow-panel-sub { font-size: 15px; line-height: 1.7; color: var(--vs-muted); margin: 0; max-width: 46ch; } .vs-home-wf-chips { display: grid; gap: 0; } .vs-home-wf-chip { display: flex; align-items: center; gap: 14px; padding: 12px 2px; } .vs-home-wf-chip + .vs-home-wf-chip { border-top: 1px solid var(--vs-hair); } .vs-home-wf-chip-spools { margin-left: auto; display: flex; align-items: center; gap: 5px; flex-shrink: 0; } .vs-home-wf-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; position: relative; } .vs-home-wf-chip--inuse { border-left-color: var(--vs-secondary); } .vs-home-wf-chip--inuse .vs-home-wf-dot { background: var(--vs-secondary); color: var(--vs-secondary); } .vs-home-wf-chip--inuse .vs-home-wf-dot::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: currentColor; animation: vs-wf-pulse 2.4s var(--vs-ease) infinite; pointer-events: none; } @keyframes vs-wf-pulse { 0% { transform: scale(1); opacity: 0.5; } 70% { transform: scale(2.4); opacity: 0; } 100% { transform: scale(2.4); opacity: 0; } } .vs-home-wf-chip--drying { border-left-color: var(--vs-warning); } .vs-home-wf-chip--drying .vs-home-wf-dot { background: var(--vs-warning); color: var(--vs-warning); } .vs-home-wf-chip--tostore { border-left-color: var(--vs-accent); } .vs-home-wf-chip--tostore .vs-home-wf-dot { background: var(--vs-accent); color: var(--vs-accent); } .vs-home-wf-chip--arrival { border-left-color: #80cc60; } .vs-home-wf-chip--arrival .vs-home-wf-dot { background: #80cc60; color: #80cc60; } .vs-home-wf-chip--bench { border-left-color: var(--vs-text-2); } .vs-home-wf-chip--bench .vs-home-wf-dot { background: var(--vs-text-2); color: var(--vs-text-2); } .vs-home-wf-label { font-size: 13px; font-weight: 600; color: var(--vs-text); margin-bottom: 2px; letter-spacing: 0.01em; } .vs-home-wf-desc { font-size: 12px; color: var(--vs-muted); } .vs-home-founder-section { position: relative; overflow: hidden; } .vs-home-founder-photo { width: 100%; display: block; max-height: 420px; object-fit: cover; object-position: center 40%; transition: transform 0.6s var(--vs-ease); } .vs-home-founder-section:hover .vs-home-founder-photo { transform: scale(1.04); } .vs-home-founder-quote { position: absolute; bottom: 0; left: 0; right: 0; padding: 60px 48px 40px; background: linear-gradient(0deg, rgba(13,18,23,1) 0%, rgba(13,18,23,0.92) 50%, rgba(13,18,23,0.4) 80%, transparent 100%); } .vs-home-founder-text { font-size: 20px; font-weight: 500; color: var(--vs-text); line-height: 1.5; margin: 0 0 12px; max-width: 680px; font-style: italic; } .vs-home-founder-attr { font-size: 13px; color: var(--vs-accent); font-weight: 600; } .vs-home-faq-section { padding: 72px 36px; border-top: 1px solid var(--vs-hair); } .vs-home-faq-section .vs-home-section-inner { max-width: 640px; } .vs-home-faq-section .vs-home-eyebrow { text-align: center; margin-bottom: 32px; } .vs-home-faq-list { display: flex; flex-direction: column; gap: 8px; border: 1px solid var(--vs-hair); border-radius: 16px; padding: 8px; } .vs-home-faq-item { background: var(--vs-surface); padding: 0; border-radius: 10px; overflow: hidden; } .vs-home-faq-q { font-size: 14px; font-weight: 600; color: var(--vs-text); padding: 24px 30px; cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; user-select: none; } .vs-home-faq-q::-webkit-details-marker { display: none; } .vs-home-faq-q::after { content: "+"; font-size: 18px; font-weight: 300; color: var(--vs-faint); flex-shrink: 0; transition: transform 0.2s; } .vs-home-faq-item[open] .vs-home-faq-q::after { transform: rotate(45deg); } .vs-home-faq-a { font-size: 13px; color: var(--vs-text-2); line-height: 1.65; padding: 4px 30px 24px; margin: 0; } .vs-home-cta-section { position: relative; background: var(--vs-bg-tint); border-top: 1px solid var(--vs-hair); } .vs-home-cta-glow { position: absolute; top: -60px; left: 50%; transform: translateX(-50%); width: 700px; height: 300px; border-radius: 50%; background: radial-gradient( ellipse, rgba(var(--vs-tint), 0.07) 0%, transparent 65% ); pointer-events: none; } .vs-home-cta-headline { font-size: 40px; font-weight: 700; letter-spacing: -0.022em; margin: 0 0 14px; color: var(--vs-text); } .vs-home-cta-sub { font-size: 16px; color: var(--vs-text-2); line-height: 1.6; max-width: 420px; margin: 0 auto 32px; } .vs-home-cta-fine { font-size: 12px; color: var(--vs-text-2); margin-top: 14px; letter-spacing: 0.03em; } .vs-sf { position: relative; border-top: 1px solid var(--vs-hair); margin-top: 72px; } .vs-strip { display: block; width: 100%; } .vs-sf-inner { max-width: 1180px; margin: 0 auto; padding: 52px 36px 32px; display: grid; grid-template-columns: 1.3fr 2.7fr; gap: 48px; } .vs-sf-brand { display: flex; flex-direction: column; gap: 16px; max-width: 320px; } .vs-sf-mark { display: inline-flex; align-items: center; gap: 9px; font-family: var(--vs-display); font-size: 20px; font-weight: 600; letter-spacing: -0.01em; color: var(--vs-text); text-decoration: none; width: fit-content; } .vs-sf-mark em { font-style: normal; color: var(--vs-blue); } .vs-sf-tagline { font-size: 13px; line-height: 1.65; color: var(--vs-muted); margin: 0; } .vs-sf-shelf { display: flex; align-items: flex-end; gap: 8px; padding-bottom: 7px; border-bottom: 1px solid var(--vs-hair); width: fit-content; } .vs-sf-social { display: inline-flex; align-items: center; gap: 8px; width: fit-content; padding: 8px 15px; font-size: 13px; font-weight: 600; color: var(--vs-text-2); text-decoration: none; border: 1px solid var(--vs-hair-2); border-radius: 20px; transition: color 0.15s, border-color 0.15s, background 0.15s; } .vs-sf-social:hover { color: var(--vs-text); border-color: var(--vs-accent); background: rgba(var(--vs-tint), 0.08); } .vs-sf-cols { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px 24px; } .vs-sf-col { display: flex; flex-direction: column; gap: 12px; } .vs-sf-col-title { font-size: 11px; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: var(--vs-faint); margin-bottom: 2px; } .vs-sf-col a { font-size: 13px; color: var(--vs-muted); text-decoration: none; transition: color 0.15s; width: fit-content; } .vs-sf-col a:hover { color: var(--vs-text); } .vs-sf-col-socials { display: flex; gap: 14px; margin-top: 4px; } .vs-sf-col-socials a { display: inline-flex; color: var(--vs-muted); transition: color 0.15s, transform 0.15s var(--vs-ease); } .vs-sf-col-socials a:hover { color: var(--vs-accent); transform: translateY(-1px); } .vs-sf-col-socials svg { display: block; } .vs-sf-bottom { max-width: 1180px; margin: 0 auto; padding: 18px 36px 30px; border-top: 1px solid var(--vs-hair); display: flex; align-items: center; justify-content: space-between; gap: 8px 20px; flex-wrap: wrap; font-size: 12px; color: var(--vs-muted); } .vs-sf-built { color: var(--vs-faint); } .vs-sf-heart { display: inline-block; line-height: 0; color: var(--vs-heart, var(--vs-accent)); } .vs-sf-heart svg { width: 12px; height: 12px; fill: currentColor; display: inline-block; vertical-align: -2px; } .vs-sf-built:hover .vs-sf-heart, .vs-footer-copy:hover .vs-sf-heart { animation: vs-footer-beat 0.9s ease-in-out infinite; } @keyframes vs-footer-beat { 0%, 100% { transform: scale(1); } 30% { transform: scale(1.28); } } @media (prefers-reduced-motion: reduce) { .vs-sf-built:hover .vs-sf-heart, .vs-footer-copy:hover .vs-sf-heart { animation: none; } } @media (max-width: 860px) { .vs-home-headline { font-size: 36px; } .vs-home-section-title { font-size: 26px; } .vs-home-cta-headline { font-size: 30px; } .vs-home-nav { padding: 14px 20px; } .vs-home-nav-links { gap: 12px; } .vs-home-hero { padding: 56px 20px 0; } .vs-home-section { padding: 60px 20px; } .vs-home-demo-units { flex-direction: column; } .vs-home-hero { grid-template-columns: 1fr; } .vs-home-hero-copy { text-align: center; margin: 0 auto 36px; } .vs-home-hero .vs-home-cta-row { justify-content: center; } .vs-home-stats { justify-content: center; } .vs-home-hero-glow { left: 50%; top: 0; width: 520px; height: 220px; } .vs-home-demo-wall { width: 100%; } .vs-home-workflow-inner { display: flex; flex-direction: column; gap: 32px; align-items: stretch; } .vs-sf-inner { grid-template-columns: 1fr; gap: 36px; padding: 40px 24px 28px; } .vs-sf-cols { grid-template-columns: repeat(2, 1fr); } .vs-sf-bottom { padding: 16px 24px 26px; justify-content: center; text-align: center; } } @media (max-width: 520px) { .vs-home-nav { padding: 12px 16px; } .vs-home-logo-text { font-size: 16px; } .vs-home-nav-links { gap: 10px; display: none; } .vs-home-mobile-menu { display: inline-flex; } .vs-home-mobile-menu-panel { right: 16px; left: 16px; min-width: auto; width: auto; } .vs-home-nav-btn { padding: 6px 14px; font-size: 12px; } } .vs-studio-page { position: relative; gap: 4px; margin-top: -14px; } .vs-studio-page::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 155px; background: radial-gradient(ellipse 60% 60% at 25% 0%, rgba(255,255,255,0.020) 0%, transparent 70%), radial-gradient(ellipse 40% 40% at 75% 0%, rgba(255,255,255,0.011) 0%, transparent 60%); pointer-events: none; z-index: 0; } .vs-studio-head { align-items: center; position: relative; z-index: 1; } .vs-studio-head .vs-studio-subtitle { font-size: 11px; text-align: right; opacity: 0.60; } .vs-studio-search { display: flex; align-items: center; justify-self: end; } .vs-studio-search-input { background-color: var(--vs-surface); border: 1px solid var(--vs-hair-2); border-radius: 8px; padding: 5px 14px 5px 32px; color: var(--vs-text); font-family: var(--vs-sans); font-size: 12px; width: 210px; outline: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='0 0 24 24' fill='none' stroke='%236a7a90' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: 11px center; transition: border-color 0.18s, background-color 0.18s; } .vs-studio-search-input::placeholder { color: var(--vs-faint); opacity: 0.55; } .vs-studio-search-input:focus { border-color: var(--vs-accent); background-color: var(--vs-surface-2); } .vs-studio-search-input::-webkit-search-cancel-button { opacity: 0.4; cursor: pointer; } .vs-studio-head .vs-eyebrow { font-size: 10.5px; opacity: 0.75; } .vs-studio-head .vs-page-title { } .vs-studio-subtitle { font-size: 13px; color: var(--vs-muted); margin-top: 0; letter-spacing: 0.02em; } .vs-studio-hint { font-size: 11px; font-style: italic; color: var(--vs-faint); opacity: 0.7; } .vs-studio-ambient { display: flex; flex-wrap: wrap; gap: 7px; align-items: center; padding: 6px 0 0; width: 100%; position: relative; z-index: 1; } .vs-ambient-chip { display: inline-flex; align-items: center; gap: 7px; padding: 5px 11px; border-radius: 20px; font-size: 12px; font-weight: 500; letter-spacing: 0.025em; background: var(--vs-surface-2); border: 1px solid rgba(255, 255, 255, 0.05); color: var(--vs-muted); } .vs-ambient-dot { width: 5px; height: 5px; border-radius: 50%; background: currentColor; flex-shrink: 0; opacity: 0.85; } .vs-ambient-chip--inuse { color: var(--vs-secondary); } .vs-ambient-chip--drying { color: var(--vs-warning); } .vs-ambient-chip--tostore { color: var(--vs-accent); } .vs-ambient-chip--swatch { color: var(--vs-text-2); } .vs-ambient-dot--drying { background: var(--vs-warning); } .vs-ambient-dot--tostore { background: var(--vs-accent); } .vs-ambient-dot--swatch { background: var(--vs-text-2); } .vs-ambient-dot--unassigned { background: var(--vs-muted); } .vs-ambient-dot--printing { background: var(--vs-secondary); } .vs-ambient-dot--attention { background: var(--vs-danger); } .vs-ambient-dot--recent { background: var(--vs-blue); } .vs-widget-customize { margin-bottom: 10px; } .vs-widget-customize-btn { display: inline-flex; align-items: center; gap: 5px; background: var(--vs-surface-2, #171b27); border: 1px solid var(--vs-border, #2a3142); color: var(--vs-text-2); font-size: 12px; padding: 5px 10px; border-radius: 7px; cursor: pointer; } .vs-widget-customize-btn:hover { color: var(--vs-text); border-color: var(--vs-accent); } .vs-widget-customize-btn.is-active { color: var(--vs-accent); border-color: var(--vs-accent); background: color-mix(in srgb, var(--vs-accent) 18%, var(--vs-surface-2, #171b27)); } .vs-widget-menu { position: relative; } .vs-widget-customize-panel { position: absolute; top: calc(100% + 6px); left: 0; z-index: 30; width: max-content; min-width: 300px; max-width: min(440px, 92vw); max-height: min(70vh, 460px); overflow-y: auto; padding: 8px 12px 10px; background: var(--vs-surface-2, #171b27); border: 1px solid var(--vs-border, #2a3142); border-radius: 8px; box-shadow: 0 14px 34px rgba(0, 0, 0, 0.4); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 16px; align-content: start; } .vs-widget-customize-panel .vs-widget-group-label, .vs-widget-customize-panel .vs-widget-selectall, .vs-widget-customize-panel .vs-widget-reset { grid-column: 1 / -1; } .vs-widget-selectall { display: flex; gap: 8px; margin-bottom: 4px; } .vs-widget-selectall button { flex: 1; background: none; border: 1px solid var(--vs-hair-2); border-radius: 6px; padding: 5px 8px; font-family: inherit; font-size: 12px; font-weight: 600; color: var(--vs-text-2); cursor: pointer; transition: border-color 0.15s, color 0.15s; } .vs-widget-selectall button:hover { border-color: var(--vs-accent); color: var(--vs-text); } .vs-widget-row--locked { cursor: default; opacity: 0.75; } .vs-widget-row--locked input { cursor: default; } .vs-widget-customize-row { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--vs-text-2); cursor: pointer; } .vs-widget-customize-row input { accent-color: var(--vs-accent); cursor: pointer; } .vs-widget-reset { margin-top: 6px; width: 100%; background: none; border: 1px solid var(--vs-border, #2a3142); color: var(--vs-text-2); font-size: 12px; border-radius: 6px; padding: 6px 8px; cursor: pointer; transition: border-color 0.15s, color 0.15s; } .vs-widget-reset:hover { border-color: var(--vs-accent); color: var(--vs-text); } .vs-hero { position: relative; display: flex; align-items: center; gap: 22px; padding: 18px 24px; margin-bottom: 14px; border-radius: 14px; background: linear-gradient(120deg, rgba(var(--vs-tint), 0.14), rgba(var(--vs-tint), 0.04)); border: 1px solid rgba(var(--vs-tint), 0.26); box-shadow: 0 6px 22px rgba(0, 0, 0, 0.18); text-decoration: none; color: inherit; } .vs-hero-lead { flex: 1 1 auto; min-width: 0; } .vs-hero-eyebrow { font-size: 11px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--vs-accent); } .vs-hero-title { font-size: clamp(1.25rem, 2.4vw, 1.7rem); font-weight: 800; letter-spacing: -0.01em; color: var(--vs-text); margin-top: 2px; } .vs-hero-sub { font-size: 13px; color: var(--vs-text-2); margin-top: 3px; } .vs-hero-summary { display: flex; gap: 26px; align-items: flex-start; flex-wrap: wrap; } .vs-hero-stat { min-width: 64px; } .vs-hero-stat-num { font-size: 28px; font-weight: 800; line-height: 1; color: var(--vs-text); } .vs-hero-stat-unit { font-size: 12px; color: var(--vs-text-2); margin-top: 3px; } .vs-hero-stat-meta { font-size: 11.5px; color: var(--vs-faint); margin-top: 3px; } .vs-hero-stat--last { align-self: center; } .vs-hero-stat-name { font-size: 14px; font-weight: 700; color: var(--vs-text); margin-top: 2px; } .vs-hero--dynamic { cursor: pointer; transition: border-color 0.15s, box-shadow 0.15s; } .vs-hero--dynamic:hover { border-color: rgba(var(--vs-tint), 0.45); box-shadow: 0 8px 26px rgba(0, 0, 0, 0.24); } .vs-hero-dot { width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0; } .vs-hero-cta { font-size: 13px; font-weight: 600; color: var(--vs-accent); white-space: nowrap; flex-shrink: 0; } @media (max-width: 760px) { .vs-hero { flex-direction: column; align-items: flex-start; gap: 14px; } .vs-hero-summary { gap: 18px; } } .vs-stats { margin-bottom: 14px; } .vs-stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(104px, 1fr)); gap: 10px; } .vs-stat-tile { display: flex; flex-direction: column; gap: 5px; padding: 13px 16px; border-radius: 12px; background: linear-gradient(150deg, rgba(var(--vs-tint), 0.10), rgba(var(--vs-tint), 0.03)); border: 1px solid rgba(var(--vs-tint), 0.18); text-decoration: none; color: inherit; transition: border-color 0.15s, transform 0.15s, box-shadow 0.15s; } .vs-stat-tile:hover { border-color: rgba(var(--vs-tint), 0.42); transform: translateY(-2px); box-shadow: 0 8px 22px rgba(0, 0, 0, 0.20); } .vs-stat-num { display: flex; align-items: baseline; gap: 2px; font-size: clamp(1.5rem, 2.2vw, 1.95rem); font-weight: 800; line-height: 1; letter-spacing: -0.02em; color: var(--vs-text); font-variant-numeric: tabular-nums; } .vs-stat-unit { font-size: 0.5em; font-weight: 700; letter-spacing: 0; color: var(--vs-accent); } .vs-stat-label { font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--vs-faint); } .vs-stats-fun { position: relative; height: 1.5em; margin-top: 10px; padding-left: 2px; font-size: 12.5px; color: var(--vs-text-2); } .vs-stats-fun--rotate .vs-stats-fun-line { position: absolute; left: 2px; top: 0; white-space: nowrap; opacity: 0; animation: vs-fun-cycle 15s infinite both; animation-delay: calc(var(--i) * 5s); } @keyframes vs-fun-cycle { 0% { opacity: 0; transform: translateY(5px); } 3%, 28% { opacity: 1; transform: translateY(0); } 33%, 100% { opacity: 0; transform: translateY(-5px); } } @media (prefers-reduced-motion: reduce) { .vs-stats-fun--rotate .vs-stats-fun-line { animation: none; opacity: 0; } .vs-stats-fun--rotate .vs-stats-fun-line:first-child { opacity: 1; position: relative; } } .vs-maker { margin-bottom: 14px; padding: 16px 18px; border-radius: 14px; background: linear-gradient(135deg, rgba(var(--vs-tint), 0.08), rgba(var(--vs-tint), 0.02)); border: 1px solid rgba(var(--vs-tint), 0.18); } .vs-maker-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; } .vs-maker-eyebrow { font-size: 11px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--vs-accent); } .vs-maker-years { font-size: 11px; font-weight: 600; color: var(--vs-text-2); padding: 2px 8px; border-radius: 999px; background: rgba(var(--vs-tint), 0.14); } .vs-maker-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 12px; margin-bottom: 12px; } .vs-maker-stat { display: flex; flex-direction: column; gap: 3px; } .vs-maker-num { font-size: 1.5rem; font-weight: 800; line-height: 1; color: var(--vs-text); font-variant-numeric: tabular-nums; } .vs-maker-lbl { font-size: 11px; color: var(--vs-faint); } .vs-maker-faves { display: flex; flex-wrap: wrap; gap: 18px; padding-top: 12px; border-top: 1px solid rgba(var(--vs-tint), 0.14); } .vs-maker-fave { display: flex; flex-direction: column; gap: 2px; } .vs-maker-fave-k { font-size: 10px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--vs-faint); } .vs-maker-fave-v { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--vs-text); } .vs-maker-swatch { width: 13px; height: 13px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.18); flex-shrink: 0; } .vs-maker-badges { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 13px; } .vs-maker-badge { font-size: 12px; font-weight: 600; color: var(--vs-text); padding: 4px 10px; border-radius: 999px; background: rgba(var(--vs-tint), 0.12); border: 1px solid rgba(var(--vs-tint), 0.22); white-space: nowrap; } .vs-widget-group-label { font-size: 10px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--vs-faint); padding: 7px 2px 1px; } .vs-widget-customize-panel > .vs-widget-group-label:first-child { padding-top: 2px; } .vs-pie-wrap { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; padding: 8px 4px 4px; } .vs-pie { width: clamp(124px, 30%, 196px); height: auto; aspect-ratio: 1 / 1; flex-shrink: 0; } .vs-pie circle { transition: stroke-dasharray 0.4s var(--vs-ease, ease); } .vs-pie-legend { display: grid; grid-template-columns: repeat(auto-fit, minmax(148px, 1fr)); gap: 5px 18px; flex: 1 1 200px; min-width: 140px; align-content: center; } .vs-pie-leg { display: flex; align-items: center; gap: 8px; font-size: 12px; } .vs-pie-dot { width: 10px; height: 10px; border-radius: 2px; flex-shrink: 0; } .vs-pie-leg-name { color: var(--vs-text); flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .vs-pie-leg-val { color: var(--vs-faint); white-space: nowrap; } .vs-growth { padding: 6px 2px 2px; } .vs-growth-plot { position: relative; } .vs-growth-svg { width: 100%; height: 110px; display: block; } .vs-growth-y { position: absolute; left: 5px; font-size: 10.5px; color: var(--vs-faint); pointer-events: none; } .vs-growth-y--top { top: 2px; } .vs-growth-y--bot { bottom: 4px; } .vs-growth-axis { position: relative; height: 15px; margin-top: 5px; } .vs-growth-tick { position: absolute; font-size: 11px; color: var(--vs-faint); white-space: nowrap; } .vs-pie-donut { filter: drop-shadow(0 3px 5px rgba(0, 0, 0, 0.28)); } .vs-wheel { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 4px 6px; } .vs-wheel .vs-pie { width: clamp(140px, 52%, 190px); height: auto; aspect-ratio: 1 / 1; } .vs-wheel-hint { font-size: 11px; color: var(--vs-faint); } .vs-wheel--clickable { cursor: pointer; transition: transform 0.15s var(--vs-ease, ease); } .vs-wheel--clickable:hover { transform: scale(1.02); } .vs-wheel--clickable:hover .vs-wheel-hint { color: var(--vs-accent); } .vs-wheel-modal { position: fixed; inset: 0; z-index: 9998; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, 0.7); backdrop-filter: blur(4px); padding: 4vmin; } .vs-wheel-modal-card { display: flex; flex-direction: column; align-items: center; background: var(--vs-surface, #1b1b27); border: 1px solid var(--vs-hair-2, #33333f); border-radius: 18px; padding: 14px 20px 18px; box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6); max-width: 94vw; } .vs-wheel-modal-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%; margin-bottom: 6px; } .vs-wheel-modal-title { font-size: 15px; font-weight: 700; color: var(--vs-text); } .vs-wheel-modal-stage { display: flex; justify-content: center; } .vs-wheel-modal-stage .vs-pie { width: min(78vmin, 660px); height: auto; aspect-ratio: 1 / 1; } .vs-wheel-modal-sub { margin-top: 10px; font-size: 12px; color: var(--vs-faint); } .vs-studio-top { margin-bottom: 6px; } .vs-studio-cols { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: 14px; align-items: start; margin-top: 10px; } .vs-studio-col-main { display: flex; flex-direction: column; gap: 12px; min-width: 0; } .vs-studio-col-side { min-width: 0; } .vs-studio-col-main .vs-stats, .vs-studio-col-main .vs-maker { margin-bottom: 0; } .vs-studio-col-side .vs-block { width: 100%; max-width: none; } @media (max-width: 860px) { .vs-studio-cols { grid-template-columns: 1fr; } } .vs-studio-top-toggle { display: inline-flex; align-items: center; gap: 6px; background: none; border: none; cursor: pointer; font-family: inherit; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--vs-faint); padding: 2px 0 8px; } .vs-studio-top-toggle:hover { color: var(--vs-muted); } .vs-studio-top-toggle .vs-widget-collapse { font-size: 18px; line-height: 1; color: var(--vs-accent); width: auto; } .vs-palette { margin-bottom: 14px; } .vs-palette-band { display: flex; height: 46px; border-radius: 10px; overflow: hidden; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05), 0 4px 16px rgba(0, 0, 0, 0.18); } .vs-palette-chip { flex: 1 1 0; min-width: 2px; transition: flex-grow 0.22s var(--vs-ease); } .vs-palette-chip:hover { flex-grow: 7; } .vs-palette-meta { display: flex; justify-content: space-between; margin-top: 6px; font-size: 11px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--vs-faint); } .vs-palette-id { margin-top: 5px; font-size: 11px; font-style: italic; letter-spacing: 0.02em; color: var(--vs-faint); } .vs-nextaction { display: flex; align-items: center; gap: 10px; padding: 10px 16px; margin-bottom: 14px; border-radius: 10px; background: rgba(var(--vs-tint), 0.08); border: 1px solid rgba(var(--vs-tint), 0.20); color: var(--vs-text-2); text-decoration: none; font-size: 13px; transition: border-color 0.15s, background 0.15s; } .vs-nextaction:hover { border-color: rgba(var(--vs-tint), 0.40); background: rgba(var(--vs-tint), 0.12); } .vs-nextaction-icon { display: inline-flex; color: var(--vs-accent); flex-shrink: 0; } .vs-nextaction-text { flex: 1 1 auto; color: var(--vs-text); } .vs-nextaction-cta { color: var(--vs-accent); font-weight: 600; white-space: nowrap; flex-shrink: 0; } .vs-queue-row-trigger { margin-left: auto; background: none; border: none; color: var(--vs-muted); cursor: pointer; display: inline-flex; align-items: center; opacity: 0.55; padding: 2px; } .vs-queue-row:hover .vs-queue-row-trigger { opacity: 1; } .vs-studio-toolbar { display: flex; gap: 8px; flex-wrap: wrap; align-items: flex-start; margin-bottom: 12px; position: relative; } .vs-widget-grid { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-start; margin: 0 0 14px; } .vs-block { flex: 0 1 100%; min-width: 0; box-sizing: border-box; } .vs-block--s { flex-basis: calc(33.333% - 8px); } .vs-block--m { flex-basis: calc(50% - 6px); } .vs-block--l { flex-basis: 100%; } @media (max-width: 1000px) { .vs-block--s, .vs-block--m { flex-basis: 100%; } } .vs-widget-grid.is-editing .vs-block { outline: 1px dashed var(--vs-border, #2a3142); outline-offset: 3px; border-radius: 10px; cursor: grab; } .vs-block-edit { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 2px 2px 6px; } .vs-block-drag { font-size: 11.5px; color: var(--vs-muted, #8a8aa0); display: flex; gap: 5px; align-items: center; font-weight: 600; } .vs-block-sizes { display: flex; gap: 3px; } .vs-block-size { background: var(--vs-surface-2, #171b27); border: 1px solid var(--vs-border, #2a3142); color: var(--vs-text-2); font-size: 10px; font-weight: 700; width: 21px; height: 19px; border-radius: 4px; cursor: pointer; } .vs-block-size.is-active { background: var(--vs-accent); color: #fff; border-color: var(--vs-accent); } .vs-widget-grid-empty { flex: 1 1 100%; text-align: center; color: var(--vs-muted, #8a8aa0); font-size: 12px; padding: 16px; border: 1px dashed var(--vs-border, #2a3142); border-radius: 10px; } .vs-widget-spools { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 8px; } .vs-widget-spool { cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 2px; transition: transform 0.1s ease; } .vs-widget-spool:hover { transform: translateY(-2px); } .vs-dry-timer { font-variant-numeric: tabular-nums; white-space: nowrap; font-weight: 600; } .vs-widget-spool .vs-dry-timer { font-size: 9px; line-height: 1; color: var(--vs-dry-active); } .vs-widget-spool .vs-dry-timer.is-overdue { color: var(--vs-dry-overdue); } .vs-detail-dry { display: flex; align-items: center; gap: 6px; margin-top: 12px; font-size: 13px; color: var(--vs-dry-active); } .vs-detail-dry.is-overdue { color: var(--vs-dry-overdue); } .vs-dry-nudge { margin-left: 6px; font-size: 11px; font-weight: 600; color: var(--vs-dry-overdue); } .vs-gear-badge { margin: 6px 0 2px; } .vs-gear-timer { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; color: var(--vs-dry-active); } .vs-gear-timer.is-overdue { color: var(--vs-dry-overdue); } .vs-gear-timer.is-idle { color: var(--vs-faint); font-weight: 500; font-style: italic; } .vs-widget-title { cursor: pointer; user-select: none; } .vs-widget-title--static { cursor: default; } .vs-widget-title .vs-queue-count { margin-left: auto; } .vs-widget-collapse { margin-left: 2px; flex-shrink: 0; font-size: 18px; line-height: 1; color: var(--vs-text-2, #b5b9c6); width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center; border-radius: 6px; border: 1px solid transparent; } .vs-widget-title:hover .vs-widget-collapse { color: var(--vs-text, #e6e9f0); background: rgba(255, 255, 255, 0.07); border-color: rgba(255, 255, 255, 0.10); } .vs-studio-main--full { width: 100%; } .vs-studio-toolbar-search { width: 240px; max-width: 46vw; } .vs-widget-card { background-color: rgba(12, 16, 26, 0.84); background-image: linear-gradient(180deg, rgba(255,255,255,0.018) 0%, transparent 40%, rgba(0,0,0,0.10) 100%), radial-gradient(circle, rgba(200,215,240,0.030) 1.0px, rgba(200,215,240,0.014) 1.7px, transparent 1.7px); background-size: auto, 20px 20px; border: none; border-radius: 10px; padding: 10px 12px; box-shadow: inset 0 0 30px rgba(0,0,0,0.20); } .vs-storage-head { display: flex; align-items: center; gap: 8px; margin: 6px 0 10px; color: var(--vs-text-2); } .vs-storage-head-title { text-transform: uppercase; letter-spacing: 0.06em; font-size: 11px; font-weight: 700; } .vs-storage-toc { display: flex; flex-direction: column; gap: 3px; padding: 4px 2px 12px; } .vs-storage-toc-row { font-size: 12.5px; line-height: 1.5; color: var(--vs-text-2); } .vs-storage-toc-row--sub { padding-left: 18px; color: var(--vs-faint); } .vs-storage-toc-room { font-weight: 600; color: var(--vs-text); } .vs-storage-toc-sep { color: var(--vs-faint); } .vs-widget-empty { color: var(--vs-muted, #8a8aa0); font-size: 12px; padding: 10px 2px 4px; } .vs-skel { display: flex; flex-direction: column; gap: 8px; } .vs-skel-row { height: 30px; border-radius: 8px; background: var(--vs-hair); animation: vs-skel-pulse 1.2s ease-in-out infinite; } @keyframes vs-skel-pulse { 0%, 100% { opacity: .45; } 50% { opacity: .9; } } .vs-donut-scene { display: inline-block; } .vs-donut { width: 100%; height: 100%; animation: vs-donut-float 3.4s ease-in-out infinite; transform-origin: center 80%; } .vs-donut svg { width: 100%; height: 100%; display: block; } @keyframes vs-donut-float { 0%, 100% { transform: translateY(0) rotate(-1.2deg); } 50% { transform: translateY(-7px) rotate(1.2deg); } } .vs-donut--static .vs-donut { animation: none; } @media (prefers-reduced-motion: reduce) { .vs-donut { animation: none !important; } } .vs-donut-day { position: relative; display: flex; align-items: center; gap: 18px; padding: 12px 22px 14px; margin-bottom: 18px; border-radius: 16px; background: linear-gradient(120deg, rgba(255,141,187,0.16), rgba(127,184,255,0.10)); border: 1px solid rgba(255,141,187,0.32); box-shadow: 0 6px 24px rgba(255,141,187,0.12); } .vs-donut-day-title { font-size: 19px; font-weight: 800; color: #ffd0e2; } html[data-mode="light"] .vs-donut-day-title { color: #c2185b; } .vs-donut-day-sub { font-size: 13px; color: var(--vs-text-2); margin-top: 3px; } .vs-donut-day-x { position: absolute; top: 8px; right: 12px; background: none; border: none; color: var(--vs-muted, #8a8aa0); font-size: 20px; line-height: 1; cursor: pointer; } .vs-donut-day-x:hover { color: var(--vs-text, #e6e9f0); } .vs-ritual { position: fixed; inset: 0; z-index: 1500; display: flex; align-items: center; justify-content: center; cursor: pointer; animation: vs-ritual-dissolve 0.8s var(--vs-ease) 9.0s forwards; } .vs-ritual-veil { position: absolute; inset: 0; background: radial-gradient(120% 90% at 50% 42%, rgba(24, 29, 41, 0.92) 0%, var(--vs-bg) 55%, var(--vs-bg-deep) 100%); opacity: 0; animation: vs-ritual-veil-in 0.35s ease-out both; } .vs-ritual-stage { position: relative; display: flex; flex-direction: column; align-items: center; gap: clamp(14px, 3vh, 26px); } .vs-ritual-hero { position: relative; display: grid; place-items: center; } .vs-ritual-hero > * { grid-area: 1 / 1; } .vs-ritual-halo { width: 460px; height: 460px; max-width: 86vw; border-radius: 50%; background: radial-gradient(circle, rgba(127, 184, 255, 0.38) 0%, rgba(var(--vs-tint), 0.15) 42%, transparent 70%); opacity: 0; pointer-events: none; z-index: 0; animation: vs-ritual-halo-in 1.6s var(--vs-ease) 3.6s forwards; } .vs-ritual-spool { position: absolute; top: -4px; right: 14px; z-index: 0; opacity: 0; filter: blur(0.4px); animation: vs-ritual-spool-in 1.3s var(--vs-ease) 0.1s forwards; } .vs-ritual-spin { transform-origin: 50% 50%; animation: vs-ritual-idle 18s linear infinite; } .vs-printer { z-index: 1; width: clamp(330px, 74vw, 440px); height: auto; overflow: visible; } .vs-pr-frame rect { fill: #414e6a; opacity: 0; animation: vs-pr-fade 0.5s ease 0.2s forwards; } .vs-pr-bed { opacity: 0; transform: translateY(16px); animation: vs-pr-bed-in 0.7s var(--vs-ease) 0.5s forwards; } .vs-pr-bed-heat { opacity: 0; animation: vs-pr-heat 1.9s ease 1.6s forwards; } .vs-pr-noz-heat { opacity: 0; animation: vs-pr-heat 2.1s ease 2.5s forwards; } .vs-pr-zlift { transform: translateY(-150px); animation: vs-pr-descend 1.0s var(--vs-ease) 3.0s forwards; } .vs-pr-carriage { transform: translateX(-50px); animation: vs-pr-traverse 1.5s ease-in-out 4.8s forwards; } .vs-pr-ooze { transform-box: fill-box; transform-origin: 50% 0%; transform: scaleY(0); animation: vs-pr-ooze 0.55s var(--vs-ease) 3.6s forwards; } .vs-pr-poop { transform-box: fill-box; transform-origin: 50% 100%; transform: scaleY(0); animation: vs-pr-poop 2.2s var(--vs-ease) 3.8s forwards; } .vs-pr-line { stroke-dasharray: 124; stroke-dashoffset: 124; animation: vs-pr-draw 1.5s ease-in-out 4.8s forwards; } .vs-pr-screen { opacity: 0; animation: vs-pr-fade 0.5s ease 0.4s forwards; } .vs-scr { font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; font-size: 10px; fill: #bfe3cf; letter-spacing: 0.2px; opacity: 0; } .vs-scr-cycle { animation: vs-scr-cycle 1.0s ease var(--d) forwards; } .vs-scr-last { animation: vs-scr-in 0.5s ease var(--d) forwards; } .vs-scr-name { font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; font-size: 9px; fill: #8fb0d8; letter-spacing: 0.2px; opacity: 0; animation: vs-scr-in 0.5s ease var(--d) forwards; } @keyframes vs-scr-cycle { 0% { opacity: 0; } 16% { opacity: 1; } 80% { opacity: 1; } 100% { opacity: 0; } } @keyframes vs-scr-in { to { opacity: 1; } } @keyframes vs-pr-fade { to { opacity: 1; } } @keyframes vs-pr-bed-in { to { opacity: 1; transform: translateY(0); } } @keyframes vs-pr-heat { 0% { opacity: 0; } 60% { opacity: 0.55; } 100% { opacity: 0.32; } } @keyframes vs-pr-descend { to { transform: translateY(4px); } } @keyframes vs-pr-traverse { to { transform: translateX(70px); } } @keyframes vs-pr-ooze { to { transform: scaleY(1); } } @keyframes vs-pr-poop { 0% { transform: scaleY(0) translate(0, 0) rotate(0deg); opacity: 1; } 20% { transform: scaleY(1) translate(0, 0) rotate(0deg); opacity: 1; } 58% { transform: scaleY(1) translate(0, 0) rotate(0deg); opacity: 1; } 82% { transform: scaleY(1) translate(-34px, 12px) rotate(-52deg); opacity: 1; } 100% { transform: scaleY(1) translate(-64px, 41px) rotate(-118deg); opacity: 1; } } @keyframes vs-pr-draw { to { stroke-dashoffset: 0; } } @keyframes vs-ritual-spool-in { from { opacity: 0; transform: scale(0.92); } to { opacity: 0.6; transform: scale(1); } } @keyframes vs-ritual-idle { from { transform: rotate(0); } to { transform: rotate(360deg); } } @keyframes vs-ritual-halo-in { 0% { opacity: 0; transform: scale(0.7); } 50% { opacity: 1; transform: scale(1.05); } 100% { opacity: 0.5; transform: scale(1); } } .vs-ritual-caption { position: relative; width: min(360px, 86vw); } .vs-warm-log { display: flex; flex-direction: column; gap: 9px; padding: 13px 16px; border-radius: 8px; background: linear-gradient(180deg, rgba(12, 16, 24, 0.94), rgba(8, 11, 18, 0.94)); border: 1px solid rgba(var(--vs-tint), 0.35); box-shadow: inset 0 0 16px rgba(60, 90, 140, 0.16), 0 3px 12px rgba(0, 0, 0, 0.45); animation: vs-warm-log-out 0.4s var(--vs-ease) 6.5s forwards; } .vs-warm-row { display: flex; align-items: center; gap: 10px; opacity: 0; transform: translateY(4px); animation: vs-warm-row-in 0.35s var(--vs-ease) var(--d) both; } .vs-warm-label { font-size: 0.88rem; color: var(--vs-text-2); letter-spacing: 0.01em; } .vs-warm-label b { color: var(--vs-text); font-weight: 600; } .vs-warm-ind { position: relative; width: 16px; height: 16px; flex-shrink: 0; } .vs-warm-ring { position: absolute; inset: 0; border-radius: 50%; border: 1.6px solid rgba(var(--vs-tint), 0.30); border-top-color: var(--vs-accent); animation: vs-warm-spin 0.6s linear var(--d) infinite, vs-warm-ring-out 0.2s linear calc(var(--d) + 0.7s) forwards; } .vs-warm-check { position: absolute; left: 5px; top: 1px; width: 4px; height: 8px; border: solid var(--vs-accent); border-width: 0 1.8px 1.8px 0; transform: rotate(45deg) scale(0.4); opacity: 0; animation: vs-warm-check-in 0.3s var(--vs-ease) calc(var(--d) + 0.7s) forwards; } @keyframes vs-warm-row-in { to { opacity: 1; transform: translateY(0); } } @keyframes vs-warm-spin { to { transform: rotate(360deg); } } @keyframes vs-warm-ring-out { to { opacity: 0; } } @keyframes vs-warm-check-in { to { opacity: 1; transform: rotate(45deg) scale(1); } } @keyframes vs-warm-log-out { to { opacity: 0; transform: translateY(-6px); } } .vs-ritual-payoff { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding-bottom: 16vh; z-index: 3; pointer-events: none; } .vs-ritual-line { display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; opacity: 0; animation: vs-ritual-line-in 0.9s var(--vs-ease) 6.8s both; } .vs-ritual-kicker { width: 46px; height: 1px; background: var(--vs-faint); } .vs-ritual-text { font-size: clamp(1.7rem, 4.4vw, 2.6rem); font-weight: 700; letter-spacing: 0.01em; color: var(--vs-text); text-shadow: 0 0 28px rgba(var(--vs-tint), 0.6), 0 2px 10px rgba(0, 0, 0, 0.5); } .vs-ritual-sub { font-size: clamp(0.95rem, 1.8vw, 1.2rem); color: var(--vs-text-2); } .vs-ritual-skip { position: fixed; top: 18px; right: 20px; background: none; border: 0; color: var(--vs-faint); font-size: 0.82rem; letter-spacing: 0.04em; cursor: pointer; padding: 6px 10px; z-index: 2; } .vs-ritual-skip:hover { color: var(--vs-text-2); } @keyframes vs-ritual-veil-in { to { opacity: 1; } } @keyframes vs-ritual-line-in { from { opacity: 0; transform: translateY(10px) scale(0.98); } to { opacity: 1; transform: translateY(0) scale(1); } } @keyframes vs-ritual-dissolve { from { opacity: 1; } to { opacity: 0; pointer-events: none; visibility: hidden; } } @media (prefers-reduced-motion: reduce) { .vs-ritual { animation: vs-ritual-dissolve-rm 0.5s linear 2.4s forwards; } .vs-ritual-veil { animation: none; opacity: 1; } .vs-ritual-halo { animation: none; opacity: 0.45; transform: scale(1); } .vs-ritual-spool { animation: none; opacity: 0.32; } .vs-ritual-spin { animation: none; } .vs-pr-frame rect, .vs-pr-bed { animation: none; opacity: 1; transform: none; } .vs-pr-bed-heat, .vs-pr-noz-heat { animation: none; opacity: 0.3; } .vs-pr-zlift { animation: none; transform: translateY(0); } .vs-pr-carriage { animation: none; transform: translateX(50px); } .vs-pr-ooze { animation: none; transform: scaleY(1); } .vs-pr-poop { animation: none; transform: none; } .vs-pr-line { animation: none; stroke-dashoffset: 0; } .vs-pr-screen { animation: none; opacity: 1; } .vs-scr-cycle { animation: none; opacity: 0; } .vs-scr-last { animation: none; opacity: 1; } .vs-scr-name { animation: none; opacity: 1; } .vs-warm-log { display: none; } .vs-ritual-line { animation: none; opacity: 1; transform: none; } } @keyframes vs-ritual-dissolve-rm { to { opacity: 0; pointer-events: none; visibility: hidden; } } .vs-donut-crumbs { position: absolute; left: 10px; bottom: 7px; width: 640px; max-width: 82%; height: 26px; pointer-events: none; } .vs-crumb { position: absolute; width: 13px; height: 4px; border-radius: 2px; opacity: 0.9; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.25); } .vs-studio-layout { display: flex; gap: 12px; align-items: flex-start; margin-top: 0; } .vs-studio-main { flex: 1 1 0; min-width: 0; } .vs-studio-sidebar { width: 260px; flex-shrink: 0; position: sticky; top: 80px; background: var(--vs-surface); border: 1px solid rgba(255, 255, 255, 0.04); border-radius: var(--vs-radius-sm); padding: 16px; box-shadow: var(--vs-shadow-sm); } .vs-queue-header { font-size: 10px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--vs-faint); margin-bottom: 16px; } .vs-queue-group { margin-bottom: 20px; } .vs-queue-group:last-child { margin-bottom: 0; } .vs-queue-group-title { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 500; color: var(--vs-text-2); letter-spacing: 0.015em; margin-bottom: 8px; } .vs-queue-count { margin-left: auto; font-size: 11px; color: var(--vs-muted); font-weight: 500; } .vs-queue-row { display: flex; align-items: center; gap: 8px; padding: 3px 6px; margin: 0 -6px; border-radius: 5px; transition: background 0.16s var(--vs-ease); } .vs-queue-row:hover { background: rgba(120,152,191,0.07); } .vs-queue-row-name { font-size: 11px; color: var(--vs-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; } .vs-queue-more { font-size: 11px; color: var(--vs-faint); padding: 2px 0 0 26px; } .vs-queue-action { padding: 0; } .vs-queue-link { font-size: 11px; color: var(--vs-accent); text-decoration: none; opacity: 0.75; transition: opacity 0.15s; } .vs-queue-link:hover { opacity: 1; } .vs-studio-main .vs-shelves-section { margin-bottom: 32px; padding-top: 6px; } .vs-studio-main .vs-shelves-section::before { display: none; } .vs-studio-main .vs-storage-unit { margin-bottom: 14px; } .vs-studio-main .vs-shelves-section-head { margin-top: 4px; margin-bottom: -5px; } .vs-storage-unit-icon { display: inline-block; vertical-align: middle; margin-right: 6px; margin-top: -1px; opacity: 0.45; } .vs-room-icon { display: inline-block; vertical-align: middle; margin-right: 6px; margin-top: -1px; opacity: 0.72; } .vs-studio-main .vs-shelves-section-title { font-size: 13px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(175, 192, 215, 0.68); } .vs-studio-main .vs-shelves-section-title::before { display: none; } .vs-studio-main .vs-shelves-section-title::after { display: none; } .vs-studio-main .vs-shelves-section-count { display: none; } .vs-studio-main .vs-storage-unit-name { color: rgba(155, 175, 205, 0.54); font-size: 13px; } .vs-studio-main .vs-storage-unit-head { display: flex; align-items: center; overflow: hidden; background: rgba(18, 23, 36, 0.96); } .vs-studio-main .vs-storage-unit-head::after { content: ""; order: 1; flex: 1; height: 1px; background: repeating-linear-gradient( 90deg, rgba(255,255,255,0.055) 0px, rgba(255,255,255,0.055) 2px, transparent 2px, transparent 8px ); margin: 0 12px; } .vs-studio-main .vs-storage-unit-stats { order: 3; flex-shrink: 0; } .vs-storage-unit-hint { order: 2; flex-shrink: 0; font-size: 10px; font-style: italic; color: var(--vs-muted); opacity: 0.55; margin-right: 16px; } .vs-studio-main .vs-storage-unit-frame { padding: 16px; background: var(--vs-bg-deep); box-shadow: inset 0 5px 20px rgba(0,0,0,0.38), inset 0 1px 0 rgba(255,255,255,0.03), 0 2px 6px rgba(0,0,0,0.22); } .vs-studio-main .vs-shelf { grid-template-columns: 1fr; border: none; background: linear-gradient( 180deg, rgba(0,0,0,0.22) 0%, rgba(0,0,0,0.06) 15%, rgba(255,255,255,0.00) 50%, rgba(255,255,255,0.020) 82%, rgba(255,255,255,0.013) 100% ); box-shadow: inset 0 4px 16px rgba(0,0,0,0.34), inset 0 -1px 0 rgba(255,255,255,0.038), inset 0 1px 0 rgba(255,255,255,0.012), inset 0 -8px 14px rgba(255,255,255,0.013); } .vs-studio-main .vs-shelf-header { flex-direction: row; align-items: center; gap: 10px; border-right: none; border-bottom: 1px solid rgba(255,255,255,0.028); padding: 7px 20px 6px; } .vs-studio-main .vs-shelf-name { font-size: 11px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: #c0d0e4; } .vs-studio-main .vs-shelf-count { font-size: 10px; font-family: var(--vs-mono); color: #a3bad4; background: rgba(var(--vs-tint), 0.08); border: 1px solid rgba(var(--vs-tint), 0.12); border-radius: 4px; padding: 1px 6px; opacity: 1; } .vs-studio-main .vs-shelf-count::before { content: ""; } .vs-studio-main .vs-shelf-count::after { content: ""; } .vs-studio-main .vs-shelf-area { position: relative; padding: 26px 22px 18px; min-height: 200px; gap: 7px; border-radius: 0 0 var(--vs-radius) var(--vs-radius); box-shadow: inset 0 8px 22px rgba(0,0,0,0.16), inset 0 -2px 6px rgba(0,0,0,0.07); overflow-x: auto; overflow-y: visible; overscroll-behavior-x: contain; flex-wrap: nowrap; } .vs-studio-main .vs-shelf-area::-webkit-scrollbar { height: 3px; } .vs-studio-main .vs-shelf-area::-webkit-scrollbar-track { background: transparent; } .vs-studio-main .vs-shelf-area::-webkit-scrollbar-thumb { background: rgba(120,152,191,0.22); border-radius: 2px; } .vs-studio-main .vs-shelf-area::-webkit-scrollbar-thumb:hover { background: rgba(120,152,191,0.44); } .vs-studio-main .vs-shelf-area.is-sparse { min-height: 0; padding-top: 16px; padding-bottom: 14px; } .vs-studio-main .vs-shelf-area:has(.vs-shelf-empty) { min-height: 52px; padding: 0 22px; } .vs-studio-main .vs-shelf-area::after { content: ""; position: absolute; bottom: 0; left: 8%; right: 8%; height: 1px; background: linear-gradient( 90deg, transparent 0%, rgba(214,224,238,0.05) 25%, rgba(214,224,238,0.068) 50%, rgba(214,224,238,0.05) 75%, transparent 100% ); pointer-events: none; } .vs-studio-main .vs-shelf-area:has(.vs-shelf-spool:hover) { background: radial-gradient( ellipse 80% 60% at 50% 95%, rgba(120,152,191,0.07) 0%, transparent 62% ); } .vs-studio-main .vs-storage-unit-shelves { gap: 10px; } .vs-studio-main .vs-shelf-area > .vs-shelf-spool:nth-child(4n) { margin-right: 3px; } .vs-studio-main .vs-shelf-area > .vs-shelf-spool:nth-child(7n) { margin-left: 2px; } .vs-studio-main .vs-shelf-area:has(.vs-shelf-empty) { background-image: repeating-linear-gradient( 90deg, transparent 0px, transparent 46px, rgba(255,255,255,0.013) 46px, rgba(255,255,255,0.013) 48px, transparent 48px, transparent 56px ); } .vs-studio-main .vs-shelf-empty { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: #84888f; pointer-events: none; } .vs-studio-main .vs-shelf-area.is-sparse::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient( 90deg, transparent 0px, transparent 46px, rgba(120,152,191,0.017) 46px, rgba(120,152,191,0.017) 48px, transparent 48px, transparent 56px ); pointer-events: none; border-radius: 0 0 var(--vs-radius) var(--vs-radius); } .vs-studio-main .vs-shelf-area.is-over { background: rgba(120,152,191,0.09); box-shadow: inset 0 0 0 1px rgba(120,152,191,0.22); } .vs-studio-bench { display: flex; gap: 14px; margin-bottom: 14px; } .vs-bench-zone { flex: 1; min-height: 120px; border-radius: 14px; border: 1.5px dashed rgba(120,152,191,0.18); background: rgba(13,17,28,0.55); padding: 14px 16px 12px; display: flex; flex-direction: column; gap: 10px; transition: border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease; position: relative; } .vs-bench-zone--printing { border-color: rgba(225,187,107,0.22); } .vs-bench-zone--drying { border-color: rgba(120,152,191,0.22); } .vs-bench-zone.is-over { border-style: solid; box-shadow: inset 0 0 0 1px rgba(120,152,191,0.30); } .vs-bench-zone--printing.is-over { border-color: rgba(225,187,107,0.55); background: rgba(225,187,107,0.05); box-shadow: inset 0 0 0 1px rgba(225,187,107,0.25); } .vs-bench-zone--drying.is-over { border-color: rgba(120,152,191,0.55); background: rgba(120,152,191,0.06); } .vs-studio-main .vs-shelf-area.touch-drag-over { background: rgba(120,152,191,0.09); box-shadow: inset 0 0 0 1px rgba(120,152,191,0.22); } .vs-bench-zone.touch-drag-over { border-style: solid; box-shadow: inset 0 0 0 1px rgba(120,152,191,0.30); } .vs-bench-zone--printing.touch-drag-over { border-color: rgba(225,187,107,0.55); background: rgba(225,187,107,0.05); box-shadow: inset 0 0 0 1px rgba(225,187,107,0.25); } .vs-bench-zone--drying.touch-drag-over { border-color: rgba(120,152,191,0.55); background: rgba(120,152,191,0.06); } .vs-bench-zone-label { display: flex; align-items: center; gap: 7px; font-size: 10px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(160,178,205,0.70); } .vs-bench-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; } .vs-bench-dot--printing { background: rgba(225,187,107,0.18); box-shadow: none; } .vs-bench-dot--drying { background: rgba(120,152,191,0.18); box-shadow: none; } .vs-bench-zone--printing:not(:has(.vs-bench-empty)) .vs-bench-dot--printing { background: rgba(225,187,107,0.55); box-shadow: 0 0 4px rgba(225,187,107,0.25); } .vs-bench-zone--drying:not(:has(.vs-bench-empty)) .vs-bench-dot--drying { background: rgba(120,152,191,0.55); box-shadow: 0 0 4px rgba(120,152,191,0.25); } .vs-bench-spools { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; min-height: 60px; } .vs-bench-empty { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; pointer-events: none; padding-top: 28px; } .vs-bench-empty-state { font-size: 10px; font-style: italic; color: rgba(120,152,191,0.36); letter-spacing: 0.02em; } .vs-studio-sidebar { background-color: rgba(12, 16, 26, 0.84); background-image: radial-gradient(ellipse 90% 70% at 35% 20%, transparent 35%, rgba(0,0,0,0.12) 100%), linear-gradient(180deg, rgba(255,255,255,0.018) 0%, transparent 40%, rgba(0,0,0,0.10) 100%), linear-gradient(165deg, rgba(255,255,255,0.018) 0%, transparent 45%, rgba(0,0,0,0.055) 100%), radial-gradient(circle, rgba(200,215,240,0.030) 1.0px, rgba(200,215,240,0.014) 1.7px, transparent 1.7px); background-size: auto, auto, auto, 20px 20px; background-position: 0 0, 0 0, 0 0, 0 0; border: none; border-left: 1px solid rgba(120,152,191,0.08); border-radius: 0; padding: 12px 14px 24px 16px; top: 80px; box-shadow: inset 2px 0 0 rgba(200,215,240,0.085), inset 0 0 40px rgba(0,0,0,0.22); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } .vs-queue-header { font-size: 9px; font-weight: 600; color: var(--vs-muted); letter-spacing: 0.10em; margin-bottom: 16px; } .vs-queue-group { margin-bottom: 22px; } .vs-queue-group-title { color: var(--vs-muted); font-size: 11px; font-weight: 400; letter-spacing: 0.01em; margin-bottom: 10px; } .vs-queue-row:hover { background: rgba(120,152,191,0.06); } .vs-queue-row-name { color: rgba(150, 168, 196, 0.80); font-size: 10.5px; } .vs-queue-count { color: var(--vs-faint); opacity: 1; } .vs-queue-link { color: rgba(var(--vs-tint), 1); opacity: 0.92; } .vs-queue-footer { display: flex; flex-direction: column; gap: 7px; padding-top: 18px; margin-top: 8px; border-top: 1px solid rgba(120,152,191,0.10); } .vs-queue-btn { display: flex; align-items: center; justify-content: center; padding: 5px 14px; border-radius: 8px; border: 1px solid rgba(120,152,191,0.28); background: rgba(120,152,191,0.10); color: rgba(185,208,238,1); font-size: 11px; font-family: var(--vs-sans); font-weight: 500; letter-spacing: 0.02em; text-decoration: none; transition: background 0.15s, border-color 0.15s, color 0.15s; } .vs-queue-btn:hover { background: rgba(120,152,191,0.18); border-color: rgba(120,152,191,0.42); color: rgba(210,228,255,1); } .vs-studio-sidebar .vs-studio-bench { flex-direction: column; gap: 8px; margin-bottom: 22px; } .vs-studio-sidebar .vs-bench-zone { min-height: 0; border-radius: 10px; padding: 8px 10px 8px; overflow: hidden; } .vs-studio-sidebar .vs-bench-zone-label { font-size: 9px; gap: 5px; margin-bottom: 6px; } .vs-studio-sidebar .vs-bench-spools { flex-wrap: nowrap; overflow: hidden; gap: 5px; align-items: flex-end; min-height: 72px; -webkit-mask-image: linear-gradient(to right, black 72%, transparent 100%); mask-image: linear-gradient(to right, black 72%, transparent 100%); } .vs-studio-sidebar .vs-bench-empty { position: static; display: flex; flex-direction: column; gap: 3px; padding-top: 0; align-items: center; justify-content: center; height: 72px; } .vs-studio-sidebar .vs-bench-empty .vs-bench-empty-state { font-size: 9px; } .vs-studio-sidebar .vs-bench-empty .vs-bench-empty-hint { font-size: 8px; } .vs-sidebar-search { margin-bottom: 20px; } .vs-studio-search-input--sidebar { width: 100%; box-sizing: border-box; } .vs-admin-library { display: flex; gap: 12px; margin-bottom: 20px; } .vs-admin-library-link { font-size: 13px; color: rgba(120,152,191,0.88); text-decoration: none; padding: 6px 14px; border: 1px solid rgba(120,152,191,0.20); border-radius: 8px; font-family: var(--vs-sans); font-weight: 500; transition: background 0.15s, border-color 0.15s; } .vs-admin-library-link:hover { background: rgba(120,152,191,0.08); border-color: rgba(120,152,191,0.35); color: rgba(150,180,220,1); } .vs-ambient-dot--drying, .vs-ambient-dot--tostore, .vs-ambient-dot--swatch, .vs-ambient-dot--unassigned { opacity: 0.85; } @media (max-width: 900px) { .vs-studio-layout { flex-direction: column; } .vs-studio-sidebar { width: 100%; position: static; } } .vs-auth-page { display: flex; justify-content: center; align-items: center; min-height: 100vh; background: var(--vs-bg-deep); font-family: var(--vs-sans); padding: 32px 16px; } .vs-auth-wrap { width: 100%; max-width: 380px; display: flex; flex-direction: column; align-items: center; } .vs-auth-logo { display: flex; align-items: center; gap: 10px; text-decoration: none; margin-bottom: 8px; } .vs-auth-logo-text { font-family: var(--vs-display); font-size: 24px; font-weight: 500; color: var(--vs-text); letter-spacing: -0.01em; } .vs-auth-logo-text em { font-style: normal; color: var(--vs-blue); } .vs-auth-tagline { font-size: 13px; color: var(--vs-muted); margin: 0 0 16px; letter-spacing: 0.01em; } .vs-auth-spools { display: flex; justify-content: center; align-items: center; gap: 11px; margin: 0 0 26px; } .vs-auth-spools svg { filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.35)); transition: transform 0.25s ease; } .vs-auth-spools svg:hover { transform: translateY(-3px) scale(1.08); } @media (max-width: 380px) { .vs-auth-spools { gap: 7px; } .vs-auth-spools svg { width: 44px; height: 44px; } } .vs-auth-card { width: 100%; background: var(--vs-surface); border: 1px solid var(--vs-hair); border-radius: var(--vs-radius); padding: 28px; box-shadow: var(--vs-shadow); margin-bottom: 20px; } .vs-auth-field { margin-bottom: 18px; } .vs-auth-label { display: block; font-size: 11px; font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase; color: var(--vs-muted); margin-bottom: 7px; } .vs-auth-label-optional { font-size: 10px; font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--vs-faint); margin-left: 6px; } .vs-auth-label-required { color: #e88080; margin-left: 4px; font-weight: 700; } .vs-auth-password-wrap { position: relative; } .vs-auth-password-wrap .vs-auth-input { padding-right: 44px; } .vs-auth-password-toggle { position: absolute; top: 50%; right: 10px; transform: translateY(-50%); background: transparent; border: none; color: var(--vs-faint); cursor: pointer; padding: 4px; display: flex; align-items: center; justify-content: center; border-radius: 4px; } .vs-auth-password-toggle:hover { color: var(--vs-text); } .vs-auth-input { width: 100%; padding: 11px 14px; background: var(--vs-bg); border: 1px solid var(--vs-hair-2); border-radius: var(--vs-radius-sm); font-family: var(--vs-sans); font-size: 14px; color: var(--vs-text); box-sizing: border-box; outline: none; transition: border-color 0.18s; } .vs-auth-input:focus { border-color: var(--vs-accent); } .vs-auth-hint { font-size: 11px; color: var(--vs-faint); margin: 5px 0 0; line-height: 1.4; } .vs-field-error { display: none; margin-top: 6px; font-size: 12px; color: #e88080; line-height: 1.4; } .vs-field-error.is-visible { display: block; } .vs-auth-input.is-invalid, input.is-invalid { border-color: #e88080; background-color: rgba(232, 128, 128, 0.04); } .vs-auth-input.is-invalid:focus, input.is-invalid:focus { border-color: #e88080; } .vs-auth-btn { width: 100%; padding: 12px; margin-top: 10px; background: var(--vs-accent); border: none; border-radius: var(--vs-radius-sm); font-family: var(--vs-sans); font-size: 13px; font-weight: 600; letter-spacing: 0.05em; color: #fff; cursor: pointer; transition: background 0.18s; } .vs-auth-btn:hover { background: var(--vs-accent-deep); } .vs-auth-google-btn { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; padding: 11px 12px; background: #fff; color: #1f1f1f; border: 1px solid #dadce0; border-radius: var(--vs-radius-sm); font-family: var(--vs-sans); font-size: 13px; font-weight: 600; text-decoration: none; cursor: pointer; transition: box-shadow 0.18s, background 0.18s; } .vs-auth-google-btn:hover { background: #f8f9fa; box-shadow: 0 1px 3px rgba(0,0,0,0.15); } .vs-auth-discord-btn { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; padding: 11px 12px; margin-top: 8px; background: #5865F2; color: #fff; border: 1px solid #5865F2; border-radius: var(--vs-radius-sm); font-family: var(--vs-sans); font-size: 13px; font-weight: 600; text-decoration: none; cursor: pointer; transition: background 0.18s, box-shadow 0.18s; } .vs-auth-discord-btn:hover { background: #4752c4; box-shadow: 0 1px 3px rgba(0,0,0,0.25); } .vs-auth-divider { display: flex; align-items: center; text-align: center; margin: 14px 0; color: var(--vs-faint); font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; } .vs-auth-divider::before, .vs-auth-divider::after { content: ""; flex: 1; border-top: 1px solid var(--vs-hair); } .vs-auth-divider span { padding: 0 12px; } .vs-auth-footer-link { font-size: 13px; color: var(--vs-muted); text-align: center; margin: 0; } .vs-auth-footer-link a { color: var(--vs-accent); text-decoration: none; font-weight: 500; } .vs-auth-footer-link a:hover { text-decoration: underline; } .vs-wizard-page { min-height: 100vh; background: var(--vs-bg-deep); font-family: var(--vs-sans); color: var(--vs-text); padding: 40px 16px 80px; } .vs-wizard-wrap { max-width: 860px; margin: 0 auto; } .vs-wizard-steps { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; } .vs-wizard-progress { display: flex; align-items: center; gap: 10px; margin-bottom: 36px; } .vs-wizard-progress-track { flex: 1; height: 5px; border-radius: 999px; background: var(--vs-hair-2); overflow: hidden; } .vs-wizard-progress-fill { height: 100%; border-radius: 999px; background: var(--vs-blue); transition: width 0.45s cubic-bezier(0.22, 1, 0.36, 1); } .vs-wizard-progress-spool { flex-shrink: 0; display: block; } .vs-wizard-progress-spool .vs-wound { transition: r 0.45s cubic-bezier(0.22, 1, 0.36, 1), fill 0.4s ease; } @media (prefers-reduced-motion: reduce) { .vs-wizard-progress-spool .vs-wound { transition: fill 0.4s ease; } } .vs-wizard-progress-label { font-size: 11px; font-weight: 600; color: var(--vs-faint); white-space: nowrap; flex-shrink: 0; } .vs-wizard-step-dot { width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; background: var(--vs-surface); border: 2px solid var(--vs-hair-2); color: var(--vs-faint); flex-shrink: 0; } .vs-wizard-step-dot.is-active { background: rgba(120,152,191,0.12); border-color: var(--vs-accent); color: var(--vs-accent); } .vs-wizard-step-dot.is-done { background: var(--vs-accent); border-color: var(--vs-accent); color: #fff; } .vs-wizard-step-label { font-size: 12px; color: rgba(85,96,116,0.7); } .vs-wizard-step-label.is-done { color: var(--vs-text-2); } .vs-wizard-step-label.is-active { color: var(--vs-text); } .vs-wizard-step-sep { color: var(--vs-hair-2); margin: 0 2px; font-size: 12px; } .vs-wizard-heading { font-size: 24px; font-weight: 700; color: var(--vs-text); margin: 0 0 8px; letter-spacing: -0.02em; } .vs-wizard-sub { font-size: 14px; color: var(--vs-muted); margin: 0 0 24px; line-height: 1.5; } .vs-wizard-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 24px; } .vs-wizard-tile { padding: 14px 10px; min-height: 72px; background: var(--vs-surface); border: 1px solid var(--vs-hair); border-radius: var(--vs-radius-sm); cursor: pointer; text-align: center; user-select: none; transition: background 0.15s, border-color 0.15s; } .vs-wizard-tile:hover { border-color: var(--vs-hair-2); } .vs-wizard-tile.is-selected { background: rgba(120,152,191,0.45); border-color: #9fc8f5; border-width: 3px; box-shadow: 0 0 0 1px rgba(159,200,245,0.2), 0 4px 16px rgba(120,152,191,0.3); } .vs-wizard-tile-name { font-weight: 600; font-size: 14px; color: var(--vs-text); margin-bottom: 2px; } .vs-wizard-tile.is-selected .vs-wizard-tile-name { color: var(--vs-text); } .vs-wizard-tile.is-selected .vs-wizard-tile-sub { color: var(--vs-text-2); } .vs-wizard-tile-sub { font-size: 11px; color: var(--vs-faint); } .vs-wizard-nav { display: flex; justify-content: space-between; align-items: center; } .vs-wizard-count { font-size: 13px; color: var(--vs-muted); } .vs-wizard-filament-group { background: var(--vs-surface); border: 1px solid var(--vs-hair); border-radius: var(--vs-radius-sm); margin-bottom: 12px; overflow: hidden; } .vs-wizard-filament-group-head { display: flex; align-items: center; gap: 10px; padding: 10px 16px; border-bottom: 1px solid var(--vs-hair-3); background: var(--vs-surface-2); } .vs-wizard-filament-brand { font-size: 13px; font-weight: 600; color: var(--vs-text); flex: 1; } .vs-wizard-filament-count { font-size: 11px; color: var(--vs-faint); font-family: var(--vs-mono); } .vs-wizard-toggle-all { font-size: 11px; color: var(--vs-accent); background: none; border: none; cursor: pointer; padding: 0; font-family: var(--vs-sans); opacity: 0.8; transition: opacity 0.15s; } .vs-wizard-toggle-all:hover { opacity: 1; } .vs-wizard-filament-cols { display: flex; gap: 12px; padding: 8px; align-items: flex-start; width: 100%; } .vs-wizard-filament-col { flex: 1 1 50%; min-width: 0; max-width: 50%; } .vs-wizard-filament-mat-col { padding: 4px 6px; } @media (max-width: 480px) { .vs-wizard-filament-cols { gap: 6px; padding: 4px; } .vs-wizard-filament-mat-col { padding: 2px 4px; } } .vs-wizard-filament-mat-label { font-size: 10px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--vs-faint); margin-bottom: 6px; padding-bottom: 4px; border-bottom: 1px solid var(--vs-hair-3); } .vs-wizard-filament-row { display: flex; align-items: center; gap: 8px; padding: 5px 6px; border-radius: 5px; cursor: pointer; user-select: none; transition: background 0.12s; } .vs-wizard-filament-row:hover { background: var(--vs-surface-2); } .vs-wizard-filament-row.is-selected { background: rgba(120,152,191,0.08); } .vs-wizard-filament-check { flex-shrink: 0; display: flex; align-items: center; } .vs-wizard-filament-name { flex: 1; font-size: 12px; color: var(--vs-text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; } .vs-wizard-filament-row.is-selected .vs-wizard-filament-name { color: var(--vs-text); } .vs-wizard-summary-row { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--vs-text-2); } .vs-topbar-signin { font-size: 13px; font-weight: 500; color: var(--vs-muted); padding: 6px 12px; transition: color 0.15s; } .vs-topbar-signin:hover { color: var(--vs-text); } .vs-topbar-signup { font-size: 13px; font-weight: 600; color: var(--vs-bg-deep); background: var(--vs-accent); padding: 7px 16px; border-radius: 20px; letter-spacing: 0.01em; transition: opacity 0.15s; } .vs-topbar-signup:hover { opacity: 0.85; } .vs-app-footer { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 32px; font-size: 12px; color: var(--vs-faint); font-family: var(--vs-sans); } .vs-app-footer-strip { position: absolute; top: 0; left: 0; right: 0; line-height: 0; } .vs-label-pop-nfc { padding: 14px 18px 2px; border-top: 1px solid var(--vs-hair); } .vs-nfc { display: flex; flex-direction: column; gap: 10px; margin-top: 4px; } .vs-nfc-head { font-size: 11px; font-weight: 700; letter-spacing: 0.08em; color: var(--vs-faint); } .vs-nfc-write { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; padding: 9px 16px; font-family: inherit; font-size: 14px; font-weight: 600; color: var(--vs-bg-deep); background: var(--vs-accent); border: none; border-radius: 8px; cursor: pointer; transition: opacity 0.15s; } .vs-nfc-write:hover { opacity: 0.9; } .vs-nfc-write:disabled { opacity: 0.7; cursor: default; } .vs-nfc-url { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; max-width: 100%; padding: 6px 6px 6px 12px; background: var(--vs-surface); border: 1px solid var(--vs-hair-2); border-radius: 8px; } .vs-nfc-url code { font-size: 12px; color: var(--vs-text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .vs-nfc-copy { flex-shrink: 0; padding: 4px 10px; font-family: inherit; font-size: 12px; font-weight: 600; color: var(--vs-info); background: none; border: 1px solid var(--vs-hair-2); border-radius: 6px; cursor: pointer; } .vs-nfc-copy:hover { color: var(--vs-text); border-color: var(--vs-accent); } .vs-nfc-tip { font-size: 12px; color: var(--vs-muted); line-height: 1.5; max-width: 340px; } .vs-nfc-tip strong { color: var(--vs-text-2); } .vs-nfc-ok { font-size: 12px; color: var(--vs-success); } .vs-nfc-err { font-size: 12px; color: var(--vs-danger); line-height: 1.5; max-width: 340px; } .vs-nfc-icon { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; color: var(--vs-text-2); background: none; border: 1px solid var(--vs-hair-2); border-radius: 7px; cursor: pointer; transition: color 0.15s, border-color 0.15s; } .vs-nfc-icon:hover { color: var(--vs-accent); border-color: var(--vs-accent); } .vs-nfc-icon.is-done { color: var(--vs-success); border-color: var(--vs-success); } .vs-nfc-icon:disabled { opacity: 0.7; cursor: default; } .vs-nfc-spin { width: 13px; height: 13px; border: 2px solid currentColor; border-top-color: transparent; border-radius: 50%; animation: vs-nfc-spin 0.7s linear infinite; } @keyframes vs-nfc-spin { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { .vs-nfc-spin { animation: none; } } .vs-moments { display: flex; flex-direction: column; gap: 10px; margin-bottom: 18px; } .vs-moment { position: relative; display: flex; align-items: center; gap: 14px; padding: 14px 44px 14px 16px; border: 1px solid var(--vs-hair-2); border-left: 3px solid var(--moment-accent, var(--vs-accent)); border-radius: 14px; background: linear-gradient(90deg, color-mix(in srgb, var(--moment-accent, var(--vs-accent)) 13%, transparent), transparent 62%), var(--vs-surface); } .vs-moment-emoji { font-size: 30px; line-height: 1; flex-shrink: 0; } .vs-moment-text { flex: 1; min-width: 0; } .vs-moment-eyebrow { font-size: 10px; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: var(--moment-accent, var(--vs-accent)); } .vs-moment-title { font-size: 16px; font-weight: 700; color: var(--vs-text); margin: 1px 0 2px; } .vs-moment-blurb { font-size: 13px; color: var(--vs-text-2); line-height: 1.45; } .vs-moment-cta { flex-shrink: 0; font-size: 13px; font-weight: 600; color: var(--moment-accent, var(--vs-accent)); text-decoration: none; white-space: nowrap; } .vs-moment-x { position: absolute; top: 10px; right: 12px; background: none; border: none; color: var(--vs-faint); font-size: 18px; line-height: 1; cursor: pointer; padding: 2px 6px; } .vs-moment-x:hover { color: var(--vs-text); } .vs-printlog { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; } .vs-printlog-label { display: block; font-size: 11px; font-weight: 600; color: var(--vs-muted); margin-bottom: 2px; } .vs-printlog-check { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--vs-text-2); } .vs-printlog-list { display: flex; flex-direction: column; gap: 4px; margin-top: 10px; } .vs-printlog-row { display: flex; align-items: center; gap: 7px; font-size: 13px; color: var(--vs-text); padding: 3px 0; } .vs-printlog-row-main { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .vs-printlog-row-meta { color: var(--vs-faint); font-size: 12px; white-space: nowrap; } .vs-printlog-del { background: none; border: none; color: var(--vs-faint); font-size: 16px; line-height: 1; cursor: pointer; padding: 0 2px; } .vs-printlog-del:hover { color: #c0392b; } .vs-model-add { background: var(--vs-surface); border: 1px solid var(--vs-line); border-radius: 14px; padding: 14px; margin-bottom: 18px; } .vs-model-add-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } .vs-model-add-btn { white-space: nowrap; } .vs-model-add-preview { display: flex; align-items: center; gap: 8px; margin-top: 10px; font-size: 12.5px; } .vs-model-add-thumb { width: 40px; height: 40px; object-fit: cover; border-radius: 6px; border: 1px solid var(--vs-hair-2); background: var(--vs-bg-deep); } .vs-src-badge { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 700; letter-spacing: .2px; color: #fff; background: var(--vs-faint); } .vs-src-printables { background: #fa6831; } .vs-src-makerworld { background: #00ae42; } .vs-src-thingiverse { background: #2e8bee; } .vs-src-thangs { background: #6c5ce7; } .vs-src-cults3d { background: #e3256b; } .vs-src-myminifactory { background: #1aa3a3; } .vs-src-other { background: #76829b; } .vs-model-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; } .vs-model-card { position: relative; background: var(--vs-surface); border: 1px solid var(--vs-line); border-radius: 14px; overflow: hidden; display: flex; flex-direction: column; } .vs-model-thumb { position: relative; aspect-ratio: 4 / 3; background: var(--vs-surface-2); display: flex; align-items: center; justify-content: center; overflow: hidden; } .vs-model-thumb img { width: 100%; height: 100%; object-fit: cover; } .vs-model-thumb-ph { font-size: 38px; opacity: .5; } .vs-model-thumb .vs-src-badge { position: absolute; top: 8px; left: 8px; } .vs-model-body { padding: 11px 12px 13px; display: flex; flex-direction: column; gap: 5px; } .vs-model-title { font-weight: 700; font-size: 14px; color: var(--vs-text); line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .vs-model-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 12.5px; color: var(--vs-muted); } .vs-model-prints-toggle { align-self: flex-start; background: none; border: none; padding: 2px 0; color: var(--vs-accent); font-size: 12px; font-weight: 600; cursor: pointer; } .vs-model-prints { margin-top: 2px; display: flex; flex-direction: column; gap: 4px; } .vs-model-print-row { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; color: var(--vs-text-2); } .vs-model-del { position: absolute; top: 6px; right: 6px; width: 24px; height: 24px; border-radius: 50%; border: none; background: rgba(0,0,0,.45); color: #fff; font-size: 16px; line-height: 1; cursor: pointer; opacity: 0; transition: opacity .12s; } .vs-model-card:hover .vs-model-del { opacity: 1; } .vs-model-del:hover { background: #c0392b; } .vs-acts-tabs { display: flex; flex-wrap: wrap; gap: 6px; border-bottom: 1px solid var(--vs-line); margin-bottom: 18px; } .vs-acts-tab { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border: none; background: transparent; color: var(--vs-muted); font-size: 14px; font-weight: 600; cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; border-radius: 8px 8px 0 0; } .vs-acts-tab:hover { color: var(--vs-text); background: var(--vs-surface-2); } .vs-acts-tab.is-active { color: var(--vs-text); border-bottom-color: var(--vs-accent); } .vs-acts-tab-emoji { font-size: 16px; line-height: 1; } .vs-acts-tab-count { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--vs-surface-2); color: var(--vs-text-2); font-size: 12px; font-weight: 700; } .vs-acts-tab.is-active .vs-acts-tab-count { background: var(--vs-accent); color: var(--vs-bg-deep); } .vs-acts-panel { min-height: 200px; } .vs-acts-misc { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; } .vs-acts-misc-card { display: flex; flex-direction: column; gap: 4px; padding: 18px; border-radius: 14px; background: var(--vs-surface); border: 1px solid var(--vs-line); text-decoration: none; transition: border-color .12s, transform .12s; } .vs-acts-misc-card:hover { border-color: var(--vs-accent); transform: translateY(-2px); } .vs-acts-misc-icon { font-size: 26px; width: 26px; height: 26px; color: var(--vs-accent); margin-bottom: 4px; } .vs-acts-misc-name { color: var(--vs-text); font-weight: 700; font-size: 15px; } .vs-acts-misc-desc { color: var(--vs-muted); font-size: 12.5px; } .vs-bench { display: grid; grid-template-columns: 1fr 340px; gap: 20px; align-items: start; } .vs-bench-left { min-width: 0; } .vs-bench-filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 12px; } .vs-bench-search { flex: 1; min-width: 180px; padding: 8px 12px; font: inherit; font-size: 13px; color: var(--vs-text); background: var(--vs-surface); border: 1px solid var(--vs-hair-2); border-radius: 8px; } .vs-bench-select { padding: 8px 10px; font: inherit; font-size: 13px; color: var(--vs-text); background: var(--vs-surface); border: 1px solid var(--vs-hair-2); border-radius: 8px; } .vs-bench-toggle { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--vs-text-2); cursor: pointer; } .vs-bench-selbar { display: flex; align-items: center; gap: 12px; font-size: 12px; color: var(--vs-muted); margin-bottom: 10px; } .vs-bench-selcount { color: var(--vs-accent); font-weight: 600; } .vs-bench-clear { background: none; border: none; color: var(--vs-info); cursor: pointer; font: inherit; font-size: 12px; text-decoration: underline; } .vs-bench-selall { background: none; border: 1px solid var(--vs-hair-2); border-radius: 6px; padding: 3px 10px; font: inherit; font-size: 12px; color: var(--vs-text-2); cursor: pointer; } .vs-bench-selall:hover:not(:disabled) { border-color: var(--vs-accent); color: var(--vs-text); } .vs-bench-selall:disabled { opacity: .5; cursor: default; } .vs-bench-cb { width: 16px; height: 16px; flex-shrink: 0; accent-color: var(--vs-accent); cursor: pointer; } .vs-bench-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; } .vs-bench-tile { position: relative; display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--vs-hair-2); border-radius: 10px; background: var(--vs-surface); cursor: pointer; user-select: none; transition: border-color .12s, background .12s; } .vs-bench-tile:hover { border-color: var(--vs-hair); } .vs-bench-tile.is-selected { border-color: var(--vs-accent); background: rgba(var(--vs-tint), 0.12); } .vs-bench-tile-text { flex: 1; min-width: 0; } .vs-bench-tile-name { font-size: 13px; font-weight: 600; color: var(--vs-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .vs-bench-tile-meta { font-size: 11px; color: var(--vs-muted); margin-top: 2px; } .vs-bench-check { position: absolute; top: 6px; right: 8px; color: var(--vs-accent); font-weight: 700; font-size: 13px; } .vs-bench-right { position: sticky; top: 12px; max-height: calc(100vh - 24px); overflow-y: auto; display: flex; flex-direction: column; gap: 12px; } .vs-bench-right-head { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--vs-faint); } .vs-gear-card { border: 1px solid var(--vs-hair-2); border-radius: 12px; background: var(--vs-surface); padding: 12px; transition: border-color .12s; } .vs-gear-card.is-armed { border-style: dashed; border-color: var(--vs-accent); } .vs-gear-card.is-full { opacity: .85; } .vs-gear-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; } .vs-gear-name { font-size: 14px; font-weight: 700; color: var(--vs-text); } .vs-gear-kind { font-size: 11px; color: var(--vs-muted); } .vs-gear-cap { flex-shrink: 0; font-size: 12px; font-weight: 700; color: var(--vs-text-2); background: var(--vs-bg); border: 1px solid var(--vs-hair-2); border-radius: 20px; padding: 2px 9px; } .vs-gear-cap.is-full { color: var(--vs-warning); border-color: var(--vs-warning); } .vs-gear-spools { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0; } .vs-gear-spool { position: relative; } .vs-gear-spool-x { position: absolute; top: -4px; right: -4px; width: 16px; height: 16px; padding: 0; border-radius: 50%; background: var(--vs-bg-deep); color: var(--vs-faint); border: 1px solid var(--vs-hair-2); font-size: 11px; line-height: 1; cursor: pointer; display: none; } .vs-gear-spool:hover .vs-gear-spool-x { display: block; } .vs-gear-empty { margin: 10px 0; padding: 12px; text-align: center; font-size: 12px; font-style: italic; color: var(--vs-faint); border: 1px dashed var(--vs-hair-2); border-radius: 8px; } .vs-gear-load { width: 100%; padding: 8px; font: inherit; font-size: 13px; font-weight: 600; color: var(--vs-bg-deep); background: var(--vs-accent); border: none; border-radius: 8px; cursor: pointer; } .vs-gear-load:disabled { background: var(--vs-hair-2); color: var(--vs-faint); cursor: default; } .vs-gear-emptybtn { width: 100%; margin-bottom: 8px; padding: 6px 8px; font: inherit; font-size: 12px; font-weight: 600; color: var(--vs-muted); background: transparent; border: 1px solid var(--vs-hair-2); border-radius: 8px; cursor: pointer; } .vs-gear-emptybtn:hover { color: var(--vs-text); border-color: var(--vs-faint); } @media (max-width: 820px) { .vs-bench { grid-template-columns: 1fr; } .vs-bench-right { position: static; } } .vs-desk { margin-bottom: 18px; padding: 14px 16px 16px; border-radius: 16px; background: linear-gradient(180deg, rgba(var(--vs-dot), 0.05), transparent); border: 1px solid var(--vs-line); transition: border-color .12s, background .12s; } .vs-desk.is-armed { border-color: var(--vs-accent); background: rgba(var(--vs-dot), 0.08); } .vs-desk-head { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; } .vs-desk-title { display: inline-flex; align-items: center; gap: 7px; font-size: 14px; font-weight: 700; color: var(--vs-text); } .vs-desk-title .vs-icon { background: var(--vs-accent); } .vs-desk-count { font-size: 12px; color: var(--vs-muted); } .vs-desk-head .vs-desk-storeall { margin-left: auto; } .vs-desk-storeall { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; font: inherit; font-size: 12.5px; font-weight: 600; border-radius: 8px; cursor: pointer; background: var(--vs-accent); border: 1px solid var(--vs-accent); color: var(--vs-bg-deep); } .vs-desk-storeall:hover { filter: brightness(1.05); } .vs-desk-storeall .vs-icon { background: var(--vs-bg-deep); } .vs-desk-head .vs-desk-storeall ~ .vs-bench-clear { margin-left: 0; } .vs-desk-empty { padding: 18px; text-align: center; font-size: 13px; color: var(--vs-faint); border: 1px dashed var(--vs-hair-2); border-radius: 10px; } .vs-desk-tray { display: flex; flex-wrap: wrap; gap: 10px; max-height: 232px; overflow-y: auto; padding-right: 4px; } .vs-desk-spool { position: relative; display: flex; align-items: center; gap: 10px; padding: 8px 12px 8px 8px; border-radius: 12px; background: var(--vs-surface); border: 1px solid var(--vs-hair-2); min-width: 200px; } .vs-desk-spool.is-tbs { border-color: var(--vs-warn, #d99a2b); background: rgba(217, 154, 43, 0.08); } .vs-desk-spool.is-sel { border-color: var(--vs-accent); } .vs-desk-spool-text { flex: 1; min-width: 0; } .vs-desk-spool-name { font-size: 13px; font-weight: 600; color: var(--vs-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 150px; } .vs-desk-spool-note { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; color: var(--vs-muted); margin-top: 2px; } .vs-desk-spool-note.is-tbs { color: var(--vs-warn, #d99a2b); font-weight: 600; } .vs-desk-spool-note .vs-icon { background: currentColor; } .vs-desk-act { padding: 4px 10px; font: inherit; font-size: 12px; font-weight: 600; border-radius: 7px; cursor: pointer; background: transparent; border: 1px solid var(--vs-hair-2); color: var(--vs-muted); } .vs-desk-act:hover { border-color: var(--vs-faint); color: var(--vs-text); } .vs-desk-act.is-primary { background: var(--vs-accent); border-color: var(--vs-accent); color: var(--vs-bg-deep); } .vs-desk-act.is-primary:hover { filter: brightness(1.05); color: var(--vs-bg-deep); } .vs-bench-sort { display: inline-flex; align-items: stretch; gap: 4px; } .vs-bench-sortdir { width: 30px; padding: 0; font: inherit; font-size: 15px; line-height: 1; border: 1px solid var(--vs-hair-2); border-radius: 6px; background: var(--vs-surface); color: var(--vs-text-2); cursor: pointer; } .vs-bench-sortdir:hover { border-color: var(--vs-accent); color: var(--vs-text); } .vs-gear-search { width: 100%; margin-bottom: 4px; } .vs-gear-group { margin-bottom: 6px; } .vs-gear-group-head { display: flex; align-items: center; gap: 7px; width: 100%; padding: 8px 6px; font: inherit; cursor: pointer; background: none; border: none; border-bottom: 1px solid var(--vs-line); } .vs-gear-group-caret { color: var(--vs-muted); font-size: 11px; width: 12px; } .vs-gear-group-head .vs-icon { background: var(--vs-muted); } .vs-gear-group-title { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--vs-text-2); } .vs-gear-group-meta { margin-left: auto; font-size: 11px; color: var(--vs-faint); } .vs-gear-group-empty { padding: 10px 6px; font-size: 12px; font-style: italic; color: var(--vs-faint); } .vs-gear-group .vs-gear-card { margin-top: 10px; } .vs-gear-parent { display: flex; align-items: center; gap: 5px; margin: 12px 0 2px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--vs-muted); } .vs-gear-parent .vs-icon { background: var(--vs-muted); } .vs-gear-icon { background: var(--vs-accent); flex-shrink: 0; } .vs-gear-spool-acts { position: absolute; top: -6px; right: -6px; display: none; gap: 2px; } .vs-gear-spool:hover .vs-gear-spool-acts { display: flex; } .vs-gear-spool-act { width: 20px; height: 20px; padding: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; cursor: pointer; background: var(--vs-surface); border: 1px solid var(--vs-hair-2); color: var(--vs-muted); box-shadow: 0 1px 3px rgba(0,0,0,0.2); } .vs-gear-spool-act:hover { border-color: var(--vs-accent); color: var(--vs-accent); } .vs-gear-spool-act .vs-icon { background: currentColor; } .vs-wb-cta { display: flex; align-items: center; gap: 16px; padding: 20px 22px; border-radius: 16px; text-decoration: none; background: linear-gradient(120deg, rgba(var(--vs-dot), 0.08), transparent); border: 1px solid var(--vs-line); transition: border-color .12s, transform .12s; } .vs-wb-cta:hover { border-color: var(--vs-accent); transform: translateY(-2px); } .vs-wb-cta-icon { width: 30px; height: 30px; background: var(--vs-accent); flex-shrink: 0; } .vs-wb-cta-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; } .vs-wb-cta-title { font-size: 16px; font-weight: 700; color: var(--vs-text); } .vs-wb-cta-sub { font-size: 13px; color: var(--vs-muted); } .vs-wb-cta-sub strong { color: var(--vs-warn, #d99a2b); } .vs-wb-cta-go { font-size: 14px; font-weight: 700; color: var(--vs-accent); white-space: nowrap; } .vs-scope-seg { display: flex; width: 100%; } .vs-scope-seg .vs-seg { flex: 1; flex-direction: column; align-items: center; justify-content: center; gap: 1px; font-size: 11.5px; line-height: 1.15; padding: 6px 4px; text-align: center; } .vs-seg-count { font-size: 12px; font-weight: 700; opacity: 0.6; } .vs-scope-seg .vs-seg.is-active .vs-seg-count { opacity: 0.9; } .vs-footer-brand { display: flex; align-items: center; gap: 10px; font-family: var(--vs-sans); font-size: 14px; font-weight: 700; color: rgba(175,192,215,0.70); letter-spacing: -0.01em; } .vs-footer-brand em { font-style: normal; color: var(--vs-accent); font-weight: 700; } .vs-footer-tagline { font-size: 11px; font-weight: 400; color: var(--vs-faint); letter-spacing: 0.02em; font-family: var(--vs-sans); } .vs-footer-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 20px; } @media (max-width: 640px) { .vs-app-footer { flex-direction: column; align-items: center; text-align: center; padding: 18px 16px; gap: 12px; } } .vs-footer-link { color: var(--vs-faint); text-decoration: none; font-size: 12px; letter-spacing: 0.03em; transition: color 0.15s; } .vs-footer-link:hover { color: var(--vs-muted); } .vs-footer-social { display: inline-flex; align-items: center; } .vs-footer-social svg { display: block; } .mud-table-striped .mud-table-body .mud-table-row:nth-child(even) .mud-table-cell { background-color: rgba(100, 140, 200, 0.055); } .mud-chip.mud-chip-size-small { height: 22px; font-size: 12px; } .vs-back-to-top { position: fixed; bottom: 28px; right: 28px; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--vs-hair-2); background: var(--vs-surface); color: var(--vs-muted); box-shadow: var(--vs-shadow-sm); cursor: pointer; display: flex; align-items: center; justify-content: center; opacity: 0; transform: translateY(10px); transition: opacity 0.22s, transform 0.22s, background 0.15s, color 0.15s, border-color 0.15s; z-index: 200; pointer-events: none; backdrop-filter: blur(8px); } .vs-back-to-top.is-visible { opacity: 1; transform: translateY(0); pointer-events: auto; } .vs-back-to-top:hover { background: var(--vs-surface-2); color: var(--vs-accent); border-color: var(--vs-accent); } .mud-table-body .mud-table-row .mud-table-cell { transition: background-color 0.12s, box-shadow 0.12s; } .mud-table-body .mud-table-row:hover .mud-table-cell { background-color: rgba(65,125,200,0.07) !important; box-shadow: inset 0 1px 0 rgba(65,125,200,0.22), inset 0 -1px 0 rgba(65,125,200,0.10); } .mud-table-pagination { border-top: 1px solid rgba(255,255,255,0.04); padding: 6px 4px 2px; opacity: 0.72; transition: opacity 0.2s; } .mud-table-pagination:hover { opacity: 1; } .mud-table-pagination .mud-icon-button { opacity: 0.60; } .mud-table-pagination .mud-icon-button:hover:not([disabled]) { opacity: 1; } .mud-table-pagination .mud-icon-button[disabled] { opacity: 0.18; } .mud-table-head .mud-table-row { opacity: 0.62; } .mud-table-body .mud-table-cell { border-bottom-color: rgba(255,255,255,0.032) !important; } .mud-table-body .mud-table-row .mud-icon-button { opacity: 0.12; transition: opacity 0.18s; } .mud-table-body .mud-table-row:hover .mud-icon-button { opacity: 0.72; } .vs-footer-copy { font-size: 12px; color: var(--vs-muted); letter-spacing: 0.04em; } .mud-table-pagination .mud-toolbar, .mud-table-pagination-toolbar { padding-top: 8px; padding-bottom: 8px; } .vs-sd-history .mud-table-root { margin-top: 4px; } .vs-sd-history .mud-table-cell { padding: 14px 18px !important; } .vs-sd-history .mud-table-cell:first-child { padding-left: 6px !important; } .vs-sd-history .mud-table-cell:last-child { padding-right: 6px !important; } .vs-sd-history .mud-chip { height: 28px; padding: 0 14px; margin: 0; } .vs-sd-history .mud-chip .mud-chip-icon { margin-right: 5px; } .components-reconnect-first-attempt-visible, .components-reconnect-repeated-attempt-visible, .components-reconnect-failed-visible, .components-pause-visible, .components-resume-failed-visible, .components-rejoining-animation { display: none; } #components-reconnect-modal.components-reconnect-show .components-reconnect-first-attempt-visible, #components-reconnect-modal.components-reconnect-show .components-rejoining-animation, #components-reconnect-modal.components-reconnect-paused .components-pause-visible, #components-reconnect-modal.components-reconnect-resume-failed .components-resume-failed-visible, #components-reconnect-modal.components-reconnect-retrying .components-reconnect-repeated-attempt-visible, #components-reconnect-modal.components-reconnect-retrying .components-rejoining-animation { display: block; } #components-reconnect-modal.components-reconnect-failed, #components-reconnect-modal.components-reconnect-failed .components-reconnect-failed-visible { display: block; } #components-reconnect-modal { background: var(--vs-surface); border: 1px solid var(--vs-hair-2); border-radius: 14px; width: 17rem; margin: 22vh auto; padding: 2rem 1.75rem; box-shadow: 0 0 0 1px rgba(var(--vs-tint), 0.08), 0 24px 48px rgba(0, 0, 0, 0.60), 0 4px 12px rgba(0, 0, 0, 0.35); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); color: var(--vs-text-2); font-family: "Manrope", system-ui, sans-serif; font-size: 13px; } #components-reconnect-modal[open] { animation: vs-reconnect-slideUp 0.5s cubic-bezier(0.2, 1, 0.3, 1) both, vs-reconnect-fadeIn 0.35s ease-out both; } #components-reconnect-modal[open] .components-rejoining-animation, #components-reconnect-modal[open] .components-reconnect-first-attempt-visible { display: block; } #components-reconnect-modal::backdrop { background: rgba(0, 0, 0, 0.55); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); animation: vs-reconnect-fadeIn 0.35s ease-out; } #components-reconnect-modal .components-reconnect-container { display: flex; flex-direction: column; align-items: center; gap: 14px; } #components-reconnect-modal p { margin: 0; text-align: center; color: #7f8ca3; line-height: 1.55; font-size: 13px; letter-spacing: 0.01em; } #components-reconnect-modal button { border: 1px solid rgba(var(--vs-tint), 0.25); background: rgba(var(--vs-tint), 0.10); color: #7898bf; padding: 6px 22px; border-radius: 20px; font-family: inherit; font-size: 12px; font-weight: 500; letter-spacing: 0.04em; cursor: pointer; transition: background 0.15s, border-color 0.15s; } #components-reconnect-modal button:hover { background: rgba(var(--vs-tint), 0.18); border-color: rgba(var(--vs-tint), 0.40); } .vs-reconnect-logo { animation: vs-reconnect-spin 3.5s linear infinite; opacity: 0.9; filter: drop-shadow(0 0 8px rgba(var(--vs-tint), 0.35)); } @keyframes vs-reconnect-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @keyframes vs-reconnect-slideUp { from { transform: translateY(18px) scale(0.97); } to { transform: translateY(0) scale(1); } } @keyframes vs-reconnect-fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes vs-logo-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .vs-logo { display: block; transform-origin: center; } .vs-masthead-brand:hover .vs-logo { animation: vs-logo-spin 3.5s linear 1; } .vs-custom-filament-dialog { top: 50%; left: 50%; transform: translate(-50%, -50%); width: 92%; max-width: 640px; max-height: 90vh; max-height: 90dvh; } @media (max-width: 599.95px) { .vs-custom-filament-dialog { top: 8px; left: 8px; right: 8px; transform: none; width: auto; max-width: none; max-height: calc(100vh - 16px); max-height: calc(100dvh - 16px); } } .vs-custom-filament-popover.mud-popover { width: max-content !important; min-width: 140px !important; max-width: min(280px, calc(100vw - 24px)) !important; max-height: 60vh; background: var(--vs-surface) !important; border: 1px solid var(--vs-hair-2) !important; box-shadow: 0 8px 24px rgba(0,0,0,0.55) !important; z-index: 1400 !important; } .vs-custom-filament-popover.mud-popover .mud-list-item { background: transparent; } .vs-filament-dialog .mud-input-control.mud-disabled .mud-input-label { color: var(--vs-muted) !important; } .vs-filament-dialog .mud-input-control.mud-disabled .mud-input-slot, .vs-filament-dialog .mud-input-control.mud-disabled .mud-select-input, .vs-filament-dialog .mud-input-control.mud-disabled input { color: var(--vs-text-2) !important; } .vs-filament-dialog .mud-checkbox .mud-typography { font-size: 0.78rem; } .vs-filament-dialog .mud-input-slot, .vs-filament-dialog .mud-select-input, .vs-filament-dialog input, .vs-filament-dialog textarea { font-size: 0.85rem; } .vs-filament-dialog .mud-input-label { font-size: 0.8rem; } .vs-filament-dialog .mud-input-helper-text { color: var(--vs-faint) !important; font-size: 0.68rem; } .vs-link-field input { font-size: 0.72rem !important; } .vs-filter-row .mud-disabled, .vs-filter-row .mud-input.mud-disabled, .vs-filter-row .mud-input-control.mud-disabled { opacity: 1 !important; } .vs-filter-row .mud-input-control:has(.mud-disabled) .mud-input-label, .vs-filter-row .mud-disabled .mud-input-label, .vs-filter-row .mud-input-control.mud-disabled .mud-input-label { color: var(--vs-muted) !important; opacity: 1 !important; } .vs-filter-row .mud-disabled .mud-select-input, .vs-filter-row .mud-disabled .mud-input-slot, .vs-filter-row .mud-disabled input, .vs-filter-row .mud-input.mud-disabled .mud-select-input, .vs-filter-row .mud-input.mud-disabled .mud-input-slot, .vs-filter-row .mud-input.mud-disabled input, .vs-filter-row .mud-select-input[disabled], .vs-filter-row input:disabled { color: var(--vs-text-2) !important; -webkit-text-fill-color: var(--vs-text-2) !important; opacity: 1 !important; } .vs-filter-row .mud-input-control:has(.mud-disabled) svg, .vs-filter-row .mud-input-control:has(.mud-disabled) .mud-icon-root, .vs-filter-row .mud-disabled svg, .vs-filter-row .mud-disabled .mud-icon-root { color: var(--vs-muted) !important; fill: currentColor !important; opacity: 1 !important; } .vs-series-editor .mud-input-control.mud-disabled .mud-input-label { color: var(--vs-muted) !important; } .vs-series-editor .mud-input-control.mud-disabled .mud-input-slot, .vs-series-editor .mud-input-control.mud-disabled .mud-select-input, .vs-series-editor .mud-input-control.mud-disabled input { color: var(--vs-text-2) !important; } .vs-calc-field input { color: var(--vs-muted) !important; -webkit-text-fill-color: var(--vs-muted) !important; } .vs-hardnozzle-tag { display: inline-flex; align-items: center; gap: 3px; font-size: 10.5px; font-weight: 600; letter-spacing: 0.02em; padding: 1px 7px; border-radius: 999px; white-space: nowrap; color: var(--vs-warning); border: 1px solid color-mix(in srgb, var(--vs-warning) 45%, transparent); background: color-mix(in srgb, var(--vs-warning) 12%, transparent); } .vs-admin-table .mud-table-cell, body:has(.vs-admin-nav) .mud-table-cell { font-size: 0.75rem !important; padding-top: 4px !important; padding-bottom: 4px !important; } .vs-admin-table .mud-table-head .mud-table-cell, body:has(.vs-admin-nav) .mud-table-head .mud-table-cell { font-size: 0.68rem !important; } .vs-admin-table .mud-table-cell .vs-spec-tag, body:has(.vs-admin-nav) .mud-table-cell .vs-spec-tag { font-size: 0.6rem !important; } .vs-filter-row .mud-input-slot, .vs-filter-row .mud-select-input, .vs-filter-row input { font-size: 0.78rem !important; } .vs-filter-row .mud-input-label { font-size: 0.84rem !important; } .vs-filter-popover .mud-list-item { font-size: 0.82rem; min-height: 36px; } .vs-material-editor .mud-input-label { font-size: 0.78rem; } .vs-matrange-grid { display: grid; grid-template-columns: auto 64px 64px; gap: 3px 8px; align-items: center; } .vs-matrange-h { font-size: 11px; color: var(--vs-muted); text-align: center; } .vs-matreq-split { display: flex; gap: 18px 24px; align-items: flex-start; flex-wrap: wrap; } .vs-matreq-split .vs-matrange-grid { flex: 0 0 auto; } .vs-matreq-side { flex: 1 1 300px; min-width: 280px; } .vs-prop-qual-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px 22px; align-items: start; } .vs-admin-tile { display: block; padding: 18px 18px 16px; background: var(--vs-surface); border: 1px solid var(--vs-hair); border-radius: 10px; text-decoration: none; color: inherit; transition: border-color 0.18s, transform 0.12s; } .vs-admin-tile:hover { border-color: var(--vs-accent); transform: translateY(-1px); } .vs-admin-tile-title { font-size: 15px; font-weight: 600; color: var(--vs-text); flex: 1; } .vs-admin-tile-desc { font-size: 13px; color: var(--vs-faint); line-height: 1.5; } .vs-admin-tile-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 24px; height: 22px; padding: 0 8px; background: var(--vs-accent); color: #0e1018; border-radius: 11px; font-size: 12px; font-weight: 700; } .vs-admin-tile-badge--quiet { background: rgba(120,152,191,0.18); color: var(--vs-accent); } .vs-cal-row { display: flex; align-items: flex-start; gap: 12px; background: var(--vs-surface); border: 1px solid var(--vs-hair-2); border-radius: 14px; padding: 12px 14px; } .vs-cal-emoji { font-size: 22px; line-height: 1; flex: 0 0 auto; width: 30px; text-align: center; } .vs-cal-enable { align-self: center; display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--vs-muted); cursor: pointer; user-select: none; white-space: nowrap; } .vs-cal-enable input { cursor: pointer; accent-color: var(--vs-accent); } .vs-cal-tag { align-self: center; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--vs-muted); border: 1px solid var(--vs-hair-2); border-radius: 20px; padding: 1px 8px; } .vs-cal-edit { background: var(--vs-surface); border: 1px solid var(--vs-accent); border-radius: 14px; padding: 16px; } .vs-cal-field { display: flex; flex-direction: column; gap: 4px; } .vs-cal-field > span { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--vs-faint); } .vs-cal-input { width: 100%; box-sizing: border-box; background: var(--vs-bg); border: 1px solid var(--vs-hair-2); border-radius: 8px; padding: 7px 9px; font-size: 13px; font-family: inherit; color: var(--vs-text); } .vs-cal-input:focus { outline: none; border-color: var(--vs-accent); } .vs-btn-mini { background: none; border: 1px solid var(--vs-hair-2); border-radius: 7px; padding: 5px 12px; cursor: pointer; font-family: inherit; font-size: 12px; font-weight: 600; color: var(--vs-text-2); transition: border-color 0.15s, color 0.15s; } .vs-btn-mini:hover:not(:disabled) { border-color: var(--vs-accent); color: var(--vs-text); } .vs-btn-mini:disabled { opacity: 0.4; cursor: default; } .vs-btn-mini--primary { background: var(--vs-accent); border-color: var(--vs-accent); color: var(--vs-bg-deep); } .vs-btn-mini--primary:hover:not(:disabled) { color: var(--vs-bg-deep); opacity: 0.9; } .vs-btn-mini--danger { color: var(--vs-danger); border-color: var(--vs-danger); } .vs-btn-mini--danger:hover:not(:disabled) { color: #fff; background: var(--vs-danger); } .vs-avatar-upload { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; background: var(--vs-accent); color: var(--vs-bg-deep); border-radius: 8px; font-size: 13px; font-weight: 600; cursor: pointer; transition: opacity 0.15s; } .vs-avatar-upload:hover { opacity: 0.9; } .vs-avatar-upload.is-busy { opacity: 0.6; cursor: default; } .vs-avatar-upload input[type="file"] { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; pointer-events: none; } .vs-cal-cal { max-width: 760px; } .vs-cal-monthbar { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; } .vs-cal-monthbar h3 { font-size: 16px; font-weight: 600; color: var(--vs-text); margin: 0; min-width: 170px; text-align: center; } .vs-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; } .vs-cal-dow { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--vs-faint); text-align: center; padding-bottom: 2px; } .vs-cal-cell { min-height: 76px; border: 1px solid var(--vs-hair-2); border-radius: 10px; padding: 5px 6px; background: var(--vs-surface); display: flex; flex-direction: column; gap: 3px; overflow: hidden; } .vs-cal-cell.is-empty { background: transparent; border: none; } .vs-cal-cell.is-today { border-color: var(--vs-accent); box-shadow: inset 0 0 0 1px var(--vs-accent); } .vs-cal-daynum { font-size: 12px; font-weight: 600; color: var(--vs-muted); } .vs-cal-cell.is-today .vs-cal-daynum { color: var(--vs-accent); } .vs-cal-ev { display: flex; align-items: center; gap: 4px; font-size: 11px; line-height: 1.2; color: var(--vs-text-2); background: var(--vs-bg); border-left: 3px solid var(--vs-accent); border-radius: 5px; padding: 2px 4px; } .vs-cal-ev-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } @media (max-width: 560px) { .vs-cal-cell { min-height: 56px; } .vs-cal-ev-name { display: none; } } .vs-pf-pager { background: var(--vs-bg); border: 1px solid var(--vs-hair-2); border-radius: 8px; padding: 6px 14px; color: var(--vs-text-2); font-size: 13px; cursor: pointer; transition: border-color 0.14s, color 0.14s; } .vs-pf-pager:hover:not(:disabled) { border-color: var(--vs-accent); color: var(--vs-text); } .vs-pf-pager:disabled { opacity: 0.4; cursor: default; } .vs-editor-meta { margin-top: 18px; padding: 16px 18px; border: 1px solid var(--vs-hair-2); border-radius: 8px; background: var(--vs-bg-tint); } .vs-modal-panel { position: fixed; top: 64px; left: 50%; transform: translateX(-50%); width: 92%; max-height: calc(100vh - 84px); overflow-y: auto; z-index: 31; padding: 24px; } .vs-variant-specs-dialog .mud-input-control { font-size: 0.82rem; margin-top: 2px; margin-bottom: 2px; } .vs-variant-specs-dialog .mud-input-slot input, .vs-variant-specs-dialog .mud-select-input { font-size: 0.82rem; } .vs-variant-specs-dialog .mud-input-label { font-size: 0.76rem !important; } .vs-variant-specs-dialog .mud-input-helper-text { font-size: 0.62rem; line-height: 1.25; } .vs-variant-specs-dialog .mud-checkbox .mud-typography { font-size: 0.78rem; } .vs-series-editor .mud-input-label { font-size: 0.76rem !important; } .vs-series-editor .mud-checkbox .mud-typography { font-size: 0.74rem; } .vs-admin-table-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; } .vs-admin-table-head-right { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; } .vs-admin-count { font-size: 13px; color: var(--vs-faint); white-space: nowrap; } .vs-admin-nav { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 22px; padding-bottom: 12px; border-bottom: 1px solid var(--vs-hair); } .vs-admin-nav-link { font-size: 13px; font-weight: 500; color: var(--vs-text-2); text-decoration: none; padding: 6px 12px; border-radius: 7px; transition: background 0.14s, color 0.14s; } .vs-admin-nav-link:hover { background: rgba(120,152,191,0.1); color: var(--vs-text); } .vs-admin-nav-link.is-active { background: var(--vs-accent); color: var(--vs-bg-deep); font-weight: 600; } .vs-admin-nav-sep { align-self: stretch; width: 1px; background: var(--vs-hair-2, rgba(255, 255, 255, 0.1)); margin: 4px 8px; flex-shrink: 0; } .vs-admin-nav-dd { position: relative; display: inline-flex; } .vs-admin-nav-ddbtn { cursor: pointer; user-select: none; } .vs-admin-nav-menu { display: none; position: absolute; top: 100%; left: 0; z-index: 60; margin-top: 4px; padding: 6px; min-width: 168px; background: var(--vs-surface); border: 1px solid var(--vs-hair-2); border-radius: 10px; box-shadow: 0 10px 28px rgba(0, 0, 0, 0.22); } .vs-admin-nav-dd:hover .vs-admin-nav-menu, .vs-admin-nav-dd:focus-within .vs-admin-nav-menu { display: block; } .vs-admin-nav-menu a { display: block; padding: 6px 11px; border-radius: 7px; white-space: nowrap; font-size: 13px; color: var(--vs-text-2); text-decoration: none; } .vs-admin-nav-menu a:hover { background: var(--vs-bg-tint); color: var(--vs-text); } .vs-admin-nav-menu a.is-active { color: var(--vs-accent); font-weight: 600; } .vs-spool-action-menu-overlay { position: fixed; inset: 0; z-index: 1300; background: transparent; } .vs-spool-action-menu { position: fixed; z-index: 1301; --vs-menu-w: 240px; --vs-menu-h: 400px; left: max(8px, min(calc(var(--vs-menu-x, 0px) - var(--vs-menu-w)), calc(100vw - var(--vs-menu-w) - 8px))); top: clamp(8px, var(--vs-menu-y, 0px), calc(100vh - var(--vs-menu-h) - 8px)); width: var(--vs-menu-w); min-width: 220px; max-width: 280px; background: var(--vs-surface); border: 1px solid var(--vs-hair-2); border-radius: 8px; box-shadow: 0 8px 28px rgba(0,0,0,0.55); padding: 4px 0; max-height: var(--vs-menu-h); overflow-y: auto; font-size: 14px; } .vs-spool-action-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 14px; background: none; border: none; color: var(--vs-text); text-align: left; font-size: 14px; cursor: pointer; transition: background 0.1s; } .vs-spool-action-item:hover, .vs-spool-action-item:focus-visible { background: rgba(126,184,247,0.10); outline: none; } .vs-spool-action-item.vs-spool-action-danger { color: #e88080; } .vs-spool-action-item.vs-spool-action-danger:hover { background: rgba(232,128,128,0.10); } .vs-spool-action-icon { display: inline-flex; align-items: center; justify-content: center; width: 20px; flex-shrink: 0; color: var(--vs-muted); } .vs-spool-action-label-group { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; } .vs-spool-action-label { text-align: left; width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .vs-spool-action-sub { font-size: 10px; color: var(--vs-faint); font-weight: 400; width: 100%; white-space: nowrap; } .vs-spool-action-danger .vs-spool-action-sub { color: #a06060; } .vs-spool-action-danger .vs-spool-action-icon { color: #e88080; } .vs-spool-action-chev { color: var(--vs-faint); margin-left: 4px; } .vs-spool-action-sep { height: 1px; background: var(--vs-hair-2); margin: 4px 0; } .vs-spool-action-header { display: flex; align-items: center; gap: 8px; padding: 8px 12px; font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--vs-muted); border-bottom: 1px solid var(--vs-hair-2); margin-bottom: 4px; } .vs-spool-action-back { background: none; border: none; color: var(--vs-text-2); font-size: 18px; line-height: 1; padding: 2px 6px; border-radius: 4px; cursor: pointer; } .vs-spool-action-back:hover { background: rgba(126,184,247,0.10); } .vs-spool-action-group { padding: 10px 14px 4px; font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--vs-accent); } .vs-spool-action-subgroup { padding: 4px 14px 2px; font-size: 11px; font-weight: 600; color: var(--vs-muted); } .vs-spool-action-shelf { padding-left: 24px; } .vs-spool-action-shelf-dot { display: inline-block; width: 4px; height: 4px; border-radius: 50%; background: var(--vs-faint); flex-shrink: 0; } .vs-spool-action-shelf.is-current .vs-spool-action-shelf-dot { width: 7px; height: 7px; background: #c77dff; box-shadow: 0 0 6px 1px rgba(199,125,255,0.85); } .vs-spool-action-shelf.is-current { color: #e6d2ff; } .vs-spool-action-shelf.is-binrow { padding-left: 14px; } .vs-spool-action-current { color: #c77dff; font-size: 12px; font-weight: 500; margin-left: 5px; } .vs-spool-action-cap { margin-left: auto; padding-left: 8px; font-size: 11px; font-variant-numeric: tabular-nums; color: #8aa3c4; flex-shrink: 0; } .vs-spool-action-item.is-full { opacity: 0.5; cursor: not-allowed; } .vs-spool-action-item.is-full .vs-spool-action-cap { color: var(--vs-danger, #e5484d); } .vs-spool-action-cap + .vs-spool-action-chev { margin-left: 6px; } .vs-spool-wrap { position: relative; display: inline-block; } .vs-spool-wrap-trigger { position: absolute; top: 2px; right: 2px; width: 20px; height: 20px; padding: 0; background: rgba(10,12,20,0.72); border: 1px solid var(--vs-hair-2); border-radius: 4px; color: var(--vs-text-2); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; opacity: 0; transition: opacity 0.15s, background 0.15s, color 0.15s; z-index: 2; } .vs-spool-wrap:hover .vs-spool-wrap-trigger, .vs-spool-wrap:focus-within .vs-spool-wrap-trigger, .vs-spool-wrap-trigger:focus-visible { opacity: 1; } .vs-spool-wrap-trigger:hover { color: var(--vs-info); background: rgba(10,12,20,0.92); } @media (hover: none) { .vs-spool-wrap-trigger { opacity: 0.85; } } .vs-spool-ghost { border: 1.5px dashed var(--vs-hair-2); border-radius: 9px; } .vs-spool-ghost-fig { display: block; } .vs-spool-ghost-fig .vs-shelf-spool > * { opacity: 0.38; filter: grayscale(0.22); } .vs-spool-ghost:hover .vs-spool-ghost-fig .vs-shelf-spool > * { opacity: 0.55; } .vs-spool-ghost-badge { position: absolute; top: 3px; left: 50%; transform: translateX(-50%); display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%; background: var(--vs-surface); border: 1px solid var(--vs-hair-2); color: var(--vs-accent); z-index: 2; } .vs-spool-action-trigger { background: none; border: 1px solid transparent; color: var(--vs-faint); border-radius: 6px; padding: 4px 6px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: color 0.15s, background 0.15s, border-color 0.15s; } .vs-spool-action-trigger:hover, .vs-spool-action-trigger:focus-visible { color: var(--vs-info); background: rgba(126,184,247,0.08); border-color: var(--vs-hair-2); outline: none; } .vs-settings-tabs .mud-tabs-panels { padding-top: 24px; } .vs-settings-shell { display: flex; gap: 28px; align-items: flex-start; } .vs-settings-sidebar { flex: 0 0 208px; position: sticky; top: 16px; display: flex; flex-direction: column; gap: 2px; } .vs-settings-content { flex: 1 1 auto; min-width: 0; } .vs-settings-navgroup-label { font-size: 10px; letter-spacing: 0.09em; text-transform: uppercase; color: #505070; font-weight: 700; padding: 0 10px; margin: 18px 0 6px; } .vs-settings-navgroup-label:first-child { margin-top: 0; } .vs-settings-navitem { display: flex; align-items: center; justify-content: flex-start; gap: 10px; width: 100%; padding: 9px 12px; background: transparent; border: 1px solid transparent; border-radius: 8px; color: var(--vs-muted); font-size: 14px; font-weight: 500; text-align: left; cursor: pointer; transition: background 0.15s, color 0.15s, border-color 0.15s; } .vs-settings-navitem:hover { background: rgba(120,152,191,0.08); color: var(--vs-text-2); } .vs-settings-navitem.is-active { background: rgba(120,152,191,0.16); border-color: var(--vs-accent); color: var(--vs-info); font-weight: 600; } .vs-settings-navitem-icon { width: 22px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; } .vs-feat-panel { max-width: 560px; } .vs-feat-tier { font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: #505070; font-weight: 700; margin: 22px 0 4px; } .vs-feat-row { display: flex; align-items: flex-start; gap: 14px; padding: 13px 2px; border-bottom: 1px solid var(--vs-hair-2); } .vs-feat-row:last-child { border-bottom: none; } .vs-feat-row.is-soon { opacity: 0.6; } .vs-feat-icon { flex-shrink: 0; width: 38px; height: 38px; border-radius: 9px; display: flex; align-items: center; justify-content: center; background: var(--vs-bg-deep); border: 1px solid var(--vs-hair-2); color: var(--vs-accent); } .vs-feat-icon .mud-icon-root { font-size: 20px; color: var(--vs-accent); } .vs-feat-row.is-locked .vs-feat-icon { color: var(--vs-faint); } .vs-feat-row.is-locked .vs-feat-icon .mud-icon-root { color: var(--vs-faint); } .vs-feat-body { flex: 1 1 auto; min-width: 0; } .vs-feat-name { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-weight: 600; color: var(--vs-text); font-size: 14px; } .vs-feat-blurb { font-size: 12px; color: var(--vs-faint); margin-top: 2px; } .vs-feat-switch { flex-shrink: 0; display: flex; align-items: center; min-height: 38px; } .vs-feat-chip { font-size: 10px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; padding: 2px 7px; border-radius: 999px; border: 1px solid var(--vs-hair-2); color: var(--vs-faint); } .vs-feat-chip.is-core { color: var(--vs-info); border-color: var(--vs-accent); background: rgba(120,152,191,0.12); } .vs-feat-inlinelink { background: none; border: none; padding: 0; color: var(--vs-accent); font: inherit; cursor: pointer; text-decoration: underline; } .vs-usermenu { position: relative; display: inline-flex; } .vs-usermenu-trigger { display: inline-flex; align-items: center; justify-content: center; padding: 0; background: none; cursor: pointer; border-radius: 50%; border: 1.5px solid transparent; transition: border-color 0.15s; } .vs-usermenu-trigger:hover { border-color: var(--vs-accent); } .vs-usermenu-backdrop { position: fixed; inset: 0; z-index: 1200; } .vs-usermenu-panel { position: absolute; top: calc(100% + 8px); right: 0; z-index: 1201; min-width: 210px; background: var(--vs-surface); border: 1px solid var(--vs-hair-2); border-radius: 10px; box-shadow: var(--vs-shadow); padding: 4px; overflow: hidden; } .vs-usermenu-head { display: flex; align-items: center; gap: 10px; padding: 8px 10px 10px; border-bottom: 1px solid var(--vs-hair-2); margin-bottom: 4px; } .vs-usermenu-name { font-weight: 600; color: var(--vs-text); font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .vs-usermenu-item { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 7px; color: var(--vs-text-2); font-size: 14px; text-decoration: none; cursor: pointer; } .vs-usermenu-item:hover { background: var(--vs-accent-soft); color: var(--vs-text); } .vs-usermenu-item .mud-icon-root { font-size: 18px; color: var(--vs-muted); } .vs-usermenu-item--signout { color: var(--vs-danger); } .vs-usermenu-item--signout .mud-icon-root { color: var(--vs-danger); } .vs-theme-picker { padding: 6px 8px 4px; margin-top: 4px; border-top: 1px solid var(--vs-hair-2); } .vs-theme-picker-label { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--vs-faint); padding: 2px 4px 6px; } .vs-theme-picker-group { margin-bottom: 2px; } .vs-theme-picker-sublabel { font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: var(--vs-faint); opacity: 0.85; padding: 4px 4px 3px; } .vs-theme-picker-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; } .vs-theme-chip { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 7px; background: none; border: 1px solid transparent; color: var(--vs-text-2); font-family: inherit; font-size: 12.5px; text-align: left; cursor: pointer; } .vs-theme-chip:hover { background: var(--vs-accent-soft); color: var(--vs-text); } .vs-theme-swatch { width: 16px; height: 16px; border-radius: 50%; flex-shrink: 0; background: linear-gradient(135deg, var(--c-bg) 0 50%, var(--c-acc) 50% 100%); box-shadow: inset 0 0 0 1px var(--vs-hair-2); } html[data-theme="dark"] .vs-theme-chip[data-vs-theme="dark"], html[data-theme="dim"] .vs-theme-chip[data-vs-theme="dim"], html[data-theme="wine"] .vs-theme-chip[data-vs-theme="wine"], html[data-theme="lavender"] .vs-theme-chip[data-vs-theme="lavender"], html[data-theme="light"] .vs-theme-chip[data-vs-theme="light"], html[data-theme="blush"] .vs-theme-chip[data-vs-theme="blush"], html[data-theme="sepia"] .vs-theme-chip[data-vs-theme="sepia"], html[data-theme="sage"] .vs-theme-chip[data-vs-theme="sage"] { border-color: var(--vs-accent); background: var(--vs-accent-soft); color: var(--vs-text); font-weight: 600; } .vs-theme-chip-name { flex: 1 1 auto; min-width: 0; } .vs-theme-chip.is-locked { opacity: 0.9; } .vs-theme-lock { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--vs-faint); } .vs-theme-chip.is-locked:hover .vs-theme-lock { color: var(--vs-accent); } .vs-theme-pro-note { display: flex; align-items: center; gap: 6px; margin: 6px 4px 2px; padding: 7px 9px; border-radius: 7px; background: var(--vs-accent-soft); border: 1px solid var(--vs-hair-2); color: var(--vs-text-2); font-size: 11.5px; line-height: 1.35; } .vs-theme-pro-note svg { flex-shrink: 0; color: var(--vs-accent); } .vs-theme-pro-note[hidden] { display: none; } .vs-catalog-tab { background: none; border: none; border-bottom: 2px solid transparent; color: var(--vs-muted); font-size: 14px; font-weight: 600; padding: 10px 16px; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; transition: color 0.15s, border-color 0.15s; } .vs-catalog-tab:hover { color: var(--vs-text-2); } .vs-catalog-tab.is-active { color: var(--vs-accent); border-bottom-color: var(--vs-accent); } .vs-catalog-tab-count { font-size: 11px; font-weight: 700; color: var(--vs-muted); background: rgba(0, 0, 0, 0.3); border-radius: 9px; padding: 1px 7px; } .vs-segmented { display: inline-flex; border: 1px solid var(--vs-hair-2); border-radius: 8px; overflow: hidden; background: var(--vs-bg); } .vs-seg { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; background: none; border: none; border-right: 1px solid var(--vs-hair-2); color: var(--vs-muted); font-size: 13px; cursor: pointer; transition: background 0.15s, color 0.15s; } .vs-seg:last-child { border-right: none; } .vs-seg:hover { background: rgba(var(--vs-tint), 0.08); color: var(--vs-text-2); } .vs-seg.is-active { background: rgba(var(--vs-tint), 0.16); color: var(--vs-info); font-weight: 600; } .vs-seg .mud-icon-root { font-size: 16px; } @media (max-width: 640px) { .vs-seg span { display: none; } .vs-seg { padding: 7px 10px; } } .vs-combo { position: relative; display: inline-block; } .vs-combo-trigger { display: inline-flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 150px; max-width: 220px; background: var(--vs-bg); border: 1px solid var(--vs-hair-2); border-radius: 8px; padding: 9px 12px; color: var(--vs-text); font-size: 14px; cursor: pointer; transition: border-color 0.15s; } .vs-combo-trigger:hover { border-color: var(--vs-accent); } .vs-combo-trigger.is-open { border-color: var(--vs-info); } .vs-combo-trigger .vs-combo-ph { color: var(--vs-muted); } .vs-combo-trigger > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .vs-combo-caret { color: var(--vs-muted); flex-shrink: 0; } .vs-combo-clear { display: inline-flex; align-items: center; justify-content: center; color: var(--vs-muted); flex-shrink: 0; border-radius: 50%; padding: 2px; cursor: pointer; transition: background 0.15s, color 0.15s; } .vs-combo-clear:hover { background: rgba(255, 255, 255, 0.1); color: var(--vs-text); } .vs-combo-backdrop { position: fixed; inset: 0; z-index: 1200; } .vs-combo-panel { position: absolute; top: calc(100% + 4px); left: 0; z-index: 1201; width: 280px; max-width: 90vw; background: var(--vs-surface); border: 1px solid var(--vs-hair-2); border-radius: 10px; box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5); overflow: hidden; } .vs-combo-search { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-bottom: 1px solid var(--vs-hair-2); color: var(--vs-muted); } .vs-combo-search input { flex: 1; background: none; border: none; outline: none; color: var(--vs-text); font-size: 14px; } .vs-combo-list { max-height: 280px; overflow-y: auto; padding: 4px; } .vs-combo-item { display: flex; align-items: center; justify-content: flex-start; gap: 9px; width: 100%; text-align: left; background: none; border: none; border-radius: 6px; padding: 8px 10px; color: var(--vs-text-2); font-size: 14px; cursor: pointer; } .vs-combo-swatch { width: 14px; height: 14px; border-radius: 50%; border: 1px solid #555; flex-shrink: 0; } .vs-more-tag { font-size: 11px; color: #8a8aa0; background: rgba(255, 255, 255, 0.05); border: 1px solid var(--vs-hair-2); border-radius: 10px; padding: 1px 7px; white-space: nowrap; cursor: help; } .vs-empty { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 48px 20px 40px; text-align: center; color: #3f4458; } .vs-empty svg { color: #3a4060; margin-bottom: 6px; } .vs-empty-title { font-size: 15px; font-weight: 600; color: var(--vs-muted); } .vs-empty-sub { font-size: 13px; color: var(--vs-faint); max-width: 320px; } .vs-filter-help { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 50%; border: 1px solid var(--vs-hair-2); color: var(--vs-muted); font-size: 11px; font-weight: 700; cursor: help; flex-shrink: 0; user-select: none; } .vs-filter-help:hover { color: var(--vs-text-2); border-color: var(--vs-accent); } .vs-pf-th { cursor: pointer; user-select: none; white-space: nowrap; transition: color 0.15s; } .vs-pf-th:hover { color: var(--vs-text-2); } .vs-pf-th--static { cursor: default; } .vs-pf-th--static:hover { color: inherit; } .vs-clear-all { display: inline-flex; align-items: center; gap: 5px; background: none; border: 1px solid #3a2a3a; border-radius: 8px; padding: 0 12px; color: #c89090; font-size: 13px; cursor: pointer; transition: background 0.15s, color 0.15s, border-color 0.15s; } .vs-clear-all:hover { background: rgba(200, 130, 130, 0.1); color: #e0a0a0; border-color: #5a3a42; } .vs-pf-toggle { display: inline-flex; align-items: center; gap: 6px; background: var(--vs-bg); border: 1px solid var(--vs-hair-2); border-radius: 8px; padding: 0 12px; height: 38px; color: var(--vs-muted); font-size: 14px; cursor: pointer; transition: background 0.15s, color 0.15s, border-color 0.15s; } .vs-pf-toggle:hover { color: var(--vs-text); border-color: var(--vs-accent); } .vs-pf-toggle.is-on { color: var(--vs-accent); border-color: var(--vs-accent); background: color-mix(in srgb, var(--vs-accent) 12%, transparent); } .vs-combo-item:hover { background: var(--vs-accent-soft); color: var(--vs-text); } .vs-combo-item.is-selected { color: var(--vs-info); font-weight: 600; } .vs-combo-empty { padding: 12px 10px; color: var(--vs-muted); font-size: 13px; text-align: center; } .vs-pop { display: flex; flex-direction: column; gap: 8px; margin-bottom: 18px; } .vs-pop-toggle { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; background: none; border: none; padding: 2px 0; color: var(--vs-muted); font-size: 11px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; cursor: pointer; } .vs-pop-toggle:hover { color: var(--vs-text-2); } .vs-pop-row { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; } .vs-pop-label { font-size: 11px; letter-spacing: 0.07em; text-transform: uppercase; color: var(--vs-faint); font-weight: 700; margin-right: 4px; min-width: 116px; } .vs-pop-chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; background: var(--vs-bg); border: 1px solid var(--vs-hair-2); border-radius: 20px; color: var(--vs-text-2); font-size: 13px; cursor: pointer; transition: border-color 0.15s, background 0.15s, color 0.15s; } .vs-pop-chip:hover { border-color: var(--vs-accent); color: #e0e0f0; } .vs-pop-chip.is-active { border-color: var(--vs-info); background: rgba(126, 184, 247, 0.12); color: var(--vs-info); } .vs-pop-count { font-size: 11px; font-weight: 700; color: var(--vs-muted); background: rgba(0, 0, 0, 0.3); border-radius: 8px; padding: 0 6px; } .vs-pop-chip.is-active .vs-pop-count { color: var(--vs-info); } .vs-catalog-tab.is-active .vs-catalog-tab-count { color: var(--vs-accent); background: var(--vs-accent-soft); } .vs-tabbar-desc { font-size: 12px; color: var(--vs-faint); margin-left: 6px; } .vs-tabbar-stats { margin-left: auto; font-size: 12px; color: var(--vs-muted); white-space: nowrap; font-family: var(--vs-mono); } .vs-settings-navitem .mud-icon-root { font-size: 18px; flex-shrink: 0; } @media (max-width: 820px) { .vs-settings-shell { flex-direction: column; gap: 18px; } .vs-settings-sidebar { flex: 1 1 auto; position: static; flex-direction: row; flex-wrap: wrap; gap: 6px; width: 100%; } .vs-settings-navgroup-label { width: 100%; margin: 8px 0 2px; } .vs-settings-navgroup-label:first-child { margin-top: 0; } .vs-settings-navitem { width: auto; padding: 7px 12px; border-radius: 20px; border-color: var(--vs-hair-2); font-size: 13px; } } .vs-specialty-popover.mud-popover { width: max-content !important; min-width: 200px !important; max-width: min(320px, calc(100vw - 24px)) !important; max-height: 60vh; background: var(--vs-surface) !important; border: 1px solid var(--vs-hair-2) !important; box-shadow: 0 8px 24px rgba(0,0,0,0.55) !important; z-index: 1400 !important; } .mud-tooltip { z-index: 1600 !important; max-width: 240px !important; white-space: normal !important; background: var(--vs-surface) !important; color: var(--vs-text-2) !important; border: 1px solid var(--vs-hair-2); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.22); } .vs-onb-preview { margin-top: 10px; padding: 10px 12px; background: var(--vs-bg-deep); border: 1px solid var(--vs-hair); border-radius: var(--vs-radius); } .vs-onb-preview-hd { display: flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 600; color: var(--vs-text-2); margin-bottom: 8px; } .vs-onb-preview-shelf { display: flex; align-items: center; gap: 10px; padding: 5px 0; border-top: 1px solid var(--vs-hair-3); } .vs-onb-preview-shelf--bin { border-top-style: dashed; } .vs-onb-preview-shelf-label { font-family: var(--vs-mono); font-size: 10px; color: var(--vs-faint); min-width: 44px; flex-shrink: 0; } .vs-onb-preview-slots { display: flex; align-items: center; gap: 4px; flex: 1; } .vs-onb-preview-slot { width: 18px; height: 46px; border-radius: 3px; background: rgba(var(--vs-tint), 0.02); border: 1px dashed rgba(var(--vs-tint), 0.12); flex-shrink: 0; } .vs-onb-preview-shelf--bin .vs-onb-preview-slot { opacity: 0.45; } .vs-onb-preview-etc { font-size: 10px; color: var(--vs-faint); margin-left: 4px; font-style: italic; } .vs-onb-preview-more { font-size: 10px; color: var(--vs-faint); padding: 4px 0 0; border-top: 1px solid var(--vs-hair-3); } .vs-onb-type-group { margin-bottom: 0; } .vs-onb-type-label { font-size: 10.5px; color: var(--vs-muted); letter-spacing: 0.07em; text-transform: uppercase; font-weight: 600; margin-bottom: 10px; } .vs-onb-type-option { display: flex; align-items: center; gap: 9px; padding: 4px 0; cursor: pointer; font-size: 13px; color: var(--vs-text-2); user-select: none; } .vs-onb-shelf-count { margin-left: 25px; margin-top: 8px; } .vs-onb-form-grid { display: grid; grid-template-columns: 35% 1fr; gap: 24px; align-items: start; margin-bottom: 12px; } @media (max-width: 520px) { .vs-onb-form-grid { grid-template-columns: 1fr; } } @keyframes vs-onb-add-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(var(--vs-tint), 0); } 50% { box-shadow: 0 0 0 4px rgba(var(--vs-tint), 0.30); } } .vs-onb-add-ready { animation: vs-onb-add-pulse 1.5s ease-in-out infinite; } .vs-onb-add-hint { display: flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 600; color: var(--vs-accent); } @media (prefers-reduced-motion: reduce) { .vs-onb-add-ready { animation: none; box-shadow: 0 0 0 3px rgba(var(--vs-tint), 0.30); } } @keyframes vs-spool-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @keyframes vs-done-glow { 0%, 100% { filter: drop-shadow(0 0 6px rgba(var(--vs-tint), 0.2)); } 50% { filter: drop-shadow(0 0 20px rgba(var(--vs-tint), 0.55)); } } .vs-done-spool-wrap { display: inline-block; animation: vs-spool-spin 14s linear infinite, vs-done-glow 3s ease-in-out infinite; } @keyframes vs-done-fade-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } .vs-done-item { animation: vs-done-fade-in 0.4s ease both; } .vs-onb-delete { color: var(--vs-faint) !important; transition: color 0.15s !important; } .vs-onb-delete:hover { color: var(--vs-danger) !important; } .vs-spool-low-dot { position: absolute; top: 2px; right: 2px; width: 8px; height: 8px; border-radius: 50%; background: var(--vs-warning); box-shadow: 0 0 0 2px var(--vs-bg-deep), 0 0 6px rgba(225, 187, 107, 0.55); pointer-events: none; z-index: 1; } .vs-forecast-controls { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; } .vs-forecast-chips { display: inline-flex; gap: 4px; background: var(--vs-surface-2); border-radius: 9px; padding: 3px; } .vs-forecast-chip { background: none; border: none; border-radius: 7px; color: var(--vs-muted); font-family: inherit; font-size: 12.5px; font-weight: 600; padding: 5px 11px; cursor: pointer; } .vs-forecast-chip.is-active { background: var(--vs-accent); color: var(--vs-bg-deep); } .vs-forecast-list { display: flex; flex-direction: column; gap: 8px; margin-top: 16px; } .vs-forecast-row { display: flex; align-items: center; gap: 12px; background: var(--vs-surface); border: 1px solid var(--vs-hair-2); border-radius: 10px; padding: 11px 14px; } .vs-forecast-dot { width: 14px; height: 14px; border-radius: 50%; flex-shrink: 0; box-shadow: inset 0 0 0 1px rgba(0,0,0,0.18); } .vs-forecast-main { flex: 1 1 auto; min-width: 0; } .vs-forecast-name { font-size: 14px; font-weight: 600; color: var(--vs-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .vs-forecast-sub { font-size: 11.5px; color: var(--vs-muted); margin-top: 1px; } .vs-forecast-stats { text-align: right; flex-shrink: 0; } .vs-forecast-days { font-size: 14px; font-weight: 700; color: var(--vs-text); } .vs-forecast-days.is-urgent { color: var(--vs-danger); } .vs-forecast-meta { font-size: 11px; color: var(--vs-faint); line-height: 1.4; } .vs-forecast-buy { flex-shrink: 0; display: flex; align-items: center; gap: 4px; } .vs-forecast-wish { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border: 1px solid transparent; border-radius: 8px; background: none; cursor: pointer; color: var(--vs-muted); flex-shrink: 0; } .vs-forecast-wish:hover { color: var(--vs-accent); border-color: var(--vs-hair-2); background: var(--vs-bg-tint); } .vs-forecast-wish.is-on { color: var(--vs-accent); } .vs-forecast-buybtn { display: inline-block; background: var(--vs-accent-soft); color: var(--vs-accent); border: 1px solid var(--vs-accent); border-radius: 8px; font-size: 12px; font-weight: 600; padding: 6px 12px; text-decoration: none; white-space: nowrap; } .vs-forecast-buybtn:hover { background: var(--vs-accent); color: var(--vs-bg-deep); } .vs-wish-list { display: flex; flex-direction: column; gap: 8px; } .vs-wish-row { display: flex; align-items: center; gap: 12px; background: var(--vs-surface); border: 1px solid var(--vs-hair-2); border-radius: 10px; padding: 11px 14px; } .vs-wish-dot { width: 22px; height: 22px; border-radius: 50%; flex-shrink: 0; box-shadow: inset 0 0 0 1px rgba(0,0,0,0.22); } .vs-wish-main { flex: 1 1 auto; min-width: 0; } .vs-wish-name { font-size: 14px; font-weight: 600; color: var(--vs-text); } .vs-wish-name a { color: var(--vs-text); text-decoration: none; } .vs-wish-name a:hover { color: var(--vs-accent); text-decoration: underline; } .vs-wish-sub { font-size: 12px; color: var(--vs-muted); margin-top: 2px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .vs-wish-kg { font-size: 11px; font-weight: 600; color: var(--vs-text-2); background: var(--vs-bg); border: 1px solid var(--vs-hair-2); border-radius: 5px; padding: 1px 6px; } .vs-wish-disc { font-size: 11px; font-weight: 600; color: var(--vs-danger); background: rgba(196,84,84,0.12); border-radius: 5px; padding: 1px 6px; } .vs-wish-buy { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; flex-shrink: 0; } .vs-wish-btn { display: inline-block; background: var(--vs-accent-soft); color: var(--vs-accent); border: 1px solid var(--vs-accent); border-radius: 8px; font-size: 12px; font-weight: 600; padding: 5px 11px; text-decoration: none; white-space: nowrap; } .vs-wish-btn:hover { background: var(--vs-accent); color: var(--vs-bg-deep); } .vs-wish-btn--ghost { background: transparent; color: var(--vs-text-2); border-color: var(--vs-hair-2); } .vs-wish-btn--ghost:hover { background: var(--vs-bg); color: var(--vs-text); border-color: var(--vs-text-2); } .vs-wish-nolink { font-size: 11.5px; color: var(--vs-faint); font-style: italic; } .vs-wish-remove { flex-shrink: 0; background: transparent; border: 0; color: var(--vs-faint); cursor: pointer; padding: 4px; border-radius: 6px; display: inline-flex; } .vs-wish-remove:hover { color: var(--vs-danger); background: rgba(196,84,84,0.10); } .vs-wish-copy { display: inline-flex; align-items: center; gap: 6px; background: transparent; border: 1px solid var(--vs-hair-2); color: var(--vs-text-2); border-radius: 8px; font-size: 12px; font-weight: 600; padding: 6px 12px; cursor: pointer; } .vs-wish-copy:hover { border-color: var(--vs-accent); color: var(--vs-accent); } @media (max-width: 560px) { .vs-wish-row { flex-wrap: wrap; } .vs-wish-buy { width: 100%; justify-content: flex-start; } } .vs-legend-table { width: 100%; border-collapse: collapse; } .vs-legend-table td { vertical-align: top; padding: 5px 0; } .vs-legend-sec { font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--vs-accent); } .vs-legend-sec-row td { padding: 15px 0 4px; } .vs-legend-sec-row:first-child td { padding-top: 2px; } .vs-legend-pill-cell { width: 1%; white-space: nowrap; padding-right: 14px; } .vs-legend-chip { display: inline-block; min-width: 96px; text-align: center; padding: 3px 10px; border-radius: 6px; font-size: 11.5px; font-weight: 600; white-space: nowrap; } .vs-legend-chip-ghost { background: transparent; color: var(--vs-muted); border: 1.5px dashed var(--vs-hair-2); } .vs-legend-desc { font-size: 13px; color: var(--vs-text-2); line-height: 1.45; text-align: left; } .vs-cpick { display: flex; flex-direction: column; gap: 9px; margin: 6px 0 12px; max-width: 240px; } .vs-cpick-field { position: relative; border-radius: 8px; cursor: crosshair; border: 1px solid var(--vs-hair-2); touch-action: none; user-select: none; } .vs-cpick-thumb { position: absolute; width: 14px; height: 14px; border-radius: 50%; transform: translate(-50%, -50%); pointer-events: none; border: 2px solid #fff; box-shadow: 0 0 0 1px rgba(0,0,0,0.55), 0 1px 3px rgba(0,0,0,0.45); } .vs-cpick-hue { -webkit-appearance: none; appearance: none; width: 240px; height: 14px; border-radius: 7px; border: 1px solid var(--vs-hair-2); outline: none; cursor: pointer; background: linear-gradient(to right, #f00 0%, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%); } .vs-cpick-hue::-webkit-slider-thumb { -webkit-appearance: none; width: 16px; height: 16px; border-radius: 50%; background: #fff; border: 1px solid rgba(0,0,0,0.45); box-shadow: 0 1px 3px rgba(0,0,0,0.4); cursor: pointer; } .vs-cpick-hue::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; background: #fff; border: 1px solid rgba(0,0,0,0.45); cursor: pointer; } .vs-runoutw { display: flex; flex-direction: column; gap: 2px; padding: 2px 0; } .vs-runoutw-row { display: flex; align-items: center; gap: 9px; padding: 7px 8px; border-radius: 8px; text-decoration: none; color: inherit; } .vs-runoutw-row:hover { background: var(--vs-accent-soft); } .vs-runoutw-dot { width: 11px; height: 11px; border-radius: 50%; flex-shrink: 0; box-shadow: inset 0 0 0 1px rgba(0,0,0,0.18); } .vs-runoutw-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; } .vs-runoutw-name { font-size: 12.5px; font-weight: 600; color: var(--vs-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .vs-runoutw-sub { font-size: 10.5px; color: var(--vs-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .vs-runoutw-days { font-size: 12px; font-weight: 700; color: var(--vs-text-2); flex-shrink: 0; } .vs-runoutw-days.is-urgent { color: var(--vs-danger); } .vs-runoutw-cta { font-size: 11px; font-weight: 600; color: var(--vs-accent); flex-shrink: 0; white-space: nowrap; } .vs-runoutw-all { display: inline-block; margin-top: 6px; font-size: 11.5px; color: var(--vs-accent); text-decoration: none; padding: 2px 8px; } .vs-runoutw-all:hover { text-decoration: underline; } .vs-wmode { display: inline-flex; gap: 2px; background: var(--vs-surface-2); border-radius: 8px; padding: 2px; margin-bottom: 8px; } .vs-wmode-seg { background: none; border: none; border-radius: 6px; color: var(--vs-muted); font-family: inherit; font-size: 11.5px; font-weight: 600; padding: 4px 12px; cursor: pointer; } .vs-wmode-seg.is-active { background: var(--vs-surface); color: var(--vs-text); box-shadow: 0 1px 2px rgba(0,0,0,0.18); } .vs-wmode-seg:disabled { opacity: 0.4; cursor: not-allowed; } .vs-whelp { font-size: 11px; color: var(--vs-faint); margin-top: 5px; line-height: 1.4; max-width: 280px; } .vs-wwarn { font-size: 11.5px; color: var(--vs-warning); margin-top: 5px; line-height: 1.4; max-width: 280px; } .vs-wpct { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; } .vs-wpct-chip { min-width: 38px; background: var(--vs-surface-2); border: 1px solid var(--vs-hair-2); border-radius: 7px; color: var(--vs-text-2); font-family: inherit; font-size: 12px; font-weight: 600; padding: 6px 8px; cursor: pointer; } .vs-wpct-chip:hover { border-color: var(--vs-accent); color: var(--vs-text); } .vs-wpct-chip.is-active { background: var(--vs-accent-soft); border-color: var(--vs-accent); color: var(--vs-text); } .vs-wpct-save { background: var(--vs-accent); border: none; border-radius: 7px; color: var(--vs-bg-deep); font-family: inherit; font-size: 12px; font-weight: 700; padding: 6px 14px; cursor: pointer; } .vs-wpct-saved { font-size: 12px; font-weight: 600; color: var(--vs-accent); display: inline-flex; align-items: center; } .vs-dry-hours.mud-input-control { flex: 0 0 auto; width: 96px; } .vs-dry-hours .mud-input-slot, .vs-dry-hours input { font-size: 13px; } .vs-dry-hours input::placeholder { font-size: 13px; } .vs-icon { display: inline-block; flex: none; vertical-align: middle; background-color: currentColor; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; } .vs-icon--printing { -webkit-mask-image: url(/icons/printing.svg); mask-image: url(/icons/printing.svg); } .vs-icon--dryer { -webkit-mask-image: url(/icons/dryer.svg); mask-image: url(/icons/dryer.svg); } .vs-icon--drybox { -webkit-mask-image: url(/icons/drybox.svg); mask-image: url(/icons/drybox.svg); } .vs-icon--scale { -webkit-mask-image: url(/icons/scale.svg); mask-image: url(/icons/scale.svg); } .vs-icon--shelf { -webkit-mask-image: url(/icons/shelf.svg); mask-image: url(/icons/shelf.svg); } .vs-icon--thermometer { -webkit-mask-image: url(/icons/thermometer.svg); mask-image: url(/icons/thermometer.svg); } .vs-icon--calipers { -webkit-mask-image: url(/icons/calipers.svg); mask-image: url(/icons/calipers.svg); } .vs-icon--vacuumbag { -webkit-mask-image: url(/icons/vacuumbag.svg); mask-image: url(/icons/vacuumbag.svg); } .vs-icon--moisture { -webkit-mask-image: url(/icons/moisture.svg); mask-image: url(/icons/moisture.svg); } .vs-icon--search { -webkit-mask-image: url(/icons/search.svg); mask-image: url(/icons/search.svg); } .vs-icon--inventory { -webkit-mask-image: url(/icons/inventory.svg); mask-image: url(/icons/inventory.svg); } .vs-icon--room { -webkit-mask-image: url(/icons/room.svg); mask-image: url(/icons/room.svg); } .vs-icon--bin { -webkit-mask-image: url(/icons/bin.svg); mask-image: url(/icons/bin.svg); } .vs-icon--rack { -webkit-mask-image: url(/icons/rack.svg); mask-image: url(/icons/rack.svg); } .vs-icon--menu { -webkit-mask-image: url(/icons/menu.svg); mask-image: url(/icons/menu.svg); } .vs-icon--swatch { -webkit-mask-image: url(/icons/swatch.svg); mask-image: url(/icons/swatch.svg); } .vs-icon--spool { -webkit-mask-image: url(/icons/spool.svg); mask-image: url(/icons/spool.svg); } .vs-icon--poop { -webkit-mask-image: url(/icons/poop.svg); mask-image: url(/icons/poop.svg); } .vs-sticky-bar { margin-bottom: 10px; } .vs-sticky-add { display: inline-flex; align-items: center; gap: 7px; background: none; border: 1px dashed var(--vs-hair-2); border-radius: 8px; color: var(--vs-muted); font-family: inherit; font-size: 12.5px; padding: 7px 12px; cursor: pointer; } .vs-sticky-add:hover { color: var(--vs-text); border-color: var(--vs-accent); } .vs-sticky-add-mark { display: inline-flex; color: var(--vs-accent); } .vs-sticky-card { position: relative; overflow: hidden; display: flex; align-items: center; gap: 9px; background: color-mix(in srgb, var(--vs-surface) 55%, #ffffff 45%); color: #2a2f3a; border: 1px solid rgba(0, 0, 0, 0.07); border-radius: 8px; padding: 8px 10px; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18), 0 1px 1px rgba(0, 0, 0, 0.10); } .vs-sticky-card::after { content: ""; position: absolute; right: 0; bottom: 0; border-style: solid; border-width: 0 0 11px 11px; border-color: transparent transparent rgba(0, 0, 0, 0.16) transparent; } .vs-sticky-card-mark { display: inline-flex; flex-shrink: 0; color: var(--vs-accent); } .vs-sticky-input { flex: 1 1 auto; min-width: 0; background: none; border: none; color: #2a2f3a; font-family: inherit; font-size: 13px; padding: 2px 0; } .vs-sticky-input:focus { outline: none; } .vs-sticky-input::placeholder { color: #8a8f9a; } .vs-sticky-remove { flex-shrink: 0; background: none; border: none; color: #8a8f9a; font-family: inherit; font-size: 12px; cursor: pointer; padding: 2px 4px; } .vs-sticky-remove:hover { color: var(--vs-danger, #d2607a); } .vs-sticky-add--mini { padding: 3px 9px; font-size: 12px; border-radius: 7px; } .vs-sticky-card--mini { flex: 1 1 auto; min-width: 0; max-width: 320px; gap: 6px; padding: 4px 9px; border-radius: 7px; } .vs-sticky-card--mini .vs-sticky-input { font-size: 12.5px; } .vs-sticky-card--mini .vs-sticky-remove { font-size: 16px; line-height: 1; padding: 0 2px; } .vs-postit-wrap { display: flex; flex-wrap: wrap; gap: 10px; padding: 6px 2px 2px; } .vs-postit { display: flex; flex-direction: column; gap: 4px; width: 118px; min-height: 96px; padding: 10px 11px; background: #fef3a0; color: #3a3320; text-decoration: none; border-radius: 2px; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.45); transform: rotate(-1.4deg); transition: transform 0.12s ease, box-shadow 0.12s ease; } .vs-postit:nth-child(even) { transform: rotate(1.6deg); background: #fdeb7e; } .vs-postit:nth-child(3n) { transform: rotate(0.6deg); } .vs-postit:hover { transform: rotate(0) translateY(-2px); box-shadow: 0 7px 15px rgba(0, 0, 0, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.45); } .vs-postit-note { font-size: 12.5px; line-height: 1.35; font-weight: 600; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; } .vs-postit-spool { margin-top: auto; font-size: 10.5px; opacity: 0.65; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .vs-spool-note-dot { position: absolute; top: 1px; left: 1px; display: inline-flex; align-items: center; justify-content: center; color: var(--vs-accent); filter: drop-shadow(0 0 1.2px var(--vs-bg-deep)) drop-shadow(0 1px 1px rgba(0, 0, 0, 0.35)); pointer-events: none; z-index: 1; } .vs-nav-low-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: rgba(225, 187, 107, 0.18); border: 1px solid rgba(225, 187, 107, 0.35); color: var(--vs-warning); font-family: var(--vs-mono); font-size: 10px; font-weight: 700; letter-spacing: 0; line-height: 1; } .vs-low-widget { background: rgba(225, 187, 107, 0.04); border: 1px solid rgba(225, 187, 107, 0.18); border-radius: var(--vs-radius-lg); padding: 14px 16px; margin-top: 12px; margin-bottom: 20px; } .vs-low-widget-hd { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; } .vs-low-widget-title { display: flex; align-items: center; gap: 7px; font-family: var(--vs-sans); font-size: 12.5px; font-weight: 600; color: var(--vs-text-2); flex: 1; } .vs-low-widget-count { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: rgba(225, 187, 107, 0.15); border: 1px solid rgba(225, 187, 107, 0.30); color: var(--vs-warning); font-family: var(--vs-mono); font-size: 10.5px; font-weight: 700; } .vs-low-settings-btn { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; background: transparent; border: 1px solid var(--vs-hair); border-radius: 6px; color: var(--vs-faint); cursor: pointer; transition: color 0.12s, background 0.12s, border-color 0.12s; } .vs-low-settings-btn:hover, .vs-low-settings-btn.is-active { color: var(--vs-text-2); background: var(--vs-surface-2); border-color: var(--vs-hair-2); } .vs-low-settings { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; padding: 10px 12px; background: var(--vs-surface-2); border-radius: var(--vs-radius); margin-bottom: 12px; border: 1px solid var(--vs-hair); } .vs-low-settings-row { display: flex; align-items: center; gap: 10px; } .vs-low-settings-label { font-size: 12px; color: var(--vs-text-2); white-space: nowrap; } .vs-low-slider { width: 100px; accent-color: var(--vs-warning); } .vs-low-select { font-size: 12px !important; padding: 5px 24px 5px 8px !important; } .vs-low-save-btn { font-size: 12px !important; padding: 5px 14px !important; margin-left: auto; } .vs-low-widget-list { display: flex; align-items: flex-start; gap: 10px; flex-wrap: wrap; } .vs-low-spool { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; text-decoration: none; cursor: pointer; padding: 6px; border-radius: var(--vs-radius); border: 1px solid transparent; transition: background 0.12s, border-color 0.12s; } .vs-low-spool:hover { background: var(--vs-surface-2); border-color: var(--vs-hair); } .vs-low-spool-name { font-family: var(--vs-sans); font-size: 10px; line-height: 1.4; color: var(--vs-text-2); max-width: 64px; height: 3em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-align: center; } .vs-low-spool-pct { font-family: var(--vs-mono); font-size: 10.5px; font-weight: 700; letter-spacing: 0.02em; } .vs-low-more { display: flex; align-items: center; align-self: center; padding: 4px 10px; font-size: 11px; color: var(--vs-faint); text-decoration: none; transition: color 0.12s; } .vs-low-more:hover { color: var(--vs-accent); } .vs-studio-head-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; } .vs-studio-head-actions .vs-widget-customize-panel { left: auto; right: 0; } .vs-studio-head-stats { display: flex; align-items: center; gap: 12px; } .vs-studio-value { font-family: var(--vs-mono); font-size: 12.5px; font-weight: 600; color: var(--vs-secondary); letter-spacing: 0.01em; padding: 3px 8px; background: rgba(124, 200, 160, 0.08); border: 1px solid rgba(124, 200, 160, 0.20); border-radius: 999px; } .vs-studio-value--weight { color: var(--vs-accent); background: rgba(var(--vs-tint), 0.08); border-color: rgba(var(--vs-tint), 0.20); } .vs-studio-value--count { color: #cdbcf2; background: rgba(170, 130, 235, 0.10); border-color: rgba(170, 130, 235, 0.24); } .vs-activity { display: flex; flex-direction: column; max-height: 360px; overflow-y: auto; } .vs-activity-row { display: flex; align-items: center; gap: 10px; padding: 7px 4px; text-decoration: none; border-bottom: 1px solid rgba(255, 255, 255, 0.05); } .vs-activity-row:last-child { border-bottom: none; } .vs-activity-row:hover { background: rgba(255, 255, 255, 0.03); } .vs-activity-dot { width: 16px; height: 16px; border-radius: 50%; flex: 0 0 auto; border: 1px solid rgba(255, 255, 255, 0.18); } .vs-activity-main { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; } .vs-activity-name { font-size: 13px; color: var(--vs-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .vs-activity-act { font-size: 11px; color: var(--vs-faint); } .vs-activity-time { font-size: 11px; color: var(--vs-faint); flex: 0 0 auto; white-space: nowrap; } .vs-cm-input { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; } .vs-cm-swatch-lg { width: 44px; height: 44px; border-radius: 10px; border: 1px solid var(--vs-hair-2); flex: 0 0 auto; display: flex; align-items: center; justify-content: center; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04); } .vs-cm-swatch-q { color: var(--vs-faint); font-size: 20px; font-weight: 600; } .vs-cm-picker { width: 44px; height: 38px; padding: 2px; background: var(--vs-bg-tint); border: 1px solid var(--vs-hair-2); border-radius: 8px; cursor: pointer; flex: 0 0 auto; } .vs-cm-presets { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 22px; } .vs-cm-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px 4px 7px; font-size: 12px; color: var(--vs-text-2); background: var(--vs-bg-tint); border: 1px solid var(--vs-hair-2); border-radius: 999px; cursor: pointer; } .vs-cm-chip:hover { border-color: #3a3a4e; color: var(--vs-text); } .vs-cm-chip-dot { width: 12px; height: 12px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.18); } .vs-cm-materials { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: -10px 0 22px; } .vs-cm-mat { font-size: 12px; color: var(--vs-text-2); background: var(--vs-bg-tint); border: 1px solid var(--vs-hair-2); border-radius: 999px; padding: 3px 11px; cursor: pointer; } .vs-cm-mat:hover { border-color: #3a3a4e; color: var(--vs-text); } .vs-cm-mat--on { color: #0c1220; background: var(--vs-secondary); border-color: var(--vs-secondary); font-weight: 600; } .vs-cm-mat-clear { font-size: 12px; color: var(--vs-faint); background: transparent; border: none; cursor: pointer; text-decoration: underline; padding: 3px 4px; } .vs-cm-mat-clear:hover { color: var(--vs-text-2); } .vs-cm-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; } @media (max-width: 760px) { .vs-cm-grid { grid-template-columns: 1fr; } } .vs-cm-col-title { font-size: 14px; font-weight: 600; color: var(--vs-text); margin: 0 0 10px; display: flex; align-items: center; gap: 8px; } .vs-cm-count { font-size: 11px; font-weight: 600; color: var(--vs-faint); background: var(--vs-bg-tint); border-radius: 999px; padding: 1px 8px; } .vs-cm-empty { color: var(--vs-faint); font-size: 13px; margin: 6px 0; } .vs-cm-join { border: 1px solid var(--vs-hair-2); border-radius: 12px; background: linear-gradient(160deg, var(--vs-bg-tint) 0%, var(--vs-bg-deep) 100%); padding: 20px 20px 22px; } .vs-cm-join-title { font-size: 18px; font-weight: 700; color: var(--vs-text); margin: 0 0 8px; line-height: 1.25; } .vs-cm-join-body { font-size: 13px; line-height: 1.55; color: var(--vs-text-2); margin: 0 0 16px; } .vs-cm-join-body em { color: var(--vs-text); font-style: normal; font-weight: 600; } .vs-cm-join-cta { display: inline-block; } .vs-cm-join-signin { display: block; margin-top: 10px; font-size: 12px; color: var(--vs-faint); text-decoration: underline; } .vs-cm-join-signin:hover { color: var(--vs-text-2); } .vs-cm-row-wrap { display: flex; align-items: center; gap: 2px; } .vs-cm-row-wrap .vs-cm-row { flex: 1 1 auto; } .vs-cm-row { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border-radius: 8px; text-decoration: none; border: 1px solid transparent; } .vs-cm-row:hover { background: var(--vs-bg-tint); border-color: var(--vs-hair-2); } .vs-cm-wish { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border: 1px solid transparent; border-radius: 8px; background: none; cursor: pointer; color: var(--vs-muted); } .vs-cm-wish:hover { color: var(--vs-accent); border-color: var(--vs-hair-2); background: var(--vs-bg-tint); } .vs-cm-wish.is-on { color: var(--vs-accent); } .vs-cm-swatch { width: 30px; height: 30px; border-radius: 7px; flex: 0 0 auto; border: 1px solid rgba(255, 255, 255, 0.12); } .vs-cm-row-main { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; } .vs-cm-row-label { font-size: 13px; color: var(--vs-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .vs-cm-qty { font-size: 11px; font-weight: 600; color: var(--vs-text-2); background: rgba(255, 255, 255, 0.07); border-radius: 999px; padding: 0 6px; margin-left: 6px; vertical-align: middle; } .vs-cm-row-sub { font-size: 11px; color: var(--vs-faint); } .vs-cm-score { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; } .vs-cm-bar { width: 56px; height: 5px; border-radius: 3px; background: rgba(255, 255, 255, 0.08); overflow: hidden; } .vs-cm-bar-fill { display: block; height: 100%; border-radius: 3px; background: linear-gradient(90deg, #3d8a72, var(--vs-secondary)); } .vs-cm-pct { font-size: 12px; font-variant-numeric: tabular-nums; color: var(--vs-text-2); min-width: 34px; text-align: right; } .vs-cm-popular { margin-top: 36px; } .vs-cm-popular-grid { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; } .vs-cm-pop { display: inline-flex; align-items: center; gap: 7px; padding: 5px 12px 5px 8px; font-size: 13px; color: var(--vs-text-2); background: var(--vs-bg-tint); border: 1px solid var(--vs-hair-2); border-radius: 999px; text-decoration: none; } .vs-cm-pop:hover { border-color: #3a3a4e; color: var(--vs-text); } .vs-cm-pop-dot { width: 14px; height: 14px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.18); } .vs-photos { margin: 4px 0; } .vs-photos-head { font-size: 12px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--vs-muted); margin-bottom: 10px; display: flex; align-items: center; gap: 8px; } .vs-photos-count { font-size: 11px; font-weight: 600; color: var(--vs-text-2); background: var(--vs-surface-2); border: 1px solid var(--vs-hair-2); border-radius: 999px; padding: 1px 8px; } .vs-photos-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 8px; } .vs-photos.is-compact .vs-photos-grid { grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)); gap: 6px; } .vs-photo-tile { position: relative; aspect-ratio: 1; } .vs-photo-thumb { display: block; width: 100%; height: 100%; padding: 0; border: 1px solid var(--vs-hair-2); border-radius: 10px; overflow: hidden; background: var(--vs-surface-2); cursor: pointer; transition: border-color 0.15s var(--vs-ease), transform 0.15s var(--vs-ease); } .vs-photo-thumb:hover { border-color: var(--vs-accent); transform: translateY(-1px); } .vs-photo-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } .vs-photo-tag { position: absolute; left: 6px; bottom: 6px; font-size: 10px; font-weight: 600; color: var(--vs-text); background: color-mix(in srgb, var(--vs-surface) 86%, transparent); border: 1px solid var(--vs-hair-2); border-radius: 6px; padding: 1px 6px; pointer-events: none; } .vs-photo-badge { position: absolute; top: 6px; left: 6px; font-size: 10px; font-weight: 700; border-radius: 6px; padding: 1px 6px; pointer-events: none; } .vs-photo-badge.is-pending { background: var(--vs-st-drying-bg); color: var(--vs-st-drying-fg); } .vs-photo-badge.is-public { background: var(--vs-accent-glow); color: var(--vs-accent-deep); } .vs-photo-badge.is-rejected { background: rgba(190, 80, 90, 0.2); color: var(--vs-danger, #d2607a); } .vs-photo-actions { position: absolute; top: 6px; right: 6px; display: flex; gap: 4px; opacity: 0; transition: opacity 0.15s var(--vs-ease); } .vs-photo-tile:hover .vs-photo-actions { opacity: 1; } .vs-photo-actions button { font-size: 10px; font-weight: 600; font-family: inherit; color: var(--vs-text); background: color-mix(in srgb, var(--vs-surface) 90%, transparent); border: 1px solid var(--vs-hair-2); border-radius: 6px; padding: 2px 7px; cursor: pointer; } .vs-photo-actions button:hover { border-color: var(--vs-accent); } .vs-photo-actions .vs-photo-del { color: var(--vs-danger, #d2607a); padding: 2px 6px; } .vs-photo-add { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; aspect-ratio: 1; position: relative; border: 1.5px dashed var(--vs-hair); border-radius: 10px; color: var(--vs-muted); cursor: pointer; transition: border-color 0.15s var(--vs-ease), color 0.15s var(--vs-ease); } .vs-photo-add:hover { border-color: var(--vs-accent); color: var(--vs-accent); } .vs-photo-add.is-busy { cursor: progress; opacity: 0.7; } .vs-photo-add input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; } .vs-photo-add.is-busy input[type="file"] { pointer-events: none; } .vs-photo-add-icon { font-size: 20px; line-height: 1; } .vs-photo-add-label { font-size: 11px; font-weight: 600; } .vs-photos-error { margin-top: 8px; font-size: 12px; color: var(--vs-danger, #d2607a); } .vs-photos-foot { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; margin-top: 10px; } .vs-photos-kind { display: inline-flex; border: 1px solid var(--vs-hair-2); border-radius: 8px; overflow: hidden; } .vs-photos-kind button { font-size: 11px; font-weight: 600; font-family: inherit; color: var(--vs-text-2); background: var(--vs-surface); border: none; padding: 4px 12px; cursor: pointer; } .vs-photos-kind button.is-active { background: var(--vs-accent-soft); color: var(--vs-text); } .vs-photos-public { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--vs-text-2); cursor: pointer; } .vs-photos-public input { accent-color: var(--vs-accent); } .vs-photo-lightbox { position: fixed; inset: 0; z-index: 11000; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 32px; background: rgba(8, 9, 14, 0.86); cursor: zoom-out; } .vs-photo-lightbox img { max-width: min(94vw, 1400px); max-height: 84vh; object-fit: contain; border-radius: 10px; box-shadow: 0 24px 80px rgba(0, 0, 0, 0.6); cursor: default; } .vs-photo-lightbox-x { position: absolute; top: 18px; right: 22px; font-size: 20px; color: #fff; background: rgba(255, 255, 255, 0.12); border: none; border-radius: 50%; width: 38px; height: 38px; cursor: pointer; } .vs-photo-lightbox-x:hover { background: rgba(255, 255, 255, 0.24); } html[data-mode="light"] .vs-photo-lightbox { background: color-mix(in srgb, var(--vs-bg-deep) 90%, transparent); } html[data-mode="light"] .vs-photo-lightbox-x { color: var(--vs-text); background: rgba(0, 0, 0, 0.08); } html[data-mode="light"] .vs-photo-lightbox-x:hover { background: rgba(0, 0, 0, 0.16); } html[data-mode="light"] .vs-photo-lightbox-cap { color: var(--vs-text); } html[data-mode="light"] .vs-photo-lightbox img { box-shadow: 0 24px 80px rgba(0, 0, 0, 0.25); } .vs-photo-lightbox-cap { color: #eef1f6; font-size: 13px; max-width: 700px; text-align: center; } .vs-photo-lightbox-edit { display: flex; gap: 8px; width: min(700px, 92vw); } .vs-photo-lightbox-edit input { flex: 1 1 auto; min-width: 0; background: rgba(255, 255, 255, 0.10); border: 1px solid rgba(255, 255, 255, 0.22); border-radius: 8px; color: #eef1f6; font-family: inherit; font-size: 13px; padding: 8px 12px; } .vs-photo-lightbox-edit input::placeholder { color: rgba(238, 241, 246, 0.55); } .vs-photo-lightbox-edit button { flex: 0 0 auto; background: var(--vs-accent); color: var(--vs-bg-deep); border: none; border-radius: 8px; padding: 8px 16px; font-family: inherit; font-size: 13px; font-weight: 600; cursor: pointer; } .vs-community-note { margin-top: 10px; font-size: 12px; color: var(--vs-faint); } .vs-printlog-cam { background: none; border: none; cursor: pointer; font-size: 13px; line-height: 1; padding: 2px 4px; opacity: 0.7; } .vs-printlog-cam:hover { opacity: 1; } .vs-printlog-photos { margin: 4px 0 10px 22px; padding: 10px 12px; border-left: 2px solid var(--vs-hair-2); background: var(--vs-surface-2); border-radius: 0 8px 8px 0; } .vs-shelf-cam.is-active { color: var(--vs-accent); } .vs-shelf-photos { padding: 10px 12px; border-top: 1px solid var(--vs-hair-2); }