:root {
  color-scheme: dark;
  --av-bg: #050a14;
  --av-navy: #091426;
  --av-lapis: #14284c;
  --av-pearl: #eef0ed;
  --av-mist: #a49acb;
  --av-mint: #78e6ba;
  --av-gold: #d4b66f;
  --av-line: #35465e;
  --av-display: "STSong", "Songti SC", "SimSun", Georgia, serif;
  --av-ui: "Microsoft YaHei", "PingFang SC", "Noto Sans CJK SC", sans-serif;
  --bg: var(--av-bg);
  --panel: #0b1422;
  --ink: var(--av-pearl);
  --muted: var(--av-mist);
  --line: var(--av-line);
  --soft: #101b2b;
  --blue: var(--av-mint);
  --teal: var(--av-mint);
  --orange: var(--av-gold);
  --green: var(--av-mint);
  --amber: var(--av-gold);
  --shadow: none;
}

html {
  background: var(--av-bg);
  scrollbar-color: #536681 #070d18;
}

body {
  min-width: 320px;
  margin: 0;
  color: var(--av-pearl);
  background: var(--av-bg);
  font-family: var(--av-ui);
}

button,
input,
textarea,
select {
  font: inherit;
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 2px solid var(--av-mint);
  outline-offset: 3px;
}

.hidden {
  display: none !important;
}

.app-shell {
  min-height: 100vh;
  display: grid;
  grid-template-columns: clamp(310px, 24.8vw, 382px) minmax(0, 1fr);
  background: var(--av-bg);
}

.platform-sidebar {
  position: sticky;
  top: 0;
  z-index: 30;
  width: auto;
  height: 100vh;
  min-height: 0;
  overflow: hidden;
  display: grid;
  grid-template-rows: auto auto auto auto;
  align-content: start;
  padding: 0;
  color: var(--av-pearl);
  background:
    radial-gradient(circle at 22% 12%, rgba(60, 101, 137, .17), transparent 25%),
    linear-gradient(155deg, #050d19 0%, #030812 66%, #080d17 100%);
  border: 0;
  border-right: 1px solid rgba(212, 182, 111, .58);
  box-shadow: 16px 0 46px rgba(0, 0, 0, .36);
}

.platform-sidebar::before,
.platform-sidebar::after {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
}

.platform-sidebar::before {
  inset: 0;
  opacity: .21;
  background:
    radial-gradient(ellipse at 8% 29%, transparent 0 31%, rgba(142, 183, 174, .21) 32% 33%, transparent 34%),
    repeating-linear-gradient(124deg, transparent 0 38px, rgba(151, 177, 184, .1) 39px 40px, transparent 41px 78px);
  mask-image: linear-gradient(to bottom, #000 3%, transparent 65%);
}

.platform-sidebar::after {
  width: 430px;
  height: 250px;
  left: -122px;
  bottom: 80px;
  opacity: .21;
  border: 1px solid rgba(120, 230, 186, .4);
  border-radius: 50%;
  transform: rotate(-14deg);
}

.sidebar-brand {
  min-height: 0;
  padding: 54px 48px 34px;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: end;
  gap: 7px 12px;
  background: transparent;
  border: 0;
  box-shadow: none;
}

.sidebar-brand .avalon-wordmark {
  grid-column: 1 / -1;
  width: fit-content;
  color: var(--av-pearl);
  font-family: var(--av-display);
  font-size: clamp(52px, 4.2vw, 64px);
  font-weight: 700;
  letter-spacing: .08em;
  line-height: 1;
}

.sidebar-brand > span {
  color: rgba(238, 240, 237, .68);
  font-family: var(--av-display);
  font-size: 22px;
  letter-spacing: .28em;
  white-space: nowrap;
}

.sidebar-brand > i {
  width: 13px;
  height: 13px;
  margin: 0 0 2px -7px;
  background: linear-gradient(135deg, var(--av-mint) 0 48%, var(--av-gold) 49% 100%);
  clip-path: polygon(0 46%, 100% 0, 53% 100%);
  filter: drop-shadow(0 0 8px rgba(120, 230, 186, .35));
}

.overview-link {
  width: calc(100% - 88px);
  min-height: 0;
  margin: 0 44px 28px;
  padding: 17px 0 27px;
  display: flex;
  align-items: center;
  gap: 12px;
  border: 0;
  border-bottom: 1px solid rgba(83, 103, 130, .62);
  border-radius: 0;
  color: var(--av-pearl);
  background: transparent;
  box-shadow: none;
  text-align: left;
  font-family: var(--av-display);
  font-size: 21px;
  letter-spacing: .16em;
  cursor: pointer;
  transition: color 180ms ease, padding-left 180ms ease;
}

.overview-link svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.25;
}

.overview-link:hover {
  padding-left: 6px;
  color: var(--av-mint);
  background: transparent;
  box-shadow: none;
}

.side-nav {
  display: grid;
  align-content: start;
  gap: 0;
}

.side-nav button {
  position: relative;
  width: 100%;
  min-height: 104px;
  display: grid;
  grid-template-columns: 64px 52px minmax(0, 1fr);
  align-items: center;
  gap: 20px;
  padding: 18px 34px 18px 44px;
  border: 0;
  border-radius: 0;
  color: rgba(238, 240, 237, .82);
  background: transparent;
  box-shadow: none;
  text-align: left;
  cursor: pointer;
  transition: color 180ms ease, background 180ms ease;
}

.side-nav button::after {
  content: "";
  position: absolute;
  inset: 20px 0 20px auto;
  width: 3px;
  background: transparent;
  transition: background 180ms ease, box-shadow 180ms ease;
}

.side-nav button:hover:not(:disabled) {
  color: var(--av-mint);
  background: rgba(255, 255, 255, .035);
  box-shadow: none;
}

.side-nav button.active {
  color: #07101d;
  background: linear-gradient(90deg, rgba(255,255,255,.98), rgba(238,240,237,.96) 76%, rgba(205,221,219,.9));
  box-shadow: 0 16px 36px rgba(0, 0, 0, .23);
}

.side-nav button.active::after {
  background: var(--av-mint);
  box-shadow: 0 0 18px rgba(120, 230, 186, .8);
}

.side-nav button:disabled {
  opacity: .42;
  cursor: not-allowed;
}

.nav-index {
  font-family: Georgia, var(--av-display);
  font-size: 52px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: -.05em;
}

.nav-icon {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 0;
  color: currentColor;
  background: transparent;
  box-shadow: none;
}

.nav-icon svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.45;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.nav-label {
  min-width: 0;
  overflow: hidden;
  color: currentColor;
  font-family: var(--av-display);
  font-size: 25px;
  font-weight: 600;
  letter-spacing: .16em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sidebar-footer {
  margin: 42px 44px 0;
  padding: 16px 0 25px;
  display: grid;
  grid-template-columns: 1fr;
  align-items: stretch;
  gap: 5px;
  border: 0;
  border-top: 1px solid rgba(83, 103, 130, .62);
  border-radius: 0;
  color: var(--av-pearl);
  background: transparent;
  box-shadow: none;
}

.sidebar-user {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 38px;
  padding: 0 8px 10px;
  overflow: hidden;
  color: rgba(238, 240, 237, .82);
  font-family: var(--av-display);
  font-size: 17px;
  letter-spacing: .06em;
  border-bottom: 1px solid rgba(83, 103, 130, .48);
}

.online-dot {
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--av-mint);
  box-shadow: 0 0 10px rgba(120, 230, 186, .6);
}

.sidebar-utility {
  position: relative;
  width: 100%;
  height: 39px;
  min-height: 39px;
  padding: 4px 8px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 15px;
  border: 0;
  border-radius: 0;
  color: rgba(238, 240, 237, .58);
  background: transparent;
  box-shadow: none;
  cursor: pointer;
}

.sidebar-utility span {
  position: static;
  width: auto;
  height: auto;
  overflow: visible;
  clip: auto;
  font-family: var(--av-display);
  font-size: 16px;
  letter-spacing: .1em;
}

.sidebar-utility svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.sidebar-utility:hover:not(:disabled) {
  color: var(--av-mint);
  background: transparent;
  box-shadow: none;
  transform: translateY(-2px);
}

.sidebar-utility:disabled {
  opacity: .72;
}

.app-frame {
  position: relative;
  min-width: 0;
  width: auto;
  min-height: 100vh;
  overflow: hidden;
  background: radial-gradient(circle at 88% 4%, rgba(115,145,170,.14), transparent 32%), linear-gradient(145deg, #0b1421, #080f1b 46%, #040914);
}

.app-shell[data-active-view="home"] .app-header,
.app-shell[data-active-view="home"] .app-status-bar {
  display: none;
}

.app-header {
  position: relative;
  z-index: 20;
  margin: 22px 30px 0;
  padding: 18px 22px;
  color: var(--av-pearl);
  background: rgba(7, 14, 25, .84);
  border: 1px solid rgba(83, 103, 130, .58);
  border-radius: 4px;
  box-shadow: none;
  backdrop-filter: blur(18px);
}

.app-header h1,
.workspace-head h2,
.workspace-head h3 {
  color: var(--av-pearl);
  font-family: var(--av-display);
}

.app-status-bar {
  position: relative;
  z-index: 20;
  margin: 0 30px;
  color: var(--av-mist);
  background: rgba(4, 9, 18, .88);
  border-color: rgba(83, 103, 130, .48);
}

.app-frame > main {
  position: relative;
  z-index: 1;
  min-width: 0;
  max-width: none;
  margin: 0;
  padding: 0;
}

.app-shell:not([data-active-view="home"]) .app-frame > main {
  padding: 24px 30px 54px;
}

.platform-home {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  display: block;
  padding: 0 52px 34px;
  color: var(--av-pearl);
  isolation: isolate;
}

.platform-home::before {
  content: "";
  position: absolute;
  z-index: -2;
  inset: 0;
  background:
    linear-gradient(116deg, rgba(21, 38, 58, .26), transparent 35%),
    radial-gradient(circle at 85% 7%, rgba(122, 151, 173, .13), transparent 29%),
    linear-gradient(145deg, #101a28 0%, #0b1320 44%, #070d17 100%);
}

.platform-home::after {
  content: "";
  position: absolute;
  z-index: -1;
  left: 0;
  right: 0;
  bottom: 0;
  height: 35%;
  opacity: .46;
  background:
    repeating-linear-gradient(176deg, transparent 0 14px, rgba(145,181,186,.1) 15px 16px, transparent 17px 31px),
    linear-gradient(to bottom, transparent, rgba(4,15,25,.75));
  mask-image: linear-gradient(to bottom, transparent, #000 32%);
}

.platform-hero {
  position: relative;
  min-height: 262px;
  display: grid;
  grid-template-columns: minmax(470px, .95fr) minmax(370px, 1.05fr);
  align-items: center;
  gap: 18px;
  margin: 0;
  padding: 45px 10px 10px 32px;
  overflow: visible;
  color: var(--av-pearl);
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.hero-copy {
  position: relative;
  z-index: 4;
  display: grid;
  justify-items: start;
}

.platform-hero h2 {
  margin: 0;
  color: var(--av-pearl);
  font-family: var(--av-display);
  font-size: clamp(49px, 4.35vw, 69px);
  font-weight: 600;
  line-height: 1.06;
  letter-spacing: .08em;
  text-shadow: 0 10px 34px rgba(0,0,0,.28);
}

.platform-hero p {
  max-width: 640px;
  margin: 20px 0 0;
  color: var(--av-mist);
  font-family: var(--av-display);
  font-size: clamp(17px, 1.52vw, 23px);
  line-height: 1.65;
  letter-spacing: .08em;
}

.avalon-create-link {
  position: relative;
  min-height: 0;
  margin: 34px 0 0;
  padding: 0 4px 8px 0;
  display: inline-flex;
  gap: 20px;
  border: 0;
  border-bottom: 1px solid rgba(120,230,186,.78);
  border-radius: 0;
  color: var(--av-mint);
  background: transparent;
  box-shadow: none;
  font-family: var(--av-display);
  font-size: 20px;
  letter-spacing: .2em;
  cursor: pointer;
  transition: color 180ms ease, gap 180ms ease, text-shadow 180ms ease;
}

.avalon-create-link:hover {
  gap: 30px;
  color: #b4f8d9;
  background: transparent;
  box-shadow: none;
  text-shadow: 0 0 16px rgba(120,230,186,.42);
}

.avalon-create-link::after {
  content: "";
  position: absolute;
  left: calc(100% + 20px);
  top: 48%;
  width: min(290px, 23vw);
  height: 1px;
  background: linear-gradient(90deg, rgba(212,182,111,.92), rgba(212,182,111,.34) 78%, transparent);
  pointer-events: none;
}

.avalon-create-link span:last-child {
  font-family: Georgia, serif;
  font-size: 27px;
  line-height: .8;
}

.avalon-hero-art {
  position: relative;
  align-self: stretch;
  min-height: 260px;
  pointer-events: none;
}

.avalon-hero-art svg {
  position: absolute;
  width: min(760px, 62vw);
  height: auto;
  right: -76px;
  top: -92px;
  overflow: visible;
  filter: drop-shadow(0 18px 38px rgba(0,0,0,.34));
}

.moon-orbit {
  fill: none;
  stroke: rgba(238, 240, 237, .83);
  stroke-width: 3.2;
  stroke-linecap: round;
}

.bell-flowers {
  fill: rgba(125, 174, 172, .06);
  stroke: rgba(207, 221, 218, .78);
  stroke-width: 1.55;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.avalon-tools {
  position: relative;
  z-index: 3;
}

.avalon-section-title,
.avalon-bottom-title {
  display: flex;
  align-items: center;
  gap: 13px;
  color: var(--av-pearl);
}

.avalon-section-title {
  margin: 0 0 14px;
}

.avalon-section-title::before {
  content: none !important;
}

.avalon-section-title > span,
.avalon-bottom-title > span {
  color: var(--av-gold);
  font-family: Georgia, serif;
  font-size: 23px;
  text-shadow: 0 0 16px rgba(212,182,111,.35);
}

.avalon-section-title h2,
.avalon-bottom-title h2 {
  margin: 0;
  color: var(--av-pearl);
  font-family: var(--av-display);
  font-weight: 500;
  letter-spacing: .2em;
}

.avalon-section-title h2 {
  font-size: 29px;
}

.avalon-tool-list {
  overflow: hidden;
  border-top: 1px solid var(--av-line);
  border-bottom: 1px solid var(--av-line);
}

.avalon-tool-row {
  position: relative;
  min-height: 128px;
  display: grid;
  grid-template-columns: 124px minmax(0, 1fr) auto;
  align-items: center;
  gap: 26px;
  padding: 19px 30px 19px 23px;
  border: 0;
  border-bottom: 1px solid rgba(53,70,94,.9);
  background: transparent;
  transition: background 180ms ease;
}

.avalon-tool-row:last-child {
  border-bottom: 0;
}

.avalon-tool-row::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: transparent;
}

.avalon-tool-row.current,
.avalon-tool-row:hover {
  background: linear-gradient(90deg, rgba(27,51,91,.98), rgba(17,36,67,.94) 70%, rgba(13,27,48,.8));
}

.avalon-tool-row.current::before,
.avalon-tool-row:hover::before {
  background: var(--av-mint);
  box-shadow: 0 0 20px rgba(120,230,186,.58);
}

.avalon-tool-icon {
  width: 86px;
  height: 86px;
  display: grid;
  place-items: center;
  justify-self: center;
  color: var(--av-gold);
  border: 1px solid rgba(212,182,111,.72);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(212,182,111,.08), transparent 70%);
}

.avalon-tool-icon svg {
  width: 66%;
  height: 66%;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.avalon-tool-copy {
  min-width: 0;
  display: grid;
  gap: 7px;
}

.avalon-tool-copy h3 {
  margin: 0;
  color: var(--av-pearl);
  font-family: var(--av-display);
  font-size: 27px;
  font-weight: 600;
  letter-spacing: .13em;
}

.avalon-tool-copy p {
  margin: 0;
  color: rgba(238,240,237,.64);
  font-size: 15px;
  letter-spacing: .09em;
}

.avalon-tool-copy > span {
  color: var(--av-mist);
  font-family: var(--av-display);
  font-size: 14px;
  letter-spacing: .08em;
}

.avalon-row-action {
  position: relative;
  min-width: 142px;
  min-height: 0;
  padding: 10px 0;
  display: inline-flex;
  justify-content: flex-end;
  gap: 17px;
  border: 0;
  border-radius: 0;
  color: var(--av-mint);
  background: transparent;
  box-shadow: none;
  font-family: var(--av-display);
  font-size: 20px;
  letter-spacing: .13em;
  cursor: pointer;
  transition: color 170ms ease, transform 170ms ease, text-shadow 170ms ease;
}

.avalon-row-action > span {
  font-family: Georgia, serif;
  font-size: 26px;
  line-height: .8;
}

.avalon-row-action:hover {
  color: #b4f8d9;
  background: transparent;
  box-shadow: none;
  transform: translateX(6px);
  text-shadow: 0 0 14px rgba(120,230,186,.35);
}

.avalon-home-bottom {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin-top: 22px;
  border-top: 1px solid rgba(53,70,94,.88);
}

.avalon-followup,
.avalon-update {
  min-width: 0;
  padding: 22px 30px 14px 18px;
}

.avalon-update {
  padding-left: 44px;
  border-left: 1px solid rgba(53,70,94,.88);
}

.avalon-bottom-title {
  margin-bottom: 18px;
}

.avalon-bottom-title h2 {
  font-size: 19px;
}

.avalon-bottom-title > span {
  font-size: 16px;
}

.avalon-bottom-content {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
}

.avalon-mini-icon {
  width: 40px;
  height: 40px;
  color: var(--av-gold);
}

.avalon-mini-icon svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.avalon-bottom-content h3 {
  overflow: hidden;
  margin: 0;
  color: var(--av-pearl);
  font-family: var(--av-display);
  font-size: 20px;
  font-weight: 500;
  letter-spacing: .09em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.avalon-bottom-content p,
.avalon-timestamp {
  margin: 5px 0 0;
  color: var(--av-mist);
  font-size: 13px;
  letter-spacing: .07em;
}

.avalon-progress {
  width: 125px;
  height: 2px;
  margin-top: 8px;
  overflow: hidden;
  background: rgba(83,103,130,.7);
}

.avalon-progress i {
  display: block;
  width: 68%;
  height: 100%;
  background: var(--av-mint);
  box-shadow: 0 0 10px rgba(120,230,186,.54);
}

.avalon-timestamp {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.avalon-timestamp i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--av-mint);
}

/* Existing editors retain their behavior, but share the new palette. */
.panel,
.workspace-head,
.design-target-panel,
.design-editor-shell,
.design-preview-section,
.design-doc-cover,
.design-entry-card,
.learning-topic-card,
.learning-step-card,
.learning-note,
.learning-summary,
.model-result-card,
.model-stat-card,
.tool-card,
.queue-card,
.status-card {
  color: var(--av-pearl);
  background: rgba(10,20,35,.92);
  border-color: rgba(65,86,113,.82);
  box-shadow: none;
}

.panel h2,
.panel h3,
.panel h4,
.design-entry-card h3,
.learning-topic-card h3,
.learning-step-card h3 {
  color: var(--av-pearl);
}

.muted,
.small,
.workspace-head p,
.section-title span {
  color: var(--av-mist);
}

input,
textarea,
select {
  color: var(--av-pearl);
  background: #08121f;
  border-color: rgba(72,94,122,.9);
}

input::placeholder,
textarea::placeholder {
  color: rgba(164,154,203,.56);
}

input:focus,
textarea:focus,
select:focus {
  border-color: var(--av-mint);
  box-shadow: 0 0 0 3px rgba(120,230,186,.1);
}

button.primary,
a.primary,
.link-button.primary {
  color: #07111c;
  background: var(--av-mint);
  border-color: var(--av-mint);
}

button.secondary,
a.secondary,
.link-button,
.ghost-button,
.icon-button {
  color: var(--av-pearl);
  background: rgba(18,34,56,.9);
  border-color: rgba(73,95,123,.9);
  box-shadow: none;
}

button.primary:hover,
a.primary:hover,
.link-button.primary:hover {
  background: #9cf1cf;
  border-color: #9cf1cf;
}

button.secondary:hover,
a.secondary:hover,
.link-button:hover,
.ghost-button:hover,
.icon-button:hover {
  color: var(--av-mint);
  background: #14243a;
  border-color: rgba(120,230,186,.48);
}

.table-wrap,
table,
th,
td {
  border-color: rgba(65,86,113,.72);
}

th {
  color: var(--av-mist);
  background: rgba(10,22,38,.96);
}

td,
code,
pre {
  color: var(--av-pearl);
}

pre,
code {
  background: #050c17;
}

.auth-gate {
  min-height: 100vh;
  background:
    radial-gradient(circle at 72% 14%, rgba(120,230,186,.1), transparent 22%),
    radial-gradient(circle at 20% 80%, rgba(164,154,203,.12), transparent 30%),
    linear-gradient(145deg, #0b1727, #030811 65%);
}

.login-panel {
  color: var(--av-pearl);
  background: rgba(6,14,26,.88);
  border: 1px solid rgba(212,182,111,.45);
  box-shadow: 0 30px 90px rgba(0,0,0,.45);
  backdrop-filter: blur(24px);
}

@media (max-width: 1180px) {
  .app-shell { grid-template-columns: 292px minmax(0, 1fr); }
  .sidebar-brand { padding-inline: 34px; }
  .overview-link { width: calc(100% - 68px); margin-inline: 34px; }
  .side-nav button { grid-template-columns: 54px 42px minmax(0,1fr); gap: 14px; min-height: 108px; padding-inline: 32px 24px; }
  .nav-index { font-size: 45px; }
  .nav-icon { width: 39px; height: 39px; }
  .nav-label { font-size: 21px; }
  .sidebar-footer { margin-inline: 34px; }
  .platform-home { padding-inline: 38px; }
  .platform-hero { grid-template-columns: minmax(410px,1fr) minmax(280px,.8fr); padding-left: 18px; }
  .avalon-tool-row { grid-template-columns: 104px minmax(0,1fr) auto; gap: 18px; }
  .avalon-tool-icon { width: 76px; height: 76px; }
}

@media (max-width: 900px) {
  .app-shell { display: block; }
  .platform-sidebar {
    position: relative;
    height: auto;
    min-height: 0;
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    border-right: 0;
    border-bottom: 1px solid rgba(212,182,111,.56);
  }
  .sidebar-brand { padding: 23px 26px 17px; }
  .avalon-wordmark { font-size: 29px; }
  .sidebar-brand > span { font-size: 10px; }
  .overview-link { align-self: center; justify-self: end; width: auto; margin: 0 26px 0 0; padding: 8px 0; border-bottom: 0; font-size: 16px; }
  .side-nav { grid-column: 1 / -1; grid-row: 2; grid-template-columns: repeat(4,minmax(0,1fr)); border-top: 1px solid rgba(53,70,94,.66); }
  .side-nav button { min-height: 82px; grid-template-columns: 31px minmax(0,1fr); gap: 10px; padding: 12px 14px; border-right: 1px solid rgba(53,70,94,.45); }
  .side-nav button:last-child { border-right: 0; }
  .nav-index { font-size: 26px; }
  .nav-icon { display: none; }
  .nav-label { font-size: 15px; letter-spacing: .08em; }
  .sidebar-footer { display: none; }
  .platform-home { min-height: auto; }
}

@media (max-width: 680px) {
  .sidebar-brand { padding-left: 18px; }
  .overview-link { margin-right: 18px; }
  .side-nav { overflow-x: visible; grid-template-columns: repeat(3,minmax(0,1fr)); scrollbar-width: none; }
  .side-nav::-webkit-scrollbar { display: none; }
  .platform-home { padding: 0 20px 28px; }
  .platform-hero { min-height: 292px; display: block; padding: 48px 4px 30px; isolation: isolate; }
  .platform-hero h2 { max-width: 290px; font-size: 45px; }
  .platform-hero p { max-width: 320px; font-size: 16px; }
  .avalon-create-link { margin-top: 27px; font-size: 17px; }
  .avalon-hero-art { position: absolute; z-index: -1; inset: 0 -70px 0 auto; width: 76%; opacity: .48; }
  .avalon-hero-art svg { width: 520px; right: -135px; top: -55px; }
  .avalon-section-title h2 { font-size: 23px; }
  .avalon-tool-row { min-height: 0; grid-template-columns: 70px minmax(0,1fr); gap: 15px; padding: 22px 8px 20px 12px; }
  .avalon-tool-icon { width: 62px; height: 62px; }
  .avalon-tool-copy h3 { font-size: 21px; }
  .avalon-tool-copy p { font-size: 13px; line-height: 1.55; }
  .avalon-row-action { grid-column: 2; justify-self: start; min-width: 0; padding: 3px 0; font-size: 16px; }
  .avalon-home-bottom { grid-template-columns: 1fr; }
  .avalon-followup,
  .avalon-update { padding: 22px 10px; }
  .avalon-update { border-top: 1px solid rgba(53,70,94,.88); border-left: 0; }
  .avalon-bottom-content { grid-template-columns: 40px minmax(0,1fr) auto; gap: 11px; }
  .avalon-bottom-content .avalon-row-action { grid-column: auto; font-size: 14px; }
  .app-header { margin: 14px 14px 0; }
  .app-status-bar { margin-inline: 14px; }
  .app-shell:not([data-active-view="home"]) .app-frame > main { padding: 18px 14px 42px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* ========================================================================== */
/* Avalon production artwork + viewport-ratio pass                            */
/* ========================================================================== */

.platform-sidebar {
  background-color: #030916;
  background-image: url("/static/assets/avalon/sidebar-botanical-v2.png");
  background-repeat: no-repeat;
  background-position: left bottom;
  background-size: 72% auto;
}

.platform-sidebar::before,
.platform-sidebar::after,
.platform-home::before,
.platform-home::after {
  content: none;
}

.platform-home {
  background-color: #030916;
  background-image: url("/static/assets/avalon/moonlit-main-v2.png");
  background-repeat: no-repeat;
  background-position: right top;
  background-size: auto 100%;
}

.avalon-hero-art {
  display: none;
}

.avalon-tool-icon,
.avalon-mini-icon {
  background-image: url("/static/assets/avalon/tool-medallions-v2.png");
  background-repeat: no-repeat;
  background-size: 300% 200%;
  border: 0;
  border-radius: 0;
  background-color: transparent;
  box-shadow: none;
  clip-path: circle(42% at 50% 50%);
}

.avalon-tool-icon svg,
.avalon-mini-icon svg {
  display: none;
}

.avalon-tool-row:nth-child(1) .avalon-tool-icon { background-position: 0 0; }
.avalon-tool-row:nth-child(2) .avalon-tool-icon { background-position: 50% 0; }
.avalon-tool-row:nth-child(3) .avalon-tool-icon { background-position: 100% 0; }
.avalon-followup .avalon-mini-icon { background-position: 0 100%; }
.avalon-update .avalon-mini-icon { background-position: 50% 100%; }

.app-shell:not(.hidden)[data-active-view="home"] ~ .site-footer {
  display: none;
}

@media (min-width: 901px) {
  body:has(.app-shell:not(.hidden)[data-active-view="home"]) {
    overflow: hidden;
  }

  .app-shell[data-active-view="home"] {
    width: 100%;
    height: 100dvh;
    min-height: 0;
    overflow: hidden;
    grid-template-columns: clamp(250px, 37.11vh, 380px) minmax(0, 1fr);
  }

  .app-shell[data-active-view="home"] .platform-sidebar,
  .app-shell[data-active-view="home"] .app-frame,
  .app-shell[data-active-view="home"] .app-frame > main,
  .app-shell[data-active-view="home"] .platform-home {
    height: 100dvh;
    min-height: 0;
  }

  .app-shell[data-active-view="home"] .platform-sidebar,
  .app-shell[data-active-view="home"] .platform-home {
    overflow: hidden;
  }

  .sidebar-brand {
    padding: clamp(28px, 5.27vh, 54px) clamp(30px, 4.69vh, 48px) clamp(12px, 2.54vh, 26px);
    gap: clamp(4px, .68vh, 7px) clamp(8px, 1.17vh, 12px);
  }

  .sidebar-brand .avalon-wordmark {
    font-size: clamp(48px, 7.03vh, 72px);
    letter-spacing: .1em;
    justify-self: center;
  }

  .sidebar-brand > span {
    font-size: clamp(15px, 2.15vh, 22px);
    letter-spacing: .26em;
    grid-column: 1 / -1;
    justify-self: center;
  }

  .sidebar-brand > span::after {
    content: "";
    display: inline-block;
    width: clamp(8px, 1.07vh, 11px);
    height: clamp(8px, 1.07vh, 11px);
    margin-left: clamp(6px, .78vh, 8px);
    background: linear-gradient(135deg, var(--av-mint) 0 48%, var(--av-gold) 49% 100%);
    clip-path: polygon(0 46%, 100% 0, 53% 100%);
  }

  .sidebar-brand > i {
    display: none;
  }

  .overview-link {
    width: calc(100% - clamp(60px, 8.59vh, 88px));
    margin: 0 clamp(30px, 4.3vh, 44px) clamp(14px, 2.73vh, 28px);
    padding: clamp(9px, 1.66vh, 17px) 0 clamp(15px, 2.64vh, 27px);
    gap: clamp(30px, 4.3vh, 44px);
    font-size: clamp(16px, 2.05vh, 21px);
    justify-content: flex-start;
  }

  .overview-link svg {
    width: clamp(18px, 2.34vh, 24px);
    height: clamp(18px, 2.34vh, 24px);
  }

  .side-nav button {
    min-height: clamp(66px, 9.28vh, 95px);
    height: clamp(66px, 9.28vh, 95px);
    grid-template-columns: clamp(42px, 6.25vh, 64px) clamp(34px, 5.08vh, 52px) minmax(0, 1fr);
    gap: 8px;
    padding: clamp(11px, 1.76vh, 18px) clamp(16px, 2.34vh, 24px) clamp(11px, 1.76vh, 18px) clamp(28px, 4.3vh, 44px);
  }

  .side-nav button:not(.active) .nav-icon {
    grid-column: 1;
    grid-row: 1;
  }

  .side-nav button:not(.active) .nav-index {
    grid-column: 2;
    grid-row: 1;
  }

  .side-nav button:not(.active) .nav-label {
    grid-column: 3;
    grid-row: 1;
    margin-left: 12px;
  }

  .side-nav button.active {
    min-height: clamp(72px, 10.16vh, 104px);
    height: clamp(72px, 10.16vh, 104px);
    grid-template-columns: clamp(84px, 8.79vh, 90px) minmax(0, 1fr);
    gap: clamp(16px, 2.34vh, 24px);
  }

  .side-nav button.active .nav-index {
    grid-column: 1;
    justify-self: center;
  }

  .side-nav button.active .nav-icon {
    display: none;
  }

  .side-nav button.active .nav-label {
    grid-column: 2;
  }

  .nav-index {
    font-size: clamp(37px, 5.08vh, 52px);
  }

  .nav-icon {
    width: clamp(32px, 4.49vh, 46px);
    height: clamp(32px, 4.49vh, 46px);
  }

  .nav-label {
    font-size: clamp(18px, 2.44vh, 25px);
    letter-spacing: .11em;
  }

  .sidebar-footer {
    margin: clamp(22px, 4.1vh, 42px) clamp(30px, 4.3vh, 44px) 0;
    padding: clamp(11px, 1.56vh, 16px) 0 clamp(17px, 2.44vh, 25px);
    gap: clamp(3px, .49vh, 5px);
  }

  .sidebar-user {
    min-height: clamp(27px, 3.71vh, 38px);
    padding: 0 clamp(5px, .78vh, 8px) clamp(7px, .98vh, 10px);
    font-size: clamp(13px, 1.66vh, 17px);
  }

  .sidebar-utility {
    height: clamp(30px, 3.81vh, 39px);
    min-height: clamp(30px, 3.81vh, 39px);
    gap: clamp(10px, 1.46vh, 15px);
  }

  .sidebar-utility svg {
    width: clamp(18px, 2.34vh, 24px);
    height: clamp(18px, 2.34vh, 24px);
  }

  .sidebar-utility span {
    font-size: clamp(13px, 1.56vh, 16px);
  }

  .platform-home {
    padding: 0 clamp(28px, 3.91vh, 40px) clamp(16px, 2.34vh, 24px);
  }

  .platform-hero {
    min-height: clamp(180px, 25.59vh, 262px);
    grid-template-columns: minmax(clamp(330px, 46.88vh, 480px), .96fr) minmax(0, 1.04fr);
    gap: clamp(10px, 1.76vh, 18px);
    padding: clamp(28px, 4.39vh, 45px) clamp(6px, .98vh, 10px) clamp(6px, .98vh, 10px) clamp(20px, 3.13vh, 32px);
  }

  .platform-hero h2 {
    font-size: clamp(42px, 7.23vh, 74px);
  }

  .hero-copy {
    align-self: start;
    padding-top: clamp(14px, 1.95vh, 20px);
  }

  .platform-hero p {
    margin-top: clamp(6px, .88vh, 9px);
    font-size: clamp(15px, 2.15vh, 22px);
    line-height: 1.5;
  }

  .avalon-create-link {
    margin-top: clamp(12px, 1.95vh, 20px);
    padding-bottom: clamp(5px, .78vh, 8px);
    font-size: clamp(16px, 1.95vh, 20px);
  }

  .avalon-create-link::after {
    width: min(290px, 22vw);
  }

  .avalon-section-title {
    margin-bottom: clamp(9px, 1.37vh, 14px);
    gap: clamp(9px, 1.27vh, 13px);
  }

  .avalon-section-title h2 {
    font-size: clamp(21px, 2.83vh, 29px);
  }

  .avalon-section-title > span {
    font-size: clamp(17px, 2.25vh, 23px);
  }

  .avalon-tool-row {
    min-height: 0;
    height: clamp(96px, 13.87vh, 142px);
    box-sizing: border-box;
    grid-template-columns: clamp(105px, 14.65vh, 150px) minmax(0, 1fr) auto;
    gap: clamp(13px, 2.54vh, 26px);
    padding: clamp(12px, 1.86vh, 19px) clamp(20px, 2.93vh, 30px) clamp(12px, 1.86vh, 19px) clamp(15px, 2.25vh, 23px);
  }

  .avalon-tools {
    margin-right: clamp(48px, 5.2vw, 80px);
  }

  .avalon-tool-icon {
    position: relative;
    width: clamp(76px, 10.16vh, 104px);
    height: clamp(76px, 10.16vh, 104px);
    overflow: visible;
    background-image: none;
    clip-path: none;
  }

  .avalon-tool-icon::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: clamp(105px, 14.65vh, 150px);
    height: clamp(105px, 14.65vh, 150px);
    transform: translate(-50%, -50%);
    background-image: url("/static/assets/avalon/tool-medallions-v2.png");
    background-repeat: no-repeat;
    background-size: 300% 200%;
    clip-path: circle(42% at 50% 50%);
  }

  .avalon-tool-row:nth-child(1) .avalon-tool-icon::before { background-position: 0 0; }
  .avalon-tool-row:nth-child(2) .avalon-tool-icon::before { background-position: 50% 0; }
  .avalon-tool-row:nth-child(3) .avalon-tool-icon::before { background-position: 100% 0; }

  .avalon-tool-copy {
    gap: clamp(4px, .68vh, 7px);
  }

  .avalon-tool-copy h3 {
    font-size: clamp(20px, 2.64vh, 27px);
  }

  .avalon-tool-copy p {
    font-size: clamp(12px, 1.46vh, 15px);
  }

  .avalon-tool-copy > span {
    font-size: clamp(11px, 1.37vh, 14px);
  }

  .avalon-row-action {
    min-width: clamp(102px, 13.87vh, 142px);
    font-size: clamp(16px, 1.95vh, 20px);
  }

  .avalon-home-bottom {
    margin-top: 0;
    grid-template-columns: 47% 53%;
  }

  .avalon-followup,
  .avalon-update {
    padding: clamp(14px, 2.15vh, 22px) clamp(20px, 2.93vh, 30px) clamp(9px, 1.37vh, 14px) clamp(12px, 1.76vh, 18px);
  }

  .avalon-update {
    padding-left: clamp(28px, 4.3vh, 44px);
  }

  .avalon-bottom-title {
    margin-bottom: clamp(10px, 1.76vh, 18px);
  }

  .avalon-bottom-title h2 {
    font-size: clamp(15px, 1.86vh, 19px);
  }

  .avalon-bottom-content {
    grid-template-columns: clamp(50px, 7.03vh, 72px) minmax(0, 1fr) auto;
    gap: clamp(11px, 1.56vh, 16px);
  }

  .avalon-mini-icon {
    width: clamp(72px, 10.16vh, 104px);
    height: clamp(72px, 10.16vh, 104px);
    transform: translateX(max(-24px, -2.34vh));
  }

  .avalon-bottom-content h3 {
    font-size: clamp(15px, 1.95vh, 20px);
  }

  .avalon-bottom-content p,
  .avalon-timestamp {
    font-size: clamp(10px, 1.27vh, 13px);
  }

  .avalon-progress {
    width: clamp(88px, 12.21vh, 125px);
  }

  .avalon-progress i {
    background: var(--av-gold);
    box-shadow: 0 0 10px rgba(212,182,111,.5);
  }
}

@media (min-width: 901px) and (min-height: 801px) {
  .platform-hero {
    min-height: min(27.83vh, 285px);
  }

  .hero-copy {
    padding-top: min(3.42vh, 35px);
  }

  .platform-hero p {
    margin-top: min(.88vh, 9px);
  }

  .avalon-create-link {
    margin-top: min(.1vh, 1px);
  }

  .avalon-section-title {
    margin-bottom: min(.2vh, 2px);
  }
}

@media (min-width: 901px) and (max-height: 800px) {
  .sidebar-brand {
    padding-top: 38px;
    padding-bottom: 10px;
  }

  .sidebar-brand .avalon-wordmark {
    font-size: 56px;
  }

  .overview-link {
    margin-bottom: 8px;
  }

  .side-nav button {
    min-height: 66px;
    height: 66px;
  }

  .side-nav button.active {
    min-height: 72px;
    height: 72px;
  }

  .hero-copy {
    padding-top: 24px;
  }

  .platform-hero {
    min-height: 172px;
  }

  .platform-hero h2 {
    font-size: 50px;
  }

  .avalon-create-link {
    margin-top: -4px;
  }

  .avalon-section-title {
    margin-bottom: 0;
  }

  .avalon-tool-row {
    height: 100px;
  }

  .avalon-home-bottom {
    margin-top: 0;
  }
}

@media (max-width: 900px) {
  .platform-sidebar {
    background-position: left 34%;
    background-size: 100% auto;
  }

  .platform-home {
    background-position: 56% top;
    background-size: auto 680px;
  }
}

@media (max-width: 680px) {
  .avalon-tool-icon {
    width: 72px;
    height: 72px;
  }

  .avalon-mini-icon {
    width: 46px;
    height: 46px;
  }
}

/* ========================================================================== */
/* IFELF UI design tokens + optically centered tool medallions                 */
/* ========================================================================== */

:root {
  --ui-sidebar-vh: 37.11;
  --ui-content-gutter-vh: 3.91;
  --ui-tools-right-vw: 5.2;
  --ui-hero-title-vh: 7.23;
  --ui-row-height-vh: 13.87;
  --ui-icon-planner-frame-px: 112px;
  --ui-icon-planner-frame-vh: 10.9375vh;
  --ui-icon-planner-frame-short-px: 80.64px;
  --ui-icon-planner-scale: .92;
  --ui-icon-planner-x: -3px;
  --ui-icon-planner-y: 1px;
  --ui-icon-validator-frame-px: 112px;
  --ui-icon-validator-frame-vh: 10.9375vh;
  --ui-icon-validator-frame-short-px: 80.64px;
  --ui-icon-validator-scale: .9;
  --ui-icon-validator-x: 0px;
  --ui-icon-validator-y: 0px;
  --ui-icon-prototype-frame-px: 112px;
  --ui-icon-prototype-frame-vh: 10.9375vh;
  --ui-icon-prototype-frame-short-px: 80.64px;
  --ui-icon-prototype-scale: .88;
  --ui-icon-prototype-x: 0px;
  --ui-icon-prototype-y: 0px;
}

.avalon-tool-icon[data-icon] {
  --icon-frame-px: 112px;
  --icon-frame-vh: 10.9375vh;
  --icon-frame-short-px: 80.64px;
  --icon-glyph-scale: 1;
  --icon-glyph-x: 0px;
  --icon-glyph-y: 0px;
  color: var(--av-pearl);
  background: none;
  border: 0;
  border-radius: 50%;
  clip-path: none;
  overflow: visible;
}

.avalon-tool-icon[data-icon="planner"] {
  --icon-frame-px: var(--ui-icon-planner-frame-px);
  --icon-frame-vh: var(--ui-icon-planner-frame-vh);
  --icon-frame-short-px: var(--ui-icon-planner-frame-short-px);
  --icon-glyph-scale: var(--ui-icon-planner-scale);
  --icon-glyph-x: var(--ui-icon-planner-x);
  --icon-glyph-y: var(--ui-icon-planner-y);
}

.avalon-tool-icon[data-icon="validator"] {
  --icon-frame-px: var(--ui-icon-validator-frame-px);
  --icon-frame-vh: var(--ui-icon-validator-frame-vh);
  --icon-frame-short-px: var(--ui-icon-validator-frame-short-px);
  --icon-glyph-scale: var(--ui-icon-validator-scale);
  --icon-glyph-x: var(--ui-icon-validator-x);
  --icon-glyph-y: var(--ui-icon-validator-y);
}

.avalon-tool-icon[data-icon="prototype"] {
  --icon-frame-px: var(--ui-icon-prototype-frame-px);
  --icon-frame-vh: var(--ui-icon-prototype-frame-vh);
  --icon-frame-short-px: var(--ui-icon-prototype-frame-short-px);
  --icon-glyph-scale: var(--ui-icon-prototype-scale);
  --icon-glyph-x: var(--ui-icon-prototype-x);
  --icon-glyph-y: var(--ui-icon-prototype-y);
}

.avalon-tool-icon[data-icon]::before {
  content: none !important;
}

.avalon-tool-icon[data-icon] svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  fill: none;
}

.avalon-tool-icon .icon-frame circle {
  stroke: var(--av-gold);
  stroke-width: 1.35;
  vector-effect: non-scaling-stroke;
}

.avalon-tool-icon .icon-frame circle + circle {
  stroke: var(--av-pearl);
  stroke-width: .75;
  opacity: .72;
}

.avalon-tool-icon .icon-glyph {
  transform-box: view-box;
  transform-origin: center;
  transform: translate(var(--icon-glyph-x), var(--icon-glyph-y)) scale(var(--icon-glyph-scale));
  stroke: currentColor;
  stroke-width: 1.55;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.avalon-tool-icon .icon-glyph .icon-accent {
  stroke: var(--av-gold);
}

.avalon-tool-row.current .avalon-tool-icon[data-icon] {
  filter: drop-shadow(0 0 8px color-mix(in srgb, var(--av-mint) 18%, transparent));
}

@media (min-width: 901px) {
  .app-shell[data-active-view="home"] {
    grid-template-columns: clamp(250px, calc(var(--ui-sidebar-vh) * 1vh), 380px) minmax(0, 1fr);
  }

  .platform-home {
    padding-right: clamp(28px, calc(var(--ui-content-gutter-vh) * 1vh), 72px);
    padding-left: clamp(28px, calc(var(--ui-content-gutter-vh) * 1vh), 72px);
  }

  .platform-hero h2 {
    font-size: clamp(42px, calc(var(--ui-hero-title-vh) * 1vh), 82px);
  }

  .avalon-tools {
    margin-right: clamp(0px, calc(var(--ui-tools-right-vw) * 1vw), 120px);
  }

  .avalon-tool-row {
    height: clamp(96px, calc(var(--ui-row-height-vh) * 1vh), 170px);
  }

  .avalon-tool-icon[data-icon] {
    width: var(--icon-frame-px);
    height: var(--icon-frame-px);
  }
}

@media (min-width: 901px) and (max-height: 800px) {
  .avalon-tool-icon[data-icon] {
    width: var(--icon-frame-short-px);
    height: var(--icon-frame-short-px);
  }
}