/* Loomee multi-skin layer. Loaded after main.css so existing tools keep working. */

.navbar-brand-mark {
  display: inline-grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  margin-right: .65rem;
  border: 1px solid currentColor;
  border-radius: .45rem;
  font-size: .95rem;
  letter-spacing: 0;
}

.skin-picker { position: relative; }
.skin-picker-button { min-width: 14rem; justify-content: space-between; }
.skin-picker-icon { margin-right: .15rem; }
.skin-picker-label { opacity: .65; }
.skin-picker-caret { margin-left: .35rem; transition: transform var(--transition); }
.skin-picker-button[aria-expanded="true"] .skin-picker-caret { transform: rotate(180deg); }
.skin-picker-menu {
  position: absolute;
  top: calc(100% + .55rem);
  right: 0;
  z-index: 300;
  width: 18rem;
  padding: .45rem;
  border: 1px solid var(--border);
  border-radius: .7rem;
  background: var(--bg-card);
  box-shadow: 0 18px 50px rgba(0, 0, 0, .28);
  max-height: min(76vh, 44rem);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.skin-picker-menu[hidden] { display: none; }
.skin-picker-menu button {
  width: 100%;
  display: grid;
  grid-template-columns: 2rem 1fr;
  align-items: center;
  gap: .75rem;
  padding: .7rem;
  border: 0;
  border-radius: .45rem;
  background: transparent;
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.skin-picker-menu button:hover,
.skin-picker-menu button:focus-visible { background: var(--bg-input); outline: none; }
.skin-picker-menu button.is-active { box-shadow: inset 3px 0 0 var(--accent); }
.skin-picker-menu strong,
.skin-picker-menu small { display: block; }
.skin-picker-menu strong { font-size: .86rem; font-weight: 650; }
.skin-picker-menu small { margin-top: .08rem; color: var(--text-muted); font-size: .72rem; }
.skin-swatch { width: 1.8rem; height: 1.8rem; border: 1px solid rgba(127,127,127,.45); border-radius: 50%; }
.skin-swatch-classic { background: linear-gradient(135deg, #1a1a2e 0 50%, #4ecca3 50%); }
.skin-swatch-midnight { background: linear-gradient(135deg, #11151a 0 50%, #c98a50 50%); }
.skin-swatch-paper { background: linear-gradient(135deg, #f3ead7 0 50%, #923b2e 50%); }
.skin-swatch-pixel { background: linear-gradient(135deg, #10130d 0 50%, #a9d66d 50%); border-radius: 0; }
.skin-swatch-workbench { background: linear-gradient(135deg, #e5e9ed 0 50%, #245b78 50%); border-radius: .3rem; }
.skin-swatch-swiss { background: linear-gradient(135deg, #f7f7f3 0 48%, #e1251b 48% 64%, #151515 64%); border-radius: 0; }
.skin-swatch-ink { background: radial-gradient(circle at 68% 34%, #a43a2d 0 16%, transparent 17%), #eeeade; border-radius: 0; }
.skin-swatch-blueprint { background-color: #123d5a; background-image: linear-gradient(#78b8d5 1px, transparent 1px), linear-gradient(90deg, #78b8d5 1px, transparent 1px); background-size: 7px 7px; border-radius: 0; }
.skin-swatch-collage { background: conic-gradient(#f3c44f 0 25%, #e66350 0 50%, #6a9f87 0 75%, #ece4d0 0); border-radius: .2rem; }
.skin-swatch-win98 { background: linear-gradient(135deg, #008080 0 50%, #c0c0c0 50%); border-radius: 0; }
.skin-swatch-mono { background: linear-gradient(90deg, #fff 0 50%, #111 50%); border-radius: 0; }
.skin-swatch-magazine { background: linear-gradient(135deg, #f5f1e8 0 52%, #243b63 52% 75%, #e65c3f 75%); border-radius: 0; }
.skin-swatch-amber { background: #151008; box-shadow: inset 0 0 0 6px #d99b35; border-radius: 0; }
.skin-swatch-bauhaus { background: conic-gradient(#e84b32 0 25%, #f1c83f 0 50%, #2564a9 0 75%, #f4efe3 0); border-radius: 50%; }
.skin-swatch-nordic { background: linear-gradient(135deg, #f4f7f7 0 58%, #5f8190 58%); }
.skin-swatch-industrial { background: linear-gradient(135deg, #262b2c 0 50%, #a36d36 50%); border-radius: .15rem; }
.skin-swatch-crayon { background: conic-gradient(#f6d6cd 0 25%, #d4e5c7 0 50%, #c9dbec 0 75%, #f7e8ab 0); }
.skin-swatch-comic { background-color: #ffd938; background-image: radial-gradient(#111 1.5px, transparent 1.5px); background-size: 6px 6px; border-radius: 0; }
.skin-swatch-nautical { background: linear-gradient(135deg, #eee5cf 0 60%, #1e516d 60%); border-radius: 50%; }

/* 0. 经典原版：完整保留网站最初的蓝紫背景、青绿强调色和居中五列卡片。 */
html[data-skin="classic"] .navbar-brand-mark {
  display: inline-block;
  width: auto;
  height: auto;
  margin-right: .35rem;
  border: 0;
  border-radius: 0;
  font-size: 0;
}
html[data-skin="classic"] .navbar-brand-mark::before { content: '⚙'; font-size: 1.65rem; }

/* 1. 深夜工具箱：克制、实体、偏传统软件工具。 */
html[data-skin="midnight"] {
  --bg: #11151a;
  --bg-card: #1a2026;
  --bg-input: #242c33;
  --accent: #d39a63;
  --accent-glow: rgba(211, 154, 99, .18);
  --text: #e8e4de;
  --text-muted: #989da1;
  --border: #343c43;
  --danger: #df6a62;
  --radius: 8px;
}
html[data-skin="midnight"] body { background: #11151a; }
html[data-skin="midnight"] .navbar { background: rgba(17, 21, 26, .96); }
html[data-skin="midnight"] .navbar-brand { color: #e8e4de; letter-spacing: .025em; }
html[data-skin="midnight"] .navbar-brand-mark { color: var(--accent); }
html[data-skin="midnight"] .home-page .tool-card { align-items: flex-start; text-align: left; }
html[data-skin="midnight"] .home-page .tool-card-icon { font-size: 2rem; filter: grayscale(.25); }
html[data-skin="midnight"] .home-page .tool-card:hover { transform: translateY(-2px); box-shadow: 0 12px 24px rgba(0,0,0,.22); }

/* 2. 纸页档案：编辑部式暖纸张，标题和卡片采用不对称排版。 */
html[data-skin="paper"] {
  --bg: #eee7d8;
  --bg-card: #f8f3e8;
  --bg-input: #eee6d6;
  --accent: #923b2e;
  --accent-glow: rgba(146, 59, 46, .15);
  --text: #2e2922;
  --text-muted: #71685d;
  --border: #c9bdab;
  --danger: #a72c28;
  --radius: 3px;
}
html[data-skin="paper"] body {
  font-family: Georgia, 'Noto Serif SC', 'Songti SC', serif;
  background-color: var(--bg);
  background-image: linear-gradient(rgba(80, 64, 45, .035) 1px, transparent 1px);
  background-size: 100% 28px;
}
html[data-skin="paper"] .navbar {
  position: relative;
  height: 76px;
  padding-inline: max(2rem, calc((100vw - 1240px) / 2));
  background: var(--bg-card);
  border-bottom: 3px double var(--border);
}
html[data-skin="paper"] .navbar-brand { color: var(--text); font-weight: 600; letter-spacing: .015em; }
html[data-skin="paper"] .navbar-brand-mark { border-radius: 50%; color: var(--accent); }
html[data-skin="paper"] .main-content { max-width: 1240px; }
html[data-skin="paper"] .tool-section { margin-bottom: 3.6rem; }
html[data-skin="paper"] .tool-section-title {
  justify-content: space-between;
  font-size: 1.7rem;
  font-weight: 500;
  border: 0;
  border-bottom: 2px solid var(--text);
}
html[data-skin="paper"] .tool-section-title::before { display: none; }
html[data-skin="paper"] .tool-section-title::after { content: 'LOOMEE / TOOLS'; color: var(--text-muted); font: 700 .62rem/1 'Segoe UI', sans-serif; letter-spacing: .18em; }
html[data-skin="paper"] .home-page .tool-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--border); }
html[data-skin="paper"] .home-page .tool-card {
  min-height: 10rem;
  align-items: flex-start;
  text-align: left;
  border: 0;
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  background: rgba(248, 243, 232, .58);
}
html[data-skin="paper"] .home-page .tool-card:nth-child(3n) { border-right: 0; }
html[data-skin="paper"] .home-page .tool-card-icon { font-size: 1.7rem; filter: grayscale(1); }
html[data-skin="paper"] .home-page .tool-card-title { font-size: 1.08rem; }
html[data-skin="paper"] .home-page .tool-card:hover { transform: none; background: var(--bg-card); box-shadow: inset 0 -3px 0 var(--accent); }
html[data-skin="paper"] .card { box-shadow: 0 8px 22px rgba(75, 59, 40, .07); }
html[data-skin="paper"] .btn,
html[data-skin="paper"] .form-control { border-radius: 2px; }
html[data-skin="paper"] .site-footer { background: transparent; border-top: 3px double var(--border); }

/* 3. 像素终端：等宽字、硬边框、偏复古电脑而非霓虹。 */
html[data-skin="pixel"] {
  --bg: #10130d;
  --bg-card: #181d13;
  --bg-input: #20271a;
  --accent: #a9d66d;
  --accent-glow: rgba(169, 214, 109, .18);
  --text: #d8e7c4;
  --text-muted: #879675;
  --border: #435133;
  --danger: #df775f;
  --radius: 0;
  --transition: .08s linear;
}
html[data-skin="pixel"] body { font-family: Consolas, 'Courier New', monospace; background: var(--bg); }
html[data-skin="pixel"] .navbar { height: 54px; min-height: 54px; border-bottom: 2px solid var(--accent); }
html[data-skin="pixel"] .navbar-brand { color: var(--accent); font-size: 1.2rem; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; }
html[data-skin="pixel"] .navbar-brand-mark,
html[data-skin="pixel"] .skin-picker-menu,
html[data-skin="pixel"] .skin-picker-menu button,
html[data-skin="pixel"] .theme-toggle-btn { border-radius: 0; }
html[data-skin="pixel"] .main-content { max-width: 1280px; }
html[data-skin="pixel"] .tool-section-title { font-size: 1.15rem; text-transform: uppercase; border-bottom: 1px dashed var(--border); }
html[data-skin="pixel"] .tool-section-title::before { width: .8rem; height: .8rem; border-radius: 0; box-shadow: .3rem .3rem 0 #586b41; }
html[data-skin="pixel"] .home-page .tool-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
html[data-skin="pixel"] .home-page .tool-card {
  min-height: 11rem;
  align-items: flex-start;
  text-align: left;
  border: 2px solid var(--border);
  box-shadow: 5px 5px 0 #080a06;
}
html[data-skin="pixel"] .home-page .tool-card-icon { font-size: 2rem; filter: grayscale(1) sepia(.3); }
html[data-skin="pixel"] .home-page .tool-card:hover { transform: translate(2px, 2px); box-shadow: 3px 3px 0 #080a06; border-color: var(--accent); }
html[data-skin="pixel"] .card,
html[data-skin="pixel"] .btn,
html[data-skin="pixel"] .form-control,
html[data-skin="pixel"] .num-stepper { border-radius: 0; }

/* 4. 桌面工作台：左侧固定栏，首页改为紧凑的横向双列条目。 */
html[data-skin="workbench"] {
  --bg: #e5e9ed;
  --bg-card: #f8fafb;
  --bg-input: #edf1f3;
  --accent: #245b78;
  --accent-glow: rgba(36, 91, 120, .14);
  --text: #243039;
  --text-muted: #65727b;
  --border: #c7d0d6;
  --danger: #b6423d;
  --radius: 6px;
}
html[data-skin="workbench"] body { font-family: 'Segoe UI', Arial, sans-serif; background: var(--bg); }
html[data-skin="workbench"] .navbar {
  position: fixed;
  inset: 0 auto 0 0;
  width: 232px;
  height: 100vh;
  padding: 1.5rem 1.1rem;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  gap: 2rem;
  background: #24333d;
  border: 0;
  border-right: 1px solid #17242c;
}
html[data-skin="workbench"] .navbar-brand { align-items: flex-start; color: #f2f5f6; font-size: 1.05rem; letter-spacing: 0; white-space: normal; }
html[data-skin="workbench"] .navbar-brand-mark { color: #9fc3d5; border-color: #66899a; }
html[data-skin="workbench"] .navbar-actions { flex: 1; flex-direction: column; align-items: stretch; }
html[data-skin="workbench"] .skin-picker { margin-top: auto; }
html[data-skin="workbench"] .skin-picker-button { width: 100%; color: #dbe4e8; border-color: #526771; background: #1d2a32; }
html[data-skin="workbench"] .skin-picker-menu { right: auto; left: calc(100% + .7rem); bottom: 0; top: auto; }
html[data-skin="workbench"] .main-content { max-width: 1500px; margin-left: 232px; padding: 2rem 2.5rem; width: calc(100% - 232px); }
html[data-skin="workbench"] .site-footer { margin-left: 232px; background: #d9dfe3; }
html[data-skin="workbench"] .tool-section { margin-bottom: 2.2rem; }
html[data-skin="workbench"] .tool-section-title { font-size: 1.15rem; border: 0; padding: 0; }
html[data-skin="workbench"] .tool-section-title::before { width: 3px; height: 1.1rem; border-radius: 0; }
html[data-skin="workbench"] .home-page .tool-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
html[data-skin="workbench"] .home-page .tool-card {
  min-height: 6.8rem;
  display: grid;
  grid-template-columns: 3.2rem minmax(0, 1fr);
  grid-template-rows: auto auto;
  align-items: center;
  column-gap: .9rem;
  padding: 1rem 1.1rem;
  text-align: left;
  border-left: 3px solid #9da9b0;
}
html[data-skin="workbench"] .home-page .tool-card-icon { grid-row: 1 / 3; margin: 0; font-size: 2rem; filter: grayscale(.6); text-align: center; }
html[data-skin="workbench"] .home-page .tool-card-title { margin: 0; align-self: end; }
html[data-skin="workbench"] .home-page .tool-card-desc { align-self: start; }
html[data-skin="workbench"] .home-page .tool-card:hover { transform: none; border-left-color: var(--accent); box-shadow: 0 5px 16px rgba(44, 61, 70, .1); }
html[data-skin="workbench"] .card { box-shadow: 0 2px 6px rgba(44, 61, 70, .07); }

/* 5. 瑞士网格：红黑白、编号系统与严格的现代主义栅格。 */
html[data-skin="swiss"] {
  --bg: #f3f3ef;
  --bg-card: #fafaf7;
  --bg-input: #e9e9e4;
  --accent: #e1251b;
  --accent-glow: rgba(225, 37, 27, .12);
  --text: #151515;
  --text-muted: #62625d;
  --border: #1b1b1b;
  --danger: #c51d17;
  --radius: 0;
}
html[data-skin="swiss"] body { font-family: Arial, Helvetica, 'Microsoft YaHei', sans-serif; background: var(--bg); }
html[data-skin="swiss"] .navbar { height: 86px; padding-inline: 3rem; background: var(--bg); border-bottom: 5px solid var(--text); }
html[data-skin="swiss"] .navbar-brand { color: var(--text); font-size: 1.35rem; letter-spacing: -.04em; text-transform: uppercase; }
html[data-skin="swiss"] .navbar-brand-mark { border: 0; border-radius: 0; background: var(--accent); color: #fff; }
html[data-skin="swiss"] .main-content { max-width: 1500px; padding-top: 3.5rem; }
html[data-skin="swiss"] .tool-section { counter-reset: swiss-card; }
html[data-skin="swiss"] .tool-section-title { font-size: clamp(1.8rem, 3vw, 3rem); line-height: .95; letter-spacing: -.055em; border: 0; padding-bottom: .85rem; border-bottom: 1px solid var(--text); }
html[data-skin="swiss"] .tool-section-title::before { width: 1.1rem; height: 1.1rem; border-radius: 0; }
html[data-skin="swiss"] .home-page .tool-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; border-left: 1px solid var(--text); }
html[data-skin="swiss"] .home-page .tool-card {
  counter-increment: swiss-card;
  min-height: 13rem;
  position: relative;
  align-items: flex-start;
  text-align: left;
  border: 0;
  border-right: 1px solid var(--text);
  border-bottom: 1px solid var(--text);
  padding-top: 3.8rem;
  background: transparent;
}
html[data-skin="swiss"] .home-page .tool-card::before { content: '0' counter(swiss-card); position: absolute; top: 1rem; left: 1.2rem; color: var(--accent); font-size: .75rem; font-weight: 800; }
html[data-skin="swiss"] .home-page .tool-card-icon { font-size: 1.55rem; filter: grayscale(1); }
html[data-skin="swiss"] .home-page .tool-card-title { font-size: 1.15rem; font-weight: 800; }
html[data-skin="swiss"] .home-page .tool-card:hover { transform: none; color: #fff; background: var(--text); box-shadow: none; }
html[data-skin="swiss"] .home-page .tool-card:hover .tool-card-desc { color: #cfcfca; }
html[data-skin="swiss"] .card,
html[data-skin="swiss"] .btn,
html[data-skin="swiss"] .form-control { border-radius: 0; }

/* 6. 水墨书卷：宋体、横向条目与大面积留白。 */
html[data-skin="ink"] {
  --bg: #eeeade;
  --bg-card: #f7f4ea;
  --bg-input: #e8e2d4;
  --accent: #9f3228;
  --accent-glow: rgba(159, 50, 40, .1);
  --text: #282824;
  --text-muted: #746f65;
  --border: #bcb5a6;
  --danger: #a62e28;
  --radius: 1px;
}
html[data-skin="ink"] body { font-family: 'Noto Serif SC', 'Songti SC', SimSun, serif; background: #eeeade; }
html[data-skin="ink"] .navbar { position: relative; height: 94px; max-width: 1120px; margin: 0 auto; background: transparent; border-bottom: 1px solid #4e4b45; }
html[data-skin="ink"] .navbar-brand { color: var(--text); font-size: 1.45rem; font-weight: 500; letter-spacing: .18em; }
html[data-skin="ink"] .navbar-brand-mark { width: 2.2rem; height: 2.2rem; border-color: var(--accent); border-radius: 1px; color: var(--accent); font-family: serif; }
html[data-skin="ink"] .main-content { max-width: 1120px; padding-top: 4.5rem; }
html[data-skin="ink"] .tool-section { margin-bottom: 5rem; }
html[data-skin="ink"] .tool-section-title { font-size: 1.7rem; font-weight: 400; letter-spacing: .22em; border: 0; padding: 0; }
html[data-skin="ink"] .tool-section-title::before { content: '录'; display: grid; place-items: center; width: 1.7rem; height: 1.7rem; background: var(--accent); color: #f8eee0; border-radius: 1px; font-size: .85rem; letter-spacing: 0; }
html[data-skin="ink"] .home-page .tool-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 3rem; }
html[data-skin="ink"] .home-page .tool-card {
  min-height: 8.8rem;
  display: grid;
  grid-template-columns: 2.8rem 1fr;
  grid-template-rows: auto auto;
  align-items: center;
  column-gap: 1rem;
  padding: 1.3rem .2rem;
  text-align: left;
  background: transparent;
  border: 0;
  border-top: 1px solid var(--border);
}
html[data-skin="ink"] .home-page .tool-card-icon { grid-row: 1 / 3; margin: 0; font-size: 1.55rem; filter: grayscale(1); opacity: .72; }
html[data-skin="ink"] .home-page .tool-card-title { align-self: end; font-size: 1.08rem; font-weight: 500; letter-spacing: .08em; }
html[data-skin="ink"] .home-page .tool-card-desc { align-self: start; }
html[data-skin="ink"] .home-page .tool-card:hover { transform: none; box-shadow: none; border-color: var(--accent); color: var(--accent); }
html[data-skin="ink"] .card { border: 0; border-top: 2px solid var(--text); box-shadow: 0 12px 30px rgba(56, 49, 39, .06); }

/* 7. 工程蓝图：绘图纸网格、坐标编号与技术面板。 */
html[data-skin="blueprint"] {
  --bg: #0d3149;
  --bg-card: #123c57;
  --bg-input: #174762;
  --accent: #9bd7ec;
  --accent-glow: rgba(155, 215, 236, .15);
  --text: #e0f4fb;
  --text-muted: #91b8ca;
  --border: #4b8098;
  --danger: #ff998c;
  --radius: 2px;
}
html[data-skin="blueprint"] body {
  font-family: Consolas, 'Microsoft YaHei', monospace;
  background-color: var(--bg);
  background-image: linear-gradient(rgba(125, 185, 210, .1) 1px, transparent 1px), linear-gradient(90deg, rgba(125, 185, 210, .1) 1px, transparent 1px);
  background-size: 24px 24px;
}
html[data-skin="blueprint"] .navbar { background: rgba(8, 39, 59, .94); border-bottom: 1px dashed var(--accent); }
html[data-skin="blueprint"] .navbar-brand { color: var(--text); font-size: 1.2rem; letter-spacing: .08em; }
html[data-skin="blueprint"] .navbar-brand-mark { border-radius: 0; color: var(--accent); }
html[data-skin="blueprint"] .main-content { max-width: 1380px; }
html[data-skin="blueprint"] .tool-section { counter-reset: blueprint-card; }
html[data-skin="blueprint"] .tool-section-title { font-size: 1.1rem; letter-spacing: .12em; border-bottom: 1px dashed var(--border); }
html[data-skin="blueprint"] .tool-section-title::before { width: .7rem; height: .7rem; border: 1px solid var(--accent); background: transparent; border-radius: 50%; }
html[data-skin="blueprint"] .home-page .tool-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
html[data-skin="blueprint"] .home-page .tool-card {
  counter-increment: blueprint-card;
  min-height: 12rem;
  position: relative;
  align-items: flex-start;
  text-align: left;
  border: 1px dashed var(--border);
  background: rgba(13, 49, 73, .72);
}
html[data-skin="blueprint"] .home-page .tool-card::after { content: 'MODULE / ' counter(blueprint-card, decimal-leading-zero); position: absolute; top: .6rem; right: .7rem; color: var(--text-muted); font-size: .62rem; letter-spacing: .08em; }
html[data-skin="blueprint"] .home-page .tool-card-icon { font-size: 2rem; filter: grayscale(1); opacity: .85; }
html[data-skin="blueprint"] .home-page .tool-card:hover { transform: none; background: rgba(24, 76, 103, .92); border-style: solid; box-shadow: inset 0 0 0 2px rgba(155,215,236,.09); }
html[data-skin="blueprint"] .card { border-style: dashed; background: rgba(18, 60, 87, .9); }
html[data-skin="blueprint"] .btn,
html[data-skin="blueprint"] .form-control { border-radius: 1px; }

/* 8. 彩色拼贴：实体印刷色、错位卡片和海报式 Bento 排版。 */
html[data-skin="collage"] {
  --bg: #e9e1d1;
  --bg-card: #f5efe2;
  --bg-input: #eee5d6;
  --accent: #d84d3f;
  --accent-glow: rgba(50, 46, 38, .12);
  --text: #28261f;
  --text-muted: #6c6659;
  --border: #302e28;
  --danger: #ba3029;
  --radius: 2px;
}
html[data-skin="collage"] body { font-family: 'Trebuchet MS', 'Microsoft YaHei', sans-serif; background: var(--bg); }
html[data-skin="collage"] .navbar { height: 74px; background: #f0c84d; border-bottom: 3px solid var(--text); }
html[data-skin="collage"] .navbar-brand { color: var(--text); font-size: 1.35rem; letter-spacing: -.03em; transform: rotate(-1deg); }
html[data-skin="collage"] .navbar-brand-mark { border-radius: 50%; background: #e76250; color: #fff; border-color: var(--text); }
html[data-skin="collage"] .main-content { max-width: 1320px; }
html[data-skin="collage"] .tool-section-title { display: inline-flex; padding: .45rem .8rem; border: 2px solid var(--text); background: #f6efe0; box-shadow: 4px 4px 0 var(--text); transform: rotate(-.4deg); }
html[data-skin="collage"] .tool-section-title::before { display: none; }
html[data-skin="collage"] .home-page .tool-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-flow: dense; gap: 1rem; }
html[data-skin="collage"] .home-page .tool-card {
  min-height: 11rem;
  align-items: flex-start;
  text-align: left;
  border: 2px solid var(--text);
  box-shadow: 5px 5px 0 var(--text);
  background: #f1d26f;
}
html[data-skin="collage"] .home-page .tool-card:nth-child(4n+1) { grid-column: span 2; background: #df715e; }
html[data-skin="collage"] .home-page .tool-card:nth-child(4n+2) { background: #79a58d; }
html[data-skin="collage"] .home-page .tool-card:nth-child(4n+3) { background: #e9ddc8; }
html[data-skin="collage"] .home-page .tool-card:nth-child(4n) { background: #7d9db8; }
html[data-skin="collage"] .home-page .tool-card-icon { font-size: 2.2rem; filter: grayscale(.7); }
html[data-skin="collage"] .home-page .tool-card:hover { transform: translate(2px, 2px) rotate(.25deg); box-shadow: 3px 3px 0 var(--text); }
html[data-skin="collage"] .card { border: 2px solid var(--text); box-shadow: 5px 5px 0 rgba(48,46,40,.25); }

/* 9. Windows 98：桌面青色、凸起窗口与经典系统控件。 */
html[data-skin="win98"] {
  --bg: #008080;
  --bg-card: #c0c0c0;
  --bg-input: #fff;
  --accent: #000080;
  --accent-glow: transparent;
  --text: #000;
  --text-muted: #444;
  --border: #808080;
  --danger: #b00000;
  --radius: 0;
  --transition: 0s;
}
html[data-skin="win98"] body { font-family: Tahoma, 'MS Sans Serif', Arial, sans-serif; background: #008080; }
html[data-skin="win98"] .navbar {
  position: relative;
  height: 52px;
  padding-inline: .55rem;
  background: #c0c0c0;
  border: 2px solid;
  border-color: #fff #404040 #404040 #fff;
}
html[data-skin="win98"] .navbar-brand { color: #000; font-size: .95rem; letter-spacing: 0; }
html[data-skin="win98"] .navbar-brand-mark { width: 1.7rem; height: 1.7rem; margin-right: .4rem; border-radius: 0; background: #000080; color: #fff; }
html[data-skin="win98"] .theme-toggle-btn,
html[data-skin="win98"] .skin-picker-menu,
html[data-skin="win98"] .skin-picker-menu button,
html[data-skin="win98"] .card,
html[data-skin="win98"] .btn,
html[data-skin="win98"] .form-control { border-radius: 0; }
html[data-skin="win98"] .theme-toggle-btn,
html[data-skin="win98"] .btn { color: #000; background: #c0c0c0; border: 2px solid; border-color: #fff #404040 #404040 #fff; }
html[data-skin="win98"] .main-content {
  max-width: 1320px;
  margin-block: 1.5rem;
  padding: 1rem;
  background: #c0c0c0;
  border: 3px solid;
  border-color: #fff #303030 #303030 #fff;
}
html[data-skin="win98"] .tool-section-title { padding: .28rem .5rem; background: #000080; color: #fff; border: 0; font-size: 1rem; }
html[data-skin="win98"] .tool-section-title::before { display: none; }
html[data-skin="win98"] .home-page .tool-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .7rem; }
html[data-skin="win98"] .home-page .tool-card {
  min-height: 10rem;
  align-items: flex-start;
  text-align: left;
  border: 2px solid;
  border-color: #fff #505050 #505050 #fff;
  background: #c0c0c0;
}
html[data-skin="win98"] .home-page .tool-card-icon { font-size: 2rem; }
html[data-skin="win98"] .home-page .tool-card:hover { transform: none; box-shadow: none; border-color: #505050 #fff #fff #505050; }
html[data-skin="win98"] .card { border: 2px solid; border-color: #fff #505050 #505050 #fff; box-shadow: none; }
html[data-skin="win98"] .form-control { border: 2px solid; border-color: #505050 #fff #fff #505050; color: #000; }
html[data-skin="win98"] .site-footer { background: #c0c0c0; color: #000; border: 2px solid; border-color: #fff #404040 #404040 #fff; }

/* 10. 极简黑白：单列目录、粗分隔线和几乎无装饰的索引布局。 */
html[data-skin="mono"] {
  --bg: #fff;
  --bg-card: #fff;
  --bg-input: #f2f2f2;
  --accent: #000;
  --accent-glow: transparent;
  --text: #000;
  --text-muted: #616161;
  --border: #000;
  --danger: #b00000;
  --radius: 0;
}
html[data-skin="mono"] body { font-family: Arial, 'Microsoft YaHei', sans-serif; background: #fff; }
html[data-skin="mono"] .navbar { position: relative; height: 68px; background: #fff; border-bottom: 1px solid #000; }
html[data-skin="mono"] .navbar-brand { color: #000; font-size: 1.1rem; letter-spacing: 0; }
html[data-skin="mono"] .navbar-brand-mark { border-radius: 0; background: #000; color: #fff; }
html[data-skin="mono"] .main-content { max-width: 1180px; padding-top: 4rem; }
html[data-skin="mono"] .tool-section { counter-reset: mono-card; margin-bottom: 5rem; }
html[data-skin="mono"] .tool-section-title { font-size: 2.4rem; line-height: 1; letter-spacing: -.06em; border: 0; padding: 0 0 1rem; }
html[data-skin="mono"] .tool-section-title::before { display: none; }
html[data-skin="mono"] .home-page .tool-grid { display: block; border-top: 3px solid #000; }
html[data-skin="mono"] .home-page .tool-card {
  counter-increment: mono-card;
  min-height: 5.8rem;
  display: grid;
  grid-template-columns: 4rem minmax(11rem, 16rem) 1fr;
  align-items: center;
  gap: 1rem;
  padding: .9rem 0;
  text-align: left;
  background: transparent;
  border: 0;
  border-bottom: 1px solid #000;
}
html[data-skin="mono"] .home-page .tool-card::before { content: counter(mono-card, decimal-leading-zero); font-size: .75rem; font-weight: 700; }
html[data-skin="mono"] .home-page .tool-card-icon { display: none; }
html[data-skin="mono"] .home-page .tool-card-title { margin: 0; font-size: 1.05rem; font-weight: 700; }
html[data-skin="mono"] .home-page .tool-card-desc { font-size: .86rem; }
html[data-skin="mono"] .home-page .tool-card:hover { transform: none; box-shadow: none; background: #000; color: #fff; padding-inline: .75rem; }
html[data-skin="mono"] .home-page .tool-card:hover .tool-card-desc { color: #d0d0d0; }
html[data-skin="mono"] .card,
html[data-skin="mono"] .btn,
html[data-skin="mono"] .form-control { border-radius: 0; box-shadow: none; }
html[data-skin="mono"] .site-footer { background: #000; color: #fff; }
html[data-skin="mono"] .site-footer a { color: #fff; }

/* 11. 日系杂志：海军蓝、朱橙和非对称头条栅格。 */
html[data-skin="magazine"] {
  --bg: #f2eee5; --bg-card: #faf7f0; --bg-input: #e9e4da;
  --accent: #e35f43; --accent-glow: rgba(227,95,67,.12);
  --text: #1e2d46; --text-muted: #6e706f; --border: #aeb0aa;
  --danger: #be3e32; --radius: 0;
}
html[data-skin="magazine"] body { font-family: 'Yu Gothic', 'Microsoft YaHei', sans-serif; background: var(--bg); }
html[data-skin="magazine"] .navbar { position: relative; height: 82px; background: transparent; border-bottom: 1px solid var(--text); }
html[data-skin="magazine"] .navbar-brand { color: var(--text); font-size: 1.25rem; letter-spacing: .14em; }
html[data-skin="magazine"] .navbar-brand-mark { border: 0; border-radius: 0; background: var(--text); color: #fff; }
html[data-skin="magazine"] .main-content { max-width: 1280px; }
html[data-skin="magazine"] .tool-section-title { font-size: 2rem; font-weight: 800; letter-spacing: -.04em; border-bottom: 4px solid var(--text); }
html[data-skin="magazine"] .tool-section-title::before { width: .65rem; height: .65rem; border-radius: 50%; }
html[data-skin="magazine"] .home-page .tool-grid { grid-template-columns: repeat(3, minmax(0,1fr)); grid-auto-flow: dense; gap: 1px; background: var(--text); border: 1px solid var(--text); }
html[data-skin="magazine"] .home-page .tool-card { min-height: 11rem; align-items: flex-start; text-align: left; border: 0; background: var(--bg-card); }
html[data-skin="magazine"] .home-page .tool-card:nth-child(4n+1) { grid-column: span 2; }
html[data-skin="magazine"] .home-page .tool-card-icon { font-size: 1.65rem; filter: grayscale(1); }
html[data-skin="magazine"] .home-page .tool-card-title { font-size: 1.15rem; font-weight: 800; }
html[data-skin="magazine"] .home-page .tool-card:hover { transform: none; box-shadow: inset 7px 0 0 var(--accent); }

/* 12. 琥珀终端：老式 CRT 琥珀字与五列密集命令矩阵。 */
html[data-skin="amber"] {
  --bg: #100c06; --bg-card: #181108; --bg-input: #24190b;
  --accent: #e5a63b; --accent-glow: rgba(229,166,59,.14);
  --text: #f0bd62; --text-muted: #9f7738; --border: #6f4c1e;
  --danger: #ef7657; --radius: 0; --transition: .05s linear;
}
html[data-skin="amber"] body { font-family: Consolas, 'Courier New', monospace; background-color: var(--bg); background-image: repeating-linear-gradient(0deg, rgba(255,190,90,.025) 0 1px, transparent 1px 4px); }
html[data-skin="amber"] .navbar { height: 48px; min-height: 48px; background: #0c0905; border-bottom: 1px solid var(--accent); }
html[data-skin="amber"] .navbar-brand { color: var(--accent); font-size: 1rem; letter-spacing: .08em; }
html[data-skin="amber"] .navbar-brand-mark,
html[data-skin="amber"] .theme-toggle-btn,
html[data-skin="amber"] .skin-picker-menu { border-radius: 0; }
html[data-skin="amber"] .main-content { max-width: 1500px; padding-inline: 1.25rem; }
html[data-skin="amber"] .tool-section-title { font-size: 1rem; text-transform: uppercase; border-bottom: 1px solid var(--border); }
html[data-skin="amber"] .tool-section-title::before { content: '>'; width: auto; height: auto; background: none; color: var(--accent); }
html[data-skin="amber"] .home-page .tool-grid { grid-template-columns: repeat(5, minmax(0,1fr)); gap: .55rem; }
html[data-skin="amber"] .home-page .tool-card { min-height: 9rem; padding: 1rem; align-items: flex-start; text-align: left; border: 1px solid var(--border); background: rgba(24,17,8,.82); }
html[data-skin="amber"] .home-page .tool-card-icon { font-size: 1.45rem; filter: grayscale(1) sepia(1); }
html[data-skin="amber"] .home-page .tool-card-title { font-size: .9rem; }
html[data-skin="amber"] .home-page .tool-card-desc { font-size: .7rem; }
html[data-skin="amber"] .home-page .tool-card:hover { transform: none; box-shadow: inset 0 0 0 1px var(--accent); background: #24190b; }

/* 13. 包豪斯工坊：红黄蓝基础几何与跨列构成。 */
html[data-skin="bauhaus"] {
  --bg: #e9e2d2; --bg-card: #f5efe3; --bg-input: #e3dccd;
  --accent: #d94732; --accent-glow: rgba(31,30,26,.12);
  --text: #1f1e1a; --text-muted: #666158; --border: #1f1e1a;
  --danger: #c3322b; --radius: 0;
}
html[data-skin="bauhaus"] body { font-family: 'Arial Black', Arial, 'Microsoft YaHei', sans-serif; background: var(--bg); }
html[data-skin="bauhaus"] .navbar { height: 76px; background: #f1c63c; border-bottom: 4px solid var(--text); }
html[data-skin="bauhaus"] .navbar-brand { color: var(--text); font-size: 1.25rem; letter-spacing: -.04em; }
html[data-skin="bauhaus"] .navbar-brand-mark { border-radius: 50%; background: #2663a2; color: #fff; border: 0; }
html[data-skin="bauhaus"] .main-content { max-width: 1360px; }
html[data-skin="bauhaus"] .tool-section-title { font-size: 2rem; letter-spacing: -.06em; border: 0; }
html[data-skin="bauhaus"] .tool-section-title::before { width: 1.6rem; height: 1.6rem; border-radius: 50% 50% 0 50%; background: #2663a2; }
html[data-skin="bauhaus"] .home-page .tool-grid { grid-template-columns: repeat(4, minmax(0,1fr)); grid-auto-flow: dense; gap: 1rem; }
html[data-skin="bauhaus"] .home-page .tool-card { min-height: 12rem; align-items: flex-start; text-align: left; border: 3px solid var(--text); background: #f5efe3; }
html[data-skin="bauhaus"] .home-page .tool-card:nth-child(5n+1) { grid-column: span 2; background: #dd4c36; }
html[data-skin="bauhaus"] .home-page .tool-card:nth-child(5n+2) { border-radius: 50% 50% 0 0; background: #f0c83f; }
html[data-skin="bauhaus"] .home-page .tool-card:nth-child(5n+3) { background: #477cae; }
html[data-skin="bauhaus"] .home-page .tool-card-icon { font-size: 2rem; filter: grayscale(1); }
html[data-skin="bauhaus"] .home-page .tool-card:hover { transform: rotate(-1deg); box-shadow: 6px 6px 0 var(--text); }

/* 14. 北欧目录：低饱和蓝灰、宽松三列和安静的内容层次。 */
html[data-skin="nordic"] {
  --bg: #edf1f1; --bg-card: #fafcfc; --bg-input: #e4ebec;
  --accent: #527889; --accent-glow: rgba(82,120,137,.11);
  --text: #253238; --text-muted: #718086; --border: #cad4d7;
  --danger: #b74d48; --radius: 14px;
}
html[data-skin="nordic"] body { font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif; background: var(--bg); }
html[data-skin="nordic"] .navbar { height: 72px; background: rgba(250,252,252,.92); }
html[data-skin="nordic"] .navbar-brand { color: var(--text); font-size: 1.15rem; font-weight: 600; letter-spacing: .03em; }
html[data-skin="nordic"] .navbar-brand-mark { border: 0; border-radius: 50%; background: #ccdadc; color: #385764; }
html[data-skin="nordic"] .main-content { max-width: 1260px; padding-top: 3.5rem; }
html[data-skin="nordic"] .tool-section { margin-bottom: 4rem; }
html[data-skin="nordic"] .tool-section-title { font-size: 1.35rem; font-weight: 500; border: 0; }
html[data-skin="nordic"] .tool-section-title::before { width: 2rem; height: 2px; border-radius: 0; }
html[data-skin="nordic"] .home-page .tool-grid { grid-template-columns: repeat(3, minmax(0,1fr)); gap: 1.5rem; }
html[data-skin="nordic"] .home-page .tool-card { min-height: 14rem; align-items: flex-start; text-align: left; padding: 2rem; border: 0; box-shadow: 0 7px 22px rgba(51,73,82,.07); }
html[data-skin="nordic"] .home-page .tool-card-icon { font-size: 1.8rem; opacity: .72; filter: grayscale(.7); }
html[data-skin="nordic"] .home-page .tool-card:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(51,73,82,.11); }

/* 15. 蒸汽工坊：深钢板、黄铜铭牌和铆钉式三列面板。 */
html[data-skin="industrial"] {
  --bg: #1d2121; --bg-card: #292e2e; --bg-input: #353a39;
  --accent: #b47a3e; --accent-glow: rgba(180,122,62,.14);
  --text: #e1d7c8; --text-muted: #9b958b; --border: #555a56;
  --danger: #ce6354; --radius: 3px;
}
html[data-skin="industrial"] body { font-family: 'Arial Narrow', 'Microsoft YaHei', sans-serif; background-color: var(--bg); background-image: linear-gradient(90deg, rgba(255,255,255,.018) 50%, transparent 50%); background-size: 6px 100%; }
html[data-skin="industrial"] .navbar { height: 64px; background: #242828; border-bottom: 4px solid #0f1111; box-shadow: inset 0 -1px #6a6f69; }
html[data-skin="industrial"] .navbar-brand { color: #d8c5a9; font-size: 1.15rem; letter-spacing: .08em; }
html[data-skin="industrial"] .navbar-brand-mark { border-radius: 50%; color: #d9a15f; border-color: #8b673f; }
html[data-skin="industrial"] .main-content { max-width: 1320px; }
html[data-skin="industrial"] .tool-section-title { display: inline-flex; padding: .45rem 1rem; background: #393d3b; border: 1px solid #696e68; color: #d9a15f; font-size: 1rem; letter-spacing: .12em; box-shadow: inset 0 0 0 2px #242827; }
html[data-skin="industrial"] .tool-section-title::before { width: .45rem; height: .45rem; border-radius: 50%; box-shadow: 0 0 0 2px #161818; }
html[data-skin="industrial"] .home-page .tool-grid { grid-template-columns: repeat(3, minmax(0,1fr)); gap: 1.1rem; }
html[data-skin="industrial"] .home-page .tool-card { min-height: 12rem; position: relative; align-items: flex-start; text-align: left; border: 2px solid #555a56; background: linear-gradient(145deg,#303534,#252a29); box-shadow: inset 0 0 0 2px #1b1f1e; }
html[data-skin="industrial"] .home-page .tool-card::before { content: '•                                      •'; position: absolute; inset: .25rem .45rem auto; overflow: hidden; color: #777c75; font-size: .7rem; white-space: nowrap; }
html[data-skin="industrial"] .home-page .tool-card-icon { font-size: 1.8rem; filter: grayscale(1) sepia(.4); }
html[data-skin="industrial"] .home-page .tool-card:hover { transform: none; border-color: var(--accent); box-shadow: inset 0 0 0 2px #1b1f1e, 0 7px 16px #101212; }

/* 16. 蜡笔乐园：柔和彩纸、手绘虚线和轻微错位。 */
html[data-skin="crayon"] {
  --bg: #f4efe2; --bg-card: #fffaf0; --bg-input: #eee8dc;
  --accent: #d76e62; --accent-glow: rgba(111,91,76,.12);
  --text: #403b35; --text-muted: #777066; --border: #81786d;
  --danger: #bd514c; --radius: 18px;
}
html[data-skin="crayon"] body { font-family: 'Comic Sans MS', 'Microsoft YaHei', cursive; background: var(--bg); }
html[data-skin="crayon"] .navbar { position: relative; background: #f8edc7; border-bottom: 3px dashed #8a7c65; }
html[data-skin="crayon"] .navbar-brand { color: var(--text); font-size: 1.2rem; letter-spacing: .03em; transform: rotate(-1deg); }
html[data-skin="crayon"] .navbar-brand-mark { border: 2px dashed #6f8e7c; background: #d6e6cd; color: #4f695a; }
html[data-skin="crayon"] .main-content { max-width: 1250px; }
html[data-skin="crayon"] .tool-section-title { border-bottom: 3px dashed var(--border); font-size: 1.55rem; transform: rotate(-.25deg); }
html[data-skin="crayon"] .tool-section-title::before { width: 1.2rem; height: 1.2rem; border-radius: 48% 52% 44% 56%; }
html[data-skin="crayon"] .home-page .tool-grid { grid-template-columns: repeat(3, minmax(0,1fr)); gap: 1.3rem; }
html[data-skin="crayon"] .home-page .tool-card { min-height: 12rem; align-items: flex-start; text-align: left; border: 3px solid #756c62; border-radius: 22px 13px 20px 11px; background: #f5d8d0; box-shadow: 4px 5px 0 rgba(85,73,62,.14); }
html[data-skin="crayon"] .home-page .tool-card:nth-child(3n+2) { background: #d9e8cf; transform: rotate(.6deg); }
html[data-skin="crayon"] .home-page .tool-card:nth-child(3n) { background: #d7e5ef; transform: rotate(-.5deg); }
html[data-skin="crayon"] .home-page .tool-card-icon { font-size: 2.2rem; }
html[data-skin="crayon"] .home-page .tool-card:hover { transform: translateY(-2px) rotate(0); box-shadow: 6px 7px 0 rgba(85,73,62,.18); }

/* 17. 漫画网点：粗黑分镜、黄色网点与对白框尾巴。 */
html[data-skin="comic"] {
  --bg: #f6f0dd; --bg-card: #fffdf5; --bg-input: #ece6d6;
  --accent: #e54732; --accent-glow: rgba(0,0,0,.14);
  --text: #121212; --text-muted: #54504a; --border: #111;
  --danger: #c92b24; --radius: 0;
}
html[data-skin="comic"] body { font-family: Impact, 'Arial Black', 'Microsoft YaHei', sans-serif; background-color: var(--bg); background-image: radial-gradient(rgba(0,0,0,.075) 1px, transparent 1px); background-size: 7px 7px; }
html[data-skin="comic"] .navbar { height: 70px; background: #ffd735; border-bottom: 4px solid #111; }
html[data-skin="comic"] .navbar-brand { color: #111; font-size: 1.25rem; letter-spacing: .02em; }
html[data-skin="comic"] .navbar-brand-mark { border: 3px solid #111; border-radius: 50%; background: #fff; }
html[data-skin="comic"] .main-content { max-width: 1320px; }
html[data-skin="comic"] .tool-section-title { display: inline-flex; padding: .35rem .8rem; background: #fff; border: 4px solid #111; font-size: 1.65rem; transform: skew(-3deg); box-shadow: 5px 5px 0 #111; }
html[data-skin="comic"] .tool-section-title::before { display: none; }
html[data-skin="comic"] .home-page .tool-grid { grid-template-columns: repeat(3, minmax(0,1fr)); grid-auto-flow: dense; gap: 1rem; }
html[data-skin="comic"] .home-page .tool-card { min-height: 12rem; position: relative; align-items: flex-start; text-align: left; border: 4px solid #111; background: #fffdf5; box-shadow: 5px 5px 0 #111; }
html[data-skin="comic"] .home-page .tool-card:nth-child(4n+1) { grid-column: span 2; background: #ffd735; }
html[data-skin="comic"] .home-page .tool-card:nth-child(4n+3) { background: #9fc8dc; }
html[data-skin="comic"] .home-page .tool-card::after { content: ''; position: absolute; left: 1.2rem; bottom: -.75rem; width: 1.1rem; height: 1.1rem; background: inherit; border-right: 4px solid #111; border-bottom: 4px solid #111; transform: skew(25deg) rotate(35deg); }
html[data-skin="comic"] .home-page .tool-card-icon { font-size: 2.1rem; filter: grayscale(1); }
html[data-skin="comic"] .home-page .tool-card:hover { transform: translate(2px,2px); box-shadow: 3px 3px 0 #111; }

/* 18. 航海图册：海图经纬线、衬线标题和双列航线卡片。 */
html[data-skin="nautical"] {
  --bg: #e8e0cd; --bg-card: #f4eddd; --bg-input: #e5dcc8;
  --accent: #1d5875; --accent-glow: rgba(29,88,117,.12);
  --text: #243945; --text-muted: #68747a; --border: #81939a;
  --danger: #aa4c3f; --radius: 2px;
}
html[data-skin="nautical"] body { font-family: Georgia, 'Noto Serif SC', serif; background-color: var(--bg); background-image: linear-gradient(rgba(36,88,112,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(36,88,112,.06) 1px, transparent 1px); background-size: 36px 36px; }
html[data-skin="nautical"] .navbar { position: relative; height: 78px; background: rgba(244,237,221,.88); border-bottom: 3px double var(--accent); }
html[data-skin="nautical"] .navbar-brand { color: var(--text); font-size: 1.25rem; letter-spacing: .08em; }
html[data-skin="nautical"] .navbar-brand-mark { border-radius: 50%; color: var(--accent); border: 2px solid var(--accent); }
html[data-skin="nautical"] .main-content { max-width: 1200px; }
html[data-skin="nautical"] .tool-section { counter-reset: route-card; }
html[data-skin="nautical"] .tool-section-title { font-size: 1.55rem; border-bottom: 1px solid var(--accent); letter-spacing: .08em; }
html[data-skin="nautical"] .tool-section-title::before { width: .8rem; height: .8rem; border: 2px solid var(--accent); background: transparent; border-radius: 50%; }
html[data-skin="nautical"] .home-page .tool-grid { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 1rem 2rem; }
html[data-skin="nautical"] .home-page .tool-card { counter-increment: route-card; min-height: 8rem; position: relative; display: grid; grid-template-columns: 3rem 1fr; grid-template-rows: auto auto; align-items: center; column-gap: 1rem; text-align: left; border: 1px solid var(--border); border-left: 5px solid var(--accent); background: rgba(244,237,221,.78); }
html[data-skin="nautical"] .home-page .tool-card::before { content: 'N' counter(route-card, decimal-leading-zero); position: absolute; top: .5rem; right: .6rem; font: 700 .6rem/1 Arial,sans-serif; color: var(--accent); }
html[data-skin="nautical"] .home-page .tool-card-icon { grid-row: 1 / 3; margin: 0; font-size: 1.8rem; filter: grayscale(1); }
html[data-skin="nautical"] .home-page .tool-card-title { align-self: end; }
html[data-skin="nautical"] .home-page .tool-card-desc { align-self: start; }
html[data-skin="nautical"] .home-page .tool-card:hover { transform: none; box-shadow: inset 0 0 0 2px rgba(29,88,117,.12); }

@media (max-width: 900px) {
  html[data-skin="paper"] .home-page .tool-grid,
  html[data-skin="pixel"] .home-page .tool-grid,
  html[data-skin="swiss"] .home-page .tool-grid,
  html[data-skin="blueprint"] .home-page .tool-grid,
  html[data-skin="collage"] .home-page .tool-grid,
  html[data-skin="win98"] .home-page .tool-grid,
  html[data-skin="magazine"] .home-page .tool-grid,
  html[data-skin="bauhaus"] .home-page .tool-grid,
  html[data-skin="nordic"] .home-page .tool-grid,
  html[data-skin="industrial"] .home-page .tool-grid,
  html[data-skin="crayon"] .home-page .tool-grid,
  html[data-skin="comic"] .home-page .tool-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  html[data-skin="amber"] .home-page .tool-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  html[data-skin="swiss"] .navbar { padding-inline: 1.25rem; }
  html[data-skin="paper"] .home-page .tool-card:nth-child(3n) { border-right: 1px solid var(--border); }
  html[data-skin="paper"] .home-page .tool-card:nth-child(2n) { border-right: 0; }
  html[data-skin="workbench"] .navbar {
    position: sticky;
    inset: auto;
    width: 100%;
    height: 60px;
    min-height: 60px;
    padding: 0 1rem;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
  html[data-skin="workbench"] .navbar-actions { flex: 0 1 auto; flex-direction: row; align-items: center; }
  html[data-skin="workbench"] .skin-picker { margin-top: 0; }
  html[data-skin="workbench"] .skin-picker-menu { top: calc(100% + .55rem); right: 0; bottom: auto; left: auto; }
  html[data-skin="workbench"] .main-content { width: 100%; margin-left: 0; padding: 1.5rem 1rem; }
  html[data-skin="workbench"] .site-footer { margin-left: 0; }
}

@media (max-width: 620px) {
  .navbar-brand-text { font-size: .88rem; }
  .skin-picker-label { display: none; }
  .skin-picker-button { min-width: 8.2rem; padding-inline: .55rem; }
  .skin-picker-menu { position: fixed; top: 68px; right: .75rem; left: .75rem; width: auto; }
  html[data-skin="paper"] .navbar { height: 64px; padding-inline: 1rem; }
  html[data-skin="paper"] .home-page .tool-grid,
  html[data-skin="pixel"] .home-page .tool-grid,
  html[data-skin="workbench"] .home-page .tool-grid,
  html[data-skin="swiss"] .home-page .tool-grid,
  html[data-skin="ink"] .home-page .tool-grid,
  html[data-skin="blueprint"] .home-page .tool-grid,
  html[data-skin="collage"] .home-page .tool-grid,
  html[data-skin="win98"] .home-page .tool-grid,
  html[data-skin="magazine"] .home-page .tool-grid,
  html[data-skin="amber"] .home-page .tool-grid,
  html[data-skin="bauhaus"] .home-page .tool-grid,
  html[data-skin="nordic"] .home-page .tool-grid,
  html[data-skin="industrial"] .home-page .tool-grid,
  html[data-skin="crayon"] .home-page .tool-grid,
  html[data-skin="comic"] .home-page .tool-grid,
  html[data-skin="nautical"] .home-page .tool-grid { grid-template-columns: 1fr; }
  html[data-skin="paper"] .home-page .tool-card { border-right: 0 !important; }
  html[data-skin="swiss"] .navbar,
  html[data-skin="ink"] .navbar { height: 64px; padding-inline: 1rem; }
  html[data-skin="swiss"] .home-page .tool-grid { border-left: 0; border-top: 1px solid var(--text); }
  html[data-skin="swiss"] .home-page .tool-card { border-left: 1px solid var(--text); }
  html[data-skin="collage"] .home-page .tool-card:nth-child(4n+1) { grid-column: span 1; }
  html[data-skin="magazine"] .home-page .tool-card:nth-child(4n+1),
  html[data-skin="bauhaus"] .home-page .tool-card:nth-child(5n+1),
  html[data-skin="comic"] .home-page .tool-card:nth-child(4n+1) { grid-column: span 1; }
  html[data-skin="win98"] .main-content { width: calc(100% - 1rem); margin: .5rem; }
  html[data-skin="mono"] .home-page .tool-card { grid-template-columns: 2.5rem 1fr; gap: .6rem; }
  html[data-skin="mono"] .home-page .tool-card-desc { grid-column: 2; }
}

@media (max-width: 520px) {
  .skin-picker-button { min-width: 3.1rem; justify-content: center; }
  .skin-picker-button #skinPickerName { display: none; }
  .skin-picker-caret { margin-left: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .skin-picker-caret,
  .tool-card { transition: none !important; }
}

/* 游戏角色图片主题：共用实体展台与阴影，分别用游戏配色建立辨识度。 */
.skin-picker-group-label {
  margin: .45rem .35rem .3rem;
  padding: .55rem .35rem .35rem;
  border-top: 1px solid var(--border);
  color: var(--text-muted);
  font-size: .68rem;
  font-weight: 750;
  letter-spacing: .14em;
}
.skin-swatch-game-kirby { background: linear-gradient(135deg, #ffd6e8 0 52%, #f23f91 52%); }
.skin-swatch-game-zelda { background: linear-gradient(135deg, #17352d 0 58%, #d5ae58 58%); }
.skin-swatch-game-street-fighter { background: linear-gradient(135deg, #18233d 0 45%, #d94a43 45% 70%, #e5a53c 70%); }
.skin-swatch-game-ace-attorney { background: linear-gradient(135deg, #eef2f5 0 55%, #235287 55% 78%, #b98a35 78%); }
.skin-swatch-game-fire-emblem { background: linear-gradient(135deg, #15233c 0 50%, #9f3540 50% 73%, #c7a35a 73%); }
.skin-swatch-game-monster-hunter { background: linear-gradient(135deg, #27291f 0 55%, #8a7143 55% 78%, #67784c 78%); }
.skin-swatch-game-pokemon { background: linear-gradient(135deg, #edf7fb 0 45%, #f1c83f 45% 72%, #3d76b8 72%); }
.skin-swatch-game-sonic { background: linear-gradient(135deg, #eaf7fb 0 42%, #1769b0 42% 72%, #efc33f 72%); }
.skin-swatch-game-final-fantasy-vii { background: linear-gradient(135deg, #141c20 0 58%, #43b9a7 58%); }
.skin-swatch-game-persona-5 { background: linear-gradient(135deg, #111 0 48%, #d93238 48% 76%, #f5f1e8 76%); border-radius: .2rem; }
.skin-swatch-game-tekken { background: linear-gradient(135deg, #17151c 0 50%, #c34250 50% 72%, #df8a35 72%); }
.skin-swatch-game-elden-ring { background: radial-gradient(circle at 50% 50%, #c0a05a 0 18%, #1c211d 20% 100%); }
.skin-swatch-game-mega-man { background: linear-gradient(135deg, #061f49 0 44%, #1177c7 44% 73%, #4fdcff 73%); }
.skin-swatch-game-castlevania { background: linear-gradient(135deg, #221923 0 48%, #713043 48% 73%, #a7a3b2 73%); }
.skin-swatch-game-chrono-trigger { background: linear-gradient(135deg, #e8e1cd 0 50%, #2d7f7a 50% 74%, #b48a3c 74%); }
.skin-swatch-game-random-warm { background: conic-gradient(#f6c867, #ef8d73, #f4d9a7, #72bba7, #f6c867); }
.skin-swatch-game-random-dark { background: conic-gradient(#13233a, #81527e, #276f7d, #be874a, #13233a); }

html[data-skin="game_kirby"] {
  --bg: #f8d5e4; --bg-card: #fff0f7; --bg-input: #efbfd3; --accent: #ed3f8a;
  --accent-glow: rgba(237,63,138,.2); --text: #3c1e2d; --text-muted: #795064; --border: #e58db5;
  --game-edge: #b62c68; --game-shadow: rgba(110,43,72,.34); --game-highlight: #fff;
  --game-body-pattern: radial-gradient(circle at 18px 18px, rgba(237,63,138,.12) 0 3px, transparent 3.5px);
}
html[data-skin="game_zelda"] {
  --bg: #12251f; --bg-card: #1d342b; --bg-input: #29463a; --accent: #d5ae58;
  --accent-glow: rgba(213,174,88,.16); --text: #f1ead7; --text-muted: #b0ae9a; --border: #536b58;
  --game-edge: #c19a4a; --game-shadow: rgba(3,12,8,.58); --game-highlight: #7d8f70;
  --game-body-pattern: linear-gradient(30deg, rgba(213,174,88,.035) 12%, transparent 12.5%, transparent 87%, rgba(213,174,88,.035) 87.5%);
}
html[data-skin="game_street_fighter"] {
  --bg: #111a2d; --bg-card: #1b2944; --bg-input: #263858; --accent: #e05a48;
  --accent-glow: rgba(224,90,72,.17); --text: #f7eee2; --text-muted: #aeb8c9; --border: #435678;
  --game-edge: #e3a43e; --game-shadow: rgba(4,8,18,.6); --game-highlight: #5e78a1;
  --game-body-pattern: repeating-linear-gradient(135deg, rgba(224,90,72,.045) 0 2px, transparent 2px 20px);
}
html[data-skin="game_ace_attorney"] {
  --bg: #e8edf1; --bg-card: #f9fbfc; --bg-input: #dce5ec; --accent: #28588b;
  --accent-glow: rgba(40,88,139,.14); --text: #243244; --text-muted: #667486; --border: #a8b8c6;
  --game-edge: #aa7d2d; --game-shadow: rgba(43,58,73,.28); --game-highlight: #fff;
  --game-body-pattern: repeating-linear-gradient(90deg, rgba(40,88,139,.045) 0 1px, transparent 1px 34px);
}
html[data-skin="game_fire_emblem"] {
  --bg: #111b2d; --bg-card: #1a2942; --bg-input: #263956; --accent: #c6a25a;
  --accent-glow: rgba(198,162,90,.15); --text: #f1ecdf; --text-muted: #aeb6c5; --border: #4b5f7e;
  --game-edge: #9f3540; --game-shadow: rgba(3,8,17,.58); --game-highlight: #637799;
  --game-body-pattern: linear-gradient(45deg, rgba(159,53,64,.04) 25%, transparent 25% 75%, rgba(159,53,64,.04) 75%);
}
html[data-skin="game_monster_hunter"] {
  --bg: #20231d; --bg-card: #2c3026; --bg-input: #393e31; --accent: #b59050;
  --accent-glow: rgba(181,144,80,.15); --text: #eee9db; --text-muted: #b2ad9d; --border: #5f634e;
  --game-edge: #71804f; --game-shadow: rgba(6,8,5,.6); --game-highlight: #74775e;
  --game-body-pattern: repeating-linear-gradient(125deg, rgba(181,144,80,.035) 0 2px, transparent 2px 18px);
}
html[data-skin="game_pokemon"] {
  --bg: #eaf4f8; --bg-card: #fffdf5; --bg-input: #dcecf2; --accent: #3975b8;
  --accent-glow: rgba(57,117,184,.14); --text: #26394a; --text-muted: #63778a; --border: #a8c6d5;
  --game-edge: #d5a91f; --game-shadow: rgba(50,80,101,.27); --game-highlight: #fff;
  --game-body-pattern: radial-gradient(circle at 18px 18px, rgba(57,117,184,.07) 0 4px, transparent 4.5px);
}
html[data-skin="game_sonic"] {
  --bg: #e8f3f7; --bg-card: #f9fdff; --bg-input: #d8ebf2; --accent: #1769b0;
  --accent-glow: rgba(23,105,176,.14); --text: #1e3448; --text-muted: #5f7488; --border: #9fc3d2;
  --game-edge: #d6a822; --game-shadow: rgba(38,72,94,.27); --game-highlight: #fff;
  --game-body-pattern: repeating-linear-gradient(135deg, rgba(23,105,176,.045) 0 2px, transparent 2px 24px);
}
html[data-skin="game_final_fantasy_vii"] {
  --bg: #10171a; --bg-card: #182429; --bg-input: #22343a; --accent: #49bba8;
  --accent-glow: rgba(73,187,168,.15); --text: #e4eeee; --text-muted: #99adae; --border: #3d5a5d;
  --game-edge: #4b827b; --game-shadow: rgba(2,7,9,.64); --game-highlight: #527076;
  --game-body-pattern: repeating-linear-gradient(90deg, rgba(73,187,168,.035) 0 1px, transparent 1px 32px);
}
html[data-skin="game_persona_5"] {
  --bg: #111; --bg-card: #1b1b1b; --bg-input: #282525; --accent: #df343b;
  --accent-glow: rgba(223,52,59,.16); --text: #f5f1e8; --text-muted: #b8b1ad; --border: #5b4a4a;
  --game-edge: #df343b; --game-shadow: rgba(0,0,0,.68); --game-highlight: #7b6c6c;
  --game-body-pattern: repeating-linear-gradient(155deg, rgba(223,52,59,.055) 0 3px, transparent 3px 25px);
}
html[data-skin="game_tekken"] {
  --bg: #15131a; --bg-card: #211d27; --bg-input: #302938; --accent: #d55655;
  --accent-glow: rgba(213,86,85,.16); --text: #f0e9e5; --text-muted: #b2a7ad; --border: #574858;
  --game-edge: #d78137; --game-shadow: rgba(3,2,5,.64); --game-highlight: #766171;
  --game-body-pattern: repeating-linear-gradient(120deg, rgba(215,129,55,.04) 0 2px, transparent 2px 21px);
}
html[data-skin="game_elden_ring"] {
  --bg: #171b18; --bg-card: #222722; --bg-input: #303630; --accent: #c1a15c;
  --accent-glow: rgba(193,161,92,.14); --text: #eae6d9; --text-muted: #aaa99e; --border: #565c50;
  --game-edge: #8e783f; --game-shadow: rgba(2,4,2,.66); --game-highlight: #6b7163;
  --game-body-pattern: radial-gradient(circle at 30px 30px, rgba(193,161,92,.04) 0 1px, transparent 2px);
}
html[data-skin="game_mega_man"] {
  --bg: #061c3c; --bg-card: #0a3470; --bg-input: #0e477d; --accent: #4fdcff;
  --accent-glow: rgba(79,220,255,.2); --text: #f1fbff; --text-muted: #bdd7e8; --border: #2379b6;
  --game-edge: #168fd0; --game-shadow: rgba(0,10,29,.68); --game-highlight: #5c9fd0;
  --game-body-pattern: linear-gradient(rgba(79,220,255,.065) 1px, transparent 1px), linear-gradient(90deg, rgba(79,220,255,.065) 1px, transparent 1px);
}
html[data-skin="game_castlevania"] {
  --bg: #1b151c; --bg-card: #291e29; --bg-input: #382939; --accent: #b57a8b;
  --accent-glow: rgba(181,122,139,.14); --text: #eee8eb; --text-muted: #b2a5ae; --border: #5c4859;
  --game-edge: #7b374d; --game-shadow: rgba(3,1,4,.68); --game-highlight: #756171;
  --game-body-pattern: repeating-linear-gradient(90deg, rgba(181,122,139,.035) 0 1px, transparent 1px 30px);
}
html[data-skin="game_chrono_trigger"] {
  --bg: #e8e1cf; --bg-card: #f8f3e7; --bg-input: #ddd6c2; --accent: #2d7f7a;
  --accent-glow: rgba(45,127,122,.14); --text: #303b39; --text-muted: #6b7470; --border: #b7ad94;
  --game-edge: #a47d35; --game-shadow: rgba(66,59,43,.28); --game-highlight: #fffdf7;
  --game-body-pattern: linear-gradient(45deg, rgba(45,127,122,.04) 25%, transparent 25% 75%, rgba(45,127,122,.04) 75%);
}
html[data-skin="game_random_warm"] {
  --bg: #f3e1bf; --bg-card: #fff6e4; --bg-input: #ead1aa; --accent: #b95d43;
  --accent-glow: rgba(185,93,67,.16); --text: #3c2e25; --text-muted: #776052; --border: #c8a77c;
  --game-edge: #b97c3f; --game-shadow: rgba(100,69,39,.3); --game-highlight: #fffdf5;
  --game-body-pattern: radial-gradient(circle at 18px 18px, rgba(185,93,67,.07) 0 3px, transparent 3.5px), linear-gradient(135deg, rgba(226,151,82,.04) 25%, transparent 25% 75%, rgba(226,151,82,.04) 75%);
}
html[data-skin="game_random_dark"] {
  --bg: #161b22; --bg-card: #202833; --bg-input: #2b3542; --accent: #dfb657;
  --accent-glow: rgba(223,182,87,.14); --text: #edf1f5; --text-muted: #a7b0bb; --border: #465466;
  --game-edge: #6f879e; --game-shadow: rgba(2,5,9,.64); --game-highlight: #69798a;
  --game-body-pattern: repeating-linear-gradient(135deg, rgba(112,144,173,.035) 0 2px, transparent 2px 22px);
}

html[data-image-skin="1"] body {
  background-color: var(--bg);
  background-image: none;
}
html[data-image-skin="1"] .navbar {
  position: relative;
  /* Keep the entire navigation stack above content, not just its menu. */
  z-index: 100;
  background: var(--bg-card);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 5px 0 var(--game-shadow), inset 0 -1px 0 var(--game-highlight);
}
html[data-image-skin="1"] .main-content,
html[data-image-skin="1"] .site-footer { position: relative; z-index: 2; }
html[data-image-skin="1"] .navbar-brand { color: var(--text); }
html[data-image-skin="1"] .navbar-brand-mark {
  border: 2px solid var(--game-edge);
  background: var(--bg-input);
  color: var(--accent);
  box-shadow: inset 0 2px 0 var(--game-highlight), 0 3px 0 var(--game-shadow);
}
html[data-image-skin="1"] .main-content { max-width: 1320px; }
html[data-image-skin="1"] .tool-section-title {
  position: relative;
  width: fit-content;
  min-height: 3.6rem;
  padding: .8rem 5.2rem .8rem 1rem;
  border: 1px solid var(--border);
  border-left: 5px solid var(--accent);
  border-radius: 10px;
  background: var(--bg-card);
  box-shadow: inset 0 2px 0 var(--game-highlight), 0 5px 0 var(--game-shadow), 0 12px 24px rgba(0,0,0,.12);
}
html[data-image-skin="1"] .home-page .tool-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.2rem; }
html[data-image-skin="1"] .home-page .tool-card {
  position: relative;
  min-height: calc(13rem - 30px);
  overflow: hidden;
  align-items: flex-start;
  padding: 1.15rem 7.6rem 1.1rem 1.1rem;
  border: 1px solid var(--border);
  border-bottom: 4px solid var(--game-edge);
  border-radius: 14px;
  background: linear-gradient(145deg, var(--bg-card), var(--bg-input));
  text-align: left;
  box-shadow: inset 0 2px 0 var(--game-highlight), 0 7px 0 var(--game-shadow), 0 18px 28px rgba(0,0,0,.12);
}
html[data-image-skin="1"] .home-page .tool-card:hover {
  transform: translateY(-3px);
  border-color: var(--accent);
  box-shadow: inset 0 2px 0 var(--game-highlight), 0 10px 0 var(--game-shadow), 0 24px 34px rgba(0,0,0,.18);
}
html[data-image-skin="1"] .home-page .tool-card-icon { margin-bottom: .65rem; font-size: 2rem; }
html[data-image-skin="1"] .home-page .tool-card-title { color: var(--text); font-weight: 800; }
html[data-image-skin="1"] .home-page {
  --home-card-description-text: color-mix(in srgb, var(--text-muted) 80%, var(--text));
}
html[data-image-skin="1"] .home-page .tool-card-desc { color: var(--home-card-description-text); }
html[data-image-skin="1"] .card,
html[data-image-skin="1"] .panel,
html[data-image-skin="1"] .modal-content {
  border-color: var(--border);
  box-shadow: inset 0 1px 0 var(--game-highlight), 0 6px 0 var(--game-shadow), 0 18px 34px rgba(0,0,0,.14);
}
html[data-image-skin="1"] .btn,
html[data-image-skin="1"] button:not(.skin-picker-menu button) {
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 3px 0 var(--game-shadow);
}
html[data-image-skin="1"] .site-footer { background: var(--bg-card); border-top: 1px solid var(--border); }

.game-theme-character { display: none; }
html[data-image-skin="1"] .game-theme-character { display: block; }
html[data-image-skin="1"] .game-theme-character-empty { display: none; }
.game-theme-character-host { position: relative; }
.game-theme-character {
  position: relative;
  pointer-events: none;
  isolation: isolate;
}
.game-theme-character img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center bottom;
}
.game-theme-character-art {
  position: relative;
  z-index: 2;
}
.game-theme-character-shadow {
  position: absolute;
  z-index: 0;
  inset: 0;
  opacity: .09;
  transform: scale(1.3, 1.32);
  transform-origin: 50% 100%;
  filter: none;
}
html[data-image-skin="1"][data-theme="light"] .game-theme-character-shadow {
  opacity: .06;
}
html[data-image-skin="1"] .game-theme-brand-character {
  top: -.15rem;
  width: 2.9rem;
  height: 3.45rem;
  margin-left: .65rem;
  flex: 0 0 auto;
}
.game-theme-brand-character .game-theme-character-shadow { transform: scale(1.2, 1.22); filter: none; }
html[data-image-skin="1"] .game-theme-title-character {
  position: absolute;
  right: .45rem;
  bottom: 1.25rem;
  width: 4.35rem;
  height: 5.5rem;
}
html[data-image-skin="1"] .game-theme-card-character {
  position: absolute;
  right: .45rem;
  bottom: 1.9rem;
  width: 6rem;
  height: 9rem;
  transition: transform 160ms ease;
}
html[data-image-skin="1"] .home-page .tool-card:hover .game-theme-card-character { transform: translateY(-4px) scale(1.02); }
html[data-image-skin="1"] .tool-page-header {
  position: relative;
  min-height: 4.8rem;
  padding-right: 6.5rem;
}
html[data-image-skin="1"] .game-theme-tool-header-character {
  position: absolute;
  right: .6rem;
  bottom: 1.25rem;
  width: 5.25rem;
  height: 6.3rem;
}
@media (max-width: 900px) {
  html[data-image-skin="1"] .home-page .tool-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  html[data-image-skin="1"] .home-page .tool-grid { grid-template-columns: 1fr; }
  html[data-image-skin="1"] .home-page .main-content > .tool-section:first-child { margin-top: .75rem; }
  html[data-image-skin="1"] .home-page .tool-section { margin-bottom: 2rem; }
  html[data-image-skin="1"] .home-page .tool-section-title { margin-bottom: 1rem; }
  html[data-image-skin="1"] .home-page .tool-grid,
  html[data-image-skin="1"] .home-page .ai-development-tool-rows { gap: 1rem; }
  html[data-image-skin="1"] .home-page .tool-card {
    display: grid;
    grid-template-columns: 1.9rem minmax(0, 1fr);
    grid-template-rows: auto 1fr;
    align-content: center;
    column-gap: .65rem;
    min-height: 9.75rem;
    padding: .9rem 6.9rem .9rem 1rem;
  }
  html[data-image-skin="1"] .home-page .tool-card-icon {
    grid-column: 1;
    grid-row: 1;
    align-self: center;
    margin-bottom: 0;
    font-size: 1.9rem;
  }
  html[data-image-skin="1"] .home-page .tool-card-title {
    grid-column: 2;
    grid-row: 1;
    align-self: center;
    margin-bottom: 0;
    font-size: 1.125rem;
    line-height: 1.35;
  }
  html[data-image-skin="1"] .home-page .tool-card-desc {
    grid-column: 1 / -1;
    grid-row: 2;
    margin-top: .6rem;
    font-size: 1rem;
    line-height: 1.5;
  }
  html[data-image-skin="1"] .game-theme-card-character {
    right: .35rem;
    bottom: 1.15rem;
    width: 6rem;
    height: 9rem;
  }
  html[data-image-skin="1"] .game-theme-brand-character { display: none; }
  html[data-image-skin="1"] .tool-section-title { min-height: 3.25rem; padding-right: 5rem; font-size: 1.1rem; }
  html[data-image-skin="1"] .game-theme-title-character { width: 3.8rem; height: 4.8rem; }
  html[data-image-skin="1"] .tool-page-header { min-height: 4.2rem; padding-right: 5.6rem; }
  html[data-image-skin="1"] .game-theme-tool-header-character { width: 4.4rem; height: 5.35rem; }
}
@media (prefers-reduced-motion: reduce) {
  .game-theme-card-character { transition: none !important; }
}