@font-face{ font-family:'Bogue'; src:url('/fonts/bogue-regular.woff2') format('woff2'); font-weight:100 900; font-style:normal; font-display:swap; }
/* The headline font is Bogue (the file you gave me). Only a Regular weight exists, so the one face covers every weight and nothing is faux-bolded. Fraunces stays as the fallback. */
/* PROTOTYPE V2: the landing page's design language (soft serif headings, calm warm colours, rounded shapes, mono labels, purple accent)
   applied on top of the real app, in BOTH themes. Only prototype-v2.html loads this file; the live app does not. Everything is scoped to html.proto-v2.
   Light = warm off-white with black buttons. Dark = warm near-black with off-white buttons. */

/* ---------- colours: light ---------- */
html.proto-v2 body.theme-light{
  --bg:#faf9f6; --surface:#ffffff; --surface-2:#f4f2ec; --border:#e6e3da; --border-soft:#eeebe3; --chart-grid:rgba(31,30,29,.06);
  --text:#1f1e1d; --text-muted:#5d5b56; --text-dim:#8a867d;
  --lime-rgb:81,80,246; --lime:#5150f6; --lime-text:#5150f6; --lime-dim:#4544d1; --lime-wash:rgba(81,80,246,.10);
  --pd-rgb:81,80,246; --pd-a855f7:#5150f6; --pd-af5aff:#5150f6; --pd-c084fc:#7978f8; --pd-6d28d9:#4544d1; --pd-8846c6:#4544d1;
  --v2-ink:#1f1e1d; --v2-on-ink:#ffffff; --v2-ink-hover:#000000; --v2-line-strong:#d3cfc4; --v2-nav-text:#3a3833; --v2-nav-hover:#f4f2ec; --v2-nav-active-bg:#eeeefb; --v2-nav-active-text:#4544d1;
  --v2-bar-bg:rgb(250,249,246); --v2-input-bg:#ffffff;
}
/* ---------- colours: dark ---------- */
html.proto-v2 body:not(.theme-light){
  --bg:#0e0d0c; --surface:#1b1a19; --surface-2:#232221; --border:#2c2824; --border-soft:#232019; --chart-grid:rgba(255,255,255,.05);
  --text:#f3f0e9; --text-muted:#aba69c; --text-dim:#7b766d;
  --lime-rgb:121,120,248; --lime:#7978f8; --lime-text:#a5a4fa; --lime-dim:#5150f6; --lime-wash:rgba(121,120,248,.12);
  --pd-rgb:121,120,248; --pd-a855f7:#7978f8; --pd-af5aff:#7978f8; --pd-c084fc:#a5a4fa; --pd-6d28d9:#5150f6; --pd-8846c6:#4544d1;
  --v2-ink:#f3f0e9; --v2-on-ink:#14120f; --v2-ink-hover:#ffffff; --v2-line-strong:#3a352f; --v2-nav-text:#c9c4ba; --v2-nav-hover:#232221; --v2-nav-active-bg:rgba(121,120,248,.16); --v2-nav-active-text:#a5a4fa;
  --v2-bar-bg:rgb(14,13,12); --v2-input-bg:#1b1a19;
}
html.proto-v2 body{
  --radius:12px;
  --font-serif:'Fraunces','P22 Mackinac',Georgia,serif; --font-display:'Fraunces',Georgia,serif; --font-mono:'Fira Code',ui-monospace,monospace;
  background:var(--bg); color:var(--text); -webkit-font-smoothing:antialiased;
}

/* ---------- soft serif headings (both themes) ---------- */
html.proto-v2 h1, html.proto-v2 h2,
html.proto-v2 .dash-page-title, html.proto-v2 .ai-expand-title, html.proto-v2 .ai-greeting, html.proto-v2 .tpl-modal-title,
html.proto-v2 .chartb-title, html.proto-v2 .plans-hero-title, html.proto-v2 .section-title, html.proto-v2 .rtd-metric b{
  font-family:var(--font-serif); font-variation-settings:'opsz' 28,'SOFT' 100,'WONK' 0; font-optical-sizing:none; font-weight:450; letter-spacing:-.01em; color:var(--text);
}
html.proto-v2 .dash-page-title{ font-size:32px; }
html.proto-v2 .ai-expand-title{ font-size:34px; line-height:1.15; }
html.proto-v2 h1{ font-size:30px; }

/* ---------- sidebar and top bar ---------- */
html.proto-v2 .sidebar{ background:var(--surface); border-right:1px solid var(--border); }
html.proto-v2 .topbar{ background:var(--v2-bar-bg); border-bottom:1px solid var(--border); }
html.proto-v2 .nav-item{ border-radius:9px; color:var(--v2-nav-text); }
html.proto-v2 .nav-item:hover:not(.active){ background:var(--v2-nav-hover); color:var(--text); }
html.proto-v2 body .nav-item.active{ background:var(--v2-nav-active-bg); color:var(--v2-nav-active-text); }
html.proto-v2 body .nav-item.active::before{ background:var(--lime); }
html.proto-v2 .nav-section-label, html.proto-v2 .nav-group-label{ font-family:var(--font-mono); font-size:10.5px; letter-spacing:.09em; color:var(--text-dim); }

/* ---------- buttons: "ink" primary (black in light, off-white in dark), outlined secondary ---------- */
html.proto-v2 .btn-primary-lime, html.proto-v2 body .btn-primary-lime{
  background:var(--v2-ink) !important; color:var(--v2-on-ink) !important; border:1px solid var(--v2-ink); border-radius:9px; box-shadow:none; filter:none; font-weight:500;
}
html.proto-v2 .btn-primary-lime:hover{ background:var(--v2-ink-hover) !important; filter:none; }
html.proto-v2 .btn-primary-lime svg{ stroke:var(--v2-on-ink) !important; }
html.proto-v2 .btn-outline{ background:var(--surface); border:1px solid var(--v2-line-strong); color:var(--text); border-radius:9px; box-shadow:none; }
html.proto-v2 .btn-outline:hover{ border-color:var(--v2-ink); background:var(--surface); }
html.proto-v2 .ai-send-btn, html.proto-v2 .ai-expand-send, html.proto-v2 .na-send-btn{ background:var(--v2-ink) !important; border-color:var(--v2-ink) !important; }
html.proto-v2 .ai-send-btn svg, html.proto-v2 .ai-expand-send svg, html.proto-v2 .na-send-btn svg{ stroke:var(--v2-on-ink) !important; }

/* ---------- cards, inputs ---------- */
html.proto-v2 .rtd-card, html.proto-v2 .dv-card, html.proto-v2 .tpl-card, html.proto-v2 .int-card, html.proto-v2 .plan-tier, html.proto-v2 .chartb-card{
  background:var(--surface); border:1px solid var(--border); border-radius:14px; box-shadow:none;
}
html.proto-v2 input, html.proto-v2 select, html.proto-v2 textarea{ border-radius:9px; }
html.proto-v2 input[type=text], html.proto-v2 input[type=search], html.proto-v2 input[type=email], html.proto-v2 input[type=password], html.proto-v2 textarea{
  background:var(--v2-input-bg); border-color:var(--v2-line-strong); color:var(--text);
}
/* A text input that sits bare inside a bordered box (the sidebar search, the Dot AI chat boxes) is not a field of its own: the box draws the field. The filled, rounded
   look above would paint a small darker pill inside the box and its rounded ends would clip the first / last letters, so these keep no fill and square ends. */
html.proto-v2 :is(.sidebar-search-input, .ai-input-box input, .ai-expand-input-box input){ background:none; border-radius:0; text-overflow:ellipsis; }
html.proto-v2 .nav-badge, html.proto-v2 .smart-dashboard-beta{ font-family:var(--font-mono); letter-spacing:.05em; }
/* Text-selection colour. Written for body only (the selection colour passes down to everything inside it): a "body ::selection" rule makes the browser work out a selection style for every one of the page's ~10,000 elements each time the layout changes, which made opening the side panel twice as slow. */
html.proto-v2 body.theme-light::selection{ background:#d4d4fd; }
html.proto-v2 body:not(.theme-light)::selection{ background:#302fa3; }

/* ---------- the "prototype" tag ---------- */
.proto-badge{ position:fixed; left:50%; transform:translateX(-50%); top:15px; z-index:99999; padding:6px 12px; border-radius:999px; background:#1f1e1d; color:#fff; border:1px solid rgba(255,255,255,.18);
  font:500 10.5px/1 'Fira Code',monospace; letter-spacing:.06em; text-transform:uppercase; text-decoration:none; opacity:.92; }
.proto-badge:hover{ opacity:1; background:#000; }

/* ---------- loading screens (colours are written out, not variables: the page-load screen shows before the theme class is on <body>) ---------- */
html.proto-v2 #pdBootLoader{ background:#0e0d0c; color:#f3f0e9; font-family:'Inter',system-ui,sans-serif; }
html.proto-v2.pd-boot-light #pdBootLoader{ background:#faf9f6; color:#1f1e1d; }
html.proto-v2 .pd-boot-ring{ border-width:2px; border-color:rgba(121,120,248,.22); border-top-color:#7978f8; }
html.proto-v2.pd-boot-light .pd-boot-ring{ border-color:rgba(81,80,246,.16); border-top-color:#5150f6; }
html.proto-v2 .pd-boot-name{ font-family:'Fraunces',Georgia,serif; font-variation-settings:'opsz' 28,'SOFT' 100,'WONK' 0; font-optical-sizing:none; font-weight:450; font-size:26px; letter-spacing:-.01em; }
html.proto-v2 .pd-boot-sub{ font-family:'Fira Code',ui-monospace,monospace; font-size:11px; letter-spacing:.06em; text-transform:uppercase; opacity:.55; }
html.proto-v2 .pd-boot-bar{ height:2px; background:rgba(121,120,248,.18); }
html.proto-v2 .pd-boot-bar i{ background:#7978f8; }
html.proto-v2.pd-boot-light .pd-boot-bar{ background:rgba(81,80,246,.14); }
html.proto-v2.pd-boot-light .pd-boot-bar i{ background:#5150f6; }

/* the screen shown while another app opens */
html.proto-v2 .app-loading{ background:var(--bg); }
html.proto-v2 .app-loading-card img{ filter:none; }
html.proto-v2 .app-loading-name small{ font-family:var(--font-serif); font-variation-settings:'opsz' 28,'SOFT' 100,'WONK' 0; font-optical-sizing:none; font-size:15px; letter-spacing:-.01em; font-weight:450; text-transform:none; color:var(--text); }
html.proto-v2 .app-loading-name b{ font-family:var(--font-serif); font-variation-settings:'opsz' 28,'SOFT' 100,'WONK' 0; font-optical-sizing:none; font-weight:450; letter-spacing:-.01em; color:var(--text); }
html.proto-v2 .app-loading-bar{ height:2px; background:var(--lime-wash); }
html.proto-v2 .app-loading-bar i{ background:var(--lime); }
html.proto-v2 .app-loading-card span{ font-family:var(--font-mono); font-size:11px; letter-spacing:.04em; }

/* grey placeholder shapes while data loads: softer, rounder, warm */
html.proto-v2 .raa-skel{ border-radius:8px;
  background:linear-gradient(90deg,var(--surface-2) 25%,var(--border-soft) 50%,var(--surface-2) 75%); background-size:200% 100%; }
html.proto-v2 .ws-loading, html.proto-v2 .dc-loading{ font-family:var(--font-mono); font-size:12px; letter-spacing:.03em; color:var(--text-dim); }


/* =====================================================================================================================
   NO GLASS (both themes): every surface is a plain solid colour with a thin border. No blur, no see-through fills,
   no bright top rim, no glow, no glass-bead icon buttons. The ":not(#fa):not(#fb)" parts only raise the rule's weight
   so it beats the older glass rules in style.css, including the ones that are tied to a single page.
   ===================================================================================================================== */
html.proto-v2 *, html.proto-v2 *::before, html.proto-v2 *::after{ backdrop-filter:none !important; -webkit-backdrop-filter:none !important; }
html.proto-v2 body:not(#fa):not(#fb) .ai-drawer,
html.proto-v2 body:not(#fa):not(#fb) .ai-drawer-footer,
html.proto-v2 body:not(#fa):not(#fb) .account-card,
html.proto-v2 body:not(#fa):not(#fb) .perm-modal,
html.proto-v2 body:not(#fa):not(#fb) .ai-expand-window,
html.proto-v2 body:not(#fa):not(#fb) .ai-expand-sidebar,
html.proto-v2 body:not(#fa):not(#fb) .nav-help-toggle,
html.proto-v2 body:not(#fa):not(#fb) .int-search,
html.proto-v2 body:not(#fa):not(#fb) .sidebar{ background:var(--surface) !important; border-color:var(--border) !important; box-shadow:none !important; }
html.proto-v2 body:not(#fa):not(#fb) .topbar{ background:var(--bg) !important; border-color:var(--border) !important; box-shadow:none !important; }
html.proto-v2 body:not(#fa):not(#fb) .ai-input-box,
html.proto-v2 body:not(#fa):not(#fb) .na-input-box{ background:var(--v2-input-bg) !important; border-color:var(--v2-line-strong) !important; box-shadow:none !important; }
html.proto-v2 body:not(#fa):not(#fb) .dash-card,
html.proto-v2 body:not(#fa):not(#fb) .chart-card,
html.proto-v2 body:not(#fa):not(#fb) .plan-tier,
html.proto-v2 body:not(#fa):not(#fb) .int-card,
html.proto-v2 body:not(#fa):not(#fb) .comm-card,
html.proto-v2 body:not(#fa):not(#fb) .dv-card,
html.proto-v2 body:not(#fa):not(#fb) .dv-kpi-card,
html.proto-v2 body:not(#fa):not(#fb) .dv-kpi-add-card,
html.proto-v2 body:not(#fa):not(#fb) .amz-kpi-row .dv-kpi-card,
html.proto-v2 body:not(#fa):not(#fb) .amz-kpi-row .dv-kpi-add-card,
html.proto-v2 body:not(#fa):not(#fb) .chartb-preview-card,
html.proto-v2 body:not(#fa):not(#fb) .dv-book-card,
html.proto-v2 body:not(#fa):not(#fb) .bkl-master-detail,
html.proto-v2 body:not(#fa):not(#fb) .bkl-bento-big,
html.proto-v2 body:not(#fa):not(#fb) .rtd-top-books-carousel > .rtd-top-book-detail--rail{ background:var(--surface) !important; border-color:var(--border) !important; border-top-color:var(--border) !important; box-shadow:none !important; }
html.proto-v2 body:not(#fa):not(#fb) .dv-back,
html.proto-v2 body:not(#fa):not(#fb) .dv-pill,
html.proto-v2 body:not(#fa):not(#fb) .na-mode-pill,
html.proto-v2 body:not(#fa):not(#fb) .na-quick-pill,
html.proto-v2 body:not(#fa):not(#fb) .ai-suggestion,
html.proto-v2 body:not(#fa):not(#fb) .ai-ask-chip,
html.proto-v2 body:not(#fa):not(#fb) .claude-badge{ background:var(--surface) !important; border-color:var(--border) !important; border-top-color:var(--border) !important; box-shadow:none !important; }
html.proto-v2 body:not(#fa):not(#fb) .dv-icon-btn,
html.proto-v2 body:not(#fa):not(#fb) .dv-kpi-icon,
html.proto-v2 body:not(#fa):not(#fb) .tpl-card-icon,
html.proto-v2 body:not(#fa):not(#fb) .tpl-blank-icon,
html.proto-v2 body:not(#fa):not(#fb) .na-input-plus,
html.proto-v2 body:not(#fa):not(#fb) .na-showcase-icon,
html.proto-v2 body:not(#fa):not(#fb) .ai-settings-btn,
html.proto-v2 body:not(#fa):not(#fb) .ai-sug-icon{ background:var(--surface-2) !important; border-color:var(--border) !important; color:var(--lime-text) !important; box-shadow:none !important; }
html.proto-v2 body:not(#fa):not(#fb) .dv-icon-btn svg,
html.proto-v2 body:not(#fa):not(#fb) .dv-kpi-icon svg,
html.proto-v2 body:not(#fa):not(#fb) .tpl-card-icon svg,
html.proto-v2 body:not(#fa):not(#fb) .tpl-blank-icon svg,
html.proto-v2 body:not(#fa):not(#fb) .na-input-plus svg,
html.proto-v2 body:not(#fa):not(#fb) .na-showcase-icon svg,
html.proto-v2 body:not(#fa):not(#fb) .ai-settings-btn svg,
html.proto-v2 body:not(#fa):not(#fb) .ai-sug-icon svg{ filter:none !important; }
html.proto-v2 body:not(#fa):not(#fb) .dv-pill svg,
html.proto-v2 body:not(#fa):not(#fb) .na-mode-pill svg,
html.proto-v2 body:not(#fa):not(#fb) .na-quick-pill svg,
html.proto-v2 body:not(#fa):not(#fb) .ai-ask-chip svg,
html.proto-v2 body:not(#fa):not(#fb) .ai-sug-icon svg{ filter:none !important; }
html.proto-v2 body:not(#fa):not(#fb) .ai-send-btn,
html.proto-v2 body:not(#fa):not(#fb) .na-send-btn,
html.proto-v2 body:not(#fa):not(#fb) .ai-expand-send{ background:var(--v2-ink) !important; border-color:var(--v2-ink) !important; color:var(--v2-on-ink) !important; box-shadow:none !important; }
html.proto-v2 body:not(#fa):not(#fb) .profile-dropdown,
html.proto-v2 body:not(#fa):not(#fb) .pd-submenu,
html.proto-v2 body:not(#fa):not(#fb) .nav-submenu,
html.proto-v2 body:not(#fa):not(#fb) .date-range-popover,
html.proto-v2 body:not(#fa):not(#fb) .dv-kpi-info-tip{ background:var(--surface) !important; border-color:var(--border) !important; box-shadow:none !important; }
html.proto-v2 body:not(#fa):not(#fb) .btn-primary-lime, html.proto-v2 body:not(#fa):not(#fb) .btn-primary-lime:hover{ box-shadow:none !important; }
html.proto-v2 body:not(#fa):not(#fb) .btn-outline:hover{ border-color:var(--v2-ink) !important; }
html.proto-v2 .dv-kpi-card:hover, html.proto-v2 .dv-card:hover{ box-shadow:none; }

/* =====================================================================================================================
   AI SIDE CHAT, in the new style: warm solid surface, serif greeting, outlined rounded suggestion cards, a roomy rounded
   input with a dark send button. Same layout and behaviour as before.
   ===================================================================================================================== */
html.proto-v2 .ai-drawer{ border-left:1px solid var(--border); }
html.proto-v2 .ai-drawer-header{ height:60px; padding:0 18px; background:var(--surface); border-bottom:1px solid var(--border); }
html.proto-v2 .ai-drawer-title{ gap:11px; }
html.proto-v2 .ai-drawer-title .dot{ width:8px; height:8px; background:var(--lime); box-shadow:0 0 0 3px var(--lime-wash); }
html.proto-v2 .ai-drawer-name{ font-family:var(--font-serif); font-variation-settings:'opsz' 28,'SOFT' 100,'WONK' 0; font-optical-sizing:none; font-weight:450; font-size:19px; letter-spacing:-.01em; }
html.proto-v2 .ai-drawer-sub{ font-family:var(--font-mono); font-size:10px; letter-spacing:.09em; text-transform:uppercase; color:var(--text-dim); }
html.proto-v2 .ai-drawer-actions{ gap:6px; }
html.proto-v2 .ai-drawer-actions svg{ width:30px; height:30px; padding:7px; border-radius:9px; }
html.proto-v2 .ai-drawer-actions svg:hover{ background:var(--surface-2); }
html.proto-v2 .ai-drawer-body{ background-image:none; padding:30px 22px 18px; }
html.proto-v2 .ai-greeting{ font-family:var(--font-serif); font-variation-settings:'opsz' 28,'SOFT' 100,'WONK' 0; font-optical-sizing:none; font-weight:450; font-size:30px; line-height:1.15; letter-spacing:-.015em; margin-bottom:6px; }
html.proto-v2 .ai-subgreeting{ font-size:14px; color:var(--text-muted); margin-bottom:26px; }
html.proto-v2 .ai-suggestions{ gap:10px; padding:0; }
html.proto-v2 .ai-suggestion{ width:100%; height:auto; min-height:58px; padding:11px 14px; gap:12px; border-radius:14px; transform:none; }
html.proto-v2 .ai-suggestion::before{ display:none; }
html.proto-v2 .ai-suggestion:hover{ transform:none; border-color:var(--v2-ink) !important; box-shadow:none; }
html.proto-v2 .ai-suggestion .ai-sug-icon{ width:34px; height:34px; flex:0 0 34px; border-radius:10px; border:0; }
html.proto-v2 .ai-suggestion .ai-sug-icon svg{ width:16px; height:16px; }
html.proto-v2 .ai-suggestion:hover .ai-sug-icon{ border-color:transparent; color:var(--lime-text); }
html.proto-v2 .ai-suggestion .ai-sug-title{ font-size:13.5px; font-weight:600; }
html.proto-v2 .ai-suggestion .ai-sug-desc{ font-size:12px; margin-top:2px; }
html.proto-v2 .ai-suggestion .ai-sug-arrow{ color:var(--text-dim); }
html.proto-v2 .chat-bubble{ border-radius:16px; font-size:14px; line-height:1.55; }
html.proto-v2 .chat-bubble.me{ background:var(--lime-wash); border:0; border-bottom-right-radius:6px; }
html.proto-v2 .chat-bubble.ai{ background:var(--surface-2); border:0; border-bottom-left-radius:6px; color:var(--text); }
html.proto-v2 .ai-drawer-footer{ padding:14px 18px 18px; border-top:1px solid var(--border); }
html.proto-v2 .ai-input-box{ border-radius:18px; padding:14px 16px 12px; }
html.proto-v2 .ai-input-box:focus-within{ border-color:var(--v2-ink) !important; }
html.proto-v2 .ai-input-box input{ font-size:14px; }
html.proto-v2 .ai-input-row{ margin-top:12px; }
html.proto-v2 .ai-settings-btn, html.proto-v2 .ai-send-btn{ width:34px; height:34px; }
html.proto-v2 .ai-ask-chip{ font-family:var(--font-mono); font-size:10.5px; letter-spacing:.05em; }


/* =====================================================================================================================
   POP-UPS: no drop shadows, just a thin line around the box (menus, dropdowns, tooltips, dialogs, confirm boxes, toasts),
   in both themes. The page dimming behind a dialog is left alone.
   ===================================================================================================================== */
html.proto-v2 body:not(#fa):not(#fb) :is([class*="popover"], [class*="popup"], [class*="modal"], [class*="tooltip"], [class*="dropdown"], [class*="-tip"]){ box-shadow:none !important; }
html.proto-v2 body:not(#fa):not(#fb) :is(.nav-submenu, .profile-dropdown, .pd-submenu, .date-range-popover, .dv-kpi-info-tip, .dv-kpi-period-menu, .dv-kpi-add-menu, .traffic-test-popover, .chartb-donut-tip, .tpl-modal, .legend-add-menu, .globe-tooltip, .chart-tooltip, .amz-filter-menu-inner, .amz-marketplace-menu, .perm-modal, .pd-toast, .tone-menu, .rtd-card-menu-popover, .rtd-mini-hover-tooltip, .rtd-requests-tooltip, .rtd-performance-tooltip, .rtd-donut-tooltip, .raa-control-menu, .raa-campaign-filter-menu, .raa-blitz-modal, .raa-addproducts-modal, .rtd-metric-info-tip, .ba-tooltip, .ba-selbar-float, .raa-bh-modal, .raa-bh-tip, .bookshelf-confirm, .bookshelf-cover-pop, .dc-globe-tip, .ba-popup, .pd-confirm, .rtd-performance-add-menu, .chat-mode-menu, .ws-pop, .orb-model-menu, .mcp-modal, .mcp-warn){ box-shadow:none !important; border:1px solid var(--border) !important; }

/* Chart trend lines: no thin dark (or white) outline underneath the coloured line, just the line itself. */
html.proto-v2 body:not(#fa):not(#fb) .rtd-performance-line-edge, html.proto-v2 body:not(#fa):not(#fb) polyline.rtd-performance-line-edge{ display:none !important; stroke:none !important; stroke-opacity:0 !important; }
html.proto-v2 svg polyline, html.proto-v2 svg path{ filter:none !important; }

/* =====================================================================================================================
   ORB AI PAGE, in the new style (same look as the side chat): flat, outlined, rounded, serif title, soft icon squares.
   ===================================================================================================================== */
html.proto-v2 .sa-window{ border-radius:20px; border:1px solid var(--border); overflow:hidden; box-shadow:none; background:var(--surface); }
html.proto-v2 .sa-window .ai-expand-main, html.proto-v2 .sa-center, html.proto-v2 .ai-expand-center, html.proto-v2 .sa-messages{ background-image:none !important; }
html.proto-v2 .ai-expand-sidebar{ border-right:1px solid var(--border); }
html.proto-v2 .sa-nav-item{ border-radius:10px; }
html.proto-v2 .sa-nav-item.is-active{ background:var(--v2-nav-active-bg); color:var(--v2-nav-active-text); }
html.proto-v2 .sa-nav-item.is-active svg{ color:var(--v2-nav-active-text); }
html.proto-v2 .sa-titlebar strong{ font-family:var(--font-serif); font-variation-settings:'opsz' 28,'SOFT' 100,'WONK' 0; font-optical-sizing:none; font-weight:450; font-size:19px; letter-spacing:-.01em; }
html.proto-v2 .sa-sub{ font-family:var(--font-mono); font-size:9.5px; letter-spacing:.09em; text-transform:uppercase; font-weight:400; }
html.proto-v2 .ai-expand-title{ font-size:38px; letter-spacing:-.02em; }
html.proto-v2 .sa-input-box, html.proto-v2 .ai-expand-input-box{ border-radius:20px; }
html.proto-v2 .ai-expand-input-box:focus-within{ border-color:var(--v2-ink) !important; }
html.proto-v2 .sa-suggest-head strong{ font-family:var(--font-mono); font-size:10.5px; font-weight:500; letter-spacing:.09em; text-transform:uppercase; color:var(--text-dim); }
html.proto-v2 .sa-suggest-item{ border-radius:14px; background:var(--surface) !important; border:1px solid var(--border) !important; box-shadow:none !important; }
html.proto-v2 .sa-suggest-item:hover{ border-color:var(--v2-ink) !important; }
html.proto-v2 .sa-suggest-icon{ border-radius:10px; border:0 !important; background:var(--lime-wash) !important; color:var(--lime-text) !important; box-shadow:none !important; }
html.proto-v2 .sa-settings-btn{ border-radius:10px; background:var(--surface) !important; box-shadow:none !important; }
html.proto-v2 .sa-chat-head{ border-bottom:1px solid var(--border); }
html.proto-v2 .ai-expand-chat-item{ border-radius:10px; }
html.proto-v2 .sa-set{ border-radius:20px; border:1px solid var(--border); box-shadow:none !important; background:var(--surface) !important; }
html.proto-v2 .sa-set-head strong{ font-family:var(--font-serif); font-weight:450; font-size:19px; }
html.proto-v2 .sa-btn-primary{ background:var(--v2-ink) !important; border-color:var(--v2-ink) !important; color:var(--v2-on-ink) !important; }
html.proto-v2 .sa-seg button.is-active{ background:var(--v2-ink); color:var(--v2-on-ink); }
html.proto-v2 .sa-switch.is-on{ background:var(--lime); border-color:var(--lime); }

/* Campaigns table: the column headers sit on the plain card colour (white in light mode) and are written in the main text colour, not grey, so they read clearly in both modes. */
html.proto-v2 body:not(#fa):not(#fb) .raa-campaign-table th, html.proto-v2 body:not(#fa):not(#fb) .raa-campaign-table th .raa-sort-head{ background:var(--surface) !important; color:var(--text) !important; }
html.proto-v2 body:not(#fa):not(#fb) .raa-campaign-table th .raa-sort-head{ background:transparent !important; }

/* The P logo is purple (Dot's purple) in light mode and white in dark mode: the picture itself is purple now, so no inverting or recolouring on top of it. */
html.proto-v2 body .brand-logo-img, html.proto-v2 body.theme-light .brand-logo-img, html.proto-v2 .pd-boot-logo img, html.proto-v2.pd-boot-light .pd-boot-logo img,
html.proto-v2 body .soon-logo, html.proto-v2 body.theme-light .soon-logo, html.proto-v2 body .auth-logo-img{ filter:none !important; }
/* In dark mode the P logo is white (purple turned to greys and lifted, so its two shades stay white and light grey). */
html.proto-v2 body:not(.theme-light) .brand-logo-img, html.proto-v2:not(.pd-boot-light) .pd-boot-logo img, html.proto-v2 body:not(.theme-light) .soon-logo{ filter:grayscale(1) brightness(2.8) !important; }

/* Book cards: no animated rainbow border (or any rainbow colour effect) around them. */
html.proto-v2 body:not(#fa):not(#fb) :is(.rtd-top-book-detail, .rtd-top-book-detail--featured, .rtd-top-book-detail--rail, .dv-book-card, .dv-book-card-featured)::after{ display:none !important; animation:none !important; background:none !important; }
html.proto-v2 .ai-ask-chip.chat-mode-chip{ width:34px; height:34px; padding:0; border-radius:50%; justify-content:center; }

/* Expanded AI chat window: the top-right icons (collapse, close) look and behave exactly like the side chat's (expand, close) icons; no logo in the sidebar header. */
html.proto-v2 .ai-expand-topbar{ gap:6px; }
html.proto-v2 .ai-expand-topbar span{ display:grid; place-items:center; width:30px; height:30px; border-radius:9px; border:0; background:transparent; color:var(--text-dim); cursor:pointer; }
html.proto-v2 .ai-expand-topbar span:hover{ background:var(--surface-2); color:var(--text); }
html.proto-v2 .ai-expand-topbar svg{ width:16px; height:16px; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
html.proto-v2 .ai-expand-sidebar-header{ font-family:var(--font-serif); font-variation-settings:'opsz' 28,'SOFT' 100,'WONK' 0; font-optical-sizing:none; font-weight:450; font-size:19px; letter-spacing:-.01em; color:var(--text); padding:6px 6px 18px; }

/* "Powered by Claude" is plain text with the small logo: no pill, border or background around it. */
html.proto-v2 body:not(#fa):not(#fb) .claude-badge, html.proto-v2 body:not(#fa):not(#fb) .ai-expand-claude-badge{ background:none !important; border:0 !important; box-shadow:none !important; padding:0 !important; border-radius:0 !important; }

/* While the expanded AI chat is open, the page behind it cannot scroll (mouse wheel, touch or keys). */
html:has(.ai-expand-overlay.open){ overflow:hidden !important; scrollbar-gutter:stable; }
html.proto-v2 .ai-expand-overlay{ overscroll-behavior:contain; }
html.proto-v2 .ai-expand-overlay.open .ai-expand-window{ overscroll-behavior:contain; }

/* The little dots beside the side-panel menu items (blue "built in React", green "done") are plain static dots: no pulsing rings, no glow, and no text that slides out on hover. */
html.proto-v2 .nav-done-core::before, html.proto-v2 .nav-done-core::after, html.proto-v2 .nav-react-core::before, html.proto-v2 .nav-react-core::after{ display:none !important; animation:none !important; }
html.proto-v2 .nav-done-core, html.proto-v2 .nav-react-core{ box-shadow:none !important; }
html.proto-v2 .nav-done-text, html.proto-v2 .nav-react-text{ display:none !important; }

/* The "Total" row at the bottom of every table (Campaigns, Book Shelf, Platforms, Channels, Book Analytics, campaign details) is a normal row: the card colour and a thin line above it, no purple tint. */
html.proto-v2 body:not(#fa):not(#fb) .raa-campaign-total-row td, html.proto-v2 body:not(#fa):not(#fb) .raa-campaign-total-row:hover td,
html.proto-v2 body:not(#fa):not(#fb) .raa-campaign-table .raa-campaign-total-row td, html.proto-v2 body:not(#fa):not(#fb) .raa-campaign-total-row td:first-child,
html.proto-v2 body:not(#fa):not(#fb) .raa-campaign-table.has-pinned-ai .raa-campaign-total-row td:nth-child(2){ background:var(--surface) !important; border-top:1px solid var(--border) !important; color:var(--text); }

/* "PUBLISHERS / DATA" in the side panel: the two words keep their own line each and the block keeps its full width while the panel opens or closes (the panel just clips it), so "Data" can never wrap, drop or jump under the other word in any state. */
html.proto-v2 .brand-name{ flex:0 0 auto; width:max-content; min-width:max-content; margin-right:auto; overflow:visible; flex-wrap:nowrap; white-space:nowrap; }
html.proto-v2 .brand-name .brand-co, html.proto-v2 .brand-name .brand-app{ display:block; white-space:nowrap; flex:none; }

/* Sidebar name: "Publishers Data" on one line beside the logo, in the serif of the landing pages, with Data in purple.
   It never wraps, so Data cannot drop under Publishers. */
html.proto-v2 .brand-name{ flex-direction:row !important; align-items:baseline; gap:.28em !important; font-family:'Fraunces',Georgia,serif; font-variation-settings:'opsz' 28,'SOFT' 100,'WONK' 0; }
html.proto-v2 .brand-name .brand-co, html.proto-v2 .brand-name .brand-app{ display:inline !important; font-family:inherit !important; font-size:18px !important; font-weight:400 !important; letter-spacing:-.01em !important; text-transform:none !important; line-height:1.1; white-space:nowrap; }
/* While the collapsed rail is hovered open (peek), style.css puts the name back to its plain browser display (a block), which drops the flex gap: Data then touched Publishers
   and sprang 3-4px away (and 2px lower) when the panel was pinned open. Keep the same row layout in every state. */
html.proto-v2 .sidebar.collapsed.peek .brand-name{ display:flex; }
html.proto-v2 .brand-name .brand-co{ color:var(--text, #1f1e1d) !important; }
html.proto-v2 .brand-name .brand-app{ color:#5150f6 !important; }

/* ---------- loading UI in the brand lavender (page-load screen, app launch screen, card placeholders) ---------- */
html.proto-v2 .pd-boot-ring, html.proto-v2.pd-boot-light .pd-boot-ring{ border-color:rgba(165,164,250,.22); border-top-color:#a5a4fa; }
html.proto-v2 .pd-boot-bar, html.proto-v2.pd-boot-light .pd-boot-bar{ background:rgba(165,164,250,.2); }
html.proto-v2 .pd-boot-bar i, html.proto-v2.pd-boot-light .pd-boot-bar i{ background:#a5a4fa; }
html.proto-v2 .app-loading{ --app:#a5a4fa !important; background:var(--bg); }
html.proto-v2 .app-loading-bar{ background:rgba(165,164,250,.2); }
html.proto-v2 .app-loading-bar i{ background:#a5a4fa; }
html.proto-v2 body .raa-skel{ background:rgba(165,164,250,.16); }
html.proto-v2 body .raa-skel::after{ background:linear-gradient(90deg,transparent,rgba(165,164,250,.28),transparent); }
html.proto-v2 body.theme-light .raa-skel{ background:#ecebfd; }
html.proto-v2 body.theme-light .raa-skel::after{ background:linear-gradient(90deg,transparent,#dcdbfb,transparent); }

/* Side chat: the thin zebra-stripe print (Hyros brand file) behind the conversation, faint and always behind the content. */
html.proto-v2 .ai-drawer{ isolation:isolate; }
html.proto-v2 .ai-drawer::before{ content:""; position:absolute; inset:0; z-index:-1; pointer-events:none; background:url('/assets/zebra-white.svg') center / cover no-repeat; opacity:.012; }
body.theme-light.proto-v2 .ai-drawer::before, html.proto-v2 body.theme-light .ai-drawer::before{ background-image:url('/assets/zebra-purple.svg'); opacity:.035; }

/* App-switching loading screen: the thin zebra-stripe print (Hyros brand file) behind the logo. (The first launch screen has its own copy built into the HTML so it shows instantly.) */
html.proto-v2 .app-loading{ isolation:isolate; overflow:hidden; }
html.proto-v2 .app-loading::before{ content:""; position:absolute; inset:0; z-index:-1; pointer-events:none; background:url('/assets/zebra-white.svg') center / cover no-repeat; opacity:.012; }
body.theme-light .app-loading::before{ background-image:url('/assets/zebra-purple.svg'); opacity:.035; }

/* Every page: the thin zebra-stripe print (Hyros brand file) as a faint wallpaper fixed to the window, behind everything. The left menu and top bar sit above it. Same strength as Community. */
html.proto-v2 body::before{ content:""; position:fixed; inset:0; z-index:-1; pointer-events:none; background:url('/assets/zebra-white.svg') center / cover no-repeat; opacity:.012; }
html.proto-v2 body.theme-light::before{ background-image:url('/assets/zebra-purple.svg'); opacity:.035; }

/* Dark mode: containers and KPI cards use the Hyros dark colours (hyros-brand.md): containers = the dark window #1B1A19, KPI cards = the dark card white .04, both with the white .10 hairline. Only cards change; the page, menu and top bar keep their own colours. */
html.proto-v2 body:not(.theme-light) .rtd-card{ background:#1b1a19; border-color:rgba(255,255,255,.1); }
html.proto-v2 body:not(.theme-light) .rtd-card:is(.rtd-card--kpi, .raa-metric-card),
html.proto-v2 body.brand-ui:not(.theme-light) .brand-panel .rtd-card:is(.rtd-card--kpi, .raa-metric-card){ background:rgba(255,255,255,.04); border-color:rgba(255,255,255,.1); }

/* KDP Reports: the top bar (header) is white in the light theme, not the cream page colour. To undo, delete this rule. */
html.proto-v2 body.theme-light:has(#panel-kdp-reports-react.active):not(#fa):not(#fb) .topbar{ background:#fff !important; }

/* No zebra print behind any page: the page wallpaper and the side chat. (The launch/loading screens keep theirs. To bring it back, delete this block.) */
html.proto-v2 body::before, html.proto-v2 body.theme-light::before, html.proto-v2 .ai-drawer::before, body.theme-light.proto-v2 .ai-drawer::before, html.proto-v2 body.theme-light .ai-drawer::before { background-image: none !important; display: none !important; }
/* Light theme: the top bar (header) is white on every page, with the brand's thin line under it. To undo, delete this rule. */
html.proto-v2 body.theme-light:not(#fa):not(#fb) .topbar{ background:#fff !important; border-color:rgba(31,30,29,.11) !important; }
/* Light theme: the side panel (the left menu) is white on every page, with the brand's thin line on its edge. To undo, delete this rule. */
html.proto-v2 body.theme-light:not(#fa):not(#fb) .sidebar{ background:#fff !important; border-color:rgba(31,30,29,.11) !important; }
html.proto-v2 body.theme-light:not(#fa):not(#fb) .sidebar :is(.sidebar-footer, .sidebar-top, .sidebar-bottom, .brand, .nav, .profile, .profile-card){ background:transparent; }

/* Status pop-ups (the toast that confirms a change, reports an error or says "coming soon") in the Hyros style: a small white card with a thin line, ink text, and a dot in the status colour
   instead of the icon circle: green for done, terracotta for a problem, purple for a note. To undo, delete this block. */
html.proto-v2 body:not(#fa):not(#fb) .pd-toast{ gap:10px; padding:11px 16px; border:1px solid rgba(31,30,29,.11) !important; border-radius:12px; background:#fff !important; color:#1F1E1D !important; box-shadow:0 12px 34px -20px rgba(31,30,29,.35) !important; font:400 13px/1.4 'Inter',system-ui,sans-serif; }
html.proto-v2 body:not(#fa):not(#fb) .pd-toast .pd-toast-icon{ width:8px; height:8px; flex:0 0 8px; border-radius:50%; background:currentColor !important; }
html.proto-v2 body:not(#fa):not(#fb) .pd-toast .pd-toast-icon svg{ display:none; }
html.proto-v2 body:not(#fa):not(#fb) .pd-toast.is-success .pd-toast-icon{ color:#1F8A5B; }
html.proto-v2 body:not(#fa):not(#fb) .pd-toast.is-error .pd-toast-icon{ color:#B5533A; }
html.proto-v2 body:not(#fa):not(#fb) .pd-toast.is-info .pd-toast-icon{ color:#5150F6; }
html.proto-v2 body:not(#fa):not(#fb) .pd-toast .pd-toast-text{ color:#1F1E1D; }

/* The page path ("Publishers Data / Dashboards") in the top bar is removed everywhere, so it can never flash up while a page opens. (The elements stay in the page because script.js still writes the page name into them.) To bring it back, delete this rule. */
html.proto-v2 .topbar-left > :is(.crumb-home, .crumb-prev, .crumb-prev-sep, .crumb-current, span){ display:none !important; }

/* The Dot AI side chat's header is exactly as tall as the app's top header (56px), so the two lines meet across the page. To undo, delete this rule. */
html.proto-v2 .ai-drawer-header{ height:56px; box-sizing:border-box; background:#fff; border-bottom-color:rgba(31,30,29,.11); }
body:not(.theme-light) html.proto-v2 .ai-drawer-header, html.proto-v2 body:not(.theme-light) .ai-drawer-header{ background:var(--surface); }

/* Bogue a little bolder: it only comes in Regular, so every headline that uses it gets a hair-thin outline in its own colour (2% of its size). Delete this block to go back to the plain Regular. */
/* ---------- soft serif headings (both themes) ---------- */
html.proto-v2 h1,
/* Sidebar name: "Publishers Data" on one line beside the logo,
font-face,
html.proto-v2 .ai-drawer-name,
html.proto-v2 .ai-expand-sidebar-header,
html.proto-v2 .ai-expand-title,
html.proto-v2 .ai-greeting,
html.proto-v2 .app-loading-name b,
html.proto-v2 .app-loading-name small,
html.proto-v2 .chartb-title,
html.proto-v2 .dash-page-title,
html.proto-v2 .pd-boot-name,
html.proto-v2 .plans-hero-title,
html.proto-v2 .rtd-metric b,
html.proto-v2 .sa-set-head strong,
html.proto-v2 .sa-titlebar strong,
html.proto-v2 .section-title,
html.proto-v2 .tpl-modal-title,
html.proto-v2 h2,
in the serif of the landing pages,
so Data cannot drop under Publishers. */
html.proto-v2 .brand-name,
with Data in purple.
   It never wraps{ -webkit-text-stroke:0; }

/* Dark theme: the status pop-ups follow the dark surface too. */
html.proto-v2 body:not(.theme-light):not(#fa):not(#fb) .pd-toast{ background:var(--surface) !important; border-color:var(--border) !important; color:var(--text) !important; }
html.proto-v2 body:not(.theme-light):not(#fa):not(#fb) .pd-toast .pd-toast-text{ color:var(--text); }