/* Trensval 1.1 — graphite / violet. All visual tokens live in this file. */
:root {
  color-scheme: dark;
  --page: #100e18;
  --paper: #1a1725;
  --surface: #211c30;
  --surface-hover: #2b2340;
  --line: #3b314f;
  --ink: #f3effb;
  --muted: #b4abc7;
  --accent: #c2a8ff;
  --accent-strong: #7c4bd4;
  --accent-soft: #2e2245;
  --teal: var(--accent);
  --teal-dark: #6840b2;
  --lime: #d5c2ff;
  --nav: #13101d;
  --good: #81dfba;
  --warn: #f3cd81;
  --bad: #ffa0ad;
  --shadow: 0 10px 30px #07040f26;
  scrollbar-color: #625273 #16121f;
}
html { background: var(--page); }
body { min-height: 100svh; background: radial-gradient(ellipse at 90% 0, #39215066, transparent 48%), var(--page); }
::selection { background: #704aae; color: white; }
:focus-visible { outline-color: var(--accent); }
input, select, textarea, input[type=search], #stationSearch { background: #14111e; color: var(--ink); border-color: #574766; }
input::placeholder, textarea::placeholder { color: #a297b6; opacity: 1; }
input[type=checkbox], input[type=radio] { accent-color: var(--accent-strong); }
button:disabled { cursor: not-allowed; }
.btn--primary { color: #fff; background: var(--accent-strong); border-color: #a17adb; box-shadow: 0 4px 12px #5f329e20; }
.btn--primary:hover { background: #6d40bb; }
.btn--lime { background: var(--lime); color: #251438; }
.btn--lime:hover, .navLinks .is-active:hover { background: #e4d6ff; color: #251438; }
.btn--ghost:hover { background: var(--surface-hover); }
.skipLink { color: #251438; }
.sidebar { background: linear-gradient(160deg, #1a1328, #100e18); color: #d4c9e4; border-right: 1px solid #342841; }
.brand span, .navCaption, .logoutForm button, .sidebarProgress { color: #c1b1d3; }
.brand img, img[src="/public/logo.png"] { background: #553183; }
.navLinks a:hover { background: #302340; color: white; }
.navLinks .is-active { background: #d5c2ff; color: #251438; }
.sidebarIdentity { border-color: var(--line); }
.sogavalReturn { display: flex; align-items: center; gap: .7rem; padding: .8rem; margin-top: 1.2rem; min-height: 44px; border: 1px solid #665077; border-radius: 12px; color: #e0cfee; font-size: .82rem; font-weight: 650; background: #201729; transition: background .15s; }
.sogavalReturn:hover { background: #352243; }
.sogavalReturn .icon { transform: rotate(180deg); width: 1.1rem; height: 1.1rem; }
.avatar, .podiumAvatar, .profileAvatar { background: var(--surface); }
.profileAvatar { border-color: var(--paper); }
.panel, .metric, .reviewCard, .trainCard, .tripPreview { border-color: var(--line); }
.panel { background: linear-gradient(145deg, #1d192a, var(--paper)); }
.metric, .trainCard, .reviewCard { background: #1c1828; }
.metric > strong { color: var(--ink); }
.placeTag { background: #201729ed; color: #f5eaff; border: 1px solid #c1a0df5c; }
.scoreBadge { color: #ead9ff; background: #3a2850; }
.trainCard:hover { border-color: #8c68b2; box-shadow: 0 10px 26px #08050e60; }
.railHero { background: linear-gradient(125deg, #291739, #1a1427); border: 1px solid #4d335e; }
.railHero__copy > p, .lineBadge, .heroLink { color: #ded0ed; }
.lineDot { background: #c6a2ff; box-shadow: 0 0 12px #ba8fff55; }
.lineBadge--light { border-color: #73598d; color: #d5baff; background: var(--accent-soft); }
.railHero__photo:after { background: linear-gradient(90deg, #29173966, transparent 42%); }
.railHero__photo figcaption { background: #160d24e8; }
.heroRoute { color: #cab3df; }
.heroRoute i { background: #775791; }
.heroRoute i:after { background: #23152f; border-color: #b697d0; }
.quickCard { background: #1b1627; }
.quickCard:hover { border-color: #796092; }
.quickCard > .icon:first-child, .stepNumber, .xpReward { background: var(--accent-soft); color: var(--accent); border-color: #5c4178; }
.journeyBanner { background: linear-gradient(110deg, #281c3a, #201829); border-color: #624579; }
progress { background: #3a304c; }
progress::-webkit-progress-bar { background: #3a304c; }
progress::-webkit-progress-value { background: linear-gradient(90deg, #8b5ad9, #d0b2ff); }
progress::-moz-progress-bar { background: linear-gradient(90deg, #8b5ad9, #d0b2ff); }
.sidebarProgress progress::-webkit-progress-value { background: #c8a4fa; }
.sidebarProgress progress::-moz-progress-bar { background: #c8a4fa; }
.profileHero, .trainHero, .podiumCard { background: var(--paper); }
.profileCover { background: radial-gradient(ellipse at 80% -10%, #8c4ac970, transparent 65%), linear-gradient(120deg, #271931, #472958); }
.achievementGrid { background: #21192e; }
.myPosition { background: #2c203d; border-color: #624c7b; }
.myPosition > div > span:not(.tierBadge) { color: var(--muted); }
.rankingTable th { background: #241c32; }
.rankingTable td { border-color: var(--line); }
.rankingTable .is-me { background: #302341; }
.rankingTable .reviewCount, .levelLabel { color: #d5bbfa; }
.podiumCard--first { background: linear-gradient(145deg, #463119, #261d23); border-color: #8d6b3a; }
.podiumCard--first .eyebrow, .podiumCard--first .podiumPlace { color: #f2d396; }
.podiumCard--first .smallText, .podiumCard--first .podiumNumbers span { color: #dac9b2; }
.podiumCard--first .podiumNumbers { border-color: #71543a; }
.podiumPlace { color: #c4afd9; }
.tierBadge { background: #30293c; color: #dbd1e9; border: 1px solid #514663; }
.tierBadge--teal { background: #183830; color: #94e7c8; border-color: #3b675b; }
.tierBadge--blue { background: #2b264c; color: #c9bafa; border-color: #605282; }
.tierBadge--violet { background: #352246; color: #dfb4fb; border-color: #765387; }
.tierBadge--amber { background: #3b2d1a; color: #f3d18e; border-color: #796139; }
.tierBadge--orange { background: #42281d; color: #ffbd91; border-color: #825237; }
.tierBadge--gold { background: #3b301b; color: #ffe19b; border-color: #8a7040; }
.streakTile .icon { color: #f0b87f; }
.helpButton { color: #dcc1ff; background: #332345; border-color: #79608f; }
.helpButton:hover { color: white; background: #503664; border-color: #a280bf; }
.confirmDialog { background: #1e172b; color: var(--ink); border-color: #614a78; box-shadow: 0 24px 100px #040208b3; }
.confirmDialog::backdrop { background: #090612cc; }
.confirmationSummary, .helpSnapshot, .savedTier { background: #2b1f3b; border-color: #634a7e; }
.helpSnapshot > p { color: #c6b4db; }
.rankGuideRow { background: #21192e; }
.rankGuideRow.is-current { background: #3b2852; border-color: #a680ce; box-shadow: inset 3px 0 0 #caa4f1; }
.rankGuideState, .dailyBonusList strong { color: #d8b8ff; }
.dailyBonusList li, .levelGuideTable thead { background: #2b203b; border-color: #514060; }
.notice, .flash { background: #2c203e; color: #e0c7ff; border-color: #755594; }
.notice--error, .flash--error { background: #421f31; color: #ffc0cc; border-color: #96546b; }
.notice--success, .flash--success { background: #19382f; color: #b0edcf; border-color: #487d68; }
.dialogBody #confirmError { color: #ffc0cc; }
.emptyState { border-color: #6a547d; }
.catalogNote { background: #2a1f39; border-color: #ba93e7; }
.trainHero figure, .trainCard__image, .tripPreview__photo { background: #252033; }
.trainHero figcaption { background: #241b31; }
.carCard, .carOption { background: #251c33; border-color: #5b436f; }
.carCard + .carCard:before { background: #76518a; }
.carOption.is-selected { background: #412b58; border-color: var(--accent); }
.stationChoice { background: #241b33; border-color: #665079; }
.stationChoice:hover { background: #302340; }
.originDot, .destinationDot { border-color: var(--accent); }
.destinationDot { background: var(--accent); }
.swapButton, .closeButton { background: #322341; color: #e0caff; border-color: #735b8a; }
.lineMapViewport { scrollbar-color: #806391 #21182d; }
.lineMap > li:after { background: #51425f; }
.stationNode__dot { background: #1c1427; border-color: #927d9f; }
.stationNode:hover { background: #38234866; }
.is-origin .stationNode__dot, .is-destination .stationNode__dot { box-shadow: 0 0 0 5px #4a305d; }
.stationResult { background: #1e172b; }
.stationResult:hover, .stationResult.is-selected { background: #352344; }
.stationIndex { background: #352640; color: #d0bbde; }
.demoBadge { color: #d1b3f4; background: #2c1d3d; border-color: #62467b; }

/* Native range/radio controls retain keyboard and touch behavior. */
.criteriaGrid { gap: 1.3rem; }
.criterion { position: relative; padding: 1rem; border: 1px solid #493756; border-radius: 16px; background: #20192b; }
.criterion legend { color: #eee2fc; font-weight: 700; font-size: .87rem; padding: 0 .4rem; }
.criterionHint { margin: .15rem 0 .7rem; min-height: 2.3rem; color: #bcb0cc; }
.sliderShell { --range-percent: 100%; position: relative; height: 82px; margin: 0; }
.sliderRail { position: absolute; left: 14px; right: 14px; top: 55px; height: 10px; border-radius: 99px; background: #42314f; box-shadow: inset 0 1px 4px #08040c80; overflow: hidden; pointer-events: none; }
.sliderFill { position: relative; height: 100%; width: var(--range-percent); border-radius: inherit; background: linear-gradient(90deg, #7342b6, #b085e9 65%, #dfbeff); transition: width 60ms linear; }
.sliderFill:after { content: ''; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 25%, #fff7 50%, transparent 75%); transform: translateX(-110%); }
.sliderShell.is-sliding .sliderFill:after { animation: railShine .55s ease-out; }
.sliderBubbleAnchor { position: absolute; left: 14px; right: 14px; top: 0; height: 34px; pointer-events: none; }
.sliderBubble { position: absolute; left: var(--range-percent); transform: translateX(-50%); min-width: 44px; padding: .25rem .55rem; border: 1px solid #ad80d2; border-radius: 10px; background: #402650; color: #f5e8ff; font-size: .85rem; line-height: 1.5; font-weight: 750; font-variant-numeric: tabular-nums; text-align: center; transition: left 60ms linear, background .15s, box-shadow .15s; }
.sliderBubble:after { content: ''; position: absolute; width: 6px; height: 6px; bottom: -4px; left: calc(50% - 3px); background: #402650; border-bottom: 1px solid #ad80d2; border-right: 1px solid #ad80d2; transform: rotate(45deg); }
.sliderShell:focus-within .sliderBubble, .sliderShell.is-sliding .sliderBubble { background: #603678; box-shadow: 0 0 18px #b56ee533; }
.sliderShell:focus-within .sliderBubble:after, .sliderShell.is-sliding .sliderBubble:after { background: #603678; }
input.ratingRange { appearance: none; -webkit-appearance: none; position: absolute; top: 38px; left: 0; width: 100%; height: 44px; padding: 0; margin: 0; background: transparent; border: 0; border-radius: 99px; cursor: pointer; touch-action: pan-y; }
.ratingRange::-webkit-slider-runnable-track { height: 10px; border: 0; background: transparent; border-radius: 99px; }
.ratingRange::-moz-range-track { height: 10px; border: 0; background: transparent; border-radius: 99px; }
.ratingRange::-moz-range-progress { background: transparent; }
.ratingRange::-webkit-slider-thumb { -webkit-appearance: none; width: 28px; height: 28px; margin-top: -9px; border-radius: 50%; border: 5px solid #e6cbff; background: #774699; box-shadow: 0 0 0 4px #ab70d722, 0 3px 8px #09031088; transition: box-shadow .15s; }
.ratingRange::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; border: 5px solid #e6cbff; background: #774699; box-shadow: 0 0 0 4px #ab70d722, 0 3px 8px #09031088; }
.ratingRange:active::-webkit-slider-thumb, .ratingRange:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 6px #bf88f044, 0 3px 8px #09031088; }
.ratingRange:focus-visible { outline: 2px solid #c9a4e9; outline-offset: 2px; }
.rangeEnds { padding: 0 .1rem; color: #beabc9; font-size: .7rem; }
.criterionFooter { margin-top: .9rem; padding-top: .7rem; border-top: 1px solid #493756; font-size: .72rem; }
.criterionState { color: #d3b8ee; font-weight: 650; }
.criterion[data-score-tone=bad] .criterionState { color: var(--bad); }
.criterion[data-score-tone=warn] .criterionState { color: var(--warn); }
.criterion[data-score-tone=good] .criterionState { color: var(--good); }
.criterionContribution { color: #b6a5c4; white-space: nowrap; font-size: .7rem; }
.criterionFooter output { color: #ead7fa; font-size: .78rem; }
.choiceGrid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: .5rem; min-height: 96px; align-content: center; }
.choicePill { position: relative; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: .45rem; min-height: 78px; padding: .7rem .35rem; border: 1px solid #64506e; border-radius: 12px; color: #c9b8d5; background: #271d33; font-size: .73rem; line-height: 1.35; font-weight: 600; text-align: center; cursor: pointer; transition: background .15s,border-color .15s,transform .15s; }
.choicePill:hover { background: #342541; border-color: #a680bb; }
.choicePill:active { transform: scale(.97); }
.choicePill input { position: absolute; width: 1px; height: 1px; margin: 0; padding: 0; opacity: 0; }
.choicePill .icon { border: 1px solid #796388; border-radius: 50%; padding: 2px; width: 20px; height: 20px; color: transparent; }
.choicePill:has(input:checked) { background: #442956; border-color: #c496e5; color: #f6e4ff; }
.choicePill:has(input:checked) .icon { background: currentColor; border-color: currentColor; }
.choicePill:has(input:checked) .icon path { stroke: #14231c; }
.choicePill:has(input:checked)[data-tone=good] { background: #1d3a31; border-color: #6fbc9c; color: #b6f1d8; }
.choicePill:has(input:checked)[data-tone=warn] { background: #42331f; border-color: #cfaa64; color: #ffe1a5; }
.choicePill:has(input:checked)[data-tone=bad] { background: #442432; border-color: #d17f97; color: #ffc2d2; }
.choicePill:has(input:checked) .icon { color: inherit; }
.choicePill:has(input:focus-visible) { outline: 3px solid var(--accent); outline-offset: 3px; }
.choicePill--legacy { grid-column: 1/-1; min-height: 48px; flex-direction: row; }
fieldset:disabled .choicePill, fieldset:disabled .ratingRange { cursor: not-allowed; }

@keyframes railShine { to { transform: translateX(110%); } }
@media(max-width:960px) {
  .sidebar { border-right: 0; border-bottom: 1px solid var(--line); }
  .sogavalReturn { grid-column: 1/-1; justify-content: center; margin-top: .35rem; padding: .5rem .85rem; min-height: 38px; font-size: .75rem; }
}
@media(max-width:700px) {
  .criteriaGrid { gap: 1.1rem; }
  .criterion { padding: .9rem; }
  .criterionHint { min-height: 0; }
  .choiceGrid { min-height: 90px; gap: .4rem; }
  .choicePill { min-height: 76px; font-size: .75rem; }
  .criterionFooter { font-size: .73rem; }
  .sliderShell { margin-top: 1rem; }
}
@media(prefers-reduced-motion:reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}