:root {
    --bg-color: #0f0f13;
    --glass-bg: rgba(255, 255, 255, 0.05);
    --glass-border: rgba(255, 255, 255, 0.1);
    --accent-color: #00f2ff;
    --text-color: #ffffff;
    --logo-size: 160px;
    --icon-size: 60px;
    --radius: 280px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
    background-color: var(--bg-color);
    height: 100vh; width: 100vw;
    overflow: hidden;
    font-family: 'Segoe UI', sans-serif;
    color: var(--text-color);
}

.ambient-light {
    position: absolute; width: 60vw; height: 60vw;
    background: radial-gradient(circle, rgba(0, 242, 255, 0.15) 0%, rgba(123, 31, 162, 0.1) 40%, transparent 70%);
    top: 50%; left: 50%; transform: translate(-50%, -50%);
    z-index: -1; filter: blur(60px);
}

/* 舞台：所有元素的参考系 */
.stage {
    position: relative;
    width: 100vw; height: 100vh;
    display: flex; justify-content: center; align-items: center;
}

.center-logo {
    position: absolute;
    width: var(--logo-size); height: var(--logo-size);
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(20px);
    border: 1px solid var(--glass-border);
    z-index: 10; overflow: hidden;
    /* 确保绝对居中 */
    top: 50%; left: 50%; transform: translate(-50%, -50%);
}
.center-logo img { width: 100%; height: 100%; object-fit: cover; }

/* 轨道容器：放置在中心点 */
.orbit-container {
    position: absolute;
    top: 50%; left: 50%;
    width: 0; height: 0; /* 仅作为坐标原点 */
    z-index: 5;
}

.launcher-item {
    position: absolute;
    width: var(--icon-size); height: var(--icon-size);
    border-radius: 50%; background: var(--glass-bg);
    backdrop-filter: blur(10px); border: 1px solid var(--glass-border);
    display: flex; justify-content: center; align-items: center;
    font-size: 24px; color: rgba(255, 255, 255, 0.7);
    cursor: pointer; text-decoration: none;
    /* 关键：将图标中心拉回到计算出的坐标点上 */
    margin-left: calc(var(--icon-size) / -2);
    margin-top: calc(var(--icon-size) / -2);
    transition: transform 0.4s, opacity 0.4s, border-color 0.4s;
}

.launcher-item.selected {
    border-color: var(--accent-color);
    color: #fff;
    box-shadow: 0 0 30px var(--accent-color);
}

/* 选中框：相对于中心偏移 */
.selection-box {
    position: absolute;
    top: 50%; left: 50%;
    /* 偏移量 = 半径 */
    transform: translate(calc(var(--radius) - 50%), -50%);
    width: calc(var(--icon-size) + 30px);
    height: calc(var(--icon-size) + 30px);
    border-radius: 20px;
    border: 1px solid var(--accent-color);
    background: rgba(255, 255, 255, 0.03);
    pointer-events: none;
    z-index: 2;
    opacity: 0; transition: 0.3s;
}
.selection-box.active { opacity: 1; }

.selection-label {
    position: absolute; top: -45px; width: 300px; left: 50%;
    transform: translateX(-50%); text-align: center;
    font-size: 1.2rem; color: var(--accent-color);
}

/* 弹窗样式略（保持前一版即可） */
.settings-btn { position: fixed; bottom: 30px; right: 30px; cursor: pointer; color: #666; font-size: 24px; }
.modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.8); display: none; justify-content: center; align-items: center; z-index: 100; }
.modal { background: #1a1a1f; padding: 30px; border-radius: 20px; width: 400px; }
.item-list { margin-bottom: 20px; max-height: 200px; overflow-y: auto; }
.list-item { display: flex; justify-content: space-between; padding: 10px; background: #222; margin-bottom: 5px; border-radius: 5px; }
.add-form { display: flex; flex-direction: column; gap: 10px; }
input { padding: 10px; background: #000; border: 1px solid #333; color: #fff; }
.add-btn { background: var(--accent-color); padding: 10px; border: none; cursor: pointer; font-weight: bold; }