/* ==========================================================================
   desktop.css —— 电脑端布局（>=900px 双栏：左编辑 / 右舞台）
   ========================================================================== */

body.desktop { padding-bottom: 8px; }

.layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 420px;
    gap: 18px;
    align-items: start;
    padding: 20px 0;
}

.col-stage { position: sticky; top: 18px; display: grid; gap: 16px; }

/* 编辑区字段：电脑端横向铺满，4 列更紧凑 */
.grid-fields { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid-fields .span-2 { grid-column: span 2; }

.qr-frame { width: 340px; }

.ruler { max-height: 180px; }

.btn-row { gap: 12px; }

/* 二级菜单：电脑端更宽的网格，鼠标悬停有反馈 */
.grid { grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 14px; }

.grid-item { transition: transform .12s, box-shadow .12s; }
.grid-item:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.grid-item .acts { opacity: 0; transition: opacity .15s; }
.grid-item:hover .acts { opacity: 1; }

.wrap { max-width: 1240px; }

@media (max-width: 1100px) {
    .layout { grid-template-columns: minmax(0, 1fr) 360px; }
    .grid-fields { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 899px) {
    /* 小窗口电脑浏览器退化为单栏，保证可用 */
    .layout { grid-template-columns: minmax(0, 1fr); }
    .col-stage { position: static; }
    .grid-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* 滚动条美化（WebKit） */
.ruler::-webkit-scrollbar, .qr-text::-webkit-scrollbar { width: 6px; height: 6px; }
.ruler::-webkit-scrollbar-thumb, .qr-text::-webkit-scrollbar-thumb {
    background: var(--border); border-radius: 6px;
}