/*
 * v6 精修材质：统一左上方光源、前后景阴影、弧形高光与薄玻璃边缘。
 * 全部为静态 CSS 图层；植物和珐琅复用已压缩 WebP，不增加图片下载。
 */
:root {
  --ambient-shadow: rgba(43, 78, 48, 0.1);
  --contact-shadow: rgba(36, 70, 43, 0.12);
  --glass-bottom: rgba(105, 158, 117, 0.19);
  --glass-fill: rgba(227, 244, 232, 0.77);
  --soft-light: rgba(255, 249, 220, 0.72);
  --card-light: #fffefa;
  --card-shade: #f0f5ea;
}
:root[data-skin="iris"] {
  --ambient-shadow: rgba(93, 59, 134, 0.13);
  --contact-shadow: rgba(77, 42, 117, 0.13);
  --glass-bottom: rgba(156, 117, 199, 0.24);
  --glass-fill: rgba(238, 225, 254, 0.75);
  --soft-light: rgba(244, 216, 248, 0.7);
  --card-light: #fffaff;
  --card-shade: #eee3fa;
}
.garden-shell {
  position: relative;
  overflow: clip;
  background:
    radial-gradient(ellipse at 17% 12%, #fff 0%, transparent 34%),
    radial-gradient(ellipse at 96% 34%, var(--soft-light), transparent 35%),
    linear-gradient(
      135deg,
      var(--card-light),
      var(--page-bg) 46%,
      var(--card-shade)
    );
}
/* 把植物的实际轮廓投成日光影，空白区也有明确方向和纵深。 */
.topbar::after {
  position: absolute;
  content: "";
  top: -22px;
  right: -24px;
  width: min(560px, 110vw);
  height: 198px;
  background: var(--ink-strong);
  -webkit-mask: var(--botanical) right top / auto 200px no-repeat;
  mask: var(--botanical) right top / auto 200px no-repeat;
  opacity: 0.075;
  filter: blur(5px);
  transform: translate(-55px, 28px) skewX(-17deg);
  pointer-events: none;
}
/* 紫色参照丝绸折光，避免把整朵花投成生硬的大块剪影。 */
:root[data-skin="iris"] .topbar::after {
  top: -30px;
  right: -35px;
  height: 220px;
  background:
    linear-gradient(
      133deg,
      transparent 38%,
      rgba(171, 138, 221, 0.24) 44%,
      #fff 46%,
      transparent 50%
    ),
    linear-gradient(
      135deg,
      transparent 58%,
      rgba(163, 126, 208, 0.2) 64%,
      #fff 65%,
      transparent 70%
    );
  -webkit-mask: none;
  mask: none;
  opacity: 0.7;
  filter: blur(4px);
  transform: none;
}
.topbar::before {
  z-index: 1;
}
.topbar-main,
.account-line,
.topbar-utilities {
  z-index: 2;
}
.skin-switch,
.icon-button,
.topbar-text-button {
  background:
    radial-gradient(
        ellipse at 28% 0%,
        #fff 0%,
        rgba(255, 255, 255, 0.88) 25%,
        transparent 68%
      )
      padding-box,
    linear-gradient(145deg, rgba(255, 255, 255, 0.78), var(--glass-fill))
      padding-box,
    var(--metal-edge) border-box;
  border: 1px solid transparent;
  box-shadow:
    inset 0 2px 2px #fff,
    inset 0 -3px 5px var(--glass-bottom),
    0 5px 10px var(--ambient-shadow),
    0 1px 2px var(--contact-shadow);
}
.garden-account-tab.is-expanded,
.button--primary,
.button--challenge {
  background:
    radial-gradient(
        ellipse at 32% -17%,
        rgba(255, 255, 255, 0.86),
        transparent 56%
      )
      padding-box,
    linear-gradient(145deg, rgba(255, 255, 255, 0.18), transparent 38%)
      padding-box,
    var(--enamel) padding-box,
    var(--metal-edge) border-box;
  box-shadow:
    inset 0 2px 3px rgba(255, 255, 255, 0.84),
    inset 0 -3px 5px rgba(34, 26, 55, 0.18),
    0 6px 12px var(--ambient-shadow);
}
.id-card--primary,
.home-selection-empty {
  background:
    radial-gradient(ellipse at 12% 0%, #fff 5%, transparent 57%) padding-box,
    linear-gradient(132deg, var(--card-light), var(--glass-fill)) padding-box,
    var(--metal-edge) border-box;
  box-shadow:
    inset 0 3px 3px #fff,
    inset -2px -3px 5px var(--glass-bottom),
    0 12px 25px var(--ambient-shadow),
    0 2px 4px var(--contact-shadow);
}
.id-card--primary::after {
  border-width: 1.5px;
  border-top-color: #fff;
  border-left-color: rgba(255, 255, 255, 0.95);
  border-right-color: rgba(204, 172, 109, 0.58);
  box-shadow: inset -1px -1px 2px rgba(255, 255, 255, 0.7);
}
:root[data-skin="green"] .id-card--primary .id-card-top {
  position: relative;
  isolation: isolate;
  background:
    radial-gradient(
      ellipse at 20% -15%,
      rgba(234, 255, 223, 0.82),
      transparent 52%
    ),
    linear-gradient(165deg, rgba(255, 255, 255, 0.2), transparent 27%),
    var(--enamel);
  box-shadow:
    inset 0 2px 3px #dcf8cd,
    inset 0 -2px 3px rgba(11, 68, 28, 0.18);
}
:root[data-skin="green"] .id-card--primary .id-card-top::after {
  position: absolute;
  z-index: -1;
  content: "";
  inset: 0;
  background: var(--botanical) right center / auto 150px no-repeat;
  opacity: 0.38;
  filter: blur(2px);
  pointer-events: none;
}
/* 紫色资源是一张折光面板；绿色按原图分成两条薄玻璃资源带。 */
.resource-grid {
  display: grid;
  grid-template-columns: 1fr;
}
.resource-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  min-width: 0;
}
:root[data-skin="iris"] .resource-grid {
  background:
    radial-gradient(ellipse at 14% 0%, #fff, transparent 70%),
    linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.93),
      rgba(238, 228, 251, 0.87)
    );
  border-color: rgba(255, 255, 255, 0.98);
  box-shadow:
    inset 0 2px 4px #fff,
    inset -2px -3px 5px rgba(150, 119, 190, 0.2),
    0 5px 10px rgba(107, 77, 138, 0.08);
}
:root[data-skin="iris"] .resource-row + .resource-row {
  border-top: 1px solid var(--stroke);
}
:root[data-skin="green"] .resource-grid {
  padding: 0;
  gap: 8px;
  border: 0;
  background: none;
  box-shadow: none;
  overflow: visible;
}
:root[data-skin="green"] .resource-grid::after {
  content: none;
}
:root[data-skin="green"] .resource-row {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.93);
  border-radius: 15px;
  background: linear-gradient(
    120deg,
    rgba(255, 255, 255, 0.83),
    rgba(219, 238, 224, 0.77)
  );
  box-shadow:
    inset 0 2px 3px #fff,
    inset -2px -2px 4px rgba(111, 163, 125, 0.19),
    0 3px 6px rgba(69, 107, 73, 0.07);
}
:root[data-skin="green"] .resource-row::after {
  position: absolute;
  z-index: -1;
  content: "";
  inset: 0;
  background:
    linear-gradient(
      110deg,
      transparent 40%,
      rgba(255, 255, 255, 0.9) 42%,
      transparent 66%
    ),
    var(--botanical) right center / auto 95px no-repeat;
  opacity: 0.32;
  pointer-events: none;
}
.subpage-card,
.id-card--compact,
.modal {
  box-shadow:
    inset 0 2px 2px #fff,
    0 9px 22px var(--ambient-shadow),
    0 1px 3px var(--contact-shadow);
}
.shortcut-nav {
  border-top-color: #fff;
  background: linear-gradient(
    165deg,
    #fff 3%,
    rgba(255, 255, 255, 0.96) 48%,
    var(--glass-fill)
  );
  box-shadow:
    inset 0 2px 3px #fff,
    0 -5px 20px var(--ambient-shadow);
}
.button--danger {
  box-shadow:
    inset 0 2px 2px #ffe8e5,
    inset 0 -3px 4px rgba(198, 58, 88, 0.18),
    0 5px 10px rgba(205, 93, 103, 0.14);
}
.button:disabled {
  box-shadow: inset 0 1px 1px #fff;
}

/* 业务弹窗按内容居中收口；长表单只滚动正文，确认与取消始终可触达。 */
.modal-layer {
  align-items: center;
  padding: max(16px, env(safe-area-inset-top)) 16px
    max(16px, env(safe-area-inset-bottom));
  overflow: hidden;
}
.modal,
.modal.batch-modal,
.modal--notice {
  display: flex;
  flex-direction: column;
  width: min(400px, 100%);
  height: auto;
  min-height: 0;
  max-height: min(640px, calc(100dvh - 48px));
  overflow: hidden;
  border-radius: 20px;
}
.modal > form {
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}
.modal-head {
  flex-shrink: 0;
  align-items: center;
  padding: 11px 16px;
}
.modal-kicker {
  display: none;
}
.modal-title {
  font-size: 1.125rem;
  line-height: 1.4;
}
.modal .close-button {
  width: 36px;
  height: 36px;
}
.modal-body {
  flex: 1 1 auto;
  min-height: 0;
  padding: 14px 16px;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.modal-foot {
  flex-shrink: 0;
  padding: 11px 16px;
  gap: 8px;
}
.modal-foot .button {
  min-height: 42px;
}
.modal-description {
  padding: 9px 11px;
  line-height: 1.55;
}
.modal .form-grid {
  gap: 11px;
}
.modal .form-field {
  gap: 5px;
}
.modal .field-control {
  min-height: 42px;
  padding: 9px 11px;
}
.modal .challenge-choice {
  min-height: 60px;
  padding: 11px;
  margin-top: 9px;
}
.challenge-choice-copy {
  flex: 1;
}
.challenge-choice-title,
.challenge-choice-note {
  display: block;
}
.modal .notice-content {
  min-height: 0;
  max-height: none;
  padding: 12px;
  overflow: visible;
  line-height: 1.65;
}
.text-size-modal .text-size-preview {
  margin-top: 14px;
  line-height: 1.6;
}
.skin-modal .skin-options {
  gap: 10px;
}
.skin-modal .skin-option {
  grid-template-columns: 56px minmax(0, 1fr) 17px;
  padding: 10px;
  gap: 10px;
  border-radius: 14px;
}
.skin-modal .skin-preview {
  height: 82px;
}
.skin-option-copy strong {
  font-size: 0.96rem;
}
.skin-modal .skin-preview-detail {
  top: 74px;
}
.skin-modal .skin-preview-card {
  height: 14px;
}
.modal .land-detail-hero {
  padding: 12px;
  gap: 12px;
}
.modal .land-detail-media {
  width: 56px;
  height: 64px;
}
.modal .land-detail-list {
  margin: 10px 0;
}
.modal .land-detail-field {
  padding: 8px 0;
}
.modal .batch-account-list {
  max-height: none;
  overflow: visible;
}
.modal .batch-result-panel {
  padding: 9px;
}
@media (max-width: 360px) {
  .modal-layer {
    padding-left: 12px;
    padding-right: 12px;
  }
  .modal-head,
  .modal-body,
  .modal-foot {
    padding-left: 13px;
    padding-right: 13px;
  }
}

/* 模块入口与模块页：每次只挂载所选内容，共用 controller 中的全部草稿。 */
.settings-module-heading {
  padding: 3px 1px 2px;
}
.settings-module-heading h1,
.settings-module-title {
  color: var(--ink-strong);
  font-size: 1.4rem;
  line-height: 1.35;
}
.settings-module-heading p,
.settings-module-page-head p {
  color: var(--ink-muted);
  font-size: 0.8rem;
  margin-top: 5px;
  line-height: 1.6;
}
.settings-draft-state {
  display: inline-block;
  margin-top: 8px;
  padding: 3px 9px;
  border-radius: 999px;
  color: #946225;
  background: #fff0d1;
  font-size: 0.75rem;
}
.settings-module-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.settings-module-card {
  position: relative;
  display: grid;
  grid-template-columns: 35px minmax(0, 1fr);
  align-items: center;
  gap: 6px 9px;
  min-width: 0;
  padding: 13px 13px;
  overflow: hidden;
  text-align: left;
  border: 1px solid transparent;
  border-radius: 19px;
  color: var(--ink-strong);
  background:
    radial-gradient(ellipse at 10% 0%, #fff, transparent 78%) padding-box,
    linear-gradient(140deg, var(--card-light), var(--card-shade)) padding-box,
    var(--metal-edge) border-box;
  box-shadow:
    inset 0 2px 2px #fff,
    inset -1px -2px 3px var(--glass-bottom),
    0 6px 14px var(--ambient-shadow),
    0 1px 2px var(--contact-shadow);
}
.settings-module-card:hover {
  transform: translateY(-2px);
  box-shadow:
    inset 0 2px 2px #fff,
    0 10px 18px var(--ambient-shadow);
}
.settings-module-card strong {
  font-size: 0.96rem;
  line-height: 1.3;
  font-weight: 650;
}
.settings-module-card small {
  grid-column: 1 / -1;
  font-size: 0.72rem;
  line-height: 1.5;
  color: var(--ink-muted);
}
.settings-module-meta {
  grid-column: 1 / -1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.68rem;
  color: var(--accent);
  border-top: 1px solid var(--stroke);
  padding-top: 7px;
}
.settings-module-meta > span {
  font-size: 1rem;
}
.settings-module-icon {
  display: grid;
  place-items: center;
  width: 35px;
  height: 35px;
  border-radius: 12px;
  color: var(--accent);
  background: linear-gradient(145deg, #fff, var(--accent-soft));
  box-shadow:
    inset 0 1px 1px #fff,
    0 2px 4px var(--ambient-shadow);
}
.settings-module-icon svg {
  width: 25px;
  height: 25px;
  filter: drop-shadow(0 1px 1px rgba(194, 165, 107, 0.3));
}
.settings-module-icon--seed,
.settings-module-icon--diamond {
  background: center / contain no-repeat;
  box-shadow: none;
}
.settings-module-icon--seed {
  background-image: var(--icon-exp);
}
.settings-module-icon--diamond {
  background-image: var(--icon-diamond);
}
.settings-module-icon--seed svg,
.settings-module-icon--diamond svg {
  opacity: 0;
}
.settings-module-page-head {
  display: grid;
  gap: 12px;
  padding: 3px 0 2px;
}
.settings-module-back {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  justify-self: stretch;
  width: 100%;
  min-height: 52px;
  padding: 12px 16px;
  color: var(--accent);
  border: 1px solid transparent;
  border-radius: 14px;
  background:
    linear-gradient(140deg, #fff, var(--accent-soft)) padding-box,
    var(--metal-edge) border-box;
  box-shadow:
    inset 0 2px 2px #fff,
    0 4px 10px var(--ambient-shadow);
  font-size: 1rem;
  font-weight: 750;
}
.settings-module-back > span {
  font-size: 1.2rem;
}
.settings-page .settings-section {
  border-color: rgba(218, 194, 149, 0.68);
  background: linear-gradient(145deg, #fff, var(--surface));
  box-shadow:
    inset 0 2px 2px #fff,
    0 7px 18px var(--ambient-shadow);
}
.settings-page .settings-section__head {
  background: linear-gradient(
    130deg,
    rgba(255, 255, 255, 0.93),
    var(--accent-soft)
  );
}
.settings-page .settings-section__eyebrow {
  display: none;
}
.settings-page .settings-section h2 {
  font-size: 1rem;
}
.settings-page .settings-toolbar {
  /* 长模块里也能直接保存；只固定工具栏，不把整页做成滚动容器。 */
  position: sticky;
  top: 10px;
  z-index: 10;
  padding: 12px;
  gap: 10px;
  box-shadow:
    inset 0 2px 2px #fff,
    0 7px 18px var(--ambient-shadow);
}
.settings-page .settings-id-selector {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 9px;
}
.settings-page .settings-id-selector select {
  min-height: 44px;
  padding-left: 10px;
}
.settings-page .settings-toolbar .settings-button {
  min-height: 44px;
}
.settings-page .settings-feedback {
  padding: 9px 12px;
  font-size: 0.82rem;
  font-weight: 600;
}
/* 独立模块已有页标题，去掉首张卡片的重复标题，给实际控件留空间。 */
.settings-page:is(
    [data-settings-module="plant"],
    [data-settings-module="yise"],
    [data-settings-module="challenge"],
    [data-settings-module="guild"],
    [data-settings-module="events"],
    [data-settings-module="daily"]
  )
  > .settings-section:first-of-type
  > .settings-section__head {
  display: none;
}
.settings-page .settings-button--primary {
  background:
    radial-gradient(
      ellipse at 30% 0%,
      rgba(255, 255, 255, 0.45),
      transparent 62%
    ),
    var(--enamel);
  color: #fff;
  box-shadow:
    inset 0 2px 2px rgba(255, 255, 255, 0.8),
    inset 0 -2px 4px rgba(40, 30, 60, 0.14),
    0 4px 8px var(--ambient-shadow);
}
@media (max-width: 360px) {
  .settings-module-grid {
    gap: 9px;
  }
  .settings-module-card {
    grid-template-columns: 31px minmax(0, 1fr);
    padding: 13px 10px;
    gap: 6px;
  }
  .settings-module-icon {
    width: 29px;
    height: 34px;
  }
  .settings-module-card strong {
    font-size: 0.86rem;
  }
  .settings-module-card small {
    font-size: 0.69rem;
  }
}
@media (prefers-reduced-motion: reduce) {
  .settings-module-card:hover {
    transform: none;
  }
}

/* v6 品牌与控制组材质；每个 ID 的独立卡片在本文件末尾统一适配。 */
.topbar {
  padding-bottom: 20px;
}
.topbar-main {
  min-height: 54px;
}
:root[data-skin="iris"] .brand-name {
  font-size: clamp(1.6rem, 9.6vw, 2.35rem);
  letter-spacing: 0.035em;
  color: #35166d;
}
:root[data-skin="green"] .brand-name {
  font-size: clamp(1.6rem, 8.8vw, 2.15rem);
  color: #092b1b;
}
:root[data-skin="green"] .brand-mark {
  order: 2;
}
.topbar-console {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: 8px;
  margin-top: 21px;
}
.topbar-console > .account-line,
.topbar-console > .topbar-utilities {
  min-width: 0;
  min-height: 52px;
  margin: 0;
  border: 1px solid rgba(255, 255, 255, 0.98);
  border-radius: 999px;
  background:
    radial-gradient(ellipse at 20% 0%, #fff, transparent 80%),
    linear-gradient(140deg, rgba(255, 255, 255, 0.94), var(--glass-fill));
  box-shadow:
    inset 0 2px 2px #fff,
    inset 0 -2px 4px var(--glass-bottom),
    0 8px 15px var(--ambient-shadow);
}
.topbar-console > .account-line {
  display: grid;
  grid-template-columns: 25px minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 4px;
  padding: 5px 7px;
}
.account-avatar {
  display: grid;
  width: 25px;
  height: 25px;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: var(--enamel);
  box-shadow:
    inset 0 1px 2px #fff,
    0 2px 3px var(--ambient-shadow);
}
.account-avatar svg {
  width: 19px;
  height: 19px;
}
.topbar-console .account-chip {
  display: grid;
  align-content: center;
  gap: 1px;
  margin: 0;
  min-width: 0;
  overflow: hidden;
  font-size: 0.77rem;
}
.topbar-console .account-chip strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.topbar-console .account-source {
  width: fit-content;
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink-muted);
  font-size: 0.6rem;
  line-height: 1.35;
}
.account-line .topbar-update-button,
.account-line .account-session-button {
  min-width: 28px;
  min-height: 40px;
  margin: 0;
  padding: 3px;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  color: var(--ink-strong);
  font-size: 0.75rem;
  font-weight: 600;
  white-space: nowrap;
}
.account-line .topbar-update-button {
  border-left: 1px solid var(--stroke-strong);
  border-right: 1px solid var(--stroke-strong);
  padding-left: 4px;
  padding-right: 4px;
}
.topbar-console > .topbar-utilities {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 4px;
  padding: 4px 5px;
}
.topbar-console .topbar-text-button,
.topbar-console .topbar-refresh-button {
  min-width: 0;
  min-height: 40px;
  padding: 4px 5px;
  gap: 3px;
  border: 1px solid rgba(255, 255, 255, 0.98);
  border-radius: 999px;
  color: var(--accent);
  background:
    radial-gradient(ellipse at 30% 0%, #fff, transparent 75%),
    linear-gradient(145deg, #fff, var(--accent-tint));
  box-shadow:
    inset 0 2px 2px #fff,
    inset 0 -1px 3px var(--glass-bottom),
    0 2px 4px var(--ambient-shadow);
  font-size: 0.85rem;
  font-weight: 650;
  white-space: nowrap;
}
.topbar-console .topbar-text-button {
  padding-left: 3px;
  padding-right: 3px;
}
.topbar-console .topbar-text-button > span:first-child {
  font-size: 0.86rem;
}
.topbar-console .topbar-refresh-button svg {
  width: 17px;
  height: 17px;
}
.topbar-console .updated-clock {
  flex-basis: auto;
  margin: 0;
  color: var(--ink-strong);
  font-size: 0.7rem;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.home-heading h1 {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 1.5rem;
}
.home-heading h1 > svg {
  width: 29px;
  height: 33px;
  background: var(--icon-exp) center / contain no-repeat;
  stroke: transparent;
}
.home-heading h1 span {
  margin-left: 1px;
  font-size: 0.7rem;
}
.home-batch-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-height: 44px;
  padding: 7px 11px;
  border: 1px solid #fff;
  border-radius: 999px;
  color: var(--accent);
  background: linear-gradient(135deg, #fff, var(--accent-tint));
  box-shadow:
    inset 0 2px 2px #fff,
    0 5px 12px var(--ambient-shadow);
  font-size: 0.82rem;
  font-weight: 650;
  white-space: nowrap;
}
.home-batch-button svg {
  width: 19px;
  height: 19px;
}
.home-selection-empty {
  min-height: 0;
  margin: 12px 0;
  padding: 13px 16px;
  border-radius: 16px;
  background: var(--surface);
  font-size: 0.85rem;
  color: var(--ink-muted);
  box-shadow:
    inset 0 1px 2px #fff,
    0 4px 10px var(--ambient-shadow);
}
.home-selection-empty::after {
  content: none;
}
.id-summary {
  position: relative;
}
:root[data-skin="iris"] .id-summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 7px 24px;
  padding: 3px 0 10px;
}
:root[data-skin="iris"] .id-summary::after {
  position: absolute;
  content: "";
  top: 8px;
  bottom: 10px;
  left: 50%;
  width: 1px;
  background: var(--metal-edge);
}
:root[data-skin="iris"] .id-summary .id-card-top,
:root[data-skin="iris"] .id-summary .primary-id-metrics {
  display: contents;
}
:root[data-skin="iris"] .id-card-top > div:first-child {
  grid-column: 1;
  grid-row: 1 / span 2;
  align-self: center;
}
:root[data-skin="iris"] .id-card-state-actions {
  grid-column: 2;
  grid-row: 1;
  justify-content: space-between;
  gap: 2px;
}
:root[data-skin="iris"] .id-card-state-actions .worker-state {
  padding: 0;
  background: none;
}
:root[data-skin="iris"] .primary-id-metrics > div:first-child {
  grid-column: 1;
  grid-row: 3;
  align-self: end;
}
:root[data-skin="iris"] .primary-id-metrics > div:nth-child(2),
:root[data-skin="iris"] .primary-id-metrics > div:nth-child(3) {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  padding: 0;
  border: 0;
  gap: 3px 6px;
  grid-column: 2;
}
:root[data-skin="iris"] .primary-id-metrics > div:nth-child(2) {
  grid-row: 2;
}
:root[data-skin="iris"] .primary-id-metrics > div:nth-child(3) {
  grid-row: 3;
}
:root[data-skin="iris"] .id-summary .flower-id {
  font-size: 1.5rem;
}
:root[data-skin="green"] .id-card--primary .id-card-top {
  margin: 0 0 13px;
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
}
:root[data-skin="green"] .id-card--primary .id-card-top::after {
  content: none;
}
:root[data-skin="green"]
  .id-card--primary
  :is(.id-kicker, .flower-id, .id-card-collapse) {
  color: var(--ink-strong);
}
:root[data-skin="green"] .id-card--primary .worker-state--running {
  background: var(--accent-soft);
  color: var(--accent);
}
:root[data-skin="green"] .primary-id-metrics .expires-time--green {
  font-size: 1.55rem;
  color: var(--ink-strong);
}
.id-actions--primary {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 16px;
}
.id-actions--primary .button {
  min-height: 46px;
  border-radius: 15px;
  font-size: 0.88rem;
}
.quota-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.95fr) 94px;
  grid-template-areas: "heading heading actions" "days operations actions";
  gap: 9px 11px;
  padding: 17px;
}
.quota-heading {
  grid-area: heading;
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 1rem;
  font-weight: 650;
}
.quota-heading svg {
  width: 22px;
  height: 22px;
}
.quota-lead {
  grid-area: days;
}
.quota-flower {
  display: none;
}
.quota-metrics {
  grid-area: operations;
  margin: 0;
  padding-left: 10px;
}
.quota-menu-wrap {
  grid-area: actions;
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin: 0;
}
.quota-action {
  padding: 8px;
  border-radius: 13px;
  box-shadow:
    inset 0 2px 2px #fff,
    0 3px 7px var(--ambient-shadow);
}
:root[data-skin="iris"] .quota-card {
  background:
    radial-gradient(
      ellipse at 18% -12%,
      rgba(255, 255, 255, 0.58),
      transparent 55%
    ),
    linear-gradient(160deg, #9678d4, #5d31a4);
  border-color: #e6cda0;
  box-shadow:
    inset 0 2px 3px #fff,
    inset 0 -2px 4px #462281,
    0 8px 18px var(--ambient-shadow);
}
:root[data-skin="iris"] .quota-heading {
  color: #fff;
}
:root[data-skin="iris"] .quota-card .quota-value > span,
:root[data-skin="iris"] .quota-card .metric-value small {
  color: rgba(255, 255, 255, 0.92);
}
/* 大字模式优先给账户与操作足够宽度，不用微小字号硬挤在同一行。 */
@media (max-width: 480px) {
  :root[data-text-mode="large"] .topbar-console {
    grid-template-columns: 1fr;
    gap: 7px;
  }
  :root[data-text-mode="large"] .topbar-console .account-chip {
    font-size: 0.84rem;
  }
}
@media (max-width: 360px) {
  .topbar-console {
    grid-template-columns: 1fr;
    gap: 7px;
  }
  .topbar-console > .account-line {
    grid-template-columns: 27px minmax(0, 1fr) auto auto;
    padding-left: 11px;
    padding-right: 10px;
  }
  .topbar-console .account-chip {
    font-size: 0.84rem;
  }
  .topbar-console .topbar-utilities {
    grid-template-columns: 1fr 1fr auto;
    padding-left: 9px;
    padding-right: 9px;
  }
  .topbar-console .topbar-text-button,
  .topbar-console .topbar-refresh-button {
    font-size: 0.84rem;
  }
  .home-heading h1 {
    font-size: 1.25rem;
    gap: 4px;
  }
  .home-heading h1 > svg {
    width: 25px;
  }
  .home-batch-button {
    padding-left: 8px;
    padding-right: 8px;
    font-size: 0.76rem;
  }
  :root[data-skin="iris"] .id-summary {
    gap: 6px 16px;
  }
  :root[data-skin="iris"] .id-summary .flower-id {
    font-size: 1.22rem;
  }
  .quota-card {
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr) 78px;
    padding: 14px 12px;
    gap: 8px;
  }
}

/* 每个 ID 是独立卡片：展开位置留在原列表中，多个花园可同时查看。 */
.quota-card {
  margin: 0 0 20px;
}
.id-garden-heading {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 12px;
  margin-bottom: 15px;
  border-bottom: 1px solid var(--stroke);
}
.id-garden-heading h2 {
  font-size: 1.13rem;
  font-weight: 700;
  color: var(--ink-strong);
}
.id-garden-heading > svg {
  width: 27px;
  height: 29px;
  background: var(--icon-exp) center / contain no-repeat;
  stroke: transparent;
}
.id-card--compact {
  border: 1px solid transparent;
  background:
    radial-gradient(ellipse at 12% 0%, #fff, transparent 65%) padding-box,
    linear-gradient(145deg, var(--card-light), var(--glass-fill)) padding-box,
    var(--metal-edge) border-box;
  box-shadow: inset 0 2px 2px #fff, inset 0 -2px 3px var(--glass-bottom),
    0 6px 14px var(--ambient-shadow);
}
.id-card--compact .compact-id {
  font-size: 1.15rem;
}
/* 控制组按精修图区分：账户、更新与退出一组；字号与刷新为独立玻璃按钮。 */
.topbar-console {
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
}
.topbar-console > .account-line {
  grid-template-columns: 25px minmax(0, 1fr) auto auto;
}
.topbar-console .account-chip {
  font-size: 0.84rem;
}
.topbar-console .account-source {
  display: none;
}
.topbar-console .updated-clock {
  grid-column: 1 / -1;
  justify-self: end;
  font-weight: 500;
  color: var(--ink-muted);
  font-size: 0.7rem;
  padding: 1px 5px 0;
}
.topbar-console > .topbar-utilities {
  grid-template-columns: 1fr 1fr;
  gap: 3px 5px;
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
  border-radius: 0;
}
.topbar-console > .account-line {
  align-self: start;
  min-height: 46px;
}
.topbar-console .topbar-text-button,
.topbar-console .topbar-refresh-button {
  min-height: 46px;
  font-size: 0.88rem;
  border: 1px solid transparent;
  background:
    radial-gradient(ellipse at 25% 0%, #fff, transparent 78%) padding-box,
    linear-gradient(145deg, #fff, var(--glass-fill)) padding-box,
    var(--metal-edge) border-box;
  box-shadow: inset 0 2px 2px #fff, inset 0 -2px 4px var(--glass-bottom),
    0 5px 10px var(--ambient-shadow);
}
.topbar-console .topbar-refresh-button svg {
  width: 21px;
  height: 21px;
}
:root[data-skin="green"] .topbar-console > .account-line {
  background: none;
  border-color: transparent;
  box-shadow: none;
}
:root[data-skin="green"] .account-avatar {
  background: none;
  box-shadow: none;
  color: var(--ink-muted);
}
@media (max-width: 360px) {
  .topbar-console {
    grid-template-columns: 1fr;
  }
  .topbar-console > .topbar-utilities {
    grid-template-columns: 1fr 1fr auto;
  }
  .topbar-console .updated-clock {
    grid-column: auto;
  }
}
@media (max-width: 480px) {
  :root[data-text-mode="large"] .topbar-console {
    grid-template-columns: 1fr;
  }
}

/* 手机将两组控制分行，保留精修图的胶囊与独立按钮，并给完整功能名称足够空间。 */
@media (max-width: 600px) {
  .topbar-console {
    grid-template-columns: 1fr;
    gap: 10px;
    margin-top: 18px;
  }
  .topbar-console > .account-line {
    grid-template-columns: 30px minmax(0, 1fr) auto auto;
    gap: 8px;
    padding: 4px 12px;
  }
  .topbar-console .account-chip {
    font-size: 0.94rem;
  }
  .account-line .topbar-update-button,
  .account-line .account-session-button {
    min-height: 44px;
    min-width: 44px;
    padding: 4px 8px;
    font-size: 0.83rem;
  }
  .topbar-console > .topbar-utilities {
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.3fr) minmax(0, 1.1fr);
    gap: 7px;
    padding: 0;
  }
  .topbar-console .topbar-text-button,
  .topbar-console .topbar-refresh-button,
  .topbar-console .home-batch-button {
    gap: 5px;
    padding: 7px 6px;
    min-height: 44px;
    font-size: 0.8rem;
  }
  .topbar-console .home-batch-button {
    border: 1px solid transparent;
    background: linear-gradient(140deg, #fff, var(--glass-fill)) padding-box,
      var(--metal-edge) border-box;
    box-shadow: inset 0 2px 2px #fff, inset 0 -2px 4px var(--glass-bottom),
      0 5px 10px var(--ambient-shadow);
  }
  .topbar-console .updated-clock {
    grid-column: 1 / -1;
    padding: 0 4px;
  }
}
@media (max-width: 360px) {
  :root[data-text-mode="large"] .topbar-console > .topbar-utilities {
    grid-template-columns: 1fr 1.5fr;
  }
  :root[data-text-mode="large"] .topbar-console .home-batch-button {
    grid-column: 1 / -1;
  }
}