/* ============================================================
   PASTEL THEME — v1.4.4 (public/css/pastel.css)
   Cream canvas, white 28px cards, black pill actions, pastel
   gradients. Loaded ONLY by the pastel layout — never mixed
   with the original theme's stylesheets (no-conflict rule).
   All classes are pv- prefixed.
   ============================================================ */

:root {
    color-scheme: light;
    --pv-canvas: #F1F0EB;
    --pv-ink: #111214;
    --pv-ink-soft: #3C3D3A;
    --pv-muted: #6E6E66;
    --pv-card: #FFFFFF;
    --pv-line: #E5E3DA;
    --pv-line-soft: #ECEAE2;
    --pv-dark: #131315;
    --pv-accent: #111214;
    --pv-orange: #FF6B35;
    --pv-orange-rgb: 255, 107, 53;
    --pv-green: #1E9E6A;
    --pv-lilac: linear-gradient(135deg, #DCD3F7, #B7A6F2);
    --pv-peach: linear-gradient(135deg, #FFD9C7, #FFB08A);
    --pv-mint: linear-gradient(135deg, #CDEBDD, #93D3B4);
    --pv-sky: linear-gradient(135deg, #CFE6FA, #9CCBF5);
    --pv-sun: linear-gradient(135deg, #FCEABB, #F8D47C);
    --pv-radius: 28px;
    --pv-radius-sm: 20px;
    --pv-shadow: 0 2px 6px rgba(17, 18, 20, .04), 0 18px 40px -18px rgba(17, 18, 20, .12);
    --pv-shadow-lg: 0 4px 10px rgba(17, 18, 20, .05), 0 30px 60px -20px rgba(17, 18, 20, .18);
    --pv-ease: cubic-bezier(.22, .8, .24, 1);
    --pv-spring: cubic-bezier(.34, 1.45, .55, 1);
    --pv-font-d: "Plus Jakarta Sans", "Inter", system-ui, sans-serif;
    --pv-font-b: "Inter", system-ui, -apple-system, sans-serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body.pv-body {
    margin: 0;
    background: var(--pv-canvas);
    color: var(--pv-ink);
    font-family: var(--pv-font-b);
    font-size: 15px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}

.pv-body a:not(.pv-btn) { color: inherit; }
.pv-body img { max-width: 100%; }
.pv-body ::selection { background: #111214; color: #F1F0EB; }

.pv-wrap { max-width: 1240px; margin: 0 auto; padding: 0 24px; }

/* ---------- Header ---------- */
.pv-header {
    position: sticky; top: 14px; z-index: 200;
    max-width: 1240px; margin: 14px auto 0; padding: 0 24px;
}
.pv-header-inner {
    display: flex; align-items: center; gap: 10px; flex-wrap: nowrap;
    background: rgba(255, 255, 255, .86);
    backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    border: 1px solid var(--pv-line);
    border-radius: 999px; padding: 8px 10px 8px 18px;
    box-shadow: var(--pv-shadow);
}
.pv-logo { display: flex; align-items: center; gap: 9px; text-decoration: none; font-family: var(--pv-font-d); font-weight: 800; font-size: 16px; letter-spacing: -.02em; white-space: nowrap; min-width: 0; }
/* B93 (buyer round 3: logo/search overlap on narrow screens with a long
   site name + uploaded logo): the name span truncates instead of forcing
   the header row to overflow into the search button. */
.pv-logo > span:not(.pv-logo-mark) { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.pv-logo-mark { width: 30px; height: 30px; border-radius: 10px; background: var(--pv-dark); color: #fff; display: grid; place-items: center; font-size: 15px; overflow: hidden; }
.pv-logo-mark img { width: 100%; height: 100%; object-fit: cover; }
.pv-nav { position: relative; display: flex; gap: 2px; margin: 0 auto; }
.pv-nav a {
    position: relative; z-index: 1; text-decoration: none;
    font-size: 13.5px; font-weight: 600; color: var(--pv-ink-soft);
    padding: 8px 10px; border-radius: 999px; transition: color .25s var(--pv-ease);
    white-space: nowrap;
}
.pv-nav a:hover { color: var(--pv-ink); }
.pv-nav a.pv-active { color: var(--pv-ink); font-weight: 700; }
.pv-nav-pill {
    position: absolute; top: 0; left: 0; height: 100%;
    background: #EAE8DC; border-radius: 999px; z-index: 0;
    transition: transform .38s var(--pv-spring), width .38s var(--pv-spring), opacity .2s;
}
.pv-header-actions { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.pv-icon-btn {
    width: 38px; height: 38px; border-radius: 999px; border: 1px solid var(--pv-line);
    background: #fff; display: grid; place-items: center; cursor: pointer;
    text-decoration: none; color: var(--pv-ink); transition: transform .2s var(--pv-spring), border-color .2s;
}
.pv-icon-btn:hover { transform: translateY(-1px); border-color: #CFCDBF; }
.pv-icon-btn svg { width: 17px; height: 17px; }
.pv-burger { display: none; }
.pv-mobile-menu { display: none; }


/* ---------- Header: admin-menu dropdowns, Ask AI pill, search (v1.4.5 parity) ---------- */
.pv-nav-dd { position: relative; }
.pv-nav-dd-btn {
    position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 5px;
    font-family: var(--pv-font-d); font-size: 13.5px; font-weight: 600; color: var(--pv-ink-soft);
    padding: 8px 10px; border-radius: 999px; border: 0; background: transparent; cursor: pointer;
    white-space: nowrap; transition: color .25s var(--pv-ease);
}
.pv-nav-dd-btn:hover { color: var(--pv-ink); }
.pv-nav-dd-btn svg { width: 13px; height: 13px; }
.pv-nav-dd-btn .pv-dd-chev { transition: transform .25s var(--pv-ease); }
.pv-nav-dd.open .pv-dd-chev { transform: rotate(180deg); }
.pv-nav-dd-panel {
    position: absolute; top: calc(100% + 10px); left: 50%; min-width: 248px;
    transform: translate(-50%, 6px); background: #fff; border: 1px solid var(--pv-line);
    border-radius: 18px; box-shadow: 0 24px 48px -16px rgba(17, 18, 20, .22);
    padding: 8px; opacity: 0; pointer-events: none; transition: opacity .2s var(--pv-ease), transform .25s var(--pv-ease);
    z-index: 60;
}
.pv-nav-dd.open .pv-nav-dd-panel { opacity: 1; pointer-events: auto; transform: translate(-50%, 0); }
.pv-nav-dd-panel a {
    display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 12px;
    color: var(--pv-ink); text-decoration: none; font-size: 13.5px; font-weight: 600; white-space: nowrap;
}
.pv-nav-dd-panel a:hover { background: var(--pv-cream, #F1F0EB); }
.pv-nav-dd-panel a svg { width: 15px; height: 15px; color: var(--pv-orange); flex: none; }
.pv-nav a svg { width: 13px; height: 13px; }
.pv-nav-ai {
    background: linear-gradient(120deg, #FFD9A0, #FFB3C7 55%, #B8C6FF);
    color: var(--pv-ink) !important; font-weight: 700;
}
.pv-nav-badge {
    font-size: 9px; font-weight: 800; letter-spacing: .04em; padding: 1px 6px; border-radius: 99px;
    background: rgba(var(--pv-orange-rgb), .16); color: var(--pv-orange);
}
.pv-socials { display: flex; gap: 8px; margin-top: 16px; }
.pv-footer .pv-socials a {
    display: grid; place-items: center; width: 34px; height: 34px; padding: 0;
    border: 1px solid rgba(255, 255, 255, .22); border-radius: 999px; color: #D8D6CE;
}
.pv-footer .pv-socials a:hover { background: #fff; color: var(--pv-ink); }
.pv-socials svg { width: 15px; height: 15px; }
.pv-mm-label {
    display: block; font-family: var(--pv-font-d); font-size: 11px; font-weight: 800;
    letter-spacing: .1em; text-transform: uppercase; color: var(--pv-muted); padding: 14px 4px 4px;
}
.pv-mobile-menu a.pv-mm-child { padding-left: 18px; }

/* ---------- Buttons ---------- */
.pv-btn {
    display: inline-flex; align-items: center; gap: 8px; justify-content: center;
    font-family: var(--pv-font-d); font-weight: 700; font-size: 13.5px;
    border-radius: 999px; padding: 11px 20px; cursor: pointer; white-space: nowrap;
    text-decoration: none; border: 1px solid transparent;
    transition: transform .2s var(--pv-spring), box-shadow .25s var(--pv-ease), background .2s;
    min-height: 44px;
}
.pv-btn:active { transform: scale(.97); }
.pv-btn-dark { background: var(--pv-dark); color: #fff; }
.pv-btn-dark:hover { transform: translateY(-1px); box-shadow: 0 12px 24px -10px rgba(17, 18, 20, .45); }
.pv-btn-light { background: #fff; color: var(--pv-ink); border-color: var(--pv-line); }
.pv-btn-light:hover { transform: translateY(-1px); box-shadow: var(--pv-shadow); }
.pv-btn-orange { background: var(--pv-orange); color: #fff; }
.pv-btn-orange:hover { transform: translateY(-1px); box-shadow: 0 12px 24px -10px rgba(var(--pv-orange-rgb), .5); }
.pv-btn-sm { padding: 7px 14px; font-size: 12.5px; min-height: 36px; }
.pv-btn svg { width: 15px; height: 15px; }

/* ---------- Hero ---------- */
.pv-hero { padding: 56px 0 8px; text-align: center; }
.pv-hero-badge {
    display: inline-flex; align-items: center; gap: 8px;
    background: #fff; border: 1px solid var(--pv-line); border-radius: 999px;
    font-size: 12px; font-weight: 700; color: var(--pv-ink-soft); padding: 6px 14px 6px 8px;
    box-shadow: var(--pv-shadow);
}
.pv-hero-badge .pv-dot { width: 20px; height: 20px; border-radius: 999px; background: var(--pv-mint); display: grid; place-items: center; font-size: 11px; }
.pv-hero h1 {
    font-family: var(--pv-font-d); font-weight: 800; letter-spacing: -.035em;
    font-size: clamp(40px, 6vw, 68px); line-height: 1.04; margin: 22px 0 14px;
}
.pv-hero h1 .pv-grad {
    background: linear-gradient(92deg, var(--pv-accent-2, #8B76E8), #FF8A5C 55%, #E9B949);
    -webkit-background-clip: text; background-clip: text; color: transparent;
}
/* Stored hero titles carry the original theme's class name — same gradient. */
.pv-hero h1 .gradient-text {
    background: linear-gradient(92deg, var(--pv-accent-2, #8B76E8), #FF8A5C 55%, #E9B949);
    -webkit-background-clip: text; background-clip: text; color: transparent;
}
.pv-hero p { color: var(--pv-muted); font-size: 16.5px; max-width: 560px; margin: 0 auto; }
.pv-searchbox { position: relative; max-width: 640px; margin: 30px auto 0; }
.pv-searchbox-inner {
    display: flex; align-items: center; gap: 8px; background: #fff;
    border: 1px solid var(--pv-line); border-radius: 999px; padding: 7px;
    box-shadow: var(--pv-shadow-lg);
}
.pv-searchbox svg.pv-search-ic { width: 19px; height: 19px; margin-left: 12px; color: var(--pv-muted); flex: none; }
.pv-searchbox input {
    flex: 1; border: none; outline: none; background: transparent;
    font: 500 15px var(--pv-font-b); color: var(--pv-ink);
    caret-color: var(--pv-ink); min-width: 0;
}
.pv-searchbox input::placeholder { color: #A3A398; }
.pv-search-drop {
    position: absolute; top: calc(100% + 10px); left: 0; right: 0; z-index: 60;
    background: #fff; border: 1px solid var(--pv-line); border-radius: 22px;
    box-shadow: var(--pv-shadow-lg); padding: 8px; text-align: left; display: none;
}
.pv-search-drop.open { display: block; animation: pv-pop .28s var(--pv-spring); }
.pv-search-drop a {
    display: flex; align-items: center; gap: 12px; padding: 9px 10px;
    border-radius: 14px; text-decoration: none; transition: background .15s;
}
.pv-search-drop a:hover { background: #F6F5F0; }
.pv-search-drop img { width: 34px; height: 34px; border-radius: 10px; object-fit: contain; background: #F6F5F0; }
.pv-search-drop .pv-sd-name { font-weight: 700; font-size: 14px; font-family: var(--pv-font-d); }
.pv-search-drop .pv-sd-cat { font-size: 12px; color: var(--pv-muted); }
.pv-search-drop .pv-sd-empty { padding: 14px; font-size: 13.5px; color: var(--pv-muted); }
.pv-tags { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 18px; font-size: 13px; color: var(--pv-muted); align-items: center; }
.pv-chip {
    background: #fff; border: 1px solid var(--pv-line); color: var(--pv-ink-soft);
    border-radius: 999px; padding: 6px 13px; font-weight: 600; font-size: 12.5px;
    text-decoration: none; cursor: pointer; transition: all .2s var(--pv-ease);
    display: inline-flex; align-items: center; gap: 6px; min-height: 32px;
}
.pv-chip:hover { border-color: #111214; color: var(--pv-ink); transform: translateY(-1px); }
.pv-chip.pv-chip-active { background: var(--pv-dark); color: #fff; border-color: var(--pv-dark); }
.pv-stats { display: flex; justify-content: center; gap: 0; margin: 40px auto 0; max-width: 720px; background: #fff; border: 1px solid var(--pv-line); border-radius: var(--pv-radius); box-shadow: var(--pv-shadow); overflow: hidden; }
.pv-stat { flex: 1; padding: 18px 10px; }
.pv-stat + .pv-stat { border-left: 1px solid var(--pv-line-soft); }
.pv-stat b { display: block; font-family: var(--pv-font-d); font-size: 24px; font-weight: 800; letter-spacing: -.02em; }
.pv-stat span { font-size: 11px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--pv-muted); }

/* ---------- Sections ---------- */
.pv-section { padding: 44px 0 6px; }
.pv-section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 20px; }
.pv-section-head h2 { font-family: var(--pv-font-d); font-size: 27px; font-weight: 800; letter-spacing: -.025em; margin: 0; }
.pv-section-head p { color: var(--pv-muted); margin: 4px 0 0; font-size: 14px; }
.pv-viewall { font-weight: 700; font-size: 13.5px; text-decoration: none; display: inline-flex; gap: 6px; align-items: center; white-space: nowrap; }
.pv-viewall:hover { text-decoration: underline; }
.pv-eyebrow { display: inline-block; font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--pv-muted); margin-bottom: 8px; }

/* ---------- Category cards ---------- */
.pv-cat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.pv-cat-card {
    background: #fff; border: 1px solid var(--pv-line); border-radius: var(--pv-radius-sm);
    padding: 18px; text-decoration: none; display: flex; align-items: center; gap: 14px;
    transition: transform .25s var(--pv-spring), box-shadow .25s var(--pv-ease);
}
.pv-cat-card:hover { transform: translateY(-3px); box-shadow: var(--pv-shadow); }
.pv-cat-ic { width: 46px; height: 46px; border-radius: 15px; display: grid; place-items: center; flex: none; color: #26241F; }
.pv-cat-ic svg { width: 21px; height: 21px; }
.pv-cat-card b { font-family: var(--pv-font-d); font-size: 15px; display: block; letter-spacing: -.01em; }
.pv-cat-card span { font-size: 12.5px; color: var(--pv-muted); }
.pv-tone-1 { background: var(--pv-lilac); } .pv-tone-2 { background: var(--pv-peach); }
.pv-tone-3 { background: var(--pv-mint); } .pv-tone-4 { background: var(--pv-sky); }
.pv-tone-5 { background: var(--pv-sun); } .pv-tone-6 { background: linear-gradient(135deg, #FBD3E0, #F5A8C0); }

/* ---------- Tool cards ---------- */
.pv-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.pv-grid > *, .pv-grid-3 > * { min-width: 0; }
.pv-grid-3 { grid-template-columns: repeat(3, 1fr); }
.pv-card {
    position: relative; background: #fff; border: 1px solid var(--pv-line);
    border-radius: var(--pv-radius); padding: 20px; display: flex; flex-direction: column;
    transition: transform .25s var(--pv-spring), box-shadow .25s var(--pv-ease);
}
.pv-card:hover { transform: translateY(-4px); box-shadow: var(--pv-shadow-lg); }
.pv-ribbon {
    position: absolute; top: 14px; left: 14px; z-index: 2;
    font-size: 9.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
    padding: 4px 9px; border-radius: 999px; color: #26241F;
}
.pv-ribbon + .pv-ribbon { top: 40px; }
.pv-ribbon-featured { background: var(--pv-peach); }
.pv-ribbon-trending { background: linear-gradient(135deg, #FBD3E0, #F5A8C0); }
.pv-ribbon-choice { background: var(--pv-sky); }
.pv-heart {
    position: absolute; top: 12px; right: 12px; z-index: 2;
    width: 34px; height: 34px; border-radius: 999px; border: 1px solid var(--pv-line);
    background: #fff; display: grid; place-items: center; cursor: pointer; color: #B9B7AB;
    transition: all .2s var(--pv-spring);
}
.pv-heart svg { width: 16px; height: 16px; }
.pv-heart:hover { transform: scale(1.1); color: #E5484D; }
.pv-heart.on { color: #E5484D; border-color: #F3C2C4; background: #FDF1F1; }
.pv-heart.on svg { fill: #E5484D; }
.pv-card-top { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 12px; }
.pv-logo-tile {
    width: 52px; height: 52px; border-radius: 16px; background: #F6F5F0;
    border: 1px solid var(--pv-line-soft); display: grid; place-items: center; flex: none; overflow: hidden;
}
.pv-logo-tile img { width: 38px; height: 38px; object-fit: contain; }
.pv-card h3 { font-family: var(--pv-font-d); font-size: 16.5px; font-weight: 800; letter-spacing: -.015em; margin: 0; display: flex; align-items: center; gap: 6px; }
.pv-card h3 a { text-decoration: none; }
.pv-card h3 a:hover { text-decoration: underline; }
.pv-verified { color: #2F7CF6; flex: none; display: inline-grid; }
.pv-verified svg { width: 15px; height: 15px; }
.pv-card-desc { font-size: 13.5px; color: var(--pv-muted); line-height: 1.55; margin: 0 0 14px; flex: 1; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pv-pillrow { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; }
.pv-pill { font-size: 10.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; padding: 4px 9px; border-radius: 999px; background: #F1F0EB; color: var(--pv-ink-soft); }
.pv-pill-cat { background: #EFECE3; }
.pv-pill-free { background: #DFF3E7; color: #14663F; }
.pv-pill-freemium { background: #FFF0D6; color: #8A5A00; }
.pv-pill-paid { background: #E7E9FF; color: #39419F; }
.pv-pill-open { background: #E2F2FF; color: #0B5C8A; }
.pv-meta { display: flex; align-items: center; gap: 14px; font-size: 12.5px; color: var(--pv-muted); font-weight: 600; margin-bottom: 16px; }
.pv-meta .pv-stars { color: #E9A23B; display: inline-flex; gap: 1px; }
.pv-meta svg { width: 13px; height: 13px; vertical-align: -2px; }
.pv-card-actions { display: flex; gap: 8px; align-items: center; margin-top: auto; }
.pv-upvote {
    display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--pv-line);
    background: #fff; border-radius: 999px; padding: 7px 13px; cursor: pointer;
    font: 700 12.5px var(--pv-font-b); color: var(--pv-ink-soft); min-height: 36px; white-space: nowrap;
    transition: all .2s var(--pv-spring);
}
.pv-upvote svg { width: 14px; height: 14px; }
.pv-upvote:hover { border-color: #111214; }
.pv-upvote.voted { background: var(--pv-dark); color: #fff; border-color: var(--pv-dark); }
.pv-visit { flex: 1; }

/* ---------- Tabs (Explore) ---------- */
.pv-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 20px; background: #fff; border: 1px solid var(--pv-line); border-radius: 999px; padding: 5px; width: fit-content; max-width: 100%; box-shadow: var(--pv-shadow); }
.pv-tab {
    border: none; background: transparent; cursor: pointer; border-radius: 999px;
    padding: 9px 16px; font: 700 13px var(--pv-font-d); color: var(--pv-ink-soft);
    transition: all .25s var(--pv-ease); min-height: 40px; white-space: nowrap;
}
.pv-tab:hover { color: var(--pv-ink); }
.pv-tab.on { background: var(--pv-dark); color: #fff; }

/* ---------- Leaderboard ---------- */
.pv-board { background: #fff; border: 1px solid var(--pv-line); border-radius: var(--pv-radius); box-shadow: var(--pv-shadow); overflow: hidden; }
.pv-board-row { display: flex; align-items: center; gap: 14px; padding: 13px 20px; text-decoration: none; transition: background .15s; }
.pv-board-row + .pv-board-row { border-top: 1px solid var(--pv-line-soft); }
.pv-board-row:hover { background: #FAF9F5; }
.pv-rank { font-family: var(--pv-font-d); font-weight: 800; font-size: 15px; width: 26px; text-align: center; color: var(--pv-muted); flex: none; }
.pv-rank.top { color: #fff; background: var(--pv-dark); border-radius: 999px; width: 26px; height: 26px; display: grid; place-items: center; font-size: 13px; }
.pv-board-row img { width: 36px; height: 36px; border-radius: 11px; object-fit: contain; background: #F6F5F0; }
.pv-board-main { flex: 1; min-width: 0; }
.pv-board-main b { font-family: var(--pv-font-d); font-size: 14.5px; display: flex; align-items: center; gap: 5px; }
.pv-board-main span { font-size: 12.5px; color: var(--pv-muted); display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pv-board-score { text-align: right; font-family: var(--pv-font-d); font-weight: 800; font-size: 15px; }
.pv-board-score span { display: block; font-family: var(--pv-font-b); font-weight: 600; font-size: 11.5px; color: var(--pv-muted); }

/* ---------- Spotlight / dark card ---------- */
.pv-spotlight {
    position: relative; overflow: hidden; border-radius: 32px; color: #fff;
    background: radial-gradient(120% 160% at 85% -10%, #3D365E 0%, transparent 50%),
                radial-gradient(100% 140% at 0% 110%, #5C3421 0%, transparent 55%),
                var(--pv-dark);
    padding: 40px; display: grid; grid-template-columns: 1.25fr .75fr; gap: 30px; align-items: center;
}
.pv-spotlight h2 { font-family: var(--pv-font-d); font-size: 32px; font-weight: 800; letter-spacing: -.025em; margin: 10px 0; }
.pv-spotlight p { color: #B9B7C9; max-width: 480px; }
.pv-spotlight .pv-eyebrow { color: #B9B7C9; }
.pv-spot-orb { position: relative; min-height: 190px; }
.pv-orb { position: absolute; border-radius: 50%; filter: blur(2px); opacity: .95; animation: pv-float 7s ease-in-out infinite; }
.pv-orb-1 { width: 150px; height: 150px; background: var(--pv-lilac); top: 0; right: 30px; }
.pv-orb-2 { width: 90px; height: 90px; background: var(--pv-peach); bottom: 6px; right: 130px; animation-delay: -2s; }
.pv-orb-3 { width: 56px; height: 56px; background: var(--pv-mint); top: 26px; right: 170px; animation-delay: -4s; }
.pv-spot-logo { position: absolute; top: 50%; right: 62px; transform: translateY(-50%); width: 92px; height: 92px; border-radius: 26px; background: #fff; display: grid; place-items: center; box-shadow: 0 24px 48px -12px rgba(0, 0, 0, .5); }
.pv-spot-logo img { width: 62px; height: 62px; object-fit: contain; }

/* ---------- Why / feature cards ---------- */
.pv-why-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.pv-why { border-radius: var(--pv-radius); padding: 26px; color: #26241F; }
.pv-why h3 { font-family: var(--pv-font-d); font-size: 18px; margin: 12px 0 6px; letter-spacing: -.015em; }
.pv-why p { font-size: 13.5px; color: rgba(38, 36, 31, .72); margin: 0; }
.pv-why .pv-why-ic { width: 44px; height: 44px; border-radius: 14px; background: rgba(255, 255, 255, .65); display: grid; place-items: center; }
.pv-why .pv-why-ic svg { width: 20px; height: 20px; }

/* ---------- Blog cards ---------- */
.pv-blog-card { background: #fff; border: 1px solid var(--pv-line); border-radius: var(--pv-radius); overflow: hidden; text-decoration: none; display: flex; flex-direction: column; transition: transform .25s var(--pv-spring), box-shadow .25s var(--pv-ease); }
.pv-blog-card:hover { transform: translateY(-4px); box-shadow: var(--pv-shadow-lg); }
.pv-blog-cover { height: 170px; position: relative; overflow: hidden; }
.pv-blog-cover img { width: 100%; height: 100%; object-fit: cover; }
.pv-blog-body { padding: 20px 22px 22px; display: flex; flex-direction: column; flex: 1; }
.pv-blog-body h3 { font-family: var(--pv-font-d); font-size: 17px; line-height: 1.35; margin: 8px 0; letter-spacing: -.015em; }
.pv-blog-body p { font-size: 13.5px; color: var(--pv-muted); margin: 0 0 14px; flex: 1; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pv-blog-meta { font-size: 12px; color: var(--pv-muted); font-weight: 600; display: flex; gap: 12px; }

/* ---------- Newsletter / CTA band ---------- */
.pv-newsletter { background: var(--pv-dark); color: #fff; border-radius: 32px; padding: 42px; text-align: center; position: relative; overflow: hidden; }
.pv-newsletter h2 { font-family: var(--pv-font-d); font-size: 30px; letter-spacing: -.025em; margin: 0 0 8px; }
.pv-newsletter p { color: #B9B7C9; max-width: 460px; margin: 0 auto 22px; }
.pv-news-form { display: flex; gap: 8px; max-width: 480px; margin: 0 auto; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .16); padding: 6px; border-radius: 999px; }
.pv-news-form input { flex: 1; background: transparent; border: none; outline: none; color: #fff; font: 500 14px var(--pv-font-b); padding: 0 16px; caret-color: #fff; min-width: 0; }
.pv-news-form input::placeholder { color: #8E8CA3; }
.pv-news-form .pv-btn { background: #fff; color: var(--pv-ink); }
.pv-news-note { font-size: 12px; color: #8E8CA3; margin-top: 14px; }

/* ---------- Footer ---------- */
.pv-footer { margin-top: 64px; background: var(--pv-dark); color: #D8D6CE; border-radius: 36px 36px 0 0; }
.pv-footer-inner { max-width: 1240px; margin: 0 auto; padding: 52px 24px 30px; }
.pv-footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr 1fr; gap: 30px; }
.pv-footer h4 { color: #fff; font-family: var(--pv-font-d); font-size: 13px; letter-spacing: .09em; text-transform: uppercase; margin: 0 0 14px; }
.pv-footer a { display: block; color: #A9A79C; text-decoration: none; font-size: 13.5px; padding: 4px 0; }
.pv-footer a:hover { color: #fff; }
.pv-footer-brand p { font-size: 13.5px; color: #A9A79C; max-width: 300px; }
.pv-footer-bottom { border-top: 1px solid rgba(255, 255, 255, .1); margin-top: 38px; padding-top: 20px; display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap; font-size: 12.5px; color: #8E8C81; }

/* ---------- Page head / filters / pagination ---------- */
.pv-pagehead { padding: 42px 0 6px; }
.pv-breadcrumb { font-size: 12.5px; color: var(--pv-muted); font-weight: 600; display: flex; gap: 7px; flex-wrap: wrap; margin-bottom: 14px; }
.pv-breadcrumb a { text-decoration: none; }
.pv-breadcrumb a:hover { color: var(--pv-ink); text-decoration: underline; }
.pv-pagehead h1 { font-family: var(--pv-font-d); font-size: clamp(30px, 4.4vw, 44px); font-weight: 800; letter-spacing: -.03em; margin: 0 0 8px; }
.pv-pagehead p { color: var(--pv-muted); max-width: 640px; margin: 0; }
.pv-filterbar {
    display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
    background: #fff; border: 1px solid var(--pv-line); border-radius: 22px;
    padding: 12px; box-shadow: var(--pv-shadow); margin: 22px 0 24px;
}
.pv-filterbar select, .pv-select {
    padding: 10px 12px; border-radius: 12px; background: #F6F5F0;
    border: 1px solid var(--pv-line); color: var(--pv-ink);
    font: 600 13px var(--pv-font-b); outline: none; min-height: 42px;
}
.pv-filterbar input[type="search"], .pv-filterbar input[type="text"] {
    padding: 10px 14px; border-radius: 12px; background: #F6F5F0;
    border: 1px solid var(--pv-line); color: var(--pv-ink);
    font: 500 13.5px var(--pv-font-b); outline: none; min-height: 42px;
    caret-color: var(--pv-ink);
}
.pv-pagination { display: flex; justify-content: center; margin: 30px 0 6px; }
.pv-pagination nav { background: #fff; border: 1px solid var(--pv-line); border-radius: 999px; padding: 5px; box-shadow: var(--pv-shadow); }
.pv-pagination ul { display: flex; gap: 2px; list-style: none; margin: 0; padding: 0; }
.pv-pagination a, .pv-pagination span {
    display: grid; place-items: center; min-width: 38px; height: 38px; padding: 0 10px;
    border-radius: 999px; font: 700 13px var(--pv-font-d); text-decoration: none; color: var(--pv-ink-soft);
}
.pv-pagination a:hover { background: #F1F0EB; }
.pv-pagination .active span { background: var(--pv-dark); color: #fff; }
.pv-pagination .disabled span { color: #C6C4B8; }

/* ---------- Ad slots ---------- */
.pv-ad { background: #fff; border: 1px dashed #D8D5C8; border-radius: var(--pv-radius-sm); padding: 14px; text-align: center; overflow: hidden; }
.pv-ad-label { font-size: 9.5px; font-weight: 800; letter-spacing: .14em; color: #B0AEA2; text-transform: uppercase; margin-bottom: 8px; }
.pv-ad-infeed { height: 100%; display: flex; flex-direction: column; }
.pv-ad-infeed .pv-ad-content { flex: 1; display: grid; place-items: center; }

/* ---------- Empty state / alerts / toast ---------- */
.pv-empty { background: #fff; border: 1px solid var(--pv-line); border-radius: var(--pv-radius); padding: 52px 30px; text-align: center; }
.pv-empty h3 { font-family: var(--pv-font-d); font-size: 20px; margin: 12px 0 6px; }
.pv-empty p { color: var(--pv-muted); max-width: 420px; margin: 0 auto 18px; }
.pv-empty-ic { width: 58px; height: 58px; border-radius: 50%; background: #F6F5F0; display: grid; place-items: center; margin: 0 auto; color: var(--pv-muted); }
.pv-alert { border-radius: 16px; padding: 13px 16px; font-size: 13.5px; font-weight: 600; margin-bottom: 16px; }
.pv-alert-success { background: #DFF3E7; color: #14663F; }
.pv-alert-error { background: #FDE8E8; color: #8F1D22; }
.pv-toast {
    position: fixed; bottom: 22px; left: 50%; transform: translate(-50%, 80px); z-index: 999;
    background: var(--pv-dark); color: #fff; font: 600 13.5px var(--pv-font-b);
    padding: 12px 20px; border-radius: 999px; box-shadow: var(--pv-shadow-lg);
    transition: transform .4s var(--pv-spring); max-width: calc(100vw - 40px); text-align: center;
}
.pv-toast.show { transform: translate(-50%, 0); }

/* ---------- Tool detail ---------- */
.pv-detail-hero { background: #fff; border: 1px solid var(--pv-line); border-radius: 32px; padding: 30px; box-shadow: var(--pv-shadow); display: flex; gap: 22px; align-items: flex-start; }
.pv-detail-logo { width: 92px; height: 92px; border-radius: 24px; background: #F6F5F0; border: 1px solid var(--pv-line-soft); display: grid; place-items: center; flex: none; }
.pv-detail-logo img { width: 62px; height: 62px; object-fit: contain; }
.pv-detail-hero h1 { font-family: var(--pv-font-d); font-size: clamp(26px, 3.6vw, 36px); font-weight: 800; letter-spacing: -.028em; margin: 0 0 6px; display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.pv-detail-tagline { color: var(--pv-muted); font-size: 15.5px; margin: 0 0 14px; }
.pv-detail-grid { display: grid; grid-template-columns: 1fr 340px; gap: 22px; align-items: start; margin-top: 22px; }
.pv-panel { background: #fff; border: 1px solid var(--pv-line); border-radius: var(--pv-radius); padding: 26px; box-shadow: var(--pv-shadow); margin-bottom: 22px; }
.pv-panel h2, .pv-panel h3 { font-family: var(--pv-font-d); letter-spacing: -.02em; margin: 0 0 14px; }
.pv-panel h2 { font-size: 20px; }
.pv-panel h3 { font-size: 16.5px; }
.pv-panel p { color: var(--pv-ink-soft); line-height: 1.7; }
.pv-feature-list { display: flex; flex-wrap: wrap; gap: 8px; }
.pv-feature { display: inline-flex; align-items: center; gap: 7px; background: #F6F5F0; border: 1px solid var(--pv-line-soft); border-radius: 999px; padding: 7px 13px; font-size: 13px; font-weight: 600; }
.pv-feature svg { width: 13px; height: 13px; color: var(--pv-green); }
.pv-proscons { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.pv-proscons ul { list-style: none; margin: 0; padding: 0; }
.pv-proscons li { display: flex; gap: 9px; font-size: 14px; padding: 6px 0; color: var(--pv-ink-soft); align-items: flex-start; }
.pv-proscons li svg { width: 15px; height: 15px; flex: none; margin-top: 2px; }
.pv-pros li svg { color: var(--pv-green); }
.pv-cons li svg { color: #E5484D; }
.pv-side { position: sticky; top: 96px; }
.pv-quickrow { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; font-size: 13.5px; border-bottom: 1px solid var(--pv-line-soft); }
.pv-quickrow:last-of-type { border-bottom: none; }
.pv-quickrow span { color: var(--pv-muted); font-weight: 600; }
.pv-quickrow b { font-weight: 700; text-align: right; }
.pv-share { display: flex; gap: 8px; }
.pv-review { border-top: 1px solid var(--pv-line-soft); padding: 18px 0; }
.pv-review:first-of-type { border-top: none; padding-top: 4px; }
.pv-review-head { display: flex; align-items: center; gap: 11px; margin-bottom: 8px; }
.pv-avatar { width: 38px; height: 38px; border-radius: 999px; display: grid; place-items: center; font: 800 14px var(--pv-font-d); color: #26241F; flex: none; }
.pv-review-head b { font-family: var(--pv-font-d); font-size: 14.5px; display: block; }
.pv-review-head span { font-size: 12px; color: var(--pv-muted); }
.pv-review p { font-size: 14px; margin: 0; }
.pv-gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.pv-gallery img { width: 100%; height: 150px; object-fit: cover; border-radius: 16px; border: 1px solid var(--pv-line-soft); }
.pv-price-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.pv-price-table th, .pv-price-table td { text-align: left; padding: 11px 12px; border-bottom: 1px solid var(--pv-line-soft); }
.pv-price-table th { font-family: var(--pv-font-d); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--pv-muted); }
.pv-faq-item { border-top: 1px solid var(--pv-line-soft); padding: 14px 0; }
.pv-faq-item:first-of-type { border-top: none; }
.pv-faq-item b { font-family: var(--pv-font-d); font-size: 14.5px; display: block; margin-bottom: 4px; }
.pv-faq-item p { margin: 0; font-size: 14px; }

/* ---------- Compare ---------- */
.pv-compare-table { width: 100%; border-collapse: separate; border-spacing: 0; background: #fff; border: 1px solid var(--pv-line); border-radius: var(--pv-radius); overflow: hidden; box-shadow: var(--pv-shadow); font-size: 14px; }
.pv-compare-table th, .pv-compare-table td { padding: 15px 18px; text-align: left; border-bottom: 1px solid var(--pv-line-soft); vertical-align: top; }
.pv-compare-table tr:last-child td { border-bottom: none; }
.pv-compare-table th { font-family: var(--pv-font-d); }
.pv-compare-table td:first-child { font-weight: 700; color: var(--pv-muted); width: 180px; font-size: 12.5px; text-transform: uppercase; letter-spacing: .05em; }

/* ---------- Forms (submit / auth / contact) ---------- */
.pv-form-card { background: #fff; border: 1px solid var(--pv-line); border-radius: 32px; padding: 34px; box-shadow: var(--pv-shadow); }
.pv-field { margin-bottom: 16px; }
.pv-field label { display: block; font: 700 12.5px var(--pv-font-d); margin-bottom: 7px; }
.pv-field label span { color: #E5484D; }
.pv-input, .pv-field input, .pv-field select, .pv-field textarea {
    width: 100%; padding: 12px 15px; border-radius: 14px; background: #F8F7F2;
    border: 1px solid var(--pv-line); color: var(--pv-ink);
    font: 500 14px var(--pv-font-b); outline: none; min-height: 46px;
    caret-color: var(--pv-ink); -webkit-text-fill-color: var(--pv-ink);
    transition: border-color .2s, box-shadow .2s;
}
.pv-field textarea { min-height: 110px; resize: vertical; }
.pv-input:focus, .pv-field input:focus, .pv-field select:focus, .pv-field textarea:focus {
    border-color: #111214; box-shadow: 0 0 0 3px rgba(17, 18, 20, .08); background: #fff;
}
.pv-field .pv-hint { font-size: 12px; color: var(--pv-muted); margin-top: 5px; }
.pv-field .pv-error { font-size: 12px; color: #B3261E; margin-top: 5px; font-weight: 600; }
.pv-auth-wrap { max-width: 460px; margin: 0 auto; padding: 48px 24px 10px; }
.pv-auth-wrap .pv-form-card { padding: 36px; }
.pv-auth-wrap h1 { font-family: var(--pv-font-d); font-size: 26px; letter-spacing: -.025em; margin: 0 0 6px; text-align: center; }
.pv-auth-wrap .pv-sub { text-align: center; color: var(--pv-muted); font-size: 14px; margin: 0 0 24px; }
.pv-divider { display: flex; align-items: center; gap: 12px; color: var(--pv-muted); font-size: 11.5px; font-weight: 700; letter-spacing: .1em; margin: 20px 0; }
.pv-divider::before, .pv-divider::after { content: ""; flex: 1; height: 1px; background: var(--pv-line); }

/* ---------- Article (blog single) ---------- */
.pv-article { background: #fff; border: 1px solid var(--pv-line); border-radius: 32px; padding: 40px; box-shadow: var(--pv-shadow); }
.pv-article h1 { font-family: var(--pv-font-d); font-size: clamp(28px, 4vw, 40px); letter-spacing: -.028em; line-height: 1.15; margin: 12px 0; }
.pv-article .pv-prose { font-size: 16px; line-height: 1.8; color: var(--pv-ink-soft); }
.pv-article .pv-prose h2 { font-family: var(--pv-font-d); color: var(--pv-ink); font-size: 24px; margin: 30px 0 10px; letter-spacing: -.02em; }
.pv-article .pv-prose h3 { font-family: var(--pv-font-d); color: var(--pv-ink); font-size: 19px; margin: 24px 0 8px; }
.pv-article .pv-prose a { color: #39419F; font-weight: 600; }
.pv-article .pv-prose img { border-radius: 18px; }
.pv-cover { width: 100%; height: 340px; object-fit: cover; border-radius: 24px; margin-bottom: 8px; }

/* ---------- Motion (pane system) ---------- */
@keyframes pv-rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes pv-pop { from { opacity: 0; transform: scale(.96) translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes pv-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
.pv-reveal { opacity: 0; }
.pv-reveal.in { animation: pv-rise .55s var(--pv-ease) forwards; animation-delay: calc(var(--i, 0) * 45ms); }
@media (prefers-reduced-motion: reduce) {
    .pv-reveal { opacity: 1; }
    .pv-reveal.in { animation: none; }
    .pv-orb { animation: none; }
    html { scroll-behavior: auto; }
    .pv-card, .pv-cat-card, .pv-blog-card { transition: none; }
}

/* ---------- Anchor ad ---------- */
.pv-anchor { display: none; }

/* ---------- Responsive ---------- */
@media (max-width: 1080px) {
    .pv-grid { grid-template-columns: repeat(3, 1fr); }
    .pv-cat-grid { grid-template-columns: repeat(3, 1fr); }
    .pv-detail-grid { grid-template-columns: 1fr 300px; }
}
@media (max-width: 900px) {
    .pv-nav { display: none; }
    .pv-burger { display: grid; }
    .pv-mobile-menu {
        display: none; position: absolute; top: calc(100% + 10px); left: 24px; right: 24px;
        background: #fff; border: 1px solid var(--pv-line); border-radius: 24px;
        box-shadow: var(--pv-shadow-lg); padding: 10px; z-index: 210;
    }
    .pv-mobile-menu.open { display: block; animation: pv-pop .28s var(--pv-spring); }
    .pv-mobile-menu a { display: block; padding: 12px 14px; border-radius: 14px; text-decoration: none; font-weight: 700; font-family: var(--pv-font-d); font-size: 15px; }
    .pv-mobile-menu a:hover { background: #F6F5F0; }
    .pv-header { padding: 0 14px; }
    .pv-wrap { padding: 0 14px; }
    .pv-grid { grid-template-columns: repeat(2, 1fr); }
    .pv-grid-3 { grid-template-columns: repeat(2, 1fr); }
    .pv-cat-grid { grid-template-columns: repeat(2, 1fr); }
    .pv-why-grid { grid-template-columns: 1fr; }
    .pv-detail-grid { grid-template-columns: 1fr; }
    .pv-side { position: static; }
    .pv-spotlight { grid-template-columns: 1fr; padding: 30px; }
    .pv-spot-orb { min-height: 130px; }
    .pv-footer-grid { grid-template-columns: 1fr 1fr; }
    .pv-proscons { grid-template-columns: 1fr; }
    .pv-article { padding: 26px; }
    .pv-header-actions .pv-btn { display: none; }
    /* B93 (buyer round 3): header Log in moves into the side menu on
       tablet/phone — the mobile menu already carries Log in + Create
       account, so hiding the header link frees header space with no
       loss of access. */
    .pv-header-actions .pv-header-login { display: none !important; }
}
@media (max-width: 560px) {
    .pv-grid, .pv-grid-3 { grid-template-columns: 1fr; }
    .pv-cat-grid { grid-template-columns: 1fr; }
    .pv-stats { flex-wrap: wrap; }
    .pv-stat { flex: 1 1 40%; }
    .pv-hero { padding-top: 38px; }
    .pv-detail-hero { flex-direction: column; padding: 22px; }
    .pv-gallery { grid-template-columns: 1fr 1fr; }
    .pv-news-form { flex-direction: column; border-radius: 22px; }
    .pv-news-form input { padding: 12px 16px; }
    .pv-newsletter { padding: 30px 22px; }
    .pv-footer-grid { grid-template-columns: 1fr; }
    .pv-form-card { padding: 24px; }
    .pv-anchor {
        display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 300;
        background: #fff; border-top: 1px solid var(--pv-line); padding: 6px 38px 6px 10px; text-align: center;
    }
    .pv-anchor.dismissed { display: none; }
    .pv-anchor button { position: absolute; top: 0; right: 4px; background: none; border: none; font-size: 19px; color: var(--pv-muted); cursor: pointer; padding: 5px 8px; }
}

/* ============================================================
   DASHBOARD (member area) — v1.4.4
   Pastel shell for layouts/dashboard + dashboard/* views.
   App-shell pattern: frozen white sidebar card + scrolling
   main column with a floating pill topbar. All classes are
   pv-dash- / pv- prefixed; nothing above is modified.
   ============================================================ */

[x-cloak] { display: none !important; }

.pv-dash-root { display: flex; height: 100vh; height: 100dvh; width: 100%; overflow: hidden; }

/* ---------- Sidebar ---------- */
.pv-dash-sidebar { width: 272px; flex: none; padding: 14px 0 14px 14px; height: 100%; }
.pv-dash-side-card {
    background: #fff; border: 1px solid var(--pv-line); border-radius: var(--pv-radius);
    box-shadow: var(--pv-shadow); height: 100%; display: flex; flex-direction: column;
    padding: 20px 14px 16px; overflow-y: auto; overflow-x: hidden;
}
.pv-dash-brand { display: flex; align-items: center; gap: 9px; text-decoration: none; font-family: var(--pv-font-d); font-weight: 800; font-size: 16.5px; letter-spacing: -.02em; padding: 2px 8px 18px; color: var(--pv-ink); }
.pv-dash-label { font-size: 10px; font-weight: 800; color: var(--pv-muted); text-transform: uppercase; letter-spacing: .1em; padding: 14px 12px 7px; }
.pv-dash-label:first-of-type { padding-top: 0; }
.pv-dash-nav { display: flex; flex-direction: column; gap: 3px; }
.pv-dash-nav a {
    display: flex; align-items: center; gap: 10px; text-decoration: none;
    font: 600 13.5px var(--pv-font-b); color: var(--pv-ink-soft);
    padding: 10px 13px; border-radius: 999px; min-height: 42px;
    transition: background .2s var(--pv-ease), color .2s, transform .2s var(--pv-spring);
}
.pv-dash-nav a svg { width: 16px; height: 16px; flex: none; }
.pv-dash-nav a:hover { background: #F6F5F0; color: var(--pv-ink); }
.pv-dash-nav a.active { background: var(--pv-dark); color: #fff; }
.pv-dash-user { margin-top: auto; border-top: 1px solid var(--pv-line-soft); padding: 14px 6px 2px; display: flex; align-items: center; gap: 9px; }
.pv-dash-ava { width: 34px; height: 34px; border-radius: 999px; background: var(--pv-lilac); display: grid; place-items: center; font: 800 12px var(--pv-font-d); color: #26241F; flex: none; }
.pv-dash-user .pv-dash-uname { font-size: 12.5px; font-weight: 700; font-family: var(--pv-font-d); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pv-dash-user .pv-dash-umail { font-size: 10.5px; color: var(--pv-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pv-dash-user .pv-dash-home { margin-left: auto; color: var(--pv-muted); width: 32px; height: 32px; border-radius: 999px; display: grid; place-items: center; flex: none; transition: background .2s, color .2s; }
.pv-dash-user .pv-dash-home:hover { background: #F6F5F0; color: var(--pv-ink); }
.pv-dash-user .pv-dash-home svg { width: 15px; height: 15px; }

/* ---------- Main column / topbar ---------- */
.pv-dash-main { flex: 1; min-width: 0; height: 100%; overflow-y: auto; overflow-x: hidden; display: flex; flex-direction: column; -webkit-overflow-scrolling: touch; }
.pv-dash-topbar {
    position: sticky; top: 14px; z-index: 90; flex: none;
    margin: 14px 22px 0; padding: 8px 10px 8px 20px;
    display: flex; align-items: center; justify-content: space-between; gap: 14px;
    background: rgba(255, 255, 255, .9); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    border: 1px solid var(--pv-line); border-radius: 999px; box-shadow: var(--pv-shadow);
    /* Compat tokens so the shared notifications-bell partial renders in pastel */
    --text: var(--pv-ink); --muted: var(--pv-muted); --border-soft: var(--pv-line);
    --border-highlight: #CFCDBF; --input-bg: #FFFFFF; --orange: var(--pv-orange);
}
.pv-dash-title { font-family: var(--pv-font-d); font-size: 15.5px; font-weight: 800; letter-spacing: -.015em; display: flex; align-items: center; gap: 12px; min-width: 0; }
.pv-dash-burger { display: none; }
.pv-dash-actions { display: flex; align-items: center; gap: 10px; }
.pv-dash-flash { padding: 18px 22px 0; max-width: 1180px; width: 100%; margin: 0 auto; }
.pv-dash-flash .pv-alert { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 0; }
.pv-dash-flash .pv-alert .pv-alert-msg { display: flex; align-items: center; gap: 9px; }
.pv-dash-flash .pv-alert svg { width: 16px; height: 16px; flex: none; }
.pv-dash-flash button { background: none; border: none; color: inherit; opacity: .6; cursor: pointer; padding: 4px; display: grid; place-items: center; }
.pv-dash-flash button svg { width: 14px; height: 14px; }
.pv-dash-content { padding: 24px 22px 44px; flex: 1; width: 100%; max-width: 1180px; margin: 0 auto; }

/* ---------- Mobile drawer ---------- */
.pv-dash-drawer { position: fixed; inset: 0; z-index: 400; background: rgba(17, 18, 20, .45); backdrop-filter: blur(3px); }
.pv-dash-sheet {
    position: absolute; top: 0; left: 0; bottom: 0; width: min(300px, 85vw);
    background: #fff; border-radius: 0 28px 28px 0; box-shadow: var(--pv-shadow-lg);
    padding: 18px 14px; display: flex; flex-direction: column; overflow-y: auto;
}
.pv-dash-sheet-head { display: flex; align-items: center; justify-content: space-between; padding-bottom: 14px; border-bottom: 1px solid var(--pv-line-soft); margin-bottom: 10px; }
.pv-dash-sheet .pv-dash-user { border-top: 1px solid var(--pv-line-soft); margin-top: 16px; }

/* ---------- Dashboard components ---------- */
.pv-dash-head { margin-bottom: 24px; }
.pv-dash-head h1 { font-family: var(--pv-font-d); font-size: 24px; font-weight: 800; letter-spacing: -.025em; margin: 0; }
.pv-dash-head h2 { font-family: var(--pv-font-d); font-size: 20px; font-weight: 800; letter-spacing: -.02em; margin: 0; }
.pv-dash-head p { font-size: 13px; color: var(--pv-muted); margin: 4px 0 0; }
.pv-dash-head-row { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 14px; margin-bottom: 24px; }
.pv-dash-head-row .pv-dash-head { margin-bottom: 0; }

.pv-stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; margin-bottom: 26px; }
.pv-statcard { background: #fff; border: 1px solid var(--pv-line); border-radius: var(--pv-radius); padding: 22px; box-shadow: var(--pv-shadow); text-decoration: none; display: block; transition: transform .25s var(--pv-spring), box-shadow .25s var(--pv-ease); }
a.pv-statcard:hover { transform: translateY(-3px); box-shadow: var(--pv-shadow-lg); }
.pv-statcard .pv-stat-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.pv-statcard .pv-stat-label { font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--pv-muted); }
.pv-statcard .pv-stat-num { font-family: var(--pv-font-d); font-size: 29px; font-weight: 800; letter-spacing: -.02em; line-height: 1.1; }
.pv-statcard .pv-stat-sub { font-size: 12px; color: var(--pv-muted); margin-top: 5px; }
.pv-stat-ic { width: 38px; height: 38px; border-radius: 13px; display: grid; place-items: center; color: #26241F; flex: none; }
.pv-stat-ic svg { width: 17px; height: 17px; }

.pv-cols-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.pv-list-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 2px; border-top: 1px solid var(--pv-line-soft); }
.pv-list-row:first-of-type { border-top: none; }
.pv-list-main { display: flex; align-items: center; gap: 11px; min-width: 0; }
.pv-list-main img { width: 34px; height: 34px; border-radius: 11px; object-fit: contain; background: #F6F5F0; border: 1px solid var(--pv-line-soft); flex: none; }
.pv-list-main b { font-family: var(--pv-font-d); font-size: 13.5px; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pv-list-main span { font-size: 11.5px; color: var(--pv-muted); display: block; }

.pv-mini-tool { display: flex; align-items: center; justify-content: space-between; gap: 12px; background: #FAF9F5; border: 1px solid var(--pv-line-soft); border-radius: 18px; padding: 12px 14px; }
.pv-mini-tool .pv-list-main b { font-size: 13px; }

.pv-badge { display: inline-flex; align-items: center; gap: 5px; font: 800 10.5px var(--pv-font-d); letter-spacing: .05em; text-transform: uppercase; padding: 4px 10px; border-radius: 999px; white-space: nowrap; }
.pv-badge-green { background: #DFF3E7; color: #14663F; }
.pv-badge-amber { background: #FFF0D6; color: #8A5A00; }
.pv-badge-red { background: #FDE8E8; color: #8F1D22; }
.pv-badge-grey { background: #F1F0EB; color: var(--pv-ink-soft); }

.pv-table-wrap { background: #fff; border: 1px solid var(--pv-line); border-radius: var(--pv-radius); box-shadow: var(--pv-shadow); overflow-x: auto; }
.pv-table { width: 100%; border-collapse: collapse; text-align: left; font-size: 13.5px; min-width: 640px; }
.pv-table th { font-family: var(--pv-font-d); font-size: 11px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--pv-muted); padding: 15px 18px; border-bottom: 1px solid var(--pv-line); background: #FBFAF6; white-space: nowrap; }
.pv-table td { padding: 15px 18px; border-bottom: 1px solid var(--pv-line-soft); color: var(--pv-ink-soft); vertical-align: middle; }
.pv-table tbody tr:last-child td { border-bottom: none; }
.pv-table tbody tr { transition: background .15s; }
.pv-table tbody tr:hover { background: #FAF9F5; }
.pv-table b, .pv-table .pv-td-strong { color: var(--pv-ink); font-weight: 700; }
.pv-mono { font-family: "JetBrains Mono", ui-monospace, monospace; }

.pv-form-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
.pv-code { background: var(--pv-dark); color: #FFB08A; border-radius: 18px; padding: 16px; font: 500 11.5px/1.65 "JetBrains Mono", ui-monospace, monospace; overflow-x: auto; white-space: pre; margin: 0; }

.pv-modal-backdrop { position: fixed; inset: 0; z-index: 500; background: rgba(17, 18, 20, .5); backdrop-filter: blur(8px); display: flex; align-items: center; justify-content: center; padding: 20px; overflow-y: auto; }
.pv-modal-backdrop-top { align-items: flex-start; }
.pv-modal { background: #fff; border: 1px solid var(--pv-line); border-radius: 28px; box-shadow: var(--pv-shadow-lg); width: 100%; max-width: 440px; padding: 28px; animation: pv-pop .3s var(--pv-spring); }
.pv-modal-lg { max-width: 540px; }
.pv-modal-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 18px; }
.pv-modal-head h3 { font-family: var(--pv-font-d); font-size: 18px; font-weight: 800; letter-spacing: -.02em; margin: 0; }
.pv-modal-head p { font-size: 12.5px; color: var(--pv-muted); margin: 3px 0 0; }
.pv-modal-x { background: #F6F5F0; border: 1px solid var(--pv-line-soft); width: 34px; height: 34px; border-radius: 999px; display: grid; place-items: center; cursor: pointer; color: var(--pv-muted); flex: none; }
.pv-modal-x svg { width: 15px; height: 15px; }

.pv-review-stars { color: #E9A23B; display: inline-flex; gap: 1px; }
.pv-review-stars svg { width: 14px; height: 14px; fill: #E9A23B; }
.pv-admin-note { background: #FFF7F2; border: 1px solid #F2C4AC; border-left: 3px solid var(--pv-orange); border-radius: 14px; padding: 12px 15px; font-size: 12.5px; color: var(--pv-ink-soft); margin-bottom: 12px; }
.pv-admin-note b { color: #B34A1F; font-family: var(--pv-font-d); }

/* ---------- Dashboard responsive ---------- */
@media (max-width: 1024px) {
    .pv-dash-root { height: auto; min-height: 100dvh; overflow: visible; }
    .pv-dash-sidebar { display: none; }
    .pv-dash-main { height: auto; overflow: visible; }
    .pv-dash-burger { display: grid; }
    .pv-dash-topbar { margin: 12px 14px 0; padding-left: 12px; }
    .pv-dash-content { padding: 20px 14px 36px; }
    .pv-dash-flash { padding: 16px 14px 0; }
    .pv-cols-2 { grid-template-columns: 1fr; }
    .pv-dash-actions .pv-dash-submit { display: none; }
}
@media (max-width: 640px) {
    .pv-form-row2 { grid-template-columns: 1fr; }
    .pv-dash-topbar .pv-dash-logout span { display: none; }
    .pv-modal { padding: 22px; }
}


/* ---------- Layout parity components (v1.4.5): language, flash, popup, cookie, footer band ---------- */
.pv-lang { position: relative; flex: none; }
.pv-lang-btn {
    display: inline-flex; align-items: center; gap: 5px; font-family: var(--pv-font-d);
    font-size: 12.5px; font-weight: 700; color: var(--pv-ink-soft); background: #fff;
    border: 1px solid var(--pv-line); border-radius: 999px; padding: 8px 12px; cursor: pointer;
}
.pv-lang-btn svg { width: 12px; height: 12px; }
.pv-lang .pv-dd-chev { transition: transform .25s var(--pv-ease); }
.pv-lang.open .pv-dd-chev { transform: rotate(180deg); }
.pv-lang-menu {
    position: absolute; top: calc(100% + 10px); right: 0; min-width: 210px; background: #fff;
    border: 1px solid var(--pv-line); border-radius: 16px; box-shadow: 0 24px 48px -16px rgba(17,18,20,.22);
    padding: 6px; opacity: 0; pointer-events: none; transform: translateY(6px);
    transition: opacity .2s var(--pv-ease), transform .25s var(--pv-ease); z-index: 70;
    /* B98: 33 languages overflow the viewport — keep the menu scrollable. */
    max-height: min(70vh, 420px); overflow-y: auto; overscroll-behavior: contain;
    scrollbar-width: thin; scrollbar-color: var(--pv-line) transparent; scrollbar-gutter: stable;
}
.pv-lang-menu::-webkit-scrollbar { width: 5px; }
.pv-lang-menu::-webkit-scrollbar-thumb { background: var(--pv-line); border-radius: 4px; }
.pv-lang.open .pv-lang-menu { opacity: 1; pointer-events: auto; transform: translateY(0); }
.pv-lang-menu a {
    display: flex; align-items: center; gap: 9px; padding: 8px 11px; border-radius: 10px;
    color: var(--pv-ink); text-decoration: none; font-size: 13px; font-weight: 600;
}
.pv-lang-menu a:hover { background: var(--pv-cream, #F1F0EB); }
.pv-lang-menu a svg { width: 13px; height: 13px; color: var(--pv-orange); margin-left: auto; }
.pv-lang-active { background: var(--pv-cream, #F1F0EB); }

.pv-flash {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    border-radius: 16px; padding: 12px 18px; font-size: 13px; font-weight: 600;
}
.pv-flash-msg { display: inline-flex; align-items: center; gap: 9px; }
.pv-flash-msg svg { width: 16px; height: 16px; flex: none; }
.pv-flash button { background: none; border: 0; cursor: pointer; color: var(--pv-muted); display: grid; place-items: center; }
.pv-flash button svg { width: 14px; height: 14px; }
.pv-flash-ok { background: #FFF1E8; border: 1px solid rgba(var(--pv-orange-rgb), .4); color: #B44A12; }
.pv-flash-err { background: #FDECEC; border: 1px solid rgba(239,68,68,.4); color: #B42323; }

.pv-footer-news {
    display: flex; align-items: center; justify-content: space-between; gap: 28px; flex-wrap: wrap;
    background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12);
    border-radius: 24px; padding: 26px 28px; margin-bottom: 40px;
}
.pv-footer-news-badge {
    display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 800;
    letter-spacing: .06em; text-transform: uppercase; color: var(--pv-orange); margin-bottom: 8px;
}
.pv-footer-news-badge svg { width: 13px; height: 13px; }
.pv-footer-news h3 { color: #fff; font-family: var(--pv-font-d); font-size: 22px; margin: 0 0 6px; }
.pv-footer-news p { color: #A9A79C; font-size: 13.5px; margin: 0; max-width: 520px; line-height: 1.6; }
.pv-footer-news-form { display: flex; gap: 10px; flex: none; }
.pv-footer-news-form input {
    background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.18); border-radius: 999px;
    padding: 11px 18px; color: #fff; font-size: 13.5px; min-width: 240px; outline: none;
    color-scheme: dark;
}
.pv-footer-news-form input::placeholder { color: #8B897E; }
.pv-status-line {
    display: flex; align-items: center; gap: 8px; font-size: 10.5px; font-weight: 700;
    letter-spacing: .07em; color: #A9A79C; margin-top: 14px; text-transform: uppercase;
}
.pv-radar-dot { width: 8px; height: 8px; border-radius: 99px; background: #4ADE80; box-shadow: 0 0 0 4px rgba(74,222,128,.18); flex: none; }
.pv-footer-bottom-links { display: inline-flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.pv-footer-bottom-links a { display: inline-flex; align-items: center; gap: 4px; }
.pv-footer-bottom-links svg { width: 11px; height: 11px; }

.pv-popup-backdrop {
    position: fixed; inset: 0; background: rgba(17,18,20,.55); backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px); z-index: 200; align-items: center; justify-content: center; padding: 20px;
}
.pv-popup-card {
    position: relative; background: #fff; border-radius: 26px; max-width: 500px; width: 100%;
    padding: 34px 30px; text-align: center; box-shadow: 0 32px 64px -16px rgba(17,18,20,.4);
}
.pv-popup-card h3 { font-family: var(--pv-font-d); font-size: 22px; margin: 0 0 10px; color: var(--pv-ink); }
.pv-popup-card p { font-size: 13.5px; color: var(--pv-muted); line-height: 1.6; margin: 0 0 22px; }
.pv-popup-badge {
    display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 800;
    letter-spacing: .06em; text-transform: uppercase; color: var(--pv-orange);
    background: rgba(var(--pv-orange-rgb), .12); border: 1px solid rgba(var(--pv-orange-rgb), .25);
    padding: 4px 12px; border-radius: 99px; margin-bottom: 14px;
}
.pv-popup-badge svg { width: 12px; height: 12px; }
.pv-popup-x {
    position: absolute; right: 14px; top: 14px; width: 34px; height: 34px; border-radius: 99px;
    border: 1px solid var(--pv-line); background: #fff; color: var(--pv-muted); cursor: pointer; display: grid; place-items: center;
}
.pv-popup-x svg { width: 15px; height: 15px; }
.pv-popup-actions { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; }
.pv-sales-card { text-align: left; max-width: 520px; }
.pv-sales-card h3, .pv-sales-card p { text-align: left; }
.pv-sales-form label { display: block; font-size: 12px; font-weight: 600; color: var(--pv-ink-soft); margin-bottom: 12px; }
.pv-sales-form input, .pv-sales-form select, .pv-sales-form textarea {
    display: block; width: 100%; margin-top: 5px; padding: 10px 13px; border-radius: 12px;
    border: 1px solid var(--pv-line); background: #fff; color: var(--pv-ink); font-size: 13.5px;
    color-scheme: light; caret-color: var(--pv-ink); outline: none; font-family: inherit;
}
.pv-sales-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.pv-sales-form .pv-popup-actions { justify-content: flex-end; margin-top: 6px; }

.pv-cookie {
    position: fixed; bottom: 24px; right: 24px; left: 24px; max-width: 540px; margin-left: auto; z-index: 190;
    background: #fff; border: 1px solid var(--pv-line); border-radius: 22px; padding: 20px;
    box-shadow: 0 24px 48px -12px rgba(17,18,20,.28); animation: pvSlideUpConsent .4s cubic-bezier(.16,1,.3,1);
}
@keyframes pvSlideUpConsent { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
.pv-cookie-head { display: flex; gap: 13px; margin-bottom: 14px; }
.pv-cookie-ic {
    width: 36px; height: 36px; border-radius: 11px; background: rgba(var(--pv-orange-rgb), .12);
    border: 1px solid rgba(var(--pv-orange-rgb), .25); color: var(--pv-orange); display: grid; place-items: center; flex: none;
}
.pv-cookie-ic svg { width: 18px; height: 18px; }
.pv-cookie-title { font-size: 13px; font-weight: 700; color: var(--pv-ink); display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.pv-cookie-tag { font-size: 9px; background: rgba(var(--pv-orange-rgb), .15); color: var(--pv-orange); padding: 2px 6px; border-radius: 5px; font-weight: 700; }
.pv-cookie p { font-size: 12px; color: var(--pv-muted); line-height: 1.55; margin: 0; }
.pv-cookie p a { color: var(--pv-orange); text-decoration: none; font-weight: 600; }
.pv-cookie-actions { display: flex; justify-content: flex-end; gap: 8px; }
@media (max-width: 640px) {
    .pv-footer-news-form { width: 100%; }
    .pv-footer-news-form input { flex: 1; min-width: 0; }
    .pv-sales-row { grid-template-columns: 1fr; }
}

/* ---------- Home parity components (mirror the original home, pastel skin) ---------- */
.pv-demo-banner {
    display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap;
    background: linear-gradient(90deg, #FFF1E8, #FFF7E8); border-bottom: 1px solid rgba(var(--pv-orange-rgb), .3);
    padding: 10px 20px; text-align: center; font-size: 13px; color: var(--pv-ink-soft);
}
.pv-demo-dot { font-weight: 800; color: var(--pv-orange); }
.pv-demo-sep { opacity: .4; }
.pv-demo-banner a { color: #B44A12; font-weight: 700; text-decoration: underline; }
.pv-demo-creds { font-family: ui-monospace, monospace; font-size: 12px; opacity: .85; }

.pv-hero2 {
    display: grid; grid-template-columns: 1.15fr .85fr; gap: 44px; align-items: center;
    padding: 56px 0 44px;
}
.pv-hero-pill {
    display: inline-flex; align-items: center; gap: 8px; background: #fff; border: 1px solid var(--pv-line);
    border-radius: 999px; padding: 7px 14px; font-size: 11px; font-weight: 800; letter-spacing: .05em;
    color: var(--pv-ink-soft); margin-bottom: 20px;
}
.pv-live-dot { width: 8px; height: 8px; border-radius: 99px; background: #22C55E; box-shadow: 0 0 0 4px rgba(34,197,94,.18); flex: none; }
.pv-hero2 h1 { font-family: var(--pv-font-d); font-size: clamp(34px, 4.6vw, 54px); line-height: 1.06; letter-spacing: -.03em; margin: 0 0 16px; color: var(--pv-ink); }
.pv-hero-sub { font-size: 16px; line-height: 1.65; color: var(--pv-muted); margin: 0 0 24px; max-width: 540px; }
.pv-hero-searchbar {
    display: flex; align-items: center; gap: 8px; background: #fff; border: 1px solid var(--pv-line);
    border-radius: 999px; padding: 6px 6px 6px 18px; box-shadow: 0 16px 32px -16px rgba(17,18,20,.18);
}
.pv-hero-searchbar > input {
    flex: 1; min-width: 0; border: 0; outline: none; font-size: 14.5px; color: var(--pv-ink);
    background: transparent; color-scheme: light; caret-color: var(--pv-ink);
}
.pv-hero-searchbar .pv-search-ic { color: var(--pv-orange); flex: none; }
.pv-catdd { position: relative; flex: none; }
.pv-catdd-btn {
    display: inline-flex; align-items: center; gap: 6px; background: var(--pv-cream, #F1F0EB);
    border: 1px solid var(--pv-line); border-radius: 999px; padding: 9px 13px; cursor: pointer;
    font-size: 12.5px; font-weight: 700; color: var(--pv-ink-soft); font-family: inherit;
}
.pv-catdd-btn svg { width: 12px; height: 12px; }
.pv-catdd .pv-dd-chev { transition: transform .25s var(--pv-ease); }
.pv-catdd.open .pv-dd-chev { transform: rotate(180deg); }
.pv-catdd-menu {
    position: absolute; top: calc(100% + 10px); right: 0; width: 280px; max-height: 330px; overflow: auto;
    background: #fff; border: 1px solid var(--pv-line); border-radius: 18px; padding: 6px;
    box-shadow: 0 24px 48px -16px rgba(17,18,20,.25); opacity: 0; pointer-events: none;
    transform: translateY(6px); transition: opacity .2s var(--pv-ease), transform .25s var(--pv-ease); z-index: 60;
}
.pv-catdd.open .pv-catdd-menu { opacity: 1; pointer-events: auto; transform: translateY(0); }
.pv-catdd-menu button {
    display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%;
    background: none; border: 0; padding: 9px 11px; border-radius: 11px; cursor: pointer;
    font-size: 13px; font-weight: 600; color: var(--pv-ink); font-family: inherit; text-align: left;
}
.pv-catdd-menu button:hover { background: var(--pv-cream, #F1F0EB); }
.pv-catdd-menu button span { display: inline-flex; align-items: center; gap: 8px; }
.pv-catdd-menu button svg { width: 13px; height: 13px; color: var(--pv-orange); }
.pv-catdd-count { font-size: 10.5px; color: var(--pv-muted); font-family: ui-monospace, monospace; }

/* Stacking repair: the open category menu must paint above the hero's
   quick-tag and trust rows. Their reveal animations retain a transform
   (fill-mode forwards), which creates competing stacking contexts that
   otherwise let those later rows cover the menu. */
.pv-hero-form { position: relative; z-index: 70; }
.pv-quicktags, .pv-trust { position: relative; z-index: 1; }
.pv-quicktags { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 18px; font-size: 12.5px; color: var(--pv-muted); font-weight: 600; }
.pv-quicktags .pv-chip svg { width: 11px; height: 11px; color: var(--pv-orange); }
.pv-chip-dash { border-style: dashed !important; }
.pv-trust { display: flex; gap: 22px; flex-wrap: wrap; margin-top: 22px; }
.pv-trust span { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 650; color: var(--pv-ink-soft); }
.pv-trust svg { width: 14px; height: 14px; color: var(--pv-orange); }
.pv-hero-imgwrap {
    border-radius: 28px; overflow: hidden; border: 1px solid var(--pv-line);
    box-shadow: 0 32px 64px -24px rgba(17,18,20,.25); background: #fff;
}
.pv-hero-imgwrap img { display: block; width: 100%; height: auto; }
.pv-hide-mobile { }
@media (max-width: 900px) {
    .pv-hero2 { grid-template-columns: 1fr; padding-top: 36px; }
    .pv-hide-mobile { display: none; }
    .pv-catdd { display: none; }
}

.pv-cockpit {
    background: #fff; border: 1px solid var(--pv-line); border-radius: 26px; padding: 22px 26px;
    box-shadow: 0 20px 40px -24px rgba(17,18,20,.16); margin-bottom: 8px;
}
.pv-cockpit-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.pv-cockpit-badge { display: inline-flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 800; letter-spacing: .07em; color: var(--pv-ink); }
.pv-cockpit-sync { font-size: 11px; color: var(--pv-muted); font-family: ui-monospace, monospace; }
.pv-cockpit-sync strong { color: var(--pv-ink); }
.pv-cockpit-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.pv-metric b { display: block; font-family: var(--pv-font-d); font-size: clamp(24px, 3vw, 34px); letter-spacing: -.02em; color: var(--pv-ink); }
.pv-metric span { font-size: 11.5px; color: var(--pv-muted); font-weight: 600; text-transform: uppercase; letter-spacing: .05em; }
.pv-accent { color: var(--pv-orange) !important; }
.pv-ticker {
    display: flex; align-items: center; gap: 16px; margin-top: 18px; padding-top: 16px;
    border-top: 1px solid var(--pv-line-soft); overflow: hidden;
}
.pv-ticker-label { display: inline-flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 700; white-space: nowrap; }
.pv-ticker-track { display: flex; gap: 28px; overflow-x: auto; scrollbar-width: none; font-size: 12px; color: var(--pv-muted); }
.pv-ticker-track::-webkit-scrollbar { display: none; }
.pv-ticker-track a { color: inherit; text-decoration: none; white-space: nowrap; }
.pv-ticker-track a strong, .pv-ticker-track span strong { color: var(--pv-ink); }
@media (max-width: 760px) { .pv-cockpit-grid { grid-template-columns: repeat(2, 1fr); } }

.pv-sec-tag {
    display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 800;
    letter-spacing: .07em; text-transform: uppercase; color: var(--pv-orange); margin-bottom: 10px;
}
.pv-sec-tag svg { width: 13px; height: 13px; }
.pv-sponsored {
    display: inline-block; font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
    background: rgba(var(--pv-orange-rgb), .14); color: #B44A12; border: 1px solid rgba(var(--pv-orange-rgb), .3);
    padding: 2px 8px; border-radius: 99px;
}
.pv-feats { display: flex; gap: 6px; flex-wrap: wrap; }
.pv-feat {
    font-size: 11px; font-weight: 600; color: var(--pv-ink-soft); background: var(--pv-cream, #F1F0EB);
    border: 1px solid var(--pv-line-soft); padding: 4px 9px; border-radius: 99px;
}

.pv-podium-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.pv-podium-card { display: flex; flex-direction: column; padding: 22px; }
.pv-podium-rank { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 800; letter-spacing: .06em; margin-bottom: 12px; }
.pv-podium-rank svg { width: 13px; height: 13px; }
.pv-rank-gold { color: #B8860B; } .pv-rank-silver { color: #6B7280; } .pv-rank-bronze { color: #A05C2C; }
.pv-podium-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.pv-podium-head img { width: 42px; height: 42px; border-radius: 11px; object-fit: contain; background: var(--pv-cream, #F1F0EB); padding: 4px; border: 1px solid var(--pv-line-soft); }
.pv-podium-head h3 { font-family: var(--pv-font-d); font-size: 16.5px; margin: 0; color: var(--pv-ink); }
.pv-podium-head span { font-size: 11.5px; color: var(--pv-orange); font-weight: 650; }
.pv-podium-desc { font-size: 12.5px; color: var(--pv-muted); line-height: 1.55; margin: 0 0 14px; min-height: 48px; }
.pv-podium-foot {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    border-top: 1px solid var(--pv-line-soft); padding-top: 13px; margin-top: auto;
}
.pv-votes-label { font-size: 12px; font-weight: 700; color: var(--pv-orange); font-family: ui-monospace, monospace; }
.pv-podium-actions { display: inline-flex; gap: 8px; align-items: center; }
@media (max-width: 900px) { .pv-podium-grid { grid-template-columns: 1fr; } }

.pv-stacks-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.pv-stack-card { padding: 22px; display: flex; flex-direction: column; }
.pv-stack-badge { align-self: flex-start; font-size: 10px; font-weight: 800; letter-spacing: .07em; color: var(--pv-ink-soft); border: 1px solid var(--pv-line); border-radius: 99px; padding: 4px 10px; margin-bottom: 13px; }
.pv-stack-card h3 { font-family: var(--pv-font-d); font-size: 17px; margin: 0 0 6px; color: var(--pv-ink); }
.pv-stack-card > p { font-size: 12.5px; color: var(--pv-muted); line-height: 1.55; margin: 0 0 14px; }
.pv-stack-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 0; border-top: 1px solid var(--pv-line-soft); font-size: 12.5px; font-weight: 600; color: var(--pv-ink-soft); }
.pv-stack-row small { color: var(--pv-muted); font-weight: 500; }
.pv-stack-ms { font-family: ui-monospace, monospace; font-size: 11px; color: var(--pv-orange); font-weight: 700; }
.pv-stack-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; padding-top: 14px; }
.pv-stack-total { font-family: ui-monospace, monospace; font-size: 10.5px; color: var(--pv-muted); }
@media (max-width: 900px) { .pv-stacks-grid { grid-template-columns: 1fr; } }

.pv-filter-tabs { display: flex; gap: 8px; flex-wrap: wrap; }
.pv-filter-tabs button {
    font-family: inherit; font-size: 12.5px; font-weight: 700; color: var(--pv-ink-soft);
    background: #fff; border: 1px solid var(--pv-line); border-radius: 999px; padding: 8px 15px; cursor: pointer;
    transition: all .2s var(--pv-ease);
}
.pv-filter-tabs button:hover { border-color: var(--pv-ink); }
.pv-filter-tabs button.on { background: var(--pv-ink); color: #fff; border-color: var(--pv-ink); }
.pv-dir-card { padding: 16px; display: flex; flex-direction: column; }
.pv-dir-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.pv-dir-id { display: flex; align-items: center; gap: 10px; }
.pv-dir-id img { width: 38px; height: 38px; border-radius: 9px; object-fit: contain; background: var(--pv-cream, #F1F0EB); padding: 3px; border: 1px solid var(--pv-line-soft); }
.pv-dir-id h4 { font-family: var(--pv-font-d); font-size: 15px; margin: 0 0 2px; color: var(--pv-ink); }
.pv-dir-id span { font-size: 11px; color: var(--pv-orange); font-weight: 650; }
.pv-dir-badges { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.pv-price { font-size: 10.5px; font-weight: 800; letter-spacing: .04em; padding: 3px 9px; border-radius: 99px; background: var(--pv-cream, #F1F0EB); color: var(--pv-ink-soft); border: 1px solid var(--pv-line-soft); text-transform: uppercase; }
.pv-price-free { background: #E9F9EE; color: #12703A; border-color: #BEE7CB; }
.pv-price-open_source { background: #EEF2FF; color: #3730A3; border-color: #C7D2FE; }
.pv-price-paid { background: #FFF4E5; color: #91580A; border-color: #F3D9AE; }
.pv-dir-desc { font-size: 12.5px; color: var(--pv-muted); line-height: 1.55; margin: 0 0 14px; min-height: 45px; }
.pv-dir-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; border-top: 1px solid var(--pv-line-soft); padding-top: 11px; margin-top: auto; }
.pv-dir-foot .pv-upvote, .pv-dir-foot .pv-dir-actions { flex-shrink: 0; }
.pv-dir-actions { display: inline-flex; align-items: center; gap: 8px; }
.pv-ad-card { padding: 20px; display: flex; flex-direction: column; justify-content: center; }
.pv-center { text-align: center; margin-top: 32px; }

.pv-spec-card { padding: 0; overflow: hidden; }
.pv-spec-wrap { overflow-x: auto; }
.pv-spec-table { width: 100%; border-collapse: collapse; font-size: 13px; min-width: 640px; }
.pv-spec-table th { text-align: left; font-family: var(--pv-font-d); font-size: 12px; letter-spacing: .05em; padding: 15px 18px; border-bottom: 1px solid var(--pv-line); color: var(--pv-ink); background: #FBFAF7; }
.pv-spec-table td { padding: 13px 18px; border-bottom: 1px solid var(--pv-line-soft); color: var(--pv-muted); vertical-align: middle; }
.pv-spec-table tr:last-child td { border-bottom: 0; }
.pv-spec-table td:first-child { font-weight: 650; color: var(--pv-ink-soft); }
th.pv-spec-hot { color: var(--pv-orange); background: rgba(var(--pv-orange-rgb), .06); border-bottom: 2px solid var(--pv-orange) !important; }
td.pv-spec-hotcell { background: rgba(var(--pv-orange-rgb), .03); }
td.pv-spec-hotcell strong { color: var(--pv-ink); }
.pv-spec-pop { font-size: 9px; background: var(--pv-orange); color: #fff; padding: 2px 6px; border-radius: 5px; margin-left: 5px; vertical-align: middle; letter-spacing: .04em; }
.pv-spec-yes { color: var(--pv-orange); font-weight: 700; }
.pv-mono { font-family: ui-monospace, monospace; }
.pv-arena-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 18px; font-size: 12.5px; color: var(--pv-muted); }

.pv-bench-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.pv-bench-card { padding: 20px; }
.pv-bench-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.pv-bench-head h4 { font-family: var(--pv-font-d); font-size: 15px; margin: 0 0 3px; color: var(--pv-ink); }
.pv-bench-head span { font-size: 11px; color: var(--pv-muted); }
.pv-bar { height: 7px; border-radius: 99px; background: var(--pv-cream, #F1F0EB); overflow: hidden; }
.pv-bar span { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--pv-orange), #FFB35C); }
.pv-bench-meta { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; font-size: 11px; color: var(--pv-muted); margin-top: 9px; }
.pv-bench-meta .pv-accent { font-weight: 700; }
@media (max-width: 760px) { .pv-bench-grid { grid-template-columns: 1fr; } }
.pv-ping { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 20px 22px; margin-top: 18px; }
.pv-ping-info { display: flex; align-items: center; gap: 13px; }
.pv-ping-ic { width: 42px; height: 42px; border-radius: 12px; background: rgba(var(--pv-orange-rgb), .12); border: 1px solid rgba(var(--pv-orange-rgb), .25); color: var(--pv-orange); display: grid; place-items: center; flex: none; }
.pv-ping-ic svg { width: 20px; height: 20px; }
.pv-ping-info h4 { font-family: var(--pv-font-d); font-size: 14.5px; margin: 0 0 3px; color: var(--pv-ink); }
.pv-ping-info p { font-size: 12px; color: var(--pv-muted); margin: 0; }
.pv-ping-action { display: inline-flex; align-items: center; gap: 14px; }
.pv-ping-result { font-size: 12.5px; font-weight: 700; color: var(--pv-ink-soft); font-family: ui-monospace, monospace; }

.pv-reviews-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.pv-review-card { padding: 20px; }
.pv-review-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 11px; }
.pv-review-id { display: flex; align-items: center; gap: 10px; }
.pv-review-avatar { width: 35px; height: 35px; border-radius: 99px; background: rgba(var(--pv-orange-rgb), .12); border: 1px solid rgba(var(--pv-orange-rgb), .25); color: var(--pv-orange); display: grid; place-items: center; font-weight: 800; font-size: 12px; flex: none; }
.pv-review-id h4 { font-family: var(--pv-font-d); font-size: 14px; margin: 0; color: var(--pv-ink); }
.pv-review-id span { font-size: 10.5px; color: var(--pv-muted); }
.pv-review-stars-static { color: #E9A23B; font-size: 12px; letter-spacing: 1px; }
.pv-review-regarding { font-size: 11px; color: var(--pv-orange); font-weight: 650; margin-bottom: 8px; }
.pv-review-card p { font-size: 12.5px; color: var(--pv-muted); line-height: 1.55; margin: 0; }
@media (max-width: 900px) { .pv-reviews-grid { grid-template-columns: 1fr; } }

.pv-cta {
    background: var(--pv-ink); color: #fff; border-radius: 30px; padding: 52px 36px; text-align: center;
    position: relative; overflow: hidden;
}
.pv-cta-pill { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.16); color: #E8E6DE; }
.pv-cta h2 { font-family: var(--pv-font-d); font-size: clamp(24px, 3.4vw, 30px); letter-spacing: -.02em; margin: 0 auto 12px; max-width: 640px; }
.pv-cta p { font-size: 14px; color: #A9A79C; line-height: 1.65; margin: 0 auto 28px; max-width: 640px; }
.pv-cta-actions { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; }
.pv-cta .pv-btn-dark { background: #fff; color: var(--pv-ink); }
.pv-cta .pv-grad { background: linear-gradient(92deg, #FFB35C, #FF8C42); -webkit-background-clip: text; background-clip: text; color: transparent; }

.pv-qv-backdrop {
    position: fixed; inset: 0; background: rgba(17,18,20,.55); backdrop-filter: blur(10px);
    z-index: 200; align-items: center; justify-content: center; padding: 20px;
}
.pv-qv-card { position: relative; background: #fff; border-radius: 26px; max-width: 520px; width: 100%; padding: 26px; box-shadow: 0 32px 64px -16px rgba(17,18,20,.4); }
.pv-qv-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.pv-qv-id { display: flex; align-items: center; gap: 12px; }
.pv-qv-avatar { width: 42px; height: 42px; border-radius: 11px; background: var(--pv-cream, #F1F0EB); display: grid; place-items: center; font-size: 18px; }
.pv-qv-id h3 { font-family: var(--pv-font-d); font-size: 16.5px; margin: 0; color: var(--pv-ink); }
.pv-qv-id span { font-size: 11px; color: var(--pv-orange); font-weight: 650; }
.pv-qv-card > p { font-size: 13px; color: var(--pv-muted); line-height: 1.55; margin: 0 0 16px; }
.pv-qv-caps { margin-bottom: 16px; }
.pv-qv-caps-label { display: block; font-size: 11px; font-weight: 700; color: var(--pv-muted); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 8px; }
.pv-qv-metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.pv-qv-metrics div { background: var(--pv-cream, #F1F0EB); border-radius: 14px; padding: 12px; text-align: center; }
.pv-qv-metrics b { display: block; font-family: var(--pv-font-d); font-size: 15px; color: var(--pv-ink); }
.pv-qv-metrics span { font-size: 10.5px; color: var(--pv-muted); text-transform: uppercase; letter-spacing: .05em; font-weight: 650; }
.pv-qv-actions { display: flex; gap: 10px; margin-top: 20px; }
.pv-qv-actions .pv-btn { flex: 1; justify-content: center; }

/* ---------- Error pages (pastel) ---------- */
.pv-error { padding: 70px 0 90px; display: flex; justify-content: center; }
.pv-error-card { max-width: 680px; width: 100%; text-align: center; padding: 52px 34px; }
.pv-error-code {
    font-family: ui-monospace, monospace; font-size: 76px; font-weight: 900; line-height: 1;
    letter-spacing: -.04em; margin-bottom: 14px;
    background: linear-gradient(135deg, #FF8C5A, #EA580C); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.pv-error-amber { background: none; color: #D97706; -webkit-text-fill-color: #D97706; }
.pv-error-red { background: none; color: #DC2626; -webkit-text-fill-color: #DC2626; }
.pv-error-card h1 { font-family: var(--pv-font-d); font-size: 23px; margin: 0 0 12px; color: var(--pv-ink); }
.pv-error-card p { font-size: 14px; color: var(--pv-muted); line-height: 1.6; margin: 0 auto 26px; max-width: 480px; }
.pv-error-search { display: flex; gap: 10px; max-width: 420px; margin: 0 auto 26px; }
.pv-error-search input {
    flex: 1; padding: 11px 16px; border-radius: 999px; border: 1px solid var(--pv-line);
    font-size: 13.5px; color: var(--pv-ink); color-scheme: light; caret-color: var(--pv-ink); outline: none; min-width: 0;
}
.pv-error-actions { display: flex; justify-content: center; gap: 11px; flex-wrap: wrap; }

/* ---------- Checkout: payment gateway selector ---------- */
.pv-gw-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin-bottom: 16px; }
.pv-gw { position: relative; display: flex; align-items: center; gap: 12px; border: 2px solid var(--pv-line); border-radius: 16px; padding: 14px 16px; cursor: pointer; text-align: left; background: #fff; transition: border-color .18s var(--pv-ease), background .18s var(--pv-ease), box-shadow .18s var(--pv-ease); }
.pv-gw:hover { border-color: #CFCDBF; box-shadow: var(--pv-shadow); }
.pv-gw-ic { width: 42px; height: 42px; border-radius: 12px; background: #F6F5F0; display: grid; place-items: center; color: var(--pv-orange); flex: none; }
.pv-gw-ic svg { width: 21px; height: 21px; }
.pv-gw-txt { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.pv-gw-txt b { font-family: var(--pv-font-d); font-weight: 700; font-size: 13.5px; color: var(--pv-ink); }
.pv-gw-txt small { font-size: 11px; color: var(--pv-muted); }
.pv-gw-radio { position: absolute; top: 12px; right: 12px; width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--pv-line); background: #fff; transition: all .18s var(--pv-ease); flex: none; }
.pv-gw-on { border-color: #111214; background: #F8F7F2; }
.pv-gw-on .pv-gw-radio { border-color: #111214; background: #111214; box-shadow: inset 0 0 0 3.5px #fff; }
.pv-gw-on .pv-gw-ic { background: #ECEAE0; }

/* ---------- Spotlight search (Original-theme pattern, pastel skin) ---------- */
.pv-spotlight-btn { display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px; border-radius: 999px; background: #F6F5F0; border: 1px solid var(--pv-line); color: var(--pv-muted); font-family: var(--pv-font-b); font-size: 12.5px; font-weight: 600; cursor: pointer; transition: border-color .2s var(--pv-ease), color .2s var(--pv-ease); flex: none; }
.pv-spotlight-btn:hover { border-color: #CFCDBF; color: var(--pv-ink); }
.pv-spotlight-btn svg { width: 13px; height: 13px; color: var(--pv-orange); }
.pv-kbd { font-size: 10px; font-weight: 700; background: #fff; border: 1px solid var(--pv-line); border-bottom-width: 2px; border-radius: 6px; padding: 1px 5px; color: var(--pv-muted); }
@media (max-width: 640px) { .pv-spotlight-txt, .pv-kbd { display: none; } .pv-spotlight-btn { padding: 8px; } }
.pv-palette { position: fixed; inset: 0; z-index: 400; display: none; }
.pv-palette.open { display: block; }
.pv-palette-backdrop { position: absolute; inset: 0; background: rgba(22, 21, 15, .45); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
.pv-palette-card { position: relative; max-width: 620px; margin: 12vh auto 0; background: #fff; border: 1px solid var(--pv-line); border-radius: 22px; box-shadow: 0 30px 80px rgba(22, 21, 15, .25); padding: 14px; animation: pv-pop .3s var(--pv-spring); }
.pv-palette .pv-searchbox { max-width: none; margin: 0; }
.pv-palette .pv-search-drop { position: static; margin-top: 10px; max-height: 46vh; box-shadow: none; border: 0; border-radius: 0; }
.pv-palette-hint { font-size: 11.5px; color: var(--pv-muted); text-align: center; margin-top: 10px; }
@media (max-width: 680px) { .pv-palette-card { margin: 8vh 14px 0; } }

/* ================= DARK MODE + LOGO (v1.4.5) =================
   Pastel dark mode keys off :root[data-theme="dark"] — the SAME attribute
   and the SAME localStorage key ("jarvis_theme") the Original theme uses,
   so a visitor's choice carries across both themes. Default stays light. */
:root[data-theme="dark"] {
    color-scheme: dark;
    --pv-canvas: #0C0C0E;
    --pv-ink: #F4F2EA;
    --pv-ink-soft: #C9C7BC;
    --pv-muted: #9D9B90;
    --pv-card: #151619;
    --pv-line: #26272C;
    --pv-line-soft: #1E1F23;
    --pv-shadow: 0 2px 6px rgba(0, 0, 0, .35), 0 18px 40px -18px rgba(0, 0, 0, .55);
    --pv-shadow-lg: 0 4px 10px rgba(0, 0, 0, .45), 0 30px 60px -20px rgba(0, 0, 0, .7);
}
:root[data-theme="dark"] .pv-header-inner { background: rgba(15, 15, 18, .88); }
:root[data-theme="dark"] .pv-dash-topbar { background: rgba(15, 15, 18, .9); --border-highlight: #3A3B40; --input-bg: #101113; }
:root[data-theme="dark"] .pv-nav-dd-panel,
:root[data-theme="dark"] .pv-lang-menu,
:root[data-theme="dark"] .pv-search-drop,
:root[data-theme="dark"] .pv-searchbox-inner,
:root[data-theme="dark"] .pv-palette-card,
:root[data-theme="dark"] .pv-modal,
:root[data-theme="dark"] .pv-card,
:root[data-theme="dark"] .pv-cat-card,
:root[data-theme="dark"] .pv-blog-card,
:root[data-theme="dark"] .pv-board,
:root[data-theme="dark"] .pv-stats,
:root[data-theme="dark"] .pv-tabs,
:root[data-theme="dark"] .pv-table-wrap,
:root[data-theme="dark"] .pv-dash-side-card,
:root[data-theme="dark"] .pv-dash-sheet,
:root[data-theme="dark"] .pv-chip,
:root[data-theme="dark"] .pv-hero-badge,
:root[data-theme="dark"] .pv-filterbar,
:root[data-theme="dark"] .pv-pagination nav { background: var(--pv-card); }
:root[data-theme="dark"] .pv-icon-btn { background: #1B1C1F; color: var(--pv-ink); border-color: var(--pv-line); }
:root[data-theme="dark"] .pv-btn-light { background: #1B1C1F; color: var(--pv-ink); border-color: var(--pv-line); }
:root[data-theme="dark"] .pv-btn-dark { background: #F4F2EA; color: #121316; }
:root[data-theme="dark"] .pv-chip.pv-chip-active { background: var(--pv-ink); color: #121316; border-color: var(--pv-ink); }
:root[data-theme="dark"] .pv-spotlight-btn { background: #1B1C1F; }
:root[data-theme="dark"] .pv-table th { background: #1A1B1E; }
:root[data-theme="dark"] .pv-input,
:root[data-theme="dark"] .pv-field input,
:root[data-theme="dark"] .pv-field select,
:root[data-theme="dark"] .pv-field textarea {
    background: #101113; color: var(--pv-ink); border-color: var(--pv-line);
    -webkit-text-fill-color: var(--pv-ink); caret-color: var(--pv-ink);
}
:root[data-theme="dark"] ::placeholder { color: #77756B; opacity: 1; }
/* Logo: real image at natural aspect (never cropped into the mark box),
   dark/light variants swap with the theme — same behaviour as Original. */
.pv-logo-img { height: 30px; width: auto; max-width: 180px; object-fit: contain; display: block; }
.pv-logo-img-dark { display: none; }
:root[data-theme="dark"] .pv-logo-img-light { display: none; }
:root[data-theme="dark"] .pv-logo-img-dark { display: block; }
/* Theme toggle icons: moon in light mode, sun in dark mode. */
.pv-icon-sun { display: none; }
:root[data-theme="dark"] .pv-icon-sun { display: block; }
:root[data-theme="dark"] .pv-icon-moon { display: none; }

/* ---- Dark surfaces sweep (v1.4.5): every light surface flips ---- */
:root[data-theme="dark"] .pv-anchor,
:root[data-theme="dark"] .pv-badge-grey,
:root[data-theme="dark"] .pv-board-row img,
:root[data-theme="dark"] .pv-btn-light,
:root[data-theme="dark"] .pv-card,
:root[data-theme="dark"] .pv-cat-card,
:root[data-theme="dark"] .pv-catdd-menu,
:root[data-theme="dark"] .pv-chip,
:root[data-theme="dark"] .pv-cockpit,
:root[data-theme="dark"] .pv-cookie,
:root[data-theme="dark"] .pv-cta-pill,
:root[data-theme="dark"] .pv-dash-sheet,
:root[data-theme="dark"] .pv-dash-side-card,
:root[data-theme="dark"] .pv-empty-ic,
:root[data-theme="dark"] .pv-feature,
:root[data-theme="dark"] .pv-filter-tabs button,
:root[data-theme="dark"] .pv-filterbar,
:root[data-theme="dark"] .pv-filterbar input[type="search"],
:root[data-theme="dark"] .pv-filterbar input[type="text"],
:root[data-theme="dark"] .pv-filterbar select,
:root[data-theme="dark"] .pv-select,
:root[data-theme="dark"] .pv-footer-news,
:root[data-theme="dark"] .pv-footer-news-form input,
:root[data-theme="dark"] .pv-gw,
:root[data-theme="dark"] .pv-gw-ic,
:root[data-theme="dark"] .pv-gw-radio,
:root[data-theme="dark"] .pv-heart,
:root[data-theme="dark"] .pv-hero-badge,
:root[data-theme="dark"] .pv-hero-imgwrap,
:root[data-theme="dark"] .pv-hero-pill,
:root[data-theme="dark"] .pv-hero-searchbar,
:root[data-theme="dark"] .pv-icon-btn,
:root[data-theme="dark"] .pv-input,
:root[data-theme="dark"] .pv-field input,
:root[data-theme="dark"] .pv-field select,
:root[data-theme="dark"] .pv-field textarea,
:root[data-theme="dark"] .pv-input:focus,
:root[data-theme="dark"] .pv-field input:focus,
:root[data-theme="dark"] .pv-field select:focus,
:root[data-theme="dark"] .pv-field textarea:focus,
:root[data-theme="dark"] .pv-kbd,
:root[data-theme="dark"] .pv-lang-btn,
:root[data-theme="dark"] .pv-lang-menu,
:root[data-theme="dark"] .pv-list-main img,
:root[data-theme="dark"] .pv-mobile-menu,
:root[data-theme="dark"] .pv-modal,
:root[data-theme="dark"] .pv-modal-x,
:root[data-theme="dark"] .pv-nav-dd-panel,
:root[data-theme="dark"] .pv-news-form,
:root[data-theme="dark"] .pv-pagination nav,
:root[data-theme="dark"] .pv-palette-card,
:root[data-theme="dark"] .pv-panel,
:root[data-theme="dark"] .pv-pill,
:root[data-theme="dark"] .pv-popup-card,
:root[data-theme="dark"] .pv-popup-x,
:root[data-theme="dark"] .pv-qv-card,
:root[data-theme="dark"] .pv-sales-form input,
:root[data-theme="dark"] .pv-sales-form select,
:root[data-theme="dark"] .pv-sales-form textarea,
:root[data-theme="dark"] .pv-search-drop,
:root[data-theme="dark"] .pv-search-drop img,
:root[data-theme="dark"] .pv-searchbox-inner,
:root[data-theme="dark"] .pv-statcard,
:root[data-theme="dark"] .pv-stats,
:root[data-theme="dark"] .pv-table th,
:root[data-theme="dark"] .pv-table-wrap,
:root[data-theme="dark"] .pv-upvote,
:root[data-theme="dark"] .pv-why .pv-why-ic,
:root[data-theme="dark"] .pv-ad,
:root[data-theme="dark"] .pv-article,
:root[data-theme="dark"] .pv-blog-card,
:root[data-theme="dark"] .pv-compare-table,
:root[data-theme="dark"] .pv-empty,
:root[data-theme="dark"] .pv-form-card,
:root[data-theme="dark"] .pv-board,
:root[data-theme="dark"] .pv-spotlight-btn,
:root[data-theme="dark"] .pv-tabs,
:root[data-theme="dark"] .pv-detail-hero { background: var(--pv-card); }
:root[data-theme="dark"] .pv-gw-on { background: rgba(var(--pv-orange-rgb), .14); }
:root[data-theme="dark"] [style*="background:#F8F7F2"] { background: #17181B !important; }

/* ---- Dark: neutral off-white rows (#FAF9F5 family) ---- */
:root[data-theme="dark"] .pv-mini-tool { background: #1A1B1E; }
:root[data-theme="dark"] .pv-board-row:hover,
:root[data-theme="dark"] .pv-table tbody tr:hover { background: #1A1B1E; }

/* ---- DARK MODE — FULL TOKEN SWEEP (v1.4.5): gradients, hovers, focus ---- */
:root[data-theme="dark"] {
    --pv-lilac: linear-gradient(135deg, #3A3358, #2A2447);
    --pv-peach: linear-gradient(135deg, #5C3421, #402416);
    --pv-mint: linear-gradient(135deg, #1E4033, #14291F);
    --pv-sky: linear-gradient(135deg, #1E3852, #152639);
    --pv-sun: linear-gradient(135deg, #54451C, #38300F);
}
:root[data-theme="dark"] .pv-dash-nav a:hover { background: #1E1F23; }
:root[data-theme="dark"] .pv-dash-user .pv-dash-home:hover { background: #1E1F23; }
:root[data-theme="dark"] .pv-footer .pv-socials a:hover { background: #26272C; color: var(--pv-ink); }
:root[data-theme="dark"] .pv-mobile-menu a:hover { background: #1E1F23; }
:root[data-theme="dark"] .pv-pagination a:hover { background: #1E1F23; }
:root[data-theme="dark"] .pv-search-drop a:hover { background: #1E1F23; }
:root[data-theme="dark"] .pv-input:focus,
:root[data-theme="dark"] .pv-field input:focus,
:root[data-theme="dark"] .pv-field select:focus,
:root[data-theme="dark"] .pv-field textarea:focus { background: #101113; }
:root[data-theme="dark"] .pv-heart { color: #8E8C80; }
:root[data-theme="dark"] [style*="background:#F8F7F2"] { background: #17181B !important; }
:root[data-theme="dark"] [style*="background:#FFF7F2"] { background: #17181B !important; }
:root[data-theme="dark"] [style*="background:#FAF9F5"] { background: #1A1B1E !important; }
:root[data-theme="dark"] [style*="background:#fff"] { background: var(--pv-card) !important; }
:root[data-theme="dark"] [style*="background:#FFF"] { background: var(--pv-card) !important; }
:root[data-theme="dark"] [style*="background:#F6F5F0"] { background: #1A1B1E !important; }
:root[data-theme="dark"] [style*="background:#ECEAE0"] { background: #1A1B1E !important; }
:root[data-theme="dark"] [style*="background:#F1EFE7"] { background: #1A1B1E !important; }
:root[data-theme="dark"] [style*="background:#ffffff"] { background: var(--pv-card) !important; }
:root[data-theme="dark"] [style*="background: #F8F7F2"] { background: #17181B !important; }

/* ---- DARK MODE — TOKEN COMPLETION (v1.4.5) ---- */
:root { --pv-cream: #F1F0EB; }
:root[data-theme="dark"] { --pv-cream: #1E1F23; }
:root[data-theme="dark"] .pv-cta { background: #17181B; }
:root[data-theme="dark"] .pv-filter-tabs button.on { color: #121316; }
:root[data-theme="dark"] .pv-demo-banner { background: linear-gradient(90deg, #2A1A10, #241A10); }
:root[data-theme="dark"] .pv-demo-banner a { color: #FF9E6B; }
:root[data-theme="dark"] .pv-nav-ai { background: linear-gradient(120deg, #4A3A1F, #4A2436 55%, #26304F); color: #F4F2EA !important; }
:root[data-theme="dark"] .pv-alert-success { background: #123524; color: #7EE2AE; }
:root[data-theme="dark"] .pv-alert-error { background: #3D1719; color: #F5A3A7; }
:root[data-theme="dark"] .pv-share-pill { background: #1B1C1F; color: var(--pv-ink-soft); border-color: var(--pv-line); }
:root[data-theme="dark"] .pv-share-pill:hover { background: #26272C; border-color: var(--pv-line); color: var(--pv-ink); }
:root[data-theme="dark"] .pv-badge-icon-pill { background: #1B1C1F; color: var(--pv-ink-soft); border-color: var(--pv-line); }
:root[data-theme="dark"] .pv-badge-icon-pill:hover,
:root[data-theme="dark"] .pv-badge-icon-pill.active { background: rgba(var(--pv-orange-rgb), .16); color: var(--pv-ink); }
:root[data-theme="dark"] [style*="background:#EFFAF2"] { background: #12291C !important; border-color: #1E4630 !important; }
:root[data-theme="dark"] [style*="background:#FDECEC"] { background: #2E1717 !important; border-color: #572424 !important; }
:root[data-theme="dark"] .pv-pros > div:first-child { color: #4ADE80 !important; }
:root[data-theme="dark"] .pv-cons > div:first-child { color: #F87171 !important; }


/* ============================================================
   B82 — CLIENT AUDIT FIXES (10-agent sweep, 2026-10-21)
   ============================================================ */
/* ==========================================================================
   AGENT 4 — Pagination vertical-stack fix (Pastel theme, light + dark)
   --------------------------------------------------------------------------
   WHY: Paginator::defaultView is vendor.pagination.custom, which renders
   <nav class="luxury-pagination"><div class="page-numbers">… — no <ul>.
   pastel-v15.css only styles the Tailwind markup (.pv-pagination ul,
   .active span) and its blanket rule
       .pv-pagination a, .pv-pagination span { display: grid; … }
   turns every page control into a block box → vertical stacking.
   The flex rules for .luxury-pagination live only in jarvis-v4.css,
   which the Pastel layout never loads.

   HOW TO APPLY: append this whole block to the END of
   public/css/pastel-v15.css (wins by specificity + source order),
   then rename the file (e.g. pastel-v16.css) and update the layout
   reference — this host's static cache ignores ?v= bumps.
   ========================================================================== */

/* 1) The nav and the numbers wrapper become horizontal flex rows.
      flex-wrap + max-width keep the 1,014-page control set (prev,
      1–10, …, 1013, 1014, next ≈ 550px) from overflowing on mobile:
      it wraps to two centred rows instead. */
.pv-pagination nav.luxury-pagination {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 6px;
    max-width: 100%;
}
.pv-pagination .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 2px;
}

/* 2) Page controls: override the blanket display:grid from
      pastel-v15.css line 428; keep Pastel's 38px pill look. */
.pv-pagination .page-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 38px;
    height: 38px;
    padding: 0 10px;
    border-radius: 999px;
    font: 700 13px var(--pv-font-d);
    text-decoration: none;
    color: var(--pv-ink-soft);
}

/* 3) Active page — real markup is <span class="page-link active">,
      NOT Tailwind's <li class="active"><span>, so the stock rule
      .pv-pagination .active span never matches. */
.pv-pagination .page-link.active {
    background: var(--pv-dark);
    color: #fff;
}
/* Dark mode: mirror the .pv-btn-dark flip (light pill, dark text). */
:root[data-theme="dark"] .pv-pagination .page-link.active {
    background: #F4F2EA;
    color: #121316;
}

/* 4) Disabled prev/next — same descendant-selector miss
      (.disabled span vs <span class="page-link disabled">). */
.pv-pagination .page-link.disabled {
    opacity: .35;
    cursor: not-allowed;
    pointer-events: none;
}

/* 5) Ellipsis is a <span>, so the blanket grid rule gave it a full
      38px row of its own. Shrink it back to an inline separator. */
.pv-pagination .page-ellipsis {
    display: inline-flex;
    align-items: center;
    min-width: 0;
    height: auto;
    padding: 0 4px;
    color: var(--pv-muted, #9D9B90);
}

/* 6) Chevron icons: pastel-v15.css has no .page-icon size rule
      (it exists only in jarvis-v4.css / pastel-admin). Pin them. */
.pv-pagination .page-icon {
    width: 14px;
    height: 14px;
    flex: none;
}

/* ==========================================================================
   Agent 3 — Pastel tool-card fixes (directory / homepage / category / search)
   Load AFTER public/css/pastel-v15.css, or append to the end of that file.
   Each block maps to a finding in agent-3-cards.md.
   ========================================================================== */

/* F1 — Description overflow / "overlap" (MAIN).
   .pv-card-desc (pastel-v15.css:298) is both the -webkit-line-clamp box AND a
   stretched flex item (flex: 1) of the column-flex .pv-card; with flex-grow
   assigning its height, the 2-line clamp does not hold — 120-char descriptions
   paint 3+ lines and are sliced mid-glyph by overflow:hidden, bleeding into
   the .pv-pillrow below. Take the desc out of flex sizing (the CTA row is
   already bottom-pinned by .pv-card-actions { margin-top:auto }), and
   reserve + hard-cap exactly 2 lines (3.1em = 2 x line-height 1.55). */
.pv-card-desc { flex: 0 0 auto; }
.pv-card .pv-card-desc:not([style]) { min-height: 3.1em; max-height: 3.1em; }
/* :not([style]) leaves the Guides card untouched — it deliberately overrides
   the clamp inline with style="-webkit-line-clamp:3" (guides.blade.php). */

/* F2 — Tag pills invisible in dark mode.
   The dark sweep sets .pv-pill background to var(--pv-card) — identical to
   the card background — and pills have no border, so the chips vanish and
   only bare uppercase text remains. Give dark pills a one-step-up surface
   plus a visible outline. */
:root[data-theme="dark"] .pv-pill {
    background: #1E1F23;
    border: 1px solid var(--pv-line);
}

/* F3 — FREEMIUM price badge has no rule.
   pastel-v15.css defines .pv-price-free / -open_source / -paid (lines
   1057-1059) but never .pv-price-freemium, which the card blade emits for
   freemium tools. The badge falls back to var(--pv-cream) = #1E1F23 in dark
   mode (border --pv-line-soft, also #1E1F23) and disappears into the card.
   Palette mirrors the theme's own .pv-pill-freemium (line 303) and stays
   bright in both themes, exactly like the free/paid/open_source variants. */
.pv-price-freemium { background: #FFF0D6; color: #8A5A00; border-color: #F3D9AE; }

/* F4 — "Sponsored" ribbon illegible in dark mode.
   .pv-ribbon keeps color:#26241F in both themes while -featured/-choice use
   var(--pv-peach)/var(--pv-sky), which resolve to dark gradients in dark
   mode — dark text on a dark gradient (~1.2:1). Flip the text colour only. */
:root[data-theme="dark"] .pv-ribbon { color: #F4F2EA; }

/* F5 — Upvote hover / voted states in dark mode.
   :hover border #111214 is invisible on the #151619 card, and .voted uses
   --pv-dark (#131315, never redefined for dark) so it sits flush with the
   card. Voted mirrors the theme's own dark .pv-btn-dark flip (light pill,
   dark text). */
:root[data-theme="dark"] .pv-upvote:hover { border-color: var(--pv-ink-soft); }
:root[data-theme="dark"] .pv-upvote.voted {
    background: var(--pv-ink);
    color: #121316;
    border-color: var(--pv-ink);
}

/* ============================================================
   Agent 2 — Pastel HOMEPAGE dark-mode fixes
   Append to public/css/pastel-v15.css (or merge into the dark
   block). Each rule is commented with its finding number from
   agent-2-home.md. No light-mode behaviour changes except F8
   (small-screen stacking) and F6 (restores the intended hero
   gradient in both modes).
   ============================================================ */

/* F1 — Directory filter tabs: the dark surfaces sweep (pastel-v15.css:1270,
   background: var(--pv-card), specificity 0-3-1) flattens the ACTIVE tab's
   background to #151619, while the token-completion rule (line 1375) sets
   its text to #121316 — black on black, label invisible. Restore the
   inverted pill: cream background (the existing line-1375 rule already
   supplies the near-black text). Specificity 0-4-1 beats the sweep. */
:root[data-theme="dark"] .pv-filter-tabs button.on {
    background: var(--pv-ink);
    border-color: var(--pv-ink);
}

/* F2 — Comparison spec table: header cells use a hardcoded light background
   (#FBFAF7, line 1070) with token text that flips near-white in dark, so
   SPECIFICATION / GITHUB COPILOT / CLAUDE CODE CLI vanish. Give the header
   row the same dark surface the sweep uses for .pv-table th, and keep the
   hot column's orange tint visible on dark. */
:root[data-theme="dark"] .pv-spec-table th { background: #1A1B1E; }
:root[data-theme="dark"] .pv-spec-table th.pv-spec-hot { background: rgba(255, 107, 53, .10); }

/* F3 — Podium rank labels (line 1015) are light-mode hexes that sit at
   ~3.3-3.4:1 on the dark card. Brightened dark values. */
:root[data-theme="dark"] .pv-rank-gold { color: #E3B341; }
:root[data-theme="dark"] .pv-rank-silver { color: #C3C9D4; }
:root[data-theme="dark"] .pv-rank-bronze { color: #D99A5B; }

/* F4 — "Sponsored" badge: #B44A12 text (line 1002) is ~3.2:1 on the dark
   tinted chip. #FF9E6B is the brightened orange already used for the
   demo-banner link in dark (line 1377). */
:root[data-theme="dark"] .pv-sponsored { color: #FF9E6B; }

/* F5 — Voted upvote: --pv-dark is #131315 in both modes, so a voted button
   is camouflaged against the #151619 dark card. Flip it to the same cream
   inversion .pv-btn-dark / .pv-chip.pv-chip-active already get in dark
   (lines 1231-1232). */
:root[data-theme="dark"] .pv-upvote.voted {
    background: var(--pv-ink);
    color: #121316;
    border-color: var(--pv-ink);
}

/* F6 — Hero headline gradient: the only .pv-grad / .gradient-text rules are
   scoped to .pv-hero (lines 180, 185), but the Pastel homepage hero is
   .pv-hero2, so the accent span never gets its gradient (flat ink text in
   both modes). Same gradient, correct scope. */
.pv-hero2 h1 .pv-grad,
.pv-hero2 h1 .gradient-text {
    background: linear-gradient(92deg, var(--pv-accent-2, #8B76E8), #FF8A5C 55%, #E9B949);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* F7 — Hero search input hardcodes color-scheme: light (line ~919) and is
   not covered by the dark input sweep. Align it with the other dark form
   controls. */
:root[data-theme="dark"] .pv-hero-searchbar > input {
    color-scheme: dark;
    -webkit-text-fill-color: var(--pv-ink);
    caret-color: var(--pv-ink);
}

/* F8 — Section heads never stack: at small widths the title and the tab
   row / paragraph squeeze side-by-side. Stack them below 760px. */
@media (max-width: 760px) {
    .pv-section-head { flex-direction: column; align-items: flex-start; }
}

/* ============================================================
   Agent 5 — Pastel COMPARE dark-mode fixes (append to pastel CSS)
   All rules are dark-mode only and follow the existing sweep
   patterns in pastel-v15.css. See agent-5-compare.md.
   ============================================================ */

/* §1 — Finding 1: selected-tool picker pills (compare.blade.php lines 59/144)
   Inline background:#FDF1E7 is missing from the dark attribute sweep,
   so the pill stays cream while its name text follows --pv-ink to
   near-white. Flip the pill to a dark orange-tinted surface; the
   inherited light ink / orange category / chip text then read fine. */
:root[data-theme="dark"] [style*="background:#FDF1E7"] {
    background: rgba(var(--pv-orange-rgb), .12) !important;
}

/* §2 — Finding 2: spec table headers (pastel-v15.css line 1070)
   .pv-spec-table th has a hard-coded #FBFAF7 background with no dark
   twin, while its color follows --pv-ink to near-white — tools 2/3
   and the SPECIFICATION header vanish. Give all headers a dark
   surface, and keep the featured ("hot") column's accent treatment
   explicit instead of translucent-over-card by accident. */
:root[data-theme="dark"] .pv-spec-table th {
    background: #1A1B1E;
    color: var(--pv-ink);
}
:root[data-theme="dark"] .pv-spec-table th.pv-spec-hot {
    background: rgba(var(--pv-orange-rgb), .12);
    color: var(--pv-orange);
}

/* §3 — Findings 3+4: half-flipped inline pills on compare-pair
   Pricing Tier pills (background:#F1EFE7; color:#26241F) get their
   background flipped by the existing sweep but keep near-black
   text; the pagehead benchmark pill keeps #26241F text on the
   dark-flipped --pv-mint gradient. Force the text colour light. */
:root[data-theme="dark"] .pv-compare-table [style*="color:#26241F"],
:root[data-theme="dark"] .pv-pagehead [style*="color:#26241F"] {
    color: var(--pv-ink) !important;
}

/* §4 — Finding 5 (cosmetic): VS badge + AI Auto-Matched badge
   Both stay light peach (#FDEBDD) in dark mode — the VS badge via a
   blade-local class rule, the AI badge via an inline style whose
   hex is not in the sweep. Darken both; lift the AI badge's rust
   text so it survives the darker surface. */
:root[data-theme="dark"] .pv-compare-vs-badge {
    background: rgba(var(--pv-orange-rgb), .14);
}
:root[data-theme="dark"] [style*="background:#FDEBDD"] {
    background: rgba(var(--pv-orange-rgb), .14) !important;
    color: #FFB08A !important;
}

/* ==========================================================================
   Agent 6 — Pastel ADVERTISE / PRICING page, dark-mode fixes
   Companion to v144-notes/client-audit/agent-6-pricing.md
   Every rule is scoped to :root[data-theme="dark"] — light mode cannot regress.
   Append to the next pastel CSS version (e.g. pastel-v16.css).
   ========================================================================== */

/* F1 — "Why" feature trio below the pricing table (Instant Automatic
   Activation / Promo Code Redemption / Live Click & CTR Analytics).
   Root cause: pastel-v15.css dark token sweep deepened the tone gradients
   (--pv-mint #1E4033→#14291F, --pv-sky #1E3852→#152639, --pv-peach
   #5C3421→#402416) but .pv-why text stayed hard-coded for the LIGHT tints
   (color:#26241F, p: rgba(38,36,31,.72)) → ≈1.0–1.4:1 contrast.
   Fix: light text on the (intentionally) darkened tints. ≈9–13:1. */
:root[data-theme="dark"] .pv-why { color: #F4F2EA; }
:root[data-theme="dark"] .pv-why p { color: rgba(244, 242, 234, .78); }

/* F1b — Icon tile inside the why-cards. The v12 blanket sweep flipped the
   tile to var(--pv-card) (#151619) while the Lucide glyph inherits the old
   #26241F → dark icon on dark tile. Restore a translucent light tile
   (mirrors the light-mode rgba(255,255,255,.65) design) with a light glyph.
   !important beats the equal-specificity sweep rule regardless of order. */
:root[data-theme="dark"] .pv-why .pv-why-ic {
    background: rgba(255, 255, 255, .14) !important;
    color: #F4F2EA;
}

/* F2 — Plan-card badge pills ("14-DAY FREE TRIAL", "MOST POPULAR").
   Root cause: blade renders them with INLINE style
   background:var(--pv-peach); color:#26241F — in dark mode the variable
   resolves to the dark-brown gradient while the inline near-black text
   stays → ≈1.1:1. No stylesheet rule can beat the inline background
   without !important, and the sweep's .pv-pill rule sets no color.
   Fix: restore the badge's light-peach identity in dark mode (badges are
   accent chips; cf. .pv-demo-banner / .pv-nav-ai staying bright in dark).
   ≈9–11:1. Scoped to .pv-panel = plan cards only. */
:root[data-theme="dark"] .pv-pill[style*="--pv-peach"] {
    background: linear-gradient(135deg, #FFD9C7, #FFB08A) !important;
    color: #26241F !important;
}

/* F3 (minor) — Plan-card eyebrow labels ("FEATURED PLACEMENT",
   "PACKAGE DELIVERABLES"). .pv-eyebrow uses --pv-muted (#9D9B90 on
   #151619 ≈ 6.5:1 — passes AA, but it is the dimmest text on the card and
   the client flagged it with the pills). Bump plan-card eyebrows one step
   to --pv-ink-soft (≈10:1); eyebrows elsewhere are untouched. */
:root[data-theme="dark"] .pv-panel .pv-eyebrow { color: var(--pv-ink-soft); }

/* ============================================================
   Agent 1 — Pastel header/nav fixes (append to pastel CSS AFTER
   the existing dark-mode block so these win on equal specificity).
   Findings numbered as in agent-1-header.md.
   ============================================================ */

/* F1 — THE client bug: the sliding nav pill (.pv-nav-pill) is hardcoded
   cream #EAE8DC (pastel-v15.css line ~86) with no dark override, while
   dark nav text is #F4F2EA → 1.10:1 contrast, label invisible on hover
   and permanently on the active item (Advertise page).
   #26272C = the theme's own dark --pv-line token → 13.30:1. */
:root[data-theme="dark"] .pv-nav-pill { background: #26272C; }

/* F2 — Keyboard focus was invisible on header nav controls
   (dropdown buttons are border:0 / transparent). One shared
   focus-visible ring in the theme accent, both modes. */
.pv-nav a:focus-visible,
.pv-nav-dd-btn:focus-visible,
.pv-lang-btn:focus-visible,
.pv-spotlight-btn:focus-visible,
.pv-icon-btn:focus-visible {
    outline: 2px solid var(--pv-orange);
    outline-offset: 2px;
}

/* F3 — OPTIONAL polish: nav hit targets ~33px → ~37px tall.
   The sliding-pill JS measures offsetWidth/offsetLeft live, so the
   pill stays aligned. Ship only if the slightly taller header is OK. */
.pv-nav a, .pv-nav-dd-btn { padding-top: 10px; padding-bottom: 10px; }

/* ============================================================
   Agent 8 — Pastel static/CMS page fixes (append AFTER pastel-v15.css)
   ============================================================ */

/* F1 — Static article pages (Terms, Privacy, blog/news single) have ZERO
   top spacing: their .pv-wrap is the first block in <main> and contains no
   .pv-pagehead (the shared block that gives every other page 42px of top
   padding). Restore the standard 42px for exactly those wraps; wraps that
   already carry a pagehead, a hero, or an auth block (own padding) are
   excluded so nothing doubles up. */
main > .pv-wrap:first-child:not(:has(.pv-pagehead)):not(:has(.pv-hero)):not(:has(.pv-auth-wrap)) {
    padding-top: 42px;
}

/* F2 — Prose links invisible in dark mode: .pv-article .pv-prose a is a
   hard-coded light-mode indigo (#39419F, ~1.9:1 on the dark card) with no
   dark override. Light indigo measures ~8:1 on --pv-card. */
:root[data-theme="dark"] .pv-article .pv-prose a {
    color: #A5B4FC;
}

/* ============================================================
   Agent 7 — Blog fixes (Pastel blog dark mode + Admin Quill editor)
   Only confident overrides. Load AFTER pastel-v15.css / jarvis-v4.css
   (or append to them). Findings: agent-7-blog.md
   ============================================================ */

/* ------------------------------------------------------------
   §A1 — Pastel blog post, DARK: article links near-invisible.
   pastel-v15.css:540 sets .pv-prose a { color:#39419F } (dark navy,
   ~2.1:1 on the dark card #151619) with no dark override.
   #A5B4FC on #151619 ≈ 9.3:1, same indigo family.
   ------------------------------------------------------------ */
:root[data-theme="dark"] .pv-article .pv-prose a {
    color: #A5B4FC;
}

/* ------------------------------------------------------------
   §A2 — Pastel blog post, DARK: inline-code chip stays bright.
   The blade-level <style> in pastel/pages/blog-single.blade.php sets
   .pv-prose code { background:#e2e8f0 } with no theme variant.
   Selector below out-specifies it (it carries no !important).
   ------------------------------------------------------------ */
:root[data-theme="dark"] .pv-article .pv-prose code {
    background: #26272C;
    color: #FFB08A;
}

/* ------------------------------------------------------------
   §A3 — Pastel blog post, BOTH themes: Markdown blockquotes and
   fenced code blocks (pre) have no .pv-prose rules at all —
   browser defaults, no surface, long code lines overflow the card.
   Token-based so it follows the active theme.
   ------------------------------------------------------------ */
.pv-article .pv-prose blockquote {
    margin: 22px 0;
    padding: 4px 0 4px 18px;
    border-left: 3px solid var(--pv-orange);
    color: var(--pv-ink-soft);
    font-style: italic;
}
.pv-article .pv-prose pre {
    margin: 22px 0;
    padding: 16px 18px;
    background: var(--pv-line-soft);
    border: 1px solid var(--pv-line);
    border-radius: 12px;
    overflow-x: auto;
    font-size: 13px;
    line-height: 1.65;
}
.pv-article .pv-prose pre code {
    background: transparent;
    padding: 0;
    border-radius: 0;
    color: inherit;
    font-size: inherit;
}


/* ============================================================
   Agent 9 — Pastel MEMBER DASHBOARD dark-mode fixes
   Append to public/css/pastel-v15.css (after the existing
   dark-mode blocks). Every rule is scoped to
   :root[data-theme="dark"] unless noted. Finding numbers
   refer to agent-9-dashboard.md.
   ============================================================ */

/* F1 — Sidebar active nav pill invisible in dark mode.
   .pv-dash-nav a.active paints var(--pv-dark) (#131315) on the
   flipped card surface (#151619) ≈ 1.03:1. Flip it the same
   way this file already flips .pv-btn-dark / .pv-chip-active:
   cream surface, dark text. */
:root[data-theme="dark"] .pv-dash-nav a.active {
    background: var(--pv-ink);
    color: #121316;
}
:root[data-theme="dark"] .pv-dash-nav a.active svg {
    color: #121316;
}

/* F2 — Same un-flipped --pv-dark surface: pagination active
   page (.pv-pagination .active span) and Campaigns' active tab
   (.pv-tab.on) vanish on the flipped #151619 nav/tab bar;
   the toast's pill edge vanishes against the #0C0C0E canvas. */
:root[data-theme="dark"] .pv-pagination .active span {
    background: var(--pv-ink);
    color: #121316;
}
:root[data-theme="dark"] .pv-tab.on {
    background: var(--pv-ink);
    color: #121316;
}
:root[data-theme="dark"] .pv-toast {
    background: #26272C;
    border: 1px solid var(--pv-line);
    color: var(--pv-ink);
}

/* F3 — Stat-card icons (.pv-stat-ic) and sidebar/drawer avatar
   initials (.pv-dash-ava) keep the hard-coded near-black
   #26241F foreground while their gradient tokens
   (--pv-lilac/--pv-peach/--pv-mint/--pv-sky/--pv-sun) are
   darkened by the token sweep → ≈1.3:1. Flip the ink. */
:root[data-theme="dark"] .pv-stat-ic,
:root[data-theme="dark"] .pv-dash-ava {
    color: #F4F2EA;
}

/* F4 — Topbar "Admin Panel" button (member topbar, admins
   only): inline style paints the Appearance accent
   (var(--pv-orange), demo = #1de2c4 mint) with #ffffff text
   ≈ 1.6:1. Dark ink text is ≈10:1 on mint and ≈5.9:1 on the
   default orange. Unscoped by mode on purpose: the failure
   follows the accent, not the mode. Targets only that one
   accent-filled anchor in the dashboard actions row. */
.pv-dash-actions a[style*="--pv-orange"] {
    color: #121316 !important;
}

/* F5 — .pv-admin-note (Reviews, API Keys): hard-coded peach
   #FFF7F2 surface survives into dark mode while its text
   var(--pv-ink-soft) flips light → #C9C7BC on #FFF7F2
   ≈ 1.7:1. Give it a dark orange-tinted surface in keeping
   with the file's dark demo-banner treatment. */
:root[data-theme="dark"] .pv-admin-note {
    background: #2A1B12;
    border-color: #4A2E1C;
    border-left-color: var(--pv-orange);
    color: var(--pv-ink-soft);
}
:root[data-theme="dark"] .pv-admin-note b {
    color: #FF9E6B;
}

/* F6 — Form validation text .pv-field .pv-error stays
   #B3261E in dark mode (≈2.3:1 on the dark card). Use the
   same red this file already uses for dark alert-error. */
:root[data-theme="dark"] .pv-field .pv-error {
    color: #F5A3A7;
}

/* F7 — Focus cue invisible in dark mode: base focus rule
   uses border #111214 + a dark-tinted shadow; the dark
   sweep only restores the background. Give dark inputs a
   light border + halo. */
:root[data-theme="dark"] .pv-input:focus,
:root[data-theme="dark"] .pv-field input:focus,
:root[data-theme="dark"] .pv-field select:focus,
:root[data-theme="dark"] .pv-field textarea:focus {
    border-color: #9D9B90;
    box-shadow: 0 0 0 3px rgba(244, 242, 234, .14);
}

/* F8 — Bell dropdown icon chips (shared notifications
   partial, as rendered inside .pv-dash-topbar): chip tint
   is hard-coded orange rgba(255,107,53,…) while the glyph
   color is var(--orange) = the pastel accent → two hues in
   one chip. Re-derive the tint from the accent tokens the
   topbar already defines. Scoped to the pastel member
   topbar only. */
.pv-dash-topbar [style*="rgba(255,107,53,0.1)"] {
    background: rgba(var(--pv-orange-rgb), .12) !important;
}
.pv-dash-topbar [style*="rgba(255,107,53,0.25)"] {
    border-color: rgba(var(--pv-orange-rgb), .3) !important;
}

/* ============================================================
   ADMIN SHELL — NOT for pastel-v15.css.
   F9 / topbar verdict: the "Active In Index" pill lives in
   pastel/layouts/admin.blade.php (.admin-topbar-telemetry)
   and that shell loads pastel-admin-v3.css. If a CSS-only
   fix is preferred over the one-line blade fix proposed in
   the report, append THIS block to pastel-admin-v3.css:
   it re-derives the pill's tint/border from the same
   --orange token that colors its text, so tint, border and
   text can never disagree when the primary color changes.
   ============================================================ */
/*
.pastel-admin .admin-topbar-telemetry {
    background: rgba(var(--orange-rgb), 0.1) !important;
    border-color: rgba(var(--orange-rgb), 0.35) !important;
}
*/

/* ------------------------------------------------------------
   [pastel] PASTEL-1 — Finding B1: Pastel login demo box —
   the "Demo Member" button has inline color:#111214 +
   background:#ffffff; the dark sweep flips its background to
   var(--pv-card) but not the inline text/border color, so the
   label is near-black on near-black. (Same attribute-signature
   pattern the pastel dark sweep itself uses.)
   ------------------------------------------------------------ */
:root[data-theme="dark"] .pv-auth-wrap [style*="color:#111214"] {
    color: var(--pv-ink) !important;
    border-color: var(--pv-ink) !important;
}

/* [pastel] PASTEL-1b — Finding B2: "Remember me" checkbox has
   inline accent-color:#111214 — checked state invisible on
   the dark form card. */
:root[data-theme="dark"] .pv-auth-wrap input[type="checkbox"] {
    accent-color: #F4F2EA !important;
}


/* ------------------------------------------------------------
   [pastel] PASTEL-2 — Finding C2: field validation text
   .pv-field .pv-error is #B3261E (~3.2:1 on the dark card).
   Brighten in dark to the same family as the dark
   .pv-alert-error text (#F5A3A7).
   ------------------------------------------------------------ */
:root[data-theme="dark"] .pv-field .pv-error { color: #F5A3A7; }


/* ------------------------------------------------------------
   [pastel] PASTEL-3 — Finding A3/B3 (pastel side): autofill
   in dark pastel forms — match the dark input surface
   (#101113, same as the dark .pv-field input rule).
   ------------------------------------------------------------ */
:root[data-theme="dark"] .pv-body input:-webkit-autofill,
:root[data-theme="dark"] .pv-body input:-webkit-autofill:hover,
:root[data-theme="dark"] .pv-body input:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--pv-ink);
    caret-color: var(--pv-ink);
    box-shadow: 0 0 0 100px #101113 inset;
    transition: background-color 99999s ease-in-out 0s;
}


/* ------------------------------------------------------------
   [pastel] PASTEL-4 — Finding C3: flash bars keep their
   light tints in dark mode (the sibling .pv-alert-* got dark
   tints, .pv-flash-* didn't). Dark-tint them to match.
   ------------------------------------------------------------ */
:root[data-theme="dark"] .pv-flash-ok {
    background: #2A1A10; border-color: rgba(var(--pv-orange-rgb), .4); color: #FF9E6B;
}
:root[data-theme="dark"] .pv-flash-err {
    background: #3D1719; border-color: rgba(239, 68, 68, .4); color: #F5A3A7;
}


/* ------------------------------------------------------------
   [pastel] PASTEL-5 — Finding C4: ::selection is styled only
   for light (bg #111214); on the dark canvas the highlight
   is effectively invisible. Invert it in dark.
   ------------------------------------------------------------ */
:root[data-theme="dark"] .pv-body ::selection { background: #F4F2EA; color: #121316; }


/* ------------------------------------------------------------
   [pastel] PASTEL-6 — Finding C6: a few inputs hardcode
   color-scheme: light (hero search, error-page search, sales
   popup form), so their UA-rendered parts render light
   inside dark mode. Flip just the scheme in dark; the
   text/surface colors are already var-driven.
   ------------------------------------------------------------ */
:root[data-theme="dark"] .pv-error-search input,
:root[data-theme="dark"] .pv-hero-searchbar > input,
:root[data-theme="dark"] .pv-sales-form input,
:root[data-theme="dark"] .pv-sales-form select,
:root[data-theme="dark"] .pv-sales-form textarea { color-scheme: dark; }

/* B82b — Compare picker: class-based dark flips. The [style*=hex] attribute
   rules stop matching once Alpine touches an element (the browser
   re-serializes its inline style with rgb() values), so the selected-tool
   boxes and the search dropdown carry classes instead. */
.pv-compare-dd-row:hover { background: #F6F5F0; }
:root[data-theme="dark"] .pv-compare-picked { background: rgba(var(--pv-orange-rgb), .12) !important; }
:root[data-theme="dark"] .pv-compare-dd { background: var(--pv-card) !important; }
:root[data-theme="dark"] .pv-compare-dd-row:hover { background: var(--pv-line-soft); }
:root[data-theme="dark"] .pv-compare-dd-badge { background: #26272C !important; color: var(--pv-ink-soft) !important; }

/* ================= ROUND-2 SWEEP (B84) ================= */
/* ============================================================
   Agent 1 (round 2) — Pastel PUBLIC pages, LIGHT-mode fixes
   Companion to agent-1-pastel-light.md.
   Every rule is scoped to :root:not([data-theme="dark"]) so the
   verified dark mode cannot regress. Append AFTER pastel-v17.css.
   ============================================================ */

/* L1 — Systemic: the raw accent --pv-orange (#FF6B35) is used as
   9–13px text on light surfaces at ≈2.4–2.9:1 (white / canvas /
   its own tints). The theme's own proven light-mode companion is
   #B44A12 (≈5.3:1 on white, 4.9:1 on canvas) — already used by
   .pv-sponsored, .pv-demo-banner a and .pv-flash-ok. Apply it to
   every small orange-text instance. Icons and the dark-footer
   badge (readable as-is) are deliberately NOT included. */
:root:not([data-theme="dark"]) :is(
    .pv-nav-badge,
    .pv-popup-badge,
    .pv-cookie-tag,
    .pv-sec-tag,
    .pv-podium-head span,
    .pv-votes-label,
    .pv-stack-ms,
    .pv-dir-id span,
    .pv-spec-yes,
    .pv-review-regarding,
    .pv-qv-id span,
    .pv-bench-meta .pv-accent,
    .pv-demo-dot,
    .pv-compare-vs-badge
),
:root:not([data-theme="dark"]) .pv-cookie p a,
:root:not([data-theme="dark"]) th.pv-spec-hot {
    color: #B44A12;
}

/* L2 — Blog article inline-code chip (blog-single.blade.php:247):
   cool slate #e2e8f0 clashes with the cream palette and its
   --pv-orange text is ≈2.3:1 (≈1.3:1 with a light admin accent).
   Warm surface + fixed rust text ≈5.6:1. Specificity (0-4-1)
   beats the blade-level rule (0-2-1); dark keeps agent 7's §A2. */
:root:not([data-theme="dark"]) .pv-article .pv-prose code {
    background: var(--pv-line-soft);
    color: #9A3E0E;
}

/* L3 — Round-1 agent-8 F1 rule (pastel-v17.css:1761) excludes the
   v1 .pv-hero but the homepage hero is .pv-hero2, which already
   has 56px top padding — buyer installs get 56+42=98px (the demo
   masks it: its banner makes .pv-wrap not :first-child).
   Preferred source fix: add :not(:has(.pv-hero2)) to that rule;
   this override is the append-safe equivalent. */
main > .pv-wrap:first-child:has(.pv-hero2) {
    padding-top: 0 !important;
}

/* L4 — Bookmark heart rests at #B9B7AB ≈2.0:1 on white cards —
   below the 3:1 UI-component floor; findable only on hover.
   Step the resting color up (dark already rests at #8E8C80). */
:root:not([data-theme="dark"]) .pv-heart { color: #8A887B; }

/* L5 — Rating gold #B97F16 is painted via inline styles on the
   tool-detail page (≈3.4:1 — passes only at its 19px/24px display
   sizes, fails the 12–13.5px meta/stat instances). These spans are
   static server-rendered markup (no JS rewrites their style), so
   the attribute match is stable. #8A5F0B ≈5.7:1. Cleaner long
   term: change the hex in the blade itself. */
:root:not([data-theme="dark"]) [style*="color:#B97F16"] {
    color: #8A5F0B !important;
}

/* L6 — Placeholder + ad-label microtext outliers (#A3A398 ≈2.5:1,
   #B0AEA2 ≈2.2:1) in a theme whose muted text is ≈5:1. */
:root:not([data-theme="dark"]) .pv-searchbox input::placeholder { color: #8A887B; }
:root:not([data-theme="dark"]) .pv-ad-label { color: #8A887B; }

/* L7 — Form-rule completeness: secondary public inputs set color +
   caret but no -webkit-text-fill-color (the standing rule for
   light pages). Add the missing declaration only. */
:root:not([data-theme="dark"]) :is(
    .pv-filterbar input,
    .pv-filterbar select,
    .pv-select,
    .pv-searchbox input,
    .pv-hero-searchbar > input,
    .pv-error-search input
) {
    -webkit-text-fill-color: var(--pv-ink);
}
:root:not([data-theme="dark"]) .pv-footer-news-form input,
:root:not([data-theme="dark"]) .pv-news-form input {
    -webkit-text-fill-color: #fff;
}

/* ============================================================
   Agent 2 (Round 2) — Pastel PUBLIC dark-mode RESIDUAL fixes
   Companion to agent-2-pastel-dark-residual.md.
   All rules are :root[data-theme="dark"]-scoped unless noted —
   light mode cannot regress. Append AFTER the round-1 blocks.

   BLADE PREREQUISITES (one-line class additions, see report):
   - F1: checkout.blade.php:88  add class "pv-note-success"
         checkout.blade.php:94  add class "pv-note-info"
   - F2: checkout.blade.php:119 add class "pv-note-bank"
   - F4: compare.blade.php:101  add class "pv-ai-matched"
   - F5b: tool-detail.blade.php:381/:384 toggle buttons and
          :397 plan ribbon — add class "pv-accent-chip"
   (F1/F2/F4 elements carry x-show, so NO attribute-selector
   fix can ever reach them — the B82b lesson. Classes only.)
   ============================================================ */

/* F1 — Checkout zero-payment / card-verification banners
   (checkout.blade.php:88 / :94). Hexes #EFF7EF / #EEF3FE were
   never in the sweep, and x-show re-serializes the style
   attribute, so only a class hook works. Dark tinted surfaces
   in the same family as the swept #EFFAF2 / link-blue rules;
   text then inherits --pv-ink and reads ≈10:1. */
:root[data-theme="dark"] .pv-note-success {
    background: #12291C !important;
    border-color: #1E4630 !important;
}
:root[data-theme="dark"] .pv-note-info {
    background: #16233D !important;
    border-color: #2A3F66 !important;
}

/* F2 — Checkout bank-transfer details panel
   (checkout.blade.php:119). #FFF7F2 IS in the sweep, but the
   panel's own x-show kills the attribute match at Alpine
   init. Class hook + the same dark surface the sweep would
   have given it; dashed peach border becomes a dashed dark
   orange tint so the "bank details" affordance remains. */
:root[data-theme="dark"] .pv-note-bank {
    background: #17181B !important;
    border-color: #4A2E1C !important;
}

/* F3 — Mint pills inside panels (checkout.blade.php:58, :85,
   :166). The round-1 widening covered --pv-peach only; the
   --pv-mint siblings kept #26241F text on the darkened mint
   gradient (≈1.0–1.3:1) outside .pv-pagehead/.pv-compare-table
   contexts. Mirror the peach fix: restore the light mint
   identity in dark, keep the dark text (≈9–11:1). Equal
   specificity (0,3,0) with agent-5 §3 and appended later, so
   the two §3-rescued mint pills (checkout pagehead,
   compare-pair benchmark) harmonize to the same treatment. */
:root[data-theme="dark"] .pv-pill[style*="--pv-mint"] {
    background: linear-gradient(135deg, #CDEEDB, #9FDDBB) !important;
    color: #26241F !important;
}

/* F4 — Compare "AI Auto-Matched" badge (compare.blade.php:101).
   Agent-5 §4's [style*="background:#FDEBDD"] rule is dead for
   this span because the badge itself carries x-show. Class
   hook; values match §4's intent exactly. */
:root[data-theme="dark"] .pv-ai-matched {
    background: rgba(var(--pv-orange-rgb), .14) !important;
    color: #FFB08A !important;
}

/* F5a — Accent-filled white-text buttons, reachable half:
   badge-studio theme/style buttons (tool-detail.blade.php
   :759, :916, :923). Their authored style attribute carries
   background:var(--pv-orange), and the studio JS re-assigns
   the same var() (preserved verbatim in serialization), so
   the attribute match survives. Dark ink on the accent is
   ≈5.9:1 (default orange) / ≈10:1 (demo mint) vs white's
   2.9:1 / 1.6:1 — the agent-9 F4 treatment. NOT dark-scoped,
   mirroring F4: the failure follows the accent, not the mode. */
.pv-badge-theme-btn[style*="--pv-orange"] {
    color: #121316 !important;
}

/* F5b — Accent-filled white-text spots with no usable hook:
   pricing Monthly/Annual toggle (:381/:384, state arrives via
   Alpine :style, invisible to attribute selectors) and the
   plan ribbon (:397). Requires the pv-accent-chip class in
   the blade. Also not dark-scoped (see F5a). */
.pv-accent-chip {
    color: #121316 !important;
}

/* F6 — Pros/cons headings + standalone green/red inline text
   (tool-detail.blade.php:182, :190, :373, :419). Containers
   flip via the sweep; the hard-coded text colors don't
   (≈2.3–3.4:1). The :not([style*="background"]) guard is
   load-bearing: the light identity chips (#E4F5E9 bg +
   #1C7C43 text) carry background in the same attribute and
   must keep their dark-green text. All targets here are
   static elements, so attribute selectors are reliable. */
:root[data-theme="dark"] [style*="color:#1C7C43"]:not([style*="background"]) {
    color: #3ECF8E !important;
}
:root[data-theme="dark"] [style*="color:#B3261E"]:not([style*="background"]) {
    color: #F5A3A7 !important;
}

/* F7 — Bell F8 residual: unread-row wash in the shared
   notifications partial keeps the hard-coded orange tint
   (background:rgba(255,107,53,0.05)) while the row chips now
   follow the accent. Re-derive from the accent like F8 did.
   Rows are server-rendered (@forelse) — attribute selector
   is safe. Scoped to the pastel member topbar, same as F8. */
.pv-dash-topbar [style*="rgba(255,107,53,0.05)"] {
    background: rgba(var(--pv-orange-rgb), .06) !important;
}

/* F8 — The missing sweep entry: #EFF7EF (success-page icon
   circles at submit-success:7, newsletter-confirmed:7,
   advertise-success:9 — all static, so the attribute rule
   works there). Mirrors the existing #EFFAF2 sweep rule.
   NOTE: this does not and cannot rescue the checkout
   banners in F1 (x-show / JS-owned attributes) — they use
   the F1 classes above. */
:root[data-theme="dark"] [style*="background:#EFF7EF"] {
    background: #12291C !important;
    border-color: #1E4630 !important;
}

/* F9 — Save button active state (tool-detail blade-local
   style): var(--pv-dark) is never flipped, so the active
   pill is #131315 on the #151619 card. Cream flip, mirroring
   the agent-9 F1/F2 pattern for the same token. */
:root[data-theme="dark"] .pv-save-btn.active {
    background: #F4F2EA;
    color: #121316;
    border-color: #F4F2EA;
}

/* F10 — "Official Response" label (tool-detail.blade.php:619):
   the box flips via §4 but the <strong>'s own inline
   #B3541E stays (≈3.3:1 on the dark tint). Brighten to the
   same family. Other [style*="color:#B3541E"] elements
   (Verified/EXCLUSIVE pills, coupon button) sit on #FDEBDD
   backgrounds that §4 flips in the same pass and resolve to
   the near-identical #FF9E6B — no light-surface instance
   exists in dark mode. */
:root[data-theme="dark"] [style*="color:#B3541E"] {
    color: #FF9E6B !important;
}

/* ==========================================================================
   Agent 4 (Round 2) — Pastel MEMBER DASHBOARD residual fixes
   Companion to agent-4-pastel-dashboard.md. Append to the END of the pastel
   stylesheet (after all B82/B82b blocks) so these win on source order.
   Findings R2, R5, R7, R8 are blade/router fixes — see the report.
   ========================================================================== */

/* R1 — HIGH: SPA-navigated dashboard pages render invisible.
   .pv-reveal starts at opacity:0 and is only revealed by the
   IntersectionObserver in pastel-v7.js, which scans ONCE at page load.
   spa-router.js swaps #dash-content innerHTML but never re-observes, so
   every panel/card/table injected by an AJAX navigation stays at
   opacity 0 forever. The router already stamps data-spa-swaps="1,2,…"
   on <html> after each successful swap (spa-router.js:191-192), so once
   any swap has happened, dashboard reveals render immediately — the
   router's own wrapper animateIn() still supplies the motion. The first
   full page load has no attribute and keeps the staggered reveal.
   (Long-term: re-observe in JS — see report.) */
:root[data-spa-swaps] .pv-dash-content .pv-reveal {
    opacity: 1;
    animation: none;
}

/* R3 — HIGH (dark): Affiliate payout panel keeps its light gradient.
   affiliate.blade.php:60 inlines
   background:linear-gradient(120deg, #FFF7F2, #FFFFFF 55%) — no sweep
   rule matches (they key on "background:#FFF7F2" / "background:#FFF",
   and "linear-gradient(…)" intervenes), while the panel's heading and
   paragraph flip to near-white tokens → light text on a light slab.
   Give it a warm dark tint from the file's own dark demo-banner family.
   Static element (no JS rewrites its style) — attribute selector safe. */
:root[data-theme="dark"] .pv-panel[style*="linear-gradient(120deg, #FFF7F2"] {
    background: #201812 !important;
}

/* R4 — MEDIUM (dark): Affiliate "Accrued Earnings" number is inlined
   color:#14663F (affiliate.blade.php:34) — dark green ≈2.3:1 on the
   flipped #151619 stat card. Brighten to the dark palette's green.
   Static element — attribute selector safe. */
:root[data-theme="dark"] .pv-stat-num[style*="color:#14663F"] {
    color: #3ECF8E !important;
}

/* R6 — LOW (dark): sidebar/drawer logo mark is the last un-flipped
   --pv-dark surface in the shell: #131315 tile on the #151619 card
   (≈1.03:1) — only the white glyph shows. Flip to the cream inversion
   the theme uses for .pv-btn-dark / active nav. Scoped to the dashboard
   shell so the public header's mark is untouched. */
:root[data-theme="dark"] .pv-dash-side-card .pv-logo-mark,
:root[data-theme="dark"] .pv-dash-sheet .pv-logo-mark {
    background: var(--pv-ink);
    color: #121316;
}

/* R9 — LOW (mobile): topbar crowding. The page-title span cannot
   truncate, so long titles wrap the pill topbar tall; and the Admin
   Panel button (admins) keeps its text label at phone widths while
   only Exit collapses. Ellipsize the title; make Admin Panel
   icon-only at ≤640px, mirroring the existing Exit treatment.
   (Reuses round-1 F4's attribute selector for that one anchor.) */
.pv-dash-title span {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
@media (max-width: 640px) {
    .pv-dash-actions a[style*="--pv-orange"] span {
        display: none;
    }
}

/* R10 — LOW (dark): Saved "Remove" label #D9363C (saved.blade.php:47)
   is ≈4.0:1 on the dark card — under AA for 12px text. Brighten in
   dark only. The button's click handler never rewrites its style
   attribute, so the selector stays matched. */
:root[data-theme="dark"] .pv-card-actions button[style*="color:#D9363C"] {
    color: #F2707A !important;
}

/* ------------------------------------------------------------
   TARGET: public/css/pastel-v17.css  (append at end)

   F12 — Pastel login "Remember me" checkbox: the blade sets
   accent-color:#111214 inline. In dark mode the checked fill
   is near-black on the dark card and reads as unchecked.
   Flip the accent to the theme accent in dark mode.
   ------------------------------------------------------------ */
:root[data-theme="dark"] .pv-auth-wrap input[type="checkbox"] {
    accent-color: var(--pv-orange);
}

/* ------------------------------------------------------------
   [pastel] P-1 — F2: complete the reduced-motion net.
   The existing block (pastel-v17.css:550) covers .pv-reveal /
   .pv-orb only; the pv-pop entrances and the cookie slide kept
   animating. Targeted selectors, same pattern as the original.
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
    .pv-search-drop.open,
    .pv-mobile-menu.open,
    .pv-modal,
    .pv-palette-card,
    .pv-cookie { animation: none; }
    .pv-btn, .pv-chip, .pv-tab, .pv-icon-btn, .pv-upvote,
    .pv-dash-nav a, .pv-nav-pill { transition: none; }
}

/* ------------------------------------------------------------
   [pastel] P-2 — F5: coarse-pointer targets to the 44px law.
   Scoped to (pointer: coarse) so desktop stays pixel-identical.
   ------------------------------------------------------------ */
/* Dashboard avatar-dice button: 26px on fine pointers, 44px on coarse. */
.dash-avatar-dice { width: 26px; height: 26px; }
@media (pointer: coarse) {
    .pv-icon-btn { width: 44px; height: 44px; }
    .pv-mm-close { width: 44px; height: 44px; }
    .pv-upvote { min-height: 44px; }
    .pv-btn-sm { min-height: 44px; }
    .dash-avatar-dice { width: 44px; height: 44px; }
    .pv-chip { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
    .pv-tab { min-height: 44px; }
    .pv-lang-btn { min-height: 44px; }
    .pv-dash-nav a { min-height: 44px; }
    .pv-dash-user .pv-dash-home { width: 44px; height: 44px; }
    .pv-anchor button { padding: 10px 12px; }
}

/* ------------------------------------------------------------
   [pastel] P-3 — F3 (pastel half): pagination links 38px -> 44px
   on touch devices.
   ------------------------------------------------------------ */
@media (pointer: coarse) {
    .pv-pagination .page-link { min-width: 44px; height: 44px; }
}

/* ------------------------------------------------------------
   [pastel] P-4 — F8: on phones, lift the cookie bar above the
   fixed anchor-ad bar (bottom:0, z-300) so its buttons are
   never painted over.
   ------------------------------------------------------------ */
@media (max-width: 560px) {
    .pv-cookie { bottom: 64px; }
}

/* ------------------------------------------------------------
   [pastel] P-5 — F10 (pastel half): designed focus-visible ring
   beyond the five header selectors covered at pastel-v17:1737.
   ------------------------------------------------------------ */
.pv-btn:focus-visible,
.pv-chip:focus-visible,
.pv-tab:focus-visible,
.pv-pagination .page-link:focus-visible,
.pv-dash-nav a:focus-visible,
.pv-logo:focus-visible,
.pv-footer a:focus-visible,
.pv-card h3 a:focus-visible {
    outline: 2px solid var(--pv-orange);
    outline-offset: 2px;
}

/* ------------------------------------------------------------
   [pastel] P-6 — F11 (CSS half): toast severity variant.
   Pairs with pvToast(msg, 'error') in pastel-v7.js.
   ------------------------------------------------------------ */
.pv-toast.pv-toast-error { background: #8C2B1B; color: #FFF3EC; }
:root[data-theme="dark"] .pv-toast.pv-toast-error {
    background: #5C2318;
    border-color: #A34A33;
    color: #FFD9C7;
}

/* ------------------------------------------------------------
   [pastel] P-7 — F9 (CSS half): skip link. Pairs with one
   <a class="pv-skip" href="#pv-main"> per pastel layout and
   id="pv-main" on <main>.
   ------------------------------------------------------------ */
.pv-skip {
    position: fixed; top: -60px; left: 16px; z-index: 1000;
    background: var(--pv-dark); color: #fff; padding: 12px 18px;
    border-radius: 999px; font: 700 13px var(--pv-font-d);
    text-decoration: none; transition: top .2s var(--pv-ease);
}
.pv-skip:focus-visible { top: 12px; outline: 2px solid var(--pv-orange); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .pv-skip { transition: none; } }

/* ------------------------------------------------------------
   [pastel] P-8 — F12 (CSS half, shared with J-5): submitting
   state for the submit-guard snippet spec'd in the report.
   ------------------------------------------------------------ */
form.is-submitting [type="submit"] { opacity: .65; pointer-events: none; }




/* ============ Section 27 (B90): page-head centering + trending chip contrast ============
   .pv-pagehead p had max-width 640px with margin:0, so the intro
   paragraph of every centered page head (search, directory, blog...)
   hugged the LEFT edge while its heading stayed centered. Center the
   block itself. The Trending chips on the search page also rendered
   in a washed-out grey in light mode; give the tags row a stronger
   ink and an explicit chip color (dark mode keeps its own rules). */
/* B93 (buyer round 3): B90 centered .pv-pagehead p globally, which also
   centered the intro of every LEFT-aligned head (listing pages), so the
   paragraph drifted right of its heading (measured 50px @768, 276px @1280).
   Default back to left-aligned; centering survives ONLY on heads that are
   actually centered (inline-style hook, both spacing spellings). */
.pv-pagehead p { margin: 0; }
.pv-pagehead[style*="text-align:center"] p, .pv-pagehead[style*="text-align: center"] p { margin: 0 auto; }
.pv-tags > span { color: var(--pv-ink-soft); font-weight: 600; }
:root[data-theme="light"] .pv-tags .pv-chip { color: #26261F; border-color: #CFC9B4; background: #FFF; }

/* ---------- B91: card actions wrap + title hover (buyer feedback) ---------- */
.pv-card-actions { flex-wrap: wrap; }
.pv-card h3 a, .pv-card h4 a { transition: color .2s ease; }
.pv-card h3 a:hover, .pv-card h4 a:hover { color: var(--pv-orange) !important; text-decoration: underline !important; text-underline-offset: 3px; }

/* ---------- B95: category icon chips in dark mode ----------
   Dark mode redefines the tone gradients to dark colours, but the icon
   colour stayed near-black (#26241F) -> dark-on-dark, invisible icons.
   Fix: light icons on dark chips. pv-tone-6 was the one tone NOT redefined
   for dark mode (hardcoded light pink) -> darken it too, or the light icon
   would vanish on it. */
:root[data-theme="dark"] .pv-cat-ic { color: #F4F2EA; }
:root[data-theme="dark"] .pv-tone-6 { background: linear-gradient(135deg, #4A2536, #33182A); }
/* B95: mobile drawer brand row (logo-respecting, with close button). */
.pv-mobile-menu .pv-mm-brand { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:16px 18px 14px; border-bottom:1px solid var(--pv-line); }
.pv-mobile-menu .pv-mm-brand-link { display:flex; align-items:center; gap:10px; padding:0; font-family:var(--pv-font-d); font-weight:700; font-size:16px; color:var(--pv-ink); text-decoration:none; }
.pv-mobile-menu .pv-mm-brand-link .pv-logo-img { height:28px; width:auto; }
.pv-mobile-menu .pv-mm-close { background:transparent; border:1px solid var(--pv-line); color:var(--pv-ink); width:36px; height:36px; border-radius:10px; display:grid; place-items:center; cursor:pointer; flex:none; }