/* AI 客服用户中心 - 玻璃拟态风格（与管理后台同一设计语言） */
* { box-sizing: border-box; margin: 0; padding: 0; }

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
    background: linear-gradient(160deg, #0b0b1a 0%, #141432 55%, #0d0d24 100%);
    color: #e7e9ff;
    min-height: 100vh;
}

.bg-orb { position: fixed; border-radius: 50%; filter: blur(100px); opacity: .4; pointer-events: none; z-index: 0; }
.orb1 { width: 44vw; height: 44vw; min-width: 320px; min-height: 320px; background: #4f46e5; top: -14vw; left: -10vw; }
.orb2 { width: 38vw; height: 38vw; min-width: 280px; min-height: 280px; background: #7c3aed; bottom: -12vw; right: -8vw; }

.glass {
    background: rgba(255, 255, 255, .06);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, .12);
    box-shadow: 0 8px 32px rgba(0, 0, 0, .35);
}

.topbar {
    position: sticky; top: 0; z-index: 50;
    background: rgba(13, 13, 32, .75);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid rgba(255, 255, 255, .1);
}
.topbar-inner {
    max-width: 960px; margin: 0 auto; padding: 14px 20px;
    display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
}
.brand { display: flex; align-items: center; gap: 10px; color: #fff; text-decoration: none; font-size: 17px; font-weight: 700; letter-spacing: .5px; }
.brand-dot {
    width: 34px; height: 34px; border-radius: 11px; flex: none;
    background: linear-gradient(135deg, #6366f1, #a855f7);
    display: flex; align-items: center; justify-content: center;
    font-size: 13px; box-shadow: 0 4px 14px rgba(124, 58, 237, .5);
}
.nav { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.nav a {
    color: #b6b9e6; text-decoration: none; font-size: 14px;
    padding: 7px 13px; border-radius: 10px; transition: all .2s;
}
.nav a:hover { background: rgba(255, 255, 255, .1); color: #fff; }

.wrap { position: relative; z-index: 1; max-width: 960px; margin: 0 auto; padding: 28px 20px 40px; animation: rise .4s ease both; }
.foot { position: relative; z-index: 1; text-align: center; color: #565a86; font-size: 12px; padding: 0 20px 24px; }

.page-title { font-size: 22px; font-weight: 700; margin-bottom: 6px; }
.page-desc { color: #8f93c4; font-size: 14px; margin-bottom: 22px; line-height: 1.7; }

.card { border-radius: 18px; padding: 24px; }
.card + .card { margin-top: 18px; }
.card h3 { font-size: 16px; margin-bottom: 14px; display: flex; align-items: center; gap: 8px; }
.card h3 .ico { font-size: 18px; }

.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    border: none; cursor: pointer; text-decoration: none;
    border-radius: 11px; padding: 10px 20px; font-size: 14px; font-weight: 600;
    transition: all .2s; color: #fff; font-family: inherit;
}
.btn.primary { background: linear-gradient(135deg, #4f46e5, #a855f7); box-shadow: 0 4px 14px rgba(99, 102, 241, .4); }
.btn.primary:hover { transform: translateY(-1px); box-shadow: 0 7px 20px rgba(124, 58, 237, .55); }
.btn.ghost { background: transparent; border: 1px solid rgba(255, 255, 255, .18); color: #b6b9e6; }
.btn.ghost:hover { background: rgba(255, 255, 255, .08); color: #fff; }
.btn.sm { padding: 6px 13px; font-size: 13px; border-radius: 9px; }

.field { margin-bottom: 18px; }
.field label { display: block; font-size: 14px; font-weight: 600; margin-bottom: 8px; color: #d3d6f5; }
.field label .req { color: #f472b6; margin-left: 3px; }
.field input[type="text"], .field input[type="password"], .field textarea {
    width: 100%; padding: 12px 14px; font-size: 14px; font-family: inherit;
    background: rgba(255, 255, 255, .06); color: #eef0ff;
    border: 1px solid rgba(255, 255, 255, .14); border-radius: 12px; outline: none;
    transition: border .2s, box-shadow .2s;
}
.field textarea { min-height: 120px; resize: vertical; line-height: 1.7; }
.field input:focus, .field textarea:focus {
    border-color: #818cf8; box-shadow: 0 0 0 3px rgba(99, 102, 241, .25);
}
.field .hint { color: #7d81b0; font-size: 12px; margin-top: 7px; line-height: 1.6; }
.check { display: flex; align-items: center; gap: 9px; cursor: pointer; user-select: none; }
.check input { width: 17px; height: 17px; accent-color: #7c3aed; }
.check span { font-size: 14px; }
.form-actions { display: flex; gap: 10px; margin-top: 22px; flex-wrap: wrap; }

.alert { border-radius: 14px; padding: 14px 18px; font-size: 14px; margin-bottom: 20px; line-height: 1.7; }
.alert-error { background: rgba(239, 68, 68, .14); border: 1px solid rgba(239, 68, 68, .35); color: #fecaca; }
.alert-success { background: rgba(52, 211, 153, .12); border: 1px solid rgba(52, 211, 153, .32); color: #a7f3d0; }
.alert-warn { background: rgba(245, 158, 11, .14); border: 1px solid rgba(245, 158, 11, .4); color: #fde68a; }

.auth-wrap { min-height: calc(100vh - 62px); display: flex; align-items: center; justify-content: center; padding: 30px 20px; position: relative; z-index: 1; }
.auth-card { width: 100%; max-width: 420px; border-radius: 22px; padding: 36px 32px; animation: rise .45s ease both; }
.auth-brand { display: flex; flex-direction: column; align-items: center; gap: 12px; margin-bottom: 26px; text-align: center; }
.auth-title { font-size: 20px; font-weight: 700; }
.auth-sub { color: #8f93c4; font-size: 13px; line-height: 1.6; }

/* 状态卡 */
.dash-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; margin-bottom: 18px; }
.stat-card { border-radius: 16px; padding: 18px 20px; }
.stat-card .k { color: #8f93c4; font-size: 13px; margin-bottom: 8px; }
.stat-card .v { font-size: 18px; font-weight: 700; word-break: break-all; line-height: 1.5; }
.stat-card .v.mono { font-family: Consolas, Monaco, monospace; font-size: 16px; letter-spacing: 1px; }
.stat-card .sub { color: #7d81b0; font-size: 12px; margin-top: 6px; }

.badge {
    display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 600;
}
.badge.green { background: rgba(52, 211, 153, .14); color: #6ee7b7; border: 1px solid rgba(52, 211, 153, .35); }
.badge.gray { background: rgba(255,255,255,.08); color: #b6b9e6; border: 1px solid rgba(255,255,255,.15); }
.badge.red { background: rgba(239, 68, 68, .16); color: #fca5a5; border: 1px solid rgba(239, 68, 68, .4); }
.badge.orange { background: rgba(245, 158, 11, .15); color: #fcd34d; border: 1px solid rgba(245, 158, 11, .4); }

/* 访问链接盒 */
.link-box {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    background: rgba(0,0,0,.25); border: 1px solid rgba(255,255,255,.1);
    border-radius: 12px; padding: 12px 14px;
}
.link-box .url {
    flex: 1; min-width: 200px; color: #93c5fd; text-decoration: none;
    font-size: 14px; word-break: break-all; font-family: Consolas, Monaco, monospace;
}
.link-box .url:hover { text-decoration: underline; }

/* 主题单选 */
.theme-list { display: grid; grid-template-columns: 1fr; gap: 6px; }
.theme-option {
    display: flex; align-items: center; gap: 10px; padding: 10px 13px;
    border: 1px solid rgba(255,255,255,.12); border-radius: 11px; cursor: pointer;
    transition: all .15s; background: rgba(255,255,255,.04);
}
.theme-option:hover { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.22); }
.theme-option input { accent-color: #7c3aed; width: 16px; height: 16px; flex: none; }
.theme-option .emoji { font-size: 20px; }
.theme-option .meta { flex: 1; min-width: 0; }
.theme-option .t-name { font-size: 14px; font-weight: 600; }
.theme-option .t-desc { font-size: 12px; color: #7d81b0; margin-top: 2px; }
.theme-option.selected { background: rgba(99,102,241,.16); border-color: #818cf8; }
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
@media (max-width: 640px) { .two-col { grid-template-columns: 1fr; } }

@keyframes rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

@media (max-width: 640px) {
    .card { padding: 18px 16px; }
    .topbar-inner { padding: 12px 14px; }
    .wrap { padding: 20px 14px 32px; }
}