/* ============================================================
   IDCLCN Clientarea Theme - Design System Override
   主色 #165DFF | 参考火山引擎 Arco Design 体系
   覆盖 Element UI 和默认主题样式
   适用于所有用户中心页面
   ============================================================ */

/* ---- CSS Variables (fallback) ---- */
:root {
    --idclcn-primary: #165DFF;
    --idclcn-primary-hover: #0E42D2;
    --idclcn-primary-active: #0D32A6;
    --idclcn-primary-light: #E8F0FF;
    --idclcn-primary-light-hover: #D1E3FF;
    --idclcn-primary-disabled: #94BFFF;
    --idclcn-success: #00B42A;
    --idclcn-success-light: #E8FFEA;
    --idclcn-warning: #FF7D00;
    --idclcn-warning-light: #FFF7E8;
    --idclcn-danger: #F53F3F;
    --idclcn-danger-light: #FFECE8;
    --idclcn-title: #1D2129;
    --idclcn-text-1: #1D2129;
    --idclcn-text-2: #4E5969;
    --idclcn-text-3: #86909C;
    --idclcn-text-4: #C9CDD4;
    --idclcn-border: #E5E6EB;
    --idclcn-border-light: #F2F3F5;
    --idclcn-fill: #F7F8FA;
    --idclcn-bg: #FFFFFF;
    --idclcn-bg-grey: #F2F3F5;
    --idclcn-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --idclcn-shadow-md: 0 4px 10px 0 rgba(0, 0, 0, 0.06);
    --idclcn-shadow-lg: 0 8px 24px 0 rgba(0, 0, 0, 0.08);
    --idclcn-radius-sm: 4px;
    --idclcn-radius-md: 6px;
    --idclcn-radius-lg: 8px;
    --idclcn-radius-xl: 12px;
    --idclcn-font: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    --idclcn-transition: all 0.2s ease;
}

/* ---- Global ---- */
body {
    font-family: var(--idclcn-font) !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    background: var(--idclcn-bg-grey) !important;
}
[v-cloak] { display: none !important; }
* { box-sizing: border-box; }

/* ============================================================
   Loading Animation - 替换为圆点弹跳动画
   ============================================================ */
#mainLoading {
    position: fixed;
    left: 0; top: 0;
    height: 100%; width: 100%;
    z-index: 9999;
    display: flex;
    background: #fff;
    align-items: center;
    justify-content: center;
}
#mainLoading .ddr {
    width: 8px;
    height: 8px;
    margin: 4px;
    border-radius: 50%;
    background-color: var(--idclcn-primary);
    animation: idclcnBounce 0.6s infinite alternate;
}
#mainLoading .ddr2 { animation-delay: .08s; }
#mainLoading .ddr3 { animation-delay: .16s; }
#mainLoading .ddr4 { animation-delay: .24s; }
#mainLoading .ddr5 { animation-delay: .32s; }
@keyframes idclcnBounce {
    0% { transform: translateY(0); opacity: .3; }
    100% { transform: translateY(-16px); opacity: 1; }
}

/* ============================================================
   SIDEBAR (el-aside) 侧边栏
   ============================================================ */
.el-aside {
    background: var(--idclcn-bg) !important;
    border-right: 1px solid var(--idclcn-border) !important;
    box-shadow: none !important;
    transition: var(--idclcn-transition);
}
.ali-logo {
    height: 30px !important;
    margin: 20px auto 16px !important;
    display: block !important;
}
.el-aside .el-menu {
    background-color: transparent !important;
    border-right: none !important;
}
.el-aside .el-menu-item {
    height: 40px !important;
    line-height: 40px !important;
    margin: 2px 8px !important;
    padding: 0 16px !important;
    border-radius: var(--idclcn-radius-md) !important;
    font-size: 14px !important;
    color: var(--idclcn-text-2) !important;
    transition: var(--idclcn-transition) !important;
}
.el-aside .el-menu-item:hover {
    background: var(--idclcn-fill) !important;
    color: var(--idclcn-primary) !important;
}
.el-aside .el-menu-item.is-active {
    background: var(--idclcn-primary-light) !important;
    color: var(--idclcn-primary) !important;
    font-weight: 600 !important;
}
.el-aside .el-menu-item .iconfont {
    margin-right: 8px;
    font-size: 16px;
    vertical-align: middle;
}
.el-aside .el-submenu__title {
    height: 40px !important;
    line-height: 40px !important;
    margin: 2px 8px !important;
    padding: 0 16px !important;
    border-radius: var(--idclcn-radius-md) !important;
    font-size: 14px !important;
    color: var(--idclcn-text-2) !important;
    transition: var(--idclcn-transition) !important;
}
.el-aside .el-submenu__title:hover {
    background: var(--idclcn-fill) !important;
    color: var(--idclcn-primary) !important;
}
.el-aside .el-submenu.is-active > .el-submenu__title {
    color: var(--idclcn-primary) !important;
}
.el-aside .el-submenu .el-menu-item {
    padding-left: 48px !important;
    font-size: 13px !important;
    height: 36px !important;
    line-height: 36px !important;
}
.el-aside .line {
    margin: 8px 16px !important;
    height: 1px !important;
    background: var(--idclcn-border-light) !important;
}

/* ============================================================
   TOP HEADER 顶部导航栏
   ============================================================ */
.el-header {
    background: rgba(255, 255, 255, 0.95) !important;
    backdrop-filter: blur(20px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
    box-shadow: 0 1px 0 var(--idclcn-border) !important;
    height: 56px !important;
    display: flex !important;
    align-items: center !important;
    padding: 0 24px !important;
    z-index: 1000 !important;
}
.header-right .el-avatar,
.header-right .name-first {
    background: var(--idclcn-primary) !important;
    color: #fff !important;
    border-radius: var(--idclcn-radius-md) !important;
}
.header-right .el-badge__content {
    background-color: var(--idclcn-danger) !important;
}

/* ============================================================
   MAIN CONTENT 主内容区
   ============================================================ */
.el-main {
    padding: 56px 0 0 0 !important;
    background: var(--idclcn-bg-grey) !important;
    min-height: 100vh;
}
.main-card {
    background: var(--idclcn-bg-grey) !important;
    padding: 24px !important;
    max-width: none !important;
}
.main-card-title {
    font-size: 20px !important;
    font-weight: 700 !important;
    color: var(--idclcn-title) !important;
    margin-bottom: 20px !important;
    letter-spacing: -0.02em;
}
.title-text {
    color: var(--idclcn-title) !important;
    font-weight: 600 !important;
}

/* ============================================================
   Card 容器 - 白色卡片统一样式
   ============================================================ */
.info-box,
.statistics-box,
.product-list-box,
.recommend-box,
.recommend-box-open,
.WorkOrder-box,
.notice-box,
.content-box,
.content-table,
.finance .finance-top,
.finance-balance,
.order-detail .page-content,
.order-detail .order-info,
.security-group .content-table,
.withdrawal-content {
    background: var(--idclcn-bg) !important;
    border-radius: var(--idclcn-radius-xl) !important;
    border: 1px solid var(--idclcn-border) !important;
    box-shadow: var(--idclcn-shadow-sm) !important;
    overflow: hidden;
}

/* ============================================================
   HOME 首页特殊样式
   ============================================================ */
.main-content {
    gap: 20px;
}
.left-box {
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.right-box {
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.info-box {
    padding: 24px !important;
    border-right: none !important;
}
.name-first {
    border-radius: var(--idclcn-radius-lg) !important;
    background: var(--idclcn-primary) !important;
    color: #fff !important;
    font-weight: 700 !important;
}
.hello {
    color: var(--idclcn-text-3) !important;
    font-size: 13px !important;
}
.name {
    color: var(--idclcn-text-1) !important;
    font-weight: 500 !important;
}
.bule-text,
.base-color {
    color: var(--idclcn-primary) !important;
    cursor: pointer;
}
.bule-text:hover,
.base-color:hover {
    color: var(--idclcn-primary-hover) !important;
}
.statistics-box {
    padding: 24px !important;
}
.statistics-credit {
    font-size: 28px !important;
    font-weight: 700 !important;
    color: var(--idclcn-title) !important;
}
.recharge-btn {
    background: var(--idclcn-primary) !important;
    color: #fff !important;
    border-radius: var(--idclcn-radius-md) !important;
    padding: 4px 12px !important;
    font-size: 12px !important;
    cursor: pointer;
    transition: var(--idclcn-transition);
}
.recharge-btn:hover {
    background: var(--idclcn-primary-hover) !important;
}
.order-item {
    border-radius: var(--idclcn-radius-lg) !important;
    transition: var(--idclcn-transition);
}
.order-item:hover {
    transform: translateY(-2px);
    box-shadow: var(--idclcn-shadow-md) !important;
}
.order-nums {
    font-weight: 700 !important;
    font-size: 24px !important;
    color: var(--idclcn-title) !important;
}
.goods-table {
    width: 100% !important;
}
.goods-table thead td {
    background: var(--idclcn-fill) !important;
    color: var(--idclcn-text-2) !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    padding: 12px 16px !important;
    border-bottom: 1px solid var(--idclcn-border) !important;
}
.goods-table tbody td {
    padding: 12px 16px !important;
    font-size: 13px !important;
    color: var(--idclcn-text-1) !important;
    border-bottom: 1px solid var(--idclcn-border-light) !important;
}
.goods-table .product-item {
    cursor: pointer;
    transition: var(--idclcn-transition);
}
.goods-table .product-item:hover {
    background: var(--idclcn-primary-light) !important;
}
.product-list-box {
    padding: 24px !important;
}
.no-product {
    text-align: center;
    padding: 48px 0;
}
.no-product h2 {
    color: var(--idclcn-text-1) !important;
    font-size: 16px !important;
    margin-bottom: 8px;
}
.no-product p {
    color: var(--idclcn-text-3) !important;
    margin-bottom: 16px;
}

/* 推介计划 */
.recommend-box-open {
    padding: 20px !important;
}
.recommend-box-open .url {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--idclcn-fill);
    border-radius: var(--idclcn-radius-md);
    padding: 8px 12px;
}
.recommend-box-open .copy-btn {
    background: var(--idclcn-primary) !important;
    color: #fff !important;
    border-radius: var(--idclcn-radius-sm) !important;
    cursor: pointer;
    transition: var(--idclcn-transition);
    white-space: nowrap;
}
.recommend-box-open .copy-btn:hover {
    background: var(--idclcn-primary-hover) !important;
}
.recommend-box {
    padding: 24px !important;
    text-align: center;
}
.recommend-box .no-recommend {
    color: var(--idclcn-primary) !important;
    cursor: pointer;
    font-weight: 500;
}

/* 工单 & 公告 */
.WorkOrder-box,
.notice-box {
    padding: 20px !important;
}
.WorkOrder-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}
.WorkOrder-title .more {
    color: var(--idclcn-text-3) !important;
    cursor: pointer;
    font-size: 18px;
    letter-spacing: 2px;
}
.WorkOrder-title .more:hover {
    color: var(--idclcn-primary) !important;
}
.WorkOrder-item {
    display: flex;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid var(--idclcn-border-light);
    cursor: pointer;
    transition: var(--idclcn-transition);
}
.WorkOrder-item:last-child {
    border-bottom: none;
}
.WorkOrder-item:hover {
    background: var(--idclcn-fill);
    border-radius: var(--idclcn-radius-sm);
}
.replay-div {
    border-radius: var(--idclcn-radius-sm) !important;
    padding: 2px 8px !important;
    font-size: 12px !important;
    white-space: nowrap;
}
.notice-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid var(--idclcn-border-light);
    cursor: pointer;
    transition: var(--idclcn-transition);
}
.notice-item:last-child {
    border-bottom: none;
}
.notice-item:hover {
    background: var(--idclcn-fill);
    border-radius: var(--idclcn-radius-sm);
}
.notice-time {
    color: var(--idclcn-text-3) !important;
    font-size: 12px !important;
}
.notice-title {
    color: var(--idclcn-text-1) !important;
    font-size: 14px !important;
    font-weight: 500 !important;
}

/* ============================================================
   FINANCE 财务页面
   ============================================================ */
.finance .finance-title {
    font-size: 20px !important;
    font-weight: 700 !important;
    color: var(--idclcn-title) !important;
}
.finance-balance {
    padding: 24px !important;
}
.balance-left-title {
    color: var(--idclcn-text-3) !important;
    font-size: 13px !important;
}
.balance-left-num {
    font-size: 32px !important;
    font-weight: 700 !important;
    color: var(--idclcn-title) !important;
}
.balance-left-num .prefix {
    font-size: 16px !important;
    color: var(--idclcn-text-3) !important;
}
.balance-tx-btn {
    border-color: var(--idclcn-border) !important;
}

/* ============================================================
   ACCOUNT 账户设置页面
   ============================================================ */
.box-top {
    padding: 24px !important;
}
.name-text {
    font-size: 20px !important;
    font-weight: 600 !important;
    color: var(--idclcn-title) !important;
}
.box-main {
    padding: 0 24px 24px !important;
}
.basic-title {
    font-size: 15px !important;
    font-weight: 600 !important;
    color: var(--idclcn-title) !important;
    margin-bottom: 16px !important;
}
.box-item-t {
    color: var(--idclcn-text-3) !important;
    font-size: 13px !important;
    margin-bottom: 6px !important;
}
.attestation-status {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: var(--idclcn-warning-light);
    border-radius: var(--idclcn-radius-md);
    cursor: pointer;
    transition: var(--idclcn-transition);
}
.attestation-status:hover {
    box-shadow: var(--idclcn-shadow-sm);
}

/* ============================================================
   ORDER DETAIL 订单详情
   ============================================================ */
.order-detail {
    padding: 0 !important;
}
.order-detail .page-top {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
}
.order-detail .top-title {
    font-size: 20px !important;
    font-weight: 700 !important;
    color: var(--idclcn-title) !important;
}
.order-detail .back-btn {
    cursor: pointer;
    transition: var(--idclcn-transition);
}
.order-detail .back-btn:hover {
    opacity: 0.7;
}
.order-detail .page-content {
    padding: 24px !important;
}
.order-detail .order-info {
    display: flex;
    justify-content: space-between;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin-bottom: 20px;
}
.order-detail .order-user {
    font-size: 16px !important;
    font-weight: 600 !important;
    color: var(--idclcn-title) !important;
}
.order-detail .order-num {
    color: var(--idclcn-text-3) !important;
    font-size: 13px !important;
}
.order-detail .pay-status {
    display: inline-block;
    padding: 4px 12px;
    border-radius: var(--idclcn-radius-md);
    font-size: 13px;
    font-weight: 500;
}
.order-detail .Unpaid-text { background: var(--idclcn-warning-light); color: var(--idclcn-warning); }
.order-detail .Paid-text { background: var(--idclcn-success-light); color: var(--idclcn-success); }
.order-detail .Refunded-text { background: var(--idclcn-danger-light); color: var(--idclcn-danger); }
.order-detail .pay-text {
    background: var(--idclcn-primary) !important;
    color: #fff !important;
    border-radius: var(--idclcn-radius-md) !important;
    padding: 8px 24px !important;
    cursor: pointer;
    transition: var(--idclcn-transition);
}
.order-detail .pay-text:hover {
    background: var(--idclcn-primary-hover) !important;
}
.order-detail .table-title {
    font-size: 16px !important;
    font-weight: 600 !important;
    color: var(--idclcn-title) !important;
    margin-bottom: 12px;
}
.order-detail .title-item {
    background: var(--idclcn-fill) !important;
    font-weight: 600 !important;
    color: var(--idclcn-text-2) !important;
}
.order-detail .order-item:hover {
    background: var(--idclcn-fill) !important;
}
.order-detail .total-money {
    color: var(--idclcn-text-3) !important;
}
.order-detail .money-text {
    font-weight: 600 !important;
    color: var(--idclcn-title) !important;
}

/* ============================================================
   SECURITY 安全设置
   ============================================================ */
.content_searchbar .left-btn {
    background: var(--idclcn-primary) !important;
    color: #fff !important;
    border-radius: var(--idclcn-radius-md) !important;
    padding: 8px 16px !important;
    cursor: pointer;
    font-size: 13px;
    transition: var(--idclcn-transition);
}
.content_searchbar .left-btn:hover {
    background: var(--idclcn-primary-hover) !important;
}
.more-operation {
    cursor: pointer;
    display: flex;
    gap: 3px;
}
.more-operation .dot {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--idclcn-text-3);
}
.operation-item {
    padding: 6px 16px;
    cursor: pointer;
    font-size: 13px;
    color: var(--idclcn-text-2);
    transition: var(--idclcn-transition);
}
.operation-item:hover {
    color: var(--idclcn-primary);
    background: var(--idclcn-primary-light);
}
.open { color: var(--idclcn-success); }
.un-open { color: var(--idclcn-text-3); }
.setting {
    color: var(--idclcn-primary) !important;
    cursor: pointer;
    margin-left: 8px;
}

/* ============================================================
   PRODUCT LIST 产品列表
   ============================================================ */
.product .main-card-title .title-text {
    font-size: 20px !important;
    font-weight: 700 !important;
}
.main-card-search {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}
.main-card-search .right-search {
    display: flex;
    align-items: center;
    gap: 8px;
}
.main-card-search .search-btn {
    background: var(--idclcn-primary) !important;
    color: #fff !important;
    border-radius: var(--idclcn-radius-md) !important;
    padding: 8px 16px !important;
    cursor: pointer;
    font-size: 13px;
    transition: var(--idclcn-transition);
}
.main-card-search .search-btn:hover {
    background: var(--idclcn-primary-hover) !important;
}
.column-id {
    color: var(--idclcn-primary) !important;
    cursor: pointer;
}
.cloud-name {
    cursor: pointer;
}
.cloud-name:hover {
    color: var(--idclcn-primary) !important;
}
.status {
    display: inline-block;
    padding: 2px 8px;
    border-radius: var(--idclcn-radius-sm);
    font-size: 12px;
    font-weight: 500;
}

/* ============================================================
   PRODUCT DETAIL 产品详情（控制台）
   ============================================================ */
.product_detail .config-box {
    padding: 24px !important;
}
.product_detail .contract-top {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
}
.product_detail .top-product-name {
    font-size: 18px !important;
    font-weight: 600 !important;
    color: var(--idclcn-title) !important;
}
.product_detail .contract-btn {
    background: var(--idclcn-primary) !important;
    border-color: var(--idclcn-primary) !important;
    border-radius: var(--idclcn-radius-md) !important;
}

/* ============================================================
   AGREEMENT 协议页面
   ============================================================ */
#content.template {
    background: var(--idclcn-bg) !important;
}
.contnet-right-out {
    max-width: 960px;
    margin: 0 auto;
    padding: 40px 24px;
}
.content-right {
    background: var(--idclcn-bg) !important;
}
.right-title {
    font-size: 24px !important;
    font-weight: 700 !important;
    color: var(--idclcn-title) !important;
    margin-bottom: 16px;
}
.right-keywords-time {
    color: var(--idclcn-text-3) !important;
    font-size: 13px !important;
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--idclcn-border-light);
}
.right-content {
    line-height: 1.8 !important;
    color: var(--idclcn-text-1) !important;
}

/* ============================================================
   ERROR PAGES (404, noPermissions, networkErro)
   ============================================================ */
.content-box {
    text-align: center;
    padding: 80px 24px !important;
}
.tips-box {
    color: var(--idclcn-text-2) !important;
    font-size: 16px !important;
    margin-top: 20px;
}
.tran-again {
    color: var(--idclcn-primary) !important;
    cursor: pointer;
    font-weight: 500;
    margin-top: 12px;
}
.tran-again:hover {
    color: var(--idclcn-primary-hover) !important;
}
.box {
    text-align: center;
    padding: 80px 24px !important;
}
.box p {
    color: var(--idclcn-text-2) !important;
    font-size: 14px !important;
    margin-top: 8px;
}

/* ============================================================
   TRANSFER 跳转页面
   ============================================================ */
.transfer .con {
    max-width: 480px;
    margin: 80px auto;
    text-align: center;
    background: var(--idclcn-bg);
    border-radius: var(--idclcn-radius-xl);
    padding: 48px 32px;
    box-shadow: var(--idclcn-shadow-md);
}
.transfer .logo img {
    height: 40px;
    margin-bottom: 24px;
}
.transfer .tit {
    font-size: 18px !important;
    font-weight: 600 !important;
    color: var(--idclcn-title) !important;
    margin-bottom: 8px;
}
.transfer .des {
    color: var(--idclcn-text-3) !important;
    font-size: 13px !important;
    margin-bottom: 12px;
}
.transfer .link {
    color: var(--idclcn-primary) !important;
    word-break: break-all;
    margin-bottom: 24px;
}
.transfer .btn {
    display: inline-block;
    background: var(--idclcn-primary) !important;
    color: #fff !important;
    border-radius: var(--idclcn-radius-md) !important;
    padding: 10px 32px;
    cursor: pointer;
    font-size: 14px;
    transition: var(--idclcn-transition);
}
.transfer .btn:hover {
    background: var(--idclcn-primary-hover) !important;
}

/* ============================================================
   WITHDRAWAL 提现
   ============================================================ */
.withdrawal-content {
    padding: 24px !important;
}

/* ============================================================
   DIALOG 弹窗统一样式
   ============================================================ */
.el-dialog {
    border-radius: var(--idclcn-radius-xl) !important;
    overflow: hidden;
}
.el-dialog__header {
    padding: 20px 24px 0 !important;
}
.el-dialog__body {
    padding: 16px 24px 24px !important;
}
.dialog-title {
    font-size: 18px !important;
    font-weight: 600 !important;
    color: var(--idclcn-title) !important;
    margin-bottom: 16px;
}
.dialog-footer {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
    margin-top: 20px;
}
.dialog-footer .btn-ok,
.del-dialog-footer .btn-ok {
    background: var(--idclcn-primary) !important;
    color: #fff !important;
    border-radius: var(--idclcn-radius-md) !important;
    padding: 8px 24px !important;
    cursor: pointer;
    transition: var(--idclcn-transition);
}
.dialog-footer .btn-ok:hover,
.del-dialog-footer .btn-ok:hover {
    background: var(--idclcn-primary-hover) !important;
}
.dialog-footer .btn-no,
.del-dialog-footer .btn-no {
    background: var(--idclcn-fill) !important;
    color: var(--idclcn-text-2) !important;
    border-radius: var(--idclcn-radius-md) !important;
    padding: 8px 24px !important;
    cursor: pointer;
    transition: var(--idclcn-transition);
}
.dialog-footer .btn-no:hover,
.del-dialog-footer .btn-no:hover {
    background: var(--idclcn-border-light) !important;
}
.del-dialog-title {
    font-size: 16px !important;
    font-weight: 600 !important;
    color: var(--idclcn-danger) !important;
    display: flex;
    align-items: center;
    gap: 8px;
}
.del-icon {
    font-size: 20px !important;
}

/* ============================================================
   Element UI 组件全局覆盖
   ============================================================ */

/* Buttons */
.el-button--primary {
    background-color: var(--idclcn-primary) !important;
    border-color: var(--idclcn-primary) !important;
    border-radius: var(--idclcn-radius-md) !important;
    transition: var(--idclcn-transition) !important;
}
.el-button--primary:hover,
.el-button--primary:focus {
    background-color: var(--idclcn-primary-hover) !important;
    border-color: var(--idclcn-primary-hover) !important;
}
.el-button--primary:active {
    background-color: var(--idclcn-primary-active) !important;
    border-color: var(--idclcn-primary-active) !important;
}
.el-button--primary.is-disabled {
    background-color: var(--idclcn-primary-disabled) !important;
    border-color: var(--idclcn-primary-disabled) !important;
}
.el-button--primary.is-plain {
    background: var(--idclcn-primary-light) !important;
    color: var(--idclcn-primary) !important;
    border-color: var(--idclcn-primary) !important;
}
.el-button--primary.is-plain:hover {
    background: var(--idclcn-primary) !important;
    color: #fff !important;
}
.el-button--text {
    color: var(--idclcn-primary) !important;
}
.el-button--text:hover {
    color: var(--idclcn-primary-hover) !important;
}
.el-button {
    border-radius: var(--idclcn-radius-md) !important;
    transition: var(--idclcn-transition) !important;
}

/* Tabs */
.el-tabs__item.is-active {
    color: var(--idclcn-primary) !important;
    font-weight: 600 !important;
}
.el-tabs__active-bar {
    background-color: var(--idclcn-primary) !important;
    height: 3px !important;
    border-radius: 2px !important;
}
.el-tabs__item:hover {
    color: var(--idclcn-primary) !important;
}
.el-tabs__nav-wrap::after {
    height: 1px !important;
    background: var(--idclcn-border-light) !important;
}

/* Input */
.el-input__inner {
    border-radius: var(--idclcn-radius-md) !important;
    border-color: var(--idclcn-border) !important;
    transition: var(--idclcn-transition) !important;
}
.el-input__inner:hover {
    border-color: var(--idclcn-text-4) !important;
}
.el-input__inner:focus {
    border-color: var(--idclcn-primary) !important;
    box-shadow: 0 0 0 2px rgba(22, 93, 255, 0.1) !important;
}
.el-textarea__inner {
    border-radius: var(--idclcn-radius-md) !important;
    border-color: var(--idclcn-border) !important;
}
.el-textarea__inner:focus {
    border-color: var(--idclcn-primary) !important;
    box-shadow: 0 0 0 2px rgba(22, 93, 255, 0.1) !important;
}

/* Select */
.el-select-dropdown__item.selected {
    color: var(--idclcn-primary) !important;
    font-weight: 600 !important;
}

/* Table */
.el-table {
    border-radius: var(--idclcn-radius-lg) !important;
    overflow: hidden;
}
.el-table th {
    background: var(--idclcn-fill) !important;
    color: var(--idclcn-text-2) !important;
    font-weight: 600 !important;
    font-size: 13px !important;
}
.el-table td {
    font-size: 13px !important;
    color: var(--idclcn-text-1) !important;
}
.el-table--border::after,
.el-table--group::after,
.el-table::before {
    background-color: var(--idclcn-border-light) !important;
}
.el-table__row:hover > td {
    background: var(--idclcn-primary-light) !important;
}

/* Tag */
.el-tag {
    border-radius: var(--idclcn-radius-sm) !important;
}
.el-tag--primary,
.el-tag--info {
    background: var(--idclcn-primary-light) !important;
    color: var(--idclcn-primary) !important;
    border-color: transparent !important;
}
.el-tag--success {
    background: var(--idclcn-success-light) !important;
    color: var(--idclcn-success) !important;
    border-color: transparent !important;
}
.el-tag--warning {
    background: var(--idclcn-warning-light) !important;
    color: var(--idclcn-warning) !important;
    border-color: transparent !important;
}
.el-tag--danger {
    background: var(--idclcn-danger-light) !important;
    color: var(--idclcn-danger) !important;
    border-color: transparent !important;
}

/* Pagination */
.el-pagination {
    margin-top: 16px !important;
}
.el-pagination .btn-next,
.el-pagination .btn-prev,
.el-pagination .el-pager li {
    border-radius: var(--idclcn-radius-sm) !important;
}
.el-pager li.active {
    background: var(--idclcn-primary) !important;
    color: #fff !important;
}

/* Checkbox & Radio */
.el-checkbox__input.is-checked .el-checkbox__inner,
.el-radio__input.is-checked .el-radio__inner {
    background-color: var(--idclcn-primary) !important;
    border-color: var(--idclcn-primary) !important;
}
.el-checkbox__input.is-checked + .el-checkbox__label,
.el-radio__input.is-checked + .el-radio__label {
    color: var(--idclcn-primary) !important;
}
.el-checkbox__inner:hover,
.el-radio__inner:hover {
    border-color: var(--idclcn-primary) !important;
}

/* Switch */
.el-switch.is-checked .el-switch__core {
    background-color: var(--idclcn-primary) !important;
    border-color: var(--idclcn-primary) !important;
}

/* Progress */
.el-progress-bar__inner {
    background-color: var(--idclcn-primary) !important;
}

/* Alert */
.el-alert--error {
    background: var(--idclcn-danger-light) !important;
    border: 1px solid rgba(245, 63, 63, 0.2);
    border-radius: var(--idclcn-radius-md) !important;
}
.el-alert--info {
    background: var(--idclcn-primary-light) !important;
    border: 1px solid rgba(22, 93, 255, 0.2);
    border-radius: var(--idclcn-radius-md) !important;
}
.el-alert--success {
    background: var(--idclcn-success-light) !important;
    border-radius: var(--idclcn-radius-md) !important;
}
.el-alert--warning {
    background: var(--idclcn-warning-light) !important;
    border-radius: var(--idclcn-radius-md) !important;
}

/* Badge */
.el-badge__content.is-fixed {
    background-color: var(--idclcn-danger) !important;
}

/* Tooltip */
.el-tooltip__popper.is-dark {
    background: var(--idclcn-title) !important;
    border-radius: var(--idclcn-radius-md) !important;
}

/* Popover */
.el-popover {
    border-radius: var(--idclcn-radius-lg) !important;
    box-shadow: var(--idclcn-shadow-lg) !important;
    border: 1px solid var(--idclcn-border-light) !important;
}

/* Drawer */
.el-drawer {
    box-shadow: var(--idclcn-shadow-lg) !important;
}

/* Divider */
.el-divider {
    border-color: var(--idclcn-border-light) !important;
}

/* Loading */
.el-loading-mask {
    border-radius: inherit;
}
.el-loading-spinner .circular .path {
    stroke: var(--idclcn-primary) !important;
}

/* ============================================================
   RESPONSIVE 响应式
   ============================================================ */
@media (max-width: 768px) {
    .el-header {
        height: 48px !important;
        padding: 0 16px !important;
    }
    .el-main {
        padding: 48px 0 0 0 !important;
    }
    .main-card {
        padding: 16px !important;
    }
    .main-content {
        flex-direction: column;
    }
    .info-box {
        flex-direction: column;
        padding: 16px !important;
    }
    .divider-box {
        display: none;
    }
    .main-card-title {
        font-size: 18px !important;
    }
}

/* ============================================================
   SCROLLBAR 自定义滚动条
   ============================================================ */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
::-webkit-scrollbar-track {
    background: transparent;
}
::-webkit-scrollbar-thumb {
    background: var(--idclcn-text-4);
    border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
    background: var(--idclcn-text-3);
}

/* ============================================================
   UTILITY CLASSES
   ============================================================ */
.idclcn-card {
    background: var(--idclcn-bg);
    border-radius: var(--idclcn-radius-xl);
    border: 1px solid var(--idclcn-border);
    box-shadow: var(--idclcn-shadow-sm);
    padding: 24px;
}
.idclcn-text-primary { color: var(--idclcn-primary) !important; }
.idclcn-text-success { color: var(--idclcn-success) !important; }
.idclcn-text-warning { color: var(--idclcn-warning) !important; }
.idclcn-text-danger { color: var(--idclcn-danger) !important; }
.idclcn-bg-primary-light { background: var(--idclcn-primary-light) !important; }