/* 二次元主题层：最后加载，只覆盖配色、圆角与装饰，不改动原有布局结构。 */
:root {
  --ani-pink: #f0609a;
  --ani-pink-deep: #d6417d;
  --ani-pink-soft: #ffe8f1;
  --ani-lavender: #9a7cf4;
  --ani-sky: #4fa8f7;
  --ani-mint: #2fbf9c;
  --ani-ink: #3b3350;
  --ani-cream: #fff7fb;

  --ui-bg: #fff7fb;
  --ui-bg-deep: #f6f0ff;
  --ui-surface: #ffffff;
  --ui-surface-subtle: #fdf8fc;
  --ui-ink: #3b3350;
  --ui-muted: #85799a;
  --ui-faint: #b3a7c3;
  --ui-line: #f3e5f0;
  --ui-line-strong: #ead3e4;
  --ui-accent: #f0609a;
  --ui-accent-hover: #d6417d;
  --ui-accent-soft: #ffe8f1;
  --ui-blue: #6f86f0;
  --ui-danger: #e04f6f;
  --ui-shadow-sm: 0 2px 4px rgba(176, 96, 150, .05), 0 8px 20px rgba(176, 96, 150, .07);
  --ui-shadow-md: 0 14px 34px rgba(176, 96, 150, .16), 0 2px 6px rgba(176, 96, 150, .06);
  --ui-shadow-dialog: 0 30px 80px rgba(110, 60, 120, .25), 0 8px 24px rgba(110, 60, 120, .1);
  --ui-radius-sm: 10px;
  --ui-radius-md: 16px;
  --ui-radius-lg: 24px;
  --tool-surface: #fdf8fc;
  --tool-surface-raised: #ffffff;
  --tool-line: #f3e5f0;
  --tool-text: #3b3350;
  --tool-muted: #85799a;
  --tool-accent: #f0609a;
}

/* ---------- 背景：粉紫天空 + 波点 + 飘落花瓣 ---------- */
html { background: var(--ani-cream); }
body {
  background:
    radial-gradient(900px 520px at 6% -8%, rgba(255, 178, 210, .5), transparent 62%),
    radial-gradient(820px 520px at 100% 0%, rgba(196, 178, 255, .42), transparent 60%),
    radial-gradient(900px 620px at 50% 115%, rgba(160, 212, 255, .38), transparent 62%),
    var(--ani-cream);
  background-attachment: fixed;
  color: var(--ani-ink);
  font-family: "HarmonyOS Sans SC", "MiSans", "PingFang SC", "Microsoft YaHei UI", "Segoe UI Variable", "Noto Sans CJK SC", system-ui, sans-serif;
}
body::before {
  opacity: 1;
  background-image: radial-gradient(rgba(240, 96, 154, .17) 1.3px, transparent 1.7px);
  background-size: 22px 22px;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 72%);
  mask-image: linear-gradient(180deg, #000 0%, transparent 72%);
}
::selection { background: #ffd0e2; color: var(--ani-ink); }

.sakura-layer { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.sakura-layer i {
  position: absolute; top: -30px; left: var(--x, 50%);
  width: 12px; height: 10px; border-radius: 12px 2px 12px 2px;
  background: linear-gradient(135deg, #ffd6e5, #ffadc9);
  opacity: .75; will-change: transform;
  animation: sakura-fall var(--d, 16s) linear var(--delay, 0s) infinite;
}
.sakura-layer i:nth-child(3n) { width: 9px; height: 8px; opacity: .55; }
.sakura-layer i:nth-child(4n) { background: linear-gradient(135deg, #e9e0ff, #c9b6ff); }
@keyframes sakura-fall {
  0% { transform: translate3d(0, -30px, 0) rotate(0deg); }
  50% { transform: translate3d(calc(var(--drift, 60px) * .4), 55vh, 0) rotate(260deg); }
  100% { transform: translate3d(var(--drift, 60px), 108vh, 0) rotate(540deg); }
}

/* ---------- 头部：头像 + 标题 ---------- */
.container { padding-top: 46px; }
.header { align-items: center; margin-bottom: 26px; }
.brand-heading { align-items: center; gap: 16px; }
.brand-avatar {
  position: relative; display: grid; place-items: center; flex: 0 0 auto;
  width: 68px; height: 68px; border: 3px solid transparent; border-radius: 50%;
  background:
    linear-gradient(#fff, #fff) padding-box,
    conic-gradient(from 200deg, #ff9ec4, #b79cff, #8fd0ff, #ffd36e, #ff9ec4) border-box;
  box-shadow: 0 8px 22px rgba(240, 96, 154, .22);
  transition: transform 400ms cubic-bezier(.34, 1.56, .64, 1);
}
.brand-avatar img, .brand-avatar svg { width: 100%; height: 100%; object-fit: contain; padding: 3px; border-radius: 50%; display: block; }
.brand-avatar::after {
  content: "✦"; position: absolute; top: -4px; right: -6px;
  color: #ffc23d; font-size: 15px; line-height: 1;
  text-shadow: 0 1px 0 #fff;
  animation: ani-twinkle 2.6s ease-in-out infinite;
}
.brand-avatar:hover { transform: rotate(-10deg) scale(1.06); }
@keyframes ani-twinkle { 0%, 100% { opacity: .35; transform: scale(.75) rotate(0); } 50% { opacity: 1; transform: scale(1.1) rotate(25deg); } }

.main-title, .header h1 {
  color: var(--ani-ink); -webkit-text-fill-color: var(--ani-ink);
  font-size: clamp(1.9rem, 4vw, 2.5rem); font-weight: 900; letter-spacing: .02em;
  text-shadow: 3px 3px 0 #ffd0e2;
}
.header-tagline {
  margin: 6px 0 0; color: var(--ui-muted); font-size: .86rem; letter-spacing: .04em;
}

.tool-search {
  height: 44px; border: 1.5px solid var(--ui-line-strong); border-radius: 999px;
  padding: 0 10px 0 16px; background: rgba(255, 255, 255, .82);
  box-shadow: 0 4px 14px rgba(240, 96, 154, .08);
}
.tool-search:focus-within { border-color: #f59cc1; background: #fff; box-shadow: 0 0 0 4px rgba(240, 96, 154, .13); }
.tool-search svg { color: #e48bb2; }
.tool-search input::placeholder { color: #c1b3cc; }
kbd { border-color: var(--ui-line-strong); border-radius: 6px; background: #fff; color: #c27a9e; }
.add-btn { border-radius: 999px; border-color: var(--ani-pink); background: var(--ani-pink); box-shadow: 0 3px 0 var(--ani-pink-deep) !important; }
.add-btn:hover { background: #f4749f; }

/* ---------- 分类筛选 ---------- */
.collection-toolbar { border-bottom: 2px dashed #f2d8e6; padding-bottom: 14px; margin-bottom: 24px; }
.category-filters { gap: 6px; }
.category-filter {
  min-height: 32px; padding: 0 14px; border: 1.5px solid transparent; border-radius: 999px;
  color: var(--ui-muted); font-size: .8rem; font-weight: 700;
  transition: background 160ms ease, color 160ms ease, border-color 160ms ease, transform 160ms ease;
}
.category-filter:hover { border-color: var(--ui-line-strong); background: rgba(255, 255, 255, .9); color: var(--ani-ink); }
.category-filter.is-active {
  border-color: var(--ani-pink); background: var(--ani-pink); color: #fff;
  box-shadow: 0 3px 0 var(--ani-pink-deep);
}
.collection-count { color: #c09ab3; }

/* ---------- 分组：每组一种颜色 ---------- */
.tool-section {
  --sec: #f0609a; --sec-ink: #d6417d; --sec-soft: #ffe8f1; --sec-line: #ffd0e2;
  --sec-shadow: rgba(240, 96, 154, .22); --sec-shadow-soft: rgba(240, 96, 154, .08);
  content-visibility: visible; margin-bottom: 36px;
}
.tool-section:nth-of-type(4n+2) {
  --sec: #9a7cf4; --sec-ink: #7656e0; --sec-soft: #f0eaff; --sec-line: #ddd1ff;
  --sec-shadow: rgba(154, 124, 244, .22); --sec-shadow-soft: rgba(154, 124, 244, .08);
}
.tool-section:nth-of-type(4n+3) {
  --sec: #4fa8f7; --sec-ink: #2a85d4; --sec-soft: #e4f2ff; --sec-line: #c8e3ff;
  --sec-shadow: rgba(79, 168, 247, .22); --sec-shadow-soft: rgba(79, 168, 247, .08);
}
.tool-section:nth-of-type(4n+4) {
  --sec: #2fbf9c; --sec-ink: #17957a; --sec-soft: #dcf7ef; --sec-line: #bdeedf;
  --sec-shadow: rgba(47, 191, 156, .22); --sec-shadow-soft: rgba(47, 191, 156, .08);
}

.section-title { gap: 10px; margin-bottom: 14px; color: var(--ani-ink); font-size: 1.04rem; font-weight: 800; letter-spacing: .02em; }
.section-title::before {
  content: "✿"; width: auto; height: auto; border-radius: 0; background: none; box-shadow: none;
  color: var(--sec); font-size: 1.05rem; line-height: 1;
}
.section-title::after { content: ""; flex: 1 1 auto; min-width: 20px; border-top: 2px dashed var(--sec-line); margin-left: 4px; }
.section-count {
  min-width: 26px; height: 20px; border-radius: 999px; background: var(--sec-soft); color: var(--sec-ink);
  font: 800 .66rem/1 "Consolas", monospace;
}

/* ---------- 工具卡片 ---------- */
.tool-section .tools-grid, .tool-section:not(:first-child) .tools-grid { gap: 14px; }
.tool-section .tool-card-mini {
  height: 76px; min-height: 76px;
  border: 1.5px solid rgba(255, 255, 255, .9); border-radius: 20px;
  background: linear-gradient(155deg, rgba(255, 255, 255, .96), rgba(255, 255, 255, .8));
  box-shadow: 0 0 0 1px var(--sec-line), 0 6px 18px var(--sec-shadow-soft);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  transition: transform 240ms cubic-bezier(.34, 1.56, .64, 1), box-shadow 200ms ease, border-color 200ms ease;
}
.tool-section .tool-card-mini::before {
  display: block; content: ""; position: absolute; z-index: 0;
  top: -30px; right: -30px; left: auto; bottom: auto; width: 86px; height: 86px; border-radius: 50%;
  background: radial-gradient(circle, var(--sec-soft) 0 58%, transparent 60%);
  opacity: .75; transform: scale(.85); transform-origin: center;
  transition: transform 300ms ease, opacity 300ms ease; pointer-events: none;
}
.tool-section .tool-card-mini::after { display: none; }
.tool-card-launch { position: relative; z-index: 1; gap: 13px; padding: 14px 14px 14px 15px; }
.tool-section .tool-card-mini .tool-icon {
  position: relative; width: 44px; height: 44px;
  border: 2px solid #fff; border-radius: 14px;
  background: var(--sec-soft); color: var(--sec-ink);
  box-shadow: 0 0 0 1.5px var(--sec-line), 0 4px 10px var(--sec-shadow-soft);
  font-size: .72rem; font-weight: 900; letter-spacing: 0;
  transform: rotate(-6deg);
  transition: transform 380ms cubic-bezier(.34, 1.56, .64, 1), background 200ms ease, color 200ms ease;
}
.tool-section:first-child .tool-card-mini .tool-icon {
  border-color: #fff; background: var(--sec-soft); color: var(--sec-ink);
}
.tool-section .tool-card-mini .tool-icon::after {
  content: "✦"; position: absolute; top: -9px; right: -9px;
  color: var(--sec); font-size: 12px; line-height: 1;
  opacity: 0; transform: scale(.3) rotate(-40deg);
  transition: opacity 200ms ease, transform 320ms cubic-bezier(.34, 1.56, .64, 1);
}
.tool-card-copy { gap: 0; }
.tool-card-name { color: var(--ani-ink); font-size: .92rem; font-weight: 750; letter-spacing: .01em; transition: color 160ms ease; }
.tool-card-note { display: none; }
.card-arrow {
  display: grid; place-items: center; flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%;
  color: #cbbdd6; font-size: .8rem; transition: background 200ms ease, color 200ms ease, transform 240ms ease;
}

.tool-section .tool-card-mini:hover, .tool-section .tool-card-mini:has(.tool-card-launch:focus-visible) {
  border-color: #fff; background: #fff;
  box-shadow: 0 0 0 1.5px var(--sec), 0 14px 30px var(--sec-shadow);
  transform: translateY(-4px);
}
.tool-section .tool-card-mini:hover::before, .tool-section .tool-card-mini:has(.tool-card-launch:focus-visible)::before { opacity: 1; transform: scale(1.35); }
.tool-section .tool-card-mini:hover .tool-icon, .tool-section .tool-card-mini:has(.tool-card-launch:focus-visible) .tool-icon {
  background: var(--sec); color: #fff; transform: rotate(0deg) scale(1.08);
}
.tool-section .tool-card-mini:hover .tool-icon::after, .tool-section .tool-card-mini:has(.tool-card-launch:focus-visible) .tool-icon::after { opacity: 1; transform: scale(1) rotate(0deg); }
.tool-section .tool-card-mini:hover .tool-card-name { color: var(--sec-ink); }
.tool-section .tool-card-mini:hover .card-arrow { background: var(--sec-soft); color: var(--sec-ink); transform: translateX(2px); }
.tool-section .tool-card-mini:active { transform: translateY(-1px) scale(.985); }
.tool-card-launch:focus-visible { outline: 3px solid var(--sec); outline-offset: -3px; }

.search-empty { border: 2px dashed var(--ui-line-strong); border-radius: 24px; background: rgba(255, 255, 255, .6); }
.search-empty strong { font-size: 1.02rem; }

.site-footer {
  margin-top: 46px; color: #c6a9bd; font-size: .78rem; letter-spacing: .12em; text-align: center;
}
.site-footer span { color: #f59cc1; }

/* ---------- 弹窗 ---------- */
.tool-modal { background: rgba(72, 50, 92, .3); -webkit-backdrop-filter: blur(10px) saturate(120%); backdrop-filter: blur(10px) saturate(120%); }
.modal-overlay { background: rgba(72, 50, 92, .3); }
#imageModal { background: rgba(40, 28, 52, .82); }
.tool-modal-content, .modal-content { outline: none; }
.tool-modal-content {
  border: 2px solid #fff; border-radius: 26px;
  box-shadow: var(--ui-shadow-dialog), 0 0 0 6px rgba(255, 255, 255, .35);
}
.tool-modal-header {
  min-height: 66px; border-bottom: 2px dashed #f2d8e6;
  background: linear-gradient(100deg, #fff1f7 0%, #f6f1ff 58%, #eef7ff 100%);
}
.modal-tool-icon {
  width: 40px; height: 40px; border: 2px solid #fff; border-radius: 13px;
  background: var(--ani-pink); color: #fff; font-weight: 900;
  box-shadow: 0 0 0 1.5px #ffc2da, 0 4px 10px rgba(240, 96, 154, .25);
  transform: rotate(-6deg);
}
.modal-heading-copy h2, .tool-modal-content .tool-modal-header h2 { color: var(--ani-ink); font-weight: 850; letter-spacing: .01em; }
.modal-heading-copy p { color: #a08fb0; }
.modal-escape-hint { display: none; }
.tool-modal-close, .dialog-close, .modal-close {
  border: 1.5px solid #f2dbe8; border-radius: 50%; background: #fff; color: #c48aa8;
  transition: transform 260ms cubic-bezier(.34, 1.56, .64, 1), background 160ms ease, color 160ms ease;
}
.tool-modal-close:hover, .dialog-close:hover, .modal-close:hover {
  border-color: #f59cc1; background: var(--ani-pink-soft); color: var(--ani-pink-deep); transform: rotate(90deg);
}
.tool-modal-body { scrollbar-color: #f2c6da transparent; }
#login-modal .modal-content, #edit-modal .modal-content {
  border: 2px solid #fff; border-radius: 24px; color: var(--ani-ink);
  box-shadow: var(--ui-shadow-dialog), 0 0 0 6px rgba(255, 255, 255, .35);
}
.dialog-heading h2 { color: var(--ani-ink); font-weight: 850; letter-spacing: .02em; }
.dialog-heading h2::before { content: "✿ "; color: var(--ani-pink); }
.dialog-field { color: #6f6283; }
.dialog-field input, .dialog-field select { border: 1.5px solid var(--ui-line-strong); border-radius: 12px; color: var(--ani-ink); }
.dialog-field input::placeholder { color: #c1b3cc; }
.dialog-field input:focus, .dialog-field select:focus { border-color: #f59cc1; box-shadow: 0 0 0 4px rgba(240, 96, 154, .12); }
.dialog-hint { color: #a596b3; }
.modal-actions { border-top: 2px dashed #f2d8e6; }

/* ---------- 按钮与页签 ---------- */
.btn {
  border: 1.5px solid var(--ani-pink); border-radius: 12px; background: var(--ani-pink); color: #fff;
  box-shadow: 0 3px 0 var(--ani-pink-deep); font-weight: 800; letter-spacing: .02em;
}
.btn:hover:not(:disabled) { border-color: #f4749f; background: #f4749f; box-shadow: 0 4px 0 var(--ani-pink-deep); }
.btn:active:not(:disabled) { transform: translateY(2px); box-shadow: 0 1px 0 var(--ani-pink-deep); }
.btn:disabled { opacity: .45; box-shadow: 0 3px 0 rgba(214, 65, 125, .4); }
.btn-secondary, .btn-copy { border-color: var(--ui-line-strong); background: #fff; color: var(--ani-ink); box-shadow: 0 3px 0 #f0dbe8; }
.btn-secondary:hover:not(:disabled), .btn-copy:hover:not(:disabled) { border-color: #f5b4cf; background: #fff3f8; color: var(--ani-pink-deep); box-shadow: 0 3px 0 #f5c6db; }
.btn-secondary:disabled, .btn-copy:disabled { box-shadow: 0 3px 0 #f3e5ee; }
.btn-copy { color: #7a6ce6; }
.tool-modal-content .btn-secondary.active { border-color: #f5b4cf; background: var(--ani-pink-soft); color: var(--ani-pink-deep); }

.tabs { border: 1.5px solid #f4e2ee; border-radius: 14px; background: #fdf3f9; }
.tab { border-radius: 10px; color: #9a8aab; font-weight: 750; }
.tab:hover { background: rgba(255, 255, 255, .8); color: var(--ani-ink); }
.tab.active { background: #fff; color: var(--ani-pink-deep); box-shadow: 0 2px 8px rgba(240, 96, 154, .16); }
.color-tabs .color-tab.active { color: var(--ani-pink-deep); box-shadow: 0 2px 8px rgba(240, 96, 154, .16); }

/* ---------- 表单 ---------- */
.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"] {
  border: 1.5px solid var(--ui-line-strong); border-radius: 12px; color: var(--ani-ink);
}
.tool-modal-content ::placeholder { color: #c1b3cc; }
.form-input:focus, .form-textarea:focus, .form-select:focus, .tool-modal-content select:focus, .tool-modal-content input:focus,
.tool-modal-content .form-input:focus, .tool-modal-content .form-textarea:focus {
  border-color: #f59cc1; box-shadow: 0 0 0 4px rgba(240, 96, 154, .12);
}
.tool-modal-content input[type="range"]:focus { 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, .modal-content button:focus-visible, .modal-content input:focus-visible, .modal-content select:focus-visible {
  outline-color: rgba(240, 96, 154, .3);
}
.tool-modal-content input[type="color"] { border-color: var(--ui-line-strong); border-radius: 10px; }
.tool-modal-content input[type="range"]::-webkit-slider-runnable-track {
  height: 5px; border-radius: 999px;
  background: linear-gradient(to right, var(--ani-pink) var(--range-progress, 50%), #f3e2ec var(--range-progress, 50%));
}
.tool-modal-content input[type="range"]::-webkit-slider-thumb { width: 16px; height: 16px; margin-top: -5.5px; border: 3px solid #fff; background: var(--ani-pink); box-shadow: 0 1px 5px rgba(240, 96, 154, .45); }
.tool-modal-content input[type="range"]::-moz-range-track { height: 5px; background: #f3e2ec; }
.tool-modal-content input[type="range"]::-moz-range-progress { height: 5px; background: var(--ani-pink); }
.tool-modal-content input[type="range"]::-moz-range-thumb { border: 3px solid #fff; background: var(--ani-pink); }
.range-value, .form-grid label > span, .compact-inline-grid label > span, .setting-value { color: var(--ani-pink-deep); }
.form-grid label, .compact-inline-grid label, .setting-item, .compression-toggle,
.tool-modal-content .form-grid label, .tool-modal-content .compact-inline-grid label, .tool-modal-content .password-field { border-radius: 12px; }

.result-area { border: 1.5px solid var(--ui-line); border-radius: 14px; background: #fdf8fc; }
.result-area.has-content { border-color: rgba(240, 96, 154, .28); background: #fff6fa; }
.result-area:has(> :only-child:empty)::before { content: "结果会出现在这里～"; color: #cbb8cf; }
.result-area pre { color: #4a3f60; }

.upload-button { border: 2px dashed #f2cfe0; border-radius: 16px; background: #fffafd; }
.upload-button:hover, .drop-zone.drag-over,
.tool-modal-content .upload-button:hover, .tool-modal-content .drop-zone.drag-over { border-color: #f59cc1; background: #fff1f7; }
.upload-button-icon, .tool-modal-content .upload-button .upload-button-icon {
  border: 2px solid #fff; border-radius: 13px; background: var(--ani-pink-soft); color: var(--ani-pink-deep);
  box-shadow: 0 0 0 1.5px #ffd0e2; transform: rotate(-5deg);
}
.tool-modal-content .upload-button:focus-visible { outline-color: rgba(240, 96, 154, .3); }
.upload-selection { color: var(--ani-pink-deep) !important; }

.tool-panel, .media-preview-pane, .media-controls-pane, .color-composer, .color-library { border-radius: 16px; }
.panel-title { color: #6f6283; letter-spacing: .04em; }
.password-option { border-radius: 12px; }
.password-option:has(input:checked), .password-option:hover { border-color: #f5c0d6; background: #fff3f8; }
.tool-modal-content input[type="checkbox"], .tool-modal-content input[type="radio"] { accent-color: var(--ani-pink); }

.canvas-shell, .collage-canvas-container, .pixelator-preview-container, .venn-canvas-frame, .venn-canvas-frame-large { background: #f8f1fa; }
.book-preview-page { border-color: #efe2f1; border-radius: 18px; background: #faf4fc; }
.book-preview-page .large-preview-shell, .book-preview-page .venn-canvas-frame-large, .venn-tool .venn-canvas-frame-large { border-radius: 14px; background: #2e2742; }
.book-preview-page .large-preview-shell.is-empty { border: 2px dashed #ecd0e1; background: #fff8fb; }
.book-preview-page .large-preview-shell.is-empty::before { content: "放几张图进来吧 ✧"; color: #d07ba2; }
.book-preview-page .large-preview-shell.is-empty::after { content: "点上传，或直接拖进来"; color: #c9b3c6; }
.book-tool-venn .venn-preview-panel { background: #faf4fc; }
.book-control-page::-webkit-scrollbar-thumb { background: #f2c6da; }
.book-control-page { scrollbar-color: #f2c6da transparent; }
.preview-placeholder { color: #c9b3c6; }
.preview-placeholder strong { color: #b9879f; }
.preview-placeholder-mark { border: 2px dashed #f2cfe0; border-radius: 14px; color: #f59cc1; }
.thumbnail-item { border-radius: 10px; }
.thumbnail-item .delete-btn, .thumbnail-item .sort-btn { background: rgba(59, 51, 80, .78); }
.collage-output-options summary::after, .venn-options-summary::after { color: var(--ani-pink); }

.color-swatch, .rich-color-swatch { border-radius: 12px; }
.color-swatch:hover, .rich-color-swatch:hover { border-color: rgba(240, 96, 154, .4); background: #fff5f9; }
.color-panel .rich-color-swatch.is-copied { border-color: #f59cc1 !important; background: #fff0f6 !important; }
.color-swatch .color-hex, .rich-color-swatch .color-hex { color: var(--ani-pink-deep); }

.tool-loading-bar { background: linear-gradient(90deg, #fbeef5 20%, #f6d4e5 50%, #fbeef5 80%); background-size: 220% 100%; }

.app-toast { border-radius: 999px; background: var(--ani-ink); box-shadow: 0 10px 30px rgba(59, 51, 80, .25); }
.app-toast.is-error { background: #d9466f; }

.admin-controls button, .tool-sort-buttons button { border-color: var(--ui-line-strong); color: #a08fb0; }
.admin-controls button:hover, .tool-sort-buttons button:hover { border-color: #f5b4cf; background: var(--ani-pink-soft); color: var(--ani-pink-deep); }

/* ---------- 响应式补充 ---------- */
@media (max-width: 768px) {
  .container { padding-top: 26px; }
  .header { align-items: flex-start; }
  .brand-avatar { width: 56px; height: 56px; }
  .brand-avatar img, .brand-avatar svg { width: 100%; height: 100%; }
  .tool-section .tool-card-mini { height: auto; min-height: 70px; }
  .tool-modal-header { border-radius: 0; }
  .sakura-layer i:nth-child(n+6) { display: none; }
}
@media (max-width: 520px) {
  .tool-section .tool-card-mini .tool-icon { width: 36px; height: 36px; border-radius: 12px; font-size: .66rem; }
  .tool-card-launch { gap: 10px; padding: 12px; }
  .section-title::after { display: none; }
}
@media (hover: none) {
  .tool-section .tool-card-mini:hover { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .sakura-layer { display: none; }
}


/* ---------- 夜间模式按钮 ---------- */
.theme-toggle-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; padding: 0; flex: 0 0 auto;
  border: 1.5px solid var(--ui-line-strong); border-radius: 50%;
  background: rgba(255, 255, 255, 0.85); color: #3b3350;
  cursor: pointer; font-size: 1.22rem; line-height: 1;
  box-shadow: 0 4px 14px rgba(240, 96, 154, .1);
  transition: transform 320ms cubic-bezier(.34, 1.56, .64, 1), background 200ms ease, border-color 200ms ease, box-shadow 200ms ease;
}
.theme-toggle-btn:hover {
  transform: rotate(20deg) scale(1.08);
  border-color: #f59cc1; background: #fff;
  box-shadow: 0 6px 18px rgba(240, 96, 154, .25);
}
.theme-toggle-btn:active { transform: scale(.95); }

/* ---------- 夜间模式 (Dark Mode) ---------- */
[data-theme="dark"] {
  --ani-cream: #151122;
  --ani-ink: #f0eaf8;
  --ui-bg: #151122;
  --ui-bg-deep: #0e0a18;
  --ui-surface: #221c33;
  --ui-surface-subtle: #29223d;
  --ui-ink: #f0eaf8;
  --ui-muted: #b7a9cb;
  --ui-faint: #796c90;
  --ui-line: #38304f;
  --ui-line-strong: #4a4066;
  --ui-accent: #ff7ebb;
  --ui-accent-hover: #ff9ec4;
  --ui-accent-soft: rgba(255, 126, 187, 0.18);
  --ui-shadow-sm: 0 2px 4px rgba(0, 0, 0, .3), 0 8px 20px rgba(0, 0, 0, .35);
  --ui-shadow-md: 0 14px 34px rgba(0, 0, 0, .5), 0 2px 6px rgba(0, 0, 0, .3);
  --ui-shadow-dialog: 0 30px 80px rgba(0, 0, 0, .8);
  --tool-surface: #221c33;
  --tool-surface-raised: #2a233f;
  --tool-line: #38304f;
  --tool-text: #f0eaf8;
  --tool-muted: #b7a9cb;
  --tool-accent: #ff7ebb;
}

[data-theme="dark"] html { background: #151122; color-scheme: dark; }
[data-theme="dark"] body {
  background:
    radial-gradient(900px 520px at 6% -8%, rgba(138, 43, 226, .3), transparent 62%),
    radial-gradient(820px 520px at 100% 0%, rgba(79, 168, 247, .22), transparent 60%),
    radial-gradient(900px 620px at 50% 115%, rgba(240, 96, 154, .25), transparent 62%),
    #151122;
  color: #f0eaf8;
}
[data-theme="dark"] body::before {
  background-image: radial-gradient(rgba(196, 178, 255, .18) 1.2px, transparent 1.6px);
}
[data-theme="dark"] ::selection { background: #5a3064; color: #fff; }

[data-theme="dark"] .sakura-layer i {
  background: linear-gradient(135deg, #a78bfa, #f472b6);
  opacity: .5;
  filter: drop-shadow(0 0 6px rgba(244, 114, 182, .35));
}

[data-theme="dark"] .theme-toggle-btn {
  background: #251e36; border-color: #4a4066; color: #ffd13b;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .4);
}
[data-theme="dark"] .theme-toggle-btn:hover {
  border-color: #ffd13b; background: #2f2746;
  box-shadow: 0 0 16px rgba(255, 209, 59, 0.4);
}

[data-theme="dark"] .main-title,
[data-theme="dark"] .header h1 {
  color: #ffffff; -webkit-text-fill-color: #ffffff;
  text-shadow: 0 0 18px rgba(255, 126, 187, .55), 2px 2px 0 #4c2854;
}
[data-theme="dark"] .header-tagline { color: #b7a9cb; }

[data-theme="dark"] .tool-search {
  background: rgba(35, 29, 50, .86);
  border-color: #4a4066;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .25);
}
[data-theme="dark"] .tool-search:focus-within {
  border-color: #ff7ebb; background: #2b243e;
  box-shadow: 0 0 0 4px rgba(255, 126, 187, .18);
}
[data-theme="dark"] .tool-search input { color: #f0eaf8; }
[data-theme="dark"] .tool-search input::placeholder { color: #84769c; }
[data-theme="dark"] kbd {
  background: #2b233e; border-color: #4a4066; color: #ff9ec4;
}

[data-theme="dark"] .collection-toolbar { border-bottom-color: #382e4e; }
[data-theme="dark"] .category-filter { color: #b7a9cb; }
[data-theme="dark"] .category-filter:hover {
  border-color: #4a4066; background: rgba(43, 35, 62, .9); color: #fff;
}
[data-theme="dark"] .category-filter.is-active {
  background: var(--ani-pink); color: #fff; box-shadow: 0 3px 0 #b33068;
}

[data-theme="dark"] .tool-section {
  --sec-soft: rgba(255, 255, 255, 0.08);
  --sec-line: #3f3554;
  --sec-shadow: rgba(0, 0, 0, .5);
  --sec-shadow-soft: rgba(0, 0, 0, .2);
}
[data-theme="dark"] .section-title { color: #f5effc; }
[data-theme="dark"] .section-count { background: #2f2746; color: #e0d4f3; }

[data-theme="dark"] .tool-section .tool-card-mini {
  border-color: rgba(255, 255, 255, 0.1);
  background: linear-gradient(155deg, rgba(38, 31, 54, 0.95), rgba(28, 23, 40, 0.88));
  box-shadow: 0 0 0 1px #382f4e, 0 6px 18px rgba(0, 0, 0, 0.35);
}
[data-theme="dark"] .tool-section .tool-card-mini::before {
  background: radial-gradient(circle, var(--sec) 0 35%, transparent 65%);
  opacity: .25;
}
[data-theme="dark"] .tool-section .tool-card-mini .tool-icon {
  border-color: rgba(255, 255, 255, 0.16);
  background: #2d2442; color: #f0eaf8;
  box-shadow: 0 0 0 1.5px rgba(255, 255, 255, 0.08);
}
[data-theme="dark"] .tool-card-name { color: #f0eaf8; }
[data-theme="dark"] .card-arrow { color: #7f7096; }

[data-theme="dark"] .tool-section .tool-card-mini:hover,
[data-theme="dark"] .tool-section .tool-card-mini:has(.tool-card-launch:focus-visible) {
  border-color: var(--sec);
  background: rgba(45, 37, 65, 0.98);
  box-shadow: 0 0 0 1.5px var(--sec), 0 14px 30px rgba(0, 0, 0, 0.55);
}
[data-theme="dark"] .tool-section .tool-card-mini:hover .card-arrow {
  background: #382f50; color: #ff9ec4;
}

[data-theme="dark"] .search-empty {
  border-color: #4a4066; background: rgba(34, 28, 49, 0.6);
}
[data-theme="dark"] .site-footer { color: #7f7096; }

/* 弹窗与表单暗色 */
[data-theme="dark"] .tool-modal { background: rgba(14, 10, 22, .7); }
[data-theme="dark"] .modal-overlay { background: rgba(14, 10, 22, .7); }
[data-theme="dark"] .tool-modal-content,
[data-theme="dark"] #login-modal .modal-content,
[data-theme="dark"] #edit-modal .modal-content {
  border-color: #4a3e66;
  background: #211a30;
  color: #f0eaf8;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.8), 0 0 0 1px #4a3e66;
}
[data-theme="dark"] .tool-modal-header {
  background: linear-gradient(100deg, #2b223e 0%, #221b31 100%);
  border-bottom-color: #382e4e;
}
[data-theme="dark"] .modal-heading-copy h2,
[data-theme="dark"] .tool-modal-content .tool-modal-header h2,
[data-theme="dark"] .dialog-heading h2 { color: #ffffff; }
[data-theme="dark"] .modal-heading-copy p { color: #b7a9cb; }
[data-theme="dark"] .tool-modal-close,
[data-theme="dark"] .dialog-close,
[data-theme="dark"] .modal-close {
  border-color: #4a4066; background: #2b233e; color: #b7a9cb;
}
[data-theme="dark"] .tool-modal-close:hover,
[data-theme="dark"] .dialog-close:hover,
[data-theme="dark"] .modal-close:hover {
  border-color: #ff7ebb; background: rgba(255, 126, 187, 0.2); color: #ff9ec4;
}

[data-theme="dark"] .form-input,
[data-theme="dark"] .form-textarea,
[data-theme="dark"] .form-select,
[data-theme="dark"] .tool-modal-content select,
[data-theme="dark"] .tool-modal-content input[type="text"],
[data-theme="dark"] .tool-modal-content input[type="search"],
[data-theme="dark"] .tool-modal-content input[type="number"],
[data-theme="dark"] .tool-modal-content input[type="datetime-local"],
[data-theme="dark"] .tool-modal-content input[type="password"],
[data-theme="dark"] .tool-modal-content input[type="url"],
[data-theme="dark"] .dialog-field input,
[data-theme="dark"] .dialog-field select {
  background: #2b233e; border-color: #483c66; color: #f0eaf8;
}
[data-theme="dark"] .form-input:focus,
[data-theme="dark"] .form-textarea:focus,
[data-theme="dark"] .form-select:focus,
[data-theme="dark"] .tool-modal-content select:focus,
[data-theme="dark"] .tool-modal-content input:focus {
  border-color: #ff7ebb; background: #302746; box-shadow: 0 0 0 4px rgba(255, 126, 187, .2);
}
[data-theme="dark"] .tool-modal-content ::placeholder,
[data-theme="dark"] .dialog-field input::placeholder { color: #7f7096; }

[data-theme="dark"] .result-area {
  border-color: #382e4e; background: #191424;
}
[data-theme="dark"] .result-area.has-content {
  border-color: rgba(255, 126, 187, 0.35); background: #20182d;
}
[data-theme="dark"] .result-area pre { color: #ded4f0; }

[data-theme="dark"] .btn-secondary,
[data-theme="dark"] .btn-copy {
  border-color: #473a64; background: #2b233e; color: #e5daf3; box-shadow: 0 3px 0 #1b1627;
}
[data-theme="dark"] .btn-secondary:hover:not(:disabled),
[data-theme="dark"] .btn-copy:hover:not(:disabled) {
  border-color: #ff9ec4; background: #372d50; color: #ffb8d6; box-shadow: 0 3px 0 #201931;
}
[data-theme="dark"] .tool-modal-content .btn-secondary.active {
  border-color: #ff7ebb; background: rgba(255, 126, 187, 0.22); color: #ff9ec4;
}

[data-theme="dark"] .tabs { border-color: #382e4e; background: #1a1527; }
[data-theme="dark"] .tab { color: #9f8fb4; }
[data-theme="dark"] .tab:hover { background: rgba(255, 255, 255, 0.08); color: #fff; }
[data-theme="dark"] .tab.active { background: #2e2644; color: #ff9ec4; box-shadow: 0 2px 8px rgba(0, 0, 0, .4); }

[data-theme="dark"] .upload-button {
  border-color: #4a3e66; background: #1d172b;
}
[data-theme="dark"] .upload-button:hover,
[data-theme="dark"] .drop-zone.drag-over {
  border-color: #ff7ebb; background: #281f3b;
}
[data-theme="dark"] .upload-button-icon {
  background: #2b223d; color: #ff9ec4; box-shadow: 0 0 0 1.5px #50406d;
}

[data-theme="dark"] .tool-panel,
[data-theme="dark"] .media-preview-pane,
[data-theme="dark"] .media-controls-pane,
[data-theme="dark"] .color-composer,
[data-theme="dark"] .color-library {
  border-color: #382e4e; background: #1e182c;
}
[data-theme="dark"] .panel-title { color: #b7a9cb; }
[data-theme="dark"] .book-preview-page { border-color: #382e4e; background: #1a1527; }
[data-theme="dark"] .canvas-shell,
[data-theme="dark"] .collage-canvas-container,
[data-theme="dark"] .pixelator-preview-container,
[data-theme="dark"] .venn-canvas-frame {
  border-color: #382e4e; background: #151120;
}
[data-theme="dark"] .password-option {
  border-color: #44375e; background: #261f37; color: #f0eaf8;
}
[data-theme="dark"] .password-option:has(input:checked),
[data-theme="dark"] .password-option:hover {
  border-color: #ff7ebb; background: #322849;
}
[data-theme="dark"] .color-swatch,
[data-theme="dark"] .rich-color-swatch {
  border-color: #382e4e; background: #251e36; color: #f0eaf8;
}
[data-theme="dark"] .color-swatch:hover,
[data-theme="dark"] .rich-color-swatch:hover {
  border-color: #ff7ebb; background: #2f2545;
}
[data-theme="dark"] .admin-controls button,
[data-theme="dark"] .tool-sort-buttons button {
  border-color: #4a4066; background: #2b233e; color: #b7a9cb;
}
[data-theme="dark"] .admin-controls button:hover,
[data-theme="dark"] .tool-sort-buttons button:hover {
  border-color: #ff7ebb; background: rgba(255, 126, 187, 0.2); color: #ff9ec4;
}