@charset "UTF-8";
/* ========================================================================
   高新匠会员中心（Web_Service.awah.cn）—— 主题配色 + 真响应式
   参考 AWAH.PortalSite 的 5 套配色方案（CSS 变量 + html.theme-* 覆盖）
   布局：手机单列 / 平板适宽 / 桌面 1280px 居中
   ======================================================================== */

/* ----------------------------------------------------------------
   (A) Service 版设计令牌 + 5 套主题
   ---------------------------------------------------------------- */
:root {
  --sv-brand: #1F4068;            /* 主色（默认深海蓝） */
  --sv-brand-hover: #17334f;
  --sv-accent: #D4AF37;           /* 辅助色（暗金） */
  --sv-heading: #16283f;          /* 标题/深色 */
  --sv-page: #ededed;            /* 页面背景 */
  --sv-card: #ffffff;             /* 卡片背景 */
  --sv-border: #d4d4d8;           /* 边框 */
  --sv-text: #656565;             /* 正文 */
  --sv-muted: #9aa3ad;
  --sv-header-bg: #ffffff;
  --sv-header-text: #16283f;
  --sv-header-link: #656565;
  --sv-header-border: var(--sv-brand);
  --sv-footer-bg: #16283f;
  --sv-footer-text: #96a3b2;
  --sv-footer-heading: #ffffff;
  --sv-btn-bg: var(--sv-brand);
  --sv-btn-text: #ffffff;
  --sv-logo-color: var(--sv-accent);      /* Logo 蒙版颜色（随主题变色） */
  --sv-theme-trigger-bg: var(--sv-brand);
  --sv-theme-trigger-text: #ffffff;

  /* 微信风格设计令牌：现代系统字体栈、统一圆角、填充式输入、纤细分隔线 */
  --sv-font: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  --sv-radius: 12px;        /* 卡片 / 主按钮大圆角 */
  --sv-radius-sm: 8px;      /* 输入框 / 次级控件圆角 */
  --sv-input-bg: #f2f3f5;   /* 微信填充式输入底色 */
  --sv-hairline: rgba(0, 0, 0, 0.06); /* 分组卡片纤细分隔线 */
  --sv-nav-bg: var(--sv-brand);        /* 顶部导航背景 */
}

html.theme-metal {
  --sv-brand: #343A40; --sv-brand-hover: #2b3036; --sv-accent: #E63946;
  --sv-heading: #333333; --sv-page: #F8F9FA; --sv-footer-bg: #23272c; --sv-btn-bg: #343A40;
  --sv-logo-color: #E63946;
}
html.theme-coral {
  --sv-brand: #E87C70; --sv-brand-hover: #df6558; --sv-accent: #F2A89F;
  --sv-heading: #363636; --sv-page: #FDF7F6; --sv-footer-bg: #2a2a2a; --sv-btn-bg: #E87C70;
  --sv-logo-color: #F2A89F;
}
html.theme-violet {
  --sv-brand: #7278D4; --sv-brand-hover: #5b61c9; --sv-accent: #A1A6E8;
  --sv-heading: #2F3044; --sv-page: #F7F7FF; --sv-footer-bg: #262740; --sv-btn-bg: #7278D4;
  --sv-logo-color: #A1A6E8;
}
html.theme-mint {
  --sv-brand: #48A9A6; --sv-brand-hover: #3a918e; --sv-accent: #86CFCB;
  --sv-heading: #2C3E3E; --sv-page: #F6FBFB; --sv-footer-bg: #243333; --sv-btn-bg: #48A9A6;
  --sv-logo-color: #86CFCB;
}
html.theme-skyblue {
  --sv-brand: #4A90E2; --sv-brand-hover: #2f7dd6; --sv-accent: #73B8F2;
  --sv-heading: #2D3748; --sv-page: #F7FAFD; --sv-footer-bg: #263140; --sv-btn-bg: #4A90E2;
  --sv-logo-color: #73B8F2;
}

/* ----------------------------------------------------------------
   顶栏（会员中心新加的全局头部，放主题切换器）
   ---------------------------------------------------------------- */
.sv-header {
  position: relative;
  z-index: 9998;
  display: flex;
  align-items: center;
  min-height: 52px;
  width: 100%;
  box-sizing: border-box;
  padding: 0 16px;
  background-color: var(--sv-nav-bg);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}
.sv-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  box-sizing: border-box;
}
/* 顶栏语言切换下拉框（右对齐，深色顶栏上的白字胶囊；底色与 BANNER 顶栏背景一致） */
.sv-header__lang-wrap {
  display: inline-flex;
  align-items: center;
}
.sv-header__lang {
  padding: 4px 10px;
  font-size: 0.24rem;
  color: #fff;
  background-color: var(--sv-nav-bg);
  border: 1px solid var(--sv-accent);
  border-radius: 20px;
  cursor: pointer;
}
.sv-header__lang option {
  color: #fff;
  background: var(--sv-nav-bg);
}
/* 移动端：头部只放切换器，紧凑一行 */
@media (max-width: 767px) {
  .sv-header {
    height: 0.9rem;
    padding: 0 0.2rem;
  }
}

/* ----------------------------------------------------------------
   主题切换器（复用 PortalSite 的 .awah-theme 结构）
   ---------------------------------------------------------------- */
.awah-theme {
  position: relative;
  display: inline-block;
}
.awah-theme__trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  border: 1px solid var(--sv-accent);
  border-radius: 20px;
  background-color: rgba(255, 255, 255, 0.16);
  cursor: pointer;
}
.awah-theme__chips { display: inline-flex; align-items: center; }
.awah-theme__swatch {
  display: inline-block;
  width: 12px;
  height: 12px;
  margin-right: 2px;
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 50%;
}
.awah-theme__swatch:last-child { margin-right: 0; }
.awah-theme__caret {
  width: 0; height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 5px solid var(--sv-theme-trigger-text);
}
.awah-theme__menu {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 9999;
  margin: 0;
  padding: 6px;
  min-width: 150px;
  list-style: none;
  background: var(--sv-card);
  border: 1px solid var(--sv-border);
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}
.awah-theme__menu.is-open { display: block; }
.awah-theme__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 8px;
  border-radius: 6px;
  cursor: pointer;
  white-space: nowrap;
}
.awah-theme__item:hover { background-color: var(--sv-page); }
.awah-theme__item.is-current { outline: 1px solid var(--sv-brand); }
.awah-theme__item .awah-theme__chips .awah-theme__swatch { width: 16px; height: 16px; }

/* 主题入口：色块 swatch 尺寸在移动端略小（触发框位于最左，菜单一律左对齐向下展开，
   不再右对齐，避免从屏幕左缘向外溢出） */
@media (max-width: 767px) {
  .awah-theme__trigger { padding: 3px 6px; }
  .awah-theme__menu { min-width: 130px; }
}

/* ----------------------------------------------------------------
   品牌 Logo：白色 SVG 作蒙版，用 --sv-logo-color 填充，随主题变色
   （参考 PortalSite 的 .awah-topnav__logo 单文件方案）
   ---------------------------------------------------------------- */
/* 圆形白底相框：包裹 Logo，Logo 缩放至正好位于圆形框内部 */
.head-img,
.head-logo-wrap {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  padding: 0.18rem;
  box-sizing: border-box;
  border-radius: 50%;
  background: #fff;
  border: 1px solid var(--sv-border);
  margin-bottom: 0.18rem;
}
.head-logo {
  display: block;
  width: 100%;
  height: 100%;
  background-color: var(--sv-logo-color, var(--sv-accent));
  -webkit-mask-image: url('../Images/awah_logo.svg');
  mask-image: url('../Images/awah_logo.svg');
  -webkit-mask-mode: alpha;
  mask-mode: alpha;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}
/* 不支持蒙版的浏览器回退：直接显示 SVG */
@supports not ((-webkit-mask-image: url('')) or (mask-image: url(''))) {
  .head-logo {
    background-color: transparent;
    background: url('../Images/awah_logo.svg') center/contain no-repeat;
  }
}

/* ----------------------------------------------------------------
   微信式品牌头部：覆盖 style.css 的左对齐绝对定位。
   左侧为圆形 Logo 相框，右侧垂直堆叠三行文字（左对齐、整体垂直居中），
   贴近微信个人/服务卡片头部布局，更适合手机竖屏展示
   ---------------------------------------------------------------- */
.head {
  display: flex !important;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 0.3rem;
  padding: 0.35rem 0.3rem;
  text-align: left;
}
.head-img,
.head-logo-wrap {
  margin-bottom: 0;
}
.head .head-img,
.head .head-logo-wrap {
  /* 关键：圆形 Logo 相框也改为常规 flex 项（style.css 里是 position:absolute），
     否则脱离 flex 流、文字会贴到最左与圆框重叠 */
  position: relative !important;
  top: auto !important;
  left: auto !important;
  flex: 0 0 auto;
}
.head .head-dsb {
  position: relative !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;
  flex: 1 1 auto;
  min-width: 0;
  align-self: center;
  text-align: left;
}
.head-dsb .dsb-name {
  margin: 0;
  font-size: 0.32rem;
  line-height: 1.2;
  color: var(--sv-heading);
}
.head-dsb .dsb-id1,
.head-dsb .dsb-id2 {
  margin: 0.05rem 0 0;
  font-size: 0.24rem;
  line-height: 1.3;
  color: var(--sv-text);
}
@media (min-width: 768px) {
  .head {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0.5rem 0.4rem;
  }
  .head-img,
  .head-logo-wrap { width: 1.6rem; height: 1.6rem; padding: 0.18rem; }
}

/* ----------------------------------------------------------------
   配色方案的明显化应用：让主色/辅助色渗透进关键元素，
   切换主题时界面配色清晰可见
   ---------------------------------------------------------------- */
/* 品牌头部名称随主题换色 */
.head .dsb-name { color: var(--sv-heading) !important; }
.head .dsb-id1 { color: var(--sv-muted) !important; }
.head .dsb-id2 { color: var(--sv-brand) !important; }

/* 卡片标题用主色 + 辅助色下划线（比灰底更醒目） */
.card-title {
  color: var(--sv-brand) !important;
  border-bottom: 2px solid var(--sv-accent) !important;
}

/* 序号/强调元素跟随主题 */
.card-row-2 .card-col-2-1,
.card-col-3-1 {
  color: var(--sv-brand) !important;
}

/* 底部横向导航（桌面）文字跟随页脚主题色（白色文字仅在 ≥768px 深色顶栏内生效，
   移动端底部浅色导航保持 base 深色文字，避免白字不可见。见下方 @media 内的覆盖规则） */

/* ----------------------------------------------------------------
   (B) 真响应式断点
   说明：REM 适配 JS 在 ≥750px 时根字号封顶 100px（=1rem），故本媒体查询
   内可用 px 绝对单位（等价于固定 rem）。在 ≥768px 追加真实布局调整：
   内容限宽居中 + 底部悬浮导航转为顶部横向导航，桌面/平板获得桌面级体验。
   ---------------------------------------------------------------- */
/* 平板 & 桌面：内容限宽居中，底部导航转顶部横向导航 */
@media (min-width: 768px) {
  /* 预留固定顶栏空间：顶部菜单栏 72px + 间距 6px + 下方语言/配色条带 52px + 额外留白 */
  body { padding-top: 144px !important; }

  /* 语言/配色条带固定在菜单栏正下方（top:78px）。
     z-index 置于菜单栏(footer,9999)之上(10000)，即使两带发生重叠，
     配色/语言也始终完整显示在菜单栏上层，绝不背遮住 */
  .sv-header {
    position: fixed !important;
    top: 78px !important;
    left: 0;
    right: 0;
    z-index: 10000;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  }

  .container.body-content,
  #_content {
    width: 100% !important;
    max-width: 1280px !important;
    margin: 0 auto !important;
    padding: 24px 42px 48px !important;
    box-sizing: border-box !important;
  }

  /* 移动端固定底部导航 → 顶部横向导航（背景跟随配色方案，深浅随主题变化）
     注意：必须用 min-height 同时覆盖 base 的 min-height:1.1rem，否则顶栏被撑到 110px；
     并把 base 的 overflow:hidden 放开，确保下方文字不被裁切
     2026-10-04 调整：桌面端图片和文字放大，与内容区按钮视觉匹配 */
  footer {
    position: fixed !important;
    top: 0 !important;
    bottom: auto !important;
    left: 0;
    right: 0;
    width: 100% !important;
    height: 72px !important;
    min-height: 72px !important;
    padding: 0 32px !important;
    background: var(--sv-brand) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.16);
    justify-content: center;
    align-items: center;
    overflow: visible !important;
    flex-wrap: nowrap;
  }
  footer .menu {
    width: auto;
    height: auto !important;
    margin: 0 24px !important;
  }
  footer .menu a {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: auto !important;
    gap: 4px;
    color: var(--sv-footer-heading) !important;
  }
  footer .menu img { width: 32px !important; height: 32px !important; flex-shrink: 0 !important; filter: none; opacity: 1; }
  footer .menu p {
    color: var(--sv-footer-heading) !important;
    font-size: 16px !important;
    line-height: 1.2 !important;
    height: auto !important;
    margin: 0 !important;
    overflow: visible !important;
    white-space: nowrap;
    text-overflow: clip;
  }
  /* 桌面顶栏激活项：白色强调态（品牌底上不可用品牌色文字） */
  footer .menu.active { background-color: rgba(255, 255, 255, 0.16); }
  footer .menu.active p { color: #ffffff !important; font-weight: 700; }
}

/* 平板：收紧为 920px */
@media (min-width: 768px) and (max-width: 1199px) {
  .container.body-content,
  #_content {
    max-width: 920px !important;
  }
}

/* ========================================================================
   按钮中文过长自动换行不溢出
   根因：.button / .button-left / .button-medium 为「固定高度 + line-height=高度」
   的单行假设，中文换行后文字高度超过盒子而被 .white-card 的 overflow:hidden 裁切。
   修复：放开固定高度，允许文字换行、按钮随内容增高，且保持单行时高度/居中不变。
   ======================================================================== */
.button,
.button-left,
.button-medium {
  height: auto !important;
  line-height: 1.35 !important;
  white-space: normal !important;
  word-break: break-word !important;
  overflow-wrap: anywhere !important;
  box-sizing: border-box !important;
}
/* 单行时保持原高度（视觉不变） */
.button,
.button-left {
  min-height: 0.72rem !important;
}
.button-medium {
  min-height: 0.6rem !important;
}

/* ========================================================================
   系统配置页（SystemConfig）
   原页面把卡片、输入框底色写死为纯白 / 浅灰，切换配色方案后不跟随。
   这里统一改用主题令牌：卡片底色由品牌色轻着色（暗色方案接入后自动适配），
   输入框沿用填充式主题底色，聚焦描边取品牌色。
   ======================================================================== */
.system-config-card {
  background: color-mix(in srgb, var(--sv-brand) 4%, var(--sv-card));
}

.cfg-input[type="text"],
.cfg-input[type="number"] {
  width: 100%;
  padding: 7px 10px;
  font-size: 14px;
  font-family: var(--sv-font);
  color: var(--sv-text);
  background-color: var(--sv-input-bg);
  border: 1px solid var(--sv-border);
  border-radius: var(--sv-radius-sm, 8px);
  box-sizing: border-box;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}

.cfg-input[type="text"]:focus,
.cfg-input[type="number"]:focus {
  border-color: var(--sv-brand);
  background-color: var(--sv-card);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--sv-brand) 18%, transparent);
  outline: none;
}

/* ========================================================================
   首页常用功能（管理员按钮）——方形图标格子
   参考 AWAH.Manage 工作台「常用功能」：图标方块置于上方；
   所有格子固定等宽等高（宽度由 .sv-quick-tile 的 2.2rem 统一控制，
   按各语言较长单词（如俄语 Настройки 约 1.97rem、中文 6 字约 2.08rem）留足宽度，
   保证整词换行、不拆词、不截断）；
   颜色改用主题令牌，尺寸用 rem（移动端按设计稿 750 折算，桌面端 1rem=100px），
   与站点现有按钮的缩放口径保持一致。
   ======================================================================== */
.sv-quick-grid {
  display: flex;
  flex-wrap: wrap;
  /* 方形按钮整行居中（少量按钮时不再贴左） */
  justify-content: center;
  align-items: stretch;
  column-gap: 0.12rem;
  row-gap: 0.24rem;
  padding: 0.08rem 0.04rem;
}

.sv-quick-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 0.12rem;
  /* 每行固定 3 个：宽度取「行宽减去 2 个列间距」的 1/3，
     不写死具体 rem，窄屏（320px）到宽屏都能保证一行 3 个 */
  flex: 0 0 calc((100% - 0.24rem) / 3 - 0.01rem);
  width: calc((100% - 0.24rem) / 3 - 0.01rem);
  min-width: 0;
  max-width: 100%;
  min-height: 1.8rem;
  box-sizing: border-box;
  padding: 0.06rem 0.02rem;
  text-align: center;
  /* 配色：格子本身为白色卡片底、深色文字；只有图标块使用按钮底色（--sv-btn-bg）+ 白色图标，
     全部走主题令牌，切换配色方案时图标底色同步变化 */
  background-color: var(--sv-card);
  border: 0;
  border-radius: var(--sv-radius-sm, 8px);
  color: var(--sv-heading);
  cursor: pointer;
  user-select: none;
  transition: background-color 0.2s ease, transform 0.2s ease;
}

.sv-quick-tile:hover,
.sv-quick-tile:focus-visible {
  /* 悬停仅在白色底上叠一层很淡的按钮底色，保持与长条形按钮的视觉关联 */
  background-color: color-mix(in srgb, var(--sv-btn-bg) 6%, var(--sv-card));
  outline: none;
}

.sv-quick-tile:active {
  transform: scale(0.98);
}

.sv-quick-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 0.96rem;
  height: 0.96rem;
  border-radius: 0.2rem;
  /* 图标块 = 长条形按钮的底色，图标 = 按钮文字色（白色） */
  background-color: var(--sv-btn-bg);
  color: var(--sv-btn-text);
  transition: background-color 0.15s ease, transform 0.15s ease;
}

.sv-quick-tile:hover .sv-quick-icon,
.sv-quick-tile:focus-visible .sv-quick-icon {
  background-color: var(--sv-brand-hover);
  transform: scale(1.04);
}

.sv-quick-svg {
  display: block;
  width: 0.52rem;
  height: 0.52rem;
  /* 图标固定用按钮文字色（白），保证在按钮底色的方块上清晰不灰 */
  color: var(--sv-btn-text);
}

.sv-quick-title {
  font-size: 0.24rem;
  font-weight: 600;
  line-height: 1.25;
  color: var(--sv-heading);
  /* 整词换行、不拆词、不截断；单个单词宽于格子时由页面脚本缩小字号适配 */
  white-space: normal;
  word-break: normal;
  overflow-wrap: normal;
  hyphens: none;
  max-width: 100%;
  /* 预留两行高度，保证常见情况下所有格子等高 */
  min-height: 0.6rem;
}

/* 仅提示、不可点击的格子（如「新品待审核」）：保持同款配色，仅去掉悬停/按压反馈 */
.sv-quick-tile--static {
  cursor: default;
}

.sv-quick-tile--static:hover {
  background-color: var(--sv-card);
}

.sv-quick-tile--static:hover .sv-quick-icon {
  background-color: var(--sv-btn-bg);
  transform: none;
}

.sv-quick-tile--static:active {
  transform: none;
}

/* ========================================================================
   统一二维码扫码按钮（序列号输入框右侧）
   按钮由 Views/Shared/_ScanSerialButton.cshtml 输出，点击行为由
   Scripts/ProductSerialScan.js 统一绑定（data-scan-target / data-scan-submit），
   尺寸取 .inform-text 的高度（0.4rem），保证与输入框同高对齐。
   ======================================================================== */
.serial-input-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* 输入框在行内自适应剩余宽度（覆盖 .inform-text 的 width:100%） */
.serial-input-row .inform-text {
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
}

.btn-scan-qr {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 0.4rem;
  height: 0.4rem;
  padding: 0;
  border: 1px solid var(--sv-brand);
  border-radius: var(--sv-radius-sm, 8px);
  background-color: var(--sv-brand);
  color: var(--sv-btn-text, #ffffff);
  cursor: pointer;
  transition: background-color 0.2s ease, opacity 0.2s ease;
}

.btn-scan-qr:hover {
  background-color: var(--sv-brand-hover);
}

.btn-scan-qr:active {
  opacity: 0.85;
}

.btn-scan-qr svg {
  display: block;
  width: 0.24rem;
  height: 0.24rem;
  fill: currentColor;
}