/* ============================================================ nvkc.ai design system Tenant accent arrives as --accent on (inline style). No external fonts, no CDNs, no trackers — everything ships from this origin, which is part of the product's promise. ============================================================ */ :root { --accent: #2f6fed; --accent-ink: #ffffff; --bg: #f6f8fb; --surface: #ffffff; --surface-2: #eef1f7; --ink: #17203a; --muted: #5b6579; --border: #e2e7f0; --input-bg: #eef3fa; --shadow: 0 1px 2px rgb(23 32 58 / .06), 0 8px 24px rgb(23 32 58 / .07); --ok: #1d9e6f; --warn: #b7791f; --danger: #c53f3f; --tok-email: #dbe7ff; --tok-email-ink: #1d4fc4; --tok-name: #eadffb; --tok-name-ink: #6b30c9; --tok-phone: #d9f3e5; --tok-phone-ink: #147a52; --tok-id: #fdeccd; --tok-id-ink: #92600a; --tok-net: #d5f0f6; --tok-net-ink: #0b6f86; --tok-addr: #d9f0ec; --tok-addr-ink: #0e6f60; --tok-dob: #ffe4d1; --tok-dob-ink: #a04d12; --tok-custom: #fadfe8; --tok-custom-ink: #b02458; --tok-amount: #e6f2cf; --tok-amount-ink: #4d7307; } @media (prefers-color-scheme: dark) { :root { --bg: #0c1120; --surface: #141b2e; --surface-2: #1b2439; --ink: #e8ecf6; --muted: #98a3bc; --border: #263352; --input-bg: #0f1728; --shadow: 0 1px 2px rgb(0 0 0 / .4), 0 10px 30px rgb(0 0 0 / .35); --tok-email: #1c3160; --tok-email-ink: #9db9ff; --tok-name: #35245e; --tok-name-ink: #cbaefc; --tok-phone: #123e2d; --tok-phone-ink: #7fe0b4; --tok-id: #46340f; --tok-id-ink: #f5c86e; --tok-net: #0d3742; --tok-net-ink: #7fd8ec; --tok-addr: #113c35; --tok-addr-ink: #7fdcc8; --tok-dob: #46260f; --tok-dob-ink: #f6b184; --tok-custom: #471a2b; --tok-custom-ink: #f8a4c2; --tok-amount: #2c3a10; --tok-amount-ink: #c3e57e; } } * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; background: var(--bg); color: var(--ink); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; font-size: 16px; line-height: 1.55; -webkit-font-smoothing: antialiased; } h1:focus { outline: none; } h1, h2, h3, h4 { line-height: 1.2; margin: 0 0 .5em; letter-spacing: -0.015em; } h1 { font-size: clamp(1.9rem, 4.5vw, 3rem); } h2 { font-size: clamp(1.4rem, 3vw, 1.9rem); } h3 { font-size: 1.15rem; } p { margin: 0 0 1em; } a { color: var(--accent); text-decoration: none; } a:hover { text-decoration: underline; } code, .mono { font-family: ui-monospace, "Cascadia Code", Consolas, Menlo, monospace; font-size: .92em; } .container { max-width: 1160px; margin: 0 auto; padding: 0 20px; } .container-narrow { max-width: 880px; margin: 0 auto; padding: 0 20px; } /* ---------------- header / footer ---------------- */ .site-header { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--border); } .site-header .container { display: flex; align-items: center; gap: 20px; min-height: 60px; } .brand { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 1.05rem; color: var(--ink); margin-right: auto; } .brand:hover { text-decoration: none; } .brand img, .brand svg { height: 28px; width: 28px; } /* Logo is a self-contained navy disc with a transparent surround — show it as-is, no opaque "coin". On the near-black dark header the disc just needs a hairline of edge definition, added in the dark-mode block below. */ .brand img.brand-logo { height: 36px; width: 36px; object-fit: contain; border-radius: 50%; } @media (prefers-color-scheme: dark) { .brand img.brand-logo { box-shadow: 0 0 0 1px rgb(255 255 255 / .12); } } .brand .brand-sub { font-weight: 500; color: var(--muted); font-size: .85rem; } .site-nav { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; } .site-nav a { color: var(--muted); font-size: .95rem; font-weight: 500; padding: 8px 12px; border-radius: 8px; } .site-nav a:hover { color: var(--ink); background: var(--surface-2); text-decoration: none; } .site-footer { border-top: 1px solid var(--border); margin-top: 72px; padding: 28px 0 40px; color: var(--muted); font-size: .92rem; } .site-footer .container { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; justify-content: space-between; } /* ---------------- buttons, pills, chips ---------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 18px; border-radius: 10px; border: 1px solid var(--border); background: var(--surface); color: var(--ink); font-size: .95rem; font-weight: 600; font-family: inherit; cursor: pointer; text-decoration: none; transition: transform .05s ease, box-shadow .15s ease, background .15s ease; } .btn:hover { text-decoration: none; box-shadow: var(--shadow); } .btn:active { transform: translateY(1px); } .btn:focus-visible { outline: 3px solid color-mix(in srgb, var(--accent) 45%, transparent); outline-offset: 2px; } .btn-primary { background: var(--accent); color: var(--accent-ink); border-color: color-mix(in srgb, var(--accent) 80%, black); } .btn-primary:hover { background: color-mix(in srgb, var(--accent) 88%, black); } .btn-ghost { background: transparent; } .btn-sm { padding: 6px 12px; font-size: .85rem; border-radius: 8px; } .btn:disabled { opacity: .55; cursor: not-allowed; box-shadow: none; } .pill { display: inline-flex; align-items: center; gap: 7px; padding: 5px 12px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--border); font-size: .82rem; font-weight: 600; color: var(--muted); } .pill .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); } .pill-ok { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 35%, var(--border)); } .chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 8px; background: var(--surface-2); border: 1px solid var(--border); font-size: .82rem; color: var(--ink); } .chip small { color: var(--muted); } /* ---------------- cards & layout ---------------- */ .card { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; box-shadow: var(--shadow); } .card-pad { padding: 20px; } .card-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 14px 20px; border-bottom: 1px solid var(--border); } .card-head h3 { margin: 0; font-size: 1rem; } .card-head .spacer { margin-left: auto; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } .card-body { padding: 20px; } .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; } .grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } @media (max-width: 900px) { .grid-2, .grid-3 { grid-template-columns: 1fr; } } .stack { display: flex; flex-direction: column; gap: 20px; } .row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; } /* ---------------- forms ---------------- */ textarea, input[type="text"], input[type="password"], input[type="email"], input[type="url"], input[type="search"], input[type="number"], input[type="tel"], select { width: 100%; padding: 11px 13px; border-radius: 10px; border: 1px solid var(--border); background: var(--input-bg); color: var(--ink); font-family: inherit; font-size: .95rem; transition: border-color .15s ease, box-shadow .15s ease, background .15s ease; } textarea::placeholder, input::placeholder { color: color-mix(in srgb, var(--ink) 45%, transparent); } textarea { resize: vertical; min-height: 220px; line-height: 1.5; } textarea.mono { font-family: ui-monospace, "Cascadia Code", Consolas, Menlo, monospace; font-size: .88rem; } textarea:hover:not(:focus), input:hover:not(:focus), select:hover:not(:focus) { border-color: color-mix(in srgb, var(--ink) 22%, var(--border)); } textarea:focus, input:focus, select:focus { outline: none; border-color: var(--accent); background: var(--surface); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); } label.field { display: block; font-size: .88rem; font-weight: 600; margin-bottom: 14px; } label.field > span { display: block; margin-bottom: 5px; } label.field small { font-weight: 400; color: var(--muted); } .check { display: flex; gap: 8px; align-items: center; font-size: .9rem; cursor: pointer; } .check input { accent-color: var(--accent); width: 16px; height: 16px; } /* toggle switch */ .switch { position: relative; display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font-size: .9rem; user-select: none; } .switch input { position: absolute; opacity: 0; width: 0; height: 0; } .switch .track { width: 36px; height: 21px; border-radius: 999px; flex: none; background: var(--surface-2); border: 1px solid var(--border); transition: background .15s ease; } .switch .track::after { content: ""; display: block; width: 15px; height: 15px; margin: 2px; border-radius: 50%; background: var(--muted); transition: transform .15s ease, background .15s ease; } .switch input:checked + .track { background: var(--accent); border-color: var(--accent); } .switch input:checked + .track::after { transform: translateX(15px); background: var(--accent-ink); } .switch input:focus-visible + .track { outline: 3px solid color-mix(in srgb, var(--accent) 45%, transparent); } /* ---------------- masked-text highlights ---------------- */ .preview { white-space: pre-wrap; word-break: break-word; background: var(--bg); border: 1px solid var(--border); border-radius: 10px; padding: 14px; min-height: 220px; max-height: 480px; overflow: auto; font-family: ui-monospace, "Cascadia Code", Consolas, Menlo, monospace; font-size: .88rem; line-height: 1.6; } .preview:empty::before { content: attr(data-placeholder); color: var(--muted); font-family: inherit; } mark.tok { padding: 1px 5px; border-radius: 6px; font-weight: 600; font-size: .95em; background: var(--tok-custom); color: var(--tok-custom-ink); } mark.tok-email { background: var(--tok-email); color: var(--tok-email-ink); } mark.tok-name { background: var(--tok-name); color: var(--tok-name-ink); } mark.tok-phone { background: var(--tok-phone); color: var(--tok-phone-ink); } mark.tok-id { background: var(--tok-id); color: var(--tok-id-ink); } mark.tok-net { background: var(--tok-net); color: var(--tok-net-ink); } mark.tok-addr { background: var(--tok-addr); color: var(--tok-addr-ink); } mark.tok-dob { background: var(--tok-dob); color: var(--tok-dob-ink); } mark.tok-custom { background: var(--tok-custom); color: var(--tok-custom-ink); } mark.tok-amount { background: var(--tok-amount); color: var(--tok-amount-ink); } .legend { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; } .legend .chip { font-size: .78rem; padding: 3px 9px; } /* replacements table */ .replacements { width: 100%; border-collapse: collapse; font-size: .88rem; } .replacements th, .replacements td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--border); vertical-align: top; } .replacements th { color: var(--muted); font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; } .replacements td.original { font-family: ui-monospace, Consolas, monospace; font-size: .84rem; } .replacements .reveal { filter: blur(4px); transition: filter .12s ease; cursor: pointer; } .replacements .reveal:hover, .replacements .reveal:focus { filter: none; } .table-scroll { max-height: 320px; overflow: auto; } /* ---------------- notices ---------------- */ .banner { display: flex; gap: 10px; align-items: flex-start; border: 1px solid var(--border); border-left: 4px solid var(--accent); background: var(--surface); border-radius: 10px; padding: 12px 14px; font-size: .92rem; } .banner-warn { border-left-color: var(--warn); } .banner-danger { border-left-color: var(--danger); } .banner-ok { border-left-color: var(--ok); } .trust-strip { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; font-size: .9rem; color: var(--muted); } /* ---------------- marketing ---------------- */ .hero { padding: 88px 0 46px; position: relative; overflow: clip; } .hero::before { content: ""; position: absolute; inset: -40% -20% auto; height: 130%; z-index: -1; background: radial-gradient(600px 320px at 18% 20%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 70%), radial-gradient(520px 300px at 85% 10%, color-mix(in srgb, var(--accent) 10%, transparent), transparent 70%); } .hero .lede { font-size: 1.18rem; color: var(--muted); max-width: 640px; } .hero .cta-row { display: flex; gap: 12px; margin-top: 26px; flex-wrap: wrap; } .hero-badge { margin-bottom: 18px; } .section { padding: 56px 0 8px; } .kicker { color: var(--accent); font-weight: 700; font-size: .82rem; text-transform: uppercase; letter-spacing: .09em; margin-bottom: 8px; } .section-intro { color: var(--muted); max-width: 640px; } .step-card { position: relative; padding: 22px; } .step-num { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 9px; margin-bottom: 12px; background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent); font-weight: 800; } .step-card h3 { font-size: 1.02rem; } .step-card p { color: var(--muted); font-size: .93rem; margin: 0; } .demo-shot { font-size: .84rem; border-radius: 10px; border: 1px solid var(--border); background: var(--bg); padding: 14px; white-space: pre-wrap; word-break: break-word; font-family: ui-monospace, "Cascadia Code", Consolas, Menlo, monospace; line-height: 1.65; } .fact-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; } .fact-list li { display: flex; gap: 10px; align-items: flex-start; } .fact-list .tick { flex: none; width: 22px; height: 22px; border-radius: 7px; margin-top: 2px; display: inline-flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--ok) 15%, transparent); color: var(--ok); font-weight: 800; font-size: .8rem; } .detector-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); gap: 10px; } .detector-grid .chip { justify-content: flex-start; padding: 9px 12px; } .app-embed { margin-top: 26px; } /* pricing */ .price-card { display: flex; flex-direction: column; } .price-card h3 { display: flex; align-items: center; gap: 10px; } .price-card .tag { font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; padding: 3px 8px; border-radius: 999px; background: color-mix(in srgb, var(--accent) 15%, transparent); color: var(--accent); } .price-figure { font-size: 2rem; font-weight: 800; letter-spacing: -0.02em; margin: 2px 0 10px; } .price-per { font-size: .85rem; font-weight: 500; color: var(--muted); letter-spacing: 0; } .price-featured { border-color: color-mix(in srgb, var(--accent) 55%, var(--border)); box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 35%, transparent), var(--shadow); } .plan-list { list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 8px; flex: 1; } .plan-list li { padding-left: 22px; position: relative; font-size: .92rem; } .plan-list li::before { content: "✓"; position: absolute; left: 0; color: var(--ok); font-weight: 800; font-size: .85rem; } .plan-list em { color: var(--muted); font-style: normal; font-size: .85em; } .price-card .btn { width: 100%; } details.faq { border: 1px solid var(--border); border-radius: 12px; background: var(--surface); padding: 0 18px; margin-bottom: 10px; } details.faq summary { cursor: pointer; font-weight: 600; padding: 14px 0; list-style: none; display: flex; align-items: center; gap: 8px; } details.faq summary::-webkit-details-marker { display: none; } details.faq summary::before { content: "+"; color: var(--accent); font-weight: 800; width: 16px; } details.faq[open] summary::before { content: "–"; } details.faq p { color: var(--muted); margin: 0 0 14px; font-size: .95rem; } /* ---------------- workspace ---------------- */ .ws-header { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: 26px 0 18px; } .ws-header h1 { font-size: 1.45rem; margin: 0; } .ws-header img.tenant-logo { height: 36px; border-radius: 8px; } .ws-intro { color: var(--muted); margin: -8px 0 18px; max-width: 760px; } .count-badges { display: flex; gap: 6px; flex-wrap: wrap; } .count-badges .chip strong { font-weight: 700; } .vault-bar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px 16px; border-radius: 12px; background: var(--surface); border: 1px dashed var(--border); font-size: .9rem; color: var(--muted); } .vault-bar .spacer { margin-left: auto; display: flex; gap: 8px; } .warn-list { margin: 10px 0 0; padding-left: 20px; color: var(--warn); font-size: .88rem; } .detector-toggles { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px 18px; } .copied-flash { color: var(--ok); font-weight: 600; font-size: .85rem; } /* standalone mask tool */ .tool-head { margin: 0 0 22px; } .tool-head h1 { font-size: clamp(1.6rem, 3.5vw, 2.2rem); margin-bottom: 10px; } .tool-head .lede { color: var(--muted); max-width: 640px; } /* dedicated app pages (/chat, /mask) — slim chrome, full height */ .app-shell { display: flex; flex-direction: column; height: 100vh; height: 100dvh; } .app-bar { flex: none; display: flex; align-items: center; gap: 18px; padding: 0 18px; min-height: 56px; background: color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--border); } .app-brand { margin-right: auto; font-size: 1.02rem; } .app-nav { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; } .app-nav a { color: var(--muted); font-size: .92rem; font-weight: 500; padding: 7px 12px; border-radius: 8px; } .app-nav a:hover { color: var(--ink); background: var(--surface-2); text-decoration: none; } .app-nav a.active { color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); } .app-main { flex: 1; min-height: 0; overflow-y: auto; padding: 18px; display: flex; flex-direction: column; } /* full-height workspace on /chat: thread grows, input pinned at the bottom */ .ws-fullheight { flex: 1; min-height: 0; display: flex; flex-direction: column; width: 100%; max-width: 900px; align-self: center; } .ws-fullheight > .ws-tabs { flex: none; } .ws-fullheight > .banner { flex: none; } .ws-fullheight > .chat-card { flex: 1; min-height: 0; display: flex; flex-direction: column; margin: 0; } .ws-fullheight > .chat-card > .chat-body { flex: 1; min-height: 0; } .ws-fullheight .chat-thread-tall { flex: 1; min-height: 0; max-height: none; } .ws-fullheight > .stack { flex: 1; min-height: 0; overflow-y: auto; padding-right: 2px; } .btn-lg { padding: 13px 24px; font-size: 1rem; } /* workspace tabs */ .ws-tabs { display: flex; gap: 4px; margin-bottom: 16px; border-bottom: 1px solid var(--border); } .ws-tab { appearance: none; background: none; border: none; cursor: pointer; font-family: inherit; padding: 10px 16px; font-size: .95rem; font-weight: 600; color: var(--muted); border-bottom: 2px solid transparent; margin-bottom: -1px; display: inline-flex; align-items: center; gap: 8px; } .ws-tab:hover { color: var(--ink); } .ws-tab.active { color: var(--accent); border-bottom-color: var(--accent); } .tab-badge { font-size: .72rem; font-weight: 700; min-width: 18px; height: 18px; padding: 0 5px; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; background: color-mix(in srgb, var(--accent) 18%, transparent); color: var(--accent); } /* built-in chat */ .chat-card .card-head h3 { font-size: 1rem; } .chat-empty { padding: 12px 2px; } .chat-examples { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; } .example-chip { cursor: pointer; text-align: left; font-weight: 500; max-width: 100%; } .example-chip:hover { border-color: var(--accent); color: var(--accent); } .privacy-strip { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 12px; } .chat-thread { display: flex; flex-direction: column; gap: 18px; overflow-y: auto; padding: 4px 2px; scroll-behavior: smooth; } .chat-thread-tall { min-height: 340px; max-height: 58vh; } .chat-thread-tall:has(.chat-empty) { min-height: 0; } /* one turn = optional avatar + bubble */ .chat-turn { display: flex; gap: 12px; align-items: flex-start; } .chat-turn.turn-user { justify-content: flex-end; } .chat-avatar { flex: none; width: 30px; height: 30px; border-radius: 50%; overflow: hidden; background: #fff; box-shadow: 0 0 0 1px var(--border); display: grid; place-items: center; margin-top: 2px; } .chat-avatar img { width: 26px; height: 26px; object-fit: contain; } .chat-bubble { min-width: 0; max-width: 90%; } .turn-user .chat-bubble { max-width: 82%; background: color-mix(in srgb, var(--accent) 14%, var(--surface)); border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--border)); border-radius: 14px; border-bottom-right-radius: 4px; padding: 10px 14px; } .turn-ai .chat-bubble { padding-top: 3px; } /* AI reads as flowing document text, like modern chat */ .chat-plain { white-space: pre-wrap; word-break: break-word; } /* thinking indicator */ .thinking-dots { display: inline-flex; gap: 5px; padding: 6px 2px; } .thinking-dots span { width: 7px; height: 7px; border-radius: 50%; background: var(--muted); animation: think 1.2s infinite ease-in-out both; } .thinking-dots span:nth-child(2) { animation-delay: .2s; } .thinking-dots span:nth-child(3) { animation-delay: .4s; } @keyframes think { 0%, 80%, 100% { opacity: .3; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } } .stream-cursor { display: inline-block; margin-left: 1px; color: var(--accent); animation: blink 1s step-end infinite; } @keyframes blink { 50% { opacity: 0; } } /* markdown rendering inside AI messages */ .md { word-break: break-word; } .md > :first-child { margin-top: 0; } .md > :last-child { margin-bottom: 0; } .md p { margin: 0 0 .7em; line-height: 1.6; } .md ul, .md ol { margin: 0 0 .7em; padding-left: 1.4em; } .md li { margin: .2em 0; } .md h1, .md h2, .md h3, .md h4 { margin: 1em 0 .4em; line-height: 1.3; } .md h1 { font-size: 1.3rem; } .md h2 { font-size: 1.15rem; } .md h3 { font-size: 1.02rem; } .md a { color: var(--accent); text-decoration: underline; } .md strong { font-weight: 700; } .md blockquote { margin: 0 0 .7em; padding: 2px 0 2px 14px; border-left: 3px solid var(--border); color: var(--muted); } .md code { font-family: ui-monospace, "Cascadia Code", Consolas, Menlo, monospace; font-size: .88em; background: var(--surface-2); padding: 1px 5px; border-radius: 5px; } .md pre { position: relative; margin: 0 0 .8em; padding: 12px 14px; border-radius: 10px; background: #0d1117; border: 1px solid var(--border); overflow-x: auto; } .md pre code { background: none; padding: 0; font-size: .84rem; line-height: 1.5; color: #e6edf3; } .md table { border-collapse: collapse; margin: 0 0 .8em; font-size: .9rem; display: block; overflow-x: auto; } .md th, .md td { border: 1px solid var(--border); padding: 6px 10px; text-align: left; } .md th { background: var(--surface-2); } .code-copy { position: absolute; top: 8px; right: 8px; padding: 3px 9px; font-size: .74rem; font-weight: 600; border-radius: 6px; border: 1px solid rgb(255 255 255 / .18); background: rgb(255 255 255 / .08); color: #e6edf3; cursor: pointer; opacity: 0; transition: opacity .12s ease; } .md pre:hover .code-copy { opacity: 1; } .code-copy:hover { background: rgb(255 255 255 / .16); } /* input row */ .chat-body { display: flex; flex-direction: column; } .chat-input { display: flex; gap: 10px; align-items: flex-end; margin-top: 14px; } .chat-input textarea { min-height: 48px; max-height: 200px; flex: 1; resize: none; } .chat-input .btn { flex: none; min-width: 84px; } .btn-stop { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 40%, var(--border)); } .btn-stop:hover { background: color-mix(in srgb, var(--danger) 12%, transparent); } /* ---------------- admin ---------------- */ .admin-shell { max-width: 1000px; margin: 30px auto 0; padding: 0 20px; } .admin-nav { display: flex; gap: 8px; margin-bottom: 20px; flex-wrap: wrap; align-items: center; } .admin-nav a { padding: 7px 12px; border-radius: 8px; color: var(--muted); font-weight: 600; font-size: .92rem; } .admin-nav a:hover, .admin-nav a.active { background: var(--surface-2); color: var(--ink); text-decoration: none; } .admin-nav form { margin-left: auto; } .tenant-row { display: flex; align-items: center; gap: 12px; } .tenant-row .slug { font-family: ui-monospace, Consolas, monospace; color: var(--muted); font-size: .85rem; } .accent-dot { width: 14px; height: 14px; border-radius: 4px; border: 1px solid var(--border); flex: none; } .validation-message { color: var(--danger); font-size: .85rem; } /* blazor error UI (kept minimal, from template) */ #blazor-error-ui { color-scheme: light only; background: lightyellow; color: #111; position: fixed; bottom: 0; left: 0; right: 0; z-index: 1000; display: none; padding: .6rem 1.25rem .7rem; box-shadow: 0 -1px 2px rgba(0,0,0,.2); } #blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: .75rem; top: .5rem; } /* ---------------- misc ---------------- */ .center-page { min-height: 60vh; display: grid; place-items: center; padding: 40px 20px; } .muted { color: var(--muted); } .small { font-size: .88rem; } .mt-0 { margin-top: 0; } .mb-0 { margin-bottom: 0; } ::selection { background: color-mix(in srgb, var(--accent) 30%, transparent); } @media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } html { scroll-behavior: auto; } }