* { box-sizing: border-box; }

:root {
  --bg-a: #f7fbf5;
  --bg-b: #f4f8ff;
  --bg-c: #fbf3ff;
  --panel: rgba(255, 255, 255, 0.78);
  --panel-strong: #fffdfa;
  --line: rgba(130, 155, 150, 0.16);
  --text: #25313b;
  --muted: #75818b;
  --mint: #8fdcc3;
  --green: #73cfae;
  --blue: #a9d9f7;
  --purple: #d6c5f4;
  --yellow: #f7df91;
  --peach: #f6c8b4;
  --red: #ef8f8d;
  --shadow: 0 18px 48px rgba(96, 119, 132, 0.12);
  --soft-shadow: 8px 8px 24px rgba(130, 145, 150, 0.12), -8px -8px 24px rgba(255, 255, 255, 0.8);
  --radius-lg: 24px;
}

body {
  margin: 0;
  min-width: 1180px;
  color: var(--text);
  font-family: "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
  background:
    radial-gradient(circle at 12% 10%, rgba(143, 220, 195, 0.28), transparent 28%),
    radial-gradient(circle at 86% 18%, rgba(214, 197, 244, 0.28), transparent 30%),
    linear-gradient(135deg, var(--bg-a) 0%, var(--bg-b) 48%, var(--bg-c) 100%);
}

button,
input,
textarea {
  font-family: inherit;
}

.login-page {
  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 430px;
}

.login-hero {
  padding: 78px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.login-kicker,
.eyebrow {
  color: #61ad96;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0;
}

.login-hero h1 {
  margin: 18px 0 18px;
  font-size: 54px;
  line-height: 1.12;
}

.login-hero p {
  max-width: 620px;
  color: var(--muted);
  font-size: 18px;
  line-height: 1.9;
}

.login-card {
  display: flex;
  align-items: center;
  padding: 44px;
  background: rgba(255, 255, 255, 0.52);
  backdrop-filter: blur(18px);
}

.login-card .el-card,
.el-dialog,
.el-dialog__body {
  border-radius: 24px;
}

.app-shell {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 286px minmax(0, 1fr);
}

.app-shell.memorial-gray-mode {
  filter: grayscale(1);
}

.sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  padding: 24px 18px;
  display: flex;
  flex-direction: column;
  background: rgba(255, 255, 255, 0.58);
  border-right: 1px solid rgba(255, 255, 255, 0.82);
  backdrop-filter: blur(24px);
}

.brand {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 8px 10px 26px;
}

.brand-mark {
  width: 50px;
  height: 50px;
  border-radius: 18px;
  display: grid;
  place-items: center;
  color: #316657;
  background: linear-gradient(145deg, #dff8ee, #bfeadf);
  box-shadow: var(--soft-shadow);
  font-size: 22px;
  font-weight: 900;
}

.brand-title {
  font-size: 21px;
  font-weight: 900;
}

.brand-subtitle,
.user-role,
.muted {
  margin-top: 3px;
  color: var(--muted);
  font-size: 13px;
}

.main-menu,
.main-menu .el-menu,
.main-menu .el-sub-menu__title,
.main-menu .el-menu-item {
  border-right: 0;
  background: transparent;
}

.main-menu .el-sub-menu__title {
  height: 46px;
  margin-top: 8px;
  border-radius: 16px;
  color: #51636b;
  font-size: 16px;
  font-weight: 800;
}

.main-menu {
  flex: 1;
  overflow: auto;
}

.main-menu .el-menu-item {
  height: 40px;
  margin: 4px 0 4px 14px;
  border-radius: 14px;
  color: #617079;
  font-size: 15px;
}

.main-menu .root-menu-item {
  height: 46px;
  margin: 8px 0 4px;
  border-radius: 16px;
  color: #51636b;
  font-size: 16px;
  font-weight: 800;
}

.main-menu .el-menu-item.is-active,
.main-menu .el-sub-menu__title:hover,
.main-menu .el-menu-item:hover {
  background: rgba(219, 246, 236, 0.9);
  color: #347763;
}

.workspace {
  min-width: 0;
  padding: 28px 34px 44px;
}

.topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 22px;
  margin-bottom: 24px;
}

.topbar h2 {
  margin: 7px 0 8px;
  font-size: 32px;
  line-height: 1.2;
}

.topbar p {
  margin: 0;
  color: var(--muted);
  font-size: 16px;
}

.global-atmosphere-actions {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
}

.global-atmosphere-status {
  color: #2e8067;
  font-size: 13px;
  font-weight: 800;
  white-space: nowrap;
}

.global-atmosphere-actions .el-button {
  min-width: 104px;
  font-weight: 800;
}

.global-atmosphere-actions .el-button.active {
  color: #276b57;
  border-color: rgba(82, 190, 154, 0.62);
  background: rgba(202, 246, 228, 0.92);
}

.heart-rain-layer {
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  overflow: hidden;
}

.heart-rain-layer span {
  position: absolute;
  top: -60px;
  color: #ff6f9c;
  text-shadow: 0 10px 24px rgba(255, 79, 132, 0.28);
  animation-name: heartRainFall;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  will-change: transform;
}

@keyframes heartRainFall {
  0% {
    transform: translate3d(0, -80px, 0) rotate(0deg) scale(0.9);
  }
  50% {
    transform: translate3d(var(--heart-drift), 52vh, 0) rotate(180deg) scale(1.08);
  }
  100% {
    transform: translate3d(calc(var(--heart-drift) * -0.4), 112vh, 0) rotate(360deg) scale(0.92);
  }
}

.sidebar-user {
  min-height: 74px;
  padding: 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  border-radius: 24px;
  background: var(--panel);
  box-shadow: var(--shadow);
}

.sidebar-user-main {
  min-width: 0;
  flex: 1;
}

.sidebar-user .el-button {
  padding: 6px;
}

.user-avatar {
  width: 46px;
  height: 46px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  background: #f7eab8;
  color: #7f6331;
  font-weight: 900;
}

.user-name {
  font-size: 16px;
  font-weight: 800;
}

.dashboard-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 330px;
  gap: 22px;
}

.dashboard-main {
  display: grid;
  gap: 18px;
}

.hero-panel,
.soft-card,
.activity-panel,
.stat-card,
.content-card,
.permission-card,
.upload-rule-banner {
  border: 1px solid rgba(255, 255, 255, 0.86);
  background: var(--panel);
  box-shadow: var(--shadow);
  backdrop-filter: blur(18px);
}

.hero-panel {
  min-height: 178px;
  padding: 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-radius: 30px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.86), rgba(234, 249, 242, 0.76)),
    radial-gradient(circle at right top, rgba(247, 223, 145, 0.44), transparent 38%);
}

.hero-panel h3 {
  max-width: 620px;
  margin: 10px 0 10px;
  font-size: 34px;
  line-height: 1.25;
}

.hero-panel p {
  margin: 0;
  color: var(--muted);
  font-size: 16px;
}

.hero-number {
  min-width: 170px;
  min-height: 132px;
  display: grid;
  place-items: center;
  border-radius: 30px;
  background: linear-gradient(145deg, rgba(255,255,255,.82), rgba(218,246,236,.78));
  box-shadow: var(--soft-shadow);
}

.hero-number strong {
  font-size: 58px;
  line-height: 1;
}

.hero-number span {
  color: var(--muted);
  font-weight: 800;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.stat-card {
  min-height: 126px;
  padding: 18px 20px;
  border-radius: 24px;
}

.stat-card .label {
  color: #60727a;
  font-size: 16px;
  font-weight: 700;
}

.stat-card .value {
  margin-top: 14px;
  font-size: 40px;
  line-height: 1;
  font-weight: 900;
}

.stat-card .value span {
  margin-left: 6px;
  font-size: 16px;
  color: var(--muted);
}

.stat-card.mint { background: linear-gradient(145deg, #f8fffb, #daf7ec); }
.stat-card.blue { background: linear-gradient(145deg, #f9fdff, #dceffc); }
.stat-card.purple { background: linear-gradient(145deg, #fdfbff, #eadffb); }
.stat-card.yellow { background: linear-gradient(145deg, #fffdf5, #f9edbd); }
.stat-card.peach { background: linear-gradient(145deg, #fffaf7, #f8ded0); }
.stat-card.green { background: linear-gradient(145deg, #fbfff8, #dff4c9); }
.stat-card.cream { background: linear-gradient(145deg, #fffdfa, #f7efd9); }
.stat-card.pink { background: linear-gradient(145deg, #fff9fb, #f8dfe9); }

.stat-note {
  margin-top: 10px;
  color: #a16f24;
  font-size: 13px;
  font-weight: 800;
}

.operation-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 16px;
}

.soft-card {
  min-height: 178px;
  padding: 20px;
  border-radius: 24px;
}

.soft-card.wide {
  grid-row: span 2;
}

.card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}

.card-head strong {
  font-size: 18px;
}

.trend-bars {
  height: 230px;
  display: flex;
  align-items: flex-end;
  gap: 12px;
}

.trend-bars span {
  flex: 1;
  min-height: 34px;
  border-radius: 999px 999px 12px 12px;
  background: linear-gradient(180deg, #a5e4d0, #d8f4ec);
}

.status-stack {
  display: grid;
  gap: 12px;
}

.status-row {
  padding: 16px;
  display: flex;
  justify-content: space-between;
  border-radius: 18px;
  background: rgba(230, 248, 240, 0.86);
}

.status-row.warning {
  background: rgba(250, 238, 192, 0.84);
}

.pool-meter {
  height: 18px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(210, 220, 226, 0.44);
}

.pool-meter span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #9fe2cd, #f3d889);
}

.donut-wrap {
  display: flex;
  align-items: center;
  gap: 18px;
}

.donut {
  width: 104px;
  height: 104px;
  border-radius: 50%;
  background: conic-gradient(#9fe2cd 0 72%, #d7c5f6 72% 100%);
  box-shadow: inset 0 0 0 22px rgba(255, 255, 255, 0.88);
}

.quick-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  max-width: 760px;
}

.quick-grid button,
.module-tabs button,
.inner-tabs button {
  border: 0;
  cursor: pointer;
  color: #42645a;
  font-size: 15px;
  font-weight: 800;
  background: rgba(255, 255, 255, 0.72);
}

.quick-grid button {
  min-height: 54px;
  border-radius: 18px;
  box-shadow: var(--soft-shadow);
}

.activity-panel {
  position: sticky;
  top: 28px;
  align-self: start;
  padding: 22px;
  border-radius: 28px;
}

.activity-list {
  display: grid;
  gap: 12px;
}

.activity-item {
  display: grid;
  grid-template-columns: 12px minmax(0, 1fr);
  gap: 12px;
  padding: 14px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.62);
  cursor: pointer;
  transition: transform .18s ease, background .18s ease;
}

.activity-item:hover {
  transform: translateY(-2px);
  background: rgba(255, 255, 255, 0.86);
}

.activity-item i {
  width: 10px;
  height: 10px;
  margin-top: 6px;
  border-radius: 50%;
  background: var(--blue);
}

.activity-item i.warning { background: var(--yellow); }
.activity-item i.danger { background: var(--red); }
.activity-item i.success { background: var(--green); }

.activity-item strong {
  font-size: 15px;
}

.activity-item p {
  margin: 5px 0 0;
  color: var(--muted);
  line-height: 1.45;
}

.module-layout {
  display: grid;
  gap: 18px;
}

.module-tabs {
  padding: 8px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.56);
}

.inner-tabs {
  width: fit-content;
  padding: 8px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.56);
  box-shadow: var(--shadow);
}

.section-tabs {
  grid-column: 1 / -1;
}

.module-tabs button,
.inner-tabs button {
  min-height: 42px;
  padding: 0 18px;
  border-radius: 16px;
}

.module-tabs button.active,
.inner-tabs button.active {
  color: #236e5a;
  background: linear-gradient(145deg, #e7faef, #d3f2e5);
}

.toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
}

.toolbar-left,
.toolbar-right {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.soft-primary,
.el-button--success {
  border: 0 !important;
  color: #245b4f !important;
  background: linear-gradient(145deg, #d7f5e8, #bcebdc) !important;
}

.card-list {
  display: grid;
  gap: 14px;
}

.circle-post-list,
.knowledge-list,
.breed-grid {
  display: grid;
  gap: 14px;
}

.circle-post-card,
.knowledge-card,
.config-card,
.breed-card {
  border: 1px solid rgba(255, 255, 255, 0.86);
  background: var(--panel);
  box-shadow: var(--shadow);
  backdrop-filter: blur(18px);
  border-radius: 24px;
}

.circle-post-card,
.knowledge-card,
.breed-card {
  padding: 18px;
  display: grid;
  grid-template-columns: 60px minmax(320px, 1fr) minmax(320px, 500px) auto;
  gap: 18px;
  align-items: center;
}

.circle-post-card {
  grid-template-columns: 60px minmax(320px, 1fr) auto;
}

.circle-owner {
  align-self: stretch;
  display: grid;
  align-content: center;
}

.circle-post-card .avatar {
  width: 60px;
  height: 60px;
  object-fit: cover;
  border-radius: 50%;
  background: #eef7ef;
  box-shadow: 0 10px 24px rgba(109, 143, 127, 0.18);
}

.circle-media-preview {
  position: relative;
  height: 86px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid rgba(120, 150, 150, 0.16);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.58);
  cursor: pointer;
}

.circle-media-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.circle-media-preview span,
.circle-media-placeholder {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #486068;
  font-size: 18px;
  font-weight: 800;
  background: rgba(255, 255, 255, 0.54);
}

.circle-media-placeholder {
  position: static;
  background: transparent;
}


.circle-edit-detail {
  display: grid;
  gap: 18px;
}

.circle-edit-summary {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px;
  border: 1px solid rgba(120, 150, 150, 0.14);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.64);
}

.circle-edit-summary .avatar {
  width: 56px;
  height: 56px;
  object-fit: cover;
  border-radius: 50%;
  background: #eef7ef;
}

.circle-edit-form .el-form-item {
  margin-bottom: 0;
}

.circle-edit-section {
  display: grid;
  gap: 12px;
}

.circle-edit-section > strong {
  color: #1f3d37;
  font-size: 15px;
}

.circle-edit-media-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 12px;
}

.circle-edit-photo {
  display: grid;
  gap: 10px;
  padding: 10px;
  border: 1px solid rgba(120, 150, 150, 0.14);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.7);
}

.circle-edit-photo img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 12px;
  background: #eef7ef;
}

.circle-edit-video {
  width: 100%;
  max-height: 420px;
  border-radius: 16px;
  background: #0f1715;
}

.post-main,
.row-main {
  min-width: 0;
}

.actions.compact {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.actions.compact .el-button {
  margin-left: 0;
  min-height: 34px;
}

.quote-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
}

.home-operation-page {
  gap: 18px;
}

.home-operation-hero,
.quote-feature-card {
  padding: 22px 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  border: 1px solid rgba(255, 255, 255, 0.78);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.68);
  box-shadow: 0 18px 44px rgba(96, 119, 132, 0.09);
}

.home-operation-hero > div > span {
  display: block;
  margin-bottom: 4px;
  color: #559b82;
  font-weight: 800;
}

.home-operation-hero strong,
.quote-feature-card strong {
  display: block;
  color: #25363d;
  font-size: 22px;
  line-height: 1.45;
}

.home-operation-hero p,
.quote-feature-card span {
  margin: 7px 0 0;
  color: var(--muted);
  line-height: 1.7;
}

.home-operation-grid,
.quote-pool-overview {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.home-operation-card,
.quote-pool-card {
  min-height: 128px;
  padding: 18px;
  border: 1px solid rgba(255, 255, 255, 0.78);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.62);
  box-shadow: 0 14px 34px rgba(96, 119, 132, 0.08);
}

.home-operation-card-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}

.home-operation-card strong {
  display: block;
  margin-top: 12px;
  color: #263940;
  font-size: 28px;
}

.home-operation-card small {
  margin-left: 4px;
  color: var(--muted);
  font-size: 13px;
}

.home-operation-card p {
  min-height: auto;
  margin: 8px 0 0;
  color: #64747b;
  font-size: 13px;
  line-height: 1.65;
}

.home-operation-meta {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  color: var(--muted);
  font-size: 12px;
}

.home-operation-actions {
  margin-top: 14px;
}

.slim-toolbar {
  margin-top: 2px;
}

.home-tabs {
  width: fit-content;
  padding: 8px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.56);
  box-shadow: var(--shadow);
}

.home-tabs button {
  min-height: 42px;
  padding: 0 18px;
  border-radius: 16px;
}

.home-tabs button.active {
  color: #236e5a;
  background: linear-gradient(145deg, #e7faef, #d3f2e5);
}

.home-content-grid {
  display: grid;
  gap: 14px;
}

.home-list-card {
  padding: 16px;
  display: grid;
  grid-template-columns: 172px minmax(260px, 1fr) auto;
  gap: 18px;
  align-items: center;
  border: 1px solid rgba(255, 255, 255, 0.82);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.66);
  box-shadow: 0 14px 34px rgba(96, 119, 132, 0.08);
}

.home-card-thumb {
  width: 172px;
  aspect-ratio: 16 / 9;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid rgba(103, 138, 126, 0.12);
  border-radius: 18px;
  color: #5e7d70;
  font-weight: 900;
  background: linear-gradient(145deg, #f7fffb, #e9f5ef);
}

.home-card-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.home-module-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 16px;
  align-items: start;
}

.home-module-list {
  display: grid;
  gap: 12px;
}

.home-module-card,
.home-quote-status {
  padding: 18px;
  border: 1px solid rgba(255, 255, 255, 0.82);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.66);
  box-shadow: 0 14px 34px rgba(96, 119, 132, 0.08);
}

.home-module-card {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: center;
}

.home-module-card strong,
.home-quote-status strong {
  color: #263940;
  font-size: 17px;
}

.home-module-card p,
.home-quote-status p {
  margin: 7px 0 12px;
  color: var(--muted);
  line-height: 1.6;
}

.home-quote-status {
  position: sticky;
  top: 20px;
  display: grid;
  gap: 12px;
}

.home-quote-status div {
  padding: 12px;
  display: flex;
  justify-content: space-between;
  border-radius: 16px;
  background: rgba(232, 247, 239, 0.72);
}

.home-image-field {
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
}

.home-image-preview {
  aspect-ratio: 16 / 9;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 16px;
  background: #f3faf6;
  color: var(--muted);
}

.home-image-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.home-image-actions {
  display: grid;
  gap: 10px;
}

.product-editor-form {
  display: grid;
  gap: 18px;
}

.editor-section {
  padding: 18px;
  border: 1px solid rgba(201, 220, 215, 0.86);
  border-radius: 18px;
  background: rgba(248, 252, 250, 0.92);
}

.editor-section + .editor-section {
  margin-top: 16px;
}

.editor-section-head {
  margin-bottom: 14px;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid rgba(202, 220, 214, 0.72);
  padding-bottom: 10px;
}

.editor-section-head strong {
  color: #203c36;
  font-size: 17px;
}

.editor-section-head span {
  color: var(--muted);
  font-size: 13px;
}

.product-image-layout {
  display: grid;
  grid-template-columns: minmax(220px, 0.72fr) minmax(260px, 1fr);
  gap: 14px;
}

.product-upload-zone {
  position: relative;
  min-height: 170px;
  display: grid;
  place-items: center;
  overflow: hidden;
  text-align: center;
  border: 1px dashed rgba(80, 150, 128, 0.55);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.76);
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease;
}

.product-upload-zone:hover {
  border-color: rgba(39, 128, 95, 0.92);
  background: rgba(237, 250, 244, 0.86);
}

.product-upload-zone input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}

.product-upload-zone img {
  width: 100%;
  height: 100%;
  min-height: 170px;
  object-fit: cover;
}

.product-upload-zone b {
  color: #24463e;
  font-size: 16px;
}

.product-upload-zone p {
  margin: 8px 0 0;
  color: var(--muted);
}

.product-gallery-grid {
  margin-top: 14px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));
  gap: 10px;
}

.product-gallery-item {
  position: relative;
  overflow: hidden;
  border-radius: 14px;
  background: #eef7ef;
}

.product-gallery-item img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  display: block;
}

.product-gallery-item button {
  position: absolute;
  right: 6px;
  bottom: 6px;
  border: 0;
  border-radius: 999px;
  padding: 4px 8px;
  color: #ff5f63;
  background: rgba(255, 255, 255, 0.88);
  cursor: pointer;
}

.editor-two-col,
.editor-three-col {
  display: grid;
  gap: 14px;
}

.editor-two-col {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.editor-three-col {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.quote-pool-card span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

.quote-pool-card strong {
  display: block;
  margin-top: 16px;
  color: #24343b;
  font-size: 28px;
}

.quote-pool-card em {
  margin-left: 4px;
  color: var(--muted);
  font-size: 13px;
  font-style: normal;
}

.quote-feature-card strong {
  max-width: 980px;
  margin-top: 8px;
  font-size: 20px;
}

.quote-meta,
.quote-search {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.quote-search {
  justify-content: flex-end;
}

.quote-search .el-input {
  width: 280px;
}

.quote-simple-toolbar {
  padding: 4px 0 8px;
}

.quote-summary {
  color: #52656d;
  font-size: 13px;
  font-weight: 800;
}

.input-search-icon {
  border: 0;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  color: #4c7b6e;
  background: rgba(220, 246, 236, 0.9);
  cursor: pointer;
  font-size: 15px;
  line-height: 1;
}

.quote-list {
  display: grid;
  gap: 8px;
}

.quote-card-pool {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

.quote-content-card {
  min-height: 58px;
  padding: 12px 16px;
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  border: 1px solid rgba(231, 225, 209, 0.78);
  border-radius: 8px;
  background: rgba(255, 253, 248, 0.86);
  box-shadow: 0 8px 18px rgba(118, 103, 82, 0.05);
}

.quote-card-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}

.quote-batchbar {
  min-height: 54px;
  padding: 10px 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  border: 1px solid rgba(255, 255, 255, 0.78);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.64);
  box-shadow: 0 10px 26px rgba(96, 119, 132, 0.07);
}

.quote-batchbar span {
  color: #52656d;
  font-weight: 800;
}

.quote-row {
  min-height: 58px;
  padding: 12px 14px;
  display: grid;
  grid-template-columns: 82px minmax(0, 1fr) 150px auto;
  align-items: center;
  gap: 14px;
  border: 1px solid rgba(255, 255, 255, 0.78);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.68);
  box-shadow: 0 10px 26px rgba(96, 119, 132, 0.07);
}

.quote-copy {
  color: #2f3d44;
  font-size: 16px;
  line-height: 1.45;
  min-width: 0;
}

.quote-copy strong {
  display: block;
  font-size: 16px;
  line-height: 1.55;
  font-weight: 800;
  overflow-wrap: anywhere;
}

.quote-index {
  width: 42px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  color: #4d756b;
  background: rgba(222, 247, 237, 0.9);
  font-weight: 900;
  font-size: 14px;
}

.quote-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.quote-actions .el-button {
  min-height: 32px;
  padding: 8px 14px;
}

.post-topline {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 8px;
}

.post-topline strong {
  color: #23333a;
  font-size: 17px;
}

.post-topline span {
  color: var(--muted);
  font-size: 13px;
}

.clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.config-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.config-card {
  padding: 20px;
}

.asset-preview {
  height: 160px;
  margin: 16px 0;
  display: grid;
  place-items: center;
  border-radius: 20px;
  background:
    linear-gradient(45deg, rgba(225, 235, 232, .45) 25%, transparent 25%),
    linear-gradient(-45deg, rgba(225, 235, 232, .45) 25%, transparent 25%),
    #fffefa;
  background-size: 28px 28px;
}

.asset-preview img {
  max-width: 88%;
  max-height: 128px;
  object-fit: contain;
}

.config-actions {
  margin-top: 12px;
  display: flex;
  gap: 8px;
}

.live-config-layout {
  display: grid;
  gap: 14px;
}

.live-config-card,
.live-config-section,
.mini-config-card {
  padding: 16px 18px;
  border: 1.5px solid rgba(74, 116, 104, 0.18);
  border-radius: 20px;
  background: var(--panel);
  box-shadow: var(--shadow);
}

.live-config-card {
  display: grid;
  grid-template-columns: minmax(220px, 320px) minmax(0, 1fr) auto;
  gap: 18px;
  align-items: center;
}

.live-config-card .card-head,
.live-config-card .muted {
  margin: 0;
}

.live-config-card .card-head {
  display: grid;
  gap: 8px;
  align-content: center;
}

.live-config-card .card-head .el-tag {
  width: fit-content;
}

.live-config-card > .muted {
  display: none;
}

.before-after-config {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 0;
}

.config-side {
  display: grid;
  gap: 9px;
}

.config-side span,
.icon-compare span {
  color: #60727a;
  font-size: 13px;
  font-weight: 800;
}

.config-side small {
  color: var(--muted);
}

.compact-preview,
.icon-preview {
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.72);
  border: 2px solid rgba(54, 96, 84, 0.42);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.82),
    0 10px 22px rgba(68, 99, 91, 0.08);
}

.compact-preview {
  height: 92px;
}

.compact-preview.publish {
  height: 108px;
}

.compact-preview img {
  max-width: 86%;
  max-height: 76px;
  object-fit: contain;
}

.compact-preview.publish img {
  max-height: 92px;
}

.logo-config-card .compact-preview {
  height: 86px;
  min-height: 86px;
  border: 2.5px solid rgba(63, 104, 93, 0.58);
  border-radius: 16px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.86), 0 12px 28px rgba(69, 96, 88, 0.12);
}

.logo-config-card .compact-preview img {
  width: 96px;
  height: 48px;
  max-width: 96px;
  max-height: 48px;
  object-fit: contain;
}

.transparent {
  background:
    linear-gradient(45deg, rgba(226, 236, 233, .54) 25%, transparent 25%),
    linear-gradient(-45deg, rgba(226, 236, 233, .54) 25%, transparent 25%),
    #fffefa;
  background-size: 20px 20px;
  border: 2px dashed rgba(54, 96, 84, 0.5);
}

.pending {
  border-color: rgba(99, 126, 136, 0.42);
  background-color: rgba(248, 251, 250, 0.82);
}

.pending em,
.icon-preview em {
  color: #8b98a0;
  font-style: normal;
  font-size: 13px;
}

.upload-chip {
  width: fit-content;
  min-height: 34px;
  padding: 0 14px;
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  color: #315f54;
  background: rgba(222, 247, 237, 0.86);
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
}

.upload-chip input {
  display: none;
}

.nav-config-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin-top: 14px;
}

.nav-config-grid .mini-config-card {
  display: grid;
  grid-template-columns: 150px minmax(220px, 1fr) auto;
  gap: 16px;
  align-items: center;
  border: 1.5px solid rgba(73, 116, 104, 0.2);
  box-shadow: 0 14px 32px rgba(70, 99, 92, 0.1);
  background: rgba(255, 255, 255, 0.78);
}

.nav-config-grid .mini-config-card + .mini-config-card {
  margin-top: 2px;
}

.nav-config-grid .mini-config-card > .muted {
  display: none;
}

.icon-compare {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 0;
}

.icon-preview {
  width: 70px;
  height: 70px;
  margin-top: 7px;
}

.icon-preview img {
  width: 52px;
  height: 52px;
  object-fit: contain;
}

.nav-config-grid .config-actions {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  justify-content: flex-end;
}

.nav-state-grid .nav-state-card {
  grid-template-columns: 110px minmax(520px, 1fr) 168px;
  align-items: stretch;
  min-height: 148px;
  padding: 14px 16px;
  border: 2px solid rgba(63, 104, 93, 0.46);
  box-shadow: 0 14px 28px rgba(70, 99, 92, 0.12);
}

.nav-state-zone {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  min-width: 0;
  border: 0;
  padding: 0;
  background: transparent;
}

.nav-state-block {
  min-height: 120px;
  padding: 12px 18px;
  border: 2px solid rgba(63, 104, 93, 0.42);
  border-radius: 16px;
  background: rgba(250, 253, 252, 0.92);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.72);
}

.nav-state-block b {
  display: block;
  margin-bottom: 8px;
  color: #2d454c;
  font-size: 15px;
}

.nav-state-block .icon-compare span {
  color: #60747d;
  font-weight: 700;
}

.nav-state-block .icon-preview {
  width: 76px;
  height: 76px;
  border: 2.5px solid rgba(63, 104, 93, 0.42);
  border-radius: 17px;
  background-color: rgba(255, 255, 255, 0.96);
  box-shadow: 0 14px 26px rgba(62, 91, 83, 0.13);
}

.nav-state-block .icon-preview img {
  width: 56px;
  height: 56px;
  max-width: 56px;
  max-height: 56px;
  object-fit: contain;
}

.nav-state-actions {
  display: grid;
  gap: 8px;
  align-content: center;
  justify-items: stretch;
}

.nav-state-actions .el-button,
.nav-state-actions .upload-chip {
  width: 100%;
  min-height: 34px;
  justify-content: center;
}

.live-config-card,
.live-config-section {
  border: 2px solid rgba(63, 104, 93, 0.28);
}

.logo-config-card {
  grid-template-columns: 240px minmax(640px, 1fr) 160px;
  min-height: 134px;
  align-items: center;
}

.logo-config-card .before-after-config,
.live-config-card .before-after-config {
  grid-template-columns: minmax(360px, 1fr) minmax(360px, 1fr);
  align-items: start;
  gap: 14px;
}

.logo-config-card .config-side {
  gap: 7px;
}

.logo-config-card .config-actions {
  margin-top: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 14px;
  white-space: nowrap;
}

.compact-preview,
.icon-preview {
  overflow: hidden;
}

.compact-preview.publish {
  height: 116px;
  border: 2.5px solid rgba(63, 104, 93, 0.54);
  border-radius: 18px;
}

.compact-preview.publish img {
  width: 94px;
  height: 94px;
  max-width: 94px;
  max-height: 94px;
  object-fit: contain;
}

.pending,
.nav-state-block .icon-preview.pending {
  border-style: dashed;
  border-color: rgba(63, 104, 93, 0.48);
}

.page-config-schematic {
  display: grid;
  gap: 14px;
}

.config-strip,
.nav-schematic-section {
  border: 2px solid rgba(63, 104, 93, 0.35);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.88);
  box-shadow: 0 16px 34px rgba(62, 91, 83, 0.1);
}

.config-strip {
  min-height: 148px;
  padding: 16px 22px;
  display: grid;
  grid-template-columns: 190px minmax(420px, 1fr) 180px;
  gap: 16px;
  align-items: center;
}

.config-strip-title,
.config-preview-column {
  display: grid;
  gap: 8px;
  align-content: center;
}

.section-title-stack {
  display: grid;
  gap: 6px;
}

.config-strip-title strong,
.section-headline strong {
  color: #263842;
  font-size: 18px;
}

.config-size-hint {
  color: #6d7e83;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.45;
}

.config-preview-column b,
.nav-row-label,
.nav-schematic-card strong {
  color: #456066;
  font-size: 14px;
}

.schematic-preview {
  display: grid;
  place-items: center;
  border: 2px solid rgba(63, 104, 93, 0.42);
  border-radius: 16px;
  background:
    linear-gradient(45deg, rgba(225, 235, 232, .55) 25%, transparent 25%),
    linear-gradient(-45deg, rgba(225, 235, 232, .55) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, rgba(225, 235, 232, .55) 75%),
    linear-gradient(-45deg, transparent 75%, rgba(225, 235, 232, .55) 75%);
  background-size: 24px 24px;
  background-position: 0 0, 0 12px, 12px -12px, -12px 0;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.75);
  overflow: hidden;
}

.schematic-preview img {
  max-width: 86%;
  max-height: 86%;
  object-fit: contain;
}

.logo-preview {
  height: 76px;
}

.logo-preview img {
  max-width: 96px;
  max-height: 48px;
}

.schematic-preview.pending {
  border-style: dashed;
}

.library-link,
.tiny-link {
  border: 0;
  background: transparent;
  color: #327c8f;
  font-weight: 700;
  cursor: pointer;
}

.strip-actions,
.nav-bulk-actions {
  display: grid;
  gap: 10px;
}

.strip-actions .el-button,
.nav-bulk-actions .el-button {
  width: 100%;
  min-height: 38px;
}

.nav-schematic-section {
  padding: 16px 20px 18px;
}

.section-headline,
.upload-label-line {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.nav-row-label {
  margin: 16px 0 8px;
  font-weight: 800;
}

.nav-schematic-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(150px, 1fr));
  gap: 14px;
}

.nav-schematic-card {
  min-height: 116px;
  padding: 12px 14px;
  border: 2px solid rgba(63, 104, 93, 0.5);
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.82);
}

.nav-pair {
  margin-top: 12px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  text-align: center;
}

.nav-pair.single {
  grid-template-columns: 1fr;
}

.nav-pair > div {
  display: grid;
  justify-items: center;
  gap: 6px;
}

.nav-pair span,
.mini-upload-link,
.tiny-link {
  font-size: 13px;
  color: #40575d;
  font-weight: 700;
}

.replace-link {
  margin-top: 2px;
  color: #1f8a76;
}

.danger-link {
  color: #d85b5b;
}

.mini-upload-link {
  cursor: pointer;
}

.mini-upload-link input {
  display: none;
}

.strong-border {
  border-color: rgba(63, 104, 93, 0.55) !important;
}

.nav-bulk-actions {
  width: min(460px, 100%);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 18px auto 0;
}

.logo-library-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(120px, 1fr));
  gap: 14px;
  margin-top: 14px;
}

.logo-library-card {
  display: grid;
  gap: 8px;
  justify-items: center;
  border: 1.5px solid rgba(63, 104, 93, 0.28);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.9);
  padding: 12px;
  cursor: pointer;
  color: #263842;
}

.logo-library-card.active {
  border-color: rgba(49, 138, 118, 0.75);
  box-shadow: 0 0 0 3px rgba(196, 238, 222, 0.8);
}

.library-preview {
  width: 86px;
  height: 74px;
}

.logo-library-card span {
  color: #6c7f86;
  font-size: 12px;
}

.icon-library-toolbar {
  display: grid;
  gap: 14px;
}

.folder-tabs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.folder-tabs button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid rgba(63, 104, 93, 0.2);
  background: rgba(255, 255, 255, 0.9);
  color: #40575d;
  border-radius: 999px;
  padding: 8px 14px;
  cursor: pointer;
  font-weight: 800;
}

.folder-tabs button.active {
  color: #1f6f61;
  background: rgba(196, 238, 222, 0.9);
  border-color: rgba(71, 154, 130, 0.35);
}

.folder-tabs button.manage.active {
  box-shadow: 0 0 0 3px rgba(238, 102, 87, 0.12);
  border-color: rgba(238, 102, 87, 0.42);
}
.folder-tabs button span {
  padding: 2px 6px;
  border-radius: 999px;
  background: rgba(49, 138, 118, 0.12);
  color: #1f6f61;
  font-size: 11px;
  line-height: 1.2;
}

.folder-create {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
}

.clickable-preview {
  cursor: pointer;
}

.clickable-preview:hover {
  border-color: rgba(53, 141, 112, 0.65);
  box-shadow: 0 8px 18px rgba(79, 142, 121, 0.16);
}

.asset-bg-preview {
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

.visually-hidden-file {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

@media (max-width: 1100px) {
  .live-config-card,
  .nav-config-grid .mini-config-card {
    grid-template-columns: 1fr;
  }

  .nav-state-zone {
    grid-template-columns: 1fr;
  }

  .config-strip,
  .nav-schematic-grid {
    grid-template-columns: 1fr;
  }
}

.knowledge-page {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}

.shop-layout {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}

.category-admin-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.category-admin-block {
  min-width: 0;
  padding: 18px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.88);
  box-shadow: 0 16px 38px rgba(61, 77, 87, 0.08);
}

.category-admin-head,
.category-admin-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.category-admin-head {
  margin-bottom: 14px;
}

.category-admin-head span {
  color: var(--muted);
  font-size: 13px;
}

.category-admin-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.category-admin-item {
  padding: 12px;
  border-radius: 14px;
  background: #f8fbfa;
}

.category-admin-item small {
  display: block;
  margin-top: 4px;
  color: var(--muted);
}

.category-scroll {
  display: grid;
  gap: 10px;
  max-height: 640px;
  overflow: auto;
}

.category-scroll button {
  border: 0;
  width: 100%;
  padding: 14px;
  display: grid;
  gap: 6px;
  text-align: left;
  border-radius: 18px;
  color: var(--text);
  background: rgba(255, 255, 255, 0.56);
  cursor: pointer;
}

.category-scroll button.active {
  background: rgba(219, 246, 236, 0.94);
  box-shadow: var(--soft-shadow);
}

.category-scroll small {
  color: var(--muted);
}

.color-preview-strip {
  width: 116px;
  min-height: 70px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
}

.color-preview-strip span {
  min-height: 30px;
  border-radius: 10px;
  box-shadow: inset 0 0 0 1px rgba(80, 100, 100, .08);
}

.theme-phone-preview,
.theme-editor-preview {
  width: 132px;
  min-height: 168px;
  padding: 14px;
  display: grid;
  align-content: space-between;
  gap: 12px;
  border: 1px solid rgba(126, 160, 147, .32);
  border-radius: 24px;
  box-shadow: 0 18px 40px rgba(54, 75, 68, .12);
  overflow: hidden;
  color: #243d36;
  position: relative;
}

.theme-phone-preview > *,
.theme-editor-preview > * {
  position: relative;
  z-index: 1;
}

.theme-motion-on::before {
  content: "";
  position: absolute;
  inset: -18%;
  z-index: 0;
  opacity: .55;
  background:
    radial-gradient(circle at 22% 18%, rgba(255, 255, 255, .72), transparent 34%),
    radial-gradient(circle at 82% 72%, currentColor, transparent 42%);
  filter: blur(18px);
  transform: translate3d(-8%, -4%, 0) scale(1);
  animation: themePreviewFloat 4.8s ease-in-out infinite alternate;
}

@keyframes themePreviewFloat {
  to {
    transform: translate3d(8%, 5%, 0) scale(1.08);
    opacity: .76;
  }
}

.theme-content-card {
  grid-template-columns: minmax(180px, 220px) minmax(260px, 1fr) auto;
  gap: 28px;
  align-items: center;
  min-height: 206px;
}

.theme-content-card .theme-phone-preview {
  width: 132px;
  min-height: 150px;
  justify-self: center;
  align-self: center;
  box-shadow: 0 12px 28px rgba(54, 75, 68, .1);
}

.theme-content-card .row-main {
  align-self: center;
}

.theme-content-card .row-desc {
  max-width: 460px;
}

.theme-editor-layout {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 22px;
  align-items: start;
}

.theme-editor-preview {
  width: 220px;
  min-height: 360px;
  position: sticky;
  top: 12px;
}

.theme-editor-form {
  min-width: 0;
  display: grid;
  gap: 16px;
}

.theme-editor-section {
  padding: 16px;
  border: 1px solid rgba(126, 160, 147, .18);
  border-radius: 18px;
  background: rgba(255, 255, 255, .62);
}

.theme-color-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.theme-color-grid .el-form-item {
  margin-bottom: 8px;
}

.theme-generate-btn {
  margin-top: 6px;
}

.theme-phone-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 700;
}

.theme-phone-top em {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  box-shadow: 0 0 0 4px rgba(255, 255, 255, .52);
}

.theme-phone-preview p,
.theme-editor-preview p {
  margin: 0;
  line-height: 1.6;
  font-size: 13px;
}

.theme-editor-preview p {
  font-size: 15px;
}

.theme-phone-swatches {
  display: flex;
  gap: 6px;
}

.theme-phone-swatches span {
  width: 24px;
  height: 12px;
  border-radius: 999px;
  box-shadow: inset 0 0 0 1px rgba(66, 86, 80, .12);
}

.theme-editor-preview small {
  color: rgba(36, 61, 54, .72);
}

.cat-file-card {
  cursor: pointer;
}

.cat-file-card:hover {
  transform: translateY(-1px);
  border-color: rgba(94, 138, 119, .28);
}

.cat-file-detail {
  display: grid;
  gap: 18px;
}

.cat-file-detail-head {
  padding: 16px;
  display: grid;
  grid-template-columns: 86px minmax(0, 1fr);
  gap: 16px;
  align-items: center;
  border: 1px solid rgba(126, 160, 147, .18);
  border-radius: 20px;
  background: rgba(255, 255, 255, .68);
}

.cat-file-detail-head img {
  width: 86px;
  height: 86px;
  border-radius: 50%;
  object-fit: cover;
  background: rgba(223, 240, 223, .72);
}

.cat-file-detail-head h3 {
  margin: 0 0 6px;
  color: var(--ink);
}

.cat-file-detail-grid {
  padding: 16px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 16px;
  border: 1px solid rgba(126, 160, 147, .18);
  border-radius: 20px;
  background: rgba(255, 255, 255, .62);
}

.cat-file-detail-grid span {
  color: var(--muted);
  line-height: 1.6;
}

.cat-file-detail-grid b {
  color: var(--ink);
}

.cat-file-detail-grid .wide {
  grid-column: 1 / -1;
}

.cat-file-album {
  padding: 16px;
  border: 1px solid rgba(126, 160, 147, .18);
  border-radius: 20px;
  background: rgba(255, 255, 255, .62);
}

.cat-file-album-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.cat-file-album-head h4 {
  margin: 0;
  color: var(--ink);
  font-size: 16px;
}

.cat-file-album-head span {
  color: var(--muted);
  font-size: 13px;
}

.cat-file-album-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.cat-file-album-item {
  min-width: 0;
}

.cat-file-album-item img {
  width: 100%;
  aspect-ratio: 1;
  border-radius: 14px;
  object-fit: cover;
  background: rgba(223, 240, 223, .72);
  display: block;
}

.cat-file-album-item p {
  margin: 6px 0 0;
  font-size: 12px;
  color: var(--muted);
}

.cat-file-album-empty {
  padding: 20px;
  text-align: center;
  color: var(--muted);
  border-radius: 14px;
  background: rgba(236, 244, 239, .58);
}

.cat-editor-layout {
  display: grid;
  grid-template-columns: 230px minmax(0, 1fr);
  gap: 22px;
  align-items: start;
}

.cat-editor-preview {
  position: sticky;
  top: 12px;
  min-height: 360px;
  padding: 18px;
  border: 1px solid rgba(126, 160, 147, .2);
  border-radius: 24px;
  background:
    radial-gradient(circle at 20% 12%, rgba(223, 240, 223, .9), transparent 34%),
    linear-gradient(150deg, rgba(255, 255, 255, .92), rgba(240, 248, 239, .72));
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
}

.cat-editor-preview strong {
  color: var(--ink);
  font-size: 18px;
}

.cat-editor-preview span,
.cat-editor-preview p {
  margin: 0;
  color: var(--muted);
  line-height: 1.55;
}

.cat-avatar-uploader {
  display: grid;
  justify-items: center;
  gap: 12px;
  margin-bottom: 8px;
}

.cat-avatar-uploader img {
  width: 128px;
  height: 128px;
  border-radius: 50%;
  object-fit: cover;
  background: rgba(223, 240, 223, .74);
  box-shadow: inset 0 0 0 1px rgba(126, 160, 147, .18), 0 16px 34px rgba(70, 92, 79, .14);
}

.cat-editor-form {
  min-width: 0;
  display: grid;
  gap: 16px;
}

.cat-editor-section {
  padding: 16px;
  border: 1px solid rgba(126, 160, 147, .18);
  border-radius: 18px;
  background: rgba(255, 255, 255, .68);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .72);
}

.cat-editor-grid,
.cat-editor-reminders {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.cat-editor-inline {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 180px auto;
  gap: 12px;
  align-items: end;
}

.cat-editor-section .el-form-item {
  margin-bottom: 0;
}

.cat-editor-inline .el-button {
  margin-bottom: 0;
  min-height: 32px;
}

@media (max-width: 900px) {
  .cat-editor-layout {
    grid-template-columns: 1fr;
  }

  .cat-editor-preview {
    position: relative;
    top: auto;
    min-height: auto;
  }

  .cat-editor-grid,
  .cat-editor-reminders,
  .cat-editor-inline {
    grid-template-columns: 1fr;
  }
}

.knowledge-topics,
.knowledge-content {
  border: 1px solid rgba(255, 255, 255, 0.86);
  background: var(--panel);
  box-shadow: var(--shadow);
  border-radius: 28px;
  backdrop-filter: blur(18px);
}

.knowledge-topics {
  position: sticky;
  top: 28px;
  padding: 16px;
}

.knowledge-content {
  position: relative;
  min-height: 640px;
  padding: 18px;
}

.topic-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
}

.fixed-topic-note {
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  color: var(--muted);
  font-size: 13px;
}

.topic-list {
  display: grid;
  gap: 10px;
}

.topic-list button {
  border: 0;
  width: 100%;
  padding: 14px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  text-align: left;
  border-radius: 18px;
  color: var(--text);
  background: rgba(255, 255, 255, 0.56);
  cursor: pointer;
}

.topic-list button.active {
  background: rgba(219, 246, 236, 0.94);
  box-shadow: var(--soft-shadow);
}

.topic-list small {
  display: block;
  margin-top: 5px;
  color: var(--muted);
}

.topic-manage {
  grid-column: 1 / -1;
  display: flex;
  gap: 12px;
  color: #4f7f70;
}

.topic-manage em {
  font-style: normal;
}

.topic-manage .danger {
  color: #dc7774;
}

.knowledge-card {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  cursor: pointer;
}

.knowledge-card .row-main {
  min-width: 0;
}

.knowledge-card .row-title {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.knowledge-card .row-desc {
  max-width: 760px;
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.knowledge-card .row-meta {
  align-items: center;
}

.knowledge-card .actions {
  min-width: 150px;
}

.breed-fab {
  position: sticky;
  float: right;
  bottom: 24px;
  margin-top: 18px;
  border: 0;
  min-height: 48px;
  padding: 0 22px;
  border-radius: 999px;
  color: #315f54;
  font-size: 15px;
  font-weight: 800;
  background: linear-gradient(145deg, #e5f8ef, #fffdf8);
  box-shadow: var(--soft-shadow);
  cursor: pointer;
}

.article-detail h3 {
  margin: 0 0 10px;
  font-size: 24px;
}

.article-body {
  margin-top: 18px;
  white-space: pre-wrap;
  line-height: 1.9;
  color: #3b454d;
}

.circle-post-detail {
  display: grid;
  gap: 18px;
}

.circle-post-detail-head {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
}

.circle-post-detail-head img {
  width: 64px;
  height: 64px;
  border-radius: 20px;
  object-fit: cover;
  background: #eef7ef;
}

.circle-post-detail-head h3 {
  margin: 0 0 6px;
  font-size: 22px;
}

.circle-post-detail-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  color: #65737f;
}

.circle-post-detail-stats span {
  padding: 6px 12px;
  border-radius: 999px;
  background: #f5faf7;
}

.circle-post-detail-content {
  padding: 16px;
  border-radius: 16px;
  background: #fbfaf6;
  color: #2f3a3f;
  line-height: 1.8;
  white-space: pre-wrap;
}

.circle-post-detail-media {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 12px;
}

.circle-post-detail-media img {
  width: 100%;
  aspect-ratio: 1.25;
  border-radius: 16px;
  object-fit: cover;
  background: #eef7ef;
}

.circle-post-detail-comments {
  display: grid;
  gap: 10px;
}

.circle-post-comment {
  display: grid;
  gap: 4px;
  padding: 12px;
  border-radius: 14px;
  background: #f7f9fb;
}

.user-content-detail {
  display: grid;
  gap: 18px;
}

.user-content-head {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  padding: 14px;
  border: 1px solid #e7efea;
  border-radius: 18px;
  background: #fbfdf9;
}

.user-content-head .avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  object-fit: cover;
  background: #e5f5e8;
}

.user-content-head h3,
.user-content-section h4 {
  margin: 0 0 6px;
}

.user-content-section {
  display: grid;
  gap: 10px;
}

.user-content-row {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  gap: 12px;
  padding: 12px;
  border: 1px solid #eef2ee;
  border-radius: 16px;
  background: #fffefa;
}

.user-content-row .thumb {
  width: 52px;
  height: 52px;
  border-radius: 16px;
  object-fit: cover;
  background: #eef7ef;
}

.user-content-row p {
  margin: 5px 0;
  color: #4f5a62;
  line-height: 1.6;
}

.user-content-row span {
  color: #8a969f;
  font-size: 13px;
}

.circle-comment-list {
  display: grid;
  gap: 14px;
}

.circle-comment-card {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr) auto;
  gap: 16px;
  align-items: center;
  padding: 18px;
  border-radius: 22px;
  background: rgba(255, 255, 255, .82);
  box-shadow: var(--soft-shadow);
}

.circle-comment-card .avatar {
  width: 56px;
  height: 56px;
  border-radius: 18px;
  object-fit: cover;
  background: #eef7ef;
}

.comment-main {
  min-width: 0;
  display: grid;
  gap: 8px;
}

.drawer-toolbar {
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.breed-card {
  grid-template-columns: 96px minmax(0, 1fr) auto;
}

.breed-card img {
  width: 96px;
  height: 96px;
  border-radius: 22px;
  object-fit: cover;
  background: #eef7ef;
}

.breed-library-page {
  display: grid;
  gap: 18px;
}

.breed-library-head {
  padding: 20px 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  border: 1px solid rgba(255, 255, 255, 0.86);
  border-radius: var(--radius-lg);
  background: var(--panel);
  box-shadow: var(--shadow);
}

.breed-library-head strong {
  color: var(--text);
  font-size: 22px;
}

.breed-library-head .el-input {
  max-width: 360px;
}

.breed-library-grid {
  display: grid;
  gap: 16px;
}

.breed-filter-panel {
  padding: 16px 18px;
  display: grid;
  gap: 12px;
  border: 1px solid rgba(255, 255, 255, 0.86);
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.76);
  box-shadow: var(--shadow);
}

.breed-filter-panel > div {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.breed-filter-more {
  display: grid;
  gap: 12px;
}

.breed-filter-more summary {
  width: fit-content;
  color: #547066;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
}

.breed-filter-more > div {
  margin-top: 10px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.breed-filter-panel b {
  min-width: 72px;
  color: #2d454c;
}

.breed-filter-panel button {
  border: 1px solid rgba(73, 116, 104, 0.16);
  min-height: 32px;
  padding: 0 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.72);
  color: #52656d;
  font-weight: 700;
  cursor: pointer;
}

.breed-filter-panel button.active {
  border-color: rgba(61, 159, 118, 0.34);
  background: #d9f5e9;
  color: #2f765f;
}

.breed-profile-card {
  padding: 18px;
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr) 110px;
  gap: 18px;
  align-items: stretch;
  border: 1px solid rgba(255, 255, 255, 0.86);
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.82);
  box-shadow: var(--shadow);
}

.breed-photo-panel {
  display: grid;
  align-content: start;
  gap: 10px;
}

.breed-photo-panel img {
  width: 100%;
  height: 150px;
  border: 1.5px solid rgba(73, 116, 104, 0.22);
  border-radius: 22px;
  object-fit: cover;
  background: #fffefa;
}

.breed-photo-panel small {
  color: var(--muted);
}

.breed-info-panel {
  min-width: 0;
}

.breed-title-line {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.breed-title-line strong {
  color: var(--text);
  font-size: 22px;
}

.breed-title-line p,
.breed-intro {
  margin: 4px 0 0;
  color: var(--muted);
}

.breed-tag-row {
  margin-top: 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.breed-intro {
  margin-top: 10px;
  line-height: 1.7;
}

.breed-detail-grid {
  margin-top: 14px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.breed-detail-grid span {
  min-height: 54px;
  padding: 10px 12px;
  border-radius: 16px;
  background: rgba(244, 250, 247, 0.82);
  color: #52656d;
  line-height: 1.45;
}

.breed-detail-grid span.wide {
  grid-column: 1 / -1;
}

.breed-detail-grid b {
  display: block;
  margin-bottom: 4px;
  color: #2d454c;
}

.breed-card-actions {
  display: grid;
  align-content: center;
}

.breed-compact-list {
  display: grid;
  gap: 10px;
}

.breed-compact-row {
  min-height: 112px;
  padding: 12px 14px;
  display: grid;
  grid-template-columns: 46px 82px minmax(0, 1fr) 190px;
  gap: 14px;
  align-items: center;
  border: 1.5px solid rgba(73, 116, 104, 0.18);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.84);
  box-shadow: 0 10px 24px rgba(73, 91, 96, 0.07);
}

.breed-row-index {
  width: 42px;
  height: 42px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  color: #2f765f;
  font-weight: 900;
  background: #e2f7ed;
}

.breed-compact-photo {
  width: 82px;
  height: 82px;
  border-radius: 18px;
  object-fit: cover;
  background: #eef7ef;
}

.breed-compact-main {
  min-width: 0;
}

.breed-compact-title {
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
}

.breed-compact-title strong {
  color: var(--text);
  font-size: 17px;
}

.breed-compact-title span,
.breed-compact-title small {
  color: var(--muted);
  font-size: 13px;
}

.breed-compact-tags {
  margin-top: 6px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.breed-compact-meta {
  margin-top: 8px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  color: #52656d;
  font-size: 13px;
}

.breed-compact-meta span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.breed-compact-meta b {
  color: #2d454c;
}

.breed-compact-main p {
  margin: 7px 0 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.breed-compact-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}

.breed-compact-actions .el-button,
.breed-compact-actions .upload-chip {
  width: 100%;
  min-height: 30px;
  justify-content: center;
  font-size: 13px;
}

.breed-detail-dialog {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}

.breed-detail-dialog > img {
  width: 150px;
  height: 150px;
  border-radius: 22px;
  object-fit: cover;
  background: #eef7ef;
}

.breed-detail-dialog h3 {
  margin: 0 0 4px;
  color: var(--text);
  font-size: 22px;
}

.breed-detail-grid.compact {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.breed-detail-grid.compact span {
  min-height: auto;
  padding: 8px 10px;
  font-size: 13px;
}

.breed-detail-grid.compact b {
  display: inline;
  margin: 0;
}

.content-card {
  min-height: 118px;
  padding: 18px;
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr) auto;
  gap: 16px;
  align-items: center;
  border-radius: 24px;
}

.content-card.no-thumb {
  min-height: auto;
  grid-template-columns: minmax(0, 1fr) auto;
}

.content-card.no-leading-thumb {
  min-height: auto;
  grid-template-columns: minmax(0, 1fr) auto;
}

.thumb {
  width: 112px;
  height: 82px;
  border-radius: 18px;
  object-fit: cover;
  background: #eef5f4;
}

.thumb.placeholder {
  display: grid;
  place-items: center;
  color: #78a99a;
  font-weight: 900;
}

.user-list-thumb {
  width: 74px;
  height: 74px;
  border-radius: 50%;
  border: 2px solid rgba(105, 151, 132, 0.25);
  box-shadow: 0 10px 24px rgba(76, 110, 99, 0.12);
}

.achievement-icon-preview {
  width: 82px;
  height: 82px;
  display: grid;
  place-items: center;
  justify-self: center;
  border-radius: 22px;
  background:
    linear-gradient(145deg, rgba(224, 245, 235, 0.95), rgba(255, 255, 255, 0.82));
  border: 1px solid rgba(105, 151, 132, 0.22);
  box-shadow: 0 14px 30px rgba(76, 110, 99, 0.1);
  font-size: 36px;
}

.row-title {
  margin-bottom: 7px;
  font-size: 18px;
  font-weight: 900;
}

.row-desc {
  color: var(--muted);
  font-size: 15px;
  line-height: 1.55;
}

.row-meta {
  margin-top: 10px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.actions {
  max-width: 360px;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}

.actions .el-button {
  border-radius: 999px;
}

.knowledge-side {
  margin-bottom: -6px;
}

.category-list {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.category-list button {
  min-height: 46px;
  padding: 0 14px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 0;
  border-radius: 16px;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.72);
}

.category-list button.active {
  background: #e2f6ee;
  color: #256e5a;
  font-weight: 800;
}

.filter-simulator {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 16px;
}

.permission-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(180px, 1fr));
  gap: 16px;
}

.permission-card {
  padding: 20px;
  border-radius: 24px;
}

.permission-card strong {
  font-size: 20px;
}

.upload-rule-banner {
  padding: 18px 22px;
  border-radius: 22px;
  background: rgba(255, 250, 226, 0.78);
}

.upload-rule-banner p {
  margin: 7px 0 0;
  color: var(--muted);
}

.upload-rules-page {
  display: grid;
  gap: 18px;
}

.global-atmosphere-page {
  gap: 10px;
}

.global-atmosphere-page .upload-rule-editor {
  padding: 16px 18px;
}

.global-atmosphere-page .upload-rule-switches label {
  min-height: 38px;
  padding: 0 12px;
}

.upload-rule-summary,
.upload-rule-editor {
  border: 1px solid rgba(255, 255, 255, 0.86);
  border-radius: var(--radius-lg);
  background: var(--panel);
  box-shadow: var(--shadow);
  backdrop-filter: blur(18px);
}

.upload-rule-summary {
  min-height: 108px;
  padding: 22px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.upload-rule-summary strong {
  color: var(--text);
  font-size: 22px;
}

.upload-rule-summary p {
  margin: 6px 0 0;
}

.upload-rule-editor {
  padding: 22px 24px;
}

.upload-rule-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.upload-rule-switches {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.upload-rule-switches label {
  min-height: 46px;
  padding: 0 14px;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.68);
}

.upload-rule-switches span {
  color: #40575d;
  font-weight: 800;
}

.atmosphere-switches label {
  min-width: 180px;
  justify-content: space-between;
}

.atmosphere-schedule-grid {
  margin-top: 10px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.atmosphere-schedule-card {
  min-width: 0;
  padding: 12px 14px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.68);
  border: 1px solid rgba(210, 226, 221, 0.82);
}

.atmosphere-schedule-card .card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.atmosphere-day-row {
  margin-top: 8px;
  display: grid;
  grid-template-columns: minmax(104px, 1.35fr) 78px 92px 92px 46px 56px;
  align-items: center;
  gap: 6px;
}

.atmosphere-schedule-card:nth-child(2) .atmosphere-day-row {
  grid-template-columns: minmax(108px, 1.35fr) 74px 82px 82px 64px 72px 64px 44px 52px;
  align-items: end;
}

.atmosphere-day-row .el-date-editor.el-input,
.atmosphere-day-row .el-input,
.atmosphere-day-row .el-input-number {
  width: 100%;
}

.atmosphere-param {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.atmosphere-param > span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
}

.atmosphere-day-row .el-input__wrapper,
.atmosphere-day-row .el-input-number .el-input__wrapper {
  padding-left: 8px;
  padding-right: 8px;
}

.atmosphere-day-row .el-input__inner {
  font-size: 13px;
}

.atmosphere-day-row .el-input-number__increase,
.atmosphere-day-row .el-input-number__decrease {
  width: 28px;
}

.atmosphere-day-row .el-button {
  min-width: 0;
  padding-left: 10px;
  padding-right: 10px;
}

.atmosphere-param.switch-field {
  justify-items: center;
}

.atmosphere-param.switch-field > span {
  justify-self: center;
}

.permission-checks {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 12px;
}

.permission-checks .el-checkbox {
  margin-right: 0;
}

.atmosphere-preview {
  margin-top: 18px;
  min-height: 88px;
  padding: 18px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(255, 245, 226, 0.92), rgba(246, 251, 249, 0.92));
  border: 1px solid rgba(255, 255, 255, 0.86);
}

.atmosphere-preview.gray {
  filter: grayscale(100%);
}

.atmosphere-preview strong {
  color: var(--text);
  font-size: 18px;
}

.atmosphere-preview p {
  margin: 6px 0 0;
  color: var(--muted);
}

.atmosphere-preview span {
  color: #ff7fa6;
  font-size: 22px;
  font-weight: 900;
  letter-spacing: 0;
}

.upload-rule-actions {
  margin-top: 18px;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.pager {
  display: flex;
  justify-content: flex-end;
}

.el-card,
.el-input__wrapper,
.el-textarea__inner,
.el-select__wrapper,
.el-button,
.el-tag {
  border-radius: 14px;
}

.el-input__wrapper,
.el-textarea__inner,
.el-select__wrapper {
  background: rgba(255, 255, 255, 0.72);
  box-shadow: inset 0 0 0 1px rgba(120, 150, 150, 0.12);
}

@media (max-width: 1320px) {
  .dashboard-layout { grid-template-columns: 1fr; }
  .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .operation-grid { grid-template-columns: 1fr; }
  .knowledge-page { grid-template-columns: 1fr; }
  .shop-layout { grid-template-columns: 1fr; }
  .category-admin-grid { grid-template-columns: 1fr; }
  .breed-profile-card { grid-template-columns: 1fr; }
  .breed-compact-row { grid-template-columns: 42px 72px 1fr; }
  .breed-compact-actions { grid-column: 1 / -1; grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .breed-compact-meta { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .circle-post-card { grid-template-columns: 60px minmax(0, 1fr); }
  .circle-media-preview,
  .circle-post-card .actions { grid-column: 1 / -1; }
  .home-operation-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .home-module-layout { grid-template-columns: 1fr; }
  .home-quote-status { position: static; }
  .quote-card-pool { grid-template-columns: 1fr; }
  .quote-pool-overview { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .breed-detail-dialog { grid-template-columns: 1fr; }
  .breed-detail-grid { grid-template-columns: 1fr; }
  .breed-library-head { align-items: flex-start; flex-direction: column; }
  .upload-rule-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .atmosphere-schedule-grid { grid-template-columns: 1fr; }
  .atmosphere-day-row { grid-template-columns: 1fr 92px 112px 112px; }
  .atmosphere-schedule-card:nth-child(2) .atmosphere-day-row {
    grid-template-columns: minmax(128px, 1fr) repeat(3, 92px) repeat(3, 74px) 44px 52px;
  }
  .atmosphere-day-row .el-switch,
  .atmosphere-day-row .el-button { justify-self: start; }
  .knowledge-topics { position: static; }
  .config-grid { grid-template-columns: 1fr; }
  .activity-panel { position: static; }
  .quick-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 760px) {
  .home-operation-hero,
  .quote-feature-card,
  .quote-toolbar {
    align-items: flex-start;
    flex-direction: column;
  }

  .home-operation-grid,
  .quote-card-pool,
  .quote-pool-overview {
    grid-template-columns: 1fr;
  }

  .home-list-card {
    grid-template-columns: 1fr;
  }

  .home-card-thumb {
    width: 100%;
  }

  .home-module-card,
  .home-image-field {
    grid-template-columns: 1fr;
    align-items: stretch;
    flex-direction: column;
  }

  .product-image-layout,
  .editor-two-col,
  .editor-three-col {
    grid-template-columns: 1fr;
  }
}


/* Keep management search controls aligned on wide admin pages. */
.toolbar-right {
  flex-wrap: nowrap;
}

.toolbar-right .el-input {
  width: 280px;
  flex: 0 0 280px;
}

@media (max-width: 900px) {
  .toolbar {
    align-items: flex-start;
    flex-direction: column;
  }

  .toolbar-right {
    width: 100%;
    flex-wrap: wrap;
  }

  .toolbar-right .el-input {
    width: 100%;
    flex: 1 1 260px;
  }
}