/* ===== Reset & Base ===== */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --primary:#2932e1;--primary-dark:#1e25b8;
  --bg:#f5f6fa;--card:#fff;
  --text:#333;--text-light:#888;--border:#e8e8e8;
  --success:#52c41a;--warning:#faad14;--danger:#f5222d;--info:#1890ff;
  --radius:8px;--shadow:0 2px 8px rgba(0,0,0,.08);
}
body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;background:var(--bg);color:var(--text);line-height:1.6;font-size:14px}
a{color:var(--primary);text-decoration:none}
a:hover{text-decoration:underline}

/* ===== Navbar ===== */
.navbar{background:#fff;box-shadow:0 1px 4px rgba(0,0,0,.1);display:flex;align-items:center;justify-content:space-between;padding:0 24px;height:56px;position:sticky;top:0;z-index:100}
.nav-brand a{font-size:18px;font-weight:700;color:var(--primary);text-decoration:none}
.nav-links{display:flex;gap:4px;align-items:center}
.nav-links a{padding:8px 16px;border-radius:var(--radius);color:var(--text);font-size:14px;text-decoration:none;transition:.2s}
.nav-links a:hover{background:var(--bg)}
.nav-links a.active{color:var(--primary);font-weight:600;background:rgba(41,50,225,.06)}
.nav-logout{color:var(--danger)!important}
.nav-toggle{display:none;background:none;border:none;cursor:pointer;flex-direction:column;gap:4px;padding:8px}
.nav-toggle span{width:20px;height:2px;background:var(--text);border-radius:1px}

/* ===== Container ===== */
.container{max-width:1200px;margin:0 auto;padding:24px}

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

/* ===== Stats Grid ===== */
.stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:16px;margin-bottom:24px}
.stat-card{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);padding:20px;text-align:center}
.stat-value{display:block;font-size:28px;font-weight:700;color:var(--primary)}
.stat-anomaly .stat-value{color:var(--danger)}
.stat-label{display:block;font-size:13px;color:var(--text-light);margin-top:4px}

/* ===== Card ===== */
.card{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden;margin-bottom:24px}

/* ===== Table ===== */
.data-table{width:100%;border-collapse:collapse}
.data-table th{background:var(--bg);padding:12px 16px;text-align:left;font-weight:600;font-size:13px;color:var(--text-light);white-space:nowrap}
.data-table td{padding:12px 16px;border-top:1px solid var(--border);font-size:14px}
.data-table tbody tr:hover{background:rgba(41,50,225,.02)}
.empty-row{text-align:center;color:var(--text-light);padding:32px!important}
.task-name{font-weight:500}
.task-notes{font-size:12px;color:var(--text-light);margin-top:2px}
.action-cell{white-space:nowrap}
.cookie-cell{max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:monospace;font-size:12px}

/* ===== Badges ===== */
.badge{display:inline-block;padding:2px 10px;border-radius:12px;font-size:12px;font-weight:500}
.badge-success{background:rgba(82,196,26,.1);color:var(--success)}
.badge-warning{background:rgba(250,173,20,.1);color:var(--warning)}
.badge-danger{background:rgba(245,34,45,.1);color:var(--danger)}
.badge-gray{background:rgba(0,0,0,.06);color:var(--text-light)}
.badge-info{background:rgba(24,144,255,.1);color:var(--info)}

/* ===== Buttons ===== */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:4px;padding:8px 20px;border-radius:var(--radius);border:none;cursor:pointer;font-size:14px;font-weight:500;transition:.2s;text-decoration:none}
.btn:hover{text-decoration:none;opacity:.9}
.btn-primary{background:var(--primary);color:#fff}
.btn-secondary{background:#f0f0f0;color:var(--text)}
.btn-danger{background:var(--danger);color:#fff}
.btn-info{background:var(--info);color:#fff}
.btn-sm{padding:4px 12px;font-size:12px}
.btn-block{width:100%}

/* ===== Forms ===== */
.form-group{margin-bottom:16px}
.form-group label{display:block;margin-bottom:6px;font-weight:500;font-size:14px}
.required{color:var(--danger)}
.form-input{width:100%;padding:8px 12px;border:1px solid var(--border);border-radius:var(--radius);font-size:14px;transition:.2s;background:#fff}
.form-input:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 2px rgba(41,50,225,.1)}
.form-textarea{width:100%;padding:8px 12px;border:1px solid var(--border);border-radius:var(--radius);font-size:14px;font-family:monospace;resize:vertical;transition:.2s}
.form-textarea:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 2px rgba(41,50,225,.1)}
.form-hint{font-size:12px;color:var(--text-light);margin-top:4px}
.form-error{color:var(--danger);font-size:13px;margin-top:8px}
.input-error{border-color:var(--danger)!important}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.input-group{display:flex;align-items:center;gap:8px}
.input-group .form-input{flex:1}
.input-group-text{color:var(--text-light);font-size:14px;white-space:nowrap}

/* ===== Form Sections ===== */
.form-section{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);padding:24px;margin-bottom:24px}
.section-title{font-size:16px;font-weight:600;margin-bottom:20px;padding-bottom:12px;border-bottom:1px solid var(--border)}
.form-actions{display:flex;gap:12px;margin-top:24px}

/* ===== Weekday Picker ===== */
.weekday-picker{display:flex;flex-wrap:wrap;gap:8px}
.weekday-chip{display:inline-flex;align-items:center;cursor:pointer}
.weekday-chip input{display:none}
.weekday-chip span{padding:6px 14px;border:1px solid var(--border);border-radius:20px;font-size:13px;transition:.2s}
.weekday-chip input:checked+span{background:var(--primary);color:#fff;border-color:var(--primary)}

/* ===== Login ===== */
.login-wrap{display:flex;justify-content:center;align-items:center;min-height:calc(100vh - 56px)}
.login-card{background:var(--card);border-radius:12px;box-shadow:0 4px 24px rgba(0,0,0,.1);padding:48px 40px;width:100%;max-width:420px;text-align:center}
.login-title{font-size:24px;font-weight:700;color:var(--primary);margin-bottom:8px}
.login-subtitle{color:var(--text-light);font-size:14px;margin-bottom:32px}
.login-form .form-group{text-align:left}

/* ===== Modal ===== */
.modal{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.5);display:flex;justify-content:center;align-items:center;z-index:200}
.modal-content{background:#fff;border-radius:12px;padding:32px;width:100%;max-width:500px;max-height:90vh;overflow-y:auto}
.modal-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px}
.modal-header h3{font-size:18px;font-weight:600}
.modal-close{background:none;border:none;font-size:24px;cursor:pointer;color:var(--text-light);line-height:1}

/* ===== Filter Bar ===== */
.filter-bar{display:flex;gap:12px;margin-bottom:16px}
.filter-bar .form-input{max-width:200px}

/* ===== Pagination ===== */
.pagination{display:flex;justify-content:center;gap:8px;margin-top:24px}
.pagination button{padding:6px 14px;border:1px solid var(--border);border-radius:var(--radius);background:#fff;cursor:pointer;font-size:13px}
.pagination button:hover{background:var(--bg)}
.pagination button.active{background:var(--primary);color:#fff;border-color:var(--primary)}
.pagination button:disabled{opacity:.5;cursor:not-allowed}

/* ===== Toast ===== */
.toast{position:fixed;bottom:24px;right:24px;background:#333;color:#fff;padding:12px 24px;border-radius:var(--radius);box-shadow:0 4px 12px rgba(0,0,0,.2);z-index:300;opacity:0;transition:.3s;transform:translateY(20px)}
.toast.show{opacity:1;transform:translateY(0)}
.toast.success{background:var(--success)}
.toast.error{background:var(--danger)}

/* ===== Responsive ===== */
@media(max-width:768px){
  .nav-links{display:none;position:absolute;top:56px;left:0;right:0;background:#fff;flex-direction:column;padding:16px;box-shadow:0 2px 8px rgba(0,0,0,.1)}
  .nav-links.open{display:flex}
  .nav-toggle{display:flex}
  .form-row{grid-template-columns:1fr}
  .stats-grid{grid-template-columns:repeat(2,1fr)}
  .data-table{font-size:12px}
  .data-table th,.data-table td{padding:8px}
  .action-cell{display:flex;flex-wrap:wrap;gap:4px}
}