/* MrKeyword workspace theme — loaded last. A solid white page, hairline-outlined white cards, large light numerals, a lime accent
   with yellow and orange secondaries, and a quiet sidebar. Everything here restyles shared rf-* components, so every page inherits it. */
.rf-shell{
  --th-canvas:#fff;--th-card:#fff;--th-ink:#0a0c15;--th-text:#2b3040;--th-muted:#737a8e;--th-faint:#a3a9ba;
  --th-line:#e8eaf1;--th-soft:#f6f6fb;
  --th-lime:#4338ca;--th-lime-deep:#3730a3;--th-lime-soft:#f0effe;--th-orange:#8fd9bf;--th-yellow:#b4aef5;--th-indigo:#4338ca;--th-tint:#f0effe;
  --th-up:#16a34a;--th-down:#d9553f;
  --rf-bg:var(--th-canvas);--rf-ink:var(--th-ink);--rf-text:var(--th-text);--rf-muted:var(--th-muted);--rf-faint:var(--th-faint);
  --rf-line:var(--th-line);--rf-line-2:var(--th-line);--rf-soft:var(--th-soft);
  --rf-green:var(--th-up);--rf-green-ink:var(--th-up);--rf-green-soft:#e6f6ec;
  --rf-red:var(--th-down);--rf-red-ink:var(--th-down);--rf-red-soft:#fbebe7;
  --rf-indigo:#4338ca;--rf-tint:#f0effe;
  --rf-shadow:none;
  background:var(--th-canvas);color:var(--th-ink);
}

/* Sidebar: same canvas as the page, no divider; the active item is a white pill with an ink marker. */
.rf-shell .rf-side{padding:26px 16px 20px 20px;border-right:1px solid var(--th-line);background:#fff}
.rf-shell .rf-nav{gap:4px;margin-top:30px}
.rf-shell .rf-nav-section-label{display:none}
.rf-shell .rf-nav-item{position:relative;height:46px;padding:0 14px;border:0;border-radius:13px;color:var(--th-text);font-size:15px;font-weight:500;letter-spacing:-.005em}
.rf-shell .rf-nav-item .ic{width:20px;height:20px;color:var(--th-ink);stroke-width:1.6}
.rf-shell .rf-nav-item:hover{background:var(--th-soft);transform:none}
.rf-shell .rf-nav-item.is-active{background:var(--th-tint);color:var(--th-indigo);font-weight:600;box-shadow:none}
.rf-shell .rf-nav-item.is-active .ic{color:var(--th-indigo)}
.rf-shell .rf-nav-item.is-active::before{content:"";position:absolute;left:0;top:13px;bottom:13px;width:3px;border-radius:3px;background:var(--th-indigo)}
.rf-shell .rf-promo{min-height:0;margin:auto 0 0;padding:18px;border:1px solid var(--th-line);border-radius:16px;background:#fff;color:var(--th-ink)}
.rf-shell .rf-promo>.ic{display:grid;width:30px;height:30px;padding:6px;border-radius:50%;background:var(--th-ink);color:#fff}
.rf-shell .rf-promo p{margin:14px 0 14px;color:var(--th-ink);font-family:var(--rf-display);font-size:17px;font-weight:600;line-height:1.25;letter-spacing:-.01em}
.rf-shell .rf-promo .rf-btn{width:100%;height:40px;border-color:var(--th-ink);background:var(--th-ink);color:#fff;box-shadow:none}
.rf-shell .rf-promo .rf-btn:hover{background:#1f2330}

.rf-shell .rf-main{background:transparent}
html:has(#app.rf-shell:not([hidden])),body:has(#app.rf-shell:not([hidden])){background:#fff}
.rf-shell,.rf-shell .rf-side,.rf-shell .rf-main,.rf-shell .rf-header,.rf-shell #app-content{background:#fff;background-image:none}
.rf-shell .rf-promo::before{display:none}

/* Top bar: floats on the canvas; controls are white tiles. */
.rf-shell .rf-header{height:76px;padding:0 28px 0 24px;border-bottom:0;background:var(--th-canvas);box-shadow:none}
.rf-shell .rf-header .rf-search,.rf-shell .rf-header .rf-select,.rf-shell .rf-bell,.rf-shell .rf-account{border:1px solid var(--th-line);border-radius:12px;background:#fff;box-shadow:none}
.rf-shell .rf-header .rf-search,.rf-shell .rf-header .rf-select{height:44px}
.rf-shell .rf-bell{width:44px;height:44px}
.rf-shell .rf-account{height:44px;padding:0 12px 0 6px}
.rf-shell .rf-vr{display:none}
.rf-shell .rf-content,.rf-shell #app-content.rf-content{max-width:1560px;padding:6px 28px 40px 24px}

/* Page heading: confident, not shouting. */
.rf-shell .rf-page-head{margin-bottom:18px}
.rf-shell .rf-page-title h1{font-size:30px;font-weight:600;letter-spacing:-.025em;line-height:1.15}
.rf-shell .rf-page-title p{margin-top:4px;color:var(--th-muted);font-size:13.5px}

/* Cards */
.rf-shell .rf-card{border:1px solid var(--th-line);border-radius:18px;background:var(--th-card);box-shadow:none}
.rf-shell .rf-card-head{padding:20px 22px 10px}
.rf-shell .rf-card-heading h2{color:var(--th-ink);font-family:var(--rf-display);font-size:17px;font-weight:550;letter-spacing:-.012em}
.rf-shell .rf-card-heading p{margin-top:2px;color:var(--th-faint);font-size:12px}
.rf-shell .rf-subhead{color:var(--th-muted);font-size:11.5px;font-weight:550;letter-spacing:.02em}

/* Metric tiles: label, a large light numeral, then a plain coloured trend line — no tinted icon boxes or pills. */
.rf-shell .rf-metrics{gap:12px;margin-bottom:12px}
.rf-shell .rf-metric{display:flex;flex-direction:column;gap:8px;min-height:0;padding:20px 22px;border-radius:18px}
.rf-shell .rf-metric-icon{display:none}
.rf-shell .rf-metric-label{color:var(--th-muted);font-size:12.5px}
.rf-shell .rf-metric-value{color:var(--th-ink);font-family:var(--rf-display);font-size:32px;font-weight:550;letter-spacing:-.03em;line-height:1.05}
.rf-shell .rf-metric-foot{gap:6px;min-height:0;padding-right:0}
.rf-shell .rf-metric-foot small{color:var(--th-faint);font-size:12px}
.rf-shell .rf-change{height:auto;padding:0;border-radius:0;background:transparent;color:var(--th-up);font-size:12.5px;font-weight:600}
.rf-shell .rf-change.red{background:transparent;color:var(--th-down)}
.rf-shell .rf-change.gray{background:transparent}
.rf-shell .rf-metric .rf-spark{opacity:.9}

/* Buttons and small controls */
.rf-shell .rf-btn{height:40px;border:1px solid var(--th-line);border-radius:11px;background:#fff;color:var(--th-ink);font-weight:550;box-shadow:none}
.rf-shell .rf-btn:hover{border-color:#d8dbe6;background:#fafafd;transform:none}
.rf-shell .rf-btn.sm{height:34px;border-radius:9px}
.rf-shell .rf-btn.dark{border-color:var(--th-ink);background:var(--th-ink);color:#fff}
.rf-shell .rf-btn.dark:hover{border-color:#1f2330;background:#1f2330}
.rf-shell .rf-btn.link{border-color:transparent;background:transparent}
.rf-shell .rf-content .rf-select{border:1px solid var(--th-line);border-radius:10px;background:#fff;box-shadow:none}
.rf-shell .rf-content .rf-select.sm{height:34px}
.rf-shell .rf-filter,.rf-shell .rf-content .rf-search{border:1px solid var(--th-line);border-radius:10px;background:var(--th-soft)}
.rf-shell .rf-link{color:var(--th-ink);text-decoration-color:#cdd1de}
.rf-shell .rf-link:hover{color:var(--th-lime-deep)}
.rf-shell :is(.rf-btn,.rf-nav-item,.rf-select,.rf-tab):focus-visible{outline:2px solid var(--th-ink);outline-offset:2px}

/* Tables */
.rf-shell .rf-live-table th,.rf-shell .rf-table th{border-bottom:1px solid var(--th-line);background:transparent;color:var(--th-faint);font-size:11.5px;font-weight:500;letter-spacing:0;text-transform:none}
.rf-shell .rf-live-table td,.rf-shell .rf-table td{border-bottom:1px solid #f2f2f8;color:var(--th-text)}
.rf-shell .rf-live-table tbody tr:last-child td{border-bottom:0}
.rf-shell .rf-pager{color:var(--th-muted)}
.rf-shell .rf-source-note,.rf-shell .rf-sourcenote{color:var(--th-faint)}

/* Notices, tabs, legend, deltas */
.rf-shell .rf-notice{border:1px solid var(--th-line);border-radius:16px;background:#fff}
.rf-shell .rf-tabs{border-bottom-color:var(--th-line)}
.rf-shell .rf-tabs .rf-tab.is-current{border-color:var(--th-ink);color:var(--th-ink)}
.rf-shell .rf-delta{font-weight:600}
.rf-shell .rf-legend{color:var(--th-muted)}
.rf-shell .rf-empty .rf-empty-icon,.rf-shell .rf-empty>.ic{background:var(--th-soft);color:var(--th-ink)}

/* Charts: hairline grid, soft tooltip */
.rf-shell .rf-chart-tip{border:0;border-radius:12px;box-shadow:0 10px 30px rgba(20,22,28,.14)}
.rf-shell .u-cursor-x{border-right:1px dashed #c5c9d8}

/* Hatched fill used by bars and progress tracks (the texture in the accent colour). */
.rf-shell .th-hatch{background-image:repeating-linear-gradient(135deg,rgba(255,255,255,.28) 0 2px,transparent 2px 6px)}

@media(max-width:900px){
  .rf-shell .rf-side{padding:14px 12px}
  .rf-shell .rf-header{padding:0 14px}
  .rf-shell .rf-content,.rf-shell #app-content.rf-content{padding:6px 14px 30px}
  .rf-shell .rf-page-title h1{font-size:25px}
}

/* Top bar: one consistent control size; the website switcher says what it is. */
.rf-shell .rf-header{height:68px}
.rf-shell .rf-header .rf-select,.rf-shell .rf-header .rf-search,.rf-shell .rf-bell,.rf-shell .rf-account{height:42px;border-radius:12px}
.rf-shell .rf-bell{width:42px}
.rf-shell .rf-site-picker{min-width:280px;padding-left:12px}
.rf-shell .rf-site-picker::before{content:"Website";order:-1;margin-right:2px;padding-right:10px;border-right:1px solid var(--th-line);color:var(--th-faint);font-size:11.5px;font-weight:500;white-space:nowrap}
.rf-shell .rf-site-picker>.ic:first-of-type{display:none}
.rf-shell .rf-account .rf-avatar{width:30px;height:30px;border-radius:9px;font-size:11.5px}
.rf-shell .rf-account-copy strong{font-size:13px}
.rf-shell .rf-account-copy small{font-size:11.5px}
/* Icons: one stroke weight everywhere */
.rf-shell .ic{stroke-width:1.7}
.rf-shell .rf-btn .ic{width:16px;height:16px}

/* Phones and small tablets: the sidebar becomes a bottom tab bar (thumb reach, and the page gets the full width). */
@media(max-width:900px){
  /* The sidebar leaves the grid here, so the page must be a single full-width column. */
  #app.rf-shell{grid-template-columns:minmax(0,1fr)}
  .rf-shell .rf-side{position:fixed;top:auto;right:0;bottom:0;left:0;z-index:50;display:block;height:auto;padding:6px 8px calc(6px + env(safe-area-inset-bottom));border:0;border-top:1px solid var(--th-line);background:#fff}
  .rf-shell .rf-brand,.rf-shell .rf-promo{display:none}
  .rf-shell .rf-nav{display:flex;gap:2px;margin:0;overflow-x:auto;scrollbar-width:none}
  .rf-shell .rf-nav::-webkit-scrollbar{display:none}
  .rf-shell .rf-nav-item{flex:1 0 auto;flex-direction:column;justify-content:center;gap:3px;width:auto;min-width:68px;height:52px;padding:0 8px;border-radius:12px;font-size:10.5px;font-weight:550;letter-spacing:0}
  .rf-shell .rf-nav-item .ic{width:20px;height:20px}
  .rf-shell .rf-nav-item.is-active::before{display:none}
  .rf-shell .rf-header{position:sticky;top:0;height:60px;padding:0 14px;border-bottom:1px solid var(--th-line)}
  .rf-shell .rf-site-picker{min-width:0;flex:1}
  .rf-shell .rf-site-picker::before{display:none}
  .rf-shell .rf-account-copy,.rf-shell .rf-account>.ic,.rf-shell .rf-header .rf-search{display:none}
  .rf-shell .rf-account{padding:0 6px}
  .rf-shell .rf-content,.rf-shell #app-content.rf-content{padding:14px 14px 96px}
  .rf-shell .rf-page-head{flex-wrap:wrap;gap:10px}
}

/* Loading skeleton: the outline of a page (hero + rail, three cards, a table) with a slow shimmer. */
.rf-sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
.rf-skeleton .sk-bento{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:16px;margin-bottom:16px}
.rf-skeleton .sk-main{display:grid;gap:16px;min-width:0}
.rf-skeleton .sk-three{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.rf-skeleton .sk-card{display:grid;align-content:start;gap:12px;padding:22px;border:1px solid var(--th-line);border-radius:18px;background:#fff}
.rf-skeleton .sk-hero{min-height:330px}
.rf-skeleton .sk-rail{gap:10px}
.rf-skeleton .sk-line,.rf-skeleton .sk-chart{display:block;height:12px;border-radius:6px;background:linear-gradient(90deg,#eeeef6 25%,#f8f8fb 45%,#eeeef6 65%);background-size:300% 100%;animation:sk-shimmer 1.6s ease-in-out infinite}
.rf-skeleton .sk-line.tall{height:34px;border-radius:9px}
.rf-skeleton .sk-line.thin{height:8px;margin-bottom:8px}
.rf-skeleton .sk-chart{height:210px;margin-top:8px;border-radius:12px}
.rf-skeleton .sk-table .sk-line{height:18px}
.rf-skeleton .w30{width:30%}.rf-skeleton .w45{width:45%}.rf-skeleton .w50{width:50%}.rf-skeleton .w60{width:60%}.rf-skeleton .w65{width:65%}.rf-skeleton .w80{width:80%}.rf-skeleton .w90{width:90%}.rf-skeleton .w100{width:100%}
@keyframes sk-shimmer{from{background-position:100% 0}to{background-position:-100% 0}}
@media(prefers-reduced-motion:reduce){.rf-skeleton .sk-line,.rf-skeleton .sk-chart{animation:none}}
@media(max-width:1280px){.rf-skeleton .sk-bento{grid-template-columns:minmax(0,1fr)}.rf-skeleton .sk-rail{display:none}}
@media(max-width:1000px){.rf-skeleton .sk-three{grid-template-columns:minmax(0,1fr)}}

/* Sign-in, sign-up and password screens: same white page, ink actions and hairline card as the workspace. */
.auth-shell{background:#fff;background-image:none}
.auth-shell .auth-card{border:1px solid #e8eaf1;border-radius:20px;box-shadow:0 20px 60px rgba(20,22,28,.06)}
#auth.auth-shell .auth-kicker{color:#737a8e;font-weight:550;letter-spacing:.01em}
.auth-shell h1,.auth-shell h2{color:#0a0c15;letter-spacing:-.025em}
.auth-shell .auth-lead{color:#737a8e}
.auth-shell .auth-link,.auth-shell .auth-switch a,.auth-shell .auth-switch button{color:#0a0c15;font-weight:600;text-decoration:underline;text-decoration-color:#cdd1de;text-underline-offset:3px}
.auth-shell .auth-link:hover,.auth-shell .auth-switch a:hover,.auth-shell .auth-switch button:hover{text-decoration-color:#0a0c15}
.auth-shell .auth-submit,.auth-shell .rf-btn.dark{border-color:#0a0c15;background:#0a0c15;color:#fff;border-radius:12px}
.auth-shell .auth-submit:hover,.auth-shell .rf-btn.dark:hover{border-color:#1f2330;background:#1f2330}
.auth-shell .auth-social button,.auth-shell .auth-social a{border:1px solid #e8eaf1;border-radius:12px;background:#fff}
.auth-shell .auth-social button:hover,.auth-shell .auth-social a:hover{border-color:#d8dbe6;background:#fafafd}
.auth-shell input:not([type=checkbox]){border:1px solid #e8eaf1;border-radius:12px}
.auth-shell input:not([type=checkbox]):focus{border-color:#0a0c15;box-shadow:0 0 0 3px rgba(21,23,28,.08);outline:0}
.auth-shell .auth-demo{border-color:#e8eaf1;border-radius:12px;color:#737a8e}

/* Loading feedback. A slim progress bar runs along the top whenever a page is loading or refreshing its data; skeleton
   lines shimmer in a staggered wave; spinners are a clean ring instead of a rotating icon. */
body:has(.rf-skeleton)::before,body:has(.trk-updating)::before,body:has([aria-busy="true"])::before{content:"";position:fixed;top:0;left:0;z-index:200;width:100%;height:3px;background:linear-gradient(90deg,transparent 0,#7b72ea 35%,#8fd9bf 65%,transparent 100%) no-repeat;background-size:45% 100%;animation:rf-progress 1.15s cubic-bezier(.4,0,.2,1) infinite;pointer-events:none}
@keyframes rf-progress{from{background-position:-60% 0}to{background-position:160% 0}}
.rf-skeleton .sk-card:nth-child(2) .sk-line,.rf-skeleton .sk-rail .sk-line:nth-child(n+3){animation-delay:.12s}
.rf-skeleton .sk-card:nth-child(3) .sk-line,.rf-skeleton .sk-rail .sk-line:nth-child(n+7),.rf-skeleton .sk-table .sk-line:nth-child(n+3){animation-delay:.24s}
.rf-skeleton .sk-card{animation:sk-rise .35s cubic-bezier(.2,.8,.2,1) both}
.rf-skeleton .sk-three .sk-card:nth-child(2),.rf-skeleton .sk-rail{animation-delay:.05s}
.rf-skeleton .sk-three .sk-card:nth-child(3),.rf-skeleton .sk-table{animation-delay:.1s}
@keyframes sk-rise{from{opacity:0;transform:translateY(6px)}}
/* Ring spinner for buttons and inline "Updating…" notes */
.rf-shell .ic.rf-spin,.auth-shell .ic.rf-spin{box-sizing:border-box;width:16px;height:16px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:rf-ring .7s linear infinite}
.rf-shell .ic.rf-spin>*,.auth-shell .ic.rf-spin>*{display:none}
@keyframes rf-ring{to{transform:rotate(360deg)}}
.rf-shell .rf-btn:has(.rf-spin){opacity:.85;cursor:progress}
/* Charts ease in once drawn, so a late chart doesn't pop */
.rf-modern-chart[data-chart-state="ready"] .uplot{animation:chart-in .45s ease-out both}
@keyframes chart-in{from{opacity:0;transform:translateY(4px)}}
@media(prefers-reduced-motion:reduce){body:has(.rf-skeleton)::before,body:has(.trk-updating)::before,body:has([aria-busy="true"])::before,.rf-skeleton .sk-card,.rf-modern-chart[data-chart-state="ready"] .uplot{animation:none}.rf-shell .ic.rf-spin,.auth-shell .ic.rf-spin{animation-duration:1.6s}}

/* Sidebar upgrade card: one solid lavender surface, a growth arrow on an ink tile, an ink button with a white arrow. */
.rf-shell .rf-promo{border:0;background:#ecebff;background-image:none;color:#0a0c15}
.rf-shell .rf-promo>.ic{display:block;width:34px;height:34px;padding:8px;border-radius:11px;background:#0a0c15;color:#fff;fill:none}
.rf-shell .rf-promo>.ic.rf-promo-mark{stroke:#fff}
.rf-shell .rf-promo p{color:#0a0c15}
.rf-shell .rf-promo .rf-btn,.rf-shell .rf-promo .rf-btn span{border-color:#0a0c15;background:#0a0c15;color:#fff}
.rf-shell .rf-promo .rf-btn .ic{color:#fff}
.rf-shell .rf-promo .rf-btn:hover{border-color:#1f2330;background:#1f2330}
/* Avatars use the brand family (indigo, violet, mint, green, ink, lavender) instead of the old warm tones. */
.rf-shell .rf-avatar.av-0{background:#4338ca}
.rf-shell .rf-avatar.av-1{background:#0a0c15}
.rf-shell .rf-avatar.av-2{background:#7b72ea}
.rf-shell .rf-avatar.av-3{background:#16a34a}
.rf-shell .rf-avatar.av-4{background:#3aa883}
.rf-shell .rf-avatar.av-5{background:#b4aef5;color:#292653}

/* Shared progress bar (ui.js progressBar): labelled, brand indigo, glides between ticks. */
.rf-progress{display:grid;gap:8px;padding:12px 14px;border:1px solid #e4e1fd;border-radius:12px;background:#f8f7ff;text-align:left}
.rf-progress-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;color:var(--rf-text);font-size:13px;font-weight:500}
.rf-progress-head strong{color:#4338ca;font-size:13px;font-variant-numeric:tabular-nums}
.rf-progress-track{height:8px;overflow:hidden;border-radius:999px;background:#e7e5fb}
.rf-progress-track span{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,#4338ca,#7b72ea);transition:width .3s ease-out}
.rf-progress.slim{padding:0;border:0;background:none}
@media(prefers-reduced-motion:reduce){.rf-progress-track span{transition:none}}

/* Sidebar: scrolls on its own when the menu is taller than the window (e.g. with Admin), and the upgrade card
   steps aside on short windows so the menu stays reachable. */
@media(min-width:901px){
  .rf-shell .rf-side{overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin}
  .rf-shell .rf-nav,.rf-shell .rf-promo,.rf-shell .rf-brand{flex-shrink:0}
  .rf-shell .rf-promo{margin-top:auto}
}
@media(min-width:901px) and (max-height:760px){.rf-shell .rf-promo{display:none}}