/* ============================================================
   emerald 会员中心框架覆盖样式
   作用：在 common.css 之后加载，仅做覆盖不重写组件
   配色：主色 #0F7B6C / 中性白侧栏 / 浅绿底 #EAF4F1
   风格：企业级中后台，紧凑布局，4px 圆角，可折叠侧栏
   ============================================================ */

/* ---------- 防止 Vue 模板编译前闪烁（FOUC） ---------- */
/* .template 挂载点在 Vue 编译前加 v-cloak，编译后自动移除 */
html[theme='emerald'] .template[v-cloak] {
  display: none !important;
}

/* ---------- 全局字体与基础 ---------- */
html[theme='emerald'] body {
  font-family: "PingFang SC", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* ---------- 左侧导航（中性白背景 + 主题色高亮） ---------- */
html[theme='emerald'] .el-aside {
  background: #ffffff;
  border-right: 1px solid #E3E9E7;
  box-shadow: none;
}

/* 菜单整体上移：缩小 logo 与导航的距离 */
html[theme='emerald'] .menu-top {
  margin-top: 30px;
}

/* 菜单项圆角统一为 4px */
html[theme='emerald'] .menu-top .el-menu-item,
html[theme='emerald'] .menu-top .el-submenu__title {
  border-radius: 4px;
  /* 导航项之间留出间距 */
  margin-bottom: 4px;
}

/* 菜单图标与文字间距收紧 */
html[theme='emerald'] .aside-menu-text {
  margin-left: 10px;
}

/* 菜单选中态：主题色实底 + 白字 */
html[theme='emerald'] .menu-top .el-menu-item.is-active,
html[theme='emerald'] .menu-top .el-submenu .el-menu-item.is-active {
  background-color: var(--color-menu-active-bg) !important;
  color: var(--color-menu-text-active) !important;
}

html[theme='emerald'] .menu-top .el-menu-item.is-active i,
html[theme='emerald'] .menu-top .el-submenu .el-menu-item.is-active i {
  color: var(--color-menu-text-active) !important;
}

/* 二级菜单缩进收紧 */
html[theme='emerald'] .menu-top .el-submenu .el-menu-item {
  padding-left: 48px !important;
}

/* hover 态：浅绿底 + 墨绿文字（覆盖 common.css 中白色文字变量） */
html[theme='emerald'] .menu-top .el-menu-item:hover,
html[theme='emerald'] .menu-top .el-submenu__title:hover,
html[theme='emerald'] .menu-top .el-submenu .el-menu-item:hover {
  color: #0F7B6C !important;
}

html[theme='emerald'] .menu-top .el-menu-item:hover i,
html[theme='emerald'] .menu-top .el-submenu__title:hover i,
html[theme='emerald'] .menu-top .el-submenu .el-menu-item:hover i {
  color: #0F7B6C !important;
}

/* 分隔线颜色适配白底 */
html[theme='emerald'] .line {
  border-color: #E3E9E7;
  margin: 20px auto;
}

/* ---------- 顶部栏（加高 + 折叠按钮） ---------- */
html[theme='emerald'] .el-header {
  height: 56px !important;
  background: #ffffff;
  backdrop-filter: none;
  border-bottom: 1px solid #E3E9E7;
  box-shadow: 0 1px 3px rgba(11, 59, 51, 0.06);
}

/* 折叠按钮：桌面端可见，移动端隐藏（移动端用抽屉） */
html[theme='emerald'] .collapse-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  margin-right: 8px;
  border-radius: 4px;
  color: #46534F;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}

html[theme='emerald'] .collapse-btn:hover {
  background: #F2F7F5;
  color: #0F7B6C;
}

/* 顶栏内容垂直居中 */
html[theme='emerald'] .header-left,
html[theme='emerald'] .header-right {
  height: 100%;
}

/* 隐藏顶栏竖线分隔（用户信息区改为独立胶囊块） */
html[theme='emerald'] .header-right .cloum-line-item {
  display: none;
}

/* 取消语言选择按钮（国旗图标） */
html[theme='emerald'] .header-right .el-dropdown-country {
  display: none;
}

/* 购物车图标缩小（顶栏第一个图标项） */
html[theme='emerald'] .header-right > .header-right-item:first-child img {
  width: 18px;
  height: 18px;
}

/* 购物车图标垂直居中（修复缩小后偏移） */
html[theme='emerald'] .header-right .car-item,
html[theme='emerald'] .header-right .car-item .right-item {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  line-height: 0;
}

html[theme='emerald'] .header-right .car-item .el-badge {
  display: flex;
  align-items: center;
}

/* ---------- 顶栏用户信息胶囊 ---------- */
html[theme='emerald'] .user-info-pill {
  display: flex;
  align-items: center;
  height: 40px;
  padding: 0 10px 0 4px;
  border-radius: 8px;
  /* 默认透明，仅 hover 时显示浅色底 */
  background: transparent;
  cursor: pointer;
  transition: background 0.2s ease;
}

html[theme='emerald'] .user-info-pill:hover {
  background: #F5F7F8;
}

/* 圆形头像：深墨绿底白字 */
html[theme='emerald'] .user-info-pill .user-avatar {
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  border-radius: 50%;
  background: #0B3B33;
  color: #ffffff;
  font-size: 14px;
  font-weight: 600;
  line-height: 32px;
  text-align: center;
  overflow: hidden;
}

/* 用户名：完整展示手机号/邮箱 */
html[theme='emerald'] .user-info-pill .user-name {
  margin-left: 8px;
  max-width: 220px;
  font-size: 14px;
  color: #17211F;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* 下拉箭头 */
html[theme='emerald'] .user-info-pill .user-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 6px;
  color: #8A9692;
  transition: transform 0.2s ease;
}

html[theme='emerald'] .user-info-pill .user-arrow svg {
  width: 16px;
  height: 16px;
}

html[theme='emerald'] .user-info-pill:hover .user-arrow {
  color: #0F7B6C;
}

/* ---------- 用户下拉菜单（popper-class=user-dropmenu） ---------- */
html[theme='emerald'] .el-popover.user-dropmenu {
  min-width: 168px;
  padding: 6px;
  border: 1px solid #E3E9E7;
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(11, 59, 51, 0.12);
}

html[theme='emerald'] .user-dropmenu .user-menu {
  display: flex;
  flex-direction: column;
}

html[theme='emerald'] .user-dropmenu .user-menu-item {
  display: flex;
  align-items: center;
  height: 38px;
  padding: 0 10px;
  border-radius: 6px;
  font-size: 14px;
  color: #46534F;
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease;
}

html[theme='emerald'] .user-dropmenu .user-menu-item:hover {
  background: #F2F7F5;
  color: #0F7B6C;
}

html[theme='emerald'] .user-dropmenu .user-menu-item .user-menu-icon {
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  margin-right: 10px;
  color: #8A9692;
}

html[theme='emerald'] .user-dropmenu .user-menu-item:hover .user-menu-icon {
  color: #0F7B6C;
}

/* 退出登录：危险色 */
html[theme='emerald'] .user-dropmenu .user-menu-item.is-danger {
  color: #F13939;
}

html[theme='emerald'] .user-dropmenu .user-menu-item.is-danger .user-menu-icon {
  color: #F13939;
}

html[theme='emerald'] .user-dropmenu .user-menu-item.is-danger:hover {
  background: #FEF0F0;
  color: #F13939;
}

html[theme='emerald'] .user-dropmenu .user-menu-item.is-danger:hover .user-menu-icon {
  color: #F13939;
}

/* ---------- 主内容区 ---------- */
/* 灰底统一：覆盖插件（remf_finance .f-order）及框架 element-comment.css
   对 el-main / 内层容器设的白底，确保整站内容区为统一浅灰底 */
html[theme='emerald'] .el-container:nth-child(2),
html[theme='emerald'] .el-main,
html[theme='emerald'] .f-order .el-main,
html[theme='emerald'] .el-container:nth-child(2) > .el-main {
  background: #F6F8F7;
}

/* 内容卡片：白底 + 4px 圆角 + 轻阴影 */
html[theme='emerald'] .main-card {
  background: #ffffff;
  border-radius: 4px;
  box-shadow: 0 1px 3px rgba(11, 59, 51, 0.06);
  padding: 0.2rem;
  box-sizing: border-box;
}

/* ---------- 分页 ---------- */
html[theme='emerald'] .el-pager .number {
  border-radius: 4px;
  border-color: #E3E9E7;
}

html[theme='emerald'] .el-pager .active {
  background: #EAF4F1;
  border-color: #0F7B6C;
  color: #0F7B6C;
}

/* ---------- 表格（紧凑中后台风） ---------- */
html[theme='emerald'] .el-table th.el-table__cell {
  background: #F2F7F5;
  color: #46534F;
  font-weight: 500;
}

html[theme='emerald'] .el-table td.el-table__cell,
html[theme='emerald'] .el-table th.el-table__cell {
  border-bottom-color: #EDF1EF;
}

html[theme='emerald'] .el-table--border,
html[theme='emerald'] .el-table--group {
  border-color: #E3E9E7;
}

/* ---------- 按钮（默认按钮 = Element small 尺寸，整体下移一级） ---------- */
html[theme='emerald'] .el-button {
  border-radius: 3px;
  padding: 9px 15px;
  font-size: 12px;
}

html[theme='emerald'] .el-button--small {
  padding: 7px 15px;
  font-size: 12px;
}

html[theme='emerald'] .el-button--mini {
  padding: 5px 12px;
  font-size: 12px;
}

html[theme='emerald'] .el-button--primary {
  background-color: #0F7B6C;
  border-color: #0F7B6C;
}

html[theme='emerald'] .el-button--primary:hover,
html[theme='emerald'] .el-button--primary:focus {
  background-color: #0D6B5E;
  border-color: #0D6B5E;
}

html[theme='emerald'] .el-button--primary:active {
  background-color: #0A5F53;
  border-color: #0A5F53;
}

/* ---------- 输入框 / 下拉 ---------- */
html[theme='emerald'] .el-input__inner,
html[theme='emerald'] .el-textarea__inner {
  border-radius: 4px;
  border-color: #DCE4E1;
}

html[theme='emerald'] .el-input__inner:focus,
html[theme='emerald'] .el-textarea__inner:focus {
  border-color: #0F7B6C;
}

html[theme='emerald'] .el-select .el-input.is-focus .el-input__inner {
  border-color: #0F7B6C;
}

/* ---------- 弹窗 ---------- */
html[theme='emerald'] .el-dialog {
  border-radius: 6px;
  box-shadow: 0 12px 32px rgba(11, 59, 51, 0.16);
}

html[theme='emerald'] .el-dialog__header {
  border-bottom: 1px solid #EDF1EF;
}

html[theme='emerald'] .el-dialog__title {
  font-size: 15px;
  font-weight: 600;
  color: #17211F;
}

/* ---------- 浅蓝底色块统一替换为浅绿 ---------- */
html[theme='emerald'] .top-msg-box .msg-list .msg-item:hover {
  background: #EAF4F1;
}

html[theme='emerald'] .pay-dialog .dia-title {
  background: #EAF4F1;
}

html[theme='emerald'] .branch-repass-dialog .dialog-main .pass-input .pass-btn {
  background: #EAF4F1;
}

/* ---------- 加载动画颜色兜底 ---------- */
html[theme='emerald'] #mainLoading .ddr {
  background-color: #0F7B6C;
}

/* ============================================================
   侧边栏折叠态（html.aside-collapsed）
   ============================================================ */
/* 侧栏收窄到 64px */
html.aside-collapsed[theme='emerald'] .el-aside {
  width: 64px !important;
  min-width: 64px !important;
}

/* 折叠态：隐藏文字，仅显示图标且居中 */
html.aside-collapsed[theme='emerald'] .aside-menu-text {
  display: none;
}

html.aside-collapsed[theme='emerald'] .menu-top .el-menu-item,
html.aside-collapsed[theme='emerald'] .menu-top .el-submenu__title {
  padding-left: 0 !important;
  padding-right: 0 !important;
  justify-content: center;
  text-align: center;
}

html.aside-collapsed[theme='emerald'] .menu-top .el-menu-item i,
html.aside-collapsed[theme='emerald'] .menu-top .el-submenu__title i {
  margin-right: 0;
}

/* 折叠态隐藏二级子菜单（避免布局错乱） */
html.aside-collapsed[theme='emerald'] .menu-top .el-submenu .el-menu {
  display: none;
}

/* 折叠态隐藏分隔线 */
html.aside-collapsed[theme='emerald'] .line {
  display: none;
}

/* 折叠态 logo 居中缩小 */
html.aside-collapsed[theme='emerald'] .ali-logo {
  max-width: 40px;
  margin: 16px auto 0;
}

/* 顶栏宽度自适应侧栏折叠：默认 190px 侧栏，折叠 64px */
html[theme='emerald'] .el-header {
  width: calc(100% - 190px);
  left: 190px;
}

html.aside-collapsed[theme='emerald'] .el-header {
  width: calc(100% - 64px);
  left: 64px;
}

/* ---------- 移动端：折叠按钮隐藏，沿用抽屉菜单 ---------- */
@media screen and (max-width: 750px) {
  html[theme='emerald'] .collapse-btn {
    display: none;
  }
  html[theme='emerald'] .el-header {
    left: 0 !important;
    width: 100% !important;
  }
  /* 抽屉菜单文字适配白底 */
  html[theme='emerald'] .drawer-menu-item {
    color: #46534F;
  }
  html[theme='emerald'] .drawer-menu-list-top > .drawer-menu-active {
    border-left-color: #0F7B6C;
  }
  html[theme='emerald'] .drawer-menu .menu-top .el-menu-item.is-active,
  html[theme='emerald'] .drawer-menu .menu-top .el-submenu .el-menu-item.is-active {
    color: #0F7B6C !important;
  }
}

/* ============================================================
   通用组件皮肤（框架级）
   说明：颜色换肤已由 theme/emerald/element-ui.css 完成（主色/浅底/hover 全家桶），
   这里只统一圆角、间距、表头底色与交互态，所有页面自动生效，避免逐页重复书写。
   ============================================================ */

/* ---------- 表格 ---------- */
html[theme='emerald'] .el-table {
  color: #46534F;
  font-size: 13px;
}

/* 表头：浅绿底 + 35px 行高 + 中等字重 */
html[theme='emerald'] .el-table th.el-table__cell {
  height: 35px;
  padding: 0;
  background: #F2F7F5;
  color: #46534F;
  font-size: 13px;
  font-weight: 500;
}

/* 单元格：紧凑行高 */
html[theme='emerald'] .el-table td.el-table__cell {
  padding: 11px 0;
}

html[theme='emerald'] .el-table .cell {
  padding-left: 12px;
  padding-right: 12px;
  line-height: 1.6;
}

/* 行悬停：浅绿 */
html[theme='emerald'] .el-table--enable-row-hover .el-table__body tr:hover>td.el-table__cell {
  background: #F2F7F5;
}

/* 斑马纹：极浅绿 */
html[theme='emerald'] .el-table--striped .el-table__body tr.el-table__row--striped td.el-table__cell {
  background: #FAFCFB;
}

/* 表格外框与固定列分隔线 */
html[theme='emerald'] .el-table::before,
html[theme='emerald'] .el-table::after,
html[theme='emerald'] .el-table__fixed::before,
html[theme='emerald'] .el-table__fixed-right::before {
  background-color: #EDF1EF;
}

/* 空数据文案 */
html[theme='emerald'] .el-table__empty-text {
  color: #8A9692;
  font-size: 13px;
}

/* 表格内文字按钮 */
html[theme='emerald'] .el-table .el-button--text {
  color: #0F7B6C;
}

html[theme='emerald'] .el-table .el-button--text:hover {
  color: #0D6B5E;
}

/* ---------- 分页 ---------- */
html[theme='emerald'] .el-pagination {
  padding: 14px 0 2px;
  color: #46534F;
  font-size: 13px;
}

html[theme='emerald'] .el-pagination button,
html[theme='emerald'] .el-pager li {
  min-width: 28px;
  height: 28px;
  line-height: 28px;
  border-radius: 4px;
  font-size: 13px;
}

html[theme='emerald'] .el-pager li:hover {
  color: #0F7B6C;
}

/* ---------- 表单 ---------- */
html[theme='emerald'] .el-form-item {
  margin-bottom: 18px;
}

html[theme='emerald'] .el-form-item__label {
  color: #46534F;
  font-size: 13px;
}

html[theme='emerald'] .el-form-item__error {
  font-size: 12px;
}

/* ---------- 标签页 ---------- */
html[theme='emerald'] .el-tabs__item {
  height: 40px;
  line-height: 40px;
  font-size: 13px;
  color: #46534F;
}

html[theme='emerald'] .el-tabs__item.is-active {
  color: #0F7B6C;
  font-weight: 500;
}

html[theme='emerald'] .el-tabs__active-bar {
  background-color: #0F7B6C;
}

html[theme='emerald'] .el-tabs__nav-wrap::after {
  background-color: #EDF1EF;
}

/* ---------- 标签 ---------- */
html[theme='emerald'] .el-tag {
  border-radius: 4px;
  font-size: 12px;
}

/* ---------- 卡片 ---------- */
html[theme='emerald'] .el-card {
  border-color: #E3E9E7;
  border-radius: 4px;
  box-shadow: 0 1px 3px rgba(11, 59, 51, 0.06);
}

html[theme='emerald'] .el-card__header {
  padding: 14px 18px;
  border-bottom-color: #EDF1EF;
  font-weight: 500;
}

/* ---------- 空状态 ---------- */
html[theme='emerald'] .el-empty__description p {
  color: #8A9692;
  font-size: 13px;
}

/* ---------- 步骤条 ---------- */
html[theme='emerald'] .el-step__title.is-process,
html[theme='emerald'] .el-step__title.is-finish {
  color: #0F7B6C;
}

html[theme='emerald'] .el-step__head.is-process,
html[theme='emerald'] .el-step__head.is-finish {
  color: #0F7B6C;
  border-color: #0F7B6C;
}

/* ---------- 全局提示 ---------- */
html[theme='emerald'] .el-message {
  border-radius: 4px;
}

/* ============================================================
   全局加载骨架屏（替代默认 5 柱弹跳动画）
   利用每页 #mainLoading 内已有的 5 个 .ddr 元素，
   纯 CSS 改造为内容区流光骨架条，零 HTML 改动。
   骨架仅覆盖内容区（侧边栏右侧 + 顶部栏下方），不遮挡导航。
   ============================================================ */
html[theme='emerald'] #mainLoading {
  left: 190px;
  top: 56px;
  width: calc(100% - 190px);
  height: calc(100% - 56px);
  background: #F6F8F7;
  padding: 24px;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
}

/* 侧边栏折叠态：侧栏收窄到 64px */
html.aside-collapsed[theme='emerald'] #mainLoading {
  left: 64px;
  width: calc(100% - 64px);
}

/* 移动端：侧边栏为抽屉，骨架全屏覆盖 */
@media screen and (max-width: 750px) {
  html[theme='emerald'] #mainLoading {
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
  }
}

/* 产品详情页的 pro-des 变体：透明背景，右侧区域用灰底覆盖 */
html[theme='emerald'] #mainLoading.pro-des {
  background: transparent;
}

html[theme='emerald'] #mainLoading.pro-des::before {
  background: #F6F8F7;
}

html[theme='emerald'] .pro-des-loading #mainLoading {
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
}

/* 5 根弹跳柱 → 5 行流光骨架条 */
html[theme='emerald'] #mainLoading .ddr {
  width: 100%;
  height: 18px;
  float: none;
  margin: 0 0 14px;
  border-radius: 4px;
  background: linear-gradient(90deg, #F2F7F5 25%, #E9F1EE 37%, #F2F7F5 63%);
  background-size: 400% 100%;
  animation: emeraldSkeleton 1.4s ease infinite;
}

html[theme='emerald'] #mainLoading .ddr2 { animation-delay: -0.2s; }
html[theme='emerald'] #mainLoading .ddr3 { animation-delay: -0.4s; }
html[theme='emerald'] #mainLoading .ddr4 { animation-delay: -0.6s; }
html[theme='emerald'] #mainLoading .ddr5 { animation-delay: -0.8s; }

@keyframes emeraldSkeleton {
  0% { background-position: 100% 50%; }
  100% { background-position: 0 50%; }
}

/* ============================================================
   页面标题统一（对齐商品页风格：20px / 600 字重）
   覆盖各页面自行定义的 main-card-title / finance-title / top-title / main-title
   ============================================================ */
html[theme='emerald'] .main-card-title,
html[theme='emerald'] .finance-title,
html[theme='emerald'] .top-title,
html[theme='emerald'] .main-title,
html[theme='emerald'] .title-text {
  font-size: 20px;
  font-weight: 600;
  color: #17211F;
  line-height: 1.4;
}

/* ============================================================
   图形验证码弹窗
   该弹窗 HTML 由 tp_captcha 插件直接返回（内联 <style> + rem 单位 + 硬编码蓝色），
   与主题无关。以下用更高优先级的 html[theme='emerald'] 前缀覆盖，
   内联 style 属性上的遮罩底色/错误文字需 !important
   ============================================================ */
html[theme='emerald'] #captcha-outer {
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(11, 38, 33, 0.45) !important;
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}

html[theme='emerald'] .captcha-content {
  position: relative;
  left: auto;
  top: auto;
  margin: 0;
  transform: none;
  width: 420px;
  max-width: calc(100vw - 32px);
  box-sizing: border-box;
  padding: 24px;
  background: #fff;
  border: 1px solid #EDF1EF;
  border-radius: 10px;
  box-shadow: 0 12px 32px rgba(11, 59, 51, 0.18);
}

html[theme='emerald'] .captcha-title {
  font-size: 16px;
  font-weight: 600;
  line-height: 1.4;
  color: #17211F;
}

html[theme='emerald'] .captcha-main {
  margin-top: 16px !important;
  padding-left: 0 !important;
}

html[theme='emerald'] #captcha-input {
  flex: 1;
  width: auto;
  height: 40px;
  margin-right: 10px;
  padding: 0 12px !important;
  box-sizing: border-box;
  font-size: 14px;
  color: #17211F;
  background: #fff;
  border: 1px solid #DCE4E1;
  border-radius: 4px;
  outline: none;
  transition: border-color .2s;
}

html[theme='emerald'] #captcha-input:focus {
  border-color: #0F7B6C;
}

html[theme='emerald'] #captcha-input::placeholder {
  color: #9AA8A5;
}

html[theme='emerald'] #captcha-img {
  flex: 0 0 auto;
  width: 96px;
  height: 40px;
  border: 1px solid #EDF1EF;
  border-radius: 4px;
  object-fit: contain;
  cursor: pointer;
}

html[theme='emerald'] .captcha-footer {
  justify-content: flex-end;
  margin-top: 20px;
}

html[theme='emerald'] #check-btn,
html[theme='emerald'] #cancel-btn {
  width: 88px;
  height: 36px;
  font-size: 14px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color .2s;
}

html[theme='emerald'] #check-btn {
  background: #0F7B6C;
  color: #fff;
}

html[theme='emerald'] #check-btn:hover {
  background: #0D6B5E;
}

html[theme='emerald'] #check-btn:active {
  background: #0A5F53;
}

html[theme='emerald'] #cancel-btn {
  margin-left: 10px;
  background: #F2F5F4;
  color: #5E6E6A;
}

html[theme='emerald'] #cancel-btn:hover {
  background: #E8EEEC;
}

html[theme='emerald'] #captcha-error-text {
  margin: 0 !important;
  min-height: 18px;
  font-size: 12px !important;
  line-height: 1.5;
  color: #D64545 !important;
}

/* 移动端：卡片贴底，按钮整行 */
@media screen and (max-width: 750px) {
  html[theme='emerald'] .captcha-content {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    max-width: 100vw;
    padding: 20px 16px calc(20px + env(safe-area-inset-bottom));
    border-radius: 12px 12px 0 0;
  }

  html[theme='emerald'] .captcha-footer {
    flex-direction: column;
  }

  html[theme='emerald'] #captcha-input {
    height: 44px;
  }

  html[theme='emerald'] #captcha-img {
    width: 106px;
    height: 44px;
  }

  html[theme='emerald'] #check-btn,
  html[theme='emerald'] #cancel-btn {
    width: 100%;
    height: 44px;
    margin-left: 0;
  }

  html[theme='emerald'] #cancel-btn {
    margin-top: 10px;
  }
}