/*============================================
  PP社交 - 样式库 v2.0
  无第三方依赖，无 emoji，纯 CSS 高级风格
============================================*/

:root {
    --bg: #f8fafc;
    --surface: #ffffff;
    --border: #e5e7eb;
    --border-light: #f3f4f6;
    --text: #0f172a;
    --text-secondary: #64748b;
    --text-muted: #94a3b8;
    --text-inverse: #ffffff;
    
    --primary: #6366f1;
    --primary-hover: #4f46e5;
    --primary-light: #eef2ff;
    --primary-dark: #3730a3;
    
    --success: #10b981;
    --success-light: #ecfdf5;
    --success-border: #a7f3d0;
    
    --warning: #f59e0b;
    --warning-light: #fffbeb;
    --warning-border: #fde68a;
    
    --danger: #ef4444;
    --danger-light: #fef2f2;
    --danger-border: #fecaca;
    
    --radius-xs: 4px;
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 20px;
    --radius-full: 9999px;
    
    --shadow-xs: 0 1px 2px rgba(0,0,0,0.04);
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.08);
    --shadow-md: 0 4px 12px rgba(0,0,0,0.06);
    --shadow-lg: 0 12px 24px rgba(0,0,0,0.08);
    --shadow-xl: 0 20px 40px rgba(0,0,0,0.1);
    
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;
    --space-10: 40px;
    --space-12: 48px;
    
    --font: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
    --font-mono: "SF Mono", "Fira Code", "Consolas", monospace;
    --text-xs: 12px;
    --text-sm: 13px;
    --text-base: 15px;
    --text-lg: 18px;
    --text-xl: 22px;
    --text-2xl: 28px;
    --text-3xl: 36px;
    --transition: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;-webkit-font-smoothing:antialiased}
body{font-family:var(--font);font-size:var(--text-base);line-height:1.6;color:var(--text);background:var(--bg)}
a{color:var(--primary);text-decoration:none;transition:var(--transition)}
a:hover{color:var(--primary-hover)}
img{max-width:100%;display:block}
ul,ol{list-style:none}
input,button,textarea,select{font:inherit;color:inherit}
button{cursor:pointer;border:none;background:none}

/* 布局 */
.container{max-width:1200px;margin:0 auto;padding:0 var(--space-4)}
.container-sm{max-width:480px}
.container-md{max-width:768px}

/* 导航 */
.navbar{
    background:var(--surface);border-bottom:1px solid var(--border);
    height:56px;display:flex;align-items:center;justify-content:space-between;
    padding:0 var(--space-6);position:sticky;top:0;z-index:100;
}
.navbar-brand{font-size:var(--text-lg);font-weight:800;color:var(--primary);letter-spacing:-0.5px}
.navbar-nav{display:flex;align-items:center;gap:var(--space-1)}
.nav-link{padding:var(--space-2) var(--space-3);border-radius:var(--radius-sm);font-size:var(--text-sm);font-weight:500;color:var(--text-secondary);transition:var(--transition)}
.nav-link:hover,.nav-link.active{color:var(--primary);background:var(--primary-light)}
.navbar-actions{display:flex;align-items:center;gap:var(--space-3)}

/* 头像 */
.avatar{width:36px;height:36px;border-radius:var(--radius-full);background:var(--primary);color:var(--text-inverse);display:inline-flex;align-items:center;justify-content:center;font-weight:700;font-size:var(--text-sm);flex-shrink:0}
.avatar-lg{width:72px;height:72px;font-size:var(--text-2xl)}
.avatar-xl{width:96px;height:96px;font-size:var(--text-3xl)}

/* 徽章 */
.badge{display:inline-flex;align-items:center;padding:2px 10px;border-radius:var(--radius-full);font-size:11px;font-weight:600;letter-spacing:0.3px;text-transform:uppercase}
.badge-primary{background:var(--primary-light);color:var(--primary)}
.badge-success{background:var(--success-light);color:var(--success)}
.badge-warning{background:var(--warning-light);color:var(--warning)}
.badge-danger{background:var(--danger-light);color:var(--danger)}

/* 卡片 */
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:var(--space-6);margin-bottom:var(--space-4)}
.card-header{padding-bottom:var(--space-4);border-bottom:1px solid var(--border-light);margin-bottom:var(--space-4)}
.card-title{font-size:var(--text-lg);font-weight:700;letter-spacing:-0.3px}

/* 统计 */
.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:var(--space-3)}
.stat-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-md);padding:var(--space-5);text-align:center}
.stat-value{font-size:var(--text-2xl);font-weight:800;letter-spacing:-1px;line-height:1;color:var(--primary)}
.stat-value.success{color:var(--success)}.stat-value.warning{color:var(--warning)}.stat-value.danger{color:var(--danger)}
.stat-label{font-size:var(--text-xs);color:var(--text-muted);margin-top:var(--space-1);text-transform:uppercase;letter-spacing:0.5px}

/* 按钮 */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);padding:10px 20px;border-radius:var(--radius-sm);font-size:var(--text-sm);font-weight:600;transition:var(--transition);white-space:nowrap;user-select:none;border:1px solid transparent}
.btn:active{transform:scale(0.97)}
.btn-primary{background:var(--primary);color:var(--text-inverse)}
.btn-primary:hover{background:var(--primary-hover);box-shadow:var(--shadow-md)}
.btn-success{background:var(--success);color:var(--text-inverse)}
.btn-success:hover{background:#059669}
.btn-danger{background:var(--danger);color:var(--text-inverse)}
.btn-danger:hover{background:#dc2626}
.btn-outline{background:transparent;border:1px solid var(--border);color:var(--text)}
.btn-outline:hover{border-color:var(--primary);color:var(--primary);background:var(--primary-light)}
.btn-ghost{color:var(--text-secondary)}
.btn-ghost:hover{background:var(--border-light);color:var(--text)}
.btn-sm{padding:6px 14px;font-size:var(--text-xs);border-radius:var(--radius-xs)}
.btn-lg{padding:14px 28px;font-size:var(--text-base)}
.btn-block{width:100%}
.btn:disabled{opacity:0.5;pointer-events:none}

/* 表单 */
.form-group{margin-bottom:var(--space-4)}
.form-label{display:block;font-size:var(--text-sm);font-weight:600;color:var(--text-secondary);margin-bottom:var(--space-1)}
.form-input{width:100%;padding:10px 14px;border:1px solid var(--border);border-radius:var(--radius-sm);font-size:var(--text-base);background:var(--surface);color:var(--text);outline:none;transition:var(--transition)}
.form-input:focus{border-color:var(--primary);box-shadow:0 0 0 3px rgba(99,102,241,0.1)}
.form-input::placeholder{color:var(--text-muted)}
.form-input.error{border-color:var(--danger)}
.form-hint{font-size:var(--text-xs);color:var(--text-muted);margin-top:var(--space-1)}
.form-row{display:flex;gap:var(--space-3)}
.form-row>.form-group{flex:1}
textarea.form-input{min-height:80px;resize:vertical}

/* 提示 */
.alert{padding:var(--space-3) var(--space-4);border-radius:var(--radius-sm);font-size:var(--text-sm);margin-bottom:var(--space-4);border:1px solid transparent}
.alert-success{background:var(--success-light);color:var(--success);border-color:var(--success-border)}
.alert-danger{background:var(--danger-light);color:var(--danger);border-color:var(--danger-border)}
.alert-warning{background:var(--warning-light);color:var(--warning);border-color:var(--warning-border)}

/* 分隔线 */
.divider{border:none;border-top:1px solid var(--border);margin:var(--space-4) 0}

/* 表格 */
.table{width:100%;border-collapse:collapse}
.table th{text-align:left;padding:var(--space-3) var(--space-4);font-size:var(--text-xs);font-weight:600;color:var(--text-muted);text-transform:uppercase;letter-spacing:0.5px;border-bottom:2px solid var(--border);background:var(--bg)}
.table td{padding:var(--space-3) var(--space-4);font-size:var(--text-sm);border-bottom:1px solid var(--border-light)}
.table tbody tr:hover{background:var(--bg)}

/* 分页 */
.pagination{display:flex;gap:var(--space-2);justify-content:center;margin-top:var(--space-5)}
.pagination a,.pagination span{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:var(--radius-sm);font-size:var(--text-sm);font-weight:500;border:1px solid var(--border);color:var(--text);transition:var(--transition)}
.pagination a:hover{border-color:var(--primary);color:var(--primary)}
.pagination a.active{background:var(--primary);color:#fff;border-color:var(--primary)}

/* 标签页 */
.tabs{display:flex;gap:0;border-bottom:2px solid var(--border);margin-bottom:var(--space-6)}
.tab{padding:var(--space-3) var(--space-4);font-size:var(--text-sm);font-weight:500;color:var(--text-secondary);border-bottom:2px solid transparent;margin-bottom:-2px;transition:var(--transition);cursor:pointer;background:none}
.tab:hover{color:var(--text)}.tab.active{color:var(--primary);border-bottom-color:var(--primary)}

/* 菜单网格 */
.menu-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-3)}
.menu-item{display:flex;flex-direction:column;align-items:center;gap:var(--space-2);padding:var(--space-5) var(--space-3);background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-md);text-decoration:none;color:var(--text);transition:var(--transition);cursor:pointer}
.menu-item:hover{border-color:var(--primary);box-shadow:var(--shadow-md);transform:translateY(-1px)}
.menu-item-icon{width:40px;height:40px;display:flex;align-items:center;justify-content:center;font-size:20px;font-weight:800;color:var(--primary)}
.menu-item-label{font-size:var(--text-sm);font-weight:600}

/* 信息行 */
.info-row{display:flex;justify-content:space-between;align-items:center;padding:var(--space-3) 0;border-bottom:1px solid var(--border-light)}
.info-row:last-child{border-bottom:none}
.info-key{font-size:var(--text-sm);color:var(--text-secondary)}
.info-value{font-size:var(--text-sm);font-weight:600;text-align:right}

/* 空状态 */
.empty-state{text-align:center;padding:var(--space-10) var(--space-4)}
.empty-state-text{color:var(--text-muted);font-size:var(--text-sm)}

/* 模态框 */
.modal-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,0.4);z-index:999;align-items:center;justify-content:center}
.modal-overlay.active{display:flex}
.modal{background:var(--surface);border-radius:var(--radius-lg);padding:var(--space-8);max-width:480px;width:90%;box-shadow:var(--shadow-xl)}

/* 管理布局 */
.admin-layout{display:flex;min-height:100vh}
.sidebar{width:240px;background:var(--surface);border-right:1px solid var(--border);padding:var(--space-5) 0;position:sticky;top:0;height:100vh;overflow-y:auto;flex-shrink:0}
.sidebar-header{padding:0 var(--space-5) var(--space-5);font-size:var(--text-lg);font-weight:800;color:var(--primary);letter-spacing:-0.5px;border-bottom:1px solid var(--border);margin-bottom:var(--space-3)}
.sidebar-link{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-3) var(--space-5);font-size:var(--text-sm);font-weight:500;color:var(--text-secondary);text-decoration:none;transition:var(--transition);border-left:3px solid transparent}
.sidebar-link:hover{color:var(--primary);background:var(--primary-light)}
.sidebar-link.active{color:var(--primary);background:var(--primary-light);border-left-color:var(--primary);font-weight:600}
.main-content{flex:1;padding:var(--space-6);min-width:0}

/* 工具类 */
.text-center{text-align:center}.text-right{text-align:right}
.text-sm{font-size:var(--text-sm)}.text-xs{font-size:var(--text-xs)}
.text-muted{color:var(--text-muted)}.text-secondary{color:var(--text-secondary)}
.text-primary{color:var(--primary)}.text-success{color:var(--success)}.text-danger{color:var(--danger)}.text-warning{color:var(--warning)}
.font-bold{font-weight:700}.font-mono{font-family:var(--font-mono)}
.mt-1{margin-top:var(--space-1)}.mt-2{margin-top:var(--space-2)}.mt-3{margin-top:var(--space-3)}
.mt-4{margin-top:var(--space-4)}.mt-6{margin-top:var(--space-6)}.mt-8{margin-top:var(--space-8)}
.mb-2{margin-bottom:var(--space-2)}.mb-4{margin-bottom:var(--space-4)}.mb-6{margin-bottom:var(--space-6)}
.p-4{padding:var(--space-4)}.p-6{padding:var(--space-6)}
.gap-2{gap:var(--space-2)}.gap-3{gap:var(--space-3)}.gap-4{gap:var(--space-4)}
.flex{display:flex}.flex-col{flex-direction:column}.flex-1{flex:1}
.items-center{align-items:center}.justify-between{justify-content:space-between}.justify-center{justify-content:center}
.w-full{width:100%}.hidden{display:none}
.rounded{border-radius:var(--radius-sm)}

/* 响应式 */
@media(max-width:768px){
    .admin-layout{flex-direction:column}
    .sidebar{width:100%;height:auto;position:static;display:flex;overflow-x:auto;padding:var(--space-2)}
    .sidebar-header{display:none}
    .sidebar-link{border-left:none;border-bottom:2px solid transparent;white-space:nowrap;padding:var(--space-2) var(--space-3)}
    .sidebar-link.active{border-left:none;border-bottom-color:var(--primary)}
    .main-content{padding:var(--space-4)}
    .menu-grid{grid-template-columns:repeat(2,1fr)}
    .stat-grid{grid-template-columns:repeat(2,1fr)}
    .form-row{flex-direction:column}
    .navbar{padding:0 var(--space-3)}
}
@media(max-width:480px){
    .container{padding:0 var(--space-3)}
    .card{padding:var(--space-4)}
    .menu-grid{grid-template-columns:1fr 1fr}
}

@keyframes fadeIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}
.animate-fade-in{animation:fadeIn .3s ease}