.detail-chart-starter { border: 1px solid #d8e5ed; border-radius: 18px; background: #f8fbfd; padding: 22px; margin: 16px 0; }
.detail-chart-starter-head { display: flex; align-items: center; gap: 24px; justify-content: space-between; }
.detail-chart-starter-head > div { min-width: 0; }
.detail-chart-starter h3 { margin: 4px 0 8px; font-size: 21px; }
.detail-chart-starter p { margin: 6px 0; color: #62778c; line-height: 1.7; font-size: 13px; }
.detail-chart-starter-head > button { flex: 0 0 auto; }
.detail-chart-preset-gallery { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; margin: 18px 0; }
.detail-chart-preset-gallery button { min-width: 0; text-align: left; padding: 14px; display: grid; grid-template-columns: 26px 1fr; gap: 4px 8px; white-space: normal; height: auto; }
.detail-chart-preset-gallery button > span { grid-row: span 2; color: #2086a5; font-size: 12px; padding-top: 2px; }
.detail-chart-preset-gallery b { font-size: 14px; }
.detail-chart-preset-gallery small { font-weight: 400; color: #6b7e90; line-height: 1.5; }
.detail-chart-quick-guide { border-top: 1px solid #dce7ef; padding-top: 12px; }
.detail-chart-quick-guide summary { font-size: 14px; font-weight: 600; cursor: pointer; }
.detail-chart-quick-guide ol { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px 28px; padding-left: 20px; line-height: 1.8; font-size: 13px; color: #466078; }
.detail-chart-preview { padding: 16px!important; min-width: 0; overflow: hidden; }
.detail-chart-preview > b { display: block; font-size: 15px; }
.detail-chart-preview > p { font-size: 11px; line-height: 1.65; color: #6b7e90; margin: 7px 0 12px; }
.detail-chart-legend { display: flex; flex-wrap: wrap; gap: 8px 12px; margin: 8px 0 16px; }
.detail-chart-legend span { font-size: 11px; display: inline-flex; align-items: center; gap: 5px; }
.detail-chart-legend i { height: 7px; width: 7px; border-radius: 50%; }
.detail-chart-preview .school-chart-line { min-width: 0!important; width: 100%!important; height: auto!important; }
.detail-chart-preview .chart-column-layout { min-width: 0; gap: 10px; padding: 24px 4px 0; }
.detail-chart-preview .chart-column-bars { height: 150px; gap: 5px; }
.detail-chart-preview .chart-column-bar b { font-size: 10px; }
.detail-chart-preview .chart-column-label { font-size: 11px; }
.detail-chart-preview .chart-data-table { font-size: 11px; min-width: 0; }
@media(max-width:1100px) { .detail-chart-starter-head { align-items: flex-start; flex-direction: column; gap: 10px; } }
@media(max-width:760px) { .detail-chart-preset-gallery { grid-template-columns:repeat(2,minmax(0,1fr)); } .detail-chart-quick-guide ol { grid-template-columns:1fr; } }
.detail-chart-plot{position:relative;width:100%;padding-top:50%;margin:16px 0 8px;overflow:visible}
.detail-chart-plot i,.detail-chart-plot>span{position:absolute;box-sizing:border-box}
.detail-gridline,.detail-baseline{height:1px;background:#e8eef4}.detail-baseline{background:#bfceda}
.detail-axis-tick{left:0;width:11%;text-align:right;transform:translateY(-50%);font-size:11px;color:#70869b}
.detail-line-segment{height:2px;transform-origin:0 50%;border-radius:2px}.detail-line-point{width:7px;height:7px;border-radius:50%;transform:translate(-50%,-50%)}
.detail-grouped-bar{border-radius:3px 3px 0 0;min-height:1px}
.detail-category{top:84%;transform:translateX(-50%);text-align:center;font-size:11px;color:#637b90;overflow-wrap:anywhere}
.detail-chart-values>div{display:flex;gap:10px;padding:8px 0;border-top:1px solid #eef2f6;font-size:12px}.detail-chart-values b{flex:0 0 40px;color:#415b70}.detail-chart-values>div>span{display:flex;flex-wrap:wrap;gap:5px 12px;min-width:0}.detail-chart-values small{font-size:11px;color:#526c83}.detail-chart-values .missing{color:#8a99a6}
.detail-chart-ring{position:relative;width:65%;padding-top:65%;margin:auto}.detail-ring-segment{position:absolute}.detail-ring-center{position:absolute;left:24%;top:24%;width:52%;height:52%;display:flex;align-items:center;justify-content:center;flex-direction:column;background:white;border-radius:50%;z-index:1}.detail-ring-center b{font-size:22px}.detail-ring-center span{font-size:11px;color:#71869a}
.detail-ring-values>div{display:flex;align-items:center;gap:8px;font-size:12px;margin:8px 0}.detail-ring-values i{width:8px;height:8px;border-radius:50%}.detail-ring-values b{margin-left:auto}
.detail-horizontal>div{padding:8px 0;font-size:12px}.detail-horizontal>div>div{display:grid;grid-template-columns:85px minmax(0,1fr) 48px;gap:8px;align-items:center;margin:7px 0}.detail-horizontal i{position:relative;height:7px;border-radius:5px;background:#edf2f6}.detail-horizontal em{position:absolute;top:0;height:100%;border-radius:5px}.detail-horizontal strong{text-align:right;font-size:12px}
.detail-chart-empty{text-align:center;color:#6a8195;background:#f6f9fc;border-radius:12px;padding:24px 12px;line-height:1.8}.detail-chart-preview .chart-data-table{display:block;overflow-x:auto;max-width:100%}
#schoolData .chart-preview-panel>div{flex-shrink:0}
#schoolData .school-chart-saved-list:not(:empty){min-height:82px;flex-shrink:0;padding-bottom:8px}
.detail-chart-ring{overflow:hidden}
.detail-ring-outline{position:absolute;left:8%;top:8%;width:84%;height:84%;border-radius:50%;box-shadow:0 0 0 50px var(--detail-chart-background,#fff)}
.detail-ring-center{background:var(--detail-chart-background,#fff)}