/* i18InjectCode - 毛玻璃风格样式 */
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:'Inter',sans-serif;min-height:100vh;color:#0b1a33;line-height:1.5;background:linear-gradient(180deg,#d6e6ff 0%,#eef3fb 30%,#f7f9fd 60%,#fdfeff 100%)}

/* ===== 毛玻璃卡片 ===== */
.glass{background:rgba(240,246,255,0.6);backdrop-filter:blur(16px) saturate(180%);-webkit-backdrop-filter:blur(16px) saturate(180%);border:1px solid rgba(200,218,245,0.8);box-shadow:0 8px 32px rgba(0,20,60,0.06),0 2px 8px rgba(255,255,255,0.5);border-radius:24px}

/* ===== 侧边栏 ===== */
.sidebar{position:fixed;left:0;top:0;height:100vh;width:220px;background:rgba(240,246,255,0.65);backdrop-filter:blur(16px) saturate(180%);-webkit-backdrop-filter:blur(16px) saturate(180%);border-right:1px solid rgba(200,218,245,0.8);display:flex;flex-direction:column;z-index:100;padding:20px 0;overflow-y:auto}
.sidebar-logo{font-size:1.5rem;font-weight:700;color:#0b1a33;padding:0 24px 20px;letter-spacing:-0.5px}
.sidebar-nav{flex:1;display:flex;flex-direction:column;gap:2px;padding:0 12px}
.sidebar-link{display:block;padding:10px 16px;border-radius:12px;font-size:13px;font-weight:500;color:#1e293b;text-decoration:none;transition:all .2s}
.sidebar-link:hover{background:rgba(65,114,250,0.12);color:#4172fa}
.sidebar-link.active{background:rgba(65,114,250,0.15);color:#4172fa;font-weight:600}
.sidebar-logout{margin-top:auto;color:#909399}

/* ===== 主区域 ===== */
.main-area{margin-left:220px;padding:24px 32px;min-height:100vh;position:relative;z-index:1}

/* ===== 顶部栏 ===== */
.top-bar{display:flex;justify-content:space-between;align-items:center;padding:14px 24px;margin-bottom:24px;background:rgba(240,246,255,0.6);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid rgba(200,218,245,0.8);border-radius:10px;font-size:14px;color:#0b1a33}
.top-bar span{color:#1e3a5f}
.top-bar-info{display:flex;align-items:center;gap:20px;margin-bottom:8px;font-size:14px}

/* ===== 统计卡片 ===== */
.stat-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:16px;margin-bottom:24px}
.stat-card{background:rgba(240,246,255,0.6);backdrop-filter:blur(16px) saturate(180%);-webkit-backdrop-filter:blur(16px) saturate(180%);border:1px solid rgba(200,218,245,0.8);border-radius:20px;padding:22px 20px;box-shadow:0 4px 20px rgba(0,20,60,0.04);transition:all .25s}
.stat-card:hover{transform:translateY(-4px);box-shadow:0 12px 36px rgba(0,20,60,0.08)}
.stat-card .num{font-size:2rem;font-weight:700;color:#0b1a33;letter-spacing:-0.02em}
.stat-card .label{font-size:12px;color:#1e3a5f;margin-top:4px;opacity:0.7}

/* ===== 面板 ===== */
.panel{background:rgba(240,246,255,0.6);backdrop-filter:blur(16px) saturate(180%);-webkit-backdrop-filter:blur(16px) saturate(180%);border:1px solid rgba(200,218,245,0.8);border-radius:24px;padding:28px;margin-bottom:20px;box-shadow:0 4px 20px rgba(0,20,60,0.04)}
.panel h3{font-size:1.1rem;font-weight:600;color:#0b1a33;margin-bottom:18px;padding-bottom:14px;border-bottom:1px solid rgba(0,20,60,0.08)}

/* ===== 表格 ===== */
.table-wrap{overflow-x:auto;border-radius:16px}
.table-wrap table{width:100%;border-collapse:collapse;font-size:13px}
.table-wrap th{background:rgba(65,114,250,0.06);padding:12px 14px;text-align:left;font-weight:600;color:#0b1a33;border-bottom:1px solid rgba(0,20,60,0.08)}
.table-wrap td{padding:11px 14px;border-bottom:1px solid rgba(0,20,60,0.04);color:#1e3a5f}
.table-wrap tr:hover{background:rgba(65,114,250,0.04)}

/* ===== 标签 ===== */
.status-tag{display:inline-block;padding:2px 12px;border-radius:20px;font-size:11px;font-weight:500}
.tag-active{background:rgba(103,194,58,0.12);color:#67c23a}
.tag-unused{background:rgba(144,147,153,0.1);color:#909399}
.tag-banned{background:rgba(245,108,108,0.12);color:#f56c6c}
.tag-expired{background:rgba(230,162,60,0.12);color:#e6a23c}
.tag-pending{background:rgba(65,114,250,0.12);color:#4172fa}

/* ===== 搜索栏 ===== */
.search-bar{display:flex;gap:10px;margin-bottom:20px;align-items:center;flex-wrap:wrap}
.search-bar input,.search-bar select{padding:10px 16px;border:1px solid rgba(200,218,245,0.6);border-radius:10px;font-size:13px;outline:none;background:#fff;color:#0b1a33;transition:all .2s}
.search-bar input:focus,.search-bar select:focus{border-color:#4172fa;border-width:2px;background:rgba(255,255,255,0.7);box-shadow:0 0 0 5px rgba(65,114,250,0.2)}

/* ===== 分页 ===== */
.pagination{display:flex;justify-content:center;margin-top:24px;gap:4px}
.pagination a,.pagination span{display:inline-block;padding:8px 16px;border:1px solid rgba(255,255,255,0.6);border-radius:30px;font-size:13px;color:#1e3a5f;text-decoration:none;transition:all .2s;background:rgba(255,255,255,0.4)}
.pagination a:hover{background:rgba(65,114,250,0.1);border-color:rgba(65,114,250,0.3)}
.pagination .active{background:#4172fa;color:#fff;border-color:#4172fa;font-weight:600}
.pagination .disabled{color:#c0c4cc;cursor:not-allowed}

/* ===== 表单 ===== */
.form-group{margin-bottom:14px}
.form-group label{display:block;margin-bottom:5px;font-size:12px;font-weight:600;color:#0b1a33}
.form-group input,.form-group select,.form-group textarea{width:100%;padding:10px 16px;border:1px solid rgba(200,218,245,0.6);border-radius:10px;font-size:13px;outline:none;background:#fff;color:#0b1a33;box-sizing:border-box;transition:all .2s}
.form-group textarea{border-radius:16px;min-height:80px;resize:vertical}
.form-group input:focus,.form-group select:focus{border-color:#4172fa;border-width:2px;background:#fff}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}

/* 表单验证错误 */
.form-group.error input,.form-group.error select,.form-group.error textarea{border-color:#f56c6c!important;border-width:2px!important;background:#fff5f5!important}
.form-group.error .field-error{display:block!important}

/* ===== 标签页 ===== */
.tabs{display:flex;gap:0;margin-bottom:20px;overflow-x:auto}
.tab-item{padding:8px 20px;cursor:pointer;font-size:13px;font-weight:500;color:#1e3a5f;border-radius:30px;text-decoration:none;transition:all .2s;white-space:nowrap}
.tab-item:hover{background:rgba(65,114,250,0.08);color:#4172fa}
.tab-item.active{background:rgba(65,114,250,0.12);color:#4172fa;font-weight:600}

/* ===== 蓝色按钮 ===== */
.blue-btn{display:inline-flex;align-items:center;justify-content:center;cursor:pointer;height:40px;padding:0 20px;min-width:80px;border:1px solid rgba(51,100,237,.35);color:#fff;font-size:12px;font-weight:500;border-radius:8px;background:linear-gradient(180deg,#648cff,#4172fa);box-shadow:0 3px 4px 0 rgba(44,71,146,.32),inset 0 -2px 0 0 #3262e6;text-decoration:none;transition:all .15s;user-select:none}
.blue-btn:hover{background:linear-gradient(180deg,#5a7fff,#3262e6);box-shadow:0 4px 8px 0 rgba(44,71,146,.4),inset 0 -2px 0 0 #2852c4;transform:scale(.97);color:#fff}
.blue-btn:active{transform:scale(.94)}

/* ===== 白色按钮 ===== */
.white-btn{display:inline-flex;align-items:center;justify-content:center;cursor:pointer;height:40px;padding:0 20px;min-width:80px;background:linear-gradient(-180deg,#fff 8%,#f2f2f7 97%);border:1px solid #e9eaec;box-shadow:0 3px 4px 0 rgba(44,71,146,.20),inset 0 -2px 0 0 #e1e3e8;border-radius:8px;font-size:12px;font-weight:600;color:#3b426b;text-decoration:none;transition:all .15s;user-select:none}
.white-btn:hover{background:linear-gradient(-180deg,#f8f9fc 8%,#e8e9f0 97%);box-shadow:0 4px 8px 0 rgba(44,71,146,.25),inset 0 -2px 0 0 #d0d2d8;transform:scale(.97)}
.white-btn:active{transform:scale(.94)}

/* ===== 红色按钮 ===== */
.red-btn{display:inline-flex;align-items:center;justify-content:center;cursor:pointer;height:40px;padding:0 20px;min-width:80px;border:1px solid rgba(245,108,108,.35);color:#fff;font-size:12px;font-weight:500;border-radius:8px;background:linear-gradient(180deg,#f78989,#f56c6c);box-shadow:0 3px 4px 0 rgba(180,40,40,.25),inset 0 -2px 0 0 #e05555;text-decoration:none;transition:all .15s;user-select:none}
.red-btn:hover{background:linear-gradient(180deg,#f07070,#e05555);transform:scale(.97);color:#fff}
.red-btn:active{transform:scale(.94)}

/* ===== 绿色按钮(浅蓝) ===== */
.green-btn{display:inline-flex;align-items:center;justify-content:center;cursor:pointer;height:40px;padding:0 20px;min-width:80px;border:1px solid rgba(65,114,250,.25);color:#fff;font-size:12px;font-weight:500;border-radius:8px;background:linear-gradient(180deg,#7eb8ff,#5a9cfc);box-shadow:0 3px 4px 0 rgba(40,80,160,.22),inset 0 -2px 0 0 #488ae0;text-decoration:none;transition:all .15s;user-select:none}
.green-btn:hover{background:linear-gradient(180deg,#6da8ff,#488ae0);transform:scale(.97);color:#fff}
.green-btn:active{transform:scale(.94)}

/* ===== 模态框 ===== */
.modal{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,20,60,0.35);backdrop-filter:blur(4px);z-index:1000;align-items:center;justify-content:center}
.modal.show{display:flex}
.modal-content{background:rgba(255,255,255,0.95);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-radius:24px;padding:32px;width:520px;max-width:92vw;max-height:94vh;overflow-y:visible;border:1px solid rgba(255,255,255,0.8);box-shadow:0 16px 56px rgba(0,20,60,0.12);animation:flipIn .35s ease}
.modal-header{font-size:1.1rem;font-weight:700;color:#0b1a33;margin-bottom:20px}
@keyframes flipIn{from{opacity:0;transform:perspective(400px) rotateX(-90deg)}to{opacity:1;transform:perspective(400px) rotateX(0)}}

.field-error{display:none;color:#f56c6c;font-size:11px;margin-top:4px}.field-error.show{display:block}

@media(max-width:768px){
.sidebar{width:60px;padding:16px 8px}
.sidebar-logo{font-size:0;padding:0 0 12px}
.sidebar-logo::after{content:'i18';font-size:13px;font-weight:700}
.sidebar-link{padding:10px 8px;font-size:0;text-align:center}
.sidebar-link::first-letter{font-size:16px}
.main-area{margin-left:60px;padding:16px}
.form-row{grid-template-columns:1fr}
.stat-cards{grid-template-columns:repeat(2,1fr)}
}


/* ===== From view/index/index.html ===== */
.container{max-width:1200px;margin:0 auto;padding:0 32px}

/* 导航 */
.navbar{display:flex;justify-content:space-between;align-items:center;padding:14px 28px;margin:20px 0 16px;background:rgba(240,246,255,0.65);backdrop-filter:blur(14px) saturate(180%);-webkit-backdrop-filter:blur(14px) saturate(180%);border:1px solid rgba(200,218,245,0.8);border-radius:80px;box-shadow:0 4px 20px rgba(0,20,60,0.04)}
.logo{font-size:1.6rem;font-weight:700;color:#0b1a33;letter-spacing:-0.5px}
.logo span{color:#4172fa}
.nav-links{display:flex;gap:24px;align-items:center}
.nav-links a{text-decoration:none;color:#1e293b;font-size:14px;font-weight:500;transition:.2s}
.nav-links a:hover{color:#4172fa}

/* 毛玻璃卡片 */
.glass{background:rgba(240,246,255,0.65);backdrop-filter:blur(16px) saturate(180%);-webkit-backdrop-filter:blur(16px) saturate(180%);border:1px solid rgba(200,218,245,0.8);border-radius:24px;padding:40px;box-shadow:0 8px 32px rgba(0,20,60,0.06)}

/* Hero */
.hero{padding:60px 0 40px;text-align:center}
.hero h1{font-size:2.8rem;font-weight:700;letter-spacing:-0.03em;color:#0b1a33}
.hero p{font-size:1.1rem;color:#1e3a5f;max-width:600px;margin:16px auto 32px;opacity:0.8}

/* 功能卡片 */
.features{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin:40px 0}
.feature-card{background:rgba(240,246,255,0.65);backdrop-filter:blur(16px) saturate(180%);-webkit-backdrop-filter:blur(16px) saturate(180%);border:1px solid rgba(200,218,245,0.8);border-radius:20px;padding:28px 24px;box-shadow:0 4px 20px rgba(0,20,60,0.04);transition:.25s}
.feature-card:hover{transform:translateY(-6px);box-shadow:0 12px 36px rgba(0,20,60,0.08)}
.feature-card .icon{font-size:2rem;margin-bottom:12px}
.feature-card h3{font-size:1.1rem;font-weight:600;margin-bottom:6px}
.feature-card p{font-size:13px;color:#1e3a5f;opacity:0.8}

/* 数据条 */
.stats{display:flex;justify-content:space-around;flex-wrap:wrap;margin:40px 0;gap:24px}
.stats{background:rgba(240,246,255,0.55);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid rgba(200,218,245,0.8);border-radius:48px;padding:48px 40px}
.stat-item{text-align:center}
.stat-number{font-size:2.4rem;font-weight:700;letter-spacing:-0.02em}
.stat-label{color:#1e3a5f;font-size:14px;margin-top:4px;opacity:0.7}

/* CTA */
.cta{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:24px;margin:40px 0;padding:48px 40px}
.cta h2{font-size:1.8rem;font-weight:700}
.cta p{color:#1e3a5f;opacity:0.8;max-width:400px;margin-top:8px}
.cta-btns{display:flex;gap:16px}

.footer{border-top:1px solid rgba(255,255,255,0.5);padding:24px 0;margin-top:40px;color:#1e3a5f;display:flex;justify-content:space-between;flex-wrap:wrap;gap:16px;font-size:13px;opacity:0.7}

@media(max-width:768px){
.features{grid-template-columns:1fr 1fr}
.hero h1{font-size:2rem}
.stats{flex-direction:column;gap:20px}
}
@media(max-width:480px){
.features{grid-template-columns:1fr}
}

/* ===== 登录/注册/独立页面共享 ===== */
body.login-body{font-family:'Inter',sans-serif;min-height:100vh;display:flex;align-items:center;justify-content:center;color:#0b1a33;background:linear-gradient(180deg,#d6e6ff 0%,#eef3fb 30%,#f7f9fd 60%,#fdfeff 100%)}
.login-box{width:400px;max-width:92vw;background:rgba(240,246,255,0.7);backdrop-filter:blur(16px) saturate(180%);-webkit-backdrop-filter:blur(16px) saturate(180%);border:1px solid rgba(200,218,245,0.8);border-radius:24px;padding:40px 36px;box-shadow:0 8px 32px rgba(0,20,60,0.06),0 2px 8px rgba(255,255,255,0.5)}
.login-box h2{font-size:1.6rem;font-weight:700;color:#0b1a33;margin-bottom:28px;text-align:center;letter-spacing:-0.5px}
.login-error{background:rgba(245,108,108,0.12);color:#f56c6c;padding:10px 16px;border-radius:12px;font-size:13px;margin-bottom:16px;text-align:center}
.login-links{text-align:center;margin-top:16px;font-size:12px}
.login-links a{color:#1e3a5f;text-decoration:none;margin:0 8px;opacity:0.6;transition:.2s}
.login-links a:hover{opacity:1;color:#4172fa}
/* 登录页表单覆盖（面板form-group在header已定义，这里覆盖数值） */
body.login-body .form-group{margin-bottom:16px}
body.login-body .form-group label{font-size:12px;font-weight:600;margin-bottom:5px}
body.login-body .form-group input{padding:12px 18px;font-size:14px}
/* 通用登录按钮（蓝） */
.login-btn{display:inline-flex;align-items:center;justify-content:center;width:100%;cursor:pointer;height:48px;padding:0 20px;border:1px solid rgba(51,100,237,.35);color:#fff;font-size:14px;font-weight:600;border-radius:8px;background:linear-gradient(180deg,#648cff,#4172fa);box-shadow:0 3px 4px 0 rgba(44,71,146,.32),inset 0 -2px 0 0 #3262e6;letter-spacing:.5px;transition:all .15s;user-select:none}
.login-btn:hover{background:linear-gradient(180deg,#5a7fff,#3262e6);box-shadow:0 4px 8px 0 rgba(44,71,146,.4);transform:scale(.97)}
.login-btn:active{transform:scale(.94)}
/* 开发者登录按钮（绿） */
body.agent-page .login-btn{border-color:rgba(103,194,58,.35);background:linear-gradient(180deg,#7dd84a,#67c23a);box-shadow:0 3px 4px 0 rgba(60,130,30,.25),inset 0 -2px 0 0 #55a830}
body.agent-page .login-btn:hover{background:linear-gradient(180deg,#6cc83a,#55a830)}

/* ===== 后端验证页 ===== */
body.backend-page .card{width:420px;max-width:92vw;background:rgba(240,246,255,0.7);backdrop-filter:blur(16px) saturate(180%);-webkit-backdrop-filter:blur(16px) saturate(180%);border:1px solid rgba(200,218,245,0.8);border-radius:24px;padding:40px 36px;box-shadow:0 8px 32px rgba(0,20,60,0.06);text-align:center}
body.backend-page .card h2{font-size:1.5rem;font-weight:700;margin-bottom:8px;letter-spacing:-0.5px}
body.backend-page .card p{color:#1e3a5f;font-size:14px;margin-bottom:24px;opacity:0.7}
body.backend-page .card input{width:100%;padding:12px 18px;border:1px solid rgba(200,218,245,0.6);border-radius:10px;font-size:14px;background:#fff;color:#0b1a33;outline:none;transition:.2s;text-align:center;box-sizing:border-box}
body.backend-page .card input:focus{border-color:#4172fa;border-width:2px;background:rgba(255,255,255,0.7);box-shadow:0 0 0 5px rgba(65,114,250,0.2)}
body.backend-page .btn{display:inline-flex;align-items:center;justify-content:center;cursor:pointer;width:100%;height:46px;border:1px solid rgba(51,100,237,.35);color:#fff;font-size:14px;font-weight:600;border-radius:8px;background:linear-gradient(180deg,#648cff,#4172fa);box-shadow:0 3px 4px 0 rgba(44,71,146,.32),inset 0 -2px 0 0 #3262e6;text-decoration:none;transition:.15s;user-select:none}
body.backend-page .btn:hover{transform:scale(.97)}
.error-msg{color:#f56c6c;font-size:13px;margin-bottom:16px;background:rgba(245,108,108,0.1);padding:10px 16px;border-radius:12px}

/* ===== 安装向导 ===== */
body.install-page .card{width:640px;max-width:94vw;background:rgba(240,246,255,0.7);backdrop-filter:blur(16px) saturate(180%);-webkit-backdrop-filter:blur(16px) saturate(180%);border:1px solid rgba(200,218,245,0.8);border-radius:24px;padding:40px;box-shadow:0 8px 32px rgba(0,20,60,0.06)}
body.install-page .card h2{font-size:1.5rem;font-weight:700;margin-bottom:8px;letter-spacing:-0.5px}
body.install-page .card .sub{color:#1e3a5f;font-size:14px;margin-bottom:24px;opacity:0.7}
body.install-page .btn{display:inline-flex;align-items:center;justify-content:center;cursor:pointer;height:44px;padding:0 24px;border:1px solid rgba(51,100,237,.35);color:#fff;font-size:13px;font-weight:500;border-radius:8px;background:linear-gradient(180deg,#648cff,#4172fa);box-shadow:0 3px 4px 0 rgba(44,71,146,.32),inset 0 -2px 0 0 #3262e6;text-decoration:none;transition:.15s}
body.install-page .btn:hover{transform:scale(.97)}
body.install-page .btn:disabled{opacity:.5;cursor:not-allowed;transform:none}
.steps{display:flex;gap:0;margin-bottom:24px}
.step{flex:1;text-align:center;font-size:12px;font-weight:600;color:#c0c4cc;padding:8px 0;border-bottom:3px solid #e4e7ed;transition:.2s}
.step.active{color:#4172fa;border-color:#4172fa}
.step.done{color:#67c23a;border-color:#67c23a}
.check-grid{display:grid;gap:8px;margin-bottom:20px}
.check-item{display:flex;justify-content:space-between;align-items:center;padding:10px 16px;background:rgba(255,255,255,0.4);border-radius:12px;font-size:13px}
.check-pass{color:#67c23a;font-weight:600}
.check-fail{color:#f56c6c;font-weight:600}
.success-msg{color:#67c23a;font-size:13px;margin-bottom:12px;background:rgba(103,194,58,0.1);padding:10px 16px;border-radius:12px}