/* A frosted, readable glass sheet with a restrained warm reflection. */
#hotkey-dialog { width: min(900px, calc(100vw - 32px)); max-width: 900px; max-height: calc(100dvh - 40px); padding: 28px; border: 1px solid rgba(255,255,255,.22); border-radius: 22px; background: linear-gradient(145deg, rgba(62,57,53,.78), rgba(22,24,29,.87) 55%, rgba(34,28,24,.84)); color: #fff8f2; box-shadow: 0 24px 80px rgba(0,0,0,.48), inset 0 1px 0 rgba(255,255,255,.22); backdrop-filter: blur(28px) saturate(130%); -webkit-backdrop-filter: blur(28px) saturate(130%); overflow-y: auto; scrollbar-color: #857265 transparent; scrollbar-width: thin; }
#hotkey-dialog::backdrop { background: rgba(8,5,3,.62); backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px); }
#hotkey-dialog[open] { animation: glass-arrive .32s cubic-bezier(.16,1,.3,1); }
@keyframes glass-arrive { from { opacity: .75; transform: translateY(12px) scale(.985); filter: blur(3px); } to { opacity: 1; transform: none; filter: blur(0); } }
html:has(#hotkey-dialog[open]) { overflow: hidden; }
#hotkey-dialog .hotkey-header { display: flex; align-items: flex-start; gap: 24px; justify-content: space-between; margin-bottom: 24px; }
#hotkey-dialog h2 { margin: 0 0 8px; font: 700 26px/1.3 var(--font-ui); letter-spacing: -.02em; }
#hotkey-title:focus { outline: none; }
#hotkey-dialog #hotkey-description { margin: 0; color: #d8c4b6; font: 400 13px/1.65 var(--font-ui); max-width: 66ch; }
#hotkey-dialog .dialog-close { position: static; display: grid; place-items: center; flex-shrink: 0; width: 44px; height: 44px; padding: 12px; border: 1px solid rgba(255,255,255,.18); border-radius: 12px; color: #fff8f2; background: rgba(255,255,255,.06); }
#hotkey-dialog .dialog-close svg { width: 20px; height: 20px; }
#hotkey-dialog .hotkey-columns { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 28px; }
#hotkey-dialog h3 { margin: 0 0 4px; padding-bottom: 10px; border-bottom: 1px solid rgba(255,255,255,.2); font: 700 14px/1.5 var(--font-ui); }
#hotkey-dialog .hotkey-list { display: grid; grid-template-columns: 1fr; gap: 0; margin: 0; }
#hotkey-dialog .hotkey-row { background: transparent; border-radius: 0; box-shadow: none; display: grid; grid-template-columns: 80px minmax(0,1fr); align-items: center; gap: 14px; margin: 0; padding: 10px 0; min-height: 58px; border-bottom: 1px solid rgba(255,255,255,.1); font: 400 13px/1.5 var(--font-ui); }
#hotkey-dialog kbd { display: inline-grid; place-items: center; min-width: 36px; min-height: 32px; padding: 6px 10px; border: 1px solid rgba(255,255,255,.23); border-radius: 7px; background: linear-gradient(180deg,rgba(255,255,255,.09),rgba(255,255,255,.025)); color: #ffd5ac; box-shadow: 0 2px 3px rgba(0,0,0,.16),inset 0 1px 0 rgba(255,255,255,.12); font: 500 11px/1.5 var(--font-code); }
#hotkey-dialog .hotkey-tuning, #hotkey-dialog .hotkey-requirements { margin-top: 24px; }
#hotkey-dialog .hotkey-tuning .hotkey-list { grid-template-columns: repeat(2,minmax(0,1fr)); column-gap: 28px; }
#hotkey-dialog .mouse-tuning-map { display: grid; grid-template-columns: minmax(0,1fr) 140px minmax(0,1fr); align-items: center; gap: 18px; padding: 12px 0 0; }
#hotkey-dialog .tuning-mouse { width: 140px; height: 190px; }
#hotkey-dialog .mouse-tuning-side h4 { font: 400 12px/1.6 var(--font-ui); margin: 0 0 12px; color: #fff8f2; }
#hotkey-dialog .mouse-tuning-side p { display: flex; align-items: center; gap: 10px; margin: 8px 0; font: 400 12px/1.6 var(--font-ui); color: #d8c4b6; }
#hotkey-dialog .hotkey-requirements ol { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 0 28px; list-style: none; counter-reset: requirement; margin: 0; padding: 0; }
#hotkey-dialog .hotkey-requirements li { counter-increment: requirement; display: flex; align-items: flex-start; gap: 12px; padding: 12px 0; border-bottom: 1px solid rgba(255,255,255,.1); font: 400 12px/1.6 var(--font-ui); color: #d8c4b6; }
#hotkey-dialog .hotkey-requirements li::before { content: counter(requirement,decimal-leading-zero); color: #ffcc94; font: 500 10px/1.9 var(--font-code); flex-shrink: 0; }
#hotkey-dialog .hotkey-requirements li:last-child { grid-column: 1 / -1; }
#hotkey-dialog .hotkey-footer { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-top: 24px; }
#hotkey-dialog .hotkey-footer p { margin: 0; color: #d8c4b6; font: 400 12px/1.6 var(--font-ui); }
#hotkey-dialog #hotkey-confirm { flex: 0 0 auto; width: auto; text-align: center; min-width: 150px; min-height: 44px; padding: 10px 24px; border-radius: 12px; font: 700 14px/1.5 var(--font-ui); color: #241204; background: linear-gradient(180deg,#ffc486,#ff9a42); box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 5px 12px rgba(0,0,0,.2); }
.topbar #hotkey-open { position: relative; isolation: isolate; overflow: hidden; border-radius: 12px; background: linear-gradient(150deg,rgba(255,255,255,.12),rgba(255,255,255,.035)); border-color: rgba(255,210,166,.3); box-shadow: inset 0 1px 0 rgba(255,255,255,.12); backdrop-filter: blur(12px); transition: transform .24s cubic-bezier(.16,1,.3,1),background .24s,box-shadow .24s; }
.topbar #hotkey-open::after { content: ''; position: absolute; inset: -60% auto -60% -90%; width: 45%; background: linear-gradient(90deg,transparent,rgba(255,255,255,.24),transparent); transform: skewX(-20deg); pointer-events: none; }
@media (hover:hover) { .topbar #hotkey-open:hover { transform: translateY(-2px); background: rgba(255,170,95,.14); box-shadow: inset 0 1px 0 rgba(255,255,255,.24),0 5px 14px rgba(0,0,0,.2); } .topbar #hotkey-open:hover::after { animation: hotkey-sheen .65s ease-out; } #hotkey-dialog button:hover { filter: brightness(1.12); } }
@keyframes hotkey-sheen { to { left: 150%; } }
.topbar #hotkey-open:active { transform: translateY(0) scale(.97); }
#hotkey-dialog button:focus-visible, .topbar #hotkey-open:focus-visible { outline: 2px solid #ffcc94; outline-offset: 3px; }
@media (max-width:640px) {
 #hotkey-dialog { width: calc(100vw - 24px); max-height: calc(100dvh - 24px); padding: 20px; border-radius: 18px; }
 #hotkey-dialog h2 { font-size: 22px; }
 #hotkey-dialog .hotkey-header { gap: 12px; margin-bottom: 20px; }
 #hotkey-dialog .hotkey-columns, #hotkey-dialog .hotkey-requirements ol { grid-template-columns: 1fr; gap: 20px; }
 #hotkey-dialog .hotkey-requirements ol { gap: 0; }
 #hotkey-dialog .hotkey-row { grid-template-columns: 68px minmax(0,1fr); }
 #hotkey-dialog .mouse-tuning-map { grid-template-columns: minmax(0,1fr) 90px minmax(0,1fr); gap: 8px; }
 #hotkey-dialog .tuning-mouse { width: 90px; height: auto; }
 #hotkey-dialog .mouse-tuning-side p { flex-wrap: wrap; gap: 4px; }
 #hotkey-dialog .mouse-tuning-side h4 { font-size: 11px; }
 #hotkey-dialog .hotkey-tuning .hotkey-list { grid-template-columns: 1fr; }
 #hotkey-dialog .hotkey-footer { align-items: stretch; flex-direction: column; gap: 16px; }
}
@media (prefers-reduced-motion:reduce) { #hotkey-dialog[open], .topbar #hotkey-open:hover::after { animation: none; } .topbar #hotkey-open { transition: none; } }
@supports not (backdrop-filter:blur(1px)) { #hotkey-dialog { background: #242326; } }
body[data-product="yq"] #hotkey-dialog .zf-only, body[data-product="zf"] #hotkey-dialog .yq-only { display: none; }