/* ============================================================
   戒烟打卡系统 - 管理后台样式
   ============================================================ */
:root{
  --green-900:#052e16; --green-800:#14532d; --green-700:#15803d;
  --green-600:#16a34a; --green-100:#dcfce7; --green-50:#f0fdf4;
  --gray-900:#111827; --gray-600:#4b5563; --gray-500:#6b7280; --gray-400:#9ca3af;
  --gray-200:#e5e7eb; --gray-100:#f3f4f6;
  --shadow:0 2px 12px rgba(0,0,0,.06);
  --radius:12px;
}
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;background:#f1f5f2;color:var(--gray-900);display:flex;min-height:100vh}

/* 侧边栏 */
.sidebar{width:220px;background:linear-gradient(180deg,#052e16,#14532d);color:#fff;padding:20px 0;flex-shrink:0;position:sticky;top:0;height:100vh;overflow-y:auto}
.sidebar .brand{display:flex;align-items:center;gap:8px;padding:0 20px 20px;font-size:17px;font-weight:800}
.sidebar .brand .ic{width:34px;height:34px;border-radius:10px;background:rgba(255,255,255,.15);display:flex;align-items:center;justify-content:center;font-size:17px}
.sidebar nav a{display:flex;align-items:center;gap:10px;padding:12px 20px;color:rgba(255,255,255,.8);font-size:14px;cursor:pointer;transition:.2s}
.sidebar nav a:hover{background:rgba(255,255,255,.08)}
.sidebar nav a.active{background:var(--green-600);color:#fff;font-weight:600}
.sidebar .foot{padding:16px 20px;font-size:12px;color:rgba(255,255,255,.5);border-top:1px solid rgba(255,255,255,.1);margin-top:20px}

/* 主区域 */
.main{flex:1;padding:24px;min-width:0}
.main h1{font-size:20px;margin-bottom:18px}
.card{background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);padding:20px;margin-bottom:16px}
.card h2{font-size:15px;margin-bottom:14px;color:var(--gray-900)}

.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-bottom:16px}
.stat{background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);padding:16px;border-top:3px solid var(--green-600)}
.stat .num{font-size:24px;font-weight:800}
.stat .label{font-size:12px;color:var(--gray-500);margin-top:4px}

table{width:100%;border-collapse:collapse;font-size:13px}
th{text-align:left;padding:9px 10px;color:var(--gray-500);font-weight:600;font-size:12px;border-bottom:1px solid var(--gray-200);white-space:nowrap}
td{padding:9px 10px;border-bottom:1px solid var(--gray-100)}
tr:hover td{background:var(--gray-50)}
.tag{display:inline-block;padding:2px 9px;border-radius:999px;font-size:11px;background:var(--green-100);color:var(--green-800);font-weight:600}
.tag.red{background:#fee2e2;color:#b91c1c}
.tag.amber{background:#fef3c7;color:#92400e}
.tag.gray{background:var(--gray-100);color:var(--gray-600)}

.btn{display:inline-flex;align-items:center;gap:5px;padding:7px 13px;border-radius:8px;font-size:13px;font-weight:600;background:var(--green-600);color:#fff;border:none;cursor:pointer}
.btn:hover{background:var(--green-700)}
.btn.gray{background:var(--gray-100);color:var(--gray-600)} .btn.gray:hover{background:var(--gray-200)}
.btn.red{background:#fef2f2;color:#dc2626} .btn.red:hover{background:#fee2e2}
.btn.sm{padding:4px 9px;font-size:12px}
.btn:disabled{opacity:.5;cursor:not-allowed}

.input{width:100%;padding:9px 12px;border:1px solid var(--gray-200);border-radius:8px;font-size:13px;background:#fff}
.input:focus{outline:none;border-color:var(--green-500);box-shadow:0 0 0 3px rgba(34,197,94,.12)}
.form-item{margin-bottom:14px}
.form-item label{display:block;font-size:12px;font-weight:600;color:var(--gray-600);margin-bottom:5px}
.form-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px}

.toolbar{display:flex;gap:10px;align-items:center;margin-bottom:14px;flex-wrap:wrap}
.toolbar .search{flex:1;min-width:200px}
.pager{display:flex;align-items:center;gap:8px;margin-top:12px;justify-content:flex-end;font-size:12px;color:var(--gray-500)}

.toast{position:fixed;top:20px;right:20px;background:#111827;color:#fff;padding:10px 18px;border-radius:10px;font-size:13px;z-index:300;opacity:0;transition:.3s}
.toast.show{opacity:1}

.alert{padding:10px 14px;border-radius:8px;font-size:13px;margin-bottom:14px;display:none}
.alert.show{display:block}
.alert.err{background:#fef2f2;color:#b91c1c}
.alert.ok{background:#f0fdf4;color:#166534}

.mt16{margin-top:16px}
@media(max-width:760px){
  body{flex-direction:column}
  .sidebar{width:100%;height:auto;position:static;display:flex;flex-wrap:wrap;align-items:center;padding:10px}
  .sidebar .brand{padding:0 14px}
  .sidebar nav{display:flex;flex-wrap:wrap}
  .sidebar nav a{padding:8px 12px;font-size:13px}
  .sidebar .foot{display:none}
  .main{padding:16px}
}