/* Bourse design system - Blinklink Partner Portal. Neutral paper surfaces with gold accents; native-feeling cards with hairline borders, soft lift, and generous corner radii. Mobile-first. */ :root { --paper: #ebe8df; --cream: #fbfaf5; --ink: #1a1815; --ink-2: #55504a; --ink-3: #8a857a; --border: #d4cfc0; --oxblood: #6b1f2a; --forest: #1e4d3b; --plum: #4a2a4d; --gold: #9c7a16; --danger: #8f2d1f; /* Accent drives nav, active states, and primary buttons; the admin zone swaps it (and the paper tint) so staff always know which side they're on. */ --accent: var(--gold); /* Gold gradient + on-accent ink for primary actions (matches the email CTA). The admin zone flattens the gradient and flips the ink. */ --accent-grad: linear-gradient(135deg, #ead08a 0%, #c9a94a 45%, #9c7a16 100%); --accent-ink: #2a2114; /* Product brand colors: Skills orange, Social purple, Omni teal. */ --skills: #c2410c; --social: #6d28d9; --omni: #0f766e; --r-sm: 6px; --r-md: 12px; --r-lg: 16px; --font-body: "Inter", system-ui, -apple-system, sans-serif; --font-display: "Newsreader", Georgia, serif; --font-mono: "JetBrains Mono", ui-monospace, monospace; --tabbar-h: calc(56px + max(env(safe-area-inset-bottom, 0px), 14px)); --topbar-h: 52px; } [data-theme="dark"] { --paper: #17150f; --cream: #201d16; --ink: #ece8dd; --ink-2: #b3aca0; --ink-3: #7d766a; --border: #3a352a; --oxblood: #c96b78; --forest: #6cb392; --plum: #b58ab9; --gold: #d3a94e; --danger: #d97a6a; --skills: #f97316; --social: #a78bfa; --omni: #2dd4bf; } /* Admin zone: a cooler, steel-blue paper so staff pages are unmistakably not the partner side. data-zone="admin" is static markup on in every admin page, so the zone palette applies on first paint: setting it from JS after the /me round trip flashed the partner theme first. */ [data-zone="admin"] { --paper: #e3e7ee; --cream: #f5f7fb; --border: #c6cdda; --accent: #24437c; --accent-grad: none; --accent-ink: #f5f7fb; --ink: #161a22; --ink-2: #4c5261; --ink-3: #7e8595; } [data-theme="dark"][data-zone="admin"] { --paper: #11141b; --cream: #191e29; --border: #2d3444; --accent: #8fa8d8; --accent-ink: #11141b; --ink: #e4e8f0; --ink-2: #a7aebf; --ink-3: #6f7688; } * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--font-body); font-size: 15px; line-height: 1.55; min-height: 100dvh; } h1, h2, h3 { font-family: var(--font-display); font-optical-sizing: auto; font-weight: 500; line-height: 1.2; margin: 0 0 0.5em; } h1 { font-size: 30px; } h2 { font-size: 22px; } h3 { font-size: 18px; } a { color: var(--accent); text-decoration: none; } a:hover { text-decoration: underline; } .label, th { font-family: var(--font-mono); font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--ink-2); font-weight: 500; } .mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; } .muted { color: var(--ink-3); } .small { font-size: 13px; } /* --- Layout: bottom tabs on phones, sidebar on desktop --- */ .shell { display: flex; min-height: 100dvh; } .sidebar { display: none; width: 220px; flex-shrink: 0; border-right: 1px solid color-mix(in srgb, var(--border) 70%, transparent); background: color-mix(in srgb, var(--cream) 72%, transparent); -webkit-backdrop-filter: blur(14px) saturate(1.4); backdrop-filter: blur(14px) saturate(1.4); padding: 24px 0; position: sticky; top: 0; height: 100dvh; overflow-y: auto; } .sidebar .brand { font-family: var(--font-display); font-size: 20px; padding: 0 20px 20px; border-bottom: 1px solid var(--border); margin-bottom: 12px; display: flex; align-items: center; gap: 10px; } .sidebar nav a { display: flex; align-items: center; gap: 10px; padding: 10px 20px; color: var(--ink-2); font-size: 14px; } .sidebar nav a:hover { text-decoration: none; color: var(--ink); } .sidebar nav a.active { color: var(--accent); border-right: 2px solid var(--accent); background: color-mix(in srgb, var(--accent) 6%, transparent); } .sidebar .section-label { padding: 16px 20px 6px; } .sidebar .foot { margin-top: auto; padding: 16px 20px 0; border-top: 1px solid var(--border); } .main { flex: 1; min-width: 0; padding: 20px 16px calc(var(--tabbar-h) + 24px); max-width: 1080px; margin: 0 auto; width: 100%; } /* Liquid-glass floating capsule, in the spirit of the iOS glass tab bars: inset from the edges, heavy blur, a light-catching top edge, soft lift. */ .tabbar { position: fixed; left: 12px; right: 12px; bottom: max(env(safe-area-inset-bottom, 0px), 14px); margin: 0 auto; max-width: 520px; display: flex; background: color-mix(in srgb, var(--cream) 42%, transparent); -webkit-backdrop-filter: blur(24px) saturate(1.8); backdrop-filter: blur(24px) saturate(1.8); border: 1px solid color-mix(in srgb, var(--border) 55%, transparent); border-radius: 999px; box-shadow: 0 8px 24px color-mix(in srgb, var(--ink) 10%, transparent), inset 0 1px 0 color-mix(in srgb, #fff 40%, transparent); z-index: 50; } [data-theme="dark"] .tabbar { background: color-mix(in srgb, var(--cream) 50%, transparent); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45), inset 0 1px 0 color-mix(in srgb, #fff 12%, transparent); } .tabbar a { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 0 6px; font-size: 10px; font-family: var(--font-mono); letter-spacing: 0.5px; text-transform: uppercase; color: var(--ink-3); } .tabbar a:hover { text-decoration: none; } .tabbar a.active { color: var(--accent); } .tabbar svg { width: 22px; height: 22px; } /* Admin has more destinations than fit a phone screen: the tab bar scrolls sideways instead of dropping pages. */ .tabbar.scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; justify-content: flex-start; padding: 0 14px; /* keep first/last tabs clear of the capsule's curve */ } .tabbar.scroll::-webkit-scrollbar { display: none; } .tabbar.scroll a { flex: 0 0 auto; min-width: 76px; padding-left: 6px; padding-right: 6px; } /* Phone top bar: glass, brand on the left, theme + sign out always visible. */ .topbar { position: sticky; top: 0; z-index: 40; display: flex; align-items: center; justify-content: space-between; height: var(--topbar-h); padding: 0 12px 0 16px; background: color-mix(in srgb, var(--cream) 60%, transparent); -webkit-backdrop-filter: blur(24px) saturate(1.8); backdrop-filter: blur(24px) saturate(1.8); border-bottom: 1px solid color-mix(in srgb, var(--border) 70%, transparent); } .topbar .brand { display: flex; align-items: center; gap: 8px; font-family: var(--font-display); font-size: 17px; } /* Optical alignment: the serif wordmark has no descenders, so its line box floats the glyphs above the logo's center - nudge them back down. */ .topbar .brand span, .sidebar .brand span { transform: translateY(0.09em); } .icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border: none; background: transparent; color: var(--ink-2); border-radius: var(--r-md); cursor: pointer; font-size: 17px; } .icon-btn:hover { background: color-mix(in srgb, var(--border) 40%, transparent); } @media (min-width: 900px) { .sidebar { display: flex; flex-direction: column; } .tabbar, .topbar { display: none; } .main { padding: 40px 40px 60px; } } /* --- Torus orb logo --- */ .orb { width: 26px; height: 26px; flex-shrink: 0; } /* --- Cards and panels: native-feeling grouped surfaces - generous corner radius, hairline border, and a soft diffuse lift instead of a hard line. */ .card { background: var(--cream); border: 1px solid color-mix(in srgb, var(--border) 60%, transparent); border-radius: var(--r-lg); padding: 16px; margin-bottom: 12px; box-shadow: 0 1px 1px color-mix(in srgb, var(--ink) 3%, transparent), 0 6px 18px color-mix(in srgb, var(--ink) 5%, transparent); transition: transform 0.08s ease; } [data-theme="dark"] .card { box-shadow: 0 1px 1px rgba(0, 0, 0, 0.25), 0 6px 18px rgba(0, 0, 0, 0.2); } a.card:active { transform: scale(0.985); } .card.flush { padding: 0; overflow: hidden; } .card .card-row { padding: 14px 16px; border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 12px; } .card .card-row:last-child { border-bottom: none; } .page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 20px; flex-wrap: wrap; } /* --- Buttons --- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-family: var(--font-body); font-size: 14px; font-weight: 500; padding: 10px 18px; border-radius: var(--r-md); border: 1px solid var(--ink); background: var(--ink); color: var(--cream); cursor: pointer; text-decoration: none; min-height: 42px; transition: transform 0.06s ease; } .btn:hover { opacity: 0.88; text-decoration: none; } .btn:active:not(:disabled) { transform: scale(0.97); } .btn:disabled { opacity: 0.45; cursor: not-allowed; } .btn.secondary { background: transparent; color: var(--ink); } .btn.primary { background: var(--accent); background-image: var(--accent-grad); /* No border at all: even a transparent one leaves a rounded-corner rasterization sliver at the gradient's edge. */ border: 0; color: var(--accent-ink); box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 35%, transparent), 0 1px 2px color-mix(in srgb, var(--ink) 18%, transparent); } .btn.danger { background: transparent; border-color: var(--danger); color: var(--danger); } .btn.small { padding: 5px 12px; min-height: 30px; font-size: 13px; border-radius: 9px; } .btn.block { width: 100%; } /* --- Forms: inputs are never cleared on error --- */ .field { margin-bottom: 16px; } .field label { display: block; margin-bottom: 6px; } .field input, .field select, .field textarea { width: 100%; font-family: var(--font-body); font-size: 15px; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--cream); color: var(--ink); min-height: 42px; } .field textarea { min-height: 96px; resize: vertical; } .field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--ink-2); } .field .error { display: none; color: var(--danger); font-size: 13px; margin-top: 4px; } .field.invalid input, .field.invalid select, .field.invalid textarea { border-color: var(--danger); } .field.invalid .error { display: block; } .field .hint { color: var(--ink-3); font-size: 13px; margin-top: 4px; } .form-error { display: none; border: 1px solid var(--danger); border-radius: var(--r-sm); color: var(--danger); padding: 10px 12px; margin-bottom: 16px; font-size: 14px; } .form-error.show { display: block; } .checkbox-row { display: flex; gap: 10px; align-items: flex-start; } .checkbox-row input { width: 18px; height: 18px; margin-top: 2px; flex-shrink: 0; } /* --- Chips (library filters etc.) --- */ /* One scrollable line per chip group - never wrap, never show a scrollbar. */ .chips { display: flex; gap: 8px; flex-wrap: nowrap; overflow-x: auto; margin-bottom: 12px; scrollbar-width: none; -webkit-overflow-scrolling: touch; } .chips::-webkit-scrollbar { display: none; } .chip { font-family: var(--font-mono); font-size: 12px; padding: 6px 12px; border: 1px solid var(--border); border-radius: 999px; background: var(--cream); color: var(--ink-2); cursor: pointer; flex-shrink: 0; white-space: nowrap; } .chip.active { border-color: var(--accent); color: var(--accent); } /* --- Badges --- */ .badge { font-family: var(--font-mono); font-size: 11px; letter-spacing: 1px; text-transform: uppercase; padding: 3px 8px; border-radius: var(--r-sm); border: 1px solid var(--border); color: var(--ink-2); white-space: nowrap; } .badge.oxblood { border-color: var(--oxblood); color: var(--oxblood); } .badge.forest { border-color: var(--forest); color: var(--forest); } .badge.plum { border-color: var(--plum); color: var(--plum); } .badge.gold { border-color: var(--gold); color: var(--gold); } .badge.danger { border-color: var(--danger); color: var(--danger); } /* Product workspaces carry their brand color everywhere they appear. */ .badge.skills { border-color: var(--skills); color: var(--skills); } .badge.social { border-color: var(--social); color: var(--social); } .badge.omni { border-color: var(--omni); color: var(--omni); } /* Organization logos: always square with rounded corners. */ .org-logo { width: 40px; height: 40px; border-radius: var(--r-md); border: 1px solid var(--border); object-fit: cover; background: var(--cream); flex-shrink: 0; } .org-logo.lg { width: 72px; height: 72px; border-radius: var(--r-lg); } .org-logo.placeholder { display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-display); font-size: 18px; color: var(--ink-3); } .org-logo.lg.placeholder { font-size: 32px; } /* Staleness / registration-age pressure on pipeline cards: a faint tint of the whole surface plus a filled age badge - no hard edge stripes. */ .stale-1 { background: color-mix(in srgb, var(--gold) 4%, var(--cream)); } .stale-2 { background: color-mix(in srgb, var(--danger) 5%, var(--cream)); } .badge.fill.gold { background: color-mix(in srgb, var(--gold) 14%, transparent); } .badge.fill.danger { background: color-mix(in srgb, var(--danger) 14%, transparent); } /* Money-weighted pipeline: one row per stage, bar sized by dollar value. The container owns the columns (subgrid) so labels size to content and every row's bar starts on the same edge - no truncated stage names. */ .pipeline-viz { margin-bottom: 20px; display: grid; grid-template-columns: max-content 1fr max-content; } .pipeline-viz .pv-caption { grid-column: 1 / -1; margin-bottom: 6px; } .pipeline-viz .pv-row { display: grid; grid-template-columns: subgrid; grid-column: 1 / -1; gap: 10px; align-items: center; padding: 5px 0; cursor: pointer; border: none; background: none; width: 100%; text-align: left; font: inherit; color: inherit; } .pipeline-viz .pv-label { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.5px; text-transform: uppercase; color: var(--ink-2); white-space: nowrap; } .pipeline-viz .pv-track { height: 6px; border-radius: 999px; background: color-mix(in srgb, var(--border) 35%, transparent); overflow: hidden; } .pipeline-viz .pv-bar { display: block; height: 100%; border-radius: 999px; background: var(--accent); min-width: 6px; transition: width 0.4s ease; } .pipeline-viz .pv-bar.won { background: var(--forest); } .pipeline-viz .pv-money { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 12px; text-align: right; white-space: nowrap; } .pipeline-viz .pv-row.active .pv-label, .pipeline-viz .pv-row.active .pv-money { color: var(--accent); font-weight: 600; } /* Quote list cards: title and money side by side on desktop, stacked on phones so the title never gets crushed into a one-character column. */ .quote-card { display: flex; justify-content: space-between; align-items: center; gap: 12px; } .quote-card .quote-meta { flex-wrap: nowrap; } @media (max-width: 600px) { .quote-card { flex-direction: column; align-items: stretch; } .quote-card .quote-meta { flex-wrap: wrap; justify-content: flex-start; } } /* Tabs: separation by line - a hairline base with the active tab underlined. */ .tabs { display: flex; gap: 20px; border-bottom: 1px solid var(--border); margin-bottom: 16px; } .tabs .tab { font-family: var(--font-mono); font-size: 12px; letter-spacing: 1px; text-transform: uppercase; padding: 8px 2px 10px; border: none; background: none; color: var(--ink-3); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; } .tabs .tab.active { color: var(--accent); border-bottom-color: var(--accent); } /* Deal facts: label / value pairs on one aligned grid, values left-aligned so long entries wrap cleanly instead of rag-right against the card edge. */ .fact-grid { display: grid; grid-template-columns: max-content 1fr; gap: 10px 18px; align-items: baseline; } .fact-grid > .label { white-space: nowrap; } .fact-grid > span { min-width: 0; } /* Stage stepper on the deal page: a horizontal rail of dots joined by lines, scrollable on phones, with a detail panel below the rail. */ .stepper-track { display: flex; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; } .stepper-track::-webkit-scrollbar { display: none; } .stepper .step { flex: 1 0 auto; min-width: 82px; display: flex; flex-direction: column; align-items: center; gap: 7px; border: none; background: none; padding: 4px 0 6px; font: inherit; color: inherit; cursor: pointer; } .stepper .step .rail { display: flex; align-items: center; width: 100%; } .stepper .step .rail .line { height: 2px; flex: 1; background: var(--border); } .stepper .step .rail .line.none { visibility: hidden; } .stepper .step .dot { width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--border); background: var(--cream); flex-shrink: 0; margin: 0 3px; } .stepper .step.done .dot { background: var(--forest); border-color: var(--forest); } .stepper .step.done .rail .line { background: var(--forest); } .stepper .step.current .rail .line.l { background: var(--forest); } .stepper .step.current .dot { background: var(--accent); border-color: var(--accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 20%, transparent); } .stepper .step .step-label { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.5px; text-transform: uppercase; white-space: nowrap; color: var(--ink-2); padding: 0 6px; } .stepper .step.current .step-label { color: var(--accent); font-weight: 500; } .stepper .step.todo .step-label { color: var(--ink-3); } .stepper .step.open .step-label { text-decoration: underline; text-underline-offset: 3px; } .stepper .step-panel { border-top: 1px solid var(--border); margin-top: 10px; padding-top: 12px; } .stepper .step-panel .desc { color: var(--ink-3); font-size: 13px; margin-top: 4px; } /* --- Tables --- */ table.data { width: 100%; border-collapse: collapse; font-size: 14px; } table.data th { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--border); } table.data td { padding: 10px; border-bottom: 1px solid var(--border); } table.data tr:last-child td { border-bottom: none; } /* --- Modal sheet (native dialog) --- */ dialog.sheet { border: 1px solid color-mix(in srgb, var(--border) 60%, transparent); border-radius: var(--r-lg); background: var(--cream); color: var(--ink); padding: 20px; width: min(500px, calc(100vw - 32px)); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.28); } dialog.sheet::backdrop { background: rgba(26, 22, 14, 0.45); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); } dialog.sheet pre { font-family: var(--font-mono); font-size: 12px; line-height: 1.6; background: color-mix(in srgb, var(--border) 30%, transparent); border-radius: var(--r-sm); padding: 12px; overflow-x: auto; margin: 12px 0; } /* --- Toast --- */ #toast-root { position: fixed; bottom: calc(var(--tabbar-h) + 12px); left: 50%; transform: translateX(-50%); z-index: 100; display: flex; flex-direction: column; gap: 8px; width: min(420px, calc(100vw - 32px)); } @media (min-width: 900px) { #toast-root { bottom: 24px; } } .toast { background: var(--ink); color: var(--cream); border-radius: var(--r-md); padding: 12px 16px; font-size: 14px; animation: toast-in 0.18s ease-out; } .toast.error { background: var(--danger); color: #fbfaf5; } @keyframes toast-in { from { opacity: 0; transform: translateY(8px); } } /* --- Utility --- */ .empty { text-align: center; color: var(--ink-3); padding: 40px 16px; border: 1px dashed var(--border); border-radius: var(--r-md); } .grid-2 { display: grid; gap: 12px; } @media (min-width: 700px) { .grid-2 { grid-template-columns: 1fr 1fr; } } .row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .spread { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .stack > * + * { margin-top: 8px; } hr.rule { border: none; border-top: 1px solid var(--border); margin: 16px 0; } /* Sticky action bar on forms (safe-area aware) */ .action-bar { position: sticky; bottom: var(--tabbar-h); background: var(--paper); border-top: 1px solid var(--border); padding: 12px 0 calc(12px + env(safe-area-inset-bottom, 0px)); margin-top: 24px; display: flex; gap: 8px; } @media (min-width: 900px) { .action-bar { bottom: 0; } } /* Drag-and-drop zone */ .dropzone { border: 1px dashed var(--border); border-radius: var(--r-md); padding: 24px; text-align: center; color: var(--ink-3); font-size: 14px; cursor: pointer; } .dropzone.over { border-color: var(--accent); color: var(--accent); } /* Deliverables: rich preview cards, two per row on desktop. */ .deliverable-grid { display: grid; gap: 12px; } @media (min-width: 700px) { .deliverable-grid { grid-template-columns: 1fr 1fr; } } .deliverable-card { background: var(--cream); border: 1px solid var(--border); border-radius: var(--r-md); overflow: hidden; display: flex; flex-direction: column; } .deliverable-card .preview { position: relative; aspect-ratio: 16 / 10; background: color-mix(in srgb, var(--border) 30%, transparent); cursor: pointer; overflow: hidden; border-bottom: 1px solid var(--border); } .deliverable-card .preview iframe, .deliverable-card .preview video { width: 100%; height: 100%; border: none; display: block; object-fit: cover; /* The frame is a preview; clicks go to the full-screen viewer. */ pointer-events: none; } /* Embedded documents draw their own scrollbars; oversize the frame so they fall outside the clipped preview instead of cluttering its edges. */ .deliverable-card .preview iframe { width: calc(100% + 20px); height: calc(100% + 20px); } .deliverable-card .preview .preview-fallback { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; color: var(--ink-3); font-size: 13px; } .deliverable-card .meta { padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; } /* Full-screen deliverable viewer */ .viewer-overlay { position: fixed; inset: 0; z-index: 200; background: color-mix(in srgb, var(--ink) 88%, transparent); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); display: flex; flex-direction: column; } .viewer-overlay .viewer-bar { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 14px; color: #fbfaf5; } .viewer-overlay .viewer-bar .title { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .viewer-overlay .viewer-body { flex: 1; min-height: 0; padding: 0 14px 14px; } .viewer-overlay .viewer-body iframe, .viewer-overlay .viewer-body video { width: 100%; height: 100%; border: none; border-radius: var(--r-md); background: #000; } .viewer-overlay .btn { border-color: #fbfaf5; color: #fbfaf5; background: transparent; } /* Voice updates: a floating glass mic button, bottom center, above the tab bar on phones. Same liquid-glass material as the tab bar. */ .mic-fab { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(var(--tabbar-h) + 16px); width: 54px; height: 54px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--cream) 42%, transparent); -webkit-backdrop-filter: blur(24px) saturate(1.8); backdrop-filter: blur(24px) saturate(1.8); border: 1px solid color-mix(in srgb, var(--border) 55%, transparent); box-shadow: 0 8px 24px color-mix(in srgb, var(--ink) 12%, transparent), inset 0 1px 0 color-mix(in srgb, #fff 40%, transparent); color: var(--accent); cursor: pointer; z-index: 60; } [data-theme="dark"] .mic-fab { background: color-mix(in srgb, var(--cream) 50%, transparent); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45), inset 0 1px 0 color-mix(in srgb, #fff 12%, transparent); } @media (min-width: 900px) { .mic-fab { bottom: 28px; } } .mic-fab.recording { background: var(--danger); border-color: var(--danger); color: #fbfaf5; animation: mic-pulse 1.2s ease-in-out infinite; } .mic-fab.busy { opacity: 0.55; pointer-events: none; } .mic-fab .mic-fab-time { position: absolute; top: -30px; left: 50%; transform: translateX(-50%); font-family: var(--font-mono); font-size: 11px; padding: 3px 8px; border-radius: 999px; background: var(--ink); color: var(--cream); white-space: nowrap; } @keyframes mic-pulse { 50% { box-shadow: 0 0 0 8px color-mix(in srgb, var(--danger) 22%, transparent); } } /* Rendered markdown */ .md { font-size: 15px; } .md h1, .md h2, .md h3 { margin-top: 1.2em; } .md code { font-family: var(--font-mono); font-size: 13px; background: color-mix(in srgb, var(--border) 40%, transparent); padding: 1px 5px; border-radius: var(--r-sm); } .md pre { background: color-mix(in srgb, var(--border) 40%, transparent); border-radius: var(--r-sm); padding: 12px; overflow-x: auto; } .md pre code { background: none; padding: 0; } .md blockquote { border-left: 2px solid var(--border); margin: 0; padding-left: 14px; color: var(--ink-2); } /* Auth pages (no shell chrome) */ .auth-wrap { min-height: 100dvh; display: flex; align-items: center; justify-content: center; padding: 24px 16px; } .auth-card { width: min(400px, 100%); background: var(--cream); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 32px 28px; } .spinner { width: 16px; height: 16px; border: 2px solid color-mix(in srgb, currentColor 30%, transparent); border-top-color: currentColor; border-radius: 50%; animation: spin 0.7s linear infinite; display: inline-block; } @keyframes spin { to { transform: rotate(360deg); } }