* { margin: 0; padding: 0; box-sizing: border-box; }
body {
    background: #111;
    color: #ccc;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    overflow: hidden;
    height: 100vh;
}
#glCanvas {
    display: block;
    width: 100vw;
    height: 100vh;
}

/* 预览模式：隐藏所有 UI */
body.preview-mode #editBtn,
body.preview-mode #editHintBtn,
body.preview-mode #shareBtn,
body.preview-mode #shareServerBtn,
body.preview-mode #inputOverlay,
body.preview-mode #fetchLoader {
    display: none !important;
}

/* 播放/暂停浮层按钮 */
#playPauseBtn {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 70;
    height: 80px;
    background: transparent;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.3s;
    color: rgba(255,255,255,0.7);
    font-size: 32px;
}
#playPauseBtn:hover { opacity: 1; }
/* 两种模式都保留。预览模式没键盘，这条是唯一的暂停入口；编辑模式保留是因为触屏同样
   没有空格键，且 hover 时淡入的 ▶/⏸ 正好让它可被发现。
   代价：底部 80px 不再属于 canvas。renderer.js 把 move 转发过去补回 iMouse.xy，
   但「按下」（iMouse.z > 0）在那条里不可用 —— 那里点击的语义就是暂停。 */
body #playPauseBtn { display: flex; }

/* 加载提示（服务器获取时） */
#fetchLoader {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 90;
    background: rgba(0,0,0,0.7);
    backdrop-filter: blur(4px);
    padding: 20px 32px;
    border-radius: 12px;
    color: #aaa;
    font-size: 14px;
    border: 1px solid #333;
    display: none;
    text-align: center;
}
#fetchLoader.show { display: block; }
#fetchLoader .spinner {
    display: inline-block;
    width: 20px; height: 20px;
    border: 2px solid #555;
    border-top-color: #e8553a;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    margin-right: 10px;
    vertical-align: middle;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* 编辑模式 UI — 顶部按钮栏 */
.top-bar {
    position: fixed;
    top: 12px;
    right: 12px;
    z-index: 60;
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: flex-end;
}
.top-btn-row {
    display: flex;
    gap: 6px;
    align-items: center;
}

.top-btn {
    background: rgba(0,0,0,0.5);
    color: #888;
    border: 1px solid #333;
    border-radius: 8px;
    padding: 7px 13px;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 4px;
}
.top-btn:hover {
    border-color: #e8553a;
    color: #e8553a;
    background: rgba(232,85,58,0.1);
}

.top-btn.edit-btn {
    background: rgba(232,85,58,0.12);
    color: #e8553a;
    border-color: rgba(232,85,58,0.3);
}
.top-btn.edit-btn:hover {
    background: rgba(232,85,58,0.25);
}

.top-btn.share-online {
    background: rgba(70,130,220,0.12);
    color: #6af;
    border-color: rgba(70,130,220,0.3);
}
.top-btn.share-online:hover {
    background: rgba(70,130,220,0.25);
}

.top-btn.icon-only {
    font-size: 14px;
    padding: 7px 11px;
}

/* 信息行（分辨率、帧率） */
.info-group {
    display: inline-flex;
    gap: 6px;
    align-items: center;
}
.info-tag {
    font-size: 12px;
    font-family: 'JetBrains Mono', 'Consolas', monospace;
    color: #fff;
    background: rgba(0,0,0,0.5);
    border: 1px solid #333;
    border-radius: 8px;
    padding: 7px 10px;
    min-width: 70px;
    text-align: center;
    white-space: nowrap;
    user-select: none;
}
body.preview-mode .info-group { display: none; }

/* 设置行（分辨率限制、帧率上限） */
.settings-group {
    display: inline-flex;
    gap: 6px;
    align-items: center;
}
.set-input {
    width: 70px;
    background: rgba(0,0,0,0.5);
    color: #fff;
    border: 1px solid #333;
    border-radius: 8px;
    padding: 7px 10px;
    font-size: 12px;
    font-family: 'JetBrains Mono', 'Consolas', monospace;
    outline: none;
    text-align: center;
    transition: all 0.2s;
    cursor: pointer;
    -moz-appearance: textfield;
}
.set-input::-webkit-inner-spin-button,
.set-input::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.set-input:focus {
    border-color: #6af;
    color: #6af;
    background: rgba(70,130,220,0.1);
}
.set-input:hover {
    border-color: #555;
    color: #aaa;
}
body.preview-mode .settings-group { display: none; }

/* 启动后暂停帧数 */
.pause-group {
    display: inline-flex;
    gap: 8px;
    align-items: center;
}
.pause-group label {
    font-size: 12px;
    color: #888;
    white-space: nowrap;
}
/* 输入框是「造预览链接用的参数」而非实时控件，预览模式下无需再显示 */
body.preview-mode .pause-group { display: none; }

/* 编辑器覆盖层 */
#inputOverlay {
    position: fixed;
    bottom: 0; left: 0; right: 0;
    background: rgba(0,0,0,0.88);
    backdrop-filter: blur(10px);
    padding: 20px 24px;
    transform: translateY(100%);
    transition: transform 0.3s ease;
    z-index: 100;
    max-height: 70vh;
    overflow-y: auto;
}
#inputOverlay.open { transform: translateY(0); }

#inputOverlay label {
    display: block;
    font-size: 13px; font-weight: 600;
    margin-bottom: 8px;
    color: #e8553a;
}
#inputOverlay textarea {
    width: 100%;
    min-height: 240px;
    background: #1a1a2e;
    color: #8f8;
    border: 1px solid #333;
    border-radius: 8px;
    padding: 14px;
    font-family: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;
    font-size: 13px; line-height: 1.5;
    resize: vertical; tab-size: 4;
}
#inputOverlay textarea:focus { outline: none; border-color: #e8553a; }

/* 编码 URL 输入框 */
#encodedUrlRow {
    display: flex;
    gap: 8px;
    margin-top: 10px;
    align-items: stretch;
}
#encodedUrlRow input {
    flex: 1;
    background: #0d0d1a;
    color: #6af;
    border: 1px solid #333;
    border-radius: 8px;
    padding: 10px 14px;
    font-family: 'JetBrains Mono', 'Consolas', monospace;
    font-size: 12px;
    outline: none;
    min-width: 0;
}
#encodedUrlRow input:focus { border-color: #6af; }
#encodedUrlRow input::selection { background: rgba(70,130,220,0.3); }

.overlay-actions {
    display: flex;
    gap: 8px;
    margin-top: 12px;
    flex-wrap: wrap;
    align-items: stretch;
}
.overlay-btn {
    padding: 10px 22px;
    border: none; border-radius: 6px;
    font-size: 13px; font-weight: 600;
    cursor: pointer; transition: all 0.2s;
    letter-spacing: 0.5px;
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
}
.overlay-sel {
    padding: 10px 22px;
    border: 1px solid #335;
    border-radius: 6px;
    font-size: 13px; font-weight: 600;
    cursor: pointer;
    background: #1a2a3e;
    color: #8cf;
    outline: none;
    appearance: auto;
    min-width: 0;
}
.overlay-sel:focus { border-color: #6af; }
.btn-apply   { background: #c94a2e; color: #fff; }
.btn-apply:hover { background: #b53e24; }
.btn-file    { background: #1a2a3e; color: #8cf; border: 1px solid #335; }
.btn-file:hover { background: #2a3a5e; border-color: #6af; }
.btn-share   { background: #3a5a7a; color: #bcd; }
.btn-share:hover { background: #4a6a8a; color: #ddf; }
.btn-upload  { background: #3a5a7a; color: #bcd; }
.btn-upload:hover { background: #4a6a8a; color: #ddf; }
.btn-decode  { background: #3a5a5a; color: #abc; }
.btn-decode:hover { background: #4a6a6a; color: #cde; }
.btn-close   { background: #333; color: #999; }
.btn-close:hover { background: #444; color: #bbb; }
.btn-default { background: #2a2a3a; color: #888; }
.btn-default:hover { background: #3a3a4a; color: #aaa; }

/* 发布接口不可用：置灰但保持可点（点了用 toast 讲原因）。
   因此用 class 而非 disabled 属性 —— disabled 按钮既不派发 click 也不显示 title，
   点下去「毫无反应」正是要治的病。 */
.top-btn.is-disabled,
.overlay-btn.is-disabled {
    opacity: 0.4;
    cursor: not-allowed;
    filter: grayscale(0.85);
}
/* 压回 :hover 变体（多一个类选择器，优先级更高），否则置灰的按钮一 hover 又亮起来 */
.overlay-btn.btn-upload.is-disabled:hover { background: #3a5a7a; color: #bcd; }
.top-btn.share-online.is-disabled:hover {
    background: rgba(70,130,220,0.12);
    color: #6af;
    border-color: rgba(70,130,220,0.3);
}

.hint {
    font-size: 12px;
    color: #777;
    margin-top: 8px;
}
.hint kbd {
    background: #2a2a3e;
    padding: 2px 6px;
    border-radius: 4px;
    border: 1px solid #444;
    font-size: 11px;
}

/* Toast */
#toast {
    position: fixed;
    bottom: 20px; left: 50%;
    transform: translateX(-50%) translateY(80px);
    background: rgba(0,0,0,0.85);
    backdrop-filter: blur(4px);
    color: #ccc;
    padding: 10px 24px;
    border-radius: 8px;
    font-size: 13px;
    z-index: 200;
    opacity: 0;
    transition: all 0.4s;
    pointer-events: none;
    border: 1px solid #333;
}
#toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* 帮助弹窗 */
#helpModal {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: 300;
    background: rgba(0,0,0,0.6);
    backdrop-filter: blur(4px);
    display: none;
    justify-content: center;
    align-items: center;
    padding: 20px;
}
#helpModal.open { display: flex; }

.help-panel {
    background: #1a1a2e;
    border: 1px solid #333;
    border-radius: 16px;
    padding: 32px;
    max-width: 520px;
    width: 100%;
    max-height: 80vh;
    overflow-y: auto;
    box-shadow: 0 16px 64px rgba(0,0,0,0.5);
}

.help-panel h3 {
    color: #e0e0e0;
    font-size: 18px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.help-panel .help-section {
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid #2a2a3e;
}
.help-panel .help-section:last-child {
    border-bottom: none;
    margin-bottom: 0;
}

.help-panel .help-section h4 {
    color: #e8553a;
    font-size: 14px;
    margin-bottom: 8px;
}

.help-panel .help-section p {
    color: #999;
    font-size: 13px;
    line-height: 1.6;
}

.help-panel .help-section .badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    margin-right: 4px;
}
.badge-green  { background: rgba(68,204,68,0.15); color: #4c4; }
.badge-blue   { background: rgba(70,130,220,0.15); color: #6af; }
.badge-orange { background: rgba(232,85,58,0.15); color: #e8553a; }

.help-panel kbd {
    background: #2a2a3e;
    padding: 2px 6px;
    border-radius: 4px;
    border: 1px solid #444;
    font-size: 11px;
    color: #aaa;
}

.help-close-btn {
    display: block;
    width: 100%;
    margin-top: 8px;
    padding: 10px;
    background: #333;
    color: #ccc;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    cursor: pointer;
    transition: background 0.2s;
}
.help-close-btn:hover { background: #444; }

.comparison-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
    margin-top: 8px;
}
.comparison-table th,
.comparison-table td {
    padding: 6px 8px;
    text-align: left;
    border-bottom: 1px solid #2a2a3e;
}
.comparison-table th {
    color: #888;
    font-weight: 600;
}
.comparison-table td {
    color: #aaa;
}
.comparison-table td:first-child {
    font-weight: 600;
    white-space: nowrap;
}

@media (max-width: 640px) {
    #inputOverlay { padding: 14px; }
    #inputOverlay textarea { min-height: 160px; }
    .top-btn { font-size: 11px; padding: 6px 10px; }
}