:root {
  --bg: #070b16; --panel: #101827; --panel-2: #152033; --panel-3: #0f172a; --line: #263449;
  --txt: #e8eef8; --muted: #94a3b8; --accent: #3b82f6; --accent-2: #60a5fa;
  --ok: #22c55e; --err: #ef4444; --warn: #f59e0b; --purple: #a855f7; --cyan: #06b6d4;
  --shadow: 0 22px 70px rgba(0,0,0,.42);
}
* { box-sizing: border-box; }
html:not(.i18n-ready) [data-i18n] { visibility: hidden; }
body { margin: 0; min-height: 100vh; font-family: Inter, 'Segoe UI', system-ui, sans-serif; background: radial-gradient(circle at 12% 0, rgba(59,130,246,.23) 0, transparent 28%), radial-gradient(circle at 85% 8%, rgba(168,85,247,.16) 0, transparent 24%), var(--bg); color: var(--txt); font-size: 13px; }
body::before { content: ''; position: fixed; inset: 0; pointer-events: none; background-image: linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px); background-size: 42px 42px; mask-image: linear-gradient(to bottom, rgba(0,0,0,.8), transparent 70%); }
.topbar { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 14px 22px; background: rgba(9,14,27,.82); backdrop-filter: blur(18px); border-bottom: 1px solid rgba(148,163,184,.16); position: sticky; top: 0; z-index: 20; }
.brand { display: flex; align-items: center; gap: 12px; }
.brand-mark { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 14px; background: linear-gradient(135deg, #2563eb, #9333ea); color: #fff; font-weight: 800; box-shadow: 0 12px 34px rgba(59,130,246,.28); }
.topbar h1 { font-size: 17px; margin: 0; letter-spacing: .2px; }
.topbar p { margin: 3px 0 0; color: var(--muted); font-size: 12px; }
.tag { background: linear-gradient(135deg, var(--accent), #8b5cf6); color: #fff; font-size: 10px; padding: 3px 7px; border-radius: 999px; vertical-align: middle; }
.topbar-right, .topbar .right { display: flex; align-items: center; gap: 16px; min-width: 0; }
.queue-status { display: flex; align-items: center; gap: 7px; max-width: 54vw; overflow-x: auto; white-space: nowrap; color: var(--muted); background: rgba(15,23,42,.72); border: 1px solid rgba(148,163,184,.16); border-radius: 999px; padding: 7px 10px; }
.user-badge { display: flex; align-items: center; gap: 8px; color: var(--muted); background: rgba(15,23,42,.72); border: 1px solid rgba(148,163,184,.16); border-radius: 999px; padding: 5px 8px 5px 12px; }
.nav-right { display: flex; align-items: center; gap: 8px; margin-left: auto; min-width: 0; }
.locale-switcher { position: relative; }
.locale-trigger { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; font-size: 12px; color: var(--txt); background: rgba(15,23,42,.72); border: 1px solid rgba(148,163,184,.16); border-radius: 999px; cursor: pointer; }
.locale-trigger:hover { border-color: rgba(148,163,184,.32); background: rgba(21,32,51,.92); }
.locale-flag { font-size: 16px; line-height: 1; }
.locale-label { max-width: 88px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.locale-caret { color: var(--muted); font-size: 10px; }
.locale-menu { position: absolute; top: calc(100% + 6px); right: 0; display: flex; flex-direction: column; min-width: 168px; padding: 4px; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow); z-index: 30; }
.locale-menu[hidden] { display: none !important; }
.locale-option { display: flex; align-items: center; gap: 8px; width: 100%; padding: 8px 10px; font-size: 12px; color: var(--txt); background: transparent; border: 0; border-radius: 8px; cursor: pointer; text-align: left; }
.locale-option:hover { background: rgba(59,130,246,.12); }
.locale-option.active { background: rgba(59,130,246,.18); color: var(--accent-2); }
.user-badge .user-role { color: var(--accent-2); font-size: 11px; text-transform: uppercase; font-weight: 700; }
.user-badge .user-quota { color: var(--muted); font-size: 11px; white-space: nowrap; max-width: 220px; overflow: hidden; text-overflow: ellipsis; }
.user-badge button { padding: 5px 10px; font-size: 11px; }
.user-badge .settings-link { padding: 5px 10px; font-size: 11px; text-decoration: none; display: inline-block; border-radius: 10px; background: var(--panel-2); color: var(--txt); border: 1px solid var(--line); }
.tabs .queue-status { margin-left: 0; }
.queue-status b { color: var(--txt); }
.queue-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--muted); box-shadow: 0 0 0 3px rgba(148,163,184,.14); flex: 0 0 auto; }
.queue-dot.ok { background: var(--ok); box-shadow: 0 0 0 3px rgba(34,197,94,.16); }
.queue-dot.busy { background: var(--warn); box-shadow: 0 0 0 3px rgba(245,158,11,.16); }
.queue-dot.err { background: var(--err); box-shadow: 0 0 0 3px rgba(239,68,68,.16); }
.queue-job { border: 1px solid rgba(148,163,184,.14); background: rgba(148,163,184,.08); border-radius: 999px; padding: 3px 7px; font-size: 11px; }
.queue-job.active { color: var(--warn); }
.queue-job.completed { color: var(--ok); }
.queue-job.failed { color: var(--err); }
.switch-label { color: var(--muted); cursor: pointer; user-select: none; }
.tabs { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 10px 22px; background: rgba(9,14,27,.62); backdrop-filter: blur(18px); border-bottom: 1px solid rgba(148,163,184,.12); position: sticky; top: 0; z-index: 20; }
.tabs .queue-status { margin-left: 0; }
.tabs .user-badge + .queue-status { margin-left: 0; }
.tab { background: rgba(15,23,42,.62); border: 1px solid rgba(148,163,184,.12); color: var(--muted); padding: 9px 15px; cursor: pointer; border-radius: 999px; font-size: 13px; text-decoration: none; display: inline-block; }
.tab:hover { color: var(--txt); background: rgba(96,165,250,.12); opacity: 1; }
.tab.active { color: #fff; border-color: rgba(96,165,250,.55); background: linear-gradient(135deg, rgba(59,130,246,.28), rgba(168,85,247,.16)); box-shadow: 0 8px 24px rgba(59,130,246,.12); }
main { padding: 20px; position: relative; z-index: 1; }
.panel { display: none; background: linear-gradient(180deg, rgba(16,24,39,.92), rgba(11,16,32,.9)); border: 1px solid rgba(148,163,184,.16); border-radius: 22px; padding: 16px; box-shadow: var(--shadow); }
.panel.active { display: block; }
.page-head { display: grid; grid-template-columns: minmax(260px, .8fr) minmax(420px, 1.8fr); gap: 14px; align-items: stretch; margin-bottom: 14px; }
.page-head h2 { margin: 2px 0 4px; font-size: 22px; letter-spacing: -.25px; }
.page-head span { color: var(--muted); line-height: 1.45; }
.eyebrow { margin: 0; color: var(--accent-2); font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); gap: 10px; }
.stat-card { position: relative; overflow: hidden; min-height: 78px; padding: 11px; border: 1px solid rgba(148,163,184,.14); border-radius: 16px; background: rgba(15,23,42,.72); }
.stat-card::after { content: ''; position: absolute; inset: auto -18px -28px auto; width: 76px; height: 76px; border-radius: 50%; background: rgba(59,130,246,.16); }
.stat-card-label { display: block; color: var(--muted); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.stat-card strong { display: block; margin-top: 7px; font-size: 22px; line-height: 1; }
.stat-card small { display: block; margin-top: 8px; color: var(--muted); }
.stat-card.green::after { background: rgba(34,197,94,.16); }
.stat-card.red::after { background: rgba(239,68,68,.16); }
.stat-card.orange::after { background: rgba(245,158,11,.18); }
.stat-card.purple::after { background: rgba(168,85,247,.18); }
.stat-card.cyan::after { background: rgba(6,182,212,.18); }
.stat-card strong .stat-balance-ok,
.stat-card strong .stat-balance-hold {
  display: inline;
  font: inherit;
  letter-spacing: inherit;
  text-transform: none;
}
.stat-card strong .stat-balance-ok { color: #22c55e; }
.stat-card strong .stat-balance-hold { color: #f59e0b; }
.stat-card strong .stat-val-ok,
.stat-card strong .stat-val-err,
.stat-card strong .stat-val-warn,
.stat-card strong .stat-val-sep {
  display: inline;
  font: inherit;
  letter-spacing: inherit;
  text-transform: none;
}
.stat-card strong .stat-val-ok { color: #22c55e; }
.stat-card strong .stat-val-err { color: #ef4444; }
.stat-card strong .stat-val-warn { color: #f59e0b; }
.stat-card strong .stat-val-sep { color: var(--muted); font-weight: 400; }
.toolbar, .subtabs { display: flex; gap: 8px; align-items: center; margin-bottom: 12px; flex-wrap: wrap; padding: 10px; border: 1px solid rgba(148,163,184,.12); border-radius: 16px; background: rgba(15,23,42,.55); }
.toolbar-input { width: 240px; max-width: 100%; }
.subtab { background: var(--panel-2); border: 1px solid var(--line); color: var(--muted); padding: 7px 13px; border-radius: 10px; cursor: pointer; text-decoration: none; display: inline-block; }
.subtab.active { color: #fff; border-color: var(--accent); background: rgba(59,130,246,.22); }
button { background: linear-gradient(135deg, var(--accent), #2563eb); color: #fff; border: 1px solid rgba(255,255,255,.06); padding: 7px 13px; border-radius: 10px; cursor: pointer; font-size: 12px; transition: transform .12s, opacity .12s, background .12s; }
button:hover { opacity: .95; transform: translateY(-1px); }
button:disabled { opacity: .45; cursor: not-allowed; transform: none; }
button.secondary, button.refresh { background: var(--panel-2); color: var(--txt); border-color: var(--line); }
button.secondary.active { background: rgba(245,158,11,.22); color: #fbbf24; border-color: rgba(245,158,11,.45); }
button.refresh { margin-left: auto; }
button.loading { cursor: wait; opacity: .7; }
select, input[type=text], input[type=password], input[type=number], textarea { background: #0c1324; color: var(--txt); border: 1px solid var(--line); border-radius: 10px; padding: 7px 9px; font-size: 12px; outline: none; }
select:focus, input:focus, textarea:focus { border-color: var(--accent-2); box-shadow: 0 0 0 3px rgba(59,130,246,.14); }
.selection-info { color: var(--muted); background: rgba(148,163,184,.1); border: 1px solid var(--line); padding: 6px 10px; border-radius: 999px; }

@media (max-width: 760px) {
  .tabs { position: static; }
  .tabs .queue-status { margin-left: 0; max-width: 100%; }
  main { padding: 10px; }
  .import-grid { grid-template-columns: 1fr; }
  .import-single-form .form-row { grid-template-columns: 1fr; }
}


/* Data grid compact giống Excel */
:root {
  --bg: #181b1c; --panel: #202627; --panel-2: #263031; --panel-3: #1b2021; --line: #3f4a4c;
  --txt: #e6edf0; --muted: #a7b2b6; --accent: #5f7378; --accent-2: #8f9da1;
  --shadow: none;
}
body { background: #151819; color: var(--txt); font-size: 12px; }
body::before { display: none; }
.topbar { padding: 8px 12px; background: #1b1f20; border-bottom: 1px solid #343c3e; }
.brand-mark { width: 30px; height: 30px; border-radius: 4px; box-shadow: none; background: #3a4446; }
.topbar h1 { font-size: 14px; }
.topbar p { font-size: 11px; margin-top: 1px; }
.tabs { top: 0; padding: 6px 12px; gap: 4px; background: #1b1f20; border-bottom: 1px solid #343c3e; }
.tab, .subtab, button { border-radius: 3px; padding: 5px 9px; font-size: 12px; background: #263031; border: 1px solid #4a5456; color: var(--txt); box-shadow: none; }
.tab { color: var(--muted); border-color: #394446; }
.tab:hover { background: #2d3637; color: var(--txt); opacity: 1; }
.tab.active, .subtab.active { color: var(--txt); background: #2d3a3c; border-color: #5f7378; box-shadow: none; }
.tag { background: #3a4446; border: 1px solid #4a5456; border-radius: 3px; color: var(--txt); font-size: 10px; padding: 2px 6px; }
.user-badge { background: #222a2b; border: 1px solid #3f4a4c; border-radius: 3px; padding: 4px 8px 4px 10px; gap: 6px; }
.locale-trigger { border-radius: 3px; background: #222a2b; border-color: #3f4a4c; }
.locale-menu { border-radius: 4px; }
.locale-option { border-radius: 3px; }
.user-badge .user-role { color: #8f9da1; }
.user-badge .user-quota { color: #8f9da1; }
.user-badge .settings-link { border-radius: 3px; padding: 4px 8px; }
.user-badge button { border-radius: 3px; }
button:hover { transform: none; opacity: 1; background: #3a4446; }
main { padding: 10px; }
.panel { background: #202627; border-color: #394446; border-radius: 4px; padding: 8px; }
.page-head { grid-template-columns: minmax(220px, .55fr) minmax(520px, 1.45fr); gap: 8px; margin-bottom: 8px; }
.page-head h2 { font-size: 16px; margin: 0 0 2px; }
.page-head span, .eyebrow { font-size: 11px; }
.eyebrow { color: var(--muted); font-weight: 700; letter-spacing: .08em; }
.stat-grid { grid-template-columns: repeat(auto-fit, minmax(92px, 1fr)); gap: 5px; }
.stat-card { min-height: 52px; padding: 7px 8px; border-radius: 3px; background: #252c2d; border-color: #3d484a; }
.stat-card::after { display: none; }
.stat-card-label { font-size: 9px; letter-spacing: .03em; }
.stat-card strong { font-size: 15px; margin-top: 4px; }
.stat-card small { font-size: 10px; margin-top: 4px; }
.toolbar, .subtabs { gap: 5px; padding: 6px; margin-bottom: 8px; border-radius: 3px; background: #1c2223; border-color: #394446; }
select, input[type=text], input[type=password], input[type=number], textarea { background: #222a2b; color: var(--txt); border: 1px solid var(--line); border-radius: 1px; padding: 4px 6px; font-size: 12px; outline: none; }
select:focus, input:focus, textarea:focus { border-color: #5f7378; box-shadow: 0 0 0 2px rgba(95,115,120,.12); }
.toolbar-input { width: 210px; max-width: 100%; }
.selection-info { border-radius: 3px; padding: 4px 7px; }
.queue-status { border-radius: 3px; padding: 4px 7px; background: #222a2b; border-color: #3f4a4c; }

.btn-primary-lg { padding: 7px 14px; font-size: 13px; font-weight: 700; letter-spacing: .01em; }
.btn-secondary-lg { padding: 7px 14px; font-size: 13px; font-weight: 700; letter-spacing: .01em; background: #263031; color: var(--txt); border-color: #5f7378; }

@media (max-width: 1200px) {
  .page-head { grid-template-columns: 1fr; }
  .stat-grid { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); }
}

@media (max-width: 760px) {
  .page-head { grid-template-columns: 1fr; }
  .stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .topbar { flex-wrap: wrap; }
  .topbar-right, .topbar .right, .nav-right { flex-wrap: wrap; }
}