/* ============================================================
 * Design Tokens — Web + Extension — APPLE STYLE
 * Nguồn chân lý: bm-manager-apple-style.html
 * Canonical: shared/design-tokens.css → sync via scripts/sync-theme.js
 * Light = :root | Dark = html.dark / body.dark / [data-theme="dark"]
 * ============================================================ */

:root {
  /* ---- Nền & bề mặt (LIGHT) ---- */
  --bg:           #f5f5f7;
  --card:         #ffffff;
  --card-2:       #f2f2f7;
  --card-3:       #e9e9ee;
  --sep:          rgba(0,0,0,.08);
  --sep-strong:   rgba(0,0,0,.13);

  /* ---- Chữ (label scale iOS) ---- */
  --label:        #1d1d1f;
  --label2:       #6e6e73;
  --label3:       #a1a1a6;

  /* ---- Accent ---- */
  --accent:       #007aff;
  --accent-soft:  rgba(0,122,255,.12);
  --accent-text:  #007aff;

  /* ---- Màu hệ thống iOS (cho icon squircle) ---- */
  --blue:    #007aff;
  --green:   #34c759;
  --red:     #ff3b30;
  --orange:  #ff9500;
  --yellow:  #ffcc00;
  --purple:  #af52de;
  --pink:    #ff2d55;
  --teal:    #30b0c7;
  --indigo:  #5856d6;
  --gray:    #8e8e93;

  /* ---- Hiệu ứng ---- */
  --glass:        rgba(255,255,255,.72);
  --glass-brd:    rgba(255,255,255,.5);
  --shadow:       0 1px 2px rgba(0,0,0,.04), 0 8px 24px -10px rgba(0,0,0,.12);
  --shadow-pop:   0 20px 60px -12px rgba(0,0,0,.28);
  --scrim:        rgba(0,0,0,.28);

  /* ---- Hình học ---- */
  --r:            14px;
  --r-btn:        9px;
  --r-card:       16px;
  --r-pill:       999px;

  /* ---- Kích thước layout ---- */
  --h-titlebar:   52px;
  --h-btn:        34px;
  --h-btn-sm:     28px;
  --h-row:        44px;
  --h-statusbar:  50px;
  --w-sidebar:    230px;
  --w-utilpanel:  330px;

  /* ---- Font ---- */
  --ds-font: 'SF Pro Display','SF Pro Text',-apple-system,BlinkMacSystemFont,'Be Vietnam Pro','Segoe UI',Roboto,sans-serif;

  /* ============================================================
   * Alias backwards-compat — không xóa, JSX cũ vẫn ref tên này
   * ============================================================ */
  --bg-page:        var(--bg);
  --surface:        var(--card);
  --surface-1:      var(--card);
  --surface-2:      var(--card-2);
  --surface-3:      var(--card-3);
  --surface-raised: var(--card-2);
  --card-soft:      var(--card-2);
  --border:         var(--sep);
  --border-soft:    var(--sep);
  --border-subtle:  var(--sep);
  --border-strong:  var(--sep-strong);
  --text:           var(--label);
  --text-body:      var(--label);
  --text-primary:   var(--label);
  --text-secondary: var(--label2);
  --text-tertiary:  var(--label3);
  --text-mute:      var(--label2);
  --text-faint:     var(--label3);
  --primary:        var(--accent);
  --primary-600:    var(--accent);
  --primary-700:    #0062cc;
  --primary-hover:  #0062cc;
  --primary-soft:   var(--accent-soft);
  --primary-ring:   rgba(0,122,255,.30);
  --primary-accent: var(--accent);
  --primary-50:     var(--accent-soft);
  --primary-200:    #66adff;
  --brand-700:      var(--card);
  --sidebar-bg:     var(--glass);
  --start:          var(--green);
  --start-soft:     rgba(52,199,89,.16);
  --success-500:    var(--green);   --success-text: #1d8a3f; --success-bg: rgba(52,199,89,.16);
  --warning-500:    var(--orange);  --warning-text: var(--orange); --warning-bg: rgba(255,149,0,.16);
  --danger:         var(--red);     --danger-soft: rgba(255,59,48,.15);
  --danger-500:     var(--red);     --danger-text: var(--red); --danger-bg: rgba(255,59,48,.15);
  --overlay:        var(--scrim);
  --shadow-sm:      0 1px 2px rgba(0,0,0,0.04);
  --shadow-md:      var(--shadow);
  --shadow-lg:      var(--shadow-pop);
  --shadow-card:    var(--shadow);
  --radius:         var(--r);
  --radius-sm:      8px;
  --radius-xs:      6px;
  --r-card-lg:      var(--r-card);
  --h-header:       var(--h-titlebar);
  --h-toolbar:      54px;
  --w-sidebar-mini: 64px;

  /* Icon palette aliases — mockup mới dùng iOS system colors */
  --c-blue:   var(--blue);    --c-blue-bg:   rgba(0,122,255,.13);
  --c-violet: var(--purple);  --c-violet-bg: rgba(175,82,222,.13);
  --c-teal:   var(--teal);    --c-teal-bg:   rgba(48,176,199,.13);
  --c-amber:  var(--orange);  --c-amber-bg:  rgba(255,149,0,.13);
  --c-rose:   var(--pink);    --c-rose-bg:   rgba(255,45,85,.13);
  --c-green:  var(--green);   --c-green-bg:  rgba(52,199,89,.13);
  --c-red:    var(--red);     --c-red-bg:    rgba(255,59,48,.13);
  --c-slate:  var(--gray);    --c-slate-bg:  rgba(142,142,147,.13);
}

html.dark, body.dark, [data-theme="dark"] {
  /* ---- DARK ---- */
  --bg:           #05070b;
  --card:         #1c1c1e;
  --card-2:       #2c2c2e;
  --card-3:       #3a3a3c;
  --sep:          rgba(255,255,255,.1);
  --sep-strong:   rgba(255,255,255,.16);

  --label:        #f5f5f7;
  --label2:       #aeaeb2;
  --label3:       #8e8e93;

  --accent:       #0a84ff;
  --accent-soft:  rgba(10,132,255,.22);
  --accent-text:  #0a84ff;

  --blue:    #0a84ff;
  --green:   #30d158;
  --red:     #ff453a;
  --orange:  #ff9f0a;
  --yellow:  #ffd60a;
  --purple:  #bf5af2;
  --pink:    #ff375f;
  --teal:    #40c8e0;
  --indigo:  #5e5ce6;
  --gray:    #98989d;

  --glass:        rgba(28,28,30,.72);
  --glass-brd:    rgba(255,255,255,.08);
  --shadow:       0 1px 2px rgba(0,0,0,.5), 0 8px 24px -10px rgba(0,0,0,.6);
  --shadow-pop:   0 20px 60px -12px rgba(0,0,0,.7);
  --scrim:        rgba(0,0,0,.5);

  /* alias auto-inherit (chỉ override những cái cần) */
  --start-soft:   rgba(48,209,88,.18);
  --success-text: #30d158;
  --danger-soft:  rgba(255,69,58,.18);
}

/* ============================================================
 * BASE
 * ============================================================ */
html, body { background: var(--bg) !important; color: var(--label); transition: none !important; }
/* Khi toggle theme, gắn class .bm-theme-switching → tắt mọi transition trong ~50ms để không có fade chậm */
html.bm-theme-switching, html.bm-theme-switching *,
html.bm-theme-switching::before, html.bm-theme-switching::after { transition: none !important; animation: none !important; }
body {
  font-family: var(--ds-font);
  font-size: 13px;
  line-height: 1.45;
  letter-spacing: -0.01em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
*:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--primary-ring); }

/* ============================================================
 * APPLE COMPONENT CLASSES — ds-*
 * ============================================================ */

/* ---- Buttons (pill, Apple-style) ---- */
.ds-btn {
  display:inline-flex; align-items:center; gap:7px;
  height:var(--h-btn); padding:0 15px; border-radius:var(--r-btn);
  font:600 13px/1 var(--ds-font); letter-spacing:-0.01em;
  cursor:pointer; border:none; transition:filter .15s, background .15s, color .15s;
  white-space:nowrap;
}
.ds-btn-accent { background:var(--accent); color:#fff; }
.ds-btn-accent:hover { filter:brightness(1.06); }
.ds-btn-tint { background:var(--accent-soft); color:var(--accent); }
.ds-btn-tint:hover { filter:brightness(.97); }
.ds-btn-plain { background:var(--card); color:var(--label); box-shadow:var(--shadow); }
.ds-btn-plain:hover { background:var(--card-2); }
.ds-btn-green, .ds-btn-start { background:var(--green); color:#fff; }
.ds-btn-green:hover, .ds-btn-start:hover { filter:brightness(1.06); }
.ds-btn-danger { background:transparent; color:var(--red); }
.ds-btn-danger:hover { background:var(--danger-soft); }

/* Legacy aliases */
.ds-btn-primary { background:var(--accent); color:#fff; }
.ds-btn-primary:hover { filter:brightness(1.06); }
.ds-btn-primary-soft { background:var(--accent-soft); color:var(--accent); }
.ds-btn-primary-soft:hover { filter:brightness(.97); }
.ds-btn-success { background:var(--green); color:#fff; }
.ds-btn-icon { width:var(--h-btn); height:var(--h-btn); padding:0; justify-content:center; }
.ds-btn-icon svg, .ds-btn-icon i { width:16px; height:16px; font-size:16px; }

/* ---- Icon button (32x32, hover card-3) ---- */
.ds-icon-btn {
  width:32px; height:32px; border-radius:8px; border:none;
  background:transparent; color:var(--label2);
  display:inline-grid; place-items:center; cursor:pointer; transition:background .15s, color .15s;
}
.ds-icon-btn:hover { background:var(--card-3); color:var(--label); }
.ds-icon-btn svg { width:16px; height:16px; }

/* ---- Segmented icon group (.seg trong mockup) ---- */
.ds-seg {
  display:inline-flex; align-items:center; gap:1px;
  background:var(--card-3); border-radius:9px; padding:2px;
}
.ds-seg .ds-icon-btn { width:30px; height:28px; border-radius:7px; }
.ds-seg .ds-icon-btn:hover { background:var(--card); }
.ds-seg .ds-icon-btn.is-danger:hover { color:var(--red); background:var(--card); }

/* ---- Inputs ---- */
.ds-input, .ds-search {
  display:inline-flex; align-items:center; height:var(--h-btn);
  padding:0 12px; border-radius:9px;
  background:var(--card-3); color:var(--label);
  font:400 13px/1 var(--ds-font); border:none; outline:none;
  transition:box-shadow .15s;
}
.ds-input::placeholder, .ds-search input::placeholder { color:var(--label3); }
.ds-input:focus, .ds-search:focus-within { box-shadow:inset 0 0 0 2px var(--accent); }
.ds-search { gap:8px; flex:1; min-width:120px; }
.ds-search input { border:0; outline:none; background:transparent; flex:1; font:400 13px/1 var(--ds-font); color:var(--label); }
.ds-search svg { color:var(--label2); }

/* ---- Stat pill ---- */
.ds-stat-pill {
  display:inline-flex; align-items:center; gap:6px;
  height:var(--h-btn); padding:0 12px; border-radius:9px;
  background:var(--card); box-shadow:var(--shadow);
  font:500 12.5px/1 var(--ds-font); color:var(--label2); white-space:nowrap;
}
.ds-stat-pill b { color:var(--label); font-weight:600; }

/* ---- Badges ---- */
.ds-badge {
  display:inline-flex; align-items:center; gap:5px;
  padding:2px 7px; border-radius:6px;
  background:var(--card-3); color:var(--label2);
  font:500 11px/1.4 var(--ds-font);
}
.ds-badge-ok { background:rgba(52,199,89,.16); color:var(--success-text); }
.ds-badge-ok::before, .ds-badge-dot::before { content:''; display:inline-block; width:6px; height:6px; border-radius:50%; background:currentColor; margin-right:3px; vertical-align:middle; }

/* ---- iOS switch (lớn hơn — 46x28) ---- */
.ds-toggle {
  appearance:none; -webkit-appearance:none;
  width:46px; height:28px; border-radius:var(--r-pill);
  background:var(--card-3); position:relative; cursor:pointer;
  margin:0; flex-shrink:0; transition:background .22s; border:none;
}
.ds-toggle::after {
  content:''; position:absolute; top:2px; left:2px;
  width:24px; height:24px; border-radius:50%;
  background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.25);
  transition:transform .22s;
}
.ds-toggle:checked { background:var(--green); }
.ds-toggle:checked::after { transform:translateX(18px); }

/* ---- Icon squircle (.sq mockup) — Ô bo tròn màu hệ thống iOS, glyph trắng ---- */
.ds-sq {
  display:inline-grid; place-items:center;
  width:26px; height:26px; border-radius:7px;
  background:var(--gray); color:#fff;
  flex-shrink:0; box-shadow:0 1px 1.5px rgba(0,0,0,.12);
}
.ds-sq svg { width:15px; height:15px; stroke:#fff; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.ds-sq.is-blue   { background:var(--blue); }
.ds-sq.is-green  { background:var(--green); }
.ds-sq.is-orange { background:var(--orange); }
.ds-sq.is-red    { background:var(--red); }
.ds-sq.is-purple { background:var(--purple); }
.ds-sq.is-pink   { background:var(--pink); }
.ds-sq.is-teal   { background:var(--teal); }
.ds-sq.is-indigo { background:var(--indigo); }
.ds-sq.is-yellow { background:var(--yellow); color:#000; }
.ds-sq.is-gray   { background:var(--gray); }

/* ---- Card ---- */
.ds-card { background:var(--card); border-radius:var(--r-card); box-shadow:var(--shadow); padding:14px; }

/* ---- Titlebar — solid bg (backdrop-filter không stable với fixed/transform) ---- */
.ds-titlebar, .ds-header {
  height:var(--h-titlebar); display:flex; align-items:center; gap:13px;
  padding:0 18px;
  background:#ffffff;
  border-bottom:1px solid var(--sep);
  color:var(--label);
  position:relative; z-index:5;
}
html.dark .ds-titlebar, html.dark .ds-header,
[data-theme="dark"] .ds-titlebar, [data-theme="dark"] .ds-header,
body.dark .ds-titlebar, body.dark .ds-header { background:#16161a; }
.ds-titlebar-spacer, .ds-header-spacer { flex:1; }

/* Brand block */
.ds-brand { display:flex; align-items:center; gap:10px; min-width:225px; }
.ds-brand-logo {
  width:29px; height:29px; border-radius:8px;
  display:grid; place-items:center; color:#fff;
  background:linear-gradient(160deg, var(--blue), var(--indigo));
}
.ds-brand-name { font:600 15px/1 var(--ds-font); letter-spacing:-.02em; color:var(--label); }

/* Header icon buttons (chia sẻ .ds-icon-btn) — alias */
.ds-header-icon { width:32px; height:32px; border-radius:8px; border:none; background:transparent; color:var(--label2); display:inline-grid; place-items:center; cursor:pointer; transition:background .15s, color .15s; }
.ds-header-icon:hover { background:var(--card-3); color:var(--label); }
.ds-header-icon i, .ds-header-icon svg { font-size:16px; width:16px; height:16px; }
.ds-header-logo { width:29px; height:29px; border-radius:8px; display:inline-grid; place-items:center; color:#fff; background:linear-gradient(160deg, var(--blue), var(--indigo)); }
.ds-header-title { font:600 15px/1 var(--ds-font); letter-spacing:-.02em; color:var(--label); }
.ds-header-version { font:500 11px/1 var(--ds-font); padding:2px 7px; border-radius:6px; background:var(--card-3); color:var(--label2); }
.ds-header-divider { width:1px; height:20px; background:var(--sep); margin:0 4px; align-self:center; }

/* User chip (.acct mockup) */
.ds-user-chip, .ds-acct {
  display:inline-flex; align-items:center; gap:9px;
  padding:4px 5px 4px 11px; border-radius:10px; cursor:pointer;
  background:transparent; border:none;
  transition:background .15s;
}
.ds-user-chip:hover, .ds-acct:hover { background:var(--card-3); }
.ds-user-chip .nm, .ds-acct .n { font:600 12.5px/1.2 var(--ds-font); color:var(--label); }
.ds-user-chip .plan, .ds-acct .p { font:400 11px/1.2 var(--ds-font); color:var(--label2); }
.ds-avatar, .ds-user-chip .av, .ds-acct .av {
  width:29px; height:29px; border-radius:50%;
  display:grid; place-items:center; color:#fff; font:600 12px/1 var(--ds-font);
  background:linear-gradient(135deg, var(--green), var(--teal));
}

/* Legacy .ds-header .user-card support */
.ds-header .user-card { display:inline-flex; align-items:center; gap:9px; padding:4px 5px 4px 11px; border-radius:10px; background:transparent; cursor:pointer; transition:background .15s; }
.ds-header .user-card:hover { background:var(--card-3); }
.ds-header .user-card .user-avatar { width:29px; height:29px; border-radius:50%; display:inline-grid; place-items:center; color:#fff; font:600 12px/1 var(--ds-font); background:linear-gradient(135deg, var(--green), var(--teal)); border:0; }
.ds-header .user-card .user-info .nm { font:600 12.5px/1.2 var(--ds-font); color:var(--label); }
.ds-header .user-card .user-info .uid { font:400 11px/1.2 var(--ds-font); color:var(--label2); }

/* ---- Sidebar nav item (Apple style) ---- */
.ds-menu-item {
  display:flex; align-items:center; gap:11px;
  padding:6px 9px; margin:1px 0; border-radius:9px;
  color:#86868b; font:550 13px/1.3 var(--ds-font);
  cursor:pointer; transition:background .12s, color .12s;
  border:none; background:transparent;
}
.ds-menu-item:hover { background:var(--card-3); color:#2d2d30; }
html.dark .ds-menu-item, [data-theme="dark"] .ds-menu-item, body.dark .ds-menu-item { color:#b8b9bd; }
html.dark .ds-menu-item:hover, [data-theme="dark"] .ds-menu-item:hover, body.dark .ds-menu-item:hover { color:#f0f0f3; }
.ds-menu-item.is-active { background:var(--accent-soft); color:var(--accent); }
.ds-menu-item.is-active .lbl, .ds-menu-item.is-active .ds-menu-label { color:var(--accent); font-weight:600; }
.ds-menu-item i, .ds-menu-item .ds-menu-icon {
  width:26px; height:26px; flex:0 0 26px; border-radius:7px;
  display:inline-grid; place-items:center;
  background:var(--gray); color:#fff;
  box-shadow:0 1px 1.5px rgba(0,0,0,.12);
  font-size:14px;
}
.ds-section-label { font:600 11px/1 var(--ds-font); letter-spacing:.02em; text-transform:uppercase; color:var(--label3); padding:12px 10px 5px; }

/* ---- Banner (notice, accent-soft) ---- */
.ds-banner {
  display:flex; align-items:center; gap:10px;
  padding:10px 14px; border-radius:12px;
  background:var(--accent-soft); color:var(--label);
  font:400 12.5px/1.4 var(--ds-font);
}
.ds-banner svg { color:var(--accent); flex-shrink:0; }
.ds-banner b { font-weight:600; }
.ds-banner-end { margin-left:auto; display:flex; align-items:center; gap:4px; }

/* ---- Status bar ---- */
.ds-statusbar {
  height:var(--h-statusbar); display:flex; align-items:center; gap:18px;
  padding:0 14px; font:400 12px/1 var(--ds-font); color:var(--label2);
  background:transparent;
}
.ds-statusbar b { color:var(--label); font-weight:600; }
.ds-statusbar-vsep { width:1px; height:20px; background:var(--sep-strong); }

/* ---- Tooltip ---- */
.ds-tip { position:relative; }
.ds-tip::after {
  content:attr(data-tip); position:absolute; bottom:calc(100% + 6px); left:50%;
  transform:translateX(-50%);
  background:rgba(0,0,0,0.85); color:#fff;
  padding:4px 8px; border-radius:6px;
  font:500 11px/1.2 var(--ds-font); white-space:nowrap;
  opacity:0; pointer-events:none; transition:opacity .15s; z-index:1000;
}
/* Chỉ hiện khi có data-tip. Nút chỉ đặt title (không data-tip) → tránh hộp rỗng nền đen
   hiện ra như "chấm đen" lúc rê chuột; vẫn còn tooltip mặc định của trình duyệt từ title. */
.ds-tip[data-tip]:hover::after { opacity:1; }

/* ---- Empty state ---- */
.ds-empty { display:flex; flex-direction:column; align-items:center; justify-content:center; padding:32px 24px; gap:15px; }
.ds-empty-avatar { width:88px; height:88px; border-radius:50%; background:linear-gradient(135deg,var(--yellow),var(--red)); position:relative; box-shadow:0 8px 24px -8px rgba(0,0,0,.3); }
.ds-empty-check { position:absolute; right:0; bottom:2px; width:24px; height:24px; border-radius:50%; background:var(--green); display:grid; place-items:center; color:#fff; border:3px solid var(--card); }
.ds-empty-title { font:600 18px/1.3 var(--ds-font); letter-spacing:-.02em; color:var(--label); }
.ds-empty-verified { display:inline-flex; align-items:center; gap:6px; height:28px; padding:0 13px; border-radius:var(--r-pill); background:rgba(52,199,89,.15); color:var(--success-text); font:600 12px/1 var(--ds-font); }

/* ============================================================
 * EMBEDDED MODE
 * ============================================================ */
html.bm-embedded body { margin:0 !important; padding:0 !important; min-height:100vh; background:var(--bg); }
html.bm-embedded #ds-header, html.bm-embedded header.ds-header, html.bm-embedded .ds-header { display:none !important; }
html.bm-embedded header.top { margin-top:0 !important; }
html.bm-embedded .app, html.bm-embedded .main { border:0 !important; box-shadow:none !important; border-radius:0 !important; }
html.bm-embedded #clone-theme { display:none !important; }

/* ============================================================
 * EXTENSION POLISH — map mockup vào selector của BmManager app.js
 * ============================================================ */

/* Sidebar — solid bg (parent có transform → backdrop-filter glass không hoạt động đúng).
   Light: trắng nhẹ. Dark: xám đen ~ composed của glass-over-pure-black trong mockup. */
.sidebar-bg {
  background: #ffffff !important;
  border-right:1px solid var(--sep) !important;
}
html.dark .sidebar-bg, [data-theme="dark"] .sidebar-bg, body.dark .sidebar-bg {
  background: #16161a !important;
}

/* Toolbar (.top tương ứng .toolbar mockup) */
.top {
  height:auto; min-height:54px; background:transparent;
  border-bottom:1px solid var(--sep);
  padding:10px 14px; display:flex; align-items:center; gap:8px;
  flex-wrap:wrap;
}
.top .topbar-divider, .top .topbar-divider-soft, .top .topbar-divider-strong { display:none !important; }

/* Cluster icon buttons trong topbar-group → giống .seg mockup */
.top .topbar-group {
  display:inline-flex; align-items:center; gap:1px;
  background:var(--card-3); border-radius:9px; padding:2px;
}
/* Group có button .btn (Tạo BM/Nhận link) → không cluster, vẫn flex thường */
.top .topbar-group:has(> .btn:not(.btn-pill):not(.btn-ic)) {
  background:transparent; padding:0; gap:8px;
}
/* Group chỉ có 1 button start → không cluster */
.top .topbar-group:first-child { background:transparent; padding:0; }

/* Icon buttons trong toolbar — kiểu segmented */
.top .btn-pill, .top .btn.btn-ic {
  width:30px !important; height:28px !important; padding:0 !important;
  border:none !important;
  background:transparent !important;
  color:var(--label2) !important;
  border-radius:7px !important;
  display:inline-flex !important; align-items:center; justify-content:center;
  transition:background .15s, color .15s; box-shadow:none !important;
}
.top .btn-pill svg, .top .btn.btn-ic svg { width:16px !important; height:16px !important; color:inherit !important; stroke:currentColor !important; fill:none !important; stroke-width:1.9 !important; }
.top .btn-pill:hover, .top .btn.btn-ic:hover { background:var(--card) !important; color:var(--label) !important; }

/* "Tạo BM" green tint, "Nhận link BM" blue tint per mockup */
.top .btn.btn-tint, .top .btn.btn-tint-green, .top .btn.btn-tint-blue {
  height:34px !important; padding:0 15px !important; border-radius:9px !important;
  font:600 13px/1 var(--ds-font) !important; letter-spacing:-0.01em !important;
  border:none !important; box-shadow:none !important;
  display:inline-flex !important; align-items:center; gap:7px;
}
.top .btn.btn-tint-green { background:var(--green) !important; color:#fff !important; }
.top .btn.btn-tint-green:hover { filter:brightness(1.06); }
.top .btn.btn-tint-blue {
  background:var(--accent-soft) !important;
  color:var(--accent) !important;
  border:1px solid rgba(10,132,255,.35) !important;
}
.top .btn.btn-tint-blue:hover { background:rgba(10,132,255,.30) !important; }
html:not(.dark) .top .btn.btn-tint-blue, html:not([data-theme="dark"]) .top .btn.btn-tint-blue {
  border-color: rgba(0,122,255,.28) !important;
}

/* Mix dropdown — plain card style */
.top .mix-drop {
  display:inline-flex; align-items:center; gap:6px;
  height:34px; padding:0 13px; border-radius:9px;
  background:var(--card); color:var(--label); box-shadow:var(--shadow);
  font:600 13px/1 var(--ds-font); cursor:pointer; border:none;
}
.top .mix-drop:hover { background:var(--card-2); }

/* User card trong toolbar (top-right): pill nhẹ */
.top .user-card {
  display:inline-flex; align-items:center; gap:9px;
  padding:4px 5px 4px 11px; border-radius:10px;
  background:transparent; cursor:pointer;
}
.top .user-card:hover { background:var(--card-3); }
/* panel-fb dời lên toolbar — bỏ layout cột dọc (cao 72px, border, margin nút 70px) cho vừa hàng toolbar */
.top .panel-fb { height:auto; flex:0 0 auto; margin-left:auto; border-bottom:none; padding:4px 8px; cursor:default; background:transparent; border-radius:10px; gap:9px; }
.top .panel-fb:hover { background:var(--card-3); }
.top .panel-fb .panel-fb-btn:first-of-type { margin-left:6px !important; }
.top .user-card .user-avatar { width:29px; height:29px; border-radius:50%; background:linear-gradient(135deg,#34c759,#30b0c7); color:#fff; display:inline-grid; place-items:center; font:600 12px/1 var(--ds-font); }
.top .user-card .nm { font:600 12.5px/1.2 var(--ds-font); color:var(--label); }
.top .user-card .uid { font:400 11px/1.2 var(--ds-font); color:var(--label2); }
.top .user-actions { display:inline-flex; gap:2px; }
.top .user-actions .user-swap {
  width:32px; height:32px; border-radius:8px; border:none;
  background:transparent; color:var(--label2); cursor:pointer;
  display:inline-grid; place-items:center;
}
.top .user-actions .user-swap:hover { background:var(--card-3); color:var(--label); }

/* Bọc cluster icon: nếu app.js gom icons vào 1 wrapper, dùng class .ds-seg.
   Còn để mockup-feel ngay khi chưa có wrapper — toolbar tổng thể ở trên cũng OK */

.top #btn-clear-data, .top .btn-pill.is-danger { color:var(--label2) !important; }
.top #btn-clear-data:hover, .top .btn-pill.is-danger:hover { background:var(--card) !important; color:var(--red) !important; }

/* Bắt đầu = green Apple */
.top #btn-start, .btn.btn-start {
  background:var(--green) !important; color:#fff !important;
  border:none !important; border-radius:9px !important; height:34px !important;
  font:600 13px/1 var(--ds-font) !important;
}
.top #btn-start:hover, .btn.btn-start:hover { filter:brightness(1.06); }

/* Primary (Tạo BM, Reload) — accent xanh iOS */
.topbar-group .btn-primary, .btn.btn-primary, #btn-add, #util-empty-add, .dge-cta, .bm-update-banner .bm-update-reload {
  background:var(--accent) !important; color:#fff !important;
  border:none !important; box-shadow:none !important;
  border-radius:9px !important; height:34px;
  font:600 13px/1 var(--ds-font);
}
.topbar-group .btn-primary:hover, .btn.btn-primary:hover, #btn-add:hover, #util-empty-add:hover, .dge-cta:hover, .bm-update-banner .bm-update-reload:hover {
  filter:brightness(1.06);
}

/* Tinted (Nhận link BM) */
.btn.btn-primary-soft {
  background:var(--accent-soft) !important; color:var(--accent) !important;
  border:none !important; border-radius:9px !important;
}
.btn.btn-primary-soft:hover { filter:brightness(.97); }

/* Search box trong toolbar */
.top .search, .top .ds-search, .top input[type="search"] {
  background:var(--card-3) !important; border:none !important;
  border-radius:9px !important; height:34px;
  font:400 13px/1 var(--ds-font); color:var(--label);
}

/* Luồng / Delay pill */
.top .toolbar-num {
  display:inline-flex; align-items:center; gap:6px;
  height:34px; padding:0 12px; border-radius:9px;
  background:var(--card); box-shadow:var(--shadow); border:none;
}
.top .toolbar-num label { font:500 12.5px/1 var(--ds-font); color:var(--label2); }
.top .toolbar-num input[type="number"] {
  width:30px; height:22px; padding:0; border:0; background:transparent;
  color:var(--label); font:600 13px/1 var(--ds-font); text-align:center; outline:none;
  appearance:textfield; -moz-appearance:textfield;
}
.top .toolbar-num input::-webkit-outer-spin-button, .top .toolbar-num input::-webkit-inner-spin-button { -webkit-appearance:none; margin:0; }

/* Notice banner cập nhật BM */
.bm-update-banner {
  display:flex; align-items:center; gap:8px;
  margin:10px 16px 0; padding:4px 12px; border-radius:9px;
  border:none; background:var(--accent-soft); color:var(--label);
  font:400 11.5px/1.3 var(--ds-font); box-sizing:border-box;
  min-height:28px;
}
.bm-update-banner[hidden] { display:none !important; }
.bm-update-banner .bm-update-ic { flex-shrink:0; color:var(--accent); }
.bm-update-banner .bm-update-text { flex:1; min-width:0; color:var(--label); }
.bm-update-banner .bm-update-text b { font-weight:600; color:var(--label); }
.bm-update-banner .bm-update-reload {
  display:inline-flex; align-items:center; gap:5px;
  height:28px; padding:0 11px;
  background:var(--accent-soft) !important; color:var(--accent) !important;
  border:none !important; border-radius:9px !important;
  font:600 12px/1 var(--ds-font); cursor:pointer;
}
.bm-update-banner .bm-update-reload:hover { filter:brightness(.97); }
.bm-update-banner .bm-update-reload svg { width:14px; height:14px; }
.bm-update-banner .bm-update-close {
  width:28px; height:28px; display:inline-flex; align-items:center; justify-content:center;
  background:transparent; border:0; cursor:pointer; color:var(--label3); border-radius:7px;
}
.bm-update-banner .bm-update-close:hover { background:var(--card-3); color:var(--label); }

/* ---- Table — Apple card 16px ---- */
.tbl-wrap {
  padding:0 !important;
  margin:12px 16px 0 !important;
  background:var(--card) !important;
  border:none !important;
  border-radius:16px !important;
  box-shadow:var(--shadow) !important;
  overflow-x:auto !important;
  overflow-y:auto !important;
}
.tbl-wrap thead { position:sticky !important; top:0 !important; z-index:5 !important; background-color:var(--card) !important; }
.tbl-wrap thead tr { background-color:var(--card) !important; }
.tbl-wrap thead th {
  height:44px; padding:0 16px;
  font:600 12px/1 var(--ds-font); color:var(--label2);
  letter-spacing:.4px;
  background-color:var(--card) !important;
  background-image:none !important;
  border-bottom:1px solid var(--sep);
  text-align:left; white-space:nowrap; position:sticky !important; top:0 !important;
  z-index:5 !important;
  text-transform:uppercase !important;
}
.tbl-wrap thead th:not(:last-child)::after { content:none !important; }
.tbl-wrap thead th.s-asc, .tbl-wrap thead th.s-desc { color:var(--accent) !important; }
.tbl-wrap thead th .sort { display:none !important; }
.tbl-wrap thead th.s-asc .sort, .tbl-wrap thead th.s-desc .sort {
  display:inline-block !important; width:12px; height:12px; margin-left:5px; font-size:0; vertical-align:middle;
  background-repeat:no-repeat; background-position:center; background-size:12px 12px;
}
.tbl-wrap thead th.s-asc .sort { background-image:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23007aff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 19V5'/%3E%3Cpath d='M5 12l7-7 7 7'/%3E%3C/svg%3E"); }
.tbl-wrap thead th.s-desc .sort { background-image:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23007aff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v14'/%3E%3Cpath d='M19 12l-7 7-7-7'/%3E%3C/svg%3E"); }
.tbl-wrap tbody td { color:var(--label); border-bottom:1px solid var(--sep); padding:0 16px; background:var(--card); font-size:14px !important; font-weight:400 !important; }
.tbl-wrap tbody td.muted-c { font-size:14.5px !important; }
.tbl-wrap tbody td .cell-acc .name,
.tbl-wrap tbody td .cell-acc .name * { font-size:14.5px !important; font-weight:600 !important; }
.tbl-wrap tbody td .cell-acc .uid,
.tbl-wrap tbody td .cell-acc .uid * { font-size:12px !important; font-weight:400 !important; color:var(--label2) !important; }
.tbl-wrap tbody td .ap-pill { font-size:14px !important; font-weight:400 !important; color:var(--label) !important; }
/* Trạng thái — 12px / 450 / giữ color theo status (live/die) */
.tbl-wrap tbody td .acp-pill { font-size:12px !important; font-weight:450 !important; }
/* BM XMDN — 12.5px / 550 / giữ color (green verified / amber pending / gray none) */
.tbl-wrap tbody td .xmdn { font-size:12.5px !important; font-weight:550 !important; }
/* Giữ nguyên app.css: .bm-appeal-pill 12.5px/500, .proc-badge 11px/700, .proc-hint 13px/400 */
.tbl-wrap tbody tr:hover td { background:var(--card-2); }
.tbl-wrap tbody tr.row-selected td { background:var(--accent-soft); }

/* SPEC: bảng cuộn ngang, header thẳng hàng với body, KHÔNG ép co lệch chữ */
.tbl-wrap table {
  border-collapse:collapse !important;
  width:max-content !important; min-width:100% !important;
  table-layout:auto !important;
}
.tbl-wrap th, .tbl-wrap td {
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  min-width:90px !important;
  box-sizing:border-box !important;
}
/* Empty state row — KHÔNG ép min-width/overflow để hiển thị đủ empty state */
.tbl-wrap tbody tr.dg-empty-row td {
  white-space:normal !important; overflow:visible !important;
  min-width:0 !important; width:auto !important;
  padding:0 !important; border:none !important;
  position:static !important;
}
.tbl-wrap tbody tr.dg-empty-row td:nth-child(n) {
  position:static !important; left:auto !important; right:auto !important;
  box-shadow:none !important;
}
/* Sticky-LEFT 4 cột đầu (Checkbox, STT, Trạng thái, Tài khoản) khi scroll ngang */
.tbl-wrap th:nth-child(1), .tbl-wrap td:nth-child(1) {
  min-width:36px !important; width:36px;
  position:sticky !important; left:0 !important; z-index:3;
  background-color:var(--card) !important;
}
.tbl-wrap th:nth-child(2), .tbl-wrap td:nth-child(2) {
  min-width:44px !important; width:44px;
  position:sticky !important; left:36px !important; z-index:3;
  background-color:var(--card) !important;
}
.tbl-wrap th:nth-child(3), .tbl-wrap td:nth-child(3) {
  min-width:130px !important; width:130px;
  position:sticky !important; left:80px !important; z-index:3;
  background-color:var(--card) !important;
}
.tbl-wrap th:nth-child(4), .tbl-wrap td:nth-child(4) {
  min-width:220px !important; width:220px;
  position:sticky !important; left:210px !important; z-index:3;
  background-color:var(--card) !important;
  box-shadow:4px 0 8px -4px rgba(0,0,0,.15);
}
/* Header pin cols cao hơn body */
.tbl-wrap thead th:nth-child(1),
.tbl-wrap thead th:nth-child(2),
.tbl-wrap thead th:nth-child(3),
.tbl-wrap thead th:nth-child(4) { z-index:6 !important; }
/* Hover row → cập nhật bg pin cols */
.tbl-wrap tbody tr:hover td:nth-child(1),
.tbl-wrap tbody tr:hover td:nth-child(2),
.tbl-wrap tbody tr:hover td:nth-child(3),
.tbl-wrap tbody tr:hover td:nth-child(4) { background-color:var(--card-2) !important; }
/* Row selected → pin cols cùng màu */
.tbl-wrap tbody tr.row-selected td:nth-child(1),
.tbl-wrap tbody tr.row-selected td:nth-child(2),
.tbl-wrap tbody tr.row-selected td:nth-child(3),
.tbl-wrap tbody tr.row-selected td:nth-child(4) { background-color:#e8f0fe !important; }
html.dark .tbl-wrap tbody tr.row-selected td:nth-child(1),
html.dark .tbl-wrap tbody tr.row-selected td:nth-child(2),
html.dark .tbl-wrap tbody tr.row-selected td:nth-child(3),
html.dark .tbl-wrap tbody tr.row-selected td:nth-child(4),
[data-theme="dark"] .tbl-wrap tbody tr.row-selected td:nth-child(1),
[data-theme="dark"] .tbl-wrap tbody tr.row-selected td:nth-child(2),
[data-theme="dark"] .tbl-wrap tbody tr.row-selected td:nth-child(3),
[data-theme="dark"] .tbl-wrap tbody tr.row-selected td:nth-child(4) { background-color:#363f56 !important; }
/* Cột Tiến trình (process) rộng hơn vì có icons + label */
.tbl-wrap th[data-sk="process"], .tbl-wrap td.col-process,
.tbl-wrap th.col-pinned-right, .tbl-wrap td.col-pinned-right {
  min-width:160px !important;
}

/* Cột pin Tiến trình — bg solid TUYỆT ĐỐI, không trong suốt + nằm trên content khác */
.tbl-wrap .col-pinned-right, .col-pinned-right,
.tbl-wrap td.col-pinned-right, .tbl-wrap th.col-pinned-right,
.tbl-wrap th.col-process-th, .tbl-wrap td.col-process {
  background-color:var(--card) !important;
  background-image:none !important;
  border-left:1px solid var(--sep) !important;
  box-shadow:-4px 0 8px -4px rgba(0,0,0,.15) !important;
  border-radius:0 !important;
  position:sticky !important; right:0 !important;
  z-index:3 !important;
}
/* Row selected → TẤT CẢ td cùng solid color đồng bộ (kể cả pinned), không dùng rgba alpha */
.tbl-wrap tbody tr.row-selected td,
.tbl-wrap tbody tr.selected td { background-color:#e8f0fe !important; background-image:none !important; }
html.dark .tbl-wrap tbody tr.row-selected td,
html.dark .tbl-wrap tbody tr.selected td,
[data-theme="dark"] .tbl-wrap tbody tr.row-selected td,
[data-theme="dark"] .tbl-wrap tbody tr.selected td,
body.dark .tbl-wrap tbody tr.row-selected td,
body.dark .tbl-wrap tbody tr.selected td { background-color:#363f56 !important; background-image:none !important; }
/* Tắt bg trên <tr> để không bị 2 layer chồng nhau */
.tbl-wrap tbody tr.row-selected,
.tbl-wrap tbody tr.selected,
html.dark .tbl-wrap tbody tr.row-selected,
html.dark .tbl-wrap tbody tr.selected,
[data-theme="dark"] .tbl-wrap tbody tr.row-selected,
[data-theme="dark"] .tbl-wrap tbody tr.selected { background:transparent !important; }
/* Row hover → pinned đổi card-2 khớp row */
.tbl-wrap tbody tr:hover td.col-process,
.tbl-wrap tbody tr:hover td.col-pinned-right { background-color:var(--card-2) !important; }
/* Header pin Tiến trình — CÙNG MÀU với header khác (--card), solid + sticky */
.tbl-wrap thead th.col-pinned-right,
.tbl-wrap thead th.col-process-th,
.tbl-wrap thead tr th.col-pinned-right,
.tbl-wrap thead tr th.col-process-th {
  background-color:var(--card) !important;
  background-image:none !important;
  position:sticky !important; right:0 !important; top:0 !important;
  z-index:6 !important;
  box-shadow:-4px 0 8px -4px rgba(0,0,0,.20) !important;
  isolation:isolate;
}
.tbl-wrap tbody tr:hover td.col-pinned-right,
.tbl-wrap tbody tr:hover td.col-process {
  background-color:var(--card-2) !important;
}

/* ============================================================
 * Panel phải — card frosted, items dạng list với separator mảnh
 * ============================================================ */
.panel {
  background:var(--card) !important;
  border-left:1px solid var(--sep);
  padding:0 !important;
  display:flex; flex-direction:column;
  /* Thu/mở tức thì: animate width buộc trình duyệt reflow + vẽ lại vùng bảng mỗi khung hình
     → giật nặng trên máy yếu (side-by-side bắt buộc đổi layout, không animate mượt thuần CSS được). */
  transition: none !important;
}
.panel-head {
  display:flex; align-items:center; gap:11px;
  padding:12px 15px; border:none; border-bottom:1px solid var(--sep);
  background:var(--card); border-radius:var(--r-card) var(--r-card) 0 0;
  height:auto; box-sizing:border-box;
}
aside.panel .panel-list,
.panel-right .panel-list {
  flex:1; overflow-y:auto;
  padding:4px 8px 10px !important;
  background:transparent !important;
  background-image:none !important;
  border-radius:0 0 var(--r-card) var(--r-card);
  box-shadow:none !important;
  margin:0;
}
html.dark aside.panel .panel-list,
[data-theme="dark"] aside.panel .panel-list { background:transparent !important; }

/* SPEC: items LÀ THẺ riêng có viền, cách nhau gap 6px (vừa) */
.panel-list {
  display:flex !important; flex-direction:column !important; gap:6px !important;
  padding:6px 10px 12px !important;
  overflow-y:auto;
}
/* Panel bg ngả xanh nhẹ rõ thấy; dark giữ card */
.panel-right, aside.panel { background: #f4f5f7 !important; background-image: none !important; }
html.dark .panel-right, html.dark aside.panel,
[data-theme="dark"] .panel-right, [data-theme="dark"] aside.panel { background: #05070b !important; background-image: none !important; }

.panel-list .util {
  background:#ffffff !important;
  border:1px solid rgba(20,70,140,.12) !important;
  border-radius:12px !important; padding:9px !important;
  display:flex !important; align-items:center; gap:10px;
  box-shadow:0 1px 2px rgba(20,70,140,.05), 0 1px 4px -1px rgba(20,70,140,.08) !important;
  backdrop-filter:none !important;
  position:relative; transition:border-color .12s, background .12s, box-shadow .12s;
  cursor:pointer;
  margin:0 !important;
}
html.dark .panel-list .util,
[data-theme="dark"] .panel-list .util {
  background: #1c1c1e !important;
  border:1px solid rgba(255,255,255,.08) !important;
  box-shadow: none !important;
}
html.dark .panel-list .util:hover,
[data-theme="dark"] .panel-list .util:hover {
  border-color: rgba(24,119,242,.5) !important;
}
.panel-list .util + .util { box-shadow:none !important; }
.panel-list .util:hover {
  border-color: color-mix(in srgb, #1877f2 50%, rgba(20,70,140,.09)) !important;
}
html.dark .panel-list .util:hover,
[data-theme="dark"] .panel-list .util:hover {
  border-color: color-mix(in srgb, #1877f2 50%, rgba(255,255,255,.08)) !important;
}
.panel-list .util.open { background:#ffffff !important; border-radius:12px 12px 0 0 !important; }

/* Item has-config: card ngoài đồng bộ với items thường */
.panel-list .util.has-config {
  display:block !important; padding:0 !important;
  background:#ffffff !important;
  border:1px solid rgba(20,70,140,.09) !important;
  border-radius:12px !important; overflow:hidden;
  box-shadow:none !important;
}
html.dark .panel-list .util.has-config,
[data-theme="dark"] .panel-list .util.has-config {
  background:#1c1c1e !important;
  border:1px solid rgba(255,255,255,.08) !important;
}
html.dark .panel-list .util.has-config:hover,
[data-theme="dark"] .panel-list .util.has-config:hover {
  border-color: rgba(24,119,242,.5) !important;
}
.panel-list .util.has-config:hover {
  border-color: color-mix(in srgb, #1877f2 35%, rgba(20,70,140,.09)) !important;
}
html.dark .panel-list .util.has-config:hover,
[data-theme="dark"] .panel-list .util.has-config:hover {
  border-color: color-mix(in srgb, #1877f2 35%, rgba(255,255,255,.08)) !important;
}
.panel-list .util.has-config .util-row {
  display:flex !important; align-items:center !important; gap:10px !important;
  padding:9px !important; box-sizing:border-box; width:100%;
  border-radius:12px !important;
  background:transparent !important;
}
/* Khi mở config panel — GIỮ NGUYÊN bg + border như item thường, không đổi màu */
html .panel-list .util.cfg-open,
body .panel-list .util.cfg-open {
  background:#ffffff !important;
  box-shadow: none !important;
  border-color: rgba(20,70,140,.12) !important;
}
html.dark .panel-list .util.cfg-open,
body.dark .panel-list .util.cfg-open,
html[data-theme="dark"] .panel-list .util.cfg-open,
body[data-theme="dark"] .panel-list .util.cfg-open,
[data-theme="dark"] body .panel-list .util.cfg-open {
  background: #1c1c1e !important;
  box-shadow: none !important;
  border-color: rgba(255,255,255,.08) !important;
}

/* Config panel cleaner — Apple-style, không viền top */
.panel-list .util .util-config {
  padding: 12px 12px 14px !important;
  border-top: none !important;
  background: rgba(0,0,0,.025) !important;
  border-radius: 0 0 12px 12px !important;
  gap: 10px !important;
}
html.dark .panel-list .util .util-config,
[data-theme="dark"] .panel-list .util .util-config {
  background: rgba(255,255,255,.02) !important;
}
.panel-list .cfg-field label,
.panel-list .util-config label:not(.cfg-check) {
  font: 600 11px/1.2 var(--ds-font) !important;
  color: var(--label2) !important;
  letter-spacing: .02em !important;
  text-transform: uppercase;
}
.panel-list .util-config input[type="text"],
.panel-list .util-config input[type="number"],
.panel-list .util-config select,
.panel-list .util-config textarea {
  background: var(--card-2) !important;
  border: 1px solid var(--sep) !important;
  border-radius: 9px !important;
  padding: 8px 11px !important;
  font: 400 12.5px/1.3 var(--ds-font) !important;
  color: var(--label) !important;
  outline: none !important;
  transition: border-color .12s, box-shadow .12s !important;
}
html.dark .panel-list .util-config input[type="text"],
html.dark .panel-list .util-config input[type="number"],
html.dark .panel-list .util-config select,
html.dark .panel-list .util-config textarea,
[data-theme="dark"] .panel-list .util-config input[type="text"],
[data-theme="dark"] .panel-list .util-config input[type="number"],
[data-theme="dark"] .panel-list .util-config select,
[data-theme="dark"] .panel-list .util-config textarea {
  background: rgba(255,255,255,.04) !important;
  border-color: rgba(255,255,255,.08) !important;
}
.panel-list .util-config input:focus,
.panel-list .util-config select:focus,
.panel-list .util-config textarea:focus {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px var(--accent-soft) !important;
}
.panel-list .util-config input::placeholder { color: var(--label3) !important; }
.panel-list .cfg-check { padding: 6px 4px !important; }
.panel-list .cfg-check .cfg-check-box {
  border-radius: 5px !important;
  border: 1.5px solid var(--label3) !important;
  background: transparent !important;
}
.panel-list .cfg-check input[type="checkbox"]:checked + .cfg-check-box {
  background: var(--accent) !important; border-color: var(--accent) !important;
}
.panel-list .util.cfg-open .util-row { background:transparent !important; border-radius:12px 12px 0 0 !important; }

/* Drag: luôn hiện mờ; Gear + X: mờ, rõ khi hover row */
.panel-list .util .grip { opacity:1 !important; }
.panel-list .util .cog,
.panel-list .util .del { opacity:.45 !important; transition:opacity .12s, color .12s; }
.panel-list .util:hover .cog,
.panel-list .util:hover .del { opacity:1 !important; }

/* Style cho 3 nút phụ */
.panel-list .util .grip {
  color:var(--label3) !important;
  background:transparent !important;
  border:none !important; padding:0 !important;
  width:14px !important; flex:0 0 14px;
  display:inline-flex; align-items:center; justify-content:center;
  cursor:grab;
}
.panel-list .util .grip svg { width:14px; height:14px; stroke:currentColor; fill:none; }

.panel-list .util .cog {
  width:20px !important; height:20px !important;
  background:transparent !important; border:none !important; padding:0 !important;
  color:var(--label3) !important; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center;
  flex:0 0 20px;
}
.panel-list .util .cog:hover { color:var(--accent) !important; }
.panel-list .util .cog svg { width:14px; height:14px; }

.panel-list .util .del {
  width:20px !important; height:20px !important;
  background:transparent !important; border:none !important; padding:0 !important;
  color:var(--label3) !important; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center;
  flex:0 0 20px;
}
.panel-list .util .del:hover { color:var(--red) !important; }
.panel-list .util .del svg { width:13px; height:13px; }

/* iOS switch tinh tế (46x28, thumb 24, gap 2px) — spring bounce + press effect */
.panel-list .util .sw {
  box-sizing:border-box !important;
  position:relative !important; display:inline-block !important;
  width:38px !important; height:22px !important;
  flex:0 0 38px !important;
  border:none !important; border-radius:999px !important;
  background:transparent !important;
  cursor:pointer; padding:0 !important; margin:0 !important;
  vertical-align:middle !important;
  line-height:0 !important;
  font-size:0 !important;
  align-self:center !important;
}
.panel-list .util .sw input[type="checkbox"], .panel-list .util .sw input {
  opacity:0 !important; width:0 !important; height:0 !important;
  position:absolute !important;
  pointer-events:none !important;
}
.panel-list .util .sw .slider {
  box-sizing:border-box !important;
  position:absolute !important;
  top:0 !important; left:0 !important; right:0 !important; bottom:0 !important;
  width:auto !important; height:auto !important;
  background:var(--card-3) !important;
  border-radius:999px !important;
  border:none !important;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.05) !important;
  transition:background .3s cubic-bezier(.4,.2,.2,1) !important;
  cursor:pointer;
}
.panel-list .util .sw .slider::before {
  content:"" !important;
  box-sizing:border-box !important;
  position:absolute !important;
  top:3px !important; left:3px !important;
  width:16px !important; height:16px !important;
  border-radius:999px !important;
  background:#fff !important;
  box-shadow:0 2px 5px rgba(0,0,0,.18), 0 1px 1px rgba(0,0,0,.12) !important;
  transition:left .3s cubic-bezier(.34,1.4,.5,1), width .22s ease, transform .3s cubic-bezier(.34,1.4,.5,1) !important;
  transform:none !important;
}
.panel-list .util .sw input:checked + .slider {
  background:var(--green) !important;
}
.panel-list .util .sw input:checked + .slider::before {
  left:19px !important;
}
/* Press effect — nút hơi dài ra như iOS thật */
.panel-list .util .sw:active .slider::before { width:20px !important; }
.panel-list .util .sw input:checked + .slider:active::before,
.panel-list .util .sw:active input:checked + .slider::before { left:15px !important; width:20px !important; }

/* Squircle icon trong panel item — gradient + bóng màu nhẹ dưới (specificity cao) */
html .panel-list .util .ico,
html[data-theme="dark"] .panel-list .util .ico,
html.dark .panel-list .util .ico {
  width:30px !important; height:30px !important; border-radius:9px !important;
  background-color: var(--c, #8a8d91) !important;
  background-image:linear-gradient(145deg, var(--c, #8a8d91), color-mix(in srgb, var(--c, #8a8d91) 58%, #000)) !important;
  color:#fff !important;
  display:grid !important; place-items:center; flex:0 0 30px;
  box-shadow:0 4px 10px -3px var(--c, #8a8d91) !important;
  filter:none !important;
}
html .panel-list .util .ico svg,
html[data-theme="dark"] .panel-list .util .ico svg {
  width: 17px !important; height: 17px !important;
  stroke: #fff !important; fill: none !important; color: #fff !important;
}

/* Clone-specific icon colors — fallback nếu --c không cascade */
.panel-list .util[data-util="refresh-info"] .ico { background-color: #3b82f6 !important; background-image: linear-gradient(145deg, #3b82f6, #1d4fb8) !important; box-shadow: 0 4px 10px -3px #3b82f6 !important; }
.panel-list .util[data-util="check-cookie"] .ico { background-color: #10b981 !important; background-image: linear-gradient(145deg, #10b981, #0a7a55) !important; box-shadow: 0 4px 10px -3px #10b981 !important; }
.panel-list .util[data-util="kang-xmdt"] .ico { background-color: #f59e0b !important; background-image: linear-gradient(145deg, #f59e0b, #a06a07) !important; box-shadow: 0 4px 10px -3px #f59e0b !important; }
.panel-list .util[data-util="get-link-xmdt"] .ico { background-color: #8b5cf6 !important; background-image: linear-gradient(145deg, #8b5cf6, #5a3da0) !important; box-shadow: 0 4px 10px -3px #8b5cf6 !important; }
.panel-list .util .ico::before { content:none !important; }
.panel-list .util .ico svg { width:17px !important; height:17px !important; color:#fff !important; stroke:#fff !important; fill:none !important; stroke-width:2.5 !important; }
.panel-list .util .nm {
  color:#6a6a6d !important; font:550 13px/1.3 var(--ds-font) !important;
  flex:1; opacity:1 !important; letter-spacing:-0.01em;
  white-space:normal !important; overflow:visible !important; text-overflow:clip !important;
  min-width:0; word-break:keep-all;
}
html.dark .panel-list .util .nm, [data-theme="dark"] .panel-list .util .nm, body.dark .panel-list .util .nm {
  color:#b8b9bd !important;
}

/* REMOVED — rule cũ duplicate (24x24). Block switch chính ở trên đã chuẩn 46x22 thumb 16. */

/* Util action color mapping → màu iOS system */
.panel-list .util[data-util^="refresh"], .panel-list .util[data-util^="check"], .panel-list .util[data-util^="get"], .panel-list .util[data-util^="list"] { --c:var(--gray) !important; }
.panel-list .util[data-util^="create"], .panel-list .util[data-util^="save"], .panel-list .util[data-util^="add"] { --c:var(--green) !important; }
.panel-list .util[data-util^="kang"], .panel-list .util[data-util^="fix"], .panel-list .util[data-util^="edit"], .panel-list .util[data-util^="update"] { --c:var(--blue) !important; }
.panel-list .util[data-util^="delete"], .panel-list .util[data-util^="clear"], .panel-list .util[data-util^="ban"], .panel-list .util[data-util^="remove"] { --c:var(--red) !important; }

/* Ẩn nhóm YÊU THÍCH */
.ios-group-label.is-fav, .ios-group.is-fav, .ios-group.is-fav.is-empty-zone, .ios-fav-hint { display:none !important; }

/* FB account block ở đầu util panel (Apple mockup .fb)
 * height 72px khớp toolbar .top để 2 đường ngang dưới align cùng Y */
.panel-fb {
  display:flex; align-items:center; gap:11px;
  height:72px; padding:0 15px;
  border-bottom:0.5px solid var(--border, var(--sep));
  background:transparent;
  cursor:pointer;
  box-sizing:border-box;
  flex:0 0 72px;
}

/* Panel thu nhỏ — collapse hoàn toàn xuống 0/auto width,
 * user-card (panel-fb) PIN tự do fixed top-right viewport, không phụ thuộc panel */
.panel.collapsed {
  width: 0 !important; overflow: visible !important;
  border-left: none !important;
}
.panel.collapsed > .panel-toggle {
  opacity:1 !important; visibility:visible !important; pointer-events:auto !important;
}
.panel.collapsed .panel-head,
.panel.collapsed .panel-list,
.panel.collapsed .panel-bg-icons {
  display: none !important;
}
.panel.collapsed .panel-fb {
  position: fixed !important;
  /* Canh giữa theo tâm hàng nút toolbar. Đo thực tế: titlebar 44px, tâm nút ~71px,
     card cao 46px → top = 71 - 23 = 48px (var --h-titlebar render lệch nên hardcode theo số đo). */
  top: 48px !important;
  right: 26px !important; /* chừa khỏi viền indigo ngoài cùng (app-inner margin 15px) */
  left: auto !important; bottom: auto !important;
  width: auto !important; min-width: 0 !important; height: 46px !important;
  gap: 9px !important;
  padding: 0 12px !important;
  z-index: 35 !important;
  background: var(--card) !important;
  border: 1px solid var(--sep) !important;
  border-radius: 12px !important;
  box-shadow: 0 8px 22px -10px rgba(0,0,0,.3) !important;
  display: flex !important; align-items: center !important;
  opacity:1 !important; visibility:visible !important; pointer-events:auto !important;
}
/* Trong card thu gọn: thu nhỏ avatar + bớt khoảng đẩy nút cho vừa 1 hàng toolbar */
.panel.collapsed .panel-fb .panel-fb-pic { width:30px !important; height:30px !important; flex:0 0 30px !important; }
.panel.collapsed .panel-fb .panel-fb-vchk { width:14px !important; height:14px !important; }
.panel.collapsed .panel-fb .panel-fb-btn { width:28px !important; height:28px !important; flex:0 0 28px !important; padding:0 !important; display:inline-flex !important; align-items:center !important; justify-content:center !important; }
.panel-fb-btn svg { display:block !important; }
.panel.collapsed .panel-fb .panel-fb-btn:first-of-type { margin-left:10px !important; }
.panel.collapsed .panel-fb .panel-fb-info { flex:0 1 auto !important; }
/* Bỏ truncation — text full, panel-fb auto-fit */
.panel-fb-info {
  display: flex !important;
  flex-direction: column !important;
  flex: 0 0 auto !important;
  min-width: 0 !important;
  gap: 1px !important;
}
.panel-fb-name, .panel-fb-uid {
  display: block !important;
  overflow: visible !important;
  text-overflow: clip !important;
  white-space: nowrap !important;
}
.panel.collapsed .panel-fb-info,
.panel.collapsed .panel-fb-btn { display: flex !important; }
/* Toolbar reserves 280px on right when panel collapsed → user-card không đè buttons */
.main-flex:has(.panel.collapsed) .main-col .top { padding-right: 340px !important; }

/* Đẩy nút "+ Thêm" trong panel-head sát mép phải hơn */
.panel-head { overflow: visible !important; }
.panel-head .row1 { overflow: visible !important; }
.panel-head #btn-add {
  transform: translateX(70px) !important;
  padding: 0 14px !important;
  position: relative; z-index: 2;
}

/* ============================================================
 * COLUMN: TRẠNG THÁI (pill) — flat tint, không quầng gắt
 *  Áp cho cả BM (.bdg) và Clone (.clone-pill)
 * ============================================================ */
.bdg, .bdg-live, .bdg-die, .bdg-ready, .bdg-warn, .bdg-default,
.clone-pill, .clone-pill-ok, .clone-pill-warn, .clone-pill-err, .clone-pill-idle {
  display:inline-flex !important; align-items:center !important; gap:6px !important;
  height:25px !important; padding:0 11px !important; border-radius:999px !important;
  font:600 12px/1 var(--ds-font) !important; white-space:nowrap !important;
  background-image: none !important;
  box-shadow: none !important;
  border: none !important;
}
.clone-pill-ok   { background: rgba(28,168,81,.12) !important; color: #1ca851 !important; }
.clone-pill-warn { background: rgba(232,135,10,.12) !important; color: #e8870a !important; }
.clone-pill-err  { background: rgba(224,56,59,.10) !important; color: #d70015 !important; }
.clone-pill-idle { background: rgba(138,143,152,.13) !important; color: var(--label2) !important; }
[data-theme="dark"] .clone-pill-ok, html.dark .clone-pill-ok { background: rgba(48,209,88,.16) !important; color: #30d158 !important; }
[data-theme="dark"] .clone-pill-warn, html.dark .clone-pill-warn { background: rgba(255,159,10,.16) !important; color: #ff9f0a !important; }
[data-theme="dark"] .clone-pill-err, html.dark .clone-pill-err { background: rgba(255,90,82,.14) !important; color: #ff6e6e !important; }
[data-theme="dark"] .clone-pill-idle, html.dark .clone-pill-idle { background: rgba(152,152,157,.16) !important; color: var(--label2) !important; }
.bdg .dot, .bdg-live .dot, .bdg-die .dot, .bdg-ready .dot, .bdg-warn .dot, .bdg-default .dot {
  width:7px !important; height:7px !important; border-radius:50% !important;
  flex:0 0 7px !important;
  background-image: none !important;
  box-shadow: none !important;
}
.bdg-live { background: rgba(28,168,81,.12) !important; color: #1ca851 !important; }
.bdg-live .dot { background: #1ca851 !important; }
.bdg-die { background: rgba(224,56,59,.10) !important; color: #d24b4b !important; }
.bdg-die .dot { background: #e0383b !important; }
[data-theme="dark"] .bdg-live, html.dark .bdg-live {
  background: rgba(48,209,88,.16) !important; color: #30d158 !important;
}
[data-theme="dark"] .bdg-live .dot, html.dark .bdg-live .dot { background: #30d158 !important; }
[data-theme="dark"] .bdg-die, html.dark .bdg-die {
  background: rgba(255,90,82,.14) !important; color: #ff6e6e !important;
}
[data-theme="dark"] .bdg-die .dot, html.dark .bdg-die .dot { background: #ff453a !important; }
/* bdg-warn = cần thanh toán (3/8/9) cam; bdg-default = Đóng (100/101/103) xám */
.bdg-warn { background: rgba(245,158,11,.12) !important; color: #b25000 !important; }
.bdg-warn .dot { background: #f59e0b !important; }
.bdg-default { background: rgba(107,114,128,.12) !important; color: #6b7280 !important; }
.bdg-default .dot { background: #9ca3af !important; }
[data-theme="dark"] .bdg-warn, html.dark .bdg-warn { background: rgba(245,158,11,.16) !important; color: #ff9f0a !important; }
[data-theme="dark"] .bdg-warn .dot, html.dark .bdg-warn .dot { background: #ff9f0a !important; }
[data-theme="dark"] .bdg-default, html.dark .bdg-default { background: rgba(255,255,255,.07) !important; color: rgba(255,255,255,.6) !important; }
[data-theme="dark"] .bdg-default .dot, html.dark .bdg-default .dot { background: #98989d !important; }

/* Datagrid row — đồng bộ Clone + BM */
.tbl-wrap tbody tr { transition: background .12s !important; }
.tbl-wrap tbody tr + tr td { box-shadow: 0 -1px 0 var(--sep) !important; }
.tbl-wrap tbody tr:hover { background: var(--card-2) !important; }
.tbl-wrap tbody tr:has(input.check:checked),
.tbl-wrap tbody tr.row-checked {
  background: rgba(24,119,242,.05) !important;
}
html.dark .tbl-wrap tbody tr:has(input.check:checked),
[data-theme="dark"] .tbl-wrap tbody tr:has(input.check:checked) {
  background: rgba(10,132,255,.08) !important;
}
.tbl-wrap tbody tr.is-active { background: rgba(28,168,81,.06) !important; }
html.dark .tbl-wrap tbody tr.is-active,
[data-theme="dark"] .tbl-wrap tbody tr.is-active { background: rgba(48,209,88,.08) !important; }
/* Font cell — đồng bộ Clone + BM (specificity cao đè app.css [data-theme="dark"] tbody td) */
html .tbl-wrap tbody td,
html .tbl-wrap tbody td.col-pinned-right,
html .tbl-wrap tbody td.col-pinned-left,
html[data-theme="dark"] .tbl-wrap tbody td,
html[data-theme="dark"] .tbl-wrap tbody td.col-pinned-right,
html[data-theme="dark"] .tbl-wrap tbody td.col-pinned-left,
html.dark .tbl-wrap tbody td,
html.dark .tbl-wrap tbody td.col-pinned-right,
html.dark .tbl-wrap tbody td.col-pinned-left {
  font-size: 14px !important;
  color: var(--text) !important;
  vertical-align: middle !important;
  padding: 11px 12px !important;
  background-color: var(--card) !important;
  background-image: none !important;
}
html .tbl-wrap tbody td.muted-c { font-size: 14.5px !important; }
html .tbl-wrap tbody td .cell-acc .name,
html .tbl-wrap tbody td .cell-acc .name * { font-size: 14.5px !important; font-weight: 600 !important; }
html .tbl-wrap tbody td .cell-acc .uid,
html .tbl-wrap tbody td .cell-acc .uid * { font-size: 12px !important; font-weight: 400 !important; }
html .tbl-wrap tbody td .acp-pill { font-size: 12px !important; font-weight: 450 !important; }
html .tbl-wrap tbody td .xmdn { font-size: 12.5px !important; font-weight: 550 !important; }
.tbl-wrap tbody tr:hover td,
.tbl-wrap tbody tr:hover td.col-pinned-right,
.tbl-wrap tbody tr:hover td.col-pinned-left {
  background-color: var(--card-2) !important;
}
.tbl-wrap tbody tr.is-active td,
.tbl-wrap tbody tr.is-active td.col-pinned-right,
.tbl-wrap tbody tr.is-active td.col-pinned-left {
  background-color: color-mix(in srgb, #1ca851 8%, var(--card)) !important;
}
.tbl-wrap tbody tr:has(input.check:checked) td,
.tbl-wrap tbody tr:has(input.check:checked) td.col-pinned-right,
.tbl-wrap tbody tr:has(input.check:checked) td.col-pinned-left {
  background-color: color-mix(in srgb, #1877f2 8%, var(--card)) !important;
}
html.dark .tbl-wrap tbody tr.is-active td,
[data-theme="dark"] .tbl-wrap tbody tr.is-active td {
  background-color: color-mix(in srgb, #30d158 10%, var(--card)) !important;
}
html.dark .tbl-wrap tbody tr:has(input.check:checked) td,
[data-theme="dark"] .tbl-wrap tbody tr:has(input.check:checked) td {
  background-color: color-mix(in srgb, #0a84ff 12%, var(--card)) !important;
}
/* Header cũng đồng bộ — specificity cao đè app.css */
html .tbl-wrap thead th,
html[data-theme="dark"] .tbl-wrap thead th,
html.dark .tbl-wrap thead th,
html .tbl-wrap thead th.col-pinned-right,
html .tbl-wrap thead th.col-pinned-left,
html[data-theme="dark"] .tbl-wrap thead th.col-pinned-right,
html[data-theme="dark"] .tbl-wrap thead th.col-pinned-left {
  background-color: var(--card) !important;
  background-image: none !important;
}

/* Nút "Bắt đầu" Clone + BM → GREEN đồng bộ */
.top #btn-start.btn-primary, .top #clone-start.btn-primary,
.top #btn-start.btn, .top #clone-start.btn {
  background: #1ca851 !important; color: #fff !important; border: none !important;
  box-shadow: 0 2px 8px rgba(28,168,81,.3) !important;
}
.top #btn-start.btn-primary:hover, .top #clone-start.btn-primary:hover,
.top #btn-start.btn:hover, .top #clone-start.btn:hover {
  background: #178a44 !important;
  box-shadow: 0 4px 12px rgba(28,168,81,.4) !important;
}
html.dark .top #btn-start, html.dark .top #clone-start,
html[data-theme="dark"] .top #btn-start, html[data-theme="dark"] .top #clone-start {
  background: #30d158 !important;
  box-shadow: 0 2px 8px rgba(48,209,88,.3) !important;
}
html.dark .top #btn-start:hover, html.dark .top #clone-start:hover,
html[data-theme="dark"] .top #btn-start:hover, html[data-theme="dark"] .top #clone-start:hover {
  background: #28b14a !important;
}
.tbl-wrap thead th {
  font-size: 11px !important; font-weight: 600 !important;
  color: var(--label2) !important; text-transform: uppercase !important;
  letter-spacing: .04em !important;
  padding: 10px 12px !important;
}

/* Checkbox bo tròn, tick xanh FB */
.tbl-wrap input.check[type="checkbox"] {
  -webkit-appearance: none; appearance: none;
  width: 18px !important; height: 18px !important;
  border-radius: 5px !important; border: 1.5px solid var(--label3) !important;
  background: transparent !important;
  cursor: pointer; position: relative; box-sizing: border-box;
  transition: background .12s, border-color .12s;
  margin: 0;
}
.tbl-wrap input.check[type="checkbox"]:checked {
  background: #1877f2 !important; border-color: #1877f2 !important;
}
.tbl-wrap input.check[type="checkbox"]:checked::after {
  content: ""; position: absolute; left: 4px; top: 1px;
  width: 6px; height: 10px;
  border: solid #fff; border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

/* STT cột canh giữa, tabular-nums */
.tbl-wrap td.muted-c {
  font-variant-numeric: tabular-nums !important;
  font-weight: 600 !important;
  color: var(--label2) !important;
}

/* Panel toggle — tab gọn, blend với panel */
.panel-toggle {
  width: 18px !important; height: 48px !important;
  border-radius: 8px 0 0 8px !important;
  border: 1px solid var(--sep) !important; border-right: none !important;
  background: var(--bg-page, #f4f5f7) !important;
  color: var(--label2) !important;
  box-shadow: -2px 1px 6px rgba(0,0,0,.06) !important;
  left: -18px !important;
}
html.dark .panel-toggle,
[data-theme="dark"] .panel-toggle {
  background: #05070b !important;
  border-color: rgba(255,255,255,.08) !important;
  color: rgba(255,255,255,.6) !important;
  box-shadow: -2px 1px 6px rgba(0,0,0,.4) !important;
}
.panel-toggle:hover {
  background: var(--card-2) !important;
  color: var(--label) !important;
  border-color: rgba(24,119,242,.4) !important;
}
html.dark .panel-toggle:hover,
[data-theme="dark"] .panel-toggle:hover {
  background: var(--card) !important;
  color: var(--label) !important;
  border-color: rgba(24,119,242,.4) !important;
}
.panel-toggle svg { width: 12px !important; height: 12px !important; }
.panel.collapsed .panel-toggle { left: -18px !important; }

/* Toolbar — KHÔNG bao giờ xuống dòng, items tự co theo zoom */
.top {
  flex-wrap: nowrap !important;
  overflow: hidden !important;
  min-width: 0 !important;
  gap: 8px !important;
}
.top > * { flex-shrink: 1 !important; min-width: 0 !important; }
.top .topbar-group,
.top .toolbar-num,
.top .mix-drop { flex-shrink: 0 !important; }
.top .search { min-width: 60px !important; flex-shrink: 3 !important; }
.top .dg-zoom-bar {
  flex-shrink: 2 !important; min-width: 0 !important;
  max-width: 240px !important;
  display: flex !important;
}
.top .dg-zoom-bar .dg-zoom-slider {
  flex: 1 1 40px !important;
  min-width: 30px !important;
  width: auto !important;
}
.top .dg-zoom-bar .dg-zoom-ic { flex: 0 0 14px !important; }
.top .dg-zoom-bar .dg-zoom-val { flex: 0 0 auto !important; }
.panel-fb:hover { background:rgba(255,255,255,0.02); }
html:not(.dark) .panel-fb:hover, html:not([data-theme="dark"]) .panel-fb:hover { background:rgba(0,0,0,0.02); }
.panel-fb-pic {
  width:38px; height:38px; border-radius:50%; flex:0 0 38px;
  position:relative;
  background:linear-gradient(135deg, var(--orange), var(--red));
  box-shadow:0 0 0 2px var(--card-2), 0 0 0 3.5px var(--green);
}
.panel-fb-vchk {
  position:absolute; right:-2px; bottom:-2px;
  width:17px; height:17px; border-radius:50%;
  background:var(--green); color:#fff;
  display:grid; place-items:center;
  border:2px solid var(--card-2);
}
.panel-fb-info { flex:1; min-width:0; }
.panel-fb-name { font:700 14.5px/1.2 var(--ds-font); color:var(--label); white-space:nowrap; overflow:visible; text-overflow:clip; letter-spacing:-0.01em; }
.panel-fb-uid { font:400 12px/1.2 var(--ds-font); color:var(--label2); white-space:nowrap; overflow:visible; text-overflow:clip; margin-top:2px; }
/* Đẩy 2 nút swap/logout sang phải 70px */
.panel-fb .panel-fb-btn:first-of-type { margin-left:70px !important; }
.panel-fb-btn {
  width:30px; height:30px; border-radius:8px;
  background:var(--card-2); border:1px solid var(--sep);
  color:var(--label2); cursor:pointer;
  display:inline-grid; place-items:center;
  transition:background .15s, color .15s;
}
.panel-fb-btn:hover { background:var(--card-3); color:var(--label); }

/* Title bar "Tiện ích đang chạy" — sửa panel-head cho khớp util-head mockup */
.panel-head { padding:12px 15px !important; border-bottom:1px solid var(--sep) !important; background:transparent !important; }
.panel-head .row1 { display:flex; align-items:center; gap:11px; }
.panel-head .head-ico {
  width:32px !important; height:32px !important; border-radius:9px !important;
  background:var(--accent) !important; color:#fff !important;
  display:inline-grid !important; place-items:center !important; flex:0 0 32px;
  box-shadow:0 1px 1.5px rgba(0,0,0,.12);
}
.panel-head .head-ico svg { width:18px; height:18px; stroke:#fff; fill:none; stroke-width:2; }
.panel-head .head-text h2 { font:700 14px/1.2 var(--ds-font) !important; color:var(--label) !important; letter-spacing:-0.01em; margin:0; }
.panel-head .head-text .sub { font:400 11px/1.2 var(--ds-font) !important; color:var(--label2) !important; margin-top:2px !important; }
.panel-head #btn-add { background:var(--accent) !important; color:#fff !important; border:none !important; border-radius:8px !important; }
.panel-head #btn-add:hover { filter:brightness(1.06); }

/* Status bar — chip viên màu đặc cân đối */
.tbl-stats {
  height:var(--h-statusbar) !important; padding:0 14px !important;
  border-top:1px solid var(--sep) !important; background:transparent !important;
  color:var(--label2) !important;
  display:flex; align-items:center; gap:10px;
  font:400 12px/1 var(--ds-font);
}

/* Group pill — card bg + viền mảnh */
.tbl-stats .ts-group {
  display:inline-flex !important; align-items:center; gap:14px !important;
  padding:6px 14px !important;
  background:var(--card) !important;
  border:1px solid var(--sep) !important;
  border-radius:10px !important;
}
/* Mỗi chip: dot + text + viên số */
.tbl-stats .ts-chip {
  display:inline-flex !important; align-items:center !important; gap:7px !important;
  padding:0 !important; border-radius:0 !important;
  background:transparent !important;
  font:500 12.5px/1 var(--ds-font) !important;
  color:var(--label) !important;
  border:none !important;
}
.tbl-stats .ts-dot { width:9px !important; height:9px !important; border-radius:50% !important; flex:0 0 9px; }
/* Số → viên màu đặc */
.tbl-stats .ts-chip b, .tbl-stats .ts-chip strong {
  min-width:28px !important; height:22px !important; padding:0 9px !important;
  display:inline-flex !important; align-items:center !important; justify-content:center !important;
  border-radius:6px !important;
  color:#fff !important; font:700 12px/1 var(--ds-font) !important;
  letter-spacing:0 !important;
  margin-left:2px;
}

/* Màu dot + viên số theo loại */
.tbl-stats .ts-chip.ts-total .ts-dot,
.tbl-stats .ts-chip.ts-total b { background:var(--accent) !important; }
.tbl-stats .ts-chip.ts-live .ts-dot,
.tbl-stats .ts-chip.ts-live b { background:var(--green) !important; }
.tbl-stats .ts-chip.ts-die .ts-dot,
.tbl-stats .ts-chip.ts-die b { background:var(--red) !important; }
.tbl-stats .ts-chip.ts-no .ts-dot,
.tbl-stats .ts-chip.ts-no b { background:var(--orange) !important; }
.tbl-stats .ts-chip.ts-dong .ts-dot,
.tbl-stats .ts-chip.ts-dong b { background:var(--gray) !important; }
.tbl-stats .ts-chip.ts-sel .ts-dot,
.tbl-stats .ts-chip.ts-sel b { background:var(--purple) !important; }

/* Nhãn BM/TKQC pill nhỏ */
.tbl-stats .ts-lbl {
  display:inline-flex !important; align-items:center;
  font:600 10.5px/1 var(--ds-font) !important;
  letter-spacing:.3px !important; text-transform:uppercase !important;
  padding:3px 8px !important; border-radius:5px !important;
}

/* ============================================================
 * MODAL — iOS Alert style (frosted, 14px radius, divider buttons)
 * ============================================================ */
.fpp-overlay, .bm-loadcfg-modal, .center-notice-overlay, .swap-modal-overlay {
  position:fixed !important; inset:0 !important; z-index:9000 !important;
  background:var(--scrim) !important;
  -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px);
  align-items:center !important; justify-content:center !important;
}
.fpp-overlay { display:none; }
.fpp-overlay.show { display:flex !important; }
.swap-modal-box, .add-acc-box {
  background:var(--glass) !important;
  backdrop-filter:saturate(180%) blur(30px); -webkit-backdrop-filter:saturate(180%) blur(30px);
  border:1px solid var(--glass-brd) !important;
  border-radius:var(--r) !important;
  box-shadow:var(--shadow-pop) !important;
  color:var(--label) !important;
  max-width:440px;
}
.swap-row { background:var(--card-2) !important; border:1px solid var(--sep) !important; border-radius:8px; }
.swap-row:hover { background:var(--card-3) !important; }

/* Empty datagrid — Apple mockup: ring 88px conic-gradient, avatar orange→red, check 22px */
.dge-avatar-wrap {
  width:88px !important; height:88px !important;
  padding:3px !important; border-radius:50% !important;
  background:conic-gradient(from 140deg, var(--green), var(--accent), var(--green)) !important;
  position:relative !important;
  box-shadow:0 8px 24px -8px rgba(0,0,0,.3);
  animation:none !important;
}
.dge-avatar-wrap::before { content:none !important; }
.dge-avatar-wrap::after { content:none !important; }
.dge-avatar {
  width:100% !important; height:100% !important;
  border-radius:50% !important;
  background-color:var(--orange) !important;
  background-size:cover !important;
  background-position:center !important;
  background-repeat:no-repeat !important;
  border:3px solid var(--card) !important;
  box-shadow:none !important;
  position:relative !important; z-index:0 !important;
  font:800 22px/1 var(--ds-font);
  display:flex; align-items:center; justify-content:center; color:#fff;
}
.dge-verified {
  position:absolute !important; right:2px !important; bottom:2px !important;
  width:22px !important; height:22px !important; border-radius:50% !important;
  background:var(--green) !important;
  border:2px solid var(--card) !important;
  display:grid !important; place-items:center !important;
  color:#06210f !important;
  box-shadow:none !important; z-index:2 !important;
}
.dge-verified svg { width:12px !important; height:12px !important; }
.dge-name {
  font:700 18px/1.3 var(--ds-font) !important;
  letter-spacing:-0.02em !important;
  color:var(--label) !important;
}
.dge-pill {
  display:inline-flex !important; align-items:center !important; gap:7px !important;
  padding:5px 12px !important; border-radius:20px !important;
  background:var(--start-soft) !important;
  color:var(--start) !important;
  border:1px solid rgba(52,199,89,.25) !important;
  font:600 11.5px/1 var(--ds-font) !important;
  text-transform:uppercase !important; letter-spacing:.3px !important;
}
.dge-pill .dge-dot {
  width:7px !important; height:7px !important; border-radius:50% !important;
  background:var(--green) !important;
  box-shadow:none !important; animation:none !important;
}
.dge-cta {
  display:inline-flex !important; align-items:center !important; gap:7px !important;
  height:34px !important; padding:0 15px !important;
  background:var(--accent) !important; color:#fff !important;
  border:none !important; border-radius:9px !important;
  font:600 13px/1 var(--ds-font) !important; letter-spacing:-0.01em !important;
  box-shadow:none !important; cursor:pointer;
}
.dge-cta:hover { filter:brightness(1.06); }
.dge-confetti { display:none !important; }

.clone-empty .clone-empty-ic {
  width:88px; height:88px; border-radius:50%;
  background:linear-gradient(135deg, var(--yellow), var(--red));
  display:inline-flex; align-items:center; justify-content:center;
  color:#fff; box-shadow:0 8px 24px -8px rgba(0,0,0,.3); border:none;
}

/* Scrollbar (mockup style) */
::-webkit-scrollbar { width:11px; height:11px; }
::-webkit-scrollbar-thumb {
  background:rgba(140,140,150,.45);
  border-radius:var(--r-pill);
  border:3px solid transparent;
  background-clip:padding-box;
}
::-webkit-scrollbar-thumb:hover { background:rgba(140,140,150,.6); background-clip:padding-box; }
::-webkit-scrollbar-track { background:transparent; }

/* ============================================================
 * ADMIN POPUP — khớp mockup mau-dialog-quan-ly-bm.html
 * ============================================================ */
.detail-box.detail-box-admin {
  width:940px !important; max-width:96vw !important;
  background:#ffffff !important; border-radius:22px !important;
  border:1px solid rgba(0,0,0,.07) !important;
  box-shadow:0 30px 80px -24px rgba(30,45,80,.3) !important;
  overflow:hidden !important;
}
[data-theme="dark"] .detail-box.detail-box-admin {
  background:#1c1c1e !important;
  border:1px solid rgba(255,255,255,.09) !important;
  box-shadow:0 30px 80px -20px rgba(0,0,0,.6) !important;
}
[data-theme="dark"] .detail-box.detail-box-admin .detail-foot,
[data-theme="dark"] .detail-box.detail-box-admin .detail-foot-admin { background:transparent !important; }
.detail-box.detail-box-admin .detail-head {
  display:flex !important; align-items:center !important; gap:14px !important;
  padding:18px 22px !important; background:transparent !important; border-bottom:none !important;
}
.detail-box.detail-box-admin .detail-icon-box {
  width:38px !important; height:38px !important; border-radius:11px !important;
  background:var(--indigo) !important; display:grid !important; place-items:center !important;
  flex:0 0 38px !important;
}
.detail-box.detail-box-admin .detail-icon-box svg { width:20px !important; height:20px !important; stroke:#fff !important; }
.detail-box.detail-box-admin .detail-info .title { font:600 16px/1.2 var(--ds-font) !important; color:var(--label) !important; }
.detail-box.detail-box-admin .detail-bm-sub { font:400 12px/1.3 var(--ds-font) !important; color:var(--label2) !important; margin-top:1px !important; }
.detail-box.detail-box-admin .detail-close {
  margin-left:auto; width:36px !important; height:36px !important; border-radius:50% !important;
  display:grid; place-items:center; cursor:pointer;
  color:var(--label2); background:transparent !important;
}
.detail-box.detail-box-admin .detail-close:hover { background:var(--card-2) !important; color:var(--label) !important; }

/* Stats grid — auto-fit để luôn 1 hàng, không xuống dòng */
.detail-box.detail-box-admin .ap-stats {
  display:grid !important;
  grid-template-columns:repeat(auto-fit,minmax(0,1fr)) !important;
  grid-auto-flow:column !important;
  gap:10px !important; padding:4px 22px 12px !important;
}
.detail-box.detail-box-admin .ap-stat {
  display:flex !important; align-items:center !important; gap:9px !important;
  padding:10px 12px !important; border-radius:12px !important;
  border:1px solid var(--sep) !important;
  background:var(--card-2) !important; min-width:0 !important;
}
.detail-box.detail-box-admin .ap-stat-ic {
  width:28px !important; height:28px !important; border-radius:8px !important;
  display:grid !important; place-items:center !important; flex:0 0 28px !important;
}
.detail-box.detail-box-admin .ap-stat-ic svg { width:16px !important; height:16px !important; }
.detail-box.detail-box-admin .ap-stat-num { font:700 18px/1 var(--ds-font) !important; color:var(--label) !important; display:flex; align-items:center; gap:5px; }
.detail-box.detail-box-admin .ap-stat-lbl { font:400 11px/1.2 var(--ds-font) !important; color:var(--label2) !important; margin-top:2px !important; white-space:nowrap !important; overflow:hidden !important; text-overflow:ellipsis !important; }
.detail-box.detail-box-admin .ap-stat.fb { background:rgba(24,119,242,.12) !important; }
.detail-box.detail-box-admin .ap-stat.fb .ap-stat-ic { background:#1877f2 !important; }
.detail-box.detail-box-admin .ap-stat.fb .ap-stat-ic svg { fill:#fff !important; }
.detail-box.detail-box-admin .ap-stat.ig { background:rgba(255,55,95,.12) !important; }
.detail-box.detail-box-admin .ap-stat.ig .ap-stat-ic { background:linear-gradient(135deg,#feda75,#d62976,#962fbf) !important; }
.detail-box.detail-box-admin .ap-stat.ac { background:rgba(48,209,88,.12) !important; }
.detail-box.detail-box-admin .ap-stat.ac .ap-stat-ic { background:var(--green) !important; }
.detail-box.detail-box-admin .ap-stat.tt { background:rgba(94,92,230,.12) !important; }
.detail-box.detail-box-admin .ap-stat.tt .ap-stat-ic { background:var(--indigo) !important; }
.detail-box.detail-box-admin .ap-stat.pd { background:rgba(255,159,10,.12) !important; }
.detail-box.detail-box-admin .ap-stat.pd .ap-stat-ic { background:var(--orange) !important; }

/* Table header + rows */
.detail-box.detail-box-admin .ap-head {
  display:flex !important; align-items:center !important;
  padding:8px 22px !important;
  font:600 12px/1 var(--ds-font) !important; color:var(--label2) !important;
  border:none !important; background:transparent !important;
}
.detail-box.detail-box-admin .ap-list { padding:0 14px !important; }
.detail-box.detail-box-admin .ap-row {
  display:flex !important; align-items:center !important;
  padding:9px 8px !important; border-radius:12px !important;
  transition:.12s; background:transparent !important;
}
.detail-box.detail-box-admin .ap-row + .ap-row { box-shadow:0 -1px 0 var(--sep) !important; }
.detail-box.detail-box-admin .ap-row:hover { background:var(--card-2) !important; }
.detail-box.detail-box-admin .ap-row.is-me, .detail-box-admin .ap-row.you { background:var(--accent-soft) !important; }
.detail-box.detail-box-admin .ap-row.is-me + .ap-row, .detail-box-admin .ap-row.you + .ap-row { box-shadow:none !important; }
.detail-box.detail-box-admin .ap-av {
  width:30px !important; height:30px !important; border-radius:50% !important;
  display:grid !important; place-items:center !important; color:#fff !important;
  font:600 13px/1 var(--ds-font) !important; flex:0 0 30px !important;
}
.detail-box.detail-box-admin .ap-av.fb { background:var(--blue) !important; }
.detail-box.detail-box-admin .ap-av.ig { background:linear-gradient(135deg,#feda75,#d62976,#962fbf) !important; }
.detail-box.detail-box-admin .ap-av.pd { background:var(--orange) !important; }
.detail-box.detail-box-admin .ap-name { font:600 14px/1.2 var(--ds-font) !important; color:var(--label) !important; flex:1; }
.detail-box.detail-box-admin .ap-you { color:var(--accent) !important; font-weight:600 !important; margin-left:5px; }
.detail-box.detail-box-admin .ap-id { font:400 13px/1 var(--ds-font) !important; color:var(--label2) !important; font-variant-numeric:tabular-nums; }
.detail-box.detail-box-admin .ap-pill {
  display:inline-flex !important; align-items:center !important; height:24px !important;
  padding:0 11px !important; border-radius:999px !important;
  font:600 12px/1 var(--ds-font) !important;
  border:none !important;
}
.detail-box.detail-box-admin .ap-pill.type-fb { background:rgba(24,119,242,.16) !important; color:#1877f2 !important; }
.detail-box.detail-box-admin .ap-pill.type-ig { background:rgba(255,55,95,.16) !important; color:var(--pink) !important; }
.detail-box.detail-box-admin .ap-pill.type-pd { background:rgba(255,159,10,.16) !important; color:var(--orange) !important; }
.detail-box.detail-box-admin .ap-pill.role-admin { background:rgba(48,209,88,.16) !important; color:var(--green) !important; }
.detail-box.detail-box-admin .ap-pill.role-basic { background:rgba(94,92,230,.16) !important; color:var(--indigo) !important; }
.detail-box.detail-box-admin .ap-pill.role-other { background:rgba(152,152,157,.16) !important; color:var(--label3) !important; font-weight:500 !important; }
.detail-box.detail-box-admin .ap-pill.act-yes { background:rgba(48,209,88,.16) !important; color:var(--green) !important; }
.detail-box.detail-box-admin .ap-pill.act-no { background:rgba(152,152,157,.16) !important; color:var(--label3) !important; font-weight:500 !important; }

/* Footer action buttons */
.detail-box.detail-box-admin .detail-foot-admin {
  display:flex !important; align-items:center !important; gap:10px !important;
  padding:14px 22px !important; border-top:1px solid var(--sep) !important;
  flex-wrap:wrap !important; background:transparent !important;
}
.detail-box.detail-box-admin .chk-all { display:flex; align-items:center; gap:8px; font:500 13px/1 var(--ds-font); color:var(--label2); }
.detail-box.detail-box-admin .btn-act {
  display:inline-flex !important; align-items:center !important; gap:7px !important;
  height:38px !important; padding:0 15px !important;
  border-radius:10px !important; border:none !important;
  font:600 13px/1 var(--ds-font) !important; cursor:pointer;
  white-space:nowrap;
}
.detail-box.detail-box-admin .btn-act.act-exit { background:rgba(24,119,242,.16) !important; color:#1877f2 !important; }
.detail-box.detail-box-admin .btn-act.act-lower { background:rgba(255,159,10,.16) !important; color:var(--orange) !important; }
.detail-box.detail-box-admin .btn-act.act-delete { background:rgba(255,69,58,.16) !important; color:var(--red) !important; }
.detail-box.detail-box-admin .btn-act.act-tut { background:rgba(191,90,242,.16) !important; color:var(--purple) !important; }
.detail-box.detail-box-admin .btn-act svg { width:15px !important; height:15px !important; }
.detail-box.detail-box-admin .bm-live-box {
  display:flex; align-items:center; gap:8px;
  font:500 12px/1 var(--ds-font); color:var(--label2);
}
.detail-box.detail-box-admin .bm-live-box .uid-input {
  width:130px; height:36px; padding:0 11px;
  border-radius:9px; border:none;
  box-shadow:inset 0 0 0 1px var(--sep);
  background:var(--card-2); color:var(--label);
  font:400 13px/1 var(--ds-font); outline:none;
}

/* ============================================================
 * ACCOUNT POPUP (TKQC / Share) — khớp mockup mau-dialog-tkqc.html
 * ============================================================ */
.detail-box.detail-box-acc {
  width:760px !important; max-width:96vw !important;
  background:#ffffff !important; border-radius:22px !important;
  border:1px solid rgba(0,0,0,.07) !important;
  box-shadow:0 30px 80px -24px rgba(30,45,80,.3) !important;
  overflow:hidden !important;
  display:flex !important; flex-direction:column !important;
}
[data-theme="dark"] .detail-box.detail-box-acc {
  background:#1c1c1e !important;
  border:1px solid rgba(255,255,255,.09) !important;
  box-shadow:0 30px 80px -20px rgba(0,0,0,.6) !important;
}
[data-theme="dark"] .detail-box.detail-box-acc .detail-foot { background:transparent !important; }
.detail-box.detail-box-acc .detail-head {
  display:flex !important; align-items:center !important; gap:14px !important;
  padding:18px 22px !important; background:transparent !important; border:none !important;
}
.detail-box.detail-box-acc .detail-icon-box {
  width:38px !important; height:38px !important; border-radius:11px !important;
  background:var(--indigo) !important; display:grid !important; place-items:center !important;
  flex:0 0 38px !important; box-shadow:none !important;
}
.detail-box.detail-box-acc .detail-icon-box svg { width:20px !important; height:20px !important; stroke:#fff !important; }
.detail-box.detail-box-acc .detail-info .title { font:600 16px/1.2 var(--ds-font) !important; color:var(--label) !important; }
.detail-box.detail-box-acc .detail-title-row { display:flex !important; align-items:center !important; gap:9px !important; }
.detail-box.detail-box-acc .detail-bm-sub { font:400 12px/1.3 var(--ds-font) !important; color:var(--label2) !important; margin-top:1px !important; }
.detail-box.detail-box-acc .det-status {
  display:inline-flex !important; align-items:center !important; gap:5px !important;
  font:600 11px/1 var(--ds-font) !important; padding:3px 9px !important; border-radius:999px !important;
  border:none !important;
}
.detail-box.detail-box-acc .det-status.live { background:rgba(52,199,89,.16) !important; color:var(--green) !important; }
.detail-box.detail-box-acc .det-status.die  { background:rgba(255,59,48,.16)  !important; color:var(--red)   !important; }
.detail-box.detail-box-acc .det-status .dot { width:6px; height:6px; border-radius:50%; background:currentColor; }
.detail-box.detail-box-acc .detail-close {
  margin-left:auto !important; width:36px !important; height:36px !important; border-radius:50% !important;
  display:grid !important; place-items:center !important; cursor:pointer !important;
  background:transparent !important; color:var(--label2) !important; border:none !important;
}
.detail-box.detail-box-acc .detail-close:hover { background:var(--card-2) !important; color:var(--label) !important; }

.detail-box.detail-box-acc .acp-body { display:flex !important; flex-direction:column !important; flex:1 !important; min-height:0 !important; overflow:hidden !important; }
.detail-box.detail-box-acc .ap-stats {
  display:grid !important; grid-template-columns:repeat(4,minmax(0,1fr)) !important;
  gap:10px !important; padding:4px 22px 12px !important;
}
.detail-box.detail-box-acc .ap-stats.has-dg { grid-template-columns:repeat(5,minmax(0,1fr)) !important; }
.detail-box.detail-box-acc .ap-stat {
  display:flex !important; align-items:center !important; gap:9px !important;
  padding:10px 12px !important; border-radius:12px !important;
  border:1px solid var(--sep) !important; min-width:0 !important;
}
.detail-box.detail-box-acc .ap-stat-ic {
  width:28px !important; height:28px !important; border-radius:8px !important;
  display:grid !important; place-items:center !important; flex:0 0 28px !important;
}
.detail-box.detail-box-acc .ap-stat-ic svg { width:16px !important; height:16px !important; }
.detail-box.detail-box-acc .ap-stat-num { font:700 18px/1 var(--ds-font) !important; }
.detail-box.detail-box-acc .ap-stat-lbl { font:400 11px/1.2 var(--ds-font) !important; color:var(--label2) !important; margin-top:2px !important; white-space:nowrap !important; overflow:hidden !important; text-overflow:ellipsis !important; }
/* Light mode — soft pastel bg */
.detail-box.detail-box-acc .ap-stat.tt { background:rgba(24,119,242,.10) !important; border-color:transparent !important; }
.detail-box.detail-box-acc .ap-stat.tt .ap-stat-ic { background:#1877f2 !important; }
.detail-box.detail-box-acc .ap-stat.tt .ap-stat-num { color:#1877f2 !important; }
.detail-box.detail-box-acc .ap-stat.ac { background:rgba(28,168,81,.11) !important; border-color:transparent !important; }
.detail-box.detail-box-acc .ap-stat.ac .ap-stat-ic { background:#1ca851 !important; }
.detail-box.detail-box-acc .ap-stat.ac .ap-stat-num { color:#1ca851 !important; }
.detail-box.detail-box-acc .ap-stat.di { background:rgba(224,56,59,.09) !important; border-color:transparent !important; }
.detail-box.detail-box-acc .ap-stat.di .ap-stat-ic { background:#e0383b !important; }
.detail-box.detail-box-acc .ap-stat.di .ap-stat-num { color:#e0383b !important; }
.detail-box.detail-box-acc .ap-stat.pd { background:rgba(224,138,0,.12) !important; border-color:transparent !important; }
.detail-box.detail-box-acc .ap-stat.pd .ap-stat-ic { background:#e08a00 !important; }
.detail-box.detail-box-acc .ap-stat.pd .ap-stat-num { color:#e08a00 !important; }
.detail-box.detail-box-acc .ap-stat.dg { background:rgba(110,110,115,.10) !important; border-color:transparent !important; }
.detail-box.detail-box-acc .ap-stat.dg .ap-stat-ic { background:#8e8e93 !important; }
.detail-box.detail-box-acc .ap-stat.dg .ap-stat-num { color:#6e6e73 !important; }

/* Dark mode — saturated bg + bright num color (override app.css forced white) */
[data-theme="dark"] .detail-box.detail-box-acc .ap-stat.tt { background:rgba(10,132,255,.16) !important; border-color:transparent !important; }
[data-theme="dark"] .detail-box.detail-box-acc .ap-stat.tt .ap-stat-ic { background:#0a84ff !important; }
[data-theme="dark"] .detail-box.detail-box-acc .ap-stat.tt .ap-stat-num { color:#0a84ff !important; }
[data-theme="dark"] .detail-box.detail-box-acc .ap-stat.ac { background:rgba(48,209,88,.16) !important; border-color:transparent !important; }
[data-theme="dark"] .detail-box.detail-box-acc .ap-stat.ac .ap-stat-ic { background:#30d158 !important; }
[data-theme="dark"] .detail-box.detail-box-acc .ap-stat.ac .ap-stat-num { color:#30d158 !important; }
[data-theme="dark"] .detail-box.detail-box-acc .ap-stat.di { background:rgba(255,69,58,.16) !important; border-color:transparent !important; }
[data-theme="dark"] .detail-box.detail-box-acc .ap-stat.di .ap-stat-ic { background:#ff453a !important; }
[data-theme="dark"] .detail-box.detail-box-acc .ap-stat.di .ap-stat-num { color:#ff453a !important; }
[data-theme="dark"] .detail-box.detail-box-acc .ap-stat.pd { background:rgba(255,159,10,.16) !important; border-color:transparent !important; }
[data-theme="dark"] .detail-box.detail-box-acc .ap-stat.pd .ap-stat-ic { background:#ff9f0a !important; }
[data-theme="dark"] .detail-box.detail-box-acc .ap-stat.pd .ap-stat-num { color:#ff9f0a !important; }
[data-theme="dark"] .detail-box.detail-box-acc .ap-stat.dg { background:rgba(174,174,178,.14) !important; border-color:transparent !important; }
[data-theme="dark"] .detail-box.detail-box-acc .ap-stat.dg .ap-stat-ic { background:#8e8e93 !important; }
[data-theme="dark"] .detail-box.detail-box-acc .ap-stat.dg .ap-stat-num { color:#aeaeb2 !important; }
.detail-box.detail-box-acc .ap-stat-ic svg { width:19px !important; height:19px !important; stroke:#fff !important; fill:none !important; stroke-width:2 !important; }

.detail-box.detail-box-acc .acp-head {
  display:flex !important; align-items:center !important;
  padding:8px 22px !important; margin:0 !important;
  font:600 12px/1.2 var(--ds-font) !important; color:var(--label2) !important;
  border:none !important; gap:0 !important;
  text-transform:none !important; letter-spacing:0 !important;
}
.detail-box.detail-box-acc .acp-chk-all { flex:0 0 34px !important; width:18px !important; height:18px !important; margin:0 !important; accent-color:var(--accent) !important; cursor:pointer !important; }
.detail-box.detail-box-acc .acp-c-id   { flex:1 1 auto !important; width:auto !important; text-align:left !important; cursor:pointer !important; padding:0 8px 0 18px !important; }
.detail-box.detail-box-acc .acp-c-st   { flex:0 0 130px !important; width:130px !important; text-align:left !important; cursor:pointer !important; }
.detail-box.detail-box-acc .acp-c-lim  { flex:0 0 90px  !important; width:90px  !important; text-align:left !important; cursor:pointer !important; }
.detail-box.detail-box-acc .acp-c-cur  { flex:0 0 100px !important; width:100px !important; text-align:left !important; cursor:pointer !important; }
.detail-box.detail-box-acc .acp-c-date { flex:0 0 110px !important; width:110px !important; text-align:left !important; cursor:pointer !important; }
svg.acp-sort-arr {
  width:11px !important; height:11px !important;
  margin-left:4px !important; vertical-align:middle !important;
  opacity:.55 !important; color:currentColor !important;
  display:inline-block !important; flex-shrink:0 !important;
}
svg.acp-sort-arr.active { opacity:1 !important; color:var(--accent) !important; }
.detail-box.detail-box-acc .acp-h,
.detail-box.detail-box-admin .acp-h { display:inline-flex !important; align-items:center !important; }

.detail-box.detail-box-acc .acp-list {
  display:block !important; gap:0 !important;
  padding:0 14px !important; max-height:430px !important; overflow-y:auto !important;
}
.detail-box.detail-box-acc .acp-row {
  display:flex !important; align-items:center !important;
  padding:10px 8px !important; border-radius:12px !important;
  background:transparent !important; border:none !important;
  min-height:0 !important; gap:0 !important;
  transition:background .12s !important;
}
.detail-box.detail-box-acc .acp-row + .acp-row { box-shadow:0 -1px 0 var(--sep) !important; }
.detail-box.detail-box-acc .acp-row:hover { background:var(--card-2) !important; }
.detail-box.detail-box-acc .acp-row:hover + .acp-row { box-shadow:none !important; }
.detail-box.detail-box-acc .acp-row.checked { background:var(--accent-soft) !important; }
.detail-box.detail-box-acc .acp-row.checked + .acp-row { box-shadow:none !important; }
.detail-box.detail-box-acc .acp-ck-col {
  flex:0 0 34px !important; width:34px !important;
  display:inline-flex !important; align-items:center !important; justify-content:flex-start !important;
}
.detail-box.detail-box-acc .acp-id-col {
  flex:1 1 auto !important; min-width:0 !important;
  display:inline-flex !important; align-items:center !important; gap:10px !important;
  padding-right:8px !important;
}
.detail-box.detail-box-acc .acp-st-col {
  flex:0 0 130px !important; width:130px !important;
  display:inline-flex !important; align-items:center !important; justify-content:flex-start !important;
}
.detail-box.detail-box-acc .acp-chk,
.detail-box.detail-box-acc .acp-chk-all {
  -webkit-appearance:none !important; appearance:none !important;
  flex:0 0 18px !important; width:18px !important; height:18px !important;
  margin:0 !important; padding:0 !important; cursor:pointer !important;
  background:transparent !important;
  border:1.5px solid var(--label3) !important; border-radius:5px !important;
  position:relative !important; transition:.12s !important;
}
.detail-box.detail-box-acc .acp-chk:hover,
.detail-box.detail-box-acc .acp-chk-all:hover { border-color:var(--accent) !important; }
.detail-box.detail-box-acc .acp-chk:checked,
.detail-box.detail-box-acc .acp-chk-all:checked {
  background:var(--accent) !important; border-color:var(--accent) !important;
}
.detail-box.detail-box-acc .acp-chk:checked::after,
.detail-box.detail-box-acc .acp-chk-all:checked::after {
  content:""; position:absolute; left:4px; top:1px;
  width:6px; height:10px; border:solid #fff; border-width:0 2px 2px 0;
  transform:rotate(45deg);
}
.detail-box.detail-box-acc .acp-dot {
  width:8px !important; height:8px !important; border-radius:50% !important;
  flex:0 0 8px !important; margin:0 !important;
}
.detail-box.detail-box-acc .acp-id {
  flex:1 1 auto !important; width:auto !important;
  font:600 14px/1.2 var(--ds-font) !important; color:var(--label) !important;
  font-variant-numeric:tabular-nums !important;
  letter-spacing:0 !important; padding:0 !important;
  overflow:hidden !important; text-overflow:ellipsis !important; white-space:nowrap !important;
}
.detail-box.detail-box-acc .acp-pill {
  flex:0 0 auto !important; width:auto !important;
  height:24px !important; padding:0 11px !important; border-radius:999px !important;
  font:600 12px/1 var(--ds-font) !important;
  display:inline-flex !important; align-items:center !important; justify-content:center !important; gap:6px !important;
  text-align:center !important; border:none !important;
}
.detail-box.detail-box-acc .acp-pill-dot { width:6px !important; height:6px !important; border-radius:50% !important; }
.detail-box.detail-box-acc .acp-limit {
  flex:0 0 90px !important; width:90px !important; text-align:left !important;
  font:600 14px/1.2 var(--ds-font) !important; color:var(--label) !important;
  font-variant-numeric:tabular-nums !important;
}
.detail-box.detail-box-acc .acp-currency {
  flex:0 0 100px !important; width:100px !important; text-align:left !important;
  font:400 13px/1.2 var(--ds-font) !important; color:var(--label2) !important;
}
.detail-box.detail-box-acc .acp-created {
  flex:0 0 110px !important; width:110px !important; text-align:left !important;
  font:400 13px/1.2 var(--ds-font) !important; color:var(--label2) !important;
  font-variant-numeric:tabular-nums !important;
}

.detail-box.detail-box-acc .detail-foot {
  display:flex !important; align-items:center !important; justify-content:flex-end !important;
  gap:10px !important; padding:14px 22px !important;
  border-top:1px solid var(--sep) !important; background:transparent !important;
}
.detail-box.detail-box-acc .foot-btns { display:flex !important; gap:10px !important; }
.detail-box.detail-box-acc .foot-btns .btn {
  display:inline-flex !important; align-items:center !important; gap:7px !important;
  height:40px !important; padding:0 18px !important; border-radius:11px !important;
  font:600 13px/1 var(--ds-font) !important; cursor:pointer !important;
  border:none !important; box-shadow:none !important;
}
.detail-box.detail-box-acc .foot-btns .btn-strong { background:var(--card-3) !important; color:var(--label) !important; }
.detail-box.detail-box-acc .foot-btns .btn-strong:hover { filter:brightness(.96) !important; }
.detail-box.detail-box-acc .foot-btns .btn-primary { background:var(--accent) !important; color:#fff !important; }
.detail-box.detail-box-acc .foot-btns .btn-primary:hover { filter:brightness(1.06) !important; }
.detail-box.detail-box-acc .foot-btns .btn svg { width:16px !important; height:16px !important; }

/* ============================================================
 * EXTRA POPUP (Pages / Instagram / WhatsApp / Partner) — khung chung
 * ============================================================ */
.detail-box.detail-box-extra {
  width:820px !important; max-width:96vw !important;
  background:#ffffff !important; border-radius:22px !important;
  border:1px solid rgba(0,0,0,.07) !important;
  box-shadow:0 30px 80px -24px rgba(30,45,80,.3) !important;
  overflow:hidden !important;
  display:flex !important; flex-direction:column !important;
}
[data-theme="dark"] .detail-box.detail-box-extra {
  background:#1c1c1e !important;
  border:1px solid rgba(255,255,255,.09) !important;
  box-shadow:0 30px 80px -20px rgba(0,0,0,.6) !important;
}
.detail-box.detail-box-extra .detail-head {
  display:flex !important; align-items:center !important; gap:14px !important;
  padding:18px 22px !important; background:transparent !important; border:none !important;
}
.detail-box.detail-box-extra .detail-icon-box {
  width:38px !important; height:38px !important; border-radius:11px !important;
  display:grid !important; place-items:center !important; flex:0 0 38px !important;
  box-shadow:none !important;
}
.detail-box.detail-box-extra .detail-icon-box svg { width:20px !important; height:20px !important; }
.detail-box.detail-box-extra .detail-info .title { font:600 16px/1.2 var(--ds-font) !important; color:var(--label) !important; }
.detail-box.detail-box-extra .detail-sub,
.detail-box.detail-box-extra .detail-bm-sub { font:400 12px/1.3 var(--ds-font) !important; color:var(--label2) !important; margin-top:1px !important; }
.detail-box.detail-box-extra .detail-close {
  margin-left:auto !important; width:36px !important; height:36px !important; border-radius:50% !important;
  display:grid !important; place-items:center !important; cursor:pointer !important;
  background:transparent !important; color:var(--label2) !important; border:none !important;
}
.detail-box.detail-box-extra .detail-close:hover { background:var(--card-2) !important; color:var(--label) !important; }

.detail-box.detail-box-extra .ap-list {
  padding:0 14px 14px !important; max-height:calc(86vh - 120px) !important;
  overflow-y:auto !important; display:block !important;
}
.detail-box.detail-box-extra .ap-row {
  display:flex !important; align-items:center !important; gap:12px !important;
  padding:10px 8px !important; border-radius:12px !important;
  background:transparent !important; border:none !important;
  min-height:0 !important; transition:background .12s !important;
}
.detail-box.detail-box-extra .ap-row + .ap-row { box-shadow:0 -1px 0 var(--sep) !important; }
.detail-box.detail-box-extra .ap-row:hover { background:var(--card-2) !important; }
.detail-box.detail-box-extra .ap-row:hover + .ap-row { box-shadow:none !important; }
.detail-box.detail-box-extra .ap-chk {
  -webkit-appearance:none !important; appearance:none !important;
  flex:0 0 18px !important; width:18px !important; height:18px !important;
  margin:0 !important; padding:0 !important; cursor:pointer !important;
  background:transparent !important;
  border:1.5px solid var(--label3) !important; border-radius:5px !important;
  position:relative !important; transition:.12s !important;
}
.detail-box.detail-box-extra .ap-chk:hover { border-color:var(--accent) !important; }
.detail-box.detail-box-extra .ap-chk:checked {
  background:var(--accent) !important; border-color:var(--accent) !important;
}
.detail-box.detail-box-extra .ap-chk:checked::after {
  content:""; position:absolute; left:4px; top:1px;
  width:6px; height:10px; border:solid #fff; border-width:0 2px 2px 0;
  transform:rotate(45deg);
}
.detail-box.detail-box-extra .ap-av {
  width:32px !important; height:32px !important; border-radius:50% !important;
  display:grid !important; place-items:center !important; flex-shrink:0 !important;
  font:700 14px/1 var(--ds-font) !important; color:#fff !important;
}
.detail-box.detail-box-extra .ap-av.fb { background:#1877f2 !important; }
.detail-box.detail-box-extra .ap-av.ig { background:linear-gradient(135deg,#feda75,#d62976,#962fbf) !important; }
.detail-box.detail-box-extra .ap-av.pd { background:#25d366 !important; }
.detail-box.detail-box-extra .ap-name {
  flex:1 1 auto !important; min-width:0 !important;
  font:600 14px/1.3 var(--ds-font) !important; color:var(--label) !important;
  overflow:hidden !important; text-overflow:ellipsis !important; white-space:nowrap !important;
}
.detail-box.detail-box-extra .ap-name-link { cursor:pointer !important; }
.detail-box.detail-box-extra .ap-name-link:hover { color:var(--accent) !important; text-decoration:underline !important; }
.detail-box.detail-box-extra .ap-id {
  font:400 13px/1 var(--ds-font) !important; color:var(--label2) !important;
  font-variant-numeric:tabular-nums !important; flex-shrink:0 !important;
}
.detail-box.detail-box-extra .ap-pill {
  display:inline-flex !important; align-items:center !important; justify-content:center !important; gap:5px !important;
  height:24px !important; padding:0 11px !important; border-radius:999px !important;
  font:600 12px/1 var(--ds-font) !important; flex-shrink:0 !important;
  border:none !important; text-align:center !important;
}
.detail-box.detail-box-extra .ap-pill.type-fb { background:rgba(24,119,242,.12) !important; color:#1877f2 !important; }
.detail-box.detail-box-extra .ap-pill.type-ig { background:rgba(226,58,120,.12) !important; color:#e23a78 !important; }
.detail-box.detail-box-extra .ap-pill.type-pd { background:rgba(37,211,102,.14) !important; color:#1ca851 !important; }
.detail-box.detail-box-extra .ap-pill.role-admin { background:rgba(48,209,88,.14) !important; color:#1ca851 !important; }
.detail-box.detail-box-extra .ap-pill.role-basic { background:rgba(88,86,214,.14) !important; color:#5856d6 !important; }
.detail-box.detail-box-extra .ap-pill.role-other { background:rgba(138,143,152,.14) !important; color:var(--label3) !important; font-weight:500 !important; }

/* Dark mode tints */
[data-theme="dark"] .detail-box.detail-box-extra .ap-pill.type-fb { background:rgba(10,132,255,.18) !important; color:#0a84ff !important; }
[data-theme="dark"] .detail-box.detail-box-extra .ap-pill.type-ig { background:rgba(255,55,95,.18) !important; color:#ff375f !important; }
[data-theme="dark"] .detail-box.detail-box-extra .ap-pill.type-pd { background:rgba(48,209,88,.18) !important; color:#30d158 !important; }
[data-theme="dark"] .detail-box.detail-box-extra .ap-pill.role-admin { background:rgba(48,209,88,.18) !important; color:#30d158 !important; }
[data-theme="dark"] .detail-box.detail-box-extra .ap-pill.role-basic { background:rgba(94,92,230,.18) !important; color:#a5b4fc !important; }
[data-theme="dark"] .detail-box.detail-box-extra .ap-pill.role-other { background:rgba(174,174,178,.14) !important; color:#aeaeb2 !important; }

/* ============================================================
 * "KHO TÍNH NĂNG" MODAL (modal-overlay + .modal) — khung chung
 * ============================================================ */
.modal-overlay { background:rgba(0,0,0,.45) !important; backdrop-filter:saturate(180%) blur(12px) !important; }
[data-theme="dark"] .modal-overlay { background:rgba(0,0,0,.7) !important; }
.modal-frame { box-shadow:none !important; background:transparent !important; }
.modal {
  background:var(--card) !important;
  border-radius:22px !important;
  border:1px solid var(--sep) !important;
  box-shadow:0 30px 80px -24px rgba(30,45,80,.3) !important;
}
[data-theme="dark"] .modal {
  background:#1c1c1e !important;
  border:1px solid rgba(255,255,255,.09) !important;
  box-shadow:0 30px 80px -20px rgba(0,0,0,.6) !important;
}
.modal-close {
  width:36px !important; height:36px !important; border-radius:50% !important;
  background:transparent !important; color:var(--label2) !important;
  top:14px !important; right:14px !important;
}
.modal-close:hover { background:var(--card-2) !important; color:var(--label) !important; transform:none !important; }
.modal-title { color:var(--label) !important; font:600 20px/1.2 var(--ds-font) !important; letter-spacing:-.01em !important; }
.modal-count {
  background:rgba(0,122,255,.12) !important; color:var(--accent) !important;
  font:600 11px/1 var(--ds-font) !important; padding:4px 10px !important;
}
[data-theme="dark"] .modal-count { background:rgba(10,132,255,.18) !important; color:#0a84ff !important; }
.modal-subtitle { color:var(--label2) !important; font:400 13px/1.4 var(--ds-font) !important; }
.modal-actions { border-bottom:1px solid var(--sep) !important; background:transparent !important; }
.modal-tabs { background:var(--card-2) !important; border-radius:9px !important; }
.modal-tabs .tab { color:var(--label2) !important; font:600 12px/1 var(--ds-font) !important; }
.modal-tabs .tab.active { background:var(--card) !important; color:var(--label) !important; box-shadow:0 1px 2px rgba(0,0,0,.08) !important; }
[data-theme="dark"] .modal-tabs .tab.active { background:var(--card-3) !important; color:var(--label) !important; box-shadow:none !important; }
.modal-search input {
  background:var(--card-2) !important; border:1px solid var(--sep) !important;
  color:var(--label) !important; font:400 13px/1 var(--ds-font) !important;
  border-radius:10px !important;
}
.modal-search input:focus { border-color:var(--accent) !important; box-shadow:0 0 0 3px var(--accent-soft) !important; }

/* ============================================================
 * COLS POPOVER (tuỳ chỉnh cột bảng) — khung chung
 * ============================================================ */
.cols-popover .cols-modal-box {
  background:var(--card) !important; border-radius:22px !important; width:440px !important;
  border:1px solid var(--sep) !important;
  box-shadow:0 30px 80px -24px rgba(30,45,80,.3) !important;
  padding:18px 18px 14px !important;
}
[data-theme="dark"] .cols-popover .cols-modal-box {
  background:#1c1c1e !important; border:1px solid rgba(255,255,255,.09) !important;
  box-shadow:0 30px 80px -20px rgba(0,0,0,.6) !important;
}
.cols-modal-close {
  width:36px !important; height:36px !important;
  background:transparent !important; color:var(--label2) !important;
}
.cols-modal-close:hover { background:var(--card-2) !important; color:var(--label) !important; transform:none !important; }
[data-theme="dark"] .cols-modal-close { background:transparent !important; color:var(--label2) !important; }
[data-theme="dark"] .cols-modal-close:hover { background:var(--card-2) !important; color:var(--label) !important; }
.cols-popover-head { border-bottom:1px solid var(--sep) !important; }
.cols-popover-title { color:var(--label) !important; font:700 14px/1.2 var(--ds-font) !important; }
.cols-list { gap:0 !important; }
.cols-list .cols-item {
  background:transparent !important; border:none !important;
  border-radius:10px !important; padding:10px 12px !important;
}
.cols-list .cols-item + .cols-item { box-shadow:0 -1px 0 var(--sep) !important; }
.cols-list .cols-item:hover { background:var(--card-2) !important; }
.cols-list .cols-item:hover + .cols-item { box-shadow:none !important; }
.cols-list .cols-item:has(.cols-chk:checked) { background:transparent !important; }
[data-theme="dark"] .cols-list .cols-item { background:transparent !important; border:none !important; }
[data-theme="dark"] .cols-list .cols-item:hover { background:var(--card-2) !important; }
[data-theme="dark"] .cols-list .cols-item:has(.cols-chk:checked) { background:transparent !important; }
.cols-list .cols-chk:checked { background:var(--accent) !important; }
.cols-popover-foot { border-top:1px solid var(--sep) !important; }
.cols-foot-default {
  background:var(--card-3) !important; color:var(--label) !important;
  border:none !important; border-radius:11px !important;
  height:40px !important; padding:0 18px !important; font:600 13px/1 var(--ds-font) !important;
}
.cols-foot-default:hover { filter:brightness(.96) !important; background:var(--card-3) !important; }
[data-theme="dark"] .cols-foot-default { background:var(--card-3) !important; color:var(--label) !important; }
.cols-foot-save {
  background:var(--accent) !important; color:#fff !important;
  border:none !important; border-radius:11px !important;
  height:40px !important; padding:0 18px !important; font:600 13px/1 var(--ds-font) !important;
  box-shadow:none !important;
}
.cols-foot-save:hover { filter:brightness(1.06) !important; box-shadow:none !important; }

/* ============================================================
 * SWAP MODAL (chuyển account/cấu hình) — khung chung
 * ============================================================ */
.swap-modal-overlay { background:rgba(0,0,0,.4) !important; backdrop-filter:saturate(180%) blur(8px) !important; pointer-events:auto !important; }
[data-theme="dark"] .swap-modal-overlay { background:rgba(0,0,0,.7) !important; }
/* Modal Lọc theo ID BM: KHÔNG làm mờ/tối nền */
.swap-modal-overlay:has(.id-flt-box) { background:transparent !important; backdrop-filter:none !important; }
.swap-modal-box {
  background:var(--card) !important; border-radius:22px !important;
  border:1px solid var(--sep) !important;
  box-shadow:0 30px 80px -24px rgba(30,45,80,.3) !important;
  padding:20px 22px 18px !important;
}
[data-theme="dark"] .swap-modal-box {
  background:#1c1c1e !important; border:1px solid rgba(255,255,255,.09) !important;
  box-shadow:0 30px 80px -20px rgba(0,0,0,.6) !important;
}
.swap-close {
  width:36px !important; height:36px !important; top:14px !important; right:14px !important;
  background:transparent !important; color:var(--label2) !important;
}
.swap-close:hover { background:var(--card-2) !important; color:var(--label) !important; }
.swap-search {
  background:var(--card-2) !important; border:1px solid var(--sep) !important;
  border-radius:11px !important; color:var(--label) !important;
  font:400 13px/1 var(--ds-font) !important;
}
.swap-search:focus { border-color:var(--accent) !important; background:var(--card) !important; box-shadow:0 0 0 3px var(--accent-soft) !important; }
.swap-count { color:var(--accent) !important; font:700 11px/1 var(--ds-font) !important; letter-spacing:.06em !important; }
.swap-list { gap:0 !important; }
.swap-row {
  background:transparent !important; border-radius:12px !important;
  padding:10px 12px !important; transition:background .12s !important;
}
.swap-row + .swap-row { box-shadow:0 -1px 0 var(--sep) !important; }
.swap-row:hover { background:var(--card-2) !important; }
.swap-row:hover + .swap-row { box-shadow:none !important; }
.swap-row.is-active { background:rgba(28,168,81,.12) !important; }
.swap-row.is-active + .swap-row { box-shadow:none !important; }
[data-theme="dark"] .swap-row.is-active { background:rgba(48,209,88,.16) !important; }
.swap-row-nm { color:var(--label) !important; font:600 14px/1.3 var(--ds-font) !important; }
.swap-row-uid { color:var(--label2) !important; font:400 12px/1.2 var(--ds-font) !important; font-variant-numeric:tabular-nums !important; }
.swap-badge {
  background:rgba(28,168,81,.12) !important; color:#1ca851 !important;
  box-shadow:none !important; border:none !important;
  font:600 11px/1 var(--ds-font) !important; padding:4px 10px !important;
}
[data-theme="dark"] .swap-badge { background:rgba(48,209,88,.16) !important; color:#30d158 !important; }

/* ============================================================
 * LOAD CONFIG MODAL (bm-loadcfg) — khung chung
 * ============================================================ */
.bm-loadcfg-modal { background:rgba(0,0,0,.45) !important; backdrop-filter:saturate(180%) blur(10px) !important; }
[data-theme="dark"] .bm-loadcfg-modal { background:rgba(0,0,0,.7) !important; }
.bm-loadcfg-modal .lcfg-box {
  background:var(--card) !important; border-radius:22px !important;
  border:1px solid var(--sep) !important;
  box-shadow:0 30px 80px -24px rgba(30,45,80,.3) !important;
  width:620px !important; max-width:96vw !important;
}
[data-theme="dark"] .bm-loadcfg-modal .lcfg-box {
  background:#1c1c1e !important; border:1px solid rgba(255,255,255,.09) !important;
  box-shadow:0 30px 80px -22px rgba(0,0,0,.55) !important;
}
[data-theme="dark"] .bm-loadcfg-modal .lcfg-card,
[data-theme="dark"] .bm-loadcfg-modal .lcfg-row { background:#2c2c2e !important; border:1.5px solid transparent !important; }
[data-theme="dark"] .bm-loadcfg-modal .lcfg-card.active { background:rgba(10,132,255,.16) !important; border-color:#0a84ff !important; }
.bm-loadcfg-modal .lcfg-ids-input {
  background:var(--card-2) !important; border:none !important;
  box-shadow:inset 0 0 0 1px var(--sep) !important;
  color:var(--label) !important; border-radius:12px !important;
  font:400 13px/1.7 var(--ds-font) !important;
  font-variant-numeric:tabular-nums !important;
  padding:12px 14px !important; height:104px !important;
}
.bm-loadcfg-modal .lcfg-ids-input:focus { box-shadow:inset 0 0 0 2px var(--accent) !important; }

/* Icon sq: solid color + white svg, khớp mockup */
.bm-loadcfg-modal .lcfg-card-ic {
  width:36px !important; height:36px !important; border-radius:10px !important;
  display:grid !important; place-items:center !important;
}
.bm-loadcfg-modal .lcfg-card-ic svg { width:19px !important; height:19px !important; stroke:#fff !important; fill:none !important; }
.bm-loadcfg-modal .lcfg-tone-rose    { background:#e0383b !important; color:#fff !important; }
.bm-loadcfg-modal .lcfg-tone-blue    { background:#1877f2 !important; color:#fff !important; }
.bm-loadcfg-modal .lcfg-tone-amber   { background:#e08a00 !important; color:#fff !important; }
.bm-loadcfg-modal .lcfg-tone-emerald { background:#1ca851 !important; color:#fff !important; }
.bm-loadcfg-modal .lcfg-tone-pink    { background:#e23a78 !important; color:#fff !important; }
.bm-loadcfg-modal .lcfg-tone-green   { background:#1ca851 !important; color:#fff !important; }
.bm-loadcfg-modal .lcfg-tone-orange  { background:#e08a00 !important; color:#fff !important; }
.bm-loadcfg-modal .lcfg-tone-sky     { background:#1499b0 !important; color:#fff !important; }
.bm-loadcfg-modal .lcfg-tone-violet  { background:#9b4dd6 !important; color:#fff !important; }
.bm-loadcfg-modal .lcfg-tone-indigo  { background:var(--indigo) !important; color:#fff !important; }
[data-theme="dark"] .bm-loadcfg-modal .lcfg-tone-rose    { background:#ff453a !important; }
[data-theme="dark"] .bm-loadcfg-modal .lcfg-tone-blue    { background:#0a84ff !important; }
[data-theme="dark"] .bm-loadcfg-modal .lcfg-tone-amber   { background:#ff9f0a !important; }
[data-theme="dark"] .bm-loadcfg-modal .lcfg-tone-emerald { background:#30d158 !important; }
[data-theme="dark"] .bm-loadcfg-modal .lcfg-tone-pink    { background:#ff375f !important; }
[data-theme="dark"] .bm-loadcfg-modal .lcfg-tone-green   { background:#30d158 !important; }
[data-theme="dark"] .bm-loadcfg-modal .lcfg-tone-orange  { background:#ff9f0a !important; }
[data-theme="dark"] .bm-loadcfg-modal .lcfg-tone-sky     { background:#40c8e0 !important; }
.lcfg-head { padding:18px 22px !important; border-bottom:1px solid var(--sep) !important; gap:14px !important; }
.lcfg-head-ic {
  width:46px !important; height:46px !important; border-radius:13px !important;
  background:var(--indigo) !important; color:#fff !important;
  display:grid !important; place-items:center !important; flex:0 0 46px !important;
}
.lcfg-head-ic svg { stroke:#fff !important; }
.lcfg-head-title { color:var(--label) !important; font:600 18px/1.2 var(--ds-font) !important; }
.lcfg-head-sub { color:var(--label2) !important; font:400 13px/1.3 var(--ds-font) !important; margin-top:3px !important; }
.lcfg-close {
  width:36px !important; height:36px !important; border-radius:50% !important;
  background:transparent !important; color:var(--label2) !important;
}
.lcfg-close:hover { background:var(--card-2) !important; color:var(--label) !important; }
.lcfg-section-title { color:var(--label2) !important; font:600 11px/1.2 var(--ds-font) !important; letter-spacing:.6px !important; }
.lcfg-card {
  background:transparent !important; border:1px solid var(--sep) !important;
  border-radius:12px !important; padding:12px 14px !important;
}
.lcfg-card:hover { border-color:var(--accent) !important; }
.lcfg-card.active { background:var(--accent-soft) !important; border-color:var(--accent) !important; }
[data-theme="dark"] .lcfg-card { background:transparent !important; border:1px solid rgba(255,255,255,.08) !important; }
[data-theme="dark"] .lcfg-card.active { background:var(--accent-soft) !important; border-color:var(--accent) !important; }
.lcfg-card-title { color:var(--label) !important; font:600 13px/1.2 var(--ds-font) !important; }
.lcfg-card-desc { color:var(--label2) !important; font:400 11.5px/1.3 var(--ds-font) !important; }
.lcfg-card-check { background:var(--accent) !important; }
.lcfg-row {
  background:transparent !important; border:1px solid var(--sep) !important;
  border-radius:12px !important;
}
[data-theme="dark"] .lcfg-row { background:transparent !important; border:1px solid rgba(255,255,255,.08) !important; }
.lcfg-row-title { color:var(--label2) !important; font:600 11.5px/1.2 var(--ds-font) !important; }
.lcfg-row-desc { color:var(--label2) !important; font:400 11.5px/1.3 var(--ds-font) !important; }
.lcfg-ids-input, .lcfg-num-input {
  background:var(--card-2) !important; border:1px solid var(--sep) !important;
  color:var(--label) !important; border-radius:10px !important;
  font:400 13px/1.4 var(--ds-font) !important;
}
.lcfg-ids-input:focus, .lcfg-num-input:focus { border-color:var(--accent) !important; box-shadow:0 0 0 3px var(--accent-soft) !important; }
.lcfg-foot { padding:14px 22px !important; border-top:1px solid var(--sep) !important; gap:10px !important; }

/* Mask "prefix + ***" — bỏ letter-spacing rộng cũ của thời 8 dot */
.masked-id { letter-spacing:0 !important; opacity:.75 !important; font-weight:inherit !important; }
.masked-name { letter-spacing:1px !important; }

/* Datagrid zoom slider inline trên toolbar */
.dg-zoom-bar {
  display:inline-flex; align-items:center; gap:8px;
  height:30px; padding:0 12px; border-radius:10px;
  background:var(--card-2); border:1px solid var(--sep);
  user-select:none;
}
.dg-zoom-ic { color:var(--label2); flex:0 0 14px; }
.dg-zoom-slider {
  -webkit-appearance:none; appearance:none;
  width:140px; height:4px; padding:0; margin:0;
  background:linear-gradient(to right, var(--accent) 0%, var(--accent) var(--fill,33.3%), var(--card-3) var(--fill,33.3%), var(--card-3) 100%);
  border-radius:999px; cursor:pointer; outline:none;
}
.dg-zoom-slider::-webkit-slider-thumb {
  -webkit-appearance:none; appearance:none;
  width:14px; height:14px; border-radius:50%;
  background:#fff; border:none;
  box-shadow:0 1px 3px rgba(0,0,0,.18), 0 0 0 1px rgba(0,0,0,.04);
  cursor:grab; transition:transform .1s;
}
.dg-zoom-slider::-webkit-slider-thumb:active { cursor:grabbing; transform:scale(1.15); }
[data-theme="dark"] .dg-zoom-slider::-webkit-slider-thumb { background:#f5f5f7; box-shadow:0 1px 3px rgba(0,0,0,.5); }
.dg-zoom-val {
  min-width:38px; text-align:right; cursor:pointer;
  font:600 11.5px/1 var(--ds-font); color:var(--label);
  font-variant-numeric:tabular-nums;
}
.dg-zoom-val:hover { color:var(--accent); }

/* ============================================================
 * PROFILE PANEL (.fpp-card) — khớp mockup mau-panel-ho-so.html
 * ============================================================ */
/* BASE LAYER — port từ extension app.js (bản web trước đây thiếu hẳn tầng này
   → nút × lệch trái, dòng dồn cục, dot avatar + toggle vỡ). Tầng .fpp-overlay phía
   dưới (cao điểm hơn + !important) sẽ tinh chỉnh màu/size đè lên. */
.fpp-card { width:460px; max-width:96vw; max-height:90vh; overflow-y:auto; border-radius:16px; background:#fff; display:flex; flex-direction:column; position:relative; }
[data-theme="dark"] .fpp-card { background:#1a1f2e; }
.fpp-close { position:absolute; top:12px; right:12px; z-index:2; width:30px; height:30px; border-radius:999px; background:rgba(0,0,0,.06); color:#6e6e73; border:none; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; font-size:18px; }
.fpp-cover-wrap { padding:14px 14px 0; position:relative; }
.fpp-cover { position:relative; height:100px; border-radius:14px; overflow:hidden; background:#3a2474; }
.fpp-av-wrap { position:absolute; left:50%; bottom:-28px; transform:translateX(-50%); }
.fpp-av { position:relative; width:64px; height:64px; border-radius:50%; background:#1877f2 center/cover no-repeat; color:#fff; font-size:26px; font-weight:700; display:flex; align-items:center; justify-content:center; }
.fpp-av-dot { position:absolute; right:2px; bottom:2px; width:12px; height:12px; border-radius:50%; background:#30d158; border:2px solid #fff; }
[data-theme="dark"] .fpp-av-dot { border-color:#1a1f2e; }
.fpp-name-block { padding:36px 18px 14px; text-align:center; }
.fpp-name { font-size:18px; font-weight:700; color:#2a2a2c; }
.fpp-uid-row { display:inline-flex; align-items:center; gap:6px; margin-top:6px; padding:4px 12px; border-radius:999px; background:rgba(0,0,0,.04); font-size:12px; color:#6e6e73; cursor:pointer; transition:background .12s; }
.fpp-uid-copy { cursor:pointer; opacity:.6; transition:opacity .12s; display:inline-flex; }
.fpp-uid-copy:hover { opacity:1; }
.fpp-section { padding:0 16px 14px; }
.fpp-list { background:rgba(0,0,0,.02); border:.5px solid rgba(0,0,0,.08); border-radius:10px; overflow:hidden; }
.fpp-row { display:flex; align-items:center; gap:10px; padding:10px 12px; }
.fpp-row-lbl { font-size:12.5px; font-weight:500; color:#424245; flex-shrink:0; }
.fpp-row-val { margin-left:auto; font-size:12.5px; color:#6e6e73; max-width:220px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; padding:3px 8px; border-radius:6px; cursor:pointer; transition:background .12s,color .12s; }
.fpp-row-val.no-copy { cursor:default; }
.fpp-section-head { display:flex; align-items:center; gap:10px; padding:10px 12px; cursor:pointer; }
.fpp-section-head-lbl { font-size:12.5px; font-weight:600; flex:1; }
.fpp-adv-body { overflow:hidden; }
.fpp-switch { position:relative; width:38px; height:22px; border-radius:999px; background:#c7c7cc; cursor:pointer; transition:background .15s; flex-shrink:0; }
.fpp-switch.on { background:#0a84ff; }
.fpp-switch::after { content:""; position:absolute; top:2px; left:2px; width:18px; height:18px; border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.2); transition:left .15s; }
.fpp-switch.on::after { left:18px; }
.fpp-tok-row { display:flex; align-items:center; gap:10px; padding:9px 12px; }
.fpp-tok-input { flex:1; min-width:0; padding:6px 10px; border-radius:6px; background:rgba(0,0,0,.04); border:.5px solid rgba(0,0,0,.06); font-size:12px; color:#424245; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; cursor:pointer; }
.fpp-eye { cursor:pointer; color:#8e8e93; flex-shrink:0; padding:4px; display:inline-flex; }
.fpp-act { display:flex; align-items:center; gap:10px; padding:12px; cursor:pointer; transition:background .12s; font-size:13px; color:#424245; font-weight:500; }
.fpp-act.danger { color:#d70015; }
/* Loading: KHÔNG làm mờ/tối popup nữa — chỉ 1 chip icon xoay nổi giữa, content vẫn rõ. */
.fpp-loader { position:absolute; inset:0; z-index:5; display:flex; align-items:center; justify-content:center; pointer-events:none; }
.fpp-spinner { width:48px; height:48px; border-radius:50%; background:#fff; box-shadow:0 8px 22px -8px rgba(0,0,0,.4), 0 0 0 1px rgba(0,0,0,.06); display:flex; align-items:center; justify-content:center; color:#0a84ff; animation:fppSpin .9s linear infinite; }
[data-theme="dark"] .fpp-spinner { background:#26262a; box-shadow:0 8px 22px -8px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.08); }
@keyframes fppSpin { from{transform:rotate(0deg);} to{transform:rotate(360deg);} }

.fpp-overlay .fpp-card {
  width:430px !important; max-width:96vw !important; border-radius:22px !important;
  background:#fff !important; border:1px solid rgba(0,0,0,.07) !important;
  box-shadow:0 30px 80px -26px rgba(30,45,80,.3) !important;
}
[data-theme="dark"] .fpp-overlay .fpp-card {
  background:#1c1c1e !important; border:1px solid rgba(255,255,255,.09) !important;
  box-shadow:0 30px 80px -22px rgba(0,0,0,.55) !important;
}
.fpp-overlay .fpp-close {
  width:34px !important; height:34px !important; top:14px !important; right:14px !important;
  background:rgba(255,255,255,.25) !important; color:#fff !important;
  backdrop-filter:blur(8px) !important;
  z-index:10 !important; pointer-events:auto !important;
  font-size:20px !important; line-height:1 !important;
}
.fpp-overlay .fpp-close:hover { background:rgba(255,255,255,.4) !important; }
.fpp-overlay .fpp-cover-wrap { padding:0 !important; }
.fpp-overlay .fpp-cover {
  height:100px !important; border-radius:22px 22px 0 0 !important; overflow:hidden !important;
  background:
    radial-gradient(120% 150% at 88% 4%, rgba(91,92,240,.9) 0%, transparent 52%),
    radial-gradient(110% 130% at 8% 0%, rgba(255,255,255,.22) 0%, transparent 40%),
    linear-gradient(125deg,#ff5e7e 0%,#a855f7 50%,#5b5cf0 100%) !important;
  box-shadow:inset 0 -1px 0 rgba(0,0,0,.07) !important;
}
.fpp-overlay .fpp-cover::after {
  content:"" !important; display:block !important; position:absolute !important; inset:0 !important;
  background:radial-gradient(85% 55% at 24% 0%, rgba(255,255,255,.20), transparent 72%) !important;
  pointer-events:none !important;
}
.fpp-overlay .fpp-badge {
  top:14px !important; right:46px !important; padding:5px 11px !important;
  font-size:11.5px !important; font-weight:600 !important; backdrop-filter:blur(8px) !important;
}
.fpp-overlay .fpp-av-wrap { bottom:-36px !important; }
.fpp-overlay .fpp-av {
  width:72px !important; height:72px !important; font-size:28px !important;
  border-radius:50% !important; overflow:hidden !important;
  background-color:#fbbc04;
  background-image:linear-gradient(135deg,#fbbc04,#ef4444);
  background-size:cover; background-position:center; background-repeat:no-repeat;
  box-shadow:0 0 0 3px #30d158, 0 0 0 5px #fff, 0 6px 18px -6px rgba(0,0,0,.4) !important;
}
[data-theme="dark"] .fpp-overlay .fpp-av { box-shadow:0 0 0 3px #30d158, 0 0 0 6px #1c1c1e, 0 6px 18px -6px rgba(0,0,0,.6) !important; }
.fpp-overlay .fpp-av-dot { width:16px !important; height:16px !important; right:4px !important; bottom:4px !important; border-width:3px !important; }
.fpp-overlay .fpp-name-block { padding:42px 20px 12px !important; }
.fpp-overlay .fpp-name { font-size:17px !important; font-weight:700 !important; color:var(--label) !important; }
[data-theme="dark"] .fpp-overlay .fpp-name { color:#f5f5f7 !important; }
.fpp-overlay .fpp-uid-row {
  background:var(--card-2) !important; padding:4px 12px !important; font-size:12px !important;
  color:var(--label2) !important; gap:7px !important;
}
[data-theme="dark"] .fpp-overlay .fpp-uid-row { background:var(--card-2) !important; color:var(--label2) !important; }
.fpp-overlay .fpp-section { padding:0 16px 10px !important; }
.fpp-overlay .fpp-section:last-child { padding-bottom:14px !important; }
.fpp-overlay .fpp-list {
  background:var(--card-2) !important; border:none !important; border-radius:14px !important;
}
[data-theme="dark"] .fpp-overlay .fpp-list { background:var(--card-2) !important; border:none !important; }
.fpp-overlay .fpp-row {
  gap:11px !important; padding:8px 13px !important;
  border-bottom:none !important; box-shadow:0 -1px 0 var(--sep) !important;
}
.fpp-overlay .fpp-row:first-child { box-shadow:none !important; }
.fpp-overlay .fpp-row .fpp-row-ic,
.fpp-overlay .fpp-tok-row .fpp-row-ic,
.fpp-overlay .fpp-act .fpp-row-ic,
.fpp-overlay .fpp-section-head .fpp-row-ic {
  width:26px !important; height:26px !important; border-radius:7px !important;
  color:#fff !important; flex:0 0 26px !important;
  display:inline-flex !important; align-items:center !important; justify-content:center !important;
}
.fpp-overlay .fpp-row-ic svg { width:14px !important; height:14px !important; }
.fpp-overlay .fpp-row .fpp-row-ic { background:var(--accent) !important; }
.fpp-overlay .fpp-row:nth-child(1) .fpp-row-ic { background:#1877f2 !important; }
[data-theme="dark"] .fpp-overlay .fpp-row:nth-child(1) .fpp-row-ic { background:#0a84ff !important; }
.fpp-overlay .fpp-row:nth-child(2) .fpp-row-ic { background:#1499b0 !important; }
[data-theme="dark"] .fpp-overlay .fpp-row:nth-child(2) .fpp-row-ic { background:#40c8e0 !important; }
.fpp-overlay .fpp-row:nth-child(3) .fpp-row-ic { background:#e23a78 !important; }
[data-theme="dark"] .fpp-overlay .fpp-row:nth-child(3) .fpp-row-ic { background:#ff375f !important; }
.fpp-overlay .fpp-row:nth-child(4) .fpp-row-ic { background:#9b4dd6 !important; }
[data-theme="dark"] .fpp-overlay .fpp-row:nth-child(4) .fpp-row-ic { background:#bf5af2 !important; }
.fpp-overlay .fpp-row-lbl { font-size:13.5px !important; font-weight:600 !important; color:var(--label) !important; }
[data-theme="dark"] .fpp-overlay .fpp-row-lbl { color:var(--label) !important; }
.fpp-overlay .fpp-row-val { font-size:13.5px !important; color:var(--label2) !important; font-weight:500 !important; }
/* Adv list: container không có bg, để section-head và body thành 2 card riêng */
.fpp-overlay #fpp-adv-list { background:transparent !important; border-radius:0 !important; overflow:visible !important; }
.fpp-overlay .fpp-section-head {
  background:var(--card-2) !important; border-radius:14px !important;
  padding:12px 14px !important; gap:11px !important; margin:0 0 10px !important;
}
.fpp-overlay .fpp-section-head .fpp-row-ic { background:var(--label3) !important; }
.fpp-overlay .fpp-section-head-lbl { font-size:13.5px !important; font-weight:600 !important; color:var(--label) !important; flex:1 !important; }
.fpp-overlay .fpp-adv-body {
  background:var(--card-2) !important; border-radius:14px !important;
  border-top:none !important; overflow:hidden !important;
  padding:2px 0 !important;
  max-height:600px; opacity:1; transition:max-height .25s ease, opacity .2s ease, padding .25s ease, margin .25s ease;
}
.fpp-overlay .fpp-adv-body.collapsed {
  max-height:0 !important; opacity:0 !important; padding:0 !important;
  margin-top:-10px !important;
}
.fpp-overlay .fpp-switch {
  width:46px !important; height:28px !important;
  background:var(--card-3) !important;
}
.fpp-overlay .fpp-switch::after { width:24px !important; height:24px !important; }
.fpp-overlay .fpp-switch.on::after { left:20px !important; }
.fpp-overlay .fpp-switch.on { background:var(--accent) !important; }
.fpp-overlay .fpp-tok-row {
  gap:11px !important; padding:7px 13px !important;
  border-bottom:none !important; box-shadow:0 -1px 0 var(--sep) !important;
}
.fpp-overlay .fpp-tok-row:first-child { box-shadow:none !important; }
.fpp-overlay .fpp-tok-row .fpp-row-ic {
  width:30px !important; height:30px !important; border-radius:8px !important;
  background:var(--orange) !important; color:#fff !important;
}
.fpp-overlay .fpp-tok-row[data-tok="cookie"] .fpp-row-ic { background:var(--label3) !important; }
.fpp-overlay .fpp-tok-input {
  background:var(--card) !important; box-shadow:inset 0 0 0 1px var(--sep) !important;
  border:none !important; height:36px !important; border-radius:9px !important;
  padding:0 12px !important; font-size:13px !important; color:var(--label2) !important;
  display:flex !important; align-items:center !important;
  letter-spacing:2px !important;
}
[data-theme="dark"] .fpp-overlay .fpp-tok-input { background:var(--card) !important; box-shadow:inset 0 0 0 1px var(--sep) !important; color:var(--label2) !important; }
.fpp-overlay .fpp-eye {
  width:30px !important; height:30px !important; border-radius:8px !important;
  display:grid !important; place-items:center !important; padding:0 !important;
  color:var(--label2) !important;
}
.fpp-overlay .fpp-eye:hover { background:var(--card-2) !important; color:var(--label) !important; }
.fpp-overlay .fpp-act {
  padding:9px 13px !important; font-size:13px !important; font-weight:600 !important;
  color:var(--label) !important; gap:11px !important;
  border-top:none !important; box-shadow:0 -1px 0 var(--sep) !important;
}
.fpp-overlay .fpp-act:first-child { box-shadow:none !important; }
.fpp-overlay .fpp-act:hover { background:var(--card-3) !important; }
.fpp-overlay .fpp-act .fpp-row-ic {
  width:30px !important; height:30px !important; border-radius:8px !important;
  background:#1877f2 !important; color:#fff !important;
}
.fpp-overlay .fpp-act:nth-child(2) .fpp-row-ic { background:#1499b0 !important; }
[data-theme="dark"] .fpp-overlay .fpp-act:nth-child(2) .fpp-row-ic { background:#40c8e0 !important; }
.fpp-overlay .fpp-act.danger { color:var(--red) !important; }
.fpp-overlay .fpp-act.danger .fpp-row-ic { background:#e0383b !important; color:#fff !important; }
[data-theme="dark"] .fpp-overlay .fpp-act.danger .fpp-row-ic { background:#ff453a !important; }

/* ============================================================
 * KHO TÍNH NĂNG — feature cards (.feat-card) — khớp mockup
 * ============================================================ */
.modal-grid {
  display:grid !important; grid-template-columns:repeat(4, minmax(0, 1fr)) !important;
  gap:13px !important; padding:0 22px 20px !important;
}
.modal-grid .feat-card {
  background:var(--card-2) !important; border:1px solid var(--sep) !important;
  border-radius:16px !important; padding:14px !important;
  min-height:168px !important; display:flex !important; flex-direction:column !important;
  box-shadow:none !important;
}
.modal-grid .feat-card:hover { background:var(--card-2) !important; border-color:var(--sep) !important; transform:none !important; }
.modal-grid .feat-card.feat-locked {
  border-color:rgba(224,138,0,.35) !important;
  background:color-mix(in srgb, #e08a00 7%, var(--card-2)) !important;
}
[data-theme="dark"] .modal-grid .feat-card { background:#2c2c2e !important; border:1px solid rgba(255,255,255,.08) !important; }
[data-theme="dark"] .modal-grid .feat-card.feat-locked {
  border-color:rgba(255,159,10,.35) !important;
  background:color-mix(in srgb, #ff9f0a 8%, #2c2c2e) !important;
}
.modal-grid .feat-head {
  display:flex !important; align-items:flex-start !important; justify-content:space-between !important;
  margin-bottom:11px !important;
}
.modal-grid .feat-ico {
  width:42px !important; height:42px !important; border-radius:12px !important;
  display:grid !important; place-items:center !important;
  background:var(--c, var(--accent)) !important;
}
.modal-grid .feat-ico svg { width:22px !important; height:22px !important; stroke:#fff !important; fill:none !important; }
.modal-grid .feat-fav {
  width:26px !important; height:26px !important; border-radius:50% !important;
  display:grid !important; place-items:center !important; cursor:pointer !important;
  background:var(--card-3) !important; color:var(--label3) !important;
  border:none !important; padding:0 !important;
}
.modal-grid .feat-fav.on { background:#e0383b !important; color:#fff !important; }
[data-theme="dark"] .modal-grid .feat-fav.on { background:#ff453a !important; }
.modal-grid .feat-fav svg { width:14px !important; height:14px !important; stroke:currentColor !important; fill:currentColor !important; stroke-width:1.5 !important; }
.modal-grid .feat-corner-tag {
  display:inline-flex !important; align-items:center !important; gap:4px !important;
  height:22px !important; padding:0 9px !important; border-radius:999px !important;
  font-size:11px !important; font-weight:700 !important; color:#fff !important;
  border:none !important;
}
.modal-grid .feat-corner-tag.tag-pro { background:#e08a00 !important; }
[data-theme="dark"] .modal-grid .feat-corner-tag.tag-pro { background:#ff9f0a !important; }
.modal-grid .feat-corner-tag.tag-owned { background:#1ca851 !important; }
[data-theme="dark"] .modal-grid .feat-corner-tag.tag-owned { background:#30d158 !important; }
.modal-grid .feat-corner-tag svg { width:11px !important; height:11px !important; }
.modal-grid .feat-name {
  font:600 14px/1.3 var(--ds-font) !important; color:var(--label) !important;
  letter-spacing:-.01em !important;
}
.modal-grid .feat-desc {
  font:400 11.5px/1.45 var(--ds-font) !important; color:var(--label2) !important;
  margin-top:4px !important; flex:1 !important;
}
.modal-grid .feat-foot { margin-top:11px !important; padding:0 !important; }
.modal-grid .feat-btn {
  width:100% !important; height:34px !important; border-radius:9px !important;
  display:flex !important; align-items:center !important; justify-content:center !important; gap:6px !important;
  font:600 12.5px/1 var(--ds-font) !important; cursor:pointer !important;
  border:none !important; padding:0 !important;
}
.modal-grid .feat-btn-added { background:rgba(28,168,81,.11) !important; color:#1ca851 !important; }
[data-theme="dark"] .modal-grid .feat-btn-added { background:rgba(48,209,88,.16) !important; color:#30d158 !important; }
.modal-grid .feat-btn-add { background:var(--accent-soft) !important; color:var(--accent) !important; }
.modal-grid .feat-btn-premium { background:#e08a00 !important; color:#fff !important; }
[data-theme="dark"] .modal-grid .feat-btn-premium { background:#ff9f0a !important; }
.modal-grid .feat-btn-premium:hover { filter:brightness(1.06) !important; }

/* ============================================================
 * ADD ACCOUNT DIALOG (.add-acc-box) — khớp mockup mau-dialog-dang-nhap.html
 * ============================================================ */
.swap-modal-overlay:has(.add-acc-box) {
  background:transparent !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
  box-sizing:border-box !important;
  /* Chừa chỗ panel phải (~360px) → modal canh GIỮA vùng datagrid, không lệch vì panel. */
  padding-right:360px !important;
}
/* Panel thu gọn → bỏ chừa (grid full width). */
.main-flex:has(.panel.collapsed) ~ .swap-modal-overlay:has(.add-acc-box),
body:has(.panel.collapsed) .swap-modal-overlay:has(.add-acc-box) {
  padding-right:0 !important;
}
[data-theme="dark"] .swap-modal-overlay:has(.add-acc-box) {
  background:transparent !important;
}
.swap-modal-overlay .add-acc-box {
  width:460px !important; max-width:96vw !important; padding:24px !important;
  background:var(--card) !important; border:1px solid var(--sep) !important;
  border-radius:22px !important;
  box-shadow:0 30px 80px -26px rgba(30,45,80,.3) !important;
  position:relative !important; backdrop-filter:none !important;
  display:flex !important; flex-direction:column !important;
}
[data-theme="dark"] .swap-modal-overlay .add-acc-box {
  background:#1c1c1e !important; border:1px solid rgba(255,255,255,.09) !important;
  box-shadow:0 30px 80px -22px rgba(0,0,0,.55) !important;
}
.swap-modal-overlay .add-acc-box .swap-close {
  position:absolute !important; top:16px !important; right:16px !important;
  width:32px !important; height:32px !important; border-radius:50% !important;
  background:transparent !important; color:var(--label2) !important; border:none !important;
}
.swap-modal-overlay .add-acc-box .swap-close:hover { background:var(--card-2) !important; color:var(--label) !important; }
.swap-modal-overlay .add-acc-head { text-align:center !important; margin-bottom:18px !important; padding:0 !important; border:none !important; }
.swap-modal-overlay .add-acc-fb-ic {
  width:54px !important; height:54px !important; border-radius:16px !important;
  background:#1877f2 !important; color:#fff !important;
  display:grid !important; place-items:center !important;
  margin:0 auto 12px !important; box-shadow:0 8px 20px -8px #1877f2 !important;
}
.swap-modal-overlay .add-acc-fb-ic svg { width:30px !important; height:30px !important; fill:#fff !important; }
.swap-modal-overlay .add-acc-title { font:600 19px/1.2 var(--ds-font) !important; color:var(--label) !important; }
.swap-modal-overlay .add-acc-sub { font:400 12.5px/1.4 var(--ds-font) !important; color:var(--label2) !important; margin-top:4px !important; }

.swap-modal-overlay .add-acc-modes {
  display:grid !important; grid-template-columns:1fr 1fr !important;
  gap:11px !important; margin-bottom:16px !important;
}
.swap-modal-overlay .add-acc-mode {
  display:flex !important; align-items:center !important; gap:11px !important;
  padding:13px !important; border-radius:14px !important; background:var(--card-2) !important;
  border:1.5px solid transparent !important; cursor:pointer !important; position:relative !important;
  transition:.15s !important; margin:0 !important;
}
.swap-modal-overlay .add-acc-mode input[type="radio"] { display:none !important; }
.swap-modal-overlay .add-acc-mode.is-on { border-color:var(--accent) !important; background:var(--accent-soft) !important; }
.swap-modal-overlay .add-acc-mode-ic {
  width:34px !important; height:34px !important; border-radius:10px !important;
  display:grid !important; place-items:center !important; flex:0 0 34px !important;
  background:var(--label3) !important; color:#fff !important;
}
.swap-modal-overlay .add-acc-mode[for*="cookie"] .add-acc-mode-ic,
.swap-modal-overlay .add-acc-mode:has(input[value="cookie"]) .add-acc-mode-ic { background:var(--accent) !important; }
.swap-modal-overlay .add-acc-mode-ic svg { width:18px !important; height:18px !important; stroke:#fff !important; fill:none !important; }
.swap-modal-overlay .add-acc-mode-nm { font:600 13.5px/1.2 var(--ds-font) !important; color:var(--label) !important; }
.swap-modal-overlay .add-acc-mode-desc { font:400 10.5px/1.3 var(--ds-font) !important; color:var(--label2) !important; margin-top:1px !important; }
.swap-modal-overlay .add-acc-mode.is-on::after {
  content:""; position:absolute; top:10px; right:10px;
  width:18px; height:18px; border-radius:50%;
  background:var(--accent);
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12l5 5L20 7'/></svg>");
  background-size:11px; background-position:center; background-repeat:no-repeat;
}

.swap-modal-overlay .add-acc-label {
  display:block !important; font:600 12px/1.2 var(--ds-font) !important;
  color:var(--label2) !important; margin-bottom:7px !important;
}
.swap-modal-overlay .add-acc-ta {
  width:100% !important; border-radius:11px !important;
  background:var(--card-2) !important; border:none !important;
  box-shadow:inset 0 0 0 1px var(--sep) !important;
  color:var(--label) !important;
  font-family:ui-monospace,Menlo,Consolas,monospace !important;
  font-size:12.5px !important; line-height:1.6 !important;
  padding:12px 14px !important; height:100px !important; resize:none !important; outline:none !important;
}
.swap-modal-overlay .add-acc-ta:focus { box-shadow:inset 0 0 0 2px var(--accent) !important; }
.swap-modal-overlay .add-acc-ta::placeholder { color:var(--label3) !important; }
.swap-modal-overlay .add-acc-note {
  width:100% !important; height:42px !important; border-radius:11px !important;
  background:var(--card-2) !important; border:none !important;
  box-shadow:inset 0 0 0 1px var(--sep) !important;
  color:var(--label) !important;
  font-family:var(--ds-font) !important; font-size:13px !important;
  padding:0 14px !important; outline:none !important; margin-top:14px !important;
}
.swap-modal-overlay .add-acc-note:focus { box-shadow:inset 0 0 0 2px var(--accent) !important; }
.swap-modal-overlay .add-acc-note::placeholder { color:var(--label3) !important; }

.swap-modal-overlay .add-acc-actions { display:flex !important; gap:11px !important; margin-top:18px !important; padding:0 !important; border:none !important; }
.swap-modal-overlay .add-acc-cancel,
.swap-modal-overlay .add-acc-go {
  height:46px !important; border-radius:12px !important; border:none !important;
  font:600 14px/1 var(--ds-font) !important; cursor:pointer !important;
  display:inline-flex !important; align-items:center !important; justify-content:center !important; gap:8px !important;
}
.swap-modal-overlay .add-acc-cancel { flex:0 0 96px !important; background:var(--card-3) !important; color:var(--label) !important; }
.swap-modal-overlay .add-acc-cancel:hover { filter:brightness(.96) !important; }
.swap-modal-overlay .add-acc-go { flex:1 !important; background:#1877f2 !important; color:#fff !important; }
.swap-modal-overlay .add-acc-go:hover { filter:brightness(1.06) !important; }
.swap-modal-overlay .add-acc-go svg { width:17px !important; height:17px !important; fill:#fff !important; }

/* FB login giữ brand #1877F2 */
.btn-fb, .btn-facebook { background:#1877F2 !important; border-color:#1877F2 !important; color:#fff !important; }

/* ============================================================
 * CELL DETAIL POPUP (.cdp-*) — clickable cell icon+count + modal list
 * ============================================================ */

/* Cell trigger button inside datagrid */
.cdp-cell-btn {
  display:inline-flex; align-items:center; gap:5px;
  padding:3px 9px; border-radius:7px;
  border:1px solid var(--sep); background:var(--card-2);
  color:var(--label); font:400 12.5px/1 var(--ds-font);
  cursor:pointer; white-space:nowrap; min-height:26px;
  transition:background .12s, border-color .12s;
}
.cdp-cell-btn:hover { background:var(--card-3); border-color:var(--sep-strong); }
.cdp-cell-btn:focus-visible { outline:2px solid var(--accent); outline-offset:1px; }
.cdp-cell-btn svg { flex-shrink:0; }
/* Variant: nút action header (Chỉ định tài sản / Xóa) — viền bo nhẹ thay vì pill, theo theme */
.cdp-cell-btn-action {
  padding:8px 15px; border-radius:9px; gap:7px;
  font-size:13.5px; min-height:0;
  border:1px solid #cdd2da; background:#fff; color:var(--label);
}
[data-theme="dark"] .cdp-cell-btn-action {
  border-color:rgba(255,255,255,.18); background:var(--card-2);
}
.cdp-cell-btn-action:hover { background:var(--card-2); border-color:var(--label2); }
[data-theme="dark"] .cdp-cell-btn-action:hover { background:var(--card-3); }

/* Full-screen overlay (same pattern as .fpp-overlay) */
.cdp-overlay {
  position:fixed; inset:0; z-index:9100;
  background:var(--scrim);
  -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px);
  display:flex; align-items:center; justify-content:center;
}

/* Modal box */
.cdp-box {
  width:840px; max-width:96vw; max-height:88vh;
  background:var(--card); border-radius:18px;
  border:1px solid var(--sep);
  box-shadow:0 28px 72px -20px rgba(0,0,0,.28);
  display:flex; flex-direction:column; overflow:hidden;
}
[data-theme="dark"] .cdp-box {
  background:#1c1c1e; border-color:rgba(255,255,255,.09);
  box-shadow:0 28px 72px -18px rgba(0,0,0,.55);
}

/* Header */
.cdp-head {
  display:flex; align-items:center; gap:12px;
  padding:16px 18px 14px; border-bottom:1px solid var(--sep); flex-shrink:0;
}
.cdp-head-icon {
  width:38px; height:38px; border-radius:10px; flex-shrink:0;
  display:grid; place-items:center; color:#fff;
}
.cdp-head-icon svg { width:20px; height:20px; }
.cdp-head-info { flex:1; min-width:0; }
.cdp-head-title { font:700 16px/1.2 var(--ds-font); color:var(--label); }
.cdp-head-sub { font:400 12px/1.4 var(--ds-font); color:var(--label2); margin-top:2px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cdp-head-stats { display:flex; align-items:center; gap:6px; flex-shrink:0; flex-wrap:wrap; justify-content:flex-end; max-width:360px; }
.cdp-stat { font:600 12px/1 var(--ds-font); padding:5px 11px; border-radius:999px; white-space:nowrap; }
.cdp-stat-live { background:rgba(48,209,88,.14); color:#1ca851; }
.cdp-stat-die { background:rgba(255,69,58,.14); color:#d70015; }
.cdp-stat-debt { background:rgba(255,149,0,.16); color:#b45309; }
.cdp-stat-closed { background:var(--card-3); color:var(--label2); }
.cdp-stat-fb { background:rgba(24,119,242,.14); color:#1877f2; }
.cdp-stat-ig { background:rgba(228,64,95,.14); color:#e4405f; }
[data-theme="dark"] .cdp-stat-live { color:#30d158; }
[data-theme="dark"] .cdp-stat-die { color:#ff453a; }
[data-theme="dark"] .cdp-stat-debt { color:#ff9f0a; }
.cdp-close {
  width:32px; height:32px; border-radius:50%; border:none; flex-shrink:0;
  background:var(--card-2); color:var(--label2); cursor:pointer;
  display:grid; place-items:center;
  transition:background .12s;
}
.cdp-close:hover { background:var(--card-3); color:var(--label); }
.cdp-close:focus-visible { outline:2px solid var(--accent); outline-offset:1px; }

/* Scrollable list */
.cdp-list {
  flex:1; overflow-y:auto; padding:8px 14px 16px;
}

/* Empty state */
.cdp-empty {
  text-align:center; padding:32px 16px;
  font:400 13px/1.5 var(--ds-font); color:var(--label2); font-style:italic;
}

/* Row */
.cdp-row {
  display:flex; align-items:center; gap:14px;
  padding:10px 12px; border-radius:10px; transition:background .12s, transform .12s;
}
.cdp-row:nth-child(even) { background:color-mix(in srgb, var(--card-2) 55%, transparent); }
.cdp-row:hover { background:var(--card-2); }

/* Admin tab: grid để các cột pill/id thẳng hàng giữa các dòng */
.cdp-row-admin {
  display:grid;
  grid-template-columns: 15px 34px minmax(0,1fr) 130px 90px 90px 80px;
  column-gap:14px; align-items:center;
}
.cdp-row-admin > .cdp-pill { width:100%; min-width:0; }
.cdp-row-admin > .cdp-id   { width:100%; }
.cdp-row-admin .cdp-name { display:flex; align-items:center; gap:6px; min-width:0; }
.cdp-row-admin .cdp-name-text { flex:0 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* Avatar */
.cdp-av {
  width:34px; height:34px; border-radius:50%; flex-shrink:0;
  display:grid; place-items:center; color:#fff;
  font:700 13.5px/1 var(--ds-font);
  box-shadow:0 1px 2px rgba(0,0,0,.08), inset 0 0 0 1px rgba(255,255,255,.18);
}
.cdp-av-img { width:34px; height:34px; border-radius:50%; object-fit:cover; flex-shrink:0; box-shadow:0 1px 2px rgba(0,0,0,.08); }
.cdp-av-fb  { background:#1877f2; }
.cdp-av-ig  { background:linear-gradient(135deg,#feda75,#d62976,#962fbf); }
.cdp-av-wa  { background:#25d366; }
.cdp-av-pd  { background:#ff9500; }
.cdp-av-acc { background:linear-gradient(135deg,#64748b,#475569); }

/* Name */
.cdp-name {
  flex:1; min-width:0; font:500 12.5px/1.3 var(--ds-font); color:var(--label);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; text-decoration:none;
}
a.cdp-name:hover { color:var(--accent); text-decoration:underline; }

/* ID — copyable */
.cdp-id {
  font:500 12px/1 var(--ds-font-mono, var(--ds-font)); color:var(--label2);
  font-variant-numeric:tabular-nums; flex-shrink:0; width:148px; text-align:right;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  cursor:pointer; border-radius:6px; padding:4px 6px;
  transition:background .12s, color .12s;
}
.cdp-id:hover { background:var(--accent-soft); color:var(--accent); }
.cdp-id:focus-visible { outline:2px solid var(--accent); outline-offset:1px; }

/* Limit text */
.cdp-limit { font:400 12px/1 var(--ds-font); color:var(--label2); flex-shrink:0; min-width:80px; }
.cdp-limit-inf { color:#10b981 !important; font-weight:700 !important; }

/* Pills */
.cdp-pill {
  display:inline-flex; align-items:center; justify-content:center;
  height:24px; min-width:74px; padding:0 12px; border-radius:999px;
  font:600 11.5px/1 var(--ds-font); white-space:nowrap; flex-shrink:0;
  letter-spacing:.1px; border:1px solid transparent;
}
.cdp-pill-fb     { background:rgba(24,119,242,.13); color:#1877f2; }
.cdp-pill-ig     { background:rgba(228,64,95,.12);  color:#e4405f; }
.cdp-pill-wa     { background:rgba(37,211,102,.12); color:#15803d; }
.cdp-pill-orange { background:rgba(255,149,0,.14);  color:#c05e00; }
.cdp-pill-green  { background:rgba(52,199,89,.14);  color:#1d7a3a; }
.cdp-pill-indigo { background:rgba(88,86,214,.12);  color:#5856d6; }
.cdp-pill-gray   { background:rgba(142,142,147,.12); color:var(--label2); }
.cdp-pill-red    { background:rgba(255,59,48,.12);  color:#c0392b; }
.cdp-pill-fan    { background:rgba(24,119,242,.10); color:#1877f2; }

/* Dark mode pill overrides */
[data-theme="dark"] .cdp-pill-fb     { background:rgba(10,132,255,.18); color:#0a84ff; }
[data-theme="dark"] .cdp-pill-ig     { background:rgba(255,55,95,.18);  color:#ff375f; }
[data-theme="dark"] .cdp-pill-wa     { background:rgba(48,209,88,.18);  color:#30d158; }
[data-theme="dark"] .cdp-pill-orange { background:rgba(255,159,10,.18); color:#ff9f0a; }
[data-theme="dark"] .cdp-pill-green  { background:rgba(48,209,88,.18);  color:#30d158; }
[data-theme="dark"] .cdp-pill-indigo { background:rgba(94,92,230,.18);  color:#a5b4fc; }
[data-theme="dark"] .cdp-pill-gray   { background:rgba(174,174,178,.14); color:#aeaeb2; }
[data-theme="dark"] .cdp-pill-red    { background:rgba(255,69,58,.18);  color:#ff453a; }
[data-theme="dark"] .cdp-pill-fan    { background:rgba(10,132,255,.14); color:#0a84ff; }

/* ============================================================
   Assign-assets modal (Chọn tài sản và chỉ định quyền) — 3 cột
   Nằm trên popup admin (cdp z=9100) nên z cao hơn.
   ============================================================ */
.aam-overlay {
  position:fixed; inset:0; z-index:9200;
  background:var(--scrim);
  -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px);
  display:flex; align-items:center; justify-content:center;
}
.aam-box {
  width:940px; max-width:96vw; height:600px; max-height:88vh;
  background:var(--card); border-radius:18px; border:1px solid var(--sep);
  box-shadow:0 28px 72px -20px rgba(0,0,0,.28);
  display:flex; flex-direction:column; overflow:hidden;
}
[data-theme="dark"] .aam-box { background:#1c1c1e; border-color:rgba(255,255,255,.09); box-shadow:0 28px 72px -18px rgba(0,0,0,.55); }

.aam-head {
  display:flex; align-items:flex-start; justify-content:space-between; gap:12px;
  padding:16px 18px 14px; border-bottom:1px solid var(--sep); flex-shrink:0;
}
.aam-head-icon {
  flex-shrink:0; width:38px; height:38px; border-radius:10px;
  background:var(--accent-soft); color:var(--accent);
  display:grid; place-items:center;
}
.aam-head-left { display:flex; align-items:center; gap:12px; flex:1; min-width:0; }
.aam-head-info { flex:1; min-width:0; max-width:560px; }
.aam-title { font:500 15.5px/1.25 var(--ds-font); color:var(--label); letter-spacing:-.1px; }
.aam-sub { font:400 12.5px/1.4 var(--ds-font); color:var(--label2); margin-top:3px; }
.aam-extra-uid {
  margin-top:8px; width:100%; height:32px; padding:0 11px;
  border:1px solid #cdd2da; border-radius:8px; background:var(--card); color:var(--label);
  outline:none; font:400 12.5px/1 var(--ds-font); font-variant-numeric:tabular-nums;
  transition:border-color .12s;
}
[data-theme="dark"] .aam-extra-uid { border-color:rgba(255,255,255,.18); background:var(--card-2); }
.aam-extra-uid:focus { border-color:var(--label2); }
.aam-extra-uid:focus, .aam-extra-uid:focus-visible { box-shadow:none; }
.aam-close {
  width:32px; height:32px; border-radius:50%; border:none; flex-shrink:0;
  background:var(--card-2); color:var(--label2); cursor:pointer;
  display:grid; place-items:center; transition:background .12s;
}
.aam-close:hover { background:var(--card-3); color:var(--label); }

.aam-cols { flex:1; min-height:0; display:grid; grid-template-columns:1.15fr 1.3fr 1.1fr; }
.aam-col { display:flex; flex-direction:column; min-height:0; min-width:0; padding:14px; }
.aam-col + .aam-col { border-left:1px solid var(--sep); }
.aam-col-label { font:500 12.5px/1 var(--ds-font); color:var(--label2); margin-bottom:10px; flex-shrink:0; }
.aam-col-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; flex-shrink:0; }
.aam-col-head .aam-col-label { margin-bottom:0; }
.aam-reload {
  height:30px; padding:0 12px; border-radius:9px; flex-shrink:0;
  border:1px solid #cdd2da; background:var(--card); color:var(--label); cursor:pointer;
  display:inline-flex; align-items:center; gap:6px;
  font:600 12.5px/1 var(--ds-font); transition:background .12s, border-color .12s;
}
[data-theme="dark"] .aam-reload { border-color:rgba(255,255,255,.18); background:var(--card-2); }
.aam-reload span { text-transform:none; letter-spacing:0; }
.aam-reload:hover { background:var(--card-2); border-color:var(--label2); }
[data-theme="dark"] .aam-reload:hover { background:var(--card-3); }
@keyframes aam-spin { to { transform:rotate(360deg); } }
.aam-reload.spinning svg { animation:aam-spin .7s linear infinite; }

/* Cột 1 — loại tài sản */
.aam-type-list { display:flex; flex-direction:column; gap:2px; overflow-y:auto; }

/* Target picker (mode pick-from-admins-groups) */
.aam-targetpick-tabs { display:flex; gap:6px; padding:0 0 10px; flex-shrink:0; }
.aam-targetpick-tab {
  flex:1; display:inline-flex; align-items:center; justify-content:center; gap:6px;
  height:34px; padding:0 8px; border-radius:9px; cursor:pointer;
  border:1px solid var(--sep); background:var(--card); color:var(--label2);
  font:500 12px/1 var(--ds-font); transition:background .12s,color .12s,border-color .12s;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.aam-targetpick-tab:hover { background:var(--card-2); }
.aam-targetpick-tab.is-active { background:var(--accent-soft); color:var(--accent); border-color:var(--accent); font-weight:600; }
.aam-targetpick-list { flex:1; min-height:0; overflow-y:auto; display:flex; flex-direction:column; gap:2px; }
.aam-targetpick-row {
  display:flex; align-items:center; gap:10px; padding:8px 9px; border-radius:9px; cursor:pointer;
  transition:background .1s; user-select:none;
}
.aam-targetpick-row:hover { background:var(--card-2); }
.aam-targetpick-row.is-checked { background:var(--accent-soft); }
.aam-targetpick-row input { width:15px; height:15px; flex-shrink:0; accent-color:var(--accent); border-radius:4px; }
.aam-targetpick-av { flex-shrink:0; width:28px; height:28px; border-radius:50%; background:#0a84ff; color:#fff; display:grid; place-items:center; font:700 11px/1 var(--ds-font); box-shadow:0 1px 2px rgba(0,0,0,.08), inset 0 0 0 1px rgba(255,255,255,.18); }
.aam-targetpick-av svg { display:block; }
.aam-targetpick-av-neutral { background:var(--card-3); color:#344256; box-shadow:none; }
[data-theme="dark"] .aam-targetpick-av-neutral { background:rgba(255,255,255,.08); color:#c7cfdb; }
.aam-targetpick-text { flex:1; min-width:0; display:flex; flex-direction:column; gap:1px; }
.aam-targetpick-sub { font:400 11.5px/1.2 var(--ds-font-mono, var(--ds-font)); color:var(--label2); font-variant-numeric:tabular-nums; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

.aam-create-group { display:flex; flex-direction:column; gap:12px; padding:14px 0; }
.aam-create-group-hint { font:400 13px/1.5 var(--ds-font); color:var(--label2); }
.aam-create-group-input {
  width:100%; height:42px; padding:0 14px;
  border:1px solid #cdd2da; border-radius:10px; background:var(--card); color:var(--label);
  font:400 13.5px/1 var(--ds-font); outline:none;
  transition:border-color .12s;
}
[data-theme="dark"] .aam-create-group-input { border-color:rgba(255,255,255,.18); background:var(--card-2); }
.aam-create-group-input:focus { border-color:var(--label2); }
.aam-create-group-btn { align-self:flex-start; justify-content:center; min-width:120px; }
.aam-create-group-add {
  display:flex; align-items:center; gap:8px; width:100%;
  padding:9px 11px; border-radius:9px; cursor:pointer;
  border:1px dashed var(--sep); background:transparent; color:var(--accent);
  font:600 12.5px/1 var(--ds-font); margin-bottom:4px;
  transition:background .12s, border-color .12s;
}
.aam-create-group-add:hover { background:var(--accent-soft); border-color:var(--accent); }
.aam-targetpick-name { flex:1; min-width:0; font:400 13px/1.3 var(--ds-font); color:var(--label); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.aam-type-item {
  display:flex; align-items:center; gap:10px; width:100%;
  padding:10px 11px; border:none; border-radius:10px; cursor:pointer;
  background:transparent; color:var(--label); text-align:left;
  font:400 13.5px/1.2 var(--ds-font); transition:background .1s;
}
.aam-type-item.is-active { font-weight:600; }
.aam-type-item:hover { background:var(--card-2); }
.aam-type-item.is-active { background:var(--accent-soft); color:var(--accent); position:relative; }
.aam-type-item.is-active::before { content:''; position:absolute; left:4px; top:8px; bottom:8px; width:3px; border-radius:2px; background:var(--accent); }
.aam-type-item svg:first-child { flex-shrink:0; }
.aam-type-item span { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.aam-type-caret { flex-shrink:0; opacity:.5; }

/* Cột 2 — chọn tài sản */
.aam-search {
  display:flex; align-items:center; gap:8px; flex-shrink:0;
  padding:0 12px; height:40px; border:1px solid #cdd2da; border-radius:10px;
  background:var(--card); color:var(--label2); margin-bottom:8px;
  transition:border-color .12s;
}
[data-theme="dark"] .aam-search { border-color:rgba(255,255,255,.18); background:var(--card-2); }
.aam-search:focus-within { border-color:var(--label2); }
.aam-search input { flex:1; min-width:0; border:none; background:transparent; outline:none; color:var(--label); font:400 13.5px/1 var(--ds-font); }
.aam-search input:focus, .aam-search input:focus-visible { box-shadow:none; outline:none; }
.aam-asset-list { flex:1; overflow-y:auto; display:flex; flex-direction:column; gap:1px; }
.aam-asset-row {
  display:flex; align-items:center; gap:12px; padding:10px 10px; border-radius:10px;
  cursor:pointer; transition:background .1s;
}
.aam-asset-row:hover { background:var(--card-2); }
.aam-asset-row.is-checked { background:var(--accent-soft); }
.aam-asset-all { flex-shrink:0; margin-bottom:4px; }
.aam-asset-all .aam-asset-name { font-weight:600; color:var(--label2); }

.aam-asset-all-row {
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  padding:6px 4px 8px; margin-bottom:4px; flex-shrink:0;
  border-bottom:1px solid var(--sep);
}
.aam-asset-all-label {
  display:inline-flex; align-items:center; gap:10px; cursor:pointer;
  font:500 13px/1.2 var(--ds-font); color:var(--label2);
  white-space:nowrap;
}
.aam-asset-all-label input { width:17px; height:17px; accent-color:var(--accent); border-radius:5px; cursor:pointer; }

.aam-uid-chip {
  display:inline-flex; align-items:center; gap:6px; padding:5px 11px;
  border:1px solid #cdd2da; border-radius:999px; background:var(--card); cursor:pointer;
  font:500 12.5px/1 var(--ds-font); color:var(--label2);
  transition:background .12s, border-color .12s, color .12s;
}
[data-theme="dark"] .aam-uid-chip { border-color:rgba(255,255,255,.18); background:var(--card-2); }
.aam-uid-chip input { width:14px; height:14px; accent-color:var(--accent); pointer-events:none; }
.aam-uid-chip:hover { border-color:var(--label2); }
.aam-uid-chip.on { color:var(--accent); border-color:var(--accent); background:var(--accent-soft); }

.aam-uid-area { flex:1; display:flex; flex-direction:column; min-height:0; gap:6px; }
.aam-uid-input {
  flex:1; min-height:140px; resize:none;
  border:1px solid #cdd2da; border-radius:10px; background:var(--card); color:var(--label);
  padding:10px 12px; font:400 13.5px/1.45 var(--ds-font);
  font-variant-numeric:tabular-nums; outline:none;
  transition:border-color .12s;
}
[data-theme="dark"] .aam-uid-input { border-color:rgba(255,255,255,.18); background:var(--card-2); }
.aam-uid-input:focus { border-color:var(--label2); }
.aam-uid-input:focus, .aam-uid-input:focus-visible { box-shadow:none; }
.aam-uid-count { font:500 12px/1 var(--ds-font); color:var(--label2); text-align:right; flex-shrink:0; }
.aam-asset-row input {
  width:17px; height:17px; flex-shrink:0; accent-color:var(--accent);
  border-radius:5px; cursor:pointer;
}
.aam-asset-ico {
  width:32px; height:32px; border-radius:50%; flex-shrink:0;
  display:grid; place-items:center; background:var(--card-3); color:#344256;
}
.aam-asset-img {
  width:32px; height:32px; border-radius:50%; flex-shrink:0;
  object-fit:cover; background:var(--card-3);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.06);
}
[data-theme="dark"] .aam-asset-img { box-shadow:inset 0 0 0 1px rgba(255,255,255,.1); }
[data-theme="dark"] .aam-asset-ico { background:rgba(255,255,255,.08); color:#c7cfdb; }
.aam-asset-text { flex:1; min-width:0; display:flex; flex-direction:column; gap:1px; }
.aam-asset-name { font:400 13.5px/1.35 var(--ds-font); color:var(--label); display:flex; align-items:center; gap:6px; min-width:0; overflow:hidden; }
.aam-asset-name-text { flex:0 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.aam-asset-name .aam-asset-kind, .aam-asset-name .aam-asset-stat { flex-shrink:0; margin-left:0; }
.aam-asset-sub { font:400 12px/1.3 var(--ds-font); color:var(--label2); font-variant-numeric:tabular-nums; }
.aam-asset-kind {
  display:inline-block; margin-left:7px; vertical-align:middle;
  font:600 10.5px/1 var(--ds-font); padding:3px 8px; border-radius:999px;
  text-transform:uppercase; letter-spacing:.2px;
}
.aam-asset-kind-bm    { background:rgba(10,132,255,.12); color:#0a84ff; }
.aam-asset-kind-share { background:rgba(175,82,222,.13); color:#af52de; }

.aam-asset-stat {
  display:inline-block; margin-left:5px; vertical-align:middle;
  font:600 10.5px/1 var(--ds-font); padding:3px 8px; border-radius:999px;
  text-transform:uppercase; letter-spacing:.2px;
}
.aam-asset-stat-live   { background:rgba(52,199,89,.14);  color:#1ca851; }
.aam-asset-stat-die    { background:rgba(255,59,48,.13);  color:#d24b4b; }
.aam-asset-stat-debt   { background:rgba(255,149,0,.16);  color:#c05e00; }
.aam-asset-stat-closed { background:rgba(142,142,147,.14); color:var(--label2); }
[data-theme="dark"] .aam-asset-stat-live   { background:rgba(48,209,88,.18);  color:#30d158; }
[data-theme="dark"] .aam-asset-stat-die    { background:rgba(255,69,58,.20);  color:#ff453a; }
[data-theme="dark"] .aam-asset-stat-debt   { background:rgba(255,159,10,.20); color:#ff9f0a; }
[data-theme="dark"] .aam-asset-stat-closed { background:rgba(174,174,178,.16); color:#aeaeb2; }
.aam-empty { text-align:center; padding:28px 12px; font:400 13px/1.5 var(--ds-font); color:var(--label2); font-style:italic; }

/* Cột 3 — chỉ định quyền */
.aam-perm-list { display:flex; flex-direction:column; gap:8px; overflow-y:auto; }
.aam-perm-item {
  display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px;
  border:1px solid var(--sep); border-radius:11px; transition:border-color .1s, background .1s;
}
.aam-perm-item.is-active { border-color:var(--accent); background:var(--accent-soft); }
.aam-perm-text { display:flex; flex-direction:column; gap:3px; min-width:0; }
.aam-perm-name { font:500 13.5px/1.2 var(--ds-font); color:var(--label); opacity:.92; }
.aam-perm-note {
  display:flex; align-items:flex-start; gap:9px; margin-top:10px;
  padding:10px 12px; border-radius:10px;
  background:#FFFAE9; border:1px solid #F4E5B0; color:#A8862C;
  font:500 12.5px/1.5 var(--ds-font);
}
.aam-perm-note svg { flex-shrink:0; margin-top:1px; }
[data-theme="dark"] .aam-perm-note { background:#2E2A1A; border-color:#564A28; color:#E2C67A; }

.aam-pill-result-btn {
  margin-left:10px; display:inline-flex; align-items:center; gap:5px;
  padding:4px 10px; border-radius:8px; cursor:pointer;
  background:rgba(255,255,255,.5); border:1px solid currentColor; color:inherit;
  font:600 12px/1 var(--ds-font); white-space:nowrap; flex-shrink:0;
}
[data-theme="dark"] .aam-pill-result-btn { background:rgba(0,0,0,.2); }
.aam-pill-result-btn:hover { background:rgba(255,255,255,.8); }
[data-theme="dark"] .aam-pill-result-btn:hover { background:rgba(0,0,0,.35); }

.aam-foot-pill-info {
  display:inline-flex; align-items:center; gap:8px; flex:1; min-width:0;
  padding:8px 14px; border-radius:11px;
  background:#ECF7F2; color:#1ca851;
  font:600 13.5px/1.2 var(--ds-font);
  border:1px solid transparent;
}
[data-theme="dark"] .aam-foot-pill-info { background:#1E2A24; color:#30d158; }

.aam-perm-remove {
  margin-top:auto; align-self:stretch;
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  height:42px; padding:0 16px;
  border:1px solid rgba(255,59,48,.32); border-radius:11px;
  background:rgba(255,59,48,.07); color:#d24b4b;
  font:600 13.5px/1 var(--ds-font); cursor:pointer;
  transition:background .12s, border-color .12s, color .12s;
}
.aam-perm-remove:hover:not(:disabled) { background:rgba(255,59,48,.15); border-color:rgba(255,59,48,.5); }
.aam-perm-remove:disabled { opacity:.45; cursor:not-allowed; }
[data-theme="dark"] .aam-perm-remove { color:#ff453a; border-color:rgba(255,69,58,.4); background:rgba(255,69,58,.12); }
[data-theme="dark"] .aam-perm-remove:hover:not(:disabled) { background:rgba(255,69,58,.2); border-color:rgba(255,69,58,.6); }

/* Popup xác nhận */
.aam-confirm-box {
  width:min(420px,92vw); background:var(--card); color:var(--label);
  border-radius:14px; box-shadow:0 18px 48px rgba(0,0,0,.4);
  padding:22px 22px 18px; display:flex; flex-direction:column; align-items:center; gap:14px;
}
.aam-confirm-icon {
  width:54px; height:54px; border-radius:50%;
  display:grid; place-items:center;
  background:rgba(255,59,48,.12); color:#d24b4b;
}
[data-theme="dark"] .aam-confirm-icon { background:rgba(255,69,58,.18); color:#ff453a; }
.aam-confirm-body { text-align:center; }
.aam-confirm-title { font:600 16px/1.3 var(--ds-font); color:var(--label); margin-bottom:6px; }
.aam-confirm-desc  { font:400 13.5px/1.55 var(--ds-font); color:var(--label2); }
.aam-confirm-btns  { display:flex; gap:10px; width:100%; margin-top:4px; }
.aam-confirm-btns > .aam-btn { flex:1; height:40px; justify-content:center; }
.aam-btn-danger {
  background:#d24b4b; color:#fff; border:1px solid #d24b4b;
  transition:background .12s, border-color .12s;
}
.aam-btn-danger:hover { background:#b53d3d; border-color:#b53d3d; }
[data-theme="dark"] .aam-btn-danger { background:#ff453a; border-color:#ff453a; }
[data-theme="dark"] .aam-btn-danger:hover { background:#e63a30; border-color:#e63a30; }
.aam-perm-desc { font:400 12px/1.45 var(--ds-font); color:var(--label2); }

/* Công tắc gạt */
.aam-switch {
  width:42px; height:24px; border-radius:999px; border:none; padding:0; flex-shrink:0;
  background:var(--card-3); cursor:pointer; position:relative; transition:background .15s;
}
.aam-switch.on { background:var(--accent); }
.aam-switch.locked { opacity:.55; cursor:not-allowed; }
.aam-switch-knob {
  position:absolute; top:3px; left:3px; width:18px; height:18px; border-radius:50%;
  background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.25); transition:transform .15s;
}
.aam-switch.on .aam-switch-knob { transform:translateX(18px); }

/* Footer */
.aam-foot {
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:13px 18px; border-top:1px solid var(--sep); flex-shrink:0;
}
.aam-foot-count { font:400 13px/1.3 var(--ds-font); color:var(--label2); flex:1; min-width:0; }
.aam-foot-pill {
  display:inline-flex; align-items:center; gap:9px; flex:1; min-width:0;
  padding:10px 14px; border-radius:11px;
  font:600 14.5px/1.25 var(--ds-font);
}
.aam-foot-pill svg { flex-shrink:0; }
.aam-foot-pill > span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.aam-foot-pill > span > span { white-space:normal; text-overflow:clip; overflow:visible; }
.aam-foot-pill-ok  { color:#1ca851; background:rgba(48,209,88,.13); }
.aam-foot-pill-err { color:#d24b4b; background:rgba(255,69,58,.13); }
[data-theme="dark"] .aam-foot-pill-ok  { color:#30d158; background:rgba(48,209,88,.18); }
[data-theme="dark"] .aam-foot-pill-err { color:#ff453a; background:rgba(255,69,58,.18); }
.aam-num-ok   { color:#1ca851; font-weight:700; }
.aam-num-fail { color:#d24b4b; font-weight:700; }
[data-theme="dark"] .aam-num-ok   { color:#30d158; }
[data-theme="dark"] .aam-num-fail { color:#ff453a; }

.aam-foot-pill-multi { color:var(--label); background:var(--card-2); border:1px solid var(--sep); padding:10px 12px; align-items:stretch; max-height:200px; overflow:hidden; }
.aam-res-body { display:flex; flex-direction:column; gap:8px; flex:1; min-width:0; min-height:0; overflow-y:auto; text-align:left; white-space:normal; text-overflow:clip; }

/* ==== Popup "Kết quả chỉ định" mới (rr-*) ==== */
.rr-box {
  width:min(880px,96vw); max-height:86vh; background:var(--card); color:var(--label);
  border-radius:18px; box-shadow:0 24px 60px rgba(0,0,0,.32);
  display:flex; flex-direction:column; overflow:hidden; font-family:inherit;
}
.rr-head { display:flex; align-items:center; gap:14px; padding:16px 18px; border-bottom:1px solid var(--sep); }
.rr-head-left { flex:1; min-width:0; }
.rr-title { font:500 15px/1.2 var(--ds-font); color:var(--label); letter-spacing:-.1px; }
.rr-sub { font:400 12.5px/1.3 var(--ds-font); color:var(--label2); margin-top:3px; }
.rr-head-badges { display:flex; gap:8px; flex-shrink:0; }
.rr-badge { display:inline-flex; align-items:center; gap:6px; padding:5px 10px; border-radius:999px; background:var(--card-2); font:600 12px/1 var(--ds-font); color:var(--label2); }
.rr-bd { width:8px; height:8px; border-radius:50%; flex-shrink:0; }
.rr-bd-ok { background:#1EA870; } [data-theme="dark"] .rr-bd-ok { background:#40CA8E; }
.rr-bd-partial { background:#D2921E; } [data-theme="dark"] .rr-bd-partial { background:#E2B050; }
.rr-bd-fail { background:#D84848; } [data-theme="dark"] .rr-bd-fail { background:#F06E6E; }

.rr-body { flex:1; min-height:0; display:grid; grid-template-columns:320px 1fr; }
.rr-left { display:flex; flex-direction:column; min-height:0; border-right:1px solid var(--sep); }
.rr-left-tools { display:flex; flex-direction:column; gap:8px; padding:12px 14px; border-bottom:1px solid var(--divider, var(--sep)); }
.rr-search { width:100%; height:34px; padding:0 12px; border:1px solid var(--sep); border-radius:8px; background:var(--card); color:var(--label); font:400 13px/1 var(--ds-font); outline:none; }
.rr-search:focus { border-color:var(--label2); }
.rr-filters { display:flex; gap:6px; }
.rr-filter { flex:1; height:28px; padding:0 8px; border-radius:7px; border:1px solid var(--sep); background:var(--card); color:var(--label2); font:500 12px/1 var(--ds-font); cursor:pointer; }
.rr-filter.is-active { background:var(--accent-soft); color:var(--accent); border-color:var(--accent); font-weight:600; }

.rr-list { flex:1; min-height:0; overflow-y:auto; padding:6px; display:flex; flex-direction:column; gap:2px; }
.rr-row { display:flex; align-items:center; gap:10px; padding:9px 10px; border-radius:9px; cursor:pointer; transition:background .12s; }
.rr-row:hover { background:var(--card-2); }
.rr-row.is-active { background:var(--accent-soft); }
.rr-row.is-active .rr-row-name { color:var(--accent); font-weight:600; }
.rr-dot { flex-shrink:0; width:18px; height:18px; border-radius:50%; display:grid; place-items:center; color:#fff; font:700 11px/1 var(--ds-font); }
.rr-dot-ok { background:#1EA870; } .rr-dot-partial { background:#D89620; } .rr-dot-fail { background:#E14848; }
[data-theme="dark"] .rr-dot-ok { background:#40CA8E; } [data-theme="dark"] .rr-dot-partial { background:#E2B050; } [data-theme="dark"] .rr-dot-fail { background:#F06E6E; }
.rr-row-name { flex:1; min-width:0; font:400 13px/1.3 var(--ds-font); color:var(--label); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.rr-pill { flex-shrink:0; padding:3px 9px; border-radius:999px; font:600 11.5px/1 var(--ds-font); }
.rr-pill-ok { background:#E8F7F0; color:#1EA870; } .rr-pill-partial { background:#FFF7E4; color:#D89620; } .rr-pill-fail { background:#FDECEC; color:#E14848; }
[data-theme="dark"] .rr-pill-ok { background:#1C2E26; color:#40CA8E; }
[data-theme="dark"] .rr-pill-partial { background:#302A18; color:#E2B050; }
[data-theme="dark"] .rr-pill-fail { background:#2E1E20; color:#F06E6E; }

.rr-right { display:flex; flex-direction:column; min-height:0; padding:14px 16px; }
.rr-right-head { margin-bottom:12px; display:flex; align-items:center; gap:10px; }
.rr-right-label { flex:1; min-width:0; font:500 12.5px/1.3 var(--ds-font); color:var(--label2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.rr-section-head { font:500 12.5px/1 var(--ds-font); color:var(--label2); margin-bottom:8px; display:inline-flex; align-items:center; gap:6px; }
.rr-sec-ok { color:var(--label2); } .rr-sec-fail { color:var(--label2); }
.rr-item-err { color:#D84848; font-style:normal; font-size:11.5px; }
[data-theme="dark"] .rr-item-err { color:#F06E6E; }
.rr-chips { display:flex; align-items:center; gap:8px; margin-bottom:10px; }
.rr-chip { padding:5px 11px; border-radius:999px; font:600 12px/1 var(--ds-font); }
.rr-chip-ok { background:#E8F7F0; color:#1EA870; }
.rr-chip-fail { background:#FDECEC; color:#E14848; }
.rr-chip-muted { background:var(--card-2); color:var(--label2); }
[data-theme="dark"] .rr-chip-ok { background:#1C2E26; color:#40CA8E; }
[data-theme="dark"] .rr-chip-fail { background:#2E1E20; color:#F06E6E; }
.rr-link { background:transparent; border:none; padding:4px 8px; color:var(--accent); font:500 12px/1 var(--ds-font); cursor:pointer; border-radius:6px; }
.rr-link:hover:not(:disabled) { background:var(--accent-soft); }
.rr-link:disabled { opacity:.4; cursor:not-allowed; }
.rr-right-actions { margin-left:auto; display:inline-flex; gap:6px; align-items:center; flex-shrink:0; }
.rr-link-ok { color:#1ca851; }
.rr-link-ok:hover:not(:disabled) { background:rgba(28,168,81,.10); }
.rr-link-fail { color:#d70015; }
.rr-link-fail:hover:not(:disabled) { background:rgba(215,0,21,.08); }
[data-theme="dark"] .rr-link-ok { color:#40CA8E; }
[data-theme="dark"] .rr-link-ok:hover:not(:disabled) { background:rgba(64,202,142,.12); }
[data-theme="dark"] .rr-link-fail { color:#F06E6E; }
[data-theme="dark"] .rr-link-fail:hover:not(:disabled) { background:rgba(240,110,110,.12); }
.rr-detail { flex:1; min-height:0; overflow-y:auto; display:flex; flex-direction:column; gap:14px; }
.rr-section-head { font:600 12px/1 var(--ds-font); color:var(--label2); margin-bottom:8px; }
.rr-items { display:flex; flex-direction:column; gap:5px; }
.rr-item { display:flex; align-items:center; gap:8px; padding:7px 10px; border-radius:7px; background:var(--card-2); font:500 12.5px/1.4 var(--ds-font); color:var(--label); word-break:break-all; }
.rr-item span { flex:1; min-width:0; }
.rr-item-err { color:var(--label2); font-style:normal; font-size:11.5px; }
.rr-copy { flex-shrink:0; width:24px; height:24px; padding:0; border:1px solid var(--sep); border-radius:6px; background:var(--card); color:var(--label2); cursor:pointer; font-size:13px; line-height:1; }
.rr-copy:hover { color:var(--accent); border-color:var(--accent); }
.rr-empty { padding:18px 12px; text-align:center; font:400 12.5px/1.4 var(--ds-font); color:var(--label2); opacity:.7; font-style:italic; }

.rr-foot { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 18px; border-top:1px solid var(--sep); }
.rr-foot-link-fail { background:transparent; border:none; padding:6px 10px; border-radius:6px; cursor:pointer; color:#D84848; font:600 12.5px/1 var(--ds-font); }
[data-theme="dark"] .rr-foot-link-fail { color:#F06E6E; }
.rr-foot-link-fail:disabled { opacity:.4; cursor:not-allowed; }
.rr-foot-link-fail:hover:not(:disabled) { background:rgba(216,72,72,.08); }
.rr-foot-btns { display:flex; gap:10px; }

/* List rows trong modal Kết quả */
.aam-res-modal-list { padding:12px 16px; display:flex; flex-direction:column; gap:6px; overflow-y:auto; flex:1; min-height:0; }
.aam-res-head { display:flex; align-items:center; justify-content:space-between; gap:10px; padding-bottom:7px; border-bottom:1px dashed var(--sep); }
.aam-res-head-label { font:600 13px/1 var(--ds-font); color:var(--label2); text-transform:uppercase; letter-spacing:.3px; }
.aam-res-head-counts { display:inline-flex; gap:14px; font:700 14px/1 var(--ds-font); }
.aam-res-list { display:flex; flex-direction:column; gap:6px; }
.aam-res-row { display:grid; grid-template-columns:18px 1fr auto; column-gap:10px; row-gap:2px; align-items:center; padding:6px 8px; border-radius:8px; background:var(--card); }
.aam-res-row-mark { font:800 15px/1 var(--ds-font); text-align:center; }
.aam-res-row-mark.ok   { color:#1ca851; }
.aam-res-row-mark.fail { color:#d24b4b; }
[data-theme="dark"] .aam-res-row-mark.ok   { color:#30d158; }
[data-theme="dark"] .aam-res-row-mark.fail { color:#ff453a; }
.aam-res-row-uid { font:600 13.5px/1.2 var(--ds-font); color:var(--label); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.aam-res-row-name { font-weight:700; color:var(--label); }
.aam-res-row-uidnum { font-weight:500; color:var(--label2); font-size:12.5px; font-family:var(--ds-font-mono, var(--ds-font)); }
.aam-res-row-stats { display:inline-flex; align-items:center; gap:8px; font:600 13.5px/1 var(--ds-font); color:var(--label2); }
.aam-res-sep { color:var(--label2); opacity:.6; }
.aam-res-log-btn { width:24px; height:24px; padding:0; margin-left:4px; border:1px solid var(--sep); border-radius:6px; background:var(--card-2); color:var(--label2); cursor:pointer; display:inline-flex; align-items:center; justify-content:center; transition:background .12s,color .12s; }
.aam-res-log-btn:hover { background:var(--card-3); color:var(--label); }

.aam-log-overlay { position:fixed; inset:0; z-index:2147483648; background:rgba(0,0,0,.55); display:flex; align-items:center; justify-content:center; padding:24px; }
.aam-log-box { width:min(640px,95vw); max-height:80vh; background:var(--card); color:var(--label); border-radius:14px; box-shadow:0 18px 48px rgba(0,0,0,.4); display:flex; flex-direction:column; overflow:hidden; }
.aam-log-head { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; padding:14px 16px; border-bottom:1px solid var(--sep); }
.aam-log-title { font:600 15px/1.3 var(--ds-font); color:var(--label); letter-spacing:-.1px; }
.aam-log-sub { font:600 12.5px/1.4 var(--ds-font); color:var(--label2); margin-top:3px; }
.aam-log-cols { display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--sep); flex:1; min-height:0; }
.aam-log-col { background:var(--card); display:flex; flex-direction:column; min-height:0; }
.aam-log-col-head { padding:0 14px; min-height:44px; font:600 13px/1 var(--ds-font); background:var(--card-2); border-bottom:1px solid var(--sep); display:flex; align-items:center; justify-content:space-between; gap:8px; }
.aam-log-copy-all { padding:5px 11px; border-radius:6px; border:1px solid var(--sep); background:var(--card); color:var(--label); cursor:pointer; font:500 11.5px/1 var(--ds-font); transition:background .12s,color .12s,border-color .12s; }
.aam-log-copy-all:hover { background:var(--card-3); border-color:var(--label2); }
.aam-log-list { flex:1; min-height:0; overflow-y:auto; padding:8px 10px; display:flex; flex-direction:column; gap:4px; }
.aam-log-item { padding:5px 8px; border-radius:6px; background:var(--card-2); font:500 12.5px/1.4 var(--ds-font-mono, var(--ds-font)); color:var(--label); word-break:break-all; }
.aam-log-item.is-clickable { cursor:pointer; transition:background .12s,color .12s; }
.aam-log-item.is-clickable:hover { background:var(--card-3); }
.aam-log-item.is-copied { background:rgba(48,209,88,.18); color:#1ca851; font-weight:700; }
[data-theme="dark"] .aam-log-item.is-copied { color:#30d158; }
.aam-log-item-id { font-weight:600; }
.aam-log-item-err { display:block; margin-top:2px; font:500 11.5px/1.4 var(--ds-font); color:#d24b4b; }
[data-theme="dark"] .aam-log-item-err { color:#ff453a; }
.aam-log-empty { flex:1; display:flex; align-items:center; justify-content:center; padding:30px 12px; font:400 13px/1.4 var(--ds-font); color:var(--label2); opacity:.65; font-style:italic; }
.aam-foot-btns { display:flex; gap:10px; flex-shrink:0; }
.aam-btn {
  height:38px; padding:0 18px; border-radius:10px; cursor:pointer;
  font:600 13.5px/1 var(--ds-font); border:1px solid transparent;
  display:inline-flex; align-items:center; gap:8px;
  transition:filter .1s, background .1s;
}
.aam-btn-ghost { background:var(--card-2); border-color:var(--sep); color:var(--label); }
.aam-btn-ghost:hover { background:var(--card-3); }
.aam-btn-ghost:disabled { opacity:.5; cursor:not-allowed; }
.aam-btn-primary { background:var(--accent); color:#fff; }
.aam-btn-primary:hover { filter:brightness(1.06); }
.aam-btn-primary:disabled { opacity:.45; cursor:not-allowed; filter:none; }
.aam-btn-spin {
  width:14px; height:14px; border-radius:50%; display:inline-block;
  border:2px solid rgba(255,255,255,.35); border-top-color:#fff;
  animation:aam-spin .7s linear infinite;
}