:root{
 --font-anthropic-sans:"Segoe UI",system-ui,-apple-system,Roboto,"Helvetica Neue",Arial,sans-serif;
 --font-anthropic-serif:"Segoe UI",system-ui,-apple-system,Roboto,Arial,sans-serif;
 --cds-font-size-caption:12px;--cds-font-size-body:14px;--cds-font-size-heading:15px;--cds-font-size-title:26px;--cds-font-weight-medium:600;
 --cds-gap-xs:4px;--cds-gap-sm:8px;--cds-gap-md:14px;--cds-gap-lg:20px;--cds-gap-xl:28px;
 --cds-pad-xs:4px;--cds-pad-sm:8px;--cds-pad-md:12px;--cds-pad-lg:18px;--cds-pad-xl:26px;--cds-radius:8px;
 --cds-dur-slow:600ms;--cds-ease-out:cubic-bezier(.2,.7,.2,1);
 --color-bg:#F4F8FB;--color-panel:#FFFFFF;--color-fg:#20364A;--color-fg-muted:#728799;--color-border-line:#DCE7EF;
 --color-ok:#1F7A4D;--color-bad:#B3261E;
 --cds-chart-grid:#E6EEF4;--cds-chart-reference:#8FA3B3;--cds-surface-popover:#FFFFFF;--cds-border:#DCE7EF;
 --cds-shadow-popover:0 6px 18px rgba(8,42,69,.16);--cds-text-secondary:#728799;
 --bar-bg:rgba(244,248,251,.86);
 color-scheme:light}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
 --color-bg:#0B1722;--color-panel:#12222F;--color-fg:#E3ECF3;--color-fg-muted:#93A7B8;--color-border-line:#223647;
 --color-ok:#6FD49E;--color-bad:#FF8A80;--cds-chart-grid:#1C3041;--cds-chart-reference:#6B8396;--cds-surface-popover:#172B3A;--cds-border:#2A4256;
 --cds-shadow-popover:0 6px 18px rgba(0,0,0,.45);--cds-text-secondary:#93A7B8;--bar-bg:rgba(11,23,34,.86);color-scheme:dark}}
:root[data-theme="dark"]{
 --color-bg:#0B1722;--color-panel:#12222F;--color-fg:#E3ECF3;--color-fg-muted:#93A7B8;--color-border-line:#223647;
 --color-ok:#6FD49E;--color-bad:#FF8A80;--cds-chart-grid:#1C3041;--cds-chart-reference:#6B8396;--cds-surface-popover:#172B3A;--cds-border:#2A4256;
 --cds-shadow-popover:0 6px 18px rgba(0,0,0,.45);--cds-text-secondary:#93A7B8;--bar-bg:rgba(11,23,34,.86);color-scheme:dark}
*{box-sizing:border-box}
html,body{margin:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{background:var(--color-bg);color:var(--color-fg);font-family:var(--font-anthropic-sans);font-size:14px;-webkit-font-smoothing:antialiased;padding-bottom:env(safe-area-inset-bottom,0px)}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:30;background:var(--bar-bg)}
[hidden]{display:none!important}
.app-bar{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:var(--bar-bg);backdrop-filter:saturate(1.4) blur(10px);-webkit-backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid var(--color-border-line)}
.app-bar-in{max-width:1320px;margin:0 auto;display:flex;align-items:center;gap:12px;padding-block:8px;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.brand{display:flex;align-items:center;gap:8px;font-weight:600;white-space:nowrap;color:var(--color-fg);text-decoration:none;flex:none}
.brand img{width:28px;height:28px;border-radius:7px}
.nav{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none;flex:1 1 auto;min-width:0;mask-image:linear-gradient(90deg,#000 88%,transparent)}
.nav::-webkit-scrollbar{display:none}
.nav a{font-size:13px;color:var(--color-fg-muted);text-decoration:none;padding:6px 10px;border-radius:999px;white-space:nowrap}
.nav a:hover,.nav a.on{color:var(--color-fg);background:var(--cds-chart-grid)}
.acts{display:flex;gap:6px;flex:none}
.ibtn{font:inherit;font-size:13px;display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 12px;border-radius:999px;border:1px solid var(--color-border-line);background:var(--color-panel);color:var(--color-fg);cursor:pointer}
.ibtn svg{width:16px;height:16px;flex:none}
.ibtn.primary{background:linear-gradient(180deg,#206998,#0F4166);border-color:transparent;color:#fff}
.ibtn:focus-visible,.nav a:focus-visible{outline:2px solid #2B7DB0;outline-offset:2px}
.offline{background:#FBF6EC;color:#5E4715;border-bottom:1px solid #EBDCBE;font-size:12.5px;text-align:center;padding:6px 16px}
#dash-root{max-width:1320px;margin:0 auto;padding-top:18px;padding-bottom:32px;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
#dash-root [id]{scroll-margin-top:72px}
.rm-foot{margin:4px 0 0;color:var(--color-fg-muted);font-size:12px;text-align:center}
.sheet-bg{position:fixed;inset:0;background:rgba(4,18,30,.45);z-index:40;display:flex;align-items:flex-end;justify-content:center}
.sheet{background:var(--color-panel);color:var(--color-fg);width:min(100%,440px);border-radius:16px 16px 0 0;padding:20px 20px calc(20px + env(safe-area-inset-bottom,0px));box-shadow:0 -8px 30px rgba(0,0,0,.25)}
@media (min-width:640px){.sheet-bg{align-items:center}.sheet{border-radius:16px}}
.sheet h3{margin:0 0 8px;font-size:17px}
.sheet ol{margin:0 0 14px;padding-left:20px;line-height:1.7;font-size:14px}
.no-data{max-width:560px;margin:60px auto;text-align:center;color:var(--color-fg-muted);line-height:1.6}
@media (max-width:640px){
 .brand span{display:none}
 .ibtn .lbl{display:none}
 .ibtn{padding:0 10px}
 .rm-hero{padding:18px!important}
 .rm-title{font-size:26px!important}
}

/* ---- dashboard ---- */

/* Layout: navy hero band with headline figures, then a 3-column card grid that collapses to one column on narrow screens. */
.rm { --rm-navy: #082A45; --rm-navy2: #1A5B87; --rm-b1: #0F4166; --rm-b2: #17557F; --rm-b3: #206998; --rm-b4: #2B7DB0; --rm-sub: #9CC0D8; --rm-ochre: #B5822C; --rm-warn-bg: #FBF6EC; --rm-warn-line: #EBDCBE; --rm-warn-fg: #5E4715;
  display: flex; flex-direction: column; gap: var(--cds-gap-lg); font-family: var(--font-anthropic-sans); color: var(--color-fg); }
.rm b { font-weight: 600; }

/* hero */
.rm-hero { position: relative; overflow: hidden; border-radius: 14px; padding: var(--cds-pad-xl) var(--cds-pad-xl) var(--cds-pad-lg); color: #fff;
  background: linear-gradient(135deg, var(--rm-navy) 0%, var(--rm-b1) 45%, var(--rm-navy2) 100%); box-shadow: 0 6px 22px rgba(8, 42, 69, .28); display: flex; flex-direction: column; gap: var(--cds-gap-md); }
.rm-hero::after { content: ""; position: absolute; right: -80px; top: -120px; width: 340px; height: 340px; border-radius: 50%; background: radial-gradient(circle, rgba(156, 192, 216, .22), rgba(156, 192, 216, 0) 70%); pointer-events: none; }
.rm-eyebrow { font-size: var(--cds-font-size-caption); letter-spacing: .12em; text-transform: uppercase; color: var(--rm-sub); margin: 0; }
.rm-title { font-family: var(--font-anthropic-serif); font-weight: 400; font-size: calc(var(--cds-font-size-title) * 1.35); line-height: 1.1; margin: 0; text-wrap: balance; color: #fff; }
.rm-accent { width: 80px; height: 4px; border-radius: 2px; background: linear-gradient(90deg, var(--rm-b1), var(--rm-sub)); }
.rm-period { margin: 0; font-size: var(--cds-font-size-caption); color: var(--rm-sub); }
.rm-take { margin: 0; max-width: 72ch; line-height: 1.55; color: rgba(255, 255, 255, .92); }
.rm-take b { color: #fff; }
.rm-pill { display: inline-block; padding: 0 .5em; border-radius: 999px; font-weight: 600; font-variant-numeric: tabular-nums; }
.rm-pill.down { background: rgba(255, 120, 120, .18); color: #FFC9C9; }
.rm-pill.up { background: rgba(120, 220, 170, .18); color: #BFF0D6; }
.rm-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr)); gap: var(--cds-gap-sm); position: relative; z-index: 1; }
.rm-kpi { background: rgba(255, 255, 255, .07); border: 1px solid rgba(156, 192, 216, .25); border-radius: 10px; padding: var(--cds-pad-sm) var(--cds-pad-md); display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.rm-kpi-l { font-size: var(--cds-font-size-caption); color: var(--rm-sub); }
.rm-kpi-v { font-family: var(--font-anthropic-serif); font-size: var(--cds-font-size-title); font-variant-numeric: tabular-nums; line-height: 1.15; color: #fff; min-height: 1.15em; }
.rm-kpi-s { font-size: var(--cds-font-size-caption); color: rgba(255, 255, 255, .7); font-variant-numeric: tabular-nums; }
.rm-spark { height: 28px; margin-top: 4px; }
.rm-spark svg { display: block; overflow: visible; }
.rm-hero .dash-skeleton { opacity: .5; }

/* grid + cards */
.rm-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--cds-gap-md); }
.rm-s2 { grid-column: span 2; }
.rm-s3 { grid-column: 1 / -1; }
@media (max-width: 960px) { .rm-grid { grid-template-columns: minmax(0, 1fr); } .rm-s2, .rm-s3 { grid-column: auto; } }
.rm-card { background: var(--color-panel); border: 1px solid var(--color-border-line); border-radius: 12px; padding: var(--cds-pad-lg); display: flex; flex-direction: column; gap: var(--cds-gap-sm); min-width: 0; }
.rm-card-top { display: flex; justify-content: space-between; align-items: baseline; gap: var(--cds-gap-sm); flex-wrap: wrap; }
.rm-h { margin: 0; font-size: var(--cds-font-size-heading); font-weight: var(--cds-font-weight-medium); }
.rm-tag { font-size: var(--cds-font-size-caption); color: var(--color-fg-muted); }
.rm-note { margin: 0; color: var(--color-fg-muted); font-size: var(--cds-font-size-caption); line-height: 1.45; }
.rm-chart { position: relative; min-height: 250px; }
.rm-chart svg { display: block; overflow: visible; }
.rm-cal { min-height: 150px; }
.rm-tip { position: absolute; pointer-events: none; background: var(--cds-surface-popover); border: 1px solid var(--cds-border); border-radius: var(--cds-radius); box-shadow: var(--cds-shadow-popover); padding: var(--cds-pad-xs) var(--cds-pad-sm); font-size: var(--cds-font-size-caption); white-space: nowrap; z-index: 3; font-variant-numeric: tabular-nums; color: var(--color-fg); }
.rm-tip-h { color: var(--cds-text-secondary); margin-bottom: 2px; }

/* donut */
.rm-donut { display: flex; flex-wrap: wrap; align-items: center; gap: var(--cds-gap-md); min-height: 210px; position: relative; }
.rm-donut-svg { flex: 0 0 auto; width: 180px; max-width: 100%; }
.rm-legend { flex: 1 1 10rem; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.rm-leg { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto; gap: 8px; align-items: center; font-size: var(--cds-font-size-caption); }
.rm-dot { width: 10px; height: 10px; border-radius: 50%; }
.rm-leg-n { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rm-leg-v { font-variant-numeric: tabular-nums; color: var(--color-fg-muted); }

/* ranking */
.rm-rank { display: flex; flex-direction: column; gap: 9px; min-height: 240px; }
.rm-rk { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; align-items: center; }
.rm-rk-no { width: 22px; height: 22px; border-radius: 50%; color: #fff; font-size: 11px; font-weight: 600; display: flex; align-items: center; justify-content: center; font-variant-numeric: tabular-nums; }
.rm-rk-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.rm-rk-top { display: flex; justify-content: space-between; gap: 8px; font-size: var(--cds-font-size-caption); }
.rm-rk-n { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.rm-rk-v { color: var(--color-fg-muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.rm-track { height: 8px; border-radius: 4px; background: var(--cds-chart-grid); overflow: hidden; }
.rm-fill { height: 100%; border-radius: 4px; background: linear-gradient(90deg, var(--rm-b1), var(--rm-b4)); transform-origin: left; }

/* weekly interactive */
.rm-wk-ctl { display: flex; flex-wrap: wrap; gap: var(--cds-gap-sm) var(--cds-gap-md); align-items: center; }
.rm-seg { display: inline-flex; border: 1px solid var(--color-border-line); border-radius: 999px; padding: 2px; background: var(--color-bg); }
.rm-seg-b { font: inherit; font-size: var(--cds-font-size-caption); border: 0; background: none; color: var(--color-fg-muted); padding: 4px 12px; border-radius: 999px; cursor: pointer; }
.rm-seg-b[aria-pressed="true"] { background: linear-gradient(180deg, var(--rm-b3), var(--rm-b1)); color: #fff; }
.rm-seg-b:focus-visible, .rm-wk-nav:focus-visible, .rm-wk-chart:focus-visible { outline: 2px solid var(--rm-b4); outline-offset: 2px; }
.rm-tgl { font-size: var(--cds-font-size-caption); color: var(--color-fg-muted); display: inline-flex; gap: 6px; align-items: center; cursor: pointer; }
.rm-tgl input { accent-color: var(--rm-b3); }
.rm-wk { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 19rem); gap: var(--cds-gap-lg); align-items: start; }
@media (max-width: 860px) { .rm-wk { grid-template-columns: minmax(0, 1fr); } }
.rm-wk-chart { min-height: 270px; border-radius: 8px; }
.rm-wk-chart svg { cursor: pointer; }
.rm-wk-det { min-height: 270px; border-left: 1px solid var(--color-border-line); padding-left: var(--cds-pad-lg); display: flex; flex-direction: column; gap: var(--cds-gap-sm); min-width: 0; }
@media (max-width: 860px) { .rm-wk-det { border-left: 0; padding-left: 0; border-top: 1px solid var(--color-border-line); padding-top: var(--cds-pad-md); } }
.rm-wk-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.rm-wk-t { font-weight: var(--cds-font-weight-medium); }
.rm-wk-d { font-size: var(--cds-font-size-caption); color: var(--color-fg-muted); }
.rm-wk-navs { display: flex; gap: 4px; flex: none; }
.rm-wk-nav { font: inherit; width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--color-border-line); background: var(--color-bg); color: var(--color-fg); cursor: pointer; line-height: 1; }
.rm-wk-nav:disabled { opacity: .35; cursor: default; }
.rm-wk-big { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.rm-wk-num { font-family: var(--font-anthropic-serif); font-size: var(--cds-font-size-title); font-variant-numeric: tabular-nums; }
.rm-delta { font-size: var(--cds-font-size-caption); font-weight: 600; padding: 1px 8px; border-radius: 999px; font-variant-numeric: tabular-nums; }
.rm-delta.up { color: var(--color-ok); background: color-mix(in srgb, var(--color-ok) 12%, transparent); }
.rm-delta.down { color: var(--color-bad); background: color-mix(in srgb, var(--color-bad) 12%, transparent); }
.rm-wk-meta { font-size: var(--cds-font-size-caption); color: var(--color-fg-muted); font-variant-numeric: tabular-nums; }
.rm-wk-grp { display: flex; flex-direction: column; gap: 5px; }
.rm-wk-gh { font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--color-fg-muted); font-weight: 600; }
.rm-wk-it { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 8px; font-size: var(--cds-font-size-caption); }
.rm-wk-it .n { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rm-wk-it .v { font-variant-numeric: tabular-nums; color: var(--color-fg-muted); }
.rm-wk-it .rm-track { grid-column: 1 / -1; height: 5px; }

/* table */
.rm-tools { display: flex; flex-wrap: wrap; gap: var(--cds-gap-sm); align-items: center; }
.rm-search { font: inherit; font-size: var(--cds-font-size-caption); padding: 6px 10px; border: 1px solid var(--color-border-line); border-radius: 8px; background: var(--color-bg); color: var(--color-fg); flex: 1 1 14rem; max-width: 22rem; min-width: 0; }
.rm-chip { font: inherit; font-size: var(--cds-font-size-caption); padding: 5px 12px; border: 1px solid var(--color-border-line); border-radius: 999px; background: var(--color-bg); color: var(--color-fg); cursor: pointer; display: inline-flex; gap: 6px; align-items: center; }
.rm-chip[aria-pressed="true"] { background: var(--rm-b2); border-color: var(--rm-b2); color: #fff; }
.rm-chip-n { font-variant-numeric: tabular-nums; opacity: .75; }
.rm-chip:focus-visible, .rm-sort:focus-visible, .rm-search:focus-visible { outline: 2px solid var(--rm-b4); outline-offset: 2px; }
.rm-tablebox { max-height: 30rem; overflow: auto; border-radius: 8px; }
.rm-table { width: 100%; border-collapse: collapse; font-size: var(--cds-font-size-caption); font-variant-numeric: tabular-nums; }
.rm-table th { position: sticky; top: 0; background: var(--color-panel); text-align: left; font-weight: var(--cds-font-weight-medium); border-bottom: 1px solid var(--color-border-line); padding: 6px 8px; white-space: nowrap; z-index: 1; }
.rm-table td { border-bottom: 1px solid var(--color-border-line); padding: 6px 8px; vertical-align: middle; }
.rm-table tbody tr:hover td { background: var(--cds-chart-grid); }
.rm-table .num { text-align: right; white-space: nowrap; }
.rm-sort { font: inherit; background: none; border: 0; color: inherit; padding: 0; cursor: pointer; }
.rm-pct { display: flex; align-items: center; gap: 6px; justify-content: flex-end; }
.rm-pct-t { width: 60px; height: 6px; border-radius: 3px; background: var(--cds-chart-grid); overflow: hidden; flex: none; }
.rm-pct-b { height: 100%; border-radius: 3px; }
.rm-st { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 11px; white-space: nowrap; border: 1px solid transparent; }
.rm-st.over { background: var(--rm-warn-bg); border-color: var(--rm-warn-line); color: var(--rm-warn-fg); }
.rm-st.done { background: rgba(43, 125, 176, .14); color: var(--color-fg); border-color: rgba(43, 125, 176, .35); }
.rm-st.run { background: transparent; color: var(--color-fg-muted); border-color: var(--color-border-line); }
.rm-proj { color: var(--color-fg-muted); max-width: 20rem; }
@media (max-width: 720px) { .rm-hide-n { display: none; } }

/* warning card */
.rm-warn { background: var(--rm-warn-bg); border: 1px solid var(--rm-warn-line); border-left: 4px solid var(--rm-ochre); border-radius: 12px; padding: var(--cds-pad-lg); color: var(--rm-warn-fg); display: flex; flex-direction: column; gap: var(--cds-gap-sm); }
.rm-warn .rm-h { color: var(--rm-warn-fg); }
.rm-warn .rm-note { color: var(--rm-warn-fg); opacity: .85; }
.rm-warn-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); gap: var(--cds-gap-sm); margin: 0; padding: 0; list-style: none; }
.rm-warn-list li { background: rgba(255, 255, 255, .6); border: 1px solid var(--rm-warn-line); border-radius: 8px; padding: 8px 10px; display: flex; flex-direction: column; gap: 2px; font-size: var(--cds-font-size-caption); line-height: 1.4; min-width: 0; overflow-wrap: anywhere; }
.rm-warn-k { font-weight: 600; display: flex; justify-content: space-between; gap: 8px; }
.rm-warn-n { font-variant-numeric: tabular-nums; color: var(--rm-ochre); }

.rm-fail { display: flex; align-items: center; justify-content: center; gap: 6px; color: var(--color-fg-muted); font-size: var(--cds-font-size-caption); min-height: inherit; }
.rm-fail::before { content: ""; width: .375rem; height: .375rem; border-radius: 50%; background: var(--color-bad); }
[data-dash-source-state=empty] { color: transparent; }
[data-dash-source-state=refreshing] { opacity: .5; transition: opacity var(--cds-dur-slow); }
@media (prefers-reduced-motion: no-preference) {
  @keyframes rm-grow { from { transform: scaleY(0); } to { transform: scaleY(1); } }
  @keyframes rm-growx { from { transform: scaleX(0); } to { transform: scaleX(1); } }
  @keyframes rm-fade { from { opacity: 0; } to { opacity: 1; } }
  .rm-anim .rm-bar { transform-box: fill-box; transform-origin: bottom; animation: rm-grow var(--cds-dur-slow) var(--cds-ease-out) both; }
  .rm-anim .rm-fill { animation: rm-growx var(--cds-dur-slow) var(--cds-ease-out) both; }
  .rm-anim .rm-fadein { animation: rm-fade var(--cds-dur-slow) var(--cds-ease-out) both; }
}
@media (max-width:640px){
 .rm-kpis{grid-template-columns:1fr 1fr!important}
 .rm-kpis .rm-kpi:first-child{grid-column:1 / -1}
 .rm-kpi-v{font-size:22px!important}
}

#tb-npp td:first-child{white-space:nowrap}

/* ---- bilah menu bawah (HP) ---- */
.tabbar{display:none}
@media (max-width:640px){
 .app-bar .nav{display:none}
 .brand span{display:inline!important;font-size:15px}
 .app-bar-in{justify-content:space-between}
 .tabbar{display:grid;grid-template-columns:repeat(6,1fr);position:fixed;left:0;right:0;bottom:0;z-index:25;
  background:var(--bar-bg);backdrop-filter:saturate(1.4) blur(12px);-webkit-backdrop-filter:saturate(1.4) blur(12px);
  border-top:1px solid var(--color-border-line);box-shadow:0 -4px 18px rgba(8,42,69,.10);
  padding:6px max(6px,env(safe-area-inset-right,0px)) calc(6px + env(safe-area-inset-bottom,0px)) max(6px,env(safe-area-inset-left,0px))}
 .tabbar a{position:relative;display:flex;flex-direction:column;align-items:center;gap:3px;padding:4px 0 2px;text-decoration:none;color:var(--color-fg-muted);font-size:10.5px;font-weight:500;-webkit-tap-highlight-color:transparent;min-width:0}
 .tabbar a span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
 .tabbar svg{width:22px;height:22px;padding:4px 14px;box-sizing:content-box;border-radius:999px;transition:background .2s,color .2s}
 .tabbar a.on{color:var(--color-fg)}
 .tabbar a.on svg{background:linear-gradient(180deg,#206998,#0F4166);color:#fff}
 .tabbar a:focus-visible{outline:2px solid #2B7DB0;outline-offset:-2px;border-radius:10px}
 .tab-badge{position:absolute;top:0;left:calc(50% + 6px);min-width:16px;height:16px;padding:0 4px;border-radius:999px;background:#B5822C;color:#fff;font-size:10px;font-weight:700;line-height:16px;text-align:center;border:2px solid var(--color-bg)}
 body{padding-bottom:calc(76px + env(safe-area-inset-bottom,0px))}
 #dash-root [id]{scroll-margin-top:64px}
}