/* ui-kit.css — 现代卡片风设计系统（前后台共用）
 * 设计语言：清爽浅色、卡片化、圆角、柔和阴影、层次分明
 * 主色与全站统一为 var(--primary-color)
 */
:root{
  --c-primary:var(--primary-color);
  --c-primary-weak:#e8f1ff;
  --c-primary-dark:#0e5fd8;
  --c-bg:#f5f7fa;
  --c-surface:#ffffff;
  --c-text:#1f2733;
  --c-text-2:#5b6573;
  --c-text-3:#8a93a3;
  --c-border:#e6eaf0;
  --c-success:#22a06b;
  --c-warning:#f5a623;
  --c-danger:#e5484d;
  --radius-s:8px;
  --radius:12px;
  --radius-l:16px;
  --shadow-1:0 1px 3px rgba(20,40,80,.06),0 1px 2px rgba(20,40,80,.04);
  --shadow-2:0 6px 20px rgba(20,40,80,.08);
  --gap:16px;
  --maxw:1160px;
}
/* 容器与区块 */
.ui-container{max-width:var(--maxw);margin:0 auto;padding:24px;}
.ui-section{margin-bottom:28px;}
.ui-section-title{font-size:18px;font-weight:700;color:var(--c-text);margin:0 0 14px;display:flex;align-items:center;gap:8px;}
.ui-section-title .bar{width:4px;height:18px;border-radius:3px;background:var(--c-primary);display:inline-block;}
.ui-muted{color:var(--c-text-2);}
/* 卡片 */
.ui-card{background:var(--c-surface);border:1px solid var(--c-border);border-radius:var(--radius);box-shadow:var(--shadow-1);padding:20px;}
/* 统计网格 */
.ui-stat-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:var(--gap);}
.ui-stat{background:var(--c-surface);border:1px solid var(--c-border);border-radius:var(--radius);padding:18px 20px;box-shadow:var(--shadow-1);transition:transform .15s,box-shadow .15s;}
.ui-stat:hover{transform:translateY(-2px);box-shadow:var(--shadow-2);}
.ui-stat .ico{width:38px;height:38px;border-radius:10px;background:var(--c-primary-weak);color:var(--c-primary);display:flex;align-items:center;justify-content:center;font-size:20px;margin-bottom:12px;}
.ui-stat .num{font-size:26px;font-weight:800;color:var(--c-text);line-height:1.1;}
.ui-stat .label{font-size:13px;color:var(--c-text-2);margin-top:4px;}
/* 快捷入口 */
.ui-quick-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:var(--gap);}
.ui-quick{display:flex;align-items:center;gap:12px;padding:16px 18px;background:var(--c-surface);border:1px solid var(--c-border);border-radius:var(--radius);text-decoration:none;color:var(--c-text);box-shadow:var(--shadow-1);transition:.15s;}
.ui-quick:hover{border-color:var(--c-primary);box-shadow:var(--shadow-2);transform:translateY(-2px);}
.ui-quick .q-ico{width:40px;height:40px;border-radius:10px;background:var(--c-primary);color:#fff;display:flex;align-items:center;justify-content:center;font-size:20px;flex:none;}
.ui-quick .q-t{font-weight:600;}
.ui-quick .q-s{font-size:12px;color:var(--c-text-3);}
/* 面板（日志/列表） */
.ui-panel{background:var(--c-surface);border:1px solid var(--c-border);border-radius:var(--radius);box-shadow:var(--shadow-1);overflow:hidden;}
.ui-panel-head{padding:14px 18px;border-bottom:1px solid var(--c-border);font-weight:700;color:var(--c-text);display:flex;align-items:center;justify-content:space-between;}
.ui-panel-body{padding:8px 18px 16px;}
.ui-row{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px dashed var(--c-border);font-size:14px;}
.ui-row:last-child{border-bottom:none;}
.ui-row .r-main{flex:1;color:var(--c-text);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.ui-row .r-sub{font-size:12px;color:var(--c-text-3);}
.ui-row .r-time{font-size:12px;color:var(--c-text-3);white-space:nowrap;}
.ui-empty{padding:28px;text-align:center;color:var(--c-text-3);font-size:14px;}
/* 徽章与按钮 */
.ui-badge{display:inline-block;padding:2px 8px;border-radius:999px;font-size:12px;background:var(--c-primary-weak);color:var(--c-primary);}
.ui-btn{display:inline-flex;align-items:center;gap:6px;padding:9px 16px;border-radius:var(--radius-s);border:1px solid var(--c-border);background:var(--c-surface);color:var(--c-text);font-size:14px;cursor:pointer;text-decoration:none;transition:.15s;}
.ui-btn:hover{border-color:var(--c-primary);color:var(--c-primary);}
.ui-btn-primary{background:var(--c-primary);border-color:var(--c-primary);color:#fff;}
.ui-btn-primary:hover{background:var(--c-primary-dark);color:#fff;}
/* 两列布局 */
.ui-cols-2{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap);}
/* 响应式 */
@media(max-width:768px){
  .ui-cols-2{grid-template-columns:1fr;}
}
@media(max-width:640px){
  .ui-container{padding:16px;}
  .ui-stat-grid{grid-template-columns:repeat(2,1fr);}
}