:root{--primary:#4E68FE;--primary-dark:#3d55e0;--success:#07C160;--danger:#e74c3c;--warning:#f39c12;--info:#3498db;--bg:#f0f2f5;--card:#fff;--text:#333;--text-secondary:#666;--border:#e8e8e8;--sidebar-bg:#1e2a3a;--sidebar-text:#b8c7ce;--sidebar-active:#4E68FE}
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;background:var(--bg);color:var(--text);font-size:14px;min-height:100vh}
a{color:var(--primary);text-decoration:none}
a:hover{color:var(--primary-dark)}

/* Layout */
.layout{display:flex;min-height:100vh}
.sidebar{width:260px;background:var(--sidebar-bg);color:var(--sidebar-text);position:fixed;top:0;left:0;bottom:0;z-index:100;overflow-y:auto;transition:transform .3s ease, width .3s}
.sidebar-header{padding:20px;text-align:center;border-bottom:1px solid rgba(255,255,255,.1)}
.sidebar-header h2{color:#fff;font-size:18px;margin:0}
.sidebar-header small{color:var(--sidebar-text);font-size:12px}
.main-content{margin-left:260px;flex:1;padding:24px;min-width:0}

/* Mobile Header - 默认隐藏 */
.mobile-header{display:none}

/* Sidebar Overlay - 默认隐藏 */
.sidebar-overlay{display:none}

/* App Switcher */
.app-switcher{padding:12px 16px;border-bottom:1px solid rgba(255,255,255,.08);background:rgba(0,0,0,.15)}
.app-switcher-label{font-size:11px;color:rgba(255,255,255,.4);margin-bottom:6px;text-transform:uppercase;letter-spacing:.5px}
.app-switcher-select select{width:100%;padding:8px 10px;border-radius:6px;border:1px solid rgba(255,255,255,.15);background:rgba(255,255,255,.08);color:#fff;font-size:13px;cursor:pointer;outline:none;appearance:auto;transition:all .2s}
.app-switcher-select select:hover{border-color:var(--primary);background:rgba(78,104,254,.15)}
.app-switcher-select select:focus{border-color:var(--primary);box-shadow:0 0 0 2px rgba(78,104,254,.2)}
.app-switcher-select select option{background:var(--sidebar-bg);color:#fff}
.app-switcher-info{margin-top:8px;display:flex;align-items:center;gap:6px}

/* Sidebar Nav */
.sidebar-nav{padding:8px 0}
.nav-group{margin-bottom:2px}
.nav-group-title{padding:10px 20px 6px;font-size:11px;text-transform:uppercase;color:rgba(255,255,255,.3);letter-spacing:1px;display:flex;align-items:center;gap:6px}
.nav-item{display:flex;align-items:center;padding:10px 20px;color:var(--sidebar-text);transition:all .2s;cursor:pointer;border-left:3px solid transparent;font-size:13px}
.nav-item:hover{background:rgba(255,255,255,.05);color:#fff}
.nav-item.active{background:rgba(78,104,254,.15);color:#fff;border-left-color:var(--primary)}
.nav-item .icon{width:20px;margin-right:10px;text-align:center;font-size:15px}

/* Page Header */
.page-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;flex-wrap:wrap;gap:10px}
.page-header h3{font-size:20px;font-weight:600}

/* Cards */
.card{background:var(--card);border-radius:10px;box-shadow:0 1px 3px rgba(0,0,0,.06),0 1px 2px rgba(0,0,0,.04);margin-bottom:20px;overflow:hidden;transition:box-shadow .2s}
.card:hover{box-shadow:0 4px 12px rgba(0,0,0,.08)}
.card-header{padding:16px 20px;border-bottom:1px solid var(--border);font-weight:600;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:8px}
.card-body{padding:20px;overflow-x:auto}

/* Stats */
.stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px;margin-bottom:24px}
.stat-card{background:var(--card);border-radius:10px;padding:20px;box-shadow:0 1px 3px rgba(0,0,0,.06);display:flex;align-items:center;gap:16px;transition:transform .2s,box-shadow .2s}
.stat-card:hover{transform:translateY(-2px);box-shadow:0 4px 12px rgba(0,0,0,.1)}
.stat-icon{width:48px;height:48px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:22px;flex-shrink:0}
.stat-icon.blue{background:rgba(78,104,254,.1);color:var(--primary)}
.stat-icon.green{background:rgba(7,193,96,.1);color:var(--success)}
.stat-icon.orange{background:rgba(243,156,18,.1);color:var(--warning)}
.stat-icon.red{background:rgba(231,76,60,.1);color:var(--danger)}
.stat-info h4{font-size:24px;font-weight:700;margin-bottom:4px}
.stat-info p{color:var(--text-secondary);font-size:13px;margin:0}

/* Apps Grid */
.apps-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:20px;margin-bottom:20px}
.app-card{background:var(--card);border-radius:12px;padding:20px;box-shadow:0 1px 3px rgba(0,0,0,.06);transition:all .2s;border:2px solid transparent}
.app-card:hover{box-shadow:0 6px 20px rgba(0,0,0,.1);transform:translateY(-2px)}
.app-disabled{opacity:.6;border-color:var(--danger)}
.app-card-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.app-card-name{font-size:18px;font-weight:700;color:var(--text)}
.app-card-appid{font-size:12px;color:var(--text-secondary);font-family:monospace;margin-bottom:12px;padding:4px 8px;background:#f5f5f5;border-radius:4px;display:inline-block;word-break:break-all}
.app-card-stats{display:flex;gap:20px;margin:16px 0;padding:12px 0;border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.app-stat{text-align:center;flex:1}
.app-stat-num{display:block;font-size:20px;font-weight:700;color:var(--primary)}
.app-stat-label{font-size:11px;color:var(--text-secondary)}
.app-card-remark{font-size:12px;color:var(--text-secondary);margin-bottom:12px;padding:6px 10px;background:#fafafa;border-radius:6px}
.app-card-actions{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:8px}
.app-card-time{font-size:11px;color:#bbb}

/* Forms */
.form-group{margin-bottom:16px}
.form-group label{display:block;margin-bottom:6px;font-weight:500;color:var(--text)}
.form-group .help{font-size:12px;color:#999;margin-top:4px}
.form-control{width:100%;padding:9px 12px;border:1px solid var(--border);border-radius:8px;font-size:14px;transition:all .2s;outline:none;background:#fff}
.form-control:focus{border-color:var(--primary);box-shadow:0 0 0 3px rgba(78,104,254,.1)}
textarea.form-control{min-height:80px;resize:vertical}
select.form-control{appearance:auto}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.form-row-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;padding:8px 20px;border:none;border-radius:8px;font-size:14px;cursor:pointer;transition:all .2s;gap:6px;text-decoration:none;font-weight:500}
.btn:hover{transform:translateY(-1px);box-shadow:0 2px 8px rgba(0,0,0,.15)}
.btn-primary{background:var(--primary);color:#fff}
.btn-primary:hover{background:var(--primary-dark);color:#fff}
.btn-success{background:var(--success);color:#fff}
.btn-danger{background:var(--danger);color:#fff}
.btn-warning{background:var(--warning);color:#fff}
.btn-info{background:var(--info);color:#fff}
.btn-sm{padding:5px 12px;font-size:12px;border-radius:6px}
.btn-outline{background:transparent;border:1px solid var(--border);color:var(--text)}
.btn-outline:hover{border-color:var(--primary);color:var(--primary)}

/* Table - 支持列宽拖动 */
table{width:100%;border-collapse:collapse;table-layout:auto}
table th,table td{padding:10px 12px;text-align:left;border-bottom:1px solid var(--border);font-size:13px;position:relative}
table th{background:#fafafa;font-weight:600;color:var(--text-secondary);white-space:nowrap;user-select:none}
table tr:hover{background:#f8f9ff}

/* 列宽拖动手柄 */
.resizable-table{table-layout:fixed}
.resizable-table th{overflow:hidden;text-overflow:ellipsis}
.resizable-table td{overflow:hidden;text-overflow:ellipsis}
.th-resize-handle{position:absolute;right:0;top:0;bottom:0;width:5px;cursor:col-resize;background:transparent;z-index:10}
.th-resize-handle:hover,.th-resize-handle.active{background:var(--primary);opacity:.3}

/* Badge */
.badge{display:inline-block;padding:2px 8px;border-radius:10px;font-size:11px;font-weight:500}
.badge-success{background:rgba(7,193,96,.1);color:var(--success)}
.badge-danger{background:rgba(231,76,60,.1);color:var(--danger)}
.badge-warning{background:rgba(243,156,18,.1);color:var(--warning)}
.badge-info{background:rgba(52,152,219,.1);color:var(--info)}

/* Pagination */
.pagination{display:flex;gap:4px;margin-top:16px;justify-content:center;flex-wrap:wrap}
.pagination a,.pagination span{padding:6px 12px;border:1px solid var(--border);border-radius:6px;font-size:13px}
.pagination a:hover{background:var(--primary);color:#fff;border-color:var(--primary)}
.pagination .current{background:var(--primary);color:#fff;border-color:var(--primary)}

/* Alert */
.alert{padding:12px 16px;border-radius:8px;margin-bottom:16px;font-size:13px;line-height:1.6}
.alert-success{background:#d4edda;color:#155724;border:1px solid #c3e6cb}
.alert-danger{background:#f8d7da;color:#721c24;border:1px solid #f5c6cb}
.alert-warning{background:#fff3cd;color:#856404;border:1px solid #ffeeba}
.alert-info{background:#d1ecf1;color:#0c5460;border:1px solid #bee5eb}

/* Login */
.login-page{display:flex;align-items:center;justify-content:center;min-height:100vh;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%)}
.login-box{background:#fff;border-radius:16px;padding:40px;width:400px;max-width:90vw;box-shadow:0 20px 60px rgba(0,0,0,.2)}
.login-box h2{text-align:center;margin-bottom:10px;color:var(--text)}
.login-box .btn{width:100%;padding:12px;font-size:16px}

/* Modal */
.modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.5);z-index:1000;display:flex;align-items:center;justify-content:center;backdrop-filter:blur(4px)}
.modal-box{background:#fff;border-radius:16px;width:520px;max-width:90vw;max-height:85vh;overflow-y:auto;box-shadow:0 20px 60px rgba(0,0,0,.3)}
.modal-header{padding:20px 24px;border-bottom:1px solid var(--border);display:flex;justify-content:space-between;align-items:center}
.modal-header h4{margin:0;font-size:18px}
.modal-close{font-size:24px;cursor:pointer;color:#999;line-height:1}
.modal-close:hover{color:var(--danger)}
.modal-body{padding:24px}
.modal-footer{padding:16px 24px;border-top:1px solid var(--border);display:flex;justify-content:flex-end;gap:10px}

/* Misc */
.empty{text-align:center;padding:40px;color:#999}
.section-title{font-size:16px;font-weight:600;margin:20px 0 12px;padding-bottom:8px;border-bottom:2px solid var(--primary);display:inline-block}
.text-truncate{max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:inline-block}
.flex-between{display:flex;justify-content:space-between;align-items:center}
.mt-10{margin-top:10px}.mt-20{margin-top:20px}.mb-10{margin-bottom:10px}.mb-20{margin-bottom:20px}
.toolbar{display:flex;gap:10px;align-items:center;margin-bottom:16px;flex-wrap:wrap}

/* Code */
code{background:#f1f3f5;padding:1px 6px;border-radius:4px;font-size:12px;color:#e74c3c;font-family:'SFMono-Regular',Consolas,'Liberation Mono',Menlo,monospace}

/* ========== 移动端响应式适配 ========== */
@media(max-width:768px){
    /* 移动端顶部导航栏 */
    .mobile-header{
        display:flex;
        align-items:center;
        position:fixed;
        top:0;left:0;right:0;
        height:52px;
        background:var(--sidebar-bg);
        color:#fff;
        z-index:90;
        padding:0 16px;
        gap:12px;
        box-shadow:0 2px 8px rgba(0,0,0,.15)
    }
    .mobile-menu-btn{
        display:flex;flex-direction:column;justify-content:center;
        gap:5px;
        width:36px;height:36px;
        background:none;border:none;cursor:pointer;
        padding:6px;
        border-radius:6px;
        transition:background .2s;
        flex-shrink:0
    }
    .mobile-menu-btn:hover,.mobile-menu-btn:active{background:rgba(255,255,255,.1)}
    .hamburger-line{
        display:block;width:22px;height:2px;
        background:#fff;border-radius:2px;
        transition:all .3s ease
    }
    .mobile-header-title{
        font-size:16px;font-weight:600;
        flex:1;
        overflow:hidden;text-overflow:ellipsis;white-space:nowrap
    }
    .mobile-header-app{
        font-size:11px;
        background:rgba(78,104,254,.3);
        padding:2px 8px;border-radius:10px;
        flex-shrink:0;
        max-width:120px;
        overflow:hidden;text-overflow:ellipsis;white-space:nowrap
    }
    
    /* 侧边栏：默认隐藏在左侧外面 */
    .sidebar{
        width:280px;
        transform:translateX(-100%);
        transition:transform .3s ease;
        z-index:200
    }
    .sidebar.sidebar-open{
        transform:translateX(0)
    }
    
    /* 遮罩层 */
    .sidebar-overlay{
        display:block;
        position:fixed;
        top:0;left:0;right:0;bottom:0;
        background:rgba(0,0,0,.5);
        z-index:150;
        opacity:0;
        visibility:hidden;
        transition:opacity .3s ease, visibility .3s ease;
        -webkit-backdrop-filter:blur(2px);
        backdrop-filter:blur(2px)
    }
    .sidebar-overlay.active{
        opacity:1;
        visibility:visible
    }
    
    /* 锁定body滚动 */
    body.sidebar-body-lock{
        overflow:hidden
    }
    
    /* 主内容区适配 */
    .main-content{
        margin-left:0;
        padding:68px 12px 16px;
        min-width:0
    }
    
    /* 表单响应式 */
    .form-row,.form-row-3{grid-template-columns:1fr}
    
    /* 统计卡片 */
    .stats-grid{grid-template-columns:1fr 1fr}
    
    /* 应用卡片 */
    .apps-grid{grid-template-columns:1fr}
    
    /* 页面标题 */
    .page-header{margin-bottom:16px}
    .page-header h3{font-size:18px}
    
    /* 卡片内边距缩小 */
    .card-body{padding:16px 12px}
    .card-header{padding:12px 16px;font-size:14px}
    
    /* 表格横向滚动 */
    .card-body table{min-width:600px}
    
    /* 按钮适配 */
    .btn{padding:8px 16px;font-size:13px}
    
    /* Alert适配 */
    .alert{font-size:12px;padding:10px 12px}
    
    /* 分页适配 */
    .pagination a,.pagination span{padding:5px 10px;font-size:12px}
    
    /* 工具栏适配 */
    .toolbar{gap:8px}
    .toolbar .form-control{font-size:13px;padding:7px 10px}
    .toolbar .btn{font-size:12px;padding:6px 12px}
    
    /* VIP广告策略网格适配 */
    div[style*="grid-template-columns:1fr 1fr"]{
        grid-template-columns:1fr !important
    }
    
    /* 统计卡片内文字适配 */
    .stat-info h4{font-size:20px}
    .stat-info p{font-size:12px}
    .stat-icon{width:40px;height:40px;font-size:18px}
    .stat-card{padding:14px;gap:12px}
    
    /* 登录页适配 */
    .login-box{padding:24px;width:90vw}
    
    /* Modal适配 */
    .modal-box{width:95vw;max-height:90vh}
    .modal-body{padding:16px}
    .modal-header{padding:14px 16px}
    .modal-footer{padding:12px 16px}
}

/* 超小屏幕额外适配 */
@media(max-width:480px){
    .stats-grid{grid-template-columns:1fr}
    .main-content{padding:60px 8px 12px}
    .card-body{padding:12px 10px}
    .form-group label{font-size:13px}
    .form-control{font-size:13px}
    .page-header h3{font-size:16px}
    .mobile-header-title{font-size:14px}
}