.b-screen {
  --b-forest: #123c2d;
  --b-forest-deep: #08281e;
  --b-leaf: #4f9e70;
  --b-lime: #b8e36e;
  --b-mint: #dff2e5;
  --b-cream: #f6f4ec;
  --b-ink: #10271e;
  --b-muted: #65766d;
  --b-line: rgba(18, 60, 45, .12);
  background: var(--b-cream);
  color: var(--b-ink);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.b-screen.a-screen {
  background:
    radial-gradient(circle at 88% 8%, rgba(184,227,110,.4), transparent 25%),
    linear-gradient(155deg, #d5e8d8 0%, #edf2e8 52%, #f6f4ec 100%);
}

.b-screen .a-home,
.b-screen .a-tree-page { position:relative; }

.b-screen .a-home > h1,
.b-screen .a-tree-head h1 {
  color:var(--b-forest-deep);
  font-size:34px;
  line-height:1;
  letter-spacing:-.045em;
}

.b-screen .a-home > h1::before,
.b-screen .a-tree-head h1::before {
  content:"PERSONAL IMPACT";
  display:block;
  margin-bottom:8px;
  color:var(--b-leaf);
  font-size:9px;
  font-weight:850;
  letter-spacing:.18em;
}

.b-screen .a-tree-head h1::before { content:"YOUR LIVING SCORE"; }

.b-screen .a-footprint-total {
  margin:22px 0 18px;
  padding:18px 19px;
  border:1px solid rgba(255,255,255,.64);
  border-radius:24px;
  background:rgba(255,255,255,.48);
  box-shadow:0 15px 34px rgba(28,70,48,.1);
  backdrop-filter:blur(14px);
}

.b-screen .a-footprint-total strong {
  color:var(--b-forest-deep);
  font-size:43px;
  font-weight:750;
}

.b-screen .a-footprint-total span {
  max-width:76px;
  color:#4e685a;
  font-size:10px;
  font-weight:700;
  text-align:right;
}

.b-screen .a-view-toggle {
  gap:4px;
  padding:4px;
  border:1px solid rgba(255,255,255,.72);
  border-radius:18px;
  background:rgba(255,255,255,.42);
}

.b-screen .a-view-toggle button {
  height:46px;
  border-radius:14px;
  background:transparent;
  color:#557065;
  font-size:12px;
  font-weight:750;
}

.b-screen .a-view-toggle button.active {
  background:var(--b-forest);
  color:white;
  box-shadow:0 8px 18px rgba(8,40,30,.22);
}

.b-screen .a-home-visual {
  min-height:205px;
  margin:16px 0 26px;
  padding:18px 16px 14px;
  overflow:hidden;
  border-radius:26px;
  background:linear-gradient(145deg,var(--b-forest) 0%,#1d5741 100%);
  box-shadow:0 18px 35px rgba(8,40,30,.18);
}

.b-screen .a-chart-labels,
.b-screen .a-calendar-head { color:rgba(255,255,255,.82); }
.b-screen .a-calendar-week { color:rgba(255,255,255,.5); }
.b-screen .a-calendar-grid button { background:rgba(255,255,255,.08); }
.b-screen .a-calendar-grid button.has-data { background:rgba(184,227,110,.18); }
.b-screen .a-calendar-grid button.has-data::after { background:var(--b-lime); }

.b-screen .a-history-head h2 {
  color:var(--b-forest-deep);
  font-size:25px;
  letter-spacing:-.03em;
}
.b-screen .a-history-head p { color:#65786e; }
.b-screen .a-history-head > span {
  background:var(--b-forest);
  color:white;
  font-weight:750;
}

.b-screen .a-trip-list { gap:10px; }
.b-screen .a-trip-card {
  position:relative;
  overflow:hidden;
  border:1px solid rgba(18,60,45,.09);
  border-radius:24px;
  background:rgba(255,255,255,.86);
  box-shadow:0 12px 28px rgba(20,55,39,.09);
}
.b-screen .a-trip-card::before {
  content:"";
  position:absolute;
  inset:0 auto 0 0;
  width:4px;
  background:linear-gradient(var(--b-lime),var(--b-leaf));
}
.b-screen .a-trip-head strong { color:var(--b-forest-deep); font-size:15px; }
.b-screen .a-trip-head > b { color:var(--b-leaf); font-size:13px; font-weight:850; }
.b-screen .a-segment-chain {
  gap:7px;
  border-color:var(--b-line);
  background:linear-gradient(90deg,transparent,rgba(223,242,229,.55),transparent);
}
.b-screen .a-segment-step {
  min-width:64px;
  padding:2px;
  border-radius:10px;
}
.b-screen .a-segment-icon {
  width:22px;
  height:22px;
  margin:0 3px 0 0;
  display:inline-grid;
  place-items:center;
  border-radius:8px;
  background:var(--b-mint);
  font-size:13px;
}
.b-screen .a-segment-arrow { color:var(--b-leaf); }
.b-screen .a-trip-foot > span { background:#edf3ee; }
.b-screen .a-trip-foot .synced { background:#dff2e5; color:#28704a; }

.b-screen.white-page { background:#f8f7f2; }
.b-screen .header-bar {
  position:relative;
  overflow:hidden;
  padding-bottom:30px;
  background:linear-gradient(145deg,var(--b-forest-deep),var(--b-forest));
}
.b-screen .header-bar::after {
  content:"";
  position:absolute;
  width:150px;
  height:150px;
  right:-48px;
  top:-64px;
  border-radius:50%;
  background:rgba(184,227,110,.16);
}
.b-screen .header-bar h1 { font-size:27px; letter-spacing:-.035em; }
.b-screen .a-manual { padding-top:18px; }
.b-screen .a-privacy-note {
  border:0;
  border-left:4px solid var(--b-leaf);
  border-radius:4px 18px 18px 4px;
  background:var(--b-mint);
}
.b-screen .a-privacy-note strong { color:var(--b-forest); }
.b-screen .a-section-title h2 { color:var(--b-forest-deep); letter-spacing:-.025em; }
.b-screen .a-section-title button {
  border:0;
  border-radius:13px;
  background:var(--b-forest);
  color:white;
  box-shadow:0 7px 16px rgba(8,40,30,.14);
}
.b-screen .a-segment-editor { counter-reset:b-segment; }
.b-screen .a-segment-editor article {
  counter-increment:b-segment;
  position:relative;
  border:1px solid var(--b-line);
  border-radius:20px;
  background:white;
  box-shadow:0 7px 20px rgba(20,55,39,.06);
}
.b-screen .a-segment-editor article::before {
  content:counter(b-segment,decimal-leading-zero);
  position:absolute;
  right:14px;
  bottom:9px;
  color:rgba(79,158,112,.1);
  font-size:38px;
  font-weight:850;
}
.b-screen .a-editor-head,
.b-screen .a-editor-fields { position:relative; z-index:1; }
.b-screen .a-editor-head button { background:#edf3ee; }
.b-screen .a-editor-fields select,
.b-screen .a-editor-fields input,
.b-screen .a-manual-fields select,
.b-screen .a-manual-fields input {
  border-color:#cbd8d0;
  border-radius:13px;
  background:#fbfcf9;
}
.b-screen .a-calculated-total {
  border-radius:20px;
  background:linear-gradient(135deg,var(--b-forest-deep),#245f45);
  box-shadow:0 14px 28px rgba(8,40,30,.18);
}
.b-screen .a-save-button {
  background:linear-gradient(100deg,var(--b-forest),#28684b);
  box-shadow:0 13px 25px rgba(8,40,30,.22);
}

.b-screen .a-tree-head button {
  border:1px solid rgba(255,255,255,.7);
  background:rgba(255,255,255,.48);
  color:var(--b-forest);
  backdrop-filter:blur(10px);
}
.b-screen .a-tree-hero {
  min-height:410px;
  margin:15px -4px 0;
  padding:12px 4px 0;
  border-radius:30px;
  background:radial-gradient(circle at 50% 34%,rgba(255,255,255,.76),rgba(255,255,255,0) 50%);
}
.b-screen .a-tree-hero > img {
  width:295px;
  height:275px;
  filter:drop-shadow(0 20px 20px rgba(42,83,54,.18));
}
.b-screen .a-tree-summary {
  margin-top:-25px;
  border:1px solid rgba(255,255,255,.78);
  border-radius:26px;
  background:rgba(255,255,255,.6);
  box-shadow:0 18px 36px rgba(20,55,39,.12);
  backdrop-filter:blur(15px);
}
.b-screen .a-tree-summary h2 { color:var(--b-forest-deep); font-size:21px; }
.b-screen .a-tree-summary strong { color:var(--b-forest); }
.b-screen .a-tree-summary span {
  display:inline-block;
  padding:4px 10px;
  border-radius:20px;
  background:var(--b-mint);
  color:#32704f;
}
.b-screen .a-tree-card {
  border:1px solid rgba(18,60,45,.08);
  border-radius:25px;
  background:rgba(255,255,255,.8);
  box-shadow:0 14px 30px rgba(20,55,39,.09);
}
.b-screen .a-tree-card > h2,
.b-screen .a-campus-title h2 { color:var(--b-forest-deep); letter-spacing:-.03em; }
.b-screen .a-stat-grid div {
  padding:15px;
  border:1px solid rgba(255,255,255,.75);
  border-radius:16px;
  background:linear-gradient(145deg,#e8f3ea,#f4f6ef);
}
.b-screen .a-stat-grid strong { color:var(--b-forest); font-size:19px; }
.b-screen .a-tree-card.campus { background:linear-gradient(155deg,#f8fbf6,#e8f3e9); }
.b-screen .a-campus-title select {
  border-color:#b8cabd;
  border-radius:14px;
  background:rgba(255,255,255,.82);
}
.b-screen .a-campus-tree {
  border:1px solid rgba(255,255,255,.8);
  border-radius:21px;
  background:linear-gradient(135deg,#d8eadb,#eef5e8);
}
.b-screen .a-campus-tree img { filter:drop-shadow(0 12px 12px rgba(42,83,54,.15)); }
.b-screen .a-campus-stats div { border:1px solid var(--b-line); border-radius:14px; }
.b-screen .a-campus-stats strong { color:var(--b-forest); font-size:15px; }
.b-screen .a-campus-modes span { border:1px solid var(--b-line); border-radius:12px; }
.b-screen .a-your-campus-impact {
  border-radius:16px;
  background:linear-gradient(110deg,var(--b-forest-deep),#285e45);
}
.b-screen .a-campus-privacy {
  border-left-color:var(--b-leaf);
  border-radius:3px 14px 14px 3px;
  background:rgba(223,242,229,.86);
}

.prototype-concept-b .bottom-nav {
  background:rgba(8,40,30,.94);
  box-shadow:0 -10px 30px rgba(8,40,30,.14);
  backdrop-filter:blur(14px);
}
.prototype-concept-b .nav-button { color:rgba(255,255,255,.52); }
.prototype-concept-b .nav-button.active { color:var(--b-lime,#b8e36e); }
.prototype-concept-b .fab {
  background:linear-gradient(145deg,#71b681,#3e8a61);
  box-shadow:0 8px 22px rgba(8,40,30,.35);
}

.b-screen .a-gallery-head > button { border:1px solid rgba(255,255,255,.75); background:rgba(255,255,255,.5); color:var(--b-forest); backdrop-filter:blur(10px); }
.b-screen .a-gallery-head h1 { color:var(--b-forest-deep); letter-spacing:-.045em; }
.b-screen .a-gallery-head p { color:var(--b-leaf); }
.b-screen .a-gallery-intro { border:1px solid rgba(255,255,255,.72); background:rgba(255,255,255,.48); backdrop-filter:blur(10px); }
.b-screen .a-tree-gallery-grid article { border-color:rgba(18,60,45,.09); border-radius:23px; background:rgba(255,255,255,.72); box-shadow:0 13px 27px rgba(20,55,39,.09); }
.b-screen .a-tree-gallery-grid article.active { border-color:var(--b-leaf); background:linear-gradient(145deg,#e1f0e5,#f5f7ef); }
.b-screen .a-tree-gallery-grid img { filter:drop-shadow(0 10px 10px rgba(42,83,54,.13)); }
.b-screen .a-tree-gallery-grid article.active > span { background:var(--b-forest); }
@media(max-width:720px) {
  .prototype-concept-b:has(.mobile-prototype-switcher.enabled) .a-home,
  .prototype-concept-b:has(.mobile-prototype-switcher.enabled) .a-tree-page { padding-top:58px; }
}
@media(max-width:420px) {
  .b-screen .a-home > h1,
  .b-screen .a-tree-head h1 { font-size:32px; }
  .b-screen .a-home { padding-left:20px; padding-right:20px; }
  .b-screen .a-footprint-total strong { font-size:38px; }
}

.b-screen .a-overview-head h1 { color:var(--b-forest-deep); letter-spacing:-.045em; }
.b-screen .a-overview-head p,.b-screen .a-overview-section-head p { color:var(--b-leaf); }
.b-screen .a-target-card { border-radius:26px; background:linear-gradient(135deg,var(--b-forest-deep),#245f45); box-shadow:0 16px 32px rgba(8,40,30,.2); }
.b-screen .a-target-top b { background:rgba(184,227,110,.16); color:var(--b-lime); }
.b-screen .a-target-track span { background:var(--b-lime); }
.b-screen .a-overview-stats div,.b-screen .a-overview-modes { border:1px solid rgba(18,60,45,.08); border-radius:20px; background:rgba(255,255,255,.78); box-shadow:0 10px 24px rgba(20,55,39,.07); }
.b-screen .a-mode-row i b { background:linear-gradient(90deg,var(--b-leaf),var(--b-lime)); }
.b-screen .a-dashboard { position:relative; }
.b-screen .a-dashboard-brand img { width:74px; height:74px; filter:drop-shadow(0 10px 13px rgba(23,55,36,.16)); }
.b-screen .a-dashboard-brand span { color:var(--b-leaf); }
.b-screen .a-dashboard-brand h1 { color:var(--b-forest-deep); font-size:27px; }
.b-screen .a-dashboard-avatar { border:1px solid rgba(255,255,255,.8); border-radius:16px; background:rgba(255,255,255,.58); color:var(--b-forest); box-shadow:0 8px 20px rgba(20,55,39,.08); backdrop-filter:blur(12px); }
.b-screen .a-dashboard-impact { border-radius:28px; background:linear-gradient(135deg,var(--b-forest-deep),#245f45); box-shadow:0 17px 34px rgba(8,40,30,.21); }
.b-screen .a-dashboard-impact > div:first-child > strong { font-size:38px; }
.b-screen .a-dashboard-change { background:rgba(255,255,255,.1); }
.b-screen .a-dashboard-actions { gap:10px; }
.b-screen .a-dashboard-actions button { min-height:88px; border:1px solid rgba(18,60,45,.08); border-radius:22px; background:rgba(255,255,255,.76); box-shadow:0 12px 25px rgba(20,55,39,.08); }
.b-screen .a-dashboard-actions button.primary { background:linear-gradient(145deg,#d9eddd,#eff5e8); }
.b-screen .a-dashboard-actions span { color:var(--b-leaf); }
.b-screen .a-dashboard-canopy { min-height:184px; border:1px solid rgba(255,255,255,.75); border-radius:28px; background:linear-gradient(145deg,rgba(255,255,255,.8),rgba(226,240,228,.76)); box-shadow:0 16px 32px rgba(20,55,39,.1); backdrop-filter:blur(12px); }
.b-screen .a-dashboard-canopy h2 { color:var(--b-forest-deep); font-size:25px; }
.b-screen .a-dashboard-canopy img { width:160px; height:168px; filter:drop-shadow(0 15px 13px rgba(39,74,49,.18)); }
.b-screen .a-dashboard-section-head h2 { color:var(--b-forest-deep); font-size:23px; letter-spacing:-.03em; }
.b-screen .a-dashboard-trip { border:1px solid rgba(18,60,45,.08); border-radius:20px; background:rgba(255,255,255,.82); box-shadow:0 9px 22px rgba(20,55,39,.07); }
.b-screen .a-dashboard-trip > b { color:var(--b-leaf); }
@media(max-width:720px) {
  .prototype-concept-b:has(.mobile-prototype-switcher.enabled) .a-dashboard { padding-top:58px; }
}
.b-screen .a-trip-card.compact { border-radius:21px; box-shadow:0 10px 24px rgba(20,55,39,.08); }
.b-screen .a-trip-card.compact .a-segment-chain { background:linear-gradient(90deg,transparent,rgba(223,242,229,.52),transparent); }
.b-screen .a-sync-state i { color:var(--b-leaf); }
.b-screen .a-overview-hero { border:1px solid rgba(255,255,255,.78); border-radius:29px; background:rgba(255,255,255,.7); box-shadow:0 16px 34px rgba(20,55,39,.1); backdrop-filter:blur(13px); }
.b-screen .a-overview-donut { filter:drop-shadow(0 10px 13px rgba(20,55,39,.14)); }
.b-screen .a-overview-donut::after { background:#f3f7ef; }
.b-screen .a-overview-center strong { color:var(--b-forest-deep); }
.b-screen .a-overview-target { border-radius:23px; background:linear-gradient(135deg,var(--b-forest-deep),#245f45); box-shadow:0 14px 29px rgba(8,40,30,.2); }
.b-screen .a-overview-target .a-target-track span { background:var(--b-lime); }
.b-screen .a-overview-target-head > span { color:var(--b-lime); }
.b-screen .a-mode-row .a-mode-track { background:#e3ebe4; }
.b-screen .a-tree-hero { min-height:calc(100svh - 170px); margin-top:10px; padding-top:0; }
.b-screen .a-tree-hero > img { width:min(350px,100%); height:clamp(330px,calc(100svh - 320px),485px); }
.b-screen .a-tree-summary { margin-top:-38px; }
@supports(height:100dvh) {
  .b-screen .a-tree-hero { min-height:calc(100dvh - 170px); }
  .b-screen .a-tree-hero > img { height:clamp(330px,calc(100dvh - 320px),485px); }
}
.b-screen .a-tree-hero { min-height:calc(100% - 44px); }
.b-screen .a-tree-hero > img { height:clamp(330px,50vh,445px); }
.b-screen .a-overview-toggle { border:1px solid rgba(255,255,255,.72); background:rgba(255,255,255,.45); }
.b-screen .a-overview-toggle button { color:var(--b-forest); }
.b-screen .a-overview-toggle button.active { background:var(--b-forest); color:white; box-shadow:0 7px 15px rgba(8,40,30,.18); }
.b-screen .a-overview-target.distance { background:linear-gradient(135deg,#174b37,#347354); }
.b-screen .a-overview-target.distance .a-target-track span { background:var(--b-lime); }
.b-screen .a-overview-target.distance .a-overview-target-head > span { color:var(--b-lime); }
/* Concept B: Metropolia visual identity */
.b-screen{--b-forest:#53565a;--b-forest-deep:#363e3c;--b-leaf:#ff5000;--b-lime:#fff000;--b-mint:#8ceba5;--b-cream:#f7f7f6;--b-ink:#363e3c;--b-muted:#53565a;--b-line:rgba(83,86,90,.16);--metro-orange:#ff5000;--metro-grey:#53565a;--metro-dark:#363e3c;--metro-yellow:#fff000;--metro-pink:#e384c4;--metro-mint:#8ceba5;--metro-concrete:#babbbd;background:#f7f7f6;color:var(--metro-dark)}
.b-screen.a-screen{background:linear-gradient(145deg,rgba(255,80,0,.09) 0 9%,transparent 9%),linear-gradient(35deg,transparent 78%,rgba(227,132,196,.13) 78%),linear-gradient(180deg,#f2f2f1 0%,#fff 50%,#f7f7f6 100%)}
.b-screen .a-home>h1,.b-screen .a-tree-head h1,.b-screen .a-overview-head h1,.b-screen .a-gallery-head h1,.b-screen .a-dashboard-brand h1,.b-screen .a-dashboard-canopy h2,.b-screen .a-dashboard-section-head h2,.b-screen .a-tree-card>h2,.b-screen .a-campus-title h2{color:var(--metro-dark)}
.b-screen .a-home>h1::before,.b-screen .a-tree-head h1::before{padding-left:9px;border-left:5px solid var(--metro-orange);color:var(--metro-grey)}
.b-screen .a-footprint-total{border:1px solid var(--b-line);border-top:6px solid var(--metro-orange);border-radius:18px;background:#fff;box-shadow:0 12px 26px rgba(54,62,60,.09);backdrop-filter:none}
.b-screen .a-footprint-total strong{color:var(--metro-dark);font-weight:800}.b-screen .a-footprint-total span{color:var(--metro-grey)}
.b-screen .a-view-toggle,.b-screen .a-overview-toggle{border:1px solid var(--b-line);border-radius:13px;background:#fff}
.b-screen .a-view-toggle button,.b-screen .a-overview-toggle button{border-radius:9px;color:var(--metro-dark)}
.b-screen .a-view-toggle button.active,.b-screen .a-overview-toggle button.active{background:var(--metro-orange);color:#fff;box-shadow:0 6px 14px rgba(255,80,0,.2)}
.b-screen .a-home-visual{border-radius:18px;background:linear-gradient(135deg,transparent 72%,rgba(255,240,0,.2) 72%),var(--metro-grey);box-shadow:0 15px 30px rgba(54,62,60,.17)}
.b-screen .a-line-chart path:first-of-type{stroke:rgba(255,255,255,.22)}.b-screen .a-line-chart path:nth-of-type(2){stroke:var(--metro-orange)}.b-screen .a-line-chart circle{fill:var(--metro-orange)}
.b-screen .a-calendar-grid button.has-data{background:rgba(255,240,0,.16)}.b-screen .a-calendar-grid button.has-data::after{background:var(--metro-yellow)}
.b-screen .a-history-head h2{color:var(--metro-dark)}.b-screen .a-history-head p{color:var(--metro-grey)}.b-screen .a-history-head>span{background:var(--metro-orange);color:#fff}
.b-screen .a-trip-card,.b-screen .a-dashboard-trip{border:1px solid var(--b-line);border-radius:17px;background:#fff;box-shadow:0 9px 22px rgba(54,62,60,.08)}
.b-screen .a-trip-card::before,.b-screen .a-dashboard-trip::before{width:5px;background:var(--metro-orange)}
.b-screen .a-trip-head strong,.b-screen .a-trip-head>b,.b-screen .a-dashboard-trip>b{color:var(--metro-dark)}
.b-screen .a-segment-chain{border-color:var(--b-line);background:linear-gradient(90deg,transparent,rgba(186,187,189,.14),transparent)}
.b-screen .a-segment-icon{border-radius:6px;background:rgba(140,235,165,.42)}.b-screen .a-segment-arrow,.b-screen .a-sync-state i{color:var(--metro-orange)}
.b-screen .a-trip-foot>span{background:#f1f1f0}.b-screen .a-trip-foot .synced{background:rgba(140,235,165,.35);color:var(--metro-dark)}
.b-screen .a-trip-card.compact,.b-screen .a-dashboard-trip{border-radius:16px;box-shadow:0 8px 19px rgba(54,62,60,.07)}
.b-screen.white-page{background:#f7f7f6}.b-screen .header-bar{background:linear-gradient(145deg,transparent 64%,rgba(255,240,0,.2) 64%),var(--metro-grey)}
.b-screen .header-bar::after{width:54px;height:145px;right:24px;top:-38px;border-radius:0;background:var(--metro-orange);transform:rotate(32deg);opacity:.95}
.b-screen .a-section-title h2{color:var(--metro-dark)}.b-screen .a-section-title button{border-radius:9px;background:var(--metro-orange);box-shadow:0 6px 14px rgba(255,80,0,.19)}
.b-screen .a-segment-editor article{border:1px solid var(--b-line);border-radius:15px;box-shadow:0 6px 17px rgba(54,62,60,.06)}.b-screen .a-segment-editor article::before{color:rgba(255,80,0,.09)}
.b-screen .a-editor-head button{background:#efefee}.b-screen .a-editor-fields select,.b-screen .a-editor-fields input,.b-screen .a-manual-fields select,.b-screen .a-manual-fields input{border-color:var(--metro-concrete);border-radius:9px;background:#fff}
.b-screen .a-calculated-total{border-radius:15px;border-left:7px solid var(--metro-yellow);background:var(--metro-grey);box-shadow:0 12px 25px rgba(54,62,60,.17)}
.b-screen .a-save-button{background:var(--metro-orange);box-shadow:0 11px 22px rgba(255,80,0,.22)}
.b-screen .a-tree-head button,.b-screen .a-gallery-head>button{border:1px solid var(--b-line);background:#fff;color:var(--metro-dark);box-shadow:0 6px 14px rgba(54,62,60,.06);backdrop-filter:none}
.b-screen .a-tree-hero{border-radius:22px;background:radial-gradient(circle at 50% 35%,#fff 0,rgba(255,255,255,.82) 36%,transparent 63%),linear-gradient(135deg,transparent 77%,rgba(140,235,165,.33) 77%)}
.b-screen .a-tree-hero>img{filter:drop-shadow(0 18px 18px rgba(54,62,60,.16))}
.b-screen .a-tree-summary{border:1px solid var(--b-line);border-top:6px solid var(--metro-orange);border-radius:18px;background:#fff;box-shadow:0 14px 29px rgba(54,62,60,.11);backdrop-filter:none}
.b-screen .a-tree-summary h2,.b-screen .a-tree-summary strong{color:var(--metro-dark)}.b-screen .a-tree-summary span{border-radius:6px;background:var(--metro-yellow);color:var(--metro-dark);font-weight:800}
.b-screen .a-tree-card{border:1px solid var(--b-line);border-radius:18px;background:#fff;box-shadow:0 11px 25px rgba(54,62,60,.08)}
.b-screen .a-stat-grid div{border:0;border-radius:12px;background:rgba(186,187,189,.2)}.b-screen .a-stat-grid div:nth-child(2){background:rgba(140,235,165,.32)}.b-screen .a-stat-grid div:nth-child(3){background:rgba(227,132,196,.25)}.b-screen .a-stat-grid div:nth-child(4){background:rgba(255,240,0,.28)}.b-screen .a-stat-grid strong{color:var(--metro-dark)}
.b-screen .a-tree-card.campus{background:linear-gradient(155deg,#fff,#f3f3f2)}.b-screen .a-campus-title select{border-color:var(--metro-concrete);border-radius:9px;background:#fff}
.b-screen .a-campus-tree{border:0;border-radius:15px;background:linear-gradient(135deg,rgba(140,235,165,.42),rgba(255,240,0,.14))}
.b-screen .a-campus-stats div{border:1px solid var(--b-line);border-radius:10px}.b-screen .a-campus-stats strong{color:var(--metro-dark)}.b-screen .a-campus-modes span{border:1px solid var(--b-line);border-radius:8px}
.b-screen .a-your-campus-impact{border-radius:12px;border-left:7px solid var(--metro-orange);background:var(--metro-grey)}
.b-screen .a-gallery-head p,.b-screen .a-overview-head p,.b-screen .a-overview-section-head p{color:var(--metro-grey)}
.b-screen .a-gallery-intro{border:1px solid var(--b-line);background:#fff;backdrop-filter:none}.b-screen .a-tree-gallery-grid article{border-color:var(--b-line);border-radius:16px;background:#fff;box-shadow:0 9px 22px rgba(54,62,60,.07)}
.b-screen .a-tree-gallery-grid article.active{border-color:var(--metro-orange);background:linear-gradient(145deg,rgba(255,80,0,.08),#fff)}.b-screen .a-tree-gallery-grid article.active>span{background:var(--metro-orange)}
.b-screen .a-overview-hero{border:1px solid var(--b-line);border-top:6px solid var(--metro-orange);border-radius:19px;background:#fff;box-shadow:0 13px 28px rgba(54,62,60,.09);backdrop-filter:none}
.b-screen .a-overview-donut{filter:drop-shadow(0 9px 12px rgba(54,62,60,.12))}.b-screen .a-overview-donut::after{background:#fff}.b-screen .a-overview-center strong{color:var(--metro-dark)}
.b-screen .a-overview-target,.b-screen .a-target-card{border-radius:16px;border-left:7px solid var(--metro-yellow);background:var(--metro-grey);box-shadow:0 11px 25px rgba(54,62,60,.16)}
.b-screen .a-overview-target.distance{border-left-color:var(--metro-mint);background:var(--metro-dark)}.b-screen .a-target-top b{background:rgba(255,240,0,.18);color:#fff}.b-screen .a-target-track span{background:var(--metro-orange)}
.b-screen .a-overview-target.distance .a-target-track span{background:var(--metro-mint)}.b-screen .a-overview-target-head>span,.b-screen .a-overview-target.distance .a-overview-target-head>span{color:#fff}
.b-screen .a-overview-stats div,.b-screen .a-overview-modes{border:1px solid var(--b-line);border-radius:15px;background:#fff;box-shadow:0 8px 20px rgba(54,62,60,.06)}
.b-screen .a-overview-stats div:nth-child(2){background:rgba(140,235,165,.23)}.b-screen .a-overview-stats div:nth-child(3){background:rgba(227,132,196,.17)}.b-screen .a-mode-row .a-mode-track{background:#e9e9e8}
.b-screen .a-dashboard-brand span{color:var(--metro-grey)}.b-screen .a-dashboard-avatar{border:0;border-radius:10px;background:var(--metro-grey);color:#fff;box-shadow:0 7px 17px rgba(54,62,60,.14);backdrop-filter:none}
.b-screen .a-dashboard-impact{border-radius:19px;background:linear-gradient(135deg,transparent 72%,rgba(255,240,0,.24) 72%),var(--metro-orange);box-shadow:0 14px 29px rgba(255,80,0,.21)}
.b-screen .a-dashboard-change{background:rgba(54,62,60,.2)}.b-screen .a-dashboard-actions button{border:0;border-radius:15px;background:rgba(227,132,196,.37);box-shadow:0 8px 20px rgba(54,62,60,.07)}
.b-screen .a-dashboard-actions button.primary{background:var(--metro-yellow)}.b-screen .a-dashboard-actions span{color:var(--metro-dark)}
.b-screen .a-dashboard-canopy{border:1px solid var(--b-line);border-radius:19px;background:linear-gradient(145deg,#fff 0 65%,rgba(140,235,165,.34) 65%);box-shadow:0 12px 27px rgba(54,62,60,.09);backdrop-filter:none}
.prototype-concept-b .bottom-nav{background:rgba(83,86,90,.97);box-shadow:0 -9px 25px rgba(54,62,60,.16);backdrop-filter:blur(12px)}
.prototype-concept-b .nav-button{color:rgba(255,255,255,.58)}.prototype-concept-b .nav-button.active{color:#fff000}.prototype-concept-b .fab{background:#ff5000;box-shadow:0 8px 22px rgba(255,80,0,.32)}

/* Concept B colors the shared history structure with its Metropolia palette. */
.b-screen .a-month-marker{color:var(--metro-dark)}.b-screen .a-month-marker i{background:var(--metro-concrete)}.b-screen .a-trip-date{border-radius:8px;background:rgba(140,235,165,.42)}.b-screen .a-trip-copy strong,.b-screen .a-trip-emission b{color:var(--metro-dark)}.b-screen .a-trip-chevron{border-radius:5px;background:var(--metro-yellow);color:var(--metro-dark)}.b-screen .a-trip-card.expanded{border-color:var(--metro-orange);box-shadow:0 12px 25px rgba(255,80,0,.12)}.b-screen .a-trip-detail-panel{border-color:var(--b-line)}.b-screen .a-trip-detail-panel>div{border-radius:7px;background:#f1f1f0}.b-screen .a-trip-detail-panel strong{color:var(--metro-dark)}.b-screen .a-trip-detail-panel button{border-radius:8px;background:var(--metro-orange)}
/* Concept B keeps the same tracking flow with Metropolia's sharper visual language. */
.b-screen .a-tracking-page{background:linear-gradient(135deg,rgba(255,80,0,.1) 0 11%,transparent 11%),linear-gradient(35deg,transparent 82%,rgba(140,235,165,.34) 82%),#f7f7f6}.b-screen .a-tracking-intro>span,.b-screen .a-track-how>span,.b-screen .a-track-review-head>div>span{color:var(--metro-orange)}.b-screen .a-tracking-intro h1,.b-screen .a-track-review-head h1,.b-screen .a-review-section-head h2{color:var(--metro-dark)}.b-screen .a-track-preview{border:0;border-radius:17px;background:linear-gradient(135deg,transparent 71%,rgba(255,240,0,.22) 71%),var(--metro-grey);box-shadow:0 15px 27px rgba(54,62,60,.18)}.b-screen .a-track-preview-orbit{border-radius:10px;border-color:rgba(255,255,255,.42)}.b-screen .a-track-preview-orbit::before,.b-screen .a-track-preview-orbit i{border-radius:5px}.b-screen .a-track-preview-orbit span{color:var(--metro-yellow)}.b-screen .a-track-how,.b-screen .a-review-route,.b-screen .a-review-summary{border-color:var(--b-line);border-radius:14px;background:#fff;box-shadow:0 8px 18px rgba(54,62,60,.06)}.b-screen .a-track-how b{border-radius:4px;background:var(--metro-yellow);color:var(--metro-dark)}.b-screen .a-track-start-actions .a-track-start,.b-screen .a-review-actions .primary{border-radius:9px;background:var(--metro-orange);box-shadow:0 9px 18px rgba(255,80,0,.2)}.b-screen .a-tracking-active{background:var(--metro-dark)}.b-screen .a-tracking-live{background:linear-gradient(135deg,rgba(255,80,0,.26) 0 19%,transparent 19%),var(--metro-dark)}.b-screen .a-track-live-head span{color:var(--metro-yellow)}.b-screen .a-track-map{border-radius:16px;border-color:rgba(255,240,0,.3);background:linear-gradient(135deg,rgba(140,235,165,.18),rgba(255,255,255,.03))}.b-screen .a-track-map::before,.b-screen .a-track-map::after{border-radius:8px}.b-screen .a-track-line{border-color:var(--metro-yellow);filter:drop-shadow(0 0 6px rgba(255,240,0,.65))}.b-screen .a-track-stop{border-radius:4px;background:var(--metro-yellow);color:var(--metro-dark)}.b-screen .a-track-stop::before{border-color:var(--metro-yellow);background:var(--metro-orange)}.b-screen .a-track-pulse{border-color:rgba(255,240,0,.25)}.b-screen .a-track-pulse i{background:var(--metro-yellow);box-shadow:0 0 0 3px var(--metro-orange)}.b-screen .a-track-live-card{border:0;border-radius:15px;background:#fff}.b-screen .a-track-live-card>b{border-radius:5px;background:var(--metro-mint);color:var(--metro-dark)}.b-screen .a-track-review-button{border-radius:9px;background:var(--metro-yellow);color:var(--metro-dark)}.b-screen .a-tracking-review{background:linear-gradient(135deg,rgba(227,132,196,.17) 0 11%,transparent 11%),#f7f7f6}.b-screen .a-track-review-head>button{border-color:var(--b-line);border-radius:6px;color:var(--metro-dark)}.b-screen .a-review-summary>b{border-radius:5px;background:var(--metro-mint);color:var(--metro-dark)}.b-screen .a-review-summary>b small{color:var(--metro-dark)}.b-screen .a-review-section-head>b{color:var(--metro-orange)}.b-screen .a-review-actions button{border-color:var(--metro-concrete);border-radius:8px;color:var(--metro-dark)}
/* Concept B translates the shared match signal into its Metropolia visual language. */
.b-screen .a-live-match{border-radius:8px;background:linear-gradient(135deg,transparent 54%,rgba(255,240,0,.56) 54%),var(--metro-mint);box-shadow:inset 0 0 0 1px rgba(54,62,60,.08)}.b-screen .a-live-match strong,.b-screen .a-live-match small{color:var(--metro-dark)}.b-screen .a-review-summary em{color:var(--metro-dark)}.b-screen .a-review-summary em i{background:var(--metro-orange);box-shadow:0 0 0 3px rgba(255,80,0,.14)}.b-screen .a-match-score{border-radius:9px;background:linear-gradient(135deg,transparent 56%,rgba(255,240,0,.76) 56%),var(--metro-mint);box-shadow:inset 0 0 0 1px rgba(54,62,60,.12)}.b-screen .a-match-score::after{border-radius:5px;border-color:rgba(54,62,60,.13)}.b-screen .a-match-score strong,.b-screen .a-match-score small{color:var(--metro-dark)}
/* Keep the editor return control legible in the Metropolia theme. */
.b-screen .a-manual-back{border-radius:7px;border-color:rgba(255,255,255,.34);background:var(--metro-yellow);color:var(--metro-dark)}