:root{--bg:#0f1117;--surface:#1a1d27;--surface2:#252836;--border:#2e3347;--accent:#6c63ff;--accent2:#ff6584;--text:#e8eaf6;--text2:#8892b0;--key-bg:#1e2235;--key-border:#3a3f5c;--key-text:#cdd6f4;--accent-bg:#2d2b55;--accent-shadow:#6c63ff40;--shadow:#00000080;--modal-overlay:#0009}[data-theme=light]{--bg:#f5f0eb;--surface:#fdf8f3;--surface2:#ede8e1;--border:#d8d0c6;--accent:#f97316;--accent2:#e84d6f;--text:#2c2416;--text2:#7a6e60;--key-bg:#ede8e0;--key-border:#cbc4b8;--key-text:#3d3020;--accent-bg:#f973161a;--accent-shadow:#f9731640;--shadow:#0000001a;--modal-overlay:#0000004d}*{box-sizing:border-box;margin:0;padding:0}body{background:var(--bg);color:var(--text);min-height:100vh;font-family:Segoe UI,system-ui,sans-serif}.app{flex-direction:column;height:100vh;display:flex}.header{background:var(--surface);border-bottom:1px solid var(--border);z-index:100;flex-shrink:0;justify-content:space-between;align-items:center;padding:16px 32px;display:flex;position:sticky;top:0}.logo{color:var(--accent);letter-spacing:-.5px;font-size:1.4rem;font-weight:700}.logo span{color:var(--text)}.header-right{align-items:center;gap:10px;display:flex}.theme-toggle{background:var(--surface2);border:1px solid var(--border);width:34px;height:34px;color:var(--text2);cursor:pointer;border-radius:8px;justify-content:center;align-items:center;font-size:1rem;transition:all .15s;display:flex}.theme-toggle:hover{border-color:var(--accent);color:var(--accent)}.plan-badge{background:var(--surface2);border:1px solid var(--border);color:var(--text2);border-radius:20px;padding:4px 10px;font-size:.75rem;transition:border-color .15s}.plan-badge.pro{background:var(--accent-bg);border-color:var(--accent);color:var(--accent)}.container{flex:1;display:flex;overflow:hidden}.sidebar{background:var(--surface);border-right:1px solid var(--border);flex-direction:column;width:260px;min-width:260px;display:flex;overflow:hidden}.sidebar-header{border-bottom:1px solid var(--border);padding:8px}.sidebar-nav-btn{width:100%;color:var(--text2);cursor:pointer;text-transform:uppercase;letter-spacing:1px;-webkit-user-select:none;user-select:none;background:0 0;border:1px solid #0000;border-radius:8px;justify-content:space-between;align-items:center;padding:8px 10px;font-family:inherit;font-size:.72rem;transition:background .15s,color .15s,border-color .15s;display:flex}.sidebar-nav-btn:hover{background:var(--accent-bg);border-color:var(--accent);color:var(--accent)}.sidebar-nav-btn:hover .app-count-label,.sidebar-nav-btn:hover .sidebar-home-icon{color:var(--accent)}.sidebar-home-icon{color:var(--text2);flex-shrink:0;font-size:.9rem;transition:color .15s}.sidebar-header-label{align-items:center;gap:6px;display:flex}.app-count-label{color:var(--text2);font-size:.8rem;transition:color .15s}.app-list{flex:1;padding:8px;overflow-y:auto}.app-item{cursor:pointer;border:1px solid #0000;border-radius:8px;align-items:center;gap:10px;padding:10px 12px;transition:background .15s;display:flex}.app-item:hover{background:var(--surface2)}.app-item.active{background:var(--accent-bg);border-color:var(--accent)}.app-icon{border-radius:8px;flex-shrink:0;justify-content:center;align-items:center;width:32px;height:32px;font-size:1.1rem;display:flex}.app-info{flex:1}.app-name{font-size:.9rem;font-weight:500}.app-count{color:var(--text2);font-size:.75rem}.app-delete{opacity:0;width:20px;height:20px;color:var(--accent2);cursor:pointer;background:0 0;border:none;border-radius:4px;justify-content:center;align-items:center;font-size:.9rem;transition:opacity .15s,background .15s;display:flex}.app-item:hover .app-delete{opacity:1}.app-delete:hover{background:#ff658426}.add-app-btn{border:1px dashed var(--border);color:var(--text2);cursor:pointer;background:0 0;border-radius:8px;justify-content:center;align-items:center;gap:6px;margin:12px;padding:10px;font-size:.85rem;transition:all .15s;display:flex}.add-app-btn:hover{border-color:var(--accent);color:var(--accent);background:#6c63ff0d}.limit-note{color:var(--accent2);font-size:.75rem}.upgrade-banner{background:linear-gradient(135deg, var(--accent-bg), var(--surface));border:1px solid var(--accent);text-align:center;border-radius:10px;margin:8px;padding:12px}.upgrade-banner p{color:var(--text2);margin-bottom:8px;font-size:.78rem;line-height:1.4}.upgrade-btn{background:var(--accent);color:#fff;cursor:pointer;border:none;border-radius:6px;width:100%;padding:8px;font-size:.82rem;font-weight:600;transition:opacity .15s}.upgrade-btn:hover{opacity:.85}.main{flex-direction:column;flex:1;display:flex;overflow:hidden}.empty-state{color:var(--text2);text-align:center;flex-direction:column;flex:1;justify-content:center;align-items:center;gap:12px;padding:60px;display:flex}.empty-state .icon{opacity:.4;font-size:3rem}.empty-state p{font-size:.9rem;line-height:1.6}.app-view{flex-direction:column;flex:1;display:flex;overflow:hidden}.app-header{border-bottom:1px solid var(--border);flex-shrink:0;justify-content:space-between;align-items:center;padding:20px 28px 16px;display:flex}.app-title{font-size:1.2rem;font-weight:600}.app-subtitle{color:var(--text2);margin-top:2px;font-size:.8rem}.add-shortcut-btn{background:var(--accent);color:#fff;cursor:pointer;border:none;border-radius:8px;align-items:center;gap:6px;padding:8px 16px;font-size:.85rem;font-weight:600;transition:opacity .15s;display:flex}.add-shortcut-btn:hover{opacity:.85}.content-area{flex-direction:column;flex:1;gap:24px;padding:20px 28px;display:flex;overflow-y:auto}.section-title{color:var(--text2);text-transform:uppercase;letter-spacing:1px;margin-bottom:10px;font-size:.8rem}.keyboard-wrap{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:20px;overflow-x:auto}.keyboard-header{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px;margin-bottom:14px;display:flex}.keyboard-title{color:var(--text2);text-transform:uppercase;letter-spacing:1px;font-size:.8rem}.layout-selector{gap:4px;display:flex}.layout-btn{background:var(--surface2);border:1px solid var(--border);color:var(--text2);cursor:pointer;border-radius:6px;padding:4px 10px;font-size:.75rem;transition:all .15s}.layout-btn:hover{border-color:var(--accent);color:var(--accent)}.layout-btn.active{border-color:var(--accent);color:var(--accent);background:#6c63ff26;font-weight:600}.keyboard{flex-direction:column;gap:5px;min-width:780px;display:flex}.key-row{align-items:flex-end;gap:5px;display:flex}.key{background:var(--key-bg);border:1px solid var(--key-border);cursor:default;-webkit-user-select:none;user-select:none;border-radius:6px;flex-direction:column;justify-content:center;align-items:center;min-width:42px;height:42px;padding:2px 4px;transition:background .15s,border-color .15s,transform .1s,box-shadow .15s;display:flex;position:relative}.key:hover{background:var(--surface2);border-color:var(--accent);box-shadow:0 4px 12px var(--accent-shadow);transform:translateY(-2px)}.key:hover .main-label,.key:hover .sub-label{color:var(--accent)}.main-label{color:var(--key-text);text-align:center;font-size:.68rem;font-weight:500;line-height:1.2}.sub-label{color:var(--text2);text-align:center;font-size:.55rem;line-height:1}.w-130{min-width:63px}.w-150,.w-180{min-width:84px}.w-200{min-width:105px}.w-230{min-width:126px}.w-650{min-width:273px}.tall{justify-content:flex-end;height:89px;padding-bottom:6px}.highlighted{transform:translateY(-1px);box-shadow:0 0 12px #6c63ff80;background:var(--accent)!important;border-color:var(--accent)!important}.highlighted .main-label,.highlighted .sub-label{color:#fff!important}.modifier-highlighted{box-shadow:0 0 8px #6c63ff4d;background:#6c63ff4d!important;border-color:#6c63ff99!important}.modifier-highlighted .main-label,.modifier-highlighted .sub-label{color:var(--accent)!important}.shortcut-dot{background:var(--accent2);border-radius:50%;width:5px;height:5px;position:absolute;top:3px;right:3px}.key-tooltip-inner{background:var(--surface);border:1px solid var(--accent);border-radius:10px;min-width:180px;max-width:280px;padding:10px 13px;box-shadow:0 8px 30px #00000080}.key-tooltip-title{color:var(--text2);text-transform:uppercase;letter-spacing:.8px;border-bottom:1px solid var(--border);margin-bottom:8px;padding-bottom:6px;font-size:.72rem}.key-tooltip-row{align-items:center;gap:8px;padding:4px 0;font-size:.82rem;display:flex}.key-tooltip-row+.key-tooltip-row{border-top:1px solid var(--border)}.key-tooltip-keys{flex-shrink:0;align-items:center;gap:2px;display:flex}.key-tooltip-desc{color:var(--text2);white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.key-sep{color:var(--text2);margin:0 1px;font-size:.65rem}.legend-area{flex-wrap:wrap;gap:8px;display:flex}.legend-empty{color:var(--text2);font-size:.85rem}.legend-item{background:var(--surface);border:1px solid var(--border);cursor:grab;border-radius:8px;align-items:center;gap:8px;padding:8px 12px;font-size:.82rem;transition:border-color .15s;display:flex}.legend-item:active{cursor:grabbing}.legend-item:hover{border-color:var(--accent)}.legend-item.active-shortcut{border-color:var(--accent);background:#6c63ff1a}.legend-keys{align-items:center;gap:3px;display:flex}.key-chip{background:var(--surface2);border:1px solid var(--key-border);color:var(--key-text);border-radius:4px;padding:2px 7px;font-family:monospace;font-size:.75rem;font-weight:600}.legend-desc{color:var(--text2)}.drag-handle{color:var(--text2);cursor:grab;opacity:0;touch-action:none;flex-shrink:0;padding:2px 4px 2px 0;font-size:1rem;line-height:1;transition:opacity .15s}.drag-handle:active{cursor:grabbing}.legend-item:hover .drag-handle{opacity:1}.legend-item.dragging{cursor:grabbing;box-shadow:0 4px 16px #6c63ff4d;border-color:var(--accent)!important;background:#6c63ff26!important}.legend-actions{gap:2px;margin-left:4px;display:flex}.legend-edit{color:var(--text2);cursor:pointer;background:0 0;border:none;border-radius:3px;padding:3px 5px;font-size:.85rem;transition:color .15s,background .15s}.legend-edit:hover{color:var(--accent);background:#6c63ff1a}.legend-del{color:var(--text2);cursor:pointer;background:0 0;border:none;border-radius:3px;padding:3px 5px;font-size:.9rem;transition:color .15s,background .15s}.legend-del:hover{color:var(--accent2);background:#ff65841a}.modal-overlay{background:var(--modal-overlay);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:200;justify-content:center;align-items:center;display:none;position:fixed;inset:0}.modal-overlay.open{display:flex}.modal{background:var(--surface);border:1px solid var(--border);width:440px;max-width:95vw;box-shadow:0 20px 60px var(--shadow);border-radius:14px;padding:28px;animation:.2s slideUp}@keyframes slideUp{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}.modal h2{margin-bottom:20px;font-size:1.1rem}.form-group{margin-bottom:16px}.form-group label{color:var(--text2);margin-bottom:6px;font-size:.8rem;display:block}.form-group input{background:var(--surface2);border:1px solid var(--border);width:100%;color:var(--text);border-radius:8px;outline:none;padding:10px 12px;font-size:.9rem;transition:border-color .15s}.form-group input:focus{border-color:var(--accent)}.emoji-picker{flex-wrap:wrap;gap:8px;margin-top:8px;display:flex}.emoji-opt{border:1px solid var(--border);background:var(--surface2);cursor:pointer;border-radius:8px;justify-content:center;align-items:center;width:36px;height:36px;font-size:1.1rem;transition:all .15s;display:flex}.emoji-opt:hover,.emoji-opt.selected{border-color:var(--accent);background:#6c63ff26}.key-capture-area{background:var(--surface2);border:1px solid var(--border);text-align:center;cursor:pointer;border-radius:8px;margin-bottom:8px;padding:14px;transition:border-color .15s}.key-capture-area:focus{outline:none}.key-capture-area.capturing{border-color:var(--accent);background:#6c63ff1a}.captured-keys{flex-wrap:wrap;justify-content:center;align-items:center;gap:4px;min-height:28px;display:flex}.hint{color:var(--text2);font-size:.75rem}.modal-actions{justify-content:flex-end;gap:10px;margin-top:20px;display:flex}.btn-cancel{border:1px solid var(--border);color:var(--text2);cursor:pointer;background:0 0;border-radius:8px;padding:9px 18px;font-size:.85rem;transition:border-color .15s}.btn-cancel:hover{border-color:var(--text2)}.btn-primary{background:var(--accent);color:#fff;cursor:pointer;border:none;border-radius:8px;padding:9px 18px;font-size:.85rem;font-weight:600;transition:opacity .15s}.btn-primary:hover{opacity:.85}.upgrade-modal{text-align:center}.plan-grid{grid-template-columns:1fr 1fr;gap:12px;margin:20px 0;display:grid}.plan-card{border:1px solid var(--border);background:var(--surface2);border-radius:10px;padding:16px}.plan-card.featured{border-color:var(--accent);background:#6c63ff1a}.plan-name{margin-bottom:4px;font-weight:700}.plan-price{color:var(--accent);font-size:1.4rem;font-weight:800}.plan-price span{color:var(--text2);font-size:.8rem;font-weight:400}.plan-feature{color:var(--text2);margin-top:8px;font-size:.78rem;line-height:1.5}.toast{background:var(--surface);border:1px solid var(--border);z-index:300;opacity:0;border-radius:10px;max-width:300px;padding:12px 18px;font-size:.85rem;transition:all .3s;position:fixed;bottom:24px;right:24px;transform:translateY(100px)}.toast.show{opacity:1;transform:none}.toast.success{color:#4ade80;border-color:#4ade80}.toast.error{border-color:var(--accent2);color:var(--accent2)}.export-wrap{position:relative}.export-btn{background:var(--surface2);border:1px solid var(--border);color:var(--text);cursor:pointer;white-space:nowrap;border-radius:8px;padding:8px 14px;font-size:.85rem;font-weight:500;transition:all .15s}.export-btn:hover{border-color:var(--accent);color:var(--accent)}.export-btn:disabled{opacity:.6;cursor:not-allowed}.export-menu{background:var(--surface);border:1px solid var(--border);z-index:150;border-radius:10px;min-width:200px;padding:6px;animation:.15s slideUp;position:absolute;top:calc(100% + 6px);right:0;box-shadow:0 8px 30px #0006}.export-menu-item{cursor:pointer;text-align:left;background:0 0;border:none;border-radius:7px;align-items:center;gap:10px;width:100%;padding:10px 12px;transition:background .1s;display:flex}.export-menu-item:hover{background:var(--surface2)}.export-icon{flex-shrink:0;font-size:1.3rem}.export-menu-label{color:var(--text);font-size:.88rem;font-weight:500}.export-menu-desc{color:var(--text2);margin-top:1px;font-size:.75rem}.color-picker-wrap{position:relative}.color-picker-btn{background:var(--surface2);border:1px solid var(--border);cursor:pointer;border-radius:8px;justify-content:center;align-items:center;gap:3px;width:34px;height:34px;padding:0;transition:all .15s;display:flex}.color-picker-btn:hover{border-color:var(--accent)}.color-swatch{border:2px solid #ffffff4d;border-radius:50%;flex-shrink:0;width:16px;height:16px}.color-lock{font-size:.7rem;line-height:1}.color-picker-menu{background:var(--surface);border:1px solid var(--border);z-index:150;width:200px;box-shadow:0 8px 30px var(--shadow);border-radius:12px;padding:14px;animation:.15s slideUp;position:absolute;top:calc(100% + 8px);right:0}.color-picker-title{color:var(--text2);text-transform:uppercase;letter-spacing:.8px;margin-bottom:10px;font-size:.72rem}.color-presets{grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:12px;display:grid}.color-preset{aspect-ratio:1;cursor:pointer;border:2px solid #0000;border-radius:6px;width:100%;transition:transform .1s,border-color .1s}.color-preset:hover{transform:scale(1.1)}.color-preset.selected{border-color:var(--text);transform:scale(1.1)}.color-picker-custom{border-top:1px solid var(--border);color:var(--text2);justify-content:space-between;align-items:center;padding-top:10px;font-size:.8rem;display:flex}.color-picker-custom input[type=color]{border:1px solid var(--border);background:var(--surface2);cursor:pointer;border-radius:6px;width:32px;height:28px;padding:2px}.color-reset{border:1px solid var(--border);width:100%;color:var(--text2);cursor:pointer;background:0 0;border-radius:6px;margin-top:8px;padding:6px;font-size:.78rem;transition:all .15s}.color-reset:hover{border-color:var(--accent2);color:var(--accent2)}.overview-view{flex-direction:column;flex:1;display:flex;overflow:hidden}.overview-topbar{border-bottom:1px solid var(--border);flex-shrink:0;justify-content:space-between;align-items:center;padding:14px 28px;display:flex}.overview-topbar-text{color:var(--text2);font-size:.85rem}.overview-cards{flex-direction:row;flex:1;align-items:flex-start;gap:20px;padding:24px 28px;display:flex;overflow:auto}.overview-card{background:var(--surface);border:1.5px solid var(--border);cursor:pointer;border-radius:14px;flex-direction:column;flex-shrink:0;gap:0;min-width:270px;max-width:310px;padding:20px;transition:border-color .15s,box-shadow .15s;display:flex}.overview-card:hover{border-color:var(--accent);box-shadow:0 4px 20px var(--accent-shadow)}.overview-card-header{border-bottom:1px solid var(--border);justify-content:space-between;align-items:center;margin-bottom:14px;padding-bottom:12px;display:flex}.overview-card-title{align-items:center;gap:8px;display:flex}.overview-card-icon{font-size:1.15rem}.overview-card-name{color:var(--text);font-size:.95rem;font-weight:600}.overview-card-badge{background:var(--accent-bg);color:var(--accent);border:1px solid var(--accent);border-radius:20px;padding:3px 9px;font-size:.7rem;font-weight:700}.overview-card-shortcuts{flex-direction:column;flex:1;gap:7px;display:flex}.overview-shortcut-row{align-items:center;gap:5px;font-size:.8rem;display:flex}.overview-shortcut-keys{flex-shrink:0;align-items:center;gap:2px;display:flex}.ov-key-group{align-items:center;gap:2px;display:flex}.ov-key-chip{background:var(--key-bg);border:1px solid var(--key-border);color:var(--key-text);white-space:nowrap;border-radius:4px;padding:2px 6px;font-family:monospace;font-size:.7rem;font-weight:600}.ov-key-sep{color:var(--text2);padding:0 1px;font-size:.68rem}.ov-shortcut-dash{color:var(--text2);flex-shrink:0;font-size:.78rem}.ov-shortcut-desc{color:var(--text2);text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.overview-no-shortcuts{color:var(--text2);font-size:.8rem;font-style:italic}.overview-card-footer{border-top:1px solid var(--border);margin-top:14px;padding-top:12px}.overview-add-btn{border:1px dashed var(--border);width:100%;color:var(--text2);cursor:pointer;background:0 0;border-radius:7px;padding:7px;font-size:.78rem;transition:all .15s}.overview-add-btn:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-bg)}.overview-empty{color:var(--text2);text-align:center;flex-direction:column;justify-content:center;align-items:center;gap:12px;width:100%;padding:60px;display:flex}.overview-empty-icon{opacity:.4;font-size:3rem}.footer{background:var(--surface);border-top:1px solid var(--border);flex-shrink:0;justify-content:space-between;align-items:center;padding:11px 32px;display:flex}.footer-tagline{color:var(--text2);font-size:.82rem}.footer-tagline em{color:var(--accent);font-style:normal;font-weight:600}.footer-url{color:var(--text2);font-size:.78rem}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:0 0}::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px}