:root {
  --bg:#0b0f18;
  --card:#0f172a;
  --line:#22314f;

  /* ✅ tất cả text UI mặc định trắng */
  --txt:#ffffff;

  --muted:#9ca3af;
  --blue:#3b82f6;
}

body{
  margin:0;

  /* ✅ UI web dùng font hệ thống (không phụ thuộc font ngoài) */
  font-family:
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    "Helvetica Neue",
    Arial,
    sans-serif;

  background:linear-gradient(180deg,#050814,#0a0f1c);
  color:var(--txt);
}


/* =========================
   Base UI
========================= */
.wrap{ display:flex; gap:14px; padding:14px; height:100vh; box-sizing:border-box;}

.panel{
  width:340px;
  min-width:320px;
  background:rgba(15,23,42,.85);
  border:1px solid var(--line);
  border-radius:14px;
  padding:12px;
  box-sizing:border-box;
}

.panel h3{
  margin:0 0 10px 0;
  font-size:14px;
  letter-spacing:.3px;
  color:#fff;
}

.row{
  display:flex;
  gap:8px;
  align-items:center;
  flex-wrap:wrap;
  margin-bottom:10px;
}
.row > input[style*="flex:1"]{ min-width: 0; }

button{
  padding:8px 10px;
  border-radius:12px;
  border:1px solid var(--line);
  background:#0b1225;
  color:var(--txt);
  cursor:pointer;
}

button.primary{
  background:var(--blue);
  border-color:transparent;
  color:#fff;
}

button.danger{
  background:#3b0b12;
  border-color:#5b1722;
  color:#ffe4e6;
}

button:active{ transform:translateY(1px); }

input, select{
  padding:8px 10px;
  border-radius:12px;
  border:1px solid var(--line);
  background:#0b1225;
  color:var(--txt);
  outline:none;
}

input[type="number"]{ width:90px; }
input[type="text"]{ width:100%; }

.muted{
  color:var(--muted);
  font-size:12px;
  line-height:1.35;
}

.tiny{ font-size:11px; opacity:.85; }

.list{
  border:1px solid var(--line);
  border-radius:12px;

  /* FIX: tooltip (pseudo-element) sẽ bị cắt nếu overflow:hidden */
  overflow:visible;
}


/* ===== Layers v3: dạng nút (giống palette) ===== */
.layerGrid{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(64px, 1fr));
  gap:10px;
  padding:10px;
  background:rgba(11,18,37,.35);
  border-top:1px solid rgba(34,49,79,.6);
}

.layerBtn{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  height:56px;
  border-radius:14px;
  border:1px solid rgba(34,49,79,.75);
  background:rgba(11,18,37,.72);
  color:var(--txt);
  font-weight:800;
  letter-spacing:.2px;
  cursor:pointer;
  user-select:none;
  padding:0 8px;
  text-transform:none;

  /* FIX: nếu hidden thì ::after/::before bị tự cắt */
  overflow:visible;
}

.layerBtn:hover{ filter:brightness(1.08); }

.layerBtn.on{
  background:rgba(45,212,191,.14);
  border-color:rgba(45,212,191,.55);
}

.layerBtn.off{
  opacity:.78;
}

.layerBtn.active{
  outline:2px solid rgba(59,130,246,.65);
  box-shadow: 0 0 0 1px rgba(59,130,246,.25) inset;
}

/* ===== ACCENT LINE buttons: dùng chung icon lig.png + hiện số ===== */
.layerBtn.accentLineBtn{
  background-image: url("ico/lig.webp");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 66%;
}

/* số nhỏ để phân biệt line (bỏ ký tự L) */
.layerBtn.accentLineBtn .accentNum{
  position:absolute;
  right:8px;
  bottom:6px;
  font-size:12px;
  font-weight:900;
  color:#ffffff;
  text-shadow: 0 2px 6px rgba(0,0,0,.55);
  line-height:1;
}



/* ===== Layer buttons: dùng icon PNG từ /ico (UI-only) ===== */
.layerBtn.layerIconBtn{
  /* Ẩn chữ */
  font-size: 0;
  color: transparent;

  background-repeat: no-repeat;
  background-position: center;
  background-size: 58%; /* muốn icon nhỏ hơn: giảm xuống 50% hoặc 46% */
}

/* tooltip (data-tip) - ĐÃ VÔ HIỆU HÓA để dùng tooltip global (fixed) */
.layerBtn[data-tip]::after{
  content: none !important;

  content: attr(data-tip);
  position:absolute;
  left:50%;
  bottom:calc(100% + 10px);
  transform:translateX(-50%);
  min-width: 160px;
  max-width: 260px;
  padding:8px 10px;
  border-radius:12px;
  border:1px solid rgba(34,49,79,.7);
  background:rgba(15,23,42,.95);
  color:var(--txt);
  font-size:12px;
  line-height:1.35;
  white-space:pre-line;
  box-shadow:0 18px 60px rgba(0,0,0,.45);
  opacity:0;
  pointer-events:none;
  transition:opacity .12s ease, transform .12s ease;
  z-index:9999;
}
.layerBtn[data-tip]::before{
  content: none !important;
  content:"";
  position:absolute;
  left:50%;
  bottom:calc(100% + 2px);
  transform:translateX(-50%);
  width:10px;
  height:10px;
  background:rgba(15,23,42,.95);
  border-left:1px solid rgba(34,49,79,.7);
  border-top:1px solid rgba(34,49,79,.7);
  transform:translateX(-50%) rotate(45deg);
  opacity:0;
  pointer-events:none;
  transition:opacity .12s ease;
  z-index:9998;
}
.layerBtn:hover::after{
  opacity:1;
  transform:translateX(-50%) translateY(-2px);
}
.layerBtn:hover::before{ opacity:1; }


.item{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  padding:10px;
  background:rgba(11,18,37,.65);
  border-bottom:1px solid rgba(34,49,79,.6);
  cursor:pointer;
}
.item:last-child{ border-bottom:none; }
.item.active{
  outline:2px solid rgba(59,130,246,.6);
  background:rgba(59,130,246,.12);
}

    .badge{ font-size:11px; padding:3px 8px; border-radius:999px; border:1px solid rgba(255,255,255,.12); color:var(--muted);}

    /* Toggle switch (Layers on/off) */
    .switch{
      position:relative;
      display:inline-block;
      width:46px;
      height:26px;
      border-radius:999px;
      border:1px solid rgba(255,255,255,.14);
      background:rgba(11,18,37,.65);
      box-shadow: inset 0 0 0 1px rgba(34,49,79,.35);
    }
    .switch input{
      opacity:0;
      width:0;
      height:0;
      position:absolute;
    }
    .switch .slider{
      position:absolute;
      inset:0;
      border-radius:999px;
      transition:all .15s ease;
    }
    .switch .slider:before{
      content:"";
      position:absolute;
      width:20px;
      height:20px;
      left:3px;
      top:50%;
      transform:translateY(-50%);
      border-radius:999px;
      background:rgba(255,255,255,.88);
      box-shadow:0 6px 14px rgba(0,0,0,.35);
      transition:all .15s ease;
    }
    .switch input:checked + .slider{
      background:rgba(45,212,191,.18);
      border-radius:999px;
    }
    .switch input:checked + .slider:before{
      left:23px;
      background:rgba(165,255,244,.95);
    }

/* kv cũ không còn dùng cho Properties v2 */
.kv{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:8px;
}
.kv .full{ grid-column:1 / -1; }

/* ===== Properties v2 (giống ảnh 2) ===== */
.propsPanel{
  width:100%;
  background:rgba(11,18,37,.62);
  border:1px solid rgba(34,49,79,.55);
  box-shadow: 0 18px 60px rgba(0,0,0,.35);
  display:flex;
  flex-direction:column;
  min-height:0;
}

.propsHeader{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
  padding:12px 12px 8px 12px;
  border-bottom:1px solid rgba(34,49,79,.5);
}

.propsTitle{
  font-size:13px;
  font-weight:900;
  letter-spacing:.6px;
  text-transform:uppercase;
}

.propsSub{ margin-top:4px; font-size:12px; }

.pill{
  max-width:220px;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(34,49,79,.65);
  background:rgba(7,16,37,.45);
  color:rgba(229,231,235,.9);
  font-size:12px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.propsBody{
  flex:1;
  min-height:0;
  padding:12px;
  overflow:auto;
}

.propsCard{
  background:rgba(7,16,37,.35);
  border:1px solid rgba(34,49,79,.55);
  border-radius:16px;
  padding:12px;
}


/* ===== Icon set uploader ===== */
/* UI v4: đổi sang nút dạng "layerBtn" (giống palette) */
.iconPickGrid{
  /* layerGrid mặc định có nền + border-top (phù hợp sidebar),
     trong Properties thì bỏ đi cho gọn */
  padding:0;
  background:transparent;
  border-top:none;
}

.iconPickGrid .iconPickBtn{
  height:52px;

  font-size:0;
  color:transparent;

  background-repeat:no-repeat;
  background-position:center;

  /* ✅ icon nhỏ hơn nhưng vẫn đúng tỉ lệ */
  background-size: 45%;

  filter:none;
  opacity:1;
}

/* override trạng thái "off" của layerBtn (mặc định bị opacity .78) */
.iconPickGrid .iconPickBtn.off{
  opacity:1;
}

/* icon scale (slider + number) */
.iconScaleRow{
  display:flex;
  align-items:center;
  gap:10px;
  margin:8px 0;
}
#iconScaleRange{
  flex:1;
}

#iconScaleVal{
  min-width:48px;
  text-align:right;
}

/* ===== Colon blink (preview) ===== */
@keyframes colonBlink {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0; }
}


.blinkColon{
  display:inline-block;
  animation: colonBlink 1s step-start infinite;
}


.propsSectionHead{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:10px;
}

.propsSectionTitle{
  font-weight:800;
  letter-spacing:.4px;
  font-size:12px;
}

.propsSectionHint{ font-size:12px; opacity:.85; }

.propsDivider{
  height:1px;
  background:rgba(34,49,79,.55);
  margin:12px 0;
}

.field{ margin-bottom:12px; }
.field:last-child{ margin-bottom:0; }

.field label{
  display:block;
  margin-bottom:6px;
  font-size:12px;
  color:var(--muted);
}

.field input, .field select{
  width:100%;
  box-sizing:border-box;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid rgba(34,49,79,.75);
  background:rgba(11,18,37,.65);
}


/* ===== Color picker row ===== */
.colorRow{
  display:flex;
  gap:10px;
  align-items:center;
}

/* ===== BG buttons: căn đúng width với ô nhập BG ===== */
.bgBtnRow{
  display:grid;
  grid-template-columns: 1fr 1fr; /* chia đều 2 nút */
  gap:10px;
  width:100%;
}

.bgBtnRow > button{
  width:100%;
  height:30px;           /* cùng chiều cao với input */
  border-radius:12px;
  padding:0 14px;
}
/* ===== Device size row (width + height cùng 1 dòng) ===== */
.sizeRow{
  display:flex;
  gap:10px;
  align-items:flex-start;
}

.sizeCell{
  flex:1;
  min-width:0;
}

.sizeCell .muted.tiny{
  display:block;
  margin-bottom:6px;
}

/* ===== Cặp field cùng 1 dòng (dùng cho x/y, cx/cy, pivot_x/pivot_y...) ===== */
.pairRow{
  display:flex;
  gap:10px;
  align-items:flex-start;
}

.pairCell{
  flex:1;
  min-width:0;
}

/* giữ đúng spacing label/input trong pair */
.pairCell > label{
  display:block;
  margin-bottom:6px;
  font-size:12px;
  color:var(--muted);
}

.colorRow input[type="color"]{
  width:44px;
  height:44px;
  padding:0;
  border-radius:14px;
  border:1px solid rgba(34,49,79,.75);
  background:rgba(11,18,37,.65);
  cursor:pointer;
  overflow:hidden;
}

/* đồng bộ “ô màu” bên trong */
.colorRow input[type="color"]::-webkit-color-swatch-wrapper{
  padding:8px;
}
.colorRow input[type="color"]::-webkit-color-swatch{
  border:0;
  border-radius:10px;
}

/* text color input chiếm phần còn lại */
.colorRow input[type="text"]{
  flex:1;
}


/* bỏ ép width input number */
input[type="number"]{ width:100%; }

/* ===== Ẩn spinner (mũi tên lên/xuống) để đồng bộ UI ===== */
/* Chrome, Edge, Safari */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button{
  -webkit-appearance: none;
  margin: 0;
}
/* Firefox */
input[type="number"]{
  -moz-appearance: textfield;
}

textarea{
  width:100%;
  height:170px;
  border-radius:12px;
  border:1px solid var(--line);
  background:#071025;
  color:#d1fae5;
  padding:10px;
  box-sizing:border-box;

  /* ✅ textarea cũng dùng font hệ thống */
  font-family:
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    "Helvetica Neue",
    Arial,
    sans-serif;

  font-size:12px;
}

.hr{
  height:1px;
  background:rgba(34,49,79,.6);
  margin:10px 0;
}

/* =========================
   Stage (240x240 – kích thước thật)
========================= */
.stage{
  position:relative;
  width:240px;
  height:240px;
  border-radius:0;
  border:1px solid rgba(255,255,255,.14);
  background:#000;
  overflow:hidden;
  box-shadow:0 24px 60px rgba(0,0,0,.5);
}

.stage .bgImg{
  position:absolute;
  inset:0;
  background-position:center;
  background-repeat:no-repeat;
  background-size:cover;
  pointer-events:none;
}

.grid{
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:.22;
  background-image:
    linear-gradient(to right, rgba(255,255,255,.09) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.09) 1px, transparent 1px);
  background-size:20px 20px;
}

.el{
  position:absolute;
  left:0;
  top:0;
  transform-origin:top left;
  user-select:none;
  cursor:grab;
  white-space:pre;
}

/* ===== Analog hands: không kéo, không outline, nằm trên BG ===== */
.analogHand{
  cursor:default;
  pointer-events:none; /* để không ăn event kéo của stage */
  z-index: 5;
}

.analogHand img{
  display:block;
}

.analogSecond{
  pointer-events:none;
  z-index: 5;
}

.analogCap{
  /* ✅ Cho phép bắt chuột để kéo tâm đồng hồ */
  pointer-events:auto;
  cursor:grab;
  z-index: 6;
}
.analogCap:active{
  cursor:grabbing;
}

/* ===== Accent lines (SVG overlay) ===== */
.accentSvg{
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index: 4; /* dưới kim đồng hồ, trên BG */
}

/* blink */
@keyframes accentBlink {
  0%,49% { opacity:1; }
  50%,100% { opacity:0; }
}


.el:active{ cursor:grabbing; }
.el.selected{
  outline:1px dashed rgba(59,130,246,.9);
  outline-offset:2px;
}

/* =========================
   ====== LAYOUT V2 ======
   Topbar + 3 columns (ảnh 2)
========================= */

.app{
  height:100vh;
  display:flex;
  flex-direction:column;
}

/* ---- Topbar ---- */
.topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:14px 16px;
  border-bottom:1px solid rgba(34,49,79,.45);
  background:rgba(8,12,24,.6);
  backdrop-filter: blur(10px);
}

.brand{
  display:flex;
  align-items:center;
  gap:12px;
}

.logo{
  width:34px;
  height:34px;
  border-radius:12px;

  /* ✅ đúng path */
  background-image: url("ico/logo.webp");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;

  background-color: rgba(11,18,37,.65);
  box-shadow:0 8px 24px rgba(0,0,0,.35);
}


.brandTitle{
  font-weight:800;
  letter-spacing:.2px;
}

.brandSub{
  margin-top:2px;
  font-size:12px;
  color:var(--muted);
}

.actions{
  display:flex;
  align-items:center;
  gap:10px;
}

#btnGridToggle.active{
  background:rgba(59,130,246,.25);
  border-color:rgba(59,130,246,.55);
}

/* ---- Main layout ---- */
.layout{
  flex:1;
  display:grid;
  grid-template-columns: 340px 1fr 360px;
  gap:14px;
  padding:14px;
  box-sizing:border-box;
  min-height:0;
}

.sidebar, .props, .main{ min-height:0; }

.sidebar .panel,
.props .panel,
.main .panel{
  width:100%;
  height:100%;
  overflow:auto;
}

/* ---- Preview center ---- */
.previewPanel{
  display:flex;
  flex-direction:column;
  overflow:hidden;
}

.previewTop{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:10px 12px;
  border-bottom:1px solid rgba(34,49,79,.5);
}

.previewTitle{
  font-size:13px;
  font-weight:800;
  letter-spacing:.35px;
}

.previewBody{
  flex:1;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:18px;
}

.stageOuter{
  width:100%;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
}

/* giữ nguyên kích thước stage thật */
.stage{ flex:0 0 auto; }

/* textarea bên layers thấp hơn giống ảnh 2 */
/* textarea bên layers thấp hơn giống ảnh 2 */
.sidebar textarea{ height:220px; }

/* ======= polish theo style ảnh 2 (nhất là 2 cột) ======= */
.sidebar .panel, .props .panel{
  background:rgba(11,18,37,.62);
  border:1px solid rgba(34,49,79,.55);
  box-shadow: 0 18px 60px rgba(0,0,0,.35);
}

.sidebar .panel h3, .props .panel h3{
  font-size:13px;
  letter-spacing:.5px;
  text-transform:uppercase;
  opacity:.95;
}

/* layer list “card” rõ ràng hơn */
.list{
  border:1px solid rgba(34,49,79,.55);
  background:rgba(7,16,37,.35);
}

.item{
  border-bottom:1px solid rgba(34,49,79,.45);
  padding:12px;
  border-radius:0;
}

.item.active{
  outline:2px solid rgba(72,255,204,.25);
  background:rgba(72,255,204,.06);
}

.item .muted{ opacity:.9; }

/* thanh cuộn đẹp (Chrome/Edge) */
.sidebar .panel::-webkit-scrollbar,
.props .panel::-webkit-scrollbar,
.main .panel::-webkit-scrollbar{
  width:10px;
}
.sidebar .panel::-webkit-scrollbar-thumb,
.props .panel::-webkit-scrollbar-thumb,
.main .panel::-webkit-scrollbar-thumb{
  background:rgba(148,163,184,.25);
  border-radius:999px;
  border:2px solid rgba(0,0,0,0);
  background-clip:padding-box;
}

/* ======= segmented control cho scale ======= */
.seg{
  display:inline-flex;
  gap:0;
  border:1px solid rgba(34,49,79,.65);
  border-radius:999px;
  overflow:hidden;
  background:rgba(11,18,37,.65);
}

.segBtn{
  padding:8px 10px;
  border:0;
  border-right:1px solid rgba(34,49,79,.55);
  border-radius:0;
  background:transparent;
  color:var(--txt);
  cursor:pointer;
}
.segBtn:last-child{ border-right:0; }
.segBtn.active{
  background:rgba(72,255,204,.18);
  color:#eafff9;
}

/* ===== Tooltip cho nút layer (data-tip) ===== */
.layerGrid { overflow: visible; }

.layerBtn[data-tip]{
  position: relative;
}

.layerBtn[data-tip]:hover::after,
.layerBtn[data-tip]:focus-visible::after{
  content: attr(data-tip);
  white-space: pre;
  position: absolute;
  left: 50%;
  bottom: calc(100% + 10px);
  transform: translateX(-50%);
  z-index: 9999;

  max-width: 220px;
  padding: 8px 10px;
  border-radius: 10px;

  background: rgba(10, 14, 25, 0.95);
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow: 0 10px 30px rgba(0,0,0,0.45);

  font-size: 12px;
  line-height: 1.25;
  color: rgba(255,255,255,0.92);

  pointer-events: none;
}

.layerBtn[data-tip]:hover::before,
.layerBtn[data-tip]:focus-visible::before{
  content: "";
  position: absolute;
  left: 50%;
  bottom: calc(100% + 4px);
  transform: translateX(-50%);
  z-index: 10000;

  width: 10px;
  height: 10px;
  background: rgba(10, 14, 25, 0.95);
  border-left: 1px solid rgba(255,255,255,0.10);
  border-top: 1px solid rgba(255,255,255,0.10);
  transform: translateX(-50%) rotate(45deg);

  pointer-events: none;
}


.uiTooltip{
  position: fixed;
  left: 0;
  top: 0;
  z-index: 999999;

  max-width: 280px;
  padding: 10px 12px;
  border-radius: 12px;

  /* 🌈 nền sáng hơn, xanh dịu */
  background: linear-gradient(
    180deg,
    rgba(30,41,59,.97),
    rgba(17,24,39,.97)
  );

  /* viền rõ hơn */
  border: 1px solid rgba(99,102,241,.45);

  /* bóng nhẹ, không quá gắt */
  box-shadow:
    0 12px 40px rgba(0,0,0,.45),
    0 0 0 1px rgba(99,102,241,.15) inset;

  /* chữ trắng rõ */
  color: #f8fafc;

  font-size: 12.5px;
  line-height: 1.4;
  font-weight: 500;

  white-space: pre-line;
  pointer-events: none;
}

.uiTooltip::after{
  content:"";
  position:absolute;
  left: 50%;
  bottom: -6px;
  transform: translateX(-50%) rotate(45deg);
  width: 10px;
  height: 10px;

  background: rgba(17,24,39,.97);

  border-right: 1px solid rgba(99,102,241,.45);
  border-bottom: 1px solid rgba(99,102,241,.45);
}