/* Signalex — base styles. Mirrors the dashboard mockup. */
:root {
    --bg: #F5F7FB;
    --panel: #FFFFFF;
    --panel-border: #E6EAF2;
    --text: #0F1B2D;
    --text-soft: #5A6477;
    --text-muted: #8892A6;
    --brand: #5B2EFF;
    --brand-dark: #1A0F66;
    --nav-bg: #0E1430;
    --nav-active: #1A2553;
    --nav-text: #C4CADC;
    --nav-text-active: #FFFFFF;
    --green: #1FB364;
    --green-soft: #E1F7EB;
    --amber: #F2A026;
    --amber-soft: #FDF1DF;
    --red: #E4474B;
    --red-soft: #FBE2E3;
    --blue: #3B82F6;
    --blue-soft: #E1ECFE;
    --purple: #5B2EFF;
    --purple-soft: #ECE5FF;
    --shadow: 0 1px 2px rgba(15, 27, 45, 0.04), 0 4px 16px rgba(15, 27, 45, 0.06);
    --radius: 14px;
}

* { box-sizing: border-box; }
html, body {
    margin: 0;
    padding: 0;
    background: var(--bg);
    color: var(--text);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
    font-size: 14px;
    -webkit-font-smoothing: antialiased;
}

a { color: var(--brand); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ---------- Layout ---------- */
.app {
    display: grid;
    grid-template-columns: 240px 1fr;
    min-height: 100vh;
}

.sidebar {
    background: var(--nav-bg);
    color: var(--nav-text);
    padding: 10px 12px 20px;
    display: flex;
    flex-direction: column;
}
.sidebar .brand {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 8px 0 18px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    margin-bottom: 12px;
    width: 100%;
}
.sidebar .brand-logo {
    width: 100%;
    max-width: 216px;
    box-sizing: border-box;
    line-height: 0;
    overflow: hidden;
    display: block;
    border-radius: 0;
}
.sidebar .brand-logo:hover { text-decoration: none; opacity: 0.94; }
.sidebar .brand-logo img {
    width: 100%;
    height: auto;
    display: block;
}
.nav { list-style: none; padding: 0; margin: 0; flex: 1; display: flex; flex-direction: column; }
.nav li { display: block; }
.nav li a, .nav li .nav-disabled {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    color: var(--nav-text);
    border-radius: 8px;
    margin-bottom: 2px;
    font-size: 13px;
    line-height: 1.2;
    cursor: pointer;
}
.nav li a:hover { background: rgba(255,255,255,0.04); text-decoration: none; }
.nav li a.active { background: var(--nav-active); color: var(--nav-text-active); font-weight: 700; }
.nav li a .icon, .nav li .nav-disabled .icon {
    width: 18px; height: 18px; display: inline-flex; align-items: center; justify-content: center;
    color: var(--nav-text); flex-shrink: 0;
}
.nav li a.active .icon { color: var(--nav-text-active); }
.nav li .nav-disabled {
    opacity: 0.42;
    cursor: not-allowed;
    user-select: none;
}
.nav li .nav-disabled:hover { background: transparent; }

.nav .nav-divider {
    margin: 16px 0 6px;
    padding: 0 12px;
    font-size: 9.5px;
    color: #5A6477;
    letter-spacing: 1.2px;
    text-transform: uppercase;
}
.nav .nav-spacer { flex: 1 1 auto; min-height: 8px; }
.nav .nav-settings,
.nav .nav-help {
    border-top: 1px solid rgba(255,255,255,0.06);
    padding-top: 14px;
    margin-top: 8px;
    border-radius: 0 !important;
}
.nav .nav-help {
    min-height: 48px;
    border-top: 0;
    padding: 12px 12px;
    margin-top: 10px;
    border-radius: 8px !important;
    border: 1px solid rgba(255,255,255,0.08);
    background: rgba(255,255,255,0.035);
    font-weight: 700;
}
.nav .nav-help:hover {
    background: rgba(255,255,255,0.08);
    border-color: rgba(255,255,255,0.14);
}
.nav .nav-help.active {
    background: #F7FAFF;
    border-color: rgba(255,255,255,0.72);
    color: #10182F;
}
.nav .nav-help.active .icon { color: #5B2EFF; }

.nav .badge-new, .nav .badge-soon {
    margin-left: auto;
    color: #fff;
    font-size: 9px;
    padding: 2px 7px;
    border-radius: 6px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 700;
}
.nav .badge-new { background: var(--brand); }
.nav .badge-soon { background: rgba(255,255,255,0.08); color: #8892A6; }

.nav-primary {
    gap: 8px;
}
.mobile-nav-toggle,
.mobile-nav-backdrop {
    display: none;
}
.nav li a.nav-big {
    height: 54px;
    min-height: 54px;
    max-height: 54px;
    padding: 0 14px;
    border: 1px solid rgba(255,255,255,0.06);
    background: rgba(255,255,255,0.025);
    font-size: 14px;
    font-weight: 700;
    box-shadow: none;
    transform: none;
    transition: background-color .14s ease, border-color .14s ease, color .14s ease;
}
.nav li a.nav-big:hover {
    background: rgba(255,255,255,0.07);
    border-color: rgba(255,255,255,0.11);
    transform: none;
}
.nav li a.nav-big.active {
    background: #F7FAFF;
    border-color: rgba(255,255,255,0.72);
    color: #10182F;
    box-shadow: none;
    transform: none;
}
.nav li a.nav-dashboard {
    background: rgba(255,255,255,0.1);
    border-color: rgba(255,255,255,0.18);
    color: #F8FAFC;
    box-shadow: none;
}
.nav li a.nav-dashboard:hover {
    background: rgba(255,255,255,0.16);
    border-color: rgba(255,255,255,0.26);
}
.nav li a.nav-dashboard.active {
    background: #F7FAFF;
    border-color: rgba(255,255,255,0.72);
    color: #10182F;
    box-shadow: none;
    transform: none;
}
.nav li a.nav-dashboard.active .icon { color: #5B2EFF; }
.nav li a.nav-opportunities {
    position: relative;
    overflow: visible;
    align-items: center;
    height: 54px;
    min-height: 54px;
    max-height: 54px;
}
.nav li a.nav-opportunities.has-unread,
.nav li a.nav-opportunities.has-unread.active {
    padding: 0 14px;
    box-shadow: none;
    transform: none;
}
.nav li a.nav-opportunities::after {
    content: "";
    position: absolute;
    inset: 0 auto auto 0;
    width: 62%;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(110deg, rgba(255,255,255,0.5), rgba(255,255,255,0));
    opacity: 0;
    transform: none;
    transition: opacity .16s ease;
    pointer-events: none;
}
.nav li a.nav-opportunities.has-unread::after {
    opacity: 0;
}
.nav li a.nav-opportunities.has-unread:hover {
    transform: none;
    box-shadow: none;
}
.nav li a.nav-opportunities.has-unread:hover::after {
    opacity: 0;
}
.nav li a.nav-opportunities .icon {
    width: 22px;
    height: 22px;
    border-radius: 0;
    padding: 0;
    background: transparent;
}
.nav li a.nav-opportunities.has-unread .icon { color: currentColor; }
.nav li a.nav-opportunities .icon svg {
    stroke: currentColor;
}
.nav-copy {
    display: flex;
    min-width: 0;
    flex: 1;
    flex-direction: column;
    gap: 1px;
    position: relative;
    z-index: 1;
}
.nav-sub {
    color: rgba(8, 21, 43, 0.68);
    font-size: 10.5px;
    font-weight: 700;
    line-height: 1.05;
    white-space: nowrap;
}
.nav-reward-badge {
    display: inline-flex;
    width: fit-content;
    margin-bottom: 2px;
    padding: 3px 6px;
    border-radius: 999px;
    background: rgba(255,255,255,0.64);
    border: 1px solid rgba(255,255,255,0.78);
    color: #3B2A06;
    font-size: 8.5px;
    font-weight: 800;
    line-height: 1.2;
    white-space: nowrap;
    box-shadow: 0 4px 12px rgba(138, 96, 12, 0.14);
    animation: rewardPulse 2.4s ease-in-out infinite;
}
.nav-count-bubble {
    position: absolute;
    top: -9px;
    right: -8px;
    z-index: 3;
    width: 24px;
    height: 24px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #FFF5DB;
    border: 1px solid #FFFFFF;
    color: #08152B;
    font-size: 12px;
    font-weight: 900;
    box-shadow: 0 6px 16px rgba(80, 52, 8, 0.28);
    animation: rewardPulse 2.4s ease-in-out infinite;
}
.nav-count-bubble::before,
.nav-count-bubble::after {
    display: none;
}
.nav-count-bubble::before {
    right: -10px;
    top: -8px;
    transform: rotate(42deg);
}
.nav-count-bubble::after {
    right: -18px;
    top: 14px;
    transform: rotate(78deg);
}
.nav-arrow {
    position: relative;
    z-index: 1;
    color: var(--nav-text);
    font-size: 20px;
    font-weight: 800;
    margin-left: auto;
    margin: 0 2px 0 auto;
    transition: transform .16s ease, color .16s ease;
}
.nav li a.active .nav-arrow { color: var(--nav-text-active); }
.nav li a.nav-opportunities.has-unread .nav-arrow {
    color: #4B3507;
    margin-right: 13px;
}
.nav li a.nav-opportunities:hover .nav-arrow {
    transform: translateX(2px);
}
.nav li a.nav-opportunities.has-unread:hover .nav-arrow {
    color: #1F1604;
}
.nav li a.nav-big .icon {
    width: 22px;
    height: 22px;
}
.nav li a.nav-big.nav-opportunities .icon {
    width: 22px;
    height: 22px;
}
.nav-label {
    min-width: 0;
}

.consult-card {
    background: rgba(255,255,255,0.04);
    border-radius: 12px;
    padding: 14px;
    margin: 16px 0;
    text-align: center;
    font-size: 12px;
    color: var(--nav-text);
}
.consult-card .title { font-weight: 600; color: #fff; margin-bottom: 4px; }
.consult-card .btn {
    display: block;
    margin-top: 10px;
    background: transparent;
    border: 1px solid var(--brand);
    color: var(--brand);
    padding: 8px;
    border-radius: 8px;
    font-weight: 600;
    text-decoration: none;
}

.user-block {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px;
    background: rgba(255,255,255,0.04);
    border-radius: 12px;
    margin-top: auto;
}
.user-block .avatar {
    width: 36px; height: 36px; border-radius: 50%;
    background: linear-gradient(135deg, #5B2EFF, #1A0F66);
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-weight: 700; font-size: 12px;
}
.user-block .name { color: #fff; font-weight: 600; font-size: 13px; }
.user-block .company { color: #8892A6; font-size: 11px; }

/* ---------- Main ---------- */
.main { padding: 28px 36px; min-width: 0; }
.page-head {
    display: flex; align-items: flex-start; justify-content: space-between;
    min-height: 50px;
    margin: -74px 0 24px;
    padding-right: 360px;
    gap: 24px;
    flex-wrap: wrap;
}
.page-head h1 { font-size: 26px; margin: 0 0 4px; }
.page-head .sub { color: var(--text-soft); font-size: 13px; }
.page-head .actions { display: flex; gap: 10px; align-items: center; }

.btn {
    display: inline-flex; align-items: center; gap: 6px;
    background: #fff; color: var(--text); border: 1px solid var(--panel-border);
    padding: 9px 14px; border-radius: 8px; cursor: pointer; font-weight: 600;
    font-size: 13px; text-decoration: none;
}
.btn:hover { border-color: #D6DBE5; text-decoration: none; }
.btn.primary { background: var(--brand); color: #fff; border-color: var(--brand); }
.btn.primary:hover { background: var(--brand-dark); border-color: var(--brand-dark); }
.btn.ghost { background: transparent; }

.topbar-icons { display: flex; align-items: center; gap: 14px; color: var(--text-soft); }
.topbar-icons .bell { position: relative; }
.topbar-icons .bell .dot {
    position: absolute; top: -4px; right: -4px; background: var(--red);
    color: #fff; font-size: 10px; border-radius: 10px; padding: 0 5px; font-weight: 700;
}

/* ---------- Cards / KPIs ---------- */
.kpi-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 16px; }
.kpi {
    background: var(--panel); border: 1px solid var(--panel-border);
    border-radius: var(--radius); padding: 18px;
    box-shadow: var(--shadow);
    display: flex; align-items: center; gap: 14px;
}
.kpi .icon {
    width: 44px; height: 44px; border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
}
.kpi .label { color: var(--text-soft); font-size: 12px; margin-bottom: 4px; }
.kpi .value { font-size: 24px; font-weight: 700; }
.kpi .delta { font-size: 11px; color: var(--text-muted); margin-top: 2px; }
.kpi .delta .up { color: var(--green); font-weight: 600; }
.kpi .delta .down { color: var(--red); font-weight: 600; }

/* KPI tints */
.kpi.kpi-doc .icon { background: var(--blue-soft); color: var(--blue); }
.kpi.kpi-shield .icon { background: var(--purple-soft); color: var(--purple); }
.kpi.kpi-low .icon { background: var(--green-soft); color: var(--green); }
.kpi.kpi-high .icon { background: var(--red-soft); color: var(--red); }
.kpi.kpi-score .icon { background: #F0E8FF; color: var(--brand); }

/* ---------- Grid panels ---------- */
.grid-3 { display: grid; grid-template-columns: 1.4fr 1fr 1.4fr; gap: 16px; margin-bottom: 16px; }
.grid-3-equal { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; margin-bottom: 16px; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }

.panel {
    background: var(--panel); border: 1px solid var(--panel-border);
    border-radius: var(--radius); padding: 20px;
    box-shadow: var(--shadow);
}
.panel-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.panel-head h3 { margin: 0; font-size: 15px; font-weight: 700; }
.panel-head a { font-size: 12px; color: var(--brand); font-weight: 600; }

/* Donut */
.donut-wrap { display: flex; align-items: center; gap: 24px; }
.donut { position: relative; width: 140px; height: 140px; flex-shrink: 0; }
.donut svg { transform: rotate(-90deg); }
.donut .center {
    position: absolute; inset: 0; display: flex; flex-direction: column;
    align-items: center; justify-content: center; text-align: center;
}
.donut .center .num { font-size: 22px; font-weight: 700; }
.donut .center .lbl { font-size: 10px; color: var(--text-soft); }

.legend { flex: 1; display: flex; flex-direction: column; gap: 10px; font-size: 13px; }
.legend .row { display: flex; align-items: center; justify-content: space-between; }
.legend .row .left { display: flex; align-items: center; gap: 8px; }
.legend .dot { width: 10px; height: 10px; border-radius: 50%; }

/* Lists */
.list { display: flex; flex-direction: column; gap: 12px; }
.list .row {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 12px; border-radius: 10px;
    background: #F8FAFD;
}
.list .row .icon-square {
    width: 32px; height: 32px; border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    background: var(--blue-soft); color: var(--blue); flex-shrink: 0;
}
.list .row .body { flex: 1; min-width: 0; }
.list .row .body .title { font-weight: 600; font-size: 13px; color: var(--text); }
.list .row .body .sub { font-size: 11px; color: var(--text-soft); margin-top: 2px; }
.list .row .meta { font-weight: 700; color: var(--text); font-size: 14px; }
.list .row .delta-up { color: var(--green); font-size: 11px; margin-left: 4px; }
.list .row.amber .icon-square { background: var(--amber-soft); color: var(--amber); }
.list .row.green .icon-square { background: var(--green-soft); color: var(--green); }
.list .row.red .icon-square   { background: var(--red-soft); color: var(--red); }
.list .row.purple .icon-square{ background: var(--purple-soft); color: var(--purple); }

/* Risk list */
.risk-list .item {
    display: grid; grid-template-columns: 80px 1fr 50px;
    align-items: center; gap: 12px; padding: 10px 0;
    border-bottom: 1px solid var(--panel-border);
}
.risk-list .item:last-child { border-bottom: none; }
.tag {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 3px 9px; border-radius: 99px; font-size: 11px; font-weight: 600;
}
.tag.high { background: var(--red-soft); color: var(--red); }
.tag.medium { background: var(--amber-soft); color: var(--amber); }
.tag.low { background: var(--green-soft); color: var(--green); }
.tag.review-required { background: var(--amber-soft); color: var(--amber); }
.tag.compliant { background: var(--green-soft); color: var(--green); }
.tag.in-progress { background: var(--blue-soft); color: var(--blue); }
.tag.under-review { background: var(--amber-soft); color: var(--amber); }
.tag.evidence-required { background: #FFE7CF; color: #B85C00; }
.tag.visualised { background: var(--purple-soft); color: var(--purple); }
.tag.regulated { background: #FFE5F1; color: #C2185B; }
.tag.non-compliant { background: var(--red-soft); color: var(--red); }
.tag.needs-evidence { background: var(--amber-soft); color: var(--amber); }
.tag.dot-prefix::before {
    content: ''; width: 6px; height: 6px; border-radius: 50%;
    background: currentColor; display: inline-block;
}

/* Activity */
.activity-list .row { background: transparent; padding: 10px 0; border-bottom: 1px solid var(--panel-border); border-radius: 0; }
.activity-list .row:last-child { border-bottom: none; }
.activity-list .row .icon-square { width: 28px; height: 28px; }

/* Deadlines */
.deadline-row {
    display: grid; grid-template-columns: 50px 1fr auto;
    gap: 12px; align-items: center; padding: 10px 0;
    border-bottom: 1px solid var(--panel-border);
}
.deadline-row:last-child { border-bottom: none; }
.deadline-row .date {
    background: #F1EBFF; color: var(--brand-dark);
    border-radius: 8px; padding: 6px 0; text-align: center;
    font-weight: 700;
}
.deadline-row .date .d { font-size: 16px; line-height: 1; }
.deadline-row .date .m { font-size: 9px; letter-spacing: 1px; opacity: 0.7; }
.deadline-row .body .title { font-weight: 600; font-size: 13px; }
.deadline-row .body .sub { font-size: 11px; color: var(--text-soft); margin-top: 2px; }
.deadline-row .pill { background: var(--red-soft); color: var(--red); font-size: 11px; padding: 3px 8px; border-radius: 8px; font-weight: 600; }

/* Projects table */
.proj-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.proj-table th { text-align: left; padding: 10px 8px; color: var(--text-soft); font-weight: 600; font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; border-bottom: 1px solid var(--panel-border); }
.proj-table td { padding: 12px 8px; border-bottom: 1px solid var(--panel-border); }
.proj-table tr:last-child td { border-bottom: none; }
.proj-table tr.project-row { cursor: pointer; transition: background-color .14s ease; }
.proj-table tr.project-row:hover { background: #FAFCFF; }
.proj-table .product { display: flex; align-items: center; gap: 12px; }
.proj-table .product .thumb {
    width: 40px; height: 40px; border-radius: 8px;
    background: linear-gradient(135deg, #ECE5FF, #FFF);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.proj-table .product .name { font-weight: 600; }
.proj-table .product .name.project-link { color: var(--text); }
.proj-table .product .name.project-link:hover { color: var(--brand); text-decoration: none; }
.proj-table .product .claim { font-size: 11px; color: var(--text-soft); }

/* Product manager */
.project-manager {
    display: grid;
    gap: 16px;
    min-height: 0;
}
.main > .project-manager:last-child {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    padding-bottom: 18px;
}
.project-manager-hero,
.project-manager-card {
    background: #fff;
    border: 1px solid var(--panel-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}
.project-manager-hero {
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr) auto;
    align-items: center;
    gap: 18px;
    padding: 22px 24px;
}
.project-manager-icon {
    width: 58px;
    height: 58px;
    border-radius: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--purple-soft);
    color: var(--brand);
}
.project-manager-icon svg {
    width: 26px;
    height: 26px;
}
.project-manager-hero h2 {
    margin: 3px 0 6px;
    font-size: 26px;
    line-height: 1.1;
}
.project-manager-hero p {
    margin: 0;
    color: var(--text-soft);
    line-height: 1.45;
}
.project-manager-badges {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: wrap;
}
.project-manager-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(320px, 0.8fr);
    gap: 16px;
}
.project-manager-grid.lower {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
.project-manager-card {
    padding: 22px;
}
.project-detail-form {
    display: grid;
    gap: 14px;
}
.project-detail-form label {
    display: grid;
    gap: 7px;
    color: var(--text-soft);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.6px;
    text-transform: uppercase;
}
.project-detail-form input,
.project-detail-form select,
.project-detail-form textarea {
    width: 100%;
    border: 1px solid var(--panel-border);
    border-radius: 8px;
    background: #fff;
    color: var(--text);
    padding: 11px 12px;
    font: inherit;
    text-transform: none;
    letter-spacing: 0;
}
.project-detail-form textarea {
    resize: vertical;
    min-height: 96px;
    line-height: 1.45;
}
.project-form-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}
.project-manager-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.project-detail-list {
    display: grid;
    gap: 0;
    margin: 0;
}
.project-detail-list div {
    display: grid;
    grid-template-columns: 130px minmax(0, 1fr);
    gap: 14px;
    padding: 11px 0;
    border-bottom: 1px solid #EEF2F7;
}
.project-detail-list div:last-child {
    border-bottom: 0;
}
.project-detail-list dt {
    color: var(--text-soft);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}
.project-detail-list dd {
    margin: 0;
    color: var(--text);
    min-width: 0;
    overflow-wrap: anywhere;
}
.project-linked-list,
.project-activity-list {
    display: grid;
    gap: 10px;
}
.project-linked-list a,
.project-spec-row,
.project-activity-list div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    border: 1px solid #EEF2F7;
    border-radius: 10px;
    padding: 12px;
    color: var(--text);
}
.project-linked-list a:hover {
    border-color: #DCD5FF;
    background: #FCFAFF;
    text-decoration: none;
}
.project-linked-list span,
.project-spec-row,
.project-activity-list div {
    min-width: 0;
}
.project-linked-list strong,
.project-spec-row strong,
.project-activity-list strong {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.project-linked-list small,
.project-spec-row small,
.project-activity-list span {
    display: block;
    margin-top: 4px;
    color: var(--text-soft);
    font-size: 12px;
    line-height: 1.35;
}
.project-empty-mini {
    border: 1px dashed #DDE3EE;
    border-radius: 10px;
    padding: 18px;
    color: var(--text-soft);
    background: #FAFCFF;
    line-height: 1.45;
}

/* Bars (competitor insights) */
.bar-row { display: grid; grid-template-columns: 1fr 60px; align-items: center; gap: 8px; margin-bottom: 8px; font-size: 12px; }
.bar-row .label { color: var(--text); }
.bar-row .pct { text-align: right; font-weight: 600; color: var(--text-soft); font-size: 11px; }
.bar { grid-column: 1 / -1; height: 6px; background: #EEF1F8; border-radius: 4px; overflow: hidden; margin-top: -4px; margin-bottom: 8px; }
.bar > span { display: block; height: 100%; background: var(--brand); }

/* Help cards */
.help-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 12px; }
.help-card { background: #F8FAFD; border-radius: 10px; padding: 18px; text-align: center; font-size: 12px; }
.help-card .icon { width: 36px; height: 36px; margin: 0 auto 8px; color: var(--brand); }
.help-card .title { font-weight: 600; color: var(--text); margin-bottom: 2px; }
.help-card .sub { color: var(--text-soft); font-size: 11px; }

/* Forms */
.form-card { background: #fff; border: 1px solid var(--panel-border); border-radius: var(--radius); padding: 28px; box-shadow: var(--shadow); }
.form-card .row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }
.form-card label { display: block; font-weight: 600; font-size: 12px; color: var(--text); margin-bottom: 6px; text-transform: uppercase; letter-spacing: 0.5px; }
.form-card input[type=text], .form-card input[type=color], .form-card select, .form-card textarea {
    width: 100%; padding: 11px 12px; border: 1px solid var(--panel-border); border-radius: 8px;
    font-family: inherit; font-size: 14px; background: #fff; color: var(--text);
}
.form-card input:focus, .form-card select:focus, .form-card textarea:focus {
    outline: 2px solid var(--brand); outline-offset: -1px; border-color: var(--brand);
}
.form-card textarea { min-height: 110px; resize: vertical; }
.form-card .actions { display: flex; gap: 10px; margin-top: 8px; }
.settings-question {
    margin-top: 16px;
}
.settings-options {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}
.settings-options.compact {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}
.settings-options label,
.settings-chips label {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 10px;
    border: 1px solid var(--panel-border);
    border-radius: 8px;
    color: #344054;
    font-size: 13px;
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0;
}
.settings-options input,
.settings-chips input {
    width: auto;
    margin-top: 1px;
    flex: 0 0 auto;
}
.settings-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}
.settings-chips label {
    border-radius: 999px;
    padding: 8px 10px;
    font-size: 12px;
}
.profile-avatar-section {
    margin-top: 14px;
}
.profile-avatar-status {
    min-height: 18px;
    margin: -4px 0 10px;
    color: var(--text-soft);
    font-size: 12px;
    font-weight: 650;
}
.profile-avatar-status[data-tone="saved"] {
    color: var(--green);
}
.profile-avatar-status[data-tone="error"] {
    color: var(--red);
}
.profile-avatar-status[data-tone="saving"] {
    color: var(--brand);
}
.profile-avatar-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(86px, 1fr));
    gap: 10px;
    max-height: 390px;
    overflow: auto;
    padding: 4px 4px 8px;
}
.profile-avatar-choice {
    position: relative;
    display: grid !important;
    justify-items: center;
    gap: 8px !important;
    padding: 10px 8px !important;
    border: 1px solid var(--panel-border);
    border-radius: 10px;
    background: #fff;
    cursor: pointer;
    color: var(--text-soft) !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    line-height: 1;
    text-transform: none !important;
    letter-spacing: 0 !important;
    transition: border-color .14s ease, box-shadow .14s ease, background .14s ease;
}
.profile-avatar-choice:hover {
    border-color: #D8D0FF;
    background: #FCFAFF;
}
.profile-avatar-choice input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.profile-avatar-choice:has(input:checked) {
    border-color: var(--brand);
    box-shadow: 0 0 0 2px rgba(91, 46, 255, 0.14);
    background: #FBFAFF;
}
.profile-avatar-choice:has(input:checked)::after {
    content: "";
    position: absolute;
    top: 8px;
    right: 8px;
    width: 10px;
    height: 10px;
    border-radius: 999px;
    background: var(--brand);
    box-shadow: 0 0 0 3px #fff;
}
.avatar-preview {
    width: 58px;
    height: 58px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: #F2F5FA;
    box-shadow: inset 0 0 0 1px rgba(15, 27, 45, 0.08);
}
.avatar-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.initials-preview {
    color: #fff;
    font-size: 15px;
    font-weight: 850;
}

/* ---------- New Product builder ---------- */
.product-builder [hidden] { display: none !important; }
.product-builder { min-height: calc(100vh - 96px); }
.product-builder-start {
    min-height: calc(100vh - 128px);
    display: grid;
    place-items: center;
    grid-template-columns: minmax(0, 1fr);
    align-content: center;
    justify-content: center;
}
.builder-prompt {
    width: min(880px, 100%);
    margin-inline: auto;
    display: grid;
    grid-template-columns: 1fr;
    gap: 26px;
    align-items: center;
    justify-items: center;
    text-align: center;
}
.builder-hero-copy {
    display: grid;
    gap: 10px;
    justify-items: center;
}
.builder-kicker {
    color: var(--text-soft);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.4px;
    text-transform: uppercase;
}
.builder-prompt h1 {
    width: 100%;
    margin: 0;
    font-size: clamp(44px, 5vw, 58px);
    line-height: 1.05;
    letter-spacing: 0;
    text-align: center;
}
.builder-intro {
    max-width: 560px;
    margin: 0 0 6px;
    color: var(--text-soft);
    font-size: clamp(18px, 2vw, 23px);
    line-height: 1.35;
    font-weight: 650;
}
.builder-start-card {
    width: min(720px, 100%);
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
    padding: clamp(24px, 4vw, 36px) clamp(24px, 4.4vw, 46px);
    border: 1px solid var(--panel-border);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.86);
    box-shadow: 0 18px 48px rgba(15, 27, 45, 0.08);
    text-align: left;
}
.builder-start-card label {
    color: var(--text);
    font-size: 14px;
    font-weight: 850;
}
.builder-name-input {
    width: 100%;
    height: 64px;
    border: 1px solid #6D3BFF;
    border-radius: 8px;
    background: #fff;
    padding: 0 20px;
    font-size: 22px;
    font-weight: 700;
    color: var(--text);
    box-shadow: inset 0 0 0 1px rgba(91, 46, 255, 0.06);
    text-align: left;
}
.builder-name-input:focus {
    outline: 2px solid var(--brand);
    outline-offset: -1px;
}
.builder-enter {
    justify-self: center;
    min-width: 264px;
    height: 62px;
    border: 1px solid var(--brand);
    border-radius: 8px;
    background: linear-gradient(135deg, #6B2DFF, #4C1DFF);
    color: #fff;
    padding: 0 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    font-size: 18px;
    font-weight: 800;
    cursor: pointer;
    box-shadow: 0 14px 30px rgba(91, 46, 255, 0.24);
}
.builder-start-steps {
    width: min(900px, 100%);
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    margin-top: 6px;
}
.builder-step {
    position: relative;
    display: grid;
    justify-items: center;
    gap: 8px;
    text-align: center;
}
.builder-step::before,
.builder-step::after {
    content: "";
    position: absolute;
    top: 13px;
    height: 1px;
    background: #CBD3DF;
}
.builder-step::before {
    left: 0;
    right: calc(50% + 32px);
}
.builder-step::after {
    left: calc(50% + 32px);
    right: 0;
}
.builder-step:first-child::before,
.builder-step:last-child::after {
    display: none;
}
.builder-start-steps strong {
    position: relative;
    z-index: 1;
    width: 28px;
    height: 28px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.96);
    color: #5C667A;
    border: 1.5px solid #B8C3D4;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 850;
    box-shadow: 0 5px 14px rgba(15, 27, 45, 0.06);
}
.builder-step.active strong {
    background: linear-gradient(135deg, #7B5BFF, #5B2EFF);
    border-color: transparent;
    color: #fff;
    box-shadow: 0 10px 22px rgba(91, 46, 255, 0.26);
}
.builder-step-icon {
    width: 68px;
    height: 68px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.88);
    border: 1px solid #DDE4EF;
    color: #7B8496;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.72), 0 8px 20px rgba(15, 27, 45, 0.06);
    overflow: hidden;
}
.builder-step.active .builder-step-icon {
    border-color: #D8D2FF;
    background: rgba(246, 243, 255, 0.9);
}
.builder-step-icon::before {
    content: none;
}
.builder-step-icon img {
    display: block;
    width: 78%;
    height: 78%;
    object-fit: contain;
    filter: grayscale(1) saturate(0) contrast(0.72) brightness(1.18);
    opacity: 0.78;
    mix-blend-mode: multiply;
}
.builder-step.active .builder-step-icon img {
    filter: grayscale(1) saturate(0) contrast(0.74) brightness(1.12);
    opacity: 0.86;
}
.builder-step-icon svg {
    display: block;
    width: 36px;
    height: 36px;
    color: currentColor;
}
.builder-step b {
    color: var(--text);
    font-size: 13px;
    font-weight: 850;
}
.builder-step small {
    max-width: 148px;
    color: var(--text-soft);
    font-size: 13px;
    font-weight: 650;
    line-height: 1.35;
}
.builder-format-preview {
    display: flex;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 4px;
}
.builder-format-preview span {
    background: rgba(255,255,255,0.72);
    border: 1px solid var(--panel-border);
    border-radius: 999px;
    padding: 7px 11px;
    color: var(--text-soft);
    font-size: 12px;
    font-weight: 700;
}
.product-builder-flow {
    display: flex;
    flex-direction: column;
    gap: 18px;
}
.builder-flow-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}
.builder-flow-head h1 {
    margin: 0 0 4px;
    font-size: 28px;
}
.packaging-flow-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 14px;
}
.pack-option {
    background: #fff;
    border: 1px solid var(--panel-border);
    border-radius: 8px;
    padding: 14px 12px 12px;
    min-height: 286px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    box-shadow: 0 1px 2px rgba(15, 27, 45, 0.04);
    transition: border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
}
.pack-option:hover,
.pack-option.selected {
    border-color: var(--text);
    box-shadow: var(--shadow);
    transform: translateY(-2px);
}
.pack-outline {
    width: 100%;
    height: 292px;
}
.pack-outline .pack-shadow {
    fill: rgba(15, 27, 45, 0.16);
    filter: blur(1px);
}
.pack-outline .pack-face {
    fill: #FFFFFF;
    stroke: #111827;
    stroke-width: 1.9;
    vector-effect: non-scaling-stroke;
}
.pack-outline .pack-side {
    fill: #F1F3F6;
    stroke: #111827;
    stroke-width: 1.75;
    vector-effect: non-scaling-stroke;
}
.pack-outline .pack-top {
    fill: #F8F9FB;
    stroke: #111827;
    stroke-width: 1.75;
    vector-effect: non-scaling-stroke;
}
.pack-outline .pack-shape {
    fill: #FFFFFF;
    stroke: #111827;
    stroke-width: 1.9;
    vector-effect: non-scaling-stroke;
}
.pack-outline .pack-detail {
    fill: none;
    stroke: #111827;
    stroke-width: 1.15;
    opacity: 0.58;
    vector-effect: non-scaling-stroke;
}
.pack-outline .pack-detail-fill {
    fill: #F7F8FA;
    stroke: #111827;
    stroke-width: 1.1;
    opacity: 0.78;
    vector-effect: non-scaling-stroke;
}
.pack-outline .pack-dash {
    stroke-dasharray: 4 4;
    opacity: 0.5;
}
.pack-outline .pack-microcopy {
    stroke: #111827;
    stroke-width: 0.9;
    opacity: 0.42;
}
.pack-outline .pack-cap {
    fill: #E7E9ED;
    stroke: #111827;
    stroke-width: 1.35;
    vector-effect: non-scaling-stroke;
}
.pack-outline .pack-label-panel {
    fill: rgba(255, 255, 255, 0.78);
    stroke: #111827;
    stroke-width: 1.05;
    opacity: 0.72;
    vector-effect: non-scaling-stroke;
}
.pack-outline text {
    fill: #111827;
    font-family: 'Inter', Arial, sans-serif;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 0;
}
.pack-outline .pack-brand-vertical {
    letter-spacing: 4px;
    font-weight: 700;
}
.pack-outline .pack-side-text {
    opacity: 0.72;
}
.pack-option > span {
    color: var(--text);
    font-weight: 800;
}
.photo-pack {
    min-height: 294px;
}
.pack-photo-stage {
    position: relative;
    width: 100%;
    height: 236px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.pack-photo-stage img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    pointer-events: none;
    user-select: none;
}
.pack-photo-name {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 44%;
    max-height: 46px;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    text-align: center;
    color: #111827;
    font-weight: 800;
    font-size: 15px;
    line-height: 1.05;
    letter-spacing: 0;
    text-wrap: balance;
    pointer-events: none;
}
.photo-pack.bag .pack-photo-name {
    top: 48%;
    width: 48%;
}
.photo-pack.pouch .pack-photo-name {
    top: 57%;
    width: 36%;
}
.photo-pack.satchel .pack-photo-name {
    top: 52%;
    width: 46%;
    transform: translate(-50%, -50%) rotate(-90deg);
}
.photo-pack.stick .pack-photo-stage img {
    width: 74%;
}
.photo-pack.stick .pack-photo-name {
    top: 55%;
    width: 27%;
    transform: translate(-50%, -50%) rotate(-90deg);
}
.photo-pack.tub .pack-photo-name {
    top: 55%;
    width: 38%;
}
.photo-pack.jar .pack-photo-name {
    top: 55%;
    width: 34%;
}
.photo-pack.bottle .pack-photo-name {
    top: 55%;
    width: 34%;
    transform: translate(-50%, -50%) rotate(-90deg);
}
.photo-pack.can .pack-photo-name {
    top: 54%;
    width: 36%;
    transform: translate(-50%, -50%) rotate(-90deg);
}
.photo-pack.vial .pack-photo-stage img {
    width: 62%;
}
.photo-pack.vial .pack-photo-name {
    top: 55%;
    width: 27%;
    transform: translate(-50%, -50%) rotate(-90deg);
}
.photo-pack.dispenser .pack-photo-name {
    top: 58%;
    width: 31%;
    transform: translate(-50%, -50%) rotate(-90deg);
}
.photo-pack.spray .pack-photo-name {
    top: 60%;
    width: 31%;
    transform: translate(-50%, -50%) rotate(-90deg);
}
.photo-pack.carton .pack-photo-name,
.photo-pack.box .pack-photo-name {
    top: 56%;
    width: 42%;
}
.photo-pack.bucket .pack-photo-name {
    top: 56%;
    width: 44%;
}
.builder-selected-pack {
    display: grid;
    grid-template-columns: minmax(320px, 0.62fr) minmax(520px, 1.38fr);
    gap: 18px;
    align-items: stretch;
    overflow: visible;
}
.packaging-preview-card {
    position: relative;
    z-index: 4;
    overflow: visible;
    background: #fff;
    border: 1px solid var(--panel-border);
    border-radius: 8px;
    box-shadow: var(--shadow);
    padding: 18px;
}
.packaging-preview-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 12px;
}
.preview-title {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--text-soft);
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 1.4px;
    text-transform: uppercase;
}
.preview-info {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border: 1px solid #7B86A1;
    border-radius: 999px;
    color: #6B7894;
    background: #fff;
    font-size: 11px;
    font-weight: 900;
    line-height: 1;
    cursor: help;
}
.preview-tooltip {
    position: absolute;
    left: 50%;
    top: calc(100% + 10px);
    z-index: 9999;
    width: min(260px, 72vw);
    transform: translateX(-50%);
    padding: 10px 12px;
    border-radius: 8px;
    background: #111831;
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0;
    line-height: 1.4;
    text-transform: none;
    box-shadow: 0 16px 30px rgba(15, 23, 42, 0.18);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.16s ease, transform 0.16s ease;
}
.preview-info:hover .preview-tooltip,
.preview-info:focus .preview-tooltip {
    opacity: 1;
    transform: translateX(-50%) translateY(2px);
}
.selected-pack-preview {
    background: linear-gradient(180deg, #FBFAFF 0%, #F7F8FF 100%);
    border: 1px solid var(--panel-border);
    border-radius: 8px;
    min-height: 0;
    padding: 12px;
}
.selected-pack-preview .pack-photo-stage {
    height: min(43vh, 360px);
}
.selected-pack-preview .pack-photo-name {
    font-size: 20px;
    max-height: 70px;
}
.pack-preview-claim,
.pack-preview-weight {
    position: absolute;
    left: 50%;
    z-index: 3;
    width: min(120px, 36%);
    transform: translateX(-50%);
    color: #5738FF;
    font-weight: 800;
    text-align: center;
    line-height: 1.15;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8);
    pointer-events: none;
}
.pack-preview-claim {
    bottom: 28%;
    font-size: 10px;
    white-space: pre-line;
    max-height: 74px;
    overflow: hidden;
}
.pack-preview-weight {
    bottom: 20%;
    color: var(--text);
    font-size: 13px;
}
.preview-note {
    margin: 8px 0 0;
    color: var(--text-soft);
    font-size: 13px;
}
.builder-claim-step {
    min-height: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}
.builder-claim-head {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    align-items: flex-start;
    margin-bottom: 4px;
}
.builder-claim-head .builder-kicker {
    text-align: left;
    margin-bottom: 5px;
    color: var(--primary);
}
.builder-claim-head h2 {
    margin: 0 0 4px;
    font-size: 22px;
}
.builder-claim-head p {
    margin: 0;
    color: var(--text-soft);
    line-height: 1.35;
    font-size: 14px;
}
.builder-assess-form {
    position: relative;
    z-index: 2;
    overflow: visible;
    background: #fff;
    border: 1px solid var(--panel-border);
    border-radius: 8px;
    padding: 18px 24px;
    box-shadow: var(--shadow);
    display: flex;
    flex-direction: column;
}
.builder-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-bottom: 14px;
}
.builder-assess-form label {
    display: block;
    font-weight: 700;
    font-size: 12px;
    color: var(--text);
    margin-bottom: 4px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.builder-assess-form input[type=text],
.builder-assess-form select,
.builder-assess-form textarea {
    width: 100%;
    border: 1px solid var(--panel-border);
    border-radius: 8px;
    padding: 10px 12px;
    font: inherit;
    color: var(--text);
    background: #fff;
}
.builder-assess-form input[readonly] {
    background: #F8FAFD;
    color: var(--text-soft);
}
.builder-assess-form textarea {
    min-height: 76px;
    max-height: 100px;
    resize: vertical;
}
.builder-claim-step > select {
    margin-bottom: 8px;
}
.claim-text-wrap {
    position: relative;
    margin-bottom: 8px;
}
.claim-text-wrap textarea {
    padding: 12px 44px 24px 16px;
}
.claim-list {
    display: grid;
    gap: 8px;
}
.additional-claim-wrap {
    padding-top: 4px;
}
.additional-claim-button {
    width: fit-content;
    min-height: 36px;
    margin: 0 0 10px;
    padding: 0 14px;
    border: 1px solid var(--brand);
    border-radius: 8px;
    background: #FFFFFF;
    color: var(--brand);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
}
.additional-claim-button span {
    font-size: 18px;
    line-height: 1;
}
.additional-claim-button:hover {
    background: #F8F5FF;
}
.remove-claim-button {
    position: absolute;
    top: 4px;
    right: 0;
    border: 0;
    background: transparent;
    color: #667085;
    font-size: 11px;
    font-weight: 800;
    cursor: pointer;
}
.additional-claim-wrap textarea {
    padding-right: 72px;
}
.claim-char-count {
    position: absolute;
    right: 14px;
    bottom: 9px;
    color: var(--text-soft);
    font-size: 13px;
    font-weight: 700;
}
.serving-size-row,
.food-weight-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 112px;
    gap: 14px;
    margin-bottom: 8px;
}
.other-food-type {
    margin-top: -8px;
    margin-bottom: 10px;
}
.claim-placement-card {
    position: relative;
    z-index: 3;
    overflow: visible;
    margin-top: 2px;
    margin-bottom: 10px;
    padding: 10px 14px;
    border: 2px solid #DDD2FF;
    border-radius: 8px;
    background: linear-gradient(180deg, #fff 0%, #FDFBFF 100%);
}
.placement-title {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 8px;
    color: var(--text);
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0.7px;
    text-transform: uppercase;
}
.placement-options {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}
.placement-option {
    display: flex !important;
    align-items: center;
    gap: 14px;
    min-height: 50px;
    margin: 0 !important;
    padding: 9px 14px;
    border: 1px solid var(--panel-border);
    border-radius: 8px;
    background: #fff;
    color: var(--text);
    font-size: 14px !important;
    font-weight: 800 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    cursor: pointer;
}
.placement-option input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.placement-option:has(input:checked) {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(87, 56, 255, 0.08);
}
.placement-icon {
    position: relative;
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    color: var(--primary);
}
.pack-front-icon::before,
.pack-back-icon::before {
    content: "";
    width: 15px;
    height: 24px;
    border: 2px solid currentColor;
    border-radius: 3px;
    box-shadow: inset 0 4px 0 rgba(87, 56, 255, 0.12), inset 0 -4px 0 rgba(87, 56, 255, 0.12);
}
.marketing-icon::before {
    content: "";
    width: 19px;
    height: 13px;
    border: 2px solid currentColor;
    border-left-width: 5px;
    border-radius: 10px 4px 4px 10px;
    transform: rotate(-12deg);
}
.marketing-icon::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 2px;
    width: 7px;
    height: 9px;
    border-left: 2px solid currentColor;
    transform: rotate(-12deg);
}
.premium-analysis-row {
    display: grid !important;
    grid-template-columns: 20px minmax(0, 1fr) 48px;
    justify-items: start;
    align-items: center;
    gap: 16px;
    margin: 0 0 10px !important;
    padding: 10px 14px;
    border: 1px solid var(--panel-border);
    border-radius: 8px;
    background: #fff;
    color: var(--text) !important;
    font-size: 14px !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    cursor: pointer;
}
.premium-analysis-row input {
    width: 20px;
    height: 20px;
    accent-color: var(--primary);
}
.premium-analysis-row strong {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    margin-bottom: 3px;
    font-size: 14px;
}
.premium-analysis-row em {
    padding: 4px 8px;
    border-radius: 7px;
    background: #EFEAFF;
    color: var(--primary);
    font-size: 11px;
    font-style: normal;
}
.premium-analysis-row small {
    display: block;
    color: var(--text-soft);
    font-size: 11px;
    font-weight: 600;
    line-height: 1.4;
}
.premium-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    justify-self: end;
    width: 38px;
    height: 38px;
    border-radius: 8px;
    background: #F0E9FF;
    border: 1px solid #E0D5FF;
}
.premium-mark::before {
    content: "";
    width: 25px;
    height: 25px;
    background: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28' fill='none'%3E%3Cpath d='M8.25 5.25h11.5L24 10.5 14 23 4 10.5 8.25 5.25Z' stroke='%235738FF' stroke-width='2.2' stroke-linejoin='round'/%3E%3Cpath d='M4.5 10.5h19M8.75 5.5l2.75 5L14 22.25l2.5-11.75 2.75-5' stroke='%235738FF' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.analysis-note {
    display: none;
    margin: 0;
    color: var(--text-soft);
    font-size: 12px;
    font-weight: 600;
}
.builder-assess-form .actions {
    display: flex;
    gap: 10px;
    margin-top: 8px;
}
.assess-claim-button {
    min-height: 50px;
    min-width: 252px;
    padding: 12px 28px !important;
    font-size: 17px;
    box-shadow: 0 14px 28px rgba(87, 56, 255, 0.24);
}
.assess-claim-button::before {
    content: "";
    width: 22px;
    height: 22px;
    margin-right: 10px;
    border-radius: 999px;
    border: 2px dotted rgba(255, 255, 255, 0.95);
    background: radial-gradient(circle, #fff 0 3px, transparent 4px);
    box-shadow: inset 0 0 0 5px rgba(255, 255, 255, 0.14);
}
@media (min-width: 1100px) and (min-height: 760px) {
    .builder-selected-pack {
        min-height: auto;
    }

    .packaging-preview-card,
    .builder-assess-form {
        min-height: clamp(600px, calc(100vh - 230px), 720px);
    }

    .builder-assess-form {
        padding: 22px 30px 24px;
    }

    .builder-claim-head {
        margin-bottom: 10px;
    }

    .builder-assess-form textarea {
        min-height: 84px;
        max-height: 104px;
    }

    .claim-list {
        gap: 4px;
    }

    .claim-text-wrap {
        margin-bottom: 4px;
    }

    .additional-claim-button {
        margin-bottom: 12px;
    }

    .builder-claim-step > select,
    .serving-size-row,
    .food-weight-row {
        margin-bottom: 14px;
    }

    .claim-placement-card {
        margin-top: auto;
        margin-bottom: 14px;
        padding: 13px 16px;
    }

    .premium-analysis-row {
        margin-bottom: 14px !important;
        padding: 12px 16px;
    }

    .builder-assess-form .actions {
        margin-top: 0;
        margin-bottom: 0;
        padding-bottom: 0;
    }

    .assess-claim-button {
        min-height: 52px;
    }
}
.builder-recent {
    background: #fff;
    border: 1px solid var(--panel-border);
    border-radius: 8px;
    padding: 16px;
}
.builder-recent-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}
.builder-recent-list a {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid var(--panel-border);
    border-radius: 8px;
    color: inherit;
    text-decoration: none;
}
.builder-recent-list span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.builder-recent-list strong {
    color: var(--text-soft);
    font-size: 12px;
}

/* Result panel */
.result-card { border-radius: var(--radius); padding: 22px; margin-top: 16px; border: 1px solid var(--panel-border); background: #fff; box-shadow: var(--shadow); }
.result-card.compliant { border-top: 4px solid var(--green); }
.result-card.needs_evidence { border-top: 4px solid var(--amber); }
.result-card.regulated { border-top: 4px solid #C2185B; }
.result-card.non_compliant { border-top: 4px solid var(--red); }
.result-card h2 { font-size: 18px; margin: 0 0 4px; }
.result-card .verdict-row { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.result-card section { margin-top: 18px; }
.result-card section h4 { font-size: 12px; color: var(--text-soft); text-transform: uppercase; letter-spacing: 0.5px; margin: 0 0 8px; }
.result-card ul { margin: 0; padding-left: 18px; }
.result-card ul li { margin-bottom: 6px; }
.result-card .refs { display: flex; flex-direction: column; gap: 6px; }
.result-card .refs a { font-size: 13px; }

.claim-result-card {
    margin-top: 12px;
    border-radius: 16px;
    padding: 16px;
    border: 1px solid var(--panel-border);
    background: #fff;
    box-shadow: var(--shadow);
}
.claim-result-card.claim-good {
    border-color: #BCEFD0;
    background: linear-gradient(135deg, #F0FFF6 0%, #FFFFFF 72%);
}
.claim-result-card.claim-improve {
    border-color: #F8B9BC;
    background: linear-gradient(135deg, #FFF1F2 0%, #FFFFFF 72%);
}
.claim-result-hero {
    display: flex;
    gap: 12px;
    align-items: center;
    padding: 14px;
    border-radius: 14px;
}
.claim-good .claim-result-hero {
    background: linear-gradient(135deg, #DDFBE8 0%, #F6FFF9 100%);
    color: #063D22;
}
.claim-improve .claim-result-hero {
    background: linear-gradient(135deg, #FDE1E3 0%, #FFF7F7 100%);
    color: #64171C;
}
.claim-result-icon {
    width: 48px;
    height: 48px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: #fff;
    font-size: 28px;
    font-weight: 900;
}
.claim-good .claim-result-icon { background: #1FB364; }
.claim-improve .claim-result-icon { background: #E4474B; }
.claim-result-kicker {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    opacity: 0.72;
    margin-bottom: 4px;
}
.claim-result-hero h2 {
    margin: 0;
    font-size: 24px;
}
.claim-result-hero p {
    margin: 4px 0 0;
    font-weight: 600;
}
.claim-result-quote {
    margin: 12px 0;
    padding: 11px 14px;
    border-radius: 12px;
    background: #F8FAFD;
    border: 1px solid var(--panel-border);
    font-size: 16px;
    font-weight: 700;
}
.claim-suggestion-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(280px, 0.85fr);
    gap: 10px;
}
.claim-result-card section {
    padding: 12px;
    border-radius: 12px;
    background: #fff;
    border: 1px solid var(--panel-border);
}
.claim-result-card h4 {
    margin: 0 0 8px;
    font-size: 11px;
    color: var(--text-soft);
    text-transform: uppercase;
    letter-spacing: 0.6px;
}
.claim-result-card ul {
    margin: 0;
    padding-left: 18px;
}
.claim-result-card li {
    margin-bottom: 4px;
}
.claim-mode-pill,
.claim-ai-meta,
.claim-api-meta {
    display: inline-flex;
    width: fit-content;
    margin-top: 10px;
    padding: 6px 10px;
    border-radius: 999px;
    background: rgba(87, 56, 255, 0.1);
    color: var(--primary);
    font-size: 12px;
    font-weight: 800;
}
.claim-ai-meta {
    margin-left: 8px;
    background: rgba(17, 24, 49, 0.08);
    color: var(--text-soft);
}
.claim-api-meta {
    margin-left: 8px;
    background: rgba(16, 185, 129, 0.1);
    color: #047857;
}
.claim-breakdown {
    margin: 16px 0;
}
.claim-breakdown h3 {
    margin: 0 0 10px;
    font-size: 18px;
}
.claim-breakdown-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px;
}
.claim-breakdown-card {
    padding: 14px;
    border: 1px solid var(--panel-border);
    border-radius: 8px;
    background: #fff;
}
.claim-breakdown-card strong {
    display: block;
    margin-bottom: 10px;
    color: var(--text);
    line-height: 1.35;
}
.claim-breakdown-card dl {
    display: grid;
    gap: 8px;
    margin: 0;
}
.claim-breakdown-card dl div {
    display: grid;
    grid-template-columns: 92px minmax(0, 1fr);
    gap: 8px;
}
.claim-breakdown-card dt {
    color: var(--text-soft);
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
}
.claim-breakdown-card dd {
    margin: 0;
    font-size: 13px;
    font-weight: 700;
}
.claim-breakdown-card p {
    margin: 10px 0 0;
    color: var(--text-soft);
    font-size: 13px;
}
.claim-context pre {
    overflow: auto;
    max-height: 220px;
    margin: 0;
    padding: 12px;
    border-radius: 8px;
    background: #F8FAFD;
    color: var(--text);
    white-space: pre-wrap;
}
.claim-rewrite p {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.5;
}
.claim-better-claims {
    margin-top: 12px;
    padding: 14px !important;
    border: 0 !important;
    background: linear-gradient(135deg, #10182F 0%, #261467 100%) !important;
    color: #fff;
    box-shadow: 0 16px 34px rgba(24, 17, 72, 0.24);
}
.better-claims-label {
    width: fit-content;
    padding: 4px 9px;
    border-radius: 999px;
    background: rgba(255,255,255,0.14);
    color: #D7CCFF;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.7px;
    text-transform: uppercase;
    margin-bottom: 6px;
}
.claim-better-claims h3 {
    margin: 0 0 8px;
    font-size: 20px;
}
.better-claims-intro {
    margin: 0 0 10px;
    color: #D7CCFF;
    font-size: 12px;
}
.better-claims-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}
.better-claim-options {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}
.better-claim-options > div {
    padding: 12px;
    border-radius: 12px;
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.14);
}
.better-claim-options span {
    display: block;
    margin-bottom: 6px;
    color: #D7CCFF;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}
.better-claim-options strong {
    display: block;
    font-size: 14px;
    line-height: 1.35;
}
.better-claims-grid > div {
    padding: 14px;
    border-radius: 12px;
    background: rgba(255,255,255,0.09);
    border: 1px solid rgba(255,255,255,0.12);
}
.claim-better-claims h4 {
    color: #D7CCFF;
}
.claim-better-claims p {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.5;
}
.claim-evidence,
.claim-refs {
    margin-top: 14px;
}

body.claim-modal-open {
    overflow: hidden;
}
.claim-result-modal {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: grid;
    place-items: center;
    padding: clamp(18px, 3vw, 42px);
}
.claim-result-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(6, 12, 32, 0.58);
    backdrop-filter: blur(10px);
}
.claim-result-dialog {
    position: relative;
    width: min(1180px, 100%);
    max-height: min(86vh, 860px);
    overflow: auto;
    border-radius: 20px;
    background: linear-gradient(135deg, rgba(255,255,255,0.98), rgba(248,250,255,0.96));
    box-shadow: 0 30px 80px rgba(8, 14, 36, 0.34);
    border: 1px solid rgba(255,255,255,0.64);
}
.claim-result-dialog .claim-result-card {
    margin: 0;
    border: 0;
    border-radius: 20px;
    box-shadow: none;
    padding: clamp(18px, 2.4vw, 28px);
}
.claim-result-dialog .claim-result-hero {
    padding: clamp(18px, 2.2vw, 26px);
}
.claim-result-close {
    position: sticky;
    top: 14px;
    float: right;
    z-index: 2;
    margin: 14px 14px -46px 0;
    min-height: 36px;
    border: 1px solid rgba(15, 23, 42, 0.12);
    border-radius: 999px;
    background: #fff;
    color: var(--text);
    padding: 0 14px;
    font-weight: 800;
    cursor: pointer;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.14);
}
.claim-result-close:hover {
    border-color: var(--brand);
    color: var(--brand);
}
.claim-loading .claim-result-icon {
    background: var(--brand);
    font-size: 18px;
    letter-spacing: 0;
}
.claim-loading .claim-result-hero {
    grid-template-columns: 116px minmax(0, 1fr);
    min-height: 140px;
    background: linear-gradient(135deg, #F4FFF8 0%, #FFFFFF 76%);
}
.claim-loading-logo {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 92px;
    height: 92px;
    border-radius: 999px;
    overflow: hidden;
    background: radial-gradient(circle, #F1F7FF 0%, #EAFBF1 78%);
    box-shadow: inset 0 0 0 1px rgba(22, 179, 100, 0.08);
}
.claim-loading-logo img {
    width: 116%;
    height: 116%;
    object-fit: cover;
    object-position: 50% 50%;
    filter: saturate(1.08) contrast(1.04);
}
.claim-loading .claim-result-hero h2 {
    margin-bottom: 8px;
}
.claim-loading .claim-result-hero p {
    color: #17203A;
    font-size: 16px;
}

/* Polished claim review modal */
.claim-result-dialog {
    width: min(1160px, calc(100vw - 32px));
    max-height: min(92vh, 900px);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.98);
}
.claim-result-dialog .claim-result-card {
    padding: clamp(18px, 2.2vw, 28px);
    background: linear-gradient(135deg, #FEFFFC 0%, #FFFFFF 54%, #F7FBFF 100%);
}
.claim-result-card.claim-improve {
    background: linear-gradient(135deg, #FFF4F5 0%, #FFFFFF 52%, #FFF9FA 100%);
}
.claim-result-hero {
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr) minmax(220px, 260px);
    align-items: center;
    gap: 26px;
    padding: 22px 24px;
    border-radius: 8px;
    background: linear-gradient(135deg, #F9FFFB 0%, #FFFFFF 100%);
}
.claim-good .claim-result-hero {
    background: linear-gradient(135deg, #F3FFF7 0%, #FFFFFF 72%);
    color: #0B1220;
}
.claim-improve .claim-result-hero {
    background: linear-gradient(135deg, #FFE9EB 0%, #FFF8F8 74%);
    color: #7A1118;
}
.claim-result-icon {
    position: relative;
    width: 88px;
    height: 88px;
    border-radius: 999px;
    background: #E8F9EF !important;
    color: #13AA55;
}
.claim-result-icon::before {
    content: "";
    width: 48px;
    height: 56px;
    background: currentColor;
    clip-path: polygon(50% 0, 88% 13%, 82% 62%, 50% 100%, 18% 62%, 12% 13%);
}
.claim-result-icon::after {
    content: "";
    position: absolute;
    width: 28px;
    height: 16px;
    border-left: 5px solid #fff;
    border-bottom: 5px solid #fff;
    transform: rotate(-45deg) translate(1px, -2px);
}
.claim-result-icon.alert {
    background: #FCE7E8 !important;
    color: #EF4444;
}
.claim-result-icon.alert::before {
    width: 48px;
    height: 48px;
    border-radius: 999px;
    clip-path: none;
}
.claim-result-icon.alert::after {
    content: "!";
    width: auto;
    height: auto;
    border: 0;
    color: #fff;
    font-size: 42px;
    font-weight: 900;
    transform: none;
}
.claim-hero-copy {
    min-width: 0;
}
.claim-result-kicker {
    color: #10A04E;
    opacity: 1;
    font-size: 12px;
    letter-spacing: 0.7px;
}
.claim-improve .claim-result-kicker {
    color: #9A3412;
}
.claim-result-hero h2 {
    margin: 0 0 10px;
    color: #111831;
    font-size: clamp(27px, 2.5vw, 34px);
    line-height: 1.05;
}
.claim-result-hero p {
    max-width: 720px;
    margin: 0;
    color: #161D36;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.55;
}
.claim-status-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 14px;
}
.claim-mode-pill,
.claim-ai-meta,
.claim-api-meta {
    margin: 0;
    min-height: 28px;
    align-items: center;
    border-radius: 8px;
    background: #ECFDF3;
    color: #07964A;
}
.claim-ai-meta {
    background: #F1F3FA;
    color: #59627A;
}
.claim-api-meta {
    background: #F1F3FA;
    color: #59627A;
}
.claim-risk-meter {
    min-height: 150px;
    padding-left: 30px;
    border-left: 1px solid #E5EAF2;
    color: #111831;
}
.claim-risk-meter div:first-child {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-bottom: 16px;
    font-size: 13px;
    font-weight: 800;
}
.claim-risk-meter strong {
    display: block;
    margin-bottom: 12px;
    color: #10A04E;
    font-size: 26px;
    line-height: 1;
}
.claim-improve .claim-risk-meter strong {
    color: #EF4444;
}
.claim-risk-scale {
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 4px;
    width: 168px;
    margin-bottom: 28px;
}
.claim-risk-scale span {
    height: 7px;
    border-radius: 999px;
}
.claim-risk-scale .green { background: #16B364; }
.claim-risk-scale .yellow { background: #EAB308; }
.claim-risk-scale .orange { background: #F97316; }
.claim-risk-scale .red { background: #DC2626; }
.claim-risk-scale::after {
    content: "";
    position: absolute;
    left: calc(((var(--risk-step, 1) - 1) * 25%) + 10px);
    top: 12px;
    width: 0;
    height: 0;
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-bottom: 9px solid #111831;
}
.claim-risk-scale[data-risk="1"] { --risk-step: 1; }
.claim-risk-scale[data-risk="2"] { --risk-step: 2; }
.claim-risk-scale[data-risk="3"] { --risk-step: 3; }
.claim-risk-scale[data-risk="4"] { --risk-step: 4; }
.claim-risk-meter small {
    color: #59627A;
    font-size: 12px;
    font-weight: 700;
}
.claim-info-dot {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 15px;
    height: 15px;
    border: 1px solid #7E89A3;
    border-radius: 999px;
    color: #667085;
    font-size: 10px;
    font-weight: 900;
}
.claim-info-tooltip {
    position: relative;
    width: 18px;
    height: 18px;
    border-color: #A7B3C9;
    background: #F8FAFF;
    color: #35415D;
    font-size: 11px;
    line-height: 1;
    cursor: help;
}
.claim-info-tooltip::before,
.claim-info-tooltip::after {
    position: absolute;
    left: 50%;
    z-index: 20;
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, 6px);
    transition: opacity 140ms ease, transform 140ms ease;
}
.claim-info-tooltip::before {
    content: attr(data-tooltip);
    bottom: calc(100% + 10px);
    width: min(320px, 70vw);
    padding: 10px 12px;
    border: 1px solid #D9E2F0;
    border-radius: 8px;
    background: #0F172A;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0;
    line-height: 1.35;
    text-align: left;
    text-transform: none;
    box-shadow: 0 14px 30px rgba(15, 23, 42, 0.22);
}
.claim-info-tooltip::after {
    content: "";
    bottom: calc(100% + 4px);
    width: 10px;
    height: 10px;
    background: #0F172A;
    transform: translate(-50%, 6px) rotate(45deg);
}
.claim-info-tooltip:hover::before,
.claim-info-tooltip:hover::after,
.claim-info-tooltip:focus-visible::before,
.claim-info-tooltip:focus-visible::after {
    opacity: 1;
    transform: translate(-50%, 0);
}
.claim-info-tooltip:hover::after,
.claim-info-tooltip:focus-visible::after {
    transform: translate(-50%, 0) rotate(45deg);
}
.claim-result-quote {
    margin: 18px 0;
    border-radius: 8px;
    background: #F8FAFD;
}
.claim-recommended-wording {
    margin: 18px 0;
    padding: 18px 24px 20px !important;
    border: 1px solid #16B364 !important;
    border-radius: 8px !important;
    background: linear-gradient(135deg, #FFFFFF 0%, #FBFFFD 100%) !important;
}
.claim-section-title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 20px;
    color: #17203A;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0.8px;
    text-transform: uppercase;
}
.claim-progress-pill {
    display: inline-flex;
    align-items: center;
    min-height: 22px;
    padding: 3px 9px;
    border-radius: 999px;
    background: #EEF4FF;
    color: var(--brand);
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0;
    text-transform: none;
}
.claim-recommended-main {
    display: grid;
    grid-template-columns: 92px minmax(0, 1fr);
    gap: 22px;
    align-items: center;
    width: 100%;
    padding: 12px;
    border: 1px solid transparent;
    background: transparent;
    font: inherit;
    text-align: left;
    cursor: pointer;
    border-radius: 8px;
}
.claim-recommended-main:focus-visible,
.claim-alternative-option:focus-visible {
    outline: 3px solid rgba(91, 46, 255, 0.24);
    outline-offset: 4px;
}
.claim-wording-option {
    transition: border-color 140ms ease, box-shadow 140ms ease, background 140ms ease, transform 140ms ease;
}
.claim-wording-option:hover {
    transform: translateY(-1px);
}
.claim-recommended-main.is-selected {
    border: 1px solid #16B364;
    background: #F4FFF8;
    box-shadow: 0 12px 30px rgba(22, 179, 100, 0.12);
}
.claim-recommended-pill {
    display: inline-flex;
    width: fit-content;
    margin-bottom: 12px;
    padding: 5px 10px;
    border-radius: 999px;
    background: #DFFBEA;
    color: #0D9B4B;
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
}
.claim-recommended-main h3 {
    margin: 0 0 14px;
    color: #111831;
    font-size: 22px;
}
.claim-recommended-main p {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    color: #087A3D;
    font-size: 13px;
    font-weight: 700;
}
.claim-tick {
    width: 18px;
    height: 18px;
    border: 2px solid #16B364;
    border-radius: 999px;
    position: relative;
}
.claim-tick::after {
    content: "";
    position: absolute;
    left: 4px;
    top: 3px;
    width: 7px;
    height: 4px;
    border-left: 2px solid #16B364;
    border-bottom: 2px solid #16B364;
    transform: rotate(-45deg);
}
.claim-per-claim-refinements {
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid #D8F3E3;
}
.claim-per-claim-refinements h4 {
    margin: 0 0 12px;
    color: #17203A;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: .7px;
    text-transform: uppercase;
}
.claim-per-claim-refinements > div {
    display: grid;
    gap: 12px;
}
.claim-per-claim-refinements article {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    gap: 14px;
    align-items: flex-start;
    padding: 14px;
    border: 1px solid #DCE6F2;
    border-radius: 8px;
    background: #FFFFFF;
}
.claim-per-claim-refinements strong {
    display: block;
    margin: 0 0 4px;
    color: #111831;
    font-size: 15px;
}
.claim-per-claim-refinements small {
    display: block;
    margin-bottom: 8px;
    color: #667085;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
}
.claim-per-claim-refinements p {
    margin: 0 0 10px;
    color: #344054;
    font-size: 13px;
    line-height: 1.45;
}
.claim-per-claim-refinements ul {
    display: grid;
    gap: 6px;
    margin: 0;
    padding-left: 18px;
    color: #111831;
    font-size: 13px;
    line-height: 1.4;
}
.claim-recommended-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid #D8F3E3;
}
.claim-card-symbol {
    position: relative;
    display: inline-flex;
    width: 62px;
    height: 62px;
    border-radius: 999px;
    background: #EAFBF1;
    color: #16B364;
    flex: 0 0 auto;
}
.claim-image-symbol {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    flex: 0 0 auto;
    border-radius: 999px;
    overflow: hidden;
    background: #F4F7FF;
}
.claim-image-symbol.large {
    width: 68px;
    height: 68px;
}
.claim-image-symbol.small {
    width: 42px;
    height: 42px;
}
.claim-image-symbol img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.claim-card-symbol.sparkle::before {
    content: "";
    position: absolute;
    inset: 16px;
    background: currentColor;
    clip-path: polygon(50% 0, 62% 35%, 100% 50%, 62% 65%, 50% 100%, 38% 65%, 0 50%, 38% 35%);
}
.claim-card-symbol.sparkle::after {
    content: "";
    position: absolute;
    right: 13px;
    top: 16px;
    width: 8px;
    height: 8px;
    background: currentColor;
    clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
}
.claim-card-symbol.gut,
.claim-card-symbol.heart,
.claim-card-symbol.document,
.claim-card-symbol.lightbulb {
    width: 48px;
    height: 48px;
    background: #EFF6FF;
    color: #2563EB;
}
.claim-card-symbol.gut::before {
    content: "";
    position: absolute;
    inset: 13px 11px;
    border: 3px solid currentColor;
    border-radius: 12px;
}
.claim-card-symbol.heart::before {
    content: "";
    position: absolute;
    left: 17px;
    top: 16px;
    width: 15px;
    height: 15px;
    border-left: 3px solid currentColor;
    border-bottom: 3px solid currentColor;
    border-radius: 3px;
    transform: rotate(-45deg);
}
.claim-card-symbol.heart::after {
    content: "";
    position: absolute;
    left: 13px;
    top: 14px;
    width: 10px;
    height: 10px;
    border: 3px solid currentColor;
    border-right: 0;
    border-bottom: 0;
    border-radius: 999px 0 0 0;
}
.claim-card-symbol.document {
    background: #E8F9EF;
    color: #16B364;
}
.claim-card-symbol.document::before {
    content: "";
    position: absolute;
    inset: 13px 16px;
    border: 2px solid currentColor;
    border-radius: 2px;
}
.claim-card-symbol.lightbulb {
    width: 34px;
    height: 34px;
    background: #F1EAFF;
    color: var(--primary);
}
.claim-card-symbol.lightbulb::before {
    content: "";
    position: absolute;
    left: 11px;
    top: 8px;
    width: 12px;
    height: 14px;
    border: 2px solid currentColor;
    border-radius: 999px 999px 8px 8px;
}
.claim-alternative-title {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 16px;
    align-items: center;
    margin: 28px 0 18px;
    color: #667085;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0.8px;
    text-transform: uppercase;
}
.claim-alternative-title span {
    height: 1px;
    background: #D8DFEA;
}
.claim-alternative-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}
.claim-alternative-option {
    display: grid;
    grid-template-columns: 22px 56px minmax(0, 1fr);
    gap: 16px;
    align-items: center;
    width: 100%;
    padding: 14px 18px;
    border: 1px solid #E3E9F3;
    border-radius: 8px;
    background: #fff;
    font: inherit;
    text-align: left;
    cursor: pointer;
}
.claim-alternative-option.is-selected {
    border-color: #16B364;
    background: #F4FFF8;
    box-shadow: 0 12px 28px rgba(22, 179, 100, 0.12);
}
.claim-alternative-option.is-selected .claim-radio {
    border-color: #16B364;
    background: #16B364;
    box-shadow: inset 0 0 0 4px #fff;
}
.claim-radio {
    width: 20px;
    height: 20px;
    border: 1.5px solid #9AA6BC;
    border-radius: 999px;
}
.claim-alternative-option strong {
    display: block;
    color: #111831;
    font-size: 15px;
}
.claim-alternative-option small {
    display: block;
    margin-top: 4px;
    color: #344054;
}
.claim-insight-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin-top: 14px;
}
.claim-design-card {
    padding: 18px !important;
    border: 1px solid #E3E9F3 !important;
    border-radius: 8px !important;
    background: #fff !important;
}
.claim-design-card h3 {
    margin: 0 0 18px;
    color: #111831;
    font-size: 17px;
}
.claim-breakdown-modern + .claim-breakdown-modern {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid #EEF2F6;
}
.claim-breakdown-modern strong {
    display: block;
    margin-bottom: 16px;
    color: #111831;
}
.claim-breakdown-modern dl {
    display: grid;
    gap: 12px;
    margin: 0;
}
.claim-breakdown-modern dl div {
    display: grid;
    grid-template-columns: 132px minmax(0, 1fr);
    gap: 12px;
}
.claim-breakdown-modern dt {
    color: #667085;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0.4px;
    text-transform: uppercase;
}
.claim-breakdown-modern dd {
    margin: 0;
    color: #111831;
    font-size: 13px;
    font-weight: 800;
}
.claim-breakdown-modern p {
    margin: 16px 0 0;
    color: #344054;
    line-height: 1.45;
}
.claim-card-note {
    margin: -8px 0 14px;
    color: var(--primary);
    font-weight: 800;
}
.claim-risk-reasons ul {
    display: grid;
    gap: 12px;
    padding: 0;
    list-style: none;
}
.claim-risk-reasons li {
    display: grid;
    grid-template-columns: 20px minmax(0, 1fr);
    gap: 12px;
    color: #111831;
    line-height: 1.45;
}
.claim-risk-reasons li span {
    position: relative;
    width: 18px;
    height: 18px;
    border: 1.8px solid #16B364;
    border-radius: 999px;
}
.claim-risk-reasons li span::after {
    content: "";
    position: absolute;
    left: 4px;
    top: 4px;
    width: 7px;
    height: 4px;
    border-left: 2px solid #16B364;
    border-bottom: 2px solid #16B364;
    transform: rotate(-45deg);
}
.claim-improve .claim-risk-reasons li span {
    border-color: #EF4444;
}
.claim-improve .claim-risk-reasons li span::after {
    display: none;
}
.claim-improve .claim-risk-reasons li span::before {
    content: "!";
    position: absolute;
    inset: -2px 0 0;
    color: #EF4444;
    font-size: 13px;
    font-weight: 900;
    text-align: center;
}
.claim-evidence-modern {
    min-height: 220px;
}
.claim-evidence-modern ul {
    display: grid;
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.claim-evidence-modern li {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 12px;
    align-items: center;
    color: #111831;
    font-size: 15px;
    line-height: 1.35;
}
.claim-evidence-modern li .claim-image-symbol {
    width: 34px;
    height: 34px;
}
.claim-detail-grid {
    margin-top: 14px;
}
.claim-key-considerations {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 14px;
    align-items: start;
}
.claim-key-considerations h4 {
    color: #111831;
    font-size: 14px;
    letter-spacing: 0;
    text-transform: none;
}
.claim-key-considerations ul {
    columns: 2;
}
.claim-disclaimer {
    margin: 14px 0 0;
    padding: 14px 18px;
    border-radius: 8px;
    background: #EEF4FF;
    color: #56627A;
    font-size: 12px;
    line-height: 1.45;
}
.claim-modal-actions {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    margin-top: 14px;
}
.claim-modal-actions .btn {
    min-height: 44px;
}
.claim-launch-product[hidden] {
    display: none !important;
}
.claim-launch-product {
    position: static;
    min-width: 172px;
    min-height: 46px;
    padding: 0 24px;
    border-radius: 999px;
    box-shadow: 0 14px 28px rgba(91, 46, 255, 0.22);
}
.pack-visualise-page {
    background: linear-gradient(135deg, #FFFFFF 0%, #F8FAFF 100%);
}
.pack-visualise-head h2 {
    margin: 0 0 8px;
    color: #08142D;
    font-size: clamp(30px, 3.3vw, 42px);
    line-height: 1.05;
}
.pack-visualise-head p {
    margin: 0 0 18px;
    color: #344054;
    font-size: 15px;
    font-weight: 650;
}
.pack-visualise-layout {
    display: grid;
    grid-template-columns: minmax(260px, 0.82fr) minmax(0, 2.18fr);
    gap: 16px;
}
.pack-selection-panel,
.pack-visuals-panel {
    display: grid;
    gap: 14px;
}
.pack-selection-panel section,
.pack-visuals-panel {
    border: 1px solid #E1E8F3;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 10px 30px rgba(15, 27, 45, 0.05);
}
.pack-selection-panel section {
    padding: 18px;
}
.pack-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
}
.pack-section-head h3,
.pack-visuals-panel h3,
.brand-inspiration-card h3 {
    margin: 0;
    color: #111831;
    font-size: 18px;
}
.pack-selection-panel dl {
    display: grid;
    gap: 16px;
    margin: 0;
}
.pack-selection-panel dt {
    margin-bottom: 6px;
    color: #667085;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .7px;
    text-transform: uppercase;
}
.pack-selection-panel dd {
    margin: 0;
    color: #111831;
    font-weight: 850;
    line-height: 1.4;
}
.brand-inspiration-card h3 span {
    color: #EF4444;
}
.brand-inspiration-card p {
    margin: 8px 0 14px;
    color: #475467;
    line-height: 1.35;
}
.brand-inspiration-card label {
    display: grid;
    gap: 7px;
    margin-bottom: 12px;
}
.brand-inspiration-card label span {
    color: #17203A;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .6px;
    text-transform: uppercase;
}
.brand-inspiration-card input,
.brand-inspiration-card select,
.brand-inspiration-card textarea {
    width: 100%;
    border: 1px solid #D9E2EE;
    border-radius: 8px;
    background: #fff;
    color: #111831;
    font: inherit;
}
.brand-inspiration-card input,
.brand-inspiration-card select {
    min-height: 40px;
    padding: 0 12px;
}
.brand-inspiration-card input[type="color"] {
    width: 100%;
    padding: 4px;
}
.brand-inspiration-card textarea {
    min-height: 88px;
    padding: 10px 12px;
    resize: vertical;
}
.brand-inspiration-card input:focus,
.brand-inspiration-card select:focus,
.brand-inspiration-card textarea:focus {
    border-color: var(--brand);
    box-shadow: 0 0 0 3px rgba(91, 46, 255, .12);
    outline: none;
}
.brand-upload-placeholder {
    display: grid;
    place-items: center;
    gap: 6px;
    min-height: 126px;
    border: 1.5px dashed #A98BFF;
    border-radius: 10px;
    background: #FCFAFF;
    color: var(--brand);
    text-align: center;
}
.brand-upload-placeholder span {
    color: var(--brand);
    font-size: 30px;
    line-height: 1;
}
.brand-upload-placeholder strong {
    color: var(--brand);
}
.brand-upload-placeholder small {
    color: #667085;
}
.brand-inspiration-card [data-save-brand-profile] {
    width: 100%;
    margin-top: 12px;
}
.brand-profile-status {
    min-height: 18px;
    margin: 10px 0 0 !important;
    color: #067647 !important;
    font-size: 12px;
    font-weight: 800;
}
.brand-profile-status[data-tone="error"] {
    color: #B42318 !important;
}
.pack-visuals-panel {
    padding: 22px;
}
.pack-visuals-panel > div:first-child p {
    margin: 8px 0 18px;
    color: #475467;
}
.pack-visual-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}
.pack-visual-grid article {
    overflow: hidden;
    border: 1px solid #E1E8F3;
    border-radius: 10px;
    background: #fff;
}
.pack-visual-placeholder {
    display: grid;
    place-items: center;
    min-height: clamp(280px, 39vh, 450px);
    padding: 24px;
    background: linear-gradient(135deg, #F8FAFF 0%, #FFFFFF 52%, #F4F0FF 100%);
}
.pack-visual-placeholder > div {
    display: grid;
    justify-items: center;
    gap: 8px;
    max-width: 230px;
    color: #475467;
    text-align: center;
}
.pack-visual-placeholder strong,
.pack-visual-placeholder span {
    display: block;
}
.pack-visual-placeholder strong {
    color: #111831;
    font-size: 15px;
    font-weight: 900;
}
.pack-visual-placeholder span {
    width: max-content;
    padding: 6px 12px;
    border-radius: 999px;
    background: #EFE7FF;
    color: #5B2EFF;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: .04em;
    text-transform: uppercase;
}
.pack-visual-placeholder p {
    margin: 0;
    color: #667085;
    font-size: 13px;
    line-height: 1.4;
}
.pack-visual-copy {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 12px;
    align-items: center;
    padding: 16px;
}
.pack-visual-copy > span {
    width: 38px;
    height: 38px;
    border-radius: 9px;
    background: #F1EAFF;
}
.pack-visual-copy strong,
.pack-visual-copy small {
    display: block;
}
.pack-visual-copy strong {
    color: #111831;
    font-size: 15px;
}
.pack-visual-copy small {
    margin-top: 4px;
    color: #475467;
    line-height: 1.35;
}
.pack-visual-actions {
    display: flex;
    justify-content: flex-end;
    gap: 14px;
    margin-top: 24px;
}
.pack-visual-actions .btn {
    min-height: 52px;
    min-width: 210px;
}
.claim-product-launched {
    background: linear-gradient(135deg, #FFFFFF 0%, #F8FBFF 100%);
}
.claim-launched-hero {
    display: grid;
    grid-template-columns: 82px minmax(0, 1fr);
    gap: 18px;
    align-items: center;
    padding: 22px;
    border: 1px solid #DFF3E8;
    border-radius: 12px;
    background: linear-gradient(135deg, #F2FFF8 0%, #FFFFFF 100%);
}
.claim-launched-hero h2 {
    margin: 0 0 8px;
    color: #08142D;
    font-size: clamp(28px, 3vw, 40px);
    line-height: 1.05;
}
.claim-launched-hero p {
    margin: 0;
    color: #46536C;
    font-size: 15px;
}
.claim-launched-icon {
    display: grid;
    place-items: center;
    width: 68px;
    height: 68px;
    border-radius: 999px;
    background: #E8FFF0;
}
.claim-launched-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(280px, 0.9fr);
    gap: 16px;
    margin-top: 16px;
}
.claim-launched-summary,
.claim-generated-image-slot {
    border: 1px solid #E1E8F3;
    border-radius: 12px;
    background: #fff;
}
.claim-launched-summary {
    padding: 20px;
}
.claim-launched-summary h3 {
    margin: 0 0 16px;
    color: #111831;
    font-size: 18px;
}
.claim-launched-summary dl {
    display: grid;
    gap: 12px;
    margin: 0;
}
.claim-launch-claim-summary {
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid #EEF2F6;
}
.claim-launch-claim-summary h4 {
    margin: 0 0 12px;
    color: #17203A;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: .7px;
    text-transform: uppercase;
}
.claim-launch-claim-summary article {
    padding: 12px;
    border: 1px solid #E3E9F3;
    border-radius: 8px;
    background: #FFFFFF;
}
.claim-launch-claim-summary article + article {
    margin-top: 10px;
}
.claim-launch-claim-summary span {
    display: block;
    margin-bottom: 6px;
    color: #667085;
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
}
.claim-launch-claim-summary strong,
.claim-launch-claim-summary small {
    display: block;
}
.claim-launch-claim-summary strong {
    color: #111831;
    font-size: 14px;
}
.claim-launch-claim-summary small {
    margin-top: 4px;
    color: #667085;
    font-size: 12px;
}
.claim-launched-summary dl div {
    display: grid;
    grid-template-columns: 150px minmax(0, 1fr);
    gap: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid #EEF2F6;
}
.claim-launched-summary dl div:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}
.claim-launched-summary dt {
    color: #667085;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0.4px;
    text-transform: uppercase;
}
.claim-launched-summary dd {
    margin: 0;
    color: #111831;
    font-weight: 800;
    line-height: 1.35;
}
.claim-generated-image-slot {
    display: grid;
    min-height: 320px;
    padding: 18px;
    background:
        linear-gradient(135deg, rgba(91, 46, 255, 0.06), rgba(22, 179, 100, 0.04)),
        repeating-linear-gradient(45deg, #F8FAFD 0, #F8FAFD 10px, #F1F5FA 10px, #F1F5FA 20px);
}
.claim-generated-image-slot > div {
    display: grid;
    place-items: center;
    align-content: center;
    gap: 10px;
    border: 1px dashed #B8C4D8;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.78);
    color: #526078;
    text-align: center;
}
.claim-generated-image-slot span {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    background: #F1EAFF;
    position: relative;
}
.claim-generated-image-slot span::before,
.claim-generated-image-slot span::after {
    content: "";
    position: absolute;
    border-radius: 4px;
    border: 2px solid #5B2EFF;
}
.claim-generated-image-slot span::before {
    inset: 14px 12px 12px;
}
.claim-generated-image-slot span::after {
    left: 18px;
    top: 18px;
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: #5B2EFF;
}
.claim-generated-image-slot strong {
    color: #111831;
    font-size: 16px;
}
.claim-generated-image-slot p {
    max-width: 230px;
    margin: 0;
    color: #667085;
    line-height: 1.4;
}
@media (max-width: 900px) {
    .claim-result-hero {
        grid-template-columns: 72px minmax(0, 1fr);
    }
    .claim-risk-meter {
        grid-column: 1 / -1;
        min-height: 0;
        padding: 16px 0 0;
        border-left: 0;
        border-top: 1px solid #E5EAF2;
    }
    .claim-result-icon {
        width: 68px;
        height: 68px;
    }
    .claim-result-icon::before {
        width: 38px;
        height: 44px;
    }
    .claim-result-hero h2 {
        font-size: 25px;
    }
    .claim-recommended-main,
    .claim-insight-grid,
    .claim-alternative-grid,
    .claim-suggestion-grid,
    .claim-launched-layout,
    .pack-visualise-layout,
    .pack-visual-grid {
        grid-template-columns: 1fr;
    }
    .pack-visual-actions {
        flex-direction: column;
    }
    .pack-visual-actions .btn {
        width: 100%;
    }
    .claim-launched-hero {
        grid-template-columns: 1fr;
        text-align: center;
    }
    .claim-launched-icon {
        margin: 0 auto;
    }
    .claim-launched-summary dl div {
        grid-template-columns: 1fr;
        gap: 4px;
    }
    .claim-generated-image-slot {
        min-height: 240px;
    }
    .claim-launch-product {
        width: 100%;
        min-width: 170px;
    }
    .claim-key-considerations ul {
        columns: 1;
    }
}

/* Claim modal fit refinement: keep the new design compact in laptop viewports. */
.claim-result-dialog {
    width: min(1060px, calc(100vw - 64px));
    max-height: min(90vh, 820px);
}
.claim-result-dialog .claim-result-card {
    padding: clamp(16px, 1.8vw, 24px);
}
.claim-result-dialog .claim-result-hero {
    grid-template-columns: 78px minmax(0, 1fr) minmax(190px, 230px);
    gap: 20px;
    padding: 18px 20px;
}
.claim-result-icon {
    width: 62px;
    height: 62px;
}
.claim-result-icon::before {
    width: 34px;
    height: 40px;
}
.claim-result-icon::after {
    width: 20px;
    height: 12px;
    border-left-width: 4px;
    border-bottom-width: 4px;
}
.claim-result-icon.alert::before {
    width: 38px;
    height: 38px;
}
.claim-result-icon.alert::after {
    font-size: 32px;
}
.claim-result-hero h2 {
    max-width: 620px;
    margin-bottom: 8px;
    font-size: clamp(24px, 2vw, 30px);
    line-height: 1.08;
}
.claim-result-hero p {
    max-width: 650px;
    font-size: 14px;
    line-height: 1.45;
}
.claim-result-kicker {
    margin-bottom: 5px;
    font-size: 11px;
}
.claim-status-row {
    gap: 6px;
    margin-top: 12px;
}
.claim-mode-pill,
.claim-ai-meta,
.claim-api-meta {
    min-height: 24px;
    padding: 5px 9px;
    font-size: 11px;
    line-height: 1.2;
}
.claim-ai-meta,
.claim-api-meta {
    max-width: 100%;
}
.claim-risk-meter {
    min-height: 118px;
    padding-left: 24px;
}
.claim-risk-meter div:first-child {
    margin-bottom: 12px;
    font-size: 12px;
}
.claim-risk-meter strong {
    margin-bottom: 10px;
    font-size: 23px;
}
.claim-risk-scale {
    width: 150px;
    margin-bottom: 24px;
}
.claim-result-quote {
    margin: 14px 0;
    padding: 10px 13px;
    font-size: 15px;
}
.claim-recommended-wording {
    margin: 14px 0;
    padding: 16px 20px 18px !important;
}
.claim-section-title {
    margin-bottom: 16px;
}
.claim-recommended-main {
    grid-template-columns: 72px minmax(0, 1fr);
    gap: 18px;
}
.claim-card-symbol {
    width: 52px;
    height: 52px;
}
.claim-card-symbol.sparkle::before {
    inset: 14px;
}
.claim-recommended-main h3 {
    margin-bottom: 10px;
    font-size: 20px;
}
.claim-alternative-title {
    margin: 22px 0 14px;
}
.claim-alternative-grid {
    gap: 12px;
}
.claim-alternative-option {
    grid-template-columns: 20px 44px minmax(0, 1fr);
    gap: 12px;
    padding: 12px 14px;
}
.claim-alternative-option .claim-card-symbol,
.claim-alternative-option .claim-image-symbol {
    width: 42px;
    height: 42px;
}
.claim-alternative-option strong {
    font-size: 14px;
    line-height: 1.25;
}
.claim-alternative-option small {
    font-size: 11px;
}
.claim-design-card {
    padding: 16px !important;
}
.claim-design-card h3 {
    margin-bottom: 14px;
    font-size: 16px;
}
.claim-breakdown-modern dl {
    gap: 9px;
}
.claim-breakdown-modern strong {
    margin-bottom: 12px;
}
.claim-result-close {
    top: 12px;
    margin: 12px 12px -42px 0;
}
@media (max-width: 1180px) {
    .claim-result-dialog {
        width: min(960px, calc(100vw - 48px));
    }
    .claim-result-dialog .claim-result-hero {
        grid-template-columns: 66px minmax(0, 1fr) 180px;
        gap: 16px;
    }
    .claim-result-icon {
        width: 54px;
        height: 54px;
    }
    .claim-result-hero h2 {
        font-size: 25px;
    }
    .claim-risk-scale {
        width: 132px;
    }
}

@media (max-width: 640px) {
    body.claim-modal-open {
        overflow: hidden;
    }
    .claim-result-modal {
        align-items: stretch;
        padding: 0;
    }
    .claim-result-dialog {
        width: 100vw;
        max-height: 100dvh;
        border-radius: 0;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
    .claim-result-dialog .claim-result-card {
        gap: 12px;
        min-height: 100dvh;
        padding: 12px;
        border-radius: 0;
    }
    .claim-result-close {
        position: sticky;
        top: 10px;
        z-index: 5;
        width: max-content;
        min-height: 38px;
        margin: 0 0 -44px auto;
        padding: 0 14px;
        border-radius: 999px;
        box-shadow: 0 10px 24px rgba(16, 24, 40, .12);
    }
    .claim-result-dialog .claim-result-hero {
        grid-template-columns: 44px minmax(0, 1fr);
        gap: 12px;
        padding: 14px;
        border-radius: 14px;
    }
    .claim-result-icon {
        width: 44px;
        height: 44px;
    }
    .claim-result-icon::before {
        width: 25px;
        height: 30px;
    }
    .claim-result-icon::after {
        width: 15px;
        height: 9px;
        border-left-width: 3px;
        border-bottom-width: 3px;
    }
    .claim-result-icon.alert::before {
        width: 28px;
        height: 28px;
    }
    .claim-result-icon.alert::after {
        font-size: 24px;
    }
    .claim-result-kicker {
        padding-right: 48px;
        font-size: 10px;
        line-height: 1.3;
    }
    .claim-result-hero h2 {
        margin-bottom: 7px;
        padding-right: 38px;
        font-size: 22px;
        line-height: 1.08;
    }
    .claim-result-hero p {
        display: -webkit-box;
        max-width: none;
        overflow: hidden;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 4;
        font-size: 13px;
        line-height: 1.42;
    }
    .claim-risk-meter {
        grid-column: 1 / -1;
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        min-height: 0;
        padding: 10px 0 0;
        border-top: 1px solid #E5EAF2;
        border-left: 0;
    }
    .claim-risk-meter div:first-child {
        margin: 0;
        font-size: 11px;
    }
    .claim-risk-meter strong {
        margin: 0;
        font-size: 20px;
        text-align: right;
    }
    .claim-risk-scale {
        grid-column: 1 / -1;
        width: 100%;
        max-width: none;
        margin: 10px 0 0;
    }
    .claim-result-quote {
        margin: 0;
        padding: 9px 11px;
        border-radius: 10px;
        font-size: 13px;
    }
    .claim-recommended-wording {
        margin: 0;
        padding: 13px !important;
        border-radius: 14px;
    }
    .claim-section-title {
        gap: 8px;
        margin-bottom: 12px;
        font-size: 11px;
        line-height: 1.3;
    }
    .claim-progress-pill {
        margin-left: 0;
    }
    .claim-recommended-main {
        grid-template-columns: 44px minmax(0, 1fr);
        gap: 12px;
        padding: 12px;
        border-radius: 12px;
    }
    .claim-card-symbol {
        width: 42px;
        height: 42px;
    }
    .claim-recommended-pill {
        margin-bottom: 6px;
        padding: 4px 8px;
        font-size: 10px;
    }
    .claim-recommended-main h3 {
        margin-bottom: 7px;
        font-size: 17px;
        line-height: 1.2;
    }
    .claim-recommended-main p {
        font-size: 12px;
        line-height: 1.35;
    }
    .claim-alternative-title {
        margin: 14px 0 10px;
        font-size: 10px;
    }
    .claim-alternative-grid {
        grid-template-columns: 1fr;
        gap: 9px;
    }
    .claim-alternative-option {
        grid-template-columns: 18px 36px minmax(0, 1fr);
        gap: 10px;
        padding: 10px;
        border-radius: 10px;
    }
    .claim-alternative-option .claim-card-symbol,
    .claim-alternative-option .claim-image-symbol {
        width: 34px;
        height: 34px;
    }
    .claim-recommended-actions {
        margin-top: 12px;
    }
    .claim-recommended-actions .btn,
    .claim-modal-actions .btn {
        width: 100%;
        min-width: 0;
    }
    .claim-breakdown-card,
    .claim-insight-grid {
        margin-top: 0;
    }
    .claim-insight-grid {
        grid-template-columns: 1fr;
        gap: 10px;
    }
    .claim-design-card {
        padding: 13px !important;
        border-radius: 12px;
    }
    .claim-design-card h3 {
        position: relative;
        margin-bottom: 10px;
        padding-right: 28px;
        font-size: 15px;
    }
    .claim-mobile-collapsible h3 {
        cursor: pointer;
    }
    .claim-mobile-collapsible h3::after {
        content: "+";
        position: absolute;
        top: 50%;
        right: 0;
        display: grid;
        place-items: center;
        width: 22px;
        height: 22px;
        border: 1px solid #D9E2EE;
        border-radius: 999px;
        color: #5B2EFF;
        font-size: 16px;
        line-height: 1;
        transform: translateY(-50%);
    }
    .claim-mobile-collapsible.is-open h3::after {
        content: "-";
    }
    .claim-mobile-collapsible:not(.is-open) h3 {
        margin-bottom: 0;
    }
    .claim-mobile-collapsible:not(.is-open) > :not(h3) {
        display: none !important;
    }
    .claim-breakdown-modern {
        padding: 0;
    }
    .claim-breakdown-modern + .claim-breakdown-modern {
        margin-top: 12px;
        padding-top: 12px;
    }
    .claim-breakdown-modern dl {
        grid-template-columns: 1fr;
        gap: 8px;
    }
    .claim-breakdown-modern dl div {
        grid-template-columns: 96px minmax(0, 1fr);
        gap: 8px;
    }
    .claim-breakdown-modern p,
    .claim-risk-reasons li,
    .claim-evidence-modern li {
        font-size: 13px;
        line-height: 1.4;
    }
    .claim-evidence-modern ul,
    .claim-risk-reasons ul {
        gap: 10px;
    }
    .claim-disclaimer {
        margin: 0;
        font-size: 12px;
        line-height: 1.4;
    }
    .claim-modal-actions {
        position: sticky;
        bottom: 0;
        display: grid;
        grid-template-columns: 1fr;
        gap: 8px;
        margin: 0 -12px -12px;
        padding: 10px 12px 12px;
        border-top: 1px solid #E5EAF2;
        background: rgba(255, 255, 255, .96);
        backdrop-filter: blur(12px);
    }
}

/* AI sections */
.ai-section {
    margin-top: 22px !important;
    padding-top: 18px;
    border-top: 1px dashed var(--panel-border);
}
.ai-badge {
    display: inline-flex;
    align-items: center;
    background: linear-gradient(135deg, #5B2EFF, #1A0F66);
    color: #fff;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.6px;
    padding: 2px 6px;
    border-radius: 4px;
    margin-right: 4px;
    vertical-align: 1px;
}
.ai-rewrite {
    margin-top: 6px;
    padding: 12px 14px;
    background: linear-gradient(135deg, #F8F5FF 0%, #FFFFFF 100%);
    border: 1px solid #E5DBFF;
    border-radius: 10px;
}
.ai-summary {
    font-size: 12px;
    color: var(--text-soft);
    margin-top: 6px;
    padding: 8px 10px;
    background: #F8F5FF;
    border-left: 3px solid var(--brand);
    border-radius: 4px;
}
.ai-empty {
    font-size: 12px; color: var(--text-muted);
    margin-top: 8px; padding: 8px 12px;
    background: #FAFBFD; border-radius: 6px;
}

/* Flash */
.flash {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 16px;
    border-radius: 10px;
    margin-bottom: 16px;
    font-size: 13px;
}
.flash.success { background: var(--green-soft); color: #0E6E3F; }
.flash.error { background: var(--red-soft); color: #962E31; }
.flash-dismiss {
    width: 24px;
    height: 24px;
    flex: 0 0 24px;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: currentColor;
    cursor: pointer;
    font-size: 18px;
    font-weight: 800;
    line-height: 1;
}
.flash-dismiss:hover {
    background: rgba(15, 23, 42, 0.08);
}

/* Onboarding */
.onboarding-modal {
    position: fixed;
    inset: 0;
    z-index: 8000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}
.onboarding-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(8, 13, 29, 0.64);
    backdrop-filter: blur(6px);
}
.onboarding-panel {
    position: relative;
    z-index: 1;
    width: min(860px, 100%);
    max-height: min(860px, calc(100vh - 48px));
    overflow: auto;
    border: 1px solid #E8EDF4;
    border-radius: 16px;
    background: #FFFFFF;
    box-shadow: 0 28px 70px rgba(15, 23, 42, 0.24);
}
.onboarding-head {
    padding: 28px 30px 18px;
    border-bottom: 1px solid #EEF2F7;
}
.onboarding-head span {
    color: var(--brand);
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
}
.onboarding-head h2 {
    margin: 8px 0 6px;
    color: #07111F;
    font-size: 24px;
    line-height: 1.15;
}
.onboarding-head p {
    margin: 0;
    color: #5F6B7A;
    font-size: 13px;
    line-height: 1.45;
}
.onboarding-form {
    display: grid;
    gap: 18px;
    padding: 24px 30px 30px;
}
.onboarding-field > label {
    display: block;
    margin-bottom: 10px;
    color: #111827;
    font-size: 13px;
    font-weight: 800;
}
.onboarding-field p {
    margin: -4px 0 10px;
    color: #667085;
    font-size: 12px;
}
.onboarding-options {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}
.onboarding-options.compact {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}
.onboarding-options label,
.onboarding-chips label {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    min-width: 0;
    border: 1px solid #E2E8F0;
    background: #FFFFFF;
    color: #344054;
    font-size: 13px;
    font-weight: 700;
}
.onboarding-options label {
    padding: 10px 11px;
    border-radius: 8px;
}
.onboarding-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}
.onboarding-chips label {
    padding: 8px 10px;
    border-radius: 999px;
    font-size: 12px;
}
.onboarding-options input,
.onboarding-chips input {
    width: auto;
    margin-top: 1px;
    flex: 0 0 auto;
}
.onboarding-form textarea {
    width: 100%;
    min-height: 84px;
    resize: vertical;
    border: 1px solid #E2E8F0;
    border-radius: 8px;
    padding: 12px;
    color: #111827;
    font: inherit;
}
.onboarding-form textarea:focus {
    border-color: var(--brand);
    outline: 2px solid rgba(91, 46, 255, 0.16);
}
.onboarding-actions {
    display: flex;
    justify-content: flex-end;
    padding-top: 4px;
}
.onboarding-actions .btn {
    min-width: 150px;
    justify-content: center;
}
@media (max-width: 720px) {
    .onboarding-modal {
        align-items: stretch;
        padding: 12px;
    }
    .onboarding-panel {
        max-height: calc(100vh - 24px);
        max-height: calc(100dvh - 24px);
        border-radius: 12px;
    }
    .onboarding-head {
        padding: 22px 18px 14px;
    }
    .onboarding-head h2 {
        font-size: 21px;
    }
    .onboarding-form {
        gap: 16px;
        padding: 18px;
    }
    .onboarding-options,
    .onboarding-options.compact {
        grid-template-columns: 1fr;
    }
    .onboarding-actions {
        justify-content: stretch;
    }
    .onboarding-actions .btn {
        width: 100%;
    }
}

/* Competitor cards */
.comp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; }
.comp-card { background: #fff; border: 1px solid var(--panel-border); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); display: flex; flex-direction: column; }
.comp-card .img { height: 180px; background: #F5F7FB; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.comp-card .img img { width: 100%; height: 100%; object-fit: cover; }
.comp-card .img.empty { color: var(--text-muted); font-size: 12px; }
.comp-card .body { padding: 14px; flex: 1; display: flex; flex-direction: column; }
.comp-card .brand { font-size: 11px; color: var(--text-soft); text-transform: uppercase; letter-spacing: 0.5px; }
.comp-card .name { font-weight: 700; font-size: 14px; margin: 4px 0 8px; }
.comp-card .ing { font-size: 11px; color: var(--text-soft); flex: 1; line-height: 1.5; }
.comp-card .chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 10px; }
.comp-card .chips .chip { background: var(--purple-soft); color: var(--brand); font-size: 10px; padding: 2px 7px; border-radius: 99px; font-weight: 600; }
.comp-card .footer { padding: 10px 14px; background: #FAFBFD; font-size: 11px; display: flex; justify-content: space-between; align-items: center; }

/* FSANZ table */
.signal-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.signal-table th { padding: 10px; text-align: left; font-size: 11px; color: var(--text-soft); text-transform: uppercase; letter-spacing: 0.5px; border-bottom: 1px solid var(--panel-border); }
.signal-table td { padding: 14px 10px; border-bottom: 1px solid var(--panel-border); vertical-align: top; }
.signal-table tr:hover { background: #F8FAFD; }

.filter-bar { display: flex; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; }
.filter-bar a {
    padding: 6px 14px; background: #fff; border: 1px solid var(--panel-border);
    border-radius: 99px; font-size: 13px; color: var(--text); font-weight: 600;
}
.filter-bar a.active { background: var(--brand); color: #fff; border-color: var(--brand); }
.filter-bar a:hover { text-decoration: none; }

/* Tech spec sheet */
.spec-grid { display: grid; grid-template-columns: 320px 1fr; gap: 24px; align-items: start; }
.spec-img { background: #fff; border: 1px solid var(--panel-border); border-radius: var(--radius); padding: 8px; }
.spec-img img, .spec-img object { width: 100%; display: block; border-radius: 10px; }
.spec-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.spec-table th { text-align: left; padding: 10px 12px; background: #F8FAFD; font-weight: 600; font-size: 11px; color: var(--text-soft); text-transform: uppercase; letter-spacing: 0.5px; width: 40%; }
.spec-table td { padding: 10px 12px; border-bottom: 1px solid var(--panel-border); }

/* Tiny utils */
.muted { color: var(--text-soft); }
.center { text-align: center; }
.empty-state { padding: 40px 20px; text-align: center; color: var(--text-soft); }
.empty-state .big { font-size: 16px; margin-bottom: 4px; color: var(--text); }

.settings-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    max-width: 980px;
}
.settings-card {
    background: var(--panel);
    border: 1px solid var(--panel-border);
    border-radius: 12px;
    padding: 18px;
    min-height: 170px;
    display: grid;
    grid-template-columns: 42px 1fr;
    gap: 14px;
    align-items: start;
    box-shadow: var(--shadow);
}
.settings-card h3 {
    margin: 0 0 6px;
    font-size: 16px;
}
.settings-card p {
    margin: 0;
    color: var(--text-soft);
    line-height: 1.5;
}
.settings-card .btn {
    grid-column: 2;
    justify-self: start;
    margin-top: 4px;
}
.settings-icon {
    width: 42px;
    height: 42px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #5B2EFF;
    background: #F0ECFF;
}
.settings-card-muted {
    background: linear-gradient(135deg, #F8F5FF 0%, #FFFFFF 100%);
    border-color: #E5DBFF;
}

/* Responsive */
@media (max-width: 1280px) {
    .kpi-row { grid-template-columns: repeat(2, 1fr); }
    .grid-3, .grid-3-equal { grid-template-columns: 1fr 1fr; }
    .help-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 880px) {
    .app { grid-template-columns: 1fr; }
    .sidebar { flex-direction: row; flex-wrap: wrap; padding: 16px; }
    .sidebar .brand { border-bottom: none; padding: 0; margin-bottom: 0; flex: 0 0 100%; }
    .nav { display: flex; gap: 4px; flex-wrap: wrap; flex-direction: row; }
    .nav li a, .nav li .nav-disabled { padding: 6px 10px; }
    .nav .nav-divider, .nav .nav-spacer { display: none; }
    .nav .nav-settings { border-top: none; padding-top: 6px; margin-top: 0; }
    .consult-card, .user-block { display: none; }
    .topbar { flex-wrap: wrap; margin-bottom: 18px; }
    .page-head {
        min-height: 0;
        margin: 0 0 18px;
        padding-right: 0;
    }
    .kpi-row { grid-template-columns: 1fr 1fr; }
    .grid-3, .grid-3-equal, .grid-2 { grid-template-columns: 1fr; }
    .settings-grid { grid-template-columns: 1fr; }
    .spec-grid { grid-template-columns: 1fr; }
    .form-card .row { grid-template-columns: 1fr; }
    .builder-prompt h1 { font-size: 32px; }
    .builder-start-card,
    .builder-start-steps { width: 100%; }
    .builder-start-steps { grid-template-columns: 1fr; }
    .builder-step::before,
    .builder-step::after { display: none; }
    .builder-enter { width: 100%; }
    .builder-flow-head { flex-direction: column; }
    .packaging-flow-grid { grid-template-columns: 1fr; }
    .builder-selected-pack { grid-template-columns: 1fr; }
    .packaging-preview-card,
    .builder-claim-step { padding: 18px; }
    .selected-pack-preview,
    .builder-claim-step { min-height: auto; }
    .selected-pack-preview .pack-photo-stage { height: 420px; }
    .builder-claim-head { flex-direction: column; }
    .serving-size-row,
    .food-weight-row,
    .placement-options,
    .premium-analysis-row { grid-template-columns: 1fr; }
    .preview-tooltip {
        left: 0;
        width: min(260px, 82vw);
        transform: none;
    }
    .preview-info:hover .preview-tooltip,
    .preview-info:focus .preview-tooltip {
        transform: translateY(2px);
    }
    .builder-form-grid,
    .builder-recent-list { grid-template-columns: 1fr; }
    .claim-suggestion-grid { grid-template-columns: 1fr; }
    .better-claims-grid { grid-template-columns: 1fr; }
    .better-claim-options { grid-template-columns: 1fr; }
    .topbar .account-text { display: none; }
    .workflow { flex-wrap: wrap; }
}

/* ---------- Top bar (notifications + account) ---------- */
.topbar {
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
    gap: 12px;
    min-height: 50px;
    margin: 0 0 24px;
    position: relative;
}
.topbar .topbar-spacer { flex: 1; }
body.dashboard-fullscreen .topbar { margin-bottom: 12px; gap: 12px; }

.iconbtn {
    width: 38px; height: 38px;
    border-radius: 10px;
    border: 1px solid var(--panel-border);
    background: #fff;
    color: var(--text-soft);
    display: inline-flex; align-items: center; justify-content: center;
    cursor: pointer;
    position: relative;
}
.iconbtn:hover { background: #F8FAFD; color: var(--text); }
.iconbtn-dot {
    position: absolute;
    top: -4px; right: -4px;
    background: var(--red);
    color: #fff;
    font-size: 9px; font-weight: 700;
    line-height: 1;
    padding: 3px 5px;
    border-radius: 10px;
    border: 2px solid #fff;
}

.account-btn {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    min-height: 50px;
    padding: 7px 12px 7px 7px;
    background: #FFFFFF;
    border: 1px solid transparent;
    border-radius: 12px;
    cursor: pointer;
    color: #07111F;
    box-shadow: none;
    transition: background .14s ease, border-color .14s ease, box-shadow .14s ease;
}
.account-btn:hover {
    background: #F8FAFD;
    border-color: var(--panel-border);
    box-shadow: 0 8px 18px rgba(15, 27, 45, 0.06);
}
.account-btn .avatar {
    width: 36px; height: 36px;
    border-radius: 50%;
    background: var(--nav-bg);
    border: 1px solid rgba(255, 255, 255, 0.22);
    color: #fff; font-weight: 800; font-size: 12px;
    display: inline-flex; align-items: center; justify-content: center;
    box-shadow: 0 5px 12px rgba(14, 20, 48, 0.16);
}
.account-btn .avatar.lg { width: 46px; height: 46px; font-size: 14px; }
.avatar.has-image {
    padding: 0;
    overflow: hidden;
    background: #fff !important;
    border-color: rgba(15, 27, 45, 0.08);
}
.avatar.has-image img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}
.account-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
    min-width: 0;
    line-height: 1.05;
}
.account-name {
    color: inherit;
    font-size: 13px;
    font-weight: 750;
    letter-spacing: -0.01em;
}
.account-org  {
    font-size: 11.5px;
    color: #5F6B7A;
    font-weight: 500;
    line-height: 1.15;
}
.account-chev { color: #5F6B7A; display: inline-flex; }
.account-head .avatar {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: var(--nav-bg);
    color: #fff;
    font-weight: 800;
    font-size: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Dropdown shell */
.dropdown { position: relative; }
.dropdown-panel {
    position: absolute;
    right: 0; top: calc(100% + 8px);
    background: #fff;
    border: 1px solid var(--panel-border);
    border-radius: 12px;
    box-shadow: 0 12px 40px rgba(15, 27, 45, 0.14);
    min-width: 320px;
    max-width: 360px;
    z-index: 50;
    opacity: 0; pointer-events: none;
    transform: translateY(-4px);
    transition: opacity .12s ease, transform .12s ease;
}
.dropdown.open .dropdown-panel {
    opacity: 1; pointer-events: auto; transform: translateY(0);
}
.dropdown-head {
    padding: 14px 16px;
    border-bottom: 1px solid var(--panel-border);
    display: flex; justify-content: space-between; align-items: center;
    font-size: 13px;
}
.dropdown-body { max-height: 360px; overflow-y: auto; padding: 6px 0; }
.dropdown-foot {
    padding: 10px 12px;
    border-top: 1px solid var(--panel-border);
}
.dropdown-empty { padding: 28px 20px; text-align: center; color: var(--text-soft); font-size: 13px; }

.notif-clear {
    background: transparent;
    border: 1px solid var(--panel-border);
    color: var(--text-soft);
    padding: 4px 9px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
}
.notif-clear:hover { background: var(--red-soft); border-color: var(--red); color: var(--red); }

/* --- Full-page notifications feed --- */
.notif-list-full { display: flex; flex-direction: column; }
.notif-row {
    display: grid;
    grid-template-columns: 36px 1fr auto;
    gap: 14px;
    padding: 14px 20px;
    align-items: flex-start;
    border-bottom: 1px solid var(--panel-border);
    background: #fff;
}
.notif-row:last-child { border-bottom: none; }
.notif-row.unseen { background: linear-gradient(90deg, #F8F5FF 0%, #FFFFFF 60%); }
.notif-row:hover { background: #FAFBFD; }
.notif-row.unseen:hover { background: linear-gradient(90deg, #F1EBFF 0%, #FAFBFD 60%); }
.notif-icon {
    width: 36px; height: 36px; border-radius: 10px;
    background: var(--blue-soft); color: var(--blue);
    display: inline-flex; align-items: center; justify-content: center;
}
.notif-icon.purple { background: var(--purple-soft); color: var(--brand); }
.notif-icon.green  { background: var(--green-soft); color: var(--green); }
.notif-icon.red    { background: var(--red-soft); color: var(--red); }
.notif-icon.amber  { background: var(--amber-soft); color: var(--amber); }
.notif-icon.blue   { background: var(--blue-soft); color: var(--blue); }
.notif-row-body { min-width: 0; }
.notif-row-title { font-weight: 600; font-size: 13.5px; display: flex; align-items: center; gap: 6px; }
.notif-row-detail { font-size: 12px; margin-top: 4px; }
.notif-row-meta { text-align: right; flex-shrink: 0; }
.unseen-dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--brand);
    display: inline-block; flex-shrink: 0;
}

.notif {
    display: flex;
    gap: 10px;
    padding: 10px 16px;
    align-items: flex-start;
}
.notif:hover { background: #F8FAFD; }
.notif-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--blue); margin-top: 7px; flex-shrink: 0; }
.notif-dot.high { background: var(--red); }
.notif-dot.medium, .notif-dot.amber { background: var(--amber); }
.notif-dot.low, .notif-dot.green { background: var(--green); }
.notif-title { font-size: 13px; font-weight: 600; }
.notif-sub { font-size: 11px; }

.account-head {
    display: flex; gap: 12px; align-items: center;
    padding: 16px;
    border-bottom: 1px solid var(--panel-border);
}
.account-head .account-name { font-size: 14px; }
.account-head .account-org  { font-size: 12px; }

.dropdown-item {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 16px;
    color: var(--text);
    font-size: 13px;
    text-decoration: none;
}
.dropdown-item:hover { background: #F8FAFD; text-decoration: none; }
.dropdown-item span { display: inline-flex; color: var(--text-soft); }
.dropdown-item.danger { color: var(--red); }
.dropdown-item.danger span { color: var(--red); }

.btn-sm { padding: 7px 10px; font-size: 12px; }

/* ---------- Workflow strip ---------- */
.workflow {
    display: flex;
    align-items: stretch;
    gap: 10px;
    padding: 18px 20px;
    margin-bottom: 16px;
    background: linear-gradient(135deg, #FFFFFF 0%, #F4EFFF 100%);
    border: 1px solid var(--panel-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}
.workflow-step {
    flex: 1;
    display: flex; flex-direction: column; align-items: center;
    text-align: center;
    padding: 6px 4px;
    min-width: 110px;
}
.workflow-icon {
    width: 48px; height: 48px;
    border-radius: 12px;
    background: linear-gradient(135deg, #5B2EFF, #1A0F66);
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 8px;
    box-shadow: 0 6px 16px rgba(91, 46, 255, 0.25);
}
.workflow-step:nth-child(3) .workflow-icon { background: linear-gradient(135deg, #7B5BFF, #3D1AE6); }
.workflow-step:nth-child(5) .workflow-icon { background: linear-gradient(135deg, #9F86FF, #5B2EFF); }
.workflow-step:nth-child(7) .workflow-icon { background: linear-gradient(135deg, #B6A4FF, #7B5BFF); }
.workflow-step:nth-child(9) .workflow-icon { background: linear-gradient(135deg, #1FB364, #0E6E3F); box-shadow: 0 6px 16px rgba(31, 179, 100, 0.3); }
.workflow-label {
    font-weight: 700;
    font-size: 13.5px;
    color: var(--text);
    margin-bottom: 2px;
}
.workflow-blurb {
    font-size: 11px;
    color: var(--text-soft);
    line-height: 1.35;
}
.workflow-arrow {
    flex: 0 0 50px;
    align-self: center;
    color: #B6A4FF;
    margin-top: 18px;
    font-size: 22px;
    text-align: center;
    font-weight: 600;
}

/* ---------- Compact dashboard ---------- */
.workflow-compact {
    padding: 12px 16px;
    margin-bottom: 14px;
}
.workflow-compact .workflow-step { padding: 4px; min-width: 90px; }
.workflow-compact .workflow-icon { width: 40px; height: 40px; margin-bottom: 4px; }
.workflow-compact .workflow-label { font-size: 12px; font-weight: 700; }

.dash-grid {
    display: grid;
    grid-template-columns: 1fr 1.1fr 1fr;
    gap: 14px;
}
.dash-col {
    display: flex; flex-direction: column; gap: 14px;
    min-height: 0;
}
.dash-panel {
    padding: 14px 16px;
    border-radius: 12px;
}
.dash-panel .panel-head { margin-bottom: 10px; }
.dash-panel .panel-head h3 { font-size: 13px; }
.dash-panel.flex-tall { flex: 2; }
.compact-list .row {
    padding: 6px 8px;
    background: transparent;
    border-bottom: 1px solid #F3F4F8;
    border-radius: 0;
}
.compact-list .row:last-child { border-bottom: none; }
.compact-list .row .icon-square { width: 26px; height: 26px; }
.compact-list .row .body .title { font-size: 12px; }
.compact-list .row .body .sub { font-size: 10px; }
.compact-list .row .meta { font-size: 13px; font-weight: 700; }

.compact-table th { padding: 6px 4px; font-size: 10px; }
.compact-table td { padding: 6px 4px; }

/* ---------- FSANZ pagination + signal cards ---------- */
.signal-panel { padding: 0; overflow: hidden; }
.signal-list {
    max-height: calc(100vh - 320px);
    overflow-y: auto;
    padding: 4px 0;
}
.signal-card {
    padding: 14px 20px;
    border-bottom: 1px solid var(--panel-border);
}
.signal-card:last-child { border-bottom: none; }
.signal-card-head {
    display: flex; align-items: center; gap: 8px;
    margin-bottom: 6px;
}
.signal-date {
    font-size: 11px;
    color: var(--text-soft);
    font-weight: 600;
    background: #F1ECFF;
    color: var(--brand);
    padding: 2px 8px;
    border-radius: 6px;
}
.signal-date.muted { background: #F3F4F8; color: var(--text-muted); }
.signal-title {
    display: block; font-weight: 700; font-size: 14px;
    color: var(--text); text-decoration: none; margin-bottom: 6px;
}
.signal-title:hover { color: var(--brand); text-decoration: underline; }
.signal-summary {
    font-size: 12.5px;
    color: var(--text-soft);
    line-height: 1.5;
}
.pager {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 20px;
    border-top: 1px solid var(--panel-border);
    background: #FAFBFD;
}
.pager-controls { display: flex; align-items: center; gap: 12px; }

/* ---------- Delete + button-icon ---------- */
.btn-icon {
    background: transparent; border: 1px solid var(--panel-border);
    width: 30px; height: 30px; border-radius: 8px;
    display: inline-flex; align-items: center; justify-content: center;
    cursor: pointer; color: var(--text-soft);
}
.btn-icon:hover { background: var(--red-soft); color: var(--red); border-color: var(--red); }

/* ---------- Calendar ---------- */
.calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
    background: var(--panel-border);
    padding: 4px;
    border-radius: 12px;
    margin-bottom: 14px;
}
.cal-head {
    background: var(--panel);
    text-align: center;
    padding: 8px;
    font-size: 11px; font-weight: 700;
    color: var(--text-soft); letter-spacing: 0.5px; text-transform: uppercase;
}
.cal-cell {
    background: var(--panel);
    min-height: 90px;
    padding: 6px 8px;
    display: flex; flex-direction: column; gap: 3px;
    overflow: hidden;
}
.cal-cell.empty { background: #F8FAFD; }
.cal-cell.today { background: linear-gradient(135deg, #F8F5FF 0%, #FFFFFF 100%); border: 1px solid var(--brand); }
.cal-day { font-weight: 700; font-size: 13px; color: var(--text); }
.cal-cell.today .cal-day { color: var(--brand); }
.cal-event {
    background: var(--purple-soft); color: var(--brand);
    padding: 3px 6px; border-radius: 4px; font-size: 10px;
    line-height: 1.2; cursor: pointer;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cal-event.amber { background: var(--amber-soft); color: var(--amber); }
.cal-event.green { background: var(--green-soft); color: var(--green); }
.cal-event-title { font-weight: 600; }
.cal-event-sub { display: block; font-weight: 400; opacity: 0.8; }
.cal-more { font-size: 10px; color: var(--text-soft); padding: 0 6px; }

.upcoming-list { display: flex; flex-direction: column; }
.upcoming-row {
    display: grid; grid-template-columns: 50px 1fr auto;
    align-items: center; gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid var(--panel-border);
}
.upcoming-row:last-child { border-bottom: none; }
.upcoming-date {
    background: var(--purple-soft); color: var(--brand);
    border-radius: 6px; padding: 4px; text-align: center;
    font-weight: 700; font-size: 14px; line-height: 1.2;
}
.upcoming-date span { display: block; font-size: 9px; opacity: 0.7; }
.upcoming-title { font-weight: 600; font-size: 13px; }
.upcoming-sub { font-size: 11px; }

/* ---------- Competitor Insights ---------- */
.comp-kpi-row {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 12px;
    margin-bottom: 14px;
}
.comp-kpi {
    background: var(--panel);
    border: 1px solid var(--panel-border);
    border-radius: 12px;
    padding: 14px 16px;
    box-shadow: var(--shadow);
    position: relative;
    overflow: hidden;
}
.comp-kpi::before {
    content: ''; position: absolute; top: 0; left: 0; width: 4px; height: 100%;
    background: var(--c2);
}
.comp-kpi-icon {
    width: 36px; height: 36px; border-radius: 10px;
    background: var(--c1); color: var(--c2);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 18px; margin-bottom: 6px;
}
.comp-kpi-label { font-size: 11px; color: var(--text-soft); margin-bottom: 4px; }
.comp-kpi-value { font-size: 22px; font-weight: 700; line-height: 1.1; }
.comp-kpi-value.comp-kpi-text { font-size: 16px; line-height: 1.3; }
.comp-kpi-delta { font-size: 11px; color: var(--text-muted); margin-top: 4px; }
.comp-kpi-delta .up { color: var(--green); font-weight: 600; }

.comp-grid-2 {
    display: grid;
    grid-template-columns: 2.4fr 1fr;
    gap: 14px;
}
.comp-filter-row {
    display: flex; gap: 8px; flex-wrap: wrap; align-items: center;
}
.comp-filter {
    padding: 8px 10px; border: 1px solid var(--panel-border);
    border-radius: 8px; font-size: 12px; background: #fff;
}
.comp-charts-row {
    display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px;
}

.ws-row {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 8px;
    padding: 10px 0;
    border-bottom: 1px solid var(--panel-border);
}
.ws-row:last-child { border-bottom: none; }
.ws-title { font-weight: 600; font-size: 13px; margin-bottom: 2px; }
.ws-sub { font-size: 11px; }

.ai-insight-banner {
    background: linear-gradient(135deg, #F8F5FF 0%, #FFFFFF 100%);
    border: 1px solid #E5DBFF;
    border-radius: 12px;
    padding: 14px 18px;
    display: flex; align-items: center; gap: 14px;
    box-shadow: var(--shadow);
}
.ai-insight-icon {
    width: 40px; height: 40px; border-radius: 10px;
    background: linear-gradient(135deg, #5B2EFF, #1A0F66);
    color: #fff; display: inline-flex; align-items: center; justify-content: center;
    font-size: 20px;
}

/* ---------- Slim KPI tweaks ---------- */
.kpi { padding: 12px 16px; }
.kpi .icon { width: 38px; height: 38px; border-radius: 9px; }
.kpi .value { font-size: 22px; }

/* ---------- Page-level no-scroll on 1920×1080 ---------- */
@media (min-width: 1600px) and (min-height: 900px) {
    .main { padding-top: 18px; padding-bottom: 18px; }
    .dash-grid { grid-template-rows: 1fr; min-height: 0; }
    .dash-grid .dash-col { max-height: calc(100vh - 360px); }
    .dash-panel { overflow: hidden; }
}

@media (max-width: 1500px) {
    .comp-kpi-row { grid-template-columns: repeat(3, 1fr); }
    .comp-grid-2 { grid-template-columns: 1fr; }
    .comp-charts-row { grid-template-columns: 1fr; }
    .dash-grid { grid-template-columns: 1fr 1fr; }
    .dash-grid-v2 { grid-template-columns: 1fr 1fr; }
    .workflow-cards { grid-template-columns: 1fr 1fr; }
}

/* ========================================================================
   Dashboard v2 — matches the screenshot
======================================================================== */

/* --- Sidebar sections + upgrade card --- */
.nav .nav-section {
    margin: 16px 12px 2px;
    font-size: 10px;
    color: #6F7891;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    font-weight: 700;
}
.nav-upgrade { padding: 0 8px; margin-top: 12px; }
.upgrade-card {
    background:
        linear-gradient(160deg, rgba(91,46,255,0.24), rgba(255,255,255,0.055) 54%),
        rgba(255,255,255,0.035);
    border: 1px solid rgba(255,255,255,0.09);
    border-radius: 12px;
    padding: 14px;
    text-align: center;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.08);
}
.upgrade-icon {
    width: 36px; height: 36px; border-radius: 10px;
    background: linear-gradient(135deg, #5B2EFF, #1A0F66);
    color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    margin-bottom: 8px;
}
.upgrade-title { font-size: 12px; font-weight: 700; color: #fff; margin-bottom: 2px; }
.upgrade-sub   { font-size: 11px; color: #8892A6; margin-bottom: 10px; }
.upgrade-btn {
    display: block;
    background: linear-gradient(135deg, #5B2EFF, #3D1AE6);
    color: #fff;
    text-decoration: none;
    padding: 8px;
    border-radius: 8px;
    font-size: 12px; font-weight: 700;
}
.upgrade-btn:hover { background: linear-gradient(135deg, #6B3FFF, #4D2AF6); text-decoration: none; }

/* --- Personalised greeting --- */
.dash-head h1.dash-greeting {
    font-size: 26px;
    font-weight: 700;
    margin: 0 0 4px;
}
.wave { display: inline-block; transform-origin: 70% 70%; animation: wave 2.6s ease-in-out infinite; }
@keyframes wave {
    0%, 60%, 100% { transform: rotate(0); }
    10%, 30%      { transform: rotate(14deg); }
    20%           { transform: rotate(-8deg); }
}
.btn.big { padding: 11px 18px; font-size: 14px; }

/* --- AI alert banner (with dual CTAs + dismiss) --- */
.alert-banner {
    display: flex; align-items: center; gap: 16px;
    background: linear-gradient(135deg, #F8F5FF 0%, #FFFFFF 100%);
    border: 1px solid #E5DBFF;
    border-radius: 14px;
    padding: 14px 18px;
    margin-bottom: 14px;
    box-shadow: var(--shadow);
    color: var(--text);
}
.alert-icon {
    width: 44px; height: 44px; border-radius: 12px;
    background: linear-gradient(135deg, #5B2EFF, #1A0F66);
    color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.alert-body { flex: 1; min-width: 0; }
.alert-title { font-weight: 700; font-size: 15px; margin-bottom: 2px; }
.alert-sub { color: var(--text-soft); font-size: 12.5px; }
.alert-actions { display: flex; gap: 8px; flex-shrink: 0; }
.alert-btn-secondary {
    background: #fff; color: var(--text);
    border: 1px solid var(--panel-border);
    padding: 8px 14px; border-radius: 8px;
    font-size: 13px; font-weight: 600;
    text-decoration: none;
}
.alert-btn-secondary:hover { background: #F8FAFD; text-decoration: none; }
.alert-btn-primary { padding: 8px 14px; font-size: 13px; }
.alert-close {
    background: transparent; border: none; cursor: pointer;
    width: 28px; height: 28px; border-radius: 6px;
    color: var(--text-muted); font-size: 18px; line-height: 1;
    display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.alert-close:hover { background: rgba(0,0,0,0.04); color: var(--text); }

/* --- Workflow cards (4 clickable) --- */
.workflow-cards {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    margin-bottom: 14px;
}
.wf-card {
    display: flex; align-items: center; gap: 14px;
    background: var(--panel);
    border: 1px solid var(--panel-border);
    border-radius: 14px;
    padding: 16px 18px;
    box-shadow: var(--shadow);
    text-decoration: none; color: var(--text);
    transition: transform .12s ease, box-shadow .12s ease;
}
.wf-card:hover {
    text-decoration: none;
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(15, 27, 45, 0.12);
}
.wf-card.wf-opportunities {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, #FFF8DC 0%, #F6C75B 54%, #E6A93B 100%);
    border-color: #E3B64F;
    color: #2C2107;
    box-shadow: 0 8px 24px rgba(158, 113, 23, 0.18), inset 0 1px 0 rgba(255,255,255,0.55);
}
.wf-card.wf-opportunities::after {
    content: "";
    position: absolute;
    inset: -35% auto auto -10%;
    width: 70%;
    height: 140%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.32), transparent);
    transform: rotate(18deg) translateX(-120%);
    transition: transform .55s ease;
}
.wf-card.wf-opportunities:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 34px rgba(191, 136, 26, 0.32), 0 0 0 1px rgba(246, 199, 91, 0.55);
}
.wf-card.wf-opportunities:hover::after {
    transform: rotate(18deg) translateX(170%);
}
.wf-card.wf-opportunities .wf-icon {
    background: linear-gradient(135deg, #3A2A08, #8B5E12) !important;
    color: #FFE9A6;
}
.wf-card.wf-opportunities .wf-sub {
    color: #5F4710;
    font-weight: 600;
}
.wf-card.wf-opportunities .wf-chev {
    color: #4B3507;
    transition: transform .16s ease, color .16s ease;
}
.wf-card.wf-opportunities:hover .wf-chev {
    transform: translateX(4px);
    color: #1F1604;
}
.wf-reward-badge {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    margin-bottom: 5px;
    padding: 3px 8px;
    border-radius: 999px;
    background: rgba(255,255,255,0.62);
    border: 1px solid rgba(255,255,255,0.78);
    color: #3B2A06;
    font-size: 10px;
    font-weight: 800;
    line-height: 1.2;
    box-shadow: 0 4px 12px rgba(138, 96, 12, 0.14);
    animation: rewardPulse 2.4s ease-in-out infinite;
}
@keyframes rewardPulse {
    0%, 100% { transform: translateY(0); box-shadow: 0 4px 12px rgba(138, 96, 12, 0.14); }
    50% { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(138, 96, 12, 0.24); }
}
.wf-icon {
    width: 44px; height: 44px; border-radius: 12px;
    color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.wf-icon svg { width: 20px; height: 20px; }
.wf-body { flex: 1; min-width: 0; }
.wf-title { font-weight: 700; font-size: 14px; margin-bottom: 2px; }
.wf-sub { font-size: 11.5px; color: var(--text-soft); }
.wf-chev { font-size: 22px; color: var(--text-muted); font-weight: 600; }

/* --- KPI deltas --- */
.dash-kpis .kpi { padding: 14px 18px; }
.dash-kpis .kpi .delta { font-size: 11px; margin-top: 4px; font-weight: 600; }
.dash-kpis .delta-up   { color: var(--green); }
.dash-kpis .delta-down { color: var(--red); }
.dash-kpis .delta-flat { color: var(--text-muted); }

/* --- Dashboard 3-col grid v2 --- */
.dash-grid-v2 {
    display: grid;
    grid-template-columns: 1fr 1.1fr 1.1fr;
    gap: 14px;
}

/* --- FSANZ summary rows (clickable) --- */
.signal-summary-row {
    display: flex; align-items: center; gap: 12px;
    padding: 11px 4px;
    border-bottom: 1px solid #F3F4F8;
    text-decoration: none; color: var(--text);
}
.signal-summary-row:last-child { border-bottom: none; }
.signal-summary-row:hover { background: #F8FAFD; text-decoration: none; }
.signal-summary-row .icon-square { width: 30px; height: 30px; border-radius: 8px; flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center; }
.signal-summary-row .icon-square.blue  { background: var(--blue-soft); color: var(--blue); }
.signal-summary-row .icon-square.amber { background: var(--amber-soft); color: var(--amber); }
.signal-summary-row .icon-square.red   { background: var(--red-soft); color: var(--red); }
.signal-summary-row .body { flex: 1; }
.signal-summary-row .title { font-size: 13px; font-weight: 600; }
.signal-summary-row .meta { font-weight: 700; font-size: 14px; }
.signal-summary-row .chev { font-size: 18px; color: var(--text-muted); margin-left: 4px; }

/* --- Empty state with illustration --- */
.empty-illustrated {
    text-align: center;
    padding: 24px 16px;
}
.empty-art { display: flex; justify-content: center; margin-bottom: 12px; }
.empty-headline { font-size: 15px; font-weight: 700; color: var(--text); margin-bottom: 4px; }
.empty-text { font-size: 12.5px; color: var(--text-soft); max-width: 280px; margin: 0 auto; line-height: 1.5; }

/* --- Live FSANZ Signals (right column) --- */
.live-signals { display: flex; flex-direction: column; }
.live-signal {
    display: flex; align-items: flex-start; gap: 10px;
    padding: 10px 4px;
    border-bottom: 1px solid #F3F4F8;
    text-decoration: none; color: var(--text);
}
.live-signal:last-child { border-bottom: none; }
.live-signal:hover { background: #F8FAFD; text-decoration: none; }
.ls-icon {
    width: 28px; height: 28px; border-radius: 8px;
    background: var(--blue-soft); color: var(--blue);
    display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.ls-icon.red   { background: var(--red-soft); color: var(--red); }
.ls-icon.amber { background: var(--amber-soft); color: var(--amber); }
.ls-icon.blue  { background: var(--blue-soft); color: var(--blue); }
.ls-body { flex: 1; min-width: 0; }
.ls-title { font-size: 12px; font-weight: 600; line-height: 1.35; }
.ls-sub { font-size: 11px; margin-top: 2px; }

/* --- Recent activity v2 --- */
.activity-list-v2 { display: flex; flex-direction: column; }
.activity-row {
    display: flex; align-items: center; gap: 10px;
    padding: 9px 4px;
    border-bottom: 1px solid #F3F4F8;
}
.activity-row:last-child { border-bottom: none; }
.ac-icon {
    width: 28px; height: 28px; border-radius: 8px;
    background: var(--blue-soft); color: var(--blue);
    display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.ac-icon.purple { background: var(--purple-soft); color: var(--brand); }
.ac-icon.green  { background: var(--green-soft); color: var(--green); }
.ac-icon.red    { background: var(--red-soft); color: var(--red); }
.ac-icon.blue   { background: var(--blue-soft); color: var(--blue); }
.ac-body { flex: 1; min-width: 0; }
.ac-title { font-size: 12px; font-weight: 600; }
.ac-sub { font-size: 11px; }

/* --- Deadline date with month-on-top, day-below --- */
.deadline-row .date .m { font-size: 9px; letter-spacing: 1px; opacity: 0.7; margin-bottom: -2px; }
.deadline-row .date .d { font-size: 16px; line-height: 1; }

.view-all-link {
    display: block;
    text-align: center;
    padding: 10px;
    font-size: 12px;
    color: var(--brand);
    font-weight: 600;
    border-top: 1px solid var(--panel-border);
    margin-top: 8px;
}

/* ========================================================================
   Dashboard NO-SCROLL mode — locks the whole dashboard to viewport height
   and lets individual panels scroll internally if they overflow.
======================================================================== */
body.dashboard-fullscreen,
body.dashboard-fullscreen html { height: 100vh; overflow: hidden; }
body.dashboard-fullscreen { background: #EEF7F3; }
body.dashboard-fullscreen .app  { height: 100vh; min-height: 100vh; max-height: 100vh; overflow: hidden; }
body.dashboard-fullscreen .main {
    height: 100vh; max-height: 100vh;
    overflow: hidden;
    padding: 26px 22px 14px;
    display: flex; flex-direction: column;
    gap: 10px;
    background:
        radial-gradient(circle at 15% 0%, rgba(91,46,255,0.08), transparent 32%),
        linear-gradient(180deg, #EEF7F3 0%, #F6F8FC 58%, #F5F7FB 100%);
}
body.dashboard-fullscreen .topbar { margin: 0; flex-shrink: 0; }
body.dashboard-fullscreen .flash { flex-shrink: 0; margin-bottom: 0; }

/* Tighter spacing across the dashboard */
body.dashboard-fullscreen .page-head { margin-bottom: 0; flex-shrink: 0; }
body.dashboard-fullscreen .dash-greeting { font-size: 22px; }
body.dashboard-fullscreen .alert-banner { padding: 10px 14px; margin-bottom: 0; flex-shrink: 0; }
body.dashboard-fullscreen .alert-icon { width: 36px; height: 36px; }
body.dashboard-fullscreen .alert-title { font-size: 13.5px; }
body.dashboard-fullscreen .alert-sub { font-size: 11.5px; }

body.dashboard-fullscreen .workflow-cards { margin-bottom: 0; gap: 10px; flex-shrink: 0; }
body.dashboard-fullscreen .workflow-cards { display: none; }
body.dashboard-fullscreen .wf-card { padding: 11px 14px; gap: 11px; }
body.dashboard-fullscreen .wf-icon { width: 38px; height: 38px; border-radius: 10px; }
body.dashboard-fullscreen .wf-title { font-size: 13px; }
body.dashboard-fullscreen .wf-sub { font-size: 11px; }

body.dashboard-fullscreen .kpi-row { margin-bottom: 0; gap: 10px; flex-shrink: 0; }
body.dashboard-fullscreen .kpi { padding: 10px 14px; }
body.dashboard-fullscreen .kpi .icon { width: 32px; height: 32px; border-radius: 8px; }
body.dashboard-fullscreen .kpi .label { font-size: 11px; }
body.dashboard-fullscreen .kpi .value { font-size: 19px; }
body.dashboard-fullscreen .dash-kpis .kpi .delta { font-size: 10px; margin-top: 2px; }

/* The 3-col grid takes the rest of the screen */
body.dashboard-fullscreen .dash-grid-v2 {
    flex: 1;
    min-height: 0;            /* critical so flex children can shrink */
    overflow: hidden;
    gap: 10px;
}
body.dashboard-fullscreen .dash-col {
    min-height: 0;
    gap: 10px;
    overflow: hidden;
}
body.dashboard-fullscreen .dash-panel {
    padding: 11px 14px;
    min-height: 0;
    overflow: hidden;
    display: flex; flex-direction: column;
}
body.dashboard-fullscreen .dash-panel > .panel-head { margin-bottom: 8px; flex-shrink: 0; }
body.dashboard-fullscreen .dash-panel > .panel-head h3 { font-size: 13px; }

/* Anything inside a panel (lists, tables, illustrations) gets to scroll
   independently rather than stretch the panel/page */
body.dashboard-fullscreen .dash-panel .donut-wrap,
body.dashboard-fullscreen .dash-panel .live-signals,
body.dashboard-fullscreen .dash-panel .activity-list-v2,
body.dashboard-fullscreen .dash-panel .compact-table,
body.dashboard-fullscreen .dash-panel .empty-illustrated {
    flex: 1; min-height: 0; overflow-y: auto;
}

/* Deadlines + signal-summary stack neatly within their cards */
body.dashboard-fullscreen .signal-summary-row { padding: 7px 4px; }
body.dashboard-fullscreen .signal-summary-row .icon-square { width: 26px; height: 26px; }
body.dashboard-fullscreen .signal-summary-row .title { font-size: 12px; }
body.dashboard-fullscreen .signal-summary-row .meta { font-size: 13px; }

body.dashboard-fullscreen .deadline-row { padding: 6px 0; }
body.dashboard-fullscreen .live-signal { padding: 7px 4px; }
body.dashboard-fullscreen .activity-row { padding: 6px 4px; }

body.dashboard-fullscreen .empty-illustrated { padding: 12px 8px; }
body.dashboard-fullscreen .empty-art svg { width: 90px; height: 75px; }
body.dashboard-fullscreen .empty-headline { font-size: 13px; }
body.dashboard-fullscreen .empty-text { font-size: 11.5px; }

body.dashboard-fullscreen .donut { width: 110px !important; height: 110px !important; }
body.dashboard-fullscreen .donut svg { width: 110px; height: 110px; }

/* Risk bar + legend tighter for no-scroll mode */
body.dashboard-fullscreen .risk-bar { height: 12px; margin: 4px 0 10px; }
body.dashboard-fullscreen .risk-legend > div { padding: 4px 4px; }
body.dashboard-fullscreen .risk-legend-num { font-size: 18px; }

/* Alert banner squeezed for no-scroll mode */
body.dashboard-fullscreen .alert-banner { padding: 10px 14px; gap: 12px; }
body.dashboard-fullscreen .alert-actions { gap: 6px; }
body.dashboard-fullscreen .alert-btn-secondary,
body.dashboard-fullscreen .alert-btn-primary { padding: 7px 12px; font-size: 12.5px; }

/* Industry Trends takes whatever vertical space is left in the left column */
body.dashboard-fullscreen .trends-panel { flex: 1; min-height: 0; }
body.dashboard-fullscreen .trends-list { gap: 4px; padding: 2px 0; }
body.dashboard-fullscreen .trend-bar { height: 6px; margin-top: 3px; }
body.dashboard-fullscreen .trend-row { font-size: 11.5px; }
body.dashboard-fullscreen .view-all-link { padding: 6px; margin-top: 4px; font-size: 11px; }

/* --- Claim Risk horizontal bar + 4-column legend --- */
.risk-bar {
    display: flex;
    width: 100%;
    height: 14px;
    border-radius: 7px;
    overflow: hidden;
    background: #EEF1F8;
    margin: 4px 0 14px;
}
.risk-bar-empty { width: 100%; background: #EEF1F8; }
.risk-seg { height: 100%; transition: width .3s ease; }
.risk-legend {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
}
.risk-legend > div { padding: 6px 4px; }
.risk-legend-head {
    display: flex; align-items: center; gap: 6px;
    font-size: 12px; font-weight: 600; color: var(--text);
}
.risk-legend-head .dot { width: 8px; height: 8px; border-radius: 50%; }
.risk-legend-num { font-size: 22px; font-weight: 700; margin-top: 4px; line-height: 1; }
.risk-legend-pct { font-size: 11px; color: var(--text-soft); margin-top: 2px; }

.beta-tag {
    background: rgba(91, 46, 255, 0.1);
    color: var(--brand);
    font-size: 9px; font-weight: 700;
    padding: 2px 6px; border-radius: 4px;
    text-transform: uppercase; letter-spacing: 0.4px;
    margin-left: 4px;
    vertical-align: 1px;
}

/* --- Topbar greeting (replaces the spacer on the dashboard) --- */
.topbar-greeting {
    flex: 1; min-width: 0;
}
.topbar-greeting .dash-greeting {
    font-size: 22px; font-weight: 700; margin: 0 0 2px;
    line-height: 1.2;
}
.topbar-greeting .sub {
    color: var(--text-soft); font-size: 12.5px;
}
.topbar-cta { padding: 9px 16px; font-size: 13px; }

/* --- Industry Trends mini-bars --- */
.trends-panel { flex: 1; display: flex; flex-direction: column; }
.trends-list {
    flex: 1;
    display: flex; flex-direction: column;
    justify-content: space-between;
    gap: 6px;
    padding: 4px 0;
}
.trend-item { flex: 1; display: flex; flex-direction: column; justify-content: center; }
.trend-row {
    display: flex; justify-content: space-between; align-items: center;
    font-size: 12px;
}
.trend-label { color: var(--text); font-weight: 500; }
.trend-pct { font-weight: 700; font-size: 11px; }
.trend-up   { color: var(--green); }
.trend-down { color: var(--red); }
.trend-flat { color: var(--text-muted); }
.trend-bar {
    height: 7px; background: #EEF1F8; border-radius: 4px;
    margin-top: 5px; overflow: hidden;
}
.trend-bar > span { display: block; height: 100%; border-radius: 4px; }

/* Below 1500px the no-scroll layout falls back to a normal scrolling page
   because the content genuinely can't fit anymore */
@media (max-width: 1499px) {
    body.dashboard-fullscreen,
    body.dashboard-fullscreen html,
    body.dashboard-fullscreen .app,
    body.dashboard-fullscreen .main { height: auto; max-height: none; overflow: visible; }
    body.dashboard-fullscreen .dash-grid-v2 { overflow: visible; }
    body.dashboard-fullscreen .dash-panel { overflow: visible; }
}

/* --- Simplified dashboard --- */
body.dashboard-simple,
body.dashboard-simple html {
    height: 100vh;
    overflow: hidden;
}
body.dashboard-simple .app {
    min-height: 100vh;
    height: 100vh;
    max-height: 100vh;
    overflow: hidden;
}
body.dashboard-simple .main {
    height: 100vh;
    max-height: 100vh;
    overflow: hidden;
    padding: 25px 22px 16px;
    gap: 12px;
}
.simple-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 20px;
    border-radius: 14px;
    background: linear-gradient(135deg, #FFFFFF 0%, #F4FBF7 100%);
    border: 1px solid #DDEBE6;
    box-shadow: var(--shadow);
}
.simple-kicker {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.9px;
    text-transform: uppercase;
    color: #5B6B80;
    margin-bottom: 4px;
}
.simple-hero h2 {
    margin: 0;
    font-size: 24px;
    line-height: 1.15;
}
.simple-hero p {
    margin: 4px 0 0;
    color: var(--text-soft);
    font-size: 13px;
}
.simple-actions {
    display: flex;
    gap: 10px;
    flex-shrink: 0;
}
.simple-metrics {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}
.simple-metric {
    padding: 14px 16px;
    border-radius: 12px;
    background: #fff;
    border: 1px solid var(--panel-border);
    box-shadow: var(--shadow);
}
.simple-metric span,
.simple-metric small {
    display: block;
    color: var(--text-soft);
    font-size: 12px;
}
.simple-metric strong {
    display: block;
    margin: 4px 0 2px;
    font-size: 26px;
    line-height: 1;
}
.simple-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(360px, 0.75fr);
    gap: 12px;
    align-items: stretch;
    flex: 1;
    min-height: 0;
}
.simple-main,
.simple-side {
    display: grid;
    gap: 12px;
    align-content: stretch;
    min-height: 0;
}
.simple-main {
    grid-template-rows: minmax(0, 1.35fr) minmax(0, 0.85fr);
}
.simple-side {
    grid-template-rows: repeat(2, minmax(0, 1fr));
}
.simple-side > .simple-panel {
    min-height: 0;
}
.simple-panel {
    padding: 16px;
    border-radius: 14px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.simple-panel .panel-head {
    margin-bottom: 12px;
    flex-shrink: 0;
}
.simple-panel .panel-head h3 {
    font-size: 15px;
}
.simple-project-list,
.simple-activity-list,
.simple-opportunity-links {
    display: grid;
    gap: 8px;
}
.simple-project {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) auto;
    gap: 11px;
    align-items: center;
    padding: 10px;
    border-radius: 12px;
    color: var(--text);
    background: #F8FAFD;
    border: 1px solid var(--panel-border);
}
.simple-project:hover {
    text-decoration: none;
    background: #F4F7FC;
}
.simple-project-icon {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #EEF4FF;
    color: var(--blue);
}
.simple-project strong,
.simple-project small {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.simple-project small {
    color: var(--text-soft);
    margin-top: 2px;
}
.simple-empty {
    min-height: 150px;
    flex: 1;
    display: grid;
    place-items: center;
    align-content: center;
    gap: 8px;
    text-align: center;
    color: var(--text-soft);
}
.simple-empty strong {
    color: var(--text);
    font-size: 16px;
}
.simple-empty.small {
    min-height: 60px;
}
.simple-risk-row {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
}
.simple-risk-row div {
    padding: 11px;
    border-radius: 12px;
    background: #F8FAFD;
}
.simple-risk-row strong,
.simple-risk-row span {
    display: block;
}
.simple-risk-row strong {
    font-size: 24px;
}
.simple-risk-row span {
    color: var(--text-soft);
    font-size: 12px;
}
.simple-risk-bar {
    display: flex;
    height: 10px;
    margin-top: 12px;
    overflow: hidden;
    border-radius: 999px;
    background: #EEF1F8;
}
.simple-risk-bar span {
    min-width: 0;
}
.simple-opportunity-panel {
    background: linear-gradient(135deg, #FFF7D6 0%, #FFFFFF 100%);
    border-color: #F4D274;
}
.simple-opportunity-count {
    width: 54px;
    height: 54px;
    border-radius: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #F6C75B, #E6A93B);
    color: #251803;
    font-size: 28px;
    font-weight: 900;
    margin: 4px 0 8px;
}
.simple-opportunity-panel p {
    margin: 0 0 12px;
    color: #5F4710;
    font-weight: 600;
}
.simple-opportunity-links a {
    display: flex;
    justify-content: space-between;
    padding: 9px 10px;
    border-radius: 10px;
    background: rgba(255,255,255,0.72);
    color: #2C2107;
    font-weight: 700;
}
.simple-opportunity-links a:hover {
    text-decoration: none;
    background: #fff;
}
.simple-activity {
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr);
    gap: 10px;
    align-items: center;
    padding: 9px 0;
    border-bottom: 1px solid var(--panel-border);
}
.simple-activity:last-child {
    border-bottom: 0;
}
.simple-activity > span {
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    background: var(--purple-soft);
    color: var(--brand);
}
.simple-activity strong,
.simple-activity small {
    display: block;
}
.simple-activity small {
    color: var(--text-soft);
}
@media (max-width: 1200px) {
    body.dashboard-simple,
    body.dashboard-simple html,
    body.dashboard-simple .app,
    body.dashboard-simple .main {
        height: auto;
        max-height: none;
        overflow: visible;
    }
    .simple-grid { grid-template-columns: 1fr; }
    .simple-metrics { grid-template-columns: repeat(2, 1fr); }
    .simple-side { grid-template-rows: none; }
}
@media (max-width: 760px) {
    .simple-hero { flex-direction: column; align-items: flex-start; }
    .simple-actions { width: 100%; flex-direction: column; }
    .simple-metrics,
    .simple-risk-row { grid-template-columns: 1fr; }
}

/* ========================================================================
   AI Label Visualiser
======================================================================== */

/* Project header strip above the page (back arrow + title + saved badge) */
.project-head {
    display: flex; align-items: center; gap: 12px;
    margin: -8px 0 14px;
}
.project-back {
    width: 32px; height: 32px; border-radius: 8px;
    border: 1px solid var(--panel-border);
    background: #fff; color: var(--text-soft);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 16px; text-decoration: none; flex-shrink: 0;
}
.project-back:hover { background: #F8FAFD; text-decoration: none; }
.project-title { font-weight: 700; font-size: 15px; flex: 1; }
.project-saved {
    color: var(--green); font-size: 12px; font-weight: 600;
    display: inline-flex; align-items: center; gap: 4px;
}

/* 4-step indicator */
.stepper {
    display: flex; align-items: center;
    gap: 6px;
    margin-bottom: 18px;
    background: #fff; border: 1px solid var(--panel-border);
    border-radius: 12px;
    padding: 14px 22px;
    box-shadow: var(--shadow);
}
.step { display: flex; align-items: center; gap: 8px; }
.step-num {
    width: 26px; height: 26px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 11px; font-weight: 700;
    background: #EEF1F8; color: var(--text-soft);
    flex-shrink: 0;
}
.step-num.done {
    background: var(--green-soft); color: var(--green);
}
.step-num.current {
    background: var(--brand); color: #fff;
}
.step-label { font-size: 13px; color: var(--text-soft); }
.step-label.active { color: var(--text); font-weight: 700; }
.step-line {
    flex: 1; height: 2px; background: #EEF1F8;
    border-radius: 2px;
}
.step-line.done { background: var(--green); }

/* Top row: 3 cards (product, claim, CTA) */
.vis-top-row {
    display: grid;
    grid-template-columns: 1.3fr 1.3fr 1fr;
    gap: 14px;
    margin-bottom: 14px;
}
.vis-card { padding: 16px 18px; }
.vis-card-label {
    font-size: 11px; font-weight: 600; color: var(--text-soft);
    text-transform: uppercase; letter-spacing: 0.6px; margin-bottom: 8px;
}
.vis-product-row { display: flex; gap: 14px; align-items: center; }
.vis-product-thumb {
    width: 70px; height: 70px; border-radius: 10px;
    background: linear-gradient(135deg, #ECE5FF, #FFF);
    display: flex; align-items: center; justify-content: center;
    overflow: hidden; flex-shrink: 0;
}
.vis-product-thumb object { width: 100%; height: 100%; }
.vis-product-info { flex: 1; min-width: 0; }
.vis-product-info input[type=text] {
    width: 100%; font-weight: 700; font-size: 14px;
    border: 1px solid transparent; padding: 4px 6px;
    border-radius: 6px; background: transparent; color: var(--text);
    margin-bottom: 6px;
}
.vis-product-info input[type=text]:focus {
    background: #F8FAFD; border-color: var(--panel-border); outline: none;
}
.vis-product-meta { display: flex; gap: 8px; }
.vis-meta-select {
    padding: 5px 8px; border: 1px solid var(--panel-border);
    border-radius: 6px; font-size: 11.5px; background: #fff;
    color: var(--text-soft);
}

.vis-claim-input {
    width: 100%; padding: 10px 12px;
    border: 1px solid var(--panel-border); border-radius: 8px;
    font-family: inherit; font-size: 13.5px; resize: vertical;
    min-height: 48px;
}
.vis-claim-input:focus { outline: 2px solid var(--brand); outline-offset: -1px; }
.vis-claim-check {
    margin-top: 8px;
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 12.5px;
    display: flex; align-items: center; gap: 8px;
    background: var(--green-soft); color: #0E6E3F;
}
.vis-claim-check.needs_evidence { background: var(--amber-soft); color: #6B4500; }
.vis-claim-check.regulated      { background: #FFE5F1; color: #8a1147; }
.vis-claim-check.non_compliant  { background: var(--red-soft); color: #8a1f23; }
.vis-claim-check span { font-weight: 800; }
.vis-claim-details {
    margin-left: auto; font-size: 12px; font-weight: 600;
    color: var(--brand); text-decoration: none;
}

.vis-cta-card {
    background: linear-gradient(135deg, #F8F5FF 0%, #FFFFFF 100%);
    border: 1px solid #E5DBFF;
    padding: 18px;
    display: flex; flex-direction: column;
}
.vis-cta-title { font-size: 15px; font-weight: 700; color: var(--brand); margin-bottom: 4px; }
.vis-cta-sub { font-size: 12px; color: var(--text-soft); margin-bottom: 12px; line-height: 1.4; }
.vis-cta-btn { width: 100%; justify-content: center; padding: 11px; font-size: 13.5px; }

/* Main row: 3 concepts + compliance sidebar */
.vis-main-row {
    display: grid;
    grid-template-columns: 2.4fr 1fr;
    gap: 14px;
    margin-bottom: 14px;
}
.vis-concepts { padding: 18px 20px; }
.vis-concepts-head {
    display: flex; justify-content: space-between; align-items: flex-start;
    margin-bottom: 14px;
}
.vis-concept-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 14px;
}
.vis-concept-card {
    border: 1px solid var(--panel-border);
    border-radius: 12px;
    overflow: hidden;
    transition: border-color .15s ease, transform .15s ease;
}
.vis-concept-card:hover { border-color: var(--brand); transform: translateY(-2px); }
.vis-concept-head {
    display: flex; justify-content: space-between; align-items: center;
    padding: 10px 12px;
    border-bottom: 1px solid var(--panel-border);
}
.vis-concept-num { font-weight: 700; font-size: 12px; color: var(--text-soft); }
.vis-concept-tag {
    font-size: 10px; font-weight: 700; padding: 2px 8px;
    border-radius: 99px; text-transform: none; letter-spacing: 0.2px;
}
.vis-concept-tag.green  { background: var(--green-soft); color: var(--green); }
.vis-concept-tag.blue   { background: var(--blue-soft);  color: var(--blue); }
.vis-concept-tag.purple { background: var(--purple-soft); color: var(--brand); }
.vis-concept-img {
    aspect-ratio: 4 / 5;
    display: flex; align-items: center; justify-content: center;
    background: #F8FAFD;
}
.vis-concept-img object { width: 100%; height: 100%; }
.vis-concepts-foot {
    margin-top: 14px;
    display: flex; justify-content: space-between; align-items: center;
    gap: 12px; flex-wrap: wrap;
}
.vis-regen-link { color: var(--brand); font-weight: 600; font-size: 12.5px; text-decoration: none; }

/* Compliance sidebar */
.vis-compliance { padding: 16px 18px; }
.vis-overall-risk {
    background: var(--amber-soft); color: #6B4500;
    padding: 12px 14px; border-radius: 10px; margin-bottom: 14px;
}
.vis-overall-risk.compliant { background: var(--green-soft); color: #0E6E3F; }
.vis-overall-risk.regulated { background: #FFE5F1; color: #8a1147; }
.vis-overall-risk.non_compliant { background: var(--red-soft); color: #8a1f23; }
.vis-overall-risk .vis-claim-details { color: inherit; opacity: 0.85; }

.vis-check-list { display: flex; flex-direction: column; }
.vis-check-item {
    display: grid; grid-template-columns: 24px 1fr 24px;
    align-items: center; gap: 10px;
    padding: 10px 0;
    border-bottom: 1px solid #F3F4F8;
}
.vis-check-item:last-child { border-bottom: none; }
.vis-check-icon {
    width: 20px; height: 20px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 11px; font-weight: 800;
    background: var(--green-soft); color: var(--green);
}
.vis-check-icon.warn { background: var(--amber-soft); color: var(--amber); }
.vis-check-icon.info { background: var(--blue-soft);  color: var(--blue); }
.vis-check-body { min-width: 0; }
.vis-check-title { font-size: 12.5px; font-weight: 600; }
.vis-check-sub   { font-size: 11px; }
.vis-check-tag {
    width: 18px; height: 18px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 10px; font-weight: 800;
    background: var(--green); color: #fff;
}
.vis-check-tag.warn { background: var(--amber); }
.vis-check-tag.info { background: var(--blue); }

/* Bottom row: brand style + competitive inspiration + shelf preview */
.vis-bottom-row {
    display: grid;
    grid-template-columns: 1.2fr 1fr 1.2fr;
    gap: 14px;
    margin-bottom: 14px;
}
.brand-style-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
.brand-style-tile {
    background: #F8FAFD;
    border-radius: 10px;
    padding: 10px 12px;
}
.brand-style-label {
    font-size: 10.5px; color: var(--text-soft); font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 6px;
}
.brand-style-value { font-size: 12.5px; font-weight: 600; color: var(--text); }
.colour-dots { display: flex; gap: 6px; }
.colour-dots span {
    width: 22px; height: 22px; border-radius: 50%;
    display: inline-block;
}

.comp-inspire-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
}
.comp-inspire-tile {
    background: #F8FAFD;
    border-radius: 10px;
    padding: 12px 14px;
}
.comp-inspire-name { font-size: 13px; font-weight: 700; margin-bottom: 2px; }

.shelf-preview {
    background: linear-gradient(180deg, #FFF 0%, #F5F7FB 100%);
    border-radius: 10px;
    padding: 14px;
    border: 1px solid var(--panel-border);
}
.shelf-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
    background: linear-gradient(180deg, transparent 60%, #E6EAF2 100%);
    padding: 8px 8px 18px;
    border-radius: 6px;
}
.shelf-row object {
    width: 100%; height: auto;
    transform: scale(0.95);
    filter: drop-shadow(0 4px 6px rgba(0,0,0,0.08));
}
.shelf-price {
    font-size: 11.5px; color: var(--text-soft); margin-top: 8px;
    font-weight: 600;
}

@media (max-width: 1500px) {
    .vis-top-row { grid-template-columns: 1fr 1fr; }
    .vis-cta-card { grid-column: 1 / -1; }
    .vis-main-row { grid-template-columns: 1fr; }
    .vis-bottom-row { grid-template-columns: 1fr; }
}

/* ========================================================================
   Modern dashboard
======================================================================== */
body.dashboard-modern,
body.dashboard-modern html {
    min-height: 100vh;
    overflow: auto;
}
body.dashboard-modern .app { min-height: 100vh; }
body.dashboard-modern .main {
    min-height: 100vh;
    padding: 28px 36px 34px;
    background: radial-gradient(circle at 12% 0%, rgba(91, 46, 255, 0.06), transparent 30%), linear-gradient(180deg, #F8FAFD 0%, #FFFFFF 44%, #F7F9FC 100%);
}
body.dashboard-modern .topbar {
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 24px;
}
.dash-modern-top {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
}
.dash-modern-top h1 {
    margin: 0 0 8px;
    color: #07111F;
    font-size: 28px;
    line-height: 1.1;
    letter-spacing: 0;
}
.dash-modern-top p {
    margin: 0;
    color: #5F6B7A;
    font-size: 14px;
}
.dash-new-product {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 40px;
    padding: 0 18px 0 15px;
    border-radius: 8px;
    background: #FFFFFF;
    border: 1px solid var(--brand);
    color: var(--brand);
    font-weight: 700;
    box-shadow: none;
    white-space: nowrap;
}
.dash-new-product:hover { text-decoration: none; background: #F8F5FF; }
.dash-new-product svg {
    width: 16px;
    height: 16px;
    flex: 0 0 16px;
}
body.dashboard-modern .iconbtn {
    border: 0;
    box-shadow: none;
    background: transparent;
}

.dash-stat-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
    margin-bottom: 18px;
}
.dash-stat-card {
    min-height: 150px;
    display: flex;
    align-items: center;
    gap: 28px;
    padding: 30px 34px;
    border: 1px solid #E8EDF4;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 10px 24px rgba(16, 24, 40, 0.05);
    color: inherit;
    text-decoration: none;
    transition: border-color .14s ease, box-shadow .14s ease, transform .14s ease;
}
.dash-stat-card:hover {
    border-color: rgba(91, 46, 255, 0.28);
    box-shadow: 0 16px 30px rgba(16, 24, 40, 0.08);
    text-decoration: none;
    transform: translateY(-1px);
}
.dash-stat-icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.dash-stat-icon svg { width: 28px; height: 28px; }
.stat-green .dash-stat-icon { background: #E6F8EE; color: #1AA260; }
.stat-orange .dash-stat-icon { background: #FFF1E2; color: #FF8A00; }
.stat-purple .dash-stat-icon { background: #F0E8FF; color: #8052E8; }
.dash-stat-label {
    display: block;
    color: #475569;
    font-size: 14px;
    margin-bottom: 10px;
}
.dash-stat-card strong {
    display: block;
    color: #05070D;
    font-size: 34px;
    line-height: 1;
    margin-bottom: 12px;
}
.dash-stat-card small { color: #667085; font-size: 13px; }
.dash-stat-card small.up { color: #16A34A; }
.dash-stat-card small.down { color: #E4474B; }

.dash-modern-card {
    border: 1px solid #E8EDF4;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 10px 24px rgba(16, 24, 40, 0.05);
    padding: 24px 28px;
    margin-bottom: 18px;
}
.dash-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 22px;
}
.dash-section-head h2 {
    margin: 0;
    color: #07111F;
    font-size: 17px;
    line-height: 1.2;
}
.dash-section-head a {
    color: #111827;
    font-size: 13px;
    font-weight: 700;
}
.dash-section-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    flex-wrap: wrap;
}
.dash-section-actions .dash-new-product {
    min-height: 36px;
    padding: 0 14px 0 12px;
    font-size: 13px;
}

.dash-product-table { display: grid; gap: 0; }
.dash-product-row {
    display: grid;
    grid-template-columns: minmax(220px, 1.35fr) minmax(120px, 0.8fr) minmax(140px, 0.8fr) minmax(110px, 0.7fr) 28px;
    align-items: center;
    gap: 18px;
    min-height: 58px;
    border-bottom: 1px solid #EEF2F7;
    color: #344054;
    font-size: 13px;
}
a.dash-product-row:hover { background: #FAFCFF; text-decoration: none; }
.dash-product-row:last-child { border-bottom: 0; }
.dash-product-head { min-height: 34px; color: #667085; font-size: 12px; }
.dash-product-name {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
}
.dash-product-name strong {
    color: #101828;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.dash-product-thumb {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #F4F6FA;
    color: #64748B;
}
.dash-product-thumb svg { width: 18px; height: 18px; }
.stage-pill {
    display: inline-flex;
    padding: 3px 8px;
    border-radius: 5px;
    background: #EAF2FF;
    color: #2563EB;
    font-style: normal;
    font-size: 12px;
    line-height: 1.2;
}
.stage-pill.under-review,
.stage-pill.evidence-required { background: #FFF2DD; color: #D97706; }
.stage-pill.visualised { background: #F1E9FF; color: #7C3AED; }
.risk-dot {
    width: 8px;
    height: 8px;
    display: inline-block;
    border-radius: 50%;
    margin-right: 9px;
    background: #22C55E;
}
.risk-dot.medium { background: #FF8A00; }
.risk-dot.high { background: #EF4444; }
.row-arrow { justify-self: end; color: #344054; font-weight: 700; }

.opportunity-summary { margin-bottom: 0; }
.opportunity-layout {
    display: grid;
    grid-template-columns: minmax(440px, 0.8fr) minmax(0, 1.2fr);
    gap: clamp(24px, 3vw, 42px);
    align-items: center;
}
.opportunity-chart {
    display: grid;
    grid-template-columns: 170px minmax(220px, 1fr);
    gap: 28px;
    align-items: center;
    padding-right: clamp(24px, 3vw, 42px);
    border-right: 1px solid #E8EDF4;
}
.opportunity-donut {
    width: 170px;
    height: 170px;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: radial-gradient(circle at center, #fff 0 58%, transparent 59%),
        conic-gradient(
            #BDEFD0 0 var(--reg),
            #C8B6F5 var(--reg) calc(var(--reg) + var(--claims)),
            #BFD7FF calc(var(--reg) + var(--claims)) calc(var(--reg) + var(--claims) + var(--listings)),
            #CBD5E1 0
        );
}
.opportunity-donut strong {
    margin-bottom: 3px;
    color: #07111F;
    font-size: 24px;
    line-height: 1;
}
.opportunity-donut span {
    max-width: 82px;
    color: #667085;
    font-size: 10.5px;
    font-weight: 500;
    line-height: 1.15;
    text-align: center;
}
.opportunity-legend { display: grid; gap: 16px; color: #344054; font-size: 13px; }
.opportunity-legend div {
    display: grid;
    grid-template-columns: 12px minmax(0, 1fr) 44px;
    align-items: center;
    gap: 10px;
}
.opportunity-legend strong { text-align: right; color: #07111F; }
.legend-dot { width: 9px; height: 9px; border-radius: 50%; }
.legend-dot.green { background: #BDEFD0; }
.legend-dot.orange { background: #FFA94D; }
.legend-dot.purple { background: #C8B6F5; }
.legend-dot.blue { background: #BFD7FF; }
.legend-dot.gray { background: #CBD5E1; }

.opportunity-list { display: grid; gap: 14px; }
.opportunity-item {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) minmax(92px, auto) 86px;
    align-items: center;
    gap: 16px;
    color: #344054;
    min-width: 0;
}
.opportunity-item:hover { text-decoration: none; }
.opportunity-icon {
    width: 40px;
    height: 40px;
    border-radius: 9px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.opportunity-icon svg { width: 20px; height: 20px; }
.opportunity-icon.green { background: #E6F8EE; color: #1AA260; }
.opportunity-icon.orange { background: #FFF1E2; color: #FF8A00; }
.opportunity-icon.purple { background: #F0E8FF; color: #8052E8; }
.opportunity-copy {
    display: block;
    min-width: 0;
}
.opportunity-item strong {
    display: block;
    max-width: 100%;
    margin-bottom: 4px;
    overflow: hidden;
    color: #111827;
    font-size: 13px;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.opportunity-item small {
    display: block;
    color: #667085;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}
.opportunity-item em {
    justify-self: end;
    padding: 4px 9px;
    border-radius: 5px;
    background: #E8F8EE;
    color: #16A34A;
    font-style: normal;
    font-size: 12px;
    white-space: nowrap;
}
.opportunity-item time {
    justify-self: end;
    color: #667085;
    font-size: 12px;
    white-space: nowrap;
}
.opportunity-action,
.product-action { display: flex; justify-content: center; margin-top: 16px; }
.opportunity-action a,
.product-action a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-width: 190px;
    text-align: center;
    padding: 10px 18px;
    border: 1px solid var(--brand);
    border-radius: 8px;
    background: #FFFFFF;
    color: var(--brand);
    font-weight: 700;
}
.product-action a svg {
    width: 16px;
    height: 16px;
    flex: 0 0 16px;
}
.opportunity-action a:hover,
.product-action a:hover { background: #F8F5FF; text-decoration: none; }
.dash-empty-row { padding: 22px 0; color: #667085; font-size: 13px; }

@media (max-width: 1280px) {
    .dash-stat-grid,
    .opportunity-layout { grid-template-columns: 1fr; }
    .opportunity-chart { border-right: 0; padding-right: 0; border-bottom: 1px solid #E8EDF4; padding-bottom: 22px; }
}
@media (max-width: 900px) {
    body.dashboard-modern .topbar { flex-wrap: wrap; }
    .dash-modern-top,
    .dash-stat-card,
    .opportunity-chart { display: flex; flex-direction: column; align-items: flex-start; }
    .dash-stat-grid { grid-template-columns: 1fr; }
    .dash-product-row { grid-template-columns: 1fr; gap: 8px; padding: 14px 0; }
    .dash-product-head { display: none; }
    .opportunity-item { grid-template-columns: 40px minmax(0, 1fr); }
    .opportunity-item em,
    .opportunity-item time { grid-column: 2; }
    .settings-options,
    .settings-options.compact {
        grid-template-columns: 1fr;
    }
}

/* --- Opportunities page redesign --- */
body.opportunities-redesign .main {
    min-height: 100vh;
    padding: 28px 36px 34px;
    background: linear-gradient(180deg, #FBFCFE 0%, #FFFFFF 46%, #F8FAFD 100%);
}
body.opportunities-redesign .topbar {
    align-items: flex-start;
    gap: 12px;
    margin: 0 0 24px;
}
.opps-topbar {
    flex: 1;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 24px;
    min-width: 0;
}
.opps-topbar h1 {
    margin: 0 0 10px;
    color: #0B1220;
    font-size: 30px;
    line-height: 1.1;
    font-weight: 800;
}
.opps-topbar p {
    margin: 0;
    color: #475467;
    font-size: 14px;
    line-height: 1.45;
}
.opps-topbar-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-top: 48px;
    flex-shrink: 0;
}
.opps-control {
    height: 42px;
    min-width: 112px;
    padding: 0 16px;
    border: 1px solid #E4E9F2;
    border-radius: 8px;
    background: #FFFFFF;
    color: #111827;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-weight: 700;
    font-size: 13px;
    text-decoration: none;
    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.04);
}
.opps-control:hover { background: #F8FAFD; text-decoration: none; }
.opps-control svg { width: 16px; height: 16px; }
.opps-control.primary {
    border-color: #111827;
    background: #111827;
    color: #FFFFFF;
}
.opps-stat-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
    margin-bottom: 28px;
}
.opps-stat-card {
    min-height: 132px;
    padding: 28px 42px;
    border: 1px solid #E8EDF4;
    border-radius: 12px;
    background: #FFFFFF;
    display: flex;
    align-items: center;
    gap: 28px;
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.05);
}
.opps-stat-icon {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.opps-stat-icon svg { width: 30px; height: 30px; }
.opps-stat-icon.green { background: #E6F8EE; color: #1AA260; }
.opps-stat-icon.orange { background: #FFF1E2; color: #FF8A00; }
.opps-stat-icon.purple { background: #F0E8FF; color: #8052E8; }
.opps-stat-card strong {
    display: block;
    margin: 2px 0 8px;
    color: #0B1220;
    font-size: 34px;
    line-height: 1;
    font-weight: 800;
}
.opps-stat-card span {
    color: #344054;
    font-size: 14px;
    font-weight: 600;
}
.opps-stat-card small {
    display: block;
    margin-top: 12px;
    color: #667085;
    font-size: 13px;
    font-weight: 600;
}
.opps-stat-card small.positive { color: #17A65A; }
.opps-stat-card small.hot { color: #FF8A00; }
.opps-tabs {
    display: flex;
    align-items: center;
    gap: 34px;
    margin: 0 0 22px;
    border-bottom: 1px solid #E8EDF4;
}
.opps-tabs a {
    position: relative;
    padding: 0 0 16px;
    color: #344054;
    text-decoration: none;
    font-size: 13px;
    font-weight: 800;
}
.opps-tabs a.active,
.opps-tabs a:hover { color: #0B1220; text-decoration: none; }
.opps-tabs a.active::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 2px;
    border-radius: 2px;
    background: #0B1220;
}
.opps-table-card {
    overflow: hidden;
    border: 1px solid #E8EDF4;
    border-radius: 12px;
    background: #FFFFFF;
    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.05);
}
.opps-table-wrap {
    overflow-x: auto;
}
.opps-table {
    width: 100%;
    min-width: 820px;
    border-collapse: collapse;
    table-layout: fixed;
}
.opps-table th:nth-child(1),
.opps-table td:nth-child(1) { width: 43%; }
.opps-table th:nth-child(2),
.opps-table td:nth-child(2) { width: 17%; }
.opps-table th:nth-child(3),
.opps-table td:nth-child(3) { width: 18%; }
.opps-table th:nth-child(4),
.opps-table td:nth-child(4) { width: 10%; }
.opps-table th:nth-child(5),
.opps-table td:nth-child(5) { width: 12%; }
.opps-table th {
    padding: 24px 24px 18px;
    color: #667085;
    font-size: 12px;
    font-weight: 800;
    text-align: left;
    border-bottom: 1px solid #E8EDF4;
}
.opps-sort {
    appearance: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    cursor: pointer;
}
.opps-sort::after {
    content: "";
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 5px solid #98A2B3;
    opacity: 0.55;
}
.opps-sort:hover,
.opps-sort.active {
    color: #0B1220;
}
.opps-sort.active.asc::after {
    border-top: 0;
    border-bottom: 5px solid var(--brand);
    opacity: 1;
}
.opps-sort.active.desc::after {
    border-top-color: var(--brand);
    opacity: 1;
}
.opps-head-with-help {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.opps-help {
    position: relative;
    width: 17px;
    height: 17px;
    border-radius: 50%;
    border: 1px solid #CBD5E1;
    background: #FFFFFF;
    color: #64748B;
    font-size: 11px;
    font-weight: 800;
    line-height: 15px;
    text-align: center;
    cursor: help;
}
.opps-help:hover,
.opps-help:focus {
    border-color: var(--brand);
    color: var(--brand);
    outline: none;
}
.opps-help-tooltip {
    position: fixed;
    z-index: 5000;
    width: min(300px, calc(100vw - 24px));
    padding: 10px 12px;
    border: 1px solid #E2E8F0;
    border-radius: 8px;
    background: #0B1220;
    color: #FFFFFF;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.35;
    text-align: left;
    white-space: normal;
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.18);
    opacity: 1;
    pointer-events: none;
}
.opps-table td {
    padding: 18px 24px;
    color: #111827;
    font-size: 13px;
    font-weight: 600;
    vertical-align: middle;
    border-bottom: 1px solid #EEF2F6;
}
.opps-table tbody tr:hover { background: #FAFBFD; }
.opps-table tbody tr:last-child td { border-bottom: 0; }
.opps-table tbody tr.opps-potential-high {
    background: linear-gradient(90deg, rgba(31, 179, 100, 0.16), rgba(255, 255, 255, 0.96) 56%);
    box-shadow: inset 4px 0 0 #1FB364;
}
.opps-table tbody tr.opps-potential-high:hover {
    background: linear-gradient(90deg, rgba(31, 179, 100, 0.22), #FFFFFF 58%);
}
.opps-table tbody tr.opps-potential-medium {
    background: linear-gradient(90deg, rgba(242, 160, 38, 0.11), rgba(255, 255, 255, 0.96) 54%);
    box-shadow: inset 4px 0 0 #F2A026;
}
.opps-table tbody tr.opps-potential-low {
    background: linear-gradient(90deg, rgba(100, 116, 139, 0.06), rgba(255, 255, 255, 0.96) 48%);
    box-shadow: inset 4px 0 0 #CBD5E1;
}
.opps-opportunity {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    align-items: center;
    gap: 18px;
    color: #111827;
    text-decoration: none;
    min-width: 0;
}
.opps-opportunity:hover { text-decoration: none; }
.opps-row-icon {
    width: 38px;
    height: 38px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.opps-row-icon svg { width: 19px; height: 19px; }
.opps-row-icon.green { background: #E6F8EE; color: #1AA260; }
.opps-row-icon.orange { background: #FFF1E2; color: #FF8A00; }
.opps-row-icon.blue { background: #EAF2FF; color: #3983FF; }
.opps-row-icon.potential-high {
    background: #DDFBEA;
    color: #0F8A4B;
    box-shadow: 0 0 0 6px rgba(31, 179, 100, 0.10);
}
.opps-row-icon.potential-medium {
    background: #FFF1D6;
    color: #D97706;
}
.opps-row-icon.potential-low {
    background: #F1F5F9;
    color: #64748B;
}
.opps-opportunity strong,
.opps-title-link {
    display: block;
    max-width: 100%;
    margin-bottom: 5px;
    overflow: hidden;
    color: #0B1220;
    font-size: 13px;
    font-weight: 800;
    line-height: 1.25;
    text-decoration: none;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.opps-title-link:hover {
    color: #5B2EFF;
    text-decoration: none;
}
.opps-opportunity small {
    display: -webkit-box;
    max-width: 100%;
    overflow: hidden;
    color: #667085;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.35;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.signal-source-details {
    margin-top: 7px;
    color: #667085;
    font-size: 11px;
    line-height: 1.45;
}
.signal-source-details summary {
    width: max-content;
    cursor: pointer;
    color: #5B2EFF;
    font-weight: 800;
}
.signal-source-details p {
    max-width: 560px;
    margin: 7px 0 0;
    padding: 8px 10px;
    border: 1px solid #E5EAF2;
    border-radius: 8px;
    background: rgba(248, 250, 252, .82);
    color: #475467;
    overflow-wrap: anywhere;
}
.opps-pill {
    display: inline-flex;
    align-items: center;
    min-height: 22px;
    padding: 4px 8px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
}
.opps-pill.green { background: #E6F8EE; color: #11834C; }
.opps-pill.orange { background: #FFF1E2; color: #E27000; }
.opps-pill.blue { background: #EAF2FF; color: #2B6FE8; }
.opps-pill.impact.high { background: #DDFBEA; color: #087A3D; border: 1px solid #A7F3C3; }
.opps-pill.impact.medium { background: #FFF1E2; color: #D76A00; border: 1px solid #FED7AA; }
.opps-pill.impact.low { background: #F1F5F9; color: #64748B; border: 1px solid #E2E8F0; }
.opps-launch {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 32px;
    padding: 7px 10px;
    border: 1px solid var(--brand);
    border-radius: 8px;
    color: var(--brand);
    font-size: 12px;
    font-weight: 800;
    white-space: nowrap;
    text-decoration: none;
}
.opps-launch:hover { background: #F8F5FF; text-decoration: none; }
.opps-table-footer {
    min-height: 54px;
    padding: 10px 24px;
    border-top: 1px solid #EEF2F6;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    align-content: start;
    gap: 12px;
    color: #475467;
    font-size: 13px;
    font-weight: 600;
}
.opps-see-all {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 36px;
    align-self: center;
    padding: 0 16px;
    border: 1px solid var(--brand);
    border-radius: 8px;
    background: #FFFFFF;
    color: var(--brand);
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
}
.opps-see-all:hover {
    background: #F8F5FF;
}
.opps-modal[hidden] {
    display: none;
}
.opps-modal {
    position: fixed;
    inset: 0;
    z-index: 4000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 28px;
}
.opps-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(11, 18, 32, 0.54);
}
.opps-modal-panel {
    position: relative;
    z-index: 1;
    width: min(1180px, calc(100vw - 32px));
    max-height: min(820px, calc(100vh - 48px));
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid #E2E8F0;
    border-radius: 12px;
    background: #FFFFFF;
    box-shadow: 0 24px 70px rgba(15, 23, 42, 0.28);
}
.opps-modal-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 20px 22px;
    border-bottom: 1px solid #E8EDF4;
}
.opps-modal-head h2 {
    margin: 0 0 4px;
    color: #0B1220;
    font-size: 22px;
    line-height: 1.15;
}
.opps-modal-head p {
    margin: 0;
    color: #667085;
    font-size: 13px;
}
.opps-modal-close {
    width: 36px;
    height: 36px;
    border: 1px solid #E2E8F0;
    border-radius: 8px;
    background: #FFFFFF;
    color: #475569;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
}
.opps-modal-close:hover {
    background: #F8FAFD;
    color: #0B1220;
}
.opps-modal-table {
    overflow: auto;
}
.opps-modal-table .opps-table {
    min-width: 980px;
}
body.opps-modal-open {
    overflow: hidden;
}
.opps-pagination {
    display: flex;
    align-items: center;
    gap: 10px;
}
.opps-pagination a,
.opps-pagination span {
    width: 34px;
    height: 34px;
    border: 1px solid #E4E9F2;
    border-radius: 6px;
    background: #FFFFFF;
    color: #344054;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    font-size: 13px;
    font-weight: 700;
}
.opps-pagination a.active {
    background: #0B1220;
    border-color: #0B1220;
    color: #FFFFFF;
}
.opps-pagination .disabled { opacity: 0.45; }
.opps-empty {
    padding: 54px 24px;
    text-align: center;
    display: grid;
    justify-items: center;
    gap: 12px;
    color: #667085;
}
.opps-empty strong {
    color: #111827;
    font-size: 18px;
}

/* --- Help / FAQ --- */
.help-head { margin-bottom: 18px; }
.help-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
    margin-bottom: 18px;
}
.help-card {
    padding: 22px;
}
.help-icon {
    width: 46px;
    height: 46px;
    border-radius: 12px;
    background: #F1ECFF;
    color: #5B2EFF;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
}
.help-icon.green { background: #E6F8EE; color: #1AA260; }
.help-icon.amber { background: #FFF1E2; color: #FF8A00; }
.help-icon svg {
    width: 22px;
    height: 22px;
}
.help-card h2 {
    margin: 0 0 8px;
    color: #111827;
    font-size: 17px;
}
.help-card p {
    margin: 0;
    color: #667085;
    font-size: 13.5px;
    line-height: 1.55;
}
.help-panel {
    padding: 0;
    overflow: hidden;
}
.faq-list details {
    padding: 18px 22px;
    border-top: 1px solid #EEF2F6;
}
.faq-list details:first-child { border-top: 0; }
.faq-list summary {
    cursor: pointer;
    color: #111827;
    font-weight: 800;
    font-size: 14px;
}
.faq-list p {
    margin: 10px 0 0;
    color: #667085;
    font-size: 13.5px;
    line-height: 1.55;
}

@media (max-width: 1180px) {
    .opps-stat-grid { grid-template-columns: 1fr; }
    .opps-stat-card { min-height: 112px; }
}
@media (max-width: 900px) {
    body.opportunities-redesign .topbar,
    .opps-topbar {
        flex-wrap: wrap;
    }
    .opps-topbar-actions {
        width: 100%;
        padding-top: 0;
    }
    .opps-control { min-width: 0; }
    .opps-tabs {
        gap: 18px;
        overflow-x: auto;
        white-space: nowrap;
    }
    .opps-table-footer {
        align-items: center;
        grid-template-columns: minmax(0, 1fr) auto;
    }
    .opps-pagination { display: none; }
    .help-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
    body.opportunities-redesign .main { padding: 22px 18px 28px; }
    .opps-topbar h1 { font-size: 26px; }
    .opps-stat-card {
        padding: 22px;
        gap: 18px;
    }
    .opps-stat-icon {
        width: 58px;
        height: 58px;
    }
    .opps-stat-card strong { font-size: 28px; }
}

/* ========================================================================
   Responsive viewport fit pass
   Keeps the application inside one viewport while panels adapt internally.
======================================================================== */
html,
body {
    width: 100%;
    height: 100%;
    overflow: hidden;
}
.app {
    height: 100vh;
    height: 100dvh;
    min-height: 0;
    overflow: hidden;
}
.main {
    height: 100vh;
    height: 100dvh;
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.topbar,
.page-head,
.flash,
.dash-stat-grid,
.opps-stat-grid,
.opps-tabs {
    flex-shrink: 0;
}
.panel,
.dash-modern-card,
.opps-table-card,
.form-card,
.settings-card {
    min-height: 0;
}
.main > .panel:last-child,
.main > .settings-grid:last-child,
.main > .help-panel:last-child,
.main > .opps-table-card:last-child,
.main > .product-builder:last-child {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
}
.main > .panel:last-child,
.main > .help-panel:last-child {
    overflow: auto;
}
body.dashboard-modern,
body.dashboard-modern html,
body.dashboard-modern .app,
body.dashboard-modern .main,
body.opportunities-redesign,
body.opportunities-redesign html,
body.opportunities-redesign .app,
body.opportunities-redesign .main {
    height: 100vh;
    height: 100dvh;
    min-height: 0;
    overflow: hidden;
}
body.dashboard-modern .main,
body.opportunities-redesign .main {
    display: flex;
    flex-direction: column;
    padding-block: clamp(16px, 2.6vh, 28px);
}
body.dashboard-modern .topbar,
body.opportunities-redesign .topbar {
    margin-bottom: clamp(12px, 2vh, 24px);
}
body.dashboard-modern .main {
    gap: clamp(10px, 1.45vh, 16px);
}
.dash-modern-top,
.opps-topbar {
    min-height: 50px;
}
.dash-modern-top h1,
.opps-topbar h1 {
    font-size: clamp(21px, 2.35vw, 28px);
}
.dash-modern-top p,
.opps-topbar p {
    font-size: clamp(12px, 1.25vw, 14px);
}
.dash-stat-grid {
    gap: clamp(10px, 1.4vw, 18px);
    margin-bottom: 0;
}
.dash-stat-card {
    min-height: clamp(96px, 15vh, 150px);
    padding: clamp(16px, 2.4vw, 30px);
}
.dash-stat-icon {
    width: clamp(48px, 5vw, 64px);
    height: clamp(48px, 5vw, 64px);
}
.dash-stat-card strong {
    font-size: clamp(25px, 3vw, 34px);
}
.dash-modern-card {
    margin-bottom: 0;
    padding: clamp(16px, 2vw, 24px) clamp(18px, 2.4vw, 28px);
}
body.dashboard-modern .recent-products {
    flex: 0.86 1 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding-bottom: clamp(14px, 1.7vw, 20px);
}
body.dashboard-modern .recent-products .dash-section-head {
    margin-bottom: 14px;
}
body.dashboard-modern .recent-products .dash-product-table {
    flex: 1 1 auto;
    min-height: 0;
}
body.dashboard-modern .recent-products .dash-product-row {
    min-height: clamp(42px, 5.4vh, 56px);
}
body.dashboard-modern .recent-products .dash-product-head {
    min-height: 28px;
}
body.dashboard-modern .recent-products .product-action {
    margin-top: auto;
}
body.dashboard-modern .dash-modern-card:last-child {
    flex: 1.15 1 0;
    min-height: 0;
    margin-bottom: 0;
    overflow: hidden;
}
body.dashboard-modern .opportunity-summary {
    display: flex;
    flex-direction: column;
    flex: 1.15 1 0;
    overflow: hidden;
}
body.dashboard-modern .opportunity-layout {
    flex: 1 1 auto;
    min-height: 0;
    align-items: center;
}
.dash-product-row {
    min-height: clamp(42px, 6vh, 58px);
}
.opps-stat-grid {
    gap: clamp(10px, 1.5vw, 22px);
    margin-bottom: clamp(12px, 2vh, 28px);
}
.opps-stat-card {
    min-height: clamp(94px, 13vh, 132px);
    padding: clamp(18px, 2.6vw, 28px) clamp(22px, 3vw, 42px);
}
.opps-table-card {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}
.opps-table-wrap {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
}
.opps-table-footer {
    flex-shrink: 0;
}
.proj-table {
    min-width: 0;
}
.proj-table th,
.proj-table td {
    white-space: normal;
}
.product-builder {
    min-height: 0;
    overflow: hidden;
}
.main > .product-builder:has([data-selected-pack-panel]:not([hidden])),
.product-builder:has([data-selected-pack-panel]:not([hidden])) {
    overflow: hidden;
}
.product-builder-start,
.product-builder-flow {
    min-height: 0;
    height: 100%;
    overflow: auto;
}
.product-builder-start {
    min-height: calc(100vh - 120px);
    min-height: calc(100dvh - 120px);
    display: grid;
    place-items: center;
    align-content: center;
}
.product-builder-start .builder-prompt {
    transform: translateY(-32px);
}
.product-builder-flow {
    margin-top: -64px;
    padding-top: 0;
    padding-bottom: 64px;
    gap: 12px;
}
.product-builder-flow:has([data-selected-pack-panel]:not([hidden])) {
    overflow: auto;
    padding-bottom: 24px;
}
.product-builder-flow:has([data-selected-pack-panel]:not([hidden])) .builder-selected-pack {
    max-height: none;
    padding-bottom: 0;
}
.builder-flow-head {
    margin-top: 0;
}

@media (min-width: 981px) {
    .product-builder:has([data-selected-pack-panel]:not([hidden])) {
        display: flex;
        flex-direction: column;
        height: 100%;
        min-height: 0;
    }

    .product-builder-flow:has([data-selected-pack-panel]:not([hidden])) {
        flex: 1 1 auto;
        height: 100%;
        min-height: 0;
        overflow: hidden;
        padding-bottom: 0;
    }

    .product-builder-flow:has([data-selected-pack-panel]:not([hidden])) .builder-flow-head,
    .product-builder-flow:has([data-selected-pack-panel]:not([hidden])) .packaging-flow-grid {
        flex: 0 0 auto;
    }

    .builder-selected-pack {
        flex: 1 1 auto;
        min-height: 0;
        height: 100%;
        align-items: stretch;
    }

    .packaging-preview-card,
    .builder-assess-form {
        min-height: 0;
        height: 100%;
        overflow: hidden;
    }

    .packaging-preview-card {
        display: flex;
        flex-direction: column;
    }

    .packaging-preview-card .selected-pack-preview {
        flex: 1 1 auto;
        min-height: 0;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .selected-pack-preview .pack-photo-stage {
        height: 100%;
        max-height: none;
    }

    .builder-assess-form {
        gap: clamp(6px, 0.8vh, 10px);
        overflow-y: auto;
        scrollbar-gutter: stable;
    }

    .builder-assess-form textarea {
        min-height: clamp(66px, 9vh, 92px);
        max-height: clamp(76px, 10vh, 104px);
    }

    .builder-claim-head,
    .claim-list,
    .additional-claim-button,
    .builder-assess-form > label,
    .builder-assess-form > select,
    .serving-size-row,
    .food-weight-row,
    .claim-placement-card,
    .premium-analysis-row {
        flex-shrink: 0;
    }

    .builder-claim-step > select,
    .serving-size-row,
    .food-weight-row,
    .claim-placement-card,
    .premium-analysis-row,
    .additional-claim-button {
        margin-bottom: 0 !important;
    }

    .claim-placement-card {
        margin-top: clamp(12px, 2vh, 22px);
    }

    .builder-claim-step > select + label,
    .other-food-type + label {
        margin-top: clamp(10px, 1.8vh, 20px);
    }

    .additional-claim-button + label {
        margin-top: clamp(18px, 3vh, 34px);
    }

    .serving-size-row,
    .food-weight-row {
        margin-top: 2px;
    }

    .builder-assess-form .actions {
        flex-shrink: 0;
        margin-top: auto;
        padding-top: clamp(8px, 1.3vh, 16px);
    }

    .assess-claim-button {
        margin-bottom: 0;
    }
}

@media (max-width: 1180px) {
    .app {
        grid-template-columns: 220px 1fr;
    }
    .sidebar .brand-logo {
        max-width: 190px;
    }
    .nav li a.nav-big {
        min-height: 48px;
        padding: 11px 12px;
    }
    .upgrade-card {
        padding: 12px;
    }
    .upgrade-sub {
        display: none;
    }
    .dash-stat-grid,
    .opps-stat-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    .opportunity-layout {
        grid-template-columns: minmax(380px, 0.9fr) minmax(0, 1.1fr);
    }
}

@media (max-width: 980px) {
    .app {
        grid-template-columns: 1fr;
        grid-template-rows: 68px minmax(0, 1fr);
    }
    .sidebar {
        min-height: 0;
        height: 68px;
        padding: 8px 10px;
        flex-direction: row;
        align-items: center;
        gap: 10px;
        overflow: hidden;
    }
    .sidebar .brand {
        flex: 0 0 auto;
        width: 144px;
        padding: 0;
        margin: 0;
        border-bottom: 0;
    }
    .sidebar .brand-logo {
        max-width: 144px;
    }
    .nav {
        flex: 1 1 auto;
        min-width: 0;
        height: 52px;
        flex-direction: row;
        align-items: center;
        justify-content: flex-end;
        gap: 6px;
        overflow: hidden;
    }
    .nav .nav-section,
    .nav .nav-spacer,
    .nav-upgrade {
        display: none;
    }
    .nav li {
        flex: 0 0 auto;
    }
    .nav li a,
    .nav li a.nav-big,
    .nav .nav-help {
        width: 46px;
        height: 46px;
        min-height: 46px;
        padding: 0;
        margin: 0;
        justify-content: center;
        border-radius: 10px !important;
    }
    .nav-label,
    .nav-arrow {
        display: none;
    }
    .nav li a .icon,
    .nav li a.nav-big .icon,
    .nav li a.nav-big.nav-opportunities .icon {
        width: 22px;
        height: 22px;
    }
    .nav-count-bubble {
        top: -5px;
        right: -5px;
        width: 19px;
        height: 19px;
        font-size: 10px;
    }
    .main,
    body.dashboard-modern .main,
    body.opportunities-redesign .main {
        height: calc(100vh - 68px);
        height: calc(100dvh - 68px);
        padding: 16px;
    }
    body.dashboard-modern .main {
        gap: 12px;
        overflow-y: auto;
    }
    body.dashboard-modern .recent-products,
    body.dashboard-modern .dash-modern-card:last-child,
    body.dashboard-modern .opportunity-summary {
        flex: 0 0 auto;
        overflow: visible;
    }
    body.dashboard-modern .recent-products .dash-product-table,
    body.dashboard-modern .opportunity-layout {
        flex: 0 1 auto;
    }
    body.dashboard-modern .recent-products .product-action {
        margin-top: 10px;
    }
    .topbar {
        min-height: 44px;
        margin-bottom: 12px;
        gap: 8px;
        flex-wrap: nowrap;
    }
    .iconbtn {
        width: 40px;
        height: 40px;
        flex: 0 0 40px;
    }
    .account-btn {
        min-height: 40px;
        padding: 4px 8px 4px 5px;
        gap: 8px;
        border-radius: 12px;
    }
    .account-btn .avatar {
        width: 30px;
        height: 30px;
        font-size: 11px;
    }
    .account-text,
    .account-chev {
        display: none;
    }
    .dropdown-panel {
        max-width: calc(100vw - 24px);
        min-width: min(320px, calc(100vw - 24px));
    }
    .page-head {
        min-height: 0;
        margin: 0 0 12px;
        padding-right: 0;
    }
    .page-head h1 {
        font-size: 22px;
    }
    .dash-modern-top,
    .opps-topbar {
        min-height: 44px;
        align-items: center;
        gap: 10px;
        flex-wrap: nowrap;
    }
    .dash-new-product,
    .opps-control {
        min-height: 38px;
        padding: 0 12px;
        font-size: 12px;
    }
    .dash-stat-grid,
    .opps-stat-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 8px;
    }
    .dash-stat-card,
    .opps-stat-card {
        min-height: 88px;
        padding: 14px;
        gap: 12px;
    }
    .dash-stat-icon,
    .opps-stat-icon {
        width: 42px;
        height: 42px;
    }
    .dash-stat-icon svg,
    .opps-stat-icon svg {
        width: 20px;
        height: 20px;
    }
    .dash-stat-label,
    .opps-stat-card span,
    .dash-stat-card small,
    .opps-stat-card small {
        font-size: 11px;
    }
    .dash-stat-card strong,
    .opps-stat-card strong {
        font-size: 22px;
        margin-bottom: 5px;
    }
    .dash-modern-card {
        padding: 14px;
    }
    .dash-section-head {
        margin-bottom: 12px;
    }
    .dash-section-head h2 {
        font-size: 15px;
    }
    .dash-product-row {
        grid-template-columns: minmax(180px, 1fr) minmax(86px, auto) minmax(72px, auto) 24px;
        min-height: 44px;
        gap: 10px;
    }
    body.dashboard-modern .recent-products .dash-product-row {
        min-height: 44px;
    }
    .dash-product-row > :nth-child(3) {
        display: none;
    }
    .opportunity-layout {
        grid-template-columns: minmax(0, 1fr);
        gap: 14px;
    }
    .opportunity-chart {
        display: grid;
        grid-template-columns: 132px minmax(0, 1fr);
        gap: 14px;
        padding: 0 0 12px;
    }
    .opportunity-donut {
        width: 132px;
        height: 132px;
    }
    .opportunity-legend {
        gap: 10px;
        font-size: 12px;
    }
    .opportunity-list {
        gap: 10px;
    }
    .opportunity-item {
        grid-template-columns: 34px minmax(0, 1fr) auto;
        gap: 10px;
    }
    .opportunity-item time {
        display: none;
    }
}

/* Account settings can exceed one viewport once onboarding preferences are shown. */
body.account-settings-page,
body.account-settings-page html,
body.account-settings-page .app {
    min-height: 100vh;
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
}
body.account-settings-page .main {
    height: 100vh;
    height: 100dvh;
    min-height: 0;
    overflow-y: auto;
    padding-bottom: 48px;
    display: block;
}
body.account-settings-page .form-card {
    margin-bottom: 48px;
}

@media (max-width: 720px) {
    .app {
        grid-template-rows: 58px minmax(0, 1fr);
    }
    .sidebar {
        height: 58px;
        padding: 7px 8px;
    }
    .sidebar .brand {
        width: 108px;
    }
    .sidebar .brand-logo {
        max-width: 108px;
    }
    .nav {
        height: 44px;
        gap: 4px;
    }
    .nav li a,
    .nav li a.nav-big,
    .nav .nav-help {
        width: 40px;
        height: 40px;
        min-height: 40px;
    }
    .main,
    body.dashboard-modern .main,
    body.opportunities-redesign .main {
        height: calc(100vh - 58px);
        height: calc(100dvh - 58px);
        padding: 12px;
    }
    .dash-modern-top,
    .opps-topbar {
        align-items: flex-start;
    }
    .dash-modern-top p,
    .opps-topbar p {
        display: none;
    }
    .dash-new-product {
        min-width: 0;
        width: auto;
        max-width: 100%;
        padding: 0 12px;
        color: var(--brand);
        position: static;
        overflow: hidden;
        font-size: 12px;
    }
    .dash-stat-grid,
    .opps-stat-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    .dash-stat-card,
    .opps-stat-card {
        min-height: 76px;
        padding: 10px;
        align-items: flex-start;
        flex-direction: column;
        gap: 6px;
    }
    .dash-stat-icon,
    .opps-stat-icon {
        width: 28px;
        height: 28px;
    }
    .dash-stat-icon svg,
    .opps-stat-icon svg {
        width: 15px;
        height: 15px;
    }
    .dash-stat-label,
    .opps-stat-card span {
        margin-bottom: 3px;
        font-size: 10px;
        line-height: 1.15;
    }
    .dash-stat-card strong,
    .opps-stat-card strong {
        font-size: 18px;
    }
    .dash-stat-card small,
    .opps-stat-card small {
        display: none;
    }
    .dash-modern-card {
        padding: 12px;
        border-radius: 10px;
    }
    .dash-section-head {
        margin-bottom: 10px;
    }
    .dash-section-head a:not(.dash-new-product) {
        display: none;
    }
    .dash-section-actions {
        justify-content: flex-start;
    }
    .dash-product-row {
        grid-template-columns: minmax(0, 1fr) minmax(58px, auto) 22px;
        min-height: 38px;
        font-size: 11px;
    }
    .dash-product-row > :nth-child(2),
    .dash-product-row > :nth-child(3) {
        display: none;
    }
    .dash-product-thumb {
        width: 28px;
        height: 28px;
    }
    .opportunity-chart {
        grid-template-columns: 92px minmax(0, 1fr);
    }
    .opportunity-donut {
        width: 92px;
        height: 92px;
    }
    .opportunity-donut strong {
        font-size: 18px;
    }
    .opportunity-donut span {
        max-width: 58px;
        font-size: 8px;
    }
    .opportunity-legend {
        gap: 6px;
        font-size: 10.5px;
    }
    .opportunity-legend div {
        grid-template-columns: 8px minmax(0, 1fr) 24px;
        gap: 7px;
    }
    .opportunity-list {
        display: none;
    }
    .proj-table th:nth-child(3),
    .proj-table td:nth-child(3),
    .proj-table th:nth-child(6),
    .proj-table td:nth-child(6) {
        display: none;
    }
    .proj-table th,
    .proj-table td {
        padding: 8px 6px;
        font-size: 11px;
    }
    .proj-table .product .thumb {
        width: 30px;
        height: 30px;
    }
    .opps-tabs {
        gap: 12px;
        margin-bottom: 10px;
    }
    .opps-tabs a {
        padding-bottom: 10px;
        font-size: 11px;
    }
    .opps-table {
        min-width: 0;
    }
    .opps-table thead {
        display: none;
    }
    .opps-table,
    .opps-table tbody,
    .opps-table tr,
    .opps-table td {
        display: block;
        width: 100%;
    }
    .opps-table tr {
        padding: 10px 12px;
        border-bottom: 1px solid #EEF2F6;
    }
    .opps-table td {
        padding: 4px 0;
        border-bottom: 0;
    }
    .opps-table td:nth-child(n+3):nth-child(-n+5) {
        display: none;
    }
    .opps-opportunity {
        grid-template-columns: 32px minmax(0, 1fr);
        gap: 10px;
    }
    .opps-row-icon {
        width: 32px;
        height: 32px;
    }
    .opps-opportunity strong {
        max-width: none;
        font-size: 12px;
    }
    .opps-opportunity small {
        -webkit-line-clamp: 1;
        font-size: 10.5px;
    }
    .opps-pill,
    .opps-launch {
        font-size: 10px;
    }
    .opps-table-footer {
        min-height: 48px;
        padding: 10px 12px;
        flex-direction: row;
        align-items: center;
    }
    .opps-pagination a,
    .opps-pagination span {
        width: 28px;
        height: 28px;
        font-size: 11px;
    }
    .grid-3,
    .grid-3-equal,
    .grid-2,
    .settings-grid,
    .help-grid,
    .comp-grid-2,
    .vis-top-row,
    .vis-main-row,
    .vis-bottom-row {
        grid-template-columns: 1fr !important;
        gap: 10px;
    }
    .panel,
    .form-card,
    .settings-card,
    .help-card {
        padding: 12px;
        border-radius: 10px;
    }
}

@media (max-width: 420px), (max-height: 680px) {
    .sidebar .brand {
        width: 92px;
    }
    .sidebar .brand-logo {
        max-width: 92px;
    }
    .nav {
        gap: 3px;
    }
    .nav li a,
    .nav li a.nav-big,
    .nav .nav-help {
        width: 36px;
        height: 38px;
        min-height: 38px;
    }
    .nav li a .icon,
    .nav li a.nav-big .icon,
    .nav li a.nav-big.nav-opportunities .icon {
        width: 18px;
        height: 18px;
    }
    .topbar {
        min-height: 38px;
        margin-bottom: 8px;
    }
    .dash-modern-top h1,
    .opps-topbar h1,
    .page-head h1 {
        font-size: 18px;
    }
    .iconbtn,
    .account-btn {
        width: 38px;
        min-height: 38px;
        height: 38px;
    }
    .account-btn {
        padding: 4px;
    }
    .account-btn .avatar {
        width: 28px;
        height: 28px;
    }
    .dash-stat-card,
    .opps-stat-card {
        min-height: 66px;
        padding: 8px;
    }
    .dash-modern-card {
        padding: 10px;
        margin-bottom: 8px;
    }
    .dash-section-head h2 {
        font-size: 13px;
    }
    .dash-product-row {
        min-height: 32px;
    }
    .opportunity-chart {
        grid-template-columns: 76px minmax(0, 1fr);
        gap: 10px;
    }
    .opportunity-donut {
        width: 76px;
        height: 76px;
    }
    .opportunity-legend div:nth-child(4) {
        display: none;
    }
}

/* ========================================================================
   Phone navigation
   Replaces the compressed icon strip with a labelled hamburger menu.
======================================================================== */
@media (max-width: 980px) {
    .app {
        grid-template-rows: 64px minmax(0, 1fr);
    }
    .sidebar {
        position: relative;
        z-index: 50;
        height: 64px;
        padding: 8px 12px;
        overflow: visible;
        justify-content: center;
    }
    .sidebar .brand {
        width: 100%;
        max-width: none;
        flex: 1 1 auto;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding: 0;
        margin: 0;
        border-bottom: 0;
    }
    .sidebar .brand-logo,
    .sidebar .brand-logo img {
        width: 142px;
        max-width: 142px;
    }
    .mobile-nav-toggle {
        width: 42px;
        height: 42px;
        flex: 0 0 42px;
        border: 1px solid rgba(255,255,255,0.12);
        border-radius: 10px;
        background: var(--nav-active);
        color: #fff;
        display: inline-flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 5px;
        cursor: pointer;
        box-shadow: inset 0 1px 0 rgba(255,255,255,0.08);
    }
    .mobile-nav-toggle span {
        width: 18px;
        height: 2px;
        border-radius: 999px;
        background: currentColor;
        transition: transform .16s ease, opacity .16s ease;
    }
    body.mobile-nav-open .mobile-nav-toggle span:nth-child(1) {
        transform: translateY(7px) rotate(45deg);
    }
    body.mobile-nav-open .mobile-nav-toggle span:nth-child(2) {
        opacity: 0;
    }
    body.mobile-nav-open .mobile-nav-toggle span:nth-child(3) {
        transform: translateY(-7px) rotate(-45deg);
    }
    .mobile-nav-backdrop {
        position: fixed;
        inset: 64px 0 0;
        z-index: 35;
        background: rgba(15, 27, 45, 0.30);
        opacity: 0;
        pointer-events: none;
        transition: opacity .16s ease;
    }
    body.mobile-nav-open .mobile-nav-backdrop {
        display: block;
        opacity: 1;
        pointer-events: auto;
    }
    .nav.nav-primary {
        position: fixed;
        top: 74px;
        left: 12px;
        right: 12px;
        z-index: 60;
        height: auto;
        max-height: calc(100dvh - 92px);
        padding: 10px;
        display: none;
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        gap: 6px;
        overflow: auto;
        background: var(--nav-bg);
        border: 1px solid rgba(255,255,255,0.10);
        border-radius: 14px;
        box-shadow: 0 20px 48px rgba(14, 20, 48, 0.32);
    }
    body.mobile-nav-open .nav.nav-primary {
        display: flex;
    }
    .nav.nav-primary li {
        width: 100%;
        flex: 0 0 auto;
    }
    .nav.nav-primary .nav-section {
        display: block;
        margin: 8px 10px 2px;
        color: #7E8AA8;
        font-size: 10px;
        font-weight: 800;
        letter-spacing: .9px;
        text-transform: uppercase;
    }
    .nav.nav-primary .nav-spacer,
    .nav.nav-primary .nav-upgrade {
        display: none;
    }
    .nav.nav-primary li a,
    .nav.nav-primary li a.nav-big,
    .nav.nav-primary .nav-help {
        width: 100%;
        height: auto;
        min-height: 48px;
        padding: 12px 13px;
        margin: 0;
        justify-content: flex-start;
        border-radius: 10px !important;
    }
    .nav.nav-primary .nav-label,
    .nav.nav-primary .nav-arrow {
        display: inline-flex;
    }
    .nav.nav-primary .nav-label {
        flex: 1 1 auto;
    }
    .nav.nav-primary .nav-arrow {
        margin-left: auto;
    }
    .nav.nav-primary li a .icon,
    .nav.nav-primary li a.nav-big .icon,
    .nav.nav-primary li a.nav-big.nav-opportunities .icon {
        width: 22px;
        height: 22px;
    }
    .nav-count-bubble {
        top: 8px;
        right: 8px;
    }
    .main,
    body.dashboard-modern .main,
    body.opportunities-redesign .main {
        height: calc(100dvh - 64px);
        padding: 12px;
    }
    body.mobile-nav-open {
        overflow: hidden;
    }
}

@media (max-width: 720px) {
    .app {
        grid-template-rows: 58px minmax(0, 1fr);
    }
    .sidebar {
        height: 58px;
        padding: 7px 10px;
    }
    .sidebar .brand-logo,
    .sidebar .brand-logo img {
        width: 112px;
        max-width: 112px;
    }
    .mobile-nav-toggle {
        width: 40px;
        height: 40px;
        flex-basis: 40px;
    }
    .mobile-nav-backdrop {
        inset: 58px 0 0;
    }
    .nav.nav-primary {
        top: 68px;
        max-height: calc(100dvh - 84px);
    }
    .main,
    body.dashboard-modern .main,
    body.opportunities-redesign .main {
        height: calc(100dvh - 58px);
    }
}

/* Unified selected state for primary navigation */
.nav li a.nav-opportunities.has-unread {
    min-height: 54px;
    padding: 14px 14px;
}

.nav li a.nav-big.active,
.nav li a.nav-dashboard.active,
.nav li a.nav-opportunities.active,
.nav li a.nav-opportunities.has-unread.active {
    min-height: 54px;
    padding: 14px 14px;
    background: #F7FAFF;
    border-color: rgba(255,255,255,0.72);
    color: #10182F;
    box-shadow: none;
    transform: none;
}

.nav li a.nav-big.active:hover,
.nav li a.nav-dashboard.active:hover,
.nav li a.nav-opportunities.active:hover,
.nav li a.nav-opportunities.has-unread.active:hover {
    background: #FFFFFF;
    border-color: rgba(255,255,255,0.82);
    color: #10182F;
    box-shadow: none;
    transform: none;
}

.nav li a.nav-big.active .icon,
.nav li a.nav-dashboard.active .icon,
.nav li a.nav-opportunities.active .icon,
.nav li a.nav-opportunities.has-unread.active .icon {
    color: #5B2EFF;
}

.nav li a.nav-big.active .nav-arrow,
.nav li a.nav-opportunities.active .nav-arrow,
.nav li a.nav-opportunities.has-unread.active .nav-arrow {
    color: #10182F;
    margin-right: 0;
    transform: none;
}

.nav li a.nav-opportunities.has-unread.active::after {
    opacity: 0;
}

.nav li a.nav-opportunities.has-unread .nav-arrow,
.nav li a.nav-opportunities.has-unread:hover .nav-arrow {
    margin-right: 0;
    transform: none;
}

.nav li a.nav-opportunities.has-unread:hover {
    transform: none;
}

@media (max-width: 1180px) {
    .nav li a.nav-big.active,
    .nav li a.nav-dashboard.active,
    .nav li a.nav-opportunities.active,
    .nav li a.nav-opportunities.has-unread,
    .nav li a.nav-opportunities.has-unread.active {
        min-height: 48px;
        padding: 11px 12px;
    }
}

@media (max-width: 980px) {
    .nav.nav-primary li a.nav-opportunities.has-unread,
    .nav.nav-primary li a.nav-big.active,
    .nav.nav-primary li a.nav-dashboard.active,
    .nav.nav-primary li a.nav-opportunities.active,
    .nav.nav-primary li a.nav-opportunities.has-unread.active {
        min-height: 48px;
        padding: 12px 13px;
    }
}

/* Mobile compatibility fixes for action buttons and compact headers */
@media (max-width: 980px) {
    .topbar,
    body.dashboard-modern .topbar,
    body.opportunities-redesign .topbar {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 40px auto;
        align-items: start;
        gap: 8px;
        min-height: 0;
        flex-wrap: initial;
    }

    .topbar > .dropdown {
        min-width: 0;
    }

    .topbar > .dropdown:last-child {
        justify-self: end;
    }

    .dash-modern-top,
    .opps-topbar {
        width: 100%;
        min-width: 0;
        min-height: 0;
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        align-items: start;
        gap: 10px;
    }

    .dash-modern-top h1,
    .opps-topbar h1 {
        overflow-wrap: anywhere;
    }

    .dash-new-product {
        width: fit-content;
        max-width: 100%;
        min-height: 40px;
        padding: 0 14px;
        color: #fff;
        white-space: normal;
        text-align: center;
        line-height: 1.15;
    }

    .opps-topbar-actions {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    .opps-control {
        width: 100%;
        min-width: 0;
        justify-content: center;
    }

    .product-builder {
        min-height: 0;
    }

    .product-builder-flow {
        margin-top: 0;
        padding-bottom: 0;
    }

    .product-builder-start {
        min-height: 0;
        place-items: start stretch;
        padding: 10px 0 18px;
    }

    .builder-prompt {
        justify-items: center;
        text-align: center;
        transform: none;
    }

    .builder-prompt h1 {
        font-size: 34px;
    }

    .builder-intro {
        max-width: none;
    }

    .builder-start-card {
        width: 100%;
        padding: 20px;
    }

    .builder-name-input {
        width: 100%;
        min-width: 0;
        height: 52px;
        font-size: 18px;
        text-align: center;
    }

    .builder-enter {
        width: 100%;
        height: 48px;
        padding: 0 16px;
        justify-content: center;
        white-space: normal;
    }

    .builder-start-steps {
        width: 100%;
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .builder-step {
        grid-template-columns: 34px 44px minmax(0, 1fr);
        justify-items: start;
        text-align: left;
        column-gap: 12px;
        padding: 10px 12px;
        border: 1px solid var(--panel-border);
        border-radius: 12px;
        background: rgba(255, 255, 255, 0.72);
    }

    .builder-step strong {
        grid-row: span 2;
        align-self: center;
    }

    .builder-step-icon {
        grid-row: span 2;
        width: 44px;
        height: 44px;
    }

    .builder-step b,
    .builder-step small {
        max-width: none;
    }

    .builder-flow-head,
    .builder-claim-head {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 10px;
    }

    .builder-flow-head .btn,
    .builder-claim-head .btn {
        width: fit-content;
    }
}

@media (max-width: 720px) {
    .topbar,
    body.dashboard-modern .topbar,
    body.opportunities-redesign .topbar {
        grid-template-columns: minmax(0, 1fr) 40px 40px;
        align-items: start;
    }

    .dash-new-product {
        min-width: 0;
        width: fit-content;
        max-width: 100%;
        min-height: 40px;
        padding: 0 12px;
        color: var(--brand);
        position: static;
        overflow: visible;
        font-size: 12px;
    }

    .dash-modern-top,
    .opps-topbar {
        align-items: start;
    }

    .opps-topbar-actions {
        grid-template-columns: 1fr;
    }

    .builder-prompt h1 {
        font-size: 28px;
    }

    .builder-format-preview {
        justify-content: flex-start;
    }
}

@media (max-width: 420px), (max-height: 680px) {
    .topbar,
    body.dashboard-modern .topbar,
    body.opportunities-redesign .topbar {
        min-height: 0;
    }

    .dash-new-product {
        min-height: 38px;
        font-size: 11.5px;
        padding: 0 10px;
    }
}

/* Canonical sidebar nav metrics: active/hover states must never move buttons. */
.sidebar .nav-primary li a.nav-big,
.sidebar .nav-primary li a.nav-big:hover,
.sidebar .nav-primary li a.nav-big.active,
.sidebar .nav-primary li a.nav-big.active:hover,
.sidebar .nav-primary li a.nav-opportunities,
.sidebar .nav-primary li a.nav-opportunities:hover,
.sidebar .nav-primary li a.nav-opportunities.active,
.sidebar .nav-primary li a.nav-opportunities.active:hover,
.sidebar .nav-primary li a.nav-opportunities.has-unread,
.sidebar .nav-primary li a.nav-opportunities.has-unread:hover,
.sidebar .nav-primary li a.nav-opportunities.has-unread.active,
.sidebar .nav-primary li a.nav-opportunities.has-unread.active:hover {
    box-sizing: border-box !important;
    height: 54px !important;
    min-height: 54px !important;
    max-height: 54px !important;
    margin: 0 !important;
    padding: 0 14px !important;
    border-width: 1px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    transform: none !important;
    transition: background-color .14s ease, border-color .14s ease, color .14s ease !important;
}

.sidebar .nav-primary li a.nav-big.active,
.sidebar .nav-primary li a.nav-big.active:hover,
.sidebar .nav-primary li a.nav-opportunities.active,
.sidebar .nav-primary li a.nav-opportunities.active:hover,
.sidebar .nav-primary li a.nav-opportunities.has-unread.active,
.sidebar .nav-primary li a.nav-opportunities.has-unread.active:hover {
    background: #F7FAFF !important;
    border-color: rgba(255,255,255,0.72) !important;
    color: #10182F !important;
    box-shadow: none !important;
}

.sidebar .nav-primary li a.nav-opportunities.has-unread:not(.active),
.sidebar .nav-primary li a.nav-opportunities.has-unread:not(.active):hover {
    background: linear-gradient(135deg, #FFF4D6 0%, #FFD36B 100%) !important;
    border-color: rgba(255, 211, 107, 0.9) !important;
    color: #3B2A06 !important;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.45), 0 8px 20px rgba(138, 96, 12, 0.18) !important;
}

.sidebar .nav-primary li a.nav-dashboard,
.sidebar .nav-primary li a.nav-dashboard:hover,
.sidebar .nav-primary li a.nav-dashboard.active,
.sidebar .nav-primary li a.nav-dashboard.active:hover,
.sidebar .nav-primary li a.nav-opportunities,
.sidebar .nav-primary li a.nav-opportunities:hover,
.sidebar .nav-primary li a.nav-opportunities.active,
.sidebar .nav-primary li a.nav-opportunities.active:hover,
.sidebar .nav-primary li a.nav-help,
.sidebar .nav-primary li a.nav-help:hover,
.sidebar .nav-primary li a.nav-help.active,
.sidebar .nav-primary li a.nav-help.active:hover {
    transform: none !important;
}

.sidebar .nav-primary li a.nav-help,
.sidebar .nav-primary li a.nav-help:hover,
.sidebar .nav-primary li a.nav-help.active,
.sidebar .nav-primary li a.nav-help.active:hover {
    box-sizing: border-box !important;
    height: 48px !important;
    min-height: 48px !important;
    max-height: 48px !important;
    margin: 0 !important;
    padding: 0 12px !important;
    border-width: 1px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    box-shadow: none !important;
}

.sidebar .nav-primary li a.nav-big .icon,
.sidebar .nav-primary li a.nav-big:hover .icon,
.sidebar .nav-primary li a.nav-big.active .icon,
.sidebar .nav-primary li a.nav-big.active:hover .icon,
.sidebar .nav-primary li a.nav-help .icon,
.sidebar .nav-primary li a.nav-help:hover .icon,
.sidebar .nav-primary li a.nav-help.active .icon,
.sidebar .nav-primary li a.nav-help.active:hover .icon {
    width: 22px !important;
    height: 22px !important;
    flex: 0 0 22px !important;
}

.sidebar .nav-primary li a.nav-opportunities .nav-arrow,
.sidebar .nav-primary li a.nav-opportunities:hover .nav-arrow,
.sidebar .nav-primary li a.nav-opportunities.active .nav-arrow,
.sidebar .nav-primary li a.nav-opportunities.active:hover .nav-arrow {
    margin: 0 0 0 auto !important;
    transform: none !important;
}

.sidebar .nav-primary li a.nav-opportunities.has-unread::after,
.sidebar .nav-primary li a.nav-opportunities.has-unread:hover::after,
.sidebar .nav-primary li a.nav-opportunities.has-unread.active::after,
.sidebar .nav-primary li a.nav-opportunities.has-unread.active:hover::after {
    opacity: 0 !important;
}

@media (max-width: 1180px) {
    .sidebar .nav-primary li a.nav-big,
    .sidebar .nav-primary li a.nav-big:hover,
    .sidebar .nav-primary li a.nav-big.active,
    .sidebar .nav-primary li a.nav-big.active:hover,
    .sidebar .nav-primary li a.nav-opportunities,
    .sidebar .nav-primary li a.nav-opportunities:hover,
    .sidebar .nav-primary li a.nav-opportunities.active,
    .sidebar .nav-primary li a.nav-opportunities.active:hover,
    .sidebar .nav-primary li a.nav-opportunities.has-unread,
    .sidebar .nav-primary li a.nav-opportunities.has-unread:hover,
    .sidebar .nav-primary li a.nav-opportunities.has-unread.active,
    .sidebar .nav-primary li a.nav-opportunities.has-unread.active:hover {
        height: 48px !important;
        min-height: 48px !important;
        max-height: 48px !important;
        padding: 0 12px !important;
    }
}

@media (max-width: 980px) {
    .sidebar .nav.nav-primary li a,
    .sidebar .nav.nav-primary li a:hover,
    .sidebar .nav.nav-primary li a.active,
    .sidebar .nav.nav-primary li a.active:hover,
    .sidebar .nav.nav-primary li a.nav-big,
    .sidebar .nav.nav-primary li a.nav-big:hover,
    .sidebar .nav.nav-primary li a.nav-big.active,
    .sidebar .nav.nav-primary li a.nav-big.active:hover,
    .sidebar .nav.nav-primary li a.nav-opportunities,
    .sidebar .nav.nav-primary li a.nav-opportunities:hover,
    .sidebar .nav.nav-primary li a.nav-opportunities.active,
    .sidebar .nav.nav-primary li a.nav-opportunities.active:hover,
    .sidebar .nav.nav-primary li a.nav-opportunities.has-unread,
    .sidebar .nav.nav-primary li a.nav-opportunities.has-unread:hover,
    .sidebar .nav.nav-primary li a.nav-opportunities.has-unread.active,
    .sidebar .nav.nav-primary li a.nav-opportunities.has-unread.active:hover {
        height: 48px !important;
        min-height: 48px !important;
        max-height: 48px !important;
        padding: 0 13px !important;
        transform: none !important;
    }
}

/* Final phone compatibility pass for dense Opportunities and Claim Studio pages. */
@media (max-width: 760px) {
    body.opportunities-redesign .main,
    .main:has(.product-builder) {
        overflow-x: hidden;
    }

    .opps-stat-grid {
        grid-template-columns: 1fr !important;
        gap: 10px;
    }

    .opps-stat-card {
        min-height: 86px;
        display: grid;
        grid-template-columns: 44px minmax(0, 1fr);
        align-items: center;
        padding: 12px 14px;
    }

    .opps-stat-icon {
        width: 44px;
        height: 44px;
    }

    .opps-stat-card small {
        display: block;
        font-size: 11px;
    }

    .opps-tabs {
        display: flex;
        gap: 8px;
        overflow-x: auto;
        padding-bottom: 4px;
        scrollbar-width: none;
    }

    .opps-tabs::-webkit-scrollbar {
        display: none;
    }

    .opps-tabs a {
        flex: 0 0 auto;
        min-height: 38px;
        display: inline-flex;
        align-items: center;
        white-space: nowrap;
        padding: 0 4px 8px;
        font-size: 12px;
    }

    .opps-table-card {
        overflow: hidden;
        border-radius: 10px;
    }

    .opps-table-wrap {
        overflow: visible;
        max-height: none;
    }

    .opps-table,
    .opps-table tbody,
    .opps-table tr,
    .opps-table td {
        display: block;
        width: 100% !important;
        min-width: 0 !important;
    }

    .opps-table thead {
        display: none;
    }

    .opps-table tr {
        margin: 0;
        padding: 14px;
        border-bottom: 1px solid #EEF2F6;
    }

    .opps-table td {
        padding: 0;
        border: 0;
    }

    .opps-table td + td {
        margin-top: 10px;
    }

    .opps-table td:nth-child(3) {
        display: none;
    }

    .opps-table td:nth-child(4),
    .opps-table td:nth-child(5) {
        display: inline-flex;
        width: auto !important;
        margin-top: 10px;
        margin-right: 8px;
        vertical-align: middle;
    }

    .opps-table td:nth-child(6) {
        margin-top: 12px;
    }

    .opps-opportunity {
        grid-template-columns: 40px minmax(0, 1fr);
        gap: 12px;
        align-items: flex-start;
    }

    .opps-row-icon {
        width: 40px;
        height: 40px;
    }

    .opps-opportunity strong {
        display: block;
        max-width: 100%;
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
        font-size: 14px;
        line-height: 1.3;
    }

    .opps-opportunity small {
        display: -webkit-box;
        margin-top: 4px;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
        white-space: normal;
        font-size: 12px;
        line-height: 1.35;
    }

    .opps-pill {
        font-size: 11px;
        line-height: 1.2;
        white-space: normal;
    }

    .opps-launch {
        width: 100%;
        min-height: 42px;
        justify-content: center;
        font-size: 12px;
    }

    .opps-table-footer {
        display: grid;
        grid-template-columns: 1fr;
        gap: 10px;
        align-items: stretch;
        padding: 12px 14px;
    }

    .opps-table-footer span {
        font-size: 12px;
        line-height: 1.35;
    }

    .opps-see-all {
        width: 100%;
        justify-content: center;
    }

    .opps-modal-panel {
        inset: 10px;
        width: auto;
        max-height: calc(100dvh - 20px);
        padding: 14px;
        border-radius: 12px;
    }

    .opps-modal-table {
        overflow: auto;
    }

    .product-builder-flow {
        gap: 12px;
    }

    .builder-flow-head {
        align-items: start;
    }

    .builder-flow-head h1 {
        font-size: 24px;
        line-height: 1.15;
    }

    .builder-flow-head .sub {
        font-size: 13px;
        line-height: 1.35;
    }

    .packaging-flow-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .pack-option,
    .photo-pack {
        min-height: 210px;
        padding: 10px 8px;
    }

    .pack-photo-stage {
        height: 168px;
    }

    .pack-option > span {
        font-size: 12px;
        line-height: 1.2;
        text-align: center;
    }

    .builder-selected-pack {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 12px;
    }

    .packaging-preview-card,
    .builder-assess-form {
        width: 100%;
        min-width: 0;
        padding: 14px;
        border-radius: 10px;
    }

    .packaging-preview-head {
        gap: 10px;
    }

    .preview-title {
        min-width: 0;
        font-size: 12px;
        letter-spacing: 0.8px;
    }

    .packaging-preview-head .btn,
    .builder-flow-head .btn {
        min-height: 38px;
        padding: 0 12px;
        white-space: nowrap;
    }

    .selected-pack-preview {
        padding: 10px;
    }

    .selected-pack-preview .pack-photo-stage {
        height: min(38vh, 300px);
    }

    .selected-pack-preview .pack-photo-name {
        font-size: 15px;
    }

    .builder-claim-head h2 {
        font-size: 24px;
        line-height: 1.1;
    }

    .builder-claim-head p {
        font-size: 13px;
        line-height: 1.35;
    }

    .builder-assess-form textarea {
        min-height: 92px;
        max-height: 112px;
    }

    .serving-size-row,
    .food-weight-row {
        grid-template-columns: minmax(0, 1fr) 82px;
        gap: 8px;
    }

    .claim-placement-card {
        padding: 12px;
        margin-bottom: 10px;
    }

    .placement-options {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .placement-option {
        min-height: 48px;
        padding: 10px 12px;
    }

    .premium-analysis-row {
        grid-template-columns: 20px minmax(0, 1fr) 40px;
        gap: 10px;
        padding: 12px;
        align-items: center;
    }

    .premium-analysis-row strong {
        font-size: 13px;
        line-height: 1.25;
    }

    .premium-analysis-row small {
        font-size: 11px;
    }

    .premium-mark {
        width: 36px;
        height: 36px;
    }

    .premium-mark::before {
        width: 22px;
        height: 22px;
    }

    .builder-assess-form .actions,
    .assess-claim-button {
        width: 100%;
    }

    .assess-claim-button {
        min-width: 0;
        justify-content: center;
    }
}

@media (max-width: 430px) {
    body.opportunities-redesign .main,
    .main:has(.product-builder) {
        padding-left: 10px;
        padding-right: 10px;
    }

    .opps-topbar h1 {
        font-size: 24px;
    }

    .opps-stat-card {
        min-height: 78px;
        grid-template-columns: 38px minmax(0, 1fr);
    }

    .opps-stat-icon {
        width: 38px;
        height: 38px;
    }

    .opps-table tr {
        padding: 12px;
    }

    .opps-opportunity {
        grid-template-columns: 34px minmax(0, 1fr);
        gap: 10px;
    }

    .opps-row-icon {
        width: 34px;
        height: 34px;
    }

    .opps-opportunity strong {
        font-size: 13px;
    }

    .packaging-flow-grid {
        grid-template-columns: 1fr;
    }

    .pack-option,
    .photo-pack {
        min-height: 230px;
    }

    .pack-photo-stage {
        height: 184px;
    }

    .selected-pack-preview .pack-photo-stage {
        height: min(34vh, 260px);
    }

    .builder-assess-form textarea {
        min-height: 82px;
    }

    .premium-analysis-row {
        grid-template-columns: 20px minmax(0, 1fr) 34px;
    }

    .premium-mark {
        width: 32px;
        height: 32px;
    }
}

/* Mobile Opportunities needs page-level vertical scrolling once the table becomes cards. */
@media (max-width: 760px) {
    body.opportunities-redesign .main {
        height: calc(100vh - 68px);
        height: calc(100dvh - 68px);
        min-height: 0;
        display: block;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
        padding-top: 12px;
        padding-bottom: 18px;
    }

    body.opportunities-redesign .topbar {
        margin-bottom: 10px;
    }

    body.opportunities-redesign .opps-stat-grid {
        margin-bottom: 12px;
    }

    body.opportunities-redesign .opps-tabs {
        margin-bottom: 12px;
    }

    body.opportunities-redesign .main > .opps-table-card:last-child,
    body.opportunities-redesign .opps-table-card {
        display: block;
        flex: 0 0 auto;
        min-height: 0;
        overflow: visible !important;
    }

    body.opportunities-redesign .opps-table-wrap {
        display: block;
        max-height: none !important;
        overflow: visible !important;
    }

    body.opportunities-redesign .opps-table {
        min-width: 0 !important;
        table-layout: auto;
    }

    body.opportunities-redesign .opps-table tbody {
        display: block;
    }

    body.opportunities-redesign .opps-table tr {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 10px;
        padding: 14px;
        background: #FFFFFF;
        border-bottom: 1px solid #EEF2F6;
    }

    body.opportunities-redesign .opps-table td {
        display: block;
        width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 0;
        border: 0;
        color: #344054;
        font-size: 12px;
        line-height: 1.35;
    }

    body.opportunities-redesign .opps-table td:nth-child(3) {
        display: none;
    }

    body.opportunities-redesign .opps-table td:nth-child(2),
    body.opportunities-redesign .opps-table td:nth-child(4),
    body.opportunities-redesign .opps-table td:nth-child(5) {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        min-height: 26px;
    }

    body.opportunities-redesign .opps-table td:nth-child(2)::before,
    body.opportunities-redesign .opps-table td:nth-child(4)::before,
    body.opportunities-redesign .opps-table td:nth-child(5)::before {
        color: #667085;
        font-size: 11px;
        font-weight: 800;
        letter-spacing: .02em;
        text-transform: uppercase;
    }

    body.opportunities-redesign .opps-table td:nth-child(2)::before {
        content: "Type";
    }

    body.opportunities-redesign .opps-table td:nth-child(4)::before {
        content: "Impact";
    }

    body.opportunities-redesign .opps-table td:nth-child(5)::before {
        content: "Added";
    }

    body.opportunities-redesign .opps-opportunity {
        display: grid;
        grid-template-columns: 40px minmax(0, 1fr);
        gap: 12px;
        align-items: flex-start;
    }

    body.opportunities-redesign .opps-opportunity strong,
    body.opportunities-redesign .opps-title-link {
        max-width: 100%;
        overflow: visible;
        color: #0B1220;
        font-size: 14px;
        line-height: 1.3;
        text-overflow: clip;
        white-space: normal;
    }

    body.opportunities-redesign .opps-opportunity small {
        display: -webkit-box;
        max-width: 100%;
        overflow: hidden;
        font-size: 12px;
        line-height: 1.4;
        white-space: normal;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
    }

    body.opportunities-redesign .signal-source-details {
        margin-top: 9px;
        font-size: 11.5px;
    }

    body.opportunities-redesign .signal-source-details p {
        max-width: none;
    }

    body.opportunities-redesign .opps-launch {
        width: 100%;
        min-height: 42px;
        margin-top: 2px;
        justify-content: center;
    }

    body.opportunities-redesign .opps-table-footer {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 10px;
        min-height: 0;
        padding: 12px 14px 14px;
    }

    body.opportunities-redesign .opps-table-footer span {
        overflow-wrap: anywhere;
    }
}

/* Claim Studio must behave like a normal scrollable page on phones. */
@media (max-width: 760px) {
    .main:has(.product-builder) {
        height: calc(100vh - 68px);
        height: calc(100dvh - 68px);
        min-height: 0;
        overflow-y: auto;
        overflow-x: hidden;
        padding-top: 12px;
        padding-bottom: 18px;
        display: block;
    }

    .main:has(.product-builder) .topbar {
        margin-bottom: 10px;
    }

    .main > .product-builder:last-child,
    .product-builder,
    .product-builder-start,
    .product-builder-flow {
        height: auto;
        min-height: 0;
        overflow: visible;
    }

    .product-builder-start {
        display: block;
        padding: 6px 0 16px;
    }

    .product-builder-start .builder-prompt {
        width: 100%;
        gap: 12px;
        transform: none;
    }

    .product-builder-start .builder-prompt h1 {
        display: block;
        margin: 0;
        font-size: clamp(28px, 8vw, 34px);
        line-height: 1.08;
    }

    .product-builder-start .builder-intro {
        margin: 0;
        font-size: 13px;
        line-height: 1.4;
    }

    .product-builder-start .builder-start-card,
    .product-builder-start .builder-start-steps {
        width: 100%;
        grid-template-columns: minmax(0, 1fr);
    }

    .product-builder-start .builder-name-input,
    .product-builder-start .builder-enter {
        min-width: 0;
        width: 100%;
    }

    .product-builder-start .builder-start-card {
        padding: 18px;
    }

    .project-manager {
        gap: 12px;
    }

    .project-manager-hero {
        grid-template-columns: 44px minmax(0, 1fr);
        gap: 12px;
        padding: 16px;
    }

    .project-manager-icon {
        width: 44px;
        height: 44px;
        border-radius: 12px;
    }

    .project-manager-icon svg {
        width: 22px;
        height: 22px;
    }

    .project-manager-hero h2 {
        font-size: 22px;
    }

    .project-manager-badges {
        grid-column: 1 / -1;
        justify-content: flex-start;
    }

    .project-manager-grid,
    .project-manager-grid.lower,
    .project-form-row {
        grid-template-columns: minmax(0, 1fr);
    }

    .project-manager-card {
        padding: 16px;
    }

    .project-detail-list div {
        grid-template-columns: minmax(0, 1fr);
        gap: 4px;
    }

    .project-linked-list a,
    .project-spec-row,
    .project-activity-list div {
        align-items: flex-start;
        flex-direction: column;
    }
}

@media (max-width: 430px) {
    .main:has(.product-builder) {
        padding-top: 10px;
        padding-left: 10px;
        padding-right: 10px;
    }

    .product-builder-start .builder-prompt h1 {
        font-size: 27px;
    }

    .product-builder-start .builder-name-input {
        height: 48px;
        font-size: 16px;
        padding-inline: 12px;
    }
}