/* Panel cài đặt của editor (trái: dự án, phải: màn hình): nền, màu, lưới layout, ô soạn chữ, ô ảnh. */
/* Nhóm style riêng của slide */
.ovr { margin-bottom: 10px; } /* phần nền riêng của màn hình: không đóng khung */
.ovr > label.check { margin-bottom: 10px; }
.ovr input[type=color] { width: 100%; height: 32px; padding: 2px; background: var(--panel-2); border: 1px solid var(--line); border-radius: 8px; }
.ovr .imgbox img { width: 44px; height: 64px; }
.chips.tiny .chip { white-space: nowrap; }
.seg button:disabled { opacity: .55; cursor: default; }

/* ---------- Panel cài đặt (trái: dự án, phải: màn hình) ---------- */
.panel.left { padding: 14px; }
.panel-title { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .6px; color: var(--muted); margin-bottom: 12px; }
.psec { border-top: 1px solid var(--line); padding-top: 12px; margin-top: 12px; }
.psec:first-of-type { border-top: 0; margin-top: 0; padding-top: 0; }
.psec h4 { margin: 0 0 10px; font-size: 13px; color: var(--text); }
.panel .field > .seg { align-self: stretch; }
.panel .field > .seg button { flex: 1; }
.tsection + .tsection { border-top: 1px solid var(--line); margin-top: 6px; padding-top: 12px; }
.tgroup-title { font-size: 12px; font-weight: 700; color: var(--text); margin-bottom: 6px; }
.focusbox { background: rgba(109,91,255,.07); border: 1px solid rgba(109,91,255,.45); border-radius: 10px; padding: 10px 10px 0; margin-bottom: 10px; }
.film .thumb .nm { display: block; width: 0; min-width: 100%; font-size: 10.5px; color: var(--muted); text-align: center; margin-top: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.film .thumb.on .nm { color: var(--text); }

/* Gradient nhiều điểm */
.gwrap { position: relative; height: 34px; margin: 4px 8px 6px; }
.gbar { position: absolute; inset: 6px 0; border-radius: 6px; border: 1px solid var(--line); cursor: copy; }
.gmarks { position: absolute; inset: 0; pointer-events: none; }
.gmark { position: absolute; top: 0; width: 16px; height: 34px; margin-left: -8px; border-radius: 6px; border: 2px solid #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.5); cursor: ew-resize; pointer-events: auto; padding: 0; }
.gmark.on { outline: 2px solid var(--brand); outline-offset: 2px; }
.gstop { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: end; margin-bottom: 2px; }
.gstop .btn { margin-bottom: 14px; }
.delstop { width: 34px; height: 34px; }
.delstop:disabled { opacity: .35; cursor: default; }

/* Ô màu khung máy */
.swatches { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; margin-bottom: 12px; }
.swatch { display: flex; align-items: center; gap: 8px; background: var(--panel-2); border: 1px solid var(--line); border-radius: 8px; padding: 6px 8px; cursor: pointer; color: var(--text); font-size: 12.5px; }
.swatch i { width: 18px; height: 18px; border-radius: 50%; border: 1px solid rgba(255,255,255,.35); flex: none; }
.swatch.on { border-color: var(--brand); box-shadow: 0 0 0 1px var(--brand) inset; }

/* Lưới layout */
.lgrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin-bottom: 12px; }
.lgroup { grid-column: 1 / -1; font-size: 11.5px; color: var(--muted); margin-top: 4px; }
.ltile { background: var(--panel-2); border: 2px solid transparent; border-radius: 8px; padding: 3px; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 3px; color: var(--muted); font-size: 10.5px; }
.ltile { min-width: 0; }
.ltile span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ltile canvas { width: 100%; height: auto; border-radius: 4px; display: block; }
.ltile:hover { border-color: #3a4156; }
.ltile.on { border-color: var(--brand); color: var(--text); }

/* ---------- Card cài đặt dự án (mở / thu gọn) ---------- */
.pcard-set { background: var(--panel-2); border: 1px solid var(--line); border-radius: 12px; margin-bottom: 10px; overflow: hidden; }
.pcard-set > summary { list-style: none; cursor: pointer; padding: 11px 12px; font-size: 13px; font-weight: 700; color: var(--text); display: flex; align-items: center; justify-content: space-between; user-select: none; }
.pcard-set > summary::-webkit-details-marker { display: none; }
.pcard-set > summary::after { content: ''; width: 7px; height: 7px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(45deg); transition: transform .15s; margin-right: 4px; }
.pcard-set:not([open]) > summary::after { transform: rotate(-45deg); }
.pcard-set > summary:hover { background: rgba(255,255,255,.03); }
.pcard-set[open] > summary { border-bottom: 1px solid var(--line); }
.pcard-body { padding: 12px; }
.pcard-body .swatch, .pcard-body select, .pcard-body textarea, .pcard-body input[type=text], .pcard-body .seg { background: var(--panel); }

/* Ô bàn cờ phía sau canvas: chỉ lộ ra ở chỗ nền trong suốt (vd. nền ảnh chưa chọn ảnh) */
#preview, .thumb canvas {
  background-color: #fff;
  background-image: linear-gradient(45deg, #d7dbe3 25%, transparent 25%), linear-gradient(-45deg, #d7dbe3 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #d7dbe3 75%), linear-gradient(-45deg, transparent 75%, #d7dbe3 75%);
  background-size: 16px 16px;
  background-position: 0 0, 0 8px, 8px -8px, -8px 0;
}

/* Ảnh nền xem trước: ô vuông (ảnh nền có thể ngang hoặc dọc) */
.bgedit .imgbox img, .ovr .bgedit .imgbox img, .frimg img { width: 64px; height: 64px; object-fit: cover; object-position: center; }

/* Ô chọn screen size trên thanh editor */
.sizepick { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 12.5px; white-space: nowrap; }
.sizepick select { max-width: 300px; }
.dlg .checks { max-height: 50vh; overflow-y: auto; }
.bgedit .imgph, .frimg .imgph { width: 64px; height: 64px; flex: none; border: 2px dashed var(--line); border-radius: 8px; background: transparent; cursor: pointer; position: relative; }
.bgedit .imgph::after, .frimg .imgph::after { content: '+'; position: absolute; inset: 0; display: grid; place-items: center; color: var(--muted); font-size: 22px; }
.bgedit .imgph:hover, .frimg .imgph:hover { border-color: var(--brand); }

/* Nút tròn "+" thêm khung, nằm cạnh các khung */
.chips.tiny { align-items: center; }
.addframe { width: 30px; height: 30px; border-radius: 50%; border: 1px dashed var(--brand); background: rgba(109,91,255,.12); color: #c9c1ff; font-size: 18px; line-height: 1; cursor: pointer; display: grid; place-items: center; padding: 0; }
.addframe:hover { background: var(--brand); color: #fff; border-style: solid; }
.addframe:disabled { opacity: .35; cursor: default; }

/* ---------- Ô nhập chữ có định dạng ---------- */
.rtebox { margin-bottom: 14px; }
.rtebox-label { font-size: 12.5px; color: var(--muted); margin-bottom: 6px; }
.rtebox-frame { border: 1px solid var(--line); border-radius: 10px; background: var(--panel); overflow: hidden; }
.rtebox-frame:focus-within { border-color: var(--brand); box-shadow: 0 0 0 1px var(--brand); }
.rtebar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 6px; background: var(--panel-2); border-bottom: 1px solid var(--line); }
.rtebar select { width: auto; flex: 1 1 80px; min-width: 0; padding: 5px 7px; font-size: 12.5px; }
.rbtn { width: 30px; height: 30px; padding: 0; display: grid; place-items: center; font-size: 14px; }
.rbtn.on { border-color: var(--brand); background: rgba(109,91,255,.18); }
.panel .rcolor { position: relative; flex-direction: row; justify-content: center; gap: 0; width: 30px; height: 30px; flex: none; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); display: grid; place-items: center; cursor: pointer; margin: 0 !important; }
.rcolor span { position: relative; font-weight: 800; color: var(--text); line-height: 1; font-size: 14px; pointer-events: none; }
.rcolor span::after { content: ''; position: absolute; left: -2px; right: -2px; bottom: -4px; height: 3px; border-radius: 2px; background: var(--c, #ff4d6d); }
.rcolor input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100% !important; height: 100% !important; }
.rte { min-height: calc(1.45em + 16px); padding: 8px 10px; color: var(--text); font-size: 14px; line-height: 1.45; outline: none; white-space: pre-wrap; word-break: break-word; }
.rte.empty::before { content: attr(data-ph); color: var(--muted); font-weight: 400; pointer-events: none; }

/* Dropdown tự vẽ cho font / độ đậm */
.ssel { position: relative; flex: 1 1 80px; min-width: 0; }
.ssel-btn { width: 100%; text-align: left; background: var(--panel-2); border: 1px solid var(--line); border-radius: 8px; padding: 6px 24px 6px 8px; font-size: 12.5px; color: var(--text); cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; position: relative; }
.ssel-btn::after { content: ''; position: absolute; right: 9px; top: 50%; width: 6px; height: 6px; margin-top: -5px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(45deg); }
.pcard-body .ssel-btn { background: var(--panel); padding: 7px 28px 7px 9px; font-size: 13px; }
.ssel-list { position: fixed; z-index: 1000; max-height: 260px; overflow-y: auto; background: var(--panel-2); border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 10px 30px rgba(0,0,0,.5); padding: 4px; display: flex; flex-direction: column; }
.ssel-item { background: transparent; border: 0; border-radius: 6px; padding: 7px 10px; text-align: left; color: var(--text); font-size: 15px; cursor: pointer; white-space: nowrap; }
.ssel-item:hover { background: rgba(255,255,255,.07); }
.ssel-item.on { background: rgba(109,91,255,.25); }
.field > .ssel, .dlg label > .ssel { flex: none; } /* trong cột dọc, flex-basis 80px của .ssel làm ô chọn cao thừa → khoảng trống phía trên ảnh xem trước */
/* Ô ảnh màn hình: nút xoá (chỉ ảnh riêng) nằm trong ảnh; ảnh kế thừa nằm trên nền ô cờ trắng đen, mờ 80% */
.thumbwrap { position: relative; flex: none; line-height: 0; }
.thumbwrap.inherited { background: conic-gradient(#000 25%, #fff 0 50%, #000 0 75%, #fff 0) 0 0 / 12px 12px; border-radius: 8px; }
.thumbwrap.inherited img { opacity: .8; }
.thumbdel { position: absolute; top: 4px; right: 4px; width: 22px; height: 22px; padding: 0; border-radius: 50%; border: 0; background: rgba(0,0,0,.65); color: #fff; display: grid; place-items: center; cursor: pointer; }
.thumbdel:hover { background: #e5484d; }
/* Ảnh màn hình của device: khung 3:4, các nút (tải / xoá / cách đặt ảnh) nằm bên phải */
.imgbox.frimg img, .imgbox.frimg .imgph { width: 72px; height: 96px; }
.imgbox.frimg .imgbtns { flex: 1; min-width: 0; }
#frFitField .seg { display: flex; width: 100%; align-self: stretch; }
#frFitField .seg button { flex: 1; padding-left: 4px; padding-right: 4px; }