/* ───────────────────────────────────────────────────────────────────────────
 * editor-9mc.css — lop giao dien NHA cho /editor/
 *
 * Chu site 11/10/2026: "Thiet ke lai toan bo trang nay theo Google-inspired
 * Minimalist Floating UI" + "cao lai toan bo icon theo chu de game Minecraft".
 * Chuan chung cua mang: [[feedback_web_tool_google_floating_ui]] — ma mau song o
 * C:\Son\schematics-editor\web (editor.9minecraft.net).
 *
 * ⛔ Tep nay nap SAU `widget-full.css` (bo cuc nen cua cong cu) va `editor.css`
 *    (ban de mobile). No chi doi DIEN MAO; KHONG dung toi `display`, `grid-template`,
 *    kich thuoc canvas hay bat ky thu gi `widget-core.js` doc luc chay — doi nhung cai
 *    do la hong bo cuc ma khong co loi nao bao.
 * ⛔ Dung `!important` o nhieu cho vi `widget-full.css` cung dung `!important`; khong co
 *    thi quy tac o day thua.
 * ⛔ Mau lay tu bien `--e9-*` rieng, KHONG dung chung ten voi bien cua chrome
 *    (`--bg`, `--card`, `--acc`...) de khong de len nhau.
 * ⛔ Che do toi phai co CA HAI: `[data-theme=dark]` VA `@media (prefers-color-scheme:dark)`
 *    chan bang `:not([data-theme=light])` — thieu ban thu hai thi nguoi de may o che do toi
 *    ma khong bam nut se khong duoc ap ([[reference_che_do_toi_he_thong_bo_quy_tac]]).
 * ─────────────────────────────────────────────────────────────────────────── */

:root {
  --e9-nen: #f1f3f4;
  --e9-mat: #fff;
  --e9-mat2: #f8f9fa;
  --e9-chu: #1f1f1f;
  --e9-chu2: #5f6368;
  --e9-nhan: #1a73e8;
  --e9-nhan-nh: #e8f0fe;
  --e9-bong1: 0 1px 2px rgba(60, 64, 67, .30), 0 1px 3px 1px rgba(60, 64, 67, .15);
  --e9-bong2: 0 1px 3px rgba(60, 64, 67, .30), 0 4px 8px 3px rgba(60, 64, 67, .15);
  --e9-r-lon: 28px;
  --e9-r-vua: 16px;
  --e9-r-nho: 12px;
}

:root[data-theme=dark] {
  --e9-nen: #16181c;
  --e9-mat: #1f2126;
  --e9-mat2: #272a30;
  --e9-chu: #e8eaed;
  --e9-chu2: #9aa0a6;
  --e9-nhan: #8ab4f8;
  --e9-nhan-nh: #27384f;
  --e9-bong1: 0 1px 2px rgba(0, 0, 0, .55), 0 1px 3px 1px rgba(0, 0, 0, .35);
  --e9-bong2: 0 1px 3px rgba(0, 0, 0, .6), 0 4px 10px 3px rgba(0, 0, 0, .45);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme=light]) {
    --e9-nen: #16181c;
    --e9-mat: #1f2126;
    --e9-mat2: #272a30;
    --e9-chu: #e8eaed;
    --e9-chu2: #9aa0a6;
    --e9-nhan: #8ab4f8;
    --e9-nhan-nh: #27384f;
    --e9-bong1: 0 1px 2px rgba(0, 0, 0, .55), 0 1px 3px 1px rgba(0, 0, 0, .35);
    --e9-bong2: 0 1px 3px rgba(0, 0, 0, .6), 0 4px 10px 3px rgba(0, 0, 0, .45);
  }
}

/* ── nen phang, khong vien o dau ─────────────────────────────────────────── */
.ed9, .ed9 * { border-color: transparent !important; }

.ed9 main.editor-page {
  background: transparent !important;
  font-family: 'Google Sans Text', 'Google Sans', Roboto, system-ui, sans-serif !important;
  color: var(--e9-chu) !important;
}

.ed9 .editor-layout { gap: 14px !important; }

/* ── ba khoi lon: the NOI, bo 28px, bong mem, khong vien ─────────────────── */
.ed9 .tool-rail,
.ed9 .center-stage,
.ed9 .control-rail {
  background: var(--e9-mat) !important;
  border: 0 !important;
  border-radius: var(--e9-r-lon) !important;
  box-shadow: var(--e9-bong1) !important;
  padding: 16px !important;
}

/* khoi con: bo 16px, nen xam rat nhat, van khong vien */
.ed9 .color-card,
.ed9 .part-picker-card,
.ed9 .canvas-panel,
.ed9 .toggle-group,
.ed9 .cape-preset-group,
.ed9 .status-bar {
  background: var(--e9-mat2) !important;
  border: 0 !important;
  border-radius: var(--e9-r-vua) !important;
  box-shadow: none !important;
  padding: 14px !important;
}

/* ── tieu de muc: 11px IN HOA, gian chu, mau xam ─────────────────────────── */
.ed9 .canvas-title,
.ed9 .preview-background-label {
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: .9px !important;
  text-transform: uppercase !important;
  color: var(--e9-chu2) !important;
}

.ed9 .uv-meta,
.ed9 #statusText { color: var(--e9-chu2) !important; font-size: 12.5px !important; }

/* ── nut cong cu: o vuong bo tron, khong vien; bat = nen nhan nhat ───────── */
.ed9 .tool-tile,
.ed9 .brush-option,
.ed9 .sq-btn,
.ed9 .sq-btn-sm {
  background: var(--e9-mat2) !important;
  border: 0 !important;
  border-radius: var(--e9-r-nho) !important;
  box-shadow: none !important;
  color: var(--e9-chu) !important;
  transition: background .15s ease, box-shadow .15s ease !important;
}

.ed9 .tool-tile:hover,
.ed9 .brush-option:hover,
.ed9 .sq-btn:hover,
.ed9 .sq-btn-sm:hover {
  background: var(--e9-nhan-nh) !important;
  box-shadow: var(--e9-bong1) !important;
}

.ed9 .tool-tile.is-active,
.ed9 .brush-option.is-active {
  background: var(--e9-nhan-nh) !important;
  color: var(--e9-nhan) !important;
  box-shadow: none !important;
}

/* ── nut dang VIEN THUOC ─────────────────────────────────────────────────── */
.ed9 .pill,
.ed9 #editionToggle,
.ed9 .preview-background-select,
.ed9 .cape-preset-select {
  border-radius: 999px !important;
  border: 0 !important;
  background: var(--e9-mat2) !important;
  color: var(--e9-chu) !important;
  box-shadow: none !important;
  padding: 8px 16px !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  transition: background .15s ease !important;
}

.ed9 .pill:hover,
.ed9 #editionToggle:hover { background: var(--e9-nhan-nh) !important; }

.ed9 .pill.is-active {
  background: var(--e9-nhan-nh) !important;
  color: var(--e9-nhan) !important;
}

/* ── THANH CONG CU NOI: de len khung xem 3D, bo tron han, bong dam hon ───── */
.ed9 .center-stage { position: relative !important; }

.ed9 .preview-bar {
  position: absolute !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  bottom: 86px !important;
  z-index: 5 !important;
  display: flex !important;
  gap: 8px !important;
  align-items: center !important;
  background: var(--e9-mat) !important;
  border-radius: 999px !important;
  box-shadow: var(--e9-bong2) !important;
  padding: 8px 12px !important;
  width: auto !important;
  max-width: calc(100% - 32px) !important;
}

/* ⛔ Tren man rong, cho thanh nay nam MOT HANG: 7 nut xuong 3 hang lam no thanh mot khoi
 *    tron 279x115 chu khong con la "thanh cong cu noi" nhu chuan nha mo ta.
 *    Chi ap tu 1181px tro len — hep hon thi phai cho xuong hang, khong thi tran ra ngoai. */
@media (min-width: 1181px) {
  .ed9 .preview-bar,
  .ed9 .preview-bar .anim-row { flex-wrap: nowrap !important; }
  .ed9 .preview-bar .pill { white-space: nowrap !important; padding: 7px 13px !important; }
}

/* ── nut hanh dong lon (Download / Upload) ───────────────────────────────── */
.ed9 .action-row { gap: 10px !important; }

.ed9 .action-box {
  background: var(--e9-mat2) !important;
  border: 0 !important;
  border-radius: var(--e9-r-vua) !important;
  box-shadow: none !important;
  color: var(--e9-chu) !important;
  transition: background .15s ease, box-shadow .15s ease !important;
}

.ed9 .action-box:hover {
  background: var(--e9-nhan-nh) !important;
  box-shadow: var(--e9-bong1) !important;
}

.ed9 .action-label {
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: .9px !important;
  text-transform: uppercase !important;
  color: var(--e9-chu2) !important;
}

.ed9 .action-box:hover .action-label { color: var(--e9-nhan) !important; }

/* nut dat lai: giu y nghia "nguy hiem" nhung van phang, khong vien */
.ed9 .reset-tile {
  background: var(--e9-mat2) !important;
  color: #d93025 !important;
  border-radius: var(--e9-r-vua) !important;
  font-weight: 600 !important;
}
.ed9 .reset-tile:hover { background: #fce8e6 !important; }
:root[data-theme=dark] .ed9 .reset-tile:hover { background: #3c1f1d !important; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme=light]) .ed9 .reset-tile:hover { background: #3c1f1d !important; }
}

/* ── khung xem 3D va khung ve: anh bo 12px ───────────────────────────────── */
.ed9 .preview-wrap,
.ed9 .canvas-scroll {
  background: var(--e9-mat2) !important;
  border: 0 !important;
  border-radius: var(--e9-r-nho) !important;
}

.ed9 #previewCanvas,
.ed9 #partCanvas { border-radius: var(--e9-r-nho) !important; }

/* ── o ma mau ────────────────────────────────────────────────────────────── */
.ed9 .color-badge {
  border-radius: 999px !important;
  border: 0 !important;
  background: var(--e9-mat) !important;
  color: var(--e9-chu) !important;
  box-shadow: var(--e9-bong1) !important;
  font-weight: 600 !important;
  letter-spacing: .4px !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
 * ICON CHU DE MINECRAFT
 *
 * Icon duong net cua ban goc duoc THAY bang texture vat pham that cua Minecraft
 * (boc tu `.minecraft/versions/26.3/26.3.jar` — xem `lay_icon_mc.py`).
 * ⛔ Bam theo thuoc tinh `title` cua tung nut, KHONG theo `nth-child`: thu tu nut co the
 *    doi khi cong cu cap nhat, con `title` la thu nguoi dung doc nen on dinh hon.
 * ⛔ `image-rendering: pixelated` — thieu no thi trinh duyet lam min anh 16x16 thanh mot
 *    vet nhoe, mat han chat pixel art.
 * ⛔ An `<svg>` ben trong thay vi xoa khoi DOM: ma cua cong cu van giu tham chieu toi no.
 * ═══════════════════════════════════════════════════════════════════════════ */
.ed9 .tool-tile[title] > svg,
.ed9 .action-box > svg { display: none !important; }

.ed9 .tool-tile[title],
.ed9 .action-box {
  background-repeat: no-repeat !important;
  background-position: center 38% !important;
  background-size: 26px 26px !important;
  image-rendering: pixelated !important;
}

/* ⛔ Nut hanh dong RONG VA THAP, chu nam giua. Dat icon o `center` thi no DE LEN CHU —
 *    da thay tan mat o anh chup dau tien ("DOWNL[icon]D SKIN"). Dat icon sat TRAI va chua
 *    cho bang padding ben trai cua nhan. */
.ed9 .action-box {
  background-position: 18px center !important;
  background-size: 26px 26px !important;
  position: relative !important;
}
.ed9 .action-box .action-label { padding-left: 34px !important; }

.ed9 .tool-tile[title="Brush"]     { background-image: url(/icon-mc/but.png) !important; }
.ed9 .tool-tile[title="Erase"]     { background-image: url(/icon-mc/tay.png) !important; }
.ed9 .tool-tile[title="Auto Tone"] { background-image: url(/icon-mc/phep.png) !important; }
.ed9 .tool-tile[title="Picker"]    { background-image: url(/icon-mc/hut-mau.png) !important; }
.ed9 .tool-tile[title="Fill"]      { background-image: url(/icon-mc/do-mau.png) !important; }
.ed9 .tool-tile[title="Undo"]      { background-image: url(/icon-mc/hoan-tac.png) !important; }
.ed9 .tool-tile[title="Redo"]      { background-image: url(/icon-mc/lam-lai.png) !important; }
.ed9 .tool-tile[title="Mirror"]    { background-image: url(/icon-mc/doi-xung.png) !important; }
.ed9 .tool-tile[title="Grid"]      { background-image: url(/icon-mc/luoi.png) !important; }

.ed9 #resetButton  { background-image: url(/icon-mc/dat-lai.png) !important;
                     background-size: 22px 22px !important;
                     background-position: 16px center !important;
                     background-repeat: no-repeat !important;
                     image-rendering: pixelated !important; }

.ed9 #downloadButton,
.ed9 #downloadCapeButton { background-image: url(/icon-mc/tai-xuong.png) !important; }
.ed9 #uploadButton,
.ed9 #uploadCapeButton   { background-image: url(/icon-mc/tai-len.png) !important; }

/* ── cac khoi con con lai ────────────────────────────────────────────────
 * ⛔ 14 thanh phan duoi day truoc kia CHI duoc tao kieu boi cac quy tac
 *    `:root[data-theme=dark] …` cua ban goc. Da go nhung quy tac do (xem
 *    `go_toi_cu.py`), nen phai phu lai o day — khong thi o che do toi chung giu mau
 *    sang va "lot" ra giua cac the toi.
 */
.ed9 .brush-size-tile,
.ed9 .preview-background-row,
.ed9 .part-figure,
.ed9 .layer-row,
.ed9 .model-row,
.ed9 .face-row,
.ed9 .anim-row,
.ed9 .custom-anim-row,
.ed9 .back-equipment-row,
.ed9 .canvas-zoom-row,
.ed9 .preview-zoom-group {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  color: var(--e9-chu) !important;
}

.ed9 .brush-size-tile {
  background: var(--e9-mat2) !important;
  border-radius: var(--e9-r-nho) !important;
}

.ed9 .chip-button {
  background: var(--e9-mat2) !important;
  border: 0 !important;
  border-radius: 999px !important;
  color: var(--e9-chu) !important;
  font-weight: 600 !important;
  font-size: 12.5px !important;
  box-shadow: none !important;
  transition: background .15s ease !important;
}
.ed9 .chip-button:hover { background: var(--e9-nhan-nh) !important; }
.ed9 .chip-button.is-active {
  background: var(--e9-nhan-nh) !important;
  color: var(--e9-nhan) !important;
}

.ed9 #previewZoomValue,
.ed9 #brushSizeValue,
.ed9 #statusTitle { color: var(--e9-chu) !important; font-weight: 600 !important; }

/* ⛔ `.tool-icon` la <svg> ben trong nut — da an o khoi icon Minecraft phia tren.
 *    Van dat `filter:none` de khong con hieu ung mau cu neu con sot the nao. */
.ed9 .tool-icon { filter: none !important; }
.ed9 .is-hidden { display: none !important; }

/* ── dien thoai: mot cot, van giu the noi ────────────────────────────────── */
@media (max-width: 1180px) {
  .ed9 .editor-layout { gap: 12px !important; }
  .ed9 .tool-rail,
  .ed9 .center-stage,
  .ed9 .control-rail { padding: 14px !important; border-radius: 22px !important; }
  .ed9 .preview-bar { bottom: 74px !important; padding: 7px 10px !important; }
}