/* =========================================================
   全局
   ========================================================= */

* {
    box-sizing: border-box;
}

html,
body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}
body {
background: #111111;
color: #eeeeee;

font-family:
    Arial,
    "Microsoft YaHei",
    sans-serif;

overflow: hidden;
}
button {
font-family: inherit;
border: none;
cursor: pointer;
}
.hidden {
display: none !important;
}
/* ========================================================= 页面 ========================================================= */
.page {
width: 100%;
height: 100vh;
}
/* ========================================================= 页面 1：连接 / 根目录 ========================================================= */
.link-page {
display: flex;
align-items: center;
justify-content: center;

background: #111111;
}
.link-container {
position: relative;

width: 420px;
height: 100%;

text-align: center;
}
/* ========================================================= 根目录列表 ========================================================= */
.game-list {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    transform: translateY(-50%);
    text-align: left;
}
.game-item {
display: flex;
align-items: center;

width: 100%;
min-height: 50px;

padding: 0 16px;

border: 1px solid #292929;
border-radius: 6px;

background: #191919;
color: #dddddd;

font-size: 15px;
font-weight: 600;

cursor: pointer;
user-select: none;

transition:
    background 0.1s,
    border-color 0.1s,
    color 0.1s,
    transform 0.1s;
}
.game-item + .game-item {
margin-top: 8px;
}
.game-item:hover {
background: #222222;
border-color: #3a3a3a;
color: #ffffff;
}
.game-item:active {
transform: scale(0.99);
}
.game-icon {
width: 24px;

flex-shrink: 0;

margin-right: 10px;

color: #777777;

font-size: 13px;
}
.game-name {
overflow: hidden;

text-overflow: ellipsis;

white-space: nowrap;
}
/* ========================================================= 未连接遮罩 ========================================================= */
.connect-mask {
position: absolute;

top: 0;
left: 0;

width: 100%;
height: 100%;

display: flex;

align-items: center;
justify-content: center;

background: rgba(17, 17, 17, 0.55);

backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);

z-index: 10;

transition:
    opacity 0.2s ease;
}
.connect-mask.hidden {
display: flex !important;

opacity: 0;

pointer-events: none;
}
.connect-button {
width: 220px;
height: 48px;

background: #eeeeee;
color: #111111;

border-radius: 6px;

font-size: 15px;
font-weight: 600;

transition:
    background 0.15s,
    transform 0.1s;
}
.connect-button:hover {
background: #ffffff;
}
.connect-button:active {
transform: scale(0.98);
}
/* ========================================================= 页面 2：宏控制 ========================================================= */
.macro-page {
display: flex;

flex-direction: column;

background: #111111;
}
/* ========================================================= 顶部状态栏 ========================================================= */
.top-bar {
flex: 0 0 56px;

height: 56px;

display: grid;

grid-template-columns:
    1fr
    auto
    1fr;

align-items: center;

padding: 0 22px;

border-bottom: 1px solid #292929;

background: #151515;
}
.back-button {
justify-self: start;

padding: 7px 14px;

background: #222222;

color: #eeeeee;

border: 1px solid #333333;

border-radius: 4px;

font-size: 13px;

transition:
    background 0.15s,
    border-color 0.15s;
}
.back-button:hover {
background: #2a2a2a;

border-color: #555555;
}
.back-button:active {
background: #181818;
}
.app-title {
justify-self: center;

font-size: 14px;

font-weight: 600;

letter-spacing: 1.5px;

color: #dddddd;
}
.connection-status {
justify-self: end;

display: flex;

align-items: center;

gap: 8px;

font-size: 13px;

color: #999999;
}
.status-dot {
width: 8px;
height: 8px;

border-radius: 50%;

background: #777777;
}
/* ========================================================= 宏文件树 ========================================================= */
.macro-tree {
flex: 1;

min-height: 0;

overflow-y: auto;
}
.tree-folder {
width: 100%;
}
.tree-folder-name {
cursor: pointer;

user-select: none;
}
.tree-folder-children {
display: block;
}
.tree-folder-children.collapsed {
display: none;
}
.tree-macro {
cursor: pointer;

user-select: none;
}
/* ========================================================= 文件树节点 ========================================================= */
.tree-game, .tree-group, .tree-macro {
user-select: none;
}
.tree-game-name, .tree-group-name, .tree-macro-name {
display: flex;

align-items: center;

min-height: 38px;

padding: 0 12px;

border-radius: 5px;
}
.tree-game-name {
font-size: 15px;

font-weight: 600;

color: #eeeeee;
}
.tree-group-name {
margin-left: 22px;

font-size: 14px;

color: #cccccc;
}
.tree-macro-name {
margin-left: 48px;

font-size: 14px;

color: #999999;

cursor: pointer;

transition:
    background 0.1s,
    color 0.1s;
}
.tree-macro-name:hover {
background: #222222;

color: #eeeeee;
}
/* 当前选中的宏 */
.tree-macro-name.selected {
background: #292929;

color: #ffffff;
}
/* ========================================================= 文件夹 / 宏图标 ========================================================= */
.tree-icon {
width: 22px;

flex-shrink: 0;

color: #777777;

font-size: 13px;
}
.tree-game-name .tree-icon, .tree-group-name .tree-icon {
color: #999999;
}
.tree-macro-name .tree-icon {
color: #666666;
}
/* ========================================================= 空状态 ========================================================= */
.tree-empty {
padding: 40px 20px;

text-align: center;

color: #666666;

font-size: 14px;
}
/* ========================================================= SWITCH ========================================================= */
.switch-button {
flex: 0 0 64px;

width: 100%;

height: 64px;

background: #1b1b1b;

border-top: 1px solid #333333;

color: #dddddd;

font-size: 15px;

font-weight: 600;

letter-spacing: 3px;

transition:
    background 0.1s,
    color 0.1s;
}
.switch-button:hover {
background: #242424;

color: #ffffff;
}
.switch-button:active {
background: #303030;
}
/* ========================================================= 文件树折叠 ========================================================= */
.tree-folder-children.collapsed {
display: none;
}
/* ========================================================= 小屏幕 ========================================================= */
@media (max-width: 600px) {
.link-container {

    width: calc(100% - 40px);

}


.top-bar {

    padding: 0 15px;

}


.app-title {

    font-size: 12px;

}
}