:root {
  --bg: #f3f3f1;
  --bg-gradient: #f3f3f1;
  --surface: #fafaf8;
  --surface-solid: #f7f7f5;
  --border: #dededb;
  --border-strong: #c8c8c4;
  --text: #17171a;
  --text-dim: #74747b;
  --text-light: #9a9aa1;
  --accent: #f58fb1;
  --accent-light: #ffb5cd;
  --accent-glow: rgba(245, 143, 177, .2);
  --positive: #6d9b7b;
  --negative: #c85f73;
  --warning: #a9824a;
  --shadow-light: rgba(255, 255, 255, .85);
  --shadow-dark: rgba(24, 24, 28, .12);
  --shadow-dark-subtle: rgba(24, 24, 28, .07);
  --lcd: #17171b;
  --lcd-text: #f5f5f2;
  --lcd-dim: #85858e;
  --lcd-glow: rgba(245, 143, 177, .2);
  --shell-radius: 18px;
  --radius-inner: 13px;
  --radius-control: 10px;
  --universe-rail: 184px;
  --universe-night: #151519;
  --universe-paper: #f3f3f1;
  --universe-pink: #ff9fbd;
}

html { background: var(--universe-night); }
body {
  background:
    radial-gradient(circle at 78% 8%, rgba(255, 159, 189, .08), transparent 23rem),
    var(--universe-paper);
  color: var(--text);
  font-family: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
  letter-spacing: .01em;
}

/* Left rail */
.tabs {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 80;
  width: var(--universe-rail);
  height: 100vh;
  display: flex;
  flex-direction: column;
  gap: 4px;
  overflow-y: auto;
  padding: 28px 18px 22px;
  color: #f6f6f3;
  background: #17171a;
  border: 0;
  border-right: 1px solid #2a2a2e;
  backdrop-filter: none;
}

.universe-brand {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 2px 4px 27px;
  margin-bottom: 7px;
  border-bottom: 1px solid #2b2b2f;
}
.universe-brand-orbit {
  position: relative;
  width: 29px;
  height: 29px;
  flex: 0 0 auto;
  border: 1px solid #66666c;
  border-radius: 50%;
  transform: rotate(-24deg);
}
.universe-brand-orbit::before {
  content: "";
  position: absolute;
  inset: 8px;
  border-radius: 50%;
  background: var(--universe-pink);
  box-shadow: 0 0 14px rgba(255, 159, 189, .78);
}
.universe-brand-orbit::after {
  content: "";
  position: absolute;
  left: -6px;
  right: -6px;
  top: 13px;
  border-top: 1px solid #a4a4aa;
}
.universe-brand-copy { display: grid; line-height: 1.15; }
.universe-brand-copy b {
  font-family: Georgia, "Noto Serif SC", serif;
  font-size: 17px;
  letter-spacing: .14em;
  font-weight: 500;
}
.universe-brand-copy small {
  color: #777780;
  font: 8px/1.5 ui-monospace, monospace;
  letter-spacing: .34em;
}

.tab {
  position: relative;
  width: 100%;
  min-width: 0;
  max-width: none;
  display: grid;
  grid-template-columns: 24px 1fr;
  align-items: center;
  gap: 8px;
  padding: 10px 10px;
  color: #85858c;
  background: transparent;
  border: 0;
  border-radius: 8px;
  font-size: 12px;
  line-height: 1.2;
  text-align: left;
  letter-spacing: .13em;
}
.tab::before {
  content: attr(data-index);
  color: #55555c;
  font: 8px ui-monospace, monospace;
  letter-spacing: 0;
}
.tab > span:first-of-type { grid-column: 2; grid-row: 1; }
.tab .tab-en { display: none; }
.tab:hover { color: #f4f4f2; background: #222226; }
.tab.active { color: #fff; background: #28282c; font-weight: 400; }
.tab.active::after {
  content: "";
  position: absolute;
  right: 11px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--universe-pink);
  box-shadow: 0 0 9px var(--universe-pink);
}
.tab-spacer { min-height: 12px; flex: 1; }
.tab[data-tab="import"], .tab[data-tab="faq"], .tab[data-tab="logs"],
.tab[data-tab="about"] { font-size: 11px; opacity: .78; }

/* Header */
.header {
  position: sticky;
  top: 0;
  z-index: 60;
  min-height: 82px;
  margin-left: var(--universe-rail);
  padding: 18px clamp(22px, 4vw, 58px);
  display: grid;
  grid-template-columns: minmax(220px, auto) minmax(260px, 1fr) auto;
  grid-template-areas: "title search actions" "meta search actions";
  gap: 3px 24px;
  background: rgba(243, 243, 241, .88);
  border: 0;
  border-bottom: 1px solid rgba(210, 210, 207, .72);
  backdrop-filter: blur(18px);
}
.header h1 {
  grid-area: title;
  display: flex;
  align-items: baseline;
  gap: 10px;
  color: #19191d;
  font-family: Georgia, "Noto Serif SC", serif;
  font-size: clamp(23px, 2.5vw, 34px);
  font-weight: 400;
  letter-spacing: .04em;
  white-space: nowrap;
}
.header h1 .ob-logo { display: none; }
.header h1 .version-badge { color: #9999a0; font: 8px ui-monospace, monospace; }
.header-meta { grid-area: meta; min-width: 0; gap: 9px; color: #8b8b92; }
.header .stats { max-width: 450px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 9px; }
.search-bar { grid-area: search; align-self: center; width: min(100%, 580px); margin: 0 auto; }
.search-bar input {
  width: 100%;
  min-width: 0;
  height: 38px;
  padding: 0 16px;
  border: 1px solid #d9d9d6;
  border-radius: 999px;
  background: rgba(250, 250, 248, .94);
  box-shadow: none;
  font-size: 11px;
}
.search-bar input:focus { border-color: #aaaab0; box-shadow: 0 0 0 3px rgba(255,159,189,.12); }
.search-bar button { width: 38px; height: 38px; padding: 0; border-radius: 50%; box-shadow: none; }
.header-actions { grid-area: actions; align-self: center; margin: 0; }
.header-actions button {
  height: 34px !important;
  padding: 0 11px !important;
  border-color: #d8d8d5 !important;
  border-radius: 999px !important;
  background: transparent !important;
  box-shadow: none !important;
  font-size: 10px !important;
}

#embed-warn-banner, #status-banner {
  margin-left: calc(var(--universe-rail) + clamp(22px, 4vw, 58px));
  margin-right: clamp(22px, 4vw, 58px);
}
.content {
  max-width: none;
  margin: 0 0 0 var(--universe-rail);
  padding: 26px clamp(22px, 4vw, 58px) 48px;
}

/* Universe home */
#home-view { padding-top: 24px; }
.universe-home-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 270px;
  gap: 18px;
  max-width: 1420px;
  margin: 0 auto;
}
.universe-star-card {
  min-height: 690px;
  display: grid;
  grid-template-rows: auto 1fr auto;
  overflow: hidden;
  color: #f4f4f5;
  background: #16161a;
  border-radius: 18px;
  box-shadow: 0 22px 70px rgba(20, 20, 25, .18);
}
.universe-card-head {
  z-index: 3;
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 18px;
  padding: 24px 26px 0;
}
.universe-eyebrow { color: #8b8b92; font: 9px ui-monospace, monospace; letter-spacing: .18em; }
.universe-card-head h2 { margin: 6px 0 0; font: 400 20px Georgia, "Noto Serif SC", serif; letter-spacing: .04em; }
.universe-legend { display: flex; gap: 13px; color: #777780; font-size: 8px; }
.universe-legend span { display: flex; align-items: center; gap: 5px; }
.universe-legend i { width: 4px; height: 4px; border-radius: 50%; background: #eee; }
.universe-legend .letter { background: var(--universe-pink); }
.universe-legend .promise { border: 1px solid #9c9ca3; background: transparent; }
.universe-constellation {
  position: relative;
  min-height: 470px;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 55% 42%, rgba(126, 95, 112, .25), transparent 24%),
    radial-gradient(ellipse at 18% 64%, rgba(74, 81, 102, .2), transparent 22%);
}
.universe-constellation::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: radial-gradient(circle at 50% 50%, transparent 20%, rgba(16,16,19,.6) 92%);
}
.universe-lines { position: absolute; inset: 8% 0 0; width: 100%; height: 84%; z-index: 0; }
.universe-lines path { fill: none; stroke: rgba(255,255,255,.12); stroke-width: .13; stroke-dasharray: .5 1; }
.universe-dust { position: absolute; z-index: 0; width: 1px; height: 1px; border-radius: 50%; background: #fff; box-shadow: 0 0 5px #fff; }
.universe-memory-star {
  position: absolute;
  z-index: 3;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  transform: translate(-50%, -50%);
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  box-shadow: none;
  cursor: pointer;
}
.universe-memory-star::before { content: ""; position: absolute; inset: 2px; border: 1px solid transparent; border-radius: 50%; transition: .25s; }
.universe-memory-star:hover::before, .universe-memory-star.selected::before { border-color: rgba(255,159,189,.48); transform: scale(1.42); box-shadow: 0 0 24px rgba(255,159,189,.14); }
.universe-star-core { width: 4px; height: 4px; border-radius: 50%; background: #fff; box-shadow: 0 0 6px #fff, 0 0 14px rgba(255,255,255,.7); transition: .2s; }
.universe-memory-star.letter .universe-star-core { background: var(--universe-pink); box-shadow: 0 0 7px var(--universe-pink), 0 0 18px rgba(255,159,189,.75); }
.universe-memory-star.promise .universe-star-core { background: #aaaab2; }
.universe-memory-star:hover .universe-star-core, .universe-memory-star.selected .universe-star-core { transform: scale(1.8); }
.universe-star-label { position: absolute; top: 32px; left: 50%; width: max-content; max-width: 150px; transform: translateX(-50%); color: #bdbdc3; font-size: 8px; letter-spacing: .08em; opacity: 0; pointer-events: none; transition: .2s; }
.universe-memory-star:hover .universe-star-label, .universe-memory-star.selected .universe-star-label { opacity: 1; }

.universe-jelly {
  position: absolute;
  z-index: 4;
  left: 48%;
  top: 38%;
  width: 72px;
  height: 104px;
  border: 0;
  padding: 0;
  background: transparent;
  box-shadow: none;
  cursor: pointer;
  filter: drop-shadow(0 0 13px rgba(255,180,205,.22));
  animation: universe-float 7s ease-in-out infinite;
}
.universe-jelly-cap { position: absolute; left: 12px; top: 9px; width: 48px; height: 35px; overflow: hidden; border: 1px solid rgba(255,222,232,.75); border-bottom: 0; border-radius: 50% 50% 36% 36%; background: linear-gradient(155deg, rgba(255,255,255,.48), rgba(255,160,192,.12)); }
.universe-jelly-cap::before, .universe-jelly-cap::after { content: ""; position: absolute; top: 18px; width: 2px; height: 2px; border-radius: 50%; background: #89838a; }
.universe-jelly-cap::before { left: 17px; }
.universe-jelly-cap::after { right: 17px; }
.universe-tentacle { position: absolute; top: 43px; width: 1px; height: 44px; transform-origin: top; border-radius: 50%; background: linear-gradient(rgba(255,217,230,.68), transparent); animation: universe-sway 3s ease-in-out infinite; }
.universe-tentacle.t1 { left: 22px; height: 50px; }
.universe-tentacle.t2 { left: 33px; animation-delay: -.7s; }
.universe-tentacle.t3 { right: 27px; height: 52px; animation-delay: -1.2s; }
.universe-tentacle.t4 { right: 18px; height: 36px; animation-delay: -.3s; }
.universe-jelly em { position: absolute; top: 92px; left: 50%; width: max-content; transform: translateX(-50%); color: #8d858c; font-size: 7px; font-style: normal; letter-spacing: .12em; opacity: 0; transition: .2s; }
.universe-jelly:hover em, .universe-jelly.awake em { opacity: 1; }

.universe-focus {
  z-index: 4;
  min-height: 122px;
  display: grid;
  grid-template-columns: 34px 1fr auto;
  align-items: center;
  gap: 14px;
  margin: 0 18px 18px;
  padding: 17px 18px;
  border: 1px solid #303036;
  border-radius: 13px;
  background: rgba(28,28,33,.94);
  backdrop-filter: blur(14px);
}
.universe-focus-mark { width: 30px; height: 30px; display: grid; place-items: center; border: 1px solid #44444b; border-radius: 50%; color: var(--universe-pink); }
.universe-focus-copy span { color: #6d6d75; font: 7px ui-monospace, monospace; letter-spacing: .14em; }
.universe-focus-copy h3 { margin: 4px 0; color: #f2f2f3; font: 400 14px Georgia, "Noto Serif SC", serif; letter-spacing: .07em; }
.universe-focus-copy p { max-width: 620px; margin: 0; overflow: hidden; color: #85858d; font-size: 9px; line-height: 1.7; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.universe-focus button { align-self: end; border: 0; color: #9b9ba3; background: transparent; box-shadow: none; font-size: 8px; letter-spacing: .1em; }
.universe-focus button:hover { color: var(--universe-pink); }

.universe-today { display: flex; flex-direction: column; padding: 23px; border: 1px solid var(--border); border-radius: 18px; background: #fafaf8; }
.universe-today-head { display: flex; justify-content: space-between; align-items: start; }
.universe-day-number { color: #202024; font: 48px/.8 Georgia, serif; }
.universe-today-intro { margin: 28px 0 23px; color: #74747b; font: 12px/1.9 Georgia, "Noto Serif SC", serif; }
.universe-stat-list { border-top: 1px solid #e4e4e1; }
.universe-stat-list button { width: 100%; display: flex; justify-content: space-between; align-items: center; padding: 14px 0; border: 0; border-bottom: 1px solid #e4e4e1; border-radius: 0; background: transparent; box-shadow: none; color: #5d5d64; }
.universe-stat-list button span { display: flex; align-items: center; gap: 9px; font-size: 10px; transition: .2s; }
.universe-stat-list button:hover span { color: #151519; transform: translateX(3px); }
.universe-stat-list button b { color: #27272b; font: 400 13px Georgia, serif; }
.universe-stat-list i { width: 11px; color: #99999f; font-style: normal; }
.universe-stat-list i.pink { color: var(--universe-pink); }
.universe-today blockquote { position: relative; margin: 24px 0 20px; padding: 16px 0 0 20px; color: #39393e; font: 12px/2 Georgia, "Noto Serif SC", serif; border-top: 1px solid #e4e4e1; }
.universe-today blockquote::before { content: "“"; position: absolute; left: 0; top: 8px; color: var(--universe-pink); font-size: 24px; }
.universe-today blockquote footer { margin-top: 8px; color: #99999f; font: 7px ui-monospace, monospace; letter-spacing: .08em; }
.universe-primary { margin-top: auto; padding: 12px 14px; border: 0; border-radius: 10px; color: #fff; background: #1c1c20; box-shadow: none; font-size: 10px; letter-spacing: .09em; }
.universe-primary:hover { background: #2a2a2f; color: var(--universe-pink); }
.universe-home-footer { max-width: 1420px; display: flex; justify-content: space-between; margin: 15px auto 0; color: #9b9ba1; font: 7px ui-monospace, monospace; letter-spacing: .14em; }
.universe-home-footer .pink { color: #c77b95; }

/* Keep the original tools usable while making them belong to the same system. */
#list-view, #breath-view, #network-view, #plan-view, #letters-view,
#anchors-view, #import-view, #faq-view, #logs-view, #settings-view, #about-view {
  max-width: 1420px;
}
.config-section, .bucket-card, .plan-card, #letters-list article {
  border-color: #dededb !important;
  border-radius: 12px !important;
  background: #fafaf8 !important;
  box-shadow: none !important;
}
button { box-shadow: none; }
#network-canvas.star-active { background: #151519 !important; }
.self-fab { border-color: rgba(255,159,189,.5); }

@keyframes universe-float { 0%,100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-12px) rotate(2deg); } }
@keyframes universe-sway { 0%,100% { transform: rotate(4deg); } 50% { transform: rotate(-8deg); } }

@media (max-width: 1080px) {
  .header { grid-template-columns: minmax(190px, auto) 1fr; grid-template-areas: "title actions" "meta meta" "search search"; }
  .search-bar { width: 100%; margin-top: 8px; }
  .universe-home-grid { grid-template-columns: 1fr; }
  .universe-today { min-height: 360px; }
  .universe-stat-list { display: grid; grid-template-columns: 1fr 1fr; }
  .universe-stat-list button:nth-child(odd) { padding-right: 14px; }
  .universe-stat-list button:nth-child(even) { padding-left: 14px; border-left: 1px solid #e4e4e1; }
}

@media (max-width: 768px) {
  :root { --universe-rail: 0px; }
  body { padding-bottom: 70px; }
  .tabs {
    inset: auto 0 0 0;
    width: 100%;
    height: 66px;
    display: flex;
    flex-direction: row;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 8px 10px max(8px, env(safe-area-inset-bottom));
    border-top: 1px solid #303034;
    border-right: 0;
  }
  .universe-brand, .tab-spacer, .tab[data-tab="import"], .tab[data-tab="faq"],
  .tab[data-tab="logs"], .tab[data-tab="about"] { display: none; }
  .tab { min-width: 58px; width: auto; flex: 1 0 58px; display: flex; flex-direction: column; justify-content: center; gap: 2px; padding: 7px 8px; font-size: 10px; text-align: center; }
  .tab::before { content: ""; width: 4px; height: 4px; border-radius: 50%; background: #505057; }
  .tab.active::before { background: var(--universe-pink); box-shadow: 0 0 8px var(--universe-pink); }
  .tab.active::after { display: none; }
  .header { margin-left: 0; padding: 15px 14px; grid-template-columns: 1fr auto; grid-template-areas: "title actions" "meta meta" "search search"; gap: 5px 10px; }
  .header h1 { font-size: 23px; }
  .header-meta { overflow: hidden; }
  .header .stats { max-width: 100%; }
  .header-actions button { width: 33px !important; min-width: 33px !important; padding: 0 !important; font-size: 0 !important; }
  .header-actions button svg { width: 13px; }
  #embed-warn-banner, #status-banner { margin-left: 12px; margin-right: 12px; }
  .content { margin-left: 0; padding: 17px 12px 30px; }
  .universe-star-card { min-height: 610px; border-radius: 14px; }
  .universe-card-head { padding: 20px 18px 0; }
  .universe-card-head h2 { font-size: 17px; }
  .universe-legend { display: none; }
  .universe-constellation { min-height: 390px; }
  .universe-focus { grid-template-columns: 30px 1fr; margin: 0 10px 10px; padding: 14px; }
  .universe-focus > button { grid-column: 2; justify-self: start; }
  .universe-today { padding: 20px; }
  .universe-home-footer { padding: 0 4px; }
  .universe-home-footer span:first-child { display: none; }
  .detail-panel { width: min(94vw, 520px); }
}

@media (prefers-reduced-motion: reduce) {
  .universe-jelly, .universe-tentacle { animation: none; }
  * { scroll-behavior: auto !important; }
}

/* ==========================================================================
   Prototype-faithful shell · the original Xiaoyu Universe visual language
   ========================================================================== */
:root {
  --bg: #f4f4f2;
  --bg-gradient: #f4f4f2;
  --surface: #fafaf8;
  --surface-solid: #f7f7f5;
  --border: #dededb;
  --border-strong: #c8c8c4;
  --text: #111114;
  --text-dim: #77777f;
  --text-light: #9a9aa1;
  --accent: #ff9fbd;
  --accent-light: #ffd3e1;
  --accent-glow: rgba(255,159,189,.18);
  --shadow-light: transparent;
  --shadow-dark: transparent;
  --shadow-dark-subtle: transparent;
  --universe-rail: 174px;
  --universe-paper: #f4f4f2;
}

html { background: #151519 !important; }
body {
  min-height: 100vh;
  background: #f4f4f2 !important;
  color: #111114;
}

/* Exact left rail proportions from the first prototype. */
.tabs {
  width: 174px;
  padding: 34px 22px 24px;
  gap: 6px;
  overflow-x: hidden;
  background: #17171a !important;
}
.universe-brand {
  padding: 0 4px 38px;
  margin: 0;
  border: 0;
}
.universe-brand-copy b { font-size: 18px; letter-spacing: .12em; }
.universe-brand-copy small { color: #898991; font-size: 9px; letter-spacing: .46em; }
.tab { padding: 11px 10px; letter-spacing: .16em; }
.universe-tools-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 8px;
  padding: 10px;
  color: #6f6f77;
  border: 0;
  border-top: 1px solid #2b2b2f;
  border-radius: 0;
  background: transparent !important;
  box-shadow: none !important;
  font-size: 9px;
  letter-spacing: .12em;
  cursor: pointer;
}
.universe-tools-toggle:hover { color: #f4f4f2; }
.universe-tools-toggle b { color: #ff9fbd; font-size: 13px; font-weight: 300; }
.universe-tool-tab { display: none; }
.tabs.tools-open .universe-tool-tab { display: grid; }
.tab-spacer { min-height: 8px; }
.universe-rail-status {
  display: flex;
  gap: 9px;
  align-items: center;
  margin-top: auto;
  padding: 14px 10px 4px;
  border-top: 1px solid #2b2b2f;
}
.universe-rail-status > span {
  width: 6px;
  height: 6px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: #ff9fbd;
  box-shadow: 0 0 12px #ff9fbd;
}
.universe-rail-status div { display: grid; gap: 2px; }
.universe-rail-status b { color: #f6f6f3; font-size: 10px; font-weight: 500; letter-spacing: .08em; }
.universe-rail-status small { color: #686870; font: 8px ui-monospace, monospace; }

/* The old global dashboard bar becomes the quiet prototype topbar. */
.header {
  position: relative !important;
  top: auto !important;
  min-height: 116px;
  margin-left: 174px;
  padding: 29px clamp(24px, 4vw, 64px) 24px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "kicker actions" "title actions";
  align-items: center;
  gap: 0 24px;
  background: #f4f4f2 !important;
  border: 0 !important;
  backdrop-filter: none !important;
}
.universe-date-kicker {
  grid-area: kicker;
  align-self: end;
  color: #8b8b92;
  font: 9px ui-monospace, monospace;
  letter-spacing: .19em;
}
.header h1 {
  grid-area: title;
  align-self: start;
  margin: 5px 0 0;
  color: #111114;
  font: 400 clamp(26px, 3vw, 40px) Georgia, "Noto Serif SC", serif;
  letter-spacing: .04em;
}
.header h1 .version-badge { color: #aaaab0; }
.header-meta, .search-bar { display: none; }
.header-actions {
  position: relative;
  grid-area: actions;
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
}
.header-actions .universe-drift-button {
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  display: flex !important;
  gap: 18px !important;
  align-items: center;
  padding: 10px 14px !important;
  color: #66666d !important;
  border: 1px solid #d8d8d5 !important;
  border-radius: 999px !important;
  background: transparent !important;
  box-shadow: none !important;
  font-size: 10px !important;
  letter-spacing: .08em;
}
.header-actions .universe-drift-button:hover { color: #222 !important; border-color: #aaa !important; background: #fff !important; }
.header-actions .universe-avatar {
  width: 36px !important;
  min-width: 36px !important;
  height: 36px !important;
  padding: 0 !important;
  display: grid !important;
  place-items: center;
  color: #2b2024 !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: #ffd3e1 !important;
  box-shadow: none !important;
  font: 13px Georgia, serif !important;
}
.universe-account-menu {
  position: absolute;
  z-index: 120;
  top: 45px;
  right: 0;
  width: 154px;
  display: none;
  padding: 7px;
  border: 1px solid #dededb;
  border-radius: 12px;
  background: rgba(250,250,248,.98);
  box-shadow: 0 18px 50px rgba(20,20,25,.13);
}
.universe-account-menu.open { display: grid; }
.universe-account-menu button {
  width: 100% !important;
  min-width: 0 !important;
  height: auto !important;
  display: flex !important;
  align-items: center;
  justify-content: flex-start;
  gap: 8px !important;
  padding: 9px 10px !important;
  color: #5d5d64 !important;
  border: 0 !important;
  border-radius: 8px !important;
  background: transparent !important;
  box-shadow: none !important;
  font-size: 10px !important;
}
.universe-account-menu button:hover { color: #151519 !important; background: #f1f1ef !important; }
.universe-account-menu svg { width: 13px; height: 13px; }

/* Search and system metadata return only where they are useful. */
body:not([data-universe-tab="home"]) .header {
  min-height: 132px;
  grid-template-columns: minmax(210px, auto) minmax(220px, 1fr) auto;
  grid-template-areas: "kicker search actions" "title search actions" "meta meta meta";
  gap: 0 24px;
}
body:not([data-universe-tab="home"]) .header-meta {
  grid-area: meta;
  display: flex;
  align-items: center;
  min-width: 0;
  margin-top: 9px;
  color: #8b8b92;
}
body:not([data-universe-tab="home"]) .search-bar {
  grid-area: search;
  display: flex;
  align-self: center;
  width: min(100%, 520px);
}

/* Main composition matches the prototype without the old sticky chrome. */
.content {
  margin-left: 174px;
  padding: 8px clamp(24px, 4vw, 64px) 48px;
}
#home-view { padding-top: 0; }
.universe-home-grid { max-width: none; grid-template-columns: minmax(0, 1fr) 260px; }
.universe-star-card { min-height: 690px; }
.universe-home-footer { max-width: none; }
#embed-warn-banner, #status-banner {
  margin-left: calc(174px + clamp(24px, 4vw, 64px));
  margin-right: clamp(24px, 4vw, 64px);
}

/* Remove every remaining trace of the former neumorphic visual system. */
button, input, select, textarea, summary { font-family: inherit; }
button:not(.tab):not(.universe-jelly):not(.universe-memory-star):not(.universe-avatar):not(.universe-drift-button) {
  box-shadow: none !important;
}
input, select, textarea {
  color: #29292e !important;
  border: 1px solid #d9d9d6 !important;
  border-radius: 9px !important;
  background: #fafaf8 !important;
  box-shadow: none !important;
}
input:focus, select:focus, textarea:focus {
  border-color: #aaaab0 !important;
  outline: 0 !important;
  box-shadow: 0 0 0 3px rgba(255,159,189,.12) !important;
}
.btn-primary, .btn-secondary, .btn-danger,
.config-row button, .bucket-bulkbar button, .breath-controls button,
#letters-view button, #plan-view button, #import-view button, #settings-view button {
  min-height: 34px;
  color: #5d5d64 !important;
  border: 1px solid #d8d8d5 !important;
  border-radius: 9px !important;
  background: #fafaf8 !important;
  box-shadow: none !important;
}
.btn-primary:hover, .btn-secondary:hover, .config-row button:hover,
.bucket-bulkbar button:hover, .breath-controls button:hover,
#letters-view button:hover, #plan-view button:hover, #import-view button:hover, #settings-view button:hover {
  color: #151519 !important;
  border-color: #aaaab0 !important;
  transform: none !important;
}
.filters, .bucket-viewbar, .bucket-bulkbar, .breath-flow, .breath-controls,
.network-legend, .config-section, .plan-card, .letter,
#import-upload-zone, #import-preflight-panel, #status-banner .sb-body {
  border: 1px solid #dededb !important;
  border-radius: 14px !important;
  background: #fafaf8 !important;
  box-shadow: none !important;
}
.filters, .bucket-viewbar, .bucket-bulkbar, .breath-controls, .network-legend { padding: 12px 14px; }
.filter-btn {
  color: #77777f !important;
  border: 1px solid transparent !important;
  border-radius: 999px !important;
  background: transparent !important;
  box-shadow: none !important;
}
.filter-btn:hover { color: #151519 !important; background: #f0f0ee !important; }
.filter-btn.active {
  color: #fff !important;
  border-color: #1c1c20 !important;
  background: #1c1c20 !important;
  box-shadow: none !important;
}
.bucket-list { gap: 9px; }
.bucket-row {
  padding: 16px 18px !important;
  color: #29292e;
  border: 1px solid #e0e0dd !important;
  border-radius: 12px !important;
  background: #fafaf8 !important;
  box-shadow: none !important;
}
.bucket-row:hover {
  border-color: #c9c9c5 !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 12px 32px rgba(20,20,25,.06) !important;
}
.bucket-row-tags span, .tag {
  color: #77777f !important;
  border: 1px solid #e2e2df !important;
  border-radius: 999px !important;
  background: transparent !important;
  box-shadow: none !important;
}
.config-section { padding: 22px !important; }
.config-section h3, #plan-view h3, #letters-view h3, #import-view h3 {
  color: #202024;
  font: 400 18px Georgia, "Noto Serif SC", serif;
  letter-spacing: .04em;
}
.config-row { border-color: #e5e5e2 !important; }
.flow-step {
  color: #66666d !important;
  border: 1px solid #e2e2df !important;
  border-radius: 10px !important;
  background: #f7f7f5 !important;
  box-shadow: none !important;
}
.flow-step.active { color: #151519 !important; border-color: #ffb4cb !important; background: #fff5f8 !important; }
.flow-arrow { color: #aaaab0 !important; }
#network-canvas {
  border: 1px solid #2d2d32 !important;
  border-radius: 18px !important;
  background: #151519 !important;
  background-image:
    radial-gradient(circle at 55% 42%, rgba(255,159,189,.10), transparent 22rem),
    radial-gradient(circle at 18% 70%, rgba(95,105,139,.12), transparent 18rem) !important;
  box-shadow: 0 22px 70px rgba(20,20,25,.14) !important;
}
#network-terminal {
  color: #777780 !important;
  border: 1px solid #303036 !important;
  border-radius: 0 0 12px 12px !important;
  background: #1c1c21 !important;
  box-shadow: none !important;
}
.detail-panel, .self-panel {
  color: #29292e !important;
  border-left: 1px solid #dededb !important;
  background: #fafaf8 !important;
  box-shadow: -24px 0 70px rgba(20,20,25,.13) !important;
}
.detail-panel-header, .self-panel-header { border-color: #e2e2df !important; background: rgba(250,250,248,.96) !important; }
.self-fab {
  color: #2b2024 !important;
  border: 1px solid rgba(255,159,189,.45) !important;
  background: #ffd3e1 !important;
  box-shadow: 0 10px 30px rgba(20,20,25,.10) !important;
}
.hw-switch { border-color: #d1d1ce !important; background: #dededb !important; box-shadow: none !important; }
.hw-switch[aria-checked="true"] { border-color: #ff9fbd !important; background: #ff9fbd !important; }
.progress-track { background: #e5e5e2 !important; box-shadow: none !important; }
.progress-fill { background: #ff9fbd !important; box-shadow: none !important; }
.sb-bar { border-color: #dededb !important; background: #fafaf8 !important; box-shadow: none !important; }
.sb-card { border-color: #e2e2df !important; background: #f7f7f5 !important; box-shadow: none !important; }

/* Login is part of the same universe, not a leftover screen. */
#auth-overlay {
  background:
    radial-gradient(circle at 50% 42%, rgba(255,159,189,.14), transparent 19rem),
    #151519 !important;
}
#auth-overlay > div {
  padding: 42px 38px !important;
  border: 1px solid #303036 !important;
  border-radius: 18px !important;
  background: rgba(28,28,33,.96) !important;
  box-shadow: 0 30px 90px rgba(0,0,0,.38) !important;
}
#auth-overlay h2 { color: #f4f4f5 !important; font: 400 25px Georgia, "Noto Serif SC", serif !important; }
#auth-overlay p, #auth-overlay summary, #auth-overlay a { color: #8d8d95 !important; }
#auth-overlay input { color: #f4f4f5 !important; border-color: #3b3b42 !important; background: #202025 !important; }
#auth-overlay button { color: #17171a !important; border: 0 !important; background: #ffd3e1 !important; box-shadow: none !important; }

@media (max-width: 920px) and (min-width: 769px) {
  :root { --universe-rail: 82px; }
  .tabs { width: 82px; padding-inline: 13px; align-items: center; }
  .universe-brand-copy, .tab > span:first-of-type, .universe-rail-status div, .universe-tools-toggle span { display: none; }
  .universe-brand { padding-inline: 0; }
  .tab { width: 44px; grid-template-columns: 1fr; place-items: center; }
  .tab::before { grid-column: 1; }
  .tab.active::after { right: 5px; }
  .universe-tools-toggle { width: 44px; justify-content: center; }
  .header, .content { margin-left: 82px; }
  #embed-warn-banner, #status-banner { margin-left: calc(82px + clamp(24px, 4vw, 64px)); }
}

@media (max-width: 768px) {
  :root { --universe-rail: 0px; }
  body { padding-bottom: 72px; }
  .tabs {
    width: 100%;
    height: 62px;
    padding: 7px 10px max(7px, env(safe-area-inset-bottom));
    justify-content: center;
  }
  .tabs .tab:nth-of-type(n+7), .universe-tools-toggle, .universe-tool-tab,
  .universe-brand, .tab-spacer, .universe-rail-status { display: none !important; }
  .tab { min-width: 45px; flex: 1 0 45px; padding: 8px 5px; }
  .header {
    min-height: 100px;
    margin-left: 0;
    padding: 20px 14px 16px;
  }
  body:not([data-universe-tab="home"]) .header {
    min-height: 144px;
    grid-template-columns: 1fr auto;
    grid-template-areas: "kicker actions" "title actions" "search search" "meta meta";
  }
  .header-actions .universe-drift-button { display: none !important; }
  .header h1 { font-size: 26px; }
  .content { margin-left: 0; padding: 4px 12px 30px; }
  #embed-warn-banner, #status-banner { margin-left: 12px; margin-right: 12px; }
  .universe-home-grid { grid-template-columns: 1fr; }
  .universe-today { min-height: 440px; }
  .filters, .bucket-viewbar, .bucket-bulkbar { padding: 10px; }
}

/* The maintenance console still instantiates ObPet because old event hooks call
   it. Keep the hooks, but replace every visible chicken pixel with Xiaoyu's
   jellyfish so the old mascot cannot leak back through the advanced UI. */
#ob-chick,
#ob-chick.grabbed,
#ob-chick.play-dead,
#ob-chick.raging {
  width: 64px !important;
  height: 84px !important;
  border: 0 !important;
  background: radial-gradient(circle at 50% 24%, rgba(255,184,207,.16), transparent 55%) !important;
  filter: drop-shadow(0 0 13px rgba(255,180,205,.24)) !important;
  transform: none !important;
  animation: legacy-jelly-float 6s ease-in-out infinite !important;
}
#ob-chick canvas,
#ob-chick svg { display: none !important; }
#ob-chick::before {
  content: "" !important;
  position: absolute !important;
  left: 12px !important;
  top: 8px !important;
  width: 40px !important;
  height: 29px !important;
  border: 1px solid rgba(255,214,228,.88) !important;
  border-bottom: 0 !important;
  border-radius: 50% 50% 36% 36% !important;
  background:
    radial-gradient(circle at 38% 60%, #817b82 0 1px, transparent 1.6px),
    radial-gradient(circle at 62% 60%, #817b82 0 1px, transparent 1.6px),
    linear-gradient(155deg, rgba(255,255,255,.76), rgba(255,160,192,.18)) !important;
  box-shadow: inset 0 0 16px rgba(255,255,255,.16) !important;
}
#ob-chick::after,
#ob-chick.dizzy::after,
#ob-chick.sleeping::after {
  content: "" !important;
  position: absolute !important;
  left: 21px !important;
  top: 37px !important;
  width: 1px !important;
  height: 34px !important;
  border: 0 !important;
  border-radius: 50% !important;
  color: transparent !important;
  background: linear-gradient(to bottom, rgba(255,205,223,.72), transparent) !important;
  box-shadow: 8px 3px 0 rgba(255,205,223,.5), 16px -1px 0 rgba(255,205,223,.58), 24px 4px 0 rgba(255,205,223,.44) !important;
  animation: legacy-jelly-sway 2.8s ease-in-out infinite !important;
}
#ob-chick .chick-tip { font-size: 0 !important; }
#ob-chick .chick-tip::after {
  content: "小水母正在替小宇看着星海";
  font-size: 10px;
}
@keyframes legacy-jelly-float {
  0%, 100% { translate: 0 0; rotate: -2deg; }
  50% { translate: 7px -10px; rotate: 3deg; }
}
@keyframes legacy-jelly-sway {
  0%, 100% { transform: rotate(6deg) scaleY(.92); }
  50% { transform: rotate(-8deg) scaleY(1.08); }
}
@media (max-width: 768px) {
  #ob-chick { width: 54px !important; height: 72px !important; right: 12px !important; bottom: 74px !important; }
  #ob-chick::before { left: 10px !important; width: 34px !important; height: 25px !important; }
  #ob-chick::after,
  #ob-chick.dizzy::after,
  #ob-chick.sleeping::after {
    left: 18px !important;
    top: 33px !important;
    height: 29px !important;
    box-shadow: 7px 3px 0 rgba(255,205,223,.5), 14px -1px 0 rgba(255,205,223,.58), 21px 4px 0 rgba(255,205,223,.44) !important;
  }
}