:root { color-scheme: dark; --bg-0: #050711; --bg-1: #070a16; --bg-2: #0a1025; --panel: rgba(15, 23, 42, 0.62); --panel-2: rgba(2, 6, 23, 0.35); --border: rgba(148, 163, 184, 0.16); --border-strong: rgba(148, 163, 184, 0.22); --text: #e5e7eb; --text-strong: rgba(255, 255, 255, 0.92); --muted: rgba(226, 232, 240, 0.66); --muted-2: rgba(226, 232, 240, 0.55); --muted-3: rgba(226, 232, 240, 0.45); --accent: #7c5cff; --accent-2: #22d3ee; --good: #34d399; --warn: #fbbf24; --bad: #fb7185; --shadow: 0 16px 45px rgba(0, 0, 0, 0.55); --sidebar-bg: linear-gradient(180deg, rgba(2, 6, 23, 0.82) 0%, rgba(2, 6, 23, 0.72) 55%, rgba(2, 6, 23, 0.78) 100%); --topbar-bg: linear-gradient(180deg, rgba(2, 6, 23, 0.55) 0%, rgba(2, 6, 23, 0.35) 100%); --input-bg: rgba(2, 6, 23, 0.35); --input-text: rgba(255, 255, 255, 0.92); --input-placeholder: rgba(226, 232, 240, 0.45); --btn-ghost-bg: rgba(148, 163, 184, 0.08); --btn-ghost-border: rgba(148, 163, 184, 0.12); --btn-ghost-text: rgba(226, 232, 240, 0.88); --icon-btn-bg: rgba(148, 163, 184, 0.07); --icon-btn-border: rgba(148, 163, 184, 0.14); --icon-btn-text: rgba(226, 232, 240, 0.90); --modal-overlay: rgba(0, 0, 0, 0.68); --modal-card-bg: linear-gradient(180deg, rgba(2, 6, 23, 0.72) 0%, rgba(15, 23, 42, 0.62) 100%); --modal-card-border: rgba(148, 163, 184, 0.18); --modal-card-shadow: 0 30px 80px rgba(0, 0, 0, 0.65); --modal-head-border: rgba(148, 163, 184, 0.14); --modal-close-bg: rgba(148, 163, 184, 0.08); --modal-close-border: rgba(148, 163, 184, 0.16); --modal-close-text: rgba(226, 232, 240, 0.90); --dropzone-bg: rgba(2, 6, 23, 0.25); --dropzone-border: rgba(148, 163, 184, 0.35); --dropzone-hover-bg: rgba(124, 92, 255, 0.08); --dropzone-hover-border: rgba(124, 92, 255, 0.55); --timeline-accent: rgba(124, 92, 255, 0.75); --timeline-text: rgba(226, 232, 240, 0.78); --flash-bg: rgba(2, 6, 23, 0.35); --app-bg-dot: rgba(255, 255, 255, 0.14); --app-bg-opacity: 0.35; --app-bg-blend: screen; --metric-bg: linear-gradient(180deg, rgba(15, 23, 42, 0.68) 0%, rgba(2, 6, 23, 0.35) 100%); --metric-sheen: radial-gradient(600px 100px at 20% 0%, rgba(124, 92, 255, 0.18), transparent 55%); --ai-summary-bg: rgba(52, 211, 153, 0.06); --ai-summary-border: rgba(52, 211, 153, 0.18); --ai-summary-text: rgba(226, 232, 240, 0.92); } /* Light mode overrides: add class `theme-light` to */ html.theme-light { color-scheme: light; --bg-0: #f7f8ff; --bg-1: #f2f6ff; --bg-2: #edf2ff; --panel: rgba(255, 255, 255, 0.78); --panel-2: rgba(255, 255, 255, 0.55); --border: rgba(15, 23, 42, 0.10); --border-strong: rgba(15, 23, 42, 0.16); --text: #0f172a; --text-strong: rgba(15, 23, 42, 0.92); --muted: rgba(15, 23, 42, 0.62); --muted-2: rgba(15, 23, 42, 0.54); --muted-3: rgba(15, 23, 42, 0.46); --shadow: 0 16px 40px rgba(15, 23, 42, 0.12); --sidebar-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.86) 0%, rgba(248, 250, 252, 0.78) 55%, rgba(255, 255, 255, 0.82) 100%); --topbar-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.72) 0%, rgba(248, 250, 252, 0.62) 100%); --input-bg: rgba(255, 255, 255, 0.72); --input-text: rgba(15, 23, 42, 0.92); --input-placeholder: rgba(15, 23, 42, 0.40); --btn-ghost-bg: rgba(15, 23, 42, 0.05); --btn-ghost-border: rgba(15, 23, 42, 0.10); --btn-ghost-text: rgba(15, 23, 42, 0.85); --icon-btn-bg: rgba(15, 23, 42, 0.04); --icon-btn-border: rgba(15, 23, 42, 0.10); --icon-btn-text: rgba(15, 23, 42, 0.85); --modal-overlay: rgba(15, 23, 42, 0.55); --modal-card-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.92) 0%, rgba(248, 250, 252, 0.86) 100%); --modal-card-border: rgba(15, 23, 42, 0.12); --modal-card-shadow: 0 30px 70px rgba(15, 23, 42, 0.18); --modal-head-border: rgba(15, 23, 42, 0.10); --modal-close-bg: rgba(15, 23, 42, 0.05); --modal-close-border: rgba(15, 23, 42, 0.10); --modal-close-text: rgba(15, 23, 42, 0.85); --dropzone-bg: rgba(255, 255, 255, 0.72); --dropzone-border: rgba(15, 23, 42, 0.16); --dropzone-hover-bg: rgba(124, 92, 255, 0.10); --dropzone-hover-border: rgba(124, 92, 255, 0.40); --timeline-accent: rgba(124, 92, 255, 0.65); --timeline-text: rgba(15, 23, 42, 0.78); --flash-bg: rgba(255, 255, 255, 0.75); --app-bg-dot: rgba(2, 6, 23, 0.10); --app-bg-opacity: 0.22; --app-bg-blend: multiply; --metric-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.92) 0%, rgba(248, 250, 252, 0.80) 100%); --metric-sheen: radial-gradient(700px 120px at 15% 0%, rgba(124, 92, 255, 0.14), transparent 60%); --ai-summary-bg: rgba(16, 185, 129, 0.08); --ai-summary-border: rgba(16, 185, 129, 0.20); --ai-summary-text: rgba(15, 23, 42, 0.88); } html, body { height: 100%; } /* Background */ .app-body { background: radial-gradient(1200px 700px at 18% 8%, rgba(124, 92, 255, 0.15), transparent 55%), radial-gradient(900px 650px at 80% 12%, rgba(34, 211, 238, 0.12), transparent 60%), radial-gradient(950px 750px at 55% 92%, rgba(52, 211, 153, 0.06), transparent 60%), linear-gradient(180deg, var(--bg-0) 0%, var(--bg-1) 40%, var(--bg-2) 100%); color: var(--text); } .app-bg { position: fixed; inset: 0; pointer-events: none; background: radial-gradient(1px 1px at 10% 20%, var(--app-bg-dot) 0, transparent 1px), radial-gradient(1px 1px at 60% 80%, var(--app-bg-dot) 0, transparent 1px), radial-gradient(1px 1px at 30% 65%, var(--app-bg-dot) 0, transparent 1px); opacity: var(--app-bg-opacity); mix-blend-mode: var(--app-bg-blend); } /* Layout */ .app-shell { position: relative; min-height: 100%; } .app-sidebar { position: fixed; inset: 0 auto 0 0; width: 18rem; transform: translateX(-100%); transition: transform 200ms ease; z-index: 50; background: var(--sidebar-bg); border-right: 1px solid var(--border); backdrop-filter: blur(14px); } .app-sidebar.is-open { transform: translateX(0); } @media (min-width: 768px) { .app-sidebar { transform: translateX(0); } } .sidebar-overlay { position: fixed; inset: 0; z-index: 40; background: rgba(0, 0, 0, 0.55); opacity: 0; pointer-events: none; transition: opacity 200ms ease; } .sidebar-overlay.is-open { opacity: 1; pointer-events: auto; } .app-main { min-height: 100%; } @media (min-width: 768px) { .app-main { padding-left: 18rem; } } .topbar { position: sticky; top: 0; z-index: 30; border-bottom: 1px solid var(--border); background: var(--topbar-bg); backdrop-filter: blur(14px); } .topbar-inner { margin: 0 auto; max-width: 80rem; padding: 1.1rem 1rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; } .page-kicker { font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted-2); } .page-title { font-size: 1.55rem; font-weight: 700; line-height: 1.1; letter-spacing: -0.02em; } .page-subtitle { margin-top: 0.35rem; color: var(--muted); font-size: 0.95rem; } .app-content { margin: 0 auto; max-width: 80rem; padding: 1.25rem 1rem 2rem; } /* Sidebar */ .sidebar-header { padding: 1.25rem 1.25rem 1rem; border-bottom: 1px solid var(--border); } .brand { display: flex; align-items: center; gap: 0; font-weight: 700; letter-spacing: -0.02em; } .brand-logo { /* These logo PNGs include a lot of transparent padding around the mark. Give the a fixed box and use object-fit: cover to visually crop the padding. */ width: 15rem; height: 2.75rem; display: block; filter: drop-shadow(0 10px 18px rgba(0, 0, 0, 0.20)); object-fit: cover; object-position: left center; } /* Auth page logo wrapper: keep it aligned with headings */ .brand-auth .brand-logo { width: 15rem; height: 3.2rem; } .sidebar-section { padding: 1rem 1rem 0.5rem; } .sidebar-label { padding: 0.4rem 0.75rem; font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted-3); } .sidebar-nav { padding: 0.3rem 0.75rem 1rem; display: flex; flex-direction: column; gap: 0.25rem; } .sidebar-link { display: flex; align-items: center; gap: 0.6rem; border-radius: 0.85rem; padding: 0.65rem 0.75rem; color: rgba(226, 232, 240, 0.78); transition: background 160ms ease, color 160ms ease, border-color 160ms ease; border: 1px solid transparent; } html.theme-light .sidebar-link { color: rgba(15, 23, 42, 0.78); } .sidebar-link:hover { background: rgba(148, 163, 184, 0.08); border-color: rgba(148, 163, 184, 0.10); color: var(--text-strong); } .sidebar-link.is-active { background: linear-gradient(135deg, rgba(124, 92, 255, 0.18) 0%, rgba(34, 211, 238, 0.08) 100%); border-color: rgba(124, 92, 255, 0.25); color: var(--text-strong); box-shadow: 0 12px 35px rgba(0, 0, 0, 0.35); } .sidebar-icon { width: 1.05rem; height: 1.05rem; opacity: 0.9; } .sidebar-footer { padding: 0.9rem 1rem 1rem; border-top: 1px solid var(--border); } /* Components */ .panel { border-radius: 1.2rem; border: 1px solid var(--border); background: var(--panel); padding: 1rem; box-shadow: var(--shadow); } .panel--compact { padding: 0.85rem; } .panel-title { font-size: 0.95rem; font-weight: 650; color: var(--text-strong); } .metric-card { border-radius: 1.2rem; background: var(--metric-bg); border: 1px solid var(--border); padding: 1rem; box-shadow: var(--shadow); position: relative; overflow: hidden; } .metric-card::after { content: ""; position: absolute; inset: -2px; background: var(--metric-sheen); pointer-events: none; } .metric-label { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted-2); } .metric-value { margin-top: 0.35rem; font-size: 1.75rem; font-weight: 750; letter-spacing: -0.02em; color: var(--text-strong); } .input { width: 100%; border-radius: 0.9rem; border: 1px solid var(--border); background: var(--input-bg); padding: 0.6rem 0.8rem; font-size: 0.92rem; color: var(--input-text); outline: none; } .input::placeholder { color: var(--input-placeholder); } .input:focus { border-color: rgba(124, 92, 255, 0.45); box-shadow: 0 0 0 4px rgba(124, 92, 255, 0.12); } .upload-dropzone { display: flex; flex-direction: column; align-items: center; gap: 0.45rem; border-radius: 1rem; border: 1px dashed var(--dropzone-border); background: var(--dropzone-bg); padding: 1.25rem; text-align: center; cursor: pointer; transition: border-color 160ms ease, background 160ms ease; } .upload-dropzone:hover { border-color: var(--dropzone-hover-border); background: var(--dropzone-hover-bg); } .timeline-step { border-left: 3px solid var(--timeline-accent); padding-left: 0.65rem; color: var(--timeline-text); } .chip { display: inline-flex; align-items: center; gap: 0.35rem; border-radius: 999px; background: rgba(34, 211, 238, 0.10); color: rgba(34, 211, 238, 0.95); border: 1px solid rgba(34, 211, 238, 0.18); padding: 0.18rem 0.55rem; font-size: 0.76rem; line-height: 1.1; } .chip--ok { background: rgba(34, 197, 94, 0.12); border-color: rgba(34, 197, 94, 0.24); color: rgba(34, 197, 94, 0.95); } .chip--warn { background: rgba(250, 204, 21, 0.14); border-color: rgba(250, 204, 21, 0.28); color: rgba(250, 204, 21, 0.95); } .chip--bad { background: rgba(251, 113, 133, 0.14); border-color: rgba(251, 113, 133, 0.25); color: rgba(251, 113, 133, 0.95); } .chip--muted { background: rgba(148, 163, 184, 0.10); border-color: rgba(148, 163, 184, 0.18); color: rgba(226, 232, 240, 0.78); } .icon-btn--warn { background: rgba(250, 204, 21, 0.10); border-color: rgba(250, 204, 21, 0.22); color: rgba(250, 204, 21, 0.95); } .icon-btn--warn:hover { background: rgba(250, 204, 21, 0.14); border-color: rgba(250, 204, 21, 0.30); } html.theme-light .chip--muted { color: rgba(15, 23, 42, 0.70); } .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.45rem; border-radius: 0.95rem; padding: 0.65rem 0.9rem; font-size: 0.92rem; font-weight: 600; border: 1px solid transparent; transition: transform 120ms ease, background 160ms ease, border-color 160ms ease, color 160ms ease; user-select: none; white-space: nowrap; } .btn:active { transform: translateY(1px); } .btn-primary { background: linear-gradient(135deg, rgba(124, 92, 255, 0.95) 0%, rgba(34, 211, 238, 0.65) 100%); color: rgba(255, 255, 255, 0.96); box-shadow: 0 16px 45px rgba(124, 92, 255, 0.18); } .btn-primary:hover { filter: brightness(1.02); } .btn-ghost { background: var(--btn-ghost-bg); border-color: var(--btn-ghost-border); color: var(--btn-ghost-text); } .btn-ghost:hover { background: rgba(148, 163, 184, 0.12); border-color: rgba(148, 163, 184, 0.18); } .btn-danger { background: rgba(251, 113, 133, 0.14); border-color: rgba(251, 113, 133, 0.25); color: rgba(251, 113, 133, 0.95); } .btn-danger:hover { background: rgba(251, 113, 133, 0.18); } .icon-btn { width: 2.55rem; height: 2.55rem; display: inline-flex; align-items: center; justify-content: center; border-radius: 0.95rem; border: 1px solid var(--icon-btn-border); background: var(--icon-btn-bg); color: var(--icon-btn-text); transition: background 160ms ease, border-color 160ms ease, transform 120ms ease; } .icon-btn:hover { background: rgba(148, 163, 184, 0.11); border-color: rgba(148, 163, 184, 0.22); } .icon-btn:active { transform: translateY(1px); } .icon-btn--danger { background: rgba(251, 113, 133, 0.10); border-color: rgba(251, 113, 133, 0.20); color: rgba(251, 113, 133, 0.95); } .icon-btn--danger:hover { background: rgba(251, 113, 133, 0.14); border-color: rgba(251, 113, 133, 0.28); } /* Modal */ .modal-overlay { position: fixed; inset: 0; background: var(--modal-overlay); backdrop-filter: blur(10px); z-index: 60; opacity: 0; pointer-events: none; transition: opacity 180ms ease; } .modal-overlay.is-open { opacity: 1; pointer-events: auto; } .modal { position: fixed; inset: 0; z-index: 70; display: grid; place-items: center; padding: 1.25rem; opacity: 0; pointer-events: none; transform: translateY(10px); transition: opacity 180ms ease, transform 180ms ease; } .modal.is-open { opacity: 1; pointer-events: auto; transform: translateY(0); } .modal-card { width: min(38rem, 100%); border-radius: 1.4rem; border: 1px solid var(--modal-card-border); background: var(--modal-card-bg); box-shadow: var(--modal-card-shadow); overflow: hidden; } .modal-head { padding: 1.1rem 1.1rem 0.85rem; border-bottom: 1px solid var(--modal-head-border); display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; } .modal-body { padding: 1.1rem; } .modal-title { font-size: 1.05rem; font-weight: 700; letter-spacing: -0.01em; } .modal-close { width: 2.3rem; height: 2.3rem; border-radius: 0.85rem; border: 1px solid var(--modal-close-border); background: var(--modal-close-bg); color: var(--modal-close-text); } .modal-close:hover { background: rgba(148, 163, 184, 0.12); } html.theme-light .modal-close:hover { background: rgba(15, 23, 42, 0.08); } /* Chat */ .chat-shell { padding: 0; overflow: hidden; } .chat-thread { height: min(62vh, 720px); overflow: auto; padding: 1.1rem; display: flex; flex-direction: column; gap: 0.75rem; } .chat-empty { border: 1px dashed rgba(148, 163, 184, 0.20); background: rgba(148, 163, 184, 0.06); border-radius: 1.2rem; padding: 1rem; } .chat-row { display: flex; } .chat-row--user { justify-content: flex-end; } .chat-row--assistant { justify-content: flex-start; } .chat-bubble { max-width: min(44rem, 92%); border-radius: 1.2rem; border: 1px solid rgba(148, 163, 184, 0.16); padding: 0.85rem 0.95rem; } .chat-bubble--user { background: linear-gradient(135deg, rgba(124, 92, 255, 0.22) 0%, rgba(34, 211, 238, 0.14) 100%); } .chat-bubble--assistant { background: rgba(148, 163, 184, 0.06); } .chat-text { font-size: 0.95rem; line-height: 1.45; color: rgba(226, 232, 240, 0.92); } .chat-meta { font-size: 0.74rem; color: rgba(226, 232, 240, 0.60); } html.theme-light .chat-text { color: rgba(15, 23, 42, 0.88); } html.theme-light .chat-meta { color: rgba(15, 23, 42, 0.58); } html.theme-light .chat-empty { border-color: rgba(15, 23, 42, 0.18); background: rgba(15, 23, 42, 0.03); } .chat-composer { border-top: 1px solid var(--modal-head-border); background: rgba(2, 6, 23, 0.22); backdrop-filter: blur(10px); padding: 0.85rem 1.1rem 1.0rem; } html.theme-light .chat-composer { background: rgba(248, 250, 252, 0.82); } .chat-form { display: grid; gap: 0.6rem; } .chat-input { resize: vertical; min-height: 3.2rem; } .chat-actions { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; } /* Tables */ .table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 0.92rem; } .table thead th { text-align: left; font-weight: 600; color: rgba(226, 232, 240, 0.70); padding: 0.75rem 0.75rem; border-bottom: 1px solid var(--border); } .table tbody td { padding: 0.75rem 0.75rem; border-bottom: 1px solid rgba(148, 163, 184, 0.10); color: rgba(226, 232, 240, 0.85); } .table tbody tr:hover td { background: rgba(124, 92, 255, 0.05); } /* Messages */ .flash { border-radius: 1rem; border: 1px solid var(--border); background: var(--flash-bg); padding: 0.85rem 1rem; font-size: 0.92rem; color: rgba(226, 232, 240, 0.88); } html.theme-light .flash { color: rgba(15, 23, 42, 0.88); } .flash--ok { border-color: rgba(52, 211, 153, 0.20); background: rgba(52, 211, 153, 0.08); } .flash--warn { border-color: rgba(251, 191, 36, 0.20); background: rgba(251, 191, 36, 0.08); } .flash--bad { border-color: rgba(251, 113, 133, 0.22); background: rgba(251, 113, 133, 0.08); } .ai-summary-box { box-shadow: none; background: var(--ai-summary-bg); border-color: var(--ai-summary-border); } .ai-summary-text { color: var(--ai-summary-text); } /* Fix Tailwind "white alpha" utilities in light mode (we use CDN Tailwind, so we override the generated class names). */ html.theme-light .border-white\/10 { border-color: rgba(15, 23, 42, 0.10) !important; } html.theme-light .bg-white\/10 { background-color: rgba(15, 23, 42, 0.06) !important; } html.theme-light .text-white\/10, html.theme-light .text-white\/20, html.theme-light .text-white\/30, html.theme-light .text-white\/40, html.theme-light .text-white\/50 { color: rgba(15, 23, 42, 0.55) !important; }