/* 视觉与性能收口层：统一层级、降低绘制成本，并强化移动端可读性。 */
:root {
  --ui-page: #edf3f2;
  --ui-page-deep: #e3ecea;
  --ui-surface: #ffffff;
  --ui-ink: #10241f;
  --ui-muted: #526760;
  --ui-line: #d6e2df;
  --ui-accent: #0f766e;
  --ui-accent-strong: #0b5f59;
  --tool-shell: #08111e;
  --tool-surface: #0d1828;
  --tool-surface-raised: #132237;
  --tool-line: rgba(148, 190, 202, 0.2);
  --tool-text: #f1f7fa;
  --tool-muted: #b4c5ce;
  --tool-accent: #5eead4;
}

html {
  color-scheme: light;
}

body {
  background: linear-gradient(180deg, #f5f8f7 0%, var(--ui-page) 42%, var(--ui-page-deep) 100%);
  background-attachment: scroll;
  color: var(--ui-ink);
  text-rendering: optimizeLegibility;
}

body::before {
  opacity: 0.46;
}

.container {
  width: min(1240px, 100%);
  padding: clamp(26px, 4vw, 48px) clamp(16px, 3vw, 28px) 56px;
}

.header {
  margin-bottom: clamp(24px, 4vw, 38px);
  text-align: left;
}

.main-title,
.header h1,
.header h1 span:last-child {
  color: var(--ui-ink);
}

.header h1 {
  font-size: clamp(1.85rem, 4vw, 2.55rem);
  font-weight: 780;
  letter-spacing: -0.045em;
  text-wrap: pretty;
}

.tool-section {
  margin-bottom: clamp(28px, 4vw, 42px);
  content-visibility: auto;
  contain-intrinsic-size: 240px;
}

.section-title {
  margin-bottom: 14px;
  padding-left: 0;
  color: var(--ui-ink);
  font-size: 1.05rem;
  font-weight: 760;
  letter-spacing: -0.01em;
}

.section-title::before {
  position: static;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ui-accent);
  box-shadow: 0 0 0 5px rgba(15, 118, 110, 0.1);
}

.tools-grid {
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 12px;
}

.tool-card-mini {
  height: 78px;
  padding: 14px 16px;
  border: 1px solid var(--ui-line);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: none;
  box-shadow: 0 1px 2px rgba(16, 36, 31, 0.04), 0 8px 22px rgba(16, 36, 31, 0.045);
  contain: layout paint style;
  transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease, background 160ms ease;
}

.tool-card-mini::before {
  display: none;
}

.tool-card-mini .tool-icon {
  width: 44px;
  height: 44px;
  margin-right: 13px;
  border: 1px solid rgba(15, 118, 110, 0.18);
  border-radius: 10px;
  background: #e8f4f1;
  color: var(--ui-accent-strong);
  box-shadow: none;
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  transition: background 160ms ease, color 160ms ease, transform 160ms ease;
}

.tool-card-mini h3 {
  color: var(--ui-ink);
  font-size: 0.96rem;
  font-weight: 700;
  text-wrap: pretty;
}

.tool-card-mini:hover {
  transform: translateY(-2px);
  border-color: rgba(15, 118, 110, 0.42);
  background: #ffffff;
  box-shadow: 0 2px 4px rgba(16, 36, 31, 0.05), 0 14px 32px rgba(16, 36, 31, 0.1);
}

.tool-card-mini:hover .tool-icon,
.tool-section:first-child .tool-card-mini:hover .tool-icon {
  transform: translateY(-1px);
  background: var(--ui-accent);
  color: #ffffff;
  box-shadow: none;
}

.tool-card-mini:focus-visible,
.tool-modal button:focus-visible,
.tool-modal input:focus-visible,
.tool-modal select:focus-visible,
.tool-modal textarea:focus-visible {
  outline: 3px solid rgba(94, 234, 212, 0.38);
  outline-offset: 2px;
}

.tool-modal {
  align-items: center;
  justify-content: center;
  padding: clamp(12px, 2vw, 26px);
  overflow: hidden;
  background: rgba(3, 10, 19, 0.76);
  -webkit-backdrop-filter: blur(6px) saturate(112%);
  backdrop-filter: blur(6px) saturate(112%);
  animation: none;
}

.tool-modal.show {
  display: flex;
}

.tool-modal-content {
  width: min(1680px, 100%);
  max-width: 1680px;
  max-height: calc(100dvh - 40px);
  margin: 0;
  padding: clamp(14px, 1.4vw, 22px);
  border: 1px solid rgba(144, 205, 211, 0.22);
  border-radius: 16px;
  background: linear-gradient(180deg, #0c1727 0%, var(--tool-shell) 100%);
  color: var(--tool-text);
  box-shadow: 0 28px 90px rgba(0, 0, 0, 0.48), inset 0 1px 0 rgba(255, 255, 255, 0.04);
  overscroll-behavior: contain;
  animation: tool-modal-enter 180ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

@keyframes tool-modal-enter {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.992);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.tool-modal-content h2 {
  margin-bottom: 12px;
  color: var(--tool-text);
  background: none;
  -webkit-text-fill-color: currentColor;
  font-size: clamp(1.3rem, 1.9vw, 1.75rem);
  font-weight: 760;
  letter-spacing: -0.025em;
  text-wrap: pretty;
}

.tool-subtitle,
.helper-text,
.color-note {
  color: var(--tool-muted);
}

.tool-modal-close {
  top: 14px;
  right: 14px;
  width: 40px;
  height: 40px;
  border: 1px solid rgba(148, 190, 202, 0.22);
  border-radius: 10px;
  background: rgba(17, 33, 51, 0.94);
  color: #dceaf0;
  transition: background 150ms ease, color 150ms ease, transform 150ms ease;
}

.tool-modal-close:hover {
  transform: none;
  background: #14384a;
  color: #ffffff;
}

.tool-panel,
.password-field,
.password-option,
.venn-field-card,
.large-preview-shell,
.result-area,
.upload-button,
.tabs,
.book-page {
  border-color: var(--tool-line);
  background: var(--tool-surface);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035), 0 8px 24px rgba(0, 0, 0, 0.12);
}

.book-page,
.tool-panel {
  border-radius: 11px;
}

.book-preview-page {
  background:
    linear-gradient(rgba(94, 234, 212, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(94, 234, 212, 0.03) 1px, transparent 1px),
    #060e19;
  background-size: 28px 28px;
}

.panel-title,
.form-label,
.inline-mode-header,
.tool-modal-content label,
.setting-label,
.compression-toggle label {
  color: #e7f1f5;
}

.panel-title {
  color: #9ed7db;
  font-size: 0.78rem;
  font-weight: 760;
  letter-spacing: 0.045em;
}

.form-input,
.form-textarea,
.form-select,
.tool-modal-content select,
.tool-modal-content input[type="text"],
.tool-modal-content input[type="search"],
.tool-modal-content input[type="number"],
.tool-modal-content input[type="datetime-local"],
.tool-modal-content input[type="password"],
.tool-modal-content input[type="url"] {
  min-height: 40px;
  border-color: rgba(151, 185, 198, 0.28);
  border-radius: 9px;
  background-color: #07111d;
  color: #f3f8fa;
  font-size: 15px;
}

.tool-modal-content ::placeholder {
  color: #8499a5;
  opacity: 1;
}

.tool-modal-content input[type="color"],
.setting-item-color input[type="color"] {
  width: 58px;
  min-width: 58px;
  height: 40px;
  min-height: 40px;
  padding: 4px;
  border: 1px solid rgba(151, 185, 198, 0.34);
  border-radius: 10px;
  background: #07111d;
  cursor: pointer;
}

.tool-modal-content input[type="color"]::-webkit-color-swatch-wrapper {
  padding: 0;
}

.tool-modal-content input[type="color"]::-webkit-color-swatch,
.tool-modal-content input[type="color"]::-moz-color-swatch {
  border: 0;
  border-radius: 6px;
}

.btn,
.tab,
.upload-button,
.tool-modal button {
  touch-action: manipulation;
}

.btn {
  min-height: 40px;
  border-radius: 9px;
  background: var(--ui-accent);
  box-shadow: none;
  color: #ffffff;
  font-weight: 700;
}

.btn:hover {
  background: var(--ui-accent-strong);
  box-shadow: none;
  transform: translateY(-1px);
}

.btn:active,
.tab:active,
.tool-card-mini:active {
  transform: scale(0.985);
}

.btn-secondary,
.btn-copy {
  border-color: rgba(151, 185, 198, 0.28);
  background: var(--tool-surface-raised);
  color: #edf7fa;
}

.tab {
  min-height: 38px;
  color: #b7c8d0;
  font-weight: 680;
}

.tab.active {
  color: #05231f;
  background: var(--tool-accent);
  box-shadow: none;
}

.tool-loading {
  min-height: min(360px, 58dvh);
  display: grid;
  align-content: center;
  gap: 12px;
  width: min(560px, 100%);
  margin: 0 auto;
  padding: 24px;
  color: #c8d8df;
}

.tool-loading strong {
  margin-top: 4px;
  font-size: 0.92rem;
  font-weight: 650;
}

.tool-loading-bar {
  display: block;
  height: 14px;
  border-radius: 999px;
  background: linear-gradient(90deg, #132438 20%, #24415a 50%, #132438 80%);
  background-size: 220% 100%;
  animation: tool-loading 1.1s linear infinite;
}

.tool-loading-bar:nth-child(1) {
  width: 42%;
  height: 22px;
}

.tool-loading-bar:nth-child(2) {
  width: 100%;
}

.tool-loading-bar:nth-child(3) {
  width: 72%;
}

@keyframes tool-loading {
  to {
    background-position: -220% 0;
  }
}

/* 骨架屏期间锁住窗口尺寸，避免真实内容插入时的跳动。关闭按钮保持可用。 */
.tool-modal.is-loading .tool-modal-content {
  min-height: min(420px, 66dvh);
}

/* 配色工作台：把取色、对比判断和灵感色板分成清晰的两层。 */
.color-tool-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(240px, 340px);
  gap: 20px;
  align-items: end;
  margin: 0 50px 16px 0;
}

.color-tool-heading h2 {
  margin-bottom: 5px;
}

.color-tool-heading .tool-subtitle {
  margin: 0;
  max-width: 54ch;
  font-size: 0.9rem;
  text-wrap: pretty;
}

.color-search-field {
  display: grid;
  gap: 6px;
  color: #b8ccd3;
  font-size: 0.76rem;
  font-weight: 700;
}

.color-search-field input {
  width: 100%;
}

.color-workbench {
  display: grid;
  grid-template-columns: minmax(260px, 340px) minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}

.color-composer,
.color-library {
  min-width: 0;
  border: 1px solid var(--tool-line);
  border-radius: 13px;
  background: var(--tool-surface);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035);
}

.color-composer {
  position: sticky;
  top: 0;
  padding: 12px;
}

.custom-color-preview {
  --preview-color: #0f766e;
  min-height: 176px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 3px;
  padding: 18px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 10px;
  background: var(--preview-color);
  color: #ffffff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), inset 0 -70px 90px rgba(0, 0, 0, 0.16);
  transition: background 100ms linear, color 100ms linear;
}

.custom-color-preview.is-light {
  color: #10241f;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), inset 0 -70px 90px rgba(255, 255, 255, 0.12);
}

.custom-color-preview span {
  font-size: 0.76rem;
  font-weight: 750;
  opacity: 0.84;
}

.custom-color-preview strong {
  font-family: Consolas, "SFMono-Regular", monospace;
  font-size: clamp(1.55rem, 3vw, 2.2rem);
  line-height: 1;
  letter-spacing: -0.04em;
}

.custom-color-preview small {
  margin-top: 5px;
  font-size: 0.74rem;
  font-weight: 650;
  opacity: 0.86;
}

.color-picker-controls {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr);
  gap: 9px;
  margin-top: 10px;
}

.color-picker-field,
.color-hex-field {
  display: grid;
  gap: 5px;
  color: #bdd0d7;
  font-size: 0.74rem;
  font-weight: 720;
}

.color-picker-field input[type="color"] {
  width: 100%;
  min-width: 0;
  height: 44px;
}

.color-hex-field input {
  width: 100%;
  font-family: Consolas, "SFMono-Regular", monospace;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.color-hex-field input.is-invalid {
  border-color: #fb7185;
  box-shadow: 0 0 0 3px rgba(251, 113, 133, 0.15);
}

.color-action-btn {
  width: 100%;
}

.color-library {
  padding: 10px;
}

.color-tabs {
  position: sticky;
  top: 0;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px;
  margin: 0 0 10px;
  padding: 4px;
  background: #07111d;
}

.color-tab {
  min-width: 0;
  color: #b9cbd2;
  background: transparent;
}

.color-tabs .color-tab.active,
.color-tabs .color-tab-traditional.active,
.color-tabs .color-tab-japan.active,
.color-tabs .color-tab-era.active {
  color: #05231f;
  background: var(--tool-accent);
  box-shadow: none;
}

.color-palette {
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 8px;
  max-height: min(590px, calc(100dvh - 230px));
  padding: 1px 2px 2px;
  overflow: auto;
  scrollbar-width: thin;
}

.color-swatch,
.rich-color-swatch {
  position: relative;
  min-width: 0;
  min-height: 92px;
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  gap: 10px;
  align-items: stretch;
  padding: 9px;
  border: 1px solid rgba(148, 190, 202, 0.19);
  border-radius: 10px;
  background: #0a1625;
  color: var(--tool-text);
  text-align: left;
  box-shadow: none;
  overflow: hidden;
  contain: layout paint style;
  transition: border-color 140ms ease, background 140ms ease, transform 140ms ease;
}

/* display: grid 会盖掉 UA 的 [hidden]，搜索过滤必须显式收起。 */
.color-swatch[hidden],
.rich-color-swatch[hidden] {
  display: none;
}

.color-swatch:hover,
.rich-color-swatch:hover {
  transform: translateY(-1px);
  border-color: rgba(94, 234, 212, 0.48);
  background: #102238;
}

/* 必须带上 .color-panel 才能压过 style.css 里同名的浅色渐变（同权重、后加载胜出）。 */
.color-panel#traditionalPalette .rich-color-swatch,
.color-panel#japanPalette .rich-color-swatch,
.color-panel#eraPalette .rich-color-swatch {
  border-color: rgba(148, 190, 202, 0.19);
  background: #0a1625;
}

.color-panel#traditionalPalette .rich-color-swatch:hover,
.color-panel#japanPalette .rich-color-swatch:hover,
.color-panel#eraPalette .rich-color-swatch:hover {
  border-color: rgba(94, 234, 212, 0.48);
  background: #102238;
}

.color-swatch .color-box,
.rich-color-swatch .color-box {
  width: 58px;
  height: 100%;
  min-height: 72px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 7px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.24);
}

.color-swatch .color-info,
.rich-color-swatch .color-info {
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 3px;
}

.color-swatch .color-name,
.rich-color-swatch .color-name {
  color: #f5fafb;
  font-size: 0.94rem;
  font-weight: 760;
  line-height: 1.25;
}

.color-swatch .color-hex,
.rich-color-swatch .color-hex {
  color: #7ee7d8;
  font-family: Consolas, "SFMono-Regular", monospace;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.035em;
}