/* ==========================================================================
   Json168 — 首页高保真还原
   设计基准宽度：1672px（对应 2x 设计稿 3344px 的 1x 尺寸）
   ========================================================================== */

:root {
  /* ---- 色彩变量 ---- */
  --color-bg-page: #FDFBF9;           /* 页面整体米白背景 */
  --color-bg-hero: #FBF3EC;           /* Hero 区浅暖橙背景 */
  --color-bg-white: #FFFFFF;          /* 卡片白色背景 */
  --color-bg-sidebar: #FEFCFA;        /* 侧边栏背景 */
  --color-bg-topbar: #FBEAD9;         /* 顶栏暖橙底（与内容区分层，清爽不压抑） */

  --color-orange-primary: #E36A2E;    /* 主橙色（按钮/强调） */
  --color-orange-hover: #D15F26;      /* 橙色 hover 深一档 */
  --color-orange-icon: #E37E3D;       /* 图标橙 */
  --color-orange-text: #E0691F;       /* 橙色文字（链接/标题强调） */
  --color-orange-pill-bg: #FCF0E4;    /* 首页当前项高亮背景 */
  --color-orange-card-border: #F0B98C;/* 继续使用卡片高亮边框 */
  --color-orange-card-bg: #FFF8F2;    /* 继续使用高亮卡片背景 */
  --color-member-card-bg: #FBEEE6;    /* 会员卡浅橙背景 */
  --color-member-grad-start: #F0955A;
  --color-member-grad-end: #E0691F;

  --color-text-primary: #1F1B18;      /* 主标题文字（近黑褐色） */
  --color-text-secondary: #66605B;    /* 次要说明文字 */
  --color-text-muted: #999390;        /* 弱化文字（时间戳等） */
  --color-text-placeholder: #B4ACA6;

  --color-border-light: #EFE9E3;      /* 卡片边框 */
  --color-border-lighter: #F3EEE9;

  --color-icon-dev-bg: #DFF5EC;       /* 开发工具图标背景 */
  --color-icon-dev-fg: #2FAE7C;
  --color-icon-text-bg: #DEEBF9;      /* 文本处理图标背景 */
  --color-icon-text-fg: #4A8FDB;
  --color-icon-image-bg: #EFE3FC;     /* 图片与媒体图标背景 */
  --color-icon-image-fg: #8A5CD6;
  --color-icon-encrypt-bg: #FDECE2;   /* 编码加密图标背景 */
  --color-icon-encrypt-fg: #E0691F;
  --color-icon-network-bg: #E1EAFC;   /* 网络与运维图标背景 */
  --color-icon-network-fg: #4472DB;
  --color-icon-ai-bg: #F1E7FC;        /* AI 效率图标背景 */
  --color-icon-ai-fg: #9059D8;

  /* 阴影：从「几乎不可见」提升到有真实暖色纵深，卡片不再像平贴在页面上 */
  --shadow-card: 0 1px 2px rgba(60, 36, 16, 0.05), 0 4px 12px rgba(60, 36, 16, 0.06);
  --shadow-card-hover: 0 8px 26px rgba(200, 90, 30, 0.14), 0 2px 8px rgba(60, 36, 16, 0.06);
  --shadow-header: 0 2px 12px rgba(180, 110, 60, 0.10);

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-full: 999px;

  --font-sans: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei",
    "Helvetica Neue", Helvetica, Arial, sans-serif;

  --sidebar-width-expanded: 273px;
  --sidebar-width-collapsed: 72px;
  --right-rail-width: 264px;
  --header-height: 68px;
  --page-width: 1672px;

  --transition-fast: 0.18s ease;
  --transition-medium: 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}

* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--font-sans);
  background: var(--color-bg-page);
  color: var(--color-text-primary);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  min-width: 1200px;
}

a {
  text-decoration: none;
  color: inherit;
}

button {
  font-family: inherit;
  cursor: pointer;
}

ul, ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

svg {
  display: block;
}

/* ==========================================================================
   页面外框
   ========================================================================== */

.app-shell {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: var(--page-width);
  min-height: 100vh;
  margin: 0 auto;
  background: var(--color-bg-page);
  position: relative;
}

.app-body {
  display: flex;
  flex: 1;
  align-items: stretch;
  min-width: 0;
}

/* ==========================================================================
   顶部 Header
   ========================================================================== */

.top-header {
  height: var(--header-height);
  min-height: var(--header-height);
  display: flex;
  align-items: center;
  background: var(--color-bg-topbar);
  border-bottom: 1px solid var(--color-orange-card-border);
  box-shadow: var(--shadow-header);
  position: sticky;
  top: 0;
  z-index: 50;
}

.header-left {
  width: var(--sidebar-width-expanded);
  min-width: var(--sidebar-width-expanded);
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 0 20px 0 24px;
  transition: width var(--transition-medium), min-width var(--transition-medium), padding var(--transition-medium);
}

/* 参考图：折叠态下 Header 的 Logo 区域保持原样不收窄，
   仅侧边栏图标栏收起。这里保留 Logo 文案常驻，
   同时保留展开/收起按钮以保证可用性（可再次点击展开）。 */
.app-shell.collapsed .header-left {
  width: var(--sidebar-width-expanded);
  min-width: var(--sidebar-width-expanded);
  padding: 0 20px 0 24px;
  justify-content: space-between;
}

.logo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 20px;
  font-weight: 700;
  color: var(--color-text-primary);
  white-space: nowrap;
  overflow: hidden;
}

.logo-mark {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
}

.logo-text {
  transition: opacity var(--transition-fast), width var(--transition-medium);
}

/* 侧边栏内顶部的展开/收起按钮（参考 claude.ai：按钮常驻侧边栏内，而非顶部 header） */
.sidebar-head {
  display: flex;
  justify-content: flex-end;
  padding: 2px 4px 8px;
}

.app-shell.collapsed .sidebar-head {
  justify-content: center;
  padding: 2px 0 8px;
}

.sidebar-toggle {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-md);
  border: none;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-secondary);
  cursor: pointer;
  flex: 0 0 auto;
  transition: background var(--transition-fast), color var(--transition-fast);
}

.sidebar-toggle:hover {
  background: #F0E7DC;
  color: var(--color-text-primary);
}

/* 展开态显示「«」收起图标，隐藏汉堡图标；收起态反之 */
.sidebar-toggle .icon-expand {
  display: none;
}

.app-shell.collapsed .sidebar-toggle .icon-collapse {
  display: none;
}

.app-shell.collapsed .sidebar-toggle .icon-expand {
  display: block;
}

.header-center {
  flex: 1;
  display: flex;
  justify-content: center;
  padding: 0 24px;
}

.search-box {
  position: relative;
  width: 100%;
  max-width: 480px;
  height: 40px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 14px;
  border-radius: var(--radius-full);
  border: 1px solid var(--color-orange-card-border);
  background: var(--color-bg-white);
  color: var(--color-text-placeholder);
  box-shadow: var(--shadow-card);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.search-box:focus-within {
  border-color: var(--color-orange-primary);
  box-shadow: 0 0 0 3px rgba(227, 106, 46, 0.12);
}

.search-box svg {
  flex: 0 0 auto;
  color: var(--color-text-placeholder);
}

.search-box input {
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  font-size: 13.5px;
  color: var(--color-text-primary);
  min-width: 0;
}

.search-box input::placeholder {
  color: var(--color-text-placeholder);
}

.search-kbd {
  flex: 0 0 auto;
  font-size: 12px;
  color: var(--color-text-placeholder);
  background: #F1EBE4;
  border-radius: 5px;
  padding: 2px 6px;
  white-space: nowrap;
}

.header-right {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 0 28px 0 0;
  white-space: nowrap;
}

.login-link {
  font-size: 14px;
  color: var(--color-text-primary);
}

.login-link:hover {
  color: var(--color-orange-primary);
}

.btn-upgrade {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 9px 18px;
  border-radius: var(--radius-full);
  background: var(--color-orange-primary);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  border: none;
  transition: background var(--transition-fast), transform var(--transition-fast);
}

.btn-upgrade:hover {
  background: var(--color-orange-hover);
  transform: translateY(-1px);
}

/* 顶栏：语言切换器（地球图标 + 下拉语言列表），交互与用户菜单一致 */
.lang-switcher {
  position: relative;
}

.lang-trigger {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-full);
  background: var(--color-bg-white);
  color: var(--color-text-secondary);
  cursor: pointer;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.lang-trigger:hover {
  border-color: var(--color-orange-primary);
  box-shadow: var(--shadow-card);
  color: var(--color-orange-text);
}

.lang-dropdown {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  min-width: 140px;
  background: var(--color-bg-white);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card-hover);
  padding: 6px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity var(--transition-fast), transform var(--transition-fast), visibility var(--transition-fast);
  z-index: 50;
}

.lang-switcher.open .lang-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.lang-dropdown-item {
  display: block;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  font-size: 13.5px;
  color: var(--color-text-secondary);
  transition: background var(--transition-fast), color var(--transition-fast);
}

.lang-dropdown-item:hover {
  background: var(--color-orange-pill-bg);
  color: var(--color-orange-text);
}

.lang-dropdown-item.active {
  color: var(--color-orange-text);
  font-weight: 700;
}

/* 顶栏：登录后的用户菜单（头像 + 昵称 + 下拉） */
.user-menu {
  position: relative;
}

.user-trigger {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 10px 5px 6px;
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-full);
  background: var(--color-bg-white);
  cursor: pointer;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.user-trigger:hover {
  border-color: var(--color-orange-primary);
  box-shadow: var(--shadow-card);
}

.user-avatar {
  width: 30px;
  height: 30px;
  border-radius: var(--radius-full);
  object-fit: cover;
  flex: none;
}

.user-avatar-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-orange-primary);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
}

.user-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text-primary);
  max-width: 96px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.user-caret {
  color: var(--color-text-muted);
  transition: transform var(--transition-fast);
}

.user-menu.open .user-caret {
  transform: rotate(180deg);
}

.user-dropdown {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  min-width: 220px;
  background: var(--color-bg-white);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card-hover);
  padding: 8px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity var(--transition-fast), transform var(--transition-fast), visibility var(--transition-fast);
  z-index: 50;
}

.user-menu.open .user-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.user-dropdown-head {
  padding: 8px 12px 12px;
  border-bottom: 1px solid var(--color-border-lighter);
  margin-bottom: 6px;
}

.user-dropdown-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--color-text-primary);
}

.user-dropdown-mail {
  font-size: 12px;
  color: var(--color-text-muted);
  margin-top: 2px;
  word-break: break-all;
}

.user-dropdown-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: var(--radius-sm);
  font-size: 14px;
  color: var(--color-text-secondary);
  transition: background var(--transition-fast), color var(--transition-fast);
}

.user-dropdown-item:hover {
  background: var(--color-orange-pill-bg);
  color: var(--color-orange-text);
}

.user-dropdown-item svg {
  color: var(--color-text-muted);
}

.user-dropdown-item:hover svg {
  color: var(--color-orange-text);
}

.user-dropdown-logout {
  border-top: 1px solid var(--color-border-lighter);
  margin-top: 6px;
  padding-top: 12px;
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
}

/* ==========================================================================
   侧边栏
   ========================================================================== */

.sidebar {
  width: var(--sidebar-width-expanded);
  min-width: var(--sidebar-width-expanded);
  background: var(--color-bg-sidebar);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 10px 10px 14px;
  transition: width var(--transition-medium), min-width var(--transition-medium), padding var(--transition-medium);
  overflow-x: hidden;
  overflow-y: auto;
  /* 侧边栏独立粘性滚动：始终随视口固定，内容超高时自身出现滚动条，
     不随整页 window 滚动。这样点导航整页刷新后，侧边栏本身就是顶部的短列，
     不会先滚到顶再跳回，从根本上消除晃动。与 .right-rail 同一模式。 */
  align-self: flex-start;
  position: sticky;
  top: var(--header-height);
  max-height: calc(100vh - var(--header-height));
}

.app-shell.collapsed .sidebar {
  width: var(--sidebar-width-collapsed);
  min-width: var(--sidebar-width-collapsed);
  padding: 10px 12px;
  align-items: center;
}

.nav-main {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 10px;
  border-radius: var(--radius-md);
  color: var(--color-text-primary);
  font-size: 13px;
  white-space: nowrap;
  transition: background var(--transition-fast), color var(--transition-fast);
  position: relative;
}

.nav-item:hover {
  background: #F6EFE7;
}

.nav-item.active {
  background: var(--color-orange-pill-bg);
  color: var(--color-orange-text);
  font-weight: 600;
}

.nav-item.active .nav-icon {
  color: var(--color-orange-primary);
}

.nav-icon {
  flex: 0 0 auto;
  width: 17px;
  height: 17px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-secondary);
}

.nav-label {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: opacity var(--transition-fast);
}

.nav-chevron {
  flex: 0 0 auto;
  color: var(--color-text-muted);
  transition: transform var(--transition-fast);
}

.nav-group.open .nav-chevron {
  transform: rotate(180deg);
}

.nav-group-header {
  margin-top: 4px;
  cursor: pointer;
}

.nav-children {
  display: flex;
  flex-direction: column;
  padding-left: 16px;
  border-left: 1px solid var(--color-border-light);
  margin-left: 18px;
  overflow: hidden;
  max-height: 0;
  transition: max-height var(--transition-medium);
}

.nav-group.open .nav-children {
  max-height: 400px;
}

.nav-child {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 8px;
  font-size: 12px;
  color: var(--color-text-secondary);
  border-radius: var(--radius-sm);
  white-space: nowrap;
}

.nav-child:hover {
  background: #F6EFE7;
  color: var(--color-text-primary);
}

.nav-child .nav-icon {
  width: 14px;
  height: 14px;
  color: var(--color-text-muted);
}

.nav-bottom {
  padding-top: 4px;
}

/* 折叠态：隐藏文字与子菜单，仅保留图标居中 */
.app-shell.collapsed .nav-label,
.app-shell.collapsed .nav-chevron,
.app-shell.collapsed .nav-children,
.app-shell.collapsed .member-card {
  display: none;
}

.app-shell.collapsed .nav-item,
.app-shell.collapsed .nav-group-header {
  justify-content: center;
  padding: 9px;
  width: 40px;
}

.app-shell.collapsed .nav-main {
  align-items: center;
}

.member-card {
  margin-top: 10px;
  padding: 14px 12px;
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, #FDF3EA 0%, #FCEAD9 100%);
}

.member-card-title {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--color-orange-text);
  margin: 0 0 4px;
  line-height: 1.4;
}

.member-card-sub {
  font-size: 10.5px;
  color: var(--color-text-secondary);
  margin: 0 0 10px;
}

.btn-member-cta {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 0;
  border-radius: var(--radius-full);
  border: none;
  background: var(--color-orange-primary);
  color: #fff;
  font-size: 12.5px;
  font-weight: 600;
  transition: background var(--transition-fast);
}

.btn-member-cta:hover {
  background: var(--color-orange-hover);
}

/* ==========================================================================
   主体三栏布局
   ========================================================================== */

.main-content {
  flex: 1;
  min-width: 0;
  padding: 12px 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.right-rail {
  width: var(--right-rail-width);
  min-width: var(--right-rail-width);
  flex: 0 0 var(--right-rail-width);
  padding: 12px 16px 12px 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  /* 右侧栏独立粘性滚动：随页面滚动始终留在视口内，内容超高时自身出现滚动条，
     不再因固定页宽被挤出视口而“看不到、也滚不到”。 */
  align-self: flex-start;
  position: sticky;
  top: var(--header-height);
  max-height: calc(100vh - var(--header-height));
  overflow-y: auto;
}

.section-block {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}

.section-title-group {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.section-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--color-text-primary);
  margin: 0;
}

.section-sub {
  font-size: 11.5px;
  color: var(--color-text-muted);
}

.section-link {
  font-size: 11.5px;
  color: var(--color-orange-text);
  display: flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}

.section-link:hover {
  color: var(--color-orange-hover);
}

/* ==========================================================================
   Hero 区
   ========================================================================== */

.hero {
  background: var(--color-bg-hero);
  border-radius: var(--radius-lg);
  padding: 18px 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  overflow: hidden;
  min-height: 224px;
}

.hero-content {
  flex: 0 1 460px;
  min-width: 0;
}

.hero-title {
  font-size: 25px;
  line-height: 1.42;
  font-weight: 700;
  color: var(--color-text-primary);
  margin: 0 0 10px;
}

.hero-title .star {
  color: var(--color-orange-primary);
}

.hero-desc {
  font-size: 12.5px;
  line-height: 1.75;
  color: var(--color-text-secondary);
  margin: 0 0 18px;
  max-width: 400px;
}

.hero-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.btn-primary {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 18px;
  border-radius: var(--radius-full);
  background: var(--color-orange-primary);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  border: none;
  transition: background var(--transition-fast), transform var(--transition-fast);
}

.btn-primary:hover {
  background: var(--color-orange-hover);
  transform: translateY(-1px);
}

.btn-secondary {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 16px;
  border-radius: var(--radius-full);
  background: #fff;
  color: var(--color-text-primary);
  font-size: 13px;
  font-weight: 600;
  border: 1px solid var(--color-border-light);
  transition: border-color var(--transition-fast), background var(--transition-fast);
}

.btn-secondary:hover {
  border-color: var(--color-orange-primary);
  background: #FFF8F2;
}

.hero-illustration {
  flex: 1 1 360px;
  max-width: 460px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  min-width: 200px;
}

.hero-illustration img {
  width: 100%;
  height: auto;
  display: block;
}

/* ==========================================================================
   继续使用 / 卡片横排
   ========================================================================== */

.card-row {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
}

.tool-card {
  background: var(--color-bg-white);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-md);
  padding: 12px;
  box-shadow: var(--shadow-card);
  transition: box-shadow var(--transition-fast), transform var(--transition-fast);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.tool-card:hover {
  box-shadow: var(--shadow-card-hover);
  transform: translateY(-2px);
}

.tool-card.featured {
  background: var(--color-orange-card-bg);
  border-color: var(--color-orange-card-border);
}

.tool-card-icon {
  width: 32px;
  height: 32px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.tool-card-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text-primary);
}

.tool-card-sub {
  font-size: 11px;
  color: var(--color-text-muted);
  margin-top: -4px;
}

.tool-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 10.5px;
  color: var(--color-text-muted);
  margin-top: 2px;
}

.tool-card-footer .arrow {
  color: var(--color-text-muted);
}

.tool-card.featured .tool-card-footer {
  color: var(--color-orange-text);
}

/* ==========================================================================
   按分类浏览
   ========================================================================== */

.category-row {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 12px;
}

.category-card {
  background: var(--color-bg-white);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-md);
  padding: 14px;
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: column;
  gap: 6px;
  transition: box-shadow var(--transition-fast), transform var(--transition-fast);
}

.category-card:hover {
  box-shadow: var(--shadow-card-hover);
  transform: translateY(-2px);
}

.category-card-icon {
  width: 32px;
  height: 32px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.category-card-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--color-text-primary);
}

.category-card-count {
  font-size: 10.5px;
  color: var(--color-text-muted);
  margin-top: -4px;
}

.category-card-desc {
  font-size: 11px;
  color: var(--color-text-secondary);
  line-height: 1.55;
  min-height: 34px;
}

.category-card-tags {
  font-size: 10.5px;
  color: var(--color-orange-text);
  padding-top: 8px;
  border-top: 1px solid var(--color-border-lighter);
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
}

/* ==========================================================================
   热门工具
   ========================================================================== */

.popular-row {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 10px;
}

.popular-card {
  background: var(--color-bg-white);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-md);
  padding: 10px;
  box-shadow: var(--shadow-card);
  display: flex;
  align-items: center;
  gap: 8px;
  transition: box-shadow var(--transition-fast), transform var(--transition-fast);
}

.popular-card:hover {
  box-shadow: var(--shadow-card-hover);
  transform: translateY(-2px);
}

.popular-card-icon {
  width: 26px;
  height: 26px;
  border-radius: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}

.popular-card-text {
  min-width: 0;
}

.popular-card-name {
  font-size: 12px;
  font-weight: 600;
  color: var(--color-text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.popular-card-sub {
  font-size: 10px;
  color: var(--color-text-muted);
  white-space: nowrap;
}

/* ==========================================================================
   从问题到解决 三步
   ========================================================================== */

.steps-block {
  background: var(--color-bg-hero);
  border-radius: var(--radius-lg);
  padding: 18px 28px;
  display: flex;
  align-items: center;
  gap: 20px;
}

.steps-left {
  flex: 1;
}

.steps-heading {
  font-size: 15px;
  font-weight: 700;
  margin: 0 0 14px;
  color: var(--color-text-primary);
}

.steps-list {
  display: flex;
  align-items: center;
  gap: 16px;
}

.step-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.step-number {
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #fff;
  color: var(--color-orange-primary);
  border: 1.5px solid var(--color-orange-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
}

.step-title {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--color-text-primary);
  margin: 0 0 2px;
  white-space: nowrap;
}

.step-desc {
  font-size: 11px;
  color: var(--color-text-secondary);
  white-space: nowrap;
}

.step-arrow {
  flex: 0 0 auto;
  color: var(--color-text-placeholder);
}

.steps-illustration {
  flex: 0 0 auto;
  width: 150px;
}

.steps-illustration img {
  width: 100%;
  height: auto;
  display: block;
}

/* ==========================================================================
   右侧栏
   ========================================================================== */

.rail-card {
  background: var(--color-bg-white);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-lg);
  padding: 14px;
  box-shadow: var(--shadow-card);
}

.rail-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.rail-card-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--color-text-primary);
}

.rail-more {
  font-size: 11px;
  color: var(--color-text-muted);
  display: flex;
  align-items: center;
  gap: 2px;
}

.rail-more:hover {
  color: var(--color-orange-text);
}

.rail-list {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.rail-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 4px;
  border-radius: var(--radius-sm);
}

.rail-item:hover {
  background: #FAF6F1;
}

.rail-item-icon {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}

.rail-item-name {
  flex: 1;
  font-size: 11.5px;
  color: var(--color-text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.rail-item-time {
  font-size: 10.5px;
  color: var(--color-text-muted);
  white-space: nowrap;
}

.rail-item-star {
  color: var(--color-orange-primary);
  flex: 0 0 auto;
}

/* 热门榜序号（右栏「热门工具」）：前三名橙色高亮，其余用弱色 */
.rail-rank {
  flex: 0 0 auto;
  width: 18px;
  text-align: center;
  font-size: 11.5px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--color-text-muted);
}
.rail-rank-top {
  color: var(--color-orange-text, var(--color-orange-primary));
}

.rail-member-card {
  background: linear-gradient(180deg, #FDF3EA 0%, #FBE6D3 100%);
  border-radius: var(--radius-lg);
  padding: 16px;
  border: none;
}

.rail-member-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.rail-member-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--color-orange-text);
}

.rail-member-benefits {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 12px;
}

.rail-member-benefit {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  color: var(--color-text-secondary);
}

.rail-member-benefit svg {
  flex: 0 0 auto;
  color: var(--color-orange-primary);
}

/* ==========================================================================
   过渡：折叠态下主体区域重新计算
   ========================================================================== */

.app-shell.collapsed .card-row {
  grid-template-columns: repeat(5, 1fr);
}

/* ==========================================================================
   工具类
   ========================================================================== */

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ============================================================
   工具页 / 分类页 公共样式（对应 doc/TOOLS_MAP.md 的页面体系）
   一律复用 :root 设计 token，不写死颜色。
   ============================================================ */

/* ---- 面包屑 ---- */
.crumb {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--color-text-muted);
  margin-bottom: 18px;
}
.crumb a { color: var(--color-text-secondary); text-decoration: none; }
.crumb a:hover { color: var(--color-orange-text); }
.crumb-sep { color: var(--color-border-light); }
.crumb-current { color: var(--color-text-primary); font-weight: 600; }

/* ---- 工具页头部 ---- */
.tool-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 22px;
}
.tool-title {
  font-size: 26px;
  font-weight: 800;
  color: var(--color-text-primary);
  letter-spacing: -0.01em;
}
.tool-subtitle {
  margin-top: 6px;
  font-size: 14px;
  color: var(--color-text-secondary);
  max-width: 640px;
  line-height: 1.6;
}
.tool-fav-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-full);
  background: var(--color-bg-white);
  color: var(--color-text-secondary);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: all var(--transition-fast);
}
.tool-fav-btn:hover { border-color: var(--color-orange-card-border); color: var(--color-orange-text); }
.tool-fav-btn.is-fav {
  background: var(--color-orange-pill-bg);
  border-color: var(--color-orange-card-border);
  color: var(--color-orange-text);
}
.tool-fav-btn.is-fav svg { fill: var(--color-orange-text); }

/* ---- 工具卡片（工具内容容器） ---- */
.tool-panel {
  background: var(--color-bg-white);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: 22px;
  margin-bottom: 20px;
}
.tool-panel + .tool-panel { margin-top: 0; }

/* 工具页常用控件 */
.field-label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text-secondary);
  margin-bottom: 8px;
}
.tool-textarea, .tool-input, .tool-select {
  width: 100%;
  font-family: "SF Mono", "Menlo", "Consolas", monospace;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--color-text-primary);
  background: var(--color-bg-page);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  resize: vertical;
  transition: border-color var(--transition-fast);
}
.tool-textarea { min-height: 220px; }
.tool-textarea:focus, .tool-input:focus, .tool-select:focus {
  outline: none;
  border-color: var(--color-orange-card-border);
}
.tool-input { font-family: var(--font-sans); }
.tool-select { font-family: var(--font-sans); cursor: pointer; }

.tool-row {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  flex-wrap: wrap;
}
.tool-col { flex: 1 1 320px; min-width: 0; }

.tool-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 14px 0;
  align-items: center;
}

/* 小按钮（工具内操作） */
.btn-tool {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 16px;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border-light);
  background: var(--color-bg-white);
  color: var(--color-text-primary);
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition-fast);
}
.btn-tool:hover { border-color: var(--color-orange-card-border); color: var(--color-orange-text); }
.btn-tool.primary {
  background: var(--color-orange-primary);
  border-color: var(--color-orange-primary);
  color: #fff;
}
.btn-tool.primary:hover { background: var(--color-orange-hover); border-color: var(--color-orange-hover); color: #fff; }

.tool-hint { font-size: 12.5px; color: var(--color-text-muted); }
.tool-error {
  color: #C0392B;
  background: #FDEDEC;
  border: 1px solid #F5C6C0;
  border-radius: var(--radius-md);
  padding: 10px 14px;
  font-size: 13px;
  margin-top: 10px;
  display: none;
}
.tool-error.show { display: block; }

/* ---- 工具页评论区（楼中楼回复） ---- */
.cm-panel { margin-top: 0; }
.cm-head { display: flex; align-items: center; margin-bottom: 14px; }
.cm-count { color: var(--color-text-muted); font-weight: 500; }

.cm-editor { margin-bottom: 16px; }
.cm-textarea { min-height: 84px; }
.cm-editor-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 10px;
}
.cm-editor-actions .btn-tool { flex: none; }

.cm-guest {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  margin-bottom: 16px;
  background: var(--color-bg-page);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-md);
  font-size: 13.5px;
  color: var(--color-text-secondary);
}
.cm-guest .btn-tool { text-decoration: none; }

.cm-empty { padding: 24px 0; text-align: center; color: var(--color-text-muted); font-size: 13.5px; }

.cm-item { display: flex; gap: 12px; padding: 14px 0; border-top: 1px solid var(--color-border-lighter); }
.cm-list > .cm-item:first-child { border-top: none; }

.cm-avatar {
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--color-orange-pill-bg);
  color: var(--color-orange-text);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
  overflow: hidden;
}
.cm-avatar img { width: 100%; height: 100%; object-fit: cover; }

.cm-body { flex: 1; min-width: 0; }
.cm-meta { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.cm-nickname { font-size: 13.5px; font-weight: 700; color: var(--color-text-primary); }
.cm-time { font-size: 12px; color: var(--color-text-muted); }
.cm-text { margin-top: 4px; font-size: 13.5px; line-height: 1.65; color: var(--color-text-primary); white-space: pre-wrap; word-break: break-word; }
.cm-reply-to { color: var(--color-orange-text); font-weight: 600; }

.cm-actions { display: flex; gap: 14px; margin-top: 6px; }
.cm-action-btn {
  border: none;
  background: none;
  padding: 0;
  cursor: pointer;
  font-size: 12.5px;
  color: var(--color-text-muted);
  font-weight: 600;
}
.cm-action-btn:hover { color: var(--color-orange-text); }

.cm-replies { margin-top: 10px; padding-left: 14px; border-left: 2px solid var(--color-border-lighter); display: flex; flex-direction: column; gap: 12px; }
.cm-replies .cm-avatar { width: 28px; height: 28px; font-size: 12px; }

.cm-reply-editor { margin-top: 10px; display: none; }
.cm-reply-editor.open { display: block; }
.cm-reply-editor .tool-textarea { min-height: 64px; }
.cm-reply-editor-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 8px; }

/* JSON 转思维导图：内嵌 jsoncrack.com 画布 */
.jm-canvas-wrap {
  width: 100%;
  height: 640px;
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--color-bg-page);
}
.jm-canvas { width: 100%; height: 100%; border: 0; display: block; }

/* ---- 分类落地页工具网格 ---- */
.cat-group { margin-bottom: 8px; }
.tool-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 14px;
}
.grid-tool-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  background: var(--color-bg-white);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  text-decoration: none;
  transition: all var(--transition-fast);
}
.grid-tool-card:hover {
  box-shadow: var(--shadow-card-hover);
  border-color: var(--color-orange-card-border);
  transform: translateY(-1px);
}
.grid-tool-icon {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-icon-dev-bg);
  color: var(--color-icon-dev-fg);
}
.grid-tool-body { flex: 1 1 auto; min-width: 0; }
.grid-tool-name { font-size: 14.5px; font-weight: 700; color: var(--color-text-primary); }
.grid-tool-desc {
  font-size: 12.5px;
  color: var(--color-text-muted);
  margin-top: 3px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.grid-tool-arrow { color: var(--color-text-muted); font-size: 15px; }
.grid-tool-card:hover .grid-tool-arrow { color: var(--color-orange-text); }

/* 复制成功浮层提示 */
.copy-toast {
  position: fixed;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%) translateY(10px);
  background: var(--color-text-primary);
  color: #fff;
  padding: 10px 20px;
  border-radius: var(--radius-full);
  font-size: 13px;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition-fast), transform var(--transition-fast);
  z-index: 999;
}
.copy-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* 空状态（收藏/最近为空时） */
.empty-state {
  text-align: center;
  padding: 60px 20px;
  color: var(--color-text-muted);
}
.empty-state-title { font-size: 15px; font-weight: 600; color: var(--color-text-secondary); margin-top: 12px; }
.empty-state-sub { font-size: 13px; margin-top: 6px; }

/* ---- 哈希计算结果行 ---- */
.hash-result-list { display: flex; flex-direction: column; gap: 4px; }
.hash-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 8px;
  border-bottom: 1px solid var(--color-border-lighter);
}
.hash-row:last-child { border-bottom: none; }
.hash-name {
  flex: 0 0 80px;
  font-size: 13px;
  font-weight: 700;
  color: var(--color-text-secondary);
}
.hash-val {
  flex: 1 1 auto;
  min-width: 0;
  font-family: "SF Mono", Menlo, Consolas, monospace;
  font-size: 13px;
  color: var(--color-text-primary);
  word-break: break-all;
  user-select: all;
}

/* ---- DNS 结果表 ---- */
.dns-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.dns-table th, .dns-table td {
  text-align: left;
  padding: 10px 12px;
  border-bottom: 1px solid var(--color-border-lighter);
}
.dns-table th {
  font-weight: 700;
  color: var(--color-text-secondary);
  background: var(--color-bg-page);
  white-space: nowrap;
}
.dns-table td { color: var(--color-text-primary); }
.dns-table td:last-child { font-family: "SF Mono", Menlo, monospace; word-break: break-all; }
.dns-table tbody tr:hover { background: var(--color-bg-page); }

/* ---- 网站体检（webcheck）卡片网格 ---- */
.wc-group-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--color-text-muted);
  margin: 22px 2px 10px;
  letter-spacing: 0.02em;
}
.wc-group-title:first-child { margin-top: 4px; }
.wc-grid-row {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 14px;
  margin-bottom: 4px;
}
.wc-card {
  background: var(--color-bg-white);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: 16px 18px;
  min-width: 0;
}
.wc-card-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}
.wc-card-title { font-size: 13.5px; font-weight: 700; color: var(--color-text-primary); flex: 1 1 auto; }
.wc-dot {
  flex: 0 0 auto;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--color-border-light);
}
.wc-dot.loading { background: #F0AD4E; animation: wc-pulse 1s ease-in-out infinite; }
.wc-dot.ok { background: #3FA96A; }
.wc-dot.error { background: #C0392B; }
@keyframes wc-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
.wc-retry {
  flex: 0 0 auto;
  border: none;
  background: none;
  color: var(--color-text-muted);
  font-size: 12px;
  cursor: pointer;
  text-decoration: underline;
}
.wc-retry:hover { color: var(--color-orange-text); }
.wc-body { font-size: 13px; color: var(--color-text-primary); }
.wc-body .tool-hint { padding: 2px 0; }
.wc-kv { display: flex; flex-direction: column; gap: 0; max-height: 260px; overflow-y: auto; }
.wc-kv-row {
  display: flex;
  gap: 10px;
  padding: 6px 0;
  border-bottom: 1px solid var(--color-border-lighter);
  align-items: baseline;
}
.wc-kv-row:last-child { border-bottom: none; }
.wc-kv-key {
  flex: 0 0 38%;
  font-weight: 600;
  color: var(--color-text-secondary);
  word-break: break-word;
}
.wc-kv-val {
  flex: 1 1 auto;
  min-width: 0;
  font-family: "SF Mono", Menlo, Consolas, monospace;
  font-size: 12.5px;
  color: var(--color-text-primary);
  word-break: break-all;
  white-space: pre-wrap;
}
.wc-raw-toggle summary {
  cursor: pointer;
  font-size: 12px;
  color: var(--color-text-muted);
  margin-top: 8px;
}
.wc-raw-toggle pre {
  margin-top: 8px;
  max-height: 220px;
  overflow: auto;
  background: var(--color-bg-page);
  border-radius: var(--radius-md);
  padding: 10px 12px;
  font-size: 12px;
  line-height: 1.5;
}

/* ---- 顶部搜索下拉结果 ---- */
.search-results {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  background: var(--color-bg-white);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card-hover);
  padding: 6px;
  display: none;
  z-index: 200;
  max-height: 420px;
  overflow-y: auto;
}
.search-results.show { display: block; }
.search-result-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  text-decoration: none;
  color: var(--color-text-primary);
}
.search-result-item:hover, .search-result-item.active {
  background: var(--color-orange-pill-bg);
}
.search-result-name { font-size: 14px; font-weight: 600; }
.search-result-cat { font-size: 12px; color: var(--color-text-muted); white-space: nowrap; }

/* ---- 正则匹配结果 ---- */
.re-match {
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  margin-bottom: 10px;
  background: var(--color-bg-page);
}
.re-match-head { font-size: 13px; font-weight: 700; color: var(--color-text-secondary); margin-bottom: 6px; }
.re-match-val {
  display: block;
  font-family: "SF Mono", Menlo, monospace;
  font-size: 13px;
  color: var(--color-orange-text);
  word-break: break-all;
  background: var(--color-orange-pill-bg);
  padding: 6px 10px;
  border-radius: var(--radius-sm);
}
.re-group { font-size: 12.5px; color: var(--color-text-secondary); margin-top: 6px; }
.re-group code { font-family: "SF Mono", Menlo, monospace; color: var(--color-text-primary); word-break: break-all; }

/* ---- Cron 执行时间列表 ---- */
.cron-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 4px;
  border-bottom: 1px solid var(--color-border-lighter);
}
.cron-row:last-child { border-bottom: none; }
.cron-idx {
  flex: 0 0 24px;
  height: 24px;
  border-radius: var(--radius-full);
  background: var(--color-orange-pill-bg);
  color: var(--color-orange-text);
  font-size: 12px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cron-time {
  flex: 1 1 auto;
  font-family: "SF Mono", Menlo, monospace;
  font-size: 13.5px;
  color: var(--color-text-primary);
}

/* ---- 密码生成器 ---- */
.pw-display {
  display: flex;
  align-items: center;
  gap: 10px;
}
.pw-display code {
  flex: 1 1 auto;
  min-width: 0;
  font-family: "SF Mono", Menlo, monospace;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--color-text-primary);
  background: var(--color-bg-page);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  word-break: break-all;
}
.pw-strength {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 14px;
}
.pw-strength-bar {
  flex: 1 1 auto;
  height: 6px;
  background: var(--color-border-lighter);
  border-radius: var(--radius-full);
  overflow: hidden;
}
.pw-strength-bar span {
  display: block;
  height: 100%;
  width: 0;
  border-radius: var(--radius-full);
  transition: width var(--transition-fast), background var(--transition-fast);
}

/* ---- 科学计算器（calc/calculator） ---- */
.calc-shell { max-width: 480px; margin: 0 auto; }
.calc-display {
  background: var(--color-bg-page);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  margin-bottom: 14px;
}
.calc-expr {
  width: 100%;
  border: none;
  background: transparent;
  font-family: "SF Mono", Menlo, monospace;
  font-size: 18px;
  color: var(--color-text-primary);
  text-align: right;
  outline: none;
}
.calc-expr::placeholder { color: var(--color-text-placeholder); }
.calc-result {
  margin-top: 8px;
  text-align: right;
  font-family: "SF Mono", Menlo, monospace;
  font-size: 26px;
  font-weight: 700;
  color: var(--color-orange-text);
  word-break: break-all;
}
.calc-result.err { color: var(--color-text-muted); }

.calc-keys {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
}
.calc-key {
  appearance: none;
  border: 1px solid var(--color-border-light);
  background: var(--color-bg-white);
  color: var(--color-text-primary);
  border-radius: var(--radius-md);
  padding: 14px 0;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--transition-fast), border-color var(--transition-fast);
  user-select: none;
}
.calc-key:hover { background: var(--color-bg-page); }
.calc-key:active { background: var(--color-orange-pill-bg); }
.calc-key.fn { font-size: 14px; color: var(--color-text-secondary); }
.calc-key.op { color: var(--color-orange-text); }
.calc-key.act { color: var(--color-text-secondary); }
.calc-key.eq {
  grid-column: span 5;
  background: var(--color-orange-primary);
  border-color: var(--color-orange-primary);
  color: var(--color-bg-white);
  font-size: 18px;
}
.calc-key.eq:hover { background: var(--color-orange-hover); }

.calc-history { display: flex; flex-direction: column; }
.calc-hist-row {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 8px 4px;
  border-bottom: 1px solid var(--color-border-lighter);
  cursor: pointer;
  transition: background var(--transition-fast);
}
.calc-hist-row:hover { background: var(--color-bg-page); }
.calc-hist-expr {
  flex: 1 1 auto;
  min-width: 0;
  font-family: "SF Mono", Menlo, monospace;
  font-size: 13.5px;
  color: var(--color-text-secondary);
  word-break: break-all;
}
.calc-hist-eq {
  flex: 0 0 auto;
  font-family: "SF Mono", Menlo, monospace;
  font-size: 14px;
  font-weight: 700;
  color: var(--color-orange-text);
}

/* 文本对比工具（text-diff）：行级 diff 视图，等宽字体，新增绿底/删除红底 */
.td-diff-view {
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-md, 8px);
  overflow-x: auto;
  font-family: "SF Mono", Menlo, Consolas, monospace;
  font-size: 13px;
  line-height: 1.7;
  background: var(--color-bg-page);
}
.td-line { display: flex; white-space: pre; min-width: max-content; }
.td-sign {
  flex: 0 0 auto;
  width: 22px;
  text-align: center;
  color: var(--color-text-muted);
  user-select: none;
  border-right: 1px solid var(--color-border-lighter);
}
.td-text { flex: 1 1 auto; padding: 0 10px; color: var(--color-text-primary); }
.td-add { background: var(--color-icon-dev-bg); }        /* 新增：浅绿底 */
.td-add .td-sign { color: var(--color-icon-dev-fg); font-weight: 600; }
.td-del { background: var(--color-icon-encrypt-bg); }    /* 删除：浅橙红底 */
.td-del .td-sign { color: #C0392B; font-weight: 600; }

/* ===== 字数统计（word-count）：暖橙统计卡片 ===== */
.stat-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 12px;
  margin-top: 16px;
}
.stat-tile {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 16px 18px;
  border-radius: var(--radius-md);
  background: var(--color-orange-card-bg);
  border: 1px solid var(--color-orange-card-border);
}
.stat-tile .stat-num {
  font-size: 30px;
  font-weight: 700;
  line-height: 1.1;
  color: var(--color-orange-text);
  font-variant-numeric: tabular-nums;
}
.stat-tile .stat-label {
  font-size: 13px;
  color: var(--color-text-secondary);
}

/* ===== 表格处理 table-edit：可编辑数据表 ===== */
.data-table {
  border-collapse: collapse;
  width: 100%;
  font-size: 13px;
  color: var(--color-text-primary);
  background: var(--color-bg-white);
}
.data-table th,
.data-table td {
  border: 1px solid var(--color-border-light);
  padding: 7px 10px;
  text-align: left;
  vertical-align: top;
  min-width: 60px;
}
.data-table thead th {
  background: var(--color-orange-pill-bg);
  color: var(--color-orange-text);
  font-weight: 600;
  position: sticky;
  top: 0;
}
.data-table tbody tr:nth-child(even) {
  background: var(--color-bg-page);            /* 斑马纹 */
}
.data-table tbody tr:hover {
  background: var(--color-orange-card-bg);     /* hover 高亮 */
}
.data-table th:focus,
.data-table td:focus {
  outline: 2px solid var(--color-orange-primary);
  outline-offset: -2px;
}

/* 颜色工具（color）：大预览块 + 各格式一行带复制 + 调色板色块，暖橙主题 */
.clr-preview {
  width: 180px;
  height: 180px;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border-light);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.35), 0 2px 10px rgba(31,27,24,0.06);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease;
}
.clr-preview input[type="color"] {
  width: 56px;
  height: 56px;
  padding: 0;
  border: 2px solid rgba(255,255,255,0.85);
  border-radius: var(--radius-full);
  background: transparent;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(31,27,24,0.18);
}
.clr-preview.clr-dark input[type="color"] { border-color: rgba(0,0,0,0.35); }
.clr-preview input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
.clr-preview input[type="color"]::-webkit-color-swatch { border: none; border-radius: var(--radius-full); }

.clr-fields { display: flex; flex-direction: column; gap: 10px; }
.clr-field { display: flex; align-items: center; gap: 10px; }
.clr-tag {
  flex: 0 0 auto;
  width: 44px;
  font-size: 12px;
  font-weight: 700;
  color: var(--color-orange-text);
  letter-spacing: 0.5px;
}
.clr-mono {
  font-family: "SF Mono", Menlo, Consolas, monospace;
  font-size: 13px;
}
.clr-field .clr-copy { flex: 0 0 auto; }

/* 调色板色块 */
.clr-swatches { display: flex; flex-wrap: wrap; gap: 10px; }
.clr-swatch {
  position: relative;
  flex: 1 1 90px;
  min-width: 90px;
  height: 76px;
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-sm);
  cursor: pointer;
  padding: 8px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.clr-swatch:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(31,27,24,0.15); }
.clr-swatch-label {
  position: absolute;
  top: 8px;
  left: 8px;
  font-size: 11px;
  font-weight: 600;
  color: var(--color-text-secondary);
}
.clr-swatch-hex {
  font-family: "SF Mono", Menlo, Consolas, monospace;
  font-size: 12px;
  font-weight: 600;
  color: var(--color-text-primary);
}
.clr-swatch.clr-dark .clr-swatch-label,
.clr-swatch.clr-dark .clr-swatch-hex { color: rgba(255,255,255,0.92); }

/* ===== 图片处理工具（media/image, img- 前缀） ===== */
.qr-tabs { display: flex; gap: 6px; margin-bottom: 18px; border-bottom: 1px solid var(--color-border-light); }
.qr-tab {
  appearance: none; background: none; border: none; cursor: pointer;
  padding: 8px 16px; font-size: 14px; font-weight: 600;
  color: var(--color-text-secondary);
  border-bottom: 2px solid transparent; margin-bottom: -1px;
  transition: color .15s, border-color .15s;
}
.qr-tab:hover { color: var(--color-text-primary); }
.qr-tab.active { color: var(--color-orange-primary); border-bottom-color: var(--color-orange-primary); }
.qr-tabpane { display: none; }
.qr-tabpane.active { display: block; }

.drop-zone {
  border: 2px dashed var(--color-border-light);
  border-radius: var(--radius-md);
  background: var(--color-bg-white);
  padding: 32px 20px;
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
.drop-zone:hover { border-color: var(--color-orange-card-border); }
.drop-zone.dragover {
  border-color: var(--color-orange-primary);
  background: var(--color-orange-card-bg);
}
.drop-zone-empty { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.drop-zone-title { font-weight: 600; color: var(--color-text-primary); }
.drop-zone-preview { display: flex; gap: 18px; align-items: center; }
.drop-zone-preview #img-thumb {
  max-width: 160px; max-height: 120px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border-light);
  object-fit: contain; background: var(--color-bg-page);
}
.img-meta { flex: 1; min-width: 0; }
.img-meta-name {
  font-weight: 600; color: var(--color-text-primary);
  word-break: break-all; margin-bottom: 4px;
}
.img-compare-card {
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-sm);
  padding: 12px 14px; background: var(--color-bg-page);
}
.img-compare-head { font-weight: 600; color: var(--color-text-primary); margin-bottom: 6px; }
.img-compare-meta { color: var(--color-text-secondary); font-size: 13px; }
.img-compare-delta { margin-top: 8px; font-weight: 600; font-size: 13px; }
.img-compare-delta.good { color: var(--color-icon-dev-fg); }
.img-compare-delta.bad { color: var(--color-orange-text); }
.img-out-preview {
  max-width: 100%; max-height: 420px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border-light);
  background: var(--color-bg-page);
}

/* ---- 设备测试（device 工具）：摄像头预览 + 麦克风音量条 ---- */
.dev-media-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: var(--color-bg-page);
  border: 1px solid var(--color-border-light);
  border-radius: 8px;
  overflow: hidden;
}
.dev-video {
  display: none;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #000;
}
.dev-media-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-secondary);
  font-size: 14px;
}
.dev-vu {
  width: 100%;
  height: 24px;
  background: var(--color-bg-page);
  border: 1px solid var(--color-border-light);
  border-radius: 12px;
  overflow: hidden;
}
.dev-vu-bar {
  width: 0%;
  height: 100%;
  background: var(--color-orange-primary);
  border-radius: 12px;
  transition: width 0.06s linear;
}

/* ---- PDF 工具（pdf-tool.js 通用页） ---- */
.pdf-file-list { margin: 12px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; }
.pdf-file-item {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px; border: 1px solid var(--color-border-light);
  border-radius: var(--radius-sm); background: var(--color-bg-white);
}
.pdf-file-name { flex: 1; min-width: 0; font-size: 13.5px; color: var(--color-text-primary); word-break: break-all; }
.pdf-file-size { flex: 0 0 auto; font-size: 12px; color: var(--color-text-muted); }
.pdf-file-del {
  flex: 0 0 auto; border: none; background: transparent; color: var(--color-text-muted);
  font-size: 14px; line-height: 1; padding: 2px 6px; border-radius: 6px; transition: all var(--transition-fast);
}
.pdf-file-del:hover { background: #F0E7DC; color: #C0392B; }

.pdf-fields {
  margin-top: 16px; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px 18px;
}
.pdf-field { display: flex; flex-direction: column; gap: 6px; }
.pdf-field-label { font-size: 13px; font-weight: 600; color: var(--color-text-secondary); }
.pdf-field-hint { font-size: 11.5px; color: var(--color-text-muted); }
.pdf-field-check {
  display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--color-text-secondary);
  cursor: pointer; align-self: end; padding-bottom: 8px;
}
.pdf-field-check input { width: 15px; height: 15px; accent-color: var(--color-orange-primary); }
.pdf-color { width: 46px; height: 36px; padding: 2px; border: 1px solid var(--color-border-light); border-radius: var(--radius-sm); background: var(--color-bg-white); cursor: pointer; }

/* ---- 图片转 PDF：缩略图预览网格 ---- */
.img2pdf-grid {
  margin-top: 14px; display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 14px;
}
.img2pdf-grid:empty { margin-top: 0; }
.img2pdf-cell {
  position: relative; margin: 0; border: 1px solid var(--color-border-light);
  border-radius: var(--radius-sm); background: var(--color-bg-white); overflow: hidden;
}
.img2pdf-thumb {
  display: flex; align-items: center; justify-content: center;
  height: 120px; background: #F6F1EA;
}
.img2pdf-thumb img { max-width: 100%; max-height: 120px; object-fit: contain; display: block; }
.img2pdf-cap {
  display: flex; align-items: center; gap: 6px; padding: 7px 9px;
  border-top: 1px solid var(--color-border-light);
}
.img2pdf-idx {
  flex: 0 0 auto; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px;
  background: var(--color-orange-primary); color: #fff; font-size: 11px; line-height: 18px; text-align: center;
}
.img2pdf-name { flex: 1; min-width: 0; font-size: 12px; color: var(--color-text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.img2pdf-size { flex: 0 0 auto; font-size: 11px; color: var(--color-text-muted); }
.img2pdf-del {
  position: absolute; top: 6px; right: 6px; z-index: 1;
  width: 22px; height: 22px; border: none; border-radius: 50%;
  background: rgba(0,0,0,.55); color: #fff; font-size: 15px; line-height: 22px; cursor: pointer;
  transition: background var(--transition-fast);
}
.img2pdf-del:hover { background: #C0392B; }

/* ---- 图片转 PDF：生成结果链接区 ---- */
.img2pdf-result { margin-top: 16px; }
.img2pdf-done {
  border: 1px solid var(--color-orange-card-border); border-radius: var(--radius-sm);
  background: #FBF6EF; padding: 14px 16px;
}
.img2pdf-done-head {
  display: flex; align-items: center; gap: 8px; font-weight: 600;
  color: var(--color-orange-text); margin-bottom: 12px;
}
.img2pdf-link-row { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 10px; }
.img2pdf-link-row .btn-tool { text-decoration: none; }
.img2pdf-link-copy { display: flex; gap: 8px; align-items: center; }
.img2pdf-link-copy .tool-input { flex: 1; min-width: 0; font-size: 12.5px; }
.img2pdf-notice { margin: 12px 0 0; font-size: 12.5px; line-height: 1.7; color: var(--color-text-muted); }
.img2pdf-notice strong { color: var(--color-text-secondary); }

/* ---- 端口快捷 chip ---- */
.port-chip {
  display: inline-block;
  padding: 3px 10px;
  margin: 2px 4px 2px 0;
  border-radius: var(--radius-full);
  background: var(--color-bg-page);
  border: 1px solid var(--color-border-light);
  font-size: 12px;
  color: var(--color-text-secondary);
  cursor: pointer;
  transition: all var(--transition-fast);
}
.port-chip:hover { border-color: var(--color-orange-card-border); color: var(--color-orange-text); }
.port-chip.active {
  background: var(--color-orange-hover);
  border-color: var(--color-orange-hover);
  color: #fff;
}

/* ---- 二维码画布容器（qrcode） ---- */
.qr-canvas-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: var(--color-bg-page);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-md);
  min-height: 200px;
}
.qr-canvas-wrap canvas {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-sm);
}

/* ---- 二维码彩色预设色板 ---- */
.qr-preset {
  width: 26px;
  height: 26px;
  border-radius: 6px;
  border: 2px solid var(--color-border-light);
  cursor: pointer;
  padding: 0;
  transition: transform .12s ease, border-color .12s ease;
}
.qr-preset:hover { transform: scale(1.12); }
.qr-preset.active { border-color: var(--color-orange-primary); box-shadow: 0 0 0 2px var(--color-orange-pill-bg); }

/* ---- 工具卡图标按大类着色（让 /all 与分类页更有层次，呼应 DESIGN_SPEC 分类配色） ---- */
.grid-tool-card[data-cat="dev"]      .grid-tool-icon { background: var(--color-icon-dev-bg);     color: var(--color-icon-dev-fg); }
.grid-tool-card[data-cat="text"]     .grid-tool-icon { background: var(--color-icon-text-bg);    color: var(--color-icon-text-fg); }
.grid-tool-card[data-cat="security"] .grid-tool-icon { background: var(--color-icon-encrypt-bg); color: var(--color-icon-encrypt-fg); }
.grid-tool-card[data-cat="network"]  .grid-tool-icon { background: var(--color-icon-network-bg); color: var(--color-icon-network-fg); }
.grid-tool-card[data-cat="calc"]     .grid-tool-icon { background: var(--color-orange-pill-bg);  color: var(--color-orange-text); }
.grid-tool-card[data-cat="convert"]  .grid-tool-icon { background: var(--color-icon-image-bg);   color: var(--color-icon-image-fg); }
.grid-tool-card[data-cat="media"]    .grid-tool-icon { background: var(--color-icon-image-bg);   color: var(--color-icon-image-fg); }
.grid-tool-card[data-cat="other"]    .grid-tool-icon { background: var(--color-icon-ai-bg);      color: var(--color-icon-ai-fg); }

/* ---- 右栏动态列表补充样式（真实数据填充） ---- */
.rail-empty {
  padding: 14px 4px;
  font-size: 12.5px;
  color: var(--color-text-muted);
  text-align: center;
}
a.rail-item { text-decoration: none; color: inherit; }
a.rail-item:hover { background: var(--color-orange-pill-bg); }
.rail-item-icon-text {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 800;
  color: var(--color-orange-text);
  background: var(--color-orange-pill-bg);
}

/* ===== 八股占卜 · /other/bagua ===== */
.bagua-essay {
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-lg, 10px);
  padding: 20px 22px;
  background: var(--color-bg-page);
  line-height: 1.9;
}
.bagua-p {
  margin: 0 0 12px;
  text-indent: 2em;
  font-size: 15px;
  color: var(--color-text-primary);
  letter-spacing: .2px;
}
.bagua-p:last-child {
  margin-bottom: 0;
  color: var(--color-text-muted);
  font-size: 14px;
}

/* ===== 图片批量优化工具 (/media/image) ===== */
.img-batch-drop { padding: 20px; cursor: default; }
.img-batch-drop .drop-zone-empty { padding: 28px 12px; cursor: pointer; }

.img-workspace-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-bottom: 12px; flex-wrap: wrap;
}
.img-workspace-actions { display: flex; gap: 8px; }

.img-list { display: flex; flex-direction: column; gap: 10px; }
.img-item {
  display: flex; align-items: center; gap: 14px;
  padding: 10px 12px;
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-md);
  background: var(--color-bg-white);
  position: relative;
  transition: border-color .15s, box-shadow .15s;
}
.img-item.done { border-color: var(--color-orange-card-border); }
.img-item.error { opacity: .7; }

.img-item-thumb {
  width: 56px; height: 56px; flex: 0 0 56px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--color-bg-page);
  border: 1px solid var(--color-border-light);
  display: flex; align-items: center; justify-content: center;
}
.img-item-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.img-item-thumb[data-compare] { cursor: zoom-in; }
.img-item-thumb[data-compare]:hover { border-color: var(--color-orange-primary); }

.img-item-body { flex: 1; min-width: 0; }
.img-item-name {
  font-weight: 600; color: var(--color-text-primary);
  font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.img-item-dims { color: var(--color-text-muted); font-size: 12px; margin-top: 3px; }

.img-item-right { flex: 0 0 auto; }
.img-item-result { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; justify-content: flex-end; }
.img-item-sizes { font-size: 13px; color: var(--color-text-secondary); white-space: nowrap; }
.img-item-sizes .img-old { color: var(--color-text-muted); text-decoration: line-through; }
.img-item-sizes .img-arrow { margin: 0 4px; color: var(--color-text-muted); }
.img-item-sizes .img-new { color: var(--color-text-primary); font-weight: 600; }

.img-badge {
  display: inline-block; font-size: 12px; font-weight: 600;
  padding: 3px 9px; border-radius: var(--radius-full);
  background: var(--color-bg-page); color: var(--color-text-secondary);
  white-space: nowrap;
}
.img-badge.good { background: var(--color-icon-dev-bg); color: var(--color-icon-dev-fg); }
.img-badge.bad { background: var(--color-icon-encrypt-bg); color: var(--color-orange-text); }
.img-badge.preview {
  background: var(--color-icon-media-bg, #f0e9fb);
  color: var(--color-icon-media-fg, #8A5CD6);
}

.img-item-remove {
  position: absolute; top: 6px; right: 8px;
  border: none; background: transparent; cursor: pointer;
  font-size: 18px; line-height: 1; color: var(--color-text-muted);
  padding: 2px 6px; border-radius: var(--radius-sm);
}
.img-item-remove:hover { color: var(--color-orange-text); background: var(--color-bg-page); }

/* 汇总条 */
.img-summary {
  display: flex; gap: 10px; flex-wrap: wrap; margin-top: 18px;
  padding: 14px 16px;
  border: 1px solid var(--color-orange-card-border);
  border-radius: var(--radius-md);
  background: var(--color-orange-card-bg);
}
.img-sum-cell { flex: 1; min-width: 110px; display: flex; flex-direction: column; gap: 4px; }
.img-sum-label { font-size: 12px; color: var(--color-text-secondary); }
.img-sum-value { font-size: 18px; font-weight: 700; color: var(--color-text-primary); }
.img-sum-value.good { color: var(--color-icon-dev-fg); }
.img-sum-value.bad { color: var(--color-orange-text); }

/* 对比弹层 */
.img-compare-overlay {
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(20, 15, 10, 0.55);
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
}
.img-compare-modal {
  background: var(--color-bg-white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card-hover);
  max-width: min(900px, 92vw); width: 100%;
  max-height: 90vh; display: flex; flex-direction: column; overflow: hidden;
}
.img-compare-modal-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px; border-bottom: 1px solid var(--color-border-light);
  font-weight: 600; color: var(--color-text-primary); gap: 12px;
}
.img-compare-modal-head span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.img-compare-close {
  border: none; background: transparent; cursor: pointer;
  font-size: 22px; line-height: 1; color: var(--color-text-muted); padding: 0 4px;
}
.img-compare-close:hover { color: var(--color-text-primary); }

.img-compare-stage {
  position: relative; overflow: hidden; user-select: none;
  background:
    repeating-conic-gradient(#f0ece8 0% 25%, #fbf8f5 0% 50%) 50% / 20px 20px;
  flex: 1; min-height: 200px; max-height: 70vh;
  display: flex; align-items: center; justify-content: center;
  touch-action: none; cursor: ew-resize;
}
/* frame 收缩到图片实际渲染尺寸，作为绝对定位上下文，保证 before/after 像素对齐 */
.img-cmp-frame { position: relative; display: inline-block; line-height: 0; }
.img-cmp-sizer { display: block; max-width: 100%; max-height: 70vh; }
.img-cmp-after {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%;
}
.img-cmp-before-wrap {
  position: absolute; top: 0; left: 0; height: 100%; width: 50%;
  overflow: hidden; border-right: 2px solid #fff;
}
.img-cmp-before-wrap .img-cmp-before {
  position: absolute; top: 0; left: 0; height: 100%; width: auto;
  max-width: none;
}
.img-cmp-handle {
  position: absolute; top: 0; bottom: 0; left: 50%;
  width: 2px; background: #fff; transform: translateX(-1px);
  pointer-events: none;
}
.img-cmp-handle span {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 30px; height: 30px; border-radius: 50%;
  background: #fff; box-shadow: var(--shadow-card-hover);
}
.img-cmp-tag {
  position: absolute; bottom: 10px; font-size: 12px; font-weight: 600;
  padding: 3px 10px; border-radius: var(--radius-full);
  background: rgba(20,15,10,0.6); color: #fff; pointer-events: none;
}
.img-cmp-tag.left { left: 10px; }
.img-cmp-tag.right { right: 10px; }
.img-compare-hint {
  text-align: center; font-size: 13px; color: var(--color-text-secondary);
  padding: 10px 16px; border-top: 1px solid var(--color-border-light);
}

/* ===== 万年历（/calc/calendar） ===== */
.cal-grid-wrap { overflow-x: auto; }
.cal-table { width: 100%; border-collapse: separate; border-spacing: 4px; table-layout: fixed; min-width: 560px; }
.cal-table th {
  padding: 8px 0; font-size: 13px; font-weight: 700; color: var(--color-text-secondary);
  text-align: center;
}
.cal-table th.cal-weekend { color: var(--color-orange-text); }
.cal-cell {
  height: 62px; vertical-align: top; text-align: center; cursor: pointer;
  border: 1px solid var(--color-border-light); border-radius: var(--radius-sm);
  background: #fff; padding: 6px 2px 4px; transition: background .12s, border-color .12s;
}
.cal-cell:hover { background: var(--color-orange-card-bg); border-color: var(--color-orange-card-border); }
.cal-day-num { font-size: 17px; font-weight: 700; color: var(--color-text-primary); line-height: 1.1; }
.cal-day-sub { font-size: 11px; color: var(--color-text-muted); margin-top: 3px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.cal-day-sub.cal-red { color: var(--color-orange-text); font-weight: 600; }
.cal-out { background: var(--color-bg-page); opacity: .5; }
.cal-out .cal-day-num { color: var(--color-text-placeholder); }
.cal-weekend-cell .cal-day-num { color: var(--color-orange-text); }
.cal-today { border-color: var(--color-orange-primary); box-shadow: inset 0 0 0 1px var(--color-orange-primary); }
.cal-today .cal-day-num { color: var(--color-orange-primary); }
.cal-selected { background: var(--color-orange-pill-bg); border-color: var(--color-orange-primary); }

/* ===== 放假日历（/calc/holiday） ===== */
.hol-item {
  border: 1px solid var(--color-border-light); border-radius: var(--radius-md);
  padding: 14px 16px; margin-bottom: 12px; background: #fff;
}
.hol-item:last-child { margin-bottom: 0; }
.hol-item-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.hol-name { font-size: 17px; font-weight: 800; color: var(--color-text-primary); }
.hol-badge {
  font-size: 12px; font-weight: 600; padding: 2px 9px; border-radius: var(--radius-full);
  background: var(--color-orange-pill-bg); color: var(--color-orange-text);
}
.hol-badge-now { background: var(--color-orange-primary); color: #fff; }
.hol-badge-past { background: var(--color-border-light); color: var(--color-text-muted); }
.hol-line { font-size: 13.5px; color: var(--color-text-secondary); margin-top: 4px; line-height: 1.6; }
.hol-line-label {
  display: inline-block; min-width: 68px; font-weight: 700; color: var(--color-text-primary);
  margin-right: 6px;
}
.hol-work { color: var(--color-text-secondary); }
.hol-work .hol-line-label { color: var(--color-orange-text); }
.hol-nowork { color: var(--color-text-muted); font-size: 12.5px; }