/* ====== 引入设计系统（tokens → toolkit，全站统一） ====== */
@import url('../../ds/v1/toolkit.css');

/* ====== nickname 工具特有样式（仅保留特有规则） ====== */
}

}

html[data-theme="dark"] {
}

html[data-theme="light"] {
}

* { box-sizing: border-box; }

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC",
    "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
  background: var(--ds-bg);
  color: var(--ds-text);
  margin: 0;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

.ds-header__inner { display: flex; align-items: center; justify-content: space-between; min-height: 60px; }
.ds-header__brand { display: flex; align-items: center; gap: 8px; text-decoration: none; color: var(--ds-text); }
.ds-header__logo { font-size: 22px; line-height: 1; font-weight: 700; letter-spacing: 0.02em; width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; background: var(--ds-accent); color: var(--ds-on-accent); border-radius: var(--ds-radius-sm); }
.ds-header__title { font-size: 18px; font-weight: 700; }
.ds-header__actions { display: flex; gap: 8px; }
.ds-header__lang { font-size: 13px; }
/* hero 样式由 toolkit 统一提供（全站一致） */
.ds-panel__title { font-size: 18px; margin: 0 0 16px; }
.ds-btn--primary:hover { background: var(--ds-accent-hover); }
.ds-btn--ghost:hover { color: var(--ds-text); border-color: var(--ds-accent); }
.ds-field__label { display: block; font-size: 14px; font-weight: 500; color: var(--ds-text-soft); margin-bottom: 6px; }
.ds-field__input { width: 100%; padding: 10px 12px; border: 1px solid var(--ds-border); border-radius: var(--ds-radius-sm); background: var(--ds-bg); color: var(--ds-text); font-size: 15px; }
.ds-field__input:focus { outline: none; border-color: var(--ds-accent); box-shadow: 0 0 0 3px var(--ds-bg-soft); }
.ds-field__hint { display: block; margin-top: 6px; font-size: 12px; color: var(--ds-text-soft); }
.ds-field__select { padding: 8px 12px; border: 1px solid var(--ds-border); border-radius: var(--ds-radius-sm); background: var(--ds-bg); color: var(--ds-text); font-size: 14px; cursor: pointer; }
.ds-field__select:focus { outline: none; border-color: var(--ds-accent); }
.ds-actions { margin-top: 8px; }

.ds-seg { display: inline-flex; border: 1px solid var(--ds-border); border-radius: var(--ds-radius-sm); overflow: hidden; }
.ds-seg__item { padding: 8px 20px; border: none; background: var(--ds-bg); color: var(--ds-text-soft); cursor: pointer; font-size: 14px; font-weight: 500; transition: background 0.15s, color 0.15s; }
.ds-seg__item:hover { background: var(--ds-bg-soft); }
.ds-seg__item.is-active { background: var(--ds-accent); color: var(--ds-on-accent); }

.ds-style-grid { display: flex; flex-wrap: wrap; gap: 8px; }
.ds-style-btn { padding: 8px 16px; border: 1px solid var(--ds-border); border-radius: var(--ds-radius-sm); background: var(--ds-bg); color: var(--ds-text-soft); cursor: pointer; font-size: 14px; font-weight: 500; transition: all 0.15s; }
.ds-style-btn:hover { border-color: var(--ds-accent); color: var(--ds-text); }
.ds-style-btn.is-active { background: var(--ds-accent); color: var(--ds-on-accent); border-color: var(--ds-accent); }

.ds-format-row { display: flex; flex-wrap: wrap; gap: 16px; }
.ds-format-item { display: flex; flex-direction: column; gap: 4px; }
.ds-format-label { font-size: 12px; color: var(--ds-text-soft); }

.ds-qty-row { display: flex; gap: 8px; }
.ds-qty-btn { width: 48px; height: 40px; border: 1px solid var(--ds-border); border-radius: var(--ds-radius-sm); background: var(--ds-bg); color: var(--ds-text-soft); cursor: pointer; font-size: 15px; font-weight: 600; transition: all 0.15s; }
.ds-qty-btn:hover { border-color: var(--ds-accent); color: var(--ds-text); }
.ds-qty-btn.is-active { background: var(--ds-accent); color: var(--ds-on-accent); border-color: var(--ds-accent); }

.ds-nick-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; border: 1px solid var(--ds-border); border-radius: var(--ds-radius-sm); background: var(--ds-bg); margin-bottom: 8px; }
.ds-nick-text { font-size: 16px; font-weight: 500; word-break: break-all; }


.ds-seo__title { font-size: 18px; margin: 0 0 10px; }

.ds-footer__inner { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
.ds-footer__contact { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; }
.ds-footer__contact a { color: var(--ds-text-soft); text-decoration: none; }
.ds-footer__contact a:hover { color: var(--ds-accent); }
.ds-footer__sep { color: var(--ds-text-soft); opacity: 0.5; }
.ds-footer__copyright { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; color: var(--ds-text-soft); font-size: 13px; }
.ds-footer__filing { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; font-size: 12px; color: var(--ds-text-soft); }
.ds-footer__filing a { color: var(--ds-text-soft); text-decoration: none; }
.ds-footer__filing a:hover { color: var(--ds-accent); }
.ds-footer__gongan { display: inline-flex; align-items: center; gap: 4px; }
.ds-footer__gongan img { width: 14px; height: 14px; vertical-align: middle; }

.ds-toast.is-show { opacity: 1; transform: translateX(-50%) translateY(0); }

.lang-zh { display: none; }
html[lang^="zh"] .lang-en { display: none; }
html[lang^="zh"] .lang-zh { display: inline; }

@media (max-width: 640px) {

  .ds-format-row { flex-direction: column; gap: 10px; }
}

@media (max-width: 480px) {
  .ds-footer__filing { flex-direction: column; gap: 4px; }
  .ds-footer__inner { flex-direction: column; align-items: center; }
  .ds-style-grid { gap: 6px; }
  .ds-style-btn { padding: 6px 12px; font-size: 13px; }
}

/* ====== 长度控制区 ====== */
.ds-len-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.ds-len-btn { padding: 8px 16px; border: 1px solid var(--ds-border); border-radius: var(--ds-radius-sm); background: var(--ds-bg); color: var(--ds-text-soft); cursor: pointer; font-size: 14px; font-weight: 600; transition: all 0.15s; min-width: 44px; }
.ds-len-btn:hover { border-color: var(--ds-accent); color: var(--ds-text); }
.ds-len-btn.is-active { background: var(--ds-accent); color: var(--ds-on-accent); border-color: var(--ds-accent); }
.ds-len-btn.is-disabled { opacity: 0.4; cursor: not-allowed; border-color: var(--ds-border); color: var(--ds-text-muted); pointer-events: none; }
.ds-len-custom { width: 72px; padding: 8px 10px; border: 1px solid var(--ds-border); border-radius: var(--ds-radius-sm); font-size: 14px; text-align: center; background: var(--ds-bg); color: var(--ds-text); }
.ds-len-custom:focus { outline: 2px solid var(--ds-focus-ring); outline-offset: 1px; }
.ds-field__hint { display: block; margin-top: 6px; font-size: 12px; color: var(--ds-text-muted); }