/* Token management follows the reference's column hierarchy and spacing. */
#page-keys .endpoint-panel { display:block; padding:0; margin-bottom:32px; border:0; background:transparent; }
#page-keys .endpoint-panel h2 { margin:0 0 16px; color:var(--text); font-size:14px; font-weight:500; }
#page-keys .endpoint-panel>.endpoint-box { display:block; border:1px solid var(--border); border-radius:10px; overflow:hidden; background:var(--surface); }
#page-keys .endpoint-value { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:12px 16px; min-height:60px; }
#page-keys .endpoint-value code { font-size:14px; line-height:22px; min-width:0; overflow-wrap:anywhere; }
#page-keys .endpoint-value button { display:inline-flex; align-items:center; gap:6px; padding:5px 10px; min-height:32px; font-size:14px; border:0; border-radius:8px; flex-shrink:0; }
#page-keys .endpoint-value svg { width:16px; height:16px; }
#key-legacy-notice { border-top:1px solid var(--border); font-size:14px; }
#key-legacy-notice summary { padding:15px 16px; cursor:pointer; color:var(--accent); }
#key-legacy-notice p { margin:0; padding:0 16px 16px; color:var(--muted); }
#page-keys .key-management-panel>.panel-head { margin:0 0 16px; min-height:20px; }
#page-keys .key-management-panel h2 { font-size:14px; font-weight:500; }
#page-keys .key-counts { display:flex; flex-wrap:wrap; align-items:center; gap:16px; font-size:12px; }
#page-keys .key-counts button { display:inline-flex; align-items:baseline; gap:6px; padding:0; border:0; background:transparent; border-radius:0; min-height:20px; font-size:12px; color:var(--muted); }
#page-keys .key-counts b { font-size:12px; font-weight:400; color:var(--text); }
#page-keys .key-counts button:hover { color:var(--text); }
#page-keys .key-counts button:focus-visible { outline:2px solid var(--accent); outline-offset:4px; }
#page-keys .filter-bar { margin:0 0 12px; }
#page-keys .filter-bar .search { flex:0 1 288px; width:288px; height:32px; padding-left:12px; gap:8px; border:1px solid var(--field-border); border-radius:8px; }
#page-keys .search svg { width:16px; height:16px; flex-shrink:0; color:var(--placeholder); }
#page-keys .search input { min-height:0; height:18px; line-height:18px; width:100%; padding:0 8px; border-left:1px solid var(--border); border-radius:0; font-size:14px; }
#page-keys .key-table { width:100%; min-width:1100px; table-layout:fixed; white-space:nowrap; }
#page-keys .key-table .key-col-select { width:3.5%; }
#page-keys .key-table .key-col-name { width:11%; }
#page-keys .key-table .key-col-channel { width:11.6%; }
#page-keys .key-table .key-col-quota { width:17.15%; }
#page-keys .key-table .key-col-status { width:7.1%; }
#page-keys .key-table .key-col-expiry { width:8.75%; }
#page-keys .key-table .key-col-created { width:10.7%; }
#page-keys .key-table .key-col-used { width:16%; }
#page-keys .key-table .key-col-actions { width:14.2%; }
#page-keys .key-table th { padding:12px 14px; height:40px; font-size:12px; font-weight:400; line-height:16px; color:var(--muted); background:color-mix(in srgb,var(--soft) 45%,var(--surface)); }
#page-keys .key-table td { padding:12px 14px; height:71px; font-size:14px; line-height:22px; vertical-align:middle; border-color:var(--border); }
#page-keys .key-table th.key-select-cell,#page-keys .key-table td.key-select-cell { padding-left:16px; padding-right:0; }
#page-keys .key-table tr.selected { background:color-mix(in srgb,var(--accent-soft) 35%,var(--surface)); }
#page-keys .key-select-cell input { appearance:none; display:block; width:16px; height:16px; min-height:0; margin:0; padding:0; border:1px solid var(--field-border); border-radius:50%; background:var(--surface); cursor:pointer; box-shadow:none; }
#page-keys .key-select-cell input:checked,#page-keys .key-select-cell input:indeterminate { background:var(--accent); border-color:var(--accent); }
#page-keys .key-select-cell input:checked::after { content:''; display:block; width:4px; height:7px; border:solid white; border-width:0 1.5px 1.5px 0; transform:rotate(45deg); margin:2px 0 0 5px; }
#page-keys .key-select-cell input:indeterminate::after { content:''; display:block; width:7px; border-top:1.5px solid white; margin:6px auto; }
#page-keys .key-select-cell input:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
#page-keys .key-display-name { font-size:14px; line-height:22px; font-weight:500; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#page-keys .key-value-row { display:flex; justify-content:flex-start; align-items:center; gap:5px; min-height:20px; margin:0; }
#page-keys .key-value-row code { font-size:12px; line-height:18px; color:var(--muted); }
#page-keys .key-inline-copy { border:0; border-radius:4px; display:inline-flex; align-items:center; justify-content:center; width:22px; height:22px; min-height:0; padding:3px; background:transparent; color:var(--placeholder); }
#page-keys .key-inline-copy svg { display:block; width:15px; height:15px; }
#page-keys .key-inline-copy:hover { background:var(--soft); color:var(--text); }
#page-keys .key-inline-copy:disabled { opacity:.35; cursor:not-allowed; }
#page-keys .key-channel-name { display:block; max-width:100%; overflow:hidden; text-overflow:ellipsis; }
#page-keys .key-secondary { display:block; font-size:12px; line-height:18px; color:var(--muted); }
#page-keys .key-quota-value { display:inline; padding:0; min-height:0; border:0; background:transparent; color:var(--text); font-size:14px; font-variant-numeric:tabular-nums; }
#page-keys .key-quota-value:hover { color:var(--accent); }
#page-keys .key-quota-limit { font-size:12px; color:var(--placeholder); }
#page-keys .key-time { color:var(--muted); font-variant-numeric:tabular-nums; }
#page-keys .key-unused { color:var(--placeholder); }
#page-keys .key-table .badge { font-size:14px; color:var(--text); gap:5px; }
#page-keys .key-table .badge.off { color:var(--muted); }
#page-keys .key-help { display:inline-grid; place-items:center; width:12px; height:12px; border:1px solid var(--placeholder); border-radius:50%; color:var(--placeholder); font-size:9px; line-height:10px; cursor:help; }
#page-keys .key-table .row-actions { min-width:0; max-width:none; padding-left:4px; padding-right:16px; }
#page-keys .key-row-actions { display:flex; justify-content:flex-end; align-items:center; gap:10px; }
#page-keys .key-table .key-row-actions>button { display:inline-flex; justify-content:center; align-items:center; gap:3px; min-height:28px; padding:2px 0; border:0; border-radius:4px; background:transparent; font-size:14px; line-height:22px; color:var(--muted); }
#page-keys .key-table .key-row-actions>button:hover { background:var(--soft); color:var(--text); }
#page-keys .key-table .key-row-actions>button:disabled { opacity:.4; cursor:not-allowed; }
#page-keys .key-row-actions svg { width:14px; height:14px; }
#page-keys .key-table .key-more-button { width:22px; }
#page-keys .key-more-button svg { width:18px; height:18px; }
#page-keys .key-selection { display:flex; align-items:center; gap:18px; padding:9px 12px; margin-bottom:12px; border-radius:8px; background:var(--soft); font-size:12px; }
#page-keys .key-selection button { padding:3px 0; font-size:12px; }
#page-keys .key-selection button:last-child { margin-left:auto; color:var(--muted); }
@media(max-width:720px) {
 #page-keys .endpoint-panel { margin-bottom:28px; }
 #page-keys .endpoint-panel h2 { margin-bottom:12px; }
 #page-keys .endpoint-value { gap:10px; padding:12px; }
 #page-keys .endpoint-value code { font-size:12px; line-height:20px; }
 #page-keys .endpoint-value button { font-size:12px; min-height:36px; }
 #page-keys .key-management-panel>.panel-head { display:block; margin-bottom:12px; }
 #page-keys .key-counts { margin-top:10px; gap:16px; }
 #page-keys .filter-bar .search { width:100%; flex-basis:100%; height:38px; }
 #page-keys .key-table,#page-keys .key-table tbody { display:block; min-width:0; width:100%; table-layout:auto; white-space:normal; }
 #page-keys .key-table colgroup,#page-keys .key-table thead { display:none; }
 #page-keys .key-table tr { position:relative; display:block; padding:14px 16px; }
 #page-keys .key-table td { display:flex; justify-content:space-between; align-items:baseline; flex-wrap:wrap; gap:8px; padding:5px 0; height:auto; text-align:right; border:0; font-size:13px; line-height:22px; }
 #page-keys .key-table td::before { display:block; content:attr(data-label); color:var(--muted); min-width:72px; margin-right:auto; text-align:left; font-size:12px; }
 #page-keys .key-table td.key-select-cell { position:absolute; top:18px; right:16px; display:block; padding:0; margin:0; border:0; }
 #page-keys .key-select-cell input { width:18px; height:18px; }
 #page-keys .key-select-cell input:checked::after { margin-left:6px; margin-top:3px; }
 #page-keys .key-select-cell input:indeterminate::after { margin-top:7px; }
 #page-keys .key-table td.key-select-cell::before { display:none; }
 #page-keys .key-table td.key-name-cell { display:block; text-align:left; padding:0 28px 12px 0; margin-bottom:8px; border-bottom:1px solid var(--border); }
 #page-keys .key-table td.key-name-cell::before { display:none; }
 #page-keys .key-display-name { font-size:14px; }
 #page-keys .key-value-row { gap:6px; margin:2px 0 0; }
 #page-keys .key-inline-copy { width:30px; height:28px; padding:6px; }
 #page-keys .key-channel-name { display:inline; max-width:calc(100% - 90px); }
 #page-keys .key-secondary { width:100%; margin-top:-7px; font-size:12px; }
 #page-keys .key-quota-limit { margin-left:-5px; }
 #page-keys .key-table td.row-actions { display:block; margin-top:8px; padding:10px 0 0; min-width:0; border-top:1px solid var(--border); }
 #page-keys .key-table .row-actions::before { display:none; }
 #page-keys .key-row-actions { gap:16px; }
 #page-keys .key-table .key-row-actions>button { min-height:36px; padding:4px; }
 #page-keys .key-table .key-more-button { width:30px; }
 #page-keys .key-selection { flex-wrap:wrap; gap:10px; }
}

#page-keys .badge:not(.off)::before { background:var(--success); }
#page-keys .sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; }
#new-key-btn { min-width:108px; min-height:36px; }
@media(max-width:720px) {
 .content:has(#page-keys:not([hidden]))>.page-heading { margin-bottom:32px; }
 .content:has(#page-keys:not([hidden])) #new-key-btn { min-height:40px; font-size:14px; }
 #page-keys .key-counts { display:none; }
 #page-keys .key-management-panel>.panel-head { margin-bottom:20px; }
 #page-keys #key-list>.table-wrap { border:0; background:transparent; border-radius:0; overflow:visible; }
 #page-keys .key-table tbody { display:grid; gap:12px; }
 #page-keys .key-table tr { padding:14px 16px; border:1px solid var(--border); border-radius:10px; background:var(--surface); }
 #page-keys .key-table tr:last-child { border-bottom:1px solid var(--border); }
 #page-keys .key-table tr.selected { background:color-mix(in srgb,var(--accent-soft) 35%,var(--surface)); }
 #page-keys .key-table td { padding:4px 0; line-height:20px; }
 #page-keys .key-table td.key-select-cell { left:16px; right:auto; top:29px; }
 #page-keys .key-table td.key-name-cell { padding:0 0 10px 52px; border:0; margin-bottom:0; }
 #page-keys .key-table td.row-actions { border:0; padding-top:8px; margin-top:0; }
}
@media(max-width:720px) {
 #page-keys .key-table tbody { grid-template-columns:minmax(0,1fr); }
 #page-keys .key-table tr,#page-keys .key-table td { min-width:0; max-width:100%; }
}

#page-keys .key-inline-copy[aria-busy="true"] { opacity:1; cursor:progress; color:var(--muted); }
#page-keys .key-inline-copy .spinner { width:13px; height:13px; margin:0; }

#page-keys .key-lifecycle-menu { min-width:144px; }
#page-keys .key-table .key-lifecycle-menu button { min-height:30px; font-size:14px; padding:5px 10px; }
#page-keys .key-table .key-lifecycle-menu [data-danger] { border-top:0; margin-top:0; border-radius:5px; }
#page-keys .key-menu-popover button:focus-visible { outline:0; background:var(--soft); color:var(--text); }
#page-keys .key-menu-popover [data-danger]:focus-visible { color:var(--danger); }
#key-edit-dialog .key-edit-links { display:flex; flex-wrap:wrap; gap:20px; margin-top:18px; }
#key-edit-dialog .key-edit-links button { font-size:12px; color:var(--muted); padding:4px 0; }
@media(max-width:720px) { #page-keys .key-table .key-lifecycle-menu button { min-height:40px; } }