@media screen {
  :root {
    --sun-paper:#f9f2e9;--sun-white:#fffcf8;--sun-ink:#2b2026;--sun-quiet:#65535b;
    --sun-line:#e8d6d5;--sun-coral:#76243b;--sun-deep:#5d182d;--sun-green:#63223a;
    --sun-peach:#f4e1e4;--sun-sky:#e6edf3;--sun-mint:#e5eee3;--sun-honey:#f8ebcb;
    --header-ground:#fffaf6;--pattern-image:none;--thread:#cca8a5;
    --pattern-contrast:.34;--hero-pattern-contrast:.25;--pattern-filter:none;--hero-fade:#f8eadd;
    --hero-from:to right;
  }
  html[dir=ltr]{--hero-from:to left}
  html[data-texture=reserve]{--pattern-image:url("assets/sadu-spectrum.svg")}
  html[data-texture=floral]{--pattern-image:url("assets/haram-floral-lines-sheen.svg")}
  html[data-mode=dark]{
    color-scheme:dark;
    --sun-paper:#101010;--sun-white:#1b1b1b;--sun-ink:#fafafa;--sun-quiet:#c7c7c7;
    --sun-line:#3d3d3d;--sun-coral:#2e2e2e;--sun-deep:#454545;--sun-green:#eee;
    --sun-peach:#242424;--sun-sky:#1e1e1e;--sun-mint:#212121;--sun-honey:#252525;
    --sun-shadow:0 10px 28px #0008;--header-ground:#161616;--hero-fade:#1d1d1d;
    --pattern-contrast:.18;--hero-pattern-contrast:.15;--pattern-filter:grayscale(1) brightness(1.4);--thread:#656565;
  }
  .ambient-canvas{display:none}
  body{background:var(--sun-paper)!important;color:var(--sun-ink)}
  body::before,body::after{
    content:"";position:fixed;pointer-events:none;z-index:0;
    background:var(--pattern-image) center / contain no-repeat;
    opacity:var(--pattern-contrast);filter:var(--pattern-filter);
  }
  body::before{
    width:clamp(390px,52vw,790px);aspect-ratio:1.08;
    inset-inline-start:clamp(-340px,-18vw,-175px);inset-block-start:80px;
    mask-image:linear-gradient(90deg,transparent 5%,#000 33%,#000 79%,transparent 98%);
  }
  body::after{
    width:clamp(300px,35vw,560px);aspect-ratio:1.08;
    inset-inline-end:clamp(-250px,-12vw,-100px);inset-block-end:-125px;
    transform:rotate(180deg);
    mask-image:linear-gradient(105deg,#000 22%,#000 64%,transparent 97%);
  }
  html[dir=rtl] body::before{transform:scaleX(-1)}
  html[dir=rtl] body::after{transform:scaleY(-1)}
  #app-root{position:relative;z-index:1}
  body>header{background:var(--header-ground)!important}
  body>header #brand-home-btn{min-width:40px}
  #app-root .bento-card:has(button[onclick^="switchQuizMode("]) .bg-slate-900:not(:disabled){color:white!important}
  html[data-mode=dark] #main-nav button.bg-white{background:#373737!important;color:#fff!important}
  html[data-texture]:not([data-texture=plain]) body>header::after{
    content:"";display:block;height:3px;pointer-events:none;
    background:linear-gradient(90deg,transparent,var(--thread) 11%,transparent 32%,transparent 68%,var(--thread) 89%,transparent) center / 100% 1px no-repeat;
  }
  #main-nav{background:var(--sun-peach)!important}
  #main-nav button.bg-white{background:var(--sun-white)!important;color:var(--sun-ink)!important}
  #app-root>div:has(button[onclick^="selectWizardReader("])>div:first-child{
    position:relative;isolation:isolate;overflow:hidden;
    background-color:var(--hero-fade);border-color:var(--sun-line);
    min-height:298px;
  }
  #app-root>div:has(button[onclick^="selectWizardReader("])>div:first-child::before{
    content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
    inset:auto;inset-inline-start:-95px;inset-block-end:-258px;width:min(620px,60%);aspect-ratio:1.08;
    background:var(--pattern-image) center / contain no-repeat;
    opacity:var(--hero-pattern-contrast);filter:var(--pattern-filter);mask-image:linear-gradient(0deg,#000 52%,#0006 76%,transparent 93%);
  }
  #app-root>div:has(button[onclick^="selectWizardReader("])>div:first-child::after{
    content:"";position:absolute;inset-block:0;inset-inline-end:0;width:44%;z-index:-1;pointer-events:none;
    background:url("assets/sunlit-majlis.webp") center / cover no-repeat;
    mask-image:linear-gradient(var(--hero-from),transparent,#000 22%,#000 85%,#0008);
  }
  #app-root>div:has(button[onclick^="selectWizardReader("])>div:first-child{background-image:none}
  html[data-texture=plain] #app-root>div:has(button[onclick^="selectWizardReader("])>div:first-child::after{mask-image:none}
  html[lang=ar] #app-root :is(h1,.bento-card:has(.option-card) h2,.bento-card:has(select[onchange^="state.pairAId="]) h2,.bento-card:has(button[onclick^="state.sosSituationKey="]) h2),
  html[lang=ar] #appearance-title{font-family:"Lalezar","IBM Plex Sans Arabic",sans-serif;font-weight:400;letter-spacing:normal;line-height:1.2}
  html[lang=ar] #app-root>div:has(button[onclick^="selectWizardReader("]) h1{font-size:clamp(2.5rem,4.15vw,4.15rem)}
  html[lang=ar] #app-root .bento-card:has(.option-card) h2{font-size:clamp(1.75rem,3.2vw,2.65rem)}
  html[lang=ar] #app-root :is(.bento-card:has(select[onchange^="state.pairAId="]) h2,.bento-card:has(button[onclick^="state.sosSituationKey="]) h2){font-size:1.9rem}
  /* Dark surfaces: override hard-coded utility colors, not chart series or colored status dots. */
  html[data-mode=dark] :is(#app-root,#member-modal,body>header) :is(.text-slate-900,.text-slate-800,.text-slate-700,.text-slate-600,.text-slate-500,.text-slate-400,.text-slate-300){color:var(--sun-quiet)!important}
  html[data-mode=dark] :is(#app-root,#member-modal,body>header) :is(.text-slate-900,.text-slate-800){color:var(--sun-ink)!important}
  html[data-mode=dark] :is(#app-root,#member-modal,body>header) :is([class~="bg-slate-50"],[class*="bg-slate-50/"],.bg-slate-100,.bg-slate-200){background-color:#252525!important}
  html[data-mode=dark] :is(#app-root,#member-modal,body>header) :is(.bg-white,select,input:not([type=checkbox])){background-color:var(--sun-white)!important}
  html[data-mode=dark] :is(#app-root,#member-modal,body>header) :is([class*="border-slate-"],.border-amber-200,.border-emerald-200,.border-rose-200){border-color:var(--sun-line)!important}
  html[data-mode=dark] #app-root :is(.bg-amber-50,.bg-emerald-50,.bg-rose-50){background-color:var(--sun-honey)!important}
  html[data-mode=dark] #app-root .bg-emerald-50{background-color:var(--sun-mint)!important}
  html[data-mode=dark] #app-root .bg-rose-50{background-color:var(--sun-peach)!important}
  html[data-mode=dark] #app-root [class*="text-amber-"]{color:#f0cf92!important}
  html[data-mode=dark] #app-root [class*="text-emerald-"]{color:#b1e1bd!important}
  html[data-mode=dark] #app-root [class*="text-rose-"]{color:#ffb2c8!important}
  html[data-mode=dark] #app-root .bento-card:has(>div button[onclick^="selectMemberAndOpenProfile("])>p,
  html[data-mode=dark] #app-root .bento-card:has(select[onchange^="state.pairAId="]){background:var(--sun-white);border-color:var(--sun-line)}
  html[data-mode=dark] #app-root .bento-card:has(button[onclick^="state.sosSituationKey="]){background:var(--sun-mint)}
  html[data-mode=dark] #app-root [data-tone-surface=rank],html[data-mode=dark] #app-root .option-card{background:var(--sun-peach)!important;border-color:var(--sun-line)!important}
  html[data-mode=dark] #app-root .option-card[data-ranked=true]{background:#333!important;border-color:#bdbdbd!important}
  html[data-mode=dark] #app-root [data-tone-surface=rank]>span,
  html[data-mode=dark] #app-root span[style^="color:"]{color:#ffe7ac!important}
  html[data-mode=dark] #app-root svg text[fill="#0F172A"]{fill:var(--sun-ink)}
  html[data-mode=dark] #app-root svg text[fill="#64748B"]{fill:var(--sun-quiet)}
  html[data-mode=dark] #app-root svg circle[fill="#FFFFFF"]{fill:var(--sun-white)}
  html[data-mode=dark] #app-root button[onclick^="selectWizardReader("]{background:#242424!important}
  html[data-mode=dark] #app-root button[onclick^="selectWizardReader("] :is(.text-slate-900,.text-slate-500){color:var(--sun-ink)!important}
  .appearance-open,.appearance-close,#appearance-reset{border:1px solid var(--sun-line);background:var(--sun-white);color:var(--sun-ink);border-radius:12px;font:inherit;font-size:.8rem;cursor:pointer}
  .appearance-open{display:flex;align-items:center;gap:6px;padding:6px 10px;min-height:40px}
  .appearance-open svg{width:17px;height:17px;color:var(--sun-green)}
  .ar-ui,.en-ui{display:none}html[lang=ar] .ar-ui,html[lang=en] .en-ui{display:inline}
  .visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  #appearance-dialog:not([open]){display:none}
  #appearance-dialog{position:fixed;inset:0;margin:auto;max-height:calc(100dvh - 24px);overflow:auto;width:min(540px,calc(100% - 24px));padding:21px;border:1px solid var(--sun-line);border-radius:24px;background:var(--sun-white);color:var(--sun-ink);box-shadow:0 20px 80px #13090e6b}
  #appearance-dialog::backdrop{background:#1c101b9c}
  .appearance-heading{display:flex;justify-content:space-between;gap:8px;align-items:start}
  #appearance-title{font-size:1.9rem;line-height:1.1}
  .appearance-heading p{font-size:.84rem;color:var(--sun-quiet);margin-block-start:5px}
  .appearance-close{width:40px;height:40px;font-size:1.5rem}
  #appearance-dialog fieldset{margin-block-start:17px}
  #appearance-dialog legend{font-size:.87rem;font-weight:700;margin-block-end:7px}
  .mode-options,.texture-options{display:grid;gap:8px;grid-template-columns:repeat(2,minmax(0,1fr))}
  .texture-options{grid-template-columns:repeat(3,minmax(0,1fr))}
  :is(.mode-options,.texture-options) label{position:relative;min-height:44px;cursor:pointer;border:1px solid var(--sun-line);border-radius:13px;padding:7px;display:grid;place-items:center;gap:6px;font-size:.84rem;text-align:center}
  :is(.mode-options,.texture-options) input{position:absolute;opacity:0;width:100%;height:100%;inset:0;cursor:pointer}
  :is(.mode-options,.texture-options) label:has(input:checked){border-color:var(--sun-coral);box-shadow:0 0 0 1px var(--sun-coral);background:var(--sun-peach)}
  :is(.mode-options,.texture-options) label:has(input:focus-visible),#appearance-dialog button:focus-visible{outline:3px solid var(--sun-green);outline-offset:2px}
  .texture-thumb{width:100%;height:52px;border-radius:8px;background-size:144px;background-position:center;background-repeat:no-repeat;background-color:var(--sun-paper)}
  .reserve-thumb{background-image:url("assets/sadu-spectrum.svg")}
  .floral-thumb{background-image:url("assets/haram-floral-lines-sheen.svg")}
  #appearance-reset{padding:6px 10px;margin-block-start:15px;min-height:40px}
}
@media screen and (max-width:767px){
  body::before{width:330px;inset-inline-start:-270px;inset-block-start:110px}
  body::after{width:280px;inset-inline-end:-195px;inset-block-end:-90px}
  html[data-texture]:not([data-texture=plain]) #app-root>div:has(button[onclick^="selectWizardReader("])>div:first-child{padding-block-start:31px}
  #app-root>div:has(button[onclick^="selectWizardReader("])>div:first-child{min-height:0}
  #app-root>div:has(button[onclick^="selectWizardReader("])>div:first-child::before{
    inset-inline-start:auto;inset-inline-end:-18px;inset-block-start:-71px;inset-block-end:auto;width:235px;
    mask-image:linear-gradient(#000 0 25%,transparent 49%);
  }
  #app-root>div:has(button[onclick^="selectWizardReader("])>div:first-child::after{display:none}
}

/* Spectrum: two large asymmetric line compositions; no stitch texture or tiling. */
@media screen {
  html[data-texture=reserve]{--pattern-contrast:.72;--pattern-filter:none}
  html[data-texture=reserve][data-mode=dark]{--pattern-contrast:.42;--pattern-filter:brightness(1.45)}
  html[data-texture=reserve] body::before{width:clamp(280px,33vw,530px);height:auto;aspect-ratio:1;inset-inline-start:clamp(-275px,-15vw,-130px);inset-block-start:85px;mask-image:linear-gradient(145deg,#000 25%,transparent 78%)}
  html[data-texture=reserve] body::after{width:clamp(270px,34vw,500px);height:auto;aspect-ratio:1;inset-inline-end:clamp(-245px,-11vw,-115px);inset-block-end:-115px;mask-image:linear-gradient(145deg,#000 25%,transparent 78%)}
  .reserve-thumb{background-size:110px;background-position:left top}
  body>header #brand-home-btn{display:grid;place-items:center;flex:none;width:48px;height:48px;background:transparent!important;border-radius:12px;color:#262d37}
  body>header #brand-home-btn:hover{background:var(--sun-peach)!important}
  .brand-door{fill:#087963}
  html[data-mode=dark] body>header #brand-home-btn{color:#f5f5f5}
  html[data-mode=dark] .brand-door{fill:#58d2b0}
}
@media screen and (max-width:767px){
  html[data-texture=reserve] body::before{width:245px;inset-inline-start:-146px;inset-block-start:150px}
  html[data-texture=reserve] body::after{width:225px;inset-inline-end:-127px;inset-block-end:-69px}
}

@media screen {
  /* No dark color overlays over the character artwork. */
  html[data-mode=dark] #app-root img {filter:none}
  html[data-mode=dark] #app-root>div:has(button[onclick^="selectWizardReader("])>div:first-child::after {
    filter:saturate(1.14) brightness(1.045);
  }
  html[data-mode=dark] #app-root svg :is(image,path,circle)[href] {filter:saturate(1.08)}
  html[data-mode=dark] #app-root :is(button,input,select):focus-visible{outline-color:#eee!important}
  html[data-mode=dark] #appearance-dialog label:has(input:checked){box-shadow:0 0 0 1px #aaa;border-color:#aaa}
}

@media screen {
  /* Match the specificity of the light reader palettes, keeping colored lens chips intact. */
  html[data-mode=dark] body #app-root .bento-card {border-color:var(--sun-line)}
  html[data-mode=dark] body #app-root button[onclick^="selectWizardReader("]:nth-child(n) {
    background:#242424!important;
  }
  html[data-mode=dark] body #app-root button[onclick^="selectWizardReader("].border-slate-900 {
    border-color:#b7b7b7!important;box-shadow:0 0 0 2px #b7b7b733!important;
  }
  html[data-mode=dark] body #app-root button[onclick^="selectReaderLens("],
  html[data-mode=dark] body #app-root :is(button.bg-white,button[class*="bg-slate-50"]),
  html[data-mode=dark] body header :is(button.bg-white,button#compact-toggle-btn[class*="bg-white"]),
  html[data-mode=dark] body #member-modal button.bg-white {
    background-color:#252525!important;color:#f4f4f4!important;
  }
  html[data-mode=dark] body>header button.bg-slate-900,
  html[data-mode=dark] body #app-root button.bg-slate-900,
  html[data-mode=dark] body #member-modal button.bg-slate-900 {
    background:#383838!important;border-color:#595959!important;color:#fff!important;
  }
  html[data-mode=dark] body :is(#app-root,header,#member-modal) button.bg-slate-900:hover {
    background:#484848!important;
  }
}

/* Crop the bitmap itself. Rounding a picker tile does not clip the image in a score ring. */
.osrah-portrait-crop,
#modal-avatar-picker svg image {
  clip-path:circle(50%) fill-box;
}

/* QA pass: resilient chart labels, readable controls, and neutral dark surfaces. */
#print-summary { display:none }
@media screen {
  .household-mix {container-type:inline-size;min-width:0;flex-wrap:wrap}
  .household-mix>svg {width:86px;height:86px;margin-inline:auto}
  .household-mix>div {min-width:190px}
  .household-mix>div>div:first-child {gap:10px;flex-wrap:wrap}
  .mix-stat {gap:10px;min-width:0;white-space:nowrap}
  .mix-stat>span {flex-shrink:0}
  .quiz-workspace .bento-card>div>div {min-width:0}
  .quiz-workspace select {max-width:100%}
  .quiz-workspace button:disabled {opacity:.42;cursor:not-allowed}
  .quiz-workspace .option-card:focus-visible {outline:3px solid #a84b66;outline-offset:3px}
  #app-root svg image {clip-path:circle(50%) fill-box}
  html[data-mode=dark] {--sun-quiet:#dedede;--sun-line:#505050}
  /* Inline element tints need a matched foreground AND background. */
  html[data-mode=dark] #app-root [style*="background:"][style*="color:"] {background:#303030!important;color:#fff!important}
  html[data-mode=dark] #app-root [class*="bg-amber-50"],
  html[data-mode=dark] #app-root [class*="bg-rose-50"],
  html[data-mode=dark] #app-root [class*="bg-emerald-50"] {background-color:#282828!important}
  html[data-mode=dark] #app-root [class*="text-amber-"] {color:#ffdb8c!important}
  html[data-mode=dark] #app-root [class*="text-emerald-"] {color:#8ee7c4!important}
  html[data-mode=dark] #app-root [class*="text-rose-"] {color:#ffb7cc!important}
  html[data-mode=dark] #app-root .bg-rose-600 {background:#80304a!important;color:#fff!important}
  html[data-mode=dark] #app-root [class*="text-sky-"],
  html[data-mode=dark] #app-root [class*="text-blue-"] {color:#a9d9ff!important}
  html[data-mode=dark] body :is(input,select) {color:#fafafa!important}
  html[data-mode=dark] input::placeholder {color:#bdbdbd}
  html[data-mode=dark] #app-root .option-card[data-ranked=true] {border-color:#aaa!important;background:#343434!important}
  html[data-mode=dark] .quiz-workspace button[onclick^="switchQuizMode("].bg-slate-900 {background:#ededed!important;color:#171717!important;border-color:#ededed!important}
}
@media screen and (max-width:767px) {
  .household-mix>div {min-width:180px}
  .quiz-workspace .option-card {padding:14px}
  .quiz-workspace .option-card>span:first-child {font-size:.94rem;line-height:1.55}
}
@page { size:A4; margin:12mm }
@media print {
  :root,html[data-mode=dark] {color-scheme:light!important}
  body {color:#202020!important;background:#fff!important;margin:0!important;padding:0!important}
  body::before,body::after,body>header,#appearance-dialog,.profile-screen {display:none!important}
  #app-root {width:100%;max-width:none!important;margin:0!important;padding:0!important}
  #print-summary {display:block;color:#202020;font-size:9pt;line-height:1.48}
  #print-summary * {box-shadow:none!important;text-shadow:none!important}
  #print-summary .print-masthead {display:flex;align-items:center;justify-content:space-between;border-bottom:2px solid #7a2944;padding-bottom:10px;margin-bottom:14px}
  #print-summary h1 {font-size:23pt;line-height:1.2;margin:5px 0;overflow-wrap:anywhere}
  #print-summary h2 {font-size:10pt;font-weight:700;color:#72223c;margin:0 0 4px}
  #print-summary p {margin:0}
  #print-summary .print-masthead span,#print-summary .print-masthead p {color:#555;font-size:9pt}
  #print-summary .print-scores {display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:16px}
  #print-summary .print-scores>div {display:flex;align-items:center;gap:6px;border:1px solid #ddd;border-radius:8px;padding:8px}
  #print-summary .print-scores strong {margin-inline-start:auto;font-size:13pt}
  #print-summary small {font-size:8pt;font-weight:400}
  #print-summary i {width:7px;height:7px;border-radius:50%;print-color-adjust:exact}
  #print-summary .print-columns {display:grid;grid-template-columns:1fr 1fr;gap:12px 20px}
  #print-summary section {break-inside:avoid;margin-bottom:10px}
  #print-summary .print-script {border-inline-start:3px solid #72223c;padding:9px 12px;background:#faf5f6;margin-top:8px;print-color-adjust:exact}
  #print-summary .print-matrix {display:grid;grid-template-columns:1fr 1fr;gap:10px 20px}
  #print-summary .print-matrix strong {font-size:9pt}
  #print-summary footer {border-top:1px solid #ddd;margin-top:12px;padding-top:8px;font-size:8pt;color:#555}
}
@media screen {
  html[data-mode=light] #app-root .text-rose-500 {color:#be123c}
  /* Saturated chart keys retain their color; black ink is readable on all four. */
  #app-root span.text-white[style*="background:"] {color:#171717!important}
  html[data-mode=dark] body #app-root .quiz-workspace button[onclick^="switchQuizMode("].bg-slate-900 {background:#ededed!important;color:#171717!important;border-color:#ededed!important}
}
@media screen {
  html[data-mode=dark] body #main-nav button.bg-white {background:#ededed!important;color:#171717!important}
}

@media screen {
  /* Density changes layout spacing, never reading size. */
  :root {--card-pad:24px;--card-space:18px;--layout-gap:20px}
  :root[data-density=compact] {--card-pad:15px;--card-space:10px;--layout-gap:12px}
  #app-root .bento-card {padding:var(--card-pad)}
  #app-root .bento-card[class*="space-y-"] > :not([hidden]) ~ :not([hidden]) {margin-block-start:var(--card-space);margin-block-end:0}
  #app-root>div[class*="space-y-"] > :not([hidden]) ~ :not([hidden]) {margin-block-start:var(--layout-gap);margin-block-end:0}
  #app-root :is(.text-xs,[class~="text-[10px]"],[class~="text-[11px]"]),
  #member-modal :is(.text-xs,[class~="text-[10px]"],[class~="text-[11px]"]),
  body>header :is(.text-xs,[class~="text-[11px]"]), .appearance-open {
    font-size:.84375rem;line-height:1.4
  }
  #app-root .text-sm,#member-modal .text-sm {font-size:.9375rem}
  #app-root :is(button,select),#member-modal :is(button,select) {white-space:normal}
  #app-root .metric-number {font-size:1.125rem;font-weight:700;font-variant-numeric:tabular-nums;line-height:1.15}
  #app-root .quiz-progress .metric-number {font-size:1.25rem;color:var(--sun-ink)}
  #app-root [data-tone-surface=rank] .rank-label {min-width:0;gap:6px}
  #app-root [data-tone-surface=rank] .rank-label .rounded-full.w-2 {display:none}
  #app-root .household-mix>div {min-width:min(100%,205px)}
  #app-root .mix-stat {gap:6px;padding-inline:7px}
  #app-root .mix-stat>span:first-child {min-width:0;flex-shrink:1}
  #app-root .mix-stat .metric-number {font-size:1rem}
  #app-root .battery-label .metric-number {font-size:1rem}
  [data-element=ember]{--tone-light:#933610;--tone-dark:#ffb181;--tone-bg:#36241b}
  [data-element=amber]{--tone-light:#854b08;--tone-dark:#ffd17c;--tone-bg:#352b19}
  [data-element=ruby]{--tone-light:#a01954;--tone-dark:#ffa8cf;--tone-bg:#38222e}
  [data-element=jade]{--tone-light:#006851;--tone-dark:#79e8c1;--tone-bg:#1a322b}
  #app-root [data-element] :is(.rank-label .text-slate-900,.mix-stat .text-slate-700),
  #app-root .mix-stat[data-element] .text-slate-700 {color:var(--tone-light)}
  html[data-mode=dark] #app-root :is([data-tone-surface=rank],.mix-stat,button[data-element])[data-element],
  html[data-mode=dark] #app-root span[data-element][style*="background:"] {background:var(--tone-bg)!important}
  html[data-mode=dark] #app-root [data-element] :is(.rank-label .text-slate-900,.metric-number),
  html[data-mode=dark] #app-root .mix-stat[data-element] .text-slate-700,
  html[data-mode=dark] #app-root button[data-element] .text-slate-900,
  html[data-mode=dark] #app-root span[data-element] {color:var(--tone-dark)!important}
}
@media screen and (max-width:767px) {
  :root {--card-pad:16px}
  :root[data-density=compact] {--card-pad:11px}
  #app-root [data-tone-surface=rank] {padding:7px;gap:4px}
  #app-root .mix-stat {white-space:normal}
}