/* Reference-inspired artwork stays beneath the existing HTML interface. */
.app-shell {
  background: #1b1d1f url('/assets/ink-landscape-white-v1.png') center center / cover no-repeat;
}
.main-panel { background: transparent; }
.sidebar {
  background: linear-gradient(180deg, rgba(12,14,16,.54), rgba(12,14,16,.68));
}
.settings-panel {
  background: linear-gradient(180deg, rgba(18,20,22,.26), rgba(18,20,22,.82) 48%, rgba(18,20,22,.9));
}
.topbar { background: rgba(15,17,19,.12); }
.stage-nav { background: rgba(15,17,19,.1); }
.welcome h1 {
  font-family: "Songti SC", "STSong", "SimSun", "Noto Serif CJK SC", serif;
  font-size: clamp(30px, 2.65vw, 41px);
  font-weight: 500;
  letter-spacing: 1.2px;
  color: #eeece9;
}
.welcome h1, .welcome-description, .welcome-features, .welcome-note,
.welcome .eyebrow { text-shadow: 0 2px 8px rgba(0,0,0,.6); }
.welcome-description { color: #d4d4d3; }
.welcome-note { color: #bec1c3; }
.brand-mark { position: relative; }
.brand-mark::after {
  content: "";
  position: absolute;
  width: 5px;
  height: 5px;
  bottom: 5px;
  right: 4px;
  border-radius: 1px;
  border: 1px solid #ba7168;
  background: #92473f;
  transform: rotate(-9deg);
}
.composer {
  background: linear-gradient(145deg, rgba(63,66,70,.74), rgba(41,44,48,.76));
  -webkit-backdrop-filter: blur(22px) saturate(90%);
  backdrop-filter: blur(22px) saturate(90%);
}
.settings-section select, .settings-section textarea {
  background-color: rgba(36,39,42,.55);
}
/* Reading and feedback surfaces remain sufficiently opaque over the scenery. */
.main-panel:has(#conversation:not([hidden])) {
  background-color: rgba(14,16,18,.23);
}
.question-card, .oral-task { background: rgba(33,36,39,.96); }
.message .bubble { background: rgba(45,47,51,.96); }
.message.user .bubble { background: rgba(65,71,81,.96); }
.composer-disclaimer { color: #b1b5ba; text-shadow: 0 1px 4px #000; }

@media(max-width:1030px) {
  .settings-panel {
    background-color: #17191b;
    background-image: linear-gradient(rgba(18,20,22,.85), rgba(18,20,22,.94)), url('/assets/ink-landscape-white-v1.png');
    background-size: auto 100%;
    background-position: right top;
    background-repeat: no-repeat;
  }
}
@media(max-width:700px) {
  .app-shell { background-size: auto 100%; background-position: 52% center; }
  .main-panel { background: rgba(14,16,18,.1); }
  .topbar { background: rgba(20,22,24,.48); }
  .stage-nav { background: rgba(20,22,24,.32); }
  .welcome h1 { font-size: 29px; letter-spacing: .5px; }
  .welcome .eyebrow { color: #c7c8c8; }
  .welcome-description, .welcome-features { color: #dededc; }
  .welcome-note { color: #d1d2d1; }
  .sidebar {
    background-color: #141618;
    background-image: linear-gradient(rgba(14,16,18,.81), rgba(14,16,18,.94)), url('/assets/ink-landscape-white-v1.png');
    background-size: auto 100%;
    background-position: left center;
    background-repeat: no-repeat;
  }
  .composer {
    background: linear-gradient(145deg, rgba(58,61,65,.87), rgba(39,42,46,.88));
  }
}