/* 全局变量与基础 */
:root {
    --bg-deep: #0c1414;
    --panel-bg: #1a2424;
    --accent-cyan: #3dd6c8;
    --accent-gold: #e6b84c;
    --accent-green: #4caf7c;
    --accent-blue: #4da6d9;
    --accent-red: #d94a4a;
    --text-light: #d4e8e8;
    --text-muted: #7fa8a8;
    --border-subtle: #2a4040;
    --border-glow: #4a9080;
    --shadow-inner: rgba(0, 0, 0, 0.5);
    --shadow-glow: rgba(61, 214, 200, 0.15);
    --radius-sm: 6px;
    --radius-md: 12px;
    --radius-lg: 18px;
    --radius-xl: 26px;
    --font-mono: 'SF Mono', 'Cascadia Code', 'Consolas', 'Courier New', monospace;
    --transition-fast: 0.08s ease;
    --transition-smooth: 0.18s ease;
    --left-panel-width: 440px;
}

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

body {
    background: #0c1414;
    background-image: radial-gradient(ellipse at 50% 30%, #1a2a2a 0%, #0a1212 70%);
    min-height: 100vh;
    display: flex; justify-content: center; align-items: center;
    padding: 10px; font-family: var(--font-mono);
    user-select: none; -webkit-user-select: none;
}

.main-container {
    display: flex; gap: 14px;
    width: 100%; max-width: 1420px;
    height: 96vh; max-height: 820px; min-height: 620px;
    align-items: stretch; justify-content: center;
}

/* ===== 左侧面板 ===== */
.left-panel {
    width: var(--left-panel-width); flex-shrink: 0;
    background: linear-gradient(160deg, #1e2828 0%, #172222 40%, #1a2626 100%);
    border-radius: var(--radius-xl); border: 1.5px solid #3a5858;
    box-shadow: 0 0 0 1px #1a3030, 0 8px 28px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.03);
    padding: 10px 12px; display: flex; flex-direction: column; overflow: hidden;
}
.left-inner {
    background: #111a1a; border-radius: var(--radius-lg); padding: 8px 10px;
    border: 1px solid #2a3c3c; box-shadow: inset 0 0 30px rgba(0,0,0,0.4);
    display: flex; flex-direction: column; gap: 6px; flex: 1;
    overflow: hidden; height: 100%; justify-content: space-between;
}

.title-section {
    display: flex; justify-content: space-between; align-items: center;
    padding-bottom: 4px; border-bottom: 2px dashed #2a5858; flex-shrink: 0;
}
.model {
    font-size: 16px; font-weight: 800; letter-spacing: 3px; color: #c8f0f0;
    text-shadow: 0 0 10px #3dd6c8, 0 2px 2px #000; background: #0f2222;
    padding: 2px 12px; border-radius: 20px 4px 8px 20px; border: 1px solid #4ab8b8;
}
.subtitle {
    color: #a0c8c8; font-size: 10px; font-weight: 700; background: #1c2626;
    padding: 2px 10px; border-radius: 30px; border: 1px solid #3a8080; letter-spacing: 2px;
}
.user-info {
    color: #80b0b0; font-size: 10px; background: #142828; padding: 2px 10px;
    border-radius: 14px; border: 1px solid #3a6060; cursor: pointer;
}

/* 控件行 */
.control-row { display: flex; gap: 10px; flex-wrap: wrap; flex-shrink: 0; }
.control-row.single { justify-content: flex-start; }
.speed-group, .rot-group, .freq-group, .timer-control {
    display: flex; align-items: center; gap: 6px;
    background: #162222; border-radius: var(--radius-md); padding: 5px 10px;
    border: 1.5px solid #3a5858; box-shadow: inset 0 0 0 1px #0d1818;
    flex: 1; min-width: 0;
}
.timer-control { gap: 8px; }

.param-val {
    font-size: 20px; font-weight: 900; color: #ffd54f; background: #1a2828;
    padding: 1px 6px; border-radius: 6px; border: 1.5px solid #c8a840;
    text-shadow: 0 0 12px #ffc107; min-width: 40px; text-align: center;
    letter-spacing: 1px; line-height: 1.1;
}
.param-val.speed { color: #c8f8f8; border-color: #50b0b0; text-shadow: 0 0 8px #3dd6c8; }
.param-label {
    color: #8ab8b8; font-size: 9px; font-weight: 700; letter-spacing: 1px; white-space: nowrap;
}
.arrow-group { display: flex; flex-direction: column; gap: 2px; }
.arrow-group.hori { flex-direction: row; gap: 4px; }
.arrow-btn {
    font-size: 13px; padding: 1px 10px; background: #1e3434; color: #c8f0f0;
    border: 1.5px solid #6aa8a8; border-radius: 12px; cursor: pointer;
    box-shadow: inset 0 -3px 0 #0f2222; transition: var(--transition-fast);
    line-height: 1; font-weight: 700;
}
.arrow-btn.sm { font-size: 10px; padding: 1px 8px; }
.arrow-btn:hover { background: #2e5858; border-color: #c8e8a0; transform: scale(0.96); }
.arrow-btn:active { transform: scale(0.9); }

.dir-btn {
    font-size: 10px; font-weight: 700; padding: 3px 10px; border-radius: 14px;
    border: 2px solid #5a9090; background: #1c3030; color: #b8d8d8;
    cursor: pointer; box-shadow: inset 0 -2px 0 #0f1e1e;
    transition: var(--transition-fast); letter-spacing: 1px; white-space: nowrap;
}
.dir-btn.active {
    background: #1a5a3e !important; border-color: #7cc868 !important;
    box-shadow: inset 0 -1px 0 #0d3320, inset 0 0 12px #90d890, 0 0 10px #4caf50 !important;
    color: #fff !important; text-shadow: 0 0 6px #c8ffb0 !important; transform: scale(1.03);
}
.dir-stack { display: flex; flex-direction: column; gap: 3px; }

/* 计时显示小容器 */
.timer-display {
    display: flex; flex-direction: column; align-items: center; gap: 1px;
}

/* 网格 */
.grid-4 {
    display: grid;
    grid-template-columns: 1.5fr 0.7fr 0.7fr 0.8fr;
    gap: 6px; flex-shrink: 0;
}
.grid-cell {
    background: #162222; border-radius: var(--radius-md); padding: 6px;
    border: 1.5px solid #3a5858; display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: 4px;
    box-shadow: inset 0 0 0 1px #0d1818;
}
.grid-cell.center { justify-content: center; align-items: center; }

.fault-led {
    width: 22px; height: 22px; background: #4a0000; border-radius: 50%;
    border: 2px solid #a05050; box-shadow: inset 0 -2px 0 #200000;
}
.fault-led.blinking { animation: faultBlink 0.5s infinite; }
@keyframes faultBlink {
    0%,100%{ background:#4a0000; box-shadow:inset 0 -2px 0 #200000,0 0 6px #ff4444; }
    50%{ background:#e83030; box-shadow:inset 0 -2px 0 #600000,0 0 18px #ff6666; }
}

.switch-btn {
    font-size: 13px; font-weight: 900; color: #d0f0f0; background: #1a4040;
    padding: 4px 16px; border-radius: 20px; border: 2px solid #80c0c0;
    cursor: pointer; box-shadow: inset 0 -3px 0 #0d2828; letter-spacing: 2px;
}
.switch-btn:hover { background: #2a6868; border-color: #d8f0a0; }

/* 功能按钮 */
.action-row {
    display: flex; gap: 6px; flex-wrap: wrap; justify-content: center;
    flex-shrink: 0; background: #152222; padding: 6px 10px; border-radius: 20px;
    border: 1px solid #305050;
}
.func-btn {
    font-size: 10px; font-weight: 700; padding: 4px 10px; border-radius: 14px;
    border: 2px solid #5a9090; background: #1c3232; color: #d8f0d8;
    cursor: pointer; box-shadow: inset 0 -2px 0 #132424; letter-spacing: 1px;
    transition: var(--transition-fast);
}
.func-btn.special { border-color: #c8a858; color: #ffe8b0; background: #2a3535; }
.func-btn.random { font-size: 16px; padding: 2px 8px; }
.func-btn:hover { background: #2e5050; border-color: #c8e8a0; transform: scale(0.95); }
.func-btn:active { transform: scale(0.9); }

/* 横摆区域 */
.swing-section { display: flex; flex-direction: column; align-items: center; flex-shrink: 0; }
.swing-container {
    display: flex; flex-direction: column; align-items: center; gap: 2px;
    background: #132828; border-radius: 20px; padding: 4px 16px; border: 1px solid #3a6060;
}
.swing-title { font-size: 14px; font-weight: 800; color: #d8f0b0; letter-spacing: 2px; margin-bottom: 2px; }
.swing-nums { display: flex; gap: 4px; flex-wrap: wrap; justify-content: center; align-items: center; }
.swing-badge {
    font-size: 13px; font-weight: 900; color: #ffe8b0; background: #152a2a;
    width: 26px; height: 26px; border-radius: 50%; border: 2px solid #c8a040;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; box-shadow: inset 0 -3px 0 #1a3520; transition: var(--transition-fast);
}
.swing-badge.double { width: 30px; font-size: 11px; border-radius: 15px; }
.swing-badge.active { background:#2a5a3e!important; border-color:#80d860!important; box-shadow:inset 0 -2px 0 #1a3a20,0 0 12px #5cb85c; color:#fff; }
.swing-badge:hover { background:#2a4848; border-color:#e8d080; transform:scale(1.06); }
.swing-badge:active { transform:scale(0.9); }

/* 自定球路 */
.custom-row { display: flex; justify-content: center; flex-shrink: 0; }
.custom-badges { display: flex; gap: 8px; background: #132828; padding: 6px 14px; border-radius: 30px; border: 1px solid #3a6060; flex-wrap: wrap; }
.custom-badge {
    font-size: 11px; font-weight: 900; color: #ffe8b0; background: #1a3030;
    padding: 4px 12px; border-radius: 18px; border: 2.5px solid #c8a040;
    cursor: pointer; box-shadow: inset 0 -2px 0 #1a2820; transition: var(--transition-fast); letter-spacing: 1px;
}
.custom-badge.active-ball { background:#2a5a3e!important; border-color:#80d860!important; box-shadow:inset 0 -2px 0 #1a3a20,0 0 12px #5cb85c; color:#fff; }
.custom-badge:hover { background:#2a4848; border-color:#e8d080; transform:scale(0.96); }

/* 球路 */
.ball-frame {
    background: #111c1c; border-radius: var(--radius-lg); border: 3px solid #305050;
    padding: 10px 8px; box-shadow: inset 0 0 20px rgba(0,0,0,0.5); flex-shrink: 0;
}
.ball-grid { display: grid; grid-template-columns: repeat(6,1fr); gap: 6px; }
.ball-btn {
    font-size: 10px; font-weight: 700; background: #1e3232; color: #d8f0d8;
    padding: 5px 2px; border-radius: 8px; border: 2px solid #5a9090;
    cursor: pointer; text-align: center; box-shadow: inset 0 -2px 0 #142828;
    transition: var(--transition-fast); letter-spacing: 1px; min-height: 30px;
    display: flex; align-items: center; justify-content: center; line-height: 1.2;
}
.ball-btn.first-col { background: #253a30; border-color: #c8a040; color: #fff8e0; }
.ball-btn.square { border-radius: 8px; font-size: 13px; font-weight: 900; letter-spacing: 2px; background: #1e4030; border-color: #80c870; color: #f8ffe0; }
.ball-btn.square.stop { background: #3a2525; border-color: #d89080; color: #ffe8e0; }
.ball-btn.active-ball { background: #2a5a3e!important; border-color: #90d870!important; box-shadow: inset 0 -2px 0 #1a3a20,0 0 14px #5cb85c; color:#fff; }
.ball-btn:hover { background: #2a4a4a; border-color: #c8e8a0; transform: scale(0.96); }
.ball-btn:active { transform: scale(0.9); }

.footnote {
    text-align: center; color: #5a8080; font-size: 9px; letter-spacing: 2px;
    flex-shrink: 0; padding-top: 4px; border-top: 1px solid #2a5050;
}

/* 右侧面板 */
.right-panel {
    flex: 1; min-width: 290px; max-width: 420px; background: #0f1a1a;
    border-radius: var(--radius-xl); border: 2px solid #305858;
    box-shadow: 0 8px 28px rgba(0,0,0,0.55), inset 0 0 30px #041111;
    padding: 8px 10px; display: flex; flex-direction: column; overflow: hidden;
}
.right-title { color: #a0e8e8; font-size: 20px; font-weight: 800; letter-spacing: 4px; text-shadow: 0 0 10px #3dd6c8; background: #1a3838; padding: 6px 12px; border-radius: 30px; border: 2px solid #60b0b0; text-align: center; margin-bottom: 6px; flex-shrink: 0; }
.key-log-wrap { background: #0a1818; border-radius: var(--radius-lg); padding: 8px; border: 2px solid #306060; box-shadow: inset 0 0 20px #000; flex: 1; display: flex; flex-direction: column; overflow: hidden; }
.key-log-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; color: #80d0d0; font-size: 13px; font-weight: 700; border-bottom: 2px solid #2a6060; padding-bottom: 5px; flex-shrink: 0; gap: 4px; flex-wrap: wrap; }
.header-btns { display: flex; gap: 4px; flex-wrap: wrap; }
.sm-btn { font-size: 11px; font-weight: 800; padding: 3px 10px; border-radius: 14px; border: 2px solid #80a060; background: #1e3838; color: #ffe8b0; cursor: pointer; box-shadow: inset 0 -2px 0 #1a2a1a; transition: var(--transition-fast); letter-spacing: 1px; white-space: nowrap; }
.sm-btn.play-btn { background: #1e4a2e; border-color: #80c870; }
.sm-btn.jam-btn { background: #5a2a1a; border-color: #c88050; color: #ffe0c8; }
.sm-btn.save-db { background: #1a2a40; border-color: #6080c0; color: #c8d8ff; }
.sm-btn.load-db { background: #1a3040; border-color: #60a0c0; color: #c8e8ff; }
.sm-btn:hover { background: #2e5858; border-color: #d8e8a0; transform: scale(0.94); }
.sm-btn:active { transform: scale(0.88); }

.key-log-list { list-style: none; padding: 0; margin: 0; flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 4px; scrollbar-width: thin; scrollbar-color: #2a5050 #0a1818; }
.key-log-list::-webkit-scrollbar { width: 3px; }
.key-log-list::-webkit-scrollbar-track { background: #0a1818; border-radius: 6px; }
.key-log-list::-webkit-scrollbar-thumb { background: #2a5050; border-radius: 6px; }
.key-log-item { background: #102828; color: #e8f8d0; font-size: 11px; font-weight: 600; padding: 6px 8px; border-radius: 8px; border: 1.5px solid #3a7070; box-shadow: inset 0 -2px 0 #0a2020; display: flex; align-items: center; gap: 6px; transition: var(--transition-smooth); cursor: pointer; flex-shrink: 0; }
.key-log-item:hover { background: #1a3a3a; border-color: #80b8b8; transform: translateX(2px); }
.key-log-item.active-record { background: #1a4030!important; border-color: #70c870!important; box-shadow: 0 0 12px #4caf50; color: #fff; }
.log-number { background: #0a2020; color: #ffc107; font-size: 14px; font-weight: 900; padding: 2px 8px; border-radius: 12px; border: 1.5px solid #c8a040; }
.log-text { flex: 1; letter-spacing: 1px; }
.log-type { color: #ffd700; font-size: 10px; font-weight: 700; background: #142828; padding: 2px 6px; border-radius: 10px; border: 1px solid #e0a030; }
.log-time { color: #70b0b0; font-size: 10px; background: #081818; padding: 2px 6px; border-radius: 10px; border: 1px solid #3a7070; }
.empty-msg { color: #4a7878; font-size: 14px; font-weight: 700; text-align: center; margin-top: 30px; font-style: italic; }

/* 浮层 */
.overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.7); display: flex; justify-content: center; align-items: center; z-index: 1000; }
.auth-box, .saves-box { background: #142828; border-radius: var(--radius-lg); padding: 20px; border: 2px solid #3a7070; width: 320px; max-width: 90%; color: #d0f0f0; position: relative; }
.auth-box input { width: 100%; padding: 8px; margin: 8px 0; background: #1a3030; border: 1px solid #508080; color: #fff; border-radius: 6px; }
.auth-btns, .saves-btns { display: flex; gap: 8px; margin-top: 12px; }
.auth-btns button, .saves-btns button { flex: 1; padding: 8px; background: #1e4040; border: 2px solid #60b0b0; color: #fff; font-weight: 700; border-radius: 8px; cursor: pointer; }
.saves-box ul { list-style: none; max-height: 200px; overflow-y: auto; margin: 10px 0; }
.saves-box li { padding: 6px; border-bottom: 1px solid #305050; cursor: pointer; }
.saves-box li:hover { background: #1a3838; }
.saves-box li.selected { background: #1a4030; }
.close-auth { position: absolute; top: 8px; right: 12px; background: none; border: none; color: #a0e0e0; font-size: 20px; cursor: pointer; }
.auth-message { color: #e8a0a0; font-size: 12px; margin-top: 8px; }