/* Stratosphere-inspired UI palette. Local screen colors, not official NIO hex specifications.
   Color-only layer: preserves the existing layout and font hierarchy. */
:root{
 --bg:#e9edf2;--paper:#fafbfd;--ink:#24374b;--muted:#677b8f;
 --line:#d7e0e8;--teal:#426a93;--teal-soft:#e7eef5;--nav:#1c3049;
 --shadow:0 12px 34px rgba(30,49,73,.045);
 --stratosphere:#426a93;--stratosphere-soft:#e7eef5;--cloud:#fafbfd;
}
body{background:linear-gradient(180deg,#f0f3f7 0%,#e9edf2 52%,#e7ecf2 100%);color:var(--ink)}
.rail{background:linear-gradient(180deg,#21364f 0%,#1b2e46 70%,#172a41 100%);color:#f4f7fb}
.brand b{color:#f4f7fb}.brand small{color:#b0c2d4}.mark i{background:#b6cfe2}
.brand .brand-model{display:block;margin-top:3px;font-size:10px;line-height:1.5;font-weight:500;letter-spacing:.02em;color:#b0c2d4;white-space:nowrap}
.intro h1 .title-model{display:inline-block;margin-left:12px;font-size:.56em;font-weight:500;letter-spacing:0;color:var(--stratosphere,#426a93);white-space:nowrap}
.rail nav button{color:#b6c7d8}.rail nav button span{color:#afcbe0}
.rail nav button.active,.rail nav button:hover{background:#344e69;border-color:#496682;color:#fff}
.rail-bottom{background:linear-gradient(135deg,#2c4662,#233b55);border-top-color:#47617b;color:#d9e3ed;border-radius:8px;padding:18px 12px 12px}
.rail-bottom small{color:#b1c5d8}.dot{background:#adc8de;box-shadow:0 0 0 4px #adc8de1f}
.topbar{background:#f7f9fc;border-bottom-color:var(--line)}
.card{background:var(--paper);border-color:var(--line)}
.primary{background:var(--stratosphere);border-color:var(--stratosphere);color:#fff}
.primary:hover{background:#345879;border-color:#345879}
.secondary,.button{color:#435e79;border-color:#ccd8e4;background:#fff}
.secondary:hover{background:#edf2f7}
.eyebrow,.section-no,.linkbtn{color:var(--stratosphere)}
.chip{background:var(--stratosphere-soft);color:#42678e}
.chip.outline{border-color:#d4dfea;color:#637f9b}
#experiment .simulator{border-color:#cad8e5}
#experiment .simulator .cabin{background:linear-gradient(155deg,#edf2f6,#e3ebf2);border-color:#d0dce7}
#experiment .simulator .seat,#experiment .simulator .seat.rear{background:#fafcfe;border-color:#c8d6e3}
#experiment .simulator .seat select,#experiment .simulator .seat.rear select{background:#eaf0f5;color:#3f5f7e;border-color:#d2deea}
#experiment .simulator .group-tabs button.active{border-bottom-color:#426a93;background:linear-gradient(0deg,#e7eef5,transparent);color:#375d84}
#experiment .decision-metrics{background:#e8eff6;border-top-color:#d5e1ec}
#experiment .decision-metrics strong{color:#345c83}
#experiment .decision-metrics small{color:#627d98}
#experiment .rating-card{background:#f1f5f9;border-color:#d4dfeb}
.score-choice.selected{background:#426a93;border-color:#426a93;color:#fff}
.ask-pill.ask-yes{background:#e4edf6;color:#365f89}
.participant-box input{border-color:#cddbe8;color:#416687}
.score-summary>div{background:#eef3f8;border-color:#d7e2ed}
.score-summary strong{color:#426a93}
.bar-track{background:#e9eff5}.bar-track i,.trend-bar,#history .scenario-card .jev-dot{background:#527da5}
.scenario-bar.compare .bar-track i,.trend-bar.llm,#history .scenario-card .compare-dot{background:#a5b9cc}
.bucket-stats{background:#edf3f8;color:#627e97}
dialog{background:#fafbfd;border-color:#d4dfea}dialog::backdrop{background:#192b41a8}
input,select,textarea{accent-color:#426a93}

/* The operation guide belongs to the quiet blue navigation rail. */
.rail-guide{flex-shrink:0;margin:24px 0;padding:17px 13px 18px;border:1px solid #708da52e;border-radius:10px;background:#aac9e207}
.rail-guide-heading{margin-bottom:20px}
.rail-guide-heading>span{display:block;font-size:8px;letter-spacing:.17em;color:#9db8cf;margin-bottom:6px}
.rail-guide-heading h2{margin:0;color:#e9f1f8;font-size:13px;font-weight:650;letter-spacing:.06em}
.rail-guide-list{margin:0;padding:0;list-style:none;display:grid;gap:22px}
.rail-guide-list li{display:grid;grid-template-columns:23px minmax(0,1fr);gap:10px;align-items:start;position:relative}
.rail-guide-list li:not(:last-child)::after{content:"";position:absolute;left:11px;top:31px;bottom:-13px;width:1px;background:#a8c7df26}
.rail-step-number{display:flex;align-items:center;justify-content:center;width:23px;height:23px;border:1px solid #93b3cf5c;border-radius:50%;background:#8eb5d51a;color:#c3d9ec;font-size:11px;font-weight:600;font-variant-numeric:tabular-nums}
.rail-guide-list h3{margin:3px 0 7px;color:#e2edf7;font-size:12px;line-height:1.5;font-weight:600;letter-spacing:.02em}
.rail-guide-list p{margin:0;color:#a8bdcf;font-size:11px;line-height:1.75;overflow-wrap:anywhere}
.rail-guide-list strong{color:#c9dfef;font-weight:500}
@media(min-width:901px) and (max-height:850px){
  .rail-guide{margin:16px 0;padding:11px}
  .rail-guide-heading{margin-bottom:12px}
  .rail-guide-heading>span{line-height:1.3}
  .rail-guide-heading h2{line-height:1.4}
  .rail-guide-list{gap:14px}
  .rail-guide-list li{grid-template-columns:21px minmax(0,1fr);gap:8px}
  .rail-step-number{width:21px;height:21px}
  .rail-guide-list h3{margin:2px 0 5px}
  .rail-guide-list p{line-height:1.6}
}
@media(min-width:901px) and (max-height:650px){.rail{overflow-y:auto}.rail-bottom{flex-shrink:0}}
@media(max-width:900px){
  .rail{flex-wrap:wrap}
  .rail-guide{flex-basis:100%;width:100%;margin:0;padding:14px 16px}
  .rail-guide-heading{display:flex;align-items:center;gap:10px;margin-bottom:13px}
  .rail-guide-heading>span{margin:0}
  .rail-guide-list{grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
  .rail-guide-list li{display:block}
  .rail-guide-list li:not(:last-child)::after{display:none}
  .rail-step-number{margin-bottom:7px;width:21px;height:21px}
  .rail-guide-list h3{margin:0 0 6px}
  .rail-guide-list p{line-height:1.65}
}
@media(max-width:650px){.rail-guide{margin-top:14px}.rail-guide-list{gap:12px}.rail-guide-list h3{font-size:11px}.rail-guide-list p{font-size:10px}}