/* TDC Studio — one visual system for the public entry, client workspace and staff workspace. */
:root {
  color-scheme: dark;
  --ink: #07111d;
  --ink-raised: #0b1928;
  --ink-soft: #102235;
  --ink-glass: rgb(7 17 29 / 92%);
  --paper: #edf5fa;
  --paper-muted: #c5d5e0;
  --paper-dim: #91a8b8;
  --gold: #5ccbf1;
  --gold-light: #a1e8ff;
  --accent-rgb: 92 203 241;
  --accent-bright-rgb: 161 232 255;
  --line: rgb(135 180 207 / 16%);
  --line-strong: rgb(135 180 207 / 28%);
  --signal: #5ccbf1;
  --spark: #ffb66d;
  --pulse: #b5a1ff;
  --link: #62d9ba;
  --role: var(--signal);
  --radius-lg: 28px;
  --radius-md: 18px;
  --radius-sm: 12px;
  --shadow-deep: 0 30px 100px rgb(0 0 0 / 38%);
  --display: Manrope, "Segoe UI", sans-serif;
  --body: "DM Sans", "Segoe UI", Arial, sans-serif;
  --page: min(1400px, calc(100vw - 64px));
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --ease-standard: cubic-bezier(.2, .75, .25, 1);
  --motion-fast: 160ms;
  --motion-base: 240ms;
  --website-tree-width: 11.25rem;
  --website-inspector-width: 18.75rem;
  --website-header-offset: 6rem;
  --surface: rgb(11 25 40 / 82%);
  --surface-raised: rgb(16 34 53 / 92%);
  --surface-soft: rgb(255 255 255 / 3%);
  font-family: var(--body);
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background: var(--ink);
  color: var(--paper);
}

* { box-sizing: border-box; }
html { min-width: 320px; scroll-behavior: smooth; background: var(--ink); }
body { min-width: 320px; min-height: 100vh; margin: 0; background: var(--ink); color: var(--paper); font: 15px/1.55 var(--body); }
body::before { position: fixed; z-index: -1; inset: 0; background: radial-gradient(ellipse at 76% 3%, rgb(38 133 181 / 14%), transparent 38%), radial-gradient(ellipse at 7% 50%, rgb(35 76 115 / 10%), transparent 40%); content: ""; pointer-events: none; }
canvas#ink { position: fixed; z-index: -1; inset: 0; width: 100%; height: 100%; opacity: .18; pointer-events: none; }
img, svg, video, canvas { max-width: 100%; }
a { color: var(--gold-light); text-decoration-color: rgb(var(--accent-bright-rgb) / 36%); text-underline-offset: .2em; }
a:hover { color: var(--paper); text-decoration-color: currentColor; }
button, input, select, textarea { font: inherit; }
button { color: inherit; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible { outline: 2px solid var(--role); outline-offset: 3px; }
[hidden] { display: none !important; }

/* Type and shared controls */
h1, h2, h3, h4, p { margin-top: 0; }
h1, h2 { font-family: var(--display); font-weight: 400; letter-spacing: -.045em; }
h1 { font-size: clamp(48px, 7vw, 92px); line-height: .99; }
h2 { font-size: clamp(34px, 4vw, 56px); line-height: 1.04; }
h3 { font-size: 18px; line-height: 1.25; letter-spacing: -.02em; }
p { color: var(--paper-muted); }
.portal-kicker, .eyebrow, .signal-resource-label, .signal-resource-label, .portal-page .section-index { color: var(--gold); font-size: 10px; font-weight: 650; letter-spacing: .17em; text-transform: uppercase; }
.form-hint, .queue-intro, .helper-text { max-width: 76ch; color: var(--paper-dim); font-size: 13px; line-height: 1.65; }
.portal-button, .small-action, .small-action.subtle-action, .logout-button, .next-button, .mascot-yes, .mascot-no, .small-action, .portal-nav button, button.portal-button {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 44px; padding: 11px 17px;
  border: 1px solid var(--line-strong); border-radius: 999px; background: transparent; color: var(--paper); font-size: 12px; font-weight: 600; line-height: 1.2; cursor: pointer;
  transition: border-color .2s ease, color .2s ease, background .2s ease, transform .2s ease;
}
.portal-button:hover, .small-action:hover, .logout-button:hover, .next-button:hover, .mascot-yes:hover, .mascot-no:hover { transform: translateY(-1px); border-color: var(--gold); background: rgb(var(--accent-rgb) / 9%); color: var(--paper); }
.portal-button.primary, .portal-button[type=submit], .mascot-yes { border-color: transparent; background: linear-gradient(120deg, var(--gold-light), var(--gold)); color: var(--ink); }
button:disabled { cursor: not-allowed; opacity: .45; transform: none !important; }
.subtle-action { color: var(--paper-muted) !important; }
.workspace-status, .queue-count, .request-status, .status-pill { display: inline-flex; align-items: center; min-height: 27px; padding: 5px 10px; border: 1px solid var(--line); border-radius: 999px; color: var(--paper-muted); font-size: 10px; letter-spacing: .03em; }
.portal-message[role=status] { margin: 12px 0; color: var(--gold-light); font-size: 12px; }
.portal-message[aria-invalid=true], .error, .form-error { color: #ff9c8d; }

/* Shared portal shell */
.portal-header { position: sticky; z-index: 50; top: 0; display: grid; grid-template-columns: 190px minmax(200px, 1fr) auto; align-items: center; gap: 26px; width: 100%; min-height: 78px; padding: 0 max(40px, calc((100vw - 1480px) / 2)); border-bottom: 1px solid var(--line); background: rgb(5 14 24 / 92%); backdrop-filter: blur(18px); }
.portal-header > a { display: flex; align-items: center; width: max-content; min-width: 0; }
.portal-header > a img, .client-brand-mark img { display: block; width: 142px; max-height: 44px; object-fit: contain; object-position: left center; }
.portal-header > a[aria-label*=home] img { filter: drop-shadow(0 4px 20px rgb(var(--accent-rgb) / 9%)); }
.tdc-network-journey { display: flex; align-items: center; justify-content: center; gap: 13px; justify-self: center; width: min(460px, 100%); min-height: 40px; color: var(--paper-dim); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; }
.tdc-network-step { opacity: .6; }
.tdc-network-step.is-current { color: var(--gold-light); opacity: 1; }
.tdc-network-bridge { position: relative; flex: 1; height: 1px; background: linear-gradient(90deg, var(--gold), rgb(var(--accent-rgb) / 18%), var(--signal)); }
.tdc-network-bridge i { position: absolute; top: 50%; left: 50%; width: 7px; height: 7px; border-radius: 50%; background: var(--role); box-shadow: 0 0 12px color-mix(in srgb, var(--role) 70%, transparent); transform: translate(-50%, -50%); animation: tdc-node-travel 5s ease-in-out infinite; }
.portal-nav { display: flex; align-items: center; justify-content: flex-end; gap: 10px; }
.client-account-trigger { display: flex; align-items: center; gap: 18px; padding: 8px 13px; border: 1px solid var(--line); border-radius: 999px; background: var(--ink-raised); cursor: pointer; list-style: none; }
.client-account-trigger::-webkit-details-marker { display: none; }
.account-plan-summary, .account-balance-summary { display: grid; gap: 1px; }
.account-plan-summary small, .account-balance-summary small { color: var(--paper-dim); font-size: 8px; letter-spacing: .14em; }
.account-plan-summary b, .account-balance-summary b { display: flex; align-items: center; gap: 6px; color: var(--paper); font-size: 12px; }
.account-balance-summary { padding-left: 15px; border-left: 1px solid var(--line); }
.client-account-panel { position: absolute; top: calc(100% + 12px); right: max(40px, calc((100vw - 1480px) / 2)); width: min(360px, calc(100vw - 32px)); padding: 20px; border: 1px solid var(--line-strong); border-radius: var(--radius-md); background: var(--ink-raised); box-shadow: var(--shadow-deep); }
.client-account-menu { position: relative; }
.dot-mining-card { display: grid; gap: 10px; }
.dot-mining-card > span, .dot-mining-rate, .dot-mined-total { color: var(--paper-dim); font-size: 10px; }
.dot-mining-card > b { display: flex; align-items: center; gap: 10px; color: var(--paper); font: 35px/1 var(--display); }
.dot-mining-track, .client-onboarding-track, .signal-progress-track, .progress-track { overflow: hidden; height: 4px; border-radius: 99px; background: rgba(255,255,255,.1); }
.dot-mining-track span, .client-onboarding-track span, .signal-progress-track span, .progress-track span { display: block; width: var(--progress,0%); height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--signal), var(--gold-light)); box-shadow: 0 0 14px rgb(var(--accent-rgb) / 38%); transition: width .35s ease; }
.orb-activity { padding-top: 8px; border-top: 1px solid var(--line); }
.orb-activity summary { color: var(--paper-muted); font-size: 11px; cursor: pointer; }
.logout-button { min-height: 38px; padding: 9px 14px; color: var(--paper-dim); }
.workspace-main { width: var(--page); margin: 0 auto; padding: 34px 0 90px; }
.workspace-welcome { position: relative; display: flex; min-height: 250px; flex-direction: column; justify-content: center; overflow: hidden; padding: clamp(28px, 5vw, 66px) clamp(24px, 5vw, 68px); border-bottom: 1px solid var(--line); }
.workspace-welcome::before { position: absolute; top: 50%; right: clamp(13px, 8vw, 150px); width: clamp(160px, 21vw, 280px); aspect-ratio: 1; border: 1px solid color-mix(in srgb, var(--role) 18%, transparent); border-radius: 50%; content: ""; transform: translateY(-50%); box-shadow: inset 0 0 42px color-mix(in srgb, var(--role) 4%, transparent), 0 0 55px color-mix(in srgb, var(--role) 6%, transparent); }
.workspace-welcome::after { position: absolute; top: 50%; right: clamp(75px, 16vw, 215px); width: clamp(42px, 6vw, 76px); aspect-ratio: 1; border: 1px solid color-mix(in srgb,var(--role) 50%,white); border-radius: 50%; background: radial-gradient(circle at 35% 30%,#fff 0 6%,color-mix(in srgb,var(--role) 80%,white) 20%,var(--role) 66%,color-mix(in srgb,var(--role) 55%,#050a0d) 100%); content: ""; opacity: .95; box-shadow:0 0 0 14px color-mix(in srgb,var(--role) 6%,transparent),0 0 0 30px color-mix(in srgb,var(--role) 4%,transparent),0 0 42px color-mix(in srgb,var(--role) 36%,transparent); transform: translateY(-50%); animation: tdc-mark-drift 26s linear infinite; }
.workspace-welcome h1 { position: relative; z-index: 1; max-width: 13ch; margin: 0; }
.workspace-welcome h1 em { color: var(--gold-light); font-style: normal; }
.client-welcome-reflection { position: relative; z-index: 1; max-width: min(620px, 65%); margin-top: 23px; }
.client-welcome-reflection p { margin: 0; color: var(--paper-muted); font-family: var(--display); font-size: 19px; }
.client-welcome-reflection small { display: block; margin-top: 7px; color: var(--paper-dim); font-size: 10px; }
.workspace-stats { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 0; margin: 0 0 32px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.workspace-stats article, .workspace-stats > div { display: grid; align-content: start; gap: 5px; min-height: 118px; padding: 23px 22px; border-right: 1px solid var(--line); }
.workspace-stats article:first-child { padding-left: 0; }
.workspace-stats article:last-child { border-right: 0; }
.workspace-stats article > span { color: var(--paper-dim); font-size: 9px; letter-spacing: .14em; }
.workspace-stats article > b { color: var(--paper); font: 35px/1 var(--display); }
.workspace-stats article > small { color: var(--paper-dim); font-size: 10px; }
.workspace-stats a { margin-top: 7px; font-size: 10px; }
.client-workspace-layout, .staff-workspace-layout { display: grid; grid-template-columns: 238px minmax(0,1fr); align-items: start; gap: clamp(26px, 4vw, 68px); }
.client-workspace-layout--single { grid-template-columns: minmax(0,1fr); }
.client-workspace-sidebar, .staff-workspace-sidebar { position: sticky; top: 104px; max-height: calc(100vh - 126px); overflow: auto; padding: 12px 12px 20px 0; scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--gold) 30%, transparent) transparent; }
.client-workspace-sidebar > .portal-kicker, .staff-workspace-sidebar > .portal-kicker { margin: 0 0 12px; padding-left: 12px; color: var(--paper-dim); font-size: 9px; }
.client-sidebar-nav, .staff-sidebar-nav { display: grid; gap: 3px; }
.navigation-group { display: grid; gap: 2px; margin: 0 0 18px; }
.navigation-group > p { margin: 0 0 5px; padding: 0 12px; color: #797a76; font-size: 8px; font-weight: 650; letter-spacing: .16em; }
.navigation-group > a { min-width: 0; }
.client-sidebar-nav a, .staff-sidebar-nav a { display: flex; align-items: center; min-height: 39px; padding: 9px 12px; border-left: 2px solid transparent; border-radius: 0 8px 8px 0; color: var(--paper-dim); font-size: 12px; text-decoration: none; transition: color .18s, background .18s, border-color .18s; }
.client-sidebar-nav a:hover, .staff-sidebar-nav a:hover, .client-sidebar-nav a.is-active, .staff-sidebar-nav a.is-active, .client-sidebar-nav a[aria-current=page], .staff-sidebar-nav a[aria-current=page] { border-left-color: var(--gold); background: linear-gradient(90deg, color-mix(in srgb, var(--gold) 12%, transparent), transparent); color: var(--paper); }
.client-workspace-content, .staff-workspace-content { min-width: 0; }
.workspace-section { min-width: 0; margin: 0 0 45px; padding: 16px 0 34px; border-bottom: 1px solid var(--line); scroll-margin-top: 108px; }
.workspace-section-heading { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin: 0 0 22px; }
.workspace-section-heading > div { min-width: 0; }
.workspace-section-heading .portal-kicker { margin-bottom: 8px; }
.workspace-section-heading h2 { margin: 0; }
.workspace-section-heading h3 { margin: 0; }
.workspace-content-tabs, .client-primary-tabs, .staff-primary-tabs { position: sticky; z-index: 12; top: 78px; display: flex; gap: 8px; padding: 12px 0; border-bottom: 1px solid var(--line); background: rgba(8,10,12,.95); }
.workspace-content-tabs button, .client-primary-tabs button, .staff-primary-tabs button { min-height: 36px; padding: 8px 12px; border: 1px solid transparent; border-radius: 999px; background: transparent; color: var(--paper-dim); font-size: 11px; cursor: pointer; }
.workspace-content-tabs button[aria-selected=true], .client-primary-tabs button[aria-selected=true], .staff-primary-tabs button[aria-selected=true] { border-color: var(--line); color: var(--paper); }

/* Onboarding and task progress */
.spark-start-card { display: grid; grid-template-columns: minmax(220px,1fr) minmax(180px,.8fr) auto; align-items: center; gap: 26px; margin: 0 0 28px; padding: 22px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.spark-start-card h2 { margin: 8px 0; font: 28px/1.1 var(--display); }
.spark-start-card p { margin: 0; max-width: 55ch; font-size: 12px; }
.spark-start-current { display: grid; gap: 4px; padding-left: 20px; border-left: 1px solid var(--line); }
.spark-start-current span { color: var(--gold); font-size: 9px; letter-spacing: .11em; text-transform: uppercase; }
.spark-start-current b { color: var(--paper); font-size: 12px; }
.spark-start-status { grid-column: 1/-1; margin: -14px 0 0; font-size: 11px; }
.onboarding-list { display: grid; gap: 0; border-top: 1px solid var(--line); }
.onboarding-item, .onboarding-list > article { display: grid; grid-template-columns: 54px minmax(0,1fr) auto; gap: 16px; align-items: start; padding: 21px 0; border-bottom: 1px solid var(--line); }
.onboarding-row { display: grid; grid-template-columns: 48px minmax(0,1fr) auto; gap: 15px; align-items: start; padding: 22px 0; border-bottom: 1px solid var(--line); }
.onboarding-index { color: var(--gold); font: 21px/1 var(--display); }
.onboarding-copy h3 { display: flex; align-items: center; flex-wrap: wrap; gap: 9px; margin: 0 0 6px; font: 23px/1.15 var(--display); }
.onboarding-copy > p { margin: 0 0 7px; font-size: 12px; }
.onboarding-current-label { display: inline-flex; align-items: center; padding: 4px 8px; border: 1px solid color-mix(in srgb,var(--role) 45%,transparent); border-radius: 999px; color: var(--role); font: 650 8px/1.2 var(--body); letter-spacing: .12em; }
.onboarding-result { margin-top: 10px !important; color: var(--paper-dim); }
.onboarding-result b { color: var(--paper-muted); }
.onboarding-evidence-status { display: inline-flex; align-items: center; margin: 4px 0; color: var(--paper-dim); font-size: 10px; }
.onboarding-evidence-status[data-status=complete] { color: var(--link); }
.onboarding-evidence-status[data-status=in_progress] { color: var(--gold-light); }
.onboarding-evidence-note, .onboarding-saved-note { color: var(--paper-dim); font-size: 10px !important; }
.onboarding-action { align-self: center; }
.onboarding-resource-link { white-space: nowrap; }
.onboarding-item > span:first-child, .onboarding-list > article > span:first-child { color: var(--gold); font: 20px/1 var(--display); }
.onboarding-item h3, .onboarding-list > article h3 { margin: 0 0 5px; font: 21px/1.2 var(--display); }
.onboarding-item p, .onboarding-list > article p { margin: 0 0 7px; font-size: 12px; }
.onboarding-item .form-hint, .onboarding-list > article .form-hint { margin-top: 9px; }
.client-onboarding-summary { max-width: 720px; margin: 25px 0; padding: 17px 0; border-top: 1px solid var(--line); }
.client-onboarding-heading { display: flex; justify-content: space-between; color: var(--paper-dim); font-size: 10px; letter-spacing: .12em; }
.client-onboarding-heading b { color: var(--paper); }
.client-onboarding-track { margin: 11px 0 8px; }
.client-onboarding-summary small { color: var(--paper-dim); font-size: 10px; }
.signal-progress { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 30px; margin: 22px 0; }
.signal-progress-item { display: grid; gap: 10px; }
.signal-progress-item > div:first-child { display: flex; justify-content: space-between; gap: 12px; color: var(--paper); font-size: 11px; }
.signal-progress-item > div:first-child span { color: var(--paper-dim); }

/* Forms and content workspaces */
.portal-edit-grid, .portal-form-grid, .signal-kit-grid, .website-builder-layout, .customer-workspace-layout, .marketplace-grid, .games-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); align-items: start; gap: 18px; }
.portal-form, .portal-edit-grid > form, .signal-resource-panel, .website-page-panel, .website-builder-panel, .staff-queue-panel, .consultation-card, .game-card, .marketplace-service-card, .customer-panel, .team-panel, .document-panel { min-width: 0; padding: 20px; border: 1px solid var(--line); border-radius: var(--radius-md); background: linear-gradient(145deg, rgba(20,23,25,.78), rgba(12,14,16,.65)); }
.portal-form h3, .portal-edit-grid form h3 { margin-bottom: 11px; font: 25px/1.15 var(--display); }
.portal-form > p:first-of-type { font-size: 12px; }
.portal-form label, .website-builder-controls label, .follow-up-tools label, .prospect-tools label, .client-tools label { display: grid; gap: 7px; margin: 0 0 14px; color: var(--paper-muted); font-size: 11px; font-weight: 600; }
.portal-form input, .portal-form select, .portal-form textarea, .website-builder-controls input, .website-builder-controls select, .website-builder-controls textarea, .follow-up-tools input, .follow-up-tools select, .prospect-tools input, .prospect-tools select, .client-tools input, .client-tools select, .lobby-composer input, .lobby-composer textarea, .lobby-conversation-picker select { width: 100%; min-height: 42px; padding: 10px 12px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: rgba(4,6,7,.6); color: var(--paper); font-size: 13px; }
.portal-form textarea { min-height: 100px; resize: vertical; }
.portal-form input[readonly], .portal-form textarea[readonly] { border-color: transparent; background: rgba(255,255,255,.035); color: var(--paper-muted); }
.portal-form input::placeholder, .portal-form textarea::placeholder { color: #787a77; }
.portal-form input:focus, .portal-form textarea:focus, .portal-form select:focus { border-color: var(--role); }
.portal-form .form-hint { margin-bottom: 15px; }
.portal-edit-grid { gap: 14px; }
.website-builder-layout { grid-template-columns: minmax(280px,.78fr) minmax(0,1.22fr); align-items: start; }
.website-page-preview, .website-preview-frame, .website-preview-canvas, .website-studio-preview { position: sticky; top: 128px; min-height: 540px; border: 1px solid var(--line-strong); border-radius: 16px; background: #101315; box-shadow: var(--shadow-deep); }
.website-preview-frame iframe { width: 100%; min-height: 540px; border: 0; border-radius: inherit; background: #fff; }
.website-page-tabs, .website-page-tabs-nav { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.website-page-tabs button, .website-page-tabs a { min-height: 34px; padding: 7px 11px; border: 1px solid var(--line); border-radius: 999px; background: transparent; color: var(--paper-muted); font-size: 10px; cursor: pointer; }
.website-page-tabs button[aria-selected=true] { border-color: var(--gold); color: var(--gold-light); }
.customer-toolbar, .client-tools, .prospect-tools, .follow-up-tools { display: grid; grid-template-columns: minmax(180px,1fr) repeat(2,minmax(145px,.42fr)); gap: 12px; align-items: end; margin: 17px 0; }
.customer-table-wrap, .data-table-wrap { overflow: auto; border: 1px solid var(--line); border-radius: var(--radius-md); }
table { width: 100%; border-collapse: collapse; text-align: left; }
th, td { padding: 12px 14px; border-bottom: 1px solid var(--line); color: var(--paper-muted); font-size: 11px; }
th { color: var(--gold-light); font-size: 9px; font-weight: 650; letter-spacing: .1em; text-transform: uppercase; }
tr:last-child td { border-bottom: 0; }
.signal-sop-list, .signal-template-list, .client-project-list, .marketplace-service-list, .game-list, .staff-record-list, .staff-follow-up-queue, .client-notifications-list, .staff-broadcast-list, .consultation-session-list, .onboarding-list, .request-list, .team-member-list { display: grid; gap: 0; }
.signal-sop-item, .signal-template-item, .team-access-row, .request-item, .staff-record, .marketplace-item, .client-project-item, .client-notification-item, .staff-follow-up-item, .consultation-session-item { padding: 16px 0; border-bottom: 1px solid var(--line); }
.foundation-document-shortcuts { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; margin: 15px 0; }
.foundation-document-shortcuts a { display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 9px 10px; border: 1px solid var(--line); border-radius: var(--radius-sm); color: var(--paper); font-size: 11px; text-decoration: none; }
.foundation-document-shortcuts a span { color: var(--gold); font: 16px/1 var(--display); }
.orb-inline-icon { width: 14px; height: 14px; vertical-align: -.2em; }

/* Commerce and account views */
.marketplace-category-nav, .marketplace-categories { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 24px; }
.marketplace-category-nav button, .marketplace-categories button { min-height: 36px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 999px; background: transparent; color: var(--paper-dim); font-size: 10px; cursor: pointer; }
.marketplace-category-nav button[aria-selected=true], .marketplace-categories button[aria-selected=true] { border-color: var(--gold); color: var(--gold-light); }
.marketplace-grid, .marketplace-service-list { gap: 12px; }
.marketplace-service-card { display: grid; align-content: start; gap: 12px; }
.marketplace-service-card h3 { margin: 0; font: 23px/1.1 var(--display); }
.marketplace-service-card .price, .marketplace-service-card [data-price] { color: var(--gold-light); font: 26px/1 var(--display); }
.account-plan-card, .subscription-card, .collection-item, .orb-ledger-row { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 14px; align-items: center; padding: 17px 0; border-bottom: 1px solid var(--line); }
.plan-current, .plan-pill { color: var(--gold-light); }
.collection-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 14px; }
.collection-item { display: block; padding: 18px; border: 1px solid var(--line); border-radius: var(--radius-md); }
.orb-balance-hero { display: flex; align-items: center; gap: 20px; padding: 30px 0; }
.orb-balance-hero strong { color: var(--gold-light); font: 56px/1 var(--display); }

/* Staff tools: dense operations, clear reading order */
.staff-main { padding-top: 20px; }
.staff-welcome { min-height: 190px; padding-left: 0; border-bottom: 0; }
.staff-welcome::after { right: 6%; width: 146px; }
.staff-welcome h1 { font-size: clamp(40px, 5vw, 68px); }
.staff-stats { grid-template-columns: repeat(5,minmax(0,1fr)); }
.staff-stats article { min-height: 112px; padding: 18px 14px; }
.staff-stats article:first-child { padding-left: 0; }
.staff-stats article > b { font-size: 30px; }
.staff-sidebar-nav a { min-height: 36px; font-size: 11px; }
.staff-queue { max-width: 1160px; }
.staff-record-list > article, .staff-follow-up-queue > article, .consultation-session-list > article { padding: 18px 0; border-bottom: 1px solid var(--line); }
.staff-record-list h3, .staff-follow-up-queue h3 { margin-bottom: 6px; font: 22px/1.15 var(--display); }
.staff-clearance, .staff-role-detail, .staff-role-permission, .founder-team-person, .founder-team-pending { border-color: var(--line) !important; background: rgba(255,255,255,.025) !important; }
.consultation-room-tabs, .consultation-tabs, .staff-section-tabs { display: flex; gap: 8px; overflow: auto; margin: 18px 0; border-bottom: 1px solid var(--line); }
.consultation-room-tabs button, .consultation-tabs button, .staff-section-tabs button { padding: 11px 12px; border: 0; border-bottom: 2px solid transparent; background: none; color: var(--paper-dim); white-space: nowrap; cursor: pointer; }
.consultation-room-tabs button[aria-selected=true], .consultation-tabs button[aria-selected=true], .staff-section-tabs button[aria-selected=true] { border-bottom-color: var(--gold); color: var(--paper); }

/* One interactive Dot guide; role colour is contextual, not a set of mascot pages. */
.dot-guide-widget { --role: var(--spark); position: fixed; z-index: 80; right: 28px; bottom: 24px; display: grid; justify-items: end; gap: 12px; max-width: calc(100vw - 32px); }
.dot-guide-widget[data-role=signal] { --role: var(--signal); }
.dot-guide-widget[data-role=spark] { --role: var(--spark); }
.dot-guide-widget[data-role=pulse] { --role: var(--pulse); }
.dot-guide-widget[data-role=link] { --role: var(--link); }
.dot-guide-launcher { display: inline-flex; align-items: center; gap: 10px; min-height: 58px; padding: 7px 15px 7px 8px; border: 1px solid color-mix(in srgb,var(--role) 48%,transparent); border-radius: 999px; background: var(--ink-glass); color: var(--paper); box-shadow: 0 10px 36px rgba(0,0,0,.34), 0 0 28px color-mix(in srgb,var(--role) 14%,transparent); cursor: pointer; }
.dot-guide-launcher-label { font-size: 11px; font-weight: 600; }
.dot-account-emblem { position: relative; display: grid; width: 38px; height: 38px; place-items: center; }
.dot-account-logo { display: block; width: 32px; height: 32px; background: url('/assets/orb-mark.svg') center/contain no-repeat; filter: drop-shadow(0 0 10px color-mix(in srgb,var(--role) 48%,transparent)); animation: tdc-mark-drift 32s linear infinite; }
.dot-guide-role-select { display: grid; gap: 4px; color: var(--paper-dim); font-size: 10px; }
.dot-guide-role-select select { min-height: 34px; padding: 4px 28px 4px 10px; border: 1px solid var(--line-strong); border-radius: 999px; background: var(--ink-raised); color: var(--paper); font-size: 11px; }
.dot-account-halo { position: absolute; inset: -2px; border: 1px solid color-mix(in srgb,var(--role) 55%,transparent); border-radius: 50%; animation: tdc-orbit 11s linear infinite; }
.dot-guide-widget.is-thinking .tdc-dot-mark { animation: tdc-thinking 1.2s linear infinite; }
.dot-guide-widget.is-speaking .tdc-dot-mark { animation: tdc-speaking .58s ease-in-out 3 alternate; }

/* Reuse the original Dot Family mark, rather than the Orb balance graphic. */
.dot-account-emblem { isolation:isolate; }
.dot-account-emblem::before,.dot-account-emblem::after { position:absolute; z-index:0; width:90%; height:56%; border:1px solid color-mix(in srgb,var(--role) 34%,transparent); border-radius:50%; content:""; transform:rotate(42deg) scaleX(.62); pointer-events:none; }
.dot-account-emblem::after { transform:rotate(-42deg) scaleX(.62); border-color:color-mix(in srgb,var(--role) 26%,transparent); }
.dot-account-halo { inset:3px; z-index:0; border-color:color-mix(in srgb,var(--role) 54%,transparent); opacity:.92; }
.dot-account-logo { position:relative; z-index:1; width:12px; height:12px; border:1px solid color-mix(in srgb,var(--role) 58%,white); border-radius:50%; background:radial-gradient(circle at 35% 30%,#fff 0 6%,color-mix(in srgb,var(--role) 80%,white) 20%,var(--role) 66%,color-mix(in srgb,var(--role) 55%,#050a0d) 100%); box-shadow:0 0 9px color-mix(in srgb,var(--role) 76%,transparent),0 0 22px color-mix(in srgb,var(--role) 28%,transparent); filter:none; animation:tdc-mark-drift 32s linear infinite; }
.dot-guide-widget[data-role=spark] .dot-account-logo,.dot-guide-widget[data-role=pulse] .dot-account-logo,.dot-guide-widget[data-role=link] .dot-account-logo { filter:none; }

/* Shared header identity: the existing Dot Family orbital mark. */
.tdc-mark-link { display:inline-grid!important; width:52px; height:52px; min-width:52px; place-items:center; color:var(--role,var(--signal)); text-decoration:none; }
.dot-guide-widget .tdc-dot-mark { animation: tdc-dot-idle 8s ease-in-out infinite; }
.tdc-dot-mark { position:relative; display:block; width:42px; height:42px; flex:0 0 auto; border-radius:50%; background-color:var(--role,var(--signal)); -webkit-mask:url('/assets/tdc-signal-mark.svg') center / contain no-repeat; mask:url('/assets/tdc-signal-mark.svg') center / contain no-repeat; }
.tdc-dot-mark::before { position:absolute; inset:-5%; border:1px solid color-mix(in srgb,var(--role,var(--signal)) 30%,transparent); border-radius:50%; content:""; opacity:.6; pointer-events:none; }
.tdc-dot-mark::after { position:absolute; inset:-15%; border-radius:50%; background:radial-gradient(circle,color-mix(in srgb,var(--role,var(--signal)) 16%,transparent),transparent 70%); content:""; opacity:.28; pointer-events:none; }
.tdc-dot-mark i,.tdc-dot-mark b { display:none; }
@keyframes tdc-dot-idle { 0%,100% { transform:scale(.98); opacity:.9; } 50% { transform:scale(1.04); opacity:1; } }
.signal-brand .tdc-mark-link { width:68px; height:68px; }
.signal-brand .tdc-dot-mark { width:54px; height:54px; }
.site-header .tdc-mark-link { width:56px; height:56px; }
@media(prefers-reduced-motion:reduce) { .tdc-dot-mark i,.tdc-dot-mark b,.dot-guide-widget .tdc-dot-mark { animation:none!important; } }
.dot-guide-widget[data-state=listening] .tdc-dot-mark { transform: scale(1.04); }
.dot-guide-widget[data-state=error] .dot-guide-launcher { border-color: #ff9c8d; }
.dot-guide-panel, .builders-lobby-panel { width: min(420px, calc(100vw - 32px)); max-height: min(660px, calc(100vh - 105px)); overflow: auto; padding: 19px; border: 1px solid color-mix(in srgb,var(--role) 42%,var(--line)); border-radius: 20px 20px 5px 20px; background: linear-gradient(145deg, rgba(18,22,25,.98), rgba(8,10,12,.98)); box-shadow: var(--shadow-deep); }
.dot-guide-heading { display: flex; align-items: center; gap: 12px; padding-bottom: 13px; border-bottom: 1px solid var(--line); }
.dot-guide-heading h2 { margin: 2px 0 0; font: 24px/1.1 var(--display); }
.dot-guide-heading .portal-kicker { color: var(--role); }
.dot-guide-close { margin-left: auto; }
.assistant-message { margin: 12px 0; padding: 12px 13px; border-left: 2px solid color-mix(in srgb,var(--role) 60%,transparent); background: rgba(255,255,255,.035); }
.assistant-message p { margin: 5px 0 0; font-size: 12px; }
.assistant-message b { color: var(--paper); font-size: 10px; }

/* Public evidence survey: business-branded, accessible and print-ready. */
.survey-public-page {
  --survey-background: var(--ink);
  --survey-ink: var(--paper);
  --survey-accent: var(--signal);
  min-height: 100vh;
  background: radial-gradient(ellipse at 50% 0%, color-mix(in srgb, var(--survey-accent) 17%, transparent), transparent 56%), var(--survey-background);
  color: var(--survey-ink);
}
.survey-public-shell { width: min(760px, calc(100% - 2 * var(--space-5))); margin: 0 auto; padding: var(--space-10) 0 var(--space-12); }
.survey-wordmark { display: block; width: 150px; margin: 0 auto var(--space-6); }
.survey-wordmark img { display: block; width: 100%; height: auto; }
.survey-public-card { padding: clamp(var(--space-5), 5vw, var(--space-10)); border: 1px solid color-mix(in srgb, var(--survey-accent) 38%, transparent); border-radius: var(--radius-lg); background: color-mix(in srgb, var(--survey-background) 92%, var(--ink-raised)); box-shadow: var(--shadow-deep); }
.survey-public-card h1 { margin: var(--space-2) 0; color: var(--survey-ink); font-size: clamp(32px, 6vw, 52px); }
.survey-public-card > p { max-width: 70ch; color: color-mix(in srgb, var(--survey-ink) 78%, transparent); line-height: 1.65; }
.survey-business-brand { margin-bottom: var(--space-2); color: var(--survey-accent) !important; font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.survey-public-page[data-survey-font="modern"] { font-family: var(--body); }
.survey-public-page[data-survey-font="classic"] { font-family: Georgia, "Times New Roman", serif; }
.survey-public-page[data-survey-font="editorial"] { font-family: "Palatino Linotype", Palatino, Georgia, serif; }
.survey-public-page[data-survey-font="modern"] h1, .survey-public-page[data-survey-font="modern"] h2 { font-family: var(--display); }
.survey-public-card form { display: grid; gap: var(--space-5); margin-top: var(--space-6); }
.survey-public-card form > label, .survey-contact-details > label { display: grid; gap: var(--space-2); color: var(--survey-ink); font-weight: 600; }
.survey-public-card fieldset { min-width: 0; margin: 0; padding: var(--space-4); border: 1px solid color-mix(in srgb, var(--survey-accent) 30%, transparent); border-radius: var(--radius-md); }
.survey-public-card legend { padding-inline: var(--space-2); color: var(--survey-ink); font-weight: 650; }
.survey-public-card input:not([type=checkbox]):not([type=radio]):not([type=range]), .survey-public-card select, .survey-public-card textarea { width: 100%; min-height: 44px; padding: 10px 12px; border: 1px solid color-mix(in srgb, var(--survey-ink) 24%, transparent); border-radius: var(--radius-sm); background: color-mix(in srgb, var(--survey-background) 84%, var(--ink-raised)); color: var(--survey-ink); }
.survey-public-card input[type=range] { accent-color: var(--survey-accent); }
.survey-choice-row { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.survey-choice-row label { position: relative; }
.survey-choice-row input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.survey-choice-row span { display: grid; width: 44px; height: 44px; place-items: center; border: 1px solid color-mix(in srgb, var(--survey-ink) 28%, transparent); border-radius: 50%; color: var(--survey-ink); cursor: pointer; }
.survey-choice-row input:checked + span { border-color: var(--survey-accent); background: var(--survey-accent); color: var(--ink); }
.survey-choice-row input:focus-visible + span { outline: 2px solid var(--survey-accent); outline-offset: 3px; }
.survey-interest-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); }
.survey-interest-options label, .survey-consent { display: flex; align-items: flex-start; gap: var(--space-2); padding: var(--space-3); border: 1px solid color-mix(in srgb, var(--survey-ink) 10%, transparent); border-radius: var(--radius-sm); background: color-mix(in srgb, var(--survey-ink) 4%, transparent); color: var(--survey-ink); }
.survey-interest-options input, .survey-consent input { flex: 0 0 auto; margin-top: 4px; accent-color: var(--survey-accent); }
.survey-field-note, .survey-public-card small, .survey-contact-details > p { display: block; color: color-mix(in srgb, var(--survey-ink) 72%, transparent); font-size: 12px; }
.survey-contact-details { padding: var(--space-4); border: 1px solid color-mix(in srgb, var(--survey-ink) 18%, transparent); border-radius: var(--radius-md); }
.survey-contact-details summary { min-height: 44px; padding-block: var(--space-2); color: var(--survey-ink); cursor: pointer; }
.survey-contact-details[open] { display: grid; gap: var(--space-3); }
.survey-data-note { padding: var(--space-3) var(--space-4); border-left: 2px solid var(--survey-accent); background: color-mix(in srgb, var(--survey-accent) 8%, transparent); font-size: 13px; }
.survey-public-card a { color: var(--survey-accent); }
.survey-public-card #survey-status { min-height: 1.5em; color: var(--survey-accent); font-weight: 650; }
.survey-privacy-note { display: block; margin: var(--space-4) var(--space-2); color: var(--paper-dim); font-size: 12px; text-align: center; }
.survey-print-button { margin: 0 0 var(--space-2); }
@media (max-width: 720px) {
  .survey-public-shell { width: calc(100% - 2 * var(--space-3)); padding-top: var(--space-5); }
  .survey-wordmark { width: 128px; }
  .survey-interest-options { grid-template-columns: 1fr; }
}
@media print {
  .survey-public-page { min-height: 0; background: Canvas; color: CanvasText; color-scheme: light; }
  .survey-public-page::before, .survey-wordmark, .survey-print-button, .survey-privacy-note, .survey-data-note, #survey-status, .survey-public-card button[type="submit"] { display: none !important; }
  .survey-public-shell { width: 100%; margin: 0; padding: 0; }
  .survey-public-card { padding: 0; border: 0; border-radius: 0; background: Canvas; box-shadow: none; color: CanvasText; }
  .survey-public-card h1, .survey-public-card > p, .survey-public-card form > label, .survey-public-card legend, .survey-contact-details summary, .survey-interest-options label, .survey-consent, .survey-choice-row span { color: CanvasText; }
  .survey-public-card form { display: grid !important; gap: 12pt; margin-top: 16pt; }
  .survey-public-card fieldset, .survey-contact-details, .survey-interest-options label { break-inside: avoid; border-color: CanvasText; background: Canvas; }
  .survey-public-card input, .survey-public-card select, .survey-public-card textarea { border-color: CanvasText; background: Canvas; color: CanvasText; }
  .survey-public-card a { color: CanvasText; }
  .survey-public-card details:not([open]) > *:not(summary) { display: block !important; }
}

/* Login, invitation, legal, survey and document pages */
.login-layout, .invite-main, .survey-layout, .privacy-layout, .security-layout { width: min(880px, calc(100% - 40px)); margin: 8vh auto; }
.login-intro, .invite-intro { max-width: 680px; margin-bottom: 26px; }
.login-intro h1, .invite-intro h1, .privacy-main h1 { margin-bottom: 12px; }
.login-form, .invite-card, .survey-card, .privacy-card, .portal-auth-card { padding: clamp(22px, 4vw, 40px); border: 1px solid var(--line); border-radius: var(--radius-lg); background: linear-gradient(150deg,rgba(19,23,26,.9),rgba(9,11,13,.9)); box-shadow: var(--shadow-deep); }
.privacy-page { color: var(--paper); }
.privacy-header, .legal-header, .survey-header { width: var(--page); margin: 0 auto; padding: 25px 0; border-bottom: 1px solid var(--line); }
.privacy-header img, .legal-header img { width: 140px; }
.privacy-main, .legal-main { width: min(900px, calc(100% - 40px)); margin: 50px auto 90px; }
.privacy-main h2, .legal-main h2 { margin-top: 42px; font-size: 34px; }
.privacy-main p, .legal-main p, .privacy-main li, .legal-main li { max-width: 78ch; color: var(--paper-muted); font-size: 14px; line-height: 1.8; }
.privacy-footer, .legal-footer, .survey-footer { width: var(--page); margin: 0 auto; padding: 22px 0; border-top: 1px solid var(--line); color: var(--paper-dim); font-size: 10px; }
.survey-public-page .survey-question { padding: 18px 0; border-bottom: 1px solid var(--line); }
.survey-public-page .survey-question label { display: block; margin-bottom: 9px; color: var(--paper); }

/* Motion has a job: signal state, not decorate every surface. */
@keyframes tdc-node-travel { 0%,100% { left: 12%; } 50% { left: 88%; } }
@keyframes tdc-orbit { to { transform: rotate(360deg); } }
@keyframes tdc-mark-drift { to { transform: rotate(360deg); } }
@keyframes tdc-dot-idle { 0%,100% { transform: translateY(-50%) rotate(-2deg); } 50% { transform: translateY(calc(-50% - 6px)) rotate(2deg); } }
@keyframes tdc-thinking { to { transform: rotate(360deg) scale(1.04); opacity:.82; } }
@keyframes tdc-speaking { from { transform:scale(.96); opacity:.84; } to { transform:scale(1.08); opacity:1; } }

@media (max-width: 1050px) {
  :root { --page: min(100% - 40px, 900px); }
  .portal-header { grid-template-columns: 150px 1fr auto; gap: 14px; padding-inline: 20px; }
  .client-workspace-layout, .staff-workspace-layout { grid-template-columns: 1fr; gap: 14px; }
  .client-workspace-sidebar, .staff-workspace-sidebar { position: sticky; z-index: 18; top: 78px; max-height: none; overflow: auto; padding: 8px 0; border-bottom: 1px solid var(--line); background: rgba(8,10,12,.97); }
  .client-workspace-sidebar > .portal-kicker, .staff-workspace-sidebar > .portal-kicker { display: none; }
  .client-sidebar-nav, .staff-sidebar-nav { display: flex; width: max-content; min-width: 100%; gap: 4px; }
  .navigation-group { display: flex; flex: 0 0 auto; align-items: center; gap: 3px; margin: 0; }
  .navigation-group > p { display: none; }
  .navigation-group + .navigation-group { margin-left: 7px; padding-left: 7px; border-left: 1px solid var(--line); }
  .client-sidebar-nav a, .staff-sidebar-nav a { flex: 0 0 auto; border-bottom: 2px solid transparent; border-left: 0; border-radius: 999px; white-space: nowrap; }
  .client-sidebar-nav a.is-active, .staff-sidebar-nav a.is-active, .client-sidebar-nav a[aria-current=page], .staff-sidebar-nav a[aria-current=page] { border-bottom-color: var(--gold); border-left-color: transparent; background: color-mix(in srgb, var(--gold) 7%, transparent); }
  .workspace-section { scroll-margin-top: 135px; }
}
@media (max-width: 720px) {
  :root { --page: calc(100% - 28px); --radius-lg: 18px; }
  body { font-size: 14px; }
  .portal-header { grid-template-columns: 1fr auto; min-height: 66px; padding-inline: 14px; }
  .portal-header > a img, .client-brand-mark img { width: 112px; max-height: 38px; }
  .tdc-network-journey { grid-column: 1/-1; grid-row: 2; justify-self: start; width: min(330px,100%); min-height: 27px; margin: -6px 0 8px; font-size: 8px; }
  .portal-header:has(.tdc-network-journey) { row-gap: 2px; }
  .portal-nav { grid-column: 2; grid-row: 1; }
  .client-account-trigger { gap: 9px; padding: 6px 9px; }
  .account-plan-summary small, .account-balance-summary small { font-size: 7px; }
  .account-plan-summary b, .account-balance-summary b { font-size: 10px; }
  .account-balance-summary { padding-left: 9px; }
  .logout-button { min-height: 34px; padding: 7px 10px; font-size: 10px; }
  .workspace-main { padding-top: 20px; }
  .workspace-welcome { min-height: 205px; padding: 27px 16px; }
  .workspace-welcome h1 { max-width: 10ch; font-size: clamp(43px, 12vw, 65px); }
  .workspace-welcome::after { right: 3px; width: clamp(92px, 30vw, 140px); opacity: .75; }
  .client-welcome-reflection { max-width: 72%; margin-top: 15px; }
  .client-welcome-reflection p { font-size: 15px; }
  .workspace-stats, .staff-stats { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .workspace-stats article, .workspace-stats > div, .staff-stats article { min-height: 90px; padding: 15px 12px; border-bottom: 1px solid var(--line); }
  .workspace-stats article:nth-child(2n) { border-right: 0; }
  .workspace-stats article:first-child, .staff-stats article:first-child { padding-left: 12px; }
  .workspace-stats article > b { font-size: 28px; }
  .spark-start-card { grid-template-columns: 1fr; gap: 14px; padding: 18px 0; }
  .spark-start-current { padding: 0; border-left: 0; }
  .spark-start-status { margin: 0; }
  .workspace-section { margin-bottom: 28px; padding: 15px 0 24px; }
  .workspace-section-heading { align-items: flex-start; flex-direction: column; gap: 10px; margin-bottom: 17px; }
  .portal-edit-grid, .portal-form-grid, .signal-kit-grid, .website-builder-layout, .customer-workspace-layout, .marketplace-grid, .games-grid, .collection-grid { grid-template-columns: 1fr; }
  .website-page-preview, .website-preview-frame, .website-preview-canvas, .website-studio-preview { position: static; min-height: 360px; }
  .website-preview-frame iframe { min-height: 360px; }
  .customer-toolbar, .client-tools, .prospect-tools, .follow-up-tools { grid-template-columns: 1fr 1fr; }
  .customer-toolbar > :first-child, .client-tools > :first-child, .prospect-tools > :first-child, .follow-up-tools > :first-child { grid-column: 1/-1; }
  .onboarding-item, .onboarding-list > article { grid-template-columns: 34px minmax(0,1fr); gap: 12px; }
  .onboarding-row { grid-template-columns: 34px minmax(0,1fr); gap: 12px; padding: 17px 0; }
  .onboarding-copy h3 { gap: 7px; font-size: 20px; }
  .onboarding-action { grid-column: 2; }
  .onboarding-item > :last-child, .onboarding-list > article > :last-child { grid-column: 2; }
  .signal-progress { grid-template-columns: 1fr; gap: 16px; }
  .portal-form, .portal-edit-grid > form, .signal-resource-panel, .website-page-panel, .website-builder-panel, .staff-queue-panel, .consultation-card, .game-card, .marketplace-service-card, .customer-panel, .team-panel, .document-panel { padding: 15px; }
  .dot-guide-widget { right: 12px; bottom: 12px; }
  .dot-guide-launcher { min-height: 50px; padding-right: 12px; }
  .dot-guide-panel, .builders-lobby-panel { width: min(410px, calc(100vw - 24px)); max-height: calc(100dvh - 84px); }
  .client-account-panel { position: fixed; top: 72px; right: 12px; }
  .login-layout, .invite-main, .survey-layout { width: calc(100% - 28px); margin: 32px auto; }
  .privacy-main, .legal-main { width: calc(100% - 32px); margin: 32px auto 60px; }
  .privacy-main h2, .legal-main h2 { margin-top: 30px; font-size: 28px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* Whole-portal themes are complete visual treatments, not overlays. */
.client-portal-page { --role: var(--spark); }
.client-portal-page[data-assistant-role="signal"] { --role: var(--signal); --assistant-hue: 0deg; }
.client-portal-page[data-assistant-role="spark"] { --role: var(--spark); --assistant-hue: 82deg; }
.client-portal-page[data-assistant-role="pulse"] { --role: var(--pulse); --assistant-hue: 162deg; }
.client-portal-page[data-assistant-role="link"] { --role: var(--link); --assistant-hue: 214deg; }
.staff-page { --role: var(--pulse); }
.client-portal-page[data-portal-theme="moss"] {
  --ink: #0b1718; --ink-raised: #102425; --ink-soft: #183235; --ink-glass: rgb(11 23 24 / 92%);
  --paper: #eff8f5; --paper-muted: #c2d8d3; --paper-dim: #91b3ac; --gold: #73d6bd; --gold-light: #a2f0dc;
  --line: rgb(162 240 220 / 15%); --line-strong: rgb(162 240 220 / 28%); --role: #73d6bd;
  --surface: rgb(16 36 37 / 84%); --surface-raised: rgb(24 50 53 / 94%);
}
.client-portal-page[data-portal-theme="after-hours"] {
  --ink: #111022; --ink-raised: #191932; --ink-soft: #242546; --ink-glass: rgb(17 16 34 / 92%);
  --paper: #f3f2ff; --paper-muted: #cccee9; --paper-dim: #9fa5cf; --gold: #9b9fff; --gold-light: #c3c8ff;
  --line: rgb(195 200 255 / 15%); --line-strong: rgb(195 200 255 / 28%); --role: #9b9fff;
  --surface: rgb(25 25 50 / 84%); --surface-raised: rgb(36 37 70 / 94%);
}
.client-portal-page[data-portal-theme="winter-glow"] {
  --ink: #111828; --ink-raised: #17253a; --ink-soft: #21334e; --ink-glass: rgb(17 24 40 / 94%);
  --paper: #f3f7ff; --paper-muted: #c5d3e7; --paper-dim: #92aac8; --gold: #79caff; --gold-light: #c0e8ff;
  --line: rgb(192 232 255 / 17%); --line-strong: rgb(192 232 255 / 32%); --role: #8bd5c1;
  --surface: rgb(23 37 58 / 86%); --surface-raised: rgb(33 51 78 / 94%);
  --winter-red: #f18489; --winter-green: #66d6a6; --winter-ice: #d6f3ff;
}
.client-portal-page[data-portal-theme="winter-glow"] .portal-header { border-bottom-color: rgba(180, 205, 182, .2); }

/* Seasonal templates: lights sit on the welcome frame; snow stays behind controls. */
.seasonal-snowfall { position: fixed; z-index: 30; inset: 0; overflow: hidden; pointer-events: none; }
.seasonal-snowflake { position: absolute; top: -4%; left: var(--flake-x); display: block; color: var(--winter-ice, var(--paper)); opacity: .62; animation: seasonal-flake-fall var(--flake-duration) linear var(--flake-delay) infinite; }
.seasonal-snowflake svg { display: block; width: var(--flake-size); height: var(--flake-size); fill: currentColor; stroke: currentColor; stroke-width: .9; }
.seasonal-snowflake.is-crystal { opacity: .72; filter: drop-shadow(0 0 var(--space-2) color-mix(in srgb, var(--winter-ice, var(--paper)) 36%, transparent)); }
.seasonal-portal-border-lights { position: absolute; z-index: 2; inset: 0; overflow: hidden; border-radius: inherit; pointer-events: none; }
.seasonal-portal-wire { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.seasonal-portal-wire-shadow, .seasonal-portal-wire-highlight { fill: none; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.seasonal-portal-wire-shadow { stroke: color-mix(in srgb, var(--winter-green, var(--role)) 38%, var(--ink)); stroke-width: 3; }
.seasonal-portal-wire-highlight { stroke: color-mix(in srgb, var(--winter-ice, var(--paper)) 44%, transparent); stroke-width: 1; }
.seasonal-portal-bulb { position: absolute; top: var(--bulb-y); left: var(--bulb-x); display: grid; justify-items: center; width: var(--space-3); height: var(--space-5); transform: translate(-50%, -50%) rotate(var(--bulb-angle)); }
.seasonal-portal-bulb i { width: 44%; height: var(--space-1); border-radius: var(--radius-sm) var(--radius-sm) 0 0; background: color-mix(in srgb, var(--winter-ice, var(--paper)) 56%, var(--ink)); }
.seasonal-portal-bulb b { width: 82%; height: 72%; border: 1px solid color-mix(in srgb, var(--bulb-colour) 72%, var(--winter-ice, var(--paper))); border-radius: 42% 42% 50% 50%; background: radial-gradient(circle at 40% 25%, var(--winter-ice, var(--paper)) 0 5%, color-mix(in srgb, var(--bulb-colour) 74%, white) 28%, var(--bulb-colour) 74%); box-shadow: 0 0 var(--space-2) color-mix(in srgb, var(--bulb-colour) 52%, transparent); animation: seasonal-bulb-glow 4.8s ease-in-out var(--bulb-delay) infinite alternate; }
.seasonal-countdown-strip { position: relative; isolation: isolate; display: grid; gap: var(--space-4); overflow: hidden; margin: var(--space-2) auto var(--space-8); padding: var(--space-8); border: 1px solid color-mix(in srgb, var(--winter-ice, var(--paper)) 22%, var(--line)); border-radius: var(--radius-lg); background: radial-gradient(ellipse at 10% 0, color-mix(in srgb, var(--winter-red, var(--role)) 12%, transparent), transparent 40%), radial-gradient(ellipse at 92% 100%, color-mix(in srgb, var(--winter-green, var(--role)) 12%, transparent), transparent 40%), linear-gradient(130deg, var(--ink-raised), var(--ink)); box-shadow: var(--shadow-deep); }
.seasonal-countdown-strip::after { position: absolute; z-index: -1; inset: auto 0 0; height: var(--space-1); background: linear-gradient(90deg, var(--winter-red, var(--role)), var(--winter-ice, var(--paper)), var(--winter-green, var(--role)), var(--winter-red, var(--role))); content: ""; opacity: .8; }
.seasonal-light-string { position: absolute; inset: 0 0 auto; display: flex; justify-content: space-around; height: var(--space-5); padding-top: var(--space-2); border: 0; }
.seasonal-light-string i { width: var(--space-2); height: var(--space-2); border-radius: 50%; background: var(--winter-red, var(--role)); box-shadow: 0 0 var(--space-3) color-mix(in srgb, var(--winter-red, var(--role)) 62%, transparent); }
.seasonal-light-string i:nth-child(3n) { background: var(--winter-green, var(--role)); box-shadow: 0 0 var(--space-3) color-mix(in srgb, var(--winter-green, var(--role)) 62%, transparent); }
.seasonal-light-string i:nth-child(3n + 2) { background: var(--winter-ice, var(--paper)); box-shadow: 0 0 var(--space-3) color-mix(in srgb, var(--winter-ice, var(--paper)) 55%, transparent); }
.seasonal-countdown-intro { display: flex; align-items: center; gap: var(--space-4); padding-top: var(--space-3); }
.seasonal-countdown-intro img { width: clamp(3rem, 6vw, 4rem); height: auto; filter: drop-shadow(0 0 var(--space-4) color-mix(in srgb, var(--winter-green, var(--role)) 34%, transparent)); }
.seasonal-countdown-intro strong { display: block; margin: var(--space-1) 0; color: var(--paper); font: 1.55rem/1.05 var(--display); }
.seasonal-countdown-intro p { margin: 0; color: var(--paper-dim); font-size: 12px; }
.seasonal-countdown-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }
.seasonal-countdown-card { min-width: 0; padding: var(--space-5); border: 1px solid var(--line); border-radius: var(--radius-md); background: linear-gradient(145deg, var(--surface-raised), var(--ink-raised)); box-shadow: inset 0 1px color-mix(in srgb, var(--paper) 7%, transparent), 0 var(--space-3) var(--space-8) color-mix(in srgb, var(--ink) 38%, transparent); }
.seasonal-countdown-card-head { display: flex; align-items: center; gap: var(--space-3); }
.seasonal-countdown-card-head > div { display: grid; gap: var(--space-1); }
.seasonal-countdown-card-head > div > span, .seasonal-countdown-card-head > small { color: var(--paper-dim); font-size: 9px; letter-spacing: .12em; text-transform: uppercase; }
.seasonal-countdown-card-head strong { color: var(--paper); font: 1.2rem/1.1 var(--display); }
.seasonal-countdown-card-head > small { margin-left: auto; }
.seasonal-holiday-spark { display: grid; width: var(--space-8); aspect-ratio: 1; place-items: center; border: 1px solid color-mix(in srgb, var(--winter-red, var(--role)) 32%, var(--line)); border-radius: 50%; background: color-mix(in srgb, var(--winter-red, var(--role)) 12%, var(--surface)); color: var(--winter-red, var(--role)); }
.seasonal-new-year .seasonal-holiday-spark { border-color: color-mix(in srgb, var(--winter-green, var(--role)) 32%, var(--line)); background: color-mix(in srgb, var(--winter-green, var(--role)) 12%, var(--surface)); color: var(--winter-green, var(--role)); }
.seasonal-countdown-clock { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: var(--space-2); margin-top: var(--space-4); }
.seasonal-countdown-clock > div { display: grid; justify-items: center; gap: var(--space-1); padding: var(--space-2) var(--space-1); border: 1px solid var(--line); border-radius: var(--radius-sm); background: color-mix(in srgb, var(--ink) 28%, transparent); }
.seasonal-countdown-clock b { color: var(--winter-ice, var(--gold-light)); font: 700 clamp(1.25rem, 3vw, 2rem)/1 var(--display); font-variant-numeric: tabular-nums; text-shadow: 0 0 var(--space-4) color-mix(in srgb, var(--winter-ice, var(--role)) 35%, transparent); }
.seasonal-countdown-clock span { color: var(--paper-dim); font-size: 9px; }
@keyframes seasonal-flake-fall { 0% { transform: translate3d(0,-4vh,0) rotate(0); } 100% { transform: translate3d(2vw,108vh,0) rotate(180deg); } }
@keyframes seasonal-bulb-glow { from { filter: saturate(.9) brightness(.9); } to { filter: saturate(1.2) brightness(1.18); } }
@media (prefers-reduced-motion: reduce) { .seasonal-snowflake, .seasonal-portal-bulb b { animation: none; } }

/* Website Studio: page controls, editor and device preview stay in a useful order. */
.website-studio-grid { display: grid; grid-template-columns: minmax(var(--website-tree-width), .58fr) minmax(0, 1.55fr) minmax(var(--website-inspector-width), .9fr); grid-template-areas: "pages preview editor"; align-items: start; gap: var(--space-6); }
.website-page-manager { grid-area: pages; position: sticky; top: var(--website-header-offset); min-width: 0; display: grid; align-content: start; gap: var(--space-3); padding: var(--space-4); border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--ink-glass); }
.website-page-manager > div { min-width: 0; }
.website-page-manager .website-page-tabs { display: grid; gap: var(--space-2); min-width: 0; margin: 0; }
.website-page-manager > .form-hint { margin: 0; }
.website-builder-form { grid-area: editor; position: sticky; top: var(--website-header-offset); min-width: 0; max-height: calc(100dvh - 7rem); overflow: auto; overscroll-behavior: contain; }
.website-preview-wrap { grid-area: preview; position: sticky; top: var(--website-header-offset); min-width: 0; padding: var(--space-4); border: 1px solid var(--line); border-radius: var(--radius-lg); background: linear-gradient(145deg, var(--ink-soft), var(--ink-raised)); box-shadow: var(--shadow-deep); }
.website-preview-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 13px; }
.website-preview-heading h3 { margin: 0; font: 24px/1.1 var(--display); }
.website-preview-view-controls { display: inline-flex; gap: 3px; padding: 3px; border: 1px solid var(--line); border-radius: 999px; }
.website-preview-view-controls button { padding: 6px 9px; border: 0; border-radius: 999px; background: transparent; color: var(--paper-dim); font-size: 9px; cursor: pointer; }
.website-preview-view-controls button[aria-pressed="true"] { background: rgba(255,255,255,.1); color: var(--paper); }
.website-live-preview { display: grid; min-height: 620px; place-items: stretch center; overflow: auto; padding: 18px; border: 1px solid rgba(255,255,255,.08); border-radius: 12px; background: #ece9e2; transition: max-width .25s ease; }
.website-live-preview[data-preview-device="desktop"] { max-width: 100%; }
.website-live-preview[data-preview-device="tablet"] { max-width: 820px; margin-inline: auto; }
.website-live-preview[data-preview-device="mobile"] { max-width: 430px; min-height: 680px; margin-inline: auto; }
.website-live-preview > * { width: 100%; }
.website-builder-step-heading { margin: 20px 0 14px; font: 21px/1.2 var(--display); }
.website-page-identity, .website-builder-controls { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 0 13px; }
.website-builder-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.website-builder-actions .form-hint { margin: 0; }

/* Operational pages keep their tools legible at high data density. */
.customer-tools-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); align-items: start; gap: 16px; }
.customer-tools-grid > .customer-sales-lock { grid-column: 1/-1; }
.customer-table-wrap, .data-table-wrap { background: rgba(255,255,255,.02); }
.customer-table-wrap table { min-width: 680px; }
.customer-toolbar { grid-template-columns: minmax(200px,1fr) repeat(2,minmax(140px,.38fr)); }
.customer-directory-panel { padding: var(--space-8); }
.customer-directory-actions { display: grid; grid-template-columns: minmax(220px, 1.5fr) repeat(3, minmax(135px, .75fr)); gap: var(--space-3); align-items: end; width: 100%; margin-top: var(--space-4); }
.customer-directory-actions label { min-width: 0; }
.customer-directory-actions input, .customer-directory-actions select { width: 100%; min-width: 0; }
.customer-directory-actions .small-action { width: 100%; }
.customer-directory-actions label:nth-child(5) { grid-column: 1 / 3; }
.customer-directory-actions label:nth-child(6) { grid-column: 3 / 4; }
.customer-table-sort-hint { margin: var(--space-2) 0; color: var(--paper-dim); font-size: 11px; }
.customer-pagination { display: flex; align-items: center; justify-content: flex-end; gap: var(--space-3); margin: var(--space-3) 0; }
.customer-pagination [role=status] { margin-right: auto; color: var(--paper-dim); font-size: 11px; }
.crm-sort-button { border: 0; padding: var(--space-1) var(--space-1); background: none; color: inherit; font: inherit; letter-spacing: inherit; text-transform: inherit; cursor: pointer; }
.crm-sort-button:hover, .crm-sort-button:focus-visible { color: var(--paper); }
.crm-sort-button span { display: inline-block; margin-left: var(--space-1); color: var(--role); font-size: 9px; }
.crm-record-open { border: 0; padding: 0; background: transparent; color: var(--paper); font: inherit; font-weight: 650; text-align: left; text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--role) 48%, transparent); text-underline-offset: .2em; cursor: pointer; }
.crm-record-open:hover { color: var(--gold-light); }
.customer-record-summary { margin: 0 0 var(--space-5); padding: var(--space-4); border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface-soft); }
.customer-record-summary dl { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: var(--space-3) var(--space-5); margin: 0; }
.customer-record-summary dl > div { min-width: 0; }
.customer-record-summary dt { margin-bottom: var(--space-1); color: var(--paper-dim); font-size: 9px; letter-spacing: .12em; text-transform: uppercase; }
.customer-record-summary dd { overflow-wrap: anywhere; margin: 0; color: var(--paper); font-size: 12px; }
.customer-record-summary h3 { margin: var(--space-6) 0 0; }
.customer-activity-body { min-width: 0; }
.customer-activity-body > .workspace-section-heading { align-items: center; }
.customer-activity-list { display: grid; gap: var(--space-2); }
.customer-activity-list > article { padding: var(--space-3) 0; border-bottom: 1px solid var(--line); }
.customer-activity-list time { color: var(--paper-dim); font-size: 10px; }
.dot-guide-widget { --role: var(--spark); }
.dot-guide-widget[data-state="thinking"] .tdc-dot-mark { animation: tdc-thinking 1.5s linear infinite; }
.dot-guide-widget[data-state="speaking"] .tdc-dot-mark { animation: tdc-speaking .65s ease-in-out 3 alternate; }
.dot-guide-widget[data-state="listening"] .dot-guide-launcher { box-shadow: 0 0 0 1px color-mix(in srgb, var(--role) 35%, transparent), 0 0 26px color-mix(in srgb, var(--role) 22%, transparent); }
.client-portal-page[data-portal-navigation="soft"] .client-sidebar-nav a { border-radius: var(--radius-sm); }
.client-portal-page[data-portal-navigation="neon"] .client-sidebar-nav a.is-active { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--role) 45%, transparent), 0 0 20px color-mix(in srgb, var(--role) 9%, transparent); }
.client-portal-page[data-portal-buttons="botanical"] .portal-button, .client-portal-page[data-portal-buttons="botanical"] .small-action { border-radius: 14px 14px 14px 5px; }
.client-portal-page[data-portal-buttons="neon"] .portal-button, .client-portal-page[data-portal-buttons="neon"] .small-action { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--role) 24%, transparent); }
.marketplace-category-nav, .marketplace-categories { position: sticky; z-index: 9; top: 78px; padding: 10px 0; background: rgba(8,10,12,.94); backdrop-filter: blur(12px); }
.marketplace-service-card { min-height: 235px; padding: 22px; border-radius: 17px; background: radial-gradient(ellipse at 100% 0, color-mix(in srgb, var(--gold) 7%, transparent), transparent 42%), linear-gradient(145deg, var(--surface-raised), var(--ink-soft)); }
.games-grid > *, .game-list > * { min-width: 0; }
.game-card canvas, .game-card video, .game-card iframe { display: block; width: 100%; max-width: 100%; border-radius: 12px; }
.orb-mark, .orb-icon, img.orb-inline-icon { object-fit: contain; }
.collection-theme-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; }
.collection-theme-card { position: relative; overflow: hidden; padding: 17px; border: 1px solid var(--line); border-radius: 16px; background: linear-gradient(150deg,rgba(255,255,255,.045),rgba(255,255,255,.012)); }
.collection-theme-card.is-selected { border-color: color-mix(in srgb,var(--gold) 65%,var(--line)); box-shadow: inset 0 0 0 1px color-mix(in srgb,var(--gold) 18%,transparent); }
.collection-customization { margin-block: var(--space-4); padding: var(--space-4); border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface-raised); }
.collection-customization > summary { color: var(--paper); cursor: pointer; font-weight: 650; }
.collection-customization > p { margin-block: var(--space-2); color: var(--paper-dim); }
.collection-customization-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(190px,1fr)); gap: var(--space-3); margin-top: var(--space-3); }
.collection-customization-field { display: grid; gap: var(--space-2); color: var(--paper-dim); }
.collection-customization-field select { width: 100%; min-height: 42px; padding: var(--space-2) var(--space-3); border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--ink-raised); color: var(--paper); font: inherit; }
.collection-customization-field select:focus-visible, .collection-customization > summary:focus-visible { outline: 2px solid var(--signal); outline-offset: 3px; }
.client-games-section { max-width: 1280px; }
.tdc-gamertag-form { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: end; gap: var(--space-3); margin-block: var(--space-5); padding: var(--space-5); border: 1px solid var(--line); border-radius: var(--radius-lg); background: linear-gradient(145deg,var(--surface-raised),var(--surface)); }
.tdc-gamertag-form label { display: grid; gap: var(--space-2); color: var(--paper); }
.tdc-gamertag-form input { width: 100%; min-height: 44px; padding: var(--space-2) var(--space-3); border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--ink-raised); color: var(--paper); font: inherit; }
.tdc-gamertag-form small, .tdc-gamertag-form [role="status"] { grid-column: 1 / -1; color: var(--paper-dim); }
.tdc-arcade-shell { display: grid; grid-template-columns: minmax(0,1fr) minmax(260px,.34fr); grid-template-areas: "picker picker" "machine leaderboard"; gap: var(--space-5); align-items: start; }
.tdc-game-picker { grid-area: picker; display: grid; grid-template-columns: repeat(6,minmax(0,1fr)); gap: var(--space-3); }
.tdc-game-card { display: grid; grid-template-columns: 42px minmax(0,1fr); gap: var(--space-3); align-items: center; min-height: 104px; padding: var(--space-3); border: 1px solid var(--line); border-radius: var(--radius-md); background: linear-gradient(145deg,var(--surface-raised),var(--surface)); color: var(--paper); text-align: left; cursor: pointer; transition: border-color var(--motion-fast) var(--ease-standard), transform var(--motion-fast) var(--ease-standard), background var(--motion-fast) var(--ease-standard); }
.tdc-game-card:hover, .tdc-game-card[aria-pressed="true"] { border-color: color-mix(in srgb,var(--signal) 58%,var(--line)); background: linear-gradient(145deg,color-mix(in srgb,var(--signal) 10%,var(--surface-raised)),var(--surface)); transform: translateY(-1px); }
.tdc-game-card:focus-visible, .tdc-arcade-shell button:focus-visible, .tdc-arcade-shell select:focus-visible { outline: 2px solid var(--signal); outline-offset: 3px; }
.tdc-game-glyph { display: grid; place-items: center; width: 40px; aspect-ratio: 1; border: 1px solid color-mix(in srgb,var(--signal) 38%,var(--line)); border-radius: 50%; background: color-mix(in srgb,var(--signal) 9%,var(--ink)); color: var(--signal); font-size: 22px; }
.tdc-game-copy { display: grid; gap: var(--space-1); min-width: 0; }
.tdc-game-copy b { color: var(--paper); font-family: var(--display); font-size: 14px; }
.tdc-game-copy small { color: var(--paper-dim); font-size: 11px; line-height: 1.45; }
.tdc-game-best { grid-column: 2; color: var(--signal); font-size: 10px; }
.tdc-arcade-machine, .tdc-arcade-leaderboard { min-width: 0; padding: var(--space-5); border: 1px solid var(--line); border-radius: var(--radius-lg); background: linear-gradient(155deg,var(--surface-raised),var(--surface)); box-shadow: var(--shadow-deep); }
.tdc-arcade-machine { grid-area: machine; }
.tdc-arcade-machine-head { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-4); flex-wrap: wrap; }
.tdc-arcade-machine-head > div:first-child { margin-right: auto; }
.tdc-arcade-machine-head h3, .tdc-arcade-leaderboard h3 { margin: var(--space-1) 0 0; color: var(--paper); font-family: var(--display); }
.tdc-game-score { display: grid; gap: var(--space-1); text-align: right; }
.tdc-game-score span { color: var(--paper-dim); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; }
.tdc-game-score b { color: var(--signal); font-size: 22px; font-variant-numeric: tabular-nums; }
.tdc-game-actions, .tdc-touch-controls { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--space-2); }
.tdc-game-actions .small-action { margin: 0; }
.tdc-arcade-stage { position: relative; overflow: hidden; border: 1px solid var(--line-strong); border-radius: var(--radius-md); background: var(--ink); }
.tdc-arcade-stage canvas { display: block; width: 100%; height: auto; max-height: 72vh; object-fit: contain; touch-action: none; outline: none; }
.tdc-arcade-stage canvas:focus-visible { box-shadow: inset 0 0 0 2px var(--signal); }
.tdc-game-overlay { position: absolute; inset: 0; display: grid; place-items: center; padding: var(--space-4); background: color-mix(in srgb,var(--ink) 82%,transparent); backdrop-filter: blur(4px); }
.tdc-game-overlay[hidden], .tdc-touch-controls[hidden], .tdc-touch-controls button[hidden] { display: none; }
.tdc-game-result { width: min(360px,100%); padding: var(--space-6); border: 1px solid var(--line-strong); border-radius: var(--radius-lg); background: var(--surface-raised); text-align: center; box-shadow: var(--shadow-deep); }
.tdc-game-result h4 { margin: var(--space-2) 0; color: var(--paper); font-family: var(--display); font-size: 24px; }
.tdc-game-result p { color: var(--paper-muted); line-height: 1.55; }
.tdc-game-result p b { color: var(--signal); font-size: 20px; }
.tdc-arcade-leaderboard { grid-area: leaderboard; display: grid; gap: var(--space-4); }
.tdc-leaderboard-filter { display: grid; gap: var(--space-2); color: var(--paper-dim); }
.tdc-leaderboard-filter select { min-height: 42px; padding: var(--space-2) var(--space-3); border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--ink-raised); color: var(--paper); font: inherit; }
.tdc-game-controls { display: grid; gap: var(--space-3); padding-top: var(--space-3); }
.tdc-game-controls > p { margin: 0; color: var(--paper-dim); font-size: 12px; line-height: 1.55; }
.tdc-touch-controls { justify-content: flex-start; }
.tdc-touch-controls button { min-width: 48px; min-height: 44px; padding: var(--space-2); border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--surface-raised); color: var(--paper); font: 600 10px var(--body); touch-action: manipulation; }
.tdc-touch-controls button:active { background: color-mix(in srgb,var(--signal) 18%,var(--surface-raised)); }
.tdc-game-status { min-height: 1.5em; margin: var(--space-3) 0 0; color: var(--signal); font-size: 12px; }
.tdc-score-list { display: grid; gap: var(--space-2); }
.tdc-score-list > * { display: flex; justify-content: space-between; gap: var(--space-3); padding: var(--space-3); border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); }
.tdc-arcade-shell .form-hint, .tdc-arcade-shell [role="status"] { color: var(--paper-dim); }
@media (max-width: 1050px) { .tdc-arcade-shell { grid-template-columns: minmax(0,1fr); grid-template-areas: "picker" "machine" "leaderboard"; } .tdc-game-picker { grid-template-columns: repeat(3,minmax(0,1fr)); } }
@media (max-width: 720px) { .tdc-gamertag-form { grid-template-columns: minmax(0,1fr); padding: var(--space-4); } .tdc-gamertag-form small, .tdc-gamertag-form [role="status"] { grid-column: auto; } .tdc-arcade-shell { gap: var(--space-3); } .tdc-game-picker { grid-template-columns: repeat(2,minmax(0,1fr)); gap: var(--space-2); } .tdc-game-card { grid-template-columns: 30px minmax(0,1fr); min-height: 92px; padding: var(--space-2); } .tdc-game-glyph { width: 28px; font-size: 18px; } .tdc-game-copy b { font-size: 12px; } .tdc-game-copy small { font-size: 10px; } .tdc-game-best { font-size: 9px; } .tdc-arcade-machine, .tdc-arcade-leaderboard { padding: var(--space-3); } .tdc-arcade-machine-head { align-items: flex-start; } .tdc-game-actions { width: 100%; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); } .tdc-game-actions .small-action { width: 100%; min-width: 0; } .tdc-game-score b { font-size: 20px; } .tdc-arcade-stage canvas { max-height: none; } .tdc-touch-controls { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: var(--space-2); } .tdc-touch-controls button { width: 100%; min-width: 0; min-height: 46px; } }
@media (prefers-reduced-motion: reduce) { .tdc-game-card { transition: none; } }
.theme-swatch { --preview-bg: var(--ink); --preview-surface: var(--ink-raised); --preview-accent: var(--gold); --preview-line: var(--line); display: grid; gap: var(--space-2); aspect-ratio: 1.9; overflow: hidden; padding: var(--space-3); border: 1px solid var(--preview-line); border-radius: var(--radius-md); background: var(--preview-bg); }
.theme-swatch[data-template="original"] { --preview-bg: #07111d; --preview-surface: #102235; --preview-accent: #5ccbf1; --preview-line: rgb(135 180 207 / 28%); }
.theme-swatch[data-template="moss"] { --preview-bg: #0b1718; --preview-surface: #183235; --preview-accent: #73d6bd; --preview-line: rgb(162 240 220 / 28%); }
.theme-swatch[data-template="after-hours"] { --preview-bg: #111022; --preview-surface: #242546; --preview-accent: #9b9fff; --preview-line: rgb(195 200 255 / 28%); }
.theme-swatch[data-template="winter-glow"] { --preview-bg: #111828; --preview-surface: #21334e; --preview-accent: #8bd5c1; --preview-line: rgb(192 232 255 / 32%); }
.theme-mini-header { display: flex; align-items: center; gap: var(--space-2); min-width: 0; padding-bottom: var(--space-2); border-bottom: 1px solid var(--preview-line); }
.theme-mini-header i { width: var(--space-3); aspect-ratio: 1; flex: 0 0 auto; border-radius: 50%; background: var(--preview-accent); box-shadow: 0 0 var(--space-2) color-mix(in srgb, var(--preview-accent) 55%, transparent); }
.theme-mini-header span, .theme-mini-hero > span, .theme-mini-hero > i, .theme-mini-hero div b, .theme-mini-content i { display: block; height: var(--space-1); border-radius: 99px; background: color-mix(in srgb, var(--paper) 25%, var(--preview-surface)); }
.theme-mini-header span:first-of-type { width: 22%; background: color-mix(in srgb, var(--preview-accent) 72%, var(--preview-surface)); }
.theme-mini-header span:nth-of-type(2) { width: 13%; margin-left: auto; }
.theme-mini-header span:nth-of-type(3) { width: 13%; }
.theme-mini-hero { display: grid; align-content: center; gap: var(--space-2); min-height: 0; padding: var(--space-2) var(--space-3); border: 1px solid var(--preview-line); border-radius: var(--radius-sm); background: radial-gradient(ellipse at 82% 24%, color-mix(in srgb, var(--preview-accent) 16%, transparent), transparent 45%), var(--preview-surface); }
.theme-mini-hero > i { width: 18%; background: color-mix(in srgb, var(--preview-accent) 78%, var(--preview-surface)); }
.theme-mini-hero > span { width: 46%; height: var(--space-2); background: color-mix(in srgb, var(--paper) 62%, var(--preview-surface)); }
.theme-mini-hero > span:last-of-type { width: 30%; }
.theme-mini-hero div { display: flex; gap: var(--space-2); margin-top: var(--space-1); }
.theme-mini-hero div b { width: 18%; height: var(--space-2); border-radius: var(--radius-sm); background: var(--preview-accent); }
.theme-mini-hero div b + b { border: 1px solid var(--preview-line); background: transparent; }
.theme-mini-content { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: var(--space-2); }
.theme-mini-content i { height: var(--space-3); border: 1px solid var(--preview-line); background: linear-gradient(140deg, var(--preview-surface), color-mix(in srgb, var(--preview-accent) 7%, var(--preview-bg))); }

@media (max-width: 1050px) {
  .website-studio-grid { grid-template-columns: minmax(0,1fr); grid-template-areas: "pages" "preview" "editor"; }
  .website-page-manager, .website-builder-form, .website-preview-wrap { position: static; max-height: none; }
  .website-live-preview { min-height: 520px; }
  .customer-directory-actions { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .customer-directory-actions label:first-child { grid-column: 1 / -1; }
  .customer-directory-actions label:nth-child(5), .customer-directory-actions label:nth-child(6) { grid-column: auto; }
}
@media (max-width: 720px) {
  .website-studio-grid { gap: 12px; }
  .website-page-manager { gap: 9px; }
  .website-page-manager > .small-action { order: 2; }
  .website-page-manager .website-page-tabs { order: 3; flex-basis: 100%; }
  .website-builder-controls, .website-page-identity, .customer-tools-grid, .collection-theme-grid, .collection-customization-grid { grid-template-columns: 1fr; }
  .customer-tools-grid > .customer-sales-lock { grid-column: auto; }
  .website-preview-wrap { padding: 10px; }
  .website-preview-heading { align-items: flex-start; flex-direction: column; }
  .website-live-preview { min-height: 430px; padding: 9px; }
  .website-live-preview[data-preview-device="mobile"] { min-height: 560px; }
  .marketplace-category-nav, .marketplace-categories { top: 65px; overflow-x: auto; flex-wrap: nowrap; }
  .customer-directory-actions { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .customer-directory-actions label:first-child { grid-column: 1 / -1; }
  .customer-directory-actions label:nth-child(5), .customer-directory-actions label:nth-child(6) { grid-column: auto; }
  .customer-pagination { justify-content: space-between; flex-wrap: wrap; }
  .customer-pagination [role=status] { flex: 1 0 100%; }
  .customer-record-summary dl { grid-template-columns: 1fr; }
  .theme-swatch { aspect-ratio: 1.65; }
}