#usagePanel{grid-column:1/-1;min-width:0}
#usagePanel h2{margin:0 0 16px}
#usagePanel .usage-period{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:end}
#usagePanel .usage-period label{min-width:0;font-size:.8rem;display:grid;gap:4px}
#usagePanel input,#usagePanel select{width:100%;min-width:0;max-width:100%;box-sizing:border-box}
#usagePanel .usage-period input{display:block;min-inline-size:0;inline-size:100%;font-size:1rem;padding:10px;height:44px}
#usagePanel .usage-period .btn{font-size:.85rem;padding:10px 12px;min-height:44px;height:44px;margin:0}
#usagePanel #usageStatus:empty{display:none}
#usagePanel .usage-overview{margin:16px 0 8px;padding:16px;background:var(--bg);border:1px solid var(--line);border-radius:16px}
#usagePanel .usage-overline{font-size:.8rem;color:var(--muted);margin:0}
#usagePanel .usage-main-amount{font-size:2rem;font-weight:700;margin:8px 0 12px;line-height:1.2}
#usagePanel .usage-totals{margin:0}
#usagePanel .usage-totals>div{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;padding:9px 0;border-bottom:1px solid var(--line,#ddd);align-items:start;font-size:.9rem}
#usagePanel .usage-totals>div:last-child{border-bottom:0}
#usagePanel dd{margin:0;font-weight:650;text-align:right;max-width:11rem;overflow-wrap:anywhere}
#usagePanel .usage-caption{font-size:.75rem;color:var(--muted);margin:8px 0 0}
#usagePanel .usage-free{font-size:.8rem;color:var(--muted);margin:8px 0;padding:0;background:none;border:0}
#usagePanel details{margin:12px 0}
#usagePanel summary{cursor:pointer;font-weight:600;padding:8px 0;font-size:.9rem}
#usagePanel .usage-explanation{margin:0 0 16px}
#usagePanel .usage-explanation>summary{font-weight:400;color:var(--accent,#086bdc);font-size:.8rem}
#usagePanel .usage-explanation p,#usagePanel .usage-management p,#usagePanel .usage-user p{font-size:.85rem;line-height:1.5}
#usagePanel .usage-users{margin:16px 0}
#usagePanel .usage-users h3{font-size:1rem;margin:0 0 4px}
#usagePanel .usage-users>p{font-size:.75rem;margin:0 0 12px}
#usagePanel .usage-user-list{display:grid;gap:8px}
#usagePanel .usage-user{margin:0;border:1px solid var(--line,#dce3eb);border-radius:12px;padding:0 12px;background:var(--bg,#fff);min-width:0}
#usagePanel .usage-user>summary{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:center;padding:12px 0;list-style:none}
#usagePanel .usage-user>summary::-webkit-details-marker{display:none}
#usagePanel .usage-user-identity{overflow-wrap:anywhere;font-size:.85rem}
#usagePanel .usage-user-price{text-align:right;font-size:1rem;font-weight:700}
#usagePanel .usage-user-price small{display:block;max-width:125px;font-size:.65rem;font-weight:400;color:var(--muted);margin-top:3px}
#usagePanel .usage-user>summary::after{content:none}
#usagePanel .usage-management{border-top:1px solid var(--line,#dce3eb);padding-top:8px}
#usagePanel .usage-provider{padding:12px;border:1px solid var(--line);border-radius:12px;margin:12px 0}
#usagePanel .usage-provider h3{margin-top:0;font-size:1rem}
#usagePanel .usage-provider a{overflow-wrap:anywhere}
#usagePanel .usage-note{padding:8px;border-left:3px solid currentColor}
#usagePanel form{display:grid;gap:12px}
#usagePanel .usage-cost-row{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr) auto;gap:8px;align-items:end;margin-bottom:12px}
@media(max-width:600px){#usagePanel .usage-cost-row{grid-template-columns:1fr}}

.receipt-cost{border:1px solid var(--line,#d4dce5);border-radius:12px;padding:12px;margin:12px 0;background:var(--panel,#f5f8fb);font-size:.9rem}.receipt-cost>div{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}.receipt-cost p{margin:6px 0}.receipt-cost details{margin-top:6px}.usage-ticket{margin:10px 0}.usage-ticket>summary{cursor:pointer}