/* ==========================================================================
   Đổi màu sản phẩm — giao diện tối, chiếm trọn màn hình.

   VÌ SAO NỀN TỐI VÀ TRUNG TÍNH
     Cả công cụ này xoay quanh việc nhìn màu cho đúng. Giao diện có màu riêng
     mạnh sẽ kéo lệch cảm nhận của mắt về màu sản phẩm ngồi cạnh nó, nên khung
     nền giữ xám trung tính, điểm nhấn cam chỉ dùng cho nút bấm.
   ========================================================================== */

:root {
  --bg:        #0B0D10;
  --bg-2:      #11151A;
  --panel:     #14181D;
  --panel-2:   #1A1F26;
  --line:      #242B34;
  --line-2:    #2E3742;
  --text:      #E6EAF0;
  --muted:     #8A94A3;
  --accent:    #FF7A1A;
  --accent-2:  #FF9445;
  --ok:        #2FBF71;
  --danger:    #E5484D;
  --star:      #F5C518;

  --r:   12px;
  --r-s: 8px;
  --rail-w:  92px;
  --panel-w: 340px;
  --top-h:   58px;
  --strip-h: 104px;

  --sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
          "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }

html, body {
  margin: 0; height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
  overscroll-behavior: none;
}

body { overflow: hidden; }

.hidden { display: none !important; }
.muted  { color: var(--muted); }
.small  { font-size: 12px; }
.tiny   { font-size: 11px; }
.spacer { flex: 1; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 6px; }
::-webkit-scrollbar-track { background: transparent; }

/* ------------------------------------------------------------------ nút */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 9px 14px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-s);
  background: var(--panel-2);
  color: var(--text);
  font: inherit; font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  transition: background .15s, border-color .15s, opacity .15s, transform .08s;
}
.btn:hover:not(:disabled) { background: #222A33; border-color: #3A4553; }
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn:disabled { opacity: .4; cursor: not-allowed; }
.btn-sm { padding: 6px 10px; font-size: 12.5px; }
.btn-block { width: 100%; }
.btn-ghost { background: transparent; border-color: transparent; color: var(--muted); }
.btn-ghost:hover:not(:disabled) { background: var(--panel-2); color: var(--text); }

.btn-primary {
  background: linear-gradient(180deg, var(--accent-2), var(--accent));
  border-color: #C25A0C; color: #1A0E03; font-weight: 650;
}
.btn-primary:hover:not(:disabled) { filter: brightness(1.07); background: linear-gradient(180deg, var(--accent-2), var(--accent)); }

.btn-danger { color: var(--danger); border-color: #4A2226; }
.btn-danger:hover:not(:disabled) { background: #2A1417; }

.ico { font-size: 14px; line-height: 1; }

.pill {
  display: inline-block; min-width: 20px; padding: 1px 6px;
  border-radius: 20px; background: var(--line); color: var(--text);
  font-size: 11px; font-weight: 600; text-align: center;
}

/* ---------------------------------------------------------- ô nhập liệu */

input[type=text], input[type=password], input[type=number], textarea, select {
  width: 100%; padding: 9px 11px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--r-s);
  color: var(--text); font: inherit;
  outline: none;
  transition: border-color .15s;
}
input:focus, textarea:focus, select:focus { border-color: var(--accent); }
input::placeholder, textarea::placeholder { color: #5A6472; }
textarea { resize: vertical; min-height: 42px; }
label { display: block; font-size: 12.5px; color: var(--muted); }
label > input, label > select, label > textarea { margin-top: 5px; color: var(--text); }

/* ================================================================= CỔNG */

.gate {
  position: fixed; inset: 0; z-index: 60;
  display: grid; place-items: center;
  padding: 24px;
  background:
    radial-gradient(900px 500px at 50% -10%, rgba(255,122,26,.13), transparent 65%),
    var(--bg);
}
.gate-card {
  width: 100%; max-width: 380px;
  padding: 32px 28px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: 0 24px 60px rgba(0,0,0,.5);
  text-align: center;
}
.gate-mark {
  width: 54px; height: 54px; margin: 0 auto 16px;
  border-radius: 50%;
  background: conic-gradient(#E5484D, #F5C518, #2FBF71, #1D4ED8, #9B7EBD, #E5484D);
  display: grid; place-items: center;
}
.gate-mark span { width: 22px; height: 22px; border-radius: 50%; background: var(--panel); }
.gate-card h1 { margin: 0 0 4px; font-size: 20px; }
.gate-card > .muted { margin: 0 0 22px; font-size: 13px; }
.gate-form { display: grid; gap: 14px; text-align: left; }
.gate-hint {
  margin: 0; padding: 10px 12px;
  background: rgba(255,122,26,.08);
  border: 1px solid rgba(255,122,26,.25);
  border-radius: var(--r-s);
  font-size: 12.5px; color: #E9C9A8;
}
.gate-error {
  margin: 14px 0 0; padding: 9px 12px;
  background: rgba(229,72,77,.1); border: 1px solid rgba(229,72,77,.3);
  border-radius: var(--r-s); color: #F1A5A7; font-size: 12.5px;
}

/* ============================================================ KHUNG APP */

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

.topbar {
  height: var(--top-h); flex: none;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 14px;
  background: var(--panel);
  border-bottom: 1px solid var(--line);
}
.brand { display: flex; align-items: center; gap: 10px; }
.brand-mark {
  width: 26px; height: 26px; border-radius: 50%;
  background: conic-gradient(#E5484D, #F5C518, #2FBF71, #1D4ED8, #9B7EBD, #E5484D);
  box-shadow: inset 0 0 0 7px var(--panel);
}
.brand strong { display: block; font-size: 14px; line-height: 1.2; }
.brand em { font-style: normal; font-size: 11.5px; color: var(--muted); }
.topbar-actions { display: flex; align-items: center; gap: 4px; }

.layout {
  flex: 1; min-height: 0;
  display: grid;
  grid-template-columns: var(--rail-w) minmax(0, 1fr) var(--panel-w);
}

/* ---------------------------------------------------- cột trái: sản phẩm */

.rail {
  background: var(--panel);
  border-right: 1px solid var(--line);
  padding: 10px 8px;
  overflow-y: auto;
  display: flex; flex-direction: column; gap: 6px;
}
.rail-item {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 12px 4px;
  border: 1px solid transparent; border-radius: var(--r);
  background: transparent; color: var(--muted);
  cursor: pointer; font: inherit; font-size: 11.5px; text-align: center;
  transition: background .15s, color .15s, border-color .15s;
}
.rail-item:hover { background: var(--panel-2); color: var(--text); }
.rail-item.active {
  background: rgba(255,122,26,.12);
  border-color: rgba(255,122,26,.4);
  color: var(--accent-2);
}
.rail-ico { width: 26px; height: 26px; }
.rail-ico svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.6; }
.rail-name { line-height: 1.25; word-break: break-word; }

/* ----------------------------------------------------- giữa: khung ảnh */

.stage {
  position: relative;
  background:
    linear-gradient(45deg, #0E1115 25%, transparent 25%) 0 0/24px 24px,
    linear-gradient(-45deg, #0E1115 25%, transparent 25%) 0 12px/24px 24px,
    var(--bg);
  display: flex; flex-direction: column;
  min-height: 0; padding: 16px;
}

.stage-empty { flex: 1; display: grid; place-items: center; }
.drop {
  width: min(520px, 100%); padding: 46px 30px;
  border: 2px dashed var(--line-2); border-radius: 18px;
  background: rgba(20,24,29,.6);
  text-align: center;
  transition: border-color .15s, background .15s;
  cursor: pointer;
}
.drop:hover, .drop.over { border-color: var(--accent); background: rgba(255,122,26,.06); }
.drop-ico { font-size: 42px; margin-bottom: 10px; opacity: .8; }
.drop h2 { margin: 0 0 6px; font-size: 17px; }
.drop p { margin: 0 0 16px; font-size: 13px; }
.drop-tip { margin-top: 18px !important; font-size: 12px; max-width: 340px; margin-inline: auto; }

.stage-view { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 12px; }

.compare {
  position: relative; flex: 1; min-height: 0;
  border-radius: var(--r); overflow: hidden;
  background: #05070A;
  user-select: none; touch-action: none;
}
.cmp-img {
  position: absolute; inset: 0; margin: auto;
  max-width: 100%; max-height: 100%;
  width: 100%; height: 100%;
  object-fit: contain;
  pointer-events: none;
}
.cmp-after { position: absolute; inset: 0; overflow: hidden; width: 50%; }
.cmp-after .cmp-img { width: auto; }
.cmp-handle {
  position: absolute; top: 0; bottom: 0; left: 50%;
  width: 2px; margin-left: -1px;
  background: rgba(255,255,255,.85);
  cursor: ew-resize;
  box-shadow: 0 0 12px rgba(0,0,0,.6);
}
.cmp-handle span {
  position: absolute; top: 50%; left: 50%;
  width: 34px; height: 34px; margin: -17px 0 0 -17px;
  border-radius: 50%; background: #fff;
  box-shadow: 0 2px 10px rgba(0,0,0,.5);
}
.cmp-handle span::before, .cmp-handle span::after {
  content: ''; position: absolute; top: 12px;
  border: 5px solid transparent;
}
.cmp-handle span::before { left: 4px;  border-right-color: #14181D; }
.cmp-handle span::after  { right: 4px; border-left-color:  #14181D; }
.cmp-tag {
  position: absolute; top: 10px;
  padding: 4px 10px; border-radius: 20px;
  background: rgba(5,7,10,.72); backdrop-filter: blur(6px);
  font-size: 11.5px; font-weight: 600; letter-spacing: .2px;
  pointer-events: none;
}
.cmp-tag-l { left: 10px; color: var(--muted); }
.cmp-tag-r { right: 10px; color: var(--accent-2); }

.stage-bar { flex: none; display: flex; align-items: center; gap: 6px; margin-top: 12px; }

/* ------------------------------------------------- trình khoanh vùng */

/* Hai lớp canvas xếp trùng nhau: lớp dưới là ảnh, lớp trên là màu phủ của các
   vùng đã khoanh. Tách ra để tô lại vùng không phải vẽ lại ảnh mỗi lần. */
.mstack {
  position: relative; flex: 1; min-height: 0;
  display: grid; place-items: center;
  border-radius: var(--r); overflow: hidden; background: #05070A;
}
.mstack canvas {
  position: absolute; max-width: 100%; max-height: 100%;
  width: auto; height: auto;
  image-rendering: auto;
}
#mcOver { cursor: crosshair; touch-action: none; }

.mtools {
  flex: none; display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 8px 10px; margin-bottom: 12px;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--r);
}
.mtools-group { display: flex; gap: 3px; }
.mtool {
  padding: 6px 11px; border: 1px solid var(--line); border-radius: var(--r-s);
  background: var(--bg-2); color: var(--muted);
  font: inherit; font-size: 12.5px; cursor: pointer; transition: all .15s;
}
.mtool:hover { color: var(--text); }
.mtool.active { background: rgba(255,122,26,.14); border-color: rgba(255,122,26,.45); color: var(--accent-2); }

.mrange { display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--muted); white-space: nowrap; }
.mrange input[type=range] { width: 96px; }
.mrange b { min-width: 24px; color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; }

.mhint { flex: none; margin: 10px 0 0; font-size: 12px; text-align: center; }

/* ------------------------------------------------- danh sách vùng chọn */

.regions { display: grid; gap: 5px; margin-bottom: 8px; }
.region {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 9px;
  border: 1px solid var(--line); border-radius: var(--r-s);
  background: var(--bg-2); cursor: pointer;
  transition: border-color .15s, background .15s;
}
.region:hover { border-color: var(--line-2); }
.region.active { border-color: var(--accent); background: rgba(255,122,26,.09); }
.region-dot { width: 20px; height: 20px; flex: none; border-radius: 6px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.2); }
.region-name { flex: 1; min-width: 0; }
.region-name input {
  width: 100%; padding: 3px 6px; font-size: 12.5px;
  background: transparent; border: 1px solid transparent; border-radius: 5px;
}
.region-name input:hover { border-color: var(--line); }
.region-name input:focus { background: var(--bg); border-color: var(--accent); }
.region-meta { font-size: 11px; color: var(--muted); white-space: nowrap; }
.region-px { font-size: 10.5px; color: #5A6472; white-space: nowrap; }
.region-x {
  flex: none; width: 22px; height: 22px; padding: 0;
  border: none; border-radius: 5px; background: transparent;
  color: var(--muted); cursor: pointer; font-size: 13px;
}
.region-x:hover { background: #2A1417; color: var(--danger); }

/* ------------------------------------------------- bộ sưu tập nhiều màu */

.picked { display: grid; gap: 5px; margin-bottom: 10px; }
.pick {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 9px; border: 1px solid var(--line);
  border-radius: var(--r-s); background: var(--bg-2); font-size: 12.5px;
}
.pick-dot { width: 18px; height: 18px; flex: none; border-radius: 5px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.2); }
.pick-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pick-hex { font-family: var(--mono); font-size: 11px; color: var(--muted); }
.picked-empty { font-size: 12.5px; color: #5A6472; font-style: italic; }

.chk { display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--muted); cursor: pointer; }
.chk input { width: auto; }

/* ô màu ở chế độ bộ sưu tập có dấu tích khi đã chọn */
.sw.picked-on { border-color: #fff; }
.sw.picked-on::after {
  content: '✓'; display: grid; place-items: center;
  width: 100%; height: 100%; font-size: 13px; font-weight: 700;
  text-shadow: 0 1px 2px rgba(0,0,0,.6);
}

/* ------------------------------------------------- lưới kết quả bộ sưu tập */

.bgrid {
  flex: 1; min-height: 0; overflow-y: auto;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 12px; align-content: start;
  padding: 2px;
}
.bcard {
  border: 1px solid var(--line); border-radius: var(--r);
  overflow: hidden; background: var(--panel);
}
.bcard.pending { opacity: .45; }
.bcard.failed { border-color: #4A2226; }
.bcard-img { position: relative; aspect-ratio: 1; background: #05070A; cursor: zoom-in; display: grid; place-items: center; }
.bcard-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bcard-img .spinner { width: 30px; height: 30px; border-width: 2px; }
.bcard-foot {
  display: flex; align-items: center; gap: 7px;
  padding: 8px 10px; border-top: 1px solid var(--line); font-size: 12.5px;
}
.bcard-foot .pick-dot { width: 16px; height: 16px; }
.bcard-err { padding: 10px; font-size: 11.5px; color: #F1A5A7; }

.stage-busy {
  position: absolute; inset: 0; z-index: 5;
  display: grid; place-items: center; align-content: center; gap: 10px;
  background: rgba(11,13,16,.86); backdrop-filter: blur(4px);
  text-align: center;
}
.stage-busy p { margin: 0; }
.spinner {
  width: 46px; height: 46px; border-radius: 50%;
  border: 3px solid var(--line-2); border-top-color: var(--accent);
  animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------------------------------------------------- cột phải: điều khiển */

.panel {
  background: var(--panel);
  border-left: 1px solid var(--line);
  display: flex; flex-direction: column;
  min-height: 0;
}
/* Lưới 6 cột: ba chế độ cơ bản chiếm 2 cột mỗi cái (hàng trên), hai chế độ nâng
   cao chiếm 3 cột mỗi cái (hàng dưới) — chia đôi đều nhau mà không cần số lẻ. */
.modes {
  flex: none; display: grid; grid-template-columns: repeat(6, 1fr);
  gap: 4px; padding: 10px; border-bottom: 1px solid var(--line);
}
.modes button { grid-column: span 2; }
.modes button {
  padding: 8px 4px; border: 1px solid var(--line);
  border-radius: var(--r-s); background: var(--bg-2);
  color: var(--muted); font: inherit; font-size: 12.5px; font-weight: 500;
  cursor: pointer; transition: all .15s;
}
.modes button:hover { color: var(--text); }
.modes button.active {
  background: rgba(255,122,26,.14); border-color: rgba(255,122,26,.45); color: var(--accent-2);
}
.modes button.wide { grid-column: span 3; }

.panel-scroll { flex: 1; min-height: 0; overflow-y: auto; padding: 14px; display: grid; gap: 18px; align-content: start; }
.grp h3 {
  margin: 0 0 9px; font-size: 11.5px; font-weight: 650;
  text-transform: uppercase; letter-spacing: .7px; color: var(--muted);
}
.grp h3 .muted { text-transform: none; letter-spacing: 0; font-weight: 400; }
.grp textarea { margin-bottom: 8px; }

.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
  padding: 6px 11px;
  border: 1px solid var(--line); border-radius: 20px;
  background: var(--bg-2); color: var(--muted);
  font: inherit; font-size: 12.5px; cursor: pointer;
  transition: all .15s;
}
.chip:hover { color: var(--text); border-color: var(--line-2); }
.chip.active { background: rgba(255,122,26,.14); border-color: rgba(255,122,26,.45); color: var(--accent-2); }
.chips-empty { font-size: 12.5px; color: #5A6472; font-style: italic; }

/* dải màu lưu sẵn */
.swatches {
  display: grid; grid-template-columns: repeat(8, 1fr);
  gap: 6px; margin-bottom: 12px;
}
.sw {
  aspect-ratio: 1; border-radius: 7px;
  border: 2px solid transparent; box-shadow: inset 0 0 0 1px rgba(255,255,255,.12);
  cursor: pointer; padding: 0;
  transition: transform .1s, border-color .15s;
}
.sw:hover { transform: scale(1.12); }
.sw.active { border-color: #fff; }

/* bộ chọn màu tự do */
.picker { display: grid; gap: 9px; }
#sv { width: 100%; height: 132px; border-radius: var(--r-s); cursor: crosshair; display: block; }
.picker-row { display: flex; align-items: center; gap: 9px; }
.hue {
  flex: 1; -webkit-appearance: none; appearance: none;
  height: 14px; border-radius: 7px; outline: none; cursor: pointer;
  background: linear-gradient(90deg, #f00 0%, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%);
}
.hue::-webkit-slider-thumb {
  -webkit-appearance: none; width: 16px; height: 20px;
  border-radius: 4px; background: #fff; border: 1px solid #333; cursor: grab;
}
.hue::-moz-range-thumb { width: 16px; height: 20px; border-radius: 4px; background: #fff; border: 1px solid #333; }
.preview {
  width: 42px; height: 32px; flex: none;
  border-radius: var(--r-s);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.18);
}
.hex { font-family: var(--mono); text-transform: uppercase; max-width: 108px; }
.cname { flex: 1; }

.panel-foot { flex: none; padding: 12px 14px 14px; border-top: 1px solid var(--line); }
.btn-go { padding: 13px; font-size: 15px; }
.panel-foot p { margin: 7px 0 0; text-align: center; }

/* ------------------------------------------------------- dải lịch sử dưới */

.strip {
  flex: none; height: var(--strip-h);
  background: var(--panel); border-top: 1px solid var(--line);
  overflow-x: auto; overflow-y: hidden;
}
.strip-inner { display: flex; gap: 8px; padding: 10px 12px; height: 100%; align-items: stretch; }
.strip-empty { display: grid; place-items: center; width: 100%; color: #5A6472; font-size: 12.5px; font-style: italic; }
.thumb {
  position: relative; flex: none;
  width: 112px; height: 100%;
  border: 1px solid var(--line); border-radius: var(--r-s);
  overflow: hidden; cursor: pointer; background: #05070A;
  transition: border-color .15s, transform .1s;
}
.thumb:hover { border-color: var(--accent); transform: translateY(-2px); }
.thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.thumb-meta {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 12px 6px 4px;
  background: linear-gradient(transparent, rgba(5,7,10,.92));
  font-size: 10.5px; line-height: 1.3;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.thumb-dot {
  position: absolute; top: 5px; left: 5px;
  width: 12px; height: 12px; border-radius: 50%;
  box-shadow: 0 0 0 1.5px rgba(255,255,255,.5);
}
.thumb-star { position: absolute; top: 3px; right: 5px; color: var(--star); font-size: 13px; text-shadow: 0 1px 3px #000; }

/* =============================================================== MODAL */

.modal { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: 20px; }
.modal-back { position: absolute; inset: 0; background: rgba(5,7,10,.72); backdrop-filter: blur(3px); }
.modal-box {
  position: relative;
  width: min(1080px, 100%); max-height: min(88vh, 900px);
  display: flex; flex-direction: column;
  background: var(--panel); border: 1px solid var(--line);
  border-radius: 16px; box-shadow: 0 30px 80px rgba(0,0,0,.6);
  overflow: hidden;
}
.modal-head {
  flex: none; display: flex; align-items: center; justify-content: space-between;
  padding: 15px 18px; border-bottom: 1px solid var(--line);
}
.modal-head h2 { margin: 0; font-size: 16px; }
.modal-body { flex: 1; min-height: 0; overflow-y: auto; padding: 18px; }

/* quản lý danh mục */
.tabs { display: flex; gap: 5px; margin-bottom: 16px; flex-wrap: wrap; }
.tab {
  padding: 8px 14px; border: 1px solid var(--line); border-radius: 20px;
  background: var(--bg-2); color: var(--muted); font: inherit; font-size: 13px; cursor: pointer;
}
.tab:hover { color: var(--text); }
.tab.active { background: rgba(255,122,26,.14); border-color: rgba(255,122,26,.45); color: var(--accent-2); }

table.grid { width: 100%; border-collapse: collapse; font-size: 13px; }
table.grid th {
  text-align: left; padding: 8px 10px; font-size: 11px; text-transform: uppercase;
  letter-spacing: .6px; color: var(--muted); border-bottom: 1px solid var(--line); font-weight: 600;
}
table.grid td { padding: 7px 10px; border-bottom: 1px solid var(--bg-2); vertical-align: middle; }
table.grid tr:hover td { background: var(--bg-2); }
table.grid input[type=text] { padding: 6px 9px; font-size: 13px; }
table.grid .col-act { width: 92px; text-align: right; white-space: nowrap; }
.dot { display: inline-block; width: 18px; height: 18px; border-radius: 5px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.2); vertical-align: middle; }
.sub-row td { background: rgba(0,0,0,.18); }
.sub-label { padding-left: 26px !important; color: var(--muted); }

.form-row { display: flex; gap: 8px; align-items: flex-end; flex-wrap: wrap; margin-bottom: 14px; }
.form-row > * { flex: 1; min-width: 120px; }
.form-row > .btn { flex: none; }

/* lịch sử dạng lưới */
.hist-tools { display: flex; gap: 8px; align-items: center; margin-bottom: 14px; flex-wrap: wrap; }
.hist-tools input[type=text] { max-width: 240px; }
.hgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 12px; }
.hcard { border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; background: var(--bg-2); }
.hcard-img { position: relative; aspect-ratio: 1; background: #05070A; cursor: zoom-in; }
.hcard-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hcard-body { padding: 9px 10px; font-size: 12px; }
.hcard-body b { display: block; font-size: 12.5px; margin-bottom: 2px; }
.hcard-foot { display: flex; gap: 3px; padding: 6px 7px; border-top: 1px solid var(--line); }
.hcard-foot .btn { padding: 5px 8px; font-size: 12px; }

/* cài đặt */
.set-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; }
.set-note {
  margin-top: 16px; padding: 11px 13px;
  background: var(--bg-2); border: 1px solid var(--line); border-left: 3px solid var(--accent);
  border-radius: var(--r-s); font-size: 12.5px; color: var(--muted); line-height: 1.55;
}

/* ------------------------------------------------------------ lightbox */

.lightbox { position: fixed; inset: 0; z-index: 70; display: grid; place-items: center; background: rgba(3,4,6,.94); padding: 30px; }
.lightbox img { max-width: 100%; max-height: 100%; border-radius: var(--r); }
.lb-close {
  position: absolute; top: 18px; right: 22px;
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--panel-2); border: 1px solid var(--line-2);
  color: var(--text); font-size: 17px; cursor: pointer;
}

/* -------------------------------------------------------------- toasts */

.toasts { position: fixed; right: 16px; bottom: 16px; z-index: 90; display: grid; gap: 8px; justify-items: end; }
.toast {
  padding: 11px 15px; max-width: 380px;
  background: var(--panel-2); border: 1px solid var(--line-2);
  border-left: 3px solid var(--muted);
  border-radius: var(--r-s); font-size: 13px;
  box-shadow: 0 10px 30px rgba(0,0,0,.45);
  animation: slidein .22s ease;
}
.toast.ok   { border-left-color: var(--ok); }
.toast.err  { border-left-color: var(--danger); }
.toast.warn { border-left-color: var(--star); }
@keyframes slidein { from { opacity: 0; transform: translateX(20px); } }

/* ====================================================== màn hình hẹp */

@media (max-width: 1180px) { :root { --panel-w: 300px; --rail-w: 80px; } }

@media (max-width: 900px) {
  .layout { grid-template-columns: 1fr; grid-template-rows: auto minmax(0,1fr) auto; }
  .rail { flex-direction: row; border-right: none; border-bottom: 1px solid var(--line); overflow-x: auto; padding: 8px; }
  .rail-item { flex: none; min-width: 78px; }
  .panel { border-left: none; border-top: 1px solid var(--line); max-height: 46vh; }
  .strip { display: none; }
  .brand em { display: none; }
  .topbar-actions .btn span:not(.ico):not(.pill) { display: none; }
}