/* ===== 基础 ===== */
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font: 14px/1.6 "Microsoft YaHei", "PingFang SC", Arial, sans-serif; color: #333; background: #f4f5fb; }
a { color: #333; text-decoration: none; }
a:hover { color: #5b5bd6; }
img { max-width: 100%; }
ul { list-style: none; }
input, select, textarea, button { font: inherit; color: inherit; outline: none; }
.container { width: 1160px; max-width: 96%; margin: 0 auto; }
.msg { padding: 10px 14px; border-radius: 8px; margin-bottom: 12px; font-size: 13px; }
.msg.ok { background: #e8f8f5; color: #0b8a76; border: 1px solid #b5ece3; }
.msg.error { background: #fef0ef; color: #d93025; border: 1px solid #f6c8c4; }

/* ===== 按钮 ===== */
.btn-primary { display: inline-block; background: #5b5bd6; color: #fff; border: 0; border-radius: 8px; padding: 9px 22px; cursor: pointer; }
.btn-primary:hover { background: #4747c8; color: #fff; }
.btn-plain { display: inline-block; background: #eef1f6; color: #555; border: 0; border-radius: 8px; padding: 9px 22px; cursor: pointer; }
.btn-ghost-dark { display: inline-block; border: 1px solid #dfe3f0; color: #666; border-radius: 8px; padding: 9px 22px; }
.btn-mini { display: inline-block; background: #5b5bd6; color: #fff; border: 0; border-radius: 6px; padding: 5px 14px; font-size: 13px; cursor: pointer; }
.btn-block { display: block; width: 100%; text-align: center; }
.link-danger { background: none; border: 0; color: #d93025; cursor: pointer; }

/* ===== 顶栏 ===== */
.header { background: #1d1f42; position: sticky; top: 0; z-index: 100; }
.header-inner { display: flex; align-items: center; height: 60px; }
.logo a { color: #fff; font-size: 20px; font-weight: 700; }
.logo a::before { content: "▣"; color: #7c7cf0; margin-right: 6px; }
.nav { display: flex; margin-left: 34px; }
.nav a { color: #c8caf0; padding: 20px 14px; }
.header-right { margin-left: auto; }

/* ===== Hero ===== */
.hero { background: linear-gradient(135deg, #1d1f42, #3b3f9e, #6d5bd6); color: #fff; padding: 60px 0; text-align: center; }
.hero h1 { font-size: 34px; }
.hero p { max-width: 640px; margin: 14px auto 0; color: #d5d7f5; }

/* ===== 演示卡片 ===== */
.demo-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; padding: 28px 0 50px; }
.demo-card { background: #fff; border-radius: 14px; overflow: hidden; box-shadow: 0 4px 18px rgba(60,60,140,.08); }
.demo-thumb { height: 150px; background: #eef0f8; overflow: hidden; }
.demo-thumb img { width: 100%; height: 100%; object-fit: cover; }
.thumb-placeholder { display: flex; align-items: center; justify-content: center; height: 100%; font-size: 40px; font-weight: 800; color: #fff; background: linear-gradient(135deg, #5b5bd6, #8f7cf0); }
.demo-body { padding: 18px 20px 22px; }
.demo-body h2 { font-size: 18px; color: #1d1f42; }
.demo-desc { color: #777; font-size: 13px; margin: 8px 0; min-height: 40px; }
.demo-tech { color: #999; font-size: 12px; margin-bottom: 14px; }
.demo-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.soon { color: #bbb; font-size: 13px; }

/* ===== 预览页 ===== */
.preview-bar { background: #1d1f42; color: #fff; padding: 12px 0; }
.preview-inner { display: flex; align-items: center; gap: 14px; }
.preview-inner strong { flex: 1; }
.preview-frame { width: 100%; height: calc(100vh - 130px); border: 0; background: #fff; }

/* ===== 页脚 ===== */
.footer { background: #1d1f42; color: #9a9cc4; text-align: center; padding: 26px 0; font-size: 12px; }
.footer .copy { margin-top: 6px; opacity: .7; }

/* ===== 后台 ===== */
.admin-body { background: #eef0f8; }
.admin-layout { display: flex; min-height: 100vh; }
.admin-side { width: 210px; background: #1d1f42; flex-shrink: 0; position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; }
.side-logo { padding: 20px 18px; border-bottom: 1px solid rgba(255,255,255,.08); }
.side-logo a { color: #fff; font-size: 15px; font-weight: 700; }
.side-logo small { display: block; color: #7f81b8; font-size: 12px; font-weight: 400; }
.side-menu { flex: 1; padding: 12px 0; }
.side-menu li a { display: block; color: #a8aadb; padding: 12px 20px; font-size: 14px; border-left: 3px solid transparent; }
.side-menu li a.on { color: #fff; background: rgba(124,124,240,.14); border-left-color: #7c7cf0; }
.side-extra { padding: 16px 20px; border-top: 1px solid rgba(255,255,255,.08); display: flex; flex-direction: column; gap: 8px; }
.side-extra a { color: #7f81b8; font-size: 13px; }
.admin-main { flex: 1; min-width: 0; }
.admin-top { background: #fff; height: 56px; display: flex; align-items: center; justify-content: space-between; padding: 0 22px; border-bottom: 1px solid #e8eaf5; }
.admin-top h2 { font-size: 16px; color: #1d1f42; }
.admin-name { color: #999; font-size: 13px; }
.admin-content { padding: 20px 22px 40px; }
.stat-cards { display: flex; gap: 14px; margin-bottom: 18px; }
.stat-card { background: #fff; border-radius: 12px; padding: 18px 26px; border-top: 3px solid #5b5bd6; }
.stat-card em { display: block; color: #999; font-style: normal; font-size: 13px; }
.stat-card strong { display: block; font-size: 24px; color: #1d1f42; margin-top: 6px; }
.panel { background: #fff; border-radius: 12px; padding: 18px; margin-bottom: 18px; }
.panel-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.panel-head h3 { font-size: 15px; color: #1d1f42; border-left: 4px solid #5b5bd6; padding-left: 9px; }
.toolbar { margin-bottom: 16px; }
.table { width: 100%; border-collapse: collapse; }
.table th { background: #fafafe; color: #666; text-align: left; padding: 10px 12px; font-size: 13px; border-bottom: 1px solid #eceef8; }
.table td { padding: 9px 12px; font-size: 13px; border-bottom: 1px solid #f3f4fa; }
.table tr:hover td { background: #fafafe; }
.td-ops { white-space: nowrap; }
.td-ops a { color: #5b5bd6; margin-right: 10px; }
.inline-form { display: inline; }
.tag { display: inline-block; background: #eef1f6; color: #777; padding: 2px 10px; border-radius: 12px; font-size: 12px; }
.tag.green { background: #e8f8f5; color: #0b8a76; }
.form-panel { background: #fff; border-radius: 12px; padding: 24px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-group label { display: block; color: #555; font-size: 13px; margin-bottom: 6px; }
.form-group input, .form-group select, .form-group textarea { width: 100%; border: 1px solid #dfe3f0; border-radius: 8px; padding: 9px 12px; }
.form-group.full { grid-column: 1 / -1; }
.form-actions { margin-top: 22px; display: flex; gap: 10px; }
.admin-login-body { background: linear-gradient(135deg, #1d1f42, #3b3f9e); min-height: 100vh; display: flex; align-items: center; justify-content: center; }
.admin-login-box { width: 380px; background: #fff; border-radius: 14px; padding: 34px; box-shadow: 0 12px 40px rgba(0,0,0,.3); }
.admin-login-box h1 { font-size: 19px; text-align: center; margin-bottom: 22px; color: #1d1f42; }
.admin-login-box label { display: block; color: #666; margin-bottom: 14px; }
.admin-login-box input { width: 100%; height: 42px; border: 1px solid #dfe3f0; border-radius: 8px; padding: 0 12px; margin-top: 6px; }
.admin-login-box p { text-align: center; margin-top: 16px; font-size: 13px; }
.admin-login-box p a { color: #5b5bd6; }

/* ===== 安装 ===== */
.install-body { background: linear-gradient(135deg, #1d1f42, #3b3f9e); min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 30px 10px; }
.install-box { width: 520px; max-width: 100%; background: #fff; border-radius: 14px; padding: 34px; box-shadow: 0 12px 40px rgba(0,0,0,.3); }
.install-box h1 { font-size: 21px; text-align: center; color: #1d1f42; margin-bottom: 24px; }
.install-box h2 { font-size: 15px; color: #1d1f42; margin: 20px 0 12px; border-left: 4px solid #5b5bd6; padding-left: 9px; }
.install-form label { display: block; color: #666; margin-bottom: 12px; font-size: 13px; }
.install-form input { width: 100%; height: 40px; border: 1px solid #dfe3f0; border-radius: 8px; padding: 0 12px; margin-top: 5px; }
.install-warn { background: #fff7e6; color: #ad6800; border: 1px solid #ffe1a8; padding: 10px 14px; border-radius: 8px; font-size: 13px; margin-bottom: 12px; }
.install-error { background: #fef0ef; color: #d93025; border: 1px solid #f6c8c4; padding: 10px 14px; border-radius: 8px; font-size: 13px; margin-bottom: 12px; }
.install-ok { text-align: center; }
.install-ok h2 { color: #0b8a76; margin-bottom: 12px; }
.install-ok p { color: #555; margin: 8px 0; }
@media (max-width: 760px) {
    .demo-grid { grid-template-columns: 1fr; }
}