/* ============================================================
   KEYU MINIMAL · Apple-style design system for IDCsmart clientarea
   柯羽云 · 极简 —— clientarea / 登录注册 / 用户中心
   Loaded AFTER default theme CSS so every override wins.
   ============================================================ */

/* ---------- 主题令牌（高优先级覆盖，无论 theme/index.js 何时加载） ---------- */
:root:root {
  /* Apple 蓝 */
  --color-primary: #0071E3;
  --color-success: #34C759;
  --color-warning: #FF9F0A;
  --color-danger: #FF3B30;
  --color-info: #8E8E93;
  --color-text-tips: #6E6E73;
  /* 侧边栏：Apple 白 */
  --color-menu-bg: #FFFFFF;
  --color-menu-active-bg: rgba(0, 113, 227, 0.12);
  --color-menu-hover-bg: #F5F5F7;
  --color-menu-text: #1D1D1F;
  --color-menu-text-active: #0071E3;
  --color-price-text: #F0142F;
  --color-discount-num: #FF9F0A;
  --color-cash-num: #F0142F;
  --ky-font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
}

/* ---------- 全局 ---------- */
html, body {
  font-family: var(--ky-font);
  -webkit-font-smoothing: antialiased;
  background: #F5F5F7;
  color: #1D1D1F;
}
body { letter-spacing: 0; }
:focus-visible {
  outline: 3px solid var(--color-primary);
  outline-offset: 2px;
  border-radius: 4px;
}
a { color: var(--color-primary); }
::selection { background: rgba(0, 113, 227, .15); }

/* ---------- 左侧导航（Apple 白侧栏） ---------- */
.el-aside {
  background: #FFFFFF !important;
  border-right: 1px solid #E8E8ED;
  width: 200px !important;
}
.el-aside .ali-logo {
  max-width: 130px;
  max-height: 40px;
  margin: 20px 0 8px 18px;
  object-fit: contain;
}
.menu-top { margin-top: 12px !important; padding: 0 10px; }
.menu-top .el-menu-item,
.menu-top .el-submenu__title {
  height: 40px !important;
  line-height: 40px !important;
  border-radius: 10px !important;
  margin-bottom: 2px;
  font-size: 14px;
  color: var(--color-menu-text) !important;
}
.menu-top .el-menu-item i,
.menu-top .el-submenu__title i { color: var(--color-menu-text) !important; font-size: 16px; }
.menu-top .el-menu-item:hover,
.menu-top .el-submenu__title:hover {
  background-color: #F5F5F7 !important;
  color: var(--color-menu-text) !important;
}
.menu-top .el-menu-item.is-active {
  background-color: rgba(0, 113, 227, .12) !important;
  color: var(--color-primary) !important;
  font-weight: 600;
}
.menu-top .el-menu-item.is-active i { color: var(--color-primary) !important; }
.menu-top .el-submenu .el-menu-item { padding-left: 52px !important; border-radius: 8px !important; }
.aside-menu-text { margin-left: 12px; }
.el-aside .line { border-color: #E8E8ED; }

/* ---------- 顶部栏 ---------- */
.el-header {
  background: rgba(255, 255, 255, .85) !important;
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid #E8E8ED;
}
.el-header .el-dropdown,
.el-header .header-user,
.el-header .top-menu { color: #1D1D1F !important; }

/* ---------- 工作区 ---------- */
.el-main {
  background: #F5F5F7;
  padding: 24px;
}
.el-main > * { max-width: 1200px; }

/* ---------- Element UI 按钮（Apple 胶囊） ---------- */
.el-button {
  border-radius: 980px !important;
  font-weight: 500;
  transition: all .2s ease;
}
.el-button--primary {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
}
.el-button--primary:hover,
.el-button--primary:focus {
  background-color: #0077ED;
  border-color: #0077ED;
}
.el-button--default { border-color: #D2D2D7; color: #1D1D1F; }
.el-button--default:hover, .el-button--default:focus { border-color: var(--color-primary); color: var(--color-primary); }
.el-button--text { color: var(--color-primary); }

/* ---------- Element UI 输入框 ---------- */
.el-input__inner, .el-textarea__inner {
  border-radius: 10px !important;
  border-color: #D2D2D7 !important;
  color: #1D1D1F !important;
  transition: border-color .15s, box-shadow .15s;
}
.el-input__inner:focus, .el-textarea__inner:focus {
  border-color: var(--color-primary) !important;
  box-shadow: 0 0 0 4px rgba(0, 113, 227, .12) !important;
}
.el-input-group__prepend { border-radius: 10px 0 0 10px !important; }

/* ---------- Element UI 弹窗 ---------- */
.el-dialog { border-radius: 18px !important; overflow: hidden; }
.el-dialog__header { padding: 20px 24px 0; }
.el-dialog__title { font-size: 17px; font-weight: 700; }
.el-message-box { border-radius: 18px !important; }

/* ---------- Element UI 表格 ---------- */
.el-table { border-radius: 12px; overflow: hidden; }
.el-table th.el-table__cell { background: #F5F5F7 !important; color: #6E6E73 !important; font-weight: 600; }
.el-table td.el-table__cell { color: #1D1D1F; }
.el-table--border, .el-table--group { border-color: #E8E8ED; }
.el-table--border::after, .el-table--group::after { background: #E8E8ED; }

/* ---------- Element UI 分页 ---------- */
.el-pagination.is-background .el-pager li:not(.disabled).active {
  background-color: var(--color-primary);
}
.el-pagination.is-background .el-pager li:not(.disabled):hover { color: var(--color-primary); }

/* ---------- Element UI 标签页 ---------- */
.el-tabs__item.is-active { color: var(--color-primary); }
.el-tabs__active-bar { background-color: var(--color-primary); }

/* ---------- Element UI 单选框/复选框 ---------- */
.el-radio__input.is-checked .el-radio__inner { border-color: var(--color-primary); background: var(--color-primary); }
.el-checkbox__input.is-checked .el-checkbox__inner { border-color: var(--color-primary); background: var(--color-primary); }
.el-checkbox__input.is-checked + .el-checkbox__label { color: var(--color-primary); }

/* ---------- 登录 / 注册 / 忘记密码（Apple 居中卡片） ---------- */
#login, #regist, #forget {
  background: #F5F5F7;
}
.login-container, .regist-container, .forget-container {
  background: #F5F5F7;
}
.container-back {
  background: #1D1D1F !important;
  border-radius: 28px !important;
}
.container-back .back-line1,
.container-back .back-line2,
.container-back .back-line3 {
  background: linear-gradient(180deg, rgba(255,255,255,.14) 0%, rgba(255,255,255,0) 100%) !important;
}
.container-before {
  background: #FFFFFF !important;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .12) !important;
  border-radius: 24px !important;
  border: 1px solid rgba(0, 0, 0, .04);
}
.login-text-title, .regist-text-title, .forget-text-title { color: #1D1D1F !important; }
.login-text-regist, .regist-text-regist, .forget-text-regist { color: #6E6E73 !important; }
.login-btn { border-radius: 980px !important; height: 48px !important; font-size: 16px !important; }
.pass-btn { border-radius: 980px !important; }
.code-btn { border-radius: 980px !important; }
.login-email, .login-phone {
  color: #6E6E73 !important;
  padding-bottom: 6px;
}
.login-email.active, .login-phone.active {
  color: var(--color-primary) !important;
  border-bottom: 2px solid var(--color-primary) !important;
  font-weight: 600;
}
.qr-box-img { border-radius: 16px; overflow: hidden; }
.login .qr-code .login-icon, .login .qr-code .icon { fill: var(--color-primary); }

/* ---------- 通用卡片面板 ---------- */
.card, .common-card, .panel, .content-card {
  background: #FFFFFF;
  border-radius: 16px;
  border: 1px solid #E8E8ED;
  padding: 24px;
}
.dialog-title { font-size: 17px; font-weight: 700; color: #1D1D1F; }
.page-title, .h-title, .title { color: #1D1D1F; }

/* ---------- 移动端 ---------- */
@media screen and (max-width: 750px) {
  .el-main { padding: 16px !important; }
  .container-before { border-radius: 20px !important; margin: 0 12px; }
  .login { padding-top: .6rem; padding-left: .28rem; padding-right: .28rem; }
  .login-form { margin-top: .6rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* ---------- 用户中心页面统一卡片化 ---------- */
/* 产品列表 / 安全中心 */
.main-card {
  background: #FFFFFF !important;
  border: 1px solid #E8E8ED !important;
  border-radius: 16px !important;
  padding: 24px !important;
}
.main-card-title {
  font-size: 18px !important;
  font-weight: 700 !important;
  color: #1D1D1F !important;
  letter-spacing: -0.01em !important;
  margin-bottom: 18px !important;
}
.main-card-search {
  background: #F5F5F7 !important;
  border-radius: 12px !important;
  padding: 14px 16px !important;
  margin-bottom: 18px !important;
}
.list-table-border, .order-table {
  border: 0 !important;
  border-radius: 12px !important;
  overflow: hidden !important;
}
.list-table-border thead th, .order-table thead th {
  background: #F5F5F7 !important;
  color: #6E6E73 !important;
  font-weight: 600 !important;
  font-size: 13px !important;
}
.list-table-border tbody tr, .order-table tbody tr { border-bottom: 1px solid #F0F0F2 !important; }
.list-table-border tbody tr:last-child, .order-table tbody tr:last-child { border-bottom: 0 !important; }
.table td, .table th, .el-table td, .el-table th { border-top: 0 !important; }
.status, .status-text { color: #34C759 !important; }
.status.pending, .status-text.pending { color: #FF9F0A !important; }
.status.off, .status-text.off, .status.expired { color: #FF3B30 !important; }
.page { justify-content: flex-end !important; margin-top: 20px !important; }

/* 订单详情 */
.page-content { background: #FFFFFF !important; border: 1px solid #E8E8ED !important; border-radius: 16px !important; padding: 24px !important; }
.order-detail .order-info, .order-item { border: 0 !important; border-bottom: 1px solid #F0F0F2 !important; }
.order-status { font-weight: 600 !important; }
.money-text, .num-text { color: #1D1D1F !important; font-weight: 700 !important; }
.field-name { color: #6E6E73 !important; font-size: 13px !important; }

/* 财务中心 */
.balance-left, .balance-right {
  background: #FFFFFF !important;
  border: 1px solid #E8E8ED !important;
  border-radius: 16px !important;
  padding: 24px !important;
}
.balance-left-title, .balance-title-num { color: #1D1D1F !important; }
.balance-left-num { color: #1D1D1F !important; font-weight: 700 !important; font-size: 24px !important; letter-spacing: -0.02em !important; }
.balance-tag { background: #F5F5F7 !important; border-radius: 980px !important; color: #6E6E73 !important; padding: 4px 12px !important; font-size: 12px !important; }
.balance-tx-btn { border-radius: 980px !important; }

/* 账户与安全 */
.box-main { background: #FFFFFF !important; border: 1px solid #E8E8ED !important; border-radius: 16px !important; padding: 24px !important; }
.box-item { border-bottom: 1px solid #F0F0F2 !important; padding: 16px 0 !important; }
.box-item:last-child { border-bottom: 0 !important; }
.box-item-t { color: #1D1D1F !important; font-weight: 600 !important; }
.box-item-b { color: #6E6E73 !important; font-size: 13px !important; }
.account-title, .basic-title { font-size: 18px !important; font-weight: 700 !important; color: #1D1D1F !important; letter-spacing: -0.01em !important; }
.basic { background: #FFFFFF !important; border: 1px solid #E8E8ED !important; border-radius: 16px !important; padding: 24px !important; }
.attestation-status { border-radius: 980px !important; }

/* 工单 / 公告 / 通用列表 */
.ticket-list, .notice-list, .common-list { background: #FFFFFF !important; border: 1px solid #E8E8ED !important; border-radius: 16px !important; padding: 8px 24px !important; }
.common-list-item, .notice-item, .ticket-item { border-bottom: 1px solid #F0F0F2 !important; padding: 16px 0 !important; }
.common-list-item:last-child, .notice-item:last-child, .ticket-item:last-child { border-bottom: 0 !important; }
.com-search .el-input__inner { border-radius: 980px !important; }

/* 弹窗统一 */
.dialog-title, .del-dialog-title { font-size: 17px !important; font-weight: 700 !important; color: #1D1D1F !important; }
.dialog-main, .del-dialog-main { border-radius: 16px !important; }
.dialog-footer, .del-dialog-footer { border-top: 1px solid #F0F0F2 !important; padding-top: 16px !important; }

/* ---------- 页面加载遮罩（Apple 轻量转圈） ---------- */
#mainLoading {
  background: rgba(255, 255, 255, .72) !important;
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  align-items: center !important;
  justify-content: center !important;
}
#mainLoading .ddr {
  display: none !important;
}
#mainLoading .ddr1 {
  display: block !important;
  width: 40px !important;
  height: 40px !important;
  border-radius: 50% !important;
  border: 3px solid #E8E8ED !important;
  border-top-color: #0071E3 !important;
  animation: ky-spin .8s linear infinite !important;
  background: transparent !important;
  float: none !important;
  margin: 0 !important;
}
@keyframes ky-spin { to { transform: rotate(360deg); } }

/* ---------- 二次元背景（图床随机图 + 半透明白遮罩） ---------- */
body {
  background-color: #F5F5F7 !important;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0.55)),
    url("https://t.alcy.cc/ycy/") !important;
  background-size: cover, cover !important;
  background-position: center, center !important;
  background-repeat: no-repeat, no-repeat !important;
  background-attachment: fixed, fixed !important;
}
.el-main { background: rgba(245, 245, 247, 0.75) !important; }
.el-aside { background: rgba(255, 255, 255, 0.92) !important; }
.el-header { background: rgba(255, 255, 255, 0.85) !important; }
.main-card, .box-main, .basic, .page-content, .balance-left, .balance-right {
  background: rgba(255, 255, 255, 0.94) !important;
}

/* ---------- 毛玻璃卡片 ---------- */
.el-main { background: rgba(245, 245, 247, 0.45) !important; }
.main-card, .box-main, .basic, .page-content, .balance-left, .balance-right,
.ticket-list, .notice-list, .common-list {
  background: rgba(255, 255, 255, 0.66) !important;
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  backdrop-filter: blur(20px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.5) !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.06) !important;
}
.el-aside { background: rgba(255, 255, 255, 0.72) !important; -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); }
.el-header { background: rgba(255, 255, 255, 0.6) !important; -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); }
.el-dialog { background: rgba(255, 255, 255, 0.85) !important; -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px); }

/* 侧边栏 KY 文字 logo */
.ky-ca-logo {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 20px 18px 8px !important;
}
.ky-ca-logo .ky-logo-mark {
  width: 30px; height: 30px;
  border-radius: 9px;
  background: #1D1D1F;
  color: #fff;
  display: grid; place-items: center;
  font: 700 13px/1 "SF Mono", Consolas, monospace;
  flex-shrink: 0;
}
.ky-ca-logo .ky-logo-text {
  font-size: 16px; font-weight: 700; color: #1D1D1F;
  display: flex; flex-direction: column; line-height: 1.2;
}
.ky-ca-logo .ky-logo-en {
  font: 9px/1.2 "SF Mono", Consolas, monospace;
  letter-spacing: .14em;
  color: #86868B;
  margin-top: 2px;
}

/* ============================================================
   KEYU MINIMAL · 登录 / 注册 —— 毛玻璃 + 转场动画
   与首页 keyu-minimal 的 --ky-glass 毛玻璃体系保持一致
   ============================================================ */

/* ---------- 1. 背景同步：容器透明，露出 body 的二次元图床背景 ---------- */
#login, #regist, #forget {
  background: transparent !important;
}
.login-container, .regist-container, .forget-container {
  background: transparent !important;
}

/* ---------- 2. 左侧品牌区：首页同款白色毛玻璃 ---------- */
.container-back {
  background: linear-gradient(135deg, rgba(255,255,255,0.62) 0%, rgba(255,255,255,0.40) 100%) !important;
  -webkit-backdrop-filter: blur(22px) saturate(160%);
  backdrop-filter: blur(22px) saturate(160%);
  border: 1px solid rgba(255,255,255,0.55) !important;
  box-shadow: 0 8px 32px rgba(0,0,0,0.06) !important;
}
.container-back .back-text { color: #1D1D1F !important; }
.container-back .text-welcome { color: #1D1D1F; opacity: .92; }
.container-back .back-line1,
.container-back .back-line2,
.container-back .back-line3 {
  background: linear-gradient(180deg, rgba(0,113,227,0.28) 0%, rgba(0,113,227,0) 100%) !important;
}

/* ---------- 3. 右侧表单区：白色毛玻璃 ---------- */
.container-before {
  background: rgba(255,255,255,0.72) !important;
  -webkit-backdrop-filter: blur(24px) saturate(160%);
  backdrop-filter: blur(24px) saturate(160%);
  border: 1px solid rgba(255,255,255,0.6) !important;
  box-shadow: 0 20px 60px rgba(0,0,0,0.10) !important;
}

/* ---------- 4. 表单输入框玻璃化 ---------- */
.login-form .el-input__inner,
.regist-container .el-input__inner {
  background: rgba(255,255,255,0.65) !important;
  border-color: rgba(0,0,0,0.06) !important;
}
.login-form .el-input-group__prepend,
.regist-container .el-input-group__prepend {
  background: rgba(255,255,255,0.65) !important;
  border-color: rgba(0,0,0,0.06) !important;
}

/* ---------- 5. 登录页入场：卡片从左侧滑入（A 动画） ---------- */
.ky-enter-login .container-back {
  animation: ky-in-left .7s cubic-bezier(.22,.61,.36,1) both;
}
.ky-enter-login .container-before {
  animation: ky-in-left .7s .12s cubic-bezier(.22,.61,.36,1) both;
}
@keyframes ky-in-left {
  from { opacity: 0; transform: translateX(-56px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* ---------- 6. 注册页入场：卡片从右侧滑入 + 轻微缩放（B 动画） ---------- */
.ky-enter-regist .container-back {
  animation: ky-in-right .7s cubic-bezier(.22,.61,.36,1) both;
}
.ky-enter-regist .container-before {
  animation: ky-in-right .7s .12s cubic-bezier(.22,.61,.36,1) both;
}
@keyframes ky-in-right {
  from { opacity: 0; transform: translateX(56px) scale(.97); }
  to   { opacity: 1; transform: translateX(0) scale(1); }
}

/* ---------- 7. 登录 <-> 注册 切换时的飞出动画 ---------- */
.ky-leave .container-before {
  animation: ky-out .32s ease-in both;
}
.ky-leave .container-back {
  animation: ky-out .32s .04s ease-in both;
}
@keyframes ky-out {
  from { opacity: 1; transform: translateX(0) scale(1); }
  to   { opacity: 0; transform: translateX(96px) scale(.95); }
}

/* ---------- 8. 邮箱 / 手机切换：完全不同的两种动效 ---------- */
/* 邮箱：从左上角飘落 + 轻微旋转（像信封落下） */
.ky-field-email {
  animation: ky-email-in .5s cubic-bezier(.22,.61,.36,1) both;
}
@keyframes ky-email-in {
  0%   { opacity: 0; transform: translate(-20px, 14px) rotate(-5deg) scale(.96); }
  60%  { opacity: 1; }
  100% { opacity: 1; transform: translate(0,0) rotate(0) scale(1); }
}
/* 手机：3D 翻转滑入（像手机翻转到正面） */
.ky-field-phone {
  animation: ky-phone-in .5s cubic-bezier(.22,.61,.36,1) both;
}
@keyframes ky-phone-in {
  0%   { opacity: 0; transform: perspective(600px) rotateY(42deg) translateX(28px); }
  100% { opacity: 1; transform: perspective(600px) rotateY(0deg) translateX(0); }
}

/* 顶部 Tab 切换指示线：从左到右生长 */
.login-top .login-email,
.login-top .login-phone {
  position: relative;
  transition: color .25s ease;
}
.login-top .login-email.active::after,
.login-top .login-phone.active::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: var(--color-primary);
  border-radius: 2px;
  animation: ky-tab-line .32s cubic-bezier(.22,.61,.36,1) both;
}
@keyframes ky-tab-line {
  from { transform: scaleX(0); opacity: 0; }
  to   { transform: scaleX(1); opacity: 1; }
}

/* ---------- 9. 登录 / 注册按钮：Apple 式按压反馈 ---------- */
.login-btn {
  transition: transform .2s ease, box-shadow .2s ease !important;
}
.login-btn:hover:not(.is-disabled) {
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(0,113,227,.28);
}
.login-btn:active:not(.is-disabled) {
  transform: translateY(0) scale(.985);
}

/* ---------- 10. 移动端：保持透明露出背景 ---------- */
@media screen and (max-width: 750px) {
  .login-container, .regist-container, .forget-container {
    background: transparent !important;
  }
  .container-before {
    background: rgba(255,255,255,0.78) !important;
  }
}