/* 双宇网络 - 用户中心 / 购物车 / 后台 通用 UI（复刻智简魔方视觉） */
:root{
  --primary:#0060ff;
  --primary-dark:#0048c9;
  --bg:#f5f7fb;
  --border:#e9edf5;
  --text:#3b4256;
  --muted:#8b93a7;
  --success:#2fb344;
  --warning:#f76707;
  --danger:#e03131;
}
*{box-sizing:border-box}
body{
  margin:0;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Microsoft YaHei","PingFang SC",Helvetica,Arial,sans-serif;
  font-size:14px;color:var(--text);background:var(--bg);
  -webkit-font-smoothing:antialiased;
}
a{color:var(--primary);text-decoration:none}
a:hover{color:var(--primary-dark);text-decoration:none}
h1,h2,h3,h4,h5,h6{margin:0;font-weight:600}
.container-fluid{width:100%;padding:0 24px;margin:0 auto}
.row{display:flex;flex-wrap:wrap;margin:0 -12px}
.col-12{width:100%;padding:0 12px}
.d-flex{display:flex}
.align-items-center{align-items:center}
.justify-content-between{justify-content:space-between}
.mb-0{margin-bottom:0}
.mt-3{margin-top:16px}
.mb-3{margin-bottom:16px}
.text-muted{color:var(--muted)!important}
.text-primary{color:var(--primary)!important}
.text-danger{color:var(--danger)!important}
.text-success{color:var(--success)!important}
.font-size-18{font-size:18px}
.font-size-16{font-size:16px}
.small{font-size:12px}
.w-100{width:100%}
.text-right{text-align:right}
.text-center{text-align:center}

/* 顶部栏 */
#page-topbar{background:#fff;box-shadow:0 1px 4px rgba(20,30,60,.06);position:sticky;top:0;z-index:100}
.navbar-header{display:flex;align-items:center;justify-content:space-between;height:70px;padding:0 24px}
.navbar-brand-box{display:flex;align-items:center;padding-right:18px;border-right:1px solid var(--border);margin-right:14px}
.navbar-brand-box img{height:30px;display:block}
.header-item{
  display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 12px;border-radius:4px;
  color:#5a6273;border:1px solid transparent;background:transparent;cursor:pointer;font-size:14px;
}
.header-item:hover{background:#f2f6ff;color:var(--primary)}
.header-item.active{background:var(--primary);color:#fff}
.topbar-links{display:flex;align-items:center;gap:4px;flex-wrap:wrap}
.topbar-links a{color:#5a6273;padding:6px 10px;border-radius:4px;font-size:14px}
.topbar-links a:hover{background:#f2f6ff;color:var(--primary)}
.avatar-mini{width:26px;height:26px;border-radius:50%;background:var(--primary);color:#fff;display:inline-flex;align-items:center;justify-content:center;font-size:12px;margin-right:6px}

.main-content{margin-left:0;padding:0;background:var(--bg);min-height:calc(100vh - 70px)}
.page-content{padding:22px 24px 40px}
.page-title-box{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px;flex-wrap:wrap;gap:10px}
.page-title-box h4{font-size:18px;color:#22283a}
.breadcrumb{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--muted);list-style:none;margin:0;padding:0}
.breadcrumb a{color:var(--muted)}

/* 卡片 */
.card{background:#fff;border:1px solid var(--border);border-radius:4px;margin-bottom:18px}
.card-header{display:flex;align-items:center;justify-content:space-between;padding:16px 22px;border-bottom:1px solid var(--border)}
.card-header .card-title{font-size:16px;color:#22283a;margin:0}
.card-body{padding:22px}
.card-body p:last-child{margin-bottom:0}
.card-body .title{font-size:15px;color:#22283a}

/* 按钮 */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:36px;padding:0 16px;border-radius:4px;border:1px solid transparent;background:#fff;color:#4a5265;font-size:14px;cursor:pointer;transition:.15s;line-height:1}
.btn:hover{opacity:.92}
.btn-primary{background:var(--primary);border-color:var(--primary);color:#fff}
.btn-primary:hover{background:var(--primary-dark);color:#fff}
.btn-outline{background:#fff;border-color:var(--primary);color:var(--primary)}
.btn-outline:hover{background:var(--primary);color:#fff}
.btn-light{background:#f5f7fb;border-color:var(--border);color:#4a5265}
.btn-danger{background:var(--danger);border-color:var(--danger);color:#fff}
.btn-sm{height:30px;padding:0 10px;font-size:13px}
.btn-lg{height:44px;padding:0 26px;font-size:15px;border-radius:4px}
.btn-block{display:flex;width:100%}

/* 表单 */
.form-group{margin-bottom:16px}
.form-group label,.form-label{display:block;font-size:13px;color:#5a6273;margin-bottom:8px}
.form-control,input[type=text],input[type=password],input[type=email],input[type=number],select,textarea{
  width:100%;height:42px;padding:0 12px;border:1px solid #dfe4ee;border-radius:4px;
  background:#fff;color:var(--text);font-size:14px;outline:none;transition:.15s;
  font-family:inherit;
}
textarea{height:auto;min-height:120px;padding:10px 12px;line-height:1.6}
.form-control:focus,input:focus,select:focus,textarea:focus{border-color:var(--primary);box-shadow:0 0 0 2px rgba(0,96,255,.08)}
.form-row{display:flex;gap:14px;flex-wrap:wrap}
.form-row .form-group{flex:1;min-width:200px}
.input-group{display:flex}
.input-group input{border-top-right-radius:0;border-bottom-right-radius:0}
.input-group .btn{border-top-left-radius:0;border-bottom-left-radius:0;height:42px}
.checkbox{display:flex;align-items:center;gap:8px;font-size:13px;color:#5a6273;cursor:pointer}

/* 表格 */
.table{width:100%;border-collapse:collapse;font-size:14px}
.table th{background:#f8fafd;color:#5a6273;font-weight:500;text-align:left;padding:12px 14px;border-bottom:1px solid var(--border);white-space:nowrap}
.table td{padding:14px;border-bottom:1px solid #f2f5fa;color:var(--text);vertical-align:middle}
.table tr:last-child td{border-bottom:none}
.table a{color:var(--primary)}
.table-empty{padding:50px 0;text-align:center;color:var(--muted)}

/* 徽章 */
.badge{display:inline-flex;align-items:center;height:22px;padding:0 8px;border-radius:3px;font-size:12px;background:#eef2f9;color:#5a6273}
.badge-success{background:#e7f7ec;color:#1d9b3a}
.badge-warning{background:#fff2e6;color:#d9480f}
.badge-danger{background:#ffecec;color:#d63333}
.badge-info{background:#e7f0ff;color:#0b5bcf}
.badge-secondary{background:#f1f3f7;color:#7b8397}

/* 侧边栏 */
.vertical-menu{position:fixed;top:70px;left:0;bottom:0;width:200px;background:#fff;border-right:1px solid var(--border);overflow-y:auto;z-index:90}
.vertical-menu ul{list-style:none;margin:0;padding:10px 0}
.vertical-menu li a{display:flex;align-items:center;gap:10px;padding:12px 24px;color:#5a6273;font-size:14px}
.vertical-menu li a:hover{background:#f5f8ff;color:var(--primary)}
.vertical-menu li a.active{background:#f0f5ff;color:var(--primary);border-left:2px solid var(--primary)}
.vertical-menu .menu-icon{width:16px;text-align:center;opacity:.8}
.with-sidebar .main-content{margin-left:200px}
@media(max-width:991px){
  .vertical-menu{display:none}
  .with-sidebar .main-content{margin-left:0}
  .container-fluid{padding:0 14px}
  .page-content{padding:16px 14px 34px}
  .navbar-header{padding:0 14px}
  .navbar-brand-box{border-right:none;padding-right:0;margin-right:8px}
  .d-none-mobile{display:none!important}
  .table th,.table td{padding:10px 8px;font-size:13px}
}

/* 购物车 */
.cartitem{background:#fff;border:1px solid var(--border);border-radius:4px;padding:18px 20px;margin-bottom:14px}
.switch-tabs{display:flex;gap:10px;flex-wrap:wrap}
.switch-tab{display:inline-flex;align-items:center;height:38px;padding:0 18px;border:1px solid var(--border);border-radius:4px;background:#fff;color:#4a5265;cursor:pointer;font-size:14px}
.switch-tab.active{background:var(--primary);border-color:var(--primary);color:#fff}
.product-chip{display:inline-flex;align-items:center;height:38px;padding:0 16px;margin:0 10px 10px 0;border:1px solid var(--border);border-radius:4px;background:#fff;color:#4a5265;font-size:14px}
.product-chip.active{background:#eaf1ff;border-color:var(--primary);color:var(--primary)}
.spec-list{list-style:none;margin:0;padding:0}
.spec-list li{display:flex;align-items:center;padding:10px 0;border-bottom:1px dashed #eff2f7;font-size:14px}
.spec-list li:last-child{border-bottom:none}
.spec-list .spec-name{width:110px;color:#5a6273}
.config-row{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:14px 0;border-top:1px solid #f2f5fa}
.config-row .label{width:90px;color:#5a6273}
.total-bar{display:flex;align-items:center;justify-content:flex-end;gap:18px;padding:18px 0 4px;flex-wrap:wrap}
.total-bar .total-amount{font-size:22px;color:#e8590c;font-weight:600}

/* 空状态 */
.empty{padding:60px 0;text-align:center;color:var(--muted)}
.empty .empty-icon{font-size:40px;opacity:.35;margin-bottom:10px}