.small-value { font-size: 16px; letter-spacing: 0; }
.chart-empty, .empty-data { width: 100%; display: grid; place-items: center; min-height: 120px; color: var(--muted); text-align: center; padding: 24px; }
tr[data-page-id] { cursor: pointer; }
.page-drawer { position: fixed; right: 0; top: 0; width: min(480px, 92vw); height: 100vh; background: #fff; z-index: 60; box-shadow: -20px 0 50px rgba(14,30,50,.16); padding: 30px; transform: translateX(105%); transition: .25s; overflow: auto; }
.page-drawer.open { transform: translateX(0); }
.drawer-backdrop { position: fixed; inset: 0; background: rgba(10,24,42,.36); z-index: 55; opacity: 0; pointer-events: none; transition: .25s; }
.drawer-backdrop.open { opacity: 1; pointer-events: auto; }
.drawer-close { position: absolute; right: 18px; top: 16px; width: 38px; height: 38px; border: 1px solid var(--line); background: #fff; border-radius: 9px; font-size: 25px; cursor: pointer; }
.page-drawer h2 { font-size: 28px; margin: 8px 0; }
.drawer-meta { color: var(--muted); font-size: 13px; line-height: 1.5; }
.detail-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 10px; margin: 22px 0; }
.detail-grid > div { background: #f7f9fc; border: 1px solid var(--line); border-radius: 10px; padding: 13px; }
.detail-grid small, .detail-grid strong { display: block; }
.detail-grid small { color: var(--muted); margin-bottom: 8px; }
.detail-grid strong { font-size: 20px; }
.detail-section { border-top: 1px solid var(--line); padding-top: 18px; margin-top: 18px; }
.detail-section h3 { font-size: 15px; }
.detail-section p { color: var(--muted); font-size: 13px; line-height: 1.55; }
@media(max-width:420px) { .page-drawer { padding: 24px 18px; } }