* { box-sizing: border-box; }
:root { --blue:#1da1f2; --blue-soft:#e8f4fd; --bg:#f5f5f7; --line:#e7e7ea; --text:#303238; --muted:#878b93; --green:#21a366; --red:#d64545; }
html,body { margin:0; min-height:100%; font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Microsoft YaHei",sans-serif; color:var(--text); background:var(--bg); }
button,input,textarea,select { font:inherit; }
button { cursor:pointer; }
.login-page { min-height:100vh; display:flex; align-items:center; justify-content:center; background:linear-gradient(135deg,#1da1f2,#0d8bd9); }
.login-container { width:min(400px,calc(100vw - 32px)); padding:40px; background:white; border-radius:16px; box-shadow:0 18px 55px rgba(0,0,0,.2); }
.login-header { text-align:center; margin-bottom:28px; }.login-logo { width:60px; height:60px; margin:0 auto 16px; border-radius:16px; display:grid; place-items:center; color:#fff; font-size:31px; font-weight:700; background:linear-gradient(135deg,#1da1f2,#0d8bd9); }.login-header h1 { margin:0 0 8px; font-size:24px; }.login-header p { margin:0; color:#888; font-size:14px; }
label { display:block; color:#666; font-size:13px; margin-bottom:17px; font-weight:500; } label input,label textarea,label select { display:block; width:100%; margin-top:8px; padding:13px 14px; border:2px solid #e2e3e5; border-radius:10px; outline:none; background:#fff; color:var(--text); } label input:focus,label textarea:focus,label select:focus { border-color:var(--blue); }
.login-btn,.btn-primary { width:100%; border:0; color:#fff; background:var(--blue); border-radius:9px; padding:13px; font-weight:600; }.login-btn:hover,.btn-primary:hover { background:#1a8cd8; }.login-btn:disabled { background:#bbb; cursor:wait; }.error-msg { display:none; padding:11px 12px; border-radius:8px; background:#fff0f0; color:#b52525; margin-bottom:16px; font-size:13px; }.error-msg.show { display:block; }
.login-tabs { display:flex; gap:4px; padding:4px; margin-bottom:20px; background:#f3f4f5; border-radius:9px; }.login-tabs button { flex:1; border:0; border-radius:7px; padding:9px; color:#777; background:transparent; }.login-tabs button.active { color:var(--blue); background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.08); font-weight:650; }
.app-shell { min-height:100vh; display:flex; }.sidebar { width:220px; position:fixed; inset:0 auto 0 0; background:#fff; border-right:1px solid var(--line); display:flex; flex-direction:column; z-index:20; }.sidebar-header { display:flex; align-items:center; gap:10px; padding:16px; border-bottom:1px solid #f1f1f1; }.sidebar-logo { width:32px; height:32px; display:grid; place-items:center; border-radius:8px; color:#fff; background:linear-gradient(135deg,#1da1f2,#0d8bd9); }.sidebar-title { font-weight:700; font-size:15px; }.sidebar-section { padding:8px 0; }.sidebar-section-title { padding:8px 16px; color:#999; font-size:11px; text-transform:uppercase; }.sidebar-group-title { display:flex; justify-content:space-between; align-items:center; padding:10px 16px; font-size:14px; font-weight:600; color:#444; }.sidebar-subitems .sidebar-item { padding-left:28px; }.sidebar-item { display:flex; align-items:center; gap:10px; padding:10px 16px; color:#555; font-size:13px; transition:.15s; }.sidebar-item:hover { background:#f7f7f7; }.sidebar-item.active { color:var(--blue); background:var(--blue-soft); font-weight:600; }.sidebar-item-icon { width:20px; text-align:center; font-size:16px; }.sidebar-item-count { margin-left:auto; padding:2px 6px; border-radius:8px; color:#666; background:#e5e5e5; font-size:10px; }.sidebar-item.active .sidebar-item-count { color:#fff; background:var(--blue); }.sidebar-footer { margin-top:auto; padding:12px; border-top:1px solid #f1f1f1; }.sidebar-footer button { width:100%; padding:10px; border:0; border-radius:8px; font-size:13px; }.refresh-btn { color:#fff; background:var(--blue); }.logout-btn { margin-top:8px; color:#666; background:#f3f3f4; }
.main { margin-left:220px; flex:1; min-width:0; }.content-header { height:56px; display:flex; align-items:center; padding:0 20px; background:#fff; border-bottom:1px solid var(--line); font-size:17px; font-weight:650; }.content-body { padding:16px; }.page { display:none; }.page.active { display:block; }
.calendar-wrap,.webmon-wrap,.mon-row { display:flex; gap:16px; }.calendar-box,.day-panel,.list-box,.webmon-panel,.webmon-add,.mon-panel,.stat-card,.filter-panel { background:#fff; border-radius:12px; box-shadow:0 1px 3px rgba(0,0,0,.07); }.calendar-box { width:300px; flex-shrink:0; overflow:hidden; }.calendar-head,.panel-head { padding:12px 16px; border-bottom:1px solid #f0f0f0; display:flex; align-items:center; justify-content:space-between; font-weight:650; }.calendar-nav button { width:28px; height:28px; border:0; border-radius:6px; background:#f5f5f6; margin-left:4px; }.calendar-days,.calendar-grid { display:grid; grid-template-columns:repeat(7,1fr); }.calendar-days { padding:7px 8px; background:#fafafa; text-align:center; font-size:11px; color:#888; }.calendar-grid { gap:2px; padding:8px; }.cal-day { aspect-ratio:1; display:flex; flex-direction:column; align-items:center; justify-content:center; border-radius:7px; font-size:12px; position:relative; }.cal-day:hover { background:#f3f4f5; }.cal-day.today { background:var(--blue-soft); }.cal-day.selected { background:var(--blue); color:#fff; }.cal-day.other { color:#ccc; }.cal-dot { width:4px; height:4px; border-radius:50%; background:#1da1f2; margin-top:2px; }.day-panel { flex:1; min-width:0; overflow:hidden; }.panel-scroll { padding:12px; max-height:calc(100vh - 120px); overflow:auto; }.panel-count { color:#888; font-weight:400; font-size:12px; }.empty { padding:40px 20px; text-align:center; color:#999; font-size:13px; }
.filter-toggle-bar { margin-bottom:12px; }.filter-toggle-btn { width:100%; display:flex; justify-content:space-between; padding:12px 16px; border:1px solid #e1e2e5; border-radius:8px; background:#fff; color:#333; }.filter-panel { padding:20px; margin-bottom:16px; }.filter-header { display:flex; gap:8px; align-items:baseline; margin-bottom:20px; }.filter-title { font-weight:650; }.filter-subtitle,.muted { color:#999; font-size:12px; }.filter-section { margin-bottom:17px; }.filter-section-label { margin-bottom:10px; font-weight:600; font-size:13px; }.filter-label-en { color:#999; font-weight:400; font-size:11px; }.filter-btns { display:flex; flex-wrap:wrap; gap:8px; }.filter-btn { padding:8px 13px; border:1px solid #e1e2e5; border-radius:8px; color:#555; background:#fff; font-size:12px; }.filter-btn.active,.filter-btn:hover { color:#fff; background:var(--blue); border-color:var(--blue); }.filter-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; }.search-input { width:100%; padding:10px 12px; border:1px solid #ddd; border-radius:8px; }
.list-row { display:flex; align-items:center; gap:16px; padding:13px 16px; border-bottom:1px solid #f0f0f0; cursor:pointer; }.list-row:last-child { border-bottom:0; }.list-row:hover { background:#fafafa; }.list-info { flex:1; min-width:0; }.list-name { font-size:14px; font-weight:650; margin-bottom:5px; }.list-desc,.list-sub { color:#666; font-size:12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }.list-tags { display:flex; align-items:center; flex-wrap:wrap; gap:7px; }.tag { padding:4px 7px; border-radius:5px; background:#f3f4f6; color:#8b9199; font-size:11px; }.tag-blue { color:var(--blue); background:var(--blue-soft); }.grade { min-width:38px; text-align:center; font-weight:700; }.grade-SS { color:#111; background:linear-gradient(135deg,#ffd700,#ff6b00); }.grade-S { color:#222; background:linear-gradient(135deg,#ddd,#aaa); }.grade-A { color:#fff; background:linear-gradient(135deg,#cd7f32,#8b4513); }.grade-B { color:#fff; background:#888; }
.proj-card { padding:12px; border:1px solid #e8e8e8; border-radius:10px; margin-bottom:10px; cursor:pointer; }.proj-card:hover { border-color:var(--blue); }.proj-head { display:flex; align-items:center; gap:8px; margin-bottom:6px; }.proj-logo { width:28px; height:28px; border-radius:7px; background:linear-gradient(135deg,#e5f4ff,#cde8f8); }.proj-name { flex:1; font-weight:650; font-size:13px; }.proj-desc { color:#666; font-size:12px; }.proj-meta { display:flex; gap:10px; color:#888; font-size:11px; margin-top:7px; }
.webmon-panel,.webmon-add { flex:1; min-width:0; overflow:hidden; }.webmon-add { max-width:320px; }.webmon-item { display:flex; gap:12px; align-items:center; padding:12px; border-bottom:1px solid #f0f0f0; }.webmon-item-url { flex:1; min-width:0; color:var(--blue); font-size:13px; word-break:break-all; }.webmon-item-remark { color:#888; font-size:11px; margin-top:4px; }.btn { border:0; border-radius:7px; padding:8px 12px; font-size:12px; }.btn-primary { width:auto; }.btn-secondary { color:#666; background:#f0f1f2; }.btn-danger { color:#b33; background:#fff0f0; }
.mon-wrap { max-width:1080px; }.mon-stats { display:grid; grid-template-columns:repeat(5,1fr); gap:12px; margin-bottom:16px; }.stat-card { padding:18px; text-align:center; }.stat-value { color:var(--blue); font-size:28px; font-weight:700; }.stat-label { color:#888; font-size:12px; margin-top:4px; }.mon-row > .mon-panel { flex:1; min-width:0; }.mon-service-status { padding:11px 12px; border-radius:8px; background:#f2f3f4; color:#666; font-size:13px; margin-bottom:12px; }.mon-service-status.running { background:#d9f2df; color:#166534; }.mon-service-status.waiting { background:#fff8df; color:#906b00; }.service-info { color:#666; font-size:12px; line-height:1.8; }.service-actions { display:flex; gap:8px; margin-top:14px; }
.detail-overlay { position:fixed; inset:0; z-index:30; background:rgba(0,0,0,.28); display:none; }.detail-overlay.show { display:block; }.detail-side { position:fixed; z-index:31; top:0; right:-540px; width:520px; max-width:100vw; height:100vh; overflow:auto; background:#fff; box-shadow:-4px 0 20px rgba(0,0,0,.12); transition:right .25s; }.detail-side.open { right:0; }.detail-head { position:sticky; top:0; z-index:2; padding:16px; background:#fff; border-bottom:1px solid #eee; }.detail-close { float:right; border:0; background:transparent; color:#999; font-size:25px; }.detail-body { padding:16px; }.form-row { display:flex; gap:10px; }.form-row > label { flex:1; }.section-title { margin:18px 0 11px; padding-bottom:7px; border-bottom:2px solid var(--blue); font-size:14px; font-weight:700; }.grade-selector { display:flex; gap:7px; }.grade-selector button { padding:7px 13px; border:2px solid #ddd; border-radius:6px; background:#fff; font-weight:700; }.grade-selector button.active { border-color:var(--blue); }.monitor-btn { display:flex; align-items:center; gap:8px; padding:12px; border:2px solid #ddd; border-radius:8px; background:#f7f7f7; }.monitor-btn.active { color:var(--blue); border-color:var(--blue); background:var(--blue-soft); }.drawer-actions { display:flex; gap:8px; padding-top:16px; margin-top:16px; border-top:1px solid #eee; }.drawer-actions button { flex:1; }
.iframe-wrap { height:calc(100vh - 90px); border-radius:12px; overflow:hidden; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.07); }.iframe-wrap iframe { width:100%; height:100%; border:0; }
@media (max-width:900px) { .sidebar { width:62px; }.sidebar-title,.sidebar-group-title span,.sidebar-group-title i,.sidebar-item span,.sidebar-footer button:not(.refresh-btn) { display:none; }.sidebar-header,.sidebar-item { justify-content:center; padding-left:0; padding-right:0; }.sidebar-item-count { display:none; }.main { margin-left:62px; }.calendar-wrap,.webmon-wrap,.mon-row { flex-direction:column; }.calendar-box,.webmon-add { width:auto; max-width:none; }.mon-stats { grid-template-columns:repeat(2,1fr); }.detail-side { width:100%; }.filter-grid { grid-template-columns:repeat(2,1fr); } }