#inventorySidebar{position:fixed;left:10px;top:50%;transform:translateY(-50%);width:76px;height:auto;max-height:calc(100vh - 100px);padding:7px;border:1px solid #58dbc34a;border-radius:18px;background:linear-gradient(160deg,#102a2bf5,#111629f5);box-shadow:0 10px 32px #0007,inset 0 1px #a4ffee15;backdrop-filter:blur(12px)}
#inventorySidebar.collapsed{transform:translate(-88px,-50%)}
#inventorySidebar .sidebar-scrollable-content{padding:0;max-height:calc(100vh - 116px);overflow-y:auto}
#inventorySidebar .back-button{width:100%;min-height:49px;margin:0;border:1px solid #7ca9c425!important;border-radius:11px;background:linear-gradient(135deg,#25464866,#24284477)!important;color:#e2fffa!important;font-size:20px!important;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:2px;box-shadow:none;transition:background .15s,border-color .15s}
#inventorySidebar .back-button::after{content:attr(data-label);font:9px 'Segoe UI';letter-spacing:.4px;color:#a2c3cb}
#inventorySidebar .back-button:hover{background:#246b6755!important;border-color:#5df6d5aa!important}
#sidebarToggleBtn{left:calc(100% + 2px);padding:10px 5px;font-size:12px;border:1px solid #66dbc94a;border-radius:0 9px 9px 0;background:#122c32eb;color:#93f6da}
#actionDock{position:fixed;bottom:14px;left:50%;transform:translateX(-50%);width:min(680px,calc(100vw - 120px));padding:8px 10px 10px;z-index:600;border:1px solid #62dac855;border-radius:16px;background:linear-gradient(115deg,#102429f5,#191d35f5);box-shadow:0 12px 38px #0009,inset 0 1px #c3fff321;backdrop-filter:blur(12px);color:#dcfff7}
.action-dock-header{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:7px;min-height:25px}
.action-dock-header>span{display:flex;align-items:baseline;gap:12px}
.action-dock-header b{font:700 10px 'Segoe UI';letter-spacing:1.5px;color:#91f4d8}
.action-dock-header small{font:10px 'Segoe UI';color:#789aa9}
#toggleActionDock{font:11px 'Segoe UI';padding:4px 9px;color:#b2e8ef;background:#223648;border:1px solid #668fab66;border-radius:7px;cursor:pointer}
#actionDock #skillShortcuts{display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:6px}
#actionDock .skill-col{display:contents}
#actionDock .inventory-slot{width:100%;height:54px;padding:5px;border:1px solid #638fa744;border-radius:10px;background:linear-gradient(145deg,#273d4b99,#111b29);box-shadow:inset 0 1px #c9fff414;overflow:hidden;transition:border-color .15s,box-shadow .15s}
#actionDock .inventory-slot:hover,#actionDock .inventory-slot:focus-visible{outline:none;border-color:#66f5c9;box-shadow:0 0 12px #4bebc333}
#actionDock .inventory-slot.active{border-color:#e2b96b99;box-shadow:inset 0 0 10px #d5ac4822}
#actionDock .inventory-slot>span:last-child{left:4px;top:3px;width:auto;min-width:16px;height:15px;padding:0 3px;font-size:9px;color:#c9eee6;background:#080e1bbd;border:1px solid #60857a55}
#actionDock .inventory-slot>.cooldown-overlay{top:auto;left:2px;right:2px;bottom:3px;width:auto;height:auto;min-height:12px;background:#111925d9;border:0;color:#e6f7ff;font:9px/1.2 'Segoe UI';overflow-wrap:anywhere;padding:2px;text-shadow:none}
#actionDock .inventory-slot[data-kind="item"]::before{display:none}
#actionDock .inventory-slot img{position:absolute;inset:5px;width:calc(100% - 10px)!important;height:calc(100% - 10px)!important;object-fit:contain}
#actionDock .shortcut-icon{position:absolute;inset:5px;width:calc(100% - 10px)!important;height:calc(100% - 10px)!important;background-size:contain;background-position:center;background-repeat:no-repeat}
#actionDock .shortcut-icon{display:grid;place-items:center;color:#fff;text-shadow:0 2px 5px #000;filter:drop-shadow(0 3px 5px #0008)}
#actionDock.collapsed{width:auto;min-width:225px;padding-bottom:6px}
#actionDock.collapsed #skillShortcuts{display:none}
#actionDock.collapsed .action-dock-header{margin:0}
#actionDock.collapsed small{display:none}
.hotbar-dragging #actionDock{z-index:20001;border-color:#65ffd0;width:min(680px,calc(100vw - 120px))}
.hotbar-dragging #actionDock.collapsed #skillShortcuts{display:grid}
.hotbar-dragging #actionDock .inventory-slot{border-style:dashed}
.hotbar-dragging #actionDock .inventory-slot.hotbar-drop-target{background:#235d50;border-color:#9bffdc;box-shadow:0 0 16px #62ffc688}
@media(max-width:650px){#actionDock{width:calc(100vw - 20px);bottom:8px;padding:6px}#actionDock .inventory-slot{height:44px}#actionDock #skillShortcuts{gap:3px}.action-dock-header small{display:none}#inventorySidebar{width:61px;left:5px;padding:5px}#inventorySidebar .back-button{min-height:42px}.hotbar-dragging #actionDock{width:calc(100vw - 20px)}}