.server-analytics { margin-top: 14px; }
.server-analytics-periods { display: flex; gap: 7px; }
.server-analytics-periods .active { color: #fff; border-color: #795434; background: #795434; }
.server-analytics-state { display: flex; min-height: 120px; align-items: center; justify-content: center; gap: 12px; color: #7b6c60; }
.server-analytics-kpis { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 10px; margin-top: 14px; }
.server-analytics-kpis > div { padding: 16px; border-radius: 16px; background: #f7f2eb; }
.server-analytics-kpis span,.server-analytics-kpis small { display: block; color: #7b6c60; }
.server-analytics-kpis strong { display: block; margin: 7px 0; color: #46372c; font-family: var(--font); font-size: 28px; }
.server-analytics-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 14px; margin-top: 14px; }
.server-analytics-grid > div { min-width: 0; padding: 16px; border: 1px solid #eee5dc; border-radius: 16px; }
.server-analytics-grid h4 { margin: 0 0 14px; color: #4c3e33; }
.server-analytics-chart { display: flex; min-height: 150px; align-items: flex-end; justify-content: space-around; gap: 8px; }
.server-analytics-chart > div { display: flex; min-width: 24px; align-items: center; flex: 1; flex-direction: column; gap: 7px; color: #89796b; font-size: 11px; }
.server-analytics-chart i { display: block; width: min(28px,75%); min-height: 8px; border-radius: 8px 8px 3px 3px; background: #9d7449; }
.server-analytics-list { display: grid; gap: 10px; }
.server-analytics-list > div { display: flex; justify-content: space-between; gap: 10px; padding-bottom: 9px; border-bottom: 1px solid #eee7df; }
.server-analytics-list span { overflow: hidden; color: #67584c; text-overflow: ellipsis; white-space: nowrap; }
.server-analytics-list strong { flex: none; color: #795434; }
.server-analytics-list p,.server-analytics-chart p { color: #8a7b6e; }
@media (max-width:900px) { .server-analytics-grid { grid-template-columns: 1fr; } .server-analytics-kpis { grid-template-columns: repeat(2,minmax(0,1fr)); } }

.modal:has(#serverTplSections) { width: 680px; overflow: hidden; display: flex; flex-direction: column; }
.modal:has(#serverTplSections) .modal-body { min-height: 0; overflow: auto; }
.modal:has(#serverTplSections) .modal-footer { flex: 0 0 auto; padding-top: 12px; border-top: 1px solid var(--line); background: #fff; }
.server-template-builder { display: grid; gap: 10px; padding: 13px; border: 1px solid #e8ddd2; border-radius: 16px; background: #fbf8f4; }
.server-template-builder-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; }
.server-template-builder-head strong,.server-template-builder-head span { display: block; }
.server-template-builder-head strong { color: #4c3a2c; font-size: 11px; }
.server-template-builder-head > div > span { margin-top: 4px; color: #8f8073; font-size: 8px; }
.server-template-builder-head label { min-width: 180px; color: #7e7063; font-size: 8px; }
.server-template-builder-head select { width: 100%; height: 36px; margin-top: 5px; border: 1px solid var(--line); border-radius: 10px; background: #fff; color: var(--ink); padding: 0 10px; }
.server-template-sections { display: grid; gap: 7px; }
.server-template-section { display: grid; grid-template-columns: 28px minmax(0,1fr) auto auto; align-items: center; gap: 9px; padding: 8px 9px; border: 1px solid #e9dfd5; border-radius: 12px; background: #fff; }
.server-template-section-order { display: grid; width: 26px; height: 26px; place-items: center; border-radius: 8px; background: #f1e6da; color: #765234; font-size: 9px; font-weight: 800; }
.server-template-section-copy { min-width: 0; display: grid; grid-template-columns: 74px minmax(0,1fr); align-items: center; gap: 8px; }
.server-template-section-copy strong { color: #756657; font-size: 8px; }
.server-template-section-copy input { min-width: 0; height: 34px; border: 1px solid #e5dacf; border-radius: 9px; padding: 0 9px; color: #46372c; }
.server-template-section-visible { display: inline-flex; align-items: center; gap: 5px; color: #72583f; font-size: 8px; white-space: nowrap; }
.server-template-section-actions { display: flex; gap: 4px; }
.server-template-section-actions button { width: 29px; height: 29px; border: 1px solid #e2d6ca; border-radius: 8px; background: #fff; color: #795737; cursor: pointer; }
.server-template-section-actions button:hover { border-color: #9d7449; background: #f7eee4; }
@media (max-width:700px) { .server-template-builder-head { align-items: stretch; flex-direction: column; } .server-template-builder-head label { min-width: 0; } .server-template-section { grid-template-columns: 26px minmax(0,1fr) auto; } .server-template-section-copy { grid-template-columns: 1fr; gap: 3px; } .server-template-section-actions { grid-column: 2/4; justify-content: flex-end; } }