:root { /* Dark (black) mode by default */ color-scheme: dark; --ui-font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji"; --ui-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; --ui-bg: #06080d; --ui-surface: #0b0f18; --ui-surface-2: #111827; --ui-surface-3: #161f31; --ui-text: #f3f6fb; --ui-text-secondary: #a4b1c8; --ui-text-tertiary: #7c8ba7; --ui-border: #222d43; --ui-border-strong: #2f3d5a; --ui-accent: #ff3448; --ui-accent-strong: #ff6875; --ui-accent-soft: rgba(255, 52, 72, 0.15); --ui-accent-soft-strong: rgba(255, 52, 72, 0.22); --ui-success: #16a34a; --ui-warning: #d97706; --ui-danger: #dc2626; --ui-radius-sm: 10px; --ui-radius: 14px; --ui-radius-lg: 18px; --ui-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.32); --ui-shadow: 0 20px 46px rgba(0, 0, 0, 0.5); --ui-shadow-lg: 0 28px 72px rgba(0, 0, 0, 0.58); --ui-focus-ring: 0 0 0 3px rgba(255, 52, 72, 0.28); --ui-container: 1080px; --ui-space-1: 4px; --ui-space-2: 8px; --ui-space-3: 12px; --ui-space-4: 16px; --ui-space-5: 20px; --ui-space-6: 24px; --ui-space-8: 32px; --ui-space-10: 40px; } /* Optional: force light mode per page by setting */ :root[data-ui-theme="light"] { color-scheme: light; --ui-bg: #f7f7f8; --ui-surface: #ffffff; --ui-surface-2: #f3f4f6; --ui-surface-3: #e8edf5; --ui-text: #111827; --ui-text-secondary: #4b5563; --ui-text-tertiary: #6b7280; --ui-border: rgba(17, 24, 39, 0.12); --ui-border-strong: rgba(17, 24, 39, 0.2); --ui-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06); --ui-shadow: 0 12px 30px rgba(0, 0, 0, 0.08); --ui-shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.12); --ui-accent-soft: rgba(255, 52, 72, 0.12); --ui-accent-soft-strong: rgba(255, 52, 72, 0.2); } * { box-sizing: border-box; } html, body { height: 100%; } body { margin: 0; background: var(--ui-bg); color: var(--ui-text); font-family: var(--ui-font-sans); line-height: 1.5; text-rendering: optimizeLegibility; } img { max-width: 100%; height: auto; } a { color: inherit; } .ui-requires-admin { display: none !important; } :focus-visible { outline: none; box-shadow: var(--ui-focus-ring); border-radius: var(--ui-radius-sm); } @media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; scroll-behavior: auto !important; } } .ui-container { width: min(var(--ui-container), 100%); margin: 0 auto; padding: var(--ui-space-8) var(--ui-space-4); } @media (max-width: 640px) { .ui-container { padding: var(--ui-space-6) var(--ui-space-3); } } .ui-header { display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; gap: var(--ui-space-4); } .ui-title { margin: 0; font-size: 1.95rem; font-weight: 780; letter-spacing: -0.02em; line-height: 1.12; } .ui-subtitle { margin: var(--ui-space-2) 0 0; color: var(--ui-text-secondary); max-width: 70ch; } .ui-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--ui-space-4); } .ui-card { display: flex; flex-direction: column; gap: var(--ui-space-2); padding: var(--ui-space-5); border-radius: var(--ui-radius); border: 1px solid var(--ui-border); background: var(--ui-surface); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.02), var(--ui-shadow-sm); text-decoration: none; transition: transform 150ms ease, box-shadow 150ms ease, border-color 150ms ease; } .ui-card__tag { margin-top: auto; align-self: flex-start; } .ui-card:hover { box-shadow: var(--ui-shadow); border-color: var(--ui-border-strong); transform: translateY(-2px); text-decoration: none; } .ui-card:active { transform: translateY(0); } .ui-card__title { margin: 0 0 var(--ui-space-2); font-size: 1.1rem; font-weight: 760; letter-spacing: -0.01em; } .ui-card__desc { margin: 0 0 var(--ui-space-3); color: var(--ui-text-secondary); } .ui-badge { display: inline-flex; align-items: center; gap: 8px; padding: 5px 10px; border-radius: 999px; border: 1px solid var(--ui-border); background: var(--ui-surface-2); color: var(--ui-text-secondary); font-size: 0.82rem; font-weight: 650; } .ui-badge--accent { border-color: rgba(255, 52, 72, 0.35); background: var(--ui-accent-soft); color: var(--ui-text); } .ui-btn { appearance: none; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--ui-border); background: var(--ui-surface); color: var(--ui-text); padding: 10px 14px; border-radius: var(--ui-radius-sm); cursor: pointer; font-weight: 700; box-shadow: var(--ui-shadow-sm); text-decoration: none; transition: transform 120ms ease, box-shadow 120ms ease, background 120ms ease, border-color 120ms ease; } .ui-btn:hover { box-shadow: var(--ui-shadow); border-color: var(--ui-border-strong); } .ui-btn:active { transform: translateY(1px); } .ui-btn--primary { background: var(--ui-accent-soft); border-color: rgba(255, 52, 72, 0.5); } .ui-btn--primary:hover { background: var(--ui-accent-soft-strong); border-color: rgba(255, 52, 72, 0.65); } .ui-btn--danger { background: rgba(220, 38, 38, 0.12); border-color: rgba(220, 38, 38, 0.45); } .ui-btn--danger:hover { border-color: rgba(220, 38, 38, 0.65); } .ui-btn:disabled { opacity: 0.6; cursor: not-allowed; box-shadow: none; } /* Page-level back button (top-left) */ body.ui-has-back { padding-top: calc(env(safe-area-inset-top, 0px) + var(--ui-space-4) + 44px); } body.ui-has-auth { padding-top: calc(env(safe-area-inset-top, 0px) + var(--ui-space-4) + 44px); } .ui-auth { position: fixed; top: calc(env(safe-area-inset-top, 0px) + var(--ui-space-4)); right: calc(env(safe-area-inset-right, 0px) + var(--ui-space-4)); z-index: 1000; display: flex; align-items: center; gap: var(--ui-space-2); flex-wrap: wrap; } .ui-auth .ui-auth-quota { min-width: 108px; justify-content: center; font-variant-numeric: tabular-nums; } .ui-auth .ui-auth-quota.ui-auth-quota--limited { border-color: rgba(220, 38, 38, 0.6); background: rgba(220, 38, 38, 0.16); color: #fecaca; } [data-ui-theme="light"] .ui-auth .ui-auth-quota.ui-auth-quota--limited { background: rgba(220, 38, 38, 0.12); color: #b91c1c; } .ui-auth.ui-auth--slot { position: static; inset: auto; z-index: auto; display: grid; align-items: start; justify-items: stretch; } .ui-auth.ui-auth--slot .ui-btn { width: 100%; justify-content: center; } .ui-auth.ui-auth--slot .ui-auth-quota { width: 100%; } .ui-auth-block { position: fixed; inset: 0; z-index: 2000; background: rgba(0, 0, 0, 0.6); display: grid; place-items: center; padding: var(--ui-space-4); } .ui-auth-block__card { width: min(560px, 100%); border-radius: var(--ui-radius-lg); border: 1px solid var(--ui-border); background: var(--ui-surface); box-shadow: var(--ui-shadow-lg); padding: var(--ui-space-5); display: grid; gap: var(--ui-space-2); } .ui-auth-block__title { font-weight: 800; letter-spacing: -0.01em; } .ui-auth-block__message { color: var(--ui-text-secondary); } .ui-back { position: fixed; top: calc(env(safe-area-inset-top, 0px) + var(--ui-space-4)); left: calc(env(safe-area-inset-left, 0px) + var(--ui-space-4)); z-index: 1000; padding: 8px 12px; } /* Login screen should not expose a back action before authentication */ .auth-card .auth-header__top > .ui-btn { display: none !important; } .ui-field { display: grid; gap: 6px; } .ui-label { font-size: 0.9rem; font-weight: 650; } .ui-help { color: var(--ui-text-secondary); font-size: 0.85rem; } .ui-input, .ui-select, .ui-textarea { width: 100%; padding: 10px 12px; border-radius: var(--ui-radius-sm); border: 1px solid var(--ui-border); background: var(--ui-surface); color: var(--ui-text); font-size: 1rem; } .ui-input:focus-visible, .ui-select:focus-visible, .ui-textarea:focus-visible { border-color: rgba(255, 52, 72, 0.55); } .ui-textarea { min-height: 120px; resize: vertical; font-family: var(--ui-font-sans); } .ui-pre, pre.ui-pre { border-radius: var(--ui-radius); border: 1px solid var(--ui-border); background: var(--ui-surface-2); padding: var(--ui-space-4); overflow: auto; font-family: var(--ui-font-mono); font-size: 0.95rem; line-height: 1.5; } .ui-kbd { font-family: var(--ui-font-mono); border: 1px solid var(--ui-border); background: var(--ui-surface-2); padding: 2px 6px; border-radius: 8px; font-size: 0.9em; } /* App shell (sidebar layout) */ .ui-shell { min-height: 100vh; display: grid; position: relative; --ui-sidebar-expanded-width: 286px; --ui-sidebar-collapsed-width: 20px; --ui-sidebar-width: var(--ui-sidebar-expanded-width); grid-template-columns: var(--ui-sidebar-width) minmax(0, 1fr); transition: grid-template-columns 180ms ease; } .ui-shell[data-sidebar-collapsed="true"] { --ui-sidebar-width: var(--ui-sidebar-collapsed-width); } @media (max-width: 900px) { .ui-shell { --ui-sidebar-width: 100%; grid-template-columns: 1fr; } } .ui-sidebar { position: sticky; top: 0; height: 100vh; overflow: hidden; border-right: 1px solid var(--ui-border); background: var(--ui-surface); transition: border-color 180ms ease; } @media (max-width: 900px) { .ui-sidebar { position: relative; height: auto; border-right: none; border-bottom: 1px solid var(--ui-border); } } .ui-sidebarToggle { appearance: none; padding: 0; position: fixed; top: 50%; left: calc(env(safe-area-inset-left, 0px) + var(--ui-sidebar-width) - 12px); transform: translateY(-50%); z-index: 1100; width: 24px; height: 40px; border-radius: 999px; border: 1px solid var(--ui-border); border-left: none; background: var(--ui-surface); color: var(--ui-text-secondary); display: grid; place-items: center; cursor: pointer; box-shadow: var(--ui-shadow-sm); opacity: 0; transition: left 180ms ease, opacity 160ms ease, border-color 120ms ease, box-shadow 120ms ease, background 120ms ease, color 120ms ease; } .ui-shell .ui-sidebar:hover ~ .ui-sidebarToggle, .ui-shell .ui-sidebarToggle:hover, .ui-shell .ui-sidebarToggle:focus-visible { opacity: 1; color: var(--ui-text); } .ui-shell[data-sidebar-collapsed="true"] .ui-sidebarToggle { opacity: 0.35; } .ui-sidebarToggle:hover { background: var(--ui-surface-2); border-color: rgba(255, 52, 72, 0.45); box-shadow: var(--ui-shadow); } @media (max-width: 900px) { .ui-sidebarToggle { display: none; } } .ui-sidebar__scroll { height: 100%; overflow: auto; display: grid; grid-template-rows: auto auto 1fr auto; gap: 0; transition: opacity 160ms ease, visibility 160ms ease, transform 160ms ease; } .ui-shell[data-sidebar-collapsed="true"] .ui-sidebar__scroll { opacity: 0; visibility: hidden; pointer-events: none; transform: translateX(-16px); } @media (max-width: 900px) { .ui-shell[data-sidebar-collapsed="true"] .ui-sidebar__scroll { opacity: 1; visibility: visible; pointer-events: auto; transform: none; } } .ui-sidebar__brand { display: grid; gap: var(--ui-space-2); text-decoration: none; padding: var(--ui-space-6) var(--ui-space-4) var(--ui-space-4); border-bottom: 1px solid var(--ui-border); } .ui-sidebar__brand:hover { background: rgba(255, 255, 255, 0.01); } .ui-sidebar__brandLogo { width: 150px; max-width: 100%; height: auto; display: block; } .ui-sidebar__brandText { display: grid; gap: 2px; line-height: 1.2; } .ui-sidebar__brandTitle { color: var(--ui-text-secondary); font-size: 0.7rem; font-weight: 760; letter-spacing: 0.18em; text-transform: uppercase; } .ui-sidebar__brandSub { color: var(--ui-text-tertiary); font-size: 0.82rem; } .ui-workspace { position: relative; padding: var(--ui-space-3); border-bottom: 1px solid var(--ui-border); } .ui-workspace__trigger { width: 100%; min-height: 46px; border: 1px solid transparent; border-radius: var(--ui-radius-sm); background: transparent; color: var(--ui-text); display: flex; align-items: center; gap: var(--ui-space-3); padding: 0 var(--ui-space-3); text-align: left; cursor: pointer; transition: background 120ms ease, border-color 120ms ease, color 120ms ease; } .ui-workspace__trigger:hover { background: var(--ui-surface-2); border-color: rgba(255, 255, 255, 0.04); } .ui-workspace__trigger:focus-visible { border-color: rgba(255, 52, 72, 0.42); } .ui-workspace__avatar { width: 24px; height: 24px; flex: 0 0 auto; border-radius: 8px; border: 1px solid var(--ui-border-strong); background: var(--ui-surface); overflow: hidden; display: grid; place-items: center; } .ui-workspace__logo { width: 100%; height: 100%; display: block; object-fit: contain; padding: 2px; } .ui-workspace__avatar--mono { background: var(--ui-surface-3); } .ui-workspace__monogram { font-size: 0.64rem; line-height: 1; letter-spacing: 0.04em; font-weight: 780; color: var(--ui-text); text-transform: uppercase; } .ui-workspace__name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.95rem; line-height: 1.2; font-weight: 680; } .ui-workspace__chevron { width: 16px; height: 16px; margin-left: auto; color: var(--ui-text-tertiary); display: grid; place-items: center; transition: transform 120ms ease, color 120ms ease; } .ui-workspace.is-open .ui-workspace__chevron { transform: rotate(180deg); color: var(--ui-text); } .ui-workspace__menu { position: absolute; top: calc(100% - 6px); left: var(--ui-space-3); right: var(--ui-space-3); z-index: 25; display: grid; gap: 4px; padding: var(--ui-space-2); border-radius: var(--ui-radius-sm); border: 1px solid var(--ui-border-strong); background: var(--ui-surface); box-shadow: var(--ui-shadow); } .ui-workspace__menu[hidden] { display: none; } .ui-workspace__item, .ui-workspace__manage, .ui-workspace__retry { appearance: none; width: 100%; min-height: 40px; display: flex; align-items: center; gap: var(--ui-space-2); border: 1px solid transparent; border-radius: 8px; background: transparent; color: var(--ui-text-secondary); padding: 0 var(--ui-space-2); text-decoration: none; cursor: pointer; text-align: left; transition: background 120ms ease, border-color 120ms ease, color 120ms ease; } .ui-workspace__item:hover, .ui-workspace__manage:hover, .ui-workspace__retry:hover { background: var(--ui-surface-2); border-color: rgba(255, 255, 255, 0.04); color: var(--ui-text); } .ui-workspace__item:focus-visible, .ui-workspace__manage:focus-visible, .ui-workspace__retry:focus-visible { border-color: rgba(255, 52, 72, 0.42); } .ui-workspace__item[aria-checked="true"] { background: var(--ui-accent-soft); border-color: rgba(255, 52, 72, 0.38); color: var(--ui-text); } .ui-workspace__itemName { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.9rem; font-weight: 650; } .ui-workspace__check { margin-left: auto; color: var(--ui-accent-strong); font-size: 0.95rem; font-weight: 780; } .ui-workspace__separator { height: 1px; background: var(--ui-border); margin: 2px 0; } .ui-workspace__empty { padding: var(--ui-space-2); color: var(--ui-text-secondary); font-size: 0.84rem; line-height: 1.35; } .ui-workspace__status { margin-top: var(--ui-space-2); padding: 0 var(--ui-space-1); color: var(--ui-danger); font-size: 0.78rem; line-height: 1.35; } .ui-workspace.is-empty .ui-workspace__name, .ui-workspace.is-error .ui-workspace__name { color: var(--ui-text-secondary); } .ui-workspace.is-error .ui-workspace__trigger { border-color: rgba(220, 38, 38, 0.35); } .ui-workspace__trigger--skeleton { cursor: default; pointer-events: none; } .ui-workspace__skeletonAvatar { width: 24px; height: 24px; border-radius: 8px; background: var(--ui-surface-2); } .ui-workspace__skeletonLine { flex: 1; max-width: 140px; height: 12px; border-radius: 999px; background: var(--ui-surface-2); } .ui-workspace__skeletonDot { width: 14px; height: 14px; border-radius: 999px; background: var(--ui-surface-2); margin-left: auto; } .ui-workspace.is-loading .ui-workspace__skeletonAvatar, .ui-workspace.is-loading .ui-workspace__skeletonLine, .ui-workspace.is-loading .ui-workspace__skeletonDot { animation: ui-workspace-pulse 1.4s ease-in-out infinite; } @keyframes ui-workspace-pulse { 0%, 100% { opacity: 0.58; } 50% { opacity: 1; } } .ui-nav { display: grid; gap: var(--ui-space-5); padding: var(--ui-space-4) var(--ui-space-3); } .ui-nav__section { display: grid; gap: var(--ui-space-2); } .ui-nav__heading { margin: 0; padding: 0 var(--ui-space-2); color: var(--ui-text-tertiary); font-size: 0.68rem; font-weight: 760; letter-spacing: 0.2em; text-transform: uppercase; } .ui-nav__list { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; } .ui-nav__link { position: relative; display: flex; align-items: center; gap: var(--ui-space-2); padding: 10px 12px; border-radius: var(--ui-radius-sm); border: 1px solid transparent; text-decoration: none; color: var(--ui-text-secondary); transition: background 120ms ease, border-color 120ms ease, color 120ms ease; } .ui-nav__link:hover { background: var(--ui-surface-2); border-color: rgba(255, 255, 255, 0.04); color: var(--ui-text); } .ui-nav__link[aria-current="page"] { background: var(--ui-accent-soft); border-color: rgba(255, 52, 72, 0.42); color: var(--ui-text); } .ui-nav__link[aria-current="page"]::before { content: ""; position: absolute; left: -8px; top: 8px; bottom: 8px; width: 2px; border-radius: 2px; background: var(--ui-accent); } .ui-nav__icon { width: 18px; height: 18px; flex: 0 0 auto; color: var(--ui-text-tertiary); } .ui-nav__link[aria-current="page"] .ui-nav__icon { color: var(--ui-text); } .ui-nav__item--sub .ui-nav__link { padding-left: 34px; } .ui-sidebar__footer { display: grid; gap: var(--ui-space-2); margin: var(--ui-space-3); padding: var(--ui-space-3); border-radius: var(--ui-radius); border: 1px solid var(--ui-border); background: var(--ui-surface-2); } .ui-main { min-width: 0; padding: var(--ui-space-8) var(--ui-space-6); } @media (max-width: 900px) { .ui-main { padding: var(--ui-space-6) var(--ui-space-3); } } .ui-main__content { width: min(var(--ui-container), 100%); margin: 0 auto; } /* Scrollbars */ *::-webkit-scrollbar { width: 10px; height: 10px; } *::-webkit-scrollbar-track { background: transparent; } *::-webkit-scrollbar-thumb { background: rgba(124, 139, 167, 0.3); border-radius: 999px; } *::-webkit-scrollbar-thumb:hover { background: rgba(124, 139, 167, 0.5); }