/* =======================================================================================
 *  Shrtct theme — design tokens and shell
 * ---------------------------------------------------------------------------------------
 *  Loaded after AdminKit's app.css and style.min.css, so it overrides them.
 *
 *  The application already owns dark mode: custom.js writes a `darkmode` cookie and sets
 *  body.dark + html[data-scheme="dark"], and the layout adds .c_darkmode. The design files
 *  express dark as html[data-theme="dark"]. All four selectors are honoured below so the
 *  existing toggle keeps working untouched.
 * ======================================================================================= */

/* ---- Tokens ---------------------------------------------------------------------- */

:root {
    --bg: #F3F3F0;
    --surface: #FFFFFF;
    --surface-2: #FAFAF8;
    --sunk: #F4F4F1;
    --ink: #14151A;
    --ink-2: #5C6069;
    --ink-3: #8E939B;
    --line: #E6E5E0;
    --line-2: #F0EFEB;
    --accent: #5A31F4;
    --accent-soft: #EFEAFF;
    --accent-ink: #4425D6;
    --pos: #0E7A4E;
    --pos-soft: #E4F3EB;
    --neg: #B4321F;
    --neg-soft: #FBE9E5;
    --warn: #9A5B08;
    --warn-soft: #FBF0DE;
    --info: #1D4ED8;
    --info-soft: #E6EDFD;

    --rail: 236px;
    --gutter: 38px;
    --pad: 20px;
    --rowh: 56px;
    --radius: 14px;
    --radius-sm: 10px;
    --shadow: 0 1px 2px rgba(20, 21, 26, .04), 0 8px 24px -12px rgba(20, 21, 26, .12);

    --font-sans: 'Instrument Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}

html[data-theme="dark"],
html[data-scheme="dark"],
html.c_darkmode,
body.dark {
    --bg: #0B0C0F;
    --surface: #141519;
    --surface-2: #17181D;
    --sunk: #101115;
    --ink: #F1F1EF;
    --ink-2: #9EA3AB;
    --ink-3: #6C7179;
    --line: #25272E;
    --line-2: #1D1F25;
    --accent: #9179FF;
    --accent-soft: #241D4A;
    --accent-ink: #B4A3FF;
    --pos: #4CD79B;
    --pos-soft: #102E22;
    --neg: #FF8B72;
    --neg-soft: #2E1710;
    --warn: #E0B25F;
    --warn-soft: #2B2313;
    --info: #7BA2FF;
    --info-soft: #141E38;
    --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 10px 30px -14px rgba(0, 0, 0, .7);
}

/* Bootstrap reads its own custom properties in a few components (buttons, links,
   focus rings). Point them at our tokens so inherited markup follows the design. */
:root {
    --bs-primary: var(--accent);
    --bs-link-color: var(--accent);
    --bs-link-hover-color: var(--accent-ink);
    --bs-body-color: var(--ink);
    --bs-body-bg: var(--bg);
    --bs-border-color: var(--line);
    --bs-border-radius: var(--radius-sm);
    --bs-font-sans-serif: var(--font-sans);
}

/* ---- Base ------------------------------------------------------------------------ */

body {
    background: var(--bg);
    color: var(--ink);
    font-family: var(--font-sans);
    -webkit-font-smoothing: antialiased;
    letter-spacing: -.006em;
}

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--ink); }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Numerics read better in the mono face — matches the design throughout. */
.shrtct-mono,
.shrtct-num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

@keyframes shrtct-spin { to { transform: rotate(360deg); } }
@keyframes shrtct-rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

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

/* ---- Shell: sidebar -------------------------------------------------------------- */
/* Class names are AdminKit's and must not change — app.js binds .sidebar,
   .js-simplebar and .sidebar-toggle by class. Only the styling is ours. */

.wrapper { background: var(--bg); }

.sidebar,
.sidebar-content {
    background: var(--surface);
    border-right: 1px solid var(--line);
}

.sidebar { width: var(--rail); min-width: var(--rail); }

.sidebar-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 18px 16px 14px 18px;
    color: var(--ink);
    font-size: 16.5px;
    font-weight: 700;
    letter-spacing: -.02em;
}

.sidebar-brand:hover { color: var(--ink); }

.sidebar-header {
    padding: 14px 20px 4px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--ink-3);
    background: transparent;
}

.sidebar-nav { padding: 0 12px 12px; }

.sidebar-item .sidebar-link {
    display: flex;
    align-items: center;
    gap: 10px;
    height: 34px;
    padding: 0 8px;
    margin-bottom: 1px;
    border-radius: var(--radius-sm);
    color: var(--ink-2);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: -.005em;
    position: relative;
    white-space: nowrap;
    overflow: hidden;
}

.sidebar-item .sidebar-link:hover { background: var(--sunk); color: var(--ink); }

.sidebar-item.active > .sidebar-link,
.sidebar-link.active {
    background: var(--accent-soft);
    color: var(--accent-ink);
    font-weight: 600;
}

/* The active marker rail from the design. */
.sidebar-item.active > .sidebar-link::before {
    content: "";
    position: absolute;
    left: -12px;
    top: 8px;
    bottom: 8px;
    width: 2.5px;
    border-radius: 0 3px 3px 0;
    background: var(--accent);
}

.sidebar-link svg,
.sidebar-link .feather { width: 17px; height: 17px; stroke-width: 1.7; }

.sidebar-dropdown .sidebar-link { font-size: 12.5px; padding-left: 34px; }

/* Channel colour dots keep their inline background; just shape them. */
.sidebar-nav .badge.roundeds { border-radius: 4px; }

/* A channel's name is a bare text node sitting next to its colour chip, so it
   cannot be given text-overflow directly -- inside a flex row it becomes an
   anonymous item and wraps into a jumble when the name is long. Switching just
   those rows to block layout lets the text node take the ellipsis. */
.sidebar-nav .sidebar-link:has(> .badge.roundeds) {
    display: block;
    line-height: 34px;
    text-overflow: ellipsis;
}

.sidebar-nav .sidebar-link:has(> .badge.roundeds) > .badge.roundeds {
    display: inline-block;
    vertical-align: middle;
}

/* ---- Shell: topbar --------------------------------------------------------------- */

.navbar.navbar-bg,
.navbar-light.navbar-bg {
    background: color-mix(in srgb, var(--bg) 86%, transparent);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--line);
    min-height: 60px;
    padding: 0 var(--gutter);
    box-shadow: none;
}

.navbar .nav-link,
.navbar .nav-icon { color: var(--ink-2); }

.navbar .nav-link:hover,
.navbar .nav-icon:hover { color: var(--ink); }

.navbar .indicator { background: var(--accent); border: 1.5px solid var(--surface); }

/* ---- Shell: content -------------------------------------------------------------- */

.main { background: var(--bg); }

/* The gutter is deliberately wider than the vertical padding. The sidebar is a
   solid panel against the page background, so a tight left edge reads as the
   content touching the rail. --gutter keeps the topbar and the content on the
   same left edge; change it in one place and both follow. */
.content { padding: 22px var(--gutter) 48px; }

/* ---- Surfaces -------------------------------------------------------------------- */

.card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

.card-header {
    background: transparent;
    border-bottom: 1px solid var(--line-2);
    padding: 14px 16px;
}

.card-title { font-size: 15px; font-weight: 600; letter-spacing: -.015em; margin: 0; }

.card-body { padding: 16px; }

/* AdminKit ships .chart-lg at a 350px floor, which reads oversized inside these
   cards -- especially when the series is sparse and the bars sit in open space. */
.chart { min-height: 240px; }
.chart-lg { min-height: 280px; }

/* Selected row treatment used by the bulk toolbar. */
.card-selected {
    border-color: var(--accent) !important;
    background: var(--accent-soft);
}

/* ---- Forms ----------------------------------------------------------------------- */

.form-control,
.form-select {
    background: var(--sunk);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    color: var(--ink);
    font-size: 13px;
    min-height: 38px;
}

.form-control::placeholder { color: var(--ink-3); }

.form-control:focus,
.form-select:focus {
    background: var(--surface);
    border-color: var(--accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent);
    color: var(--ink);
}

.form-label { font-size: 11px; font-weight: 600; color: var(--ink-2); margin-bottom: 5px; }

.form-text { font-size: 10.5px; color: var(--ink-3); }

/* ---- Buttons --------------------------------------------------------------------- */

.btn {
    border-radius: var(--radius-sm);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: -.005em;
}

.btn-primary {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
    box-shadow: 0 6px 16px -8px var(--accent);
}

.btn-primary:hover,
.btn-primary:focus { background: var(--accent); border-color: var(--accent); filter: brightness(1.08); color: #fff; }

.btn-outline-secondary,
.btn-default {
    background: var(--surface);
    border-color: var(--line);
    color: var(--ink);
}

.btn-outline-secondary:hover,
.btn-default:hover { background: var(--surface); border-color: var(--ink-3); color: var(--ink); }

/* ---- Badges ---------------------------------------------------------------------- */

.badge {
    border-radius: 6px;
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: .01em;
    padding: 3px 6px;
}

.badge.bg-success { background: var(--pos-soft) !important; color: var(--pos) !important; }
.badge.bg-danger  { background: var(--neg-soft) !important; color: var(--neg) !important; }
.badge.bg-warning { background: var(--warn-soft) !important; color: var(--warn) !important; }
.badge.bg-info    { background: var(--info-soft) !important; color: var(--info) !important; }
.badge.bg-primary { background: var(--accent-soft) !important; color: var(--accent-ink) !important; }

/* ---- Dropdowns ------------------------------------------------------------------- */

.dropdown-menu {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 12px;
    box-shadow: var(--shadow);
    padding: 6px;
}

.dropdown-item {
    border-radius: 8px;
    color: var(--ink-2);
    font-size: 12.5px;
    padding: 7px 9px;
    display: flex;
    align-items: center;
    gap: 9px;
}

.dropdown-item:hover, .dropdown-item:focus { background: var(--sunk); color: var(--ink); }
.dropdown-item.text-danger:hover { background: var(--neg-soft); color: var(--neg); }
.dropdown-item svg { width: 15px; height: 15px; }
.dropdown-divider { border-color: var(--line-2); margin: 5px 2px; }
.dropdown-menu-header { color: var(--ink-3); font-size: 11px; font-weight: 600; padding: 8px 9px 4px; }

/* ---- Tables ---------------------------------------------------------------------- */

.table { color: var(--ink); border-color: var(--line-2); }
.table > :not(caption) > * > * { background: transparent; border-color: var(--line-2); }
.table thead th {
    color: var(--ink-3);
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    border-bottom: 1px solid var(--line);
}
.table-hover > tbody > tr:hover > * { background: var(--sunk); color: var(--ink); }

/* ---- Modals ---------------------------------------------------------------------- */

.modal-content {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}
.modal-header, .modal-footer { border-color: var(--line-2); }
.modal-title { font-size: 16px; font-weight: 600; letter-spacing: -.02em; }

/* ---- Flash message (Helper::message output) -------------------------------------- */

.custom-alert {
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow);
    font-size: 13px;
    font-weight: 500;
}

/* Helper::message hard-codes bg-{type} text-white; soften it to the token palette. */
.custom-alert.bg-success { background: var(--pos-soft) !important; color: var(--pos) !important; border-color: color-mix(in srgb, var(--pos) 30%, transparent); }
.custom-alert.bg-danger  { background: var(--neg-soft) !important; color: var(--neg) !important; border-color: color-mix(in srgb, var(--neg) 30%, transparent); }
.custom-alert.bg-warning { background: var(--warn-soft) !important; color: var(--warn) !important; border-color: color-mix(in srgb, var(--warn) 30%, transparent); }
.custom-alert.bg-info    { background: var(--info-soft) !important; color: var(--info) !important; border-color: color-mix(in srgb, var(--info) 30%, transparent); }

/* ---- Pagination ------------------------------------------------------------------ */
/* Absent from the design files; built here from the tokens to match the component
   language. Markup comes from Helper::pagination(), so only styling is defined. */

.pagination { gap: 4px; }

.pagination .page-item .page-link {
    min-width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    color: var(--ink-2);
    font-family: var(--font-mono);
    font-size: 12px;
    box-shadow: none;
}

.pagination .page-item .page-link:hover { border-color: var(--ink-3); color: var(--ink); }
.pagination .page-item.active .page-link { background: var(--accent); border-color: var(--accent); color: #fff; }
.pagination .page-item.disabled .page-link { opacity: .45; pointer-events: none; }

/* ---- Plan-locked treatment ------------------------------------------------------- */
/* Used wherever a feature is visible but gated by plan, as opposed to hidden by
   team permission (which removes the control entirely). */

.shrtct-locked {
    opacity: .55;
    pointer-events: none;
    user-select: none;
}

.shrtct-lock-hint {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
    color: var(--accent);
}

/* ---- Empty states ---------------------------------------------------------------- */

.shrtct-empty {
    text-align: center;
    padding: 48px 24px;
    color: var(--ink-2);
}

.shrtct-empty svg { width: 40px; height: 40px; color: var(--ink-3); margin-bottom: 12px; }
.shrtct-empty h5 { font-size: 15px; font-weight: 600; color: var(--ink); margin-bottom: 6px; }
.shrtct-empty p { font-size: 13px; color: var(--ink-2); margin-bottom: 16px; }

/* ---- Third-party widget skins ---------------------------------------------------- */
/* select2, daterangepicker and spectrum are wired into the app already. They are
   restyled here, never replaced. */

.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
    background: var(--sunk);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    min-height: 38px;
}

.select2-container--default.select2-container--focus .select2-selection--multiple,
.select2-container--default.select2-container--open .select2-selection--single {
    border-color: var(--accent);
}

.select2-dropdown {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 12px;
    box-shadow: var(--shadow);
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background: var(--accent-soft);
    color: var(--accent-ink);
}

.daterangepicker {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 12px;
    box-shadow: var(--shadow);
    font-family: var(--font-sans);
}

.daterangepicker td.active,
.daterangepicker td.active:hover { background: var(--accent); }

/* ---- Loading --------------------------------------------------------------------- */

.preloader {
    display: grid;
    place-items: center;
    padding: 32px;
}

.preloader::after {
    content: "";
    width: 22px;
    height: 22px;
    border: 2.5px solid var(--line);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: shrtct-spin .7s linear infinite;
}

/* ---- Page head ------------------------------------------------------------------- */

.shrtct-eyebrow {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: .04em;
    color: var(--ink-3);
    margin-bottom: 5px;
}

.shrtct-h1 {
    font-size: 27px;
    font-weight: 600;
    letter-spacing: -.032em;
    color: var(--ink);
    margin: 0;
}

.shrtct-sub { font-size: 13.5px; color: var(--ink-2); text-wrap: pretty; }

.shrtct-range {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    padding: 0 11px;
    height: 38px;
    min-width: 260px;
    color: var(--ink-3);
}

.shrtct-range svg { width: 15px; height: 15px; flex: 0 0 15px; }
.shrtct-range .form-control { background: transparent; min-height: 0; height: 34px; padding: 0; font-size: 12.5px; }

/* ---- Metric cards ---------------------------------------------------------------- */

.shrtct-metric-label {
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--ink-3);
    margin-bottom: 8px;
}

.shrtct-metric-label .text-muted { text-transform: none; letter-spacing: 0; }

.shrtct-metric-value {
    font-size: 30px;
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -.03em;
    color: var(--ink);
    margin: 0;
}

/* Content sits at the top of the card. An earlier version pushed the number down
   with margin-top:auto to bottom-align it across the row, which opened a large
   gap under the label whenever one card was taller than the rest. */
.shrtct-metric {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.shrtct-metric-sub {
    font-size: 11.5px;
    color: var(--ink-3);
    margin-top: 6px;
}

.shrtct-metric-sub a { color: var(--accent); }
.shrtct-metric-sub a:hover { text-decoration: underline; }

/* ---- Chart summary strip --------------------------------------------------------- */

/* The headline figures for the plotted series, so the card can be read at a glance
   without hovering the chart. Values come from shrtct-charts.js. */
.shrtct-chart-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 26px;
    margin-top: 14px;
}

.shrtct-chart-figure {
    display: block;
    font-size: 21px;
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: -.025em;
    color: var(--ink);
}

.shrtct-chart-cap {
    display: block;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--ink-3);
    margin-top: 3px;
}

/* ---- Card subtitle --------------------------------------------------------------- */

.shrtct-card-sub {
    font-size: 12px;
    color: var(--ink-3);
    margin-top: 2px;
}

/* ---- Referrer bars --------------------------------------------------------------- */

.shrtct-ref-row { margin-top: 14px; }
.shrtct-ref-row:first-child { margin-top: 4px; }

.shrtct-ref-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 6px;
}

.shrtct-ref-name {
    font-size: 12.5px;
    color: var(--ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.shrtct-ref-pct { font-size: 12px; color: var(--ink-2); flex: none; }

.shrtct-ref-bar {
    height: 5px;
    border-radius: 4px;
    background: var(--sunk);
    overflow: hidden;
}

.shrtct-ref-bar span {
    display: block;
    height: 100%;
    border-radius: 4px;
    background: var(--accent);
}

/* ---- Shortener ------------------------------------------------------------------- */

.shrtct-shorten { border-color: var(--line); }
.shrtct-shorten .form-control { background: var(--sunk); }

/* The advanced-options and submit buttons ship inside a Bootstrap .btn-group,
   which exists to weld buttons edge to edge and strips the inner radii. They are
   two unrelated controls, so they get real space -- and space off the input,
   which they otherwise sit flush against.

   Scoped with :not(.border) so the Single / Multiple segmented control below,
   which carries its own border and *should* stay welded, is left alone. */
.shrtct-shorten .btn-group:not(.border) {
    gap: 8px;
    margin-left: 14px;
}

.shrtct-shorten .btn-group:not(.border) > .btn {
    border-radius: var(--radius-sm);
}

.shrtct-shorten .btn-group:not(.border) > .btn + .btn { margin-left: 0; }

/* ---- Bulk toolbar + icon buttons ------------------------------------------------- */

.shrtct-bulk {
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--surface);
    overflow: hidden;
}

.shrtct-bulk .btn {
    border: 0;
    color: var(--ink-2);
    font-size: 12px;
    font-weight: 600;
    padding: 6px 11px;
}

.shrtct-bulk .btn:hover { background: var(--sunk); color: var(--ink); }

.shrtct-icon-btn {
    width: 32px;
    height: 32px;
    display: inline-grid;
    place-items: center;
    padding: 0;
    line-height: 1;
}

.shrtct-icon-btn svg { width: 15px; height: 15px; }

/* ---- Inline search --------------------------------------------------------------- */

.shrtct-search { padding: 0 16px 14px; }
.shrtct-search .form-control { background: var(--sunk); }

/* ---- Live activity feed ---------------------------------------------------------- */

.shrtct-activity {
    padding: 12px 0;
    border-bottom: 1px solid var(--line-2);
}

.shrtct-activity:last-child { border-bottom: 0; }

.shrtct-activity-time {
    font-family: var(--font-mono);
    font-size: 10.5px;
    color: var(--ink-3);
    margin-left: 8px;
}

.shrtct-activity strong { font-size: 13px; font-weight: 600; color: var(--ink); }
.shrtct-activity a { color: var(--ink); }
.shrtct-activity a:hover { color: var(--accent); }
.shrtct-activity small.shrtct-mono { font-size: 11px; color: var(--ink-3); margin-top: 2px; }

.shrtct-activity-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 12px;
    align-items: center;
}

/* The activity rail sits beside the chart. Without a cap it runs well past the
   bottom of the chart card and the two columns stop reading as a pair. */
.shrtct-activity-scroll { max-height: 316px; overflow-y: auto; }

.shrtct-activity-scroll::-webkit-scrollbar { width: 8px; }
.shrtct-activity-scroll::-webkit-scrollbar-thumb { background: var(--line); border-radius: 4px; }
.shrtct-activity-scroll::-webkit-scrollbar-track { background: transparent; }

.shrtct-activity-meta span { display: inline-flex; align-items: center; gap: 5px; }
.shrtct-activity-meta small { font-size: 11px; color: var(--ink-2); }
.shrtct-activity-meta svg { width: 13px; height: 13px; color: var(--ink-3); }

.min-w-0 { min-width: 0; }

/* ---- Link row -------------------------------------------------------------------- */

.shrtct-row { transition: border-color .15s ease; }
.shrtct-row:hover { border-color: var(--ink-3); }
.shrtct-row .card-body { padding: 13px 14px; }

.shrtct-row-check {
    margin-top: 3px;
    flex: 0 0 auto;
    border-color: var(--line);
    background-color: var(--surface);
}

.shrtct-row-check:checked { background-color: var(--accent); border-color: var(--accent); }

.shrtct-row-title { display: flex; align-items: center; gap: 7px; min-width: 0; }
.shrtct-row-title a { color: var(--ink); min-width: 0; }
.shrtct-row-title a:hover { color: var(--accent); }
.shrtct-row-title strong { font-size: 13.5px; font-weight: 600; letter-spacing: -.01em; }

.shrtct-row-short { display: flex; align-items: center; gap: 8px; margin-top: 3px; }
.shrtct-row-short span { font-size: 11.5px; color: var(--ink-3); }
.shrtct-row-short .copy small { font-size: 11px; font-weight: 600; color: var(--accent); }

/* Indicator strip. Wraps rather than overflowing — a row can carry 16 of these. */
.shrtct-row-badges { flex-wrap: wrap; gap: 5px 8px; margin-top: 9px; align-items: center; }

.shrtct-chip {
    display: inline-flex;
    align-items: center;
    font-size: 10px;
    font-weight: 600;
    line-height: 1;
    padding: 4px 7px;
    border-radius: 6px;
    color: #fff;
}

.shrtct-chip:hover { color: #fff; filter: brightness(1.08); }

.shrtct-flag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 10.5px;
    color: var(--ink-2);
    background: var(--sunk);
    border: 1px solid var(--line-2);
    border-radius: 6px;
    padding: 3px 7px;
    white-space: nowrap;
}

.shrtct-flag svg { width: 12px; height: 12px; color: var(--ink-3); }

.shrtct-row-side { text-align: right; }

.shrtct-row-clicks {
    font-size: 17px;
    font-weight: 600;
    color: var(--ink);
    letter-spacing: -.02em;
    line-height: 1.1;
}

.shrtct-row-clicks:hover { color: var(--accent); }

.shrtct-row-clicks-label {
    font-size: 9.5px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--ink-3);
}

.shrtct-row-meta { font-size: 10.5px; color: var(--ink-3); margin-top: 2px; }

@media (max-width: 575.98px) {
    .shrtct-row-side { flex-direction: column; align-items: flex-end; gap: 6px !important; }
}

/* ---- Filter dropdown + quota ----------------------------------------------------- */

.shrtct-filter { min-width: 260px; }
.shrtct-filter .form-label { margin-bottom: 4px; }

.shrtct-quota-count { font-size: 12px; font-weight: 500; }
.shrtct-quota-count.shrtct-quota-ok   { color: var(--ink-2); }
.shrtct-quota-count.shrtct-quota-warn { color: var(--warn); }
.shrtct-quota-count.shrtct-quota-neg  { color: var(--neg); }

.shrtct-quota-bar { height: 5px; border-radius: 4px; background: var(--line); overflow: hidden; }
.shrtct-quota-bar .progress-bar { border-radius: 4px; }
.progress-bar.shrtct-quota-ok   { background: var(--accent); }
.progress-bar.shrtct-quota-warn { background: var(--warn); }
.progress-bar.shrtct-quota-neg  { background: var(--neg); }

/* ---- Page head container --------------------------------------------------------- */

.shrtct-page-head { row-gap: 12px; }
.shrtct-page-head .shrtct-h1 + .shrtct-sub { margin-top: 5px; }

/* The gutter narrows as the viewport does. Setting the token rather than the
   padding keeps the topbar and the content on one left edge at every width. */
@media (max-width: 1199.98px) { :root { --gutter: 30px; } }
@media (max-width: 991.98px)  { :root { --gutter: 24px; } }

@media (max-width: 575.98px) {
    :root { --gutter: 16px; }
    .shrtct-h1 { font-size: 22px; }
    .content { padding-top: 16px; padding-bottom: 40px; }
}

/* ---- Bio cards ------------------------------------------------------------------- */

.shrtct-divider { width: 1px; align-self: stretch; background: var(--line); }

.shrtct-bio-card { transition: border-color .15s ease; }
.shrtct-bio-card:hover { border-color: var(--ink-3); }

.shrtct-bio-kebab { position: absolute; top: 12px; right: 12px; z-index: 2; }

.shrtct-bio-avatar {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid var(--line);
    background: var(--sunk);
    padding: 3px;
}

.shrtct-bio-name { color: var(--ink); font-size: 14px; }
.shrtct-bio-name:hover { color: var(--accent); }

.shrtct-bio-url { margin-top: 3px; display: flex; align-items: center; justify-content: center; gap: 7px; }
.shrtct-bio-url small.shrtct-mono { font-size: 11px; color: var(--ink-3); }
.shrtct-bio-url .copy small { font-size: 11px; font-weight: 600; color: var(--accent); }

.shrtct-bio-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid var(--line-2);
}

.shrtct-bio-channels { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 10px; }

.shrtct-chip-x {
    display: inline-flex;
    align-items: center;
    margin-left: 5px;
    padding-left: 5px;
    border-left: 1px solid rgba(255, 255, 255, .45);
    color: #fff;
}

.shrtct-chip-x svg { width: 11px; height: 11px; }
.shrtct-chip-x:hover { color: #fff; opacity: .8; }

/* ---- QR cards -------------------------------------------------------------------- */

.shrtct-qr-check { position: absolute; top: 14px; left: 14px; z-index: 2; }
.shrtct-qr-check:checked { background-color: var(--accent); border-color: var(--accent); }

.shrtct-qr-thumb {
    display: inline-block;
    padding: 10px;
    border: 1px solid var(--line-2);
    border-radius: var(--radius-sm);
    background: #fff;
    line-height: 0;
}

.shrtct-qr-thumb img { max-width: 100%; height: auto; border-radius: 4px; }

/* ---- Grid / list toggle ---------------------------------------------------------- */

.shrtct-viewtoggle {
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    padding: 2px;
    background: var(--surface);
    flex: none;
}

.shrtct-viewtoggle .btn {
    border: 0;
    border-radius: 7px;
    padding: 4px 9px;
    color: var(--ink-3);
    line-height: 0;
}

.shrtct-viewtoggle .btn:hover { background: var(--sunk); color: var(--ink-2); }
.shrtct-viewtoggle .btn.active { background: var(--accent-soft); color: var(--accent-ink); }
.shrtct-viewtoggle .btn svg { width: 15px; height: 15px; }

/* ---- QR list mode ---------------------------------------------------------------- */

/* List mode reuses the grid card's markup exactly -- only the wrapper class changes --
   so the kebab and its permission gates stay a single source of truth. Everything
   below is layout only. */
.shrtct-qr-row .card-body {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 12px 52px 12px 40px;
}

.shrtct-qr-row .shrtct-qr-check { top: 50%; left: 16px; transform: translateY(-50%); }
.shrtct-qr-row .shrtct-bio-kebab { top: 50%; right: 12px; transform: translateY(-50%); }

.shrtct-qr-row .text-center {
    display: flex;
    align-items: center;
    gap: 14px;
    text-align: left !important;
    flex: 1 1 auto;
    min-width: 0;
}

.shrtct-qr-row .shrtct-qr-thumb { padding: 5px; flex: none; }
.shrtct-qr-row .shrtct-qr-thumb img { width: 44px; height: 44px; }

.shrtct-qr-row .text-center > .mt-2 { margin-top: 0 !important; min-width: 0; }

.shrtct-qr-row .shrtct-bio-name {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.shrtct-qr-row .shrtct-bio-meta,
.shrtct-qr-row .shrtct-bio-channels {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
    flex: none;
}

@media (max-width: 767.98px) {
    /* Too little width for one line; fall back to the stacked card. */
    .shrtct-qr-row .card-body { display: block; padding: 16px 52px 16px 40px; }
    .shrtct-qr-row .text-center { display: block; }
    .shrtct-qr-row .shrtct-bio-meta { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line-2); }
}


/* =========================================================================
   MOBILE FIXES  (shrtct-mobile-v1)
   -------------------------------------------------------------------------
   Everything below was found by loading the dashboard at 390px in a real
   browser and measuring it, not by reading the CSS and guessing.
   ========================================================================= */

/* 1. The page was dragged 24px off the left edge on every phone.
      The base theme collapses the sidebar with margin-left:-260px, its own
      original width. This theme narrowed the sidebar to --rail (236px) and
      never updated that offset, so a 236px sidebar pulled -260px leaves the
      content -24px off screen: clipped titles, sliced card borders, a
      half-visible menu button. The offset must always equal the width. */
.sidebar.collapsed { margin-left: calc(var(--rail) * -1); }

@media (min-width: 1px) and (max-width: 991.98px) {
    .sidebar { margin-left: calc(var(--rail) * -1); }
    .sidebar.collapsed { margin-left: 0; }

    /* The second half of the same bug. The sidebar is --rail wide but its
       inner .sidebar-content keeps the base theme's hard-coded 260px, so even
       with the sidebar correctly parked off screen its contents spilled 24px
       back out and painted a white strip over the left edge of every page -
       titles were not shifted, they were covered. Scoped to the mobile
       breakpoint so the desktop sidebar keeps the look it has today. */
    .sidebar-content { width: var(--rail); max-width: var(--rail); }
    .sidebar { max-width: var(--rail); overflow-x: hidden; }
}

@media (max-width: 767.98px) {

    /* 2. Long unbroken strings (tracking snippets, page paths) ran to 770px
          inside a 390px screen. */
    .card code, .card pre, #analytics-dashboard code {
        white-space: pre-wrap;
        word-break: break-all;
        overflow-wrap: anywhere;
    }
    .card pre { max-width: 100%; }

    /* 3. Web Analytics header: title, three buttons and a 220px date picker
          were forced onto one row that ran to 479px. Stack it instead. */
    #analytics-dashboard > .d-flex:first-child {
        flex-wrap: wrap;
        gap: 12px;
    }
    #analytics-dashboard > .d-flex:first-child > .ms-auto {
        margin-left: 0 !important;
        width: 100%;
        justify-content: flex-start !important;
    }
    #analytics-dashboard > .d-flex:first-child input[name="customreport"] {
        width: 100% !important;
        flex: 1 1 100%;
        order: 9;
    }
    #analytics-dashboard > .d-flex:first-child .me-2 { margin-right: 0 !important; }

    /* A warning banner with a button beside it squeezes its own text into a
       narrow column; let the button drop underneath. */
    #analytics-dashboard .card.border-warning > .card-body {
        flex-wrap: wrap;
        gap: 12px;
    }
    #analytics-dashboard .card.border-warning .btn.ms-auto { margin-left: 0 !important; }

    /* 4. Legibility floor. 10-11px labels are below what is comfortable on a
          phone held at arm's length; nothing meant to be read goes under 12. */
    .sidebar-header { font-size: 11.5px; letter-spacing: .06em; }
    small, .small, .form-text { font-size: 12.5px; }
    .table thead th { font-size: 12px; }
    .card .text-uppercase { font-size: 12px; letter-spacing: .04em; }
    .badge { font-size: 11.5px; }

    /* 5. Tap targets. Apple and Google both put the minimum around 44px;
          the dashboard had ~30 controls per page under 36px. Inline-flex keeps
          the label vertically centred once the box grows. */
    .btn, .btn-sm {
        min-height: 42px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
    }
    .btn.w-100, .btn.d-block { display: flex; }
    .form-control, .form-control-sm, .form-select, .form-select-sm { min-height: 42px; font-size: 16px; }
    .sidebar-link { min-height: 44px; display: flex; align-items: center; }
    .dropdown-item { min-height: 42px; display: flex; align-items: center; }
    .page-link { min-height: 40px; min-width: 40px; display: inline-flex; align-items: center; justify-content: center; }

    /* 16px on inputs is also what stops iOS Safari zooming the whole page in
       every time a field is focused. */

    /* 6. Cards breathe a little less on a narrow screen, so more fits. */
    .card-body { padding: 16px; }
    main.content { padding-left: 14px; padding-right: 14px; }

    /* 5b. The link rows and the home dashboard carry their own small type and
           small controls, measured at 390px: 90 <small> tags at 11px losing to
           a more specific theme rule, "clicks" captions at 9.5px, a 14px
           checkbox, a 20px copy button, a 26px menu button. Inline links
           inside sentences are left alone - target-size guidance exempts them. */
    body small, body .small { font-size: 12.5px !important; }
    body .shrtct-activity-time,
    body .shrtct-row-meta,
    body .shrtct-row-clicks-label,
    body .shrtct-metric-label,
    body .shrtct-chart-cap,
    body .shrtct-eyebrow { font-size: 12px; }
    body .shrtct-mono,
    body .shrtct-metric-sub { font-size: 12.5px; }

    body .shrtct-row-check { width: 22px; height: 22px; }
    /* The Copy button keeps its size; only its tap area grows, through an
       invisible ::after. Making the button itself 38px pushed it over the
       click count on every row - measured, screenshotted, reverted. */
    body a.copy.inline-copy { position: relative; flex: 0 0 auto; }
    body a.copy.inline-copy::after { content: ''; position: absolute; inset: -12px -10px; }

    /* The squeeze behind that overlap was already there on long links: the
       short URL is one unbreakable string in a flex row, so it could not
       shrink and pushed Copy into the right-hand column. Let it break. */
    body .shrtct-row-short { min-width: 0; }
    body .shrtct-row-short > span {
        min-width: 0; flex: 0 1 auto;
        overflow-wrap: anywhere; word-break: break-all;
    }
    body a.shrtct-row-clicks {
        display: flex; flex-direction: column; justify-content: center;
        min-height: 42px;
    }
    body a.sidebar-toggle {
        min-width: 44px; min-height: 44px;
        align-items: center; justify-content: center;
    }

    /* 7. Wide tables scroll inside their card instead of stretching the page,
          with a hint of momentum on iOS. */
    .table-responsive { -webkit-overflow-scrolling: touch; }
    .table td, .table th { white-space: nowrap; }
    .table td:first-child { white-space: normal; min-width: 140px; }
}

/* ===== ravyn-ui-v1 : ad report, customers, journey, setup ===== */
.rv-report .card { border-radius: var(--radius); margin-bottom: 16px; }
.rv-kpi-label { font-size: 12px; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-2); }
.rv-kpi-value { font-size: 24px; font-weight: 700; line-height: 1.2; color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rv-kpi-value.rv-kpi-wrap { font-size: 18px; white-space: normal; overflow-wrap: anywhere; }
.rv-kpi-note { font-size: 12px; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rv-tap { min-height: 44px; display: inline-flex; align-items: center; }
.rv-tap-inline { min-height: 44px; display: inline-flex; align-items: center; gap: 6px; }

.rv-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding-bottom: 16px; }
.rv-seg { display: inline-flex; background: var(--sunk); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 3px; max-width: 100%; overflow-x: auto; }
.rv-seg a { padding: 0 14px; min-height: 38px; display: inline-flex; align-items: center; border-radius: 8px; font-size: 14px; font-weight: 600; color: var(--ink-2); text-decoration: none; white-space: nowrap; }
.rv-seg a.active { background: var(--surface); color: var(--ink); box-shadow: 0 1px 2px rgba(20,21,26,.08); }
.rv-model { display: flex; align-items: center; margin-left: auto; }
.rv-model .form-select { min-height: 44px; min-width: 190px; font-size: 14px; }
.rv-model label { font-size: 13px; white-space: nowrap; }

.rv-table { font-size: 14px; font-variant-numeric: tabular-nums; }
.rv-table thead th { font-size: 12px; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-2); font-weight: 600; white-space: nowrap; border-bottom: 1px solid var(--line); background: var(--sunk); }
.rv-table td, .rv-table th { padding: 12px 14px; white-space: nowrap; }
.rv-table tfoot th { border-top: 2px solid var(--line); background: var(--sunk); }
.rv-table .rv-name { white-space: normal; min-width: 200px; max-width: 340px; font-weight: 600; overflow-wrap: anywhere; }
.rv-table .rv-name small { font-weight: 400; font-size: 12px; font-family: var(--font-mono); }
.rv-table th:first-child, .rv-table td:first-child { position: sticky; left: 0; background: var(--surface); z-index: 1; }
.rv-table thead th:first-child, .rv-table tfoot th:first-child { background: var(--sunk); }
.rv-row-muted td { color: var(--ink-2); font-style: italic; }
.rv-pos { color: var(--pos); font-weight: 600; } .rv-neg { color: var(--neg); font-weight: 600; }
.rv-roas { display: inline-block; padding: 2px 8px; border-radius: 999px; font-weight: 700; font-size: 13px; }
.rv-roas.is-good { background: var(--pos-soft); color: var(--pos); } .rv-roas.is-bad { background: var(--neg-soft); color: var(--neg); }
.rv-footnote { font-size: 13px; color: var(--ink-2); border-top: 1px solid var(--line); }
.rv-footnote svg { width: 14px; height: 14px; }

.rv-step { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 12px; border: 1px solid var(--line); border-radius: 999px; font-size: 14px; font-weight: 600; color: var(--ink); text-decoration: none; }
.rv-step svg { width: 16px; height: 16px; } .rv-step.is-done { color: var(--pos); background: var(--pos-soft); border-color: transparent; }

.rv-step-head { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.rv-step-num { flex: 0 0 32px; height: 32px; border-radius: 50%; background: var(--accent-soft); color: var(--accent-ink); font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.rv-code { position: relative; background: #14151A; border-radius: var(--radius-sm); }
.rv-code pre { margin: 0; padding: 14px 84px 14px 14px; color: #E9E9F2; font-family: var(--font-mono); font-size: 13px; line-height: 1.55; white-space: pre-wrap; word-break: break-all; }
.rv-code .rv-copy { position: absolute; top: 8px; right: 8px; min-height: 36px; min-width: 64px; }
.rv-health { display: flex; align-items: center; gap: 8px; margin-top: 14px; font-size: 14px; }
.rv-light { flex: 0 0 10px; height: 10px; border-radius: 50%; background: #C9C9CF; }
.rv-light.is-ok { background: var(--pos); box-shadow: 0 0 0 4px var(--pos-soft); }
.rv-list { padding-left: 20px; } .rv-list li { margin-bottom: 10px; } .rv-list code { overflow-wrap: anywhere; }
.rv-inline-form { display: flex; gap: 8px; } .rv-inline-form .form-control, .rv-stack-form .form-control { min-height: 44px; font-size: 16px; }
.rv-stack-form { display: grid; gap: 12px; max-width: 520px; }
.rv-setup details summary { cursor: pointer; min-height: 40px; display: flex; align-items: center; }

.rv-timeline { list-style: none; margin: 0; padding: 0; }
.rv-event { display: flex; gap: 12px; padding: 0 0 18px; position: relative; font-size: 14px; }
.rv-event:not(:last-child)::before { content: ''; position: absolute; left: 15px; top: 32px; bottom: 0; width: 2px; background: var(--line); }
.rv-event-icon { flex: 0 0 32px; height: 32px; border-radius: 50%; background: var(--sunk); border: 1px solid var(--line); display: inline-flex; align-items: center; justify-content: center; z-index: 1; }
.rv-event-icon svg { width: 15px; height: 15px; }
.rv-event.is-sale .rv-event-icon { background: var(--pos-soft); color: var(--pos); border-color: transparent; }
.rv-event.is-refund .rv-event-icon { background: var(--neg-soft); color: var(--neg); border-color: transparent; }
.rv-event.is-click .rv-event-icon { background: var(--accent-soft); color: var(--accent-ink); border-color: transparent; }
.rv-event-body { flex: 1; min-width: 0; } .rv-event-body time { font-size: 13px; }

@media (max-width: 767.98px) {
    .rv-kpi-value { font-size: 20px; }
    .rv-controls { gap: 10px; } .rv-seg { width: 100%; } .rv-seg a { flex: 1; justify-content: center; padding: 0 8px; min-height: 42px; }
    .rv-model { margin-left: 0; width: 100%; } .rv-model .form-select { flex: 1; min-width: 0; font-size: 16px; }
    .rv-table .rv-name { min-width: 150px; max-width: 190px; }
    .rv-table td, .rv-table th { padding: 12px 10px; }
    .rv-inline-form { flex-direction: column; } .rv-inline-form .btn, .rv-stack-form .btn { width: 100%; justify-content: center; }
    .rv-code pre { padding: 50px 12px 12px; } .rv-code .rv-copy { min-height: 40px; }
}
/* ===== /ravyn-ui-v1 ===== */
/* ===== /ravyn-ui-v1 ===== */
/* ===== ravyn-ui-v1.1 : legibility floor on setup ===== */
.rv-report .form-label { font-size: 13px; letter-spacing: 0; text-transform: none; }
.rv-report code { font-size: 13px; }

/* ===== ravyn-ui-v1.2 : setup guidance and accessible controls ===== */
.rv-report, .rv-report h1, .rv-report h2, .rv-report .form-label { color: var(--ink); }
.rv-setup-nav { display: flex; flex-wrap: wrap; gap: 8px; }
.rv-setup .card[id] { scroll-margin-top: 24px; }
.rv-copy-status:empty { display: none; }
.rv-copy-status { padding: 10px 14px; background: var(--info-soft); color: var(--ink); border-radius: var(--radius-sm); }
.rv-light-text { min-width: 0; overflow-wrap: anywhere; }
.rv-report .rv-step, .rv-report .rv-copy { min-height: 44px; }
.rv-model { gap: 8px; }
.rv-model .rv-tap { flex-shrink: 0; }
.rv-report .rv-code pre { overflow-wrap: anywhere; }
.rv-report a:focus-visible, .rv-report button:focus-visible,
.rv-report summary:focus-visible, .rv-report pre:focus-visible {
    outline: 3px solid var(--accent); outline-offset: 3px;
}
.rv-metric-help summary { cursor: pointer; min-height: 44px; padding-block: 10px; }
.rv-definitions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 24px; }
.rv-definitions dt { color: var(--ink); margin-bottom: 4px; }
.rv-definitions dd { margin: 0; line-height: 1.6; }
@media (max-width: 575.98px) {
    .rv-definitions { grid-template-columns: 1fr; }
    .rv-model { flex-wrap: wrap; }
    .rv-model label { width: 100%; }
    .rv-code pre { padding-top: 60px; }
}

/* ravyn-ui-v2 START — supplied 2026-09-20 design, opt-in surfaces only. */
.rv-home, .rv-shell-v2, .rv-report {
    --hero: #DDD4FF; --inverse: #fff; --rail: 228px; --radius: 16px;
    --ink-2: #5C6069; --line: #E6E5E0; --accent: #5A31F4; --accent-ink: #4425D6;
    --accent-soft: #EFEAFF; --pos: #0E7A4E; --pos-soft: #E4F3EB;
    --neg: #B4321F; --neg-soft: #FBE9E5; --warn: #9A5B08; --warn-soft: #FBF0DE;
    font-family: var(--font-sans); color: var(--ink); font-size: 16px; line-height: 1.5;
}
:is(html[data-theme="dark"], html[data-scheme="dark"], html.c_darkmode) :is(.rv-home,.rv-shell-v2,.rv-report),
body.dark:is(.rv-home,.rv-shell-v2), body.dark .rv-report {
    --bg:#0B0C0F; --surface:#141519; --sunk:#101115; --ink:#F1F1EF; --ink-2:#B0B3BE;
    --line:#30323B; --accent:#B5A1FF; --accent-soft:#292043; --accent-ink:#C5B5FF;
    --pos:#7DDCB0; --pos-soft:#173328; --neg:#FFA694; --neg-soft:#402822;
    --warn:#F0C07F; --warn-soft:#3A2D1A; --hero:#241C40; --inverse:#191126; color-scheme:dark;
}
.rv-home { background:var(--surface); margin:0; }
.rv-home *, .rv-report * { box-sizing:border-box; }
:is(.rv-home,.rv-report) [hidden] { display:none !important; }
:is(.rv-home,.rv-report) :is(h1,h2,h3,h4,strong,label,summary) { color:var(--ink); }
:is(.rv-home,.rv-report) p { color:var(--ink-2); }
:is(.rv-home,.rv-report) a { color:var(--accent-ink); }
:is(.rv-home,.rv-report,.rv-shell-v2) :is(a,button,input,select,summary,[tabindex]):focus-visible {
    outline:3px solid var(--accent); outline-offset:3px;
}
:is(.rv-home,.rv-report) .btn, .rv-shell-v2 .navbar .nav-link, .rv-shell-v2 .sidebar-toggle {
    min-height:44px; display:inline-flex; align-items:center; justify-content:center; gap:8px;
}
:is(.rv-home,.rv-report) .btn { border-radius:9px; padding:10px 16px; font-size:14px; font-weight:600; line-height:1.4; }
:is(.rv-home,.rv-report) :is(.btn-light,.btn-white) { color:var(--ink); background:var(--surface); border:1px solid var(--line); }
:is(.rv-home,.rv-report) .btn-primary { color:var(--inverse); background:var(--accent); border-color:var(--accent); }
:is(.rv-home,.rv-report) .btn-primary:hover { color:var(--inverse); filter:brightness(.94); }
:is(.rv-home,.rv-report) :is(input,select,textarea) { color:var(--ink); background:var(--surface); border:1px solid var(--line); min-height:44px; font-size:14px; border-radius:9px; }
:is(.rv-home,.rv-report) :is(input,select,textarea):focus { background:var(--surface); color:var(--ink); }
:is(.rv-home,.rv-report) input::placeholder { color:var(--ink-2); opacity:1; }
:is(.rv-home,.rv-report) :is(.small,small,.rv-small) { font-size:12px; }
.rv-skip { position:fixed; left:12px; top:-90px; z-index:1100; padding:12px; background:var(--surface); color:var(--ink); border:2px solid var(--accent); }
.rv-skip:focus { top:12px; }
.rv-brand-mark { display:inline-grid; place-items:center; width:30px; height:30px; border-radius:9px; background:var(--accent); color:var(--inverse); font-size:24px; font-weight:700; vertical-align:middle; }
.rv-eyebrow { font-size:12px; letter-spacing:.12em; text-transform:uppercase; font-weight:600; color:var(--ink-2); }
.rv-home .rv-container { width:min(1160px,calc(100% - 64px)); margin-inline:auto; }
.rv-home .rv-site-nav { min-height:88px; display:flex; align-items:center; justify-content:space-between; gap:20px; }
.rv-home .rv-brand { font-size:28px; font-weight:700; letter-spacing:-1.5px; display:inline-flex; align-items:center; gap:9px; color:var(--ink); text-decoration:none; }
.rv-home .rv-brand > span:last-child:not(.rv-brand-mark) { color:var(--accent); }
.rv-home .rv-site-links { display:flex; gap:28px; font-size:14px; }
.rv-home .rv-site-links a { color:var(--ink-2); padding:12px 0; }
.rv-home .rv-account-menu { position:relative; border:0; padding:0; }
.rv-home .rv-account-menu summary { font-size:13px; }
.rv-home .rv-account-menu nav { position:absolute; right:0; top:100%; z-index:10; min-width:180px; display:grid; padding:12px; border:1px solid var(--line); border-radius:10px; background:var(--surface); box-shadow:var(--shadow); }
.rv-home .rv-account-menu nav a { padding:10px; min-height:44px; font-size:14px; }
.rv-home .rv-actions { display:flex; align-items:center; justify-content:center; gap:10px; flex-wrap:wrap; }
.rv-home svg.feather { width:18px; height:18px; }
.rv-home .rv-badge { display:inline-flex; padding:5px 9px; border-radius:6px; font-size:12px; font-weight:600; background:var(--accent-soft); color:var(--accent-ink); }
.rv-home .rv-neutral { color:var(--ink-2); background:var(--sunk); }
.rv-home .rv-hero { padding:60px 0 0; text-align:center; background:linear-gradient(180deg,var(--surface),var(--hero)); }
.rv-home h1 { font-size:clamp(48px,6.5vw,86px); line-height:1.07; letter-spacing:-.065em; font-weight:500; margin:20px auto 22px; }
.rv-home h1 em { font-style:normal; color:var(--accent-ink); }
.rv-home .rv-lead { font-size:18px; line-height:1.65; max-width:590px; margin:0 auto 26px; }
.rv-home .rv-hero-note { font-size:12px; margin:15px 0 38px; }
.rv-home .rv-console { background:var(--surface); border:1px solid var(--line); border-radius:18px 18px 0 0; padding:24px; text-align:start; max-width:1060px; margin:auto; box-shadow:0 16px 60px #14151a0d; }
.rv-home .rv-console-head { display:flex; justify-content:space-between; align-items:center; gap:15px; padding-bottom:20px; margin-bottom:20px; border-bottom:1px solid var(--line); }
.rv-home .rv-console-head strong { display:flex; align-items:center; gap:10px; }
.rv-home .rv-console-grid { display:grid; grid-template-columns:1.4fr 1fr; gap:30px; }
.rv-home .rv-console-metrics { display:grid; grid-template-columns:1fr 1fr; gap:15px; }
.rv-home .rv-console-metrics strong { display:block; font:500 clamp(22px,2.9vw,42px)/1.3 var(--font-mono); letter-spacing:-.07em; margin:6px 0 16px; }
.rv-home .rv-positive { color:var(--pos); }
.rv-home .rv-example-chart { width:100%; height:155px; }
.rv-home .rv-legend { display:flex; gap:22px; font-size:12px; }
.rv-home .rv-legend span::before { content:''; width:15px; height:3px; display:inline-block; background:var(--accent); margin-right:5px; vertical-align:middle; }
.rv-home .rv-legend span:last-child::before { background:var(--ink-2); }
.rv-home .rv-example-rows > div { display:flex; align-items:center; justify-content:space-between; gap:12px; border-top:1px solid var(--line); padding:14px 0; font-size:14px; }
.rv-home .rv-example-rows > strong { display:block; margin-bottom:14px; }
.rv-home .rv-example-rows small { display:block; color:var(--ink-2); }
.rv-home .rv-example-rows strong:not(:first-child) { font-family:var(--font-mono); color:var(--pos); }
.rv-home .rv-journey-band { display:flex; align-items:center; justify-content:space-between; gap:12px; padding-top:18px; margin-top:12px; border-top:1px solid var(--line); }
.rv-home .rv-journey-band strong { display:block; font-size:14px; }
.rv-home .rv-console .rv-small { margin:16px 0 0; }
.rv-home .rv-underhero { display:flex; justify-content:center; gap:36px; padding:25px 0; flex-wrap:wrap; color:var(--ink-2); font-size:13px; }
.rv-home .rv-section { padding:100px 0; }
.rv-home .rv-section-heading { max-width:650px; margin-bottom:42px; }
.rv-home h2 { font-size:clamp(34px,4vw,52px); font-weight:500; letter-spacing:-.045em; line-height:1.07; margin:16px 0 22px; }
.rv-home .rv-section-heading p { font-size:17px; }
.rv-home .rv-feature-grid { display:grid; grid-template-columns:1.25fr 1fr 1fr; gap:20px; }
.rv-home .rv-feature { padding:26px; border:1px solid var(--line); border-radius:16px; background:var(--sunk); }
.rv-home .rv-feature h3 { font-size:22px; margin:26px 0 14px; letter-spacing:-.015em; }
.rv-home .rv-feature p { font-size:14px; margin:0; }
.rv-home .rv-proof { padding:13px; background:var(--surface); border:1px solid var(--line); border-radius:8px; min-height:132px; }
.rv-home .rv-proof strong { display:block; font:500 26px var(--font-mono); margin:12px 0; }
.rv-home .rv-feature-dark { background:#14151a; border-color:#14151a; }
.rv-home .rv-feature-dark :is(h3,.rv-five) { color:#F1F1EF; }
.rv-home .rv-feature-dark :is(p,.rv-eyebrow) { color:#C2BED0; }
.rv-home .rv-five { font:500 55px var(--font-mono); margin-top:30px; letter-spacing:-.07em; }
.rv-home .rv-walkthrough { background:var(--bg); border-block:1px solid var(--line); }
.rv-home .rv-two-col { display:grid; grid-template-columns:1fr 1.1fr; gap:65px; align-items:center; }
.rv-home .rv-walk-controls { display:grid; }
.rv-home .rv-walk-controls button { background:transparent; border:0; border-top:1px solid var(--line); text-align:start; padding:20px 0; font-size:19px; color:var(--ink-2); }
.rv-home .rv-walk-controls button[aria-pressed="true"] { color:var(--accent-ink); }
.rv-home .rv-walk-controls small { font-family:var(--font-mono); margin-inline-end:14px; }
.rv-home .rv-evidence-card { padding:32px; min-height:470px; background:var(--surface); border:1px solid var(--line); border-radius:20px; box-shadow:0 16px 60px #14151a0d; }
.rv-home .rv-evidence-card h3 { font-size:25px; margin:20px 0; }
.rv-home .rv-home-timeline { padding:0; margin:28px 0; list-style:none; }
.rv-home .rv-home-timeline li { position:relative; border-inline-start:1px solid var(--line); margin-inline-start:7px; padding:0 0 26px 28px; }
.rv-home .rv-home-timeline li::before { content:''; position:absolute; left:-6px; top:4px; width:12px; height:12px; border-radius:50%; background:var(--accent); }
.rv-home .rv-home-timeline li:last-child { border:0; }
.rv-home .rv-home-timeline small, .rv-home .rv-home-timeline strong { display:block; }
.rv-home .rv-home-timeline small { color:var(--ink-2); margin-bottom:6px; }
.rv-home .rv-home-timeline p { font-size:14px; margin:5px 0 0; }
.rv-home .rv-honesty { border:1px solid var(--line); border-radius:16px; overflow:hidden; margin:0 0 20px; }
.rv-home .rv-honesty > div { padding:20px; border-bottom:1px solid var(--line); display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap; }
.rv-home .rv-honesty > div:last-child { background:var(--sunk); border:0; }
.rv-home .rv-honesty dd { margin:0; }
.rv-home .rv-setup-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:28px; }
.rv-home .rv-setup-grid article { border-top:1px solid var(--line); padding-top:24px; }
.rv-home .rv-setup-grid h3 { font-size:18px; margin:18px 0 10px; }
.rv-home .rv-setup-grid p { font-size:14px; }
.rv-home .rv-text-link { display:inline-block; padding:12px 0; margin-top:16px; }
.rv-home .rv-faq { max-width:760px; }
.rv-home .rv-faq h2 { text-align:center; margin-bottom:40px; }
.rv-home details { border-top:1px solid var(--line); padding:16px 0; }
.rv-home summary { font-weight:600; cursor:pointer; padding:8px 0; min-height:44px; }
.rv-home details p { margin:12px 0 0; }
.rv-home .rv-closing { background:var(--accent-soft); text-align:center; padding:80px 24px; border-radius:24px; }
.rv-home .rv-closing p { max-width:520px; margin:0 auto 25px; }
.rv-home .rv-site-footer { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:20px; padding:35px 0; font-size:12px; }
.rv-home .rv-site-footer nav { display:flex; gap:16px; flex-wrap:wrap; align-items:center; }
.rv-home .rv-site-footer a { padding-block:12px; }
/* Shell keeps the existing sidebar, SimpleBar and Bootstrap hooks. */
.rv-shell-v2 .wrapper, .rv-shell-v2 .main, .rv-shell-v2 .content { background:var(--bg); }
.rv-shell-v2 .sidebar { width:228px; min-width:228px; background:var(--surface); border-inline-end:1px solid var(--line); }
.rv-shell-v2 .sidebar-content { background:var(--surface); }
.rv-shell-v2 .sidebar-brand { display:flex; align-items:center; gap:9px; font-size:28px; letter-spacing:-1px; color:var(--ink); padding:30px; }
.rv-shell-v2 .sidebar-link { min-height:48px; font-size:14px; color:var(--ink-2); margin:5px 14px; }
.rv-shell-v2 .sidebar-item.active .sidebar-link { background:var(--accent-soft); color:var(--accent-ink); }
.rv-shell-v2 .sidebar-header { font-size:12px; letter-spacing:.12em; color:var(--ink-2); padding:24px 28px 8px; }
.rv-shell-v2 .navbar { min-height:72px; background:var(--surface); border-bottom:1px solid var(--line); padding:12px 24px; }
.rv-shell-v2 .navbar :is(.text-dark,.text-black) { color:var(--ink) !important; }
.rv-shell-v2 .navbar .nav-icon { min-width:44px; min-height:44px; line-height:44px; text-align:center; }
.rv-shell-v2 .content { padding:32px; width:100%; max-width:1600px; margin-inline:auto; min-width:0; }
.rv-shell-v2 .main { min-width:0; }
.rv-shell-v2 .rv-workspace { padding:20px 28px; display:grid; gap:10px; overflow-wrap:anywhere; }
.rv-shell-v2 .rv-workspace strong { color:var(--ink); font-size:14px; }
.rv-shell-v2 .rv-workspace a { color:var(--accent-ink); font-size:13px; min-height:44px; padding-top:12px; }
.rv-shell-v2 .rv-nav-close { display:none; }
.rv-shell-v2 .rv-nav-backdrop { position:fixed; inset:0; z-index:1039; background:#0008; border:0; }
/* Report and supporting views */
.rv-report h1 { font-size:36px; letter-spacing:-.045em; line-height:1.12; margin:10px 0 !important; }
.rv-report .card { background:var(--surface); color:var(--ink); border:1px solid var(--line) !important; border-radius:16px; box-shadow:none !important; margin-bottom:20px; }
.rv-report .card-body { padding:24px; }
.rv-report .text-muted, .rv-report .rv-kpi-note { color:var(--ink-2) !important; }
.rv-report .rv-controls { margin:24px 0; padding:0; gap:16px; }
.rv-report .rv-seg { border:1px solid var(--line); background:var(--surface); border-radius:10px; padding:4px; flex-wrap:wrap; }
.rv-report .rv-seg a { min-height:40px; padding:9px 13px; font-size:14px; color:var(--ink-2); }
.rv-report .rv-seg a.active { background:var(--accent-soft); color:var(--accent-ink); border-radius:6px; }
.rv-report .rv-model { gap:10px; }
.rv-report .rv-model label { font-size:13px; color:var(--ink); }
.rv-report .rv-kpis { display:grid; grid-template-columns:1.3fr 1fr 1fr 1fr; gap:14px; margin:24px 0 14px; }
.rv-report .rv-kpi { padding:22px 20px; background:var(--surface); border:1px solid var(--line); border-radius:16px; min-width:0; }
.rv-report .rv-kpi.rv-featured { background:var(--accent-soft); border-color:var(--accent-soft); }
.rv-report .rv-kpi-label { text-transform:none; font-size:13px; letter-spacing:0; font-weight:400; color:var(--ink-2); }
.rv-report .rv-kpi-value { font:500 clamp(22px,2.4vw,36px)/1.3 var(--font-mono); letter-spacing:-.05em; padding:17px 0; overflow-wrap:anywhere; }
.rv-report .rv-kpi-note { font-size:12px; margin:0; white-space:normal; overflow:visible; text-overflow:clip; }
.rv-report .rv-data-note { font-size:12px; margin:0 0 14px; }
.rv-report .rv-summary-strip { display:flex; gap:26px; flex-wrap:wrap; font-size:13px; margin:20px 0; color:var(--ink-2); }
.rv-report .rv-summary-strip strong { margin-left:6px; font-family:var(--font-mono); }
.rv-report .rv-review-notice { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:16px; background:var(--warn-soft); padding:20px; border-radius:16px; margin-bottom:20px; }
.rv-report .rv-review-notice :is(strong,p,label) { color:var(--warn); }
.rv-report .rv-review-notice p { margin:5px 0 0; font-size:13px; }
.rv-report .rv-review-control { display:flex; align-items:center; gap:8px; font-size:14px; cursor:pointer; }
.rv-report .rv-unavailable { display:flex; flex-direction:column; align-items:center; justify-content:center; min-height:180px; text-align:center; padding:20px; background:var(--sunk); border-radius:10px; gap:10px; margin-top:20px; }
.rv-report .rv-unavailable p { max-width:550px; margin:0; font-size:14px; }
.rv-report .rv-table-tools { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:16px; margin-bottom:18px; }
.rv-report .rv-search-control { font-size:12px; }
.rv-report .rv-search-control input { display:block; width:240px; margin-top:5px; }
.rv-report .rv-table-wrap { border-block:1px solid var(--line); overflow-x:auto; }
.rv-report .rv-table { min-width:1050px; color:var(--ink); --bs-table-bg:var(--surface); --bs-table-color:var(--ink); }
.rv-report .rv-table :is(th,td) { border-color:var(--line); padding:16px; color:var(--ink); background:var(--surface); font-size:13px; vertical-align:middle; }
.rv-report .rv-table th { background:var(--sunk); color:var(--ink-2); font-size:12px; }
.rv-report .rv-table td:not(:first-child) { font-family:var(--font-mono); white-space:nowrap; }
.rv-report .rv-table :is(th,td):first-child { position:sticky; left:0; z-index:1; min-width:200px; max-width:300px; white-space:normal; overflow-wrap:anywhere; }
.rv-report .rv-table .rv-name span { max-width:280px; white-space:normal; }
.rv-report .rv-table .rv-row-muted td { background:var(--sunk); color:var(--ink-2); }
.rv-report .rv-table button { background:none; border:0; color:inherit; padding:8px 0; text-align:inherit; min-height:44px; font-size:inherit; }
.rv-report .rv-table .rv-pos { color:var(--pos); } .rv-report .rv-table .rv-neg { color:var(--neg); }
.rv-report .rv-table .rv-roas { border-radius:5px; padding:4px 7px; font-size:12px; }
.rv-report .rv-roas.is-good { color:var(--pos); background:var(--pos-soft); }
.rv-report .rv-roas.is-bad { color:var(--neg); background:var(--neg-soft); }
.rv-report .rv-footnote { font-size:12px; }
.rv-report .rv-custom-range { width:100%; font-size:13px; }
.rv-report .rv-custom-range summary { min-height:44px; padding:10px 0; cursor:pointer; }
.rv-report .rv-date-inputs { display:flex; flex-wrap:wrap; align-items:end; gap:12px; }
.rv-report .rv-date-inputs label { display:grid; gap:5px; }
.rv-report .rv-step { border-radius:8px; background:var(--surface); border:1px solid var(--line); color:var(--ink-2); }
.rv-report .rv-step.is-done { background:var(--pos-soft); color:var(--pos); }
.rv-report .rv-step-num { background:var(--accent-soft); color:var(--accent-ink); border:0; }
.rv-report .rv-step-head { margin-bottom:20px; }
.rv-report .rv-code { background:var(--sunk); border:1px solid var(--line); border-radius:10px; }
.rv-report .rv-code pre { color:var(--ink); font-size:12px; }
.rv-report .rv-health { padding-top:15px; font-size:13px; }
.rv-report .rv-timeline .rv-event-body { background:var(--sunk); border:1px solid var(--line); padding:20px; border-radius:10px; }
.rv-report .rv-event-icon { color:var(--accent-ink); background:var(--accent-soft); }
.rv-report .rv-event.is-sale .rv-event-icon { color:var(--pos); background:var(--pos-soft); }
@media(min-width:1600px) { .rv-shell-v2 .content { padding:40px; } }
@media(max-width:1100px) {
    .rv-report .rv-kpis { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .rv-shell-v2 .content { padding:26px; }
    .rv-home .rv-feature-grid { grid-template-columns:1fr 1fr; }
    .rv-home .rv-feature-grid > :last-child { grid-column:1/-1; }
    .rv-home .rv-setup-grid { grid-template-columns:1fr 1fr; }
}
@media(min-width:801px) { .rv-shell-v2 .sidebar { margin-left:0 !important; } .rv-shell-v2 .sidebar-toggle { display:none !important; } }
@media(max-width:800px) {
    .rv-shell-v2 .sidebar { position:fixed; inset:0 auto 0 0; width:280px; min-width:280px; max-width:85vw; margin:0 !important; transform:translateX(-100%); z-index:1040; height:100dvh; }
    .rv-shell-v2 .sidebar.collapsed { transform:translateX(0); }
    .rv-shell-v2 .sidebar-toggle { display:inline-flex !important; }
    .rv-shell-v2 .rv-nav-close { display:flex; margin:10px 10px 0 auto; min-width:44px; min-height:44px; color:var(--ink); }
    .rv-shell-v2 .navbar { padding:10px 16px; }
    .rv-shell-v2 .content { padding:24px 16px; }
    .rv-shell-v2.rv-nav-open { overflow:hidden; }
    .rv-report h1 { font-size:29px; }
    .rv-report .rv-model { flex-wrap:wrap; width:100%; margin:0; }
    .rv-report .rv-model label { width:100%; }
    .rv-report .rv-kpi { padding:18px 14px; }
    .rv-report .rv-kpi-value { font-size:24px; }
    .rv-report .card-body { padding:18px; }
    .rv-report .rv-table :is(td,th):first-child { min-width:150px; max-width:180px; }
    .rv-report .rv-search-control, .rv-report .rv-search-control input { width:100%; }
    .rv-home .rv-container { width:calc(100% - 32px); }
    .rv-home .rv-site-nav { min-height:88px; flex-wrap:wrap; gap:12px; padding:16px 0; }
    .rv-home .rv-site-links { order:3; width:100%; justify-content:center; }
    .rv-home .rv-site-nav .rv-actions { gap:6px; }
    .rv-home .rv-site-nav .btn { padding:10px; font-size:12px; }
    .rv-home .rv-site-nav .rv-actions > .btn-primary { display:none; }
    .rv-home .rv-hero { padding:40px 0 0; }
    .rv-home h1 { font-size:clamp(42px,9vw,65px); }
    .rv-home .rv-lead { font-size:16px; }
    .rv-home .rv-console { padding:18px; }
    .rv-home .rv-console-grid, .rv-home .rv-two-col, .rv-home .rv-feature-grid { grid-template-columns:1fr; gap:24px; }
    .rv-home .rv-console-head, .rv-home .rv-journey-band { flex-wrap:wrap; }
    .rv-home .rv-console-metrics strong { font-size:clamp(20px,5.4vw,32px); }
    .rv-home .rv-section { padding:64px 0; }
    .rv-home .rv-section-heading { margin-bottom:28px; }
    .rv-home .rv-evidence-card { padding:24px; min-height:400px; }
    .rv-home .rv-closing { padding:50px 20px; }
}
@media(max-width:360px) { .rv-home .rv-setup-grid { grid-template-columns:1fr; } .rv-report .rv-kpi-value { font-size:21px; } }
@media(prefers-reduced-motion:reduce) { :is(.rv-home,.rv-report,.rv-shell-v2) *, :is(.rv-home,.rv-report,.rv-shell-v2) *::before { animation:none !important; transition:none !important; scroll-behavior:auto !important; } }
/* ravyn-ui-v2 END */
/* ravyn-ui-v3 START: daily trend chart, AI analyst, Meta comparison, phone report cards */
:root { --rv-spend: #eb6834; --rv-net: #2a78d6; }
html[data-theme="dark"], html[data-scheme="dark"], html.c_darkmode, body.dark { --rv-spend: #d95926; --rv-net: #3987e5; }

/* Chart: one money axis shared by both series (never two scales). */
.rv-report .rv-legend { display:flex; flex-wrap:wrap; gap:6px 18px; margin:0; padding:0; list-style:none; font-size:13px; color:var(--ink-2); }
.rv-report .rv-legend strong { color:var(--ink); font-variant-numeric:tabular-nums; margin-left:4px; }
.rv-report .rv-swatch { display:inline-block; width:10px; height:10px; border-radius:3px; margin-right:6px; vertical-align:-1px; background:var(--rv-spend); }
.rv-report .rv-swatch.is-net { height:3px; width:14px; border-radius:2px; vertical-align:3px; background:var(--rv-net); }
.rv-report .rv-chart { display:grid; grid-template-columns:auto 1fr; grid-template-rows:220px auto; column-gap:10px; margin-top:16px; }
.rv-report .rv-chart-y { display:flex; flex-direction:column; justify-content:space-between; font-size:11px; color:var(--ink-3); text-align:right; font-variant-numeric:tabular-nums; line-height:1; transform:translateY(-1px); }
.rv-report .rv-chart-plot { position:relative; }
.rv-report .rv-chart-grid { position:absolute; inset:0; display:flex; flex-direction:column; justify-content:space-between; pointer-events:none; }
.rv-report .rv-chart-grid i { display:block; border-top:1px solid var(--line-2); }
.rv-report .rv-chart-grid i:last-child { border-top-color:var(--line); }
.rv-report .rv-chart-cols { position:absolute; inset:0; display:flex; align-items:stretch; gap:2px; }
.rv-report .rv-chart-cols.is-dense { gap:1px; }
.rv-report .rv-col { position:relative; flex:1 1 0; min-width:0; display:flex; align-items:flex-end; border-radius:4px 4px 0 0; outline:none; cursor:default; }
.rv-report .rv-col:hover, .rv-report .rv-col:focus-visible { background:color-mix(in srgb, var(--ink) 6%, transparent); }
.rv-report .rv-col:focus-visible { box-shadow:inset 0 0 0 2px var(--accent); }
.rv-report .rv-bar { display:block; width:100%; min-height:0; background:var(--rv-spend); border-radius:4px 4px 0 0; }
.rv-report .rv-chart-cols.is-dense .rv-bar { border-radius:2px 2px 0 0; }
.rv-report .rv-chart-line { position:absolute; inset:0; width:100%; height:100%; overflow:visible; pointer-events:none; }
.rv-report .rv-chart-line polyline { fill:none; stroke:var(--rv-net); stroke-width:2; stroke-linejoin:round; stroke-linecap:round; }
.rv-report .rv-tip { display:none; position:absolute; top:4px; left:calc(100% + 6px); z-index:5; min-width:150px; padding:8px 10px; background:var(--surface); color:var(--ink); border:1px solid var(--line); border-radius:8px; box-shadow:0 6px 20px rgba(0,0,0,.12); font-size:12px; line-height:1.5; white-space:nowrap; }
.rv-report .rv-col.tip-left .rv-tip { left:auto; right:calc(100% + 6px); }
.rv-report .rv-tip > * { display:block; }
.rv-report .rv-tip b { font-variant-numeric:tabular-nums; float:right; margin-left:12px; }
.rv-report .rv-tip .rv-swatch { margin-right:5px; }
.rv-report .rv-col:hover .rv-tip, .rv-report .rv-col:focus-visible .rv-tip { display:block; }
.rv-report .rv-chart-x { grid-column:2; display:flex; justify-content:space-between; margin-top:6px; font-size:11px; color:var(--ink-3); }

/* AI analyst: one type scale, priority as a labelled pill (never colour alone). */
.rv-report .rv-ai-headline { margin:14px 0 6px; font-size:17px; line-height:1.4; font-weight:650; color:var(--ink); }
.rv-report .rv-ai-findings { list-style:none; margin:8px 0 12px; padding:0; }
.rv-report .rv-ai-findings li { padding:12px 0; border-top:1px solid var(--line-2); font-size:14px; }
.rv-report .rv-ai-priority { display:inline-block; margin-right:6px; padding:2px 8px; border-radius:999px; font-size:11px; font-weight:600; letter-spacing:.02em; text-transform:uppercase; vertical-align:1px; background:var(--surface-2); color:var(--ink-2); }
.rv-report .rv-ai-priority.is-high { background:var(--neg-soft); color:var(--neg); }
.rv-report .rv-ai-priority.is-medium { background:var(--accent-soft); color:var(--accent-ink); }
.rv-report .rv-ai-evidence { margin:4px 0 2px; font-size:13px; color:var(--ink-2); }
.rv-report .rv-ai-action { margin:0; font-size:14px; color:var(--ink); }
.rv-report .rv-ai-list { margin:0; padding-left:18px; font-size:14px; }
.rv-report .rv-ai-list li + li { margin-top:4px; }
.rv-report .rv-ai-text { margin:0; font-size:14px; color:var(--ink); }
.rv-report .rv-analyst h3 { font-size:13px; margin-top:16px; }

/* Ravyn found sales Meta missed: good news, not a warning. */
.rv-report .rv-meta-compare.is-found { background:var(--pos-soft); border-color:transparent; }
.rv-report .rv-meta-compare.is-found strong { color:var(--pos); }
.rv-report .rv-meta-compare p { color:var(--ink-2); }

/* Phones: every report row becomes a card; same DOM, so search, review and sort keep working. */
@media(max-width:767.98px) {
    .rv-report .rv-chart { grid-template-rows:170px auto; column-gap:6px; }
    .rv-report .rv-tip { min-width:140px; }
    .rv-report .rv-table-wrap { overflow:visible; }
    .rv-report .rv-table, .rv-report .rv-table tbody { display:block; width:100%; min-width:0; }
    .rv-report .rv-table thead, .rv-report .rv-table tfoot { display:none; }
    .rv-report .rv-table tr[data-rv-row] { display:grid; grid-template-columns:1fr 1fr; gap:10px 16px; padding:14px 16px; border-bottom:1px solid var(--line); }
    .rv-report .rv-table tr[data-rv-row][hidden] { display:none; }
    .rv-report .rv-table tr[data-rv-row] > td { display:block; padding:0; border:0; text-align:left !important; min-width:0; max-width:none; font-size:15px; font-variant-numeric:tabular-nums; }
    .rv-report .rv-table tr[data-rv-row] > td.rv-name { grid-column:1 / -1; position:static; font-size:15px; font-weight:600; }
    .rv-report .rv-table tr[data-rv-row] > td.rv-name span { white-space:normal; overflow-wrap:anywhere; }
    .rv-report .rv-table tr[data-rv-row] > td[data-label]::before { content:attr(data-label); display:block; margin-bottom:2px; font-size:11px; font-weight:500; letter-spacing:.02em; text-transform:uppercase; color:var(--ink-3); }
}
/* Profit summary: the period in two plain sentences. Status colour always sits beside a word (Profit / Loss). */
.rv-report .rv-profit { margin:0 0 16px; padding:22px 24px; border-radius:var(--radius); background:var(--surface); border:1px solid var(--line); }
.rv-report .rv-profit.is-profit { border-color:color-mix(in srgb, var(--pos) 35%, var(--line)); background:linear-gradient(0deg, var(--surface), var(--surface)), var(--pos-soft); box-shadow:inset 4px 0 0 var(--pos); }
.rv-report .rv-profit.is-loss { box-shadow:inset 4px 0 0 var(--neg); }
.rv-report .rv-profit h2.rv-eyebrow { margin:0 0 8px; font-size:12px; }
.rv-report .rv-profit-line { margin:0; font-size:22px; line-height:1.35; color:var(--ink); font-weight:500; }
.rv-report .rv-profit-line strong, .rv-report .rv-profit-result strong { font-variant-numeric:tabular-nums; font-weight:700; }
.rv-report .rv-profit-result { margin:6px 0 0; font-size:20px; line-height:1.4; color:var(--ink); }
.rv-report .rv-profit-result > strong { font-size:26px; margin-left:4px; }
.rv-report .rv-profit-ratio { display:inline-block; margin-left:12px; font-size:16px; color:var(--ink-2); }
.rv-report .rv-profit-ratio strong { color:var(--ink); }
.rv-report .rv-profit-sub { margin:8px 0 0; font-size:14px; color:var(--ink-2); }
.rv-report .rv-profit-sub strong { color:var(--ink); font-variant-numeric:tabular-nums; }
.rv-report .rv-profit-deltas { display:flex; flex-wrap:wrap; gap:8px; margin:14px 0 0; padding:0; list-style:none; font-size:13px; }
.rv-report .rv-profit-deltas li { padding:4px 10px; border-radius:999px; background:var(--surface-2); color:var(--ink-2); }
.rv-report .rv-profit-deltas li.is-good { background:var(--pos-soft); color:var(--pos); }
.rv-report .rv-profit-deltas li.is-bad { background:var(--neg-soft); color:var(--neg); }
.rv-report .rv-profit-deltas li.rv-profit-vs { background:transparent; padding-left:2px; color:var(--ink-3); }
@media(max-width:767.98px) {
    .rv-report .rv-profit { padding:18px 16px; }
    .rv-report .rv-profit-line { font-size:18px; }
    .rv-report .rv-profit-result { font-size:17px; }
    .rv-report .rv-profit-result > strong { font-size:22px; }
    .rv-report .rv-profit-ratio { display:block; margin:4px 0 0; font-size:15px; }
}
/* ravyn-ui-v3 END */

/* ---- ravyn-ui-v4: projects, test data, setup wizard ------------------------------ */

.rv-projectbar { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:10px 16px; margin:0 0 16px; padding:10px 14px; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); }
.rv-projectbar-main { display:flex; flex-wrap:wrap; align-items:center; gap:6px 12px; min-width:0; }
.rv-projectbar .rv-eyebrow { margin:0; }
.rv-switch { position:relative; min-width:0; }
.rv-switch > summary { list-style:none; cursor:pointer; }
.rv-switch > summary::-webkit-details-marker { display:none; }
.rv-switch-current { display:inline-flex; align-items:center; gap:8px; min-height:44px; padding:0 12px; border-radius:var(--radius-sm); border:1px solid var(--line); background:var(--surface-2); color:var(--ink); max-width:100%; }
.rv-switch-current.is-static { border-color:transparent; background:transparent; padding-left:0; }
.rv-switch-current svg { width:16px; height:16px; flex:0 0 16px; color:var(--ink-3); }
.rv-switch-name { font-weight:700; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.rv-switch-host { font-size:13px; color:var(--ink-3); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.rv-switch[open] > summary { border-color:var(--accent); }
.rv-switch-menu { position:absolute; z-index:30; top:calc(100% + 6px); left:0; min-width:260px; max-width:min(360px, calc(100vw - 32px)); margin:0; padding:6px; list-style:none; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-sm); box-shadow:var(--shadow); }
.rv-switch-menu a { display:flex; align-items:center; gap:10px; min-height:44px; padding:6px 10px; border-radius:8px; color:var(--ink); }
.rv-switch-menu a:hover, .rv-switch-menu a:focus-visible { background:var(--sunk); }
.rv-switch-menu a[aria-current="true"] { background:var(--accent-soft); color:var(--accent-ink); font-weight:600; }
.rv-switch-menu a span { min-width:0; overflow-wrap:anywhere; }
.rv-switch-menu small { display:block; color:var(--ink-3); font-weight:400; }
.rv-switch-menu svg { width:16px; height:16px; flex:0 0 16px; }
.rv-switch-add { border-top:1px solid var(--line-2); margin-top:4px; padding-top:4px; }
.rv-projectbar-add { display:inline-flex; align-items:center; gap:4px; font-size:14px; }
.rv-projectbar-add svg { width:15px; height:15px; }

.rv-test-toggle { display:inline-flex; align-items:center; gap:8px; min-height:44px; padding:0 12px; border-radius:999px; border:1px solid var(--line); color:var(--ink-2); font-size:14px; font-weight:600; }
.rv-test-toggle:hover { color:var(--ink); }
.rv-test-dot { width:10px; height:10px; border-radius:50%; background:var(--line); box-shadow:inset 0 0 0 1px var(--ink-3); }
.rv-test-toggle.is-on { border-color:transparent; background:var(--warn-soft); color:var(--warn); }
.rv-test-toggle.is-on .rv-test-dot { background:var(--warn); box-shadow:none; }
.rv-badge-test { display:inline-flex; align-items:center; padding:2px 7px; border-radius:6px; font-size:11px; font-weight:700; letter-spacing:.04em; background:var(--warn-soft); color:var(--warn); vertical-align:2px; }
.rv-test-banner, .rv-test-hidden { display:flex; flex-wrap:wrap; align-items:center; gap:6px 8px; margin:0 0 16px; padding:10px 14px; border-radius:var(--radius-sm); font-size:14px; }
.rv-test-banner { background:var(--warn-soft); color:var(--ink); }
.rv-test-hidden { background:var(--surface-2); border:1px dashed var(--line); color:var(--ink-2); }

.rv-progress { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:10px; margin:0 0 6px; padding:0; list-style:none; }
.rv-progress-step a { display:flex; align-items:center; gap:12px; height:100%; min-height:64px; padding:12px 14px; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); color:var(--ink); }
.rv-progress-step a:hover { border-color:var(--accent); }
.rv-progress-mark { flex:0 0 32px; height:32px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; font-weight:700; background:var(--accent-soft); color:var(--accent-ink); }
.rv-progress-mark svg { width:18px; height:18px; }
.rv-progress-step.is-done .rv-progress-mark { background:var(--pos-soft); color:var(--pos); }
.rv-progress-text { display:flex; flex-direction:column; min-width:0; }
.rv-progress-text small { color:var(--ink-2); font-size:13px; }
.rv-progress-count { margin:0 0 16px; font-size:14px; color:var(--ink-2); }
.rv-step-num.is-done { background:var(--pos-soft) !important; color:var(--pos) !important; }

.rv-guide { margin-top:14px; padding:12px 14px; border-radius:var(--radius-sm); background:var(--surface-2); border:1px solid var(--line-2); }
.rv-callout { margin:12px 0 0; padding:10px 14px; border-radius:var(--radius-sm); font-size:14px; }
.rv-callout.is-warn { background:var(--warn-soft); color:var(--ink); }
.rv-choice { display:flex; align-items:flex-start; gap:10px; min-height:44px; padding:8px 0; cursor:pointer; }
.rv-choice input { margin-top:4px; flex:0 0 auto; width:18px; height:18px; }
.rv-choice span { min-width:0; overflow-wrap:anywhere; }
.rv-setup fieldset { border:0; margin:0 0 8px; padding:0; min-width:0; }
.rv-fb-connect { display:inline-flex; align-items:center; }
.rv-fb-connect svg { width:18px; height:18px; }

.rv-advanced { margin-top:16px; }
.rv-advanced > summary { list-style:none; cursor:pointer; display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 10px; min-height:56px; }
.rv-advanced > summary::-webkit-details-marker { display:none; }
.rv-advanced > summary::after { content:'+'; margin-left:auto; font-size:20px; line-height:1; color:var(--ink-3); }
.rv-advanced[open] > summary::after { content:'–'; }
.rv-setup .card + .card, .rv-setup .card + details { margin-top:16px; }

@media (max-width: 767.98px){
    .rv-projectbar { padding:8px 12px; }
    .rv-projectbar-main { width:100%; }
    .rv-switch { flex:1 1 auto; }
    .rv-switch-current { width:100%; justify-content:space-between; }
    .rv-switch-menu { left:0; right:0; min-width:0; max-width:none; }
    .rv-test-toggle { width:100%; justify-content:center; }
    .rv-progress { grid-template-columns:1fr; gap:8px; }
    .rv-progress-step a { min-height:56px; }
    .rv-setup .rv-inline-form { flex-wrap:wrap; }
    .rv-setup .rv-inline-form .form-control { flex:1 1 100%; }
    .rv-setup .rv-inline-form .btn { flex:1 1 100%; }
}
.rv-projectbar .rv-test-toggle { color:var(--ink-2); }
.rv-projectbar .rv-test-toggle.is-on { color:var(--warn); }
@media (min-width: 768px){ .rv-setup .rv-inline-form .btn { white-space:nowrap; flex:0 0 auto; } }
@media (max-width: 575.98px){ .rv-switch-current .rv-switch-host { display:none; } }