/* Workspace theme — loaded last. Takes the homepage's palette (deep-teal ink, warm paper, pastel accents, Plus Jakarta
   headings) into a calm, organised product UI: white cards on a quiet canvas, one hairline weight, one radius scale,
   teal as the single action colour, and pastels kept to small icon chips so data stays the loudest thing on the page. */
.rf-shell{
  --il-canvas:#fff;--il-paper:#fff;--il-ink:#193c3d;--il-text:#33494a;--il-muted:#5f6d6d;--il-faint:#8a9695;
  --il-line:#e6e2d9;--il-line-soft:#efece5;--il-teal:#1f5f5c;--il-teal-2:#2b7a74;--il-teal-soft:#e8f2ef;
  --il-butter-soft:#fdf3d8;--il-violet-soft:#efebfa;--il-peach-soft:#fdeee2;--il-pink-soft:#fbebf3;--il-mint-soft:#e5f3ed;
  --il-radius:14px;--il-radius-sm:10px;
  --il-shadow:0 1px 2px rgba(25,60,61,.04),0 1px 1px rgba(25,60,61,.02);
  --il-display:"Plus Jakarta Sans","Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  /* Every older layer reads these, so retuning them restyles shared components page-wide. */
  --th-canvas:var(--il-canvas);--th-ink:var(--il-ink);--th-text:var(--il-text);--th-muted:var(--il-muted);--th-faint:var(--il-faint);
  --th-line:var(--il-line);--th-soft:#f4f2ec;--th-lime:var(--il-teal);--th-lime-deep:#163f40;--th-lime-soft:var(--il-teal-soft);
  --th-indigo:var(--il-teal);--th-tint:var(--il-teal-soft);--th-orange:#f2a271;--th-yellow:#c5b8ec;
  --th-up:#23854b;--th-down:#cf4b36;
  --rf-bg:var(--il-canvas);--rf-ink:var(--il-ink);--rf-text:var(--il-text);--rf-muted:var(--il-muted);--rf-faint:var(--il-faint);
  --rf-line:var(--il-line);--rf-line-2:var(--il-line-soft);--rf-soft:#f4f2ec;--rf-indigo:var(--il-teal);--rf-tint:var(--il-teal-soft);
  --rf-green:#23854b;--rf-green-ink:#1d7240;--rf-green-soft:#e3f3e8;--rf-red:#cf4b36;--rf-red-ink:#b23c2a;--rf-red-soft:#fcebe6;
  --rf-display:var(--il-display);
  color:var(--il-ink);
}
/* The page itself is white too (not transparent), and the workspace opts out of browser-forced dark themes. */
html:has(#app.rf-shell:not([hidden])),body:has(#app.rf-shell:not([hidden])){background:#fff;color-scheme:only light}
.rf-shell,.rf-shell .rf-main,.rf-shell #app-content{background:var(--il-canvas)}
.rf-shell ::selection{background:#d6ebe5;color:var(--il-ink)}

/* Sidebar: white strip, small-caps section labels, a teal-tinted current page with a straight marker. */
.rf-shell .rf-side{background:#fff;border-right:1px solid var(--il-line)}
.rf-shell .rf-brand img{width:150px;height:auto}
.rf-shell .rf-nav-section-label{display:block;margin:18px 12px 6px;color:var(--il-faint);font-size:10.5px;font-weight:600;letter-spacing:.09em;text-transform:uppercase}
.rf-shell .rf-nav-item{height:38px;padding:0 12px;border-radius:var(--il-radius-sm);color:var(--il-text);font-size:14px;font-weight:500}
.rf-shell .rf-nav-item .ic{width:18px;height:18px;color:#62797a}
.rf-shell .rf-nav-item:hover{background:#f4f2ec;color:var(--il-ink)}
.rf-shell .rf-nav-item.is-active{background:var(--il-teal);color:#fff;font-weight:600;box-shadow:none}
.rf-shell .rf-nav-item.is-active .ic{color:#fff}
.rf-shell .rf-nav-item.is-active::before{display:none}

/* Upgrade card: a quiet panel, not an advert. */
.rf-shell .rf-promo{padding:16px;border:1px solid var(--il-line);border-radius:var(--il-radius);background:#fff;box-shadow:none;color:var(--il-ink)}
.rf-shell .rf-promo>.ic{display:block;width:32px;height:32px;padding:7px;border-radius:9px;background:var(--il-teal);color:#fff}
.rf-shell .rf-promo p{margin:12px 0 14px;color:var(--il-ink);font-family:var(--il-display);font-size:14.5px;font-weight:650;line-height:1.3;letter-spacing:-.015em}
.rf-shell .rf-promo .rf-btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;height:38px;border-color:var(--il-ink);border-radius:var(--il-radius-sm);background:var(--il-ink);color:#fff;font-size:13.5px}
.rf-shell .rf-promo .rf-btn span{height:auto;padding:0;border:0;background:none;color:inherit}
.rf-shell .rf-promo .rf-btn:hover{background:#163536}

/* Top bar: white, with a single hairline below. */
.rf-shell .rf-header{background:#fff;border-bottom:1px solid var(--il-line)}
.rf-shell .rf-header .rf-search,.rf-shell .rf-header .rf-select,.rf-shell .rf-bell,.rf-shell .rf-account{border-color:var(--il-line);border-radius:var(--il-radius-sm);background:#fff}
.rf-shell .rf-header .rf-search{background:#fff}
.rf-shell .rf-header .rf-search:focus-within,.rf-shell .rf-header .rf-select:focus-within{border-color:var(--il-teal-2);box-shadow:0 0 0 3px rgba(31,95,92,.1)}
.rf-shell .rf-site-picker::before{color:var(--il-faint);font-size:10.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase}
.rf-shell .rf-menu{border:1px solid var(--il-line);border-radius:var(--il-radius);box-shadow:0 12px 32px -12px rgba(25,60,61,.22)}
.rf-shell .rf-content,.rf-shell #app-content.rf-content{padding-top:24px}

/* Page heading */
.rf-shell .rf-page-title h1,.rf-shell .page-heading h2{color:var(--il-ink);font-family:var(--il-display);font-size:clamp(24px,1.9vw,28px);font-weight:700;letter-spacing:-.03em;line-height:1.15}
.rf-shell .rf-page-title p,.rf-shell .page-heading p{margin-top:4px;color:var(--il-muted);font-size:13.5px}

/* Cards: one surface for everything. */
.rf-shell .rf-card,.rf-shell .panel{border:1px solid var(--il-line);border-radius:var(--il-radius);background:var(--il-paper);box-shadow:var(--il-shadow)}
.rf-shell .rf-card-heading h2,.rf-shell .rf-card-head h2,.rf-shell .panel-header h2{color:var(--il-ink);font-family:var(--il-display);font-size:16px;font-weight:650;letter-spacing:-.015em}
.rf-shell .rf-card-heading p,.rf-shell .rf-card-sub{color:var(--il-faint)}
.rf-shell .panel-header{border-bottom:1px solid var(--il-line-soft)}
.rf-shell .rf-subhead,.rf-shell .ov-live-top-label{color:var(--il-faint);font-size:10.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase}

/* Metric tiles: white like every card; colour lives only in the icon chip, rotating through the brand pastels. */
.rf-shell .rf-metric,.rf-shell .metric{border:1px solid var(--il-line);border-radius:var(--il-radius);background:#fff;box-shadow:var(--il-shadow);transition:border-color .15s}
.rf-shell .rf-metric:hover,.rf-shell .metric:hover{border-color:#d6d1c4}
.rf-shell .rf-metric-label,.rf-shell .metric-label{color:var(--il-muted);font-size:13px;font-weight:500}
.rf-shell .rf-metric-value,.rf-shell .metric strong{color:var(--il-ink);font-family:var(--il-display);font-weight:700;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.rf-shell .rf-metric-foot small,.rf-shell .metric-change+small{color:var(--il-faint)}
.rf-shell .metric .metric-icon,.rf-shell .rf-metric .rf-metric-icon{border-radius:var(--il-radius-sm);background:#1f5f5c;color:#fff;box-shadow:none}
.rf-shell .metric-change{border-radius:6px}

/* Buttons */
.rf-shell .rf-btn,.rf-shell .outline-button{border-color:var(--il-line);border-radius:var(--il-radius-sm);background:#fff;color:var(--il-ink)}
.rf-shell .rf-btn:hover,.rf-shell .outline-button:hover{border-color:#cfc9bb;background:#fbfaf6}
.rf-shell .rf-btn.dark,.rf-shell .primary-button{border-color:var(--il-ink);border-radius:var(--il-radius-sm);background:var(--il-ink);color:#fff}
.rf-shell .rf-btn.dark:hover,.rf-shell .primary-button:hover{border-color:#163536;background:#163536}
.rf-shell .text-button,.rf-shell .rf-link{color:var(--il-teal);font-weight:600}
.rf-shell .rf-link{text-decoration-color:#bcd9d2}
.rf-shell .rf-link:hover{color:var(--il-ink);text-decoration-color:var(--il-ink)}
.rf-shell :is(.rf-btn,.rf-nav-item,.rf-select,.rf-tab,a,button):focus-visible{outline:2px solid var(--il-teal-2);outline-offset:2px}
.rf-shell .rf-content .rf-select,.rf-shell .rf-filter,.rf-shell .rf-content .rf-search,.rf-shell .rf-input{border-color:var(--il-line);border-radius:var(--il-radius-sm);background:#fff}

/* Tabs and chips */
.rf-shell .rf-tabs{border-bottom-color:var(--il-line)}
.rf-shell .rf-tabs .rf-tab.is-current{border-color:var(--il-teal);color:var(--il-ink);font-weight:600}
.rf-shell .rf-pill{border-radius:6px}

/* Tables: small-caps headings, quiet row rules, a faint hover. */
.rf-shell :is(.rf-table,.rf-live-table,.data-table) th{color:var(--il-faint);font-size:10.5px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;border-bottom-color:var(--il-line)}
.rf-shell :is(.rf-table,.rf-live-table,.data-table) td{border-bottom-color:var(--il-line-soft);font-variant-numeric:tabular-nums}
.rf-shell :is(.rf-table,.rf-live-table,.data-table) tbody tr:hover td{background:#faf9f5}

/* Banners and notices */
.rf-shell .rf-banner,.rf-shell .dashboard-banner{border:1px solid var(--il-line);border-radius:var(--il-radius);background:#fff;background-image:none;box-shadow:none}
.rf-shell .rf-banner-copy strong{font-family:var(--il-display);letter-spacing:-.015em}
.rf-shell .rf-notice{border-color:var(--il-line);border-radius:var(--il-radius)}
.rf-shell .rf-empty .rf-empty-icon,.rf-shell .rf-empty>.ic{border-radius:12px;background:#1f5f5c;color:#fff}
.rf-shell .rf-verify-banner{border-color:#f0dfae;background:var(--il-butter-soft)}

/* Quick actions */
.rf-shell .quick-action,.rf-shell .ov-action{border:1px solid var(--il-line);border-radius:12px;background:#fff;transition:border-color .15s,background .15s}
.rf-shell .quick-action:hover,.rf-shell .ov-action:hover{border-color:#bcd9d2;background:#fbfdfc;transform:none;box-shadow:none}
.rf-shell .ov-action-icon,.rf-shell .quick-action .icon-svg:first-child{border-radius:var(--il-radius-sm);background:#1f5f5c;color:#fff}

/* Charts: brand series, faint grid, matching legend dots. */
.rf-shell .chart-grid{border-bottom-color:var(--il-line);background:repeating-linear-gradient(to bottom,transparent 0,transparent 34px,var(--il-line-soft) 35px)}
.rf-shell .chart-grid .organic{stroke:var(--il-teal-2);stroke-width:2.25;stroke-linecap:round;stroke-linejoin:round}
.rf-shell .chart-grid .paid{stroke:#a493dc;stroke-width:1.75;stroke-dasharray:4 4;stroke-linecap:round}
.rf-shell .chart-labels{color:var(--il-faint)}
.rf-shell .competitor-bar{background:var(--il-line-soft)}
.rf-shell .competitor-bar em{background:#c9d6d3}
.rf-shell .competitor-list article:first-child .competitor-bar em{background:var(--il-teal-2)}
.rf-shell .competitor-mark{border-radius:6px;background:#1f5f5c;color:#fff}
.rf-shell .metric-spark polyline,.rf-shell .metric-spark path{stroke:var(--il-teal-2)}
.rf-shell .rf-chart-tip{border:1px solid var(--il-line);border-radius:12px;box-shadow:0 12px 30px -12px rgba(25,60,61,.25)}

/* Avatars, meters and progress in the brand family */
.rf-shell .rf-avatar.av-0{background:var(--il-ink)}
.rf-shell .rf-avatar.av-1{background:var(--il-teal-2)}
.rf-shell .rf-avatar.av-2{background:#7d68c8}
.rf-shell .rf-avatar.av-3{background:#23854b}
.rf-shell .rf-avatar.av-4{background:#c97a55}
.rf-shell .rf-avatar.av-5{background:#5f7f86}
.rf-progress{border-color:#d3e7e1;background:#f4f9f7}
.rf-progress-head strong{color:#1f5f5c}
.rf-progress-track{background:#e3efeb}
.rf-progress-track span{background:#2b7a74}
body:has(#app.rf-shell:not([hidden])):has(.rf-skeleton,.trk-updating,[aria-busy="true"])::before{background:#2b7a74;background-size:auto;animation:none}
.rf-skeleton .sk-card{border-color:var(--il-line);border-radius:14px}
.rf-skeleton .sk-line,.rf-skeleton .sk-chart{background:#f1efea;background-size:auto;animation:sk-pulse 1.4s ease-in-out infinite}
@keyframes sk-pulse{50%{opacity:.55}}

/* Sign-in screens share the workspace ink. */
.auth-shell .auth-submit,.auth-shell .rf-btn.dark{border-color:#193c3d;background:#193c3d}

@media(max-width:900px){
  .rf-shell .rf-side{background:#fff;border-top-color:var(--il-line)}
  .rf-shell .rf-nav-section-label{display:none}
  .rf-shell .rf-nav-item{height:52px}
  .rf-shell .rf-content,.rf-shell #app-content.rf-content{padding-top:14px}
}

/* Pure white and solid colour only: flatten the decorative gradients older layers still paint. Hard-stop gradients that
   draw data (stacked bars, donuts, meters) already render as solid blocks and are left alone. */
.rf-shell,.rf-shell .rf-side,.rf-shell .rf-header,.rf-shell .rf-main,.rf-shell #app-content,.auth-shell{background:#fff;background-image:none}
.rf-shell .rf-promo::before,.rf-shell .app-main::before,.rf-shell .workspace-card::before{display:none}
.rf-shell .rf-progress-track span,.rf-shell .pg-ai .ai-meter i,.rf-shell .al-live .al-bar i,.rf-shell .pg-overview .ov-ai-progress-track span,.rf-shell .pg-overview .ov-indeterminate::after{background:#2b7a74}
.rf-shell .pg-tracker .trk-sov-bar>span,.rf-shell .keyword-bars i{background:#7d68c8}
.rf-shell .pg-content .cnt-ai{background:#e8f2ef}
.rf-shell .pg-reports .rp-thumbs{border-color:var(--il-line);background:#f4f2ec}
.rf-shell .do-page .do-skeleton{background:#f1efea}
.rf-shell .account-avatar,.rf-shell .profile-avatar{background:#193c3d;color:#fff}
.rf-shell :is(.sa-page>section.panel,.sa-grid-top .sa-system-body article,.sa-hero,.rf-visual-gallery,.sa-ads-slot){border-color:var(--il-line)!important;background:#fff}
.token-dialog-header,.sa-drawer-head{background:#fff}
/* visual-refresh.css scopes its workspace canvas to #app, so match that weight to keep the page pure white. */
#app.rf-shell{--th-canvas:#fff;--th-muted:var(--il-muted);--rf-muted:var(--il-muted)}
#app.rf-shell .rf-main,#app.rf-shell #app-content,#app.rf-shell .rf-site-picker{background:#fff}
#app.rf-shell .rf-header{border-bottom-color:var(--il-line)}
#app.rf-shell .rf-side{border-right-color:var(--il-line)}
#app.rf-shell .rf-nav-section-label{color:var(--il-faint)}

/* Organisation pass: a denser, calmer sidebar that fits a laptop screen, aligned tile sparklines, and the older
   sample charts drawn in the brand palette. */
#app.rf-shell .rf-nav{margin-top:20px;gap:2px}
#app.rf-shell .rf-nav-item{height:36px;font-size:13.5px}
#app.rf-shell .rf-nav-section-label{margin:14px 12px 4px;font-size:10px}
#app.rf-shell .rf-nav-section-label:first-child{margin-top:0}
.rf-shell .rf-promo{display:grid;grid-template-columns:32px minmax(0,1fr);align-items:center;gap:10px 12px;padding:14px}
.rf-shell .rf-promo p{margin:0;font-size:13px;line-height:1.3}
.rf-shell .rf-promo .rf-btn{grid-column:1/-1}
@media(min-width:901px) and (max-height:820px){.rf-shell .rf-promo{display:none}}
.rf-shell .rf-bell{position:relative}
.rf-shell .rf-bell::after{background:#e0603f}
/* Five tiles across leave no room under the caption, so the sparkline sits beside the number instead. */
.rf-shell .metric .metric-spark{top:66px;bottom:auto;right:20px;width:72px}
.rf-shell .rank-green,.rf-shell .metric .metric-spark polyline{stroke:#2b7a74}
.rf-shell .rank-purple{stroke:#8b74d6}
.rf-shell .rank-grey{stroke:#c3cbc9}
.rf-shell .bar-chart{border-bottom-color:var(--il-line)}
.rf-shell .bar-chart i{border-radius:5px 5px 0 0;background:linear-gradient(to top,#1f5f5c 0 42%,#5fa59c 42% 68%,#cfe5e0 68%)}
.rf-shell .keyword-bars i{background:#2b7a74}
.rf-shell .keyword-bars>div{border-bottom-color:var(--il-line)}
.rf-shell .competitor-bar em{background:#cdd6d4}
.rf-shell .competitor-list article:first-child .competitor-bar em{background:#2b7a74}
.rf-shell .chart-key span::before{background:#2b7a74}
.rf-shell .chart-key span+span::before{background:#c3cbc9}
.rf-shell .page-heading .outline-button,.rf-shell .rf-page-actions .rf-btn{white-space:nowrap}
@media(max-width:900px){.rf-shell .rf-promo{display:none}}
/* Phones: stat tiles pair up two-by-two, so the first screen shows all four numbers. */
@media(max-width:600px){
  .rf-shell :is(.metrics,.rf-metrics,.audit-metrics){display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .rf-shell :is(.metric,.rf-metric){min-height:0;padding:14px}
  .rf-shell .metric .metric-spark,.rf-shell .rf-metric .rf-spark{display:none}
  .rf-shell .metric strong,.rf-shell .rf-metric-value{font-size:24px}
  .rf-shell .metric .metric-icon{width:32px;height:32px}
  .rf-shell .metric small{display:block;margin-top:4px}
}
/* Older sample panels are grid items with min-width:auto, so a wide row inside one stretched the page past a phone screen. */
.rf-shell #app-content :is(.panel,.dashboard-grid>*,.content-grid>*){min-width:0}
.rf-shell .chart-key span:nth-child(2):not(:last-child)::before{background:#8b74d6}

/* ---- Structure pass ------------------------------------------------------------------------------------------------
   Six text sizes (11 / 12 / 13 / 15 / 18 / 28), spacing on an 8px grid, numbers right-aligned in tabular figures, one
   page-header pattern, and a content column that stops growing on very wide monitors. */
.rf-shell #app-content{width:100%;max-width:1440px;margin-inline:auto}
.rf-shell #app-content.rf-content{padding:24px 32px 48px}

/* Page header: title and subtitle on the left, controls on the right, bottom-aligned with the subtitle. */
.rf-shell :is(.rf-page-head,.page-heading){display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:24px}
.rf-shell .rf-page-title h1,.rf-shell .page-heading h2{font-size:28px;line-height:1.15}
.rf-shell .rf-page-title p,.rf-shell .page-heading p{margin:6px 0 0;font-size:13px}
.rf-shell :is(.rf-page-actions,.page-heading>div:last-child:not(:first-child)){display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.rf-shell :is(.rf-page-actions,.page-heading) :is(.rf-btn,.outline-button,.primary-button){height:36px;font-size:13px}

/* Cards: 20px insets, 16px between cards. */
.rf-shell :is(.rf-metrics,.metrics,.audit-metrics,.ov-kpis,.dashboard-grid,.ov-row){gap:16px}
.rf-shell :is(.rf-metrics,.metrics,.audit-metrics,.dashboard-grid){margin-bottom:16px}
.rf-shell .rf-card-head,.rf-shell .panel-header{padding:16px 20px}
.rf-shell .rf-card-heading h2,.rf-shell .rf-card-head h2,.rf-shell .panel-header h2{font-size:15px;line-height:1.3}
.rf-shell .rf-card-heading p,.rf-shell .rf-card-sub,.rf-shell .panel-header p{font-size:12px}
.rf-shell .rf-metric,.rf-shell .metric{padding:20px}
.rf-shell .rf-metric-label,.rf-shell .metric-label{font-size:13px}
.rf-shell .rf-metric-value,.rf-shell .metric strong{font-size:28px;line-height:1.1}
.rf-shell :is(.rf-metric-foot small,.metric small,.metric-change){font-size:12px}
.rf-shell .metric .metric-icon,.rf-shell .rf-metric .rf-metric-icon{width:36px;height:36px}

/* Tables: 13px rows, 11px headings, numbers right-aligned and in tabular figures (columns are tagged by hydrate()). */
.rf-shell :is(.rf-table,.rf-live-table,.data-table) td{font-size:13px}
.rf-shell :is(.rf-table,.rf-live-table,.data-table) th{font-size:11px}
.rf-shell :is(.rf-table,.rf-live-table,.data-table) :is(th,td):first-child{padding-left:20px}
.rf-shell :is(.rf-table,.rf-live-table,.data-table) :is(th,td):last-child{padding-right:20px}
.rf-shell :is(th,td).is-num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.rf-shell th.is-num{justify-content:flex-end}

/* Small text never drops below 11px. */
.rf-shell #app-content :is(.chart-labels,.chart-key,.rf-legend,.rf-pill,.status,.badge){font-size:11px}

/* Sample charts drawn by the chart engine sit inside the card like live charts. */
.rf-shell .demo-chart{padding:8px 16px 16px 8px}
.rf-shell .demo-chart .rf-modern-chart{width:100%}

@media(max-width:900px){
  .rf-shell #app-content.rf-content{padding:16px 16px 96px}
  .rf-shell .rf-page-title h1,.rf-shell .page-heading h2{font-size:24px}
}

/* Sidebar plan card: plan name, websites used against the allowance, one action. */
.rf-shell .rf-promo:has(.rf-planmeter){display:block;padding:16px}
.rf-shell .rf-planmeter{display:grid;gap:8px}
.rf-shell .rf-planmeter-head{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.rf-shell .rf-planmeter-head span,.rf-shell .rf-planmeter-row span{color:var(--il-faint);font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase}
.rf-shell .rf-planmeter-head strong{letter-spacing:-.015em;text-transform:none;color:var(--il-ink);font-family:var(--il-display);font-size:15px;font-weight:700;letter-spacing:-.015em}
.rf-shell .rf-planmeter-row{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin-top:4px}
.rf-shell .rf-planmeter-row b{color:var(--il-ink);font-size:13px;font-weight:600;font-variant-numeric:tabular-nums}
.rf-shell .rf-planmeter-bar{display:block;width:100%;height:6px;border:0;border-radius:999px;background:var(--il-line-soft);overflow:hidden;appearance:none}
.rf-shell .rf-planmeter-bar::-webkit-progress-bar{border-radius:999px;background:var(--il-line-soft)}
.rf-shell .rf-planmeter-bar::-webkit-progress-value{border-radius:999px;background:#2b7a74}
.rf-shell .rf-planmeter-bar::-moz-progress-bar{border-radius:999px;background:#2b7a74}
.rf-shell .rf-planmeter-bar.is-full::-webkit-progress-value{background:#c9733f}
.rf-shell .rf-planmeter-bar.is-full::-moz-progress-bar{background:#c9733f}
.rf-shell .rf-planmeter small{color:var(--il-muted);font-size:12px}
.rf-shell .rf-promo .rf-planmeter-action{margin-top:4px}
.rf-shell .rf-promo .rf-planmeter-action .ic{width:16px;height:16px;color:#fff}

/* Empty states: one design for the live and the sample screens — a solid icon tile, a 15px title, one line of help,
   centred actions. */
.rf-shell .rf-empty,.rf-shell .empty:has(strong){display:grid;justify-items:center;gap:8px;padding:48px 24px;color:var(--il-muted);text-align:center}
.rf-shell .rf-empty-icon{width:44px;height:44px;border-radius:12px;background:#1f5f5c;color:#fff}
.rf-shell .empty:has(strong)::before{content:"";width:44px;height:44px;margin-bottom:6px;border-radius:12px;background:#1f5f5c url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 8v4'/%3E%3Cpath d='M12 16h.01'/%3E%3C/svg%3E") center/22px no-repeat}
.rf-shell :is(.rf-empty,.empty) strong{color:var(--il-ink);font-family:var(--il-display);font-size:15px;font-weight:650;letter-spacing:-.01em}
.rf-shell :is(.rf-empty,.empty) p{max-width:44ch;margin:0;color:var(--il-muted);font-size:13px;line-height:1.55}
.rf-shell .empty:has(strong) :is(button,a.primary-button,a.outline-button){margin-top:8px}
.rf-shell .rf-empty.compact{padding:24px 16px}