/* Liquid glass theme. Loaded after crm.css; existing behavior hooks are unchanged. */
:root {
  color-scheme: dark;
  --bg: #171a1d;
  --panel: rgba(47, 51, 55, .48);
  --line: rgba(226, 235, 242, .14);
  --text: #f1f5f7;
  --muted: #b3bac1;
  --purple: #98c7ff;
  --green: #9bd5bd;
  --amber: #e6cd94;
  --red: #ffadb4;
  --glass-rim: rgba(241, 247, 252, .31);
  --glass-shadow: inset 0 1px 0 rgba(255,255,255,.18), inset 1px 0 0 rgba(255,255,255,.05), inset 0 -1px 0 rgba(255,255,255,.06), 0 10px 32px rgba(0,0,0,.13);
  font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

body { min-width: 320px; background: var(--bg); color: var(--text); font-size: 14px; }
button, input, select, textarea { font: inherit; }
button { touch-action: manipulation; }
button:disabled { cursor: default; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid #b8dcff; outline-offset: 4px; }
h1 { font-size: 30px; font-weight: 500; letter-spacing: -1px; }
h2, h3 { font-weight: 500; }
small { font-size: 11px; }
.ambient { display: none; }

/* The waves stay behind the app, with transparent glass showing their contours. */
.scene-backdrop { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; background: radial-gradient(ellipse at 2% 0%, #404347 0, transparent 50%), linear-gradient(130deg, #292d30, #131718 65%, #34393b); }
.scene-backdrop > svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.scene-orb { position: absolute; width: 88px; height: 88px; border-radius: 50%; border: 1px solid rgba(236,245,250,.2); background: radial-gradient(circle at 28% 24%, rgba(255,255,255,.14), transparent 43%), linear-gradient(145deg, rgba(255,255,255,.04), rgba(16,22,23,.22)); box-shadow: inset 1px 1px 3px rgba(255,255,255,.18), inset -2px -3px 7px rgba(255,255,255,.06), 0 12px 24px rgba(0,0,0,.11); backdrop-filter: blur(2px); }
.scene-orb.orb-one { left: 12%; top: 29%; }
.scene-orb.orb-two { right: 11%; top: 65%; width: 155px; height: 155px; }
.scene-orb.orb-three { left: 2%; bottom: 9%; width: 53px; height: 53px; }
.app-shell { position: relative; z-index: 1; display: block; min-height: 100vh; }
.main-shell { margin-left: 0; width: 100%; min-width: 0; }
.glass, .panel { border: 1px solid var(--glass-rim); background: linear-gradient(150deg, rgba(92,97,101,.27), rgba(31,36,38,.43) 52%, rgba(35,42,44,.34)); box-shadow: var(--glass-shadow); backdrop-filter: blur(20px) saturate(.86); -webkit-backdrop-filter: blur(20px) saturate(.86); }

/* Floating brand, navigation capsule, and account controls. */
.topbar { height: 100px; padding: 22px 30px 18px 100px; display: flex; align-items: center; justify-content: space-between; gap: 20px; border: 0; position: relative; z-index: 25; }
.topbar .wordmark { margin: 0; gap: 9px; font-size: 21px; letter-spacing: -.8px; font-weight: 600; flex: none; min-height: 44px; padding: 6px 12px 6px 7px; border-radius: 30px; border: 1px solid var(--glass-rim); background: linear-gradient(145deg, #ffffff14, #ffffff04); box-shadow: var(--glass-shadow); backdrop-filter: blur(16px); }
.topbar .wordmark small { display: none; }
.topbar .brand-mark { width: 29px; height: 29px; font-size: 29px; line-height: 29px; letter-spacing: -4px; color: #d2e7ff; transform: rotate(-25deg); }
.brand-mark span { color: #e9f4ff; }
.sidebar { position: static; inset: auto; display: block; width: auto; padding: 4px; border: 1px solid var(--glass-rim); border-radius: 40px; background: linear-gradient(150deg, rgba(125,131,136,.28), rgba(28,32,34,.66)); box-shadow: var(--glass-shadow); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); z-index: auto; flex: 0 1 auto; transform: none; will-change: auto; }
#navigation { display: flex; align-items: center; gap: 2px; }
.nav-item { width: auto; min-height: 35px; padding: 8px 12px; border: 1px solid transparent; border-radius: 24px; margin: 0; gap: 6px; color: #d0d6db; font-size: 11px; font-weight: 500; white-space: nowrap; transition: background .18s, color .18s, box-shadow .18s; }
.nav-item svg, .nav-divider, .nav-count { display: none; }
.nav-item:hover { background: rgba(255,255,255,.08); color: #fff; }
.nav-item.active { color: #f1f7ff; background: linear-gradient(150deg, rgba(199,215,230,.30), rgba(142,160,175,.15)); border-color: rgba(236,246,255,.16); box-shadow: inset 0 1px 2px rgba(255,255,255,.16), 0 2px 8px rgba(0,0,0,.13); }
.top-actions { gap: 8px; flex: none; }
.site-switch { gap: 7px; padding: 0 5px 0 11px; min-height: 42px; border: 1px solid var(--line); border-radius: 24px; background: #ffffff07; }
.site-switch select { width: auto; max-width: 125px; min-height: 40px; margin: 0; padding: 7px 4px; background: transparent; color: #e0e6ea; font-size: 11px; }
.topbar .top-divider { display: none; }
.icon-button { width: 36px; height: 36px; border-radius: 50%; color: #d7dfe5; }
.icon-button:hover { background: #ffffff13; }
.icon-button svg { width: 17px; height: 17px; }
.top-actions .icon-button:not(.mobile-menu) { border: 1px solid var(--line); background: #ffffff05; }
.top-actions .profile { display: inline-flex; width: auto; min-width: 36px; padding: 0; gap: 0; border: 0; background: transparent; }
.top-actions .profile > span:last-child { margin: 0; }
.avatar, .avatar.tiny { border: 1px solid rgba(231,243,255,.28); background: linear-gradient(140deg, #d1e5fb, #a3bed8); color: #283e50; border-radius: 50%; font-size: 11px; font-weight: 600; box-shadow: inset 0 1px 1px #ffffff65; }
.avatar { width: 34px; height: 34px; }
.avatar.tiny { width: 30px; height: 30px; }
.top-actions .avatar.tiny { width: 34px; height: 34px; }
.mobile-menu { display: none; }

/* Compact desktop tool dock. */
.action-rail { position: fixed; left: 22px; top: 157px; z-index: 30; display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 10px 6px; width: 51px; border: 1px solid var(--glass-rim); border-radius: 29px; background: linear-gradient(135deg, rgba(146,155,161,.20), rgba(30,36,39,.48)); box-shadow: var(--glass-shadow); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); }
.rail-button { width: 36px; height: 36px; border: 1px solid transparent; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: transparent; color: #c9d2d7; font-size: 22px; }
.rail-button svg { width: 17px; height: 17px; }
.rail-button:hover { background: #ffffff10; color: white; }
.rail-button.rail-primary { color: #193b60; border-color: #bedfff70; background: linear-gradient(145deg, #afd6ff, #8dbdf2); box-shadow: inset 0 1px 1px #ffffff65, 0 2px 12px #8bbcff33; }
.rail-divider { width: 22px; height: 1px; background: var(--line); margin: 4px 0; }
main#content { max-width: 1800px; margin: 0 auto; padding: 18px 30px 28px 100px; }
#app-footer { padding: 8px 30px 24px 100px; color: #a7b0b7; font-size: 11px; }
.page-heading { margin-bottom: 24px; align-items: center; gap: 20px; }
.page-heading p { color: var(--muted); font-size: 12px; line-height: 1.7; margin-top: 7px; }
.page-heading .eyebrow { font-size: 10px; letter-spacing: 1.5px; margin-top: 0; margin-bottom: 8px; color: #bdc8cf; }
.heading-actions, .button-row { gap: 8px; }
.period { color: #c2cbd1; font-size: 11px; }
.button { min-height: 36px; border-radius: 22px; padding: 8px 14px; font-size: 12px; border: 1px solid rgba(229,239,245,.22); background: linear-gradient(145deg, #ffffff10, #ffffff04); color: #e5edf1; box-shadow: inset 0 1px 0 #ffffff0d; }
.button:hover { background: linear-gradient(145deg, #ffffff1c, #ffffff0a); border-color: #e5f2ff5c; }
.button.primary { color: #153451; border-color: #c4e3ff70; background: linear-gradient(145deg, #b1d7ff, #91bff1); box-shadow: inset 0 1px 1px #ffffff60, 0 3px 14px #85b7f017; }
.button.primary:hover { background: linear-gradient(145deg, #c1e0ff, #a4cdff); }
.button.danger { color: var(--red); }
.button.small { min-height: 31px; font-size: 11px; }
.text-button { color: #c7e3ff; font-size: 12px; line-height: 1.6; }
.text-button:hover { color: #fff; }
.status-dot { width: 6px; height: 6px; background: var(--green); box-shadow: 0 0 8px #9bd5bd16; }

/* A title and four quiet summaries sit above the glass content panels. */
.overview-metrics { display: grid; grid-template-columns: minmax(180px, .9fr) minmax(0, 3.8fr); gap: 25px; align-items: center; margin: 0 0 24px; }
.overview-metrics .page-heading { margin: 0; }
.overview-metrics .page-heading h1 { max-width: 190px; line-height: 1.13; }
.overview-metrics .page-heading .eyebrow { display: none; }
.overview-metrics .page-heading p:not(.eyebrow) { font-size: 11px; max-width: 200px; }
.overview-metrics .stat-grid { margin: 0; gap: 18px; }
.stat-grid { gap: 16px; margin-bottom: 24px; }
.stat { padding: 19px 20px; border-radius: 18px; background: linear-gradient(145deg, #ffffff13, #ffffff04); }
.stat-head { color: #c3ccd2; font-size: 12px; margin-bottom: 12px; }
.stat-head svg { color: #d2e1ed; width: 17px; height: 17px; }
.stat-value { font-size: 27px; letter-spacing: -.7px; font-weight: 500; }
.stat-foot { font-size: 11px; color: var(--muted); gap: 6px; margin-top: 8px; flex-wrap: wrap; }
.stat-foot .highlight { color: #b4dfca; }
.overview-metrics .stat { border: 0; background: transparent; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; padding: 4px 0 4px 43px; border-radius: 0; overflow: visible; }
.overview-metrics .stat-head { font-size: 11px; margin-bottom: 6px; line-height: 1.4; }
.overview-metrics .stat-head svg { position: absolute; left: 0; top: 15px; width: 32px; height: 32px; padding: 8px; border: 1px solid #eaf6ff36; border-radius: 50%; background: linear-gradient(135deg, #ffffff15, #ffffff04); box-shadow: inset 0 1px 1px #ffffff1c; }
.overview-metrics .stat-value { font-size: 23px; letter-spacing: -.6px; }
.overview-metrics .stat-foot { font-size: 11px; line-height: 1.4; margin-top: 5px; gap: 5px; }
.overview-grid, .lower-grid { grid-template-columns: minmax(0, 1.75fr) minmax(300px, 1fr); gap: 18px; }
.lower-grid { margin-top: 18px; }
.panel { border-radius: 22px; }
.panel-header { padding: 21px 22px 17px; gap: 14px; }
.panel-header h2 { color: #eef4f7; font-size: 14px; }
.panel-header p { color: var(--muted); font-size: 11px; }
.panel-header .text-button { font-size: 11px; }
.panel-header > svg { color: #c6d8e4; }
.chart-area { padding: 0 22px 19px; }
.chart-meta { font-size: 11px; flex-wrap: wrap; gap: 12px; margin: 3px 0 15px; }
.chart-svg { height: 190px; }
.chart-axis { font-size: 10px; fill: #b2bdc6; }
.chart-grid { stroke: #eaf3ff0c; stroke-dasharray: 2 5; }
.chart-line { stroke: #9bcbff; stroke-width: 2.3; }
.chart-line.alt { stroke: #a4d8cd; }
.chart-days { color: #b7c0c7; font-size: 11px; margin-top: 10px; }
.workspace-strip { padding: 15px 22px; color: #bac4cc; font-size: 11px; border-top-color: #e3efff12; }
.workspace-strip strong { color: #e4edf4; }
.review-list { padding: 0 21px 12px; }
.review-row { padding: 14px 0; gap: 12px; }
.review-row .avatar { color: #daf0ff; background: linear-gradient(145deg, #94bcda36, #7497b61c); border-color: #badbf52d; }
.review-row .row-title { font-size: 12px; }
.review-row .row-sub { color: #b1bcc5; font-size: 11px; }
.score { color: #dbeaff; font-size: 15px; }
.score small { font-size: 11px; }
.badge { padding: 4px 8px; border-radius: 15px; font-size: 11px; background: #a1cbff15; color: #cce4ff; }
.badge.neutral { background: #ffffff0e; color: #c8d1d8; }
.badge.green { background: #a0d8b916; color: #b9e4cc; }
.badge.amber { background: #e6cd9416; color: #eddaad; }
.badge.red { background: #ffadb414; color: #ffc0c5; }

/* Website tiles echo the tinted application cards in the reference. */
.website-showcase { margin-top: 18px; }
.website-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; padding: 0 20px 20px; }
.website-tile { position: relative; min-width: 0; text-align: left; color: var(--text); padding: 20px; border: 1px solid #dceaff4a; border-radius: 17px; background: linear-gradient(135deg, rgba(123,171,222,.26), rgba(54,94,126,.18)); box-shadow: inset 0 1px 0 #ffffff24, 0 3px 12px #0000000a; transition: background .18s, border-color .18s; }
.website-tile:nth-child(2n) { background: linear-gradient(135deg, rgba(118,184,163,.24), rgba(60,111,96,.17)); }
.website-tile:nth-child(3n) { background: linear-gradient(135deg, rgba(205,175,114,.22), rgba(119,97,51,.17)); }
.website-tile:hover { border-color: #e7f4ff8c; background-color: #ffffff09; }
.website-tile .site-logo { width: 39px; height: 39px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; margin-bottom: 14px; border: 1px solid #ddecff44; background: #b9d8ff24; font-size: 12px; }
.website-tile h3, .website-tile h2 { font-size: 16px; letter-spacing: -.3px; }
.website-tile p { color: #d0dce5; font-size: 12px; margin-top: 4px; }
.website-tile .site-stats { display: flex; flex-wrap: wrap; gap: 26px; margin-top: 19px; }
.website-tile .site-stats strong { font-size: 22px; }
.website-tile .site-stats span { font-size: 11px; color: #d1dce5; }
.website-tile .tile-arrow { position: absolute; top: 20px; right: 20px; color: #deefff; }

/* Tables, pipeline and shared content. */
table { font-size: 12px; }
th { padding: 13px 22px; font-size: 11px; letter-spacing: .35px; color: #b6c3ce; background: #00000008; }
td { padding: 15px 22px; border-color: #e0eaff10; }
tbody tr:hover { background: #ffffff05; }
.contact-cell { gap: 11px; }
.contact-cell strong { font-size: 12px; }
.contact-cell small { color: #b2bec8; font-size: 11px; }
.site-name { color: #c0cbd4; font-size: 11px; }
.mini-funnel { padding: 3px 22px 17px; }
.funnel-row { grid-template-columns: 78px 1fr 25px; font-size: 11px; margin: 18px 0; }
.funnel-row > span:first-child { color: #b8c4cd; }
.funnel-track { height: 5px; background: #ffffff0b; }
.funnel-bar { background: linear-gradient(90deg, #80a7ca, #b3d8ff); }
.funnel-count { color: #d3dde6; }
.toolbar { gap: 12px; margin-bottom: 20px; }
.search-input { max-width: 340px; margin-top: 0; min-height: 42px; border-radius: 22px; padding-left: 17px; }
.count-note { color: #bcc7cf; font-size: 11px; }
.segmented { border-radius: 25px; background: #ffffff07; }
.segmented button { min-height: 32px; border-radius: 20px; font-size: 11px; color: #bcc8d2; }
.segmented button.active { background: #ffffff18; color: #f1f7fb; }
.kanban { grid-template-columns: repeat(6, minmax(218px, 1fr)); gap: 13px; padding: 1px 1px 16px; scrollbar-width: thin; scrollbar-color: #9eafb85c transparent; }
.kanban-column { border-radius: 19px; padding: 14px; min-height: 480px; background: linear-gradient(145deg, #ffffff10, #ffffff04); border-color: #d7e7f323; box-shadow: inset 0 1px 0 #ffffff10; backdrop-filter: blur(12px); }
.column-header { font-size: 12px; margin: 0 0 8px; }
.column-header .count { color: #c0cbd3; font-size: 11px; padding: 0 5px; border: 1px solid #ffffff20; border-radius: 10px; }
.column-value { color: #b5c1ca; font-size: 11px; margin-bottom: 17px; }
.lead-card { padding: 14px; border: 1px solid #e0efff2e; border-radius: 13px; background: linear-gradient(145deg, rgba(158,174,188,.21), rgba(93,108,120,.15)); box-shadow: inset 0 1px 0 #ffffff13, 0 4px 12px #00000008; }
.lead-card:hover { border-color: #c6e1ff70; }
.lead-card .company { font-size: 13px; color: #f2f6fa; }
.lead-card p, .lead-card .source { color: #bcc7d0; font-size: 11px; }
.lead-card .card-bottom { color: #d3e0e9; font-size: 11px; }
.drop-active { outline: 1px dashed #b0d8ff; background: #acd4ff10; }
.empty { padding: 36px 23px; font-size: 13px; }
.empty h3 { color: #e0ebf2; font-size: 15px; }
.empty p { line-height: 1.7; }

.audit-grid, .site-grid { gap: 18px; }
.audit-card, .website-card, .flow-card, .settings-section, .calendar-panel { border-radius: 21px; }
.audit-card .domain, .website-card p, .flow-card p, .settings-section p { font-size: 12px; }
.audit-card .excerpt { color: #c0cbd4; font-size: 12px; min-height: 63px; }
.audit-footer { font-size: 12px; gap: 15px; }
.score-ring { border-color: #b4d9ff32; border-top-color: #afd7ff; border-right-color: #afd7ff; color: #e7f3ff; }
.section-note { color: #c0ceda; background: #bedfff07; border: 1px solid #d6eaff1a; border-radius: 14px; padding: 14px 17px; font-size: 12px; line-height: 1.65; }
.pill-tabs { gap: 8px; }
.pill-tabs button { min-height: 35px; font-size: 12px; color: #c5d0d8; background: #ffffff05; }
.pill-tabs button.active { color: #d9ecff; border-color: #c7e2ff50; background: #b2d7ff18; }
.flow-card h2 { margin-top: 17px; }
.flow-mini { width: 37px; height: 37px; background: #b7d9ff10; border-color: #b8d9fa30; color: #c0ddfa; border-radius: 11px; }
.flow-arrow { color: #a4b9ca; }
.flow-preview { gap: 9px; flex-wrap: wrap; }
.website-card .site-logo { border-radius: 13px; }
.website-card .site-stats span { font-size: 11px; }
.add-website { border-color: #d3e5f34d; background: #bfdfff06; color: #cddce6; }
.add-website .plus { color: #c1def9; }
.add-website p { color: #afc0cd; font-size: 12px; }
.activity-item { font-size: 12px; padding: 16px 22px; }
.activity-item small { font-size: 11px; }
.settings-row { font-size: 12px; }
.settings-row small { font-size: 11px; }

/* Workflow canvas and inspector use the same material as the board. */
.builder { grid-template-columns: 200px minmax(300px, 1fr) 250px; gap: 17px; }
.palette, .flow-inspector { border-radius: 18px; padding: 20px; }
.palette p, .flow-inspector p { font-size: 11px; color: #b9c8d4; }
.palette-item { border-radius: 12px; min-height: 43px; font-size: 12px; background: #ffffff05; border-color: #d8eaff21; }
.palette-item:hover { background: #ffffff0d; }
.palette-item svg { color: #afd5ff; }
.flow-canvas { background-color: #101a202e; background-image: radial-gradient(#ddefff19 1px, transparent 1px); border-color: #d4eaff24; border-radius: 21px; }
.flow-node { max-width: 360px; border-radius: 16px; background: linear-gradient(145deg, rgba(90,110,125,.64), rgba(48,63,76,.77)); border-color: #d4eaff37; box-shadow: inset 0 1px 0 #ffffff1c, 0 7px 20px #00000013; padding: 17px; }
.flow-node.selected { border-color: #b1d8ffa6; box-shadow: inset 0 1px 0 #e3f4ff21, 0 0 0 2px #acd7ff12; }
.flow-node small { font-size: 10px; color: #bacbd8; }
.flow-node strong { font-size: 13px; }
.flow-node p { font-size: 11px; color: #c4d2dd; }
.node-icon { background: #bedfff13; color: #c1e0ff; border-radius: 10px; }
.node-connector { background: #bbdfff43; }
.node-connector:after { color: #bedcff; }
.flow-end { color: #c0d2df; font-size: 11px; background: #d4eaff06; }

/* Readable controls and accessible native dialogs. */
label { font-size: 12px; color: #d1dce4; }
input, select, textarea { font-size: 13px; color: #edf4f8; border-radius: 11px; border-color: #d7e6f229; background: #07121c2b; padding: 11px 12px; }
input::placeholder, textarea::placeholder { color: #a9b8c4; opacity: 1; }
select option { background: #293640; color: #edf5fc; }
input[type=checkbox] { width: 16px; height: 16px; accent-color: #a9d1ff; }
input[type=color] { height: 44px; }
textarea { line-height: 1.75; }
.check-label { font-size: 12px; color: #c6d3dd; }
.help { font-size: 11px; color: #b2c3d0; line-height: 1.75; }
.error { color: #ffb9c1; font-size: 13px; }
.success { color: #b2e0c8; }
.form-actions { gap: 9px; }
dialog { border: 1px solid #e5f3ff4a; border-radius: 25px; background: linear-gradient(145deg, rgba(66,78,89,.96), rgba(30,42,52,.97)); box-shadow: inset 0 1px 0 #ffffff27, 0 30px 100px #00000075; padding: 25px 30px 30px; color: #f1f6fa; }
dialog::backdrop { background: #08131e99; backdrop-filter: blur(9px); }
.modal-top { margin-bottom: 12px; }
.modal-top .eyebrow { color: #c0d1df; font-size: 11px; }
#modal-content h1 { font-size: 26px; line-height: 1.25; }
#modal-content > .muted { color: #c3d1dc; font-size: 13px; }
.detail-stat { font-size: 12px; padding: 10px 0; flex-wrap: wrap; }
.detail-stat > span { overflow-wrap: anywhere; }
.review-copy { background: #0715212e; border-color: #cce7ff25; color: #e0eaf2; border-radius: 15px; font-size: 13px; line-height: 1.85; }
.email-preview { border: 1px solid #f2f7ff55; border-radius: 17px; background: #f1f5f7; padding: 27px; box-shadow: inset 0 1px 0 white; }
.email-preview .mail-brand { color: #496b8c; font-size: 13px; }
.email-preview h3 { color: #273a4c; }
.email-preview .mail-body { color: #45586a; font-size: 13px; }
.token-list { gap: 7px; }
.token-list button { min-height: 30px; padding: 5px 8px; font-size: 11px; border-radius: 8px; color: #cee6ff; border-color: #b9ddff2b; background: #bfdfff09; }
.key-box { color: #dbeeff; background: #08162142; border-color: #bedfff36; border-radius: 14px; font-size: 12px; }
code { color: #c6e3ff; font-size: 12px; }
#toast { background: linear-gradient(145deg, #40566aee, #263e53f5); border-color: #cce6ff4f; border-radius: 25px; box-shadow: inset 0 1px 0 #ffffff20, 0 12px 40px #00000042; backdrop-filter: blur(20px); color: #edf7ff; padding: 13px 22px; font-size: 13px; }

.calendar-panel { padding: 24px; }
.calendar-toolbar h2 { font-size: 18px; }
.calendar-toolbar .muted { color: #bccbd6; font-size: 12px; }
.calendar-weekday { font-size: 11px; color: #c4d2dd; background: #ffffff05; }
.calendar-day { min-height: 110px; font-size: 12px; color: #c4d1dc; background: #ffffff02; padding: 10px; }
.calendar-day.outside { opacity: .44; }
.calendar-day.today > .day-number { background: #a9d1ff; color: #183b5c; width: 25px; height: 25px; }
.calendar-event { font-size: 11px; background: #aad4ff18; color: #deefff; border-left-color: #b1d7ff; padding: 6px; border-radius: 5px; }
.calendar-agenda { margin-top: 18px; }
.calendar-agenda .activity-item { flex-wrap: wrap; gap: 12px; }

.login-body { background: radial-gradient(ellipse at 0% 10%, #66758355, transparent 65%), radial-gradient(ellipse at 100% 90%, #344d5355, transparent 60%), #1b252b; }
.login-card { border-radius: 27px; width: 450px; padding: 42px; }
.login-card .brand-mark { color: #bddfff; }
.login-card .eyebrow { font-size: 11px; color: #bfdcff; }
.login-card > .muted { color: #bdcdd8; font-size: 13px; }
.login-card label { margin: 19px 0; }
.login-card input, .login-card .button { min-height: 44px; }
.login-note { font-size: 10px; line-height: 1.8; color: #aebfca; }
.loading-state { color: #c3d5e2; padding: 100px 20px; }

@media (min-width: 1700px) {
  .topbar { padding-left: 110px; padding-right: 42px; }
  main#content { padding-left: 110px; padding-right: 42px; }
  .nav-item { padding-left: 18px; padding-right: 18px; font-size: 12px; }
  .chart-svg { height: 220px; }
  #app-footer { padding-left: 110px; padding-right: 42px; }
}

@media (max-width: 1390px) and (min-width: 901px) {
  .topbar { padding-left: 90px; padding-right: 24px; gap: 13px; }
  .topbar .wordmark { font-size: 19px; }
  .nav-item { padding-left: 8px; padding-right: 8px; font-size: 11px; }
  .site-switch { display: flex; }
  main#content { padding-left: 90px; padding-right: 24px; }
  .overview-metrics { grid-template-columns: 170px minmax(0, 1fr); gap: 19px; }
  .overview-metrics .stat-grid { gap: 11px; }
  .overview-metrics .stat { padding-left: 0; }
  .overview-metrics .stat-head svg { display: none; }
  .overview-metrics .stat-value { font-size: 24px; }
  .builder { grid-template-columns: 180px minmax(280px, 1fr); }
  .flow-inspector { grid-column: 1 / -1; }
  #app-footer { padding-left: 90px; padding-right: 24px; }
}

@media (min-width: 901px) {
  .sidebar { visibility: visible; transform: none; }
}

@media (max-width: 1100px) and (min-width: 901px) {
  .topbar { padding-left: 90px; gap: 10px; }
  .topbar .wordmark { padding: 6px 8px; font-size: 18px; }
  .topbar .brand-mark { width: 23px; }
  .nav-item { padding-left: 8px; padding-right: 8px; font-size: 11px; }
  .top-actions { gap: 5px; }
  .top-actions .icon-button:not(.mobile-menu) { display: none; }
  .overview-grid, .lower-grid { grid-template-columns: minmax(0, 1.5fr) minmax(275px, 1fr); gap: 15px; }
  .overview-metrics { grid-template-columns: 155px minmax(0, 1fr); }
  .overview-metrics .page-heading h1 { font-size: 27px; }
  .overview-metrics .stat-value { font-size: 21px; }
  .overview-metrics .stat-foot { font-size: 11px; }
  .panel-header, .workspace-strip { padding-left: 18px; padding-right: 18px; }
  .audit-grid, .site-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  .topbar { height: 88px; padding: 20px 24px; gap: 15px; }
  .topbar .wordmark { font-size: 22px; }
  .top-actions { gap: 9px; }
  .mobile-menu { display: inline-flex; }
  .top-actions .icon-button { width: 44px; height: 44px; }
  .top-actions .icon-button:not(.mobile-menu) { display: inline-flex; }
  .top-actions .profile { min-width: 44px; min-height: 44px; justify-content: center; }
  .top-actions .profile > .avatar { display: inline-flex; }
  .top-actions > .avatar { display: none; }
  .site-switch { display: flex; min-height: 44px; }
  .site-switch select { max-width: 155px; min-height: 44px; font-size: 12px; }
  .sidebar { visibility: hidden; pointer-events: none; position: absolute; top: 78px; right: 24px; left: 24px; width: auto; padding: 12px; border-radius: 24px; background: linear-gradient(145deg, rgba(73,85,95,.97), rgba(29,43,54,.98)); transform: translateY(-5px); opacity: 0; transition: opacity .18s, transform .18s, visibility .18s; z-index: 40; }
  .sidebar.open { visibility: visible; pointer-events: auto; opacity: 1; transform: translateY(0); }
  #navigation { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .nav-item { width: 100%; min-height: 44px; padding: 11px 12px; font-size: 12px; justify-content: center; border-radius: 16px; }
  .action-rail { display: none; }
  main#content { padding: 18px 24px 26px; }
  #app-footer { padding: 8px 24px 24px; font-size: 11px; }
  .overview-metrics { grid-template-columns: 1fr; gap: 20px; margin-bottom: 22px; }
  .overview-metrics .page-heading h1 { max-width: none; font-size: 31px; }
  .overview-metrics .page-heading p:not(.eyebrow) { max-width: none; font-size: 12px; }
  .overview-metrics .stat-grid { gap: 16px; }
  .overview-metrics .stat { padding-left: 0; }
  .overview-metrics .stat-head svg { display: none; }
  .overview-metrics .stat-value { font-size: 25px; }
  .overview-grid, .lower-grid { grid-template-columns: 1fr; gap: 18px; }
  .chart-svg { height: 210px; }
  .audit-grid, .site-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .flow-list, .settings-grid, .template-layout { grid-template-columns: 1fr; }
  .builder { grid-template-columns: 170px minmax(0, 1fr); }
  .flow-inspector { grid-column: 1 / -1; }
  .button, .button.small, .icon-button, .pill-tabs button, .token-list button, .segmented button { min-height: 44px; }
  .icon-button { min-width: 44px; }
  input, select { min-height: 44px; }
  input[type=checkbox] { min-height: 0; }
  .text-button { min-height: 32px; display: inline-flex; align-items: center; }
  .calendar-panel { padding: 20px; }
  .calendar-grid { display: none; }
  .calendar-toolbar { margin-bottom: 0; gap: 12px; flex-wrap: wrap; }
  .calendar-agenda { margin-top: 18px; }
  .calendar-toolbar .button-row { gap: 7px; }
  .calendar-toolbar h2 { font-size: 17px; }
  .scene-orb.orb-two { right: -70px; }
}

@media (max-width: 600px) {
  body { font-size: 14px; }
  .topbar { height: 82px; padding: 17px 16px; gap: 8px; }
  .topbar .wordmark { font-size: 20px; min-height: 42px; padding-right: 11px; }
  .top-actions { gap: 3px; }
  .top-actions .icon-button:not(.mobile-menu) { display: none; }
  .top-actions .profile { display: none; }
  .site-switch { padding-left: 8px; padding-right: 2px; background: #ffffff05; }
  .site-switch .status-dot { display: none; }
  .site-switch select { max-width: 122px; font-size: 11px; padding-left: 4px; }
  .sidebar { top: 75px; left: 16px; right: 16px; }
  #navigation { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nav-item { font-size: 12px; }
  main#content { padding: 16px 16px 24px; }
  h1 { font-size: 28px; letter-spacing: -.8px; }
  .page-heading { flex-wrap: wrap; align-items: flex-start; margin-bottom: 20px; gap: 16px; }
  .page-heading p { font-size: 12px; }
  .page-heading .eyebrow { font-size: 10px; }
  .heading-actions { width: 100%; }
  .heading-actions .button { flex: 0 1 auto; }
  .heading-actions .period { display: none; }
  .overview-metrics { gap: 22px; }
  .overview-metrics .page-heading h1 { font-size: 30px; }
  .overview-metrics .stat-grid, .stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 16px; }
  .overview-metrics .stat { padding: 0; }
  .overview-metrics .stat-head { font-size: 12px; margin-bottom: 6px; }
  .overview-metrics .stat-value { font-size: 27px; }
  .overview-metrics .stat-foot { font-size: 11px; line-height: 1.5; }
  .stat { padding: 17px; }
  .stat-head { font-size: 11px; }
  .stat-value { font-size: 26px; }
  .stat-foot { font-size: 11px; }
  .stat-spark { display: none; }
  .panel { border-radius: 19px; }
  .panel-header { padding: 18px 17px 15px; flex-wrap: wrap; gap: 10px; }
  .panel-header h2 { font-size: 14px; }
  .panel-header p { font-size: 11px; }
  .panel-header .text-button { font-size: 11px; }
  .chart-area { padding: 0 17px 16px; }
  .chart-svg { height: 165px; }
  .chart-meta { font-size: 11px; gap: 11px; }
  .chart-days { font-size: 10px; padding-left: 18px; }
  .workspace-strip { padding: 13px 17px; gap: 9px; font-size: 11px; }
  .review-list { padding: 0 17px 8px; }
  .review-row { padding: 14px 0; }
  .review-row .row-title { font-size: 12px; }
  .review-row .row-sub { font-size: 11px; }
  .website-tiles { grid-template-columns: 1fr; padding: 0 15px 15px; gap: 12px; }
  .website-tile { padding: 18px; }
  .website-tile .site-stats { gap: 24px; }
  .table-wrap { scrollbar-width: thin; scrollbar-color: #bbd4e54a transparent; }
  th, td { padding-left: 17px; padding-right: 17px; }
  .toolbar { gap: 10px; }
  .search-input { max-width: none; width: 100%; }
  .count-note { margin-left: 0; }
  .kanban { grid-template-columns: repeat(6, 260px); gap: 12px; }
  .kanban-column { min-height: 440px; }
  .audit-grid, .site-grid, .form-grid, .detail-grid { grid-template-columns: 1fr; }
  .form-grid .span-all { grid-column: auto; }
  .audit-card, .website-card, .flow-card, .settings-section { padding: 21px; }
  .flow-preview { gap: 7px; }
  .flow-mini { width: 33px; height: 33px; }
  .flow-arrow { font-size: 11px; }
  .builder { grid-template-columns: 1fr; gap: 14px; }
  .palette { display: flex; flex-wrap: wrap; padding: 17px; gap: 9px; }
  .palette h3 { width: 100%; margin: 0 0 4px; }
  .palette p { display: none; }
  .palette-item { width: calc(50% - 5px); padding: 10px; margin: 0; min-height: 48px; font-size: 11px; gap: 8px; }
  .palette-item svg { flex: none; }
  .flow-canvas { padding: 23px 14px; min-height: 400px; }
  .flow-inspector { grid-column: auto; padding: 20px; }
  .flow-node { padding: 15px; }
  .flow-node p { font-size: 12px; line-height: 1.6; }
  .flow-node small { font-size: 10px; }
  .section-note { padding: 13px 15px; font-size: 12px; }
  .calendar-panel { padding: 17px; }
  .calendar-toolbar h2 { font-size: 16px; }
  .calendar-toolbar .button-row { gap: 3px; }
  .calendar-toolbar .muted { font-size: 11px; }
  .calendar-agenda .activity-item { padding: 17px; }
  .calendar-agenda .activity-item > div:nth-child(2) { flex: 1; min-width: 170px; }
  .activity-item small { overflow-wrap: anywhere; }
  .settings-row { flex-wrap: wrap; gap: 9px; }
  dialog { width: calc(100% - 24px); padding: 18px 19px 23px; border-radius: 22px; max-height: calc(100dvh - 28px); }
  #modal-content h1 { font-size: 25px; }
  .detail-grid { gap: 23px; }
  .detail-stat { gap: 8px; }
  .review-copy { padding: 17px; }
  .form-actions { margin-top: 22px; }
  .form-actions .button { flex: 0 1 auto; }
  .email-preview { padding: 22px; }
  .token-list button { min-height: 36px; }
  #app-footer { padding: 7px 16px 24px; flex-wrap: wrap; gap: 8px; font-size: 11px; line-height: 1.6; }
  #toast { bottom: 18px; width: max-content; max-width: calc(100vw - 32px); text-align: center; font-size: 12px; }
  .login-body { padding: 20px; }
  .login-card { padding: 31px 26px; }
  .scene-orb.orb-one { left: -30px; top: 40%; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none; animation: none; scroll-behavior: auto; }
}

/* Small desktop widths retain every control on two deliberate header rows. */
@media (max-width: 1250px) and (min-width: 901px) {
  .topbar { display: grid; grid-template-columns: minmax(0, 1fr) auto; height: 143px; align-content: start; row-gap: 13px; }
  .topbar .wordmark { grid-column: 1; grid-row: 1; justify-self: start; }
  .top-actions { grid-column: 2; grid-row: 1; }
  .site-switch { display: flex; }
  .sidebar { grid-column: 1 / -1; grid-row: 2; justify-self: center; }
  .nav-item { padding-left: 12px; padding-right: 12px; font-size: 11px; }
}

.menu-backdrop { display: none; }
.menu-backdrop[hidden] { display: none; }
@media (max-width: 900px) {
  .menu-backdrop:not([hidden]) { display: block; position: fixed; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; border-radius: 0; background: rgba(4, 13, 22, .47); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); z-index: 20; cursor: default; }
}
.screen-reader { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.view-enter { animation: glass-view-enter 300ms cubic-bezier(.2, .7, .25, 1) both; }
@keyframes glass-view-enter {
  from { opacity: .35; transform: translateY(7px); filter: blur(2px); }
  to { opacity: 1; transform: translateY(0); filter: blur(0); }
}
@media (prefers-reduced-motion: reduce) {
  .view-enter { animation: none; }
}

/* Dashboard refinements and semantic controls. */
.chart-summary { display:flex; align-items:baseline; gap:10px; padding:0 22px 16px; }
.chart-summary strong { font-size:32px; font-weight:500; letter-spacing:-1px; }
.chart-summary span { font-size:11px; color:var(--muted); }
button.review-row { display:flex; width:100%; text-align:left; color:inherit; background:transparent; border:0; border-bottom:1px solid #e7efff12; border-radius:0; }
.review-row .row-title, .review-row .row-sub, .review-row .score { display:block; }
.review-row .row-sub { margin-top:3px; }
.review-row:hover { background:#ffffff04; }
.lead-open { padding:0; color:inherit; text-align:left; border:0; background:transparent; font-size:12px; font-weight:600; }
.lead-open:hover { color:#b6d9ff; }
.rail-button.active { background:#bddfff17; color:#d2eaff; }
#page-title:focus { outline:none; }
/* Keep navigation and skip controls above the original responsive rules. */
.skip-link { position:fixed; top:10px; left:16px; transform:translateY(-160%); z-index:100; padding:12px 18px; background:#c8e4ff; color:#183b5c; border-radius:24px; text-decoration:none; }
.skip-link:focus { transform:translateY(0); }
@media (max-width:900px) { .top-actions .mobile-menu { display:inline-flex; } }

.calendar-mobile-agenda { display:none; margin-top:18px; }
@media (max-width:900px) { .calendar-mobile-agenda { display:block; } .calendar-agenda { display:none; } .calendar-mobile-agenda .activity-item { display:flex; flex-wrap:wrap; gap:12px; align-items:center; } .calendar-mobile-agenda .activity-item > div { flex:1; min-width:150px; } }
.overview-grid > .panel, .lower-grid > .panel { display:flex; flex-direction:column; }
.overview-grid > .panel > .workspace-strip, .lower-grid > .panel > .workspace-strip { margin-top:auto; }
/* Dedicated brand workspaces retain the approved liquid-glass design. */
.instance-monogram { width:32px; height:32px; display:inline-flex; align-items:center; justify-content:center; flex:none; border-radius:50%; border:1px solid #c7e3ff55; background:linear-gradient(145deg,#bedbff33,#8faec11c); color:#d9ecff; font-size:11px; font-weight:700; letter-spacing:0; box-shadow:inset 0 1px 1px #ffffff35; }
.login-card .instance-monogram { width:42px; height:42px; font-size:14px; }
.login-card .wordmark { gap:12px; }
.dedicated-mode .topbar .wordmark { font-size:18px; white-space:nowrap; }
.dedicated-mode .site-switch { display:none; }
.dedicated-mode .website-tiles { grid-template-columns:minmax(0,1fr); }
.dedicated-mode .website-tile { display:grid; grid-template-columns:50px minmax(140px,1fr) auto; gap:0 14px; align-items:center; padding-right:52px; }
.dedicated-mode .website-tile .site-logo { grid-row:1 / 3; margin:0; }
.dedicated-mode .website-tile h3 { grid-column:2; }
.dedicated-mode .website-tile > p { grid-column:2; }
.dedicated-mode .website-tile .site-stats { grid-column:3; grid-row:1 / 3; margin:0; min-width:230px; }
.dedicated-mode .website-tile .site-stats > div { border:0; }
.connection-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; }
.connection-heading { display:flex; align-items:center; gap:13px; margin-bottom:22px; }
.connection-heading h2 { margin:0; }
.connection-heading p { margin:4px 0 0; }
.connection-flow { margin-top:20px; }
.connection-steps { display:flex; flex-wrap:wrap; align-items:center; gap:14px; padding:3px 24px 24px; }
.connection-steps span { border:1px solid #d4e8ff2b; border-radius:24px; padding:12px 16px; font-size:12px; color:#d4e5f3; background:#c1ddff09; }
.connection-steps b { color:#a6bbcd; font-weight:400; }
.integration-list { margin-top:22px; }
.integration-row { display:flex; align-items:center; justify-content:space-between; gap:18px; border-bottom:1px solid #ffffff15; padding:18px 0; }
.integration-row small { display:block; color:var(--muted); margin-top:6px; line-height:1.7; }
.integration-row > div { min-width:0; overflow-wrap:anywhere; }
.key-label { display:block; margin-top:18px; margin-bottom:7px; font-size:12px; color:var(--muted); }
.key-box { overflow-wrap:anywhere; }
body[data-brand="google-ranker-pro"] .instance-monogram { background:linear-gradient(145deg,#c5f0df30,#7fa79815); border-color:#c6efdf55; color:#d5f4e7; }
@media(max-width:900px) { .connection-grid { grid-template-columns:1fr; } .dedicated-mode .topbar .wordmark { font-size:19px; } }
@media(max-width:600px) { .dedicated-mode .website-tile { grid-template-columns:43px minmax(0,1fr); gap:0 10px; padding:18px; } .dedicated-mode .website-tile .site-stats { grid-column:1 / -1; grid-row:3; margin-top:22px; min-width:0; } .dedicated-mode .website-tile h3 { padding-right:15px; } .connection-steps { flex-direction:column; align-items:stretch; padding:0 18px 20px; gap:8px; } .connection-steps b { align-self:center; transform:rotate(90deg); } .integration-row { flex-wrap:wrap; } }