/* Optional layout layer. The classic page remains the default. */
#hud-layout-switch {
  position:fixed; right:20px; top:10px; z-index:9998;
  display:flex; align-items:center; gap:4px; padding:4px;
  border:1px solid rgba(230,211,184,.31); border-radius:22px;
  background:rgba(9,13,17,.88); backdrop-filter:blur(16px);
  box-shadow:0 10px 24px rgba(0,0,0,.35); color:#c0cbd0;
  font:700 12px/1.2 var(--font-family),sans-serif;
}
.hud-layout-caption { margin:0 7px; letter-spacing:.08em; }
#hud-layout-switch button, #studio-inspector-switch button {
  border:1px solid transparent; background:transparent; color:#bec8cc;
  font:700 13px/1.2 var(--font-family),sans-serif;
  cursor:pointer; border-radius:17px; padding:7px 13px;
}
#hud-layout-switch button[aria-pressed="true"], #studio-inspector-switch button[aria-pressed="true"] {
  color:#161513; background:#edc68d; border-color:#f6d9a8;
  box-shadow:0 1px 13px rgba(237,198,141,.3);
}
#hud-layout-switch button:focus-visible, #studio-inspector-switch button:focus-visible {
  outline:2px solid #edc68d; outline-offset:2px;
}
body.mode-preview #hud-layout-switch { display:none; }
@media (min-width:769px) {
  /* Both appreciation layouts keep this switch clear of the two 3D controls. */
  body.mode-appreciate #hud-layout-switch { left:110px; right:auto; }
  body[data-hud-layout="studio"].mode-appreciate #hud-layout-switch { left:20px; }
}
#studio-inspector-switch, #studio-hero, #studio-rank-hero { display:none; }

/* Studio surfaces share the same charcoal glass throughout the garage. */
body[data-hud-layout="studio"] { --studio-line:rgba(235,224,207,.18); --studio-glass:rgba(15,18,21,.88); --studio-amber:#edc68d; }
body[data-hud-layout="studio"]:not(.mode-preview) #garage-panel { --garage-surface:rgba(16,19,22,.87); }
body[data-hud-layout="studio"]:not(.mode-preview) #garage-panel > .garage-tools,
body[data-hud-layout="studio"]:not(.mode-preview) #garage-panel > .garage-filter,
body[data-hud-layout="studio"]:not(.mode-preview) #garage-panel > .garage-scroll-wrapper {
  background:var(--garage-surface) !important;
}
body[data-hud-layout="studio"]:not(.mode-preview) #garage-panel .garage-filter.hud-filter-surface { border-color:var(--studio-line); }
body[data-hud-layout="studio"]:not(.mode-preview) #garage-panel .garage-item { background:rgba(255,255,255,.055); border-color:rgba(255,255,255,.09); }
body[data-hud-layout="studio"]:not(.mode-preview) #garage-panel .garage-item.compare-selected { border-color:var(--studio-amber) !important; box-shadow:0 0 0 1px rgba(237,198,141,.22); }
body[data-hud-layout="studio"]:not(.mode-preview) #garage-panel .garage-cat-header { background:rgba(255,255,255,.025); }
body[data-hud-layout="studio"]:not(.mode-preview) #garage-panel .garage-content { background:transparent; }
body[data-hud-layout="studio"]:not(.mode-preview) #garage-panel .hud-select-trigger { background:rgba(28,32,36,.85) !important; border-color:var(--studio-line) !important; }
body[data-hud-layout="studio"]:not(.mode-preview) #garage-panel .hud-select-menu { background:#151b1f; border-color:rgba(237,198,141,.4); }

@media (min-width:1280px) {
  body[data-hud-layout="studio"]:not(.mode-preview) #garage-panel {
    left:18px !important; top:70px !important; bottom:20px !important;
    height:calc(100dvh - 90px) !important; max-height:calc(100dvh - 90px) !important;
    width:clamp(285px,26vw,420px) !important; border:1px solid var(--studio-line);
    border-radius:17px; overflow:hidden;
  }
  body[data-hud-layout="studio"]:not(.mode-preview) #garage-panel > .garage-tools { border-radius:16px 16px 0 0; }
  body[data-hud-layout="studio"]:not(.mode-preview) #garage-panel.glass-effect::before { clip-path:inset(0 round 17px); }
  body[data-hud-layout="studio"].mode-rank #garage-panel { left:-450px !important; }
  body[data-hud-layout="studio"]:not(.mode-preview) #garage-panel.filter-open { overflow:visible !important; }
  body[data-hud-layout="studio"]:not(.mode-preview) #garage-panel .garage-tools > * { opacity:1 !important; pointer-events:auto !important; }
  body[data-hud-layout="studio"]:not(.mode-preview) #garage-panel .garage-filter { visibility:visible !important; pointer-events:auto !important; }
  body[data-hud-layout="studio"]:not(.mode-preview) #garage-panel .garage-cat-header { justify-content:flex-start; padding-left:18px; }
  body[data-hud-layout="studio"]:not(.mode-preview) #garage-panel .garage-cat-header span { margin-left:10px; max-width:70px; opacity:.6; }
  body[data-hud-layout="studio"]:not(.mode-preview) #garage-panel .garage-category.active .garage-content {
    max-height:none !important; opacity:1; visibility:visible; overflow:visible !important;
  }
  body[data-hud-layout="studio"]:not(.mode-preview) #garage-panel .garage-list,
  body[data-hud-layout="studio"]:not(.mode-preview) #garage-panel #garage-search-results { grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; }

  /* In appreciation the garage retracts on pointer leave, as it does in classic. */
  body[data-hud-layout="studio"].mode-appreciate #garage-panel { width:60px !important; background:#101316 !important; }
  body[data-hud-layout="studio"].mode-appreciate #garage-panel:hover,
  body[data-hud-layout="studio"].mode-appreciate #garage-panel.force-expand { width:clamp(285px,26vw,420px) !important; }
  body[data-hud-layout="studio"].mode-appreciate #garage-panel:not(:hover):not(.force-expand) .garage-tools > * {
    opacity:0 !important; pointer-events:none !important;
  }
  body[data-hud-layout="studio"].mode-appreciate #garage-panel:not(:hover):not(.force-expand) .garage-filter {
    display:none !important; visibility:hidden !important; pointer-events:none !important;
  }
  body[data-hud-layout="studio"].mode-appreciate #garage-panel:not(:hover):not(.force-expand) .garage-cat-header {
    justify-content:center; padding-left:0;
  }
  body[data-hud-layout="studio"].mode-appreciate #garage-panel:not(:hover):not(.force-expand) .garage-cat-header span:not(.cat-title) {
    margin-left:0; max-width:0; opacity:0;
  }
  body[data-hud-layout="studio"].mode-appreciate #garage-panel:not(:hover):not(.force-expand) .garage-category.active .garage-content {
    max-height:0 !important; opacity:0; visibility:hidden; overflow:hidden !important;
  }

  /* The transparent WebGL canvas must not expose the car's theme colors along its padded edges. */
  body[data-hud-layout="studio"].mode-appreciate { background:#000 !important; }
  body[data-hud-layout="studio"].mode-appreciate .ambient-light { opacity:0 !important; }
  body[data-hud-layout="studio"].mode-appreciate #model-stage { background:#000 !important; }

  /* Appreciation: the live 3D vehicle remains interactive beneath the hero typography. */
  body[data-hud-layout="studio"].mode-appreciate #studio-hero {
    display:block; position:fixed; z-index:11; pointer-events:none;
    left:100px; right:35px; top:81px; bottom:28px;
    min-width:0; color:#f7f7f4;
    transition:left .2s ease;
  }
  body[data-hud-layout="studio"].mode-appreciate #garage-panel:hover ~ #studio-hero,
  body[data-hud-layout="studio"].mode-appreciate #garage-panel.force-expand ~ #studio-hero {
    left:calc(clamp(285px,26vw,420px) + 41px);
  }
  /* Keep the workbench hero free of a centered gray wash. The live canvas
     supplies the scene lighting; this overlay made a gray spot appear in the
     lower middle only in the studio layout. */
  body[data-hud-layout="studio"].mode-appreciate #studio-hero::before {
    display:none;
  }
  .studio-hero-heading { position:absolute; top:2%; left:2%; z-index:2; width:min(52%,520px); display:flex; flex-direction:column; gap:5px; }
  #studio-hero-brand { font:600 13px var(--font-family),sans-serif; text-transform:uppercase; letter-spacing:.24em; color:#b7c5c8; }
  #studio-hero-title { font:800 clamp(38px,5vw,76px)/.94 var(--font-family),sans-serif; letter-spacing:.015em; overflow-wrap:anywhere; text-shadow:0 5px 25px #000; }
  #studio-hero-score { align-self:flex-start; padding:4px 18px; margin-top:12px; border:1px solid rgba(237,198,141,.6); border-radius:30px; color:var(--studio-amber); background:#15191c; font:800 22px var(--font-family),sans-serif; }
  #studio-stats-shell { position:absolute; bottom:3%; left:2%; z-index:2; width:min(40%,380px); pointer-events:auto; }
  #studio-hero-stats { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px 18px; width:100%; padding:0; text-align:left; color:inherit; background:none; border:0; font:inherit; cursor:pointer; }
  #studio-hero-stats > .studio-stat-item, .studio-extra-grid > div { display:flex; flex-direction:column; min-width:0; padding:5px 0; border-top:1px solid rgba(241,242,239,.21); text-shadow:0 2px 8px #000; }
  #studio-hero-stats:focus-visible { outline:2px solid var(--studio-amber); outline-offset:5px; border-radius:5px; }
  .studio-stats-hint { grid-column:1/-1; justify-self:end; color:var(--studio-amber); font:700 13px var(--font-family),sans-serif; letter-spacing:.04em; text-shadow:0 2px 8px #000; }
  .studio-stats-hint::after { content:'⌃'; display:inline-block; margin-left:7px; transition:transform .35s ease; }
  #studio-stats-shell.expanded .studio-stats-hint::after { transform:rotate(180deg); }
  #studio-extra-stats { max-height:0; opacity:0; overflow:hidden; transform:translateY(10px); transition:max-height .42s cubic-bezier(.2,.75,.2,1),opacity .3s ease,transform .42s ease,margin-bottom .42s ease; margin-bottom:0; }
  #studio-stats-shell.expanded #studio-extra-stats { max-height:min(250px,40vh); overflow-y:auto; scrollbar-width:thin; scrollbar-color:rgba(237,198,141,.45) transparent; opacity:1; transform:translateY(0); margin-bottom:12px; }
  #studio-extra-stats::-webkit-scrollbar { width:4px; }
  #studio-extra-stats::-webkit-scrollbar-thumb { background:rgba(237,198,141,.45); border-radius:4px; }
  .studio-extra-heading { padding-bottom:7px; margin-bottom:9px; border-bottom:1px solid rgba(237,198,141,.5); color:var(--studio-amber); font:700 14px var(--font-family),sans-serif; letter-spacing:.08em; }
  .studio-extra-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px 18px; }
  .studio-extra-grid .studio-extra-wide { grid-column:1/-1; }
  .studio-extra-grid .studio-stat-value { font-size:22px; }
  .studio-extra-grid .studio-multi-value { display:flex; flex-wrap:wrap; gap:2px 8px; align-items:baseline; overflow-wrap:anywhere; }
  .studio-extra-grid .studio-extra-unit { color:#d4e0e0; font:700 14px var(--font-family),sans-serif; white-space:nowrap; }
  .studio-extra-grid .studio-extra-separator { color:rgba(212,224,224,.65); }
  .studio-extra-grid [data-input="in-radius"], .studio-extra-grid [data-input="in-drift"] { display:flex; flex-wrap:wrap; gap:0 3px; align-items:baseline; overflow-wrap:anywhere; }
  .studio-stat-label { font:700 15px/1.1 var(--font-family),sans-serif; letter-spacing:.035em; color:#d4e0e0; }
  .studio-stat-value { font:800 26px var(--font-family),sans-serif; color:#f1f4f4; }
  body[data-hud-layout="studio"].mode-appreciate #center-stage { opacity:0; visibility:hidden; pointer-events:none; }

  /* Edit: library / live card / tabbed inspector. All original controls stay in place. */
  body[data-hud-layout="studio"].mode-edit #garage-panel {
    top:18px !important; bottom:18px !important;
    height:calc(100dvh - 36px) !important; max-height:calc(100dvh - 36px) !important;
    width:242px !important;
  }
  body[data-hud-layout="studio"].mode-edit #garage-panel .garage-list,
  body[data-hud-layout="studio"].mode-edit #garage-panel #garage-search-results { grid-template-columns:1fr; }
  body[data-hud-layout="studio"].mode-edit #garage-panel .garage-item { height:85px; }
  body[data-hud-layout="studio"].mode-edit #garage-panel .garage-tools { flex-wrap:wrap; }
  body[data-hud-layout="studio"].mode-edit #garage-panel .garage-tools #g-search-input { flex-basis:100%; }
  #studio-inspector-switch { position:fixed; right:18px; top:69px; z-index:210; gap:3px; padding:4px; border:1px solid var(--studio-line); border-radius:15px; background:#151a1e; }
  body[data-hud-layout="studio"].mode-edit #studio-inspector-switch { display:flex; }
  body[data-hud-layout="studio"].mode-edit #panel-config,
  body[data-hud-layout="studio"].mode-edit #panel-visuals {
    left:auto !important; right:18px !important; top:121px; bottom:20px; width:286px;
    box-sizing:border-box; padding:16px; z-index:205; background:var(--studio-glass);
    border:1px solid var(--studio-line); border-radius:16px; transition:opacity .25s,transform .3s;
  }
  body[data-hud-layout="studio"].mode-edit[data-studio-inspector="config"] #panel-visuals,
  body[data-hud-layout="studio"].mode-edit[data-studio-inspector="visuals"] #panel-config {
    opacity:0; visibility:hidden; pointer-events:none; transform:translateX(24px);
  }
  body[data-hud-layout="studio"].mode-edit #center-stage {
    position:fixed; top:76px; bottom:20px; left:260px; right:330px; width:auto; max-width:none;
    display:flex; flex-direction:row; justify-content:safe center; align-items:center;
    overflow:auto; transform:none !important; z-index:10;
    padding-left:70px; box-sizing:border-box;
  }
  body[data-hud-layout="studio"].mode-edit #card { flex-shrink:0; }
  body[data-hud-layout="studio"].mode-edit #ext-expand-btn { right:340px; }

  /* Compare: preserve both animated cards and reserve a clear vehicle list. */
  body[data-hud-layout="studio"].mode-compare #center-stage {
    position:fixed; left:calc(clamp(285px,26vw,420px) + 40px); right:22px; top:76px; bottom:25px;
    display:flex; align-items:center; justify-content:safe center; width:auto; max-width:none;
    overflow:auto; transform:none !important;
  }
  body[data-hud-layout="studio"].mode-compare #center-stage #card { flex-shrink:0; }
  body[data-hud-layout="studio"].mode-compare[data-studio-compare-count="0"] #center-stage::before,
  body[data-hud-layout="studio"].mode-compare[data-studio-compare-count="1"] #center-stage::before {
    content:"从左侧车库选择两辆车进行对比"; position:absolute; top:10px; left:50%; transform:translateX(-50%);
    white-space:nowrap; padding:7px 14px; border:1px solid var(--studio-line); border-radius:20px;
    color:#e9c998; background:rgba(10,17,20,.88); font:600 13px var(--font-family),sans-serif;
  }
  body[data-hud-layout="studio"].mode-compare[data-studio-compare-count="1"] #center-stage::before { content:"已选择一辆，请从车库选择第二辆"; }

  /* The 3D canvas remains the live visual in appreciation mode. */
  body[data-hud-layout="studio"].mode-appreciate #model-stage { padding-left:80px; transition:padding-left .2s ease; }
  body[data-hud-layout="studio"].mode-appreciate #garage-panel:hover ~ #model-stage,
  body[data-hud-layout="studio"].mode-appreciate #garage-panel.force-expand ~ #model-stage {
    padding-left:clamp(285px,26vw,420px);
  }

  /* Ranking: compact filter shelf, leaderboard and a live leader visual. */
  body[data-hud-layout="studio"][data-hud-theme].mode-rank #ranking-stage {
    display:grid !important; grid-template-columns:minmax(0,2.65fr) minmax(320px,1fr); grid-template-rows:auto minmax(0,1fr);
    column-gap:22px; row-gap:12px; padding:70px 24px 22px !important;
    background:rgba(9,12,15,.97) !important;
  }
  body[data-hud-layout="studio"].mode-rank .rank-header-group {
    grid-column:1/-1; width:100% !important; max-width:none !important; margin:0 !important;
    display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.8fr); gap:9px;
    border:0; padding:0;
  }
  body[data-hud-layout="studio"] #rank-filter-tier,
  body[data-hud-layout="studio"] #rank-filter-cat { background:var(--studio-glass); border-color:var(--studio-line); }
  body[data-hud-layout="studio"] .hud-rank-settings.rank-config { grid-column:1/-1; background:var(--studio-glass); border-color:var(--studio-line); }
  body[data-hud-layout="studio"] #rank-result-count { grid-column:1/-1; text-align:left; padding-left:8px; }
  body[data-hud-layout="studio"] #ranking-list-container {
    grid-column:1; min-height:0; width:100% !important; max-width:none !important; margin:0 !important;
    padding:10px; border:1px solid var(--studio-line); border-radius:16px;
    background:rgba(20,24,28,.62); gap:9px;
  }
  body[data-hud-layout="studio"] .rank-item { gap:10px; padding-right:58px; min-height:47px; height:47px; }
  body[data-hud-layout="studio"] .rank-position { width:40px; flex-basis:40px; }
  body[data-hud-layout="studio"] .rank-car-name { width:clamp(180px,20vw,315px); font-size:max(15px,var(--rank-font-size)); }
  body[data-hud-layout="studio"] .rank-bar-area { margin-right:55px; }
  body[data-hud-layout="studio"] #studio-rank-hero {
    grid-column:2; display:flex; flex-direction:column; gap:7px; position:relative; min-height:0; overflow:hidden;
    padding:clamp(11px,1.35vh,18px); border:1px solid var(--studio-line); border-radius:18px;
    background:radial-gradient(ellipse at 62% 66%,rgba(181,190,193,.13),transparent 65%),rgba(18,22,25,.75);
  }
  .studio-rank-eyebrow { color:#e8c58f; font:700 12px var(--font-family),sans-serif; letter-spacing:.18em; }
  #studio-rank-title { margin-top:1px; color:#f0f3f3; font:800 clamp(27px,2.6vw,42px)/1 var(--font-family),sans-serif; overflow-wrap:anywhere; }
  #studio-rank-score { color:#edc68d; font:800 24px var(--font-family),sans-serif; }
  #studio-rank-context { color:#b9c6c9; font:700 15px/1.2 var(--font-family),sans-serif; overflow-wrap:anywhere; }
  #studio-rank-facts { display:flex; flex-wrap:wrap; gap:5px; margin:0; }
  #studio-rank-facts > span { padding:4px 8px; border:1px solid var(--studio-line); border-radius:8px; color:#e9c998; font:600 13px var(--font-family),sans-serif; background:rgba(255,255,255,.035); }
  #studio-rank-comparison { flex:1 1 auto; min-height:95px; display:flex; flex-direction:column; justify-content:center; gap:3px; padding:12px 15px; border:1px solid var(--studio-line); border-radius:12px; background:linear-gradient(135deg,rgba(237,198,141,.1),rgba(255,255,255,.025)); }
  .studio-rank-gap-label { color:#bfcecf; font:700 14px var(--font-family),sans-serif; letter-spacing:.08em; }
  #studio-rank-gap-value { color:var(--studio-amber); font:800 clamp(27px,2.3vw,42px)/1 var(--font-family),sans-serif; }
  #studio-rank-runner { color:#d4dfdf; font:700 15px/1.15 var(--font-family),sans-serif; overflow-wrap:anywhere; }
  #studio-rank-stats { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px; }
  #studio-rank-stats > div { min-width:0; padding:6px 8px; border:1px solid var(--studio-line); border-radius:10px; background:rgba(255,255,255,.035); }
  #studio-rank-stats .studio-stat-label { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:15px; font-weight:700; letter-spacing:.02em; }
  #studio-rank-stats .studio-stat-value { display:block; margin-top:1px; font-size:20px; }
}
@media (min-width:1280px) and (max-height:740px) {
  body[data-hud-layout="studio"] #studio-rank-hero { gap:4px; padding:10px; }
  body[data-hud-layout="studio"] #studio-rank-title { font-size:30px; }
  body[data-hud-layout="studio"] #studio-rank-facts > span { padding:2px 6px; }
  body[data-hud-layout="studio"] #studio-rank-stats > div { padding:3px 6px; }
  body[data-hud-layout="studio"] #studio-rank-comparison { min-height:52px; padding:5px 10px; }
  body[data-hud-layout="studio"] #studio-rank-gap-value { font-size:28px; }
}
@media (min-width:1280px) and (max-height:600px) {
  body[data-hud-layout="studio"] #studio-rank-hero { gap:2px; padding:8px; }
  body[data-hud-layout="studio"] #studio-rank-title { font-size:26px; }
  body[data-hud-layout="studio"] #studio-rank-stats { grid-template-columns:repeat(4,minmax(0,1fr)); gap:3px; }
  body[data-hud-layout="studio"] #studio-rank-stats .studio-stat-label { font-size:12px; }
  body[data-hud-layout="studio"] #studio-rank-stats .studio-stat-value { font-size:17px; }
  body[data-hud-layout="studio"] #studio-rank-comparison { min-height:0; padding:3px 7px; }
  body[data-hud-layout="studio"] #studio-rank-runner { font-size:12px; }
}
@media (min-width:769px) and (max-width:1180px) {
  body.mode-appreciate #hud-layout-switch { top:10px; left:20px; }
}

@media (max-width:768px) {
  #hud-layout-switch { top:58px; right:50%; transform:translateX(50%); z-index:8900; }
  #hud-layout-switch .hud-layout-caption { display:none; }
  body[data-hud-layout="studio"]:not(.mode-preview) #garage-panel .garage-tools { background:var(--garage-surface) !important; }
  body[data-hud-layout="studio"] .garage-panel.mobile-active { z-index:9000; }
  body[data-hud-layout="studio"] #ranking-stage { padding-top:110px; }
  body[data-hud-layout="studio"] #ranking-list-container { width:100% !important; }
  body[data-hud-layout="studio"] .rank-car-name { width:42vw; }
}
@media (max-width:450px) { #hud-layout-switch { top:61px; } #hud-layout-switch button { padding:5px 10px; } }
@media (prefers-reduced-motion:reduce) { #hud-layout-switch *, #studio-inspector-switch * { transition:none !important; } }
@media (prefers-reduced-motion:reduce) { #studio-extra-stats, .studio-stats-hint::after { transition:none !important; } }

/* Portrait keeps the second layout across all modes. Leave scene controls alone. */
@media (orientation:portrait) {
  #hud-layout-switch { display:none !important; }
  body[data-hud-layout="studio"][data-hud-theme].mode-rank #ranking-stage {
    display:flex !important; flex-direction:column; height:100dvh !important;
    padding:58px 12px 12px !important;
  }
  body[data-hud-layout="studio"].mode-rank .rank-header-group {
    display:flex; flex-direction:column; flex:0 0 auto; gap:6px;
    width:100% !important; max-width:none !important; margin:0 0 5px !important;
    padding:0 !important; border:0;
  }
  body[data-hud-layout="studio"].mode-rank #ranking-list-container {
    flex:1 1 0; min-height:0; width:100% !important; max-width:none !important;
    margin:0 !important; padding:8px 8px 105px !important;
  }
  body[data-hud-layout="studio"].mode-rank #studio-rank-hero { display:none !important; }
  body[data-hud-layout="studio"].mode-rank #rank-result-count {
    padding:1px 4px !important; text-align:left; font-size:11px;
  }
  #rank-filter-tier, #rank-filter-cat {
    flex-wrap:nowrap !important; justify-content:flex-start; gap:4px !important;
    min-height:42px; padding:4px 5px !important;
    overflow-x:auto; overflow-y:hidden; scrollbar-width:thin;
    -webkit-overflow-scrolling:touch;
  }
  #rank-filter-tier::before, #rank-filter-cat::before {
    width:auto !important; min-width:29px; padding:0 !important;
    text-align:left !important; white-space:nowrap;
  }
  .rank-filter-row .rank-btn {
    flex:0 0 auto !important; min-width:0 !important;
    min-height:30px; padding:4px 8px !important; white-space:nowrap;
  }
  .hud-rank-settings.rank-config { padding:5px 7px !important; }
  .hud-rank-settings .hud-rank-heading {
    display:flex; width:100%; min-height:31px; padding:3px 5px; margin:0;
    border:0; background:transparent; color:var(--hud-ink);
    font:800 13px var(--font-family); text-align:left; cursor:pointer;
  }
  .hud-rank-chevron {
    display:block; width:7px; height:7px; margin-left:auto;
    border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor;
    transform:rotate(45deg); transition:transform .2s ease;
  }
  .hud-rank-settings.is-open .hud-rank-chevron { transform:rotate(225deg); }
  .hud-rank-settings:not(.is-open) .hud-rank-grid { display:none !important; }
  .hud-rank-settings .hud-rank-grid {
    grid-template-columns:repeat(2,minmax(0,1fr)); gap:5px; padding:5px 0 2px;
  }
  .hud-rank-grid .hud-select-trigger { min-height:42px !important; padding:4px 27px 4px 8px !important; }
  .hud-rank-grid > .hud-select:last-child { grid-column:1/-1; }
  .hud-rank-grid .hud-select-label { font-size:10px; }
  .hud-rank-grid .hud-select-value { font-size:12px; margin-top:1px; }

  /* Keep the primary Nitro Speed value visible even when a car has extra values. */
  #row-nitro-speed { gap:8px; }
  /* The mobile .right-pane .editable rule gives every editable element
     width:100%. Do not let the label push the value outside the card. */
  #row-nitro-speed .ex-label {
    width:auto !important; flex:0 1 auto; min-width:0;
    white-space:normal; overflow-wrap:normal;
  }
  #nitro-val-wrapper {
    flex:1 1 0; min-width:0; max-width:none;
    flex-wrap:wrap; justify-content:flex-end;
    white-space:normal; overflow:visible;
  }
  #nitro-val-wrapper .ex-val {
    width:auto !important; flex:0 0 auto; white-space:nowrap !important;
  }
  #nitro-val-wrapper #val-nitro-speed {
    order:-1; flex:0 0 100%; text-align:right;
  }
  /* Long comparison titles need the stars to claim their own row. The saved
     per-car transform was authored for the wide desktop card. */
  body.mode-compare #card .header-section .stars {
    position:relative !important; left:auto !important; bottom:auto !important;
    transform:none !important; display:block; width:max-content; max-width:100%;
    margin:7px 0 5px; line-height:1.2; white-space:nowrap;
  }
}