.server-sync-status { margin: 18px 12px 6px; color: #65756b; font-size: 11px; line-height: 1.6; }
.server-sync-status.failed { color: #b32632; }
.server-settings-panel { margin-bottom: 18px; }
.server-settings-panel h2 { margin: 0 0 18px; }
.server-month-panel { margin-top: 18px; }
.server-month-label { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 13px; }
.server-month-label input { border: 1px solid #ead7db; border-radius: 8px; padding: 7px 9px; background: white; font: inherit; }
.server-chart { min-height: 220px; display: flex; gap: 18px; align-items: flex-end; padding: 12px 6px 0; overflow-x: auto; }
.server-chart-column { flex: 1; min-width: 95px; text-align: center; }
.server-chart-column b { display: block; margin-bottom: 7px; color: #963947; }
.server-chart-bar { background: linear-gradient(#f28c96, #db4056); border-radius: 9px 9px 0 0; width: 60%; min-width: 28px; max-width: 80px; margin: 0 auto; }
.server-chart-bar.second { background: linear-gradient(#ffc2cb, #ee8394); }
.server-chart-column small { display: block; line-height: 1.65; padding-top: 9px; color: var(--muted); }
.server-attachment { display: block; width: 52px; height: 46px; }
.server-attachment img { width: 100%; height: 100%; object-fit: cover; border: 1px solid #ead7db; border-radius: 7px; }
.field input[readonly] { background: #fff3f5; }
.btn:disabled { opacity: .55; cursor: wait; }
@media (max-width: 760px) { .server-chart { gap: 10px; } .server-month-panel .panel-head { flex-wrap: wrap; gap: 10px; } }