/* Workspace theme in the style of a classic SEO suite, with one green accent: a black top bar, dark primary actions
   and green chart lines, blue links and second series, a white page with outlined panels, green and red changes. Loaded last, so it wins over the earlier mono layers;
   every rule is scoped to the signed-in app (#app.rf-shell) or its dialogs. */
#app.rf-shell,#app ~ dialog,body>dialog,#site-dialog,#token-dialog{
  --ah-navy:#111827;--ah-navy-2:#1f2937;--ah-page:#fff;--ah-panel:#fff;--ah-text:#333;--ah-muted:rgba(0,0,0,.52);
  --ah-line:#dcdfe3;--ah-line-2:#e9ebee;--ah-link:#1d4ed8;--ah-orange:#0f6b4e;--ah-orange-hover:#0b5a41;--ah-chart:#0f6b4e;--ah-yellow:#2c8c6a;--ah-black:#1f2933;--ah-orange-soft:#e8f5ee;
  --ah-orange-line:#bfe3d0;--ah-blue:#2563eb;--ah-green:#008a43;--ah-red:#cf0000;--ah-select:rgba(31,41,51,.06);
  --ah-shadow:0 0 0 1px #e3e6ea,0 1px 2px rgba(16,24,40,.04);
  --rf-bg:var(--ah-page);--rf-ink:var(--ah-text);--rf-text:var(--ah-text);--rf-line:var(--ah-line);--rf-indigo:var(--ah-link);--rf-tint:#e8f5ee;
  --green:var(--ah-green);
  background:var(--ah-page)!important;color:var(--ah-text);font-family:Inter,"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:14px
}
#app.rf-shell .rf-main,#app.rf-shell #app-content,#app.rf-shell .rf-content{background:var(--ah-page)!important}

/* Top bar: navy, with translucent white controls. */
#app.rf-shell .rf-header{background:var(--ah-navy)!important;border-bottom:0!important;box-shadow:none!important;color:#fff}
#app.rf-shell .rf-header .rf-search,#app.rf-shell .rf-header .rf-select,#app.rf-shell .rf-header .cs-open{border:1px solid transparent!important;border-radius:3px!important;background:rgba(255,255,255,.15)!important;color:#fff!important;box-shadow:none!important}
#app.rf-shell .rf-header .cs-open:hover,#app.rf-shell .rf-header .rf-select:hover{background:rgba(255,255,255,.22)!important}
#app.rf-shell .rf-header .cs-open .ic,#app.rf-shell .rf-header .rf-select .ic,#app.rf-shell .rf-header .rf-search .ic{color:rgba(255,255,255,.8)!important}
#app.rf-shell .rf-header .cs-open kbd{border-color:rgba(255,255,255,.3)!important;background:transparent!important;color:rgba(255,255,255,.75)!important}
#app.rf-shell .rf-header input,#app.rf-shell .rf-header select{background:transparent!important;color:#fff!important}
#app.rf-shell .rf-header input::placeholder{color:rgba(255,255,255,.7)}
#app.rf-shell .rf-header select option{color:#333;background:#fff}
#app.rf-shell .rf-header :is(small,span,em,b,strong,p){color:inherit}
#app.rf-shell .rf-header .rf-select :is(small,span){color:rgba(255,255,255,.7)!important}
#app.rf-shell .rf-bell,#app.rf-shell .rf-account{border-color:transparent!important;border-radius:3px!important;background:transparent!important;color:#fff!important;box-shadow:none!important}
#app.rf-shell .rf-bell:hover,#app.rf-shell .rf-account:hover{background:rgba(255,255,255,.12)!important}
#app.rf-shell .rf-account *{color:inherit!important}
#app.rf-shell .rf-account :is(small,em){color:rgba(255,255,255,.7)!important}
#app.rf-shell .rf-account .ic{color:rgba(255,255,255,.8)!important}
#app.rf-shell .rf-vr{background:rgba(255,255,255,.2)!important}

/* Side menu: white, compact, the brand cell joins the navy top bar. */
#app.rf-shell .rf-header{height:56px!important;min-height:56px!important;padding-top:0!important;padding-bottom:0!important}
#app.rf-shell .rf-header :is(.cs-open,.rf-select,.rf-search,.rf-bell,.rf-account){height:36px!important;min-height:36px!important}
#app.rf-shell .rf-side{padding-top:0!important;background:linear-gradient(var(--ah-navy) 0 56px,#fff 56px)!important;border-right:1px solid var(--ah-line)!important}
#app.rf-shell .rf-brand{display:flex!important;align-items:center;height:56px;margin:0 0 16px!important;padding:0 4px!important;background:transparent!important}
#app.rf-shell .rf-brand img{content:url("/brand/mrkeyword-wordmark-light.svg");width:auto!important;height:28px!important;max-width:170px}
#app.rf-shell .rf-nav-section-label{color:var(--ah-text)!important;font-size:12px!important;font-weight:700!important;letter-spacing:0!important;text-transform:none!important}
#app.rf-shell .rf-nav-item{border:0!important;border-radius:3px!important;background:transparent!important;color:var(--ah-text)!important;font-size:13.5px!important;font-weight:400!important;box-shadow:none!important}
#app.rf-shell .rf-nav-item .ic{color:#6b7280!important}
#app.rf-shell .rf-nav-item:hover{background:var(--ah-select)!important}
#app.rf-shell .rf-nav-item.is-active{background:var(--ah-select)!important;color:#000!important;font-weight:600!important}
#app.rf-shell .rf-nav-item.is-active::before{background:var(--ah-orange)!important}
#app.rf-shell .rf-nav-item.is-active .ic{color:var(--ah-chart)!important}
#app.rf-shell .rf-promo{border:1px solid var(--ah-line)!important;border-radius:3px!important;background:#f3faf6!important;color:var(--ah-text)!important;box-shadow:none!important}
#app.rf-shell .rf-promo .rf-promo-mark{color:var(--ah-orange)!important;background:#fff!important}

/* Type: regular weights, dark grey text, blue links. */
#app.rf-shell #app-content :is(h1,h2,h3,h4){color:var(--ah-text)}
#app.rf-shell #app-content h1{font-weight:700;letter-spacing:-.01em}
#app.rf-shell #app-content a:not(.rf-btn){color:var(--ah-link)}
#app.rf-shell #app-content :is(.text-button,.row-action,.rf-link,.link-button){color:var(--ah-link)!important}

/* Buttons: dark primary, white secondary with a thin grey border, small radius. */
#app.rf-shell .rf-btn,:where(#app,dialog) .rf-btn{border-radius:3px!important}
#app.rf-shell .rf-btn:not(.dark):not(.white){border-color:rgba(0,0,0,.2)!important;background:#fff!important;color:var(--ah-text)!important}
#app.rf-shell .rf-btn:not(.dark):not(.white):hover{background:#f6f7f8!important}
#app.rf-shell .rf-btn.dark,#app.rf-shell .primary-button,dialog .primary-button,dialog .rf-btn.dark{border-color:var(--ah-navy)!important;background:var(--ah-navy)!important;color:#fff!important}
#app.rf-shell .rf-btn.dark:hover,#app.rf-shell .primary-button:hover,dialog .primary-button:hover,dialog .rf-btn.dark:hover{border-color:var(--ah-navy-2)!important;background:var(--ah-navy-2)!important}
#app.rf-shell .rf-btn.dark .ic,#app.rf-shell .rf-btn.dark *{color:#fff!important}
#app.rf-shell .rf-btn.white{border-color:rgba(0,0,0,.2)!important;background:#fff!important;color:var(--ah-text)!important}

/* Panels: white and flat with a hairline shadow, on the grey page. */
#app.rf-shell :is(.rf-card,.panel,.ws-project,.ws-site-card,.ws-portfolio,.ws-empty,.orr-card,.ov-next-card,.st-plan-card,.kx-trend-card,.rf-notice,.ws-add-card){border:0!important;border-radius:3px!important;background:var(--ah-panel)!important;box-shadow:var(--ah-shadow)!important}
#app.rf-shell .ws-add-card{background:#fff!important;border:1px dashed var(--ah-line)!important;box-shadow:none!important}
#app.rf-shell .ws-projects .ws-site-card.ws-project:hover{box-shadow:0 0 0 1px rgba(0,0,0,.08),0 2px 6px rgba(0,0,0,.06)!important}
#app.rf-shell .ws-projects .ws-site-card.ws-project.is-selected{box-shadow:0 0 0 1px var(--ah-orange)!important}
#app.rf-shell .ws-project .ws-card-heading{border-bottom-color:var(--ah-line-2)!important}
#app.rf-shell .ws-project .ws-site-mark{border-radius:3px!important;border-color:var(--ah-line)!important;background:#f6f7f8!important;color:var(--ah-navy)!important}
#app.rf-shell .ws-project .ws-site-identity h2 button{color:var(--ah-text)!important;font-weight:700}
#app.rf-shell .ws-project .ws-site-identity h2 button:hover{color:var(--ah-link)!important}

/* Metric columns: label, a large regular-weight number, green or red change, green area chart. */
#app.rf-shell .ms-strip>*{border-left-color:var(--ah-line-2)!important}
#app.rf-shell .ms-label{color:var(--ah-text)!important;font-weight:400!important}
#app.rf-shell .ms-value strong{color:var(--ah-text)!important;font-weight:400!important}
#app.rf-shell .ms-delta.up,#app.rf-shell .ms-note .up{color:var(--ah-green)!important}
#app.rf-shell .ms-delta.down,#app.rf-shell .ms-note .down{color:var(--ah-red)!important}
#app.rf-shell .ms-note{color:var(--ah-muted)!important}
#app.rf-shell .ms-chart{color:var(--ah-chart)!important}
#app.rf-shell .ms-axis{color:var(--ah-muted)!important}
#app.rf-shell .ms-gauge{border-radius:0!important;background:#e5e7ea!important}
#app.rf-shell .ms-gauge i{background:var(--ah-green)!important}
#app.rf-shell .wd-scale .ms-gauge i{background:var(--ah-blue)!important}
#app.rf-shell .wd-countries li span{color:var(--ah-text)!important;font-weight:400!important}
#app.rf-shell .wd-countries li b{color:var(--ah-text)!important}
#app.rf-shell .pg-overview.ov3 .ov3-kpis.ms-strip{border:0!important;border-radius:3px!important;box-shadow:var(--ah-shadow)!important}
#app.rf-shell .pg-overview.ov3 .ov3-kpis.ms-strip .ov3-kpi.is-current{box-shadow:inset 0 -3px 0 var(--ah-orange)!important}

/* Segmented controls and tabs: grey outline, the current one tinted green. */
#app.rf-shell :is(.wd-tabs,.ws-range,.ov-range){gap:0!important;padding:0!important;border:0!important;border-radius:0!important;background:transparent!important}
#app.rf-shell .wd-bar{border-bottom:0!important}
#app.rf-shell .wd-tabs button,#app.rf-shell .ws-range button,#app.rf-shell .ov-range button{margin:0 0 0 -1px!important;padding:5px 12px!important;border:1px solid #ccc!important;border-radius:0!important;background:#fff!important;color:var(--ah-text)!important;font-size:14px!important;font-weight:400!important;box-shadow:none!important}
#app.rf-shell .wd-tabs button:first-child,#app.rf-shell .ws-range button:first-of-type,#app.rf-shell .ov-range button:first-child{margin-left:0!important;border-radius:3px 0 0 3px!important}
#app.rf-shell .wd-tabs button:last-child,#app.rf-shell .ws-range button:last-child,#app.rf-shell .ov-range button:last-child{border-radius:0 3px 3px 0!important}
#app.rf-shell .wd-tabs button.is-current,#app.rf-shell .ws-range button.is-current,#app.rf-shell .ov-range button.is-current,#app.rf-shell .ov-range button[aria-pressed="true"]{position:relative;z-index:1;border-color:var(--ah-orange-line)!important;background:var(--ah-orange-soft)!important;color:var(--ah-text)!important}
#app.rf-shell .rf-tabs{border-bottom-color:var(--ah-line)!important}
#app.rf-shell .rf-tabs .rf-tab.is-current,#app.rf-shell [role="tab"][aria-selected="true"]:not(.wd-filters button):not(.wd-tabs button){border-color:var(--ah-orange)!important;color:var(--ah-text)!important}
#app.rf-shell .wd-select,#app.rf-shell .ws-filters select,#app.rf-shell .rf-select:not(.rf-header .rf-select){border-color:rgba(0,0,0,.2)!important;border-radius:3px!important;background:#fff!important}
#app.rf-shell .wd-select select{font-weight:400!important;color:var(--ah-text)!important}

/* Dashboard left panel. */
#app.rf-shell .wd-rail nav button{border-radius:3px!important;color:var(--ah-text)!important;font-size:14px}
#app.rf-shell .wd-rail nav button:hover{background:var(--ah-select)!important}
#app.rf-shell .wd-rail nav button.is-current{background:var(--ah-select)!important;font-weight:600!important}
#app.rf-shell .wd-rail .rf-btn.dark{border-radius:100px!important}
#app.rf-shell .wd-search{border-color:rgba(0,0,0,.2)!important;border-radius:3px!important}
#app.rf-shell .wd-rail-title{color:var(--ah-muted)!important;letter-spacing:0!important;text-transform:none!important;font-size:12px!important}

/* Status chips and portfolio summary. */
#app.rf-shell .ws-status{border-radius:10px!important;border:1px solid rgba(0,0,0,.2)!important;background:#fff!important;color:var(--ah-text)!important;font-weight:400!important}
#app.rf-shell .ws-status.red,#app.rf-shell .ws-attention.red{border-color:rgba(207,0,0,.35)!important;color:var(--ah-red)!important}
#app.rf-shell .ws-status.green,#app.rf-shell .ws-attention.green{border-color:rgba(0,138,67,.35)!important;color:var(--ah-green)!important}
#app.rf-shell .ws-status.amber,#app.rf-shell .ws-attention.amber{border-color:#f0c48a!important;color:#a35a00!important}
#app.rf-shell .ws-change.up,#app.rf-shell .ws-portfolio b.up,#app.rf-shell .up:not(.ms-delta){color:var(--ah-green)}
#app.rf-shell .ws-change.down,#app.rf-shell .ws-portfolio b.down,#app.rf-shell .down:not(.ms-delta){color:var(--ah-red)}
#app.rf-shell .ws-portfolio-flag{border-radius:3px!important}
#app.rf-shell .ws-folder-tag{border-radius:10px!important}

/* Tables: grey header row, hairline rows, blue keyword and page links. */
#app.rf-shell #app-content table th{background:#f6f7f8;color:var(--ah-text)!important;font-weight:600}
#app.rf-shell #app-content table td,#app.rf-shell #app-content table th{border-color:var(--ah-line-2)!important}
#app.rf-shell #app-content table tbody tr:hover{background:#f9fafb!important}

/* Charts drawn with the shared palette's CSS classes. */
#app.rf-shell .bg-green,#app.rf-shell .bg-orange{background:var(--ah-chart)!important}
#app.rf-shell .bg-indigo,#app.rf-shell .bg-blue,#app.rf-shell .bg-mint{background:var(--ah-blue)!important}
#app.rf-shell .bg-violet{background:var(--ah-black)!important}
#app.rf-shell .bg-yellow,#app.rf-shell .bg-lime{background:var(--ah-yellow)!important}
#app.rf-shell .bg-ink{background:var(--ah-chart)!important}
#app.rf-shell .bg-slate{background:var(--ah-blue)!important}
#app.rf-shell .bg-smoke{background:#c7cbd1!important}
#app.rf-shell .bg-pale,#app.rf-shell .bg-light{background:#e5e7ea!important}

/* Phones: the side menu becomes the bottom bar; keep it white. */
@media(max-width:900px){
  #app.rf-shell .rf-side{border-right:0!important;border-top:1px solid var(--ah-line)!important}
  #app.rf-shell .rf-side{background:#fff!important;padding-top:6px!important}
  #app.rf-shell .rf-brand{display:none!important}
}

/* The dark button stays for the one main action on a page: card buttons, the side-menu promo and the Create button are white. */
#app.rf-shell .ws-card-actions .rf-btn.dark,#app.rf-shell .wd-rail .rf-btn.dark{border-color:rgba(0,0,0,.2)!important;background:#fff!important;color:var(--ah-text)!important}
#app.rf-shell .ws-card-actions .rf-btn.dark *,#app.rf-shell .wd-rail .rf-btn.dark *{color:var(--ah-text)!important}
#app.rf-shell .ws-card-actions .rf-btn.dark:hover,#app.rf-shell .wd-rail .rf-btn.dark:hover{background:#f6f7f8!important}
#app.rf-shell .rf-promo .rf-btn{border-color:var(--ah-orange)!important;background:var(--ah-orange)!important;color:#fff!important}
#app.rf-shell .rf-promo .rf-btn *{color:#fff!important}
#app.rf-shell .rf-promo .rf-promo-mark{border-radius:3px!important;background:var(--ah-orange-soft)!important;color:var(--ah-orange)!important}
#app.rf-shell .rf-promo p{color:var(--ah-text)!important}

/* Dashboard totals row and filter chips. */
#app.rf-shell .wd-kpis{box-shadow:var(--ah-shadow)}
#app.rf-shell .wd-tile{border-radius:3px}
#app.rf-shell .rf-promo .rf-btn *{background:transparent!important}
#app.rf-shell .wd-filters nav button.is-current{border-color:var(--ah-navy)!important;background:var(--ah-navy)!important;color:#fff!important}
#app.rf-shell .wd-filters nav button.is-current em{color:rgba(255,255,255,.75)!important}
#app.rf-shell .wd-tile{box-shadow:var(--ah-shadow)}
#app.rf-shell .wd-tile:hover,#app.rf-shell .ws-projects .ws-site-card.ws-project:hover{box-shadow:0 0 0 1px #d5d9df,0 6px 18px rgba(16,24,40,.08)!important}

/* Loading: the page outline shows at once with a soft shimmer, so a slow load never looks like an empty page. */
#app.rf-shell .rf-skeleton .sk-card{border:0!important;border-radius:8px!important;background:#fff!important;box-shadow:var(--ah-shadow)!important}
#app.rf-shell .rf-skeleton :is(.sk-line,.sk-chart){position:relative;overflow:hidden;border-radius:6px!important;background:#eef0f3!important}
#app.rf-shell .rf-skeleton :is(.sk-line,.sk-chart)::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.75),transparent);transform:translateX(-100%);animation:ah-shimmer 1.3s ease-in-out infinite}
@keyframes ah-shimmer{to{transform:translateX(100%)}}

/* Empty states: one clear next step, a friendly icon and a solid button. */
#app.rf-shell .rf-empty{gap:10px;padding:40px 24px}
#app.rf-shell .rf-empty-icon{position:relative;width:56px;height:56px;border-radius:50%!important;background:var(--ah-orange-soft)!important;color:var(--ah-orange)!important}
#app.rf-shell .rf-empty-icon::after{content:"";position:absolute;inset:-8px;border:1.5px dashed var(--ah-orange-line);border-radius:50%;animation:ah-spin 18s linear infinite}
#app.rf-shell .rf-empty-icon .ic{width:24px;height:24px}
#app.rf-shell .rf-empty strong{color:var(--ah-text)!important;font-size:17px;font-weight:700}
#app.rf-shell .rf-empty p{color:var(--ah-muted)!important}
#app.rf-shell .rf-empty.rf-error .rf-empty-icon{background:#fdecec!important;color:var(--ah-red)!important}
#app.rf-shell .rf-empty.rf-error .rf-empty-icon::after{border-color:#f5c2c2}
@keyframes ah-spin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){#app.rf-shell .rf-skeleton :is(.sk-line,.sk-chart)::after,#app.rf-shell .rf-empty-icon::after{animation:none}}

/* Phone menu: four pages and More in the bottom bar; More opens every page as a sheet. */
#app.rf-shell .rf-nav-more{display:none}
@media(max-width:900px){
  #app.rf-shell .rf-nav{overflow:visible!important}
  #app.rf-shell:not(.is-nav-open) .rf-nav-item:not(.is-active):nth-of-type(n+5){display:none!important}
  #app.rf-shell .rf-nav-more{display:flex;flex:1 1 0;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-width:64px;padding:6px 4px;border:0;border-radius:8px;background:none;color:#333;font:inherit;font-size:11.5px;cursor:pointer}
  #app.rf-shell .rf-nav-more .ic{width:20px;height:20px}
  #app.rf-shell:not(.is-nav-open) .rf-nav{flex-wrap:nowrap}
  #app.rf-shell:not(.is-nav-open) .rf-nav>.rf-nav-item{flex:1 1 0;min-width:0}
  #app.rf-shell:not(.is-nav-open) .rf-nav>.rf-nav-item span{overflow:hidden;max-width:100%;text-overflow:ellipsis;white-space:nowrap}
  #app.rf-shell.is-nav-open::before{content:"";position:fixed;inset:0;z-index:49;background:rgba(17,24,39,.4);animation:ah-fade .2s ease-out}
  #app.rf-shell.is-nav-open .rf-side{max-height:82vh;overflow-y:auto!important;border-radius:16px 16px 0 0;box-shadow:0 -12px 40px rgba(16,24,40,.2);animation:ah-sheet .25s cubic-bezier(.22,.8,.3,1)}
  #app.rf-shell.is-nav-open .rf-nav{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px;padding:6px 4px 4px}
  #app.rf-shell.is-nav-open .rf-nav-section-label{display:block!important;grid-column:1/-1;margin:10px 8px 2px!important}
  #app.rf-shell.is-nav-open .rf-nav-item{flex-direction:row!important;justify-content:flex-start!important;gap:10px!important;padding:10px!important;font-size:14px!important}
  #app.rf-shell.is-nav-open .rf-nav-more{grid-column:1/-1;flex-direction:row;gap:8px;margin-top:6px;border:1px solid var(--ah-line);font-size:13.5px}
}
@keyframes ah-fade{from{opacity:0}}
@keyframes ah-sheet{from{transform:translateY(40px);opacity:.4}}

/* Keyboard shortcuts dialog. */
.rf-shortcuts{width:min(440px,calc(100% - 32px));padding:0;border:0;border-radius:12px;box-shadow:0 24px 60px rgba(16,24,40,.25)}
.rf-shortcuts::backdrop{background:rgba(17,24,39,.4)}
.rf-shortcuts header{display:flex;align-items:center;justify-content:space-between;padding:16px 18px;border-bottom:1px solid #eef0f2}
.rf-shortcuts h2{margin:0;color:#1f2933;font-size:16px}
.rf-shortcuts header button{display:grid;place-items:center;width:30px;height:30px;padding:0;border:0;border-radius:6px;background:none;cursor:pointer}
.rf-shortcuts header button:hover{background:#f4f5f7}
.rf-shortcuts header .ic{width:16px;height:16px}
.rf-shortcuts dl{display:grid;gap:2px;margin:0;padding:10px 18px 16px}
.rf-shortcuts dl div{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:6px 0;border-bottom:1px dashed #eef0f2}
.rf-shortcuts dt{color:#6b7280;font-size:12px;white-space:nowrap}
.rf-shortcuts dd{margin:0;color:#333;font-size:13.5px;text-align:right}
.rf-shortcuts kbd{display:inline-block;min-width:22px;padding:2px 6px;border:1px solid #d6dbe1;border-bottom-width:2px;border-radius:5px;background:#f8f9fa;color:#1f2933;font:600 12px Inter,sans-serif;text-align:center}
@media(prefers-reduced-motion:reduce){#app.rf-shell.is-nav-open .rf-side,#app.rf-shell.is-nav-open::before{animation:none}}

/* Tables: sortable headers that stay in view, and Export CSV above. */
/* Only tables that scroll with the page get a header pinned under the top bar; a table in its own scrolling box keeps
   its own header behaviour (see enhanceTable in ui.js). */
#app.rf-shell #app-content table.rf-sticky-head thead th{position:sticky;top:56px;z-index:2}
#app.rf-shell .rf-sortable{cursor:pointer;user-select:none;white-space:nowrap}
#app.rf-shell .rf-sortable:hover{background:#eef0f3!important}
#app.rf-shell .rf-sortable::after{content:"↕";margin-left:5px;color:#b3b9c2;font-size:11px}
#app.rf-shell .rf-sortable[aria-sort="ascending"]::after{content:"↑";color:var(--ah-orange)}
#app.rf-shell .rf-sortable[aria-sort="descending"]::after{content:"↓";color:var(--ah-orange)}
#app.rf-shell .rf-sortable:focus-visible{outline:2px solid var(--ah-orange);outline-offset:-2px}
#app.rf-shell .rf-table-tools{display:flex;justify-content:flex-end;margin:0 0 6px}
#app.rf-shell .rf-table-export{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border:1px solid rgba(0,0,0,.15);border-radius:6px;background:#fff;color:#333;font:inherit;font-size:12.5px;cursor:pointer}
#app.rf-shell .rf-table-export:hover{border-color:var(--ah-orange);color:var(--ah-orange)}
#app.rf-shell .rf-table-export .ic{width:14px;height:14px}

/* Accent colours: green leads the charts, blue is the second series, a lighter green and black mark the rest. */
#app.rf-shell .wd-kpi{position:relative}
#app.rf-shell .wd-kpi::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--ah-yellow)}
#app.rf-shell .wd-kpi:nth-child(4n+2)::before{background:var(--ah-chart)}
#app.rf-shell .wd-kpi:nth-child(4n+3)::before{background:var(--ah-black)}
#app.rf-shell .wd-kpi:nth-child(4n+4)::before{background:var(--ah-blue)}
#app.rf-shell .wd-kw i{background:#e8f5ee!important;color:#0b5a41!important}
#app.rf-shell .rf-promo .rf-promo-mark{color:#0b5a41!important}
#app.rf-shell .wd-moves-title .ic{color:var(--ah-yellow)!important}
#app.rf-shell .wd-tile .ms-chart{color:var(--ah-chart)!important}

/* Site Overview: the one-line summary as an insight banner, with the query moves as chips that open Queries. */
#app.rf-shell .ov-insight{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:16px 0 12px;padding:12px 16px;border:1px solid #d7eedf;border-radius:10px;background:linear-gradient(90deg,#f1faf4,#fff 70%);color:var(--ah-text)}
#app.rf-shell .ov-insight.down{border-color:#f5d0d0;background:linear-gradient(90deg,#fdf2f2,#fff 70%)}
#app.rf-shell .ov-insight-icon{display:grid;place-items:center;flex:0 0 auto;width:40px;height:40px;border-radius:50%;background:#dcf3e4;color:var(--ah-green)}
#app.rf-shell .ov-insight.down .ov-insight-icon{background:#fbe1e1;color:var(--ah-red)}
#app.rf-shell .ov-insight-icon .ic{width:20px;height:20px}
#app.rf-shell .ov-insight-copy{display:flex;flex-direction:column;gap:1px;flex:1 1 auto;min-width:180px}
#app.rf-shell .ov-insight-copy strong{color:var(--ah-green);font-size:17px;font-weight:700}
#app.rf-shell .ov-insight.down .ov-insight-copy strong{color:var(--ah-red)}
#app.rf-shell .ov-insight-copy small{color:var(--ah-muted);font-size:13px}
#app.rf-shell .ov-insight-chips{display:flex;gap:8px;flex-wrap:wrap}
#app.rf-shell .ov-insight-chip{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border:1px solid var(--ah-line);border-radius:100px;background:#fff;color:var(--ah-text);font:inherit;font-size:13px;cursor:pointer;transition:border-color .15s,transform .15s}
#app.rf-shell .ov-insight-chip:hover{border-color:#b8bec6;transform:translateY(-1px)}
#app.rf-shell .ov-insight-chip b{font-weight:700}
#app.rf-shell .ov-insight-chip.up .ic{color:var(--ah-green)}
#app.rf-shell .ov-insight-chip.down .ic{color:var(--ah-red)}
#app.rf-shell .ov-insight-chip .ic{width:14px;height:14px}

/* Consistent controls on every tool: rounded panels, fields with a green focus ring, compact pills. */
#app.rf-shell :is(.rf-card,.panel,.ws-project,.ws-site-card,.ws-portfolio,.ws-empty,.orr-card,.ov-next-card,.st-plan-card,.kx-trend-card,.rf-notice,.wd-tile,.wd-kpis){border-radius:10px!important}
#app.rf-shell #app-content :is(input[type="text"],input[type="search"],input[type="url"],input[type="email"],input[type="number"],input:not([type]),select,textarea):not(.wd-search input):not(.rf-header *){border-color:#d6dbe1;border-radius:8px}
#app.rf-shell #app-content :is(input,select,textarea):focus-visible{outline:none;border-color:var(--ah-orange)!important;box-shadow:0 0 0 3px rgba(15,107,78,.25)!important}
#app.rf-shell .rf-btn{border-radius:8px!important;transition:background .15s,border-color .15s,transform .15s,box-shadow .15s}
#app.rf-shell .rf-btn.dark:hover{transform:translateY(-1px);box-shadow:0 4px 12px rgba(17,24,39,.22)}
#app.rf-shell .rf-pill{border-radius:100px}
#app.rf-shell .rf-tabs .rf-tab{transition:color .15s,border-color .15s}

/* Theme switch in the top bar. */
.rf-theme-toggle{display:grid;place-items:center;width:36px;height:36px;padding:0;border:0;border-radius:8px;background:transparent;color:rgba(255,255,255,.85);cursor:pointer}
.rf-theme-toggle:hover{background:rgba(255,255,255,.12);color:#fff}
.rf-theme-toggle .ic{width:18px;height:18px}

/* Dark mode: the frame is drawn dark directly; page content is inverted as a whole (photos and covers turned back),
   so every tool gets a dark version without a separate stylesheet each. */
html[data-theme="dark"]{color-scheme:dark;background:#16181d}
html[data-theme="dark"] body{background:#16181d}
html[data-theme="dark"] #app.rf-shell,html[data-theme="dark"] #app.rf-shell .rf-main,html[data-theme="dark"] #app.rf-shell .rf-content{background:#16181d!important}
html[data-theme="dark"] #app.rf-shell #app-content{background:#fff!important;filter:invert(.9) hue-rotate(180deg)}
html[data-theme="dark"] #app.rf-shell #app-content :is(img,video,picture){filter:invert(1) hue-rotate(180deg)}
html[data-theme="dark"] #app.rf-shell .rf-header{background:#0b0d11!important;box-shadow:0 1px 0 #23262d!important}
html[data-theme="dark"] #app.rf-shell .rf-side{background:linear-gradient(#0b0d11 0 56px,#111318 56px)!important;border-right-color:#23262d!important}
html[data-theme="dark"] #app.rf-shell .rf-nav-section-label{color:#9ca3af!important}
html[data-theme="dark"] #app.rf-shell .rf-nav-item{color:#d1d5db!important}
html[data-theme="dark"] #app.rf-shell .rf-nav-item .ic{color:#9ca3af!important}
html[data-theme="dark"] #app.rf-shell .rf-nav-item:hover,html[data-theme="dark"] #app.rf-shell .rf-nav-item.is-active{background:rgba(255,255,255,.08)!important;color:#fff!important}
html[data-theme="dark"] #app.rf-shell .rf-nav-item.is-active .ic{color:var(--ah-orange)!important}
html[data-theme="dark"] #app.rf-shell .rf-promo{border-color:#2a2e36!important;background:#1b1e24!important}
html[data-theme="dark"] #app.rf-shell .rf-promo :is(p,strong,small,span){color:#d1d5db!important}
html[data-theme="dark"] #app.rf-shell .rf-nav-more{color:#d1d5db}
html[data-theme="dark"] .ms-tip{background:#f3f4f6;color:#111827}
html[data-theme="dark"] .ms-tip small{color:#4b5563}
@media(max-width:900px){html[data-theme="dark"] #app.rf-shell .rf-side{background:#111318!important;border-top-color:#23262d!important}}

/* Side menu: the logo stays pinned at the top on its black bar while the menu scrolls under it. */
#app.rf-shell .rf-side{background:#fff!important}
#app.rf-shell .rf-brand{position:sticky;top:0;z-index:6;height:56px;margin:0 -16px 16px -20px!important;padding:0 24px!important;background:var(--ah-navy)!important}
html[data-theme="dark"] #app.rf-shell .rf-side{background:#111318!important}
html[data-theme="dark"] #app.rf-shell .rf-brand{background:#0b0d11!important}

/* Plan card: solid black with a mint plan name, a glowing usage bar and the upgrade button. */
#app.rf-shell .rf-promo{position:relative;overflow:hidden;padding:16px!important;border:0!important;border-radius:12px!important;background:#111827!important;color:#fff!important;box-shadow:0 10px 24px rgba(17,24,39,.22)!important}
#app.rf-shell .rf-promo::after{content:"";position:absolute;top:-50px;right:-50px;width:140px;height:140px;border-radius:50%;background:radial-gradient(circle,rgba(15,107,78,.5),transparent 70%);pointer-events:none;animation:ah-glow 5s ease-in-out infinite}
#app.rf-shell .rf-promo>*{position:relative;z-index:1}
#app.rf-shell .rf-planmeter-head span,#app.rf-shell .rf-planmeter-row span{color:rgba(255,255,255,.6)!important}
#app.rf-shell .rf-planmeter-head strong{color:#6ee7b7!important;font-size:18px!important}
#app.rf-shell .rf-planmeter-row b{color:#fff!important}
#app.rf-shell .rf-promo small{color:rgba(255,255,255,.65)!important}
#app.rf-shell .rf-planmeter-bar{height:7px!important;background:rgba(255,255,255,.14)!important}
#app.rf-shell .rf-planmeter-bar::-webkit-progress-bar{background:rgba(255,255,255,.14)!important}
#app.rf-shell .rf-planmeter-bar::-webkit-progress-value{background:linear-gradient(90deg,#0f6b4e,#bfe3d0)!important;box-shadow:0 0 10px rgba(52,211,153,.6)}
#app.rf-shell .rf-planmeter-bar::-moz-progress-bar{background:linear-gradient(90deg,#0f6b4e,#bfe3d0)}
#app.rf-shell .rf-planmeter-bar.is-full::-webkit-progress-value{background:#ef4444!important}
#app.rf-shell .rf-promo .rf-btn{margin-top:4px;font-weight:700}
html[data-theme="dark"] #app.rf-shell .rf-promo{background:#1b1e24!important}
@keyframes ah-glow{0%,100%{opacity:.7;transform:scale(1)}50%{opacity:1;transform:scale(1.15)}}
@media(prefers-reduced-motion:reduce){#app.rf-shell .rf-promo::after{animation:none}}

/* Metric rows never run past their box: columns share the width and wrap 6 → 3 → 2 (or 4 → 2) as space runs out. */
#app.rf-shell .ms-strip{grid-template-columns:repeat(var(--ms-cols,5),minmax(0,1fr))}
#app.rf-shell .orr-summary{container-type:inline-size}
#app.rf-shell .orr .orr-strip{gap:1px;background:#e9ebee!important;overflow:hidden;border-color:#e3e6ea!important;border-radius:10px!important}
#app.rf-shell .orr .orr-strip>*{border-left:0!important;background:#fff;min-width:0}
#app.rf-shell .orr .orr-strip .ms-note{overflow-wrap:anywhere}
@container (max-width:900px){#app.rf-shell .orr .orr-strip-6{--ms-cols:3}}
@container (max-width:560px){#app.rf-shell .orr .orr-strip-6,#app.rf-shell .orr .orr-strip-4{--ms-cols:2}}
@media(min-width:901px) and (max-height:760px){#app.rf-shell .rf-promo{display:block!important;margin-top:16px!important}}
#app.rf-shell .rf-promo .rf-btn.rf-planmeter-action:not(.dark){border-color:var(--ah-orange)!important;background:var(--ah-orange)!important;color:#fff!important}
#app.rf-shell .rf-promo .rf-btn.rf-planmeter-action:not(.dark):hover{background:#0b5a41!important;transform:translateY(-1px)}
#app.rf-shell .rf-promo .rf-btn.rf-planmeter-action *{color:#fff!important;background:transparent!important}

/* Report tables (Top Pages, Organic Rankings, Growth): long addresses end in … (full address on hover), long keywords
   wrap, numbers stay on one line, so the table fits its card. */
#app.rf-shell .orr-table .orr-key{min-width:200px!important}
#app.rf-shell .orr-url.is-strong{max-width:260px!important;overflow:hidden;text-overflow:ellipsis;vertical-align:bottom}
#app.rf-shell .orr-table td:has(> .orr-url.is-strong){min-width:0!important;max-width:280px}
#app.rf-shell .orr-table td:last-child:not(.orr-num){min-width:150px;max-width:230px;white-space:normal;overflow-wrap:anywhere;line-height:1.35}
#app.rf-shell .orr-table .orr-num,#app.rf-shell .orr-pos{white-space:nowrap}
#app.rf-shell .orr-url{white-space:nowrap}
#app.rf-shell .orr-table tbody .orr-key,#app.rf-shell .orr-table tbody th{background:#fff!important}
#app.rf-shell .orr-table tbody tr:hover .orr-key,#app.rf-shell .orr-table tbody tr:hover th{background:#f9fafb!important}

/* Side menu: pure black text and icons; the current page is marked by its light background and bold text. */
#app.rf-shell .rf-nav-section-label,#app.rf-shell .rf-nav-item,#app.rf-shell .rf-nav-item.is-active,#app.rf-shell .rf-nav-more{color:#000!important}
#app.rf-shell .rf-nav-item .ic,#app.rf-shell .rf-nav-item.is-active .ic,#app.rf-shell .rf-nav-more .ic{color:#000!important}
#app.rf-shell .rf-nav-item.is-active{background:#f1f2f4!important;font-weight:700!important}

/* ---- Site Overview, redesigned: full-width performance chart, then wins beside actions, then three insight cards. */
#app.rf-shell .pg-overview.ov3 .ov4-chart{margin-top:16px}
#app.rf-shell .pg-overview.ov3 .ov4-chart>*{margin:0;width:100%}
#app.rf-shell .pg-overview.ov3 .ov4-chart .rf-modern-chart{min-height:300px}
#app.rf-shell .pg-overview.ov3 .ov4-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;align-items:start;margin-top:16px}
#app.rf-shell .pg-overview.ov3 .ov4-pair:has(>:only-child){grid-template-columns:1fr}
#app.rf-shell .pg-overview.ov3 .ov4-pair>*{min-width:0;margin:0!important}
#app.rf-shell .pg-overview.ov3 .ov4-actions>*{margin:0!important}
#app.rf-shell .pg-overview.ov3 .ov4-trio{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:16px}
#app.rf-shell .pg-overview.ov3 .ov4-trio>*{min-width:0;margin:0!important}
@media(max-width:1180px){#app.rf-shell .pg-overview.ov3 .ov4-trio{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:900px){#app.rf-shell .pg-overview.ov3 :is(.ov4-pair,.ov4-trio){grid-template-columns:1fr}}

/* Quick wins card: label, the whole keyword, the page, and the gain in its own column. */
#app.rf-shell .ov-wins{padding:18px 20px!important}
#app.rf-shell .ov-wins-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
#app.rf-shell .ov-wins-eyebrow{display:inline-flex;align-items:center;gap:6px;color:#0b5a41!important;font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
#app.rf-shell .ov-wins-eyebrow .ic{width:14px;height:14px;color:var(--ah-orange)}
#app.rf-shell .ov-wins h2{margin:4px 0 0;font-size:18px}
#app.rf-shell .ov-wins-lead{margin:8px 0 12px;color:var(--ah-muted)!important;font-size:13.5px}
#app.rf-shell .ov-wins-list{display:flex;flex-direction:column;gap:8px;margin:0;padding:0;list-style:none}
#app.rf-shell .ov-wins-list li{display:grid;grid-template-columns:28px minmax(0,1fr) auto;align-items:center;gap:12px;padding:12px 14px;border:1px solid var(--ah-line-2);border-radius:10px;background:#fff;transition:border-color .15s,box-shadow .15s}
#app.rf-shell .ov-wins-list li:hover{border-color:#bfe3d0;box-shadow:0 4px 12px rgba(15,107,78,.12)}
#app.rf-shell .ov-win-rank{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:#e8f5ee!important;color:#0b5a41!important;font-size:13px;font-weight:700}
#app.rf-shell .ov-win-main{display:flex;flex-direction:column;gap:2px;min-width:0}
#app.rf-shell .ov-win-kind{color:var(--ah-muted);font-size:11.5px;font-weight:600;letter-spacing:.02em}
#app.rf-shell .ov-win-main strong{color:var(--ah-text);font-size:14px;font-weight:600;line-height:1.35;white-space:normal;overflow-wrap:anywhere}
#app.rf-shell .ov-win-main small{overflow:hidden;color:var(--ah-link);font-size:12px;text-overflow:ellipsis;white-space:nowrap}
#app.rf-shell .ov-win-stake{display:flex;flex-direction:column;align-items:flex-end;gap:0;white-space:nowrap;text-align:right}
#app.rf-shell .ov-win-stake b{color:var(--ah-green);font-size:16px}
#app.rf-shell .ov-win-stake small{color:var(--ah-muted);font-size:11px}
#app.rf-shell .ov-win-small{padding:3px 8px;border-radius:100px;background:#ecfdf3;color:var(--ah-green);font-size:12px;font-weight:600}
#app.rf-shell .ov-wins-foot{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:14px}
#app.rf-shell .ov-wins-foot small{color:var(--ah-muted)}

/* Progress bars (Keyword Research lookups and every page while it loads): green, with a moving sheen. */
#app.rf-shell .rf-progress{border:1px solid var(--ah-orange-line)!important;border-radius:10px!important;background:#f3faf6!important}
#app.rf-shell .rf-progress-head strong{color:#0b5a41!important}
#app.rf-shell .rf-progress-track{position:relative;overflow:hidden;height:8px;border-radius:100px;background:#bfe3d0!important}
#app.rf-shell .rf-progress-track span{position:relative;display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#0f6b4e,#34d399)!important;transition:width .5s ease}
#app.rf-shell .rf-progress-track span::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent);animation:ah-shimmer 1.2s linear infinite}
#app.rf-shell .rf-page-progress{max-width:560px;margin:0 0 18px}
@media(prefers-reduced-motion:reduce){#app.rf-shell .rf-progress-track span::after{animation:none}}

/* Competitive positioning map: soft quadrants, one colour per site, the site ringed in green, labels on a white halo,
   bubbles popping in one by one, and a legend with every site's numbers. */
#app.rf-shell .od-map-wrap{padding:8px 16px 4px!important}
#app.rf-shell .od-map{display:block;width:100%!important;max-width:none!important;height:auto;overflow:visible}
#app.rf-shell .od-map-quad.is-strong{fill:#ecfdf5}
#app.rf-shell .od-map-quad.is-weak{fill:#f8fafc}
#app.rf-shell .od-map-corner{fill:#94a3b8;font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
#app.rf-shell .od-map-grid{stroke:#eef0f3!important;stroke-width:1}
#app.rf-shell .od-map-tick{fill:#6b7280!important;font-size:11px!important}
#app.rf-shell .od-map-axis{fill:#374151!important;font-size:12px!important;font-weight:600}
#app.rf-shell .od-map-point circle:not(.od-map-ring){fill:var(--c)!important;fill-opacity:.2!important;stroke:var(--c)!important;stroke-width:2;transform-box:fill-box;transform-origin:center;animation:od-pop .6s cubic-bezier(.34,1.56,.64,1) var(--d,0s) both;transition:fill-opacity .15s}
#app.rf-shell .od-map-point:hover circle:not(.od-map-ring){fill-opacity:.4!important}
#app.rf-shell .od-map-point.is-target circle:not(.od-map-ring){fill-opacity:.35!important}
#app.rf-shell .od-map-ring{fill:none;stroke:#0f6b4e;stroke-width:1.5;stroke-dasharray:4 3;transform-box:fill-box;transform-origin:center;animation:od-spin 14s linear infinite}
#app.rf-shell .od-map-point text{fill:#111827!important;font-size:12px!important;font-weight:600;paint-order:stroke;stroke:#fff;stroke-width:4px;stroke-linejoin:round}
#app.rf-shell .od-map-point.is-target text{fill:#0b5a41!important;font-weight:700}
#app.rf-shell .od-map-legend{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:6px 16px;margin:10px 0 6px;padding:0;list-style:none}
#app.rf-shell .od-map-legend li{display:grid;grid-template-columns:12px minmax(0,1fr);gap:2px 8px;align-items:center;padding:6px 8px;border-radius:8px}
#app.rf-shell .od-map-legend li.is-target{background:#f3faf6}
#app.rf-shell .od-map-legend i{width:12px;height:12px;border:2px solid var(--c);border-radius:50%;background:color-mix(in srgb,var(--c) 25%,transparent)}
#app.rf-shell .od-map-legend span{overflow:hidden;color:#111827;font-size:13px;font-weight:600;text-overflow:ellipsis;white-space:nowrap}
#app.rf-shell .od-map-legend em{margin-left:4px;padding:1px 6px;border-radius:100px;background:#bfe3d0;color:#0b5a41;font-size:10.5px;font-style:normal;font-weight:700;text-transform:uppercase}
#app.rf-shell .od-map-legend small{grid-column:2;color:#6b7280;font-size:11.5px}
#app.rf-shell .od-map-legend b{color:#374151;font-weight:600}
@keyframes od-pop{from{transform:scale(0);opacity:0}to{transform:scale(1);opacity:1}}
@keyframes od-spin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){#app.rf-shell .od-map-point circle,#app.rf-shell .od-map-ring{animation:none}}
#app.rf-shell .od-map{max-width:880px!important;margin:0 auto}
#app.rf-shell .od-map-crowd rect{fill:#111827}
#app.rf-shell .od-map-crowd text{fill:#fff;font-size:11px;font-weight:600}

/* ---- Tables that fit their card (from a page-by-page scan) ---- */
/* Domain Overview: Authority, intent and branded cards two per row instead of three; the intent donut stacks above its
   table in a narrow card; first columns, keyword examples and paths wrap instead of stretching the table. */
#app.rf-shell .od-page .od-grid-3{grid-template-columns:repeat(auto-fit,minmax(min(420px,100%),1fr))!important}
#app.rf-shell .od-page .od-card{container-type:inline-size}
@container (max-width:620px){
  #app.rf-shell .od-page .od-positions-body{grid-template-columns:1fr!important;justify-items:center}
  #app.rf-shell .od-page .od-positions-table{width:100%}
}
#app.rf-shell .od-page .od-table th{white-space:normal!important;line-height:1.25}
#app.rf-shell .od-page .od-table td:first-child,#app.rf-shell .od-page .od-positions-table .od-table td:first-child{white-space:normal!important;overflow-wrap:anywhere;min-width:120px}
#app.rf-shell .od-page .od-examples{max-width:none!important;white-space:normal!important;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;line-height:1.35}
#app.rf-shell .od-page .od-table td a,#app.rf-shell .od-page .od-table td .rf-link{overflow-wrap:anywhere}
#app.rf-shell .od-page .od-table th,#app.rf-shell .od-page .od-table td{padding:7px 6px}

/* Content Briefs: the action buttons wrap inside their cell. */
#app.rf-shell .cl-idea-table td:last-child{white-space:normal!important;min-width:0}
#app.rf-shell .cl-idea-table td:last-child>*{display:inline-flex;flex-wrap:wrap;gap:6px;justify-content:flex-end}
#app.rf-shell .cl-idea-table td:first-child,#app.rf-shell .cl-idea-table td:nth-child(2){white-space:normal!important;overflow-wrap:anywhere;max-width:220px}

/* Organic Rankings: keyword and URL columns share the space. */
#app.rf-shell .orr-table .orr-key{max-width:240px!important}
#app.rf-shell .orr-table td.orr-url-cell{max-width:180px}
#app.rf-shell .orr-table td.orr-url-cell .orr-url{max-width:170px}

/* Rank Tracking: long keywords wrap. */
#app.rf-shell .trk-live-table td:nth-child(2){white-space:normal!important;overflow-wrap:anywhere;max-width:280px}

/* AI & MCP: code samples wrap rather than scroll sideways. */
#app.rf-shell #app-content pre{white-space:pre-wrap;overflow-wrap:anywhere}

/* Domain Overview swatches and stacked bars use the same colours as the charts beside them. */
#app.rf-shell .od-page .od-b0{background:#0f6b4e!important}
#app.rf-shell .od-page .od-b1{background:#2563eb!important}
#app.rf-shell .od-page .od-b2{background:#a3a8b0!important}
#app.rf-shell .od-page .od-b3{background:#dbeafe!important}

/* Keyword Research, redesigned: a clean white hero behind the search (one soft green glow, no pattern), ideas from the
   website's own keywords, recent searches and what a search returns; results as tiles above a tidy table. */
/* The search panel (keyword-explorer.css) is the card; the hero around it is only a soft glow, so there is one frame, not two. */
#app.rf-shell .pg-keyword-explorer .rx-search:not(.is-docked){position:relative;margin-top:8px;padding:28px 0 8px}
#app.rf-shell .pg-keyword-explorer .rx-search:not(.is-docked)::before{content:"";position:absolute;inset:-20% 0 auto;height:70%;background:radial-gradient(60% 60% at 50% 40%,rgba(15,107,78,.10),transparent 70%);pointer-events:none}
#app.rf-shell .pg-keyword-explorer .rx-search:not(.is-docked)>*{position:relative}
#app.rf-shell .pg-keyword-explorer .rx-search-title{color:#111827!important;font-size:38px;font-weight:700;letter-spacing:-.035em}
#app.rf-shell .pg-keyword-explorer .rx-search-sub{max-width:600px;color:#5b6472!important;font-size:15px;line-height:1.5}
#app.rf-shell .pg-keyword-explorer .rx-panel{border-color:#e5e7eb;box-shadow:0 12px 32px rgba(17,24,39,.08)}
#app.rf-shell .pg-keyword-explorer .rx-search-bar{border-color:#d6dbe1}
#app.rf-shell .pg-keyword-explorer .rx-search-bar:focus-within{border-color:var(--ah-orange);box-shadow:0 0 0 4px rgba(15,107,78,.14)}
#app.rf-shell .pg-keyword-explorer .rx-field>.ic{color:#9aa3af}
#app.rf-shell .pg-keyword-explorer .rx-meter::-webkit-progress-value{background:var(--ah-orange)}
#app.rf-shell .pg-keyword-explorer .rx-meter::-moz-progress-bar{background:var(--ah-orange)}
#app.rf-shell .pg-keyword-explorer .rx-example:hover{border-color:var(--ah-orange);background:#f3faf6}
#app.rf-shell .pg-keyword-explorer .rx-search-bar .rf-btn{padding:0 24px;border-radius:12px!important;font-size:14.5px;font-weight:600}
#app.rf-shell .pg-keyword-explorer .rx-modes{padding:3px;border-color:#e5e7eb;border-radius:100px;background:#f3f4f6}
#app.rf-shell .pg-keyword-explorer .rx-mode{height:32px;padding:0 16px;border-radius:100px;color:#5b6472}
#app.rf-shell .pg-keyword-explorer .rx-mode.is-current{background:#fff;color:#111827;box-shadow:0 1px 3px rgba(16,24,40,.12)}
#app.rf-shell .pg-keyword-explorer .rx-credits{color:#6b7280}
#app.rf-shell .pg-keyword-explorer .rx-credits b{color:#111827}
#app.rf-shell .pg-keyword-explorer .rx-bulk-box{border-color:#d6dbe1}
#app.rf-shell .pg-keyword-explorer .rx-bulk-box:focus-within{border-color:var(--ah-orange);box-shadow:0 0 0 4px rgba(15,107,78,.14)}
#app.rf-shell .rx-landing{display:flex;flex-direction:column;gap:16px;max-width:1040px;margin:20px auto 0}
#app.rf-shell .rx-start{padding:18px 20px;border:1px solid #e5e7eb;border-radius:14px;background:#fff}
#app.rf-shell .rx-start h3{display:flex;align-items:center;gap:8px;margin:0;color:#111827;font-size:14.5px;font-weight:700}
#app.rf-shell .rx-start h3 .ic{width:16px;height:16px;color:var(--ah-orange)}
#app.rf-shell .rx-start p{margin:4px 0 0;color:#6b7280;font-size:13px}
#app.rf-shell .rx-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
#app.rf-shell .rx-chip{display:inline-flex;align-items:baseline;gap:8px;padding:8px 14px;border:1px solid #e5e7eb;border-radius:100px;background:#fff;color:#111827;font:inherit;font-size:13.5px;font-weight:500;cursor:pointer;transition:border-color .15s,background .15s,transform .15s,box-shadow .15s}
#app.rf-shell .rx-chip:hover{border-color:var(--ah-orange);background:#f3faf6;transform:translateY(-1px);box-shadow:0 4px 12px rgba(15,107,78,.12)}
#app.rf-shell .rx-chip small{color:#6b7280;font-size:11.5px;font-weight:400}
#app.rf-shell .rx-features{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;margin-top:2px}
#app.rf-shell .rx-features article{display:flex;flex-direction:column;gap:8px;padding:16px;border:1px solid #e5e7eb;border-radius:14px;background:#fff;transition:border-color .15s,transform .15s,box-shadow .15s}
#app.rf-shell .rx-features article:hover{border-color:#bfe3d0;transform:translateY(-2px);box-shadow:0 8px 20px rgba(16,24,40,.06)}
#app.rf-shell .rx-features span{display:grid;place-items:center;width:36px;height:36px;border-radius:10px;background:#e8f5ee;color:var(--ah-orange)}
#app.rf-shell .rx-features .ic{width:18px;height:18px}
#app.rf-shell .rx-features strong{color:#111827;font-size:13.5px}
#app.rf-shell .rx-features small{color:#6b7280;font-size:12px;line-height:1.45}
@media(max-width:1100px){#app.rf-shell .rx-features{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:640px){#app.rf-shell .rx-features{grid-template-columns:repeat(2,minmax(0,1fr))}#app.rf-shell .pg-keyword-explorer .rx-search:not(.is-docked){padding:12px 0 4px}#app.rf-shell .pg-keyword-explorer .rx-search-title{font-size:28px}}

/* Results: the keyword summary as three stat tiles beside the trend, honest badges in green, blue and grey (never
   yellow), pill tabs with counts, and a quiet table. */
#app.rf-shell .pg-keyword-explorer .kx-summary{border:1px solid #e5e7eb!important;box-shadow:none!important}
#app.rf-shell .pg-keyword-explorer .kx-summary-head{padding:20px 24px 16px;border-bottom-color:#eef0f2}
#app.rf-shell .pg-keyword-explorer .kx-summary-head h2{color:#111827;font-size:24px;font-weight:700;letter-spacing:-.025em}
#app.rf-shell .pg-keyword-explorer .kx-summary-head p{color:#6b7280;font-size:12.5px}
#app.rf-shell .pg-keyword-explorer .kx-stats{gap:0;padding:0}
#app.rf-shell .pg-keyword-explorer .kx-stat{gap:8px;padding:20px 24px}
#app.rf-shell .pg-keyword-explorer .kx-stat+.kx-stat{border-left-color:#eef0f2}
#app.rf-shell .pg-keyword-explorer .kx-stat small{color:#6b7280;font-size:12px;font-weight:600;letter-spacing:.04em;text-transform:uppercase}
#app.rf-shell .pg-keyword-explorer .kx-stat strong{color:#111827;font-size:32px;font-weight:700;letter-spacing:-.03em;overflow-wrap:anywhere}
#app.rf-shell .pg-keyword-explorer .kx-stat:nth-child(3) strong{font-size:22px;letter-spacing:-.02em;line-height:1.25}
#app.rf-shell .pg-keyword-explorer .kx-stat p{color:#6b7280;font-size:12px}
#app.rf-shell .pg-keyword-explorer .kx-summary-trend{border-left-color:#eef0f2;background:#fafbfc}
#app.rf-shell .pg-keyword-explorer .kx-summary-trend>small{color:#6b7280;font-size:12px;font-weight:600;letter-spacing:.04em;text-transform:uppercase}
#app.rf-shell .pg-keyword-explorer .kx-honest-badge{height:22px;padding:0 8px;font-size:11px}
#app.rf-shell .pg-keyword-explorer .kx-honest-measured{background:#e8f5ee;color:#0b5a41}
#app.rf-shell .pg-keyword-explorer .kx-honest-derived{background:#eaf1ff;color:#1e40af}
#app.rf-shell .pg-keyword-explorer .kx-honest-estimated{background:#f3f4f6;color:#374151}
#app.rf-shell .pg-keyword-explorer .kx-honest-not-available{background:#f3f4f6;color:#6b7280}
#app.rf-shell .pg-keyword-explorer .qx-pos.close{background:#eaf1ff;color:#1e40af}
#app.rf-shell .pg-keyword-explorer .kx-live-ideas{border:1px solid #e5e7eb!important;box-shadow:none!important}
#app.rf-shell .pg-keyword-explorer .kx-live-tabs{display:flex;gap:6px;margin:16px 22px 4px;padding:0;border-bottom:0!important}
#app.rf-shell .pg-keyword-explorer .kx-live-tabs .rf-tab{margin:0;padding:7px 12px;border:1px solid transparent!important;border-radius:100px;color:#5b6472;font-size:13px;font-weight:500}
#app.rf-shell .pg-keyword-explorer .kx-live-tabs .rf-tab:hover{background:#f3f4f6}
#app.rf-shell .pg-keyword-explorer .kx-live-tabs .rf-tab.is-current{border-color:#111827!important;background:#111827;color:#fff!important;font-weight:600}
#app.rf-shell .pg-keyword-explorer .kx-live-tabs .rf-tab.is-current .kx-count{color:rgba(255,255,255,.7)}
#app.rf-shell .pg-keyword-explorer .kx-count{color:#9aa3af}
#app.rf-shell .pg-keyword-explorer .kx-live-ideas .rf-card-tools{padding:12px 22px 8px}
#app.rf-shell .pg-keyword-explorer .kx-drop>summary{border-color:#e5e7eb;border-radius:10px}
#app.rf-shell .pg-keyword-explorer .kx-drop>summary:hover{border-color:#cbd1d8}
#app.rf-shell .pg-keyword-explorer .kx-drop.is-active>summary{border-color:var(--ah-orange);background:#f3faf6}
#app.rf-shell .pg-keyword-explorer .kx-drop-option.is-current{background:#e8f5ee;color:#0b5a41}
#app.rf-shell .pg-keyword-explorer .kx-meaning.is-active{border-color:var(--ah-orange)}
#app.rf-shell .pg-keyword-explorer .kx-live-table th{font-size:12px;letter-spacing:.02em}
#app.rf-shell .pg-keyword-explorer .kx-live-table td{padding-top:11px;padding-bottom:11px}
#app.rf-shell .pg-keyword-explorer .kx-live-table td.strong{color:#111827;font-weight:600}
#app.rf-shell .pg-keyword-explorer .kx-live-table tbody tr:hover{background:#f8fafc!important}
#app.rf-shell .pg-keyword-explorer .kx-th.is-active{color:var(--ah-orange)}
#app.rf-shell .pg-keyword-explorer .kx-th.is-active .ic{color:var(--ah-orange)}
#app.rf-shell .pg-keyword-explorer .kx-trend{color:var(--ah-orange)}
#app.rf-shell .pg-keyword-explorer .kx-track .rf-btn{border-radius:100px!important}
#app.rf-shell .pg-keyword-explorer .kx-easy-tab .kx-count{color:inherit}
#app.rf-shell .pg-keyword-explorer .rf-source{padding:12px 22px 16px;color:#6b7280}
#app.rf-shell .pg-keyword-explorer .rf-source .ic{color:var(--ah-orange)}
#app.rf-shell .pg-keyword-explorer .rx-loader{border-color:#e5e7eb;background:#f8fafc}
#app.rf-shell .pg-keyword-explorer .rx-loader-bars i{background:var(--ah-orange)}
#app.rf-shell .pg-keyword-explorer .rx-loader-ring{border-color:var(--ah-orange)}
#app.rf-shell .pg-keyword-explorer .kx-trend-card{border-color:#e5e7eb;background:#fafbfc}
#app.rf-shell .pg-keyword-explorer .qx-chip{border-radius:100px}
#app.rf-shell .pg-keyword-explorer .qx-chip.is-current{border-color:#111827;background:#111827}

/* Error cards never overflow, and Google's raw error text sits folded under "Technical details". */
#app.rf-shell .rf-empty p{overflow-wrap:anywhere}
#app.rf-shell .rf-tech-details{margin-top:8px;font-size:12px;text-align:left}
#app.rf-shell .rf-tech-details summary{cursor:pointer;color:var(--ah-muted);font-weight:600}
#app.rf-shell .rf-tech-details code{display:block;margin-top:6px;padding:8px 10px;border-radius:6px;background:#f6f7f9;color:#4b5563;font-size:11.5px;white-space:normal;overflow-wrap:anywhere}

/* ---- Workspace cleanup, page by page: neutral hairlines instead of beige, padded forms inside cards, one green
   accent for bars and badges, and quiet metric tiles. ---- */
#app.rf-shell{--th-line:#e5e7eb;--th-soft:#f6f7f9;--th-faint:#9aa3af;--th-muted:#5b6472}
/* Body cells that are row labels (th in tbody) are not header cells: no grey fill. */
#app.rf-shell #app-content table tbody th{background:transparent}
/* Forms and headlines that sit straight inside a card get the card's inner padding. */
#app.rf-shell .rf-card>:is(.mg-form,.sw-form,.lm-form,.lw-form,.pp-form){padding:6px 20px 20px}
#app.rf-shell .rf-card>:is(.sw-h,.sw-cert,.lr-headline,.lt-import-file,.fc-assumptions){margin-left:20px;margin-right:20px}
#app.rf-shell .rf-card>.fc-assumptions{margin-bottom:18px}
#app.rf-shell .rf-card.fc-summary,#app.rf-shell .rf-card.lr-summary{padding:20px 22px}
#app.rf-shell .fc-headline{color:#111827}
#app.rf-shell .fc-stats>div{border-color:#e5e7eb;background:#fafbfc}
#app.rf-shell .sw-cert{padding:10px 0}
/* Checkboxes and radios use the accent instead of the browser blue. */
#app.rf-shell #app-content :is(input[type=checkbox],input[type=radio]){accent-color:var(--ah-orange)}
/* Dashboard totals: one quiet style, no four-colour top stripes. */
#app.rf-shell .wd-kpi::before{display:none}
/* Site Overview: ranking bars in the accent on a light track, the spread bar as one green scale, numbered actions alike. */
#app.rf-shell .pg-overview .ov2-track{background:#eef0f2!important;border-radius:100px;overflow:hidden}
#app.rf-shell .pg-overview.ov3 .ov2-rail .ov2-track>span{background-color:var(--ah-orange)}
#app.rf-shell .pg-overview.ov3 .ov2-pages .ov2-track>span{background-color:#6fb597}
#app.rf-shell .pg-overview.ov3 .ov2-mix .ov2-green{background-color:#0b5a41}
#app.rf-shell .pg-overview.ov3 .ov2-mix .ov2-lime{background-color:#2c8c6a}
#app.rf-shell .pg-overview.ov3 .ov2-mix .ov2-yellow{background-color:#8fcfb0}
#app.rf-shell .pg-overview.ov3 .ov2-mix .ov2-orange{background-color:#dbe4df}
#app.rf-shell .pg-overview .ov-next-card .ov-next-number{background:#f3f4f6!important;color:#374151!important}
#app.rf-shell .pg-overview .ov-next-card:first-child .ov-next-number{background:#e8f5ee!important;color:#0b5a41!important}
/* Empty states that stand alone on a page sit in a card like every other panel. */
#app.rf-shell #app-content .pg>.rf-empty{margin-top:4px;border:1px solid #e5e7eb;border-radius:10px;background:#fff}
/* Bars and meters on every page fill in the accent instead of black or grey. */
#app.rf-shell :is(.od-page .od-bar i,.ks-score em,.ms-gauge i,.pg-optimizer .op-bar i,.pg-ai .ai-meter i,.al-live .al-bar i,.pg-overview .ov-ai-progress-track span,.pg-tracker .trk-sov-bar>span,.keyword-bars i,.competitor-list article:first-child .competitor-bar em){background:var(--ah-orange)!important}
#app.rf-shell :is(.od-page .od-bar,.ks-score i){background:#eef0f2}
/* Domain Overview: Authority and Branded traffic stack in the left column beside the taller intent card, so no card
   stretches empty and nothing sits alone on a row. */
@media(min-width:1100px){
  #app.rf-shell .od-page .od-grid-3{grid-template-columns:repeat(2,minmax(0,1fr))!important;grid-template-rows:auto 1fr;align-items:start}
  #app.rf-shell .od-page .od-grid-3>.od-authority{grid-column:1;grid-row:1}
  #app.rf-shell .od-page .od-grid-3>.od-branded{grid-column:1;grid-row:2}
  #app.rf-shell .od-page .od-grid-3>.od-intent{grid-column:2;grid-row:1/span 2}
}
/* Link tools (Backlink Audit, Link Building, Link Recovery): space between cards, a readable current tab, padded import steps. */
#app.rf-shell .pg-linktools{display:flex;flex-direction:column;gap:16px}
#app.rf-shell .pg-linktools>*{margin-top:0;margin-bottom:0}
#app.rf-shell #app-content .lt-tabs button.is-current,#app.rf-shell #app-content .lt-tabs button.is-current *{color:#fff!important}
#app.rf-shell .rf-card>.lt-import-steps{margin:0 20px 12px;padding-left:18px}
#app.rf-shell .rf-card>.lt-import-file{margin-bottom:20px}
/* Backlinks: linked-page bars match the anchor bars. */
#app.rf-shell .pg-backlinks .bl-bar.is-blue i{background:var(--ah-orange)!important}
/* Cards stacked straight in a page column always keep a gap (This Week and any page laid out the same way). */
#app.rf-shell .pg:not(.pg-linktools)>.rf-card+.rf-card{margin-top:16px}
/* AI Crawlers: the folded "How to get your logs" panel keeps its own height and a padded, clickable title. */
#app.rf-shell .bta-help{align-self:start}
#app.rf-shell .bta-help>summary{padding:18px 20px;cursor:pointer;font-weight:600;color:#111827}
#app.rf-shell .bta-help[open]>summary{border-bottom:1px solid #eef0f2}
/* Phones: Domain Overview tabs swipe sideways instead of widening the page. */
#app.rf-shell .od-tabs{overflow-x:auto;scrollbar-width:none;flex-wrap:nowrap}
#app.rf-shell .od-tabs::-webkit-scrollbar{display:none}
#app.rf-shell .od-tabs .rf-tab{flex:none}
#app.rf-shell .od-page .od-positions-body>*,#app.rf-shell .od-page .od-positions-table{min-width:0;max-width:100%}
/* Wrapped native selects: the label draws the box, so the select inside stays borderless. */
#app.rf-shell .rf-native select,dialog .rf-native select{border:0!important;background:transparent!important;box-shadow:none!important;height:100%!important;padding-left:0!important}
/* Add-website dialog notice: message on its own line, action buttons in a row beneath it. */
dialog .ws-dialog-status:not(:empty){display:flex;flex-wrap:wrap;gap:8px;align-items:center;background:#f6f7f9!important;border-color:#e5e7eb!important;border-radius:10px}
dialog .ws-dialog-status>span{flex:1 0 100%;margin-bottom:4px}
dialog .ws-dialog-status.is-error{background:#fef2f2!important;border-color:#fecaca!important;color:#991b1b!important}
/* Setup steps in the add-website dialog read as numbered badges. */
dialog .ws-dialog-steps b{display:inline-grid;place-items:center;width:20px;height:20px;margin-right:6px;border-radius:50%;background:#e8f5ee;color:#0f6b4e;font-size:11.5px}
dialog .primary-button:disabled{opacity:.45!important;cursor:not-allowed}
/* Secondary text (card subtitles, footnotes, small labels) at a readable 4.8:1 instead of 2.6:1 on white. */
#app.rf-shell{--il-faint:#6b7280;--rf-faint:#6b7280;--th-faint:#6b7280}
#app.rf-shell .rf-card-heading p,#app.rf-shell .rf-card-sub{color:#6b7280}
#app.rf-shell .orr-flat{color:#6b7280}
/* Dialogs follow dark mode the same way the content area does. */
html[data-theme="dark"] :is(#site-dialog,#token-dialog){filter:invert(.9) hue-rotate(180deg)}
html[data-theme="dark"] :is(#site-dialog,#token-dialog) :is(img,video,picture){filter:invert(1) hue-rotate(180deg)}
/* Email confirmation banner: neutral bar with a green mail icon instead of amber. */
#app.rf-shell .rf-verify-banner{border-bottom-color:#e5e7eb!important;background:#f6f7f9!important}
#app.rf-shell .rf-verify-banner>.ic{color:#0f6b4e!important}
#app.rf-shell .rf-verify-banner .rf-btn.sm{border-color:#d1d5db!important}
/* Space between the page heading and the welcome card. */
#app.rf-shell .wl-card{margin-top:16px}
/* Phone bottom bar: full page names at the "More" label size, two lines at most, never cut off with an ellipsis. */
@media(max-width:900px){
  #app.rf-shell:not(.is-nav-open) .rf-nav>.rf-nav-item{height:auto!important;min-height:50px;padding:6px 2px!important;font-size:11.5px!important}
  #app.rf-shell:not(.is-nav-open) .rf-nav>.rf-nav-item span{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;white-space:normal;text-overflow:clip;text-align:center;line-height:1.15;overflow-wrap:normal;word-break:normal}
}
/* Tablet widths use the same bottom bar as phones: no section headings, icon above the page name. */
@media(max-width:900px){
  #app.rf-shell:not(.is-nav-open) .rf-nav>.rf-nav-section-label{display:none!important}
  #app.rf-shell:not(.is-nav-open) .rf-nav>.rf-nav-item{flex-direction:column!important;justify-content:center!important;align-items:center!important;gap:3px!important;max-width:120px}
  #app.rf-shell:not(.is-nav-open) .rf-nav>.rf-nav-item span{display:-webkit-box!important}
  #app.rf-shell:not(.is-nav-open) .rf-nav{justify-content:space-around}
}