/* ===== Freecafe 控制台补充样式（小猫娘追加，国际化专业风） ===== */

/* 顶部大标题区 */
.hero { text-align:center; padding:60px 20px 30px; }
.hero h1 { font-size:42px; margin:0 0 10px; font-weight:700; }
.hero .sub { color:#666; font-size:16px; }
.hero-btns { margin-top:24px; }
.btn-primary, .btn-ghost {
    display:inline-block; padding:12px 28px; margin:0 8px; border-radius:8px;
    font-size:15px; cursor:pointer; border:1px solid transparent; text-decoration:none;
}
.btn-primary { background:#2c7be5; color:#fff; }
.btn-primary:hover { background:#1a68d1; }
.btn-ghost { background:#fff; color:#2c7be5; border-color:#2c7be5; }
.btn-ghost:hover { background:#eef4ff; }

/* 汉堡菜单 + 侧边栏 */
.hamburger {
    display:none; position:fixed; top:12px; left:12px; z-index:1200;
    background:#2c3e50; color:#fff; border:none; padding:10px 14px; border-radius:6px; font-size:18px;
}
.sidebar {
    width:230px; position:fixed; top:0; left:0; bottom:0; background:#2c3e50; color:#cfd8e3;
    padding-top:20px; overflow-y:auto; transition:transform .25s ease;
}
.sidebar h3 { color:#fff; font-size:14px; padding:0 20px; margin:18px 0 8px; opacity:.7; letter-spacing:1px; }
.sidebar ul { list-style:none; padding:0; margin:0; }
.sidebar li {
    padding:12px 20px; cursor:pointer; font-size:14px; border-left:3px solid transparent;
}
.sidebar li:hover, .sidebar li.active { background:#34495e; border-left-color:#2c7be5; color:#fff; }
.content { margin-left:230px; padding:24px; min-height:100vh; background:#f5f7fa; }
@media(max-width:768px){
    .sidebar{ transform:translateX(-100%); z-index:1100; }
    .sidebar.open{ transform:translateX(0); }
    .hamburger{ display:block; }
    .content{ margin-left:0; }
}

/* 横幅大通栏 */
.banner {
    background:linear-gradient(120deg,#2c7be5,#5b8def); color:#fff; border-radius:12px;
    padding:24px 28px; margin-bottom:24px; display:flex; align-items:center; gap:16px;
}
.banner .face { font-size:40px; line-height:1; }
.banner h2 { margin:0 0 6px; font-size:20px; }
.banner .meta { font-size:13px; opacity:.9; }
.banner .lv { background:rgba(255,255,255,.2); padding:2px 10px; border-radius:20px; font-size:12px; margin-left:8px; }

/* 卡片网格 */
.cards { display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:16px; margin-bottom:28px; }
.card {
    background:#fff; border-radius:10px; padding:18px; box-shadow:0 1px 3px rgba(0,0,0,.08);
    cursor:pointer; transition:transform .15s, box-shadow .15s;
}
.card:hover { transform:translateY(-3px); box-shadow:0 4px 12px rgba(0,0,0,.12); }
.card .num { font-size:28px; font-weight:700; color:#2c7be5; }
.card .label { color:#666; font-size:13px; margin-top:4px; }

/* 统计块 */
.stats { display:grid; grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:16px; margin-bottom:28px; }
.stat { background:#fff; border-radius:10px; padding:18px; text-align:center; box-shadow:0 1px 3px rgba(0,0,0,.08); }
.stat .num { font-size:26px; font-weight:700; }
.stat .label { color:#888; font-size:13px; margin-top:4px; }

/* 消息列表 */
.msg-list { background:#fff; border-radius:10px; padding:8px 0; box-shadow:0 1px 3px rgba(0,0,0,.08); }
.msg-item { padding:14px 20px; border-bottom:1px solid #f0f0f0; display:flex; gap:10px; align-items:flex-start; }
.msg-item:last-child { border-bottom:none; }
.msg-item .tag { background:#2c7be5; color:#fff; font-size:11px; padding:2px 8px; border-radius:4px; white-space:nowrap; }
.msg-item .tag.new { background:#e74c3c; }
.msg-item .body { flex:1; }
.msg-item .body .t { font-size:14px; font-weight:600; }
.msg-item .body .time { font-size:12px; color:#999; }

/* 多步骤注册流程 */
.step-bar { display:flex; gap:8px; margin:20px 0; }
.step-bar .step { flex:1; text-align:center; padding:10px; background:#fff; border-radius:8px; color:#999; font-size:13px; }
.step-bar .step.active { background:#2c7be5; color:#fff; }
.step-bar .step.done { background:#5b8def; color:#fff; }
.panel { background:#fff; border-radius:10px; padding:24px; box-shadow:0 1px 3px rgba(0,0,0,.08); max-width:680px; }
.panel h3 { margin-top:0; }
.panel input, .panel textarea, .panel select {
    width:100%; padding:10px 12px; margin:8px 0 16px; border:1px solid #ddd; border-radius:6px; font-size:14px; box-sizing:border-box;
}
.panel .agree { font-size:13px; color:#555; line-height:1.7; max-height:260px; overflow-y:auto; border:1px solid #eee; padding:12px; border-radius:6px; }
.modal-mask { display:none; position:fixed; inset:0; background:rgba(0,0,0,.5); z-index:2000; }
.modal-mask .modal { background:#fff; padding:24px; width:340px; margin:120px auto; border-radius:10px; }
.section-title { font-size:16px; font-weight:700; margin:0 0 12px; color:#333; }