:root { color-scheme: dark; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: #f4f4f7; background: #0d0e12; --muted: #9b9daa; --line: #2c2e39; --accent: #bea4ff; --surface: #16171e; font-size: 15px; }
* { box-sizing: border-box; } [hidden] { display: none !important; } body { margin: 0; } a { color: inherit; } button, input, select { font: inherit; } button { cursor: pointer; } button:disabled { opacity: .45; cursor: default; } :focus-visible { outline: 3px solid #c8b5ff; outline-offset: 4px; } button, a { -webkit-tap-highlight-color: transparent; } h1,h2,p { margin-top: 0; } h1 { margin-bottom: 11px; font-size: clamp(1.8rem,3.2vw,2.65rem); font-weight: 550; letter-spacing: -.065em; line-height: 1.15; } h2 { font-size: 1.12rem; font-weight: 580; margin: 0; letter-spacing: -.025em; } .muted { color: var(--muted); line-height: 1.6; } .eyebrow { color: #b5a5d7; font-size: .65rem; font-weight: 650; letter-spacing: .17em; margin-bottom: 12px; } .hint,.field-hint { font-size: .76rem; color: var(--muted); line-height: 1.55; margin: 10px 0 0; } .field-hint { margin: -4px 0 12px; } .skip-link { position: absolute; top: -100px; left: 15px; z-index: 10; padding: 12px; border-radius: 8px; background: #f4f4f7; color: #15151c; } .skip-link:focus { top: 10px; }
.topbar { min-height: 80px; display: flex; align-items: center; gap: 28px; padding: 20px clamp(20px,4vw,64px); border-bottom: 1px solid #24252e; } .brand { display: inline-flex; text-decoration: none; font-size: 1.6rem; font-weight: 750; letter-spacing: .14em; align-items: center; gap: 2px; } .brand span { color: var(--accent); font-size: .42rem; margin-top: 5px; } .topbar-label { color: var(--muted); font-size: .65rem; letter-spacing: .16em; border-left: 1px solid var(--line); padding-left: 28px; } .account { margin-left: auto; display: flex; align-items: center; gap: 17px; font-size: .8rem; color: var(--muted); } .text-button { border: 0; padding: 5px 0; color: #c1c1cb; background: transparent; font-size: .77rem; } main { max-width: 1390px; margin: 0 auto; padding: 44px clamp(20px,4vw,64px) 60px; } .loading { padding: 20vh 0; text-align: center; color: var(--muted); } .page-heading { display: flex; align-items: center; justify-content: space-between; gap: 28px; margin-bottom: 30px; } .page-heading .muted { margin-bottom: 0; } .page-heading > .button { flex-shrink: 0; } .dashboard { display: grid; grid-template-columns: minmax(290px,.88fr) minmax(0,1.3fr); gap: 22px; align-items: start; } .card { border: 1px solid var(--line); border-radius: 20px; background: var(--surface); padding: 28px; min-width: 0; } .card-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 24px; } .card-heading .eyebrow { margin-bottom: 7px; } .button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; border: 1px solid transparent; padding: 11px 16px; min-height: 43px; border-radius: 10px; text-decoration: none; font-size: .82rem; font-weight: 600; line-height: 1.35; } .primary { background: #c8b2ff; color: #211a32; } .secondary { background: #21222b; border-color: #373945; color: #e1e0e8; } .danger { background: #36232b; color: #ffc1c5; border-color: #633842; } .wide { width: 100%; } a[aria-disabled="true"] { opacity: .45; cursor: default; } .badge { border: 1px solid #3d3b49; border-radius: 100px; padding: 5px 9px; font-size: .64rem; color: #b9b4c5; white-space: nowrap; } .badge.ready { background: #183a30; color: #a5e3ca; border-color: #2b5749; } .voice-orb { width: 115px; height: 115px; margin: 8px auto 24px; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle at 32% 24%,#d2bdff 0,#9f79e4 20%,#4b386c 60%,#26202f 82%); box-shadow: inset -10px -12px 23px #0d0e1266,0 8px 45px #ab80ff13; } .voice-orb span { font-family: Georgia,serif; color: #f3e8ff; font-size: 4.4rem; line-height: 1; transform: translateY(-4px); opacity: .9; } .connection-description { text-align: center; color: #c6c3d0; line-height: 1.6; font-size: .85rem; min-height: 2.7em; margin-bottom: 24px; } .numbers { margin: 0 0 22px; padding: 16px 0; border-block: 1px solid var(--line); display: grid; gap: 17px; } .numbers > div { display: flex; align-items: center; justify-content: space-between; gap: 12px; } dt { color: var(--muted); font-size: .76rem; } dd { margin: 0; font-size: .89rem; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; } .call-actions { display: flex; flex-wrap: wrap; gap: 9px; } .call-actions > * { flex: 1; white-space: nowrap; } #call-target { color: #c9bddf; margin-top: 16px; } .active-calls:empty { display: none; } .active-call { margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--line); display: flex; align-items: center; gap: 12px; justify-content: space-between; } .active-call p { font-size: .83rem; margin: 0; } .active-call small { display: block; color: var(--muted); font-size: .73rem; margin-top: 5px; } label { display: block; font-size: .76rem; font-weight: 550; color: #d6d4df; } input,select { display: block; width: 100%; min-height: 43px; margin: 8px 0 13px; padding: 10px 11px; border: 1px solid #393b47; border-radius: 9px; background: #111218; color: #eeedf5; outline: none; font-size: .83rem; } input:focus,select:focus { border-color: #b49ae9; box-shadow: 0 0 0 3px #b49ae916; } input::placeholder { color: #6f707f; } fieldset { border: 0; padding: 0; margin: 0; min-width: 0; } .form-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); column-gap: 17px; } .full { grid-column: 1 / -1; } .optional { font-weight: 400; color: #a6d9c3; font-size: .65rem; margin-left: 5px; } .toggle { display: flex; align-items: flex-start; gap: 11px; border-top: 1px solid var(--line); padding-top: 20px; margin-top: 8px; } .toggle input { width: 17px; height: 17px; min-height: auto; flex-shrink: 0; accent-color: #c8b2ff; margin: 1px 0 0; } .toggle strong { font-weight: 550; font-size: .8rem; } .toggle small { display: block; color: var(--muted); font-weight: 400; font-size: .73rem; line-height: 1.5; margin-top: 5px; } .form-actions { display: flex; align-items: center; gap: 14px; margin-top: 22px; } .form-actions .hint { margin: 0; } .setup-actions { display: flex; flex-wrap: wrap; gap: 9px; border-top: 1px solid var(--line); padding-top: 22px; margin-top: 24px; } .setup-actions .hint { flex-basis: 100%; margin-top: 3px; } .unsaved { color: #e1c28b; } .message { border: 1px solid #435348; background: #1d2b25; color: #c0e7d4; padding: 13px 15px; border-radius: 10px; font-size: .85rem; line-height: 1.6; overflow-wrap: anywhere; margin-bottom: 22px; } .message.error { border-color: #6a3b47; background: #302027; color: #ffc4c9; } .history-card { grid-column: 1 / -1; } #history-count { font-size: .76rem; } .table-scroll { overflow-x: auto; } table { width: 100%; border-collapse: collapse; text-align: left; white-space: nowrap; } th { color: #90919e; font-size: .67rem; font-weight: 500; padding: 0 12px 14px; } td { border-top: 1px solid var(--line); font-size: .79rem; padding: 16px 12px; color: #cbc9d6; } th:first-child,td:first-child { padding-left: 0; } th:last-child,td:last-child { text-align: right; padding-right: 0; } .empty-state { margin: 4px 0 0; padding: 18px 0; color: var(--muted); line-height: 1.6; font-size: .85rem; } .login-card { max-width: 440px; margin: 9vh auto 0; padding: 34px; } .login-card h1 { font-size: 1.8rem; } .login-card .muted { font-size: .88rem; margin-bottom: 26px; } .login-card input { margin-bottom: 20px; } .access-card { max-width: 600px; margin: 9vh auto; } .access-card h1 { font-size: 2rem; }
@media(max-width: 950px) { .dashboard { grid-template-columns: minmax(270px,.82fr) minmax(0,1fr); gap: 16px; } .card { padding: 23px; } .form-grid { grid-template-columns: 1fr; } .full { grid-column: auto; } .form-actions { align-items: start; flex-direction: column; gap: 10px; } }
@media(max-width: 720px) { .topbar { padding: 18px 20px; min-height: 72px; gap: 19px; } .topbar-label { padding-left: 19px; } #account-name { display: none; } main { padding-top: 30px; } .page-heading { gap: 15px; align-items: start; } .page-heading .button { padding: 9px; min-height: 36px; font-size: .72rem; margin-top: 23px; } h1 { font-size: 1.9rem; } .page-heading .muted { font-size: .85rem; } .dashboard { grid-template-columns: 1fr; } .history-card { grid-column: auto; } .card { border-radius: 16px; } .voice-orb { width: 100px; height: 100px; } .numbers { gap: 15px; } .login-card { margin-top: 5vh; padding: 27px; } }
@media(prefers-reduced-motion: no-preference) { .button { transition: background-color .15s,border-color .15s; } }
@media(hover:hover) { .primary:not(:disabled):hover { background: #d5c4ff; } .secondary:not(:disabled):not([aria-disabled="true"]):hover { background: #2b2d39; border-color: #535162; } .text-button:hover { color: #fff; } }

.call-actions #call-me { flex-basis: 100%; white-space: normal; }