/* ================================================================
   AFFILIATEBOT — COMPONENTS  components.css
   Buttons · Forms · Cards · Badges · Tables · Modals · Toasts · Skeleton
   ================================================================ */

/* ── BUTTONS ────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: 0 var(--sp-4);
  height: 38px;
  border-radius: var(--r-control);
  font-size: 13.5px;
  font-weight: var(--fw-semi);
  white-space: nowrap;
  cursor: pointer;
  border: none;
  transition: background var(--dur-fast), box-shadow var(--dur-fast),
              transform var(--dur-fast), color var(--dur-fast),
              border-color var(--dur-fast);
  text-decoration: none;
  user-select: none;
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
}

.btn:active { transform: scale(.97); }
.btn:disabled, .btn[disabled] { opacity: .55; cursor: not-allowed; transform: none !important; }

/* Variants */
.btn-primary {
  background: var(--grad-primary);
  color: #fff;
  box-shadow: var(--sh-glow);
}
.btn-primary:hover:not(:disabled) {
  filter: brightness(1.08);
  box-shadow: var(--sh-glow);
}

.btn-secondary {
  background: var(--c-surface);
  color: var(--c-text);
  border: 1px solid var(--c-border);
  box-shadow: var(--sh-card);
}
.btn-secondary:hover:not(:disabled) {
  background: var(--c-surface-2);
  border-color: var(--c-border-2);
}

.btn-ghost {
  background: transparent;
  color: var(--c-text-2);
}
.btn-ghost:hover:not(:disabled) {
  background: var(--c-surface-2);
  color: var(--c-text);
}

.btn-primary-soft {
  background: var(--c-primary-s);
  color: var(--c-primary-st);
}
.btn-primary-soft:hover:not(:disabled) {
  background: #dce8fd;
}

.btn-danger {
  background: var(--c-danger);
  color: #fff;
}
.btn-danger:hover:not(:disabled) {
  background: var(--c-danger-h);
  box-shadow: 0 4px 12px rgba(220,38,38,.3);
}

.btn-danger-soft {
  background: var(--c-danger-s);
  color: var(--c-danger-st);
}
.btn-danger-soft:hover:not(:disabled) { background: #fecaca; }

.btn-success {
  background: var(--c-success);
  color: #fff;
}
.btn-success:hover:not(:disabled) {
  background: var(--c-success-h);
  box-shadow: 0 4px 12px rgba(5,150,105,.3);
}

.btn-warning-soft {
  background: var(--c-warning-s);
  color: var(--c-warning-st);
}

/* Sizes */
.btn-sm { height: 32px; padding: 0 var(--sp-3); font-size: 12.5px; }
.btn-lg { height: 44px; padding: 0 var(--sp-5); font-size: 14.5px; }
.btn-xl { height: 50px; padding: 0 var(--sp-6); font-size: 15px; }

/* Icon-only */
.btn-icon {
  width: 36px; height: 36px;
  padding: 0;
  border-radius: var(--r-control);
}
.btn-icon-sm { width: 30px; height: 30px; border-radius: var(--r-sm); }
.btn-icon-lg { width: 44px; height: 44px; }
.btn-icon.btn-secondary, .btn-icon-sm.btn-secondary { border: 1px solid var(--c-border); }

@media (max-width: 767px) {
  .btn {
    min-height: 44px;
  }
  .btn-sm {
    height: 44px;
    min-height: 44px;
  }
  .btn-icon,
  .btn-icon-sm {
    height: 44px;
    min-height: 44px;
    min-width: 44px;
    width: 44px;
  }
}

/* Pill variant */
.btn-pill { border-radius: var(--r-pill); }

/* Loading state */
.btn.loading { pointer-events: none; }
.btn.loading .btn-text { opacity: 0; }
.btn.loading::after {
  content: '';
  position: absolute;
  width: 16px; height: 16px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: spin .7s linear infinite;
}

/* Icon sizing inside btn */
.btn svg, .btn .icon { width: 16px; height: 16px; flex-shrink: 0; }
.btn-sm svg, .btn-sm .icon { width: 14px; height: 14px; }
.btn-lg svg, .btn-lg .icon { width: 18px; height: 18px; }

/* ── FORM CONTROLS ──────────────────────────────────────────────── */
.form-group { display: flex; flex-direction: column; gap: var(--sp-1); }
.form-label {
  font-size: 13px;
  font-weight: var(--fw-medium);
  color: var(--c-text);
}
.form-hint { font-size: 12px; color: var(--c-text-3); }
.form-error { font-size: 12px; color: var(--c-danger); }

.input {
  width: 100%;
  height: 40px;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-control);
  padding: 0 var(--sp-3);
  font-size: 13.5px;
  color: var(--c-text);
  transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
}
.input::placeholder { color: var(--c-text-3); }
.input:focus { border-color: var(--c-primary); box-shadow: var(--sh-focus); outline: none; }
.input:disabled { background: var(--c-surface-2); opacity: .7; cursor: not-allowed; }
.input.error { border-color: var(--c-danger); }
.input.error:focus { box-shadow: var(--sh-danger); }

.input-sm { height: 34px; font-size: 13px; padding: 0 var(--sp-2); }
.input-lg { height: 46px; font-size: 15px; }
.textarea {
  height: auto;
  min-height: 88px;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-control);
  padding: var(--sp-3);
  color: var(--c-text);
  resize: vertical;
}
.textarea::placeholder { color: var(--c-text-3); }
.textarea:focus { border-color: var(--c-primary); box-shadow: var(--sh-focus); outline: none; }

.input-wrap { position: relative; }
.input-wrap .input-icon-l {
  position: absolute;
  left: 12px; top: 50%;
  transform: translateY(-50%);
  color: var(--c-text-3);
  pointer-events: none;
  width: 16px; height: 16px;
}
.input-wrap .input-icon-r {
  position: absolute;
  right: 12px; top: 50%;
  transform: translateY(-50%);
  color: var(--c-text-3);
  cursor: pointer;
  width: 16px; height: 16px;
}
.input-wrap .input { padding-left: 38px; }
.input-wrap.has-right .input { padding-right: 38px; }

select.input {
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 36px;
  appearance: none;
  -webkit-appearance: none;
}

/* Toggle switch */
.toggle-wrap { display: flex; align-items: center; gap: var(--sp-3); }
.toggle-label { font-size: 13.5px; font-weight: var(--fw-medium); color: var(--c-text); cursor: pointer; }

.toggle {
  position: relative;
  width: 44px; height: 24px;
  cursor: pointer;
  flex-shrink: 0;
}
.toggle input { opacity: 0; width: 0; height: 0; position: absolute; }
.toggle-track {
  position: absolute; inset: 0;
  background: var(--c-border-2);
  border-radius: var(--r-pill);
  transition: background var(--dur-fast);
}
.toggle input:checked + .toggle-track { background: var(--c-primary); }
.toggle-thumb {
  position: absolute;
  left: 3px; top: 3px;
  width: 18px; height: 18px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 1px 4px rgba(0,0,0,.2);
  transition: transform var(--dur-base) var(--ease-spring);
}
.toggle input:checked ~ .toggle-thumb { transform: translateX(20px); }

/* Checkbox */
.checkbox-wrap { display: flex; align-items: center; gap: var(--sp-2); }
.checkbox-wrap label { font-size: 13.5px; color: var(--c-text); cursor: pointer; }
.checkbox {
  width: 18px; height: 18px;
  border: 1.5px solid var(--c-border-2);
  border-radius: var(--r-xs);
  background: var(--c-surface);
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  transition: background var(--dur-fast), border-color var(--dur-fast);
  position: relative;
  flex-shrink: 0;
}
.checkbox:checked {
  background: var(--c-primary);
  border-color: var(--c-primary);
}
.checkbox:checked::after {
  content: '';
  position: absolute;
  left: 4px; top: 1.5px;
  width: 8px; height: 12px;
  border: 2px solid #fff;
  border-top: none; border-left: none;
  transform: rotate(45deg);
}

/* Search bar standalone */
.search-bar {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-control);
  padding: 0 var(--sp-3);
  height: 38px;
  transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
}
.search-bar:focus-within {
  border-color: var(--c-primary);
  box-shadow: var(--sh-focus);
}
.search-bar input {
  border: none;
  background: transparent;
  outline: none;
  font-size: 13.5px;
  flex: 1;
  min-width: 0;
}
.search-bar .icon { width: 16px; height: 16px; color: var(--c-text-3); flex-shrink: 0; }

/* ── CARDS ──────────────────────────────────────────────────────── */
.card {
  background: var(--c-surface);
  border-radius: var(--r-card);
  border: 1px solid var(--c-border);
  box-shadow: var(--sh-card);
  overflow: hidden;
}

.card-hover {
  transition: box-shadow var(--dur-fast), transform var(--dur-fast),
              border-color var(--dur-fast);
  cursor: pointer;
}
.card-hover:hover {
  box-shadow: var(--sh-raised);
  border-color: var(--c-border-2);
  transform: translateY(-1px);
}
.card-hover:active { transform: scale(.995); }

.card-header {
  padding: var(--sp-5) var(--sp-5) 0;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-3);
}
.card-title {
  font-size: 14px;
  font-weight: var(--fw-semi);
  color: var(--c-text);
}
.card-subtitle {
  font-size: 12.5px;
  color: var(--c-text-2);
  margin-top: 2px;
}
.card-body { padding: var(--sp-5); }
.card-footer {
  padding: var(--sp-4) var(--sp-5);
  border-top: 1px solid var(--c-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
}

/* KPI / Stat card */
.stat-card {
  background: var(--c-surface);
  border-radius: var(--r-card);
  border: 1px solid var(--c-border);
  box-shadow: var(--sh-card);
  padding: var(--sp-5);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  transition: box-shadow var(--dur-fast), transform var(--dur-fast);
}
.stat-card:hover { box-shadow: var(--sh-raised); transform: translateY(-1px); }

/* Stat-card sub-elements (khớp mockup v8_4 00-design-system: label hoa, value 32px) */
.stat-card .sc-label {
  font-size: 12px;
  color: var(--c-text-3);
  text-transform: uppercase;
  letter-spacing: .04em;
  display: flex;
  align-items: center;
  gap: 6px;
}
.stat-card .sc-label svg, .stat-card .sc-label i { width: 15px; height: 15px; }
.stat-card .sc-value { font-size: 32px; font-weight: var(--fw-bold); line-height: 1.1; }
.stat-card .sc-value.money { color: var(--c-money); }
.stat-card .sc-delta { font-size: 12px; font-weight: var(--fw-semi); }
.stat-card .sc-delta.up { color: var(--c-success); }
.stat-card .sc-delta.down { color: var(--c-danger); }

.stat-icon-wrap {
  width: 42px; height: 42px;
  border-radius: var(--r-control);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.stat-icon-wrap svg { width: 22px; height: 22px; }

.stat-label {
  font-size: 12.5px;
  font-weight: var(--fw-medium);
  color: var(--c-text-2);
}

.stat-value {
  font-size: 28px;
  font-weight: var(--fw-bold);
  color: var(--c-text);
  line-height: 1;
  letter-spacing: -.02em;
}

.stat-delta {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 12px;
  font-weight: var(--fw-semi);
  border-radius: var(--r-pill);
  padding: 2px 8px;
}

.stat-delta.up { background: var(--c-success-s); color: var(--c-success-st); }
.stat-delta.down { background: var(--c-danger-s); color: var(--c-danger-st); }
.stat-delta.muted { background: var(--c-surface-2); color: var(--c-text-2); }
.stat-delta svg { width: 12px; height: 12px; }

.stat-sub {
  color: var(--c-text-3);
  font-size: 12px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

/* ── BADGES / PILLS ─────────────────────────────────────────────── */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 9px;
  border-radius: var(--r-pill);
  font-size: 11.5px;
  font-weight: var(--fw-semi);
  white-space: nowrap;
}

.badge svg, .badge .icon { width: 12px; height: 12px; }

.badge-primary { background: var(--c-primary-s); color: var(--c-primary-st); }
.badge-success { background: var(--c-success-s); color: var(--c-success-st); }
.badge-warning { background: var(--c-warning-s); color: var(--c-warning-st); }
.badge-danger  { background: var(--c-danger-s);  color: var(--c-danger-st); }
.badge-info    { background: var(--c-info-s);    color: var(--c-info-st); }
.badge-purple  { background: var(--c-purple-s);  color: var(--c-purple-st); }
.badge-gray    { background: var(--c-surface-2); color: var(--c-text-2); border: 1px solid var(--c-border); }

/* Status dot */
.status-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.status-dot.success { background: var(--c-success); }
.status-dot.warning { background: var(--c-warning); }
.status-dot.danger  { background: var(--c-danger); }
.status-dot.info    { background: var(--c-info); }
.status-dot.gray    { background: var(--c-text-3); }
.status-dot.pulse {
  animation: pulse-status 2s ease-in-out infinite;
}

@keyframes pulse-status {
  0%,100%{ box-shadow: 0 0 0 0 rgba(5,150,105,.5) }
  50%    { box-shadow: 0 0 0 5px rgba(5,150,105,0) }
}

/* Tag / chip */
.tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: var(--r-sm);
  font-size: 11.5px;
  font-weight: var(--fw-medium);
  background: var(--c-surface-2);
  color: var(--c-text-2);
  border: 1px solid var(--c-border);
}

/* ── AVATAR ─────────────────────────────────────────────────────── */
.avatar {
  border-radius: var(--r-pill);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: var(--fw-semi);
  background: var(--c-primary-s);
  color: var(--c-primary-st);
  flex-shrink: 0;
}
.avatar-xs  { width: 24px; height: 24px; font-size: 10px; }
.avatar-sm  { width: 32px; height: 32px; font-size: 12px; }
.avatar-md  { width: 40px; height: 40px; font-size: 14px; }
.avatar-lg  { width: 48px; height: 48px; font-size: 16px; }

/* ── PROGRESS BARS ──────────────────────────────────────────────── */
.progress {
  background: var(--c-surface-2);
  border-radius: var(--r-pill);
  overflow: hidden;
  height: 6px;
  border: 1px solid var(--c-border);
}
.progress-bar {
  height: 100%;
  border-radius: var(--r-pill);
  background: var(--c-primary);
  transition: width .8s var(--ease-spring);
  transform-origin: left;
}
.progress.sm  { height: 4px; }
.progress.lg  { height: 10px; }
.progress.success .progress-bar { background: var(--c-success); }
.progress.warning .progress-bar { background: var(--c-warning); }
.progress.danger  .progress-bar { background: var(--c-danger); }
.progress.custom .progress-bar { background: var(--c-primary); }

/* Animated progress bar */
@keyframes progress-stripe {
  from { background-position: 40px 0; }
  to   { background-position: 0 0; }
}
.progress-bar-animated {
  background-image: linear-gradient(
    45deg,
    rgba(255,255,255,.15) 25%, transparent 25%,
    transparent 50%,
    rgba(255,255,255,.15) 50%,
    rgba(255,255,255,.15) 75%,
    transparent 75%, transparent
  );
  background-size: 40px 40px;
  animation: progress-stripe 1s linear infinite;
}

/* Selected state (for cards, rows, list items) */
.selected {
  outline: 2px solid var(--c-primary) !important;
  outline-offset: -2px;
}
[data-theme="dark"] .selected { outline-color: #60a5fa !important; }

/* Score bar (P score) */
.score-bar-wrap { display: flex; flex-direction: column; gap: 4px; }
.score-bar-labels {
  display: flex; justify-content: space-between;
  font-size: 12px; color: var(--c-text-2);
}
.score-bar-labels strong { font-weight: var(--fw-semi); color: var(--c-text); }

/* ── TABLES ─────────────────────────────────────────────────────── */
.table-wrap {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
  white-space: nowrap;
}

.table th {
  text-align: left;
  padding: var(--sp-3) var(--sp-4);
  font-size: 11.5px;
  font-weight: var(--fw-semi);
  color: var(--c-text-3);
  text-transform: uppercase;
  letter-spacing: .06em;
  border-bottom: 1px solid var(--c-border);
  background: var(--c-surface-2);
  white-space: nowrap;
  user-select: none;
}

.table th.sortable { cursor: pointer; }
.table th.sortable:hover { color: var(--c-text); }

.table td {
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--c-border);
  color: var(--c-text);
  vertical-align: middle;
}

.table tr:last-child td { border-bottom: none; }

.table tbody tr {
  transition: background var(--dur-fast);
}
.table tbody tr:hover { background: var(--c-surface-2); }

.table tbody tr.selected { background: var(--c-primary-s); }

/* Row action (swipe or end) */
.table-row-actions {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  opacity: 0;
  transition: opacity var(--dur-fast);
}
.table tbody tr:hover .table-row-actions { opacity: 1; }

/* ── LIST ITEMS ─────────────────────────────────────────────────── */
.list-item {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-5);
  border-bottom: 1px solid var(--c-border);
  transition: background var(--dur-fast);
  cursor: pointer;
}
.list-item:last-child { border-bottom: none; }
.list-item:hover { background: var(--c-surface-2); }
.list-item:active { background: var(--c-primary-s); }

/* ── MODAL ──────────────────────────────────────────────────────── */
.modal-backdrop {
  position: fixed; inset: 0;
  background: rgba(15,23,42,.5);
  z-index: 70;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-4);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-base);
}
.modal-backdrop.open { opacity: 1; pointer-events: auto; }

.modal {
  position: fixed;
  left: 50%; top: 50%;
  z-index: 71;
  background: var(--c-surface);
  border: 1px solid var(--c-border-2);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-card);
  width: min(520px, calc(100vw - var(--sp-8)));
  max-height: min(640px, calc(100vh - var(--sp-8)));
  display: flex;
  flex-direction: column;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -50%) scale(.94);
  transition: opacity var(--dur-base), transform var(--dur-base) var(--ease-spring);
}
.modal.open { opacity: 1; pointer-events: auto; transform: translate(-50%, -50%) scale(1); }

.modal-lg { width: min(680px, 100%); }
.modal-xl { width: min(900px, 100%); max-height: min(800px, calc(100vh - var(--sp-8))); }

.modal-header {
  padding: var(--sp-5) var(--sp-6);
  border-bottom: 1px solid var(--c-border);
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-4);
  flex-shrink: 0;
}
.modal-head {
  padding: var(--sp-4) var(--sp-5);
  border-bottom: 1px solid var(--c-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  flex-shrink: 0;
}
.modal-title { font-size: 16px; font-weight: 700; }
.modal-close {
  width: 32px; height: 32px;
  border-radius: var(--r-control);
  display: flex; align-items: center; justify-content: center;
  color: var(--c-text-3);
  cursor: pointer;
  transition: background var(--dur-fast), color var(--dur-fast);
  flex-shrink: 0;
}
.modal-close:hover { background: var(--c-surface-2); color: var(--c-text); }

.modal-body {
  padding: var(--sp-6);
  overflow-y: auto;
  flex: 1;
}
.modal-head + .modal-body {
  padding: var(--sp-5);
  max-height: 70vh;
  overflow: auto;
}

.modal-footer {
  padding: var(--sp-4) var(--sp-6);
  border-top: 1px solid var(--c-border);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--sp-3);
  flex-shrink: 0;
}
.modal-foot {
  padding: var(--sp-4) var(--sp-5);
  border-top: 1px solid var(--c-border);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--sp-3);
  flex-shrink: 0;
}

/* Bottom sheet (mobile detail) */
.bottom-sheet-backdrop {
  position: fixed; inset: 0;
  background: rgba(15,23,42,.45);
  z-index: 60;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-base);
}
.bottom-sheet-backdrop.open { opacity: 1; pointer-events: auto; }

.bottom-sheet {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  background: var(--c-surface);
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  z-index: 61;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  transform: translateY(100%);
  transition: transform var(--dur-base) var(--ease-spring);
  padding-bottom: env(safe-area-inset-bottom, 0);
}
.bottom-sheet.open { transform: translateY(0); }
.bottom-sheet-handle {
  width: 36px; height: 4px;
  background: var(--c-border-2);
  border-radius: var(--r-pill);
  margin: var(--sp-3) auto var(--sp-2);
  flex-shrink: 0;
}
.bottom-sheet-body {
  flex: 1;
  overflow-y: auto;
  padding: var(--sp-2) var(--sp-4) var(--sp-8);
}

/* ── TOAST ──────────────────────────────────────────────────────── */
.toast {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  padding: var(--sp-4);
  background: var(--c-text);
  color: #fff;
  border-radius: var(--r-card);
  box-shadow: var(--sh-modal);
  font-size: 13.5px;
  pointer-events: auto;
  transform: translateX(100%);
  opacity: 0;
  transition: transform var(--dur-base) var(--ease-spring),
              opacity var(--dur-base);
  position: relative;
  overflow: hidden;
}

.toast.show { transform: translateX(0); opacity: 1; }
.toast.hide { transform: translateX(120%); opacity: 0; }

.toast-icon { width: 18px; height: 18px; flex-shrink: 0; margin-top: 1px; }
.toast-content { flex: 1; }
.toast-title { font-weight: var(--fw-semi); }
.toast-msg { font-size: 12.5px; opacity: .85; margin-top: 2px; }
.toast-close {
  width: 20px; height: 20px;
  cursor: pointer;
  opacity: .6;
  flex-shrink: 0;
  transition: opacity var(--dur-fast);
}
.toast-close:hover { opacity: 1; }

.toast.success { background: var(--c-success); }
.toast.warning { background: var(--c-warning); }
.toast.error   { background: var(--c-danger); }
.toast.info    { background: var(--c-info); }
.toast.default { background: #1e293b; }

.toast-progress {
  position: absolute;
  bottom: 0; left: 0;
  height: 3px;
  background: rgba(255,255,255,.35);
  border-radius: 0 0 var(--r-xs) 0;
  animation: toast-drain linear forwards;
}

@keyframes toast-drain {
  from { width: 100%; }
  to   { width: 0%; }
}

/* ── SKELETON ───────────────────────────────────────────────────── */
.skeleton {
  background: linear-gradient(
    90deg,
    var(--c-border) 25%,
    var(--c-skeleton-shine) 50%,
    var(--c-border) 75%
  );
  background-size: 300% 100%;
  border-radius: var(--r-sm);
  animation: shimmer 1.6s ease-in-out infinite;
}

.skel-text { height: 14px; width: 100%; border-radius: var(--r-xs); }
.skel-text.sm { height: 12px; }
.skel-text.lg { height: 18px; }
.skel-text.w-60 { width: 60%; }
.skel-text.w-40 { width: 40%; }
.skel-text.w-75 { width: 75%; }
.skel-title { height: 22px; width: 55%; }
.skel-circle { border-radius: 50%; }
.skel-avatar { width: 40px; height: 40px; border-radius: var(--r-pill); }
.skel-avatar-sm { width: 32px; height: 32px; border-radius: var(--r-pill); }
.skel-btn { height: 36px; width: 100px; border-radius: var(--r-control); }
.skel-badge { height: 22px; width: 64px; border-radius: var(--r-pill); }
.skel-badge-wide { width: 80px; }
.skel-meter {
  height: 8px;
  margin-top: var(--sp-3);
  border-radius: var(--r-pill);
}
.skel-stat-icon {
  width: 42px;
  height: 42px;
  border-radius: var(--r-control);
}
.skel-card { border-radius: var(--r-card); }
.skel-thumb { border-radius: var(--r-control); }

/* Skeleton card layout */
.skeleton-card {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-card);
  padding: var(--sp-5);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.skeleton-row {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-5);
  border-bottom: 1px solid var(--c-border);
}
.skeleton-row:last-child { border-bottom: none; }

/* ── EMPTY STATE ────────────────────────────────────────────────── */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--sp-16) var(--sp-8);
  text-align: center;
  gap: var(--sp-4);
}

.empty-state-icon {
  width: 64px; height: 64px;
  background: var(--c-surface-2);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: var(--c-text-3);
  margin-bottom: var(--sp-2);
}

.empty-state-title {
  font-size: 16px;
  font-weight: var(--fw-semi);
  color: var(--c-text);
}

.empty-state-desc {
  font-size: 13.5px;
  color: var(--c-text-2);
  max-width: 320px;
  line-height: 1.6;
}

/* ── ERROR STATE ────────────────────────────────────────────────── */
.error-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--sp-12) var(--sp-8);
  text-align: center;
  gap: var(--sp-4);
}

.error-state-icon {
  width: 56px; height: 56px;
  background: var(--c-danger-s);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: var(--c-danger);
}

/* ── DROPDOWN ───────────────────────────────────────────────────── */
.dropdown { position: relative; display: inline-flex; }

.dropdown-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-card);
  box-shadow: var(--sh-raised);
  min-width: 180px;
  z-index: 50;
  overflow: hidden;
  opacity: 0;
  transform: scale(.95) translateY(-4px);
  transform-origin: top right;
  transition: opacity var(--dur-fast), transform var(--dur-fast) var(--ease-spring);
  pointer-events: none;
}

.dropdown-menu.open {
  opacity: 1;
  transform: scale(1) translateY(0);
  pointer-events: auto;
}

.dropdown-item {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: 10px var(--sp-4);
  font-size: 13.5px;
  color: var(--c-text);
  cursor: pointer;
  transition: background var(--dur-fast);
}
.dropdown-item:hover { background: var(--c-surface-2); }
.dropdown-item.danger { color: var(--c-danger); }
.dropdown-item.danger:hover { background: var(--c-danger-s); }
.dropdown-item svg { width: 16px; height: 16px; color: var(--c-text-2); }
.dropdown-item.danger svg { color: var(--c-danger); }
.dropdown-divider { height: 1px; background: var(--c-border); margin: var(--sp-1) 0; }

/* ── TABS ───────────────────────────────────────────────────────── */
.tabs {
  display: flex;
  gap: 2px;
  border-bottom: 1px solid var(--c-border);
  margin-bottom: var(--sp-5);
  overflow-x: auto;
  scrollbar-width: none;
}
.tabs::-webkit-scrollbar { display: none; }

.tab-item {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: 38px;
  padding: var(--sp-3) var(--sp-4);
  font-size: 13.5px;
  font-weight: var(--fw-medium);
  color: var(--c-text-2);
  cursor: pointer;
  white-space: nowrap;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color var(--dur-fast), border-color var(--dur-fast);
}
.tab-item:hover { color: var(--c-text); }
.tab-item.active {
  color: var(--c-primary);
  border-bottom-color: var(--c-primary);
  font-weight: var(--fw-semi);
}
.tab-item .tab-count {
  background: var(--c-surface-2);
  border: 1px solid var(--c-border);
  border-radius: var(--r-pill);
  padding: 0 6px;
  font-size: 11px;
  font-weight: var(--fw-semi);
  color: var(--c-text-3);
}
.tab-item.active .tab-count {
  background: var(--c-primary-s);
  border-color: var(--c-primary-s);
  color: var(--c-primary-st);
}

/* ── FILTERS ROW ────────────────────────────────────────────────── */
.filters-row {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex-wrap: wrap;
  margin-bottom: var(--sp-4);
}

.filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 44px;
  min-width: 44px;
  padding: 5px 12px;
  border-radius: var(--r-pill);
  font-size: 12.5px;
  font-weight: var(--fw-medium);
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  color: var(--c-text-2);
  cursor: pointer;
  transition: background var(--dur-fast), border-color var(--dur-fast),
              color var(--dur-fast);
  white-space: nowrap;
}
.filter-chip:hover { border-color: var(--c-border-2); color: var(--c-text); }
.filter-chip.active {
  background: var(--c-primary-s);
  border-color: var(--c-primary-s);
  color: var(--c-primary-st);
}

/* ── CONFIRM MODAL ──────────────────────────────────────────────── */
.confirm-modal-icon {
  width: 52px; height: 52px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto var(--sp-4);
}
.confirm-modal { width: min(420px, 100%); }
.confirm-modal-body {
  text-align: center;
  padding-top: var(--sp-8);
}
.confirm-modal-title {
  font-size: 17px;
  font-weight: var(--fw-semi);
  margin-bottom: var(--sp-2);
}
.confirm-modal-desc {
  color: var(--c-text-2);
  font-size: 13.5px;
  margin: 0 auto;
  max-width: 280px;
}
.confirm-modal-footer {
  justify-content: center;
  gap: var(--sp-3);
  padding-bottom: var(--sp-8);
}
.confirm-modal-button { min-width: 100px; }
.confirm-modal-icon.danger { background: var(--c-danger-s); color: var(--c-danger); }
.confirm-modal-icon.warning { background: var(--c-warning-s); color: var(--c-warning); }

/* ── DIVIDER ────────────────────────────────────────────────────── */
.divider {
  height: 1px;
  background: var(--c-border);
  margin: var(--sp-4) 0;
}
.divider-label {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  color: var(--c-text-3);
  font-size: 12px;
  font-weight: var(--fw-medium);
}
.divider-label::before, .divider-label::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--c-border);
}

/* ── BREADCRUMB ─────────────────────────────────────────────────── */
.breadcrumb {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: 13px;
  color: var(--c-text-2);
  margin-bottom: var(--sp-4);
  flex-wrap: wrap;
}
.breadcrumb a { color: var(--c-text-2); transition: color var(--dur-fast); }
.breadcrumb a:hover { color: var(--c-primary); }
.breadcrumb .sep { color: var(--c-border-2); }
.breadcrumb .current { color: var(--c-text); font-weight: var(--fw-medium); }

/* ── BACK BUTTON ────────────────────────────────────────────────── */
.back-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: 13.5px;
  font-weight: var(--fw-medium);
  color: var(--c-text-2);
  cursor: pointer;
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-control);
  transition: background var(--dur-fast), color var(--dur-fast);
  margin-bottom: var(--sp-4);
  text-decoration: none;
}
.back-btn:hover { background: var(--c-surface-2); color: var(--c-text); }

/* ── CODE BLOCK ─────────────────────────────────────────────────── */
.code-block {
  background: #0f172a;
  color: #e2e8f0;
  border-radius: var(--r-card);
  padding: var(--sp-4);
  font-family: 'JetBrains Mono', 'Fira Code', ui-monospace, monospace;
  font-size: 12.5px;
  line-height: 1.7;
  overflow-x: auto;
}

/* ── SCORE RING ─────────────────────────────────────────────────── */
.score-ring {
  position: relative;
  width: 64px; height: 64px;
  flex-shrink: 0;
}
.score-ring svg { transform: rotate(-90deg); }
.score-ring .score-val {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px;
  font-weight: var(--fw-bold);
  color: var(--c-text);
}

/* ── LOAD MORE ──────────────────────────────────────────────────── */
.load-more-wrap {
  text-align: center;
  padding: var(--sp-6) 0;
}

/* ── SPINNER ────────────────────────────────────────────────────── */
.spinner {
  width: 20px; height: 20px;
  border: 2px solid var(--c-border);
  border-top-color: var(--c-primary);
  border-radius: 50%;
  animation: spin .7s linear infinite;
  flex-shrink: 0;
}
.spinner-sm { width: 14px; height: 14px; border-width: 1.5px; }
.spinner-lg { width: 32px; height: 32px; border-width: 3px; }

.ptr-refresh-indicator {
  display: none;
  justify-content: center;
  padding: var(--sp-4);
}
.ptr-refresh-indicator.show { display: flex; }
.ptr-label {
  font-size: 13px;
  margin-left: 8px;
}


/* ── DARK MODE COMPONENT OVERRIDES ─────────────────────────────── */
[data-theme="dark"] .btn-primary-soft:hover:not(:disabled) { background: rgba(59,130,246,.28); }
[data-theme="dark"] .btn-danger-soft:hover:not(:disabled)  { background: rgba(246,70,93,.28); }
[data-theme="dark"] .btn-warning-soft:hover:not(:disabled) { background: rgba(240,185,11,.28); }
[data-theme="dark"] select.input {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23848e9c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
}
[data-theme="dark"] .tab-item.active { color: #60a5fa; border-bottom-color: #3b82f6; }
[data-theme="dark"] .tab-item.active .tab-count { background:rgba(59,130,246,.15); border-color:rgba(59,130,246,.3); color:#93c5fd; }
[data-theme="dark"] .modal-backdrop { background: rgba(0,0,0,.72); }
[data-theme="dark"] .bottom-sheet { background: var(--c-surface); }
[data-theme="dark"] .bottom-sheet-backdrop { background: rgba(0,0,0,.6); }


/* ════════════════════════════════════════════════════════════════
   V8.4 D1.2 — COMPONENT MỚI (copy từ docs/design/v8_4/00-design-system.html)
   ════════════════════════════════════════════════════════════════ */

/* ── TIER BADGE A/B/C ───────────────────────────────────────────── */
.tier-badge{display:inline-flex;align-items:center;gap:6px;border-radius:var(--r-pill);padding:3px 10px;font-size:12px;font-weight:var(--fw-bold);background:var(--c-surface-2);border:1px solid var(--c-border-2)}
.tier-badge::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--c-tier-c)}
.tier-badge.tier-a{color:var(--c-tier-a)} .tier-badge.tier-a::before{background:var(--c-tier-a)}
.tier-badge.tier-b{color:var(--c-tier-b)} .tier-badge.tier-b::before{background:var(--c-tier-b)}
.tier-badge.tier-c{color:var(--c-tier-c)} .tier-badge.tier-c::before{background:var(--c-tier-c)}

/* ── CHIP (filter, active = viền gradient) ──────────────────────── */
.chip{display:inline-flex;align-items:center;gap:6px;border-radius:var(--r-pill);padding:6px 14px;font-size:13px;font-weight:var(--fw-semi);color:var(--c-text-2);background:var(--c-surface-2);border:1px solid var(--c-border-2);cursor:pointer}
.chip:hover{color:var(--c-text)}
.chip.active{color:var(--c-text);background:linear-gradient(var(--c-surface-2),var(--c-surface-2)) padding-box,var(--grad-primary) border-box;border:1px solid transparent}

/* ── DROPDOWN MENU (.dd-menu) ───────────────────────────────────── */
.dd{position:relative;display:inline-block}
.dd-menu{position:absolute;top:calc(100% + 6px);left:0;min-width:180px;background:var(--c-surface-2);border:1px solid var(--c-border-2);border-radius:var(--r-md,12px);box-shadow:var(--sh-card);padding:var(--sp-2);display:none;z-index:60}
.dd.open .dd-menu{display:block}
.dd-item{display:flex;align-items:center;gap:var(--sp-2);width:100%;padding:8px 10px;border:0;border-radius:var(--r-sm);background:transparent;color:var(--c-text);font:inherit;font-size:13px;text-align:left;cursor:pointer}
.dd-item:hover{background:var(--c-surface-2);filter:brightness(1.2)}
.dd-item.selected{color:var(--c-primary);font-weight:var(--fw-semi)}

/* ── VIDEO CARD ─────────────────────────────────────────────────── */
.video-card{background:var(--c-surface);border:1px solid var(--c-border);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--sh-card)}
.video-card .vc-media{position:relative}
.video-card .vc-tier{position:absolute;top:8px;left:8px}
.video-card .vc-cost{position:absolute;top:8px;right:8px;color:var(--c-money);font-weight:var(--fw-bold);font-size:13px;background:rgba(0,0,0,.55);border-radius:var(--r-pill);padding:2px 8px}
.video-card .vc-dur{position:absolute;bottom:8px;right:8px;font-size:11px;background:rgba(0,0,0,.55);border-radius:var(--r-pill);padding:2px 6px;color:var(--c-text-2)}
.video-card .vc-body{padding:var(--sp-3);display:flex;flex-direction:column;gap:6px}
.video-card .vc-name{font-size:13px;font-weight:var(--fw-semi);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ── STAGE TIMELINE 8 BƯỚC ──────────────────────────────────────── */
.stage-timeline{display:flex;align-items:flex-start;overflow-x:auto;padding:var(--sp-2) 0}
.stage-timeline .stage{display:flex;flex-direction:column;align-items:center;gap:6px;min-width:84px;position:relative;font-size:11px;color:var(--c-text-3)}
.stage-timeline .stage:last-child{padding-right:8px}
.stage-timeline .stage::before{content:"";position:absolute;top:11px;left:-50%;width:100%;height:2px;background:var(--c-border-2);z-index:0}
.stage-timeline .stage:first-child::before{display:none}
.stage-timeline .stage .dot{width:22px;height:22px;border-radius:50%;background:var(--c-surface-2);border:2px solid var(--c-border-2);z-index:1;display:flex;align-items:center;justify-content:center}
.stage-timeline .stage.done .dot{background:var(--grad-primary);border-color:transparent}
.stage-timeline .stage.done::before{background:var(--c-primary)}
.stage-timeline .stage.active .dot{border-color:var(--c-primary);animation:stage-pulse 1.2s ease-in-out infinite}
.stage-timeline .stage.active{color:var(--c-text)}
.stage-timeline .stage.done{color:var(--c-text-2)}
@keyframes stage-pulse{0%,100%{box-shadow:0 0 0 0 rgba(109,93,246,.5)}50%{box-shadow:0 0 0 7px rgba(109,93,246,0)}}
@media (prefers-reduced-motion:reduce){.stage-timeline .stage.active .dot{animation:none}}

/* ── BOTTOM SHEET (mobile action) ───────────────────────────────── */
.sheet{position:fixed;left:0;right:0;bottom:0;background:var(--c-surface);border-radius:var(--r-lg) var(--r-lg) 0 0;border-top:1px solid var(--c-border-2);transform:translateY(100%);transition:transform var(--dur-base) var(--ease-out);z-index:101;padding-bottom:env(safe-area-inset-bottom)}
.sheet.open{transform:translateY(0)}
.sheet .sheet-grip{width:44px;height:4px;border-radius:var(--r-pill);background:var(--c-border-2);margin:10px auto 0}
.sheet:not(.open){pointer-events:none}

/* ── DRAWER (chi tiết, trượt phải) ──────────────────────────────── */
.drawer{position:fixed;top:0;right:0;bottom:0;width:min(480px,100vw);background:var(--c-surface);border-left:1px solid var(--c-border-2);transform:translateX(100%);transition:transform var(--dur-base) var(--ease-out);z-index:101;display:flex;flex-direction:column}
.drawer.open{transform:translateX(0)}
.drawer:not(.open){pointer-events:none}
.drawer-head{display:flex;align-items:center;justify-content:space-between;padding:var(--sp-4) var(--sp-5);border-bottom:1px solid var(--c-border)}
.drawer-body{flex:1;overflow:auto;padding:var(--sp-5)}
@media (prefers-reduced-motion:reduce){.sheet,.drawer{transition:none}}

/* ── MEDIA PLACEHOLDER + RATIO ──────────────────────────────────── */
.media-ph{display:flex;align-items:center;justify-content:center;background:var(--c-surface-2);border:1px solid var(--c-border);color:var(--c-text-3);border-radius:var(--r-md,12px);overflow:hidden}
.media-ph .lucide{width:28px;height:28px}
.media-ph.media-error{color:var(--c-danger);border-color:var(--c-danger-s)}
.ratio-9x16{aspect-ratio:9/16} .ratio-3x4{aspect-ratio:3/4} .ratio-1x1{aspect-ratio:1/1} .ratio-16x9{aspect-ratio:16/9}


/* ── V8.4 D1.6: badge chờ duyệt + bottom-nav center (Tạo video) ─── */
.nav-pending-badge{margin-left:auto;min-width:18px;height:18px;padding:0 5px;border-radius:var(--r-pill);background:var(--c-danger);color:#fff;font-size:11px;font-weight:var(--fw-bold);display:inline-flex;align-items:center;justify-content:center;line-height:1}
.bnav-item{position:relative}
.bnav-pending-badge{position:absolute;top:6px;right:calc(50% - 18px);min-width:16px;height:16px;padding:0 4px;border-radius:var(--r-pill);background:var(--c-danger);color:#fff;font-size:10px;font-weight:var(--fw-bold);display:inline-flex;align-items:center;justify-content:center;line-height:1}
.bnav-center .bnav-icon{width:48px;height:48px;margin-top:-20px;border-radius:50%;background:var(--grad-primary);box-shadow:var(--sh-glow);display:flex;align-items:center;justify-content:center;color:#fff}
.bnav-center .bnav-icon .lucide,.bnav-center .bnav-icon svg{width:22px;height:22px}
#realtime-lost-badge{align-self:center;cursor:default}