body{
    font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
    color:#e5e7eb;
    margin:0;
}

a{color:#60a5fa;text-decoration:none;}
a:hover{text-decoration:underline;}

.layout{display:grid;min-height:100vh;}
.sidebar{padding:24px;}
.sidebar-title,.sidebar-brand{margin-top:0;}
.sidebar a,
.sidebar-link{display:block;color:#cbd5e1;text-decoration:none;padding:10px 12px;border-radius:10px;margin-bottom:8px;}
.sidebar a:hover,
.sidebar-link:hover{text-decoration:none;}
.group-title{font-size:12px;color:#64748b;text-transform:uppercase;letter-spacing:.08em;margin:18px 0 8px;}
.sidebar-logout,.logout-form{margin-top:18px;}

.content{padding:28px;}

/* 顶部导航布局（将左侧菜单提升到顶部，提升可视面积，避免底部需要横向滚动才看到关键动作） */
.layout.layout-topnav{grid-template-columns:1fr;grid-template-rows:auto 1fr;}
.layout.layout-topnav .sidebar{
    position:sticky;
    top:0;
    z-index:50;
    padding:16px 20px;
    border-right:none !important;
    border-bottom:1px solid #22384f;
}
.layout.layout-topnav .content{padding-top:20px;}

/* 顶部导航：把链接横向排布，超出则可横向滚动 */
.layout.layout-topnav .sidebar a,
.layout.layout-topnav .sidebar-link{
    display:inline-block;
    margin:0 8px 0 0;
    padding:8px 10px;
    border-radius:10px;
}
.layout.layout-topnav .group-title{display:inline-block;margin:0 10px 0 0;}
.layout.layout-topnav .logout-form,
.layout.layout-topnav .sidebar-logout{display:inline-block;margin:0 0 0 10px;}
.layout.layout-topnav .sidebar{white-space:nowrap;overflow-x:auto;}
.layout.layout-topnav .sidebar::-webkit-scrollbar{height:8px;}
.layout.layout-topnav .sidebar::-webkit-scrollbar-thumb{background:#334155;border-radius:999px;}
.top{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;margin-bottom:20px;}
.page-title{margin:0;}

.card{border:1px solid #334155;border-radius:14px;padding:16px;}
.card + .card{margin-top:20px;}
.card-spaced{margin-bottom:20px;}

.grid{display:grid;gap:16px;}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;}
.grid-5{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;}
.grid-6{display:grid;grid-template-columns:repeat(6,1fr);gap:12px;}
.grid-align-end{align-items:end;}
.two-col{display:grid;grid-template-columns:1.3fr 1fr;gap:16px;}
.span-2{grid-column:span 2;}
.span-3{grid-column:span 3;}

.num{font-size:28px;font-weight:700;}
.num-md{font-size:20px;font-weight:700;}
.num-sm{font-size:18px;font-weight:700;}

/* 兼容：早期页面使用 metric-number 作为指标数字样式 */
.metric-number{font-size:28px;font-weight:700;}

.text-md{font-size:16px;display:block;}
.muted{color:#94a3b8;}
.muted-tight{margin-top:0;}
.muted-xs{margin-top:6px;font-size:12px;}

.badge{display:inline-block;padding:4px 10px;border-radius:999px;font-size:12px;margin-top:8px;}

table{width:100%;border-collapse:collapse;}
th,td{padding:10px;border-bottom:1px solid #334155;text-align:left;vertical-align:top;}

input,select,button,textarea,
.form-grid input,
.form-grid select,
.login-form input,
.login-form button{
    padding:10px 12px;
    border-radius:10px;
    border:1px solid #475569;
    background:#0f172a;
    color:#fff;
    box-sizing:border-box;
}
button{cursor:pointer;}

/* Buttons (UI Components)
 * 说明：统一总台/站点后台/商家后台按钮风格（四端后台美化第一步）。
 */
.btn,
button.btn,
.btn-secondary,
button.btn-secondary,
.btn-danger,
button.btn-danger{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:6px;
    padding:10px 14px;
    border-radius:10px;
    font-weight:600;
    text-decoration:none;
    border:1px solid transparent;
    cursor:pointer;
}

.btn,
button.btn{
    background:#1d4ed8;
    border-color:#1d4ed8;
    color:#dbeafe;
}
.btn:hover,
button.btn:hover{
    background:#1e40af;
    border-color:#1e40af;
    text-decoration:none;
}

.btn-secondary,
button.btn-secondary{
    background:transparent;
    border-color:#334155;
    color:#cbd5e1;
}
.btn-secondary:hover,
button.btn-secondary:hover{
    background:#1e293b;
    border-color:#475569;
    text-decoration:none;
}

.btn-danger,
button.btn-danger{
    background:#7f1d1d;
    border-color:#7f1d1d;
    color:#fecaca;
}
.btn-danger:hover,
button.btn-danger:hover{
    background:#991b1b;
    border-color:#991b1b;
    text-decoration:none;
}

.btn-sm,
button.btn-sm{
    padding:8px 10px;
    border-radius:9px;
    font-size:13px;
}

textarea.w-full,input.w-full{width:100%;}

.pre-wrap{white-space:pre-wrap;}

.w-100{width:100px;}
.w-120{width:120px;}
.w-140{width:140px;}
.w-160{width:160px;}
.w-200{width:200px;}

input.w-90{width:90px;}
.block{display:block;}
.inline{display:inline;}
.inline-form{display:inline;}

.mb-0{margin-bottom:0;}
.mb-6{margin-bottom:6px;}
.mb-8{margin-bottom:8px;}
.mb-10{margin-bottom:10px;}
.mb-12{margin-bottom:12px;}
.mb-16{margin-bottom:16px;}
.mb-20{margin-bottom:20px;}
.mt-0{margin-top:0;}
.mt-4{margin-top:4px;}
.mt-6{margin-top:6px;}
.mt-8{margin-top:8px;}
.mt-10{margin-top:10px;}
.mt-12{margin-top:12px;}
.mt-16{margin-top:16px;}
.my-16{margin:16px 0;}
.my-20{margin:20px 0;}
.list-indent,.ml-18{margin:8px 0 0 18px;}

.flash{background:#052e16;color:#bbf7d0;padding:12px 14px;border-radius:10px;margin-bottom:16px;}
.warning{background:#78350f;color:#fde68a;padding:12px 14px;border-radius:10px;margin-bottom:16px;}
.error-box{background:#7f1d1d;color:#fecaca;padding:12px 14px;border-radius:10px;margin-bottom:16px;}
.error,.error-inline{color:#fca5a5;margin-top:10px;}
.filter-error{margin-bottom:12px;padding:12px;border:1px solid #fecaca;background:#fef2f2;color:#991b1b;border-radius:8px;}

.actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap;}
.actions-spread{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;flex-wrap:wrap;}
.inline-links,.card-link-list{display:flex;gap:8px;flex-wrap:wrap;}

/* Layout helpers */
.flex-between{display:flex;justify-content:space-between;gap:12px;align-items:center;}
.items-center{align-items:center;}

.gap-12{gap:12px;}
.gap-10{gap:10px;}

.focus-box,.nav-box,.profile-box{padding:12px;border:1px solid #334155;border-radius:8px;}
.summary-box,.stat-box,.status-card,.status-link{padding:12px;border:1px solid #334155;border-radius:8px;}
.status-card,.status-link{color:inherit;text-decoration:none;display:block;}
.status-card:hover,.status-link:hover{text-decoration:none;}
.pagination-wrap{margin-top:16px;}
/* Pagination：避免全局 a:hover 下划线在分页区域显得“底部一片线” */
.pagination-wrap a{text-decoration:none;}
.pagination-wrap a:hover,
.pagination-wrap a:focus,
.pagination-wrap a:active{text-decoration:none;}
.text-center,.table-empty{text-align:center;}
.section-dark{background:#0f172a;}
.stat-box-light,.status-link-light{padding:12px;border:1px solid #e5e7eb;border-radius:8px;}
.status-link-light{color:inherit;text-decoration:none;display:block;}
.is-active-dark,.status-card-active{background:#1e293b;border-color:#60a5fa;}
.is-active-light{background:#f5faff;border-color:#93c5fd;}
.result-warning{color:#f59e0b;}
.result-success{color:#22c55e;}
.info-warning{margin-bottom:12px;padding:10px 12px;border:1px solid #f59e0b;border-radius:8px;color:#f59e0b;}
.helper-text{margin:12px 0 0;}

.login-page{display:flex;align-items:center;justify-content:center;min-height:100vh;}
.card-login,.login-card{width:420px;border-radius:18px;padding:28px;}
.login-form input,
.login-form button{width:100%;padding:12px;margin-top:10px;}

@media (max-width: 1200px){
    .grid,.grid-2,.grid-3,.grid-4,.grid-5,.grid-6{grid-template-columns:repeat(2,1fr);}
    .two-col{grid-template-columns:1fr;}
}

@media (max-width: 768px){
    .layout{grid-template-columns:1fr !important;}
    .sidebar{border-right:none !important;border-bottom:1px solid #22384f;}
    .content{padding:16px;}
    .top,.actions-spread{flex-direction:column;}
    .grid,.grid-2,.grid-3,.grid-4,.grid-5,.grid-6{grid-template-columns:1fr;}
}