/* =============================================
   服务器运营商 - 控制台样式 (仿大厂云控制台)
   ============================================= */
*,*::before,*::after{box-sizing:border-box;}
:root{
    --sidebar-w:220px;
    --header-h:56px;
    --primary:#2468f2;
    --primary-dark:#1e3a5f;
    --primary-hover:#1a56db;
    --primary-light:#eff6ff;
    --dark:#0f172a;
    --dark-light:#1e293b;
    --body-bg:#f5f7fa;
    --card-bg:#fff;
    --success:#00b42a;
    --warning:#ff7d00;
    --danger:#f53f3f;
    --info:#0fc6c2;
    --text:#1d2129;
    --text-2:#4e5969;
    --text-3:#86909c;
    --border:#e5e6eb;
    --border-light:#f2f3f5;
    --radius:6px;
    --shadow:0 1px 2px rgba(0,0,0,.05);
    --shadow-md:0 4px 10px rgba(0,0,0,.08);
}
body{margin:0;padding:0;background:var(--body-bg);color:var(--text);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"PingFang SC","Microsoft YaHei","Helvetica Neue",Arial,sans-serif;font-size:14px;line-height:1.6;overflow-x:hidden;}

/* ========== 控制台布局 ========== */
.app-layout{display:flex;min-height:100vh;}

/* --- 左侧边栏 --- */
.app-sidebar{
    width:var(--sidebar-w);flex-shrink:0;
    background:#fff;border-right:1px solid var(--border);
    display:flex;flex-direction:column;
    position:fixed;top:0;left:0;bottom:0;z-index:100;
    transition:transform .25s ease,width .25s ease;
    overflow-y:auto;overflow-x:hidden;
}
.sidebar-brand{
    height:var(--header-h);display:flex;align-items:center;
    padding:0 20px;border-bottom:1px solid var(--border);flex-shrink:0;
}
.sidebar-brand a{
    font-size:18px;font-weight:700;color:var(--primary);
    text-decoration:none;letter-spacing:.5px;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.sidebar-nav{padding:8px 0;flex:1;}
.nav-section{margin-bottom:4px;}
.nav-heading{
    padding:12px 20px 6px;font-size:12px;font-weight:600;
    color:var(--text-3);text-transform:uppercase;letter-spacing:.5px;
}
.nav-item{
    display:flex;align-items:center;gap:10px;
    padding:10px 20px;color:var(--text-2);
    text-decoration:none;transition:all .15s;
    border-left:3px solid transparent;font-size:14px;
}
.nav-item:hover{color:var(--primary);background:var(--primary-light);text-decoration:none;}
.nav-item.active{color:var(--primary);background:var(--primary-light);border-left-color:var(--primary);font-weight:600;}
.nav-item i{width:18px;text-align:center;font-size:15px;flex-shrink:0;}

/* --- 右侧主区域 --- */
.app-main{flex:1;margin-left:var(--sidebar-w);display:flex;flex-direction:column;min-height:100vh;transition:margin-left .25s ease;}
.app-header{
    height:var(--header-h);background:#fff;border-bottom:1px solid var(--border);
    display:flex;align-items:center;justify-content:space-between;
    padding:0 24px;position:sticky;top:0;z-index:90;flex-shrink:0;
}
.header-left{display:flex;align-items:center;gap:12px;}
.sidebar-toggle{
    background:none;border:none;font-size:18px;color:var(--text-2);
    cursor:pointer;padding:6px 8px;border-radius:4px;transition:all .15s;
    display:none;
}
.sidebar-toggle:hover{background:var(--border-light);color:var(--text);}
.header-right{display:flex;align-items:center;gap:16px;}
.header-btn{
    width:36px;height:36px;display:flex;align-items:center;justify-content:center;
    border-radius:50%;color:var(--text-2);font-size:16px;transition:all .15s;
}
.header-btn:hover{background:var(--border-light);color:var(--text);text-decoration:none;}
.header-user{
    display:flex;align-items:center;gap:8px;
    cursor:pointer;padding:4px 8px;border-radius:var(--radius);
    position:relative;transition:background .15s;
}
.header-user:hover{background:var(--border-light);}
.header-avatar{width:32px;height:32px;border-radius:50%;object-fit:cover;border:2px solid var(--border);}
.header-nickname{font-size:14px;color:var(--text);font-weight:500;}
.header-dropdown{
    display:none;position:absolute;top:calc(100% + 8px);right:0;
    background:#fff;border:1px solid var(--border);border-radius:var(--radius);
    box-shadow:var(--shadow-md);min-width:180px;padding:6px 0;z-index:200;
}
.header-user.open .header-dropdown{display:block;}
.header-dropdown a{display:block;padding:9px 16px;color:var(--text-2);font-size:14px;transition:all .15s;text-decoration:none;}
.header-dropdown a:hover{background:var(--primary-light);color:var(--primary);}
.header-dropdown .dropdown-divider{height:1px;background:var(--border);margin:4px 0;}
.app-content{flex:1;padding:24px;}

/* sidebar collapse */
.sidebar-collapsed .app-sidebar{transform:translateX(calc(var(--sidebar-w) * -1));}
.sidebar-collapsed .app-main{margin-left:0;}

/* ========== 登录/注册布局 ========== */
.auth-page{background:linear-gradient(135deg,#0f172a 0%,#1e3a5f 50%,#1a56db 100%);min-height:100vh;}
.auth-layout{min-height:100vh;display:flex;flex-direction:column;align-items:center;position:relative;overflow:hidden;}

/* 动画背景 */
.auth-bg{position:fixed;top:0;left:0;right:0;bottom:0;pointer-events:none;z-index:0;}
.auth-shape{position:absolute;border-radius:50%;opacity:.08;background:#fff;}
.shape-1{width:400px;height:400px;top:-100px;right:-100px;animation:authFloat 20s ease-in-out infinite;}
.shape-2{width:300px;height:300px;bottom:-80px;left:-80px;animation:authFloat 25s ease-in-out infinite reverse;}
.shape-3{width:200px;height:200px;top:40%;left:20%;animation:authFloat 18s ease-in-out infinite 3s;}
.shape-4{width:150px;height:150px;top:20%;right:30%;opacity:.05;animation:authFloat 22s ease-in-out infinite 5s;}
.shape-5{width:80px;height:80px;bottom:30%;right:15%;opacity:.06;animation:authFloat 15s ease-in-out infinite 2s;}
@keyframes authFloat{
    0%,100%{transform:translate(0,0) scale(1);}
    25%{transform:translate(30px,-40px) scale(1.05);}
    50%{transform:translate(-20px,30px) scale(.95);}
    75%{transform:translate(20px,20px) scale(1.02);}
}
/* 网格线背景 */
.auth-bg::before{
    content:'';position:absolute;top:0;left:0;right:0;bottom:0;
    background-image:linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px);
    background-size:60px 60px;
}
.auth-header{
    padding:32px 0 0;text-align:center;position:relative;z-index:1;width:100%;
}
.auth-brand{
    font-size:28px;font-weight:800;color:#fff;text-decoration:none;
    letter-spacing:2px;text-shadow:0 2px 10px rgba(0,0,0,.3);
}
.auth-brand:hover{color:#fff;text-decoration:none;}
.auth-body{flex:1;display:flex;align-items:center;justify-content:center;position:relative;z-index:1;width:100%;padding:20px;}
.auth-footer{
    padding:20px 0;text-align:center;color:rgba(255,255,255,.4);font-size:13px;
    position:relative;z-index:1;
}
.auth-footer a{color:rgba(255,255,255,.5);}
.auth-footer a:hover{color:#fff;}

/* 登录/注册卡片 */
.login-section{
    max-width:420px;width:100%;
    background:rgba(255,255,255,.97);
    border-radius:16px;
    box-shadow:0 20px 60px rgba(0,0,0,.3);
    overflow:hidden;
    backdrop-filter:blur(10px);
    margin:0;
}
.logon-tab{
    display:flex;background:var(--dark);
}
.logon-tab a{
    flex:1;text-align:center;padding:16px 0;
    color:rgba(255,255,255,.5);font-size:15px;font-weight:600;
    transition:all .2s;cursor:pointer;text-decoration:none;
    border-bottom:3px solid transparent;
}
.logon-tab a:hover{color:rgba(255,255,255,.8);text-decoration:none;}
.logon-tab a.active{color:#fff;border-bottom-color:var(--primary);background:rgba(255,255,255,.05);}
.login-main{padding:32px 36px;}
.login-main .form-group{margin-bottom:18px;}
.login-main label.control-label{font-weight:600;color:var(--text);font-size:14px;margin-bottom:6px;}
.login-main .form-control{
    height:44px;border-radius:var(--radius);border:1px solid var(--border);
    font-size:14px;transition:border-color .2s,box-shadow .2s;
}
.login-main .form-control:focus{border-color:var(--primary);box-shadow:0 0 0 3px rgba(36,104,242,.12);}
.login-main .btn-primary{
    height:46px;font-size:15px;font-weight:600;border-radius:var(--radius);
    background:var(--primary);border-color:var(--primary);transition:all .2s;
}
.login-main .btn-primary:hover{background:var(--primary-hover);border-color:var(--primary-hover);}
.login-main .btn-default,.login-main .no-border{
    background:transparent;border:1px solid var(--border);color:var(--text-3);
    font-size:14px;height:44px;line-height:30px;border-radius:var(--radius);
}
.login-main .btn-default:hover{border-color:var(--primary);color:var(--primary);}
.login-main .checkbox label{color:var(--text-3);font-size:13px;}
.login-main .btn-forgot{color:var(--primary);font-size:13px;}
/* 登录卡片标题 */
.login-card-title{
    padding:24px 36px 0;text-align:center;
}
.login-card-title h3{
    font-size:20px;font-weight:700;color:var(--text);margin:0;
}
/* 登录方式内部切换 */
.login-tabs{
    display:flex;border-bottom:1px solid var(--border);margin:0 36px 20px;
}
.login-tabs a{
    flex:1;text-align:center;padding:12px 0;font-size:14px;
    color:var(--text-3);font-weight:500;cursor:pointer;
    border-bottom:2px solid transparent;transition:all .2s;
    text-decoration:none;
}
.login-tabs a:hover{color:var(--text);text-decoration:none;}
.login-tabs a.active{color:var(--primary);border-bottom-color:var(--primary);font-weight:600;}
.login-tab-pane{display:none;}
.login-tab-pane.active{display:block;}
/* 验证码按钮 */
.login-main .btn-captcha{
    height:44px;line-height:44px;padding:0 16px;white-space:nowrap;
    font-size:13px;border-radius:0 var(--radius) var(--radius) 0;
}
.login-main .input-group .form-control{border-radius:var(--radius) 0 0 var(--radius);}
.login-main .input-group .btn-captcha{border-radius:0 var(--radius) var(--radius) 0;}
/* 链接按钮底部 */
.login-main .link-row{text-align:center;margin-top:16px;}
.login-main .link-row a{color:var(--primary);font-size:14px;}
.login-main .link-row a:hover{text-decoration:underline;}

/* ========== 仪表盘 ========== */
.page-title{font-size:22px;font-weight:700;color:var(--text);margin:0 0 24px;line-height:1.3;}
.dashboard-welcome{
    background:linear-gradient(135deg,#2468f2 0%,#1e3a5f 100%);
    border-radius:var(--radius);padding:24px 28px;color:#fff;
    margin-bottom:24px;display:flex;align-items:center;gap:20px;
}
.dashboard-welcome .avatar-lg img{
    width:64px;height:64px;border-radius:50%;border:3px solid rgba(255,255,255,.3);
}
.dashboard-welcome .welcome-info h3{margin:0 0 2px;font-size:18px;font-weight:700;}
.dashboard-welcome .welcome-info p{margin:0;opacity:.75;font-size:13px;}
.dashboard-welcome .balance-info{margin-left:auto;text-align:right;}
.dashboard-welcome .balance-info .amount{font-size:26px;font-weight:700;}
.dashboard-welcome .balance-info .label-text{font-size:12px;opacity:.75;}
.dashboard-welcome .btn-recharge{
    display:inline-block;margin-top:6px;padding:5px 18px;
    background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.35);
    color:#fff;border-radius:20px;font-size:12px;transition:all .2s;text-decoration:none;
}
.dashboard-welcome .btn-recharge:hover{background:rgba(255,255,255,.28);color:#fff;text-decoration:none;}

/* 统计卡片 */
.stat-cards{display:grid;grid-template-columns:repeat(5,1fr);gap:16px;margin-bottom:24px;}
.stat-card{
    background:var(--card-bg);border-radius:var(--radius);
    padding:20px;box-shadow:var(--shadow);
    transition:all .2s;text-decoration:none !important;color:var(--text) !important;
    display:block;border-top:3px solid transparent;
}
.stat-card:hover{box-shadow:var(--shadow-md);transform:translateY(-2px);}
.stat-card .stat-icon{
    width:40px;height:40px;border-radius:8px;
    display:flex;align-items:center;justify-content:center;
    font-size:18px;color:#fff;margin-bottom:12px;
}
.stat-card .stat-count{font-size:24px;font-weight:700;line-height:1;margin-bottom:4px;}
.stat-card .stat-label{font-size:12px;color:var(--text-3);}
.card-tuoguan{border-top-color:#6366f1;}.card-tuoguan .stat-icon{background:#6366f1;}
.card-cloud{border-top-color:var(--primary);}.card-cloud .stat-icon{background:var(--primary);}
.card-vhost{border-top-color:var(--info);}.card-vhost .stat-icon{background:var(--info);}
.card-domain{border-top-color:var(--success);}.card-domain .stat-icon{background:var(--success);}
.card-ssl{border-top-color:var(--warning);}.card-ssl .stat-icon{background:var(--warning);}

/* 到期提醒 */
.expire-panel{background:var(--card-bg);border-radius:var(--radius);box-shadow:var(--shadow);padding:20px 24px;}
.expire-panel h4{
    font-size:15px;font-weight:700;margin:0 0 16px;color:var(--text);
    padding-bottom:12px;border-bottom:1px solid var(--border);
}
.expire-panel h4 i{color:var(--warning);margin-right:8px;}
.expire-item{display:flex;align-items:center;padding:10px 0;border-bottom:1px solid var(--border-light);font-size:14px;}
.expire-item:last-child{border-bottom:none;}
.expire-item .expire-type{
    background:var(--primary-light);color:var(--primary);
    padding:2px 10px;border-radius:4px;font-size:12px;font-weight:600;
    margin-right:12px;white-space:nowrap;
}
.expire-item .expire-name{flex:1;color:var(--text);}
.expire-item .expire-date{color:var(--danger);font-size:13px;font-weight:600;}
.expire-empty{text-align:center;padding:24px 0;color:var(--text-3);font-size:14px;}

/* ========== 内容卡片 ========== */
.content-card{background:var(--card-bg);border-radius:var(--radius);box-shadow:var(--shadow);}
.content-card .card-header{
    padding:16px 24px;border-bottom:1px solid var(--border);
    display:flex;align-items:center;justify-content:space-between;
}
.content-card .card-header h2{font-size:16px;font-weight:700;margin:0;color:var(--text);}
.content-card .card-header h2 i{margin-right:8px;color:var(--primary);}
.content-card .card-body{padding:0;}

/* ========== 订单表格 ========== */
.order-table{width:100%;border-collapse:collapse;}
.order-table thead th{
    background:#fafafa;color:var(--text-3);font-size:12px;font-weight:600;
    padding:12px 16px;border-bottom:1px solid var(--border);
    white-space:nowrap;text-align:left;
}
.order-table tbody td{
    padding:14px 16px;border-bottom:1px solid var(--border-light);
    font-size:14px;vertical-align:middle;
}
.order-table tbody tr:hover{background:#fafbfc;}
.order-table .order-id{font-family:"SF Mono",Monaco,"Cascadia Code",Consolas,monospace;font-size:13px;color:var(--primary);}

/* 状态标签 */
.status-badge{display:inline-block;padding:2px 10px;border-radius:10px;font-size:12px;font-weight:500;line-height:1.7;}
.status-normal{background:#e8ffea;color:#00642e;}
.status-expired{background:#ffece8;color:#a1151a;}
.status-disable{background:#f2f3f5;color:#4e5969;}
.status-transferring{background:#e8f3ff;color:#0e5fc2;}
.status-locked{background:#fff7e8;color:#a64500;}

/* 操作按钮 */
.btn-detail{
    padding:4px 14px;border-radius:4px;font-size:13px;
    background:var(--primary);color:#fff;border:none;transition:all .15s;
    display:inline-block;
}
.btn-detail:hover{background:var(--primary-hover);color:#fff;text-decoration:none;}
.btn-dns{
    padding:4px 14px;border-radius:4px;font-size:13px;
    background:#165dff;color:#fff;border:none;transition:all .15s;
    display:inline-block;margin-right:4px;text-decoration:none;
}
.btn-dns:hover{background:#0e4bd3;color:#fff;text-decoration:none;}

.btn-renew-domain{
    padding:4px 14px;border-radius:4px;font-size:13px;
    background:#ff6a00;color:#fff;border:none;transition:all .15s;
    display:inline-block;margin-right:4px;text-decoration:none;cursor:pointer;
}
.btn-renew-domain:hover{background:#e55d00;color:#fff;text-decoration:none;}

/* 分页 */
.pagination-wrap{text-align:center;padding:16px 24px;}
.pagination-wrap .pagination{display:inline-flex;gap:4px;margin:0;}
.pagination-wrap .pagination>li>a,.pagination-wrap .pagination>li>span{
    border-radius:4px;padding:6px 12px;color:var(--text-2);border-color:var(--border);font-size:13px;
}
.pagination-wrap .pagination>.active>a,.pagination-wrap .pagination>.active>a:hover{background:var(--primary);border-color:var(--primary);color:#fff;}
.order-empty{text-align:center;padding:60px 20px;color:var(--text-3);}
.order-empty i{font-size:48px;margin-bottom:12px;display:block;color:#d1d5db;}
.order-empty p{font-size:14px;margin:0;}

/* ========== 订单详情 ========== */
.detail-header{
    background:linear-gradient(135deg,var(--primary-dark),var(--primary));
    border-radius:var(--radius) var(--radius) 0 0;
    padding:24px 28px;color:#fff;
}
.detail-header h3{margin:0 0 4px;font-size:18px;font-weight:700;}
.detail-header .detail-order-id{opacity:.8;font-size:14px;}
.detail-body{padding:24px 28px;background:var(--card-bg);border-radius:0 0 var(--radius) var(--radius);box-shadow:var(--shadow);}
.detail-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:16px;}
.detail-item label{display:block;font-size:12px;color:var(--text-3);margin-bottom:2px;font-weight:600;}
.detail-item span{font-size:14px;color:var(--text);font-weight:500;}

/* ========== 充值页面 ========== */
.recharge-panel{background:var(--card-bg);border-radius:var(--radius);box-shadow:var(--shadow);padding:24px 28px;}
.recharge-panel h3{font-size:14px;font-weight:700;color:var(--text);margin:20px 0 12px;}
.recharge-panel h3:first-child{margin-top:0;}
.money-grid{display:flex;flex-wrap:wrap;gap:12px;}
.money-option{
    min-width:100px;text-align:center;padding:12px 20px;
    border:2px solid var(--border);border-radius:var(--radius);
    cursor:pointer;font-size:14px;font-weight:600;
    color:var(--text-3);transition:all .15s;background:#fff;
}
.money-option:hover{border-color:var(--primary);color:var(--primary);}
.money-option.active{border-color:var(--primary);color:var(--primary);background:var(--primary-light);}

/* 余额日志 */
.moneylog-item{display:flex;align-items:center;padding:14px 24px;border-bottom:1px solid var(--border-light);}
.moneylog-item:last-child{border-bottom:none;}
.moneylog-item .log-icon{
    width:36px;height:36px;border-radius:50%;
    display:flex;align-items:center;justify-content:center;
    font-size:14px;margin-right:14px;flex-shrink:0;
}
.moneylog-item .log-icon.income{background:#e8ffea;color:var(--success);}
.moneylog-item .log-icon.expense{background:#ffece8;color:var(--danger);}
.moneylog-item .log-info{flex:1;}
.moneylog-item .log-memo{font-size:14px;color:var(--text);font-weight:500;}
.moneylog-item .log-time{font-size:12px;color:var(--text-3);margin-top:2px;}
.moneylog-item .log-amount{font-size:15px;font-weight:700;text-align:right;}
.moneylog-item .log-amount.positive{color:var(--success);}
.moneylog-item .log-amount.negative{color:var(--danger);}

/* ========== page-header 兼容 ========== */
h2.page-header{
    margin:0 0 20px;padding:0 0 16px;
    border-bottom:1px solid var(--border);
    font-size:16px;font-weight:700;color:var(--text);
}

/* ========== 响应式 ========== */
@media(max-width:1200px){.stat-cards{grid-template-columns:repeat(3,1fr);}}
@media(max-width:991px){
    .sidebar-toggle{display:flex!important;}
    .app-sidebar{transform:translateX(calc(var(--sidebar-w) * -1));}
    .app-main{margin-left:0;}
    body:not(.sidebar-collapsed) .app-sidebar{transform:translateX(calc(var(--sidebar-w) * -1));}
    body.sidebar-open .app-sidebar{transform:translateX(0);box-shadow:4px 0 20px rgba(0,0,0,.1);}
    .stat-cards{grid-template-columns:repeat(2,1fr);}
    .detail-grid{grid-template-columns:1fr 1fr;}
}
@media(max-width:767px){
    .stat-cards{grid-template-columns:1fr 1fr;}
    .dashboard-welcome{flex-direction:column;text-align:center;gap:12px;}
    .dashboard-welcome .balance-info{margin-left:0;text-align:center;}
    .login-section{margin:0 12px;border-radius:12px;}
    .login-main{padding:24px 20px;}
    .login-tabs{margin:0 20px 16px;}
    .login-card-title{padding:20px 20px 0;}
    .app-content{padding:16px;}
    .detail-grid{grid-template-columns:1fr;}
    .money-option{min-width:80px;padding:10px 12px;font-size:13px;}
}

/* avatar fallback */
.user-center .avatar-img img{max-width:100%;border-radius:50%;}

/* ========== 实名认证页面 ========== */
.verify-type-tabs{
    display:flex;border-bottom:2px solid var(--border);margin-bottom:24px;
}
.verify-type-tabs a{
    padding:12px 24px;font-size:14px;font-weight:600;
    color:var(--text-3);cursor:pointer;text-decoration:none;
    border-bottom:2px solid transparent;margin-bottom:-2px;
    transition:all .2s;display:flex;align-items:center;gap:8px;
}
.verify-type-tabs a:hover{color:var(--text);text-decoration:none;}
.verify-type-tabs a.active{color:var(--primary);border-bottom-color:var(--primary);}
.verify-pane{display:none;}
.verify-pane.active{display:block;}

/* 认证成功面板 */
.verify-success-panel{text-align:center;padding:40px 20px;}
.verify-success-icon{font-size:64px;color:var(--success);margin-bottom:16px;}
.verify-success-panel h3{font-size:20px;font-weight:700;color:var(--text);margin:0 0 24px;}
.verify-info-grid{
    display:inline-grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
    gap:16px;text-align:left;max-width:500px;width:100%;
    background:var(--border-light);border-radius:var(--radius);padding:20px 24px;
}
.verify-info-item label{display:block;font-size:12px;color:var(--text-3);margin-bottom:2px;font-weight:600;}
.verify-info-item span{font-size:14px;color:var(--text);font-weight:500;}

/* 认证中提示 */
.verify-pending-tip{
    background:#fff7e8;border:1px solid #ffe4b8;border-radius:var(--radius);
    padding:16px 20px;margin-bottom:24px;color:#a64500;font-size:14px;line-height:1.8;
}
.verify-pending-tip i{margin-right:6px;font-size:16px;}

/* 二维码弹窗 */
.verify-qrcode-panel{padding:24px;text-align:center;}
.qrcode-tip{font-size:14px;color:var(--text);font-weight:600;margin-bottom:20px;line-height:1.5;}
.qrcode-box{display:inline-block;padding:12px;background:#fff;border:1px solid var(--border);border-radius:8px;margin-bottom:20px;}
.qrcode-actions{margin-bottom:16px;}
.qrcode-note{font-size:12px;color:var(--text-3);margin-bottom:12px;}
.qrcode-note i{color:var(--primary);margin-right:4px;}