/* ========================================
   流量统计系统 - 现代仪表盘样式
   ======================================== */

* { margin: 0; padding: 0; box-sizing: border-box; }
body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 14px;
    color: #333;
    background: #f0f2f5;
    line-height: 1.5;
}
a { color: #1890ff; text-decoration: none; }
a:hover { color: #40a9ff; text-decoration: none; }
ul, ol { list-style: none; }
input, select, textarea, button { font-family: inherit; font-size: 14px; outline: none; }
button { cursor: pointer; border: none; background: none; }

/* ============== 通用工具类 ============== */
.clearfix::after { content: ''; display: block; clear: both; }
.text-primary { color: #1890ff; }
.text-success { color: #52c41a; }
.text-warning { color: #faad14; }
.text-danger { color: #f5222d; }
.text-muted { color: #999; }
.text-bold { font-weight: 600; }
.text-center { text-align: center; }
.text-right { text-align: right; }
.mt10 { margin-top: 10px; } .mt15 { margin-top: 15px; } .mt20 { margin-top: 20px; }
.mb10 { margin-bottom: 10px; } .mb15 { margin-bottom: 15px; } .mb20 { margin-bottom: 20px; }
.mr10 { margin-right: 10px; } .mr15 { margin-right: 15px; }

/* ============== 顶部 Header (前后台共用) ============== */
.topbar {
    background: #fff;
    border-bottom: 1px solid #f0f0f0;
    height: 60px;
    display: flex;
    align-items: center;
    padding: 0 24px;
    box-shadow: 0 1px 4px rgba(0,21,41,.08);
    position: sticky;
    top: 0;
    z-index: 100;
}
.topbar .logo {
    font-size: 22px;
    font-weight: 700;
    color: #1890ff;
    letter-spacing: -0.5px;
    margin-right: 32px;
}
.topbar .logo .accent { color: #fa8c16; }
.topbar .topbar-nav { flex: 1; display: flex; gap: 24px; }
.topbar .topbar-nav a {
    color: #595959;
    font-size: 14px;
    padding: 6px 4px;
    transition: color .2s;
}
.topbar .topbar-nav a:hover { color: #1890ff; }
.topbar .topbar-nav a.active { color: #1890ff; font-weight: 500; }
.topbar .user-area { display: flex; align-items: center; gap: 16px; }
.topbar .user-area .user-name { color: #595959; font-size: 14px; }
.topbar .user-area .user-name b { color: #262626; }
.topbar .user-area a { color: #595959; font-size: 14px; }
.topbar .user-area a:hover { color: #1890ff; }
.topbar .user-area .btn { padding: 6px 16px; border-radius: 4px; }
.topbar .user-area .btn-primary { background: #1890ff; color: #fff; }
.topbar .user-area .btn-primary:hover { background: #40a9ff; color: #fff; }
.topbar .user-area .btn-outline { border: 1px solid #1890ff; color: #1890ff; }
.topbar .user-area .btn-outline:hover { background: #e6f7ff; color: #1890ff; }

/* ============== 前后台布局 ============== */
.layout { display: flex; min-height: calc(100vh - 60px); height: 1px; }
.main { flex: 1; padding: 16px 24px; overflow-x: auto; overflow-y: auto; min-width: 0; height: calc(100vh - 60px); }

/* ============== 左侧导航栏 ============== */
.sidebar {
    width: 200px;
    background: #fff;
    border-right: 1px solid #f0f0f0;
    padding: 16px 0;
    overflow-y: auto;
    flex-shrink: 0;
    /* 固定在顶部header下方，跟随右侧内容区域滚动时不动 */
    position: sticky;
    top: 60px;
    height: calc(100vh - 60px);
}
.sidebar .nav-item.last { margin-bottom: 80px; }
.sidebar .site-selector {
    margin: 0 12px 16px;
    padding: 8px 12px;
    background: #f0f5ff;
    border-radius: 4px;
    border: 1px solid #d6e4ff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: all .2s;
}
.sidebar .site-selector:hover { border-color: #1890ff; }
.sidebar .site-selector .site-name { color: #262626; font-size: 13px; font-weight: 500; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sidebar .site-selector .arrow { color: #8c8c8c; font-size: 10px; margin-left: 6px; }
.sidebar .site-selector .switch-icon { width: 16px; height: 16px; background: #1890ff; color: #fff; border-radius: 50%; text-align: center; line-height: 16px; font-size: 11px; margin-right: 8px; }

.sidebar .nav-group { margin-bottom: 4px; }
.sidebar .nav-item {
    display: flex;
    align-items: center;
    padding: 10px 16px;
    color: #595959;
    font-size: 14px;
    cursor: pointer;
    transition: all .2s;
    border-left: 3px solid transparent;
}
.sidebar .nav-item:hover { background: #f0f5ff; color: #1890ff; }
.sidebar .nav-item.active {
    background: #e6f7ff;
    color: #1890ff;
    border-left-color: #1890ff;
    font-weight: 500;
}
.sidebar .nav-item .icon { width: 16px; height: 16px; margin-right: 10px; font-size: 14px; }
.sidebar .nav-item .arrow {
    margin-left: auto;
    font-size: 10px;
    color: #8c8c8c;
    transition: transform .2s;
}
.sidebar .nav-item.expanded .arrow { transform: rotate(90deg); }
.sidebar .sub-nav { background: #fafafa; display: none; }
.sidebar .sub-nav.show { display: block; }
.sidebar .sub-nav .nav-item { padding-left: 40px; font-size: 13px; }
.sidebar .divider { height: 1px; background: #f0f0f0; margin: 8px 12px; }

/* ============== 主内容区 ============== */
.main {
    flex: 1;
    padding: 16px 24px;
    overflow-x: auto;
    min-width: 0;
}
.main .page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid #f0f0f0;
}
.main .page-header h2 { font-size: 18px; font-weight: 600; color: #262626; }
.main .page-header .actions { display: flex; gap: 8px; }
.main .breadcrumb { color: #8c8c8c; font-size: 13px; margin-bottom: 12px; }
.main .breadcrumb a { color: #1890ff; }

/* ============== 卡片 ============== */
.card {
    background: #fff;
    border-radius: 4px;
    box-shadow: 0 1px 2px rgba(0,0,0,.03);
    margin-bottom: 16px;
    overflow: hidden;
}
.card-header {
    padding: 14px 20px;
    border-bottom: 1px solid #f0f0f0;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.card-header h3 { font-size: 15px; font-weight: 600; color: #262626; }
.card-header .card-actions { display: flex; gap: 8px; }
.card-body { padding: 20px; }

/* ============== 指标卡 ============== */
.metric-card {
    background: #fff;
    border-radius: 4px;
    padding: 16px 20px;
    box-shadow: 0 1px 2px rgba(0,0,0,.03);
    position: relative;
    overflow: hidden;
}
.metric-card .metric-label { color: #8c8c8c; font-size: 12px; margin-bottom: 6px; }
.metric-card .metric-value { color: #262626; font-size: 22px; font-weight: 600; line-height: 1.2; }
.metric-card .metric-value .unit { font-size: 13px; color: #8c8c8c; font-weight: 400; margin-left: 2px; }
.metric-card .metric-compare { font-size: 12px; margin-top: 6px; color: #8c8c8c; }
.metric-card .metric-compare .up { color: #f5222d; }
.metric-card .metric-compare .down { color: #52c41a; }
.metric-card .metric-icon {
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 36px;
    color: #e6f7ff;
}

/* ============== 网格布局 ============== */
.grid { display: grid; gap: 16px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.grid-5 { grid-template-columns: repeat(5, 1fr); }
.grid-6 { grid-template-columns: repeat(6, 1fr); }
@media (max-width: 1280px) {
    .grid-5, .grid-6 { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 960px) {
    .grid-4, .grid-3 { grid-template-columns: repeat(2, 1fr); }
}

/* ============== 按钮 ============== */
.btn {
    display: inline-block;
    padding: 6px 16px;
    border: 1px solid #d9d9d9;
    background: #fff;
    color: #595959;
    border-radius: 4px;
    cursor: pointer;
    transition: all .2s;
    font-size: 14px;
    line-height: 1.5;
    text-align: center;
    vertical-align: middle;
}
.btn:hover { color: #1890ff; border-color: #1890ff; }
.btn-primary { background: #1890ff; color: #fff; border-color: #1890ff; }
.btn-primary:hover { background: #40a9ff; color: #fff; border-color: #40a9ff; }
.btn-success { background: #52c41a; color: #fff; border-color: #52c41a; }
.btn-success:hover { background: #73d13d; color: #fff; border-color: #73d13d; }
.btn-danger { background: #f5222d; color: #fff; border-color: #f5222d; }
.btn-danger:hover { background: #ff4d4f; color: #fff; border-color: #ff4d4f; }
.btn-warning { background: #faad14; color: #fff; border-color: #faad14; }
.btn-link { background: none; border: none; color: #1890ff; padding: 0; }
.btn-link:hover { color: #40a9ff; background: none; }
.btn-sm { padding: 3px 10px; font-size: 12px; }
.btn-lg { padding: 8px 20px; font-size: 16px; }

/* ============== 表单 ============== */
.form-item { margin-bottom: 16px; }
.form-item label { display: block; color: #262626; margin-bottom: 6px; font-size: 14px; }
.form-item label .required { color: #f5222d; }
.form-input, .form-select, .form-textarea {
    width: 100%;
    padding: 6px 12px;
    border: 1px solid #d9d9d9;
    border-radius: 4px;
    background: #fff;
    transition: border-color .2s;
    font-size: 14px;
    color: #262626;
}
.form-input:focus, .form-select:focus, .form-textarea:focus { border-color: #1890ff; outline: none; }
.form-textarea { min-height: 80px; resize: vertical; }
.form-input.inline, .form-select.inline { width: auto; display: inline-block; }

/* ============== 表格 ============== */
.table { width: 100%; background: #fff; border-collapse: collapse; }
.table th {
    background: #fafafa;
    padding: 12px 16px;
    text-align: left;
    color: #262626;
    font-weight: 500;
    font-size: 14px;
    border-bottom: 1px solid #f0f0f0;
}
.table td {
    padding: 12px 16px;
    border-bottom: 1px solid #f0f0f0;
    color: #595959;
    font-size: 14px;
}
.table tbody tr:hover td { background: #fafafa; }
.table .actions a { margin-right: 8px; }

/* ============== 标签 ============== */
.tag {
    display: inline-block;
    padding: 1px 8px;
    background: #e6f7ff;
    color: #1890ff;
    border-radius: 2px;
    font-size: 12px;
    line-height: 1.5;
}
.tag-success { background: #f6ffed; color: #52c41a; }
.tag-warning { background: #fffbe6; color: #faad14; }
.tag-danger { background: #fff1f0; color: #f5222d; }
.tag-gray { background: #fafafa; color: #595959; }

/* ============== 分页 ============== */
.pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    margin: 16px 0;
}
.pagination a, .pagination span {
    padding: 4px 12px;
    border: 1px solid #d9d9d9;
    background: #fff;
    color: #595959;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    min-width: 32px;
    text-align: center;
}
.pagination a:hover { color: #1890ff; border-color: #1890ff; }
.pagination .active { background: #1890ff; color: #fff; border-color: #1890ff; }
.pagination .disabled { color: #bfbfbf; cursor: not-allowed; background: #f5f5f5; }

/* ============== 提示框 ============== */
.alert {
    padding: 10px 16px;
    border-radius: 4px;
    margin-bottom: 16px;
    border: 1px solid;
    font-size: 14px;
}
.alert-info { background: #e6f7ff; border-color: #91d5ff; color: #1890ff; }
.alert-success { background: #f6ffed; border-color: #b7eb8f; color: #52c41a; }
.alert-warning { background: #fffbe6; border-color: #ffe58f; color: #faad14; }
.alert-danger { background: #fff1f0; border-color: #ffa39e; color: #f5222d; }

/* ============== 占位图 ============== */
.empty-state {
    padding: 60px 20px;
    text-align: center;
    color: #bfbfbf;
}
.empty-state .empty-icon { font-size: 48px; margin-bottom: 12px; opacity: .5; }
.empty-state .empty-text { font-size: 14px; }

/* ============== 图表占位 ============== */
.chart-container { position: relative; width: 100%; height: 300px; }
.chart-legend { display: flex; gap: 16px; margin-top: 8px; }
.chart-legend .legend-item { display: flex; align-items: center; font-size: 12px; color: #595959; }
.chart-legend .legend-dot { width: 10px; height: 10px; border-radius: 2px; margin-right: 6px; }

/* ============== 首页(登录页) ============== */
.home-hero {
    background: linear-gradient(135deg, #1890ff 0%, #096dd9 50%, #722ed1 100%);
    color: #fff;
    padding: 60px 24px;
}
.home-hero-inner {
    max-width: 1100px;
    margin: 0 auto;
    display: flex;
    gap: 48px;
    align-items: center;
    justify-content: space-between;
}
.home-hero-text { flex: 1; min-width: 0; }
.home-hero-text h1 {
    font-size: 36px;
    font-weight: 700;
    margin-bottom: 16px;
    line-height: 1.3;
}
.home-hero-text p {
    font-size: 16px;
    opacity: .9;
    max-width: 520px;
    line-height: 1.7;
    margin-bottom: 20px;
}
.home-hero-text .home-cta {
    display: inline-block;
    padding: 10px 32px;
    background: #fff;
    color: #1890ff;
    border-radius: 4px;
    font-weight: 500;
    transition: all .2s;
}
.home-hero-text .home-cta:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0,0,0,.15); }
.home-bullets { list-style: none; margin-bottom: 24px; }
.home-bullets li { font-size: 15px; padding: 6px 0; opacity: .92; }

.home-hero-card {
    width: 380px;
    flex-shrink: 0;
    background: #fff;
    border-radius: 8px;
    padding: 32px 28px;
    box-shadow: 0 8px 32px rgba(0,0,0,.15);
}
.home-hero-card h2 {
    text-align: center;
    margin-bottom: 20px;
    color: #262626;
    font-size: 20px;
}
.home-hero-card .form-item { margin-bottom: 14px; }
.home-hero-card .form-item label { color: #595959; font-size: 13px; }
.home-hero-card .form-input { padding: 8px 12px; }
.home-hero-card .form-input:focus { border-color: #1890ff; }
.home-hero-card .btn-primary { background: #1890ff; }

@media (max-width: 860px) {
    .home-hero { padding: 40px 20px; }
    .home-hero-inner { flex-direction: column; gap: 32px; }
    .home-hero-text h1 { font-size: 28px; text-align: center; }
    .home-hero-text p { text-align: center; margin-left: auto; margin-right: auto; }
    .home-hero-text .home-cta { display: block; text-align: center; }
    .home-bullets { max-width: 360px; margin-left: auto; margin-right: auto; }
    .home-hero-card { width: 100%; max-width: 400px; }
}

.home-features { padding: 60px 24px; max-width: 1200px; margin: 0 auto; }
.home-features .feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.home-features .feature { text-align: center; padding: 24px; }
.home-features .feature .feature-icon { font-size: 48px; color: #1890ff; margin-bottom: 16px; }
.home-features .feature h3 { font-size: 18px; color: #262626; margin-bottom: 8px; }
.home-features .feature p { color: #8c8c8c; }

@media (max-width: 640px) {
    .home-features .feature-grid { grid-template-columns: 1fr; gap: 0; }
}


/* ============== 后台专属 ============== */
.admin-sidebar { background: #001529; }
.admin-sidebar .nav-item { color: rgba(255,255,255,.65); border-left: 3px solid transparent; }
.admin-sidebar .nav-item:hover { background: #002140; color: #fff; }
.admin-sidebar .nav-item.active { background: #1890ff; color: #fff; border-left-color: #fa8c16; }
.admin-sidebar .nav-item .icon { color: rgba(255,255,255,.65); }
.admin-sidebar .divider { background: #002140; }
.admin-sidebar .site-selector { background: #002140; border-color: #003a8c; }
.admin-sidebar .site-selector .site-name { color: rgba(255,255,255,.85); }
.admin-sidebar .sub-nav { background: #000c17; }
.admin-sidebar .sub-nav .nav-item { color: rgba(255,255,255,.45); }
.admin-sidebar .sub-nav .nav-item:hover { color: #fff; }

/* ============== 辅助元素 ============== */
.code-block {
    background: #fafafa;
    border: 1px solid #f0f0f0;
    border-radius: 4px;
    padding: 12px 16px;
    font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
    font-size: 12px;
    line-height: 1.6;
    color: #595959;
    overflow-x: auto;
    word-break: break-all;
}

.dot {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    margin-right: 6px;
}
.dot-blue { background: #1890ff; }
.dot-orange { background: #fa8c16; }
.dot-green { background: #52c41a; }
.dot-red { background: #f5222d; }
.dot-gray { background: #d9d9d9; }

.bar {
    display: inline-block;
    height: 8px;
    background: linear-gradient(90deg, #1890ff, #36cfc9);
    border-radius: 2px;
    vertical-align: middle;
}
.bar-orange { background: linear-gradient(90deg, #fa8c16, #ffc53d); }

.progress {
    display: flex;
    align-items: center;
    font-size: 13px;
    color: #595959;
}
.progress-bar {
    flex: 1;
    height: 6px;
    background: #f5f5f5;
    border-radius: 3px;
    margin: 0 8px;
    overflow: hidden;
}
.progress-fill {
    height: 100%;
    background: #1890ff;
    border-radius: 3px;
    transition: width .3s;
}