@charset "UTF-8";
:root[data-theme=dark], :root {
  --bg-main: #0a0a0c;
  --bg-surface: #121316;
  --bg-card: #18191e;
  --bg-card-hover: #202228;
  --bg-glass: rgba(18, 19, 22, 0.85);
  --border-subtle: rgba(255, 255, 255, 0.08);
  --border-medium: rgba(255, 255, 255, 0.16);
  --border-strong: rgba(255, 255, 255, 0.35);
  --text-primary: #ffffff;
  --text-secondary: #a1a1aa;
  --text-muted: #71717a;
  --text-inverse: #0a0a0c;
  --badge-get: #ffffff;
  --badge-get-bg: rgba(255, 255, 255, 0.1);
  --badge-post: #ffffff;
  --badge-post-bg: rgba(255, 255, 255, 0.2);
  --badge-put: #d4d4d8;
  --badge-put-bg: rgba(212, 212, 216, 0.12);
  --badge-delete: #a1a1aa;
  --badge-delete-bg: rgba(161, 161, 170, 0.12);
  --code-bg: #0d0e11;
  --code-border: #22252c;
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.7);
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 20px;
  --sidebar-width: 320px;
  --header-height: 64px;
  --bg: var(--bg-main);
  --surface: var(--bg-card);
  --surface2: var(--bg-card-hover);
  --surface3: #22252c;
  --border: var(--border-medium);
  --border2: var(--border-strong);
  --border-hover: rgba(255, 255, 255, 0.45);
  --text: var(--text-primary);
  --muted: var(--text-secondary);
  --muted2: var(--text-muted);
  --input-bg: var(--bg-card);
  --sidebar-w: 260px;
  --radius: var(--radius-md);
  --shadow: var(--shadow-md);
  --accent: var(--text-primary);
  --accent-hover: #e4e4e7;
  --accent-glow: rgba(255, 255, 255, 0.12);
  --danger: #ef4444;
  --danger-hover: #dc2626;
  --success: #22c55e;
  --success-hover: #16a34a;
  --warning: #f59e0b;
  --warning-hover: #d97706;
  --info: #3b82f6;
  --select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23a1a1aa' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
}

[data-theme=light] {
  --bg-main: #f8f9fa;
  --bg-surface: #ffffff;
  --bg-card: #ffffff;
  --bg-card-hover: #f3f4f6;
  --bg-glass: rgba(255, 255, 255, 0.9);
  --border-subtle: rgba(0, 0, 0, 0.08);
  --border-medium: rgba(0, 0, 0, 0.16);
  --border-strong: rgba(0, 0, 0, 0.35);
  --text-primary: #0a0a0c;
  --text-secondary: #4b5563;
  --text-muted: #9ca3af;
  --text-inverse: #ffffff;
  --badge-get: #000000;
  --badge-get-bg: rgba(0, 0, 0, 0.08);
  --badge-post: #000000;
  --badge-post-bg: rgba(0, 0, 0, 0.15);
  --badge-put: #374151;
  --badge-put-bg: rgba(0, 0, 0, 0.08);
  --badge-delete: #4b5563;
  --badge-delete-bg: rgba(0, 0, 0, 0.08);
  --code-bg: #111317;
  --code-border: #e5e7eb;
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.12);
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 20px;
  --sidebar-width: 320px;
  --header-height: 64px;
  --bg: var(--bg-main);
  --surface: var(--bg-surface);
  --surface2: var(--bg-card);
  --surface3: var(--bg-card-hover);
  --border: var(--border-subtle);
  --border2: var(--border-medium);
  --border-hover: var(--border-strong);
  --text: var(--text-primary);
  --muted: var(--text-secondary);
  --muted2: var(--text-muted);
  --input-bg: var(--bg-card);
  --sidebar-w: 260px;
  --radius: var(--radius-md);
  --shadow: var(--shadow-md);
  --accent: var(--text-primary);
  --accent-hover: #18191e;
  --accent-glow: rgba(0, 0, 0, 0.12);
  --danger: #ef4444;
  --danger-hover: #dc2626;
  --success: #22c55e;
  --success-hover: #16a34a;
  --warning: #f59e0b;
  --warning-hover: #d97706;
  --info: #3b82f6;
  --select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%234b5563' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

[v-cloak] {
  display: none !important;
}

body {
  font-family: "IBM Plex Sans Arabic", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  overflow-x: hidden;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

a {
  color: inherit;
  text-decoration: none;
}

::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: var(--surface2);
  border-radius: 6px;
}

::-webkit-scrollbar-thumb {
  background: var(--accent);
  border-radius: 6px;
  opacity: 0.8;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--accent-hover);
}

* {
  scrollbar-width: thin;
  scrollbar-color: var(--accent) var(--surface2);
}

.d-flex {
  display: flex !important;
}

.d-inline-flex {
  display: inline-flex !important;
}

.d-block {
  display: block !important;
}

.d-none {
  display: none !important;
}

.flex-column {
  flex-direction: column !important;
}

.flex-row {
  flex-direction: row !important;
}

.flex-wrap {
  flex-wrap: wrap !important;
}

.flex-nowrap {
  flex-wrap: nowrap !important;
}

.align-items-center {
  align-items: center !important;
}

.align-items-start {
  align-items: flex-start !important;
}

.align-items-end {
  align-items: flex-end !important;
}

.justify-content-start {
  justify-content: flex-start !important;
}

.justify-content-center {
  justify-content: center !important;
}

.justify-content-end {
  justify-content: flex-end !important;
}

.justify-content-between {
  justify-content: space-between !important;
}

.flex-between {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
}

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

.gap-1 {
  gap: 4px !important;
}

.gap-2 {
  gap: 8px !important;
}

.gap-3 {
  gap: 16px !important;
}

.gap-4 {
  gap: 24px !important;
}

.mb-1 {
  margin-bottom: 4px !important;
}

.mb-2 {
  margin-bottom: 8px !important;
}

.mb-3 {
  margin-bottom: 16px !important;
}

.mb-4 {
  margin-bottom: 24px !important;
}

.mb-5 {
  margin-bottom: 32px !important;
}

.mt-1 {
  margin-top: 4px !important;
}

.mt-2 {
  margin-top: 8px !important;
}

.mt-3 {
  margin-top: 16px !important;
}

.mt-4 {
  margin-top: 24px !important;
}

.me-1 {
  margin-inline-end: 4px !important;
}

.me-2 {
  margin-inline-end: 8px !important;
}

.me-3 {
  margin-inline-end: 16px !important;
}

.ms-1 {
  margin-inline-start: 4px !important;
}

.ms-2 {
  margin-inline-start: 8px !important;
}

.ms-3 {
  margin-inline-start: 16px !important;
}

.text-accent {
  color: var(--text-primary) !important;
}

.text-muted {
  color: var(--text-secondary) !important;
}

.text-secondary {
  color: var(--text-muted) !important;
}

.text-success {
  color: var(--success) !important;
}

.text-warning {
  color: var(--warning) !important;
}

.text-danger {
  color: var(--danger) !important;
}

.text-info {
  color: var(--info) !important;
}

.fw-normal {
  font-weight: 400 !important;
}

.fw-medium {
  font-weight: 500 !important;
}

.fw-semibold {
  font-weight: 600 !important;
}

.fw-bold {
  font-weight: 700 !important;
}

.fw-bolder {
  font-weight: 800 !important;
}

.fs-xs {
  font-size: 0.72rem !important;
}

.fs-sm {
  font-size: 0.8rem !important;
}

.fs-base {
  font-size: 0.875rem !important;
}

.fs-md {
  font-size: 1.15rem !important;
}

.fs-lg {
  font-size: 1.35rem !important;
}

.fs-xl {
  font-size: 1.6rem !important;
}

.bg-success-light {
  background: rgba(34, 197, 94, 0.12) !important;
  color: #22c55e !important;
}

.bg-info-light {
  background: rgba(59, 130, 246, 0.12) !important;
  color: #3b82f6 !important;
}

.bg-warning-light {
  background: rgba(245, 158, 11, 0.12) !important;
  color: #f59e0b !important;
}

.bg-danger-light {
  background: rgba(239, 68, 68, 0.12) !important;
  color: #ef4444 !important;
}

.bg-accent-light {
  background: rgba(255, 255, 255, 0.08) !important;
  color: var(--text-primary) !important;
}

.bg-surface2 {
  background: var(--bg-surface) !important;
}

.bg-info {
  background: #3b82f6 !important;
}

.bg-success {
  background: #22c55e !important;
}

.bg-warning {
  background: #f59e0b !important;
}

.store-logo {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-sm);
  object-fit: cover;
  border: 1px solid var(--border-subtle);
  background: var(--bg-card);
  flex-shrink: 0;
}

.page-title {
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
  line-height: 1.3;
  display: flex;
  align-items: center;
  gap: 8px;
}

.alert {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-radius: var(--radius-sm);
  font-size: 0.85rem;
  font-weight: 500;
  line-height: 1.4;
}
.alert svg, .alert i {
  width: 18px;
  height: 18px;
  stroke-width: 2;
  flex-shrink: 0;
}
.alert.alert-danger {
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.25);
  color: #ef4444;
}
.alert.alert-warning {
  background: rgba(245, 158, 11, 0.1);
  border: 1px solid rgba(245, 158, 11, 0.25);
  color: #f59e0b;
}
.alert.alert-info {
  background: rgba(59, 130, 246, 0.1);
  border: 1px solid rgba(59, 130, 246, 0.25);
  color: #3b82f6;
}
.alert.alert-success {
  background: rgba(34, 197, 94, 0.1);
  border: 1px solid rgba(34, 197, 94, 0.25);
  color: #22c55e;
}

.app-layout {
  display: flex;
  height: 100vh;
  overflow: hidden;
  background: var(--bg);
}

.main-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--bg);
  min-width: 0;
}
.main-content > [id$=-Vue],
.main-content > div:not(.sidebar-backdrop):not(#blazor-error-ui) {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.content-scroll {
  flex: 1;
  overflow-y: auto;
  padding: 24px;
  width: 100%;
  min-height: 0;
}

.sidebar {
  width: var(--sidebar-w);
  background: var(--surface);
  border-inline-end: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  height: 100vh;
  z-index: 1050;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.sidebar-brand {
  padding: 18px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--border);
}

.sidebar-brand-title {
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--accent);
  display: flex;
  align-items: center;
  gap: 8px;
}

.sidebar-close-btn {
  display: none;
  background: transparent;
  border: none;
  color: var(--muted);
  cursor: pointer;
  padding: 4px;
}

.store-switcher-wrap {
  position: relative;
  margin: 12px 14px 6px 14px;
}

.store-switcher-trigger {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 9px 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  user-select: none;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.store-switcher-trigger:hover,
.store-switcher-wrap.open .store-switcher-trigger {
  background: var(--surface3);
  border-color: var(--accent);
  box-shadow: 0 4px 16px var(--accent-glow);
}

.store-switcher-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: var(--accent-glow);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.store-switcher-details {
  flex: 1;
  min-width: 0;
}

.store-switcher-name {
  font-size: 0.86rem;
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.store-switcher-slug {
  font-size: 0.72rem;
  color: var(--muted);
  font-family: monospace;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.store-switcher-chevron {
  color: var(--muted);
  transition: transform 0.2s ease;
  flex-shrink: 0;
}

.store-switcher-wrap.open .store-switcher-chevron {
  transform: rotate(180deg);
  color: var(--accent);
}

.store-dropdown-panel {
  position: absolute;
  top: calc(100% + 6px);
  inset-inline-start: 0;
  inset-inline-end: 0;
  background: var(--surface);
  border: 1px solid var(--border2);
  border-radius: 14px;
  box-shadow: var(--shadow);
  z-index: 1100;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
  backdrop-filter: blur(16px);
}

.store-switcher-wrap.open .store-dropdown-panel {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.store-dropdown-head {
  padding: 10px 14px;
  background: var(--surface2);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.store-dropdown-title {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--muted);
}

.store-dropdown-count {
  background: var(--accent-glow);
  color: var(--accent);
  font-size: 0.72rem;
  font-weight: 800;
  padding: 2px 7px;
  border-radius: 10px;
}

.store-dropdown-list {
  max-height: 220px;
  overflow-y: auto;
  padding: 6px;
}

.store-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.15s ease;
  border: 1px solid transparent;
}

.store-item:hover {
  background: var(--surface2);
}

.store-item.active {
  background: var(--accent-glow);
  border-color: rgba(108, 99, 255, 0.3);
}

.store-item-avatar {
  width: 28px;
  height: 28px;
  border-radius: 7px;
  background: var(--surface3);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  color: var(--accent);
  flex-shrink: 0;
}

.store-item.active .store-item-avatar {
  background: var(--accent);
  color: #fff;
}

.store-item-info {
  flex: 1;
  min-width: 0;
}

.store-item-name {
  font-size: 0.84rem;
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.store-item-slug {
  font-size: 0.7rem;
  color: var(--muted);
  font-family: monospace;
}

.store-dropdown-actions {
  padding: 8px;
  background: var(--surface2);
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.store-action-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 8px;
  font-size: 0.8rem;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.15s ease;
}

.store-add-btn {
  color: var(--accent);
  background: transparent;
}

.store-add-btn:hover {
  background: var(--accent-glow);
}

.store-visit-btn {
  color: var(--text);
  opacity: 0.85;
}

.store-visit-btn:hover {
  opacity: 1;
  background: var(--surface3);
}

.sidebar-menu {
  flex: 1;
  overflow-y: auto;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.menu-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  font-size: 0.88rem;
  font-weight: 500;
  border: 1px solid transparent;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  cursor: pointer;
  text-decoration: none;
  position: relative;
}
.menu-item svg, .menu-item i, .menu-item [data-lucide] {
  width: 18px;
  height: 18px;
  color: var(--text-muted);
  transition: color 0.2s ease, transform 0.2s ease;
  flex-shrink: 0;
}
.menu-item .nav-label {
  transition: color 0.2s ease;
}
.menu-item:hover {
  background: var(--bg-card-hover);
  color: var(--text-primary);
  border-color: var(--border-subtle);
}
.menu-item:hover svg, .menu-item:hover i, .menu-item:hover [data-lucide] {
  color: var(--text-primary);
  transform: scale(1.05);
}
.menu-item.active {
  background: var(--bg-card);
  color: var(--text-primary) !important;
  font-weight: 600;
  border-color: var(--border-medium);
  box-shadow: var(--shadow-sm);
}
.menu-item.active svg, .menu-item.active i, .menu-item.active [data-lucide] {
  color: var(--text-primary) !important;
}
.menu-item.active .nav-label {
  color: var(--text-primary) !important;
}
.menu-item.active::before {
  content: "";
  position: absolute;
  inset-inline-start: -1px;
  top: 7px;
  bottom: 7px;
  width: 3px;
  background: var(--text-primary);
  border-radius: 4px;
}

.sidebar-footer {
  padding: 14px 16px;
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 8px;
}

.top-nav, .header {
  height: 66px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
  flex-shrink: 0;
  position: sticky;
  top: 0;
  z-index: 100;
}

.brand {
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--accent);
  display: flex;
  align-items: center;
  gap: 8px;
}

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

.mobile-topbar {
  display: none;
  height: 56px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  position: sticky;
  top: 0;
  z-index: 1000;
}

.mobile-topbar-left {
  display: flex;
  align-items: center;
  gap: 10px;
}

.mobile-topbar-brand {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--accent);
}

.mobile-brand-icon {
  width: 22px;
  height: 22px;
  color: var(--accent);
}

.mobile-store-title {
  max-width: 170px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mobile-menu-btn {
  background: var(--surface2);
  border: 1px solid var(--border);
  color: var(--text);
  width: 38px;
  height: 38px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.mobile-bottom-nav {
  display: none;
  position: fixed;
  bottom: 0;
  inset-inline-start: 0;
  inset-inline-end: 0;
  height: 60px;
  background: var(--surface);
  border-top: 1px solid var(--border);
  z-index: 1000;
  align-items: center;
  justify-content: space-around;
}

.bottom-nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 600;
  background: transparent;
  border: none;
  cursor: pointer;
  text-decoration: none;
}

.bottom-nav-item.active,
.bottom-nav-item:hover {
  color: var(--accent);
}

.sidebar-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(4px);
  z-index: 1040;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.sidebar-backdrop.active {
  opacity: 1;
  pointer-events: auto;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 18px;
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-size: 0.86rem;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid transparent;
  text-decoration: none;
  transition: all 0.15s cubic-bezier(0.16, 1, 0.3, 1);
  user-select: none;
  line-height: 1.4;
}
.btn svg, .btn i, .btn [data-lucide] {
  width: 15px;
  height: 15px;
  stroke-width: 2;
  flex-shrink: 0;
}

.btn-primary {
  background: #ffffff;
  color: #0a0a0c !important;
  border: 1px solid rgba(255, 255, 255, 0.9);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}
.btn-primary svg, .btn-primary i, .btn-primary [data-lucide] {
  color: #0a0a0c !important;
}
.btn-primary:hover {
  background: #f4f4f5;
  color: #0a0a0c !important;
  border-color: #ffffff;
  box-shadow: 0 4px 12px rgba(255, 255, 255, 0.15);
  transform: translateY(-1px);
}
.btn-primary:active {
  transform: translateY(0);
  background: #e4e4e7;
}

.btn-secondary {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  color: var(--text-primary);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}
.btn-secondary svg, .btn-secondary i, .btn-secondary [data-lucide] {
  color: var(--text-secondary);
  transition: color 0.15s ease;
}
.btn-secondary:hover {
  background: var(--bg-card-hover);
  border-color: var(--border-medium);
  color: var(--text-primary);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}
.btn-secondary:hover svg, .btn-secondary:hover i, .btn-secondary:hover [data-lucide] {
  color: var(--text-primary);
}
.btn-secondary:active {
  background: var(--bg-surface);
}

.btn-danger {
  background: var(--danger);
  color: #fff;
}

.btn-danger:hover {
  background: var(--danger-hover);
}

.btn-success {
  background: var(--success);
  color: #fff;
}

.btn-success:hover {
  background: var(--success-hover);
}

.btn-warning {
  background: var(--warning);
  color: #fff;
}

.btn-warning:hover {
  background: var(--warning-hover);
}

.btn-outline {
  background: transparent;
  border-color: var(--accent);
  color: var(--accent);
}

.btn-outline:hover {
  background: var(--accent-glow);
}

.btn-sm {
  padding: 6px 13px;
  font-size: 0.8rem;
  gap: 6px;
  border-radius: var(--radius-sm);
}
.btn-sm svg, .btn-sm i, .btn-sm [data-lucide] {
  width: 13px;
  height: 13px;
  stroke-width: 2;
  flex-shrink: 0;
}

.btn-lg {
  padding: 12px 24px;
  font-size: 0.95rem;
}
.btn-lg svg, .btn-lg i {
  width: 18px;
  height: 18px;
  stroke-width: 2;
  flex-shrink: 0;
}

.btn:disabled, .btn[disabled] {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none !important;
  box-shadow: none !important;
}

.icon-btn, .ctrl-btn {
  background: var(--surface2);
  border: 1px solid var(--border);
  color: var(--text);
  width: 38px;
  height: 38px;
  border-radius: var(--radius-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s;
}
.icon-btn svg, .icon-btn i, .ctrl-btn svg, .ctrl-btn i {
  width: 16px;
  height: 16px;
  stroke-width: 2;
  flex-shrink: 0;
}

.ctrl-btn {
  border-radius: 50%;
  border-color: var(--border2);
  font-weight: 800;
  font-size: 0.82rem;
}

.icon-btn:hover, .ctrl-btn:hover {
  background: var(--surface3);
  border-color: var(--accent);
  color: var(--accent);
}

.form-group {
  margin-bottom: 20px;
}

.form-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.88rem;
  font-weight: 700;
  margin-bottom: 8px;
  color: var(--text);
}

.req {
  color: var(--danger);
}

.form-control, .form-select {
  width: 100%;
  padding: 10px 14px;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font-family: inherit;
  font-size: 0.88rem;
  outline: none;
  transition: all 0.15s cubic-bezier(0.16, 1, 0.3, 1);
}

.form-control:focus, .form-select:focus {
  border-color: var(--border-strong);
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.08);
  background: var(--bg-surface);
}

.form-control::placeholder {
  color: var(--text-muted);
  opacity: 0.85;
}

textarea.form-control {
  resize: vertical;
  min-height: 90px;
}

.filter-sel,
.filter-select,
.page-size-sel,
select.form-control,
select.form-select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  height: 40px;
  padding: 8px 36px 8px 14px;
  background-color: var(--bg-card);
  background-image: var(--select-arrow);
  background-repeat: no-repeat;
  background-position: calc(100% - 12px) center;
  background-size: 14px 14px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font-family: inherit;
  font-size: 0.86rem;
  font-weight: 500;
  cursor: pointer;
  outline: none;
  transition: all 0.15s cubic-bezier(0.16, 1, 0.3, 1);
  white-space: nowrap;
}
.filter-sel:hover,
.filter-select:hover,
.page-size-sel:hover,
select.form-control:hover,
select.form-select:hover {
  border-color: var(--border-medium);
  background-color: var(--bg-card-hover);
}
.filter-sel:focus,
.filter-select:focus,
.page-size-sel:focus,
select.form-control:focus,
select.form-select:focus {
  border-color: var(--border-strong);
  background-color: var(--bg-surface);
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.08);
}
.filter-sel option,
.filter-select option,
.page-size-sel option,
select.form-control option,
select.form-select option {
  background-color: #18191e;
  color: #ffffff;
  padding: 10px;
  font-weight: 500;
}

[dir=rtl] .filter-sel,
[dir=rtl] .filter-select,
[dir=rtl] .page-size-sel,
[dir=rtl] select.form-control,
[dir=rtl] select.form-select,
html[dir=rtl] .filter-sel,
html[dir=rtl] .filter-select {
  padding: 8px 14px 8px 36px;
  background-position: 12px center;
}

.page-size-sel {
  min-width: 80px;
  height: 38px;
  padding: 6px 28px 6px 10px;
  font-size: 0.82rem;
}

[dir=rtl] .page-size-sel {
  padding: 6px 10px 6px 28px;
  background-position: 8px center;
}

.date-input {
  height: 40px;
  padding: 8px 14px;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font-family: inherit;
  font-size: 0.86rem;
  font-weight: 500;
  outline: none;
  color-scheme: dark;
  transition: all 0.15s cubic-bezier(0.16, 1, 0.3, 1);
}
.date-input:hover {
  border-color: var(--border-medium);
  background: var(--bg-card-hover);
}
.date-input:focus {
  border-color: var(--border-strong);
  background: var(--bg-surface);
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.08);
}

.search-wrap,
.search-box {
  position: relative;
  display: flex;
  align-items: center;
  flex: 1;
  min-width: 200px;
  max-width: 440px;
}
.search-wrap .search-icon,
.search-wrap > i[data-lucide],
.search-wrap > .lucide,
.search-wrap > svg,
.search-box .search-icon,
.search-box > i[data-lucide],
.search-box > .lucide,
.search-box > svg {
  position: absolute;
  inset-inline-start: 12px;
  width: 16px;
  height: 16px;
  color: var(--text-muted);
  pointer-events: none;
  transition: color 0.15s ease;
  z-index: 2;
}
.search-wrap .search-input,
.search-box .search-input {
  padding-inline-start: 38px;
  padding-inline-end: 32px;
}
.search-wrap .clear-btn,
.search-box .clear-btn {
  position: absolute;
  inset-inline-end: 8px;
  background: transparent;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  transition: color 0.15s;
}
.search-wrap .clear-btn:hover,
.search-box .clear-btn:hover {
  color: var(--text-primary);
}
.search-wrap:focus-within .search-icon, .search-wrap:focus-within > i, .search-wrap:focus-within > svg,
.search-box:focus-within .search-icon,
.search-box:focus-within > i,
.search-box:focus-within > svg {
  color: var(--text-primary);
}

.search-input {
  width: 100%;
  height: 40px;
  padding: 8px 14px;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font-family: inherit;
  font-size: 0.86rem;
  outline: none;
  transition: all 0.15s cubic-bezier(0.16, 1, 0.3, 1);
}
.search-input:hover {
  border-color: var(--border-medium);
  background: var(--bg-card-hover);
}
.search-input:focus {
  border-color: var(--border-strong);
  background: var(--bg-surface);
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.08);
}
.search-input::placeholder {
  color: var(--text-muted);
  opacity: 0.8;
}

.filters-bar,
.controls-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 24px;
}

.filters-right {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-inline-start: auto;
}

.date-range-group {
  display: inline-flex;
  align-items: center;
  height: 40px;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  padding: 0 12px;
  gap: 8px;
}
.date-range-group .range-icon, .date-range-group .date-icon {
  width: 15px;
  height: 15px;
  color: var(--text-muted);
  flex-shrink: 0;
}
.date-range-group .date-field {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.date-range-group .date-field .date-label, .date-range-group .date-field .date-lbl {
  font-size: 0.76rem;
  font-weight: 500;
  color: var(--text-muted);
}
.date-range-group .date-field .date-input {
  background: transparent;
  border: none;
  color: var(--text-primary);
  font-size: 0.82rem;
  outline: none;
  padding: 0;
  height: auto;
  font-family: inherit;
  color-scheme: dark;
}

.slug-wrap {
  display: flex;
  align-items: center;
  background: var(--input-bg);
  border: 1.5px solid var(--border2);
  border-radius: var(--radius-sm);
  overflow: hidden;
  direction: ltr;
  transition: all 0.2s;
}

.slug-wrap:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-glow);
}

.slug-prefix {
  padding: 11px 14px;
  background: var(--surface3);
  color: var(--muted);
  font-size: 0.85rem;
  font-family: monospace;
  border-inline-end: 1px solid var(--border);
  user-select: none;
  white-space: nowrap;
}

.slug-input {
  flex: 1;
  padding: 11px 14px;
  background: transparent;
  border: none;
  color: var(--text);
  font-family: monospace;
  font-size: 0.9rem;
  outline: none;
  min-width: 0;
}

.slug-feedback {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8rem;
  margin-top: 6px;
  font-weight: 600;
}

.slug-feedback.ok {
  color: var(--success);
}

.slug-feedback.err {
  color: var(--danger);
}

.slug-feedback.checking {
  color: var(--accent);
}

.cs-wrapper {
  position: relative;
}

.cs-trigger {
  width: 100%;
  padding: 11px 16px;
  background: var(--input-bg);
  border: 1.5px solid var(--border2);
  border-radius: var(--radius-sm);
  color: var(--text);
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  user-select: none;
  transition: all 0.2s;
}

.cs-trigger:hover, .cs-trigger.open {
  border-color: var(--accent);
}

.cs-trigger.open {
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  box-shadow: 0 0 0 4px var(--accent-glow);
}

.cs-trigger-left {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.cs-trigger-icon {
  width: 26px;
  height: 26px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.cs-arrow {
  transition: transform 0.25s;
  color: var(--muted);
  flex-shrink: 0;
}

.cs-trigger.open .cs-arrow {
  transform: rotate(180deg);
}

.cs-dropdown {
  position: absolute;
  top: calc(100% - 1px);
  inset-inline-start: 0;
  inset-inline-end: 0;
  background: var(--surface);
  border: 1.5px solid var(--accent);
  border-top: none;
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  box-shadow: var(--shadow);
  z-index: 500;
  overflow: hidden;
  max-height: 320px;
  display: flex;
  flex-direction: column;
}

.cs-search-wrap {
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.cs-search {
  width: 100%;
  padding: 8px 12px;
  background: var(--surface2);
  border: 1px solid var(--border2);
  border-radius: 8px;
  color: var(--text);
  font-family: inherit;
  font-size: 0.88rem;
  outline: none;
}

.cs-search:focus {
  border-color: var(--accent);
}

.cs-list {
  overflow-y: auto;
  max-height: 230px;
}

.cs-option {
  padding: 11px 16px;
  cursor: pointer;
  font-size: 0.9rem;
  display: flex;
  align-items: center;
  gap: 10px;
  transition: background 0.15s;
}

.cs-option:hover {
  background: var(--surface2);
}

.cs-option.selected {
  background: rgba(108, 99, 255, 0.12);
  color: var(--accent);
  font-weight: 700;
}

.cs-option-icon {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.cs-option-text {
  flex: 1;
}

.cs-option-sub {
  font-size: 0.76rem;
  color: var(--muted);
}

.switch {
  position: relative;
  display: inline-block;
  width: 46px;
  height: 24px;
  flex-shrink: 0;
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.switch-slider {
  position: absolute;
  cursor: pointer;
  inset: 0;
  background-color: var(--surface3);
  border: 1px solid var(--border2);
  transition: 0.3s;
  border-radius: 24px;
}

.switch-slider:before {
  position: absolute;
  content: "";
  height: 18px;
  width: 18px;
  inset-inline-start: 2px;
  bottom: 2px;
  background-color: #fff;
  transition: 0.3s;
  border-radius: 50%;
}

input:checked + .switch-slider {
  background-color: var(--accent);
  border-color: var(--accent);
}

[dir=rtl] input:checked + .switch-slider:before {
  transform: translateX(-22px);
}

[dir=ltr] input:checked + .switch-slider:before {
  transform: translateX(22px);
}

.card {
  background: var(--bg-card);
  border: 1px solid var(--border-medium);
  border-radius: var(--radius-md);
  padding: 22px;
  box-shadow: var(--shadow-sm);
  position: relative;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.card:hover {
  border-color: var(--border-strong);
}

.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border-subtle);
}

.card-title {
  font-size: 0.96rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--text-primary);
  margin: 0;
}
.card-title svg, .card-title i {
  width: 18px;
  height: 18px;
  stroke-width: 2;
  flex-shrink: 0;
}

.stat-card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 20px 22px;
  min-height: 152px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.stat-card:hover {
  border-color: var(--border-medium);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

.stat-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}

.stat-title {
  font-size: 0.84rem;
  font-weight: 500;
  color: var(--text-secondary);
}

.stat-icon {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border-subtle);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.stat-icon svg, .stat-icon i, .stat-icon [data-lucide] {
  width: 16px;
  height: 16px;
  stroke-width: 2;
  color: var(--text-primary);
}

.stat-val {
  font-size: 1.65rem;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.02em;
  line-height: 1.2;
  margin: 4px 0 10px;
}
.stat-val.fs-md {
  font-size: 1.2rem;
  margin-bottom: 8px;
}

.stat-desc {
  font-size: 0.78rem;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 6px;
  padding-top: 10px;
  border-top: 1px solid var(--border-subtle);
  white-space: nowrap;
}
.stat-desc svg, .stat-desc i, .stat-desc [data-lucide] {
  width: 13px;
  height: 13px;
  stroke-width: 2;
  flex-shrink: 0;
}
.stat-desc.trend-up,
.stat-desc .trend-up {
  color: var(--success);
}
.stat-desc.trend-down,
.stat-desc .trend-down {
  color: var(--danger);
}
.stat-desc.trend-neutral,
.stat-desc .trend-neutral {
  color: var(--text-muted);
}

.tier-widget {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 22px;
  min-height: 165px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.tier-widget:hover {
  border-color: var(--border-medium);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

.tier-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 0.74rem;
  font-weight: 600;
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-primary);
  border: 1px solid var(--border-subtle);
}

.step-card {
  background: var(--surface);
  border: 1px solid var(--border2);
  border-radius: var(--radius-lg);
  padding: 32px;
  box-shadow: var(--shadow);
}

.step-head {
  margin-bottom: 28px;
}

.step-head h2 {
  font-size: 1.3rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
}

.step-head p {
  color: var(--muted);
  font-size: 0.88rem;
}

.step-icon-wrap {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: var(--accent-glow);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  margin-bottom: 28px;
}

.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-bottom: 28px;
}

.grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  margin-bottom: 28px;
}

.grid-2-1 {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 24px;
  margin-bottom: 28px;
}

.quick-actions {
  display: flex;
  gap: 12px;
  margin-bottom: 28px;
  flex-wrap: wrap;
}

.table-card,
.history-table-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  margin-bottom: 24px;
  transition: border-color 0.2s ease;
}

.table-wrap,
.table-responsive,
.table-container {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.table-head-bar {
  padding: 16px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--border);
  background: var(--surface2);
}

.table-head-title {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 8px;
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.88rem;
  text-align: start;
}

thead th {
  background: var(--surface2);
  padding: 12px 16px;
  font-weight: 700;
  color: var(--muted);
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}

tbody td {
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
  color: var(--text);
  vertical-align: middle;
}

tbody tr:hover {
  background: var(--surface2);
}

.dropdown-wrapper {
  position: relative;
}

.dropdown-menu {
  position: absolute;
  top: calc(100% + 8px);
  inset-inline-end: 0;
  width: 220px;
  background: var(--surface);
  border: 1px solid var(--border2);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  z-index: 1000;
  padding: 8px;
  backdrop-filter: blur(12px);
}

.dropdown-header {
  padding: 8px 12px;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--muted);
  border-bottom: 1px solid var(--border);
  margin-bottom: 6px;
}

.dropdown-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: var(--radius-sm);
  font-size: 0.85rem;
  color: var(--text);
  cursor: pointer;
  transition: background 0.15s;
}

.dropdown-item:hover {
  background: var(--surface2);
}

.dropdown-divider {
  height: 1px;
  background: var(--border);
  margin: 6px 0;
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: var(--radius-sm);
  font-size: 0.76rem;
  font-weight: 600;
  line-height: 1.2;
}
.badge svg, .badge i {
  width: 13px;
  height: 13px;
  stroke-width: 2;
  flex-shrink: 0;
}
.badge.badge-success {
  background: rgba(34, 197, 94, 0.12);
  color: var(--success);
  border: 1px solid rgba(34, 197, 94, 0.2);
}
.badge.badge-warning {
  background: rgba(245, 158, 11, 0.12);
  color: var(--warning);
  border: 1px solid rgba(245, 158, 11, 0.2);
}
.badge.badge-danger {
  background: rgba(239, 68, 68, 0.12);
  color: var(--danger);
  border: 1px solid rgba(239, 68, 68, 0.2);
}
.badge.badge-info {
  background: rgba(59, 130, 246, 0.12);
  color: var(--info);
  border: 1px solid rgba(59, 130, 246, 0.2);
}
.badge.badge-secondary {
  background: var(--bg-surface);
  color: var(--text-secondary);
  border: 1px solid var(--border-subtle);
}

.bg-success {
  background: rgba(34, 197, 94, 0.12);
  color: var(--success);
}

.bg-warning {
  background: rgba(245, 158, 11, 0.12);
  color: var(--warning);
}

.bg-danger {
  background: rgba(239, 68, 68, 0.12);
  color: var(--danger);
}

.bg-info {
  background: rgba(59, 130, 246, 0.12);
  color: var(--info);
}

.bg-muted {
  background: var(--surface3);
  color: var(--muted);
}

.tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 9px;
  border-radius: var(--radius-sm);
  font-size: 0.75rem;
  font-weight: 700;
}

.tag-info {
  background: var(--bg-card-hover);
  color: var(--text-primary);
}

.tag-warn {
  background: rgba(245, 158, 11, 0.1);
  color: var(--warning);
}

.badge-get {
  color: var(--badge-get);
  background: var(--badge-get-bg);
}

.badge-post {
  color: var(--badge-post);
  background: var(--badge-post-bg);
}

.badge-put {
  color: var(--badge-put);
  background: var(--badge-put-bg);
}

.badge-delete {
  color: var(--badge-delete);
  background: var(--badge-delete-bg);
}

.chips {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin: 10px 0;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  border-radius: 20px;
  background: var(--surface2);
  border: 1px solid var(--border2);
  color: var(--muted);
  font-size: 0.84rem;
  font-weight: 600;
  cursor: pointer;
  user-select: none;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.chip:hover {
  background: var(--surface3);
  color: var(--text);
  border-color: var(--accent);
  transform: translateY(-1px);
}
.chip.active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  box-shadow: 0 4px 12px var(--accent-glow);
}
.chip.active .chip-icon, .chip.active .chip-svg, .chip.active svg, .chip.active i {
  color: #fff;
}
.chip.active .count-badge {
  background: rgba(255, 255, 255, 0.25);
  color: #fff;
}

.count-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 10px;
  background: var(--surface3);
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1;
}

.role-chip,
.perm-chip,
.period-chip,
.alert-chip,
.avail-chip,
.notes-chip,
.plan-hero-chip,
.expires-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 8px;
  font-size: 0.78rem;
  font-weight: 600;
  background: var(--surface2);
  border: 1px solid var(--border);
  color: var(--text);
  transition: all 0.2s ease;
}

.role-chip {
  border-radius: 20px;
  padding: 5px 12px;
  font-weight: 700;
}

.perm-chip {
  font-size: 0.74rem;
  background: var(--surface3);
  border-color: var(--border2);
}

.count-chip {
  background: var(--accent-glow);
  color: var(--accent);
  font-weight: 800;
}

.period-chip {
  background: var(--surface3);
  color: var(--text);
  font-size: 0.8rem;
}

.plan-hero-chip {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.12);
  border-radius: 20px;
  padding: 6px 14px;
  font-size: 0.82rem;
  font-weight: 600;
}

.expires-chip {
  background: var(--surface3);
  border-color: var(--border2);
  border-radius: 20px;
  padding: 6px 14px;
}
.expires-chip.soon {
  background: rgba(239, 68, 68, 0.12);
  border-color: rgba(239, 68, 68, 0.3);
  color: var(--danger);
}

.wallet-balance-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  background: var(--surface2);
  border: 1.5px solid var(--border2);
  border-radius: var(--radius-sm);
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--text);
}
.wallet-balance-chip .wallet-val {
  color: var(--success);
  font-weight: 800;
}

.chip-icon,
.tab-icon,
.btn-icon,
.title-icon,
.card-icon,
.stat-svg,
.empty-svg,
.section-svg,
.dl-icon,
.hint-icon,
.meta-icon,
.alert-icon,
.feat-icon,
.table-icon,
.badge-mini-icon,
.calendar-mini-icon,
.alert-mini-svg,
.confirm-svg,
.spin-svg,
.note-icon,
.page-arrow,
.alert-arrow,
.cat-icon,
.plan-icon,
.badge-icon,
.chip-svg,
.swatch-check,
.ph-icon,
.overlay-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  flex-shrink: 0;
}

.chip-icon, .chip-svg {
  width: 16px;
  height: 16px;
  color: inherit;
}

.tab-icon {
  width: 18px;
  height: 18px;
  color: inherit;
}

.btn-icon {
  width: 16px;
  height: 16px;
  color: inherit;
}

.title-icon {
  width: 20px;
  height: 20px;
  color: var(--accent);
}

.card-icon {
  width: 20px;
  height: 20px;
  color: var(--accent);
}

.stat-svg {
  width: 22px;
  height: 22px;
}

.empty-svg {
  width: 48px;
  height: 48px;
}

.badge-mini-icon {
  width: 14px;
  height: 14px;
}

.hint-icon, .meta-icon, .alert-icon {
  width: 15px;
  height: 15px;
}

.d-flex {
  display: flex !important;
}

.d-inline-flex {
  display: inline-flex !important;
}

.d-grid {
  display: grid !important;
}

.d-block {
  display: block !important;
}

.d-inline-block {
  display: inline-block !important;
}

.d-none {
  display: none !important;
}

.flex-row {
  flex-direction: row !important;
}

.flex-column, .flex-col {
  flex-direction: column !important;
}

.flex-wrap {
  flex-wrap: wrap !important;
}

.flex-nowrap {
  flex-wrap: nowrap !important;
}

.flex-1 {
  flex: 1 !important;
  min-width: 0 !important;
}

.flex-shrink-0 {
  flex-shrink: 0 !important;
}

.flex-grow-1 {
  flex-grow: 1 !important;
}

.align-center, .align-items-center {
  align-items: center !important;
}

.align-start, .align-items-start {
  align-items: flex-start !important;
}

.align-end, .align-items-end {
  align-items: flex-end !important;
}

.align-stretch, .align-items-stretch {
  align-items: stretch !important;
}

.align-baseline, .align-items-baseline {
  align-items: baseline !important;
}

.align-self-center {
  align-self: center !important;
}

.align-self-start {
  align-self: flex-start !important;
}

.align-self-end {
  align-self: flex-end !important;
}

.justify-center, .justify-content-center {
  justify-content: center !important;
}

.justify-between, .justify-content-between {
  justify-content: space-between !important;
}

.justify-start, .justify-content-start {
  justify-content: flex-start !important;
}

.justify-end, .justify-content-end {
  justify-content: flex-end !important;
}

.justify-around, .justify-content-around {
  justify-content: space-around !important;
}

.gap-0 {
  gap: 0px !important;
}

.gap-1 {
  gap: 4px !important;
}

.gap-2 {
  gap: 8px !important;
}

.gap-3 {
  gap: 16px !important;
}

.gap-4 {
  gap: 24px !important;
}

.gap-5 {
  gap: 32px !important;
}

.gap-6 {
  gap: 6px !important;
}

.gap-8 {
  gap: 8px !important;
}

.gap-10 {
  gap: 10px !important;
}

.gap-12 {
  gap: 12px !important;
}

.gap-14 {
  gap: 14px !important;
}

.gap-16 {
  gap: 16px !important;
}

.gap-18 {
  gap: 18px !important;
}

.gap-20 {
  gap: 20px !important;
}

.gap-24 {
  gap: 24px !important;
}

.gap-28 {
  gap: 28px !important;
}

.gap-32 {
  gap: 32px !important;
}

.row-gap-8 {
  row-gap: 8px !important;
}

.row-gap-12 {
  row-gap: 12px !important;
}

.row-gap-16 {
  row-gap: 16px !important;
}

.col-gap-8 {
  column-gap: 8px !important;
}

.col-gap-12 {
  column-gap: 12px !important;
}

.col-gap-16 {
  column-gap: 16px !important;
}

.text-start {
  text-align: start !important;
}

.text-center {
  text-align: center !important;
}

.text-end {
  text-align: end !important;
}

.text-muted {
  color: var(--muted) !important;
}

.text-danger {
  color: var(--danger) !important;
}

.text-success {
  color: var(--success) !important;
}

.text-warning {
  color: var(--warning) !important;
}

.text-accent {
  color: var(--accent) !important;
}

.text-teal {
  color: #0d9488 !important;
}

.fw-400 {
  font-weight: 400 !important;
}

.fw-500 {
  font-weight: 500 !important;
}

.fw-600 {
  font-weight: 600 !important;
}

.fw-700, .fw-bold {
  font-weight: 700 !important;
}

.fw-800 {
  font-weight: 800 !important;
}

.fw-900 {
  font-weight: 900 !important;
}

.fs-xs {
  font-size: 0.72rem !important;
}

.fs-sm {
  font-size: 0.82rem !important;
}

.fs-md {
  font-size: 0.92rem !important;
}

.fs-lg {
  font-size: 1.05rem !important;
}

.fs-xl {
  font-size: 1.25rem !important;
}

.fs-2xl {
  font-size: 1.5rem !important;
}

.whitespace-nowrap, .ws-nowrap {
  white-space: nowrap !important;
}

.lh-1 {
  line-height: 1 !important;
}

.lh-sm {
  line-height: 1.3 !important;
}

.lh-md {
  line-height: 1.5 !important;
}

.lh-lg {
  line-height: 1.7 !important;
}

.mb-0 {
  margin-bottom: 0px !important;
}

.mb-1 {
  margin-bottom: 4px !important;
}

.mb-2 {
  margin-bottom: 8px !important;
}

.mb-3 {
  margin-bottom: 16px !important;
}

.mb-4 {
  margin-bottom: 24px !important;
}

.mb-5 {
  margin-bottom: 32px !important;
}

.mb-6 {
  margin-bottom: 40px !important;
}

.mb-4px {
  margin-bottom: 4px !important;
}

.mb-6px {
  margin-bottom: 6px !important;
}

.mb-8px, .mb-8 {
  margin-bottom: 8px !important;
}

.mb-10px, .mb-10 {
  margin-bottom: 10px !important;
}

.mb-12px, .mb-12 {
  margin-bottom: 12px !important;
}

.mb-16px, .mb-16 {
  margin-bottom: 16px !important;
}

.mb-20px, .mb-20 {
  margin-bottom: 20px !important;
}

.mb-24px, .mb-24 {
  margin-bottom: 24px !important;
}

.mb-28px, .mb-28 {
  margin-bottom: 28px !important;
}

.mb-32px, .mb-32 {
  margin-bottom: 32px !important;
}

.mt-0 {
  margin-top: 0px !important;
}

.mt-1 {
  margin-top: 4px !important;
}

.mt-2 {
  margin-top: 8px !important;
}

.mt-3 {
  margin-top: 16px !important;
}

.mt-4 {
  margin-top: 24px !important;
}

.mt-5 {
  margin-top: 32px !important;
}

.mt-6 {
  margin-top: 40px !important;
}

.mt-4px {
  margin-top: 4px !important;
}

.mt-6px {
  margin-top: 6px !important;
}

.mt-8px, .mt-8 {
  margin-top: 8px !important;
}

.mt-10px, .mt-10 {
  margin-top: 10px !important;
}

.mt-12px, .mt-12 {
  margin-top: 12px !important;
}

.mt-16px, .mt-16 {
  margin-top: 16px !important;
}

.mt-20px, .mt-20 {
  margin-top: 20px !important;
}

.mt-24px, .mt-24 {
  margin-top: 24px !important;
}

.pad-12 {
  padding: 12px !important;
}

.pad-16 {
  padding: 16px !important;
}

.pad-20 {
  padding: 20px !important;
}

.pad-24 {
  padding: 24px !important;
}

.progress-header {
  margin-bottom: 36px;
}

.progress-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
}

.progress-pct {
  font-size: 0.82rem;
  color: var(--muted);
  font-weight: 600;
}

.progress-bar-wrap {
  height: 5px;
  background: var(--surface3);
  border-radius: 3px;
  overflow: hidden;
}

.progress-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--accent), #a78bfa);
  border-radius: 3px;
  transition: width 0.5s ease;
}

.progress-track {
  height: 6px;
  background: var(--surface3);
  border-radius: 3px;
  overflow: hidden;
  margin: 8px 0;
}

.progress-fill {
  height: 100%;
  background: var(--accent);
  border-radius: 3px;
  transition: width 0.4s ease;
}

.stepper {
  display: flex;
  justify-content: space-between;
  position: relative;
  margin-top: 18px;
  padding: 10px;
  border-radius: 7px;
}

.step-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  position: relative;
  z-index: 1;
}

.step-circle {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--surface3);
  border: 2px solid var(--border2);
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s;
}

.step-item.active .step-circle {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  box-shadow: 0 0 0 4px var(--accent-glow);
}

.step-item.done .step-circle {
  background: var(--success);
  border-color: var(--success);
  color: #fff;
}

.step-label {
  font-size: 0.74rem;
  color: var(--muted);
  font-weight: 600;
  white-space: nowrap;
}

.step-item.active .step-label {
  color: var(--text);
  font-weight: 700;
}

.toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(40px);
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px 24px;
  font-size: 0.95rem;
  font-weight: 600;
  z-index: 999999;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
  display: flex;
  align-items: center;
  gap: 10px;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
}

.toast.show {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
}

.toast-success {
  border-color: rgba(34, 197, 94, 0.4);
  color: #22c55e;
  background: var(--surface2);
}

.toast-error {
  border-color: rgba(239, 68, 68, 0.4);
  color: #ef4444;
  background: var(--surface2);
}

.toast-warning {
  border-color: rgba(245, 158, 11, 0.4);
  color: #f59e0b;
  background: var(--surface2);
}

.toast-info {
  border-color: rgba(59, 130, 246, 0.4);
  color: #3b82f6;
  background: var(--surface2);
}

.ob-body {
  display: flex;
  flex: 1;
  min-height: calc(100vh - 66px);
}

.ob-main {
  flex: 1;
  overflow-y: auto;
  padding: 36px 24px;
}

.ob-preview {
  width: 360px;
  flex-shrink: 0;
  background: var(--surface);
  border-inline-start: 1px solid var(--border);
  padding: 28px 22px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  position: sticky;
  top: 66px;
  height: calc(100vh - 66px);
  overflow-y: auto;
}

.ob-inner {
  max-width: 660px;
  margin: 0 auto;
}

.type-grid {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.type-card {
  flex: 1 1 140px;
  border: 2px solid var(--border2);
  border-radius: var(--radius);
  padding: 18px 12px;
  text-align: center;
  cursor: pointer;
  background: var(--surface2);
  transition: all 0.2s;
}

.type-card:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
}

.type-card.selected {
  border-color: var(--accent);
  background: rgba(108, 99, 255, 0.1);
  box-shadow: 0 0 0 4px var(--accent-glow);
}

.type-card .type-ic {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-sm);
  margin: 0 auto 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(108, 99, 255, 0.12);
  color: var(--accent);
}

.type-card.selected .type-ic {
  background: var(--accent);
  color: #fff;
}

.type-title {
  font-weight: 700;
  font-size: 0.9rem;
}

.type-sub {
  font-size: 0.76rem;
  color: var(--muted);
  margin-top: 4px;
}

.color-swatches {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.color-swatch {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  cursor: pointer;
  transition: all 0.2s;
  border: 3px solid transparent;
  position: relative;
}

.color-swatch.selected::after {
  content: "✓";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 800;
  font-size: 0.9rem;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

.color-swatch.selected {
  border-color: var(--text);
  transform: scale(1.15);
}

.color-swatch:hover:not(.selected) {
  transform: scale(1.1);
}

.color-custom-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
}

.color-custom-input {
  padding: 8px 12px;
  background: var(--input-bg);
  border: 1.5px solid var(--border2);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-family: inherit;
  font-size: 0.85rem;
  outline: none;
  width: 130px;
  direction: ltr;
}

.color-custom-input:focus {
  border-color: var(--accent);
}

.color-preview {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  border: 2px solid var(--border2);
  flex-shrink: 0;
}

.upload-grid {
  display: flex;
  gap: 16px;
}

.upload-logo-col {
  width: 140px;
  flex-shrink: 0;
}

.upload-cover-col {
  flex: 1;
  min-width: 0;
}

.upload-box {
  border: 2px dashed var(--border2);
  border-radius: var(--radius);
  padding: 20px 14px;
  text-align: center;
  cursor: pointer;
  background: var(--surface2);
  transition: all 0.2s;
  position: relative;
  overflow: hidden;
}

.upload-box:hover {
  border-color: var(--accent);
  background: rgba(108, 99, 255, 0.05);
}

.upload-preview {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.preview-title {
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--muted);
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.preview-phone {
  border: 2px solid var(--border2);
  border-radius: 20px;
  overflow: hidden;
  background: var(--surface2);
}

.preview-phone-bar {
  height: 22px;
  background: var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
}

.preview-phone-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--border2);
}

.preview-store-header {
  padding: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.preview-cover {
  width: 100%;
  height: 80px;
  object-fit: cover;
  border-radius: var(--radius-sm);
  background: var(--surface3);
  display: flex;
  align-items: center;
  justify-content: center;
}

.preview-logo-wrap {
  margin-top: -30px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 3px solid var(--surface);
  overflow: hidden;
  background: var(--surface3);
  display: flex;
  align-items: center;
  justify-content: center;
}

.preview-logo {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.preview-store-name {
  font-size: 0.95rem;
  font-weight: 800;
  text-align: center;
}

.preview-store-bio {
  font-size: 0.75rem;
  color: var(--muted);
  text-align: center;
}

.complete-screen {
  text-align: center;
  padding: 60px 20px;
}

.complete-icon {
  width: 90px;
  height: 90px;
  border-radius: 50%;
  background: rgba(34, 197, 94, 0.12);
  color: var(--success);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 24px;
}

.complete-title {
  font-size: 1.6rem;
  font-weight: 800;
  margin-bottom: 10px;
}

.complete-sub {
  color: var(--muted);
  font-size: 0.95rem;
  margin-bottom: 32px;
}

.complete-actions {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
}

.loading-overlay {
  position: fixed;
  inset: 0;
  background: rgba(9, 12, 18, 0.88);
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  backdrop-filter: blur(6px);
}

.loading-card {
  background: var(--surface);
  border: 1px solid var(--border2);
  border-radius: 20px;
  padding: 40px 56px;
  text-align: center;
  box-shadow: var(--shadow);
}

@keyframes spin {
  100% {
    transform: rotate(360deg);
  }
}
.spin, .spinner {
  animation: spin 1s linear infinite;
}

.loading-steps {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 20px;
  text-align: start;
}

.loading-step {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.88rem;
  padding: 8px 14px;
  border-radius: 8px;
  background: var(--surface2);
}

.loading-step.done {
  color: var(--success);
}

.loading-step.active {
  color: var(--accent);
}

.loading-step.pending {
  color: var(--muted);
}

.loading-icon-wrap {
  margin-bottom: 16px;
}

.loading-icon {
  width: 44px;
  height: 44px;
  color: var(--accent);
}

.loading-title {
  font-size: 1.1rem;
  font-weight: 800;
  margin-bottom: 6px;
}

.loading-sub {
  font-size: 0.85rem;
  color: var(--muted);
}

.nav-back-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
}

.nav-step-count {
  font-size: 0.82rem;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 6px;
}

.ctrl-btn-danger {
  color: var(--danger);
  border-color: rgba(239, 68, 68, 0.35);
}

.ctrl-btn-danger:hover {
  background: rgba(239, 68, 68, 0.12);
  border-color: var(--danger);
}

.progress-step-label {
  font-size: 0.85rem;
  font-weight: 700;
}

.cs-emoji {
  font-size: 0.9rem;
}

.cs-loading {
  padding: 20px;
  text-align: center;
}

.cs-empty {
  padding: 14px;
  text-align: center;
  color: var(--muted);
  font-size: 0.85rem;
}

.upload-logo-box {
  height: 120px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.upload-cover-box {
  height: 120px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.upload-preview-contain {
  object-fit: contain;
  padding: 8px;
}

.upload-icon {
  width: 26px;
  height: 26px;
  color: var(--accent);
  margin-bottom: 6px;
}

.upload-text {
  font-size: 0.8rem;
  font-weight: 700;
}

.upload-hint {
  font-size: 0.7rem;
  color: var(--muted);
  margin-top: 2px;
}

.banner-title-row {
  display: flex;
  gap: 10px;
  margin-bottom: 12px;
}

.banner-emoji-input {
  width: 65px;
  text-align: center;
  font-size: 1.2rem;
}

.banner-title-input {
  flex: 1;
}

.banner-sub-input {
  margin-bottom: 12px;
}

.form-label-opt {
  font-size: 0.75rem;
  color: var(--muted);
  font-weight: 400;
}

.shipping-bulk-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--surface2);
  padding: 12px 16px;
  border-radius: var(--radius-sm);
  margin-bottom: 18px;
  flex-wrap: wrap;
}

.shipping-bulk-title {
  font-size: 0.85rem;
  font-weight: 700;
}

.shipping-bulk-input {
  width: 90px;
  padding: 6px 10px;
}

.shipping-bulk-actions {
  margin-inline-start: auto;
  display: flex;
  gap: 8px;
}

.shipping-table-wrap {
  max-height: 360px;
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}

.col-cost {
  width: 140px;
}

.col-center {
  width: 80px;
  text-align: center;
}

.shipping-cost-input {
  padding: 6px 10px;
  font-size: 0.85rem;
}

.card-pixel {
  margin-bottom: 14px;
}

.card-header-clickable {
  cursor: pointer;
  margin-bottom: 0;
}

.card-chevron {
  transition: transform 0.2s ease;
}

.card-chevron.open {
  transform: rotate(180deg);
}

.pixel-body {
  margin-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.wizard-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 32px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
}

.btn-success {
  background: var(--success);
  color: #fff;
  border: none;
}

.btn-success:hover {
  background: var(--success-hover);
  color: #fff;
}

.preview-logo-placeholder {
  font-size: 1.2rem;
  font-weight: 800;
  color: var(--accent);
}

.preview-category-badge {
  font-size: 0.7rem;
}

.preview-featured-wrap {
  width: 100%;
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.preview-featured-label {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--muted);
  text-align: start;
}

.preview-products-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.preview-product-card {
  background: var(--surface3);
  border-radius: var(--radius-sm);
  padding: 8px;
  text-align: center;
}

.preview-product-thumb {
  height: 50px;
  background: var(--surface2);
  border-radius: 6px;
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.6;
}

.preview-product-name {
  font-size: 0.7rem;
  font-weight: 700;
}

.preview-product-price {
  font-size: 0.68rem;
  color: var(--accent);
  font-weight: 800;
}

.chart-container {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  height: 160px;
  padding: 16px 12px 6px;
  background: rgba(255, 255, 255, 0.015);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-subtle);
  overflow-x: auto;
}

.chart-col {
  flex: 1;
  min-width: 28px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  height: 100%;
  justify-content: flex-end;
}

.chart-bar {
  width: 100%;
  max-width: 28px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.25) 100%);
  border-radius: 5px 5px 2px 2px;
  box-shadow: 0 2px 8px rgba(255, 255, 255, 0.1);
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  min-height: 6px;
  cursor: pointer;
}
.chart-bar:hover {
  background: #ffffff;
  box-shadow: 0 0 16px rgba(255, 255, 255, 0.4);
  transform: scaleY(1.03);
}

.chart-label {
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--text-muted);
  text-align: center;
  white-space: nowrap;
  margin-top: 4px;
}

.tier-widget {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 22px;
  min-height: 165px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.tier-widget:hover {
  border-color: var(--border-medium);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

.tier-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 0.74rem;
  font-weight: 600;
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-primary);
  border: 1px solid var(--border-subtle);
}
.tier-badge svg, .tier-badge i {
  width: 13px;
  height: 13px;
  stroke-width: 2;
  flex-shrink: 0;
}

.tier-details {
  display: flex;
  justify-content: space-between;
  font-size: 0.78rem;
  color: var(--text-secondary);
  margin-top: 8px;
}

.progress-track {
  width: 100%;
  height: 8px;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: 4px;
  overflow: hidden;
  margin-top: 10px;
}

.progress-fill {
  height: 100%;
  background: var(--text-primary);
  border-radius: 4px;
  transition: width 0.4s ease;
}

.list-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 10px;
  border-radius: var(--radius-sm);
  border-bottom: 1px solid var(--border-subtle);
  gap: 12px;
  transition: background 0.15s ease;
}
.list-item:hover {
  background: var(--bg-card-hover);
}
.list-item:last-child {
  border-bottom: none;
}
.list-item .item-info {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  flex: 1;
}
.list-item .item-info .stat-icon {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-sm);
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.list-item .item-info .stat-icon svg, .list-item .item-info .stat-icon i {
  width: 16px;
  height: 16px;
  stroke-width: 2;
  color: var(--text-secondary);
}
.list-item .item-info .item-thumb {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-sm);
  object-fit: cover;
  border: 1px solid var(--border-subtle);
  background: var(--bg-surface);
  flex-shrink: 0;
}
.list-item .item-info .item-title {
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.list-item .item-info .item-subtitle {
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-top: 2px;
}
.list-item .item-val {
  font-weight: 700;
  font-size: 0.88rem;
  color: var(--text-primary);
  white-space: nowrap;
}
.list-item .bar-label {
  width: 100px;
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex-shrink: 0;
}
.list-item .bar-container {
  flex: 1;
  height: 7px;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: 4px;
  overflow: hidden;
  margin: 0 10px;
}
.list-item .bar-fill {
  height: 100%;
  border-radius: 4px;
  transition: width 0.4s ease;
}
.list-item .bar-fill.bg-info {
  background: #3b82f6;
}
.list-item .bar-fill.bg-success {
  background: #22c55e;
}
.list-item .bar-fill.bg-warning {
  background: #f59e0b;
}
.list-item .bar-count {
  font-weight: 700;
  font-size: 0.82rem;
  color: var(--text-primary);
  width: 44px;
  text-align: end;
  flex-shrink: 0;
}

.timeline {
  display: flex;
  flex-direction: column;
  gap: 16px;
  position: relative;
  padding-inline-start: 22px;
  margin-top: 6px;
}

.timeline::before {
  content: "";
  position: absolute;
  inset-inline-start: 5px;
  top: 6px;
  bottom: 6px;
  width: 2px;
  background: var(--border-medium);
}

.tl-item {
  position: relative;
}

.tl-dot {
  position: absolute;
  inset-inline-start: -22px;
  top: 5px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--text-primary);
  border: 2px solid var(--bg-card);
  box-shadow: 0 0 0 2px var(--border-strong);
}

.tl-content {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.tl-time {
  font-size: 0.72rem;
  color: var(--text-muted);
}

.tl-text {
  font-size: 0.84rem;
  color: var(--text-primary);
  font-weight: 500;
}

.dropdown-wrapper {
  position: relative;
}

.dropdown-menu {
  position: absolute;
  top: calc(100% + 8px);
  inset-inline-end: 0;
  background: var(--surface);
  border: 1px solid var(--border2);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  min-width: 220px;
  z-index: 1000;
  padding: 8px 0;
  animation: fadeIn 0.2s ease;
}

.dropdown-header {
  padding: 10px 16px;
  font-size: 0.85rem;
  font-weight: 700;
  border-bottom: 1px solid var(--border);
}

.dropdown-content {
  padding: 20px 16px;
  text-align: center;
  color: var(--muted);
  font-size: 0.85rem;
}

.dropdown-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  font-size: 0.85rem;
  color: var(--text);
  cursor: pointer;
  transition: background 0.15s;
}

.dropdown-item:hover {
  background: var(--surface2);
  color: var(--accent);
}

.dropdown-divider {
  height: 1px;
  background: var(--border);
  margin: 6px 0;
}

.user-profile {
  cursor: pointer;
}

.user-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  font-weight: 800;
  font-size: 0.85rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--border);
}

.store-logo {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-sm);
  object-fit: cover;
  border: 1px solid var(--border-subtle);
  background: var(--bg-card);
  flex-shrink: 0;
}

.table-empty {
  text-align: center;
  padding: 36px 16px;
  color: var(--text-muted);
  font-size: 0.85rem;
}

.order-code {
  font-weight: 700;
  font-family: monospace;
  color: var(--text-primary);
}

.finance-row,
.finance-row-last {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px dashed var(--border-subtle);
}

.finance-row-last {
  border-bottom: none;
}

/* 17. PRODUCTS MANAGEMENT COMPONENT */
.bulk-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--surface2);
  border: 1px solid var(--accent);
  border-radius: var(--radius-sm);
  padding: 10px 16px;
  margin-bottom: 16px;
  animation: fadeIn 0.2s ease;
  gap: 12px;
  flex-wrap: wrap;
}

.bulk-info {
  font-weight: 600;
  color: var(--accent);
  font-size: 0.9rem;
}

.bulk-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-inline-start: auto;
}

th.sortable {
  cursor: pointer;
  user-select: none;
  transition: color 0.2s;
  white-space: nowrap;
}

th.sortable:hover {
  color: var(--accent);
}

th.sortable .sort-icon {
  display: inline-flex;
  vertical-align: middle;
  margin-inline-start: 4px;
  opacity: 0.5;
  transition: opacity 0.2s;
}

th.sortable.active .sort-icon {
  opacity: 1;
  color: var(--accent);
}

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

.prod-img {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-sm);
  object-fit: cover;
  background: var(--surface2);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border: 1px solid var(--border);
}

.prod-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.prod-name {
  font-weight: 600;
  color: var(--text);
  font-size: 0.92rem;
  cursor: pointer;
  transition: color 0.15s ease;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

.prod-name:hover {
  color: var(--accent);
  text-decoration: underline;
}

.stock-alert {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--warning);
  margin-top: 2px;
}

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

.action-icon {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  color: var(--muted);
  background: var(--surface2);
  cursor: pointer;
  transition: all 0.2s ease;
}

.action-icon:hover {
  color: var(--accent);
  background: var(--accent-glow);
}

.action-icon.del:hover {
  color: var(--danger);
  background: rgba(239, 68, 68, 0.15);
}

.chk-wrapper {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.chk-wrapper input[type=checkbox] {
  width: 17px;
  height: 17px;
  accent-color: var(--accent);
  cursor: pointer;
}

.b-type {
  background: var(--surface3);
  color: var(--muted);
  font-size: 0.74rem;
  padding: 2px 8px;
  border-radius: 6px;
  font-weight: 600;
}

.b-variant {
  background: rgba(245, 158, 11, 0.12);
  color: var(--warning);
  font-size: 0.74rem;
  padding: 2px 8px;
  border-radius: 6px;
  font-weight: 600;
}

/* ── 18. PRODUCT FORM COMPONENT ─────────────────────────────────────── */
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 24px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 100;
  gap: 16px;
  flex-wrap: wrap;
}

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

.topbar-right {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-inline-start: auto;
}

.btn-back {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-sm);
  background: var(--surface2);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text);
  cursor: pointer;
  transition: background 0.2s;
}

.btn-back:hover {
  background: var(--surface3);
  color: var(--accent);
}

.page-badge {
  background: rgba(108, 99, 255, 0.15);
  color: var(--accent);
  font-size: 0.75rem;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 20px;
}

.tag {
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  border-radius: 6px;
  font-size: 0.75rem;
  font-weight: 700;
}

.tag-success {
  background: rgba(34, 197, 94, 0.15);
  color: var(--success);
}

.tag-accent {
  background: rgba(108, 99, 255, 0.15);
  color: var(--accent);
}

.tag-warn {
  background: rgba(245, 158, 11, 0.15);
  color: var(--warning);
}

.tag-danger {
  background: rgba(239, 68, 68, 0.15);
  color: var(--danger);
}

.pf-layout {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 24px;
  padding: 24px;
  align-items: start;
}

.pf-left {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.pf-right {
  display: flex;
  flex-direction: column;
  gap: 20px;
  position: sticky;
  top: 80px;
}

.rp-section {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.rp-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--text);
}

.card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
  gap: 12px;
}

.card-title-icon {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-sm);
  background: rgba(108, 99, 255, 0.12);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.form-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
}

.req {
  color: var(--danger);
  font-weight: 700;
}

.opt {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 400;
}

.char-count {
  margin-inline-start: auto;
  color: var(--muted);
  font-size: 0.75rem;
}

.desc-editor-box {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  transition: border-color 0.2s, box-shadow 0.2s;
  background: var(--input-bg);
}

.desc-editor-box.focused {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-glow);
}

.desc-toolbar {
  display: flex;
  gap: 4px;
  padding: 7px 10px;
  background: var(--surface2);
  border-bottom: 1px solid var(--border);
}

.desc-content {
  min-height: 110px;
  padding: 12px 14px;
  outline: none;
  font-size: 0.9rem;
  line-height: 1.7;
  color: var(--text);
  background: var(--input-bg);
}

.desc-content:empty::before {
  content: attr(data-placeholder);
  color: var(--muted);
  pointer-events: none;
}

.price-input-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.price-currency {
  position: absolute;
  inset-inline-start: 12px;
  color: var(--muted);
  font-weight: 600;
  font-size: 0.85rem;
  pointer-events: none;
}

.price-input {
  padding-inline-start: 46px !important;
}

.discount-badge {
  background: rgba(239, 68, 68, 0.12);
  color: var(--danger);
  font-size: 0.75rem;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.profit-badge {
  background: rgba(34, 197, 94, 0.12);
  color: var(--success);
  font-size: 0.75rem;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 6px;
}

.sw-wrap {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  user-select: none;
}

.sw {
  position: relative;
  width: 38px;
  height: 22px;
  flex-shrink: 0;
}

.sw input {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
}

.sw-track {
  position: absolute;
  inset: 0;
  background: var(--surface3);
  border: 1px solid var(--border);
  border-radius: 20px;
  transition: 0.25s;
}

.sw-track::before {
  position: absolute;
  content: "";
  height: 16px;
  width: 16px;
  inset-inline-start: 2px;
  bottom: 2px;
  background: #fff;
  border-radius: 50%;
  transition: 0.25s;
}

.sw input:checked + .sw-track {
  background: var(--accent);
  border-color: var(--accent);
}

[dir=ltr] .sw input:checked + .sw-track::before {
  transform: translateX(16px);
}

[dir=rtl] .sw input:checked + .sw-track::before {
  transform: translateX(-16px);
}

.img-drop-zone {
  position: relative;
  border: 2px dashed var(--border2);
  border-radius: var(--radius);
  padding: 28px 20px;
  text-align: center;
  background: var(--surface2);
  cursor: pointer;
  transition: all 0.2s ease;
}

.img-drop-zone:hover, .img-drop-zone.drag-over {
  border-color: var(--accent);
  background: var(--accent-glow);
}

.img-drop-zone input[type=file] {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
  width: 100%;
  height: 100%;
}

.img-drop-icon {
  color: var(--accent);
  margin-bottom: 8px;
}

.img-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  gap: 12px;
  margin-top: 16px;
}

.img-item {
  position: relative;
  aspect-ratio: 1;
  border-radius: var(--radius-sm);
  overflow: hidden;
  border: 2px solid var(--border);
  background: var(--surface2);
  cursor: grab;
  transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
}

.img-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.img-item.is-main {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-glow);
}

.img-item.dragging {
  opacity: 0.4;
  transform: scale(0.95);
}

.img-item:hover .img-overlay {
  opacity: 1;
}

.img-main-badge {
  position: absolute;
  top: 6px;
  inset-inline-start: 6px;
  background: var(--accent);
  color: #fff;
  font-size: 0.68rem;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 4px;
  z-index: 2;
}

.img-drag-badge {
  position: absolute;
  top: 6px;
  inset-inline-end: 6px;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  font-size: 0.75rem;
  padding: 2px 4px;
  border-radius: 4px;
  z-index: 2;
}

.img-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  opacity: 0;
  transition: opacity 0.2s ease;
  z-index: 3;
}

.digital-drop {
  position: relative;
  border: 2px dashed var(--border2);
  border-radius: var(--radius);
  padding: 24px;
  text-align: center;
  background: var(--surface2);
  cursor: pointer;
}

.digital-drop input[type=file] {
  position: absolute;
  inset: 0;
  opacity: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
}

.digital-file-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}

.digital-file-ic {
  color: var(--accent);
}

.attr-card {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 14px;
  margin-bottom: 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.attr-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.display-type-tabs {
  display: flex;
  gap: 4px;
  background: var(--surface3);
  padding: 3px;
  border-radius: var(--radius-sm);
}

.dt-tab {
  padding: 4px 10px;
  font-size: 0.75rem;
  font-weight: 600;
  border-radius: 6px;
  color: var(--muted);
  cursor: pointer;
  transition: all 0.15s ease;
}

.dt-tab.active {
  background: var(--surface);
  color: var(--accent);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
}

.attr-name-input {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 7px 12px;
  color: var(--text);
  font-family: inherit;
  font-size: 0.88rem;
  outline: none;
  flex: 1;
}

.attr-name-input:focus {
  border-color: var(--accent);
}

.chip-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 20px;
  font-size: 0.82rem;
  color: var(--text);
}

.chip-color-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 1px solid var(--border);
}

.chip-del {
  cursor: pointer;
  color: var(--muted);
  display: flex;
  align-items: center;
}

.chip-del:hover {
  color: var(--danger);
}

.add-chip-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.chip-add-input {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 6px 10px;
  color: var(--text);
  font-family: inherit;
  font-size: 0.82rem;
  outline: none;
  width: 140px;
}

.chip-add-input:focus {
  border-color: var(--accent);
}

.color-picker-input {
  width: 36px;
  height: 32px;
  padding: 2px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--surface);
  cursor: pointer;
}

.sku-bulk-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: var(--surface2);
  border-radius: var(--radius-sm);
  margin-bottom: 12px;
  flex-wrap: wrap;
}

.sku-wrap {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}

.sku-table {
  width: 100%;
  border-collapse: collapse;
}

.sku-table th, .sku-table td {
  padding: 8px 10px;
  font-size: 0.82rem;
  border-bottom: 1px solid var(--border);
}

.sku-table th {
  background: var(--surface2);
  font-weight: 700;
  color: var(--muted);
  white-space: nowrap;
}

.sku-variant-label {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.sku-vchip {
  display: inline-block;
  background: var(--surface3);
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 0.75rem;
  font-weight: 600;
}

.sku-input {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 5px 8px;
  color: var(--text);
  font-family: inherit;
  font-size: 0.82rem;
  width: 100%;
  min-width: 70px;
  outline: none;
}

.sku-input:focus {
  border-color: var(--accent);
}

.spec-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.spec-key, .spec-val {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 8px 12px;
  color: var(--text);
  font-family: inherit;
  font-size: 0.85rem;
  outline: none;
  flex: 1;
}

.spec-key:focus, .spec-val:focus {
  border-color: var(--accent);
}

.cs-wrap {
  position: relative;
  width: 100%;
}

.cs-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 8px 12px;
  cursor: pointer;
  color: var(--text);
  font-size: 0.88rem;
  transition: border-color 0.2s;
}

.cs-btn.open {
  border-color: var(--accent);
}

.cs-btn.placeholder {
  color: var(--muted);
}

.cs-left {
  display: flex;
  align-items: center;
  gap: 8px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cs-val-icon {
  width: 24px;
  height: 24px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
}

.cs-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  inset-inline-start: 0;
  width: 100%;
  min-width: 220px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow);
  z-index: 1000;
  overflow: hidden;
  animation: fadeIn 0.15s ease;
}

.cs-search-box {
  padding: 8px;
  border-bottom: 1px solid var(--border);
}

.cs-search-input {
  width: 100%;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 6px 10px;
  color: var(--text);
  font-family: inherit;
  font-size: 0.82rem;
  outline: none;
}

.cs-list {
  max-height: 220px;
  overflow-y: auto;
}

.cs-opt {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  cursor: pointer;
  font-size: 0.85rem;
  transition: background 0.15s;
}

.cs-opt:hover {
  background: var(--surface2);
}

.cs-opt.active {
  background: var(--accent-glow);
  color: var(--accent);
  font-weight: 600;
}

.cs-opt-ic {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 0.85rem;
}

.cs-opt-txt {
  flex: 1;
  overflow: hidden;
}

.cs-opt-sub {
  font-size: 0.72rem;
  color: var(--muted);
}

.cs-chk {
  color: var(--accent);
}

.cs-empty {
  padding: 14px;
  text-align: center;
  color: var(--muted);
  font-size: 0.82rem;
}

.preview-card {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface2);
}

.preview-img-area {
  position: relative;
  aspect-ratio: 16/10;
  background: var(--surface3);
  display: flex;
  align-items: center;
  justify-content: center;
}

.preview-img-area img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.preview-img-placeholder {
  text-align: center;
  color: var(--muted);
}

.preview-badge {
  font-size: 0.7rem;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 6px;
}

.preview-info {
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.preview-name {
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.preview-price {
  font-weight: 800;
  color: var(--accent);
  font-size: 1rem;
}

.preview-old-price {
  font-size: 0.8rem;
  color: var(--muted);
  text-decoration: line-through;
}

.preview-stock {
  font-size: 0.75rem;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 4px;
}

.status-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.status-opt {
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px;
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  background: var(--surface2);
}

.status-opt.selected {
  border-color: var(--accent);
  background: var(--accent-glow);
  color: var(--accent);
  font-weight: 700;
}

.status-opt-label {
  font-size: 0.85rem;
}

.loading-box {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 28px 36px;
  text-align: center;
  box-shadow: var(--shadow);
  max-width: 420px;
  width: 90%;
}

.save-step {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  font-size: 0.85rem;
  margin-bottom: 6px;
  color: var(--muted);
  background: var(--surface2);
}

.save-step.active {
  color: var(--accent);
  font-weight: 700;
  background: var(--accent-glow);
}

.save-step.done {
  color: var(--success);
  font-weight: 600;
}

@media (max-width: 900px) {
  .pf-layout {
    grid-template-columns: 1fr;
  }
  .pf-right {
    position: static;
  }
}
/* ── 19. ORDERS MANAGEMENT & DRAWER COMPONENT ────────────────────────── */
.orders-page {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  width: 100%;
}
.orders-page .topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 24px;
  background: var(--bg-surface);
  border-bottom: 1px solid var(--border-subtle);
}
.orders-page .topbar .topbar-title {
  display: flex;
  align-items: center;
  gap: 10px;
}
.orders-page .topbar .topbar-title .title-icon {
  width: 20px;
  height: 20px;
  color: var(--text-primary);
}
.orders-page .topbar .topbar-title .count-badge {
  font-size: 0.75rem;
  font-weight: 700;
  padding: 2px 9px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid var(--border-subtle);
  color: var(--text-secondary);
}
.orders-page .topbar .topbar-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

.spin {
  animation: orders-spin 1s linear infinite;
}

@keyframes orders-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
/* Uniform 6-card stats row */
.stats-row {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 12px;
  margin-bottom: 20px;
}
@media (max-width: 1200px) {
  .stats-row {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 640px) {
  .stats-row {
    grid-template-columns: repeat(2, 1fr);
  }
}

.stats-row .stat-card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 106px;
  user-select: none;
}
.stats-row .stat-card:hover {
  border-color: var(--border-medium);
  background: var(--bg-card-hover);
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
}
.stats-row .stat-card.active-filter {
  border-color: var(--border-strong);
  background: var(--bg-card-hover);
  box-shadow: 0 0 0 1px var(--border-strong), var(--shadow-sm);
}
.stats-row .stat-card .stat-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  margin-bottom: 12px;
}
.stats-row .stat-card .stat-card-header .stat-icon {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-surface) !important;
  border: 1px solid var(--border-subtle);
  color: var(--text-primary) !important;
}
.stats-row .stat-card .stat-card-header .stat-icon svg, .stats-row .stat-card .stat-card-header .stat-icon i, .stats-row .stat-card .stat-card-header .stat-icon .stat-svg {
  width: 18px;
  height: 18px;
  color: var(--text-primary) !important;
  stroke-width: 2;
}
.stats-row .stat-card .stat-card-header .stat-pill {
  font-size: 0.72rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--border-subtle);
  color: var(--text-secondary) !important;
}
.stats-row .stat-card .stat-card-header .stat-delta {
  font-size: 0.72rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--border-subtle);
  color: var(--text-primary) !important;
}
.stats-row .stat-card .stat-card-header .stat-delta .badge-mini-icon {
  width: 12px;
  height: 12px;
  stroke-width: 2.2;
}
.stats-row .stat-card .stat-card-body {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.stats-row .stat-card .stat-card-body .stat-val {
  font-size: 1.45rem;
  font-weight: 800;
  color: var(--text-primary) !important;
  line-height: 1.1;
  font-feature-settings: "tnum";
}
.stats-row .stat-card .stat-card-body .stat-label {
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--text-secondary) !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Bulk Selection Floating Bar */
.bulk-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 20px;
  background: var(--bg-glass);
  backdrop-filter: blur(12px);
  border: 1px solid var(--border-medium);
  border-radius: var(--radius-md);
  margin-bottom: 16px;
  box-shadow: var(--shadow-md);
  animation: orders-fade-in 0.2s ease;
}
.bulk-bar .bulk-info {
  display: flex;
  align-items: center;
  gap: 10px;
}
.bulk-bar .bulk-info .bulk-count, .bulk-bar .bulk-info .bulk-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  height: 24px;
  padding: 0 8px;
  border-radius: 12px;
  background: #ffffff;
  color: #0a0a0c;
  font-weight: 700;
  font-size: 0.8rem;
}
.bulk-bar .bulk-info span {
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--text-primary);
}
.bulk-bar .bulk-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}
.bulk-bar .bulk-actions .btn {
  height: 36px;
  padding: 0 14px;
  border-radius: var(--radius-sm);
  font-size: 0.82rem;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--border-subtle);
  background: var(--bg-card);
  color: var(--text-primary);
  cursor: pointer;
  transition: all 0.15s ease;
}
.bulk-bar .bulk-actions .btn:hover {
  background: var(--bg-card-hover);
  border-color: var(--border-medium);
  color: #ffffff;
}
.bulk-bar .bulk-actions .btn.btn-danger {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.16);
  color: var(--text-secondary);
}
.bulk-bar .bulk-actions .btn.btn-danger:hover {
  background: rgba(255, 255, 255, 0.14);
  border-color: var(--border-strong);
  color: #ffffff;
}

@keyframes orders-fade-in {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/* Table Card */
.table-card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  margin-bottom: 24px;
}
.table-card .table-wrap, .table-card .table-container {
  overflow-x: auto;
  width: 100%;
}
.table-card .orders-table {
  width: 100%;
  border-collapse: collapse;
  text-align: start;
}
.table-card .orders-table th {
  background: var(--bg-surface);
  padding: 13px 14px;
  font-size: 0.76rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-secondary);
  border-bottom: 1px solid var(--border-subtle);
  white-space: nowrap;
}
.table-card .orders-table td {
  padding: 13px 14px;
  border-bottom: 1px solid var(--border-subtle);
  vertical-align: middle;
  font-size: 0.86rem;
  color: var(--text-primary);
}
.table-card .orders-table tbody tr {
  transition: background 0.15s ease;
}
.table-card .orders-table tbody tr:hover {
  background: var(--bg-card-hover);
}
.table-card .orders-table tbody tr.row-selected {
  background: rgba(255, 255, 255, 0.04);
}
.table-card .orders-table tbody tr:last-child td {
  border-bottom: none;
}
.table-card .orders-table {
  /* Column widths */
}
.table-card .orders-table .col-check, .table-card .orders-table .col-chk {
  width: 46px;
  text-align: center;
}
.table-card .orders-table .col-code {
  min-width: 130px;
}
.table-card .orders-table .col-date {
  min-width: 140px;
}
.table-card .orders-table .col-cust {
  min-width: 190px;
}
.table-card .orders-table .col-prods, .table-card .orders-table .col-prod {
  min-width: 170px;
}
.table-card .orders-table .col-total {
  min-width: 120px;
}
.table-card .orders-table .col-pay {
  min-width: 130px;
}
.table-card .orders-table .col-status {
  min-width: 150px;
}
.table-card .orders-table .col-acts, .table-card .orders-table .col-actions {
  width: 140px;
  text-align: center;
}

/* Creative Custom Checkbox System */
.chk-wrapper, .custom-check, .checkbox-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  user-select: none;
  padding: 3px;
  border-radius: 8px;
  transition: background 0.15s ease;
}
.chk-wrapper:hover, .custom-check:hover, .checkbox-label:hover {
  background: rgba(255, 255, 255, 0.05);
}

/* Universal Creative Checkbox Styling */
.chk-wrapper input[type=checkbox],
.custom-check input[type=checkbox],
.orders-table input[type=checkbox],
.table-card input[type=checkbox] {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 6px;
  background-color: var(--bg-surface);
  border: 1.5px solid var(--border-medium);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  vertical-align: middle;
  margin: 0;
  outline: none;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.4);
}
.chk-wrapper input[type=checkbox]:hover,
.custom-check input[type=checkbox]:hover,
.orders-table input[type=checkbox]:hover,
.table-card input[type=checkbox]:hover {
  border-color: var(--border-strong);
  background-color: var(--bg-card-hover);
  transform: scale(1.08);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}
.chk-wrapper input[type=checkbox]:focus-visible,
.custom-check input[type=checkbox]:focus-visible,
.orders-table input[type=checkbox]:focus-visible,
.table-card input[type=checkbox]:focus-visible {
  border-color: #ffffff;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.25);
}
.chk-wrapper input[type=checkbox]:checked,
.custom-check input[type=checkbox]:checked,
.orders-table input[type=checkbox]:checked,
.table-card input[type=checkbox]:checked {
  background-color: #ffffff;
  border-color: #ffffff;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230a0a0c' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
  background-size: 13px 13px;
  background-position: center;
  background-repeat: no-repeat;
  box-shadow: 0 2px 10px rgba(255, 255, 255, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.2);
  animation: chk-pop 0.22s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.chk-wrapper input[type=checkbox]:indeterminate,
.custom-check input[type=checkbox]:indeterminate,
.orders-table input[type=checkbox]:indeterminate,
.table-card input[type=checkbox]:indeterminate {
  background-color: #ffffff;
  border-color: #ffffff;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230a0a0c' stroke-width='3.5' stroke-linecap='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'%3E%3C/line%3E%3C/svg%3E");
  background-size: 12px 12px;
  background-position: center;
  background-repeat: no-repeat;
  box-shadow: 0 2px 10px rgba(255, 255, 255, 0.25);
}

@keyframes chk-pop {
  0% {
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.15);
  }
  100% {
    transform: scale(1);
  }
}
/* Order Code Wrap */
.order-code-wrap {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.order-code-wrap .order-code-link {
  font-family: monospace;
  font-weight: 700;
  color: #ffffff;
  text-decoration: none;
  font-size: 0.88rem;
  transition: opacity 0.15s;
}
.order-code-wrap .order-code-link:hover {
  text-decoration: underline;
  opacity: 0.85;
}
.order-code-wrap .date-cell {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 0.76rem;
  color: var(--text-muted);
}
.order-code-wrap .date-cell .date-mini-svg {
  width: 12px;
  height: 12px;
  stroke-width: 2;
  color: var(--text-muted);
  flex-shrink: 0;
}
.order-code-wrap .order-fee-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.7rem;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 4px;
  width: fit-content;
}
.order-code-wrap .order-fee-badge.fee-paid {
  background: rgba(255, 255, 255, 0.1);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.15);
}
.order-code-wrap .order-fee-badge.fee-unpaid {
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-muted);
  border: 1px solid var(--border-subtle);
}

/* Customer Cell */
.cust-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.cust-info .cust-name-row {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.cust-info .cust-name-row .cust-name {
  font-weight: 600;
  color: var(--text-primary);
  font-size: 0.88rem;
}
.cust-info .cust-name-row .gov-pill, .cust-info .cust-name-row .cust-gov {
  font-size: 0.7rem;
  color: var(--text-secondary);
  background: rgba(255, 255, 255, 0.06);
  padding: 1px 6px;
  border-radius: 12px;
  border: 1px solid var(--border-subtle);
  display: inline-flex;
  align-items: center;
  gap: 3px;
}
.cust-info .cust-phone-row {
  display: flex;
  align-items: center;
  gap: 6px;
}
.cust-info .cust-phone-row .cust-phone {
  font-size: 0.78rem;
  color: var(--text-muted);
  font-family: monospace;
  direction: ltr;
}
.cust-info .cust-phone-row .mini-icon-btn {
  width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  color: var(--text-secondary);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border-subtle);
  text-decoration: none;
  transition: all 0.15s ease;
}
.cust-info .cust-phone-row .mini-icon-btn:hover {
  background: rgba(255, 255, 255, 0.15);
  color: #ffffff;
  border-color: var(--border-medium);
}

/* Products Cell */
.prod-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.prod-list .prod-item {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 0.82rem;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 200px;
}
.prod-list .prod-item .prod-qty {
  font-weight: 700;
  font-size: 0.76rem;
  color: var(--text-secondary);
  background: rgba(255, 255, 255, 0.08);
  padding: 1px 5px;
  border-radius: 3px;
  flex-shrink: 0;
}
.prod-list .prod-more {
  font-size: 0.72rem;
  color: var(--text-muted);
  font-weight: 600;
}

/* Total Cell */
.total-cell {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.total-cell .total-val {
  font-weight: 700;
  font-size: 0.92rem;
  color: var(--text-primary);
}
.total-cell .shipping-cost {
  font-size: 0.74rem;
  color: var(--text-muted);
}

/* Payment Cell */
.pay-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--text-secondary);
  background: var(--bg-surface);
  padding: 4px 9px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-subtle);
  white-space: nowrap;
}
.pay-badge svg, .pay-badge i {
  width: 13px;
  height: 13px;
  color: var(--text-muted);
}

/* Status Select Pill */
.status-select, .status-pill-select {
  appearance: none;
  -webkit-appearance: none;
  border-radius: 20px;
  padding: 5px 14px;
  font-size: 0.78rem;
  font-weight: 700;
  font-family: inherit;
  border: 1px solid var(--border-medium);
  background: var(--bg-surface);
  color: var(--text-primary);
  cursor: pointer;
  outline: none;
  transition: all 0.15s ease;
  text-align: center;
}
.status-select:focus, .status-pill-select:focus {
  border-color: var(--border-strong);
}
.status-select option, .status-pill-select option {
  background: #18191e;
  color: #ffffff;
}
.status-select.st-Pending, .status-pill-select.st-Pending {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.2);
  color: #ffffff;
}
.status-select.st-Processing, .status-pill-select.st-Processing {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.28);
  color: #ffffff;
}
.status-select.st-ShippingConfirmed, .status-select.st-Shipped, .status-select.st-OutForDelivery, .status-pill-select.st-ShippingConfirmed, .status-pill-select.st-Shipped, .status-pill-select.st-OutForDelivery {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.38);
  color: #ffffff;
}
.status-select.st-Delivered, .status-pill-select.st-Delivered {
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.6);
  color: #ffffff;
}
.status-select.st-Cancelled, .status-select.st-Returned, .status-pill-select.st-Cancelled, .status-pill-select.st-Returned {
  background: rgba(255, 255, 255, 0.02);
  border-color: rgba(255, 255, 255, 0.12);
  color: var(--text-muted);
}

/* Action Buttons */
.action-btns {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.action-btns .act-btn {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-subtle);
  background: var(--bg-surface);
  color: var(--text-secondary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.action-btns .act-btn:hover {
  background: var(--bg-card-hover);
  border-color: var(--border-medium);
  color: #ffffff;
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}
.action-btns .act-btn svg, .action-btns .act-btn i, .action-btns .act-btn .btn-icon {
  width: 16px;
  height: 16px;
  stroke-width: 2;
}

/* Table Footer & Pagination (Unified) */
.table-footer, .pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  border-top: 1px solid var(--border-subtle);
  background: var(--bg-surface);
  gap: 16px;
  flex-wrap: wrap;
}
.table-footer .page-info, .pagination .page-info {
  font-size: 0.82rem;
  color: var(--text-secondary);
}
.table-footer .footer-center, .pagination .footer-center {
  display: flex;
  align-items: center;
  gap: 8px;
}
.table-footer .footer-center .page-size-label, .pagination .footer-center .page-size-label {
  font-size: 0.8rem;
  color: var(--text-muted);
}
.table-footer .footer-center .page-size-sel, .table-footer .footer-center .filter-select, .pagination .footer-center .page-size-sel, .pagination .footer-center .filter-select {
  height: 32px;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  padding: 0 8px;
  color: var(--text-primary);
  font-size: 0.8rem;
  outline: none;
  cursor: pointer;
}
.table-footer .footer-center .page-size-sel option, .table-footer .footer-center .filter-select option, .pagination .footer-center .page-size-sel option, .pagination .footer-center .filter-select option {
  background: #18191e;
  color: #ffffff;
}
.table-footer .page-controls, .pagination .page-controls {
  display: flex;
  align-items: center;
  gap: 4px;
}
.table-footer .page-controls .page-btn, .pagination .page-controls .page-btn {
  min-width: 32px;
  height: 32px;
  padding: 0 8px;
  border-radius: var(--radius-sm);
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  color: var(--text-secondary);
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
}
.table-footer .page-controls .page-btn:hover:not(:disabled), .pagination .page-controls .page-btn:hover:not(:disabled) {
  background: var(--bg-card-hover);
  border-color: var(--border-medium);
  color: #ffffff;
}
.table-footer .page-controls .page-btn.active, .pagination .page-controls .page-btn.active {
  background: #ffffff;
  border-color: #ffffff;
  color: #0a0a0c;
  font-weight: 700;
}
.table-footer .page-controls .page-btn:disabled, .pagination .page-controls .page-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}
.table-footer .page-controls .page-nums, .pagination .page-controls .page-nums {
  display: flex;
  align-items: center;
  gap: 4px;
}

/* Order Quick-View Drawer */
.drawer-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(4px);
  z-index: 1040;
  transition: opacity 0.3s ease;
}
.drawer-overlay.hidden {
  opacity: 0;
  pointer-events: none;
}

.drawer {
  position: fixed;
  top: 0;
  bottom: 0;
  inset-inline-end: 0;
  width: 460px;
  max-width: 92vw;
  background: var(--bg-surface);
  border-inline-start: 1px solid var(--border-medium);
  z-index: 1050;
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: var(--shadow-lg);
}
.drawer.open {
  transform: translateX(0) !important;
}
.drawer .form-control, .drawer input[type=text], .drawer textarea, .drawer select {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  padding: 8px 12px;
  color: var(--text-primary);
  font-size: 0.84rem;
  outline: none;
  font-family: inherit;
  width: 100%;
  transition: border-color 0.2s;
}
.drawer .form-control:focus, .drawer input[type=text]:focus, .drawer textarea:focus, .drawer select:focus {
  border-color: var(--border-strong);
}
.drawer .form-control::placeholder, .drawer input[type=text]::placeholder, .drawer textarea::placeholder, .drawer select::placeholder {
  color: var(--text-muted);
}
.drawer textarea {
  resize: vertical;
  min-height: 60px;
}

[dir=ltr] .drawer {
  transform: translateX(100%);
}

[dir=rtl] .drawer {
  transform: translateX(-100%);
}

.drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border-subtle);
  background: var(--bg-card);
}
.drawer-head .drawer-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  font-size: 1rem;
  color: var(--text-primary);
}

.drawer-body {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.drawer-footer {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 20px;
  border-top: 1px solid var(--border-subtle);
  background: var(--bg-card);
}

.d-section {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.d-section .d-section-title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 4px;
  border-bottom: 1px solid var(--border-subtle);
  padding-bottom: 6px;
}
.d-section .d-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.82rem;
  gap: 8px;
}
.d-section .d-row .d-key {
  color: var(--text-secondary);
}
.d-section .d-row .d-val {
  font-weight: 600;
  color: var(--text-primary);
}

.order-item-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--border-subtle);
}
.order-item-row:last-child {
  border-bottom: none;
  padding-bottom: 0;
}
.order-item-row .order-item-qty {
  width: 24px;
  height: 24px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.08);
  color: var(--text-primary);
  font-weight: 700;
  font-size: 0.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.order-item-row .order-item-info {
  flex: 1;
  min-width: 0;
}
.order-item-row .order-item-info .order-item-name {
  font-weight: 600;
  font-size: 0.82rem;
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.order-item-row .order-item-info .order-item-var {
  font-size: 0.72rem;
  color: var(--text-muted);
}
.order-item-row .order-item-price {
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--text-primary);
  flex-shrink: 0;
}

.tracking-line {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 8px 0;
}
.tracking-line .track-step {
  display: flex;
  gap: 12px;
}
.tracking-line .track-step .track-left {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 14px;
}
.tracking-line .track-step .track-left .track-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--border-medium);
}
.tracking-line .track-step .track-left .track-dot.cur {
  background: #ffffff;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.2);
}
.tracking-line .track-step .track-left .track-dot.done {
  background: #ffffff;
}
.tracking-line .track-step .track-left .track-line {
  width: 2px;
  flex: 1;
  background: var(--border-subtle);
  margin-top: 4px;
}
.tracking-line .track-step .track-left .track-line.done {
  background: #ffffff;
}
.tracking-line .track-step .track-info {
  flex: 1;
}
.tracking-line .track-step .track-info .track-label {
  font-weight: 700;
  font-size: 0.82rem;
  color: var(--text-primary);
}
.tracking-line .track-step .track-info .track-time {
  font-size: 0.72rem;
  color: var(--text-muted);
}
.tracking-line .track-step .track-info .track-note {
  font-size: 0.75rem;
  color: var(--text-secondary);
  background: var(--bg-surface);
  padding: 4px 8px;
  border-radius: 4px;
  margin-top: 4px;
  border: 1px solid var(--border-subtle);
}

/* ── 20. ORDER DETAIL & PRINT STYLES ───────────────────────────────── */
#OrderDetail-Vue {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.order-detail-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 380px;
  gap: 24px;
  align-items: start;
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  padding-bottom: 40px;
}
@media (max-width: 1100px) {
  .order-detail-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}

.order-empty-state,
.content-scroll:has(> .empty-state-card),
.content-scroll:has(> .d-flex.flex-column.align-items-center) {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: calc(100vh - 180px);
  padding: 32px 20px;
  margin: 0 auto;
  text-align: center;
  background: radial-gradient(circle at 50% 40%, rgba(108, 99, 255, 0.06) 0%, transparent 65%);
}

.empty-state-card,
.content-scroll > .d-flex.flex-column.align-items-center.justify-content-center {
  background: var(--surface);
  border: 1px solid var(--border2);
  border-radius: 20px;
  padding: 44px 36px !important;
  max-width: 500px;
  width: 100%;
  min-height: auto !important;
  box-shadow: 0 8px 24px -4px rgba(0, 0, 0, 0.12), 0 2px 6px -1px rgba(0, 0, 0, 0.05), 0 0 0 1px var(--border) inset;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  text-align: center;
  position: relative;
  overflow: hidden;
  margin: auto !important;
  animation: emptyCardAppear 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.empty-state-card::before,
.content-scroll > .d-flex.flex-column.align-items-center.justify-content-center::before {
  content: "";
  position: absolute;
  top: -40px;
  left: 50%;
  transform: translateX(-50%);
  width: 240px;
  height: 120px;
  background: radial-gradient(ellipse at center, rgba(108, 99, 255, 0.1) 0%, rgba(167, 139, 250, 0.02) 50%, transparent 75%);
  pointer-events: none;
  filter: blur(16px);
}
.empty-state-card > i[data-lucide],
.empty-state-card > .lucide,
.empty-state-card > svg,
.content-scroll > .d-flex.flex-column.align-items-center.justify-content-center > i[data-lucide],
.content-scroll > .d-flex.flex-column.align-items-center.justify-content-center > .lucide,
.content-scroll > .d-flex.flex-column.align-items-center.justify-content-center > svg {
  width: 44px;
  height: 44px;
  color: var(--accent);
  filter: drop-shadow(0 4px 12px rgba(108, 99, 255, 0.4));
}
.empty-state-card > .fw-bold,
.empty-state-card > h2,
.content-scroll > .d-flex.flex-column.align-items-center.justify-content-center > .fw-bold,
.content-scroll > .d-flex.flex-column.align-items-center.justify-content-center > h2 {
  font-size: 1.5rem;
  color: var(--text);
  font-weight: 800;
  margin: 0;
  letter-spacing: -0.02em;
  position: relative;
  z-index: 1;
}
.empty-state-card > p,
.empty-state-card > .text-muted,
.content-scroll > .d-flex.flex-column.align-items-center.justify-content-center > p,
.content-scroll > .d-flex.flex-column.align-items-center.justify-content-center > .text-muted {
  font-size: 0.92rem;
  color: var(--muted);
  line-height: 1.7;
  max-width: 400px;
  margin: 0;
  font-weight: 500;
  position: relative;
  z-index: 1;
}
.empty-state-card > .btn,
.content-scroll > .d-flex.flex-column.align-items-center.justify-content-center > .btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  margin-top: 10px !important;
  padding: 12px 30px !important;
  font-size: 0.92rem !important;
  font-weight: 700 !important;
  border-radius: 12px !important;
  background: var(--accent) !important;
  color: #fff !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  box-shadow: 0 6px 20px var(--accent-glow) !important;
  cursor: pointer !important;
  position: relative;
  z-index: 1;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
.empty-state-card > .btn:hover,
.content-scroll > .d-flex.flex-column.align-items-center.justify-content-center > .btn:hover {
  background: var(--accent-hover) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 10px 28px var(--accent-glow) !important;
}
.empty-state-card > .btn:active,
.content-scroll > .d-flex.flex-column.align-items-center.justify-content-center > .btn:active {
  transform: translateY(0) !important;
}

.empty-state-icon {
  width: 90px;
  height: 90px;
  border-radius: 26px;
  background: linear-gradient(135deg, rgba(108, 99, 255, 0.16) 0%, rgba(139, 92, 246, 0.05) 100%);
  border: 1.5px solid rgba(108, 99, 255, 0.28);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 4px;
  box-shadow: 0 12px 32px -4px rgba(108, 99, 255, 0.22), inset 0 1px 1px rgba(255, 255, 255, 0.2);
  position: relative;
  z-index: 1;
  transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.empty-state-icon::after {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 32px;
  border: 1px dashed rgba(108, 99, 255, 0.25);
  pointer-events: none;
  animation: spinSlow 25s linear infinite;
}
.empty-state-icon:hover {
  transform: scale(1.06) translateY(-2px);
  box-shadow: 0 16px 40px -4px rgba(108, 99, 255, 0.38);
  border-color: var(--accent);
}
.empty-state-icon svg {
  width: 44px;
  height: 44px;
  filter: drop-shadow(0 4px 12px rgba(108, 99, 255, 0.4));
}

.empty-state-title {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--text);
  margin: 0;
  letter-spacing: -0.02em;
  position: relative;
  z-index: 1;
}

.empty-state-desc {
  font-size: 0.92rem;
  color: var(--muted);
  line-height: 1.7;
  max-width: 400px;
  margin: 0;
  font-weight: 500;
  position: relative;
  z-index: 1;
}

.empty-state {
  padding: 56px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 14px;
  margin: 0 auto;
  max-width: 480px;
}
.empty-state .empty-icon {
  width: 80px;
  height: 80px;
  border-radius: 24px;
  background: linear-gradient(135deg, rgba(108, 99, 255, 0.14) 0%, rgba(139, 92, 246, 0.04) 100%);
  border: 1.5px solid rgba(108, 99, 255, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
  box-shadow: 0 10px 28px -4px rgba(108, 99, 255, 0.2);
  margin-bottom: 4px;
  position: relative;
  transition: all 0.3s ease;
}
.empty-state .empty-icon::after {
  content: "";
  position: absolute;
  inset: -5px;
  border-radius: 29px;
  border: 1px dashed rgba(108, 99, 255, 0.2);
  pointer-events: none;
  animation: spinSlow 25s linear infinite;
}
.empty-state .empty-icon:hover {
  transform: scale(1.05);
  border-color: var(--accent);
}
.empty-state .empty-icon svg, .empty-state .empty-icon .empty-svg {
  width: 38px;
  height: 38px;
  filter: drop-shadow(0 4px 10px rgba(108, 99, 255, 0.35));
}
.empty-state .empty-title {
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--text);
  margin: 0;
  letter-spacing: -0.01em;
}
.empty-state .empty-sub {
  font-size: 0.88rem;
  color: var(--muted);
  line-height: 1.6;
  margin: 0;
}

@keyframes spinSlow {
  100% {
    transform: rotate(360deg);
  }
}
@keyframes emptyCardAppear {
  from {
    opacity: 0;
    transform: translateY(14px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
.items-table {
  width: 100%;
  border-collapse: collapse;
}
.items-table th {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 12px 16px;
  background: var(--surface2);
  border-bottom: 1.5px solid var(--border);
  text-align: start;
}
.items-table th:last-child {
  text-align: end;
}
.items-table td {
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
  font-size: 0.88rem;
  vertical-align: middle;
}
.items-table td:last-child {
  text-align: end;
}
.items-table tbody tr:hover {
  background: rgba(255, 255, 255, 0.015);
}
.items-table tbody tr:last-child td {
  border-bottom: none;
}

.info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px 24px;
}
@media (max-width: 640px) {
  .info-grid {
    grid-template-columns: 1fr;
  }
}

.info-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.info-icon {
  width: 38px;
  height: 38px;
  border-radius: var(--radius-sm);
  background: var(--surface2);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
  flex-shrink: 0;
}
.info-icon svg {
  width: 18px;
  height: 18px;
}

.info-content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  text-align: start;
}

.info-label {
  font-size: 0.76rem;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-bottom: 2px;
}

.info-value-row {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.info-value {
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--text);
  word-break: break-word;
  line-height: 1.4;
  text-align: start;
}
.info-value[dir=ltr] {
  text-align: start !important;
  unicode-bidi: plaintext;
}

.copy-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--accent);
  cursor: pointer;
  padding: 3px 8px;
  border-radius: 6px;
  background: var(--surface2);
  border: 1px solid var(--border);
  transition: all 0.15s ease;
}
.copy-btn:hover {
  background: var(--accent-glow);
  border-color: var(--accent);
  transform: translateY(-1px);
}
.copy-btn svg {
  width: 12px;
  height: 12px;
}

.notes-box {
  background: var(--surface2);
  border: 1.5px dashed var(--border2);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  font-size: 0.88rem;
  color: var(--text);
  line-height: 1.6;
  margin-top: 6px;
}

.card-divider {
  height: 1px;
  background: var(--border);
  margin: 16px 0;
}

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

.item-img {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-sm);
  background: var(--surface2);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
}
.item-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.item-img svg {
  width: 20px;
  height: 20px;
}

.item-name {
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--text);
  line-height: 1.3;
}

.item-vars {
  font-size: 0.75rem;
  color: var(--muted);
  margin-top: 3px;
}

.qty-badge {
  background: var(--surface2);
  color: var(--accent);
  font-weight: 700;
  font-size: 0.82rem;
  padding: 4px 10px;
  border-radius: 6px;
  display: inline-block;
  border: 1px solid var(--border);
}

.summary-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 0;
  font-size: 0.9rem;
  color: var(--muted);
}
.summary-row.discount {
  color: var(--danger);
}
.summary-row.total {
  font-size: 1.15rem;
  font-weight: 900;
  color: var(--text);
  border-top: 1.5px dashed var(--border2);
  margin-top: 8px;
  padding-top: 14px;
}

.coupon-tag {
  background: rgba(239, 68, 68, 0.12);
  color: var(--danger);
  font-size: 0.72rem;
  padding: 2px 6px;
  border-radius: 4px;
  font-weight: 700;
  margin-inline-start: 4px;
}

.payment-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--surface2);
  border: 1px solid var(--border);
  padding: 5px 12px;
  border-radius: 8px;
  font-size: 0.84rem;
  font-weight: 700;
  color: var(--text);
}

.status-changer-card .status-select {
  width: 100%;
  padding: 10px 14px;
  background: var(--surface2);
  border: 1.5px solid var(--border2);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 700;
  outline: none;
  cursor: pointer;
  transition: all 0.2s;
}
.status-changer-card .status-select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-glow);
}

.pending-alert {
  background: rgba(245, 158, 11, 0.08);
  border: 1.5px solid rgba(245, 158, 11, 0.25);
  border-radius: 12px;
  padding: 14px 16px;
  margin-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.pending-alert-text {
  font-size: 0.84rem;
  color: var(--warning);
  font-weight: 600;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  line-height: 1.5;
}
.pending-alert-text svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  margin-top: 2px;
}

.tracking-num {
  font-family: monospace;
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--accent);
}

.font-mono {
  font-family: monospace;
}

.timeline {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding-top: 6px;
}

.tl-item {
  display: flex;
  gap: 14px;
  position: relative;
}

.tl-left {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 18px;
  flex-shrink: 0;
}

.tl-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid var(--border2);
  background: var(--surface3);
  margin-top: 3px;
  flex-shrink: 0;
  transition: all 0.2s;
}
.tl-dot.done {
  background: var(--accent);
  border-color: var(--accent);
}
.tl-dot.cur {
  background: var(--success);
  border-color: var(--success);
  box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.2);
}

.tl-line {
  width: 2px;
  flex: 1;
  background: var(--border);
  min-height: 20px;
  margin: 3px 0;
}
.tl-line.done {
  background: var(--accent);
}

.tl-info {
  padding-bottom: 16px;
  flex: 1;
}

.tl-time {
  font-size: 0.72rem;
  color: var(--muted);
  margin-bottom: 2px;
}

.tl-title {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--text);
}

.tl-note {
  font-size: 0.76rem;
  color: var(--muted);
  background: var(--surface2);
  border: 1px solid var(--border);
  padding: 3px 8px;
  border-radius: 5px;
  margin-top: 4px;
  display: inline-block;
}

.info-item {
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: start;
}
.info-item:nth-child(odd) {
  padding-inline-end: 20px;
  border-inline-end: 1px solid var(--border);
}
.info-item:nth-last-child(-n+2) {
  border-bottom: none;
}
.info-item .info-label {
  font-size: 0.76rem;
  color: var(--muted);
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.info-item .info-value {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text);
  text-align: start;
  width: 100%;
  unicode-bidi: plaintext;
}
.info-item .info-value.mono {
  font-family: monospace;
}
.info-item .info-value.accent {
  color: var(--accent);
}

.order-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 0;
  border-bottom: 1px solid var(--border);
}
.order-item:last-child {
  border-bottom: none;
}

.item-meta {
  font-size: 0.75rem;
  color: var(--muted);
}

.item-price {
  text-align: start;
  flex-shrink: 0;
}

.item-unit {
  font-size: 0.75rem;
  color: var(--muted);
  margin-bottom: 4px;
}

.item-total {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text);
}

.totals {
  border-top: 1px solid var(--border);
  padding-top: 16px;
  margin-top: 4px;
}

.total-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  font-size: 0.88rem;
}
.total-row.big {
  font-size: 1.15rem;
  font-weight: 800;
  padding-top: 12px;
  border-top: 1px solid var(--border);
  margin-top: 8px;
}

.total-label {
  color: var(--muted);
}

.total-value {
  font-weight: 700;
  font-family: monospace;
}

.fee-card {
  background: rgba(245, 158, 11, 0.08);
  border: 1px solid rgba(245, 158, 11, 0.2);
  border-radius: 14px;
  padding: 16px;
  margin-bottom: 12px;
}

.fee-title {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--warning);
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.fee-desc {
  font-size: 0.82rem;
  color: var(--muted);
  margin-bottom: 14px;
  line-height: 1.6;
}

.fee-input-row {
  display: flex;
  gap: 10px;
  align-items: center;
}

.fee-input {
  flex: 1;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 12px;
  color: var(--text);
}

.note-textarea {
  width: 100%;
  min-height: 80px;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 14px;
  color: var(--text);
  font-family: inherit;
  font-size: 0.88rem;
  resize: vertical;
}

.status-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.status-step {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 12px;
  background: var(--surface2);
  border: 1px solid var(--border);
  cursor: pointer;
  transition: all 0.2s ease;
}
.status-step:hover:not(.disabled) {
  border-color: var(--accent);
  background: rgba(108, 99, 255, 0.05);
  transform: translateX(-2px);
}
.status-step.disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.step-dot {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.step-label {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--text);
}

.step-sub {
  font-size: 0.74rem;
  color: var(--muted);
  margin-top: 2px;
}

.contact-btns {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.contact-btn {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-radius: 12px;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.2s;
  border: 1px solid var(--border);
  font-size: 0.88rem;
  font-weight: 600;
  background: var(--surface2);
  color: var(--text);
}
.contact-btn:hover {
  border-color: var(--accent);
  background: rgba(108, 99, 255, 0.05);
  transform: translateX(-2px);
}

/* Print Only & Media Print */
@media screen {
  .print-only {
    display: none !important;
  }
}
@media print {
  @page {
    size: A4;
    margin: 15mm;
  }
  body, html {
    background: #fff !important;
    color: #111 !important;
    font-size: 12pt !important;
  }
  .sidebar, .topbar, .btn-back, .action-buttons, .status-changer-card,
  .modal-overlay, .toast, .no-print, .copy-btn, .pending-alert {
    display: none !important;
  }
  .main-content {
    margin: 0 !important;
    padding: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
    position: static !important;
  }
  .content-scroll {
    overflow: visible !important;
    height: auto !important;
    padding: 0 !important;
  }
  .grid-2 {
    display: block !important;
  }
  .card {
    border: 1px solid #ddd !important;
    box-shadow: none !important;
    background: #fff !important;
    color: #111 !important;
    margin-bottom: 20px !important;
    break-inside: avoid;
    page-break-inside: avoid;
  }
  .card-title {
    color: #111 !important;
    border-bottom: 1px solid #eee !important;
    padding-bottom: 8px !important;
  }
  .items-table {
    width: 100% !important;
    border-collapse: collapse !important;
  }
  .items-table th, .items-table td {
    border-bottom: 1px solid #ddd !important;
    padding: 8px 10px !important;
    color: #111 !important;
  }
  .print-only {
    display: block !important;
  }
  .print-header {
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 2px solid #222;
  }
  .print-header-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
  }
}
/* ── 21. CUSTOMERS MANAGEMENT & CRM CLASSES ──────────────────────────── */
.cust-cell {
  display: flex;
  align-items: center;
  gap: 12px;
}

.avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 0.88rem;
  flex-shrink: 0;
  background: var(--surface2);
  border: 2px solid var(--border);
  color: var(--text);
}

.av-Loyal {
  background: rgba(245, 158, 11, 0.15);
  border-color: rgba(245, 158, 11, 0.4);
  color: #f59e0b;
}

.av-Active {
  background: rgba(59, 130, 246, 0.15);
  border-color: rgba(59, 130, 246, 0.4);
  color: var(--info);
}

.av-Inactive {
  background: rgba(156, 163, 175, 0.15);
  border-color: rgba(156, 163, 175, 0.3);
  color: var(--muted);
}

.cust-name {
  font-weight: 700;
  font-size: 0.88rem;
  color: var(--text);
}

.cust-phone {
  font-size: 0.78rem;
  color: var(--muted);
  direction: ltr;
  display: block;
}

.cust-email {
  font-size: 0.74rem;
  color: var(--muted);
  direction: ltr;
  display: block;
}

.orders-val {
  font-weight: 800;
  font-size: 0.95rem;
  color: var(--text);
}

.orders-label {
  font-size: 0.72rem;
  color: var(--muted);
}

.spent-val {
  font-weight: 800;
  font-size: 0.95rem;
  color: var(--success);
}

.avg-order {
  font-size: 0.72rem;
  color: var(--muted);
  margin-top: 2px;
}

.live-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  margin-inline-end: 6px;
  display: inline-block;
}

.dot-Loyal {
  background: #f59e0b;
  box-shadow: 0 0 6px #f59e0b;
}

.dot-Active {
  background: var(--info);
  box-shadow: 0 0 6px var(--info);
}

.dot-Inactive {
  background: var(--muted);
}

.notes-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 4px 10px;
  font-size: 0.75rem;
  color: var(--muted);
  max-width: 220px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: all 0.15s ease;
}

.notes-chip:hover {
  border-color: var(--accent);
  color: var(--text);
}

.notes-chip.has-note {
  background: var(--surface3);
  color: var(--text);
  border-color: var(--border2);
}

.act-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.act-btn {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-sm);
  background: var(--surface2);
  border: 1px solid var(--border);
  color: var(--text);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.15s ease;
}

.act-btn:hover {
  background: var(--surface3);
  border-color: var(--accent);
  color: var(--accent);
}

.act-btn.wa:hover {
  border-color: var(--success);
  color: var(--success);
  background: rgba(34, 197, 94, 0.1);
}

.order-mini {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all 0.15s ease;
}

.order-mini:hover {
  border-color: var(--accent);
  background: var(--surface2);
}

.order-mini-code {
  font-weight: 700;
  font-size: 0.82rem;
  font-family: monospace;
  color: var(--accent);
}

.order-mini-date {
  font-size: 0.72rem;
  color: var(--muted);
}

.order-mini-amount {
  font-weight: 800;
  font-size: 0.88rem;
  color: var(--text);
}

.notes-textarea {
  width: 100%;
  height: 100px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  color: var(--text);
  font-family: inherit;
  font-size: 0.85rem;
  resize: vertical;
  outline: none;
  transition: border-color 0.2s;
}

.notes-textarea:focus {
  border-color: var(--accent);
}

.notes-textarea:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* ── 22. WALLET, EARNINGS & PAYOUTS CLASSES ────────────────────────── */
.balance-hero {
  background: linear-gradient(135deg, var(--surface) 0%, var(--surface2) 100%);
  border: 1px solid var(--border2);
  border-radius: var(--radius);
  padding: 24px 28px;
  margin-bottom: 20px;
  box-shadow: var(--shadow);
}

.balance-hero-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}

.balance-left {
  flex: 1;
  min-width: 240px;
}

.balance-label {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
}

.balance-amount {
  font-size: 2.2rem;
  font-weight: 900;
  color: var(--text);
  letter-spacing: -0.03em;
  line-height: 1.1;
  margin-bottom: 12px;
}

.balance-sub {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  font-size: 0.8rem;
  color: var(--muted);
}

.balance-sub-item {
  display: flex;
  align-items: center;
  gap: 6px;
}

.balance-sub-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.hold-note {
  font-size: 0.75rem;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 10px;
}

.balance-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
}

.balance-stat {
  text-align: end;
}

.bs-label {
  font-size: 0.72rem;
  color: var(--muted);
}

.bs-val {
  font-weight: 700;
  font-size: 0.95rem;
}

.stat-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.stat-growth {
  font-size: 0.72rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 3px;
  margin-top: 4px;
}

.growth-up {
  color: var(--success);
}

.growth-down {
  color: var(--danger);
}

.tier-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px 24px;
  margin-bottom: 20px;
}

.tier-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

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

.tier-sub {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--muted);
}

.tier-rate-lbl {
  font-size: 0.72rem;
  color: var(--muted);
  text-align: end;
}

.tier-rate {
  font-size: 1.6rem;
  font-weight: 900;
  line-height: 1;
}

.tier-rate span {
  font-size: 0.9rem;
  font-weight: 700;
}

.progress-wrap {
  margin-top: 12px;
}

.progress-labels {
  display: flex;
  justify-content: space-between;
  font-size: 0.75rem;
  color: var(--muted);
  margin-top: 6px;
}

.tier-max {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--warning);
  margin-top: 10px;
}

.section-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  margin-bottom: 20px;
}

.section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
  gap: 12px;
}

.section-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  font-size: 0.95rem;
}

.section-tabs {
  display: flex;
  gap: 4px;
  background: var(--surface2);
  padding: 4px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
}

.tab-btn {
  padding: 6px 14px;
  border-radius: 6px;
  background: transparent;
  border: none;
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  transition: all 0.15s ease;
}

.tab-btn.active {
  background: var(--accent);
  color: #fff;
}

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

.txn-icon {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.txn-label {
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--text);
}

.txn-desc {
  font-size: 0.72rem;
  color: var(--muted);
}

.txn-amount-pos {
  font-weight: 800;
  color: var(--success);
}

.txn-amount-neg {
  font-weight: 800;
  color: var(--danger);
}

.breakdown-row {
  font-size: 0.75rem;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 3px;
}

.br-tier {
  font-weight: 700;
  color: var(--text);
}

.br-val {
  color: var(--accent);
}

.inv-expand {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--accent);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 4px;
}

.method-badge {
  display: flex;
  align-items: center;
  gap: 8px;
}

.method-icon {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
}

.avail-chip {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.avail-label {
  font-size: 0.82rem;
  color: var(--muted);
  font-weight: 600;
}

.avail-val {
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--success);
}

.method-selector {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.method-opt {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.method-opt:hover {
  border-color: var(--border2);
}

.method-opt.selected {
  border-color: var(--accent);
  background: var(--surface2);
  box-shadow: 0 0 0 1px var(--accent);
}

.method-opt-name {
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--text);
}

.method-opt-sub {
  font-size: 0.72rem;
  color: var(--muted);
}

.method-radio {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid var(--border2);
  margin-inline-start: auto;
  transition: all 0.15s ease;
}

.method-opt.selected .method-radio {
  border-color: var(--accent);
  background: var(--accent);
}

.bank-fields {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 14px;
  margin-top: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.btn-success-soft {
  background: rgba(34, 197, 94, 0.12);
  color: var(--success);
  border: 1px solid rgba(34, 197, 94, 0.3);
}

.btn-success-soft:hover {
  background: var(--success);
  color: #fff;
}

/* ── 23. ADVANCED ANALYTICS CLASSES ────────────────────────────────── */
.health-banner {
  background: linear-gradient(135deg, var(--surface) 0%, var(--surface2) 100%);
  border: 1px solid var(--border2);
  border-radius: var(--radius);
  padding: 20px 24px;
  display: flex;
  align-items: center;
  gap: 24px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}

.health-score-ring {
  position: relative;
  width: 80px;
  height: 80px;
  flex-shrink: 0;
}

.ring-bg {
  fill: none;
  stroke: var(--surface3);
  stroke-width: 6;
}

.ring-val {
  fill: none;
  stroke-width: 6;
  stroke-linecap: round;
  transform: rotate(-90deg);
  transform-origin: center;
  transition: stroke-dashoffset 1s ease;
}

.health-score-number {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  font-weight: 900;
}

.health-info {
  flex: 1;
  min-width: 220px;
}

.health-title {
  font-weight: 800;
  font-size: 1rem;
  margin-bottom: 4px;
}

.health-desc {
  font-size: 0.8rem;
  color: var(--muted);
  margin-bottom: 8px;
}

.health-factors {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.health-factor {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 0.75rem;
  font-weight: 700;
}

.health-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
}

.time-tabs {
  display: flex;
  gap: 4px;
  background: var(--surface2);
  padding: 4px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
}

.time-tab {
  padding: 6px 14px;
  border-radius: 6px;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--muted);
  cursor: pointer;
  transition: all 0.15s ease;
}

.time-tab:hover {
  color: var(--text);
}

.time-tab.active {
  background: var(--accent);
  color: #fff;
}

.kpi-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.kpi-title {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--muted);
}

.kpi-icon {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
}

.kpi-val {
  font-size: 1.5rem;
  font-weight: 900;
  color: var(--text);
  margin-bottom: 6px;
}

.kpi-val.sm {
  font-size: 1.25rem;
}

.kpi-trend {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 0.75rem;
  font-weight: 700;
}

.kpi-sparkline {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 24px;
  margin-top: 10px;
}

.spark-bar {
  flex: 1;
  border-radius: 2px 2px 0 0;
  min-height: 2px;
}

.insight-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 4px;
  margin-top: 8px;
}

.insight-tag.good {
  background: rgba(34, 197, 94, 0.12);
  color: var(--success);
}

.insight-tag.warn {
  background: rgba(245, 158, 11, 0.12);
  color: var(--warning);
}

.insight-tag.bad {
  background: rgba(239, 68, 68, 0.12);
  color: var(--danger);
}

.bar-wrapper {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  height: 100%;
}

.bar-group {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  height: 100%;
  width: 100%;
  max-width: 32px;
}

.bar.primary {
  flex: 1;
  background: var(--accent);
  border-radius: 4px 4px 0 0;
  transition: height 0.3s ease;
}

.bar.secondary {
  flex: 1;
  background: var(--teal);
  border-radius: 4px 4px 0 0;
  opacity: 0.7;
  transition: height 0.3s ease;
}

.chart-tooltip {
  position: absolute;
  bottom: calc(100% + 8px);
  background: var(--surface2);
  border: 1px solid var(--border2);
  border-radius: 6px;
  padding: 6px 10px;
  font-size: 0.75rem;
  font-weight: 700;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s;
  z-index: 10;
}

.bar-wrapper:hover .chart-tooltip {
  opacity: 1;
}

.funnel-container {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.funnel-step {
  display: grid;
  grid-template-columns: 100px 1fr 60px 50px;
  align-items: center;
  gap: 12px;
  font-size: 0.82rem;
}

.funnel-label {
  font-weight: 700;
  color: var(--text);
}

.funnel-bar-wrap {
  height: 28px;
  background: var(--surface2);
  border-radius: 6px;
  overflow: hidden;
}

.funnel-bar-fill {
  height: 100%;
  display: flex;
  align-items: center;
  padding-inline-start: 10px;
  color: #fff;
  font-weight: 800;
  font-size: 0.75rem;
  border-radius: 6px;
  transition: width 0.4s ease;
}

.funnel-count {
  font-weight: 800;
  text-align: end;
}

.funnel-drop {
  font-size: 0.72rem;
  color: var(--danger);
  font-weight: 700;
  text-align: end;
}

.donut-wrap {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}

.donut-svg-wrap {
  position: relative;
  width: 130px;
  height: 130px;
  flex-shrink: 0;
}

.donut-center {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.donut-center-val {
  font-size: 1.3rem;
  font-weight: 900;
}

.donut-center-label {
  font-size: 0.7rem;
  color: var(--muted);
}

.status-list {
  flex: 1;
  min-width: 180px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.status-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.78rem;
}

.status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.status-name {
  width: 80px;
  font-weight: 600;
}

.status-bar-wrap {
  flex: 1;
  height: 6px;
  background: var(--surface2);
  border-radius: 3px;
  overflow: hidden;
}

.status-bar-fill {
  height: 100%;
  border-radius: 3px;
}

.status-count {
  width: 32px;
  font-weight: 700;
  text-align: end;
}

.status-pct {
  width: 32px;
  color: var(--muted);
  text-align: end;
}

.device-stats {
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding: 16px 0;
}

.device-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  opacity: 0.6;
  transition: opacity 0.2s;
}

.device-item.active {
  opacity: 1;
}

.device-icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--surface2);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
}

.device-pct {
  font-size: 1.2rem;
  font-weight: 900;
}

.device-label {
  font-size: 0.75rem;
  color: var(--muted);
  font-weight: 600;
}

.device-divider {
  width: 1px;
  height: 40px;
  background: var(--border);
}

.heatmap-hour-labels {
  display: grid;
  grid-template-columns: 40px repeat(24, 1fr);
  gap: 2px;
  margin-bottom: 4px;
  font-size: 0.65rem;
  color: var(--muted);
  text-align: center;
}

.heatmap-grid {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.heatmap-row {
  display: grid;
  grid-template-columns: 40px repeat(24, 1fr);
  gap: 2px;
  align-items: center;
}

.heatmap-day-label {
  font-size: 0.7rem;
  color: var(--muted);
  font-weight: 700;
}

.heatmap-cells {
  display: contents;
}

.heatmap-cell {
  height: 18px;
  border-radius: 2px;
  cursor: pointer;
  transition: transform 0.1s;
}

.heatmap-cell:hover {
  transform: scale(1.2);
  z-index: 2;
}

.rank-badge {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.72rem;
  font-weight: 900;
}

.rank-1 {
  background: #f59e0b;
  color: #fff;
}

.rank-2 {
  background: #94a3b8;
  color: #fff;
}

.rank-3 {
  background: #b45309;
  color: #fff;
}

.rank-other {
  background: var(--surface2);
  color: var(--muted);
}

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

.prod-img {
  width: 36px;
  height: 36px;
  border-radius: 6px;
  object-fit: cover;
  background: var(--surface2);
}

.plan-hero {
  background: linear-gradient(135deg, #1a1036, #0f1a2e, #0a1220);
  border: 1px solid rgba(108, 99, 255, 0.2);
  border-radius: 18px;
  padding: 26px 30px;
  margin-bottom: 28px;
  position: relative;
  overflow: hidden;
}
[data-theme=light] .plan-hero {
  background: linear-gradient(135deg, #e8e4ff, #e0eeff);
}
.plan-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 80% 0%, rgba(108, 99, 255, 0.15) 0%, transparent 60%);
  pointer-events: none;
}

.plan-hero-inner {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}

.plan-hero-eyebrow {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 7px;
}

.plan-hero-name {
  font-size: 1.8rem;
  font-weight: 900;
  letter-spacing: -0.03em;
  background: linear-gradient(135deg, #a78bfa, #6c63ff, #38bdf8);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.plan-hero-meta {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 10px;
  flex-wrap: wrap;
}

.plan-hero-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 11px;
  border-radius: 20px;
  font-size: 0.78rem;
  font-weight: 700;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
}
[data-theme=light] .plan-hero-chip {
  background: rgba(0, 0, 0, 0.05);
  border-color: rgba(0, 0, 0, 0.08);
}

.plan-hero-right {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-end;
}

.expires-chip {
  font-size: 0.78rem;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 5px;
}
.expires-chip.soon {
  color: var(--warning);
}

.usage-section {
  margin-top: 20px;
}

.usage-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
}

.usage-item {
  background: rgba(255, 255, 255, 0.04);
  border-radius: 10px;
  padding: 13px 16px;
}
[data-theme=light] .usage-item {
  background: rgba(0, 0, 0, 0.04);
}

.usage-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.usage-label {
  font-size: 0.8rem;
  color: var(--muted);
  font-weight: 600;
}

.usage-count {
  font-size: 0.82rem;
  font-weight: 800;
}

.usage-bar {
  height: 6px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 4px;
  overflow: hidden;
}
[data-theme=light] .usage-bar {
  background: rgba(0, 0, 0, 0.08);
}

.usage-fill {
  height: 100%;
  border-radius: 4px;
  transition: width 0.8s ease;
}

.usage-hint {
  font-size: 0.73rem;
  color: var(--muted);
  margin-top: 5px;
}

.over-limit {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 0.75rem;
  color: var(--danger);
  font-weight: 700;
  margin-top: 6px;
}

.cycle-toggle {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
  margin-bottom: 36px;
}

.cycle-label {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--muted);
  transition: color 0.2s;
}
.cycle-label.active {
  color: var(--text);
}

.toggle-track {
  position: relative;
  width: 52px;
  height: 28px;
  background: var(--surface3);
  border-radius: 14px;
  cursor: pointer;
  transition: background 0.3s;
  border: 1.5px solid var(--border);
}
.toggle-track.on {
  background: var(--accent);
}
.toggle-track.on .toggle-thumb {
  transform: translateX(24px);
}

html[dir=rtl] .toggle-track.on .toggle-thumb {
  transform: translateX(-24px);
}

.toggle-thumb {
  position: absolute;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  top: 3px;
  left: 3px;
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}

html[dir=rtl] .toggle-thumb {
  left: auto;
  right: 3px;
}

.save-pill {
  background: rgba(34, 197, 94, 0.12);
  color: var(--success);
  border: 1px solid rgba(34, 197, 94, 0.2);
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 0.75rem;
  font-weight: 800;
}

.pricing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
  margin-bottom: 52px;
}

.plan-card {
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: 18px;
  padding: 28px;
  display: flex;
  flex-direction: column;
  position: relative;
  transition: all 0.3s;
}
.plan-card:hover {
  border-color: var(--border-hover);
  box-shadow: var(--shadow);
}
.plan-card.popular {
  border-color: var(--accent);
  background: linear-gradient(160deg, rgba(108, 99, 255, 0.05) 0%, var(--surface) 60%);
  transform: scale(1.02);
  z-index: 2;
  box-shadow: 0 0 0 1px var(--accent), var(--shadow);
}
.plan-card.is-current {
  border-color: rgba(34, 197, 94, 0.3);
  background: linear-gradient(160deg, rgba(34, 197, 94, 0.04) 0%, var(--surface) 60%);
}

.popular-tag {
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--accent);
  color: #fff;
  padding: 5px 16px;
  border-radius: 20px;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.plan-icon {
  width: 46px;
  height: 46px;
  border-radius: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
  font-size: 1.3rem;
}

.plan-name-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}

.plan-name {
  font-size: 1.2rem;
  font-weight: 800;
}

.current-badge {
  background: rgba(34, 197, 94, 0.1);
  color: var(--success);
  border: 1px solid rgba(34, 197, 94, 0.25);
  padding: 3px 8px;
  border-radius: 5px;
  font-size: 0.7rem;
  font-weight: 800;
}

.plan-desc {
  font-size: 0.82rem;
  color: var(--muted);
  margin-bottom: 18px;
  line-height: 1.5;
}

.plan-price-row {
  display: flex;
  align-items: baseline;
  gap: 5px;
  margin-bottom: 6px;
}

.plan-price {
  font-size: 2rem;
  font-weight: 900;
  letter-spacing: -0.04em;
}

.plan-price-period {
  font-size: 0.88rem;
  color: var(--muted);
  font-weight: 500;
}

.plan-yearly-note {
  font-size: 0.75rem;
  color: var(--muted);
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 4px;
}

.plan-commission {
  font-size: 0.8rem;
  font-weight: 700;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 11px;
  background: var(--surface2);
  border-radius: 8px;
}

.plan-features {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 22px;
}

.plan-feat {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-size: 0.85rem;
}

.feat-check {
  width: 18px;
  height: 18px;
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 1px;
}
.feat-check.yes {
  background: rgba(34, 197, 94, 0.12);
  color: var(--success);
}
.feat-check.no {
  background: var(--surface3);
  color: var(--muted);
}

.feat-text {
  color: var(--text);
}
.feat-text.muted {
  color: var(--muted);
}

.plan-cta {
  padding: 11px;
  border-radius: 11px;
  font-weight: 800;
  font-family: inherit;
  font-size: 0.9rem;
  cursor: pointer;
  border: none;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
}
.plan-cta:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  transform: none;
}

.cta-upgrade {
  background: var(--accent);
  color: #fff;
  box-shadow: 0 2px 12px var(--accent-glow);
}
.cta-upgrade:hover {
  background: var(--accent-hover);
  transform: translateY(-1px);
}

.cta-current {
  background: var(--surface2);
  color: var(--muted);
  border: 1.5px solid var(--border);
  cursor: default;
}

.cta-free {
  background: rgba(34, 197, 94, 0.1);
  color: var(--success);
  border: 1px solid rgba(34, 197, 94, 0.2);
}
.cta-free:hover {
  background: var(--success);
  color: #fff;
}

.cta-downgrade {
  background: var(--surface2);
  color: var(--text);
  border: 1.5px solid var(--border);
}
.cta-downgrade:hover {
  background: var(--surface3);
}

.comparison-section {
  margin-bottom: 52px;
}

.section-heading {
  font-size: 1.35rem;
  font-weight: 800;
  text-align: center;
  margin-bottom: 22px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.section-heading-sub {
  font-size: 0.88rem;
  color: var(--muted);
  font-weight: 500;
}

.cmp-current {
  background: rgba(108, 99, 255, 0.06);
}
.cmp-current td {
  color: var(--accent);
}

.check-yes {
  color: var(--success);
}

.check-no {
  opacity: 0.3;
}

.history-section {
  margin-bottom: 40px;
}

.history-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.history-title {
  font-size: 1.05rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  gap: 8px;
}

.history-table-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
}

.st-Paid {
  background: rgba(34, 197, 94, 0.1);
  color: var(--success);
}

.st-Pending {
  background: rgba(245, 158, 11, 0.1);
  color: var(--warning);
}

.st-Cancelled {
  background: rgba(239, 68, 68, 0.1);
  color: var(--danger);
}

.dl-btn {
  width: 28px;
  height: 28px;
  border-radius: 7px;
  border: 1.5px solid var(--border);
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}
.dl-btn:hover {
  background: var(--surface2);
  color: var(--text);
}

.confirm-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(6px);
  z-index: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.confirm-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 18px;
  width: 100%;
  max-width: 420px;
  box-shadow: var(--shadow);
  animation: modal-in 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.confirm-header {
  padding: 20px 24px;
  border-bottom: 1px solid var(--border);
}

.confirm-title {
  font-size: 1rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  gap: 8px;
}

.confirm-body {
  padding: 20px 24px;
}

.confirm-plan-preview {
  background: var(--surface2);
  border: 1.5px solid var(--border);
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 14px;
}

.confirm-plan-name {
  font-size: 1.1rem;
  font-weight: 800;
  margin-bottom: 4px;
}

.confirm-plan-price {
  font-size: 1.5rem;
  font-weight: 900;
  color: var(--accent);
}

.confirm-wallet {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 14px;
  background: var(--surface2);
  border-radius: 9px;
  margin-bottom: 14px;
  font-size: 0.85rem;
}

.confirm-warn {
  font-size: 0.82rem;
  color: var(--muted);
  line-height: 1.6;
}

.confirm-promo {
  margin-top: 12px;
}

.promo-input {
  display: flex;
  gap: 8px;
}
.promo-input input {
  flex: 1;
  padding: 9px 12px;
  background: var(--input-bg);
  border: 1.5px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  font-family: inherit;
  font-size: 0.85rem;
  outline: none;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.promo-input input:focus {
  border-color: var(--accent);
}

.promo-ok {
  font-size: 0.78rem;
  color: var(--success);
  margin-top: 5px;
  display: flex;
  align-items: center;
  gap: 4px;
}

.confirm-footer {
  padding: 16px 24px;
  border-top: 1px solid var(--border);
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}

.controls-bar {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 14px 18px;
  margin-bottom: 18px;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
}

.date-input {
  padding: 9px 13px;
  background: var(--surface2);
  border: 1.5px solid var(--border);
  border-radius: 9px;
  color: var(--text);
  font-family: inherit;
  font-size: 0.88rem;
  outline: none;
  transition: border-color 0.2s;
}
.date-input:focus {
  border-color: var(--accent);
}
.date-input::-webkit-calendar-picker-indicator {
  cursor: pointer;
  opacity: 0.7;
}

.view-toggle {
  display: flex;
  background: var(--surface2);
  border-radius: 9px;
  padding: 3px;
  gap: 3px;
  border: 1.5px solid var(--border);
  margin-inline-start: auto;
}

.vbtn {
  padding: 7px 14px;
  border-radius: 7px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 700;
  transition: all 0.2s;
}
.vbtn.active {
  background: var(--surface);
  color: var(--text);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
}

.filter-sel {
  padding: 9px 13px;
  background: var(--surface2);
  border: 1.5px solid var(--border);
  border-radius: 9px;
  color: var(--text);
  font-family: inherit;
  font-size: 0.88rem;
  outline: none;
  cursor: pointer;
  min-width: 130px;
}

.agenda-wrap {
  max-width: 860px;
}

.agenda-group {
  margin-bottom: 28px;
}

.agenda-date-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  padding: 8px 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 11px;
  position: sticky;
  top: 0;
  z-index: 5;
}

.agenda-date-label {
  font-size: 0.92rem;
  font-weight: 800;
  color: var(--accent);
}

.agenda-date-count {
  font-size: 0.75rem;
  color: var(--muted);
  background: var(--surface2);
  padding: 2px 8px;
  border-radius: 5px;
}

.agenda-today-chip {
  font-size: 0.72rem;
  font-weight: 800;
  background: rgba(34, 197, 94, 0.1);
  color: var(--success);
  border: 1px solid rgba(34, 197, 94, 0.2);
  padding: 2px 8px;
  border-radius: 20px;
}

.timeline-item {
  display: flex;
  gap: 14px;
  margin-bottom: 14px;
  position: relative;
}

.tl-time {
  width: 65px;
  flex-shrink: 0;
  text-align: end;
  font-weight: 700;
  color: var(--text);
  padding-top: 18px;
  font-size: 0.9rem;
  direction: ltr;
  line-height: 1.2;
}
.tl-time .tl-duration {
  font-size: 0.68rem;
  color: var(--muted);
  font-weight: 400;
  display: block;
  margin-top: 2px;
}

html[dir=ltr] .tl-time {
  text-align: start;
}

.tl-line {
  width: 2px;
  background: var(--surface3);
  position: relative;
  flex-shrink: 0;
  display: flex;
  justify-content: center;
}

.tl-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--surface);
  border: 2.5px solid var(--muted);
  position: absolute;
  top: 18px;
  z-index: 1;
}
.tl-dot.Pending {
  border-color: #f59e0b;
  background: rgba(245, 158, 11, 0.15);
}
.tl-dot.Confirmed {
  border-color: #3b82f6;
  background: #3b82f6;
}
.tl-dot.Completed {
  border-color: #22c55e;
  background: #22c55e;
}
.tl-dot.Cancelled {
  border-color: #ef4444;
  background: rgba(239, 68, 68, 0.2);
}

.bk-card {
  flex: 1;
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: 13px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 11px;
  transition: all 0.2s;
  cursor: pointer;
}
.bk-card:hover {
  border-color: var(--border-hover);
  box-shadow: var(--shadow);
  transform: translateY(-1px);
}
.bk-card.status-Cancelled {
  opacity: 0.65;
}

.bk-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

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

.bk-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 0.95rem;
  flex-shrink: 0;
}
.bk-avatar.Completed {
  background: var(--success);
}
.bk-avatar.Cancelled {
  background: var(--surface3);
  color: var(--muted);
}

.bk-name {
  font-weight: 700;
  font-size: 0.9rem;
}

.bk-phone {
  font-size: 0.76rem;
  color: var(--muted);
  direction: ltr;
  display: block;
  margin-top: 2px;
}

.bk-service {
  font-size: 0.78rem;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 4px;
}

.bk-price {
  font-weight: 800;
  font-size: 0.9rem;
  color: var(--success);
  white-space: nowrap;
}

.bk-notes {
  font-size: 0.78rem;
  color: var(--muted);
  background: var(--surface2);
  border-radius: 7px;
  padding: 7px 10px;
  line-height: 1.5;
  border: 1px solid var(--border);
}

.bk-custom-fields {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.bk-cf-chip {
  font-size: 0.72rem;
  padding: 2px 7px;
  background: var(--surface3);
  border-radius: 5px;
  color: var(--muted);
}

.bk-actions {
  display: flex;
  gap: 7px;
  justify-content: flex-end;
  border-top: 1px solid var(--border);
  padding-top: 10px;
}

.act-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 12px;
  border-radius: 8px;
  border: 1.5px solid var(--border);
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font-size: 0.78rem;
  font-weight: 700;
  font-family: inherit;
  transition: all 0.2s;
}
.act-btn:hover {
  background: var(--surface2);
  color: var(--text);
}
.act-btn.wa:hover {
  background: rgba(37, 211, 102, 0.1);
  color: #25d366;
  border-color: rgba(37, 211, 102, 0.25);
}
.act-btn.confirm:hover {
  background: rgba(59, 130, 246, 0.1);
  color: var(--info);
  border-color: rgba(59, 130, 246, 0.2);
}
.act-btn.complete:hover {
  background: rgba(34, 197, 94, 0.1);
  color: var(--success);
  border-color: rgba(34, 197, 94, 0.2);
}
.act-btn.cancel:hover {
  background: rgba(239, 68, 68, 0.1);
  color: var(--danger);
  border-color: rgba(239, 68, 68, 0.2);
}

.seller-note-input {
  width: 100%;
  padding: 10px 14px;
  background: var(--input-bg);
  border: 1.5px solid var(--border);
  border-radius: 9px;
  color: var(--text);
  font-family: inherit;
  font-size: 0.88rem;
  outline: none;
  resize: vertical;
  min-height: 80px;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.seller-note-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-glow);
}
.seller-note-input::placeholder {
  color: var(--muted);
}

.promos-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 16px;
  margin-bottom: 20px;
}

.promo-card {
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  transition: all 0.2s;
  position: relative;
}
.promo-card:hover {
  border-color: var(--border-hover);
  box-shadow: var(--shadow);
  transform: translateY(-1px);
}
.promo-card.card-active {
  border-color: rgba(34, 197, 94, 0.25);
}
.promo-card.card-scheduled {
  border-color: rgba(59, 130, 246, 0.2);
}
.promo-card.card-expired {
  border-color: rgba(239, 68, 68, 0.15);
  opacity: 0.75;
}
.promo-card.card-inactive {
  opacity: 0.65;
}

.pc-accent {
  height: 3px;
  width: 100%;
}

.pc-head {
  padding: 14px 16px 0;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.pc-code {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 6px 12px;
  background: rgba(108, 99, 255, 0.1);
  border: 1.5px dashed rgba(108, 99, 255, 0.4);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s;
  flex-shrink: 0;
}
.pc-code:hover {
  background: rgba(108, 99, 255, 0.18);
}

.pc-code-text {
  font-family: monospace;
  font-weight: 900;
  font-size: 1rem;
  letter-spacing: 0.08em;
  color: var(--accent);
}

.pc-name {
  font-weight: 700;
  font-size: 0.9rem;
  line-height: 1.4;
}

.pc-body {
  padding: 12px 16px;
}

.pc-value {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}

.pc-value-badge {
  font-size: 1.3rem;
  font-weight: 900;
  letter-spacing: -0.02em;
}

.pc-type-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 9px;
  border-radius: 5px;
  font-size: 0.72rem;
  font-weight: 700;
  background: var(--surface3);
  color: var(--muted);
}

.pc-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px;
}

.pc-meta-item {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 0.75rem;
  color: var(--muted);
}

.pc-progress-wrap {
  margin-bottom: 10px;
}

.pc-progress-labels {
  display: flex;
  justify-content: space-between;
  font-size: 0.73rem;
  color: var(--muted);
  margin-bottom: 4px;
}

.pc-progress-track {
  height: 5px;
  background: var(--surface3);
  border-radius: 3px;
  overflow: hidden;
}

.pc-progress-fill {
  height: 100%;
  border-radius: 3px;
  transition: width 0.4s ease;
}

.pc-footer {
  padding: 10px 16px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid var(--border);
}

.pc-actions {
  display: flex;
  gap: 6px;
}

.pc-act-btn {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  border: 1.5px solid var(--border);
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}
.pc-act-btn:hover {
  background: var(--surface2);
  color: var(--text);
}
.pc-act-btn.edit:hover {
  background: rgba(108, 99, 255, 0.1);
  color: var(--accent);
  border-color: rgba(108, 99, 255, 0.25);
}
.pc-act-btn.delete:hover {
  background: rgba(239, 68, 68, 0.1);
  color: var(--danger);
  border-color: rgba(239, 68, 68, 0.2);
}
.pc-act-btn.coupons:hover {
  background: rgba(20, 184, 166, 0.1);
  color: #14b8a6;
  border-color: rgba(20, 184, 166, 0.2);
}

.live-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}

.dot-active {
  background: #22c55e;
  animation: blink 2s ease-in-out infinite;
}

.dot-scheduled {
  background: #3b82f6;
}

.dot-expired {
  background: #ef4444;
}

.dot-inactive {
  background: var(--muted);
}

.countdown-row {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--warning);
}

.type-selector {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 9px;
}

.type-opt {
  border: 1.5px solid var(--border);
  border-radius: 11px;
  padding: 12px 14px;
  cursor: pointer;
  transition: all 0.2s;
  background: var(--surface2);
}
.type-opt:hover {
  border-color: var(--accent);
}
.type-opt.selected {
  border-color: var(--accent);
  background: rgba(108, 99, 255, 0.07);
}

.type-opt-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}

.type-opt-icon {
  width: 28px;
  height: 28px;
  border-radius: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.type-opt-name {
  font-size: 0.87rem;
  font-weight: 800;
}

.type-opt-desc {
  font-size: 0.73rem;
  color: var(--muted);
  line-height: 1.4;
}

.scope-selector {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.scope-opt {
  padding: 8px 14px;
  border: 1.5px solid var(--border);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s;
  font-size: 0.83rem;
  font-weight: 700;
  background: var(--surface2);
}
.scope-opt:hover {
  border-color: var(--accent);
}
.scope-opt.selected {
  border-color: var(--accent);
  background: rgba(108, 99, 255, 0.07);
  color: var(--accent);
}

.value-section {
  background: var(--surface2);
  border: 1.5px solid rgba(108, 99, 255, 0.2);
  border-radius: 11px;
  padding: 16px;
  margin-bottom: 16px;
}

.vs-title {
  font-size: 0.78rem;
  font-weight: 800;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 12px;
}

.switch-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  background: var(--surface2);
  border: 1.5px solid var(--border);
  border-radius: 10px;
  margin-bottom: 16px;
}

.sw-label {
  font-weight: 700;
  font-size: 0.88rem;
}

.sw-hint {
  font-size: 0.75rem;
  color: var(--muted);
  margin-top: 2px;
}

.code-gen-row {
  display: flex;
  gap: 8px;
}
.code-gen-row .form-control {
  font-family: monospace;
  font-weight: 800;
  letter-spacing: 0.1em;
  color: var(--accent);
  font-size: 1rem;
}

.coupon-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 13px;
  background: var(--surface2);
  border-radius: 9px;
  margin-bottom: 7px;
  border: 1px solid var(--border);
}

.coupon-code-badge {
  font-family: monospace;
  font-weight: 800;
  color: var(--accent);
  background: rgba(108, 99, 255, 0.1);
  padding: 4px 10px;
  border-radius: 6px;
  border: 1px dashed rgba(108, 99, 255, 0.3);
  font-size: 0.88rem;
}

.coupon-meta {
  flex: 1;
  font-size: 0.78rem;
  color: var(--muted);
}

.coupon-del {
  width: 26px;
  height: 26px;
  border-radius: 6px;
  border: 1.5px solid var(--border);
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}
.coupon-del:hover {
  background: rgba(239, 68, 68, 0.1);
  color: var(--danger);
}

.alert-banner {
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.1), rgba(245, 158, 11, 0.06));
  border: 1.5px solid rgba(239, 68, 68, 0.25);
  border-radius: 13px;
  padding: 14px 18px;
  margin-bottom: 18px;
  display: flex;
  align-items: center;
  gap: 14px;
  cursor: pointer;
  transition: all 0.2s;
}
.alert-banner:hover {
  border-color: rgba(239, 68, 68, 0.4);
}

.alert-count {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(239, 68, 68, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 1.1rem;
  color: var(--danger);
  flex-shrink: 0;
}

.alert-info {
  flex: 1;
}

.alert-title {
  font-size: 0.9rem;
  font-weight: 800;
  color: var(--danger);
}

.alert-sub {
  font-size: 0.8rem;
  color: var(--muted);
  margin-top: 3px;
}

.alert-chip {
  font-size: 0.75rem;
  font-weight: 700;
  background: rgba(239, 68, 68, 0.12);
  color: var(--danger);
  padding: 3px 9px;
  border-radius: 5px;
  white-space: nowrap;
  align-self: center;
}

.row-soon td {
  background: rgba(239, 68, 68, 0.03);
}

.cust-name {
  font-weight: 700;
  font-size: 0.9rem;
}

.cust-phone {
  font-size: 0.78rem;
  color: var(--muted);
  direction: ltr;
  display: block;
  margin-top: 2px;
}

.cust-email {
  font-size: 0.75rem;
  color: var(--muted);
  display: block;
  margin-top: 1px;
}

.plan-name {
  font-weight: 700;
  font-size: 0.88rem;
}

.period-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--surface3);
  color: var(--muted);
  padding: 2px 8px;
  border-radius: 5px;
  font-size: 0.72rem;
  font-weight: 700;
  margin-top: 4px;
}

.auto-renew-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--success);
  display: inline-block;
  margin-inline-end: 4px;
}

.amount-val {
  font-weight: 800;
  font-size: 0.95rem;
}

.renewal-count {
  font-size: 0.75rem;
  color: var(--muted);
  margin-top: 2px;
  display: flex;
  align-items: center;
  gap: 3px;
}

.renewal-date {
  font-weight: 600;
  font-size: 0.88rem;
}

.renewal-soon {
  color: var(--danger);
  font-size: 0.75rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 3px;
  margin-top: 3px;
  animation: pulse-warn 2s infinite;
}

.renewal-ok {
  color: var(--muted);
  font-size: 0.75rem;
  margin-top: 3px;
}

.st-soon {
  background: rgba(239, 68, 68, 0.12);
  color: #ef4444;
  border: 1px solid rgba(239, 68, 68, 0.25);
}

.st-cancelled {
  background: rgba(156, 163, 175, 0.1);
  color: #9ca3af;
}

.dot-soon {
  background: #ef4444;
  animation: blink 0.8s ease-in-out infinite;
}

.dot-off {
  background: #9ca3af;
}

.renewal-timeline {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.rt-step {
  display: flex;
  gap: 11px;
}

.rt-left {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 18px;
  flex-shrink: 0;
}

.rt-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid var(--border);
  background: var(--surface3);
  margin-top: 3px;
  flex-shrink: 0;
}

.rt-dot.done {
  background: var(--accent);
  border-color: var(--accent);
}

.rt-dot.latest {
  background: var(--success);
  border-color: var(--success);
  box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.2);
}

.rt-line {
  width: 2px;
  flex: 1;
  background: var(--border);
  min-height: 16px;
  margin: 3px 0;
}

.rt-line.done {
  background: var(--accent);
}

.rt-info {
  padding-bottom: 14px;
  flex: 1;
}

.rt-label {
  font-size: 0.85rem;
  font-weight: 700;
}

.rt-time {
  font-size: 0.75rem;
  color: var(--muted);
  margin-top: 2px;
}

.rt-amount {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--success);
  margin-top: 2px;
}

.prod-selector {
  display: flex;
  flex-direction: column;
  gap: 7px;
  max-height: 220px;
  overflow-y: auto;
}

.prod-option {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 11px 13px;
  border: 1.5px solid var(--border);
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.2s;
  background: var(--surface2);
}

.prod-option:hover {
  border-color: var(--accent);
}

.prod-option.selected {
  border-color: var(--accent);
  background: rgba(108, 99, 255, 0.07);
}

.prod-option-name {
  font-weight: 700;
  font-size: 0.88rem;
  flex: 1;
}

.prod-option-price {
  font-size: 0.85rem;
  font-weight: 800;
  color: var(--accent);
}

.roles-legend {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 18px 22px;
  margin-bottom: 22px;
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
}

.legend-title {
  font-size: 0.78rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  margin-inline-end: 8px;
}

.role-chip {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 0.82rem;
  font-weight: 700;
  border: 1.5px solid;
}

.table-head-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
  gap: 10px;
}

.table-head-title {
  font-size: 0.95rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 8px;
}

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

.avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 0.95rem;
  flex-shrink: 0;
  background: linear-gradient(135deg, var(--accent), #a78bfa);
  color: #fff;
  border: 2px solid rgba(255, 255, 255, 0.15);
}
.avatar.pending-av {
  background: linear-gradient(135deg, #374151, #4b5563);
  color: #9ca3af;
}
.avatar img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}

.member-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.member-name {
  font-weight: 700;
  font-size: 0.9rem;
}
.member-name.pending {
  color: var(--muted);
  font-style: italic;
}

.member-email {
  font-size: 0.78rem;
  color: var(--muted);
  direction: ltr;
}

.role-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 11px;
  border-radius: 20px;
  font-size: 0.78rem;
  font-weight: 800;
  border: 1.5px solid;
}

.rb-Admin {
  background: rgba(239, 68, 68, 0.1);
  color: #ef4444;
  border-color: rgba(239, 68, 68, 0.25);
}

.rb-Manager {
  background: rgba(108, 99, 255, 0.1);
  color: var(--accent);
  border-color: rgba(108, 99, 255, 0.25);
}

.rb-Sales {
  background: rgba(34, 197, 94, 0.1);
  color: #22c55e;
  border-color: rgba(34, 197, 94, 0.25);
}

.rb-Support {
  background: rgba(59, 130, 246, 0.1);
  color: #3b82f6;
  border-color: rgba(59, 130, 246, 0.25);
}

.perm-list {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.perm-chip {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  background: var(--surface3);
  padding: 3px 8px;
  border-radius: 5px;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--muted);
}
.perm-chip svg {
  width: 10px;
  height: 10px;
  color: var(--accent);
}

.st-pending-inv {
  background: rgba(245, 158, 11, 0.1);
  color: #f59e0b;
}

.dot-pending {
  background: #f59e0b;
}

.role-selector {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-top: 6px;
}

.role-option {
  border: 2px solid var(--border);
  border-radius: 12px;
  padding: 14px;
  cursor: pointer;
  transition: all 0.2s;
  background: var(--surface2);
}
.role-option:hover {
  border-color: var(--accent);
}
.role-option.selected {
  border-color: var(--accent);
  background: rgba(108, 99, 255, 0.07);
}

.role-option-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 5px;
}

.role-option-icon {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.role-option-name {
  font-size: 0.9rem;
  font-weight: 800;
}

.role-option-desc {
  font-size: 0.75rem;
  color: var(--muted);
  line-height: 1.5;
}

.perm-matrix {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 8px;
}

.perm-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 14px;
  border-radius: 10px;
  border: 1.5px solid var(--border);
  background: var(--surface2);
  cursor: pointer;
  transition: all 0.2s;
}
.perm-row:hover {
  border-color: var(--border-hover);
}
.perm-row.checked {
  border-color: var(--accent);
  background: rgba(108, 99, 255, 0.06);
}

.perm-cb {
  width: 18px;
  height: 18px;
  accent-color: var(--accent);
  cursor: pointer;
  flex-shrink: 0;
}

.perm-row-ic {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.perm-row-info {
  flex: 1;
}

.perm-row-name {
  font-size: 0.87rem;
  font-weight: 700;
}

.perm-row-desc {
  font-size: 0.75rem;
  color: var(--muted);
  margin-top: 2px;
}

.invite-link-box {
  background: var(--surface2);
  border: 1.5px solid var(--border);
  border-radius: 10px;
  padding: 12px 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
}

.invite-link-url {
  flex: 1;
  font-size: 0.78rem;
  color: var(--muted);
  font-family: monospace;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  direction: ltr;
}

.rating-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 18px 22px;
  margin-bottom: 20px;
  display: flex;
  gap: 28px;
  flex-wrap: wrap;
  align-items: center;
}

.big-rating {
  text-align: center;
  min-width: 100px;
}

.big-num {
  font-size: 3rem;
  font-weight: 900;
  letter-spacing: -0.04em;
  color: var(--warning);
}

.big-stars {
  display: flex;
  gap: 3px;
  justify-content: center;
  margin: 5px 0;
}

.big-count {
  font-size: 0.78rem;
  color: var(--muted);
}

.rating-bars {
  flex: 1;
  min-width: 200px;
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.rbar-row {
  display: flex;
  align-items: center;
  gap: 9px;
}

.rbar-label {
  font-size: 0.78rem;
  font-weight: 700;
  width: 18px;
  text-align: end;
  flex-shrink: 0;
  color: var(--muted);
}

.rbar-track {
  flex: 1;
  height: 8px;
  background: var(--surface3);
  border-radius: 4px;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.2s;
}
.rbar-track:hover {
  background: var(--surface2);
}

.rbar-fill {
  height: 100%;
  border-radius: 4px;
  transition: width 0.5s ease;
}

.rbar-count {
  font-size: 0.76rem;
  color: var(--muted);
  width: 24px;
  text-align: start;
  flex-shrink: 0;
}

.star-pills {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.star-pill {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 5px 11px;
  border-radius: 20px;
  border: 1.5px solid var(--border);
  background: var(--surface2);
  cursor: pointer;
  transition: all 0.2s;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--muted);
}
.star-pill:hover {
  border-color: var(--warning);
  color: var(--warning);
}
.star-pill.active {
  background: rgba(245, 158, 11, 0.1);
  border-color: rgba(245, 158, 11, 0.3);
  color: var(--warning);
}

.reviews-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.review-card {
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: 14px;
  padding: 18px 20px;
  transition: all 0.2s;
  position: relative;
}
.review-card:hover {
  border-color: var(--border-hover);
  box-shadow: var(--shadow);
}
.review-card.hidden {
  opacity: 0.6;
  border-color: rgba(239, 68, 68, 0.2);
}

.rv-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 12px;
  gap: 12px;
  flex-wrap: wrap;
}

.rv-meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.rv-name-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.rv-name {
  font-weight: 800;
  font-size: 0.92rem;
}

.rv-verified {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 0.71rem;
  font-weight: 700;
  background: rgba(34, 197, 94, 0.1);
  color: var(--success);
  border: 1px solid rgba(34, 197, 94, 0.2);
  padding: 2px 7px;
  border-radius: 20px;
}

.rv-product {
  font-size: 0.78rem;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 2px;
}

.rv-date {
  font-size: 0.75rem;
  color: var(--muted);
}

.rv-right {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.stars-row {
  display: flex;
  gap: 2px;
  align-items: center;
}
.stars-row .num {
  font-size: 0.78rem;
  font-weight: 800;
  color: var(--warning);
  margin-inline-start: 5px;
}

.star-icon {
  width: 15px;
  height: 15px;
  color: var(--surface3);
}
.star-icon.filled {
  color: var(--warning);
  fill: var(--warning);
}

.rv-text {
  font-size: 0.88rem;
  line-height: 1.7;
  color: var(--text);
  margin-bottom: 10px;
  font-style: italic;
}
.rv-text.empty {
  color: var(--muted);
  font-style: italic;
}

.rv-reply {
  background: rgba(108, 99, 255, 0.05);
  border: 1px solid rgba(108, 99, 255, 0.15);
  border-radius: 9px;
  padding: 11px 14px;
  margin-top: 8px;
}

.rv-reply-label {
  font-size: 0.74rem;
  font-weight: 800;
  color: var(--accent);
  margin-bottom: 5px;
  display: flex;
  align-items: center;
  gap: 4px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.rv-reply-text {
  font-size: 0.84rem;
  color: var(--muted);
  line-height: 1.5;
}

.rv-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
  flex-wrap: wrap;
}

.review-preview {
  background: var(--surface2);
  border-radius: 11px;
  padding: 14px;
  margin-bottom: 16px;
  border: 1px solid var(--border);
}

/* ── SECTION 25: THEME, BRANDING & MOBILE LIVE MOCKUP ── */
.editor-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 22px;
  align-items: start;
}
@media (max-width: 1100px) {
  .editor-grid {
    grid-template-columns: 1fr;
  }
}

.controls {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.upload-grid {
  display: grid;
  grid-template-columns: 1fr 1.8fr;
  gap: 14px;
  margin-bottom: 16px;
}

.upload-box {
  border: 2px dashed var(--border2);
  border-radius: 12px;
  cursor: pointer;
  background: var(--surface2);
  position: relative;
  overflow: hidden;
  transition: border-color 0.2s;
  min-height: 110px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.upload-box:hover {
  border-color: var(--accent);
}
.upload-box:hover .upload-overlay {
  opacity: 1;
}
.upload-box input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
  width: 100%;
  height: 100%;
  z-index: 2;
}
.upload-box .preview-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}
.upload-box .preview-img.preview-logo {
  object-fit: contain;
  padding: 8px;
}

.upload-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  color: #ffffff;
  font-size: 0.78rem;
  font-weight: 700;
  z-index: 3;
  opacity: 0;
  transition: opacity 0.2s;
}

.upload-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  color: var(--muted);
  padding: 14px;
  pointer-events: none;
  z-index: 1;
}
.upload-placeholder span {
  font-size: 0.78rem;
  font-weight: 600;
}

.color-section {
  margin-bottom: 16px;
}

.color-label {
  font-size: 0.84rem;
  font-weight: 700;
  margin-bottom: 10px;
  display: block;
}

.color-swatches {
  display: flex;
  gap: 9px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

.swatch {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  cursor: pointer;
  border: 3px solid transparent;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.swatch:hover {
  transform: scale(1.1);
}
.swatch.active {
  border-color: var(--text);
  transform: scale(1.12);
}

.custom-color-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
}

.custom-swatch {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: 2px solid var(--border2);
  cursor: pointer;
  flex-shrink: 0;
}

.custom-hex {
  width: 90px;
  padding: 8px 10px;
  background: var(--input-bg);
  border: 1.5px solid var(--border2);
  border-radius: 8px;
  color: var(--text);
  font-family: monospace;
  font-size: 0.82rem;
  outline: none;
}
.custom-hex:focus {
  border-color: var(--accent);
}

.emoji-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.emoji-item {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  background: var(--surface2);
  border: 1.5px solid var(--border2);
  border-radius: 9px;
  cursor: pointer;
  transition: all 0.2s;
}
.emoji-item:hover {
  transform: scale(1.1);
  border-color: var(--accent);
}
.emoji-item.active {
  border-color: var(--accent);
  background: rgba(108, 99, 255, 0.1);
}

.emoji-none {
  font-size: 0.72rem;
  color: var(--muted);
}

.preview-panel {
  background: var(--surface2);
  border: 1.5px dashed var(--border2);
  border-radius: 18px;
  padding: 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: sticky;
  top: 22px;
}

.preview-head {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
}

.preview-label {
  font-size: 0.82rem;
  color: var(--muted);
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 6px;
}

.preview-lang-btns {
  display: flex;
  gap: 4px;
}

.plang-btn {
  background: transparent;
  border: 1.5px solid var(--border2);
  color: var(--muted);
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.2s;
}
.plang-btn.active {
  background: var(--accent);
  color: #ffffff;
  border-color: var(--accent);
}

.phone-wrap {
  width: 100%;
  max-width: 300px;
}

.phone {
  width: 100%;
  aspect-ratio: 9/18;
  background: #ffffff;
  border-radius: 36px;
  border: 10px solid #1a1a2e;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5), inset 0 0 0 1px rgba(255, 255, 255, 0.05);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  position: relative;
}

[data-theme=light] .phone {
  border-color: #374151;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
}

.phone-notch {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 70px;
  height: 22px;
  background: #1a1a2e;
  border-radius: 0 0 14px 14px;
  z-index: 20;
}

[data-theme=light] .phone-notch {
  background: #374151;
}

.mock-statusbar {
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 14px;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10;
}

.mock-time {
  font-size: 0.6rem;
  font-weight: 800;
  color: rgba(255, 255, 255, 0.9);
}

.mock-icons {
  display: flex;
  gap: 3px;
  align-items: center;
}

.mock-cover {
  width: 100%;
  height: 140px;
  position: relative;
  flex-shrink: 0;
}
.mock-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mock-cover-bg {
  width: 100%;
  height: 100%;
}

.mock-cover-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.2) 0%, transparent 50%, rgba(0, 0, 0, 0.1) 100%);
}

.mock-topbar-icons {
  position: absolute;
  top: 28px;
  left: 0;
  right: 0;
  padding: 0 14px;
  display: flex;
  justify-content: space-between;
  z-index: 11;
}

.mock-icon-circle {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
}

.mock-profile {
  background: #ffffff;
  border-radius: 20px 20px 0 0;
  flex: 1;
  margin-top: -18px;
  position: relative;
  z-index: 5;
  padding-bottom: 12px;
}

.mock-logo-wrap {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: #ffffff;
  border: 3px solid #ffffff;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  overflow: hidden;
  margin: -32px auto 0;
  position: relative;
  z-index: 10;
}
.mock-logo-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mock-store-name {
  font-weight: 900;
  font-size: 1rem;
  color: #0f172a;
  margin-top: 8px;
  text-align: center;
  padding: 0 12px;
  line-height: 1.2;
}

.mock-subtitle-text {
  font-size: 0.72rem;
  font-weight: 700;
  text-align: center;
  margin-top: 3px;
  padding: 0 12px;
}

.mock-bio-text {
  font-size: 0.65rem;
  color: #64748b;
  text-align: center;
  padding: 6px 14px 8px;
  line-height: 1.5;
}

.mock-cta {
  margin: 4px auto 12px;
  padding: 8px 20px;
  border-radius: 20px;
  font-size: 0.7rem;
  font-weight: 800;
  border: none;
  color: #ffffff;
  cursor: default;
  display: block;
}

.mock-divider {
  height: 1px;
  background: #f1f5f9;
  margin: 0 14px 10px;
}

.mock-products-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding: 0 12px;
}

.mock-product-card {
  background: #f8fafc;
  border-radius: 10px;
  overflow: hidden;
}

.mock-product-img {
  height: 70px;
  background: #e2e8f0;
}

.mock-product-info {
  padding: 6px 8px;
}

.mock-product-line {
  height: 6px;
  background: #e2e8f0;
  border-radius: 3px;
  margin-bottom: 4px;
  width: 80%;
}

.mock-product-price {
  height: 6px;
  border-radius: 3px;
  width: 50%;
}

/* ── SECTION 26: APP STORE & INTEGRATIONS ── */
.apps-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(310px, 1fr));
  gap: 18px;
}

.app-card {
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  transition: all 0.25s;
  overflow: hidden;
  position: relative;
}
.app-card:hover {
  border-color: var(--border2);
  box-shadow: var(--shadow);
  transform: translateY(-2px);
}
.app-card.installed {
  border-color: rgba(34, 197, 94, 0.2);
}

.app-card-inner {
  padding: 20px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.app-accent-bar {
  height: 3px;
  width: 100%;
}

.app-head {
  display: flex;
  gap: 14px;
  margin-bottom: 14px;
  align-items: flex-start;
}

.app-icon-wrap {
  width: 54px;
  height: 54px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 1.6rem;
  border: 1.5px solid var(--border2);
}

.app-meta {
  flex: 1;
  min-width: 0;
}

.app-name {
  font-size: 0.98rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 3px;
}

.app-installed-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 0.7rem;
  font-weight: 700;
  background: rgba(34, 197, 94, 0.1);
  color: var(--success);
  border: 1px solid rgba(34, 197, 94, 0.2);
  padding: 2px 6px;
  border-radius: 20px;
}

.app-new-badge {
  font-size: 0.7rem;
  font-weight: 800;
  background: rgba(59, 130, 246, 0.1);
  color: var(--info);
  border: 1px solid rgba(59, 130, 246, 0.2);
  padding: 2px 7px;
  border-radius: 20px;
}

.app-cat {
  font-size: 0.76rem;
  font-weight: 700;
  margin-bottom: 5px;
  display: flex;
  align-items: center;
  gap: 4px;
}

.app-tags {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
}

.app-tag {
  font-size: 0.7rem;
  background: var(--surface2);
  color: var(--muted);
  padding: 2px 7px;
  border-radius: 4px;
  font-weight: 600;
}

.app-desc {
  font-size: 0.83rem;
  color: var(--muted);
  line-height: 1.6;
  flex: 1;
  margin-bottom: 16px;
}

.app-features {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-bottom: 14px;
}
.app-features li {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 0.78rem;
  color: var(--muted);
}

.feat-dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--accent);
  flex-shrink: 0;
}

.app-footer {
  padding: 13px 20px;
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--surface2);
  flex-wrap: wrap;
  gap: 8px;
}

.app-price {
  font-size: 0.8rem;
  font-weight: 700;
}
.app-price.price-free {
  color: var(--success);
}
.app-price.price-paid {
  color: var(--warning);
}

.installed-card {
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: 16px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: all 0.2s;
}
.installed-card.active-app {
  border-color: rgba(34, 197, 94, 0.25);
}
.installed-card:hover {
  box-shadow: var(--shadow);
}

.installed-head {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}

.installed-info {
  flex: 1;
}

.installed-name {
  font-size: 0.98rem;
  font-weight: 800;
  margin-bottom: 3px;
}

.installed-since {
  font-size: 0.74rem;
  color: var(--muted);
}

.installed-settings-preview {
  background: var(--surface2);
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 0.76rem;
  color: var(--muted);
  font-family: monospace;
  border: 1px solid var(--border);
  max-height: 60px;
  overflow: hidden;
  position: relative;
}
.installed-settings-preview::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 20px;
  background: linear-gradient(transparent, var(--surface2));
}

.installed-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}

.setup-note {
  background: rgba(108, 99, 255, 0.05);
  border: 1px solid rgba(108, 99, 255, 0.15);
  border-radius: 9px;
  padding: 12px 14px;
  font-size: 0.83rem;
  color: var(--muted);
  margin-bottom: 16px;
  line-height: 1.6;
  display: flex;
  gap: 9px;
}

/* ── SECTION 27: STORE SETTINGS & CONFIGURATION ── */
.settings-wrap {
  max-width: 960px;
  width: 100%;
  display: flex;
  gap: 22px;
  align-items: flex-start;
}
@media (max-width: 860px) {
  .settings-wrap {
    flex-direction: column;
  }
}
.settings-wrap .tabs-nav {
  width: 210px;
  flex-shrink: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  position: sticky;
  top: 0;
}
@media (max-width: 860px) {
  .settings-wrap .tabs-nav {
    width: 100%;
    flex-direction: row;
    overflow-x: auto;
    position: static;
  }
}
.settings-wrap .tabs-nav .tab-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 14px;
  border-radius: 9px;
  cursor: pointer;
  color: var(--muted);
  font-weight: 600;
  font-size: 0.88rem;
  white-space: nowrap;
  transition: all 0.2s;
  border-bottom: none;
}
.settings-wrap .tabs-nav .tab-btn:hover {
  background: var(--surface2);
  color: var(--text);
}
.settings-wrap .tabs-nav .tab-btn.active {
  background: rgba(108, 99, 255, 0.1);
  color: var(--accent);
}

.tab-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--success);
  flex-shrink: 0;
  display: none;
}
.tab-dot.show {
  display: block;
}

.tab-content {
  flex: 1;
  min-width: 0;
}

.settings-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 24px;
  margin-bottom: 18px;
}
.settings-card:last-child {
  margin-bottom: 0;
}

.section-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 18px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}

.section-title {
  font-size: 0.98rem;
  font-weight: 800;
  color: var(--text);
}

.section-sub {
  font-size: 0.8rem;
  color: var(--muted);
  margin-top: 3px;
}

.input-prefix {
  padding: 10px 13px;
  background: var(--surface3);
  border: 1.5px solid var(--border2);
  border-inline-end: none;
  border-radius: 9px 0 0 9px;
  font-size: 0.85rem;
  color: var(--muted);
  font-weight: 600;
  display: flex;
  align-items: center;
  white-space: nowrap;
}
html[dir=rtl] .input-prefix {
  border-radius: 0 9px 9px 0;
  border-inline-end: 1.5px solid var(--border2);
  border-inline-start: none;
}

.input-group {
  display: flex;
  gap: 0;
}
.input-group .form-control {
  border-radius: 0 9px 9px 0;
}
html[dir=rtl] .input-group .form-control {
  border-radius: 9px 0 0 9px;
}

.color-picker-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.color-swatch {
  width: 36px;
  height: 36px;
  border-radius: 9px;
  border: 2px solid var(--border2);
  cursor: pointer;
  flex-shrink: 0;
}

.color-input {
  width: 80px;
  padding: 9px 10px;
  background: var(--input-bg);
  border: 1.5px solid var(--border2);
  border-radius: 9px;
  color: var(--text);
  font-family: monospace;
  font-size: 0.82rem;
  outline: none;
}

.color-presets {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.preset {
  width: 28px;
  height: 28px;
  border-radius: 7px;
  cursor: pointer;
  border: 2px solid transparent;
  transition: all 0.2s;
  flex-shrink: 0;
}
.preset:hover, .preset.active {
  border-color: var(--text);
  transform: scale(1.1);
}

.ship-table {
  width: 100%;
  border-collapse: collapse;
}
.ship-table th {
  text-align: start;
  padding: 10px 14px;
  background: var(--surface2);
  border-bottom: 1.5px solid var(--border2);
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.ship-table td {
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}
.ship-table tr:last-child td {
  border-bottom: none;
}

.ship-input {
  width: 100px;
  padding: 7px 10px;
  background: var(--input-bg);
  border: 1.5px solid var(--border2);
  border-radius: 7px;
  color: var(--text);
  font-family: inherit;
  font-size: 0.88rem;
  outline: none;
  text-align: center;
  transition: border-color 0.2s;
}
.ship-input:focus {
  border-color: var(--accent);
}

.free-badge {
  font-size: 0.7rem;
  font-weight: 700;
  background: rgba(34, 197, 94, 0.1);
  color: var(--success);
  padding: 2px 6px;
  border-radius: 4px;
}

.ship-bulk {
  display: flex;
  gap: 8px;
  margin-bottom: 14px;
  flex-wrap: wrap;
  align-items: center;
}

.pixel-card {
  background: var(--surface2);
  border: 1.5px solid var(--border2);
  border-radius: 11px;
  padding: 14px 16px;
  margin-bottom: 12px;
  transition: border-color 0.2s;
}
.pixel-card.connected {
  border-color: rgba(34, 197, 94, 0.25);
}

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

.pixel-platform {
  display: flex;
  align-items: center;
  gap: 9px;
  font-weight: 800;
  font-size: 0.9rem;
}

.pixel-icon {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  flex-shrink: 0;
}

.connected-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--success);
  animation: blink 2s ease-in-out infinite;
}

@keyframes blink {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.3;
  }
}
.danger-card {
  background: rgba(239, 68, 68, 0.04);
  border: 1.5px solid rgba(239, 68, 68, 0.25);
  border-radius: 12px;
  padding: 20px;
}

.danger-title {
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--danger);
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 7px;
}

.danger-desc {
  font-size: 0.83rem;
  color: var(--muted);
  margin-bottom: 16px;
  line-height: 1.6;
}

.unsaved-bar {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  width: min(760px, calc(100vw - 32px));
  max-width: 92%;
  background: var(--surface);
  background: rgba(24, 25, 30, 0.92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1.5px solid var(--border2);
  border-radius: 16px;
  padding: 12px 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  z-index: 1050;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.06);
  transition: all 0.25s ease;
  animation: unsavedFloatIn 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

[data-theme="light"] .unsaved-bar {
  background: rgba(255, 255, 255, 0.94);
  border-color: rgba(0, 0, 0, 0.14);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(0, 0, 0, 0.04);
}

@keyframes unsavedFloatIn {
  from {
    opacity: 0;
    transform: translate(-50%, 18px) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translate(-50%, 0) scale(1);
  }
}

.unsaved-msg {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--warning);
  display: flex;
  align-items: center;
  gap: 7px;
}

.unsaved-btns {
  display: flex;
  gap: 10px;
}

@media (max-width: 1024px) {
  .grid-4 {
    grid-template-columns: repeat(2, 1fr);
  }
  .grid-3 {
    grid-template-columns: repeat(2, 1fr);
  }
  .grid-2-1 {
    grid-template-columns: 1fr;
  }
  .ob-preview {
    display: none;
  }
}
@media (max-width: 768px) {
  .sidebar {
    position: fixed;
    inset-inline-start: 0;
    top: 0;
    bottom: 0;
    transform: translateX(100%);
  }
  [dir=ltr] .sidebar {
    transform: translateX(-100%);
  }
  .sidebar.open {
    transform: translateX(0);
  }
  .sidebar-close-btn {
    display: block;
  }
  .mobile-topbar {
    display: flex;
  }
  .mobile-bottom-nav {
    display: flex;
  }
  .top-nav {
    padding: 0 16px;
  }
  .grid-4, .grid-3, .grid-2 {
    grid-template-columns: 1fr;
  }
  .content-scroll {
    padding: 16px;
    padding-bottom: 80px;
  }
  .step-card {
    padding: 20px 16px;
  }
  .upload-grid {
    flex-direction: column;
  }
  .upload-logo-col {
    width: 100%;
  }
}
/* ----------------------------------------------------
   28. Login & Auth Page (.login-page)
---------------------------------------------------- */
.login-page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  padding: 30px 20px;
  background: var(--bg);
  box-sizing: border-box;
}

.top-controls {
  position: absolute;
  top: 24px;
  left: 24px;
  right: 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 10;
}

.brand-logo-text {
  font-weight: 800;
  color: var(--text-primary, var(--text));
  font-size: 1.05rem;
  letter-spacing: 0.5px;
}

.top-controls-right {
  display: flex;
  align-items: center;
  gap: 10px;
}

.control-btn {
  background: var(--surface2);
  border: 1px solid var(--border);
  color: var(--text-primary, var(--text));
  border-radius: 10px;
  padding: 7px 12px;
  font-size: 0.88rem;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: all 0.2s;
}
.control-btn:hover {
  background: var(--surface3, var(--surface));
  border-color: var(--border-hover, var(--border));
}

.lang-btn {
  font-size: 0.85rem;
  font-weight: 700;
}

.ctrl-icon {
  width: 17px;
  height: 17px;
}

.auth-container {
  width: 100%;
  max-width: 440px;
  margin: auto;
  padding: 10px;
  box-sizing: border-box;
}

.auth-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 24px;
  padding: 38px 32px;
  box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.35);
}

.logo-area {
  text-align: center;
  margin-bottom: 26px;
}

.logo-title {
  font-size: 1.65rem;
  font-weight: 800;
  color: var(--text-primary, var(--text));
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 0;
}

.logo-icon {
  width: 26px;
  height: 26px;
  color: #38bdf8;
}

.logo-slogan {
  color: var(--text-secondary, var(--muted));
  font-size: 0.88rem;
  margin-top: 6px;
  margin-bottom: 0;
  text-align: center;
}

.auth-tabs {
  display: flex;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 4px;
  margin-bottom: 24px;
}

.auth-tab {
  flex: 1;
  text-align: center;
  padding: 9px;
  color: var(--text-secondary, var(--muted));
  cursor: pointer;
  border-radius: 8px;
  font-weight: 700;
  font-size: 0.9rem;
  transition: all 0.2s;
  user-select: none;
}
.auth-tab:hover {
  color: var(--text-primary, var(--text));
}
.auth-tab.active {
  background: var(--surface);
  color: var(--text-primary, var(--text));
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.auth-card .input-group,
.login-page .input-group {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  margin-bottom: 18px;
  text-align: start;
  width: 100%;
  gap: 0;
}

.auth-card .input-label,
.login-page .input-label {
  display: block;
  width: 100%;
  margin-bottom: 7px;
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--text-primary, var(--text));
  text-align: start;
}

.auth-card .input-wrapper,
.login-page .input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
}

.icon-prefix {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  inset-inline-start: 14px;
  pointer-events: none;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
}

.icon-suffix {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  inset-inline-end: 14px;
  cursor: pointer;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
}

.input-icon {
  width: 18px;
  height: 18px;
  color: var(--text-secondary, var(--muted));
}

.toggle-pwd-icon {
  width: 18px;
  height: 18px;
  color: var(--text-secondary, var(--muted));
  transition: color 0.15s;
}
.toggle-pwd-icon:hover {
  color: var(--text-primary, var(--text));
}

.form-input {
  width: 100%;
  background: var(--surface2);
  border: 1.5px solid var(--border);
  color: var(--text-primary, var(--text));
  padding: 13px 14px;
  border-radius: 12px;
  font-family: inherit;
  font-size: 0.94rem;
  outline: none;
  padding-inline-start: 42px;
  padding-inline-end: 42px;
  transition: border-color 0.2s, background-color 0.2s, box-shadow 0.2s;
  box-sizing: border-box;
}
.form-input:focus {
  border-color: #38bdf8;
  background: var(--surface);
  box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.15);
}
.form-input.error {
  border-color: #ef4444;
}
.form-input {
  /* Prevent browser autofill from making the input bright white with unreadable text */
}
.form-input:-webkit-autofill, .form-input:-webkit-autofill:hover, .form-input:-webkit-autofill:focus, .form-input:-webkit-autofill:active {
  -webkit-text-fill-color: var(--text-primary, #ffffff) !important;
  -webkit-box-shadow: 0 0 0px 1000px var(--surface2) inset !important;
  box-shadow: 0 0 0px 1000px var(--surface2) inset !important;
  transition: background-color 5000s ease-in-out 0s;
}

.field-error {
  color: #ef4444;
  font-size: 0.78rem;
  margin-top: 5px;
  display: block;
  font-weight: 500;
}

.forgot-pass {
  display: flex;
  justify-content: flex-end;
  margin-top: -6px;
  margin-bottom: 20px;
}

.forgot-link {
  color: #38bdf8;
  font-size: 0.85rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: color 0.15s;
}
.forgot-link:hover {
  color: #7dd3fc;
  text-decoration: underline;
}

.btn-primary-auth {
  width: 100%;
  background: #ffffff;
  color: #09090b !important;
  border: 1px solid rgba(255, 255, 255, 0.9);
  padding: 13px 16px;
  border-radius: 12px;
  font-size: 0.98rem;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  font-family: inherit;
  transition: all 0.2s;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2);
}
.btn-primary-auth span, .btn-primary-auth i, .btn-primary-auth [data-lucide] {
  color: #09090b !important;
}
.btn-primary-auth .btn-icon {
  width: 18px;
  height: 18px;
}
.btn-primary-auth:hover:not(:disabled) {
  background: #f4f4f5;
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(255, 255, 255, 0.15);
}
.btn-primary-auth:active:not(:disabled) {
  transform: translateY(0);
  background: #e4e4e7;
}
.btn-primary-auth:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

[data-theme=light] .btn-primary-auth {
  background: #09090b;
  color: #ffffff !important;
  border-color: #09090b;
}
[data-theme=light] .btn-primary-auth span, [data-theme=light] .btn-primary-auth i, [data-theme=light] .btn-primary-auth [data-lucide] {
  color: #ffffff !important;
}
[data-theme=light] .btn-primary-auth:hover:not(:disabled) {
  background: #27272a;
}

.divider-auth {
  display: flex;
  align-items: center;
  text-align: center;
  margin: 22px 0;
  color: var(--text-secondary, var(--muted));
  font-size: 0.8rem;
  font-weight: 600;
}
.divider-auth::before, .divider-auth::after {
  content: "";
  flex: 1;
  border-bottom: 1px solid var(--border);
}
.divider-auth::before {
  margin-inline-end: 14px;
}
.divider-auth::after {
  margin-inline-start: 14px;
}

.guinrank-btn {
  width: 100%;
  position: relative;
  background: linear-gradient(135deg, #0284c7 0%, #0369a1 55%, #075985 100%);
  color: #ffffff !important;
  border: 1px solid rgba(56, 189, 248, 0.45);
  border-radius: 14px;
  padding: 12px 18px;
  font-size: 0.95rem;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: inherit;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 4px 18px rgba(2, 132, 199, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.22);
  overflow: hidden;
}
.guinrank-btn::after {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 60%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.18), transparent);
  transition: left 0.6s ease;
}
.guinrank-btn span, .guinrank-btn i, .guinrank-btn [data-lucide] {
  color: #ffffff !important;
}
.guinrank-btn:hover:not(:disabled) {
  background: linear-gradient(135deg, #0369a1 0%, #0284c7 50%, #38bdf8 100%);
  transform: translateY(-2px);
  box-shadow: 0 8px 26px rgba(2, 132, 199, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.35);
  border-color: rgba(125, 211, 252, 0.7);
}
.guinrank-btn:hover:not(:disabled)::after {
  left: 140%;
}
.guinrank-btn:active:not(:disabled) {
  transform: translateY(0);
  box-shadow: 0 2px 10px rgba(2, 132, 199, 0.3);
}
.guinrank-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
.guinrank-btn .guinrank-icon-box {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(4px);
}
.guinrank-btn .guinrank-tag {
  font-size: 0.68rem;
  letter-spacing: 0.5px;
  padding: 2px 7px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: #fff !important;
  margin-inline-start: auto;
  font-weight: 800;
  text-transform: uppercase;
}
.guinrank-btn .sso-icon {
  width: 16px;
  height: 16px;
}

.forgot-head {
  text-align: center;
  margin-bottom: 24px;
}

.forgot-icon {
  width: 44px;
  height: 44px;
  color: #38bdf8;
  margin-bottom: 12px;
}

.forgot-title {
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--text-primary, var(--text));
  margin: 0;
}

.forgot-desc {
  color: var(--text-secondary, var(--muted));
  font-size: 0.88rem;
  margin-top: 6px;
  line-height: 1.5;
}

.back-login-wrap {
  text-align: center;
  margin-top: 20px;
}

.back-login-link {
  color: var(--text-secondary, var(--muted));
  cursor: pointer;
  font-weight: 700;
  font-size: 0.88rem;
  text-decoration: none;
  transition: color 0.15s;
}
.back-login-link:hover {
  color: var(--text-primary, var(--text));
  text-decoration: underline;
}

.register-guinrank-box {
  text-align: center;
  padding: 6px 0 2px 0;
}

.reg-notice {
  text-align: center;
  margin-bottom: 22px;
  padding: 22px 18px;
  border-radius: 16px;
  background: rgba(2, 132, 199, 0.05);
  border: 1px solid rgba(56, 189, 248, 0.2);
}
.reg-notice .reg-notice-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(2, 132, 199, 0.12);
  color: #0284c7;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 12px auto;
}
.reg-notice .reg-notice-icon i, .reg-notice .reg-notice-icon [data-lucide] {
  width: 24px;
  height: 24px;
  stroke-width: 2.2px;
  color: #0284c7 !important;
}
.reg-notice .reg-notice-title {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--text-primary, var(--text));
  margin: 0 0 8px 0;
}
.reg-notice .reg-notice-desc {
  color: var(--text-secondary, var(--muted));
  font-size: 0.88rem;
  line-height: 1.6;
  margin: 0;
}

.guinrank-btn-register {
  padding: 13px 20px;
  font-size: 0.98rem;
  box-shadow: 0 6px 22px rgba(2, 132, 199, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

@media (max-width: 640px) {
  .top-controls {
    top: 16px;
    left: 16px;
    right: 16px;
  }
  .auth-card {
    padding: 28px 20px;
    border-radius: 20px;
  }
}

/* ══════════════════════════════════════════════════════════════
   LANGUAGE SELECTION PILLS & DIRECTION CHOICE GRID (GLOBAL)
   ══════════════════════════════════════════════════════════════ */
.lang-pills-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)) !important;
  gap: 8px !important;
  width: 100% !important;
}

.btn-lang-pill {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 8px 12px !important;
  background: var(--surface, #1e1e24) !important;
  border: 1.5px solid var(--border, rgba(255, 255, 255, 0.08)) !important;
  border-radius: 10px !important;
  color: var(--text, #f3f4f6) !important;
  cursor: pointer !important;
  font-size: 0.84rem !important;
  font-weight: 600 !important;
  transition: all 0.2s ease !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
  text-align: start !important;
}

.btn-lang-pill:hover {
  border-color: var(--accent, #6c63ff) !important;
  background: var(--surface2, #26262e) !important;
  transform: translateY(-1px) !important;
}

.btn-lang-pill.active {
  border-color: var(--accent, #6c63ff) !important;
  background: rgba(108, 99, 255, 0.12) !important;
  box-shadow: 0 0 0 1.5px var(--accent, #6c63ff), 0 4px 12px rgba(108, 99, 255, 0.18) !important;
  color: var(--accent, #6c63ff) !important;
}

.btn-lang-pill .pill-flag {
  font-size: 1.2rem !important;
  line-height: 1 !important;
}

.btn-lang-pill .pill-name {
  flex: 1 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  text-align: start !important;
}

.btn-lang-pill .pill-code {
  font-size: 0.68rem !important;
  opacity: 0.65 !important;
  font-weight: 800 !important;
  letter-spacing: 0.04em !important;
}