/* ========== 基础 ========== */
* { margin:0; padding:0; box-sizing:border-box; }
html,body { height:100%; }
body {
  font-family: "Microsoft YaHei", "PingFang SC", "Helvetica Neue", Arial, sans-serif;
  font-size:14px; color:#333; background:#f5f7fa;
  display:flex; flex-direction:column; min-height:100vh;
}
a { color:#1E9FFF; text-decoration:none; }
a:hover { color:#0d8de8; }
img { max-width:100%; border:0; }
.container { width:100%; max-width:1200px; margin:0 auto; padding:0 15px; }
.clearfix:after { content:""; display:block; clear:both; }

/* ========== 顶部导航（天蓝色） ========== */
.topbar {
  background:linear-gradient(135deg,#29B6F6 0%,#1E9FFF 100%);
  box-shadow:0 2px 8px rgba(30,159,255,.25);
  position:sticky; top:0; z-index:100;
}
.nav-inner { display:flex; align-items:center; height:60px; }
.logo { display:flex; align-items:center; height:60px; }
.logo img { max-height:40px; max-width:200px; display:block; }
.nav-links { display:flex; align-items:center; margin-left:auto; list-style:none; }
.nav-links li { position:relative; }
.nav-links > li > a {
  display:block; padding:0 16px; line-height:60px; color:#fff; font-size:15px;
  transition:background .2s;
}
.nav-links > li > a:hover, .nav-links > li > a.active { background:rgba(255,255,255,.15); color:#fff; }
.nav-links .btn-nav {
  margin-left:10px; padding:0 18px; line-height:34px; border-radius:17px;
  background:#fff; color:#1E9FFF; font-weight:bold;
}
.nav-links .btn-nav:hover { background:#eaf6ff; color:#0d8de8; }
.nav-links .btn-nav.ghost { background:transparent; color:#fff; border:1px solid rgba(255,255,255,.7); }
.nav-links .btn-nav.ghost:hover { background:rgba(255,255,255,.15); }
.hamburger { display:none; margin-left:auto; width:40px; height:40px; cursor:pointer; padding:8px 5px; }
.hamburger span { display:block; height:3px; background:#fff; margin:5px 0; border-radius:2px; }

@media (max-width:768px){
  .hamburger { display:block; }
  .nav-links {
    display:none; position:absolute; top:60px; left:0; right:0;
    background:linear-gradient(135deg,#29B6F6 0%,#1E9FFF 100%);
    flex-direction:column; align-items:stretch; box-shadow:0 6px 12px rgba(0,0,0,.15);
  }
  .nav-links.open { display:flex; }
  .nav-links > li > a { text-align:center; padding:0; }
  .nav-links .btn-nav { margin:8px 15px; text-align:center; line-height:38px; }
}

/* ========== 按钮 ========== */
.btn {
  display:inline-block; padding:9px 22px; border-radius:4px; border:1px solid transparent;
  cursor:pointer; font-size:14px; line-height:1.4; transition:all .2s; background:#fff; color:#333;
  border-color:#dcdfe6;
}
.btn:hover { opacity:.9; }
.btn-primary { background:linear-gradient(135deg,#29B6F6,#1E9FFF); color:#fff; border-color:transparent; }
.btn-danger { background:#f56c6c; color:#fff; border-color:transparent; }
.btn-success { background:#52c41a; color:#fff; border-color:transparent; }
.btn-warning { background:#faad14; color:#fff; border-color:transparent; }
.btn-sm { padding:5px 12px; font-size:12px; }
.btn-block { display:block; width:100%; text-align:center; }
.btn[disabled] { opacity:.5; cursor:not-allowed; }

/* ========== 徽章 ========== */
.badge { display:inline-block; padding:3px 10px; border-radius:10px; font-size:12px; }
.badge-success { background:#f0f9eb; color:#52c41a; }
.badge-warning { background:#fdf6ec; color:#e6a23c; }
.badge-danger { background:#fef0f0; color:#f56c6c; }
.badge-info { background:#ecf5ff; color:#1E9FFF; }
.badge-default { background:#f4f4f5; color:#909399; }

/* ========== 卡片 ========== */
.card { background:#fff; border-radius:8px; box-shadow:0 1px 4px rgba(0,0,0,.06); padding:20px; margin-bottom:20px; }
.card-title { font-size:16px; font-weight:bold; margin-bottom:15px; padding-bottom:12px; border-bottom:1px solid #f0f0f0; color:#333; }

/* ========== 表单 ========== */
.form-group { margin-bottom:16px; }
.form-group label { display:block; margin-bottom:6px; color:#555; font-size:14px; }
.form-control {
  width:100%; padding:10px 12px; border:1px solid #dcdfe6; border-radius:4px; font-size:14px;
  transition:border-color .2s; background:#fff;
}
.form-control:focus { border-color:#1E9FFF; outline:none; }
textarea.form-control { min-height:120px; resize:vertical; }
.form-inline { display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
.form-inline .form-control { width:auto; }

/* ========== 表格 ========== */
.table-wrap { overflow-x:auto; }
table.table { width:100%; border-collapse:collapse; background:#fff; }
table.table th, table.table td { padding:12px 10px; text-align:left; border-bottom:1px solid #f0f0f0; font-size:14px; white-space:nowrap; }
table.table th { background:#fafbfc; color:#666; font-weight:bold; }
table.table tr:hover td { background:#f8fbff; }

/* ========== 分页 ========== */
.pagination { margin-top:15px; text-align:center; }
.pagination a {
  display:inline-block; padding:6px 12px; margin:0 3px; background:#fff; border:1px solid #e4e7ed;
  border-radius:4px; color:#606266;
}
.pagination a.active, .pagination a:hover { background:#1E9FFF; color:#fff; border-color:#1E9FFF; }

/* ========== 居中提示弹窗 ========== */
.msg-mask {
  position:fixed; inset:0; background:rgba(0,0,0,.35); z-index:9999;
  display:flex; align-items:center; justify-content:center;
}
.msg-box {
  background:#fff; border-radius:10px; padding:35px 45px; min-width:280px; max-width:85%;
  text-align:center; box-shadow:0 8px 30px rgba(0,0,0,.2); animation:msgIn .25s ease;
}
.msg-icon { font-size:42px; color:#1E9FFF; margin-bottom:12px; }
.msg-text { font-size:16px; color:#333; margin-bottom:20px; font-weight:bold; }
@keyframes msgIn { from { transform:scale(.85); opacity:0; } to { transform:scale(1); opacity:1; } }

/* ========== 首页 ========== */
.hero {
  background:linear-gradient(135deg,#29B6F6 0%,#1E9FFF 60%,#0d8de8 100%);
  color:#fff; padding:70px 0 90px; text-align:center;
}
.hero h1 { font-size:36px; margin-bottom:15px; }
.hero p { font-size:16px; opacity:.92; margin-bottom:30px; }
.hero .btn { margin:0 8px; padding:12px 36px; font-size:16px; border-radius:25px; }
.section { padding:45px 0; }
.section-title { text-align:center; font-size:26px; margin-bottom:8px; color:#222; }
.section-desc { text-align:center; color:#888; margin-bottom:35px; }

.product-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:18px; }
.product-card {
  background:#fff; border-radius:8px; padding:22px; box-shadow:0 1px 4px rgba(0,0,0,.06);
  transition:all .25s; border-top:3px solid transparent; display:block; color:#333;
}
.product-card:hover { transform:translateY(-4px); box-shadow:0 8px 20px rgba(30,159,255,.18); border-top-color:#1E9FFF; }
.product-card h3 { font-size:17px; margin-bottom:8px; }
.product-card .tag {
  display:inline-block; background:#ecf5ff; color:#1E9FFF; font-size:12px;
  padding:2px 10px; border-radius:10px; margin-bottom:10px;
}
.product-card .desc { color:#888; font-size:13px; min-height:40px; line-height:1.6; }
.product-card .price { margin-top:12px; color:#f56c6c; font-size:20px; font-weight:bold; }
.product-card .price small { font-size:12px; color:#999; font-weight:normal; }

.news-cols { display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:20px; }
.news-list { list-style:none; }
.news-list li { padding:10px 0; border-bottom:1px dashed #eee; display:flex; justify-content:space-between; }
.news-list li a { color:#444; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:75%; }
.news-list li a:hover { color:#1E9FFF; }
.news-list li span { color:#aaa; font-size:13px; }

/* ========== 页脚 ========== */
.footer { background:#2b3a4a; color:#9fb3c8; padding:40px 0 25px; margin-top:auto; }
.footer-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:25px; margin-bottom:25px; }
.footer h4 { color:#fff; font-size:15px; margin-bottom:14px; }
.footer a { color:#9fb3c8; display:block; padding:4px 0; }
.footer a:hover { color:#fff; }
.footer-bottom { text-align:center; border-top:1px solid rgba(255,255,255,.08); padding-top:18px; font-size:13px; }

/* ========== 面包屑/页头 ========== */
.page-head { background:linear-gradient(135deg,#29B6F6,#1E9FFF); color:#fff; padding:35px 0; }
.page-head h1 { font-size:24px; }
.page-head p { opacity:.9; margin-top:6px; }

/* ========== 后台布局（用户中心 & 管理后台） ========== */
.layout { display:flex; gap:20px; align-items:flex-start; padding:25px 0; }
.sidebar { width:210px; flex-shrink:0; background:#fff; border-radius:8px; box-shadow:0 1px 4px rgba(0,0,0,.06); overflow:hidden; }
.side-menu { list-style:none; }
.side-menu li a {
  display:block; padding:13px 20px; color:#555; border-left:3px solid transparent; font-size:14px;
}
.side-menu li a:hover { background:#f5faff; color:#1E9FFF; }
.side-menu li a.active { background:#ecf5ff; color:#1E9FFF; border-left-color:#1E9FFF; font-weight:bold; }
.side-menu .menu-title { padding:12px 20px 6px; font-size:12px; color:#aaa; }
.main { flex:1; min-width:0; }

@media (max-width:768px){
  .layout { flex-direction:column; }
  .sidebar { width:100%; }
  .hero h1 { font-size:26px; }
}

/* ========== 统计卡片 ========== */
.stat-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:15px; margin-bottom:20px; }
.stat-card { background:#fff; border-radius:8px; padding:22px; box-shadow:0 1px 4px rgba(0,0,0,.06); }
.stat-card .num { font-size:28px; font-weight:bold; color:#1E9FFF; margin-top:6px; }
.stat-card .label { color:#999; font-size:13px; }
.stat-card.orange .num { color:#faad14; }
.stat-card.green .num { color:#52c41a; }
.stat-card.red .num { color:#f56c6c; }

/* ========== 登录/注册 ========== */
.auth-wrap { max-width:420px; margin:60px auto; }
.auth-wrap .card { padding:35px; }
.auth-logo { text-align:center; margin-bottom:20px; }
.auth-logo img { max-height:50px; }
.auth-title { text-align:center; font-size:20px; font-weight:bold; margin-bottom:25px; color:#333; }
.auth-link { text-align:center; margin-top:15px; color:#888; }

/* ========== 工单 ========== */
.ticket-msg { background:#f8fbff; border:1px solid #e3f0ff; border-radius:8px; padding:15px; margin-bottom:15px; }
.ticket-msg.admin { background:#fff8f0; border-color:#ffe8cc; }
.ticket-msg .meta { font-size:12px; color:#999; margin-bottom:8px; }
.ticket-msg .content { line-height:1.8; white-space:pre-wrap; word-break:break-all; }

/* ========== 其他 ========== */
.text-center { text-align:center; }
.text-muted { color:#999; }
.mt20 { margin-top:20px; }
.mb20 { margin-bottom:20px; }
.empty { text-align:center; color:#aaa; padding:50px 0; }
.article-content { line-height:2; font-size:15px; color:#444; }
.article-content img { max-width:100%; }
.detail-list { line-height:2.4; }
.detail-list b { display:inline-block; min-width:90px; color:#888; font-weight:normal; }