.management {
    /* ThePlugin design tokens — single source of truth (spec §7/§9/§37). */
    --tp-navy: #0d1b2e;
    --tp-navy-2: #14243b;
    --tp-primary: #0b5cff;
    --tp-primary-rgb: 11, 92, 255;
    --tp-ai-1: #0b5cff;
    --tp-ai-2: #6046f8;
    --tp-bg: #f6f8fc;
    --tp-surface: #ffffff;
    --tp-border: #e1e7f0;
    --tp-text: #0d1533;
    --tp-text-2: #66728f;
    --tp-success: #16a35b;
    --tp-warning: #f5a623;
    --tp-error: #f04444;
    --tp-pink: #db2777;
    --tp-radius: 12px;
    --tp-radius-sm: 8px;
    --tp-sidebar-w: 256px;
    --tp-topbar-h: 64px;
    --tp-gradient-ai: linear-gradient(100deg, var(--tp-ai-1), var(--tp-ai-2));
    /* Retheme Tabler globally so existing cards/tables/buttons/forms inherit. */
    --tblr-font-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, sans-serif;
    --tblr-primary: var(--tp-primary);
    --tblr-primary-rgb: var(--tp-primary-rgb);
    --tblr-body-bg: var(--tp-bg);
    --tblr-body-color: var(--tp-text);
    --tblr-secondary: var(--tp-text-2);
    --tblr-border-color: var(--tp-border);
    --tblr-border-color-translucent: var(--tp-border);
    --tblr-border-radius: 10px;
    --tblr-link-color: var(--tp-primary);
    color: var(--tp-text);
}
.management .card { border: 1px solid var(--tp-border); box-shadow: 0 1px 2px #0d153308; }
.management .btn-primary { --tblr-btn-bg: var(--tp-primary); --tblr-btn-border-color: var(--tp-primary); --tblr-btn-hover-bg: #0a4fe0; --tblr-btn-hover-border-color: #0a4fe0; }
.management .btn { font-weight: 600; }
.management .table th { color: var(--tp-text-2); text-transform: uppercase; }
/* AI / generative action treatment (spec §11). */
.management .btn-ai { background: var(--tp-gradient-ai); border: 0; color: #fff; font-weight: 600; }
.management .btn-ai:hover, .management .btn-ai:focus { color: #fff; filter: brightness(1.05); }
.management .card { border-radius: 12px; box-shadow: 0 2px 5px #18274603; }
.management .btn { border-radius: 7px; font-weight: 600; }
.management .form-control, .management .form-select { border-radius: 7px; }
.management .brand { display: inline-flex; align-items: center; color: inherit; font-size: 24px; font-weight: 750; letter-spacing: -1px; text-decoration: none; }
.brand-symbol { display: inline-grid; place-items: center; width: 35px; height: 35px; margin-right: 12px; background: #3159d8; color: white; border-radius: 10px; font-size: 19px; letter-spacing: -1.5px; }
.brand-dot { color: #6485ff; }
.eyebrow { font-size: 10px; font-weight: 700; letter-spacing: 2px; }
.management .page-title { font-size: 27px; letter-spacing: -.7px; overflow-wrap: anywhere; }
.management .page-pretitle { font-size: 10px; letter-spacing: 1.5px; }
.management-footer { padding: 22px 0; font-size: 11px; color: #838da0; border-top: 1px solid #e4e7ef; }
.management .card-header { min-height: 76px; }
.management .table td { padding-top: 20px; padding-bottom: 20px; }
.management .table th { font-size: 10px; letter-spacing: .5px; }
.detail-list dt { font-size: 12px; color: #7a8499; font-weight: 500; }
.detail-list dd { overflow-wrap: anywhere; margin-bottom: 20px; font-size: 13px; }
.domain-search { max-width: 100%; }
.domain-search input { width: 265px; max-width: 100%; }
.password-card { max-width: 620px; }
.management .review-note { white-space: pre-wrap; overflow-wrap: anywhere; }
.skip-link { position: absolute; z-index: 1000; padding: 10px; background: white; }
.management-login { background: #fafbfe; }
.login-layout { min-height: 100vh; display: grid; grid-template-columns: 46% 54%; }
.login-story { background: radial-gradient(ellipse at 100% 85%, #314578 0, transparent 60%), linear-gradient(150deg, #131e36, #1f2b4b); color: #fff; padding: 48px 12%; display: flex; flex-direction: column; position: relative; overflow: hidden; }
.login-story::after { content: ""; position: absolute; width: 650px; height: 650px; border: 1px solid #ffffff09; border-radius: 50%; bottom: -320px; right: -230px; box-shadow: 0 0 0 70px #ffffff02, 0 0 0 140px #ffffff02; pointer-events: none; }
.login-story .brand-symbol { background: #526eea; }
.login-story-copy { margin: auto 0; padding: 80px 0; z-index: 1; }
.login-story-copy .eyebrow { color: #9caee6; }
.login-story h1 { color: #fff; font-size: clamp(40px, 4vw, 64px); letter-spacing: -2.8px; font-weight: 650; line-height: 1.08; margin: 27px 0; }
.login-story p { color: #acb6cd; font-size: 15px; line-height: 1.9; max-width: 340px; }
.story-rule { width: 35px; height: 2px; background: #687ff2; margin: 30px 0 24px; }
.login-story-copy .small { color: #c7cfe1; font-size: 12px; }
.login-story-footer { font-size: 9px; letter-spacing: 1.5px; color: #7f8ead; }
.login-form-panel { display: grid; place-items: center; padding: 64px 32px; }
.login-form-wrap { width: 100%; max-width: 390px; }
.login-form-wrap h2 { font-size: 28px; letter-spacing: -.9px; line-height: 1.25; }
.login-form-wrap .form-control { background: #fff; }
.login-note { border-top: 1px solid #e4e7ef; padding-top: 24px; margin-top: 48px; color: #8b95a9; font-size: 10px; }
@media (max-width: 767px) {
    .login-layout { display: block; }
    .login-story { padding: 28px; }
    .login-story-copy { padding: 30px 0 0; }
    .login-story h1 { font-size: 40px; margin: 16px 0; }
    .login-story-copy p, .story-rule, .login-story-copy .small, .login-story-footer { display: none; }
    .login-form-panel { padding: 40px 24px; }
    .domain-search { width: 100%; }
    .domain-search input { width: 100%; min-width: 0; }
}
.assistant-message { white-space: pre-wrap; overflow-wrap: anywhere; }
.assistant-turn { padding-top: 24px; margin-top: 24px; border-top: 2px solid #dce3ec; }
.assistant-turn:first-of-type { padding-top: 0; margin-top: 0; border-top: 0; }
.assistant-turn-time { text-align: center; color: #687487; font-size: 12px; margin-bottom: 16px; }
.assistant-action-buttons { display: grid; gap: 10px; }
.assistant-draft-button { display: grid; grid-template-columns: 1fr auto; text-align: left; white-space: normal; gap: 5px 12px; padding: 14px 16px; }
.assistant-draft-button strong { grid-column: 1; overflow-wrap: anywhere; }
.assistant-draft-button > span:first-child { font-size: 12px; }
.assistant-draft-button > span:last-child { grid-column: 2; grid-row: 1 / 3; align-self: center; }
.assistant-conversations { display: grid; gap: 10px; margin-bottom: 16px; }
.assistant-conversations a { display: block; padding: 13px; border: 1px solid #dce3ec; border-radius: 10px; text-decoration: none; overflow-wrap: anywhere; }
.assistant-conversations a[aria-current="page"] { background: #edf2ff; border-color: #3868f2; }
.assistant-conversations small { display: block; margin-top: 6px; color: #687487; }
.assistant-draft-dialog { width: min(760px, calc(100vw - 32px)); max-height: 85vh; overflow-y: auto; padding: 24px; border: 1px solid #dce3ec; border-radius: 16px; }
.assistant-draft-dialog::backdrop { background: rgb(7 30 59 / 55%); }
.assistant-draft-dialog dt { margin-top: 14px; }
.assistant-draft-dialog dd { margin: 5px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.assistant-media-image { max-height: 360px; object-fit: contain; }
.assistant-chat-window {
    color-scheme: dark;
    --tblr-body-color: #f3f3f3;
    --tblr-body-bg: #212121;
    --tblr-bg-surface: #212121;
    --tblr-bg-surface-secondary: #303030;
    --tblr-border-color: #414141;
    --tblr-secondary: #b8b8b8;
    --tblr-secondary-rgb: 184, 184, 184;
    background: #212121;
    color: #f3f3f3;
    border-color: #414141;
}
.assistant-chat-window .assistant-user-message { background: #303030; }
.assistant-chat-window .assistant-turn { border-color: #414141; }
.assistant-chat-window :is(.assistant-turn-time, .form-hint) { color: #b8b8b8; }
.assistant-chat-window a { color: #a6c7ff; }
.assistant-chat-window :is(.form-control, .form-select) { background-color: #303030; color: #f3f3f3; border-color: #575757; }
.assistant-chat-window .form-control::placeholder { color: #b8b8b8; opacity: 1; }
.assistant-chat-window .btn { --tblr-btn-color: #f3f3f3; --tblr-btn-bg: #303030; --tblr-btn-border-color: #575757; --tblr-btn-hover-color: #f3f3f3; --tblr-btn-hover-bg: #414141; --tblr-btn-hover-border-color: #858585; }
.assistant-chat-window .btn-primary { --tblr-btn-color: #171717; --tblr-btn-bg: #f3f3f3; --tblr-btn-border-color: #f3f3f3; --tblr-btn-hover-color: #171717; --tblr-btn-hover-bg: #d9d9d9; --tblr-btn-hover-border-color: #d9d9d9; }
.assistant-chat-window :is(a, button, input, select, textarea, summary):focus-visible { outline: 3px solid #a6c7ff; outline-offset: 3px; }
.assistant-chat-window .alert-info { background: #293442; color: #c4dcff; border-color: #414141; }
.management #api_key::placeholder { color: #182433; opacity: 1; }
.account-menu-details { max-width: 180px; }
.management .account-menu-trigger { color: #17233a; background: transparent; border-color: transparent; }
.management .account-menu-trigger:is(:hover, :focus, :active, .show) { color: #17233a; background: #edf2ff; border-color: #bac9ea; box-shadow: none; }
.management .account-menu-role { color: #475569; }
.management .account-menu-avatar { color: #2447ad; background: #dce7ff; }
.management .account-menu .dropdown-item { color: #17233a; }
.management .account-menu .dropdown-item:is(:hover, :focus, :active, .active) { color: #17233a; background: #edf2ff; }
.management .account-menu .dropdown-item:focus-visible { outline: 2px solid #3159d8; outline-offset: -2px; }
.account-menu .dropdown-menu { min-width: 180px; margin-top: 0; }
.account-menu > button:focus-visible { outline: 2px solid #3159d8; outline-offset: 2px; }
@media (max-width: 767px) { .account-menu-details { display: none; } }

/* Conversation-only styling; surrounding administration pages stay unchanged. */
:is(.assistant-chat-window, .theplugin-ui .tp-chat-preview) { display: flex; flex-direction: column; height: min(78vh, 860px); min-height: 520px; border-radius: 22px; overflow: hidden; }
.assistant-chat-body { display: flex; flex-direction: column; flex: 1; min-height: 0; }
:is(.assistant-chat-window, .theplugin-ui .tp-chat-preview) :is(.card-header, .tp-chat-heading) { flex: none; padding: 16px 22px; }
:is(.assistant-chat-window, .theplugin-ui .tp-chat-preview) .chat-transcript { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 24px; scrollbar-width: thin; }
:is(.assistant-chat-window, .theplugin-ui .tp-chat-preview) :is(.assistant-turn, .tp-chat-turn) { display: flex; flex-direction: column; gap: 14px; width: 100%; max-width: 760px; margin: 0 auto; padding: 0 0 30px; border: 0; }
:is(.assistant-chat-window, .theplugin-ui .tp-chat-preview) :is(.assistant-turn-time, .tp-chat-turn-time) { margin: 0 0 4px; font-size: 11px; color: #aaa; text-align: center; }
:is(.assistant-chat-window, .theplugin-ui .tp-chat-preview) .chat-user { width: fit-content; max-width: 85%; margin-left: auto; padding: 12px 18px; border: 0; border-radius: 22px 22px 6px 22px; background: #353535; color: #f3f3f3; }
:is(.assistant-chat-window, .theplugin-ui .tp-chat-preview) .chat-reply { width: fit-content; max-width: 94%; padding: 14px 18px; border: 0; border-radius: 22px 22px 22px 6px; background: #292929; color: #f3f3f3; }
:is(.assistant-chat-window, .theplugin-ui .tp-chat-preview) :is(.chat-user, .chat-reply) > :is(strong, h3) { display: block; margin: 0 0 6px; font: 600 11px/1.5 system-ui, sans-serif; color: #c4c4c4; }
:is(.assistant-chat-window, .theplugin-ui .tp-chat-preview) :is(.chat-user, .chat-reply) p { font-size: 15px; line-height: 1.65; margin: 0; overflow-wrap: anywhere; white-space: pre-wrap; }
:is(.assistant-chat-window, .theplugin-ui .tp-chat-preview) .chat-reply details { margin-top: 12px; font-size: 12px; color: #b8b8b8; }
:is(.assistant-chat-window, .theplugin-ui .tp-chat-preview) .chat-composer { position: relative; flex: none; width: calc(100% - 32px); max-width: 820px; margin: 8px auto 4px; padding: 10px 14px; background: #303030; border: 1px solid #4a4a4a; border-radius: 26px; box-sizing: border-box; }
:is(.assistant-chat-window, .theplugin-ui .tp-chat-preview) .chat-composer textarea { display: block; width: 100%; min-height: 48px; max-height: 160px; margin: 0; padding: 8px 4px; border: 0; border-radius: 0; box-shadow: none; resize: none; background: transparent; color: #f3f3f3; font: 400 15px/24px system-ui, sans-serif; }
:is(.assistant-chat-window, .theplugin-ui .tp-chat-preview) .chat-composer textarea:focus { outline: none; box-shadow: none; }
:is(.assistant-chat-window, .theplugin-ui .tp-chat-preview) .chat-composer:focus-within { border-color: #969696; }
.chat-toolbar { display: flex; align-items: center; gap: 8px; }
.chat-toolbar .chat-tool { min-width: 0; max-width: 52%; margin: 0; }
:is(.assistant-chat-window, .theplugin-ui .tp-chat-preview) .chat-tool select { width: auto; max-width: 100%; min-height: 34px; padding: 4px 28px 4px 10px; font-size: 12px; border: 0; border-radius: 18px; background-color: #3b3b3b; color: #eee; }
.chat-attach { display: grid; place-items: center; flex: none; width: 34px; height: 34px; margin: 0; border-radius: 50%; font-size: 24px; cursor: pointer; }
.chat-attach:is(:hover, :focus-within) { background: #454545; outline: 2px solid #a6c7ff; }
.chat-options { position: relative; margin: 0; }
.chat-options > summary { cursor: pointer; list-style: none; padding: 6px 8px; border-radius: 16px; font-size: 12px; }
.chat-options > summary::-webkit-details-marker { display: none; }
.chat-options[open] > summary { background: #454545; }
.chat-options-panel { position: absolute; bottom: calc(100% + 18px); right: 0; z-index: 20; width: min(320px, 72vw); max-height: 42vh; overflow-y: auto; padding: 18px; border: 1px solid #555; border-radius: 18px; background: #303030; color: #eee; box-shadow: 0 12px 38px #0008; }
.chat-options-panel label { font-size: 12px; }
:is(.assistant-chat-window, .theplugin-ui .tp-chat-preview) .chat-options-panel p { font-size: 12px; line-height: 1.5; color: #bbb; margin: 10px 0; }
:is(.assistant-chat-window, .theplugin-ui .tp-chat-preview) .chat-send { display: grid; place-items: center; flex: none; width: 36px; height: 36px; min-width: 36px; margin-left: auto; padding: 0; border: 0; border-radius: 50%; background: #f3f3f3; color: #171717; font-size: 24px; line-height: 1; }
.chat-send:disabled { opacity: .4; }
.chat-file-name { display: block; max-width: 100%; color: #ccc; font-size: 11px; overflow-wrap: anywhere; }
.chat-file-name:empty { display: none; }
.chat-reuse-file { display: block; margin: 8px 0; }
.chat-retry { padding: 0; background: transparent; border: 0; color: #c4dcff; text-decoration: underline; cursor: pointer; }
:is(.assistant-chat-window, .theplugin-ui .tp-chat-preview) .chat-status { flex: none; min-height: 12px; margin: 3px 22px 10px; font-size: 12px; color: #ffc9c9; }
.chat-thinking { display: flex; gap: 10px; align-items: center; color: #c4c4c4; }
.chat-spinner { display: inline-block; flex: none; width: 16px; height: 16px; border: 2px solid #ffffff30; border-top-color: #eee; border-radius: 50%; animation: chat-spin .8s linear infinite; }
.chat-inline-media { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(180px,100%), 1fr)); gap: 12px; margin-top: 12px; }
.chat-inline-media-card { min-width: 0; max-width: 320px; padding: 12px; border: 1px solid #ffffff30; border-radius: 14px; display: grid; gap: 10px; }
.chat-inline-media-actions { display: flex; flex-wrap: wrap; gap: 8px; font-size: 12px; }
.chat-media-enlarge { padding: 0; border: 0; border-radius: 10px; background: transparent; cursor: zoom-in; }
.chat-media-enlarge img { display: block; width: 100%; height: 160px; object-fit: contain; }
.chat-image-dialog { max-width: min(900px,90vw); max-height: 90vh; padding: 24px; border: 1px solid #555; border-radius: 18px; background: #242424; color: #eee; }
.chat-image-dialog::backdrop { background: #000b; }
.chat-image-dialog img { display: block; width: min(800px,80vw); max-height: 75vh; object-fit: contain; margin-top: 12px; }
.chat-image-dialog button { border: 1px solid #777; background: #333; color: white; border-radius: 8px; padding: 9px 14px; margin-right: 8px; cursor: pointer; }
@keyframes chat-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .chat-spinner { animation: none; } }
.chat-older { display: block; order: -1; align-self: center; text-align: center; margin: 0 auto 22px; font-size: 12px; }
:is(.assistant-chat-window, .theplugin-ui .tp-chat-preview) :is(.chat-media, .tp-chat-assets) { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 12px; }
:is(.assistant-chat-window, .theplugin-ui .tp-chat-preview) :is(.chat-media, .tp-chat-assets) a { display: block; width: min(300px, 100%); font-size: 12px; }
:is(.assistant-chat-window, .theplugin-ui .tp-chat-preview) :is(.chat-media, .tp-chat-assets) img { display: block; width: 100%; max-height: 300px; object-fit: contain; border-radius: 14px; margin-bottom: 6px; }
.theplugin-ui .tp-grid2.tp-chat-layout { grid-template-columns: minmax(0, 1fr) 260px; }
.brand-feel-preview { aspect-ratio: 1; max-width: 560px; margin-top: 12px; overflow: hidden; border: 1px solid var(--tblr-border-color); border-radius: 12px; background: var(--tblr-bg-surface-secondary); }
.brand-feel-preview img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.brand-feel-empty { display: grid; place-items: center; height: 100%; padding: 30px; color: var(--tblr-secondary); text-align: center; }
.brand-feel-logo img { display: block; max-width: min(320px, 100%); max-height: 160px; object-fit: contain; object-position: left center; }
.brand-feel-colours { display: flex; flex-wrap: wrap; gap: 12px 22px; }
.brand-feel-colours span { display: inline-flex; align-items: center; gap: 8px; }
.brand-feel-colours input[type="color"] { width: 34px; height: 34px; padding: 2px; border: 1px solid var(--tblr-border-color); border-radius: 6px; background: #fff; opacity: 1; pointer-events: none; }
.brand-feel-colours input[type="color"]::-webkit-color-swatch { border: 0; border-radius: 3px; }
@media (min-width: 992px) { .brand-feel-side { position: sticky; top: 24px; } }
@media (max-width: 1000px) { .theplugin-ui .tp-grid2.tp-chat-layout { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 600px) {
    .assistant-layout { margin-inline: 0; }
    .assistant-layout > :is(section, aside) { padding-inline: 0; }
    :is(.assistant-chat-window, .theplugin-ui .tp-chat-preview) { min-height: 460px; height: 76vh; }
    :is(.assistant-chat-window, .theplugin-ui .tp-chat-preview) .chat-transcript { padding: 16px 12px; }
    :is(.assistant-chat-window, .theplugin-ui .tp-chat-preview) .chat-user { max-width: 94%; }
    :is(.assistant-chat-window, .theplugin-ui .tp-chat-preview) .chat-composer { width: calc(100% - 16px); padding: 8px 10px; }
    .chat-toolbar { gap: 4px; }
}

/* ===== App shell v2: dark sidebar + topbar + site context (spec §4/§5) ===== */
.app-shell { display: grid; grid-template-columns: var(--tp-sidebar-w) minmax(0, 1fr); min-height: 100vh; }
.nav-scrim { display: none; }
.app-main { display: flex; flex-direction: column; min-width: 0; background: var(--tp-bg); }
.app-content { flex: 1; padding: 28px 32px; }
.app-content > .page-header { margin: 0 0 24px; }
.app-content .page-pretitle { color: var(--tp-text-2); font-size: 11px; letter-spacing: 1.5px; }
.app-content .page-title { font-size: 30px; font-weight: 750; letter-spacing: -.6px; margin-top: 6px; }

/* Sidebar */
.app-sidebar { position: sticky; top: 0; align-self: start; height: 100vh; overflow-y: auto; display: flex; flex-direction: column; gap: 4px; padding: 20px 16px; background: var(--tp-navy); color: #aeb9cd; scrollbar-width: thin; }
.app-sidebar .brand { color: #fff; padding: 4px 6px 2px; }
.app-sidebar .brand-symbol { background: var(--tp-primary); }
.app-sidebar .brand-sub { display: block; padding: 0 6px; margin: -2px 0 14px; font-size: 11px; letter-spacing: .3px; color: #6f7d97; }
.side-label { padding: 16px 8px 6px; font-size: 10px; font-weight: 700; letter-spacing: 1.6px; color: #6b7997; }
.side-nav { display: flex; flex-direction: column; gap: 2px; }
.side-nav a { display: flex; align-items: center; gap: 12px; padding: 9px 12px; border-radius: var(--tp-radius-sm); color: #aeb9cd; font-size: 14px; font-weight: 600; text-decoration: none; transition: background .15s, color .15s; }
.side-nav a:hover { background: #ffffff12; color: #fff; }
.side-nav a.active { background: var(--tp-primary); color: #fff; }
.side-nav a .icon { width: 19px; height: 19px; flex: none; }
.side-nav .side-count { margin-left: auto; font-size: 11px; font-weight: 700; background: #ffffff1f; color: #fff; border-radius: 20px; padding: 1px 8px; }
.side-spacer { flex: 1 1 auto; }
.side-divider { height: 1px; background: #ffffff14; margin: 12px 6px; }

/* Site selector */
.site-selector { margin: 6px 0 8px; }
.site-selector > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 11px; padding: 12px; border: 1px solid #ffffff1f; border-radius: var(--tp-radius); background: #ffffff0a; }
.site-selector > summary::-webkit-details-marker { display: none; }
.site-selector .sel-mono { display: grid; place-items: center; width: 34px; height: 34px; flex: none; border-radius: 9px; background: var(--tp-primary); color: #fff; font-weight: 700; font-size: 14px; }
.site-selector .sel-mono.all { background: #26364f; }
.site-selector .sel-text { min-width: 0; }
.site-selector .sel-text strong { display: block; color: #fff; font-size: 14px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.site-selector .sel-text span { display: block; color: #7d8ba6; font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.site-selector .sel-caret { margin-left: auto; color: #7d8ba6; }
.site-selector[open] .sel-caret { transform: rotate(180deg); }
.site-menu { margin-top: 6px; max-height: 320px; overflow-y: auto; border: 1px solid #ffffff17; border-radius: var(--tp-radius); background: var(--tp-navy-2); padding: 6px; }
.site-menu a { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: var(--tp-radius-sm); color: #c7d0e0; text-decoration: none; font-size: 13px; }
.site-menu a:hover, .site-menu a[aria-current="true"] { background: #ffffff12; color: #fff; }
.site-menu .sel-mono { width: 26px; height: 26px; font-size: 12px; border-radius: 7px; }
.site-menu-hint { margin: 6px 0 0; color: #c7d0e0; font-size: 12px; text-align: center; }

/* User chip */
.side-user { display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: var(--tp-radius); background: #ffffff0a; text-decoration: none; }
.side-user:hover { background: #ffffff14; }
.side-user .avatar { background: #26364f; color: #fff; }
.side-user .su-text { min-width: 0; }
.side-user .su-text strong { display: block; color: #fff; font-size: 13px; }
.side-user .su-text span { display: block; color: #7d8ba6; font-size: 11px; }

/* Topbar */
.app-topbar { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 14px; height: var(--tp-topbar-h); padding: 0 24px 0 20px; background: var(--tp-surface); border-bottom: 1px solid var(--tp-border); }
.app-topbar .topbar-search { flex: 1; max-width: 520px; }
.app-topbar .topbar-search .input-icon .form-control { background: var(--tp-bg); border-color: transparent; }
.app-topbar .topbar-search .form-control:focus { background: #fff; border-color: var(--tp-primary); }
.app-topbar .topbar-icon { display: none; place-items: center; width: 38px; height: 38px; border-radius: 9px; color: var(--tp-text-2); position: relative; text-decoration: none; }
.app-topbar .topbar-icon:hover { background: var(--tp-bg); color: var(--tp-text); }
.app-topbar .topbar-icon .dot { position: absolute; top: 8px; right: 9px; width: 7px; height: 7px; border-radius: 50%; background: var(--tp-error); border: 2px solid #fff; }
.nav-drawer-toggle { display: none; }
.nav-drawer-btn { display: none; }

/* Site context header (spec §5) */
.site-context { display: flex; align-items: center; gap: 16px; padding: 16px 32px; background: var(--tp-surface); border-bottom: 1px solid var(--tp-border); }
.site-context .sc-mono { display: grid; place-items: center; width: 46px; height: 46px; flex: none; border-radius: 11px; background: var(--tp-primary); color: #fff; font-weight: 700; font-size: 18px; }
.site-context .sc-name { display: flex; align-items: center; gap: 10px; font-size: 19px; font-weight: 700; letter-spacing: -.3px; }
.site-context .sc-url { color: var(--tp-text-2); font-size: 13px; }
.site-context .sc-actions { margin-left: auto; display: flex; gap: 10px; }

/* Status pills (spec §14) — pale semantic backgrounds */
.tp-pill { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 20px; font-size: 12px; font-weight: 600; line-height: 1.5; }
.tp-pill::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.tp-pill.is-live, .tp-pill.is-complete, .tp-pill.is-ready { color: var(--tp-success); background: #16a35b18; }
.tp-pill.is-progress { color: #b9791a; background: #f5a62322; }
.tp-pill.is-attention, .tp-pill.is-error { color: var(--tp-error); background: #f0444418; }
.tp-pill.is-paused, .tp-pill.is-draft { color: var(--tp-text-2); background: #66728f1f; }
.tp-pill.is-info { color: var(--tp-primary); background: #0b5cff14; }

/* Responsive: sidebar becomes an off-canvas drawer (spec §31), no JS. */
@media (max-width: 991.98px) {
    .app-shell { grid-template-columns: 1fr; }
    .app-sidebar { position: fixed; z-index: 60; width: min(84vw, var(--tp-sidebar-w)); transform: translateX(-100%); transition: transform .3s cubic-bezier(.4, 0, .2, 1); box-shadow: 0 0 40px #0009; }
    .nav-scrim { display: block; position: fixed; inset: 0; z-index: 55; background: #0d153366; opacity: 0; visibility: hidden; transition: opacity .3s cubic-bezier(.4, 0, .2, 1), visibility .3s; }
    .nav-drawer-toggle:checked ~ .app-shell .app-sidebar { transform: none; }
    .nav-drawer-toggle:checked ~ .app-shell .nav-scrim { opacity: 1; visibility: visible; }
    .nav-drawer-btn { display: grid; place-items: center; width: 38px; height: 38px; border: 0; border-radius: 9px; background: transparent; color: var(--tp-text); }
    .site-context { padding-left: 20px; padding-right: 20px; }
    .app-content { padding: 20px 16px; }
    .site-context .sc-actions .btn span { display: none; }
}
/* Page header stacks below its actions on narrow screens so the title keeps full width. */
@media (max-width: 767.98px) {
    .app-content > .page-header .row { row-gap: 14px; }
    .app-content > .page-header .col-auto { flex: 0 0 100%; }
    .app-content > .page-header .col-auto .btn { margin-bottom: 0; }
}
@media (prefers-reduced-motion: reduce) { .app-sidebar, .app-shell, .nav-scrim { transition: none; } }

/* ===== Metric cards + dashboard (spec §15) ===== */
.dash-subtitle { color: var(--tp-text-2); font-size: 15px; margin: 4px 0 0; }
.metric-card .card-body { padding: 18px 20px; }
.metric-icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 11px; background: #0b5cff14; color: var(--tp-primary); margin-bottom: 14px; }
.metric-icon .icon { width: 21px; height: 21px; }
.metric-icon.green { background: #16a35b18; color: var(--tp-success); }
.metric-icon.amber { background: #f5a62322; color: #b9791a; }
.metric-icon.purple { background: #6046f818; color: var(--tp-ai-2); }
.metric-value { font-size: 30px; font-weight: 750; letter-spacing: -1px; line-height: 1.1; }
.metric-label { color: var(--tp-text); font-weight: 600; font-size: 14px; margin-top: 2px; }
.metric-sub { color: var(--tp-text-2); font-size: 12px; margin-top: 6px; }
.metric-sub.up { color: var(--tp-success); }
.metric-sub.down { color: var(--tp-error); }

.activity-list { display: flex; flex-direction: column; }
.activity-item { display: flex; align-items: flex-start; gap: 12px; padding: 13px 0; border-top: 1px solid var(--tp-border); }
.activity-item:first-child { border-top: 0; }
.activity-dot { flex: none; width: 34px; height: 34px; border-radius: 9px; background: #0b5cff10; color: var(--tp-primary); display: grid; place-items: center; }
.activity-dot .icon { width: 17px; height: 17px; }
.activity-main { min-width: 0; flex: 1; }
.activity-main strong { display: block; font-size: 14px; font-weight: 600; }
.activity-main span { color: var(--tp-text-2); font-size: 12px; }
.activity-time { color: var(--tp-text-2); font-size: 12px; white-space: nowrap; }

.quick-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.quick-action { display: flex; align-items: center; gap: 11px; padding: 14px; border: 1px solid var(--tp-border); border-radius: var(--tp-radius); color: var(--tp-text); text-decoration: none; font-weight: 600; font-size: 13px; transition: border-color .15s, background .15s; }
.quick-action:hover { border-color: var(--tp-primary); background: #0b5cff08; color: var(--tp-text); }
.quick-action .icon { width: 19px; height: 19px; color: var(--tp-primary); flex: none; }

/* ===== Filter tabs (spec §17) ===== */
.tp-tabs { display: flex; flex-wrap: wrap; gap: 4px; padding: 4px 16px 0; border-bottom: 1px solid var(--tp-border); }
.tp-tab { display: inline-flex; align-items: center; gap: 7px; padding: 12px 14px; margin-bottom: -1px; color: var(--tp-text-2); font-size: 14px; font-weight: 600; text-decoration: none; border-bottom: 2px solid transparent; }
.tp-tab:hover { color: var(--tp-text); }
.tp-tab.active { color: var(--tp-primary); border-color: var(--tp-primary); }
.tp-tab-count { font-size: 11px; font-weight: 700; background: var(--tp-bg); color: var(--tp-text-2); border-radius: 20px; padding: 1px 8px; }
.tp-tab.active .tp-tab-count { background: #0b5cff14; color: var(--tp-primary); }

/* ===== Desktop sidebar collapse (hide/show) ===== */
.nav-collapse-btn { display: grid; place-items: center; width: 38px; height: 38px; border: 0; border-radius: 9px; background: transparent; color: var(--tp-text-2); cursor: pointer; }
.nav-collapse-btn:hover { background: var(--tp-bg); color: var(--tp-text); }
@media (min-width: 992px) {
    .app-shell { transition: grid-template-columns .3s cubic-bezier(.4, 0, .2, 1); }
    .app-shell.nav-collapsed { grid-template-columns: 0 minmax(0, 1fr); }
    .app-shell.nav-collapsed .app-sidebar { transform: translateX(-100%); width: 0; min-width: 0; padding-inline: 0; overflow: hidden; }
    .app-sidebar { transition: transform .3s cubic-bezier(.4, 0, .2, 1), width .3s cubic-bezier(.4, 0, .2, 1), padding .3s cubic-bezier(.4, 0, .2, 1); }
}
@media (max-width: 991.98px) { .nav-collapse-btn { display: none; } }

/* ===== AI Assistant slide-over popup ===== */
.ai-launcher { position: fixed; right: 24px; bottom: 84px; z-index: 55; display: inline-flex; align-items: center; gap: 9px; padding: 13px 20px; border: 0; border-radius: 999px; background: var(--tp-gradient-ai); color: #fff; font-weight: 700; font-size: 14px; box-shadow: 0 10px 28px #6046f855; cursor: pointer; }
.ai-launcher .icon { width: 20px; height: 20px; }
.ai-launcher:hover { filter: brightness(1.05); color: #fff; }
body.ai-open .ai-launcher, body.ai-open .tp-media-floating { display: none; }
.ai-scrim { position: fixed; inset: 0; z-index: 59; background: #0d153355; opacity: 0; visibility: hidden; transition: opacity .2s; }
body.ai-open .ai-scrim { opacity: 1; visibility: visible; }
.ai-panel { position: fixed; top: 0; right: 0; z-index: 60; display: flex; flex-direction: column; width: min(460px, 100vw); height: 100dvh; background: #212121; box-shadow: -14px 0 44px #00000055; transform: translateX(100%); transition: transform .22s ease; }
body.ai-open .ai-panel { transform: none; }
.ai-panel-head { display: flex; align-items: center; gap: 10px; padding: 14px 18px; background: #171717; color: #fff; border-bottom: 1px solid #2f2f2f; }
.ai-panel-head .icon { width: 20px; height: 20px; color: #a6c7ff; }
.ai-panel-head strong { font-size: 15px; }
.ai-panel-domain { color: #9aa4b6; font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ai-close { margin-left: auto; width: 32px; height: 32px; border: 0; border-radius: 8px; background: transparent; color: #cfcfcf; font-size: 22px; line-height: 1; cursor: pointer; }
.ai-close:hover { background: #ffffff14; color: #fff; }
.ai-panel .assistant-chat-window { flex: 1; height: auto; min-height: 0; border: 0; border-radius: 0; box-shadow: none; }
.ai-panel .assistant-chat-window > .card-header { display: none; }
@media (prefers-reduced-motion: reduce) { .ai-panel { transition: none; } }

/* Collapsible cards (JS adds .card-collapse chevron + toggles .is-collapsed). */
.management .card-header--collapsible { cursor: default; }
.card-collapse { flex: none; margin-left: 12px; display: inline-grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 8px; background: transparent; color: var(--tp-text-2, #7a8499); cursor: pointer; transition: background .12s, color .12s; }
.card-collapse:hover { background: #0d15330a; color: var(--tp-text, #0d1b2e); }
.card-collapse svg { transition: transform .18s ease; }
.card.is-collapsed .card-collapse svg { transform: rotate(-90deg); }
.card.is-collapsed { height: auto !important; min-height: 0 !important; align-self: start; }
.card.is-collapsed .card-header { min-height: 0; border-bottom: 0; }
.card.is-collapsed > :not(.card-header) { display: none; }
@media (prefers-reduced-motion: reduce) { .card-collapse svg { transition: none; } }

/* Browser-tab icon setting (Settings page). */
.favicon-setting { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.favicon-tile { position: relative; flex: none; width: 64px; height: 64px; padding: 8px; display: grid; place-items: center; border: 1px dashed var(--tp-border); border-radius: 14px; background: #fff; cursor: pointer; transition: border-color .12s, box-shadow .12s; }
.favicon-tile:hover { border-color: var(--tp-primary, #0b5cff); box-shadow: 0 2px 8px #0d15330f; }
.favicon-tile img { display: block; width: 48px; height: 48px; border-radius: 10px; object-fit: cover; }
.favicon-edit { position: absolute; right: -6px; bottom: -6px; width: 22px; height: 22px; display: grid; place-items: center; font-size: 12px; color: #fff; background: var(--tp-primary, #0b5cff); border-radius: 50%; box-shadow: 0 1px 3px #0d153326; }

/* Dashboard triage queues: red metric tone + clickable teaser rows. */
.metric-icon.red { background: #f0444418; color: var(--tp-error); }
a.activity-link { color: inherit; text-decoration: none; padding-inline: 8px; margin-inline: -8px; border-radius: 8px; transition: background .12s; }
a.activity-link:hover { background: #0b5cff0a; }
a.activity-link:hover .activity-main strong { color: var(--tp-primary); }
.activity-more { display: block; padding: 12px 8px 2px; color: var(--tp-primary); text-decoration: none; }
.activity-more:hover { text-decoration: underline; }

/* ============================================================
   Brand Profile redesign (.brand-profile) — presentational view + edit drawer.
   Uses existing tokens; no new dependencies.
   ============================================================ */
.brand-profile { max-width: 1100px; }
.btn-link-inline { border: 0; background: none; padding: 0; color: var(--tp-primary); font: inherit; cursor: pointer; }
.btn-link-inline:hover { text-decoration: underline; }
.bp-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.bp-header-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.bp-meta { color: var(--tp-text-2); font-size: 12px; margin: 6px 0 0; }

/* Main profile card */
.bp-main { display: grid; grid-template-columns: 1.6fr 1fr; gap: 0; padding: 0; overflow: hidden; margin-top: 20px; }
.bp-main-left { padding: 28px; }
.bp-main-right { padding: 28px; border-left: 1px solid var(--tp-border); display: flex; flex-direction: column; gap: 22px; background: #fbfcfe; }
.bp-identity { display: flex; gap: 20px; align-items: flex-start; }
.bp-logo { flex: none; width: 96px; height: 96px; border-radius: 16px; background: #0d1533; display: grid; place-items: center; overflow: hidden; }
.bp-logo img { max-width: 78%; max-height: 78%; object-fit: contain; }
.bp-logo-mono { color: #fff; font-size: 34px; font-weight: 700; letter-spacing: -1px; }
.bp-name { font-size: 26px; font-weight: 700; letter-spacing: -.6px; margin: 2px 0 6px; }
.bp-tagline { color: var(--tp-text-2); font-size: 14px; line-height: 1.6; margin: 0 0 12px; max-width: 46ch; }
.bp-chips, .bp-block { margin-top: 6px; }
.bp-chip { display: inline-block; padding: 4px 11px; margin: 0 6px 6px 0; border-radius: 8px; background: #eef2fb; color: var(--tp-text); font-size: 12px; font-weight: 600; }
.bp-block { margin-top: 26px; }
.bp-block-label { font-size: 11px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--tp-text-2); margin-bottom: 12px; }
.bp-swatches { display: flex; flex-wrap: wrap; gap: 14px 26px; }
.bp-swatch { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 72px; text-align: center; cursor: default; }
.bp-swatch-dot { width: 56px; height: 56px; border-radius: 50%; border: 1px solid #0d15331a; box-shadow: inset 0 0 0 3px #fff; transition: transform .12s; }
.bp-swatch:hover .bp-swatch-dot { transform: scale(1.06); }
.bp-swatch-hex { font-size: 12px; font-weight: 600; }
.bp-swatch-role { font-size: 11px; color: var(--tp-text-2); }
.bp-type { display: flex; align-items: center; gap: 14px; }
.bp-type-aa { width: 56px; height: 56px; border-radius: 12px; background: #fff; border: 1px solid var(--tp-border); display: grid; place-items: center; font-size: 26px; font-weight: 700; }
.bp-voice { font-size: 14px; line-height: 1.6; color: var(--tp-text); margin: 0; }
.bp-audience { display: flex; align-items: center; gap: 12px; }
.bp-audience-icon { width: 38px; height: 38px; flex: none; border-radius: 10px; background: #0b5cff14; color: var(--tp-primary); display: grid; place-items: center; }
.bp-audience-icon .icon { width: 19px; height: 19px; }

/* Four summary cards */
.bp-summary { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 20px; }
.bp-summary-card { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 20px; text-align: left; border: 1px solid var(--tp-border); background: #fff; cursor: pointer; transition: transform .12s, box-shadow .12s, border-color .12s; }
.bp-summary-card:hover { transform: translateY(-2px); box-shadow: 0 6px 18px #0d153312; border-color: #cdd8ef; }
.bp-summary-icon { width: 40px; height: 40px; border-radius: 11px; background: #0b5cff14; color: var(--tp-primary); display: grid; place-items: center; margin-bottom: 8px; }
.bp-summary-icon.green { background: #16a35b18; color: var(--tp-success); }
.bp-summary-icon.amber { background: #f5a62322; color: #b9791a; }
.bp-summary-icon.purple { background: #6046f818; color: var(--tp-ai-2); }
.bp-summary-icon .icon { width: 20px; height: 20px; }
.bp-summary-title { font-size: 15px; }
.bp-summary-sub { color: var(--tp-text-2); font-size: 12.5px; line-height: 1.5; }
.bp-summary-cta { color: var(--tp-primary); font-size: 13px; font-weight: 600; margin-top: 8px; }

/* Guidelines preview */
.bp-guidelines { padding: 24px; margin-top: 20px; }
.bp-guidelines-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; }
.bp-guidelines-body { display: grid; grid-template-columns: 1.7fr 1fr; gap: 24px; }
.bp-mock { border: 1px solid var(--tp-border); border-radius: 12px; overflow: hidden; background: var(--bp-bg, #fff); }
.bp-mock-nav { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; border-bottom: 1px solid #0d15331a; }
.bp-mock-logo { display: inline-grid; place-items: center; min-width: 34px; height: 34px; padding: 0 8px; border-radius: 8px; background: var(--bp-text, #0d1533); color: #fff; font-weight: 700; font-size: 13px; }
.bp-mock-logo img { max-height: 22px; max-width: 90px; object-fit: contain; }
.bp-mock-links { display: flex; gap: 14px; }
.bp-mock-links i { display: block; width: 34px; height: 8px; border-radius: 4px; background: color-mix(in srgb, var(--bp-text, #0d1533) 22%, transparent); }
.bp-mock-hero { padding: 34px 28px 38px; }
.bp-mock-hero h3 { color: var(--bp-text, #0d1533); font-size: 30px; letter-spacing: -1px; margin: 0 0 12px; }
.bp-mock-hero p { color: color-mix(in srgb, var(--bp-text, #0d1533) 68%, transparent); font-size: 14px; line-height: 1.6; max-width: 42ch; margin: 0 0 20px; }
.bp-mock-cta { display: flex; gap: 12px; }
.bp-btn-primary, .bp-btn-secondary { display: inline-flex; align-items: center; padding: 9px 16px; border-radius: 8px; font-size: 13px; font-weight: 600; }
.bp-btn-primary { background: var(--bp-accent, #0b5cff); color: #fff; }
.bp-btn-secondary { background: transparent; color: var(--bp-text, #0d1533); border: 1px solid color-mix(in srgb, var(--bp-text, #0d1533) 30%, transparent); }
.bp-tokens { display: flex; flex-direction: column; }
.bp-token-swatches { display: flex; gap: 8px; }
.bp-token-swatches span { width: 40px; height: 40px; border-radius: 10px; border: 1px solid #0d15331a; }
.bp-type-example { display: flex; flex-direction: column; gap: 4px; margin-bottom: 16px; }
.bp-type-example .bp-h1 { font-size: 24px; font-weight: 700; letter-spacing: -.5px; color: var(--tp-text); }
.bp-type-example .bp-h2 { font-size: 16px; font-weight: 600; color: var(--tp-text); }
.bp-type-example .bp-body { font-size: 13px; color: var(--tp-text-2); line-height: 1.6; }
.bp-token-buttons { display: flex; gap: 10px; flex-wrap: wrap; }

/* Knowledge sources */
.bp-knowledge { padding: 24px; margin-top: 20px; }
.bp-knowledge-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 8px; }
.bp-knowledge-upload { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 16px; margin: 8px 0 4px; border: 1px dashed var(--tp-border); border-radius: 10px; background: #fbfcfe; }
.bp-knowledge-upload .form-control { max-width: 360px; }
.bp-sources { display: flex; flex-direction: column; margin-top: 8px; }
.bp-source { display: flex; align-items: center; gap: 16px; padding: 14px 4px; border-top: 1px solid var(--tp-border); }
.bp-source:first-child { border-top: 0; }
.bp-source-icon { flex: none; width: 38px; height: 38px; border-radius: 10px; background: #0b5cff10; color: var(--tp-primary); display: grid; place-items: center; }
.bp-source-icon .icon { width: 18px; height: 18px; }
.bp-source-main { flex: 1; min-width: 0; }
.bp-source-main strong { display: block; font-size: 14px; font-weight: 600; }
.bp-source-date { flex: none; width: 150px; text-align: right; }
.bp-source-menu { flex: none; width: 32px; text-align: center; }
.bp-menu-btn { border: 0; background: none; font-size: 20px; line-height: 1; color: var(--tp-text-2); cursor: pointer; padding: 4px 8px; border-radius: 6px; }
.bp-menu-btn:hover { background: #0d15330a; color: var(--tp-text); }

/* Edit drawer */
.bp-drawer { position: fixed; inset: 0; z-index: 1080; }
.bp-drawer-scrim { position: absolute; inset: 0; background: #0d153366; opacity: 0; transition: opacity .2s; }
.bp-drawer-panel { position: absolute; top: 0; right: 0; height: 100%; width: min(560px, 100%); background: var(--tp-bg); box-shadow: -12px 0 40px #0d153322; display: flex; flex-direction: column; transform: translateX(100%); transition: transform .24s ease; }
.bp-drawer.is-open .bp-drawer-scrim { opacity: 1; }
.bp-drawer.is-open .bp-drawer-panel { transform: none; }
.bp-drawer-head { display: flex; align-items: center; justify-content: space-between; padding: 20px 24px; border-bottom: 1px solid var(--tp-border); background: #fff; }
.bp-drawer-head strong { font-size: 16px; }
.bp-drawer-close { border: 0; background: none; font-size: 26px; line-height: 1; color: var(--tp-text-2); cursor: pointer; }
.bp-steps { display: flex; gap: 4px; padding: 12px 16px; overflow-x: auto; background: #fff; border-bottom: 1px solid var(--tp-border); }
.bp-step { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; padding: 7px 12px; border: 0; border-radius: 8px; background: none; color: var(--tp-text-2); font-size: 13px; font-weight: 600; cursor: pointer; }
.bp-step:hover { background: #0d15330a; }
.bp-step.active { background: #0b5cff14; color: var(--tp-primary); }
.bp-step-dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; opacity: .5; }
.bp-step.active .bp-step-dot { opacity: 1; }
.bp-drawer-body { flex: 1; overflow-y: auto; padding: 24px; }
.bp-step-title { font-size: 18px; letter-spacing: -.3px; margin: 0 0 16px; }
.bp-logo-edit { display: flex; gap: 18px; align-items: flex-start; margin-bottom: 22px; }
.bp-inline-field { border-top: 1px solid var(--tp-border); padding-top: 18px; margin-top: 18px; }
.bp-quickadd { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.bp-chip-add { padding: 4px 11px; border: 1px solid var(--tp-border); border-radius: 20px; background: #fff; font-size: 12px; color: var(--tp-text-2); cursor: pointer; transition: border-color .12s, color .12s, background .12s; }
.bp-chip-add:hover { border-color: var(--tp-primary); color: var(--tp-primary); background: #0b5cff0a; }
.bp-persona-save { border-top: 1px solid var(--tp-border); padding-top: 18px; margin-top: 8px; }
@media (prefers-reduced-motion: reduce) { .bp-drawer-scrim, .bp-drawer-panel, .bp-summary-card, .bp-swatch-dot { transition: none; } }

/* Responsive */
@media (max-width: 991px) {
    .bp-main, .bp-guidelines-body { grid-template-columns: 1fr; }
    .bp-main-right { border-left: 0; border-top: 1px solid var(--tp-border); }
    .bp-summary { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 575px) {
    .bp-summary { grid-template-columns: 1fr; }
    .bp-drawer-panel { width: 100%; }
    .bp-source-date { display: none; }
    .bp-header-actions { width: 100%; }
    .bp-header-actions .btn { flex: 1; justify-content: center; }
}

/* ============================================================
   Per-site Overview redesign — premium SaaS treatment.
   Scoped to .tp-modern so shared components (dashboard,
   other modules) keep their existing styling.
   ============================================================ */

/* Site identity bar reads as a distinct workspace layer (shared, subtle). */
.site-context { box-shadow: 0 1px 0 rgba(20, 40, 80, .04), 0 8px 20px rgba(15, 35, 70, .028); }

/* Atmospheric pale-blue wash behind the header + top KPI area. */
.tp-modern .app-content { position: relative; }
.tp-modern .app-content > * { position: relative; z-index: 1; }
.tp-modern .app-content::before {
    content: ""; position: absolute; inset: 0 0 auto 0; height: 400px; z-index: 0; pointer-events: none;
    background:
        radial-gradient(640px 320px at 10% -10%, rgba(11, 92, 255, .10), transparent 60%),
        radial-gradient(560px 300px at 92% -14%, rgba(96, 70, 248, .08), transparent 62%);
}

/* Card surfaces: soft, layered, spacious. */
.tp-modern .card { border-radius: 16px; border-color: rgba(20, 40, 80, .08); box-shadow: 0 2px 8px rgba(15, 35, 70, .025), 0 10px 30px rgba(15, 35, 70, .025); }
.tp-modern .card-header { min-height: 0; border-bottom: 0; padding: 20px 22px 4px; display: flex; align-items: flex-start; gap: 10px 14px; }
.tp-modern .card-title { flex: 1 1 auto; min-width: 0; margin: 0; font-size: 16px; font-weight: 650; letter-spacing: -.2px; display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.tp-modern .card-header .card-link-arrow, .tp-modern .card-header .ms-auto { flex: none; margin-top: 3px; }
.tp-modern .card-body { padding: 14px 22px 20px; }

/* Header typography a touch larger/friendlier. */
.tp-modern .app-content .page-title { font-size: 34px; font-weight: 780; letter-spacing: -1px; }
.tp-modern .dash-subtitle { font-size: 15px; }

/* Animated "→" links used across the page. */
.card-link-arrow { display: inline-flex; align-items: center; gap: 5px; color: var(--tp-primary); font-size: 13px; font-weight: 600; text-decoration: none; white-space: nowrap; }
.card-link-arrow::after { content: "→"; transition: transform .16s ease; }
.card-link-arrow:hover::after, .tp-modern .card:hover .card-link-arrow::after { transform: translateX(3px); }

/* --- KPI cards --- */
.tp-modern .metric-card { position: relative; overflow: hidden; }
.tp-modern .metric-card .card-body { padding: 20px 22px; }
.tp-modern .metric-card .metric-icon { margin-bottom: 16px; }
.tp-modern .metric-label { color: var(--tp-text); font-weight: 650; font-size: 13.5px; margin: 0 0 4px; }
.tp-modern .metric-value { font-size: 32px; font-weight: 780; letter-spacing: -1px; }
.metric-status { display: inline-flex; align-items: center; gap: 7px; margin-top: 12px; font-size: 12px; font-weight: 600; color: var(--tp-text-2); }
.metric-status-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--tp-text-2); flex: none; }
.metric-deco { position: absolute; right: -20px; bottom: -24px; opacity: .06; pointer-events: none; color: var(--tp-text); }
.metric-deco .icon { width: 128px; height: 128px; }
/* Contextual tints (~3-5% strength) + tone-matched dot/deco. */
.metric-card--mint { background: #f2faf6; border-color: #dcefe5; }
.metric-card--mint .metric-status-dot, .metric-card--mint .metric-deco { color: var(--tp-success); }
.metric-card--mint .metric-status-dot { background: var(--tp-success); }
.metric-card--rose { background: #fef4f4; border-color: #f7dede; }
.metric-card--rose .metric-status-dot, .metric-card--rose .metric-deco { color: var(--tp-error); }
.metric-card--rose .metric-status-dot { background: var(--tp-error); }
.metric-card--cream { background: #fef8ee; border-color: #f5e7cf; }
.metric-card--cream .metric-status-dot, .metric-card--cream .metric-deco { color: #b9791a; }
.metric-card--cream .metric-status-dot { background: var(--tp-warning); }
.metric-card--lavender { background: #f5f3fe; border-color: #e5e0fb; }
.metric-card--lavender .metric-status-dot, .metric-card--lavender .metric-deco { color: var(--tp-ai-2); }
.metric-card--lavender .metric-status-dot { background: var(--tp-ai-2); }
.metric-card--sky { background: #f1f6ff; border-color: #dbe6fb; }
.metric-card--sky .metric-status-dot, .metric-card--sky .metric-deco { color: var(--tp-primary); }
.metric-card--sky .metric-status-dot { background: var(--tp-primary); }

/* --- Status cards: useful empty states --- */
.status-empty { display: flex; align-items: flex-start; gap: 14px; padding: 8px 0 4px; }
.status-empty-icon { flex: none; width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center; }
.status-empty-icon .icon { width: 24px; height: 24px; }
.status-empty-icon.green { background: #16a35b16; color: var(--tp-success); }
.status-empty-icon.purple { background: #6046f816; color: var(--tp-ai-2); }
.status-empty-title { font-size: 14.5px; font-weight: 650; margin: 3px 0 3px; color: var(--tp-text); }
.status-empty-sub { color: var(--tp-text-2); font-size: 13px; line-height: 1.5; margin: 0; }

/* --- Recent activity (rich rows with avatars) --- */
.activity-list--rich .activity-item { align-items: center; gap: 14px; padding: 14px 0; }
.activity-list--rich .activity-dot { width: 38px; height: 38px; border-radius: 10px; }
.activity-person { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; }
.activity-avatar { flex: none; width: 27px; height: 27px; border-radius: 50%; display: grid; place-items: center; background: #0b5cff16; color: var(--tp-primary); font-size: 11px; font-weight: 700; }
.activity-person-name { color: var(--tp-text-2); font-size: 12.5px; font-weight: 600; }
.activity-list--rich .activity-time { min-width: 74px; text-align: right; }

/* --- Digital Setup panel --- */
.setup-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.setup-title { font-size: 16px; font-weight: 650; letter-spacing: -.2px; margin: 0; }
.setup-count { color: var(--tp-text-2); font-size: 13px; font-weight: 600; }
.setup-bar { display: flex; align-items: center; gap: 18px; }
.setup-bar .tp-progress { flex: 1; }
.tp-progress { background: #eef1f7; border-radius: 20px; overflow: hidden; }
.tp-progress .progress-bar { background: linear-gradient(90deg, var(--tp-primary), #4b83ff); border-radius: 20px; animation: tp-grow .8s cubic-bezier(.34, .8, .3, 1); }
@keyframes tp-grow { from { width: 0 !important; } }

/* --- Quick actions grid --- */
.qa-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.qa-tile { display: flex; align-items: center; gap: 12px; padding: 13px 14px; border-radius: 12px; background: var(--tp-bg); color: var(--tp-text); text-decoration: none; transition: transform .16s ease, box-shadow .16s ease, background .16s ease; }
.qa-tile:hover { transform: translateY(-2px); background: #fff; color: var(--tp-text); box-shadow: 0 8px 22px rgba(15, 35, 70, .07); }
.qa-icon { flex: none; width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center; background: #0b5cff14; color: var(--tp-primary); }
.qa-icon .icon { width: 20px; height: 20px; }
.qa-icon.purple { background: #6046f816; color: var(--tp-ai-2); }
.qa-icon.green { background: #16a35b16; color: var(--tp-success); }
.qa-icon.amber { background: #f5a62322; color: #b9791a; }
.qa-icon.pink { background: #db27771a; color: var(--tp-pink); }
.qa-icon.rose { background: #f043431a; color: #e0456a; }
.qa-text { min-width: 0; flex: 1; }
.qa-title { display: block; font-size: 13.5px; font-weight: 650; letter-spacing: -.1px; }
.qa-desc { display: block; margin-top: 1px; color: var(--tp-text-2); font-size: 11.5px; }
.qa-arrow { color: var(--tp-primary); font-weight: 700; opacity: 0; transform: translateX(-4px); transition: opacity .16s ease, transform .16s ease; }
.qa-tile:hover .qa-arrow { opacity: 1; transform: translateX(0); }

/* --- Connection card --- */
.conn-card { position: relative; overflow: hidden; }
.conn-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.conn-status { display: inline-flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 650; }
.conn-status .conn-dot { flex: none; width: 10px; height: 10px; border-radius: 50%; }
.conn-status.is-ok { color: var(--tp-success); }
.conn-status.is-ok .conn-dot { background: var(--tp-success); box-shadow: 0 0 0 4px #16a35b22; }
.conn-status.is-warn { color: #b9791a; }
.conn-status.is-warn .conn-dot { background: var(--tp-warning); box-shadow: 0 0 0 4px #f5a62326; }
.conn-meta { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--tp-border); }
.conn-meta dd { margin-bottom: 14px; }
.conn-meta dd:last-child { margin-bottom: 0; }
.conn-card::after { content: ""; position: absolute; right: -46px; bottom: -46px; width: 150px; height: 150px; border-radius: 50%; background: radial-gradient(circle, rgba(11, 92, 255, .07), transparent 70%); pointer-events: none; }

@media (max-width: 575px) {
    .tp-modern .app-content .page-title { font-size: 28px; }
    .qa-grid { gap: 10px; }
    .qa-tile { padding: 12px; }
    .activity-list--rich .activity-person-name { display: none; }
}

/* --- Content Hub --- */
.content-subnav { margin-top: -6px; }
.hub-checks { list-style: none; margin: 0 0 18px; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.hub-checks li { position: relative; padding-left: 26px; font-size: 13px; color: var(--tp-text); }
.hub-checks li::before { content: "✓"; position: absolute; left: 0; top: 0; width: 18px; height: 18px; border-radius: 50%; background: #e9f7f0; color: var(--tp-success); font-size: 11px; font-weight: 700; display: grid; place-items: center; }
.hub-pathway--website { background: linear-gradient(160deg, #f4f8ff, #fff 55%); }
.hub-pathway--social { background: linear-gradient(160deg, #f6f3ff, #fff 55%); }
.qa-grid--list { grid-template-columns: 1fr; }

/* --- Content families --- */
.content-family { padding: 14px 0; border-bottom: 1px solid var(--tp-border); }
.content-family:last-child { border-bottom: 0; }
.cf-parent { display: flex; align-items: center; gap: 12px; }
.cf-parent .metric-icon { width: 38px; height: 38px; }
.cf-child { display: flex; align-items: center; gap: 9px; margin: 8px 0 0 18px; padding: 9px 12px 9px 10px; border: 1px solid var(--tp-border); border-radius: 10px; font-size: 13px; font-weight: 600; color: var(--tp-text); text-decoration: none; background: #fbfcfe; }
.cf-child:hover { border-color: #c3d4f5; color: var(--tp-primary); }
.cf-child .icon { width: 17px; height: 17px; color: #6046f8; flex: none; }
.cf-branch { flex: none; width: 14px; height: 14px; margin-left: 2px; border-left: 2px solid var(--tp-border); border-bottom: 2px solid var(--tp-border); border-bottom-left-radius: 6px; transform: translateY(-5px); }

/* --- Media Library (full page) --- */
/* The shell PageHeader already titles this page; hide the component's duplicate heading.
   Scoped to the full-page instance only — the floating widget (.tp-media-floating) keeps its heading. */
.page-media .tp-media:not(.tp-media-floating) > .tp-media-panel > .tp-media-heading { display: none; }

/* ---- Content SEO Auditor (Site audits → Page content). Scoped: nothing here touches the shell. ---- */
[data-content-seo-auditor] { container-type: inline-size; }
[data-content-seo-auditor] .ca-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; list-style: none; padding: 0; margin: 0 0 20px; border: 1px solid var(--tp-border); border-radius: var(--tp-radius); overflow: hidden; background: var(--tp-surface); }
[data-content-seo-auditor] .ca-steps li { display: flex; align-items: center; gap: 10px; padding: 14px 16px; color: var(--tp-text-2); font-size: 14px; border-left: 1px solid var(--tp-border); min-width: 0; }
[data-content-seo-auditor] .ca-steps li:first-child { border-left: 0; }
[data-content-seo-auditor] .ca-steps li.is-current { background: #eef3ff; color: var(--tp-primary); font-weight: 650; }
[data-content-seo-auditor] .ca-step-n { flex: 0 0 auto; display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: #e9edf5; color: var(--tp-text-2); font-size: 12px; font-weight: 700; }
[data-content-seo-auditor] .is-current .ca-step-n { background: var(--tp-primary); color: #fff; }
[data-content-seo-auditor] .is-done .ca-step-n { background: #16a35b18; color: var(--tp-success); }
[data-content-seo-auditor] .ca-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; }
[data-content-seo-auditor] .ca-head > div { min-width: 0; flex: 1 1 420px; }
[data-content-seo-auditor] .ca-title { font-size: 28px; font-weight: 750; line-height: 1.2; margin-bottom: 6px; }
[data-content-seo-auditor] .ca-grid { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(280px, 1fr); gap: 20px; align-items: start; }
[data-content-seo-auditor] .ca-side { display: grid; gap: 20px; min-width: 0; }
[data-content-seo-auditor] .ca-card { margin-bottom: 20px; border-radius: 16px; }
[data-content-seo-auditor] .ca-side .ca-card { margin-bottom: 0; }
[data-content-seo-auditor] .ca-scope { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; border: 0; padding: 0; margin: 0; }
[data-content-seo-auditor] .ca-choice { display: flex; gap: 12px; align-items: flex-start; padding: 16px; border: 1px solid var(--tp-border); border-radius: 12px; cursor: pointer; min-height: 44px; }
[data-content-seo-auditor] .ca-choice:has(input:checked) { border-color: var(--tp-primary); background: #eef3ff; box-shadow: 0 0 0 1px var(--tp-primary); }
[data-content-seo-auditor] .ca-choice input { margin-top: 4px; }
[data-content-seo-auditor] .ca-choice input:focus-visible { outline: 2px solid var(--tp-primary); outline-offset: 2px; }
[data-content-seo-auditor] .ca-actions { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
[data-content-seo-auditor] .ca-rules summary, [data-content-seo-auditor] .ca-check summary, [data-content-seo-auditor] .ca-capture summary { cursor: pointer; color: var(--tp-primary); }
[data-content-seo-auditor] .ca-rule-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
[data-content-seo-auditor] .ca-dl { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 8px 12px; margin: 0; font-size: 14px; }
[data-content-seo-auditor] .ca-dl dt { color: var(--tp-text-2); font-weight: 400; }
[data-content-seo-auditor] .ca-dl dd { margin: 0; text-align: right; font-weight: 600; overflow-wrap: anywhere; }
[data-content-seo-auditor] .ca-next { padding-left: 18px; display: grid; gap: 10px; margin: 0; }
[data-content-seo-auditor] .ca-notice { border: 1px solid var(--tp-border); border-radius: 12px; padding: 12px 16px; margin-bottom: 16px; background: var(--tp-surface); }
[data-content-seo-auditor] .ca-notice.is-amber { background: #fff5e3; border-color: #f5d79e; color: #6b4300; }
[data-content-seo-auditor] .ca-notice.is-green { background: #eaf6ef; border-color: #b6e0c6; color: #166346; }
[data-content-seo-auditor] .ca-bar { display: flex; height: 12px; border-radius: 6px; overflow: hidden; background: repeating-linear-gradient(45deg, #e6eaf2 0 6px, #f3f5f9 6px 12px); }
[data-content-seo-auditor] .ca-bar .is-pass { background: var(--tp-success); }
[data-content-seo-auditor] .ca-bar .is-fail { background: #c2410c; }
[data-content-seo-auditor] .ca-bar .is-unverified { background: transparent; }
[data-content-seo-auditor] .ca-check { border-top: 1px solid var(--tp-border); padding: 10px 0; }
[data-content-seo-auditor] .ca-check summary { display: flex; justify-content: space-between; gap: 12px; align-items: center; color: var(--tp-text); list-style: none; min-height: 32px; }
[data-content-seo-auditor] .ca-check summary::-webkit-details-marker { display: none; }
[data-content-seo-auditor] .ca-check summary:focus-visible { outline: 2px solid var(--tp-primary); outline-offset: 2px; border-radius: 6px; }
[data-content-seo-auditor] .ca-check-body { padding: 8px 0 4px; }
[data-content-seo-auditor] .ca-quote { border-left: 3px solid var(--tp-border); background: #f5f7fc; border-radius: 0 8px 8px 0; padding: 8px 12px; margin: 0 0 8px; overflow-wrap: anywhere; }
[data-content-seo-auditor] .ca-finding { border-left: 3px solid var(--tp-ai-2); background: #f6f4ff; border-radius: 0 8px 8px 0; padding: 10px 12px; }
[data-content-seo-auditor] .ca-counts { display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 8px 0 14px; }
[data-content-seo-auditor] .ca-counts strong { font-size: 22px; margin-right: 4px; }
[data-content-seo-auditor] .ca-confirm summary { list-style: none; }
[data-content-seo-auditor] .ca-confirm summary::-webkit-details-marker { display: none; }
[data-content-seo-auditor] .ca-activity { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; font-size: 14px; }
[data-content-seo-auditor] .ca-priorities { list-style: none; counter-reset: ca; padding: 0; margin: 0; }
[data-content-seo-auditor] .ca-priorities li { counter-increment: ca; display: flex; justify-content: space-between; gap: 16px; padding: 14px 0 14px 34px; border-top: 1px solid var(--tp-border); position: relative; }
[data-content-seo-auditor] .ca-priorities li::before { content: counter(ca); position: absolute; left: 0; top: 14px; color: var(--tp-primary); font-weight: 700; }
[data-content-seo-auditor] .ca-priorities li > div { min-width: 0; }
[data-content-seo-auditor] .ca-filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 12px; }
[data-content-seo-auditor] .ca-blocks { font-size: 13px; padding-left: 18px; max-height: 28rem; overflow: auto; overflow-wrap: anywhere; }
[data-content-seo-auditor] .ca-table td { overflow-wrap: anywhere; }
@container (max-width: 900px) {
    [data-content-seo-auditor] .ca-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 767px) {
    [data-content-seo-auditor] .ca-steps { grid-template-columns: 1fr 1fr; }
    [data-content-seo-auditor] .ca-steps li:nth-child(3) { border-left: 0; }
    [data-content-seo-auditor] .ca-steps li:nth-child(n+3) { border-top: 1px solid var(--tp-border); }
    [data-content-seo-auditor] .ca-scope { grid-template-columns: 1fr; }
    [data-content-seo-auditor] .ca-title { font-size: 24px; }
    [data-content-seo-auditor] .ca-priorities li { flex-direction: column; }
    [data-content-seo-auditor] .ca-dl dd { text-align: left; }
}
@media (prefers-reduced-motion: reduce) { [data-content-seo-auditor] * { transition: none !important; } }
[data-content-seo-auditor] .ca-w-0 { width: 0%; }
[data-content-seo-auditor] .ca-w-1 { width: 1%; }
[data-content-seo-auditor] .ca-w-2 { width: 2%; }
[data-content-seo-auditor] .ca-w-3 { width: 3%; }
[data-content-seo-auditor] .ca-w-4 { width: 4%; }
[data-content-seo-auditor] .ca-w-5 { width: 5%; }
[data-content-seo-auditor] .ca-w-6 { width: 6%; }
[data-content-seo-auditor] .ca-w-7 { width: 7%; }
[data-content-seo-auditor] .ca-w-8 { width: 8%; }
[data-content-seo-auditor] .ca-w-9 { width: 9%; }
[data-content-seo-auditor] .ca-w-10 { width: 10%; }
[data-content-seo-auditor] .ca-w-11 { width: 11%; }
[data-content-seo-auditor] .ca-w-12 { width: 12%; }
[data-content-seo-auditor] .ca-w-13 { width: 13%; }
[data-content-seo-auditor] .ca-w-14 { width: 14%; }
[data-content-seo-auditor] .ca-w-15 { width: 15%; }
[data-content-seo-auditor] .ca-w-16 { width: 16%; }
[data-content-seo-auditor] .ca-w-17 { width: 17%; }
[data-content-seo-auditor] .ca-w-18 { width: 18%; }
[data-content-seo-auditor] .ca-w-19 { width: 19%; }
[data-content-seo-auditor] .ca-w-20 { width: 20%; }
[data-content-seo-auditor] .ca-w-21 { width: 21%; }
[data-content-seo-auditor] .ca-w-22 { width: 22%; }
[data-content-seo-auditor] .ca-w-23 { width: 23%; }
[data-content-seo-auditor] .ca-w-24 { width: 24%; }
[data-content-seo-auditor] .ca-w-25 { width: 25%; }
[data-content-seo-auditor] .ca-w-26 { width: 26%; }
[data-content-seo-auditor] .ca-w-27 { width: 27%; }
[data-content-seo-auditor] .ca-w-28 { width: 28%; }
[data-content-seo-auditor] .ca-w-29 { width: 29%; }
[data-content-seo-auditor] .ca-w-30 { width: 30%; }
[data-content-seo-auditor] .ca-w-31 { width: 31%; }
[data-content-seo-auditor] .ca-w-32 { width: 32%; }
[data-content-seo-auditor] .ca-w-33 { width: 33%; }
[data-content-seo-auditor] .ca-w-34 { width: 34%; }
[data-content-seo-auditor] .ca-w-35 { width: 35%; }
[data-content-seo-auditor] .ca-w-36 { width: 36%; }
[data-content-seo-auditor] .ca-w-37 { width: 37%; }
[data-content-seo-auditor] .ca-w-38 { width: 38%; }
[data-content-seo-auditor] .ca-w-39 { width: 39%; }
[data-content-seo-auditor] .ca-w-40 { width: 40%; }
[data-content-seo-auditor] .ca-w-41 { width: 41%; }
[data-content-seo-auditor] .ca-w-42 { width: 42%; }
[data-content-seo-auditor] .ca-w-43 { width: 43%; }
[data-content-seo-auditor] .ca-w-44 { width: 44%; }
[data-content-seo-auditor] .ca-w-45 { width: 45%; }
[data-content-seo-auditor] .ca-w-46 { width: 46%; }
[data-content-seo-auditor] .ca-w-47 { width: 47%; }
[data-content-seo-auditor] .ca-w-48 { width: 48%; }
[data-content-seo-auditor] .ca-w-49 { width: 49%; }
[data-content-seo-auditor] .ca-w-50 { width: 50%; }
[data-content-seo-auditor] .ca-w-51 { width: 51%; }
[data-content-seo-auditor] .ca-w-52 { width: 52%; }
[data-content-seo-auditor] .ca-w-53 { width: 53%; }
[data-content-seo-auditor] .ca-w-54 { width: 54%; }
[data-content-seo-auditor] .ca-w-55 { width: 55%; }
[data-content-seo-auditor] .ca-w-56 { width: 56%; }
[data-content-seo-auditor] .ca-w-57 { width: 57%; }
[data-content-seo-auditor] .ca-w-58 { width: 58%; }
[data-content-seo-auditor] .ca-w-59 { width: 59%; }
[data-content-seo-auditor] .ca-w-60 { width: 60%; }
[data-content-seo-auditor] .ca-w-61 { width: 61%; }
[data-content-seo-auditor] .ca-w-62 { width: 62%; }
[data-content-seo-auditor] .ca-w-63 { width: 63%; }
[data-content-seo-auditor] .ca-w-64 { width: 64%; }
[data-content-seo-auditor] .ca-w-65 { width: 65%; }
[data-content-seo-auditor] .ca-w-66 { width: 66%; }
[data-content-seo-auditor] .ca-w-67 { width: 67%; }
[data-content-seo-auditor] .ca-w-68 { width: 68%; }
[data-content-seo-auditor] .ca-w-69 { width: 69%; }
[data-content-seo-auditor] .ca-w-70 { width: 70%; }
[data-content-seo-auditor] .ca-w-71 { width: 71%; }
[data-content-seo-auditor] .ca-w-72 { width: 72%; }
[data-content-seo-auditor] .ca-w-73 { width: 73%; }
[data-content-seo-auditor] .ca-w-74 { width: 74%; }
[data-content-seo-auditor] .ca-w-75 { width: 75%; }
[data-content-seo-auditor] .ca-w-76 { width: 76%; }
[data-content-seo-auditor] .ca-w-77 { width: 77%; }
[data-content-seo-auditor] .ca-w-78 { width: 78%; }
[data-content-seo-auditor] .ca-w-79 { width: 79%; }
[data-content-seo-auditor] .ca-w-80 { width: 80%; }
[data-content-seo-auditor] .ca-w-81 { width: 81%; }
[data-content-seo-auditor] .ca-w-82 { width: 82%; }
[data-content-seo-auditor] .ca-w-83 { width: 83%; }
[data-content-seo-auditor] .ca-w-84 { width: 84%; }
[data-content-seo-auditor] .ca-w-85 { width: 85%; }
[data-content-seo-auditor] .ca-w-86 { width: 86%; }
[data-content-seo-auditor] .ca-w-87 { width: 87%; }
[data-content-seo-auditor] .ca-w-88 { width: 88%; }
[data-content-seo-auditor] .ca-w-89 { width: 89%; }
[data-content-seo-auditor] .ca-w-90 { width: 90%; }
[data-content-seo-auditor] .ca-w-91 { width: 91%; }
[data-content-seo-auditor] .ca-w-92 { width: 92%; }
[data-content-seo-auditor] .ca-w-93 { width: 93%; }
[data-content-seo-auditor] .ca-w-94 { width: 94%; }
[data-content-seo-auditor] .ca-w-95 { width: 95%; }
[data-content-seo-auditor] .ca-w-96 { width: 96%; }
[data-content-seo-auditor] .ca-w-97 { width: 97%; }
[data-content-seo-auditor] .ca-w-98 { width: 98%; }
[data-content-seo-auditor] .ca-w-99 { width: 99%; }
[data-content-seo-auditor] .ca-w-100 { width: 100%; }
[data-content-seo-auditor] .ca-patch { border: 1px solid var(--tp-border); border-radius: 12px; padding: 12px 14px; margin-bottom: 10px; background: var(--tp-surface); }
[data-content-seo-auditor] .ca-ba { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
[data-content-seo-auditor] .ca-ba-label { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--tp-text-2); margin-bottom: 4px; }
[data-content-seo-auditor] .ca-ba-text { background: #f5f7fc; border-radius: 8px; padding: 10px 12px; overflow-wrap: anywhere; white-space: pre-wrap; font-size: 14px; }
[data-content-seo-auditor] .ca-ba-text.is-after { background: #eaf6ef; }
[data-content-seo-auditor] .ca-del { background: #fde2e4; color: #8a1c28; text-decoration: line-through; }
[data-content-seo-auditor] .ca-ins { background: #c9ecd6; color: #0f4d33; text-decoration: none; }
[data-content-seo-auditor] .ca-narrow { max-width: 8rem; }
@container (max-width: 700px) { [data-content-seo-auditor] .ca-ba { grid-template-columns: minmax(0, 1fr); } }

/* Keyword bank table: search shortcuts beside each keyword, full ranking-page addresses, difficulty badges. */
.kb-search { display: inline-flex; gap: 6px; margin-left: 6px; vertical-align: 1px; }
.kb-search a { font-size: 11px; font-weight: 600; line-height: 1; padding: 3px 6px; border: 1px solid var(--tp-border); border-radius: 999px; color: var(--tp-text-muted, #667085); text-decoration: none; }
.kb-search a:hover, .kb-search a:focus-visible { color: var(--tblr-primary); border-color: var(--tblr-primary); }
.kb-url { display: inline-block; max-width: 22rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; }
.kb-difficulty { min-width: 2.5rem; font-size: 13px; }
.kb-difficulty.is-easy { background: var(--tp-success); color: #fff; }
.kb-difficulty.is-moderate { background: var(--tp-warning); color: #1f1600; }
.kb-difficulty.is-hard { background: var(--tp-error); color: #fff; }
.kb-sort { color: inherit; text-decoration: none; white-space: nowrap; }
.kb-sort:hover, .kb-sort:focus-visible, .kb-sort.is-active { color: var(--tblr-primary); }

/* Keyword Research: a 12-month volume line beside each keyword. */
.kr-spark { width: 60px; height: 20px; display: block; }
.kr-spark polyline { fill: none; stroke: var(--tblr-primary); stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; }