/* 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: 11rem; justify-content: space-between; }
.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"] .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"] .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 (prefers-reduced-motion: reduce) {
  .skin-picker-caret,
  .tool-card { transition: none !important; }
}