hotkey-engine 0.0.0-stage → 0.1.0

package/dist/styles.css

@@ -0,0 +1,352 @@
+@font-face { font-family:"Vazir"; src:url("./fonts/Vazir-Regular.woff2") format("woff2"); font-style:normal; font-weight:400; font-display:swap; }
+@font-face { font-family:"Vazir"; src:url("./fonts/Vazir-Bold.woff2") format("woff2"); font-style:normal; font-weight:700 900; font-display:swap; }
+ :root { --hotkey-bg: rgba(255,255,255,.52); --hotkey-fg: #172033; --hotkey-muted: #46536a; --hotkey-border: rgba(255,255,255,.74); --hotkey-accent: #3056d3; --hotkey-danger: #b42318; --hotkey-danger-bg: rgba(254,242,242,.82); --hotkey-shadow: 0 24px 64px rgba(16,24,40,.18); }
+[data-hotkey-theme="dark"] { --hotkey-bg: rgba(255,255,255,.06); --hotkey-fg: #f8fafc; --hotkey-muted: #d4dceb; --hotkey-border: rgba(255,255,255,.3); --hotkey-accent: #c3d7ff; --hotkey-danger: #ffb4ab; --hotkey-danger-bg: rgba(100,24,24,.52); }
+@media (prefers-color-scheme: dark) { [data-hotkey-theme="system"] { --hotkey-bg: rgba(255,255,255,.06); --hotkey-fg: #f8fafc; --hotkey-muted: #d4dceb; --hotkey-border: rgba(255,255,255,.3); --hotkey-accent: #c3d7ff; --hotkey-danger: #ffb4ab; --hotkey-danger-bg: rgba(100,24,24,.52); } }
+.hotkey-floating-trigger { display:grid; place-items:center; width:48px; height:48px; border:1px solid rgba(255,255,255,.82); border-radius:50%; background:rgba(255,255,255,.94); color:var(--hotkey-accent); box-shadow:var(--hotkey-shadow); cursor:pointer; }.hotkey-floating-trigger svg { width:22px; height:22px; }
+.hotkey-overlay { position: fixed; inset: 0; z-index: 2147483646; display: grid; place-items: center; padding: 16px; background: rgba(255,255,255,.02); backdrop-filter: blur(5px); }
+.hotkey-dialog { width: min(680px,100%); max-height: min(720px,100%); overflow: auto; border: 1px solid var(--hotkey-border); border-radius: 20px; background: var(--hotkey-bg); color: var(--hotkey-fg); box-shadow: var(--hotkey-shadow), inset 0 1px 0 rgba(255,255,255,.38); backdrop-filter: blur(24px) saturate(150%); -webkit-backdrop-filter: blur(24px) saturate(150%); padding: 24px; outline: 0; font-family: system-ui,sans-serif; }
+.hotkey-dialog header { display:flex; align-items:center; justify-content:space-between; gap:16px; }.hotkey-dialog h2 { margin:0; font-size:21px; letter-spacing:-.02em; }.hotkey-dialog button { border:1px solid var(--hotkey-border); border-radius:9px; background:rgba(255,255,255,.1); color:inherit; padding:7px 10px; cursor:pointer; }.hotkey-dialog button:hover { background:rgba(255,255,255,.22); }.hotkey-dialog-close { display:grid; place-items:center; width:36px; height:36px; padding:0 !important; font-size:21px; line-height:1; }.hotkey-search { box-sizing:border-box; width:100%; margin:20px 0 8px; padding:11px 12px; border:1px solid var(--hotkey-border); border-radius:10px; background:rgba(255,255,255,.18); color:inherit; }.hotkey-action-list { list-style:none; margin:0; padding:0; }.hotkey-action-list li { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:15px 0; border-bottom:1px solid var(--hotkey-border); }.hotkey-action-list li div:first-child { display:grid; gap:4px; }.hotkey-action-list span { color:var(--hotkey-muted); font-size:13px; }.hotkey-row-actions { display:flex; gap:6px; flex-wrap:wrap; }.hotkey-recorder { display:flex; align-items:center; gap:8px; flex-wrap:wrap; color:var(--hotkey-accent); }.hotkey-recording-label { display:flex; align-items:center; gap:7px; font-weight:650; }.hotkey-recording-dot { width:8px; height:8px; border-radius:50%; background:currentColor; animation:hotkey-pulse 1s ease-in-out infinite; }.hotkey-dialog footer { display:flex; justify-content:flex-end; padding-top:16px; }.hotkey-confirm { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }.hotkey-validation-toast { position:fixed; z-index:2147483647; bottom:50px; left:50%; display:flex; align-items:center; gap:12px; width:min(500px,calc(100vw - 32px)); box-sizing:border-box; transform:translateX(-50%); border:1px solid rgba(255,255,255,.25); border-radius:16px; background:rgba(22,31,58,.86); color:#fff; box-shadow:0 18px 48px rgba(25,35,74,.3), inset 0 1px 0 rgba(255,255,255,.15); backdrop-filter:blur(20px) saturate(135%); -webkit-backdrop-filter:blur(20px) saturate(135%); padding:12px 14px; animation:hotkey-toast-in .2s ease-out; }.hotkey-validation-copy { flex:1; min-width:0; }.hotkey-validation-copy strong { display:block; margin-bottom:2px; font-size:14px; }.hotkey-validation-toast p { margin:0; color:rgba(255,255,255,.75); font-size:13px; line-height:1.45; }.hotkey-validation-icon { display:grid; place-items:center; flex:none; width:34px; height:34px; border-radius:10px; background:rgba(151,178,255,.25); color:#e3ebff; font-family:ui-sans-serif,system-ui,sans-serif; font-size:21px; font-weight:700; }.hotkey-validation-close { flex:none; width:29px; height:29px; padding:0; border:1px solid rgba(255,255,255,.2); border-radius:8px; background:rgba(255,255,255,.08); color:#fff; font-size:18px; line-height:1; cursor:pointer; }@keyframes hotkey-pulse { 50% { opacity:.35; transform:scale(.8); } }@keyframes hotkey-toast-in { from { opacity:0; transform:translate(-50%,12px); } to { opacity:1; transform:translate(-50%,0); } }
+@media (max-width: 560px) { .hotkey-action-list li { align-items:flex-start; flex-direction:column; }.hotkey-row-actions { width:100%; }.hotkey-dialog { padding:16px; } }
+
+/* Midnight command-palette theme. */
+.hotkey-overlay { background:rgba(5,8,15,.68); }
+.hotkey-dialog { width:min(640px,100%); border:1px solid #30394d; border-radius:16px; background:#171c28; color:#f4f7fc; box-shadow:0 32px 90px rgba(0,0,0,.48); }
+.hotkey-dialog header { min-height:42px; padding:22px 22px 18px 72px; background:#171c28; color:#f4f7fc; border-bottom:1px solid #30394d; }.hotkey-dialog header::before { left:22px; width:34px; height:34px; border-radius:9px; background:#8258e7; color:#fff; }.hotkey-dialog h2 { font-size:19px; font-weight:680; }.hotkey-dialog .hotkey-dialog-close { border-color:#3b465d; background:#242b3b; color:#bdc7da; }.hotkey-dialog .hotkey-dialog-close:hover { background:#303b50; color:#fff; }
+.hotkey-search { width:calc(100% - 40px); margin:16px 20px 8px; border-color:#354057; background:#222a3a; color:#f4f7fc; box-shadow:none; }.hotkey-search::placeholder { color:#8b96aa; }.hotkey-search:focus { border-color:#9a79ee; outline:3px solid rgba(130,88,231,.22); }
+.hotkey-action-list { display:block; padding:0 20px; }.hotkey-action-list li { min-height:0; padding:15px 2px; border:0; border-bottom:1px solid #2d3547; border-radius:0; background:transparent; box-shadow:none; }.hotkey-action-list li strong { color:#f1f4fb; }.hotkey-action-list span { color:#9ba7bb; }.hotkey-action-list li:not(.hotkey-inline-feedback):hover { border-color:#39445c; background:transparent; box-shadow:none; }.hotkey-action-list .hotkey-inline-feedback { margin:8px 0 2px; border-radius:9px; }
+.hotkey-dialog .hotkey-row-actions button { background:#242d3e; border-color:#3b465d; color:#c9d2e2; }.hotkey-dialog .hotkey-row-actions .hotkey-action-edit { border-color:#5b4c96; background:#302959; color:#d8d0ff; }.hotkey-dialog .hotkey-row-actions .hotkey-action-edit:hover { background:#3b3271; color:#fff; }.hotkey-dialog .hotkey-row-actions .hotkey-action-disable { border-color:#755d2a; background:#3b321f; color:#f5d897; }.hotkey-dialog .hotkey-row-actions .hotkey-action-disable:hover { background:#514326; color:#ffe5a8; }.hotkey-dialog .hotkey-row-actions .hotkey-action-reset { border-color:#75414c; background:#3e242b; color:#ffbac5; }.hotkey-dialog .hotkey-row-actions .hotkey-action-reset:hover { background:#542d37; color:#ffd0d7; }
+.hotkey-recorder { color:#c7b6ff; }.hotkey-dialog footer { padding:16px 20px 20px; background:#121722; border-top:1px solid #30394d; border-radius:0 0 16px 16px; }.hotkey-dialog footer > button { border-color:#4a3b81; background:#302959; color:#e1dbff; }.hotkey-dialog footer > button:hover { border-color:#765de0; background:#403577; color:#fff; }.hotkey-confirm { color:#c7d0df; }
+
+/* Higher-contrast controls for the translucent dialog. */
+.hotkey-dialog button { background:rgba(255,255,255,.28); }
+.hotkey-dialog button:hover { background:rgba(255,255,255,.42); }
+.hotkey-trigger-icon { width:23px; height:23px; }
+.hotkey-inline-feedback { display:flex !important; align-items:flex-start !important; gap:8px; margin:-3px 0 10px; padding:8px 10px !important; border:1px solid rgba(210,42,52,.3) !important; border-radius:10px; background:rgba(254,232,232,.72); color:#a51d2a; font-size:12px; text-align:left; }.hotkey-inline-feedback > span { display:flex; place-items:center; align-self:center; flex:none; width:18px; height:18px; border-radius:50%; background:#c72c39; color:#fff; font-size:11px; font-weight:800; align-items:center; justify-content:center; }.hotkey-inline-feedback p { flex:1; margin:1px 0 0; line-height:1.4; text-align:left; }
+
+/* Solid command-center redesign: only the product UI uses this palette. */
+.hotkey-overlay { background:rgba(16,24,40,.52); backdrop-filter:none; }
+.hotkey-dialog { width:min(720px,100%); border:0; border-radius:18px; background:#fff; color:#172033; box-shadow:0 28px 80px rgba(8,15,35,.35); backdrop-filter:none; -webkit-backdrop-filter:none; padding:0; }
+.hotkey-dialog header { padding:20px 22px; background:linear-gradient(135deg,#1f2f57,#3453a1); color:#fff; }.hotkey-dialog h2 { font-size:20px; font-weight:720; letter-spacing:-.015em; }.hotkey-dialog .hotkey-dialog-close { border-color:rgba(255,255,255,.3); background:rgba(255,255,255,.12); color:#fff; }.hotkey-dialog .hotkey-dialog-close:hover { background:rgba(255,255,255,.24); }
+.hotkey-search { width:calc(100% - 40px); margin:18px 20px 8px; border:1px solid #d9e0ee; border-radius:10px; background:#f6f8fc; color:#172033; }.hotkey-search:focus { outline:3px solid rgba(74,108,207,.2); border-color:#6480d6; }
+.hotkey-action-list { padding:0 20px; }.hotkey-action-list li { padding:16px 0; border-color:#e7ebf3; }.hotkey-action-list li strong { color:#1b2947; font-size:14px; }.hotkey-action-list span { color:#697791; }
+.hotkey-dialog .hotkey-row-actions button, .hotkey-dialog footer > button { border-color:#d7dfed; background:#f4f6fa; color:#344564; font-size:13px; font-weight:650; }.hotkey-dialog .hotkey-row-actions button:hover, .hotkey-dialog footer > button:hover { border-color:#7b95df; background:#e8edff; color:#294999; }
+.hotkey-recorder { color:#3655a7; }.hotkey-dialog footer { padding:16px 20px 20px; background:#f8f9fc; border-top:1px solid #e7ebf3; }.hotkey-confirm { color:#344564; font-size:13px; }
+.hotkey-dialog .hotkey-row-actions .hotkey-action-edit { border-color:#b9c9fa; background:#eaf0ff; color:#2b55bb; }.hotkey-dialog .hotkey-row-actions .hotkey-action-edit:hover { border-color:#6687e4; background:#dbe6ff; color:#1c429f; }
+.hotkey-dialog .hotkey-row-actions .hotkey-action-disable { border-color:#f1d58c; background:#fff5d8; color:#946500; }.hotkey-dialog .hotkey-row-actions .hotkey-action-disable:hover { border-color:#d6ab36; background:#ffedb4; color:#795300; }
+.hotkey-dialog .hotkey-row-actions .hotkey-action-reset { border-color:#f0bec6; background:#fff0f2; color:#ac2940; }.hotkey-dialog .hotkey-row-actions .hotkey-action-reset:hover { border-color:#d96c7d; background:#ffe2e7; color:#8f1c31; }
+
+/* Alternative card-based modal layout. */
+.hotkey-overlay { background:rgba(20,30,55,.38); }
+.hotkey-dialog { width:min(680px,100%); border:1px solid #e1e6ef; border-radius:22px; background:#f3f6fa; box-shadow:0 24px 70px rgba(24,35,63,.28); }
+.hotkey-dialog header { position:relative; min-height:40px; padding:20px 22px 18px 72px; background:#fff; color:#1c2942; border-bottom:1px solid #e7ebf2; }.hotkey-dialog header::before { content:"⌘"; position:absolute; left:22px; top:50%; display:grid; place-items:center; width:34px; height:34px; transform:translateY(-50%); border-radius:10px; background:#e3eaff; color:#3655a7; font-family:ui-sans-serif,system-ui,sans-serif; font-size:21px; font-weight:700; }.hotkey-dialog h2 { font-size:18px; }.hotkey-dialog .hotkey-dialog-close { border-color:#e0e5ef; background:#f7f8fb; color:#647089; }.hotkey-dialog .hotkey-dialog-close:hover { background:#eceff5; color:#293852; }
+.hotkey-search { width:calc(100% - 40px); margin:18px 20px 10px; background:#fff; border-color:#e0e6f0; box-shadow:0 1px 2px rgba(20,30,55,.03); }.hotkey-action-list { display:grid; gap:10px; padding:0 20px 18px; }.hotkey-action-list li { min-height:54px; box-sizing:border-box; padding:14px; border:1px solid #e0e6f0; border-radius:13px; background:#fff; box-shadow:0 2px 5px rgba(20,30,55,.025); }.hotkey-action-list li strong { font-size:14px; }.hotkey-action-list li:not(.hotkey-inline-feedback):hover { border-color:#cbd6f0; box-shadow:0 5px 13px rgba(48,68,120,.07); }.hotkey-action-list .hotkey-inline-feedback { margin:-3px 0 0; border-radius:11px; box-shadow:none; }.hotkey-dialog footer { padding:16px 20px 20px; background:#fff; border-top:1px solid #e7ebf2; border-radius:0 0 22px 22px; }
+
+/* Final midnight command-palette theme. */
+.hotkey-overlay { background:rgba(5,8,15,.68); }.hotkey-dialog { width:min(640px,100%); border:1px solid #30394d; border-radius:16px; background:#171c28; color:#f4f7fc; box-shadow:0 32px 90px rgba(0,0,0,.48); }.hotkey-dialog header { min-height:42px; padding:22px 22px 18px 72px; background:#171c28; color:#f4f7fc; border-bottom:1px solid #30394d; }.hotkey-dialog header::before { left:22px; width:34px; height:34px; border-radius:9px; background:#8258e7; color:#fff; }.hotkey-dialog h2 { font-size:19px; font-weight:680; }.hotkey-dialog .hotkey-dialog-close { border-color:#3b465d; background:#242b3b; color:#bdc7da; }.hotkey-dialog .hotkey-dialog-close:hover { background:#303b50; color:#fff; }
+.hotkey-search { width:calc(100% - 40px); margin:16px 20px 8px; border-color:#354057; background:#222a3a; color:#f4f7fc; box-shadow:none; }.hotkey-search::placeholder { color:#8b96aa; }.hotkey-search:focus { border-color:#9a79ee; outline:3px solid rgba(130,88,231,.22); }.hotkey-action-list { display:block; padding:0 20px; }.hotkey-action-list li { min-height:0; padding:15px 2px; border:0; border-bottom:1px solid #2d3547; border-radius:0; background:transparent; box-shadow:none; }.hotkey-action-list li strong { color:#f1f4fb; }.hotkey-action-list span { color:#9ba7bb; }.hotkey-action-list li:not(.hotkey-inline-feedback):hover { border-color:#39445c; background:transparent; box-shadow:none; }.hotkey-action-list .hotkey-inline-feedback { margin:8px 0 2px; border-radius:9px; }.hotkey-dialog .hotkey-row-actions button { background:#242d3e; border-color:#3b465d; color:#c9d2e2; }.hotkey-dialog .hotkey-row-actions .hotkey-action-edit { border-color:#5b4c96; background:#302959; color:#d8d0ff; }.hotkey-dialog .hotkey-row-actions .hotkey-action-edit:hover { background:#3b3271; color:#fff; }.hotkey-dialog .hotkey-row-actions .hotkey-action-disable { border-color:#755d2a; background:#3b321f; color:#f5d897; }.hotkey-dialog .hotkey-row-actions .hotkey-action-disable:hover { background:#514326; color:#ffe5a8; }.hotkey-dialog .hotkey-row-actions .hotkey-action-reset { border-color:#75414c; background:#3e242b; color:#ffbac5; }.hotkey-dialog .hotkey-row-actions .hotkey-action-reset:hover { background:#542d37; color:#ffd0d7; }.hotkey-recorder { color:#c7b6ff; }.hotkey-dialog footer { padding:16px 20px 20px; background:#121722; border-top:1px solid #30394d; border-radius:0 0 16px 16px; }.hotkey-dialog footer > button { border-color:#4a3b81; background:#302959; color:#e1dbff; }.hotkey-dialog footer > button:hover { border-color:#765de0; background:#403577; color:#fff; }.hotkey-confirm { color:#c7d0df; }
+
+/* Final light, minimal settings layout. */
+.hotkey-overlay { background:rgba(15,23,42,.32); }
+.hotkey-dialog { width:min(700px,100%); border:1px solid #e1e5eb; border-radius:14px; background:#fff; color:#1d2939; box-shadow:0 20px 60px rgba(15,23,42,.24); }
+.hotkey-dialog header { min-height:40px; padding:22px 22px 18px; background:#fff; color:#101828; border-bottom:1px solid #eaecf0; }
+.hotkey-dialog header::before { display:none; }
+.hotkey-dialog h2 { font-size:21px; font-weight:700; }
+.hotkey-dialog .hotkey-dialog-close { border-color:#eaecf0; background:#f8fafc; color:#667085; }
+.hotkey-dialog .hotkey-dialog-close:hover { background:#eef2f6; color:#344054; }
+.hotkey-search { width:calc(100% - 40px); margin:16px 20px 4px; border-color:#dfe3eb; background:#f8fafc; color:#1d2939; box-shadow:none; }
+.hotkey-search::placeholder { color:#98a2b3; }
+.hotkey-search:focus { border-color:#7f9cf5; outline:3px solid rgba(99,102,241,.14); }
+.hotkey-action-list { display:block; padding:0 20px; }
+.hotkey-action-list li { min-height:0; padding:17px 2px; border:0; border-bottom:1px solid #eaecf0; border-radius:0; background:transparent; box-shadow:none; }
+.hotkey-action-list li strong { color:#344054; font-size:14px; }
+.hotkey-action-list li div:first-child span { width:fit-content; padding:3px 7px; border:1px solid #e4e7ec; border-radius:6px; background:#f9fafb; color:#475467; font-size:12px; font-weight:600; }
+.hotkey-action-list li:not(.hotkey-inline-feedback):hover { border-color:#d0d5dd; background:transparent; box-shadow:none; }
+.hotkey-action-list .hotkey-inline-feedback { margin:8px 0 2px; border-radius:8px; }
+.hotkey-dialog .hotkey-row-actions button { background:#fff; border-color:#d0d5dd; color:#475467; }
+.hotkey-dialog .hotkey-row-actions .hotkey-action-edit { border-color:#b8c7ff; background:#f0f4ff; color:#3d55b6; }
+.hotkey-dialog .hotkey-row-actions .hotkey-action-edit:hover { background:#e1e9ff; color:#28439f; }
+.hotkey-dialog .hotkey-row-actions .hotkey-action-disable { border-color:#efd69d; background:#fffaeb; color:#956b00; }
+.hotkey-dialog .hotkey-row-actions .hotkey-action-disable:hover { background:#fff1cc; color:#805800; }
+.hotkey-dialog .hotkey-row-actions .hotkey-action-reset { border-color:#f1c1c7; background:#fff5f6; color:#b4233a; }
+.hotkey-dialog .hotkey-row-actions .hotkey-action-reset:hover { background:#ffeaed; color:#961c31; }
+.hotkey-recorder { color:#475467; }
+.hotkey-dialog footer { padding:16px 20px 20px; background:#fff; border-top:1px solid #eaecf0; border-radius:0 0 14px 14px; }
+.hotkey-dialog footer > button { border-color:#d0d5dd; background:#fff; color:#475467; }
+.hotkey-dialog footer > button:hover { border-color:#a4b4cc; background:#f8fafc; color:#344054; }
+.hotkey-confirm { color:#475467; }
+
+/* Light workspace redesign: a compact settings surface with distinct action cards. */
+.hotkey-overlay { background:rgba(45,52,82,.38); backdrop-filter:blur(3px); }
+.hotkey-dialog { width:min(760px,100%); border:1px solid #e5e7f2; border-radius:24px; background:#f8f9ff; color:#25304a; box-shadow:0 32px 90px rgba(36,44,79,.3); }
+.hotkey-dialog header { position:relative; min-height:82px; padding:27px 72px 25px 28px; border:0; border-radius:23px 23px 0 0; background:linear-gradient(120deg,#5b5bd6 0%,#7771dc 58%,#a48aec 100%); color:#fff; overflow:hidden; }
+.hotkey-dialog header::before { content:""; position:absolute; display:block; left:auto; right:-34px; top:-48px; width:170px; height:170px; transform:none; border-radius:50%; background:rgba(255,255,255,.14); box-shadow:-48px 90px 0 rgba(255,255,255,.08); }
+.hotkey-dialog h2 { position:relative; font-size:22px; font-weight:750; letter-spacing:-.025em; }
+.hotkey-dialog .hotkey-dialog-close { position:relative; z-index:1; border:1px solid rgba(255,255,255,.35); border-radius:11px; background:rgba(255,255,255,.15); color:#fff; }
+.hotkey-dialog .hotkey-dialog-close:hover { background:rgba(255,255,255,.28); color:#fff; }
+.hotkey-search { width:calc(100% - 48px); margin:18px 24px 12px; padding:12px 14px; border:1px solid #e0e3f0; border-radius:13px; background:#fff; color:#25304a; box-shadow:0 3px 10px rgba(40,48,84,.04); }
+.hotkey-search::placeholder { color:#9098ad; }
+.hotkey-search:focus { border-color:#8b83e6; outline:4px solid rgba(113,103,217,.14); }
+.hotkey-action-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; padding:4px 24px 22px; }
+.hotkey-action-list li { min-height:118px; box-sizing:border-box; align-items:flex-start; flex-direction:column; padding:16px; border:1px solid #e4e6f1; border-radius:16px; background:#fff; box-shadow:0 3px 9px rgba(39,48,87,.035); }
+.hotkey-action-list li div:first-child { width:100%; gap:8px; }
+.hotkey-action-list li strong { color:#27324d; font-size:14px; font-weight:720; }
+.hotkey-action-list li div:first-child span { width:max-content; padding:4px 8px; border:1px solid #dfe2ef; border-radius:7px; background:#f4f5fa; color:#5b647b; font-family:ui-monospace,SFMono-Regular,Consolas,monospace; font-size:12px; font-weight:700; letter-spacing:.015em; }
+.hotkey-action-list li:not(.hotkey-inline-feedback):hover { border-color:#c8c8ee; background:#fff; box-shadow:0 9px 20px rgba(65,64,148,.1); transform:translateY(-1px); }
+.hotkey-row-actions { width:100%; gap:7px; }
+.hotkey-dialog .hotkey-row-actions button { flex:1; padding:7px 8px; border-radius:8px; font-size:12px; font-weight:700; }
+.hotkey-dialog .hotkey-row-actions .hotkey-action-edit { border-color:#c7c8f5; background:#f0f0ff; color:#4b48b5; }
+.hotkey-dialog .hotkey-row-actions .hotkey-action-edit:hover { background:#e3e2ff; color:#3d3aa2; }
+.hotkey-dialog .hotkey-row-actions .hotkey-action-disable { border-color:#f2dda8; background:#fff9e9; color:#98711f; }
+.hotkey-dialog .hotkey-row-actions .hotkey-action-disable:hover { background:#fff1cc; color:#805b0d; }
+.hotkey-dialog .hotkey-row-actions .hotkey-action-reset { border-color:#f3cbd0; background:#fff3f4; color:#b54151; }
+.hotkey-dialog .hotkey-row-actions .hotkey-action-reset:hover { background:#ffe7e9; color:#9c3040; }
+.hotkey-recorder { width:100%; padding-top:4px; color:#514bb6; }
+.hotkey-action-list .hotkey-inline-feedback { grid-column:1 / -1; min-height:0; margin:-3px 0 0; padding:9px 11px !important; border-radius:11px; background:#fff4f4; box-shadow:none; transform:none; }
+.hotkey-dialog footer { padding:17px 24px 21px; border-top:1px solid #e7e8f1; border-radius:0 0 23px 23px; background:#fff; }
+.hotkey-dialog footer > button { padding:9px 13px; border-color:#d9d8f4; border-radius:10px; background:#f1f0ff; color:#4b47a8; font-weight:700; }
+.hotkey-dialog footer > button:hover { border-color:#aaa8e5; background:#e3e1ff; color:#3d398f; }
+.hotkey-confirm { color:#525d76; }
+@media (max-width:560px) { .hotkey-dialog { border-radius:18px; }.hotkey-dialog header { min-height:64px; padding:22px 62px 20px 20px; border-radius:17px 17px 0 0; }.hotkey-action-list { grid-template-columns:1fr; padding:4px 16px 18px; }.hotkey-search { width:calc(100% - 32px); margin-left:16px; margin-right:16px; }.hotkey-dialog footer { padding-left:16px; padding-right:16px; border-radius:0 0 17px 17px; } }
+
+/* Full management-panel redesign. */
+.hotkey-overlay { background:rgba(30,36,57,.4); backdrop-filter:blur(4px); }
+.hotkey-dialog { width:min(820px,100%); max-height:min(680px,100%); padding:0; overflow:hidden; border:1px solid #e4e7ef; border-radius:18px; background:#fff; color:#27324a; box-shadow:0 30px 90px rgba(25,33,62,.3); }
+.hotkey-shell { display:grid; grid-template-columns:168px minmax(0,1fr); min-height:530px; }
+.hotkey-sidebar { display:flex; flex-direction:column; gap:18px; padding:22px 14px; background:#252b45; color:#c8cde3; }
+.hotkey-brand { display:grid; place-items:center; width:40px; height:40px; margin:0 4px 20px; border-radius:12px; background:#f5b960; color:#252b45; box-shadow:0 8px 20px rgba(0,0,0,.16); }
+.hotkey-brand svg { width:23px; height:23px; }
+.hotkey-sidebar-item { display:flex; align-items:center; gap:9px; padding:11px 10px; border-radius:9px; font-size:13px; font-weight:700; }
+.hotkey-sidebar-item-active { background:#39415f; color:#fff; }
+.hotkey-sidebar-dot { width:7px; height:7px; border-radius:50%; background:#f5b960; box-shadow:0 0 0 4px rgba(245,185,96,.12); }
+.hotkey-sidebar-count { display:grid; place-items:center; width:24px; height:24px; margin:2px 10px auto; border-radius:50%; background:#343b59; color:#aeb5d1; font-size:11px; font-weight:700; }
+.hotkey-content { display:flex; min-width:0; flex-direction:column; max-height:min(680px,100vh); background:#fff; }
+.hotkey-content header { display:flex; flex:none; min-height:auto; padding:24px 28px 17px; border:0; border-bottom:1px solid #edf0f5; border-radius:0; background:#fff; color:#27324a; }
+.hotkey-content header::before { display:none; }
+.hotkey-content h2 { margin:0; font-size:20px; font-weight:760; letter-spacing:-.025em; }
+.hotkey-content header p { margin:5px 0 0; color:#8991a7; font-size:12px; }
+.hotkey-content .hotkey-dialog-close { border-color:#e4e7ef; border-radius:10px; background:#fff; color:#778097; }
+.hotkey-content .hotkey-dialog-close:hover { border-color:#cbd1df; background:#f5f6fa; color:#3a465f; }
+.hotkey-search-wrap { display:flex; align-items:center; gap:9px; flex:none; margin:18px 28px 12px; padding:0 12px; border:1px solid #e2e6ee; border-radius:10px; background:#fafbfc; color:#9aa2b4; }
+.hotkey-search-wrap > span { font-family:Arial,sans-serif; font-size:24px; line-height:1; transform:rotate(-20deg); }
+.hotkey-search { width:100%; margin:0; padding:11px 0; border:0; border-radius:0; outline:0; background:transparent; color:#27324a; box-shadow:none; }
+.hotkey-search:focus { border:0; outline:0; }
+.hotkey-search-wrap:focus-within { border-color:#8393d3; background:#fff; box-shadow:0 0 0 4px rgba(93,109,188,.12); }
+.hotkey-list-heading { display:grid; grid-template-columns:minmax(0,1fr) 130px; flex:none; padding:2px 28px 9px; color:#9aa2b4; font-size:11px; font-weight:750; letter-spacing:.07em; text-transform:uppercase; }
+.hotkey-list-heading span:last-child { text-align:center; }
+.hotkey-action-list { display:block; flex:1; overflow:auto; margin:0 18px; padding:0 10px; }
+.hotkey-action-list li { display:grid; grid-template-columns:minmax(0,1fr) 130px; align-items:center; min-height:68px; padding:0 0; border:0; border-top:1px solid #edf0f5; border-radius:0; background:transparent; box-shadow:none; }
+.hotkey-action-list li:last-of-type { border-bottom:1px solid #edf0f5; }
+.hotkey-action-list li div:first-child { gap:3px; }
+.hotkey-action-list li strong { color:#35405a; font-size:14px; font-weight:690; }
+.hotkey-action-list li div:first-child span { width:max-content; padding:0; border:0; border-radius:0; background:transparent; color:#9aa2b4; font-family:inherit; font-size:12px; font-weight:500; }
+.hotkey-action-list li:not(.hotkey-inline-feedback):hover { border-color:#e4e8f1; background:#f9faff; box-shadow:inset 3px 0 #6973cc; transform:none; }
+.hotkey-row-actions { justify-content:center; gap:5px; }
+.hotkey-dialog .hotkey-row-actions button { flex:0 0 auto; padding:6px 7px; border-radius:7px; font-size:11px; font-weight:700; }
+.hotkey-dialog .hotkey-row-actions .hotkey-action-edit { border-color:#ced4f2; background:#f2f3ff; color:#565db4; }
+.hotkey-dialog .hotkey-row-actions .hotkey-action-edit:hover { background:#e3e5ff; color:#444ca4; }
+.hotkey-dialog .hotkey-row-actions .hotkey-action-disable { border-color:#efe0b7; background:#fffaed; color:#9b7726; }
+.hotkey-dialog .hotkey-row-actions .hotkey-action-disable:hover { background:#fff1cf; color:#866115; }
+.hotkey-dialog .hotkey-row-actions .hotkey-action-reset { border-color:#efd3d6; background:#fff6f6; color:#b65a63; }
+.hotkey-dialog .hotkey-row-actions .hotkey-action-reset:hover { background:#ffebec; color:#9f4650; }
+.hotkey-recorder { grid-column:1 / -1; width:auto; padding:12px 0; color:#525ab0; }
+.hotkey-action-list .hotkey-inline-feedback { display:flex; grid-template-columns:none; grid-column:1 / -1; min-height:0; margin:0; padding:9px 10px !important; border-top:0; border-radius:8px; background:#fff5f5; box-shadow:none; }
+.hotkey-content footer { flex:none; min-height:0; padding:15px 28px 18px; border-top:1px solid #edf0f5; border-radius:0; background:#fff; }
+.hotkey-content footer > button { padding:8px 11px; border-color:#e2d7c6; border-radius:8px; background:#fff9ef; color:#926e27; font-size:12px; font-weight:700; }
+.hotkey-content footer > button:hover { border-color:#dbc18e; background:#fff1d4; color:#775718; }
+.hotkey-confirm { color:#65708a; font-size:12px; }
+@media (max-width:620px) { .hotkey-dialog { max-height:calc(100vh - 24px); border-radius:16px; }.hotkey-shell { grid-template-columns:1fr; min-height:0; }.hotkey-sidebar { display:none; }.hotkey-content { max-height:calc(100vh - 24px); }.hotkey-content header { padding:20px 18px 15px; }.hotkey-search-wrap { margin:14px 18px 10px; }.hotkey-list-heading { grid-template-columns:minmax(0,1fr) 118px; padding:2px 18px 8px; }.hotkey-action-list { margin:0 10px; padding:0 8px; }.hotkey-action-list li { grid-template-columns:minmax(0,1fr) 118px; }.hotkey-dialog .hotkey-row-actions { flex-wrap:wrap; }.hotkey-content footer { padding:14px 18px 16px; } }
+
+/* Canvas redesign: introductory panel plus a calm, paper-like settings area. */
+.hotkey-overlay { background:rgba(22,28,49,.46); backdrop-filter:blur(8px); }
+.hotkey-dialog { width:min(860px,100%); padding:0; overflow:hidden; border:0; border-radius:28px; background:#fff; color:#23304b; box-shadow:0 34px 100px rgba(23,29,50,.32); }
+.hotkey-workspace { display:grid; grid-template-columns:300px minmax(0,1fr); min-height:560px; }
+.hotkey-intro { display:flex; flex-direction:column; padding:34px 30px; background:linear-gradient(155deg,#ffe7c4 0%,#ffd7c9 52%,#f6c4d4 100%); color:#513a46; }
+.hotkey-intro-icon { display:grid; place-items:center; width:52px; height:52px; margin-bottom:32px; border-radius:17px; background:#fff8f1; color:#ae5968; box-shadow:0 10px 22px rgba(123,70,85,.12); }
+.hotkey-intro-icon svg { width:27px; height:27px; }
+.hotkey-intro h2 { margin:0; font-size:27px; font-weight:780; letter-spacing:-.04em; }
+.hotkey-intro > p { max-width:205px; margin:12px 0 0; color:#785865; font-size:14px; line-height:1.65; }
+.hotkey-intro-count { display:flex; align-items:center; gap:10px; margin-top:auto; padding-top:26px; border-top:1px solid rgba(116,75,89,.18); }
+.hotkey-intro-count strong { display:grid; place-items:center; width:34px; height:34px; border-radius:50%; background:#ae5968; color:#fff; font-size:14px; }
+.hotkey-intro-count span { color:#785865; font-size:12px; font-weight:700; }
+.hotkey-settings-pane { display:flex; min-width:0; flex-direction:column; max-height:560px; background:#fff; }
+.hotkey-settings-pane header { display:flex; flex:none; min-height:auto; padding:30px 30px 20px; border:0; border-radius:0; background:#fff; color:#23304b; }
+.hotkey-settings-pane header::before { display:none; }
+.hotkey-settings-pane h2 { margin:0; font-size:19px; font-weight:760; letter-spacing:-.025em; }
+.hotkey-settings-pane header p { margin:5px 0 0; color:#9298aa; font-size:12px; }
+.hotkey-settings-pane .hotkey-dialog-close { border-color:#edf0f4; border-radius:50%; background:#f7f8fa; color:#7f879b; }
+.hotkey-settings-pane .hotkey-dialog-close:hover { background:#f0f1f5; color:#4d5972; }
+.hotkey-search-wrap { margin:0 30px 14px; padding:0 13px; border:1px solid #eceef2; border-radius:14px; background:#f8f9fa; color:#a2a8b6; }
+.hotkey-search-wrap:focus-within { border-color:#e7a7b7; background:#fff; box-shadow:0 0 0 4px rgba(222,130,151,.12); }
+.hotkey-search { padding:12px 0; color:#35415a; }
+.hotkey-list-heading { grid-template-columns:minmax(0,1fr) 145px; padding:0 30px 9px; color:#a3a9b7; font-size:10px; }
+.hotkey-action-list { display:block; flex:1; overflow:auto; margin:0 20px; padding:0 10px; }
+.hotkey-action-list li { display:grid; grid-template-columns:minmax(0,1fr) 145px; align-items:center; min-height:76px; padding:0 10px; border:0; border-radius:13px; background:#fff; box-shadow:none; }
+.hotkey-action-list li div:first-child { gap:6px; }.hotkey-action-list li strong { color:#3b465d; font-size:14px; font-weight:720; }.hotkey-action-list li div:first-child span { width:max-content; padding:3px 8px; border:1px solid #e7e9ef; border-radius:6px; background:#fafafb; color:#777f91; font-family:ui-monospace,SFMono-Regular,Consolas,monospace; font-size:11px; font-weight:700; }
+.hotkey-action-list li:not(.hotkey-inline-feedback):hover { background:#fff8f8; box-shadow:none; transform:none; }
+.hotkey-row-actions { justify-content:center; gap:5px; }.hotkey-dialog .hotkey-row-actions button { flex:0 0 auto; padding:6px 7px; border-radius:7px; font-size:11px; }
+.hotkey-dialog .hotkey-row-actions .hotkey-action-edit { border-color:#ead1e9; background:#fcf3fc; color:#a25799; }.hotkey-dialog .hotkey-row-actions .hotkey-action-edit:hover { background:#f8e5f7; color:#8c4585; }.hotkey-dialog .hotkey-row-actions .hotkey-action-disable { border-color:#f0dfb9; background:#fffaf0; color:#9d7623; }.hotkey-dialog .hotkey-row-actions .hotkey-action-disable:hover { background:#fff0cc; }.hotkey-dialog .hotkey-row-actions .hotkey-action-reset { border-color:#f0d0d4; background:#fff6f6; color:#b65b67; }.hotkey-dialog .hotkey-row-actions .hotkey-action-reset:hover { background:#ffe8ea; }
+.hotkey-recorder { grid-column:1 / -1; width:auto; padding:11px 0; color:#a25799; }.hotkey-action-list .hotkey-inline-feedback { display:flex; grid-column:1 / -1; min-height:0; margin:1px 10px; border:0; border-radius:9px; background:#fff3f4; transform:none; }
+.hotkey-settings-pane footer { flex:none; min-height:0; padding:18px 30px 22px; border:0; border-top:1px solid #f0f1f4; border-radius:0; background:#fff; }.hotkey-settings-pane footer > button { border-color:#ead4bd; border-radius:9px; background:#fff7ec; color:#956639; }.hotkey-settings-pane footer > button:hover { background:#ffedd5; color:#78502a; }
+@media (max-width:680px) { .hotkey-dialog { max-height:calc(100vh - 24px); border-radius:20px; }.hotkey-workspace { grid-template-columns:1fr; min-height:0; }.hotkey-intro { display:none; }.hotkey-settings-pane { max-height:calc(100vh - 24px); }.hotkey-settings-pane header { padding:23px 20px 17px; }.hotkey-search-wrap { margin-left:20px; margin-right:20px; }.hotkey-list-heading { grid-template-columns:minmax(0,1fr) 120px; padding-left:20px; padding-right:20px; }.hotkey-action-list { margin:0 10px; padding:0 5px; }.hotkey-action-list li { grid-template-columns:minmax(0,1fr) 120px; padding:0 5px; }.hotkey-settings-pane footer { padding:16px 20px 18px; } }
+
+/* Aurora glass treatment with a continuously moving perimeter glow. */
+.hotkey-overlay { background:radial-gradient(circle at 22% 18%,rgba(166,89,216,.34),transparent 30%), radial-gradient(circle at 79% 78%,rgba(67,113,208,.28),transparent 33%), rgba(4,7,16,.76); backdrop-filter:blur(15px) saturate(125%); -webkit-backdrop-filter:blur(15px) saturate(125%); }
+.hotkey-dialog { position:relative; isolation:isolate; overflow:visible; border:0; background:transparent; box-shadow:0 28px 88px rgba(0,0,0,.58), 0 0 42px rgba(184,91,235,.18); }
+.hotkey-dialog::before { content:""; position:absolute; z-index:-2; inset:-2px; border-radius:30px; background:conic-gradient(from 0deg,#745ef5,#f078cf,#bd7cff,#4bbce7,#8069f7); filter:blur(.25px); animation:hotkey-aurora-spin 7s linear infinite; }
+.hotkey-dialog::after { content:""; position:absolute; z-index:-1; inset:0; border-radius:28px; background:rgba(12,15,30,.8); box-shadow:inset 0 0 0 1px rgba(255,255,255,.14); }
+.hotkey-workspace { overflow:hidden; border-radius:27px; background:rgba(18,22,42,.62); backdrop-filter:blur(28px) saturate(145%); -webkit-backdrop-filter:blur(28px) saturate(145%); }
+.hotkey-intro { background:linear-gradient(155deg,rgba(86,44,116,.66),rgba(46,30,72,.73)); color:#f8eeff; border-inline-end:1px solid rgba(255,255,255,.1); }
+.hotkey-intro-icon { background:rgba(255,255,255,.13); color:#ffe8fb; box-shadow:0 10px 28px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.18); }
+.hotkey-intro h2 { color:#fff; }.hotkey-intro > p { color:#d9c6e7; }.hotkey-intro-count { border-color:rgba(255,255,255,.14); }.hotkey-intro-count strong { background:linear-gradient(135deg,#f27cd1,#9077ff); box-shadow:0 5px 15px rgba(228,102,201,.26); }.hotkey-intro-count span { color:#eadcf3; }
+.hotkey-settings-pane { background:rgba(21,25,46,.66); }.hotkey-settings-pane header { background:transparent; color:#faf8ff; border-bottom:1px solid rgba(255,255,255,.09); }.hotkey-settings-pane h2 { color:#fff; }.hotkey-settings-pane header p { color:#b9bed2; }.hotkey-settings-pane .hotkey-dialog-close { border-color:rgba(255,255,255,.15); background:rgba(255,255,255,.09); color:#d9deef; }.hotkey-settings-pane .hotkey-dialog-close:hover { background:rgba(255,255,255,.17); color:#fff; }
+.hotkey-search-wrap { border-color:rgba(255,255,255,.12); background:rgba(255,255,255,.075); color:#b7bed4; }.hotkey-search-wrap:focus-within { border-color:rgba(225,146,255,.7); background:rgba(255,255,255,.11); box-shadow:0 0 0 4px rgba(193,114,241,.16); }.hotkey-search { color:#f5f2ff; }.hotkey-search::placeholder { color:#a9afc4; }
+.hotkey-list-heading { color:#9fa8c0; }.hotkey-action-list li { background:transparent; }.hotkey-action-list li strong { color:#f2f3fb; }.hotkey-action-list li div:first-child span { border-color:rgba(255,255,255,.14); background:rgba(255,255,255,.07); color:#c3cadc; }.hotkey-action-list li:not(.hotkey-inline-feedback):hover { background:rgba(255,255,255,.075); }
+.hotkey-dialog .hotkey-row-actions .hotkey-action-edit { border-color:rgba(185,151,255,.4); background:rgba(137,100,222,.2); color:#e0d4ff; }.hotkey-dialog .hotkey-row-actions .hotkey-action-edit:hover { background:rgba(151,111,237,.36); color:#fff; }.hotkey-dialog .hotkey-row-actions .hotkey-action-disable { border-color:rgba(243,203,116,.32); background:rgba(172,124,32,.18); color:#ffe1a4; }.hotkey-dialog .hotkey-row-actions .hotkey-action-disable:hover { background:rgba(191,141,42,.34); color:#fff2d2; }.hotkey-dialog .hotkey-row-actions .hotkey-action-reset { border-color:rgba(245,149,165,.32); background:rgba(179,61,87,.18); color:#ffc8d0; }.hotkey-dialog .hotkey-row-actions .hotkey-action-reset:hover { background:rgba(195,71,97,.34); color:#ffe1e5; }
+.hotkey-recorder { color:#efb9ff; }.hotkey-action-list .hotkey-inline-feedback { border:1px solid rgba(238,121,139,.3); background:rgba(113,30,47,.36); color:#ffc4cc; }.hotkey-settings-pane footer { border-color:rgba(255,255,255,.09); background:rgba(9,12,27,.18); }.hotkey-settings-pane footer > button { border-color:rgba(244,196,123,.35); background:rgba(157,104,25,.19); color:#ffe1a8; }.hotkey-settings-pane footer > button:hover { background:rgba(184,123,24,.34); color:#fff1d5; }
+@keyframes hotkey-aurora-spin { to { transform:rotate(360deg); } }
+@media (prefers-reduced-motion:reduce) { .hotkey-dialog::before { animation:none; } }
+@media (max-width:680px) { .hotkey-dialog::before { border-radius:22px; }.hotkey-dialog::after { border-radius:20px; }.hotkey-workspace { border-radius:19px; } }
+
+/* Single-surface frosted-glass modal: intentionally no moving elements behind it. */
+.hotkey-overlay { background:linear-gradient(130deg,rgba(26,21,50,.63),rgba(11,27,51,.57)), radial-gradient(circle at 16% 82%,rgba(192,89,181,.36),transparent 31%), radial-gradient(circle at 86% 12%,rgba(61,154,218,.34),transparent 28%); backdrop-filter:blur(18px) saturate(135%); -webkit-backdrop-filter:blur(18px) saturate(135%); }
+.hotkey-dialog { width:min(720px,100%); border:1px solid rgba(255,255,255,.34); border-radius:22px; background:rgba(20,25,49,.58); box-shadow:0 26px 75px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.18); backdrop-filter:blur(34px) saturate(145%); -webkit-backdrop-filter:blur(34px) saturate(145%); overflow:hidden; }
+.hotkey-dialog::before, .hotkey-dialog::after { content:none; animation:none; }
+.hotkey-glass-layout { display:flex; flex-direction:column; min-height:510px; max-height:min(660px,calc(100vh - 32px)); background:linear-gradient(135deg,rgba(255,255,255,.08),rgba(255,255,255,.025)); }
+.hotkey-glass-header { display:flex; align-items:center; justify-content:space-between; gap:16px; flex:none; padding:24px 26px 20px; border-bottom:1px solid rgba(255,255,255,.14); background:rgba(255,255,255,.055); color:#fff; }
+.hotkey-glass-title { display:flex; align-items:center; gap:13px; }.hotkey-glass-icon { display:grid; place-items:center; width:42px; height:42px; border:1px solid rgba(255,255,255,.22); border-radius:13px; background:linear-gradient(145deg,rgba(211,150,255,.42),rgba(107,193,255,.24)); color:#fff; box-shadow:inset 0 1px 0 rgba(255,255,255,.24); }.hotkey-glass-icon svg { width:23px; height:23px; }.hotkey-glass-title h2 { margin:0; color:#fff; font-size:20px; font-weight:740; letter-spacing:-.025em; }.hotkey-glass-title p { margin:4px 0 0; color:#ccd4ec; font-size:12px; }
+.hotkey-glass-header .hotkey-dialog-close { border-color:rgba(255,255,255,.18); border-radius:11px; background:rgba(255,255,255,.08); color:#e6ebf8; }.hotkey-glass-header .hotkey-dialog-close:hover { background:rgba(255,255,255,.18); color:#fff; }
+.hotkey-glass-body { display:flex; min-height:0; flex:1; flex-direction:column; }.hotkey-glass-toolbar { display:flex; align-items:center; gap:10px; flex:none; padding:18px 26px 11px; }.hotkey-glass-toolbar .hotkey-search-wrap { flex:1; margin:0; border-color:rgba(255,255,255,.17); border-radius:11px; background:rgba(6,10,27,.18); color:#bdc7e1; }.hotkey-glass-toolbar .hotkey-search-wrap:focus-within { border-color:rgba(197,152,255,.7); background:rgba(255,255,255,.11); box-shadow:0 0 0 4px rgba(181,125,243,.14); }.hotkey-glass-toolbar .hotkey-search { color:#fff; }.hotkey-action-count { display:grid; place-items:center; flex:none; width:38px; height:38px; border:1px solid rgba(255,255,255,.16); border-radius:11px; background:rgba(255,255,255,.09); color:#e7ecff; font-size:12px; font-weight:750; }
+.hotkey-glass-body .hotkey-list-heading { grid-template-columns:minmax(0,1fr) 145px; padding:3px 30px 8px; color:#aeb9d4; }.hotkey-glass-body .hotkey-action-list { display:block; flex:1; overflow:auto; margin:0 18px; padding:0 8px; }.hotkey-glass-body .hotkey-action-list li { display:grid; grid-template-columns:minmax(0,1fr) 145px; min-height:70px; padding:0 10px; border:0; border-top:1px solid rgba(255,255,255,.1); border-radius:0; background:transparent; }.hotkey-glass-body .hotkey-action-list li strong { color:#f5f7ff; }.hotkey-glass-body .hotkey-action-list li div:first-child span { border-color:rgba(255,255,255,.13); background:rgba(255,255,255,.07); color:#c6cee3; }.hotkey-glass-body .hotkey-action-list li:not(.hotkey-inline-feedback):hover { background:rgba(255,255,255,.075); box-shadow:inset 3px 0 rgba(215,153,255,.8); }
+.hotkey-glass-body .hotkey-recorder { grid-column:1 / -1; color:#e9bdff; }.hotkey-glass-body .hotkey-inline-feedback { display:flex; grid-column:1 / -1; border:1px solid rgba(246,135,151,.32); background:rgba(132,37,57,.4); color:#ffd1d7; }.hotkey-glass-body footer { flex:none; padding:17px 26px 20px; border-top:1px solid rgba(255,255,255,.12); border-radius:0; background:rgba(6,9,23,.12); }.hotkey-glass-body footer > button { border-color:rgba(255,218,149,.34); background:rgba(181,128,33,.2); color:#ffe3ad; }.hotkey-glass-body footer > button:hover { background:rgba(203,144,35,.34); color:#fff1d3; }
+@media (max-width:560px) { .hotkey-dialog { border-radius:17px; }.hotkey-glass-layout { min-height:0; max-height:calc(100vh - 24px); }.hotkey-glass-header { padding:19px 18px 16px; }.hotkey-glass-toolbar { padding:14px 18px 9px; }.hotkey-glass-body .hotkey-list-heading { grid-template-columns:minmax(0,1fr) 120px; padding-left:20px; padding-right:20px; }.hotkey-glass-body .hotkey-action-list { margin:0 10px; }.hotkey-glass-body .hotkey-action-list li { grid-template-columns:minmax(0,1fr) 120px; }.hotkey-glass-body footer { padding:15px 18px 17px; } }
+
+/* Light frosted glass: the colour fields remain visible through the modal. */
+.hotkey-overlay { background:radial-gradient(circle at 15% 20%,rgba(231,112,190,.58),transparent 28%), radial-gradient(circle at 84% 16%,rgba(101,181,255,.62),transparent 29%), radial-gradient(circle at 72% 86%,rgba(161,116,244,.53),transparent 31%), rgba(232,239,255,.42); backdrop-filter:blur(24px) saturate(140%); -webkit-backdrop-filter:blur(24px) saturate(140%); }
+.hotkey-dialog { border-color:rgba(255,255,255,.78); background:rgba(255,255,255,.38); box-shadow:0 28px 85px rgba(67,71,125,.22), inset 0 1px 0 rgba(255,255,255,.82); backdrop-filter:blur(38px) saturate(155%); -webkit-backdrop-filter:blur(38px) saturate(155%); }
+.hotkey-glass-layout { background:linear-gradient(135deg,rgba(255,255,255,.4),rgba(247,249,255,.18)); }
+.hotkey-glass-header { border-bottom-color:rgba(255,255,255,.66); background:rgba(255,255,255,.26); color:#28324e; }.hotkey-glass-title h2 { color:#293551; }.hotkey-glass-title p { color:#66718c; }.hotkey-glass-icon { border-color:rgba(255,255,255,.82); background:linear-gradient(145deg,rgba(255,255,255,.8),rgba(235,224,255,.5)); color:#7457ad; box-shadow:0 8px 20px rgba(112,91,162,.11), inset 0 1px 0 #fff; }.hotkey-glass-header .hotkey-dialog-close { border-color:rgba(255,255,255,.76); background:rgba(255,255,255,.48); color:#66718b; }.hotkey-glass-header .hotkey-dialog-close:hover { background:rgba(255,255,255,.8); color:#35405b; }
+.hotkey-glass-body { background:rgba(255,255,255,.09); }.hotkey-glass-toolbar .hotkey-search-wrap { border-color:rgba(255,255,255,.82); background:rgba(255,255,255,.43); color:#7d87a1; }.hotkey-glass-toolbar .hotkey-search-wrap:focus-within { border-color:rgba(144,120,217,.55); background:rgba(255,255,255,.62); box-shadow:0 0 0 4px rgba(154,125,228,.15); }.hotkey-glass-toolbar .hotkey-search { color:#34405c; }.hotkey-glass-toolbar .hotkey-search::placeholder { color:#8c96ad; }.hotkey-action-count { border-color:rgba(255,255,255,.8); background:rgba(255,255,255,.42); color:#59647f; }
+.hotkey-glass-body .hotkey-list-heading { color:#77829c; }.hotkey-glass-body .hotkey-action-list li { border-top-color:rgba(255,255,255,.55); }.hotkey-glass-body .hotkey-action-list li strong { color:#38445e; }.hotkey-glass-body .hotkey-action-list li div:first-child span { border-color:rgba(255,255,255,.78); background:rgba(255,255,255,.35); color:#68738b; }.hotkey-glass-body .hotkey-action-list li:not(.hotkey-inline-feedback):hover { background:rgba(255,255,255,.32); box-shadow:inset 3px 0 rgba(167,114,218,.72); }
+.hotkey-dialog .hotkey-row-actions .hotkey-action-edit { border-color:rgba(184,159,235,.56); background:rgba(242,237,255,.55); color:#684baa; }.hotkey-dialog .hotkey-row-actions .hotkey-action-edit:hover { background:rgba(229,218,255,.82); color:#573b99; }.hotkey-dialog .hotkey-row-actions .hotkey-action-disable { border-color:rgba(231,204,137,.62); background:rgba(255,248,223,.6); color:#8f6921; }.hotkey-dialog .hotkey-row-actions .hotkey-action-disable:hover { background:rgba(255,238,191,.84); }.hotkey-dialog .hotkey-row-actions .hotkey-action-reset { border-color:rgba(240,174,184,.62); background:rgba(255,240,242,.63); color:#ab4e5d; }.hotkey-dialog .hotkey-row-actions .hotkey-action-reset:hover { background:rgba(255,224,229,.88); }
+.hotkey-glass-body .hotkey-recorder { color:#8454b3; }.hotkey-glass-body .hotkey-inline-feedback { border-color:rgba(215,86,105,.28); background:rgba(255,233,236,.64); color:#9b3444; }.hotkey-glass-body footer { border-top-color:rgba(255,255,255,.6); background:rgba(255,255,255,.2); }.hotkey-glass-body footer > button { border-color:rgba(234,200,131,.7); background:rgba(255,248,225,.55); color:#856028; }.hotkey-glass-body footer > button:hover { background:rgba(255,238,193,.78); color:#6b4c18; }
+
+/* Compact header and one shared frosted surface for modal controls. */
+.hotkey-glass-header { padding-top:14px; padding-bottom:13px; }
+.hotkey-glass-icon { width:36px; height:36px; border-radius:11px; }.hotkey-glass-icon svg { width:20px; height:20px; }.hotkey-glass-title h2 { font-size:18px; }.hotkey-glass-title p { margin-top:2px; }
+.hotkey-dialog .hotkey-row-actions .hotkey-action-edit, .hotkey-dialog .hotkey-row-actions .hotkey-action-disable, .hotkey-dialog .hotkey-row-actions .hotkey-action-reset, .hotkey-glass-body footer > button { background:rgba(255,255,255,.48); }
+.hotkey-dialog .hotkey-row-actions .hotkey-action-edit:hover, .hotkey-dialog .hotkey-row-actions .hotkey-action-disable:hover, .hotkey-dialog .hotkey-row-actions .hotkey-action-reset:hover, .hotkey-glass-body footer > button:hover { background:rgba(255,255,255,.78); }
+
+/* Deliberately compact modal header; all action buttons use the cancel surface. */
+.hotkey-glass-header { min-height:0; padding:8px 18px; }
+.hotkey-glass-title { gap:9px; }.hotkey-glass-icon { width:30px; height:30px; border-radius:9px; }.hotkey-glass-icon svg { width:17px; height:17px; }.hotkey-glass-title h2 { font-size:16px; line-height:1.2; }.hotkey-glass-title p { display:none; }
+.hotkey-glass-header .hotkey-dialog-close { width:30px; height:30px; font-size:18px; }
+.hotkey-glass-body .hotkey-row-actions button, .hotkey-glass-body footer > button, .hotkey-glass-body .hotkey-recorder button { border-color:rgba(255,255,255,.78) !important; background:rgba(255,255,255,.48) !important; box-shadow:inset 0 1px 0 rgba(255,255,255,.45); }
+.hotkey-glass-body .hotkey-row-actions button:hover, .hotkey-glass-body footer > button:hover, .hotkey-glass-body .hotkey-recorder button:hover { background:rgba(255,255,255,.76) !important; }
+
+/* Override the generic header rule with the final compact purple header. */
+.hotkey-dialog .hotkey-glass-header { min-height:44px; box-sizing:border-box; padding:6px 16px; background:linear-gradient(105deg,rgba(103,75,181,.78),rgba(138,95,203,.7)); color:#fff; }
+.hotkey-dialog .hotkey-glass-header .hotkey-glass-title h2 { color:#fff; }
+
+/* One shared visual language for every modal button. */
+.hotkey-dialog .hotkey-glass-header { min-height:54px; padding:10px 16px; }
+.hotkey-dialog .hotkey-glass-layout button { border-color:rgba(255,255,255,.8) !important; background:rgba(255,255,255,.48) !important; color:#536078 !important; box-shadow:inset 0 1px 0 rgba(255,255,255,.48); }
+.hotkey-dialog .hotkey-glass-layout button:hover { border-color:rgba(255,255,255,.95) !important; background:rgba(255,255,255,.78) !important; color:#394660 !important; }
+
+.hotkey-dialog .hotkey-glass-icon { border:0; background:transparent; box-shadow:none; }
+.hotkey-glass-body .hotkey-action-list { margin-top:4px; }
+
+/* Header icons stay plain and white, without button fills. */
+.hotkey-dialog .hotkey-glass-header .hotkey-glass-icon, .hotkey-dialog .hotkey-glass-header .hotkey-dialog-close { border-color:transparent !important; background:transparent !important; color:#fff !important; box-shadow:none; }
+.hotkey-dialog .hotkey-glass-header .hotkey-dialog-close:hover { border-color:rgba(255,255,255,.35) !important; background:transparent !important; color:#fff !important; }
+
+.hotkey-glass-title { gap:5px; }.hotkey-glass-icon { width:34px; height:34px; }.hotkey-glass-icon svg { width:21px; height:21px; }.hotkey-glass-header .hotkey-dialog-close { width:34px; height:34px; font-size:21px; }.hotkey-dialog .hotkey-glass-header .hotkey-dialog-close:hover { border-color:transparent !important; background:transparent !important; color:#fff !important; }
+
+/* Theme contract: HotkeyProvider accepts light, dark, or system. */
+.hotkey-dialog { --hk-dialog:rgba(255,255,255,.38); --hk-layout:linear-gradient(135deg,rgba(255,255,255,.4),rgba(247,249,255,.18)); --hk-header:linear-gradient(105deg,rgba(103,75,181,.78),rgba(138,95,203,.7)); --hk-header-border:rgba(255,255,255,.66); --hk-panel:rgba(255,255,255,.09); --hk-control:rgba(255,255,255,.48); --hk-control-hover:rgba(255,255,255,.78); --hk-line:rgba(255,255,255,.55); --hk-text:#38445e; --hk-muted:#68738b; --hk-count:#59647f; --hk-shadow:rgba(67,71,125,.22); }
+.hotkey-dialog[data-hotkey-theme="dark"] { --hk-dialog:rgba(10,13,27,.67); --hk-layout:linear-gradient(135deg,rgba(61,50,102,.34),rgba(11,20,42,.22)); --hk-header:linear-gradient(105deg,rgba(52,39,104,.88),rgba(84,52,133,.84)); --hk-header-border:rgba(210,196,255,.17); --hk-panel:rgba(8,12,27,.21); --hk-control:rgba(255,255,255,.095); --hk-control-hover:rgba(255,255,255,.17); --hk-line:rgba(255,255,255,.11); --hk-text:#f2f3fb; --hk-muted:#bdc5db; --hk-count:#d8ddf1; --hk-shadow:rgba(0,0,0,.54); }
+@media (prefers-color-scheme:dark) { .hotkey-dialog[data-hotkey-theme="system"] { --hk-dialog:rgba(10,13,27,.67); --hk-layout:linear-gradient(135deg,rgba(61,50,102,.34),rgba(11,20,42,.22)); --hk-header:linear-gradient(105deg,rgba(52,39,104,.88),rgba(84,52,133,.84)); --hk-header-border:rgba(210,196,255,.17); --hk-panel:rgba(8,12,27,.21); --hk-control:rgba(255,255,255,.095); --hk-control-hover:rgba(255,255,255,.17); --hk-line:rgba(255,255,255,.11); --hk-text:#f2f3fb; --hk-muted:#bdc5db; --hk-count:#d8ddf1; --hk-shadow:rgba(0,0,0,.54); } }
+.hotkey-dialog { background:var(--hk-dialog); box-shadow:0 28px 85px var(--hk-shadow), inset 0 1px 0 rgba(255,255,255,.18); }.hotkey-glass-layout { background:var(--hk-layout); }.hotkey-dialog .hotkey-glass-header { background:var(--hk-header); border-bottom-color:var(--hk-header-border); }.hotkey-glass-body { background:var(--hk-panel); }.hotkey-glass-toolbar .hotkey-search-wrap, .hotkey-action-count, .hotkey-dialog .hotkey-glass-layout button { background:var(--hk-control) !important; border-color:var(--hk-line) !important; }.hotkey-glass-toolbar .hotkey-search-wrap:focus-within { background:var(--hk-control); }.hotkey-glass-body .hotkey-action-list li { border-top-color:var(--hk-line); }.hotkey-glass-body .hotkey-action-list li strong, .hotkey-glass-toolbar .hotkey-search { color:var(--hk-text); }.hotkey-glass-body .hotkey-action-list li div:first-child span { color:var(--hk-muted); border-color:var(--hk-line); background:var(--hk-control); }.hotkey-glass-body .hotkey-list-heading, .hotkey-action-count { color:var(--hk-count); }.hotkey-glass-body .hotkey-action-list li:not(.hotkey-inline-feedback):hover, .hotkey-dialog .hotkey-glass-layout button:hover { background:var(--hk-control-hover) !important; }.hotkey-glass-body footer { border-top-color:var(--hk-line); background:var(--hk-panel); }.hotkey-dialog .hotkey-glass-layout button { color:var(--hk-text) !important; }
+.hotkey-overlay[data-hotkey-theme="dark"] { background:radial-gradient(circle at 15% 20%,rgba(150,72,181,.35),transparent 28%),radial-gradient(circle at 84% 16%,rgba(57,126,207,.34),transparent 29%),rgba(3,5,14,.75); }
+[data-hotkey-theme="dark"] .hotkey-floating-trigger { border-color:rgba(255,255,255,.18); background:rgba(22,26,47,.88); color:#e6d9ff; box-shadow:0 18px 42px rgba(0,0,0,.4); }
+@media (prefers-color-scheme:dark) { .hotkey-overlay[data-hotkey-theme="system"] { background:radial-gradient(circle at 15% 20%,rgba(150,72,181,.35),transparent 28%),radial-gradient(circle at 84% 16%,rgba(57,126,207,.34),transparent 29%),rgba(3,5,14,.75); } [data-hotkey-theme="system"] .hotkey-floating-trigger { border-color:rgba(255,255,255,.18); background:rgba(22,26,47,.88); color:#e6d9ff; box-shadow:0 18px 42px rgba(0,0,0,.4); } }
+
+/* Softer interaction contrast for the dark theme. */
+.hotkey-dialog[data-hotkey-theme="dark"] { --hk-line:rgba(255,255,255,.065); --hk-control-hover:rgba(255,255,255,.095); border-color:rgba(255,255,255,.12); }
+.hotkey-dialog[data-hotkey-theme="dark"] .hotkey-glass-layout button { box-shadow:none; }.hotkey-dialog[data-hotkey-theme="dark"] .hotkey-glass-layout button:hover { box-shadow:none; }.hotkey-dialog[data-hotkey-theme="dark"] .hotkey-glass-body .hotkey-action-list li:not(.hotkey-inline-feedback):hover { background:rgba(255,255,255,.045); box-shadow:inset 3px 0 rgba(215,153,255,.38); }
+@media (prefers-color-scheme:dark) { .hotkey-dialog[data-hotkey-theme="system"] { --hk-line:rgba(255,255,255,.065); --hk-control-hover:rgba(255,255,255,.095); border-color:rgba(255,255,255,.12); } .hotkey-dialog[data-hotkey-theme="system"] .hotkey-glass-layout button, .hotkey-dialog[data-hotkey-theme="system"] .hotkey-glass-layout button:hover { box-shadow:none; } .hotkey-dialog[data-hotkey-theme="system"] .hotkey-glass-body .hotkey-action-list li:not(.hotkey-inline-feedback):hover { background:rgba(255,255,255,.045); box-shadow:inset 3px 0 rgba(215,153,255,.38); } }
+
+.hotkey-dialog[data-hotkey-theme="dark"] .hotkey-glass-body .hotkey-action-list li:not(.hotkey-inline-feedback):hover { background:rgba(255,255,255,.012); box-shadow:inset 2px 0 rgba(215,153,255,.16); }
+@media (prefers-color-scheme:dark) { .hotkey-dialog[data-hotkey-theme="system"] .hotkey-glass-body .hotkey-action-list li:not(.hotkey-inline-feedback):hover { background:rgba(255,255,255,.012); box-shadow:inset 2px 0 rgba(215,153,255,.16); } }
+
+/* Final shared hover state: retain the control colour and use a 3% white wash. */
+.hotkey-glass-body .hotkey-action-list li:not(.hotkey-inline-feedback):hover, .hotkey-dialog .hotkey-glass-layout button:hover { background:rgb(255 255 255 / 3%) !important; }
+.hotkey-dialog .hotkey-glass-layout button:hover { border-color:var(--hk-line) !important; color:var(--hk-text) !important; }
+
+.hotkey-glass-body .hotkey-action-list li { border-top:0; }
+
+.hotkey-dialog[data-hotkey-theme="dark"] { border-color:transparent; }
+@media (prefers-color-scheme:dark) { .hotkey-dialog[data-hotkey-theme="system"] { border-color:transparent; } }
+
+/* Keep the action title and its recorder/controls on one flex row. */
+.hotkey-glass-body .hotkey-action-list li:not(.hotkey-inline-feedback) { display:flex; align-items:center; justify-content:space-between; gap:16px; }
+.hotkey-glass-body .hotkey-recorder, .hotkey-glass-body .hotkey-row-actions { width:auto; margin-left:auto; padding:0; justify-content:flex-end; }
+
+.hotkey-glass-body .hotkey-action-list li:not(.hotkey-inline-feedback), .hotkey-glass-body .hotkey-recorder { align-items:center !important; }
+
+.hotkey-glass-body .hotkey-action-list li:not(.hotkey-inline-feedback) { flex-direction:row !important; }
+.hotkey-glass-body .hotkey-action-list li:not(.hotkey-inline-feedback) > div:first-child, .hotkey-glass-body .hotkey-recorder, .hotkey-glass-body .hotkey-row-actions { align-self:center !important; }
+
+.hotkey-glass-body .hotkey-row-actions { flex-wrap:nowrap !important; }
+
+.hotkey-glass-body .hotkey-recorder { flex-wrap:nowrap !important; white-space:nowrap; }
+
+.hotkey-glass-body button { display:grid; place-items:center; box-sizing:border-box; width:64px; height:36px; padding:0 !important; }
+.hotkey-glass-body .hotkey-recorder button { width:48px; height:28px; font-size:11px; }
+.hotkey-glass-body .hotkey-row-actions button { width:48px; height:28px; font-size:11px; }
+
+/* Header reset action and compact, left-aligned validation feedback. */
+.hotkey-header-actions { display:flex; align-items:center; gap:4px; }.hotkey-dialog .hotkey-glass-header .hotkey-reset-all-icon { display:grid; place-items:center; width:34px; height:34px; padding:0 !important; border-color:transparent !important; background:transparent !important; color:#fff !important; box-shadow:none; }.hotkey-dialog .hotkey-glass-header .hotkey-reset-all-icon:hover { border-color:transparent !important; background:transparent !important; color:#fff !important; }.hotkey-reset-all-icon svg { width:20px; height:20px; }
+.hotkey-glass-body .hotkey-inline-feedback { display:flex !important; align-items:center !important; justify-content:flex-start !important; gap:7px; min-height:0; margin:2px 0 6px; padding:3px 0 !important; border:0 !important; background:transparent !important; box-shadow:none !important; color:#c72c39; direction:ltr; text-align:left; }.hotkey-glass-body .hotkey-inline-feedback > span { align-self:center; width:16px; height:16px; background:#c72c39; font-size:10px; }.hotkey-glass-body .hotkey-inline-feedback p { flex:0 1 auto; margin:0; color:inherit; font-size:12px; text-align:left; }
+
+.hotkey-glass-body .hotkey-action-list li.hotkey-inline-feedback { display:flex !important; flex-direction:row !important; align-items:center !important; justify-content:flex-start !important; width:100%; text-align:left; }
+
+/* Validation belongs to its action item, rather than becoming a second list item. */
+.hotkey-glass-body .hotkey-action-list li.hotkey-action-item { display:block !important; min-height:0; padding:0 10px; }
+.hotkey-glass-body .hotkey-action-list li.hotkey-action-item { padding-block:10px; }
+.hotkey-dialog { border:0; }
+.hotkey-glass-body .hotkey-action-list li.hotkey-action-item { border-top:1px solid var(--hk-line); }
+.hotkey-glass-body .hotkey-action-list li.hotkey-action-item:hover { border-top-color:transparent; }
+
+.hotkey-header-actions { height:34px; align-items:center; }.hotkey-dialog .hotkey-glass-header .hotkey-reset-all-icon, .hotkey-dialog .hotkey-glass-header .hotkey-dialog-close { display:grid; place-items:center; flex:none; width:34px !important; height:34px !important; margin:0; padding:0 !important; cursor:pointer; }
+
+/* Persian keeps the entire settings surface in a natural RTL layout. */
+.hotkey-dialog[dir="rtl"] .hotkey-glass-header, .hotkey-dialog[dir="rtl"] .hotkey-glass-title, .hotkey-dialog[dir="rtl"] .hotkey-action-row { flex-direction:row-reverse; }.hotkey-dialog[dir="rtl"] .hotkey-glass-title, .hotkey-dialog[dir="rtl"] .hotkey-action-info { text-align:right; }.hotkey-dialog[dir="rtl"] .hotkey-action-row .hotkey-recorder, .hotkey-dialog[dir="rtl"] .hotkey-action-row .hotkey-row-actions { margin-left:0; margin-right:auto; }.hotkey-dialog[dir="rtl"] .hotkey-action-item .hotkey-inline-feedback { flex-direction:row-reverse !important; direction:rtl; text-align:right; }.hotkey-dialog[dir="rtl"] .hotkey-action-item .hotkey-inline-feedback p { text-align:right; }
+
+/* Explicit physical placement for the Persian RTL surface. */
+.hotkey-dialog[dir="rtl"] .hotkey-glass-header { flex-direction:row !important; direction:ltr; }.hotkey-dialog[dir="rtl"] .hotkey-glass-title { order:2; margin-left:auto; flex-direction:row-reverse !important; direction:rtl; }.hotkey-dialog[dir="rtl"] .hotkey-header-actions { order:1; direction:ltr; }
+.hotkey-dialog[dir="rtl"] .hotkey-action-row { flex-direction:row !important; direction:ltr; }.hotkey-dialog[dir="rtl"] .hotkey-action-info { order:2; margin-left:auto; align-items:flex-end; text-align:right; direction:rtl; }.hotkey-dialog[dir="rtl"] .hotkey-action-row .hotkey-row-actions, .hotkey-dialog[dir="rtl"] .hotkey-action-row .hotkey-recorder { order:1; margin-right:auto; margin-left:0; direction:ltr; }
+.hotkey-dialog[dir="rtl"] { font-family:"Vazir",Tahoma,sans-serif; }.hotkey-dialog[dir="rtl"] .hotkey-glass-body .hotkey-action-list li.hotkey-action-item:hover { box-shadow:inset -3px 0 #b887f5; }
+.hotkey-dialog[dir="rtl"] .hotkey-recording-label { font-family:"Vazir",Tahoma,sans-serif; direction:rtl; }
+.hotkey-dialog[dir="rtl"] .hotkey-glass-title { flex-direction:row-reverse !important; direction:ltr; }.hotkey-dialog[dir="rtl"] .hotkey-glass-title > div { direction:rtl; text-align:right; }
+.hotkey-glass-body .hotkey-row-actions { gap:8px !important; }
+.hotkey-dialog[dir="rtl"] .hotkey-glass-body .hotkey-row-actions button { flex:0 0 84px; width:84px; font-size:10px; }
+.hotkey-action-row { display:flex !important; align-items:center; justify-content:space-between; gap:16px; min-height:70px; }.hotkey-action-info { display:grid; gap:6px; }.hotkey-action-row .hotkey-recorder, .hotkey-action-row .hotkey-row-actions { align-self:center; margin-left:auto; }
+.hotkey-action-item .hotkey-inline-feedback { display:flex !important; flex-direction:row !important; align-items:center !important; justify-content:flex-start !important; width:100%; margin:-2px 0 8px; padding:0 !important; border:0 !important; background:transparent !important; text-align:left; direction:ltr; }
+
+.hotkey-glass-body .hotkey-recorder, .hotkey-glass-body .hotkey-recording-label { border:0 !important; background:transparent !important; box-shadow:none !important; }
+.hotkey-recording-dot { background:#000 !important; color:#000 !important; }
+.hotkey-recording-dot { display:block; flex:none; width:8px; height:8px; aspect-ratio:1; border-radius:50%; }
+.hotkey-recording-dot { border-radius:1px; transform:rotate(45deg); animation:none; }
+.hotkey-recording-dot { border-radius:50%; transform:none; animation:hotkey-pulse 1s ease-in-out infinite; }
+
+.hotkey-recording-dots { display:flex; align-items:center; gap:3px; }.hotkey-recording-dots i { display:block; width:4px; height:4px; border-radius:50%; background:#000; animation:hotkey-recording-dots 1s ease-in-out infinite; }.hotkey-recording-dots i:nth-child(2) { animation-delay:.15s; }.hotkey-recording-dots i:nth-child(3) { animation-delay:.3s; }@keyframes hotkey-recording-dots { 50% { opacity:.25; transform:scale(.7); } }@media (prefers-reduced-motion:reduce) { .hotkey-recording-dots i { animation:none; } }
+.hotkey-recording-dots { padding:0 !important; border:0 !important; background:transparent !important; }
+.hotkey-dialog[data-hotkey-theme="dark"] .hotkey-recording-dots i { background:#fff; }
+@media (prefers-color-scheme:dark) { .hotkey-dialog[data-hotkey-theme="system"] .hotkey-recording-dots i { background:#fff; } }
+
+/* Inputs do not reliably inherit the dialog font, so keep Persian search in Vazir. */
+.hotkey-dialog[dir="rtl"] .hotkey-search,
+.hotkey-dialog[dir="rtl"] .hotkey-search::placeholder {
+  font-family:"Vazir",Tahoma,sans-serif;
+}

package/package.json

@@ -1,6 +1,67 @@
 {
   "name": "hotkey-engine",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "0.1.0",
+  "description": "Accessible, customizable keyboard shortcuts for React and Next.js.",
+  "license": "MIT",
+  "keywords": [
+    "react",
+    "nextjs",
+    "keyboard-shortcuts",
+    "hotkeys",
+    "accessibility",
+    "rtl",
+    "persian"
+  ],
+  "engines": {
+    "node": ">=18"
+  },
+  "type": "module",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    },
+    "./styles.css": "./dist/styles.css"
+  },
+  "files": [
+    "dist/**/*.js",
+    "dist/**/*.cjs",
+    "dist/**/*.d.ts",
+    "dist/**/*.d.cts",
+    "dist/**/*.css",
+    "dist/fonts/**/*.woff2",
+    "README.md",
+    "LICENSE"
+  ],
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "peerDependencies": {
+    "react": ">=18",
+    "react-dom": ">=18"
+  },
+  "scripts": {
+    "build": "tsup src/index.ts --format esm,cjs --dts --clean && copy src\\styles.css dist\\styles.css && powershell -NoProfile -Command \"New-Item -ItemType Directory -Force -Path 'dist/fonts' | Out-Null; Copy-Item -Force 'src/fonts/Vazir-Regular.woff2','src/fonts/Vazir-Bold.woff2' -Destination 'dist/fonts'\"",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build"
+  },
+  "devDependencies": {
+    "@storybook/react": "^8.6.14",
+    "@storybook/react-vite": "^8.6.14",
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/react": "^16.2.0",
+    "@types/react": "^19.0.10",
+    "@types/react-dom": "^19.0.4",
+    "jsdom": "^26.0.0",
+    "storybook": "^8.6.14",
+    "tsup": "^8.3.6",
+    "typescript": "^5.7.3",
+    "vitest": "^3.0.8"
+  }
+}